/**
 * Mechanc — product archive skin.
 *
 * Maps WooCommerce Product Table PRO's archive output onto the reference
 * design's catalogue page (`design-reference/mechanc-complete.html`
 * → `#page-connectors`).
 *
 * ──────── Why a skin rather than custom markup ────────
 * The plugin already does the hard parts: five taxonomy filters, AJAX
 * refresh, sorting, pagination, and a grid/table view switcher. Rebuilding
 * that to get the design would mean owning all of it. Instead the plugin
 * keeps rendering and this file dresses it, which is the same approach
 * product-table.css already takes for the single-product tables.
 *
 * Usefully, WCPT PRO's own left-sidebar layout is enabled on these archives
 * (`.wcpt-navigation-wrapper--has-sidebar`), so the reference's two-column
 * catalogue shell already exists in the markup — it only needed dressing.
 *
 * ──────── Selector rules, which matter here ────────
 * 1. **Never key off a generated class.** WCPT styles rows through
 *    per-instance names like `.wcpt-1722441595`, and those change every time
 *    a table is rebuilt in the admin. Every selector below keys off
 *    structural classes (`.wcpt-row`, `.wcpt-cell`, `.wcpt-grid-view`)
 *    instead, so a rebuild cannot silently unstyle the page.
 * 2. **The plugin owns layout in grid view.** `.wcpt-grid-view` is still a
 *    real `<table>`; the view-switcher addon converts it with its own CSS.
 *    This file therefore sets only *visual* properties on grid rows —
 *    surface, border, radius, hover — and does not fight the display model.
 *    Overriding `display` on `tr`/`td` would break on any plugin update.
 * 3. **`!important` where the plugin emits ID-scoped inline CSS.** WCPT
 *    prints a `<style>` block using `#wcpt-2313 …` selectors, which carry ID
 *    specificity and cannot be outranked by any class selector this file
 *    could write. Those cases are marked individually below.
 *
 * Written against design tokens with no `body.light` duplicate, so one set of
 * rules themes in both directions — the pattern established in
 * product-table.css.
 */

/* ──────── 1. Catalogue shell ────────
   `.wcpt-navigation-wrapper--has-sidebar` is the plugin's two-column wrapper.
   The reference's `.catalog-layout` is a 240px sidebar hard against the
   content with a dividing rule rather than a gap, so the plugin's gap is
   closed and the separation is drawn by the sidebar's own border. */
.wcpt .wcpt-navigation-wrapper--has-sidebar {
	--wcpt-sidebar-width: 240px;
	--wcpt-sidebar-gap-from-table: 0px;
	align-items: start;
}

/* ──────── 2. Sidebar ──────── */
.wcpt .wcpt-navigation.wcpt-left-sidebar {
	background: var(--bg-deep);
	border-right: 1px solid var(--border);
	padding: 24px;
	align-self: stretch;
	border-radius: 0;
}

.wcpt > .wcpt-grid-table-view-switcher {
	margin-bottom: 0.25em;
	margin-bottom: -59px;
	padding-right: 24px;
	padding-top: 20px;
}

/* Filter group heading → `.sidebar-title`. The plugin nests the label text
   inside `.wcpt-dropdown-label > .wcpt-item-row > .wcpt-text`, so the colour
   has to reach the innermost node rather than stopping at the heading. */
.wcpt .wcpt-left-sidebar .wcpt-filter-heading {
	margin-bottom: 12px;
	padding: 0 0 7px;
	border-bottom: 1px solid var(--border);
	background: transparent !important;
}

.wcpt .wcpt-left-sidebar .wcpt-filter-heading .wcpt-text,
.wcpt .wcpt-left-sidebar .wcpt-dropdown-label {
	font-family: var(--font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--accent-cyan) !important;
}

.wcpt .wcpt-left-sidebar .wcpt-filter {
	margin-bottom: 20px;
	background: transparent !important;
	border: 0 !important;
}

/* Each option → `.filter-check` / `.sidebar-item`. */
.wcpt .wcpt-left-sidebar .wcpt-dropdown-option label {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 8px 10px;
	border-radius: var(--radius);
	font-size: 13px;
	color: var(--text-secondary);
	cursor: pointer;
	transition: background var(--transition), color var(--transition);
}

