/* ==========================================================================
   product-detail.css — the storefront Product Detail page.

   Measured off `Product Detail - Desktop` 15253:3799 (1920 x 3059.31 on
   #f8f8f8). Every number below is read from the frame, not inferred.

   Page      Content column 1557 wide at a 181.5 gutter, VERTICAL gap 24,
             padding 24 / 0 / 48 / 0. Order: Breadcrumbs, Product-Overview,
             Product-Specs, a 24px spacer rect, Related-Products.
   Overview  15267:3221 — flat white, SQUARE corners, no stroke, no shadow,
             padding 24, HORIZONTAL gap 32, two equal FILL columns of 738.5.
   Gallery   15253:3836 — a white r10 card, gap 16. Main image FILL x 4:3,
             r8.75. `controls` is ABSOLUTE over it, inset 20 left/right and
             20 up from the image's bottom edge, 40 tall, SPACE_BETWEEN.
             The nav pill is 48 tall on that 40 row, so it overhangs 4px
             top and bottom. Nothing in this column carries a stroke or a
             shadow — verified across all 21 descendants — and the thumbs
             have NO selected state drawn.
   Buy box   15253:3835 — white r10, VERTICAL gap 24, content CENTRED in a
             554-tall column. The title and description boxes are set 12.68
             and 13.04 shorter than their own text, so the 24 gap measured
             after them is really ~11 once the text flows: hence the two
             negative margins below.
   Specs     15267:3245 — white r10, 1px #000@15% INSIDE, padding 24, inner
             column gap 14. Rows are 120 label / FILL value, padding 16/0,
             with a hairline under every row including the last.
   Related   15397:6914 — VERTICAL gap 29, 48px of air above it (24 gap +
             the 24px spacer). A carousel: 272-wide cards, gap 16, track
             1712 in a 1557 viewport so card 6 is half-cut on purpose.

   INSIDE strokes are inset shadows here, never CSS borders — a border would
   add 2px the frame does not have to the fixed 30/44/48px boxes.
   ========================================================================== */

.pdp { display: flex; flex-direction: column; gap: 24px; padding: 24px 0 48px; }

/* Breadcrumbs sit on the #f8f8f8 page, not on a hero, so they take dark ink:
   #364153 for the trail, #101828 for the page you are on. */
.crumbs--dark .crumbs__c { color: var(--text-medium); }
.crumbs--dark .crumbs__c.is-now { color: var(--text-dark); }
.crumbs--dark .crumbs__s { color: var(--text-medium); }
.crumbs--dark .crumbs__c:hover { color: var(--text-dark); }

/* ---------- Product-Overview --------------------------------------------- */

.pdp__over {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
  align-items: start; padding: 24px; background: var(--white);
}
.pdp__over > * { min-width: 0; }

/* ---------- gallery ------------------------------------------------------ */

.pdp__imgs {
  display: flex; flex-direction: column; gap: 16px;
  border-radius: var(--radius-lg); background: var(--white);
}
.pdp__main { position: relative; }
.pdp__hero {
  aspect-ratio: 4 / 3; border-radius: 8.75px; cursor: zoom-in;
  background-size: cover; background-position: center;
  background-color: var(--grey-light);
}

/* 20 in from each side and 20 up from the image's bottom edge */
.pdp__ctl {
  position: absolute; left: 20px; right: 20px; bottom: 20px; height: 40px;
  display: flex; align-items: center; justify-content: space-between;
  pointer-events: none;
}
.pdp__ctl > * { pointer-events: auto; }

.pdp__dots { display: flex; align-items: center; gap: 6px; }
.pdp__dot {
  width: 9px; height: 9px; flex: none; padding: 0; border: 0; cursor: pointer;
  border-radius: var(--radius-xxs); background: var(--black-15);
}
.pdp__dot.is-on { background: var(--wrc-orange); }

/* 94x48 on a 40px row — it centres and overhangs 4px either side. Flat
   white: the frame gives this pill no stroke and no shadow. */
.pdp__nav {
  display: flex; align-items: center; gap: 6px; padding: 4px;
  border-radius: var(--radius-md); background: var(--white);
}
.pdp__nav button {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  border: 0; border-radius: var(--radius-sm); cursor: pointer;
  background: var(--wrc-orange-7); color: var(--wrc-orange);
}
.pdp__nav button:hover { background: var(--wrc-orange); color: var(--white); }

/* three 169.42-wide thumbs in a strip whose content box is 738.5 - 32 = 706.5,
   so each is 23.98% of it. Left-aligned with 16px of side padding — they do
   not stretch to fill the row, exactly as the frame leaves 166px of slack. */
.pdp__thumbs { display: flex; gap: 16px; padding: 0 16px; }
.pdp__thumb {
  flex: 0 0 23.98%; aspect-ratio: 4 / 3; padding: 0; border: 0; cursor: pointer;
  border-radius: 11.44px; background-size: cover; background-position: center;
  background-color: var(--grey-light);
}
.pdp__thumb:hover { opacity: .88; }

