/* ==========================================================================
   BON JEU — product page

   Built against design/comp/product.png, 1195px wide. Every value is a
   measured comp pixel expressed in `--u`, so at a 1195px viewport one unit is
   one comp pixel and the build can be diffed against the comp directly.

   One departure, asked for: the comp's images are square-cornered; here they
   carry the same radius as the rest of the site.
   ========================================================================== */

.pdp {
  --u: calc(min(100vw, 1600px) / 1195);
  --radius: calc(10 * var(--u));
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --line: rgba(17, 46, 103, 0.16);
  --muted: rgba(17, 46, 103, 0.62);
  /* the nav bar is white here, so the burger cannot be */
  --nav-ink: var(--navy);

  max-width: 1600px;
  margin-inline: auto;
  background: var(--cream);
  color: var(--navy);
  font-family: var(--font-ui);
}
.pdp *, .pdp *::before, .pdp *::after { box-sizing: border-box; }

/* ----------------------------------------------------------------- nav --- */

.pnav {
  display: flex;
  align-items: center;
  height: calc(66 * var(--u));
  padding: 0 calc(41 * var(--u)) 0 calc(51 * var(--u));
  background: var(--white);
}

.pnav__home { display: block; width: calc(34 * var(--u)); flex: none; }
.pnav__home img { display: block; width: 100%; height: auto; }

.pnav__links,
.pnav__util {
  display: flex;
  align-items: center;
  gap: calc(48 * var(--u));
}
.pnav__links { margin: 0 auto; }

.pnav a {
  color: var(--navy);
  text-decoration: none;
  font-size: calc(10 * var(--u));
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 200ms var(--ease);
}
.pnav a:hover, .pnav a:focus-visible { color: var(--cobalt); }
/* The English/French pairing belongs to the reading copy, not the furniture.
   Doubling every control — SIZE / TAILLE, ADD TO BAG / AJOUTER AU PANIER —
   doubles the width of a column measured at 267u and breaks the layout. */
.pdp .alt { display: none; }
.pdp .pinfo__copy .alt { display: block; }

/* ---------------------------------------------------------- breadcrumb --- */

.crumb {
  padding: calc(18 * var(--u)) calc(41 * var(--u)) 0 calc(51 * var(--u));
  font-size: calc(8.5 * var(--u));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.crumb a { color: inherit; text-decoration: none; }
.crumb a:hover { color: var(--navy); }
.crumb span { margin: 0 calc(7 * var(--u)); opacity: 0.5; }
.crumb [aria-current] { color: var(--navy); }

/* ------------------------------------------------------------- layout --- */

.pdp__grid {
  display: grid;
  /* rail 61 + 19 gap + main 541 | 53 gutter | info 267, on the comp's grid */
  grid-template-columns: calc(621 * var(--u)) calc(267 * var(--u));
  justify-content: start;
  gap: 0 calc(53 * var(--u));
  padding: calc(12 * var(--u)) 0 calc(24 * var(--u)) calc(50 * var(--u));
}

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

.gallery {
  display: grid;
  grid-template-columns: calc(61 * var(--u)) 1fr;
  gap: calc(19 * var(--u));
  align-items: start;
}

.gallery__rail {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
  /* the comp starts the rail 24u below the main image, not level with it */
  margin-top: calc(24 * var(--u));
}

.gallery__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 61 / 78;
  padding: 0;
  border: 1px solid transparent;
  border-radius: calc(4 * var(--u));
  background: var(--white);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 200ms var(--ease), opacity 200ms var(--ease);
}
.gallery__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb[aria-current='true'] { border-color: var(--navy); }
.gallery__thumb:not([aria-current='true']) { opacity: 0.72; }
.gallery__thumb:hover { opacity: 1; }

.gallery__more {
  display: grid;
  place-items: center;
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
  margin: calc(11 * var(--u)) auto 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: none;
  color: var(--navy);
  cursor: pointer;
}
.gallery__more svg { width: calc(9 * var(--u)); height: calc(9 * var(--u)); }

.gallery__main {
  aspect-ratio: 541 / 658;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
}
.gallery__main img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------- info --- */

.pinfo__eyebrow {
  margin: calc(14 * var(--u)) 0 0;
  font-size: calc(8.5 * var(--u));
  font-weight: 500;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--muted);
}

