.taxonomy-page {
    color: #1e1e1e;
}

.category-cards-section {
    padding: 50px;
}


.product-header {
    display: flex;
    gap:30px;
}

.variant-details a {
    color: #1e1e1e;
}

/* Spec Tab */
.spec-variants {
    display: flex;
    flex-wrap: nowrap;
    gap: 30px;
    justify-content: space-between;
}

.tab-spec-table, .tab-variants-cards {
    width: 48%;
}

.spec-variants .variant-cards-wrapper {
    flex-direction: column;
}

.variant-card .card-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    flex-direction: row;
}
.spec-table-wrapper {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.5s ease, opacity 0.4s ease;
}

.spec-table-wrapper.is-visible {
  max-height: 2000px; /* big enough for full content */
  opacity: 1;
}

.variant-card .card {
    box-shadow: none;
    /* align-items: flex-end; */
}

.variant-details button.spec-toggle {
    border: 1px solid #d0cdcb;
    background-color: transparent;
    color: #1e1e1e;
    padding: 0.65rem 1.25rem;
    min-width: 80px;
}

.variant-details button.spec-toggle:hover {
    background-color: #21827F;
    color: #ffffff;
}

.button-column div > a {
    border: 1px solid #E4E5E8 !important;
}

/* Spec Tab End */

.variant-card p {
    min-height: 48px;
}


.taxonomy-page {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

/* Mobile: the content block stacks under the gallery — add a little breathing
   room at the top. Scoped to the series-page side column. */
@media (max-width: 767.98px) {
    .product-header-content .taxonomy-page {
        padding-top: 15px;
    }
}

/* Brand logo */
.taxonomy-page .series-logo {
    margin-bottom: 20px;
}

.taxonomy-page .series-logo img {
    display: block;
    height: 56px;
    width: auto;
    max-width: 240px;
}

/* H1 — JetBrains Mono, explicit weight locks parity with the variant
   (.main-product-card-wrap h1.products-brand) regardless of inheritance. */
h1.series-h1 {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.6rem;
    font-weight: 500;
    margin: 0 0 6px;
    text-align: left;
}

@media (min-width: 1200px) {
    h1.series-h1 {
        font-size: 1.6rem;
    }
}

/* Tab-panel section headings (Description / Specifications / Variants) sit one
   level below the series H1 (1.6rem) and above the variant-card H3s (0.95rem).
   Without this they inherited the global h2 (1.86rem) and rendered LARGER than
   the page H1. Applies to every panel so the hierarchy is consistent. */
.tab-panel h2 {
    font-size: 1.3rem;
}

/* SEO subtitle */
.taxonomy-page .series-seo-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.95rem;
    font-weight: 400;
    color: #0f0d1d;
    margin: 0 0 20px;
    line-height: 1.5;
}

/* Short overview — body text, slightly looser */
.taxonomy-page .short-overview {
    max-width: 760px;
    line-height: 1.7;
    margin: 0 0 20px;
}

/* Key features section */
.taxonomy-page .key-features {
    max-width: 760px;
    margin-bottom: 28px;
    padding-left: 15px;
    padding-right: 0;
}

.taxonomy-page .key-features ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.taxonomy-page .key-features li {
    margin-bottom: 0.5rem;
    line-height: 1.5;
    padding: 2px 0 2px 22px;
    position: relative;
}

.taxonomy-page .key-features li::before {
    content: '//';
    position: absolute;
    left: 0;
    top: 2px;
    color: #1187D4;
    font-weight: 700;
}



/* =========================

PRODUCT HEADER LAYOUT

(two columns: gallery left, content right)

========================= */

/* 2026-05-27: removed the .product-header custom flex layout (~30 lines of
   rules + a media query). Series page now uses Bootstrap row + col-md-6
   matching the variant page; layout is fully handled by Bootstrap's grid.
   Mobile-stack behaviour is built in (col-12 col-md-6 stacks at <768px). */

/* =========================
   GALLERY (Swiper) — authoritative rules
   Thumbs left (desktop), main image right.
   Mobile: thumbs hidden, dots navigate.
========================= */

.gallery.product-gallery {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-direction: row;
  width: 100%;
  background: #fff;
  padding: 16px;
  border-radius: 10px;
  box-sizing: border-box;
}

/* ---- Thumbnail column ---- */
.thumbs-col {
  flex: 0 0 120px;
  width: 120px;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Vertical divider between thumb column and main image */
.thumbs-col::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: -8px;
  width: 1px;
  background: #d0cdcb;
}

/* Viewport — spaceBetween:0 means NO Swiper margins; CSS handles gap via .thumb.
   Height = 4×colW + 3×gap (gaps only between slides, not after last). */
.thumbs-viewport {
  height: calc(4 * 120px + 3 * var(--thumb-gap, 8px)); /* desktop fallback: 504px */
  overflow: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.thumbs-viewport::-webkit-scrollbar { width: 0; height: 0; }

/* Thumb list — flex direction is controlled by Swiper (vertical/horizontal).
   We only set the non-directional properties here; direction is locked in by
   the desktop/mobile media queries below so it doesn't fight Swiper's classes. */
.thumbs-list {
  display: flex;
  margin: 0; padding: 0; list-style: none;
}

/* Desktop: vertical strip */
@media (min-width: 1025px) {
  .thumbs-list {
    flex-direction: column;
  }
}

/* Individual thumb tile */
.thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 2px solid transparent;
  box-sizing: border-box;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s ease;
  margin-bottom: var(--thumb-gap, 8px); /* spacing between thumbs */
}

/* No gap after the last thumb */
.thumb:last-child {
  margin-bottom: 0;
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  opacity: 0.75;
  transition: opacity 0.15s ease;
}

/* Selected thumb — driven by Swiper's swiper-slide-thumb-active class only.
   .is-active is set by syncAria() in JS so both always match the same slide. */
