/* Scroll story on top of the original gift-box hero (mug3d.js adds .mug--gl and .hero--scroll once WebGL works;
   without WebGL the original hero keeps working with hover or tap). Also holds the accessibility fixes from the audit. */
:root{--dim:rgba(255,255,255,.58)}                                     /* was .38: 3.4:1, now above 6:1 */
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- the tall wrapper and its sticky screen */
.herowrap{position:relative}
.herowrap.mug--gl{height:470vh;height:470svh}
.hero.hero--scroll{position:sticky;top:0}
.mugcv,.mugfx{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.mug[data-phase="3"] .mugcv{pointer-events:auto;touch-action:pan-y;cursor:grab}
.mug.is-drag .mugcv{cursor:grabbing}
.hero--scroll .mugclip{display:none}
.hero.hero--scroll.is-open .hit{pointer-events:none}

/* the box opens with the scroll: lid lifts away (--o), then the box front fades (--b) */
.hero.hero--scroll .layer--lid{transition:none;will-change:transform,opacity;
  transform:translate(calc(var(--o,0)*9%),calc(var(--o,0)*-30%)) rotate(calc(var(--o,0)*8deg)) scale(calc(1 + var(--o,0)*.05));opacity:calc(1.5 - var(--o,0)*1.5)}
.hero.hero--scroll .layer--base{transition:none;opacity:calc(1 - var(--b,0));transform:translateY(calc(var(--b,0)*2.5%))}
/* the first-screen furniture leaves once the story starts (--fade) */
html .hero.hero--scroll .headline,html .hero.hero--scroll .tag,html .hero.hero--scroll .about,html .hero.hero--scroll .lead,html .hero.hero--scroll .plaques,html .hero.hero--scroll .scrollhint{opacity:calc(1 - var(--fade,0));transition:none}
.mug:not([data-phase="x"]) .about,.mug:not([data-phase="x"]) .plaques{pointer-events:none}

/* ---------- words, in the same thin face as the first screen */
.mug__col{position:absolute;z-index:6;left:var(--pad);top:50%;transform:translateY(-50%);width:min(31vw,470px);display:flex;flex-direction:column;gap:26px;pointer-events:none}
.mug__h{display:grid;font-family:var(--f);font-weight:200;font-size:clamp(34px,4.4vw,76px);line-height:1.04;letter-spacing:-.03em;color:#fff;text-wrap:balance;text-shadow:0 2px 28px rgba(40,4,6,.5)}
.mug__l{grid-area:1/1;opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .9s var(--ease);align-self:start}
.mug[data-phase="0"] .mug__l[data-s="0"],.mug[data-phase="1"] .mug__l[data-s="1"],.mug[data-phase="2"] .mug__l[data-s="2"],.mug[data-phase="3"] .mug__l[data-s="3"]{opacity:1;transform:none}
.mug__facts{margin:0;font-size:16px;line-height:1.5;color:rgba(255,255,255,.78);max-width:420px;opacity:0;transition:opacity .6s}
.mug:not([data-phase="x"]) .mug__facts{opacity:1}
.mug__panel{display:grid;gap:14px;opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease) .1s,transform .8s var(--ease) .1s;pointer-events:none;max-width:520px}
.mug[data-phase="3"] .mug__panel{opacity:1;transform:none;pointer-events:auto}
.mug__seg{display:inline-flex;gap:4px;padding:4px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(10,2,4,.45);justify-self:start}
.mug__seg button{min-height:44px;padding:0 18px;border-radius:999px;color:rgba(255,255,255,.8);font-size:15px;white-space:nowrap;transition:background .3s,color .3s}
.mug__seg button.is-on{background:var(--gold);color:#2a0710}
.mug__seg button:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px}
.mug__row{display:flex;flex-wrap:wrap;gap:10px}
.mug__row .btn{min-height:48px;white-space:nowrap}
.mug__row--t{align-items:center;gap:14px}
.mug__in{flex:1 1 230px;min-width:0;height:48px;padding:0 16px;border:1px solid rgba(255,255,255,.28);border-radius:999px;background:rgba(10,2,4,.45);color:#fff;font:inherit;font-size:16px}
.mug__in::placeholder{color:rgba(255,255,255,.62)}
.mug__in:focus-visible,.mug__row .btn:focus-visible,.mug__reset:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.mug__reset{display:none;min-height:44px;padding:0 6px;color:var(--gold-hi);text-decoration:underline;text-underline-offset:4px;font-size:15px}
.mug.has-photo .mug__reset{display:inline-block}
.mug__fit{display:none}.mug.has-photo .mug__fit{display:inline-flex}
.mug__note{margin:0;font-size:14px;color:rgba(255,255,255,.7)}
.mug__err{margin:0;font-size:14px;color:#ffb4a4}
.mug__steps{position:absolute;z-index:6;right:calc(var(--pad)*.5);top:50%;transform:translateY(-50%);display:grid;gap:12px;margin:0;padding:0;list-style:none;opacity:0;transition:opacity .5s}
.mug:not([data-phase="x"]) .mug__steps{opacity:1}
.mug__steps li{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.3);transition:height .5s var(--ease),background .5s}
.mug[data-phase="0"] .mug__steps li:nth-child(1),.mug[data-phase="1"] .mug__steps li:nth-child(2),.mug[data-phase="2"] .mug__steps li:nth-child(3),.mug[data-phase="3"] .mug__steps li:nth-child(4){height:26px;border-radius:6px;background:var(--gold)}
.mug__drag{position:absolute;z-index:6;left:50%;bottom:clamp(16px,3.4vh,34px);transform:translateX(-50%);margin:0;font-size:13px;letter-spacing:.1em;color:var(--dim);opacity:0;pointer-events:none;transition:opacity .6s}
.mug[data-phase="3"] .mug__drag{opacity:1}
/* without the scroll story these overlays do not exist */
.herowrap:not(.mug--gl) .mug__col,.herowrap:not(.mug--gl) .mug__steps,.herowrap:not(.mug--gl) .mug__drag,.herowrap:not(.mug--gl) .mugcv,.herowrap:not(.mug--gl) .mugfx{display:none}

/* ---------- phone */
@media (max-width:860px){
  .mugcv,.mugfx{inset:auto 0 0 0;height:165%}
  .herowrap.mug--gl{height:430vh;height:430svh}
  .mug__col{left:var(--pad);right:var(--pad);top:calc(env(safe-area-inset-top,0px) + 88px);bottom:auto;transform:none;width:auto;gap:12px;height:calc(100svh - 88px - env(safe-area-inset-top,0px) - 16px);justify-content:flex-start}
  .mug__panel{margin-top:auto;gap:10px;max-width:none;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 4px);background:linear-gradient(180deg,rgba(10,2,4,0),rgba(10,2,4,.74) 30%);margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);padding-top:34px}
  .mug__h{font-size:clamp(30px,8.6vw,48px)}
  .mug__facts{font-size:14px}
  .mug__row .btn{flex:1 1 auto;justify-content:center}
  .mug__note{display:none}
  .mug[data-phase="3"] .mug__facts{opacity:0}
  .mug__seg{display:flex;justify-self:stretch}.mug__seg button{flex:1;padding:0 8px;font-size:14px}
  .mug__row{gap:8px}.mug__row .btn{flex:1 1 calc(50% - 8px);padding-inline:10px;font-size:14px;min-height:44px}
  .mug__row .mug__fit{flex-basis:100%}
  .mug__in{height:44px}
  .mug__steps,.mug__drag{display:none}
}
@media (prefers-reduced-motion:reduce){.mug__l,.mug__panel,.mug__facts{transition:none}}
html[dir=rtl] .mug__col{left:auto;right:var(--pad)}html[dir=rtl] .mug__steps{right:auto;left:calc(var(--pad)*.5)}

/* ---------- shop link, footer link */
.shop__try{margin:0 0 22px}
.foot__legal{margin:26px 0 0;font-size:14px}.foot__legal a{color:var(--mut);text-decoration:underline;text-underline-offset:4px;display:inline-flex;align-items:center;min-height:44px}

/* ---------- audit fixes: reachable controls, readable text, toast out of the way */
.opt,.pk__opt,.chip{min-height:44px}
.opt,.pk__opt{height:auto;padding-block:6px}
.qty button{width:44px;height:44px}
.qty{margin-top:6px}
@media (pointer:fine){.opt,.pk__opt{min-height:36px}.qty button{width:36px;height:36px}.chip{min-height:42px}}
.card__badge,.coff__r,.coff__o,.bs__capo,.pk__sub,.price small,.index__n,.steps b,.cursor__label{font-size:12px}
.toast{bottom:auto;top:calc(env(safe-area-inset-top,0px) + 78px)}
.toast{transform:translate(-50%,-24px)}.toast.on{transform:translate(-50%,0)}
.lnk,.ltr{min-height:36px}
a.lnk{display:inline-flex;align-items:center;min-height:44px}