/* DEVIN DMA storefront, 2026-10 redesign (storefront/REDESIGN-2026-10.md).
 *
 * One system for every storefront surface: near-black page, neutral anthracite
 * surfaces, large geometric type (Outfit), an open header, wide cards and one
 * large rounded panel per product. Violet is a signal with four jobs only:
 * primary action, selection, focus and links. It never fills a panel.
 *
 * Order: tokens, base, layout, type, primitives (buttons, fields, status,
 * price, dialog, accordion, toast), header, footer, home, catalogue, product
 * page, purchase form, reviews, cart, login, account and native SellAuth
 * markup, secondary pages, motion.
 *
 * The four builder colours (background, card, text, accent in settings.json)
 * reach this file through layouts/master.njk as --dv-bg, --dv-surface,
 * --dv-text-1 and --dv-accent-border; every other token derives here.
 */

/* ===========================================================================
 * 1. Tokens
 * ======================================================================== */
:root {
  /* Colour roles. The first four fall back to the documented values when the
     builder settings are absent (layouts/master.njk sets them). */
  --dv-bg: var(--dv-set-bg, #0a0a0c);
  --dv-surface: var(--dv-set-surface, #141416);
  --dv-surface-raised: #1c1c20;
  --dv-surface-hover: #222227;
  --dv-border-subtle: #2b2b31;          /* decoration and separators only */
  --dv-border-control: #6e6e7d;         /* controls: 3.6:1 on surface */
  --dv-text-1: var(--dv-set-text, #f5f5f7);
  --dv-text-2: #b7b7c2;
  --dv-text-3: #9a9aa6;
  --dv-accent: #6352e6;                 /* primary fill, white text 5.4:1 */
  --dv-accent-hover: #6b5bec;
  --dv-accent-active: #5846d1;
  --dv-accent-link: #a99bff;            /* links and focus ring */
  --dv-accent-border: var(--dv-set-accent, #8b7cff); /* selection edge */
  --dv-accent-subtle: #211d37;          /* selected surface */
  --dv-on-accent: #ffffff;
  --dv-success: #58dca1;
  --dv-warning: #f4c168;
  --dv-danger: #ff8d9b;
  --dv-scrim: rgba(0, 0, 0, .65);
  /* Atmosphere (2026-10 polish): faint violet / deep-blue tints that give the
     black some depth. Never behind body text at more than a few percent. */
  --dv-tint-violet: 99, 82, 230;      /* = accent */
  --dv-tint-blue: 58, 76, 190;
  --dv-band: #0d0c14;                 /* the products band at its densest */
  --dv-band-quiet: #0e0e12;           /* FAQ: one step up from the page */

  /* Type. Outfit for every UI string; the logo stays an image. */
  --dv-font: Outfit, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --dv-fs-display: 40px; --dv-lh-display: 44px;
  --dv-fs-page: 36px;    --dv-lh-page: 42px;
  --dv-fs-section: 30px; --dv-lh-section: 36px;
  --dv-fs-card: 22px;    --dv-lh-card: 28px;
  --dv-fs-intro: 18px;   --dv-lh-intro: 28px;

  /* Geometry. */
  --dv-gutter: 20px;
  --dv-container: min(1440px, calc(100% - 2 * var(--dv-gutter)));
  --dv-gap-section: 56px;
  --dv-gap-grid: 20px;
  --dv-pad-card: 20px;
  --dv-pad-panel: 20px;
  --dv-r-card: 24px;
  --dv-r-panel: 24px;                   /* 32px from 768px */
  --dv-r-control: 14px;
  --dv-r-thumb: 12px;
  --dv-r-icon: 20px;
  --dv-r-small: 8px;
  --dv-header-h: 72px;

  /* Elevation and layers. */
  --dv-shadow-hover: 0 8px 24px rgba(0, 0, 0, .28);
  --dv-shadow-modal: 0 24px 80px rgba(0, 0, 0, .45);
  --dv-z-header: 30;
  --dv-z-dropdown: 40;
  --dv-z-overlay: 100;
  --dv-z-modal: 110;
  --dv-z-toast: 120;

  /* Motion. */
  --dv-ease: cubic-bezier(.2, .8, .2, 1);
  --dv-t-control: 160ms;
  --dv-t-card: 180ms;
  --dv-t-dialog: 200ms;

  color-scheme: dark;
}
@media (min-width: 640px) { :root { --dv-gap-grid: 24px; } }
@media (min-width: 768px) {
  :root {
    --dv-gutter: 32px;
    --dv-gap-section: 72px;
    --dv-pad-card: 24px;
    --dv-pad-panel: 24px;
    --dv-r-panel: 32px;
    --dv-fs-display: 56px; --dv-lh-display: 62px;
    --dv-fs-page: 44px;    --dv-lh-page: 50px;
    --dv-fs-section: 34px; --dv-lh-section: 40px;
  }
}
@media (min-width: 1024px) { :root { --dv-header-h: 96px; } }
@media (min-width: 1280px) {
  :root {
    --dv-gutter: 40px;
    --dv-gap-section: 96px;
    --dv-gap-grid: 32px;
    --dv-pad-panel: 40px;
    --dv-fs-display: 72px; --dv-lh-display: 78px;
    --dv-fs-page: 52px;    --dv-lh-page: 58px;
    --dv-fs-section: 40px; --dv-lh-section: 46px;
    --dv-fs-card: 24px;    --dv-lh-card: 30px;
    --dv-fs-intro: 20px;   --dv-lh-intro: 30px;
  }
}

/* ===========================================================================
 * 2. Base
 * ======================================================================== */
html { scroll-padding-top: calc(var(--dv-header-h) + 16px); -webkit-text-size-adjust: 100%; }
html.scroll-smooth { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--dv-bg) !important;  /* the layout inlines the builder colour on <body> */
  color: var(--dv-text-1);
  font-family: var(--dv-font);
  font-size: 16px;
  line-height: 26px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::selection { background: rgba(139, 124, 255, .4); color: #fff; }
a, button, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--dv-accent-link); outline-offset: 3px; }
[x-cloak] { display: none !important; }
img { max-width: 100%; }
:where(h1, h2, h3) { text-wrap: balance; }
:where(p) { text-wrap: pretty; }
.dv-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.dv-skip { position: fixed; top: 8px; left: 16px; z-index: var(--dv-z-toast); padding: 12px 20px; border-radius: var(--dv-r-control); background: var(--dv-accent); color: var(--dv-on-accent); font-weight: 600; transform: translateY(-200%); }
.dv-skip:focus { transform: none; }
.dv-num { font-variant-numeric: tabular-nums; }

/* ===========================================================================
 * 3. Layout: one container, one section rhythm.
 * ======================================================================== */
.dv-app { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.dv-main { flex: 1 0 auto; min-width: 0; padding-bottom: var(--dv-gap-section); }
.dv-container { width: var(--dv-container); margin-inline: auto; }
/* Native SellAuth markup that still carries `container mx-auto` follows the
   same edges. */
.dv-main .container { width: var(--dv-container); max-width: none; margin-inline: auto; padding-inline: 0; }
/* Sections are separated by one distance; a section never adds its own
   vertical padding on top of it. */
.dv-main > .components > * + *,
.dv-stack > * + * { margin-top: var(--dv-gap-section); }
.dv-main > .components > :first-child:not(.dv-hero) { padding-top: 48px; }
@media (min-width: 1280px) { .dv-main > .components > :first-child:not(.dv-hero) { padding-top: 64px; } }
[id] { scroll-margin-top: calc(var(--dv-header-h) + 16px); }

/* ===========================================================================
 * 4. Type
 * ======================================================================== */
.dv-eyebrow { margin: 0; color: var(--dv-text-2); font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: .12em; text-transform: uppercase; }
.dv-display { margin: 0; font-size: var(--dv-fs-display); font-weight: 600; line-height: var(--dv-lh-display); letter-spacing: -.035em; }
.dv-page-title { margin: 0; font-size: var(--dv-fs-page); font-weight: 600; line-height: var(--dv-lh-page); letter-spacing: -.025em; }
.dv-section-title { margin: 0; font-size: var(--dv-fs-section); font-weight: 600; line-height: var(--dv-lh-section); letter-spacing: -.02em; }
.dv-card-title { margin: 0; font-size: var(--dv-fs-card); font-weight: 600; line-height: var(--dv-lh-card); letter-spacing: -.01em; }
.dv-intro { margin: 0; color: var(--dv-text-2); font-size: var(--dv-fs-intro); line-height: var(--dv-lh-intro); max-width: 68ch; }
.dv-body { color: var(--dv-text-2); font-size: 16px; line-height: 26px; max-width: 68ch; }
.dv-meta { margin: 0; color: var(--dv-text-3); font-size: 14px; line-height: 20px; }
.dv-prose { max-width: 68ch; color: var(--dv-text-2); font-size: 16px; line-height: 26px; overflow-wrap: anywhere; }
.dv-prose > * + * { margin-top: 16px; }
.dv-prose h2, .dv-prose h3, .dv-prose h4 { color: var(--dv-text-1); font-weight: 600; line-height: 1.3; }
.dv-prose h2 { font-size: 24px; } .dv-prose h3 { font-size: 20px; } .dv-prose h4 { font-size: 18px; }
.dv-prose ul, .dv-prose ol { padding-left: 1.25em; }
.dv-prose ul { list-style: disc; } .dv-prose ol { list-style: decimal; }
.dv-prose li + li { margin-top: 8px; }
.dv-prose a { color: var(--dv-accent-link); text-decoration: underline; text-underline-offset: 3px; }
.dv-prose strong { color: var(--dv-text-1); font-weight: 600; }
.dv-prose img { border-radius: var(--dv-r-thumb); }
.dv-prose span[style*="pre-wrap"] { white-space: normal !important; }

.dv-link { color: var(--dv-accent-link); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(169, 155, 255, .45); text-underline-offset: 3px; transition: color var(--dv-t-control) var(--dv-ease), text-decoration-color var(--dv-t-control) var(--dv-ease); }
.dv-link:hover { color: #c4baff; text-decoration-color: currentColor; }
.dv-link--quiet { color: var(--dv-text-1); text-decoration-color: var(--dv-border-control); }
.dv-link--quiet:hover { color: var(--dv-text-1); text-decoration-color: var(--dv-text-1); }
/* Links that can stand alone (lists, rows) get a 44px target. */
.dv-link-row { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }

/* SectionHeader */
.dv-section-head { display: grid; gap: 12px; margin-bottom: 40px; }
.dv-section-head--center { justify-items: center; text-align: center; }
.dv-head-stack { display: grid; gap: 12px; }
.dv-section-head--center .dv-intro { margin-inline: auto; }
.dv-section-head--split { grid-template-columns: minmax(0, 1fr); align-items: end; }
@media (min-width: 1024px) { .dv-section-head--split { grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; } }
@media (max-width: 767px) { .dv-section-head { margin-bottom: 32px; } }

/* ===========================================================================
 * 5. Primitives
 * ======================================================================== */

/* Button: primary (violet), secondary (raised + control border), tertiary
   (a readable label). 52px standard, 56px for hero and purchase, 44px compact. */
.dv-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 24px;
  border: 1px solid transparent; border-radius: var(--dv-r-control);
  background: transparent; color: var(--dv-text-1);
  font: 600 16px/20px var(--dv-font); text-align: center; text-decoration: none;
  cursor: pointer; user-select: none;
  transition: background-color var(--dv-t-control) var(--dv-ease), border-color var(--dv-t-control) var(--dv-ease), color var(--dv-t-control) var(--dv-ease);
}
.dv-btn i, .dv-btn svg { flex: 0 0 auto; width: 20px; font-size: 18px; text-align: center; }
.dv-btn--lg { min-height: 56px; }
.dv-btn--sm { min-height: 44px; padding: 0 16px; font-size: 16px; }
.dv-btn--block { display: flex; width: 100%; }
.dv-btn--primary { background: var(--dv-accent); color: var(--dv-on-accent); }
.dv-btn--primary:hover { background: var(--dv-accent-hover); color: var(--dv-on-accent); }
.dv-btn--primary:active { background: var(--dv-accent-active); }
.dv-btn--secondary { background: var(--dv-surface-raised); border-color: var(--dv-border-control); color: var(--dv-text-1); }
.dv-btn--secondary:hover { background: var(--dv-surface-hover); border-color: var(--dv-text-3); }
.dv-btn--secondary:active { background: var(--dv-surface); }
.dv-btn--tertiary { min-height: 44px; padding: 0 4px; color: var(--dv-text-1); text-decoration: underline; text-decoration-color: var(--dv-border-control); text-underline-offset: 4px; }
.dv-btn--tertiary:hover { text-decoration-color: var(--dv-text-1); }
/* Disabled is real (the element is disabled) and looks inert without fading
   the whole container; a reason is written next to it where one exists. */
.dv-btn:disabled, .dv-btn[aria-disabled="true"] { background: var(--dv-surface-raised); border-color: var(--dv-border-subtle); color: var(--dv-text-3); cursor: not-allowed; }
/* Loading keeps the size: the label is swapped, the width is not. */
.dv-btn[aria-busy="true"] { cursor: progress; }
.dv-spinner { width: 18px; height: 18px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: dv-spin .8s linear infinite; }
@keyframes dv-spin { to { transform: rotate(360deg); } }

.dv-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--dv-border-subtle); border-radius: var(--dv-r-control);
  background: var(--dv-surface); color: var(--dv-text-1); cursor: pointer;
  transition: background-color var(--dv-t-control) var(--dv-ease), border-color var(--dv-t-control) var(--dv-ease);
}
.dv-icon-btn:hover { background: var(--dv-surface-hover); border-color: var(--dv-border-control); }
.dv-icon-btn svg, .dv-icon-btn i { width: 20px; height: 20px; font-size: 18px; line-height: 20px; text-align: center; }
.dv-icon-btn--ghost { border-color: transparent; background: transparent; }

/* Field */
.dv-field { display: grid; gap: 8px; }
.dv-label { color: var(--dv-text-1); font-size: 16px; font-weight: 500; line-height: 20px; }
.dv-helper { margin: 0; color: var(--dv-text-3); font-size: 14px; line-height: 20px; }
.dv-error { margin: 0; color: var(--dv-danger); font-size: 14px; font-weight: 500; line-height: 20px; }
.dv-input, .dv-select {
  width: 100%; min-height: 52px; padding: 0 16px;
  border: 1px solid var(--dv-border-control); border-radius: var(--dv-r-control);
  background: var(--dv-surface); color: var(--dv-text-1);
  font: 400 16px/20px var(--dv-font);
  transition: border-color var(--dv-t-control) var(--dv-ease), background-color var(--dv-t-control) var(--dv-ease);
}
.dv-input::placeholder { color: var(--dv-text-3); opacity: 1; }
.dv-input:hover, .dv-select:hover { border-color: var(--dv-text-3); }
.dv-input:focus-visible, .dv-select:focus-visible { outline: 2px solid var(--dv-accent-link); outline-offset: 1px; border-color: var(--dv-accent-border); }
.dv-input[aria-invalid="true"] { border-color: var(--dv-danger); }
.dv-input--lg { min-height: 56px; }
.dv-input-icon { position: relative; display: block; }
.dv-input-icon > i, .dv-input-icon > svg { position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; color: var(--dv-text-3); transform: translateY(-50%); pointer-events: none; }
.dv-input-icon .dv-input { padding-left: 44px; }

/* Status: a word, always; the dot repeats it. */
.dv-status { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--dv-text-2); font-size: 14px; font-weight: 500; line-height: 20px; }
.dv-status::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--dv-text-3); }
.dv-status--ok::before { background: var(--dv-success); }
.dv-status--warn::before { background: var(--dv-warning); }
.dv-status--neutral::before { background: var(--dv-text-3); }
.dv-status--danger::before { background: var(--dv-danger); }
.dv-status strong { color: var(--dv-text-1); font-weight: 600; }