.thumb.is-active,
.thumb.swiper-slide-thumb-active {
  border-color: var(--accent, #4db6ac);
}

.thumb.is-active img,
.thumb.swiper-slide-thumb-active img,
.thumb:hover img {
  opacity: 1;
}

/* Keyboard-only focus ring (not triggered by mouse clicks) */
.thumb:focus-visible {
  outline: 2px solid var(--accent, #4db6ac);
  outline-offset: 2px;
}

/* ---- Main image column ---- */
.main-col {
  flex: 1 1 auto;
  min-width: 0;
}

/* Main image link wrapper — shows zoom cursor */
.gallery-lightbox-link {
  display: block;
  cursor: zoom-in;
}

.main-col picture,
.main-col img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Pagination sits OUTSIDE .main-swiper so it isn't clipped by overflow:hidden.
   Override Swiper's "position:absolute; bottom:8px" — we want it in normal flow. */
.main-col .gallery-pagination {
  position: static !important; /* cancel Swiper's position:absolute */
  bottom: auto !important;     /* cancel Swiper's bottom:8px */
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  min-height: 20px;
  width: 100%;
}

/* ---- Tablet & Mobile (≤1024px): horizontal thumb strip below the main image ---- */
@media (max-width: 1024px) {
  /* Stack: main image on top, thumb strip below */
  .gallery.product-gallery {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px;
  }

  .main-col {
    order: 1;
    width: 100%;
  }

  .thumbs-col {
    order: 2;
    flex: none;
    width: 100%;
    margin-top: 10px;
  }

  /* Hide the desktop vertical divider */
  .thumbs-col::after { display: none; }

  /* Single-row horizontal strip — Swiper calculates slide widths via slidesPerView:4 */
  .thumbs-viewport {
    height: 88px;
    width: 100%;
  }

  /* Horizontal strip — override the desktop column direction.
     `safe center` centres when all slides fit the row, but falls back
     to flex-start when they overflow so the first thumb is always
     visible at the left edge. Plain `center` centred the overflow
     itself, hiding thumb 0 off-screen left (2026-06-01). */
  .thumbs-list {
    flex-direction: row !important;
    justify-content: safe center;
  }

  /* Each thumb: fixed size so slidesPerView:'auto' reads a real CSS width.
     Remove aspect-ratio so height doesn't fight the 88px viewport height. */
  .thumbs-swiper .swiper-slide.thumb {
    width: 80px;
    height: 80px;
    aspect-ratio: unset;
    margin-bottom: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Ensure thumb images fill the tile and are centred within it */
  .thumbs-swiper .swiper-slide.thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }

  /* Show pagination dots below the main image on tablet/mobile */
  .main-col .gallery-pagination {
    display: flex !important;
    margin-top: 8px;
    margin-bottom: 4px;
  }
}

/* =========================

NEUTRALIZE OLD OWL RULES

(avoid conflicts)

========================= */

.product-gallery .owl-carousel .owl-item img{ width:auto !important; } /* harmless */

/* Border:0 on #main_images — kills the legacy style.css `#main_images { border:1px solid #efefef }`
   rule from the old Owl-carousel gallery. Generalised 2026-05-27 to also cover the variant page
   (where the partial is wrapped in .col-md-6.pd-gallery-col, not .product-header). */
.product-header div#main_images,
.gallery.product-gallery div#main_images,
.pd-gallery-col #main_images { width:100%; border:0 !important; }

/* Old Owl selectors – disable so they don't fight Swiper layout */

.product-gallery #thumb_images, .product-header .thumb-item,

.category-cards-section #thumb_images .owl-stage,

.product-gallery #thumb_images .thumb-item{

all:unset;

}

/* Desktop: keep left gallery in view while scrolling */

@media (min-width:1025px){

.product-header .product-gallery{

position: sticky; /* or: position: -webkit-sticky; for older iOS */

top: var(--stick-offset, 88px); /* distance from top (header height + a bit) */

height: fit-content; /* grow to its content */

align-self: flex-start; /* don’t stretch to right column’s height */

z-index: 2; /* above background stuff */

will-change: transform; /* own composite layer — isolates sticky from right-column reflows */

}

}

/* Ensure parent allows sticky to work */

.product-header{

overflow: visible; /* sticky breaks if parent overflows hidden/auto */

}

/* Thumbs viewport scroll handled in the gallery block */

.product-gallery #thumb_images .thumb-item {
    width: 150px;
    border: 0px solid #efefef;
}


hr {
    margin: 1rem 0;
    color: inherit;
    background-color: #d0cdcb;
    border: 0;
    opacity: 1;
}


.series-icons{
    padding: 30px 10px;
}

.product-gallery .owl-nav {
    display: none;
}


/* Variant Picker */
.product-side-content a {
    color: #1e1e1e !important;
}

.product-side-content li a.selected {
    padding: 17px 10px !important;
    font-weight: 500;
}
.product-side-content .js-nav-picker.activated li:first-child a, .js-nav-picker li a {
    color: inherit;
    position: relative;
    display: block;
    width: 100%;
    background-color: #f6f4f3;
}
.product-side-content .js-nav-picker.not-activated li a:hover {
    background-color: #4db6ac;
    color: #ffffff !important;
}
/* Scoped to .product-header-content (NOT .product-side-content) so the button
   hovers apply on BOTH the series side column AND the variant summary — the
   series column carries both classes, the variant only .product-header-content. */
.product-header-content a.btn.r-0.btn-primary1.btn-white.product-control:hover {
    background-color: #0C1220;
}
.product-header-content a.btn.r-0.btn-primary1.btn-white.product-control:hover span{
    color: #ffffff;
}
.product-header-content form a.btn.btn-white.product-control.w-100.pro-js-load-modal-content:hover {
    background-color: #0C1220;
}
.product-header-content form a.btn.btn-white.product-control.w-100.pro-js-load-modal-content:hover span {
    color: #ffffff;
}

.product-side-content .js-nav-picker li a:hover {
    background-color: #4db6ac;
    color: #fff !important;
}
.product-side-content li.js-nav-category-variation a:hover {
    background-color: #4db6ac !important;
}

/* .product-side-content .js-nav-picker {
    position: absolute;
} */


