/* ═══════════════════════════════════════════════════════════════════════════
   premium — a dark "Apple × Nothing" store. Port of
   apps/web/public/mockups/storefront/premium.html (see
   docs/mockups/shopfront-templates/PORTING.md).

   1. tokens          html[data-template='premium']
   2. home page       .tpl-premium …            (the mockup's Store screen)
   3. shared pages    [data-template='premium'] (header, footer, catalogue,
                      product, buy sheet, wallet, orders, account, auth, forms)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Vazirmatn variable (SIL OFL 1.1, see fonts/OFL.txt): the app's own copy stops
   at 800 and this design is set in 900. */
@font-face {
  font-family: 'Vazirmatn P';
  src: url('./fonts/Vazirmatn-wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* The same file for Arabic-script runs only: in a Latin locale it sits in front of the
   Latin face, so a Persian shop name is not drawn in the system fallback. */
@font-face {
  font-family: 'Vazirmatn P Arabic';
  src: url('./fonts/Vazirmatn-wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F;
}

/* ───────── 1. tokens ───────── */
html[data-template='premium'] {
  --canvas: 0 0 0; --tile: 17 17 19; --tile-2: 31 31 34; --tile-3: 46 46 50;
  --line: 44 44 48; --line-strong: 92 92 98;
  --ink: 245 245 247; --mute: 161 161 166; --faint: 134 134 139;
  --amber: 255 205 114; --amber-soft: 255 205 114;
  --danger: 255 132 143; --danger-soft: 255 132 143;
  --success: 98 224 175; --success-soft: 98 224 175;
  --info: 132 188 255; --info-soft: 132 188 255;
  --radius-tile: 22px; --radius-sheet: 28px;
  --shadow-tile: 0 0 0 0 transparent;
  --shadow-window: 0 0 0 1px rgb(255 255 255 / .14), 0 30px 80px -20px rgb(0 0 0 / .85);
  --shadow-sheet: 0 0 0 1px rgb(255 255 255 / .12), 0 30px 90px rgb(0 0 0 / .7);
  --shadow-icon: 0 0 0 0 transparent;

  --p-bg: #000;
  --p-ink: #f5f5f7;
  --p-ink2: #a1a1a6;
  --p-ink3: #86868b;
  --p-hair: rgb(255 255 255 / .14);
  --p-hair2: rgb(255 255 255 / .3);
  --p-fill: rgb(255 255 255 / .06);
  --p-panel: #0e0e10;
  --p-acc-text: color-mix(in oklab, var(--accent) 62%, white);
  --p-acc-soft: color-mix(in oklab, var(--accent) 18%, transparent);
  --p-gut: clamp(16px, 4.4vw, 72px);
  --p-max: 1320px;
  --p-ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
  background: #000;
}
/* Latin locales keep the app's Latin face; a Persian shop name inside them still gets Vazirmatn. */
html[data-template='premium']:not([lang='fa'], [lang='ar']) { --font-ui: 'Vazirmatn P Arabic', var(--font-latin), -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
html[data-template='premium'][lang='fa'],
html[data-template='premium'][lang='ar'] { --font-ui: 'Vazirmatn P', var(--font-vazirmatn), 'Vazirmatn', Tahoma, sans-serif; }

/* --signal-ink and --on-signal arrive inline on <html>, tuned for a light page.
   Re-derive them one level down (body), where a stylesheet can still win, so
   portals (sheet, toasts) get them too. */
html[data-template='premium'] body {
  --signal-ink: var(--signal);
  --p-on-accent: rgb(var(--on-signal));
  background: #000;
  color: var(--p-ink);
}
@supports (color: oklch(from red l c h)) {
  html[data-template='premium'] body {
    --p-on-accent: oklch(from var(--accent) calc((.6 - l) * 1000) 0 0);
    --on-signal: from var(--p-on-accent) r g b;
    --signal-ink: from color-mix(in oklab, var(--accent) 62%, white) r g b;
  }
}
html[data-template='premium'] ::selection { background: color-mix(in oklab, var(--accent) 45%, transparent); color: #fff; }

/* ───────── 2. home page ───────── */
.tpl-premium {
  color: var(--p-ink);
  font-size: 17px; line-height: 1.75;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
.tpl-premium *, .tpl-premium *::before, .tpl-premium *::after { box-sizing: border-box; }
.tpl-premium a { color: inherit; text-decoration: none; }
.tpl-premium :focus-visible { outline: 2px solid var(--p-acc-text); outline-offset: 3px; border-radius: 8px; }
.tpl-premium .lt { direction: ltr; unicode-bidi: isolate; font-feature-settings: 'tnum'; }
.tpl-premium .wrap { max-width: var(--p-max); margin-inline: auto; padding-inline: var(--p-gut); }
.tpl-premium h1, .tpl-premium h2, .tpl-premium h3 { letter-spacing: 0; text-wrap: balance; }

/* dot matrix: plain bold type until home.js redraws it as dots */
.tpl-premium .dm { display: inline-block; vertical-align: middle; color: inherit; font-weight: 900; }
.tpl-premium .dm.on { line-height: 0; }
.tpl-premium .dm svg { display: block; overflow: visible; max-width: 100%; height: auto; }
.tpl-premium .dm .off { opacity: .16; }

/* buttons */
.tpl-premium .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 28px; border-radius: 999px; border: 0;
  background: var(--accent); color: var(--p-on-accent); font-weight: 700; font-size: 17px; line-height: 1.3; text-decoration: none; text-align: center;
  transition: transform .2s var(--p-ease), filter .2s, box-shadow .2s;
}
.tpl-premium .btn:hover { filter: brightness(1.08); }
.tpl-premium .btn:active { transform: scale(.97); }
.tpl-premium .btn[aria-disabled='true'] { background: var(--p-fill); color: var(--p-ink3); cursor: not-allowed; filter: none; transform: none; }
.tpl-premium .btn-ghost { background: transparent; color: var(--p-ink); box-shadow: inset 0 0 0 1px var(--p-hair); }
.tpl-premium .btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--p-ink2); filter: none; }
.tpl-premium .btn-sm { min-height: 38px; padding: 0 18px; font-size: 14px; }
.tpl-premium .link { color: var(--p-acc-text); font-weight: 600; }
.tpl-premium .link:hover { text-decoration: underline; text-underline-offset: 5px; }
.tpl-premium .link svg { display: inline-block; width: .8em; height: .8em; vertical-align: -.05em; margin-inline-start: 4px; }
[dir='ltr'] .tpl-premium .chev { transform: scaleX(-1); }

/* ── stage: host of the key-card (CSS card first, WebGL canvas over it) ── */
.tpl-premium .stage { position: relative; overflow: hidden; }
.tpl-premium .stage canvas.gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; opacity: 0; transition: opacity 1s ease; }
.tpl-premium .stage.gl-on canvas.gl { opacity: 1; }
.tpl-premium .stage .glow {
  position: absolute; left: 50%; top: 50%; width: min(90%, 760px); aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--accent) 34%, transparent), color-mix(in oklab, var(--accent) 8%, transparent) 55%, transparent 72%);
  filter: blur(10px);
}
.tpl-premium .stage .floor {
  position: absolute; left: 12%; right: 12%; bottom: 14%; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--accent) 60%, white), transparent); opacity: .35;
}
.tpl-premium .kcard {
  position: absolute; left: 50%; top: 50%; width: min(62%, 440px); aspect-ratio: 1.59; translate: -50% -50%;
  container-type: inline-size; transform-style: preserve-3d; direction: ltr;
  transform: perspective(1100px) rotateX(10deg) rotateY(calc(-20deg + var(--turn, 0deg)));
  transition: opacity .8s ease;
}
.tpl-premium .stage.gl-on .kcard { opacity: 0; }
.tpl-premium .kface {
  position: absolute; inset: 0; border-radius: 8.5cqw; border: 1px solid rgb(255 255 255 / .28);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background:
    linear-gradient(135deg, rgb(255 255 255 / .2), rgb(255 255 255 / .03) 45%, color-mix(in oklab, var(--accent) 34%, transparent)),
    #08080a;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .5), inset 0 1px 0 rgb(255 255 255 / .35), 0 40px 90px -40px color-mix(in oklab, var(--accent) 70%, transparent);
}
.tpl-premium .kface::before {
  content: ''; position: absolute; inset: 4.6%; border-radius: 5cqw;
  background: linear-gradient(155deg, #45454e, #26262b 42%, #17171a); border: 1px solid rgb(255 255 255 / .12);
  box-shadow: inset 0 0 0 .7cqw #2b2b31, inset 0 0 0 .9cqw rgb(180 180 189 / .35);
}
.tpl-premium .kback { transform: rotateY(180deg); }
.tpl-premium .kface > * { position: absolute; }
.tpl-premium .kring { left: 5.4%; top: 9%; width: 22%; aspect-ratio: 1; }
.tpl-premium .kring svg { width: 100%; height: 100%; display: block; transform: rotate(-90deg); overflow: visible; }
.tpl-premium .kring circle { fill: none; }
.tpl-premium .kring .trk { stroke: #17171a; stroke-width: 9; }
.tpl-premium .kring .arc { stroke: var(--accent); stroke-width: 6; stroke-linecap: round; filter: drop-shadow(0 0 1.2cqw var(--accent)); }
.tpl-premium .kring::after { content: ''; position: absolute; inset: 27%; border-radius: 50%; background: #000; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .25), 0 0 0 1px rgb(0 0 0 / .6); }
.tpl-premium .kname { right: 10%; top: 10.5%; max-width: 58%; font-weight: 800; font-size: 6.4cqw; line-height: 1.3; color: #b9b9c2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; unicode-bidi: plaintext; text-align: right; }
.tpl-premium .kchip { right: 13%; top: 33%; width: 19%; aspect-ratio: 1.28; border-radius: 2.2cqw; border: .5cqw solid #8f8f99; background:
  linear-gradient(#8f8f99, #8f8f99) 50% 33% / 100% .3cqw no-repeat,
  linear-gradient(#8f8f99, #8f8f99) 50% 67% / 100% .3cqw no-repeat,
  radial-gradient(closest-side, #8f8f99 0 30%, transparent 31%); opacity: .8; }
.tpl-premium .kled { left: 9.5%; bottom: 10%; display: flex; align-items: baseline; gap: 2.4cqw; color: #f2f2f6; line-height: 1; white-space: nowrap; text-shadow: 0 0 2.4cqw var(--accent), 0 0 .6cqw var(--accent); }
.tpl-premium .kled b { font-weight: 900; font-size: 15cqw; font-feature-settings: 'tnum'; }
.tpl-premium .kled i { font-style: normal; font-weight: 800; font-size: 5.4cqw; }
.tpl-premium .stage[data-rtl] .kled { flex-direction: row-reverse; }
.tpl-premium .kmeta { right: 10%; bottom: 11%; max-width: 44%; font-weight: 600; font-size: 3.5cqw; letter-spacing: .04em; color: #b4b4bd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpl-premium .kback .kname { right: 0; left: 0; top: auto; bottom: 11%; max-width: none; text-align: center; font-size: 5.4cqw; }
.tpl-premium .kmark { left: 50%; top: 43%; width: 34%; aspect-ratio: 1; translate: -50% -50%; rotate: 45deg; border-radius: 3cqw;
  background: radial-gradient(circle, #f2f2f6 0 1.1px, transparent 1.6px) 0 0 / 3.2cqw 3.2cqw;
  -webkit-mask: radial-gradient(closest-side, #000 0 22%, transparent 23% 62%, #000 63% 100%); mask: radial-gradient(closest-side, #000 0 22%, transparent 23% 62%, #000 63% 100%);
  filter: drop-shadow(0 0 1.6cqw var(--accent)); }

/* ── story. Default is a plain, finished page (no script, reduced motion):
   the phases scroll past while the card stays in view. `.is-live` (set by
   home.js) turns it into the mockup's pinned, scroll-driven story. ── */
.tpl-premium .story { position: relative; }
.tpl-premium .story .snap { display: none; position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; }
.tpl-premium .pin { display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); align-items: start; }
.tpl-premium .pin .stage { grid-column: 2; grid-row: 1; position: sticky; top: 0; height: 100vh; height: 100svh; }
.tpl-premium .pin .pcopy { grid-column: 1; grid-row: 1; position: relative; }
.tpl-premium .phase {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  min-height: 78vh; min-height: 78svh; padding-block: 48px;
  padding-inline-start: var(--p-gut); padding-inline-end: 12px;
}
.tpl-premium .phase:first-child { min-height: calc(100vh - 56px); min-height: calc(100svh - 56px); }
.tpl-premium .story[data-phases='1'] .phase { min-height: calc(100vh - 56px); min-height: calc(100svh - 56px); }
.tpl-premium .phase h1 {
  margin: 0; max-width: 100%; font-weight: 900; line-height: 1.12; color: var(--p-ink); overflow-wrap: anywhere;
  font-size: clamp(44px, calc(11.2vw * var(--k, 1)), calc(176px * var(--k, 1)));
}
.tpl-premium .phase .line { margin: 10px 0 0; font-weight: 800; font-size: clamp(26px, 2.9vw, 44px); line-height: 1.3; }
.tpl-premium .phase h2 { margin: 0; font-weight: 900; font-size: clamp(52px, 5.4vw, 88px); line-height: 1.14; }
.tpl-premium .phase p { margin: 22px 0 0; max-width: 30em; color: var(--p-ink2); font-size: clamp(17px, 1.35vw, 21px); line-height: 1.8; }
.tpl-premium .phase p b { color: var(--p-ink); font-weight: 700; }
.tpl-premium .phase p .from { white-space: nowrap; }
.tpl-premium .phase p .handle { color: var(--p-acc-text); font-weight: 600; white-space: nowrap; }
.tpl-premium .phase p .handle:hover { text-decoration: underline; text-underline-offset: 5px; }
.tpl-premium .phase .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; max-width: 100%; }
.tpl-premium .phase .ctas .btn { max-width: 100%; }
.tpl-premium .phase .ctas .btn bdi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 16em; }
.tpl-premium .phase .tag { color: var(--p-acc-text); margin-bottom: 18px; font-size: 22px; direction: ltr; }
.tpl-premium .devices { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 30px; color: var(--p-ink2); font-size: 14px; }
.tpl-premium .devices span { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tpl-premium .devices svg { width: 34px; height: 34px; color: var(--p-ink); }
.tpl-premium .pays { display: flex; gap: 0; margin-top: 30px; border-block: 1px solid var(--p-hair); width: 100%; max-width: 30em; }
.tpl-premium .pays div { flex: 1; padding: 16px 0; }
.tpl-premium .pays div + div { border-inline-start: 1px solid var(--p-hair); padding-inline-start: 20px; }
.tpl-premium .pays b { display: block; font-size: 18px; }
.tpl-premium .pays small { color: var(--p-ink3); font-size: 13px; }
.tpl-premium .progress, .tpl-premium .scrollhint { display: none; }

.tpl-premium.is-live .story { height: calc(100vh + (var(--n, 1) - 1) * 90vh); height: calc(100svh + (var(--n, 1) - 1) * 90svh); }
.tpl-premium.is-live .story .snap:not(:first-of-type) { display: block; }
.tpl-premium.is-live .pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; align-items: stretch; }
.tpl-premium.is-live .pin .stage { position: relative; top: auto; height: auto; }
.tpl-premium.is-live .phase { position: absolute; inset: 0; min-height: 0; padding-block: 0; will-change: opacity, transform; }
.tpl-premium.is-live .phase:not(:first-child) { opacity: 0; visibility: hidden; }
.tpl-premium.is-live .progress { position: absolute; inset-inline-end: 22px; top: 50%; translate: 0 -50%; display: flex; flex-direction: column; gap: 10px; z-index: 3; }
.tpl-premium .progress i { width: 6px; height: 6px; border-radius: 50%; background: var(--p-ink3); opacity: .5; transition: all .3s; }
.tpl-premium .progress i.on { background: var(--accent); opacity: 1; box-shadow: 0 0 12px var(--accent); }
.tpl-premium.is-live .scrollhint { position: absolute; bottom: 82px; inset-inline-start: var(--p-gut); display: flex; align-items: center; gap: 10px; color: var(--p-ink3); font-size: 13px; transition: opacity .4s; }

@media (prefers-reduced-motion: no-preference) {
  html[data-template='premium']:has(.tpl-premium.is-live) { scroll-snap-type: y proximity; }
  html[data-template='premium']:has(.tpl-premium) { scroll-behavior: smooth; }
  .tpl-premium.is-live .story .snap, .tpl-premium.is-live #plans, .tpl-premium.is-live #free, .tpl-premium.is-live #ads, .tpl-premium.is-live #faq { scroll-snap-align: start; }
}

/* ── lineup ── */
.tpl-premium .sec { padding-block: clamp(90px, 12vw, 180px); }
.tpl-premium .sec-head { max-width: 760px; }
.tpl-premium .sec-head h2 { margin: 0; font-weight: 900; font-size: clamp(48px, 6.4vw, 104px); line-height: 1.14; }
.tpl-premium .sec-head p { margin: 18px 0 0; color: var(--p-ink2); font-size: clamp(17px, 1.4vw, 21px); }
.tpl-premium .sec-head p.quiet { margin-top: 4px; color: var(--p-ink3); font-size: 16px; }
.tpl-premium.is-live .reveal { clip-path: inset(0 0 100% 0); transform: translateY(24px); transition: clip-path 1.1s var(--p-ease), transform 1.1s var(--p-ease); }
.tpl-premium.is-live .reveal.in { clip-path: inset(0 0 -20% 0); transform: none; }
.tpl-premium .lineup { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 64px; margin-top: clamp(56px, 7vw, 100px); overflow: hidden; padding-block: 4px; }
.tpl-premium .lineup[data-count='1'] { grid-template-columns: minmax(0, 380px); }
.tpl-premium .lineup[data-count='2'] { grid-template-columns: repeat(2, minmax(0, 380px)); }
.tpl-premium .lineup[data-count='3'] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tpl-premium .plan { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 18px 8px; min-width: 0; border-inline-start: 1px solid var(--p-hair); margin-inline-start: -1px; }
.tpl-premium .thumb { position: relative; width: 100%; aspect-ratio: 1.5; display: block; margin-bottom: 22px; }
.tpl-premium .tcard {
  position: absolute; inset: 22% 14%; border-radius: 16px; border: 1px solid rgb(255 255 255 / .2); direction: ltr;
  background: linear-gradient(135deg, rgb(255 255 255 / .16), rgb(255 255 255 / .02) 50%, color-mix(in oklab, var(--accent) 25%, transparent));
  transform: perspective(700px) rotateY(-22deg) rotateX(12deg); transition: transform .5s var(--p-ease);
}
.tpl-premium .tcard i { position: absolute; left: 9%; top: 13%; width: 20%; aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--accent); box-shadow: 0 0 10px color-mix(in oklab, var(--accent) 70%, transparent); }
.tpl-premium .tcard b { position: absolute; left: 10%; bottom: 8%; font-weight: 900; font-size: 26px; line-height: 1; color: #f2f2f6; text-shadow: 0 0 12px var(--accent); }
.tpl-premium .thumb.has-img .tcard { display: none; }
.tpl-premium .thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: transform .5s var(--p-ease); }
.tpl-premium .thumb:hover img { transform: translateY(-6px) scale(1.03); }
.tpl-premium .thumb:hover .tcard { transform: perspective(700px) rotateY(-16deg) rotateX(9deg) translateY(-6px); }
.tpl-premium .plan h3 { margin: 0; max-width: 100%; font-size: clamp(22px, 2vw, 30px); font-weight: 900; line-height: 1.35; overflow-wrap: anywhere; }
.tpl-premium .plan .days { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--p-acc-text); font-weight: 700; font-size: 15px; min-height: 28px; }
.tpl-premium .plan .days .dm:not(.on) { font-size: 22px; line-height: 1; }
.tpl-premium .plan .loc { margin-top: 18px; color: var(--p-ink2); font-size: 15px; max-width: 100%; overflow-wrap: anywhere; }
.tpl-premium .plan .limits { display: block; margin-top: 2px; color: var(--p-ink3); font-size: 13px; }
.tpl-premium .plan .price { margin-top: auto; padding-top: 4px; font-size: 21px; font-weight: 800; font-feature-settings: 'tnum'; }
.tpl-premium .plan .price small { font-size: 14px; font-weight: 500; color: var(--p-ink2); }
.tpl-premium .plan .acts { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 26px; }
.tpl-premium .plan .acts .btn { min-width: 132px; }
.tpl-premium .plan.sold .thumb img { filter: grayscale(1) brightness(.55); }
.tpl-premium .plan.sold .tcard { filter: grayscale(1) brightness(.6); }
.tpl-premium .plan.sold h3, .tpl-premium .plan.sold .loc, .tpl-premium .plan.sold .days { color: var(--p-ink3); }
.tpl-premium .pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; box-shadow: inset 0 0 0 1px var(--p-hair); color: var(--p-ink2); line-height: 1.8; }
.tpl-premium .more { margin: clamp(40px, 5vw, 64px) 0 0; font-size: 17px; }

/* ── free proxy ── */
.tpl-premium .free { border-top: 1px solid var(--p-hair); }
.tpl-premium .free .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--p-gut); align-items: center; }
.tpl-premium .free .zero { display: flex; align-items: flex-end; gap: 22px; color: var(--p-ink); justify-self: center; max-width: 100%; }
.tpl-premium .free .zero .dm { max-width: 100%; }
.tpl-premium .free .zero .dm:not(.on) { font-size: clamp(72px, 12vw, 168px); line-height: 1.2; }
.tpl-premium .free h2 { margin: 0; font-weight: 900; font-size: clamp(46px, 5.6vw, 88px); line-height: 1.15; }
.tpl-premium .free p { color: var(--p-ink2); max-width: 28em; margin: 20px 0 32px; font-size: clamp(17px, 1.35vw, 20px); }

/* ── ads ── */
.tpl-premium .ads { border-top: 1px solid var(--p-hair); }
.tpl-premium .adrows { margin: 64px 0 0; border-top: 1px solid var(--p-hair); }
.tpl-premium .adrow { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) auto; gap: 24px; align-items: baseline; padding: 34px 0; border-bottom: 1px solid var(--p-hair); }
.tpl-premium .adrow dt { font-size: 28px; font-weight: 900; line-height: 1.4; }
.tpl-premium .adrow dd { margin: 0; color: var(--p-ink2); max-width: 36em; }
.tpl-premium .adrow .go { align-self: center; }

/* ── faq ── */
.tpl-premium .faq { border-top: 1px solid var(--p-hair); }
.tpl-premium .faq .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--p-gut); }
.tpl-premium .faq h2 { margin: 0; font-weight: 900; font-size: clamp(46px, 5.6vw, 88px); line-height: 1.14; }
.tpl-premium .faq details { border-bottom: 1px solid var(--p-hair); }
.tpl-premium .faq details:first-of-type { border-top: 1px solid var(--p-hair); }
.tpl-premium .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 24px 0; font-size: 20px; font-weight: 700; }
.tpl-premium .faq summary::-webkit-details-marker { display: none; }
.tpl-premium .faq summary svg { flex: none; width: 18px; height: 18px; margin-top: 8px; transition: transform .3s; color: var(--p-ink2); }
.tpl-premium .faq details[open] summary svg { transform: rotate(45deg); }
.tpl-premium .faq details p { margin: 0 0 26px; color: var(--p-ink2); max-width: 40em; }