/* Badge: a short label on a card (Bundle, a SellAuth badge). */
.dv-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 4px 10px; border: 1px solid var(--dv-border-control); border-radius: var(--dv-r-small); background: rgba(10, 10, 12, .82); color: var(--dv-text-1); font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: .08em; text-transform: uppercase; }
.dv-badge i { font-size: 12px; }
.dv-badge[style*="--dv-badge"]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dv-badge); }

/* Price */
.dv-price { color: var(--dv-text-1); font-size: 32px; font-weight: 600; line-height: 38px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.dv-price-from { display: grid; gap: 2px; }
.dv-price-from .dv-meta { color: var(--dv-text-2); }
.dv-price-from strong { color: var(--dv-text-1); font-size: 22px; font-weight: 600; line-height: 28px; font-variant-numeric: tabular-nums; }
.dv-price-from strong small { color: var(--dv-text-2); font-size: 16px; font-weight: 500; }
.dv-strike { color: var(--dv-text-3); font-weight: 400; text-decoration: line-through; font-variant-numeric: tabular-nums; }

/* Dialog: the native <dialog> opened with showModal(), so the page under it
   is inert, Escape closes it and focus stays inside. devin-ui.js returns
   focus to the trigger and closes on a backdrop click. */
.dv-dialog {
  width: min(720px, calc(100vw - 32px));
  max-width: none; max-height: calc(100dvh - 32px);
  margin: auto; padding: 0;
  border: 1px solid var(--dv-border-subtle); border-radius: var(--dv-r-panel);
  background: var(--dv-surface); color: var(--dv-text-1);
  box-shadow: var(--dv-shadow-modal);
  overflow: hidden;
}
.dv-dialog[open] { display: flex; flex-direction: column; animation: dv-dialog-in var(--dv-t-dialog) var(--dv-ease); }
.dv-dialog::backdrop { background: var(--dv-scrim); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.dv-dialog--wide { width: min(880px, calc(100vw - 32px)); }
.dv-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 32px 32px 0; }
.dv-dialog-head > div { display: grid; gap: 8px; min-width: 0; }
.dv-dialog-title { margin: 0; font-size: 28px; font-weight: 600; line-height: 34px; letter-spacing: -.02em; }
.dv-dialog-body { min-height: 0; padding: 24px 32px 32px; overflow-y: auto; overscroll-behavior: contain; }
.dv-dialog-close { margin: -6px -10px 0 0; }
.dv-dialog-title:focus { outline: none; }
.dv-dialog-title:focus-visible { outline: 2px solid var(--dv-accent-link); outline-offset: 3px; border-radius: 4px; }
@keyframes dv-dialog-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 767px) {
  .dv-dialog { width: calc(100vw - 32px); }
  .dv-dialog-head { padding: 24px 24px 0; }
  .dv-dialog-body { padding: 20px 24px 24px; }
  .dv-dialog-title { font-size: 24px; line-height: 30px; }
}
html:has(dialog[open].dv-dialog) { overflow: hidden; }