.product-side-content .sku-bold {
    font-weight: 500; /* bold SKU */
}

.product-side-content .sku-bold span {
    font-weight: 400; /* span stays normal */
}

.product-side-content ul.js-nav-picker {
    border: 1px solid #d0cdcb;
}

/* ── Always-open variant picker (category page cards) ─────── */
.js-nav-picker--open {
    border: 1px solid #d0cdcb !important;
}
/* Force all rows visible — overrides the not-activated hide rules */
.js-nav-picker--open li,
.js-nav-picker--open li:first-child {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    border-bottom: 1px solid #d0cdcb;
    background: #fff;
    padding: 0;
}
.js-nav-picker--open li:nth-child(odd) {
    background: #f6f4f3;
}
.js-nav-picker--open li:last-child {
    border-bottom: none;
}
/* Info section fills remaining space */
.js-nav-picker--open .variant-modal-info {
    flex: 1;
    padding: 8px 12px;
    min-width: 0;
}
/* Strip old toggle chevron */
.js-nav-picker--open li a:before,
.js-nav-picker--open li a:after {
    display: none !important;
    content: '' !important;
}
/* Strip old link background and block display from old rules */
.js-nav-picker--open .variant-modal-info,
.js-nav-picker--open .variant-modal-info strong,
.js-nav-picker--open .variant-modal-info span {
    background: transparent !important;
    color: #1e1e1e !important;
    display: block;
    width: auto;
}
.js-nav-picker--open .variant-modal-sku {
    font-size: 0.8125rem;
    font-weight: 600;
}
.js-nav-picker--open .variant-modal-desc {
    font-size: 0.75rem;
    color: #555 !important;
    margin-top: 1px;
}
/* Actions section — reuse modal button styles, just tweak padding */
.js-nav-picker--open .variant-modal-actions {
    padding: 6px 8px;
    flex-shrink: 0;
}

/* Resting button style — scoped to .product-header-content so it covers BOTH the
   series side column and the variant summary (series has #1e1e1e text via the
   .product-side-content a !important rule; match it here for the variant). */
.product-header-content a.btn.r-0.btn-primary1.btn-white.product-control.w-100,
.product-header-content a.btn.r-0.bg-px-bitter-lemon1.btn-white.product-control.w-100 {
    border: 1px solid #E4E5E8;
    color: #1e1e1e;
}

.product-control,
.product-control span {
    font-family: 'JetBrains Mono', monospace;
}



    .button-column {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 15px;              /* Space between each div/button */
    }

    .button-column div {
        width: 100%;
        flex: 1 1 calc(33.333% - 10px);
        display: flex;   /* cell is a flex container so its button fills the row-stretched height */
    }
    /* Send Enquiry's button is wrapped in a <form>; let the form fill the cell so
       the button stretches to the same height as the others. */
    .button-column div > form {
        display: flex;
        flex: 1 1 auto;
        width: 100%;
    }

    .button-column a,
    .button-column button {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        /* height: 80px; */
        /* padding: 10px 0px; */
        text-decoration: none;
        border-radius: 5px;
        cursor: pointer;
        transition: all 0.3s;
    }


.key-features ul {
    padding-left: 1em;
}

.key-features ul {
    list-style-type: disc;
    list-style-position: inside;
    padding-left: 0px;
}

.key-features li {
    color: inherit;
}

.key-features ul li::marker {
    color: #4db6ac; /* Set the bullet (marker) color to green */
}



.pd-lr{
    padding-left: 50px;
    padding-right: 50px;
}






/* === Wrapper === */
.product-tabs {
  width: 100%;
}

/* === Hide radios === */
.product-tabs input[type="radio"] {
  display: none;
}

/* Active tab indicator (bottom border) */
#tab-description:checked ~ .tab-bar label[for="tab-description"],
#tab-specs:checked ~ .tab-bar label[for="tab-specs"],
#tab-variants:checked ~ .tab-bar label[for="tab-variants"] {
  background: #fff;
  color: #1187D4;
  border-bottom: 3px solid #1187D4;
}

/* === Tab content === */
.product-tabs .tab-content {
  display: none;
  background: #fff;
  padding: 40px 20px;
  margin: 0 auto;
  border: 1px solid #ece9e8;
  border-top: none;
}

/* Show active content */
#tab-description:checked ~ #content-description,
#tab-specs:checked ~ #content-specs,
#tab-variants:checked ~ #content-variants {
  display: block;
}


/* Desktop: tab labels horizontal */
.tab-left {
  display: flex;
  /* gap: 10px; */
}

.tab-bar .tab-label:hover {
    background: #1187D4;
    color: #ffffff;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}



/* ---------- VARIABLES ---------- */
:root {
  --tab-bg: #F2F3F5;
  --tab-border: #E4E5E8;
  --tab-text: #2f2f2f;
  --tab-hover: #ece9e8;
  --tab-active: #4db6ac; /* green accent */
  --padding-x: 24px;
  --navbar-height: 72px;    /* fixed header height — matches .header-inner { min-height: 72px } */
  --tab-bar-height: 42px;   /* rendered height of .tab-bar (12px padding × 2 + ~18px text) */
}

/* ---------- ACCESSIBILITY ---------- */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- BASE ---------- */
.tab-radio {
  position: absolute;
  left: -9999px;
}

/* Desktop Tab Bar */
.tab-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--tab-bg);
  border: 1px solid var(--tab-border);
  white-space: nowrap;
  padding: 0 50px;
  position: sticky;
  top: var(--navbar-height, 59px); /* snaps flush under the fixed header */
  z-index: 100; /* above Swiper, dropdowns, and other stacked elements */
}

/* Scroll offset for the #compare-variants anchor itself — prevents the fixed
   header from covering the tab bar when the "Compare Variants" button is clicked */
#compare-variants {
  scroll-margin-top: var(--navbar-height, 59px);
}

/* Panels need a larger offset: header + tab bar (~42px) + 8px breathing room */
.tab-panel {
  scroll-margin-top: calc(var(--navbar-height, 59px) + 50px);
}

