/*
 * Dark storefront theme — the redesign (approved 2026-10-15).
 *
 * A static file on purpose: production deploys by `git pull` with no
 * `npm run build` (public/build is gitignored), so a Tailwind class that is
 * not already in the compiled bundle would not exist live. This theme's own
 * markup uses `dk-` classes defined here; pages it does not override still
 * render with the default theme's Tailwind classes, which read the `--color-*`
 * tokens remapped below, so they turn dark with the rest.
 *
 * Loaded only by themes/dark/storefront/layouts/app.blade.php, after the
 * Vite bundle and the inline theme tokens, so equal-specificity rules here win.
 *
 * Look: ground #0A0A0C, accent #FF5A1F, Montserrat 800 caps titles,
 * IBM Plex Sans text, JetBrains Mono labels, 14–24px radii, glow only on
 * primary actions. Source: the approved homepage canvas.
 */

/* ---------------------------------------------------------------------------
   1. Tokens — the theme's own, plus the default theme's remapped to dark
   ------------------------------------------------------------------------ */
:root {
    color-scheme: dark;

    --dk-bg: #0A0A0C;
    --dk-bg-2: #0E0E11;
    --dk-card: #111114;
    --dk-card-2: #141418;
    --dk-field: #1A1A1F;
    --dk-raised: #17171B;
    --dk-line: #1F1F24;
    --dk-hair: #26262C;
    --dk-edge: #3F3F46;
    --dk-ink: #F2F2F3;
    --dk-ink-2: #C4C4CC;
    --dk-muted: #A1A1AA;
    --dk-faint: #71717A;
    --dk-accent: #FF5A1F;
    --dk-accent-ink: #FFB08F;
    --dk-on-accent: #140A05;
    --dk-accent-soft: rgba(255, 90, 31, .12);
    --dk-ok: #4ADE80;
    --dk-ok-ink: #86EFAC;
    --dk-ok-soft: rgba(74, 222, 128, .1);
    --dk-err: #F87171;
    --dk-err-soft: rgba(248, 113, 113, .1);
    --dk-light: #E7E8EB;
    --dk-card-grad: linear-gradient(180deg, #141418, #0E0E11);
    --dk-glow: 0 0 28px rgba(255, 90, 31, .4);
    --dk-r-sm: 10px;
    --dk-r: 14px;
    --dk-r-lg: 18px;
    --dk-r-xl: 24px;
    --dk-display: 'Montserrat', 'IBM Plex Sans', system-ui, sans-serif;
    --dk-text: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --dk-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    /* default-theme tokens, remapped so non-overridden pages turn dark */
    --color-surface: #0A0A0C;
    --color-surface-dim: #0A0A0C;
    --color-surface-bright: #17171B;
    --color-surface-container-lowest: #111114;
    --color-surface-container-low: #141418;
    --color-surface-container: #17171B;
    --color-surface-container-high: #1A1A1F;
    --color-surface-container-highest: #1F1F24;
    --color-on-surface: #F2F2F3;
    --color-on-surface-variant: #A1A1AA;
    --color-inverse-surface: #F2F2F3;
    --color-inverse-on-surface: #0A0A0C;
    --color-outline: #71717A;
    --color-outline-variant: #3F3F46;
    --color-hairline: #26262C;
    --color-primary-50: #17171B;
    --color-primary-100: #1F1F24;
    --color-primary-200: #3F3F46;
    --color-primary-300: #71717A;
    --color-primary-400: #A1A1AA;
    --color-primary-500: #C4C4CC;
    --color-primary-600: #E4E4E7;
    --color-primary-700: #F2F2F3;
    --color-primary-800: #FFFFFF;
    --color-primary-900: #FFFFFF;
    --color-primary-950: #FFFFFF;
    --color-primary: #FF5A1F;
    --color-on-primary: #140A05;
    --color-primary-container: #17171B;
    --color-on-primary-container: #A1A1AA;
    --color-secondary: #FFB08F;
    --color-secondary-600: #FFB08F;
    --color-on-secondary: #140A05;
    --color-brand: #FF5A1F;
    --color-brand-50: rgba(255, 90, 31, .12);
    --color-brand-100: rgba(255, 90, 31, .2);
    --color-brand-500: #FF5A1F;
    --color-brand-600: #FF5A1F;
    --color-brand-700: #FFB08F;
    --color-on-brand: #140A05;
    --color-brand-ink: #FFB08F;
    --color-success: #4ADE80;
    --color-tertiary: #4ADE80;
    --color-tertiary-50: rgba(74, 222, 128, .1);
    --color-tertiary-600: #4ADE80;
    --color-tertiary-700: #86EFAC;
    --color-info: #93C5FD;
    --color-error: #F87171;
    --color-danger: #F87171;
    --color-error-container: rgba(248, 113, 113, .12);
    --color-on-error-container: #FCA5A5;
    --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-heading: 'Montserrat', 'IBM Plex Sans', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

/* ---------------------------------------------------------------------------
   2. Base
   ------------------------------------------------------------------------ */
html { background: var(--dk-bg); }
body.dk {
    background: var(--dk-bg);
    color: var(--dk-ink);
    font-family: var(--dk-text);
    font-size: 16px;
    line-height: 1.55;
}
body.dk ::selection { background: var(--dk-accent); color: var(--dk-on-accent); }
body.dk :focus-visible { outline: 2px solid var(--dk-accent); outline-offset: 2px; }
/* No `.dk a { color: inherit }` here: this file is unlayered, so that rule
   beat every Tailwind colour class on a link (text-on-primary, text-on-surface)
   and the button text took its section's colour — black on a black button.
   Tailwind's preflight already makes plain links inherit. */
.dk img { max-width: 100%; }
.dk [x-cloak] { display: none !important; }
.dk-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* 1440px, with the shared <x-storefront.container>'s gutters (20 / 32 / 40px),
   so the theme's own sections line up with the cart, footer and CMS blocks. */
.dk-wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: max(40px, env(safe-area-inset-left, 0px)); box-sizing: border-box; }
@media (max-width: 1023px) { .dk-wrap { padding-inline: max(32px, env(safe-area-inset-left, 0px)); } }
@media (max-width: 639px) { .dk-wrap { padding-inline: max(20px, env(safe-area-inset-left, 0px)); } }

.dk-mono { font-family: var(--dk-mono); letter-spacing: .1em; text-transform: uppercase; }
.dk-eyebrow { font-family: var(--dk-mono); font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--dk-accent); }
.dk-title { font-family: var(--dk-display); font-weight: 800; text-transform: uppercase; letter-spacing: -.005em; line-height: 1.08; margin: 0; }
.dk-title em { font-style: normal; color: var(--dk-accent); }
.dk-h1 { font-size: clamp(32px, 5vw, 56px); }
.dk-h2 { font-size: clamp(28px, 3.4vw, 40px); }
.dk-h3 { font-family: var(--dk-display); font-weight: 700; font-size: 20px; line-height: 1.25; margin: 0; }
.dk-lead { color: var(--dk-ink-2); font-size: 17px; max-width: 60ch; margin: 0; }
.dk-muted { color: var(--dk-muted); }
.dk-ulink { font-family: var(--dk-mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--dk-accent); text-decoration: none; border-bottom: 1px solid var(--dk-accent); padding-bottom: 4px; }
.dk-ulink:hover { color: var(--dk-accent-ink); }

/* ---------------------------------------------------------------------------
   3. Buttons, fields, chips, badges
   ------------------------------------------------------------------------ */