.pinfo__title {
  margin: calc(13 * var(--u)) 0 0;
  font-size: calc(31 * var(--u));
  font-weight: 500;
  line-height: calc(35 * var(--u));
  letter-spacing: calc(-0.2 * var(--u));
  text-transform: uppercase;
}

.pinfo__price {
  margin: calc(20 * var(--u)) 0 0;
  font-size: calc(13 * var(--u));
  font-weight: 500;
  letter-spacing: 0.03em;
}

.pinfo__price--soon {
  font-size: calc(9.5 * var(--u));
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

a.addbag { text-decoration: none; }

.pinfo__colour {
  margin: calc(5 * var(--u)) 0 0;
  font-size: calc(8.5 * var(--u));
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}

.pinfo__copy {
  margin: calc(12 * var(--u)) 0 0;
  font-size: calc(13.5 * var(--u));
  line-height: calc(18 * var(--u));
}
/* The French pairing the rest of the site uses, set as the comp has it —
   italic, quieter, its own block rather than a line-by-line interleave. */
.pinfo__copy .alt {
  display: block;
  margin-top: calc(6 * var(--u));
  font-size: calc(9.5 * var(--u));
  font-style: italic;
  line-height: calc(14.6 * var(--u));
  color: rgba(17, 46, 103, 0.5);
}

.pinfo hr {
  height: 0;
  margin: calc(19 * var(--u)) 0 0;
  border: 0;
  border-top: 1px solid var(--line);
}

/* ------------------------------------------------------------- claims --- */

.claims {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(10 * var(--u));
  margin-top: calc(19 * var(--u));
}
.claims div { display: flex; align-items: center; gap: calc(8 * var(--u)); }
.claims svg {
  flex: none;
  width: calc(15 * var(--u));
  height: calc(15 * var(--u));
  fill: none; stroke: var(--navy); stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.claims p {
  margin: 0;
  font-size: calc(7 * var(--u));
  letter-spacing: 0.09em;
  line-height: calc(8.5 * var(--u));
  text-transform: uppercase;
  color: var(--muted);
}

/* --------------------------------------------------------------- size --- */

.sizerow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: calc(27 * var(--u));
  font-size: calc(8.5 * var(--u));
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.sizerow a { color: var(--muted); text-decoration: none; }
.sizerow a:hover { color: var(--navy); text-decoration: underline; }

.sizes {
  display: flex;
  justify-content: space-between;
  width: calc(243 * var(--u));
  margin-top: calc(14 * var(--u));
}
.sizes button {
  width: calc(28 * var(--u));
  height: calc(28 * var(--u));
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--navy);
  font: inherit;
  font-size: calc(9 * var(--u));
  font-weight: 500;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 180ms var(--ease), color 180ms var(--ease);
}
.sizes button:hover { background: rgba(17, 46, 103, 0.08); }
.sizes button[aria-pressed='true'] { background: var(--navy); color: var(--cream); }

.addbag {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: calc(48 * var(--u));
  margin-top: calc(15 * var(--u));
  border: 0;
  background: var(--navy);
  color: var(--cream);
  font: inherit;
  font-size: calc(10 * var(--u));
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 200ms var(--ease);
}
.addbag:hover { background: #0b1f47; }

.pay {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--u));
  margin-top: calc(4 * var(--u));
  font-size: calc(7.5 * var(--u));
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}
.pay b { font-weight: 600; letter-spacing: 0.02em; text-transform: none; color: var(--navy); }

/* --------------------------------------------------------- accordions --- */

.acc { margin-top: 0; }
.acc details { border-bottom: 1px solid var(--line); }
.acc details:first-child { border-top: 1px solid var(--line); }
.acc summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(9.5 * var(--u)) 0;
  font-size: calc(8.5 * var(--u));
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: '+';
  font-size: calc(13 * var(--u));
  font-weight: 400;
  line-height: 1;
  transform: translateY(calc(-0.5 * var(--u)));
  color: var(--muted);
}
.acc details[open] summary::after { content: '\2212'; }
.acc ul, .acc p {
  margin: 0 0 calc(12 * var(--u));
  padding: 0;
  list-style: none;
  font-size: calc(11.5 * var(--u));
  line-height: calc(17 * var(--u));
  color: var(--muted);
}
.acc li { padding-left: calc(11 * var(--u)); position: relative; }
.acc li::before {
  content: '';
  position: absolute;
  left: 0; top: calc(7.5 * var(--u));
  width: calc(3 * var(--u)); height: calc(3 * var(--u));
  border-radius: 50%;
  background: var(--line);
}

