/**
 * Matezex Catalog — Filters & Product Table.
 *
 * All selectors prefixed with .matezex-catalog to override WP theme styles.
 *
 * @package Matezex_Catalog_Mode
 */

/* === Catalog wrapper === */
.matezex-catalog {
	position: relative;
	/* Responsive bands below are driven by THIS element's width (container
	   queries), not the viewport — the table adapts to the space it actually
	   has, regardless of theme layout / filter panel state. */
	container-type: inline-size;
	container-name: matezex;
}

/* === Loading overlay === */
.matezex-catalog .matezex-loading {
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
}

.matezex-catalog .matezex-spinner {
	width: 30px;
	height: 30px;
	border: 3px solid #ddd;
	border-top-color: #333;
	border-radius: 50%;
	animation: matezex-spin 0.6s linear infinite;
}

@keyframes matezex-spin {
	to { transform: rotate(360deg); }
}

/* =========================================================================
   Filter panel — header + collapsible body
   ========================================================================= */

.matezex-catalog .matezex-filter-panel {
	display: flex;
	flex-direction: column;
	margin-bottom: 16px;
}

/* --- Filter header bar --- */
.matezex-catalog .matezex-filter-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #d9e1e7;
	padding: 8px 24px;
	border-radius: 16px 16px 0 0;
	min-height: 44px;
	box-sizing: border-box;
}

.matezex-catalog .matezex-filter-title {
	font-size: 20px;
	font-weight: 500;
	color: #0a0d0f;
	line-height: 1;
}

.matezex-catalog .matezex-filter-header-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.matezex-catalog .matezex-clear-all-filters {
	font-size: 16px;
	font-weight: 500;
	color: #0a0d0f !important;
	background: none !important;
	background-color: transparent !important;
	border: none;
	cursor: pointer;
	text-decoration: underline;
	padding: 12px 16px;
	line-height: 20px;
}

.matezex-catalog .matezex-clear-all-filters:hover,
.matezex-catalog .matezex-clear-all-filters:focus {
	color: #004cfe !important;
	background: none !important;
	background-color: transparent !important;
}

.matezex-catalog .matezex-filter-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	background: none !important;
	background-color: transparent !important;
	border: none;
	cursor: pointer;
	padding: 8px;
	color: #0a0d0f !important;
	transition: transform 0.2s ease;
}

.matezex-catalog .matezex-filter-toggle:hover,
.matezex-catalog .matezex-filter-toggle:focus {
	background: none !important;
	background-color: transparent !important;
	color: #004cfe !important;
}

.matezex-catalog .matezex-filter-toggle[aria-expanded="false"] {
	transform: rotate(180deg);
}

/* --- Filter body --- */
.matezex-catalog .matezex-filter-body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	background: #ecf0f3;
	padding: 24px;
	border-radius: 0 0 16px 16px;
	overflow: hidden;
	transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.2s ease;
}

.matezex-catalog .matezex-filter-body.is-collapsed {
	max-height: 0 !important;
	padding-top: 0;
	padding-bottom: 0;
	opacity: 0;
	overflow: hidden;
}

/* --- Filter row (label left, pills right) --- */
.matezex-catalog .matezex-filter-row {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	width: 100%;
}

.matezex-catalog .matezex-filter-label {
	flex-shrink: 0;
	font-size: 16px;
	font-weight: 500;
	color: #52697a;
	line-height: 1;
	padding-top: 8px;
	white-space: nowrap;
}

.matezex-catalog .matezex-filter-options {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	flex: 1 1 0;
	min-width: 0;
}

/* === Filter pills === */
.matezex-catalog .matezex-filter-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 16px;
	border: 1.5px solid transparent !important;
	border-radius: 9999px !important;
	background: #fff !important;
	background-color: #fff !important;
	font-size: 14px !important;
	font-weight: 500;
	color: #0a0d0f !important;
	cursor: pointer;
	transition: all 0.15s ease;
	line-height: 20px;
	height: 36px;
	box-sizing: border-box;
}

.matezex-catalog .matezex-filter-pill:hover,
.matezex-catalog .matezex-filter-pill:focus {
	border-color: #004cfe !important;
	background: #fff !important;
	background-color: #fff !important;
	color: #0a0d0f !important;
}

.matezex-catalog .matezex-filter-pill.is-active {
	background: #fff !important;
	background-color: #fff !important;
	color: #0a0d0f !important;
	border-color: #004cfe !important;
}

.matezex-catalog .matezex-filter-pill.is-active:hover,
.matezex-catalog .matezex-filter-pill.is-active:focus {
	background: #f0f4ff !important;
	background-color: #f0f4ff !important;
	color: #0a0d0f !important;
	border-color: #004cfe !important;
}

.matezex-catalog .matezex-filter-pill.is-disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.matezex-catalog .matezex-filter-pill.is-disabled:hover,
.matezex-catalog .matezex-filter-pill.is-disabled:focus {
	border-color: transparent !important;
	background: #fff !important;
	background-color: #fff !important;
	color: #0a0d0f !important;
}

/* --- Filter info text --- */
.matezex-catalog .matezex-filter-info {
	font-size: 16px;
	font-weight: 500;
	color: #0a0d0f;
	line-height: 1;
	min-height: 44px;
	display: flex;
	align-items: center;
}