/* Only apply to .fixed-header when a .tab-bar exists anywhere on the page */
body:has(.tab-bar) .fixed-header .navbar {
  background-color: #ffffff;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.05),
              0 1.5rem 2.2rem rgba(0, 0, 0, 0.0);
}


.tab-left {
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden; /* keeps borders seamless */
}

.tab-label {
  position: relative;
  display: inline-block;
  padding: 12px var(--padding-x);
  cursor: pointer;
  user-select: none;
  color: var(--tab-text);
  background: #ffffff;
  border: 1px solid var(--tab-border);
  border-top: none;
  border-right: none; /* prevent double borders between tabs */
  border-bottom: 3px solid transparent; /* keeps consistent height */
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  line-height: 1;
  transition: background 0.2s ease;
  height: 40px;
}

/* Restore right border on the last tab */
.tab-left .tab-label:last-child {
  border-right: 1px solid var(--tab-border);
}

/* Hover state */
.tab-label:hover {
  background: var(--tab-hover);
}


/* Rectangular active underline */
.tab-label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 0;
  background: var(--tab-active);
  transform: scaleX(0);
}

/* Right-side support info */
.tab-right {
  flex: 1;
  text-align: right;
  padding-right: var(--padding-x);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  color: #0C1220;
}

.tab-right a {
  /* WCAG AA: #1187D4 on #fff is 3.87:1. #0e72b0 lifts it to 5.0:1.
     Hover state already used the darker shade — promoting it to the
     resting state matches the listbox button fix in custom.css. */
  color: #0e72b0;
  text-decoration: none;
}

.tab-right a:hover {
  color: #0e72b0;
  text-decoration: underline;
}

/* Mobile dropdown container (hidden on desktop). Wrapper keeps the neutral
   grey nav-bar look from the design tokens; only the inner <select>
   (.tab-select) takes the ink branding from custom.css. */
.tab-mobile {
  display: none;
  background: var(--tab-bg);
  border: 1px solid var(--tab-border);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 12px;
  gap: 12px;
}

.tab-right-mobile {
  margin-top: 8px;
  padding: 0 2px 2px;
  text-align: left;
}

/* Default: show text, hide icon */
.tab-phone-icon {
  display: none;
  font-size: 1.4em; /* Adjust as needed */
  text-decoration: none;
}

/* Tablet & mobile: hide the call element entirely, tabs take full width */
@media (max-width: 1024px) {
  .tab-right {
    display: none;
  }

  .tab-bar {
    padding: 0 16px;
  }
}

/* Mobile (≤767px): hide desktop tab bar, show dropdown */
@media (max-width: 767px) {
  .tab-bar {
    display: none;
  }

  .tab-mobile {
    display: flex;
  }

  .product-side-content {
    width: 100%;
  }
}

/* Panels — left/right rails only; no bottom rule. The brand-mark divider
   rendered at the foot of #panel-desc (matches #shop-archive-container's
   divider-logo) is the visual close-out for the panels. */
.tab-panels {
  border: 1px solid var(--tab-border);
  border-top: none;
  border-bottom: none;
  background: #fff;
}

.tab-panel {
  display: none;
  color: var(--tab-text);
  line-height: 1.6;
}

/* Active states (radios) */
#tab-desc:checked ~ .tab-bar .tab-left label[for="tab-desc"],
#tab-specs:checked ~ .tab-bar .tab-left label[for="tab-specs"],
#tab-downloads:checked ~ .tab-bar .tab-left label[for="tab-downloads"],
#tab-media:checked ~ .tab-bar .tab-left label[for="tab-media"],
#tab-insights:checked ~ .tab-bar .tab-left label[for="tab-insights"] {
  color: #0e72b0;                            /* #1187D4 on #fff = 3.86:1 (fails AA); #0e72b0 = 5.18:1 */
  background-color: #ffffff;
  border-bottom: 5px solid #0e72b0;
}

#tab-desc:checked ~ .tab-bar .tab-left label[for="tab-desc"]::after,
#tab-specs:checked ~ .tab-bar .tab-left label[for="tab-specs"]::after,
#tab-downloads:checked ~ .tab-bar .tab-left label[for="tab-downloads"]::after,
#tab-media:checked ~ .tab-bar .tab-left label[for="tab-media"]::after,
#tab-insights:checked ~ .tab-bar .tab-left label[for="tab-insights"]::after {
  transform: scaleX(1);
}

/* ── Downloads list ─────────────────────────────────────── */
.downloads-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 640px;
    border: 1px solid #E4E5E8;
}

.downloads-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    background: #fff;
    border-bottom: 1px solid #E4E5E8;
}
.downloads-item:last-child {
    border-bottom: none;
}

.downloads-item-icon {
    flex-shrink: 0;
    font-size: 1.4rem;
    color: #1187D4;
    display: flex;
    align-items: center;
}

.downloads-title {
    flex: 1;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.82rem;
    font-weight: 600;
    color: #0C1220;
    letter-spacing: 0.02em;
}

.downloads-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    color: #1187D4 !important;
    border: 1px solid #1187D4;
    border-radius: 0;
    padding: 6px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, color .15s;
}

.downloads-btn:hover {
    background: #1187D4;
    color: #fff !important;
}

#tab-desc:checked ~ .tab-panels #panel-desc,
#tab-specs:checked ~ .tab-panels #panel-specs,
#tab-downloads:checked ~ .tab-panels #panel-downloads,
#tab-media:checked ~ .tab-panels #panel-media,
#tab-insights:checked ~ .tab-panels #panel-insights {
  display: block;
}

/* ── Related Media list ─────────────────────────────────── */
.media-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 800px;
}

.media-item {
    border: 1px solid #d0cdcb;
    background: #fff;
    transition: border-color .15s, background .15s;
}

.media-item:hover {
    border-color: #21827F;
    background: #f5fafa;
}

.media-item-link {
    display: flex;
    align-items: stretch;
    gap: 0;
    text-decoration: none;
    color: inherit;
}

