/* ═══════════════════════════════════════════════════════════════
   PATHURA — storefront-refine.css
   Mobile-first optimisation + interaction polish for the customer
   storefront. Loaded LAST so it layers over the Phase-6 split
   files without editing them. Uses ONLY existing design tokens —
   the PATHURA palette and type are unchanged.
   Desktop behaviour is preserved; almost everything here is either
   additive (new components) or scoped to <= 900 / <= 600 / <= 430.
═══════════════════════════════════════════════════════════════ */

/* ── Global overflow guard ─────────────────────────────────── */
html, body { max-width: 100%; overflow-x: clip; }
img, svg, video { max-width: 100%; height: auto; }
* { min-width: 0; }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ── Consistent control sizing / touch targets ─────────────── */
.hero-btn, .cb-cta, .fs-banner-cta,
.atc-btn, .buy-now-btn, .btn-checkout,
.pd-atc, .pd-buynow { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* ════════════════════════════════════════════════════════════
   1. PRIMARY NAVBAR
════════════════════════════════════════════════════════════ */

/* Menu button — hidden on desktop, shown on mobile as the drawer trigger */
.nav-menu-btn { display: none; }

@media (max-width: 600px) {
  /* Two-row navbar: [logo ......... cart · menu] / [ full-width search ] */
  #navbar { height: auto; }
  .nav-inner {
    grid-template-columns: 1fr auto;
    grid-template-rows: var(--nav-h) auto;
    gap: 8px 10px;
    padding: 0 var(--space-page-x-mobile) 10px;
    align-content: center;
  }
  .nav-logo { font-size: 1.3rem; align-self: center; }

  .nav-right {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    gap: 4px;
  }
  /* Track Order / Sign In move into the menu drawer on mobile */
  #trackOrderLink, #signInLink { display: none; }

  .nav-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    background: none;
    border-radius: var(--nav-action-radius);
    color: var(--nav-text);
    font-size: 22px;
    cursor: pointer;
  }
  .nav-menu-btn:active { background: var(--nav-action-hover-bg); }
  .nav-more { display: none; }   /* replaced by .nav-menu-btn on mobile */

  .cart-trigger {
    width: 44px; height: 44px;
    padding: 0;
    justify-content: center;
    margin-left: 0;
    position: relative;
  }
  .cart-icon { width: 22px; height: 22px; }
  .cart-badge {
    position: absolute;
    top: 4px; right: 4px;
    min-width: 16px; height: 16px;
    font-size: 10px;
  }

  /* Search becomes a full-width second row */
  .nav-center {
    display: flex !important;
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .search-wrap {
    max-width: none;
    width: 100%;
    height: 42px;
  }
  .nav-search { font-size: 16px; }   /* >=16px stops iOS auto-zoom */

  /* Secondary navbar stays reachable while scrolling — it sticks
     flush under the two-row primary bar. --sticky-nav-offset is the
     live primary-navbar height (published by app.js; resize- and
     safe-area-correct). The px fallback covers first paint / no-JS.
     Lower z-index than the primary bar, so any sub-pixel seam is
     covered by the header rather than showing a gap. */
  .sub-navbar {
    position: sticky;
    top: var(--sticky-nav-offset, 116px);
    height: 46px;
    z-index: var(--z-subnav);
  }

  /* With the primary + secondary bars both stuck, a category jump must
     land the section heading BELOW the stack (primary height + the
     46px sub-navbar + a little breathing room), not underneath it. */
  #electronics, #fashion, #home-living, #beauty, #campaignBanner {
    scroll-margin-top: calc(var(--sticky-nav-offset, 116px) + 54px);
  }
}

@media (max-width: 380px) {
  .nav-inner { gap: 6px 8px; }
  .nav-right { gap: 2px; }
}

/* ════════════════════════════════════════════════════════════
   2. SECONDARY NAVBAR
   Keep the ORIGINAL translucent-glass surface (an earlier opaque
   color-mix override flattened it). Re-assert the token-driven
   glass explicitly so load order can't matter: warm translucent
   tint + backdrop blur = depth and separation from the primary
   bar, never dark or opaque. The active-state underline and the
   mobile scroll behaviour from the later pass are kept.
════════════════════════════════════════════════════════════ */
.sub-navbar {
  background: var(--subnav-bg);
  -webkit-backdrop-filter: blur(var(--subnav-blur));
          backdrop-filter: blur(var(--subnav-blur));
  border-bottom: 1px solid var(--subnav-border);
}
.sub-nav-link { font-weight: 600; letter-spacing: .2px; }
.sub-nav-link.active {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  box-shadow: inset 0 -2px 0 var(--primary);
}
.sub-nav-offers { box-shadow: var(--shadow-sm); }

@media (max-width: 600px) {
  .sub-nav-inner {
    justify-content: flex-start;
    gap: 2px;
    padding-right: 1rem;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  /* No mask fade here — it visually clipped the last label. A plain
     horizontal scroller with snap is clearer and hides nothing. */
  .sub-nav-sep { display: none; }
  .sub-nav-item { flex: 0 0 auto; }
  .sub-nav-link {
    padding: 9px 12px;
    font-size: 12.5px;
    min-height: 40px;
    scroll-snap-align: start;
  }
  /* "Offers" already appears in the scrolling list on mobile — the
     duplicate pill only added clutter and sat half under the old fade. */
  .sub-nav-offers { display: none; }
}

/* ════════════════════════════════════════════════════════════
   MOBILE MENU DRAWER
════════════════════════════════════════════════════════════ */
.menu-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  z-index: var(--z-overlay);
  opacity: 0; pointer-events: none;
  transition: opacity var(--transition-base) ease;
}
.menu-overlay.open { opacity: 1; pointer-events: auto; }

.menu-drawer {
  position: fixed;
  top: 0; bottom: 0; left: 0;
  width: min(84vw, 320px);
  transform: translateX(-100%);
  background: var(--surface);
  z-index: var(--z-drawer);
  display: flex; flex-direction: column;
  box-shadow: 12px 0 40px rgba(0,0,0,.25);
  transition: transform .3s var(--ease-sharp);
}
.menu-drawer.open { transform: translateX(0); }