/* --- "Zvolené produkty" scroll button --- */
.matezex-catalog .matezex-filter-scroll-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 16px;
	background: #004cfe !important;
	background-color: #004cfe !important;
	color: #eff2f5 !important;
	border: none !important;
	border-radius: 9999px !important;
	font-size: 16px !important;
	font-weight: 500;
	cursor: pointer;
	line-height: 20px;
	transition: background 0.15s ease;
	align-self: flex-start;
}

.matezex-catalog .matezex-filter-scroll-btn:hover,
.matezex-catalog .matezex-filter-scroll-btn:focus {
	background: #0040d6 !important;
	background-color: #0040d6 !important;
	color: #eff2f5 !important;
}

.matezex-catalog .matezex-filter-scroll-btn svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

/* === Results count === */
.matezex-catalog .matezex-results-count {
	font-size: 13px;
	color: #666;
	margin-bottom: 8px;
}

/* =========================================================================
   Table wrapper — horizontal scroll safety
   ========================================================================= */

.matezex-catalog .matezex-table-wrapper {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* =========================================================================
   Product table
   ========================================================================= */

.matezex-catalog .matezex-product-table {
	width: 100% !important;
	border-collapse: collapse !important;
	border-spacing: 0 !important;
	font-size: 14px !important;
	table-layout: auto !important;
	border: none !important;
}

/* --- Blue title row --- */
.matezex-catalog .matezex-table-title-row th {
	background: #004cfe !important;
	color: #fff !important;
	font-size: 18px !important;
	font-weight: 500 !important;
	padding: 8px 16px !important;
	text-align: left !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	line-height: 40px !important;
	border: none !important;
	border-radius: 16px 16px 0 0;
	position: sticky;
	top: 0;
	z-index: 6;
}

/* --- Column header row --- */
.matezex-catalog .matezex-table-columns-row th {
	background: #d9e1e7 !important;
	color: #000f26 !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	padding: 14px 16px !important;
	text-align: left !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	border: none !important;
	border-bottom: 1px solid #fff !important;
	vertical-align: top;
	line-height: 1.3;
	position: sticky;
	top: 56px;
	z-index: 5;
}

/* --- Column sizing ---
 * Množství + Akce: shrink-to-fit (1% + nowrap) — každý si vezme jen tolik,
 * kolik potřebují jeho pilulky, resp. tlačítka.
 * Attr + Produkt: stretch to fill remaining space evenly.
 */
.matezex-catalog .matezex-col-quantity,
.matezex-catalog .matezex-col-actions {
	width: 1% !important;
	white-space: nowrap;
}

/* Pin the action column to the right edge so the primary CTA (Objednat) is
   never the element that gets clipped if a wide category ever forces
   horizontal scroll (NN/g: keep the row's key action in view). This is inert
   when the table fits — sticky has nothing to scroll past. Reset in card mode. */
.matezex-catalog .matezex-product-table th.matezex-col-actions,
.matezex-catalog .matezex-product-table td.matezex-col-actions {
	position: sticky;
	right: 0;
	z-index: 4;
}

.matezex-catalog .matezex-table-columns-row th.matezex-col-actions {
	z-index: 7;
}

/* --- Sortable column headers --- */
.matezex-catalog .matezex-sort-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}

/* Neutralize hello-elementor reset.css, which paints every <button> pink on
   hover/focus: `[type=button]:hover { background-color:#c36; color:#fff }`.
   That selector's specificity (0,2,0) ties ours and reset.css loads after the
   plugin CSS, so it wins the tie. Keep the sort headers flat — no pill on hover. */
.matezex-catalog .matezex-sort-btn:hover,
.matezex-catalog .matezex-sort-btn:focus,
.matezex-catalog .matezex-sort-btn:active {
	background: none !important;
	color: inherit !important;
}

.matezex-catalog .matezex-sort-btn:hover .matezex-sort-label {
	text-decoration: underline;
}

.matezex-catalog .matezex-sort-btn:focus-visible {
	outline: 2px solid #004cfe;
	outline-offset: 2px;
}

.matezex-catalog .matezex-sort-arrow {
	flex: 0 0 auto;
	line-height: 1;
}

.matezex-catalog .matezex-sort-arrow::after {
	content: "\2195"; /* ↕ neutral (unsorted) */
	opacity: 0.4;
	font-size: 12px;
}

.matezex-catalog .matezex-table-columns-row th[aria-sort="ascending"] .matezex-sort-arrow::after {
	content: "\2191"; /* ↑ */
	opacity: 1;
}

.matezex-catalog .matezex-table-columns-row th[aria-sort="descending"] .matezex-sort-arrow::after {
	content: "\2193"; /* ↓ */
	opacity: 1;
}

/* Mobile sort control — hidden on desktop (clickable headers handle sorting there). */
.matezex-catalog .matezex-sort-control {
	display: none;
}

/* --- Body cells --- */
.matezex-catalog .matezex-product-table tbody td {
	padding: 14px 16px !important;
	border: none !important;
	border-bottom: 1px solid #fff !important;
	vertical-align: middle;
	background: #ecf0f3 !important;
	font-variant-numeric: tabular-nums;
}

.matezex-catalog .matezex-product-table tbody td.matezex-col-name {
	min-width: 180px;
}