/* ------------------------------------------------------ detail strip --- */

.pdetail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(5 * var(--u));
}
.pdetail figure {
  position: relative;
  margin: 0;
  aspect-ratio: 295 / 254;
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
}
.pdetail img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
/* The captions sit on photography that runs from near-black to mid-tone; a
   bottom-weighted scrim is what keeps them legible without flattening it. */
.pdetail figure::before {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(to top,
              rgba(6, 12, 26, 0.86) 0%,
              rgba(6, 12, 26, 0.55) 26%,
              rgba(6, 12, 26, 0) 58%);
}
.pdetail figcaption {
  position: absolute;
  left: calc(18 * var(--u));
  right: calc(18 * var(--u));
  bottom: calc(16 * var(--u));
  color: var(--white);
}
.pdetail h3 {
  margin: 0;
  font-size: calc(11 * var(--u));
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.pdetail p {
  margin: calc(9 * var(--u)) 0 0;
  font-size: calc(10 * var(--u));
  line-height: calc(15 * var(--u));
  color: rgba(255, 255, 255, 0.82);
}

/* -------------------------------------------------------------- club --- */

.pclub {
  position: relative;
  margin: calc(5 * var(--u)) 0 0;
  aspect-ratio: 1185 / 300;
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
}
.pclub img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
.pclub::before {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(100deg,
              rgba(238, 242, 246, 0.92) 0%,
              rgba(238, 242, 246, 0.62) 30%,
              rgba(238, 242, 246, 0) 56%);
}
.pclub__text { padding: calc(36 * var(--u)) 0 0 calc(30 * var(--u)); max-width: calc(330 * var(--u)); }
.pclub h2 {
  margin: 0;
  font-size: calc(11 * var(--u));
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.pclub p {
  margin: calc(14 * var(--u)) 0 0;
  font-size: calc(12.5 * var(--u));
  line-height: calc(20.5 * var(--u));
}

/* ------------------------------------------------------------ mobile --- */

@media (max-width: 900px) {
  .pdp { --u: calc(100vw / 560); --radius: 10px; }

  .pnav { height: 62px; padding: 0 20px; }
  .pnav__home { width: 44px; }
  .pnav__links { display: none; }
  .pnav a { font-size: 11px; }
  .pnav__util { gap: 18px; margin-left: auto; }
  .pnav__util a:not(:last-child) { display: none; }

  .crumb { padding: 16px 20px 0; font-size: 10px; }

  .pdp__grid {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 16px 20px 48px;
  }
  .gallery { grid-template-columns: 1fr; gap: 10px; }
  .gallery__main { order: -1; aspect-ratio: 4 / 5; }
  .gallery__rail {
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .gallery__rail::-webkit-scrollbar { display: none; }
  .gallery__thumb { flex: 0 0 62px; }
  .gallery__more { display: none; }

  .pinfo__eyebrow { margin-top: 0; font-size: 10px; }
  .pinfo__title { margin-top: 10px; font-size: 30px; line-height: 34px; }
  .pinfo__price { margin-top: 16px; font-size: 16px; }
  .pinfo__colour { font-size: 10px; }
  .pinfo__copy { margin-top: 18px; font-size: 15px; line-height: 24px; }
  .pinfo__copy .alt { font-size: 13px; line-height: 20px; }
  .pinfo hr { margin-top: 22px; }
  .claims { gap: 12px; margin-top: 20px; }
  .claims svg { width: 20px; height: 20px; }
  .claims p { font-size: 9px; line-height: 12px; }
  .sizerow { margin-top: 22px; font-size: 10px; }
  .sizes { margin-top: 14px; }
  .sizes button { width: 44px; height: 44px; font-size: 12px; }
  .addbag { height: 54px; margin-top: 18px; font-size: 12px; }
  .pay { margin-top: 14px; font-size: 9px; }
  .acc summary { padding: 14px 0; font-size: 11px; }
  .acc ul, .acc p { font-size: 14px; line-height: 21px; }

  .pdetail { grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 0 8px; }
  .pdetail figure { aspect-ratio: 1 / 1; }
  .pdetail h3 { font-size: 12px; }
  .pdetail p { font-size: 12px; line-height: 17px; }

  .pclub { margin: 8px 8px 0; aspect-ratio: 3 / 4; }
  .pclub::before {
    background: linear-gradient(180deg,
                rgba(238, 242, 246, 0.94) 0%,
                rgba(238, 242, 246, 0.7) 40%,
                rgba(238, 242, 246, 0) 72%);
  }
  .pclub__text { padding: 26px 22px 0; max-width: none; }
  .pclub h2 { font-size: 12px; }
  .pclub p { font-size: 16px; line-height: 25px; }
}

@media (prefers-reduced-motion: reduce) {
  .pdp * { transition: none !important; }
}

/* ==========================================================================
   Shop — the same chrome as a product page, so the two read as one site.
   ========================================================================== */

.shop__head {
  padding: calc(30 * var(--u)) calc(50 * var(--u)) 0;
}
.shop__eyebrow {
  margin: 0;
  font-size: calc(8.5 * var(--u));
  font-weight: 500;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--muted);
}
.shop__title {
  margin: calc(14 * var(--u)) 0 0;
  font-size: calc(44 * var(--u));
  font-weight: 500;
  line-height: calc(48 * var(--u));
  letter-spacing: calc(-0.4 * var(--u));
  text-transform: uppercase;
}
.shop__sub {
  margin: calc(14 * var(--u)) 0 0;
  max-width: calc(430 * var(--u));
  font-size: calc(13.5 * var(--u));
  line-height: calc(20 * var(--u));
  color: var(--muted);
}
.shop__sub .alt { display: block; margin-top: calc(6 * var(--u)); font-style: italic; }

.shop__count {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: calc(34 * var(--u)) calc(50 * var(--u)) 0;
  padding-bottom: calc(11 * var(--u));
  border-bottom: 1px solid var(--line);
  font-size: calc(8.5 * var(--u));
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--muted);
}

.shop__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(26 * var(--u));
  padding: calc(26 * var(--u)) calc(50 * var(--u)) calc(60 * var(--u));
}

