/* Card Supply Co. — ported from the Shopify theme (theme/assets/theme.css). */
:root {
  --c-bg: #0A0A0A;
  --c-surface: #121212;
  --c-surface-2: #191919;
  --c-text: #F5F5F5;
  --c-muted: #A3A3A3;
  --c-border: #262626;
  --c-accent: #C9A45C;
  --c-accent-hover: #D6B67A;
  --c-accent-rgb: 201, 164, 92;
  --f-heading: Montserrat, system-ui, sans-serif;
  --f-heading-weight: 600;
  --f-body: Inter, system-ui, sans-serif;
  --f-body-weight: 400;
}
/* ==========================================================================
   Card Supply Co. — theme.css
   Mobile-first. Tokens are set in layout/theme.liquid from theme settings.
   ========================================================================== */

:root {
  --gutter: 16px;
  --container: 1320px;
  --radius: 10px;
  --radius-sm: 6px;
  --header-h: 64px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 220ms;
  --space-section: 64px;
  --plate: radial-gradient(120% 90% at 50% 38%, #1f1f1f 0%, #141414 55%, #0f0f0f 100%);
  --shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 20px 40px -24px rgba(0,0,0,.8);
}
@media (min-width: 750px) { :root { --gutter: 24px; --space-section: 88px; } }
@media (min-width: 1100px) { :root { --gutter: 40px; --header-h: 76px; --space-section: 112px; } }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-body);
  font-weight: var(--f-body-weight);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
@media (min-width: 750px) { body { font-size: 16px; } }
body.is-locked { overflow: hidden; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; border-radius: 2px; }
::selection { background: rgba(var(--c-accent-rgb), .35); }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 1000; background: var(--c-accent); color: #0A0A0A; padding: 10px 16px; border-radius: var(--radius-sm); font-weight: 600; }
.skip-link:focus { top: 12px; }
#MainContent:focus { outline: none; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container--narrow { max-width: 820px; }
.section { padding: var(--space-section) 0; }
.section--tight { padding: 24px 0 var(--space-section); }
.section--surface { background: var(--c-surface); border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); }
.text-center { text-align: center; }
.muted { color: var(--c-muted); }