/* Accordion: native <details>, the whole row is the target. */
.dv-accordion { border-top: 1px solid var(--dv-border-subtle); }
.dv-acc { border-bottom: 1px solid var(--dv-border-subtle); }
.dv-acc > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 76px; padding: 16px 0;
  color: var(--dv-text-1); font-size: 18px; font-weight: 500; line-height: 26px;
  list-style: none; cursor: pointer;
}
.dv-acc > summary::-webkit-details-marker { display: none; }
.dv-acc > summary::after {
  content: ""; flex: 0 0 auto; width: 10px; height: 10px; margin-right: 6px;
  border-right: 2px solid var(--dv-text-2); border-bottom: 2px solid var(--dv-text-2);
  transform: translateY(-3px) rotate(45deg); transition: transform var(--dv-t-control) var(--dv-ease);
}
.dv-acc[open] > summary::after { transform: translateY(3px) rotate(225deg); }
.dv-acc > summary:hover { color: #fff; }
.dv-acc > summary:focus-visible { outline-offset: 2px; border-radius: var(--dv-r-small); }
.dv-acc-body { padding: 0 48px 24px 0; color: var(--dv-text-2); font-size: 16px; line-height: 26px; white-space: pre-line; max-width: 68ch; }
@media (max-width: 767px) { .dv-acc > summary { min-height: 68px; } .dv-acc-body { padding-right: 0; } }

/* Toast: one live region, bottom right, above dialogs. */
.dv-toasts { position: fixed; right: 16px; bottom: 16px; z-index: var(--dv-z-toast); display: grid; gap: 8px; width: min(400px, calc(100vw - 32px)); pointer-events: none; }
.dv-toast { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 12px 12px 12px 20px; border: 1px solid var(--dv-border-control); border-radius: var(--dv-r-control); background: var(--dv-surface-raised); box-shadow: var(--dv-shadow-modal); color: var(--dv-text-1); font-size: 16px; line-height: 22px; pointer-events: auto; animation: dv-dialog-in var(--dv-t-dialog) var(--dv-ease); }
.dv-toast a { flex: 0 0 auto; }

/* EmptyState */
.dv-empty { display: grid; justify-items: start; gap: 16px; padding: 32px; border: 1px dashed var(--dv-border-control); border-radius: var(--dv-r-card); color: var(--dv-text-2); }
.dv-empty strong { color: var(--dv-text-1); font-size: 20px; font-weight: 600; line-height: 28px; }
.dv-empty--center { justify-items: center; text-align: center; }

/* Panel: the one large rounded surface. */
.dv-panel { padding: var(--dv-pad-panel); border: 1px solid var(--dv-border-subtle); border-radius: var(--dv-r-panel); background: var(--dv-surface); }

/* Notice (inline message with a word, not only a colour). */
.dv-notice { display: flex; gap: 12px; padding: 16px; border: 1px solid var(--dv-border-control); border-radius: var(--dv-r-control); background: var(--dv-surface-raised); color: var(--dv-text-2); font-size: 16px; line-height: 24px; }
.dv-notice > i, .dv-notice > svg { flex: 0 0 auto; margin-top: 3px; width: 18px; }
.dv-notice strong { display: block; color: var(--dv-text-1); font-weight: 600; }
.dv-notice--warn { border-color: rgba(244, 193, 104, .55); }
.dv-notice--warn > i { color: var(--dv-warning); }
.dv-notice--danger { border-color: rgba(255, 141, 155, .6); }
.dv-notice--danger > i { color: var(--dv-danger); }

/* ===========================================================================
 * 6. Header: open, aligned to the container, sticky in the flow.
 * ======================================================================== */
.dv-header { position: sticky; top: 0; z-index: var(--dv-z-header); background: rgba(10, 10, 12, .94); border-bottom: 1px solid transparent; transition: border-color var(--dv-t-control) var(--dv-ease), background-color var(--dv-t-control) var(--dv-ease); }
@supports (backdrop-filter: blur(8px)) { .dv-header { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } }
.dv-header.is-stuck { background: rgba(10, 10, 12, .97); border-bottom-color: var(--dv-border-subtle); }
.dv-header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--dv-header-h); }
.dv-brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; min-height: 44px; color: var(--dv-text-1); text-decoration: none; }
.dv-brand img { flex: 0 0 auto; width: 36px; height: 36px; object-fit: contain; }
.dv-brand span { font-size: 20px; font-weight: 600; line-height: 24px; letter-spacing: -.01em; white-space: nowrap; }
.dv-header-bar { display: flex; align-items: center; gap: 8px; }

.dv-nav-links { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.dv-nav-link { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: var(--dv-r-control); color: var(--dv-text-2); font-size: 16px; font-weight: 500; line-height: 20px; text-decoration: none; white-space: nowrap; transition: color var(--dv-t-control) var(--dv-ease), background-color var(--dv-t-control) var(--dv-ease); }
.dv-nav-link:hover { color: var(--dv-text-1); background: var(--dv-surface); }
.dv-nav-link[aria-current="page"] { color: var(--dv-text-1); }
.dv-nav-link[aria-current="page"]::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--dv-accent-border); }
.dv-ext { color: var(--dv-text-3); font-size: 14px; }
.dv-nav-actions { display: flex; align-items: center; gap: 8px; }
.dv-nav-account { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--dv-border-subtle); border-radius: var(--dv-r-control); background: transparent; color: var(--dv-text-1); font: 500 16px/20px var(--dv-font); white-space: nowrap; cursor: pointer; transition: background-color var(--dv-t-control) var(--dv-ease), border-color var(--dv-t-control) var(--dv-ease); text-decoration: none; }
.dv-nav-account:hover { background: var(--dv-surface-hover); border-color: var(--dv-border-control); }
.dv-nav-account i, .dv-nav-account svg { width: 18px; height: 18px; color: var(--dv-text-2); font-size: 15px; }
.dv-cart-btn svg { width: 20px; height: 20px; }
.dv-cart-btn { position: relative; gap: 8px; width: auto; padding: 0 14px; text-decoration: none; }
.dv-cart-btn .dv-cart-label { font-size: 16px; font-weight: 500; }
.dv-cart-count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; background: var(--dv-accent); color: var(--dv-on-accent); font-size: 14px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.dv-menu-btn span { position: absolute; width: 18px; height: 2px; border-radius: 1px; background: currentColor; transition: transform var(--dv-t-control) var(--dv-ease); }
.dv-menu-btn { position: relative; }
.dv-menu-btn span:first-child { transform: translateY(-4px); }
.dv-menu-btn span:last-child { transform: translateY(4px); }
.dv-menu-btn[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.dv-menu-btn[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }

/* One set of markup. Under 1024px the panel is the menu below the bar; from
   1024px it is `display: contents` and its lists become the header's
   centre and right columns. */
.dv-nav-panel .dv-nav-site { display: none; }
@media (min-width: 1024px) {
  /* 1024-1439: brand and controls take what they need and the links are
     centred in what is left; from 1440 the links are centred on the page. */
  .dv-header-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 24px; }
  .dv-header-row > .dv-brand { justify-self: start; }
  .dv-nav-panel nav { justify-self: center; }
  .dv-header-bar { display: none; }
  .dv-nav-panel, .dv-nav-panel[x-cloak] { display: contents !important; }
  .dv-nav-actions { justify-self: end; }
  .dv-nav-panel .dv-nav-support-mobile { display: none; }
}
@media (max-width: 1023px) {
  .dv-nav-panel { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100dvh - var(--dv-header-h)); overflow-y: auto; border-bottom: 1px solid var(--dv-border-subtle); background: var(--dv-bg); }
  .dv-nav-panel:not(.is-open) { display: none; }
  .dv-nav-panel-inner { display: grid; gap: 24px; width: var(--dv-container); margin-inline: auto; padding: 16px 0 32px; }
  .dv-nav-links { flex-direction: column; align-items: stretch; gap: 0; }
  .dv-nav-links li + li { border-top: 1px solid var(--dv-border-subtle); }
  .dv-nav-link { min-height: 56px; padding: 0 4px; font-size: 18px; color: var(--dv-text-1); }
  .dv-nav-link:hover { background: transparent; }
  .dv-nav-link[aria-current="page"]::after { left: auto; right: 4px; top: 50%; bottom: auto; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; }
  .dv-nav-panel .dv-nav-site { display: block; }
  .dv-nav-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .dv-nav-actions .dv-cart-btn { display: none; }
  .dv-nav-account { justify-content: center; min-height: 52px; }
  .dv-brand span { font-size: 18px; }
}
@media (min-width: 1024px) { .dv-nav-panel-inner { display: contents; } }
@media (min-width: 1440px) { .dv-header-row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } }

/* Currency picker (Choices.js, initialised by script.js on every
   `.currency-selector select`). A 44px control that carries its value. */
.dv-currency .choices { margin: 0; overflow: visible; font-family: var(--dv-font); }
.dv-currency .choices__inner { box-sizing: border-box; display: flex; align-items: center; width: 116px; min-height: 44px !important; height: 44px !important; padding: 0 28px 0 12px !important; border: 1px solid var(--dv-border-subtle) !important; border-radius: var(--dv-r-control) !important; background: transparent !important; transition: border-color var(--dv-t-control) var(--dv-ease), background-color var(--dv-t-control) var(--dv-ease); }
.dv-currency .choices:hover .choices__inner, .dv-currency .choices.is-open .choices__inner { border-color: var(--dv-border-control) !important; background: var(--dv-surface-hover) !important; }
.dv-currency .choices.is-focused .choices__inner { outline: 2px solid var(--dv-accent-link); outline-offset: 3px; }
/* built.css (compiled by SellAuth, not reproducible from style.css with the
   CLI pipeline, see REDESIGN-2026-10.md) hides the code and clips the item
   at 50px for the old 80px control; these equal-specificity rules undo that. */
