/* ==========================================================================
   PRODUCT DETAIL PAGE
   Two-column stage: sticky media on the left, scrolling detail on the right.
   The CYO swatch rail and 3D flip land in Sprint 4 and hook into .stage below.
   ========================================================================== */

.pdp {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  padding-bottom: var(--sp-7);
}

@media (min-width: 1024px) {
  .pdp {
    grid-template-columns: 58fr 42fr;
    gap: var(--sp-7);
    align-items: start;
  }
}

/* ---- Media stage ----------------------------------------------------- */

.stage { position: relative; }

@media (min-width: 1024px) {
  .stage { position: sticky; top: 100px; }
}

.stage__main {
  position: relative;
  aspect-ratio: 1;
  background: var(--cream-deep);
  border-radius: var(--radius-card);
  overflow: hidden;
  cursor: zoom-in;
}

.stage__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--dur-component) var(--ease-brand),
              transform var(--dur-section) var(--ease-brand);
}

/* Excludes .flip__face: the back face already carries a rotateY, and a scale()
   here would overwrite it and un-mirror the flipped box. */
.stage__main.is-zoomed img:not(.flip__face) { transform: scale(1.9); cursor: zoom-out; }
.stage__main.is-zoomed .flip { transform: scale(1.9); cursor: zoom-out; }
.stage__main.is-zoomed .flip.is-flipped { transform: scale(1.9) rotateY(180deg); }

.stage__badges {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-1);
}

/* Thumbnail rail: horizontal snap on touch, wraps on desktop */
.stage__rail {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--sp-2);
}

.stage__thumb {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-input);
  overflow: hidden;
  background: var(--cream-deep);
  cursor: pointer;
  scroll-snap-align: start;
  transition: border-color var(--dur-micro) var(--ease-brand);
}

.stage__thumb img { width: 100%; height: 100%; object-fit: cover; }
.stage__thumb.is-on { border-color: var(--tbs-green); }


/* ---- Detail column -------------------------------------------------- */

.pdp-info > * + * { margin-top: var(--sp-4); }

.pdp-info__eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-mute);
}

.pdp-info__eyebrow a { color: inherit; text-decoration: none; }


.pdp-info h1 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-display);
  margin: 0;
}

.pdp-info__lede {
  font-size: 1.0625rem;
  color: var(--ink-mute);
  line-height: 1.55;
  margin: 0;
}

.price-row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  flex-wrap: wrap;
  font-variant-numeric: tabular-nums;
  padding-block: var(--sp-2);
}

.price-row__now { font-size: 1.75rem; font-weight: 700; color: var(--tbs-green); }
.price-row__was { font-size: 1.0625rem; color: var(--ink-mute); text-decoration: line-through; }

.price-row__off {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--white);
  background: var(--danger);
  padding: 3px 9px;
  border-radius: var(--radius-pill);
}

/* Chargeable packaging is already inside the price beside it. Stated plainly so
   the customer is not surprised by it later on the quote. */
.price-row__pack {
  flex-basis: 100%;
  font-size: 0.76rem;
  color: var(--ink-mute);
}

.price-row__pack[hidden] { display: none; }

.price-note { font-size: 0.82rem; color: var(--ink-mute); margin: 0; }

.pdp-cta {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding-block: var(--sp-3);
}

.pdp-cta .b { flex: 1 1 180px; }

/* ---- Quantity slabs ------------------------------------------------- */

.slabs {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  padding: var(--sp-4);
  background: var(--tbs-green-soft);
  border-radius: var(--radius-card);
}

.slabs__label {
  flex: 1 1 100%;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--tbs-green);
  margin-bottom: var(--sp-1);
}

.slab {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--tbs-green);
  background: var(--white);
  border: 1px solid rgba(0, 75, 52, .16);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
}

.slabs__note { flex: 1 1 100%; font-size: 0.82rem; color: var(--tbs-green); margin: 0; }

/* ---- Components ("What's inside") ---------------------------------- */

.inside {
  border-top: 1px solid var(--line);
  padding-top: var(--sp-5);
}

.inside h2 {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--tbs-green);
  margin-bottom: var(--sp-4);
}

.inside ul { list-style: none; margin: 0; padding: 0; }

.inside li {
  display: flex;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--line);
}

.inside li:last-child { border-bottom: 0; }

.inside__thumb {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: var(--radius-input);
  background: var(--cream-deep);
}

.inside__name { font-weight: 600; font-size: 0.9375rem; }
.inside__size { font-size: 0.82rem; color: var(--ink-mute); }
.inside__desc { font-size: 0.85rem; color: var(--ink-mute); margin: 4px 0 0; line-height: 1.45; }

.inside__qty {
  margin-left: auto;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--tbs-green);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---- Accordions (details / sustainability) ------------------------- */

.acc {
  border-bottom: 1px solid var(--line);
}

.acc > summary {
  cursor: pointer;
  list-style: none;
  padding-block: var(--sp-4);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
}

.acc > summary::-webkit-details-marker { display: none; }
.acc > summary::after { content: "+"; color: var(--ink-mute); font-size: 1.125rem; }
.acc[open] > summary::after { content: "\2212"; }
.acc[open] > summary { color: var(--tbs-green); }

