/* The product page (BRIEF-V7 section 3.2): the stage on the left, sticky, the product view standing on its plinth line in the
   product's ground tone (3.4); on the right a stack of panels, each its own colour. Phones: the stage first, then the stack.
   Prefix pd-. The tone classes (tn-) are shared by the stage, the panels and the pair tiles. */
.page-product{background:var(--plaster-2)}
.page-product .site-header{background:var(--plaster-2)}
.page-product .preview-tag{left:auto;right:12px}
@media (max-width:760px){.page-product .preview-tag{right:10px}}
.pd{padding:12px 0 clamp(56px,8vw,120px)}
.pd .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* the tones: a ground and its type colour */
.tn-plaster{background:var(--plaster);color:var(--ink)}
.tn-plaster-2{background:var(--plaster-2);color:var(--ink)}
.tn-cream{background:var(--cream);color:var(--ink)}
.tn-steam{background:var(--steam);color:var(--ink)}
.tn-sage{background:var(--sage);color:var(--ink)}
.tn-amber{background:var(--amber);color:var(--ink)}
.tn-terracotta{background:var(--terracotta);color:var(--off)}
.tn-terracotta-2{background:var(--terracotta-2);color:var(--off)}
.tn-umber{background:var(--umber);color:var(--off)}
.tn-umber-2{background:var(--umber-2);color:var(--off)}
.tn-umber .label,.tn-umber-2 .label,.tn-terracotta .label,.tn-terracotta-2 .label{color:rgba(251,247,238,.72)}

/* the grid */
.pd-grid{display:grid;grid-template-columns:7fr 5fr;gap:clamp(18px,2.4vw,36px);align-items:start}
.pd-stagecol{position:sticky;top:88px}
.pd-stage{position:relative;height:calc(100svh - 100px);min-height:520px;border-radius:var(--r-lg);overflow:hidden;isolation:isolate;
  --pv-top:8%;--pv-floor:72%;--pv-side:12%;--pv-cap-x:22px;--pv-cap-y:20px}
.pd-stage.tn-plaster{box-shadow:inset 0 0 0 1px rgba(42,29,21,.08)}
.pd-stage.tn-plaster-2{box-shadow:inset 0 0 0 2px var(--terracotta)}
/* v7b: the stage is .lit (light.css: the one light, the vignette, the grain) and stands on the shared .plinth at 72 percent */
.pd-stage{--plinth-y:72%;--plinth-d:7%;--plinth-front:200px}
.pd-stage .pv{position:absolute;inset:0;z-index:2}
.pd-stage .pv-cap{color:currentColor}
.pd-tag{position:absolute;top:18px;left:18px;z-index:3}
/* the gift card has no product view: the shop rail's fanned cards stand on the plinth */
.pd-gift{position:absolute;left:50%;top:72%;z-index:2;translate:-50% -100%;padding-bottom:6px}
.pd-gift .gift-card{margin:0}

/* the stack */
.pd-stack{display:grid;gap:14px}
.pd-panel{position:relative;padding:clamp(24px,2.8vw,40px);border-radius:var(--r-lg);overflow:hidden}
.pd-panel.tn-plaster-2{box-shadow:inset 0 0 0 1.5px rgba(42,29,21,.12)}
.pd-panel h2{font-size:clamp(26px,2.4vw,34px);margin-bottom:18px}
.pd-panel .label{display:block;margin-bottom:10px}

/* 1. name, price, buy */
.pd-panel .pd-back{display:inline-block;margin-bottom:18px;border-bottom:1.5px solid var(--terracotta);padding-bottom:2px}
.pd-buy h1{font-size:clamp(34px,3.4vw,52px);line-height:1;letter-spacing:-.025em}
.pd-sub{margin-top:12px;font-size:18px;color:var(--ink-2)}
.pd-price{margin-top:22px;font-family:var(--font-display);font-size:clamp(34px,3vw,44px);line-height:1;font-weight:360;font-variation-settings:"SOFT" 40}
.pd-act{margin-top:22px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.pd-cta{min-height:52px}
.pd-arr{flex:none}
.pd-sold{font-weight:600;color:var(--ink-2)}
.pd-note{margin-top:14px;font-size:14px;line-height:1.45;color:var(--ink-2)}

/* 2. your step */
.pd-step-row{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2vw,28px);align-items:start}
.pd-num{font-family:var(--font-display);font-size:clamp(64px,7vw,104px);line-height:.8;font-weight:300;letter-spacing:-.04em;font-style:italic;opacity:.9;font-variation-settings:"SOFT" 100}
.pd-num-mask{display:grid;place-items:center;width:1.1em;height:1.1em;font-size:clamp(56px,6vw,88px)}
.pd-swatch{display:block;width:10px;height:10px;border-radius:50%;background:var(--nila);box-shadow:0 0 0 6px rgba(251,247,238,.14)}
.pd-step h2{margin-bottom:10px}
.pd-step-copy p{font-size:18px;line-height:1.5}
.pd-more{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-weight:600;border-bottom:1.5px solid currentColor;padding-bottom:2px}
.pd-step.tn-plaster-2{box-shadow:inset 0 0 0 2px var(--terracotta)}
.pd-step.tn-steam .pd-num{color:var(--umber)}
.pd-step.tn-sage .pd-num,.pd-step.tn-amber .pd-num{color:var(--umber-2)}

