/* askbre.app/shop: the bre shop, as designed in bre-brand (visual/merch/store). askbre.app's own look: a glass nav with a
   black pill, a rounded hero card lit by the site's three pastel lights with bre standing in it, one word in the site's
   colour gradient, a statement that lights up word by word as you scroll, the line as lit tiles, then every product in one
   grid with a quick look. Buy goes to the product on the bre store (shop.askbre.app). Light only: a bre page is a white
   page. Colour is light, a word or a small mark, never a fill. */
:root {
  --bg: #fff; --surface: #F5F5F7; --pressed: #EDEDF0; --tx: #1d1d1f; --mu: #6e6e73; --faint: #86868b;
  --line: #E8E8ED; --line2: #D2D2D7; --ink: #1d1d1f; --ink-hover: #000; --on: #fff;
  --accent: #0A7ACC; --accent-tx: #0860A8; --danger: #C4123A; --backdrop: rgba(17, 17, 20, .4);
  --glow: linear-gradient(90deg, #FFCB57, #FF78B4, #6FCBFF, #FF78B4, #FFCB57);
  --word: linear-gradient(94deg, #FFCB57, #FFA98C 26%, #FF78B4 54%, #6FCBFF);
  --light: radial-gradient(60% 85% at 100% 100%, #E2F1FF 0, rgba(226, 241, 255, 0) 62%), radial-gradient(55% 80% at 0% 100%, #FFEEDE 0, rgba(255, 238, 222, 0) 60%), radial-gradient(45% 70% at 58% 0%, #FFEAF4 0, rgba(255, 234, 244, 0) 70%);
  --lift: 0 1px 2px rgba(17, 17, 20, .04), 0 12px 40px rgba(17, 17, 20, .08);
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.28, .11, .32, 1); --out: cubic-bezier(.16, 1, .3, 1);
  --r-2xl: 40px; --r-xl: 32px; --r-lg: 24px; --r-md: 16px; --r-sm: 12px;
  --navh: 52px;
  --sec: clamp(96px, 12vw, 168px);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--navh) + 24px); }
body { margin: 0; background: var(--bg); color: var(--tx); font: 400 17px/1.47 var(--sans); letter-spacing: -.011em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; letter-spacing: inherit; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
h1, h2, h3 { font-weight: 600; text-wrap: balance; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 40px); }
.eyebrow { font-size: 12px; font-weight: 600; color: var(--mu); letter-spacing: .08em; text-transform: uppercase; }
.word { background: var(--word); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-bottom: .06em; }
.eyebrow b { color: var(--accent-tx); font-weight: 600; }

/* nav */
.skip { position: absolute; left: 8px; top: -60px; z-index: 200; background: var(--ink); color: var(--on); padding: 10px 16px; border-radius: 980px; font-size: 14px; }
.skip:focus { top: 8px; }
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(17, 17, 20, .06); }
.navrow { height: var(--navh); display: flex; align-items: center; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 17px; font-weight: 600; flex: none; }
.brandset { display: flex; align-items: center; gap: 10px; flex: none; }
.brand img { width: 32px; height: 32px; }
.links { display: flex; gap: 2px; margin-inline: auto; font-size: 14px; overflow-x: auto; scrollbar-width: none; }
.links::-webkit-scrollbar { display: none; }
.links a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 11px; color: var(--mu); transition: color .2s var(--ease); white-space: nowrap; }
.links a:hover, .links a[aria-current="true"] { color: var(--tx); }
.storebtn { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 980px; background: var(--ink); color: var(--on); font-size: 14px; font-weight: 500; transition: background .2s var(--ease), transform .2s var(--ease); }
.storebtn:hover { background: var(--ink-hover); }
.storebtn:active { transform: scale(.97); }
.storebtn svg { width: 18px; height: 18px; }
@media (max-width: 640px) { .links { display: none; } .storebtn { margin-left: auto; } }
html { scroll-padding-top: calc(var(--navh) + 8px); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 22px; border-radius: 980px; background: var(--ink); color: var(--on); font-size: 17px; font-weight: 500; white-space: nowrap; transition: background .2s var(--ease), transform .2s var(--ease); }
.btn:hover { background: var(--ink-hover); }
.btn:active { transform: scale(.98); transition-duration: .08s; }
.btn.lg { min-height: 52px; padding: 0 28px; }
.btn.block { width: 100%; min-height: 56px; border-radius: var(--r-md); }
.btn.ghost { background: transparent; color: var(--tx); box-shadow: inset 0 0 0 1px var(--line2); }
.btn.ghost:hover { background: var(--pressed); }
.btn:disabled { background: var(--pressed); color: var(--faint); cursor: default; transform: none; }
.link { color: var(--accent-tx); font-weight: 500; display: inline-flex; align-items: center; gap: 4px; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }



