/* assets/css/product.css */

/* Product detail page (loaded after catalogue.css through $page['styles']).
   --swatch is the chosen colour's hex, set on .pdp and updated by
   product.js, so the gallery tint, tag and sticky bar follow the colour.
   Layout (product page & Home refinements spec §1.1): phones one column;
   from 768 px the gallery beside the buy box; from 1024 px a thumbnail
   rail, the photo and a buy box that stays in view below the sticky header.
   Nothing is laid over a purchase control: the only absolutely placed
   layers are the gallery's own tags, arrows and dots, the lightbox and the
   sticky phone bar (z-index: var(--z-drawer), shown only while the buy
   buttons are off screen). */

/* =========================================================
   Layout
   ========================================================= */

/* A card in "Complete the set" scrolls the page back here: below the sticky header. */
.pdp { padding: var(--space-3) 0 var(--space-8); scroll-margin-top: var(--header-height); }
.pdp-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
@media (min-width: 768px) {
  .pdp-layout {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
    grid-template-areas: "gallery panel" "details details";
    align-items: start;
  }
  .pdp-gallery { grid-area: gallery; }
  .pdp-panel { grid-area: panel; }
  .pdp-details { grid-area: details; }
}
@media (min-width: 1024px) {
  .pdp-layout {
    grid-template-columns: minmax(0, 1fr) clamp(340px, 30vw, 380px);
    grid-template-areas: "gallery panel" "details panel";
    column-gap: var(--space-7);
  }
}
/* The buy box stays in view below the sticky header while the gallery
   (and the tabs under it) scroll past, on a screen tall enough to hold it;
   on a shorter one it scrolls with the page, so nothing in it is ever out
   of reach (ruling P7). product.js sets --pdp-sticky-top when the box is
   taller than the room below the header, so it sticks higher and its
   lower part stays in view (the options always stay below the header). */
@media (min-width: 1024px) and (min-height: 820px) {
  .pdp-panel { position: sticky; top: var(--pdp-sticky-top, calc(var(--header-height) + var(--space-4))); }
}

/* =========================================================
   Gallery
   ========================================================= */

/* Phones: the photo, its dots. From 768 px a row of thumbnails under it;
   from 1024 px a rail of thumbnails beside it. */
.pdp-gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
@media (min-width: 1024px) {
  .pdp-gallery { grid-template-columns: 76px minmax(0, 1fr); gap: var(--space-4); }
  /* The rail's column stays when a colour has one slide (its thumbnails hidden), so the photo box is the same size for every colour. */
  .pdp-gallery > .gallery-main { grid-column: 2; }
}

/* A box of a fixed shape (square on phones, 4:5 beside the buy box at
   768–1023 px, square again from 1024 px, never taller than the screen), so
   a colour swap shifts nothing. */
.gallery-main {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: calc(var(--radius-lg) * 1.5);
  background: var(--sigma-bg-section);
}
@media (min-width: 768px) {
  .gallery-main { aspect-ratio: 4 / 5; }
}
@media (min-width: 1024px) {
  .gallery-main { aspect-ratio: 1 / 1; max-height: max(480px, calc(100vh - var(--header-height) - var(--space-7))); }
}

/* The slides: one row that scrolls sideways and snaps to each slide (a
   swipe on a phone, a trackpad on a computer; the arrows and thumbnails
   scroll it too). */
.gallery-track {
  position: absolute;
  inset: 0;
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-slide {
  display: flex;
  flex: 0 0 100%;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  /* A thumbnail link without JavaScript lands the slide below the sticky header. */
  scroll-margin-top: calc(var(--header-height) + var(--space-4));
}
/* The colour's own slides take its wash (its tint panel when it has no
   photo); a close-up keeps its own colours. */
.gallery-slide.swatch-wash { transition: background-color var(--dur-slow) var(--ease-out); }
.gallery-slide.is-closeup { background: var(--sigma-white); }
.gallery-slide .media-placeholder { width: 32%; }
.gallery-open {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
/* Inside the slide, which clips, the focus ring is drawn inward. */
.gallery-open:focus-visible { outline-offset: -3px; }
.gallery-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
/* Only photos swapped in by product.js fade in; the first photo paints at
   once so it is not held back as the page's largest element. */
.gallery-slide img.is-entering { animation: pdp-fade var(--dur-slow) var(--ease-out); }
@keyframes pdp-fade {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: none; }
}

.gallery-tag,
.gallery-hint {
  position: absolute;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px var(--space-3);
  border-radius: 999px;
  background: var(--sigma-white);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.8rem;
  color: var(--sigma-text-dark);
  pointer-events: none;
}
.gallery-tag { top: var(--space-4); left: var(--space-4); }
.gallery-tag::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--swatch, var(--sigma-bg-hero));
  box-shadow: 0 0 0 1px var(--sigma-border);
}
.gallery-hint { bottom: var(--space-4); right: var(--space-4); }
.gallery-hint .icon { width: 14px; height: 14px; }
.hint-mouse { display: none; }
@media (hover: hover) and (pointer: fine) {
  .hint-mouse { display: inline; }
  .hint-touch { display: none; }
}