.dv-currency .choices__inner .code { display: inline; }
.dv-currency .choices__inner .choices__item { max-width: none; overflow: visible; }
.dv-currency .choices__list.choices__list--dropdown { margin-left: 0; min-width: 0 !important; }
.dv-currency .choices__inner .choices__list { width: 100%; padding: 0; }
.dv-currency .choices__inner .choices__item { display: flex; align-items: center; gap: 8px; color: var(--dv-text-1); font-size: 16px; font-weight: 500; }
.dv-currency .symbol { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 24px; margin: 0 !important; padding: 0 4px !important; border-radius: 6px; background: var(--dv-surface-raised) !important; color: var(--dv-text-1) !important; font-size: 14px; line-height: 1; white-space: nowrap; }
.dv-currency .code { color: var(--dv-text-1) !important; font-weight: 600; }
.dv-currency .choices__inner .default { display: none !important; }
.dv-currency .choices::after { right: 12px !important; width: 8px; height: 8px; margin-top: -6px !important; border: 0 !important; border-right: 2px solid var(--dv-text-2) !important; border-bottom: 2px solid var(--dv-text-2) !important; transform: rotate(45deg); transition: transform var(--dv-t-control) var(--dv-ease); }
.dv-currency .choices.is-open::after { margin-top: -2px !important; transform: rotate(225deg); }
.dv-currency .choices__list--dropdown { z-index: var(--dv-z-dropdown) !important; left: auto; right: 0; width: 280px !important; max-width: calc(100vw - 32px); margin-top: 8px !important; padding: 8px; border: 1px solid var(--dv-border-control) !important; border-radius: var(--dv-r-control) !important; background: var(--dv-surface-raised) !important; box-shadow: var(--dv-shadow-modal); overflow: hidden; }
.dv-currency .choices__list--dropdown .choices__list { max-height: 320px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--dv-border-control) transparent; }
.dv-currency .choices__list--dropdown .choices__item { display: flex; align-items: center; min-height: 44px; padding: 8px 10px !important; border-radius: var(--dv-r-small); color: var(--dv-text-2); font-size: 16px; line-height: 20px; }
.dv-currency .choices__list--dropdown .choices__item .symbol { margin-right: 10px !important; background: var(--dv-surface) !important; }
.dv-currency .choices__list--dropdown .choices__item .default { margin-left: 8px; color: var(--dv-text-3) !important; font-size: 14px; }
.dv-currency .choices__list--dropdown .choices__item--selectable.is-highlighted { background: var(--dv-surface-hover) !important; color: var(--dv-text-1); }
.dv-currency .choices[data-type] .choices__input { display: block; width: 100%; min-height: 44px; margin: 0 0 8px; padding: 0 12px; border: 1px solid var(--dv-border-control) !important; border-radius: var(--dv-r-small); background: var(--dv-surface) !important; color: var(--dv-text-1); font-size: 16px; }
.dv-currency .choices[data-type] .choices__input:focus { border-color: var(--dv-accent-border) !important; }
@media (max-width: 1023px) {
  .dv-currency .choices, .dv-currency .choices__inner { width: 100% !important; }
  .dv-currency .choices__inner { min-height: 52px !important; height: 52px !important; }
  .dv-currency .choices__list--dropdown { left: 0; right: 0; width: auto !important; }
}

/* ===========================================================================
 * 7. Footer: full width, the content on the container.
 * ======================================================================== */
.dv-footer { margin-top: auto; padding: 40px 0; border-top: 1px solid var(--dv-border-subtle); background: var(--dv-surface); color: var(--dv-text-2); }
@media (min-width: 1024px) { .dv-footer { padding: 64px 0; } }
.dv-footer-grid { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .dv-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .dv-footer-grid { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 48px; } }
.dv-footer-brand { display: grid; gap: 16px; align-content: start; }
.dv-footer-brand p { margin: 0; max-width: 40ch; font-size: 16px; line-height: 26px; }
.dv-footer h2 { margin: 0 0 12px; color: var(--dv-text-1); font-size: 16px; font-weight: 600; line-height: 24px; }
.dv-footer ul { margin: 0; padding: 0; list-style: none; }
.dv-footer li a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--dv-text-2); font-size: 16px; line-height: 24px; text-decoration: none; }
.dv-footer li a:hover { color: var(--dv-text-1); text-decoration: underline; text-underline-offset: 4px; }
.dv-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--dv-border-subtle); font-size: 14px; line-height: 20px; }
.dv-footer-bottom a { color: var(--dv-text-2); }
.dv-socials { display: flex; gap: 8px; }

/* ===========================================================================
 * 8. Home
 * ======================================================================== */

/* Hero: split from 1024px, text 55 / artwork 45. Height follows content. */
.dv-hero { position: relative; padding: 48px 0 32px; overflow-x: clip; }
.dv-hero-grid { display: grid; gap: 40px; }
.dv-hero-copy { display: grid; gap: 24px; justify-items: start; }
.dv-hero .dv-display span { display: block; }
.dv-hero .dv-intro { max-width: 56ch; }
.dv-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.dv-hero-art { position: relative; margin: 0; isolation: isolate; }
/* The one light on the site: static, violet, at most 10% opacity. */
/* The halo is wider than the image so that the ring around it, the part
   that shows, carries the colour. */
.dv-hero-art::before { content: ""; position: absolute; z-index: -1; inset: -45% -30%; background: radial-gradient(ellipse 50% 50% at 52% 50%, rgba(var(--dv-tint-violet), .20) 0%, rgba(var(--dv-tint-violet), .10) 45%, transparent 100%), radial-gradient(ellipse 35% 40% at 80% 25%, rgba(var(--dv-tint-blue), .14), transparent 100%); pointer-events: none; }
.dv-hero-art img { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 914; border: 1px solid var(--dv-border-subtle); border-radius: var(--dv-r-card); background: var(--dv-surface); }
.dv-hero-art figcaption { margin-top: 12px; }
@media (max-width: 767px) { .dv-hero-actions .dv-btn { width: 100%; } }
@media (min-width: 1024px) {
  .dv-hero { display: flex; align-items: center; min-height: 600px; padding: 64px 0; }
  .dv-hero-grid { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); align-items: center; gap: 64px; }
}
.dv-main > .components > .dv-hero + * { margin-top: 0; }

/* Benefits: three facts in a row, no outer cards. */
.dv-benefits { padding-top: 8px; }
.dv-benefit-list { display: grid; gap: 32px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .dv-benefit-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }
.dv-benefit { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 20px; align-items: start; }
@media (min-width: 768px) and (max-width: 1279px) { .dv-benefit { grid-template-columns: minmax(0, 1fr); } }
.dv-benefit-icon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border: 1px solid var(--dv-border-subtle); border-radius: var(--dv-r-icon); background: var(--dv-surface); color: var(--dv-accent-link); }
.dv-benefit-icon i, .dv-benefit-icon svg { width: 24px; font-size: 22px; text-align: center; }
.dv-benefit h3 { margin: 0 0 8px; font-size: 20px; font-weight: 600; line-height: 28px; }
@media (min-width: 1280px) { .dv-benefit h3 { font-size: 22px; line-height: 28px; } }
.dv-benefit p { margin: 0; color: var(--dv-text-2); font-size: 16px; line-height: 26px; }

/* CategoryTile: the games, one link each, no price. */
.dv-tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--dv-gap-grid); margin: 0; padding: 0; list-style: none; }
@media (min-width: 360px) { .dv-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .dv-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dv-tile { position: relative; display: flex; flex-direction: column; min-height: 160px; height: 100%; overflow: hidden; border: 1px solid var(--dv-border-subtle); border-radius: var(--dv-r-card); background: var(--dv-surface); color: var(--dv-text-1); text-decoration: none; transition: border-color var(--dv-t-card) var(--dv-ease), background-color var(--dv-t-card) var(--dv-ease), transform var(--dv-t-card) var(--dv-ease), box-shadow var(--dv-t-card) var(--dv-ease); }
@media (min-width: 1024px) { .dv-tile { min-height: 200px; } }
.dv-tile-media { aspect-ratio: 16 / 10; background: #0d0b14; }
.dv-tile-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dv-tile-name { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 1; padding: 16px 20px; font-size: 18px; font-weight: 600; line-height: 24px; }
@media (min-width: 1280px) { .dv-tile-name { padding: 20px 24px; font-size: 20px; line-height: 28px; } }
.dv-tile-name svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--dv-text-2); transition: transform var(--dv-t-card) var(--dv-ease), color var(--dv-t-card) var(--dv-ease); }
@media (max-width: 479px) { .dv-tile-name { padding: 12px 14px; font-size: 16px; } .dv-tile-name svg { display: none; } }
.dv-section-foot { display: flex; justify-content: center; margin-top: 32px; }

/* Master Package: one dedicated block. */
.dv-bundle { display: grid; gap: 32px; padding: var(--dv-pad-panel); border: 1px solid var(--dv-border-subtle); border-radius: var(--dv-r-panel); background: var(--dv-surface); }
@media (min-width: 1024px) { .dv-bundle { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; } }
.dv-bundle-art { margin: 0; border-radius: var(--dv-r-card); overflow: hidden; background: #120c1d; aspect-ratio: 4 / 5; max-height: 560px; }
@media (max-width: 1023px) { .dv-bundle-art { aspect-ratio: 16 / 10; } }
.dv-bundle-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.dv-bundle-copy { display: grid; gap: 24px; align-content: start; }
.dv-bundle-games { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--dv-border-subtle); }
@media (min-width: 640px) { .dv-bundle-games { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } }
.dv-bundle-games li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; border-bottom: 1px solid var(--dv-border-subtle); color: var(--dv-text-1); font-size: 16px; font-weight: 500; }
.dv-bundle-terms { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; color: var(--dv-text-2); }
.dv-bundle-terms li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; font-size: 16px; line-height: 24px; }
.dv-bundle-terms li i { margin-top: 4px; color: var(--dv-text-3); }
.dv-bundle-terms li.is-warn i { color: var(--dv-warning); }
.dv-bundle-buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding-top: 24px; border-top: 1px solid var(--dv-border-subtle); }
.dv-bundle-buy-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 639px) { .dv-bundle-buy-actions, .dv-bundle-buy-actions .dv-btn { width: 100%; } }

/* FAQ / help: 40 / 60, intro left, accordion right. */
.dv-faq { display: grid; gap: 32px; }
@media (min-width: 1024px) { .dv-faq { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 64px; } }
.dv-faq-intro { display: grid; gap: 16px; align-content: start; justify-items: start; }
@media (min-width: 1024px) { .dv-faq-intro { position: sticky; top: calc(var(--dv-header-h) + 32px); } }

/* ===========================================================================
 * 9. Catalogue and ProductCard
 * ======================================================================== */