/* section heads */
.sec { padding-top: var(--sec); }
.sechead { display: grid; gap: 14px; justify-items: center; text-align: center; margin: 0 auto clamp(40px, 5vw, 64px); max-width: 40em; }
.sechead h2 { font-size: clamp(36px, 5vw, 60px); line-height: 1.05; letter-spacing: -.03em; }
.sechead .lede { font-size: clamp(19px, 2vw, 22px); line-height: 1.38; color: var(--mu); letter-spacing: -.015em; }
.subhead { display: flex; align-items: baseline; gap: 16px; margin: clamp(72px, 9vw, 120px) 0 clamp(24px, 3vw, 40px); padding-top: 28px; border-top: 1px solid var(--line); }
.subhead h3 { font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -.02em; line-height: 1.15; }

/* product page: gallery + sticky buy column */
.pdp { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 5vw, 80px); align-items: start; }
.pdp.flip .gallery { order: 2; }
@media (max-width: 900px) { .pdp { grid-template-columns: 1fr; } .pdp.flip .gallery { order: 0; } }
.gallery { display: grid; gap: 14px; min-width: 0; }
.stage { position: relative; border-radius: var(--r-xl); overflow: hidden; background: var(--surface); aspect-ratio: 3 / 4; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.stage > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stage > img.fresh { animation: fadein .35s var(--ease); }
@keyframes fadein { from { opacity: .35; } to { opacity: 1; } }
.ph { position: absolute; inset: 0; display: grid; place-items: center; background: repeating-linear-gradient(135deg, var(--surface) 0 18px, var(--pressed) 18px 36px); }
.ph span { background: var(--bg); border-radius: 980px; padding: 10px 18px; font-size: 14px; font-weight: 500; color: var(--mu); box-shadow: 0 2px 10px rgba(17, 17, 20, .08); }
.arrow { position: absolute; top: 50%; z-index: 2; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 2px 14px rgba(17, 17, 20, .14); display: grid; place-items: center; color: var(--tx); opacity: 0; transition: opacity .25s var(--ease), transform .2s var(--ease); }
.stage:hover .arrow, .arrow:focus-visible { opacity: 1; }
@media (hover: none) { .arrow { opacity: 1; } }
.arrow:active { transform: scale(.94); }
.arrow.prev { left: 16px; } .arrow.next { right: 16px; }
.arrow svg { width: 18px; height: 18px; }
.vcap { position: absolute; z-index: 2; left: 16px; bottom: 16px; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-radius: 980px; padding: 6px 12px; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.tag { position: absolute; z-index: 2; left: 16px; top: 16px; background: var(--bg); border-radius: 980px; padding: 6px 12px; font-size: 12px; font-weight: 600; box-shadow: 0 1px 6px rgba(17, 17, 20, .1); }
.thumbs { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 3px; }
.thumbs button { flex: none; position: relative; width: 68px; aspect-ratio: 3 / 4; border-radius: var(--r-sm); overflow: hidden; background: var(--surface); box-shadow: 0 0 0 1px var(--line); transition: box-shadow .2s var(--ease); }
.thumbs button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--accent); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }
.thumbs .ph span { display: none; }
.dots { display: none; justify-content: center; gap: 8px; }
.dots i { display: block; width: 7px; height: 7px; border-radius: 4px; background: var(--line2); transition: width .25s var(--ease), background .25s var(--ease); }
.dots i.on { width: 22px; background: var(--ink); }
@media (max-width: 640px) { .thumbs { display: none; } .dots { display: flex; } }