.media-thumb {
    flex-shrink: 0;
    width: 35%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.media-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.media-thumb-placeholder {
    width: 100%;
    height: 100%;
    background: #e8e5e2;
}

.media-body {
    flex: 1;
    min-width: 0;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.media-type-badge {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #21827F;
}

.media-title {
    display: block;
    font-weight: 600;
    font-size: 14px;
    color: #1e1e1e;
    line-height: 1.4;
}

.media-item:hover .media-title { color: #21827F; }

.media-excerpt {
    font-size: 13px;
    color: #555;
    margin: 0;
    line-height: 1.5;
}

/* ---------- RESPONSIVE ---------- */
/* Mobile breakpoint moved to ≤767px — see the block above */





.variant-differences-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

.variant-differences-cards div {
    background-color: #f5f4f3;
    width: 100%;
    padding: 20px;
}

.shared-specs dl {
    display: flex;
}

.shared-specs dt {
    font-weight: bold;
    align-self: start;
    background-color: #f4f4f3;
    width: 100%;
    padding: 10px 20px;
}

.shared-specs dd {
    margin: 0;
}

/* Alternate row background color */
table tr:nth-child(odd) {
    background: #f6f4f3; /* Standard Table Light background for odd rows */
}

table tr:nth-child(even) {
    background: white; /* White background for even rows */
}

tr.fw-header {
  background: #ece9e8;
}

tr.even-row {
  background: #f6f4f3; /* light gray */
}

tr.odd-row {
  background: #ffffff; /* white */
}

/* Ensure <th> and <td> have the same width for proper alignment */
th, td {
    width: 50%; /* Adjust width to fit the layout you need */
    padding: 10px; /* Optional for better spacing */
    text-align: left; /* Optional for consistent alignment */
}


.variant-cards-wrapper {
    display: flex;
    flex-wrap: wrap;
    font-family: 'JetBrains Mono', monospace;
    gap: 20px; /* spacing between cards */
}

.variant-card {
    flex: 1 1 calc(25% - 20px);
    box-sizing: border-box;
    border: 1px solid #d0cdcb;
    background-color: #fff;
    /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); */
}

.variant-card > p{
    padding: 0px 15px;
}

/* .variant-img img {
    height: 100px;
    width: 100px;
} */

.card-top {
    display: flex;
    gap: 20px;
    min-height: 175px;
    padding: 15px;
}

.card-top .variant-img {
    width: 50%;
    max-width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* Prevent the 250×250 img attribute from overflowing its flex column */
.card-top .variant-img a,
.card-top .variant-img picture {
    display: block;
    width: 100%;
    max-width: 100%;
}

.card-top .variant-img img {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
}

.variant-details {
    width: 100%;
}

.variant-details h3,
.variant-details h3 a,
.variant-details p,
.variant-details p a {
    font-family: 'JetBrains Mono', monospace;
}

/* (title is now in the <h3>, not the first <p> — so the description <p> must
   NOT inherit this blue; see the variant-card-heading block below.) */
#panel-specs .variant-details p a {
    color: #1187D4;
}

#panel-specs .variant-details p a:hover {
    color: #0e72b0;
}

/* Variant card heading folded into ONE <h3>: brand+variant-code line + title
   sub-line, a single link, both blue (replaces the former <h3>code</h3> +
   <p>title</p>). Sub line smaller; tidy gap before the variant description. */
.variant-details h3.variant-card-heading a { text-decoration: none; }
.variant-details h3 .vc-code,
.variant-details h3 .vc-sub {
    display: block;
    color: #1187D4;                       /* both heading lines = blue (linked) */
}
.variant-details h3 .vc-sub {             /* title line smaller */
    font-size: 0.95rem;
    font-weight: 400;
    margin-top: 4px;
}
.variant-details h3.variant-card-heading a:hover .vc-code,
.variant-details h3.variant-card-heading a:hover .vc-sub {
    color: #0e72b0;
}
.variant-details h3.variant-card-heading { margin: 0 0 12px; }
/* variant description = ink, with breathing room beneath */
.variant-details > p {
    color: #0f0d1d;
    margin: 0 0 20px;
}

.variant-details .buttons-block button {
    background-color: #21827F;
    border-radius: 0px;
    padding: 0.65rem 1.25rem;
    font-size: inherit;
    line-height: inherit;
    border: 1px solid #21827F;    
}

.variant-details .buttons-block button:hover {
    background-color: transparent;
    border: 1px solid #21827F;
}

.variant-details .buttons-block button:hover span{
    color: #21827F;
}


/* Make it responsive on smaller screens */
@media (max-width: 900px) {
    .variant-card {
        flex: 1 1 calc(50% - 20px); /* 2 cards per row */
    }
}

@media (max-width: 600px) {
    .variant-card {
        flex: 1 1 100%; /* 1 card per row */
    }
}

.spec-table-series {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.spec-table-series tr:nth-child(odd) {
    background-color: #F2F3F5;
}

.spec-table-series tr:nth-child(even) {
    background-color: #ffffff;
}

table.spec-table-series, table.spec-table-variant {
    color: #1e1e1e;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.82rem;
    width: 100%;
}

table.spec-table-series td, table.spec-table-variant td{
    border-right: solid 1px #ffffff;
    padding: 3px 15px;
    vertical-align: baseline;
    word-break: break-word;
}

/* Prevent variant spec tables overflowing the card width */
table.spec-table-variant {
    table-layout: fixed;
    width: 100%;
}

table.spec-table-series td{
    padding: 10px;
}

table.spec-table-variant td:last-child {
    border-right: 0px;
}

tr.spec-table-header {
    background-color: #ECEEF1 !important;
}

.variant-card tr.spec-table-header th {
    padding: 4px 15px;
}

table.spec-table-series td:first-child {
    width: 15%;
}



/* ================================================
   GALLERY — CSS variables + Swiper overrides
   (main rules are in the “Gallery (Swiper)” block above)
================================================ */

:root {
  --thumb-gap: 8px;
  --accent: #4db6ac;
}

/* Main slide: square aspect ratio */
.main-slide picture,
.main-slide img {
  aspect-ratio: 1 / 1;
  display: block;
}

/* Prevent vertical thumbs Swiper from stretching */
.thumbs-swiper {
  height: 100%;
}

.thumbs-swiper .swiper-wrapper {
  height: 100%;
}

.thumbs-swiper .swiper-slide {
  height: auto;
  flex-shrink: 0;
}

/* Pagination dots — scoped to gallery to avoid affecting other Swiper instances */
.gallery-pagination .swiper-pagination-bullet {
  background: #b0aba8;
  opacity: 1;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
  transition: background 0.2s ease;
}

.gallery-pagination .swiper-pagination-bullet-active {
  background: var(--accent);
}

/* --- Thumbs scroll button (position:relative already set on .thumbs-col above) --- */

.thumbs-scroll-down {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
}

.thumbs-scroll-down:hover {
  background: #f1f1f1;
}

.thumbs-scroll-down.hidden {
  opacity: 0;
  pointer-events: none;
}



/* Series feature icons — chip styling mirrors variant page .spec-chip */
.icon-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 20px 0 0;
}

.icon-logos .logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #FAFAF8;
    border: 1px solid #E4E5E8;
    padding: 6px 14px 6px 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    line-height: 1.15;
    color: #0C1220;
    white-space: nowrap;
}