/* ---------- buy box ------------------------------------------------------ */

.pdp__buy {
  display: flex; flex-direction: column; justify-content: center; gap: 24px;
  border-radius: var(--radius-lg); background: var(--white);
}

.pdp__meta { display: flex; flex-wrap: wrap; gap: 24px; }
.pdp__pair { display: flex; align-items: center; gap: 5px; }
.pdp__mk { font-size: 16px; line-height: 1.28; color: var(--text-light); }
.pdp__mv { font-size: 16px; font-weight: 500; color: var(--text-dark); }

.pdp__t { font-size: 28px; font-weight: 500; line-height: 1.28; color: var(--text-dark); }
.pdp__d { font-size: 18px; line-height: 1.28; color: var(--text-light); }
/* Figma sets the title box 12.68 and the description box 13.04 shorter than
   their own text, so the 24 gap it reports lands at ~11 once the text is
   allowed to flow. These two pull the column back to what the frame shows. */
.pdp__t { margin-bottom: -13px; }
.pdp__d { margin-bottom: -13px; }

.pdp__del { display: flex; flex-direction: column; gap: 6px; }
.pdp__dk { font-size: 10px; font-weight: 500; color: var(--text-light); }
.pdp__locs { display: flex; flex-wrap: wrap; gap: 8px; }

.pdp__prices { display: flex; align-items: center; gap: 13px; }
/* the frame does NOT strike this through */
.pdp__was { font-size: 20px; color: var(--text-light); }
.pdp__price { font-size: 24px; font-weight: 600; color: var(--wrc-orange); }