.buy { position: sticky; top: calc(var(--navh) + 32px); display: grid; gap: 22px; align-content: start; min-width: 0; }
@media (max-width: 900px) { .buy { position: static; } }
.buy .top { display: grid; gap: 8px; }
.buy h3 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.08; letter-spacing: -.03em; }
.price { font-size: 19px; font-variant-numeric: tabular-nums; }
.desc { color: var(--mu); font-size: 17px; line-height: 1.5; }
.picker { display: grid; gap: 14px; padding-top: 22px; border-top: 1px solid var(--line); }
.plab { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; font-size: 15px; }
.plab span { font-weight: 600; color: var(--tx); }
.plab b { font-weight: 400; color: var(--mu); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { min-height: 40px; padding: 0 16px; border-radius: 980px; box-shadow: inset 0 0 0 1px var(--line2); font-size: 14px; color: var(--mu); transition: box-shadow .2s var(--ease), color .2s var(--ease); }
.chips button:hover { color: var(--tx); }
.chips button[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--tx); font-weight: 500; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); background: var(--surface); border-radius: 980px; padding: 3px; }
.seg button { min-height: 36px; padding: 0 6px; border-radius: 980px; font-size: 14px; color: var(--mu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease); }
.seg button:hover { color: var(--tx); }
.seg button:disabled { color: var(--faint); text-decoration: line-through; cursor: default; }
.seg button[aria-pressed="true"] { background: var(--bg); color: var(--tx); font-weight: 500; box-shadow: 0 1px 3px rgba(17, 17, 20, .12), 0 0 0 .5px rgba(17, 17, 20, .06); }
.sw { display: flex; flex-wrap: wrap; gap: 16px; padding: 3px; }
.sw button { width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(17, 17, 20, .14); }
.sw button[aria-pressed="true"] { outline: 1.5px solid var(--ink); outline-offset: 3px; }
.menu { position: relative; }
.menu select { -webkit-appearance: none; appearance: none; width: 100%; min-height: 48px; padding: 0 44px 0 16px; border-radius: 12px; border: 1px solid var(--line2); background: var(--bg); color: var(--tx); font: inherit; font-size: 15px; cursor: pointer; }
.menu select:hover { border-color: var(--faint); }
.menu::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 1.6px solid var(--mu); border-bottom: 1.6px solid var(--mu); transform: rotate(45deg); pointer-events: none; }
.hint { font-size: 14px; color: var(--mu); }
.fit { overflow-x: auto; scrollbar-width: none; }
.fit table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.fit caption { caption-side: bottom; text-align: left; padding-top: 10px; font-size: 13px; color: var(--mu); }
.fit th, .fit td { padding: 9px 4px; text-align: center; white-space: nowrap; border-bottom: 1px solid var(--line); }
.fit thead th { font-weight: 600; color: var(--tx); }
.fit tbody th { text-align: left; font-weight: 400; color: var(--mu); padding-left: 0; }
.fit td { color: var(--tx); }
.fit tbody tr:last-child > * { border-bottom: 0; }
@media (max-width: 420px) { .fit table { font-size: 13px; } .fit th, .fit td { padding-inline: 1px; } }
.addrow { display: grid; gap: 12px; padding-top: 22px; border-top: 1px solid var(--line); }
.err { font-size: 14px; color: var(--danger); min-height: 1px; }
.err:empty { display: none; }
.details { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.details summary { list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 52px; cursor: pointer; font-size: 15px; font-weight: 600; }
.details summary::-webkit-details-marker { display: none; }
.details summary::after { content: ""; width: 9px; height: 9px; border-right: 1.6px solid var(--mu); border-bottom: 1.6px solid var(--mu); transform: translateY(-3px) rotate(45deg); transition: transform .25s var(--ease); }
.details[open] summary::after { transform: translateY(2px) rotate(225deg); }
.facts { border-top: 1px solid var(--line); margin-bottom: 8px; }
.facts div:last-child { border-bottom: 0; }
.facts div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding-block: 14px; border-bottom: 1px solid var(--line); font-size: 14px; }
.facts dt { font-weight: 600; }
.facts dd { color: var(--mu); }
.later { background: var(--surface); border-radius: var(--r-md); padding: 16px 18px; font-size: 15px; color: var(--mu); }



