/* ==== mobile.css ==== */
/* ═══════════════════════════════════════
   MOBILE RESPONSIVE — Complete Adaptation
   ═══════════════════════════════════════ */

/* ─── Global Mobile ─── */
@media (max-width: 768px) {
  /* A single content gutter is easier to scan than the old 92%-wide container plus
     a second, variable inset. Keep full-bleed backgrounds; inset their content. */
  .container {
    width: 100%;
    max-width: none !important;
    padding-inline: 16px !important;
  }
  .portal-nav .container { padding: 4px 12px 10px !important; }
  
  /* Product Grid — 2 columns on tablet */
  .products-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .product-info { padding: 10px 12px; }
  .product-name { font-size: 13px; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
  .product-price { font-size: 15px; }
  
  /* Cart table */
  .cart-table th:nth-child(n+3), .cart-table td:nth-child(n+3) { display: none; }
  .cart-table { font-size: 13px; }
  
  /* Checkout */
  .checkout-grid { grid-template-columns: 1fr !important; }
  .form-row.two-col { grid-template-columns: 1fr !important; }
  
  /* Search page */
  .search-results-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  
  /* Footer */
  .footer-grid-portal { grid-template-columns: 1fr 1fr !important; gap: 20px !important; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
  .footer-links { flex-wrap: wrap; justify-content: center; }
  
  /* Hero sections */
  .hero h1 { font-size: 24px !important; }
  .hero p { font-size: 14px !important; }
  
  /* Pagination */
  .pagination { gap: 6px; }
  .pagination a, .pagination span { padding: 8px 12px; font-size: 13px; }
  
  /* Blog grid */
  .blog-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  
  /* Brand grid */
  .brands-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  
  /* Compare */
  .compare-grid { overflow-x: auto; }
  
  /* Wiki / Guide */
  .wiki-grid, .guide-grid { grid-template-columns: 1fr !important; }
  
  /* Collections */
  .collections-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  
  /* Actions */
  .actions-grid { grid-template-columns: 1fr !important; }
  
  /* Product detail: features cards */
  .pd-features-cards { grid-template-columns: 1fr !important; }
  
  /* Sticky bar mobile-friendly */
  .pd-sticky-inner { gap: 10px; }
  .pd-sticky-name { display: none; }
  .pd-sticky-btn { padding: 10px 20px; font-size: 13px; }
}

@media (max-width: 480px) {
  .container { padding-inline: 16px !important; }
  .portal-nav .container { padding: 4px 12px 10px !important; }
  
  /* Product Grid — still 2 columns but tighter */
  .products-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .product-card { border-radius: 8px; }
  .product-info { padding: 8px 10px; }
  .product-name { font-size: 12px; }
  .product-price { font-size: 14px; }
  .product-rating { font-size: 11px; }
  
  /* Product page */
  .pd-title { font-size: 18px !important; }
  .pd-price { font-size: 24px !important; }
  .pd-was-price { font-size: 15px; }
  .pd-actions { flex-direction: column !important; }
  .pd-qty-wrap { width: 100%; justify-content: center; }
  .pd-add-cart { width: 100% !important; text-align: center; }
  .pd-features-row { grid-template-columns: 1fr !important; }
  .pd-trust-row { grid-template-columns: 1fr !important; }
  .pd-trust-line { flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; }
  .pd-reviews-summary { padding: 16px !important; gap: 16px !important; }
  .pd-reviews-big { font-size: 36px !important; }
  .pd-features-grid { grid-template-columns: 1fr !important; }
  .pd-tabs-nav { gap: 0; }
  .pd-tab { padding: 10px 12px !important; font-size: 12px !important; }
  
  /* Review cards */
  .pd-review { padding: 14px; }
  .pd-review-header { gap: 8px; }
  .pd-review-avatar { width: 32px; height: 32px; font-size: 13px; }
  
  /* Footer */
  .footer-grid-portal { grid-template-columns: 1fr !important; }
  
  /* Cart */
  .cart-table th, .cart-table td { padding: 8px 6px; font-size: 12px; }
  
  /* Checkout */
  .checkout-form input, .checkout-form textarea, .checkout-form select { padding: 10px; font-size: 14px; }
  .payment-methods { flex-direction: column; }
  
  /* Search */
  .search-results-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  
  /* Category bar */
  .catbar-link { padding: 6px 10px !important; font-size: 11px !important; }
  
  /* Breadcrumbs */
  .bc-list { font-size: 12px; }
  
  /* Forum */
  .ft-products-grid { grid-template-columns: repeat(2, 1fr) !important; }
  
  /* Blog */
  .blog-card-img { height: 160px; }
  
  /* Collections */
  .collections-grid { grid-template-columns: 1fr !important; }
  
  /* Action hero */
  .action-hero h1 { font-size: 22px !important; }
}

/* ─── Touch-friendly improvements ─── */
@media (hover: none) and (pointer: coarse) {
  /* Larger tap targets */
  .pd-tab { min-height: 44px; display: flex; align-items: center; }
  .pd-var-btn { min-height: 44px; }
  .catbar-link { min-height: 40px; display: inline-flex; align-items: center; }
  .pagination a, .pagination span { min-height: 40px; min-width: 40px; display: flex; align-items: center; justify-content: center; }
  
  /* Remove hover effects that don't work on touch */
  .product-card:hover { transform: none; box-shadow: none; }
  .pd-main-wrap:hover .pd-main-img { transform: none; }
}

/* ─── Safe area for phones with notch ─── */
@supports (padding: env(safe-area-inset-bottom)) {
  .pd-sticky-bar.visible {
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }
}

/* ─── Landscape phone ─── */
@media (max-width: 768px) and (orientation: landscape) {
  .pd-grid { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
  .hero { padding: 30px 0; }
}

/* Related products - horizontal scroll on mobile */
@media (max-width: 768px) {
  .prod-grid-portal {
    display: flex !important;
    grid-template-columns: unset !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px !important;
    padding-bottom: 10px;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }
  .prod-grid-portal::-webkit-scrollbar { display: none; }
  .prod-grid-portal > .prod-card {
    flex: 0 0 min(76vw, 280px) !important;
    min-width: min(76vw, 280px) !important;
    max-width: min(76vw, 280px) !important;
    scroll-snap-align: start;
  }

  .prod-card .pcard-body { min-width: 0; }
  .prod-card .pcard-rating-stars { letter-spacing: 0 !important; }
  .prod-card .pcard-price-row,
  .prod-card .pcard-price-values { min-width: 0; }
  .prod-card .pcard-price-values { flex-wrap: wrap; row-gap: 1px !important; }
}

@media (max-width: 520px) {
  /* Dense two-column listings and horizontal rails share the same card macro.
     On a narrow card, status and action must stack instead of clipping each other. */
  .prod-card .pcard-value-score { display: none !important; }
  .prod-card .pcard-oos-actions { flex-direction: column; }
  .prod-card .pcard-oos-status,
  .prod-card .pcard-notify-btn {
    width: 100%;
    flex: 1 1 auto !important;
  }
}

/* Hide superadmin bar on mobile */
@media (max-width: 768px) {
  #admin-toolbar { display: none !important; }
}

/* ─── Mobile shell contract ───────────────────────────────────────────────
   Every fixed control uses the same bottom offsets. This keeps navigation,
   buying controls and temporary trays from claiming the same pixels. */
:root {
  --mobile-nav-height: 58px;
  --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
  --mobile-nav-offset: calc(var(--mobile-nav-height) + var(--mobile-safe-bottom));
  --mobile-product-dock-height: 64px;
}

.mobile-bottom-nav,
.mobile-menu-sidebar { display: none; }
.footer-mobile-toggle {
  width: 100%;
  border: 0;
  padding: 0;
  color: inherit;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  text-transform: inherit;
}
.footer-mobile-toggle b { display: none; }

@media (max-width: 768px) {
  body {
    padding-bottom: var(--mobile-nav-offset);
  }
  body.mobile-scroll-lock { overflow: hidden !important; }

  .mobile-bottom-nav {
    position: fixed;
    z-index: 1000;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: stretch;
    height: var(--mobile-nav-offset);
    border-top: 1px solid #dfe7e3;
    padding: 4px 4px var(--mobile-safe-bottom);
    background: rgba(255,255,255,.97);
    box-shadow: 0 -5px 22px rgba(18,24,31,.09);
    backdrop-filter: blur(12px);
    transform: translateY(0);
    transition: transform .24s ease, visibility .24s;
  }
  .mobile-bottom-nav.is-hidden {
    visibility: hidden;
    transform: translateY(100%);
  }
  .bottom-nav-item {
    display: flex;
    min-width: 0;
    min-height: 44px;
    flex: 1 1 20%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 0;
    border-radius: 9px;
    padding: 3px 2px;
    color: #77827d;
    background: transparent;
    font: 650 10px/1.1 Inter, sans-serif;
    text-decoration: none;
  }
  .bottom-nav-item.active,
  .bottom-nav-item:active {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, #fff);
  }
  .bottom-nav-item svg { flex: 0 0 auto; stroke: currentColor; }
  .bottom-nav-menu { cursor: pointer; }

  .portal-burger,
  .portal-cart-btn,
  .portal-search button,
  .mobile-menu-close,
  .cd-close,
  .cd-qty button,
  .cd-item-del,
  .cart-remove-btn,
  .cmp-btn,
  .cmp-tray-clear,
  #cbModal button,
  #pcModal button,
  #ai-chat-popup button {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* Two quiet control rows: identity/actions, then a search field that remains useful. */
  .portal-nav .container { padding: 8px 12px 10px !important; }
  .portal-search input { min-width: 0; }
  #hdrSearchDropdown { top: calc(100% + 5px) !important; max-height: min(56vh, 430px) !important; }

  /* A live edge communicates that the category rail continues off screen. */
  .portal-catbar::after { display: none !important; }
  .portal-catbar-shell::before,
  .portal-catbar-shell::after {
    content: '';
    position: absolute;
    z-index: 4;
    top: 0;
    bottom: 0;
    width: 34px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .16s;
  }
  .portal-catbar-shell::before { left: 0; background: linear-gradient(90deg,#f8f9fc 18%,transparent); }
  .portal-catbar-shell::after { right: 0; background: linear-gradient(270deg,#f8f9fc 18%,transparent); }
  .portal-catbar-shell::after {
    content: '›';
    display: grid;
    place-items: center end;
    padding-right: 4px;
    color: var(--accent);
    font-size: 22px;
    font-weight: 800;
  }
  .portal-catbar-shell.can-scroll-left::before,
  .portal-catbar-shell.can-scroll-right::after { opacity: 1; }
  .portal-catbar-inner { scroll-snap-type: x proximity; padding-inline: 5px 24px !important; }
  .catbar-link { min-height: 44px; scroll-snap-align: start; }

  /* Menu is a true mobile sheet: transform-based, safe-area aware and independently scrollable. */
  .mobile-menu-overlay {
    position: fixed;
    z-index: 9990;
    inset: 0;
    opacity: 0;
    background: rgba(12,18,20,.52);
    backdrop-filter: blur(2px);
    transition: opacity .24s ease;
  }
  .mobile-menu-overlay.is-open { opacity: 1; }
  .mobile-menu-sidebar {
    position: fixed;
    z-index: 9991;
    top: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: min(88vw, 380px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: calc(20px + var(--mobile-safe-bottom));
    background: #fff;
    box-shadow: 8px 0 34px rgba(18,24,31,.18);
    transform: translateX(-105%);
    transition: transform .24s cubic-bezier(.2,.8,.2,1);
    -webkit-overflow-scrolling: touch;
  }
  .mobile-menu-sidebar.is-open { transform: translateX(0); }
  .mobile-menu-head {
    position: sticky;
    z-index: 3;
    top: 0;
    display: flex;
    min-height: 64px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e8eeeb;
    padding: max(8px, env(safe-area-inset-top,0px)) 12px 8px 16px;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(10px);
  }
  .mobile-menu-close {
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 10px;
    padding: 0;
    color: #5d6964;
    background: #f2f6f4;
    font-size: 27px;
    line-height: 1;
    cursor: pointer;
  }
  .mobile-menu-sidebar a,
  .mobile-menu-sidebar button:not(.mobile-menu-close) { min-height: 44px; }

  body.mobile-menu-open .mobile-bottom-nav,
  body.cart-drawer-open .mobile-bottom-nav,
  body.mobile-menu-open .cmp-tray,
  body.cart-drawer-open .cmp-tray,
  body.mobile-footer-visible .cmp-tray {
    visibility: hidden;
    pointer-events: none;
    transform: translateY(100%);
  }

  /* Footer accordion: the information stays available without a page-long link wall. */
  footer > .container:first-child { padding-top: 22px !important; padding-bottom: 18px !important; }
  .footer-grid-portal { display: block !important; }
  .footer-mobile-column { border-top: 1px solid rgba(255,255,255,.12); }
  .footer-mobile-column:last-child { border-bottom: 1px solid rgba(255,255,255,.12); }
  .footer-mobile-column > h3 { margin: 0 !important; }
  .footer-mobile-toggle {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
  }
  .footer-mobile-toggle b { display: block; color: var(--accent); font-size: 19px; font-weight: 500; }
  .footer-mobile-panel { display: none; padding: 0 0 14px; }
  .footer-mobile-column.is-open .footer-mobile-panel { display: block; }
  footer .footer-mobile-panel a { min-height: 44px; padding-block: 10px !important; }

  #cartDrawer { z-index: 10041; }
  #cartDrawerOverlay { z-index: 10040; }
  .cd-body { overscroll-behavior: contain; }
  .cd-foot { padding-bottom: max(20px,var(--mobile-safe-bottom)); }

  .pd-sticky-bar.visible { bottom: var(--mobile-nav-offset) !important; }
  body.has-mobile-product-dock #ai-chat-fab,
  body.has-compare-dock #ai-chat-fab { opacity: 0 !important; pointer-events: none !important; }
  #ai-chat-fab { bottom: calc(var(--mobile-nav-offset) + 12px) !important; }

  body:has(#cart-sticky-bar) .cmp-tray { display: none !important; }
}

@media (max-width: 370px) {
  .portal-logo .logo-wordmark { font-size: 17px !important; }
  .bottom-nav-item { font-size: 9px; }
}



/* Tabs on mobile - horizontal scroll, NOT sticky */
@media (max-width: 768px) {
  .pd-tabs-nav, .pd-tabs-nav-sticky {
    position: relative !important;
    top: auto !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    box-shadow: none !important;
  }
  .pd-tabs-nav::-webkit-scrollbar, .pd-tabs-nav-sticky::-webkit-scrollbar { display: none; }
}



/* FBT mobile layout */
@media (max-width: 768px) {
  .fbt-main { flex-direction: column !important; gap: 16px !important; }
  .fbt-products { flex-wrap: nowrap !important; overflow-x: auto !important; justify-content: flex-start !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .fbt-products::-webkit-scrollbar { display: none; }
  .fbt-card { width: 140px !important; min-width: 140px !important; flex-shrink: 0 !important; padding: 12px !important; }
  .fbt-card div[style*=width:140px] { width: 110px !important; height: 110px !important; }
  .fbt-summary { min-width: unset !important; width: 100% !important; padding: 20px !important; }
}

/* FBT Amazon style mobile */
@media (max-width: 768px) {
  .fbt-row { justify-content: center !important; gap: 8px !important; }
  .fbt-item { width: 100px !important; }
  .fbt-item div[style*=width:120px] { width: 90px !important; height: 90px !important; }
  .fbt-summary-compact { width: 100% !important; padding: 12px !important; border-top: 1px solid #f0f0f0; margin-top: 8px; }
}

/* FBT clean mobile */
@media (max-width: 768px) {
  .fbt-wrapper { flex-direction: column !important; }
  .fbt-products-row { flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 10px !important; }
  .fbt-products-row::-webkit-scrollbar { display: none; }
  .fbt-product { min-width: 140px !important; max-width: 140px !important; flex-shrink: 0 !important; }
  .fbt-total-box { min-width: unset !important; width: 100% !important; border-left: none !important; border-top: 1px solid #f0f0f0 !important; padding-left: 0 !important; padding-top: 16px !important; text-align: center; align-items: center !important; }
}

/* Book/product grid responsive */
@media (max-width: 900px) {
  .prod-grid-cat { grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; }
}
@media (max-width: 520px) {
  .prod-grid-cat { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
}

/* ==== padel.css ==== */
/* ═══════════════════════════════════════════════════════════════════════════
   PADEL — brand layer

   Loaded after store.css / product.css / mobile.css and after the inline block in
   base.html, so it is the last word on anything it touches.

   Every colour here derives from --primary and --accent, which come from the shop
   row. Nothing is hardcoded: a second deploy changes two hex values in its own
   database and the whole surface follows.

   What it replaces: the engine's office palette (cool blue-greys, #f3f5fb bars) and
   the bookshop one (warm beige, Playfair headlines). Neither says padel. A court is
   graphite and glass with one saturated line through it — that is the whole idea.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Web fonts, self-hosted ──────────────────────────────────────────────────
   These used to come from fonts.googleapis.com, which cost two round trips to a
   third party before a single glyph could be drawn: the stylesheet first, and only
   from it did the browser learn the addresses of the woff2 files. On a throttled 4G
   connection each new host is a DNS lookup, a TCP handshake and a TLS negotiation
   ahead of the first byte — the stylesheet alone was measured at 750 ms, and it
   blocks rendering.

   Now they are served from this origin, on the connection the HTML already arrived
   on. base.html preloads the three faces the first screen paints with, so those
   start downloading while this stylesheet is still in flight.

   Inter is a VARIABLE font: one file covers the whole 100-900 axis, so the five
   weights the site uses (400, 500, 600, 700, 800 — all genuinely in the stylesheets,
   700 alone has 123 call sites) cost exactly one request, not five. Barlow Condensed
   has no variable cut on Google Fonts, so its three weights are three static files.

   Two slices per family, latin and latin-ext, with the unicode-range Google itself
   cuts them on. The site is English, so latin-ext is fetched only if a page actually
   contains a character that needs it — the range gate makes it free otherwise.
   Cyrillic, Greek and Vietnamese are not downloaded at all: they were 458 KB of the
   original family and this shop has no use for them.

   font-display: swap everywhere. Text paints immediately in the fallback and swaps
   when the face arrives; the alternative is a stretch of invisible headings.

   Licences: both families are SIL OFL 1.1, which permits self-hosting. The full texts
   sit next to the files in static/fonts/OFL-Inter.txt and OFL-Barlow-Condensed.txt.
   ──────────────────────────────────────────────────────────────────────────── */


@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/inter-variable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/inter-variable-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/barlow-condensed-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/static/fonts/barlow-condensed-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/barlow-condensed-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/barlow-condensed-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/static/fonts/barlow-condensed-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/static/fonts/barlow-condensed-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Surfaces, mixed from the brand ink rather than picked by eye, so they stay in
     step with it. `color-mix` is supported everywhere this ships. */
  --court:        color-mix(in srgb, var(--primary) 4%, #fff);
  --court-line:   color-mix(in srgb, var(--primary) 12%, #fff);
  --court-deep:   color-mix(in srgb, var(--primary) 92%, #000);
  --accent-soft:  color-mix(in srgb, var(--accent) 10%, #fff);
  --accent-line:  color-mix(in srgb, var(--accent) 32%, #fff);
  --ink-muted:    color-mix(in srgb, var(--primary) 55%, #fff);
  --ink-faint:    color-mix(in srgb, var(--primary) 38%, #fff);
}

/* ── typography ───────────────────────────────────────────────────────────────
   Barlow Condensed for display headings only; Inter for anything that is read.
   Condensed grotesques are what sport actually uses — scoreboards, race numbers,
   kit — and they buy back the horizontal room a long product name needs. */

body,
body:not(.mirava) {
  /* Inter for running text — the face the reference storefront uses, so the top bar,
     the nav and the category strip keep its metrics instead of drifting a size. */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--primary);
}

h1, h2, h3,
.section-title,
.pd-title,
.home-hero h1,
.logo-wordmark,
.pcard-add-btn,
.btn-add-cart,
.pd-add-cart,
.hero-btn {
  font-family: 'Barlow Condensed', 'Inter', -apple-system, sans-serif;
  letter-spacing: .2px;
}

h1, h2, .home-hero h1, .section-title {
  /* Condensed faces set loose at display sizes; tightening is what makes a
     headline read as one object rather than a row of words. Case is left alone:
     the reference sets its headings in sentence case, and uppercasing every h1
     and h2 changed the shape of every page away from it. */
  letter-spacing: -.2px;
  font-weight: 700;
}

/* ── top bar ─────────────────────────────────────────────────────────────────
   The engine paints this pale blue (#f3f5fb) and the reference tints it with its own
   accent. Same idea here, in green. */

body:not(.mirava) .portal-topbar,
.portal-topbar {
  /* A wash of the accent, the way the reference tints this band with its own colour
     rather than filling it. Graphite here made the first thing on the page the heaviest. */
  background: color-mix(in srgb, var(--accent) 9%, #fff) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 18%, #fff) !important;
  color: var(--ink-soft, #475569) !important;
}
body:not(.mirava) .portal-topbar-left span,
body:not(.mirava) .portal-topbar-right a,
body:not(.mirava) .portal-topbar-right span,
.portal-topbar a,
.portal-topbar span {
  color: var(--ink-soft, #475569) !important;
}
body:not(.mirava) .portal-topbar-left svg,
.portal-topbar svg { color: var(--accent) !important; }
.portal-topbar a:hover,
body:not(.mirava) .portal-topbar-right a:hover { color: var(--primary) !important; }

.tb-callback-o, .tb-callback, .tb-auth {
  /* These were white-on-graphite. The band is light now, so they take the ink colour and
     an accent-tinted border instead — white text on a pale green bar is unreadable. */
  color: var(--primary) !important;
  border-color: color-mix(in srgb, var(--accent) 26%, #fff) !important;
}

/* ── header ──────────────────────────────────────────────────────────────── */

.portal-nav { border-bottom: 1px solid var(--court-line); }

.portal-search input {
  border-color: var(--court-line);
  background: var(--court);
  border-radius: 10px 0 0 10px;
}
.portal-search input:focus {
  border-color: var(--accent);
  background: #fff;
}
.portal-search button {
  background: var(--primary);
  border-radius: 0 10px 10px 0;
}
.portal-search button:hover { background: var(--accent); }

/* ── category bar ────────────────────────────────────────────────────────────
   The active category gets the accent as an underline, not a fill: this row is
   navigation, and a filled pill here competes with the buy button downstream. */

.portal-catbar { background: var(--court); border-bottom: 1px solid var(--court-line); }
.catbar-link { color: var(--ink-muted); font-weight: 600; }
.catbar-link:hover { color: var(--primary); }
.catbar-link.catbar-active {
  color: var(--primary);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.catbar-count {
  background: var(--court-line);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.catbar-active .catbar-count { background: var(--accent-soft); color: var(--accent); }

/* ── hero ────────────────────────────────────────────────────────────────────
   A graphite band with the accent as a single line across the top — the service
   line of a court. One shape, no gradient mesh, nothing decorative that has to be
   explained. */

.home-hero {
  background: #fff !important;
  border-top: 3px solid var(--accent);
  position: relative;
  overflow: hidden;
}
.home-hero::after {
  /* The glass wall behind a padel court: one soft light, off to the side. */
  content: "";
  position: absolute;
  inset: -40% -10% auto auto;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 9%, transparent), transparent 68%);
  pointer-events: none;
}
.home-hero .container { position: relative; z-index: 1; }
.home-hero h1 { color: var(--primary) !important; }
.home-hero p { color: var(--ink-soft, #64748b) !important; }
.home-hero input { border-color: var(--court-line) !important; }
.home-hero form { box-shadow: 0 4px 20px rgba(0, 0, 0, .08) !important; }

/* ── section headings ────────────────────────────────────────────────────────
   A short accent rule under the title instead of a centred serif line — the
   engine's editorial cue, replaced by a scoreboard one. */

.section-title,
.rail-title {
  position: relative;
  text-align: left;
  color: var(--primary);
}
.section-title::after,
.rail-title::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-top: 8px;
  background: var(--accent);
  border-radius: 2px;
}

/* ── product card ────────────────────────────────────────────────────────── */

.prod-card {
  border: 1px solid var(--court-line) !important;
  border-radius: 12px;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.prod-card:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--court-line)) !important;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--primary) 12%, transparent) !important;
}
.pcard-cover { background: var(--court) !important; }

.discount-badge {
  /* Kept red — a discount is the one place the brand colour should not speak,
     because green on a price reads as "in stock", not "cheaper". */
  font-variant-numeric: tabular-nums;
}

.pcard-add-btn {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  letter-spacing: .2px;
  font-weight: 700 !important;
}
.pcard-add-btn:hover { background: var(--accent) !important; color: #fff !important; }

.card-wish-btn { border: 1px solid var(--court-line) !important; }

/* ── product page ────────────────────────────────────────────────────────── */

.pd-price-block .pd-price, .pd-price { color: var(--accent); }
.pd-in-stock { color: var(--accent); }
.btn-add-cart,
.pd-add-cart {
  /* The engine names this one .pd-add-cart on the product page and .btn-add-cart
     elsewhere; both are the same decision, so both get the same face. */
  background: var(--accent) !important;
  font-family: 'Barlow Condensed', 'Inter', sans-serif !important;
  letter-spacing: .3px;
}
.btn-add-cart:hover,
.pd-add-cart:hover { background: color-mix(in srgb, var(--accent) 82%, #000) !important; }

.breadcrumbs { background: var(--court); border-bottom: 1px solid var(--court-line); }
.bc-list a { color: var(--ink-muted); }
.bc-list a:hover { color: var(--accent); }

/* ── footer ─────────────────────────────────────────────────────────────────
   Deepest tone on the page, so the column closes rather than trailing off. */

footer, .mirava-footer { background: var(--court-deep) !important; }
footer a:hover, .mirava-footer a:hover { color: var(--accent) !important; }

/* ── bottom nav (mobile) ─────────────────────────────────────────────────── */

.bottom-nav { border-top: 1px solid var(--court-line); }
.bottom-nav-item.active, .bottom-nav-item:active { color: var(--accent); }

/* Підзаголовок полиці. У рушії це #666 — колір, не повʼязаний ні з чим на сторінці. */
.rail-title + p { color: var(--ink-muted) !important; }

/* ── strays from outside this file's reach ───────────────────────────────────
   The "New" badge is built in domain/catalog/enrichment.py:217, which returns a
   hardcoded #0EA5E9 as an inline style. That file belongs to another session, so
   the colour is neutralised here instead: a third saturated hue on every card
   competes with the accent, and the accent is the one that means "act on this".
   Graphite lets the badge label the product without shouting. If enrichment.py is
   ever cleaned up, delete this rule with it. */
.pcard-cover > span[style*="#0EA5E9"] {
  background: var(--primary) !important;
  font-family: 'Barlow Condensed', 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: .5px !important;
}

/* The engine paints these from its own grey ramp; ours derives from the brand ink. */
.catbar-count { background: var(--court-line) !important; color: var(--ink-faint) !important; }
.catbar-active .catbar-count { background: var(--accent-soft) !important; color: var(--accent) !important; }

/* Stock dot — store.css ships it in its own green; one green per page. */
.green-dot { background: var(--accent) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   HOME — composition, depth and one orchestrated entrance
   ═══════════════════════════════════════════════════════════════════════════
   The reference storefront's structure is kept in full; what changes is the
   craft inside it. Three ideas only, so the page reads as one thing:

     1. the court. A padel court is a glass box with two service lines and a
        net. That geometry is the only ornament on the page — behind the hero
        as line-art, and as the rule under every section title.
     2. one entrance. A single staggered reveal on load beats a dozen
        scattered micro-interactions, and it costs one keyframe.
     3. weight where the money is. Prices, counts and countdowns are set in
        tabular figures so columns line up and numbers stop dancing on hover.
*/

.home-hero {
  position: relative;
  isolation: isolate;
  padding: clamp(40px, 7vw, 84px) 0 clamp(34px, 5vw, 56px) !important;
}

/* The court, drawn once and set almost to the threshold of visibility. Anything
   louder competes with the headline, which is the thing to read first. */
.hero-court {
  position: absolute;
  inset: 50% auto auto 50%;
  /* Centred with transform only. Setting the `translate` property here as well applied the
     shift twice — once from the property, once from the animation's transform — and put the
     court a full width off-screen, which is also what made the page scroll sideways. */
  transform: translate(-50%, -50%);
  width: min(1180px, 94%);
  height: 88%;
  z-index: -1;
  fill: none;
  stroke: color-mix(in srgb, var(--accent) 34%, #fff);
  stroke-width: .6;
  opacity: .5;
  mask-image: radial-gradient(ellipse 70% 88% at 50% 46%, #000 38%, transparent 82%);
}
.hero-court-net { stroke-dasharray: 1.4 2.2; stroke-width: .5; }

.hero-inner { position: relative; }

.home-hero .hero-title {
  font-size: clamp(30px, 4.6vw, 54px) !important;
  line-height: 1.02;
  letter-spacing: -.02em;
  text-wrap: balance;
  margin-bottom: 14px !important;
}
.home-hero .hero-sub {
  font-size: clamp(15px, 1.4vw, 18px) !important;
  color: var(--ink-soft, #64748b) !important;
  max-width: 46ch;
  margin-inline: auto;
  margin-bottom: clamp(22px, 3vw, 34px) !important;
  text-wrap: balance;
}

/* Search: the one control on the page, so it gets the depth budget. */
.home-hero form {
  border: 1px solid var(--court-line);
  box-shadow: 0 1px 2px rgba(18, 24, 31, .04), 0 12px 32px -18px rgba(18, 24, 31, .5) !important;
  transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}
.home-hero form:focus-within {
  border-color: color-mix(in srgb, var(--accent) 55%, #fff);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent),
              0 18px 40px -20px rgba(18, 24, 31, .55) !important;
  transform: translateY(-1px);
}
.home-hero input { font-size: 16px; }           /* 16px: anything smaller zooms on iOS */
.home-hero button[type="submit"] { transition: background .2s ease; }

/* The shortcut strip reads as a continuation of the hero, not a new band. */
.home-trending-shell .home-trending-scroll a {
  transition: border-color .18s ease, color .18s ease, background .18s ease, transform .18s ease;
}
.home-trending-shell .home-trending-scroll a:hover { transform: translateY(-1px); }

/* ── section rhythm ─────────────────────────────────────────────────────────
   Every rail title gets the service line under it: same geometry as the court,
   so the ornament is one idea used twice rather than two decorations. */
.section-title, .rail-title {
  position: relative;
  padding-bottom: 10px;
}
.section-title::after, .rail-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

/* ── numbers ────────────────────────────────────────────────────────────────
   Prices, counts and countdowns in tabular figures: a column of prices lines up
   and a ticking countdown stops shifting its own width every second. */
.pcard-price, .pd-price, .cat-count, .home-trending-all,
[class*="count"], [id*="countdown"], .co-total, .cart-total {
  font-variant-numeric: tabular-nums;
}

/* ── image slots ────────────────────────────────────────────────────────────
   Where art is planned but not produced yet. A slot has to look like a decision,
   not like a missing file: the category monogram on a wash of the accent, at the
   exact ratio the future image will occupy, so nothing reflows when it lands.
   Paths and sizes are listed in static/img/IMAGES.md. */
.img-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 130px;
  text-decoration: none;
  background:
    radial-gradient(120% 140% at 18% 0%, color-mix(in srgb, var(--accent) 13%, #fff), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, #fff), #fff);
  border-bottom: 1px solid var(--court-line);
  position: relative;
  overflow: hidden;
}
.img-slot::after {                     /* the service line again, quarter strength */
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  border-radius: 8px;
  pointer-events: none;
}
.img-slot__mark {
  font-family: 'Barlow Condensed', 'Inter', sans-serif;
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  color: color-mix(in srgb, var(--accent) 46%, #fff);
  user-select: none;
}

/* ── the entrance ───────────────────────────────────────────────────────────
   One reveal, four steps, done in 700ms. It runs once on load and never again;
   nothing here animates on scroll, because a page that keeps moving while it is
   being read is a page that is harder to read. */
/* Movement only — no opacity. Twice now a decorative reveal that began at opacity 0 left
   the headline invisible where animations do not advance (a pane that is not compositing,
   a background tab, a blocked renderer). Text must be readable whether or not the animation
   ever runs, so the entrance carries it up rather than fading it in. */
@keyframes hero-rise {
  from { transform: translateY(15px); }
  to   { transform: none; }
}
/* Scale only, never opacity: an animation that starts at opacity 0 leaves the element
   invisible wherever animations do not run — a background tab, a privacy mode, a renderer
   that is not compositing. Decoration must not depend on motion to exist. */
@keyframes court-settle {
  from { transform: translate(-50%, -50%) scale(1.05); }
  to   { transform: translate(-50%, -50%) scale(1); }
}
.hero-court { animation: court-settle .9s cubic-bezier(.22, .61, .36, 1) both; }
/* Gated on a class that only script adds. Without it the hero is simply visible — an
   entrance that starts at opacity 0 would otherwise leave the headline invisible anywhere
   animations do not run, and a decorative reveal must never be able to hide the content
   it reveals. */
.anim .hero-title  { animation: hero-rise .55s cubic-bezier(.22, .61, .36, 1) both .06s; }
.anim .hero-sub    { animation: hero-rise .55s cubic-bezier(.22, .61, .36, 1) both .14s; }
.anim .hero-search { animation: hero-rise .55s cubic-bezier(.22, .61, .36, 1) both .22s; }
.anim .hero-pills  { animation: hero-rise .55s cubic-bezier(.22, .61, .36, 1) both .30s; }

/* ── keyboard ───────────────────────────────────────────────────────────────
   The engine styles :hover thoroughly and :focus barely. A keyboard user needs
   to see where they are. */
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .hero-court, .anim .hero-title, .anim .hero-sub,
  .anim .hero-search, .anim .hero-pills { animation: none; }
  .home-hero form:focus-within { transform: none; }
  * { scroll-behavior: auto !important; }
}

@media (max-width: 768px) {
  .hero-court { display: none; }        /* at this size it is noise, not texture */
  .img-slot { height: 108px; }
  .img-slot__mark { font-size: 34px; }
}

/* ── category page ──────────────────────────────────────────────────────────
   A subcategory is a destination, so its card shows what is there and how much
   of it, in the shape the reference storefront uses for its collection cards:
   a square thumbnail, the name, the count. The old card was a row of text with
   an arrow, which reads as a list item rather than a way in. */

.subcat-grid {
  display: grid;
  /* min() so the track can never demand more width than the screen has: at 375px a
     bare 240px minimum kept two columns and pushed the page sideways. */
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: 14px;
}

.subcat-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--court-line);
  border-radius: 14px;
  text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.subcat-card:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, #fff);
  box-shadow: 0 10px 26px -18px rgba(18, 24, 31, .55);
  transform: translateY(-1px);
}

.subcat-card__img,
.subcat-card__slot {
  width: 72px;
  height: 72px;
  border-radius: 11px;
  flex-shrink: 0;
  object-fit: cover;
}
.subcat-card__slot {                       /* the same wash and monogram as the home slots */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Barlow Condensed', 'Inter', sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: color-mix(in srgb, var(--accent) 48%, #fff);
  background:
    radial-gradient(120% 140% at 20% 0%, color-mix(in srgb, var(--accent) 15%, #fff), transparent 64%),
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, #fff), #fff);
  border: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
}

.subcat-card__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.subcat-card__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.2;
}
.subcat-card__count {
  font-size: 12.5px;
  color: var(--ink-soft, #64748b);
  font-variant-numeric: tabular-nums;
}
.subcat-card__go {
  margin-left: auto;
  font-size: 17px;
  color: color-mix(in srgb, var(--accent) 70%, #fff);
  transition: transform .18s ease, color .18s ease;
}
.subcat-card:hover .subcat-card__go { transform: translateX(3px); color: var(--accent); }

/* The category header carried a lot of air for a title and a number. Tighter, and the
   count sits with the title rather than across the page from it. */
.cat-hero { padding: 26px 0 22px !important; }
.cat-hero-h1 { letter-spacing: -.02em; }
.cat-hero-count { align-self: center; }

@media (max-width: 620px) {
  /* The template pins this grid to two columns with !important. At 375px that is two
     194px cards inside a 355px grid — the second one was being cut off. One column. */
  /* Doubled class: the template's own rule is !important AND later in the cascade,
     so equal specificity loses to it. */
  .subcat-grid.subcat-grid { grid-template-columns: 1fr !important; }
  .subcat-card__img, .subcat-card__slot { width: 56px; height: 56px; font-size: 24px; }
}


/* Every page scrolled sideways on a phone, and neither the content nor the bottom bar was
   at fault: the cart drawer is fixed at right:0 and parked off-screen with a transform, so
   it sat from 375px to 775px and widened the document. Everything else — the bar, the
   cards — was only stretching to the width it created.
   `clip` rather than `hidden`: hidden on the body turns the whole page into a scroll
   container and breaks every position:sticky on the site, including the filter column. */
body { overflow-x: clip; }

/* ==== padel-category.css ==== */
/* Padel Pro category layer — shared engine, scoped category presentation. */

.pcat-hero {
  position: relative;
  overflow: hidden;
  padding: 10px 0 18px;
  background: #f4f7f3;
  border-bottom: 1px solid rgba(18, 24, 31, .1);
}

.pcat-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .42;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(31, 169, 124, .11) 50%, transparent calc(50% + 1px)),
    linear-gradient(0deg, transparent 78%, rgba(31, 169, 124, .09) 78%, rgba(31, 169, 124, .09) calc(78% + 2px), transparent calc(78% + 2px));
}

.pcat-hero__grid {
  position: relative;
  width: 100%;
  min-height: 420px;
  display: block !important;
  overflow: hidden;
  background: #e7f1ec;
  border: 1px solid rgba(22, 124, 94, .17);
  border-radius: 7px;
  box-shadow: 0 28px 65px -48px rgba(18,24,31,.52);
}

.pcat-hero__grid::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(90deg,
    #f4f7f3 0%,
    rgba(244,247,243,.99) 30%,
    rgba(244,247,243,.94) 43%,
    rgba(244,247,243,.7) 56%,
    rgba(244,247,243,.24) 70%,
    rgba(244,247,243,0) 84%);
  pointer-events: none;
}

.pcat-hero__copy {
  position: relative;
  z-index: 2;
  width: min(58%, 760px);
  min-width: 0;
  min-height: 420px;
  padding: 30px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pcat-eyebrow,
.pcat-section-head > span {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #167c5e;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.pcat-eyebrow span {
  width: 28px;
  height: 3px;
  background: #ddf247;
}

.pcat-hero .cat-hero-h1 {
  max-width: 650px;
  margin: 20px 0 18px !important;
  color: #12181f !important;
  font-family: "Barlow Condensed", Inter, sans-serif;
  font-size: clamp(62px, 5.2vw, 82px) !important;
  font-weight: 800 !important;
  letter-spacing: -.035em !important;
  line-height: .9;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.pcat-hero .cat-hero-desc,
.pcat-hero .seo-intro {
  max-width: 610px;
  margin: 0;
  color: #53606c !important;
  font-size: 17px !important;
  line-height: 1.58;
}

.pcat-hero .seo-intro-row { max-width: 610px; }
.pcat-hero .seo-toggle { color: #167c5e; }

.pcat-focus {
  width: min(100%, 610px);
  margin-top: 27px;
  padding: 15px 0;
  display: grid;
  grid-template-columns: 92px minmax(0,1fr);
  align-items: center;
  gap: 18px;
  border-top: 1px solid rgba(18,24,31,.14);
  border-bottom: 1px solid rgba(18,24,31,.14);
}
.pcat-focus__label { color: #69757d; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.pcat-focus__items { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.pcat-focus__items span { position: relative; padding-left: 13px; color: #12181f; font-size: 12px; font-weight: 750; white-space: nowrap; }
.pcat-focus__items span::before { content: ""; position: absolute; top: 50%; left: 0; width: 6px; height: 6px; border-radius: 50%; background: #ddf247; box-shadow: 0 0 0 1px #12181f; transform: translateY(-50%); }
.pcat-jump { display: inline-flex; align-items: center; gap: 9px; width: max-content; margin-top: 22px; color: #12181f; font-size: 12px; font-weight: 800; text-decoration: none; }
.pcat-jump span { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; background: #12181f; color: #fff; transition: transform .2s,background .2s; }
.pcat-jump:hover span { background: #1fa97c; transform: translateY(2px); }

.pcat-guide {
  width: min(100%, 510px);
  margin-top: 18px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 13px;
  color: #12181f;
  text-decoration: none;
  background: rgba(255, 255, 255, .76);
  border: 1px solid rgba(18, 24, 31, .13);
  border-radius: 4px;
  box-shadow: 0 12px 35px rgba(18, 24, 31, .06);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.pcat-guide:hover {
  transform: translateY(-2px);
  border-color: #1fa97c;
  box-shadow: 0 16px 36px rgba(18, 24, 31, .1);
}

.pcat-guide__mark {
  height: 44px;
  display: grid;
  place-items: center;
  color: #12181f;
  font-family: "Barlow Condensed", Inter, sans-serif;
  font-size: 21px;
  font-weight: 800;
  background: #ddf247;
}
.pcat-guide__mark svg { width: 23px; height: 23px; }

.pcat-guide small,
.pcat-guide strong { display: block; }
.pcat-guide small { margin-bottom: 2px; color: #167c5e; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.pcat-guide strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }

.pcat-hero__media {
  position: absolute;
  z-index: 0;
  inset: 0;
  height: auto;
  min-height: 0;
  overflow: hidden;
  background: #bfd6d8;
  border-radius: 0;
  box-shadow: none;
}

.pcat-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(18,24,31,.08), transparent 42%), linear-gradient(0deg, rgba(18,24,31,.24), transparent 42%);
  pointer-events: none;
}

.pcat-hero__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 42%;
}

.pcat-court-line {
  display: none;
}

.pcat-count {
  position: absolute;
  z-index: 2;
  right: 18px;
  bottom: 18px;
  min-width: 150px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  background: rgba(18, 24, 31, .9);
  backdrop-filter: blur(8px);
}

.pcat-count strong {
  color: #ddf247;
  font-family: "Barlow Condensed", Inter, sans-serif;
  font-size: 38px;
  line-height: .9;
}

.pcat-count span { font-size: 11px; font-weight: 700; line-height: 1.25; letter-spacing: .06em; text-transform: uppercase; }

.pcat-subcategories {
  padding: 58px 0 64px !important;
  background: #fff !important;
  border-bottom: 1px solid rgba(18, 24, 31, .1);
}

.pcat-subcategories { scroll-margin-top: 92px; }
.pcat-section-head { margin-bottom: 28px; }
.pcat-section-head h2 {
  margin: 7px 0 0;
  color: #12181f;
  font-family: "Barlow Condensed", Inter, sans-serif;
  font-size: clamp(40px, 2.8vw, 52px);
  line-height: 1;
  text-transform: uppercase;
}
.pcat-section-head p { max-width: 680px; margin: 10px 0 0; color: #69757d; font-size: clamp(13px, .82vw, 15px); line-height: 1.55; }

.pcat-subcategories .subcat-grid { display: grid; width: 100%; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(14px, 1vw, 20px); max-width: none; }
.pcat-subcategories .subcat-card {
  position: relative;
  min-height: clamp(158px, 10vw, 194px);
  padding: clamp(18px, 1.2vw, 23px) !important;
  gap: clamp(17px, 1.25vw, 24px) !important;
  overflow: hidden;
  background: #fff !important;
  border: 1px solid rgba(18, 24, 31, .12) !important;
  border-radius: 7px !important;
  box-shadow: 0 18px 44px -40px rgba(18,24,31,.6) !important;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.pcat-subcategories .subcat-card::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 3px; background: linear-gradient(90deg,#1fa97c 0 34%,#ddf247 34% 38%,#12181f 38%); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.pcat-subcategories .subcat-card:hover { transform: translateY(-3px); border-color: rgba(31,169,124,.48) !important; box-shadow: 0 20px 42px -34px rgba(18,24,31,.55) !important; }
.pcat-subcategories .subcat-card:hover::before { transform: scaleX(1); }
.pcat-subcategories .subcat-card__slot,
.pcat-subcategories .subcat-card__img {
  width: 76px !important;
  height: 76px !important;
  flex: 0 0 76px;
  border-radius: 50% !important;
}
.pcat-subcategories .subcat-card__img {
  width: clamp(122px, 8vw, 154px) !important;
  height: clamp(122px, 8vw, 154px) !important;
  flex-basis: clamp(122px, 8vw, 154px);
  object-fit: cover;
  border: 0 !important;
  border-radius: 4px !important;
  box-shadow: inset 0 0 0 1px rgba(18,24,31,.08);
}
.pcat-subcategories .subcat-card__slot {
  display: grid;
  place-items: center;
  color: #12181f !important;
  font-family: "Barlow Condensed", Inter, sans-serif;
  background: #eaf5f0 !important;
  border: 1px solid rgba(31,169,124,.2) !important;
}
.pcat-subcategories .subcat-card__slot svg { width: 43px; height: 43px; }
.pcat-subcategories .subcat-card__body { align-self: center; gap: 0; min-width: 0; }
.pcat-subcategories .subcat-card__name { color: #12181f; font-size: clamp(17px, 1.08vw, 20px); font-weight: 800; line-height: 1.2; }
.pcat-subcategories .subcat-card__desc { display: block; margin-top: 7px; color: #66737b; font-size: clamp(11px, .72vw, 13px); line-height: 1.4; }
.pcat-subcategories .subcat-card__count { display: block; margin-top: 8px; color: #167c5e; font-size: clamp(9px, .58vw, 10px); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.pcat-subcategories .subcat-card__go { display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; border: 1px solid rgba(18,24,31,.13); border-radius: 50%; color: #167c5e; font-size: 17px; transition: background .2s,border-color .2s,color .2s,transform .2s; }
.pcat-subcategories .subcat-card:hover .subcat-card__go { border-color: #ddf247; background: #ddf247; color: #12181f; transform: translateX(2px); }

.pcat-subcategories--photo { background: #f4f7f3 !important; }
.pcat-subcategories--photo .subcat-grid { gap: 14px; }
.pcat-subcategories--photo .subcat-card {
  min-height: 210px;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 43% minmax(0,1fr) 48px;
  gap: 0 !important;
  background: #fff !important;
}
.pcat-subcategories--photo .subcat-card::before { z-index: 3; }
.pcat-subcategories--photo .subcat-card__img {
  width: 100% !important;
  height: 100% !important;
  min-height: 210px;
  align-self: stretch;
  flex-basis: auto;
  object-fit: cover;
  object-position: center;
  border-radius: 0 !important;
  border-right: 1px solid rgba(18,24,31,.1) !important;
  transition: transform .45s cubic-bezier(.2,.7,.2,1), filter .25s;
}
.pcat-subcategories--photo .subcat-card:hover .subcat-card__img { transform: scale(1.025); filter: saturate(1.04); }
.pcat-subcategories--photo .subcat-card__body { padding: 22px 16px 20px 20px; }
.pcat-subcategories--photo .subcat-card__name { font-family:"Barlow Condensed",Inter,sans-serif; font-size: 24px; line-height: 1; text-transform: uppercase; }
.pcat-subcategories--photo .subcat-card__desc { margin-top: 10px; font-size: 12px; }
.pcat-subcategories--photo .subcat-card__count { margin-top: 13px; }
.pcat-subcategories--photo .subcat-card__go { align-self: center; margin-right: 14px; }

.pcat-subcategories--budget {
  padding: 38px 0 42px !important;
  background: #f4f7f3 !important;
}
.pcat-subcategories--budget .container {
  display: grid;
  grid-template-columns: minmax(220px, .72fr) minmax(0, 2.28fr);
  align-items: center;
  gap: 42px;
}
.pcat-subcategories--budget .pcat-section-head { margin: 0; }
.pcat-subcategories--budget .pcat-section-head h2 { font-size: 34px; }
.pcat-subcategories--budget .pcat-section-head p { max-width: 330px; font-size: 12px; }
.pcat-subcategories .subcat-grid--budget { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.pcat-subcategories .subcat-grid--budget.subcat-grid--count-2 {
  width: min(100%, 900px);
  justify-self: center;
  grid-template-columns: repeat(2,minmax(0,1fr));
}
.pcat-subcategories .subcat-card--budget {
  min-height: 176px;
  background: rgba(255,255,255,.9) !important;
}
.pcat-subcategories--photo .subcat-card--budget {
  padding: 0 !important;
  gap: 0 !important;
  grid-template-columns: 42% minmax(0,1fr) 42px;
}
.pcat-subcategories--photo .subcat-card--budget .subcat-card__img { min-height: 176px; }
.pcat-subcategories .subcat-card__tier {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
  color: #167c5e;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
}
.pcat-subcategories .subcat-card__tier i {
  width: 18px;
  height: 2px;
  flex: 0 0 18px;
  background: #1fa97c;
}
.pcat-subcategories .subcat-card--budget .subcat-card__body { flex: 1; }
.pcat-subcategories .subcat-card--budget .subcat-card__name { font-size: 22px; }
.pcat-subcategories .subcat-card--budget .subcat-card__desc { margin-top: 5px; }
.pcat-subcategories .subcat-card--budget .subcat-card__count { margin-top: 6px; }

.cat-products {
  padding: 46px 0 64px !important;
  background: #f4f7f3;
}

.cat-products .cat-layout { gap: 28px; }
.cat-products .cat-filters {
  width: 272px;
  padding: 0;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(18,24,31,.12);
  border-radius: 8px;
  box-shadow: 0 16px 38px rgba(18,24,31,.055);
}
.cat-products .cf-head {
  margin: 0;
  padding: 21px 20px 17px;
  border-bottom: 1px solid rgba(18,24,31,.09);
  font-family: "Barlow Condensed", Inter, sans-serif;
  font-size: 26px;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.cat-products .cf-head small {
  margin-top: 4px;
  color: #738078;
  font-family: Inter, sans-serif;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .08em;
  line-height: 1.35;
}
.cat-products .cf-body { padding: 0 20px; }
.cat-products .cf-group { padding-block: 17px; border-color: rgba(18,24,31,.09); }
.cat-products .cf-title { margin-bottom: 10px; color: #12181f; font-size: 10px; font-weight: 820; letter-spacing: .1em; text-transform: uppercase; }
.cat-products .cf-check { min-height: 29px; color: #53606c; }
.cat-products .cf-check input { accent-color: #1fa97c; }
.cat-products .cf-price { border-radius: 2px; }
.cat-products .cf-group--choices { padding-block: 15px; }
.cat-products .cf-choice {
  position: relative; display: grid; min-height: 62px; grid-template-columns: minmax(0,1fr) 34px;
  align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid rgba(18,24,31,.12);
  border-radius: 5px; background: #fff; cursor: pointer; transition: border-color .18s, background .18s, box-shadow .18s;
}
.cat-products .cf-choice:hover { border-color: rgba(31,169,124,.58); }
.cat-products .cf-choice.is-active,
.cat-products .cf-choice:has(input:checked) { border-color: #1fa97c; background: #eff9f5; box-shadow: inset 3px 0 #1fa97c; }
.cat-products .cf-choice:has(input:focus-visible) { outline: 3px solid rgba(221,242,71,.9); outline-offset: 2px; }
.cat-products .cf-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cat-products .cf-choice-copy { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.cat-products .cf-choice-copy strong { color: #12181f; font-size: 12px; font-weight: 780; line-height: 1.2; }
.cat-products .cf-choice-copy small { color: #748079; font-size: 9px; line-height: 1.35; }
.cat-products .cf-choice-control {
  position: relative; width: 32px; height: 18px; border: 1px solid #b8c1bc; border-radius: 999px;
  background: #e9eeeb; transition: background .18s, border-color .18s;
}
.cat-products .cf-choice-control::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(18,24,31,.22); transition: transform .18s;
}
.cat-products .cf-choice input:checked + .cf-choice-control { border-color: #1fa97c; background: #1fa97c; }
.cat-products .cf-choice input:checked + .cf-choice-control::after { transform: translateX(14px); }
.cat-products .cf-footer { margin: 0; padding: 15px 20px 19px; border-color: rgba(18,24,31,.09); }
.cat-products .cf-reset { min-height: 42px; padding-inline: 8px; color: #53606c; }
.cat-products .cf-apply { min-height: 42px; padding: 11px 13px; background: #12181f; border-radius: 3px; }
.cat-products .cf-apply:hover { background: #1fa97c; }

.cat-products .cat-main > div:first-child h2 {
  font-family: "Barlow Condensed", Inter, sans-serif;
  font-size: 30px !important;
  text-transform: uppercase;
}
.cat-products .sort-chips { gap: 8px !important; }
.cat-products .sort-btn {
  padding: 9px 14px;
  color: #53606c;
  background: transparent;
  border-color: rgba(18,24,31,.16);
  border-radius: 2px;
  font-size: 12px;
}
.cat-products .sort-btn:hover { background: #fff; }
.cat-products .sort-btn.active { color: #12181f; background: #ddf247; border-color: #ddf247; }
.cat-products .prod-grid-cat { gap: 14px !important; }
.cat-products .prod-card { border-color: rgba(18,24,31,.11) !important; border-radius: 4px !important; box-shadow: none; }
.cat-products .prod-card:hover { border-color: #1fa97c !important; box-shadow: 0 14px 34px rgba(18,24,31,.09) !important; }

@media (max-width: 1000px) {
  .pcat-hero__copy { width: min(64%, 680px); padding-left: 34px; padding-right: 34px; }
  .pcat-hero .cat-hero-h1 { font-size: 64px !important; }
  .pcat-subcategories .subcat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .pcat-subcategories--budget .container { grid-template-columns: 1fr; gap: 22px; }
  .pcat-subcategories--budget .pcat-section-head { max-width: 600px; }
  .pcat-subcategories .subcat-grid--budget { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 768px) {
  .pcat-hero { padding: 10px 0 18px !important; }
  .pcat-hero__grid { min-height: 520px; }
  .pcat-hero__grid::before { background: linear-gradient(180deg,rgba(244,247,243,.99) 0%,rgba(244,247,243,.96) 56%,rgba(244,247,243,.65) 74%,rgba(244,247,243,.12) 100%); }
  .pcat-hero__copy { width: 100%; min-height: auto; padding: 28px 24px 26px; justify-content: flex-start; }
  .pcat-eyebrow { font-size: 10px; }
  .pcat-hero .cat-hero-h1 { margin: 12px 0 10px !important; font-size: clamp(38px, 12vw, 48px) !important; }
  .pcat-hero .cat-hero-desc,
  .pcat-hero .seo-intro { display: -webkit-box; overflow: hidden; font-size: 14px !important; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
  .pcat-guide { margin-top: 18px; grid-template-columns: 38px 1fr auto; }
  .pcat-guide__mark { height: 38px; }
  .pcat-focus { margin-top: 20px; grid-template-columns: 76px minmax(0,1fr); gap: 10px; }
  .pcat-focus__items { gap: 5px; }
  .pcat-focus__items span { padding-left: 10px; font-size: 10px; }
  .pcat-jump { margin-top: 17px; }
  .pcat-hero__media { height: auto; min-height: 0; }
  .pcat-hero__media img { object-position: 58% center; }
  .pcat-count { right: auto; bottom: 10px; left: 10px; width: 132px; min-width: 0; padding: 10px 12px; }
  .pcat-count strong { font-size: 31px; }
  .pcat-count span { font-size: 9px; }
  .pcat-subcategories { padding: 38px 0 44px !important; }
  .pcat-section-head h2 { font-size: 29px; }
  .pcat-subcategories .subcat-grid { grid-template-columns: 1fr; }
  .pcat-subcategories .subcat-card { min-width: 0; min-height: 132px; }
  .pcat-subcategories .subcat-card__img { width: 96px !important; height: 96px !important; flex-basis: 96px; }
  .pcat-subcategories--photo .subcat-card { min-height: 168px; grid-template-columns: 39% minmax(0,1fr) 42px; }
  .pcat-subcategories--photo .subcat-card__img { width: 100% !important; height: 100% !important; min-height: 168px; flex-basis: auto; }
  .pcat-subcategories--photo .subcat-card__body { padding: 18px 12px 16px 16px; }
  .pcat-subcategories--photo .subcat-card__name { font-size: 22px; }
  .pcat-subcategories--photo .subcat-card__desc { display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2; }
  .pcat-subcategories--photo .subcat-card__go { margin-right: 9px; }
  .pcat-subcategories--budget { padding: 30px 0 34px !important; }
  .pcat-subcategories--budget .container { gap: 18px; }
  .pcat-subcategories--budget .pcat-section-head h2 { font-size: 29px; }
  .pcat-subcategories .subcat-grid--budget { grid-template-columns: 1fr; gap: 8px; }
  .pcat-subcategories .subcat-grid--budget.subcat-grid--count-2 { width: 100%; grid-template-columns: 1fr; }
  .pcat-subcategories .subcat-card--budget { min-height: 158px; }
  .pcat-subcategories--photo .subcat-card--budget { grid-template-columns: 39% minmax(0,1fr) 38px; }
  .pcat-subcategories--photo .subcat-card--budget .subcat-card__img { min-height: 158px; }
  .cat-products { padding: 18px 0 42px !important; }
  .cat-products .cat-toolbar {
    top: 53px;
    padding: 10px 0;
    gap: 8px;
    background: #f4f7f3;
    border-color: rgba(18,24,31,.1);
  }
  .cat-products .cat-sort-toggle,
  .cat-products .cat-filter-toggle { flex: 1; justify-content: center; border-radius: 2px; }
  .cat-products .cat-filters.cf-open { border-radius: 0; }
  .cat-products .prod-grid-cat { gap: 8px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .pcat-guide,
  .pcat-subcategories .subcat-card,
  .pcat-subcategories .subcat-card::before { transition: none; }
}

/* Product bench — shared category/search card contract. */
.prod-grid-cat .prod-card,
.prod-grid-search .prod-card {
  min-width: 0;
  border: 1px solid rgba(18,24,31,.12) !important;
  border-radius: 4px !important;
  background: #fff !important;
}
.prod-grid-cat .pcard-cover,
.prod-grid-search .pcard-cover { aspect-ratio: 1 / 1 !important; background: #f7f9f6 !important; }
/* Fill the frame. `contain` plus 8px of padding framed every photo in white, which read as
   a gap in the card rather than as breathing room — and it was written for cut-out product
   shots on a white ground, not for the photographs the catalogue carries now. */
.prod-grid-cat .pcard-cover img,
.prod-grid-search .pcard-cover img { object-fit: cover !important; object-position: center; }
.prod-grid-cat .pcard-body,
.prod-grid-search .pcard-body { min-width: 0; padding: 12px 13px 13px !important; }
.prod-grid-cat .pcard-body > a,
.prod-grid-search .pcard-body > a {
  min-height: 2.7em !important;
  margin-bottom: 12px !important;
  color: #12181f !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}
.prod-grid-cat .pcard-price-row,
.prod-grid-search .pcard-price-row { align-items: flex-end !important; margin-bottom: 11px !important; }
.prod-grid-cat .pcard-add-btn,
.prod-grid-search .pcard-add-btn {
  min-height: 44px;
  padding: 10px 12px !important;
  border: 1px solid #12181f !important;
  border-radius: 2px !important;
  background: #12181f !important;
  color: #fff !important;
  line-height: 1.2;
}
.prod-grid-cat .pcard-add-btn:hover,
.prod-grid-search .pcard-add-btn:hover { border-color: #167c5e !important; background: #167c5e !important; }
.prod-grid-cat .card-wish-btn,
.prod-grid-search .card-wish-btn,
.prod-grid-cat .cmp-toggle--card,
.prod-grid-search .cmp-toggle--card {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
}
.prod-grid-cat .cmp-toggle--card,
.prod-grid-search .cmp-toggle--card {
  top: 8px;
  left: 8px;
  bottom: auto;
  border-color: rgba(18,24,31,.13);
  font-size: 18px;
}
.prod-grid-cat .prod-card:has(.discount-badge) .cmp-toggle--card,
.prod-grid-cat .prod-card:has(.bestseller-badge) .cmp-toggle--card,
.prod-grid-cat .prod-card:has(.pcard-badge) .cmp-toggle--card,
.prod-grid-search .prod-card:has(.discount-badge) .cmp-toggle--card,
.prod-grid-search .prod-card:has(.bestseller-badge) .cmp-toggle--card,
.prod-grid-search .prod-card:has(.pcard-badge) .cmp-toggle--card { top: auto; bottom: 8px; }
.prod-grid-cat .pcard-oos-status,
.prod-grid-search .pcard-oos-status { min-height: 44px; box-sizing: border-box; border-radius: 2px !important; }
.cat-products nav[aria-label="Catalogue pages"] > * { min-width: 44px !important; height: 44px !important; box-sizing: border-box; }

/* Search results use the same equipment-first language as category pages. */
.psearch-page { background: #f4f7f3; }
.psearch-hero { padding: 42px 0 34px !important; background: #f4f7f3 !important; border-bottom: 1px solid rgba(18,24,31,.1); }
.psearch-hero h1 { max-width: 880px; font-family: "Barlow Condensed",Inter,sans-serif; font-size: clamp(42px,5vw,70px) !important; line-height: .95; text-transform: uppercase; }
.psearch-form { max-width: 720px !important; }
.psearch-sort { margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid rgba(18,24,31,.11); }
.psearch-sort__row { background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; }
.psearch-sort .sort-btn { min-height: 40px; border-radius: 2px !important; }
.psearch-sort .sort-btn.active { background: #12181f !important; color: #fff !important; }
.psearch-results { padding: 38px 0 60px !important; background: #f4f7f3; }
.psearch-pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 40px; }
.psearch-pagination > * { min-width: 44px; min-height: 44px; box-sizing: border-box; display: inline-flex !important; align-items: center; justify-content: center; }

@media (max-width: 768px) {
  .prod-grid-cat .pcard-body,
  .prod-grid-search .pcard-body { padding: 10px 10px 11px !important; }
  .prod-grid-cat .pcard-body > a,
  .prod-grid-search .pcard-body > a { font-size: 13px !important; }
  .prod-grid-cat .pcard-add-btn,
  .prod-grid-search .pcard-add-btn { padding-inline: 8px !important; font-size: 12px !important; }
  .prod-grid-cat .pcard-price-values,
  .prod-grid-search .pcard-price-values { gap: 4px !important; }
  .psearch-hero { padding: 26px 0 24px !important; }
  .psearch-hero h1 { font-size: clamp(35px,11vw,48px) !important; }
  .psearch-results { padding: 24px 0 42px !important; }
  .psearch-sort { overflow-x: auto; margin-right: -4%; padding-right: 4%; scrollbar-width: none; }
  .psearch-sort::-webkit-scrollbar { display: none; }
  .psearch-sort__row { width: max-content; flex-wrap: nowrap !important; }
}

@media (max-width: 370px) {
  .prod-grid-cat,
  .prod-grid-search { gap: 7px !important; }
  .prod-grid-cat .pcard-body,
  .prod-grid-search .pcard-body { padding-inline: 9px !important; }
  .prod-grid-cat .pcard-price-values span:first-child,
  .prod-grid-search .pcard-price-values span:first-child { font-size: 14px !important; }
}

/* ==== padel-checkout.css ==== */
/* Padel Pro checkout — scoped presentation; ordering logic remains in checkout.html/cart.js. */
body:has(.pcheckout) .portal-topbar,
body:has(.pcheckout) .portal-nav,
body:has(.pcheckout) .portal-catbar,
body:has(.pcheckout) .mobile-bottom-nav,
body:has(.pcheckout) .mobile-menu-overlay,
body:has(.pcheckout) .mobile-menu-sidebar,
body:has(.pcheckout) #cart-drawer,
body:has(.pcheckout) footer { display: none !important; }
body:has(.pcheckout) { padding-bottom: 0 !important; }
.pcheckout {
  --co-ink: #12181f;
  --co-green: #1fa97c;
  --co-green-dark: #167c5e;
  --co-ball: #ddf247;
  --co-chalk: #f4f7f3;
  --co-muted: #66737b;
  --co-line: rgba(18,24,31,.12);
  min-height: 620px;
  padding: 38px 0 76px;
  background: #f5f8f5;
  color: var(--co-ink);
}
.pcheckout > .container { max-width: 1240px; }
.pcheckout-breadcrumb { padding: 11px 0; border-bottom: 1px solid var(--co-line,rgba(18,24,31,.1)); background: #fff; }
.pcheckout-breadcrumb .container { display: flex; align-items: center; gap: 8px; max-width: 1240px; color: #758087; font-size: 12px; }
.pcheckout-breadcrumb a { color: var(--accent); font-weight: 700; text-decoration: none; }

.pcheckout-intro { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 30px; margin-bottom: 28px; }
.pcheckout-return { display: inline-flex; min-height: 44px; align-items: center; margin: -8px 0 8px; color: var(--co-ink); font-size: 12px; font-weight: 800; text-decoration: none; }
.pcheckout-return:hover { color: var(--co-green-dark); }
.pcheckout-kicker { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; color: var(--co-green-dark); font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.pcheckout-kicker::before { content: ""; width: 26px; height: 2px; background: var(--co-ball); }
.pcheckout-intro h1 { margin: 0; font: 800 clamp(42px,5vw,60px)/.9 "Barlow Condensed",Inter,sans-serif; letter-spacing: -.025em; text-transform: uppercase; }
.pcheckout-intro p { max-width: 660px; margin: 12px 0 0; color: var(--co-muted); font-size: 14px; line-height: 1.55; }
.pcheckout-no-pay { min-width: 240px; padding: 15px 17px; border-left: 3px solid var(--co-ball); background: var(--co-ink); color: #fff; }
.pcheckout-no-pay strong,.pcheckout-no-pay span { display: block; }
.pcheckout-no-pay strong { color: var(--co-ball); font: 700 18px/1 "Barlow Condensed",sans-serif; text-transform: uppercase; }
.pcheckout-no-pay span { margin-top: 5px; color: rgba(255,255,255,.62); font-size: 10px; }

.pcheckout #checkout-content { grid-template-columns: minmax(0,1fr) 390px !important; gap: 24px !important; align-items: start !important; }
.pcheckout-progress { display: flex; align-items: center; gap: 0; margin-bottom: 16px; padding: 14px 17px; border: 1px solid var(--co-line); border-radius: 8px; background: #fff; }
.pcheckout .step-prog { gap: 9px; opacity: .48; }
.pcheckout .step-prog { min-height: 44px; }
.pcheckout .step-prog .step-num { width: 28px; height: 28px; border: 1px solid var(--co-line); background: var(--co-chalk); color: #79848a; font-size: 11px; }
.pcheckout .step-prog.active,.pcheckout .step-prog.done { opacity: 1; }
.pcheckout .step-prog.active .step-num { background: var(--co-ink); color: var(--co-ball); }
.pcheckout .step-prog.done .step-num { background: var(--co-green); color: #fff; }
.pcheckout .step-prog span { color: #6c777d; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.pcheckout .step-prog.active span { color: var(--co-ink); }
.pcheckout .step-line { height: 1px; margin: 0 12px; background: #dce2de; }
.pcheckout .step-line.done { background: var(--co-green); }

.pcheckout .co-panel { padding: clamp(24px,3vw,36px); border: 1px solid var(--co-line); border-radius: 9px; background: #fff; box-shadow: 0 22px 55px -48px rgba(18,24,31,.55); }
.co-panel__heading { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 15px; align-items: start; margin-bottom: 27px; }
.co-panel__heading > span { display: grid; width: 42px; height: 42px; place-items: center; background: var(--co-ball); color: var(--co-ink); font: 800 19px/1 "Barlow Condensed",sans-serif; }
.co-panel__heading h2 { margin: 1px 0 5px; font: 800 25px/1 "Barlow Condensed",sans-serif; text-transform: uppercase; }
.co-panel__heading p { margin: 0; color: var(--co-muted); font-size: 12px; }
.co-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.pcheckout label { color: #344149 !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: .03em; }
.pcheckout .co-input { min-height: 50px; padding: 12px 14px !important; border: 1px solid #d7dfda; border-radius: 5px; background: #fcfdfc; color: var(--co-ink); font: 500 14px/1.2 Inter,sans-serif !important; letter-spacing: 0 !important; text-align: left !important; transition: border-color .18s,box-shadow .18s,background .18s; }
.pcheckout .co-input::placeholder { color: #98a19d; }
.pcheckout .co-input:focus { border-color: var(--co-green); background: #fff; box-shadow: 0 0 0 4px rgba(31,169,124,.11); }
.pcheckout .co-btn { min-height: 52px; padding: 0 20px; border-radius: 5px; background: var(--co-ink); font-size: 13px; font-weight: 800; transition: background .18s,transform .18s; }
.pcheckout .co-btn:hover { background: var(--co-green); opacity: 1; }
.pcheckout .co-btn-back { border-radius: 5px; }
.co-submit-note { margin: 11px 0 0; color: #778288; font-size: 10px; line-height: 1.45; text-align: center; }
.pcheckout #checkout-errors { border-radius: 5px !important; }
.pcheckout #checkout-errors:focus { outline: 3px solid rgba(185,56,69,.18); outline-offset: 2px; }

.co-summary-wrap { position: sticky; top: 80px; }
.co-summary { overflow: hidden; border: 1px solid var(--co-line); border-radius: 9px; background: #fff; box-shadow: 0 22px 55px -46px rgba(18,24,31,.5); }
.co-summary__head { display: flex; align-items: center; justify-content: space-between; padding: 19px 20px; border-bottom: 1px solid var(--co-line); background: var(--co-ink); }
.co-summary__head h2 { display: flex; align-items: center; gap: 10px; margin: 0; color: #fff; font: 700 22px/1 "Barlow Condensed",sans-serif; text-transform: uppercase; }
.co-summary__head h2 svg { width: 18px; height: 18px; fill: none; stroke: var(--co-ball); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.co-summary__head a { color: var(--co-ball); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.co-summary #checkout-items { max-height: 330px !important; margin: 0 !important; padding: 4px 20px; }
.co-order-item { display: grid; grid-template-columns: 62px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--co-line); }
.co-order-item__img { width: 62px; height: 70px; object-fit: contain; border-radius: 5px; background: var(--co-chalk); }
.co-order-item__name { display: -webkit-box; overflow: hidden; color: var(--co-ink); font-size: 12px; font-weight: 750; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.co-order-item__qty { margin-top: 5px; color: #7a858a; font-size: 10px; }
.co-order-item__price { color: var(--co-green-dark); font: 700 18px/1 "Barlow Condensed",sans-serif; white-space: nowrap; }
.co-summary #checkout-promo-row,.co-summary #checkout-tier-row,.co-summary #checkout-delivery-row,.co-summary > div[style*="border-top"] { gap: 12px; }
.co-summary #checkout-promo-discount,.co-summary #checkout-tier-discount,.co-summary #checkout-delivery-display,.co-summary #checkout-total { min-width: 0; text-align: right; overflow-wrap: anywhere; }
.co-summary > div:not(.co-summary__head):not(#checkout-items) { margin-right: 20px; margin-left: 20px; }
.co-summary #checkout-total { color: var(--co-ink) !important; font: 800 27px/1 "Barlow Condensed",sans-serif !important; }
.co-assurance { margin-top: 12px; padding: 4px 16px; border: 1px solid var(--co-line); border-radius: 8px; background: #fff; }
.co-assurance > div { display: grid; grid-template-columns: 25px minmax(0,1fr); gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--co-line); }
.co-assurance > div:last-child { border-bottom: 0; }
.co-assurance span { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; background: #e9f6f1; color: var(--co-green-dark); font: 800 10px/1 Inter,sans-serif; }
.co-assurance p { margin: 0; }
.co-assurance strong,.co-assurance small { display: block; }
.co-assurance strong { color: var(--co-ink); font-size: 11px; }
.co-assurance small { margin-top: 3px; color: #7a858a; font-size: 9px; line-height: 1.4; }

.pcheckout .co-radio { border-radius: 5px; }
.pcheckout .co-radio:has(input:checked) { border-color: var(--co-green); background: #edf8f3; }
.pcheckout .co-success h2 { margin: 0 0 10px; font: 800 32px/1 "Barlow Condensed",sans-serif; text-transform: uppercase; }
.pcheckout :focus-visible { outline: 3px solid rgba(31,169,124,.3); outline-offset: 2px; }

@media (max-width: 920px) {
  .pcheckout #checkout-content { grid-template-columns: 1fr !important; }
  .co-summary-wrap { position: static; }
}
@media (max-width: 768px) {
  body:has(.pcheckout) #fab-contacts,
  body:has(.pcheckout) #contact-stack,
  body:has(.pcheckout) #ai-chat-fab,
  body:has(.pcheckout) #ai-chat-popup { display: none !important; }
  .pcheckout { padding: 24px 0 54px; }
  .pcheckout > .container,.pcheckout-breadcrumb .container { width: min(100% - 24px,1240px); padding: 0; }
  .pcheckout-intro { grid-template-columns: 1fr; gap: 17px; margin-bottom: 21px; }
  .pcheckout-return { min-height: 48px; margin: -10px 0 4px; }
  .pcheckout-intro h1 { font-size: 43px; }
  .pcheckout-intro p { font-size: 12px; }
  .pcheckout-no-pay { min-width: 0; }
  .pcheckout #checkout-content > div:last-child { order: initial !important; position: static !important; }
  .pcheckout-progress { padding: 10px 12px; }
  .pcheckout .step-prog span { display: inline; font-size: 9px; }
  .pcheckout .step-prog .step-num { width: 25px; height: 25px; }
  .pcheckout .step-line { margin: 0 7px; }
  .pcheckout .co-panel { padding: 20px 16px; }
  .co-panel__heading { grid-template-columns: 36px minmax(0,1fr); gap: 11px; margin-bottom: 21px; }
  .co-panel__heading > span { width: 36px; height: 36px; }
  .co-contact-grid { grid-template-columns: 1fr; gap: 13px; }
  .co-summary-wrap { margin-top: 14px; }
  .co-summary__head { min-height: 58px;padding:14px 16px; }
  .co-summary__head a { display:inline-flex;min-height:44px;align-items:center;padding-left:12px; }
  .co-summary #checkout-items { max-height:244px !important;padding:4px 16px; }
  .pcheckout .co-btn,.pcheckout .co-btn-back { min-height:50px; }
  .pcheckout textarea.co-input { min-height:96px; }
  .co-order-item { grid-template-columns: 52px minmax(0,1fr) auto; gap: 9px; }
  .co-order-item__img { width: 52px; height: 60px; }
}
@media (max-width: 390px) {
  .pcheckout .step-prog span { display: none; }
  .co-order-item { grid-template-columns: 48px minmax(0,1fr); }
  .co-order-item__price { grid-column: 2; }
  .co-order-item__name { -webkit-line-clamp:3;overflow-wrap:anywhere; }
  .co-summary #checkout-total { font-size:24px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .pcheckout * { scroll-behavior: auto !important; transition: none !important; }
}

/* ==== padel-compare.css ==== */
/* Comparison — the /compare table plus the selection controls that compare.js injects on
   catalogue pages. Both live here because they are one feature; the tray and the toggle are
   loaded site-wide, the table rules only ever match on /compare. */

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ── the page ───────────────────────────────────────────────────────────────────────── */
.cmp { padding: 8px 0 64px; }
.cmp-crumbs { display: flex; align-items: center; gap: 8px; padding: 12px 0; color: #666; font-size: 13px; }
.cmp-crumbs a { color: var(--accent); font-weight: 500; text-decoration: none; }
.cmp-crumbs span[aria-hidden] { color: #ccc; }

.cmp-head { margin: 12px 0 22px; }
.cmp-head h1 { margin: 0 0 6px; color: var(--primary); font-size: clamp(30px,4vw,42px); font-weight: 800; letter-spacing: -.4px; }
.cmp-head p { margin: 0; max-width: 60ch; color: #6d797f; font-size: 15px; }

.cmp-note { max-width: 62ch; padding: 22px 24px; border: 1px solid #E7E2DA; border-left: 3px solid var(--accent); border-radius: 10px; background: #fff; }
.cmp-note--stop { border-left-color: #EF4444; }
.cmp-note strong { display: block; margin-bottom: 6px; color: var(--primary); font-size: 16px; }
.cmp-note p { margin: 0 0 16px; color: #57534E; font-size: 14px; line-height: 1.6; }

.cmp-btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border: 0; border-radius: 6px; background: var(--primary); color: #fff; font-family: Barlow, Inter, -apple-system, sans-serif; font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; }
.cmp-btn:hover { background: var(--accent); }
.cmp-btn--ghost { margin-top: 18px; border: 1px solid #E7E2DA; background: #fff; color: #57534E; }
.cmp-btn--ghost:hover { border-color: var(--accent); background: #fff; color: var(--accent); }

/* The table scrolls inside its own box; the page never scrolls sideways. */
.cmp-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 12px; }
.cmp-toolbar__summary { display: flex; align-items: baseline; gap: 10px; }
.cmp-toolbar__summary strong { color: var(--primary); font-family: 'Barlow Condensed', Inter, sans-serif; font-size: 18px; font-weight: 700; }
.cmp-toolbar__summary span { color: #7A8580; font-size: 12.5px; }
.cmp-diff-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border: 1px solid #D9E2DD; border-radius: 7px; background: #fff; color: #44514C; font-family: Barlow, Inter, -apple-system, sans-serif; font-size: 13px; font-weight: 700; cursor: pointer; }
.cmp-diff-toggle span { color: var(--accent); font-size: 10px; }
.cmp-diff-toggle:hover { border-color: var(--accent); color: var(--accent); }
.cmp-diff-toggle[aria-pressed="true"] { border-color: #B9DDCE; background: #EEF8F3; color: #0F7356; }
.cmp-diff-toggle:disabled { color: #94A09A; background: #F6F8F7; cursor: default; }

.cmp-scroll { overflow-x: auto; border: 1px solid #DCE4DF; border-radius: 10px; background: #fff; box-shadow: 0 8px 24px rgba(18,24,31,.045); }
.cmp-table { width: 100%; min-width: calc(180px + var(--cmp-count) * 190px); border-collapse: collapse; table-layout: fixed; font-size: 14px; }
.cmp-spec-col { width: 180px; }
.cmp-table th, .cmp-table td { padding: 13px 16px; border-bottom: 1px solid #EDF1EE; text-align: left; vertical-align: middle; }
.cmp-table tbody tr:last-child th, .cmp-table tbody tr:last-child td { border-bottom: 0; }
.cmp-table tbody tr.cmp-same:nth-child(even) { background: #FAFBFA; }
.cmp-table tbody tr[hidden] { display: none; }
.cmp-table tbody tr.cmp-different td { background: #F1FAF6; box-shadow: inset 0 1px #E0F1E9, inset 0 -1px #E0F1E9; color: #173A30; font-weight: 600; }

/* The specification column stays put while the product columns scroll — without it the row
   labels leave the screen and the values stop meaning anything. */
.cmp-table tbody th[scope="row"],
.cmp-corner { position: sticky; left: 0; z-index: 2; background: #F5F7F5; color: var(--primary); font-size: 13px; font-weight: 700; }
.cmp-table tbody th[scope="row"] { vertical-align: middle; }
.cmp-table tbody tr.cmp-same:nth-child(even) th[scope="row"] { background: #F0F3F1; }
.cmp-table tbody tr.cmp-different th[scope="row"] { background: #E3F3EC; box-shadow: inset 3px 0 var(--accent), inset 0 1px #D4EADF, inset 0 -1px #D4EADF; }
.cmp-corner { z-index: 3; }
.cmp-diff-mark { display: block; margin-top: 3px; color: #168461; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.cmp-col { background: #fff; vertical-align: top; }
.cmp-card { display: block; color: inherit; text-decoration: none; }
.cmp-table--2 .cmp-card { display: grid; grid-template-columns: 112px minmax(0,1fr); align-items: center; gap: 16px; }
.cmp-shot { display: block; width: 112px; aspect-ratio: 1/1; overflow: hidden; border: 1px solid #EDF0EE; border-radius: 8px; background: #FAFAFA; }
.cmp-shot img { width: 100%; height: 100%; object-fit: contain; }
.cmp-name { display: -webkit-box; margin-top: 9px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; color: var(--primary); font-family: 'Barlow Condensed', Inter, sans-serif; font-size: 17px; font-weight: 700; line-height: 1.16; }
.cmp-table--2 .cmp-name { margin-top: 0; font-size: 19px; }
.cmp-card:hover .cmp-name { color: var(--accent); }
.cmp-col-actions { display: flex; align-items: center; gap: 13px; margin-top: 12px; }
.cmp-view { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 12px; border-radius: 6px; background: var(--accent); color: #fff; font-family: Barlow, Inter, -apple-system, sans-serif; font-size: 13px; font-weight: 700; text-decoration: none; }
.cmp-view:hover { background: var(--accent-hover); color: #fff; }
.cmp-remove { padding: 0; border: 0; background: none; color: #7E8A84; font-family: Inter, -apple-system, sans-serif; font-size: 11px; font-weight: 600; text-decoration: underline; cursor: pointer; }
.cmp-remove:hover { color: #EF4444; }

.cmp-price { font-size: 16px; font-weight: 800; color: var(--primary); }
.cmp-was { margin-left: 7px; color: #94A3B8; font-size: 12px; text-decoration: line-through; }
.cmp-off { display: inline-block; margin-top: 4px; padding: 2px 7px; border-radius: 20px; background: #EF4444; color: #fff; font-size: 11px; font-weight: 700; }
.cmp-gap { color: #C7CDD2; }

.cmp-foot { max-width: 66ch; margin: 16px 0 0; color: #78716C; font-size: 12.5px; line-height: 1.6; }

/* ── the toggle compare.js puts on a product card ──────────────────────────────────── */
.cmp-toggle--card {
  position: absolute; top: 8px; left: 8px; z-index: 3;
  width: 28px; height: 28px; padding: 0;
  border: 1px solid rgba(0,0,0,.08); border-radius: 50%;
  background: rgba(255,255,255,.95); color: #64748b;
  font: 700 15px/1 Inter, sans-serif; cursor: pointer;
  box-shadow: 0 1px 5px rgba(0,0,0,.14);
}
/* Drawn, not written: a word here would sit under the discount badge, which also starts at
   top-left. The pressed state is what tells the shopper it took. */
.cmp-toggle--card::before { content: "\21C4"; }
.cmp-toggle--card.is-on { background: var(--primary); border-color: var(--primary); color: #fff; }
.prod-card:has(.discount-badge) .cmp-toggle--card,
.prod-card:has(.bestseller-badge) .cmp-toggle--card { top: auto; bottom: 8px; }

/* Mirava draws no compare control on a card at all — its only entry point is the button on
   the product page, and /compare there is an editorial list rather than a shopper's tray.
   This fork does need a card-level way in, so the control stays; it just stops competing with
   the photo, the badge and the wishlist heart for attention on a grid of forty cards.
   Revealed on hover where there is a real cursor, always visible where there is not — a
   hover-only control on a phone is an unreachable control. Focus keeps it for the keyboard,
   and .is-on keeps it for a product already in the tray, which must stay legible at a glance. */
@media (hover: hover) and (pointer: fine) {
  .cmp-toggle--card { opacity: 0; transition: opacity .15s ease; }
  .prod-card:hover .cmp-toggle--card,
  .cmp-toggle--card:focus-visible,
  .cmp-toggle--card.is-on { opacity: 1; }
}

.cmp-toggle--pd {
  /* .pd-actions is a flex row and the button would otherwise stretch to fill it — 305px of
     "Compare" next to a 44px wishlist icon. */
  flex: 0 0 auto; align-self: center;
  min-height: 44px; margin-left: 8px; padding: 0 16px;
  border: 1px solid #E7E2DA; border-radius: 8px;
  background: #fff; color: #57534E;
  font-size: 13px; font-weight: 700; cursor: pointer;
}
.cmp-toggle--pd:hover { border-color: var(--accent); color: var(--accent); }
.cmp-toggle--pd.is-on { border-color: var(--primary); background: var(--primary); color: #fff; }

/* ── the tray ──────────────────────────────────────────────────────────────────────── */
.cmp-tray {
  position: fixed; z-index: 60; right: 0; bottom: 0; left: 0;
  display: none; padding: 10px 16px;
  border-top: 1px solid #E7E2DA; background: rgba(255,255,255,.97);
  box-shadow: 0 -6px 28px rgba(18,24,31,.10); backdrop-filter: blur(8px);
}
.cmp-tray.is-open { display: block; }

/* The product page already owns this edge. .pd-sticky-bar slides up on scroll at bottom: 0
   and z-index 997, and the tray sits at the same edge at z-index 60 — so on a product page
   the buy bar covered it outright and "Comparing 2 of 4" disappeared under "Add to cart".
   Stack them instead of letting one win: the tray rides above the bar for as long as the bar
   is showing, and drops back down when it slides away. The offset is the bar's own height
   (69px measured) plus a hairline, and it only applies while .visible is on the bar, so a
   page without one is untouched. */
body:has(.pd-sticky-bar.visible) .cmp-tray.is-open { bottom: 70px; }

/* Phones stack a third fixed element at this edge: .mobile-bottom-nav, 56px tall at
   bottom: 0 on every page. The tray was landing on top of it whether or not a product page
   was open, so the nav lost its right-hand items behind the tray. Clear the nav always, and
   clear the buy bar as well when it is up (56 + its 123px mobile height). */
@media (max-width: 768px) {
  .cmp-tray.is-open { bottom: 56px; }
  body:has(.pd-sticky-bar.visible) .cmp-tray.is-open { bottom: 179px; }
}
.cmp-tray-row { display: flex; max-width: 1200px; margin: 0 auto; align-items: center; gap: 14px; }
.cmp-tray-label { flex: 0 0 auto; color: #78716C; font-size: 12px; font-weight: 700; }
.cmp-tray-items { display: flex; min-width: 0; flex: 1; gap: 8px; overflow-x: auto; }
.cmp-tray-item { position: relative; flex: 0 0 auto; width: 46px; height: 46px; border: 1px solid #E7E2DA; border-radius: 7px; background: #FAFAFA; }
.cmp-tray-item img { width: 100%; height: 100%; object-fit: contain; }
.cmp-tray-item button { position: absolute; top: -6px; right: -6px; width: 19px; height: 19px; padding: 0; border: 1px solid #E7E2DA; border-radius: 50%; background: #fff; color: #57534E; font: 700 12px/1 Inter, sans-serif; cursor: pointer; }
.cmp-tray-item button:hover { border-color: #EF4444; color: #EF4444; }
.cmp-tray-hint, .cmp-tray-clear { flex: 0 0 auto; color: #94A3B8; font-size: 12px; font-weight: 600; }
.cmp-tray-clear { border: 0; background: none; text-decoration: underline; cursor: pointer; }
.cmp-tray-clear:hover { color: #EF4444; }
.cmp-tray-note { max-width: 1200px; margin: 0 auto 8px; padding: 9px 12px; border-radius: 7px; background: #FEF3C7; color: #7C2D12; font-size: 13px; line-height: 1.5; }
.cmp-tray-note:empty { display: none; }

@media (max-width: 700px) {
  .cmp-head { margin-bottom: 18px; }
  .cmp-toolbar { align-items: flex-start; }
  .cmp-toolbar__summary { display: grid; gap: 1px; }
  .cmp-diff-toggle { min-height: 36px; padding: 0 11px; font-size: 12px; }
  .cmp-table th, .cmp-table td { padding: 11px 12px; }
  .cmp-table { min-width: calc(118px + var(--cmp-count) * 158px); }
  .cmp-spec-col { width: 118px; }
  .cmp-table--2 .cmp-card { display: block; }
  .cmp-shot { width: 96px; }
  .cmp-name, .cmp-table--2 .cmp-name { margin-top: 8px; font-size: 15px; }
  .cmp-col-actions { align-items: flex-start; flex-direction: column; gap: 8px; }
  .cmp-view { min-height: 32px; padding: 0 10px; font-size: 12px; }
  .cmp-table tbody th[scope="row"], .cmp-corner { font-size: 12px; }
  .cmp-tray-label { display: none; }
  .cmp-tray-row { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .cmp-toggle--card, .cmp-toggle--pd { transition: none; }
}

/* A specification name that has a reference page behind it. Underlined on hover only: in a
   table of ten rows, ten permanently underlined labels read as an error state rather than as
   help, and the row label still has to work as a label first. */
.cmp-spec-ref { color: inherit; text-decoration: none; border-bottom: 1px dotted color-mix(in srgb, var(--primary) 45%, transparent); }
.cmp-spec-ref:hover { color: var(--accent); border-bottom-color: var(--accent); }