.wcpt .wcpt-left-sidebar .wcpt-dropdown-option label:hover {
	color: var(--text-primary);
}

/* The checked state is the reference's `.sidebar-item.active`. */
.wcpt .wcpt-left-sidebar .wcpt-dropdown-option label.wcpt-active {
	background: rgba(0, 207, 255, 0.07) !important;
	color: var(--accent-cyan) !important;
	font-weight: 500;
}

.wcpt .wcpt-left-sidebar .wcpt-dropdown-option label .wcpt-text {
	color: inherit;
}

.wcpt .wcpt-left-sidebar input[type="checkbox"],
.wcpt .wcpt-left-sidebar input[type="radio"] {
	accent-color: var(--accent-cyan);
	flex: 0 0 auto;
	margin: 0;
}

/* Child terms sit under their parent; the reference indents them slightly
   rather than boxing them. */
.wcpt .wcpt-left-sidebar .wcpt-hr-child-terms-wrapper {
	margin-left: 10px;
	border-left: 1px solid var(--border);
	padding-left: 6px;
}

.wcpt .wcpt-left-sidebar .wcpt-clear-filters-wrapper,
.wcpt .wcpt-left-sidebar .wcpt-clear-filter,
.wcpt .wcpt-left-sidebar .wcpt-clear-all-filters {
	background: transparent !important;
	border-color: var(--border-accent) !important;
	color: var(--accent-cyan) !important;
	font-family: var(--font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* ──────── 3. Main column ──────── */
.wcpt .wcpt-nav-main {
	padding: 24px;
	padding-top: 50px;
}

@media (min-width: 1199px) {
  .wcpt-left-sidebar .wcpt-filter-heading {
    margin: 0px !important;
  }
}

.wcpt .wcpt-left-sidebar .wcpt-dropdown-option label {
	border-radius: 0;
}

.wcpt .wcpt-left-sidebar .wcpt-hr-child-terms-wrapper {
	margin-left: 0;
	border-left: 1px solid var(--border);
	padding-left: 0;
}

.wcpt .wcpt-left-sidebar .wcpt-dropdown-option label > span:nth-child(2) {
	display: block;
	flex: 1;
}

@media (min-width: 1199px) {
  .wcpt-left-sidebar .wcpt-dropdown-menu, .wcpt-left-sidebar .wcpt-options {
    gap: 0;
  }
}

/* Result count → `.cat-count`. */
.wcpt .wcpt-result-count,
.wcpt .wcpt-result-message,
.wcpt .wcpt-single-result-message {
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--text-secondary) !important;
	background: transparent !important;
}

/* Sort control → `.sort-sel`. */
.wcpt .wcpt-nav-main .wcpt-dropdown {
	padding: 7px 14px;
	border-radius: var(--radius);
	border: 1px solid var(--border) !important;
	background: var(--bg-card) !important;
	color: var(--text-secondary) !important;
	font-family: var(--font-mono);
	font-size: 12px;
}

/* ──────── 4. View switcher → `.view-tog` / `.vbtn` ────────
   The plugin prints an inline `<style>` forcing the button text and icon to
   black and 50% black, so the colours here are overridden rather than
   inherited. */
.wcpt-grid-table-view-switcher__inner {
	display: inline-flex;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
}

.wcpt-grid-table-view-switcher__button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0 12px;
	height: 36px;
	cursor: pointer;
	transition: background var(--transition), color var(--transition);
}