.pdp__qty { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pdp__qty .pcard__ib { width: 44px; height: 44px; }

.pdp__acts { display: flex; flex-wrap: wrap; gap: 16px; }
.pdp__add, .pdp__now {
  height: 48px; padding: 0 31px; gap: 8px; border-radius: var(--radius-lg);
  font-size: 16px; font-weight: 600;
}
.pdp__now {
  background: var(--white); color: var(--text-medium); border: 0;
  box-shadow: inset 0 0 0 1px var(--black-15);
}
.pdp__now:hover { background: var(--grey-light); }

/* ---------- specification ------------------------------------------------ */

.pdp__spec {
  display: flex; flex-direction: column; gap: 14px; padding: 24px;
  border-radius: var(--radius-lg); background: var(--white);
  box-shadow: inset 0 0 0 1px var(--black-15);
}
.pdp__intro { font-size: 18px; line-height: 1.28; color: var(--text-dark); }
.pdp__rows { display: flex; flex-direction: column; }
.pdp__row {
  display: flex; gap: 12px; padding: 16px 0;
  border-bottom: 1px solid var(--black-15);
}
.pdp__row dt { flex: 0 0 120px; font-size: 16px; line-height: 1.28; color: var(--text-light); }
.pdp__row dd { flex: 1 1 auto; min-width: 0; font-size: 16px; line-height: 1.28; color: var(--text-dark); }

/* ---------- related products --------------------------------------------- */

/* the 24px spacer rectangle above the section, on top of the column's own 24 */
.pdp__rel { display: flex; flex-direction: column; gap: 29px; margin-top: 24px; }
.pdp__relhd { display: flex; flex-direction: column; gap: 13px; }
.pdp__relhd h2 { font-size: 36px; font-weight: 400; line-height: 1.28; color: var(--text-dark); }
.pdp__relsub { font-size: 18px; line-height: 1.28; color: var(--text-dark); }

.pdp__relwrap { overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
.pdp__relwrap::-webkit-scrollbar { display: none; }
.pdp__reltrack { display: flex; gap: 16px; }
/* min-width:auto would let the card's own content override the 272 basis */
.pdp__reltrack > * { flex: 0 0 272px; min-width: 0; }
.pdp__relctl {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 0 8px;
}

/* ---------- Web/Qty Stepper ----------------------------------------------
   The storefront twin of Form/Number Stepper: a minus / value / plus row,
   120x44 in the PDP buy box and 96x36 on the item-card. Radius 8 with a 1px
   #000@15% INSIDE stroke, and the two buttons sit on #f8f8f8 with no radius
   of their own — the parent's radius plus its clip rounds the outer corners.
*/
.stepper.stepper--web {
  width: 120px; height: 44px; padding: 0; overflow: hidden;
  border: 0; box-shadow: inset 0 0 0 1px var(--black-15);
  border-radius: var(--radius-md); background: var(--white);
}
.stepper.stepper--web.stepper--s { width: 96px; height: 36px; }
/* the cart row draws it 96x32 (cells 30/36/30) */
.stepper.stepper--web.stepper--xs { width: 96px; height: 32px; }
/* pickers.css loads after this file, so every web rule needs the extra
   .stepper class to outrank the 82x32 Rackman base it is replacing. */
.stepper.stepper--web .stepper__pm {
  width: 30px; flex: none; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 0; cursor: pointer;
  background: var(--grey-light); color: var(--text-medium);
}
.stepper.stepper--web .stepper__pm:hover { color: var(--text-dark); }
.stepper.stepper--web .stepper__cell { justify-content: center; padding: 0 4px; }
.stepper.stepper--web .stepper__in { text-align: center; }

/* ==========================================================================
   Phone — `Product Detail - Mobile` 17437:23656, 390 x 3611.

   Content is FILL 390 with padding 16/16/28/16 and gap 20, so the column is
   358 wide. The desktop `Product-Overview` card has no counterpart here at
   all: the gallery and the buy box are plain siblings on a WHITE page, with
   no card, no 24 inset and no two-column split. The specs card is gone the
   same way — rows only, and its intro paragraph is dropped. Related Products
   keeps its 19px title, loses the sub-line, and loses the entire control row.
   ========================================================================== */

@media (max-width: 900px) {
  /* The frame's page is #ffffff, not the desktop #f8f8f8, and it runs edge to
     edge — so bleed past the wrapper gutter and put it back as padding.
     --web-gutter still reads 32 here: mobile.css pins `.wwrap` to a literal
     16px instead of moving the variable, so the bleed has to be the same
     literal 16 or it overhangs the document by 16px each side. */
  .pdp {
    gap: 20px; padding: 16px 16px 28px;
    margin: 0 -16px; background: var(--white);
  }
  /* the frame keeps the trail on one 18px row and shortens the last crumb
     ("Rivet Shelving", not "Rivet Shelving 18\" Deep"), so it truncates */
  .crumbs--dark { flex-wrap: nowrap; }
  .crumbs--dark .crumbs__c, .crumbs--dark .crumbs__s { font-size: 14px; }
  .crumbs--dark .crumbs__c { white-space: nowrap; }
  .crumbs--dark .crumbs__c.is-now {
    min-width: 0; overflow: hidden; text-overflow: ellipsis;
  }

  /* Product-Overview is not drawn on mobile */
  /* align-items:start top-aligns the two desktop columns; carried into a
     flex COLUMN it would shrink both to their content instead, so the stack
     has to ask for stretch back. */
  .pdp__over {
    display: flex; flex-direction: column; align-items: stretch; gap: 20px;
    padding: 0; background: none;
  }

  /* ---- gallery: gap 10, image r10, controls inset 12 ---- */
  .pdp__imgs { gap: 10px; border-radius: 0; background: none; }
  .pdp__hero { border-radius: var(--radius-lg); }
  .pdp__ctl { left: 12px; right: 12px; bottom: 12px; }
  /* three FILL thumbs, 114x82, gap 8, no side padding and a 6px radius */
  .pdp__thumbs { gap: 8px; padding: 0; }
  .pdp__thumb { flex: 1 1 0; aspect-ratio: 114 / 82; border-radius: var(--radius-sm); }

  /* ---- buy box ---- */
  .pdp__buy { gap: 10px; border-radius: 0; background: none; }
  .pdp__meta { gap: 10px; }
  .pdp__mk, .pdp__mv { font-size: 10px; font-weight: 500; }
  .pdp__mv { color: var(--text-medium); }
  /* Medium -> Semi Bold is a real style flip, not a scale */
  .pdp__t { font-size: 15px; font-weight: 600; margin-bottom: 0; }
  .pdp__d { font-size: 13px; margin-bottom: 0; }

  /* the frame shortens this label on mobile */
  .pdp__dk { font-size: 0; }
  .pdp__dk::before { content: "Available from:"; font-size: 10px; }
  .lochip { height: 29px; font-size: 12px; }

  /* baseline-aligned, and only the mobile was-price is struck through */
  .pdp__prices { align-items: baseline; gap: 10px; }
  .pdp__was { font-size: 14px; text-decoration: line-through; }
  .pdp__price { font-size: 19px; font-weight: 400; }

  /* everything in the qty row loses 4px */
  .pdp__qty .pcard__ib { width: 40px; height: 40px; }
  .pdp__qty .stepper.stepper--web { width: 110px; height: 40px; }

  /* the two CTAs stack and fill */
  .pdp__acts { flex-direction: column; gap: 10px; }
  .pdp__add, .pdp__now { width: 100%; font-size: 14px; }

  /* ---- specification: the card is gone, the intro with it ---- */
  .pdp__spec { padding: 0; gap: 0; border-radius: 0; background: none; box-shadow: none; }
  .pdp__intro { display: none; }
  .pdp__row { padding: 12px 0; }
  .pdp__row dt { flex: 0 0 96px; font-size: 13px; }
  .pdp__row dd { font-size: 13px; }

  /* ---- related: title only, and no controls ---- */
  .pdp__rel { gap: 20px; margin-top: 0; }
  .pdp__relhd h2 { font-size: 19px; }
  .pdp__relsub, .pdp__relctl { display: none; }
  .pdp__reltrack { gap: 14px; }
}