/*
 * Product page top section (template-parts/pdp.php). Built on the design
 * tokens in style.css. Goal: image, price and buy button above the fold on
 * desktop and on a phone, with trust signals right under the button.
 */

/* No dark hero on product pages: the header is always visible. */
.no-hero .header{ transform:none !important; }
.no-hero .pdp{ padding-top:calc(78px + clamp(12px, 1.4vw, 22px)); }
@media (max-width:980px){
  .no-hero .pdp{ padding-top:clamp(14px, 3vw, 24px); }
}

.pdp{ padding-bottom:var(--sec-y-tight); background:var(--paper); }

/* Breadcrumbs on a light surface (the design's crumbs sit on the dark stage). */
.pdp__crumbs{ margin-bottom:clamp(12px, 1.2vw, 18px); }
.pdp__crumbs ol{ display:flex; flex-wrap:wrap; gap:6px 10px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); }
.pdp__crumbs li + li::before{ content:"/"; margin-right:10px; color:var(--ink-faint); }
.pdp__crumbs a{ color:var(--ink-soft); text-decoration:none; }
.pdp__crumbs a:hover{ color:var(--gold); }
.pdp__crumbs [aria-current]{ color:var(--ink); }

.pdp__grid{
  display:grid;
  grid-template-columns:minmax(0, 1.08fr) minmax(0, .92fr);
  gap:clamp(28px, 4.4vw, 80px);
  align-items:start;
}
@media (max-width:980px){
  .pdp__grid{ grid-template-columns:1fr; gap:22px; }
}

/* --- gallery ------------------------------------------------------------- */
.pdp__gallery{ position:sticky; top:104px; }
@media (max-width:980px){ .pdp__gallery{ position:relative; top:auto; margin-inline:calc(var(--pad) * -1); } }

.pdp__track{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  border-radius:var(--card-r); background:var(--tile);
  scrollbar-width:none;
}
.pdp__track::-webkit-scrollbar{ display:none; }
@media (max-width:980px){ .pdp__track{ border-radius:0; } }
.pdp__slide{ flex:0 0 100%; scroll-snap-align:start; margin:0; aspect-ratio:1/1; }
.pdp__slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.pdp__tag{ position:absolute; top:16px; left:16px; }

.pdp__thumbs{ display:flex; gap:10px; margin-top:12px; overflow-x:auto; scrollbar-width:none; }
@media (max-width:980px){ .pdp__thumbs{ padding-inline:var(--pad); } }
.pdp__thumb{
  flex:0 0 auto; width:76px; height:76px; padding:0;
  border-radius:5px; overflow:hidden; background:var(--tile);
  border:1px solid transparent; opacity:.7;
  transition:opacity .2s, border-color .2s;
}
.pdp__thumb img{ width:100%; height:100%; object-fit:cover; }
.pdp__thumb.is-active, .pdp__thumb:hover{ opacity:1; border-color:var(--ink); }

/* --- info column --------------------------------------------------------- */
.pdp__eyebrow{ margin-bottom:10px; }
.pdp__title{
  font-size:clamp(1.85rem, 3vw, 2.75rem); line-height:1.08; letter-spacing:-.015em;
  margin-bottom:8px;
}
.pdp__rating{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:14px;
  font-size:13px; color:var(--ink-soft); text-decoration:none;
}
.pdp__rating .stars{ color:var(--gold); font-size:13px; }
.pdp__rating:hover span:last-child{ text-decoration:underline; text-underline-offset:3px; }

.pdp__price{ font-family:var(--display); font-size:clamp(1.6rem, 2.2vw, 2rem); line-height:1.1; }
.pdp__vat{ margin-top:4px; font-size:13px; color:var(--ink-mute); }
.pdp__lead{ margin-top:14px; font-size:15px; line-height:1.6; color:var(--ink-soft); font-weight:300; max-width:52ch; }