.menu-drawer-head {
  background: var(--text);
  color: var(--text-inverse);
  padding: 1.2rem 1.4rem;
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 700;
}
.menu-drawer-head .drawer-close { color: var(--text-muted); font-size: 1.3rem; }
.menu-drawer-head .drawer-close:hover { color: var(--text-inverse); }

.menu-drawer-nav { padding: .8rem 0 1.4rem; overflow-y: auto; }
.menu-drawer-label {
  padding: 1rem 1.4rem .3rem;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--text-muted);
}
.menu-drawer-nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 1.4rem;
  min-height: 48px;
  color: var(--text);
  text-decoration: none;
  font-size: 14.5px; font-weight: 500;
}
.menu-drawer-nav a:active { background: var(--surface-2); }
.menu-drawer-nav a i { color: var(--primary); font-size: 17px; }

/* ════════════════════════════════════════════════════════════
   3. PRODUCT CARDS — polish + consistent height
════════════════════════════════════════════════════════════ */
.pcard { border: 1px solid var(--border); }
.pcard-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;                /* keeps prices aligned across the row */
}
.pcard-actions .atc-btn:disabled,
.pcard-actions .buy-now-btn:disabled { opacity: .45; cursor: not-allowed; }

@media (max-width: 640px) {
  .pcard-img { font-size: 3rem; }
  .pcard-body { padding: .7rem .7rem .3rem; }
  .pcard-brand { font-size: 9px; letter-spacing: .6px; }
  .pcard-name { font-size: 12.5px; margin: 2px 0 5px; min-height: 2.5em; }
  .pcard-price { font-size: 14px; }
  .pcard-old { font-size: 11px; }
  .pcard-rating { font-size: 10.5px; margin-top: 3px; }
  .pcard-actions { margin: .55rem .7rem .7rem; gap: 5px; flex-wrap: wrap; }
  .atc-btn, .buy-now-btn { font-size: 10.5px; padding: 10px 4px; min-height: 40px; letter-spacing: .2px; }
  .pbadge { font-size: 8.5px; padding: 3px 6px; top: 8px; left: 8px; }
}
@media (max-width: 340px) {
  .products-grid { gap: 10px; }
  .buy-now-btn { flex-basis: 100%; }   /* stack the secondary action */
}

/* ════════════════════════════════════════════════════════════
   4. PRODUCT DETAIL PAGE
════════════════════════════════════════════════════════════ */

/* Gallery — swipeable thumbnail strip on mobile */
.pd-thumb {
  width: 60px; height: 60px;
}
.pd-thumb.active { box-shadow: 0 0 0 2px var(--primary); }

/* Variant selector (rendered by app.js from the live variant data) */
.pd-variants { margin: 0 0 1.4rem; display: flex; flex-direction: column; gap: 1rem; }
.pd-variant-group { display: flex; flex-direction: column; gap: .5rem; }
.pd-variant-group-label {
  font-size: 12px; font-weight: 700;
  letter-spacing: .3px; text-transform: uppercase;
  color: var(--text-muted);
}
.pd-variant-group-label b { color: var(--text); font-weight: 700; text-transform: none; letter-spacing: 0; }
.pd-variant-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-variant-opt {
  min-height: 40px;
  padding: 8px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: border-color var(--transition-fast) ease, background var(--transition-fast) ease, color var(--transition-fast) ease;
}
.pd-variant-opt:hover { border-color: var(--text); }
.pd-variant-opt.selected {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  color: var(--primary);
}
.pd-variant-opt.unavailable {
  opacity: .4;
  cursor: not-allowed;
  text-decoration: line-through;
}
.pd-variant-note {
  font-size: 12.5px;
  color: var(--text-muted);
}
.pd-variant-note.is-error { color: var(--danger); font-weight: 600; }

/* Quantity stepper */
.pd-qty-row {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 1.3rem;
}
.pd-qty-row > span {
  font-size: 12px; font-weight: 700;
  letter-spacing: .3px; text-transform: uppercase;
  color: var(--text-muted);
}
.pd-qty {
  display: inline-flex; align-items: center;
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}
.pd-qty button {
  width: 44px; height: 44px;
  border: none; background: var(--surface-2);
  color: var(--text);
  font-size: 20px; line-height: 1;
  cursor: pointer;
  transition: background var(--transition-fast) ease;
}
.pd-qty button:hover { background: var(--border); }
.pd-qty button:disabled { opacity: .35; cursor: not-allowed; }
.pd-qty-val {
  min-width: 48px; text-align: center;
  font-family: var(--font-display);
  font-size: 15px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.pd-atc:disabled, .pd-buynow:disabled { opacity: .45; cursor: not-allowed; }

/* Sticky mobile purchase bar (injected by app.js only on product.html) */
.pd-sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 300;
  display: none;
  align-items: center;
  gap: 12px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 24px rgba(0,0,0,.08);
}
.pd-sticky-cta .pd-sticky-price {
  display: flex; flex-direction: column; line-height: 1.15;
  flex-shrink: 0;
}
.pd-sticky-cta .pd-sticky-price small { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; }
.pd-sticky-cta .pd-sticky-price b { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; }
.pd-sticky-cta .pd-atc {
  flex: 1;
  padding: 13px;
  min-height: 48px;
}

