/* Rare Flavours — editorial UI. Warm paper, ink type, hairline grids. Mobile-first, fully responsive. */

:root {
  --paper: #F7F6F3;
  --surface: #FFFFFF;
  --ink: #111111;
  --ink-2: #2F3437;
  --muted: #787774;
  --line: #E4E1DA;
  --line-ink: rgba(17, 17, 17, .85);
  --heart: #C8462D;
  --accent: #B8753A;
  --glass: rgba(247, 246, 243, .92);
  --hover: rgba(17, 17, 17, .05);
  --primary-hover: #333;
  --wall: #FBFAF7;
  --wood-edge: #D9C8AA;
  --plank-hi: #F4ECDF; --plank: #E6D8C0; --plank-lo: #E0D0B4; --plank-front: #C9B593;
  --plank-shadow: rgba(90, 60, 25, .14);
  --board-hi: #F3EADB; --board: #E9DCC5; --board-lo: #E1D1B5;
  --board-ink: #2B2117; --board-ink-2: #6B5A45;
  --object-shadow: rgba(70, 45, 20, .22);
  --placeholder: #A9A6A0;
  --field-line: #D8D4CB;
  --error-bg: #FDEBEC; --error: #9F2F2D;
  --panel-bg: rgba(251, 250, 247, .9); --panel-line: rgba(255, 255, 255, .8);
  --backdrop: rgba(247, 246, 243, .45);
  --skeleton-a: #ece8e0; --skeleton-b: #f5f2ec;
  --tag0-bg: #FDEBEC; --tag0: #9F2F2D; --tag1-bg: #FBF3DB; --tag1: #956400; --tag2-bg: #EDF3EC; --tag2: #346538; --tag3-bg: #E1F3FE; --tag3: #1F6C9F;

  --sans: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Geist Mono", "SF Mono", ui-monospace, monospace;
  --display: "Italiana", "Didot", Georgia, serif;

  --gutter: clamp(16px, 4vw, 40px);
  --max: 1320px;
  --header-h: 60px;
  --tabbar-h: 64px;
  --radius: 6px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --shadow-object: drop-shadow(10px 16px 12px rgba(60, 40, 20, .22));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 64px); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
em { font-style: italic; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.narrow { max-width: 760px; }
.center { text-align: center; margin: 40px 0 0; }
.muted { color: var(--muted); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: var(--radius); }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }

.icon { width: 20px; height: 20px; flex: none; }
.icon--sm { width: 16px; height: 16px; }
.icon--xs { width: 13px; height: 13px; }
.icon--star { fill: currentColor; }

/* ---------- Type ---------- */
.eyebrow { font: 500 12px/1.4 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.display {
  font: 600 clamp(44px, 8vw, 104px)/.92 var(--sans); letter-spacing: -.045em; text-transform: uppercase;
  margin-top: 14px; text-wrap: balance;
}
.display--xl { font-size: clamp(48px, 9.4vw, 136px); }
.display__serif { display: block; font: 400 .74em/1 var(--sans); letter-spacing: -.02em; text-transform: none; margin-top: .08em; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 15px; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.link-arrow .icon { transition: transform .2s var(--ease); }
.link-arrow:hover .icon { transform: translateX(3px); }
.fineprint { font-size: 13px; color: var(--muted); padding-block: 28px 8px; }
.fineprint a { color: var(--ink); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 0 20px; border-radius: var(--radius); border: 1px solid transparent;
  font: 500 15px/1 var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .2s, color .2s, transform .1s;
}
.btn:active { transform: scale(.98); }
.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: var(--primary-hover); }
.btn--ghost { background: transparent; border-color: var(--line-ink); color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--lg { min-height: 54px; padding: 0 26px; font-size: 16px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--radius); background: transparent; color: var(--ink); cursor: pointer; text-decoration: none; }
.icon-btn--line { width: 54px; height: 54px; border: 1px solid var(--line-ink); }
.icon-btn--line:hover { background: var(--ink); color: var(--paper); }
.back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 14px; font-weight: 500; text-decoration: none; }
.back:hover { text-decoration: underline; }

.chip {
  flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 16px;
  border: 1px solid var(--line-ink); border-radius: 999px; background: transparent;
  font: 500 14px/1 var(--sans); color: var(--ink); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s;
}
.chip span { font: 500 11px/1 var(--mono); color: var(--muted); }
.chip:hover { background: var(--hover); }
.chip.is-active { background: var(--ink); color: var(--paper); }
.chip.is-active span { color: var(--paper); opacity: .6; }
.chip--sm { min-height: 30px; padding: 0 12px; font-size: 13px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40; height: var(--header-h);
  background: var(--glass); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header__row { height: 100%; display: flex; align-items: center; gap: 24px; }
.logo { display: inline-flex; align-items: baseline; gap: .18em; text-decoration: none; font-size: 24px; line-height: 1; white-space: nowrap; }
.logo__a { font: 700 1em/1 var(--sans); letter-spacing: -.05em; text-transform: uppercase; }
.logo__b { font: italic 400 1.12em/1 var(--sans); letter-spacing: -.01em; }
.logo--lg { font-size: clamp(44px, 8vw, 96px); }
.site-nav { display: none; margin-left: auto; gap: 28px; }
.site-nav a { position: relative; font-size: 15px; font-weight: 500; text-decoration: none; padding: 6px 0; }
.site-nav a[aria-current="page"]::after, .site-nav a:hover::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink); }
.site-header__search { margin-left: auto; }
.site-header__saved { position: relative; display: none; }
@media (min-width: 860px) { .site-header__saved { display: inline-grid; } }
.theme-toggle { margin-right: -10px; }
.count-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 2px; border-radius: 9px; background: var(--ink); color: var(--paper); font: 500 10px/1 var(--mono); vertical-align: 2px; }
.count-badge[hidden] { display: none; }

/* ---------- Mobile tab bar ---------- */
.tabbar {
  position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 4px 6px calc(4px + env(safe-area-inset-bottom));
  background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
.tabbar__item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 52px; color: var(--muted); text-decoration: none; font: 500 11px/1 var(--sans); }
.tabbar__item[aria-current="page"] { color: var(--ink); }
.tabbar__item[aria-current="page"]::before { content: ""; position: absolute; top: -5px; width: 20px; height: 2px; background: var(--ink); }
.count-badge--dot { position: absolute; top: 4px; left: calc(50% + 6px); margin: 0; min-width: 16px; height: 16px; font-size: 9px; background: var(--heart); }
body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }

@media (min-width: 860px) {
  :root { --header-h: 68px; }
  .site-nav { display: flex; }
  .site-header__search { margin-left: 8px; }
  .tabbar { display: none; }
  body { padding-bottom: 0; }
  .logo { font-size: 26px; }
}

/* ---------- Shelf hero ---------- */
.shelf-hero { display: grid; gap: 24px; padding-block: 28px 28px; }
.display--shelf { font-size: clamp(42px, 8vw, 112px); }
.shelf-hero__lede { font: 400 clamp(22px, 2.8vw, 32px)/1.15 var(--sans); color: var(--ink-2); margin: 14px 0 20px; max-width: 26ch; }
.shelf-hero__photo { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 9; }
.shelf-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.btn--pill { border-radius: 999px; min-height: 42px; padding: 0 18px; font-size: 14px; }
@media (min-width: 900px) {
  .shelf-hero { padding-block: 48px 40px; }
  .shelf-hero--photo { grid-template-columns: 1.2fr 1fr; align-items: end; gap: 48px; }
}

/* Shelf index + rack filters */
.shelf-index { border-block: 1px solid var(--line); }
.shelf-index__row { display: flex; gap: 32px; overflow-x: auto; scrollbar-width: none; }
.shelf-index__row::-webkit-scrollbar, .filterbar__row::-webkit-scrollbar { display: none; }
.shelf-index a { flex: none; display: flex; align-items: center; gap: 8px; min-height: 52px; font-size: 15px; font-weight: 500; color: var(--muted); text-decoration: none; border-bottom: 1px solid transparent; margin-bottom: -1px; }
.shelf-index a span { font: 500 11px/1 var(--mono); }
.shelf-index a:hover { color: var(--ink); }
.shelf-index a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
.filterbar { position: sticky; top: var(--header-h); z-index: 30; background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.filterbar__row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-block: 12px; }

/* ---------- Racks: products standing on planks ---------- */
.racks { padding-bottom: 8px; }
.rack { padding-top: clamp(32px, 5vw, 56px); }
.rack[hidden] { display: none; }
.rack__head {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 16px;
  border-top: 1px solid var(--line-ink); padding-top: 12px; margin-bottom: 16px;
}
.rack__title { font: 600 clamp(22px, 2.6vw, 30px)/1.05 var(--sans); letter-spacing: -.03em; }
.rack__note { grid-column: 1; font: 400 19px/1.2 var(--sans); color: var(--muted); }
.rack__count { grid-column: 2; grid-row: 1; font: 500 12px/1 var(--mono); color: var(--muted); }
.rack__head .link-arrow { grid-column: 1; justify-self: start; font-size: 14px; }