.wcpt-grid-table-view-switcher__button .wcpt-grid-table-view-switcher__button__text,
.wcpt-grid-table-view-switcher__button .wcpt-grid-table-view-switcher__button__icon {
	color: var(--text-muted) !important;
	font-family: var(--font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.wcpt-grid-table-view-switcher__button .wcpt-icon {
	font-size: 16px !important;
}

.wcpt-grid-table-view-switcher__button:hover .wcpt-grid-table-view-switcher__button__text,
.wcpt-grid-table-view-switcher__button:hover .wcpt-grid-table-view-switcher__button__icon {
	color: var(--text-primary) !important;
}

.wcpt-grid-table-view-switcher__button.wcpt-active {
	background: var(--accent-blue);
}

.wcpt-grid-table-view-switcher__button.wcpt-active .wcpt-grid-table-view-switcher__button__text,
.wcpt-grid-table-view-switcher__button.wcpt-active .wcpt-grid-table-view-switcher__button__icon {
	color: #fff !important;
}

.wcpt-grid-table-view-switcher__button.wcpt-active {
	background: var(--accent-blue) !important;
}

.cat-hero-tags.mc-btns .products.elementor-grid.columns-6 {
	display: flex;
	flex-wrap: wrap;
	gap: 10px !important;
}

/* The sub-category buttons are the reference's `.cat-hero-tag`: an outlined
   pill that takes its colour from the palette. They had been pinned to the
   light theme's literal hex, so on the dark page they rendered as a block of
   white slabs — the "white blocks" in the 14.08 feedback.

   Written against tokens with no `body.light` copy, so one rule set themes both
   ways, the same pattern product-table.css uses. */
.cat-hero-tags.mc-btns .product-category.product a {
	padding: 6px 14px;
	display: inline-block;
	background: transparent;
	border: 1px solid var(--br);
	border-radius: 4px;
	color: var(--t2);
	font-family: var(--fm);
	font-size: 12px;
	transition: border-color .2s, color .2s, background .2s;
}

.cat-hero-tags.mc-btns .product-category.product a:hover,
.cat-hero-tags.mc-btns .product-category.product.current a {
	border-color: var(--cyan);
	color: var(--cyan);
	background: rgba(0, 207, 255, 0.06);
}

.cat-hero-tags.mc-btns .product-category.product a:hover h2,
.cat-hero-tags.mc-btns .product-category.product.current a h2 {
	color: inherit;
}

.cat-hero-tags.mc-btns .product-category.product a img,
.cat-hero-tags.mc-btns .product-category.product a .count{
	display: none;
}

.cat-hero-tags.mc-btns .product-category.product a h2 {
	font-weight: 500 !important;
	letter-spacing: 0 !important;
	text-transform: capitalize !important;
	font-size: inherit !important;
	margin: 0;
}

.cat-hero-tags.mc-btns .product-category.product a .woocommerce-loop-category__title {
	font-size: 12px;
}

/* The label's base colour is left to the widget's own Title Color control,
   which is now bound to the `mctext2` Global Colour — so it follows the theme
   and the client can still change it in Elementor. Only the hover and current
   states are forced, because Elementor has no control for them. */

/* ──────── 5. Grid view → `.pcard` ────────
   Visual treatment only; the addon owns the layout. `!important` on the cell
   background is required because WCPT emits
   `#wcpt-2313 tr.wcpt-odd > .wcpt-cell { background-color: … }`, which has ID
   specificity. */
/* ──────── The card was being drawn twice ────────
   These rules used to paint a background, a border, a 12px radius and a hover
   lift on `.wcpt-row` — and the cell's content is `[mechanc_pcard]`, whose
   `.pcard` paints all four again. Every symptom in the 14.08 feedback followed
   from that one duplication:

     · the lift read as "too pronounced" because two `translateY(-2px)`
       compose to -4px, under two stacked shadows;
     · the corners showed "the box behind" because two nested rounded boxes of
       slightly different geometry leave the outer one visible at each corner;
     · the hover border was the wrong colour because `--border-accent` here
       competed with `--bra` on `.pcard`.

   So the row goes back to being what it actually is — a layout wrapper — and
   `.pcard` owns the card. `.pcard` is the design-system component and already
   carries the reference's exact values, which is why this is a deletion rather
   than a re-specification. Sizing stays in §12; that is layout, not decoration. */
.wcpt.wcpt-grid-view .wcpt-row {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	transform: none;
	overflow: visible;
}

.wcpt.wcpt-grid-view .wcpt-row:hover {
	transform: none;
	border-color: transparent;
	box-shadow: none;
}

.wcpt.wcpt-grid-view .wcpt-cell {
	background: transparent !important;
	border: 0 !important;
	padding: 0 14px;
}

.wcpt.wcpt-grid-view .wcpt-cell:first-child {
	padding: 0;
}

.wcpt-shortcode {
	width: 100%;
}

/* The product image tile. Catalogue photographs are cut out on white, so the
   tile keeps a light surface deliberately — a dark one would frame every
   thumbnail in a bright rectangle. */
/* The wrapper carries the height, matching `.pcard-img`'s 140px in the design.

   This is load-bearing: the image previously took `height: 100%` of a wrapper
   with no height of its own, so it had nothing to resolve against and expanded
   to its intrinsic size — one thumbnail filling the entire results column. The
   height belongs on the container, and the image fits inside it. */
/* ──────── The two-state problem ────────
   `wcpt-grid-view` is present in the server-rendered HTML, but the addon only
   lays the rows out as a grid once its JavaScript has run. So on first paint
   these rules apply to full-width table rows, and only afterwards to cards.
   They have to look deliberate in both states.

   That rules out a white background on the wrapper: stretched across a
   full-width row it becomes a white slab, which is exactly what the first paint
   showed. The white sits on the image instead — where it is bounded by the
   image's own size — and the wrapper stays transparent and width-capped, so the
   worst case is a small tile rather than a band. */
/* `!important` is required, not defensive. WCPT prints its own sizing as
   `#wcpt-2313 .wcpt-product-image-wrapper img { … }` — an ID selector, which no
   class selector can outrank. Measured in the browser: without it the wrapper
   kept `max-width:100%` and the image `max-width:none`, so a 768px thumbnail
   stretched to **3539px**, dragged the row to 3561px and pushed the whole page
   into horizontal scroll (body scrollWidth 1915 against a 1529 viewport). With
   it: wrapper 240×140, image 175×140, scrollWidth back to 1529. */
.wcpt.wcpt-grid-view .wcpt-product-image-wrapper {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 140px !important;
	max-width: 240px !important;
	margin: 0 auto !important;
	background: transparent !important;
	overflow: hidden !important;
}

.wcpt.wcpt-grid-view .wcpt-product-image-wrapper img {
	max-width: 100% !important;
	max-height: 100% !important;
	width: auto !important;
	height: auto !important;
	object-fit: contain !important;
	padding: 8px !important;
	background: #fff;
	border-radius: var(--radius);
}

/* ──────── The card image well ────────
   Applies to every `.pcard` on the site — the archive grid and the related
   products strip both render the same component, and the 14.08 feedback asked
   for the same treatment in both places.

   The design system gives `.pcard-img` a dark gradient. That works for the
   reference's line-art placeholders, but the real catalogue photographs are
   opaque cut-outs on white, so each one landed as a bright square floating on
   a dark panel with hard corners. Painting the well white instead makes the
   photo continuous with its own background — it reads as a deliberate product
   plate rather than an accident.

   White is a literal in both themes on purpose. A themed well would put a
   coloured frame around every photograph, which is the thing being fixed.
   Transparent PNG/WebP sources remain the real answer. */
.pcard-img {
	background: #fff;
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.frzTbl-fixed-heading-wrapper-outer::after {
	background: unset;
}

/* design-system.css declares `body.light .pcard-img` with `!important`, so the
   light override has to match it to land at all. Dark needs no such bump. */
body.light .pcard-img {
	background: #fff !important;
	border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}

/* `.pcard` clips with `overflow: hidden`, but a flex child painting its own
   background is drawn outside that clip in some engines. Stating the two top
   corners here makes the rounding hold everywhere. */
.pcard-img img,
.pcard-photo {
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* Product name → `.pcard-name`; SKU → `.pcard-pn`. */
.wcpt.wcpt-grid-view .wcpt-cell a {
	color: var(--text-secondary);
	font-size: 13px;
	line-height: 1.4;
}

.wcpt.wcpt-grid-view .wcpt-cell a.pcard-name {
	min-height: 54.6px;
}

.wcpt.wcpt-grid-view .wcpt-cell a:hover {
	color: var(--accent-cyan);
}

.wcpt.wcpt-grid-view .wcpt-sku {
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 700;
	color: var(--text-primary);
}

/* ──────── 6. Table view → `.dtable` ────────
   product-table.css already makes the generic `.wcpt` table transparent with
   mono accent headings. Only the archive-specific differences are restated
   here: the design's data table is slightly roomier than the product-page one
   and carries an outer border and radius. */
.wcpt:not(.wcpt-grid-view) .wcpt-table-scroll-wrapper {
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.wcpt:not(.wcpt-grid-view) .wcpt-heading {
	padding: 12px 14px;
	font-family: var(--font-mono);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--accent-cyan) !important;
	background: rgba(0, 207, 255, 0.04) !important;
	border-bottom: 1px solid var(--border-accent) !important;
	white-space: nowrap;
}

.wcpt:not(.wcpt-grid-view) .wcpt-cell {
	padding: 13px 14px;
	vertical-align: middle;
	color: var(--text-secondary) !important;
	border-bottom: 1px solid var(--border) !important;
}

.wcpt:not(.wcpt-grid-view) .wcpt-row:last-child .wcpt-cell {
	border-bottom: none !important;
}

/* ──────── 7. Pagination → `.pagination` / `.pg-btn` ──────── */
.wcpt .wcpt-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 32px;
	background: transparent !important;
}

.wcpt .wcpt-pagination .page-numbers {
	min-width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 8px;
	border-radius: var(--radius);
	border: 1px solid var(--border) !important;
	background: transparent !important;
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--text-secondary) !important;
	transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.wcpt .wcpt-pagination .page-numbers:hover {
	border-color: var(--border-accent) !important;
	color: var(--accent-cyan) !important;
}

.wcpt .wcpt-pagination .page-numbers.current {
	background: var(--accent-blue) !important;
	border-color: var(--accent-blue) !important;
	color: #fff !important;
}

/* ──────── 8. Responsive ────────
   Below the reference's catalogue breakpoint the sidebar stacks above the
   results and loses its dividing rule, matching `.catalog-layout`'s own
   single-column fallback. */
@media (max-width: 900px) {
	.wcpt .wcpt-navigation.wcpt-left-sidebar {
		border-right: 0;
		border-bottom: 1px solid var(--border);
		padding: 16px;
	}

	.wcpt .wcpt-nav-main {
		padding: 16px 0;
	}
}

/* ──────── 9. Card part colouring ────────
   design-system.css gives `.pcard-pn` the primary text colour and `.pcard-cat`
   a small muted treatment. The reference reverses the emphasis: the series
   ("1.0mm") reads as a light heading and the part number is the cyan accent,
   because the part number is what an engineer scans for. */
.pcard-cat {
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	color: var(--text-primary);
	margin-bottom: 2px;
}

.pcard-pn {
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 700;
	color: var(--accent-cyan);
	margin-bottom: 6px;
}

a.pcard-name {
	font-size: 13px;
	color: var(--text-secondary);
}

.pcard-specs .pcard-spec {
	border-bottom: 0;
	padding-top: 8px;
	margin-top: 4px;
	border-top: 1px solid var(--border);
}

.pcard-spec-k,
.pcard-spec-v {
	font-family: var(--font-body);
	font-size: 12px;
	color: var(--text-secondary);
}

/* ──────── 10. Grid view must not inherit the frozen-column width ────────
   `laptop_freeze_left/right` on the shortcode turns on WCPT's freeze-columns
   feature, which wraps the table as `.frzTbl-table` and sets an inline
   `min-width` computed from every column — measured at over 14000px here.

   In table view that is correct: the columns really are that wide and the
   plugin's own scroller handles it. In grid view there is one cell per product,
   so the inherited min-width is what forces the page-wide horizontal scrollbar
   and the stretched first paint. Inline styles are involved, hence !important.

   Scoped to `.wcpt-grid-view` so table view keeps its freeze behaviour intact. */
.wcpt.wcpt-grid-view .wcpt-table,
.wcpt.wcpt-grid-view .frzTbl-table,
.wcpt.wcpt-grid-view .wcpt-table-scroll-wrapper,
.wcpt.wcpt-grid-view .wcpt-table-scroll-wrapper-outer {
	min-width: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	overflow-x: visible !important;
}

/* ──────── The wrappers, which is where this was actually going wrong ────────
   Clearing the table's own min-width was not enough. frzTbl builds a nest of
   wrappers around it and widens `.frzTbl-table-wrapper__inner` to the frozen
   width, so the table — capped at `max-width: 100%` — resolved that against a
   20000px parent and stayed 20000px wide.

   That is what produced the "blank rows" first paint. The cards were rendering
   correctly the whole time: the row basis is a *percentage* of the flex
   container, so 25% of a 20000px tbody made every card ~4990px wide and pushed
   the first one 2800px off-screen. Measuring four rows at the same offsetTop
   confirmed "four per row" and hid the fact that all four were outside the
   viewport — the trap in that check is that the layout was correct and only the
   scale was wrong.

   Measured after clamping the wrappers: table 979px, four cards of 234px per
   row, body scrollWidth 1675 against a 1680 viewport. */
.wcpt.wcpt-grid-view .frzTbl-table-wrapper,
.wcpt.wcpt-grid-view .frzTbl-table-wrapper__inner,
.wcpt.wcpt-grid-view .frzTbl-content-wrapper,
.wcpt.wcpt-grid-view .frzTbl-fixed-heading-wrapper,
.wcpt.wcpt-grid-view .frzTbl-fixed-heading-wrapper__inner {
	width: 100% !important;
	min-width: 0 !important;
	max-width: 100% !important;
}

/* The card cell should fill its grid track rather than a frozen column width. */
.wcpt.wcpt-grid-view .wcpt-row,
.wcpt.wcpt-grid-view .wcpt-cell {
	min-width: 0 !important;
	max-width: 100% !important;
}

/* ──────── 11. Telecom / market card grid ────────
   `.rec-grid` is three columns in the reference; the Elementor container it
   sits in is a flex row, so the cards need an explicit basis to wrap evenly. */
.rec-grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

/* The cards are produced by one shortcode widget, so the Elementor container
   carrying `.rec-grid` has exactly one grid item — the widget — and all six
   cards stacked inside it in a single 444px column. `display: contents` takes
   the widget and its shortcode wrapper out of the layout so the cards become
   the grid items themselves.

   This is why the container keeps the grid rather than the shortcode emitting
   its own (`wrapper="no"` on the telecom page): the client keeps the column and
   gap controls in the editor, and nesting a second grid would collapse both. */
.rec-grid > .elementor-widget,
.rec-grid > .elementor-widget > .elementor-widget-container,
.rec-grid > .elementor-widget .elementor-shortcode {
	display: contents;
}

@media (max-width: 1024px) {
	.rec-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.rec-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
	
	.site-header {
		padding-block-end: 0rem !important;
		padding-block-start: 0rem !important;
	}
	
	.e-con.quote-page-inner {
		padding: 0 !important;
	}
}

/* ──────── 12. Four cards per row ────────
   The view-switcher addon makes `tbody` a wrapping flex row but never gives the
   rows a width, so each one sized to its content and wrapped one per line.
   `laptop_columns: 4` in the table's own grid config says what was intended;
   this supplies the basis that makes it happen.

   `!important` because the frozen-column feature sets row widths inline.
   The heading row is hidden: column headings are meaningless once each row is
   a card, and it otherwise renders as an empty first cell. */
.wcpt.wcpt-grid-view tbody {
	gap: 14px !important;
	align-items: stretch !important;
}

.wcpt.wcpt-grid-view .wcpt-row {
	flex: 0 0 calc((100% - 42px) / 4) !important;
	max-width: calc((100% - 42px) / 4) !important;
	min-width: 0 !important;
	width: auto !important;
}

.wcpt.wcpt-grid-view .wcpt-heading-row {
	display: none !important;
}

@media (max-width: 1200px) {
	.wcpt.wcpt-grid-view .wcpt-row {
		flex-basis: calc((100% - 28px) / 3) !important;
		max-width: calc((100% - 28px) / 3) !important;
	}
}

@media (max-width: 900px) {
	.wcpt.wcpt-grid-view .wcpt-row {
		flex-basis: calc((100% - 14px) / 2) !important;
		max-width: calc((100% - 14px) / 2) !important;
	}
}

@media (max-width: 600px) {
	.wcpt.wcpt-grid-view .wcpt-row {
		flex-basis: 100% !important;
		max-width: 100% !important;
	}
}


/* ──────── 13. View switcher: icons only ────────
   The reference's `.vbtn` is a 36×36 icon square whose label lives only in
   `aria-label`. The addon prints the word beside the icon, which is what the
   14.08 feedback asked to remove.

   The text is hidden rather than deleted: the button carries no other
   accessible name, so removing it outright would leave two unlabelled squares
   for anyone using a screen reader. */
.wcpt-grid-table-view-switcher__button .wcpt-grid-table-view-switcher__button__text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.wcpt-grid-table-view-switcher__button {
	width: 36px;
	padding: 0;
	gap: 0;
	justify-content: center;
	position: relative;
}


/* ──────── 14. Sidebar option spacing ────────
   The reference's `.filter-check` sets `gap: 7px` between the box and the
   label. The rule is still in §2, but two later additions defeat it: the
   ≥1199px block zeroes the gap on `.wcpt-options`, and making the label's
   second span `display: block; flex: 1` lets it start hard against the input.

   Restated on the input itself, which no flex-container gap can cancel. */
.wcpt .wcpt-left-sidebar .wcpt-dropdown-option label {
	gap: 7px;
}

.wcpt .wcpt-left-sidebar .wcpt-dropdown-option label input[type="checkbox"],
.wcpt .wcpt-left-sidebar .wcpt-dropdown-option label input[type="radio"] {
	width: 14px;
	height: 14px;
	margin-inline-end: 7px;
	accent-color: var(--accent-cyan);
}

.wcpt .wcpt-left-sidebar .wcpt-dropdown-option label > span {
	padding-left: 0;
}

@media (min-width: 1199px) {
	.wcpt-left-sidebar .wcpt-options {
		gap: 2px;
	}
}


/* ──────── 15. Card footers on one line ────────
   Same problem as the related-products strip: the addon stretches its rows to
   equal height, but nothing inside the row stretches with them, so the button
   row sat wherever the description happened to end.

   Stretching the card and pinning `.pcard-actions` to the bottom holds for any
   title length, which the 14.08 feedback's "add a blank line" would not. */
.wcpt.wcpt-grid-view .wcpt-row,
.wcpt.wcpt-grid-view .wcpt-cell {
	display: flex;
	flex-direction: column;
}

.wcpt.wcpt-grid-view .wcpt-cell {
	flex: 1;
}

.wcpt.wcpt-grid-view .pcard {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.wcpt.wcpt-grid-view .pcard-body {
	flex: 1;
}

.wcpt.wcpt-grid-view .pcard-actions {
	margin-top: auto;
}


/* ──────── 16. Card action buttons ────────
   The reference changes only the background on the quote button's hover, and
   only the border and text on the datasheet button's. The build had the quote
   button also swapping its border to cyan, which is the mismatch the 14.08
   feedback describes.

   Light mode is written out in full because the reference has no `:hover` rule
   for either button in light — they inherited the dark hover colours, which is
   a gap in the mockup rather than a decision. */
/* YITH ships this, in its own stylesheet:

     .woocommerce .add-request-quote-button.button {
       background-color: var(--ywraq_layout_button_bg_color)     !important;
       color:            var(--ywraq_layout_button_color)        !important;
       border: 1px solid var(--ywraq_layout_button_border_color) !important;
     }

   Three `!important` declarations that no plain selector can outrank — which is
   why the quote button stayed the plugin's solid #0066b4 with white text in
   both themes while the theme's own rule sat underneath doing nothing.

   Escalating to `!important` here would work and would then have to be repeated
   for every state and both themes. Redeclaring the variables the plugin reads
   is smaller and ends the contest: custom properties inherit, so each container
   hands its button a different palette without either side raising specificity.
   It also leaves YITH's own colour settings meaningful everywhere else. */
.pcard-actions {
	--ywraq_layout_button_bg_color: rgba(0, 98, 230, 0.12);
	--ywraq_layout_button_border_color: rgba(0, 98, 230, 0.25);
	--ywraq_layout_button_color: var(--accent-cyan);
	--ywraq_layout_button_bg_color_hover: rgba(0, 98, 230, 0.22);
	--ywraq_layout_button_border_color_hover: rgba(0, 98, 230, 0.25);
	--ywraq_layout_button_color_hover: var(--accent-cyan);
}

/* The reference gives light mode no `:hover` rule for either card button, so
   they inherited the dark hover colours. That is a gap in the mockup rather
   than a decision, so both states are written out here. */
body.light .pcard-actions {
	--ywraq_layout_button_bg_color: rgba(0, 75, 196, 0.1);
	--ywraq_layout_button_border_color: rgba(0, 75, 196, 0.25);
	--ywraq_layout_button_color: var(--blue);
	--ywraq_layout_button_bg_color_hover: rgba(0, 75, 196, 0.2);
	--ywraq_layout_button_border_color_hover: rgba(0, 75, 196, 0.25);
	--ywraq_layout_button_color_hover: var(--blue);
}

/* The product page's primary CTA is a gradient with black text, so it wants the
   plugin's flat colour and border out of the way entirely. The gradient itself
   is a `background-image` and paints over the background-colour regardless; the
   border is the part that actually needed neutralising. */
.pd-quote-wrap {
	--ywraq_layout_button_bg_color: transparent;
	--ywraq_layout_button_border_color: transparent;
	--ywraq_layout_button_color: #000;
	--ywraq_layout_button_bg_color_hover: transparent;
	--ywraq_layout_button_border_color_hover: transparent;
	--ywraq_layout_button_color_hover: #000;
}

body.light .pcard-actions .btn-ds:hover {
	border-color: rgba(0, 98, 230, 0.3);
	color: var(--blue);
	background: transparent;
}


/* ──────── 17. Scrollbar ────────
   The reference's only scrollbar rule is a global 5px. The 14.08 feedback asked
   for 50% more, so 8px. The standards properties are added alongside because
   the design system's rule is WebKit-only — Firefox has never had the styled
   scrollbar at all. */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-thumb {
	background: var(--blue);
	border-radius: 4px;
}

/* The standards properties are guarded, not applied globally. Chrome honours
   `::-webkit-scrollbar` only while `scrollbar-width` is unset — declaring
   `thin` alongside it hands control back to the browser, which renders ~11px
   and loses the exact 8px asked for. This block reaches Firefox, which has
   never supported the WebKit pseudo-elements and so had no styled scrollbar at
   all, without touching the engines that do. */
@supports not selector(::-webkit-scrollbar) {
	* {
		scrollbar-width: thin;
		scrollbar-color: var(--blue) var(--deep);
	}
}


/* ──────── 18. Active-filter bar ────────
   This bar has no equivalent in the reference — grepping all three mockups for
   a clear-filters or active-filter chip returns nothing. It is plugin UI, so
   "like the template" has to mean "built from the template's primitives": the
   chip borrows `.cat-hero-tag`, the clear link borrows `.ql-clear`.

   Written against tokens with no `body.light` copy, which corrects the dark
   theme at the same time as the white slab the feedback reported in light. */
.wcpt .wcpt-clear-filters-wrapper {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
}

.wcpt .wcpt-clear-filters-wrapper .wcpt-clear-filter {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 14px;
	border: 1px solid var(--br) !important;
	border-radius: 4px;
	background: transparent !important;
	color: var(--t2) !important;
	font-family: var(--fm);
	font-size: 12px;
	text-transform: none;
	letter-spacing: 0;
	transition: border-color .2s, color .2s;
}

.wcpt .wcpt-clear-filters-wrapper .wcpt-clear-filter:hover {
	border-color: var(--cyan) !important;
	color: var(--cyan) !important;
}

.wcpt .wcpt-clear-filters-wrapper .wcpt-clear-filter svg {
	width: 12px;
	height: 12px;
	flex: 0 0 12px;
}

.wcpt .wcpt-clear-filters-wrapper .wcpt-filter-label,
.wcpt .wcpt-clear-filters-wrapper .wcpt-selected-filter,
.wcpt .wcpt-clear-filters-wrapper .wcpt-separator {
	color: inherit !important;
	background: transparent !important;
}

.wcpt .wcpt-clear-filters-wrapper .wcpt-clear-all-filters,
.wcpt a.wcpt-clear-all-filters {
	margin-left: 4px;
	padding: 0;
	border: 0 !important;
	background: transparent !important;
	font-family: var(--fm);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--t3) !important;
	transition: color .2s;
}

.wcpt .wcpt-clear-filters-wrapper .wcpt-clear-all-filters:hover,
.wcpt a.wcpt-clear-all-filters:hover {
	color: #ff4444 !important;
}