@media (max-width: 720px) {
  /* Sticky-bar clearance for the end of the page is reserved on <body>
     (see body:has(#pdStickyCta ...) below); the buy box itself no longer
     needs the extra bottom room, so the gallery + info sit higher. */
  .pd-wrap { padding: .85rem 1rem 1.75rem; }
  .pd-crumb { margin-bottom: .7rem; font-size: 12px; }
  .pd-name { font-size: 1.35rem; line-height: 1.2; margin-bottom: .55rem; }
  .pd-price { font-size: 1.55rem; }
  .pd-old { font-size: .95rem; }
  .pd-grid { gap: 1.35rem; }
  .pd-info { padding-top: 0; }
  /* Mobile hero: cap the gallery to a 4:3 frame so the product name,
     price and variant picker reach the first screen. `contain` keeps the
     whole product visible (no crop) and works for any image ratio. */
  .pd-gallery { gap: .55rem; }
  .pd-media { border-radius: var(--r-lg); aspect-ratio: 4 / 3; }
  .pd-media img { object-fit: contain; }
  .pd-emoji { font-size: 4.5rem; }
  .pd-thumbs { gap: .45rem; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; scrollbar-width: none; }
  .pd-thumbs::-webkit-scrollbar { display: none; }
  .pd-meta { margin-bottom: .9rem; }
  .pd-pricing { margin-bottom: .5rem; }
  .pd-variants { margin-bottom: 1rem; }
  .pd-qty-row { margin-bottom: 1rem; }
  .pd-highlights { margin-bottom: 1rem; }
  .pd-actions { flex-direction: column; gap: 8px; max-width: none; margin-bottom: 1rem; }
  .pd-atc, .pd-buynow { padding: 14px; min-height: 48px; font-size: 14.5px; }
  .pd-section { margin-top: 1.6rem; padding-top: 1.4rem; }
  /* Phase 10: the sticky bar carries only "Buy Now"; the inline Add to
     Cart + Buy Now stay visible in the buy box on mobile too. */
  .pd-sticky-cta { display: flex; }
  .pd-info .pd-actions { display: flex; }
}
@media (max-width: 600px) {
  .pd-thumb { width: 52px; height: 52px; }
}
@media (max-width: 380px) {
  .pd-name { font-size: 1.2rem; }
  .pd-price { font-size: 1.4rem; }
  .pd-variant-opt { padding: 8px 13px; font-size: 12.5px; }
}

/* ════════════════════════════════════════════════════════════
   4b. PRODUCT LANDING PAGE — Phase 10 conversion polish
   (highlights, assurance strip, sticky Buy Now, related grid)
════════════════════════════════════════════════════════════ */

/* ── Swipeable gallery (Phase 10 refinement) ───────────────
   Mobile: swipe the main image + tap the dots; the thumbnail strip is
   hidden. Desktop: thumbnails as before, dots hidden. */
#pdMainImage { transition: opacity .2s ease; }
.pd-media { touch-action: pan-y; }

.pd-dots {
  position: absolute;
  left: 0; right: 0; bottom: 10px;
  display: none;
  justify-content: center;
  gap: 6px;
  z-index: 2;
}
.pd-dot {
  width: 7px; height: 7px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text) 22%, transparent);
  cursor: pointer;
  transition: width .16s ease, background .16s ease;
}
.pd-dot.active { width: 20px; border-radius: 4px; background: var(--primary); }

@media (max-width: 600px) {
  .pd-dots { display: flex; }
  .pd-thumbs { display: none; }
}

/* ── Buy box CTAs — Buy Now is the hero action ─────────────
   Both buttons filled (standard storefront pattern); Buy Now carries
   the brand colour and matches the sticky bar, Add to Cart is the
   quieter neutral option. */
.pd-actions .pd-buynow {
  background: var(--primary);
  color: var(--surface);
  border-color: var(--primary);
}
.pd-actions .pd-buynow:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  color: var(--surface);
}
.pd-actions .pd-atc {
  background: var(--text);
  color: var(--surface);
  border-color: var(--text);
}
.pd-actions .pd-atc:hover {
  background: #000;
  border-color: #000;
}

/* Highlights — the product's real features (now sit below the CTA) */
.pd-highlights {
  list-style: none;
  margin: 1.1rem 0 1.3rem;
  display: flex; flex-direction: column; gap: .5rem;
}
.pd-highlights li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 13.5px; line-height: 1.5;
  color: var(--text);
}
.pd-highlights li::before {
  content: "✓";
  position: absolute; left: 0; top: 0;
  color: var(--primary); font-weight: 700;
}

