/* bestaivids.com · the new shop (1.11.2026): direction c, "love note", rebuilt. Ron: "only the video at the start, edge to edge and
   tall", "the logo large and centred on the film, settling into a paper bar", "the whole site in motion", "product pages that make
   sense", "a reaction to almost every movement of the mouse".
   Kept from c: the paper-and-ink page, colour only as full-strength pairs, the mark face for the mug words, the "me + [my man]" chip
   mark, the navy satin ribbon and the kraft gift tags and lids, the 56/28/56 rhythm, the button anatomy (words with a period, the
   price inside), the sheet, the flood. New: the film on top, the floating logo, the ribbon that ripples, the lamp light that follows
   the pointer, the product pages. No serif, no terracotta, no glass, blur or translucency, no pills, no purple.
   Motion rule: only transform and opacity move; js/motion.js drives the springs; prefers-reduced-motion makes the page still. */
:root {
  --paper: #FBF6EE;    /* letter paper: the page */
  --paper-2: #F4EBDC;  /* cream: tiles and chips */
  --sun: #FFFDF8;      /* the morning window light on the paper */
  --blush: #F6E3DE;    /* the love-letter pink band */
  --blush-2: #FDF5F2;  /* cards on the pink band */
  --rose: #EBCFC8;     /* the calm chip, the footer; navy on it 11.5:1 */
  --ink: #0B1B3F;      /* the mug-label navy; 15.7:1 on paper */
  --ink-2: #5B4C60;    /* secondary text; 7.4:1 on paper, 6.4:1 on blush, 5.4:1 on rose */
  --berry: #9C3753;    /* the one accent; 6.3:1 on paper */
  --ribbon: #3B4A74;   /* the ribbon's lit satin (sampled from p-pair.jpg) */
  --ribbon-hi: #56659A;
  --kraft: #AA8970;    /* the box (sampled); navy on it 5.3:1 */
  --hair: rgba(11, 27, 63, .12);
  --f-body: 'Assistant', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --f-mark: ui-rounded, 'SF Pro Rounded', 'Nunito', system-ui, -apple-system, sans-serif;
  --f-hand: 'Shantell Sans', 'Comic Neue', ui-rounded, sans-serif;
  --e-brand: cubic-bezier(.16, 1, .3, 1); --e-out: cubic-bezier(.23, 1, .32, 1); --e-io: cubic-bezier(.77, 0, .175, 1); --e-drawer: cubic-bezier(.32, .72, 0, 1);
  --g: max(16px, env(safe-area-inset-left), env(safe-area-inset-right));
  --bar: 60px;
  --r: 18px;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 84px; background: var(--paper); -webkit-tap-highlight-color: transparent; }
