/* ============================================================
   Collect — numbered sticker collection module
   Design tokens + component styles. Ported faithfully from the
   Claude Design handoff (project/styles.css). Owned by
   collectibles; served via the module browser-asset
   pipeline at /assets/modules/collectibles/css/collect.css
   ============================================================ */

/* Collect design roles bridge onto PlatformKit semantic design-system tokens
   first, with numeric fallback values so the module still renders when hosted
   outside a themed shell. */
:root {
  --sm-brown: rgb(var(--surface-brand, 78 40 23));
  --sm-brown-2: rgb(var(--surface-brand-hover, 59 27 10));
  --sm-nav-brown: rgb(var(--surface-brand, 78 40 23));
  --sm-pro-brown: rgb(var(--surface-brand-hover, 134 89 70));
  /* 4.97:1 on white; pinned by TestCollectPrimaryTokenClearsContrastForWhiteText. */
  --sm-orange: #c4460a;
  --sm-orange-2: #b84200;
  /* Per-tool accents (2026-07): Ride wears teal, Pop-up/Stores wears magenta,
     so the three Collect tools read as distinct sub-brands under one chrome.
     Consumed via each page's --page-accent (see .collect-ride/.collect-stores). */
  --sm-teal: #0FB5AE;
  --sm-teal-ink: #087F7B;
  --sm-magenta: #E5127D;
  --sm-magenta-ink: #B70A68;
  --sm-blue: #1257c4;
  --sm-blue-2: #0e47a3;
  --sm-yellow: rgb(var(--surface-warning, 247 213 78));
  --sm-green: rgb(var(--surface-success, 69 159 80));
  --sm-pink: rgb(var(--surface-danger, 249 14 91));
  --sm-purple: rgb(var(--surface-info, 140 79 255));
  --sm-cream: rgb(var(--surface-warning-soft, 246 241 230));
  --sm-paper: var(--sm-cream);
  --sm-red: rgb(var(--fg-danger, 179 38 30));
  --sm-line: color-mix(in srgb, var(--sm-border) 80%, transparent);
  --sm-warning-bg: rgb(var(--surface-warning-soft, 255 246 234));
  --sm-blue-wash: rgb(var(--surface-info-soft, 230 244 255));
  --sm-rare: rgb(var(--surface-warning, 255 212 0));

  /* Collect consistency system (2026-08): one warm-light surface from
     marketplace through payment. Dark remains a contained rip/reveal world,
     never the page theme. */
  --sm-page: #f7f4f1;
  --sm-page-2: #f1ece7;
  --sm-card: #ffffff;
  --sm-selected: #fff1e3;
  --sm-text: #282320;
  --sm-text-2: #57504a;
  --sm-muted: #756c64;
  --sm-text-muted: var(--sm-muted);
  --sm-border: #ede7e1;
  --sm-border-2: #d8cec5;
  --sm-progress-track: #ede7e1;
  --sm-cover-ink: #123025;
  --sm-content-max: 1200px;
  --sm-content-pad: 24px;
  --sm-radius-btn: 6px;
  --sm-font-sans: "proxima-nova", "Helvetica Neue", Helvetica, Arial, "Mulish", "Inter", sans-serif;
  --sm-font-button: "Helvetica Neue", Helvetica, Arial, "Mulish", "Inter", sans-serif;

  /* Keep world accents in sync with collect_brand/brand-tokens.css. */
  --collect-black: rgb(var(--surface-primary, 11 11 11));
  --collect-tungsten: rgb(var(--surface-warning, 197 157 108));
  --collect-tungsten-deep: rgb(var(--fg-warning, 84 70 52));
  --collect-holo: linear-gradient(100deg, rgb(var(--surface-info, 149 115 223)) 0%, rgb(var(--surface-brand, 81 76 238)) 22%, rgb(var(--fg-info, 103 157 175)) 45%, rgb(var(--surface-success, 12 134 75)) 62%, rgb(var(--surface-warning, 254 202 2)) 82%, rgb(var(--surface-danger, 226 99 2)) 100%);
  --collect-glitter: rgb(var(--fg-muted, 184 187 184));

  --shadow-sticker: 0 6px 14px rgba(40,35,32,.12), 0 2px 4px rgba(40,35,32,.08);
  --shadow-card: 0 1px 2px rgba(40,35,32,.06), 0 8px 24px rgba(40,35,32,.06);
  --shadow-lift: 0 14px 30px rgba(40,35,32,.12), 0 4px 8px rgba(40,35,32,.08);
  --glow-tungsten: 0 0 40px rgba(197,157,108,.18), 0 0 120px rgba(197,157,108,.07);
  --glow-holo: 0 0 24px rgba(149,115,223,.25), 0 0 60px rgba(103,157,175,.12);

  /* Illustration / brand palette (C-07). These tokenize the exact color
     literals previously hard-coded in the collect UI atoms and the sticker
     SVG art. Values are unchanged from the prior raw hex, so rendering is
     identical — they exist so design-token compliance is satisfied and the
     palette has a single source of truth. --sm-art-* are the sticker
     illustration colors. */
  --sm-ink: #282320;
  --sm-art-brown: rgb(var(--surface-brand, 61 40 23));
  --sm-art-brown-2: rgb(var(--surface-brand-hover, 92 58 29));
  --sm-art-brown-3: rgb(var(--surface-brand, 122 79 42));
  --sm-art-brown-4: rgb(var(--surface-inverse, 42 28 16));
  --sm-art-tan: rgb(var(--surface-warning, 168 118 69));
  --sm-art-green: rgb(var(--surface-success, 30 166 85));
  --sm-art-green-2: rgb(var(--fg-success, 58 175 93));
  --sm-art-green-deep: rgb(var(--fg-success, 15 106 53));
  --sm-art-green-pale: rgb(var(--surface-success-subtle, 164 227 184));
  --sm-art-green-wash: rgb(var(--surface-success-soft, 200 238 209));
  --sm-art-blue: rgb(var(--surface-info, 22 114 246));
  --sm-art-pink: rgb(var(--surface-danger, 255 91 154));
  --sm-art-gold: rgb(var(--surface-warning, 255 212 0));
  --sm-art-gold-deep: rgb(var(--fg-warning, 184 146 0));
  --sm-art-orange-deep: rgb(var(--surface-danger, 160 69 0));
  --sm-art-cream-1: rgb(var(--surface-warning-soft, 255 247 240));
  --sm-art-cream-2: rgb(var(--surface-warning-soft, 255 243 230));
  --sm-art-peach: rgb(var(--surface-danger-soft, 255 231 214));
  --sm-art-peach-2: rgb(var(--surface-warning-soft, 255 217 184));
}

/* Caveat — the handwritten script accent for album chapter marks, cover-series,
   and the create flow. Self-hosted, same-origin (CSP-safe), served from the
   module's browser-asset tree and embedded via assets_embed.go. One variable
   woff2 (Latin subset) covers the 400-700 weight axis, so a single @font-face
   serves both the 400 chapter marks and the 700 cover-series. Source: Google
   Fonts Caveat v23, OFL — see browser/fonts/README.md. */
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/modules/collectibles/fonts/caveat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Mulish — the self-hosted fallback face when a tenant does not provide its
   own brand font. Same-origin (CSP-safe), embedded via assets_embed.go.
   One variable woff2 (Latin subset) covers the 400-800 weight axis. Source:
   Google Fonts Mulish v18, OFL — see browser/fonts/README.md. */
@font-face {
  font-family: "Mulish";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/modules/collectibles/fonts/mulish-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Source album typography. These faces are used by the editable GraphicRiver
   album imports and are self-hosted so their live text does not silently fall
   back to a different browser font. Every redistributed face below uses a
   permissive open license; the restricted Aller and Playlist files named by
   the source package are not redistributed. Their layers retain authored
   metrics and use safe fallbacks. */
@font-face {
  font-family: "Bebas Neue";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/modules/collectibles/fonts/bebas-neue-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/modules/collectibles/fonts/montserrat-regular-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Landing display faces (2026-08): Sticker Mule uses licensed Proxima Nova.
   These same-origin Montserrat Latin builds are the OFL stand-in. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/modules/collectibles/fonts/montserrat-medium-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/modules/collectibles/fonts/montserrat-bold-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/modules/collectibles/fonts/cinzel-bold-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Yellowtail";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/modules/collectibles/fonts/yellowtail-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/modules/collectibles/fonts/source-sans-pro-light.woff2") format("woff2");
}

@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/modules/collectibles/fonts/source-sans-pro-regular.woff2") format("woff2");
}

@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/modules/collectibles/fonts/source-sans-pro-semibold.woff2") format("woff2");
}

@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/modules/collectibles/fonts/source-sans-pro-bold.woff2") format("woff2");
}

@font-face {
  font-family: "Source Sans Pro";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/modules/collectibles/fonts/source-sans-pro-italic.woff2") format("woff2");
}

@font-face {
  font-family: "Source Sans Pro";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/modules/collectibles/fonts/source-sans-pro-bold-italic.woff2") format("woff2");
}

/* Product-wordmark display faces (2026-07): three genuinely distinct display
   faces so Stickify, Ride, and Pop-up read as separate sub-brands. Self-hosted,
   same-origin (CSP-safe), embedded via assets_embed.go — see
   browser/fonts/README.md. Baloo 2 400-800 = Stickify
   (rounded die-cut sticker),
   Barlow Semi Condensed 800 italic = Ride (condensed motion), Bungee 400 =
   Pop-up (stacked marquee). Latin-subset woff2, OFL. */
@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/modules/collectibles/fonts/baloo2-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Barlow Semi Condensed";
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/modules/collectibles/fonts/barlow-semicondensed-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Bungee";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/modules/collectibles/fonts/bungee-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.collect-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.collect-brand-mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

.collect-root * { box-sizing: border-box; }
.collect-root {
  background: var(--sm-page);
  color: var(--sm-text);
  font-family: var(--sm-font-sans);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Display headings use the tenant-provided sans stack when present, then fall
   back to the self-hosted Mulish/Inter stack. */
.collect-root h1, .collect-root h2, .collect-root h3,
.collect-root .h1 {
  font-family: var(--sm-font-sans);
}
/* Keep generic editorial links blue without overriding atomic/component classes. */
.collect-root a:where(:not([class])) { color: var(--sm-blue); text-decoration: none; }
.collect-root a:where(:not([class])):hover { text-decoration: underline; }
.collect-root button { font-family: inherit; cursor: pointer; }

/* The global navigation is a client composition. Its rules live in the
   Sticker Mule overlay at extensions/backend/collect_brand/browser/css/
   chrome.css, so another tenant can reuse the Collect page without inheriting
   this brand's shell. */

/* ---------- sub nav (Collect-specific) ---------- */
.collect-subnav {
  background: var(--sm-card);
  border-bottom: 1px solid var(--sm-border);
  padding: 0 max(var(--sm-content-pad), calc((100% - var(--sm-content-max)) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 20px;
  height: 56px;
  font-weight: 600;
  font-size: 14px;
  color: var(--sm-text);
  position: sticky;
  top: 46px;
  z-index: 99;
}
.collect-subnav .crumb {
  min-width: 0;
  flex: 1 1 auto;
}
.collect-subnav .tabs {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
  flex: 0 0 auto;
  height: 100%;
}
.collect-subnav .tabs a {
  display: inline-flex;
  align-items: center;
  height: 100%;
  color: var(--sm-muted);
  padding: 0;
  line-height: 1;
  position: relative;
  cursor: pointer;
}
.collect-subnav .tabs a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: transparent;
}
.collect-subnav .tabs a.active { color: var(--sm-text); }
.collect-subnav .tabs a.active::after { background: var(--sm-orange); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: var(--sm-radius-btn);
  border: 1px solid var(--sm-orange);
  font-family: var(--sm-font-button);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
  background: var(--sm-orange);
  color: #fff;
  transition: background-color .15s ease, transform .04s ease;
}
.btn:hover { background: var(--sm-orange-2); border-color: var(--sm-orange-2); text-decoration: none; color: #fff; }
.btn:active { transform: translateY(1px); }
.btn.orange { background: var(--sm-orange); color: #fff; }
.btn.orange:hover { background: var(--sm-orange-2); color: #fff; }
.btn.ghost { background: var(--sm-card); color: var(--sm-text); border: 1px solid var(--sm-border-2); }
.btn.ghost:hover { background: var(--sm-page-2); color: var(--sm-text); }
.btn.dark { background: var(--sm-card); color: var(--sm-text); border-color: var(--sm-border-2); }
.btn.dark:hover { background: var(--sm-page-2); color: var(--sm-text); }
.btn.sm { min-height: 36px; padding: 7px 14px; font-size: 14px; line-height: 1.4; }
.btn.lg { min-height: 44px; padding: 10px 18px; font-size: 16px; line-height: 1.4; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
/* Icon glyphs inside buttons: the shared icon atom's utility classes are not
   loaded on collect pages, so size and align the svg explicitly to keep the
   icon and label on one cohesive line inside the pill. */
.btn .collect-icon { display: inline-flex; align-items: center; }
.btn .collect-icon svg { width: 16px; height: 16px; display: block; }
.btn > span { display: inline-flex; align-items: center; }
.collect-root a.btn,
.collect-root a.btn:hover {
  color: #fff;
  text-decoration: none;
}
.collect-root a.btn.ghost,
.collect-root a.btn.ghost:hover,
.collect-root a.btn.dark,
.collect-root a.btn.dark:hover {
  color: var(--sm-text);
}

/* ---------- generic ---------- */
.shell { background: var(--sm-page); min-height: calc(100vh - 46px - 54px); }
.wrap { max-width: var(--sm-content-max); margin: 0 auto; padding: 0 var(--sm-content-pad); }
.h1 { font-size: 42px; font-weight: 700; letter-spacing: -.02em; line-height: 1.05; margin: 0; }
.h2 { font-size: 28px; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; margin: 0; }
.h3 { font-size: 20px; font-weight: 800; letter-spacing: -.005em; margin: 0; }
.muted { color: var(--sm-muted); }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--sm-card);
  border: 1px solid var(--sm-border);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--sm-text);
}
.pill.complete { background: #e5f4e8; color: #267337; border-color: #c8e7ce; }
.pill.active { background: var(--sm-selected); color: var(--sm-orange); border-color: #f4c9aa; }
.pill.dot::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sm-orange);
}

/* ---------- dashboard hero ---------- */
.collect-hero {
  /* white-on-orange matches stickermule.com's live hero/CTA treatment —
     brand parity intentionally kept over WCAG AA on brand surfaces. */
  background: var(--sm-orange);
  color: #fff;
  padding: 36px var(--sm-content-pad) 0;
  position: relative;
  overflow: hidden;
}
.collect-hero .hero-grid {
  max-width: var(--sm-content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: end;
}
.collect-hero .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.18);
  padding: 5px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.collect-hero h1 {
  /* stickermule.com hero voice: proxima-nova at weight 400 — light and
     airy at display sizes, not the launch-page 700-800 shout. */
  font-size: 56px; font-weight: 400; letter-spacing: -.01em; line-height: 1; margin: 14px 0 12px;
}
.collect-hero p { font-size: 17px; max-width: 460px; margin: 0 0 22px; line-height: 1.4; }
.collect-hero .cta-row { display: flex; gap: 12px; align-items: center; margin-bottom: 38px; }
.collect-hero .cta-row .meta { font-size: 13.5px; font-weight: 600; opacity: .9; margin-left: 8px; }
.collect-hero .stack {
  position: relative; height: 320px;
}
.dashboard-product-stack {
  isolation: isolate;
}
.dashboard-product-stack::before {
  content: "";
  position: absolute;
  inset: 13% 4% -14%;
  z-index: -1;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  filter: blur(2px);
}
.dashboard-product-art {
  position: absolute;
  display: block;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 12px 12px rgba(78, 40, 23, .22));
}
.dashboard-product-art.is-pack {
  top: 7%;
  left: 34%;
  z-index: 1;
  width: 34%;
  transform: rotate(-3deg);
}
.dashboard-product-art.is-mule {
  top: 18%;
  left: 2%;
  z-index: 3;
  width: 31%;
  transform: rotate(-9deg);
}
.dashboard-product-art.is-holo {
  top: 2%;
  right: 3%;
  z-index: 2;
  width: 29%;
  transform: rotate(8deg);
}
.dashboard-product-art.is-glitter {
  right: 8%;
  bottom: -5%;
  z-index: 4;
  width: 27%;
  transform: rotate(12deg);
}

/* central product film section */
.collect-hero-video {
  background: var(--sm-card);
  padding: 48px 20px;
  box-shadow: var(--glow-tungsten); /* the film's bulb: the hero sits in the light pool */
}
.collect-video-container {
  width: 100%;
  max-width: var(--sm-content-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
}
.collect-hero-video .hero-video-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: 1.5em;
  border-radius: 4px;
  overflow: hidden;
  background: var(--sm-page);
}
.collect-hero-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.collect-video-copy h2 {
  color: var(--sm-text);
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 2.1rem;
  font-weight: 400;
  line-height: 1.3;
  margin: .2rem 0 .5em;
}
.collect-video-copy p {
  color: var(--sm-text-2);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 1.5rem;
}
.collect-video-copy .video-actions {
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
@media (min-width: 1040px) {
  .collect-video-container {
    flex-direction: row;
    align-items: center;
    text-align: left;
  }
  .collect-hero-video .hero-video-frame {
    width: 50%;
    margin-bottom: 0;
  }
  .collect-video-copy {
    width: 45%;
  }
  .collect-video-copy .video-actions {
    justify-content: flex-start;
  }
}

/* product category rail below the hero */
.sm-category-rail {
  background: var(--sm-page-2);
  padding: 32px 20px 30px;
}
.sm-category-wrap {
  max-width: var(--sm-content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px 0;
  align-items: stretch;
}
.sm-category {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  min-height: 168px;
  padding: 12px;
  border-radius: 12px;
  color: var(--sm-text-2);
  text-align: center;
}
.sm-category:hover {
  background: rgba(136, 136, 136, .1);
  text-decoration: none;
  color: var(--sm-text-2);
}
.sm-category-art {
  align-self: center;
  flex-grow: 1;
  width: 100%;
  max-width: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sm-category-art img {
  display: block;
  max-width: 100%;
  max-height: 112px;
  height: auto;
  object-fit: contain;
}
.sm-category-art .collect-wordmark {
  max-width: 100%;
  margin: 0;
}
.sm-category-art .collect-wordmark.is-stickify {
  font-size: clamp(24px, 2.5vw, 34px);
}
.sm-category-art .collect-wordmark.is-ride {
  font-size: clamp(28px, 2.8vw, 38px);
}
.sm-category-art .collect-wordmark.is-popup .collect-wordmark-stack {
  font-size: clamp(22px, 2.2vw, 28px);
}
.sm-category-art .collect-wordmark.is-popup .collect-wordmark-tag {
  display: none;
}
.sm-category-label {
  color: var(--sm-text-2);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}
@media (min-width: 800px) {
  .sm-category-wrap {
    grid-template-columns: repeat(6, 1fr);
  }
  .sm-category-rail {
    padding: 32px 0 30px;
  }
}

/* dashboard list */
.collections-section { padding: 32px var(--sm-content-pad); max-width: var(--sm-content-max); margin: 0 auto; }
.collections-section .section-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px;
}
.collections-section .section-head h2 { font-size: 22px; font-weight: 800; margin: 0; }
.album-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.album-sort-tabs {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 22px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
}
.album-sort-tabs::-webkit-scrollbar { display: none; }
.album-sort-tabs a {
  position: relative;
  color: var(--sm-muted);
  border-bottom: 3px solid transparent;
  font-size: 13.5px;
  font-weight: 800;
  padding: 9px 0 8px;
}
.album-sort-tabs a:hover {
  color: var(--sm-text);
  border-bottom-color: var(--sm-border-2);
  text-decoration: none;
}
.album-sort-tabs a.active,
.album-sort-tabs a[aria-current="page"] {
  color: var(--sm-text);
  border-bottom-color: var(--sm-orange);
}
.collections-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.col-card {
  background: var(--sm-card);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--sm-border);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
  display: flex; flex-direction: column;
  color: var(--sm-text);
}
.col-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); text-decoration: none; }
.col-card .cover {
  height: 200px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.col-card .cover--doc {
  padding: 12px;
  display: grid;
  place-items: center;
}
.col-card .collection-card-doc-cover {
  height: 100%;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: var(--album-page-aspect, 2000 / 2160);
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 14px 28px rgba(0,0,0,.24);
}
.col-card .body { padding: 16px 18px 18px; }
.col-card .body-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.col-card h3 { font-size: 17px; font-weight: 800; margin: 0; letter-spacing: -.01em; }
.col-card .sub { font-size: 13px; color: var(--sm-muted); margin-top: 2px; font-weight: 500; }
.col-card .progress-wrap { margin-top: 12px; }
.collect-progress[data-component="progress"] {
  width: 100%;
}
.collect-progress[data-component="progress"] [data-progress-track] {
  width: 100%;
  height: var(--collect-progress-height, 10px);
  background: var(--collect-progress-track, var(--sm-progress-track));
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--sm-border);
}
.collect-progress[data-component="progress"] [data-progress-fill] {
  height: 100%;
  background: var(--collect-progress-fill, var(--sm-orange));
  transition: width .5s ease;
}
.col-card .progress {
  height: 8px; background: var(--sm-page); border-radius: 99px; overflow: hidden; position: relative;
}
.col-card .progress > span {
  display: block; height: 100%; background: var(--sm-orange); border-radius: 99px;
}
.col-card .progress-meta {
  display: flex; align-items: center; justify-content: space-between; margin-top: 8px;
  font-size: 12.5px; color: var(--sm-muted); font-weight: 600;
}
.col-card .progress-meta .pct { color: var(--sm-text); font-weight: 800; }
.col-card-stack {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.col-card-stack .col-card {
  min-height: 100%;
}
.col-card-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border: 1px solid var(--sm-border);
  border-radius: 4px;
  background: var(--sm-card);
  color: var(--sm-orange);
  font-size: 13px;
  font-weight: 800;
}
.col-card-action:hover {
  border-color: var(--sm-orange);
  background: color-mix(in srgb, var(--sm-orange) 8%, var(--sm-card));
  text-decoration: none;
}

.col-card.create {
  border: 2px dashed var(--sm-border-2);
  background: transparent;
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 312px;
}
.col-card.create:hover { background: rgba(255,255,255,.4); border-color: var(--sm-orange); }
.col-card.create .plus {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--sm-orange); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 700;
  margin: 0 auto 14px;
}

/* ---------- album marketplace ---------- */
.collect-marketplace {
  background: var(--sm-page);
  color: var(--sm-text);
}
.album-marketplace-intro {
  padding: 40px var(--sm-content-pad) 36px;
  border-bottom: 1px solid var(--sm-border);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--sm-orange) 8%, var(--sm-card)) 0 4px, transparent 4px),
    var(--sm-page);
}
.album-marketplace-intro-inner {
  width: 100%;
  max-width: var(--sm-content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr);
  gap: 40px;
  align-items: end;
  justify-content: space-between;
}
.album-marketplace-kicker,
.album-marketplace-rail-kicker {
  display: block;
  margin-bottom: 10px;
  color: var(--sm-orange);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1.25;
  text-transform: uppercase;
}
.album-marketplace-intro h1 {
  max-width: 700px;
  margin: 0;
  color: var(--sm-text);
  font-size: clamp(38px, 4vw, 56px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: .98;
}
.album-marketplace-intro p {
  max-width: 620px;
  margin: 16px 0 0;
  color: var(--sm-text-2);
  font-size: 17px;
  line-height: 1.55;
}
.album-marketplace-intro-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 2px;
}
.album-marketplace-intro-actions .btn {
  white-space: nowrap;
}
.album-marketplace-layout {
  width: 100%;
  max-width: var(--sm-content-max);
  margin: 0 auto;
  padding: 40px var(--sm-content-pad) 56px;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: 32px;
  align-items: start;
}
.album-marketplace-feed {
  min-width: 0;
  scroll-margin-top: calc(var(--sm-nav-height, 52px) + 20px);
}
.album-personal-shelf {
  margin-bottom: 44px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--sm-border);
}
.album-section-heading {
  display: flex;
  gap: 24px;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 20px;
}
.album-section-heading h2 {
  margin: 0;
  color: var(--sm-text);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.album-section-heading p {
  max-width: 590px;
  margin: 6px 0 0;
  color: var(--sm-muted);
  font-size: 14px;
  line-height: 1.5;
}
.album-shelf-window [data-windowed-items] {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(218px, 28%);
  gap: 20px;
  overflow-x: auto;
  padding: 2px 2px 16px;
  scroll-snap-type: x proximity;
  scrollbar-color: var(--sm-border-2) transparent;
}
.album-shelf-window [data-windowed-items] .album-marketplace-item {
  scroll-snap-align: start;
}
.album-window-empty-action {
  margin-top: 14px;
}
.album-public-heading {
  margin-bottom: 18px;
}
.album-marketplace-controls {
  min-height: 52px;
  margin-bottom: 24px;
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--sm-border);
  background: var(--sm-card);
}
.album-marketplace-controls .album-sort-tabs {
  gap: 30px;
  overflow-x: auto;
}
.album-marketplace-controls .album-sort-tabs a {
  min-height: 48px;
  padding: 15px 0 12px;
  display: inline-flex;
  align-items: center;
  font-size: 14px;
}
.album-marketplace-count {
  flex: 0 0 auto;
  color: var(--sm-muted);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.album-marketplace-item {
  position: relative;
  min-width: 0;
}
.album-market-card {
  display: block;
  min-width: 0;
  color: var(--sm-text);
  text-decoration: none;
}
.album-market-card:hover {
  color: var(--sm-text);
  text-decoration: none;
}
.album-market-card:focus-visible,
.album-marketplace-favorite:focus-visible,
.album-marketplace-favorite > button:focus-visible,
.album-marketplace-manage:focus-visible,
.album-marketplace-links a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--sm-blue) 74%, white);
  outline-offset: 4px;
}
.album-market-card-cover {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--sm-page-2);
}
.album-market-card-cover > .cover {
  width: 100%;
  height: 100%;
  border-radius: 0;
  transition: transform .28s ease;
}
.album-market-card-cover .cover--doc {
  padding: 16px;
  display: grid;
  place-items: center;
}
.album-market-card-cover .collection-card-doc-cover {
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: var(--album-page-aspect, 2000 / 2160);
  overflow: hidden;
  border-radius: 2px;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--sm-brown) 24%, transparent);
}
.cover--placeholder {
  display: grid;
  place-items: center;
}
.collection-card-cover-placeholder {
  position: relative;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  min-width: 0;
  padding: 18px 18px 16px 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--sm-paper) 24%, transparent);
  background: color-mix(in srgb, var(--sm-ink) 86%, transparent);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--sm-brown) 22%, transparent);
  color: var(--sm-paper);
}
.collection-card-cover-placeholder::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 8px;
  width: 1px;
  background: color-mix(in srgb, var(--sm-paper) 24%, transparent);
}
.collection-card-cover-placeholder-kicker,
.collection-card-cover-placeholder-brand {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.collection-card-cover-placeholder strong {
  max-width: 100%;
  margin: 7px 0 9px;
  overflow: hidden;
  font-size: clamp(17px, 2vw, 24px);
  line-height: 1.02;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.collection-card-cover-placeholder-brand {
  opacity: .68;
}
.album-market-card-cover .cover-series-label {
  z-index: 10;
  max-width: calc(100% - 92px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.album-market-card-cover .cover-series-label:empty {
  display: none;
}
.album-market-card-cover [data-component="badge"][data-tone="success"] {
  display: none;
}
.album-market-count-badge,
.album-market-status {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid var(--sm-border);
  border-radius: 4px;
  background: color-mix(in srgb, var(--sm-card) 96%, transparent);
  color: var(--sm-text);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}
.album-market-count-badge {
  right: 8px;
  bottom: 8px;
  padding: 6px 8px;
}
.album-market-status {
  top: 8px;
  right: 8px;
  gap: 5px;
  padding: 6px 8px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.album-market-status > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sm-green);
}
.album-market-status.is-draft > span {
  background: var(--sm-muted);
}
.album-marketplace-favorite {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 12;
  width: 44px;
  height: 44px;
  margin: 0;
}
a.album-marketplace-favorite,
.album-marketplace-favorite > button {
  width: 44px;
  height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--sm-card);
  border-radius: 50%;
  background: color-mix(in srgb, var(--sm-card) 95%, transparent);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--sm-brown) 18%, transparent);
  color: var(--sm-text);
  cursor: pointer;
  text-decoration: none;
  transition:
    translate var(--motion-duration-press) var(--motion-easing-snappy-out),
    scale var(--motion-duration-press) var(--motion-easing-snappy-out),
    transform var(--motion-duration-fast) var(--motion-easing-out),
    background-color var(--motion-duration-fast) var(--motion-easing-out),
    box-shadow var(--motion-duration-fast) var(--motion-easing-out),
    color var(--motion-duration-fast) var(--motion-easing-out);
}
.album-marketplace-favorite .collect-icon {
  width: 20px;
  height: 20px;
  display: block;
  pointer-events: none;
}
.album-marketplace-favorite .collect-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}
.album-marketplace-favorite.is-favorited > button {
  background: var(--sm-orange);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--sm-orange) 24%, transparent),
    0 5px 16px color-mix(in srgb, var(--sm-orange) 34%, transparent);
  color: #fff;
}
.album-marketplace-favorite.is-favorited .collect-icon svg {
  fill: currentColor;
}
.album-marketplace-favorite.htmx-request > button {
  cursor: wait;
  opacity: .72;
}
.album-market-card-body {
  padding-top: 12px;
}
.album-market-card h3 {
  min-height: 42px;
  margin: 0;
  display: -webkit-box;
  overflow: hidden;
  color: var(--sm-text);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.album-market-edition {
  min-height: 20px;
  margin: 4px 0 8px;
  overflow: hidden;
  color: var(--sm-muted);
  font-size: 13px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.album-market-brand {
  min-width: 0;
  display: flex;
  gap: 7px;
  align-items: center;
  color: var(--sm-text-2);
  font-size: 13px;
  font-weight: 600;
}
.album-market-brand > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.album-market-avatar {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--sm-brown);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}
.album-market-card .progress-wrap {
  margin-top: 12px;
}
.album-market-card .collect-progress[data-component="progress"] [data-progress-track] {
  height: 6px;
  border: 0;
  background: var(--sm-progress-track);
}
.album-market-card .progress-meta {
  margin-top: 6px;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
}
.album-market-card .progress-meta > span:first-child { color: var(--sm-text-2); font-weight: 600; }
.album-market-card .progress-meta .pct { color: var(--sm-muted); font-weight: 600; }
.album-market-card.is-empty .progress-meta > span:first-child { color: var(--sm-text); font-weight: 700; }
.album-market-card .progress-meta > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.album-marketplace-manage {
  min-height: 40px;
  margin-top: 10px;
  padding: 8px 0;
  display: inline-flex;
  gap: 5px;
  align-items: center;
  color: var(--sm-blue);
  font-size: 13px;
  font-weight: 800;
}
.album-marketplace-manage:hover {
  text-decoration: underline;
}
.album-marketplace-rail {
  position: sticky;
  top: calc(var(--sm-nav-height, 52px) + 28px);
}
.album-marketplace-rail-section {
  padding: 0 0 28px;
  border-bottom: 1px solid var(--sm-border);
}
.album-marketplace-rail-section + .album-marketplace-rail-section {
  padding-top: 28px;
}
.album-marketplace-rail h2 {
  margin: 0;
  color: var(--sm-text);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.2;
}
.album-marketplace-rail p {
  margin: 10px 0 0;
  color: var(--sm-text-2);
  font-size: 14px;
  line-height: 1.55;
}
.album-marketplace-create-actions {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.album-marketplace-create-actions .btn {
  width: 100%;
}
.album-marketplace-how ol {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.album-marketplace-how li {
  padding: 13px 0;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  border-top: 1px solid var(--sm-border);
}
.album-marketplace-how li > span {
  color: var(--sm-orange);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}
.album-marketplace-how strong {
  display: block;
  color: var(--sm-text);
  font-size: 14px;
  line-height: 1.35;
}
.album-marketplace-how li p {
  margin-top: 3px;
  color: var(--sm-muted);
  font-size: 12.5px;
  line-height: 1.45;
}
.album-marketplace-links {
  display: flex;
  flex-direction: column;
}
.album-marketplace-links h2 {
  margin-bottom: 10px;
}
.album-marketplace-links a {
  min-height: 44px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--sm-border);
  color: var(--sm-text-2);
  font-size: 14px;
  font-weight: 700;
}
.album-marketplace-links a:last-child {
  border-bottom: 0;
}
.album-marketplace-links a:hover {
  color: var(--sm-blue);
  text-decoration: none;
}
.album-marketplace-empty {
  padding: 40px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--sm-border-2);
  background: var(--sm-page-2);
  text-align: center;
}
.album-marketplace-empty h2 {
  margin: 0;
  color: var(--sm-text);
  font-size: 24px;
}
.album-marketplace-empty p {
  max-width: 480px;
  margin: 10px 0 20px;
  color: var(--sm-muted);
  font-size: 14px;
  line-height: 1.5;
}
@media (hover: hover) and (pointer: fine) {
  .album-market-card:hover .album-market-card-cover > .cover {
    transform: scale(1.035);
  }
  a.album-marketplace-favorite:hover,
  .album-marketplace-favorite:hover > button {
    transform: translateY(-2px);
    box-shadow: 0 7px 18px color-mix(in srgb, var(--sm-brown) 24%, transparent);
  }
  .album-marketplace-favorite.is-favorited:hover > button {
    background: color-mix(in srgb, var(--sm-orange) 88%, black);
    box-shadow:
      0 0 0 2px color-mix(in srgb, var(--sm-orange) 30%, transparent),
      0 7px 18px color-mix(in srgb, var(--sm-orange) 40%, transparent);
  }
}
@media (max-width: 1180px) {
  .album-marketplace-layout {
    grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr);
  }
}
@media (max-width: 900px) {
  .album-marketplace-layout { grid-template-columns: minmax(0, 1fr); }
  .album-marketplace-rail { display: none; }
  .album-marketplace-feed { width: min(100%, 800px); }
}
@media (max-width: 720px) {
  .album-marketplace-intro {
    padding: 30px 20px 28px;
    background: var(--sm-card);
    border-left: 4px solid var(--sm-orange);
  }
  .album-marketplace-intro-inner {
    display: block;
  }
  .album-marketplace-intro h1 {
    max-width: 340px;
    font-size: 34px;
    line-height: 1.02;
  }
  .album-marketplace-intro p {
    max-width: 360px;
    margin-top: 12px;
    font-size: 14.5px;
    line-height: 1.5;
  }
  .album-marketplace-intro-actions {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .album-marketplace-intro-actions .btn {
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
  }
  .album-marketplace-layout {
    padding: 26px 20px 64px;
  }
  .album-personal-shelf {
    margin-bottom: 34px;
    padding-bottom: 30px;
  }
  .album-section-heading {
    display: block;
    margin-bottom: 16px;
  }
  .album-section-heading h2 {
    font-size: 21px;
  }
  .album-section-heading .btn {
    width: 100%;
    margin-top: 14px;
  }
  .album-shelf-window [data-windowed-items] {
    grid-auto-columns: minmax(188px, 72%);
    gap: 14px;
  }
  .album-window-empty-action .btn {
    width: 100%;
  }
  .album-marketplace-controls {
    position: sticky;
    top: var(--sm-nav-height, 52px);
    z-index: 20;
    min-height: 56px;
    margin: 0 -20px 22px;
    padding: 0 20px;
    box-shadow: 0 1px 0 var(--sm-border);
    border-bottom: 0;
  }
  .album-marketplace-controls .album-sort-tabs {
    width: 100%;
    justify-content: space-between;
    gap: 20px;
  }
  .album-marketplace-controls .album-sort-tabs a {
    min-height: 56px;
    padding-top: 18px;
    padding-bottom: 15px;
    font-size: 13px;
  }
  .album-marketplace-count {
    display: none;
  }
  .album-market-card-cover .cover--doc {
    padding: 10px;
  }
  .album-market-count-badge,
  .album-market-status {
    min-height: 25px;
    border-width: 1px;
    font-size: 9.5px;
  }
  .album-market-count-badge {
    right: 6px;
    bottom: 6px;
    padding: 5px 6px;
  }
  .album-market-status {
    top: 6px;
    right: 6px;
    padding: 5px 6px;
  }
  .album-marketplace-favorite {
    top: 6px;
    right: 6px;
  }
  .album-market-card h3 {
    min-height: 38px;
    font-size: 14.5px;
  }
  .album-market-edition,
  .album-market-brand {
    font-size: 12px;
  }
  .album-market-card .progress-meta {
    font-size: 10.5px;
  }
}
@media (max-width: 390px) {
  .album-marketplace-intro h1 {
    font-size: 31px;
  }
  .album-marketplace-intro-actions .btn {
    font-size: 13px;
  }
  .album-marketplace-controls .album-sort-tabs {
    gap: 14px;
  }
  .album-marketplace-controls .album-sort-tabs a {
    font-size: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .album-market-card-cover > .cover {
    transition: none;
  }
  .album-market-card:hover .album-market-card-cover > .cover {
    transform: none;
  }
  a.album-marketplace-favorite,
  .album-marketplace-favorite > button {
    transition: none;
  }
  a.album-marketplace-favorite:hover,
  .album-marketplace-favorite:hover > button {
    transform: none;
  }
}

/* ============================================================
   First-party product directory + pack storefront (2026-08)

   These public surfaces deliberately share the same warm-light system as
   albums, cart, and checkout. Product photography owns the visual field;
   orange remains the single action color and blue remains link/focus ink.
   ============================================================ */
.collect-products,
.collect-pack-shop {
  --sm-font-sans: "Montserrat", Arial, sans-serif;
  --sm-font-button: var(--sm-font-sans);
  width: min(100%, var(--sm-content-max));
  margin-inline: auto;
  color: var(--sm-text);
  font-family: var(--sm-font-sans);
}

.collect-products *,
.collect-pack-shop * {
  box-sizing: border-box;
}

.collect-products :is(a, button):focus-visible,
.collect-pack-shop :is(a, button):focus-visible {
  outline: 3px solid var(--sm-blue);
  outline-offset: 3px;
}

.collect-products-hero,
.pack-shop-hero {
  position: relative;
  display: grid;
  overflow: hidden;
  border: 1px solid var(--sm-border);
  border-radius: 0 0 10px 10px;
  background: var(--sm-selected);
}

/* Product directory */
.collect-products {
  padding-bottom: 64px;
}

.collect-products-hero {
  min-height: 320px;
  grid-template-columns: minmax(0, .9fr) minmax(400px, 1.1fr);
  align-items: center;
  gap: 32px;
  padding: 36px clamp(32px, 5vw, 64px);
  border: 0;
  border-radius: 0;
  background: var(--sm-orange-2);
}

.collect-products-hero::after {
  content: none;
}

.collect-products-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 560px;
}

.collect-products-eyebrow,
.collect-product-card-eyebrow,
.pack-shop-kicker,
.pack-shop-section-kicker {
  display: block;
  color: var(--sm-orange-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  line-height: 1.25;
  text-transform: uppercase;
}

.collect-products-hero h1,
.pack-shop-hero h1 {
  margin: 10px 0 14px;
  color: var(--sm-text);
  font-family: inherit;
  font-size: clamp(40px, 5vw, 58px);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: .98;
}

.collect-products-hero h1 {
  max-width: 570px;
  margin-top: 8px;
  color: #fff;
  font-size: clamp(34px, 4vw, 44px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.04;
}

.collect-products-hero .collect-products-eyebrow {
  color: #fff;
}

.collect-products-hero-copy > p,
.pack-shop-hero-copy > p {
  max-width: 600px;
  margin: 0;
  color: var(--sm-text-2);
  font-size: 18px;
  line-height: 1.55;
}

.collect-products-hero-copy > p {
  max-width: 530px;
  color: #fff;
  font-size: 16px;
  line-height: 1.5;
}

.collect-products-hero :is(a, button):focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 6px var(--sm-brown-2);
}

.collect-products-actions,
.pack-shop-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
}

.collect-products-actions {
  margin-top: 22px;
}

.collect-products-actions .btn {
  border-color: #fff;
  background: #fff;
  color: var(--sm-orange-2);
}

.collect-root .collect-products-actions a.btn,
.collect-root .collect-products-actions a.btn:hover {
  color: var(--sm-orange-2);
}

.collect-products-actions .btn:hover {
  border-color: var(--sm-selected);
  background: var(--sm-selected);
}

.collect-products-actions .btn.ghost {
  border-color: #fff;
  background: transparent;
  color: #fff;
}

.collect-root .collect-products-actions a.btn.ghost,
.collect-root .collect-products-actions a.btn.ghost:hover {
  color: #fff;
}

.collect-products-actions .btn.ghost:hover {
  border-color: #fff;
  background: color-mix(in srgb, #fff 10%, transparent);
}

.collect-products-actions .btn,
.pack-shop-hero-actions .btn,
.collect-products-close .btn {
  min-height: 44px;
  border-radius: var(--sm-radius-btn);
}

.collect-products-hero-art {
  position: relative;
  z-index: 1;
  min-height: 248px;
}

.collect-products-hero-art picture {
  position: absolute;
  inset: -38px -26px -60px -10px;
  display: block;
}

.collect-products-hero-art img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 18px color-mix(in srgb, var(--sm-brown-2) 32%, transparent));
}

.collect-products-directory {
  max-width: 1040px;
  margin-inline: auto;
  padding: 52px var(--sm-content-pad) 0;
}

.collect-products-directory-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 410px);
  align-items: end;
  gap: 32px;
  margin-bottom: 26px;
}

.collect-products-directory-heading h2,
.pack-shop-section-heading h2,
.collect-products-close h2 {
  margin: 0;
  color: var(--sm-text);
  font-family: inherit;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.12;
}

.collect-products-directory-heading > p,
.pack-shop-section-heading > p,
.collect-products-close p {
  margin: 10px 0 0;
  color: var(--sm-text-2);
  font-size: 15px;
  line-height: 1.55;
}

.collect-products-directory-heading h2 {
  margin-top: 6px;
  font-size: 30px;
}

.collect-products-directory-heading > p {
  margin: 0;
}

.collect-products-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px 22px;
}

.collect-product-card {
  --product-accent: var(--sm-orange);
  --product-accent-ink: var(--sm-orange-2);
  display: grid;
  align-content: start;
  min-width: 0;
  color: var(--sm-text);
  text-decoration: none;
  transition: transform 160ms ease;
}

.collect-product-card.is-brown { --product-accent: var(--sm-brown); --product-accent-ink: var(--sm-brown-2); }
.collect-product-card.is-green { --product-accent: var(--sm-green); --product-accent-ink: var(--sm-art-green-deep); }
.collect-product-card.is-blue { --product-accent: var(--sm-blue); --product-accent-ink: var(--sm-blue-2); }
.collect-product-card.is-yellow { --product-accent: var(--sm-art-gold-deep); --product-accent-ink: var(--collect-tungsten-deep); }
.collect-product-card.is-purple { --product-accent: var(--sm-purple); --product-accent-ink: var(--sm-text-2); }

.collect-product-card:hover {
  transform: translateY(-2px);
}

.collect-product-card-media {
  position: relative;
  display: grid;
  min-height: 176px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--sm-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--product-accent) 8%, var(--sm-page));
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.collect-product-card:hover .collect-product-card-media {
  border-color: color-mix(in srgb, var(--product-accent) 42%, var(--sm-border));
  box-shadow: var(--shadow-card);
}

.collect-product-card-category {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 4px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--sm-card) 92%, transparent);
  color: var(--sm-text-2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1;
  text-transform: uppercase;
}

.collect-product-card-media img {
  width: 100%;
  height: 176px;
  padding: 18px;
  object-fit: contain;
  transition: transform 180ms ease;
}

.collect-product-card:hover .collect-product-card-media img {
  transform: scale(1.025);
}

.collect-product-card-copy {
  padding: 14px 2px 0;
}

.collect-product-card-eyebrow {
  color: var(--product-accent-ink);
}

.collect-product-card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 7px;
}

.collect-product-card-title h3 {
  margin: 0;
  color: inherit;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
}

.collect-product-card-title svg {
  flex: 0 0 auto;
  color: var(--sm-blue);
}

.collect-product-card-copy p {
  display: -webkit-box;
  overflow: hidden;
  margin: 8px 0 0;
  color: var(--sm-text-2);
  font-size: 14px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.collect-products-close {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  max-width: 1040px;
  margin: 64px auto 0;
  padding: 32px 36px;
  border: 1px solid color-mix(in srgb, var(--sm-orange) 28%, var(--sm-border));
  border-radius: 10px;
  background: var(--sm-selected);
}

.collect-products-close > div {
  max-width: 660px;
}

/* Live pack marketplace, Samples, and Deals */
.collect-pack-shop {
  padding-bottom: 64px;
}

.pack-shop-hero {
  min-height: 500px;
  grid-template-columns: minmax(0, .9fr) minmax(440px, 1.1fr);
  align-items: center;
  gap: 48px;
  padding: 56px clamp(32px, 5vw, 72px);
}

.collect-pack-shop.is-deals .pack-shop-hero {
  background: color-mix(in srgb, var(--sm-selected) 72%, var(--sm-card));
}

.collect-pack-shop.is-samples .pack-shop-hero {
  min-height: 312px;
  grid-template-columns: minmax(0, .92fr) minmax(360px, 1.08fr);
  gap: 28px;
  padding: 34px clamp(32px, 5vw, 64px);
  background: color-mix(in srgb, var(--sm-page) 82%, var(--sm-card));
}

.collect-pack-shop.is-samples .pack-shop-hero h1 {
  max-width: 520px;
  margin-block: 8px 12px;
  font-size: clamp(36px, 4vw, 44px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.04;
  text-wrap: balance;
}

.collect-pack-shop.is-samples .pack-shop-hero-copy > p {
  max-width: 530px;
  font-size: 16px;
  line-height: 1.5;
}

.collect-pack-shop.is-samples .pack-shop-hero-actions {
  margin-top: 22px;
}

.collect-pack-shop.is-samples .pack-shop-live-line {
  margin-top: 14px;
}

.pack-shop-hero-copy {
  position: relative;
  z-index: 4;
  max-width: 580px;
}

.pack-shop-live-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  color: var(--sm-muted);
  font-size: 13px;
  font-weight: 500;
}

.pack-shop-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sm-green);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sm-green) 15%, transparent);
}

.pack-shop-hero-stage {
  position: relative;
  min-height: 378px;
}

.collect-pack-shop.is-samples .pack-shop-hero-stage {
  min-height: 244px;
}

.pack-shop-hero-stage::before {
  position: absolute;
  inset: 12% 4% 4% 6%;
  border: 1px solid color-mix(in srgb, var(--sm-orange) 18%, var(--sm-border));
  border-radius: 50%;
  background: color-mix(in srgb, var(--sm-card) 45%, transparent);
  content: "";
}

.collect-pack-shop.is-samples .pack-shop-hero-stage::before {
  inset: 5% 14% 4%;
}

.pack-shop-hero-pack {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 168px;
  transform-origin: 50% 90%;
}

.pack-shop-hero-pack-1 { z-index: 3; transform: translate(-50%, -50%) rotate(-2deg); }
.pack-shop-hero-pack-2 { z-index: 2; transform: translate(-106%, -46%) rotate(-13deg); }
.pack-shop-hero-pack-3 { z-index: 1; transform: translate(6%, -45%) rotate(13deg); }

.pack-shop-hero-pack .pack-front-standalone {
  width: 168px;
  filter: drop-shadow(0 20px 16px color-mix(in srgb, var(--sm-brown) 20%, transparent));
}

.collect-pack-shop.is-samples .pack-shop-hero-pack,
.collect-pack-shop.is-samples .pack-shop-hero-pack .pack-front-standalone {
  width: 132px;
}

.collect-pack-shop.is-samples .pack-shop-hero-pack-1 {
  transform: translate(-50%, -50%) rotate(-3deg);
}

.pack-shop-burst {
  position: absolute;
  right: 2%;
  bottom: 5%;
  z-index: 5;
  display: grid;
  width: 86px;
  min-height: 86px;
  place-items: center;
  padding: 12px;
  border: 5px solid var(--sm-card);
  border-radius: 50%;
  background: var(--sm-orange);
  box-shadow: var(--shadow-sticker);
  color: var(--sm-card);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(8deg);
}

.collect-pack-shop.is-samples .pack-shop-burst {
  right: 12%;
  bottom: 3%;
  width: 70px;
  min-height: 70px;
  border-width: 4px;
  padding: 9px;
  font-size: 9px;
}

.pack-shop-hero-empty {
  min-height: 240px;
}

.pack-shop-assurances {
  position: relative;
  display: grid;
  max-width: 960px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0 auto;
  padding: 26px var(--sm-content-pad);
  border-bottom: 1px solid var(--sm-border);
}

.pack-shop-assurances-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.pack-shop-assurance {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  padding: 0 24px;
}

.pack-shop-assurance + .pack-shop-assurance {
  border-left: 1px solid var(--sm-border);
}

.pack-shop-assurance-mark {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--sm-orange) 32%, var(--sm-border));
  border-radius: 50%;
  color: var(--sm-orange-2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
}

.pack-shop-assurance h3 {
  margin: 1px 0 3px;
  color: var(--sm-text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.25;
}

.pack-shop-assurance p {
  margin: 0;
  color: var(--sm-text-2);
  font-size: 12px;
  line-height: 1.45;
}

.pack-shop-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pack-shop-discovery {
  padding: 48px var(--sm-content-pad) 32px;
  border-bottom: 1px solid var(--sm-border);
  background: var(--sm-card);
}

.pack-shop-discovery-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 480px);
  align-items: end;
  gap: 48px;
}

.pack-shop-discovery-head h2 {
  margin: 7px 0 0;
  color: var(--sm-text);
  font-family: inherit;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.08;
}

.pack-shop-discovery-head p {
  max-width: 560px;
  margin: 10px 0 0;
  color: var(--sm-text-2);
  font-size: 15px;
  line-height: 1.5;
}

.pack-shop-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.pack-shop-search input[type="search"] {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--sm-border-2);
  border-radius: var(--sm-radius-btn);
  background: var(--sm-card);
  color: var(--sm-text);
  font: inherit;
  font-size: 14px;
  line-height: 1;
  appearance: none;
}

.pack-shop-search input[type="search"]::placeholder {
  color: var(--sm-muted);
}

.pack-shop-search .btn {
  min-height: 44px;
  border-radius: var(--sm-radius-btn);
  white-space: nowrap;
}

.pack-shop-discovery-controls {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 22px;
  border-bottom: 1px solid var(--sm-border);
}

.pack-shop-sort-tabs {
  display: flex;
  align-items: center;
  gap: 24px;
  white-space: nowrap;
}

.pack-shop-sort-tabs a {
  position: relative;
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  border-bottom: 3px solid transparent;
  color: var(--sm-muted);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.pack-shop-sort-tabs a:hover {
  border-bottom-color: var(--sm-border-2);
  color: var(--sm-text);
}

.pack-shop-sort-tabs a.active,
.pack-shop-sort-tabs a[aria-current="page"] {
  border-bottom-color: var(--sm-orange);
  color: var(--sm-text);
}

.pack-shop-active-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px 7px 11px;
  border-radius: 6px;
  background: var(--sm-selected);
  color: var(--sm-text-2);
  font-size: 12px;
  font-weight: 700;
}

.pack-shop-active-filter a {
  color: var(--sm-blue);
  font-size: 11px;
  text-underline-offset: 2px;
}

.pack-shop-brands {
  display: grid;
  grid-template-columns: minmax(160px, 210px) minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  margin-top: 24px;
}

.pack-shop-brands-heading h3 {
  margin: 0;
  color: var(--sm-text);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.2;
}

.pack-shop-brands-heading p {
  margin: 5px 0 0;
  color: var(--sm-muted);
  font-size: 12px;
  line-height: 1.4;
}

.pack-shop-brand-rail {
  display: grid;
  grid-auto-columns: minmax(178px, 1fr);
  grid-auto-flow: column;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 2px 6px;
  scrollbar-width: thin;
}

.pack-shop-brand-card {
  display: grid;
  min-width: 0;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 8px;
  border: 1px solid var(--sm-border);
  border-radius: 10px;
  background: var(--sm-page);
  color: var(--sm-text);
  text-decoration: none;
  transition: border-color 160ms ease, background-color 160ms ease;
}

a.pack-shop-brand-card:hover {
  border-color: color-mix(in srgb, var(--sm-orange) 40%, var(--sm-border));
  background: var(--sm-selected);
  color: var(--sm-text);
  text-decoration: none;
}

.pack-shop-brand-media {
  --pack-shop-brand-accent: var(--sm-orange);
  position: relative;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--pack-shop-brand-accent) 35%, var(--sm-border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--pack-shop-brand-accent) 11%, var(--sm-card));
  color: color-mix(in srgb, var(--pack-shop-brand-accent) 74%, var(--sm-text));
}

.pack-shop-brand-media::after {
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: var(--pack-shop-brand-accent);
  content: "";
}

.pack-shop-brand-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pack-shop-brand-monogram {
  font-size: 16px;
  font-weight: 700;
}

.pack-shop-brand-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.pack-shop-brand-copy strong,
.pack-shop-brand-copy > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pack-shop-brand-copy strong {
  color: var(--sm-text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}

.pack-shop-brand-copy > span {
  color: var(--sm-muted);
  font-size: 10.5px;
  line-height: 1.2;
}

.pack-shop-section {
  scroll-margin-top: 24px;
  padding: 64px var(--sm-content-pad) 0;
}

.collect-pack-shop.is-samples .pack-shop-section {
  max-width: 1024px;
  margin-inline: auto;
  padding-top: 48px;
}

.collect-pack-shop.is-samples .pack-shop-section-heading {
  margin-bottom: 20px;
}

.pack-shop-section + .pack-shop-section {
  padding-top: 72px;
}

.pack-shop-section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 430px);
  align-items: end;
  gap: 32px;
  margin-bottom: 24px;
}

.pack-shop-section-heading h2 {
  margin-top: 7px;
}

.pack-shop-section-heading > p {
  margin: 0;
}

.pack-shop-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.collect-pack-shop.is-samples .pack-shop-grid {
  gap: 18px;
}

.pack-shop-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--sm-border);
  border-radius: 10px;
  background: var(--sm-card);
  box-shadow: var(--shadow-card);
}

.collect-pack-shop.is-samples .pack-shop-card {
  box-shadow: 0 1px 2px rgba(40,35,32,.05);
}

.pack-shop-card.is-triple {
  border-color: color-mix(in srgb, var(--sm-orange) 32%, var(--sm-border));
}

.pack-shop-art-stage {
  position: relative;
  display: grid;
  min-height: 300px;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--sm-border);
  background: var(--sm-page-2);
}

.collect-pack-shop.is-samples .pack-shop-art-stage {
  min-height: 228px;
}

.pack-shop-card.is-triple .pack-shop-art-stage {
  background: var(--sm-selected);
}

.pack-shop-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 7;
  padding: 5px 7px;
  border-radius: 4px;
  background: var(--sm-card);
  color: var(--sm-text-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1;
  text-transform: uppercase;
}

.pack-shop-card.is-triple .pack-shop-badge {
  background: var(--sm-orange-2);
  color: var(--sm-card);
}

.pack-shop-edition {
  position: absolute;
  right: 16px;
  bottom: 14px;
  z-index: 7;
  max-width: 60%;
  color: var(--sm-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-align: right;
  text-transform: uppercase;
}

.pack-shop-pack-stack {
  position: relative;
  width: 190px;
  height: 238px;
}

.collect-pack-shop.is-samples .pack-shop-pack-stack {
  width: 156px;
  height: 190px;
}

.pack-shop-pack {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 142px;
  transform: translate(-50%, -50%);
}

.pack-shop-pack .pack-front-standalone {
  width: 142px;
  filter: drop-shadow(0 14px 11px color-mix(in srgb, var(--sm-brown) 16%, transparent));
}

.collect-pack-shop.is-samples .pack-shop-pack,
.collect-pack-shop.is-samples .pack-shop-pack .pack-front-standalone {
  width: 112px;
}

.pack-shop-pack-1 { z-index: 3; }
.pack-shop-pack-2 { z-index: 2; transform: translate(-70%, -47%) rotate(-9deg); }
.pack-shop-pack-3 { z-index: 1; transform: translate(-30%, -47%) rotate(9deg); }

.pack-shop-card-body {
  padding: 22px 22px 24px;
}

.collect-pack-shop.is-samples .pack-shop-card-body {
  padding: 18px 18px 20px;
}

.pack-shop-card-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.pack-shop-brand {
  display: block;
  margin-bottom: 5px;
  color: var(--sm-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .045em;
  line-height: 1.25;
  text-transform: uppercase;
}

.pack-shop-brand-link {
  width: fit-content;
  color: var(--sm-blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.pack-shop-brand-link:hover {
  color: var(--sm-blue-2);
}

.pack-shop-card-title h3 {
  margin: 0;
  color: var(--sm-text);
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
}

.pack-shop-price {
  flex: 0 0 auto;
  color: var(--sm-text);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
}

.pack-shop-offer-copy {
  min-height: 46px;
  margin: 12px 0 0;
  color: var(--sm-text-2);
  font-size: 14px;
  line-height: 1.55;
}

.pack-shop-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 16px;
}

.pack-shop-fact {
  padding: 5px 7px;
  border-radius: 4px;
  background: var(--sm-page);
  color: var(--sm-text-2);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.15;
}

.pack-shop-fact.is-save {
  background: var(--sm-selected);
  color: var(--sm-orange-2);
}

.pack-shop-card-footer {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.pack-shop-add-form,
.pack-shop-add-form form,
.pack-shop-add-form .btn {
  width: 100%;
}

.pack-shop-add-form .btn {
  min-height: 44px;
  justify-content: center;
  border-radius: var(--sm-radius-btn);
}

.pack-shop-add-form.is-unavailable {
  display: grid;
  gap: 7px;
}

.pack-shop-add-form.is-unavailable p {
  margin: 0;
  color: var(--sm-muted);
  font-size: 12px;
  line-height: 1.4;
}

.pack-shop-album-link {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 5px;
  color: var(--sm-blue);
  font-size: 13px;
  font-weight: 700;
  text-underline-offset: 3px;
}

.pack-shop-pagination {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 48px var(--sm-content-pad) 0;
}

.pack-shop-pagination a {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  padding: 0 14px;
  border: 1px solid var(--sm-border-2);
  border-radius: var(--sm-radius-btn);
  background: var(--sm-card);
  color: var(--sm-blue);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.pack-shop-disclosure {
  display: flex;
  max-width: 760px;
  gap: 12px;
  margin: 48px auto 0;
  padding: 18px 20px;
  border: 1px solid var(--sm-border);
  border-radius: 10px;
  background: var(--sm-page);
}

.pack-shop-disclosure-mark {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--sm-border-2);
  border-radius: 50%;
  background: var(--sm-card);
  color: var(--sm-text-2);
  font-size: 12px;
  font-weight: 700;
}

.pack-shop-disclosure strong {
  color: var(--sm-text);
  font-size: 13px;
}

.pack-shop-disclosure p {
  margin: 4px 0 0;
  color: var(--sm-muted);
  font-size: 12px;
  line-height: 1.5;
}

.pack-shop-empty {
  display: grid;
  max-width: 620px;
  justify-items: center;
  margin: 64px auto 0;
  padding: 48px 32px;
  border: 1px dashed var(--sm-border-2);
  border-radius: 10px;
  background: var(--sm-card);
  text-align: center;
}

.pack-shop-empty-seal {
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  margin-bottom: 16px;
  border: 2px solid var(--sm-border-2);
  border-radius: 50%;
  color: var(--sm-muted);
  font-weight: 700;
}

.pack-shop-empty h2 {
  margin: 0;
  font-family: inherit;
  font-size: 26px;
}

.pack-shop-empty p {
  max-width: 480px;
  margin: 10px 0 22px;
  color: var(--sm-text-2);
  font-size: 15px;
  line-height: 1.55;
}

@media (max-width: 980px) {
  .collect-products-hero,
  .pack-shop-hero {
    grid-template-columns: 1fr;
  }

  .collect-pack-shop.is-samples .pack-shop-hero {
    grid-template-columns: 1fr;
  }

  .collect-products-hero-art,
  .pack-shop-hero-stage {
    min-height: 330px;
  }

  .collect-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pack-shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pack-shop-assurance {
    padding-inline: 14px;
  }

  .pack-shop-discovery-head {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
    gap: 28px;
  }

  .pack-shop-brands {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .pack-shop-brands-heading p {
    max-width: 440px;
  }
}

@media (max-width: 680px) {
  .collect-products,
  .collect-pack-shop {
    padding-bottom: 48px;
  }

  .collect-products-hero,
  .pack-shop-hero {
    min-height: 0;
    gap: 20px;
    padding: 40px 20px 34px;
    border-inline: 0;
    border-radius: 0;
  }

  .collect-pack-shop.is-samples .pack-shop-hero {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 40px 20px 34px;
  }

  .collect-products-hero h1 {
    font-size: 34px;
  }

  .pack-shop-hero h1 {
    font-size: clamp(36px, 11vw, 48px);
  }

  .collect-products-hero-copy > p,
  .pack-shop-hero-copy > p {
    font-size: 16px;
  }

  .collect-products-hero-art {
    min-height: 260px;
  }

  .collect-products-hero-art picture {
    inset: -20px -12px -42px;
  }

  .collect-products-directory,
  .pack-shop-section,
  .pack-shop-discovery {
    padding-inline: 16px;
  }

  .pack-shop-discovery {
    padding-top: 36px;
    padding-bottom: 28px;
  }

  .pack-shop-discovery-head {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 22px;
  }

  .pack-shop-discovery-head h2 {
    font-size: 26px;
  }

  .pack-shop-discovery-controls {
    align-items: flex-end;
    margin-top: 18px;
  }

  .pack-shop-active-filter {
    margin-bottom: 8px;
  }

  .pack-shop-brand-rail {
    grid-auto-columns: minmax(205px, 78vw);
    margin-inline: -2px;
  }

  .collect-products-directory {
    gap: 48px;
    padding-top: 48px;
  }

  .collect-products-directory-heading {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .collect-products-grid,
  .pack-shop-grid {
    grid-template-columns: 1fr;
  }

  .collect-product-card-media {
    min-height: 220px;
  }

  .collect-product-card-media img {
    height: 220px;
  }

  .collect-products-close {
    display: grid;
    margin: 48px 16px 0;
    padding: 28px 24px;
  }

  .pack-shop-hero-stage {
    min-height: 300px;
  }

  .pack-shop-hero-pack,
  .pack-shop-hero-pack .pack-front-standalone {
    width: 136px;
  }

  .pack-shop-burst {
    right: 0;
    width: 72px;
    min-height: 72px;
    font-size: 9px;
  }

  .pack-shop-section-heading {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .pack-shop-assurances {
    grid-template-columns: 1fr;
    gap: 18px;
    padding-block: 24px;
  }

  .pack-shop-assurance {
    padding-inline: 0;
  }

  .pack-shop-assurance + .pack-shop-assurance {
    padding-top: 18px;
    border-top: 1px solid var(--sm-border);
    border-left: 0;
  }

  .pack-shop-section + .pack-shop-section {
    padding-top: 56px;
  }

  .pack-shop-disclosure {
    margin-inline: 16px;
  }
}

@media (max-width: 420px) {
  .pack-shop-search {
    grid-template-columns: 1fr;
  }

  .pack-shop-search .btn {
    width: 100%;
    justify-content: center;
  }

  .pack-shop-discovery-controls {
    display: grid;
    justify-items: start;
    border-bottom: 0;
  }

  .pack-shop-sort-tabs {
    width: 100%;
    border-bottom: 1px solid var(--sm-border);
  }

  .pack-shop-active-filter {
    margin-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .collect-product-card,
  .collect-product-card-media img,
  .pack-shop-brand-card {
    transition: none;
  }

  .collect-product-card:hover,
  .collect-product-card:hover .collect-product-card-media img {
    transform: none;
  }
}

/* Compact sticker preview primitives. */
.stk {
  position: relative;
  transition: transform .15s ease;
}
.stk svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 3px 6px rgba(0,0,0,.18)) drop-shadow(0 1px 2px rgba(0,0,0,.10)); }
.stk.tilt-1 { transform: rotate(-4deg); }
.stk.tilt-2 { transform: rotate(3deg); }
.stk.tilt-3 { transform: rotate(-7deg); }
.stk.tilt-4 { transform: rotate(5deg); }
.stk.tilt-5 { transform: rotate(-2deg); }
.stk.tilt-6 { transform: rotate(7deg); }
.sticker-art-frame {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(60,30,0,.16);
  box-shadow:
    0 3px 0 rgba(255,255,255,.92),
    0 8px 16px rgba(60,30,0,.18),
    inset 0 0 0 1px rgba(255,255,255,.75);
}
.sticker-art-frame img {
  position: relative;
  z-index: 1;
  max-width: 100%;
  max-height: 100%;
}
.sticker-shape-die-cut {
  overflow: visible;
  background: transparent;
  border: 0;
  box-shadow: none;
}
/* The white die-cut edge is built from offset drop-shadows. Each one in a
   chain is a full sequential pass over the image, so the chain length — not
   the offsets — is what costs: the four diagonals were as expensive as the
   four cardinals while only filling the 45° corners the cardinals already
   very nearly cover.

   That price is invisible on a page showing one sticker and brutal on a grid.
   Measured on the pack detail pool (48 stickers, 4x CPU throttle): the nine
   chained filters put the p95 scroll frame at 284ms with five frames over
   50ms; at five filters it is 17ms with none. Same outline, same shadow. */
.sticker-shape-die-cut img {
  filter:
    drop-shadow(3px 0 0 #fff)
    drop-shadow(-3px 0 0 #fff)
    drop-shadow(0 3px 0 #fff)
    drop-shadow(0 -3px 0 #fff)
    drop-shadow(0 8px 12px rgba(60,30,0,.24));
}
.sticker-shape-circle { border-radius: 50%; padding: 10%; }
.sticker-shape-rectangle { border-radius: 7%; padding: 8%; }
.sticker-shape-rounded { border-radius: 18%; padding: 8%; }
.sticker-shape-clear {
  border-radius: 18%;
  padding: 8%;
  background: rgba(255,255,255,.36);
  border-color: rgba(150,150,150,.28);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.68),
    0 8px 16px rgba(60,30,0,.12);
}
.sticker-shape-clear::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.58), rgba(255,255,255,0) 42%, rgba(255,255,255,.34));
  pointer-events: none;
}

/* ---------- album page ---------- */
.album-shell { padding: 28px 32px 48px; max-width: var(--sm-content-max); margin: 0 auto; }
/* THE PULL: the album interior is the lit paper object inside the dark room.
   Re-scope the neutral tokens so every descendant keeps dark-ink-on-cream,
   whatever the page theme does (film grammar: dark world, bright page). */
.album-shell {
  --sm-text: rgb(var(--fg-primary, 29 29 29));
  --sm-text-2: rgb(var(--fg-secondary, 53 53 53));
  --sm-muted: rgb(var(--fg-muted, 95 88 76));
  --sm-text-muted: rgb(var(--fg-muted, 95 88 76));
  --sm-border: rgb(var(--border-primary, 217 208 189));
  --sm-border-2: rgb(var(--border-secondary, 198 187 163));
  --sm-card: rgb(var(--surface-primary, 255 255 255));
  --sm-page: var(--sm-cream);
  --sm-page-2: rgb(var(--surface-hover, 239 232 216));
  --shadow-card: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.06);
  /* The album's own controls read as part of the page, not as chrome bolted
     onto it. The global button token is the sans stack minus proxima-nova, so
     an album edit button rendered Helvetica while the heading above it
     rendered the brand face. The pack shop and the landing page already align
     these two the same way. */
  --sm-font-button: var(--sm-font-sans);
}
.album-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, auto);
  gap: 48px;
  align-items: start;
  margin-bottom: 24px;
}
.album-head-copy { min-width: 0; }
.album-head-stats { min-width: 0; padding-top: 42px; }
.album-head .meta-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.album-head h1 { font-size: clamp(36px, 4vw, 48px); font-weight: 700; letter-spacing: -.035em; margin: 10px 0 10px; line-height: .98; text-wrap: balance; }
.album-head .desc { color: var(--sm-muted); max-width: 540px; margin: 0; }
.album-head .stats {
  display: flex; gap: 28px; align-items: end; justify-content: flex-end;
}
.album-head .stat .n { font-size: 32px; font-weight: 900; letter-spacing: -.02em; line-height: 1; }
/* An untouched album's counters step back so a new album does not read as a
   broken one (consistency review, finding 10). Only the figure dims; the label
   stays legible and the reveal row keeps full weight as the instruction. */
.album-head .stats.is-empty .stat .n { color: var(--sm-muted); }
.album-head .stats-empty-note { grid-column: 1 / -1; margin: 6px 0 0; max-width: 46ch; font-size: 13px; line-height: 1.5; color: var(--sm-text-2); }
.album-head .stat .l { font-size: 12px; color: var(--sm-muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; margin-top: 3px; }

/* the actual album: paper-feel page with sticker slots */
.album-page {
  background:
    radial-gradient(circle at 0 0, rgba(0,0,0,.04), transparent 60%),
    var(--sm-cream);
  border-radius: 12px;
  border: 1px solid #e0d9c8;
  box-shadow: 0 1px 0 #fff inset, 0 18px 40px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
  padding: 36px 36px 30px;
  position: relative;
  overflow: hidden;
}
/* subtle paper grain */
.album-page::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(60,30,0,.045) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: .55;
  mix-blend-mode: multiply;
}
/* binder dots down the left edge */
.album-page::after {
  content: ""; position: absolute; left: 12px; top: 36px; bottom: 36px; width: 12px;
  background-image: radial-gradient(circle, rgba(60,30,0,.18) 3px, transparent 3.5px);
  background-size: 12px 36px; background-repeat: repeat-y;
}

/* The viewer has its own local toolbar. Owner actions live beside the thing
   they affect instead of auto-flowing as a third child in the album header. */
.album-viewer-bar,
.album-workspace {
  position: relative;
  z-index: 1;
}
.album-viewer-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 24px;
  align-items: center;
  margin: 0 0 22px;
  padding: 0 0 16px 18px;
  border-bottom: 1px solid rgba(60,30,0,.14);
}
.album-viewer-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.album-viewer-heading > div { min-width: 0; }
.album-viewer-heading strong {
  display: block;
  color: var(--sm-text);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
}
.album-viewer-heading p {
  max-width: 62ch;
  margin: 2px 0 0;
  color: var(--sm-muted);
  font-size: 12.5px;
  line-height: 1.4;
  text-wrap: pretty;
}
.album-viewer-status {
  flex: 0 0 auto;
  padding: 4px 7px;
  border: 1px solid rgba(60,30,0,.15);
  border-radius: 5px;
  color: var(--sm-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.album-viewer-heading-manage { display: none; }
.album-shell.is-editing .album-viewer-heading-view { display: none; }
.album-shell.is-editing .album-viewer-heading-manage { display: flex; }
.album-viewer-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.album-viewer-actions .btn { min-height: 44px; }
.album-delete-draft-trigger { color: var(--sm-red); }
.album-delete-draft-trigger:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--sm-red) 38%, var(--sm-border));
  background: color-mix(in srgb, var(--sm-card) 91%, var(--sm-red) 9%);
}
.album-delete-draft-note {
  grid-column: 1 / -1;
  justify-self: end;
  color: var(--sm-muted);
  font-size: 12px;
}
.album-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
.album-workspace-main { display: flex; min-width: 0; flex-direction: column; }
.album-shell.is-editing .album-workspace {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
}

.album-page.is-focus-view {
  width: min(1440px, calc(100vw - 32px));
  max-width: none;
  margin-left: 50%;
  padding: 24px 32px 34px;
  border-radius: 16px;
  box-shadow: 0 22px 64px rgba(36,22,12,.18);
  transform: translateX(-50%);
}
.album-page.is-focus-view .album-viewer-bar,
.album-page.is-focus-view .album-workspace {
  width: min(100%, 1440px);
  margin-right: auto;
  margin-left: auto;
}
.album-page.is-focus-view .album-workspace { padding-bottom: 24px; }

.album-section-head {
  display: flex; align-items: center; gap: 14px; margin-bottom: 18px; position: relative;
}
.album-section-head .chap {
  font-family: "Caveat", cursive;
  font-size: 26px; color: var(--sm-brown);
  font-weight: 700; line-height: 1;
}
.album-section-head h3 {
  font-size: 20px; font-weight: 800; letter-spacing: -.005em; margin: 0;
}
.album-section-head .sub { color: var(--sm-muted); font-size: 13px; font-weight: 600; }
.album-section-head .line { flex: 1; height: 1px; background: rgba(60,30,0,.15); margin-left: 4px; }

.album-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px 14px;
  position: relative;
}
.album-grid--2x2 { grid-template-columns: repeat(6, 1fr); }
.album-grid--3x3 { grid-template-columns: repeat(5, 1fr); }
.album-grid--4x4 { grid-template-columns: repeat(4, 1fr); }
.album-grid--5x5 { grid-template-columns: repeat(3, 1fr); }
.slot {
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s ease;
}
.slot .num-tag {
  position: absolute;
  top: -8px; left: 50%;
  transform: translateX(-50%);
  background: var(--sm-brown);
  color: #fff;
  font-weight: 800;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  z-index: 4;
  letter-spacing: .02em;
}
/* empty slot */
.slot.empty {
  background: rgba(0,0,0,.045);
  border: 2px dashed rgba(60,30,0,.25);
  color: rgba(60,30,0,.45);
}
.slot.empty .silhouette {
  font-size: 28px; font-weight: 900; color: rgba(60,30,0,.32);
  letter-spacing: -.02em;
}
/* Silhouette mask variant — server emits an alpha-only PNG of the
 * artwork contour and renders it via CSS mask-image so the slot can
 * tint it with the collection accent color. Sized as a centered square
 * inside the slot; the actual artwork shape comes from the mask. */
.slot.empty .silhouette--mask {
  width: 70%; aspect-ratio: 1 / 1;
  margin: auto;
  opacity: .55;
  filter: saturate(.75);
  font-size: 0; /* hide any text fallback when both rendered */
}
.slot.empty .lock-hint {
  position: absolute; bottom: 8px; left: 0; right: 0;
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(60,30,0,.45);
}
/* claimed/public catalog slot */
.slot.claimed,
.slot.catalog-art { cursor: pointer; }
.slot.claimed .sticker-mount,
.slot.catalog-art .sticker-mount {
  width: 88%; height: 88%;
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--motion-duration-fast) var(--motion-easing-snappy-out);
}
.slot.claimed:hover .sticker-mount,
.slot.catalog-art:hover .sticker-mount { transform: scale(1.06) rotate(0deg) !important; }
.slot.claimed .sticker-mount svg,
.slot.catalog-art .sticker-mount svg {
  width: 100%; height: 100%;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.20)) drop-shadow(0 1px 2px rgba(0,0,0,.12));
}
.slot.claimed .badge {
  position: absolute;
  top: -6px; right: -6px;
  width: 26px; height: 26px;
  background: var(--sm-green);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 2px 4px rgba(0,0,0,.15);
  z-index: 5;
}
.slot.catalog-art .owned-elsewhere-badge {
  position: absolute;
  top: -6px; right: -6px;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--sm-warning-bg);
  color: var(--sm-brown);
  border: 2px solid var(--sm-card);
  font-size: 14px;
  font-weight: 900;
  z-index: 3;
}
.slot.new { z-index: 4; }

/* ---------- album open book ----------
   Progressive enhancement: the page source renders as a vertically stacked
   album by default; collect_album.js adds `.js-ready`, pages it two-up into
   a left/right spread, and flips a leaf over the center spine on each turn. */
.book { position: relative; }
.book-stage {
  position: relative;
  display: grid;
  perspective: 1600px;
}
.book-stage > .book-spread,
.book-stage > .book-closed-cover {
  grid-area: 1 / 1;
}
.book-page { margin-bottom: 30px; }
.book-page:last-child { margin-bottom: 0; }

/* Authored design overlays (editor→viewer sync): custom text/image layers the
   brand added in the design editor, projected as percentage-positioned nodes
   over the page grid so they flip with the page. container-type:size makes cqw
   font/image sizes resolve against the rendered page box. */
.book-page { position: relative; }
.book-authored { position: absolute; inset: 0; container-type: size; pointer-events: none; overflow: hidden; }
.book-authored .authored-layer { position: absolute; transform-origin: center; }
.book-authored .authored-text { white-space: nowrap; line-height: 1.1; font-weight: 600; }
.book-authored .authored-image { display: block; }
.book-design-preview {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--album-page-aspect, 2000 / 2160);
  min-height: 0;
  container-type: size;
}
.book-design-preview .authored-layer { position: absolute; transform-origin: center; }
.book-design-preview .authored-text { white-space: nowrap; line-height: 1.1; font-weight: 600; }
.book-design-preview .authored-image { display: block; object-fit: contain; }
.book-design-preview .authored-shape { pointer-events: none; }

/* Assume-JS first paint: the closed book shows immediately and the stacked
   page source is hidden, so there is no flash of the long stacked album that
   then gets replaced. The <noscript> block in AlbumBook restores the stacked
   layout for genuine no-JS clients. */
.book .book-spread,
.book .book-controls { display: none; }
.book .book-pages { display: none; }

/* JS: the open book — a left page and a right page joined by a spine. */
.book.js-ready .book-spread {
  display: flex; position: relative;
  perspective: 2400px;
  min-height: 420px;
}
.book.js-ready .book-side {
  flex: 1 1 50%; width: 50%; min-width: 0;
  padding: 22px 20px 30px;
  background:
    radial-gradient(circle at 0 0, rgba(0,0,0,.04), transparent 60%),
    var(--sm-cream);
}
.book.js-ready .book-side.left {
  border-radius: 10px 0 0 10px;
  box-shadow: inset -14px 0 22px -16px rgba(60,30,0,.45);
}
.book.js-ready .book-side.right {
  border-radius: 0 10px 10px 0;
  box-shadow: inset 14px 0 22px -16px rgba(60,30,0,.45);
}
/* In an RTL book, the first logical page is painted on the physical right
   and the second on the physical left. Keep the source order semantic and
   mirror only the physical paper treatment. */
[dir="rtl"] .book.js-ready .book-side.left {
  border-radius: 0 10px 10px 0;
  box-shadow: inset 14px 0 22px -16px rgba(60,30,0,.45);
}
[dir="rtl"] .book.js-ready .book-side.right {
  border-radius: 10px 0 0 10px;
  box-shadow: inset -14px 0 22px -16px rgba(60,30,0,.45);
}
/* Album artwork uses an absolute, left-origin SVG coordinate system. Isolate
   its coordinate geometry from the surrounding reading direction while the
   Unicode bidi algorithm still shapes strong RTL text inside each layer. */
[dir="rtl"] .book .album-doc-page .album-doc-svg,
[dir="rtl"] .book .album-doc-page .album-doc-svg text {
  direction: ltr;
  unicode-bidi: isolate;
}
.book.js-ready .book-side .book-page { margin: 0; }
.book.js-ready .book-side .album-grid { grid-template-columns: repeat(3, 1fr); }
.book.js-ready .book-side .album-grid--2x2 { grid-template-columns: repeat(4, 1fr); gap: 14px 10px; }
.book.js-ready .book-side .album-grid--3x3 { grid-template-columns: repeat(3, 1fr); }
.book.js-ready .book-side .album-grid--4x4 { grid-template-columns: repeat(2, 1fr); gap: 18px 16px; }
.book.js-ready .book-side .album-grid--5x5 { grid-template-columns: repeat(2, 1fr); gap: 22px 18px; }
.book.js-ready .book-spine {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 4px;
  transform: translateX(-2px);
  background: linear-gradient(to right,
    rgba(60,30,0,.30), rgba(60,30,0,.05) 45%, rgba(0,0,0,0) 50%,
    rgba(60,30,0,.05) 55%, rgba(60,30,0,.30));
  z-index: 20; pointer-events: none;
}
/* Closed-back spreads keep the SAME canvas as every open spread: the back
   cover sits on its side and the empty partner side keeps its box (the
   visibility rules live in the cover-flow section further down). The old
   treatment here — display:none on the partner side plus a max-width
   resize — made the whole book shrink/grow between spreads and threw the
   mid-turn leaf geometry off-center. */
/* the turning leaf — one shared element, only visible mid-turn */
.book.js-ready .leaf {
  display: none;
  position: absolute; top: 0; right: 0; width: 50%; height: 100%;
  transform-origin: left center; transform-style: preserve-3d;
  z-index: 30;
}
.book.js-ready .leaf.turning { display: block; }
.book.js-ready .leaf.from-right { animation: leaf-fwd .62s cubic-bezier(.2,.7,.3,1) both; }
.book.js-ready .leaf.from-left { animation: leaf-bwd .62s cubic-bezier(.2,.7,.3,1) both; }
@keyframes leaf-fwd { from { transform: rotateY(0); } to { transform: rotateY(-180deg); } }
@keyframes leaf-bwd { from { transform: rotateY(-180deg); } to { transform: rotateY(0); } }
[dir="rtl"] .book.js-ready .leaf {
  right: auto;
  left: 0;
  transform-origin: right center;
}
[dir="rtl"] .book.js-ready .leaf.from-right { animation-name: leaf-fwd-rtl; }
[dir="rtl"] .book.js-ready .leaf.from-left { animation-name: leaf-bwd-rtl; }
@keyframes leaf-fwd-rtl { from { transform: rotateY(0); } to { transform: rotateY(180deg); } }
@keyframes leaf-bwd-rtl { from { transform: rotateY(180deg); } to { transform: rotateY(0); } }
.book.js-ready .leaf-face {
  position: absolute; inset: 0; overflow: hidden;
  backface-visibility: hidden;
  padding: 22px 20px 30px;
  background:
    radial-gradient(circle at 0 0, rgba(0,0,0,.04), transparent 60%),
    var(--sm-cream);
}
.book.js-ready .leaf-face.front { border-radius: 0 10px 10px 0; box-shadow: inset 14px 0 22px -16px rgba(60,30,0,.45); }
.book.js-ready .leaf-face.back { transform: rotateY(180deg); border-radius: 10px 0 0 10px; box-shadow: inset -14px 0 22px -16px rgba(60,30,0,.45); }
[dir="rtl"] .book.js-ready .leaf-face.front {
  border-radius: 10px 0 0 10px;
  box-shadow: inset -14px 0 22px -16px rgba(60,30,0,.45);
}
[dir="rtl"] .book.js-ready .leaf-face.back {
  transform: rotateY(-180deg);
  border-radius: 0 10px 10px 0;
  box-shadow: inset 14px 0 22px -16px rgba(60,30,0,.45);
}
.book.js-ready .leaf-face .album-grid { grid-template-columns: repeat(3, 1fr); }
.book.js-ready .leaf-face .album-grid--2x2 { grid-template-columns: repeat(4, 1fr); gap: 14px 10px; }
.book.js-ready .leaf-face .album-grid--3x3 { grid-template-columns: repeat(3, 1fr); }
.book.js-ready .leaf-face .album-grid--4x4 { grid-template-columns: repeat(2, 1fr); gap: 18px 16px; }
.book.js-ready .leaf-face .album-grid--5x5 { grid-template-columns: repeat(2, 1fr); gap: 22px 18px; }
.book.js-ready .leaf-face .book-page { margin: 0; }

.book.js-ready .book-controls,
.book-controls--standalone {
  display: grid;
  grid-template-columns: 44px minmax(180px, 470px) 44px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: min(100%, 590px);
  margin: 16px auto 0;
}
.book-controls--standalone {
  grid-template-columns: minmax(180px, 470px);
  margin-top: 0;
}
.book.js-ready .nav-arrow {
  box-sizing: border-box;
  position: static;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid rgba(60,30,0,.16);
  border-radius: 50%;
  background: rgba(255,253,247,.92);
  color: var(--sm-brown);
  box-shadow: 0 2px 8px rgba(60,30,0,.12);
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease,
    box-shadow .16s ease, color .16s ease, transform .12s ease,
    opacity .12s ease;
}
.book.js-ready .nav-arrow.prev { justify-self: end; }
.book.js-ready .nav-arrow.next { justify-self: start; }
.book.js-ready .nav-arrow:hover {
  border-color: rgba(60,30,0,.28);
  background: var(--sm-card);
  color: var(--sm-orange);
  box-shadow: 0 3px 10px rgba(60,30,0,.16);
}
.book.js-ready .nav-arrow:active { transform: translateY(1px) scale(.96); }
.book.js-ready .nav-arrow:focus-visible {
  outline: 2px solid var(--sm-orange);
  outline-offset: 3px;
}
.book.js-ready .nav-arrow:disabled {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.book.js-ready .nav-arrow .collect-icon { display: inline-flex; }
[dir="rtl"] .book.js-ready .nav-arrow .collect-icon {
  transform: scaleX(-1);
}

.book.js-ready .book-foot,
.book-controls--standalone .book-foot {
  display: grid;
  grid-template-columns: minmax(120px, 320px) auto;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  margin: 0;
  min-width: 0;
}
.book-scrubber {
  --book-progress: 0%;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  min-width: 0;
}
.book-scrubber::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(to right,
    var(--sm-orange) 0,
    var(--sm-orange) var(--book-progress),
    rgba(60,30,0,.18) var(--book-progress),
    rgba(60,30,0,.18) 100%);
}
.book-scrubber::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -6px;
  border: 3px solid var(--sm-card);
  border-radius: 50%;
  background: var(--sm-orange);
  box-shadow: 0 1px 5px rgba(60,30,0,.24);
  transition: transform .15s ease, box-shadow .15s ease;
}
.book-scrubber::-moz-range-track {
  height: 4px;
  border: 0;
  border-radius: 999px;
  background: rgba(60,30,0,.18);
}
.book-scrubber::-moz-range-progress {
  height: 4px;
  border-radius: 999px;
  background: var(--sm-orange);
}
.book-scrubber::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 3px solid var(--sm-card);
  border-radius: 50%;
  background: var(--sm-orange);
  box-shadow: 0 1px 5px rgba(60,30,0,.24);
  transition: transform .15s ease, box-shadow .15s ease;
}
.book-scrubber:hover::-webkit-slider-thumb { transform: scale(1.12); }
.book-scrubber:hover::-moz-range-thumb { transform: scale(1.12); }
.book-scrubber:focus-visible {
  outline: 2px solid var(--sm-orange);
  outline-offset: 2px;
  border-radius: 999px;
}
.book-scrubber:disabled { cursor: default; opacity: .42; }
.book-pageno {
  min-width: max-content;
  color: var(--sm-text);
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  white-space: nowrap;
}

/* book title page (page 0, left of the opening spread) */
.book-cover .cover-card {
  text-align: center; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px 18px;
}
.book-cover .cover-brand {
  font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; color: var(--sm-orange);
}
.book-cover .cover-title {
  font-size: 32px; font-weight: 700; letter-spacing: -.02em;
  margin: 8px 0 10px; line-height: 1.05;
}
.book-cover .cover-desc { color: var(--sm-muted); margin: 0 0 14px; }
.book-cover .cover-progress { font-size: 13px; font-weight: 800; color: var(--sm-text); margin: 0 0 8px; }
.book-cover .cover-series { font-family: "Caveat", cursive; font-size: 30px; color: var(--sm-brown); }

/* album intro page (page 1, right of the opening cover spread) */
.book-intro {
  min-height: 420px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.54), rgba(255,255,255,0)),
    var(--album-paper, var(--sm-page));
}
.book-intro-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 42px 34px;
}
.book-intro-kicker {
  font-size: 12px;
  font-weight: 850;
  color: var(--sm-orange);
  text-transform: uppercase;
  letter-spacing: .12em;
}
.book-intro-title {
  margin: 10px 0 12px;
  color: var(--sm-text);
  font-size: clamp(28px, 5.5cqw, 46px);
  line-height: .98;
  letter-spacing: -.02em;
}
.book-intro-desc {
  max-width: 28em;
  margin: 0;
  color: var(--sm-muted);
  font-size: 16px;
  line-height: 1.55;
}
.book-intro-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 30px;
  padding-top: 16px;
  border-top: 1px solid var(--sm-border);
}
.book-intro-series {
  font-family: "Caveat", cursive;
  color: var(--sm-brown);
  font-size: 28px;
}
.book-intro-progress {
  color: var(--sm-text);
  font-size: 13px;
  font-weight: 850;
}

/* On narrow screens the shared engine switches from two-page spreads to a
   single visible page. Keep one physical page centered instead of stacking
   both spread sides vertically. */
@media (max-width: 860px) {
  .book.js-ready .book-spread {
    flex-direction: row;
    justify-content: center;
    min-height: 0;
    perspective: none;
  }
  .book.js-ready.is-single-page .book-side.left {
    flex: 0 1 min(100%, 460px);
    width: min(100%, 460px);
    max-width: 460px;
    border-radius: 10px;
    box-shadow: var(--shadow-card);
  }
  .book.js-ready.is-single-page .book-side.right,
  .book.js-ready.is-single-page .book-spine {
    display: none;
  }
  .book.js-ready.is-single-page.is-back-closed .book-side.left {
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .book.js-ready .leaf { display: none !important; }
  .book.js-ready .book-controls {
    grid-template-columns: 44px minmax(0, 420px) 44px;
    gap: 10px;
    width: min(100%, 540px);
  }
  .book.js-ready .book-foot { width: 100%; }
}

@media (max-width: 420px) {
  .book.js-ready .book-controls {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    gap: 6px;
    width: 100%;
  }
  .book.js-ready .nav-arrow {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }
  .book.js-ready .book-foot {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    width: 100%;
  }
  .book.js-ready .book-pageno { grid-row: 1; justify-self: center; }
  .book.js-ready .book-scrubber { grid-row: 2; }
}

/* ---------- rarity treatments on claimed slots ---------- */
.slot.claimed.rare .sticker-art-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.95) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 68% 32%, rgba(255,220,120,.9) 0 1px, transparent 2px),
    radial-gradient(circle at 42% 76%, rgba(255,255,255,.85) 0 1.2px, transparent 2.2px);
  background-size: 28px 28px, 22px 22px, 34px 34px;
  mix-blend-mode: screen;
  opacity: .72;
}
.slot.claimed.chase .sticker-art-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(from 210deg,
    rgba(255,91,154,.55), rgba(255,212,0,.52), rgba(30,166,85,.48),
    rgba(22,114,246,.55), rgba(140,79,255,.52), rgba(255,91,154,.55));
  mix-blend-mode: screen;
  opacity: .62;
}
.slot.claimed.rare::after {
  content: ""; position: absolute; inset: 4px; border-radius: 16%;
  box-shadow: 0 0 0 3px rgba(22,114,246,.55), 0 0 14px rgba(22,114,246,.4);
  pointer-events: none; z-index: 3;
}
.slot.claimed.chase::after {
  content: ""; position: absolute; inset: 5px; border-radius: 14%;
  background: conic-gradient(from 210deg,
    rgba(255,91,154,.7), rgba(255,212,0,.7), rgba(30,166,85,.7),
    rgba(22,114,246,.7), rgba(140,79,255,.7), rgba(255,91,154,.7));
  mix-blend-mode: screen; opacity: .5;
  pointer-events: none; z-index: 3;
}
@keyframes holo-shift { to { filter: hue-rotate(360deg); } }

/* Freshly claimed placement: one short, target-bound settle. Rare and chase
   stickers earn a single light pass; the resting album remains still. */
.slot.slap {
  z-index: 4;
}
.slot.slap,
.album-doc-svg [data-collect-sticker].slap {
  animation: slot-slap var(--motion-duration-normal) var(--motion-easing-snappy-out);
}
.album-doc-svg [data-collect-sticker].slap {
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes slot-slap {
  from { opacity: .78; translate: 0 -8px; scale: 1.04; }
}
.slot.slap:is(.rare, .chase)::before {
  content: "";
  position: absolute;
  inset: 8%;
  z-index: 5;
  pointer-events: none;
  border-radius: 18%;
  background: linear-gradient(105deg, transparent 25%, rgba(255,255,255,.72) 48%, transparent 70%);
  mix-blend-mode: screen;
  opacity: 0;
  animation: slot-claim-glint var(--motion-duration-normal) var(--motion-easing-editorial);
}
@keyframes slot-claim-glint {
  from { opacity: 0; transform: translateX(-28%); }
  45% { opacity: .8; }
  to { opacity: 0; transform: translateX(28%); }
}

@media (prefers-reduced-motion: reduce) {
  .slot.claimed .sticker-mount,
  .slot.catalog-art .sticker-mount { transition: none; }
  .slot.new,
  .slot.slap,
  .album-doc-svg [data-collect-sticker].slap,
  .slot.slap:is(.rare, .chase)::before { animation: none; }
  .book.js-ready .book-page.flip-next,
  .book.js-ready .book-page.flip-prev { animation-duration: .01ms; }
}

/* The shared Avatar atom carries a foreground utility on its inner initials.
   Collect supplies per-instance colors on the outer avatar, so the initials
   must inherit that authored foreground instead of forcing on-surface white. */
.collect-avatar .text-fg-on-surface { color: inherit; }

/* Reveal CTA  */
.reveal-row {
  margin-top: 22px;
  display: flex; align-items: center; gap: 14px;
  background: var(--sm-brown);
  border-radius: 10px;
  padding: 14px 16px 14px 18px;
  color: #fff;
}
.reveal-row .reveal-icon {
  width: 38px; height: 38px;
  background: var(--sm-orange);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 38px;
}
.reveal-row .reveal-text { flex: 1; }
.reveal-row .reveal-text b { display: block; font-size: 14.5px; }
.reveal-row .reveal-text .s { font-size: 12.5px; opacity: .75; }
.reveal-row input.code {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  color: #fff;
  padding: 10px 12px;
  border-radius: 6px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .14em;
  width: 180px;
  text-transform: uppercase;
}
.reveal-row input.code::placeholder { color: rgba(255,255,255,.4); }

/* trade hint */
.trade-banner {
  margin-top: 16px;
  background: var(--sm-card);
  border-radius: 10px;
  border: 1px solid var(--sm-border);
  padding: 12px 16px;
  display: flex; align-items: center; gap: 12px;
  font-size: 13.5px;
}
.trade-banner b { font-weight: 800; }
.trade-banner .pill.dot { font-size: 11.5px; }
.trade-banner .spacer { flex: 1; }

/* ---------- sticker detail ---------- */
.sticker-detail { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; padding: 36px 32px 80px; max-width: 1180px; margin: 0 auto; }
.sticker-stage {
  background:
    radial-gradient(circle at 50% 35%, #fff 0, rgba(255,255,255,.7) 35%, transparent 70%),
    var(--sm-cream);
  border-radius: 14px;
  border: 1px solid #e0d9c8;
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
}
.sticker-stage::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(60,30,0,.045) 1px, transparent 1px);
  background-size: 4px 4px;
  opacity: .5;
}
.sticker-stage .big-stk {
  width: 62%;
  transform: rotate(-6deg);
  filter: drop-shadow(0 18px 24px rgba(0,0,0,.20)) drop-shadow(0 3px 6px rgba(0,0,0,.12));
}
.sticker-stage .corner-num {
  position: absolute;
  top: 22px; left: 22px;
  background: var(--sm-brown);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  padding: 7px 12px;
  border-radius: 999px;
  letter-spacing: .04em;
}
.sticker-stage .rarity {
  position: absolute;
  top: 22px; right: 22px;
}
.sticker-stage-status {
  position: absolute;
  right: 20px;
  bottom: 20px;
  left: 20px;
  z-index: 2;
  text-align: center;
  pointer-events: none;
}

.sticker-info h1 {
  font-size: 44px; font-weight: 700; letter-spacing: -.025em; margin: 14px 0 8px; line-height: 1.05;
}
.sticker-info .meta-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.sticker-info p.lede { font-size: 16.5px; color: var(--sm-text-2); margin: 16px 0 22px; line-height: 1.45; }
.sticker-info .specs {
  border-top: 1px solid var(--sm-border);
  border-bottom: 1px solid var(--sm-border);
  padding: 18px 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px;
}
.sticker-info .specs .row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.sticker-info .specs .row .l { color: var(--sm-muted); font-weight: 500; }
.sticker-info .specs .row .v { color: var(--sm-text); font-weight: 700; }

.where-block { margin-top: 26px; }
.where-block h3 { font-size: 16px; font-weight: 800; margin: 0 0 12px; }
.where-list {
  display: grid; grid-template-columns: 1fr; gap: 10px;
}
.where-item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: var(--sm-card);
  border: 1px solid var(--sm-border);
  border-radius: 10px;
  font-size: 14px;
}
.where-item .ic .collect-icon { display: inline-flex; }
.where-item .ic .collect-icon svg { width: 20px; height: 20px; display: block; }
.where-item .ic {
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--sm-page);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.where-item .t { flex: 1; }
.where-item .t b { display: block; font-weight: 800; font-size: 14.5px; }
.where-item .t .s { font-size: 12.5px; color: var(--sm-muted); }
.where-item .when { font-size: 12.5px; color: var(--sm-muted); font-weight: 600; }

.pack-purchase-cta {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}
.pack-purchase-icon {
  width: 42px;
  height: 42px;
  border-radius: 9px;
  background: var(--sm-orange);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--sm-orange) 22%, transparent);
}
.pack-purchase-copy h3 {
  margin: 0 0 3px;
  font-size: 15px;
  line-height: 1.15;
  font-weight: 900;
  color: var(--sm-text);
}
.pack-purchase-copy p {
  margin: 0;
  color: var(--sm-muted);
  font-size: 12.5px;
  line-height: 1.4;
}
.pack-purchase-cta .cart-add-form {
  justify-self: end;
}
.sticker-pack-buy {
  margin-top: 18px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--sm-orange) 28%, var(--sm-border));
  border-radius: 12px;
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--sm-orange) 12%, transparent), transparent 34%),
    var(--sm-card);
}

.trade-block { margin-top: 22px; }
.trade-block .others {
  display: flex; gap: -4px; align-items: center;
}
.trade-block .others .av {
  width: 30px; height: 30px; border-radius: 50%; background: var(--sm-page);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
  border: 2px solid #fff;
  color: var(--sm-text);
  margin-left: -8px;
}
.trade-block .others .av:first-child { margin-left: 0; }
.trade-block .others .av.c1 { background: #ffd8c2; }
.trade-block .others .av.c2 { background: #c9e8d4; }
.trade-block .others .av.c3 { background: #d6deff; }
.trade-block .others .av.c4 { background: #ffe2a8; }

/* ---------- sticker marketplace detail ----------
   The detail route borrows the familiar marketplace rhythm — product stage,
   seller line, quantity + primary purchase, and related work — while keeping
   Collect's shared shell and its server-priced cart form. */
body.collect-sticker-marketplace {
  background: #f6f3ed;
}
.collect-sticker-main {
  background: #f6f3ed;
}
.sticker-marketplace-page {
  min-height: calc(100dvh - var(--sm-nav-height, 46px) - 56px);
  background:
    radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--sm-orange) 7%, transparent), transparent 30%),
    #f6f3ed;
}
.sticker-detail-pager {
  display: grid;
  grid-template-columns: 44px minmax(112px, auto) 44px;
  align-items: center;
  justify-content: end;
  gap: 10px;
  width: min(100%, 1360px);
  margin: 0 auto;
  padding: 28px 32px 0;
  box-sizing: border-box;
}
.btn.sticker-detail-pager-arrow {
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid rgba(60,30,0,.16);
  border-radius: 50%;
  background: rgba(255,253,247,.94);
  color: var(--sm-brown);
  box-shadow: 0 2px 8px rgba(60,30,0,.10);
  transition: background-color .16s ease, border-color .16s ease,
    box-shadow .16s ease, color .16s ease, transform .12s ease,
    opacity .12s ease;
}
.btn.sticker-detail-pager-arrow:hover {
  border-color: rgba(60,30,0,.28);
  background: var(--sm-card);
  color: var(--sm-orange);
  box-shadow: 0 3px 10px rgba(60,30,0,.14);
}
.btn.sticker-detail-pager-arrow:active { transform: translateY(1px) scale(.96); }
.btn.sticker-detail-pager-arrow:focus-visible {
  outline: 2px solid var(--sm-orange);
  outline-offset: 3px;
}
.btn.sticker-detail-pager-arrow:disabled,
.btn.sticker-detail-pager-arrow[aria-disabled="true"] {
  visibility: hidden;
  pointer-events: none;
}
.sticker-detail-count {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  color: var(--sm-muted);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .06em;
}
.sticker-detail-count strong {
  color: var(--sm-text);
  font-size: 14px;
  font-weight: 900;
}
@media (prefers-reduced-motion: reduce) {
  .btn.sticker-detail-pager-arrow { transition: none; }
}
.sticker-marketplace-detail {
  grid-template-columns: minmax(520px, 1.08fr) minmax(420px, .92fr);
  align-items: start;
  gap: clamp(48px, 5vw, 76px);
  max-width: 1360px;
  padding: 22px 32px 64px;
}
.sticker-marketplace-detail .sticker-stage {
  background: #ebe7df;
  border: 1px solid rgba(60,30,0,.08);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.38);
}
.sticker-marketplace-detail .sticker-stage::before {
  background-image: none;
  opacity: 0;
}
.sticker-marketplace-detail .sticker-stage .big-stk {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64%;
  height: 72%;
  transform: rotate(0);
  filter: drop-shadow(0 16px 18px rgba(0,0,0,.18)) drop-shadow(0 3px 4px rgba(0,0,0,.10));
}
.sticker-marketplace-detail .sticker-stage .corner-num {
  top: 18px;
  left: 18px;
  background: rgba(255,255,255,.92);
  color: var(--sm-text);
  border: 1px solid rgba(0,0,0,.08);
  font-size: 12px;
  padding: 7px 10px;
}
.sticker-marketplace-detail .sticker-stage .rarity {
  top: 18px;
  right: 18px;
}
.sticker-marketplace-detail .sticker-stage .big-stk > div {
  border-radius: 10px !important;
}
.sticker-marketplace-detail .sticker-stage .big-stk > .sticker-art-frame {
  width: 100%;
  height: 100%;
}
.sticker-marketplace-detail .sticker-stage-status {
  right: 18px;
  bottom: 18px;
  left: 18px;
}
.sticker-marketplace-detail .sticker-info {
  padding-top: 2px;
}
.sticker-marketplace-detail .sticker-info h1 {
  margin: 0 0 8px;
  font-size: clamp(32px, 3.2vw, 44px);
  line-height: 1.05;
  letter-spacing: -.035em;
}
.sticker-marketplace-byline {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--sm-text-2);
  font-size: 14px;
  line-height: 1.35;
  margin-bottom: 12px;
}
.sticker-maker-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: var(--sm-orange);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}
.sticker-marketplace-detail .sticker-info .meta-row {
  margin: 0 0 12px;
}
.sticker-marketplace-detail .sticker-info p.lede {
  margin: 0 0 22px;
  font-size: 15px;
}
.sticker-marketplace-purchase {
  border-top: 1px solid var(--sm-border);
  border-bottom: 1px solid var(--sm-border);
  padding: 20px 0 18px;
  margin-bottom: 22px;
}
.sticker-marketplace-price {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-bottom: 17px;
}
.sticker-marketplace-price strong {
  color: var(--sm-text);
  font-size: 28px;
  line-height: 1;
  letter-spacing: -.035em;
}
.sticker-marketplace-price span {
  color: var(--sm-muted);
  font-size: 13px;
}
.sticker-marketplace-quantity {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 10px;
  align-items: end;
}
.sticker-marketplace-quantity-label {
  color: var(--sm-text-2);
  font-size: 13px;
  font-weight: 700;
  padding-bottom: 13px;
}
.sticker-marketplace-purchase .cart-add-form {
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr);
  gap: 10px;
  align-items: end;
  min-width: 0;
}
.sticker-marketplace-purchase .cart-add-form .cart-add-qty {
  display: grid;
  gap: 5px;
  color: var(--sm-muted);
  font-size: 11px;
  font-weight: 700;
}
.sticker-marketplace-purchase .cart-add-form .cart-add-qty > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.sticker-marketplace-purchase .cart-add-form .cart-add-qty input {
  min-height: 46px;
  width: 100%;
  text-align: center;
  border-color: var(--sm-border-2);
  background: #fff;
}
.sticker-marketplace-purchase .cart-add-form .btn {
  width: 100%;
  min-height: 46px;
  justify-content: center;
}
.sticker-marketplace-perks {
  display: grid;
  gap: 9px;
  margin-top: 18px;
}
.sticker-marketplace-perk {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--sm-text-2);
  font-size: 13px;
}
.sticker-marketplace-perk-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  color: var(--sm-muted);
  font-size: 17px;
  line-height: 1;
}
.sticker-marketplace-detail .specs {
  grid-template-columns: 1fr 1fr;
  gap: 12px 22px;
  padding: 17px 0;
}
.sticker-collection-status {
  margin-top: 22px;
}
.sticker-collection-status .card {
  background: #fafafa;
  border-color: var(--sm-border);
}
.sticker-marketplace-related {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 32px 76px;
}
.sticker-marketplace-related-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}
.sticker-marketplace-related-heading h2 {
  margin: 0;
  color: var(--sm-text);
  font-size: 22px;
  letter-spacing: -.02em;
}
.sticker-marketplace-related-heading a {
  color: var(--sm-blue);
  font-size: 13px;
  font-weight: 700;
}
.sticker-related-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.sticker-related-card {
  display: block;
  color: var(--sm-text);
  min-width: 0;
}
.sticker-related-card:hover {
  color: var(--sm-text);
  text-decoration: none;
}
.sticker-related-art {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  padding: 15%;
  border-radius: 4px;
  background: #f2f2f2;
  transition: background-color .16s ease, transform .16s ease;
}
.sticker-related-card:hover .sticker-related-art {
  background: #eaeaea;
  transform: translateY(-2px);
}
.sticker-related-art img {
  max-width: 100%;
  max-height: 100%;
}
.sticker-related-svg svg {
  width: 100%;
  height: 100%;
}
.sticker-related-placeholder span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54%;
  height: 54%;
  border: 2px dashed rgba(60,30,0,.18);
  border-radius: 10px;
  color: rgba(60,30,0,.28);
  font-size: 38px;
  font-weight: 900;
}
.sticker-related-card-copy {
  display: grid;
  gap: 3px;
  padding: 9px 1px 0;
}
.sticker-related-card-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.sticker-related-card-copy span {
  color: var(--sm-muted);
  font-size: 11.5px;
}

/* ---------- create flow ---------- */
/* Paper-light create surface (v3 builder grammar, 2026-07). The wizard body
   is a bright print-shop workbench, FULL-BLEED below the tenant chrome:
   warm paper page, white cards with subtle borders, dense small type, one
   restrained action accent. All values live on .create-shell as --create-*
   custom properties so tenant brand config (collect_brand) can override
   them later; the --sm-* neutrals are re-scoped onto those tokens (the
   album's paper-light re-scope mechanism, page-scale). Brand/finish tokens
   (--sm-orange, --collect-holo, --collect-glitter) are untouched — they
   stay the rare/holo finish language.
   The Order stage descends back into THE PULL dark room — the reveal
   room where the pack films and the staged drop live — by overriding the
   SAME --create-* tokens under .is-act-ship (the internal order-stage class
   toggled by
   collect_create.js renderActBar), so the whole surface pivots on one
   class. */
.create-shell {
  /* v3 palette defaults (documented data values, C-07) */
  --create-page: #f7f5f2;
  --create-card: #ffffff;
  --create-card-2: #fbfaf8;
  --create-border: #e8e4dd;
  --create-border-2: #d9d4cb;
  --create-ink: #1c1a17;
  --create-ink-2: #4a453d;
  --create-muted: #6b6459;
  --create-faint: #8a8275;
  --create-accent: var(--sm-orange);
  --create-accent-2: color-mix(in srgb, var(--sm-orange) 78%, #3b1b0a);
  --create-accent-soft: color-mix(in srgb, var(--sm-orange) 9%, #ffffff);
  --create-accent-border: color-mix(in srgb, var(--sm-orange) 34%, #ffffff);
  --create-info-ink: #2a4a7a;
  --create-info-bg: #eef4ff;
  --create-ok: #1f8a5b;
  --create-ok-soft: #eef7f1;
  --create-ok-border: #bfe0cd;
  --create-warn: #b4552d;
  --create-dashed: #cfc8bc;

  /* neutral re-scope: every create rule that reads an --sm-* neutral
     resolves into the create palette (and flips with the order-stage class) */
  --sm-page: var(--create-page);
  --sm-page-2: var(--create-card-2);
  --sm-card: var(--create-card);
  --sm-text: var(--create-ink);
  --sm-text-2: var(--create-ink-2);
  --sm-muted: var(--create-muted);
  --sm-text-muted: var(--create-muted);
  --sm-border: var(--create-border);
  --sm-border-2: var(--create-border-2);
  --sm-tip-bg: var(--create-info-bg);
  --sm-tip-border: var(--create-accent-border);
  --sm-focus-border: var(--create-accent);
  --sm-focus-ring: color-mix(in srgb, var(--sm-orange) 18%, transparent);
  --shadow-card: 0 1px 2px rgba(28, 26, 23, .04), 0 8px 24px rgba(28, 26, 23, .06);
  --shadow-lift: 0 14px 30px rgba(28, 26, 23, .12), 0 4px 8px rgba(28, 26, 23, .06);
  --glow-tungsten: 0 1px 2px rgba(28, 26, 23, .05), 0 18px 40px -18px rgba(28, 26, 23, .22);

  background: var(--create-page);
  color: var(--create-ink);
  padding: 0 0 92px;
  transition: background-color .45s ease, color .45s ease;
}
/* Order stage — the reveal room: same tokens, THE PULL dark values. The album
   stage inside keeps its own .album-shell paper re-scope (lit object,
   dark bench); the kraft pack and the films get their tungsten glow back. */
.create-shell.is-act-ship {
  --create-page: #f7f4f1;
  --create-card: #ffffff;
  --create-card-2: #fbfaf8;
  --create-border: #e8e4dd;
  --create-border-2: #d9d4cb;
  --create-ink: #1c1a17;
  --create-ink-2: #4a453d;
  --create-muted: #6b6459;
  --create-faint: #8a8275;
  --create-accent-soft: color-mix(in srgb, var(--sm-orange) 9%, #ffffff);
  --create-accent-border: color-mix(in srgb, var(--sm-orange) 34%, #ffffff);
  --create-info-ink: #2a4a7a;
  --create-info-bg: #eef4ff;
  --create-ok: #1f8a5b;
  --create-ok-soft: #eef7f1;
  --create-ok-border: #bfe0cd;
  --create-warn: #b4552d;
  --create-dashed: #cfc8bc;
  --shadow-card: 0 1px 2px rgba(28, 26, 23, .04);
  --shadow-lift: 0 8px 20px rgba(28, 26, 23, .08);
  --glow-tungsten: 0 12px 40px rgba(28, 26, 23, .12);
}
/* Centered content column of the full-bleed light surface. */
.create-main { max-width: 1200px; margin: 0 auto; padding: 26px 32px 40px; }

/* v3 stepper header: the two stages as a compact numbered rail across the
   top of the wizard card — circles flip to ✓ via collect_create.js
   renderActBar, and the connector line warms once an act completes. */
.create-shell .step-bar {
  display: flex; align-items: flex-start;
  margin: -22px -22px 20px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--create-border);
}
.create-shell .step {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
  color: var(--create-faint);
}
.create-shell .step .n {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--create-card); border: 1px solid var(--create-border-2);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px;
}
.create-shell .step.active { color: var(--create-ink); }
.create-shell .step.active .n { background: var(--create-accent); border-color: var(--create-accent); color: #fff; }
.create-shell .step.done { color: var(--create-ok); }
.create-shell .step.done .n { background: var(--create-ok-soft); border-color: var(--create-ok-border); color: var(--create-ok); }
.create-shell .step .bar {
  flex: 0 0 34px; width: 34px; height: 2px; border-radius: 1px;
  background: var(--create-border); margin-top: 12px;
}
.create-shell .step.done + .bar { background: var(--create-ok-border); }

.create-layout {
  display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 32px;
  align-items: start;
}
.create-card {
  background: var(--create-card);
  border: 1px solid var(--create-border);
  border-radius: 10px;
  padding: 22px;
  transition: background-color .45s ease, border-color .45s ease;
}
.create-card h2, .coach-panel-host h2 { margin: 0 0 4px; font-size: 17px; font-weight: 700; letter-spacing: -.2px; }
.create-card .lede, .coach-panel-host .lede { color: var(--create-muted); margin: 0 0 16px; font-size: 13px; line-height: 1.45; }
.create-card label.field, .coach-dock label.field { display: block; margin-bottom: 14px; }
.create-card label.field .lbl, .coach-dock label.field .lbl { font-size: 12.5px; font-weight: 700; color: var(--create-ink-2); margin-bottom: 6px; display: block; }
.create-card input[type="text"], .create-card textarea, .create-card select,
.coach-dock input[type="text"], .coach-dock textarea, .coach-dock select {
  width: 100%;
  border: 1px solid var(--sm-border-2);
  background: var(--sm-page-2);
  border-radius: 6px;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  outline: none;
}
.create-card input[type="text"]:focus, .create-card textarea:focus, .create-card select:focus,
.coach-dock input[type="text"]:focus, .coach-dock textarea:focus, .coach-dock select:focus {
  border-color: var(--sm-focus-border, var(--sm-blue));
  box-shadow: 0 0 0 3px var(--sm-focus-ring, rgba(22,114,246,.15));
}
.create-card .field-row, .coach-dock .field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.create-template-section { margin: 0 0 20px; }
.create-template-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 10px;
}
.create-template-head .lbl { font-size: 13px; font-weight: 800; color: var(--sm-text); }
.create-template-head span { font-size: 12.5px; color: var(--sm-muted); font-weight: 650; }
.create-template-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.create-template-card {
  position: relative;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 10px 12px;
  width: 100%;
  min-height: 118px;
  padding: 10px;
  border: 1px solid var(--sm-border-2);
  border-radius: 10px;
  background: var(--sm-card);
  color: var(--sm-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.create-template-card:hover {
  border-color: var(--create-faint, rgba(60, 30, 0, .35));
  transform: translateY(-1px);
}
.create-template-card.is-selected {
  border-color: var(--create-accent);
  background: var(--create-accent-soft);
  box-shadow: 0 0 0 3px var(--sm-focus-ring, color-mix(in srgb, var(--sm-orange) 18%, transparent));
}
.template-mini {
  grid-row: 1 / span 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  min-height: 96px;
}
.template-mini-cover,
.template-mini-page {
  border-radius: 6px;
  border: 1px solid rgba(60,30,0,.14);
  overflow: hidden;
}
.template-mini-cover {
  background:
    radial-gradient(circle at 65% 34%, rgba(255,255,255,.40) 0 18%, transparent 19%),
    var(--template-accent, var(--sm-blue));
}
.template-mini--hero .template-mini-cover {
  background:
    linear-gradient(135deg, rgba(0,0,0,.22), transparent 52%),
    radial-gradient(circle at 50% 30%, rgba(255,255,255,.55) 0 20%, transparent 21%),
    var(--template-accent, var(--sm-blue));
}
.template-mini--grid .template-mini-cover,
.template-mini--pattern .template-mini-cover {
  background:
    linear-gradient(90deg, rgba(255,255,255,.22) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.22) 1px, transparent 1px),
    var(--template-accent, var(--sm-blue));
  background-size: 18px 18px, 18px 18px, auto;
}
.template-mini--minimal .template-mini-cover {
  background:
    linear-gradient(180deg, transparent 0 58%, rgba(0,0,0,.18) 58% 100%),
    var(--template-accent, var(--sm-blue));
}
.template-mini-page {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  padding: 8px;
  background: var(--template-paper, var(--sm-page));
}
.template-density--2x2 .template-mini-page { grid-template-columns: repeat(2, 1fr); gap: 5px; padding: 10px; }
.template-density--3x3 .template-mini-page { grid-template-columns: repeat(3, 1fr); gap: 3px; }
.template-density--4x2 .template-mini-page,
.template-density--4x3 .template-mini-page { grid-template-columns: repeat(4, 1fr); gap: 3px; }
.template-density--4x4 .template-mini-page { grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 7px; }
.template-density--5x5 .template-mini-page { grid-template-columns: repeat(5, 1fr); gap: 2px; padding: 7px; }
.template-paper--linen .template-mini-page {
  background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.04) 2px, rgba(0,0,0,.04) 4px);
}
.template-paper--kraft .template-mini-page {
  background-image: repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0,0,0,.04) 2px, rgba(0,0,0,.04) 3px);
}
.template-paper--vellum .template-mini-page {
  background-image: radial-gradient(circle at 50% 0%, rgba(255,255,255,.75), transparent 68%);
}
.template-mini-page span {
  border-radius: 5px;
  background: rgba(60,30,0,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}

/* End-result flip previews: every template card carries a mini demo album
   whose cover and a demo roster page stand in for "the end result". Hover or
   focus flips the book; touch-only devices get a one-shot auto peek so the
   interactivity is discoverable. The overlap template trades the grid for a
   rotated sticker pile, which is the visual proof that overlapping stickers
   are supported. */
.template-flip {
  position: relative;
  grid-template-columns: 1fr;
  perspective: 900px;
  isolation: isolate;
}
.template-flip .template-mini-cover,
.template-flip .template-mini-page {
  grid-area: 1 / 1;
  position: relative;
  backface-visibility: hidden;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.template-flip .template-mini-page {
  transform: rotateY(180deg);
}
.create-template-card:hover .template-flip .template-mini-cover,
.create-template-card:focus-within .template-flip .template-mini-cover { transform: rotateY(-180deg); }
.create-template-card:hover .template-flip .template-mini-page,
.create-template-card:focus-within .template-flip .template-mini-page { transform: rotateY(0); }
.template-flip .template-cover-hero {
  position: absolute;
  left: 26%;
  top: 14%;
  width: 48%;
  filter: drop-shadow(0 3px 4px rgba(60, 25, 0, .3));
  pointer-events: none;
}
.template-flip .template-cover-hero--small {
  left: auto;
  right: 7%;
  top: auto;
  bottom: 8%;
  width: 34%;
}
.template-mini-page span.is-filled {
  background: #fff;
  box-shadow: 0 1px 2px rgba(50, 22, 0, .3);
}
.template-mini-page span img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 1px;
  box-sizing: border-box;
}
.template-puzzle-demo { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 2px; padding: 5px; background: color-mix(in srgb, var(--template-accent, var(--sm-blue)) 8%, #fff); }
.template-puzzle-piece { position: relative; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--template-accent, var(--sm-blue)) 46%, #fff); background: #fff; }
.template-puzzle-piece img { position: absolute; width: 300%; height: 300%; max-width: none; object-fit: cover; padding: 0; }
.template-puzzle-piece small { position: absolute; right: 2px; bottom: 2px; z-index: 2; display: grid; width: 13px; height: 13px; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--template-accent, var(--sm-blue)) 84%, #111); color: #fff; font-size: 7px; font-weight: 900; }
.template-puzzle-piece.is-missing { border-style: dashed; }
.template-puzzle-piece.is-missing img { opacity: .1; filter: grayscale(1); }
.template-puzzle-piece.is-missing small { background: #fff; color: var(--template-accent, var(--sm-blue)); box-shadow: inset 0 0 0 1px currentColor; }
.template-flip-progress {
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  z-index: 6;
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--template-accent, var(--sm-blue)) 78%, #20100a);
  color: #fff;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: .94;
  pointer-events: none;
}
@media (hover: none) {
  .template-flip .template-mini-cover { animation: template-flip-cover-peek 7s ease-in-out 1.4s 1 both; }
  .template-flip .template-mini-page { animation: template-flip-page-peek 7s ease-in-out 1.4s 1 both; }
}
@keyframes template-flip-cover-peek {
  0%, 34% { transform: none; }
  48%, 84% { transform: rotateY(-180deg); }
  100% { transform: none; }
}
@keyframes template-flip-page-peek {
  0%, 34% { transform: rotateY(180deg); }
  48%, 84% { transform: rotateY(0); }
  100% { transform: rotateY(180deg); }
}
@media (prefers-reduced-motion: reduce) {
  .template-flip .template-mini-cover,
  .template-flip .template-mini-page {
    transition: none;
    animation: none;
  }
}
.template-copy { min-width: 0; align-self: end; }
.template-copy strong {
  display: block;
  font-size: 13.5px;
  line-height: 1.15;
}
.template-copy span {
  display: block;
  margin-top: 4px;
  color: var(--sm-muted);
  font-size: 12.5px;
  line-height: 1.35;
}
.template-meta {
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.template-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border-radius: 999px;
  padding: 3px 8px;
  background: var(--sm-page);
  color: var(--sm-brown);
  font-size: 11.5px;
  font-weight: 800;
}
.template-check {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--create-accent);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 2px 6px rgba(76, 38, 21, .18);
}
.create-template-card.is-selected .template-check { display: flex; }
.create-review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.create-review-line {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 0;
  font-size: 14px;
  border-bottom: 1px dashed var(--sm-border);
}
.create-review-line span:first-child { min-width: 0; overflow-wrap: anywhere; }
.create-review-line span:last-child { flex: 0 0 auto; white-space: nowrap; }

/* base form controls (global within collect-root) */
.collect-root input[type="text"], .collect-root input[type="email"], .collect-root input[type="number"], .collect-root input[type="search"],
.collect-root textarea, .collect-root select {
  width: 100%;
  border: 1px solid var(--sm-border-2);
  background: var(--sm-page-2);
  border-radius: 6px;
  padding: 11px 12px;
  font: inherit;
  font-size: 14.5px;
  outline: none;
  color: var(--sm-text);
}
.collect-root input[type="text"]:focus, .collect-root input[type="email"]:focus, .collect-root input[type="number"]:focus, .collect-root input[type="search"]:focus,
.collect-root textarea:focus, .collect-root select:focus {
  border-color: var(--sm-focus-border, var(--sm-blue));
  box-shadow: 0 0 0 3px var(--sm-focus-ring, rgba(22,114,246,.15));
}

/* PlatformKit form primitives emit design-slot wrappers. In Collect pages the
   visible field label is owned by the surrounding .field molecule, so suppress
   generated fallback slots and let the actual native control receive the
   Collect runtime treatment. */
.collect-root [data-component="input"],
.collect-root [data-component="textarea"],
.collect-root [data-component="select"] {
  width: 100%;
  max-width: none !important;
  gap: 0 !important;
}
.collect-root [data-component="input"] [data-design-slot="label"],
.collect-root [data-component="textarea"] [data-design-slot="label"],
.collect-root [data-component="select"] [data-design-slot="label"],
.collect-root [data-component="input"] [data-design-name="Meta"],
.collect-root [data-component="textarea"] [data-design-name="MetaRow"],
.collect-root [data-component="select"] [data-design-name="Meta"] {
  display: none !important;
}
.collect-root [data-component="input"] [data-design-slot="control"],
.collect-root [data-component="textarea"] [data-design-slot="control"],
.collect-root [data-component="select"] [data-design-slot="control"] {
  width: 100%;
}
.collect-root [data-component="input"] input,
.collect-root [data-component="textarea"] textarea,
.collect-root [data-component="select"] select {
  width: 100%;
  border: 1px solid var(--sm-border-2);
  background: var(--sm-page-2);
  border-radius: 6px;
  padding: 11px 12px;
  font: inherit;
  font-size: 14.5px;
  outline: none;
  color: var(--sm-text);
  box-shadow: none;
}
.collect-root [data-component="input"] input:focus,
.collect-root [data-component="textarea"] textarea:focus,
.collect-root [data-component="select"] select:focus {
  border-color: var(--sm-focus-border, var(--sm-blue));
  box-shadow: 0 0 0 3px var(--sm-focus-ring, rgba(22,114,246,.15));
}
.collect-color-swatch[data-component="swatch"] {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 3px solid var(--sm-card);
  box-shadow: 0 0 0 1px var(--sm-border);
}
.collect-color-swatch[data-component="swatch"][aria-pressed="true"] {
  border-color: var(--sm-text);
}
.reveal-row [data-component="input"] {
  flex: 0 0 180px;
  width: 180px;
}
.collect-root select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23767676' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  padding-right: 36px;
}
.collect-root textarea { resize: vertical; min-height: 80px; }
/* v3 stepper-card footer: Back on the left, Continue on the right, bled to
   the card edges on a slightly warmer strip. */
.create-card .actions, .coach-dock .actions {
  display: flex; gap: 10px; align-items: center; justify-content: space-between;
  margin: 22px -22px -22px;
  padding: 13px 20px;
  border-top: 1px solid var(--create-border);
  background: var(--create-card-2);
  border-radius: 0 0 8px 8px;
}
.create-card .left, .coach-dock .left { display: flex; align-items: center; gap: 8px; }
/* v3 button scale inside the create surface: compact, dense, one SM-orange
   action accent. The classes are the shared .btn vocabulary — only the
   scoped presentation changes. */
.create-shell .btn {
  min-height: 44px; padding: 10px 18px;
  font-size: 13.5px; border-radius: 6px;
  background: var(--create-accent);
}
.create-shell .btn:hover { background: var(--create-accent-2); }
.create-shell .btn.orange { background: var(--create-accent); }
.create-shell .btn.orange:hover { background: var(--create-accent-2); }
.create-shell .btn.ghost {
  background: var(--create-card);
  color: var(--create-ink);
  border: 1px solid var(--create-border-2);
}
.create-shell .btn.ghost:hover { background: var(--create-card-2); color: var(--create-ink); }
.create-shell .btn.lg { min-height: 44px; padding: 10px 18px; font-size: 14px; }
.create-shell .btn.sm { min-height: 36px; padding: 6px 14px; font-size: 13px; }
.create-shell .btn:disabled { background: #efece6; color: #a39b8d; opacity: 1; cursor: not-allowed; }
.create-shell .btn.ghost:disabled { background: var(--create-card); color: #a39b8d; border-color: var(--create-border); }
.create-shell.is-act-ship .btn:disabled { background: #2a251d; color: #6d665a; }
.create-shell.is-act-ship .btn.ghost:disabled { background: var(--create-card); color: #6d665a; }
.create-card .actions form[data-collect-create-form], .coach-dock .actions form[data-collect-create-form] {
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.create-card .actions form[data-collect-create-form] .btn, .coach-dock .actions form[data-collect-create-form] .btn {
  white-space: normal;
}

/* preview pane — the big sticky live album (v3's right pane): white card,
   hairline border, 8px radius, kicker-style header. */
.preview-pane {
  /* clears nav + subnav + the sticky drop ribbon */
  position: sticky; top: 166px;
  background: var(--sm-card);
  border-radius: 8px;
  border: 1px solid var(--sm-border);
  padding: 22px 24px;
  box-shadow: var(--shadow-card);
  transition: background-color .45s ease, border-color .45s ease;
}
.preview-pane .pp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.preview-pane .pp-head h4 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--sm-muted); font-weight: 700; margin: 0; }
.preview-pane .album-cover-preview {
  min-height: 320px;
  position: relative;
}
.preview-pane .album-cover-preview .book-closed-cover {
  display: flex;
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 360px;
  min-height: 320px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: default;
  align-items: stretch;
  justify-content: stretch;
}
.preview-pane .album-cover-preview .bcc-card {
  min-height: 320px;
  transform: translateY(-1px) rotateY(-2deg);
}
.preview-pane .album-cover-preview .bcc-title {
  font-size: 32px;
}
.preview-pane .album-cover-preview .bcc-hint {
  display: none;
}
.preview-pane .album-page-density-preview {
  margin-top: 16px;
}
.preview-pane .preview-book-page {
  background:
    radial-gradient(circle at 0 0, rgba(0,0,0,.035), transparent 60%),
    var(--album-paper, var(--template-paper, var(--sm-page)));
  border: 1px solid #e0d9c8;
  border-radius: 10px;
  padding: 16px;
  box-shadow: inset 10px 0 18px -20px rgba(60,30,0,.45);
}
.preview-pane .preview-book-page .album-grid {
  gap: 10px;
}
.preview-pane .preview-book-page .album-grid--2x2 { grid-template-columns: repeat(4, 1fr); }
.preview-pane .preview-book-page .album-grid--3x3 { grid-template-columns: repeat(3, 1fr); }
.preview-pane .preview-book-page .album-grid--4x4 { grid-template-columns: repeat(2, 1fr); }
.preview-pane .preview-book-page .album-grid--5x5 { grid-template-columns: repeat(2, 1fr); gap: 14px; }
.preview-pane .preview-book-page .slot .lock-hint,
.preview-pane .preview-book-page .slot .slot-name {
  display: none;
}
.preview-pane .preview-book-page .slot .num-tag {
  font-size: 9px;
  padding: 2px 6px;
}
.preview-pane .preview-book-page .silhouette-card {
  width: 62%;
  height: 62%;
  border-radius: 22%;
  background: rgba(60,30,0,.24);
  box-shadow: inset 0 0 0 2px rgba(60,30,0,.14), 0 8px 18px rgba(60,30,0,.08);
  transform: rotate(var(--rot));
  position: relative;
}
.preview-pane .preview-book-page .silhouette-card-frame {
  position: absolute;
  inset: 15%;
  border-radius: 20%;
  border: 2px solid rgba(255,255,255,.42);
}
.preview-pane .preview-book-page .silhouette-card-mark {
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 24%;
  height: 7%;
  border-radius: 999px;
  background: rgba(255,255,255,.38);
}

/* create-flow live album preview (P1 preview spine). The pane chrome stays in
   THE PULL dark theme (--sm-card surface under --shadow-card); the album
   stage inside carries .album-shell so the token re-scope keeps the album
   interior paper-light (dark ink on cream), and the tungsten glow puts the
   object in the light — dark bench, lit object. */
.preview-pane.album-preview {
  background: var(--sm-card);
  border-color: var(--sm-border);
  box-shadow: var(--shadow-card);
}
.preview-pane.album-preview .pp-head span {
  font-size: 12px;
  color: var(--sm-muted);
  font-weight: 700;
}
.preview-pane.album-preview .album-preview-stage {
  padding: 18px;
  max-width: none;
  margin: 0;
  border-radius: 8px;
  border: 1px solid var(--create-border, transparent);
  /* resolves through the .album-shell re-scope to the lit cream paper */
  background: var(--sm-page);
  box-shadow: var(--glow-tungsten);
}
.preview-pane.album-preview .album-preview-page-label {
  margin: 16px 0 8px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--sm-muted);
}
.preview-pane.album-preview .album-page-density-preview { margin-top: 0; }
.preview-pane.album-preview .album-preview-help {
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--sm-muted);
  font-weight: 600;
  line-height: 1.5;
}
.preview-pane.album-preview .album-preview-help b { color: var(--sm-text); }

/* ---- packet designer (create-flow P3b) ----
   Preview-pane tabs (Album | Pack) plus the pack composition: a kraft
   envelope in the --sm-art-brown family, sitting in the same tungsten
   stage light as the album. Everything below is class/data-attribute
   driven so collect_create.js live-updates without a round trip. */
.preview-tabs { display: flex; gap: 6px; }
.preview-tab {
  border: 1px solid var(--sm-border-2);
  background: transparent;
  color: var(--sm-muted);
  font: inherit; font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
  padding: 4px 12px; border-radius: 999px; cursor: pointer;
}
.preview-tab:hover, .preview-tab:focus-visible { color: var(--sm-text); }
.preview-tab.is-active { background: var(--sm-text); color: var(--sm-card); border-color: var(--sm-text); }

.pack-preview-stage {
  padding: 24px 18px;
  border-radius: 8px;
  border: 1px solid var(--create-border, transparent);
  background: var(--sm-page);
  box-shadow: var(--glow-tungsten);
}
.pack-preview {
  display: flex; gap: 18px; align-items: flex-start; justify-content: center; flex-wrap: wrap;
  /* Cream ink on kraft. Resolves through the overlay's --sm-paper swatch
     when present; the raw hex is a documented cream fallback matching
     collect.design.swatch.cream (same convention as documentedDefaultPaper
     in features/create/ui/view.go). */
  --pack-paper: var(--sm-paper, #f7f3e8);
}
.pack-face-wrap { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.pack-face-label {
  font-size: 11.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: var(--sm-muted);
}
.pack-face {
  position: relative;
  width: 168px; height: 232px;
  border-radius: 10px;
  background: linear-gradient(160deg, var(--sm-art-brown-3), var(--sm-art-brown-2) 55%, var(--sm-art-brown));
  border: 1px solid var(--sm-art-brown-4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 10px 24px rgba(0, 0, 0, .35);
  overflow: hidden;
}
/* Tear strip: non-negotiable (it IS the product); only the finish varies
   via data-pack-tear-style on .pack-preview. */
.pack-tear { position: absolute; top: 14px; left: 0; right: 0; height: 14px; display: flex; align-items: center; padding: 0 10px; }
.pack-tear-line { display: block; width: 100%; border-top: 2px dashed rgba(255, 255, 255, .55); }
.pack-preview[data-pack-tear-style="serrated"] .pack-tear-line { border-top-style: dotted; border-top-width: 3px; }
.pack-preview[data-pack-tear-style="clean"] .pack-tear-line { border-top-style: solid; border-top-width: 1px; opacity: .7; }
.pack-title {
  margin-top: 46px; padding: 0 14px;
  font-weight: 900; font-size: 16px; line-height: 1.2;
  color: var(--pack-paper); text-align: center;
  overflow-wrap: break-word;
}
.pack-series {
  margin-top: 4px; text-align: center;
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--pack-accent, var(--sm-orange));
}
/* Peek-out row: the film's three-sticker pull above the tear line. */
.pack-peek { position: absolute; bottom: 34px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; }
.pack-peek-thumb {
  width: 40px; height: 48px;
  border-radius: 6px 6px 2px 2px;
  background: var(--sm-page-2);
  border: 1px solid var(--sm-border-2);
  overflow: hidden;
  transform: translateY(6px) rotate(-3deg);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .3);
}
.pack-peek-thumb:nth-child(2) { transform: translateY(10px); }
.pack-peek-thumb:nth-child(3) { transform: translateY(6px) rotate(3deg); }
.pack-peek-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pack-preview[data-pack-front-layout="minimal"] .pack-peek { display: none; }
.pack-preview[data-pack-front-layout="art-forward"] .pack-peek-thumb { width: 48px; height: 58px; }
.pack-odds-slip {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  white-space: nowrap;
  font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--sm-art-brown-4);
  background: var(--pack-paper);
  border-radius: 999px; padding: 2px 8px;
}
.pack-odds-slip.is-off { display: none; }
.pack-back { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; text-align: center; }
.pack-back-text { font-size: 13px; font-weight: 700; color: var(--pack-paper); line-height: 1.4; overflow-wrap: break-word; max-width: 100%; }
.pack-maker-line { font-size: 11px; font-weight: 650; color: var(--pack-paper); opacity: .75; }
.pack-qr { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pack-qr-box {
  width: 44px; height: 44px; border-radius: 6px;
  border: 2px dashed rgba(255, 255, 255, .5);
  background: rgba(255, 255, 255, .08);
  display: block;
}
.pack-qr-label {
  font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--pack-paper); opacity: .8;
}

/* Pack step controls — v3 chips: bordered, dark ink fill when selected. */
.pack-layout-row { display: flex; gap: 8px; flex-wrap: wrap; }
.pack-layout-card, .pack-tear-card {
  border: 1px solid var(--create-border-2, var(--sm-border-2));
  background: var(--create-card, var(--sm-page-2));
  color: var(--create-ink, var(--sm-text));
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 8px 14px; border-radius: 6px; cursor: pointer;
}
.pack-layout-card:hover, .pack-tear-card:hover { border-color: var(--create-ink, var(--sm-text)); }
.pack-layout-card.is-selected, .pack-tear-card.is-selected {
  background: var(--create-ink, var(--sm-text));
  border-color: var(--create-ink, var(--sm-text));
  color: var(--create-card, var(--sm-page-2));
  font-weight: 700;
}
.pack-per-hint { margin: -6px 0 16px; font-size: 12.5px; color: var(--sm-muted); font-weight: 600; }
.pack-odds-toggle { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 14px; font-weight: 700; cursor: pointer; }
.pack-art-grid { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.pack-art-empty { font-size: 13px; color: var(--sm-muted); font-weight: 600; }
.pack-art-option {
  width: 64px; height: 64px;
  border: 2px solid var(--sm-border-2);
  border-radius: 8px;
  background: var(--sm-page-2);
  padding: 4px; cursor: pointer;
}
.pack-art-option img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pack-art-option.is-selected { border-color: var(--sm-orange); }
.create-cart-unavailable {
  margin-top: 10px; padding: 10px 12px;
  border-radius: 8px;
  background: var(--sm-tip-bg);
  border: 1px solid var(--sm-tip-border);
  font-size: 13px; color: var(--sm-muted); font-weight: 600;
}

/* upload box */
.upload-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 10px;
}
.upload-mode-note {
  color: var(--sm-muted);
  font-size: 12px;
  font-weight: 700;
  text-align: right;
}
.upload-cell {
  aspect-ratio: 1 / 1;
  border: 1.5px dashed var(--create-dashed, var(--sm-border-2));
  background: var(--create-card-2, var(--sm-page));
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  position: relative;
  color: var(--create-faint, var(--sm-muted));
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  font-family: inherit;
  transition: border-color .15s ease, background-color .15s ease;
}
.upload-cell.add:hover {
  border-color: var(--create-accent, var(--sm-orange));
  background: var(--create-accent-soft, var(--sm-page));
}
.upload-cell.has {
  border: 1px solid var(--create-border, var(--sm-border));
  background: var(--create-card, #fff);
}
.upload-cell .n-tag {
  position: absolute; top: 4px; left: 4px;
  background: var(--create-ink, var(--sm-brown)); color: var(--create-card, #fff);
  font-size: 9.5px; font-weight: 800;
  padding: 2px 5px; border-radius: 4px; letter-spacing: .02em;
}
.upload-cell svg.mini-art { width: 70%; height: 70%; }
.upload-cell.add { color: var(--sm-muted); }
.upload-cell.add .plus { font-size: 22px; line-height: 1; margin-bottom: 4px; }

.design-slot { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.design-slot .upload-cell { width: 100%; }

/* toast */
.toast-zone {
  position: fixed; right: 24px; bottom: 24px; z-index: 1000;
  display: flex; flex-direction: column; gap: 10px;
}
.toast {
  background: var(--sm-brown);
  color: #fff;
  padding: 12px 16px 12px 14px;
  border-radius: 10px;
  font-size: 14px; font-weight: 600;
  display: flex; align-items: center; gap: 10px;
  box-shadow: var(--shadow-lift);
  animation: toast-in .3s ease;
  min-width: 280px;
}
.toast .ic {
  width: 26px; height: 26px; border-radius: 6px;
  background: var(--sm-green); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 15px;
}
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* sparkles for claim */
.sparkle {
  position: absolute; pointer-events: none; z-index: 6;
  animation: sparkle-pop .8s ease forwards;
}
@keyframes sparkle-pop {
  0% { transform: translate(0,0) scale(0); opacity: 1; }
  60% { opacity: 1; }
  100% { transform: translate(var(--tx, 0), var(--ty, 0)) scale(1); opacity: 0; }
}

/* responsive */
@media (max-width: 1080px) {
  .collect-hero .hero-grid { grid-template-columns: 1fr; }
  .collect-hero .stack { height: 220px; }
  .collections-grid { grid-template-columns: repeat(2, 1fr); }
  .sticker-detail { grid-template-columns: 1fr; gap: 28px; }
  .create-layout { grid-template-columns: 1fr; }
  .preview-pane { position: static; }
  .album-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 720px) {
  .create-card .actions, .coach-dock .actions {
    flex-wrap: wrap;
  }
  .create-card .actions form[data-collect-create-form], .coach-dock .actions form[data-collect-create-form] {
    width: 100%;
  }
  .create-card .actions form[data-collect-create-form] .btn, .coach-dock .actions form[data-collect-create-form] .btn {
    flex: 1 1 180px;
  }
  .create-template-grid {
    grid-template-columns: 1fr;
  }
  .create-card .field-row,
  .create-review-grid {
    grid-template-columns: 1fr;
  }
  .create-review-line {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .create-shell .step-bar {
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .create-shell .step-bar::-webkit-scrollbar { display: none; }
  .create-shell .step { flex: 0 0 auto; }
  .create-shell .step .bar { width: 32px; }
  .collect-subnav {
    top: 52px;
    height: 58px;
    padding: 8px 16px;
    gap: 12px;
  }
  .collect-subnav .tabs {
    gap: 12px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .collect-subnav .tabs::-webkit-scrollbar { display: none; }
  .collect-hero {
    padding: 24px 16px 0;
    text-align: center;
  }
  .collect-hero .hero-grid {
    display: block;
  }
  .collect-hero .eyebrow {
    font-size: 10.5px;
    padding: 4px 10px;
    margin: 0 auto;
  }
  .collect-hero h1 {
    font-size: 35px;
    line-height: 1.08;
    margin: 12px auto 10px;
    max-width: 340px;
  }
  .collect-hero p {
    font-size: 14.5px;
    line-height: 1.35;
    max-width: 340px;
    margin: 0 auto 16px;
  }
  .collect-hero .cta-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 0 auto 18px;
    max-width: 340px;
  }
  .collect-hero .cta-row .btn {
    width: 100%;
  }
  .collect-hero .cta-row .meta {
    margin: 0;
    font-size: 12.5px;
    text-align: center;
  }
  .collect-hero .stack {
    height: 190px;
    margin: 0 auto;
    max-width: 340px;
  }
  .sm-category-rail {
    padding: 24px 12px 24px;
  }
  .sm-category-wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px 0;
    padding: 0;
  }
  .sm-category {
    min-height: 128px;
    padding: 8px 6px;
  }
  .sm-category-art {
    max-width: 96px;
  }
  .sm-category-art .collect-wordmark {
    gap: 4px;
  }
  .sm-category-art .collect-wordmark.is-stickify {
    font-size: 18px;
  }
  .sm-category-art .collect-wordmark.is-stickify .collect-wordmark-text {
    -webkit-text-stroke-width: 4px;
  }
  .sm-category-art .collect-wordmark.is-ride {
    font-size: 20px;
  }
  .sm-category-art .collect-wordmark.is-ride::after {
    width: 10px;
    margin-left: 0;
  }
  .sm-category-art .collect-wordmark.is-popup {
    gap: 6px;
  }
  .sm-category-label { font-size: 14px; }
  .wrap,
  .collections-section,
  .album-shell,
  .create-shell,
  .sticker-detail {
    padding-left: 16px;
    padding-right: 16px;
  }
  .collections-section {
    padding-top: 24px;
  }
  .collections-section .section-head {
    gap: 12px;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .collections-section .section-head h2 {
    font-size: 20px;
    line-height: 1.15;
  }
  .collections-section .section-head > div:last-child {
    display: flex;
    gap: 8px;
    align-items: center;
    flex: 1 1 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .album-toolbar {
    width: 100%;
    flex-wrap: wrap;
    gap: 10px;
  }
  .album-sort-tabs {
    flex: 1 1 100%;
    gap: 18px;
  }
  .album-toolbar .btn {
    width: 100%;
  }
  .collections-grid { grid-template-columns: 1fr; }
  .album-grid { grid-template-columns: repeat(3, 1fr); }
  .album-head { grid-template-columns: 1fr; }
  .reveal-row { flex-wrap: wrap; }
  .book-cover .cover-title { font-size: 28px; }
}

@media (max-width: 720px) {
  .sticker-detail-pager {
    justify-content: center;
    padding: 18px 16px 0;
  }
  .sticker-marketplace-detail {
    gap: 24px;
    padding-top: 16px;
    padding-bottom: 42px;
  }
  .sticker-marketplace-detail .sticker-stage .corner-num,
  .sticker-marketplace-detail .sticker-stage .rarity {
    top: 12px;
  }
  .sticker-marketplace-detail .sticker-stage .corner-num { left: 12px; }
  .sticker-marketplace-detail .sticker-stage .rarity { right: 12px; }
  .sticker-marketplace-detail .sticker-stage .big-stk {
    width: 68%;
    height: 70%;
  }
  .sticker-marketplace-detail .sticker-stage-status {
    right: 12px;
    bottom: 12px;
    left: 12px;
  }
  .sticker-marketplace-quantity {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .sticker-marketplace-quantity-label {
    padding-bottom: 0;
  }
  .sticker-marketplace-purchase .cart-add-form {
    grid-template-columns: 88px minmax(0, 1fr);
  }
  .sticker-marketplace-related {
    padding: 0 16px 52px;
  }
  .sticker-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 12px;
  }
}

/* ============================================================
   Brand Studio (owner-only, in-place editing)
   ============================================================ */

/* "Edit" affordance in the album head */
.studio-toggle {
  display: inline-flex; align-items: center; gap: 7px; align-self: start;
  border: 1px solid var(--sm-border-2); background: var(--sm-card); color: var(--sm-text);
  border-radius: 999px; padding: 8px 16px; font-weight: 800; font-size: 13.5px;
  cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.studio-toggle:hover { background: var(--sm-page); border-color: var(--sm-brown); }
.studio-toggle-glyph { font-size: 14px; }
.album-shell.is-editing .studio-toggle { display: none; }
.album-viewer-actions .studio-toggle {
  align-self: auto;
  border-color: var(--sm-brown);
  border-radius: 7px;
  background: var(--sm-brown);
  color: #fff;
}
.album-viewer-actions .studio-toggle:hover {
  border-color: var(--sm-brown-2);
  background: var(--sm-brown-2);
}
.album-shell.is-editing .album-viewer-focus { display: none; }
/* in studio/edit mode the owner bar replaces the public reveal/claim bar */
.album-shell.is-editing .reveal-row { display: none !important; }

/* inline editable text — only interactive in edit mode */
.editable { border-radius: 6px; outline: none; transition: background .12s, box-shadow .12s; word-break: break-word; }
.album-shell.is-editing .editable { cursor: text; box-shadow: inset 0 -2px 0 rgba(140,79,255,.35); background: rgba(140,79,255,.05); }
.album-shell.is-editing .editable:hover { background: rgba(140,79,255,.12); }
.album-shell.is-editing .editable:focus { background: rgba(140,79,255,.14); box-shadow: inset 0 0 0 2px var(--sm-purple); }
.album-shell.is-editing .editable:empty::before { content: attr(data-ph); opacity: .4; }

/* sticker name: hidden in view mode, shown as inline editor in edit mode */
.slot .slot-name { display: none; }
.album-shell.is-editing .slot .slot-name {
  display: block; margin-top: 6px; text-align: center;
  font-weight: 700; font-size: 12.5px; color: var(--sm-brown);
}
.editable-name { display: inline-block; min-width: 40px; max-width: 100%; padding: 1px 4px; }

/* selection ring on the tapped sticker */
.album-shell.is-editing [data-collect-sticker] { cursor: pointer; }
.album-shell.is-editing [data-collect-sticker].selected {
  outline: 3px solid var(--sm-purple); outline-offset: 3px; border-radius: 12px;
}
.album-shell.is-editing [data-studio-interactive]:focus-visible {
  outline: 3px solid var(--sm-orange);
  outline-offset: 4px;
  border-radius: 12px;
}
.album-shell.is-editing .slot.empty {
  background: rgba(255,255,255,.62);
  border-style: solid;
  border-color: rgba(140,79,255,.28);
}
.album-shell.is-editing .slot.empty .silhouette,
.album-shell.is-editing .slot.empty .lock-hint {
  display: none !important;
}
.album-shell.is-editing .slot.empty .sticker-mount {
  width: 88%; height: 88%;
  display: flex !important; align-items: center; justify-content: center;
  opacity: 1;
  transition: transform .25s cubic-bezier(.34,1.5,.5,1);
}
.album-shell.is-editing .slot.empty .sticker-mount svg {
  width: 100%; height: 100%;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.20)) drop-shadow(0 1px 2px rgba(0,0,0,.12));
}
.album-shell.is-editing .slot.empty.rare .sticker-art-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.95) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 68% 32%, rgba(255,220,120,.9) 0 1px, transparent 2px),
    radial-gradient(circle at 42% 76%, rgba(255,255,255,.85) 0 1.2px, transparent 2.2px);
  background-size: 28px 28px, 22px 22px, 34px 34px;
  mix-blend-mode: screen;
  opacity: .72;
}
.album-shell.is-editing .slot.empty.chase .sticker-art-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(from 210deg,
    rgba(255,91,154,.55), rgba(255,212,0,.52), rgba(30,166,85,.48),
    rgba(22,114,246,.55), rgba(140,79,255,.52), rgba(255,91,154,.55));
  mix-blend-mode: screen;
  opacity: .62;
  animation: holo-shift 4s linear infinite;
}

/* warning toast variant for failed saves */
.toast.warn .ic { background: var(--sm-orange-2); }

@media (prefers-reduced-motion: reduce) {
  .studio-edit-bar, .studio-modal-panel, .sticker-properties-panel { transition: none; }
}

/* ============================================================
   Clean Studio layout 2026 (command bar + proper modal + sticker panel)
   Modal is a real dialog (backdrop, role, aria-modal, high z from design scale)
   ============================================================ */

.studio-edit-bar {
  display: none;
  align-items: center; justify-content: space-between; gap: 10px;
  position: sticky; top: 8px; z-index: 1180;
  width: min(1180px, calc(100% - 64px));
  padding: 7px 10px; margin: 8px auto 16px;
  background: var(--sm-page); border: 1px solid var(--sm-border); border-radius: 999px;
  box-shadow: 0 10px 30px -22px rgba(60,30,0,.45);
  font-size: 13px;
}
.album-shell.is-editing .studio-edit-bar {
  display: flex;
  position: relative;
  top: auto;
  z-index: 1300;
  margin: 0 0 18px;
  width: 100%;
  max-width: none;
  /* Match reveal-row for visual coherence */
  background: var(--sm-brown);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px 16px;
  align-items: center;
  gap: 10px;
  overflow: visible;
}
.album-shell.is-editing .album-page { overflow: visible; }

/* ── Primary actions group (Edit Pages · Theme · More) ───────────── */
.seb-primary {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.seb-primary form { display: inline-flex; }
/* All buttons in the edit bar get compact icon+label treatment */
.album-shell.is-editing .studio-edit-bar button,
.album-shell.is-editing .studio-edit-bar a[data-component="button"] {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px;
  border-radius: 7px;
  font-size: 13px; font-weight: 700;
  padding: 8px 13px;
  cursor: pointer; border: none;
  transition: background .12s, opacity .12s;
}
/* Edit Pages — white filled, prominent */
.album-shell.is-editing .studio-edit-bar [data-studio-edit-pages] {
  background: var(--sm-card); color: var(--sm-text);
}
.album-shell.is-editing .studio-edit-bar [data-studio-edit-pages]:hover {
  opacity: .92;
}
/* Theme — ghost on dark */
.album-shell.is-editing .studio-edit-bar [data-studio-open-theme] {
  background: rgba(255,255,255,.14); color: #fff;
  border: 1px solid rgba(255,255,255,.18);
}
.album-shell.is-editing .studio-edit-bar [data-studio-open-theme]:hover {
  background: rgba(255,255,255,.22);
}
.album-shell.is-editing .studio-edit-bar .seb-carve-btn {
  background: rgba(255,255,255,.14);
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
}
.album-shell.is-editing .studio-edit-bar .seb-carve-btn:hover {
  background: rgba(255,255,255,.22);
}

/* ── Overflow "More" dropdown ─────────────────────────────────────── */
.seb-overflow { position: relative; }
.seb-more-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 7px;
  background: rgba(255,255,255,.14); color: #fff;
  border: 1px solid rgba(255,255,255,.18); cursor: pointer;
  transition: background .12s;
}
.seb-more-toggle:hover { background: rgba(255,255,255,.22); }
.seb-more-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 1500;
  min-width: 180px;
  background: var(--sm-page); color: var(--sm-text);
  border: 1px solid var(--sm-border); border-radius: 8px;
  box-shadow: 0 12px 32px rgba(60,30,0,.18);
  padding: 4px; margin: 0; list-style: none;
}
.seb-more-menu[hidden] { display: none; }
.seb-more-menu li { list-style: none; }
.seb-more-menu form { display: flex; }
.seb-more-menu button,
.seb-more-menu .btn-ghost,
.seb-more-menu [data-component="button"] {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: left;
  background: transparent; color: var(--sm-text);
  border-radius: 6px; padding: 8px 10px;
  font-size: 13px; font-weight: 600;
  border: none; cursor: pointer;
}
.seb-more-menu button:hover,
.seb-more-menu .btn-ghost:hover {
  background: var(--sm-border);
}
.seb-more-menu .seb-package-state {
  margin: 2px 6px 4px;
  padding: 7px 4px 9px;
  border-bottom: 1px solid var(--sm-border);
  color: var(--sm-muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .02em;
}
/* Add-stickers count input inside dropdown */
.seb-more-menu .seb-add-count {
  width: 42px; text-align: center;
  border: 1px solid var(--sm-border); border-radius: 5px;
  padding: 4px 2px; font-size: 13px;
  margin-right: 4px;
}

/* ── Hint — compact annotation, hidden by default ────────────────── */
.seb-hint {
  font-size: 12.5px; color: rgba(255,255,255,.65);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 200px;
}
.seb-hint[hidden] { display: none; }

/* ── Exit group (Done button) ─────────────────────────────────────── */
.seb-exit { display: flex; align-items: center; }
.album-shell.is-editing .studio-edit-bar [data-collect-edit-done] {
  background: var(--sm-orange); color: #fff;
}
.album-shell.is-editing .studio-edit-bar [data-collect-edit-done]:hover {
  filter: brightness(0.94);
}

/* ── Focus rings for keyboard nav ─────────────────────────────────── */
.album-shell.is-editing .studio-edit-bar button:focus-visible,
.album-shell.is-editing .studio-edit-bar a:focus-visible {
  outline: 2px solid #fff; outline-offset: 2px;
}

.studio-modal { position: fixed; inset: 0; z-index: 1400; }
.studio-modal-backdrop { position: absolute; inset: 0; padding: 0; border: 0; background: rgba(0,0,0,.42); cursor: pointer; }
.studio-modal-panel {
  position: absolute; left: 50%; top: 5vh; transform: translateX(-50%);
  width: min(94vw, 640px); max-height: 88vh; overflow: hidden;
  background: var(--sm-card); border: 1px solid var(--sm-border); border-radius: 16px;
  box-shadow: 0 28px 70px -18px rgba(0,0,0,.32);
  display: flex; flex-direction: column;
}
.studio-modal-header { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--sm-border-2); background:var(--sm-page); }
.studio-modal-title { margin:0; font-size:15px; font-weight:800; }
.studio-modal-close { width:44px; height:44px; font-size:20px; line-height:1; border:0; background:transparent; cursor:pointer; color:var(--sm-muted); }
.studio-modal-body { flex:1; overflow:auto; padding:14px 16px; }
.studio-modal-footer { display:flex; gap:10px; justify-content:flex-end; padding:10px 16px; border-top:1px solid var(--sm-border-2); background:var(--sm-page); }

.sd-section { margin-bottom:12px; }
.sd-section-title { font: 700 11px/1.1 var(--sm-sans); text-transform:uppercase; letter-spacing:.06em; color:var(--sm-brown); margin-bottom:4px; }
.sd-input { width:100%; border:1px solid var(--sm-border-2); border-radius:8px; padding:6px 9px; font-size:13px; background: var(--sm-page-2); }
.sd-swatch-row { display:flex; gap:5px; margin-bottom:3px; }
.sd-swatch { width:22px;height:22px;border-radius:999px;border:2px solid var(--sm-border-2);cursor:pointer; }
.sd-swatch.on { border-color:var(--sm-orange); }
.sd-toggle { display:inline-flex; align-items:center; gap:7px; font-size:13px; cursor:pointer; }
.sd-toggle input { position:absolute; opacity:0; }
.sd-toggle-slider { width:28px; height:15px; background:var(--sm-border-2); border-radius:999px; position:relative; display:inline-block; }
.sd-toggle-slider:after { content:""; position:absolute; width:11px;height:11px;background:#fff;border-radius:50%; top:2px;left:2px; transition:.2s; }
.sd-toggle input:checked + .sd-toggle-slider { background:var(--sm-orange); }
.sd-toggle input:checked + .sd-toggle-slider:after { left:15px; }

/* Sticker inspector: docked beside the book instead of chasing the selected
   sticker around the viewport. It remains visible in management mode so the
   selection gesture and rarity controls are discoverable. */
.sticker-properties-panel {
  position: sticky;
  top: 16px;
  z-index: 40;
  display: none;
  width: 100%;
  max-height: calc(100dvh - 40px);
  overflow: auto;
  padding: 16px;
  border: 1px solid var(--sm-border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--sm-card) 94%, var(--sm-cream) 6%);
  box-shadow: 0 16px 38px -28px rgba(60,30,0,.42);
  font-size: 13px;
}
.album-shell.is-editing .sticker-properties-panel { display: block; }
.sp-head { display:flex; align-items:center; justify-content:space-between; }
.sp-heading-copy { min-width: 0; }
.sp-eyebrow {
  color: var(--sm-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.sp-id { margin-top: 2px; font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; }
.sp-close {
  width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--sm-border-2); border-radius:8px; background: var(--sm-card);
  font-size:15px; cursor:pointer; line-height:1;
}
.sticker-properties-panel:not(.has-selection) .sp-close { visibility: hidden; }
.sp-empty {
  display: grid;
  gap: 5px;
  margin-top: 14px;
  padding: 18px 14px;
  border: 1px dashed var(--sm-border-2);
  border-radius: 9px;
  background: var(--sm-page);
}
.sp-empty strong { color: var(--sm-text); font-size: 14px; }
.sp-empty p { margin: 0; color: var(--sm-muted); font-size: 12.5px; line-height: 1.45; text-wrap: pretty; }
.sp-selection[hidden],
.sp-empty[hidden] { display: none !important; }
.sp-meta {
  margin: 10px 0 2px;
  overflow: hidden;
  color: var(--sm-text-2);
  font-size: 12.5px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sp-field { margin-top:10px; }
.sp-label { margin-bottom:5px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--sm-muted); }
.sp-input {
  width:100%; min-height:44px; border:1px solid var(--sm-border-2);
  border-radius:8px; background: var(--sm-page-2); color:var(--sm-text); padding:0 10px;
  font:700 13px/1.2 var(--sm-sans);
}
.sp-seg {
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px;
}
.sp-seg-btn {
  min-height:44px; border:1px solid var(--sm-border-2); border-radius:8px;
  background: var(--sm-card); color:var(--sm-text); padding:6px 8px;
  font:800 12px/1.1 var(--sm-sans); text-align:center; cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, color .16s ease, transform .12s ease;
}
.sp-seg-btn:hover { border-color: var(--sm-brown); background: var(--sm-page); }
.sp-seg-btn:active { transform: translateY(1px) scale(.98); }
.sp-seg-btn:focus-visible { outline: 2px solid var(--sm-orange); outline-offset: 2px; }
.sp-seg-btn.on {
  background:var(--sm-brown); border-color:var(--sm-brown); color:#fff;
}
.sp-help { margin: 9px 0 0; color: var(--sm-muted); font-size: 11.5px; line-height: 1.45; }
.sp-full-form { margin-top:8px; }
.sp-full-btn { width:100%; min-height:44px; border:0; border-radius:8px; background:var(--sm-brown); color:#fff; font-weight:800; font-size:12.5px; }
.sp-full-btn:disabled { opacity:.5; cursor:not-allowed; }
.sticker-properties-panel[aria-busy="true"] .sp-selection { opacity: .72; }

.album-delete-dialog {
  width: min(92vw, 460px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--sm-text);
  box-shadow: 0 28px 80px -22px rgba(42,20,10,.52);
  overscroll-behavior: contain;
}
.album-delete-dialog::backdrop { background: rgba(35,23,15,.48); backdrop-filter: blur(3px); }
.album-delete-dialog-panel { padding: 24px; border-radius: 14px; background: var(--sm-card); }
.album-delete-dialog-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 16px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--sm-card) 86%, var(--sm-red) 14%);
  color: var(--sm-red);
}
.album-delete-dialog h2 { margin: 0; font-size: 24px; line-height: 1.1; letter-spacing: -.025em; }
.album-delete-dialog p { margin: 10px 0 0; color: var(--sm-text-2); line-height: 1.5; }
.album-delete-dialog .album-delete-dialog-note { color: var(--sm-muted); font-size: 12.5px; }
.album-delete-dialog-error {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--sm-card) 88%, var(--sm-red) 12%);
  color: var(--sm-red);
  font-size: 12.5px;
  font-weight: 700;
}
.album-delete-dialog-error[hidden] { display: none; }
.album-delete-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }
.album-delete-draft-confirm {
  border-color: var(--sm-red) !important;
  background: var(--sm-red) !important;
  color: #fff !important;
}
.album-delete-draft-confirm:hover:not(:disabled) { filter: brightness(.93); }

@media (max-width: 1080px) {
  .album-shell.is-editing .album-workspace { grid-template-columns: minmax(0, 1fr); }
  .album-shell.is-editing .sticker-properties-panel {
    position: relative;
    top: auto;
    max-height: none;
    box-shadow: 0 16px 38px -28px rgba(60,30,0,.42);
  }
}

@media (max-width: 760px) {
  .album-head { gap: 18px; }
  .album-head-stats { padding-top: 0; }
  .album-head .stats { justify-content: flex-start; gap: 20px; }
  .album-page { padding: 20px 18px 24px; }
  .album-viewer-bar { grid-template-columns: minmax(0, 1fr); padding-left: 12px; }
  .album-viewer-heading { align-items: flex-start; flex-direction: column-reverse; gap: 7px; }
  .album-viewer-actions { justify-content: flex-start; }
  .album-delete-draft-note { justify-self: start; }
  .album-page.is-focus-view { width: calc(100vw - 16px); padding: 18px 14px 28px; border-radius: 10px; }
  .album-delete-dialog-actions { flex-direction: column-reverse; }
  .album-delete-dialog-actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .studio-modal-panel, .sticker-properties-panel,
  .book.js-ready .nav-arrow { transition: none; }
}

/* ============================================================
   Closed book — start state + opening animation
   ============================================================ */

/* JS reveals the closed-cover affordance only after .js-ready is on. */
.book.js-ready.is-closed .book-controls { display: none; }
/* Keep the spread occupying the same grid cell while closed. The cover also
   remains in grid flow, so its real imported aspect ratio establishes the
   stage height while the deferred spread is empty. This removes the old
   420px desktop / 52px mobile reservation mismatch that let the cover escape
   the stage and overlap the reveal bar. */
.book.js-ready.is-closed .book-spread { visibility: hidden; }
/* The closed cover overlays the reserved spread, capped to one-page width and
   centered over the spine. It sizes from the imported page ratio instead of
   stretching to the hidden open-spread height, which avoids SVG letterboxing
   on PDF-imported covers. */
.book.js-ready.is-closed .book-closed-cover,
.book:not(.js-ready) .book-closed-cover {
  display: flex; position: relative; top: auto; right: auto; bottom: auto; left: auto;
  align-self: center; justify-self: center;
  margin: 0 auto;
  width: 100%; max-width: 460px; min-height: 0; height: auto;
  aspect-ratio: var(--album-page-aspect, 2000 / 2160);
  translate: none;
  z-index: 30;
}

/* First paint (before the controller adds .js-ready) shows the closed cover
   over the reserved spread, so the very first frame is the closed book — no
   flash of the stacked source that then gets replaced. The min-height matches
   the js-ready spread so the stage reserves its full height up front and the
   page does not stretch vertically the moment the controller mounts. */
.book:not(.js-ready) .book-spread {
  visibility: hidden; display: flex; min-height: 420px;
}

/* A reader on a short desktop must fit the physical page before the fold.
   Width-only sizing made both the closed cover and opened spread taller than
   the available viewport in the live app and embedded Storybook canvas.
   These equivalent width formulas preserve the page ratio while reserving
   the fixed album header/chrome above it; the grid contract above still owns
   containment for unusual imported page ratios. */
@media (min-width: 861px) and (max-height: 920px) {
  [data-collect-album-page] > .book {
    width: 100%;
    max-width: clamp(640px, calc(185.2vh - 692px), 1042px);
    max-width: clamp(640px, calc(185.2dvh - 692px), 1042px);
    margin-inline: auto;
  }
  [data-collect-album-page] > .book.js-ready .book-spread,
  [data-collect-album-page] > .book:not(.js-ready) .book-spread {
    min-height: 0;
  }
  [data-collect-album-page] > .book.js-ready.is-closed .book-closed-cover,
  [data-collect-album-page] > .book:not(.js-ready) .book-closed-cover {
    max-width: clamp(320px, calc(92.6vh - 346px), 460px);
    max-width: clamp(320px, calc(92.6dvh - 346px), 460px);
  }
}

.book .book-closed-cover {
  display: none;
  position: relative;
  margin: 8px auto 0;
  width: 100%; max-width: 460px; min-height: 420px;
  padding: 0;
  border: 0; background: transparent; cursor: pointer;
  transform-origin: left center;
  /* The cover swings to rotateY(-165deg) on open; hide its back so we never
     see the front's text mirrored through the page as it turns edge-on. */
  backface-visibility: hidden;
  align-items: stretch; justify-content: stretch;
}
.book.js-ready .book-closed-cover:focus-visible { outline: 3px solid var(--sm-orange); outline-offset: 4px; border-radius: 14px; }
.book-closed-cover .bcc-card {
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center;
  color: #fff;
  border-radius: 4px 14px 14px 4px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.15),
    0 28px 50px -20px rgba(0,0,0,.55),
    0 12px 22px -12px rgba(0,0,0,.45);
  transform: translateY(-2px) rotateY(-2deg);
  transition: transform .25s ease;
  container-type: inline-size;
}
.book-closed-cover .bcc-open-cue {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 12;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 32px);
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 7px;
  background: rgba(20,16,12,.78);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 8px 22px -12px rgba(0,0,0,.72);
  backdrop-filter: blur(8px);
  transition: transform .18s ease, background-color .18s ease;
}
@media (hover: hover) {
  .book.js-ready .book-closed-cover:hover .bcc-open-cue {
    transform: translateX(2px);
    background: rgba(20,16,12,.9);
  }
}
[dir="rtl"] .book-closed-cover .bcc-open-cue { right: auto; left: 16px; }
[dir="rtl"] .book .book-closed-cover {
  transform-origin: right center;
}
[dir="rtl"] .book-closed-cover .bcc-card {
  border-radius: 14px 4px 4px 14px;
  transform: translateY(-2px) rotateY(2deg);
}
/* Design-document covers draw their spine as a named SVG layer instead of
   the DOM .bcc-spine used by legacy covers. Reflect only that symmetric layer
   across the SVG view box so the binding moves right without mirroring text
   or artwork. */
[dir="rtl"] .book-closed-cover .album-doc-svg [data-design-layer="cover-spine"] {
  transform-box: view-box;
  transform-origin: center;
  transform: scaleX(-1);
}

.book-closed-cover .bcc-reference-panel {
  position: absolute; inset: 7%; z-index: 4; min-width: 0;
  padding: 12% 9% 9% 12%; overflow: visible;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
  background: var(--sm-cover-ink);
  color: var(--sm-paper); text-align: left; font-family: var(--sm-font-sans);
}
.book-closed-cover .bcc-reference-panel::before {
  content: ""; position: absolute; inset: 0 auto 0 4%; width: 1px;
  background: color-mix(in srgb, var(--sm-paper) 24%, transparent);
}
.book.js-ready .book-closed-cover:hover .bcc-card { transform: translateY(-4px) rotateY(-4deg); }
.book.js-ready .book-closed-cover:active .bcc-card { transform: translateY(0) rotateY(-1deg); }
[dir="rtl"] .book.js-ready .book-closed-cover:hover .bcc-card { transform: translateY(-4px) rotateY(4deg); }
[dir="rtl"] .book.js-ready .book-closed-cover:active .bcc-card { transform: translateY(0) rotateY(1deg); }

.book-closed-cover .bcc-brand {
  max-width: 100%; margin-top: 3cqw; overflow: hidden;
  font-size: clamp(10px, 3.5cqw, 16px); font-weight: 800; text-transform: uppercase;
  letter-spacing: .12em; opacity: .68; text-overflow: ellipsis; white-space: nowrap;
}
.book-closed-cover .bcc-title {
  max-width: 92%; margin: 3cqw 0 0;
  font-size: clamp(24px, 10cqw, 54px); font-weight: 700; letter-spacing: -.035em; line-height: 1.02;
  text-wrap: balance;
}
.book-closed-cover .bcc-series {
  max-width: 100%; overflow: hidden;
  font-family: var(--sm-font-sans); font-size: clamp(10px, 3.5cqw, 16px); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap;
}
.book-closed-cover .bcc-hint {
  margin-top: 5cqw;
  font-size: clamp(9px, 2.8cqw, 13px); font-weight: 700;
  color: color-mix(in srgb, var(--sm-paper) 72%, transparent);
}
.book-closed-cover .bcc-count {
  position: absolute; right: -8%; bottom: -8%; min-height: 28px; padding: 5px 10px;
  display: inline-flex; align-items: center;
  border: 1px solid var(--sm-border); border-radius: 0;
  background: var(--sm-card); color: var(--sm-ink);
  font-size: clamp(10px, 3cqw, 14px); font-weight: 800; white-space: nowrap;
}

/* Opening animation: the cover swings over the spine while the spread
   beneath fades in. The .is-opening class drives a one-shot rotateY. */
.book.js-ready.is-closed.is-opening .book-spread { display: flex; visibility: visible; opacity: 0; animation: spread-reveal .6s ease .2s both; }
.book.js-ready.is-closed.is-opening .book-closed-cover { animation: cover-swing .7s cubic-bezier(.4,.05,.2,1) both; transform-origin: left center; }
.book.js-ready.is-closed.is-opening .book-closed-cover .bcc-card { animation: none; transform: none; }
[dir="rtl"] .book.js-ready.is-closed.is-opening .book-closed-cover {
  animation-name: cover-swing-rtl;
  transform-origin: right center;
}

@keyframes cover-swing {
  from { transform: rotateY(0); opacity: 1; }
  60%  { opacity: 1; }
  to   { transform: rotateY(-165deg); opacity: 0; }
}
@keyframes cover-swing-rtl {
  from { transform: rotateY(0); opacity: 1; }
  60%  { opacity: 1; }
  to   { transform: rotateY(165deg); opacity: 0; }
}
@keyframes spread-reveal { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .book.js-ready.is-closed.is-opening .book-spread,
  .book.js-ready.is-closed.is-opening .book-closed-cover { animation: none; }
}

/* ============================================================
   Default silhouettes — derive from the sticker's own image/art
   ============================================================ */
.slot.empty .silhouette-derived {
  width: 70%; height: 70%; object-fit: contain;
  display: flex; align-items: center; justify-content: center;
  opacity: .55;
  filter: grayscale(1) brightness(.35) contrast(1.4);
  transform: rotate(var(--rot));
  pointer-events: none;
}
.slot.empty .silhouette-derived.silhouette-art svg { width: 100%; height: 100%; display: block; }

/* ============================================================
   Album design config — dynamic style overrides from DesignConfig
   Applied via CSS classes on .album-shell by the server.
   ============================================================ */

/* Paper texture overlays. .preview-book-page joins each list so the
   create-flow live preview page renders the exact texture the shipped
   album's .book-page uses (same rule, no duplicated values). */
.paper--grain .album-page,
.paper--grain .preview-book-page,
.paper--grain .book-page { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E"); background-repeat: repeat; background-blend-mode: overlay; }
.paper--linen .album-page,
.paper--linen .preview-book-page,
.paper--linen .book-page { background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.02) 2px, rgba(0,0,0,.02) 4px); }
.paper--smooth .album-page,
.paper--smooth .preview-book-page,
.paper--smooth .book-page { background-image: none; }
.paper--kraft .album-page,
.paper--kraft .preview-book-page,
.paper--kraft .book-page { background-image: repeating-linear-gradient(90deg, transparent, transparent 1px, rgba(0,0,0,.015) 1px, rgba(0,0,0,.015) 2px); }
.paper--vellum .album-page,
.paper--vellum .preview-book-page,
.paper--vellum .book-page { background-image: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.6) 0%, transparent 60%); }

/* Font family overrides for headings, body, and chapter titles */
.heading--mulish h1,
.heading--mulish .bcc-title { font-family: 'Mulish', system-ui, sans-serif; }
.heading--caveat h1,
.heading--caveat .bcc-title { font-family: 'Caveat', cursive; }
.heading--inter h1,
.heading--inter .bcc-title { font-family: 'Inter', system-ui, sans-serif; }
.heading--playfair-display h1,
.heading--playfair-display .bcc-title { font-family: 'Playfair Display', Georgia, serif; }
.heading--dm-sans h1,
.heading--dm-sans .bcc-title { font-family: 'DM Sans', system-ui, sans-serif; }
.body--mulish .album-page,
.body--mulish .book-page { font-family: 'Mulish', system-ui, sans-serif; }
.body--inter .album-page,
.body--inter .book-page { font-family: 'Inter', system-ui, sans-serif; }
.chapter--caveat .chapter-header h2 { font-family: 'Caveat', cursive; }
.chapter--playfair-display .chapter-header h2 { font-family: 'Playfair Display', Georgia, serif; }

/* Watermark on empty slots */
.watermark-enabled .slot.empty::after {
  content: ''; position: absolute; inset: 0;
  background: var(--brand-watermark, none);
  background-repeat: space; background-size: 48px 48px;
  opacity: var(--brand-watermark-opacity, 0.06);
  pointer-events: none;
}

/* Border decorations */
.border--simple .book-page { border: 1px solid var(--sm-border-2); }
.border--double .book-page { border: 3px double var(--sm-border-2); }
.border--ornate .book-page { border: 1px solid var(--sm-border-2); box-shadow: inset 0 0 0 4px var(--sm-page), inset 0 0 0 5px var(--sm-border-2); }
.border--corner-only .book-page { border: 0; }
.border--corner-only .book-page::before,
.border--corner-only .book-page::after { content: '✧'; position: absolute; font-size: 18px; color: var(--sm-brown); opacity: .3; }
.border--corner-only .book-page::before { top: 8px; left: 12px; }
.border--corner-only .book-page::after { bottom: 8px; right: 12px; }

/* Corner treatment */
.corners--rounded .book-page { border-radius: 12px; overflow: hidden; }
.corners--straight .book-page { border-radius: 0; }

/* Page numbers */
.page-numbers--on .book-foot .book-pageno { opacity: 1; }

/* ===========================================================================
   Album design config — rev-3 additions (backs every DefaultCatalog value;
   enforced by internal/albumdesign css_contract_test.go). Token-driven only,
   no literal hex, so per-tenant brand-tokens.css retheming still applies.
   =========================================================================== */

/* CSS-var bindings: paperColor -> --album-paper, coverAccentColor -> --album-accent.
   Defaults here; ApplyServer sets per-album inline overrides on .album-shell. */
.album-shell { --album-paper: var(--sm-cream); --album-accent: var(--sm-orange); }
.album-shell .album-page,
.album-shell .book-page { background-color: var(--album-paper); }
.album-shell .cover-series,
.album-shell .num-tag { color: var(--album-accent); }

/* Generic font families (the module's neutral fallback fonts; brand fonts like
   Mulish/Caveat are supplied + styled by the client overlay). */
.heading--system-ui h1, .heading--system-ui .bcc-title { font-family: system-ui, sans-serif; }
.heading--serif h1, .heading--serif .bcc-title { font-family: Georgia, "Times New Roman", serif; }
.heading--sans-serif h1, .heading--sans-serif .bcc-title { font-family: system-ui, Arial, sans-serif; }
.heading--monospace h1, .heading--monospace .bcc-title { font-family: ui-monospace, "JetBrains Mono", monospace; }
.body--system-ui .album-page, .body--system-ui .book-page { font-family: system-ui, sans-serif; }
.body--serif .album-page, .body--serif .book-page { font-family: Georgia, "Times New Roman", serif; }
.body--sans-serif .album-page, .body--sans-serif .book-page { font-family: system-ui, Arial, sans-serif; }
.body--monospace .album-page, .body--monospace .book-page { font-family: ui-monospace, "JetBrains Mono", monospace; }
.chapter--system-ui .chapter-header h2 { font-family: system-ui, sans-serif; }
.chapter--serif .chapter-header h2 { font-family: Georgia, "Times New Roman", serif; }
.chapter--sans-serif .chapter-header h2 { font-family: system-ui, Arial, sans-serif; }
.chapter--monospace .chapter-header h2 { font-family: ui-monospace, "JetBrains Mono", monospace; }

/* Paper / border no-op options (completeness). */
.paper--none .album-page, .paper--none .preview-book-page, .paper--none .book-page { background-image: none; }
.border--none .album-page, .border--none .book-page { border: none; }

/* Slot scale — object-fit of sticker art within its slot (class on .album-shell). */
.album-slot-scale--contain .slot .sticker-art-frame img { object-fit: contain; }
.album-slot-scale--cover .slot .sticker-art-frame img { object-fit: cover; }
.album-slot-scale--fill .slot .sticker-art-frame img { object-fit: fill; }

/* Slot shape — album-wide default frame shape for slots without a per-sticker
   shape (per-sticker .sticker-shape-* still wins by later/equal specificity). */
.album-slot-shape--die-cut .slot .sticker-art-frame { border-radius: 0; }
.album-slot-shape--circle .slot .sticker-art-frame { border-radius: 50%; }
.album-slot-shape--rounded .slot .sticker-art-frame { border-radius: 18%; }
.album-slot-shape--hexagon .slot .sticker-art-frame { clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); }

/* Historical cover-layout values remain valid persisted tokens, but authored
   cover documents own their composition. The shared isolation rule keeps the
   compatibility classes backed without rearranging or hiding cover artwork. */
.cover--cluster,
.cover--grid,
.cover--hero,
.cover--minimal,
.cover--pattern { isolation: isolate; }

/* Chapter ornament — decoration under a chapter header (class on .album-section-head). */
.chapter-ornament--none::after { content: none; }
.chapter-ornament--divider::after { content: ""; display: block; height: 1px; background: var(--sm-border); margin-top: 6px; }
.chapter-ornament--flourish::after { content: "\2766"; display: block; text-align: center; color: var(--sm-muted); }
.chapter-ornament--dots::after { content: "\2022 \2022 \2022"; display: block; text-align: center; color: var(--sm-muted); letter-spacing: .3em; }

/* Store-accepted values not in the generic default catalog, backed for legacy /
   client-catalog robustness (enforced by css_contract_test against store enums). */
.album-grid--4x2 { grid-template-columns: repeat(4, 1fr); }
.album-grid--4x3 { grid-template-columns: repeat(4, 1fr); }
.album-slot-shape--rectangle .slot .sticker-art-frame { border-radius: 7%; }
.album-slot-shape--octagon .slot .sticker-art-frame { clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); }
/* Complete font-role coverage: every offered font is usable in all three roles
   (heading/body/chapter) so no font+role combination is a dead token. Guarded
   by TestFontRolesAreConsistentlyStyled. */
.body--caveat .album-page, .body--caveat .book-page { font-family: 'Caveat', cursive; }
.body--playfair-display .album-page, .body--playfair-display .book-page { font-family: 'Playfair Display', Georgia, serif; }
.body--dm-sans .album-page, .body--dm-sans .book-page { font-family: 'DM Sans', system-ui, sans-serif; }
.chapter--mulish .chapter-header h2 { font-family: 'Mulish', system-ui, sans-serif; }
.chapter--inter .chapter-header h2 { font-family: 'Inter', system-ui, sans-serif; }
.chapter--dm-sans .chapter-header h2 { font-family: 'DM Sans', system-ui, sans-serif; }

/* Doc-canonical album pages: content pages are rendered from the same design.v1
   document as the editor/print path, then paged by the existing book controller
   via data-book-page. */
.album-doc-page {
  position: relative;
  container-type: inline-size;
  aspect-ratio: var(--album-page-aspect, 2000 / 2160);
  overflow: hidden;
  background: var(--album-paper, var(--sm-cream));
}
.album-doc-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.album-doc-page .adl {
  position: absolute;
  transform-origin: center;
}
.album-doc-page .adl-text {
  white-space: pre-wrap;
  line-height: 1.05;
}
.album-doc-page .adl-image .sticker-art-frame,
.album-doc-page .adl-sticker .sticker-art-frame {
  width: 100%;
  height: 100%;
}
.album-doc-page .adl-num {
  position: absolute;
  top: 4cqw;
  left: 4cqw;
  font-size: 3cqw;
  font-weight: 700;
  opacity: .55;
}
.album-doc-page .adl-slot {
  border: .4cqw dashed rgba(0, 0, 0, .18);
  border-radius: 8cqw;
}
.album-doc-page .adl-sticker.is-unclaimed {
  opacity: .26;
  filter: grayscale(1);
}
.album-doc-page .adl-sticker.is-catalog {
  opacity: 1;
  filter: none;
}
.album-doc-page .adl-sticker.is-claimed {
  opacity: 1;
}
/* Rarity foil on the canonical album doc.
   The .slot.claimed.rare/.chase rules earlier in this file dress a render path
   this book does not produce: album_doc.go emits SVG groups classed
   adl-svg-sticker, and ::after overlays and mix-blend-mode do not apply to an
   SVG <g>. The foil hook was therefore emitted and styled nowhere, so Special
   and Legendary drew exactly like Common in the shipped album and in the
   creation canvas — the creator could not see which artwork was the chase card.
   drop-shadow is the SVG-safe equivalent. It stays on the two tiers that are
   exceptions; Common carries no treatment so an ordinary page stays clean.
   Palette matches .slot.claimed.chase so both paths tell one story. */
.album-doc-page .adl-svg-sticker.rare {
  filter:
    drop-shadow(0 0 .5cqw rgba(22, 114, 246, .55))
    drop-shadow(0 0 1.4cqw rgba(22, 114, 246, .3));
}
.album-doc-page .adl-svg-sticker.chase {
  filter:
    drop-shadow(0 0 .5cqw rgba(255, 91, 154, .55))
    drop-shadow(0 0 1.1cqw rgba(255, 212, 0, .45))
    drop-shadow(0 0 1.8cqw rgba(140, 79, 255, .42));
}
.album-doc-page .album-doc-edit-sticker-preview {
  display: none;
}
.album-shell.is-editing .album-doc-page .album-doc-edit-sticker-preview {
  display: inline;
}
.album-shell.is-editing .album-doc-page .adl-sticker.is-unclaimed {
  opacity: 1;
  filter: none;
}
.album-doc-page .album-doc-sticker-link {
  cursor: pointer;
  outline: none;
}
.album-doc-page .album-doc-sticker-link [data-collect-sticker] {
  transition: filter .16s ease, opacity .16s ease;
}
.album-doc-page .album-doc-sticker-link:hover [data-collect-sticker],
.album-doc-page .album-doc-sticker-link:focus-visible [data-collect-sticker] {
  filter:
    drop-shadow(0 0 .6cqw color-mix(in srgb, var(--sm-orange) 64%, transparent))
    drop-shadow(0 .8cqw 1.4cqw rgba(60, 30, 0, .18));
}
.album-shell.is-editing .album-doc-page .album-doc-sticker-link:hover [data-collect-sticker],
.album-shell.is-editing .album-doc-page .album-doc-sticker-link:focus-visible [data-collect-sticker] {
  filter: none;
}
.album-doc-page [data-collect-preview-slot] {
  cursor: pointer;
  outline: none;
}
.album-doc-page [data-collect-preview-slot].is-busy {
  opacity: .45;
  pointer-events: none;
  animation: slot-busy-pulse 1.1s ease-in-out infinite;
}
.album-doc-page [data-collect-preview-slot]:focus-visible [data-design-empty-slot],
.album-doc-page [data-collect-preview-slot]:hover [data-design-empty-slot] {
  stroke: var(--create-accent, var(--sm-orange));
  stroke-opacity: .78;
  fill-opacity: .1;
}
.book-pages > .album-doc-page,
.book-side .album-doc-page,
.leaf-face .album-doc-page {
  width: 100%;
  height: 100%;
}

.collect-final-cta {
  text-align: center;
  padding: 72px var(--sm-content-pad) 84px;
  background: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(197,157,108,.14), transparent 70%), var(--sm-page);
}
.collect-final-cta h2 { font-size: 30px; font-weight: 900; margin: 0 0 10px; color: var(--sm-text); }
.collect-final-cta p { font-size: 15px; color: var(--sm-muted); margin: 0 0 24px; }
.collect-final-cta .cta-row { display: flex; gap: 12px; justify-content: center; }
@media (max-width: 720px) {
  .collect-final-cta { padding: 56px 16px 64px; }
  .collect-final-cta h2 { font-size: 26px; line-height: 1.08; }
  .collect-final-cta .cta-row {
    display: grid;
    grid-template-columns: 1fr;
    max-width: 340px;
    margin: 0 auto;
  }
  .collect-final-cta .cta-row .btn { width: 100%; }
}

/* ---------- create flow: UX v2.2 shell (stages + ribbon + dream moment) ---------- */
/* Persistent drop ribbon — sticky within the create page, visible in all
   two-stage flow: [Draft chip] [counts] [odds] [from $]. */
.create-ribbon {
  position: sticky;
  /* clears the sticky tenant nav (46px) + collect subnav (56px) */
  top: 110px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 18px;
  padding: 10px 14px;
  background: var(--create-card);
  border: 1px solid var(--create-border);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--create-muted);
  box-shadow: 0 6px 18px rgba(28, 26, 23, .04);
  transition: background-color .45s ease, border-color .45s ease;
}
.create-ribbon .ribbon-chip {
  background: var(--sm-page-2);
  border: 1px solid var(--sm-border-2);
  color: var(--sm-text);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.create-ribbon .ribbon-sep { opacity: .5; }
/* Stage bar reuses the .step-bar/.step vocabulary (make it / order it); the
   v3 stepper-header presentation lives on .create-shell .step-bar above. */

/* Make it dream moment: one huge question, a small brand field. */
.dream-title-field { margin: 0 0 12px; }
.dream-title-field input {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.4px;
  padding: 14px 16px;
}
.dream-brand-field { margin: 0 0 18px; max-width: 320px; }

/* Dream-shot world picker: full-bleed photo grid, 2 columns on desktop
   (8 shots = 2x4), single column on mobile. */
.dream-pick {
  font-size: 13px;
  font-weight: 800;
  color: var(--sm-text);
  margin: 0 0 10px;
}
.dream-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 16px;
}
.dream-shot {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--sm-border-2);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: var(--sm-card);
  aspect-ratio: 4 / 3;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.dream-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dream-shot:hover { transform: translateY(-1px); border-color: var(--create-faint, rgba(60, 30, 0, .35)); }
.dream-shot.is-selected {
  border-color: var(--sm-focus-border, var(--sm-blue));
  box-shadow: 0 0 0 3px var(--sm-focus-ring, rgba(22, 114, 246, .14));
}
.dream-shot .dream-shot-label {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  pointer-events: none;
}
/* Live title chip over the album-cover area (center of every framed shot,
   ~40% width) — backdrop blur keeps it readable on any photograph. */
.dream-shot .dream-title-overlay {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 40%;
  text-align: center;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .26);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .55);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
  pointer-events: none;
}

/* Disclosures keep production knobs and chapter metadata out of the happy
   path while preserving them for brands who need them. */
.create-more,
.create-fold {
  margin: 0 0 18px;
  border: 1px solid var(--create-border);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--create-card-2);
}
.create-fold { margin: 16px 0 0; }
.create-more > summary,
.create-fold > summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--create-ink);
}
.create-more[open] > summary,
.create-fold[open] > summary { margin-bottom: 14px; }
.create-fold .lede { margin-bottom: 12px; }

@media (max-width: 760px) {
  .dream-grid { grid-template-columns: 1fr; }
  .create-ribbon { gap: 8px; font-size: 12.5px; }
  .dream-title-field input { font-size: 19px; padding: 12px 14px; }
  .create-main { padding: 18px 16px 32px; }
  .create-shell .step { font-size: 10.5px; }
  .create-shell .step .bar { flex-basis: 18px; width: 18px; }
}

/* ---------- create flow: make-stage canvas + order-stage controls + a11y ---------- */
/* Make stage — the album is the interface. With the v3 composition (compact
   420px stepper card left, big sticky album right) the canvas is already
   the primary surface in both stages, so the stage class only deepens the
   stage padding and arms the slot cursors. */
.design-slot.is-linked .upload-cell { border-color: var(--create-accent, var(--sm-orange)); }

/* Chapter header on the open page (mirrors the first Sections row; the
   form stays the source of truth). */
.album-preview-chapter {
  margin: 0 0 10px;
  font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--sm-brown);
}

.tier-popover {
  position: absolute;
  z-index: 90;
  display: flex; align-items: center; gap: 4px;
  padding: 8px;
  background: var(--sm-card);
  border: 1px solid var(--sm-border-2);
  border-radius: 8px;
  box-shadow: var(--shadow-lift);
}
/* SM trust block under the cart lines. */
.drop-trust {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  margin-top: 14px;
  font-size: 13px; font-weight: 700; color: var(--sm-muted);
}
.drop-trust .trust-item { display: inline-flex; align-items: baseline; gap: 6px; }
.drop-trust .trust-item::before {
  content: "✓";
  color: var(--sm-green);
  font-weight: 900;
}

/* A11y: visible accent focus rings on every create-flow picker button
   (dream shots, template cards, pack pickers, upload cells) — the single
   restrained action color; --sm-orange stays the rare/holo finish accent. */
.dream-shot:focus-visible,
.create-template-card:focus-visible,
.pack-layout-card:focus-visible,
.pack-tear-card:focus-visible,
.upload-cell:focus-visible,
.slot-popover .slot-popover-action:focus-visible {
  outline: 2px solid var(--create-accent, var(--sm-orange));
  outline-offset: 2px;
}

/* Reduced motion: create-flow preview transitions and finish/sparkle
   animations settle to their static end states. */
@media (prefers-reduced-motion: reduce) {
  .dream-shot { transition: none; }
  .dream-shot:hover { transform: none; }
  /* The light-workshop → reveal-room stage pivot lands instantly. */
  .create-shell,
  .create-card,
  .create-ribbon,
  .preview-pane,
  .upload-cell { transition: none; }
  .create-shell .preview-tab,
  .create-shell .create-template-card { transition: none; }
  .create-shell .sparkle,
  .create-shell .slot.claimed.chase::after,
  .create-shell .slot.empty.chase::after,
  .create-shell .sticker-art-frame::after { animation: none; }
}

/* ---------- create flow: object-first living draft book ----------
   The create preview's page panel is now a real book driven by the SAME
   .book/.book-stage/.leaf engine (and collect_book.js controller) the
   shipped album uses. These are pane-scoped size adjustments only — the
   turn mechanics, spread, dots, and page number all come from the shared
   engine rules above. */
.create-book { margin-top: 0; }
.create-book:not(.js-ready) .book-spread { min-height: 280px; }
.create-book:not(.js-ready) .book-closed-cover {
  max-width: 340px;
  min-height: 280px;
}
.create-book.js-ready .book-spread { min-height: 280px; }
.create-book.js-ready .book-side { padding: 14px 12px 20px; }
.create-book.js-ready .book-controls {
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  gap: 8px;
  margin-top: 12px;
}
.create-book.js-ready .nav-arrow {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
}
.create-book.js-ready .book-foot { margin-top: 0; }
.create-book .book-page .album-preview-chapter { margin: 0 0 8px; }
/* Engine-missing degrade: show the stacked page source so the canvas (and
   its slot contracts) never disappears. */
.create-book.book-fallback .book-pages { display: block; }
.create-book.book-fallback .book-page { margin-bottom: 22px; }

/* Draft-tier shimmer: holo/glitter finishes keyed off the production
   data-material attribute, using the existing holo/glitter tokens. Motion
   only for users who accept it. */
@media (prefers-reduced-motion: no-preference) {
  .create-book .slot[data-material="holographic"]::before {
    content: "";
    position: absolute;
    inset: 5%;
    border-radius: 16%;
    background: var(--collect-holo);
    mix-blend-mode: screen;
    opacity: .26;
    pointer-events: none;
    z-index: 3;
    animation: holo-shift 5s linear infinite;
  }
  .create-book .slot[data-material="glitter"]::before {
    content: "";
    position: absolute;
    inset: 5%;
    border-radius: 16%;
    background:
      radial-gradient(circle at 24% 28%, rgba(255,255,255,.95) 0 1px, transparent 1.8px) 0 0/7px 7px,
      radial-gradient(circle at 70% 64%, rgba(255,255,255,.8) 0 1px, transparent 1.6px) 0 0/9px 9px,
      var(--collect-glitter);
    mix-blend-mode: screen;
    opacity: .3;
    pointer-events: none;
    z-index: 3;
    animation: draft-sparkle 2.6s steps(2, jump-none) infinite;
  }
  @keyframes draft-sparkle {
    50% { background-position: 3px 2px, -4px 3px, 0 0; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .create-book .slot.new { animation: none; }
}

/* Run-math narrative (honest physical truth) on the review step. */
.create-run-math {
  margin: 14px 0 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--create-page);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--create-ink-2);
  line-height: 1.5;
}
.create-run-math .run-math-odds { color: var(--create-faint); }
.create-run-math .run-math-odds:empty { display: none; }

/* ---- drag-and-drop upload targets (lever 5) ---- */
/* Counter-managed by collect_create.js wireDropTarget; the ring signals a
   valid file drop without shifting layout. */
[data-collect-upload-grid].is-dragover,
[data-collect-album-preview].is-dragover {
  outline: 2px dashed var(--create-accent, var(--sm-orange));
  outline-offset: 4px;
  border-radius: 8px;
}

/* ---- ambient product clips (pack cinema) ---- */
.pack-cinema {
  margin: 14px 0 18px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--sm-border);
  background: #000;
}
.pack-cinema-video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.pack-cinema-caption {
  padding: 8px 12px;
  font-size: 12.5px;
  color: var(--sm-muted);
  background: var(--sm-card);
  border-top: 1px solid var(--sm-border);
}
/* SM reassurance line under the step heading (free setup / proof approval). */
.create-reassurance { margin: 2px 0 10px; font-size: 12.5px; font-weight: 600; color: var(--create-muted); }
/* "Use a previous design": the actor's own upload library under the drop
   tile (art-tray thumb visual language, library- prefixed classes). */
.library-row { margin-top: 10px; }
.library-thumbs { display: flex; gap: 10px; align-items: center; overflow-x: auto; padding: 4px 2px 8px; min-width: 0; }
.library-thumb { position: relative; flex: 0 0 auto; width: 54px; height: 54px; padding: 5px; border: 1px solid var(--create-border-2); border-radius: 8px; background: var(--create-card); cursor: pointer; }
.library-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.library-thumb:hover { border-color: var(--create-accent, var(--sm-orange)); }
.library-thumb:focus-visible { outline: 2px solid var(--create-accent, var(--sm-orange)); outline-offset: 2px; }
.upload-grid--headless { display: none; }

/* ---- pack finishes + run chips (v3 chip language) ---- */
.finish-row { display: flex; gap: 8px; flex-wrap: wrap; }
.finish-row--preset-sync { display: none; }
.finish-chip, .run-chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--create-border-2); background: var(--create-card); color: var(--create-ink); border-radius: 4px; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.finish-chip.is-selected, .run-chip.is-selected { border: 1.5px solid var(--create-ink); background: var(--create-ink); color: var(--create-card); }
/* Honest run presentation (SM grammar): each chip stacks its label over the
   computed all-in total + flat per-sticker unit. No save-percent badges exist
   by design - unit pricing is flat, fake discounts are forbidden. */
.run-chip { flex-direction: column; align-items: flex-start; gap: 2px; }
.run-chip .run-chip-label { line-height: 1.2; }
.run-chip .run-chip-total { font-size: 11.5px; font-weight: 600; opacity: .85; }
.finish-chip-swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .15); }
.finish-chip--kraft .finish-chip-swatch { background: #b9977a; }
.finish-chip--foil .finish-chip-swatch { background: linear-gradient(100deg, #d8b4e2, #a8d8ea, #f9d5bb); }
.finish-chip--midnight .finish-chip-swatch { background: #17140d; }
.finish-chip--brand .finish-chip-swatch { background: var(--album-accent, var(--create-accent, var(--sm-orange))); }

/* pack preview re-skins */
.pack-preview-stage.pack-finish--kraft { --pack-face: #b9977a; }
.pack-preview-stage.pack-finish--foil { --pack-face: #cfc3e8; }
.pack-preview-stage.pack-finish--midnight { --pack-face: #17140d; }
.pack-preview-stage.pack-finish--brand { --pack-face: var(--album-accent, var(--create-accent, var(--sm-orange))); }

/* ---- distribution preview ---- */
.dist-icon {
  position: relative;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  margin-top: 1px;
  background: var(--create-card-2);
  border: 1px solid var(--create-border-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}
.dist-icon::before,
.dist-icon::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}
.dist-icon--shipments::before {
  left: 7px;
  top: 7px;
  width: 14px;
  height: 13px;
  border: 2px solid var(--create-accent);
  border-radius: 2px;
}
.dist-icon--shipments::after {
  left: 9px;
  top: 7px;
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--create-accent);
  border-bottom: 2px solid var(--create-accent);
  transform: skewY(-28deg);
}
.dist-icon--kiosks::before {
  left: 6px;
  top: 8px;
  width: 16px;
  height: 13px;
  border: 2px solid var(--create-accent);
  border-top: 5px solid var(--create-accent);
  border-radius: 2px;
}
.dist-icon--kiosks::after {
  left: 9px;
  top: 15px;
  width: 10px;
  height: 2px;
  background: var(--create-accent);
  box-shadow: 0 4px 0 var(--create-accent);
}
.dist-icon--direct::before {
  left: 6px;
  top: 9px;
  width: 14px;
  height: 9px;
  border: 2px solid var(--create-accent);
  border-radius: 2px;
}
.dist-icon--direct::after {
  left: 18px;
  top: 12px;
  width: 5px;
  height: 6px;
  border: 2px solid var(--create-accent);
  border-left: 0;
  border-radius: 0 2px 2px 0;
  box-shadow: -9px 7px 0 -3px var(--create-accent), 1px 7px 0 -3px var(--create-accent);
}

.distribution-preview-stage {
  min-height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: clamp(22px, 4vw, 44px);
  border-radius: 8px;
  border: 1px solid var(--create-border, transparent);
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.70), transparent 34%),
    var(--sm-page);
  box-shadow: var(--glow-tungsten);
}
.distribution-preview-stage > * {
  width: min(100%, 920px);
  margin-inline: auto;
}
.distribution-preview-kicker {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .10em;
  color: var(--create-accent);
}
.distribution-preview-stage h3 {
  margin: 0;
  font-size: clamp(22px, 2.3vw, 34px);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--sm-text);
}
.distribution-preview-grid {
  display: grid;
  gap: 10px;
  max-width: none;
}
.distribution-preview-card {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: start;
  padding: 13px 14px;
  border: 1px solid var(--create-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--sm-card) 82%, transparent);
  color: var(--sm-muted);
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.distribution-preview-card.is-selected {
  border-color: var(--create-accent);
  background: var(--create-accent-soft);
  color: var(--sm-text);
  transform: translateX(2px);
}
.distribution-preview-card strong {
  display: block;
  margin-bottom: 2px;
  color: var(--sm-text);
  font-size: 13.5px;
}
.distribution-preview-card span:not(.dist-icon) {
  display: block;
  font-size: 12px;
  line-height: 1.45;
}
/* ============================================================
   Album-first create flow (USER-SPEC 2026-07-04)
   The album is THE editing surface: slot editor popover, real document pages,
   and the itemized drop math.
   ============================================================ */

/* --- the thin Make-stage control strip (the upload grid died) --- */
.fill-progress {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin-top: 18px;
  font-size: 13px; font-weight: 700;
}
.fill-progress .upload-mode-note { font-size: 12px; color: var(--sm-muted); font-weight: 650; }

.pdf-import-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(168px, auto);
  gap: 12px;
  align-items: center;
  margin: 16px 0 18px;
  padding: 14px;
  border: 1px solid var(--sm-border-2);
  border-radius: 10px;
  background: color-mix(in srgb, var(--sm-card) 88%, var(--create-accent, var(--sm-orange)) 12%);
}
.pdf-import-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
.pdf-import-copy strong {
  color: var(--sm-text);
  font-size: 13px;
  font-weight: 850;
}
.pdf-import-copy span {
  color: var(--sm-muted);
  font-size: 12px;
  line-height: 1.4;
}
.pdf-import-picker,
.pdf-import-submit {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
.pdf-import-picker {
  position: relative;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
  border: 1px dashed color-mix(in srgb, var(--create-accent, var(--sm-orange)) 65%, var(--sm-border-2));
  padding: 7px 12px;
  color: var(--sm-text);
  background: var(--sm-card);
  line-height: 1.25;
  text-align: center;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease, opacity .16s ease;
}
.pdf-import-picker:hover {
  border-color: var(--create-accent, var(--sm-orange));
  background: color-mix(in srgb, var(--sm-card) 92%, var(--create-accent, var(--sm-orange)) 8%);
}
.pdf-import-picker:focus-within {
  border-color: var(--sm-focus-border, var(--create-accent, var(--sm-orange)));
  outline: 2px solid var(--sm-focus-ring, color-mix(in srgb, var(--create-accent, var(--sm-orange)) 32%, transparent));
  outline-offset: 2px;
}
.pdf-import-picker input {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  opacity: 0;
  cursor: pointer;
}
.pdf-import-picker-main,
.pdf-import-picker-limit {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pdf-import-picker-main { font-weight: 850; }
.pdf-import-picker-limit {
  color: var(--sm-muted);
  font-size: 10.5px;
  font-weight: 650;
}
.pdf-import-submit {
  display: none;
  grid-column: 2;
}
.pdf-import-enhancement-note {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--fg-warning, var(--sm-muted));
  font-size: 11.5px;
  line-height: 1.4;
}
.pdf-import-strip.is-pdf-enhanced .pdf-import-enhancement-note { display: none; }
.pdf-import-feedback {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  align-items: center;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--create-accent, var(--sm-orange)) 28%, var(--sm-border-2));
  border-radius: 8px;
  background: color-mix(in srgb, var(--sm-card) 94%, var(--create-accent, var(--sm-orange)) 6%);
}
.pdf-import-feedback[hidden],
.pdf-import-progress[hidden],
.pdf-import-cancel[hidden],
.pdf-import-submit[hidden] { display: none; }
.pdf-import-feedback[data-state="failed"] {
  border-color: color-mix(in srgb, var(--fg-danger, var(--sm-red)) 34%, var(--sm-border-2));
  background: var(--surface-danger-soft, color-mix(in srgb, var(--sm-card) 92%, var(--sm-red) 8%));
}
.pdf-import-feedback-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}
.pdf-import-feedback-copy strong {
  color: var(--sm-text);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.pdf-import-feedback[data-state="failed"] .pdf-import-feedback-copy strong {
  color: var(--fg-danger, var(--sm-red));
}
.pdf-import-feedback-copy span {
  color: var(--sm-muted);
  font-size: 11.5px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.pdf-import-progress {
  grid-column: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
}
.pdf-import-progress progress {
  width: 100%;
  height: 7px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  accent-color: var(--create-accent, var(--sm-orange));
  background: var(--sm-page);
}
.pdf-import-progress progress::-webkit-progress-bar {
  border-radius: 999px;
  background: var(--sm-page);
}
.pdf-import-progress progress::-webkit-progress-value {
  border-radius: 999px;
  background: var(--create-accent, var(--sm-orange));
}
.pdf-import-progress progress::-moz-progress-bar {
  border-radius: 999px;
  background: var(--create-accent, var(--sm-orange));
}
.pdf-import-progress span {
  min-width: 3ch;
  color: var(--sm-muted);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  text-align: right;
}
.pdf-import-cancel {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-height: 44px;
  align-self: center;
  white-space: nowrap;
}
@media (min-width: 1400px) {
  .distribution-preview-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .distribution-preview-card { min-height: 112px; }
}
.pdf-import-strip[data-collect-pdf-import-state="uploading"] .pdf-import-picker,
.pdf-import-strip[data-collect-pdf-import-state="processing"] .pdf-import-picker {
  opacity: .72;
  cursor: progress;
}
.pdf-import-strip[data-collect-pdf-import-state] .pdf-import-picker input {
  cursor: progress;
}
@media (max-width: 780px) {
  .pdf-import-strip { grid-template-columns: 1fr; }
  .pdf-import-picker { width: 100%; }
  .pdf-import-submit { grid-column: 1; width: 100%; }
}
@media (max-width: 520px) {
  .pdf-import-feedback { grid-template-columns: minmax(0, 1fr); }
  .pdf-import-cancel {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pdf-import-picker { transition: none; }
}

@keyframes slot-busy-pulse {
  50% { opacity: .35; }
}

/* --- compact slot editor: replacement/removal only --- */
.slot-popover { flex-direction: column; align-items: stretch; gap: 8px; min-width: 240px; }
.slot-popover--compact { width: auto; min-width: 240px; }
.slot-popover .slot-popover-actions {
  display: flex; gap: 6px;
}
.slot-popover .slot-popover-action {
  flex: 1 1 0;
  border: 1px solid var(--sm-border-2);
  background: var(--sm-page);
  border-radius: 6px;
  padding: 6px 8px;
  font: inherit; font-size: 12.5px; font-weight: 750;
  color: var(--sm-text);
  cursor: pointer;
}
.slot-popover .slot-popover-action:hover { background: var(--sm-page-2); }
.slot-popover .slot-popover-action.is-danger { color: var(--sm-red, #b3261e); }
.slot-popover .slot-popover-action:focus-visible {
  outline: 2px solid var(--create-accent, var(--sm-orange));
  outline-offset: 2px;
}

/* --- itemized drop math on the cart lines (spec 4) --- */
.create-review-line .crl-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.create-review-line .crl-main > span:first-child { overflow-wrap: anywhere; }
.create-review-line .crl-math { font-size: 11.5px; font-weight: 650; color: var(--sm-muted); }
.create-review-line .crl-price { flex: 0 0 auto; white-space: nowrap; font-weight: 800; margin-left: 12px; }
.create-review-line [data-collect-cart-qty] { flex: 0 0 auto; white-space: nowrap; color: var(--sm-muted); margin-left: 12px; }

@media (prefers-reduced-motion: reduce) {
  .album-doc-page [data-collect-preview-slot].is-busy { animation: none; }
}

/* The dark PULL subnav: the shared breadcrumb's text-fg-primary utility
   resolves for the light scope, leaving the current crumb near-invisible
   on the dark bar — pin it to the subnav's own ink token. */
.collect-subnav .crumb [aria-current="page"] { color: var(--sm-text); }

/* Empty-state teaching caption under the book (slots hold art only). */
.book .book-teach,
.create-book .book-teach {
  margin: 14px 0 0;
  text-align: center;
  font-size: 12.5px; font-weight: 700; line-height: 1.4;
  color: var(--sm-muted);
  position: relative;
  z-index: 1;
}

/* ── My orders (/collect/orders) ─────────────────────────────────
   Order history cards + status chips. Chip colors ride the module's
   own tokens so the page matches the rest of the Collect world. */
.collect-orders {
  max-width: 1200px;
  margin: 0 auto;
  padding: 44px 20px 72px;
}
.collect-orders .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.collect-orders-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 280px);
  gap: 18px;
  align-items: start;
  margin: 0 0 20px;
}
.collect-orders h1 {
  margin: 0 0 8px;
  font-size: 32px;
  line-height: 1.12;
  color: var(--sm-ink);
}
.collect-orders-lead { margin: 0; color: var(--sm-muted); }
.collect-orders-search {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.collect-orders-search input {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--sm-line, rgba(0, 0, 0, .12));
  border-radius: 4px;
  padding: 8px 12px;
  background: var(--sm-card);
  color: var(--sm-ink);
  font: inherit;
}
.collect-orders-search button {
  min-height: 36px;
  border: 1px solid var(--sm-border-2);
  border-radius: 6px;
  padding: 0 12px;
  background: var(--sm-card);
  color: var(--sm-ink);
  font-weight: 800;
  cursor: pointer;
}
.collect-orders-list { display: grid; gap: 20px; width: calc((100% - 32px) * .666667); }

.collect-order-card {
  display: block;
  padding: 0;
  background: var(--sm-card);
  border: 1px solid var(--sm-line, rgba(0, 0, 0, .12));
  border-radius: 10px;
  overflow: hidden;
}
.collect-order-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  background: #f3f3f3;
  border-bottom: 1px solid var(--sm-line, rgba(0, 0, 0, .12));
}
.collect-order-meta-cell {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.collect-order-meta-cell span {
  color: var(--sm-muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}
.collect-order-meta-cell strong {
  min-width: 0;
  overflow: hidden;
  color: var(--sm-ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.collect-order-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  font-size: 12px;
  font-weight: 800;
  color: var(--sm-blue);
  white-space: nowrap;
}
.collect-order-links a:hover { text-decoration: underline; }
.collect-order-items {
  display: grid;
}
.collect-order-row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 116px 118px;
  gap: 18px;
  align-items: center;
  padding: 22px 18px;
}
.collect-order-row + .collect-order-row {
  border-top: 1px solid var(--sm-line, rgba(0, 0, 0, .12));
}
.collect-order-product-link {
  display: grid;
  grid-column: span 2;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  border-radius: 6px;
}
.collect-order-product-link:hover .collect-order-name,
.collect-order-product-link:focus .collect-order-name {
  color: var(--sm-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.collect-order-product-link:focus-visible {
  outline: 2px solid var(--sm-blue);
  outline-offset: 4px;
}
.collect-order-product-link-static:hover .collect-order-name,
.collect-order-product-link-static:focus .collect-order-name {
  color: inherit;
  text-decoration: none;
}
.collect-order-thumb {
  width: 64px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(80, 80, 80, .12);
  border-radius: 4px;
  background:
    linear-gradient(135deg, rgba(255, 105, 0, .12), rgba(78, 40, 23, .08)),
    var(--sm-cream);
  color: var(--sm-brown);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0;
  overflow: hidden;
}
.collect-order-thumb-image {
  background: var(--sm-cream);
}
.collect-order-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.collect-order-name { margin: 0 0 6px; font-size: 15px; line-height: 1.25; }
.collect-order-spec,
.collect-order-collection {
  margin: 0;
  color: var(--sm-muted);
  font-size: 12px;
  line-height: 1.45;
}
.collect-order-price {
  display: grid;
  gap: 4px;
  justify-items: end;
  font-size: 12px;
  color: var(--sm-muted);
}
.collect-order-price strong {
  color: var(--sm-ink);
  font-size: 15px;
}
.collect-order-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  flex: 0 0 auto;
}

.collect-order-status {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
}
.collect-order-status-placed { background: rgba(128, 128, 128, .16); color: var(--sm-muted); }
.collect-order-status-paid { background: rgba(69, 159, 80, .16); color: var(--sm-green); }
.collect-order-status-launched { background: rgba(255, 105, 0, .16); color: var(--sm-orange); }

.album-publish-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin: 22px auto 0;
  max-width: 760px;
  padding: 18px;
  border: 1px solid rgba(255, 105, 0, .34);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(26, 26, 26, .08);
}
.album-publish-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.album-publish-copy h2 {
  margin: 0;
  color: var(--sm-ink);
  font-size: 18px;
  line-height: 1.2;
}
.album-publish-copy p {
  margin: 0;
  color: var(--sm-muted);
  font-size: 13px;
  line-height: 1.45;
}
.album-publish-card form {
  display: flex;
  justify-content: flex-end;
}

.album-pdf-import-status {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 260px);
  gap: 14px;
  align-items: center;
  margin: 18px auto 22px;
  max-width: 760px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--sm-orange) 30%, var(--sm-border));
  border-radius: 6px;
  background: color-mix(in srgb, #fff 88%, var(--sm-orange) 12%);
}
.album-pdf-import-status[data-state="failed"] {
  border-color: rgba(180, 42, 42, .35);
  background: color-mix(in srgb, #fff 86%, #b42a2a 14%);
}
.album-pdf-import-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}
.album-pdf-import-copy strong {
  color: var(--sm-ink);
  font-size: 16px;
  line-height: 1.2;
}
.album-pdf-import-copy span {
  color: var(--sm-muted);
  font-size: 13px;
  line-height: 1.4;
}
.album-pdf-import-progress {
  display: grid;
  gap: 6px;
}
.album-pdf-import-track {
  overflow: hidden;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: rgba(26, 26, 26, .12);
}
.album-pdf-import-fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--sm-orange);
  transition: width .25s ease;
}
.album-pdf-import-status[data-state="failed"] .album-pdf-import-fill {
  background: #b42a2a;
}
.album-pdf-import-progress span {
  color: var(--sm-muted);
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.collect-orders-empty { text-align: center; }
.collect-orders-empty-card { padding: 28px; }
.collect-orders-empty p { color: var(--sm-muted); margin: 0 0 20px; }

@media (max-width: 760px) {
  .album-pdf-import-status { grid-template-columns: 1fr; }
  .album-pdf-import-progress span { text-align: left; }
  .collect-orders-toolbar { grid-template-columns: 1fr; }
  .collect-orders-search { justify-content: stretch; }
  .collect-orders-list { width: 100%; }
  .collect-order-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .collect-order-links { justify-content: flex-start; }
  .collect-order-row { grid-template-columns: 64px minmax(0, 1fr); }
  .collect-order-product-link {
    grid-column: 1 / -1;
    grid-template-columns: 64px minmax(0, 1fr);
  }
  .collect-order-price { justify-items: start; grid-column: 2; }
  .collect-order-side { align-items: flex-start; }
}

@media (max-width: 480px) {
  .collect-orders { padding-inline: 12px; }
  .collect-orders h1 { font-size: 28px; }
  .collect-orders-search { flex-direction: column; }
  .album-publish-card { grid-template-columns: 1fr; }
  .album-publish-card form { justify-content: stretch; }
  .collect-order-summary { grid-template-columns: 1fr; }
  .collect-order-row { grid-template-columns: 1fr; }
  .collect-order-product-link { grid-template-columns: 1fr; }
  .collect-order-thumb { width: 72px; }
  .collect-order-price { grid-column: auto; }
}

/* ── Pack history (/collect/albums/:id/packs) ─────────────────────
   A buyer-owned state surface: sealed packs stay opaque, opened packs
   reveal the exact sticker manifest fixed at payment time. */
.collect-pack-page {
  max-width: var(--sm-content-max);
  margin: 0 auto;
  padding: 44px var(--sm-content-pad) 48px;
}
.collect-pack-kicker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
  color: var(--sm-muted);
  font-size: 12px;
  font-weight: 800;
}
.collect-pack-kicker a {
  color: var(--sm-orange);
  text-decoration: none;
}
.collect-pack-kicker a:hover { text-decoration: underline; }
.collect-pack-hero {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr);
  gap: 32px;
  align-items: center;
  margin-bottom: 24px;
}
.collect-pack-title h1 {
  margin: 0 0 10px;
  color: var(--sm-ink);
  font-size: 38px;
  line-height: 1.1;
  letter-spacing: 0;
}
.collect-pack-title p {
  max-width: 620px;
  margin: 0;
  color: var(--sm-muted);
  line-height: 1.55;
}
.collect-pack-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.collect-pack-hero-image {
  justify-self: end;
  width: 142px;
  min-height: 168px;
  display: grid;
  place-items: center;
  padding: 14px;
  border: 1px solid var(--sm-line, rgba(0, 0, 0, .12));
  border-radius: 6px;
  background: var(--sm-cream);
  box-shadow: 0 10px 26px rgba(26, 26, 26, .12);
}
.collect-pack-hero-image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 150px;
  object-fit: contain;
}
.collect-pack-hero-image-empty {
  background: linear-gradient(135deg, rgba(255, 105, 0, .12), rgba(78, 40, 23, .08)), var(--sm-cream);
}
.collect-pack-list {
  display: grid;
  gap: 18px;
  width: calc((100% - 32px) * .666667);
}
.collect-pack-callout {
  width: calc((100% - 32px) * .666667);
  margin: 0 0 18px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 1px solid #f4c9aa;
  border-radius: 6px;
  background: var(--sm-selected);
}
.collect-pack-callout h2 { margin: 0 0 3px; font-size: 16px; color: var(--sm-text); }
.collect-pack-callout p { margin: 0; font-size: 13px; color: var(--sm-text-2); }
.collect-pack-card,
.collect-pack-empty {
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--sm-line, rgba(0, 0, 0, .12));
  border-radius: 6px;
  background: var(--sm-card);
  box-shadow: 0 2px 10px rgba(26, 26, 26, .08);
}
.collect-pack-card-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  background: #f3f3f3;
  border-bottom: 1px solid var(--sm-line, rgba(0, 0, 0, .12));
}
.collect-pack-card-title h2 {
  margin: 0 0 4px;
  font-size: 16px;
  line-height: 1.2;
}
.collect-pack-card-title p {
  margin: 0;
  color: var(--sm-muted);
  font-size: 12px;
  line-height: 1.35;
}
.collect-pack-status {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid var(--sm-border);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.collect-pack-status-sealed { background: var(--sm-page-2); color: var(--sm-muted); }
.collect-pack-status-ripped { background: #e5f4e8; color: #267337; border-color: #c8e7ce; }
.collect-pack-card-body {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 24px;
  padding: 20px 18px 22px;
}
.collect-pack-face {
  display: grid;
  place-items: center;
  min-height: 150px;
  padding: 12px;
  border-radius: 6px;
  background: var(--sm-cream);
}
.collect-pack-face img {
  display: block;
  width: 100%;
  max-height: 134px;
  object-fit: contain;
}
.collect-pack-face-empty {
  background: linear-gradient(135deg, rgba(255, 105, 0, .12), rgba(78, 40, 23, .08)), var(--sm-cream);
}
.collect-pack-sealed-note,
.collect-pack-stickers {
  min-width: 0;
}
.collect-pack-sealed-note h3,
.collect-pack-stickers h3 {
  margin: 0 0 8px;
  color: var(--sm-ink);
  font-size: 18px;
  line-height: 1.25;
}
.collect-pack-sealed-note p {
  max-width: 520px;
  margin: 0 0 16px;
  color: var(--sm-muted);
  line-height: 1.5;
}
.collect-pack-sticker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 12px;
}
.collect-pack-sticker {
  display: grid;
  grid-template-rows: auto auto auto auto;
  gap: 6px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--sm-line, rgba(0, 0, 0, .12));
  border-radius: 6px;
  color: inherit;
  text-decoration: none;
  background: var(--sm-card);
}
.collect-pack-sticker:hover,
.collect-pack-sticker:focus {
  border-color: rgba(255, 105, 0, .45);
}
.collect-pack-sticker:focus-visible {
  outline: 2px solid var(--sm-orange);
  outline-offset: 2px;
}
.collect-pack-sticker-art {
  display: grid;
  place-items: center;
  min-height: 86px;
  border-radius: 5px;
  background: var(--sm-cream);
  overflow: hidden;
}
.collect-pack-sticker-art img,
.collect-pack-sticker-art svg {
  display: block;
  max-width: 100%;
  max-height: 80px;
}
.collect-pack-sticker-art span {
  color: var(--sm-orange);
  font-weight: 900;
}
.collect-pack-sticker-number,
.collect-pack-sticker-rarity {
  color: var(--sm-muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.collect-pack-sticker strong {
  min-width: 0;
  overflow: hidden;
  color: var(--sm-ink);
  font-size: 13px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.collect-pack-empty {
  padding: 28px;
  text-align: center;
}
.collect-pack-empty h2 {
  margin: 0 0 8px;
  color: var(--sm-ink);
}
.collect-pack-empty p {
  max-width: 460px;
  margin: 0 auto 18px;
  color: var(--sm-muted);
  line-height: 1.5;
}

@media (max-width: 760px) {
  .collect-pack-hero {
    grid-template-columns: 1fr;
  }
  .collect-pack-hero-image {
    justify-self: start;
  }
  .collect-pack-card-body {
    grid-template-columns: 1fr;
  }
  .collect-pack-list,
  .collect-pack-callout { width: 100%; }
  .collect-pack-face {
    width: 150px;
  }
}

@media (max-width: 480px) {
  .collect-pack-page { padding-inline: 12px; }
  .collect-pack-title h1 { font-size: 30px; }
  .collect-pack-card-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ── Brand performance (/collect/albums/:id/performance) ────────────────
   Aggregated collection reporting. It deliberately shows coarse geography
   and counts only; collector identities never appear in this UI. */
.collect-performance {
  max-width: 1040px;
  margin: 0 auto;
  padding: 44px 20px 80px;
}
.performance-hero {
  margin-bottom: 22px;
}
.performance-hero-copy { max-width: 720px; }
.performance-kicker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-bottom: 18px;
}
.performance-back {
  display: inline-flex;
  margin: 0;
  color: var(--sm-muted);
  font-size: 13px;
  font-weight: 800;
}
.performance-back:hover { color: var(--sm-orange); text-decoration: none; }
.performance-hero .eyebrow {
  color: var(--sm-orange);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.performance-hero h1 {
  margin: 6px 0 10px;
  color: var(--sm-ink);
  font-size: 38px;
  line-height: 1.08;
  letter-spacing: 0;
}
.performance-hero p {
  max-width: 640px;
  margin: 0;
  color: var(--sm-muted);
  font-size: 15px;
  line-height: 1.55;
}
.performance-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.performance-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 22px;
}
.performance-stat {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--sm-border);
  border-radius: 8px;
  background: var(--sm-card);
}
.performance-stat span {
  display: block;
  color: var(--sm-muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}
.performance-stat strong {
  display: block;
  margin-top: 8px;
  color: var(--sm-ink);
  font-size: 30px;
  line-height: 1;
}
.performance-stat p {
  margin: 8px 0 0;
  color: var(--sm-muted);
  font-size: 12.5px;
  line-height: 1.35;
}
.performance-map-panel {
  min-width: 0;
  margin: 0 0 22px;
  border: 1px solid var(--sm-border);
  border-radius: 8px;
  background: var(--sm-card);
  overflow: hidden;
}
.performance-map-panel-empty .performance-empty {
  margin: 18px;
}
.performance-map-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 18px;
  align-items: stretch;
  padding: 18px;
}
.performance-world-map {
  position: relative;
  min-width: 0;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--sm-border) 80%, transparent);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 246, 229, .9), rgba(255, 255, 255, .92)),
    radial-gradient(circle at 26% 30%, rgba(255, 105, 0, .16), transparent 35%),
    radial-gradient(circle at 76% 66%, rgba(0, 136, 255, .12), transparent 28%);
}
.performance-world-map svg {
  display: block;
  width: 100%;
  height: auto;
  min-height: 260px;
}
.map-ocean {
  fill: rgba(255, 250, 238, .68);
}
.map-graticule line {
  stroke: rgba(94, 84, 66, .08);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.map-country {
  fill: #ded8c6;
  stroke: rgba(94, 84, 66, .28);
  stroke-width: .72;
  vector-effect: non-scaling-stroke;
  transition: fill .18s ease, stroke .18s ease, opacity .18s ease;
}
.map-country:hover {
  fill: #cfc7b4;
  stroke: rgba(94, 84, 66, .48);
}
.map-country-active {
  fill: var(--sm-orange);
  stroke: rgba(76, 38, 21, .38);
  stroke-width: 1;
  cursor: help;
}
.map-country-active:hover,
.map-country-active:focus-visible {
  fill: var(--sm-orange);
  fill-opacity: 1;
  stroke: #4c2615;
  outline: none;
  filter: drop-shadow(0 0 10px rgba(255, 90, 0, .34));
}
.map-country-active.heat-1 { fill-opacity: .42; }
.map-country-active.heat-2 { fill-opacity: .56; }
.map-country-active.heat-3 { fill-opacity: .70; }
.map-country-active.heat-4 { fill-opacity: .84; }
.map-country-active.heat-5 {
  fill-opacity: .98;
  filter: drop-shadow(0 0 8px rgba(255, 90, 0, .22));
}
.map-country-active:hover,
.map-country-active:focus-visible {
  fill-opacity: 1;
}
.map-heat-point {
  fill: var(--sm-orange);
  stroke: #fff;
  stroke-width: 2.4;
  transform-box: fill-box;
  transform-origin: center;
  vector-effect: non-scaling-stroke;
  transition: transform .18s ease, filter .18s ease, fill-opacity .18s ease;
  cursor: help;
}
.map-heat-point:hover { transform: scale(1.24); filter: drop-shadow(0 0 10px rgba(255, 90, 0, .42)); }
.map-heat-point.heat-1 { fill-opacity: .72; }
.map-heat-point.heat-2 { fill-opacity: .82; }
.map-heat-point.heat-3 { fill-opacity: .9; }
.map-heat-point.heat-4 { fill-opacity: .96; }
.map-heat-point.heat-5 {
  fill-opacity: .96;
  filter: drop-shadow(0 0 10px rgba(255, 90, 0, .42));
}
.performance-map-legend {
  display: grid;
  grid-template-columns: auto minmax(80px, 160px) auto;
  gap: 9px;
  align-items: center;
  margin-top: 8px;
  color: var(--sm-muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.legend-ramp {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 90, 0, .18), rgba(255, 90, 0, .95));
}
.performance-country-list {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 10px;
}
.performance-country-list h3 {
  margin: 0 0 2px;
  color: var(--sm-ink);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}
.performance-country-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid var(--sm-border);
  border-radius: 7px;
  background: var(--sm-art-cream-1);
}
.performance-country-row strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--sm-ink);
  font-size: 13px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.performance-country-row span {
  display: block;
  margin-top: 2px;
  color: var(--sm-muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
}
.performance-country-count {
  white-space: nowrap;
  color: rgb(var(--fg-warning, 180 83 9));
  font-size: 12px;
  font-weight: 900;
}
.performance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.performance-panel {
  min-width: 0;
  border: 1px solid var(--sm-border);
  border-radius: 8px;
  background: var(--sm-card);
  overflow: hidden;
}
.performance-panel-head {
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--sm-border);
  background: var(--sm-page-2);
}
.performance-panel h2 {
  margin: 0 0 4px;
  color: var(--sm-ink);
  font-size: 17px;
  line-height: 1.2;
}
.performance-panel p {
  margin: 0;
  color: var(--sm-muted);
  font-size: 12.5px;
  line-height: 1.4;
}
.performance-panel-body {
  display: grid;
  gap: 12px;
  padding: 16px 18px 18px;
}
.performance-bar-row {
  display: grid;
  gap: 7px;
}
.performance-bar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}
.performance-bar-top strong {
  min-width: 0;
  overflow: hidden;
  color: var(--sm-ink);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.performance-bar-top span {
  color: var(--sm-muted);
  font-weight: 800;
}
.performance-bar-track {
  height: 8px;
  border-radius: 999px;
  background: var(--sm-page);
  overflow: hidden;
}
.performance-bar-track span {
  display: block;
  height: 100%;
  min-width: 6px;
  border-radius: inherit;
  background: var(--sm-orange);
}
.performance-sticker-row,
.performance-recent-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}
.performance-sticker-link {
  margin: -8px;
  padding: 8px;
  border-radius: 7px;
  color: inherit;
  text-decoration: none;
  transition: background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.performance-sticker-link:hover {
  background: #fff7ec;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sm-orange) 24%, transparent);
  text-decoration: none;
  transform: translateY(-1px);
}
.performance-sticker-link:focus-visible {
  outline: 2px solid var(--sm-orange);
  outline-offset: 2px;
}
.performance-sticker-link:hover strong { color: var(--sm-orange); }
.performance-sticker-row strong,
.performance-recent-row strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--sm-ink);
  font-size: 13.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.performance-sticker-row span,
.performance-recent-row span {
  display: block;
  margin-top: 2px;
  color: var(--sm-muted);
  font-size: 12px;
  font-weight: 700;
}
.performance-sticker-count {
  min-width: 34px;
  padding: 5px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sm-orange) 12%, var(--sm-card));
  color: var(--sm-orange);
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}
.performance-recent-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.performance-empty {
  padding: 18px;
  border: 1px dashed var(--sm-border);
  border-radius: 6px;
  color: var(--sm-muted);
  font-size: 13px;
  text-align: center;
}

@media (max-width: 860px) {
  .performance-map-body,
  .performance-grid { grid-template-columns: 1fr; }
  .performance-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .performance-world-map svg { min-height: 210px; }
}

@media (max-width: 520px) {
  .collect-performance { padding-inline: 12px; }
  .performance-hero h1 { font-size: 30px; }
  .performance-stats { grid-template-columns: 1fr; }
  .performance-map-body { padding: 12px; }
  .performance-world-map { padding: 8px; }
  .performance-map-legend { grid-template-columns: 1fr; }
  .performance-sticker-row,
  .performance-recent-row { grid-template-columns: 1fr; }
  .performance-recent-meta { justify-content: flex-start; }
}

/* ---- one-object album pane + roomy template rows ---- */
.album-preview--object { padding: 26px; }

.create-template-section .create-template-grid { display: flex; flex-direction: column; gap: 10px; }
.create-template-card { display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: 14px; text-align: left; padding: 10px 12px; }
.create-template-card .template-mini { width: 72px; height: 54px; }
.create-template-card .template-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.create-template-card .template-copy span { font-size: 12.5px; color: var(--create-muted); line-height: 1.4; display: block; overflow: visible; }
.create-template-card .template-meta { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; font-size: 11.5px; color: var(--create-muted); white-space: nowrap; }

/* ============================================================
   Guided flow — the album teaches you (tutorial coach).
   The shell opts in with data-collect-guided; collect_create.js
   adds .is-guided and drives data-coach-step. Without JS none of
   these selectors bite and the classic wizard card renders.
   ============================================================ */

/* Focused studio: one stable workbench, one task rail, one action footer.
   The site chrome stays recognizably Sticker Mule, but it no longer sticks
   through full-page captures or competes with the creation task. */
body.collect-builder-root .smnav,
body.collect-builder-root .collect-subnav {
  position: relative;
  top: auto;
}
body.collect-builder-root .smfoot { display: none; }

.create-shell.is-guided .create-card { display: none; }
.create-shell.is-guided .create-layout { display: block; min-height: 0; }
.create-shell.is-guided {
  --pk-workspace-gap: 14px;
  width: min(100%, 1200px);
  margin-inline: auto;
  min-height: 0;
  box-sizing: border-box;
  padding: 14px;
  background: #f3f0ea;
}
/* Keep the studio calm on Order it. The pack preview supplies the theatre;
   the surrounding controls stay on the familiar warm Sticker Mule paper. */
.create-shell.is-guided.is-act-ship {
  --create-page: #f3f0ea;
  --create-card: #ffffff;
  --create-card-2: #faf8f4;
  --create-border: #e7e1d8;
  --create-border-2: #d9d1c5;
  --create-ink: #1c1a17;
  --create-ink-2: #4a453d;
  --create-muted: #6b6459;
  --create-faint: #8a8275;
  --create-accent-soft: color-mix(in srgb, var(--sm-orange) 9%, #ffffff);
  --create-accent-border: color-mix(in srgb, var(--sm-orange) 34%, #ffffff);
  --create-info-ink: #2a4a7a;
  --create-info-bg: #eef4ff;
  --create-ok: #1f8a5b;
  --create-ok-soft: #eef7f1;
  --create-ok-border: #bfe0cd;
  --create-warn: #b4552d;
  --create-dashed: #cfc8bc;
  --shadow-card: 0 1px 2px rgba(28, 26, 23, .04), 0 10px 28px rgba(28, 26, 23, .07);
}

.create-shell.is-guided > .create-main {
  width: 100%;
  max-width: none;
  min-width: 0;
  min-height: 0;
  padding: 0;
}
.create-shell.is-guided .create-ribbon {
  position: relative;
  top: auto;
  z-index: 1;
  min-height: 44px;
  margin: 0 0 12px;
  border-radius: 10px;
  box-shadow: none;
}
.create-shell.is-guided .preview-pane,
.create-shell.is-guided .preview-pane.album-preview {
  position: relative;
  top: auto;
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #e3dccf;
  border-radius: 14px;
  background: #faf6eb;
  box-shadow: 0 18px 44px -32px rgba(67, 41, 26, .42);
}
.create-shell.is-guided [data-collect-preview-panel] { min-height: 0; }
.create-shell.is-guided .preview-pane.album-preview .album-preview-stage {
  min-height: 310px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 3vw, 64px);
  overflow: auto;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .96) 0 18%, rgba(255, 255, 255, 0) 54%),
    linear-gradient(145deg, #fffbed, #f6f0df);
}
.create-shell.is-guided [data-collect-album-preview] > .book {
  width: min(100%, clamp(720px, 68vw, 2400px));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
.create-shell.is-guided [data-collect-album-preview] > .book .book-stage { width: 100%; }
.create-shell.is-guided [data-collect-album-preview] > .book.js-ready .book-spread,
.create-shell.is-guided [data-collect-album-preview] > .book:not(.js-ready) .book-spread {
  min-height: 0;
  aspect-ratio: 2.04 / 1;
}
.create-shell.is-guided [data-collect-album-preview] > .book.js-ready .book-side {
  display: flex;
  align-items: stretch;
  padding: clamp(6px, .75vw, 12px) clamp(5px, .65vw, 10px) clamp(8px, .9vw, 14px);
}
.create-shell.is-guided [data-collect-album-preview] > .book.js-ready .leaf-face {
  padding: clamp(6px, .75vw, 12px) clamp(5px, .65vw, 10px) clamp(8px, .9vw, 14px);
}
.create-shell.is-guided [data-collect-album-preview] > .book.js-ready .book-side > .book-page,
.create-shell.is-guided [data-collect-album-preview] > .book.js-ready .leaf-face > .book-page {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.create-shell.is-guided [data-collect-album-preview] > .book .book-closed-cover {
  max-width: min(62%, clamp(440px, 32vw, 1050px));
  min-height: 0;
  height: 100%;
  max-height: 100%;
  border-radius: 10px;
}
.create-shell.is-guided [data-collect-album-preview] > .book .book-teach {
  margin: 0;
  color: var(--create-muted);
}

/* Task rail */
.coach-dock {
  position: relative;
  top: auto;
  align-self: stretch;
  z-index: 30;
  min-width: 0;
  max-height: none;
  overflow: visible;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: var(--create-card);
  border: 1px solid var(--create-border-2);
  border-radius: 14px;
  box-shadow: 0 18px 42px -30px rgba(67, 41, 26, .38);
}
.coach-dock .coach-head {
  flex: 0 0 auto;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--create-border);
}
.coach-dock .coach-kicker {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--create-accent, var(--sm-orange));
}
.coach-dock .coach-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 0;
}
.coach-dock .coach-sync {
  display: block;
  min-width: 0;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--create-muted);
}
.coach-dock .coach-sync:empty { display: none; }
.coach-dock .coach-exit {
  flex: 0 0 auto;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--create-accent);
}
.coach-dock .coach-exit:hover { text-decoration: underline; }
.coach-dock .coach-exit:focus-visible {
  border-radius: 4px;
  outline: 2px solid var(--create-accent, var(--sm-orange));
  outline-offset: 3px;
}
.coach-dock .coach-exit.is-disabled,
.coach-dock .coach-exit[aria-disabled="true"] {
  color: var(--create-muted);
  cursor: not-allowed;
  opacity: .58;
  text-decoration: none;
}
.coach-dock .coach-title {
  margin: 14px 0 0;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -.025em;
  font-weight: 900;
  color: var(--create-ink);
}
.coach-dock .coach-body {
  margin: 7px 0 0;
  max-width: 44ch;
  font-size: 13px;
  line-height: 1.45;
  color: var(--create-muted);
}
.coach-dock .coach-title:focus-visible {
  outline: 2px solid var(--create-accent, var(--sm-orange));
  outline-offset: 4px;
  border-radius: 4px;
}
.coach-panel-host {
  min-height: 0;
  padding: 18px 20px 24px;
}
.coach-panel-host [data-collect-step] > h2,
.coach-panel-host [data-collect-step] > .lede { display: none; }
.coach-panel-host [data-collect-step] { animation: coach-panel-in .22s ease; }
@keyframes coach-panel-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}

/* Make stage hierarchy */
.create-identity-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(130px, .85fr);
  gap: 10px;
  align-items: end;
}
.create-identity-grid .dream-title-field,
.create-identity-grid .dream-brand-field { margin: 0; max-width: none; }
.create-identity-grid .field { margin-bottom: 0; }
.create-identity-grid .dream-title-field input {
  min-height: 46px;
  padding: 10px 12px;
  font-size: 17px;
  letter-spacing: -.02em;
}
.create-identity-grid .dream-brand-field input { min-height: 46px; }
.coach-panel-host .dream-pick {
  margin: 18px 0 8px;
  font-size: 12.5px;
}
.coach-panel-host .dream-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.create-shell.is-guided .dream-shot {
  min-height: 94px;
  padding: 0;
  border-radius: 9px;
  aspect-ratio: 16 / 10;
  background: #17130f;
}
.create-shell.is-guided .dream-shot:hover { transform: translateY(-1px); }
.create-shell.is-guided .dream-shot.is-selected {
  border-color: var(--create-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--create-accent) 18%, transparent);
}
.create-shell.is-guided .dream-shot .dream-title-overlay {
  width: 58%;
  padding: 4px 6px;
  font-size: 11px;
}
.create-shell.is-guided .dream-shot .dream-shot-label {
  left: 6px;
  bottom: 6px;
  font-size: 10.5px;
}
.make-drop {
  margin: 0 0 12px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--create-accent) 28%, var(--create-border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--create-accent) 5%, var(--create-card));
}
.make-drop-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.make-drop-title { margin: 0; font-size: 14px; font-weight: 850; color: var(--create-ink); }
.make-drop-body { margin: 3px 0 0; font-size: 12px; line-height: 1.4; color: var(--create-muted); }
.make-drop-counter {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
  margin: 1px 0 0;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--create-card);
  font-size: 10.5px;
  font-weight: 800;
  color: var(--create-muted);
  white-space: nowrap;
}
.make-drop-cta {
  width: 100%;
  justify-content: center;
  margin-top: 14px;
  border-color: var(--create-accent);
  background: var(--create-accent);
  color: #fff;
}
.make-drop-cta:hover {
  border-color: color-mix(in srgb, var(--create-accent) 84%, #000);
  background: color-mix(in srgb, var(--create-accent) 84%, #000);
}
.make-drop-cancel {
  width: 100%;
  justify-content: center;
  margin-top: 6px;
}
.make-drop .pdf-import-strip {
  grid-template-columns: minmax(0, 1fr) auto;
  margin: 12px 0 0;
  padding: 12px;
  border-color: var(--create-border);
  background: color-mix(in srgb, var(--create-card) 92%, var(--create-accent) 8%);
}
.make-drop .pdf-import-copy strong {
  color: var(--create-ink);
  font-size: 12px;
  font-weight: 800;
}
.make-drop .pdf-import-copy span {
  display: block;
  color: var(--create-muted);
  font-size: 11px;
}
.make-drop .pdf-import-picker {
  min-height: 44px;
  border-style: solid;
  border-color: var(--create-border-2);
  background: var(--create-card);
}
.make-drop .library-row {
  margin-top: 10px;
  border: 0;
  background: transparent;
}
.make-drop .library-row > summary {
  min-height: auto;
  padding: 6px 0;
  color: var(--create-muted);
  font-size: 11.5px;
  font-weight: 700;
}
.make-drop .library-row[open] > summary { margin-bottom: 4px; }

.album-settings { margin: 0; padding: 0; overflow: hidden; }
.album-settings > summary {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px;
  list-style-position: inside;
}
.album-settings > summary .album-settings-summary {
  margin-left: auto;
  color: var(--create-muted);
  font-size: 11.5px;
  font-weight: 700;
}
.album-settings[open] > summary {
  margin-bottom: 0;
  border-bottom: 1px solid var(--create-border);
}
.album-settings-body { padding: 14px; }
.album-settings-body .dream-pick { margin-top: 0; }
.album-settings-body .create-identity-grid { margin-top: 14px; }

.create-noscript {
  margin: 14px auto;
  width: min(calc(100% - 28px), 920px);
  max-width: 920px;
  padding: 18px;
  border: 1px solid var(--sm-warning-border, #e8b267);
  border-radius: 8px;
  background: var(--sm-warning-bg, #fff8e8);
  color: var(--create-ink);
  font-size: 13px;
  line-height: 1.45;
}
.create-noscript > h2 { margin: 0 0 6px; font-size: 20px; }
.create-noscript > p { margin: 0 0 16px; }
.create-noscript-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.create-noscript-form {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--create-border, #ddd3c6);
  border-radius: 8px;
  background: var(--create-card, #fff);
}
.create-noscript-form > p { margin: -4px 0 0; color: var(--create-muted); }
.create-noscript-form > label { display: grid; gap: 6px; font-weight: 800; }
.create-noscript-form input,
.create-noscript-form select { width: 100%; min-height: 42px; box-sizing: border-box; }
.create-draft-fallback-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.create-draft-fallback-actions .create-noscript-form { align-content: center; }
.create-draft-fallback-actions .btn { justify-content: center; }
@media (max-width: 640px) {
  .create-noscript-grid { grid-template-columns: 1fr; }
}
.auto-sizing-note {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--create-border);
  border-radius: 8px;
  background: var(--create-page);
}
.auto-sizing-note > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.auto-sizing-note strong { font-size: 13px; color: var(--create-ink); }
.auto-sizing-note p { margin: 0; color: var(--create-muted); font-size: 12px; line-height: 1.45; }
.auto-sizing-badge {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--create-card);
  color: var(--create-muted);
  font-size: 10.5px;
  font-weight: 800;
}
.production-pack-choice {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}
.production-pack-choice > .lbl {
  font-size: 13px;
  font-weight: 800;
  color: var(--create-ink);
}
.pack-availability {
  margin: 0 0 14px;
  padding: 9px 11px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--create-accent) 8%, var(--create-card));
  color: var(--create-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}
.finish-odds { margin-top: 16px; }
.finish-odds > .lbl { font-size: 13px; font-weight: 800; color: var(--create-ink); }
.finish-odds-intro,
.finish-odds-proof { margin: 4px 0 10px; color: var(--create-muted); font-size: 12px; line-height: 1.45; }
.finish-odds-proof { margin: 10px 0 0; }
.odds-mode-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.odds-mode-card {
  min-height: 76px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 3px;
  padding: 11px 12px;
  border: 1px solid var(--create-border-2);
  border-radius: 8px;
  background: var(--create-card);
  color: var(--create-ink);
  text-align: left;
}
.odds-mode-card strong { font-size: 12.5px; }
.odds-mode-card span { color: var(--create-muted); font-size: 11px; line-height: 1.35; }
.odds-mode-card.is-selected {
  border-color: var(--create-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--create-accent) 16%, transparent);
  background: color-mix(in srgb, var(--create-accent) 4%, var(--create-card));
}
.custom-odds-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.custom-odds-fields .field { margin: 0; }
.custom-odds-fields [data-component="select"] { max-width: none; }
.create-shell.is-uploading-art .make-drop-cta { cursor: progress; opacity: .72; }

/* Review is a proof handoff, not another configuration form. Three flat
   sections answer the only questions that matter now: what will be proofed,
   whether packaging needs bespoke art, and what the current order costs. */
.coach-panel-host [data-collect-step="1"] {
  display: grid;
  gap: 12px;
}
.review-proof,
.package-artwork-card,
.review-total-card,
.review-package-waiting,
.review-package-off {
  border: 1px solid var(--create-border);
  border-radius: 11px;
  background: var(--create-card);
}
.review-proof,
.package-artwork-card { padding: 14px; }
.review-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.review-section-kicker {
  display: block;
  margin-bottom: 3px;
  color: var(--create-accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
}
.review-section-head h3 {
  margin: 0;
  color: var(--create-ink);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -.015em;
  line-height: 1.2;
}
.review-proof-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--create-ok-soft);
  color: var(--create-ok);
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
}
.review-proof-badge::before {
  content: "\2713";
  margin-right: 4px;
}
.review-proof-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid var(--create-border);
  border-radius: 8px;
  background: var(--create-border);
}
.review-fact {
  min-width: 0;
  padding: 10px 11px;
  background: var(--create-card-2);
}
.review-fact.is-wide { grid-column: 1 / -1; }
.review-fact-label {
  display: block;
  margin-bottom: 3px;
  color: var(--create-muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .07em;
  line-height: 1.2;
  text-transform: uppercase;
}
.review-fact strong {
  display: block;
  color: var(--create-ink);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.review-production-options {
  margin: 10px 0 0;
  border: 0;
  border-top: 1px solid var(--create-border);
  border-radius: 0;
  background: transparent;
}
.review-production-options > summary {
  min-height: 44px;
  padding: 9px 0 0;
  color: var(--create-muted);
  font-size: 11.5px;
  font-weight: 800;
}
.review-production-options[open] > summary { margin-bottom: 12px; }
.review-production-options .auto-sizing-note { background: var(--create-card-2); }

.package-artwork-intro {
  margin: 7px 0 11px;
  color: var(--create-muted);
  font-size: 11.5px;
  line-height: 1.45;
}
.package-artwork-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 64px;
  padding: 9px 0;
  border-top: 1px solid var(--create-border);
}
.package-artwork-thumb {
  position: relative;
  display: block;
  width: 44px;
  height: 48px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--sm-brown) 28%, transparent);
  border-radius: 7px;
  background:
    linear-gradient(125deg, rgba(255,255,255,.24), transparent 38%),
    linear-gradient(155deg, #d0aa82, #96623d);
  box-shadow: 0 7px 13px -9px rgba(54, 30, 13, .7);
}
.package-artwork-thumb--pack::before,
.package-artwork-thumb--pack::after {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  border-top: 2px solid rgba(255,255,255,.58);
}
.package-artwork-thumb--pack::before { top: 14px; }
.package-artwork-thumb--pack::after { bottom: 13px; }
.package-artwork-thumb--box {
  width: 48px;
  height: 36px;
  border-radius: 5px 5px 8px 8px;
}
.package-artwork-thumb--box::before {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  top: -4px;
  height: 14px;
  border-radius: 4px;
  background: rgba(255,255,255,.22);
  transform: skewX(-12deg);
}
img.package-artwork-thumb.has-image {
  object-fit: cover;
  background: var(--create-card-2);
}
.package-artwork-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.package-artwork-copy strong {
  color: var(--create-ink);
  font-size: 12px;
  font-weight: 850;
}
.package-artwork-status {
  color: var(--create-muted);
  font-size: 11.5px;
  line-height: 1.35;
}
.package-artwork-status.is-custom { color: var(--create-ok); font-weight: 750; }
.package-editor-form { margin: 0; justify-self: end; }
.package-artwork-row .btn {
  min-height: 44px;
  padding: 6px 9px;
  border: 1px solid var(--create-border-2);
  background: var(--create-card);
  color: var(--create-ink);
  font-size: 10.5px;
  white-space: nowrap;
}
.package-artwork-row .btn:hover {
  border-color: var(--create-accent);
  color: var(--create-accent);
}
.package-artwork-row .btn[aria-busy="true"] { cursor: progress; opacity: .64; }
.package-editor-unavailable { color: var(--create-faint); font-size: 10px; }
.package-quote-note {
  margin: 8px 0 0;
  padding-top: 9px;
  border-top: 1px solid var(--create-border);
  color: var(--create-muted);
  font-size: 11.5px;
  line-height: 1.4;
}
.review-package-waiting,
.review-package-off {
  display: none;
  flex-direction: column;
  gap: 3px;
  padding: 13px 14px;
  background: var(--create-card-2);
}
.create-shell.is-packs-waiting .review-package-waiting { display: flex; }
.create-shell.is-no-packs:not(.is-packs-waiting) .review-package-off { display: flex; }
.review-package-waiting strong,
.review-package-off strong { color: var(--create-ink); font-size: 12px; }
.review-package-waiting span,
.review-package-off span { color: var(--create-muted); font-size: 11px; line-height: 1.4; }

.review-total-card {
  padding: 14px;
  border-color: color-mix(in srgb, var(--create-accent) 28%, var(--create-border));
  background: color-mix(in srgb, var(--create-accent) 4%, var(--create-card));
}
.review-total-card > .create-run-math {
  margin: 0 0 11px;
  padding: 0 0 11px;
  border-bottom: 1px solid var(--create-border);
  background: transparent;
  color: var(--create-muted);
  font-size: 12px;
  line-height: 1.45;
}
.review-total-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.review-total-row > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.review-total-row > div > span {
  color: var(--create-ink);
  font-size: 12px;
  font-weight: 850;
}
.review-total-row small {
  color: var(--create-muted);
  font-size: 11px;
  line-height: 1.3;
}
.review-total-row > span {
  color: var(--create-ink);
  font-size: 25px;
  font-weight: 950;
  letter-spacing: -.04em;
  line-height: 1;
  white-space: nowrap;
}
.review-price-details {
  margin-top: 12px;
  border-top: 1px solid var(--create-border);
}
.review-price-details > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--create-muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
}
.review-price-details[open] > summary { margin-bottom: 3px; }
.review-price-details .create-review-line {
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 7px;
  padding: 8px 0;
  font-size: 11.5px;
}
.review-price-details .crl-math { margin-top: 2px; font-size: 11px; }
.review-total-card .drop-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--create-border);
}
.review-total-card .trust-item {
  color: var(--create-muted);
  font-size: 11px;
  font-weight: 700;
}
.review-total-card .trust-item::before { color: var(--create-ok); }

/* One footer owns navigation and submit actions. It is part of the rail,
   never fixed over the page. */
.coach-dock .coach-foot {
  flex: 0 0 auto;
  position: relative;
  margin: 0;
  padding: 12px 14px;
  border-top: 1px solid var(--create-border);
  background: var(--create-card-2);
  border-radius: 0 0 14px 14px;
}
.coach-dock .coach-foot .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.coach-dock .coach-foot .actions > .left { order: 2; }
.coach-dock .coach-foot [data-collect-next] {
  order: 1;
  width: 100%;
  min-height: 46px;
}
.coach-dock .coach-foot form[data-collect-create-form] {
  order: 1;
  flex: 1 1 100%;
  width: 100%;
  gap: 8px;
}
.coach-dock .coach-foot [data-collect-submit-action="add-to-cart"],
.coach-dock .coach-foot [data-collect-guest-cta] {
  order: 1;
  flex: 1 1 100%;
  width: 100%;
}
/* Minimal album creation: one primary outcome, with artwork/style/order as
   optional tools around it. The live book remains the visual payoff. */
.create-shell.is-minimal-create .coach-kicker { display: none; }
.create-shell.is-minimal-create .coach-meta { margin-top: 0; }
.create-shell.is-minimal-create .coach-title { margin-top: 12px; }
.create-shell.is-minimal-create .make-drop-cta {
  border-color: color-mix(in srgb, var(--create-accent) 58%, var(--create-border));
  background: var(--create-card);
  color: var(--create-accent);
}
.create-shell.is-minimal-create .make-drop-cta:hover {
  border-color: var(--create-accent);
  background: var(--create-accent-soft);
  color: var(--create-accent-2);
}
.create-shell.is-minimal-create .create-pdf-option {
  margin-top: 10px;
  border: 0;
  background: transparent;
}
.create-shell.is-minimal-create .create-pdf-option > summary {
  min-height: 44px;
  padding-inline: 2px;
  color: var(--create-muted);
  font-size: 12px;
  font-weight: 750;
}
.create-shell.is-minimal-create .coach-foot form[data-collect-create-form] { order: 1; }
.create-shell.is-minimal-create .coach-foot [data-collect-submit-action="create-album"] {
  flex: 1 1 100%;
  width: 100%;
  min-height: 48px;
}
.create-shell.is-minimal-create .coach-foot [data-collect-next] {
  order: 2;
  min-height: 44px;
  border-color: transparent;
  background: transparent;
  color: var(--create-muted);
}
.create-shell.is-minimal-create .coach-foot [data-collect-next]:hover {
  border-color: var(--create-border);
  background: var(--create-card);
  color: var(--create-ink);
}
.create-shell.is-minimal-create .coach-foot .actions > .left { order: 3; }
.create-shell.is-minimal-create .create-order-option {
  order: 2;
  width: 100%;
  border: 0;
  background: transparent;
}
.create-shell.is-minimal-create .create-order-option > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--create-muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}
.create-shell.is-minimal-create .create-order-option > p {
  margin: 0 0 8px;
  color: var(--create-muted);
  font-size: 11.5px;
  line-height: 1.4;
  text-align: center;
}
.create-shell.is-minimal-create .create-order-option [data-collect-next] {
  width: 100%;
}

@media (min-width: 1024px) {
  body.collect-builder-root { overflow: visible; }
  body.collect-builder-root main.flex-1 { min-height: 0; }
  .create-shell.is-guided {
    --pk-workspace-gap: clamp(18px, 1.15vw, 32px);
    --pk-workspace-rail-min: 360px;
    --pk-workspace-rail-ideal: 24vw;
    --pk-workspace-rail-max: 520px;
    min-height: 680px;
    height: calc(100vh - var(--sm-nav-height, 46px) - 56px);
    height: calc(100dvh - var(--sm-nav-height, 46px) - 56px);
    max-width: none;
    margin: 0;
    padding: clamp(18px, 1.2vw, 32px);
    overflow: hidden;
  }
  .create-shell.is-guided > .create-main {
    display: flex;
    flex-direction: column;
  }
  .create-shell.is-guided .create-layout { flex: 1 1 auto; }
  .create-shell.is-guided .preview-pane,
  .create-shell.is-guided [data-collect-preview-panel="album"],
  .create-shell.is-guided [data-collect-preview-panel="pack"],
  .create-shell.is-guided [data-collect-preview-panel="distribution"] {
    height: 100%;
  }
  .create-shell.is-guided .preview-pane.album-preview .album-preview-stage { height: 100%; }
}

/* Large-format monitors are editing surfaces, not oversized landing pages.
   The canvas earns the extra room while the task rail remains comfortably
   readable and bounded. This keeps the album and every review proof useful on
   2K/4K displays without stretching form copy into long lines. */
@media (min-width: 1800px) {
  .coach-dock .coach-head { padding: 22px 24px 18px; }
  .coach-dock .coach-title { font-size: clamp(24px, 1.35vw, 30px); }
  .coach-dock .coach-body {
    max-width: 48ch;
    font-size: 14px;
  }
  .coach-panel-host { padding: 22px 24px 28px; }
  .coach-dock .coach-foot { padding: 14px 18px; }
  .make-drop-title { font-size: 15px; }
  .make-drop-body { font-size: 13px; }
  .package-proof-head > div { max-width: 560px; }
  .package-proof-head p { font-size: 14px; }
  .package-proof-canvas .pack-showcase {
    max-width: 1040px;
    transform: scale(1.08);
    transform-origin: center;
  }
}

@media (max-width: 1023px) {
  body.collect-builder-root { overflow: visible; }
  .create-shell.is-guided > .create-main,
  .create-shell.is-guided .coach-dock {
    width: min(100%, 760px);
    margin-inline: auto;
  }
  .create-shell.is-guided .preview-pane.album-preview .album-preview-stage {
    min-height: clamp(300px, 54vw, 430px);
  }
  .create-shell.is-guided [data-collect-album-preview] > .book { width: min(100%, 560px); }
  .create-shell.is-guided [data-collect-album-preview] > .book.js-ready .book-spread,
  .create-shell.is-guided [data-collect-album-preview] > .book:not(.js-ready) .book-spread { aspect-ratio: auto; }
  .create-shell.is-guided [data-collect-album-preview] > .book.js-ready.is-single-page .book-side.left {
    display: flex;
    flex: 0 1 min(100%, 430px);
    width: min(100%, 430px);
    max-width: 430px;
  }
  .create-shell.is-guided [data-collect-album-preview] > .book.js-ready.is-single-page .book-side.right,
  .create-shell.is-guided [data-collect-album-preview] > .book.js-ready.is-single-page .book-spine { display: none; }
  .create-shell.is-guided [data-collect-album-preview] > .book.js-ready.is-single-page .book-side > .album-doc-page,
  .book.js-ready.is-single-page .book-side .album-doc-page {
    height: auto;
    aspect-ratio: var(--album-page-aspect, 2000 / 2160);
  }
  .create-shell.is-guided [data-collect-album-preview] > .book .book-closed-cover { max-width: min(72%, 360px); }
}

@media (max-width: 520px) {
  body.collect-builder-root .collect-subnav {
    height: 48px;
    padding-inline: 14px;
  }
  .collect-builder-root .collect-subnav .crumb ol { flex-wrap: nowrap; overflow: hidden; }
  .collect-builder-root .collect-subnav .crumb li:first-child,
  .collect-builder-root .collect-subnav .crumb li:nth-child(2) { display: none; }
  .create-shell.is-guided { --pk-workspace-gap: 10px; padding: 10px; }
  .create-shell.is-guided .create-ribbon {
    min-height: 40px;
    margin-bottom: 8px;
    padding: 8px 10px;
    font-size: 12px;
  }
  .create-shell.is-guided .preview-pane.album-preview .album-preview-stage {
    min-height: 270px;
    padding: 14px 10px;
  }
  .coach-dock .coach-head { padding: 16px 16px 13px; }
  .coach-panel-host { padding: 16px; }
  .coach-dock .coach-title { font-size: 20px; }
  .coach-dock input[type="text"],
  .coach-dock textarea,
  .coach-dock select { font-size: 16px; }
  .create-identity-grid { grid-template-columns: 1fr; }
  .coach-panel-host .dream-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .create-shell.is-guided .dream-shot { min-height: 86px; }
  .make-drop-head { display: block; }
  .make-drop-counter { margin-top: 8px; }
  .make-drop .pdf-import-strip { grid-template-columns: 1fr; }
  .make-drop .pdf-import-feedback { grid-template-columns: minmax(0, 1fr); }
  .make-drop .pdf-import-cancel {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
  }
  .album-settings > summary { padding-inline: 12px; }
  .odds-mode-row,
  .custom-odds-fields { grid-template-columns: 1fr; }
  .review-proof-facts { grid-template-columns: 1fr; }
  .review-fact.is-wide { grid-column: auto; }
  .package-artwork-row { grid-template-columns: 42px minmax(0, 1fr); }
  .package-editor-form,
  .package-editor-unavailable { grid-column: 2; justify-self: start; }
  .coach-dock .coach-foot { padding: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .coach-panel-host [data-collect-step],
  .create-shell.is-guided .dream-shot { animation: none !important; transition: none; }
}

/* ============================================================
   Deep-dive pass: the art tray and the 3D pack.
   ============================================================ */

/* --- the art tray: the album's own upload space --- */
.art-tray {
  display: flex; gap: 10px; align-items: stretch;
  margin-top: 12px;
}
.art-tray .art-tray-drop {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  border: 2px dashed color-mix(in srgb, var(--create-accent, var(--sm-orange)) 50%, transparent);
  background: color-mix(in srgb, var(--create-accent, var(--sm-orange)) 6%, var(--sm-card));
  border-radius: 10px;
  cursor: pointer;
  font: inherit; text-align: left;
}
.art-tray .art-tray-drop:hover,
.art-tray.is-dragover .art-tray-drop {
  background: color-mix(in srgb, var(--create-accent, var(--sm-orange)) 14%, var(--sm-card));
}
.art-tray .art-tray-plus {
  font-size: 26px; font-weight: 900; line-height: 1;
  color: var(--create-accent, var(--sm-orange));
}
.art-tray .art-tray-copy { display: flex; flex-direction: column; gap: 1px; }
.art-tray .art-tray-copy strong { font-size: 13px; font-weight: 800; color: var(--sm-text); }
.art-tray .art-tray-copy span { font-size: 11.5px; color: var(--sm-muted); }
.art-tray .art-tray-thumbs {
  display: flex; gap: 10px; align-items: center;
  overflow-x: auto;
  padding: 4px 2px 8px;
  min-width: 0;
}
.art-tray .art-tray-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 54px; height: 54px;
  padding: 2px;
  border: 1px solid var(--sm-border-2);
  border-radius: 8px;
  background: var(--sm-card);
  cursor: pointer;
}
.art-tray .art-tray-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.art-tray .art-tray-thumb-n {
  position: absolute; left: 50%; bottom: -7px;
  transform: translateX(-50%);
  font-size: 9px; font-weight: 800;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--sm-text); color: var(--sm-card);
  white-space: nowrap;
}
.art-tray .art-tray-drop:focus-visible,
.art-tray .art-tray-thumb:focus-visible {
  outline: 2px solid var(--create-accent, var(--sm-orange));
  outline-offset: 2px;
}

/* Album purchase strip: server-priced forms, buyer-friendly pack quantity. */
.album-purchase-row {
  margin-top: 22px;
  padding: 14px;
  border: 1px solid var(--sm-border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--sm-card) 88%, var(--sm-page));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.album-purchase-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.cart-add-form {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cart-add-form.has-qty {
  padding: 4px;
  border: 1px solid var(--sm-border);
  border-radius: 8px;
  background: var(--sm-card);
  flex-wrap: wrap;
}
.cart-add-qty {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-left: 8px;
  color: var(--sm-muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.cart-add-qty input {
  width: 58px;
  height: 36px;
  border: 1px solid var(--sm-border-2);
  border-radius: 6px;
  background: var(--sm-page);
  color: var(--sm-text);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
}
.cart-add-qty input:focus-visible {
  outline: 2px solid var(--sm-orange);
  outline-offset: 2px;
}
.cart-add-form.has-qty .btn {
  white-space: nowrap;
}
.album-pack-buy {
  flex: 1 1 520px;
}

/* The collector's sealed-pack shelf. It is part of the album page, not a
   nested app: packs wrap onto the page and the rip stage follows below. */
.album-pack-shelf {
  width: min(100%, 1080px);
  margin: 28px auto 0;
  padding: 20px;
  border: 1px solid var(--sm-border);
  border-radius: 16px;
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--sm-orange) 9%, transparent), transparent 28%),
    var(--sm-card);
  box-shadow: 0 18px 44px rgba(60, 30, 0, .08);
}
.pack-shelf-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}
.pack-shelf-head h2 {
  margin: 0;
  color: var(--sm-text);
  font-size: 22px;
  line-height: 1.12;
  font-weight: 900;
}
.pack-shelf-head .muted {
  margin: 0;
  color: var(--sm-muted);
  font-size: 13px;
  line-height: 1.45;
  max-width: 62ch;
}
.pack-shelf-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 10px;
}
.pack-shelf-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 70px;
  padding: 10px;
  border: 1px solid var(--sm-border-2);
  border-radius: 12px;
  background: var(--sm-page);
  color: var(--sm-text);
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.pack-shelf-item:hover {
  border-color: color-mix(in srgb, var(--sm-orange) 42%, var(--sm-border-2));
  background: color-mix(in srgb, var(--sm-orange) 5%, var(--sm-page));
}
.pack-shelf-item.is-selected {
  border-color: var(--sm-orange);
  background: color-mix(in srgb, var(--sm-orange) 10%, var(--sm-card));
  box-shadow: inset 0 0 0 1px var(--sm-orange);
}
.pack-shelf-item.is-opened {
  opacity: .62;
}
.pack-shelf-item.is-opened .pack-shelf-mini {
  filter: grayscale(.5);
}
.pack-shelf-mini {
  position: relative;
  flex: 0 0 auto;
  width: 28px;
  height: 42px;
  border-radius: 5px;
  background:
    linear-gradient(115deg, rgba(255,255,255,.18), transparent 44%),
    linear-gradient(160deg, var(--sm-orange), color-mix(in srgb, var(--sm-orange) 66%, #4c2615));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 5px 10px rgba(60,30,0,.16);
}
.pack-shelf-mini::before,
.pack-shelf-mini::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
}
.pack-shelf-mini::before { top: 7px; }
.pack-shelf-mini::after { bottom: 7px; }
.pack-shelf-mini-strip {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 6px;
  border-left: 1px dashed rgba(255,255,255,.38);
}
.pack-shelf-label {
  display: block;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
}
.pack-shelf-index {
  display: block;
  color: var(--sm-muted);
  font-size: 10.5px;
  font-weight: 800;
}
.pack-shelf-item:focus-visible {
  outline: 2px solid var(--sm-orange);
  outline-offset: 2px;
}
.album-rip-stage {
  margin-top: 18px;
  padding: 22px;
  border-radius: 14px;
  border: 1px solid var(--sm-border);
  background:
    radial-gradient(circle at 50% 12%, rgba(255,255,255,.74), transparent 34%),
    color-mix(in srgb, var(--sm-art-cream) 72%, var(--sm-card));
}
.album-rip-stage .pack-showcase {
  gap: 0;
}
.album-rip-stage .pack-box-preview {
  display: none;
}
.album-rip-stage .pack-preview.pack-3d {
  --create-accent: var(--sm-orange);
}
.rip-reveal-note {
  min-height: 22px;
  margin-top: 12px;
  text-align: center;
  color: var(--sm-brown);
  font-size: 13px;
  font-weight: 800;
}
.pack-peek-thumb.is-duplicate::after {
  content: attr(data-duplicate-label);
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 4px;
  padding: 2px 3px;
  border-radius: 999px;
  background: rgba(76, 38, 21, .82);
  color: #fff;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.pack-peek-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sm-brown);
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.72), transparent 32%),
    var(--sm-art-cream);
  font-size: 15px;
  font-weight: 900;
}

/* --- the 3D pack: one object, click to flip front/back --- */
.pack-3d .pack-3d-scene {
  perspective: 1100px;
  display: flex; justify-content: center;
  padding: 8px 0 2px;
}
/* A resting presentation tilt sells the object; the flip transition
   provides the motion (a perpetual float would fight pointer stability). */
.pack-3d .pack-3d-flipper:not(.is-flipped):hover { transform: rotateY(-10deg) rotateX(2deg); }
.pack-3d .pack-3d-flipper {
  position: relative;
  border: 0; background: none; padding: 0;
  cursor: pointer;
  font: inherit;
  transform-style: preserve-3d;
  transition: transform .65s cubic-bezier(.2, .7, .2, 1);
}
.pack-3d .pack-3d-flipper.is-flipped { transform: rotateY(180deg); }
.pack-3d .pack-face-wrap { backface-visibility: hidden; }
.pack-3d .pack-face-wrap.pack-face-back {
  position: absolute; inset: 0;
  transform: rotateY(180deg);
  display: flex; align-items: center; justify-content: center;
}
/* Face names live in the flip hint now. */
.pack-3d .pack-face-label { display: none; }
.pack-3d .pack-flip-hint {
  text-align: center;
  font-size: 11.5px; color: var(--sm-muted);
  margin-top: 8px;
}
.pack-3d .pack-3d-flipper:focus-visible {
  outline: 2px solid var(--create-accent, var(--sm-orange));
  outline-offset: 4px;
}

.pack-box-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-width: 190px;
}
.pack-box-preview[data-pack-box-type="none"] {
  opacity: .58;
}
.pack-box-object {
  position: relative;
  width: 190px;
  height: 150px;
  perspective: 700px;
}
.pack-box-lid {
  position: absolute;
  left: 22px;
  right: 22px;
  top: 10px;
  height: 46px;
  border-radius: 8px 8px 3px 3px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--pack-face, #b9977a) 82%, white), var(--pack-face, #b9977a));
  transform: skewX(-10deg) rotateX(58deg);
  transform-origin: bottom;
  box-shadow: 0 14px 28px rgba(60, 30, 0, .12);
}
.pack-box-face {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  height: 88px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 28% 24%, rgba(255,255,255,.32), transparent 24%),
    linear-gradient(160deg, var(--pack-face, #b9977a), color-mix(in srgb, var(--pack-face, #b9977a) 78%, #4c2615));
  border: 1px solid rgba(60,30,0,.24);
  box-shadow: 0 22px 40px rgba(60,30,0,.22), inset 0 1px 0 rgba(255,255,255,.28);
  color: var(--pack-paper);
  display: grid;
  grid-template-columns: 36px 1fr;
  grid-template-rows: 1fr auto;
  gap: 4px 10px;
  padding: 16px;
}
.pack-box-artwork {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  pointer-events: none;
}
.pack-box-object.has-artwork .pack-box-logo,
.pack-box-object.has-artwork .pack-box-title,
.pack-box-object.has-artwork .pack-box-count { display: none; }
.pack-box-logo {
  position: relative;
  z-index: 1;
  grid-row: 1 / span 2;
  width: 32px;
  height: 32px;
  align-self: center;
  border-radius: 8px;
  background: rgba(255,255,255,.26);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.22);
}
.pack-box-title {
  position: relative;
  z-index: 1;
  align-self: end;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.05;
  max-width: 90px;
  overflow-wrap: anywhere;
}
.pack-box-count {
  position: relative;
  z-index: 1;
  align-self: start;
  font-size: 10px;
  font-weight: 800;
  opacity: .78;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.pack-box-packs {
  position: absolute;
  left: 46px;
  right: 46px;
  bottom: 96px;
  display: flex;
  justify-content: center;
  gap: 5px;
}
.pack-box-packs span {
  display: block;
  width: 18px;
  height: 42px;
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, var(--pack-face, #b9977a), color-mix(in srgb, var(--pack-face, #b9977a) 75%, #1a1a1a));
  border: 1px solid rgba(60,30,0,.18);
  box-shadow: 0 5px 10px rgba(60,30,0,.16);
}
.pack-box-packs span:nth-child(2) { transform: translateY(-4px); }
.pack-box-packs span:nth-child(3) { transform: translateY(2px); }
.pack-box-packs span:nth-child(4) { transform: translateY(-2px); }
.pack-box-copy {
  max-width: 220px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pack-box-copy strong {
  font-size: 13px;
  font-weight: 900;
  color: var(--create-ink, var(--sm-text));
}
.pack-box-copy span {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--create-ink-2, var(--sm-muted));
}
.pack-box-preview[data-pack-box-type="none"] .pack-box-object {
  filter: grayscale(.25);
}
.pack-box-preview[data-pack-box-type="none"] .pack-box-lid,
.pack-box-preview[data-pack-box-type="none"] .pack-box-face,
.pack-box-preview[data-pack-box-type="none"] .pack-box-packs {
  display: none;
}
.pack-box-preview[data-pack-box-type="none"] .pack-box-object::before {
  content: "";
  position: absolute;
  inset: 42px 30px;
  border-radius: 10px;
  border: 1px dashed var(--create-border-2, var(--sm-border-2));
  background: color-mix(in srgb, var(--sm-page) 80%, transparent);
}
.pack-box-preview[data-pack-box-type="none"] .pack-box-object::after {
  content: "";
  position: absolute;
  left: 62px;
  right: 62px;
  top: 73px;
  border-top: 3px solid var(--sm-muted);
  transform: rotate(-28deg);
  opacity: .8;
}
.pack-box-preview[data-pack-box-type="standard"] .pack-box-lid,
.pack-box-preview[data-pack-box-type="standard"] .pack-box-face {
  --pack-face: #c9a47d;
}
.pack-box-preview[data-pack-box-type="standard"] .pack-box-face {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
  justify-items: center;
  padding: 18px 16px 14px;
}
.pack-box-preview[data-pack-box-type="standard"] .pack-box-logo {
  grid-row: auto;
  width: 42px;
  height: 24px;
  align-self: end;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
}
.pack-box-preview[data-pack-box-type="standard"] .pack-box-logo::before {
  content: "";
  display: block;
  width: 18px;
  height: 8px;
  margin: 8px auto 0;
  border-radius: 999px;
  background: rgba(255,255,255,.46);
}
.pack-box-preview[data-pack-box-type="standard"] .pack-box-title {
  display: none;
}
.pack-box-preview[data-pack-box-type="standard"] .pack-box-count {
  text-align: center;
  color: rgba(255,255,255,.86);
}
.pack-box-preview[data-pack-box-type="custom"] .pack-box-lid {
  --pack-face: var(--album-accent, var(--sm-orange));
}
.pack-box-preview[data-pack-box-type="custom"] .pack-box-face {
  --pack-face: var(--album-accent, var(--sm-orange));
  background:
    radial-gradient(circle at 28% 24%, rgba(255,255,255,.34), transparent 24%),
    linear-gradient(135deg, rgba(255,255,255,.16) 0 16%, transparent 16% 26%, rgba(255,255,255,.12) 26% 34%, transparent 34%),
    linear-gradient(160deg, var(--pack-face), color-mix(in srgb, var(--pack-face) 70%, #4c2615));
}
.pack-box-preview[data-pack-box-type="custom"] .pack-box-logo {
  background: rgba(255,255,255,.32);
}
.pack-box-preview[data-pack-box-type="custom"] .pack-box-count {
  color: rgba(255,255,255,.84);
}

@media (max-width: 900px) {
  .album-purchase-row {
    align-items: stretch;
    flex-direction: column;
  }
  /* The desktop purchase row uses a 520px flex basis to give the pack
     explanation room beside the order actions. Once the row stacks, that
     basis becomes a large empty mobile card; let the content size itself. */
  .album-pack-buy {
    flex: 0 1 auto;
    width: 100%;
  }
  .pack-purchase-cta {
    grid-template-columns: 42px minmax(0, 1fr);
  }
  .pack-purchase-cta .cart-add-form {
    grid-column: 1 / -1;
    justify-self: start;
  }
  .album-purchase-actions {
    justify-content: flex-start;
  }
  .pack-shelf-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .pack-shelf-row {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }
  .album-rip-stage {
    padding: 18px 12px;
  }
  .pack-showcase {
    flex-direction: column;
    gap: 28px;
  }
  .create-shell.is-guided .pack-3d .pack-3d-flipper,
  .create-shell.is-guided .pack-3d .pack-3d-flipper:not(.is-flipped):hover {
    transform: scale(1.05);
  }
  .create-shell.is-guided .pack-3d .pack-3d-flipper.is-flipped {
    transform: scale(1.05) rotateY(180deg);
  }
  .pack-box-preview {
    min-width: 0;
  }
}

@media (max-width: 520px) {
  .album-purchase-actions,
  .album-purchase-actions .cart-add-form.has-qty,
  .pack-purchase-cta .cart-add-form.has-qty {
    width: 100%;
  }
  .cart-add-form.has-qty {
    justify-content: space-between;
  }
}


@media (prefers-reduced-motion: reduce) {
  .pack-3d .pack-3d-flipper { transition: none; }
}



/* Review is a physical packaging proof, not two objects marooned in an
   album-sized canvas. The warm registration grid and numbered legend evoke
   Sticker Mule's proof workflow while the shared PackPreview stays fully
   interactive (flip/rip) and Studio remains the editing surface. */
.create-shell.is-guided [data-collect-preview-panel="pack"] .pack-preview-stage {
  width: 100%;
  height: 100%;
  min-height: 480px;
  box-sizing: border-box;
  display: block;
  padding: 0;
  overflow: hidden;
  background:
    linear-gradient(rgba(111, 78, 48, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111, 78, 48, .035) 1px, transparent 1px),
    linear-gradient(145deg, #fffdf7, #f4eddf);
  background-size: 28px 28px, 28px 28px, auto;
}
.package-proof-board {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto minmax(330px, 1fr) auto;
  padding: clamp(24px, 3.4vw, 48px);
  color: var(--create-ink, var(--sm-text));
}
.package-proof-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.package-proof-head > div { max-width: 460px; }
.package-proof-kicker {
  display: block;
  margin-bottom: 8px;
  color: var(--create-accent, var(--sm-orange));
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
  line-height: 1;
  text-transform: uppercase;
}
.package-proof-head h2 {
  margin: 0;
  color: var(--create-ink, var(--sm-text));
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 950;
  letter-spacing: -.045em;
  line-height: 1;
}
.package-proof-head p {
  max-width: 46ch;
  margin: 10px 0 0;
  color: var(--create-muted, var(--sm-muted));
  font-size: 13px;
  line-height: 1.5;
}
.package-proof-studio-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--create-accent, var(--sm-orange)) 30%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--create-accent, var(--sm-orange)) 7%, #fff);
  color: var(--create-accent, var(--sm-orange));
  font-size: 10.5px;
  font-weight: 850;
  white-space: nowrap;
}
.package-proof-studio-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 14%, transparent);
}
.package-proof-canvas {
  position: relative;
  z-index: 1;
  min-height: 330px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 18px 30px;
}
.package-proof-canvas::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(75, 52, 32, .17) 15% 85%, transparent);
  box-shadow: 0 20px 42px 16px rgba(82, 49, 25, .08);
}
.package-proof-registration {
  position: absolute;
  width: 18px;
  height: 18px;
  opacity: .42;
}
.package-proof-registration::before,
.package-proof-registration::after {
  content: "";
  position: absolute;
  background: var(--create-accent, var(--sm-orange));
}
.package-proof-registration::before { left: 8px; top: 0; width: 1px; height: 18px; }
.package-proof-registration::after { top: 8px; left: 0; width: 18px; height: 1px; }
.package-proof-registration.registration--tl { left: 0; top: 22px; }
.package-proof-registration.registration--br { right: 0; bottom: 22px; }
.package-proof-canvas .pack-preview.pack-3d {
  width: min(100%, 780px);
  height: 100%;
  justify-content: center;
}
.package-proof-canvas .pack-showcase {
  position: relative;
  z-index: 1;
  min-height: 340px;
  gap: clamp(68px, 8vw, 120px);
  align-items: center;
}
.package-proof-canvas .pack-object {
  min-width: 240px;
}
.package-proof-canvas .pack-box-preview {
  min-width: 250px;
  transform: scale(1.14);
  transform-origin: center;
}
.create-shell.is-guided .package-proof-canvas .pack-3d .pack-3d-flipper { transform: scale(1.38); }
.create-shell.is-guided .package-proof-canvas .pack-3d .pack-3d-flipper:not(.is-flipped):hover { transform: scale(1.38) rotateY(-10deg) rotateX(2deg); }
.create-shell.is-guided .package-proof-canvas .pack-3d .pack-3d-flipper.is-flipped { transform: scale(1.38) rotateY(180deg); }
.create-shell.is-guided .package-proof-canvas .pack-3d .pack-flip-hint { margin-top: 34px; }
.package-proof-foot {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto auto minmax(220px, 1fr);
  align-items: center;
  gap: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(75, 52, 32, .14);
}
.package-proof-foot > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--create-ink-2, var(--sm-muted));
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.package-proof-foot > span strong {
  color: var(--create-accent, var(--sm-orange));
  font-size: 9px;
  letter-spacing: .08em;
}
.package-proof-foot p {
  margin: 0;
  color: var(--create-muted, var(--sm-muted));
  font-size: 10.5px;
  line-height: 1.4;
  text-align: right;
}

/* The 3D pack and optional presentation box share one stage. */
.pack-preview.pack-3d { display: flex; flex-direction: column; align-items: center; gap: 0; }
.pack-showcase {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
  width: 100%;
}
.pack-object { display: flex; flex-direction: column; align-items: center; }

/* A Studio design owns the full printable face. Generated title/ribbon
   furniture retires so the mockup never double-labels custom artwork. */
.pack-front.has-artwork .pack-artwork {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.pack-front.has-artwork > .pack-front-vertical,
.pack-front.has-artwork > .pack-ribbon,
.pack-front.has-artwork > .pack-edge-text { display: none; }
.pack-front.has-artwork > .pack-odds-slip { z-index: 2; }

@media (max-width: 900px) and (min-width: 621px) {
  .package-proof-canvas .pack-showcase { flex-direction: row; }
}

@media (max-width: 620px) {
  .package-proof-board {
    grid-template-rows: auto minmax(560px, 1fr) auto;
    padding: 22px 18px;
  }
  .package-proof-head { flex-direction: column; gap: 12px; }
  .package-proof-head h2 { font-size: 25px; }
  .package-proof-canvas { min-height: 560px; padding-inline: 0; }
  .package-proof-canvas .pack-showcase { flex-direction: column; gap: 52px; }
  .package-proof-canvas .pack-object { min-width: 210px; }
  .package-proof-canvas .pack-box-preview { min-width: 210px; transform: none; }
  .create-shell.is-guided .package-proof-canvas .pack-3d .pack-3d-flipper,
  .create-shell.is-guided .package-proof-canvas .pack-3d .pack-3d-flipper:not(.is-flipped):hover { transform: scale(1.15); }
  .create-shell.is-guided .package-proof-canvas .pack-3d .pack-3d-flipper.is-flipped { transform: scale(1.15) rotateY(180deg); }
  .package-proof-foot { grid-template-columns: 1fr 1fr; gap: 10px; }
  .package-proof-foot p { grid-column: 1 / -1; text-align: left; }
}

/* ============================================================
   The decoupled pack: its own template catalog, and the option
   to ship with no packs at all.
   ============================================================ */
.packs-mode-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.packs-mode-card {
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 14px;
  border: 1px solid var(--sm-border-2);
  border-radius: 10px;
  background: var(--sm-page);
  cursor: pointer;
  font: inherit; text-align: left;
}
.packs-mode-card strong { font-size: 13.5px; font-weight: 800; color: var(--sm-text); }
.packs-mode-card span { font-size: 11.5px; color: var(--sm-muted); line-height: 1.4; }
.packs-mode-card.is-selected {
  border-color: var(--sm-text);
  background: var(--sm-page-2);
  box-shadow: inset 0 0 0 1px var(--sm-text);
}

.pack-template-grid,
.pack-box-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pack-template-card,
.pack-box-card {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--sm-border-2);
  border-radius: 10px;
  background: var(--sm-card);
  cursor: pointer;
  font: inherit; text-align: left;
}
.pack-template-card.is-selected,
.pack-box-card.is-selected {
  border-color: var(--sm-text);
  box-shadow: inset 0 0 0 1px var(--sm-text);
}
.pack-template-card .pack-template-swatch {
  flex: 0 0 auto;
  width: 24px; height: 32px;
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 1px 3px rgba(0, 0, 0, .18);
}
.pack-template-swatch.finish-chip--kraft { background: var(--sm-art-brown-3); }
.pack-template-swatch.finish-chip--foil { background: var(--collect-holo); }
.pack-template-swatch.finish-chip--midnight { background: var(--sm-ink); }
.pack-template-swatch.finish-chip--brand { background: var(--album-accent, var(--sm-blue)); }
.pack-template-card .pack-template-copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pack-template-card .pack-template-copy strong { font-size: 13px; font-weight: 800; color: var(--sm-text); }
.pack-template-card .pack-template-copy span { font-size: 11px; color: var(--sm-muted); line-height: 1.35; }
.pack-box-card .pack-template-copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pack-box-card .pack-template-copy strong { font-size: 13px; font-weight: 800; color: var(--sm-text); }
.pack-box-card .pack-template-copy span { font-size: 11px; color: var(--sm-muted); line-height: 1.35; }
.pack-box-glyph {
  position: relative;
  flex: 0 0 auto;
  width: 32px;
  height: 28px;
  border-radius: 5px;
  background: var(--sm-page-2);
  border: 1px solid var(--sm-border-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.pack-box-glyph::before,
.pack-box-glyph::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}
.pack-box-glyph--standard::before {
  left: 7px; right: 7px; bottom: 5px; height: 13px;
  border-radius: 3px 3px 2px 2px;
  background: #c9a47d;
}
.pack-box-glyph--standard::after {
  left: 9px; right: 9px; top: 5px; height: 8px;
  border-radius: 2px 2px 0 0;
  background: color-mix(in srgb, #c9a47d 55%, white);
}
.pack-box-glyph--custom::before {
  left: 7px; right: 7px; bottom: 5px; height: 13px;
  border-radius: 3px 3px 2px 2px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.3) 0 22%, transparent 22% 34%, rgba(255,255,255,.2) 34% 45%, transparent 45%),
    var(--sm-orange);
}
.pack-box-glyph--custom::after {
  left: 9px; right: 9px; top: 5px; height: 8px;
  border-radius: 2px 2px 0 0;
  background: color-mix(in srgb, var(--sm-orange) 55%, white);
}
.packs-mode-card:focus-visible,
.pack-template-card:focus-visible,
.pack-box-card:focus-visible {
  outline: 2px solid var(--create-accent, var(--sm-orange));
  outline-offset: 2px;
}

/* No packs: everything pack-derived retires — the config surface, the
   cinema, the colophon's sealed pack, and the per-pack odds phrasing. */
.create-shell.is-no-packs .packs-only-controls,
.create-shell.is-no-packs .pack-cinema.packs-only,
.create-shell.is-no-packs .pack-box-preview,
.create-shell.is-no-packs .colophon .colophon-pack { display: none; }

/* ============================================================
   Pack realism: crimped foil seals, wrapper sheen, curvature,
   and finishes that truly re-skin the envelope.
   ============================================================ */
.pack-3d .pack-face {
  position: relative;
  overflow: hidden;
  /* wrapper curvature: darker at the edges, a breath of light at top */
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, .22),
    inset 0 -2px 3px rgba(0, 0, 0, .28),
    inset 12px 0 22px rgba(0, 0, 0, .16),
    inset -12px 0 22px rgba(0, 0, 0, .16),
    0 14px 26px rgba(0, 0, 0, .30);
}
/* crimped heat seals top and bottom (the film prop's pinched foil) */
.pack-3d .pack-face::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .16) 0 3px, rgba(255, 255, 255, .10) 3px 6px) top / 100% 11px no-repeat,
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .16) 0 3px, rgba(255, 255, 255, .10) 3px 6px) bottom / 100% 11px no-repeat;
}
/* plastic sheen sweeping the wrapper */
.pack-3d .pack-face::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg,
    transparent 26%,
    rgba(255, 255, 255, .20) 40%,
    rgba(255, 255, 255, .05) 50%,
    transparent 58%);
}
/* the finish choice re-skins the wrapper stock itself */
.pack-finish--kraft .pack-face {
  background:
    repeating-linear-gradient(3deg, rgba(255, 255, 255, .028) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(94deg, rgba(0, 0, 0, .05) 0 1px, transparent 1px 7px),
    linear-gradient(160deg, var(--sm-art-brown-3), var(--sm-art-brown-2) 55%, var(--sm-art-brown));
}
.pack-finish--foil .pack-face {
  background:
    linear-gradient(115deg, rgba(255, 255, 255, .22), transparent 42%),
    var(--collect-holo);
}
.pack-finish--midnight .pack-face {
  background:
    radial-gradient(circle at 30% 12%, rgba(255, 255, 255, .10), transparent 40%),
    linear-gradient(160deg, color-mix(in srgb, var(--sm-ink) 88%, white 12%), var(--sm-ink) 60%, color-mix(in srgb, var(--sm-ink) 80%, black 20%));
}
.pack-finish--brand .pack-face {
  background:
    linear-gradient(115deg, rgba(255, 255, 255, .16), transparent 45%),
    linear-gradient(160deg,
      color-mix(in srgb, var(--pack-accent, var(--sm-blue)) 88%, #fff 12%),
      color-mix(in srgb, var(--pack-accent, var(--sm-blue)) 82%, #000 18%) 60%,
      color-mix(in srgb, var(--pack-accent, var(--sm-blue)) 65%, #000 35%));
}
/* the peek thumbs read as stickers behind a die-cut window */
.pack-3d .pack-peek-thumb {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85), 0 2px 5px rgba(0, 0, 0, .35);
  border-radius: 6px;
}

/* ============================================================
   The book as one object: closed front cover -> pages -> closed
   back cover, all through the page-turn engine.
   ============================================================ */

/* Album-page books (doc-canonical pages carry their own aspect ratio):
   blank filler pages take the same ratio, so the side beside a closed
   back cover — box kept, visibility-hidden — matches every content
   spread's height and the canvas never jumps. The create book instead
   fixes the ratio on the side itself and stretches pages to 100%. */
.book.js-ready:not(.create-book) .book-side > .book-blank {
  aspect-ratio: var(--album-page-aspect, 2000 / 2160);
}

/* closed on the BACK: same treatment mirrored (the back cover always
   lands on the left via the parity filler) */
.book.js-ready.is-back-closed.back-on-left .book-side.right,
.book.js-ready.is-back-closed.back-on-left .book-spine { visibility: hidden; }
.book.js-ready.is-back-closed.back-on-right .book-side.left,
.book.js-ready.is-back-closed.back-on-right .book-spine { visibility: hidden; }
.book.js-ready.is-back-closed .book-side.left,
.book.js-ready.is-back-closed .book-side.right {
  background: transparent;
  box-shadow: none;
  border: 0;
}

/* the back cover itself: the album's accent carries over */
.book .back-cover-page {
  background: transparent;
  box-shadow: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.back-cover {
  width: min(88%, 360px);
  aspect-ratio: 1 / 1.04;
  border-radius: 12px;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, .12), transparent 45%),
    var(--album-accent, var(--sm-blue));
  box-shadow: 0 16px 30px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .25);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 10%;
  text-align: center;
}
.back-cover .back-cover-tagline {
  font-size: 19px;
  font-weight: 900;
  color: rgba(255, 255, 255, .96);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .25);
}
.back-cover .back-cover-code {
  width: 74px;
  height: 74px;
  border-radius: 10px;
  background:
    repeating-linear-gradient(rgba(0, 0, 0, .85) 0 4px, transparent 4px 8px) 12% 12% / 34% 76% no-repeat,
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .85) 0 4px, transparent 4px 8px) 58% 12% / 30% 76% no-repeat,
    #ffffff;
}
.back-cover .back-cover-hint {
  font-size: 11.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .85);
  max-width: 24ch;
}

/* the art tray only makes sense over open pages */
.album-preview-stage:not(.is-book-open) .art-tray { display: none; }


/* ============================================================
   One stable canvas: every spread — closed covers included —
   renders in the same box, so the book never shrinks or grows
   between turns (measured: it used to swing 364-470px).
   ============================================================ */
.create-book.js-ready .book-side {
  aspect-ratio: 296 / 356;
  min-height: 0;
}
.create-book.js-ready .book-side > .book-page {
  height: 100%;
  box-sizing: border-box;
}
.create-book.js-ready .book-side .back-cover-page {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* the turning leaf inherits the same fixed canvas */
.create-book.js-ready .leaf-face > .book-page { height: 100%; box-sizing: border-box; }

/* ============================================================
   The pack, like the one on the desk: readable front-title composition
   with a sideways ribbon; a perforated pull-tab flap on the back that
   RIPS open and fans out the stickers you caught.
   ============================================================ */

/* --- FRONT: the printed-envelope composition (drop title reads straight) --- */
.pack-3d .pack-front { display: flex; align-items: center; justify-content: center; }
.pack-3d .pack-front-vertical {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 148px;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.pack-3d .pack-brand-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sm-cream, #f3ead9);
  opacity: .92;
}
.pack-3d .pack-brand-rule { width: 16px; height: 1px; background: rgba(255, 255, 255, .5); }
.pack-3d .pack-title {
  margin: 0;
  font-size: 18px;
  line-height: 1.08;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--sm-cream, #f3ead9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  max-width: 148px;
  max-height: 78px; /* three stacked lines max */
  overflow: hidden;
}
.pack-3d .pack-series {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--sm-cream, #fff);
  background: var(--sm-orange);
  padding: 3px 10px 3px 12px;
  border-radius: 3px;
}
/* the angled ribbon banner */
.pack-3d .pack-ribbon {
  position: absolute;
  left: 22px;
  top: 55%;
  transform: translate(-50%, -50%) rotate(-90deg);
  transform-origin: center;
  background: var(--sm-orange);
  color: var(--sm-cream, #fff);
  font-size: 9.5px;
  font-style: italic;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 3px 14px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 50%, 100% 100%, 0 100%, 6px 50%);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
  white-space: nowrap;
}
/* the maker address in tiny type along the edge */
.pack-3d .pack-edge-text {
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-size: 6.5px;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .5);
  max-height: 80%;
  overflow: hidden;
}
.pack-preview.pack-3d .pack-front .pack-odds-slip {
  position: absolute;
  right: 10px;
  left: auto;
  width: auto;
  bottom: 10px;
  transform: none;
}

/* --- BACK: the perforated flap + sideways maker line --- */
.pack-3d .pack-back { overflow: visible; }
.pack-3d .pack-flap {
  position: absolute;
  inset: 11% 9% 13% 9%;
  border: 1.5px dashed rgba(255, 255, 255, .30);
  border-radius: 9px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .03), rgba(0, 0, 0, .08));
  transition: transform .45s ease, opacity .45s ease;
}
.pack-3d .pack-maker-line {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  white-space: nowrap;
  font-size: 8px;
  letter-spacing: .07em;
  color: var(--sm-cream, #f3ead9);
  opacity: .9;
  max-width: 188px;
  overflow: hidden;
}
.pack-3d .pack-back .pack-back-text {
  position: absolute;
  left: 50%;
  bottom: 20%;
  transform: translateX(-50%);
  font-size: 8px;
  color: rgba(255, 255, 255, .55);
  max-width: 80%;
  text-align: center;
}
.pack-3d .pack-back .pack-qr {
  position: absolute;
  right: 12%;
  bottom: 15%;
  transform: scale(.8);
  transform-origin: bottom right;
}

/* the tear strip along the flap's top, jagged bottom edge */
.pack-3d .pack-rip-strip {
  position: absolute;
  top: -1.5px;
  left: -1.5px;
  right: -1.5px;
  height: 20px;
  border-radius: 9px 9px 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(0, 0, 0, .10)), inherit;
  background-color: rgba(255, 255, 255, .04);
  border-bottom: 1px dashed rgba(255, 255, 255, .4);
}
.pack-3d .pack-rip-strip-edge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 6px;
  background: #fff;
  opacity: 0;
  clip-path: polygon(0 0, 4% 70%, 9% 20%, 15% 90%, 22% 30%, 28% 80%, 35% 10%, 42% 75%, 50% 25%, 58% 85%, 65% 15%, 72% 70%, 80% 35%, 87% 90%, 93% 20%, 100% 60%, 100% 100%, 0 100%);
}

/* --- the pull tab (sibling button over the flap's top edge) --- */
.pack-3d .pack-pull-tab {
  display: none;
  position: absolute;
  top: 14%;
  left: 50%;
  transform: translate(-50%, -70%);
  width: 46px;
  height: 24px;
  border: 0;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--sm-art-brown-3) 88%, white 12%), var(--sm-art-brown-2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 3px 6px rgba(0, 0, 0, .3);
  cursor: pointer;
  z-index: 8;
}
.pack-3d .pack-pull-tab .pack-pull-tab-grip {
  position: absolute;
  left: 20%;
  right: 20%;
  top: 45%;
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .5) 0 4px, transparent 4px 8px);
}
.pack-3d.is-backing .pack-pull-tab { display: block; }
.pack-3d.is-backing.is-ripped .pack-pull-tab {
  transform: translate(-50%, -70%) rotate(6deg);
  opacity: .55;
}
.pack-3d .pack-pull-tab:focus-visible {
  outline: 2px solid var(--create-accent, var(--sm-orange));
  outline-offset: 3px;
}

/* --- the RIP --- */
@keyframes pack-rip-tear {
  0% { transform: translate(0, 0) rotate(0); }
  30% { transform: translate(-12%, -10%) rotate(-4deg); }
  100% { transform: translate(-130%, -60%) rotate(-18deg); opacity: 0; }
}
.pack-3d.is-ripping .pack-rip-strip {
  animation: pack-rip-tear .85s cubic-bezier(.3, .6, .4, 1) forwards;
}
.pack-3d.is-ripping .pack-rip-strip-edge { opacity: 1; }
.pack-3d.is-ripping .pack-pull-tab {
  animation: pack-rip-tear .85s cubic-bezier(.3, .6, .4, 1) forwards;
}
.pack-3d.is-ripped .pack-rip-strip { display: none; }
/* the torn mouth left behind */
.pack-3d.is-ripped .pack-flap {
  border-top-color: transparent;
}
.pack-3d.is-ripped .pack-flap::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 2%;
  right: 2%;
  height: 5px;
  background: #fff;
  clip-path: polygon(0 100%, 3% 20%, 8% 80%, 14% 10%, 21% 70%, 29% 25%, 36% 85%, 44% 15%, 52% 75%, 60% 30%, 68% 90%, 76% 20%, 84% 70%, 91% 35%, 96% 80%, 100% 100%);
}

/* --- the catch: stickers fan OUT of the ripped pack --- */
.pack-3d .pack-rip-reveal {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.pack-3d .pack-rip-reveal .pack-peek {
  position: relative;
  width: 100%;
  height: 100%;
}
.pack-3d .pack-rip-reveal .pack-peek-thumb {
  position: absolute;
  left: 50%;
  top: 38%;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 10px;
  background: var(--sm-cream, #f3ead9);
  box-shadow: inset 0 0 0 3px #fff, 0 6px 14px rgba(0, 0, 0, .35);
  opacity: 0;
  transform: translateY(26%) scale(.7);
  transition: transform .5s cubic-bezier(.2, .8, .3, 1.15), opacity .35s ease;
  overflow: hidden;
}
.pack-3d .pack-rip-reveal .pack-peek-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.pack-3d.is-ripped .pack-rip-reveal .pack-peek-thumb { opacity: 1; }
.pack-3d.is-ripped .pack-rip-reveal .pack-peek-thumb:nth-child(1) { transform: translate(-108%, -28%) rotate(-14deg); transition-delay: .05s; }
.pack-3d.is-ripped .pack-rip-reveal .pack-peek-thumb:nth-child(2) { transform: translate(-56%, -52%) rotate(-6deg); transition-delay: .12s; }
.pack-3d.is-ripped .pack-rip-reveal .pack-peek-thumb:nth-child(3) { transform: translate(-4%, -64%) rotate(0deg); transition-delay: .19s; }
.pack-3d.is-ripped .pack-rip-reveal .pack-peek-thumb:nth-child(4) { transform: translate(48%, -52%) rotate(6deg); transition-delay: .26s; }
.pack-3d.is-ripped .pack-rip-reveal .pack-peek-thumb:nth-child(5) { transform: translate(100%, -28%) rotate(14deg); transition-delay: .33s; }
.pack-3d.is-ripped .pack-rip-reveal .pack-peek-thumb:nth-child(6) { transform: translate(-132%, 28%) rotate(-18deg); transition-delay: .40s; }
.pack-3d.is-ripped .pack-rip-reveal .pack-peek-thumb:nth-child(7) { transform: translate(-72%, 42%) rotate(-9deg); transition-delay: .47s; }
.pack-3d.is-ripped .pack-rip-reveal .pack-peek-thumb:nth-child(8) { transform: translate(-10%, 48%) rotate(2deg); transition-delay: .54s; }
.pack-3d.is-ripped .pack-rip-reveal .pack-peek-thumb:nth-child(9) { transform: translate(54%, 42%) rotate(10deg); transition-delay: .61s; }
.pack-3d.is-ripped .pack-rip-reveal .pack-peek-thumb:nth-child(10) { transform: translate(118%, 28%) rotate(18deg); transition-delay: .68s; }
/* the fan may crest above the flap — let it */
.pack-3d .pack-3d-flipper,
.pack-3d .pack-face-wrap { overflow: visible; }
.pack-3d.is-ripped .pack-rip-reveal { z-index: 6; }

/* back text hides while it just repeats the maker line */
.pack-3d .pack-back-text.pack-back-text-hidden { display: none; }
/* the minimal front layout hides the old front peek — never the rip reveal */
.pack-preview[data-pack-front-layout="minimal"] .pack-rip-reveal .pack-peek { display: block; }

@media (prefers-reduced-motion: reduce) {
  .pack-3d.is-ripping .pack-rip-strip,
  .pack-3d.is-ripping .pack-pull-tab { animation: none; opacity: 0; }
  .pack-3d .pack-rip-reveal .pack-peek-thumb { transition: none; }
}

/* ============================================================
   The pulls row: after the tear, the caught stickers lay out
   as readable cards under the pack — real art when it exists —
   each linking to its sticker detail page.
   ============================================================ */
.pack-pulls { display: none; margin-top: 18px; }
.pack-pulls.is-filled { display: block; }
.pack-pulls-title {
  margin: 0 0 10px;
  font-size: 13px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--sm-muted);
  text-align: center;
}
.pack-pulls-row {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 14px;
}
.pack-pull-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 128px;
  padding: 12px 10px 10px;
  background: #fff;
  border: 1px solid var(--sm-border-2);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: var(--sm-text);
  opacity: 0;
  transform: translateY(10px) scale(.94);
  animation: pull-land .45s cubic-bezier(.2, .7, .3, 1.2) forwards;
  animation-delay: calc(var(--pull-i, 0) * 120ms);
  transition: transform .15s ease, box-shadow .15s ease;
}
.pack-pull-card:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 26px -12px rgba(60, 30, 0, .45);
}
@keyframes pull-land {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.pack-pull-art {
  width: 84px; height: 84px;
  display: flex; align-items: center; justify-content: center;
}
.pack-pull-art .sticker-art-frame { width: 100%; height: 100%; }
.pack-pull-art .pack-peek-fallback {
  width: 72px; height: 72px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  border: 2px dashed color-mix(in srgb, var(--album-accent, var(--sm-orange)) 55%, transparent);
  background: color-mix(in srgb, var(--album-accent, var(--sm-orange)) 8%, #fff);
  font-weight: 900; font-size: 15px;
  color: var(--album-accent, var(--sm-orange));
}
.pack-pull-name {
  font-size: 12.5px; font-weight: 700;
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pack-pull-meta { font-size: 11px; font-weight: 700; color: var(--sm-muted); }
.pack-pull-card.is-duplicate .pack-pull-art { filter: grayscale(.7) opacity(.75); }
.pack-pull-dup {
  margin-top: 2px;
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  padding: 2px 8px; border-radius: 999px;
  background: var(--sm-card); color: var(--sm-muted);
  border: 1px solid var(--sm-border);
}
@media (prefers-reduced-motion: reduce) {
  .pack-pull-card { animation: none; opacity: 1; transform: none; }
}

/* Doc-page claim payoff: the revealed layer lands with a little slap. */
.album-doc-svg g.doc-slap {
  transform-box: fill-box;
  transform-origin: center;
  animation: doc-slap .5s cubic-bezier(.2, .7, .3, 1.4);
}
@keyframes doc-slap {
  0% { transform: scale(1.35); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .album-doc-svg g.doc-slap { animation: none; }
}

/* ============================================================
   Landing page — "Sticker Albums Launch v2" handoff.
   The landing is an intentionally LIGHT surface (the Sticker Mule
   design-system alignment): role vars bridge onto PlatformKit semantic
   tokens first, with Collect brand tokens taking precedence when the
   Sticker Mule overlay is present.
   ============================================================ */
.collect-landing {
  --sm-font-sans: "Montserrat", Arial, sans-serif;
  --sm-font-button: var(--sm-font-sans);
  --landing-page: rgb(var(--surface-primary, 255 255 255));
  --landing-section: rgb(var(--surface-secondary, 250 250 250));
  --landing-photo: rgb(var(--surface-tertiary, 244 244 245));
  --landing-card: rgb(var(--surface-primary, 255 255 255));
  --landing-text: rgb(var(--fg-primary, 24 24 27));
  --landing-body: rgb(var(--fg-secondary, 63 63 70));
  --landing-muted: rgb(var(--fg-muted, 113 113 122));
  --landing-faint: rgb(var(--fg-tertiary, 113 113 122));
  --landing-border: rgb(var(--border-primary, 228 228 231));
  --landing-border-soft: color-mix(in srgb, var(--landing-border) 55%, transparent);
  --landing-orange: var(--sm-orange, rgb(var(--surface-brand, 194 80 0)));
  --landing-orange-2: var(--sm-orange-2, rgb(var(--surface-brand-hover, 158 65 0)));
  --landing-orange-ink: var(--sm-orange-accessible, #a64000);
  --landing-hero-ink: #28160b;
  --landing-hero-copy: #ffffff;
  --landing-subtle-ink: #61616a;
  --landing-blue: var(--sm-blue, rgb(var(--fg-link, 0 99 223)));
  --landing-blue-2: var(--sm-blue-2, rgb(var(--fg-link-hover, 0 86 199)));
  --landing-blue-wash: var(--sm-blue-wash, rgb(var(--surface-info-soft, 230 244 255)));
  --landing-holo-border: rgb(var(--border-info, 6 182 212));
  --landing-holo-wash: rgb(var(--surface-info-soft, 236 254 255));
  --landing-glitter-wash: rgb(var(--surface-brand-soft, 255 246 240));
  --landing-glitter-ink: rgb(var(--fg-brand, 194 80 0));
  --landing-green: rgb(var(--fg-success, 4 120 87));
  --landing-strip: rgb(var(--surface-inverse, 24 24 27));
  --landing-strip-ink: rgb(var(--fg-on-inverse, 255 255 255));
  --landing-hero-star: rgb(var(--surface-warning, 245 158 11));
  --landing-star: rgb(var(--surface-warning, 245 158 11));
  background: var(--landing-page);
  color: var(--landing-text);
  font-family: var(--sm-font-sans);
  font-size: 15px;
  line-height: 1.5;
}

/* Per-page accent (2026-07): each Collect tool page adopts a distinct accent so
   Stickify (orange), Ride (teal), and Pop-up/Stores (magenta) read as sibling
   sub-brands under one chrome. --page-accent drives every retinted accent
   instance on that page (hero highlight, primary CTA, links, section/trust
   accent icons, borders/rules, map heat); body text stays on the AA-safe
   --landing-text/-body/-muted tokens and is never retinted. --page-accent-2 is
   the hover/pressed shade. */
.collect-stickify { --page-accent: var(--sm-orange); --page-accent-2: var(--sm-orange-2); }
.collect-ride     { --page-accent: var(--sm-teal);    --page-accent-2: color-mix(in srgb, var(--sm-teal) 82%, #000); }
.collect-stores   { --page-accent: var(--sm-magenta); --page-accent-2: color-mix(in srgb, var(--sm-magenta) 82%, #000); }
/* The shared landing CTA is orange by default; on the teal/magenta pages it
   adopts the page accent so the primary action matches the page's wordmark. */
.collect-ride .btn.landing-cta,
.collect-stores .btn.landing-cta { background: var(--page-accent); border-color: var(--page-accent); }
.collect-ride .btn.landing-cta:hover,
.collect-stores .btn.landing-cta:hover { background: var(--page-accent-2); border-color: var(--page-accent-2); }

html:has(.collect-landing) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html:has(.collect-landing) { scroll-behavior: auto; }
}

.collect-landing .landing-max { width: min(100%, 1080px); max-width: 1080px; margin: 0 auto; }
.collect-landing .landing-narrow { max-width: 860px; margin: 0 auto; padding: 0 24px 64px; }
/* Sticker Mule's compact Proxima scale: bold and direct, without turning
   every section heading into a display headline. */
.collect-landing .landing-h2 { margin: 0 0 14px; font-size: clamp(1.75rem, 2.35vw, 2rem); line-height: 1.25; font-family: var(--sm-font-sans); font-weight: 700; letter-spacing: -.015em; color: var(--landing-text); }
.collect-landing .landing-h2-sm { margin: 0 0 24px; font-size: clamp(1.35rem, 2.1vw, 1.75rem); line-height: 1.25; font-family: var(--sm-font-sans); font-weight: 700; letter-spacing: -.01em; color: var(--landing-text); }
.collect-landing .landing-h2.centered, .collect-landing .landing-sub.centered { text-align: center; }
.collect-landing .landing-h2.centered { margin-bottom: 6px; }
.collect-landing .landing-sub { margin: 0 0 36px; font-size: 15px; color: var(--landing-muted); }
.collect-landing p { color: var(--landing-muted); font-size: 15px; line-height: 1.7; text-wrap: pretty; }
.collect-landing .landing-link { font-size: 15px; font-weight: 600; color: var(--landing-blue); }
.collect-landing a { color: var(--landing-blue); }
.collect-landing a:hover { color: var(--landing-blue-2); }

/* Orange is the only filled action role; blue remains inline-link language. */
.collect-landing .btn.landing-cta {
	background: var(--sm-orange);
	border-color: var(--sm-orange);
	color: #ffffff;
	font-weight: 700;
	border-radius: var(--sm-radius-btn);
}
.collect-landing .btn.landing-cta:hover {
  background: var(--sm-orange-2);
  border-color: var(--sm-orange-2);
  color: #ffffff;
}
.collect-landing .btn.landing-cta-block { display: flex; width: 100%; justify-content: center; }

/* ---- Hero — split CTA masthead ---- */
.collect-landing .landing-hero {
	position: relative;
	background: #ffffff;
	color: var(--landing-hero-ink);
	text-align: left;
	padding: 48px 24px 56px;
	overflow: hidden;
}
.collect-landing .landing-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	align-items: center;
	gap: 48px;
	max-width: 1180px;
	margin: 0 auto;
}
.collect-landing .landing-hero-inner { position: relative; z-index: 1; max-width: 560px; }
.collect-landing .landing-hero h1 { margin: 0 0 14px; font-size: clamp(2.3rem, 4vw, 3.3rem); line-height: 1.06; font-family: var(--sm-font-sans); font-weight: 700; letter-spacing: -.02em; color: var(--landing-hero-ink); }
.collect-landing .landing-hero-sub { margin: 0 0 5px; font-size: 17px; color: var(--landing-muted); }
.collect-landing .landing-hero-rating { font-size: 13px; margin-bottom: 24px; color: var(--landing-muted); }
.collect-landing .landing-star { color: var(--landing-star); }
/* Reserve the selected WebP's final box before its intrinsic size is known. */
.collect-landing .landing-hero-visual { width: 100%; aspect-ratio: 1389 / 1029; }
.collect-landing .landing-hero-visual img { display: block; width: 100%; height: auto; filter: drop-shadow(0 26px 44px rgba(23, 19, 14, .18)); }
.collect-landing .landing-hero-alt { font-size: 14px; margin-top: 12px; }
.collect-landing .landing-hero-alt a { color: var(--landing-hero-ink); text-decoration: underline; }

/* ---- Product-family logo banner ---- */
.collect-landing .landing-product-banner {
  border-bottom: 1px solid var(--landing-border-soft);
  background: var(--landing-section);
}
.collect-landing .landing-product-banner-inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: clamp(24px, 5vw, 64px);
  width: min(calc(100% - 48px), 820px);
  min-height: 112px;
  margin: 0 auto;
  padding: 18px 0;
  box-sizing: border-box;
}
.collect-landing .landing-product-link {
  display: flex;
  min-width: 0;
  min-height: 64px;
  align-items: center;
  justify-content: center;
  color: var(--landing-body);
  text-decoration: none;
  opacity: .72;
}
.collect-landing .landing-product-link:hover { color: var(--landing-body); opacity: 1; }
.collect-landing .landing-product-link:focus-visible { outline: 3px solid color-mix(in srgb, var(--landing-blue) 42%, transparent); outline-offset: 5px; }
.collect-landing .landing-product-link .collect-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: currentColor;
  font-family: var(--sm-font-sans);
  font-weight: 700;
  line-height: 1;
  transform: none;
}
.collect-landing .landing-product-link .collect-wordmark-glyph { flex: 0 0 auto; width: 1em; height: 1em; }
.collect-landing .landing-product-link .collect-wordmark.is-stickify { font-size: 29px; letter-spacing: -.02em; }
.collect-landing .landing-product-link .collect-wordmark.is-stickify .collect-wordmark-text { -webkit-text-stroke: 0; filter: none; }
.collect-landing .landing-product-link .collect-wordmark.is-popup { gap: 8px; color: currentColor; }
.collect-landing .landing-product-link .collect-wordmark.is-popup .collect-wordmark-glyph { width: 1.35em; height: 1.35em; }
.collect-landing .landing-product-link .collect-wordmark.is-popup .collect-wordmark-stack { display: inline-flex; flex-direction: column; font-size: 21px; line-height: .82; }
.collect-landing .landing-product-link .collect-wordmark.is-popup .collect-wordmark-tag { display: none; }
.collect-landing .landing-product-link .collect-wordmark.is-ride { font-size: 31px; color: currentColor; font-style: italic; letter-spacing: .01em; text-transform: uppercase; }
.collect-landing .landing-product-link .collect-wordmark.is-ride::after { display: none; }
.collect-landing .landing-product-trace { display: block; width: 48px; height: 48px; filter: grayscale(1) contrast(.75); }

/* ---- How it works ---- */
.collect-landing .landing-how { background: var(--landing-section); padding: 64px 24px; }
.collect-landing .landing-how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.collect-landing .landing-step-card {
  background: var(--landing-card);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
.collect-landing .landing-step-photo {
  height: 210px;
  background: var(--landing-photo);
  padding: 16px;
  box-sizing: border-box;
}
.collect-landing .landing-step-photo img { width: 100%; height: 100%; object-fit: contain; }
.collect-landing .landing-step-caption { padding: 18px 20px 22px; text-align: center; }
.collect-landing .landing-step-kicker { font-size: 13px; font-weight: 700; color: var(--landing-orange-ink); margin-bottom: 4px; }
.collect-landing .landing-step-caption h3 { margin: 0 0 6px; font-size: 17px; font-weight: 700; color: var(--landing-text); }
.collect-landing .landing-step-caption p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--landing-muted); }

/* Step 1 — live proof sheet */
.collect-landing .landing-proof-wrap { height: 210px; background: var(--landing-photo); padding: 14px; box-sizing: border-box; }
.collect-landing .landing-proof-sheet {
  height: 100%;
  background: var(--landing-card);
  border: 1px solid var(--landing-border);
  border-radius: 3px;
  padding: 10px 12px 8px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.collect-landing .landing-proof-head { display: flex; align-items: baseline; margin-bottom: 8px; }
.collect-landing .landing-proof-label { font-size: 10px; font-weight: 700; letter-spacing: .12em; color: var(--landing-text); }
.collect-landing .landing-proof-stamp {
  margin-left: auto;
  font-size: 9px;
  color: var(--landing-green);
  font-weight: 700;
  border: 1.5px solid var(--landing-green);
  border-radius: 3px;
  padding: 1px 6px;
  transform: rotate(-4deg);
}
.collect-landing .landing-proof-grid { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; min-height: 0; }
.collect-landing .landing-proof-cell { display: flex; flex-direction: column; gap: 4px; min-height: 0; }
.collect-landing .landing-proof-slot {
  flex: 1;
  border: 2px dashed var(--landing-border);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
}
.collect-landing .landing-proof-slot img { max-width: 82%; max-height: 82%; object-fit: contain; }
.collect-landing .landing-proof-slot.is-drop { border-color: var(--landing-orange); text-decoration: none; }
.collect-landing .landing-proof-slot.is-drop:hover { background: var(--landing-glitter-wash); }
.collect-landing .landing-proof-drop { font-size: 10px; font-weight: 700; color: var(--landing-orange-ink); text-align: center; padding: 4px; }
.collect-landing .landing-proof-caption { font-size: 8px; letter-spacing: .1em; color: var(--landing-faint); text-align: center; }

/* ---- Launch film ---- */
.collect-landing .landing-film {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 48px;
  align-items: center;
  padding: 24px 24px 72px;
}
.collect-landing .landing-film video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 4px;
  display: block;
  background: var(--landing-strip);
}

/* ---- Rip a pack ---- */
.collect-landing .landing-rip { padding: 72px 24px; text-align: center; }
.collect-landing .landing-rip-row { display: flex; align-items: center; justify-content: center; gap: 64px; flex-wrap: wrap; margin-top: 42px; }
.collect-landing .landing-rip-pack { display: flex; flex-direction: column; align-items: center; gap: 16px; }
/* The reused pack organism sits directly on the light page — no dark
   stage glow, and no counter-box column in the demo. */
.collect-landing .landing-rip-stage { background: transparent; box-shadow: none; border: none; padding: 0; }
.collect-landing .landing-rip-stage .pack-box-preview { display: none; }
.collect-landing .landing-rip-note { font-size: 13px; color: var(--landing-faint); }
.collect-landing .landing-rip-pulls-wrap { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-top: 36px; }
.collect-landing .landing-pulls { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
@keyframes landing-pop {
  from { opacity: 0; transform: translateY(20px) rotate(var(--tilt, 0deg)) scale(.88); }
  to { opacity: 1; transform: translateY(0) rotate(var(--tilt, 0deg)) scale(1); }
}
.collect-landing .landing-pull {
  background: var(--landing-card);
  border: 1px solid var(--landing-border);
  border-radius: 6px;
  padding: 16px 14px 12px;
  width: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transform: rotate(var(--tilt, 0deg));
  box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
  animation: landing-pop .45s cubic-bezier(.2, 1.5, .4, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .collect-landing .landing-pull { animation: none; }
}
.collect-landing .landing-pull img { height: 100px; width: 120px; object-fit: contain; }
.collect-landing .landing-pull.is-ordered-piece img { border-radius: 4px; object-fit: cover; }
.collect-landing .landing-pull-chip { font-size: 11px; font-weight: 700; border-radius: 3px; padding: 4px 10px; }
.collect-landing .landing-pull[data-rarity="base"] .landing-pull-chip { background: #eeeeee; color: var(--landing-muted); }
.collect-landing .landing-pull[data-rarity="holo"] { border-color: var(--landing-holo-border); }
.collect-landing .landing-pull[data-rarity="holo"] .landing-pull-chip { background: var(--landing-holo-wash); color: var(--landing-blue-2); }
.collect-landing .landing-pull[data-rarity="glitter"] { border-color: var(--landing-orange); }
.collect-landing .landing-pull[data-rarity="glitter"] .landing-pull-chip { background: var(--landing-glitter-wash); color: var(--landing-glitter-ink); }
.collect-landing .landing-album-line { font-size: 14px; color: var(--landing-muted); }
.collect-landing .landing-album-line strong { color: var(--landing-text); font-weight: 600; }
.collect-landing .landing-album-bar { width: 260px; height: 5px; background: var(--landing-border); border-radius: 999px; overflow: hidden; }
.collect-landing .landing-album-bar-fill { height: 5px; width: 1%; background: var(--landing-orange); border-radius: 999px; transition: width .6s ease; }
.collect-landing .landing-odds { max-width: 640px; margin: 52px auto 0; text-align: left; }
.collect-landing .landing-odds-row {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--landing-border);
  padding: 13px 4px;
  font-size: 15px;
}
.collect-landing .landing-odds-row:last-of-type { border-bottom: 1px solid var(--landing-border); }
.collect-landing .landing-odds-val { font-weight: 700; }
.collect-landing .landing-odds-note { margin: 10px 0 0; font-size: 13px; color: var(--landing-faint); }

/* ---- Album split ---- */
.collect-landing .landing-album { background: var(--landing-section); padding: 64px 24px; }
.collect-landing .landing-album-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); gap: 48px; align-items: center; }
.collect-landing .landing-album-spread {
  width: 100%;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
  border: 1px solid var(--landing-border);
}
.collect-landing .landing-album-grid p { margin: 0 0 12px; }

/* ---- Governed native app distribution ---- */
.collect-landing .landing-install {
  position: relative;
  overflow: hidden;
  padding: 80px 24px;
  background: var(--landing-strip);
  color: var(--landing-strip-ink);
}
.collect-landing .landing-install-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .72fr);
  gap: 72px;
  align-items: center;
}
.collect-landing .landing-install-copy { max-width: 620px; }
.collect-landing .landing-install-eyebrow {
  margin-bottom: 12px;
  color: var(--landing-orange);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.collect-landing .landing-install-copy .landing-h2 {
  max-width: 560px;
  margin-bottom: 16px;
  color: var(--landing-strip-ink);
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  line-height: 1.04;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.collect-landing .landing-install-body {
  max-width: 560px;
  margin: 0;
  color: color-mix(in srgb, var(--landing-strip-ink) 78%, transparent);
  font-size: 17px;
  line-height: 1.65;
}
.collect-landing .landing-install-benefits {
  display: grid;
  gap: 10px;
  margin: 28px 0 30px;
  padding: 0;
  list-style: none;
}
.collect-landing .landing-install-benefits li {
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--landing-strip-ink);
  font-size: 15px;
  font-weight: 600;
}
.collect-landing .landing-install-check {
  display: inline-flex;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--landing-orange);
  color: var(--landing-hero-ink);
  font-size: 13px;
  font-weight: 900;
}
.collect-landing .landing-store-links { display: flex; flex-wrap: wrap; gap: 12px; }
.collect-landing .landing-store-link {
  display: inline-flex;
  flex: 1 1 190px;
  max-width: 280px;
  min-height: 62px;
  padding: 9px 14px;
  align-items: center;
  gap: 11px;
  border: 1px solid color-mix(in srgb, var(--landing-strip-ink) 22%, transparent);
  border-radius: 6px;
  background: var(--landing-card);
  color: var(--landing-text);
  overflow-wrap: anywhere;
  text-decoration: none;
  transition: transform .15s ease, border-color .15s ease;
}
.collect-landing a.landing-store-link:hover {
  border-color: var(--landing-orange);
  color: var(--landing-text);
  text-decoration: none;
  transform: translateY(-2px);
}
.collect-landing .landing-store-link:focus-visible {
  outline: 3px solid var(--landing-orange);
  outline-offset: 3px;
}
.collect-landing .landing-store-link.is-pending {
  border-style: dashed;
  background: color-mix(in srgb, var(--landing-card) 90%, transparent);
}
.collect-landing .landing-store-mark {
  display: inline-flex;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: var(--landing-strip);
  color: var(--landing-strip-ink);
  font-size: 16px;
  font-weight: 900;
}
.collect-landing .landing-store-link > span:last-child { display: flex; min-width: 0; flex-direction: column; }
.collect-landing .landing-store-link small {
  color: var(--landing-subtle-ink);
  font-size: 10px;
  line-height: 1.1;
  letter-spacing: .04em;
}
.collect-landing .landing-store-link strong { font-size: 17px; line-height: 1.25; }
.collect-landing .landing-install-note {
  margin: 13px 0 0;
  color: color-mix(in srgb, var(--landing-strip-ink) 66%, transparent);
  font-size: 12px;
  line-height: 1.5;
}
.collect-landing .landing-install-review {
  margin: 8px 0 0;
  color: color-mix(in srgb, var(--landing-strip-ink) 66%, transparent);
  font-size: 12px;
  line-height: 1.5;
}
.collect-landing .landing-install-review a { color: var(--landing-orange); font-weight: 700; }
.collect-landing .landing-install-preview {
  position: relative;
  display: flex;
  min-height: 520px;
  align-items: center;
  justify-content: center;
}
.collect-landing .landing-install-preview::before {
  position: absolute;
  width: 310px;
  height: 420px;
  border: 1px solid color-mix(in srgb, var(--landing-orange) 65%, transparent);
  background: var(--landing-orange);
  content: "";
  transform: rotate(7deg);
}
.collect-landing .landing-install-phone {
  position: relative;
  z-index: 1;
  width: 276px;
  min-height: 510px;
  padding: 11px;
  border: 2px solid color-mix(in srgb, var(--landing-strip-ink) 32%, transparent);
  border-radius: 38px;
  background: var(--landing-text);
  box-shadow: 0 26px 54px rgba(0, 0, 0, .38);
  transform: rotate(-3deg);
}
.collect-landing .landing-install-speaker {
  position: absolute;
  z-index: 2;
  top: 19px;
  left: 50%;
  width: 72px;
  height: 18px;
  border-radius: 999px;
  background: var(--landing-text);
  transform: translateX(-50%);
}
.collect-landing .landing-install-screen {
  min-height: 484px;
  padding: 42px 16px 18px;
  border-radius: 28px;
  background: var(--landing-page);
  color: var(--landing-text);
}
.collect-landing .landing-install-appbar { display: flex; align-items: center; gap: 9px; font-size: 12px; letter-spacing: .1em; }
.collect-landing .landing-install-appmark {
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--landing-orange);
  color: var(--landing-hero-ink);
  font-size: 18px;
  font-weight: 900;
}
.collect-landing .landing-install-preview-label { margin-top: 30px; color: var(--landing-subtle-ink); font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.collect-landing .landing-install-progress { display: flex; margin: 5px 0 16px; align-items: baseline; gap: 7px; }
.collect-landing .landing-install-progress strong { font-size: 35px; line-height: 1; }
.collect-landing .landing-install-progress span { color: var(--landing-muted); font-size: 11px; }
.collect-landing .landing-install-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.collect-landing .landing-install-slot {
  display: flex;
  aspect-ratio: 4 / 5;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 6px;
  border: 1px solid var(--landing-border);
  border-radius: 5px;
  background: var(--landing-photo);
  color: var(--landing-subtle-ink);
  font-size: 8px;
  font-weight: 800;
}
.collect-landing .landing-install-slot.is-found { background: var(--landing-orange); color: var(--landing-hero-ink); }
.collect-landing .landing-install-slot.is-holo { background: var(--landing-blue-wash); color: var(--landing-blue-2); }
.collect-landing .landing-install-slot.is-rare { background: var(--sm-yellow); color: var(--landing-hero-ink); }
.collect-landing .landing-install-slot.is-missing { border-style: dashed; background: var(--landing-card); color: var(--landing-faint); }
.collect-landing .landing-install-scan {
  margin-top: 20px;
  padding: 12px 14px;
  border-radius: 4px;
  background: var(--sm-orange);
  color: #ffffff;
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}


/* ---- Pricing ---- */
.collect-landing .landing-pricing {
  padding: 88px 24px;
  background: radial-gradient(90% 70% at 20% 15%, rgba(255, 105, 0, .06), transparent 72%);
}
/* Format cards are radio labels — selection works with zero JS via the
   GET form; :has(:checked) mirrors the server-rendered .is-selected so
   the picked card highlights before submit too. */
.collect-landing .landing-format {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  background: var(--landing-card);
  border: 1px solid var(--landing-border);
  padding: 12px 14px;
  color: var(--landing-text);
  cursor: pointer;
}
.collect-landing .landing-format-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.collect-landing .landing-format:hover { border-color: var(--landing-faint); }
.collect-landing .landing-format.is-selected,
.collect-landing .landing-format:has(.landing-format-input:checked) {
  border-color: var(--landing-orange);
  background: #fff6ef;
  box-shadow: 0 0 0 1px var(--landing-orange);
}
.collect-landing .landing-format:has(.landing-format-input:focus-visible) {
  outline: 2px solid var(--landing-orange);
  outline-offset: 2px;
}
.collect-landing .landing-format-name { font-size: 15px; font-weight: 700; }
.collect-landing .landing-format-set { font-size: 12px; color: var(--landing-faint); }
.collect-landing .landing-total-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  border-top: 1px solid var(--landing-border);
  padding-top: 16px;
}
.collect-landing .landing-total { font-size: 28px; font-weight: 800; }
.collect-landing .landing-perperson { font-size: 13px; color: var(--landing-faint); }
.collect-landing .landing-free-shipping { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--landing-green); }
.collect-landing .landing-includes { font-size: 13px; color: var(--landing-faint); margin: 4px 0 16px; }
.collect-landing .landing-sample-line { font-size: 13px; color: var(--landing-subtle-ink); text-align: center; margin-top: 10px; }
.collect-landing .landing-sample-line a { color: var(--landing-orange-ink); }

/* ---- Reviews ---- */
.collect-landing .landing-reviews { padding-top: 64px; }
.collect-landing .landing-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  text-align: center;
  border-bottom: 1px solid var(--landing-border);
  padding-bottom: 28px;
  margin-bottom: 8px;
}
.collect-landing .landing-stat-n { font-size: 30px; font-weight: 800; }
.collect-landing .landing-stat-stars { color: var(--landing-star); font-size: 14px; letter-spacing: 2px; }
.collect-landing .landing-stat-sub { font-size: 13px; color: var(--landing-faint); }
.collect-landing .landing-review { display: flex; gap: 14px; padding: 20px 0; border-bottom: 1px solid var(--landing-border-soft); text-align: left; }
.collect-landing .landing-review-head { display: flex; align-items: baseline; gap: 10px; }
.collect-landing .landing-review-stars { color: var(--landing-star); font-size: 12px; letter-spacing: 1px; }
.collect-landing .landing-review-title { font-size: 14px; font-weight: 700; }
.collect-landing .landing-review-byline { font-size: 13px; color: var(--landing-faint); margin: 2px 0 6px; }
.collect-landing .landing-review-body { font-size: 14px; line-height: 1.6; color: var(--landing-body); }

/* ---- FAQ ---- */
.collect-landing .landing-faq { padding-bottom: 72px; }
.collect-landing .landing-faq-item { border-top: 1px solid var(--landing-border); }
.collect-landing .landing-faq-item summary {
  display: flex;
  align-items: center;
  padding: 16px 4px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  list-style: none;
}
.collect-landing .landing-faq-item summary::-webkit-details-marker { display: none; }
.collect-landing .landing-faq-item summary::after { content: "▾"; margin-left: auto; color: var(--landing-faint); font-size: 13px; }
.collect-landing .landing-faq-item[open] summary::after { content: "▴"; }
.collect-landing .landing-faq-a { font-size: 14px; line-height: 1.65; color: var(--landing-muted); padding: 0 4px 16px; max-width: 680px; text-wrap: pretty; }

/* ---- Responsive ---- */
@media (max-width: 960px) {
  .collect-landing .landing-film,
  .collect-landing .landing-album-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
	.collect-landing .landing-hero { text-align: center; }
	.collect-landing .landing-hero-grid { grid-template-columns: 1fr; gap: 30px; }
	.collect-landing .landing-hero-inner { margin: 0 auto; }
	.collect-landing .landing-hero-visual { max-width: 560px; margin: 0 auto; }
  .collect-landing .landing-hero h1 { font-size: clamp(2.25rem, 8vw, 2.5rem); }
  .collect-landing .landing-how-grid,
  .collect-landing .landing-album-grid { grid-template-columns: 1fr; }
  .collect-landing .landing-price-grid { grid-template-columns: 1fr; }
  .collect-landing .landing-people-chips { grid-template-columns: repeat(2, 1fr); }
  .collect-landing .landing-people-exact { flex-wrap: wrap; }
  .collect-landing .landing-people-exact-label { max-width: none; flex: 1 1 100%; }
}

/* Landing proof-sheet upload form — the "Drop your art" slot is a real
   multipart form; the native file input and the submit compact into the
   dashed cell. */
.collect-landing .landing-upload-form {
  flex-direction: column;
  gap: 6px;
  padding: 8px 6px;
  text-decoration: none;
}
.collect-landing .landing-upload-gate {
  flex-direction: column;
  gap: 8px;
  padding: 14px 8px;
  text-decoration: none;
}
.collect-landing .landing-upload-gate:hover {
  color: var(--landing-orange-ink);
  text-decoration: none;
}
.collect-landing .landing-upload-input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  font-size: 12px;
  color: var(--landing-faint);
}
.collect-landing .landing-upload-input::file-selector-button {
  min-height: 40px;
  font-size: 11px;
  padding: 6px 8px;
  border: 1px solid var(--landing-border);
  border-radius: 3px;
  background: var(--landing-card);
  color: var(--landing-text);
  cursor: pointer;
}
.collect-landing .btn.landing-upload-cta {
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  font-size: 11px;
}
.collect-landing .landing-upload-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 2px 4px;
  font-size: 11px;
  line-height: 1.25;
  text-align: center;
}

/* Landing real-album teaser — the AlbumBook organism scaled into the
   split column, on the light landing surface. */
.collect-landing .landing-album-book .book {
  max-width: 100%;
}
.collect-landing .landing-album-book .book-foot {
  color: var(--landing-muted);
}
.collect-landing .landing-album-book .book-noscript-fallback { display: none; }

/* ============================================================
   Rip Room — theatrical rip stage for paid sealed packs.
   The handoff is a fixed dark print-shop world, but the implementation stays
   inside the shared PlatformKit shell and reuses the module's pack organism.
   ============================================================ */
@keyframes rr-rise { from { opacity: 0; transform: translateY(26px) scale(.9); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes rr-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes rr-hint { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes rr-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes rr-glowgold { 0%, 100% { opacity: .55; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes rr-glowprism { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }
@keyframes rr-dot { 0% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(-110px) scale(.4); opacity: 0; } }

/* The route class is applied through PublicPageOptions so the shared shell
   can make room for this full-bleed surface without a second document shell. */
body.collect-rip-room-route {
  --rr-bg: #17100b;
  --rr-stage-1: #3a2417;
  --rr-stage-2: #221610;
  --rr-stage-3: #150e09;
  --rr-topbar: #43291a;
  --rr-text: #f5efe6;
  --rr-text-soft: #e7dccb;
  --rr-muted: #b8a893;
  --rr-accent: #ff9d5c;
  --rr-accent-soft: #ffd9b8;
  --rr-orange: #ff6300;
  --rr-orange-2: #e55e00;
  --rr-blue: #1666d8;
  --rr-blue-2: #1257bd;
  --rr-cream: #efe3cf;
  --rr-panel: rgba(245, 239, 230, .06);
  --rr-panel-line: rgba(245, 239, 230, .16);
  --rr-line: rgba(245, 239, 230, .18);
  --rr-font: "Mulish", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: var(--rr-bg);
  color: var(--rr-text);
}
body.collect-rip-room-route .collect-subnav,
body.collect-rip-room-route .smfoot { display: none; }
body.collect-rip-room-route .min-h-screen { background: var(--rr-bg); }
body.collect-rip-room-route main.collect-rip-room-main {
  min-width: 0;
  padding: 0;
  background: var(--rr-bg);
}

.collect-rip-room {
  /* Fixed room palette. These --sm aliases are scoped to the room so the
     existing PackPreview organism inherits the handoff treatment without
     changing Collect's other surfaces. */
  --sm-page: var(--rr-bg);
  --sm-page-2: var(--rr-stage-2);
  --sm-card: #2b1b12;
  --sm-text: var(--rr-text);
  --sm-text-2: var(--rr-text-soft);
  --sm-muted: var(--rr-muted);
  --sm-text-muted: var(--rr-muted);
  --sm-border: var(--rr-panel-line);
  --sm-border-2: rgba(245, 239, 230, .4);
  --sm-brown: var(--rr-topbar);
  --sm-brown-2: var(--rr-stage-3);
  --sm-orange: var(--rr-orange);
  --sm-orange-2: var(--rr-orange-2);
  --sm-blue: var(--rr-blue);
  --sm-blue-2: var(--rr-blue-2);
  --sm-cream: var(--rr-text);
  --sm-paper: var(--rr-text);
  --sm-rare: #ffd24a;
  --sm-line: var(--rr-line);
  --sm-font-sans: var(--rr-font);
  --sm-font-button: var(--rr-font);
  --sm-art-brown: #3d281c;
  --sm-art-brown-2: #5a3828;
  --sm-art-brown-3: #70483a;
  --sm-art-brown-4: #24130c;
  --sm-art-cream-1: #f5efe6;
  --sm-art-cream-2: #efe3cf;
  --sm-art-peach-2: #ffd9b8;
  background: var(--rr-bg);
  color: var(--rr-text);
  font-family: var(--rr-font);
  min-height: 100dvh;
  overflow-x: hidden;
}
.collect-rip-room .rr-room-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: min(100%, 860px);
  margin-bottom: 28px;
  color: var(--rr-muted);
  font-size: 12px;
}
.collect-rip-room .rr-room-back { color: var(--rr-text-soft); font-weight: 700; }
.collect-rip-room .rr-room-meta-right { display: flex; align-items: center; gap: 20px; }
.collect-rip-room .rr-meta-sealed { white-space: nowrap; }
.collect-rip-room .rr-album-score { display: flex; align-items: center; gap: 8px; }
.collect-rip-room .rr-album-bar {
  display: inline-block;
  width: 90px;
  height: 4px;
  background: var(--rr-line);
  border-radius: 999px;
  overflow: hidden;
}
.collect-rip-room .rr-album-bar-fill { display: block; height: 4px; background: var(--rr-orange); border-radius: 999px; transition: width .6s ease; }

.collect-rip-room .rr-stage {
  position: relative;
  min-height: calc(100dvh - 46px);
  background: radial-gradient(ellipse 62% 55% at 50% 34%, var(--rr-stage-1) 0%, var(--rr-stage-2) 55%, var(--rr-stage-3) 100%);
  overflow: hidden;
}
.collect-rip-room .rr-dim { position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.collect-rip-room .rr-stage-inner {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 44px 24px 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.collect-rip-room .rr-kicker { font-size: 12px; font-weight: 700; letter-spacing: .22em; color: var(--rr-accent); margin-bottom: 6px; }
.collect-rip-room .rr-headline { margin: 0 0 4px; font-size: 30px; font-weight: 800; text-align: center; color: var(--rr-text); }
.collect-rip-room .rr-hint { font-size: 14px; color: var(--rr-muted); margin-bottom: 38px; text-align: center; animation: rr-hint 2.4s ease infinite; }
.collect-rip-room .rr-phase { display: flex; flex-direction: column; align-items: center; gap: 22px; }

/* choose */
.collect-rip-room .rr-choose-row { display: flex; align-items: flex-end; justify-content: center; flex-wrap: wrap; }
.collect-rip-room .btn.rr-pack-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 230px;
  margin: 0 -14px;
  height: auto;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: transform .25s ease;
  animation: rr-bob 3.2s ease-in-out infinite;
}
.collect-rip-room .btn.rr-pack-choice:nth-child(3n+1) { transform: rotate(-9deg) translateY(12px); }
.collect-rip-room .btn.rr-pack-choice:nth-child(3n+2) { transform: rotate(0deg); animation-duration: 3.6s; }
.collect-rip-room .btn.rr-pack-choice:nth-child(3n) { transform: rotate(9deg) translateY(12px); animation-duration: 4s; }
.collect-rip-room .btn.rr-pack-choice:hover { transform: translateY(-26px) scale(1.06); z-index: 5; }
.collect-rip-room .rr-pack-choice-art { width: 100%; filter: drop-shadow(0 22px 30px rgba(0, 0, 0, .6)); }
.collect-rip-room .rr-pack-serial { font-size: 11px; letter-spacing: .14em; color: var(--sm-muted); }

/* the standalone pack front scales into its stage container */
.collect-rip-room .pack-front-standalone { width: 100%; }
.collect-rip-room .pack-front-standalone .pack-face.pack-front {
  width: 100%;
  height: auto;
  aspect-ratio: 300 / 426;
}
.collect-rip-room .pack-front-standalone .pack-front-vertical { width: 62%; }
.collect-rip-room .pack-front-standalone .pack-title { max-width: 100%; }
.collect-rip-room .pack-front-standalone .pack-ribbon { left: 9%; }
.collect-rip-room .pack-front-standalone .pack-edge-text { right: 3%; }
.collect-rip-room .pack-front-standalone .pack-face > *:not(.pack-artwork) { z-index: 1; }

/* tear */
.collect-rip-room .rr-tear-stage {
  position: relative;
  width: 300px;
  height: 426px;
  touch-action: none;
  cursor: grab;
  animation: rr-rise .4s ease both;
}
.collect-rip-room .rr-tear-stage:active { cursor: grabbing; }
.collect-rip-room .rr-tear-body,
.collect-rip-room .rr-tear-flapwrap,
.collect-rip-room .rr-tear-flap,
.collect-rip-room .rr-tear-edge { position: absolute; inset: 0; pointer-events: none; }
.collect-rip-room .rr-tear-body { transform-origin: 50% 90%; filter: drop-shadow(0 24px 34px rgba(0, 0, 0, .6)); }
.collect-rip-room .rr-tear-flap { transform-origin: 50% 4%; }
.collect-rip-room .rr-tear-edge { background: var(--rr-cream); }
.collect-rip-room .rr-seam { position: absolute; left: 4%; right: 4%; top: 7.8%; border-top: 2px dashed color-mix(in srgb, var(--sm-text) 35%, transparent); pointer-events: none; }
.collect-rip-room .rr-handle {
  position: absolute;
  top: 4.6%;
  left: 7%;
  width: 26px;
  height: 26px;
  margin-left: -13px;
  border-radius: 50%;
  background: var(--sm-orange);
  border: 3px solid #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
  pointer-events: none;
  transition: opacity .3s ease;
  animation: rr-hint 2s ease infinite;
}
.collect-rip-room .btn.rr-assist { font-size: 13px; color: var(--sm-muted); text-decoration: underline; background: transparent; border: none; }

/* pull */
.collect-rip-room .rr-pile,
.collect-rip-room .rr-rest-pile { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; max-width: 660px; min-height: 92px; }
.collect-rip-room .rr-pile-sticker { height: 76px; width: 76px; margin: 0 -5px; transform: rotate(var(--tilt, 0deg)); filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); animation: rr-rise .35s ease both; }
.collect-rip-room .rr-pile-sticker img, .collect-rip-room .rr-pile-sticker svg { width: 100%; height: 100%; object-fit: contain; }
.collect-rip-room .rr-pull-stage {
  position: relative;
  width: 300px;
  height: 426px;
  touch-action: none;
  cursor: grab;
  animation: rr-rise .4s ease both;
}
.collect-rip-room .rr-pull-stage:active { cursor: grabbing; }
.collect-rip-room .rr-glow {
  position: absolute;
  left: 4%;
  right: 4%;
  top: -36px;
  height: 170px;
  border-radius: 50%;
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--sm-text) 28%, transparent) 0%, transparent 70%);
}
.collect-rip-room .rr-glow[data-rank="1"] { background: radial-gradient(ellipse at center, rgba(158, 203, 255, .5) 0%, transparent 70%); animation: rr-glowprism 2.6s linear infinite; }
.collect-rip-room .rr-glow[data-rank="2"] { background: radial-gradient(ellipse at center, rgba(255, 205, 70, .62) 0%, transparent 70%); animation: rr-glowgold 1.15s ease-in-out infinite; }
.collect-rip-room .rr-pull-sticker { position: absolute; inset: 0; display: flex; justify-content: center; pointer-events: none; }
.collect-rip-room .rr-current-sticker { height: 250px; width: 220px; margin-top: -10px; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .55)); animation: rr-nudge 2.2s ease-in-out infinite; }
.collect-rip-room .rr-current-sticker img, .collect-rip-room .rr-current-sticker svg { width: 100%; height: 100%; object-fit: contain; }
.collect-rip-room .rr-pull-body { position: absolute; inset: 0; filter: drop-shadow(0 24px 34px rgba(0, 0, 0, .6)); pointer-events: none; }
.collect-rip-room .rr-burst { position: absolute; left: 50%; top: 12%; pointer-events: none; }
.collect-rip-room .rr-burst.is-bursting::before,
.collect-rip-room .rr-burst.is-bursting::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--sm-rare);
  animation: rr-dot .9s ease-out both;
}
.collect-rip-room .rr-burst.is-bursting::after { background: var(--sm-orange); transform: rotate(120deg); animation-delay: .08s; }
.collect-rip-room .rr-counter { font-size: 11px; letter-spacing: .14em; color: var(--sm-muted); }
.collect-rip-room .rr-pull-links { display: flex; gap: 20px; align-items: center; }

/* summary */
.collect-rip-room .rr-best { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.collect-rip-room .rr-best-sticker { display: block; height: 200px; width: 200px; animation: rr-rise .5s ease both; filter: drop-shadow(0 16px 30px rgba(0, 0, 0, .55)); }
.collect-rip-room .rr-best-art[data-rank="1"] .rr-best-sticker { filter: drop-shadow(0 0 22px rgba(158, 203, 255, .7)) drop-shadow(0 16px 30px rgba(0, 0, 0, .5)); }
.collect-rip-room .rr-best-art[data-rank="2"] .rr-best-sticker { filter: drop-shadow(0 0 28px rgba(255, 190, 60, .8)) drop-shadow(0 16px 30px rgba(0, 0, 0, .5)); }
.collect-rip-room .rr-best-sticker img, .collect-rip-room .rr-best-sticker svg { width: 100%; height: 100%; object-fit: contain; }
.collect-rip-room .rr-best-chip { font-size: 12px; font-weight: 700; border-radius: 4px; padding: 6px 14px; background: var(--sm-page-2); color: var(--sm-text-2); }
.collect-rip-room .rr-best-chip[data-rank="0"] { background: #eeeeee; color: #5c5e62; }
.collect-rip-room .rr-best-chip[data-rank="1"] { background: #e8f0fd; color: #1257bd; }
.collect-rip-room .rr-best-chip[data-rank="2"] { background: #fff0e3; color: #c14e00; }
.collect-rip-room .rr-counts { font-size: 12px; letter-spacing: .16em; color: var(--sm-muted); }
.collect-rip-room .rr-quip { font-size: 16px; font-weight: 700; color: var(--rr-accent-soft); }
.collect-rip-room .rr-claimed { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.collect-rip-room .rr-claimed-line { font-size: 12px; letter-spacing: .14em; color: var(--sm-muted); }
.collect-rip-room .rr-claimed-bar { width: 300px; height: 6px; background: color-mix(in srgb, var(--sm-text) 18%, transparent); border-radius: 999px; overflow: hidden; }
.collect-rip-room .rr-claimed-bar-fill { height: 6px; background: var(--sm-orange); border-radius: 999px; transition: width .8s ease; }
.collect-rip-room .rr-summary-actions { display: flex; gap: 14px; align-items: center; }
.collect-rip-room .btn.rr-again { background: var(--sm-card); border-color: var(--sm-border-2); color: var(--sm-text); font-weight: 700; }
.collect-rip-room .btn.rr-again:hover { background: var(--sm-page-2); border-color: var(--sm-border-2); color: var(--sm-text); }
.collect-rip-room .rr-back-link { font-size: 14px; font-weight: 600; }
.collect-rip-room .rr-noscript { text-align: center; padding: 24px; color: var(--sm-muted); }
.collect-rip-room .rr-empty { text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .collect-rip-room .btn.rr-pack-choice,
  .collect-rip-room .rr-hint,
  .collect-rip-room .rr-handle,
  .collect-rip-room .rr-current-sticker,
  .collect-rip-room .rr-glow { animation: none; }
}
.collect-rip-room .btn.rr-pack-choice:focus-visible,
.collect-rip-room .btn.rr-tear-flip:focus-visible,
.collect-rip-room .btn.rr-assist:focus-visible,
.collect-rip-room .btn.rr-again:focus-visible,
.collect-rip-room .rr-room-back:focus-visible {
  outline: 2px solid var(--rr-accent-soft);
  outline-offset: 4px;
}

/* The handoff is a 1280×800 stage; on a phone the ritual stays intact, but
   the pack stack becomes a horizontal touch strip and the 300px pack scales
   to the available width. */
@media (max-width: 720px) {
  body.collect-rip-room-route .min-h-screen { min-height: 100dvh; }
  .collect-rip-room .rr-stage { min-height: calc(100dvh - 52px); }
  .collect-rip-room .rr-room-meta { align-items: flex-start; gap: 12px; margin-bottom: 22px; }
  .collect-rip-room .rr-room-meta-right { gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
  .collect-rip-room .rr-meta-sealed { display: none; }
  .collect-rip-room .rr-album-score { font-size: 11px; gap: 5px; white-space: nowrap; }
  .collect-rip-room .rr-album-bar { width: 56px; }
  .collect-rip-room .rr-stage-inner { padding: 32px 16px 48px; }
  .collect-rip-room .rr-kicker { font-size: 11px; }
  .collect-rip-room .rr-headline { font-size: 28px; }
  .collect-rip-room .rr-hint {
    max-width: 320px;
    margin-bottom: 28px;
    line-height: 1.55;
  }
  .collect-rip-room .rr-choose-row {
    width: 100vw;
    max-width: 100vw;
    justify-content: flex-start;
    overflow-x: auto;
    padding: 10px 36px 24px;
    scrollbar-width: none;
  }
  .collect-rip-room .rr-choose-row::-webkit-scrollbar { display: none; }
  .collect-rip-room .btn.rr-pack-choice {
    flex: 0 0 174px;
    width: 174px;
    margin: 0 -8px;
  }
  .collect-rip-room .rr-shop { width: min(100%, 330px); padding: 18px 16px; }
  .collect-rip-room .rr-shop-copy { text-align: center; }
  .collect-rip-room .rr-shop .cart-add-form { width: 100%; }
  .collect-rip-room .rr-shop .cart-add-form .btn { width: 100%; }
  .collect-rip-room .rr-tear-stage,
  .collect-rip-room .btn.rr-tear-flip,
  .collect-rip-room .rr-pull-stage {
    width: min(300px, calc(100vw - 40px));
    height: auto;
    aspect-ratio: 300 / 426;
  }
  .collect-rip-room .rr-pull-links,
  .collect-rip-room .rr-summary-actions { flex-wrap: wrap; justify-content: center; }
  .collect-rip-room .rr-claimed-bar { width: min(300px, calc(100vw - 40px)); }
}
.album-pack-shelf .pack-shelf-rip-room { display: inline-block; margin-top: 6px; font-size: 14px; font-weight: 700; color: var(--sm-orange); }

/* Landing album picker — one selected template controls the pack stage. */
.collect-landing .landing-rip-selector { max-width: 1060px; margin: 34px auto 0; }
.collect-landing .landing-rip-template-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}
.collect-landing .landing-rip-template {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
  background: var(--landing-card);
  border: 2px solid transparent;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 3px 14px rgba(29, 24, 19, .09);
  text-align: left;
  padding: 9px 9px 12px;
  color: var(--landing-text);
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.collect-landing .landing-rip-template:hover { transform: translateY(-2px); text-decoration: none; }
.collect-landing .landing-rip-template.is-selected {
  border-color: var(--landing-orange);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--landing-orange) 18%, transparent);
  transform: translateY(-3px);
}
.collect-landing .landing-rip-template:focus-visible { outline: 3px solid color-mix(in srgb, var(--landing-blue) 40%, transparent); outline-offset: 3px; }
.collect-landing .landing-rip-template-cover {
  position: relative;
  display: block;
  aspect-ratio: 1042 / 500;
  overflow: hidden;
  border-radius: 7px;
  background: var(--landing-strip);
}
.collect-landing .landing-rip-template-cover > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.collect-landing .landing-rip-template-fallback { display: grid; width: 100%; height: 100%; place-items: center; font-size: 34px; font-weight: 900; color: var(--landing-faint); }
.collect-landing .landing-rip-template-order {
  position: absolute;
  right: 7px;
  bottom: 7px;
  border-radius: 999px;
  padding: 4px 7px;
  background: #1d1813;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.collect-landing .landing-rip-template-name { font-size: 14px; font-weight: 800; line-height: 1.2; }
.collect-landing .landing-rip-template-body { font-size: 11.5px; line-height: 1.35; color: var(--landing-muted); }
.collect-landing .landing-rip-active {
  width: min(100%, 360px);
  padding: 28px;
  border: 1px solid var(--landing-border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--landing-card) 94%, var(--landing-rip-active, var(--landing-orange)) 6%);
  box-shadow: 0 12px 34px rgba(29, 24, 19, .08);
  text-align: left;
}
.collect-landing .landing-rip-active-kicker { display: block; margin-bottom: 8px; color: var(--landing-faint); font-size: 10px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.collect-landing .landing-rip-active h3 { margin: 0; color: var(--landing-text); font-size: 28px; line-height: 1.08; }
.collect-landing .landing-rip-active-body { margin: 10px 0 0; color: var(--landing-muted); font-size: 14px; line-height: 1.5; }
.collect-landing .landing-rip-active-mechanic { margin: 18px 0 0; border-left: 3px solid var(--landing-rip-active, var(--landing-orange)); padding: 3px 0 3px 12px; color: var(--landing-text); font-size: 13px; font-weight: 700; line-height: 1.45; }
.collect-landing .landing-rip-active-found { margin: 18px 0 0; color: var(--landing-green); font-size: 13px; font-weight: 800; }
.collect-landing .landing-rip-active-actions { display: flex; align-items: center; gap: 16px; margin-top: 22px; flex-wrap: wrap; }
.collect-landing .landing-rip-active-mechanic[hidden],
.collect-landing .landing-rip-active-found[hidden],
.collect-landing .landing-rip-active-actions [hidden] { display: none; }
.collect-landing .landing-album-choice-riproom { font-size: 13px; font-weight: 700; color: var(--landing-blue); }
@media (max-width: 900px) {
  .collect-landing .landing-rip-template-grid {
    grid-template-columns: repeat(6, 184px);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    padding: 5px 4px 18px;
    scrollbar-width: thin;
  }
  .collect-landing .landing-rip-template { scroll-snap-align: start; }
  .collect-landing .landing-rip-row { gap: 34px; }
}

/* Rip Room v2 — in-room pack shop + flip-then-tear (the tear strip is
   printed on the pack back). */
.collect-rip-room .rr-shop-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 40px; }
.collect-rip-room .rr-shop {
  display: flex;
  align-items: center;
  gap: 22px;
  background: var(--rr-panel);
  border: 1px solid var(--rr-panel-line);
  border-radius: 10px;
  padding: 18px 26px;
  flex-wrap: wrap;
  justify-content: center;
}
.collect-rip-room .rr-shop-copy { text-align: left; }
.collect-rip-room .rr-shop-title { font-size: 13px; font-weight: 700; color: var(--rr-text); }
.collect-rip-room .rr-shop-sub { font-size: 12px; color: var(--rr-muted); }
.collect-rip-room .rr-shop-note { font-size: 11px; letter-spacing: .12em; color: var(--rr-muted); text-align: center; }

.collect-rip-room .btn.rr-tear-flip {
  display: block;
  width: 300px;
  height: 426px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  perspective: 1300px;
  animation: rr-rise .4s ease both;
}
.collect-rip-room .rr-tear-flip-scene {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .62s cubic-bezier(.35, 1.2, .4, 1);
}
.collect-rip-room .btn.rr-tear-flip.is-flipped .rr-tear-flip-scene { transform: rotateY(180deg); }
.collect-rip-room .rr-tear-flip-face { position: absolute; inset: 0; backface-visibility: hidden; filter: drop-shadow(0 24px 34px rgba(0, 0, 0, .6)); }
.collect-rip-room .rr-tear-flip-back { transform: rotateY(180deg); }
.collect-rip-room .pack-back-standalone { width: 100%; height: 100%; }
.collect-rip-room .pack-back-standalone .pack-face.pack-back { width: 100%; height: 100%; aspect-ratio: 300 / 426; }
.collect-rip-room .rr-tear-flip-face .pack-front-standalone,
.collect-rip-room .rr-tear-flip-face .pack-front-standalone .pack-face.pack-front { height: 100%; }
@media (prefers-reduced-motion: reduce) {
  .collect-rip-room .rr-tear-flip-scene { transition: none; }
}

/* Album pack shelf — the Rip Room door replaces the inline rip stage. */
.album-pack-shelf .pack-shelf-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 16px; }
.album-pack-shelf .pack-shelf-cta-note { margin: 0; font-size: 13px; }
.album-pack-shelf .pack-shelf-item { display: inline-flex; align-items: center; gap: 8px; }

/* ============================================================
   Pop-up — small sticker-pack displays inside shops (/collect/stores).
   Wears the collect-landing grammar (light page, orange hero,
   landing-h2 sections, landing-step-card shadows) so it reads as
   a sibling of /collect/landing. Storefront photos are day/night
   <picture> pairs (night for dark color schemes). No JavaScript
   (ADR-0051): country filtering is SVG links, paging is links.
   ============================================================ */
/* ============================================================
   Product wordmarks — the distinct-display-face system (2026-07).
   Replaces the traced single-slab-serif SVG image marks: each tool now wears a
   genuinely different display face rendered as real, selectable text + CSS,
   unified only by the shared Collect chrome. The visible text is exposed to
   assistive tech via role="img" + aria-label on the .collect-wordmark span
   (see components/atoms/product_logos.go and features/ride_along/ui/view.go).
   Faces are self-hosted woff2 (see @font-face above / browser/fonts/README.md).
   ============================================================ */
.collect-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
  -webkit-user-select: none;
  user-select: none;
}
.collect-wordmark .collect-wordmark-glyph {
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
}
/* Clear the hero wordmark from the H1 that follows it. */
.collect-stores .stores-hero .collect-wordmark,
.collect-stickify .stickify-hero .collect-wordmark,
.collect-ride .ride-hero .collect-wordmark { margin-bottom: 18px; }

/* STICKIFY — Baloo 2 800: rounded ultra-bold letters with a crisp white
   die-cut halo so the wordmark reads as a peeled sticker. The scissors glyph
   signals "cut out". */
.collect-wordmark.is-stickify {
  font-family: "Baloo 2", "Mulish", system-ui, sans-serif;
  font-weight: 800;
  font-size: 40px;
  letter-spacing: -.02em;
  color: var(--sm-orange);
}
.collect-wordmark.is-stickify .collect-wordmark-glyph {
  color: var(--sm-orange);
  transform: rotate(-8deg);
}
.collect-wordmark.is-stickify .collect-wordmark-text {
  /* die-cut white ring: stroke painted under the fill = crisp sticker edge */
  paint-order: stroke fill;
  -webkit-text-stroke: 6px #fff;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .12));
}

/* RIDE — Barlow Semi Condensed 800 italic: condensed, uppercase, skewed for
   motion, teal, with a small trailing speed-line detail. The parcel + arrow
   glyph signals delivery. */
.collect-wordmark.is-ride {
  font-family: "Barlow Semi Condensed", "Mulish", system-ui, sans-serif;
  font-weight: 800;
  font-style: italic;
  font-size: 44px;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--sm-teal-ink, #087f7b);
  transform: skewX(-6deg);
}
.collect-wordmark.is-ride::after {
  content: "";
  flex: 0 0 auto;
  width: 20px;
  height: 12px;
  margin-left: 2px;
  background:
    linear-gradient(currentColor, currentColor) 0 2px / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) 0 6px / 72% 2px no-repeat,
    linear-gradient(currentColor, currentColor) 0 10px / 46% 2px no-repeat;
  opacity: .8;
}

/* POP-UP — Bungee stacked marquee: two tight lines + a monospace collector
   tag, magenta. The storefront/awning glyph signals a tiny shop-in-a-shop. */
.collect-wordmark.is-popup {
  align-items: center;
  gap: 12px;
  font-family: "Bungee", "Mulish", system-ui, sans-serif;
  color: var(--sm-magenta);
}
.collect-wordmark.is-popup .collect-wordmark-glyph {
  width: 1.5em;
  height: 1.5em;
  align-self: flex-start;
  margin-top: 2px;
}
.collect-wordmark.is-popup .collect-wordmark-stack {
  display: inline-flex;
  flex-direction: column;
  font-size: 30px;
  line-height: .82;
  letter-spacing: .01em;
}
.collect-wordmark.is-popup .collect-wordmark-tag {
  align-self: flex-end;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sm-magenta-ink, #b70a68);
}

.collect-stores .stores-hero {
  background: var(--landing-blue-wash);
  border-bottom: 1px solid var(--landing-border-soft);
}
.collect-stores .stores-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
  gap: clamp(40px, 6vw, 76px);
  align-items: center;
  width: min(100%, 1080px);
  margin: 0 auto;
  padding: 64px 24px 68px;
}
.collect-stores .stores-hero h1 {
  margin: 0 0 14px;
  color: var(--landing-text);
  font-size: clamp(2.45rem, 4.8vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: .98;
}
.collect-stores .stores-hero-lede { max-width: 560px; margin: 0; font-size: 17px; }
.collect-stores .stores-hero-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 26px; }
.collect-stores .btn.stores-hero-primary {
  border-color: var(--page-accent);
  border-radius: var(--sm-radius-btn);
  background: var(--page-accent);
  color: #ffffff;
  font-weight: 700;
}
.collect-stores .btn.stores-hero-primary:hover { border-color: var(--page-accent-2); background: var(--page-accent-2); }
.collect-stores .stores-hero-collage {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
  gap: 12px;
  min-width: 0;
}
.collect-stores .stores-hero-photo {
  display: block;
  width: 100%;
  height: clamp(260px, 28vw, 350px);
  border: 1px solid var(--landing-border-soft);
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 18px 40px rgba(52, 33, 17, .1);
}
.collect-stores .stores-hero-photo.is-secondary { margin-top: 34px; height: calc(clamp(260px, 28vw, 350px) - 34px); }
.collect-stores .stores-content {
  width: min(100%, 1200px);
  margin: 0 auto;
  padding: 42px clamp(20px, 3vw, 40px) 80px;
}

/* Host proposition — three verified benefits, presented as one editorial
   story rather than three unrelated product cards. The equal-weight anatomy
   is reusable; all claims and navigation arrive through StoresHostPitchData. */
.collect-stores .stores-host-pitch {
  scroll-margin-top: 20px;
  padding: 10px 0 62px;
  border-bottom: 1px solid var(--landing-border-soft);
}
.collect-stores .stores-host-pitch-head {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(320px, 1.15fr);
  align-items: end;
  gap: clamp(32px, 6vw, 88px);
}
.collect-stores .stores-host-eyebrow {
  margin: 0 0 10px;
  color: var(--page-accent-2);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.collect-stores .stores-host-pitch .landing-h2 {
  max-width: 12ch;
  margin: 0;
  color: var(--landing-text);
  font-size: clamp(2rem, 4.2vw, 3rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.02;
  text-wrap: balance;
}
.collect-stores .stores-host-lede {
  max-width: 640px;
  margin: 0;
  color: var(--landing-muted);
  font-size: 17px;
  line-height: 1.7;
}
.collect-stores .stores-host-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: 38px 0 0;
  padding: 0;
  border-top: 1px solid var(--landing-border-soft);
  border-bottom: 1px solid var(--landing-border-soft);
}
.collect-stores .stores-host-benefit {
  min-width: 0;
  padding: 30px clamp(22px, 3vw, 38px) 34px;
}
.collect-stores .stores-host-benefit + .stores-host-benefit { border-left: 1px solid var(--landing-border-soft); }
.collect-stores .stores-host-benefit:first-child { padding-left: 0; }
.collect-stores .stores-host-benefit:last-child { padding-right: 0; }
.collect-stores .stores-host-benefit-icon {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  margin-bottom: 22px;
  border-radius: 50%;
  background: var(--landing-glitter-wash);
  color: var(--page-accent-2);
}
.collect-stores .stores-host-benefit h3 {
  margin: 0 0 9px;
  color: var(--landing-text);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.25;
}
.collect-stores .stores-host-benefit p {
  margin: 0;
  color: var(--landing-faint);
  font-size: 14px;
  line-height: 1.65;
}
.collect-stores .stores-host-action {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}
.collect-stores .btn.stores-host-cta {
  border-color: var(--page-accent);
  border-radius: var(--sm-radius-btn);
  background: var(--page-accent);
  color: #ffffff;
  font-weight: 800;
}
.collect-stores .btn.stores-host-cta:hover {
  border-color: var(--page-accent-2);
  background: var(--page-accent-2);
}

.collect-stores .stores-coverage { margin-top: 62px; scroll-margin-top: 20px; }
.collect-stores .stores-section-intro { max-width: 700px; margin: 0 0 26px; }
.collect-stores .stores-section-intro .landing-h2 { margin-bottom: 8px; }
.collect-stores .stores-section-intro p { margin: 0; }
.collect-stores .stores-stats {
  gap: 12px;
  margin-bottom: 28px;
  padding-bottom: 0;
  border-bottom: 0;
}
.collect-stores .stores-stats > div {
  padding: 18px 14px;
  border: 1px solid var(--landing-border-soft);
  border-radius: 10px;
  background: var(--landing-section);
}
.collect-stores .stores-stats .stat {
  min-width: 0;
  text-align: center;
}
.collect-stores .stores-stats .stat .n {
  color: var(--landing-text);
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
}
.collect-stores .stores-stats .stat .l {
  margin-top: 6px;
  color: var(--landing-faint);
  font-size: 13px;
  font-weight: 600;
}

.collect-stores .stores-map { margin: 8px 0 28px; }
.collect-stores .stores-map .performance-map-panel {
  background: var(--landing-card, #ffffff);
  border: 1px solid var(--landing-border-soft);
  border-radius: 14px;
  padding: 0;
  box-shadow: none;
  overflow: hidden;
}
.collect-stores .stores-map .performance-panel-head {
  padding: 22px 24px 16px;
  background: transparent;
}
.collect-stores .stores-map .performance-map-body {
  grid-template-columns: minmax(0, 2fr) minmax(280px, .8fr);
  align-items: start;
  gap: 28px;
  padding: 20px 24px 24px;
}
.collect-stores .stores-map .performance-world-map {
  padding: 12px;
  border: 0;
  border-radius: 10px;
  background: var(--landing-blue-wash);
}
.collect-stores .stores-map .performance-world-map svg {
  min-height: 0;
}
.collect-stores .stores-map a .map-country { cursor: pointer; }
.collect-stores .stores-map a:hover .map-country,
.collect-stores .stores-map a:focus .map-country,
.collect-stores .stores-map .map-country-active.is-selected {
  stroke: var(--page-accent);
  stroke-width: 1.6;
}
.collect-stores .stores-map svg a:focus-visible { outline: 2px solid var(--page-accent); outline-offset: 2px; }

.collect-stores .country-map-zoom-nav { margin: -4px 0 12px; }
.collect-stores .country-map-zoom-back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--landing-blue-2);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}
.collect-stores .country-map-zoom-back:hover,
.collect-stores .country-map-zoom-back:focus-visible { color: var(--page-accent); text-decoration: underline; }

.collect-stores .stores-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  padding: 10px 14px;
  border: 1px solid var(--landing-border);
  border-radius: 4px;
  background: var(--landing-blue-wash);
}
.collect-stores .stores-filter-label {
  display: inline-flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: min(100%, 240px);
  color: var(--landing-text);
}
.collect-stores .stores-filter a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.collect-stores .stores-filter .stores-filter-action,
.collect-stores .stores-pager .stores-pager-action {
  color: var(--landing-blue);
  border-color: var(--landing-border);
  background: var(--landing-card);
  text-decoration: none;
}
.collect-stores .stores-filter .stores-filter-action:hover,
.collect-stores .stores-pager .stores-pager-action:hover,
.collect-stores .stores-filter .stores-filter-action:focus-visible,
.collect-stores .stores-pager .stores-pager-action:focus-visible {
  color: var(--landing-blue-2);
  border-color: var(--landing-blue);
  background: var(--landing-blue-wash);
}

.collect-stores .stores-city { margin-top: 36px; }
.collect-stores .stores-route {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.collect-stores .stores-stop {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--landing-border-soft);
  border-radius: 12px;
  box-shadow: none;
}
.collect-stores .stores-stop-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  padding: 0;
  object-fit: cover;
  background: var(--landing-blue-wash);
}
.collect-stores .stores-stop-body { padding: 14px 16px 16px; }
.collect-stores .stores-stop-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Stop number renders through the a.NumberTag atom (self-styled pill);
   the wrapper only aligns it. */
.collect-stores .stores-stop-num { flex: 0 0 auto; display: inline-flex; align-items: center; }
.collect-stores .stores-stop-name { margin: 0; font-size: 17px; font-weight: 700; color: var(--landing-text); }
.collect-stores .stores-fresh {
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--landing-holo-border);
  background: var(--landing-holo-wash);
  color: var(--landing-blue-2);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.collect-stores .stores-stop-addr { margin: 8px 0 0; font-size: 13px; color: var(--landing-faint); }
.collect-stores .stores-stop-day { margin: 3px 0 0; font-size: 13px; font-weight: 700; color: var(--landing-muted); }
.collect-stores .stores-dispenser { margin-top: 12px; }
.collect-stores .stores-dispenser-label {
  display: block;
  margin-bottom: 7px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--landing-faint);
}
.collect-stores .stores-dispenser-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.collect-stores .stores-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border: 1px solid var(--landing-border);
  border-radius: 999px;
  background: var(--landing-card, #ffffff);
  color: var(--landing-text);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
}
.collect-stores .stores-chip:hover { border-color: var(--stores-chip-accent, var(--page-accent)); }
.collect-stores .stores-chip-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--stores-chip-accent, var(--page-accent));
}
.collect-stores .stores-dispenser-empty { margin: 12px 0 0; font-size: 13px; font-style: italic; color: var(--landing-faint); }
.collect-stores .stores-pager { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 44px 0 8px; }
.collect-stores .stores-pager-state { font-size: 13px; font-weight: 700; color: var(--landing-muted); }
.collect-stores .stores-empty {
  margin: 36px 0;
  padding: 40px 24px;
  border: 1px dashed var(--landing-border);
  border-radius: 4px;
  text-align: center;
}

/* Country segmentation: zoomed single-country map with first-level division
   heat fills and city dots as the more precise second read. */
.collect-stores .country-heat-map svg {
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
}
.collect-stores .country-heat-shape { fill: var(--landing-blue-wash); stroke: var(--landing-border); }
.collect-stores .country-heat-division {
  fill: var(--landing-blue-wash);
  fill-opacity: .32;
  stroke: var(--landing-border);
  stroke-width: .72;
  vector-effect: non-scaling-stroke;
  transition: fill .18s ease, stroke .18s ease, opacity .18s ease;
}
.collect-stores .country-heat-division.heat-1 { fill: var(--page-accent); fill-opacity: .42; }
.collect-stores .country-heat-division.heat-2 { fill: var(--page-accent); fill-opacity: .56; }
.collect-stores .country-heat-division.heat-3 { fill: var(--page-accent); fill-opacity: .70; }
.collect-stores .country-heat-division.heat-4 { fill: var(--page-accent); fill-opacity: .84; }
.collect-stores .country-heat-division.heat-5 { fill: var(--page-accent); fill-opacity: .98; }
.collect-stores a:hover .country-heat-division,
.collect-stores a:focus-visible .country-heat-division {
  stroke: var(--page-accent);
  stroke-width: 1.4;
  opacity: .9;
}
.collect-stores .country-heat-division.is-selected {
  stroke: var(--page-accent);
  stroke-width: 1.8;
  filter: drop-shadow(0 0 6px rgba(255, 90, 0, .24));
}
.collect-stores .country-heat-city { cursor: pointer; transition: opacity .15s ease; }
.collect-stores a:hover .country-heat-city,
.collect-stores a:focus .country-heat-city { opacity: .75; }
.collect-stores .country-heat-city.is-selected { stroke: var(--page-accent); stroke-width: 1.5; }
.collect-stores .stores-map .performance-country-row.is-selected {
  border-color: var(--page-accent);
  background: var(--landing-glitter-wash);
}
.collect-stores .stores-map .performance-country-row[href] {
  color: inherit;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.collect-stores .stores-map .performance-country-row[href]:hover,
.collect-stores .stores-map .performance-country-row[href]:focus-visible {
  border-color: var(--page-accent);
  background: var(--landing-glitter-wash);
  text-decoration: none;
  transform: translateY(-1px);
}
.collect-stores .country-heat-list {
  max-height: 520px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-gutter: stable;
}
.collect-stores .stores-map .country-name {
  color: var(--landing-text);
  text-decoration: none;
}
.collect-stores .stores-map .country-name:hover,
.collect-stores .stores-map .country-name:focus-visible {
  color: var(--landing-blue-2);
  text-decoration: underline;
}

@media (max-width: 860px) {
  .collect-stores .stores-host-pitch-head { grid-template-columns: 1fr; gap: 14px; }
  .collect-stores .stores-host-pitch .landing-h2 { max-width: 16ch; }
  .collect-stores .stores-host-lede { max-width: 680px; }
  .collect-stores .stores-host-benefits { grid-template-columns: 1fr; }
  .collect-stores .stores-host-benefit,
  .collect-stores .stores-host-benefit:first-child,
  .collect-stores .stores-host-benefit:last-child { padding: 25px 0 28px; }
  .collect-stores .stores-host-benefit + .stores-host-benefit {
    border-top: 1px solid var(--landing-border-soft);
    border-left: 0;
  }
  .collect-stores .stores-host-benefit-icon { margin-bottom: 16px; }
  .collect-stores .stores-map .performance-map-body {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .collect-stores .country-heat-list { max-height: 420px; }
}

@media (max-width: 920px) {
  .collect-stores .stores-route { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .collect-stores .stores-content { padding-top: 28px; }
  .collect-stores .stores-host-pitch { padding-top: 4px; padding-bottom: 48px; }
  .collect-stores .stores-coverage { margin-top: 48px; }
  .collect-stores .stores-route { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .collect-stores .stores-map .performance-panel-head { padding: 18px 16px 14px; }
  .collect-stores .stores-map .performance-map-body { padding: 14px 16px 18px; }
  .collect-stores .stores-map .performance-world-map { padding: 8px; }
  .collect-stores .stores-filter { align-items: flex-start; gap: 4px 12px; }
  .collect-stores .stores-filter-label { flex: 1 1 100%; }
  .collect-stores .country-heat-list { max-height: 360px; }
}

@media (max-width: 860px) {
  .collect-stores .stores-hero-inner { grid-template-columns: 1fr; padding-top: 44px; }
  .collect-stores .stores-hero-copy { max-width: 640px; }
  .collect-stores .stores-hero-collage { max-width: 640px; }
}

@media (max-width: 560px) {
  .collect-stores .stores-hero-inner { gap: 32px; padding: 36px 16px 44px; }
  .collect-stores .stores-hero h1 { font-size: clamp(2.25rem, 12vw, 2.9rem); }
  .collect-stores .stores-hero-photo { height: 240px; border-radius: 12px; }
  .collect-stores .stores-hero-photo.is-secondary { margin-top: 22px; height: 218px; }
  .collect-stores .stores-stats { grid-template-columns: 1fr; }
}

/* Landing: the ride-along parcels pitch (three-card, brand-facing). */
.collect-landing .landing-parcels { margin-top: 64px; }
.collect-landing .landing-parcels-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 8px;
}
@media (max-width: 860px) { .collect-landing .landing-parcels-grid { grid-template-columns: 1fr; } }
.collect-landing .landing-parcel-card { display: flex; flex-direction: column; }
.collect-landing .landing-parcel-body { padding: 14px 16px 16px; }
.collect-landing .landing-parcel-body h3 { margin: 0 0 6px; font-size: 17px; }
.collect-landing .landing-parcel-body p { margin: 0; font-size: 14px; line-height: 1.6; }

/* Landing hero: the Pop-up discovery link under the main CTA. */
.collect-landing .landing-hero-pullpoints { margin: 14px 0 0; }
.collect-landing .landing-hero-pullpoints .landing-link { color: var(--landing-blue); text-decoration: underline; }
.collect-landing .landing-hero-pullpoints .landing-link:hover { color: var(--landing-blue); }

/* Create wizard: the post-create distribution explainer (preview pane). */
.dist-after-card { padding: 24px; max-width: 420px; margin: 0 auto; }
.dist-after-card h3 { margin: 0 0 8px; }
.dist-after-card ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 14px; }
.dist-after-item { display: flex; gap: 12px; align-items: flex-start; }
.dist-after-item p { margin: 2px 0 0; font-size: 13px; color: var(--sm-text-2); }

/* Album: the owner's distribution card (parcel ride-along booking). */
.ride-along-card {
  max-width: var(--sm-content-max);
  margin: 28px auto 0;
  padding: 24px;
  background: var(--sm-card);
  border: 1px solid var(--sm-border);
  border-radius: 10px;
}
.ride-along-card h3 { margin: 0 0 6px; }
.ride-along-lead { margin: 0 0 16px; color: var(--sm-text-2); font-size: 14px; line-height: 1.55; }
.ride-along-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 720px) { .ride-along-tiers { grid-template-columns: 1fr; } }
.ride-along-tier {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--sm-border-2);
  border-radius: 8px;
}
.ride-along-tier-n { font-size: 20px; font-weight: 800; }
.ride-along-tier-n::after { content: " parcels"; font-size: 12px; font-weight: 600; color: var(--sm-muted); }
.ride-along-tier-price { color: var(--sm-text-2); font-weight: 700; }
.ride-along-unit { margin: 10px 0 0; font-size: 12.5px; color: var(--sm-muted); }
.ride-along-runs-title { margin: 18px 0 8px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--sm-muted); }
.ride-along-runs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ride-along-run { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.ride-along-run-meta { color: var(--sm-muted); font-size: 13px; }
.ride-along-empty { margin: 14px 0 0; font-size: 13px; color: var(--sm-muted); font-style: italic; }
.ride-along-pullpoints { margin: 16px 0 0; font-size: 13px; }

/* Two-panel wizard: the tune folds on the order screen. */
.create-tune { margin: 14px 0; border: 1px solid var(--sm-border); border-radius: 8px; padding: 0; }
.create-tune > summary {
  cursor: pointer;
  padding: 13px 16px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--sm-text-2);
  list-style: none;
}
.create-tune > summary::before { content: "▸ "; color: var(--sm-muted); }
.create-tune[open] > summary::before { content: "▾ "; }
.create-tune[open] { padding-bottom: 16px; }
.create-tune[open] > summary { border-bottom: 1px solid var(--sm-border); margin-bottom: 12px; }
.create-tune > *:not(summary) { padding: 0 16px; }

/* ============ Ride product page (/collect/ride) ============ */
/* Wears the landing grammar; only Ride-specific layout lives here. */
.collect-ride .ride-hero {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 44px;
  align-items: center;
  width: min(100%, 1080px);
  margin: 0 auto;
  padding: 56px 24px 40px;
}
.collect-ride .ride-kicker {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--page-accent);
}
.collect-ride .ride-hero h1 {
  margin: 0 0 12px;
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--landing-text);
}
.collect-ride .ride-lede { margin: 0 0 24px; font-size: 17px; }
.collect-ride .ride-hero-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.collect-ride .ride-hero-photo {
  width: 100%;
  border-radius: 16px;
  border: 1px solid var(--landing-border-soft);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .12);
}
@media (max-width: 860px) {
  .collect-ride .ride-hero { grid-template-columns: 1fr; padding-top: 40px; }
  .collect-ride .ride-hero-photo { order: -1; }
}

.collect-ride .ride-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: min(100%, 1080px);
  margin: 0 auto;
  padding: 8px 24px 48px;
}
.collect-ride .ride-benefit {
  background: var(--landing-card);
  border: 1px solid var(--landing-border);
  border-radius: 12px;
  padding: 20px 22px;
}
.collect-ride .ride-benefit h3 { margin: 0 0 6px; font-size: 16px; color: var(--landing-text); }
.collect-ride .ride-benefit p { margin: 0; font-size: 14px; }
@media (max-width: 860px) { .collect-ride .ride-benefits { grid-template-columns: 1fr; } }

.collect-ride .ride-features { width: min(100%, 1080px); margin: 0 auto; padding: 8px 24px 24px; }
.collect-ride .ride-feature {
  display: flex;
  align-items: center;
  gap: 48px;
  margin-bottom: 56px;
}
.collect-ride .ride-feature:nth-of-type(even) { flex-direction: row-reverse; }
.collect-ride .ride-feature-photo {
  flex: 0 1 50%;
  min-width: 0;
  border-radius: 16px;
  border: 1px solid var(--landing-border-soft);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .1);
}
.collect-ride .ride-feature-body { flex: 1 1 0; }
.collect-ride .ride-feature-body p { font-size: 15px; }
@media (max-width: 860px) {
  .collect-ride .ride-feature,
  .collect-ride .ride-feature:nth-of-type(even) { flex-direction: column; gap: 18px; margin-bottom: 40px; }
  .collect-ride .ride-feature-photo { flex-basis: auto; width: 100%; }
}

.collect-ride .ride-ship { padding-top: 24px; }
.collect-ride .ride-ship-steps {
  counter-reset: ride-step;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.collect-ride .ride-ship-steps li {
  counter-increment: ride-step;
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: 15px;
  color: var(--landing-body);
}
.collect-ride .ride-ship-steps li::before {
  content: counter(ride-step);
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--page-accent);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.collect-ride .ride-pricing { width: min(100%, 1080px); margin: 0 auto; padding: 16px 24px 48px; }
.collect-ride .ride-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 28px;
}
.collect-ride .ride-tier {
  background: var(--landing-card);
  border: 1px solid var(--landing-border);
  border-radius: 12px;
  padding: 26px 22px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.collect-ride .ride-tier-parcels { font-size: 14px; font-weight: 700; color: var(--landing-muted); text-transform: uppercase; letter-spacing: .06em; }
.collect-ride .ride-tier-price { font-size: 34px; font-weight: 800; color: var(--landing-text); }
.collect-ride .ride-tier-note { margin: 0 0 14px; font-size: 13px; }
@media (max-width: 860px) { .collect-ride .ride-tiers { grid-template-columns: 1fr; } }

/* Landing: the "Meet Ride" link under the parcels lede. */
.collect-landing .landing-parcels-more { margin: -24px 0 28px; text-align: center; }

/* Ride: the hero wordmark is now real text — see .collect-wordmark.is-ride. */

/* Ride: closing "Ship it" is not live yet — disabled CTA + tools-grid chip. */
.collect-ride .ride-soon-chip {
  border: 1px solid var(--landing-border);
  border-radius: 6px;
  background: var(--landing-card);
  color: var(--landing-muted);
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  white-space: nowrap;
}

/* Ride refinements: Ship-page rhythm (soft hero band, glyph-led benefit
   cards, featured pricing tier, washed works-with-Ship panel). */
.collect-ride .ride-hero-band {
  background: linear-gradient(180deg, var(--landing-blue-wash) 0%, var(--landing-page) 100%);
  border-bottom: 1px solid var(--landing-border-soft);
}
.collect-ride .ride-hero .collect-wordmark { font-size: 52px; }
.collect-ride .ride-hero { padding: 64px 24px 56px; }

.collect-ride .ride-benefit { position: relative; padding-top: 24px; }
.collect-ride .ride-benefit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--landing-blue-wash);
  color: var(--page-accent);
  margin-bottom: 12px;
}

.collect-ride .ride-ship {
  max-width: 860px;
  background: var(--landing-section);
  border: 1px solid var(--landing-border-soft);
  border-radius: 16px;
  padding: 36px 40px 40px;
  margin: 8px auto 56px;
}
.collect-ride .ride-ship .landing-sub { margin-bottom: 24px; }

.collect-ride .ride-pricing-soon { text-align: center; margin: -22px 0 0; }
.collect-ride .ride-tier { position: relative; }
.collect-ride .ride-tier.is-featured { border: 2px solid var(--page-accent); }
.collect-ride .ride-tier-badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--page-accent);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}
.collect-ride .ride-tier .btn[disabled] { opacity: .55; cursor: not-allowed; }
.collect-ride .ride-close .landing-h2 { margin-bottom: 20px; }

/* ============ Stickify product tool (/stickify) ============ */
/* The tool itself is the hero: a compact product story on the left and the
   real CSRF-safe upload workbench on the right. Trace results expand into a
   wide, border-light workspace below instead of inheriting form width. */
.collect-stickify .stickify-hero-band {
  background: linear-gradient(180deg, var(--landing-blue-wash) 0%, var(--landing-page) 100%);
  border-bottom: 1px solid var(--landing-border-soft);
}
.collect-stickify .stickify-hero {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
  gap: clamp(40px, 6vw, 76px);
  align-items: center;
  width: min(100%, 1080px);
  margin: 0 auto;
  padding: 64px 24px 68px;
}
.collect-stickify .stickify-hero h1 {
  max-width: 560px;
  margin: 0 0 16px;
  color: var(--landing-text);
  font-size: clamp(2.35rem, 4.7vw, 3.45rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: .98;
  text-wrap: balance;
}
.collect-stickify .stickify-lede { max-width: 560px; margin: 0; font-size: 17px; }
.collect-stickify .stickify-trust {
  display: grid;
  gap: 10px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.collect-stickify .stickify-trust li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--landing-body);
  font-size: 14px;
  font-weight: 650;
}
.collect-stickify .stickify-trust .collect-icon { color: var(--landing-orange); }

.collect-stickify .stickify-workbench {
  min-width: 0;
  padding: 28px;
  border: 1px solid var(--landing-border);
  border-radius: 16px;
  background: var(--landing-card);
  box-shadow: 0 18px 42px rgba(52, 33, 17, .1);
}
.collect-stickify .stickify-workbench-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 22px;
}
.collect-stickify .stickify-step-number {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--landing-blue-wash);
  color: var(--landing-orange);
  font-size: 13px;
  font-weight: 800;
}
.collect-stickify .stickify-workbench-head h2 { margin: 0 0 3px; font-size: 18px; color: var(--landing-text); }
.collect-stickify .stickify-workbench-head p { margin: 0; font-size: 13px; line-height: 1.55; }
.collect-stickify .stickify-form { display: grid; gap: 16px; }
.collect-stickify .stickify-file-field {
  display: grid;
  gap: 8px;
  padding: 18px;
  border: 1px dashed var(--landing-faint);
  border-radius: 10px;
  background: var(--landing-section);
  cursor: pointer;
}
.collect-stickify .stickify-file-field:hover { border-color: var(--landing-orange); background: var(--landing-blue-wash); }
.collect-stickify .stickify-file-field label { color: var(--landing-text); font-size: 14px; font-weight: 750; }
.collect-stickify .stickify-file-field [id$="-help"],
.collect-stickify .stickify-field-help { color: var(--landing-faint); font-size: 12.5px; line-height: 1.45; }
.collect-stickify .stickify-file-field [data-file-upload-input] {
  width: 100%;
  min-width: 0;
  color: var(--landing-muted);
  font: inherit;
  font-size: 13px;
}
.collect-stickify .stickify-file-field [data-file-upload-input]::file-selector-button {
  min-height: 40px;
  margin-right: 12px;
  padding: 8px 14px;
  border: 1px solid var(--landing-border);
  border-radius: 7px;
  background: var(--landing-card);
  color: var(--landing-text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.collect-stickify .stickify-file-field [data-file-upload-input]::file-selector-button:hover { border-color: var(--landing-orange); }
.collect-stickify .stickify-advanced {
  border-top: 1px solid var(--landing-border-soft);
  border-bottom: 1px solid var(--landing-border-soft);
}
.collect-stickify .stickify-advanced summary {
  display: flex;
  align-items: center;
  min-height: 48px;
  color: var(--landing-text);
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 700;
  list-style: none;
}
.collect-stickify .stickify-advanced summary::-webkit-details-marker { display: none; }
.collect-stickify .stickify-advanced summary::after { content: "+"; margin-left: auto; color: var(--landing-orange); font-size: 18px; }
.collect-stickify .stickify-advanced[open] summary::after { content: "−"; }
.collect-stickify .stickify-controls {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(130px, .65fr);
  gap: 18px;
  padding: 4px 0 18px;
}
.collect-stickify .stickify-control { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.collect-stickify .stickify-range,
.collect-stickify .stickify-range [data-slider-input] { width: 100%; min-height: 32px; accent-color: var(--landing-orange); }
.collect-stickify .stickify-select { width: 100%; }
.collect-stickify .stickify-select [data-select-input] {
  min-height: 42px;
  width: 100%;
  padding: 0 36px 0 12px;
  border: 1px solid var(--landing-border);
  border-radius: 7px;
  background: var(--landing-card);
  color: var(--landing-text);
  font: inherit;
  font-size: 14px;
}
.collect-stickify .btn.stickify-submit { width: 100%; justify-content: center; }
.collect-stickify .stickify-form.htmx-request .btn.stickify-submit { opacity: .55; cursor: wait; }
.collect-stickify .stickify-nojs { margin: 0; font-size: 12.5px; }

.collect-stickify .stickify-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: min(100%, 1080px);
  margin: 0 auto;
  padding: 40px 24px 52px;
}
.collect-stickify .stickify-benefit {
  padding: 20px 22px;
  border: 1px solid var(--landing-border-soft);
  border-radius: 12px;
  background: var(--landing-card);
}
.collect-stickify .stickify-benefit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 12px;
  border-radius: 10px;
  background: var(--landing-blue-wash);
  color: var(--landing-orange);
}
.collect-stickify .stickify-benefit h3 { margin: 0 0 6px; color: var(--landing-text); font-size: 16px; }
.collect-stickify .stickify-benefit p { margin: 0; font-size: 14px; line-height: 1.6; }

.collect-stickify .stickify-output {
  width: min(100%, 1080px);
  margin: 0 auto;
  padding: 0 24px 64px;
  scroll-margin-top: 24px;
}
.collect-stickify .stickify-busy {
  margin: 0;
  padding: 18px 20px;
  border-radius: 10px;
  background: var(--landing-blue-wash);
  color: var(--landing-text);
  font-size: 14px;
  font-weight: 700;
}
.collect-stickify .stickify-busy::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 10px;
  border: 2px solid color-mix(in srgb, var(--landing-orange) 30%, transparent);
  border-top-color: var(--landing-orange);
  border-radius: 50%;
  vertical-align: -2px;
  animation: stickify-spin .8s linear infinite;
}
@keyframes stickify-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .collect-stickify .stickify-busy::before { animation: none; } }
.collect-stickify .stickify-results-slot:empty { display: none; }
.collect-stickify .stickify-result {
  padding-top: 12px;
  border-top: 1px solid var(--landing-border);
}
.collect-stickify .stickify-source {
  position: relative;
  display: block;
  width: min(100%, 880px);
  margin: 24px auto 30px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--landing-section);
}
.collect-stickify .stickify-source-image { display: block; width: 100%; height: auto; }
.collect-stickify .stickify-result-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.collect-stickify .stickify-result-head h2 { margin: 0; color: var(--landing-text); font-size: 23px; }
.collect-stickify .stickify-result-limit {
  margin: -6px 0 16px;
  color: var(--landing-muted);
  font-size: 13px;
  line-height: 1.5;
}
.collect-stickify .stickify-engine {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 3px 10px;
  border: 1px solid var(--landing-border);
  border-radius: 999px;
  background: var(--landing-section);
  color: var(--landing-muted);
  font-size: 12px;
  font-weight: 700;
}
.collect-stickify .stickify-cutouts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}
.collect-stickify .stickify-cutout {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--landing-border-soft);
  border-radius: 10px;
  background: var(--landing-section);
  text-align: center;
}
.collect-stickify .stickify-cutout-image {
  display: block;
  width: 100%;
  height: 150px;
  margin: 0 auto 12px;
  object-fit: contain;
}
.collect-stickify .stickify-cutout-size { margin: 0 0 8px; font-size: 12.5px; }
.collect-stickify .stickify-download { margin-top: auto; font-size: 13.5px; font-weight: 750; }
.collect-stickify .stickify-message {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 10px;
  font-size: 14px;
}
.collect-stickify .stickify-message.is-error {
  border: 1px solid var(--sm-art-peach-2);
  background: var(--sm-art-peach);
  color: var(--sm-art-orange-deep);
}
.collect-stickify .stickify-message.is-empty {
  border: 1px dashed var(--landing-border);
  color: var(--landing-muted);
}
.collect-stickify .stickify-close {
  margin-top: 12px;
  padding-top: 64px;
  background: var(--landing-section);
}
.collect-stickify .stickify-close p { max-width: 560px; margin: -12px auto 22px; }

@media (max-width: 860px) {
  .collect-stickify .stickify-hero { grid-template-columns: 1fr; padding-top: 44px; }
  .collect-stickify .stickify-hero-copy { max-width: 640px; }
  .collect-stickify .stickify-benefits { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .collect-stickify .stickify-hero { gap: 32px; padding: 36px 16px 44px; }
  .collect-stickify .stickify-hero h1 { font-size: clamp(2.2rem, 12vw, 2.85rem); }
  .collect-stickify .stickify-workbench { padding: 20px; border-radius: 12px; }
  .collect-stickify .stickify-controls { grid-template-columns: 1fr; }
  .collect-stickify .stickify-benefits { padding: 28px 16px 40px; }
  .collect-stickify .stickify-output { padding-inline: 16px; }
  .collect-stickify .stickify-result-head { align-items: flex-start; flex-direction: column; }
}

/* Stickify: illustrated "How it works" process strip (snap → find → cut → stick). */
.collect-stickify .stickify-how { width: min(100%, 1080px); margin: 0 auto; padding: 8px 24px 56px; }
.collect-stickify .stickify-how .landing-h2 { margin-bottom: 28px; }
.collect-stickify .stickify-how-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.collect-stickify .stickify-how-step { display: flex; flex-direction: column; }
.collect-stickify .stickify-how-photo {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--landing-border-soft);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .1);
  margin-bottom: 14px;
}
.collect-stickify .stickify-how-step h3 { margin: 0 0 6px; font-size: 16px; color: var(--landing-text); }
.collect-stickify .stickify-how-step p { margin: 0; font-size: 14px; line-height: 1.6; }
@media (max-width: 900px) { .collect-stickify .stickify-how-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .collect-stickify .stickify-how-grid { grid-template-columns: 1fr; } }

/* ── Trace (background remover) tool page ─────────────────────────────── */
.collect-trace .trace-hero-band { background: var(--landing-bg-soft, #faf7f2); padding: 40px 0 8px; }
.collect-trace .trace-hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 40px;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}
.collect-trace .trace-brandmark { display: block; width: 65px; height: 65px; margin: 0 0 18px; }
.collect-trace .trace-hero-copy h1 { font-size: clamp(30px, 4vw, 46px); line-height: 1.05; margin: 0 0 14px; color: var(--landing-text-hard, #1a1a1a); }
.collect-trace .trace-lede { font-size: 17px; line-height: 1.6; color: var(--landing-text, #4a4a4a); margin: 0 0 18px; max-width: 46ch; }
.collect-trace .trace-trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.collect-trace .trace-trust li { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--landing-text-muted, #6b6b6b); }
.collect-trace .trace-workbench {
  background: #fff;
  border: 1px solid var(--landing-border-soft, #e6e0d6);
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .1);
}
.collect-trace .trace-form { display: flex; flex-direction: column; gap: 16px; }
.collect-trace .trace-file-field { display: flex; flex-direction: column; gap: 6px; }
.collect-trace .trace-file-field label { font-size: 14px; font-weight: 700; color: var(--landing-text-hard, #1a1a1a); }
.collect-trace .trace-file-field [id$="-help"],
.collect-trace .trace-field-help { font-size: 12px; color: var(--landing-text-muted, #6b6b6b); }
.collect-trace .trace-file-field [data-file-upload-input] {
  font-size: 14px;
  padding: 14px;
  border: 1.5px dashed var(--landing-border, #d8cfc0);
  border-radius: 12px;
  background: #fbf9f5;
  cursor: pointer;
}
.collect-trace .trace-nojs { font-size: 12px; color: var(--landing-text-muted, #6b6b6b); margin: 0; }

/* interactive before/after slider (governed controller + native range input) */
.collect-trace .trace-compare { padding: 44px 20px 32px; text-align: center; }
.collect-trace .trace-slider {
  --comparison-slider-position: 55%;
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 6px auto 0;
  aspect-ratio: 1376 / 768;
  touch-action: pan-y;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--landing-border-soft, #e6e0d6);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .14);
  background-color: #fbfbfb;
  background-image:
    linear-gradient(45deg, #e9e9e9 25%, transparent 25%),
    linear-gradient(-45deg, #e9e9e9 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e9e9e9 75%),
    linear-gradient(-45deg, transparent 75%, #e9e9e9 75%);
  background-size: 22px 22px;
  background-position: 0 0, 0 11px, 11px -11px, -11px 0;
}
.collect-trace .trace-slider-after {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block; pointer-events: none;
}
/* the "before" photo sits on top in an overflow-clipped layer whose width
   follows the governed position; height-driven img width keeps it exactly container-width so it
   stays aligned with the after layer wherever the divider sits. */
.collect-trace .trace-slider-before {
  position: absolute; top: 0; left: 0;
  height: 100%; width: var(--comparison-slider-position);
  overflow: hidden;
}
.collect-trace .trace-slider-before img {
  height: 100%; width: auto; max-width: none; display: block;
}
/* The transparent native range extends by half its 44px thumb on each side,
   making the thumb's travel line up exactly with the visual 0–100% wipe. */
.collect-trace .trace-slider-input {
  -webkit-appearance: none; appearance: none;
  position: absolute; top: 0; bottom: 0; left: -22px;
  width: calc(100% + 44px); height: 100%; margin: 0;
  border: 0; background: transparent; cursor: ew-resize;
  touch-action: pan-y; z-index: 3;
}
.collect-trace .trace-slider-input::-webkit-slider-runnable-track {
  height: 100%; border: 0; background: transparent;
}
.collect-trace .trace-slider-input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 44px; height: 100%; border: 0; background: transparent;
}
.collect-trace .trace-slider-input::-moz-range-track {
  height: 100%; border: 0; background: transparent;
}
.collect-trace .trace-slider-input::-moz-range-thumb {
  width: 44px; height: 100%; border: 0; border-radius: 0; background: transparent;
}
/* Visual full-height handle; the native input above owns all interaction. */
.collect-trace .trace-slider-handle {
  position: absolute; top: 0; bottom: 0; left: var(--comparison-slider-position);
  transform: translateX(-50%);
  width: 44px; padding: 0; margin: 0; border: 0; background: transparent;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; z-index: 2;
}
.collect-trace .trace-slider-handle::before {
  content: ""; position: absolute; top: 0; bottom: 0;
  width: 3px; background: rgba(255, 255, 255, .95);
  box-shadow: 0 0 6px rgba(0, 0, 0, .35);
}
.collect-trace .trace-slider-grip {
  position: relative; width: 34px; height: 34px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .38);
  display: flex; align-items: center; justify-content: center;
}
.collect-trace .trace-slider-grip::before { content: "\21D4"; font-size: 16px; color: var(--utility-navBg, #4c2615); }
.collect-trace .trace-slider-input:focus-visible { outline: none; }
.collect-trace .trace-slider-input:focus-visible ~ .trace-slider-handle .trace-slider-grip { outline: 3px solid var(--utility-navBg, #4c2615); outline-offset: 2px; }
.collect-trace .trace-slider-hint {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  background: rgba(26, 26, 26, .72); color: #fff; font-size: 12px; font-weight: 600;
  padding: 5px 12px; border-radius: 999px; pointer-events: none;
  transition: opacity .2s;
}
.collect-trace .trace-slider-input:active ~ .trace-slider-hint { opacity: 0; }

/* live tool result */
.collect-trace .trace-output { max-width: 1000px; margin: 0 auto; padding: 0 20px; }
.collect-trace .trace-busy { text-align: center; color: var(--landing-text-muted, #6b6b6b); }
/* result: the same governed slider (aspect set inline) + a centered download */
.collect-trace .trace-result { display: flex; flex-direction: column; align-items: center; }
.collect-trace .trace-result-actions { display: flex; justify-content: center; margin-top: 18px; }
.collect-trace .trace-download { display: inline-flex; }
.collect-trace .trace-message { text-align: center; padding: 16px; border-radius: 12px; font-size: 14px; }
.collect-trace .trace-message.is-error { background: #fff0eb; color: #9a3412; }
/* fine-tune control (sensitivity) in the upload form */
.collect-trace .trace-advanced { margin-top: 2px; }
.collect-trace .trace-advanced > summary { cursor: pointer; list-style: none; font-size: 13px; font-weight: 700; color: var(--utility-navBg, #4c2615); }
.collect-trace .trace-advanced > summary::-webkit-details-marker { display: none; }
.collect-trace .trace-advanced > summary::before { content: "\25B8\00a0"; }
.collect-trace .trace-advanced[open] > summary::before { content: "\25BE\00a0"; }
.collect-trace .trace-control { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.collect-trace .trace-range,
.collect-trace .trace-range [data-slider-input] { width: 100%; accent-color: var(--utility-navBg, #4c2615); }
@media (max-width: 760px) {
  .collect-trace .trace-hero { grid-template-columns: 1fr; }
}

/* ============================================================
   Landing design-alignment upgrade (2026-07): interactive rip demo,
   two-column pricing, closing band.
   ============================================================ */

/* ---- Rip demo — flip + tear stage (island-driven) ---- */
.collect-landing .btn.landing-rip-flip {
  width: 220px;
  height: 312px;
  padding: 0;
  background: transparent;
  border: none;
  perspective: 1200px;
  cursor: pointer;
}
.collect-landing .landing-rip-flip-scene {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.3, 1.4, .4, 1);
}
.collect-landing .btn.landing-rip-flip.is-flipped .landing-rip-flip-scene { transform: rotateY(180deg); }
.collect-landing .landing-rip-flip-face { position: absolute; inset: 0; backface-visibility: hidden; }
.collect-landing .landing-rip-flip-back { transform: rotateY(180deg); }
.collect-landing .landing-rip-face-img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  user-select: none;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .3));
}
.collect-landing .landing-rip-pack-art {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--landing-rip-active, var(--landing-orange)) 72%, #3b1d0f);
  border-radius: 7px;
  padding: 15px 14px 18px;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--landing-rip-active, #a94719) 62%, #2a130c), #26120c 76%);
  color: #fff;
  text-align: left;
}
.collect-landing .landing-rip-pack-seal { margin-bottom: 11px; font-size: 9px; font-weight: 900; letter-spacing: .15em; opacity: .82; }
.collect-landing .landing-rip-pack-cover { display: block; min-height: 0; flex: 1; overflow: hidden; border: 2px solid rgba(255, 255, 255, .75); border-radius: 4px; background: #f3f0eb; }
.collect-landing .landing-rip-pack-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.collect-landing .landing-rip-pack-name { margin-top: 12px; overflow: hidden; font-size: 18px; font-weight: 900; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }
.collect-landing .landing-rip-pack-count { margin-top: 5px; color: rgba(255, 255, 255, .75); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
/* The real back artwork is shared by the flip and every clipped tear layer.
   The kraft fill remains underneath as a no-flash fallback while it decodes. */
.collect-landing .landing-rip-back {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 6px;
  box-sizing: border-box;
  background: linear-gradient(160deg,
      color-mix(in srgb, var(--landing-orange) 32%, #ffffff),
      color-mix(in srgb, var(--landing-orange) 16%, #ffffff));
  border: 1px solid color-mix(in srgb, var(--landing-orange) 34%, #ffffff);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35), 0 10px 20px rgba(0, 0, 0, .3);
}
.collect-landing .landing-rip-back-img {
  position: absolute;
  inset: 0;
  filter: none;
}
.collect-landing .landing-rip-tear {
  position: relative;
  width: 220px;
  height: 312px;
  touch-action: none;
  cursor: grab;
}
.collect-landing .landing-rip-tear:active { cursor: grabbing; }
.collect-landing .landing-rip-body,
.collect-landing .landing-rip-flapwrap,
.collect-landing .landing-rip-flap,
.collect-landing .landing-rip-edge { position: absolute; inset: 0; pointer-events: none; }
.collect-landing .landing-rip-body { transform-origin: 50% 90%; filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .35)); }
.collect-landing .landing-rip-flap { transform-origin: 50% 4%; }
.collect-landing .landing-rip-edge { background: color-mix(in srgb, var(--landing-orange) 12%, #ffffff); }
.collect-landing .landing-rip-seam {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 7.8%;
  border-top: 2px dashed rgba(0, 0, 0, .22);
  pointer-events: none;
}
.collect-landing .landing-rip-handle {
  position: absolute;
  top: 4.6%;
  left: 7%;
  width: 22px;
  height: 22px;
  margin-left: -11px;
  border-radius: 50%;
  background: var(--landing-orange);
  border: 3px solid #ffffff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .35);
  pointer-events: none;
  transition: opacity .3s ease;
}
.collect-landing .landing-rip-open { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.collect-landing .landing-rip-locked { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 320px; }
/* display:flex on the state blocks outranks the UA [hidden] rule — restore it
   so the island's hidden toggling actually hides them (and no-JS visitors see
   only the sealed pack + real-drops fallback, not contradictory states). */
.collect-landing .landing-rip-locked[hidden],
.collect-landing .landing-rip-pulls-wrap[hidden],
.collect-landing .landing-rip-tear[hidden],
.collect-landing .landing-rip-open[hidden] { display: none; }
.collect-landing .landing-rip-locked-title { font-size: 15px; font-weight: 700; color: var(--landing-text); }
.collect-landing .landing-rip-locked-body { font-size: 13px; line-height: 1.55; color: var(--landing-muted); text-align: center; }
.collect-landing .btn.landing-rip-reset {
  font-size: 11px;
  color: var(--landing-faint);
  text-decoration: underline;
  background: transparent;
  border: none;
  padding: 0;
  min-height: 0;
}
.collect-landing .landing-rip-real { margin-top: 44px; }
.collect-landing .landing-rip-real-label { font-size: 13px; font-weight: 700; color: var(--landing-muted); text-align: center; margin: 0 0 16px; }
@media (prefers-reduced-motion: reduce) {
  .collect-landing .landing-rip-flip-scene { transition: none; }
  .collect-landing .landing-rip-handle { transition: none; }
  .collect-landing .landing-rip-template { transition: none; }
}

/* ---- Pricing — two-column configurator + summary ---- */
.collect-landing .landing-price-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
  gap: 26px;
  align-items: start;
  max-width: 1080px;
  margin: 0 auto;
}
.collect-landing .landing-price-config {
  background: var(--landing-card);
  border: 1px solid rgba(29, 24, 19, .09);
  border-radius: 18px;
  padding: 30px;
  box-shadow: 0 14px 40px rgba(29, 24, 19, .07), 0 2px 6px rgba(29, 24, 19, .05);
}
.collect-landing .landing-price-step {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--landing-faint);
  margin: 24px 0 12px;
}
.collect-landing .landing-price-config > .landing-price-step:first-of-type { margin-top: 0; }
.collect-landing .landing-format-list { display: flex; flex-direction: column; gap: 10px; }
.collect-landing .landing-format-list .landing-format {
  position: relative;
  flex-direction: row;
  text-align: left;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  border-radius: 12px;
  transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.collect-landing .landing-format-list .landing-format:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(29, 24, 19, .08);
}
.collect-landing .landing-format-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--landing-orange);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  vertical-align: 2px;
}
.collect-landing .landing-format-pp {
  font-weight: 700;
  color: var(--landing-orange-ink);
}
.collect-landing .landing-format-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--landing-faint);
  background: #ffffff;
  box-sizing: border-box;
  flex-shrink: 0;
}
.collect-landing .landing-format.is-selected .landing-format-dot,
.collect-landing .landing-format:has(.landing-format-input:checked) .landing-format-dot { border: 6px solid var(--landing-orange); }
.collect-landing .landing-format-info { min-width: 0; flex: 1; }
.collect-landing .landing-format-spec { font-size: 12.5px; color: var(--landing-faint); margin-top: 1px; }
.collect-landing .landing-format-album { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--landing-muted); white-space: nowrap; }
.collect-landing .landing-people-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.collect-landing .landing-people-chip {
  position: relative;
  border: 1px solid rgba(29, 24, 19, .12);
  background: var(--landing-card);
  border-radius: 12px;
  padding: 14px 8px 12px;
  text-align: center;
  cursor: pointer;
  color: var(--landing-text);
  transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.collect-landing .landing-people-chip:hover {
  border-color: rgba(29, 24, 19, .28);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(29, 24, 19, .09);
}
.collect-landing .landing-people-chip.is-selected,
.collect-landing .landing-people-chip:has(.landing-format-input:checked) {
  border-color: var(--landing-orange);
  background: #fff6ef;
  box-shadow: 0 0 0 1px var(--landing-orange);
}
.collect-landing .landing-people-chip::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--landing-border);
  border-radius: 50%;
  background: var(--landing-card);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.collect-landing .landing-people-chip.is-selected::after,
.collect-landing .landing-people-chip:has(.landing-format-input:checked)::after {
  border-color: var(--landing-orange);
  background: var(--landing-orange);
  box-shadow: 0 0 0 3px #fff6ef;
}
.collect-landing .landing-people-chip:has(.landing-format-input:focus-visible) { outline: 2px solid var(--landing-orange); outline-offset: 2px; }
.collect-landing .landing-people-chip-qty { font-size: 18px; font-weight: 800; line-height: 1.1; }
.collect-landing .landing-people-chip-label { font-size: 10px; font-weight: 700; color: var(--landing-faint); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }
.collect-landing .landing-people-chip-price { font-size: 12px; color: var(--landing-faint); margin-top: 5px; }
.collect-landing .landing-people-chip-save { font-size: 11px; font-weight: 700; color: var(--landing-green); margin-top: 3px; }
.collect-landing .landing-completion-note {
  margin: 14px 0 0;
  padding: 11px 13px;
  border-left: 3px solid var(--landing-orange);
  border-radius: 0 9px 9px 0;
  background: rgba(255, 105, 0, .055);
  color: var(--landing-muted);
  font-size: 12.5px;
  line-height: 1.5;
}
.collect-landing .landing-people-exact {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0 0;
  padding-top: 18px;
  border-top: 1px dashed rgba(29, 24, 19, .12);
}
.collect-landing .landing-people-exact-label { flex: 1 1 auto; font-size: 13px; }
.collect-landing .landing-people-input-wrap {
  display: flex;
  align-items: center;
  min-width: 154px;
  border: 1px solid rgba(29, 24, 19, .18);
  border-radius: 10px;
  background: var(--landing-card);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.collect-landing .landing-people-input-wrap:focus-within {
  border-color: var(--landing-orange);
  box-shadow: 0 0 0 3px rgba(255, 105, 0, .13);
}
.collect-landing .landing-people-exact-input {
  width: 84px;
  min-width: 0;
  padding: 10px 4px 10px 12px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--landing-text);
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.collect-landing .landing-people-input-unit { padding: 0 12px 0 4px; color: var(--landing-faint); font-size: 12px; font-weight: 600; }
.collect-landing .landing-format-badge,
.collect-landing .landing-people-chip-qty,
.collect-landing .landing-people-exact-input,
.collect-landing .landing-save-banner,
.collect-landing .landing-price-summary .landing-total {
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.collect-landing .landing-save-banner {
  display: block;
  margin: 0 0 16px;
  padding: 10px 14px;
  border-radius: 12px;
  background: linear-gradient(90deg, var(--landing-orange), #ff8f2e);
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .01em;
  box-shadow: 0 6px 16px rgba(255, 105, 0, .28);
}
.collect-landing .landing-save-banner[hidden] { display: none; }
.collect-landing .landing-price-summary {
  background: var(--landing-photo);
  border: 1px solid rgba(29, 24, 19, .08);
  border-radius: 18px;
  padding: 28px;
  box-shadow: inset 0 2px 0 rgba(255, 105, 0, .18), 0 14px 40px rgba(29, 24, 19, .06);
}
.collect-landing .landing-summary-kicker { font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--landing-subtle-ink); margin-bottom: 12px; }
.collect-landing .landing-price-summary .landing-perperson { color: var(--landing-subtle-ink); }
.collect-landing .landing-price-summary .landing-includes {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
  font-size: 14px;
  color: var(--landing-text);
}
.collect-landing .landing-include-row { display: flex; gap: 9px; font-size: 14px; line-height: 1.45; color: var(--landing-text); }
.collect-landing .landing-include-check { color: var(--landing-green); font-weight: 800; }
.collect-landing .landing-price-summary .landing-total-row { border-top: 1px dashed rgba(29, 24, 19, .14); margin-top: 18px; padding-top: 18px; }
.collect-landing .landing-price-summary .landing-total { font-size: 34px; font-weight: 700; }
.collect-landing .btn.landing-update {
  display: block;
  margin: 14px 0 0 auto;
  border: 1px solid var(--landing-orange);
  background: transparent;
  color: var(--landing-orange-ink);
  border-radius: 999px;
  font-weight: 700;
}
.collect-landing .btn.landing-update:hover { background: #fff6ef; border-color: var(--landing-orange); }
/* The submit control is progressive fallback only. This selector is more
   specific than the base button rule above so live pricing cannot expose a
   stale manual-recalculation action. */
.collect-landing .landing-price-config.is-live .btn.landing-update { display: none; }
.collect-landing .landing-price-summary .landing-free-shipping { display: block; margin: 2px 0 16px; font-size: 13px; font-weight: 700; color: var(--landing-green); }

/* ---- Closing — full-bleed spotlit sticker-pile band ---- */
.collect-landing .landing-close {
  position: relative;
  margin-top: 40px;
  min-height: 440px;
  padding: 64px 24px;
  background-color: #17130e;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.collect-landing .landing-close-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.collect-landing .landing-close-scrim { position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(10, 7, 4, .82) 0%, rgba(10, 7, 4, .55) 30%, rgba(10, 7, 4, .08) 56%, rgba(10, 7, 4, 0) 70%); }
.collect-landing .landing-close-inner { position: relative; z-index: 1; max-width: 520px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 18px; margin-right: auto; padding-left: clamp(0px, 6vw, 72px); }
.collect-landing .landing-close .landing-h2 { margin: 0; font-size: 36px; line-height: 1.1; font-family: var(--sm-font-sans); font-weight: 700; letter-spacing: -.02em; color: #ffffff; text-shadow: 0 2px 18px rgba(0, 0, 0, .5); }
.collect-landing .landing-close-inner > p { max-width: 560px; margin: 0; color: rgba(255, 255, 255, .92); }
.collect-landing .landing-close-meta { font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .88); margin-top: 0; text-shadow: 0 1px 10px rgba(0, 0, 0, .5); }

.collect-landing .btn.landing-cta-blue {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--landing-orange-ink);
  font-weight: 700;
  border-radius: var(--sm-radius-btn);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
.collect-landing .btn.landing-cta-blue:hover {
  background: color-mix(in srgb, #ffffff 88%, var(--landing-orange));
  border-color: color-mix(in srgb, #ffffff 88%, var(--landing-orange));
}

/* Product-family closings keep the shared centered organism while adopting
   the page's own accent. The extra root class wins over the generic orange
   closing even in the route-scoped generated bundle. */
.collect-landing.collect-stores .stores-close,
.collect-landing.collect-ride .ride-close {
  background: var(--page-accent);
  color: var(--landing-hero-ink);
}
.collect-landing.collect-stores .stores-close-actions,
.collect-landing.collect-ride .ride-close-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.collect-landing.collect-stores .stores-close .btn.landing-cta-blue,
.collect-landing.collect-ride .ride-close .btn.landing-cta-blue {
  color: var(--landing-hero-ink);
}
.collect-landing.collect-stores .stores-close .landing-link {
  color: var(--landing-hero-ink);
  text-decoration: underline;
}
.collect-landing.collect-ride .ride-close-action .btn[disabled] {
  opacity: .62;
  cursor: not-allowed;
}

/* ---- Responsive ---- */
@media (max-width: 860px) {
  .collect-landing .landing-price-grid { grid-template-columns: 1fr; }
  .collect-landing .landing-install-grid { grid-template-columns: 1fr; gap: 48px; }
  .collect-landing .landing-install-copy { max-width: 680px; margin: 0 auto; }
}
@media (max-width: 560px) {
  .collect-landing .landing-hero { padding: 36px 18px 40px; }
  .collect-landing .landing-hero-grid { gap: 24px; }
  .collect-landing .landing-product-banner-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; min-height: 156px; padding: 16px 0; }
  .collect-landing .landing-product-link { min-height: 54px; }
  .collect-landing .landing-product-link .collect-wordmark.is-stickify { font-size: 25px; }
  .collect-landing .landing-product-link .collect-wordmark.is-ride { font-size: 27px; }
  .collect-landing .landing-product-link .collect-wordmark.is-popup .collect-wordmark-stack { font-size: 19px; }
  .collect-landing .landing-product-trace { width: 42px; height: 42px; }
  .collect-landing .landing-people-chips { grid-template-columns: repeat(2, 1fr); }
  .collect-landing .landing-close { min-height: 420px; padding: 48px 20px; }
  .collect-landing .landing-close-bg { object-position: 62% center; }
  .collect-landing .landing-close-scrim { background: rgba(10, 7, 4, .66); }
  .collect-landing .landing-close-inner { align-items: center; margin: 0 auto; padding-left: 0; text-align: center; }
  .collect-landing .landing-close .landing-h2 { font-size: clamp(1.8rem, 8vw, 2.375rem); }
  .collect-landing .landing-install { padding: 64px 20px; }
  .collect-landing .landing-store-link { width: 100%; max-width: none; }
  .collect-landing .landing-install-preview { min-height: 470px; }
  .collect-landing .landing-install-preview::before { width: 250px; height: 360px; }
  .collect-landing .landing-install-phone { width: 244px; min-height: 450px; }
  .collect-landing .landing-install-screen { min-height: 424px; }
  .collect-landing .landing-reviews { padding-top: 48px; }
}

/* Collect circle badge — the numbered/status disc used on album and showcase
   surfaces. These declarations were previously written inline by
   components/atoms.Badge, which put the component's whole appearance beyond
   the reach of the design system: nothing could describe it, so Figma had to
   re-draw it by hand. Sizes follow the call sites (26 default, 32, 36) and the
   glyph is 0.55 of the disc, exactly as the inline rule computed it.

   The selector is doubled deliberately. The base badge contributes utility
   classes of its own (bg-surface-tertiary, px-2.5), and the inline style these
   rules replace beat them unconditionally. A single class would only win on
   source order, so the disc is specified once more to keep that guarantee
   without depending on stylesheet order. */
.collect-circle-badge.collect-circle-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--collect-badge-size, 26px);
  height: var(--collect-badge-size, 26px);
  border-radius: 50%;
  background: var(--sm-green);
  color: var(--sm-card);
  font-size: calc(var(--collect-badge-size, 26px) * 0.55);
  font-weight: 900;
  padding: 0;
  box-sizing: border-box;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .15);
}
.collect-circle-badge.collect-circle-badge.is-lg { --collect-badge-size: 32px; }
.collect-circle-badge.collect-circle-badge.is-xl { --collect-badge-size: 36px; }
.collect-circle-badge.collect-circle-badge.tone-warning { background: var(--sm-orange); }
.collect-circle-badge.collect-circle-badge.tone-info { background: var(--sm-page-2); color: var(--sm-text-2); }
.collect-circle-badge.collect-circle-badge.tone-rare { background: var(--sm-rare); }

/* The real-form fallback remains available until the creation controller has fully bound. */
.create-shell.is-create-enhanced > .create-noscript { display: none !important; }
.create-shell.has-draft-fallback:not(.is-create-enhanced) > .create-main,
.create-shell.has-draft-fallback:not(.is-create-enhanced) > .coach-dock,
.create-shell.has-draft-fallback:not(.is-create-enhanced) > .tier-popover { display: none !important; }

@media (min-width: 1024px) {
  /* The shared public shell's main is fluid; keep the task surface fluid too.
     A bounded rail plus a growing canvas uses 2K/4K space without stretching
     form copy, fixing the narrow island/empty viewport failure mode. */
  body.collect-builder-root main.flex-1 { width: 100%; min-width: 0; max-width: none; }
  .create-shell.is-guided { width: 100%; max-width: none; }
}
/* Artwork preparation is part of the album task, so Trace and Stickify read
   as compact production tools rather than a second nested dashboard. */
.create-art-tools {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--create-border);
}
.create-art-tools-heading { margin-bottom: 9px; }
.create-art-tools-eyebrow {
  display: block;
  margin-bottom: 2px;
  color: var(--create-accent);
  font-size: 9.5px;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.create-art-tools-heading h3 {
  margin: 0;
  color: var(--create-ink);
  font-size: 12.5px;
  font-weight: 850;
}
.create-art-tools-heading p {
  margin: 2px 0 0;
  color: var(--create-muted);
  font-size: 11px;
  line-height: 1.4;
}
.create-art-tools-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.create-art-tool {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-height: 58px;
  padding: 9px 10px;
  border: 1px solid var(--create-border);
  border-radius: 9px;
  background: var(--create-card);
  color: var(--create-ink);
  text-decoration: none;
  transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}
.create-art-tool:hover {
  border-color: color-mix(in srgb, var(--create-accent) 48%, var(--create-border));
  background: color-mix(in srgb, var(--create-accent) 4%, var(--create-card));
  transform: translateY(-1px);
}
.create-art-tool:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--create-accent) 24%, transparent);
  outline-offset: 2px;
}
.create-art-tool[aria-busy="true"] { opacity: .68; pointer-events: none; }
.create-art-tool-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--create-accent) 10%, var(--create-card));
  color: var(--create-accent);
}
.create-art-tool-copy { min-width: 0; }
.create-art-tool-copy strong,
.create-art-tool-copy small { display: block; }
.create-art-tool-copy strong { font-size: 11.5px; font-weight: 850; }
.create-art-tool-copy small {
  margin-top: 1px;
  color: var(--create-muted);
  font-size: 9.75px;
  line-height: 1.3;
}
.create-art-tool-arrow { color: var(--create-accent); font-size: 15px; font-weight: 850; }
.collect-stickify .stickify-cutout-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-top: auto;
}
.collect-artwork-handoff {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
}
.collect-artwork-handoff-action { justify-content: center; min-height: 38px; }
.collect-artwork-handoff-status {
  min-height: 16px;
  color: var(--landing-text-muted, #6b6b6b);
  font-size: 11px;
  line-height: 1.35;
}
.collect-artwork-handoff-status[role="alert"] { color: #9a3412; }
.collect-artwork-handoff[data-uploading] { opacity: .72; }
.collect-trace .trace-result-actions .collect-artwork-handoff { min-width: 168px; }

@media (max-width: 720px) {
  .create-art-tools-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Pack detail (/collect/packs/{key})
   The printed pack beside its commercial terms, then the album's pool
   grouped by rarity. Sizing follows .album-grid so a pool sticker sits on
   the same rhythm as the same sticker inside the album.
   ========================================================================== */
.collect-pack-detail {
  --sm-font-sans: "Montserrat", Arial, sans-serif;
  width: min(100%, var(--sm-content-max));
  margin-inline: auto;
  padding: 24px 20px 64px;
  color: var(--sm-text);
  font-family: var(--sm-font-sans);
}
.collect-pack-detail * { box-sizing: border-box; }

.pack-detail-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  margin-top: 8px;
}
/* One pack you turn over, not two faces laid out flat. PackPreview brings its
   own 3D scene, so the stage only has to give it room and centre it. */
.pack-detail-stage {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.pack-detail-stage .pack-preview { width: 100%; }
/* With the counter box hidden the showcase has one child; let it fill. */
.pack-detail-stage .pack-showcase { justify-content: center; }

.pack-detail-identity { display: flex; flex-direction: column; gap: 8px; }
.pack-detail-title { margin: 0; font-size: 30px; line-height: 1.15; font-weight: 800; letter-spacing: -0.01em; }
.pack-detail-desc { margin: 0; color: var(--sm-text-2); font-size: 15px; line-height: 1.55; }
.pack-detail-price-row { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; }
.pack-detail-price { font-size: 28px; font-weight: 800; letter-spacing: -0.01em; }
.pack-detail-compare { color: var(--sm-text-2); font-size: 16px; text-decoration: line-through; }
.pack-detail-sealed { margin: 0; color: var(--sm-text-2); font-size: 13px; line-height: 1.5; }
.pack-detail-album-link { align-self: flex-start; font-weight: 600; font-size: 14px; }

/* Pool ------------------------------------------------------------------ */
.pack-detail-pool { margin-top: 56px; }
.pack-detail-h2 { margin: 0 0 6px; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
.pack-detail-sub { margin: 0 0 8px; color: var(--sm-text-2); font-size: 14px; line-height: 1.55; max-width: 70ch; }
.pack-detail-pool-empty { margin: 16px 0 0; color: var(--sm-text-2); font-size: 14px; }

/* Rarity is a filter over the pool, so the grid is the album's own .album-grid
   with nothing pool-specific layered on it — the two surfaces cannot drift. */
.pack-detail-pool .album-grid { row-gap: 26px; margin-top: 22px; }
/* The slot becomes an <a> when it links to the sticker page; keep it looking
   like the tile it is rather than a link. */
.pack-detail-pool a.slot { color: inherit; text-decoration: none; }

/* The filter row is the marketplace's own sort bar (shared FilterTabs), so it
   needs no styles of its own — only the placement, and an opt-out of the
   marketplace's sticky positioning, which is tuned to that page's nav. */
.pack-detail-filters { margin-top: 18px; }
.pack-detail-filters .album-marketplace-controls.pack-detail-filter-bar {
  position: static;
  margin: 0 0 4px;
  padding: 0;
  box-shadow: none;
  border-bottom: 1px solid var(--sm-border);
  background: transparent;
}
.pack-detail-odds {
  margin: 10px 0 0;
  color: var(--sm-text-2);
  font-size: 13px;
}

/* The control itself is the platform's shared Pagination molecule and brings
   its own styles; this only places it. */
.pack-detail-pagination {
  display: flex;
  justify-content: center;
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--sm-border);
}

@media (max-width: 900px) {
  .pack-detail-hero { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .pack-detail-title { font-size: 26px; }
}
@media (max-width: 720px) {
  .collect-pack-detail { padding: 16px 14px 48px; }
}

/* Album marketplace on a small screen.

   pk-ui's windowed grid is grid-cols-1 / sm:2 / lg:3, so below 640px the
   marketplace becomes one full-width album cover per row — twelve albums came
   to a 7,300px scroll, and each cover was far larger than it needs to be to
   recognise. Covers stay legible at half width, so keep two up until the
   captions genuinely cramp. */
@media (min-width: 360px) and (max-width: 639px) {
  .album-public-catalog [data-windowed-items] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 12px;
  }
}

/* StatGroup ships as a bare .stats/.stat/.n/.l tree and each surface paints it
   — .album-head and .collect-stores already do. The pack panel had none, so
   its facts rendered as an unstyled stack of numbers and labels. Scoped here
   for the same reason those are: the design contract lets the node's own
   utilities decide type where no surface has spoken. */
.collect-pack-detail .stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  align-items: flex-start;
}
.collect-pack-detail .stat .n {
  display: block;
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.collect-pack-detail .stat .l {
  margin-top: 4px;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* === client-modules album management / Studio rules (ported union) === */
.album-marketplace-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.album-marketplace-actions .album-marketplace-manage {
  margin-top: 0;
  min-height: 44px;
}

.album-marketplace-actions .btn {
  flex: 1 1 auto;
  min-height: 44px;
}

.album-marketplace-delete {
  color: rgb(var(--fg-danger, 185 28 28));
  border-color: rgb(var(--border-danger, 239 68 68));
}

.album-marketplace-delete:hover {
  color: rgb(var(--fg-danger, 185 28 28));
  background: rgb(var(--surface-danger-soft, 254 242 242));
}

.collect-dashboard-flash {
  width: min(1440px, calc(100% - 48px));
  margin: 24px auto 0;
  padding: 12px 16px;
  border: 1px solid rgb(var(--border-success, 16 185 129));
  border-radius: 6px;
  background: rgb(var(--surface-success-soft, 236 253 245));
  color: rgb(var(--fg-success, 4 120 87));
  font-size: 14px;
  font-weight: 700;
}

.album-shell[data-collect-management] .studio-edit-bar {
  display: flex;
}

/* Theme — ghost on dark */
.collect-root.is-editing .studio-edit-bar [data-studio-theme-link] {
  background: rgba(255,255,255,.14); color: #fff;
  border: 1px solid rgba(255,255,255,.18);
}

.collect-root.is-editing .studio-edit-bar [data-studio-theme-link]:hover {
  background: rgba(255,255,255,.22);
}

.collect-root.is-editing .studio-edit-bar .seb-exit .btn.ghost,
.collect-root.is-editing .studio-edit-bar .seb-exit .btn.ghost:hover {
  background: transparent;
  border-color: color-mix(in srgb, var(--sm-on-inverse) 52%, transparent);
  color: var(--sm-on-inverse);
}

.collect-root.is-editing .studio-edit-bar .seb-exit .btn.ghost:hover {
  background: color-mix(in srgb, var(--sm-on-inverse) 10%, transparent);
}

.collect-root.is-editing .studio-edit-bar [data-collect-edit-done] {
  background: var(--sm-orange); color: var(--sm-on-brand);
}

/* ── Focus rings for keyboard nav ─────────────────────────────────── */
.collect-root.is-editing .studio-edit-bar button:focus-visible,
.collect-root.is-editing .studio-edit-bar a:focus-visible {
  outline: 2px solid var(--sm-focus); outline-offset: 2px;
}

.album-theme-editor { scroll-margin-top:16px; }

.album-theme-editor:target {
  outline:2px solid var(--sm-orange);
  outline-offset:2px;
}

.album-theme-editor-body .sd-fields {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
}

.album-theme-editor-actions {
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:8px;
  padding-top:16px;
  border-top:1px solid var(--sm-border-2);
}

.album-theme-editor-status {
  min-height:20px;
  margin:4px 0 0;
  color:var(--sm-muted);
  font-size:13px;
}

.sd-swatch:focus-visible { outline:2px solid var(--sm-focus); outline-offset:2px; }

.sd-toggle input:focus-visible + .sd-toggle-slider { outline:2px solid var(--sm-focus); outline-offset:2px; }

.sp-rarity-fieldset { min-width:0; padding:0; border:0; }

.sp-seg-btn input { margin:0; accent-color:var(--sm-brown); }

.sp-seg-btn:has(input:checked) {
  background:var(--sm-brown); border-color:var(--sm-brown); color:var(--sm-on-brand);
}

.sp-seg-btn:has(input:focus-visible) {
  outline:2px solid var(--sm-blue);
  outline-offset:2px;
}

.collect-root.is-editing .album-doc-page [data-collect-sticker][role="button"] {
  cursor: pointer;
  outline: none;
}

.collect-root.is-editing .album-doc-page [data-collect-sticker][role="button"]:focus-visible {
  outline: 3px solid var(--sm-orange);
  outline-offset: 4px;
}

/* ---------- dedicated album management ---------- */
.album-manager-section {
  width:min(1116px, calc(100% - 32px));
  margin:24px auto 0;
  padding:24px;
  border:1px solid var(--sm-border);
  border-radius:8px;
  background:var(--sm-card);
}

.album-manager-section-heading {
  display:grid;
  gap:6px;
  margin-bottom:18px;
}

.album-manager-section h2,
.album-manager-section-heading h2 {
  margin:0;
  color:var(--sm-text);
  font-size:20px;
  line-height:1.25;
}

.album-manager-section p,
.album-manager-section-heading p {
  margin:0;
  color:var(--sm-muted);
  font-size:14px;
  line-height:1.5;
}

.album-design-sync { display:grid; gap:8px; }

.album-design-sync-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-top:8px;
}

.album-design-sync-actions form { display:flex; }

.album-manager-status {
  width:min(1116px, calc(100% - 32px));
  margin:24px auto 0;
  color:rgb(var(--fg-success, 15 106 53));
  font-weight:700;
}

.album-rarity-list { display:grid; gap:10px; }

.album-rarity-form {
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:16px;
  align-items:end;
  padding:16px;
  border:1px solid var(--sm-border);
  border-radius:8px;
  background:var(--sm-page-2);
}

.album-rarity-fieldset { min-width:0; padding:0; border:0; }

.album-rarity-fieldset legend {
  margin-bottom:10px;
  color:var(--sm-text);
  font-weight:800;
}

.album-rarity-number { color:var(--sm-muted); font-variant-numeric:tabular-nums; }

.album-rarity-options {
  display:grid;
  /* One column per tier, not a fixed four: Uncommon was retired, and a
     hardcoded count leaves a dead cell the moment the vocabulary changes. */
  grid-template-columns:repeat(auto-fit, minmax(0, 1fr));
  gap:8px;
}

.album-rarity-option {
  min-height:44px;
  padding:8px 10px;
  display:flex;
  gap:8px;
  align-items:center;
  border:1px solid var(--sm-border-2);
  border-radius:8px;
  background:var(--sm-card);
  color:var(--sm-text);
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}

.album-rarity-option:has(input:checked) {
  border-color:var(--sm-brown);
  box-shadow:inset 0 0 0 1px var(--sm-brown);
}

.album-rarity-option input { margin:0; accent-color:var(--sm-brown); }

.album-rarity-option:has(input:focus-visible) {
  outline:2px solid var(--sm-blue);
  outline-offset:2px;
}

.album-rarity-feedback { margin-top:8px !important; font-weight:700; }

.album-rarity-feedback.is-error { color:rgb(var(--fg-danger, 180 42 42)); }

.album-rarity-feedback.is-success { color:rgb(var(--fg-success, 15 106 53)); }

.album-rarity-save { min-width:110px; min-height:44px; }

.album-manager-danger { border-color:rgb(var(--border-danger, 224 128 128)); }

.album-manager-danger > * + * { margin-top:8px; }

.album-delete-action { min-height:44px; margin-top:14px; color:rgb(var(--fg-danger, 180 42 42)); }

.album-delete-confirmation {
  width:min(640px, calc(100% - 32px));
  margin:56px auto 80px;
  padding:32px;
  border:1px solid rgb(var(--border-danger, 224 128 128));
  border-radius:8px;
  background:var(--sm-card);
}

.album-delete-confirmation h1 {
  margin:16px 0 8px;
  color:var(--sm-text);
  font-size:32px;
  line-height:1.15;
}

.album-delete-confirmation > p { color:var(--sm-muted); line-height:1.55; }

.album-delete-confirmation .album-delete-name {
  color:var(--sm-text);
  font-size:18px;
  font-weight:800;
}

.album-delete-assets-note {
  padding:12px;
  border-left:3px solid var(--sm-border-2);
  background:var(--sm-page-2);
}

.album-delete-confirmation-actions {
  margin-top:24px;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.album-delete-confirm { background:var(--sm-danger); }

.album-delete-confirm:hover { background:color-mix(in srgb, var(--sm-danger) 84%, var(--sm-page)); }

/* Rarity manager windows: bounded no-JS pagination (48 stickers per window). */
.album-rarity-window-range { margin:0 0 12px; color:var(--sm-muted); font-variant-numeric:tabular-nums; }
.album-rarity-window-nav { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.album-rarity-window-link {
  display:inline-flex;
  padding:6px 12px;
  border:1px solid var(--sm-border);
  border-radius:999px;
  color:var(--sm-text);
  text-decoration:none;
  font-weight:700;
}
.album-rarity-window-link:hover { background:var(--sm-page-2); }
.album-rarity-window-link.is-current { background:var(--sm-blue); border-color:transparent; color:var(--sm-card); }