/* Assurance strip — same site-wide facts as the trust bar */
.pd-assurance {
  list-style: none;
  margin: 1rem 0 1.1rem;
  padding: .9rem 1rem;
  display: flex; flex-direction: column; gap: .55rem;
  background: color-mix(in srgb, var(--primary) 5%, var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.pd-assurance li {
  display: flex; align-items: center; gap: 9px;
  font-size: 12.5px; color: var(--text);
}
.pd-assurance li i { color: var(--primary); font-size: 15px; flex-shrink: 0; }

/* Sticky bar — Buy Now is the primary action; render it filled */
.pd-sticky-cta .pd-sticky-buy {
  flex: 1;
  min-height: 48px;
  padding: 13px;
  background: var(--primary);
  color: var(--surface);
  border-color: var(--primary);
}
.pd-sticky-cta .pd-sticky-buy:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.pd-sticky-cta .pd-sticky-buy:disabled { opacity: .5; }
.pd-sticky-cta .pd-sticky-price small { display: block; }

/* Description + Specifications — on desktop these sat in a narrow
   left column with the whole right half of the page empty. Pair them
   in one balanced two-column block that fills the PDP content width and
   reads as a single connected section (one divider, not two floating
   cards). Stacks on tablet / mobile. */
/* <=860: no wrapper styling — the child .pd-section rules (border-top +
   margin-top, from product-detail.css) space the two blocks exactly as
   before. >=861: the wrapper owns one shared divider and lays the two
   sections side by side. */
.pd-details { max-width: var(--max-width-pd); margin: 0 auto; }
@media (min-width: 861px) {
  .pd-details {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 2.4rem 4rem;
    margin-top: 2.6rem;
    padding-top: 2.4rem;
    border-top: 1px solid var(--border);
  }
  .pd-details .pd-section {
    max-width: none;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }
}

/* Related products — connect it to the page with a divider instead of
   letting it float below a big empty gap; trim the outer .section
   padding so the rhythm from Specs -> Related -> footer is even. */
.pd-related {
  max-width: var(--max-width-pd);
  margin: 0 auto;
  padding-top: 2.6rem;
  padding-bottom: 2.75rem;
  border-top: 1px solid var(--border);
}
.pd-related .products-grid { margin-top: 0; }
.pd-related .section-head { margin-bottom: 1.4rem; }

/* The PDP wrapper reserved 5rem below the buy box for the (removed on
   desktop) sticky bar — that gap is dead space now the related section
   provides its own separation. */
@media (min-width: 721px) {
  .pd-wrap { padding-bottom: 2.5rem; }
}

/* ── Product grid column count ─────────────────────────────
   `auto-fill, minmax(220px, 1fr)` packed 5–6 narrow cards per row on a
   laptop. Aim for 4 comfortable cards through the common desktop range
   and only add a 5th column on genuinely wide screens. (<=640 keeps the
   fixed 2-up rule from product-card.css.) */
@media (min-width: 1000px) {
  .products-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
}
@media (min-width: 1600px) {
  .products-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* When the sticky purchase bar is showing, reserve space at the very
   bottom of the page so it never permanently covers the footer/trust
   content. (:has degrades gracefully where unsupported.) */
@media (max-width: 720px) {
  body:has(#pdStickyCta:not([hidden])) {
    padding-bottom: calc(60px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 600px) {
  .pd-related {
    padding: 2rem var(--space-page-x-mobile) 2.25rem;
  }
}
@media (max-width: 380px) {
  .pd-assurance li { font-size: 11.5px; }
  .pd-highlights li { font-size: 12.5px; }
  .pd-sticky-cta { gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); }
  .pd-sticky-cta .pd-sticky-price b { font-size: 1rem; }
}

/* ════════════════════════════════════════════════════════════
   6. CART DRAWER — bigger touch targets, clearer layout
════════════════════════════════════════════════════════════ */
.cart-drawer { width: min(420px, 100%); right: min(-420px, -100%); }
.cart-row { grid-template-columns: 56px 1fr auto; gap: 12px; align-items: start; }
.cart-row-emoji {
  width: 56px; height: 56px;
  font-size: 1.7rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2);
  border-radius: var(--r);
  overflow: hidden;
}
.cart-row-emoji img { width: 100%; height: 100%; object-fit: cover; }
.cart-row-variant {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 2px;
}
.cart-qty-ctrl { gap: 10px; margin-top: 10px; }
.qty-btn {
  width: 34px; height: 34px;
  font-size: 17px;
  border-radius: var(--r);
}
.qty-val { min-width: 26px; font-size: 14px; }
.cart-row-remove {
  font-size: 12px;
  min-height: 32px;
  padding: 6px 0 0;
}
.cart-row-price { font-size: 14.5px; font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.btn-checkout { min-height: 52px; font-size: 15px; }
.cart-total-price { font-variant-numeric: tabular-nums; }

@media (max-width: 600px) {
  .cart-drawer-head { padding: 1.1rem 1.2rem; }
  .cart-items { padding: .8rem 1rem; }
  .cart-drawer-foot { padding: 1.1rem 1.2rem calc(1.1rem + env(safe-area-inset-bottom)); }
}

/* ════════════════════════════════════════════════════════════
   7. CHECKOUT + ORDER-SUCCESS MODALS
   (app.js builds these; markup now uses these classes instead of
   inline dark styles, so they inherit the PATHURA light theme.)
════════════════════════════════════════════════════════════ */
.co-overlay {
  position: fixed; inset: 0;
  z-index: var(--z-toast);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(3px);
}
@media (min-width: 601px) {
  .co-overlay { align-items: center; padding: 1.5rem; }
}
.co-modal {
  width: 100%;
  max-width: 460px;
  max-height: 92dvh;
  overflow-y: auto;
  background: var(--surface);
  color: var(--text);
  border-radius: 18px 18px 0 0;
  padding: 1.4rem 1.3rem calc(1.4rem + env(safe-area-inset-bottom));
  box-shadow: 0 -12px 40px rgba(0,0,0,.28);
}
@media (min-width: 601px) {
  .co-modal { border-radius: 16px; padding: 1.7rem; box-shadow: var(--shadow-lg); }
}
.co-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.2rem;
}
.co-head h2 {
  font-family: var(--font-display);
  font-size: 1.2rem; font-weight: 700;
  margin: 0 0 2px;
}
.co-head p { font-size: 12.5px; color: var(--text-muted); margin: 0; }
.co-close {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 16px; cursor: pointer;
}
.co-close:hover { color: var(--text); border-color: var(--text-muted); }

.co-summary-label {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: .5rem;
}
.co-line {
  display: flex; justify-content: space-between; align-items: center;
  gap: .6rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.co-line .co-line-name { flex: 1; color: var(--text); }
.co-line .co-line-name span { color: var(--text-muted); }
.co-line .co-line-amt { font-family: var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.co-total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: .8rem 0 0;
  font-weight: 700;
}
.co-total .co-total-amt {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}

.co-divider { height: 1px; background: var(--border); margin: 1rem 0; }

.co-field { margin-bottom: .7rem; }
.co-field label {
  display: block;
  font-size: 12px; font-weight: 600;
  color: var(--text-muted);
  margin-bottom: .3rem;
}
.co-field label .opt { color: var(--text-muted); font-weight: 400; }
.co-field label .req { color: var(--primary); }
.co-field input,
.co-field textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 11px 14px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;                 /* prevents iOS zoom */
  outline: none;
  transition: border-color var(--transition-fast) ease, background var(--transition-fast) ease;
}
.co-field textarea { resize: vertical; min-height: 64px; line-height: 1.5; }
.co-field input:focus,
.co-field textarea:focus { border-color: var(--primary); background: var(--surface); }

/* Phase 28 — District + Upazila/Thana side by side on desktop (each
   backed by a <datalist> for a compact, searchable, dependency-free
   picker: typing filters suggestions, opening it still shows every
   option, nothing is permanently rendered on screen). Single column
   on mobile, same as every other checkout field. */
.co-field-row { display: flex; gap: .7rem; }
.co-field-row .co-field--half { flex: 1 1 0; min-width: 0; margin-bottom: .7rem; }
@media (max-width: 600px) {
  .co-field-row { flex-direction: column; gap: 0; }
}

.co-error {
  color: var(--danger);
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: .8rem;
}
.co-error[hidden] { display: none; }

.co-submit {
  width: 100%;
  background: var(--primary);
  color: var(--surface);
  border: none;
  padding: 15px;
  min-height: 52px;
  border-radius: var(--btn-radius);
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 700;
  letter-spacing: .3px;
  cursor: pointer;
  transition: background var(--transition-fast) ease, opacity var(--transition-fast) ease;
}
.co-submit:hover { background: var(--primary-hover); }
.co-submit:disabled { opacity: .6; cursor: not-allowed; }

/* Order-success */
.co-success { text-align: center; }
.co-success .co-tick {
  width: 56px; height: 56px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--success) 14%, var(--surface));
  color: var(--success);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem;
}
.co-success h2 { font-family: var(--font-display); font-size: 1.35rem; margin-bottom: .5rem; }
.co-success p { font-size: 13px; color: var(--text-muted); margin-bottom: .35rem; }
.co-success .co-success-id { color: var(--primary); font-family: var(--font-display); }
.co-success .co-success-box {
  background: var(--surface-2);
  border-radius: var(--r-lg);
  padding: .9rem 1rem;
  margin: 1.2rem 0 1.4rem;
  text-align: left;
}
.co-success .co-success-box p:first-child { color: var(--text-muted); font-size: 12px; margin-bottom: .3rem; }
.co-success .co-success-box p:last-child { color: var(--text); font-size: 13px; line-height: 1.55; margin: 0; }

/* Track Order — result view (Phase 17) */
.to-result-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: .35rem 0; font-size: 13px;
}
.to-result-row span { color: var(--text-muted); }
.to-result-row strong { color: var(--text); font-weight: 600; }
.to-status {
  display: inline-block;
  padding: .2rem .65rem;
  border-radius: 999px;
  font-size: 12px;
  text-transform: capitalize;
  background: color-mix(in srgb, var(--text-muted) 14%, var(--surface));
}
.to-status--confirmed,
.to-status--processing,
.to-status--shipped {
  background: color-mix(in srgb, var(--primary) 14%, var(--surface));
  color: var(--primary);
}
.to-status--delivered {
  background: color-mix(in srgb, var(--success) 14%, var(--surface));
  color: var(--success);
}
.to-status--cancelled {
  background: color-mix(in srgb, var(--danger) 14%, var(--surface));
  color: var(--danger);
}
.to-address { font-size: 13px; color: var(--text); line-height: 1.6; margin: 0; }

