/* The redesigned single-sofa page. Loaded only by _templates/product-v2.html (body.pdp-v2); everything is scoped
   under it, so the other product pages are untouched. Built on the shared tokens in shop.css. */

/* ---- 1. the stage: takes a soft tint from the colour being viewed ---- */
.pdp-v2 .pdp-visual{
  background:var(--cream);
  background:radial-gradient(120% 95% at 50% 38%,color-mix(in srgb,var(--amb,#c9c3b8) 26%,var(--cream)) 0%,var(--cream) 72%);
  transition:background .9s var(--ease-soft);
}
.pdp-v2 .pdp-visual.is-inspecting{cursor:zoom-in;touch-action:none;}

/* ---- 5. fabric loupe ---- */
.v2-inspect{
  position:absolute;left:18px;bottom:18px;z-index:6;display:inline-flex;align-items:center;gap:9px;
  padding:10px 16px 10px 13px;border-radius:999px;border:1px solid rgba(7,63,70,.18);cursor:pointer;
  background:rgba(245,239,228,.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--teal);
  font:inherit;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  transition:background .3s,color .3s,border-color .3s;
}
.v2-inspect:hover,.v2-inspect[aria-pressed="true"]{background:var(--teal);color:#fff;border-color:var(--teal);}
.v2-inspect:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.v2-inspect svg{color:var(--gold);}
.v2-loupe{
  position:absolute;z-index:7;pointer-events:none;border-radius:50%;opacity:0;transform:scale(.7);
  background-color:var(--cream);background-repeat:no-repeat;
  box-shadow:0 0 0 3px var(--gold),0 0 0 9px rgba(245,239,228,.6),0 24px 50px rgba(7,20,22,.45);
  transition:opacity .2s,transform .25s var(--ease-lux);
}
.v2-loupe.show{opacity:1;transform:scale(1);}

/* ---- 2. rating ---- */
.v2-rating{display:inline-flex;align-items:center;gap:10px;margin-top:10px;font-size:13px;color:var(--muted);width:fit-content;}
.v2-rating strong{color:var(--teal);}
.v2-rating:hover{color:var(--teal);}
.v2-stars{
  font-size:16px;letter-spacing:2px;line-height:1;
  background:linear-gradient(90deg,var(--gold) var(--p,100%),rgba(7,63,70,.18) var(--p,100%));
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}

/* ---- 4. assist: chat with the configuration, and the seven folds ---- */
.v2-assist{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:4px;}
.v2-chat,.v2-seal{
  display:flex;align-items:center;gap:13px;padding:14px 16px;border-radius:16px;border:1px solid var(--stone);
  background:var(--warm-white);color:var(--teal);font-size:13px;font-weight:600;line-height:1.3;
  transition:border-color .3s,transform .3s var(--ease-soft),box-shadow .3s;
}
.v2-chat[hidden]{display:none;}
.v2-chat:hover,.v2-seal:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 18px 30px -22px rgba(7,63,70,.5);}
.v2-chat:focus-visible,.v2-seal:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.v2-chat svg,.v2-seal svg{flex:none;color:var(--gold);}
.v2-chat small,.v2-seal small{display:block;font-weight:400;color:var(--muted);font-size:11.5px;margin-top:2px;}
.v2-assist:has(.v2-chat[hidden]){grid-template-columns:1fr;}

/* ---- the page rhythm around it ---- */
.pdp-v2 .pdp-title{letter-spacing:-.01em;}
.pdp-v2 .pdp-image-thumbs{margin-top:14px;}

@media(max-width:767px){
  .v2-assist{grid-template-columns:1fr;}
  .v2-ledger{padding:20px 18px 18px;}
  .v2-ledger-lines li{grid-template-columns:70px 1fr auto;}
  .v2-inspect{left:12px;bottom:12px;padding:9px 13px 9px 11px;}
}
@media(prefers-reduced-motion:reduce){
  .pdp-v2 .pdp-visual,.v2-loupe,.v2-chat,.v2-seal{transition:none;}
}

/* ============================================================
   COMPACT BUY COLUMN: everything that matters is on screen on arrival.
   Tighter rhythm, the rating beside the price, orientation and colour sharing a row, upgrades and extras as two
   one-line rows that open on request, and the receipt reduced to a summary, a total and an arrival window.
   ============================================================ */
.pdp-v2 .pdp-info-inner > *{margin-bottom:14px;}
.pdp-v2 .pdp-info-inner > *:last-child{margin-bottom:0;}
.pdp-v2 .pdp-collection-eyebrow{font-size:10.5px;}
.pdp-v2 .pdp-title{font-size:clamp(26px,2.5vw,34px);margin-top:6px;line-height:1.12;}
.pdp-v2 .pdp-price-row{align-items:center;gap:6px 14px;flex-wrap:wrap;}
.pdp-v2 .pdp-price{font-size:26px;}
.pdp-v2 .v2-rating{margin:0 0 0 auto;font-size:12.5px;}
.pdp-v2 .pdp-desc{font-size:14px;line-height:1.6;max-width:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.pdp-v2 .pdp-config-group,.pdp-v2 .pdp-orientation-group,.pdp-v2 .pdp-color-group{gap:8px;}
.pdp-v2 .pdp-group-label{font-size:10.5px;}
.pdp-v2 .pdp-config-options{gap:8px;}
.v2-pair{display:flex;gap:14px 30px;flex-wrap:wrap;align-items:flex-start;}
.v2-pair .pdp-color-group{flex:1 1 230px;}
.pdp-v2 .pdp-orientation-btn{padding:8px 14px;font-size:12px;}
.pdp-v2 .pdp-color-options{gap:12px;}
.pdp-v2 .pdp-color-swatch{gap:5px;}
.pdp-v2 .pdp-color-swatch .dot{width:28px;height:28px;}
.pdp-v2 .pdp-color-swatch span{font-size:10px;}

/* your sofa: summary, total, arrival */
.v2-ledger{margin:0;padding:14px 18px 12px;border-radius:18px;background:var(--warm-white);border:1px solid var(--stone);box-shadow:0 22px 44px -34px rgba(7,63,70,.45);position:relative;}
.v2-ledger::before{content:"";position:absolute;left:18px;right:18px;top:0;height:2px;background:linear-gradient(90deg,var(--gold),transparent);border-radius:2px;}
.v2-ledger-top{display:flex;justify-content:space-between;align-items:center;gap:14px;}
.v2-ledger-sum{margin:3px 0 0;font-size:13px;color:var(--charcoal);line-height:1.4;}
.v2-ledger-tot{display:flex;flex-direction:column;align-items:flex-end;gap:1px;}
.v2-ledger-tot strong{font-family:var(--font-serif);font-weight:400;font-size:28px;line-height:1.05;color:var(--teal);font-variant-numeric:tabular-nums lining-nums;}
.v2-ledger-toggle{background:none;border:0;padding:0;font:inherit;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-weight:600;cursor:pointer;}
.v2-ledger-toggle:hover{color:var(--teal);}
.v2-ledger-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.v2-ledger-lines{list-style:none;margin:10px 0 0;padding:0;}
.v2-ledger-lines[hidden]{display:none;}
.v2-ledger-lines li{display:grid;grid-template-columns:74px 1fr auto;gap:12px;padding:7px 0;border-top:1px dashed rgba(7,63,70,.14);font-size:13px;align-items:baseline;}
.v2-ledger-lines .k{color:var(--muted);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;}
.v2-ledger-lines .p{color:var(--teal);font-weight:600;font-variant-numeric:tabular-nums;}
.v2-eta{display:flex;gap:10px;align-items:center;margin-top:10px;padding:8px 12px;border-radius:10px;background:rgba(201,169,106,.14);color:var(--teal);}
.v2-eta[hidden]{display:none;}
.v2-eta svg{flex:none;color:var(--gold);}
.v2-eta p{margin:0;font-size:12.5px;line-height:1.4;}
.v2-eta span{color:var(--muted);}

/* assist tiles: one line each */
.v2-assist{gap:10px;}
.v2-chat,.v2-seal{padding:10px 14px;border-radius:14px;font-size:12.5px;gap:10px;}
.v2-chat small,.v2-seal small{display:none;}
.pdp-v2 .pdp-trust-row{padding:14px 0;gap:10px 22px;}
.pdp-v2 .pdp-qty-row{gap:14px;}

@media(max-width:767px){
  .v2-ledger-tot strong{font-size:25px;}
}

/* arrival on a laptop: less air above. The shape buttons keep their full size so the picture, the label and the tap target stay easy to use. */
.pdp-v2 .pdp{padding-top:22px;}
.pdp-v2 .pdp-config-options{gap:6px;}
@media(min-width:1024px) and (max-height:820px){
  .pdp-v2 .pdp-info-inner > *{margin-bottom:11px;}
  .pdp-v2 .pdp-title{font-size:28px;}
  .pdp-v2 .pdp-desc{-webkit-line-clamp:1;}
  .pdp-v2 .pdp-gallery{top:92px;}
  .v2-eta{margin-top:8px;padding:6px 10px;}
}
.pdp-v2 .pdp-config-options{gap:8px;}
@media(max-width:767px){
  .pdp-v2 .pdp-config-pill{min-height:48px;}
}
/* the asterisk note under the delivery promise */
.pdp-v2 .pdp-fineprint{font-size:11.5px;line-height:1.5;color:var(--muted);margin:2px 0 6px;}
.pdp-v2 li.pdp-fineprint{list-style:none;margin-top:4px;}

/* ---- 7. the phone stage: the sofa stays on screen while you choose ----
   Below 900px the photograph is pinned under the header and everything else (shape, colour, upgrades, extras) scrolls past beneath it, so every
   choice shows its result at once. The price and colour name ride on the photo. The photo is the same element as on a laptop; only its place changes. */
.pdp-v2 .pdp-stage-chip{display:none;}
@media(max-width:899px){
  .pdp-v2 .pdp-layout{gap:0;}
  .pdp-v2 .pdp-gallery{position:sticky;top:var(--stick,58px);z-index:40;margin:0 -20px 14px;padding:8px 20px 14px;
    background:linear-gradient(to bottom,var(--warm-white) 0,var(--warm-white) calc(100% - 16px),rgba(246,243,238,0) 100%);}
  .pdp-v2 .pdp-visual{aspect-ratio:auto;height:clamp(190px,31svh,300px);padding:8px 10px;border-radius:22px;box-shadow:0 14px 26px -20px rgba(6,41,47,.6);}
  .pdp-v2 .pdp-visual img#pdpImage{max-height:100%;max-width:92%;width:auto;height:auto;object-fit:contain;transition:opacity .25s;}
  .pdp-v2 .pdp-visual-backdrop{width:62%;bottom:4%;}.pdp-v2 .pdp-visual-ring{display:none;}
  .pdp-v2 .pdp-badge{transform:scale(.86);transform-origin:top left;}
  .pdp-v2 .pdp-image-thumbs{position:absolute;left:30px;top:20px;margin:0;display:flex;flex-direction:column;gap:6px;z-index:3;}
  .pdp-v2 .pdp-image-thumb{width:34px;height:34px;padding:3px;border-radius:9px;}
  .pdp-v2 .v2-inspect{left:auto;right:12px;bottom:auto;top:12px;padding:7px 11px 7px 9px;font-size:11px;}
  .pdp-v2 .pdp-flip-btn{bottom:10px;right:10px;top:auto;transform:scale(.85);}
  .pdp-v2 .pdp-stage-chip{display:flex;position:absolute;left:12px;bottom:10px;z-index:3;align-items:baseline;gap:8px;max-width:calc(100% - 70px);padding:6px 12px;border-radius:99px;
    background:rgba(5,46,52,.86);color:#F5EFE4;font-size:12px;letter-spacing:.02em;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);pointer-events:none;}
  .pdp-v2 .pdp-stage-chip b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .pdp-v2 .pdp-stage-chip span{color:#e1b95c;font-family:var(--font-serif);font-size:15px;white-space:nowrap;}
  .pdp-v2 .pdp-stage-chip.pop{animation:stagepop .35s cubic-bezier(.3,1.5,.5,1);}
  @keyframes stagepop{from{transform:scale(.92)}}
  .pdp-v2 .pdp-info-inner{padding-top:4px;}
  /* the things you can do with the photo on screen come first: shape, orientation, colour, then the rest */
  .pdp-v2 .pdp-color-group,.pdp-v2 .pdp-config-group{scroll-margin-top:calc(var(--stick,58px) + clamp(190px,31svh,300px) + 24px);}
  /* the colour sheet on a product page is a short drawer: the stage above it stays in view and changes as you tap */
  .sheet-wrap--compact{pointer-events:none;}
  .sheet-wrap--compact .sheet-scrim{display:none;}
  .sheet-wrap--compact .sheet{pointer-events:auto;max-height:42svh;border-radius:22px 22px 0 0;box-shadow:0 -14px 34px rgba(7,20,22,.28);}
  .sheet-wrap--compact .sheet-swatches{grid-template-columns:repeat(4,1fr);gap:12px 6px;}
  .sheet-wrap--compact .sheet-swatch i{width:54px;height:54px;}
  .sheet-wrap--compact .sheet-note{margin-bottom:10px;}
}
@media(prefers-reduced-motion:reduce){.pdp-v2 .pdp-stage-chip.pop{animation:none}}