/* In-box zoom (mouse only): the photo shown scales up around the cursor,
   whose position product.js writes to --zoom-x / --zoom-y. Only transform
   is animated, so the zoomed view tracks the cursor without lag. */
.gallery-slide img { transition: transform var(--dur-base) var(--ease-out); }
.gallery-main.is-magnified .gallery-slide.is-current img {
  transform: scale(2.2);
  transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%);
}
.gallery-main.is-magnified .gallery-open { cursor: crosshair; }
.gallery-main.is-magnified :is(.gallery-tag, .gallery-hint, .gallery-step, .gallery-dots) { opacity: 0; }
.gallery-tag,
.gallery-hint,
.gallery-dots { transition: opacity var(--dur-fast) var(--ease-out); }
.gallery-hint[hidden],
.gallery-step[hidden],
.gallery-dots[hidden] { display: none; }

.gallery-step {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch);
  height: var(--touch);
  border: 0;
  border-radius: 50%;
  background: var(--sigma-white);
  color: var(--sigma-navy);
  box-shadow: var(--shadow-md);
  transform: translateY(-50%);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.gallery-step:hover { transform: translateY(-50%) scale(1.06); }
.gallery-prev { left: var(--space-3); }
.gallery-next { right: var(--space-3); }
.gallery-step .icon { width: 20px; height: 20px; }
/* With a mouse the arrows appear on hover or focus; touch screens keep them. */
@media (hover: hover) {
  .gallery-step { opacity: 0; }
  .gallery-main:hover .gallery-step,
  .gallery-step:focus-visible { opacity: 1; }
}

/* The phone's dots: where the swipe is (the position is read out from the
   hidden "1 / N" line); thumbnails take over from 768 px. */
.gallery-dots {
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  z-index: 1;
  display: flex;
  gap: 6px;
  transform: translateX(-50%);
  pointer-events: none;
}
.gallery-dot { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--sigma-navy) 30%, transparent); }
.gallery-dot.is-current { background: var(--sigma-navy); }
@media (min-width: 768px) {
  .gallery-dots { display: none; }
}

/* Thumbnails: hidden on phones (the dots and the swipe instead); a row
   under the photo from 768 px; a rail beside it from 1024 px, as tall as
   the photo and scrolling when there are more (contain: size keeps the
   rail from setting the row's height). */
.gallery-thumbs { display: none; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) {
  .gallery-thumbs { display: flex; gap: var(--space-2); overflow-x: auto; }
  .gallery-thumbs > li { flex: 0 0 64px; }
}
@media (min-width: 1024px) {
  .gallery-thumbs { order: -1; flex-direction: column; overflow: hidden auto; contain: size; }
  .gallery-thumbs > li { flex: 0 0 auto; }
}
.gallery-thumbs[hidden] { display: none; }
.gallery-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 2px solid var(--sigma-border);
  border-radius: var(--radius-md);
  background: var(--sigma-white);
  aspect-ratio: 4 / 5;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.gallery-thumb:hover { border-color: var(--sigma-text-light); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: contain; }
.gallery-thumb .media-placeholder { width: 50%; }
.gallery-thumb:is([aria-current="true"], [aria-pressed="true"]) { border-color: var(--sigma-primary); }
/* Inside the scrolling row the ring is drawn inward, so the row cannot clip it. */
.gallery-thumb:focus-visible { outline: 3px solid var(--sigma-blue); outline-offset: -3px; }