.icon-logos .logo img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Send Enquiry button (the bitter-lemon product-control) — lighter border to
   match the card/chip border (#E4E5E8) instead of the default .product-control
   #cac8c8. Targets only this button; the other product-control buttons keep #cac8c8. */
.product-control.bg-px-bitter-lemon1 {
    border-color: #E4E5E8;
}


.spec-icons {

display: flex;

flex-wrap: wrap;

gap: 8px;

justify-content: flex-start; /* desktop left */

align-items: center;

text-align: center;

}

.spec-icons .icon {

width: 64px;

height: 64px;

flex: 0 0 auto;

display: flex;

align-items: center;

justify-content: center;

}

.spec-icons .icon img {

display: block;

width: 100%;

height: 100%;

object-fit: contain;

}

/* Tablet & Mobile: center icons */

@media (max-width: 991.98px) {

.spec-icons { justify-content: center; }

}

/* Mobile: slightly smaller */

@media (max-width: 575.98px) {

.spec-icons .icon { width: 48px; height: 48px; }

}


/* Info Boxes Below */
.info-boxes {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
}

.info-boxes .left,
.info-boxes .right,
.info-boxes .comparison {
  flex: 1 1 0;
  min-width: 0;
  padding: 2rem;
  position: relative;
}

.info-boxes .left,
.info-boxes .right {
  color: #fff;
  background: #1e2338;
}

/* Series Buyer Comparison (Layer 3) — sits as the first box. Light grey
   bg, ink text. Overrides the global ".info-boxes *" white-text rule via
   higher specificity (".info-boxes .comparison *"). Anchor colour
   #0E6FAB is the brand teal #1187D4 darkened to ~4.85:1 contrast against
   #F2F3F5 — passes WCAG AA for normal text. */
.info-boxes .comparison {
  background: #F2F3F5;
  color: #0C1220;
}
.info-boxes .comparison,
.info-boxes .comparison * {
  color: #0C1220;
}
.info-boxes .comparison a,
.info-boxes .comparison .wysiwyg-content a {
  color: #0E6FAB;
  text-decoration: underline;
}
.info-boxes .comparison a:hover {
  text-decoration: none;
}
/* Shared "// Heading" style — JetBrains Mono. The "//" is rendered via
   ::before so its colour is set directly on the pseudo (parent's `color *`
   cascade can't paint over it the way it would on a child <span>). The
   manufacturer box's dynamic <style> rule `.info-boxes .left *` was
   beating an inline span on specificity-tie + later-cascade — pseudo
   sidesteps that entirely. */
.info-boxes .info-heading {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.3;
  margin: 0 0 1rem;
}
.info-boxes .info-heading::before {
  content: "// ";
  color: #1187D4;
  font-weight: 700;
}
.info-boxes .comparison .info-heading {
  color: #0C1220;
}

/* RIGHT BOX — fixed brand mark background. Always uses the
   "We Are Things Embedded" SVG; ACF Options-page background-image is no
   longer applied so the visual is consistent across every series page.
   Overlay opacity reduced to 0.75 (from 0.8) so the brand pattern reads
   through while still keeping white text safely above 4.5:1 contrast. */
.info-boxes .right {
  background-image: url('../img/we-are-things-embedded.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
}

/* Optional overlay for better contrast */
.info-boxes .left::before,
.info-boxes .right::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #1e2338;
    z-index: 1;
}
.info-boxes .left::before  { opacity: 0.8; }
.info-boxes .right::before { opacity: 0.75; }

.info-boxes .left > *,
.info-boxes .right > * {
    position: relative;
    z-index: 2;
}


.info-boxes button {
  background-color: #fff;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 4px;
  cursor: pointer;
  color: #1e2338;
}

.info-boxes a.btn {
    background-color: #ffffff;
    color: #1e2338;
    border-radius: 0px;
    padding: 10px 15px;
}

.info-boxes * {
    color: #ffffff;
}

.info-box-btns {
    display: flex;
    gap: 10px;
}


/* ── Flat-grey info-boxes baseline (2026-05-27) ──────────────────────
   Unifies .left (Manufacturer) and .right (Things Embedded) with the
   .comparison (Buyer Comparison) treatment so all 3 boxes share one
   readable grey/ink look across series + variant pages. Drops the
   per-manufacturer background image on .left, the brand-mark SVG on
   .right, the dark navy ::before overlays, and the global white-text
   catch-all. !important is needed to defeat (a) the dynamic inline
   <style> block in content-single-product.php / taxonomy-part-code.php
   that sets per-manufacturer colours, and (b) the inline
   style="background-image:..." attribute set on .left when a
   manufacturer term has a background_image ACF value.
   Body content stays dynamic via per-variant + series ACF fields. */
.info-boxes .left,
.info-boxes .right {
    background: #F2F3F5 !important;
    background-image: none !important;
    color: #0C1220 !important;
}
.info-boxes .left,  .info-boxes .left *,
.info-boxes .right, .info-boxes .right * {
    color: #0C1220 !important;
}
.info-boxes .left::before,
.info-boxes .right::before {
    display: none !important;
}
/* Inline body anchors → brand teal, no underline (underline on hover only,
   2026-10-03 owner request).
   Exclude .desc-shop-btn explicitly — it's a CTA, not body prose, and
   the catch-all `a:not(.btn)` would otherwise win on specificity over
   the button rule below (.info-boxes a.desc-shop-btn = 0,0,2,1 loses
   to a:not(.btn) = 0,0,3,1). */
.info-boxes .left a:not(.btn):not(.desc-shop-btn),
.info-boxes .left .wysiwyg-content a,
.info-boxes .right a:not(.btn):not(.desc-shop-btn),
.info-boxes .right .wysiwyg-content a {
    color: #0E6FAB !important;
    text-decoration: none;
}
.info-boxes .left a:not(.btn):not(.desc-shop-btn):hover,
.info-boxes .left .wysiwyg-content a:hover,
.info-boxes .right a:not(.btn):not(.desc-shop-btn):hover,
.info-boxes .right .wysiwyg-content a:hover {
    text-decoration: underline;
}
/* Buttons: ghost style on grey — thin ink border, transparent fill, fills on hover.
   Covers .btn (ACF button_link), button (form CTAs), .desc-shop-btn ("Shop X" auto-link). */
.info-boxes .left .btn,
.info-boxes .right .btn,
.info-boxes button,
.info-boxes a.btn,
.info-boxes .desc-shop-btn,
.info-boxes a.desc-shop-btn {
    display: inline-block;
    background: transparent !important;
    color: #1e2338 !important;
    border: 1px solid #1e2338 !important;
    border-radius: 0 !important;
    padding: 10px 18px !important;
    text-decoration: none !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}
.info-boxes .left .btn:hover,
.info-boxes .right .btn:hover,
.info-boxes button:hover,
.info-boxes a.btn:hover,
.info-boxes .desc-shop-btn:hover,
.info-boxes a.desc-shop-btn:hover {
    background: #1e2338 !important;
    color: #fff !important;
}


/* Responsive */

@media (min-width: 1726px) {
    .card-top .variant-img {
        width: 200px;
    }
}

@media (max-width: 1024px) {
  /* Spec/variants stack vertically on tablet */
  .spec-variants {
    flex-wrap: wrap;
  }

  .tab-spec-table, .tab-variants-cards {
    width: 100%;
  }
}
 

@media (max-width: 768px) {
    .shared-specs dl {
        grid-template-columns: 1fr;
    }

    table.spec-table-series td:first-child {
        width: 40%;
    }

    /* gallery responsive handled in the gallery section above */


    .tab-wrap .tab-right-mobile {
        display: flex;
        margin-top: 8px;
        justify-content: center;
    }

    .button-column {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 15px;
    }
    .button-column.mt-3.mb-3 {
      margin-top: 1.5rem !important;
  }

  .product-side-content .brand-logo {
      text-align: center;
  }

  .button-column > div {
    flex: 1 1 calc(50% - 10px);
    width: 47%;
  }

  .button-column a,
    .button-column button {
        height: 80px;
        padding: 0px 80px;
    }

  .tab-spec-table, .tab-variants-cards {
      width: 100%;
  }  

  .series-icons .spec-icons {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
  }

  .icon-logos {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        justify-content: center;
  }

  .icon-logos .logo {
        gap: 8px;
        padding: 4px 10px 4px 6px;
        font-size: 0.7rem;
  }

  .icon-logos .logo img {
        width: 26px;
        height: 26px;
  }

  .info-boxes {
      display: flex;
      flex-wrap: nowrap;
      gap: 20px;
      flex-direction: column;
  }
  
  .taxonomy-page div {
      margin: 0 auto;
  }
}

/* ── Spec Search bar ──────────────────────────────────────── */
.spec-search-bar {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #ECEEF1;
    padding: 14px 50px;
    margin-top: 0;
    margin-bottom: 0;
    border-bottom: 1px solid #E4E5E8;
}


.spec-search-field {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

#spec-search {
    width: 100%;
    border: 1px solid #d0cdcb;
    border-radius: 0;
    padding: 10px 44px 10px 16px;
    font-size: 14px;
    background: #fff;
    color: #1e1e1e;
    outline: none;
    transition: border-color 0.15s;
}

#spec-search:focus {
    border-color: #1187D4;
    box-shadow: 0 0 0 3px rgba(17, 135, 212, 0.18);
}