.matezex-catalog .matezex-product-table tbody tr:hover td {
	background: #e4eaf0 !important;
}

.matezex-catalog .matezex-table-row.is-on-sale td {
	background: #ecf0f3 !important;
}

/* --- Row highlight: product is in a cart --- */
.matezex-catalog .matezex-table-row.is-in-cart td {
	background: #d2dfff !important;
}

.matezex-catalog .matezex-table-row.is-in-cart:hover td {
	background: #c5d4fc !important;
}

/* --- Round the table's bottom corners to mirror the rounded blue title bar on
   top (and the site-wide info tables). border-collapse is `collapse`, so we clip
   the last row's outer cells and drop their white separator border so the radius
   reads as the table's outer edge. In card mode (≤1100px container) the cell
   backgrounds are transparent, so this is inert there. */
.matezex-catalog .matezex-product-table tbody tr:last-child td {
	border-bottom: none !important;
}

.matezex-catalog .matezex-product-table tbody tr:last-child td:first-child {
	border-bottom-left-radius: 16px;
}

.matezex-catalog .matezex-product-table tbody tr:last-child td:last-child {
	border-bottom-right-radius: 16px;
}

/* --- Active cart button: hide original icon, show close icon --- */
.matezex-catalog button.matezex-btn.is-active .matezex-btn-icon {
	display: none !important;
}

.matezex-catalog button.matezex-btn.is-active .matezex-btn-close {
	display: inline-flex !important;
	align-items: center;
	margin-left: 4px;
}

.matezex-catalog button.matezex-btn.is-active .matezex-btn-close svg {
	width: 14px !important;
	height: 14px !important;
	stroke: currentColor;
}

.matezex-catalog button.matezex-btn:not(.is-active) .matezex-btn-close {
	display: none !important;
}

/* === Product name === */
.matezex-catalog .matezex-product-name {
	display: block;
	font-size: 16px;
	font-weight: 600;
	color: #000f26;
	line-height: 1.3;
	margin-top: 4px;
}

/* === SKU === */
.matezex-catalog .matezex-sku {
	display: block;
	font-size: 14px;
	font-weight: 400;
	color: #5b6b7f;
	margin-top: 2px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* === Availability chips === */
.matezex-catalog .matezex-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-bottom: 0;
}

.matezex-catalog .matezex-chip {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: 9999px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
}

.matezex-catalog .matezex-chip-sale {
	background: #fe5000;
	color: #eff2f5;
}

.matezex-catalog .matezex-chip-instock {
	background: #7fe700;
	color: #0a0d0f;
}

.matezex-catalog .matezex-chip-within-week {
	background: #fdd700;
	color: #0a0d0f;
}

.matezex-catalog .matezex-chip-within-2-weeks {
	background: #fdd700;
	color: #0a0d0f;
}

.matezex-catalog .matezex-chip-on-order {
	background: #c2cdd6;
	color: #0a0d0f;
}

.matezex-catalog .matezex-chip-second-quality {
	background: #00a9fd;
	color: #eff2f5;
}

/* =========================================================================
   Sloupec Množství  —  pilulky pod sebou, jedna na řádek:
       [−] [ 1 ks ]    [+]
       [−] [ 1000 mm ] [+]
   U délkového prodeje jsou pole dvě (počet kusů nad délkou), jinak jedno.
   Pilulky se táhnou na celou šířku sloupce, aby stály přesně nad sebou —
   sloupec je shrink-to-fit, takže šířku určuje ta delší (délka).
   Popisek pole (data-label) se vypisuje jen v kartovém režimu; v tabulce ho
   zastupuje hlavička sloupce.
   ========================================================================= */

.matezex-catalog .matezex-qty-stack {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 6px;
}

.matezex-catalog .matezex-qty-field {
	min-width: 0;
}

.matezex-catalog .matezex-qty-control {
	display: inline-flex;
	align-items: center;
	gap: 0;
	flex-shrink: 0;
	background: #fff;
	border-radius: 9999px;
	height: 36px;
}

.matezex-catalog .matezex-qty-field .matezex-qty-control {
	display: flex;
	width: 100%;
}

/* Číslo s jednotkou vyplní prostor mezi − a + — tím se obě pilulky srovnají
   na stejnou šířku a jejich kolečka stojí přesně nad sebou. */
.matezex-catalog .matezex-qty-field .matezex-qty-display {
	flex: 1 1 auto;
}

/* --- Minus button (secondary) --- */
.matezex-catalog button.matezex-qty-minus {
	width: 36px !important;
	height: 36px !important;
	min-width: 36px !important;
	min-height: 36px !important;
	max-width: 36px !important;
	max-height: 36px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	background: #c2cdd6 !important;
	background-color: #c2cdd6 !important;
	color: #0a0d0f !important;
	cursor: pointer;
	font-size: 0 !important;
	line-height: 1 !important;
	border-radius: 9999px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	transition: background 0.15s ease;
	box-sizing: border-box !important;
}

.matezex-catalog button.matezex-qty-minus:hover,
.matezex-catalog button.matezex-qty-minus:focus {
	background: #a8b8c5 !important;
	background-color: #a8b8c5 !important;
	color: #0a0d0f !important;
}