.dv-catalog-head { display: grid; justify-items: center; gap: 16px; margin-bottom: 40px; text-align: center; }
.dv-catalog-head .dv-intro { margin-inline: auto; }
.dv-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-bottom: 40px; }
.dv-search { width: 100%; }
@media (min-width: 768px) { .dv-search { width: 320px; } }
.dv-filters { position: relative; }
.dv-filters > summary { list-style: none; }
.dv-filters > summary::-webkit-details-marker { display: none; }
.dv-filters[open] > summary { border-color: var(--dv-accent-border); }
.dv-filter-panel { position: absolute; z-index: var(--dv-z-dropdown); top: calc(100% + 8px); right: 0; width: min(360px, calc(100vw - 40px)); padding: 20px; border: 1px solid var(--dv-border-control); border-radius: var(--dv-r-control); background: var(--dv-surface-raised); box-shadow: var(--dv-shadow-modal); }
@media (max-width: 767px) { .dv-filter-panel { left: 50%; right: auto; transform: translateX(-50%); } }
.dv-filter-panel form { display: grid; gap: 16px; }
.dv-filter-panel fieldset { margin: 0; padding: 0; border: 0; }
.dv-filter-panel legend { margin-bottom: 8px; color: var(--dv-text-1); font-size: 16px; font-weight: 500; }
.dv-filter-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dv-filter-actions { display: flex; gap: 12px; }
.dv-filter-actions > * { flex: 1; }
.dv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dv-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--dv-border-subtle); border-radius: var(--dv-r-control); color: var(--dv-text-2); font-size: 16px; font-weight: 500; text-decoration: none; }
.dv-chip[aria-current="page"], .dv-chip[aria-pressed="true"] { border-color: var(--dv-accent-border); background: var(--dv-accent-subtle); color: var(--dv-text-1); }
a.dv-chip:hover { border-color: var(--dv-border-control); color: var(--dv-text-1); }
.dv-active-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: -16px 0 32px; }

.dv-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--dv-gap-grid); }
@media (min-width: 640px) { .dv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .dv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dv-grid-item { min-width: 0; }
.dv-catalog-section + .dv-catalog-section { margin-top: var(--dv-gap-section); }
.dv-catalog-section:not(:has(.dv-grid-item:not([style*="display: none"]))) { display: none; }

.dv-pcard { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--dv-border-subtle); border-radius: var(--dv-r-card); background: var(--dv-surface); transition: border-color var(--dv-t-card) var(--dv-ease), background-color var(--dv-t-card) var(--dv-ease), transform var(--dv-t-card) var(--dv-ease), box-shadow var(--dv-t-card) var(--dv-ease); }
.dv-pcard-media { position: relative; display: block; aspect-ratio: 16 / 9; background: #0d0b14; overflow: hidden; }
.dv-pcard-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dv-pcard-media.is-contain img { object-fit: contain; }
.dv-pcard-badges { position: absolute; top: 16px; left: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.dv-pcard-body { display: flex; flex-direction: column; gap: 12px; flex: 1; padding: var(--dv-pad-card); }
.dv-pcard-title a { display: inline-block; padding: 7px 0; color: inherit; text-decoration: none; }
.dv-pcard-title { margin: -7px 0; }
.dv-title-btn { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.dv-title-btn:hover { text-decoration: underline; text-underline-offset: 4px; }
.dv-pcard-title a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.dv-pcard-states { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.dv-pcard-note { margin: 0; color: var(--dv-text-2); font-size: 16px; line-height: 24px; }
.dv-pcard-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 20px; border-top: 1px solid var(--dv-border-subtle); }
.dv-pcard-foot .dv-btn { flex: 0 0 auto; }
@media (max-width: 379px) { .dv-pcard-foot .dv-btn { width: 100%; } }
.dv-pcard--hold .dv-pcard-media img { opacity: .72; }
.dv-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--dv-text-3); font-size: 32px; font-weight: 600; }

@media (hover: hover) and (pointer: fine) {
  .dv-pcard:hover, .dv-tile:hover { border-color: var(--dv-border-control); background: var(--dv-surface-raised); box-shadow: var(--dv-shadow-hover); transform: translateY(-2px); }
  .dv-tile:hover .dv-tile-name svg { color: var(--dv-text-1); transform: translateX(2px); }
}
.dv-tile:focus-visible { outline-offset: 4px; }

.dv-hold-head { display: grid; gap: 8px; margin-bottom: 32px; }

/* Quick buy */
.dv-qb-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.dv-qb-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--dv-border-subtle); }

/* ===========================================================================
 * 10. Product page: one large panel.
 * ======================================================================== */
.dv-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 24px; padding: 0; list-style: none; color: var(--dv-text-3); font-size: 14px; line-height: 20px; }
.dv-crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--dv-text-2); text-decoration: none; }
.dv-crumbs a:hover { color: var(--dv-text-1); text-decoration: underline; text-underline-offset: 3px; }
.dv-crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--dv-text-3); }
.dv-crumbs [aria-current] { color: var(--dv-text-1); }

.dv-pdp { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "media" "buy"; gap: 24px; padding: var(--dv-pad-panel); border: 1px solid var(--dv-border-subtle); border-radius: var(--dv-r-panel); background: var(--dv-surface); }
.dv-pdp-head { grid-area: head; display: grid; gap: 12px; align-content: start; }
.dv-pdp-media { grid-area: media; min-width: 0; }
.dv-pdp-buy { grid-area: buy; min-width: 0; display: grid; gap: 24px; align-content: start; }
@media (min-width: 1024px) {
  .dv-pdp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "media head" "media buy"; column-gap: 48px; row-gap: 24px; }
  .dv-pdp-media { align-self: start; position: sticky; top: calc(var(--dv-header-h) + 24px); }
}
.dv-pdp-states { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
.dv-pdp-states a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; }
.dv-needs { margin: 0; padding: 16px 20px; border: 1px solid var(--dv-border-subtle); border-radius: var(--dv-r-control); background: var(--dv-surface-raised); color: var(--dv-text-2); font-size: 16px; line-height: 24px; }
.dv-needs strong { display: block; margin-bottom: 4px; color: var(--dv-text-1); font-weight: 600; }
.dv-needs a { white-space: nowrap; }
.dv-pdp-summary { margin: 0; color: var(--dv-text-2); font-size: 16px; line-height: 26px; }