/* =========================================================
   Buy box (spec §1.3): the range, the name, the short description, the
   price and the stock, the place kept for Sets batch 2's "Buy as", the
   colour, the size, the quantity with Add to cart and Buy now, the
   service points, the help line, Share. A plain column: no card, nothing
   laid over it.
   ========================================================= */

.pdp-panel { min-width: 0; }
.pdp-panel > .eyebrow { margin: 0 0 var(--space-2); }
.pdp-title { margin: 0 0 var(--space-2); font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); line-height: 1.1; }
.pdp-lede { margin: 0 0 var(--space-4); font-size: 1.05rem; }
.pdp-price-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); margin-bottom: var(--space-5); }
.pdp-price-row .product-price { margin: 0; font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem); }
/* The owner's real MRP (MRP spec §3): smaller and quieter than the price, only the amount struck. */
.pdp-mrp { margin: 0; font-family: var(--font-ui); font-size: 1rem; color: var(--sigma-text-medium); }
/* The "65% off" badge beside the struck MRP (owner decision 68): white on the primary pink passes AA. */
.pdp-off {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--sigma-primary);
  color: var(--sigma-white);
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  vertical-align: middle;
}
.pdp-off:empty { display: none; }
.sticky-atc-mrp .pdp-off { margin-left: var(--space-1); padding: 0 6px; font-size: 0.75rem; }
.pdp-stock {
  padding: 6px var(--space-3);
  border: 1px solid var(--sigma-border);
  border-radius: 999px;
  background: var(--sigma-white);
}

.pdp .option-group { margin-bottom: var(--space-5); }
.pdp .swatch-options { gap: var(--space-1); }
/* A 28 px dot in a 44 px target; the chosen one ringed in dark (white gap,
   then the ring: 3:1 and more against the page). */
.pdp .swatch-option { padding: 8px; }
.pdp .swatch-dot { width: 28px; height: 28px; }
.pdp .swatch-check { width: 14px; height: 14px; }
.pdp .swatch-option input:checked + .swatch-dot { box-shadow: 0 0 0 2px var(--sigma-white), 0 0 0 4px var(--sigma-text-dark); }

/* Size cards: the name with its inches, then the price; a size out of
   stock is greyed with "Out of stock" and can still be chosen, to see it. */
.pdp-sizes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pdp-sizes .size-option {
  min-height: 64px;
  padding: var(--space-2);
  border-radius: var(--radius-md);
}
.pdp-sizes .size-option.is-unavailable { background: var(--sigma-bg-section); }

/* "Buy as" (sets spec §3), while the model has an offered set: Single,
   Set of 2, Set of 3 as one row of equal choices (Set of 2's pairs the
   same), "Same colour for all", a row per suitcase with its colours, the
   saving line and the sentence, the set's own quantity and buttons. Parts
   that do not apply are hidden with the hidden attribute: the rule below
   wins over each part's own display. Everything changes inside the buy
   box, below the choice, so the choice and the photo never move. */
.pdp-panel [hidden] { display: none; }
.buy-options { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-2); }
.buy-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch);
  padding: var(--space-2);
  border: 1px solid var(--sigma-border);
  border-radius: var(--radius-sm);
  background: var(--sigma-white);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.9rem;
  line-height: 1.25;
  color: var(--sigma-text-dark);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.buy-option:hover { border-color: var(--sigma-text-light); }
.buy-option:has(input:checked) { border-color: var(--sigma-primary); box-shadow: 0 0 0 1px var(--sigma-primary); }
.buy-option:has(input:focus-visible) { outline: 3px solid var(--sigma-blue); outline-offset: 2px; }
.pdp .pdp-set-row { margin-bottom: var(--space-3); }
.pdp .pdp-set-row legend { margin-bottom: var(--space-1); }
.pdp-set-same {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch);
  margin-bottom: var(--space-2);
  font-family: var(--font-ui);
  color: var(--sigma-text-dark);
  cursor: pointer;
}
.pdp-set-same input { width: 20px; height: 20px; margin: 0; accent-color: var(--sigma-primary); }
.pdp-set-status p { margin: 0 0 var(--space-2); }
.pdp-set-saving { font-family: var(--font-ui); font-weight: 500; color: var(--sigma-text-dark); }
.pdp-set-problem { color: var(--sigma-text-medium); }