.matezex-catalog button.matezex-qty-minus svg {
	width: 14px !important;
	height: 14px !important;
	flex-shrink: 0;
	stroke: currentColor;
}

/* --- Plus button (primary) --- */
.matezex-catalog button.matezex-qty-plus {
	width: 36px !important;
	height: 36px !important;
	min-width: 36px !important;
	min-height: 36px !important;
	max-width: 36px !important;
	max-height: 36px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	background: #0a0d0f !important;
	color: #fff !important;
	cursor: pointer;
	font-size: 0 !important;
	line-height: 1 !important;
	border-radius: 9999px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	transition: background 0.15s ease;
	box-sizing: border-box !important;
}

.matezex-catalog button.matezex-qty-plus:hover,
.matezex-catalog button.matezex-qty-plus:focus {
	background: #333 !important;
	background-color: #333 !important;
	color: #fff !important;
}

.matezex-catalog button.matezex-qty-plus svg {
	width: 14px !important;
	height: 14px !important;
	flex-shrink: 0;
	stroke: currentColor;
}

/* --- Quantity display (number + unit) ---
 * Number + unit render as one tight pair ("5 kg", "500 mm") centred in the
 * pill: the input is sized to its digits by JS (ch units), right-aligned so
 * the number hugs the unit; the display grows with longer values.
 */
.matezex-catalog .matezex-qty-display {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
	width: auto;
	min-width: 56px;
	height: 36px;
	padding: 4px 8px;
	box-sizing: border-box;
}

/* Vstup pro počet kusů (.matezex-pieces-input) musí mít stejný vzhled, ale
   NESMÍ mít třídu .matezex-qty-input — z té čte matezex-cart.js množství
   (u délkových řádků délku v mm). Proto je vyjmenovaný zvlášť; bez toho by
   ho theme nakreslilo jako běžné <input type=number> s rámečkem a paddingem,
   který přetéká pilulku. */
.matezex-catalog .matezex-qty-input,
.matezex-catalog .matezex-pieces-input {
	width: 28px !important; /* fallback — JS sizes to digit count */
	height: auto !important;
	min-height: 0 !important;
	text-align: center !important;
	border: none !important;
	border-radius: 0 !important;
	outline: none !important;
	background: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	font-variant-numeric: tabular-nums;
	color: #0a0d0f !important;
	box-shadow: none !important;
	-moz-appearance: textfield;
	line-height: normal !important;
}

.matezex-catalog .matezex-qty-input::-webkit-inner-spin-button,
.matezex-catalog .matezex-qty-input::-webkit-outer-spin-button,
.matezex-catalog .matezex-pieces-input::-webkit-inner-spin-button,
.matezex-catalog .matezex-pieces-input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.matezex-catalog .matezex-unit {
	font-size: 14px;
	font-weight: 500;
	color: #0a0d0f;
	line-height: normal;
	flex-shrink: 0;
	white-space: nowrap;
}

/* =========================================================================
   Action buttons  —  Objednat / Poptat  (outline style)
   ========================================================================= */

.matezex-catalog .matezex-action-buttons {
	display: flex;
	gap: 6px;
	align-items: center;
	flex-shrink: 1;
	min-width: 0;
}

/* Sloupec Akce: tlačítka pod sebou a stejně široká (stretch), aby vedle
   sloupce Množství tvořila druhý úhledný stohovaný sloupec. */
.matezex-catalog .matezex-col-actions .matezex-action-buttons {
	flex-direction: column;
	align-items: stretch;
}

/* Shared base style for both buttons — override ALL theme styles */
.matezex-catalog button.matezex-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 16px !important;
	padding: 10px 14px !important;
	margin: 0 !important;
	white-space: nowrap !important;
	border-radius: 9999px !important;
	cursor: pointer !important;
	box-shadow: none !important;
	outline: none !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
	box-sizing: border-box !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

.matezex-catalog button.matezex-btn svg {
	width: 14px !important;
	height: 14px !important;
	flex-shrink: 0;
}

/* --- Objednat (outline, dark border) --- */
.matezex-catalog button.matezex-add-order {
	border: 1.5px solid #0a0d0f !important;
	background: transparent !important;
	background-color: transparent !important;
	color: #0a0d0f !important;
}

.matezex-catalog button.matezex-add-order:hover,
.matezex-catalog button.matezex-add-order:focus {
	background: #0a0d0f !important;
	background-color: #0a0d0f !important;
	color: #fff !important;
}

.matezex-catalog button.matezex-add-order:hover svg,
.matezex-catalog button.matezex-add-order:focus svg {
	stroke: #fff;
}

/* --- Poptat (outline, dark border) --- */
.matezex-catalog button.matezex-add-inquiry {
	border: 1.5px solid #0a0d0f !important;
	background: transparent !important;
	background-color: transparent !important;
	color: #0a0d0f !important;
}

.matezex-catalog button.matezex-add-inquiry:hover,
.matezex-catalog button.matezex-add-inquiry:focus {
	background: #0a0d0f !important;
	background-color: #0a0d0f !important;
	color: #fff !important;
}

.matezex-catalog button.matezex-add-inquiry:hover svg,
.matezex-catalog button.matezex-add-inquiry:focus svg {
	stroke: #fff;
}