.dk-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 48px; padding: 0 24px; border: 0; border-radius: 12px;
    background: var(--dk-accent); color: var(--dk-on-accent);
    font-family: var(--dk-mono); font-weight: 600; font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
    text-decoration: none; cursor: pointer; box-shadow: var(--dk-glow);
    transition: filter .15s, transform .15s;
}
.dk-btn:hover { filter: brightness(1.08); }
.dk-btn:active { transform: translateY(1px); }
.dk-btn--out { background: transparent; color: var(--dk-ink); border: 1.5px solid #E4E4E7; box-shadow: none; }
.dk-btn--out:hover { border-color: var(--dk-accent); color: var(--dk-accent-ink); filter: none; }
.dk-btn--sm { min-height: 38px; padding: 0 16px; font-size: 12px; }
.dk-btn--block { width: 100%; }
.dk-btn svg { width: 16px; height: 16px; flex: none; }

.dk-field { display: grid; gap: 8px; }
.dk-label { font-family: var(--dk-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #E4E4E7; }
.dk-input, .dk-select {
    width: 100%; min-height: 44px; box-sizing: border-box; padding: 0 14px;
    border: 1px solid var(--dk-edge); border-radius: var(--dk-r-sm);
    background: var(--dk-field); color: var(--dk-ink); font: inherit; font-size: 15px;
}
.dk-select { appearance: none; -webkit-appearance: none; padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A1A1AA' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
.dk-input:focus, .dk-select:focus { border-color: var(--dk-accent); box-shadow: 0 0 0 3px rgba(255, 90, 31, .18); outline: 0; }
.dk-select:disabled, .dk-input:disabled { color: var(--dk-muted); opacity: .7; }
.dk-input::placeholder { color: var(--dk-faint); }

.dk-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border: 1px solid var(--dk-edge); border-radius: 999px; background: var(--dk-raised); color: var(--dk-ink); font-size: 14px; text-decoration: none; white-space: nowrap; }
.dk-chip:hover { border-color: var(--dk-accent); }
.dk-chip[aria-pressed="true"], .dk-chip.is-on { background: var(--dk-accent); border-color: var(--dk-accent); color: var(--dk-on-accent); }
.dk-chip svg { width: 15px; height: 15px; }

.dk-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border: 1px solid; border-radius: 999px; font-family: var(--dk-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.dk-badge--ok { color: var(--dk-ok-ink); border-color: rgba(74, 222, 128, .5); background: var(--dk-ok-soft); }
.dk-badge--tbc { color: var(--dk-accent-ink); border-color: rgba(255, 90, 31, .5); background: var(--dk-accent-soft); }
.dk-badge svg { width: 12px; height: 12px; }

.dk-card { background: var(--dk-card-grad); border: 1px solid var(--dk-hair); border-radius: var(--dk-r-lg); }

/* ---------------------------------------------------------------------------
   4. Utility bar + header
   ------------------------------------------------------------------------ */
.dk-ubar { border-bottom: 1px solid var(--dk-line); font-family: var(--dk-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--dk-muted); }
.dk-ubar .dk-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding-block: 8px; }
.dk-ubar a { color: var(--dk-muted); text-decoration: none; }
.dk-ubar a:hover { color: var(--dk-ink); }
.dk-ubar__r { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.dk-ubar__lang a[aria-current] { color: var(--dk-accent); }
@media (max-width: 760px) { .dk-ubar__hide-m { display: none; } }

.dk-hdr { position: relative; z-index: 40; background: rgba(10, 10, 12, .94); border-bottom: 1px solid var(--dk-line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.dk-hdr.is-sticky { position: sticky; top: 0; }
/* One row in the page column (the client's bar, 2026-10-15): logo left, the
   menu centred, search / Área B2B / languages / cart right. The menu sits in
   the middle of the page whatever the two sides measure: both sides take an
   equal share of the free space. */
.dk-hdr__row { display: flex; align-items: center; gap: 24px; min-height: 76px; }
.dk-hdr__row > .dk-logo, .dk-hdr__row > .dk-tools { flex: 1 1 0; }
.dk-hdr__row > .dk-tools { justify-content: flex-end; }
.dk-logo { display: inline-flex; align-items: center; color: var(--dk-ink); text-decoration: none; }
.dk-logo img, .dk-logo svg { height: 28px; width: auto; }
.dk-nav { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 30px; flex: none; white-space: nowrap; }
.dk-nav a, .dk-nav button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; background: none; border: 0; box-shadow: inset 0 -2px 0 transparent; color: var(--dk-ink); font-family: var(--dk-mono); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.dk-nav a:hover { color: var(--dk-accent-ink); }
.dk-nav a[aria-current="page"] { color: var(--dk-accent); box-shadow: inset 0 -2px 0 var(--dk-accent); }
.dk-nav a.dk-nav__pro { min-height: 34px; padding: 0 16px; border-radius: 10px; background: var(--dk-accent); color: var(--dk-on-accent); box-shadow: 0 0 22px rgba(255, 90, 31, .35); font-weight: 600; }
.dk-nav a.dk-nav__pro:hover, .dk-nav a.dk-nav__pro[aria-current="page"] { background: #ff6d38; color: var(--dk-on-accent); box-shadow: 0 0 26px rgba(255, 90, 31, .5); }
.dk-nav svg { width: 12px; height: 12px; transition: transform .15s; }
.dk-nav [aria-expanded="true"] svg { transform: rotate(180deg); }
.dk-tools { display: flex; align-items: center; gap: 6px; }
.dk-langs { display: inline-flex; align-items: center; gap: 6px; padding: 0 8px; font-family: var(--dk-mono); font-size: 12.5px; letter-spacing: .1em; color: var(--dk-faint); white-space: nowrap; }
.dk-langs a { color: var(--dk-muted); text-decoration: none; }
.dk-langs a:hover { color: var(--dk-ink); }
.dk-langs a[aria-current] { color: var(--dk-ink); }
.dk-icon { position: relative; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--dk-ink); text-decoration: none; cursor: pointer; border-radius: 999px; }
.dk-icon:hover { background: var(--dk-raised); }
.dk-icon[aria-current="page"] { color: var(--dk-accent); }
.dk-icon svg { width: 20px; height: 20px; }
.dk-count { position: absolute; top: 6px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 8px; background: var(--dk-accent); color: var(--dk-on-accent); font-family: var(--dk-mono); font-size: 10px; font-weight: 600; line-height: 16px; text-align: center; }
.dk-burger { display: none; }
.dk-search { position: relative; display: flex; align-items: center; height: 44px; padding: 0 3px 0 14px; border: 1px solid var(--dk-edge); border-radius: 12px; background: var(--dk-raised); }
.dk-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--dk-ink); font: inherit; font-size: 15px; }
.dk-search input::placeholder { color: var(--dk-faint); }
.dk-search:focus-within { border-color: var(--dk-accent); box-shadow: 0 0 0 3px rgba(255, 90, 31, .18); }
.dk-search button { width: 38px; height: 38px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 9px; background: var(--dk-accent); color: var(--dk-on-accent); cursor: pointer; }
.dk-search button svg { width: 17px; height: 17px; }
.dk-searchbar { position: absolute; left: 0; right: 0; top: 100%; z-index: 2; padding-block: 18px; border-top: 1px solid var(--dk-line); border-bottom: 1px solid var(--dk-line); background: rgba(10, 10, 12, .97); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); }
.dk-searchbar .dk-hsearch { max-width: 760px; margin-inline: auto; height: 52px; }
.dk-lang { position: relative; }
.dk-lang ul { position: absolute; right: 0; top: 100%; z-index: 50; min-width: 180px; margin: 6px 0 0; padding: 6px; list-style: none; background: var(--dk-card); border: 1px solid var(--dk-hair); border-radius: var(--dk-r); box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .8); }
.dk-lang a { display: flex; justify-content: space-between; gap: 12px; padding: 9px 10px; border-radius: 8px; color: var(--dk-ink-2); text-decoration: none; font-family: var(--dk-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.dk-lang a:hover, .dk-lang a[aria-current] { background: var(--dk-raised); color: var(--dk-ink); }
.dk-lang__btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 10px; background: none; color: var(--dk-ink); font-family: var(--dk-mono); font-size: 12.5px; letter-spacing: .1em; cursor: pointer; }
.dk-lang__btn:hover, .dk-lang__btn[aria-expanded="true"] { background: var(--dk-raised); }
.dk-lang__btn svg { width: 16px; height: 16px; }
.dk-lang__btn svg:last-child { width: 12px; height: 12px; transition: transform .15s; }
.dk-lang__btn[aria-expanded="true"] svg:last-child { transform: rotate(180deg); }
.dk-lang small { font-family: var(--dk-mono); font-size: 11px; color: var(--dk-faint); }
.dk-lang a[aria-current] { color: var(--dk-accent-ink); }
.dk-lang ul a { font-family: var(--dk-text); font-size: 14px; letter-spacing: 0; text-transform: none; white-space: nowrap; }

/* mega menu */
.dk-mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--dk-card); border-top: 1px solid var(--dk-line); border-bottom: 1px solid var(--dk-line); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); }
.dk-mega__in { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; padding-block: 36px; }
.dk-mega__in.no-feature { grid-template-columns: minmax(0, 1fr); }
.dk-mega__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 32px; }
.dk-mega__col p { margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--dk-hair); font-family: var(--dk-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--dk-muted); }
.dk-mega__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dk-mega__col a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--dk-ink); text-decoration: none; font-size: 15px; }
.dk-mega__col small { font-family: var(--dk-mono); font-size: 11px; color: var(--dk-faint); }
.dk-mega__col li.is-sub a { padding-left: 14px; font-size: 14px; color: var(--dk-muted); }
.dk-mega__col li.is-more a { color: var(--dk-accent-ink); font-family: var(--dk-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.dk-mega__col.is-wide { grid-column: 1 / -1; }
.dk-mega__col.is-wide ul { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); column-gap: 32px; }
.dk-mega__col a:hover, .dk-mega__col a[aria-current="page"] { color: var(--dk-accent-ink); }
.dk-mega__feature { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 24px; border: 1px solid var(--dk-hair); border-radius: var(--dk-r-lg); background: radial-gradient(400px 220px at 100% 0%, rgba(255, 90, 31, .2), transparent 70%), var(--dk-bg-2); color: var(--dk-ink); text-decoration: none; }
.dk-mega__feature b { font-family: var(--dk-display); font-weight: 700; font-size: 18px; line-height: 1.3; }

/* mobile drawer */
.dk-drawer { border-top: 1px solid var(--dk-line); background: var(--dk-bg); }
.dk-drawer__search { padding: 14px 16px 6px; }
.dk-drawer nav { padding: 4px 0 12px; }
.dk-drawer__item { border-bottom: 1px solid var(--dk-line); }
.dk-drawer__item > a, .dk-drawer__item > button { width: 100%; display: flex; justify-content: space-between; align-items: center; min-height: 52px; padding: 0 16px; box-sizing: border-box; background: none; border: 0; color: var(--dk-ink); font-family: var(--dk-mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.dk-drawer__item > a[aria-current], .dk-drawer__item > button.is-on { color: var(--dk-accent); }
.dk-drawer__sub { padding: 0 16px 14px; display: grid; gap: 14px; }
.dk-drawer__sub p { margin: 0 0 6px; font-family: var(--dk-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dk-muted); }
.dk-drawer__sub ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.dk-drawer__sub a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; color: var(--dk-ink); text-decoration: none; }
.dk-drawer__sub small { font-family: var(--dk-mono); font-size: 11px; color: var(--dk-faint); }
.dk-drawer__sub li.is-sub a { padding-left: 14px; color: var(--dk-muted); }
.dk-drawer__all { display: block; padding: 12px 0 4px; color: var(--dk-accent-ink); font-family: var(--dk-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }
.dk-drawer__foot { display: flex; justify-content: space-between; gap: 12px; padding: 16px; }

/* The menu never wraps: it tightens, then folds into the drawer. */
@media (max-width: 1360px) {
    .dk-nav { gap: 22px; }
    .dk-nav a, .dk-nav button, .dk-langs { font-size: 11.5px; letter-spacing: .07em; }
}
@media (max-width: 1180px) {
    .dk-nav { display: none; }
    .dk-burger { display: inline-flex; }
}
@media (max-width: 760px) {
    .dk-hdr__row { gap: 8px; min-height: 60px; }
    .dk-hide-m { display: none; }
}

/* ---------------------------------------------------------------------------
   5. Footer
   ------------------------------------------------------------------------ */
.dk-news { border-top: 1px solid var(--dk-line); border-bottom: 1px solid var(--dk-line); background: var(--dk-bg-2); }
.dk-news .dk-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 28px 60px; padding-block: 64px; }
.dk-news__l { flex: 1 1 380px; display: grid; gap: 12px; }
.dk-news__f { flex: 1 1 380px; display: grid; gap: 10px; }
.dk-news__row { display: flex; flex-wrap: wrap; gap: 10px; }
.dk-news__row .dk-input { flex: 1 1 220px; min-height: 52px; border-radius: 12px; padding-inline: 18px; }
.dk-news small { color: var(--dk-muted); font-size: 13px; }
.dk-foot { padding-block: 64px 28px; }
.dk-foot__top { display: flex; flex-wrap: wrap; gap: 44px; }
.dk-foot__brand { flex: 1 1 280px; display: grid; gap: 16px; align-content: start; }
.dk-foot__brand p { margin: 0; max-width: 340px; font-size: 15px; color: var(--dk-muted); }
.dk-foot__cols { flex: 2 1 520px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 28px; font-size: 15px; }
.dk-foot__col { display: grid; gap: 9px; align-content: start; }
.dk-foot__col > span { font-family: var(--dk-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--dk-muted); }
.dk-foot__col a { color: var(--dk-ink); text-decoration: none; }
.dk-foot__col a:hover { color: var(--dk-accent-ink); }
.dk-foot__social { display: flex; gap: 8px; }
.dk-foot__social a { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--dk-edge); border-radius: 999px; color: var(--dk-ink); }
.dk-foot__social svg { width: 17px; height: 17px; }
.dk-foot__bot { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--dk-line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; font-size: 13px; color: var(--dk-muted); }
.dk-foot__bot .dk-mono { letter-spacing: .06em; }
.dk-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--dk-ok); margin-right: 6px; vertical-align: 1px; }

/* ---------------------------------------------------------------------------
   6. Pinned «Compatibilidade» strip (home)
   ------------------------------------------------------------------------ */
/* Full width, flush with the bottom edge, square: a brushed-metal rail with
   each make's logo beside its name. */