/* ProductGallery */
.dv-gallery-frame { position: relative; overflow: hidden; border-radius: var(--dv-r-card); background: #0d0b14; aspect-ratio: 16 / 10; }
.dv-gallery .splide, .dv-gallery .splide__track, .dv-gallery .splide__list { height: 100%; }
.dv-gallery .splide__slide { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: #0d0b14; }
.dv-gallery .splide__slide img, .dv-gallery-frame > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dv-gallery .is-contain img { object-fit: contain; }
.dv-gallery .is-master img, .dv-gallery-frame.is-master img { object-fit: contain; }
.dv-gallery .splide__arrow { width: 44px; height: 44px; border: 1px solid var(--dv-border-control); border-radius: var(--dv-r-control); background: rgba(10, 10, 12, .82); opacity: 1; }
.dv-gallery .splide__arrow svg { width: 16px; height: 16px; fill: var(--dv-text-1); }
.dv-gallery .splide__arrow:disabled { opacity: 0; pointer-events: none; }
.dv-gallery .splide__arrow:hover:not(:disabled) { background: var(--dv-surface-hover); }
.dv-gallery .splide__arrow--prev { left: 12px; } .dv-gallery .splide__arrow--next { right: 12px; }
.dv-gallery-count { position: absolute; right: 12px; bottom: 12px; z-index: 2; padding: 4px 10px; border-radius: var(--dv-r-small); background: rgba(10, 10, 12, .82); color: var(--dv-text-1); font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums; pointer-events: none; }
.dv-thumbs { display: flex; gap: 12px; margin: 12px 0 0; padding: 2px; list-style: none; overflow-x: auto; scrollbar-width: thin; }
.dv-thumb { position: relative; display: block; width: 102px; height: 64px; padding: 0; overflow: hidden; border: 1px solid var(--dv-border-subtle); border-radius: var(--dv-r-thumb); background: #0d0b14; cursor: pointer; }
.dv-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dv-thumb[aria-current="true"] { border-color: var(--dv-accent-border); box-shadow: inset 0 0 0 1px var(--dv-accent-border); }
.dv-thumb-tag { position: absolute; left: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 6px; background: rgba(10, 10, 12, .86); color: var(--dv-text-1); font-size: 12px; font-weight: 600; line-height: 16px; }
.dv-video-poster { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.dv-video-poster img { width: 100%; height: 100%; object-fit: cover; }
.dv-video-play { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: var(--dv-accent); color: var(--dv-on-accent); transition: background-color var(--dv-t-control) var(--dv-ease); }
.dv-video-poster:hover .dv-video-play { background: var(--dv-accent-hover); }
.dv-video-title { position: absolute; left: 16px; right: 16px; bottom: 16px; padding: 6px 10px; border-radius: var(--dv-r-small); background: rgba(10, 10, 12, .82); color: var(--dv-text-1); font-size: 14px; font-weight: 500; line-height: 20px; text-align: left; width: fit-content; max-width: calc(100% - 32px); }
.dv-gallery .is-playing .dv-video-poster { display: none; }
.dv-gallery .is-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.dv-video-yt { position: absolute; top: 12px; right: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 14px; border-radius: var(--dv-r-small); background: rgba(10, 10, 12, .82); color: var(--dv-text-1); font-size: 14px; font-weight: 500; text-decoration: none; }
.dv-video-yt:hover { background: var(--dv-surface-hover); }
.dv-live-stats { display: grid; gap: 8px; }
.dv-upsells { display: grid; gap: 32px; margin-top: var(--dv-gap-section); }
.dv-bundle-label { margin: 0 0 8px; }

/* Under the panel: sections with anchors. */
.dv-pdp-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 40px 0 0; padding: 0; list-style: none; }
.dv-pdp-sections { display: grid; gap: 56px; margin-top: 40px; }
.dv-pdp-section { display: grid; gap: 20px; max-width: 880px; }
.dv-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; color: var(--dv-text-2); font-size: 16px; line-height: 26px; max-width: 68ch; }
.dv-list li { position: relative; padding-left: 28px; }
.dv-list li::before { content: ""; position: absolute; left: 4px; top: 10px; width: 8px; height: 8px; border-radius: 2px; background: var(--dv-text-3); }
.dv-list--links li::before { top: 18px; }
.dv-list--steps { counter-reset: dv-step; }
.dv-list--steps li { counter-increment: dv-step; padding-left: 40px; }
.dv-list--steps li::before { content: counter(dv-step); top: 0; left: 0; width: 28px; height: 28px; border: 1px solid var(--dv-border-control); border-radius: 8px; background: transparent; color: var(--dv-text-1); font-size: 14px; font-weight: 600; line-height: 26px; text-align: center; }
.dv-optional { display: flex; gap: 12px; margin: 0; color: var(--dv-text-2); font-size: 16px; line-height: 26px; max-width: 68ch; }
.dv-tag { flex: 0 0 auto; align-self: flex-start; margin-top: 2px; padding: 2px 8px; border: 1px solid var(--dv-border-control); border-radius: 6px; color: var(--dv-text-1); font-size: 12px; font-weight: 600; line-height: 18px; letter-spacing: .08em; text-transform: uppercase; }

/* ===========================================================================
 * 11. Purchase form (PDP and quick buy share it)
 * ======================================================================== */
.dv-order { display: grid; gap: 24px; }
.dv-order fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.dv-order legend { margin-bottom: 12px; padding: 0; color: var(--dv-text-1); font-size: 16px; font-weight: 600; line-height: 20px; }

/* PlanSelector: native radios in card labels. Columns follow the space the
   selector actually has (a container query), never more than two for four
   or more plans, and one under 400px. */
.dv-plans-wrap { container-type: inline-size; }
.dv-plans { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@container (min-width: 400px) { .dv-plans:not([data-count="1"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 560px) { .dv-plans[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dv-plan {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name radio" "price price" "note note";
  align-content: start; gap: 8px;
  min-height: 104px; padding: 16px;
  border: 1px solid var(--dv-border-control); border-radius: var(--dv-r-control);
  background: var(--dv-surface); cursor: pointer;
  transition: border-color var(--dv-t-control) var(--dv-ease), background-color var(--dv-t-control) var(--dv-ease), box-shadow var(--dv-t-control) var(--dv-ease);
}
.dv-plan:hover { border-color: var(--dv-text-3); background: var(--dv-surface-raised); }
.dv-plan-name { grid-area: name; color: var(--dv-text-1); font-size: 16px; font-weight: 600; line-height: 22px; }
.dv-plan-price { grid-area: price; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; color: var(--dv-text-1); font-size: 26px; font-weight: 600; line-height: 32px; font-variant-numeric: tabular-nums; }
.dv-plan-price .dv-strike { font-size: 16px; line-height: 20px; }
.dv-plan-note { grid-area: note; color: var(--dv-text-2); font-size: 14px; line-height: 20px; }
.dv-plan-note.is-warn { color: var(--dv-warning); }
/* The native radio, drawn: 20px, readable when checked and when disabled. */
.dv-plan input[type="radio"] { grid-area: radio; appearance: none; -webkit-appearance: none; display: grid; place-content: center; width: 20px; height: 20px; margin: 1px 0 0; border: 2px solid var(--dv-border-control); border-radius: 50%; background: var(--dv-bg); cursor: pointer; }
.dv-plan input[type="radio"]::before { content: ""; width: 10px; height: 10px; border-radius: 50%; transform: scale(0); background: var(--dv-on-accent); transition: transform var(--dv-t-control) var(--dv-ease); }
.dv-plan input[type="radio"]:checked { border-color: var(--dv-accent-border); background: var(--dv-accent); }
.dv-plan input[type="radio"]:checked::before { transform: scale(1); }
.dv-plan input[type="radio"]:focus-visible { outline: none; }
.dv-plan:has(input:focus-visible) { outline: 2px solid var(--dv-accent-link); outline-offset: 3px; }
/* Selected: 2px edge without moving anything (1px border + 1px inner ring). */
.dv-plan:has(input:checked) { border-color: var(--dv-accent-border); background: var(--dv-accent-subtle); box-shadow: inset 0 0 0 1px var(--dv-accent-border); }
.dv-plan:has(input:disabled) { border-style: dashed; border-color: var(--dv-border-subtle); background: transparent; cursor: not-allowed; }
.dv-plan:has(input:disabled) .dv-plan-price { color: var(--dv-text-3); }
.dv-plan input:disabled { border-color: var(--dv-border-subtle); cursor: not-allowed; }
/* One column, compact: name and radio on the left, price on the right. */
@container (max-width: 399px) {
  .dv-plan { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "radio name price" "radio note note"; align-items: center; min-height: 80px; column-gap: 14px; row-gap: 2px; }
  .dv-plan input[type="radio"] { align-self: center; }
  .dv-plan-price { justify-content: flex-end; font-size: 22px; line-height: 28px; }
}
.dv-plans[data-count="1"] .dv-plan { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "radio name price" "radio note note"; align-items: center; min-height: 80px; column-gap: 14px; }

.dv-licence { margin: 0; color: var(--dv-text-2); font-size: 14px; line-height: 22px; }

/* QuantityControl */
.dv-qty-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.dv-qty { display: inline-flex; align-items: center; border: 1px solid var(--dv-border-control); border-radius: var(--dv-r-control); background: var(--dv-surface); }
.dv-qty button { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: transparent; color: var(--dv-text-1); font-size: 20px; line-height: 1; cursor: pointer; border-radius: var(--dv-r-control); }
.dv-qty button:hover:not(:disabled) { background: var(--dv-surface-hover); }
.dv-qty button:disabled { color: var(--dv-text-3); cursor: not-allowed; }
.dv-qty input { width: 56px; height: 44px; border: 0; background: transparent; color: var(--dv-text-1); font: 600 16px/20px var(--dv-font); text-align: center; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.dv-qty input::-webkit-outer-spin-button, .dv-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dv-qty input:focus-visible { outline: 2px solid var(--dv-accent-link); outline-offset: -2px; border-radius: 6px; }
.dv-qty-fixed { color: var(--dv-text-2); font-size: 16px; }

.dv-total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding-top: 20px; border-top: 1px solid var(--dv-border-subtle); }
.dv-total-label { color: var(--dv-text-2); font-size: 16px; font-weight: 500; }
.dv-total-each { color: var(--dv-text-3); font-size: 14px; }
.dv-actions { display: grid; gap: 12px; }
@media (min-width: 640px) { .dv-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.dv-actions .dv-btn { width: 100%; }
.dv-order-notes { display: grid; gap: 8px; }
.dv-pay-line { margin: 0; color: var(--dv-text-3); font-size: 14px; line-height: 20px; }
.dv-trial-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 16px 20px; border: 1px solid var(--dv-border-subtle); border-radius: var(--dv-r-control); color: var(--dv-text-2); font-size: 16px; line-height: 24px; }
.dv-trial-row strong { color: var(--dv-text-1); font-weight: 600; }
.dv-hold-panel { display: grid; gap: 16px; padding: 20px; border: 1px solid var(--dv-border-control); border-radius: var(--dv-r-control); background: var(--dv-surface-raised); color: var(--dv-text-2); }
.dv-hold-panel .dv-actions { grid-template-columns: none; }
@media (min-width: 640px) { .dv-hold-panel .dv-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Native SellAuth blocks kept inside the form (addons, deals, bundle offers,
   captcha) take the panel's colours. */
.dv-order .dv-native { display: grid; gap: 12px; padding-top: 20px; border-top: 1px solid var(--dv-border-subtle); }
.dv-order altcha-widget { --altcha-color-base: var(--dv-surface-raised); --altcha-color-border: var(--dv-border-control); --altcha-color-text: var(--dv-text-1); --altcha-border-radius: 14px; --altcha-max-width: 100%; }

/* ===========================================================================
 * 12. Reviews
 * ======================================================================== */
.dv-review-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--dv-gap-grid); }
@media (min-width: 640px) { .dv-review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .dv-review-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dv-review { display: flex; flex-direction: column; gap: 16px; padding: 24px; border: 1px solid var(--dv-border-subtle); border-radius: var(--dv-r-card); background: var(--dv-surface); }
.dv-review-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.dv-rating { display: inline-flex; align-items: center; gap: 10px; color: var(--dv-text-1); font-size: 14px; font-weight: 600; line-height: 20px; }
.dv-stars { display: inline-flex; gap: 2px; color: var(--dv-text-1); }
.dv-stars svg { width: 18px; height: 18px; }
.dv-stars .is-empty { color: var(--dv-border-control); }
.dv-review-message { margin: 0; color: var(--dv-text-1); font-size: 18px; line-height: 28px; overflow-wrap: anywhere; }
.dv-review-product { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--dv-border-subtle); }
.dv-review-reply { padding: 12px 16px; border-left: 2px solid var(--dv-border-control); background: var(--dv-surface-raised); border-radius: 0 var(--dv-r-small) var(--dv-r-small) 0; color: var(--dv-text-2); font-size: 16px; line-height: 24px; }
.dv-review img { width: 100%; max-height: 256px; object-fit: cover; border-radius: var(--dv-r-thumb); }
.dv-auto { margin-top: 56px; }
.dv-auto-list { margin: 16px 0 0; padding: 0; list-style: none; border: 1px solid var(--dv-border-subtle); border-radius: var(--dv-r-card); background: var(--dv-surface); overflow: hidden; }
.dv-auto-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 56px; padding: 8px 24px; color: var(--dv-text-2); font-size: 16px; line-height: 22px; }
.dv-auto-list li + li { border-top: 1px solid var(--dv-border-subtle); }
.dv-auto-list time { color: var(--dv-text-3); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 639px) { .dv-auto-list li { grid-template-columns: minmax(0, 1fr) auto; } .dv-auto-list li .dv-stars { grid-column: 1 / -1; } }
.dv-sort .choices { min-width: 240px; margin: 0; }
.dv-sort .choices__inner { min-height: 52px; display: flex; align-items: center; border: 1px solid var(--dv-border-control) !important; border-radius: var(--dv-r-control) !important; background: var(--dv-surface) !important; color: var(--dv-text-1); font-size: 16px; }
.dv-sort .choices__list--dropdown { z-index: var(--dv-z-dropdown) !important; border: 1px solid var(--dv-border-control) !important; border-radius: var(--dv-r-control) !important; background: var(--dv-surface-raised) !important; }
.dv-sort .choices__list--dropdown .choices__item { min-height: 44px; display: flex; align-items: center; font-size: 16px; color: var(--dv-text-2); }
.dv-sort .choices__list--dropdown .choices__item.is-highlighted { background: var(--dv-surface-hover) !important; color: var(--dv-text-1); }

/* ===========================================================================
 * 13. Cart
 * ======================================================================== */
.dv-cart { display: grid; gap: 32px; align-items: start; }
@media (min-width: 1024px) { .dv-cart { grid-template-columns: minmax(0, 1fr) 400px; gap: 48px; } }
.dv-cart-list { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.dv-cart-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px 20px; padding: 20px; border: 1px solid var(--dv-border-subtle); border-radius: var(--dv-r-card); background: var(--dv-surface); }
@media (min-width: 768px) { .dv-cart-row { grid-template-columns: 160px minmax(0, 1fr) auto; align-items: center; padding: 24px; } }
.dv-cart-thumb { aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--dv-r-thumb); background: #0d0b14; }
.dv-cart-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dv-cart-info { display: grid; gap: 4px; min-width: 0; }
.dv-cart-info a { color: var(--dv-text-1); font-size: 18px; font-weight: 600; line-height: 24px; text-decoration: none; overflow-wrap: anywhere; }
.dv-cart-info a:hover { text-decoration: underline; text-underline-offset: 4px; }
.dv-cart-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; grid-column: 1 / -1; }
@media (min-width: 768px) { .dv-cart-controls { grid-column: auto; justify-content: flex-end; } }
.dv-cart-price { min-width: 88px; color: var(--dv-text-1); font-size: 18px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.dv-cart-addons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.dv-cart-addons span { padding: 2px 8px; border: 1px solid var(--dv-border-subtle); border-radius: 6px; color: var(--dv-text-2); font-size: 14px; }
.dv-summary { display: grid; gap: 20px; }
.dv-summary-form { display: grid; gap: 20px; }
.dv-cart-main { display: grid; gap: 16px; min-width: 0; }
.dv-offer { display: grid; gap: 12px; padding-top: 20px; border-top: 1px solid var(--dv-border-subtle); }
@media (min-width: 1024px) { .dv-summary { position: sticky; top: calc(var(--dv-header-h) + 24px); } }
.dv-summary dl { display: grid; gap: 12px; margin: 0; }
.dv-summary dl > div { display: flex; justify-content: space-between; gap: 16px; color: var(--dv-text-2); font-size: 16px; }
.dv-summary dd { margin: 0; color: var(--dv-text-1); font-variant-numeric: tabular-nums; }
.dv-summary .dv-discount dd { color: var(--dv-success); }
.dv-summary-total { padding-top: 16px; border-top: 1px solid var(--dv-border-subtle); }
.dv-summary-total dt { color: var(--dv-text-1); font-weight: 600; }
.dv-summary-total dd { font-size: 24px; font-weight: 600; }
.dv-loading { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 120px; color: var(--dv-text-2); }

/* ===========================================================================
 * 14. Login dialog (SellAuth OTP / password / 2FA flow, unchanged)
 * ======================================================================== */
.dv-login .dv-input { min-height: 56px; }
.dv-login form { display: grid; gap: 20px; }
.dv-otp { display: grid; grid-template-columns: repeat(6, minmax(0, 56px)); gap: 8px; }
.dv-otp input { width: 100%; height: 56px; padding: 0; border: 1px solid var(--dv-border-control); border-radius: var(--dv-r-control); background: var(--dv-surface-raised); color: var(--dv-text-1); font: 600 22px/1 var(--dv-font); text-align: center; font-variant-numeric: tabular-nums; }
.dv-otp input:focus-visible { outline: 2px solid var(--dv-accent-link); outline-offset: 1px; border-color: var(--dv-accent-border); }
.dv-login .dv-switch { justify-self: center; }
.dv-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.dv-warn-icon { color: var(--dv-warning); }
.dv-login altcha-widget { --altcha-color-base: var(--dv-surface-raised); --altcha-color-border: var(--dv-border-control); --altcha-color-text: var(--dv-text-1); --altcha-border-radius: 14px; --altcha-max-width: 100%; }

/* ===========================================================================
 * 15. Account area and native SellAuth markup.
 *
 * Account templates keep SellAuth's markup and logic; their structure uses
 * the dv-account classes and the utility classes they still carry are mapped
 * to the same tokens here, so no second palette survives.
 * ======================================================================== */
.dv-account { display: grid; gap: 32px; align-items: start; }
@media (min-width: 1024px) { .dv-account { grid-template-columns: 300px minmax(0, 1fr); gap: 48px; } }
.dv-account-nav { display: grid; gap: 20px; padding: 24px; border: 1px solid var(--dv-border-subtle); border-radius: var(--dv-r-card); background: var(--dv-surface); }
@media (min-width: 1024px) { .dv-account-nav { position: sticky; top: calc(var(--dv-header-h) + 24px); } }
.dv-account-nav ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.dv-account-nav a, .dv-account-nav button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--dv-r-small); background: transparent; color: var(--dv-text-2); font: 500 16px/20px var(--dv-font); text-align: left; text-decoration: none; cursor: pointer; }
.dv-account-nav a:hover, .dv-account-nav button:hover { background: var(--dv-surface-hover); color: var(--dv-text-1); }
.dv-account-nav a[aria-current="page"] { background: var(--dv-accent-subtle); color: var(--dv-text-1); box-shadow: inset 2px 0 0 var(--dv-accent-border); }
.dv-account-main { display: grid; gap: 24px; min-width: 0; }
.dv-account-card { padding: var(--dv-pad-card); border: 1px solid var(--dv-border-subtle); border-radius: var(--dv-r-card); background: var(--dv-surface); min-width: 0; }
.dv-account-card > h2, .dv-account-card > h3 { margin: 0 0 16px; color: var(--dv-text-1); font-size: 22px; font-weight: 600; line-height: 28px; }
.dv-table-wrap { overflow-x: auto; border: 1px solid var(--dv-border-subtle); border-radius: var(--dv-r-control); }
.dv-table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 22px; color: var(--dv-text-2); }
.dv-table th { padding: 12px 16px; background: var(--dv-surface-raised); color: var(--dv-text-1); font-size: 14px; font-weight: 600; text-align: left; white-space: nowrap; }
.dv-table td { padding: 14px 16px; border-top: 1px solid var(--dv-border-subtle); vertical-align: middle; }
.dv-table td a { color: var(--dv-accent-link); }
@media (max-width: 767px) {
  .dv-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .dv-table--stack tr { display: grid; gap: 6px; padding: 16px; border-top: 1px solid var(--dv-border-subtle); }
  .dv-table--stack tr:first-child { border-top: 0; }
  .dv-table--stack td { display: grid; grid-template-columns: minmax(80px, 35%) minmax(0, 1fr); gap: 12px; padding: 0; border: 0; white-space: normal; overflow-wrap: anywhere; }
  /* A stacked row has the full width: a cell that never wraps in the wide
     table (dates, amounts) may wrap here. */
  .dv-table--stack .whitespace-nowrap, .dv-table--stack .dv-pill { white-space: normal; }
  .dv-table--stack .dv-pill { max-width: 100%; justify-self: start; }
  .dv-table--stack td::before { content: attr(data-label); color: var(--dv-text-3); font-size: 14px; }
  .dv-table-wrap:has(.dv-table--stack) { overflow: visible; }
}
.dv-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border: 1px solid var(--dv-border-control); border-radius: 999px; color: var(--dv-text-1); font-size: 14px; font-weight: 500; line-height: 22px; text-transform: capitalize; white-space: nowrap; }
.dv-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dv-text-3); }
.dv-pill--ok::before { background: var(--dv-success); }
.dv-pill--warn::before { background: var(--dv-warning); }
.dv-pill--danger::before { background: var(--dv-danger); }
.dv-pill--info::before { background: var(--dv-accent-link); }