/* ---------- Type ---------- */
.h1, .h2, .h3, .hero__title, .section-title, .promo__title, .collection-head__title, .buybox__title, .page-title {
  font-family: var(--f-heading);
  font-weight: var(--f-heading-weight);
  letter-spacing: .02em;
  line-height: 1.1;
  text-wrap: balance;
}
.h2, .page-title { font-size: clamp(28px, 4vw, 40px); }
.h3 { font-size: clamp(22px, 3vw, 28px); }
.page-title { margin-bottom: 24px; }
.eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--c-accent); margin-bottom: 12px;
}
.section-title { font-size: clamp(24px, 3.4vw, 36px); text-transform: uppercase; letter-spacing: .06em; }
.section-sub { color: var(--c-muted); margin-top: 8px; max-width: 56ch; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.section-head--center { flex-direction: column; align-items: center; text-align: center; }
.section-head__link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--c-accent); white-space: nowrap; padding: 8px 0; }
.section-head__link .icon { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.section-head__link:hover .icon { transform: translateX(3px); }

.rte { color: #d4d4d4; }
.rte > * + * { margin-top: 1em; }
.rte a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 3px; }
.rte strong { color: var(--c-text); }
.rte h2, .rte h3 { font-family: var(--f-heading); color: var(--c-text); margin-top: 1.6em; letter-spacing: .02em; }
.rte ul, .rte ol { padding-left: 1.2em; }
.rte li + li { margin-top: .35em; }
.rte table { width: 100%; border-collapse: collapse; }
.rte td, .rte th { border: 1px solid var(--c-border); padding: 8px 10px; }

/* ---------- Buttons ---------- */
.btn {
  --btn-h: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--btn-h); padding: 0 24px;
  border-radius: var(--radius-sm); border: 1px solid transparent;
  font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
  text-align: center; line-height: 1.2;
}
.btn .icon { width: 18px; height: 18px; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--c-accent); color: #0A0A0A; }
.btn--primary:hover { background: var(--c-accent-hover); }
.btn--outline { border-color: rgba(var(--c-accent-rgb), .55); color: var(--c-text); }
.btn--outline:hover { border-color: var(--c-accent); background: rgba(var(--c-accent-rgb), .08); }
.btn--ghost { border-color: var(--c-border); color: var(--c-text); }
.btn--ghost:hover { border-color: #3a3a3a; }
.btn--dark { background: #0A0A0A; color: var(--c-accent); }
.btn--dark:hover { background: #000; color: var(--c-accent-hover); }
.btn--lg { --btn-h: 54px; padding: 0 30px; font-size: 13.5px; }
.btn--sm { --btn-h: 38px; padding: 0 14px; font-size: 12px; }
.btn--block { width: 100%; }
.btn--grow { flex: 1; }
.btn[disabled], .btn.is-loading { opacity: .5; pointer-events: none; }
.btn.is-loading { position: relative; color: transparent !important; }
.btn.is-loading::after { content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid currentColor; border-color: var(--c-accent) transparent var(--c-accent) transparent; border-radius: 50%; animation: spin .8s linear infinite; }
.btn--primary.is-loading::after { border-color: #0A0A0A transparent #0A0A0A transparent; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn-row--center { justify-content: center; }
.link-btn { color: var(--c-muted); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; padding: 8px 0; display: inline-block; }
.link-btn:hover { color: var(--c-text); }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: var(--c-text); transition: background-color var(--dur) var(--ease), color var(--dur); position: relative; }
.icon-btn:hover { background: rgba(255,255,255,.06); color: var(--c-accent); }
.icon-btn .icon { width: 22px; height: 22px; }

/* ---------- Chips, badges, pills ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); }
.chips--scroll::-webkit-scrollbar { display: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 1px solid var(--c-border); border-radius: 999px; font-size: 13px; color: #d4d4d4; white-space: nowrap; transition: border-color var(--dur), color var(--dur); }
.chip:hover, .chip.is-active { border-color: var(--c-accent); color: var(--c-text); }
.chip.is-active { background: rgba(var(--c-accent-rgb), .1); }
.chip--gold { color: var(--c-accent); }
.chip .icon { width: 14px; height: 14px; }
.chip mark { background: none; color: var(--c-accent); }
.badge { display: inline-block; padding: 4px 9px; border-radius: 4px; background: var(--c-accent); color: #0A0A0A; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.badge--muted { background: #262626; color: var(--c-text); }
.count-pill { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--c-accent); color: #0A0A0A; font-size: 11px; font-weight: 700; }

/* ---------- Announcement + Header ---------- */
.announcement { background: #000; border-bottom: 1px solid var(--c-border); }
.announcement__inner { min-height: 38px; display: flex; align-items: center; justify-content: center; text-align: center; }
.announcement p, .announcement__link { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--c-accent); padding: 8px 0; }
.announcement__link:hover { color: var(--c-accent-hover); text-decoration: underline; text-underline-offset: 3px; }

.section-header { position: sticky; top: 0; z-index: 50; }
.header { background: rgba(10,10,10,.88); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--c-border); transition: background-color var(--dur); }
.header__inner { height: var(--header-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.header__left { display: flex; align-items: center; gap: 4px; }
.header__burger { margin-left: -10px; }
.header__actions { display: flex; justify-content: flex-end; align-items: center; gap: 0; margin-right: -10px; }
.header__account { display: none; }
.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo__mark { width: 30px; height: 30px; border-radius: 4px; }
.logo__word { font-family: var(--f-heading); font-weight: var(--f-heading-weight); font-size: 15px; letter-spacing: .2em; text-transform: uppercase; color: var(--c-accent); white-space: nowrap; }
.logo__word span { color: var(--c-accent); opacity: .75; }
.header__actions { grid-column: 3; }
.header__left .logo { position: absolute; left: 50%; transform: translateX(-50%); }
.nav { display: none; }
.cart-count { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--c-accent); color: #0A0A0A; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; }
.cart-count.is-bump { animation: bump .4s var(--ease); }
@keyframes bump { 50% { transform: scale(1.3); } }

@media (max-width: 420px) { .logo__word { font-size: 13px; letter-spacing: .14em; } .header__left .logo .logo__mark { display: none; } }

@media (min-width: 1100px) {
  .header__inner { grid-template-columns: auto 1fr auto; gap: 32px; }
  .header__burger { display: none; }
  .header__actions { grid-column: auto; }
  .header__left .logo { position: static; transform: none; }
  .logo__mark { width: 36px; height: 36px; }
  .logo__word { font-size: 16px; }
  .header__account { display: inline-flex; }
  .nav { display: block; justify-self: center; }
  .nav__list { display: flex; gap: 6px; }
  .nav__item { position: relative; }
  .nav__link { display: inline-flex; align-items: center; gap: 6px; height: var(--header-h); padding: 0 14px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #e5e5e5; transition: color var(--dur); position: relative; }
  .nav__link::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 20px; height: 1px; background: var(--c-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease); }
  .nav__link:hover, .nav__link[aria-current="page"], .nav__item:focus-within > .nav__link { color: var(--c-accent); }
  .nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
  .nav__link .icon { width: 14px; height: 14px; transition: transform var(--dur); }
  .dropdown { position: absolute; top: calc(100% - 8px); left: 0; min-width: 260px; padding: 10px; background: #111; border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: 0 24px 48px -16px rgba(0,0,0,.8); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--dur), transform var(--dur) var(--ease), visibility var(--dur); }
  .has-dropdown:hover .dropdown, .has-dropdown.is-open .dropdown { opacity: 1; visibility: visible; transform: none; }
  .has-dropdown:hover .nav__link .icon, .has-dropdown.is-open .nav__link .icon { transform: rotate(180deg); }
  .dropdown__link { display: block; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 14px; color: #d4d4d4; transition: background-color var(--dur), color var(--dur); }
  .dropdown__link:hover, .dropdown__link[aria-current="page"] { background: rgba(var(--c-accent-rgb), .08); color: var(--c-text); }
}

/* ---------- Drawers ---------- */
.drawer, .search-overlay { position: fixed; inset: 0; z-index: 100; }
.drawer__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.6); opacity: 0; transition: opacity 280ms var(--ease); }
.drawer__panel { position: absolute; top: 0; bottom: 0; width: min(420px, 92vw); background: #0E0E0E; border-color: var(--c-border); display: flex; flex-direction: column; transition: transform 320ms var(--ease); }
.drawer--right .drawer__panel { right: 0; border-left: 1px solid var(--c-border); transform: translateX(100%); }
.drawer--left .drawer__panel { left: 0; border-right: 1px solid var(--c-border); transform: translateX(-100%); }
.drawer.is-open .drawer__overlay, .search-overlay.is-open .drawer__overlay { opacity: 1; }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px var(--gutter); border-bottom: 1px solid var(--c-border); min-height: 64px; }
.drawer__title { font-family: var(--f-heading); font-size: 16px; letter-spacing: .14em; text-transform: uppercase; }
.drawer__body { flex: 1; overflow-y: auto; padding: 16px var(--gutter); overscroll-behavior: contain; }
.drawer__foot { padding: 16px var(--gutter) calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--c-border); }
.drawer__foot--split { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }

.mobile-nav ul { display: grid; }
.mobile-nav__link { display: flex; align-items: center; justify-content: space-between; min-height: 56px; font-size: 15px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; border-bottom: 1px solid var(--c-border); cursor: pointer; list-style: none; }
.mobile-nav__link::-webkit-details-marker { display: none; }
.mobile-nav details[open] > summary .icon { transform: rotate(180deg); }
.mobile-nav__link .icon { transition: transform var(--dur); }
.mobile-nav__sub { padding: 6px 0 12px 4px; border-bottom: 1px solid var(--c-border); }
.mobile-nav__sub a { display: flex; align-items: center; min-height: 44px; color: #cfcfcf; font-size: 15px; }
.mobile-nav__sub a:hover { color: var(--c-accent); }
.mobile-nav__aux { display: flex; align-items: center; gap: 10px; min-height: 44px; color: #cfcfcf; font-size: 14px; }

/* Search overlay */
.search-overlay__panel { position: absolute; left: 0; right: 0; top: 0; max-height: 88vh; overflow-y: auto; background: #0E0E0E; border-bottom: 1px solid var(--c-border); transform: translateY(-16px); opacity: 0; transition: transform 280ms var(--ease), opacity 280ms var(--ease); }
.search-overlay.is-open .search-overlay__panel { transform: none; opacity: 1; }
.search-overlay__form { max-width: 820px; margin: 0 auto; display: flex; align-items: center; gap: 10px; padding: 12px var(--gutter); border-bottom: 1px solid var(--c-border); }
.search-overlay__form > .icon { color: var(--c-muted); flex-shrink: 0; }
.search-overlay__form input { flex: 1; min-width: 0; height: 52px; background: none; border: 0; font-size: 18px; outline: none; }
.search-overlay__form input::placeholder { color: #6b6b6b; }
.predictive { max-width: 820px; margin: 0 auto; padding: 20px var(--gutter) 28px; display: grid; gap: 16px; }
.predictive__list { display: grid; gap: 4px; }
.predictive__item { display: flex; align-items: center; gap: 14px; padding: 8px; border-radius: var(--radius-sm); transition: background-color var(--dur); }
.predictive__item:hover, .predictive__item:focus-visible { background: rgba(255,255,255,.04); }
.predictive__img { width: 56px; height: 56px; flex-shrink: 0; border-radius: var(--radius-sm); background: var(--plate); overflow: hidden; display: grid; place-items: center; }
.predictive__img img { width: 100%; height: 100%; object-fit: contain; }
.predictive__info { display: grid; }
.predictive__title { font-size: 15px; }
.predictive__price { font-size: 13px; color: var(--c-muted); }
.predictive__none { padding: 8px 0; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--c-border); }
.hero__glow { position: absolute; inset: -20% -10% auto auto; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px; background: radial-gradient(closest-side, rgba(var(--c-accent-rgb), .14), transparent 70%); pointer-events: none; }
.hero__inner { position: relative; display: grid; gap: 40px; padding-top: 48px; padding-bottom: 56px; align-items: center; }
.hero__title { font-size: clamp(38px, 8.5vw, 76px); text-transform: uppercase; letter-spacing: .02em; line-height: 1.02; }
.hero__text { margin-top: 20px; max-width: 52ch; font-size: clamp(15px, 1.6vw, 18px); color: #cfcfcf; }
.hero__image { width: 100%; border-radius: var(--radius); }
.showcase { position: relative; aspect-ratio: 1 / .82; }
.showcase__item { position: absolute; display: block; border-radius: var(--radius); background: var(--plate); padding: 6%; box-shadow: 0 30px 60px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(var(--c-accent-rgb), .18); transition: transform 500ms var(--ease); overflow: hidden; }
.showcase__item img { width: 100%; height: 100%; object-fit: contain; }
.showcase__item--1 { left: 24%; top: 0; width: 52%; height: 100%; z-index: 3; }
.showcase__item--2 { left: 0; top: 14%; width: 36%; height: 72%; z-index: 2; transform: rotate(-5deg); opacity: .92; }
.showcase__item--3 { right: 0; top: 14%; width: 36%; height: 72%; z-index: 2; transform: rotate(5deg); opacity: .92; }
@media (hover: hover) {
  .showcase:hover .showcase__item--2 { transform: rotate(-7deg) translateX(-6px); }
  .showcase:hover .showcase__item--3 { transform: rotate(7deg) translateX(6px); }
  .showcase__item--1:hover { transform: translateY(-6px); }
}
@media (min-width: 990px) {
  .hero__inner { grid-template-columns: 1.05fr 1fr; gap: 64px; padding-top: 88px; padding-bottom: 96px; min-height: min(78vh, 720px); }
}

/* ---------- Trust bar ---------- */
.trust { border-bottom: 1px solid var(--c-border); background: #0D0D0D; }
.trust__list { display: grid; grid-template-columns: repeat(2, 1fr); }
.trust__item { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; padding: 12px 8px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #e5e5e5; text-align: center; }
.trust__item .icon { width: 16px; height: 16px; color: var(--c-accent); flex-shrink: 0; stroke-width: 2.2; }
.trust__item:nth-child(odd) { border-right: 1px solid var(--c-border); }
.trust__item:nth-child(-n+2) { border-bottom: 1px solid var(--c-border); }
@media (min-width: 750px) {
  .trust__list { grid-template-columns: repeat(4, 1fr); }
  .trust__item { min-height: 76px; font-size: 12.5px; border-bottom: 0 !important; border-right: 1px solid var(--c-border); }
  .trust__item:last-child { border-right: 0; }
}

/* ---------- Category cards ---------- */
.cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 990px) { .cats { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.cat { display: flex; flex-direction: column; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); overflow: hidden; transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.cat:hover { border-color: rgba(var(--c-accent-rgb), .6); transform: translateY(-3px); }
.cat__media { aspect-ratio: 1; background: radial-gradient(circle at 50% 60%, #1d1d1d, #111 70%); display: grid; place-items: center; padding: 14%; overflow: hidden; }
.cat__media img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 24px rgba(0,0,0,.6)); transition: transform 500ms var(--ease); }
.cat:hover .cat__media img { transform: scale(1.04); }
.cat__body { padding: 16px; display: grid; gap: 6px; flex: 1; align-content: start; }
.cat__title { font-family: var(--f-heading); font-size: 14px; letter-spacing: .12em; text-transform: uppercase; }
.cat__text { font-size: 13px; color: var(--c-muted); line-height: 1.45; }
.cat__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--c-accent); }
.cat__cta .icon { width: 14px; height: 14px; transition: transform var(--dur); }
.cat:hover .cat__cta .icon { transform: translateX(3px); }
@media (min-width: 750px) { .cat__body { padding: 20px 22px 24px; } .cat__title { font-size: 15px; } .cat__text { font-size: 14px; } }

/* ---------- Product grid + cards ---------- */
.grid--products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }
@media (min-width: 750px) { .grid--products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 20px; } }
@media (min-width: 1100px) { .grid--products { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 749px) {
  .grid--scroll-mobile { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 8px; scrollbar-width: none; }
  .grid--scroll-mobile::-webkit-scrollbar { display: none; }
  .grid--scroll-mobile > li { flex: 0 0 68%; scroll-snap-align: start; }
}

.card { position: relative; display: flex; flex-direction: column; height: 100%; }
.card__media { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--radius); background: var(--plate); overflow: hidden; border: 1px solid var(--c-border); }
.card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 8%; transition: opacity 400ms var(--ease), transform 600ms var(--ease); }
.card__img--alt { opacity: 0; }
@media (hover: hover) {
  .card:hover .card__img { transform: scale(1.035); }
  .card:hover .card__img--alt { opacity: 1; }
  .card:hover .card__img:has(+ .card__img--alt) { opacity: 0; }
}
.card__placeholder { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; background: #141414; color: var(--c-muted); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.card__placeholder .icon { width: 36px; height: 36px; color: #3a3a3a; }
.card__placeholder--lg { position: relative; aspect-ratio: 1; border-radius: var(--radius); }
.card__badge { position: absolute; top: 10px; left: 10px; z-index: 2; }
.card--soldout .card__img { opacity: .55; }
.card__body { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; flex: 1; }
.card__title { font-family: var(--f-body); font-size: 14px; font-weight: 500; line-height: 1.4; letter-spacing: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card__link:hover { color: var(--c-accent); }
.card__meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; margin-top: auto; }
.card__add { position: relative; z-index: 2; margin-top: 4px; --btn-h: 42px; font-size: 12px; }
@media (min-width: 750px) { .card__title { font-size: 15px; } }

.price { display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price__current { font-size: 15px; font-weight: 600; color: var(--c-text); font-variant-numeric: tabular-nums; }
.price--sale .price__current { color: var(--c-accent); }
.price__compare { font-size: 13px; color: var(--c-muted); }
.stock { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--c-muted); }
.stock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #6b6b6b; }
.stock--in::before { background: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,.15); }
.stock--out::before { background: #737373; }

/* ---------- Why ---------- */
.why { display: grid; gap: 12px; }
@media (min-width: 750px) { .why { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (min-width: 1100px) { .why { grid-template-columns: repeat(4, 1fr); } }
.why__item { padding: 28px 24px; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-bg); }
.why__icon { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(var(--c-accent-rgb), .4); color: var(--c-accent); margin-bottom: 18px; }
.why__title { font-family: var(--f-heading); font-size: 14px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px; }
.why__text { color: var(--c-muted); font-size: 14.5px; }

/* ---------- Promo banners ---------- */
.promo { display: grid; gap: 32px; align-items: center; padding: 36px 24px; border: 1px solid var(--c-border); border-radius: calc(var(--radius) * 1.6); background: radial-gradient(120% 140% at 100% 0%, rgba(var(--c-accent-rgb), .12), transparent 55%), var(--c-surface); overflow: hidden; }
.promo__title { font-size: clamp(28px, 4.5vw, 48px); text-transform: uppercase; letter-spacing: .04em; }
.promo__text { color: #cfcfcf; margin: 14px 0 26px; max-width: 48ch; font-size: clamp(15px, 1.5vw, 17px); }
.promo__media img { border-radius: var(--radius); }
.promo__media--stack { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.promo__media--stack img { background: var(--plate); aspect-ratio: 4 / 5; object-fit: contain; padding: 8%; border: 1px solid var(--c-border); }
.promo__media--stack img:nth-child(even) { transform: translateY(14px); }
.promo--gold { background: linear-gradient(135deg, #b8924a 0%, var(--c-accent) 45%, #dcc187 100%); border-color: transparent; color: #0A0A0A; text-align: center; justify-items: center; padding: 56px 24px; }
.promo--gold .eyebrow { color: #0A0A0A; }
.promo--gold .promo__text { color: #1f1a10; margin-left: auto; margin-right: auto; }
.promo--text .promo__copy { max-width: 720px; }
@media (min-width: 990px) {
  .promo { grid-template-columns: 1fr 1.1fr; padding: 64px; gap: 56px; }
  .promo--gold, .promo--text { grid-template-columns: 1fr; padding: 80px 64px; }
  .promo__media--stack { gap: 14px; }
}
@media (max-width: 749px) { .promo__media--stack { grid-template-columns: repeat(2, 1fr); } .promo__media--stack img:nth-child(n+3) { display: none; } .promo__media--stack img:nth-child(even) { transform: none; } }

/* ---------- Accordion ---------- */
.accordion { border-top: 1px solid var(--c-border); }
.accordion__item { border-bottom: 1px solid var(--c-border); }
.accordion__q { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 14px 0; cursor: pointer; list-style: none; font-weight: 500; font-size: 15.5px; transition: color var(--dur); }
.accordion__q::-webkit-details-marker { display: none; }
.accordion__q:hover { color: var(--c-accent); }
.accordion__icon { position: relative; width: 14px; height: 14px; flex-shrink: 0; }
.accordion__icon::before, .accordion__icon::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: var(--c-accent); transition: transform var(--dur) var(--ease); }
.accordion__icon::after { transform: rotate(90deg); }
details[open] > .accordion__q .accordion__icon::after { transform: rotate(0); }
.accordion__a { padding: 0 0 22px; font-size: 15px; max-width: 70ch; }
.accordion--product { margin-top: 28px; }
.accordion--product .accordion__q { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.faq__foot { margin-top: 24px; text-align: center; color: var(--c-muted); }

/* ---------- Newsletter ---------- */
.newsletter { border-top: 1px solid var(--c-border); background: radial-gradient(80% 140% at 50% 0%, rgba(var(--c-accent-rgb), .09), transparent 60%), var(--c-bg); }
.newsletter__inner { padding-top: 64px; padding-bottom: 64px; display: grid; gap: 24px; justify-items: center; text-align: center; }
.newsletter__form { width: 100%; max-width: 520px; }
.newsletter__field { display: flex; gap: 8px; }
.newsletter__field input, .field input, .field textarea, .search-page__form input, .facet__price input {
  width: 100%; min-width: 0; min-height: 50px; padding: 0 16px; background: #111; border: 1px solid var(--c-border); border-radius: var(--radius-sm); font-size: 16px; transition: border-color var(--dur);
}
.field textarea { padding: 14px 16px; min-height: 140px; resize: vertical; }
.newsletter__field input:focus, .field input:focus, .field textarea:focus, .search-page__form input:focus, .facet__price input:focus { outline: none; border-color: var(--c-accent); }
.newsletter__field .btn { flex-shrink: 0; }
.newsletter__fine { margin-top: 10px; font-size: 12.5px; color: var(--c-muted); }
@media (max-width: 480px) { .newsletter__field { flex-direction: column; } }
.form-msg { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; padding: 12px 14px; border-radius: var(--radius-sm); margin-top: 10px; }
.form-msg--ok { background: rgba(74,222,128,.08); color: #86efac; border: 1px solid rgba(74,222,128,.25); }
.form-msg--err { background: rgba(248,113,113,.08); color: #fca5a5; border: 1px solid rgba(248,113,113,.25); }
.form-msg .icon { width: 16px; height: 16px; }

/* ---------- Forms ---------- */
.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field__label { font-size: 13px; color: var(--c-muted); }
.field-row { display: grid; gap: 0 16px; }
@media (min-width: 750px) { .field-row { grid-template-columns: 1fr 1fr; } }
.contact-form { margin-top: 32px; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--c-border); background: #070707; padding: 56px 0 24px; }
.footer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 20px; }
.footer__brand { grid-column: 1 / -1; display: grid; gap: 16px; justify-items: start; }
.footer__tagline { color: var(--c-muted); max-width: 34ch; font-size: 14px; }
.footer__heading { font-family: var(--f-heading); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 14px; }
.footer__col ul { display: grid; gap: 2px; }
.footer__col a { display: inline-flex; align-items: center; min-height: 36px; color: #bdbdbd; font-size: 14px; transition: color var(--dur); }
.footer__col a:hover { color: var(--c-text); }
.social { display: flex; gap: 4px; margin-left: -10px; }
.footer__bottom { display: flex; flex-direction: column-reverse; gap: 16px; align-items: flex-start; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--c-border); }
.footer__copy { font-size: 13px; color: var(--c-muted); }
.payments { display: flex; flex-wrap: wrap; gap: 8px; }
.payments__icon { width: 38px; height: 24px; }
@media (min-width: 990px) {
  .footer { padding-top: 80px; }
  .footer__grid { grid-template-columns: 1.6fr repeat(4, 1fr); gap: 40px; }
  .footer__brand { grid-column: auto; }
  .footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; }
}

/* ---------- Breadcrumbs + collection ---------- */
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 20px; font-size: 13px; color: var(--c-muted); }
.breadcrumbs a:hover { color: var(--c-text); }
.breadcrumbs [aria-current] { color: #cfcfcf; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; }
.breadcrumbs--inline { padding-top: 0; margin-bottom: 14px; }
.collection-head { padding: 24px 0 8px; display: grid; gap: 14px; }
.collection-head__title { font-size: clamp(30px, 5vw, 52px); text-transform: uppercase; letter-spacing: .04em; }
.collection-head__desc { color: var(--c-muted); max-width: 70ch; }

.toolbar { display: flex; align-items: center; gap: 12px; padding: 14px 0; margin: 12px 0 24px; border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); position: sticky; top: var(--header-h); z-index: 10; background: rgba(10,10,10,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.toolbar__filter { --btn-h: 42px; padding: 0 16px; }
.toolbar__count { font-size: 13px; color: var(--c-muted); margin-right: auto; }
.toolbar__sort { position: relative; display: inline-flex; align-items: center; }
.toolbar__sort select { appearance: none; -webkit-appearance: none; min-height: 42px; padding: 0 38px 0 14px; background: #111; border: 1px solid var(--c-border); border-radius: var(--radius-sm); font-size: 14px; cursor: pointer; }
.toolbar__sort .icon { position: absolute; right: 12px; width: 16px; height: 16px; pointer-events: none; color: var(--c-muted); }
@media (max-width: 480px) { .toolbar__count { display: none; } .toolbar__sort { margin-left: auto; } }
.active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: -10px 0 24px; }

.facet { border-bottom: 1px solid var(--c-border); }
.facet__summary { display: flex; align-items: center; justify-content: space-between; min-height: 56px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; list-style: none; }
.facet__summary::-webkit-details-marker { display: none; }
.facet__summary .icon { width: 16px; height: 16px; transition: transform var(--dur); }
.facet[open] .facet__summary .icon { transform: rotate(180deg); }
.facet__body { padding-bottom: 16px; }
.facet__list { display: grid; gap: 2px; }
.facet__price { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.facet__price label { display: grid; gap: 6px; font-size: 13px; color: var(--c-muted); }
.check { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; font-size: 14.5px; }
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check__box { width: 20px; height: 20px; flex-shrink: 0; border: 1px solid #3a3a3a; border-radius: 4px; display: grid; place-items: center; transition: background-color var(--dur), border-color var(--dur); }
.check__box .icon { width: 14px; height: 14px; color: #0A0A0A; opacity: 0; stroke-width: 3; }
.check input:checked + .check__box { background: var(--c-accent); border-color: var(--c-accent); }
.check input:checked + .check__box .icon { opacity: 1; }
.check input:focus-visible + .check__box { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.check__count { margin-left: auto; font-size: 12px; color: var(--c-muted); }
.check.is-disabled { opacity: .4; cursor: not-allowed; }

.pagination { display: flex; justify-content: center; gap: 6px; margin-top: 48px; }
.pagination__link { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 10px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); font-size: 14px; }
.pagination__link:hover { border-color: var(--c-accent); }
.pagination__link.is-current { background: var(--c-accent); color: #0A0A0A; border-color: var(--c-accent); font-weight: 600; }

.empty { text-align: center; padding: 64px 0; display: grid; gap: 10px; justify-items: center; }
.empty__title { font-family: var(--f-heading); font-size: 20px; letter-spacing: .06em; }
.empty .muted { max-width: 52ch; }

.search-page__form { display: flex; gap: 8px; max-width: 640px; }
.search-page__form .btn { padding: 0 18px; }

/* ---------- Product page ---------- */
.product__grid { display: grid; gap: 28px; }
@media (min-width: 990px) { .product__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 64px; align-items: start; } .buybox { position: sticky; top: calc(var(--header-h) + 24px); } }
.gallery { min-width: 0; }
.gallery__main { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--radius); border: 1px solid var(--c-border); background: var(--plate); }
.gallery__main::-webkit-scrollbar { display: none; }
.gallery__slide { flex: 0 0 100%; scroll-snap-align: center; aspect-ratio: 1; display: grid; place-items: center; padding: 6%; }
.gallery__slide img { width: 100%; height: 100%; object-fit: contain; }
.gallery__slide video, .gallery__slide iframe { width: 100%; height: 100%; }
.gallery__thumbs { display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; }
.gallery__thumb { width: 72px; height: 72px; padding: 6px; flex-shrink: 0; border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--plate); opacity: .6; transition: opacity var(--dur), border-color var(--dur); }
.gallery__thumb img { width: 100%; height: 100%; object-fit: contain; }
.gallery__thumb.is-active, .gallery__thumb:hover { opacity: 1; border-color: var(--c-accent); }

.buybox__title { font-size: clamp(26px, 3.4vw, 38px); letter-spacing: .01em; }
.buybox__price-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 16px; }
.buybox__price-row .price__current { font-size: 26px; }
.buybox__price-row .price__compare { font-size: 16px; }
.buybox__short { color: #cfcfcf; margin-top: 18px; }
.buybox__form { margin-top: 24px; }
.buybox__actions { display: flex; gap: 10px; }
.buybox__dynamic { margin-top: 10px; }
.buybox__dynamic .shopify-payment-button__button { min-height: 54px; border-radius: var(--radius-sm) !important; font-family: var(--f-body); font-weight: 600; letter-spacing: .06em; }
.buybox__dynamic .shopify-payment-button__button--unbranded { background: var(--c-text); color: #0A0A0A; text-transform: uppercase; font-size: 13.5px; }
.buybox__dynamic .shopify-payment-button__button--unbranded:hover:not([disabled]) { background: #fff; }
.buybox__dynamic .shopify-payment-button__more-options { color: var(--c-muted); font-size: 13px; margin-top: 10px; text-decoration: underline; }
.buybox__ship { display: flex; gap: 14px; align-items: center; margin-top: 20px; padding: 16px 18px; border: 1px solid rgba(var(--c-accent-rgb), .35); border-radius: var(--radius); background: rgba(var(--c-accent-rgb), .06); }
.buybox__ship > .icon { width: 26px; height: 26px; color: var(--c-accent); flex-shrink: 0; }
.buybox__ship strong { display: block; font-size: 12.5px; letter-spacing: .12em; color: var(--c-accent); }
.buybox__ship span { font-size: 13.5px; color: var(--c-muted); }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--c-border); border-radius: var(--radius-sm); height: 54px; flex-shrink: 0; }
.qty__btn { width: 44px; height: 100%; display: grid; place-items: center; color: var(--c-muted); transition: color var(--dur); }
.qty__btn:hover { color: var(--c-text); }
.qty__btn .icon { width: 16px; height: 16px; }
.qty__input { width: 40px; text-align: center; background: none; border: 0; font-size: 16px; -moz-appearance: textfield; }
.qty__input::-webkit-inner-spin-button, .qty__input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.qty__input:focus { outline: none; }
.qty--sm { height: 38px; }
.qty--sm .qty__btn { width: 34px; }
.qty__val { min-width: 24px; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; }

.option { border: 0; padding: 0; margin: 0 0 18px; }
.option__label { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted); margin-bottom: 10px; }
.option__values { display: flex; flex-wrap: wrap; gap: 8px; }
.pill input { position: absolute; opacity: 0; }
.pill span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); cursor: pointer; font-size: 14px; transition: border-color var(--dur); }
.pill input:checked + span { border-color: var(--c-accent); background: rgba(var(--c-accent-rgb), .08); }
.pill input:focus-visible + span { outline: 2px solid var(--c-accent); outline-offset: 2px; }

.mini-trust { display: grid; gap: 10px; margin-top: 20px; }
.mini-trust li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: #cfcfcf; }
.mini-trust .icon { width: 18px; height: 18px; color: var(--c-accent); flex-shrink: 0; }
@media (min-width: 750px) { .buybox .mini-trust { grid-template-columns: repeat(3, auto); justify-content: start; gap: 10px 22px; } }

.sticky-atc { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; gap: 12px; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: rgba(14,14,14,.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--c-border); transform: translateY(110%); transition: transform 300ms var(--ease); }
.sticky-atc.is-visible { transform: none; }
.sticky-atc__info { display: grid; min-width: 0; flex: 1; }
.sticky-atc__title { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sticky-atc__price { font-size: 14px; font-weight: 600; color: var(--c-accent); }
@media (min-width: 990px) { .sticky-atc { display: none; } }

.recs:empty, .recs:not(:has(.container)) { padding: 0; }
.fbt { display: grid; gap: 10px; }
@media (min-width: 750px) { .fbt { grid-template-columns: repeat(3, 1fr); gap: 16px; } }

/* ---------- Cart ---------- */
.ship-progress { padding: 14px 16px; border: 1px solid var(--c-border); border-radius: var(--radius); background: #121212; margin-bottom: 8px; }
.ship-progress__text { font-size: 13.5px; text-align: center; color: #d4d4d4; }
.ship-progress__text strong { color: var(--c-accent); }
.ship-progress__bar { height: 4px; margin-top: 10px; border-radius: 4px; background: #262626; overflow: hidden; }
.ship-progress__bar span { display: block; height: 100%; background: var(--c-accent); border-radius: inherit; transition: width 500ms var(--ease); }
.ship-progress--done { border-color: rgba(var(--c-accent-rgb), .45); background: rgba(var(--c-accent-rgb), .07); }

.cart-items { display: grid; }
.cart-item { display: grid; grid-template-columns: 84px 1fr; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--c-border); }
.cart-item__media { width: 84px; height: 84px; border-radius: var(--radius-sm); background: var(--plate); overflow: hidden; padding: 6px; }
.cart-item__media img { width: 100%; height: 100%; object-fit: contain; }
.cart-item__info { display: grid; gap: 6px; align-content: start; min-width: 0; }
.cart-item__title { font-size: 14.5px; line-height: 1.35; }
.cart-item__title:hover { color: var(--c-accent); }
.cart-item__variant, .cart-item__discount { font-size: 13px; color: var(--c-muted); display: flex; gap: 6px; align-items: center; }
.cart-item__discount .icon { width: 14px; height: 14px; }
.cart-item__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.cart-item__price { display: flex; gap: 8px; align-items: baseline; font-weight: 600; font-variant-numeric: tabular-nums; }
.cart-item__remove { justify-self: start; font-size: 12.5px; padding: 4px 0; }
.cart-drawer { display: flex; flex-direction: column; height: 100%; }
.cart-drawer.is-busy { opacity: .6; pointer-events: none; transition: opacity var(--dur); }
.cart-foot__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; margin-bottom: 8px; }
.cart-foot__row .icon { width: 14px; height: 14px; display: inline; vertical-align: -2px; }
.cart-foot__total { font-size: 16px; font-weight: 600; }
.cart-foot__note { font-size: 12.5px; color: var(--c-muted); margin-bottom: 14px; }
.cart-foot__view { display: block; text-align: center; margin-top: 6px; }
.cart-empty { display: grid; justify-items: center; align-content: center; gap: 12px; text-align: center; }
.cart-empty > .icon { width: 44px; height: 44px; color: #3a3a3a; }
.cart-empty__title { font-family: var(--f-heading); font-size: 18px; letter-spacing: .08em; text-transform: uppercase; }
.cart-empty__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin-top: 8px; font-size: 13.5px; }
.cart-empty__links a { color: var(--c-accent); padding: 8px 0; }
.cart-empty--page { padding: 48px 0; }

.upsells { margin-top: 24px; }
.upsells__title { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 10px; }
.upsells__list { display: grid; gap: 8px; }
.upsell { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--c-border); border-radius: var(--radius); background: #111; }
.upsell--lg { grid-template-columns: 80px 1fr auto; }
.upsell__media { aspect-ratio: 1; border-radius: var(--radius-sm); background: var(--plate); padding: 4px; overflow: hidden; }
.upsell__media img { width: 100%; height: 100%; object-fit: contain; }
.upsell__info { display: grid; gap: 2px; min-width: 0; }
.upsell__title { font-size: 13.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.upsell__title:hover { color: var(--c-accent); }
.upsell__price { font-size: 13px; color: var(--c-muted); }

.cart-page__grid { display: grid; gap: 32px; }
@media (min-width: 990px) { .cart-page__grid { grid-template-columns: 1fr 400px; gap: 56px; align-items: start; } .cart-summary { position: sticky; top: calc(var(--header-h) + 24px); } }
.cart-summary { padding: 24px; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); display: grid; gap: 4px; }
.cart-summary__dynamic { margin-top: 10px; }

/* ---------- Articles ---------- */
.grid--articles { display: grid; gap: 32px; }
@media (min-width: 750px) { .grid--articles { grid-template-columns: repeat(3, 1fr); } }
.article-card__media { aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius); margin-bottom: 14px; }
.article-card__media img { width: 100%; height: 100%; object-fit: cover; }
.article-card__title { font-family: var(--f-heading); font-size: 18px; margin-bottom: 8px; }
.article__media { margin: 24px 0; border-radius: var(--radius); overflow: hidden; }

/* ---------- Password / gift card ---------- */
.password { min-height: 100vh; display: grid; place-items: center; padding: 48px 0; }
.password .container { display: grid; gap: 18px; justify-items: center; }
.password__mark { border-radius: 8px; }
.password__form { margin-top: 16px; }
.giftcode { font-size: 22px; letter-spacing: .2em; padding: 16px; border: 1px dashed var(--c-accent); border-radius: var(--radius); margin: 24px auto; max-width: 420px; }

/* ---------- Toast ---------- */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 200; transform: translateX(-50%); padding: 12px 18px; border-radius: var(--radius-sm); background: #1a1a1a; border: 1px solid var(--c-border); font-size: 14px; box-shadow: var(--shadow); max-width: calc(100vw - 32px); }


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

/* Transparent product cutouts sit on dark plates with a grounded shadow */
.card__img, .gallery__slide img, .showcase__item img, .cat__media img { filter: drop-shadow(0 18px 22px rgba(0,0,0,.55)); }
.card:hover .card__media { border-color: rgba(var(--c-accent-rgb), .45); }
.card__media { transition: border-color var(--dur) var(--ease); }
.showcase__item { box-shadow: 0 30px 60px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(var(--c-accent-rgb), .22); }

/* Hero: products float freely (no frames) */
.showcase__item { background: none; box-shadow: none; padding: 0; overflow: visible; border-radius: 0; }
.showcase__item img { filter: drop-shadow(0 30px 40px rgba(0,0,0,.75)) drop-shadow(0 0 1px rgba(var(--c-accent-rgb), .25)); }
.showcase__item--1 { left: 18%; top: 4%; width: 64%; height: 92%; }
.showcase__item--2 { left: -2%; top: 30%; width: 42%; height: 60%; transform: rotate(-6deg); opacity: 1; }
.showcase__item--3 { right: -2%; top: 30%; width: 42%; height: 60%; transform: rotate(6deg); opacity: 1; }
.showcase::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 2%; height: 14%; background: radial-gradient(closest-side, rgba(var(--c-accent-rgb), .18), transparent); filter: blur(8px); z-index: 0; }

@media (max-width: 559px) {
  .hero .btn-row .btn { flex: 1 1 100%; }
  .hero__inner { gap: 16px; padding-top: 36px; padding-bottom: 40px; }
  .showcase { aspect-ratio: 1 / .7; }
}

/* Stock / best-seller indicators */
:root { --c-hot: #E5484D; }
.stock--hot, .stock--low { color: #ff8a8d; font-weight: 600; }
.stock--hot::before, .stock--low::before { background: var(--c-hot); box-shadow: 0 0 0 3px rgba(229,72,77,.18); }
.stock--low::before { animation: pulse-dot 1.8s ease-in-out infinite; }
@keyframes pulse-dot { 50% { box-shadow: 0 0 0 6px rgba(229,72,77,0); } }
.badge--hot { background: var(--c-hot); color: #fff; }

/* Under-market proof (product page) */
.market-proof { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-top: 10px; }
.market-proof__save { display: inline-block; padding: 4px 10px; border-radius: 4px; background: rgba(var(--c-accent-rgb), .14); color: var(--c-accent); font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.market-proof__ref { font-size: 13px; color: var(--c-muted); }
/* Back-in-stock */
.notify { margin-top: 18px; padding: 18px; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); }
.notify__title { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 12px; }
.notify__title .icon { color: var(--c-accent); }
.notify__fine { margin-top: 8px; font-size: 12px; color: var(--c-muted); }
/* Express checkout in drawer */
.cart-foot__express { margin-top: 10px; }
.cart-foot__express .shopify-cleanslate, .cart-foot__express [data-shopify-buttoncontainer] { justify-content: stretch; }

.buybox__terms { margin: 10px 0 2px; font-size: 13.5px; color: var(--c-muted); }
.buybox__terms:empty { display: none; }
.buybox__terms shopify-payment-terms { --shopify-payment-terms-color: var(--c-muted); }

/* Buy with confidence */
.confidence { margin-top: 20px; padding: 18px; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); }
.confidence__title { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 12px; }
.confidence__title .icon { width: 18px; height: 18px; }
.confidence__list { display: grid; gap: 12px; }
.confidence__list li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; }
.confidence__list .icon { width: 20px; height: 20px; color: var(--c-accent); margin-top: 1px; }
.confidence__list strong { display: block; font-size: 14px; }
.confidence__list span { font-size: 13px; color: var(--c-muted); line-height: 1.5; }
.confidence__list a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 2px; }
.confidence__help { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--c-border); font-size: 13.5px; color: #cfcfcf; }
.confidence-compact { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 0 0 12px; font-size: 12px; color: var(--c-muted); }
.confidence-compact li { display: inline-flex; align-items: center; gap: 5px; }
.confidence-compact .icon { width: 14px; height: 14px; color: var(--c-accent); }
.section .confidence { margin-top: 0; }
.confidence-wrap .confidence__list { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px 24px; }

@media (max-width: 749px) {
  .confidence { padding: 14px; }
  .confidence__list { grid-template-columns: 1fr 1fr; gap: 10px 12px; }
  .confidence__list li { grid-template-columns: 18px 1fr; gap: 8px; align-items: center; }
  .confidence__list .icon { width: 18px; height: 18px; margin-top: 0; }
  .confidence__list strong { font-size: 12.5px; line-height: 1.3; }
  .confidence__list span { display: none; }
  .confidence.is-expanded .confidence__list { grid-template-columns: 1fr; }
  .confidence.is-expanded .confidence__list li { align-items: start; }
  .confidence.is-expanded .confidence__list span { display: block; }
  .confidence__toggle { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; padding: 8px 0; min-height: 40px; font-size: 13px; color: var(--c-accent); }
  .confidence__toggle .icon { width: 14px; height: 14px; transition: transform var(--dur); }
  .confidence.is-expanded .confidence__toggle .icon { transform: rotate(180deg); }
  .confidence__help { margin-top: 8px; padding-top: 12px; }
  .confidence__help span { width: 100%; }
  .confidence__help .btn { flex: 1; min-height: 44px; }
}
@media (min-width: 750px) { .confidence__toggle { display: none; } }

@media (min-width: 750px) { .confidence-wrap .confidence { padding: 28px; } .confidence-wrap .confidence__list { grid-template-columns: repeat(3, 1fr); } .confidence-wrap .confidence__title { justify-content: center; } .confidence-wrap .confidence__help { justify-content: center; } }

/* ---------- Subscription plan + auto-renewal terms ---------- */
.plan { margin: 18px 0 4px; display: grid; gap: 12px; }
.plan__options { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.plan__card { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 14px; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); cursor: pointer; }
.plan__card .icon { flex: none; width: 22px; height: 22px; color: var(--c-accent); }
.plan__card input[type="radio"] { flex: none; width: 20px; height: 20px; accent-color: var(--c-accent); }
.plan__card:has(input:checked), .plan__card.is-selected { border-color: var(--c-accent); box-shadow: inset 0 0 0 1px var(--c-accent); }
.plan__card > span, .plan__card > div { display: grid; gap: 2px; }
.plan__name { font-size: 15px; color: var(--c-text); }
.plan__price { font-size: 13px; color: var(--c-muted); }
.plan__terms { padding: 14px; border: 1px solid var(--c-border); border-radius: var(--radius); background: rgba(var(--c-accent-rgb), .05); font-size: 13.5px; line-height: 1.55; color: var(--c-muted); }
.plan__terms[hidden] { display: none; }
.plan__terms-title { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-accent); }
.plan__terms-title .icon { width: 16px; height: 16px; }
.plan__terms-body p { margin: 0 0 8px; }
.plan__terms-body strong { color: var(--c-text); }
.plan__links a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 2px; }
.plan__consent { display: flex; align-items: flex-start; gap: 12px; margin-top: 10px; padding: 12px; min-height: 44px; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-bg); color: var(--c-text); font-size: 14px; cursor: pointer; }
.plan__consent input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--c-accent); }
.plan__consent.is-invalid { border-color: var(--c-hot); box-shadow: 0 0 0 3px rgba(229,72,77,.18); }
@media (min-width: 990px) { .plan__terms { font-size: 13px; } }
.buybox__per { margin-left: -16px; font-size: 16px; color: var(--c-muted); align-self: flex-end; padding-bottom: 4px; }

/* ---------- Self-hosted store additions ---------- */
.buybox .confidence__list { margin-top: 20px; padding: 16px; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); font-size: 14px; }
.buybox .confidence__list li { align-items: center; }
.cart-root { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.cart-foot__note { text-align: center; }

/* ---------- Checkout ---------- */
.co__grid { display: grid; gap: 24px; }
.co__summary { padding: 16px; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); align-self: start; }
.co__lines { display: grid; gap: 12px; margin-bottom: 14px; }
.co__lines li { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; font-size: 14px; }
.co__img { position: relative; width: 56px; height: 56px; border-radius: var(--radius-sm); background: #1a1a1a; }
.co__img img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.co__img b { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--c-accent); color: #0A0A0A; font-size: 11px; display: grid; place-items: center; }
.co__name { line-height: 1.35; }
.co__totals { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--c-border); font-size: 14px; }
.co__totals div { display: flex; justify-content: space-between; }
.co__totals dt { color: var(--c-muted); }
.co__total { padding-top: 8px; border-top: 1px solid var(--c-border); font-size: 17px; font-weight: 700; }
.co__total dt { color: var(--c-text); }
.co__form { display: grid; gap: 22px; }
.co__form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 12px; }
.co__legend { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-family: var(--f-heading); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.co__legend .icon { width: 16px; height: 16px; color: var(--c-accent); }
.co__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.co-field { display: grid; gap: 6px; font-size: 13px; color: var(--c-muted); }
.co-field input, .co-field select { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: #0E0E0E; color: var(--c-text); font: inherit; font-size: 16px; }
.co-field input:focus, .co-field select:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(var(--c-accent-rgb), .18); }
.co__card { min-height: 230px; padding: 4px; border-radius: var(--radius-sm); background: #fff; }
.co__card iframe { display: block; width: 100%; }
.co__fine { font-size: 12.5px; color: var(--c-muted); text-align: center; line-height: 1.5; }
.co__fine a { color: var(--c-accent); text-decoration: underline; }
@media (min-width: 990px) {
  .co__grid { grid-template-columns: 1.2fr 1fr; gap: 48px; }
  .co__summary { order: 2; position: sticky; top: 96px; }
}

/* ---------- Admin orders ---------- */
.ao { margin-top: 16px; padding: 16px; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); }
.ao--muted { opacity: .55; }
.ao__head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 10px; }
.ao__body { display: grid; gap: 8px; font-size: 14px; }
.ao__body address { font-style: normal; color: #d4d4d4; }
.ao__body a { color: var(--c-accent); }

/* =====================================================================
   v2 — trust, support, chat, landing (mobile-first)
   ===================================================================== */

/* ---------- Site-wide trust strip (marquee on phones) ---------- */
.tstrip { overflow: hidden; border-bottom: 1px solid var(--c-border); background: #0D0D0D; }
.tstrip__track { display: flex; width: max-content; animation: tstrip 38s linear infinite; }
.tstrip__list { display: flex; gap: 28px; padding: 0 14px; }
.tstrip__item { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; white-space: nowrap; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #dcdcdc; }
.tstrip__item .icon { width: 16px; height: 16px; color: var(--c-accent); }
@keyframes tstrip { to { transform: translateX(-50%); } }
@media (min-width: 1200px) {
  .tstrip__track { width: auto; animation: none; justify-content: center; }
  .tstrip__list[aria-hidden] { display: none; }
}

/* ---------- Header help ---------- */
.header__help { width: auto; gap: 6px; padding: 0 10px; }
.header__help-label { display: none; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
@media (min-width: 750px) { .header__help-label { display: inline; } }
.mobile-nav__chat { width: 100%; justify-content: flex-start; gap: 10px; color: var(--c-accent); }
.footer__chat { color: #bdbdbd; font-size: 14px; min-height: 36px; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Trust grid ---------- */
.tgrid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.tgrid__item { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); }
.tgrid__item .icon { width: 26px; height: 26px; flex-shrink: 0; color: var(--c-accent); }
.tgrid__item strong { display: block; font-size: 14px; letter-spacing: .04em; }
.tgrid__item span { font-size: 13.5px; color: var(--c-muted); line-height: 1.5; }
@media (min-width: 600px) { .tgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 990px) { .tgrid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }

/* ---------- Support band ---------- */
.support { border-top: 1px solid var(--c-border); background: radial-gradient(120% 140% at 0% 0%, rgba(var(--c-accent-rgb), .12), transparent 55%), #0C0C0C; }
.support__inner { display: grid; gap: 20px; padding-top: 44px; padding-bottom: 44px; }
.support__title { font-size: clamp(24px, 5vw, 34px); text-transform: uppercase; letter-spacing: .04em; margin: 6px 0; }
.support__actions { display: grid; gap: 10px; }
.support__actions .btn .icon { width: 18px; height: 18px; }
@media (min-width: 750px) { .support__inner { grid-template-columns: 1.4fr 1fr; align-items: center; } }

/* ---------- PDP / checkout support + trust ---------- */
.pdp-help { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 14px; padding: 14px 16px; border: 1px solid rgba(var(--c-accent-rgb), .45); border-radius: var(--radius); background: rgba(var(--c-accent-rgb), .06); text-align: left; font-size: 13.5px; color: var(--c-muted); }
.pdp-help strong { display: block; color: var(--c-text); font-size: 14px; }
.pdp-help > .icon:first-child { width: 24px; height: 24px; color: var(--c-accent); flex-shrink: 0; }
.pdp-help > .icon:last-child { width: 16px; height: 16px; margin-left: auto; color: var(--c-accent); }
.pdp-help span { flex: 1; }
.confidence__list a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 3px; }
.co__trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; font-size: 12.5px; color: var(--c-muted); }
.co__trust li { display: inline-flex; align-items: center; gap: 6px; }
.co__trust .icon { width: 14px; height: 14px; color: var(--c-accent); }
.co__help { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; color: var(--c-accent); font-size: 14px; font-weight: 600; }
.co__help .icon { width: 18px; height: 18px; }
[data-co-pay] .icon { width: 18px; height: 18px; }

/* ---------- Set rail ---------- */
.setrail, .soonrail { display: grid; grid-auto-flow: column; grid-auto-columns: 62%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--gutter) * -1); padding: 4px var(--gutter) 14px; scrollbar-width: none; overscroll-behavior-x: contain; }
.setrail::-webkit-scrollbar, .soonrail::-webkit-scrollbar { display: none; }
.setcard { scroll-snap-align: start; display: grid; gap: 4px; padding: 12px 12px 16px; border: 1px solid var(--c-border); border-radius: var(--radius); background: linear-gradient(180deg, #151515, #0E0E0E); transition: border-color var(--dur), transform var(--dur); }
.setcard:hover { border-color: rgba(var(--c-accent-rgb), .6); transform: translateY(-3px); }
.setcard__media { aspect-ratio: 1; display: grid; place-items: center; margin-bottom: 8px; border-radius: var(--radius-sm); background: radial-gradient(circle at 50% 60%, #1f1f1f, #111 70%); }
.setcard__media img { width: 82%; height: 82%; object-fit: contain; filter: drop-shadow(0 14px 18px rgba(0,0,0,.6)); }
.setcard__era { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--c-muted); }
.setcard__name { font-family: var(--f-heading); font-size: 16px; letter-spacing: .04em; }
.setcard__meta { font-size: 12.5px; color: var(--c-accent); }
@media (min-width: 600px) { .setrail, .soonrail { grid-auto-columns: 40%; } }
@media (min-width: 990px) { .setrail, .soonrail { grid-auto-columns: calc((100% - 48px) / 5); margin: 0; padding: 4px 0 14px; } }

/* ---------- Coming soon ---------- */
.soon { scroll-snap-align: start; display: grid; border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; background: #0E0E0E; }
.soon__media { aspect-ratio: 1; display: grid; place-items: center; background: radial-gradient(circle at 50% 60%, #1d1d1d, #111 70%); }
.soon__media img { width: 78%; height: 78%; object-fit: contain; }
.soon__body { display: grid; gap: 6px; padding: 12px; }
.soon__title { font-size: 14px; font-weight: 600; line-height: 1.35; }
.soon__price { font-size: 13px; color: var(--c-muted); }
.notify-inline { display: flex; gap: 6px; margin-top: 4px; }
.notify-inline input { flex: 1; min-width: 0; min-height: 40px; padding: 0 10px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: #0A0A0A; color: var(--c-text); font-size: 16px; }
.notify-inline .btn { --btn-h: 40px; padding: 0 10px; }
.notify-inline .icon { width: 16px; height: 16px; }
.notify-inline.is-done { color: #86efac; font-size: 13px; align-items: center; min-height: 40px; }

/* ---------- Finale ---------- */
.finale { position: relative; overflow: hidden; text-align: center; padding: 88px 0; border-top: 1px solid var(--c-border); }
.finale__glow { position: absolute; left: 50%; top: 50%; width: 120vw; max-width: 1100px; aspect-ratio: 2; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(var(--c-accent-rgb), .16), transparent); }
.finale__inner { position: relative; }
.finale__title { font-size: clamp(30px, 7vw, 60px); line-height: 1.05; text-transform: uppercase; margin-top: 8px; }
.finale .btn .icon { width: 18px; height: 18px; }

/* ---------- Live chat widget ---------- */
.chat { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 150; }
.chat__bubble { position: relative; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--c-accent); color: #0A0A0A; box-shadow: 0 10px 28px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08); transition: transform var(--dur) var(--ease); }
.chat__bubble:hover { transform: scale(1.05); }
.chat__bubble .icon { width: 26px; height: 26px; stroke-width: 1.8; }
.chat__badge { position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--c-hot); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.chat__panel { position: fixed; inset: auto 0 0 0; height: min(78svh, 620px); display: none; flex-direction: column; background: #0E0E0E; border-top: 1px solid var(--c-border); border-radius: 16px 16px 0 0; box-shadow: 0 -20px 60px rgba(0,0,0,.6); }
.chat.is-open .chat__panel { display: flex; animation: chat-in 260ms var(--ease); }
.chat.is-open .chat__bubble { display: none; }
@keyframes chat-in { from { transform: translateY(24px); opacity: 0; } }
.chat__head { display: flex; align-items: center; gap: 12px; padding: 12px 8px 12px 16px; border-bottom: 1px solid var(--c-border); }
.chat__avatar { border-radius: 6px; }
.chat__head > div { flex: 1; }
.chat__title { font-family: var(--f-heading); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; }
.chat__status { font-size: 12px; color: var(--c-muted); }
.chat__log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.chat__msg { max-width: 85%; padding: 10px 13px; border-radius: 14px; font-size: 14.5px; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; }
.chat__msg--owner { align-self: flex-start; background: #1b1b1b; border: 1px solid var(--c-border); border-bottom-left-radius: 4px; }
.chat__msg--visitor { align-self: flex-end; background: var(--c-accent); color: #0A0A0A; border-bottom-right-radius: 4px; }
.chat__msg--note { align-self: center; max-width: 100%; padding: 4px 8px; font-size: 12px; color: var(--c-muted); background: none; }
.chat__form { padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--c-border); display: grid; gap: 8px; }
.chat__who { display: grid; grid-template-columns: 1fr 1.4fr; gap: 6px; }
.chat__who.is-hidden { display: none; }
.chat__who input, .chat__compose textarea { width: 100%; min-height: 42px; padding: 10px 12px; border: 1px solid var(--c-border); border-radius: 10px; background: #0A0A0A; color: var(--c-text); font: inherit; font-size: 16px; }
.chat__compose { display: flex; gap: 8px; align-items: flex-end; }
.chat__compose textarea { resize: none; max-height: 120px; }
.chat__send { flex-shrink: 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--c-accent); color: #0A0A0A; }
.chat__send .icon { width: 20px; height: 20px; stroke-width: 2.2; }
.chat__err { font-size: 12.5px; color: #fca5a5; }
@media (min-width: 750px) {
  .chat { right: 24px; bottom: 24px; }
  .chat__panel { inset: auto 24px 24px auto; width: 380px; height: min(620px, calc(100vh - 120px)); border: 1px solid var(--c-border); border-radius: 16px; }
}
/* Keep the bubble clear of the checkout pay button on phones. */
.co ~ * .chat, body:has(.co) .chat { bottom: calc(84px + env(safe-area-inset-bottom)); }
@media (min-width: 750px) { body:has(.co) .chat { bottom: 24px; } }


/* Rail cards: never let content force a card wider than its column. */
.setcard, .soon, .soon__body, .card, .card__body, .card__meta > * { min-width: 0; }
.soon { overflow: hidden; }
.setcard__name, .soon__title, .card__title { overflow-wrap: anywhere; }
.setcard__meta { white-space: normal; line-height: 1.4; }
.card__meta { row-gap: 4px; }
/* Anchor absolutely-positioned children (e.g. visually-hidden labels) to their card so they
   can't escape the horizontal rails and widen the page on phones. */
.soon, .setcard, .card, .notify-inline, .setrail, .soonrail { position: relative; }
html, body { overflow-x: clip; }
/* Single column that can't grow past the card (img width attributes set min-content to 300px). */
.setcard, .soon, .soon__body { grid-template-columns: minmax(0, 1fr); }
.setcard img, .soon img, .card img { max-width: 100%; }

/* ---------- Cart: recommended quick-adds ---------- */
.recs { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--c-border); }
.recs__title { margin-bottom: 10px; font-family: var(--f-heading); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--c-accent); }
.recs__list { display: grid; gap: 10px; }
.recs__item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); }
.recs__media { width: 56px; height: 56px; border-radius: var(--radius-sm); background: #1a1a1a; display: grid; place-items: center; }
.recs__media img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.recs__info { display: grid; gap: 2px; min-width: 0; }
.recs__name { font-size: 13.5px; line-height: 1.35; overflow-wrap: anywhere; }
.recs__name:hover { color: var(--c-accent); }
.recs__price { font-size: 13px; color: var(--c-muted); }
.recs__price em { font-style: normal; color: #86efac; }
.recs__add { min-height: 40px; padding: 0 12px; border: 1px solid rgba(var(--c-accent-rgb), .55); border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: var(--c-text); white-space: nowrap; }
.recs__add:hover { border-color: var(--c-accent); background: rgba(var(--c-accent-rgb), .1); }

/* =====================================================================
   v3 landing — holo shelf hero + quieter sections (mobile-first)
   ===================================================================== */
.home-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.home-head--stack { display: block; }
.home-title { font-family: var(--f-heading); font-weight: 700; font-size: clamp(24px, 6.4vw, 34px); line-height: 1.15; letter-spacing: -.01em; text-transform: none; }
.home-sub { margin-top: 8px; max-width: 46ch; color: var(--c-muted); font-size: 15px; }
.home-link { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Holo shelf ---------- */
.shelf { position: relative; overflow: hidden; padding: 40px 0 28px; background: radial-gradient(120% 70% at 50% 62%, #19150e 0%, #0A0A0A 62%); border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); }
.shelf__title { font-family: var(--f-heading); font-weight: 700; font-size: clamp(30px, 8.6vw, 56px); line-height: 1.05; letter-spacing: -.02em; max-width: 14ch; }
.shelf__sub { margin-top: 10px; max-width: 40ch; color: #c8c8c8; font-size: 15.5px; line-height: 1.5; }
.shelf__track { --slide: min(78vw, 400px); display: flex; gap: 0; margin-top: 18px; padding: 10px calc((100% - var(--slide)) / 2) 6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; perspective: 900px; }
.shelf__track::-webkit-scrollbar { display: none; }
.shelf__slide { --o: 0; --ry: 0deg; --rx: 0deg; --fx: .5; --gx: 50%; --gy: 30%; flex: 0 0 var(--slide); scroll-snap-align: center; display: grid; gap: 6px; transform: scale(calc(1 - var(--o) * .14)); opacity: calc(1 - var(--o) * .55); transition: transform 120ms linear, opacity 120ms linear; }
.holo { position: relative; display: block; aspect-ratio: 1; transform: rotateY(var(--ry)) rotateX(var(--rx)); transform-style: preserve-3d; will-change: transform; }
.holo::before { content: ""; position: absolute; left: 14%; right: 14%; bottom: 3%; height: 10%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.85), transparent); }
.holo__img, .holo__foil, .holo__glare { position: absolute; inset: 6% 8% 12%; width: 84%; height: 82%; }
.holo__img { object-fit: contain; filter: drop-shadow(0 26px 30px rgba(0,0,0,.65)); }
.holo__foil, .holo__glare { -webkit-mask: var(--img) center / contain no-repeat; mask: var(--img) center / contain no-repeat; pointer-events: none; }
.holo__foil { background: linear-gradient(115deg, transparent 0%, rgba(255,119,214,.0) 30%, rgba(255,119,214,.55) 38%, rgba(255,230,140,.6) 44%, rgba(134,255,214,.55) 50%, rgba(140,180,255,.55) 56%, rgba(214,140,255,.5) 62%, transparent 72%); background-size: 260% 100%; background-position: calc(var(--fx) * 100%) 50%; mix-blend-mode: color-dodge; opacity: .5; }
.holo__glare { background: radial-gradient(circle at var(--gx) var(--gy), rgba(255,255,255,.55), rgba(255,255,255,0) 42%); mix-blend-mode: overlay; }
.holo__reflect { position: absolute; left: 8%; width: 84%; top: 88%; height: 30%; object-fit: contain; object-position: top; transform: scaleY(-1); opacity: .12; -webkit-mask: linear-gradient(to top, #000, transparent 70%); mask: linear-gradient(to top, #000, transparent 70%); pointer-events: none; }
.shelf__info { position: relative; padding: 0 4px; text-align: center; transition: opacity 160ms; opacity: calc(1 - var(--o) * 2.2); }
.shelf__set { font-size: 13px; color: var(--c-muted); }
.shelf__name { margin-top: 2px; font-family: var(--f-heading); font-weight: 600; font-size: 18px; line-height: 1.25; letter-spacing: -.005em; }
.shelf__buy { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 12px; }
.shelf__price { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.shelf__add { --btn-h: 48px; padding: 0 22px; }
.shelf__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; }
.shelf__dots { display: flex; gap: 6px; }
.shelf__dots span { width: 7px; height: 7px; border-radius: 50%; background: #3a3a3a; transition: background var(--dur), width var(--dur); }
.shelf__dots span.is-on { width: 22px; border-radius: 4px; background: var(--c-accent); }
.shelf__all { font-size: 14px; font-weight: 600; color: var(--c-accent); text-decoration: underline; text-underline-offset: 4px; }
.shelf__trust { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 18px; color: #a8a8a8; font-size: 13px; }
.shelf__trust li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.shelf__trust .icon { width: 15px; height: 15px; flex-shrink: 0; color: var(--c-accent); }
@media (min-width: 990px) {
  .shelf { padding: 72px 0 48px; }
  .shelf__head { display: grid; grid-template-columns: 1.1fr 1fr; align-items: end; gap: 48px; }
  .shelf__sub { margin: 0; justify-self: end; }
  .shelf__track { --slide: 420px; margin-top: 28px; }
}
@media (prefers-reduced-motion: reduce) { .shelf__slide, .shelf__info { transition: none; } .holo { transform: none; } }

/* ---------- Sets: calmer tiles ---------- */
.setcard { gap: 2px; padding: 10px 10px 14px; background: #101010; }
.setcard:hover { transform: none; }
.setcard__name { font-family: var(--f-heading); font-weight: 600; font-size: 16px; letter-spacing: -.005em; }
.setcard__meta { color: var(--c-muted); font-size: 13px; }

/* ---------- On the way: compact list ---------- */
.soonlist { display: grid; gap: 10px; }
.soonlist .soon { grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px; }
.soonlist .soon__media { width: 72px; height: 72px; aspect-ratio: auto; border-radius: var(--radius-sm); }
.soonlist .soon__body { padding: 0; gap: 2px; }
.soonlist .soon__title { font-size: 14.5px; }
@media (min-width: 750px) { .soonlist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Finale ---------- */
.finale__title { text-transform: none; letter-spacing: -.02em; font-weight: 700; }
.finale__sub { margin-top: 10px; color: var(--c-muted); }
/* Beat the base `ul[role="list"] { padding: 0 }` reset for list-based layouts. */
.shelf ul.shelf__track { padding: 10px calc((100% - var(--slide)) / 2) 6px; }
.shelf ul.shelf__trust { padding-left: var(--gutter); padding-right: var(--gutter); }

/* ---------- Stack & save tiers, discount code, wallets (prefixed: tier-, disc-code, wallet-) ---------- */
.tier-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 10px 14px; border: 1px dashed rgba(var(--c-accent-rgb), .5); border-radius: var(--radius-sm); font-size: 13.5px; color: #d4d4d4; line-height: 1.45; }
.tier-note .icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; color: var(--c-accent); }
.tier-note strong { color: var(--c-accent); }
.tier-note__mix { color: var(--c-muted); }
.tier-progress { padding: 12px 16px; border: 1px solid var(--c-border); border-radius: var(--radius); background: #121212; margin-bottom: 8px; }
.tier-progress--on { border-color: rgba(var(--c-accent-rgb), .45); background: rgba(var(--c-accent-rgb), .07); }
.tier-progress__text { font-size: 13.5px; text-align: center; color: #d4d4d4; }
.tier-progress__text strong { color: var(--c-accent); }
.tier-progress__bar { height: 4px; margin-top: 10px; border-radius: 4px; background: #262626; overflow: hidden; }
.tier-progress__bar span { display: block; height: 100%; background: var(--c-accent); border-radius: inherit; transition: width 500ms var(--ease); }
.tier-progress__fine { margin-top: 8px; font-size: 11.5px; text-align: center; color: var(--c-muted); }
.tier-foot { color: #86efac; }
.co__totals .tier-row dt, .co__totals .tier-row dd { color: #86efac; }
.co__totals .tier-row dt { padding-right: 12px; }
.co__totals .tier-row dd { white-space: nowrap; }
.tier-est { margin-top: 8px; font-size: 12px; color: var(--c-muted); text-align: right; }

/* Discount code: a link that expands on mobile, always open from 990px (two-column checkout). */
.disc-code { margin-bottom: 12px; }
.disc-code__toggle { padding: 10px 0; min-height: 44px; }
.disc-code__body { display: none; gap: 6px; }
.disc-code.is-open .disc-code__body { display: grid; }
.disc-code__label { font-size: 13px; color: var(--c-muted); }
.disc-code__row { display: flex; gap: 8px; }
.disc-code__input { flex: 1; min-width: 0; min-height: 48px; padding: 0 14px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: #0E0E0E; color: var(--c-text); font: inherit; font-size: 16px; text-transform: uppercase; letter-spacing: .04em; }
.disc-code__input::placeholder { text-transform: none; letter-spacing: 0; color: #6b6b6b; }
.disc-code__input:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(var(--c-accent-rgb), .18); }
.disc-code__apply { min-height: 48px; padding: 0 18px; flex-shrink: 0; }
.disc-code__msg { margin-top: 8px; font-size: 13px; line-height: 1.4; }
.disc-code__msg--ok { color: #86efac; }
.disc-code__msg--err { color: #fca5a5; }
@media (min-width: 990px) {
  .disc-code__toggle { display: none; }
  .disc-code__body { display: grid; }
}

/* Wallet buttons are mounted by Poynt Collect inside #card-element, after the card iframe;
   pull them to the top with an "or pay with card" divider. Only styled once mounted. */
.wallet-host--on { display: flex; flex-direction: column; }
.wallet-host--on .wallet-buttons, .wallet-host--on #wallet-buttons-container { order: -1; display: flex; flex-direction: column; gap: 8px; padding: 10px 10px 0; }
.wallet-host--on .wallet-buttons::after, .wallet-host--on #wallet-buttons-container::after { content: "or pay with card"; display: block; padding: 10px 0 2px; text-align: center; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #6b6b6b; }
.wallet-hint { display: block; padding: 12px 14px; border: 1px solid rgba(var(--c-accent-rgb), .35); border-radius: var(--radius-sm); background: rgba(var(--c-accent-rgb), .06); font-size: 13.5px; color: #d4d4d4; line-height: 1.45; }
.wallet-hint strong { color: var(--c-accent); }
.wallet-hint[hidden] { display: none; }
/* ---------- Welcome offer (wl) — bottom sheet on phones, centered dialog on desktop ---------- */
html.wl-open { overflow: hidden; }
html.wl-open .chat:not(.is-open) { opacity: 0; pointer-events: none; }
.wl { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center; }
.wl[hidden] { display: none; }
.wl__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.6); opacity: 0; transition: opacity 260ms var(--ease); }
.wl__panel { position: relative; width: 100%; max-height: 92vh; overflow-y: auto; padding: 28px var(--gutter) calc(24px + env(safe-area-inset-bottom));
  background: var(--c-surface); border-top: 1px solid rgba(var(--c-accent-rgb), .45); border-radius: 18px 18px 0 0;
  box-shadow: 0 -20px 50px rgba(0,0,0,.6); transform: translateY(100%); transition: transform 300ms var(--ease); outline: none; }
.wl.is-open .wl__overlay { opacity: 1; }
.wl.is-open .wl__panel { transform: none; }
.wl__close { position: absolute; top: 8px; right: 8px; }
.wl__eyebrow { color: var(--c-accent); }
.wl__title { margin: 6px 0 8px; font-family: var(--f-heading); font-weight: 700; font-size: 26px; line-height: 1.15; padding-right: 36px; }
.wl__desc { color: var(--c-muted); font-size: 14.5px; margin-bottom: 16px; }
.wl__form { display: grid; gap: 10px; }
.wl__form input { min-height: 50px; padding: 0 14px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-bg); font-size: 16px; }
.wl__form input:focus { outline: 2px solid var(--c-accent); outline-offset: 1px; border-color: transparent; }
.wl__form .btn { --btn-h: 50px; }
.wl__msg { margin-top: 12px; font-size: 14.5px; }
.wl__code { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; padding: 14px 16px; border: 2px dashed rgba(var(--c-accent-rgb), .7); border-radius: var(--radius); }
.wl__code[hidden] { display: none; }
.wl__code-label { width: 100%; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted); }
.wl__code strong { flex: 1; font-family: ui-monospace, Menlo, monospace; font-size: 22px; letter-spacing: .08em; color: var(--c-accent); overflow-wrap: anywhere; }
.wl__fine { margin-top: 14px; font-size: 11.5px; line-height: 1.5; color: var(--c-muted); }
.wl__fine a { text-decoration: underline; }
@media (min-width: 750px) {
  .wl { align-items: center; padding: 24px; }
  .wl__panel { max-width: 440px; padding: 36px 32px 28px; border: 1px solid rgba(var(--c-accent-rgb), .45); border-radius: 16px;
    transform: translateY(16px) scale(.98); opacity: 0; transition: transform 260ms var(--ease), opacity 260ms var(--ease); }
  .wl.is-open .wl__panel { opacity: 1; }
  .wl__title { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) { .wl__panel, .wl__overlay { transition: none; } }

/* ---------- Checkout disclosure + owner ship form (em) ---------- */
.em-note { margin: -4px 0 14px; font-size: 12px; line-height: 1.5; color: var(--c-muted); }
.em-shipped { margin-top: 10px; font-size: 13.5px; color: #86efac; }
.em-shipped a { text-decoration: underline; }
.em-ship { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.em-ship select, .em-ship input { min-height: 38px; padding: 0 10px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-bg); }
.em-ship__trk { flex: 1 1 180px; }
.em-ship__trk input { width: 100%; }

/* ---------- Reviews (rv) ---------- */
.rv-head { display: grid; gap: 6px; margin-bottom: 18px; }
.rv-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--c-muted); font-size: 14.5px; }
.rv-stars { color: var(--c-accent); letter-spacing: 2px; font-size: 16px; }
.rv-ebay a { color: var(--c-accent); text-decoration: underline; font-size: 14px; }
.rv-list { display: grid; gap: 12px; }
.rv-item { padding: 16px; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); }
.rv-item__top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rv-badge { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #86efac; border: 1px solid rgba(134,239,172,.4); border-radius: 999px; padding: 2px 8px; }
.rv-item__title { margin-top: 8px; font-weight: 600; }
.rv-item__body { margin-top: 6px; color: var(--c-text); white-space: pre-line; overflow-wrap: anywhere; }
.rv-item__meta { margin-top: 8px; font-size: 12.5px; color: var(--c-muted); }
.rv-page__img { width: 120px; height: 120px; object-fit: contain; margin: 4px 0 18px; }
.rv-form { display: grid; gap: 4px; }
.rv-form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-bg); resize: vertical; }
.rv-form__fine { margin-top: 10px; font-size: 12.5px; }
.rv-rate { border: 0; padding: 0; margin: 0 0 14px; }
.rv-rate legend { margin-bottom: 6px; font-weight: 600; }
/* Star radios: rendered 5→1 and reversed so hovering/checking fills to the left. */
.rv-rate__stars { position: relative; display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.rv-rate__stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rv-rate__stars label { font-size: 34px; line-height: 1; color: #3a3a3a; cursor: pointer; padding: 4px; }
.rv-rate__stars input:checked ~ label, .rv-rate__stars label:hover, .rv-rate__stars label:hover ~ label { color: var(--c-accent); }
.rv-rate__stars input:focus-visible + label { outline: 2px solid var(--c-accent); border-radius: 4px; }
.rv-admin__actions { display: flex; gap: 8px; margin-top: 10px; }

/* ---------- Address suggestions ---------- */
.addr-wrap { position: relative; }
.addr-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; margin-top: 4px; padding: 4px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: #141414; box-shadow: 0 16px 40px rgba(0,0,0,.6); max-height: 280px; overflow-y: auto; }
.addr-list li[role="option"] { padding: 12px; min-height: 44px; border-radius: 4px; font-size: 14.5px; line-height: 1.35; color: var(--c-text); cursor: pointer; }
.addr-list li[role="option"]:hover, .addr-list li[aria-selected="true"] { background: rgba(var(--c-accent-rgb), .14); }
.addr-list__note { padding: 8px 12px; font-size: 12px; color: var(--c-muted); }
/* ---------- Analytics: privacy choices page (/privacy-choices) ---------- */
.an-pc__form { display: grid; gap: 14px; margin: 24px 0; }
.an-pc__row { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; padding: 16px; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); cursor: pointer; }
.an-pc__row input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--c-accent); }
.an-pc__row .muted { font-size: 13.5px; line-height: 1.5; }
.an-pc__gpc { padding: 12px 14px; border: 1px solid var(--c-accent); border-radius: var(--radius); }
.an-pc .btn { justify-self: start; }
@media (prefers-reduced-motion: reduce) { .tstrip__track { animation: none; overflow-x: auto; } }

/* =====================================================================
   v4 landing (lp-) — conversion hero for phone traffic + honest micro-rewards
   ===================================================================== */
.lp-hero { padding: 20px 0 22px; }
.lp-hero__title { font-family: var(--f-heading); font-weight: 800; font-size: clamp(27px, 7.4vw, 60px); line-height: 1.04; letter-spacing: -.025em; max-width: 19ch; }
.lp-hero__sub { margin-top: 8px; max-width: 46ch; color: #c8c8c8; font-size: 15px; line-height: 1.45; }
.lp-hero ul.lp-offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 14px 0 0; padding: 0; }
.lp-offer, .lp-offer button { display: flex; align-items: flex-start; gap: 6px; min-width: 0; font-size: 12px; line-height: 1.3; color: var(--c-muted); text-align: left; }
.lp-offer { padding: 8px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: rgba(255,255,255,.02); }
.lp-offer b { display: block; color: var(--c-text); font-size: 12.5px; font-weight: 700; }
.lp-offer .icon { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; color: var(--c-accent); }
.lp-offer--btn { padding: 0; border-color: rgba(var(--c-accent-rgb), .55); background: rgba(var(--c-accent-rgb), .08); }
.lp-offer--btn button { width: 100%; height: 100%; padding: 8px; cursor: pointer; }
.lp-offer--btn b { color: var(--c-accent); }
.lp-offer--btn:hover { background: rgba(var(--c-accent-rgb), .14); }
.lp-offer[hidden] { display: none; }
.lp-hero ul.lp-offers:has(> [hidden]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-hero .shelf__track { --slide: min(68vw, 360px); margin-top: 6px; }
.lp-hero ul.shelf__track { padding: 8px calc((100% - var(--slide)) / 2) 4px; }
.lp-hero .holo { aspect-ratio: 1.2; }
.lp-hero .shelf__add { white-space: nowrap; padding: 0 18px; }
.lp-hero .shelf__info { margin-top: -6px; }
.lp-hero .shelf__name { font-size: 16.5px; }
.lp-hero .shelf__buy { margin-top: 8px; }
.lp-hero .shelf__foot { margin-top: 12px; }
@media (min-width: 750px) { .lp-hero ul.lp-offers { max-width: 640px; } .lp-offer { padding: 10px 12px; font-size: 13px; } .lp-offer b { font-size: 14px; } .lp-hero__sub { font-size: 17px; } }
@media (min-width: 990px) {
  .lp-hero { padding: 56px 0 40px; }
  .lp-hero__head { display: grid; grid-template-columns: 1.1fr 1fr; align-items: end; gap: 48px; }
  .lp-hero__sub { margin: 0; justify-self: end; }
  .lp-hero .shelf__track { --slide: 400px; margin-top: 20px; }
  .lp-hero ul.lp-offers { margin-top: 24px; }
}
@media (max-width: 479px) { .lp-offer .icon { display: none; } }
@media (max-width: 359px) { .lp-hero__sub { font-size: 14px; } .lp-hero .holo { aspect-ratio: 1.4; } .lp-hero .shelf__track { --slide: 74vw; } }

.card__pp { font-size: 12.5px; color: var(--c-accent); margin: -2px 0 2px; }

.lp-pack { display: grid; gap: 0; position: relative; }
.lp-pack ol, ol.lp-pack { padding: 0; }
.lp-pack__step { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding-bottom: 22px; }
.lp-pack__step:not(:last-child)::before { content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; width: 1px; background: linear-gradient(var(--c-accent), rgba(var(--c-accent-rgb), .15)); }
.lp-pack__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(var(--c-accent-rgb), .55); background: #0E0E0E; color: var(--c-accent); }
.lp-pack__icon .icon { width: 20px; height: 20px; }
.lp-pack__title { font-family: var(--f-heading); font-weight: 600; font-size: 16px; margin-top: 10px; }
.lp-pack__text { margin-top: 4px; color: var(--c-muted); font-size: 14.5px; max-width: 48ch; }
@media (min-width: 900px) {
  .lp-pack { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .lp-pack__step { grid-template-columns: 1fr; gap: 6px; padding: 0; }
  .lp-pack__step:not(:last-child)::before { left: 52px; right: -24px; top: 22px; bottom: auto; width: auto; height: 1px; background: linear-gradient(90deg, var(--c-accent), rgba(var(--c-accent-rgb), .15)); }
}

/* Add to cart: press feedback, fly-to-cart ghost, badge pop */
.shelf__add.is-added, .card__add.is-added { animation: atc-press 380ms var(--ease); }
@keyframes atc-press { 35% { transform: scale(.94); } 70% { transform: scale(1.03); } }
.fly-ghost { position: fixed; z-index: 300; object-fit: contain; pointer-events: none; filter: drop-shadow(0 12px 18px rgba(0,0,0,.6)); will-change: transform, opacity; }
.cart-count.is-bump { animation: badge-pop 480ms cubic-bezier(.3,1.6,.5,1); }
@keyframes badge-pop { 0% { transform: scale(.6); } 55% { transform: scale(1.45); box-shadow: 0 0 0 6px rgba(var(--c-accent-rgb), .25); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(var(--c-accent-rgb), 0); } }

/* Milestone unlocked (free shipping / Stack & save tier): gold sweep + a few sparks */
.ship-progress__bar, .tier-progress__bar { position: relative; }
.ship-progress.is-unlocked, .tier-progress.is-unlocked { animation: ms-glow 1200ms var(--ease); }
.ship-progress.is-unlocked .ship-progress__bar span, .tier-progress.is-unlocked .tier-progress__bar span { background-image: linear-gradient(100deg, transparent 30%, rgba(255,245,215,.9) 50%, transparent 70%); background-size: 250% 100%; background-repeat: no-repeat; animation: ms-sweep 900ms ease-out 1; }
@keyframes ms-glow { 30% { box-shadow: 0 0 0 3px rgba(var(--c-accent-rgb), .35), 0 0 24px rgba(var(--c-accent-rgb), .35); } }
@keyframes ms-sweep { from { background-position: 150% 0; } to { background-position: -60% 0; } }
.ship-progress, .tier-progress { position: relative; }
.ms-spark { position: absolute; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: #f0d898; box-shadow: 0 0 6px 1px rgba(var(--c-accent-rgb), .8); pointer-events: none; animation: ms-spark 700ms cubic-bezier(.2,.8,.3,1) both; }
@keyframes ms-spark { from { opacity: 1; transform: translate(0, 0); } to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.4); } }

/* Holo shelf: a tap sweeps the foil once (touch can't drive the hover glare) */
.holo.is-shine .holo__foil { animation: holo-sweep 800ms ease-out 1; }
@keyframes holo-sweep { from { background-position: 100% 50%; opacity: .85; } to { background-position: 0% 50%; opacity: .5; } }

/* Welcome code reveal */
.wl__code:not([hidden]) { animation: code-in 520ms cubic-bezier(.3,1.4,.5,1) both; }
.wl__code:not([hidden]) strong { background: linear-gradient(100deg, var(--c-accent) 35%, #fff3cf 50%, var(--c-accent) 65%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: code-sheen 1400ms ease-out 300ms both; }
@keyframes code-in { from { opacity: 0; transform: scale(.9) translateY(6px); } }
@keyframes code-sheen { from { background-position: 120% 0; } to { background-position: -20% 0; } }
/* Milestone toasts: keep the drawer's checkout button visible. */
html:has([data-drawer].is-open) .toast { bottom: auto; top: calc(12px + env(safe-area-inset-top)); z-index: 250; }
html:has([data-drawer].is-open) .chat:not(.is-open) { opacity: 0; pointer-events: none; }

/* ---------- Packing story (scroll-driven, home page) — v2 refresh ---------- */
.unbox { --p: 0; --a: 0; --b: 0; --c1: 0; --c2: 0; --d: 0; position: relative; height: 300svh; border-top: 1px solid var(--c-border); background: radial-gradient(90% 60% at 50% 35%, #17140e 0%, #0A0A0A 70%); }
.unbox__stage { position: sticky; top: 0; z-index: 1; height: 100svh; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; overflow: hidden; padding: 84px var(--gutter) calc(20px + env(safe-area-inset-bottom)); }
.unbox__scene { position: relative; width: min(66vw, 340px, 36svh); aspect-ratio: 1; margin: auto; align-self: center; }
.unbox__floor { position: absolute; left: 6%; right: 6%; bottom: -4%; height: 12%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.75), transparent); }
.unbox__outer { position: absolute; inset: 0; }
.unbox__back { position: absolute; left: 4%; right: 4%; bottom: 0; height: 64%; border-radius: 4px; background: linear-gradient(180deg, #1a1a1a, #0c0c0c); opacity: var(--c1); transform: translateY(calc((1 - var(--c1)) * 30%)); }
.unbox__inner { position: absolute; inset: 0; display: grid; place-items: center; }
.unbox__product { width: 74%; height: 74%; object-fit: contain; filter: drop-shadow(0 22px 28px rgba(0,0,0,.6)); transform: translateY(calc(var(--c1) * 8%)) scale(calc(1 - var(--c1) * .12)); animation: ub-float 5s ease-in-out infinite; }
@keyframes ub-float { 50% { translate: 0 -6px; } }
.unbox__scan { position: absolute; left: 10%; right: 10%; top: calc(10% + var(--a) * 78%); height: 2px; background: linear-gradient(90deg, transparent, var(--c-accent), transparent); box-shadow: 0 0 18px 4px rgba(var(--c-accent-rgb), .55); opacity: calc(var(--a) * (1 - var(--b)) * 1.2); }
.unbox__seal { position: absolute; top: 6%; right: 2%; display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 999px; background: var(--c-accent); color: #0A0A0A; font-size: 11px; font-weight: 800; letter-spacing: .14em; opacity: calc(clamp(0, calc(var(--a) * 3 - 1.8), 1) * (1 - var(--c2))); transform: scale(calc(.7 + clamp(0, calc(var(--a) * 3 - 1.8), 1) * .3)); }
.unbox__seal .icon { width: 14px; height: 14px; stroke-width: 2.6; }
.unbox__pad { position: absolute; inset: 9% 11%; border-radius: 18px; background-color: rgba(255,255,255,.05); background-image: radial-gradient(circle at 50% 50%, rgba(255,255,255,.22) 0 32%, rgba(255,255,255,.06) 34% 52%, transparent 54%); background-size: 22px 22px; border: 1px solid rgba(255,255,255,.18); opacity: calc(var(--b) * .9 * (1 - var(--c2))); transform: scale(calc(1.25 - var(--b) * .25)); backdrop-filter: blur(calc(var(--b) * 1.5px)); }
.unbox__front { position: absolute; left: 4%; right: 4%; bottom: 0; height: 58%; display: grid; place-items: center; border-radius: 6px; background: linear-gradient(180deg, #1c1c1c, #0f0f0f); box-shadow: inset 0 0 0 1px rgba(var(--c-accent-rgb), .45), 0 30px 40px -20px rgba(0,0,0,.85); transform: translateY(calc((1 - var(--c1)) * 115%)); opacity: clamp(0, calc(var(--c1) * 4), 1); overflow: hidden; }
.unbox__tape { position: absolute; top: 0; bottom: 0; left: 50%; width: 14%; transform: translateX(-50%); background: linear-gradient(90deg, #a8843f, #e2c27e 50%, #a8843f); opacity: .9; }
.unbox__mono { position: relative; width: 22%; height: auto; border-radius: 6px; box-shadow: 0 0 0 1px rgba(var(--c-accent-rgb), .5); }
.unbox__flap { position: absolute; top: 42%; width: 46%; height: 22%; background: linear-gradient(180deg, #151515, #262626); transform-origin: top center; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); opacity: clamp(0, calc(var(--c2) * 6), 1); }
.unbox__flap--l { left: 4%; transform: translateY(calc(-100% + var(--c2) * 0%)) rotateX(calc((1 - var(--c2)) * 160deg)); border-radius: 4px 0 0 0; }
.unbox__flap--r { right: 4%; transform: translateY(calc(-100% + var(--c2) * 0%)) rotateX(calc((1 - var(--c2)) * 160deg)); border-radius: 0 4px 0 0; }
.unbox__label { position: absolute; left: 28%; right: 28%; bottom: 10%; padding: 8px 10px; border-radius: 3px; background: #f5f2ea; display: grid; gap: 4px; box-shadow: 0 4px 10px rgba(0,0,0,.35); opacity: clamp(0, calc(var(--d) * 3), 1); transform: translateY(calc((1 - clamp(0, calc(var(--d) * 3), 1)) * 30px)) rotate(-2deg); }
.unbox__label b { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: #0A0A0A; }
.unbox__label i { display: block; height: 3px; border-radius: 2px; background: #c8c2b4; }
.unbox__label i:nth-child(3) { width: 70%; } .unbox__label i:nth-child(4) { width: 45%; height: 9px; background: repeating-linear-gradient(90deg, #111 0 2px, transparent 2px 4px); }
.unbox__track { position: absolute; left: 0; right: 0; bottom: -18%; display: flex; align-items: center; gap: 8px; opacity: clamp(0, calc(var(--d) * 4), 1); }
.unbox__route { position: relative; flex: 1; height: 2px; background: repeating-linear-gradient(90deg, rgba(var(--c-accent-rgb), .6) 0 6px, transparent 6px 12px); }
.unbox__truck { position: absolute; top: 50%; left: calc(var(--d) * 92%); transform: translate(-10%, -60%); color: var(--c-accent); }
.unbox__truck .icon { width: 26px; height: 26px; }
.unbox__pin { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--c-accent); color: var(--c-accent); transition: background 300ms, color 300ms; }
.unbox[data-done] .unbox__pin { background: var(--c-accent); color: #0A0A0A; }
.unbox__pin .icon { width: 14px; height: 14px; stroke-width: 2.6; }
.unbox__captions { position: relative; min-height: 210px; margin-top: 40px; padding: 0 8px; text-align: center; }
.unbox__cap { position: absolute; inset: 0 0 auto; opacity: 0; transform: translateY(14px); transition: opacity 450ms var(--ease), transform 450ms var(--ease); pointer-events: none; }
.unbox[data-stage="0"] [data-cap="0"], .unbox[data-stage="1"] [data-cap="1"], .unbox[data-stage="2"] [data-cap="2"], .unbox[data-stage="3"] [data-cap="3"] { opacity: 1; transform: none; pointer-events: auto; }
.unbox__step { display: inline-block; margin-bottom: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .2em; text-transform: none; color: var(--c-accent); }
.unbox__title { font-size: clamp(26px, 7.4vw, 54px); line-height: 1.05; text-transform: none; letter-spacing: -.02em; font-weight: 700; letter-spacing: .01em; }

.unbox__cap p { max-width: 40ch; margin: 10px auto 0; color: #cfcfcf; font-size: 15px; }
.unbox__cta { margin-top: 18px; }
.unbox__cta .icon { width: 18px; height: 18px; }
.unbox__progress { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.unbox__progress span { width: 26px; height: 3px; border-radius: 2px; background: #2e2e2e; transition: background var(--dur); }
.unbox[data-stage="0"] .unbox__progress span:nth-child(-n+1), .unbox[data-stage="1"] .unbox__progress span:nth-child(-n+2), .unbox[data-stage="2"] .unbox__progress span:nth-child(-n+3), .unbox[data-stage="3"] .unbox__progress span { background: var(--c-accent); }
@media (min-width: 990px) {
  .unbox__stage { grid-template-columns: 1.1fr 1fr; grid-template-rows: 1fr auto; align-items: center; padding: 80px max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))) 32px; }
  .unbox__scene { width: min(460px, 60svh); grid-row: 1; grid-column: 1; }
  .unbox__captions { grid-row: 1; grid-column: 2; text-align: left; margin: 0; min-height: 300px; }
  .unbox__cap p { margin-left: 0; }
  .unbox__progress { grid-column: 1 / -1; }
}
/* Static fallback: no JS or reduced motion → show the finished box and all four steps. */
html:not(.js) .unbox, .unbox.is-static { height: auto; --a: 1; --b: 1; --c1: 1; --c2: 1; --d: 1; }
html:not(.js) .unbox__stage, .unbox.is-static .unbox__stage { position: relative; height: auto; }
html:not(.js) .unbox__captions, .unbox.is-static .unbox__captions { display: grid; gap: 28px; min-height: 0; margin-top: 72px; }
html:not(.js) .unbox__cap, .unbox.is-static .unbox__cap { position: static; opacity: 1; transform: none; pointer-events: auto; }
html:not(.js) .unbox__progress, .unbox.is-static .unbox__progress, html:not(.js) @media (prefers-reduced-motion: reduce) { .unbox__product { animation: none; } .tstrip__track { animation: none; overflow-x: auto; } }


/* Keep the chat bubble off the captions while the packing story is pinned. */
body.in-unbox .chat:not(.is-open) { opacity: 0; pointer-events: none; transition: opacity 200ms; }
.unbox__skip { position: absolute; right: var(--gutter); top: 74px; z-index: 2; display: inline-flex; align-items: center; min-height: 40px; font-size: 13px; color: var(--c-muted); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 990px) { .unbox__skip { top: 88px; } }
html:not(.js) .unbox__skip, .unbox.is-static .unbox__skip { display: none; }
/* Story is the first thing on the page: fit scene + caption below the header/strips on first paint. */
.unbox__stage { padding-top: 72px; }
.unbox__scene { width: min(64vw, 320px, 30svh); }
.unbox__captions { margin-top: 24px; min-height: 196px; }
@media (min-width: 990px) { .unbox__scene { width: min(440px, 52svh); } }
/* Frame = the space below the sticky header + promo strips, so the first paint fits on one screen
   and the pinned state sits just under the header. */
.unbox { --chrome: 146px; }
.unbox__stage { top: 64px; height: calc(100svh - var(--chrome)); padding-top: 12px; padding-bottom: 12px; }
.unbox__skip { top: 4px; }
.unbox__captions { margin-top: 16px; min-height: 188px; }
@media (min-width: 990px) { .unbox { --chrome: 150px; } .unbox__stage { padding-top: 24px; } .unbox__skip { top: 12px; } }
@media (max-height: 700px) { .unbox__progress { display: none; } }

/* ---------- Checkout: card details box (high contrast, impossible to miss) ---------- */
.co__paybox { position: relative; padding: 14px 12px 12px; border: 2px solid var(--c-accent); border-radius: var(--radius-sm, 10px);
  background: rgba(201, 164, 92, .07); box-shadow: 0 0 0 4px rgba(201, 164, 92, .12); }
.co__paybox-head { display: flex; gap: 10px; align-items: center; margin: 0 0 10px; line-height: 1.25; }
.co__paybox-head strong { display: block; font-size: 17px; color: #fff; }
.co__paybox-head small { display: block; font-size: 13px; color: var(--c-muted, #a3a3a3); }
.co__paybox-step { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--c-accent); color: #0a0a0a; font-weight: 800; font-size: 14px; }
.co__paybox .co__card { border: 1px solid #d8d8d8; }
.co__paynote { margin: 10px 0 0; padding: 10px 12px; border-radius: 8px; background: #3a1414; color: #fecaca; font-size: 14px; font-weight: 600; }
.co__paybox.is-attention { border-color: #f87171; animation: co-attn .9s ease 2; }
@keyframes co-attn { 0%, 100% { box-shadow: 0 0 0 4px rgba(248, 113, 113, .15); } 50% { box-shadow: 0 0 0 10px rgba(248, 113, 113, .35); } }
@media (prefers-reduced-motion: reduce) { .co__paybox.is-attention { animation: none; } }

/* ---------- Visitors from Facebook/Instagram ads land straight on products ---------- */
.from-meta .unbox { display: none; }

/* ---------- Checkout trust: accepted cards, processor line, promises under the total ---------- */
.co__brands { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.co__brands span { padding: 3px 8px; border: 1px solid rgba(255,255,255,.18); border-radius: 5px; background: #fff; color: #1a1a1a; font: 700 11px/1.4 var(--font-body, Inter, sans-serif); letter-spacing: .02em; }
.co__secure { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; font-size: 13px; line-height: 1.4; color: var(--c-muted); }
.co__secure .icon { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--c-accent); }
.co__secure strong { color: #fff; }
.co__assure { display: grid; gap: 12px; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid rgba(255,255,255,.1); list-style: none; }
.co__assure li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: var(--c-muted); }
.co__assure .icon { flex: none; width: 20px; height: 20px; color: var(--c-accent); }
.co__assure strong { display: block; color: #fff; font-size: 14px; }
.co__assure a, .co__assure .link-btn { color: var(--c-accent); text-decoration: underline; font-size: inherit; padding: 0; }

/* ---------- Express wallet buttons (Apple Pay / Google Pay) on cart + product pages ---------- */
.cart-express:not([hidden]) { margin: 0 0 10px; }
.cart-express:not([hidden])::after { content: "or"; display: block; margin: 10px 0 2px; text-align: center; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
.pdp-express:not([hidden]) { margin: 10px 0 0; }
.pdp-express:not([hidden])::before { content: "or check out faster"; display: block; margin: 0 0 8px; text-align: center; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted); }
.xpr-buttons { display: flex; flex-direction: column; gap: 8px; }

/* ---------- Product page conversion: per-pack, trust, stack nudge, chase cards, sticky bar ---------- */
.buybox__perpack { margin-top: 6px; font-size: 14px; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.buybox__actions { margin-top: 18px; }
.pdp-trust { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 13px; color: #d4d4d4; }
.pdp-trust li { display: flex; align-items: center; gap: 6px; }
.pdp-trust .icon { width: 16px; height: 16px; color: var(--c-accent); }
.pdp-trust a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.pdp-stack { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border: 1px dashed rgba(var(--c-accent-rgb), .45); border-radius: var(--radius-sm); font-size: 13.5px; line-height: 1.45; color: #d4d4d4; }
.pdp-stack .icon { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--c-accent); }
.pdp-stack b, .pdp-stack strong { color: #fff; }
.pdp-chase { margin-top: 16px; padding: 14px; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); }
.pdp-chase__title { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--c-accent); }
.pdp-chase__list { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.pdp-chase__list li { padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(var(--c-accent-rgb), .4); background: rgba(var(--c-accent-rgb), .08); font-size: 13px; color: #fff; }
.pdp-chase__fine { margin-top: 8px; font-size: 12px; color: var(--c-muted); }
.sticky-atc__btn { flex: none; min-height: 46px; padding-inline: 20px; }
@media (max-width: 989px) {
  body.has-sticky-atc { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  body.has-sticky-atc .chat { bottom: calc(80px + env(safe-area-inset-bottom)); }
}
/* Phones: shorter photo so price + Add to cart sit above the fold. */
@media (max-width: 749px) {
  .product.section--tight { padding-top: 8px; }
  .gallery__slide { aspect-ratio: auto; height: min(36svh, 280px); padding: 4%; }
  .buybox__title { font-size: 24px; }
  .buybox__price-row { margin-top: 10px; }
  .buybox__actions { margin-top: 14px; }
}
@media (max-width: 989px) {
  .chat { transition: opacity var(--dur) var(--ease); }
  body.pdp-actions-in-view .chat:not(.is-open) { opacity: 0; pointer-events: none; }
}
/* Product page trust list: one column, icon + text side by side (was splitting text into grid cells). */
.buybox .confidence__list { grid-template-columns: 1fr; margin-top: 18px; }
.buybox .confidence__list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: #d4d4d4; }
.buybox .confidence__list li .icon { flex: none; }
@media (max-width: 749px) {
  /* Fixed-height slide: give the grid a definite row so the photo scales down instead of overflowing. */
  .gallery__slide { grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); }
  .gallery__slide img { min-height: 0; max-height: 100%; }
}

/* FAQ blocks on product + collection pages */
.faq-more { margin-top: 20px; }
.faq-more .section-head__link { white-space: normal; }

/* ---------- Landing page test, version B: product picker hero ---------- */
.lpb { padding: 18px 0 8px; }
.lpb__in { display: grid; justify-items: center; text-align: center; max-width: 560px; }
.lpb__title { font-family: var(--f-heading); font-weight: 800; font-size: clamp(27px, 7.4vw, 44px); line-height: 1.08; letter-spacing: -.005em; text-wrap: balance; }
.lpb__sub { margin-top: 8px; color: #cfcfcf; font-size: 15px; line-height: 1.4; text-wrap: balance; }
.lpb__stage { position: relative; width: 100%; height: min(30svh, 250px); margin-top: 12px; display: grid; place-items: center; grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.lpb__glow { position: absolute; inset: 8% 12% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--c-accent-rgb), .34), rgba(var(--c-accent-rgb), 0)); filter: blur(6px); }
.lpb__glow::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: 3%; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--c-accent-rgb), .7), transparent); }
.lpb__img { position: relative; grid-area: 1 / 1; max-width: 100%; max-height: 100%; min-height: 0; width: auto; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .55)); }
.lpb__img[hidden] { display: none; }
.lpb__tags { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; width: 100%; margin-top: 12px; }
.lpb__tag { position: relative; display: grid; gap: 1px; padding: 9px 6px 8px; border: 1px solid var(--c-border); border-radius: 10px 10px 10px 2px; background: #141414; color: #cfcfcf; font-size: 12.5px; line-height: 1.2; cursor: pointer; }
.lpb__tag b { font-family: var(--f-heading); font-size: 17px; font-weight: 800; color: var(--c-text); font-variant-numeric: tabular-nums; }
.lpb__tag[aria-selected="true"] { border-color: var(--c-accent); background: rgba(var(--c-accent-rgb), .12); color: var(--c-accent); }
.lpb__tag[aria-selected="true"]::before { content: ""; position: absolute; top: -7px; left: 50%; width: 12px; height: 12px; margin-left: -6px; transform: rotate(45deg); background: #1c1810; border-left: 1px solid var(--c-accent); border-top: 1px solid var(--c-accent); }
.lpb__tag:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.lpb__pane { width: 100%; margin-top: 12px; }
.lpb [data-lpb-cta] { width: 100%; }
.lpb__name { font-size: 15.5px; font-weight: 600; }
.lpb__name a { color: var(--c-text); }
.lpb__meta { margin-top: 2px; font-size: 13.5px; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.lpb__add { margin-top: 10px; }
.lpb__all { display: inline-block; margin-top: 12px; padding: 6px 4px; font-size: 14.5px; font-weight: 600; color: var(--c-accent); text-decoration: underline; text-underline-offset: 3px; }
.lpb .lp-offers { margin-top: 14px; }
.lpb-sec .home-head { margin-bottom: 14px; }
.lpb-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lpb-tile { display: grid; gap: 4px; padding: 12px 8px 12px; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--plate, #141414); text-align: center; color: var(--c-text); }
.lpb-tile img { width: 100%; height: 92px; object-fit: contain; margin-bottom: 4px; }
.lpb-tile__name { font-weight: 700; font-size: 13.5px; line-height: 1.2; }
.lpb-tile__meta { font-size: 12px; color: var(--c-muted); line-height: 1.3; }
.lpb-tile:hover, .lpb-tile:focus-visible { border-color: var(--c-accent); }
.section .lpb-steps { counter-reset: step; display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.lpb-steps li { counter-increment: step; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: start; }
.lpb-steps .icon { width: 44px; height: 44px; padding: 10px; border-radius: 50%; border: 1px solid rgba(var(--c-accent-rgb), .5); color: var(--c-accent); }
.lpb-steps strong { display: block; font-size: 15.5px; }
.lpb-steps strong::before { content: counter(step) ". "; color: var(--c-accent); }
.lpb-steps span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--c-muted); }
.lpb-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: rgba(14, 14, 14, .96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--c-border); font-size: 14px; color: #d4d4d4; transform: translateY(110%); transition: transform 300ms var(--ease); }
.lpb-bar.is-visible { transform: none; }
.lpb-bar strong { color: var(--c-accent); }
.lpb-bar__btn { flex: none; min-height: 46px; padding-inline: 22px; }
@media (min-width: 750px) {
  .lpb { padding-top: 34px; }
  .lpb__stage { height: 300px; }
  .lpb-tile img { height: 150px; }
  .lpb-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}
@media (min-width: 990px) { body.has-sticky-atc .lpb-bar { max-width: 560px; left: auto; right: 24px; bottom: 24px; border: 1px solid var(--c-border); border-radius: var(--radius); } }
@media (prefers-reduced-motion: reduce) { .lpb-bar { transition: none; } }

/* ---------- Checkout redesign: header, numbered cards, collapsible summary, pay area ---------- */
.co__head { display: grid; gap: 6px; margin-bottom: 16px; }
.co__head .page-title { margin: 0; }
.co__headnote { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #cfcfcf; }
.co__headnote .icon { flex: none; width: 16px; height: 16px; color: #86efac; }
.co__sum > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 600; font-size: 15px; }
.co__sum > summary::-webkit-details-marker { display: none; }
.co__sum-head span { display: inline-flex; align-items: center; gap: 8px; }
.co__sum-head span::after { content: ""; width: 8px; height: 8px; margin-left: 2px; border-right: 2px solid var(--c-accent); border-bottom: 2px solid var(--c-accent); transform: rotate(45deg) translateY(-2px); transition: transform var(--dur); }
.co__sum[open] .co__sum-head span::after { transform: rotate(225deg) translateY(-2px); }
.co__sum-head .icon { width: 18px; height: 18px; color: var(--c-accent); }
.co__sum-head b { font-family: var(--f-heading); font-size: 18px; font-variant-numeric: tabular-nums; }
.co__sum[open] > summary { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--c-border); }
.co__sum > summary:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 4px; border-radius: 4px; }
.co__form fieldset.co-card { padding: 16px; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); min-width: 0; }
.co-card > .co__legend { float: left; width: 100%; margin: 0 0 2px; padding: 0; font-size: 14px; letter-spacing: .06em; }
.co__num { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--c-accent); color: #0a0a0a; font: 800 13px/1 var(--f-heading); letter-spacing: 0; }
.co__payset.co-card { border-color: rgba(var(--c-accent-rgb), .55); }
.co-card .co__paybox { padding: 0; border: 0; background: none; box-shadow: none; }
.co-card .co__paybox.is-attention { padding: 10px; border: 2px solid #f87171; }
.co__captcha { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); }
.co__captcha-label { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.4; color: var(--c-muted); }
.co__captcha-label .icon { flex: none; width: 20px; height: 20px; color: var(--c-accent); }
.co__captcha-label strong { display: block; color: #fff; font-size: 14.5px; }
.co__captcha [data-co-captcha] { min-height: 65px; }
.xpr-captcha:empty { display: none; }
.xpr-captcha { margin-top: 8px; }
.co__pay { min-height: 58px; font-size: 16px; }
.co__pay > span { display: inline-flex; gap: .35em; }
.co__paynote2 { margin-top: -10px; text-align: center; font-size: 12.5px; color: var(--c-muted); }
.co__assure.co__assure--grid { margin: 0; padding: 16px; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); border-top: 1px solid var(--c-border); }
.co__identity { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; color: #cfcfcf; text-align: center; }
.co__identity .icon { flex: none; width: 16px; height: 16px; color: var(--c-accent); }
.co__identity strong { color: #fff; }
.co__identity a { color: var(--c-accent); text-decoration: underline; }
@media (min-width: 750px) { .co__assure.co__assure--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; } }

/* ---------- First-order offer entry points ---------- */
.pdp-offer { margin-top: 10px; }
.pdp-offer .link-btn, .cart-foot__offer .link-btn, .disc-code__get .link-btn { display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; color: var(--c-accent); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.pdp-offer .icon { width: 18px; height: 18px; }
.pdp-offer b { font-weight: 700; }
.cart-foot__offer { text-align: center; }
.disc-code__get { display: block; margin-top: 4px; }
[data-co-offer-note] { margin-top: 8px; }