.pdp__bullets{ margin-top:14px; display:grid; gap:7px; }
.pdp__bullets li{ display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color:var(--ink); }
.pdp__check{ flex:0 0 auto; width:18px; height:18px; margin-top:2px; fill:none; stroke:var(--gold); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* --- buy form ------------------------------------------------------------ */
.pdp__buy{ margin-top:20px; display:grid; gap:12px; }
.pdp__options{ border:0; margin:0; padding:0; }
.pdp__options legend{
  margin-bottom:10px; padding:0;
  font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft);
}
.pdp__options legend strong{ color:var(--ink); font-weight:500; letter-spacing:.08em; text-transform:none; font-size:13px; }
.pdp__pills{ display:flex; flex-wrap:wrap; gap:8px; }
.pdp__pill{ position:relative; }
.pdp__pill input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.pdp__pill span{
  display:inline-flex; align-items:center; min-height:44px; padding:10px 20px;
  border:1px solid var(--line); border-radius:var(--pill-r); background:var(--paper);
  font-size:14px; color:var(--ink); transition:border-color .2s, background .2s, color .2s;
}
.pdp__pill:hover span{ border-color:var(--ink-mute); }
.pdp__pill input:checked + span{ border-color:var(--ink); background:var(--ink); color:var(--paper); }
.pdp__pill input:focus-visible + span{ outline:2px solid var(--gold); outline-offset:2px; }
.pdp__pill.is-soldout span{ color:var(--ink-faint); text-decoration:line-through; background:var(--cream-soft); }

.pdp__gift{ margin:0; }
.pdp__cta{ width:100%; padding-block:18px; font-size:13px; }
.pdp__cta[disabled]{ opacity:.5; cursor:not-allowed; }
.pdp__cta-price{ opacity:.85; }

.pdp__stock{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--ink-soft); }
.pdp__dot{ flex:0 0 auto; width:9px; height:9px; border-radius:50%; background:#3E9B5F; box-shadow:0 0 0 4px rgba(62,155,95,.15); }
.pdp__stock.is-out .pdp__dot{ background:#B5584C; box-shadow:0 0 0 4px rgba(181,88,76,.15); }
.pdp__stock a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.pdp__eta{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--ink-soft); margin-top:-4px; }
.pdp__eta strong{ color:var(--ink); font-weight:500; }
.pdp__eta-ico{ width:18px; height:18px; fill:none; stroke:var(--ink-soft); stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; }

.pdp__pay{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:16px; }
.pdp__pay li{ height:24px; display:flex; align-items:center; }
.pdp__pay img{ height:24px; width:auto; }
.pdp__pay li.is-wide img{ height:16px; }

/* --- trust badges -------------------------------------------------------- */
.pdp__trust{
  margin-top:22px; display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--card-r); overflow:hidden;
}
.pdp__trust li{ display:flex; gap:12px; align-items:flex-start; padding:16px; background:var(--cream-soft); }
.pdp__trust .ico{ flex:0 0 auto; width:28px; height:28px; fill:none; stroke:var(--gold); stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; }
.pdp__trust strong{ display:block; font-size:13px; font-weight:500; color:var(--ink); }
.pdp__trust span{ display:block; margin-top:2px; font-size:12.5px; line-height:1.5; color:var(--ink-mute); }
@media (max-width:420px){ .pdp__trust{ grid-template-columns:1fr; } }

/* --- info boxes ---------------------------------------------------------- */
.pdp__acc{ margin-top:22px; border-top:1px solid var(--line); }
.pdp__box{ border-bottom:1px solid var(--line); }
.pdp__box summary{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:17px 0; cursor:pointer; list-style:none;
  font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--ink);
}
.pdp__box summary::-webkit-details-marker{ display:none; }
.pdp__box summary i{ position:relative; width:14px; height:14px; flex:0 0 auto; }
.pdp__box summary i::before, .pdp__box summary i::after{
  content:""; position:absolute; left:0; top:50%; width:14px; height:1px; background:var(--ink); transition:transform .3s var(--ease);
}
.pdp__box summary i::after{ transform:rotate(90deg); }
.pdp__box[open] summary i::after{ transform:rotate(0); }
.pdp__box-body{ padding:0 0 18px; font-size:14.5px; line-height:1.7; color:var(--ink-soft); font-weight:300; }
.pdp__box-body p + p, .pdp__box-body ul{ margin-top:10px; }
.pdp__box-body li{ position:relative; padding-left:18px; margin-top:6px; }
.pdp__box-body li::before{ content:""; position:absolute; left:0; top:12px; width:7px; height:1px; background:var(--gold); }
.pdp__box-body a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.pdp__box-body h3{ font-size:17px; margin:14px 0 6px; }