/* SellAuth utility classes still present in native markup (account pages,
   ticket and affiliate dialogs, maintenance), mapped to the tokens. */
.dv-main .bg-card, .dv-main .bg-card\/75, .dv-main .bg-card\/50 { background-color: var(--dv-surface) !important; }
.dv-main .bg-background { background-color: var(--dv-bg) !important; }
.dv-main [class*="bg-white/"] { background-color: var(--dv-surface-raised) !important; }
.dv-main .border-white\/5, .dv-main .border-white\/10, .dv-main .border-y-white\/5, .dv-main .border-t-white\/5 { border-color: var(--dv-border-subtle) !important; }
.dv-main .component:not([class*="dv-"]) [class*="bg-card"], .dv-native-panel { border-radius: var(--dv-r-card); }
.dv-main input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.dv-input):not(.choices__input), .dv-main textarea:not(.dv-input), .dv-main select:not(.dv-select) { min-height: 52px; border-radius: var(--dv-r-control); border: 1px solid var(--dv-border-control) !important; background-color: var(--dv-surface) !important; color: var(--dv-text-1); font-size: 16px; }
.dv-main textarea:not(.dv-input) { padding-top: 14px; padding-bottom: 14px; }
.bg-accent-500 { background-color: var(--dv-accent) !important; border-color: var(--dv-accent) !important; color: var(--dv-on-accent) !important; }
.bg-accent-500 .text-t-accent, .bg-accent-500.text-t-accent { color: var(--dv-on-accent) !important; }
.hover\:enabled\:bg-accent-500\/50:hover:enabled, .hover\:bg-accent-500:hover { background-color: var(--dv-accent-hover) !important; color: var(--dv-on-accent) !important; }
.dv-main button.border, .dv-main a.border { border-radius: var(--dv-r-control); }
.dv-main .text-accent-500, .dv-main .text-accent-400 { color: var(--dv-accent-link) !important; }
.dv-main .text-xs, .dv-main .text-\[10px\] { font-size: 14px !important; line-height: 20px !important; }
.dv-main .text-sm { font-size: 14px !important; line-height: 20px !important; }
.dv-main .bg-red-500 { background-color: transparent !important; border: 1px solid var(--dv-danger) !important; border-radius: var(--dv-r-control); color: var(--dv-text-1) !important; }
.dv-main .text-red-500, .dv-main .text-red-400 { color: var(--dv-danger) !important; }
.dv-main .text-green-500 { color: var(--dv-success) !important; }
.dv-main .text-yellow-500, .dv-main .text-orange-500 { color: var(--dv-warning) !important; }
.dv-main hr.border-accent-500 { display: none; }
/* Native dialogs that are not ours yet (ticket, affiliate, reseller). */
.dv-main .fixed.inset-0.z-50 { z-index: var(--dv-z-modal); }
.dv-main .bg-black\/75 { background: var(--dv-scrim) !important; }