/* --- Active state: V objednávce (filled blue) --- */
.matezex-catalog button.matezex-add-order.is-active {
	border-color: #004cfe !important;
	background: #004cfe !important;
	color: #eff2f5 !important;
}

.matezex-catalog button.matezex-add-order.is-active svg {
	stroke: #eff2f5;
}

.matezex-catalog button.matezex-add-order.is-active:hover {
	background: #0040d6 !important;
	border-color: #0040d6 !important;
}

/* --- Active state: V poptávce (filled blue) --- */
.matezex-catalog button.matezex-add-inquiry.is-active {
	border-color: #004cfe !important;
	background: #004cfe !important;
	color: #eff2f5 !important;
}

.matezex-catalog button.matezex-add-inquiry.is-active svg {
	stroke: #eff2f5;
}

.matezex-catalog button.matezex-add-inquiry.is-active:hover {
	background: #0040d6 !important;
	border-color: #0040d6 !important;
}

/* =========================================================================
   Load More button
   ========================================================================= */

/* Skládá se na střed pod tabulkou: tlačítko, pod ním kolečka stránek,
   pod nimi stav. Dřív to byl jeden řádek (flex-direction: row), takže
   tlačítko a čísla stála vedle sebe. */
.matezex-catalog .matezex-pagination {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	margin-top: 28px;
}

/* Stejný vzor jako modrá tlačítka e-shopu (Elementor globals):
   Blue Button Background #004CFE, White Text #EFF2F5, pill 50px, 16px/500. */