/* a lit card around a section, like the site's "Talk to bre" */
.lit { border-radius: var(--r-2xl); background: var(--light), #FAFAFC; padding: clamp(28px, 5vw, 64px) clamp(16px, 4vw, 56px); }
.lit .stage, .lit .strip .pic { background: var(--bg); }
.lit .seg { background: rgba(255, 255, 255, .7); }
.appcard { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); align-items: center; gap: clamp(16px, 4vw, 48px); }
.appcard h2 { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.05; letter-spacing: -.03em; }
.appcard p { color: var(--mu); font-size: clamp(17px, 1.8vw, 21px); line-height: 1.4; margin-top: 16px; max-width: 26em; }
.appcard .btn { margin-top: 28px; }
.appcard img { width: 100%; height: auto; justify-self: center; max-width: 300px; filter: drop-shadow(0 24px 34px rgba(17, 17, 20, .12)); }
@media (max-width: 760px) { .appcard { grid-template-columns: 1fr; } .appcard img { max-width: 220px; } }
.orb { position: fixed; z-index: 60; right: calc(24px + env(safe-area-inset-right, 0px)); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; transition: transform .3s var(--ease); }
.orb img { width: 64px; height: 64px; animation: bob 5s ease-in-out infinite; filter: drop-shadow(0 10px 18px rgba(17, 17, 20, .18)); }
.orb:hover { transform: scale(1.08); }
@media (max-width: 1000px) { .orb { display: none; } }

/* footer */
footer { background: var(--bg); border-top: 1px solid var(--line); margin-top: var(--sec); padding-block: 56px 40px; font-size: 12px; line-height: 1.5; color: var(--mu); }
.fgrid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width: 760px) { .fgrid { grid-template-columns: 1fr 1fr; } }
footer h4 { margin: 0 0 10px; font-size: 12px; font-weight: 600; color: var(--tx); }
footer a, footer p { display: block; margin: 0 0 8px; }
footer .ig { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; color: var(--tx); font-size: 14px; font-weight: 500; }
footer .ig svg { width: 36px; height: 36px; padding: 8px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line2); }
footer a:hover { color: var(--tx); }
footer .fine { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line); }
footer .fine a { display: inline; }