.dk-cstrip-wrap { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; }
.dk-cstrip { display: flex; align-items: center; justify-content: space-evenly; gap: 8px 24px; padding: 10px max(24px, env(safe-area-inset-left, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)); border-radius: 0; background: linear-gradient(180deg, rgba(244, 245, 247, .97), rgba(214, 217, 222, .97)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid rgba(255, 255, 255, .7); box-shadow: 0 -12px 32px -12px rgba(0, 0, 0, .75), inset 0 -1px 0 rgba(0, 0, 0, .08); }
.dk-cstrip a { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 6px; color: #4b5058; text-decoration: none; font-family: var(--dk-display); font-weight: 700; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; transition: color .2s; }
.dk-cstrip img { height: 30px; width: auto; max-width: 92px; object-fit: contain; opacity: .78; transition: opacity .2s, transform .2s; }
.dk-cstrip a:hover, .dk-cstrip a:focus-visible { color: #111214; }
.dk-cstrip a:hover img, .dk-cstrip a:focus-visible img { opacity: 1; transform: translateY(-1px); }
body.dk.has-cstrip { padding-bottom: 72px; }
/* Narrower screens: logos only (the name stays as the link's title and for
   makes without a logo). */
@media (max-width: 1280px) {
    .dk-cstrip a:has(img) span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Phones: no strip at all (client request 2026-10-16). */
@media (max-width: 760px) {
    .dk-cstrip-wrap { display: none; }
    body.dk.has-cstrip { padding-bottom: 0; }
}

/* ---------------------------------------------------------------------------
   7. Hero (hero-rich) + vehicle finder
   ------------------------------------------------------------------------ */
.dk-hero { position: relative; overflow: hidden; padding-bottom: 56px; border-bottom: 1px solid #2A2A31; background: radial-gradient(900px 520px at 72% 42%, rgba(255, 90, 31, .16), transparent 70%), var(--dk-bg); }
.dk-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; background: radial-gradient(55% 100% at 50% 100%, rgba(255, 90, 31, .14), transparent 70%); pointer-events: none; }
.dk-hero > * { position: relative; z-index: 1; }
.dk-hero__grid { display: flex; flex-wrap: wrap; align-items: center; gap: 40px; padding-block: 72px 40px; }
.dk-hero__copy { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.dk-hero__kicker { display: flex; align-items: center; gap: 14px; font-family: var(--dk-mono); font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--dk-ink-2); }
.dk-hero__kicker::before { content: ""; width: 36px; height: 1px; background: var(--dk-faint); }
.dk-hero__h1 { font-size: clamp(32px, 5.2vw, 60px); line-height: 1.02; letter-spacing: -.01em; overflow-wrap: anywhere; }
.dk-hero__cta { display: flex; flex-wrap: wrap; gap: 16px; }
.dk-hero__cta .dk-btn { min-height: 52px; padding: 0 28px; font-size: 14px; }
.dk-hero__stats { display: flex; flex-wrap: wrap; gap: 12px 36px; margin: 0; padding-top: 6px; }
.dk-hero__stats div { display: grid; gap: 2px; }
.dk-hero__stats dt { font-family: var(--dk-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--dk-muted); }
.dk-hero__stats dd { margin: 0; font-family: var(--dk-mono); font-size: 18px; font-weight: 600; letter-spacing: .04em; color: var(--dk-ink); }
.dk-hero__art { flex: 1 1 480px; min-width: 0; position: relative; display: grid; }
.dk-hero__art > img, .dk-hero__art > video { grid-area: 1 / 1; display: block; width: 100%; height: auto; }
.dk-hero__slide { opacity: 0; transition: opacity .9s ease; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 82%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 82%, transparent 100%); }
.dk-hero__slide.is-on { opacity: 1; }
.dk-hero__art.is-video video { aspect-ratio: 16 / 10; object-fit: cover; border-radius: 20px; background: #000; }
.dk-hero__ind { position: absolute; left: 0; right: 0; bottom: -18px; display: flex; justify-content: center; gap: 6px; }
.dk-hero__ind span { width: 40px; height: 3px; border-radius: 2px; background: var(--dk-edge); transition: background .3s; }
.dk-hero__ind span.is-on { background: var(--dk-accent); }
.dk-hero__finder { padding-top: 8px; }

/* The finder is one bar: the Veículo | VIN switch, then the open form, then any VIN
   message. Laid out by its OWN width (container query), so the header, hero, selector
   page and product page each get one line or a stack as their space allows. Narrow:
   the switch lies across the top, fields 2×2, button full width. Wide: one line, the
   switch stands upright at the fields' height. */
/* container-type makes this a stacking context: z-index keeps the open dropdowns over what follows. */
.dk-finder { container-type: inline-size; position: relative; z-index: 20; display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; border: 1px solid var(--dk-hair); border-radius: 18px; background: rgba(19, 19, 23, .88); }
.dk-finder > * { flex: 1 1 100%; min-width: 0; }
.dk-finder__tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 3px; box-sizing: border-box; border: 1px solid var(--dk-edge); border-radius: 12px; background: var(--dk-field); }
.dk-finder__tabs::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); box-sizing: border-box; border: 1px solid var(--dk-accent); border-radius: 9px; background: var(--dk-accent-soft); transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.dk-finder__tabs:has(button:last-child[aria-selected="true"])::before { transform: translateX(100%); }
.dk-finder__tabs button { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--dk-ink-2); font-family: var(--dk-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: color .2s; }
.dk-finder__tabs button[aria-selected="true"] { color: var(--dk-accent-ink); }
@media (prefers-reduced-motion: reduce) { .dk-finder__tabs::before { transition: none; } }
.dk-finder__tabs svg { width: 15px; height: 15px; }
.dk-finder__bar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dk-finder__bar .dk-finder__go, .dk-finder__bar .dk-finder__f:nth-of-type(odd):last-of-type { grid-column: 1 / -1; }
@container (min-width: 960px) {
    .dk-finder__tabs { flex: 0 0 auto; grid-template-columns: none; grid-template-rows: 1fr 1fr; }
    .dk-finder__tabs::before { right: 3px; bottom: auto; width: auto; height: calc(50% - 3px); }
    .dk-finder__tabs:has(button:last-child[aria-selected="true"])::before { transform: translateY(100%); }
    .dk-finder__tabs button { justify-content: flex-start; min-height: 0; padding: 0 12px; font-size: 10.5px; }
    .dk-finder__tabs svg { width: 14px; height: 14px; }
    /* Prefixed with .dk-finder to outrank the single-class base rules further down. */
    .dk-finder .dk-finder__bar, .dk-finder .dk-finder__vin { flex: 1 1 0; display: flex; }
    .dk-finder .dk-finder__f { flex: 1 1 0; min-width: 0; }
    .dk-finder .dk-finder__go, .dk-finder .dk-finder__vin .dk-finder__go { flex: 0 0 auto; min-height: 56px; padding: 0 30px; }
}
/* Wide finder, mockup B2 (2026-10-16): one 52 px glass bar over the hero — the
   switch as two icons, borderless 44 px fields with a small label, the fields
   not yet open faded, and the next step marked by an orange dot. */
/* The bar itself: a container query never styles its own container, so the
   glass is set by viewport on the wide placements (top bar, hero, stepper). */
@media (min-width: 1024px) {
    .dk-topfinder .dk-finder, .dk-hero .dk-finder, .dk-sec--tight > .dk-wrap > .dk-finder { gap: 4px; padding: 4px; border: 0; border-radius: 16px; background: rgba(24, 24, 28, .55); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 0 0 1px rgba(255, 255, 255, .06), 0 16px 44px rgba(0, 0, 0, .5); }
}
@container (min-width: 960px) {
    .dk-finder .dk-finder__bar, .dk-finder .dk-finder__vin { gap: 4px; }
    .dk-finder__tabs { grid-template-rows: none; grid-template-columns: 44px 44px; gap: 2px; padding: 0; border: 0; background: none; }
    .dk-finder__tabs::before { display: none; }
    .dk-finder__tabs button { justify-content: center; gap: 0; height: 44px; padding: 0; border-radius: 12px; font-size: 0; letter-spacing: 0; color: var(--dk-muted); transition: background .15s, color .15s; }
    .dk-finder__tabs button:hover { color: var(--dk-ink); }
    .dk-finder__tabs button[aria-selected="true"] { background: rgba(255, 255, 255, .09); color: var(--dk-ink); }
    .dk-finder__tabs svg { width: 18px; height: 18px; }
    .dk-finder .dk-finder__f { min-height: 44px; gap: 0; padding: 3px 14px; border: 0; border-radius: 12px; background: transparent; box-shadow: none; transition: background .15s, opacity .2s; }
    .dk-finder .dk-finder__f:hover { background: rgba(255, 255, 255, .05); }
    .dk-finder .dk-finder__f:focus-within, .dk-finder .dk-finder__f.is-open { background: rgba(255, 255, 255, .08); }
    .dk-finder .dk-finder__f .dk-label { font-family: var(--dk-text); font-size: 10.5px; font-weight: 600; letter-spacing: .02em; text-transform: none; color: var(--dk-muted); }
    .dk-finder .dk-finder__f.is-next .dk-label::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--dk-accent); vertical-align: 1px; box-shadow: 0 0 8px var(--dk-accent); }
    .dk-finder .dk-finder__f .dk-select, .dk-finder .dk-finder__f input { height: 22px; font-size: 14px; font-weight: 600; }
    .dk-finder .dk-finder__f .dk-combo__btn { height: 22px; line-height: 22px; font-size: 14px; font-weight: 600; }
    .dk-finder .dk-finder__f .dk-combo__btn:disabled, .dk-finder .dk-finder__f .dk-select:disabled { opacity: 1; color: var(--dk-muted); font-weight: 500; }
    .dk-finder .dk-finder__go, .dk-finder .dk-finder__vin .dk-finder__go { min-height: 44px; padding: 0 22px; border-radius: 12px; box-shadow: 0 0 20px rgba(255, 90, 31, .3); }
}
@media (prefers-reduced-transparency: reduce) {
    .dk-finder, .dk-topfinder .dk-finder, .dk-hero .dk-finder, .dk-sec--tight > .dk-wrap > .dk-finder { -webkit-backdrop-filter: none; backdrop-filter: none; background: #17171B; }
}
/* One box per field: the label on top, the select inside with no box of its own. */
.dk-finder__f { position: relative; display: grid; gap: 2px; align-content: center; min-height: 56px; padding: 8px 14px; box-sizing: border-box; border: 1px solid var(--dk-edge); border-radius: 12px; background: var(--dk-field); transition: border-color .15s; }
.dk-finder__f:focus-within { border-color: var(--dk-accent); }
.dk-finder__f .dk-select, .dk-finder__f input { height: 24px; min-height: 0; padding: 0 22px 0 0; border: 0; border-radius: 0; background-color: transparent; background-position: right 0 center; box-shadow: none; font-size: 14.5px; }
.dk-finder__f .dk-select:focus, .dk-finder__f input:focus { outline: none; box-shadow: none; }
.dk-finder__f.is-next { border-color: var(--dk-accent); box-shadow: 0 0 16px rgba(255, 90, 31, .2); }
.dk-finder__f .dk-label { font-size: 10.5px; }
.dk-finder__go { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 0 22px; border: 0; border-radius: 12px; background: var(--dk-accent); color: var(--dk-on-accent); font-family: var(--dk-mono); font-weight: 600; font-size: 13.5px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; box-shadow: 0 0 30px rgba(255, 90, 31, .4); }
.dk-finder__go:hover { filter: brightness(1.08); }
.dk-finder__go:disabled { opacity: .6; cursor: progress; }
.dk-finder__go svg { width: 18px; height: 18px; stroke-width: 2.2; }
.dk-finder__vin { display: grid; grid-template-columns: 1fr; gap: 8px; }
.dk-finder__vin .dk-finder__go { min-height: 0; }
.dk-finder__vin-in { font-family: var(--dk-mono); letter-spacing: .12em; text-transform: uppercase; }
.dk-finder__note { grid-column: 1 / -1; margin: 0; font-size: 14px; color: var(--dk-muted); }
.dk-finder__msg { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 12px 16px; border-radius: var(--dk-r); border: 1px solid var(--dk-edge); background: var(--dk-raised); font-size: 14px; }
.dk-finder__msg.is-ok { border-color: rgba(74, 222, 128, .5); background: var(--dk-ok-soft); color: var(--dk-ok-ink); }
.dk-finder__msg.is-invalid { border-color: rgba(248, 113, 113, .5); background: var(--dk-err-soft); }
.dk-finder__msg a { color: var(--dk-accent-ink); }

@media (max-width: 760px) {
    .dk-hero__grid { padding-block: 36px 24px; gap: 28px; }
    .dk-hero__cta .dk-btn { flex: 1 1 100%; }
    .dk-finder__go { min-height: 52px; }
}

/* ---------------------------------------------------------------------------
   8. Page header, sections, grids, duo cards
   ------------------------------------------------------------------------ */
.dk-phead { border-bottom: 1px solid var(--dk-line); background: radial-gradient(700px 260px at 85% 0%, rgba(255, 90, 31, .1), transparent 70%), var(--dk-bg); }
.dk-phead__in { display: grid; gap: 10px; padding-block: 32px 28px; }
.dk-phead__in > * { max-width: 820px; }
.dk-phead .dk-h1 { font-size: clamp(26px, 3.2vw, 40px); }
.dk-phead .dk-lead { font-size: 15px; max-width: 70ch; }
.dk-phead__meta { font-size: 12px; }
.dk-sec { padding-block: 64px; }
.dk-sec--tight { padding-block: 28px; }
.dk-sec + .dk-sec--tight, .dk-sec--tight + .dk-sec--tight { padding-top: 0; }
.dk-sec__h { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: 32px; }
.dk-pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.dk-garage { display: grid; gap: 12px; }
.dk-garage__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dk-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.dk-duo__c { display: flex; flex-direction: column; gap: 16px; padding: 36px; border: 1px solid var(--dk-hair); border-radius: var(--dk-r-xl); background: #111114; }
.dk-duo__c.is-hot { border: 1.5px solid var(--dk-accent); background: radial-gradient(500px 260px at 100% 0%, rgba(255, 90, 31, .28), transparent 70%), #15100D; }
.dk-duo__c p { margin: 0; }
.dk-inline-form { display: flex; flex-wrap: wrap; gap: 10px; }
.dk-inline-form .dk-input { flex: 1 1 240px; min-height: 48px; }
@media (max-width: 760px) {
    .dk-phead__in { padding-block: 24px 20px; }
    .dk-sec { padding-block: 40px; }
    .dk-duo__c { padding: 24px; }
    .dk-inline-form .dk-btn { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------------------
   9. Product card
   ------------------------------------------------------------------------ */
.dk-badge--no { color: #FCA5A5; border-color: rgba(248, 113, 113, .5); background: var(--dk-err-soft); }
.dk-pc { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--dk-hair); border-radius: var(--dk-r-lg); background: #111114; transition: border-color .15s; }
.dk-pc:hover { border-color: var(--dk-accent); }
.dk-pc__cover { position: absolute; inset: 0; z-index: 1; }
.dk-pc__ph { position: relative; aspect-ratio: 4 / 3; margin: 10px 10px 0; border-radius: 12px; background: #F2F2F3; display: grid; place-items: center; overflow: hidden; }
.dk-pc__ph img { width: 100%; height: 100%; object-fit: contain; padding: 18px; box-sizing: border-box; transition: transform .3s; }
.dk-pc:hover .dk-pc__ph img { transform: scale(1.03); }
.dk-pc__noimg { width: 64px; height: 64px; color: #A1A1AA; }
.dk-pc__tags { position: absolute; top: 10px; left: 10px; right: 52px; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
.dk-pc__sku { padding: 3px 8px; border-radius: 4px; background: #0A0A0C; color: var(--dk-ink-2); font-family: var(--dk-mono); font-size: 11px; letter-spacing: .08em; }
.dk-pc__fit { position: absolute; left: 10px; bottom: 10px; background-color: rgba(10, 10, 12, .88); }
.dk-pc__cmp { position: absolute; top: 4px; right: 4px; z-index: 2; }
.dk-pc__cmp button { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 999px; background: transparent; color: #52525B; cursor: pointer; }
.dk-pc__cmp button:hover { color: #0A0A0C; }
.dk-pc__cmp svg { width: 18px; height: 18px; }
.dk-pc__b { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 16px 18px 18px; }
.dk-pc__meta { margin: 0; font-family: var(--dk-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dk-muted); }
.dk-pc__name { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dk-pc__name a { position: relative; z-index: 2; color: var(--dk-ink); text-decoration: none; }
.dk-pc__name a:hover { color: var(--dk-accent-ink); }
.dk-pc__ft { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 8px; }
.dk-pc__ft .text-on-surface, .dk-pc__ft [class*="font-mono"] { font-family: var(--dk-display); font-weight: 800; }
.dk-pc__go { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--dk-accent); color: var(--dk-on-accent); }
.dk-pc__go svg { width: 18px; height: 18px; }

/* ---------------------------------------------------------------------------
   10. Listing + filters
   ------------------------------------------------------------------------ */
.dk-sec--list { padding-block: 32px 64px; }
.dk-list { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 28px; align-items: start; }
.dk-list__main { min-width: 0; display: grid; gap: 18px; align-content: start; }
.dk-list__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
.dk-list__bar p { margin: 0; font-size: 12px; }
/* «Esconder filtros» + count; «Por página» beside «Ordenar» (2026-10-16). */
.dk-list__lead { display: flex; align-items: center; gap: 16px; min-width: 0; }
.dk-list__hide { gap: 8px; }
.dk-list__hide svg { width: 16px; height: 16px; color: var(--dk-accent); }
.dk-list__hide [data-when="hidden"], .is-nofilters .dk-list__hide [data-when="shown"] { display: none; }
.is-nofilters .dk-list__hide [data-when="hidden"] { display: inline; }
.dk-list.is-nofilters { grid-template-columns: minmax(0, 1fr); }
.dk-list.is-nofilters > .dk-filters { display: none; }
.dk-select--num { min-width: 76px; }
.dk-sort { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.dk-sort .dk-select { width: auto; min-height: 40px; }
.dk-achips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dk-achips .dk-chip svg { width: 14px; height: 14px; }
.dk-empty { display: grid; justify-items: center; gap: 12px; padding: 56px 20px; border: 1px dashed var(--dk-edge); border-radius: var(--dk-r-lg); text-align: center; color: var(--dk-muted); }
.dk-empty p { margin: 0; }
.dk-pager { padding-top: 8px; }

/* Filters — «A1 revisto» (2026-10-16): readable sentence-case group titles
   over a hairline, checkboxes with «(n)», «Ver tudo (+N)» in the accent, a
   price range, and two-valued attributes as a two-sided toggle. */
.dk-filters { position: sticky; top: 96px; display: grid; gap: 12px; }
.dk-filters__toggle { display: none; }
.dk-filters__panel { border: 1px solid var(--dk-hair); border-radius: var(--dk-r-lg); background: #151518; overflow: hidden; padding-bottom: 8px; }
/* Sticky beside the grid, so it scrolls on its own: as tall as the window
   below the header, wheel/touch scroll, no visible bar. */
.dk-filters__panel { max-height: calc(100vh - 116px); max-height: calc(100dvh - 116px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; -ms-overflow-style: none; }
.dk-filters__panel::-webkit-scrollbar { display: none; }
.dk-filters__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 20px 20px 4px; }
.dk-filters__title { font-family: var(--dk-display); font-size: 15px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--dk-ink); }
.dk-filters__clear { font-size: 13px; color: var(--dk-muted); text-decoration: none; }
.dk-filters__clear:hover { color: var(--dk-ink); }
.dk-filters__apply { padding: 16px 20px 8px; }
.dk-filters__empty { margin: 0; padding: 18px; }
.dk-fgroup summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 20px; padding: 16px 0 10px; border-bottom: 1px solid var(--dk-hair); list-style: none; cursor: pointer; font-family: var(--dk-text); font-size: 16px; font-weight: 600; color: var(--dk-ink); }
.dk-fgroup summary::-webkit-details-marker { display: none; }
.dk-fgroup__n { display: inline-flex; align-items: center; gap: 8px; }
.dk-fgroup__n b { min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 10px; background: var(--dk-accent); color: var(--dk-on-accent); font-family: var(--dk-mono); font-size: 11px; line-height: 20px; text-align: center; }
.dk-fgroup__n svg { width: 15px; height: 15px; color: var(--dk-muted); transition: transform .2s cubic-bezier(.23, 1, .32, 1); }
.dk-fgroup[open] .dk-fgroup__n svg { transform: rotate(180deg); }
.dk-fgroup fieldset { margin: 0; padding: 10px 20px 6px; border: 0; min-width: 0; }
.dk-flist { display: grid; gap: 0; }
.dk-fmore { display: inline-flex; align-items: center; min-height: 34px; padding: 0; border: 0; background: none; color: var(--dk-accent); font-family: var(--dk-text); font-size: 14px; cursor: pointer; }
.dk-fmore:hover { text-decoration: underline; }
.dk-fopt { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 3px 0; cursor: pointer; font-size: 14.5px; line-height: 1.3; color: var(--dk-ink-2); }
.dk-fopt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dk-fopt__box { flex: none; width: 18px; height: 18px; display: grid; place-items: center; border: 1.5px solid var(--dk-edge); border-radius: 4px; color: transparent; transition: background .15s, border-color .15s; }
.dk-fopt:hover .dk-fopt__box { border-color: var(--dk-muted); }
.dk-fopt__box svg { width: 13px; height: 13px; stroke-width: 3; }
.dk-fopt input:checked ~ .dk-fopt__box { background: var(--dk-accent); border-color: var(--dk-accent); color: var(--dk-on-accent); }
.dk-fopt input:checked ~ .dk-fopt__l { color: var(--dk-ink); font-weight: 600; }
.dk-fopt input:focus-visible ~ .dk-fopt__box { outline: 2px solid var(--dk-accent); outline-offset: 2px; }
.dk-fopt:has(input:disabled) { opacity: .45; cursor: default; }
.dk-fopt__l { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.dk-fopt__l em { font-style: normal; font-weight: 400; color: var(--dk-faint); }
.dk-fopt__l small { display: block; font-size: 11.5px; font-weight: 400; color: var(--dk-faint); }
.dk-fopt mark { background: rgba(255, 90, 31, .28); color: var(--dk-ink); border-radius: 3px; padding: 0 1px; }
.dk-fhint { margin: 4px 0 6px; padding: 10px 12px; border: 1px dashed var(--dk-edge); border-radius: var(--dk-r-sm); color: var(--dk-faint); font-size: 13px; }
.dk-fsearch { display: flex; align-items: center; gap: 8px; height: 38px; margin-bottom: 6px; padding: 0 10px; border: 1px solid var(--dk-edge); border-radius: var(--dk-r-sm); background: var(--dk-field); }
.dk-fsearch svg { width: 15px; height: 15px; color: var(--dk-muted); }
.dk-fsearch input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--dk-ink); font: inherit; font-size: 14px; }
.dk-fsegs { display: grid; gap: 14px; margin: 0 20px; padding: 16px 0 10px; border-bottom: 1px solid var(--dk-hair); }
.dk-fseg { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.dk-fseg legend { padding: 0; margin-bottom: 8px; font-size: 16px; font-weight: 600; color: var(--dk-ink); }
.dk-fseg__track { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; border: 1px solid var(--dk-hair); border-radius: var(--dk-r-sm); background: var(--dk-field); }
.dk-fseg__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dk-fseg__opt span { display: flex; align-items: center; justify-content: center; gap: 4px; height: 34px; border-radius: 8px; font-size: 14px; color: var(--dk-muted); white-space: nowrap; cursor: pointer; transition: background .2s cubic-bezier(.23, 1, .32, 1), color .15s; }
.dk-fseg__opt small { font-family: var(--dk-mono); font-size: 10.5px; color: var(--dk-faint); }
.dk-fseg__opt:hover span { color: var(--dk-ink); }
.dk-fseg__opt input:checked + span { background: var(--dk-accent); color: var(--dk-on-accent); }
.dk-fseg__opt input:checked + span small { color: var(--dk-on-accent); }
.dk-fseg__opt input:focus-visible + span { outline: 2px solid var(--dk-accent); outline-offset: 2px; }
.dk-frange { position: relative; height: 28px; margin: 6px 4px 2px; }
.dk-frange__track, .dk-frange__fill { position: absolute; top: 13px; height: 3px; border-radius: 2px; }
.dk-frange__track { left: 0; right: 0; background: var(--dk-edge); }
.dk-frange__fill { background: var(--dk-accent); }
.dk-frange input { position: absolute; inset: 0; width: 100%; height: 28px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.dk-frange input::-webkit-slider-runnable-track { background: none; }
.dk-frange input::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: var(--dk-bg); border: 2px solid var(--dk-accent); cursor: grab; transition: transform .12s cubic-bezier(.23, 1, .32, 1); }
.dk-frange input::-webkit-slider-thumb:active { transform: scale(1.15); cursor: grabbing; }
.dk-frange input::-moz-range-thumb { pointer-events: auto; width: 14px; height: 14px; border-radius: 50%; background: var(--dk-bg); border: 2px solid var(--dk-accent); cursor: grab; }
.dk-frange input::-moz-range-track { background: none; }
.dk-frange input:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--dk-accent); outline-offset: 2px; }
.dk-frange__vals { display: flex; justify-content: space-between; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--dk-ink); font-variant-numeric: tabular-nums; }

@media (max-width: 1023px) {
    .dk-list { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .dk-filters { position: static; }
    .dk-filters__toggle { display: inline-flex; }
    .dk-filters__panel { display: none; max-height: none; overflow: hidden; }
    .dk-filters.is-open .dk-filters__panel { display: block; }
    /* The phone has its own «Filtros» button; the desktop choice does not apply. */
    .dk-list__hide { display: none; }
    .dk-list.is-nofilters > .dk-filters { display: grid; }
}
@media (max-width: 560px) {
    .dk-pgrid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .dk *, .dk *::before, .dk *::after { transition: none !important; animation: none !important; }
}

/* search page */
.dk-searchpage { display: grid; gap: 18px; max-width: 880px; }
.dk-search--lg { height: 60px; padding-left: 20px; }
.dk-search--lg input { font-size: 17px; }
.dk-search--lg button { width: 50px; height: 50px; }

/* ---------------------------------------------------------------------------
   11. Product page
   ------------------------------------------------------------------------ */
.dk-pdp { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 36px; align-items: start; }
.dk-pdp__gal { display: grid; gap: 10px; min-width: 0; }
.dk-pdp__main { aspect-ratio: 1 / 1; display: grid; place-items: center; border-radius: var(--dk-r-lg); background: #F2F2F3; overflow: hidden; }
.dk-pdp__main img { width: 100%; height: 100%; object-fit: contain; padding: 36px; box-sizing: border-box; }
.dk-pdp__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
.dk-pdp__thumbs button { aspect-ratio: 1 / 1; padding: 0; border: 2px solid transparent; border-radius: 10px; background: #F2F2F3; overflow: hidden; cursor: pointer; }
.dk-pdp__thumbs button.is-on { border-color: var(--dk-accent); }
.dk-pdp__thumbs img { width: 100%; height: 100%; object-fit: contain; padding: 6px; box-sizing: border-box; }
.dk-pdp__buy { position: sticky; top: 96px; display: grid; gap: 18px; min-width: 0; padding: 28px; border: 1px solid var(--dk-hair); border-radius: var(--dk-r-xl); background: var(--dk-card-grad); }
.dk-pdp__h1 { margin: 0; font-family: var(--dk-display); font-weight: 700; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; overflow-wrap: anywhere; }
.dk-pdp__ids { display: flex; flex-wrap: wrap; gap: 8px; }
.dk-pdp__ids span { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 6px; padding: 6px 10px; border: 1px solid var(--dk-edge); border-radius: 8px; background: var(--dk-raised); font-size: 13px; color: var(--dk-ink-2); max-width: 100%; box-sizing: border-box; }
.dk-pdp__ids small { font-family: var(--dk-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--dk-muted); }
.dk-pdp__ids b { font-family: var(--dk-mono); font-weight: 600; color: var(--dk-ink); letter-spacing: .04em; overflow-wrap: anywhere; }
.dk-pdp__ids a { color: var(--dk-accent-ink); font-size: 12px; }
.dk-pdp__price { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 14px; border-block: 1px solid var(--dk-line); }
.dk-pdp__cart { display: flex; flex-wrap: wrap; gap: 10px; }
.dk-pdp__add { flex: 1 1 200px; min-height: 52px; }
.dk-qty { display: inline-flex; align-items: stretch; height: 52px; border: 1px solid var(--dk-edge); border-radius: 12px; overflow: hidden; background: var(--dk-field); }
.dk-qty button { width: 46px; border: 0; background: transparent; color: var(--dk-ink); font-size: 20px; cursor: pointer; }
.dk-qty button:hover { background: var(--dk-raised); }
.dk-qty input { width: 52px; border: 0; background: transparent; color: var(--dk-ink); text-align: center; font-family: var(--dk-mono); font-size: 16px; -moz-appearance: textfield; }
.dk-qty input::-webkit-outer-spin-button, .dk-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dk-pdp__facts { display: grid; gap: 8px; margin: 0; font-size: 14px; }
.dk-pdp__facts div { display: flex; justify-content: space-between; gap: 12px; }
.dk-pdp__facts dt { font-family: var(--dk-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--dk-muted); }
.dk-pdp__facts dd { margin: 0; text-align: right; }
.dk-fit__v { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--dk-edge); border-radius: var(--dk-r); background: var(--dk-raised); }
.dk-fit__v b { font-weight: 600; }
.dk-fit__v span { font-family: var(--dk-mono); font-size: 12px; letter-spacing: .06em; color: var(--dk-ink-2); }
.dk-fit__v p { margin: 0; font-size: 13.5px; color: var(--dk-ink-2); }
.dk-fit__v.is-success { border-color: rgba(74, 222, 128, .5); background: var(--dk-ok-soft); }
.dk-fit__v.is-success b { color: var(--dk-ok-ink); }
.dk-fit__v.is-warning { border-color: rgba(255, 90, 31, .5); background: var(--dk-accent-soft); }
.dk-fit__v.is-warning b { color: var(--dk-accent-ink); }
.dk-fit__v.is-danger { border-color: rgba(248, 113, 113, .5); background: var(--dk-err-soft); }
.dk-fit__v.is-danger b { color: #FCA5A5; }
.dk-fit__ask { border: 1.5px solid var(--dk-accent); border-radius: var(--dk-r); background: var(--dk-accent-soft); }
.dk-fit__ask summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 52px; padding: 10px 16px; box-sizing: border-box; cursor: pointer; list-style: none; font-weight: 600; }
.dk-fit__ask summary::-webkit-details-marker { display: none; }
.dk-fit__ask summary small { flex-basis: 100%; font-weight: 400; color: var(--dk-ink-2); }
.dk-fit__ask summary svg { width: 18px; height: 18px; color: var(--dk-accent); }
.dk-fit__ask .dk-finder { margin: 0 10px 10px; }
.dk-fit__ask .dk-finder__bar { grid-template-columns: 1fr; }
.dk-fit__ask .dk-finder__go { min-height: 48px; }

.dk-pdp__secs { display: grid; gap: 12px; padding-top: 12px; }
.dk-acc { border: 1px solid var(--dk-hair); border-radius: var(--dk-r-lg); background: #111114; }
.dk-acc > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 0 24px; list-style: none; cursor: pointer; }
.dk-acc > summary::-webkit-details-marker { display: none; }
.dk-acc > summary svg { flex: none; width: 18px; height: 18px; color: var(--dk-muted); transition: transform .15s; }
.dk-acc[open] > summary svg { transform: rotate(180deg); }
.dk-acc > :not(summary) { margin: 0 24px 24px; }
.dk-acc__note { font-size: 14px; }
.dk-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 32px; }
.dk-kv div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--dk-line); }
.dk-kv dt { font-family: var(--dk-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--dk-muted); }
.dk-kv dd { margin: 0; text-align: right; font-family: var(--dk-mono); font-size: 13.5px; overflow-wrap: anywhere; }
.dk-refs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.dk-refs__g { display: grid; gap: 8px; align-content: start; padding: 14px 16px; border: 1px solid var(--dk-line); border-radius: var(--dk-r); background: var(--dk-bg-2); }
.dk-refs__g ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-family: var(--dk-mono); font-size: 13.5px; letter-spacing: .03em; }
.dk-refs__g li { overflow-wrap: anywhere; }
.dk-refs__g ul.dk-refs__models { font-family: var(--dk-text); letter-spacing: 0; font-size: 14px; }
.dk-refs__models abbr { margin-left: 6px; text-decoration: none; }
.dk-lines { margin: 0; padding: 0; list-style: none; display: grid; }
.dk-lines li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 0; border-bottom: 1px solid var(--dk-line); }
.dk-lines a { color: var(--dk-ink); }
.dk-rich { color: var(--dk-ink-2); }
.dk-rich :is(p, ul, ol) { margin: 0 0 12px; }
.dk-form { display: grid; gap: 14px; max-width: 640px; }
.dk-textarea { min-height: 110px; padding-block: 12px; }
.dk-err { margin: 0; color: var(--dk-err); font-size: 14px; }
.dk-qa { margin: 0; padding: 0; list-style: none; display: grid; gap: 18px; }
.dk-qa p { margin: 0; }
.dk-qa blockquote { margin: 10px 0 0; padding-left: 14px; border-left: 2px solid var(--dk-accent); color: var(--dk-ink-2); }

@media (max-width: 1023px) {
    .dk-pdp { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .dk-pdp__buy { position: static; padding: 20px; }
}
@media (max-width: 760px) {
    .dk-acc > summary { padding: 0 16px; min-height: 56px; }
    .dk-acc > :not(summary) { margin: 0 16px 18px; }
    .dk-pdp__main img { padding: 20px; }
}

/* predictive search dropdown (public/storefront/theme-behaviours.js) */
.dk .cv-tb-sugs { border-color: var(--dk-hair); border-radius: var(--dk-r); box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .85); background: var(--dk-card); }
.dk .cv-tb-sug { min-height: 44px; box-sizing: border-box; }
.dk .cv-tb-sug img { background: #F2F2F3; border-radius: 6px; }
.dk .cv-tb-head { min-height: 0; padding-top: 12px; font-family: var(--dk-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--dk-accent-ink); }

/* ── Footer ────────────────────────────────────────────────────────────────
   The shared footer paints itself with --color-primary, which this theme
   turns orange for buttons. Inside the footer it goes back to near-black, so
   the newsletter, the columns and the assembly video read as in the mockups. */
.dk footer[role="contentinfo"] { --color-primary: #070709; --color-on-primary: var(--dk-ink); background-color: #070709; border-top-color: var(--dk-line); }
.dk footer[role="contentinfo"] h2 { font-family: var(--dk-display); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; }
.dk footer[role="contentinfo"] button[type="submit"] { background: var(--dk-accent); color: var(--dk-on-accent); border-color: var(--dk-accent); }

/* "Só peças para <veículo>" — the listing's vehicle switch. */

/* The header, search box and mega panels span the window; their content stays in the 1440px column. */
.dk-hdr .dk-mega .dk-wrap { max-width: 1440px; padding-inline: max(40px, env(safe-area-inset-left, 0px)); }
.dk-mega__cols { grid-template-columns: repeat(auto-fit, minmax(220px, 300px)); }
/* «Produtos», layout A1 (2026-10-16): share bars, car makes in two columns, the
   «Pelo seu carro» finder card, and the A–Z panel behind «Todas as N marcas». */
.dk-mega__in:has(.dk-mega__finder) { grid-template-columns: minmax(0, 1fr) 340px; }
.dk-mega__cols:has(.is-two) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 40px; }
.dk-mega__bar { display: block; height: 2px; margin-top: 7px; border-radius: 2px; background: var(--dk-line); }
.dk-mega__bar > i { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--dk-accent), #FF8A5C); }
.dk-mega__col li.is-more { margin-top: 6px; }
.dk-mega__col.is-two ul { grid-template-columns: 1fr 1fr; gap: 0 24px; }
.dk-mega__col.is-two li:not(.is-more) a { padding: 7px 0; border-bottom: 1px solid var(--dk-line); font-size: 14px; font-weight: 500; }
.dk-mega__col.is-two li.is-more { grid-column: 1 / -1; margin-top: 14px; }
.dk-mega__finder { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 20px; border: 1px solid var(--dk-hair); border-radius: var(--dk-r-lg); background: var(--dk-raised); }
.dk-mega__finder > b { font-family: var(--dk-display); font-weight: 700; font-size: 19px; line-height: 1.2; }
.dk-mega__finder .dk-finder { padding: 0; border: 0; background: none; }
/* One field per line in the card: «Selecionar …» / «Escolha a m…» were cut at half width. */
.dk-mega__finder .dk-finder .dk-finder__bar { grid-template-columns: minmax(0, 1fr); }
/* The VIN tab's «Pesquisar» is the same button as the vehicle tab's (it was a 30 px strip). */
.dk-mega__finder .dk-finder .dk-finder__vin .dk-finder__go { min-height: 56px; padding: 0 22px; }
/* Focus on controls drawn inside a rounded box (finder fields, the searchable
   dropdowns, search pills, the quantity stepper) shows on the box: the global
   body.dk :focus-visible outline out-ranked their own outline:none and drew a
   square inside the rounded field. */
body.dk :is(.dk-finder__f, .dk-search, .dk-fsearch, .dk-az__q, .dk-qty) :focus-visible,
body.dk .dk-combo__list:focus-visible { outline: none; }
body.dk .dk-qty:focus-within { border-color: var(--dk-accent); box-shadow: 0 0 0 3px rgba(255, 90, 31, .18); }
body.dk .dk-qty button:focus-visible { background: var(--dk-raised); color: var(--dk-accent-ink); }
.dk-mega__stat { padding-top: 12px; border-top: 1px solid var(--dk-hair); color: var(--dk-muted); font-size: 13px; text-decoration: none; }
.dk-mega__stat:hover { color: var(--dk-accent-ink); }
.dk-az { max-height: calc(100dvh - 110px); overflow-y: auto; overscroll-behavior: contain; padding-block: 28px 36px; }
.dk-az__head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 16px; }
.dk-az__back { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px solid var(--dk-edge); border-radius: 12px; background: none; color: var(--dk-ink); font-family: var(--dk-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.dk-az__back:hover { border-color: var(--dk-accent); }
.dk-az__back svg { width: 15px; height: 15px; }
.dk-az__tabs { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--dk-field); }
.dk-az__tabs button { height: 34px; padding: 0 14px; border: 0; border-radius: 9px; background: none; color: var(--dk-muted); font-size: 14px; cursor: pointer; }
.dk-az__tabs button[aria-selected="true"] { background: var(--dk-raised); color: var(--dk-ink); box-shadow: inset 0 0 0 1px var(--dk-edge); }
.dk-az__tabs small, .dk-az__list small { font-family: var(--dk-mono); font-size: 11px; color: var(--dk-faint); }
.dk-az__q { margin-left: auto; display: flex; align-items: center; gap: 10px; width: min(360px, 100%); height: 42px; padding: 0 14px; box-sizing: border-box; border: 1px solid var(--dk-edge); border-radius: 10px; background: var(--dk-field); color: var(--dk-faint); }
.dk-az__q:focus-within { border-color: var(--dk-accent); box-shadow: 0 0 0 3px rgba(255, 90, 31, .18); }
.dk-az__q svg { width: 16px; height: 16px; flex: none; }
.dk-az__q input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: none; color: var(--dk-ink); font: 15px var(--dk-text); }
.dk-az__q input:focus, .dk-az__q input:focus-visible { outline: none; box-shadow: none; }
.dk-az__letters { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--dk-hair); }
.dk-az__letters button { width: 30px; height: 30px; border: 0; border-radius: 6px; background: none; color: var(--dk-ink); font-family: var(--dk-mono); font-size: 12px; cursor: pointer; }
.dk-az__letters button:hover { background: var(--dk-raised); }
.dk-az__letters button.is-on { background: var(--dk-accent); color: var(--dk-on-accent); }
.dk-az__letters button:disabled { color: var(--dk-edge); background: none; cursor: default; }
.dk-az__list { columns: 6 150px; column-gap: 32px; }
.dk-az__list section { break-inside: avoid; margin-bottom: 12px; }
.dk-az__list h3 { margin: 0 0 2px; font-family: var(--dk-mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; color: var(--dk-accent); }
.dk-az__list a { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 3px 0; color: var(--dk-ink); font-size: 14px; text-decoration: none; }
.dk-az__list a:hover { color: var(--dk-accent-ink); }
.dk-az__none { margin: 0; color: var(--dk-muted); }
/* Search fields: the rounded box shows the focus ring, never the input
   inside it (the global focus outline drew a square within the pill). */
.dk-search input:focus, .dk-search input:focus-visible, .dk-fsearch input:focus, .dk-fsearch input:focus-visible { outline: none; box-shadow: none; border: 0; }
.dk-fsearch:focus-within { border-color: var(--dk-accent); box-shadow: 0 0 0 3px rgba(255, 90, 31, .18); }
/* Shared pages still framed at Tailwind's 7xl (1280px) — the TecDoc browse
   pages — take the same 1440px column as the rest of the theme. */
.dk main .max-w-7xl { max-width: 1440px; }

/* ── No square corners (user decision 2026-10-15) ───────────────────────────
   The shared blocks this theme reuses (cart, account, CMS sections, forms,
   footer) are drawn square by the default theme. Here they follow the
   theme's shapes: boxes 14px, fields 10px, buttons and icon buttons pills.
   The theme's own `dk-` components already have their radii and are left
   alone. */
.dk :is(main, footer) .border:not([class*="dk-"]),
.dk :is(main, footer) :is([class*="bg-surface-container"], .bg-surface-variant):not([class*="dk-"]):not(.border-b):not(.border-t) { border-radius: 14px; }
/* clip, not hidden: hidden makes the grid a scroll container, and a sticky
   child (the checkout summary, top: 8rem) then sat 128px down for good. */
.dk :is(main, footer) :is(.hairline-grid, .gap-px[class*="bg-hairline"]) { border-radius: 14px; overflow: clip; }
.dk :is(main, footer) :is(.hairline-grid, .gap-px[class*="bg-hairline"]) > *, .dk :is(main, footer) .hairline-grid .aspect-square { border-radius: 0 !important; }
.dk :is(main, footer) .border:not(.hairline-grid > *) > .aspect-square.border-b:first-child { border-radius: 13px 13px 0 0; }
.dk :is(main, footer) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):not([class*="dk-"]):not(.dk-search input):not(.dk-fsearch input) { border-radius: 10px; }
.dk :is(main, footer) .inline-flex.items-stretch.border { overflow: hidden; }
.dk :is(main, footer) .inline-flex.items-stretch.border > input { border-radius: 0; }
.dk :is(main, footer) .group\/btn,
.dk :is(main, footer) button[type="submit"]:not([class*="dk-"]),
.dk :is(main, footer) :is(.w-9, .w-10, .w-11).border { border-radius: 999px; }
.dk :is(main, footer) table { border-collapse: separate; border-spacing: 0; border-radius: 14px; overflow: hidden; }
.dk :is(main, footer) img.border { border-radius: 10px; }
/* Cards that touched (one shared hairline) now stand apart, or their rounded
   corners would meet. */
.dk :is(main, footer) .grid:has(> a.border, > div.border, > article.border):not(.hairline-grid):not([class*="dk-"]) { gap: 16px; }

/* Hero background image (2026-10-15): `background_image` on hero-rich. The
   picture fills the hero; a scrim from the left and the bottom keeps the copy
   and the finder readable. Without the field nothing here applies. */
.dk-hero.has-bg { background: var(--dk-bg); }
/* The stage is the picture's box. Before theme.js sizes it (or without JS)
   it is the hero and the picture sits at the hero's height, anchored right.
   Sized (`.is-sized`), it is exactly the picture, so the motion layers can be
   placed in the picture's own coordinates. */
.dk-hero > .dk-hero__stage { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.dk-hero > .dk-hero__stage.is-sized { inset: auto; overflow: visible; }
.dk-hero__bg { position: absolute; top: 0; right: 0; bottom: 0; left: auto; width: auto; max-width: none; height: 100%; object-fit: contain; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); }
.dk-hero__stage.is-sized .dk-hero__bg { inset: 0; width: 100%; height: 100%; object-fit: fill; }
.dk-hero__stage.is-sized.is-cover .dk-hero__bg { -webkit-mask-image: none; mask-image: none; }
.dk-hero.has-bg::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, var(--dk-bg) 0, rgba(11, 11, 14, .88) 24%, rgba(11, 11, 14, .35) 46%, rgba(11, 11, 14, 0) 62%),
    linear-gradient(0deg, var(--dk-bg) 0, rgba(11, 11, 14, .6) 22%, rgba(11, 11, 14, 0) 45%); }
.dk-hero.has-bg::after { z-index: 0; }
.dk-hero.has-bg .dk-hero__grid { min-height: clamp(420px, 40vw, 600px); }
/* The copy stays in the dark left band: the artwork starts near the middle. */
@media (min-width: 721px) {
  .dk-hero.has-bg .dk-hero__copy { flex: 0 1 auto; max-width: min(46%, 620px); }
}
@media (max-width: 720px) {
  .dk-hero__stage:not(.is-sized) .dk-hero__bg { left: 0; width: 100%; object-fit: cover; object-position: 60% center; -webkit-mask-image: none; mask-image: none; }
  .dk-hero.has-bg::before { background: linear-gradient(180deg, rgba(11, 11, 14, .92) 0, rgba(11, 11, 14, .7) 45%, rgba(11, 11, 14, .55) 65%, var(--dk-bg) 100%); }
}

/* Hero motion (theme.js dkHeroFx). Every layer is decorative, transform and
   opacity only, hidden until the script marks the stage live after the first
   paint, paused off screen (`.is-paused`), and still under reduced motion.
   Coordinates are percentages of the 1672 × 800 artwork. */
.dk-hero__atmos, .dk-hero__floor, .dk-hero__pulse, .dk-hero__fx, .dk-hero__hud { position: absolute; pointer-events: none; opacity: 0; transition: opacity 1.4s ease; }
.dk-hero__stage.is-live .dk-hero__atmos, .dk-hero__stage.is-live .dk-hero__floor,
.dk-hero__stage.is-live .dk-hero__fx, .dk-hero__stage.is-live .dk-hero__hud { opacity: 1; }
/* The strut's heartbeat: a soft glow along its axis, in time with the trails. */
.dk-hero__pulse { left: 48.5%; top: 8%; width: 18%; height: 88%; transform: rotate(26deg); background: radial-gradient(closest-side, rgba(255, 110, 40, .24), transparent); mix-blend-mode: screen; }
.dk-hero__stage.is-live .dk-hero__pulse { opacity: .35; animation: dkPulse 4s ease-in-out infinite; }
@keyframes dkPulse { 0%, 100% { opacity: .35; } 50% { opacity: .85; } }
.dk-hero__atmos, .dk-hero__floor { inset: 0; }
.dk-hero__atmos::before, .dk-hero__atmos::after, .dk-hero__floor::before, .dk-hero__floor::after { content: ""; position: absolute; will-change: transform, opacity; }
/* Smoke: two faint drifts, low on the left and behind the strut. */
.dk-hero__atmos::before { left: 14%; top: 44%; width: 34%; height: 38%; background: radial-gradient(closest-side, rgba(190, 194, 205, .12), transparent); animation: dkSmoke 22s ease-in-out infinite alternate; }
.dk-hero__atmos::after { left: 46%; top: 8%; width: 30%; height: 60%; background: radial-gradient(closest-side, rgba(255, 120, 60, .1), transparent); animation: dkSmoke 28s ease-in-out -12s infinite alternate-reverse; }
/* Floor: the orange streak and the reflection under the products. */
.dk-hero__floor::before { left: 24%; top: 69%; width: 42%; height: 9%; background: radial-gradient(closest-side, rgba(255, 110, 40, .5), transparent); mix-blend-mode: screen; animation: dkFloor 7s ease-in-out infinite alternate; }
.dk-hero__floor::after { left: 44%; top: 85%; width: 40%; height: 14%; background: radial-gradient(closest-side, rgba(255, 100, 40, .34), transparent); mix-blend-mode: screen; animation: dkFloorPulse 8s ease-in-out infinite; }
/* Energy trails + sparks: one canvas over the strut and its rings. */
.dk-hero__fx { left: 33.4928%; top: 5%; width: 59.8086%; height: 95%; mix-blend-mode: screen; transform: translate3d(var(--dk-px, 0px), var(--dk-py, 0px), 0); }
/* HUD: one thing moves at a time, each on its own clock. */
.dk-hero__hud { inset: 0; width: 100%; height: 100%; overflow: visible; transform: translate3d(var(--dk-hx, 0px), var(--dk-hy, 0px), 0); }
.dk-hero__hud * { fill: none; stroke: none; opacity: 0; transform-box: fill-box; }
.dk-hud__draw, .dk-hud__graph { stroke: rgba(255, 112, 44, .95); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-dasharray: 100; stroke-dashoffset: 100; stroke-linecap: round; stroke-linejoin: round; }
.dk-hud__under { stroke: #FF6A2B; stroke-width: 2; vector-effect: non-scaling-stroke; }
.dk-hud__tick, .dk-hud__scan, .dk-hud__sweep { fill: #FF6A2B; }
.is-live .dk-hud__draw { animation: dkHudDraw 6s ease-in-out 1s infinite; }
.is-live .dk-hud__tick { animation: dkHudTick 7s ease-in-out 2s infinite alternate; }
.is-live .dk-hud__under { animation: dkHudUnder 4.5s ease-in-out 3s infinite; }
.is-live .dk-hud__scan { animation: dkHudScan 5s linear 4s infinite; }
.is-live .dk-hud__graph { animation: dkHudDraw 7s ease-in-out 2.5s infinite; }
.is-live .dk-hud__sweep { animation: dkHudSweep 5.5s linear 5s infinite; }
@keyframes dkSmoke { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(7%, -8%, 0) scale(1.15); } }
@keyframes dkFloor { from { transform: translate3d(-9%, 0, 0) scaleX(.88); opacity: .5; } to { transform: translate3d(9%, 0, 0) scaleX(1.1); opacity: 1; } }
@keyframes dkFloorPulse { 0%, 100% { opacity: .45; } 50% { opacity: .9; } }
@keyframes dkHudDraw { 0% { stroke-dashoffset: 100; opacity: 0; } 8% { opacity: 1; } 40% { stroke-dashoffset: 0; } 75% { stroke-dashoffset: 0; opacity: .85; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes dkHudTick { 0% { transform: translateX(0); opacity: .2; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(276px); opacity: .2; } }
@keyframes dkHudUnder { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
@keyframes dkHudScan { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: .55; } 85% { opacity: .55; } 100% { transform: translateY(222px); opacity: 0; } }
@keyframes dkHudSweep { 0% { transform: translateX(0); opacity: 0; } 10% { opacity: .7; } 90% { opacity: .7; } 100% { transform: translateX(122px); opacity: 0; } }
.dk-hero__stage.is-paused *, .dk-hero__stage.is-paused *::before, .dk-hero__stage.is-paused *::after { animation-play-state: paused !important; }
@media (max-width: 1199px) {
  .dk-hero__floor::before, .dk-hero__floor::after { opacity: .7; animation-duration: 14s; }
}
@media (max-width: 720px) {
  .dk-hud__under, .dk-hud__graph, .dk-hud__sweep, .dk-hud__scan { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dk-hero__stage *, .dk-hero__stage *::before, .dk-hero__stage *::after { animation: none !important; }
  .dk-hero__fx, .dk-hero__hud { display: none; }
  .dk-hero__stage .dk-hero__pulse { opacity: .4; }
  .dk-hero__floor::before, .dk-hero__floor::after { opacity: .7; }
}
/* Panels painted with the primary colour were drawn for a black primary and
   carry white text (text-white/60…/85). Here the primary is orange, so that
   text — and the white bullets — take the dark on-orange ink instead. */
.dk main .bg-primary :is([class*="text-white"]) { color: color-mix(in srgb, var(--dk-on-accent) 82%, transparent); }
.dk main .bg-primary :is([class*="bg-white"]) { background-color: var(--dk-on-accent); }

/* Finder dropdowns (2026-10-15): a dark, searchable list over each native
   select (theme.js dkCombo). The select stays in the form, hidden; the
   trigger takes its place at the size of `.dk-finder__f .dk-select`. */
.dk-combo__native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; overflow: hidden; }
.dk-combo__btn { display: block; width: 100%; height: 24px; padding: 0 22px 0 0; border: 0; background: transparent no-repeat right 0 center / 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A1A1AA' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  color: var(--dk-ink); font: inherit; font-size: 14.5px; line-height: 24px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.dk-combo__btn:focus { outline: none; }
.dk-combo__btn:disabled { color: var(--dk-muted); opacity: .7; cursor: default; }
.dk-finder__f.is-open .dk-combo__btn { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF5A1F' stroke-width='2'%3E%3Cpath d='m6 15 6-6 6 6'/%3E%3C/svg%3E"); }
.dk-finder__f.is-open { border-color: var(--dk-accent); z-index: 40; }
.dk-combo__panel { position: absolute; left: -1px; right: -1px; top: calc(100% + 6px); z-index: 40; min-width: 240px; display: grid; gap: 6px; padding: 8px;
  border: 1px solid var(--dk-edge); border-radius: 12px; background: #141418; box-shadow: 0 18px 40px rgba(0, 0, 0, .55); }
.dk-finder__f.is-up .dk-combo__panel { top: auto; bottom: calc(100% + 6px); }
.dk-combo__panel[hidden] { display: none; }
.dk-combo__search { width: 100%; height: 38px; box-sizing: border-box; padding: 0 12px 0 34px; border: 1px solid var(--dk-edge); border-radius: 8px; color: var(--dk-ink); font: inherit; font-size: 14px;
  background: var(--dk-field) no-repeat 11px center / 15px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A1A1AA' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); }
.dk-combo__search:focus { outline: none; border-color: var(--dk-accent); }
.dk-combo__search::placeholder { color: var(--dk-muted); }
.dk-combo__list { margin: 0; padding: 0; list-style: none; max-height: 260px; overflow-y: auto; overscroll-behavior: contain; outline: none; }
.dk-combo__opt { padding: 9px 12px; border-radius: 8px; font-size: 14px; line-height: 1.35; color: var(--dk-ink-2); cursor: pointer; }
.dk-combo__opt.is-active { background: rgba(255, 90, 31, .12); color: var(--dk-ink); }
.dk-combo__opt[aria-selected="true"] { color: var(--dk-accent); font-weight: 600; }
.dk-combo__none { padding: 9px 12px; font-size: 14px; color: var(--dk-muted); }
/* The home page's vehicle finder, directly under the header. */
/* No band of its own: it floats over the top of the hero, so the hero's
   background image runs up behind it (client request 2026-10-15), and the
   hero makes room for it. On a phone the finder stacks into five rows, so
   there it stays in the flow, still without a dividing line. */
.dk-topfinder { position: absolute; left: 0; right: 0; z-index: 30; padding-top: 18px; }
body:has(> .dk-topfinder) .dk-hero { padding-top: 150px; }
@media (max-width: 760px) {
    .dk-topfinder { position: relative; padding-block: 14px 0; }
    body:has(> .dk-topfinder) .dk-hero { padding-top: 0; }
}
/* The native select under each finder combo stays in the form (it posts the
   value) but must never show: disabled, it painted at 70% opacity and its
   arrow appeared in the field's top-left corner. */
.dk-finder__f .dk-combo__native { opacity: 0 !important; background-image: none !important; pointer-events: none; }
/* Product cards are standalone rounded cards: a shared hairline grid that
   holds them («Componentes em destaque») becomes a gap grid, and the cards
   keep their radius and border — squared and clipped, the orange hover
   border showed as a cut-off square. */
.dk :is(main, footer) .hairline-grid:has(> .dk-pc) { gap: 16px; border: 0; border-radius: 0; overflow: visible; background: none; }
.dk :is(main, footer) .hairline-grid > .dk-pc { border-radius: var(--dk-r-lg) !important; border-width: 1px !important; }

/* The chosen vehicle (2026-10-15): a car icon in the header tools with an
   orange dot; its name, «Mudar veículo» and «Limpar veículo» open in a small
   panel. Replaces the full-width green bar that sat under the header. */
.dk-vsel { position: relative; }
.dk-vsel__dot { position: absolute; top: 9px; right: 9px; width: 8px; height: 8px; border-radius: 999px; background: var(--dk-accent); box-shadow: 0 0 0 2px var(--dk-bg); }
.dk-vsel__btn[aria-expanded="true"] { background: var(--dk-raised); }
.dk-vsel__panel { position: absolute; right: 0; top: 100%; z-index: 50; display: grid; gap: 6px; width: max-content; min-width: 240px; max-width: min(340px, calc(100vw - 32px)); margin-top: 6px; padding: 14px 16px;
  background: var(--dk-card); border: 1px solid var(--dk-hair); border-radius: var(--dk-r); box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .8); }
.dk-vsel__eyebrow { font-family: var(--dk-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dk-muted); }
.dk-vsel__panel b { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--dk-ink); }
.dk-vsel__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--dk-hair); }
.dk-vsel__acts form { margin: 0; }
.dk-vsel__acts a, .dk-vsel__acts button { padding: 4px 0; border: 0; background: none; font-family: var(--dk-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.dk-vsel__acts a { color: var(--dk-accent); }
.dk-vsel__acts button { color: var(--dk-muted); }
.dk-vsel__acts a:hover, .dk-vsel__acts button:hover { color: var(--dk-ink); }
/* Cart and checkout controls from the shared templates, in the theme's
   shapes and accent: round radios with a dot, rounded checkboxes with a
   tick, round step numbers (the current one orange) and a round quantity
   badge on the order summary's thumbnails. */
.dk main input[type="radio"].appearance-none { border-radius: 50%; }
.dk main input[type="checkbox"].appearance-none { border-radius: 5px; }
.dk main input.appearance-none:checked { background-color: var(--dk-accent) !important; border-color: var(--dk-accent) !important; }
.dk main input[type="radio"].appearance-none:checked { box-shadow: inset 0 0 0 3px var(--dk-bg); }
.dk main input[type="checkbox"].appearance-none:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23140A05' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); background-size: 12px; background-position: center; background-repeat: no-repeat; }
.dk main .w-7.h-7.border { border-radius: 999px; }
.dk main .w-7.h-7.bg-on-surface { background: var(--dk-accent); border-color: var(--dk-accent); color: var(--dk-on-accent); }
.dk main span.bg-on-surface.text-surface { border-radius: 999px; background: var(--dk-accent); color: var(--dk-on-accent); }
.dk main aside .w-14.h-14 { border-radius: 10px; overflow: visible; }
.dk main aside .w-14.h-14 > img { border-radius: 9px; background: var(--dk-light); }
/* A cart/checkout grid with a side summary draws its dividers with a grey
   background; where the sticky summary is not, that grey showed as a block.
   The column takes the summary's colour instead. */
.dk main .gap-px[class*="bg-hairline"]:has(> aside) { background-color: #141418; }

/* ── «Os meus veículos»: the header vehicle list (VehicleGarage) ──────────
   Click a row to shop for that vehicle; × drops it. No inner scroll: at most
   ten rows, the rest behind «Ver todos». */
.dk-vsel__panel { min-width: 280px; }
.dk-vsel__list { display: grid; gap: 2px; margin: 4px -8px 0; padding: 0; list-style: none; }
.dk-vsel__list li { display: flex; align-items: center; gap: 2px; border-radius: 10px; }
.dk-vsel__list li:hover { background: var(--dk-raised); }
.dk-vsel__list form { margin: 0; }
.dk-vsel__list li > form:first-child { flex: 1 1 auto; min-width: 0; }
.dk-vsel__use { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 8px; border: 0; border-radius: 10px; background: none; color: var(--dk-ink); font: inherit; font-size: 14px; line-height: 1.3; text-align: left; cursor: pointer; }
.dk-vsel__use svg { width: 16px; height: 16px; flex: none; color: var(--dk-muted); }
.dk-vsel__use span { overflow-wrap: anywhere; }
.dk-vsel__list li.is-active .dk-vsel__use { font-weight: 600; }
.dk-vsel__list li.is-active .dk-vsel__use svg { color: var(--dk-accent); }
.dk-vsel__list li.is-active { background: color-mix(in srgb, var(--dk-accent) 12%, transparent); }
.dk-vsel__rm { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 0; border-radius: 999px; background: none; color: var(--dk-muted); cursor: pointer; }
.dk-vsel__rm svg { width: 16px; height: 16px; }
.dk-vsel__rm:hover, .dk-vsel__rm:focus-visible { color: var(--dk-ink); background: var(--dk-hair); }
.dk-vsel__more, .dk-vsel__add { display: block; padding: 8px 0 2px; font-family: var(--dk-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.dk-vsel__more { color: var(--dk-muted); }
.dk-vsel__add { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--dk-hair); color: var(--dk-accent); }
.dk-vsel__more:hover, .dk-vsel__add:hover { color: var(--dk-ink); }

/* ------------------------------------------------------------------------
   Listing card (2026-10-16, mockup A1+) + «Características» drawer.
   partials/product-card-listing.blade.php, partials/product-sheet.blade.php,
   themes/dark/product-sheet.js.
   ------------------------------------------------------------------------ */
.dk-pc--rich { background: var(--dk-card); }
.dk-pc--rich:hover { border-color: var(--dk-edge); }
.dk-pc--rich.is-misfit { opacity: .62; }
.dk-pc__strip { margin: 0; padding: 10px 14px; background: #000; border-bottom: 1px solid var(--dk-accent); font: 700 11px/1.2 var(--dk-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dk-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-pc__band { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin: 0; padding: 9px 14px; background: var(--dk-card-2); border-bottom: 1px solid var(--dk-line); font-size: 12.5px; color: var(--dk-muted); }
.dk-pc__band a { position: relative; z-index: 2; color: var(--dk-accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.dk-pc__band svg { width: 14px; height: 14px; }
.dk-pc__band.is-ok { flex-wrap: nowrap; align-items: flex-start; background: var(--dk-ok-soft); color: var(--dk-ok); font-weight: 600; border-color: rgba(74, 222, 128, .25); }
.dk-pc__band.is-ok svg { flex: none; margin-top: 2px; }
/* At the foot of the card (2026-10-16): a rounded note above the stock line. */
.dk-pc__buy .dk-pc__band { border: 1px solid var(--dk-line); border-radius: 10px; min-height: 54px; box-sizing: border-box; align-items: center; line-height: 1.35; }
.dk-pc__buy .dk-pc__band.is-ok { border-color: rgba(74, 222, 128, .25); }
.dk-pc__buy .dk-pc__band.is-no { border-color: rgba(248, 113, 113, .25); }
.dk-pc__band.is-no { background: var(--dk-err-soft); color: var(--dk-err); border-color: rgba(248, 113, 113, .25); }
.dk-pc__in { display: flex; flex-direction: column; gap: 12px; flex: 1; padding: 16px; }
.dk-pc--rich .dk-pc__img { display: flex; align-items: center; justify-content: center; height: 180px; padding: 12px; box-sizing: border-box; border-radius: 12px; background: #fff; overflow: hidden; }
.dk-pc--rich .dk-pc__img img { max-width: 100%; max-height: 156px; width: auto; height: auto; object-fit: contain; transition: transform .3s; }
.dk-pc--rich:hover .dk-pc__img img { transform: scale(1.03); }
.dk-pc__ref { margin: 0 0 -6px; font-family: var(--dk-mono); font-size: 11px; letter-spacing: .04em; color: var(--dk-faint); }
.dk-pc--rich .dk-pc__name { font-size: 14.5px; min-height: calc(3em * 1.35); /* always 3 lines tall, so price and service line up across cards */ }
.dk-pc__price { display: grid; gap: 2px; }
.dk-pc__price .text-on-surface, .dk-pc__price [class*="font-mono"] { font-family: var(--dk-display); font-weight: 800; }
.dk-pc__vat { font-size: 12px; color: var(--dk-faint); }
.dk-pc__spec { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 14px; border: 1px solid var(--dk-line); border-radius: 10px; background: var(--dk-card-2); color: var(--dk-ink); font: inherit; font-size: 13px; font-weight: 700; text-align: left; cursor: pointer; transition: border-color .2s, background-color .2s, transform 140ms cubic-bezier(.23, 1, .32, 1); }
.dk-pc__spec:hover { border-color: var(--dk-edge); background: #18181d; }
.dk-pc__spec:active { transform: scale(.985); }
.dk-pc__spec:focus-visible { outline: 2px solid var(--dk-accent); outline-offset: 2px; }
.dk-pc__spec svg { width: 16px; height: 16px; flex: none; color: var(--dk-accent); }
.dk-pc__spec span { flex: 1; }
.dk-pc__spec .dk-pc__spec-chev { width: 18px; height: 18px; transition: transform .2s; }
.dk-pc__spec:hover .dk-pc__spec-chev { transform: translateX(3px); }
.dk-pc__pair { position: relative; z-index: 2; display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--dk-line); border-radius: 10px; background: var(--dk-card-2); font-size: 12.5px; cursor: pointer; }
.dk-pc__pair b { color: var(--dk-ink); font-size: 13px; }
.dk-pc__pair-row { display: flex; align-items: center; gap: 8px; color: var(--dk-ink-2); }
.dk-pc__pair input { width: 16px; height: 16px; flex: none; accent-color: var(--dk-accent); }
.dk-pc__pair small { color: var(--dk-faint); font-size: 11.5px; }
.dk-pc__pair:has(input:checked) { border-color: rgba(255, 90, 31, .45); }
.dk-pc__svc { border-color: rgba(255, 90, 31, .25); }
.dk-pc__svc small strong { color: var(--dk-accent-ink); }
.dk-pc__buy { display: grid; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--dk-line); }
.dk-pc__buy form { margin: 0; }
.dk-pc__stock { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 12.5px; font-weight: 600; color: var(--dk-ok); }
.dk-pc__stock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.dk-pc__stock.is-backorder { color: var(--dk-accent-ink); }
.dk-pc__stock.is-out_of_stock { color: var(--dk-err); }
.dk-pc__add { position: relative; z-index: 2; width: 100%; }
.dk-pc__add.is-off { opacity: .55; cursor: default; }

/* Promo tile — the 4th cell of the first row (partials/listing-tile). */
.dk-ptile { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 100%; overflow: hidden; border: 1px solid rgba(255, 90, 31, .35); border-radius: var(--dk-r-lg); background: radial-gradient(120% 80% at 70% 20%, rgba(255, 90, 31, .35), transparent 60%), linear-gradient(180deg, #1b1310, #0d0b0b); }
.dk-ptile:hover { border-color: var(--dk-accent); }
.dk-ptile__img { margin: 24px 0 0 22%; width: 72%; padding: 10px; border-radius: 14px; background: #fff; transform: rotate(-6deg); box-shadow: 0 20px 40px rgba(0, 0, 0, .5); transition: transform .4s cubic-bezier(.23, 1, .32, 1); }
.dk-ptile:hover .dk-ptile__img { transform: rotate(-3deg) translateY(-4px); }
.dk-ptile__img img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; }
.dk-ptile__b { display: grid; gap: 6px; margin-top: auto; padding: 20px; }
.dk-ptile__eyebrow { margin: 0; font: 600 11px var(--dk-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dk-accent-ink); }
.dk-ptile__title { margin: 0; font-family: var(--dk-display); font-size: 30px; font-weight: 800; line-height: 1.05; color: var(--dk-ink); text-wrap: balance; }
.dk-ptile__text { margin: 0; font-size: 13px; color: var(--dk-ink-2); }
.dk-ptile__cta { position: relative; z-index: 2; margin-top: 6px; color: var(--dk-accent); font-weight: 700; text-decoration: none; }
.dk-ptile__cta span { display: inline-block; transition: transform .2s; }
.dk-ptile:hover .dk-ptile__cta span { transform: translateX(3px); }
.dk-ptile__cover { position: absolute; inset: 0; z-index: 1; }
@media (max-width: 600px) {
    .dk-ptile { min-height: 0; }
    .dk-ptile__img { display: none; }
}

.dk-sheet-open { overflow: hidden; }
.dk-sheet-scrim { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, .6); opacity: 0; transition: opacity .25s; }
.dk-sheet-scrim.is-open { opacity: 1; }
.dk-sheet { position: fixed; top: 0; right: 0; bottom: 0; z-index: 81; display: flex; flex-direction: column; width: min(460px, 100%); background: var(--dk-bg); border-left: 1px solid var(--dk-hair); box-shadow: -30px 0 60px rgba(0, 0, 0, .5); transform: translateX(100%); transition: transform 320ms cubic-bezier(.32, .72, 0, 1); }
.dk-sheet.is-open { transform: none; }
.dk-sheet__bar { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--dk-line); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dk-faint); }
.dk-sheet__x { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--dk-hair); border-radius: 10px; background: var(--dk-field); color: var(--dk-ink); cursor: pointer; }
.dk-sheet__x svg { width: 18px; height: 18px; }
.dk-sheet__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 18px; display: grid; gap: 20px; align-content: start; }
.dk-sheet__load { height: 120px; border-radius: 12px; background: linear-gradient(90deg, var(--dk-card), var(--dk-card-2), var(--dk-card)); background-size: 200% 100%; animation: dk-sheet-load 1.2s linear infinite; }
@keyframes dk-sheet-load { to { background-position: -200% 0; } }
.dk-sheet__head { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: center; }
.dk-sheet__img { aspect-ratio: 1; border-radius: 12px; background: #fff; display: grid; place-items: center; overflow: hidden; }
.dk-sheet__img img { width: 100%; height: 100%; object-fit: contain; padding: 8px; box-sizing: border-box; }
.dk-sheet__head > div { display: grid; gap: 6px; min-width: 0; }
.dk-sheet__name { margin: 0; font-size: 17px; line-height: 1.3; }
.dk-sheet__sec { display: grid; gap: 8px; }
.dk-sheet__sec h3 { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 11px var(--dk-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dk-accent-ink); }
.dk-sheet__sec h3 span { padding: 2px 6px; border-radius: 6px; background: var(--dk-accent-soft); }
.dk-sheet__pos { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--dk-line); border-radius: 12px; background: var(--dk-card); }
.dk-sheet__pos svg { width: 40px; height: auto; flex: none; }
.dk-sheet__pos b { color: var(--dk-ink); font-size: 14px; }
.dk-sheet__pos p { margin: 4px 0 0; font-size: 12px; color: var(--dk-faint); }
.dk-sheet__car { fill: none; stroke: var(--dk-edge); stroke-width: 1.5; }
.dk-sheet__pos rect:not(.dk-sheet__car), .dk-sheet__pos circle { fill: var(--dk-edge); }
.dk-sheet__pos rect.is-on, .dk-sheet__pos circle.is-on { fill: var(--dk-accent); }
.dk-sheet__dl { margin: 0; border: 1px solid var(--dk-line); border-radius: 12px; background: var(--dk-card); overflow: hidden; }
.dk-sheet__dl div { display: grid; grid-template-columns: 42% minmax(0, 1fr); gap: 10px; padding: 9px 12px; border-top: 1px solid var(--dk-line); font-size: 13px; }
.dk-sheet__dl div:first-child { border-top: 0; }
.dk-sheet__dl dt { color: var(--dk-faint); }
.dk-sheet__dl dd { margin: 0; color: var(--dk-ink); overflow-wrap: anywhere; }
.dk-sheet__hint { margin: 0; font-size: 12px; color: var(--dk-faint); }
.dk-sheet__oeg { display: grid; gap: 6px; }
.dk-sheet__oeg small { font-size: 11.5px; font-weight: 600; color: var(--dk-muted); }
.dk-sheet__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dk-sheet__chip { padding: 5px 9px; border: 1px solid var(--dk-hair); border-radius: 8px; background: var(--dk-field); color: var(--dk-ink); font-size: 12px; cursor: pointer; transition: border-color .15s, transform 120ms; }
.dk-sheet__chip:hover { border-color: var(--dk-accent); }
.dk-sheet__chip:active { transform: scale(.96); }
.dk-sheet__chip.is-copied { border-color: var(--dk-ok); color: var(--dk-ok); }
.dk-sheet__models { margin: 0; padding: 0; list-style: none; border: 1px solid var(--dk-line); border-radius: 12px; background: var(--dk-card); }
.dk-sheet__models li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--dk-line); font-size: 13px; }
.dk-sheet__models li:first-child { border-top: 0; }
.dk-sheet__models em { align-self: center; padding: 2px 8px; border: 1px solid var(--dk-hair); border-radius: 999px; font-size: 11px; font-style: normal; white-space: nowrap; color: var(--dk-faint); }
.dk-sheet__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--dk-line); background: var(--dk-bg-2); }
.dk-sheet__add { flex: none; display: inline-flex; align-items: center; gap: 8px; }
.dk-sheet__add svg { width: 16px; height: 16px; }
.dk-sheet__add[hidden] { display: none; }
@media (max-width: 600px) {
    .dk-sheet { top: auto; left: 0; width: 100%; height: 88vh; height: 88dvh; border-left: 0; border-top: 1px solid var(--dk-hair); border-radius: 20px 20px 0 0; transform: translateY(100%); }
    .dk-sheet__head { grid-template-columns: 88px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .dk-sheet { transition: opacity .2s; transform: none; opacity: 0; }
    .dk-sheet.is-open { opacity: 1; }
}

/* Phone header: the logo gives way so the icons fit (no sideways scroll),
   and «Os meus veículos» opens the full width of the header row instead of
   hanging off the car icon past the left edge. */
@media (max-width: 760px) {
    .dk-hdr__row { position: relative; }
    .dk-vsel { position: static; }
    .dk-vsel__panel { left: 0; right: 0; width: auto; min-width: 0; max-width: none; }
}
@media (max-width: 480px) {
    .dk-hdr__row > .dk-logo { min-width: 0; }
    .dk-logo img, .dk-logo svg { height: auto; max-height: 24px; max-width: 100%; }
    .dk-tools { gap: 0; }
    .dk-tools .dk-icon { width: 40px; height: 40px; }
}

/* Add to cart without leaving the page (cart-ajax.js, 2026-10-16) */
.dk-toast { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 70; display: flex; align-items: center; gap: 12px; max-width: min(420px, calc(100vw - 32px)); padding: 12px 12px 12px 16px; border: 1px solid rgba(74, 222, 128, .3); border-radius: 12px; background: var(--dk-card); color: var(--dk-ink); font-size: 13.5px; box-shadow: 0 18px 40px rgba(0, 0, 0, .5); opacity: 0; transform: translateY(8px); transition: opacity .2s, transform 200ms cubic-bezier(.23, 1, .32, 1); }
.dk-toast.is-on { opacity: 1; transform: none; }
.dk-toast.is-error { border-color: rgba(248, 113, 113, .4); }
.dk-toast p { margin: 0; flex: 1; }
.dk-toast__link { color: var(--dk-accent-ink); font-weight: 600; white-space: nowrap; }
.dk-toast__x { flex: none; width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--dk-muted); font-size: 18px; cursor: pointer; }
.dk-toast__x:hover { color: var(--dk-ink); background: var(--dk-card-2); }
.dk-count.is-bump { animation: dk-bump .3s cubic-bezier(.23, 1, .32, 1); }
@keyframes dk-bump { 50% { transform: scale(1.35); } }
button[aria-busy="true"] { opacity: .7; cursor: progress; }
.dk-btn.is-added { background: var(--dk-ok); border-color: var(--dk-ok); }

/* Listing swapped in place (listing-ajax.js, 2026-10-16) */
[data-listing].is-loading .dk-list__main { pointer-events: none; }
/* The loader (mockup A2): logo ring dimmed, its dot orbiting, the «4» breathing.
   Held in view while the grid scrolls; appears after 150 ms so a quick answer never flashes it. */
.dk-list__main { position: relative; }
/* The whole page sits under it (header included): a dark veil over the
   viewport, the mark in its centre, clicks held until the answer lands. */
.dk-loader { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: rgba(10, 10, 12, .72); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .18s cubic-bezier(.23, 1, .32, 1), visibility 0s linear .18s; }
.dk-loader__in { filter: drop-shadow(0 6px 24px rgba(0, 0, 0, .7)); }
.dk-loader svg { display: block; }
.dk-loader__ring { fill: #FF671D; opacity: .22; }
.dk-loader__four, .dk-loader__orbit { fill: #FF671D; }
[data-listing].is-loading .dk-loader { opacity: 1; visibility: visible; pointer-events: auto; cursor: progress; transition-delay: .15s, .15s; }
[data-listing].is-loading .dk-loader__four { animation: dk-breathe 1.2s ease-in-out infinite; }
[data-listing].is-loading .dk-loader__orbit { transform-box: view-box; transform-origin: 78.7px 17px; animation: dk-orbit 1.1s linear infinite; }
.dk-loader__img { display: block; width: 64px; height: 64px; object-fit: contain; }
[data-listing].is-loading .dk-loader__img { animation: dk-pulse 1.2s ease-in-out infinite; }
@keyframes dk-pulse { 50% { opacity: .55; transform: scale(.94); } }
@keyframes dk-orbit { to { transform: rotate(360deg); } }
@keyframes dk-breathe { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { [data-listing].is-loading .dk-loader__orbit { animation: none; } [data-listing].is-loading .dk-loader__img { animation: dk-breathe 1.2s ease-in-out infinite; } }
@media (prefers-reduced-motion: reduce) { .dk-toast, .dk-count.is-bump { transition: none; animation: none; } }

/* «Sem foto» image (Marca e identidade, 2026-10-16): fills the photo well edge
   to edge on its own black ground, instead of sitting padded on the white plate. */
.dk-pc__ph:has(> .dk-nophoto), .dk-pc--rich .dk-pc__img:has(> .dk-nophoto), .dk-pdp__main:has(> .dk-nophoto) { padding: 0; background: #000; }
.dk-pc__ph img.dk-nophoto, .dk-pc--rich .dk-pc__img img.dk-nophoto, .dk-pdp__main img.dk-nophoto { width: 100%; height: 100%; max-width: none; max-height: none; padding: 0; object-fit: contain; }

/* Newsletter: a little air between the e-mail field and «Subscrever»
   (the shared block's row is gap-0; side by side and stacked alike). */
.dk footer[role="contentinfo"] form div:has(> input[type="email"] + button[type="submit"]) { gap: 10px; }