/* Remove browser-native ✕ button */
#spec-search::-webkit-search-cancel-button { display: none; }

.spec-search-icon {
    position: absolute;
    right: 14px;
    color: #555;
    font-size: 16px;
    pointer-events: none;
    line-height: 1;
}

#spec-search-clear {
    position: absolute;
    right: 38px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #888;
    font-size: 13px;
    line-height: 1;
    display: flex;
    align-items: center;
}

#spec-search-clear:hover { color: #333; }

/* Push search icon right when clear button is shown */
#spec-search-clear:not([hidden]) ~ .spec-search-icon {
    right: 14px;
}

.spec-no-results,
.spec-see-variants-msg {
    margin: 8px 0 12px;
    font-size: 13px;
    color: #666;
    font-style: italic;
}

/* Dim variant cards that don't match the search */
#panel-specs .variant-card.spec-no-match {
    opacity: 0.25;
    pointer-events: none;
}

@media (max-width: 1024px) {
    .spec-search-bar {
        padding: 12px 16px;   /* matches tablet .category-cards-section padding */
    }
}

@media (max-width: 767px) {
    .spec-search-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px 16px;
    }
    .spec-search-label { font-size: 14px; }
}



/* ── Variant picker trigger button ───────────────────────── */
/* Primary "Add to Quote" CTA. Resting #0E72B0 (white text = 5.18:1, passes
   WCAG AA) rather than the brand #1187D4 (3.86:1, fails AA at this text size);
   active/hover/focus darkens to #0C63AD (6.1:1). Border matches the fill. */