/* ════════════════════════════════════════════════════════════
   8. SEARCH — readable typed text + stable while typing
   The input inherited color:var(--nav-text-hover) (=== --primary),
   so typed text was low-contrast orange on white. Force high
   contrast and give the caret the brand colour instead.
════════════════════════════════════════════════════════════ */
.nav-search {
  color: var(--text);
  caret-color: var(--primary);
  -webkit-appearance: none;
          appearance: none;   /* strip iOS type=search inset shadow */
}
/* navbar.css already sets outline:none here, relying on .search-wrap's
   own :focus-within pill glow — but this file's global :focus-visible
   rule above loads later and wins the cascade, stacking a rectangular
   outline directly on the input on top of that rounded glow. This
   field already has its own equivalent focus indicator, so opt it out
   of the generic one specifically, rather than removing that rule
   site-wide (it's the right default everywhere else). */
.nav-search:focus-visible { outline: none; }
.nav-search::placeholder { color: var(--nav-search-placeholder); }
/* The native type=search clear control renders its own unstyled icon
   (a plain square-ish "x") that clashes with this pill-shaped, themed
   search bar — there's no custom clear button in the markup to hand
   off to, so strip it outright instead of half-styling it. */
.nav-search::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

@media (max-width: 600px) {
  .search-wrap { height: 44px; padding: 0 14px; }
  .nav-search { font-size: 16px; }   /* >=16px stops iOS auto-zoom */
}

/* ════════════════════════════════════════════════════════════
   9. CATEGORY BAR (.cat-bar) — fix collapsed / overlapping tabs
   .cat-tab had no flex-shrink guard, so on narrow screens every
   tab shrank to a sliver and its label overflowed onto the next
   one. Lock intrinsic width and make it a clean scroller.
════════════════════════════════════════════════════════════ */
.cat-bar {
  gap: 2px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.cat-tab {
  flex: 0 0 auto;
  scroll-snap-align: start;
}
@media (max-width: 600px) {
  .cat-bar { padding: 0 var(--space-page-x-mobile); }
  .cat-tab { padding: 12px 14px; font-size: 12.5px; }
}

/* ════════════════════════════════════════════════════════════
   10. SECTION HEADERS — no cramped "View all" collisions
════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .section-head { flex-wrap: wrap; row-gap: .4rem; align-items: flex-start; margin-bottom: 1.3rem; }
  .section-head > div { flex: 1 1 100%; }
  .section-head > .btn-text { align-self: flex-start; }   /* sits directly under the title, left-aligned */
  .section-title { font-size: 1.4rem; }
}

/* ════════════════════════════════════════════════════════════
   11. PROMO STRIP — three quiet trust cards, not solid slabs
   Existing markup gains a .promo-ic icon + .promo-txt wrapper.
   The heavy full-bleed colour tiles become bordered surface
   cards so the section reads as a considered trust row.
════════════════════════════════════════════════════════════ */
.promo-strip {
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: var(--max-width-page);
  margin: 0 auto;
  padding: .5rem var(--space-page-x) 1.5rem;
}
.promo-tile,
.promo-tile--a, .promo-tile--b, .promo-tile--c {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 1.1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  color: var(--text);
}
.promo-ic {
  flex-shrink: 0;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  color: var(--primary);
  font-size: 20px;
}
.promo-txt { min-width: 0; }
.promo-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-muted);
  opacity: 1;
  margin-bottom: 3px;
}
.promo-title {
  font-family: var(--font-display);
  font-size: .98rem; font-weight: 700; line-height: 1.25;
  color: var(--text);
}
@media (max-width: 860px) {
  .promo-strip { grid-template-columns: 1fr; gap: 8px; padding: .25rem var(--space-page-x-mobile) 1.25rem; }
  .promo-tile,
  .promo-tile--a, .promo-tile--b, .promo-tile--c { padding: .95rem 1rem; }
}

/* ════════════════════════════════════════════════════════════
   12. TRUST BAR — compact, scannable, still on-brand dark
════════════════════════════════════════════════════════════ */
.trust-bar { border-top: 3px solid var(--primary); }
.trust-desc { color: rgba(255, 255, 255, .58); }   /* was --text-muted: too dim on near-black */

