/* MEASURED: the reference product page is THREE columns -
   gallery 752 / summary 752 / sidebar 376 inside an 1881 container,
   i.e. 40% / 40% / 20%. This build had only two. */
.pdp {
  display: grid;
  grid-template-columns: 40fr 40fr 20fr;
  gap: 40px;
  padding-block: 60px;
  align-items: start;
}

/* Gallery ----------------------------------------------------------------- */
/* MEASURED: thumbnails run VERTICALLY down the left of the main image, not in
   a row beneath it. */
.pdp__gallery { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; }
.pdp__stage { min-width: 0; }
/* A product with only one photo renders no thumb rail, which would otherwise
   leave the main image squeezed into the 120px thumbnail column. */
.pdp__stage:only-child { grid-column: 1 / -1; }
.pdp__main { display: block; background: var(--surface-alt); overflow: hidden; }
.pdp__main img { width: 100%; aspect-ratio: 605 / 787; object-fit: cover; }

.pdp__thumbs { display: grid; gap: 10px; align-content: start; }
.pdp__thumb {
  width: 100%;
  border: 1px solid transparent;
  padding: 0;
  background: var(--surface-alt);
}
.pdp__thumb.is-on { border-color: var(--brand); }
.pdp__thumb img { width: 100%; aspect-ratio: 605 / 787; object-fit: cover; }