/* Stepper keeps its own height (matching the 48px buttons) instead of
   stretching when the buttons wrap below it. */
.pdp-atc { margin: 0; align-items: flex-start; }
.pdp-atc .qty-stepper button { height: 48px; }
.pdp-atc .atc-buttons { flex-basis: 240px; }
.pdp-atc .atc-buttons .btn { flex-basis: 110px; padding-inline: var(--space-3); }
.pdp-panel .product-sku { margin: var(--space-3) 0 0; font-size: 0.85rem; color: var(--sigma-text-medium); }
.product-sku[hidden] { display: none; }

/* Service points (service_points(), shared with Home's trust strip): one
   line each, linked to its page once that page exists. */
.pdp-points {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-5) 0 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--sigma-border);
  list-style: none;
}
.pdp-point { display: flex; align-items: center; gap: var(--space-3); min-height: 32px; font-family: var(--font-ui); font-size: 0.92rem; color: var(--sigma-text-dark); }
.pdp-point-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--sigma-bg-section);
  color: var(--sigma-primary);
}
.pdp-point-icon .icon { width: 18px; height: 18px; }
.pdp-point a { display: inline-flex; align-items: center; min-height: var(--touch); color: var(--sigma-text-dark); text-decoration: underline; text-underline-offset: 3px; }

/* The help line: today's help card made compact (the WhatsApp message
   carries the chosen colour and size). */
.pdp-help {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--sigma-blue) 8%, var(--sigma-white));
}
.pdp-help .pdp-help-title { margin: 0; font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem; color: var(--sigma-text-dark); }
.pdp-help .pdp-help-actions { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); margin: 0; }
.pdp-help-actions a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch);
  font-family: var(--font-ui);
  font-weight: 500;
  color: var(--sigma-primary-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pdp-help-actions .icon { width: 16px; height: 16px; }

.product-share { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.product-bulk { margin-top: var(--space-4); }

/* =========================================================
   Tabs under the gallery (spec §1.4): Features, Specifications, Colours,
   Sizes, Delivery & returns. Without JavaScript every panel shows under
   its heading; home/tabs.js builds the tab list (.pdp-tabs, .pdp-tab).
   ========================================================= */

/* The address's # opens a tab and scrolls here: below the sticky header. */
.pdp-details { min-width: 0; scroll-margin-top: calc(var(--header-height) + var(--space-4)); }
.pdp-tabs {
  display: flex;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
  overflow-x: auto;
  border-bottom: 1px solid var(--sigma-border);
  scrollbar-width: thin;
}
.pdp-tab {
  flex-shrink: 0;
  min-height: var(--touch);
  padding: 0;
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 1rem;
  color: var(--sigma-text-medium);
  cursor: pointer;
}
.pdp-tab:hover { color: var(--sigma-text-dark); }
.pdp-tab[aria-selected="true"] { border-bottom-color: var(--sigma-primary); color: var(--sigma-primary-dark); }
/* Inside the scrolling list the ring is drawn inward, so the list cannot clip it. */
.pdp-tab:focus-visible { outline: 3px solid var(--sigma-blue); outline-offset: -3px; }
.pdp-tab-panel + .pdp-tab-panel { margin-top: var(--space-7); }
.is-tabbed > .pdp-tab-panel + .pdp-tab-panel { margin-top: 0; }
.pdp-tab-title { margin: 0 0 var(--space-4); font-size: 1.5rem; }
.pdp-tab-lede { margin: 0 0 var(--space-4); font-size: 1.15rem; }

/* Features: the long description as the intro, the verified features as
   icon cards, the close-ups with their lines. */
.pdp-intro { max-width: 72ch; margin-bottom: var(--space-5); }
.pdp-intro p { margin: 0 0 var(--space-3); }
.pdp-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
@media (min-width: 600px) {
  .pdp-feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.pdp-feature {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--sigma-bg-section);
}
.pdp-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--sigma-white);
  color: var(--sigma-primary);
}
.pdp-feature-icon .icon { width: 22px; height: 22px; }
.pdp-feature-label { font-family: var(--font-ui); font-weight: 500; line-height: 1.35; color: var(--sigma-text-dark); }
.pdp-closeups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: var(--space-5) 0 0; padding: 0; list-style: none; }
@media (min-width: 600px) {
  .pdp-closeups { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.pdp-closeup { margin: 0; }
.pdp-closeup img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-md); background: var(--sigma-white); }
.pdp-closeup figcaption { display: grid; gap: 2px; margin-top: var(--space-2); font-size: 0.92rem; }
.pdp-closeup-label { font-family: var(--font-ui); font-weight: 500; color: var(--sigma-text-dark); }
.pdp-closeup-line { color: var(--sigma-text-medium); }