.variant-picker-btn {
    background: #0E72B0 !important;
    color: #FFFFFF !important;
    border-color: #0E72B0 !important;
    transition: background 0.15s, color 0.15s, border-color 0.15s !important;
}
.variant-picker-btn:hover,
.variant-picker-btn:focus,
.variant-picker-btn:active {
    background: #0C63AD !important;
    color: #FFFFFF !important;
    border-color: #0C63AD !important;
}

/* ── Variant picker modal ────────────────────────────────── */

/* Header — matches spec-table group header (#ece9e8) */
#variant-picker-modal .modal-content {
    border-radius: 0;
    border: 1px solid #d0cdcb;
}

/* Slim styled scrollbar on the modal body */
#variant-picker-modal .modal-body {
    scrollbar-width: thin;                /* Firefox */
    scrollbar-color: #b0adab #f6f4f3;    /* Firefox: thumb track */
}
#variant-picker-modal .modal-body::-webkit-scrollbar {
    width: 6px;
}
#variant-picker-modal .modal-body::-webkit-scrollbar-track {
    background: #f6f4f3;
}
#variant-picker-modal .modal-body::-webkit-scrollbar-thumb {
    background: #b0adab;
    border-radius: 3px;
}
#variant-picker-modal .modal-body::-webkit-scrollbar-thumb:hover {
    background: #21827F;
}

/* Alternating rows — spec table palette */
.variant-modal-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 20px;
    border-bottom: 1px solid #d0cdcb;
    font-size: 0.93rem;
    color: #1e1e1e;
}
.variant-modal-row:nth-child(odd)  { background: #f6f4f3; }
.variant-modal-row:nth-child(even) { background: #ffffff; }
.variant-modal-row:last-child { border-bottom: none; }

.variant-modal-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.variant-modal-sku {
    font-weight: 600;
    color: #1e1e1e;
}
.variant-modal-desc {
    color: #555;
    line-height: 1.4;
}

.variant-modal-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Qty stepper */
.variant-modal-qty {
    display: flex;
    align-items: center;
    border: 1px solid #E4E5E8;
    overflow: hidden;
}
.qty-btn {
    background: #ECEEF1;
    border: none;
    width: 28px;
    height: 32px;
    font-size: 15px;
    font-family: 'JetBrains Mono', monospace;
    line-height: 1;
    cursor: pointer;
    color: #0C1220;
    border-radius: 0;
}
.qty-btn:hover { background: #E4E5E8; }
.qty-input {
    width: 38px;
    height: 32px;
    border: none;
    border-left: 1px solid #E4E5E8;
    border-right: 1px solid #E4E5E8;
    text-align: center;
    font-size: 13px;
    font-family: 'JetBrains Mono', monospace;
    background: #fff;
    -moz-appearance: textfield;
    border-radius: 0;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* Add to Cart — square. Same scheme as the .variant-picker-btn CTA:
   resting #0E72B0 (white icon 5.18:1), active/hover/focus #0C63AD (6.1:1). */
.variant-add-to-cart-btn {
    background: #0E72B0;
    color: #FFFFFF;
    border: 1px solid #0E72B0;
    border-radius: 0;
    width: 64px;
    height: 36px;
    padding: 0;
    font-size: 16px;
    line-height: 36px;
    text-align: center;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
}
.variant-add-to-cart-btn:hover,
.variant-add-to-cart-btn:focus,
.variant-add-to-cart-btn:active {
    background: #0C63AD;
    color: #FFFFFF;
    border-color: #0C63AD;
}
.variant-add-to-cart-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* View — outlined, square */
.variant-view-btn {
    background: #fff;
    color: #0C1220;
    border: 1px solid #E4E5E8;
    border-radius: 0;
    width: 64px;
    height: 36px;
    padding: 0;
    font-size: 13px;
    font-family: 'JetBrains Mono', monospace;
    line-height: 36px;
    text-align: center;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.variant-view-btn:hover,
.variant-view-btn:focus {
    background: #1187D4;
    border-color: #1187D4;
    color: #fff;
}

@media (max-width: 600px) {
    .variant-modal-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .variant-modal-actions { width: 100%; }
    .variant-add-to-cart-btn { flex: 1; text-align: center; }
}

/* ── Variant modal — general enquiry form ─────────────────── */
.variant-modal-enquiry {
    padding: 20px 20px 16px;
    background: #f6f4f3;
    border-bottom: 1px solid #d0cdcb;
}
.variant-modal-enquiry-title {
    font-size: 1rem;
    font-weight: 600;
    color: #1e1e1e;
    margin: 0 0 6px;
}
.variant-modal-enquiry-intro {
    font-size: 0.875rem;
    color: #555;
    margin: 0 0 16px;
}
.variant-enquiry-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #1e1e1e;
    margin-bottom: 4px;
}
.variant-enquiry-input {
    border: 1px solid #d0cdcb !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #1e1e1e !important;
    font-size: 0.875rem !important;
    padding: 6px 10px !important;
}
.variant-enquiry-input:focus {
    border-color: #1187D4 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(17,135,212,.15) !important;
}
textarea.variant-enquiry-input {
    resize: vertical;
    min-height: 130px;
}
.variant-modal-divider {
    display: flex;
    align-items: center;
    padding: 0 20px;
    background: #ece9e8;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    letter-spacing: .04em;
    min-height: 36px;
    border-bottom: 1px solid #d0cdcb;
}

/* ── Variant add-to-basket toast ─────────────────────────── */
.variant-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    border-radius: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    max-width: 320px;
}
.variant-toast--visible {
    opacity: 1;
    transform: translateY(0);
}
.variant-toast--success { background: #0E72B0; }  /* brand blue — matches modal basket buttons; was teal #21827F */
.variant-toast--error   { background: #b94a48; }