/* sheet and bag */
.scrim { position: fixed; inset: 0; z-index: 90; background: var(--backdrop); opacity: 0; transition: opacity .3s var(--ease); }
.open .scrim { opacity: 1; }
.sheet { position: fixed; z-index: 100; left: 50%; top: 50%; width: min(1040px, calc(100% - 32px)); max-height: calc(100% - 48px); overflow-y: auto; transform: translate(-50%, -46%); opacity: 0; background: var(--bg); border-radius: var(--r-xl); padding: clamp(20px, 3vw, 40px); box-shadow: 0 40px 100px rgba(17, 17, 20, .3); transition: transform .35s var(--ease), opacity .35s var(--ease); overscroll-behavior: contain; }
.open .sheet { transform: translate(-50%, -50%); opacity: 1; }
.sheet .pdp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3.5vw, 48px); }
.sheet .buy { position: static; }
@media (max-width: 760px) {
  .sheet { left: 0; right: 0; top: auto; bottom: 0; width: 100%; max-height: 92%; border-radius: var(--r-xl) var(--r-xl) 0 0; transform: translateY(40px); padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
  .open .sheet { transform: none; }
  .sheet .pdp { grid-template-columns: 1fr; }
}
.x { position: sticky; top: 0; float: right; z-index: 3; width: 36px; height: 36px; margin: -8px -8px 0 0; border-radius: 50%; background: var(--pressed); display: grid; place-items: center; }
.x svg { width: 14px; height: 14px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

.btn.paper { background: var(--bg); color: var(--tx); box-shadow: inset 0 0 0 1px var(--line2); }
.btn.paper:hover { background: var(--surface); }
/* ---- Apple-style pass (Sam, 16 Oct: "like Apple designed this whole website", animations, a gallery feel) ---- */
.hero { padding-top: clamp(40px, 7vw, 96px); overflow: clip; }
.herotext { display: grid; justify-items: center; text-align: center; }
.hero h1 { font-size: clamp(48px, 8vw, 112px); line-height: 1; letter-spacing: -.04em; margin-top: 12px; }
.hero .intro { font-size: clamp(19px, 2vw, 24px); color: var(--mu); margin-top: 18px; max-width: 26em; }
.hero .cta { justify-content: center; margin-top: 28px; }
.herofig { margin-top: clamp(40px, 6vw, 72px); border-radius: calc(var(--r-2xl) * (1 - var(--p, 0) * .5)); overflow: hidden; background: #F2F2F4; aspect-ratio: 16 / 9;
  transform: scale(calc(.9 + var(--p, 0) * .1)); transform-origin: 50% 0; will-change: transform; }
.herofig img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; transform: scale(calc(1.12 - var(--p, 0) * .12)); }
@media (max-width: 640px) { .herofig { aspect-ratio: 4 / 5; } }
.shop { padding-top: clamp(40px, 5vw, 64px); }   /* the gallery follows the banner closely (Sam, 27 Oct) */
/* things rise into place as they scroll in (browsers without scroll timelines show them as they are) */
@supports (animation-timeline: view()) {
  .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
  @keyframes rise { from { opacity: .001; transform: translateY(48px); } }
}
@media (prefers-reduced-motion: reduce) { .reveal { animation: none !important; } .herofig, .herofig img { transform: none; } }

/* selected things get bre's own ring, the app's exact border (theme.gradients.border: yellow, pink, purple, cyan, pink, yellow; one turn in 10 s),
   so blue never meets yellow and no green appears (Sam, 16 Oct) */
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes spin { to { --spin: 360deg; } }
:focus-visible { outline-color: var(--ink); }
.menu select:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.thumbs button[aria-pressed="true"], .idots button[aria-pressed="true"] { box-shadow: none; }
.sw button[aria-pressed="true"] { outline: none; }
.thumbs button, .tile .ti, .strip .pic, .sw button, .idots button { position: relative; }
.thumbs button[aria-pressed="true"]::after, .tile[aria-pressed="true"] .ti::after, .strip button[aria-pressed="true"] .pic::after,
.sw button[aria-pressed="true"]::after, .idots button[aria-pressed="true"]::after {
  content: ""; position: absolute; z-index: 3; inset: 0; border-radius: inherit; padding: 2.5px; pointer-events: none;
  background: conic-gradient(from var(--spin), #FFCB57, #FF78B4, #6FCBFF, #FF78B4, #FFCB57);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spin 10s linear infinite; }
.sw button[aria-pressed="true"]::after { inset: -5px; }
.idots button[aria-pressed="true"]::after { inset: 0; padding: 2px; }
@media (prefers-reduced-motion: reduce) { .thumbs button::after, .tile .ti::after, .strip .pic::after, .sw button::after, .idots button::after { animation: none !important; } }

@media (prefers-reduced-motion: reduce) { .word { animation: none !important; } }

.herofig { background: #F5F5F7; }
.addrow .note { color: var(--ink-2, #6E6E73); font-size: 13px; margin-top: 10px; text-align: center; }
/* ---- askbre.app pass (Sam, 18 Oct: "make the SHOP store more like this page... scroll animations... the bre avatar walking
   around"): the site's lit showcase cards with bre's own clips multiplied onto them, the statement that lights up word by
   word, tiles that rise in and drift against the scroll, and a small bre who walks along the bottom as you scroll. ---- */
.wrap.wide { width: min(94%, 1440px); max-width: none; margin: 0 auto; }
.showcase { position: relative; overflow: hidden; border-radius: 40px; background: var(--light), #fafafc; }
.hero { padding-top: 8px; }
.herocard { min-height: clamp(560px, calc(100svh - 120px), 860px); display: grid; grid-template-columns: 1.05fr .95fr; align-items: center;
  gap: 24px; padding: 0 clamp(24px, 5vw, 80px); transform-origin: 50% 100%; aspect-ratio: auto; margin-top: 0; }
.herocard .herotext { justify-items: start; text-align: left; }
.herocard h1 { font-size: clamp(52px, 5.6vw, 88px); line-height: 1.03; letter-spacing: -.03em; }
.herocard .intro { margin: 22px 0 30px; max-width: 20em; }
.herocard .cta { justify-content: flex-start; margin-top: 0; }
.herostage { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 620px; justify-self: center; pointer-events: none; }
.stagemix { position: absolute; inset: 0; isolation: isolate; mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent), linear-gradient(to bottom, transparent, #000 3%, #000 96%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent), linear-gradient(to bottom, transparent, #000 3%, #000 96%, transparent);
  mask-composite: intersect; }
.stagestill { position: absolute; left: 50%; top: 16%; height: 76%; width: auto; max-width: none; transform: translateX(-50%); }
.stagevid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .herocard { grid-template-columns: 1fr; padding-top: 48px; min-height: 0; }
  .herocard .herotext { justify-items: center; text-align: center; }
  .herocard .cta { justify-content: center; }
  .herostage { max-width: 420px; }
}
/* the hero: a real iPhone 18 Pro Max (bre-brand's photo, cut from its grey by scripts/shop/build-hero.py) with the official
   bre over its camera bar, body hidden behind the bar's lower edge (Sam, 23 Oct: "real iphone and bre image"). bre is laid on
   in CSS so it can rise into place; its spot is written by the script. */
.phonestage { aspect-ratio: 1290 / 1372; max-width: 560px; }
.phonestage { --ledge: 52.84%; --bre-left: 52.71%; --bre-top: 27.70%; --bre-w: 37.21%; }
.phoneimg { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 98%); mask-image: linear-gradient(to bottom, #000 62%, transparent 98%); }
.peek { position: absolute; left: var(--bre-left); top: var(--bre-top); width: var(--bre-w); height: calc(var(--ledge) - var(--bre-top)); overflow: hidden; }
.peek img { width: 100%; height: auto; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .35)); animation: peek 1.2s var(--out) .25s both; }
@keyframes peek { from { transform: translateY(70%); } }
.endsec { padding-bottom: 0; }
.endcard { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 24px; padding: 0 clamp(24px, 5vw, 80px); min-height: 560px; }
.endtext { display: grid; gap: 14px; justify-items: start; }
.endtext h2 { font-size: clamp(40px, 5vw, 72px); letter-spacing: -.03em; line-height: 1.04; }
.endtext p { color: var(--mu); font-size: 21px; }
@media (max-width: 900px) { .endcard { grid-template-columns: 1fr; padding-top: 48px; text-align: center; } .endtext { justify-items: center; } .endcard .herostage { max-width: 380px; } }

/* ---- Shop all as a gallery, straight after the hero (Sam, 23 Oct: "a gallery look... scroll animations... product images slide
   over when hovered over"; 27 Oct: the gallery right after the "bre, on everything" banner, hoodie first, then the
   stickers; no "Shop all" heading and no "The line" banner; 30 Oct: "more gallery look and like 3-4 tiles wide, all same
   size"): one even grid like Apple's accessories page, every tile the same size, 4 across, 3 on a tablet, 2 on a phone,
   equal gaps. Each tile's second photo slides over the first while the pointer is on it; the tiles rise in a beat apart
   across a row and drift against the scroll. ---- */
.shopgrid { --gap: clamp(14px, 1.8vw, 24px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.item { display: grid; gap: 12px; align-content: start; min-width: 0; padding-bottom: calc(var(--gap) * .5);
  opacity: 0; transform: translateY(44px) scale(.985); transition: opacity .8s var(--out) calc(var(--i, 0) * 90ms), transform 1s var(--out) calc(var(--i, 0) * 90ms); }
.item.in { opacity: 1; transform: none; }
.shot { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden; background: var(--light), #fafafc; isolation: isolate; }
.pic { position: absolute; inset: 0; background: var(--light), #fafafc; }
.pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; translate: 0 var(--py, 0px); transition: transform .9s var(--out); }
/* the clothes are square shots on white: shown whole in the 4:5 tile so no sleeve or cuff is cut at the edges */
.item:is([data-id="hoodie"], [data-id="tee"], [data-id="heavytee"], [data-id="athtank"]) .pic img { object-fit: contain; }
.pic.alt { transform: translateX(102%); transition: transform .75s var(--out); }
@media (hover: hover) {
  .shot:hover .pic.alt, .shot:focus-visible .pic.alt { transform: none; }
  .shot:hover .pic:not(.alt) img { transform: scale(1.03); }
}
.shot .tag { left: 16px; top: 16px; }
.quick { position: absolute; z-index: 3; right: 14px; bottom: 14px; min-height: 34px; padding: 0 14px; border-radius: 980px; display: inline-flex; align-items: center; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: 13px; font-weight: 500; box-shadow: 0 2px 10px rgba(17, 17, 20, .1); opacity: 0; transform: translateY(6px); transition: opacity .25s var(--ease), transform .25s var(--ease); }
@media (hover: hover) { .shot:hover .quick, .shot:focus-visible .quick { opacity: 1; transform: none; } }
.iinfo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding-inline: 6px; }
.iinfo .nm { font-size: 17px; font-weight: 500; letter-spacing: -.01em; text-align: left; }
.iinfo .pr { font-size: 17px; font-variant-numeric: tabular-nums; text-align: right; }
.iinfo .k { grid-column: 1 / -1; font-size: 13px; color: var(--mu); }
.idots { display: flex; flex-wrap: wrap; gap: 4px; padding-inline: 4px; margin-top: -4px; }
.idots button { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; }
.idots button i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(17, 17, 20, .16); }
@media (max-width: 1068px) { .shopgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 734px) {
  .shopgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shot { border-radius: var(--r-md); }
  .iinfo { grid-template-columns: 1fr; padding-inline: 2px; }
  .iinfo .nm, .iinfo .pr { font-size: 15px; text-align: left; }
  .idots { padding-inline: 0; }
  .quick { display: none; }
}
@media (prefers-reduced-motion: reduce) { .item { opacity: 1; transform: none; } .peek img { animation: none; } }

/* the newsletter: the home page's sign-up (join.js), on a lit card */
.newscard { display: grid; gap: 14px; justify-items: center; text-align: center; border-radius: var(--r-2xl); background: var(--light), #FAFAFC; padding: clamp(36px, 6vw, 72px) clamp(16px, 4vw, 56px); }
.newscard h2 { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.05; letter-spacing: -.03em; }
.newscard .intro { color: var(--mu); font-size: clamp(17px, 1.8vw, 19px); }
.nf { width: 100%; max-width: 500px; display: grid; gap: 12px; margin-top: 10px; }
.nf .f-row { display: flex; gap: 8px; }
.nf input[type="email"] { flex: 1; min-width: 0; min-height: 52px; padding: 0 20px; border-radius: 980px; border: 1px solid var(--line2); background: var(--bg); color: var(--tx); font: inherit; font-size: 17px; }
.nf input[type="email"]:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.nf .hint { font-size: 13px; line-height: 1.45; color: var(--mu); }
.nf .hint a { text-decoration: underline; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 480px) { .nf .f-row { flex-direction: column; } }

/* the bag (the shop's own checkout, bag.js): a sheet like the quick look, narrower */
.sheet.bagsheet { width: min(520px, calc(100% - 32px)); }
.bag { display: grid; gap: 18px; padding: 8px 4px 4px; }
.bag h3 { font-size: clamp(26px, 3vw, 34px); letter-spacing: -.03em; }
.bag .empty { color: var(--mu); }
.blines { list-style: none; padding: 0; margin: 0; display: grid; border-top: 1px solid var(--line); }
.bline { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.bline img, .bline > span:first-child { width: 72px; aspect-ratio: 1; object-fit: cover; border-radius: 14px; background: var(--surface); }
.binfo { display: grid; gap: 4px; min-width: 0; }
.binfo b { font-weight: 500; }
.binfo > span { color: var(--mu); font-size: 14px; }
.qty { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; }
.qty button { width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line2); font-size: 16px; }
.qty span { min-width: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.bprice { font-variant-numeric: tabular-nums; }
.btotal { display: flex; justify-content: space-between; font-size: 17px; }
.bag .note { color: var(--mu); font-size: 13px; }
.bagn:empty { display: none; }
.bagn { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 980px; background: var(--on); color: var(--ink); font-size: 12px; display: inline-grid; place-items: center; }