.matezex-catalog .matezex-load-more-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	background: var(--e-global-color-2d79057, #004cfe);
	color: var(--e-global-color-ff2f261, #eff2f5);
	border: none;
	border-radius: 50px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s;
}

.matezex-catalog .matezex-load-more-btn:hover {
	background: #0040dc;
}

.matezex-catalog .matezex-load-more-btn:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* === Číslované stránkování ===
   Sekundární ovládání pod load-more tlačítkem. Existuje hlavně proto, aby byly
   hlubší stránky tabulky prolinkované a dohledatelné — viz Matezex_Pagination. */
.matezex-catalog .matezex-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

/* Kolečka. Pevná šířka i výška a nulový padding — s min-width + padding
   by z dvouciferných čísel vznikaly ovály. */
.matezex-catalog .matezex-pager-link,
.matezex-catalog .matezex-pager-current {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 50%;
	font-family: inherit;
	font-size: 15px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
}

.matezex-catalog .matezex-pager-link {
	color: var(--e-global-color-2d79057, #004cfe);
	border: 1px solid #d7dde5;
	background: #fff;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.matezex-catalog .matezex-pager-link:hover {
	background: var(--e-global-color-ff2f261, #eff2f5);
	border-color: var(--e-global-color-2d79057, #004cfe);
	text-decoration: none;
}

.matezex-catalog .matezex-pager-link:focus-visible {
	outline: 2px solid var(--e-global-color-2d79057, #004cfe);
	outline-offset: 2px;
}

.matezex-catalog .matezex-pager-current {
	background: var(--e-global-color-2d79057, #004cfe);
	color: var(--e-global-color-ff2f261, #eff2f5);
	border: 1px solid var(--e-global-color-2d79057, #004cfe);
	font-weight: 600;
}

.matezex-catalog .matezex-pager-chevron {
	display: block;
}

.matezex-catalog .matezex-pager-gap {
	width: 20px;
	text-align: center;
	color: #8a929c;
	user-select: none;
}

.matezex-catalog .matezex-pager-status {
	margin: 0;
	font-size: 14px;
	color: #6b7280;
	font-variant-numeric: tabular-nums;
}

/* Text jen pro odečítače a crawler — u šipek nese jejich význam. */
.matezex-catalog .matezex-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* === Empty state === */
.matezex-catalog .matezex-empty-state {
	text-align: center;
	padding: 40px 20px;
	color: #666;
}

/* === Price === */
.matezex-catalog .matezex-price-from {
	font-size: 14px;
	color: #666;
}

/* =========================================================================
   RESPONSIVE — container-query bands (driven by the catalog's own width,
   not the viewport, so the layout adapts to the space it actually has).
   Množství a Akce jsou dva samostatné stohované sloupce už v základu, takže
   band B tady jen zmenšuje typografii a ovládací prvky — layout nepřepíná.
     Band A  (> 1500)     základní pravidla výše
     Band B  (<= 1500)    kompaktnější tabulka (běžný případ na 1440 kontejneru)
     Band C  (<= 1100)    karty, jedna na řádek (+ mobilní řazení)
     Phone   (<= 768)     stohování filtru
   Intrinsic (max-content) šířka téhle 9sloupcové tabulky je ~998px (měřeno na
   živé stránce), takže karty se zapínají na 1100 s ~100px rezervou.
   Re-measure against real content if columns or padding change.
   ========================================================================= */

/* --- Band B: tighter typography + smaller controls (the default here) --- */
@container matezex (max-width: 1500px) {
	.matezex-catalog .matezex-product-table {
		font-size: 13px !important;
	}

	.matezex-catalog .matezex-table-columns-row th {
		font-size: 13px !important;
		padding: 10px 10px !important;
	}

	.matezex-catalog .matezex-product-table tbody td {
		padding: 10px 10px !important;
	}

	.matezex-catalog .matezex-qty-control {
		height: 32px;
	}

	.matezex-catalog .matezex-col-actions button.matezex-btn {
		padding: 8px 10px !important;
		font-size: 13px !important;
	}

	.matezex-catalog button.matezex-btn svg {
		width: 14px !important;
		height: 14px !important;
	}

	.matezex-catalog button.matezex-qty-minus,
	.matezex-catalog button.matezex-qty-plus {
		width: 32px !important;
		height: 32px !important;
		min-width: 32px !important;
		min-height: 32px !important;
		max-width: 32px !important;
		max-height: 32px !important;
	}

	.matezex-catalog .matezex-qty-display {
		width: auto;
		min-width: 48px;
		height: 32px;
	}

	.matezex-catalog .matezex-qty-input,
	.matezex-catalog .matezex-pieces-input {
		font-size: 13px !important;
	}

	.matezex-catalog .matezex-unit {
		font-size: 13px;
	}

	.matezex-catalog .matezex-sku {
		font-size: 14px;
	}
}

/* =========================================================================
   Band C — card layout (one card per row): the table can no longer fit, so
   each row becomes a spec card (label/value pairs + a full-width action bar).
   Clickable column headers are gone here, so the mobile sort control appears.
   ========================================================================= */

@container matezex (max-width: 1100px) {
	/* Stack the whole table into block flow — including <table> and <th>,
	 * otherwise leftover table display keeps the intrinsic (wide) layout. */
	.matezex-catalog .matezex-product-table,
	.matezex-catalog .matezex-product-table thead,
	.matezex-catalog .matezex-product-table tbody,
	.matezex-catalog .matezex-product-table tr,
	.matezex-catalog .matezex-product-table th,
	.matezex-catalog .matezex-product-table td {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	/* Hide column header row — selector must OUTWEIGH the block rule above
	 * (both are !important, so specificity decides: 0-3-1 > 0-2-1). */
	.matezex-catalog .matezex-product-table tr.matezex-table-columns-row {
		display: none !important;
	}

	/* Release the right-edge pin from table mode — cards are block flow. */
	.matezex-catalog .matezex-product-table td.matezex-col-actions {
		position: static !important;
	}

	/* Title bar above the cards */
	.matezex-catalog .matezex-table-title-row th {
		border-radius: 16px !important;
		position: static !important;
		font-size: 16px !important;
		line-height: 36px !important;
		padding: 6px 16px !important;
		margin-bottom: 12px;
	}

	/* Show the sort control (clickable column headers are hidden in card mode) */
	.matezex-catalog .matezex-sort-control {
		display: block;
		margin: 0 0 12px;
	}

	.matezex-catalog .matezex-sort-control-label {
		display: block;
		font-size: 12px;
		font-weight: 600;
		text-transform: uppercase;
		color: #6b7280;
		margin-bottom: 4px;
	}

	.matezex-catalog .matezex-sort-control-row {
		display: flex;
		gap: 8px;
	}

	.matezex-catalog .matezex-sort-select {
		flex: 1 1 auto;
		min-height: 44px;
		padding: 8px 12px;
		border: 1px solid #d9e1e7;
		border-radius: 8px;
		background: #fff;
		font-size: 14px;
		color: #000f26;
	}

	.matezex-catalog .matezex-sort-dir {
		flex: 0 0 auto;
		width: 44px;
		min-height: 44px;
		border: 1px solid #d9e1e7;
		border-radius: 8px;
		background: #fff;
		cursor: pointer;
		font-size: 18px;
		line-height: 1;
		color: #000f26;
	}

	.matezex-catalog .matezex-sort-dir::after {
		content: "\2191"; /* ↑ ASC (default) */
	}

	.matezex-catalog .matezex-sort-dir[data-order="DESC"]::after {
		content: "\2193"; /* ↓ */
	}

	/* Card-style rows — grey cards matching the site's design language */
	.matezex-catalog .matezex-product-table tbody tr {
		border: none !important;
		border-radius: 12px;
		padding: 16px !important;
		margin-bottom: 12px;
		background: #ecf0f3 !important;
		overflow: hidden;
	}

	.matezex-catalog .matezex-product-table tbody td {
		border: none !important;
		padding: 0 !important;
		background: transparent !important;
	}

	.matezex-catalog .matezex-product-table tbody tr:hover td {
		background: transparent !important;
	}

	/* Product cell: chips + name + SKU stacked, no label needed */
	.matezex-catalog .matezex-product-table tbody td.matezex-col-name {
		min-width: 0 !important;
		padding-bottom: 10px !important;
		margin-bottom: 4px;
		border-bottom: 1px solid rgba(10, 13, 15, 0.08) !important;
	}

	/* Attribute cells: spec-sheet rows — label left, value right */
	.matezex-catalog .matezex-product-table tbody td.matezex-col-attr {
		display: flex !important;
		align-items: baseline;
		justify-content: space-between;
		gap: 16px;
		padding: 5px 0 !important;
		font-size: 14px;
		font-weight: 600;
		color: #0a0d0f;
		text-align: right;
	}

	.matezex-catalog .matezex-product-table tbody td.matezex-col-attr::before {
		content: attr(data-label);
		flex: 0 1 auto;
		font-weight: 400;
		font-size: 14px;
		color: #52697a;
		text-align: left;
	}

	/* Quantity: separated block, každé pole jako spec-řádek karty —
	   popisek zleva, pilulka zprava (stejně jako u atributů). */
	.matezex-catalog .matezex-product-table tbody td.matezex-col-quantity {
		white-space: normal !important;
		margin-top: 10px;
		padding-top: 12px !important;
		border-top: 1px solid rgba(10, 13, 15, 0.08) !important;
	}

	.matezex-catalog .matezex-qty-stack {
		gap: 8px;
	}

	.matezex-catalog .matezex-qty-field {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
	}

	.matezex-catalog .matezex-qty-field::before {
		content: attr(data-label);
		font-weight: 400;
		font-size: 14px;
		color: #52697a;
		text-align: left;
	}

	/* Pilulka se v kartě netáhne přes celou šířku — drží se u pravého okraje. */
	.matezex-catalog .matezex-qty-field .matezex-qty-control {
		width: auto;
		flex: 0 0 auto;
	}

	/* Akce: plná šířka karty, tlačítka zpátky vedle sebe 50/50 a s dost
	   velkým dotykovým cílem. */
	.matezex-catalog .matezex-product-table tbody td.matezex-col-actions {
		white-space: normal !important;
		margin-top: 12px;
	}

	.matezex-catalog .matezex-col-actions .matezex-action-buttons {
		flex-direction: row;
		align-items: center;
		gap: 8px;
	}

	.matezex-catalog .matezex-col-actions button.matezex-btn {
		flex: 1 1 0 !important;
		min-width: 0 !important;
		min-height: 44px !important;
		padding: 10px 8px !important;
	}
}

/* --- Phone: stack the filter-panel rows --- */
@container matezex (max-width: 768px) {
	/* Řada se musí vejít na jeden řádek, ale kolečka mají zůstat dost velká
	   na prst — místo zmenšování se proto vypustí krajní čísla okna
	   (zůstávají v DOM, crawler je vidí). */
	.matezex-catalog .matezex-pager {
		gap: 5px;
	}

	.matezex-catalog .matezex-pager-link,
	.matezex-catalog .matezex-pager-current {
		width: 38px;
		height: 38px;
		font-size: 14px;
	}

	.matezex-catalog .matezex-pager-chevron {
		width: 17px;
		height: 17px;
	}

	.matezex-catalog .matezex-pager-far {
		display: none;
	}

	.matezex-catalog .matezex-filter-row {
		flex-direction: column;
		gap: 8px;
	}

	.matezex-catalog .matezex-filter-label {
		padding-top: 0;
	}

	.matezex-catalog .matezex-filter-header {
		padding: 8px 16px;
	}

	.matezex-catalog .matezex-filter-body {
		padding: 16px;
	}

	.matezex-catalog .matezex-filter-title {
		font-size: 18px;
	}
}

/* =========================================================================
   Length-based selling (kg → m) — price column, dělení column, row calc
   ========================================================================= */

/* --- Cena od column --- */
.matezex-catalog .matezex-col-price {
	white-space: nowrap;
}

.matezex-catalog .matezex-price-value {
	font-weight: 600;
	color: #000f26;
}

.matezex-catalog .matezex-price-unit {
	font-size: 13px;
	color: #5b6b7f;
}

.matezex-catalog .matezex-price-empty {
	color: #5b6b7f;
	font-size: 14px;
}

/* Kusový prodej: pod cenou za kus zůstává ceníková cena za kg / m² a hmotnost
   (plocha) jednoho kusu. Vlastní řádek, ať to nesplývá s hlavní cenou. */
.matezex-catalog .matezex-price-basis {
	display: block;
	font-size: 12px;
	color: #5b6b7f;
	white-space: nowrap;
}

/* --- Dělení column (two lines: interval + cutting fee) --- */
.matezex-catalog .matezex-col-deleni {
	white-space: nowrap;
}

.matezex-catalog .matezex-deleni-step {
	display: block;
	color: #000f26;
}

.matezex-catalog .matezex-deleni-fee {
	display: block;
	font-size: 13px;
	color: #5b6b7f;
	margin-top: 2px;
}

.matezex-catalog .matezex-deleni-empty {
	color: #5b6b7f;
}

/* --- Computed price line under/next to the length input --- */
.matezex-catalog .matezex-row-calc {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 110px;
	flex-shrink: 0;
}

.matezex-catalog .matezex-row-total {
	font-size: 14px;
	font-weight: 600;
	color: #000f26;
	white-space: nowrap;
}

.matezex-catalog .matezex-row-total-vat {
	font-size: 12px;
	font-weight: 400;
	color: #5b6b7f;
}

/* Hláška o zaokrouhlení délky — sedí pod pilulkami v úzkém sloupci, takže
   se musí lámat. */
.matezex-catalog .matezex-row-note {
	font-size: 12px;
	color: #b45309;
	white-space: normal;
}

/* Hláška proč se položka nepřidala (např. mezitím přešla na dotaz). Sloupec
   Akce je width:1% shrink-to-fit, takže bez max-width by dlouhá věta sloupec
   roztáhla a rozhodila celou tabulku. */
.matezex-catalog .matezex-action-note {
	display: block;
	max-width: 220px;
	margin-top: 8px;
	font-size: 12px;
	line-height: 1.4;
	color: #b45309;
	white-space: normal;
}

.matezex-catalog .matezex-action-note[hidden] {
	display: none;
}

/* Card view: price + dělení become label/value rows (matches the card cut-over).
   These cells hold several value spans (value + unit, or step + cutting fee),
   so we push the whole value group right with margin-left:auto — space-between
   would spread the individual spans apart ("118 Kč" ... "/m") instead. */
@container matezex (max-width: 1100px) {
	.matezex-catalog .matezex-product-table tbody td.matezex-col-price,
	.matezex-catalog .matezex-product-table tbody td.matezex-col-deleni {
		display: flex !important;
		align-items: baseline;
		gap: 0;
	}

	.matezex-catalog .matezex-product-table tbody td.matezex-col-price::before,
	.matezex-catalog .matezex-product-table tbody td.matezex-col-deleni::before {
		content: attr(data-label);
		font-weight: 400;
		font-size: 14px;
		color: #52697a;
		text-align: left;
	}

	/* Group all value spans to the right, hugging like the attribute rows. */
	.matezex-catalog .matezex-col-price .matezex-price-value,
	.matezex-catalog .matezex-col-price .matezex-price-empty,
	.matezex-catalog .matezex-col-deleni .matezex-deleni-step,
	.matezex-catalog .matezex-col-deleni .matezex-deleni-empty {
		margin-left: auto;
	}

	/* Cena je v kartovém režimu flex řádek „Cena od | 888 Kč/ks", takže
	   ceníkový základ musí přeskočit na vlastní řádek — jinak by se do řádku
	   mačkaly tři údaje. */
	.matezex-catalog .matezex-product-table tbody td.matezex-col-price {
		/* Bez wrapu by flex-basis: 100 % u ceníkového základu nezalomil. */
		flex-wrap: wrap;
	}

	.matezex-catalog .matezex-col-price .matezex-price-basis {
		flex: 0 0 100%;
		text-align: right;
		margin-top: 2px;
	}

	.matezex-catalog .matezex-col-deleni .matezex-deleni-step,
	.matezex-catalog .matezex-col-deleni .matezex-deleni-fee {
		display: inline;
	}

	.matezex-catalog .matezex-col-deleni .matezex-deleni-fee {
		margin-left: 6px;
	}

	.matezex-catalog .matezex-row-calc {
		flex: 1 1 100%;
		min-width: 0;
	}
}

/* =========================================================================
   Obrázkové karty typů (1.8.0)

   Vrací vizuální výběr, který měl starý web: mřížka fotek s normou nad
   tabulkou. Vzhled schválně kopíruje .matezex-subcat-card z rozcestníků
   (stejné pozadí, rádius, mix-blend na bílém pozadí fotek), jen kompaktněji —
   karet je i dvacet, kdežto podkategorií bývá šest.
   ========================================================================= */

.matezex-catalog .matezex-type-cards-wrap {
	margin-bottom: 32px;
}

.matezex-catalog .matezex-type-cards-heading {
	margin: 0 0 20px;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.3;
}

.matezex-catalog .matezex-type-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 16px;
}

.matezex-catalog .matezex-type-card {
	display: flex;
	flex-direction: column;
	background: #edf0f3;
	border: 2px solid transparent;
	border-radius: 20px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: border-color .15s ease, transform .15s ease;
}

.matezex-catalog .matezex-type-card:hover,
.matezex-catalog .matezex-type-card:focus-visible {
	border-color: #b9c6d3;
	transform: translateY(-2px);
	text-decoration: none;
}

.matezex-catalog .matezex-type-card.is-active {
	border-color: #004cfe;
	background: #e5ecff;
}

.matezex-catalog .matezex-type-card__image {
	display: block;
	background: #edf0f3;
}

.matezex-catalog .matezex-type-card__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	/* Fotky ze starého webu mají bílé pozadí — multiply je posadí do plochy
	   karty stejně jako u karet podkategorií. */
	mix-blend-mode: multiply;
}

.matezex-catalog .matezex-type-card__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 16px 14px;
	flex-grow: 1;
}

.matezex-catalog .matezex-type-card__title {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: #10222f;
}

.matezex-catalog .matezex-type-card.is-active .matezex-type-card__title {
	color: #004cfe;
}

.matezex-catalog .matezex-type-card__meta {
	font-size: 13px;
	color: #52697a;
}

@container matezex (max-width: 1100px) {
	.matezex-catalog .matezex-type-cards {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: 12px;
	}

	.matezex-catalog .matezex-type-cards-heading {
		font-size: 20px;
	}
}

@container matezex (max-width: 768px) {
	/* Na telefonu dvě karty vedle sebe — jedna přes celou šířku by udělala
	   z dvaceti typů nekonečný sloupec a filtr by se odsunul mimo dosah. */
	.matezex-catalog .matezex-type-cards {
		grid-template-columns: repeat(2, 1fr);
	}

	.matezex-catalog .matezex-type-card__body {
		padding: 10px 12px 12px;
	}

	.matezex-catalog .matezex-type-card__title {
		font-size: 14px;
	}
}

.matezex-catalog .matezex-type-card__subtitle {
	font-size: 13px;
	line-height: 1.35;
	color: #10222f;
}

.matezex-catalog .matezex-type-card__meta {
	margin-top: 2px;
}