/* 3. how to use */
.pd-steps{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.pd-steps li{display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:baseline;padding-top:14px;border-top:1px solid rgba(42,29,21,.12)}
.pd-steps li:first-child{border-top:0;padding-top:0}
.pd-n{font-family:var(--font-display);font-size:34px;line-height:1;color:var(--terracotta);font-weight:360;font-variation-settings:"SOFT" 40}
.pd-steps p{font-size:18px;line-height:1.5}
.pd-inline{border-bottom:1.5px solid var(--terracotta);font-weight:600}

/* 4. good to know */
.pd-facts{display:grid;gap:10px}
.pd-size,.pd-ingr{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:baseline;font-size:17px}
.pd-tbc{font-size:15px;line-height:1.45;color:var(--ink-2);padding:10px 14px;border-left:3px solid var(--amber);background:rgba(255,255,255,.35);border-radius:0 var(--r) var(--r) 0}
.pd-cautions{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px}
.pd-cautions li{position:relative;padding-left:18px;font-size:16px;line-height:1.45}
.pd-cautions li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--terracotta)}
.pd-stain{margin-top:22px;padding:22px 24px;border-radius:var(--r);background:var(--terracotta);color:var(--off)}
.pd-stain-h{font-family:var(--font-display);font-style:italic;font-size:clamp(22px,2vw,26px);line-height:1.1;font-weight:320}
.pd-stain-lines{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px;font-size:16px;line-height:1.45}

/* 5. what the research measured */
.pd-res-name{margin-bottom:8px}
.pd-measured{font-family:var(--font-display);font-size:clamp(20px,1.7vw,23px);line-height:1.3;font-weight:360;letter-spacing:-.01em;font-variation-settings:"SOFT" 40}
.pd-not{margin-top:18px;padding-top:16px;border-top:1px solid rgba(42,29,21,.18)}
.tn-umber-2 .pd-not{border-top-color:rgba(251,247,238,.22)}
.pd-not p:last-child{font-size:16px;line-height:1.5}
.pd-sources{margin-top:16px}
.pd-sources ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.pd-sources a{font-size:14px;line-height:1.45;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(42,29,21,.4)}
.tn-umber-2 .pd-sources a{text-decoration-color:rgba(251,247,238,.5)}

/* 6. pairs with */
.pd-pairs{padding-top:12px}
.pd-pairs h2{font-size:clamp(24px,2.2vw,30px);margin-bottom:16px}
.pd-pair-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pd-pair{display:flex;flex-direction:column;min-height:100%;padding:14px 14px 16px;border-radius:var(--r-lg);transition:box-shadow .25s}
.pd-pair.tn-plaster{box-shadow:inset 0 0 0 1px rgba(42,29,21,.1)}
.pd-pair.tn-plaster-2{box-shadow:inset 0 0 0 1.5px var(--terracotta)}
/* the hover: lift.js lifts the object; the tile itself only deepens its shadow */
@media (hover:hover) and (pointer:fine){.pd-pair:hover{box-shadow:0 18px 30px -18px rgba(42,29,21,.45)}}
.pd-plate{position:relative;display:flex;align-items:flex-end;justify-content:center;height:132px;margin-bottom:12px}
.pd-plate::after{content:"";position:absolute;left:14%;right:14%;bottom:2px;height:1px;background:currentColor;opacity:.22}
.pd-plate-cut{height:112px;width:auto;max-width:100%;object-fit:contain;object-position:50% 100%}
.pd-plate-gift{transform:scale(.52);transform-origin:50% 100%;margin-bottom:-6px}
.pd-pair-name{font-family:var(--font-sans);font-weight:600;font-size:16px;line-height:1.3}
.pd-pair-price{margin-top:auto;padding-top:6px;font-family:var(--font-display);font-size:20px;line-height:1.2;font-weight:360;font-variation-settings:"SOFT" 40}

/* entry: the panels rise once as they arrive (base.css .reveal under lx-live); the stage never does */
html.lx-live .pd-panel.reveal:nth-child(2){transition-delay:.05s}
html.lx-live .pd-panel.reveal:nth-child(3){transition-delay:.1s}

/* tablets: the stage column keeps the proportion, the type steps down */
@media (max-width:1100px){
  .pd-grid{grid-template-columns:6fr 6fr}
  .pd-pair-list{grid-template-columns:repeat(2,1fr)}
}
/* phones: the stage first at 62svh (sticky off), then the stack */
@media (max-width:760px){
  .pd{padding-top:8px}
  .pd-grid{grid-template-columns:1fr;gap:14px}
  .pd-stagecol{position:static}
  .pd-stage{height:62svh;min-height:380px;--pv-top:9%;--pv-floor:74%;--pv-side:10%;--pv-cap-x:16px;--pv-cap-y:14px}
  .pd-stage{--plinth-y:74%}
  .pd-gift{top:74%}
  .pd-panel{padding:22px 20px 24px}
  .pd-buy h1{font-size:clamp(34px,9.5vw,44px)}
  .pd-price{font-size:36px}
  .pd-cta{width:100%;justify-content:center;min-height:52px}
  .pd-num{font-size:64px}
  .pd-size,.pd-ingr{grid-template-columns:1fr;gap:2px}
  .pd-steps li{grid-template-columns:36px 1fr}
  .pd-n{font-size:30px}
  /* the pairs become rows: the plate at the left, the name, the price at the right */
  .pd-pair-list{grid-template-columns:1fr;gap:10px}
  .pd-pair{flex-direction:row;align-items:center;gap:14px;padding:12px 16px 12px 12px}
  .pd-plate{width:92px;height:92px;margin:0;flex:none}
  .pd-plate::after{left:12%;right:12%}
  .pd-plate-cut{height:80px}
  .pd-plate-gift{transform:scale(.36)}
  .pd-pair-name{font-size:16px;flex:1}
  .pd-pair-price{margin:0 0 0 auto;padding:0;font-size:22px}
}
@media (prefers-reduced-motion:reduce){.pd-pair{transition:none}}