body { margin: 0; color: var(--ink); font: 400 17px/1.55 var(--f-body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
a { color: inherit; touch-action: manipulation; }
button:disabled { cursor: default; }
[hidden] { display: none !important; }
:focus-visible { outline: 2.5px solid var(--berry); outline-offset: 3px; border-radius: 6px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 60; background: var(--ink); color: var(--paper); padding: 12px 16px; border-radius: 10px; }
.skip:focus { left: var(--g); }
main { display: block; }
body:not([data-page="home"]) main { padding-top: calc(var(--bar) + 6px + env(safe-area-inset-top)); }

/* ---------- the bar: on the home page the logo floats big on the film and settles into it on scroll (--p: 0 floating, 1 settled) ---------- */
.top { position: fixed; inset: 0 0 auto; z-index: 30; padding-top: env(safe-area-inset-top); --p: 1; view-transition-name: top; }
body[data-page="home"] .top { --p: 0; }
.top::before { content: ""; position: absolute; inset: 0; background: var(--paper); opacity: var(--p); }
.bar { position: relative; display: flex; align-items: center; justify-content: space-between; height: var(--bar); padding: 0 var(--g); }
.brand { display: flex; align-items: center; min-height: 44px; min-width: 44px; text-decoration: none; }
.lg { position: relative; display: block; width: 80px; height: 40px; transform-origin: 0 0; }
.lg > span { position: absolute; inset: 0; background: url(/media/logo.png) 0 0 / 100% 100% no-repeat; }
.lg-b { clip-path: polygon(0 0, 41.7% 0, 41.7% 71.4%, 43.8% 71.4%, 43.8% 100%, 0 100%); transform-origin: 21% 96%; }
.lg-w { clip-path: polygon(41.7% 0, 100% 0, 100% 100%, 43.8% 100%, 43.8% 71.4%, 41.7% 71.4%); }
.lg > .lg-light { background-image: url(/media/logo-light.png); opacity: calc(1 - var(--p)); }
.lg > .lg-dark { opacity: var(--p); }
.bag { position: relative; width: 44px; height: 44px; display: grid; place-items: center; margin-right: -6px; border-radius: 50%; background: var(--paper); }
.bag path { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; stroke-linecap: round; }
.bag .n { position: absolute; top: 2px; right: -1px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ink); color: var(--paper); font: 800 11px/18px var(--f-mark); text-align: center; font-variant-numeric: tabular-nums; }
.bag .n:empty { display: none; }
.top .ribbon { position: relative; opacity: var(--p); }
/* the ribbon: lit satin over its shade, drawn once from the left */
.ribbon { height: 6px; overflow: hidden; }
.ribbon i { display: block; height: 100%; background: var(--ink); box-shadow: inset 0 1.5px 0 var(--ribbon), inset 0 3px 0 var(--ribbon); transform-origin: 0 50%; transform: scaleX(0); transition: transform 680ms var(--e-out); }
.ribbon.on i { transform: none; }

/* the lamp: a warm pool of light on the paper itself, following the pointer (Mac only). It sits under everything (z-index -1,
   the page's paper is the canvas behind it), so it never covers text, the film, the bar or the bag; plain alpha, no blending */
.lamp { display: none; }
@media (hover: hover) and (pointer: fine) {
  .lamp { display: block; position: fixed; left: 0; top: 0; z-index: -1; width: 680px; height: 680px; margin: -340px 0 0 -340px; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity 700ms ease;
    background: radial-gradient(closest-side, rgba(255, 196, 120, .30), rgba(255, 204, 136, .13) 50%, rgba(255, 214, 160, 0)); }
  html.lamp-on .lamp { opacity: 1; }
}

/* ---------- the film: edge to edge, square on a phone, tall on a Mac ---------- */
.hero { position: relative; }
.reel { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #3A2A1E; }
.reel-in { position: absolute; inset: 0; }
.reel-still, .reel-still img, .hero-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-v { opacity: 0; transition: opacity 500ms ease; }
.hero-v.on { opacity: 1; }
/* the ribbon ties the film like the gift it is: drawn once, then it ripples where it is touched; the bow sits on the knot */
.tie { position: relative; z-index: 3; height: 0; }
.band { position: absolute; left: 0; right: 0; top: -6px; height: 12px; transform-origin: 0 50%; overflow-x: clip; overflow-y: visible; }
.band i { position: absolute; top: 0; height: 12px; background: var(--ink); box-shadow: inset 0 2px 0 var(--ribbon-hi), inset 0 5px 0 var(--ribbon); }
.band .full { left: 0; right: 0; }
html.mo .band { transform: scaleX(0); transition: transform 760ms var(--e-out); }
html.mo .tie.on .band { transform: none; }
.bow { position: absolute; left: 50%; top: -24px; width: 70px; height: 46px; margin-left: -35px; transform-origin: 50% 45%; }
.bow path, .bow rect { fill: var(--ribbon); } .bow .b2 { fill: var(--ink); } .bow .hi { fill: var(--ribbon-hi); }
html.mo .bow { transform: scale(.2); opacity: 0; }
html.mo .tie.on .bow { opacity: 1; transition: opacity 200ms ease 560ms; }

/* ---------- right under the film: the chip mark, the four words, the price, the button ---------- */
.buy { position: relative; overflow: hidden; padding: 26px var(--g) 22px; text-align: center; }
.buy-in { position: relative; z-index: 1; }
/* the morning window light, drifting slowly across the paper (from direction a) */
.light { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.light svg { position: absolute; left: -10%; top: 0; width: 120%; height: 100%; }
.light polygon { fill: var(--sun); }
html.mo .light g { animation: sun 22s ease-in-out infinite alternate; }
.mark { margin: 0; display: flex; justify-content: center; align-items: center; gap: .18em; font: 900 34px/1 var(--f-mark); letter-spacing: -.02em; }
.mk { position: relative; display: inline-block; padding: .06em .24em .14em; border-radius: 10px; white-space: nowrap; }
.m-me { background: var(--ink); color: var(--blush); }
.m-calm { overflow: hidden; text-align: center; color: var(--ink); }
.slot-bg { position: absolute; inset: 0; border-radius: 10px; background: var(--rose); transform-origin: 50% 50%; }
.slot-w { position: relative; display: inline-block; }
.slot-ghost { position: absolute; left: 0; right: 0; top: .06em; text-align: center; pointer-events: none; }
.plus { color: var(--berry); font-weight: 800; display: inline-block; }
.ask { display: flex; align-items: center; justify-content: center; min-height: 28px; margin: 5px 0 3px; font: 700 17px/1.1 var(--f-hand); letter-spacing: -.01em; }
.labels { display: grid; grid-template-columns: repeat(4, auto); justify-content: stretch; gap: 6px; min-height: 46px; }
.labels button { position: relative; min-height: 46px; padding: 0 6px; border-radius: 10px; background: var(--paper-2); color: var(--ink); font: 800 15px/1.1 var(--f-mark); letter-spacing: -.01em; white-space: nowrap; transition: background-color 200ms ease, color 200ms ease; }
.labels button[aria-checked="true"] { background: var(--ink); color: var(--blush); }
.price { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px 10px; margin: 10px 0 8px; }
.price b { font: 800 32px/1 var(--f-body); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.price .was, .price .ship { color: var(--ink-2); font-size: 15px; }
.price s { color: var(--ink-2); font-weight: 700; text-decoration-color: var(--berry); text-decoration-thickness: 2px; font-variant-numeric: tabular-nums; }
.price .ship::before { content: "·"; margin-right: .35em; }
.price .was + .ship { margin-left: -4px; }
/* the button: a full-width block, words that end with a period, the price at the far end */
.cta, .btn { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 54px; padding: 0 20px; border-radius: 10px; background: var(--ink); color: var(--paper); font: 900 19px/1.05 var(--f-mark); letter-spacing: -.005em; text-decoration: none; transition: background-color 200ms ease, box-shadow 200ms ease; }
.cta .r, .btn .r, .add .r { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cta:disabled, .add:disabled { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); justify-content: center; }
.cta.done, .add.done { background: var(--berry); }
@media (hover: hover) and (pointer: fine) {
  .cta:not(:disabled):hover, .btn:not(.ghost):hover, .add:not(:disabled):hover, button.bb:hover { background-color: #172B5C; }
  .pb-add:not(:disabled):not(.done):hover { background-color: #F1DAD4; }
  .labels button:hover:not([aria-checked="true"]) { background: #EDE1CE; }
}
.when { margin: 10px 0 0; font-size: 15px; color: var(--ink-2); text-align: center; text-wrap: balance; }
.when b { color: var(--ink); }
.look { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 2px; font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; text-decoration-color: rgba(11, 27, 63, .3); transition: text-decoration-color 200ms ease; }
.look:hover { text-decoration-color: var(--ink); }
.look .ar { display: inline-block; text-decoration: none; margin-left: 2px; transition: transform 240ms var(--e-out); }
.look:hover .ar { transform: translateX(3px); }
.trust { list-style: none; margin: 10px auto 0; padding: 0; display: grid; gap: 4px; justify-content: center; font-size: 15px; color: var(--ink-2); text-align: left; }
.trust li { position: relative; padding-left: 18px; }
.trust li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 2px; background: var(--berry); }

/* ---------- the rhythm: 56 above each heading block, 28 under it ---------- */
.head { display: grid; gap: 12px; padding: 56px var(--g) 28px; }
.over { margin: 0; font: 700 15px/1.3 var(--f-body); color: var(--berry); }
.h2 { margin: 0; font: 700 38px/1.04 var(--f-body); letter-spacing: -.028em; text-wrap: balance; }
.lede { margin: 0; max-width: 36em; font: 400 18px/1.5 var(--f-body); color: var(--ink-2); text-wrap: pretty; }

/* reveals: once per section, when it comes into view */
html.rv-on [data-rv] { transition: opacity 760ms var(--e-brand) var(--rd, 0ms), transform 760ms var(--e-brand) var(--rd, 0ms); }
html.rv-on [data-rv]:not(.in) { opacity: 0; transform: translateY(22px); }
html.rv-on [data-rv].rv-done { transition: none; }

/* ---------- the mugs, one by one: the pink band, four cards, each leading to its page ---------- */
.mugs { background: var(--blush); margin-top: 34px; padding-bottom: 56px; }
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 12px; padding: 0 var(--g); }
.cell { display: flex; }
.card { position: relative; display: flex; flex-direction: column; width: 100%; transform-origin: 50% 60%; }
.card-a { display: flex; flex-direction: column; flex: 1; text-decoration: none; color: inherit; }
.ph { position: relative; margin: 0 0 12px; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: var(--blush-2); }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.card .tag { align-self: flex-start; }
.tag { position: relative; display: inline-block; margin: 0 0 8px; padding: 4px 10px 5px 18px; background: var(--kraft); color: var(--ink); font: 700 13.5px/1.2 var(--f-hand); clip-path: polygon(9px 0, 100% 0, 100% 100%, 9px 100%, 0 50%); }
.tag::before { content: ""; position: absolute; left: 7px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--blush); }
.nm3 { margin: 0 0 4px; font: 700 20px/1.12 var(--f-body); letter-spacing: -.015em; }
.ln { margin: 0 0 10px; flex: 1; font-size: 14.5px; line-height: 1.4; color: var(--ink-2); }
.ln b { color: var(--ink); font-family: var(--f-mark); font-weight: 800; }
.pline { margin: 0 0 10px; font-size: 14px; color: var(--ink-2); }
.pline b { font: 700 19px/1 var(--f-body); color: var(--ink); font-variant-numeric: tabular-nums; margin-right: 4px; }
.add { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 48px; padding: 0 14px; border-radius: 10px; background: var(--ink); color: var(--paper); font: 900 16px/1 var(--f-mark); transition: background-color 200ms ease; }
.extra { display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: center; margin: 26px var(--g) 0; padding: 14px; border-radius: 16px; background: var(--blush-2); }
.extra .phones { position: relative; height: 112px; }
.extra .phones img { position: absolute; width: 48px; height: 104px; object-fit: cover; border-radius: 10px; border: 3px solid var(--ink); top: 2px; }
.extra .phones img:first-child { left: 4px; transform: rotate(-7deg); } .extra .phones img:last-child { left: 38px; top: 6px; transform: rotate(6deg); }
/* the two phones fan out when the pointer comes over the note */
@media (hover: hover) and (pointer: fine) {
  .extra .phones img { transition: transform 520ms cubic-bezier(.34, 1.56, .64, 1); }
  .extra:hover .phones img:first-child { transform: translate(-7px, -3px) rotate(-15deg); }
  .extra:hover .phones img:last-child { transform: translate(8px, -5px) rotate(13deg); }
}
.extra .nm3 { font-size: 18px; }
.extra p { margin: 0; font-size: 14.5px; line-height: 1.4; color: var(--ink-2); }
.extra .pr { color: var(--ink); font-weight: 700; }
/* the lid lifts once: a kraft block tied with the ribbon covers each card picture and rises off it when it comes into view */
.lid::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(var(--ink), var(--ink)) 50% 50% / 100% 12px no-repeat, linear-gradient(var(--ink), var(--ink)) 50% 50% / 12px 100% no-repeat, var(--kraft);
  transform: translateY(-101%); transition: transform 560ms var(--e-io) calc(var(--rd, 0ms) + 120ms); }
html.rv-on [data-rv]:not(.in) .lid::after { transform: none; transition: none; }

/* ---------- the films: a channel page, like YouTube ---------- */
.films { padding: 56px 0 64px; }
.chan-wrap { padding: 0 var(--g); }
.banner { width: 100%; height: auto; aspect-ratio: 2.4 / 1; object-fit: cover; object-position: 50% 42%; border-radius: 14px; }
.chan { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; margin-top: 16px; }
.av { width: 64px; height: 64px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--hair); }
.chan h2 { margin: 0; font: 800 22px/1.15 var(--f-body); letter-spacing: -.015em; }
.chan p { margin: 2px 0 0; font-size: 14px; color: var(--ink-2); line-height: 1.35; }
.follow { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 16px; border-radius: 10px; background: var(--ink); color: var(--paper); font: 800 15px/1 var(--f-mark); text-decoration: none; }
.tabs { display: flex; gap: 22px; margin: 18px 0 16px; border-bottom: 1px solid var(--hair); font: 800 15px/1 var(--f-mark); }
.tabs span { padding: 12px 2px; color: var(--ink-2); }
.tabs .on { color: var(--ink); box-shadow: inset 0 -3px 0 var(--ink); }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 12px; }
.short { display: flex; flex-direction: column; }
.film { display: block; width: 100%; text-align: left; }
.thumb { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: var(--ink); box-shadow: 0 22px 46px -28px rgba(11, 27, 63, .6); }
.thumb img, .thumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.thumb video { opacity: 0; transition: opacity 300ms ease; }
.thumb video.on { opacity: 1; }
.dur { position: absolute; z-index: 1; right: 8px; bottom: 8px; padding: 3px 7px; border-radius: 6px; background: var(--ink); color: var(--paper); font: 800 12px/1.3 var(--f-mark); font-variant-numeric: tabular-nums; }
.playi { position: absolute; z-index: 1; left: 10px; top: 10px; width: 30px; height: 30px; border-radius: 50%; background: var(--paper); }
.playi::after { content: ""; position: absolute; left: 12px; top: 9px; border-left: 9px solid var(--ink); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.meta { display: block; margin-top: 10px; }
.t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 700 16px/1.25 var(--f-body); }
.by { display: block; margin-top: 2px; font-size: 13.5px; color: var(--ink-2); }
.from { display: inline-block; align-self: flex-start; min-height: 44px; padding: 11px 0; font: 800 15px/1.25 var(--f-mark); color: var(--berry); text-decoration: none; }
.from span { display: inline-block; margin-left: 2px; transition: transform 240ms var(--e-out); }
.from:hover span { transform: translateX(3px); }

/* ---------- the close: the rose ground, the ribbon, the film's two words ---------- */
.foot { position: relative; background: var(--rose); color: var(--ink); padding: 0 var(--g) calc(30px + env(safe-area-inset-bottom)); font-size: 14px; text-align: center; }
.foot .ribbon { margin: 0 calc(-1 * var(--g)) 40px; }
.foot .big { margin: 0 0 22px; color: var(--ink); font: 900 40px/1 var(--f-mark); letter-spacing: -.02em; }
.foot p { margin: 0 0 6px; color: var(--ink-2); } .foot b { color: var(--ink); }
.links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 20px; margin-top: 6px; }
.links a, a.hit { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; justify-content: center; font-weight: 700; color: var(--ink); text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.mine { color: var(--ink) !important; }
body.bb-on .foot { padding-bottom: calc(108px + env(safe-area-inset-bottom)); }

/* ---------- the bag bar: once something is in the bag, it rises from the bottom ---------- */
.bagbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; padding: 0 12px calc(12px + env(safe-area-inset-bottom)); pointer-events: none; visibility: hidden; transform: translateY(130%); transition: transform 460ms var(--e-drawer), visibility 0s linear 460ms; }
.bagbar.on { visibility: visible; transform: none; transition: transform 460ms var(--e-drawer), visibility 0s; }
.bb { pointer-events: auto; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; width: 100%; max-width: 520px; min-height: 60px; margin: 0 auto; padding: 8px 16px 8px 8px; border-radius: 14px; background: var(--ink); color: var(--paper); text-align: left; box-shadow: 0 18px 40px -18px rgba(11, 27, 63, .55); transition: background-color 200ms ease; }
.bb-art { display: flex; width: 44px; height: 44px; border-radius: 10px; overflow: hidden; background: var(--rose); }
.bb-art img { width: 100%; height: 100%; object-fit: cover; }
.bb-t { font: 700 16px/1.2 var(--f-body); font-variant-numeric: tabular-nums; }
.bb-t small { display: block; font-size: 13px; font-weight: 600; color: #D9DDEA; }
.bb-go { font: 900 16px/1 var(--f-mark); white-space: nowrap; }
/* a product page's buy bar: the same place as the bag bar; it carries her add while the page's own button is off the screen */
.bb-buy { grid-template-columns: auto minmax(0, 1fr) auto; padding-right: 8px; cursor: default; }
.bb-buy .bb-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-buy .bb-t small { overflow: hidden; text-overflow: ellipsis; }
.pb-add { position: relative; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; border-radius: 10px; background: var(--rose); color: var(--ink); font: 900 16px/1 var(--f-mark); white-space: nowrap; transition: background-color 200ms ease; }
.pb-add .r { font-variant-numeric: tabular-nums; }
.pb-add:disabled { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 2px var(--paper); }
.pb-add.done { background: var(--blush); }
/* the word that flies into the bag */
.fly { position: fixed; left: 0; top: 0; margin: 0; z-index: 70; padding: 6px 12px 8px; border: 0; border-radius: 10px; background: var(--rose); color: var(--ink); font: 900 17px/1 var(--f-mark); white-space: nowrap; pointer-events: none; inset: auto; overflow: visible; }

/* ---------- the cart: a paper sheet on a spring curve ---------- */
dialog { border: 0; padding: 0; color: var(--ink); }
dialog::backdrop { background: rgba(0, 0, 0, .48); }
.sheet { margin: auto 0 0; width: 100%; max-width: 100%; max-height: calc(100dvh - 40px); border-radius: var(--r) var(--r) 0 0; background: var(--paper); transform: translateY(100%); transition: transform 450ms var(--e-drawer); overflow: hidden; }
.sheet[open] { display: flex; flex-direction: column; }
.sheet[data-open] { transform: none; }
.sheet-in { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.grab { width: 40px; height: 5px; border-radius: 3px; background: var(--hair); margin: 8px auto 0; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; padding: 8px var(--g) 4px; }
.sheet h2 { margin: 0; font: 700 26px/1.1 var(--f-body); letter-spacing: -.02em; }
.x { position: relative; width: 44px; height: 44px; display: grid; place-items: center; margin-right: -6px; border-radius: 10px; background: var(--paper-2); }
.x path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--g); }
.added { margin: 6px 0 0; font: 700 16px/1.3 var(--f-hand); color: var(--berry); }
.lines { list-style: none; margin: 6px 0 12px; padding: 0; }
.cline { display: grid; grid-template-columns: 62px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.cline .thumb-s { width: 62px; height: 62px; border-radius: 10px; overflow: hidden; background: var(--rose); }
.cline .thumb-s img { width: 100%; height: 100%; object-fit: cover; }
.nm { font-weight: 700; line-height: 1.25; } .kd { font-size: 13.5px; color: var(--ink-2); }
.qty { display: flex; align-items: center; gap: 2px; margin-top: 4px; }
.qty button { position: relative; width: 44px; height: 44px; border-radius: 10px; background: var(--paper-2); font: 800 20px/1 var(--f-mark); }
.qty button:disabled { color: rgba(11, 27, 63, .35); }
.qty output { min-width: 28px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.cline .pr { text-align: right; font: 800 17px/1 var(--f-body); font-variant-numeric: tabular-nums; }
.rm { display: block; margin-left: auto; min-height: 44px; min-width: 44px; font-size: 14px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.bump { position: relative; width: 100%; display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: center; text-align: left; padding: 12px 14px; border-radius: 14px; background: var(--blush); margin-bottom: 14px; min-height: 64px; box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow 200ms ease; }
.bump small { display: block; color: var(--ink-2); font-size: 13.5px; margin-top: 2px; line-height: 1.35; }
.bump .tick { width: 24px; height: 24px; border-radius: 7px; box-shadow: inset 0 0 0 2px var(--ink-2); background: var(--blush-2); }
.bump > b { font-variant-numeric: tabular-nums; }
.bump[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--ink); }
.bump[aria-checked="true"] .tick { background: var(--ink); box-shadow: inset 0 0 0 4px var(--blush); }
.sum { display: grid; gap: 4px; margin-bottom: 8px; font-size: 15px; color: var(--ink-2); }
.sum div { display: flex; justify-content: space-between; align-items: baseline; }
.sum .tot { color: var(--ink); } .sum .tot b { font: 800 26px/1 var(--f-body); font-variant-numeric: tabular-nums; }
.facts { list-style: none; padding: 0; margin: 6px 0 4px; font-size: 14px; color: var(--ink-2); display: grid; gap: 0; }
.facts b { color: var(--ink); }
#cartPay { position: sticky; bottom: 0; margin: 0 calc(-1 * var(--g)); padding: 12px var(--g) calc(14px + env(safe-area-inset-bottom)); background: var(--paper); box-shadow: inset 0 1.5px 0 var(--hair); }
.pp-box { min-height: 50px; }
.pp-box .when { margin: 0; padding: 14px 0; border-radius: 10px; background: var(--paper-2); color: var(--ink); font-weight: 600; }
.msg { min-height: 1.4em; margin: 8px 0 0; font-size: 14px; color: var(--ink-2); }
.msg.err { color: var(--berry); font-weight: 600; }
.empty { text-align: center; padding: 10px 0 calc(18px + env(safe-area-inset-bottom)); }
.empty p { color: var(--ink-2); }
.thanks { text-align: center; margin: 10px 0 calc(18px + env(safe-area-inset-bottom)); padding: 22px 18px; border-radius: var(--r); background: var(--rose); animation: flood 680ms var(--e-out) both; }
.thanks h3 { margin: 4px 0 10px; font: 700 30px/1.1 var(--f-hand); }
.thanks p { margin: 0 0 8px; color: var(--ink-2); } .thanks b { color: var(--ink); }
.thanks .meta { display: block; font-size: 13.5px; margin-top: 0; }
.thanks-art { width: min(200px, 56%); height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 16px; margin: 0 auto 12px; }
.dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.dl a { display: grid; gap: 6px; justify-items: center; padding: 10px; border-radius: 14px; background: var(--blush-2); text-decoration: none; font: 800 14px/1.2 var(--f-mark); min-height: 44px; }
.dl img { width: 64px; height: 138px; object-fit: cover; border-radius: 10px; }
.btn { margin-top: 8px; justify-content: center; }
.pp-go { width: 100%; min-height: 52px; border-radius: 6px; background: #FFC439; color: #111; font: 700 17px/1 var(--f-body); }
.pp-go:disabled { opacity: .6; }

/* ---------- the film player: it grows from the card it was tapped on ---------- */
.player { width: min(420px, 100%); max-width: 100%; max-height: 100%; background: #000; border-radius: 14px; overflow: hidden; color: #fff; }
.player[open] { animation: zoom-in 460ms var(--e-drawer); }
.player-in { position: relative; }
.player video { width: 100%; aspect-ratio: 9 / 16; max-height: 74vh; object-fit: contain; background: #000; }
.pbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); }
.pbar b { font-weight: 700; }
.pbar .go, .pbar .again { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 10px; font: 900 15px/1 var(--f-mark); text-decoration: none; }
.pbar .go { background: var(--rose); color: var(--ink); }
.pbar .go::after { content: " →"; white-space: pre; }
.pbar .go img { width: 32px; height: 32px; margin: 0 10px 0 -10px; border-radius: 7px; object-fit: cover; }
.pbar .again { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px #fff; }
.player:not(.ended) .pbar .again { display: none; }
.player.ended .pbar { background: var(--ink); animation: tray 320ms var(--e-out) both; }
.player .x { position: absolute; top: 8px; right: 8px; margin: 0; background: #0B0B0B; color: #fff; }
:where(.player, .foot) :focus-visible { outline-color: currentColor; }

/* ---------- the product pages ---------- */
.crumbs { display: flex; align-items: center; gap: 6px; padding: 0 var(--g); font-size: 14px; color: var(--ink-2); }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; font-weight: 700; color: var(--ink); text-decoration: none; }
.crumbs a span { display: inline-block; margin-right: 4px; transition: transform 240ms var(--e-out); }
.crumbs a:hover span { transform: translateX(-3px); }
.pp { padding-bottom: 8px; }
.gal { position: relative; }
.g-main { position: relative; overflow: hidden; background: var(--paper-2); }
.g-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; outline-offset: -3px; }
.g-track::-webkit-scrollbar { display: none; }
.g-slide { position: relative; flex: 0 0 100%; margin: 0; scroll-snap-align: start; scroll-snap-stop: always; aspect-ratio: 1; background: var(--paper-2); overflow: hidden; }
.pp[data-id="poster"] .g-slide { aspect-ratio: 4 / 5; }
.g-slide img { width: 100%; height: 100%; object-fit: cover; }
.g-slide.art img { object-fit: contain; padding: 6% 0; }
.g-slide.film img { object-position: 50% 32%; }
.g-slide figcaption { position: absolute; left: 12px; bottom: 12px; right: 64px; z-index: 1; display: inline-block; justify-self: start; width: max-content; max-width: calc(100% - 76px); padding: 6px 10px 7px; border-radius: 10px; background: var(--paper); color: var(--ink); font: 700 13.5px/1.3 var(--f-body); }
.g-slide.size figcaption { top: 12px; bottom: auto; }
.g-count { position: absolute; z-index: 2; right: 12px; bottom: 12px; padding: 6px 10px 7px; border-radius: 10px; background: var(--ink); color: var(--paper); font: 800 13px/1.2 var(--f-mark); font-variant-numeric: tabular-nums; pointer-events: none; }
.g-size { display: grid; place-items: center; width: 100%; height: 100%; }
.g-size svg { width: 86%; height: 86%; }
.g-size .ln-i { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.g-size .ln-d { fill: none; stroke: var(--berry); stroke-width: 2; stroke-linecap: round; }
.g-size .fill-w { fill: #FFFDFB; } .g-size .fill-p { fill: var(--blush); }
.g-size text { font: 700 22px var(--f-hand); fill: var(--ink); }
.g-size .t-b { fill: var(--berry); }
.g-thumbs { display: flex; gap: 7px; padding: 10px var(--g) 2px; overflow-x: auto; scrollbar-width: none; }
.g-thumbs::-webkit-scrollbar { display: none; }
.g-thumbs button { position: relative; flex: none; width: 48px; height: 48px; border-radius: 10px; overflow: hidden; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--hair); }
.g-thumbs button::after { content: ""; position: absolute; inset: 0; border-radius: 10px; box-shadow: inset 0 0 0 2.5px var(--ink); opacity: 0; transition: opacity 200ms ease; }
.g-thumbs button[aria-current="true"]::after { opacity: 1; }
.g-thumbs img, .g-thumbs svg { width: 100%; height: 100%; object-fit: cover; }
.g-thumbs .tb-art img { object-fit: contain; padding: 4px 0; }
.g-thumbs .tb-size { display: grid; place-items: center; font: 800 12px/1.1 var(--f-mark); color: var(--ink); background: var(--blush); }
.g-note { margin: 8px var(--g) 0; font-size: 13px; color: var(--ink-2); }
.info { position: relative; overflow: hidden; padding: 14px var(--g) 8px; }
.info > :not(.light) { position: relative; z-index: 1; }
.info h1 { margin: 0; font: 700 34px/1.05 var(--f-body); letter-spacing: -.028em; }
.info h1 .w { font-family: var(--f-mark); font-weight: 900; }
.info .price { justify-content: flex-start; margin: 8px 0 6px; }
.what { margin: 0 0 10px; font-size: 16px; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
.what b { color: var(--ink); font-family: var(--f-mark); font-weight: 800; }
.info .ask { justify-content: flex-start; }
.info .when { text-align: left; }
.ship-l { margin: 4px 0 0; font-size: 14px; color: var(--ink-2); }
.ship-l a { color: var(--ink); font-weight: 700; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; }
.sec { padding: 0 var(--g); }
.sec h2 { margin: 30px 0 10px; font: 700 22px/1.2 var(--f-body); letter-spacing: -.015em; }
.dets { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.dets li { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hair); font-size: 15.5px; line-height: 1.45; color: var(--ink-2); }
.dets li > b { color: var(--ink); font: 800 15px/1.45 var(--f-mark); }
.box { list-style: none; margin: 0; padding: 14px 16px; border-radius: 16px; background: var(--blush); display: grid; gap: 10px; }
.box li { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; font-size: 15.5px; line-height: 1.4; color: var(--ink-2); }
.box li img { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; background: var(--blush-2); }
.box li b { color: var(--ink); }
.box .no { display: block; padding-top: 2px; font-size: 14px; }
.small { margin: 12px 0 0; font-size: 13.5px; color: var(--ink-2); }
.small summary { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--ink); cursor: pointer; }
.small p { margin: 0 0 8px; }
.goes { margin-top: 8px; padding-bottom: 48px; }
.goes-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mini { position: relative; display: block; text-decoration: none; color: inherit; transform-origin: 50% 60%; }
.mini .ph { margin-bottom: 8px; border-radius: 12px; }
.mini b { display: block; font: 700 15px/1.2 var(--f-body); }
.mini span { display: block; font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* ---------- orders & delivery, and the 404 ---------- */
.doc { padding: 8px var(--g) 40px; max-width: 640px; margin-inline: auto; }
.doc .back { display: inline-flex; gap: 6px; align-items: center; min-height: 44px; min-width: 44px; text-decoration: none; color: var(--ink-2); font-weight: 600; }
.doc h1 { display: block; font: 700 38px/1.05 var(--f-body); letter-spacing: -.028em; margin: 6px 0 14px; }
.doc h2 { font: 700 21px/1.2 var(--f-body); letter-spacing: -.015em; margin: 28px 0 6px; }
.doc p, .doc li { color: var(--ink-2); } .doc b { color: var(--ink); }
.doc ul { padding-left: 20px; margin: 0; } .doc li { margin-bottom: 6px; }

/* ---------- moving between pages: the bar stays, the product picture travels (cross-document view transitions) ---------- */
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: 440ms; animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
::view-transition-old(root) { animation: 220ms ease both vt-out; }
::view-transition-new(root) { animation: 360ms cubic-bezier(.23, 1, .32, 1) 60ms both vt-in; }

@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes sun { from { transform: translateX(-14px); } to { transform: translateX(16px); } }
@keyframes flood { from { clip-path: circle(0 at 50% 100%); } to { clip-path: circle(150% at 50% 100%); } }
@keyframes zoom-in { from { transform: translate(var(--dx, 0px), var(--dy, 24px)) scale(.4); opacity: .2; } to { transform: none; opacity: 1; } }
@keyframes tray { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .ribbon i { transform: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }   /* reduced motion: the pages swap at once; still opted in, so the two pages never disagree */
}
@media (prefers-contrast: more) { :root { --ink-2: #3E3346; --hair: rgba(11, 27, 63, .3); } }

/* ---------- a Mac: the film stays edge to edge and tall; the choice and the price sit side by side under it ---------- */
@media (min-width: 700px) {
  .reel { aspect-ratio: auto; height: clamp(420px, min(calc(100svh - 270px), 46vw), 900px); }
  /* the wide loop is 3:2 and this box is about 2.3:1, so it is cut: framed on the mugs at rest (they sit on the shelf 6 of
     every 8 seconds, with their words), the box's rim just above. At the hop's peak the mugs rise out of the top for half a second */
  .reel-still img, .hero-v { object-position: 50% 90%; }
  .cards { grid-template-columns: repeat(4, 1fr); gap: 28px 20px; }
  .grid { grid-template-columns: repeat(4, minmax(0, 220px)); gap: 22px; }
  .banner { aspect-ratio: 2.8 / 1; object-position: 50% 56%; }
  .goes-row { gap: 20px; }
}
@media (min-width: 900px) {
  :root { --g: 32px; --bar: 66px; }
  .lg { width: 100px; height: 50px; }
  .buy { padding: 28px var(--g) 16px; }
  .buy-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 64px; align-items: center; max-width: 1100px; margin: 0 auto; text-align: left; }
  .buy-l .mark { justify-content: flex-start; font-size: 50px; }
  .buy-l .ask { justify-content: flex-start; margin-top: 12px; }
  .buy-r .price { justify-content: flex-start; margin-top: 0; }
  .buy-r .when { text-align: left; }
  .trust { display: flex; gap: 6px 26px; grid-column: 1 / -1; justify-content: center; margin-top: 14px; }
  .head, .cards, .chan-wrap, .extra { max-width: 1160px; margin-inline: auto; }
  .head, .cards, .chan-wrap { padding-left: var(--g); padding-right: var(--g); }
  .extra { margin-top: 30px; max-width: calc(1160px - 2 * var(--g)); }
  .h2 { font-size: 48px; }
  .foot > :not(.ribbon) { max-width: 640px; margin-inline: auto; }
  .sheet { max-width: 520px; margin: auto auto 0; }
  /* product pages: the gallery stays while the facts scroll beside it */
  .crumbs { max-width: 1160px; margin: 0 auto; }
  .pp-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 0 56px; max-width: 1160px; margin: 0 auto; padding: 0 var(--g); align-items: start; }
  .gal { position: sticky; top: calc(var(--bar) + 18px); }
  .g-main { border-radius: var(--r); }
  .g-thumbs, .g-note { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; }
  .info, .sec { padding-left: 0; padding-right: 0; }
  .info { padding-top: 6px; overflow: visible; }
  .info h1 { font-size: 46px; }
  .what { font-size: 17px; line-height: 1.55; }
  .goes { max-width: 1160px; margin: 8px auto 0; padding-left: var(--g); padding-right: var(--g); }
}