.acc__body {
  padding-bottom: var(--sp-4);
  color: var(--ink-mute);
  font-size: 0.9375rem;
  line-height: 1.6;
  white-space: pre-line;
}

/* ---- Sustainability callout --------------------------------------- */

.eco {
  background: var(--tbs-green-soft);
  border-left: 3px solid var(--tbs-green);
  padding: var(--sp-4);
  border-radius: var(--radius-card);
  font-size: 0.9rem;
  color: var(--tbs-green-deep);
  line-height: 1.55;
}

.eco strong { display: block; margin-bottom: var(--sp-1); }

/* ---- Share row ---------------------------------------------------- */

.share-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}

.share-row__label { font-size: 0.82rem; color: var(--ink-mute); margin-right: var(--sp-2); }

.share-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 40px;
  padding: 8px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}


.share-btn--wa { background: #25D366; border-color: #25D366; color: #06331A; }

/* ---- Sticky mobile bar ------------------------------------------- */

.pdp-sticky {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-sticky);
  background: var(--white);
  border-top: 1px solid var(--line);
  box-shadow: var(--shadow-sticky);
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

@media (min-width: 1024px) {
  .pdp-sticky { display: none; }
}

.pdp-sticky__price {
  font-weight: 700;
  color: var(--tbs-green);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pdp-sticky .b { flex: 1; min-height: 44px; padding-block: 11px; }

/* Give the page room so the sticky bar never covers the last element */
@media (max-width: 1023px) {
  .pdp-tail { padding-bottom: 84px; }
}

/* ---- Lightbox ---------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(0, 48, 31, .94);
  display: none;
  place-items: center;
  padding: var(--sp-5);
}

.lightbox.is-on { display: grid; }
.lightbox img { max-width: 100%; max-height: 88vh; object-fit: contain; }

.lightbox__close {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: var(--white);
  font-size: 1.5rem;
  cursor: pointer;
}

/* Pointer devices only — see the note at the end of base.css. */
@media (hover: hover) {
    /* Ungated, this fought .stage__thumb.is-on (line 89): tapping a thumbnail
     left it showing the grey hover border instead of the green selected one,
     so the gallery lost track of which image was showing. */
    .stage__thumb:hover {
        border-color: var(--line);
    }

    .pdp-info__eyebrow a:hover {
        color: var(--tbs-green);
        text-decoration: underline;
    }

    .share-btn:hover {
        border-color: var(--tbs-green);
        color: var(--tbs-green);
    }

    .share-btn--wa:hover {
        color: #06331A;
        border-color: #1FB855;
    }
}

/* ---- What's inside: compact -------------------------------------------
   Three components took nearly 300px because each one was a two-line block
   with generous padding. The name and the size are one fact, not two, so
   they sit on one line and the list reads as a contents label rather than
   a second product grid.

   Prefixed with .pdp-info to outrank the existing rules on specificity
   rather than with !important.
   ---------------------------------------------------------------------- */

.pdp-info .inside {
    margin-top: var(--sp-4);
    margin-bottom: var(--sp-4);
}

    .pdp-info .inside h2 {
        font-family: inherit;
        font-size: 0.74rem;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--ink-mute);
        margin: 0 0 var(--sp-2);
    }

    .pdp-info .inside ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .pdp-info .inside li {
        display: flex;
        align-items: center;
        gap: var(--sp-3);
        padding: 7px 0;
        border-bottom: 1px solid var(--line);
    }

        .pdp-info .inside li:last-child {
            border-bottom: 0;
        }

        /* The unclassed wrapper holding name, size and description. */
        .pdp-info .inside li > div {
            display: flex;
            align-items: baseline;
            flex-wrap: wrap;
            gap: 4px 10px;
            flex: 1 1 auto;
            min-width: 0;
        }

.pdp-info .inside__name {
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 0;
}

.pdp-info .inside__size {
    font-size: 0.8rem;
    color: var(--ink-mute);
    margin: 0;
}

/* Its own line when it exists, so a long description never squeezes the size. */
.pdp-info .inside__desc {
    flex-basis: 100%;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--ink-mute);
    margin: 2px 0 0;
}

.pdp-info .inside__thumb {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: 4px;
    object-fit: cover;
}

.pdp-info .inside__qty {
    flex: 0 0 auto;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--tbs-green);
}
/* ---- Stage: the image and its thumbnails on one screen ----------------
   The stage is square and fills the column, so on a 1280px layout it was
   965px tall - taller than most laptop screens. The thumbnail rail was
   never misplaced, it was just pushed past the fold by the image above it.

   Cap the image by the space actually available instead of by the column,
   and it shrinks only as far as it needs to. svh, not vh: on a phone vh
   includes the browser toolbar that is not really there.
   ---------------------------------------------------------------------- */

.stage__main {
    width: min(100%, calc(100vh - 320px)); /* fallback for older browsers */
    width: min(100%, calc(100svh - 320px));
    max-width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    margin-inline: auto;
}