/* ── home, responsive ── */
@media (max-width: 1000px) {
  .tpl-premium .lineup, .tpl-premium .lineup[data-count='3'] { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 56px; }
}
@media (max-width: 760px) {
  .tpl-premium { font-size: 16px; }
  .tpl-premium .pin { grid-template-columns: minmax(0, 1fr); }
  .tpl-premium .pin .stage { grid-column: 1; grid-row: 1; position: relative; height: 44vh; height: 44svh; }
  .tpl-premium .pin .pcopy { grid-column: 1; grid-row: 2; }
  .tpl-premium .phase, .tpl-premium .phase:first-child, .tpl-premium .story[data-phases='1'] .phase { min-height: 0; justify-content: flex-start; padding: 4px var(--p-gut) 56px; }
  .tpl-premium .phase + .phase { border-top: 1px solid var(--p-hair); padding-top: 48px; }
  .tpl-premium .phase h1 { font-size: clamp(40px, calc(23vw * var(--k, 1)), calc(104px * var(--k, 1))); }
  .tpl-premium .phase .line { font-size: 24px; margin-top: 4px; }
  .tpl-premium .phase h2 { font-size: clamp(36px, 10.6vw, 56px); }
  .tpl-premium .phase p { margin-top: 14px; font-size: 16px; line-height: 1.75; }
  .tpl-premium .phase .ctas { margin-top: 22px; width: 100%; }
  .tpl-premium .phase .ctas .btn { flex: 1 1 auto; padding: 0 14px; min-width: 0; }
  .tpl-premium .devices { gap: 18px; margin-top: 20px; }
  .tpl-premium .devices svg { width: 28px; height: 28px; }
  .tpl-premium .pays { margin-top: 20px; }
  .tpl-premium.is-live .pin { grid-template-rows: 44% 56%; }
  .tpl-premium.is-live .pin .stage { height: auto; }
  .tpl-premium.is-live .phase, .tpl-premium.is-live .phase + .phase { padding: 4px var(--p-gut) 0; border-top: 0; }
  .tpl-premium.is-live .progress { top: 22%; inset-inline-end: 14px; }
  .tpl-premium.is-live .scrollhint { display: none; }
  .tpl-premium .lineup, .tpl-premium .lineup[data-count] { grid-template-columns: minmax(0, 1fr); row-gap: 0; margin-top: 40px; padding-block: 0; }
  .tpl-premium .plan { display: grid; grid-template-columns: 44% minmax(0, 1fr); grid-template-areas: 't h' 't d' 't l' 't p' 'a a'; text-align: start; align-items: start; justify-items: start; padding: 28px 0; column-gap: 16px; border-top: 1px solid var(--p-hair); border-inline-start: 0; margin-inline-start: 0; }
  .tpl-premium .plan:last-child { border-bottom: 1px solid var(--p-hair); }
  .tpl-premium .plan .thumb { grid-area: t; margin: 0; align-self: center; }
  .tpl-premium .plan h3 { grid-area: h; font-size: 22px; }
  .tpl-premium .plan .days { grid-area: d; margin-top: 6px; }
  .tpl-premium .plan .loc { grid-area: l; margin-top: 8px; font-size: 14px; }
  .tpl-premium .plan .price { grid-area: p; font-size: 18px; }
  .tpl-premium .plan .acts { grid-area: a; flex-direction: row; justify-content: space-between; width: 100%; margin-top: 18px; }
  .tpl-premium .plan .acts .btn { flex: 1; max-width: 60%; }
  .tpl-premium .tcard b { font-size: 20px; }
  .tpl-premium .free .wrap { grid-template-columns: minmax(0, 1fr); }
  .tpl-premium .free .zero { justify-self: start; }
  .tpl-premium .adrows { margin-top: 40px; }
  .tpl-premium .adrow { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 28px 0; }
  .tpl-premium .adrow dt { font-size: 24px; }
  .tpl-premium .adrow .go { justify-self: start; margin-top: 8px; }
  .tpl-premium .faq .wrap { grid-template-columns: minmax(0, 1fr); }
  .tpl-premium .faq summary { font-size: 17px; padding: 20px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tpl-premium *, .tpl-premium *::before, .tpl-premium *::after { transition-duration: .01ms !important; animation: none !important; }
}

/* ───────── 3. shared pages ───────── */
.storefront-studio[data-template='premium'] { background: #000; color: var(--p-ink); }

/* header: the mockup's global nav */
.storefront-studio[data-template='premium'] > header {
  background: color-mix(in oklab, #000 72%, transparent); border-color: var(--p-hair);
  backdrop-filter: saturate(1.8) blur(20px); -webkit-backdrop-filter: saturate(1.8) blur(20px);
}
.storefront-studio[data-template='premium'][data-home='true'] > header { position: relative; background: #000; backdrop-filter: none; -webkit-backdrop-filter: none; }
.storefront-studio[data-template='premium'] > header > div { max-width: var(--p-max); height: 56px; padding-inline: var(--p-gut); gap: 14px; }
.storefront-studio[data-template='premium'] > header > div > a:first-child { gap: 10px; }
.storefront-studio[data-template='premium'] > header > div > a:first-child > :first-child { width: 28px !important; height: 28px !important; border-radius: 8px; font-size: 14px !important; box-shadow: none; }
.storefront-studio[data-template='premium'] > header > div > a:first-child > span:last-child { font-size: 17px; font-weight: 800; color: var(--p-ink); }
.storefront-studio[data-template='premium'] > header > div > nav { gap: 2px; margin-inline-start: 14px; }
.storefront-studio[data-template='premium'] > header nav a { font-size: 14px; font-weight: 500; color: var(--p-ink2); background: transparent; transition: color .2s; }
.storefront-studio[data-template='premium'] > header nav a:hover { color: var(--p-ink); background: transparent; }
.storefront-studio[data-template='premium'] > header nav a[aria-current='page'] { background: transparent; color: var(--p-ink); font-weight: 700; }
.storefront-studio[data-template='premium'] > header a[data-testid='header-login'] {
  background: transparent; color: var(--p-ink); border-radius: 999px; box-shadow: inset 0 0 0 1px var(--p-hair);
  min-height: 34px; padding-inline: 16px; font-size: 14px; font-weight: 700; white-space: nowrap; transition: box-shadow .2s;
}
.storefront-studio[data-template='premium'] > header a[data-testid='header-login']:hover { box-shadow: inset 0 0 0 1px var(--p-ink2); }
.storefront-studio[data-template='premium'] > header a[data-testid='header-wallet'] { background: var(--p-fill); box-shadow: inset 0 0 0 1px var(--p-hair); min-height: 34px; color: var(--p-ink); }
.storefront-studio[data-template='premium'] > header a[data-testid='header-wallet'] svg { color: var(--p-acc-text); }
.storefront-studio[data-template='premium'] > header a[data-testid='header-account'] { width: 34px; height: 34px; background: var(--accent); color: var(--p-on-accent); box-shadow: none; }
.storefront-studio[data-template='premium'] > header > nav { max-width: var(--p-max); padding-inline: calc(var(--p-gut) - 12px); gap: 0; padding-bottom: 6px; }
.storefront-studio[data-template='premium'] > header > nav a { padding: 6px 12px; font-size: 13px; }
.storefront-studio[data-template='premium'] > header > nav a[aria-current='page'] { background: var(--p-fill); box-shadow: inset 0 0 0 1px var(--p-hair); }
html[data-template='premium'] .language-select { min-height: 34px; border-radius: 999px; border-color: var(--p-hair); background: transparent; color: var(--p-ink2); }
html[data-template='premium'] .language-select select { padding-block: 6px; }
html[data-template='premium'] select option { background: #1c1c1e; color: #f5f5f7; }
html[data-template='premium'] .store-skip-link { background: var(--accent); color: var(--p-on-accent); border-radius: 999px; }

/* frame */
.storefront-studio[data-template='premium'] > main { max-width: var(--p-max); padding-inline: var(--p-gut); padding-top: 28px; }
.storefront-studio[data-template='premium'][data-home='true'] > main { max-width: none; padding: 0; }
.storefront-studio[data-template='premium'] .store-breadcrumb { color: var(--p-ink3); font-size: 13px; margin-bottom: 20px; }
.storefront-studio[data-template='premium'] .store-breadcrumb a:hover { color: var(--p-ink); }
.storefront-studio[data-template='premium'] .store-breadcrumb > span { color: var(--p-ink2); font-weight: 600; }
.storefront-studio[data-template='premium'] .store-page-title { padding: 0 0 28px; border-bottom: 1px solid var(--p-hair); margin-bottom: 32px; }
.storefront-studio[data-template='premium'] .store-page-title::before { display: none; }
.storefront-studio[data-template='premium'] .store-page-title h1 { font-size: clamp(34px, 4.4vw, 60px); line-height: 1.2; font-weight: 900; letter-spacing: 0; color: var(--p-ink); text-wrap: balance; }
.storefront-studio[data-template='premium'] .store-page-title > p { font-size: clamp(15px, 1.3vw, 19px); line-height: 1.8; margin-top: 12px; color: var(--p-ink2); }
.storefront-studio[data-template='premium'] .route-catalog .route-content > .max-w-xl { max-width: 760px; }

/* cards */
html[data-template='premium'] .store-tile { background: var(--p-panel); border-color: var(--p-hair); box-shadow: none; border-radius: 22px; }
html[data-template='premium'] .store-empty { background: transparent; border: 1px dashed var(--p-hair2); border-radius: 22px; }
html[data-template='premium'] .store-tile > .store-empty { border: 0; }
html[data-template='premium'] .store-empty > div:first-child { background: var(--p-fill); color: var(--p-acc-text); border-radius: 50%; box-shadow: inset 0 0 0 1px var(--p-hair); }
html[data-template='premium'] .store-notice { background: var(--p-panel); border-color: var(--p-hair); box-shadow: none; }

/* buttons */
html[data-template='premium'] .store-button { border-radius: 999px; font-weight: 700; transition: transform .2s var(--p-ease), filter .2s, background-color .2s, box-shadow .2s; }
html[data-template='premium'] .store-button:active:not(:disabled) { transform: scale(.97); }
html[data-template='premium'] [data-ds-button='signal'] { background: var(--accent); color: var(--p-on-accent); box-shadow: none; }
html[data-template='premium'] [data-ds-button='quiet'] { background: rgb(255 255 255 / .09); color: var(--p-ink); }
html[data-template='premium'] [data-ds-button='quiet']:hover { background: rgb(255 255 255 / .15); }
html[data-template='premium'] [data-ds-button='ghost'] { background: transparent; color: var(--p-ink); box-shadow: inset 0 0 0 1px var(--p-hair); }
html[data-template='premium'] [data-ds-button='ghost']:hover { background: transparent; box-shadow: inset 0 0 0 1px var(--p-ink2); }
html[data-template='premium'] .store-button:disabled { background: var(--p-fill); color: var(--p-ink3); opacity: 1; }
html[data-template='premium'] a.bg-signal, html[data-template='premium'] button.bg-signal { border-radius: 999px; background: var(--accent); color: var(--p-on-accent); box-shadow: none; }
html[data-template='premium'] :is(a, button, summary):focus-visible { outline: 2px solid var(--p-acc-text); outline-offset: 3px; }

/* forms */
html[data-template='premium'] .store-input,
html[data-template='premium'] .store-textarea,
html[data-template='premium'] .store-select { background: rgb(255 255 255 / .06); border-color: transparent; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--p-hair); transition: box-shadow .2s, background-color .2s; }
html[data-template='premium'] .store-input { min-height: 52px; }
html[data-template='premium'] .store-input:focus-within,
html[data-template='premium'] .store-textarea:focus,
html[data-template='premium'] .store-select:focus { background: rgb(255 255 255 / .09); border-color: transparent; box-shadow: inset 0 0 0 2px var(--accent); }
html[data-template='premium'] .store-input[class*='border-danger'], html[data-template='premium'] .store-textarea[aria-invalid='true'], html[data-template='premium'] .store-select[aria-invalid='true'] { box-shadow: inset 0 0 0 1.5px rgb(var(--danger)); }
html[data-template='premium'] input:-webkit-autofill { -webkit-text-fill-color: #f5f5f7; caret-color: #f5f5f7; transition: background-color 99999s; }
html[data-template='premium'] .storefront-studio input[type='file'] { background: var(--p-fill); border-color: var(--p-hair2); border-radius: 14px; color: var(--p-ink2); }
html[data-template='premium'] .storefront-studio input[type='file']::file-selector-button { border: 0; border-radius: 999px; background: rgb(255 255 255 / .14); color: var(--p-ink); padding: 8px 16px; margin-inline-end: 12px; font: inherit; font-weight: 600; }
html[data-template='premium'] [data-testid='aggregate-form'],
html[data-template='premium'] [data-testid='receipt-form'],
html[data-template='premium'] [data-testid='creative-form'],
html[data-template='premium'] [data-testid='banner-creative-form'] { background: var(--p-panel); border-color: var(--p-hair); border-radius: 22px; }
html[data-template='premium'] [role='radiogroup'].bg-tile-2 { background: rgb(255 255 255 / .08); }
html[data-template='premium'] [role='radiogroup'] > [aria-checked='true'].bg-tile { background: rgb(255 255 255 / .16); }

/* sheet + toast (portals on <body>) */
html[data-template='premium'] .z-sheet > [aria-hidden] { background: rgb(0 0 0 / .62); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); }
html[data-template='premium'] .z-sheet > [role='dialog'] { background: #161618; }
html[data-template='premium'] .z-sheet > [role='dialog'] h2 { font-weight: 900; font-size: 22px; }
html[data-template='premium'] .z-toast > div { background: rgb(28 28 30 / .92); border-radius: 18px; }

/* auth */
.storefront-studio[data-template='premium'] .auth-layout { background: var(--p-panel); border-color: var(--p-hair); border-radius: 28px; }
.storefront-studio[data-template='premium'] .auth-story {
  background:
    radial-gradient(90% 70% at 100% 100%, color-mix(in oklab, var(--accent) 30%, transparent), transparent 70%),
    linear-gradient(160deg, #17171a, #09090b);
  color: var(--p-ink); border-inline-end: 1px solid var(--p-hair);
}
.storefront-studio[data-template='premium'] .auth-brand { color: var(--p-ink2); }
.storefront-studio[data-template='premium'] .auth-story h2 { font-weight: 900; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.3; letter-spacing: 0; }
.storefront-studio[data-template='premium'] .auth-story h2 em { color: var(--p-acc-text); }
.storefront-studio[data-template='premium'] .auth-story > p { color: var(--p-ink2); font-size: 15px; line-height: 1.9; }
.storefront-studio[data-template='premium'] .auth-symbol > svg { color: var(--p-acc-text); }
.storefront-studio[data-template='premium'] .auth-symbol > span { border-color: color-mix(in oklab, var(--accent) 40%, transparent); }
.storefront-studio[data-template='premium'] .auth-features { color: var(--p-ink2); font-size: 13px; }
.storefront-studio[data-template='premium'] .auth-content .store-tile { background: transparent; }
.storefront-studio[data-template='premium'] .auth-content .store-page-title { border: 0; padding-bottom: 4px; margin-bottom: 20px; }
.storefront-studio[data-template='premium'] .auth-content .store-page-title h1 { font-size: 34px; }

/* customer workspace */
.storefront-studio[data-template='premium'] .personal-sidebar { background: var(--p-panel); border-color: var(--p-hair); border-radius: 22px; top: 80px; }
.storefront-studio[data-template='premium'] .personal-sidebar > p { color: var(--p-ink3); }
.storefront-studio[data-template='premium'] .personal-sidebar nav a { color: var(--p-ink2); border-radius: 12px; }
.storefront-studio[data-template='premium'] .personal-sidebar nav a:hover { background: var(--p-fill); color: var(--p-ink); }
.storefront-studio[data-template='premium'] .personal-sidebar nav a[aria-current='page'] { background: rgb(255 255 255 / .1); color: var(--p-ink); }
.storefront-studio[data-template='premium'] .personal-sidebar nav a[aria-current='page'] > svg:first-child { color: var(--p-acc-text); }
.storefront-studio[data-template='premium'] .sidebar-note { border-color: var(--p-hair); color: var(--p-ink2); }
.storefront-studio[data-template='premium'] .sidebar-note > svg { color: var(--p-acc-text); }
.storefront-studio[data-template='premium'] .sidebar-note > a { color: var(--p-acc-text); }
.storefront-studio[data-template='premium'] .wallet-balance {
  background:
    radial-gradient(80% 120% at 0% 100%, color-mix(in oklab, var(--accent) 32%, transparent), transparent 70%),
    linear-gradient(135deg, rgb(255 255 255 / .12), rgb(255 255 255 / .02) 55%), #0b0b0d;
  border-color: rgb(255 255 255 / .2);
}
.storefront-studio[data-template='premium'] .wallet-balance > div > p { color: var(--p-ink2); }
.storefront-studio[data-template='premium'] .wallet-balance > div > span > span { color: var(--p-ink); }
.storefront-studio[data-template='premium'] .wallet-balance > div > span > span:first-child { font-weight: 900; }
.storefront-studio[data-template='premium'] .wallet-balance > span { color: var(--p-acc-text); background: rgb(0 0 0 / .35); border-color: var(--p-hair); }
.storefront-studio[data-template='premium'] .profile-avatar { background: var(--p-fill); color: var(--p-acc-text); box-shadow: inset 0 0 0 1px var(--p-hair); }
.storefront-studio[data-template='premium'] [data-testid='account-card'] dl { border-color: var(--p-hair); }
.storefront-studio[data-template='premium'] [data-testid='account-email'] { overflow-wrap: anywhere; }
.storefront-studio[data-template='premium'] .account-shortcut > svg { background: var(--p-fill); color: var(--p-acc-text); }
.storefront-studio[data-template='premium'] .order-detail-card { border-top: 1px solid var(--p-hair); box-shadow: inset 0 3px 0 var(--accent); }
.storefront-studio[data-template='premium'] [data-testid='crypto-address'] { background: var(--p-fill); }

/* catalogue + product */
.storefront-studio[data-template='premium'] .product-card, .storefront-studio[data-template='premium'] .listing-card { transition: transform .3s var(--p-ease), border-color .3s; }
.storefront-studio[data-template='premium'] .product-card:hover, .storefront-studio[data-template='premium'] .listing-card:hover { box-shadow: none; border-color: var(--p-hair2); }
.storefront-studio[data-template='premium'] .product-card-visual,
.storefront-studio[data-template='premium'] .detail-visual {
  background: linear-gradient(135deg, rgb(255 255 255 / .16), rgb(255 255 255 / .02) 50%, color-mix(in oklab, var(--accent) 28%, transparent)), #08080a;
  color: var(--p-ink); border: 1px solid rgb(255 255 255 / .2); border-radius: 16px;
}
.storefront-studio[data-template='premium'] .product-card-visual { min-height: 112px; }
.storefront-studio[data-template='premium'] .product-card-visual > svg, .storefront-studio[data-template='premium'] .detail-visual > svg { color: var(--p-acc-text); }
.storefront-studio[data-template='premium'] .product-location { border-color: rgb(255 255 255 / .25); background: rgb(0 0 0 / .35); border-radius: 999px; padding-inline: 12px; }
.storefront-studio[data-template='premium'] .product-features { color: var(--p-ink2); }
.storefront-studio[data-template='premium'] .product-features svg { color: var(--p-acc-text); }
.storefront-studio[data-template='premium'] .product-card-price { border-color: var(--p-hair); }
.storefront-studio[data-template='premium'] .detail-visual { min-height: 168px; font-weight: 800; }
.storefront-studio[data-template='premium'] .listing-card-visual, .storefront-studio[data-template='premium'] .detail-banner {
  background: linear-gradient(135deg, rgb(255 255 255 / .1), rgb(255 255 255 / .02) 60%), #0b0b0d; color: var(--p-ink2); border: 1px solid var(--p-hair); border-radius: 16px;
}
.storefront-studio[data-template='premium'] .listing-card-visual > span:first-child { border-color: var(--p-hair2); background: rgb(0 0 0 / .35); color: var(--p-acc-text); }
.storefront-studio[data-template='premium'] .proxy-card > img { border-color: var(--p-hair); background: #fff; border-radius: 14px; }
.storefront-studio[data-template='premium'] .proxy-card dl { background: var(--p-fill); border-radius: 14px; }

/* section cards (/ads) */
.storefront-studio[data-template='premium'] .service-card { background: var(--p-panel); border-color: var(--p-hair); box-shadow: none; border-radius: 22px; transition: transform .3s var(--p-ease), border-color .3s; }
.storefront-studio[data-template='premium'] .service-card:hover { transform: translateY(-4px); border-color: var(--p-hair2); box-shadow: none; }
.storefront-studio[data-template='premium'] .service-card[data-service] .service-art {
  background: linear-gradient(135deg, rgb(255 255 255 / .14), rgb(255 255 255 / .02) 50%, color-mix(in oklab, var(--accent) 24%, transparent)), #08080a;
  border: 1px solid rgb(255 255 255 / .16); border-radius: 16px;
}
.storefront-studio[data-template='premium'] .service-art-orbit { border-color: rgb(255 255 255 / .14); }
.storefront-studio[data-template='premium'] .service-card[data-service] .service-art-symbol {
  background: linear-gradient(135deg, rgb(255 255 255 / .24), rgb(255 255 255 / .04)); color: var(--p-ink);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .28), 0 18px 34px -14px color-mix(in oklab, var(--accent) 70%, transparent);
}
.storefront-studio[data-template='premium'] .service-card[data-service] .service-art-dot { background: var(--accent); box-shadow: 0 0 0 7px color-mix(in oklab, var(--accent) 18%, transparent); }
.storefront-studio[data-template='premium'] .service-title { color: var(--p-ink); font-size: 24px; font-weight: 900; }
.storefront-studio[data-template='premium'] .service-description { color: var(--p-ink2); font-size: 15px; line-height: 1.9; }
.storefront-studio[data-template='premium'] .service-cta { border-color: var(--p-hair); color: var(--p-acc-text); font-size: 14px; }
.storefront-studio[data-template='premium'] .service-cta > svg { background: var(--p-fill); }

/* footer: the mockup's .foot */
.storefront-studio[data-template='premium'] > footer { margin-top: 0; border-color: var(--p-hair); }
.storefront-studio[data-template='premium'] > footer > div { position: relative; max-width: var(--p-max); padding: 22px var(--p-gut) 40px; border: 0; color: var(--p-ink3); }
.storefront-studio[data-template='premium'] > footer > div::before { content: ''; position: absolute; top: 0; inset-inline: var(--p-gut); height: 1px; background: var(--p-hair); }
.storefront-studio[data-template='premium'] > footer > div a:hover { color: var(--p-acc-text); }
.storefront-studio[data-template='premium'] .footer-main { max-width: var(--p-max); padding: 64px var(--p-gut) 44px; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
.storefront-studio[data-template='premium'] .footer-brand > a { gap: 16px; font-size: 28px; font-weight: 900; color: var(--p-ink); }
.storefront-studio[data-template='premium'] .footer-brand > a strong { font-weight: 900; }
.storefront-studio[data-template='premium'] .footer-brand > a > :first-child { border-radius: 12px; box-shadow: none; }
.storefront-studio[data-template='premium'] .footer-brand > p { color: var(--p-ink3); font-size: 14px; line-height: 1.9; }
.storefront-studio[data-template='premium'] .footer-main nav { font-size: 16px; color: var(--p-ink); gap: 8px; }
.storefront-studio[data-template='premium'] .footer-main nav h2 { color: var(--p-ink3); font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.storefront-studio[data-template='premium'] .footer-main nav a:hover { color: var(--p-acc-text); text-decoration: none; }

@media (max-width: 767px) {
  .storefront-studio[data-template='premium'] > header > div { height: 52px; gap: 8px; }
  .storefront-studio[data-template='premium'] > main { padding-top: 18px; }
  .storefront-studio[data-template='premium'] .personal-sidebar { border-radius: 16px; top: auto; }
  .storefront-studio[data-template='premium'] .auth-story { border-inline-end: 0; border-bottom: 1px solid var(--p-hair); }
  .storefront-studio[data-template='premium'] .footer-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 44px var(--p-gut) 30px; }
  .storefront-studio[data-template='premium'] .footer-brand > a { font-size: 24px; }
}

/* /ads (app/globals.css): the shop colour and amber, on the panel. */
.storefront-studio[data-template='premium'], .storefront-studio[data-template='premium'] :is(.tone-page, .page-hero) { --tone-a: var(--accent); --tone-c: var(--accent); --tone-d: var(--tone-b); --tone-b: rgb(var(--amber)); --tone-base: var(--p-panel); }
.storefront-studio[data-template='premium'] .page-hero { border: 1px solid var(--p-hair); border-radius: 28px; }
.storefront-studio[data-template='premium'] .ad-choice { --ad-card: var(--p-panel); border-color: var(--p-hair); border-radius: 24px; box-shadow: none; }
.storefront-studio[data-template='premium'] .ad-choice:hover { border-color: var(--p-hair2); box-shadow: 0 30px 60px -32px color-mix(in oklab, var(--ad) 55%, transparent); }
.storefront-studio[data-template='premium'] .ad-choice-tagline { color: var(--p-ink2); }
.storefront-studio[data-template='premium'] .ad-choice-cta { border-radius: 999px; }
.storefront-studio[data-template='premium'] .vp-card { background: var(--p-panel); border-color: var(--p-hair); border-radius: 24px; box-shadow: none; }
.storefront-studio[data-template='premium'] .vp-card:hover { border-color: var(--p-hair2); box-shadow: 0 30px 60px -32px color-mix(in oklab, var(--vp) 55%, transparent); }
.storefront-studio[data-template='premium'] .vp-foot { border-color: var(--p-hair); }
.storefront-studio[data-template='premium'] .vp-cta { border-radius: 999px; }
.storefront-studio[data-template='premium'] .listing-cta { border-radius: 999px; }