/* Specifications and Delivery & returns: a term beside its value. */
.pdp-facts { display: grid; margin: 0; border-top: 1px solid var(--sigma-border); }
.pdp-facts > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--sigma-border); }
.pdp-facts dt { color: var(--sigma-text-medium); }
.pdp-facts dd { margin: 0; color: var(--sigma-text-dark); overflow-wrap: anywhere; }
.pdp-tab-links { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); margin: var(--space-4) 0 0; }
.pdp-tab-links a { display: inline-flex; align-items: center; gap: 2px; min-height: var(--touch); font-family: var(--font-ui); font-weight: 500; color: var(--sigma-primary-dark); }
.pdp-tab-links .icon { width: 18px; height: 18px; }

/* Sizes: a row per size, its price and the owner's lines. */
.pdp-size-rows { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
@media (min-width: 600px) {
  .pdp-size-rows { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.pdp-size-row { padding: var(--space-4); border: 1px solid var(--sigma-border); border-radius: var(--radius-md); background: var(--sigma-white); }
.pdp-size-row h3 { margin: 0; font-size: 1.15rem; }
.pdp-size-price { margin: var(--space-1) 0 0; font-family: var(--font-ui); font-weight: 500; color: var(--sigma-text-medium); }
.pdp-size-row .size-guide { display: grid; gap: var(--space-1); margin: var(--space-3) 0 0; font-size: 0.92rem; }
.pdp-size-row .size-guide div { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); }
.pdp-size-row .size-guide dt { font-family: var(--font-ui); font-weight: 500; color: var(--sigma-text-dark); }
.pdp-size-row .size-guide dd { margin: 0; color: var(--sigma-text-medium); }

/* The size choice's "Size guide": beside the legend, opening the Sizes tab. */
.pdp-size-group legend { float: left; }
.pdp-size-guide {
  float: right;
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  font-family: var(--font-ui);
  font-size: 0.9rem;
  color: var(--sigma-primary-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pdp-size-group .pdp-sizes { clear: both; }

/* =========================================================
   Every colour
   ========================================================= */

.pdp-colour-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
@media (min-width: 600px) {
  .pdp-colour-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
}
@media (min-width: 1100px) {
  .pdp-colour-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.pdp-colour-tile {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 2px solid var(--sigma-border);
  border-radius: var(--radius-lg);
  background: var(--sigma-white);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.pdp-colour-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.pdp-colour-tile[aria-current="true"] { border-color: var(--sigma-primary); }
.pdp-colour-media { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 5; }
.pdp-colour-media img { width: 100%; height: 100%; object-fit: contain; }
.pdp-colour-name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3) 0;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--sigma-text-dark);
}
.pdp-colour-state { padding: 2px var(--space-3) var(--space-3); font-family: var(--font-ui); font-size: 0.8rem; color: var(--sigma-text-medium); }
.pdp-colour-tile[aria-current="true"] .pdp-colour-state { color: var(--sigma-primary-dark); }
.pdp-colour-tile[aria-current="true"] .pdp-colour-state::before { content: "Selected · "; }

/* Complete the set: one list of cards per colour; only the colour shown is not hidden (product.js). */
.pdp-sets [hidden] { display: none; }

/* =========================================================
   The other model
   ========================================================= */

.pdp-other-list { display: grid; gap: var(--space-5); }
/* Positioned so the name's .stretched-link covers this card only, not the purchase controls above it. */
.pdp-other { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; border-radius: var(--radius-lg); }
@media (min-width: 768px) {
  .pdp-other { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; }
}
.pdp-other-media { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; }
@media (min-width: 768px) {
  .pdp-other-media { aspect-ratio: auto; min-height: 340px; }
}
.pdp-other-media img { width: 100%; height: 100%; max-height: 420px; object-fit: contain; }
.pdp-other-body { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--space-2); padding: var(--space-5); }
@media (min-width: 768px) {
  .pdp-other-body { padding: var(--space-7); }
}
.pdp-other-body h3 { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.pdp-other-body p { margin: 0; }
.pdp-other-body .btn { margin-top: var(--space-3); gap: var(--space-2); }
.pdp-other-body .btn .icon { width: 18px; height: 18px; }

/* =========================================================
   Sticky add-to-cart bar (phones and tablets) and lightbox
   ========================================================= */

/* Shown below 1024 px whenever the main buttons are off screen. */
.sticky-atc {
  position: fixed;
  inset: auto 0 0;
  z-index: var(--z-drawer);
  padding: var(--space-3) 0;
  background: var(--sigma-white);
  border-top: 1px solid var(--sigma-border);
  box-shadow: var(--shadow-lg);
  transform: translateY(110%);
  transition: transform var(--dur-base) var(--ease-out);
}
.sticky-atc.is-visible { transform: translateY(0); }
.sticky-atc-inner { display: flex; align-items: center; gap: var(--space-3); }
.sticky-atc-dot { flex-shrink: 0; width: 20px; height: 20px; }
.sticky-atc-text { flex: 1; min-width: 0; }
.sticky-atc-text p { margin: 0; }
.sticky-atc-variant { overflow: hidden; font-size: 0.85rem; color: var(--sigma-text-medium); white-space: nowrap; text-overflow: ellipsis; }
.sticky-atc-price { font-family: var(--font-ui); font-weight: 500; color: var(--sigma-text-dark); }
.sticky-atc-mrp { margin-left: var(--space-1); font-size: 0.85rem; font-weight: 400; color: var(--sigma-text-medium); white-space: nowrap; }
.sticky-atc .btn { min-height: 48px; gap: var(--space-2); }
.sticky-atc .btn .icon { width: 18px; height: 18px; }
@media (min-width: 1024px) {
  .sticky-atc { display: none; }
}

/* Lightbox (<dialog>: focus is trapped and Esc closes natively). */
.lightbox {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--sigma-white);
}
.lightbox::backdrop { background: var(--sigma-black); }
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox-stage { width: 100%; height: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.lightbox-stage img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: zoom-in;
  transition: transform var(--dur-base) var(--ease-out);
}
.lightbox-stage.is-zoomed img { transform: scale(2.2); cursor: zoom-out; }
/* While zoomed, a finger drag pans the photo instead of scrolling. */
.lightbox-stage.is-zoomed { touch-action: none; }
.lightbox-btn {
  position: absolute;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--sigma-border);
  border-radius: 50%;
  background: var(--sigma-white);
  color: var(--sigma-navy);
  box-shadow: var(--shadow-sm);
}
.lightbox-btn[hidden] { display: none; }
.lightbox-close { top: var(--space-4); right: var(--space-4); }
.lightbox-prev { left: var(--space-4); top: 50%; transform: translateY(-50%); }
.lightbox-next { right: var(--space-4); top: 50%; transform: translateY(-50%); }

@media (prefers-reduced-motion: reduce) {
  .gallery-slide img.is-entering { animation: none; }
  .pdp-colour-tile:hover { transform: none; }
  .gallery-slide img { transition: none; }
  .gallery-step:hover { transform: translateY(-50%); }
}

/* Bulk & corporate orders (while bulk enquiries are open): a band of its own below the other model (spec §1.5), so Add to cart stays the
   buy box's one main action. The card is today's light block with its small navy button. */
.pdp-bulk-band { padding: var(--space-7) 0; }
.pdp-bulk {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--sigma-yellow) 12%, var(--sigma-white));
}
.pdp-bulk-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--sigma-white);
  color: var(--sigma-navy);
}
.pdp-bulk-icon .icon { width: 22px; height: 22px; }
.pdp-bulk-title { margin: 0 0 var(--space-1); font-size: 1.1rem; }
.pdp-bulk-text p { margin: 0; font-size: 0.95rem; }
.pdp-bulk-link { min-height: var(--touch); margin-top: var(--space-3); background: var(--sigma-navy); color: var(--sigma-white); }
.pdp-bulk-link:hover { background: var(--sigma-black); }