/* --- customer quote ------------------------------------------------------ */
.pdp__quote{
  margin:22px 0 0; padding:18px; display:flex; gap:14px; align-items:flex-start;
  background:var(--blush-soft); border-radius:var(--card-r);
}
.pdp__quote-img{ flex:0 0 auto; width:56px; height:56px; border-radius:50%; overflow:hidden; }
.pdp__quote-img img{ width:100%; height:100%; object-fit:cover; }
.pdp__quote .stars{ color:var(--gold); font-size:12px; margin-bottom:6px; }
.pdp__quote blockquote{ margin:0; }
.pdp__quote blockquote p{ font-family:var(--ui); font-size:15.5px; line-height:1.55; color:var(--ink); }
.pdp__quote figcaption{ margin-top:8px; font-size:12px; color:var(--ink-mute); }

.pdp__help{ margin-top:18px; display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--ink-soft); }
.pdp__help-ico{ flex:0 0 auto; width:20px; height:20px; fill:none; stroke:var(--ink-soft); stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; margin-top:1px; }
.pdp__help a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }

/* --- sticky buy bar (small screens) -------------------------------------- */
.pdp-sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:150;
  padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,253,251,.96); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line); box-shadow:0 -18px 40px -30px rgba(46,39,41,.45);
  transform:translateY(110%); transition:transform .4s var(--ease);
}
.pdp-sticky.is-on{ transform:none; }
html.cart-is-open .pdp-sticky{ transform:translateY(110%); }
.pdp-sticky__inner{ display:flex; align-items:center; gap:16px; max-width:var(--content-max); margin-inline:auto; }
.pdp-sticky__img{ flex:0 0 auto; width:56px; height:56px; border-radius:var(--card-r); overflow:hidden; background:#ECE9E7; }
.pdp-sticky__img img{ width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply; }
.pdp-sticky__info{ flex:1 1 auto; min-width:0; }
.pdp-sticky__name{ margin:0; font-family:var(--ui); font-weight:500; font-size:17px; line-height:1.3; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pdp-sticky__var{ font-family:var(--body); font-size:13px; color:var(--ink-mute); }
.pdp-sticky__price{ margin:2px 0 0; font-size:14px; font-weight:500; color:var(--ink); }
.pdp-sticky__ship{ font-weight:400; color:var(--ink-mute); }
.pdp-sticky__btn{ flex:0 0 auto; min-width:240px; padding:16px 26px; font-size:12px; }
.pdp-sticky__done{ display:none; }
.pdp-sticky__btn.is-added{ background:#3E9B5F; border-color:#3E9B5F; }
.pdp-sticky__btn.is-added .pdp-sticky__label,
.pdp-sticky__btn.is-added .btn__ico{ display:none; }
.pdp-sticky__btn.is-added .pdp-sticky__done{ display:inline; }
@media (max-width:760px){
  .pdp-sticky__inner{ gap:12px; }
  .pdp-sticky__img{ width:46px; height:46px; }
  .pdp-sticky__name{ font-size:15px; }
  .pdp-sticky__var, .pdp-sticky__ship{ display:none; }
  .pdp-sticky__btn{ min-width:0; padding:14px 16px; font-size:11px; letter-spacing:.1em; }
  .pdp-sticky__btn .btn__ico{ display:none; }
}

/* Mobile: thumbnails become dots under the swipeable image. */
@media (max-width:980px){
  .pdp__thumbs{ justify-content:center; gap:8px; margin-top:10px; }
  .pdp__thumb{ width:8px; height:8px; border-radius:50%; background:var(--ink-faint); border:0; opacity:1; }
  .pdp__thumb img{ display:none; }
  .pdp__thumb.is-active{ background:var(--ink); }
  .pdp__crumbs{ margin-bottom:10px; }
  .pdp__crumbs ol{ font-size:10px; letter-spacing:.12em; }
}

/* ---------------------------------------------------------------------------
   Buy block, tidied (2026-10-05): CTA + square heart on one row, stock /
   delivery / returns in one quiet box with aligned icons, payment logos in
   equal tiles under a small label.
   ------------------------------------------------------------------------- */
.pdp__cta-row{ display:flex; gap:10px; align-items:stretch; }
.pdp__cta-row .pdp__cta{ flex:1 1 auto; min-height:58px; position:relative; }
.pdp__cta-done{ display:none; }
.pdp__buy.is-added .pdp__cta{ background:#3E9B5F; border-color:#3E9B5F; }
.pdp__buy.is-added .pdp__cta-label,
.pdp__buy.is-added .pdp__cta .btn__ico{ display:none; }
.pdp__buy.is-added .pdp__cta-done{ display:inline; }

.fav-btn--square{
  position:static; flex:0 0 58px; width:58px; height:auto; min-height:58px;
  border-radius:var(--pill-r); border:1px solid var(--line); background:var(--paper);
  box-shadow:none; color:var(--ink);
}
.fav-btn--square svg{ width:22px; height:22px; }
.fav-btn--square:hover{ border-color:var(--ink); color:var(--ink); }
.fav-btn--square.is-on{ color:var(--gold); border-color:var(--gold-line); background:var(--cream-soft); }

.pdp__meta{
  margin:4px 0 0; padding:4px 16px;
  border:1px solid var(--line); border-radius:var(--card-r); background:var(--cream-soft);
}
.pdp__meta li{
  display:flex; align-items:center; gap:12px;
  padding:11px 0; font-size:13.5px; line-height:1.45; color:var(--ink-soft);
}
.pdp__meta li + li{ border-top:1px solid var(--line); }
.pdp__meta li[hidden]{ display:none; }
.pdp__meta li + li[hidden] + li{ border-top:1px solid var(--line); }
.pdp__meta-ico{ flex:0 0 20px; width:20px; display:grid; place-items:center; }
.pdp__meta .pdp__dot{ width:9px; height:9px; }
.pdp__meta .pdp__eta-ico{ width:19px; height:19px; }
.pdp__meta strong{ color:var(--ink); font-weight:500; }
.pdp__meta a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
/* the old free-standing styles are replaced by the box above */
.pdp__meta .pdp__stock, .pdp__meta .pdp__eta{ margin:0; }

.pdp__pay-wrap{ margin-top:18px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.pdp__pay-label{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); }
.pdp__pay-wrap .pdp__pay{ margin:0; gap:6px; }
.pdp__pay-wrap .pdp__pay li{ height:24px; display:flex; align-items:center; }
.pdp__pay-wrap .pdp__pay li img{ height:24px; width:auto; }
.pdp__pay-wrap .pdp__pay li.is-wide{ padding:0 4px; }
.pdp__pay-wrap .pdp__pay li.is-wide img{ height:13px; }

/* Info boxes: the plus turns to a minus with the opening, and back at once on close. */
.pdp__box summary{ transition:color .25s var(--ease); }
.pdp__box summary:hover{ color:var(--gold); }
.pdp__box summary i::before, .pdp__box summary i::after{ transition:transform .38s cubic-bezier(.22,.61,.36,1), background .25s; }
.pdp__box.is-closing summary i::after{ transform:rotate(90deg); }
.pdp__box[open]:not(.is-closing) summary{ color:var(--gold); }
.pdp__box[open]:not(.is-closing) summary i::before,
.pdp__box[open]:not(.is-closing) summary i::after{ background:var(--gold); }

/* Same-day cut-off line (same look as the other meta rows) */
.pdp__meta .pdp__cutoff{ margin:0; }
.pdp__cutoff strong{ color:var(--ink); font-weight:500; }
.pdp__stock strong{ color:#9A4B3C; font-weight:500; }

/* "Passer med": two small add-on rows under the buy button */
.pdp__pairs{ margin-top:18px; padding:14px 16px 6px; border:1px solid var(--line); border-radius:var(--card-r); }
.pdp__pairs-title{ margin:0 0 6px; font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); }
.pdp__pairs ul{ list-style:none; margin:0; padding:0; }


/* Gift card recipient fields (PW Gift Cards) */
.pdp__giftcard{ margin:4px 0 6px; }
.pdp__giftcard .field{ margin-bottom:16px; }
.pdp__giftcard .field textarea{ min-height:96px; }
.pdp__giftcard .form__hint{ margin-top:6px; }