/* Info -------------------------------------------------------------------- */
/* MEASURED: Tenor Sans 26px, weight 500, letter-spacing normal, black. */
.pdp__title { font-size: 26px; font-weight: 500; letter-spacing: normal; color: #000; margin-bottom: 18px; }
/* MEASURED: Nunito 18px, weight 600, maroon. */
.pdp__price { font-size: 18px; color: var(--brand); font-weight: 600; margin-bottom: 18px; }
.pdp__was { color: var(--ink-muted); text-decoration: line-through; font-weight: 400; margin-right: 10px; font-size: 16px; }
.pdp__save {
  display: inline-block;
  margin-left: 10px;
  background: var(--brand);
  color: #fff;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  padding: 4px 9px;
  vertical-align: middle;
}
.pdp__quote { font-size: 18px; color: var(--brand); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 12px; }
.pdp__quotenote { color: var(--ink-muted); margin-bottom: 22px; max-width: 46ch; }
.pdp__short { color: var(--ink-muted); max-width: 52ch; margin-bottom: 20px; }
/* Missing copy is visibly unfinished rather than quietly absent. */
.pdp__short--todo { color: var(--sale); font-style: italic; }

.pdp__stock { font-size: 11px; letter-spacing: var(--tracking-wide); text-transform: uppercase; margin-bottom: 24px; }
.pdp__stock.is-in { color: #2f6f4f; }
.pdp__stock.is-out { color: var(--sale); }

.pdp__buy { display: flex; gap: 12px; }
.pdp__buy .btn { flex: 1; }
.qty { display: flex; align-items: center; border: 1px solid var(--line); background: var(--surface); }
.qty__btn { width: 42px; height: 100%; font-size: 16px; color: var(--ink-muted); }
.qty__btn:hover { color: var(--brand); }
.qty__input {
  width: 46px;
  text-align: center;
  border: 0;
  background: transparent;
  font: inherit;
  -moz-appearance: textfield;
  appearance: textfield;
}
.qty__input::-webkit-outer-spin-button,
.qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.pdp__wish {
  margin-top: 18px;
  font-size: 11px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
  border-bottom: 1px solid transparent;
}
.pdp__wish:hover { color: var(--brand); border-color: var(--brand); }
.pdp__wish[aria-pressed="true"] { color: var(--brand); }
.pdp__wish[aria-pressed="true"]::before { content: "\2713  "; }

.pdp__meta { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.pdp__meta > div { display: flex; gap: 12px; font-size: 12px; }
.pdp__meta dt {
  flex: none;
  width: 96px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.pdp__meta dd { margin: 0; color: var(--ink-muted); }
.pdp__meta a:hover { color: var(--brand); }

/* Tabs -------------------------------------------------------------------- */
.tabs__nav { display: flex; gap: 8px; border-bottom: 1px solid var(--line); margin-bottom: 30px; flex-wrap: wrap; }
/* MEASURED: Tenor Sans 20px, weight 600, letter-spacing 1px (one of the few
   places the reference does track), padding 20px. */
.tabs__btn {
  padding: 20px 20px 18px;
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;
}
.tabs__btn:first-child { padding-left: 0; }
.tabs__btn.is-on { color: var(--brand); border-color: var(--brand); }

@media (max-width: 991px) {
  .pdp { grid-template-columns: 1fr; gap: 34px; padding-block: 40px; }
}

/* ==========================================================================
   Product layout variants
   Driven by productLayouts.json through pdp-body.njk.
   ========================================================================== */

/* Gallery on the right, info on the left. */
.pdp--gallery-right .pdp__gallery { order: 2; }
.pdp--gallery-right .pdp__info { order: 1; }

/* Gallery below the info, full width. */
.pdp--gallery-bottom { grid-template-columns: 1fr; }
.pdp--gallery-bottom .pdp__gallery { order: 2; max-width: 900px; margin-inline: auto; width: 100%; }
.pdp--gallery-bottom .pdp__info { order: 1; max-width: 900px; margin-inline: auto; width: 100%; }

/* No gallery at all - info only, centred and narrow. */
.pdp--gallery-none { grid-template-columns: 1fr; max-width: 720px; margin-inline: auto; }
.pdp--gallery-none .pdp__gallery { display: none; }

/* Every image stacked down the page rather than one main plus thumbnails. */
.pdp--gallery-stacked .pdp__thumbs,
.pdp--gallery-masonry .pdp__thumbs { display: none; }
.pdp--gallery-stacked .pdp__gallery { display: grid; gap: 10px; }

/* Masonry: main image spans, thumbs tile beneath in a staggered grid. */
.pdp--gallery-masonry .pdp__gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.pdp--gallery-masonry .pdp__main { grid-column: 1 / -1; }

/* Info column tracks the page while the gallery scrolls past it. */
.pdp--sticky .pdp__info {
  position: sticky;
  top: calc(var(--header-h) + 24px);
}

@media (max-width: 991px) {
  .pdp--gallery-right .pdp__gallery { order: 1; }
  .pdp--gallery-right .pdp__info { order: 2; }
  /* Sticky is meaningless once the columns stack. */
  .pdp--sticky .pdp__info { position: static; }
}

/* Rating row --------------------------------------------------------------
   Only rendered once a product has real reviews. */
.pdp__rating { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.stars {
  position: relative;
  font-size: 15px;
  letter-spacing: 2px;
  color: var(--line);
}
.stars::before {
  content: "°5°5°5°5°5";
  position: absolute; left: 0; top: 0;
  width: calc(var(--filled, 0) / 5 * 100%);
  overflow: hidden;
  color: var(--brand);
}
.pdp__reviews { font-size: 14px; text-transform: uppercase; color: var(--ink-muted); }

/* Stock bar ---------------------------------------------------------------
   MEASURED: label Nunito 14px uppercase #222 above a slim green track. */
.stockbar { margin-bottom: 22px; }
.stockbar__label { font-size: 14px; text-transform: uppercase; margin-bottom: 8px; }
.stockbar__label strong { color: var(--brand); }
.stockbar__track { height: 8px; background: var(--surface-alt); overflow: hidden; }
.stockbar__fill {
  display: block;
  height: 100%;
  max-width: 100%;   /* caps the inline width when stockCount exceeds 20 */
  background: repeating-linear-gradient(45deg, #4c9a5a 0 6px, #57ac66 6px 12px);
}

/* Buy Now -----------------------------------------------------------------
   MEASURED: full width, maroon, bone text, Nunito 14px weight 500,
   letter-spacing 1px, 50px tall. */
/* MEASURED: the reference runs the two PDP buttons as a deliberate pair, both
   Nunito 14px/500, uppercase, 45px tall and full width:

     Add to cart   black ground, wipes MAROON on hover
     Buy Now       maroon ground, wipes BLACK on hover

   So this one has to invert the shared wipe - a maroon wipe on a maroon button
   is invisible. letter-spacing was 1px here; the reference is normal
   everywhere, which is the same systematic error fixed elsewhere in this
   build. */
.btn--buynow {
  display: flex;
  width: 100%;
  margin-top: 12px;
  background: var(--brand);
  color: #f0efea;
  letter-spacing: normal;
  font-weight: 500;
}
.btn--buynow::after { background: #000; }

/* Wishlist row ------------------------------------------------------------ */
.pdp__actions { display: flex; gap: 26px; padding: 18px 0; }
.pdp__wish {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 0;
}
.pdp__wish:hover { color: var(--brand); }
.pdp__wish[aria-pressed="true"] { color: var(--brand); }
.pdp__wish[aria-pressed="true"] svg { fill: currentColor; }

/* Meta + estimate ---------------------------------------------------------
   MEASURED: Nunito 14px uppercase, 20px vertical padding, hairline rules. */
.pdp__meta {
  padding: 20px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  text-transform: uppercase;
}
.pdp__meta p { margin: 0 0 8px; color: var(--ink); }
.pdp__meta p:last-child { margin-bottom: 0; }
.pdp__meta span { color: var(--ink-muted); }
.pdp__meta a:hover { color: var(--brand); text-decoration: underline; }

.pdp__estimate { padding-top: 18px; font-size: 14px; text-transform: uppercase; }
.pdp__estimate p { margin: 0 0 8px; color: var(--ink-muted); }
.pdp__estimate span { color: var(--ink); }

/* Sidebar trust box -------------------------------------------------------
   MEASURED: a bordered box of three icon rows, then a promo image below. */
.pdp__side { display: grid; gap: 18px; }
.trust {
  border: 1px solid var(--line);
  background: var(--surface);
  display: grid;
}
.trust li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 18px;
  font-size: 14px;
  line-height: 1.45;
  text-transform: uppercase;
  color: var(--ink);
}
.trust li + li { border-top: 1px solid var(--line); }
.trust svg { flex: none; color: var(--brand); }

.pdp__promo { display: block; width: 100%; }
.pdp__promo img { width: 100%; aspect-ratio: 376 / 470; object-fit: cover; }

@media (max-width: 1399px) {
  .pdp { grid-template-columns: 42fr 58fr; }
  /* The sidebar drops under the summary rather than squeezing all three. */
  .pdp__side { grid-column: 1 / -1; grid-auto-flow: column; gap: 20px; }
  .pdp__promo { display: none; }
}
/* This block must come AFTER the 1399px one: both match on a phone, and the
   later rule wins regardless of breakpoint size. Collapsing to a single column
   here is what stops the gallery and summary sharing a 390px screen. */
@media (max-width: 991px) {
  .pdp { grid-template-columns: 1fr; gap: 34px; padding-block: 40px; }
  .pdp__gallery { grid-template-columns: 84px minmax(0, 1fr); }
  .pdp__side { grid-column: auto; grid-auto-flow: row; }
}
/* MEASURED at 353px: the reference KEEPS the rail vertical on a phone -
   thumbnails 61x79 at x=13, main image 237px at x=90, so a 61px column with a
   16px gap. This build moved them to a row under the image, which does not
   match and costs vertical space on the smallest screens. */
@media (max-width: 575px) {
  .pdp__gallery { grid-template-columns: 61px minmax(0, 1fr); gap: 16px; }
  .pdp__thumbs { grid-auto-flow: row; gap: 12px; }
  .pdp__buy { flex-wrap: wrap; }
  /* MEASURED: title 18px, price 16px on a phone. */
  .pdp__title { font-size: 18px; }
  .pdp__price { font-size: 16px; }
  .pdp__was { font-size: 15px; }
}

/* Sticky add-to-cart bar ----------------------------------------------------
   MEASURED off the reference's .sticky-addToCart: fixed to the bottom, full
   width, 198px tall on a phone, 15px of padding, ground #f0efea, shadow
   0 5px 15px rgba(1,2,4,.15), z-index 5. Hidden it is translated fully down
   (the reference's .sticky-down) and it slides back over 0.4s ease-in-out.
   -------------------------------------------------------------------------- */
.stickybuy {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 5;
  background: #f0efea;
  padding: 15px;
  box-shadow: 0 5px 15px rgba(1, 2, 4, 0.15);
  transform: translateY(100%);
  transition: transform 0.4s ease-in-out;
}
.stickybuy.is-on { transform: translateY(0); }

/* MEASURED: 32 x 24, top right. */
.stickybuy__close {
  position: absolute;
  top: 6px; right: 10px;
  width: 32px; height: 24px;
  display: grid; place-items: center;
  color: var(--ink);
  transition: color var(--dur) var(--ease);
}
.stickybuy__close:hover { color: var(--brand); }

.stickybuy__inner { display: grid; gap: 12px; padding-inline: 0; }
.stickybuy__info { display: flex; align-items: center; gap: 14px; }
/* MEASURED: 75 x 98. */
.stickybuy__thumb { width: 75px; height: 98px; object-fit: cover; flex: none; }
.stickybuy__text { min-width: 0; }
.stickybuy__title {
  margin: 0 0 4px;
  font-size: 15px;
  text-transform: uppercase;
  color: var(--ink);
  /* The bar is a fixed height, so a long name is clamped rather than pushing
     the buttons off the bottom. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.stickybuy__price { margin: 0; font-size: 16px; font-weight: 600; color: var(--brand); }
.stickybuy__was {
  position: relative;
  margin-right: 8px;
  font-weight: 400;
  color: var(--ink-muted);
  text-decoration: none;
}
.stickybuy__was::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: var(--ink);
}

.stickybuy__buy { display: flex; align-items: stretch; gap: 10px; }
.stickybuy__buy .btn { flex: 1; min-height: 46px; padding-inline: 20px; }

/* On a wide screen the bar becomes a single row - there is no reason to stack
   a thumbnail above the buttons when the width is there. */
@media (min-width: 768px) {
  .stickybuy__inner {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 24px;
    padding-inline: var(--gutter);
  }
  .stickybuy { padding-block: 12px; }
}

/* The floating buttons hold the bottom corners, so they must clear the bar
   while it is up. --stickybuy-h is published by product.js from the bar's real
   measured height; the fallback covers the moment before the first reveal. */
body.has-stickybuy .wa-float,
body.has-stickybuy .to-top {
  bottom: calc(var(--stickybuy-h, 186px) + 16px);
}