/* ===========================================================================
 * 16. Secondary pages: status, legal, custom, maintenance, blog, notices.
 * ======================================================================== */
.dv-page-head { display: grid; gap: 16px; margin-bottom: 40px; }
.dv-page-head--center { justify-items: center; text-align: center; }
.dv-status-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; max-width: 880px; }
.dv-status-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; min-height: 76px; padding: 16px 24px; border: 1px solid var(--dv-border-subtle); border-radius: var(--dv-r-control); background: var(--dv-surface); color: var(--dv-text-1); text-decoration: none; }
.dv-status-row:hover { border-color: var(--dv-border-control); background: var(--dv-surface-raised); }
.dv-status-row h2 { margin: 0; font-size: 18px; font-weight: 600; line-height: 24px; }
.dv-legal { max-width: 880px; }
.dv-announcement { border-bottom: 1px solid var(--dv-border-subtle); background: var(--dv-surface); color: var(--dv-text-1); font-size: 14px; line-height: 20px; }
.dv-announcement .dv-container { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px; padding: 8px 0; text-align: center; }
.dv-pagination { display: flex; justify-content: center; margin-top: 40px; }

/* Store account details, account dialogs and secondary pages. */
/* Account, ticket and custom pages render straight into <main> (no
   .components wrapper), so they take the same top gap section 3 gives the
   first component. */
.dv-account-page { padding-top: 48px; }
@media (min-width: 1280px) { .dv-account-page { padding-top: 64px; } }

/* Sidebar header: the eyebrow and the "Logged in as" line belong together;
   the nav's own 20px gap separates them from the links. Long e-mails wrap. */
.dv-account-nav-head { display: grid; gap: 4px; }
.dv-account-nav-head .dv-meta { overflow-wrap: anywhere; }

/* Destructive actions (delete account, disable 2FA, remove password, cancel a
   subscription or payout): a secondary button with a danger edge. The label
   always says what happens; colour only repeats it. */
.dv-btn--danger { border-color: var(--dv-danger); color: var(--dv-danger); }
.dv-btn--danger:hover:not(:disabled) { border-color: var(--dv-danger); color: var(--dv-text-1); }

/* One-time secrets shown in place (2FA recovery codes, a new reseller API
   key): monospace, 14px, wraps long keys. */
.dv-code-block { display: block; padding: 12px 16px; border: 1px solid var(--dv-border-subtle); border-radius: var(--dv-r-small); background: var(--dv-surface-raised); color: var(--dv-text-1); font: 400 14px/20px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Textareas reuse .dv-input, which has no vertical padding (it is built for
   one-line fields). The ticket reply keeps its own resize-none. */
textarea.dv-input { padding-top: 14px; padding-bottom: 14px; resize: vertical; }
textarea.dv-input.resize-none { resize: none; }

/* Ticket conversation: the card is the frame, the messages scroll inside it
   and the reply bar is pinned to its bottom edge. */
.dv-account-card.dv-ticket-thread { position: relative; padding: 0; overflow: hidden; }
.dv-ticket-composer { padding: 16px; border-top: 1px solid var(--dv-border-subtle); background: var(--dv-surface-raised); }
/* Message avatars (shop logo or person icon): a neutral circle, no violet fill. */
.dv-avatar { flex: 0 0 auto; border: 1px solid var(--dv-border-subtle); border-radius: 50%; background: var(--dv-surface-raised); color: var(--dv-text-2); }

/* A sub-block inside an account card (affiliate transfer and payout),
   separated by a rule instead of a nested box. */
.dv-account-subsection { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--dv-border-subtle); }

/* A whole account card that is one link (balance shortcuts). */
.dv-account-link { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 76px; color: var(--dv-text-1); text-decoration: none; transition: border-color var(--dv-t-control) var(--dv-ease), background-color var(--dv-t-control) var(--dv-ease); }
.dv-account-link--stack { flex-direction: column; align-items: stretch; justify-content: center; }
.dv-account-link:hover { border-color: var(--dv-border-control); background: var(--dv-surface-raised); }

/* Affiliate and reseller tier tiles. The customer's own tier carries the
   selection edge; a visually hidden "(your tier)" says it in words. */
.dv-tier { padding: 16px; border: 1px solid var(--dv-border-subtle); border-radius: var(--dv-r-control); background: var(--dv-surface-raised); }
.dv-tier[aria-current="true"] { border-color: var(--dv-accent-border); background: var(--dv-accent-subtle); }

/* Pagination: the results line and the 44px page buttons wrap as one row;
   the current page uses the selection colours (it also has aria-current). */
.dv-pagination { flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.dv-pagination ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.dv-pagination .dv-btn--sm { min-width: 44px; padding: 0 12px; }
.dv-pagination [aria-current="page"] { border-color: var(--dv-accent-border); background: var(--dv-accent-subtle); }

/* Status page groups: the group name above its own list. Product names
   inside a group are h3 and must look like the h2 rows. */
.dv-status-group { display: grid; gap: 12px; margin-top: 12px; }
.dv-status-row h3 { margin: 0; font-size: 18px; font-weight: 600; line-height: 24px; }

/* Maintenance has no header or footer: centre the block in the viewport. */
.dv-maintenance { display: grid; align-content: center; min-height: calc(100dvh - var(--dv-gap-section)); padding-block: 48px; }
.dv-maintenance .dv-page-head { margin-bottom: 0; }

/* Builder images and videos, and the blog post image, take the card radius. */
.dv-media-frame { border-radius: var(--dv-r-card); }
.dv-blog-image { display: block; width: 100%; height: auto; margin-bottom: 32px; border-radius: var(--dv-r-card); }

/* ===========================================================================
 * Atmosphere (2026-10 polish pass)
 *
 * Bands: a section that carries its own background takes the section gap as
 * padding instead of margin, so the rhythm stays one distance. Tints are a
 * few percent of violet or deep blue over the near-black page; text sits on
 * surfaces at least as dark as before (contrast unchanged or higher).
 * ======================================================================== */
.dv-main > .components > .dv-band { margin-top: 0; padding-block: var(--dv-gap-section); }
.dv-main > .components > .dv-band + :not(.dv-band) { margin-top: 0; padding-top: var(--dv-gap-section); }
.dv-main:has(> .components > .dv-band:last-child) { padding-bottom: 0; }

/* Hero: a whisper of colour across the top of the page, strongest behind the
   artwork. */
.dv-hero { background: radial-gradient(ellipse 70% 90% at 80% 30%, rgba(var(--dv-tint-violet), .09), transparent 70%), radial-gradient(ellipse 50% 60% at 10% 0%, rgba(var(--dv-tint-blue), .05), transparent 70%); }

/* Products: a band slightly lifted from the hero, cooler in the middle. */
.dv-band--products {
  background:
    radial-gradient(ellipse 60% 45% at 50% 55%, rgba(var(--dv-tint-violet), .07), transparent 75%),
    linear-gradient(180deg, var(--dv-bg) 0%, var(--dv-band) 22%, var(--dv-band) 78%, var(--dv-bg) 100%);
}

/* Bundle: the most atmosphere on the page, still quiet. The panel takes a
   violet tint at one corner and a violet edge; the light sits behind it. */
.dv-band--bundle { background: radial-gradient(ellipse 50% 55% at 28% 50%, rgba(var(--dv-tint-violet), .16), transparent 72%), radial-gradient(ellipse 40% 50% at 80% 40%, rgba(var(--dv-tint-blue), .06), transparent 70%); }
.dv-band--bundle .dv-bundle { border-color: rgba(139, 124, 255, .22); background: linear-gradient(135deg, #1a1730 0%, #16151f 38%, var(--dv-surface) 70%); }

/* FAQ: one tone up from the page, so the help area and the footer read as
   their own floors rather than lines on one black block. */
.dv-band--quiet { background: linear-gradient(180deg, var(--dv-bg) 0%, var(--dv-band-quiet) 30%); border-top: 1px solid rgba(255, 255, 255, .03); }
.dv-footer { background: linear-gradient(180deg, #121216 0%, var(--dv-surface) 100%); }

/* Header: the Discord link right of Support, a secondary control that does
   not compete with the violet actions. */
.dv-nav-discord a { gap: 8px; min-height: 44px; padding: 0 14px; border-color: var(--dv-border-control); background: var(--dv-surface-raised); font-weight: 500; }
.dv-nav-discord a:hover { border-color: var(--dv-accent-border); background: var(--dv-surface-hover); }
.dv-nav-epvp a { gap: 4px; }
@media (min-width: 1024px) { .dv-nav-epvp { margin-left: 6px !important; } }
.dv-nav-discord svg { width: 18px; height: 18px; color: var(--dv-accent-link); }
@media (min-width: 1024px) { .dv-nav-discord { margin-left: 8px; } }
@media (max-width: 1023px) {
  .dv-nav-links li.dv-nav-discord { padding: 12px 0 4px; border-top: 0; }
  .dv-nav-discord a { width: 100%; justify-content: center; min-height: 52px; font-size: 16px; }
}
/* 1024-1279: the cart keeps its icon and count; its word moves to the
   accessible name so the header row still fits. */
@media (min-width: 1024px) and (max-width: 1279px) { .dv-cart-btn .dv-cart-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }

/* ===========================================================================
 * 17. Motion
 * ======================================================================== */
@media (prefers-reduced-motion: reduce) {
  html.scroll-smooth { scroll-behavior: auto; }
  *, ::before, ::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .dv-pcard:hover, .dv-tile:hover { transform: none !important; }
}