/* The cabinet: one continuous shelf. Each rack starts on a header board with its name printed on it. */
.cabinet { overflow: hidden; background-color: transparent; }
.cabinet .rack { padding-top: 0; }
.cabinet .unit { border: 0; border-radius: 0; }
.board {
  position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 14px;
  min-height: 46px; padding: 9px 14px;
  background: linear-gradient(var(--board-hi) 0 1px, var(--board) 1px, var(--board-lo) calc(100% - 3px), var(--plank-front) calc(100% - 3px));
  box-shadow: 0 10px 14px -10px rgba(90, 60, 25, .35);
}
.board__title { font: 700 13px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--board-ink); }
.board__note { grid-column: 1; font: 400 15px/1.2 var(--sans); color: var(--board-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board__meta { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; gap: 14px; }
.board__count { font: 500 11px/1 var(--mono); color: var(--board-ink-2); }
.board__link { display: inline-flex; align-items: center; gap: 4px; font: 600 12px/1 var(--sans); color: var(--board-ink); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
@media (min-width: 640px) {
  .board { grid-template-columns: auto 1fr auto; gap: 0 18px; min-height: 52px; padding: 10px 28px; }
  .board__title { font-size: 14px; }
  .board__note { grid-column: 2; grid-row: 1; font-size: 17px; }
  .board__meta { grid-column: 3; grid-row: 1; }
}
.rack + .rack .board { border-top: 0; }

/* One shelf unit. Every grid row is a shelf: products stand on a light-oak plank drawn by the
   repeating background, so partial rows still get a full-width plank. */
.unit {
  --cols: 4; --pack-h: 96px; --top: 20px; --board: 12px; --label-h: 34px; --pad: 10px;
  --row-h: calc(var(--top) + var(--pack-h) + var(--board) + var(--label-h));
  --b: calc(var(--top) + var(--pack-h));
  --gap: 8px;
  list-style: none; margin: 0; padding: 0 var(--pad);
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-auto-rows: var(--row-h); column-gap: var(--gap);
  /* tinted wall behind the products, then the plank; under it the page background shows through */
  --shelf-bg: color-mix(in srgb, var(--accent) 7%, var(--wall));
  background-color: transparent;
  background-image: linear-gradient(to bottom,
    var(--shelf-bg) 0, var(--shelf-bg) var(--b),
    var(--plank-hi) var(--b), var(--plank-hi) calc(var(--b) + 1px),
    var(--plank) calc(var(--b) + 1px), var(--plank-lo) calc(var(--b) + var(--board) - 2px),
    var(--plank-front) calc(var(--b) + var(--board) - 2px), var(--plank-front) calc(var(--b) + var(--board)),
    var(--plank-shadow) calc(var(--b) + var(--board)), transparent calc(var(--b) + var(--board) + 14px),
    transparent calc(var(--b) + var(--board) + 14px));
  background-size: 100% var(--row-h); background-repeat: repeat-y;
}
.tile { position: relative; min-width: 0; }
.tile__link {
  display: grid; grid-template-rows: var(--top) var(--pack-h) var(--board) var(--label-h);
  height: 100%; text-decoration: none; color: var(--ink); -webkit-tap-highlight-color: transparent;
}
.tile__pack {
  grid-row: 2; display: flex; align-items: flex-end; justify-content: center; min-width: 0;
  filter: drop-shadow(5px 7px 5px var(--object-shadow)); transform-origin: 50% 100%;
  transition: transform .4s var(--ease);
}
.tile__pack .pack { height: calc(100% * var(--scale, 1)); width: auto; max-width: 100%; }
/* Photos (ideally transparent PNGs) stand straight on the plank: no frame, full shelf height
   by default, scaled per product with "Shelf height" in the CMS. */
.tile__pack--photo .pack-img {
  height: calc(100% * var(--scale, 1)); width: auto; max-width: 100%;
  object-fit: contain; object-position: 50% 100%;
}
.tile__link:hover .tile__pack, .tile__link:focus-visible .tile__pack { transform: translateY(-5px) rotate(-1.5deg); }
.tile__label { grid-row: 4; display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 8px; text-align: center; min-width: 0; }
.tile__brand { max-width: 100%; font: 600 9.5px/1.2 var(--sans); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile__name { display: none; max-width: 100%; font: 400 15px/1.1 var(--sans); color: var(--ink-2); overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

@media (min-width: 640px) {
  .unit { --cols: 5; --pack-h: 128px; --label-h: 58px; --pad: 18px; --gap: 14px; }
  .tile__brand { font-size: 10.5px; }
  .tile__name { display: -webkit-box; }
}
@media (min-width: 960px) {
  .unit { --cols: 6; --pack-h: 150px; --top: 26px; --board: 14px; --label-h: 62px; --pad: 28px; --gap: 20px; }
}
@media (min-width: 1240px) {
  .unit { --cols: 7; --pack-h: 164px; }
}
.unit--discover { --accent: #B8753A; }
/* Homepage rows: one plank that scrolls sideways; the plank scrolls with its products. */
.unit-wrap { position: relative; }
.unit--scroll {
  grid-template-columns: none; grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: var(--pad);
  scrollbar-width: none; background-attachment: local;
}
.unit--scroll::-webkit-scrollbar { display: none; }
.unit--scroll > .tile { scroll-snap-align: start; }
.row-btn {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  height: 34px; min-width: 34px; padding: 0 10px; border: 1px solid var(--line-ink); border-radius: 999px;
  background: var(--glass); color: var(--ink); font: 600 12px/1 var(--sans); cursor: pointer;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s var(--ease);
}
.row-btn--start, .row-btn--next { top: calc(var(--top, 20px) + 96px / 2); padding: 0; width: 34px; }
.row-btn--start { left: 8px; transform: translateX(-6px); }
.row-btn--next { right: 8px; transform: translateX(6px); }
@media (hover: hover) and (pointer: fine) {
  [data-scroll-row].is-scrolled .row-btn--start, [data-scroll-row].has-more .row-btn--next { opacity: 1; pointer-events: auto; transform: none; }
  .row-btn--start, .row-btn--next { top: 40%; }
}
.tile--more .tile__link { color: var(--ink); }
.more-card {
  grid-row: 2; align-self: end; justify-self: center; display: grid; place-content: center; justify-items: center; gap: 4px;
  width: min(100%, calc(var(--pack-h) * .78)); height: calc(var(--pack-h) * .9);
  border: 1.5px dashed var(--line-ink); border-radius: 6px; text-align: center; transition: background .2s, color .2s;
}
.more-card__n { font: 400 clamp(22px, 2.4vw, 30px)/1 var(--display); letter-spacing: -.03em; }
.more-card__t { font: 600 12px/1.2 var(--sans); }
.tile--more .tile__link:hover .more-card { background: var(--ink); color: var(--paper); border-style: solid; }

/* One plank only (homepage): hide whatever doesn't fit on the first row at this width. */
.unit--row > .tile:nth-child(n+5) { display: none; }
@media (min-width: 640px) { .unit--row > .tile:nth-child(n+5) { display: block; } .unit--row > .tile:nth-child(n+6) { display: none; } }
@media (min-width: 960px) { .unit--row > .tile:nth-child(n+6) { display: block; } .unit--row > .tile:nth-child(n+7) { display: none; } }
@media (min-width: 1240px) { .unit--row > .tile:nth-child(n+7) { display: block; } }
.cabinet--top { margin-bottom: 18px; }
.cabinet--top .board { background: linear-gradient(var(--board-hi) 0 1px, var(--board) 1px, var(--board-lo) calc(100% - 3px), var(--plank-front) calc(100% - 3px)); }
.rack--top .board__title::before { content: "★ "; }
@media (min-width: 1000px) { .unit--discover { --cols: 5; } }
@media (min-width: 1240px) { .unit--discover { --cols: 6; } }

/* Save button (tiles + product page) */
.save {
  position: absolute; top: 8px; right: 8px; z-index: 2; display: none; place-items: center;
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--glass); color: var(--ink);
}
.js .save { display: grid; }
.save .icon { width: 18px; height: 18px; transition: transform .2s var(--ease); }
.save:hover .icon { transform: scale(1.1); }
.save[aria-pressed="true"] { color: var(--heart); }
.save[aria-pressed="true"] .icon { fill: currentColor; }
.save.pop .icon { animation: pop .35s var(--ease); }
@keyframes pop { 40% { transform: scale(1.35); } }
.save--tile { top: 0; right: -4px; width: 30px; height: 30px; opacity: 0; transition: opacity .15s; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.save--tile .icon { width: 15px; height: 15px; }
.save--tile::before { content: ""; position: absolute; inset: -7px; }
.tile:hover .save--tile, .save--tile:focus-visible, .save--tile[aria-pressed="true"] { opacity: 1; }
@media (hover: none) { .save--tile[aria-pressed="false"] { display: none; } }
.save--inline { position: static; width: auto; height: auto; min-height: 54px; border-radius: var(--radius); background: transparent; border: 1px solid var(--line-ink); padding: 0 22px; }
.js .save--inline { display: inline-flex; }
.save--inline:hover { background: transparent; color: var(--ink); }
.save--inline[aria-pressed="true"] { color: var(--heart); border-color: var(--heart); }

/* Shelf essay + next shelf */
.essay { display: grid; gap: 20px; padding-block: clamp(64px, 9vw, 120px) 24px; }
.essay__body { display: grid; gap: 16px; max-width: 68ch; color: var(--ink-2); }
.essay__lede { font: 400 clamp(26px, 3.2vw, 40px)/1.15 var(--sans); color: var(--ink); letter-spacing: -.01em; }
@media (min-width: 900px) { .essay { grid-template-columns: 1fr 2fr; gap: 56px; } }

.next-shelf {
  position: relative; display: grid; gap: 8px; margin-top: clamp(40px, 6vw, 72px); padding: clamp(24px, 4vw, 48px);
  text-decoration: none; color: var(--ink); border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 14%, var(--paper)); transition: background .3s;
}
.next-shelf:hover { background: color-mix(in srgb, var(--accent) 22%, var(--paper)); }
.next-shelf__name { font: 600 clamp(34px, 6vw, 80px)/.92 var(--sans); letter-spacing: -.045em; text-transform: uppercase; padding-right: 56px; }
.next-shelf__sub { font: 400 clamp(19px, 2.2vw, 26px)/1.2 var(--sans); color: var(--ink-2); }
.next-shelf__hint { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 14px; font-weight: 500; }
.next-shelf__arrow { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line-ink); transition: background .2s, color .2s; }
.next-shelf:hover .next-shelf__arrow { background: var(--ink); color: var(--paper); }
@media (hover: hover) and (pointer: fine) { .swipe-hint { visibility: hidden; } }

/* ---------- All shelves sheet ---------- */
.sheet {
  width: 100%; max-width: 720px; max-height: 88vh; max-height: 88dvh;
  margin: auto auto 0; padding: 0 var(--gutter) 24px; border: 0; border-radius: 12px 12px 0 0;
  background: var(--paper); color: var(--ink); overflow: auto; overscroll-behavior: contain;
}
.sheet[open] { animation: sheetUp .26s var(--ease); }
.sheet::backdrop { background: rgba(17, 17, 17, .4); }
@keyframes sheetUp { from { transform: translateY(40px); opacity: 0; } }
.sheet__handle { width: 40px; height: 4px; margin: 10px auto 0; border-radius: 2px; background: var(--line); }
.sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 0 16px; margin-right: -10px; }
.sheet__title { font: 600 32px/1 var(--sans); letter-spacing: -.04em; text-transform: uppercase; }
.sheet .shelf-row { grid-template-columns: 34px 1fr; }
.sheet .shelf-row__packs { display: none; }
.sheet .shelf-row__count { grid-column: 2; justify-content: flex-start; }
.sheet .shelf-row__name { font-size: clamp(26px, 4vw, 38px); }
@media (min-width: 760px) {
  .sheet { margin: auto; border-radius: 12px; padding-bottom: 28px; }
  .sheet .shelf-row { grid-template-columns: 40px 1fr 160px; }
  .sheet .shelf-row__packs { display: flex; height: 76px; }
  .sheet .shelf-row__packs span { width: 42px; }
  .sheet .shelf-row__count { grid-column: 2; }
}

/* ---------- Page heads ---------- */
.page-head { padding-block: clamp(28px, 5vw, 64px) clamp(24px, 4vw, 48px); }
.page-head .back { margin: -8px 0 12px; }
.page-head__sub { font: 400 clamp(22px, 2.6vw, 30px)/1.2 var(--sans); color: var(--ink-2); margin-top: 18px; max-width: 30ch; }
.empty-note { padding-block: 48px; color: var(--muted); }

/* All shelves index */
.shelf-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-ink); }
.shelf-list li { border-bottom: 1px solid var(--line); }
.shelf-row {
  display: grid; grid-template-columns: 40px 1fr; gap: 8px 16px; align-items: center;
  padding: 22px 8px; text-decoration: none; color: var(--ink); transition: background .25s;
}
.shelf-row:hover, .shelf-row.is-current { background: color-mix(in srgb, var(--accent) 12%, var(--paper)); }
.shelf-row__no { align-self: start; padding-top: 8px; font: 500 12px/1 var(--mono); color: var(--muted); }
.shelf-row__name { display: block; font: 600 clamp(28px, 4.6vw, 56px)/.95 var(--sans); letter-spacing: -.04em; text-transform: uppercase; }
.shelf-row__desc { display: block; margin-top: 8px; font: 400 clamp(19px, 2vw, 24px)/1.2 var(--sans); color: var(--muted); }
.shelf-row__packs { display: none; }
.shelf-row__count { grid-column: 2; display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1 var(--mono); text-transform: uppercase; color: var(--ink-2); }
@media (min-width: 760px) {
  .shelf-row { grid-template-columns: 56px 1fr 220px 150px; padding: 28px 12px; }
  .shelf-row__count { grid-column: 4; justify-content: flex-end; }
  .shelf-row__packs { display: flex; align-items: flex-end; justify-content: center; gap: 6px; height: 96px; }
  .shelf-row__packs span { width: 54px; filter: drop-shadow(5px 8px 6px rgba(60, 40, 20, .2)); }
  .shelf-row__packs span:nth-child(2) { width: 62px; }
  .shelf-row__packs img { height: 96px; width: 100%; object-fit: cover; border-radius: 4px; }
  .shelf-row__packs .pack-img { width: 100%; height: auto; max-height: 90px; object-fit: contain; }
  .shelf-row__packs .pack { width: 100%; height: auto; }
}

/* ---------- Product page ---------- */
.crumbs { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; }
.crumbs__trail { font: 500 12px/1.4 var(--mono); text-transform: uppercase; color: var(--muted); text-align: right; }
.crumbs__trail a { text-decoration: none; }
.crumbs__trail a:hover { color: var(--ink); }
.product__grid { display: grid; gap: 32px; padding-bottom: 24px; }
@media (min-width: 960px) {
  .product__grid { grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: start; }
  .product__media { position: sticky; top: calc(var(--header-h) + 20px); }
}
.stage {
  position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius);
  background: color-mix(in srgb, var(--tint) 14%, var(--paper));
}
.stage__word {
  position: absolute; top: 6%; left: 0; right: 0; text-align: center;
  font: 600 clamp(56px, 13vw, 150px)/.9 var(--sans); letter-spacing: -.05em;
  color: color-mix(in srgb, var(--tint) 70%, var(--ink));
}
.stage__board {
  position: absolute; left: 10%; right: 10%; bottom: 15%; height: 14px; border-radius: 1px;
  background: linear-gradient(var(--plank-hi) 0 1px, var(--plank) 1px, var(--plank-lo) calc(100% - 2px), var(--plank-front) calc(100% - 2px));
  box-shadow: 0 14px 16px -10px rgba(90, 60, 25, .35);
}
.stage__pack { position: absolute; left: 50%; bottom: calc(15% + 14px); width: 34%; translate: -50% 0; filter: drop-shadow(10px 14px 10px rgba(60, 40, 20, .25)); animation: settle 1s var(--ease) both; }
.stage__pack .pack { width: 100%; height: auto; }
@keyframes settle { from { transform: translateY(16px); opacity: 0; } }
.stage__note { position: absolute; left: 14px; bottom: 12px; font: 500 11px/1 var(--mono); color: var(--muted); }
.gallery__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--radius); }
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__slide { flex: 0 0 100%; margin: 0; scroll-snap-align: center; position: relative; }
.gallery__slide img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; padding: 6%; background: color-mix(in srgb, var(--tint) 14%, var(--paper)); }
.gallery__slide figcaption { position: absolute; right: 8px; bottom: 8px; max-width: calc(100% - 16px); padding: 4px 7px; border-radius: 4px; background: rgba(0, 0, 0, .45); font: 500 10px/1.3 var(--mono); color: #fff; }
.gallery__slide figcaption a { color: #fff; }
.gallery__thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; }
.gallery__thumbs button { flex: none; width: 68px; height: 68px; padding: 0; border: 1px solid transparent; border-radius: 4px; overflow: hidden; cursor: pointer; background: none; opacity: .6; }
.gallery__thumbs button[aria-current="true"] { border-color: var(--ink); opacity: 1; }
.gallery__thumbs img { width: 100%; height: 100%; object-fit: contain; background: color-mix(in srgb, var(--tint) 14%, var(--paper)); }

.product__title { font: 400 clamp(44px, 5.6vw, 76px)/.98 var(--sans); letter-spacing: -.025em; margin-top: 12px; text-wrap: balance; }
.product__lede { font-size: clamp(18px, 1.6vw, 20px); line-height: 1.5; color: var(--ink-2); margin-top: 18px; max-width: 46ch; }
.product__price { display: flex; align-items: baseline; gap: 16px; margin-top: 22px; font: 600 24px/1 var(--sans); letter-spacing: -.02em; }
.product__rating { display: inline-flex; align-items: center; gap: 4px; font: 500 14px/1 var(--sans); color: var(--muted); }
.product__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.product__actions .btn--primary { flex: 1 1 220px; }
.disclosure { margin-top: 12px; font-size: 13px; color: var(--muted); max-width: 52ch; }
.disclosure a { color: var(--ink); }
.tags { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; font: 600 11px/1 var(--sans); letter-spacing: .05em; text-transform: uppercase; }
.tag--0 { background: var(--tag0-bg); color: var(--tag0); }
.tag--1 { background: var(--tag1-bg); color: var(--tag1); }
.tag--2 { background: var(--tag2-bg); color: var(--tag2); }
.tag--3 { background: var(--tag3-bg); color: var(--tag3); }
.facts { margin: 28px 0 0; border-top: 1px solid var(--line-ink); }
.facts > div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.facts dt { font: 500 12px/1 var(--mono); text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 0; font-weight: 500; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.facts a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.facts__chips { gap: 6px !important; }
.meter { display: inline-flex; gap: 3px; }
.meter__pip { width: 16px; height: 6px; border-radius: 1px; background: var(--line); }
.meter--heat .meter__pip.on { background: var(--heart); }
.meter--rarity .meter__pip.on { background: var(--ink); }
.product__copy { margin-top: 28px; padding-bottom: 0; }
.pull { margin: 32px 0 0; padding: 24px 0 0; border-top: 1px solid var(--line); }
.pull__text { font: italic 400 clamp(26px, 2.6vw, 34px)/1.15 var(--sans); margin-top: 10px; letter-spacing: -.01em; }
.allergen { margin-top: 24px; font-size: 14px; color: var(--muted); }
.retailers { margin-top: 32px; border-top: 1px solid var(--line-ink); padding-top: 14px; }
.retailer { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; min-height: 56px; border-bottom: 1px solid var(--line); text-decoration: none; font-weight: 500; }
.retailer:hover { background: var(--hover); }

.section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; border-top: 1px solid var(--line-ink); padding-top: 14px; margin-bottom: 24px; }
.section-head__title { font: 400 clamp(32px, 4vw, 52px)/1 var(--sans); letter-spacing: -.02em; margin-right: auto; }
.section-head .muted { flex-basis: 100%; order: 3; font-size: 14px; }
.related, .social { padding-top: clamp(56px, 8vw, 104px); }
.social__list { list-style: none; padding: 0; margin: 0; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
.embed { flex: 0 0 min(320px, 80%); scroll-snap-align: start; }
.embed__frame { position: relative; aspect-ratio: 9 / 14; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.embed__frame iframe { width: 100%; height: 100%; border: 0; }
.embed__load { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; border: 0; background: none; cursor: pointer; font-size: 14px; font-weight: 500; }
.embed__load .icon { width: 48px; height: 48px; padding: 14px; border-radius: 50%; border: 1px solid var(--line-ink); fill: currentColor; }
.embed__caption { margin-top: 10px; font-size: 14px; }
.embed__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; color: var(--muted); }

/* ---------- Discover (home) ---------- */
.page-head--home { padding-block: clamp(24px, 4vw, 48px) 24px; }
.page-head--home .page-head__sub { max-width: 40ch; font-size: clamp(19px, 2vw, 24px); }
.page-head--home .eyebrow a { color: var(--ink); }
.toolbar { position: sticky; top: var(--header-h); z-index: 30; background: var(--paper); border-block: 1px solid var(--line); margin-bottom: 24px; }
.toolbar__row { display: flex; align-items: center; gap: 8px; padding-block: 12px; overflow-x: auto; scrollbar-width: none; }
.toolbar__row::-webkit-scrollbar { display: none; }
.toolbar__clear { flex: none; margin-left: 4px; font-size: 14px; font-weight: 500; }
.dd { position: relative; flex: none; }
.dd > summary { list-style: none; }
.dd > summary::-webkit-details-marker { display: none; }
.dd__caret { transform: rotate(90deg); transition: transform .2s; }
.dd[open] .dd__caret { transform: rotate(-90deg); }
.dd__menu {
  position: fixed; left: 12px; right: 12px; bottom: calc(var(--tabbar-h) + 12px + env(safe-area-inset-bottom)); z-index: 50;
  max-height: 60vh; overflow: auto; padding: 16px; border: 1px solid var(--line-ink); border-radius: 8px; background: var(--paper);
  box-shadow: 0 12px 40px rgba(17, 17, 17, .12);
}
.dd__options { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.search--compact { margin: 0; gap: 8px; max-width: none; }
.search--compact input { height: 48px; font-size: 22px; }
.search--compact .btn { min-height: 48px; padding: 0 16px; }
@media (min-width: 860px) {
  .toolbar__row { flex-wrap: wrap; overflow: visible; }
  .dd__menu { position: absolute; left: 0; right: auto; bottom: auto; top: calc(100% + 8px); width: 360px; max-height: 420px; }
}

.search { display: flex; gap: 10px; align-items: stretch; margin-top: 32px; max-width: 760px; }
.search input {
  flex: 1; min-width: 0; height: 56px; padding: 0 2px; border: 0; border-bottom: 1px solid var(--line-ink); border-radius: 0;
  background: transparent; font: 400 clamp(22px, 3vw, 30px)/1 var(--sans); color: var(--ink);
}
.search input::placeholder { color: var(--placeholder); }
.search input:focus { outline: none; border-bottom-width: 2px; }
.search .btn { min-height: 56px; }
@media (max-width: 520px) { .search .btn span { display: none; } .search .btn { padding: 0 18px; } }
.discover { display: grid; gap: 28px; padding-bottom: 32px; }
.filters { display: grid; gap: 20px; min-width: 0; }
.filters__group { display: grid; gap: 10px; min-width: 0; }
.filters__chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.filters__chips::-webkit-scrollbar { display: none; }
.discover__results { min-width: 0; }
.results-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--line-ink); font-size: 15px; }
.results-head a { font-weight: 500; }
@media (min-width: 1000px) {
  .discover { grid-template-columns: 280px 1fr; gap: 48px; align-items: start; }
  .filters { position: sticky; top: calc(var(--header-h) + 24px); }
  .filters__chips { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
}

/* ---------- Generic blocks ---------- */
.empty { text-align: center; padding: 64px 0; max-width: 520px; margin: 0 auto; }
.empty--page { padding-block: clamp(80px, 14vw, 160px); }
.empty__title { font: 400 clamp(30px, 4vw, 44px)/1.05 var(--sans); margin-bottom: 12px; }
.empty__code { font: 600 clamp(72px, 12vw, 140px)/.9 var(--sans); letter-spacing: -.05em; margin-bottom: 14px; }
.empty p { color: var(--muted); }
.empty .btn { margin-top: 22px; }
.panel { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: clamp(20px, 3vw, 32px); margin-bottom: 24px; }
.panel__big { font: 600 44px/1 var(--sans); letter-spacing: -.04em; margin: 12px 0 8px; }
.panel__big em { font: italic 400 1em/1 var(--sans); letter-spacing: -.01em; }
.link-list { display: grid; border-top: 1px solid var(--line-ink); margin-bottom: 48px; }
.link-list a { display: flex; align-items: center; justify-content: space-between; min-height: 58px; border-bottom: 1px solid var(--line); text-decoration: none; font-weight: 500; }
.link-list .icon { transition: transform .2s var(--ease); }
.link-list a:hover .icon { transform: translateX(3px); }

.prose { max-width: 720px; padding-bottom: 48px; color: var(--ink-2); }
.prose p { margin-bottom: 16px; }
.prose h2 { font: 400 clamp(28px, 3vw, 36px)/1.1 var(--sans); color: var(--ink); margin: 40px 0 12px; letter-spacing: -.01em; }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: 10px; }
.prose a:not(.btn) { color: var(--ink); text-underline-offset: 3px; }
.lede { font: 400 clamp(24px, 2.8vw, 32px)/1.2 var(--sans); color: var(--ink); margin-bottom: 24px; }
.company { font-style: normal; border-top: 1px solid var(--line-ink); padding-top: 14px; line-height: 1.8; margin-bottom: 16px; }

/* ---------- Showcase your brand (above the footer) ---------- */
.showcase { margin-top: clamp(64px, 9vw, 120px); padding-block: clamp(48px, 7vw, 96px); background: color-mix(in srgb, #B8753A 9%, var(--paper)); border-top: 1px solid var(--line); }
.showcase + .site-footer { margin-top: 0; }
.showcase__grid { display: grid; gap: 40px; align-items: center; }
.display--md { font-size: clamp(38px, 6vw, 80px); }
.showcase__lede { font: 400 clamp(20px, 2.2vw, 26px)/1.25 var(--sans); color: var(--ink-2); margin: 16px 0 26px; max-width: 30ch; }
.showcase__shelf .cabinet { background-color: color-mix(in srgb, #B8753A 5%, var(--wall)); }
.unit--showcase { --cols: 3 !important; }
.unit--showcase .tile { display: grid; grid-template-rows: var(--top) var(--pack-h) var(--board) var(--label-h); }
.ghost-pack {
  grid-row: 2; justify-self: center; align-self: end; width: 58%; height: 78%;
  border: 1.5px dashed var(--line-ink); opacity: .7; border-radius: 3px; display: grid; place-items: center;
}
.ghost-pack--tall { height: 100%; width: 66%; border-color: var(--ink); background: var(--glass); opacity: 1; }
.ghost-pack span { font: 500 11px/1.2 var(--mono); text-transform: uppercase; text-align: center; padding: 6px; }
@media (min-width: 900px) { .showcase__grid { grid-template-columns: 1fr 1fr; gap: 64px; } }

/* Sponsored (top-shelf) labelling: required for paid placement */
.tile__sponsored { font: 600 8.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
@media (min-width: 640px) { .tile__sponsored { font-size: 9.5px; } }
.sponsored-pill { display: inline-block; margin-bottom: 10px; padding: 4px 9px; border: 1px solid var(--line-ink); border-radius: 999px; font: 600 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.qv .sponsored-pill { margin-bottom: 8px; }

/* Launch-offer pill (showcase band + For brands page) */
.offer-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--ink); color: var(--paper); font: 600 11px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.offer-pill .icon { fill: currentColor; }
.showcase .display, .page-head .offer-pill + .display { margin-top: 16px; }

.showcase__upsell { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: -10px 0 24px; font-size: 15px; color: var(--ink-2); }

/* ---------- For brands page ---------- */
.brand-points { display: grid; gap: 0; }
.brand-point:first-child { border-top: 1px solid var(--line-ink); }
.brand-point { padding: 22px 0; border-bottom: 1px solid var(--line); }
.brand-point__no { font: 500 12px/1 var(--mono); color: var(--muted); margin-bottom: 12px; }
.brand-point__title { font: 600 22px/1.15 var(--sans); letter-spacing: -.02em; margin-bottom: 8px; }
.brand-point p:last-child { color: var(--ink-2); max-width: 42ch; }
@media (min-width: 860px) {
  .brand-points { grid-template-columns: repeat(3, 1fr); }
  .brand-point { padding: 28px 28px 32px 0; border-bottom: 0; border-top: 1px solid var(--line-ink); }
  .brand-point + .brand-point { padding-left: 28px; border-left: 1px solid var(--line); }
}
.brand-form-wrap { display: grid; gap: 32px; padding-top: clamp(56px, 8vw, 104px); scroll-margin-top: calc(var(--header-h) + 16px); }
.brand-form-intro .section-head__title { margin: 10px 0 14px; }
.brand-form-intro p + p { margin-top: 8px; }
@media (min-width: 960px) {
  .brand-form-wrap { grid-template-columns: 1fr 1.6fr; gap: 64px; align-items: start; }
  .brand-form-intro { position: sticky; top: calc(var(--header-h) + 24px); }
}
.brand-form { display: grid; gap: 28px; }
.brand-form fieldset { margin: 0; padding: 0; border: 0; border-top: 1px solid var(--line-ink); padding-top: 16px; display: grid; gap: 16px; min-width: 0; }
.brand-form legend { float: left; width: 100%; padding: 0; margin-bottom: 4px; font: 500 12px/1.4 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.field { display: grid; gap: 6px; font-size: 14px; font-weight: 500; min-width: 0; }
.field__label { font-size: 14px; font-weight: 500; }
.field .hint { font-weight: 400; color: var(--muted); font-size: 13px; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--field-line); border-radius: var(--radius);
  background: var(--surface); font: 400 16px/1.4 var(--sans); color: var(--ink);
}
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(17, 17, 17, .08); }
.field-row { display: grid; gap: 16px; }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } .field-row--3 { grid-template-columns: repeat(3, 1fr); } }
.radio-row { display: flex; flex-wrap: wrap; gap: 6px 16px; min-height: 40px; align-items: center; }
.radio-row label, .brand-form .check { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; font-size: 15px; }
.brand-form .check { align-items: flex-start; line-height: 1.5; color: var(--ink-2); }
.brand-form .check input { margin-top: 4px; }
.radio-row input, .brand-form .check input { width: 18px; height: 18px; accent-color: var(--ink); flex: none; }
.brand-form .btn { justify-self: start; }
.field-error { margin: 0; color: var(--error); font-size: 13px; font-weight: 500; }
.form-alert { padding: 12px 16px; border-radius: var(--radius); background: var(--error-bg); color: var(--error); font-size: 14px; font-weight: 500; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.brand-thanks p + p { margin-top: 10px; }

/* ---------- Footer ---------- */
.site-footer { margin-top: clamp(64px, 9vw, 128px); border-top: 1px solid var(--line-ink); padding-block: 48px 32px; }
.site-footer__top { display: grid; gap: 14px; padding-bottom: 40px; border-bottom: 1px solid var(--line); }
.site-footer__line { font: 400 clamp(20px, 2.4vw, 28px)/1.2 var(--sans); color: var(--ink-2); }
.site-footer__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 24px; padding-block: 36px; }
.site-footer__cols nav { display: grid; gap: 10px; align-content: start; }
.site-footer__cols .eyebrow { margin-bottom: 4px; }
.site-footer__cols a { text-decoration: none; font-size: 15px; }
.site-footer__cols a:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-footer__legal { display: grid; gap: 4px; font-size: 13px; color: var(--muted); padding-top: 20px; border-top: 1px solid var(--line); }
@media (min-width: 860px) {
  .site-footer__top { grid-template-columns: 1fr 1fr; align-items: end; }
  .site-footer__line { justify-self: end; text-align: right; max-width: 22ch; }
  .site-footer__cols { grid-template-columns: repeat(3, 1fr); }
  .site-footer__legal { grid-template-columns: 1fr auto; }
}

.toast {
  position: fixed; z-index: 60; left: 50%; bottom: calc(var(--tabbar-h) + 18px + env(safe-area-inset-bottom));
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  padding: 12px 18px; border-radius: var(--radius); background: var(--ink); color: var(--paper); font-size: 14px; white-space: nowrap;
  transition: opacity .2s, transform .3s var(--ease);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast a { color: var(--paper); margin-left: 8px; }
@media (min-width: 860px) { .toast { bottom: 28px; } }

/* "Surprise me": the chosen product wiggles before it lifts off */
.tile.is-picked .tile__pack { animation: picked .5s var(--ease); }
@keyframes picked { 0%, 100% { transform: none; } 20% { transform: translateY(-10px) rotate(-6deg); } 45% { transform: translateY(-10px) rotate(5deg); } 70% { transform: translateY(-6px) rotate(-3deg); } }

/* ---------- Product quick view (float + zoom + side panel) ---------- */
html { scrollbar-gutter: stable; }
html.qv-open { overflow: hidden; }
body > main { transition: transform .75s var(--ease), filter .75s var(--ease); }
html.qv-open body > main { transform: scale(1.06); filter: blur(3px) saturate(.85); }
.tile.is-lifted .tile__pack { visibility: hidden; }
.qv { position: fixed; inset: 0; z-index: 70; }
.qv[hidden] { display: none; }
.qv__backdrop { position: absolute; inset: 0; background: var(--backdrop); opacity: 0; transition: opacity .5s var(--ease); }
.qv.is-open .qv__backdrop { opacity: 1; }
.qv-float { position: fixed; z-index: 71; pointer-events: none; transform-origin: 50% 50%; will-change: transform; }
.qv-float__inner { width: 100%; height: 100%; filter: drop-shadow(18px 28px 22px rgba(60, 40, 20, .28)); }
.qv-float__inner .pack, .qv-float__inner img { width: 100%; height: 100%; object-fit: contain; }
.qv-float__inner .pack-img { object-fit: contain; }
.qv-float.is-idle .qv-float__inner { animation: qvFloat 3.2s ease-in-out infinite alternate; }
@keyframes qvFloat { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-12px) rotate(2deg); } }
.qv__panel {
  position: absolute; z-index: 72; top: 12px; right: 12px; bottom: 12px; width: min(460px, calc(100vw - 24px));
  overflow-y: auto; overscroll-behavior: contain; padding: 28px 28px 32px;
  background: var(--panel-bg); border: 1px solid var(--panel-line); border-radius: 18px;
  backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: 0 30px 80px rgba(40, 30, 20, .18);
  transform: translateX(calc(100% + 40px)); transition: transform .6s var(--ease);
}
.qv.is-open .qv__panel { transform: none; }
.qv__close { position: absolute; top: 12px; right: 12px; }
.qv__panel:focus { outline: none; }
.qv__eyebrow { margin-right: 44px; }
.qv__title { font: 400 clamp(34px, 3.6vw, 48px)/1 var(--sans); letter-spacing: -.02em; margin-top: 10px; }
.qv__short { margin-top: 14px; color: var(--ink-2); font-size: 16px; }
.qv__price { display: flex; align-items: baseline; gap: 14px; margin-top: 18px; font: 600 22px/1 var(--sans); letter-spacing: -.02em; }
.qv__price span { font: 500 14px/1 var(--sans); color: var(--muted); }
.qv__actions { display: flex; gap: 8px; margin-top: 22px; }
.qv__actions .btn--primary { flex: 1; }
.qv__actions .save--inline { min-height: 46px; padding: 0 16px; }
.qv .facts { margin-top: 22px; }
.qv .facts > div { grid-template-columns: 92px 1fr; padding: 11px 0; }
.qv .pull { margin-top: 22px; padding-top: 18px; }
.qv .pull__text { font-size: 26px; font-style: normal; }
.qv .retailers { margin-top: 22px; }
.qv__more { margin-top: 24px; width: 100%; }
.qv__skeleton { height: 14px; border-radius: 4px; background: linear-gradient(90deg, var(--skeleton-a), var(--skeleton-b), var(--skeleton-a)); background-size: 200% 100%; animation: shimmer 1.2s infinite; margin-top: 14px; }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (max-width: 859px) {
  .qv__panel { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 64vh; max-height: 64dvh; padding: 24px 20px 24px; border-radius: 20px; transform: translateY(calc(100% + 30px)); }
  .qv__title { font-size: 34px; }
  .qv__actions { flex-wrap: wrap; }
  .qv__actions .btn--primary { flex: 1 1 100%; }
  .qv__actions .save--inline { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html.qv-open body > main { transform: none; filter: none; }
}

/* ---------- Display type: Italiana for every title ---------- */
.logo { gap: .28em; }
.logo__a, .logo__b { font-family: var(--display); font-weight: 400; font-style: normal; text-transform: none; letter-spacing: -.01em; font-size: 1em; }
.display, .rack__title, .board__title, .product__title, .qv__title, .section-head__title, .shelf-row__name,
.next-shelf__name, .sheet__title, .empty__title, .empty__code, .brand-point__title, .panel__big, .prose h2,
.page-head h1, .essay__lede {
  font-family: var(--display); font-weight: 400; font-style: normal; text-transform: none;
}
.display { font-size: clamp(40px, 7vw, 96px); line-height: 1; letter-spacing: -.02em; }
.display--shelf { font-size: clamp(40px, 7.4vw, 104px); }
.display--md { font-size: clamp(34px, 5.4vw, 72px); }
.display__serif { font-family: var(--sans); font-size: .6em; letter-spacing: -.01em; margin-top: .14em; }
.board__title { font-size: 15px; letter-spacing: 0; color: var(--board-ink); }
.rack__title { letter-spacing: -.01em; }
.shelf-row__name { font-size: clamp(26px, 4vw, 48px); line-height: 1.05; letter-spacing: -.01em; }
.next-shelf__name { font-size: clamp(32px, 5.6vw, 72px); line-height: 1; letter-spacing: -.02em; }
.sheet__title { font-size: 30px; letter-spacing: -.01em; }
.product__title, .qv__title { letter-spacing: -.01em; line-height: 1.04; }
.qv__title { font-size: clamp(30px, 3vw, 40px); }
.product__title { font-size: clamp(38px, 4.6vw, 64px); }
.section-head__title { font-size: clamp(28px, 3.4vw, 44px); }
.empty__title { font-size: clamp(26px, 3.4vw, 38px); }
.brand-point__title { font-size: 22px; letter-spacing: 0; }
.panel__big { letter-spacing: -.01em; }
.essay__lede { font-size: clamp(24px, 2.8vw, 34px); line-height: 1.2; letter-spacing: -.005em; }
.section-head__title em, .empty__title em, .panel__big em { font-family: var(--display); font-style: normal; }

/* ---------- Compact homepage header: one thin line, then straight into the shelf ---------- */
.home-head { display: grid; gap: 4px 24px; padding-block: 18px 14px; align-items: baseline; }
.home-head__title { font: 400 clamp(24px, 3vw, 34px)/1.1 var(--display); letter-spacing: -.01em; }
.home-head__sub { font-size: 14px; color: var(--ink-2); }
@media (min-width: 860px) { .home-head { grid-template-columns: auto 1fr; padding-block: 22px 16px; } .home-head__sub { justify-self: end; text-align: right; } }

/* ---------- Sans for all copy (Italiana is only for titles) ---------- */
.page-head__sub, .shelf-hero__lede, .showcase__lede, .site-footer__line, .lede { font: 400 clamp(16px, 1.5vw, 19px)/1.5 var(--sans); letter-spacing: 0; }
.site-footer__line em { font-style: normal; }
.tile__name { font: 500 12.5px/1.25 var(--sans); letter-spacing: -.005em; }
.rack__note, .board__note { font-family: var(--sans); font-size: 13px; letter-spacing: 0; }
@media (min-width: 640px) { .board__note { font-size: 14px; } }
.shelf-row__desc { font: 400 15px/1.4 var(--sans); }
.next-shelf__sub { font: 400 clamp(15px, 1.5vw, 18px)/1.4 var(--sans); }
.pull__text { font: 500 clamp(18px, 1.8vw, 21px)/1.4 var(--sans); font-style: normal; letter-spacing: -.01em; }
.qv .pull__text { font-size: 18px; }
.search input { font: 400 clamp(17px, 2vw, 20px)/1 var(--sans); }
.search--compact input { font-size: 17px; }
.display__serif { font-family: var(--display); font-size: .6em; }
.panel__big em, .section-head__title em, .empty__title em { font-style: normal; }


/* ---------- Dark mode (toggle in the header; follows the system until chosen) ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #141210;
  --surface: #1C1916;
  --ink: #F2EDE5;
  --ink-2: #CFC7BB;
  --muted: #958C80;
  --line: #2C2823;
  --line-ink: rgba(242, 237, 229, .75);
  --heart: #E8694F;
  --glass: rgba(20, 18, 16, .88);
  --hover: rgba(242, 237, 229, .07);
  --primary-hover: #FFFFFF;
  --wall: #1B1815;
  --wood-edge: #4A3A29;
  --plank-hi: #8A6A47; --plank: #6E5236; --plank-lo: #5E452D; --plank-front: #3F2E1E;
  --plank-shadow: rgba(0, 0, 0, .45);
  --board-hi: #7C6044; --board: #6A5038; --board-lo: #5C452F;
  --board-ink: #F6EEDF; --board-ink-2: #D8C6AA;
  --object-shadow: rgba(0, 0, 0, .55);
  --placeholder: #6E675E;
  --field-line: #3A352F;
  --error-bg: #3A1D19; --error: #F2A08F;
  --panel-bg: rgba(28, 25, 22, .9); --panel-line: rgba(255, 255, 255, .08);
  --backdrop: rgba(10, 9, 8, .55);
  --skeleton-a: #24201c; --skeleton-b: #2e2924;
  --tag0-bg: #3A1D19; --tag0: #F2A08F; --tag1-bg: #352A12; --tag1: #E9C46A; --tag2-bg: #1E2C1D; --tag2: #A6CF9C; --tag3-bg: #172A38; --tag3: #8FC7EE;
}
:root[data-theme="dark"] body { background: var(--paper); }
:root[data-theme="dark"] .showcase { background: color-mix(in srgb, #B8753A 10%, var(--paper)); }
:root[data-theme="dark"] .next-shelf { background: color-mix(in srgb, var(--accent) 22%, var(--paper)); }
:root[data-theme="dark"] .next-shelf:hover { background: color-mix(in srgb, var(--accent) 30%, var(--paper)); }
:root[data-theme="dark"] .shelf-row:hover, :root[data-theme="dark"] .shelf-row.is-current { background: color-mix(in srgb, var(--accent) 20%, var(--paper)); }
:root[data-theme="dark"] .stage { background: color-mix(in srgb, var(--tint) 18%, var(--paper)); }
:root[data-theme="dark"] .board { box-shadow: 0 10px 14px -10px rgba(0, 0, 0, .7); }
:root[data-theme="dark"] .qv__panel { box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
:root[data-theme="dark"] .dd__menu { box-shadow: 0 12px 40px rgba(0, 0, 0, .5); }
:root[data-theme="dark"] .sheet::backdrop { background: rgba(0, 0, 0, .6); }

.theme-toggle .icon--sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon--sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon--moon { display: none; }

/* ---------- Header search bar (opened from the search icon) ---------- */
.searchbar { display: none; position: fixed; z-index: 45; top: var(--header-h); left: 0; right: 0; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 16px 30px rgba(0, 0, 0, .06); }
.searchbar:target, .searchbar.is-open { display: block; animation: drop .25s var(--ease); }
@keyframes drop { from { transform: translateY(-8px); opacity: 0; } }
.searchbar .search { margin: 0 auto; padding-block: 14px; max-width: 760px; }
.searchbar .search input { height: 50px; }
.searchbar__close { flex: none; align-self: center; }

/* Title tracking (overridden for Italiana at the end of this file) */
.logo__a, .logo__b { letter-spacing: -.035em; }
.logo { gap: .22em; }
.display, .home-head__title, .rack__title, .product__title, .qv__title, .section-head__title, .shelf-row__name,
.next-shelf__name, .sheet__title, .empty__title, .empty__code, .brand-point__title, .panel__big, .prose h2, .page-head h1 { letter-spacing: -.035em; }
.board__title { letter-spacing: -.015em; }
.display__serif { letter-spacing: -.03em; }

/* Scroll-in reveal (added by JS only, so content never hides without it) */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 60ms); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* =====================================================================
   Addendum 01 — Collections, Rare Drops, Special Editions, brand funnel
   ===================================================================== */
.home-section { margin-top: clamp(40px, 6vw, 80px); }

/* Mini shelf: a collection's artwork when it has no cover image */
.minishelf {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  width: 100%; height: 100%; padding: 18px 14px 0; overflow: hidden;
  background: var(--bg, color-mix(in srgb, var(--accent) 12%, var(--wall)));
}
.minishelf__packs { display: flex; align-items: flex-end; justify-content: center; gap: 6%; height: 72%; padding-inline: 6%; }
.minishelf__pack { flex: 0 1 22%; height: 100%; display: flex; align-items: flex-end; justify-content: center; min-width: 0;
  transform: rotate(var(--r, 0deg)); transform-origin: 50% 100%; filter: drop-shadow(4px 6px 5px var(--object-shadow)); }
.minishelf__pack .pack { height: calc(100% * var(--scale, 1)); width: auto; max-width: 100%; }
.minishelf__pack .pack-img { height: calc(100% * var(--scale, 1)); width: auto; max-width: 100%; object-fit: contain; object-position: 50% 100%; }
.minishelf__plank { display: block; height: 12px; margin-inline: -14px;
  background: linear-gradient(var(--plank-hi) 0 1px, var(--plank) 1px, var(--plank-lo) calc(100% - 3px), var(--plank-front) calc(100% - 3px));
  box-shadow: 0 10px 14px -6px var(--plank-shadow); }
.minishelf--big { padding: 32px 24px 0; }
.minishelf--big .minishelf__plank { height: 16px; margin-inline: -24px; }
.cover { display: block; width: 100%; height: 100%; }
.cover img { width: 100%; height: 100%; object-fit: cover; }

/* Collection cards */
.cgrid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 560px) { .cgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .cgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.ccard { min-width: 0; }
.ccard__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  transition: border-color .2s, box-shadow .2s var(--ease), transform .2s var(--ease); }
.ccard__link:hover { border-color: var(--line-ink); box-shadow: 0 2px 8px rgba(0, 0, 0, .04); }
.ccard__link:active { transform: scale(.99); }
.ccard__visual { position: relative; display: block; aspect-ratio: 16 / 10; border-bottom: 1px solid var(--line); }
.ccard__link:hover .minishelf__pack { transform: rotate(0deg) translateY(-3px); transition: transform .4s var(--ease); }
.ccard__badge { position: absolute; top: 10px; left: 10px; padding: 3px 9px; border-radius: 999px;
  font: 500 10.5px/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.ccard__badge--past { left: auto; right: 10px; color: var(--muted); }
.ccard__body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 16px 18px 18px; }
.ccard__title { font: 400 clamp(22px, 2.2vw, 28px)/1.08 var(--display); letter-spacing: -.01em; text-wrap: balance; }
.ccard__tag { color: var(--ink-2); font-size: 15px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ccard__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding-top: 10px; font-size: 13px; color: var(--muted); }
.ccard__cta { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 500; }
.ccard__cta .icon { transition: transform .2s var(--ease); }
.ccard__link:hover .ccard__cta .icon { transform: translateX(3px); }
.ccard--rare_drop .eyebrow { color: var(--tag0); }
.ccard--special_edition .eyebrow { color: var(--tag1); }
.ccard--brand .ccard__link { background: color-mix(in srgb, #B8753A 9%, var(--paper)); border-style: dashed; border-color: var(--line-ink); justify-content: center; min-height: 260px; }
.ccard--brand .ccard__title { font-size: clamp(26px, 2.6vw, 34px); }

/* Homepage: featured collection hero */
.hero-collection { padding-top: clamp(16px, 3vw, 32px); }
.hero-collection__inner { display: grid; gap: 24px; align-items: center;
  background: var(--bg, color-mix(in srgb, var(--accent) 10%, var(--paper))); border-radius: 12px; padding: clamp(20px, 4vw, 48px); overflow: hidden; }
.hero-collection .display { margin-top: 10px; }
.hero-collection__lede { font: 400 clamp(19px, 2.2vw, 26px)/1.3 var(--sans); color: var(--ink-2); margin: 14px 0 6px; max-width: 32ch; }
.hero-collection__meta { color: var(--muted); font-size: 14px; margin-bottom: 22px; }
.hero-collection__visual { display: block; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; }
.hero-collection__visual .minishelf { background: color-mix(in srgb, var(--surface) 55%, transparent); }
@media (min-width: 900px) { .hero-collection__inner { grid-template-columns: 1.05fr 1fr; gap: 48px; } }

/* Homepage: the latest Rare Drop */
.drop-card { display: grid; gap: 0; text-decoration: none; color: var(--ink); border: 1px solid var(--line-ink); border-radius: 12px; overflow: hidden; background: var(--surface); }
.drop-card__text { display: flex; flex-direction: column; gap: 8px; padding: clamp(20px, 3vw, 36px); }
.drop-card__text .eyebrow { color: var(--tag0); }
.drop-card__title { font: 400 clamp(30px, 4vw, 52px)/1 var(--display); letter-spacing: -.015em; }
.drop-card__tag { font-size: clamp(16px, 1.6vw, 19px); color: var(--ink-2); max-width: 40ch; margin-bottom: 10px; }
.drop-card .link-arrow { align-self: flex-start; }
.drop-card__visual { display: block; aspect-ratio: 16 / 9; border-top: 1px solid var(--line); }
.drop-card:hover .link-arrow .icon { transform: translateX(3px); }
@media (min-width: 800px) {
  .drop-card { grid-template-columns: 1fr 1fr; }
  .drop-card__text { justify-content: center; }
  .drop-card__visual { aspect-ratio: auto; min-height: 280px; border-top: 0; border-left: 1px solid var(--line); }
}

/* Homepage: make it onto the shelf */
.make-it { display: grid; gap: 32px; align-items: center; padding: clamp(24px, 5vw, 56px); border-radius: 12px; background: color-mix(in srgb, #B8753A 9%, var(--paper)); border: 1px solid var(--line); }
.make-it__lede { font: 400 clamp(18px, 2vw, 23px)/1.35 var(--sans); color: var(--ink-2); margin: 14px 0 24px; max-width: 34ch; }
.make-it__shelf .cabinet { background-color: color-mix(in srgb, #B8753A 5%, var(--wall)); }
@media (min-width: 900px) { .make-it { grid-template-columns: 1.1fr 1fr; gap: 56px; } }

/* Collection page */
.preview-bar { margin-top: 12px; padding: 10px 14px; border-radius: 8px; background: var(--tag3-bg); color: var(--tag3); font-size: 14px; }
.crumbs__trail--left { text-align: left; }
.shelf-hero__headline { font: 500 clamp(18px, 2vw, 22px)/1.35 var(--sans); color: var(--ink); margin-top: 14px; max-width: 40ch; }
.shelf-hero__headline + .shelf-hero__lede { margin-top: 8px; }
.shelf-hero__meta { color: var(--muted); font-size: 14px; margin-bottom: 18px; }
.save-collection .icon { transition: transform .2s var(--ease); }
.save-collection.is-saved { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.save-collection.is-saved .icon { fill: currentColor; }
.shelf-index__step { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; }
.shelf-index__step:hover { border-color: var(--ink); }
.suggest { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  margin-top: 28px; padding: 18px 20px; border: 1px dashed var(--line-ink); border-radius: 10px; }
.suggest p { font: 400 clamp(18px, 2vw, 22px)/1.3 var(--display); }
.related-collections { margin-top: clamp(48px, 7vw, 88px); }

/* Collections library */
.toolbar__spacer { flex: 1 0 8px; }
@media (min-width: 860px) { .dd__menu--right { left: auto; right: 0; } }
.csearch { position: relative; flex: none; display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.csearch:focus-within { border-color: var(--ink); }
.csearch input { border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; color: var(--ink); width: 150px; min-width: 0; }
.saved-collections { margin-bottom: clamp(32px, 5vw, 56px); }

/* Get on the shelf */
.disclosure-note { font-size: 14px; color: var(--muted); max-width: 60ch; margin-top: 12px; }
.check--soft { color: var(--muted); font-size: 14px; }

:root[data-theme="dark"] .ccard__link, :root[data-theme="dark"] .drop-card { background: color-mix(in srgb, var(--surface) 70%, var(--paper)); }
:root[data-theme="dark"] .ccard--brand .ccard__link, :root[data-theme="dark"] .make-it { background: color-mix(in srgb, #B8753A 12%, var(--paper)); }
:root[data-theme="dark"] .preview-bar { background: rgba(31, 108, 159, .2); color: #9ccbea; }

@media (max-width: 420px) {
  .csearch input { width: 110px; }
  .hero-collection__inner { padding: 18px; }
  .suggest { padding: 16px; }
}
@media (min-width: 1100px) { .cgrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cgrid--4 .ccard__title { font-size: 24px; } }

/* Homepage: top collections carousel (two per view on desktop) */
.tops { padding-top: clamp(14px, 2.4vw, 28px); }
.tops__wrap { position: relative; }
.tops__wrap .row-btn--start, .tops__wrap .row-btn--next { top: 50%; margin-top: -17px; }
.tops__track { display: grid; grid-auto-flow: column; grid-auto-columns: 88%; gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.tops__track::-webkit-scrollbar { display: none; }
.tops__track--single { grid-auto-columns: 100%; }
@media (min-width: 760px) { .tops__track { grid-auto-columns: calc((100% - 16px) / 2); gap: 16px; } .tops__track--single { grid-auto-columns: 100%; } }
.top-card {
  scroll-snap-align: start; position: relative; display: flex; align-items: center; justify-content: center; min-width: 0;
  height: clamp(300px, 34vh, 360px); overflow: hidden; text-decoration: none; color: var(--ink);
  border-radius: 12px; border: 1px solid var(--line); background: var(--bg, color-mix(in srgb, var(--accent) 10%, var(--paper)));
  transition: border-color .2s;
}
.top-card:hover { border-color: var(--line-ink); }
/* text in the middle of the card */
.top-card__text { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: min(56%, 380px); text-align: center; }
.top-card--rare_drop .eyebrow { color: var(--tag0); }
.top-card__title { font: 400 clamp(26px, 2.8vw, 40px)/1.02 var(--display); letter-spacing: -.015em; text-wrap: balance; }
.top-card__tag { color: var(--ink-2); font-size: 15px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.top-card__cta { margin-top: 6px; font-size: 15px; }
.top-card:hover .link-arrow .icon { transform: translateX(3px); }
/* products scattered around the edges */
.top-card__scatter { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.top-card__item { position: absolute; display: flex; align-items: center; justify-content: center; width: 22%; height: 38%;
  filter: drop-shadow(8px 12px 10px var(--object-shadow)); transition: transform .5s var(--ease); }
.top-card__item .pack, .top-card__item .pack-img { width: 100%; height: 100%; object-fit: contain; }
.top-card__item--1 { left: 2%; top: 6%; transform: rotate(-9deg); }
.top-card__item--2 { right: 2%; top: 4%; transform: rotate(8deg); }
.top-card__item--3 { left: 4%; bottom: 4%; transform: rotate(7deg); }
.top-card__item--4 { right: 3%; bottom: 3%; transform: rotate(-7deg); }
.top-card__item--5 { left: 50%; bottom: -10%; width: 16%; height: 26%; transform: translateX(-50%) rotate(-4deg); opacity: .0; }
.top-card:hover .top-card__item--1 { transform: rotate(-4deg) translateY(-4px); }
.top-card:hover .top-card__item--2 { transform: rotate(3deg) translateY(-4px); }
.top-card:hover .top-card__item--3 { transform: rotate(2deg) translateY(-4px); }
.top-card:hover .top-card__item--4 { transform: rotate(-2deg) translateY(-4px); }
@media (min-width: 1000px) {
  .top-card__item { width: 20%; height: 40%; }
  .top-card__item--5 { opacity: 1; left: auto; right: 24%; bottom: auto; top: -6%; width: 13%; height: 26%; transform: rotate(12deg); }
  .top-card:hover .top-card__item--5 { transform: rotate(6deg) translateY(4px); }
}
@media (max-width: 640px) {
  .top-card { height: 300px; }
  .top-card__text { max-width: 58%; }
  .top-card__title { font-size: 24px; }
  .top-card__tag { font-size: 13.5px; }
  .top-card__item { width: 24%; height: 30%; }
}
.home-section--tight { margin-top: clamp(16px, 2vw, 24px); }

/* Homepage: one shelf per signature aisle */
.aisle + .aisle { margin-top: clamp(36px, 5vw, 56px); }
.aisle__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.aisle__title { font: 400 clamp(24px, 2.6vw, 34px)/1.05 var(--display); letter-spacing: -.01em; }
.aisle__title a { text-decoration: none; }
.aisle__title a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.aisle__sub { color: var(--muted); font-size: 15px; margin-top: 4px; }
.aisle__all { flex: none; font-size: 14px; }
@media (max-width: 520px) { .aisle__all { display: none; } }

/* Saved page: saved collections carousel, then My Aisle */
.saved-collections { margin-bottom: clamp(36px, 5vw, 56px); }
.ctrack-wrap { position: relative; }
.ctrack-wrap .row-btn--start, .ctrack-wrap .row-btn--next { top: 30%; }
.ctrack { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.ctrack::-webkit-scrollbar { display: none; }
.ctrack .cgrid { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: min(82%, 340px); }
.ctrack .ccard { scroll-snap-align: start; }
.my-aisle .board__title { font-size: 18px; }

/* Collection page: one continuous shelf; each rack begins with a category card on the plank */
.tile--rack .tile__link { color: var(--ink); cursor: default; }
.rack-card {
  grid-row: 2; align-self: end; justify-self: center; display: flex; flex-direction: column; align-items: center;
  width: calc(100% - 4px); max-height: var(--pack-h); filter: drop-shadow(4px 7px 6px var(--object-shadow));
}
/* the board: a white sign card */
.rack-card__sign {
  display: flex; flex-direction: column; gap: 5px; width: 100%; min-height: 0; overflow: hidden;
  padding: 10px 11px 8px; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 5px; transform: rotate(-1.5deg); transform-origin: 50% 100%;
}
/* the stand: a wooden stem and a weighted foot resting on the plank */
.rack-card__stand { position: relative; flex: none; width: 52%; height: 22px; --wood: #8A6A44; --wood-hi: #B08C62; }
.rack-card__stand::before {
  content: ""; position: absolute; left: 50%; top: -3px; width: 7px; height: 19px; transform: translateX(-50%);
  background: linear-gradient(90deg, var(--wood), var(--wood-hi) 45%, var(--wood)); border-radius: 2px 2px 0 0;
}
.rack-card__stand::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; border-radius: 4px 4px 2px 2px;
  background: linear-gradient(var(--wood-hi), var(--wood)); box-shadow: 0 2px 3px rgba(60, 40, 20, .25);
}
.rack-card__no { font: 500 11px/1 var(--mono); color: var(--muted); }
/* sized to the card: the name stays within two lines and never breaks inside a word */
.rack-card__title { display: block; flex: none; font: 400 20px/1.08 var(--display); letter-spacing: -.01em; overflow: hidden; overflow-wrap: normal; word-break: normal; hyphens: none; }
.rack-card__note { font: 400 clamp(11px, 6.5cqi, 12.5px)/1.35 var(--sans); color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; flex: none; -webkit-box-orient: vertical; overflow: hidden; }
.tile--rack .tile__brand { color: var(--muted); }
/* the arrow points at the products that follow */
.rack-card__arrow { display: flex; justify-content: flex-end; margin-top: 2px; color: var(--ink); }
@media (max-width: 639px) { .rack-card__sign { padding: 7px 6px 5px; } .rack-card__note { display: none; } }
.rack--flow { padding-top: 0; }

/* Surprise Me: the page takes the product's colour, the product floats at the top
   and stays there while the details scroll up beneath a soft fade. */
@property --sp-tint { syntax: '<color>'; inherits: true; initial-value: #B8753A; }
body:has([data-surprise-page]),
:root[data-theme="dark"] body:has([data-surprise-page]) {
  --sp-bg: color-mix(in srgb, var(--sp-tint) 18%, var(--paper));
  background: var(--sp-bg); transition: --sp-tint .7s var(--ease);
}
:root[data-theme="dark"] body:has([data-surprise-page]) { --sp-bg: color-mix(in srgb, var(--sp-tint) 24%, var(--paper)); }
body:has([data-surprise-page]) .site-header { background: color-mix(in srgb, var(--sp-bg) 82%, transparent); }
.surprise__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 24px; padding-block: clamp(16px, 3vw, 28px) 6px; }
.surprise__title { font: 400 clamp(22px, 3vw, 36px)/1.1 var(--display); letter-spacing: -.01em; margin-top: 4px; }
.surprise__count { font: 500 13px/1 var(--mono); color: var(--muted); white-space: nowrap; }
.sp-stage {
  position: sticky; top: var(--header-h); z-index: 5; height: clamp(260px, 46svh, 460px);
  display: flex; align-items: center; justify-content: center; touch-action: pan-y;
  background: linear-gradient(to bottom, var(--sp-bg) calc(100% - 56px), transparent);
}
.sp-stage__pack { height: 78%; width: min(70%, 420px); display: flex; align-items: center; justify-content: center; filter: drop-shadow(16px 26px 22px rgba(40, 25, 10, .28)); }
.sp-stage__pack .pack, .sp-stage__pack .pack-img { height: calc(100% * var(--scale, 1)); width: auto; max-width: 100%; object-fit: contain; }
.sp-stage__pack.is-floating { animation: qvFloat 3.2s ease-in-out infinite alternate; }
.sp-stage__pack.is-in-next { animation: spInNext .55s var(--ease); }
.sp-stage__pack.is-in-prev { animation: spInPrev .55s var(--ease); }
.sp-stage__pack.is-in-shuffle { animation: spInShuffle .6s var(--ease); }
@keyframes spInNext { from { opacity: 0; transform: translateX(60px) rotate(4deg); } to { opacity: 1; transform: none; } }
@keyframes spInPrev { from { opacity: 0; transform: translateX(-60px) rotate(-4deg); } to { opacity: 1; transform: none; } }
@keyframes spInShuffle { from { opacity: 0; transform: translateY(40px) scale(.85) rotate(-6deg); } to { opacity: 1; transform: none; } }
.sp-arrow { position: absolute; top: 50%; margin-top: -24px; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: 50%; border: 1px solid var(--line-ink); background: color-mix(in srgb, var(--sp-bg) 70%, var(--surface)); color: var(--ink); cursor: pointer; transition: opacity .2s, background .2s; }
.sp-arrow:hover { background: var(--ink); color: var(--paper); }
.sp-arrow:disabled { opacity: 0; pointer-events: none; }
.sp-arrow--prev { left: var(--gutter); }
.sp-arrow--next { right: var(--gutter); }
.sp-details { position: relative; z-index: 1; min-height: 50svh; }
.sp-slide__visual { display: none; }
.sp-slide { max-width: 760px; margin: 0 auto; padding-bottom: 96px; }
.sp-slide.is-entering { animation: spText .5s var(--ease); }
@keyframes spText { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.sp-slide__name { font: 400 clamp(30px, 4.4vw, 52px)/1.04 var(--display); letter-spacing: -.015em; margin-top: 8px; text-wrap: balance; }
.sp-slide__name a { text-decoration: none; }
.sp-slide__short { font-size: clamp(16px, 1.8vw, 19px); line-height: 1.5; color: var(--ink-2); margin-top: 10px; }
.sp-slide__actions { display: flex; gap: 10px; margin: 18px 0 8px; }
.sp-slide__actions .btn--primary { flex: 0 1 auto; min-width: 0; }
.sp-slide .btn__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-slide__more { margin-top: 18px; }
.sp-slide .facts, .sp-slide .retailers, .sp-slide .pull { background: transparent; }
.sp-shuffle-bar { position: sticky; bottom: 20px; z-index: 20; display: flex; justify-content: center; pointer-events: none; margin-top: -76px; padding-block: 8px; }
.sp-shuffle { pointer-events: auto; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .45); padding-inline: 26px; }
@media (max-width: 640px) {
  body:has([data-surprise-page]) .site-header { display: none; }
  .surprise__head { flex-wrap: nowrap; align-items: center; gap: 12px; padding-block: calc(10px + env(safe-area-inset-top)) 0; }
  .surprise__head .eyebrow { font-size: 11px; }
  .surprise__title { font-size: 18px; line-height: 1.15; margin-top: 2px; }
  .sp-stage { top: 0; height: 40svh; min-height: 240px; }
  .sp-arrow { width: 40px; height: 40px; margin-top: -20px; }
  .sp-slide__name { font-size: 28px; }
  .sp-slide__short { font-size: 15px; }
  .sp-slide__actions { flex-wrap: nowrap; }
  .sp-slide__actions .btn--primary { flex: 1 1 auto; padding-inline: 14px; }
  .sp-slide__actions .save { flex: none; padding-inline: 14px; }
  .sp-shuffle-bar { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 10px); }
}

/* ---------- Brand: logo and mark (inline SVG; brown follows the theme, green stays) ---------- */
.brand-svg { display: block; color: #361D11; overflow: visible; }
.brand-svg[viewBox="0 0 361 318"] { aspect-ratio: 361 / 318; }
.brand-svg[viewBox="0 0 1491 319"] { aspect-ratio: 1491 / 319; }
:root[data-theme="dark"] .brand-svg { color: #F2EDE5; }
.logo { display: inline-flex; align-items: center; color: inherit; }
.logo__img { height: 34px; width: auto; }
.logo--lg .logo__img { height: clamp(48px, 7vw, 84px); }
@media (max-width: 640px) { .logo__img { height: 28px; } }
.empty__mark { width: 72px; height: auto; margin: 0 auto 14px; }
.surprise__eyebrow { display: flex; align-items: center; gap: 6px; }
.surprise__mark { width: 18px; height: auto; }
.ghost-pack--tall { flex-direction: column; gap: 6px; }
.ghost-pack__mark { width: 62%; height: auto; }
.brand-thanks__mark { width: 64px; height: auto; margin-bottom: 10px; }
/* quick view: the mark breathes while the product loads */
.qv__loading-mark { display: block; width: 44px; height: 40px; margin: 18px 0 4px; background: url("../images/brand/icon.svg") center / contain no-repeat; animation: markBreath 1.2s ease-in-out infinite alternate; }
@keyframes markBreath { from { opacity: .35; transform: scale(.94); } to { opacity: .9; transform: scale(1); } }

:root[data-theme="dark"] .qv__loading-mark { background-image: url("../images/brand/icon-dark.png"); }

/* ---------- Italiana for titles: a fine single-weight didone, so no negative tracking ---------- */
.display, .home-head__title, .rack__title, .board__title, .product__title, .qv__title, .section-head__title, .shelf-row__name,
.next-shelf__name, .sheet__title, .empty__title, .empty__code, .brand-point__title, .panel__big, .prose h2, .page-head h1, .essay__lede,
.more-card__n, .ccard__title, .top-card__title, .drop-card__title, .aisle__title, .rack-card__title, .surprise__title, .sp-slide__name,
.suggest p, .display__serif em, .section-head__title em, .empty__title em, .panel__big em {
  font-family: var(--display); font-weight: 400; letter-spacing: .005em;
}
.board__title { font-size: 17px; letter-spacing: .01em; }
.brand-point__title { font-size: 24px; }
.essay__lede { line-height: 1.22; }

/* Top collection cards: bigger titles (no type label above them) */
.top-card__title { font-size: clamp(36px, 4.2vw, 60px); line-height: .98; }
@media (max-width: 640px) { .top-card .top-card__title { font-size: 29px; } .top-card .top-card__text { max-width: 60%; } }

/* ---------- Product names on the shelves: larger and shown on phones too ---------- */
.unit { --label-h: 56px; }
.tile__name { display: -webkit-box; font: 500 12.5px/1.22 var(--sans); }
.tile__brand { font-size: 10px; }
@media (min-width: 640px) { .unit { --label-h: 66px; } .tile__name { font-size: 14.5px; } .tile__brand { font-size: 11px; } }
@media (min-width: 960px) { .unit { --label-h: 72px; } .tile__name { font-size: 15.5px; line-height: 1.25; } .tile__brand { font-size: 11.5px; } }

/* ---------- Brand pages ---------- */
.brand-link { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.brand-link:hover { color: var(--ink); }
.brand-hero { padding-block: 12px clamp(24px, 4vw, 40px); max-width: 860px; }
.brand-hero__name { margin-top: 10px; }
.brand-hero__tagline { font: 400 clamp(22px, 2.6vw, 30px)/1.25 var(--display); color: var(--ink); margin-top: 12px; max-width: 32ch; }
.brand-hero__about { margin-top: 14px; max-width: 62ch; color: var(--ink-2); font-size: clamp(16px, 1.6vw, 18px); line-height: 1.6; }
.brand-hero__about p + p { margin-top: 10px; }
.brand-hero__meta { color: var(--muted); font-size: 14px; margin: 14px 0 18px; }
.qv__brand { margin-top: 14px; }
/* Brands A–Z */
.az { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 24px; }
.az a { display: grid; place-items: center; min-width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; font: 500 13px/1 var(--mono); }
.az a:hover { border-color: var(--ink); }
.az-group { display: grid; grid-template-columns: 56px 1fr; gap: 0 16px; border-top: 1px solid var(--line-ink); padding-top: 12px; margin-bottom: 28px; scroll-margin-top: calc(var(--header-h) + 16px); }
.az-group__letter { font: 400 40px/1 var(--display); }
.brand-list { list-style: none; margin: 0; padding: 0; }
.brand-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; padding: 12px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.brand-row__name { font: 400 clamp(22px, 2.4vw, 28px)/1.1 var(--display); }
.brand-row__tag { grid-column: 1; color: var(--muted); font-size: 14px; }
.brand-row__n { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.brand-row:hover .brand-row__name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
@media (max-width: 640px) { .az-group { grid-template-columns: 1fr; } .az-group__letter { font-size: 32px; margin-bottom: 4px; } }

/* ---------- Clean shelves: no tint, just the wooden plank, with rounded ends ---------- */
.unit {
  --shelf-bg: transparent;
  --r: 7px; /* radius of the plank's ends */
  --cap-y: calc(var(--b) + var(--board) / 2);
  -webkit-mask-image:
    linear-gradient(#000, #000),
    linear-gradient(to bottom, #000 var(--b), transparent var(--b), transparent calc(var(--b) + var(--board)), #000 calc(var(--b) + var(--board))),
    linear-gradient(to bottom, #000 var(--b), transparent var(--b), transparent calc(var(--b) + var(--board)), #000 calc(var(--b) + var(--board))),
    radial-gradient(var(--r) calc(var(--board) / 2) at var(--r) var(--cap-y), #000 96%, transparent 100%),
    radial-gradient(var(--r) calc(var(--board) / 2) at var(--r) var(--cap-y), #000 96%, transparent 100%);
  -webkit-mask-size: calc(100% - 2 * var(--r)) 100%, var(--r) var(--row-h), var(--r) var(--row-h), calc(2 * var(--r)) var(--row-h), calc(2 * var(--r)) var(--row-h);
  -webkit-mask-position: center top, left top, right top, left top, right top;
  -webkit-mask-repeat: no-repeat, repeat-y, repeat-y, repeat-y, repeat-y;
  mask-image:
    linear-gradient(#000, #000),
    linear-gradient(to bottom, #000 var(--b), transparent var(--b), transparent calc(var(--b) + var(--board)), #000 calc(var(--b) + var(--board))),
    linear-gradient(to bottom, #000 var(--b), transparent var(--b), transparent calc(var(--b) + var(--board)), #000 calc(var(--b) + var(--board))),
    radial-gradient(var(--r) calc(var(--board) / 2) at var(--r) var(--cap-y), #000 96%, transparent 100%),
    radial-gradient(var(--r) calc(var(--board) / 2) at var(--r) var(--cap-y), #000 96%, transparent 100%);
  mask-size: calc(100% - 2 * var(--r)) 100%, var(--r) var(--row-h), var(--r) var(--row-h), calc(2 * var(--r)) var(--row-h), calc(2 * var(--r)) var(--row-h);
  mask-position: center top, left top, right top, left top, right top;
  mask-repeat: no-repeat, repeat-y, repeat-y, repeat-y, repeat-y;
}
.cabinet, .cabinet .unit { background-color: transparent; }

/* ---------- Surprise Me on desktop: product left, details right; Shuffle stays at the bottom ---------- */
@media (min-width: 1000px) {
  .surprise { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; max-width: var(--max); margin: 0 auto; }
  .surprise > .surprise__head, .surprise > .sp-shuffle-bar, .surprise > .fineprint, .surprise > .empty { grid-column: 1 / -1; }
  .sp-stage { grid-column: 1; align-self: start; top: calc(var(--header-h) + 8px); height: calc(100svh - var(--header-h) - 140px); min-height: 380px; background: none; }
  .sp-stage__pack { height: 86%; width: min(80%, 460px); }
  .sp-details { grid-column: 2; padding-top: clamp(16px, 4vh, 48px); min-height: calc(100svh - var(--header-h) - 140px); }
  .sp-slide { max-width: 560px; margin: 0; padding-bottom: 110px; }
  .sp-slide__name { font-size: clamp(36px, 3.6vw, 56px); }
  .sp-arrow--prev { left: 8px; }
  .sp-arrow--next { right: 8px; }
}

/* ---------- Homepage top band: the logo's dark brown behind the featured cards and Editor's picks ---------- */
.home-top {
  /* light mode: the page's own light background; dark mode and festival themes colour the band */
  --band: transparent; --band-ink: var(--ink); --band-muted: var(--muted);
  background: var(--band); color: var(--band-ink);
  padding-bottom: clamp(28px, 4vw, 48px);
}
:root[data-theme="dark"] .home-top { --band: #24130A; --band-ink: #F4EBDD; --band-muted: rgba(244, 235, 221, .66); }
.home-top .tops { padding-top: clamp(18px, 2.6vw, 32px); }
:root[data-theme="dark"] .home-top .top-card, :root[data-fest] .home-top .top-card { border-color: transparent; }
.home-top .picks { margin-top: clamp(28px, 4vw, 44px); }
.home-top .aisle__title, .home-top .aisle__title a { color: var(--band-ink); }
.home-top .aisle__sub { color: var(--band-muted); }
.home-top .tile__link, .home-top .tile__brand { color: var(--band-ink); }
.home-top .tile__name { color: var(--band-muted); }
:root[data-theme="dark"] .home-top .tile__sponsored { color: #F2C4A8; }
:root[data-theme="dark"] .home-top .unit, :root[data-fest] .home-top .unit { --plank-shadow: rgba(0, 0, 0, .35); --object-shadow: rgba(0, 0, 0, .45); }
:root[data-theme="dark"] .home-top .row-btn, :root[data-fest] .home-top .row-btn { background: color-mix(in srgb, var(--band-ink) 14%, transparent); color: var(--band-ink); border-color: color-mix(in srgb, var(--band-ink) 45%, transparent); }
:root[data-theme="dark"] .home-top .row-btn:hover, :root[data-fest] .home-top .row-btn:hover { background: var(--band-ink); color: var(--band); }
:root[data-theme="dark"] .home-top .more-card, :root[data-fest] .home-top .more-card { border-color: color-mix(in srgb, var(--band-ink) 50%, transparent); }
.home-top + .home-section { margin-top: clamp(28px, 5vw, 64px); }

/* Save heart sits on the plank, centred between the product and its name; names drop a little to make room */
.save--tile { top: calc(var(--top) + var(--pack-h) + var(--board) / 2 - 15px); right: auto; left: 50%; transform: translateX(-50%); z-index: 3; }
.tile__label { padding-top: 22px; }
.unit { --label-h: 62px; }
@media (max-width: 639px) { .tile__label { padding-top: 18px; } }
@media (min-width: 640px) { .unit { --label-h: 80px; } }
@media (min-width: 960px) { .unit { --label-h: 86px; } }

/* ---------- Collection cards: a dark collage of the collection's products ---------- */
.ccard__visual { aspect-ratio: 16 / 10; height: auto; overflow: hidden; border-bottom: 0; }
.ccard__visual > .cover, .ccard__visual > .minishelf { position: absolute; inset: 0; }
.collage { position: absolute; inset: 0; display: block; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 20%, color-mix(in srgb, var(--accent) 34%, #2A160C), color-mix(in srgb, var(--accent) 14%, #1C0E07)); }
.collage__item { position: absolute; display: flex; align-items: center; justify-content: center; width: 24%; height: 46%;
  filter: drop-shadow(8px 12px 12px rgba(0, 0, 0, .45)); transition: transform .5s var(--ease); }
.collage__item .pack, .collage__item .pack-img { width: 100%; height: 100%; object-fit: contain; }
.collage__item--1 { left: 3%;  top: 6%;    transform: rotate(-8deg); }
.collage__item--2 { left: 27%; top: -2%;   transform: rotate(5deg); }
.collage__item--3 { left: 52%; top: 4%;    transform: rotate(-4deg); }
.collage__item--4 { right: 2%; top: 8%;    transform: rotate(9deg); }
.collage__item--5 { left: 8%;  bottom: 2%; transform: rotate(6deg); }
.collage__item--6 { left: 38%; bottom: -2%; width: 26%; height: 50%; transform: rotate(-6deg); }
.collage__item--7 { right: 5%; bottom: 4%; transform: rotate(4deg); }
/* fewer products: let them grow */
.collage:has(> :nth-child(4):last-child) .collage__item, .collage:has(> :nth-child(3):last-child) .collage__item { width: 30%; height: 56%; }
.ccard__link:hover .collage__item { transform: rotate(0deg) translateY(-4px); }
.ccard__badge { z-index: 2; }
.cgrid { grid-auto-rows: 1fr; } /* every collection card the same size */
.ccard__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ccard__tag { -webkit-line-clamp: 2; }

/* ---------- Collection cards, poster style: products around the edges, title and CTA centred ---------- */
.cgrid .ccard:not(.ccard--brand) .ccard__link {
  position: relative; display: flex; align-items: center; justify-content: center; height: 100%; min-height: clamp(360px, 34vw, 470px);
  overflow: hidden; border: 0; border-radius: 12px; color: #F4EBDD;
  background: radial-gradient(110% 90% at 50% 40%, color-mix(in srgb, var(--accent) 34%, #2A160C), color-mix(in srgb, var(--accent) 12%, #1A0D06));
}
.ccard__art { position: absolute; inset: 0; }
.ccard__art > .minishelf, .ccard__art > .cover { position: absolute; inset: 0; }
.collage--frame { background: none; }
.collage--frame .collage__item { width: 23%; height: 27%; }
.collage--frame .collage__item--1 { left: 3%;  top: 4%;     right: auto; bottom: auto; transform: rotate(-8deg); }
.collage--frame .collage__item--2 { right: 3%; top: 3%;     left: auto;  bottom: auto; transform: rotate(8deg); }
.collage--frame .collage__item--3 { left: 1%;  top: 37%;    right: auto; bottom: auto; transform: rotate(5deg); }
.collage--frame .collage__item--4 { right: 1%; top: 38%;    left: auto;  bottom: auto; transform: rotate(-6deg); }
.collage--frame .collage__item--5 { left: 4%;  bottom: 4%;  right: auto; top: auto;    transform: rotate(-5deg); }
.collage--frame .collage__item--6 { right: 4%; bottom: 3%;  left: auto;  top: auto;    width: 23%; height: 27%; transform: rotate(6deg); }
.ccard__link:hover .collage--frame .collage__item { transform: rotate(0deg) translateY(-4px); }
.cgrid .ccard:not(.ccard--brand) .ccard__body {
  position: relative; z-index: 2; flex: none; align-items: center; text-align: center; gap: 10px;
  max-width: min(54%, 300px); padding: 0;
}
.cgrid .ccard:not(.ccard--brand) .ccard__title { font-size: clamp(28px, 2.8vw, 42px); line-height: 1.02; color: #F4EBDD; -webkit-line-clamp: 3; text-wrap: balance; }
.cgrid .ccard:not(.ccard--brand) .ccard__tag { color: rgba(244, 235, 221, .75); font-size: 14.5px; -webkit-line-clamp: 3; }
.cgrid .ccard:not(.ccard--brand) .ccard__eyebrow { color: #F2C4A8; }
.cgrid .ccard:not(.ccard--brand) .ccard__cta { margin-top: 6px; color: #F4EBDD; font-weight: 500; }
.ccard__badge { z-index: 3; }
.ccard--brand .ccard__link { min-height: clamp(360px, 34vw, 470px); align-items: center; text-align: center; }
.ccard--brand .ccard__body { align-items: center; }
@media (max-width: 559px) {
  .cgrid .ccard:not(.ccard--brand) .ccard__link { min-height: 380px; }
  .cgrid .ccard:not(.ccard--brand) .ccard__title { font-size: 30px; }
}
.cgrid .ccard:not(.ccard--brand) .ccard__title { font-size: clamp(26px, 2.3vw, 38px); -webkit-line-clamp: 4; }
.cgrid .ccard:not(.ccard--brand) .ccard__body { max-width: min(58%, 320px); }

/* Collection cards: big titles like the homepage cards (two per row on desktop to give them room) */
@media (min-width: 1000px) { .cgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cgrid .ccard:not(.ccard--brand) .ccard__link { min-height: clamp(380px, 36vw, 520px); }
.cgrid .ccard:not(.ccard--brand) .ccard__body { max-width: min(58%, 420px); }
.cgrid .ccard:not(.ccard--brand) .ccard__title { font-size: clamp(34px, 3.8vw, 56px); line-height: 1; -webkit-line-clamp: 5; }
.cgrid .ccard:not(.ccard--brand) .ccard__tag { font-size: 15.5px; }
@media (max-width: 559px) { .cgrid .ccard:not(.ccard--brand) .ccard__title { font-size: 32px; } }
@media (max-width: 559px) {
  .collage--frame .collage__item--3, .collage--frame .collage__item--4 { display: none; }
  .collage--frame .collage__item { width: 26%; height: 25%; }
  .cgrid .ccard:not(.ccard--brand) .ccard__body { max-width: 66%; }
  .cgrid .ccard:not(.ccard--brand) .ccard__title { font-size: 31px; }
}

/* ---------- "Get on the Shelf" card: an open slot on a little shelf ---------- */
.cgrid .ccard--brand .ccard__link {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; height: 100%;
  min-height: clamp(380px, 36vw, 520px); padding: 32px 28px; text-align: center; overflow: hidden;
  border: 1.5px dashed color-mix(in srgb, var(--ink) 45%, transparent); border-radius: 12px;
  background: radial-gradient(90% 70% at 50% 30%, color-mix(in srgb, #B8753A 14%, var(--paper)), color-mix(in srgb, #B8753A 6%, var(--paper)));
}
.cgrid .ccard--brand .ccard__link:hover { border-style: solid; border-color: var(--ink); }
.ccard--brand .ccard__body { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0; max-width: 420px; flex: none; }
.ccard--brand .eyebrow { color: #9A5A2B; }
.ccard--brand .ccard__title { font-size: clamp(32px, 3.6vw, 52px); line-height: 1.02; text-wrap: balance; -webkit-line-clamp: 3; }
.ccard--brand .ccard__tag { font-size: 15.5px; color: var(--ink-2); -webkit-line-clamp: 3; }
.ccard--brand .ccard__btn { margin-top: 10px; }
.slot-art { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 14px; width: min(320px, 80%); height: 130px; padding: 0 18px; flex: none; }
.slot-art__pack { display: block; width: 52px; border-radius: 4px 4px 2px 2px; background: color-mix(in srgb, #B8753A 26%, var(--paper)); box-shadow: 4px 6px 10px -4px rgba(60, 40, 20, .3); }
.slot-art__pack--a { height: 78px; transform: rotate(-3deg); }
.slot-art__pack--b { height: 64px; border-radius: 26px 26px 4px 4px; transform: rotate(3deg); }
.slot-art__slot {
  display: grid; place-items: center; width: 74px; height: 108px; border-radius: 6px; color: var(--ink);
  border: 2px dashed var(--ink); background: color-mix(in srgb, var(--surface) 70%, transparent);
  animation: slotGlow 2.4s ease-in-out infinite;
}
.slot-art__slot .icon { width: 26px; height: 26px; }
@keyframes slotGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(184, 117, 58, 0); } 50% { box-shadow: 0 0 0 8px rgba(184, 117, 58, .16); } }
.slot-art__plank { position: absolute; left: 0; right: 0; bottom: -10px; height: 12px; border-radius: 6px;
  background: linear-gradient(var(--plank-hi) 0 1px, var(--plank) 1px, var(--plank-lo) calc(100% - 3px), var(--plank-front) calc(100% - 3px));
  box-shadow: 0 8px 12px -6px var(--plank-shadow); }
.ccard--brand .ccard__link:hover .slot-art__slot { background: var(--ink); color: var(--paper); }
@media (prefers-reduced-motion: reduce) { .slot-art__slot { animation: none; } }

/* Brand invitation: the curious detective instead of the empty shelf */
.make-it { overflow: hidden; position: relative; }
.make-it__art { position: relative; align-self: stretch; display: flex; align-items: flex-end; justify-content: center; min-height: 280px; margin: -12px 0 calc(-1 * clamp(24px, 5vw, 56px)); }
.detective { display: block; width: min(100%, 420px); height: auto; filter: drop-shadow(0 18px 24px rgba(40, 25, 10, .18)); transform-origin: 50% 100%; transition: transform .6s var(--ease); }
.make-it:hover .detective { transform: rotate(-2deg) translateY(-4px); }
.showcase .make-it__art { margin: 0; }
@media (max-width: 899px) { .make-it__art { min-height: 0; margin-bottom: calc(-1 * clamp(24px, 5vw, 56px)); } .detective { width: min(78%, 340px); } }
/* the detective (portrait image with products at his feet) */
.detective { width: auto; max-width: 100%; height: clamp(320px, 38vw, 480px); object-fit: contain; }
.make-it__art { align-items: center; margin: 0; min-height: 0; }
@media (max-width: 899px) { .detective { height: 340px; width: auto; } .make-it__art { margin-bottom: 0; } }

/* =====================================================================
   Festival themes (Swiggy-style takeovers): ribbon, band colours, particles
   ===================================================================== */
:root[data-fest] .home-top { --band: var(--fest-band); --band-ink: var(--fest-ink); --band-muted: color-mix(in srgb, var(--fest-ink) 68%, transparent); position: relative; overflow: hidden; }
:root[data-fest] .home-top > *:not(.fest-particles) { position: relative; z-index: 1; }
:root[data-fest] .home-top .tile__sponsored { color: var(--fest-accent); }

.fest-ribbon {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px 16px; flex-wrap: wrap;
  padding: 10px var(--gutter); text-decoration: none; text-align: center; font-size: 14px; line-height: 1.35;
  color: var(--fest-ink); background-color: var(--fest-band); overflow: hidden; isolation: isolate;
}
.fest-ribbon::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5; background-repeat: repeat-x; background-position: center; background-size: auto 100%; }
.fest-ribbon__tag { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; background: var(--fest-accent); color: var(--fest-band); }
.fest-ribbon__cta { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--fest-accent); border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.fest-ribbon:hover .fest-ribbon__cta .icon { transform: translateX(3px); transition: transform .2s var(--ease); }
@media (max-width: 640px) { .fest-ribbon { font-size: 13px; padding-block: 8px; gap: 6px 10px; } .fest-ribbon__text { flex-basis: 100%; order: 3; } }
/* ribbon patterns (simple SVG motifs in the accent colour) */
.fest-ribbon--lamps::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='40'%3E%3Cpath d='M0 6 Q15 16 30 6 T60 6' fill='none' stroke='%23F4A62A' stroke-width='1' opacity='.7'/%3E%3Cpath d='M30 9 c-3 4 -3 7 0 9 c3 -2 3 -5 0 -9z' fill='%23F4A62A'/%3E%3Ccircle cx='30' cy='22' r='3' fill='%23F4A62A' opacity='.6'/%3E%3C/svg%3E"); }
.fest-ribbon--splash::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='40'%3E%3Ccircle cx='12' cy='12' r='7' fill='%23FF5FAE' opacity='.55'/%3E%3Ccircle cx='40' cy='28' r='9' fill='%23FFD23F' opacity='.45'/%3E%3Ccircle cx='70' cy='10' r='6' fill='%2346E0C1' opacity='.5'/%3E%3C/svg%3E"); }
.fest-ribbon--stars::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='40'%3E%3Cpath d='M15 8l2 5 5 .5-4 3.5 1.5 5-4.5-3-4.5 3 1.5-5-4-3.5 5-.5z' fill='%23E9C46A' opacity='.6'/%3E%3Ccircle cx='50' cy='28' r='1.6' fill='%23ffffff' opacity='.7'/%3E%3Ccircle cx='40' cy='9' r='1' fill='%23ffffff' opacity='.6'/%3E%3C/svg%3E"); }
.fest-ribbon--hearts::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='40'%3E%3Cpath d='M20 28s-8-5-8-10a4 4 0 0 1 8-1 4 4 0 0 1 8 1c0 5-8 10-8 10z' fill='%23F28AA0' opacity='.55'/%3E%3C/svg%3E"); }
.fest-ribbon--dots::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='10' cy='12' r='2' fill='%23F9C74F' opacity='.6'/%3E%3Ccircle cx='30' cy='28' r='1.5' fill='%23ffffff' opacity='.5'/%3E%3C/svg%3E"); }

/* particles drifting down the homepage band */
.fest-particles { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.fest-particles i { position: absolute; top: -6%; left: calc(var(--x, 50) * 1%); width: 6px; height: 6px; border-radius: 50%;
  background: var(--fest-accent); opacity: .7; animation: festFall var(--d, 11s) linear var(--delay, 0s) infinite; }
.fest-particles--snow i { background: #fff; opacity: .65; }
.fest-particles--sparks i { width: 4px; height: 4px; box-shadow: 0 0 10px 2px var(--fest-accent); }
.fest-particles--petals i { width: 9px; height: 6px; border-radius: 60% 0 60% 0; }
.fest-particles--confetti i { width: 5px; height: 9px; border-radius: 1px; }
.fest-particles--colour i { width: 10px; height: 10px; filter: blur(1px); }
.fest-particles i:nth-child(3n) { background: var(--fest-ink); }
.fest-particles--colour i:nth-child(3n+1) { background: #FFD23F; } .fest-particles--colour i:nth-child(3n+2) { background: #46E0C1; }
.fest-particles i:nth-child(1)  { --x: 4;  --d: 12s; --delay: -2s; }  .fest-particles i:nth-child(2)  { --x: 11; --d: 9s;  --delay: -6s; }
.fest-particles i:nth-child(3)  { --x: 17; --d: 14s; --delay: -1s; }  .fest-particles i:nth-child(4)  { --x: 24; --d: 10s; --delay: -8s; }
.fest-particles i:nth-child(5)  { --x: 30; --d: 13s; --delay: -4s; }  .fest-particles i:nth-child(6)  { --x: 36; --d: 11s; --delay: -10s; }
.fest-particles i:nth-child(7)  { --x: 42; --d: 15s; --delay: -3s; }  .fest-particles i:nth-child(8)  { --x: 48; --d: 9s;  --delay: -7s; }
.fest-particles i:nth-child(9)  { --x: 54; --d: 12s; --delay: -5s; }  .fest-particles i:nth-child(10) { --x: 60; --d: 14s; --delay: -9s; }
.fest-particles i:nth-child(11) { --x: 66; --d: 10s; --delay: -2s; }  .fest-particles i:nth-child(12) { --x: 72; --d: 13s; --delay: -11s; }
.fest-particles i:nth-child(13) { --x: 78; --d: 11s; --delay: -6s; }  .fest-particles i:nth-child(14) { --x: 84; --d: 15s; --delay: -1s; }
.fest-particles i:nth-child(15) { --x: 89; --d: 9s;  --delay: -4s; }  .fest-particles i:nth-child(16) { --x: 94; --d: 12s; --delay: -8s; }
.fest-particles i:nth-child(17) { --x: 27; --d: 16s; --delay: -12s; } .fest-particles i:nth-child(18) { --x: 63; --d: 16s; --delay: -14s; }
@keyframes festFall { 0% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(14px, 55vh) rotate(160deg); } 100% { transform: translate(-10px, 110vh) rotate(320deg); } }
@media (prefers-reduced-motion: reduce) { .fest-particles { display: none; } }

/* ---------- Brands index: every brand on its own shelf ---------- */
.az-group--shelves .az-group__brands { min-width: 0; }
.aisle--brand + .aisle--brand { margin-top: clamp(28px, 4vw, 44px); }
.aisle--brand .aisle__title { font-size: clamp(26px, 3vw, 34px); }

/* Mobile tab bar: five tabs */
.tabbar { grid-template-columns: repeat(5, 1fr); }
.tabbar__item { min-width: 0; }
@media (min-width: 761px) {
  .az-group--shelves .az-group__brands { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: clamp(28px, 4vw, 44px) clamp(24px, 3vw, 40px); align-items: end; }
  .az-group--shelves .aisle--brand + .aisle--brand { margin-top: 0; }
  .aisle--brand .aisle__head { align-items: flex-start; }
  .aisle--brand .aisle__sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em; }
}

/* ---------- Phones: products twice as big (2 a row, double height) ---------- */
@media (max-width: 639px) {
  .unit { --cols: 2; --pack-h: 192px; --top: 22px; --gap: 14px; --pad: 12px; --label-h: 70px; }
  .tile__name { font-size: 14.5px; }
  .tile__brand { font-size: 11px; }
  .unit--row > .tile:nth-child(n+3) { display: none; }
  .unit--showcase { --cols: 2 !important; }
}
@media (min-width: 640px) { .aisle--brand .unit { --cols: 3; --pad: 14px; } }

/* Get on the Shelf hero: the detective on the right */
.gos-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(24px, 4vw, 64px); }
.gos-hero__art { display: flex; justify-content: center; }
.gos-hero .detective { height: clamp(360px, 40vw, 540px); width: auto; max-width: 100%; }
@media (max-width: 760px) {
  .gos-hero { grid-template-columns: 1fr; }
  .gos-hero__art { order: -1; }
  .gos-hero .detective { height: 300px; }
}

/* ---------- Weekly Drops sign-up ---------- */
.drops--band, .drops--page {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: end;
  padding: clamp(28px, 5vw, 56px); border-radius: 8px; background: var(--paper-2, color-mix(in srgb, var(--ink) 4%, var(--paper)));
}
.drops__title { margin: 10px 0 0; font: 400 clamp(36px, 5vw, 64px)/1 var(--display); letter-spacing: -.01em; }
.drops__title em { font-style: normal; color: var(--accent-ink, var(--ink-2)); }
.drops__lede { margin: 14px 0 0; max-width: 46ch; font: 400 clamp(15px, 1.4vw, 17px)/1.55 var(--sans); color: var(--ink-2); }
.drops__form { min-width: 0; }
.drops__row { display: flex; gap: 8px; }
.drops__input {
  flex: 1; min-width: 0; height: 52px; padding: 0 18px; border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); border-radius: 999px;
  background: var(--paper); color: var(--ink); font: 400 16px/1 var(--sans);
}
.drops__input:focus { outline: 2px solid var(--ink); outline-offset: 2px; }
.drops__btn { height: 52px; padding-inline: 26px; border-radius: 999px; flex: none; }
.drops__note { margin: 10px 4px 0; font: 400 12.5px/1.45 var(--sans); color: var(--muted); }
.drops__note a { color: inherit; }
.drops__note.is-ok { color: var(--ink); font-weight: 500; font-size: 14px; }
.drops__note.is-error { color: #B3261E; font-size: 14px; }
.drops--page { margin-top: clamp(20px, 4vw, 48px); }
.drops--page .drops__title { font-size: clamp(44px, 7vw, 88px); }
.drops--done { display: block; }
.drops--done .btn { margin-top: 24px; }
.site-footer__drops { margin: 0 0 clamp(28px, 4vw, 44px); padding-bottom: clamp(24px, 3vw, 36px); border-bottom: 1px solid var(--line); }
.drops--footer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 8px 32px; align-items: center; }
.drops--footer .eyebrow { grid-column: 1; }
.drops--footer .drops__lede { grid-column: 1; margin: 0; }
.drops--footer .drops__form { grid-column: 2; grid-row: 1 / span 2; }
.unsub { max-width: 640px; padding-block: clamp(48px, 10vw, 120px); }
.unsub form { margin: 24px 0; }
@media (max-width: 760px) {
  .drops--band, .drops--page, .drops--footer { grid-template-columns: 1fr; }
  .drops--footer .drops__form { grid-column: 1; grid-row: auto; margin-top: 8px; }
  .drops__row { flex-direction: column; }
  .drops__btn { width: 100%; }
}