@media (max-width: 900px) {
  .trust-bar { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .trust-bar { grid-template-columns: 1fr 1fr; gap: 1px; }
  .trust-item { padding: 1.35rem .9rem; }
  .trust-icon { font-size: 1.4rem; margin-bottom: .45rem; }
  .trust-title { font-size: 12px; }
  .trust-desc { font-size: 11px; line-height: 1.45; }
}

/* ════════════════════════════════════════════════════════════
   13. FOOTER — clearer hierarchy, grouping and mobile layout
════════════════════════════════════════════════════════════ */
footer {
  border-top: 1px solid rgba(255, 255, 255, .09);
  padding: 3rem var(--space-page-x) 2rem;
  column-gap: 2rem;
  row-gap: 2.25rem;
}
.footer-logo { font-size: 1.35rem; margin-bottom: .55rem; }
.footer-tagline { font-size: 12.5px; color: rgba(255, 255, 255, .6); max-width: 280px; }
.footer-col h4 {
  color: color-mix(in srgb, var(--primary) 88%, #fff);
  margin-bottom: .8rem;
  padding-bottom: .5rem;
  position: relative;
}
.footer-col h4::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 22px; height: 2px;
  background: var(--primary);
  opacity: .55;
}
.footer-col a {
  font-size: 12.5px;
  margin-bottom: 9px;
  color: rgba(255, 255, 255, .66);
}
.footer-col a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .07); }

