/* ===== high-conversion product-page system, cloned from dreamlightmask.co.uk's
   PDP engine and recoloured to the Thermoscup coffee palette. Mobile-first
   breakpoints (900px / 560px) are unchanged from the source - this is the
   pass that was specifically tuned for mobile there. ===== */
.pdp{--pdp-col-gap:clamp(24px,4vw,48px);--pdp-stack:26px;--pdp-r-control:6px;--pdp-r-card:14px;--pdp-cta-h:54px;
  --b-primary:#241811;--b-primary-fg:#FBF3E7;--b-accent:#C1712F;
  --b-bg:#FFFFFF;--b-surface:#F1E2C8;--b-border:rgba(43,27,16,.12);--b-text:#241811;--b-muted:#8A7A68;--b-ok:#6F8F3D;--b-sale:#C1712F;--b-eta:#C0392B;
  background:var(--b-bg);color:var(--b-text);
  padding:calc(var(--thermo-header-h,68px) + var(--thermo-announce-h,38px) + 24px) 0 40px;font-family:'Inter',system-ui,sans-serif}
.pdp .wrap{max-width:1400px;margin:0 auto;padding-inline:clamp(20px,4vw,80px)}
.pdp *{box-sizing:border-box}
.pdp__crumb{font-size:.8rem;color:var(--b-muted);padding:0 0 18px}
.pdp__crumb a:hover{color:var(--b-text)}
.pdp__grid{display:grid;grid-template-columns:minmax(0,1.92fr) minmax(360px,1fr);gap:var(--pdp-col-gap);align-items:start}
.gal{position:sticky;top:calc(var(--thermo-header-h,68px) + 20px)}
.gal__stage{position:relative;background:var(--b-surface);border:1px solid var(--b-border);border-radius:var(--pdp-r-card);overflow:hidden}
.gal__main{aspect-ratio:1/1;background:var(--b-surface);display:block}
.gal__main>img,.gal__main>video{width:100%;height:100%;object-fit:contain;transition:opacity .2s ease;display:block}
.gal__main.is-swapping>*{opacity:0}
.gal__nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;background:transparent;color:var(--b-text);font-size:1.9rem;line-height:1;cursor:pointer;display:grid;place-items:center;z-index:2;opacity:.7;transition:opacity .15s}
.gal__nav:hover{opacity:1}
.gal__nav--prev{left:6px}.gal__nav--next{right:6px}
.gal__count{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);background:rgba(36,24,17,.7);color:#fff;font-size:.72rem;padding:4px 11px;border-radius:999px;z-index:2}
.gal__playbtn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(36,24,17,.28);border:0;cursor:pointer;z-index:1}
.gal__playbtn svg{width:56px;height:56px;color:#fff;filter:drop-shadow(0 2px 8px rgba(0,0,0,.4))}
.gal__playbtn[hidden]{display:none}
.panel{display:flex;flex-direction:column;gap:var(--pdp-stack);position:sticky;top:calc(var(--thermo-header-h,68px) + 20px)}
.panel__head{display:flex;flex-direction:column;gap:10px}
.panel__eyebrow{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--b-muted);font-weight:700}
.panel h1{font-family:'Inter',sans-serif;font-weight:600;font-size:clamp(1.5rem,2.2vw,1.75rem);line-height:1.14;letter-spacing:-.01em;color:var(--b-text);margin:0}
.panel__badge{align-self:flex-start;background:var(--b-primary);color:var(--b-primary-fg);font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:6px 12px;border-radius:4px}
.pcard{border:1px solid var(--b-border);border-radius:var(--pdp-r-card);padding:18px 20px;background:var(--b-bg)}
.pcard__row{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.pcard__now{font-size:2.1rem;font-weight:700;color:var(--b-text);line-height:1}
.pcard__was{font-size:1.05rem;color:var(--b-muted);text-decoration:line-through}
.pcard__save{background:var(--b-sale);color:#fff;font-size:.7rem;font-weight:800;letter-spacing:.04em;padding:4px 10px;border-radius:999px;text-transform:uppercase}
.pcard__promo{margin-top:8px;font-size:.84rem;color:var(--b-muted)}
.pcard__promo b{color:var(--b-text);font-weight:800;letter-spacing:.03em;border-bottom:1px dashed currentColor}
.reassure{border:1px solid var(--b-border);border-radius:var(--pdp-r-card);padding:8px;display:flex;flex-direction:column;gap:8px;background:var(--b-bg)}
.reassure>div{display:flex;gap:10px;align-items:center;padding:11px 14px;font-size:.86rem;background:var(--b-surface);border-radius:8px}
.reassure svg{flex:none;width:16px;height:16px;color:var(--b-primary)}
.reassure .eta{color:var(--b-eta);font-weight:700;white-space:nowrap}
.vpick__label{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--b-muted);font-weight:700;margin-bottom:10px}
.vpick__label b{color:var(--b-text)}
.vpick__sw{display:flex;gap:10px;flex-wrap:wrap}
.vpick__sw button{width:38px;height:38px;border-radius:999px;border:1.5px solid var(--b-border);cursor:pointer;padding:0;position:relative;transition:transform .12s}
.vpick__sw button:hover{transform:translateY(-1px)}
.vpick__sw button[aria-pressed=true]{border-color:var(--b-primary);box-shadow:0 0 0 2px var(--b-bg),0 0 0 4px var(--b-primary)}
.buybox{display:flex;flex-direction:column;gap:12px}
.buyrow{display:flex;gap:12px;align-items:stretch}
.buyrow .pdp-qty{flex:none}
.buyrow .pdp-cta{flex:1}
.pdp-qty{display:flex;align-items:center;border:1.5px solid var(--b-border);border-radius:var(--pdp-r-control);height:var(--pdp-cta-h);width:118px;background:#fff}
.pdp-qty button{background:none;border:0;width:38px;height:100%;font-size:1.15rem;cursor:pointer;color:var(--b-text)}
.pdp-qty input{width:38px;text-align:center;border:0;background:none;font-weight:700;font:inherit;-moz-appearance:textfield}
.pdp-qty input::-webkit-outer-spin-button,.pdp-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pdp-cta{width:100%;height:var(--pdp-cta-h);border:0;border-radius:var(--pdp-r-control);background:var(--b-primary);color:var(--b-primary-fg);font:inherit;font-weight:700;font-size:1.02rem;letter-spacing:.02em;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:opacity .15s,transform .08s}
.pdp-cta:hover{opacity:.9}.pdp-cta:active{transform:translateY(1px)}.pdp-cta svg{width:19px;height:19px;flex-shrink:0}
.pdp-cta--alt{background:var(--b-accent);color:#fff;font-size:1.06rem;box-shadow:0 6px 20px rgba(193,113,47,.28)}
.pdp-cta--alt:hover{opacity:1;box-shadow:0 8px 26px rgba(193,113,47,.36)}
.pay-note{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 10px;font-size:.82rem;color:#4b4038;margin:2px 0 0;text-align:center}
.pay-note svg{flex:none;width:14px;height:14px}
.pay-note b{font-weight:700}
.pay-note .pay-badges{color:var(--b-muted)}
.confidence{border:1px solid var(--b-border);border-radius:var(--pdp-r-card);padding:16px 18px;background:var(--b-surface)}
.confidence__top{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;font-weight:700}
.confidence__top .in{color:var(--b-ok)}
.confidence__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;margin-top:12px;font-size:.8rem}
.confidence__grid h4{font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--b-text);margin-bottom:3px}
.confidence__grid p{color:var(--b-muted);line-height:1.45;margin:0}
.confidence__grid a{color:var(--b-accent)}
.pdp-acc{border-top:1px solid var(--b-border)}
.pdp-acc details{border-bottom:1px solid var(--b-border)}
.pdp-acc summary{list-style:none;cursor:pointer;padding:16px 2px;font-weight:600;font-size:.95rem;display:flex;justify-content:space-between;gap:14px;align-items:center}
.pdp-acc summary::-webkit-details-marker{display:none}
.pdp-acc summary::after{content:"+";color:var(--b-accent);font-size:1.25rem;line-height:1}
.pdp-acc details[open] summary::after{content:"-"}
.pdp-acc details>div{padding:0 2px 18px;color:var(--b-muted);font-size:.88rem;line-height:1.55;max-width:60ch}
.pdp-acc table{width:100%;border-collapse:collapse;font-size:.85rem}
.pdp-acc td{padding:8px 0;border-bottom:1px solid var(--b-border);vertical-align:top}
.pdp-acc td:first-child{color:var(--b-muted);width:38%}
.pdp-sbar{position:fixed;left:0;right:0;bottom:0;z-index:120;transform:translateY(110%);transition:transform .28s ease;display:flex;align-items:center;gap:14px;background:rgba(251,243,231,.98);backdrop-filter:blur(12px);border-top:1px solid var(--b-border);padding:10px clamp(14px,4vw,32px);padding-bottom:calc(10px + env(safe-area-inset-bottom))}
body.pdp-show-sbar .pdp-sbar{transform:none}
.pdp-sbar__nm{font-weight:700;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pdp-sbar__pr{font-weight:700;font-size:.95rem;margin-left:auto}
.pdp-sbar .pdp-cta{width:auto;flex:none;min-width:150px;height:42px;font-size:.92rem}
.thermo-sticky-atc{display:none!important}
.th-seo{background:#F7F1E8;color:var(--b-text);padding:54px 0 64px;font-family:'Inter',system-ui,sans-serif}
.th-seo .wrap{max-width:1180px;margin:0 auto;padding-inline:clamp(20px,4vw,80px)}
.th-seo__eyebrow{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--b-muted);font-weight:800;margin:0 0 10px}
.th-seo h2{font-size:clamp(1.65rem,3vw,2.35rem);line-height:1.12;margin:0 0 14px;color:var(--b-text);letter-spacing:0}
.th-seo p{color:#4b4038;line-height:1.68;margin:0}
.th-seo__intro{max-width:760px;font-size:1rem}
.th-seo__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:28px}
.th-seo article{background:#fff;border:1px solid var(--b-border);border-radius:8px;padding:20px}
.th-seo h3{font-size:1rem;line-height:1.25;margin:0 0 8px;color:var(--b-text);letter-spacing:0}
@media(max-width:900px){
  .pdp__grid{grid-template-columns:1fr;gap:22px}
  .gal,.panel{position:static}
  .gal__nav{background:rgba(255,255,255,.7);border-radius:999px;width:38px;height:38px;font-size:1.5rem}
  .th-seo__grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .pdp{--pdp-stack:18px;padding:calc(var(--thermo-header-h,62px) + var(--thermo-announce-h,34px) + 12px) 0 92px}
  .pdp .wrap{padding-inline:14px}
  .pdp__crumb{display:none}
  .gal__stage,.pcard,.reassure,.confidence{border-radius:10px}
  .gal__playbtn svg{width:44px;height:44px}
  .panel h1{font-size:1.45rem;line-height:1.12}
  .pcard{padding:16px}
  .pcard__now{font-size:2.25rem}
  .reassure>div{align-items:flex-start;padding:10px 12px;line-height:1.35}
  .buyrow{gap:8px}
  .pdp-qty{width:104px}
  .pdp-qty button{width:34px}
  .pdp-cta{height:56px;font-size:1rem}
  .confidence__grid{grid-template-columns:1fr}
  .pdp-sbar__nm{display:none}
  .pdp-sbar{gap:10px;padding:8px 12px;padding-bottom:calc(8px + env(safe-area-inset-bottom))}
  .pdp-sbar .pdp-cta{flex:1;min-width:0;height:46px}
  .th-seo{padding:36px 0 46px}
  .th-seo .wrap{padding-inline:14px}
  .th-seo article{border-radius:8px}
}