.card {
  display: flex;
  flex-direction: column;
  color: var(--navy);
  text-decoration: none;
}
.card__img {
  aspect-ratio: 4 / 5;
  /* The garments are shot edge-to-edge, so `contain` alone pushes them into
     the card's corners. The padding is the product's margin, not the card's. */
  padding: calc(34 * var(--u));
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card, #fbf9f5);
  transition: transform 320ms var(--ease);
}
.card__img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.card:hover .card__img { transform: translateY(calc(-4 * var(--u))); }

.card__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: calc(12 * var(--u));
  margin-top: calc(14 * var(--u));
}
.card__name {
  margin: 0;
  font-size: calc(11 * var(--u));
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.card__price { margin: 0; font-size: calc(11 * var(--u)); font-weight: 500; white-space: nowrap; }
.card__price--soon {
  font-size: calc(8.5 * var(--u));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.card__colour {
  margin: calc(6 * var(--u)) 0 0;
  font-size: calc(9.5 * var(--u));
  font-style: italic;
  color: var(--muted);
}

@media (max-width: 900px) {
  .shop__head { padding: 22px 20px 0; }
  .shop__title { margin-top: 10px; font-size: 34px; line-height: 38px; }
  .shop__sub { margin-top: 12px; max-width: none; font-size: 15px; line-height: 24px; }
  .shop__eyebrow { font-size: 10px; }
  .shop__count { margin: 26px 20px 0; padding-bottom: 10px; font-size: 10px; }
  .shop__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 16px 20px 48px;
  }
  .card__name { font-size: 11px; }
  .card__price { font-size: 11px; }
  .card__price--soon { font-size: 9px; }
  .card__colour { font-size: 11px; }
}

/* Deliberately no single-column fallback: five products stacked runs the page
   to 2600px on a phone. Two-up at 390 gives 159px cards, which is what every
   mobile shop grid uses. */