@media (max-width: 900px) {
  footer { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  footer {
    grid-template-columns: 1fr 1fr;
    padding: 2.5rem var(--space-page-x-mobile) 1.75rem;
    row-gap: 2rem;
  }
  .footer-brand-col { grid-column: 1 / -1; }
  .footer-tagline { max-width: none; }
}
@media (max-width: 360px) {
  footer { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .cart-drawer, .menu-drawer, .co-overlay, .co-modal,
  .pcard, .pcard-actions, .fc-card, .hero-btn { transition: none !important; }
  .cart-badge.bump { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 11 — UI/UX pass: compact product cards, calmer product
   detail layout, thumbnail-style colour selector, real responsive
   hierarchy. Frontend only — palette, type, markup contracts and
   every JS hook (.pcard, .products-grid, .pd-*, pdSelectVariant,
   .selected/.unavailable) are unchanged.
═══════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────
   1 · PRODUCT LISTING — compact, premium cards
   The card image is the biggest space cost. Keep a single 1:1
   ratio everywhere, shrink the emoji fallback, tighten the body,
   and let wide screens show more columns so the image is never
   oversized (the real cause of the "too tall" cards).
──────────────────────────────────────────────────────────── */
.products-grid { gap: 18px; }

@media (min-width: 768px) and (max-width: 999px) {
  .products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}
@media (min-width: 1000px) {
  .products-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
}
@media (min-width: 1360px) {
  .products-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 1760px) {
  .products-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.pcard { border-radius: 12px; }
.pcard-img { aspect-ratio: 1 / 1; font-size: 3.1rem; }
.pcard-body { padding: .7rem .82rem .3rem; }
.pcard-brand { font-size: 9.5px; letter-spacing: .06em; margin-bottom: 1px; }
.pcard-name {
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.32;
  margin: 3px 0 6px;
  min-height: 2.6em;
}
.pcard-pricing { gap: 6px; }
.pcard-price { font-size: 14px; }
.pcard-old  { font-size: 11px; }
.pcard-disc { font-size: 10.5px; }
.pcard-rating { font-size: 10.5px; margin-top: 3px; }
.pcard-actions { margin: .55rem .82rem .8rem; gap: 6px; }
.atc-btn, .buy-now-btn { padding: 9px 6px; min-height: 38px; font-size: 10.5px; }

@media (max-width: 640px) {
  .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .pcard-img { font-size: 2.7rem; }
  .pcard-body { padding: .62rem .68rem .28rem; }
  .pcard-name { font-size: 12px; min-height: 2.5em; margin: 2px 0 5px; }
  .pcard-price { font-size: 13.5px; }
  .pcard-actions { margin: .5rem .68rem .68rem; gap: 5px; }
  .atc-btn, .buy-now-btn { font-size: 10px; padding: 9px 4px; }
}
@media (max-width: 430px) {
  .products-grid { gap: 10px; }
  .pcard-body { padding: .58rem .62rem .24rem; }
  .pcard-name { font-size: 11.5px; }
}

/* ────────────────────────────────────────────────────────────
   2 · PRODUCT DETAIL — image no longer dominates the screen
   Narrower gallery column + whole-product (contain) framing so
   nothing is cut off, and a tighter right column so title →
   price → colour → size → quantity → Add to Cart all sit within
   a 1366×768 viewport.
──────────────────────────────────────────────────────────── */
/* The page wrapper is now just a centred rail; the box + panels own
   their own surface, radius and rhythm. */
.pd-wrap { max-width: none; padding: 1.4rem 1.5rem 0; }
.pd-crumb {
  max-width: 1080px;
  margin: 0 auto .8rem;
}

/* ── ONE cohesive main product box ── */
.pd-box {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(.9rem, 1.6vw, 1.35rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(13, 13, 13, .04), 0 16px 38px -24px rgba(13, 13, 13, .16);
}

/* Left image column: a bit larger again; the wide box still leaves the
   right side plenty of room (a slightly larger gap pushes the options
   further right, which is fine). */
.pd-box .pd-grid {
  grid-template-columns: minmax(0, 370px) 1fr;
  gap: 2.2rem;
  align-items: start;
}
@media (min-width: 1280px) {
  .pd-box .pd-grid { grid-template-columns: minmax(0, 392px) 1fr; gap: 2.9rem; }
}

.pd-gallery { display: flex; flex-direction: column; gap: 0; }
.pd-media {
  aspect-ratio: 1 / 1;
  background: var(--surface-2);
  border-radius: 14px;
}
.pd-media img { object-fit: contain; }
/* Variant thumbnails — larger, close to the Add-to-Cart button height */
.pd-thumbs { gap: .5rem; margin-top: .55rem; }
.pd-thumb { width: 56px; height: 56px; border-radius: 10px; }

/* ── Right column — spacious, divider-led hierarchy (reference) ──
   title → rating → price → Colour → ─────── → Size → ─────── →
   stock → quantity → Add to Cart / Buy Now */
.pd-info { padding-top: 2px; }
.pd-brand { font-size: 10.5px; letter-spacing: .1em; margin-bottom: 3px; }
.pd-name { font-size: 1.42rem; line-height: 1.15; margin-bottom: .4rem; }
.pd-meta { gap: .55rem; margin-bottom: .5rem; font-size: 12.5px; }
.pd-pricing { margin-bottom: .25rem; }
.pd-price { font-size: 1.55rem; }
.pd-stock { margin: 0 0 .5rem; font-size: 13px; }

/* Variant block: compact rows, each group carrying its own
   full-width divider like the reference — trimmed so the whole
   box (through Buy Now) stays inside the first viewport. */
#pdVariantMount .pd-variants { margin: .7rem 0 0; gap: 0; }
.pd-box .pd-info .pd-variant-group {
  padding-bottom: .65rem;
  margin-bottom: .65rem;
  border-bottom: 1px solid var(--border);
  gap: .4rem;
}
.pd-variant-group-label { font-size: 11.5px; margin-bottom: 1px; }
.pd-box .pd-info .pd-variant-note { margin: .1rem 0 0; font-size: 12.5px; }

/* Colour swatches — a touch smaller so the row is shorter */
.pd-box .pd-swatch-chip { width: 36px; height: 36px; border-radius: 9px; }
.pd-box .pd-swatch-name { font-size: 10.5px; }
.pd-box .pd-variant-opts--swatch { gap: 9px; }

/* Size chips — shorter, still comfortable to tap */
.pd-box .pd-variant-opts:not(.pd-variant-opts--swatch) .pd-variant-opt {
  min-width: 40px; min-height: 34px; padding: 6px 12px; font-size: 12.5px;
}

#pdQtyMount .pd-qty-row { margin: .7rem 0 .7rem; gap: 14px; }
#pdQtyMount .pd-qty-row > span { font-size: 12px; }
.pd-qty button { width: 40px; height: 40px; font-size: 18px; }

.pd-info .pd-actions { margin: .15rem 0 0; gap: 12px; max-width: none; }
.pd-atc, .pd-buynow { padding: 11px; min-height: 44px; font-size: 13.5px; }

/* ── Slim assurance strip under the box ── */
.pd-assurance {
  max-width: 1080px;
  margin: .85rem auto 0;
  padding: .7rem 1rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: .35rem 1.4rem;
  list-style: none;
  background: color-mix(in srgb, var(--primary) 4%, var(--surface));
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 12px;
}
.pd-assurance li { display: flex; align-items: center; gap: 7px; color: var(--text); }
.pd-assurance li i { color: var(--primary); font-size: 14px; flex-shrink: 0; }

/* ── Separate rounded panels: details / reviews / related ── */
.pd-panel {
  max-width: 1080px;
  margin: 1.1rem auto 0;
  padding: clamp(1.05rem, 2vw, 1.55rem) clamp(1.05rem, 2.2vw, 1.7rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
}
.pd-panel-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -.01em;
  margin-bottom: 1rem;
}
.pd-panel-subtitle {
  font-family: var(--font-display);
  font-size: .98rem;
  font-weight: 700;
  margin: 1.4rem 0 .7rem;
}
#pdDetails .pd-highlights { margin: 0 0 1rem; }
#pdDetails .pd-description { margin: 0; }
#pdDetails .pd-specs { margin-top: .1rem; }

/* ── Reviews panel ── */
.pd-rev-overall { display: flex; align-items: center; gap: 1rem; }
.pd-rev-score {
  font-family: var(--font-display);
  font-size: 2.3rem;
  font-weight: 800;
  line-height: 1;
}
.pd-rev-score span { font-size: .95rem; font-weight: 600; color: var(--text-muted); }
.pd-rev-meta { display: flex; flex-direction: column; gap: 3px; }
.pd-rev-stars { font-size: 15px; color: var(--primary); }
.pd-rev-count { font-size: 12.5px; color: var(--text-muted); }
.pd-rev-note { margin-top: .85rem; font-size: 12.5px; color: var(--text-muted); }

/* ── "Continue shopping" link ── */
.pd-back {
  display: block;
  max-width: 1080px;
  margin: 1.1rem auto 0;
  font-size: 13px;
}

/* ── Tablet & down: single column, image never fills the screen ── */
@media (max-width: 900px) {
  .pd-box .pd-grid { grid-template-columns: 1fr; gap: 1.4rem; }
  .pd-gallery { max-width: 460px; }
  .pd-wrap { padding: 1.1rem 1rem 0; }
}
@media (max-width: 720px) {
  .pd-media { aspect-ratio: 4 / 3; max-height: 44vh; }
}
@media (max-width: 430px) {
  .pd-box { padding: .9rem; border-radius: 16px; }
  .pd-panel { padding: 1rem; border-radius: 14px; }
  .pd-name { font-size: 1.3rem; }
  .pd-price { font-size: 1.4rem; }
  .pd-wrap { padding: .9rem .85rem 0; }
}

/* ────────────────────────────────────────────────────────────
   3 · PREMIUM COLOUR SELECTOR — thumbnail swatches
   app.js renders the colour attribute group as .pd-swatch
   buttons (image chip when a colour-specific photo exists, else
   a real colour chip). Selection state / handlers are unchanged.
──────────────────────────────────────────────────────────── */
.pd-variant-opts--swatch {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
}
.pd-swatch {
  -webkit-appearance: none;
          appearance: none;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 2px;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}
.pd-swatch-chip {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background-color: var(--surface-2);
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14);
  outline: 2px solid transparent;
  outline-offset: 3px;
  transition: outline-color .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease);
}
.pd-swatch:hover .pd-swatch-chip {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .22);
}
.pd-swatch:focus-visible { outline: none; }
.pd-swatch:focus-visible .pd-swatch-chip {
  outline-color: color-mix(in srgb, var(--primary) 55%, transparent);
}
.pd-swatch.selected .pd-swatch-chip {
  outline-color: var(--primary);
  box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3px rgba(0, 0, 0, .10);
}
.pd-swatch-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}
.pd-swatch.selected .pd-swatch-name { color: var(--text); }
.pd-swatch.unavailable { opacity: .4; }
.pd-swatch.unavailable .pd-swatch-name { text-decoration: line-through; }

/* Mobile: compact chips in a horizontal scroller if the colours
   don't fit — never a tall vertical block. */
@media (max-width: 600px) {
  .pd-variant-opts--swatch {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 12px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pd-variant-opts--swatch::-webkit-scrollbar { display: none; }
  .pd-swatch { flex: 0 0 auto; }
  .pd-swatch-chip { width: 42px; height: 42px; }
}

/* ────────────────────────────────────────────────────────────
   4 · SIZE (and other non-colour) OPTIONS — compact square chips
──────────────────────────────────────────────────────────── */
.pd-variant-opts:not(.pd-variant-opts--swatch) { gap: 7px; }
.pd-variant-opts:not(.pd-variant-opts--swatch) .pd-variant-opt {
  min-width: 42px;
  min-height: 38px;
  padding: 8px 13px;
  border-radius: 8px;
  border-color: color-mix(in srgb, var(--text) 22%, transparent);
  font-size: 12.5px;
}
.pd-variant-opts:not(.pd-variant-opts--swatch) .pd-variant-opt.selected {
  background: var(--text);
  border-color: var(--text);
  color: #fff;
}
.pd-variant-opts:not(.pd-variant-opts--swatch) .pd-variant-opt:hover {
  border-color: var(--text);
  background: var(--surface-2);
}
.pd-variant-opts:not(.pd-variant-opts--swatch) .pd-variant-opt.selected:hover {
  background: #000;
}

/* ────────────────────────────────────────────────────────────
   5 · Related products — its own rounded panel + tidy grid
──────────────────────────────────────────────────────────── */
#pdRelated.pd-panel {
  border-top: 1px solid var(--border);   /* single border, not doubled */
  margin-top: 1.1rem;
}
#pdRelated .section-head { margin-bottom: 1rem; }
#pdRelated .section-title { font-size: 1.15rem; }
#pdRelated .section-eyebrow { margin-bottom: 2px; }
@media (min-width: 1000px) {
  .pd-related .products-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 236px));
    justify-content: start;
    gap: 18px;
  }
}
@media (max-width: 640px) {
  .pd-related .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

/* Empty toast never paints a bare chip. */
.toast:empty { display: none; }

/* ═══════════════════════════════════════════════════════════════
   PHASE 12 — Product gallery: mobile thumbnails + arrows + counter
   Desktop gallery layout is deliberately untouched: .pd-nav and
   .pd-counter only appear <=600px; the desktop thumbnail row and
   swipe behaviour are unchanged.
═══════════════════════════════════════════════════════════════ */

/* Prev / next arrows — mobile only, sit on the main image */
.pd-nav { display: none; }
.pd-counter { display: none; }

@media (max-width: 600px) {
  /* Bring back the thumbnail strip on mobile (small, scrollable) so a
     multi-image / multi-colour product reads clearly. Dots stay too. */
  .pd-thumbs {
    display: flex;
    gap: .4rem;
    margin-top: .5rem;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  .pd-thumbs::-webkit-scrollbar { display: none; }
  .pd-thumb {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    border-radius: 8px;
    border: 2px solid transparent;
    opacity: .65;
  }
  .pd-thumb.active {
    border-color: var(--primary);
    opacity: 1;
  }

  .pd-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
    color: var(--text);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
  }
  .pd-nav--prev { left: 8px; }
  .pd-nav--next { right: 8px; }
  .pd-nav:active { background: var(--surface); }

  .pd-counter {
    display: block;
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--text) 62%, transparent);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
  }

  /* dots move up a touch so they don't collide with the thumb strip */
  .pd-dots { bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  #pdMainImage { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 13 — PATHURA Recommendation + Market Comparison
   Two more .pd-panel sections, same rounded-card language as the
   existing Product details / Reviews panels. Order in the DOM is
   already: details -> reviews -> recommendation -> market -> related
   (app.js), nothing here changes that.
═══════════════════════════════════════════════════════════════ */

.pd-reco-sub,
.pd-market-sub {
  margin: -.5rem 0 1.1rem;
  font-size: 12.5px;
  color: var(--text-muted);
}

.pd-reco-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.pd-reco-block {
  padding: 1rem 1.1rem;
  background: var(--surface-2);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
}
.pd-reco-block h3 {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 700;
  margin-bottom: .5rem;
  color: var(--text);
}
.pd-reco-block p {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text);
  white-space: pre-line;
  margin: 0;
}
.pd-reco-block ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.pd-reco-block li {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
  padding-left: 1.15rem;
  position: relative;
}
.pd-reco-block li::before {
  content: "";
  position: absolute;
  left: .15rem;
  top: .62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-muted);
}

.pd-reco-block--warn {
  background: color-mix(in srgb, var(--warning) 8%, var(--surface));
  border-color: color-mix(in srgb, var(--warning) 28%, var(--border));
  /* With good-for + pros filling row 1, cons is the odd block left in
     row 2 — spanning full width (like the verdict block below) avoids
     an empty gap beside it instead of leaving unused whitespace. */
  grid-column: 1 / -1;
}
.pd-reco-block--warn li::before { background: var(--warning); }

.pd-reco-block--verdict {
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
  border-color: color-mix(in srgb, var(--primary) 24%, var(--border));
  grid-column: 1 / -1;
}
.pd-reco-block--verdict h3 { color: var(--primary-hover); }
.pd-reco-block--verdict p { font-weight: 500; }

/* ── Market comparison rows ── */
.pd-market-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pd-market-row {
  padding: .9rem 1.05rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.pd-market-seller {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.pd-market-src {
  font-size: 11px;
  font-weight: 500;
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pd-market-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: .55rem;
}
.pd-market-fact {
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 11.5px;
  color: var(--text-muted);
}
.pd-market-fact--price {
  color: var(--primary-hover);
  font-weight: 700;
  border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
}
.pd-market-fact--cod-yes {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 30%, var(--border));
}
.pd-market-fact--cod-no {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 30%, var(--border));
}
.pd-market-note {
  margin: .55rem 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-muted);
  white-space: pre-line;
}

@media (max-width: 640px) {
  .pd-reco-grid { grid-template-columns: 1fr; }
  .pd-reco-block--verdict { grid-column: auto; }
}