:root {
    color-scheme: light;
    --spot-elevate: #ffffff;
    --spot-elevate-2: #fffdf7;
    --spot-ink: #1a1618;
    --spot-ink-soft: #6f6660;
    --spot-line: #e3dbcf;
    --spot-veil: rgb(255 255 255 / 88%);
    --spot-glass: rgb(255 255 255 / 72%);
    --spot-shade: rgb(18 18 20 / 10%);
    --spot-dock-bg: rgb(255 255 255 / 92%);
}

[data-thema='donker'] {
    color-scheme: dark;

    --ls-primary: #fdb32b;
    --ls-primary-deep: #f28306;

    --brand-navy: #f7f2e9;
    --brand-navy-deep: #f0e9de;
    --brand-blue: #fdb32b;
    --brand-sky: #f49d3a;
    --brand-sky-soft: #2e2225;
    --brand-orange: #f49d3a;
    --brand-orange-dark: #fdb32b;
    --on-orange: #140f12;
    --brand-cream: #f4e3c9;

    --color-background: #140f12;
    --color-surface: #221a1c;
    --color-border: #524441;
    --color-text: #f7f2e9;
    --color-muted: #bdb2a6;
    --color-success: #35c47a;
    --color-success-bg: #16281f;
    --color-success-text: #7ee0ac;
    --color-error-bg: #2c1a1a;
    --color-error-text: #ff9c9c;
    --color-warning-bg: #2e2513;
    --color-warning-text: #ffd583;
    --color-info-bg: #2e2225;
    --color-info-text: #fdb32b;

    --shadow-soft: 0 1px 2px rgb(0 0 0 / 45%);
    --shadow-card: 0 1px 2px rgb(0 0 0 / 40%), 0 10px 28px rgb(0 0 0 / 45%);
    --shadow-pop: 0 22px 55px rgb(0 0 0 / 60%);
    --shadow-warm: 0 10px 30px rgb(247 150 11 / 24%);

    --spot-elevate: #221a1c;
    --spot-elevate-2: #2b2124;
    --spot-ink: #f7f2e9;
    --spot-ink-soft: #bdb2a6;
    --spot-line: #524441;
    --spot-veil: rgb(18 18 20 / 88%);
    --spot-glass: rgb(28 26 24 / 72%);
    --spot-shade: rgb(0 0 0 / 45%);
    --spot-dock-bg: rgb(24 22 20 / 94%);
}

[data-thema='donker'] body {
    background-color: var(--color-background);
    background-image:
        radial-gradient(1100px 520px at 82% -12%, rgb(247 150 11 / 14%), transparent 62%),
        radial-gradient(760px 420px at -8% 4%, rgb(23 190 187 / 9%), transparent 60%);
}

[data-thema='donker'] .site-header {
    background: rgb(18 18 20 / 86%);
    border-bottom-color: var(--color-border);
}

[data-thema='donker'] body.spot-scrolled .site-header {
    background: rgb(18 18 20 / 96%);
    box-shadow: 0 12px 34px rgb(0 0 0 / 55%);
}

[data-thema='donker'] .collection-logo,
[data-thema='donker'] .payment-logo,
[data-thema='donker'] .card-visual img,
[data-thema='donker'] .mega-product-art img {
    filter: brightness(1.06) contrast(0.96);
}

[data-thema='donker'] .collection-logo {
    filter: grayscale(1) invert(1) brightness(1.6);
    opacity: 0.5;
}

[data-thema='donker'] .collection-logo:hover {
    filter: invert(1) brightness(1.4);
    opacity: 0.95;
}

.spot-theme-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--spot-elevate);
    color: var(--color-text);
    cursor: pointer;
    overflow: hidden;
    transition: border-color 200ms ease, transform 260ms var(--ease-pounce), background 220ms ease;
}

.spot-theme-toggle:hover {
    border-color: var(--ls-primary);
    transform: translateY(-2px) rotate(-8deg);
}

.spot-theme-toggle svg {
    position: absolute;
    width: 20px;
    height: 20px;
    transition: transform 420ms var(--ease-pounce), opacity 260ms ease;
}

.spot-theme-sun { color: var(--ls-primary-deep); }
.spot-theme-moon { color: var(--ls-primary); }

[data-thema='licht'] .spot-theme-moon,
:root:not([data-thema='donker']) .spot-theme-moon {
    opacity: 0;
    transform: translateY(24px) rotate(60deg);
}

[data-thema='donker'] .spot-theme-sun {
    opacity: 0;
    transform: translateY(-24px) rotate(-60deg);
}

.spot-dockbar {
    position: fixed;
    left: 50%;
    bottom: max(0.65rem, env(safe-area-inset-bottom));
    z-index: 70;
    display: none;
    align-items: center;
    gap: 0.15rem;
    width: min(96vw, 480px);
    padding: 0.4rem;
    translate: -50% 0;
    background: var(--spot-dock-bg);
    backdrop-filter: blur(18px) saturate(1.5);
    border: 1px solid var(--spot-line);
    border-radius: 999px;
    box-shadow: 0 14px 40px var(--spot-shade);
    transition: transform 320ms var(--ease-spot), opacity 240ms ease;
}

.spot-dockbar.is-hidden {
    transform: translate(-50%, 140%);
    opacity: 0;
}

.spot-dock-item {
    position: relative;
    flex: 1;
    display: grid;
    justify-items: center;
    gap: 2px;
    padding: 0.45rem 0.2rem 0.4rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--spot-ink-soft);
    font: inherit;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    cursor: pointer;
    transition: color 200ms ease, transform 260ms var(--ease-pounce);
}

.spot-dock-item svg {
    width: 21px;
    height: 21px;
    transition: transform 320ms var(--ease-pounce);
}

.spot-dock-item:hover,
.spot-dock-item.is-active {
    color: var(--ls-primary-deep);
}

.spot-dock-item:hover svg,
.spot-dock-item.is-active svg {
    transform: translateY(-3px) scale(1.12);
}

.spot-dock-item.is-active::after {
    content: '';
    position: absolute;
    inset: auto auto 2px 50%;
    width: 20px;
    height: 3px;
    translate: -50% 0;
    border-radius: 999px;
    background: var(--ls-primary);
    animation: spotBadgePop 380ms var(--ease-pounce) both;
}

.spot-dock-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 2px var(--ls-primary);
}

.spot-dock-count {
    position: absolute;
    top: 2px;
    right: 22%;
    min-width: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--ls-primary);
    color: var(--on-orange);
    font-size: 0.58rem;
    line-height: 16px;
    text-align: center;
}

@media (max-width: 860px) {
    .spot-dockbar { display: flex; }

    body { padding-bottom: 4.6rem; }

    .spot-dock { bottom: 6.6rem !important; }

    .spot-launcher-hint { display: none; }
}

.spot-curtain {
    position: fixed;
    inset: 0;
    z-index: 2147482000;
    display: grid;
    place-items: center;
    pointer-events: none;
    opacity: 0;
    background:
        radial-gradient(700px 460px at 50% 46%, #241d17, #140f12 70%);
}

.spot-curtain.is-in {
    animation: spotCurtainIn 320ms var(--ease-spot) both;
    pointer-events: all;
}

.spot-curtain.is-out {
    animation: spotCurtainOut 460ms var(--ease-spot) both;
}

.spot-curtain img {
    width: clamp(90px, 14vw, 130px);
    height: auto;
    filter: drop-shadow(0 16px 30px rgb(0 0 0 / 55%));
    animation: spotCurtainDash 900ms var(--ease-spot) infinite;
}

@keyframes spotCurtainIn {
    from { opacity: 0; clip-path: inset(0 0 100% 0); }
    to   { opacity: 1; clip-path: inset(0 0 0 0); }
}

@keyframes spotCurtainOut {
    from { opacity: 1; clip-path: inset(0 0 0 0); }
    to   { opacity: 0; clip-path: inset(100% 0 0 0); }
}

@keyframes spotCurtainDash {
    0%   { transform: translateX(-18px) rotate(-4deg); }
    50%  { transform: translateX(18px) rotate(4deg); }
    100% { transform: translateX(-18px) rotate(-4deg); }
}

.spot-cmd {
    position: fixed;
    inset: 0;
    z-index: 2147481000;
    display: grid;
    grid-template-rows: 12vh auto 1fr;
    justify-items: center;
    background: var(--spot-veil);
    backdrop-filter: blur(14px) saturate(1.2);
    opacity: 0;
    visibility: hidden;
    transition: opacity 220ms ease, visibility 220ms;
}

.spot-cmd.is-open {
    opacity: 1;
    visibility: visible;
}

.spot-cmd-panel {
    grid-row: 2;
    width: min(94vw, 660px);
    background: var(--spot-elevate);
    border: 1px solid var(--spot-line);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-pop);
    overflow: hidden;
    transform: translateY(-18px) scale(0.97);
    opacity: 0;
    transition: transform 320ms var(--ease-pounce), opacity 220ms ease;
}

.spot-cmd.is-open .spot-cmd-panel {
    transform: none;
    opacity: 1;
}

.spot-cmd-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.1rem;
    border-bottom: 1px solid var(--spot-line);
}

.spot-cmd-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex: none;
    box-shadow: 0 0 0 2px var(--ls-primary);
    animation: spotIdleBob 4.6s ease-in-out infinite;
}

.spot-cmd-input {
    flex: 1;
    border: 0;
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-size: 1.05rem;
    outline: none;
}

.spot-cmd-input::placeholder { color: var(--spot-ink-soft); }

.spot-cmd-key {
    flex: none;
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--spot-line);
    border-radius: 7px;
    color: var(--spot-ink-soft);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.spot-cmd-list {
    max-height: min(52vh, 420px);
    overflow-y: auto;
    padding: 0.5rem;
    margin: 0;
    list-style: none;
}

.spot-cmd-group {
    padding: 0.55rem 0.75rem 0.25rem;
    color: var(--spot-ink-soft);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.spot-cmd-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius);
    color: var(--color-text);
    text-decoration: none;
    cursor: pointer;
    transition: background 140ms ease, transform 180ms var(--ease-spot);
}

.spot-cmd-item[aria-selected='true'],
.spot-cmd-item:hover {
    background: var(--brand-sky-soft);
    transform: translateX(3px);
}

.spot-cmd-item-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 9px;
    background: var(--ls-primary);
    color: var(--on-orange);
}

.spot-cmd-item-icon svg { width: 16px; height: 16px; }

.spot-cmd-item-body { flex: 1; min-width: 0; }

.spot-cmd-item-title {
    display: block;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.spot-cmd-item-meta {
    display: block;
    font-size: 0.78rem;
    color: var(--spot-ink-soft);
}

.spot-cmd-empty {
    display: grid;
    justify-items: center;
    gap: 0.6rem;
    padding: 2rem 1rem 2.4rem;
    text-align: center;
    color: var(--spot-ink-soft);
}

.spot-cmd-empty img {
    width: 108px;
    height: auto;
    animation: spotIdleBob 4s ease-in-out infinite;
}

.spot-tilt {
    transform-style: preserve-3d;
    transition: transform 420ms var(--ease-spot);
    will-change: transform;
}

.spot-tilt.is-tilting {
    transition: transform 90ms linear;
}

.spot-tilt-shine {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(320px circle at var(--tilt-x, 50%) var(--tilt-y, 50%),
        rgb(255 255 255 / 38%), transparent 62%);
    transition: opacity 260ms ease;
}

.spot-tilt.is-tilting .spot-tilt-shine { opacity: 1; }

.spot-magnetic {
    transition: transform 320ms var(--ease-pounce);
    will-change: transform;
}

.spot-spotlight {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(420px circle at var(--spot-x, 50%) var(--spot-y, 40%),
        rgb(247 150 11 / 10%), transparent 68%);
    transition: opacity 400ms ease;
}

body.spot-pointer-fine .spot-spotlight { opacity: 1; }

.spot-burst {
    position: fixed;
    z-index: 2147480000;
    pointer-events: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--ls-primary);
    animation: spotBurst 760ms var(--ease-spot) forwards;
}

.spot-burst.is-paw {
    width: 16px;
    height: 12px;
    border-radius: 46% 46% 52% 52%;
    background: var(--ls-primary-deep);
}

@keyframes spotBurst {
    0%   { opacity: 1; transform: translate(0, 0) scale(0.4); }
    70%  { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--bx), var(--by)) scale(1.05) rotate(var(--br)); }
}

.spot-flyer {
    position: fixed;
    z-index: 2147480001;
    pointer-events: none;
    border-radius: 14px;
    object-fit: cover;
    box-shadow: 0 18px 40px rgb(18 18 20 / 34%);
    transition: transform 760ms cubic-bezier(0.55, -0.25, 0.35, 1), opacity 760ms ease;
}

.cart-button.is-bumped {
    animation: spotCartBump 620ms var(--ease-pounce);
}

@keyframes spotCartBump {
    0%, 100% { transform: scale(1); }
    35%      { transform: scale(1.24) rotate(-8deg); }
    60%      { transform: scale(0.94) rotate(4deg); }
}

.spot-toasts {
    position: fixed;
    right: clamp(0.8rem, 3vw, 1.6rem);
    bottom: clamp(0.8rem, 3vw, 1.6rem);
    z-index: 2147479000;
    display: grid;
    gap: 0.6rem;
    width: min(92vw, 340px);
    pointer-events: none;
}

.spot-toast {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.9rem;
    background: var(--spot-elevate);
    border: 1px solid var(--spot-line);
    border-left: 4px solid var(--ls-primary);
    border-radius: var(--radius);
    box-shadow: var(--shadow-pop);
    pointer-events: all;
    animation: spotToastIn 460ms var(--ease-pounce) both;
}

.spot-toast.is-leaving {
    animation: spotToastOut 320ms var(--ease-spot) both;
}

.spot-toast img {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--ls-primary);
}

.spot-toast-body { flex: 1; font-size: 0.9rem; line-height: 1.35; }
.spot-toast-body strong { display: block; }

@keyframes spotToastIn {
    from { opacity: 0; transform: translateX(40px) scale(0.92); }
    to   { opacity: 1; transform: none; }
}

@keyframes spotToastOut {
    to { opacity: 0; transform: translateX(30px) scale(0.96); }
}

.spot-parallax {
    will-change: transform;
    transform: translate3d(0, var(--parallax, 0px), 0);
}

.spot-counter {
    font-variant-numeric: tabular-nums;
}

.spot-marquee {
    display: flex;
    gap: 3rem;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.spot-marquee > * {
    display: flex;
    gap: 3rem;
    flex: none;
    animation: spotMarquee 32s linear infinite;
}

.spot-marquee:hover > * { animation-play-state: paused; }

@keyframes spotMarquee {
    to { transform: translateX(-100%); }
}

.cart-button { position: relative; }

.account-dot,
.cart-count {
    animation: spotPulse 3.2s ease-in-out infinite;
}

.product-card,
.category-tile,
.promo-tile {
    position: relative;
}

.product-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(260px circle at var(--tilt-x, 50%) var(--tilt-y, 50%),
        rgb(247 150 11 / 16%), transparent 60%);
    transition: opacity 280ms ease;
}

.product-card:hover::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .spot-curtain,
    .spot-spotlight,
    .spot-burst,
    .spot-flyer {
        display: none !important;
    }

    .spot-tilt { transform: none !important; }
}

.spot-cmd-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 42px;
    padding: 0 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--spot-elevate);
    color: var(--spot-ink-soft);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 200ms ease, color 200ms ease, transform 260ms var(--ease-pounce);
}

.spot-cmd-trigger:hover {
    border-color: var(--ls-primary);
    color: var(--ls-primary-deep);
    transform: translateY(-2px);
}

.spot-cmd-trigger-key {
    padding: 0.14rem 0.42rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 0.66rem;
    letter-spacing: 0.06em;
}

@media (max-width: 1080px) {
    .spot-cmd-trigger-key { display: none; }
}

@media (max-width: 720px) {
    .spot-cmd-trigger { display: none; }
}

body.spot-cmd-locked {
    overflow: hidden;
}

.spot-dockbar .spot-dock-item[data-spot-dock='search'] {
    color: var(--spot-ink-soft);
}

[data-thema='donker'] .spot-cmd-trigger,
[data-thema='donker'] .spot-theme-toggle {
    background: var(--spot-elevate-2);
    border-color: var(--spot-line);
    color: var(--spot-ink);
}

.header-actions {
    gap: 0.55rem;
}

.spot-hero-orbit {
    position: absolute;
    inset: -12%;
    pointer-events: none;
    background:
        radial-gradient(38% 38% at 22% 18%, rgb(252 191 57 / 26%), transparent 62%),
        radial-gradient(30% 30% at 82% 74%, rgb(23 190 187 / 22%), transparent 64%);
    animation: spotOrbit 22s ease-in-out infinite alternate;
}

@keyframes spotOrbit {
    from { transform: translate3d(-2%, -1%, 0) scale(1); }
    to   { transform: translate3d(3%, 2%, 0) scale(1.08); }
}

.logo .logo-dark { display: none; }

[data-thema='donker'] .logo .logo-light { display: none; }
[data-thema='donker'] .logo .logo-dark { display: block; }

[data-thema='donker'] .cart-button,
[data-thema='donker'] .account-button.profile-menu-button {
    background: var(--ls-primary);
    border-color: var(--ls-primary);
    color: var(--on-orange);
}

[data-thema='donker'] .cart-icon,
[data-thema='donker'] .account-icon {
    color: var(--on-orange);
}

[data-thema='donker'] .collection-logo {
    filter: brightness(0) invert(1);
    opacity: 0.55;
}

[data-thema='donker'] .collection-logo:hover {
    filter: brightness(0) invert(1);
    opacity: 1;
}

[data-thema='donker'] .payment-logo {
    filter: none;
    background: rgb(248 247 238 / 92%);
    border-radius: 6px;
    padding: 2px 4px;
}

[data-thema='donker'] .consent-banner {
    background: var(--spot-elevate);
    border-color: var(--spot-line);
    color: var(--color-text);
}

[data-thema='donker'] .consent-button {
    background: var(--spot-elevate-2);
    border-color: var(--spot-line);
    color: var(--color-text);
}

[data-thema='donker'] .consent-button[value='accept_all'] {
    color: var(--on-orange);
}

[data-thema='donker'] .search-submit {
    background: var(--ls-primary);
    color: var(--on-orange);
}

[data-thema='donker'] .header-search input[type='search'] {
    background: var(--spot-elevate-2);
    border-color: var(--spot-line);
    color: var(--color-text);
}

[data-thema='donker'] .instant-results,
[data-thema='donker'] .mega-menu,
[data-thema='donker'] .locale-menu,
[data-thema='donker'] .profile-menu-panel,
[data-thema='donker'] .mobile-drawer {
    background: var(--spot-elevate);
    border-color: var(--spot-line);
    color: var(--color-text);
}

[data-thema='donker'] .card-visual {
    background: var(--spot-elevate-2);
}

[data-thema='donker'] .product-card,
[data-thema='donker'] .category-tile,
[data-thema='donker'] .support-panel,
[data-thema='donker'] .seo-block,
[data-thema='donker'] .benefit-item {
    background: var(--spot-elevate);
    border-color: var(--spot-line);
    color: var(--color-text);
}

[data-thema='donker'] .support-panel {
    background: linear-gradient(180deg, #221f1b, #1a1815);
}

[data-thema='donker'] .category-tile {
    background: var(--spot-elevate-2);
}

[data-thema='donker'] .hero-banner-title,
[data-thema='donker'] .hero-banner-body,
[data-thema='donker'] .hero-banner-panel {
    color: #faf8f2;
}

[data-thema='donker'] .collection-logo,
[data-thema='donker'] .collection-logo:hover {
    filter: none;
    opacity: 1;
    background: rgb(248 247 238 / 88%);
    border-radius: 8px;
    padding: 6px 10px;
}

[data-thema='donker'] .promo-tile-kiyoh,
[data-thema='donker'] .kiyoh-facade,
[data-thema='donker'] .kiyoh-widget-frame {
    background: linear-gradient(150deg, #261d20, #141312);
    color: var(--color-text);
    border-color: var(--spot-line);
}

[data-thema='donker'] .kiyoh-facade-button {
    background: var(--ls-primary);
    color: var(--on-orange);
    border-color: transparent;
}

[data-thema='donker'] .kiyoh-widget-heading {
    color: var(--ls-primary);
}

[data-thema='donker'] .account-button,
[data-thema='donker'] .locale-button {
    border-color: var(--spot-line);
    background: var(--spot-elevate-2);
    color: var(--color-text);
}

[data-thema='donker'] .consent-button[value='accept_all'] {
    background: linear-gradient(135deg, var(--ls-primary-high), var(--ls-primary) 55%, var(--ls-primary-deep));
    border-color: transparent;
    color: var(--ls-ink);
}

[data-thema='donker'] .consent-button[value='reject_all'],
[data-thema='donker'] .consent-button-ghost {
    background: rgb(250 248 242 / 8%);
    border-color: rgb(250 248 242 / 22%);
    color: #faf8f2;
}

[data-thema='donker'] .admin-nav a.is-active,
[data-thema='donker'] .admin-nav-link.is-active,
[data-thema='donker'] .admin-nav .is-current {
    background: linear-gradient(135deg, var(--ls-primary), var(--ls-primary-deep));
    color: var(--ls-ink);
}

.admin-nav a.is-active,
.admin-nav-link.is-active,
.admin-nav .is-current {
    color: var(--ls-ink);
}

[data-thema='donker'] .admin-topbar,
[data-thema='donker'] .admin-shell,
[data-thema='donker'] .admin-main {
    background: var(--color-background);
    color: var(--color-text);
}

[data-thema='donker'] .product-badge,
[data-thema='donker'] .availability-available,
[data-thema='donker'] .order-line-status,
[data-thema='donker'] .status-delivered {
    color: #6fe0a1;
}

[data-thema='donker'] .product-tabs,
[data-thema='donker'] .product-tab-list,
[data-thema='donker'] .tabs-nav {
    background: var(--spot-elevate-2);
    border-color: var(--spot-line);
}

[data-thema='donker'] .product-tab,
[data-thema='donker'] .tabs-nav button {
    background: transparent;
    color: var(--spot-ink-soft);
    border-color: transparent;
}

[data-thema='donker'] .product-tab[aria-selected='true'],
[data-thema='donker'] .product-tab.is-active,
[data-thema='donker'] .tabs-nav button[aria-selected='true'] {
    background: var(--spot-elevate);
    color: var(--color-text);
    border-color: var(--ls-primary);
}

[data-thema='donker'] .product-tab-panel,
[data-thema='donker'] .tabs-panel {
    background: var(--spot-elevate);
    border-color: var(--spot-line);
    color: var(--color-text);
}

[data-thema='donker'] .product-tabs-bar {
    background: var(--spot-elevate-2);
    border-color: var(--spot-line);
}

[data-thema='donker'] .product-tab.is-active {
    background: linear-gradient(135deg, var(--ls-primary), var(--ls-primary-deep));
    color: var(--ls-ink);
}

[data-thema='donker'] .product-tab:hover {
    background: rgb(250 248 242 / 8%);
    color: var(--color-text);
}

.support-spot-face {
    --spot-face-scale: 1;
    top: calc(var(--spot-face-w) * -0.52);
    width: calc(var(--spot-face-w) * 1.5);
}

.support-panel {
    margin-top: calc(var(--spot-face-w) * 0.5);
}

.error-spot-face {
    top: calc(var(--spot-face-w) * -0.86);
    width: calc(var(--spot-face-w) * 0.78);
}

.error-card {
    margin-top: calc(var(--spot-face-w) * 0.9);
}

.spot-empty-mascot {
    max-width: 300px;
}

.cart-empty-spot.spot-empty-stage {
    position: relative;
    width: min(340px, 74vw);
    height: auto;
    margin: 0 auto clamp(0.6rem, 2vw, 1.2rem);
}

.spot-empty-mascot {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
}

.spot-empty-glow {
    inset: -14% -8% 4%;
}

.spot-empty-shadow {
    bottom: 2%;
}

.sale-hero-panel h1,
.sale-hero-panel p {
    color: #faf8f2;
}

[data-thema='donker'] .sale-hero-panel {
    background: linear-gradient(150deg, rgb(20 15 18 / 82%), rgb(20 15 18 / 62%));
}

.support-spot-face {
    top: calc(var(--spot-face-w) * -0.44);
    left: 50%;
    width: calc(var(--spot-face-w) * 1.5);
    height: auto;
    filter: drop-shadow(0 16px 26px rgb(20 15 18 / 42%));
    animation: spotIdleBob 5.4s ease-in-out infinite;
}

.support-panel {
    margin-top: calc(var(--spot-face-w) * 0.5);
    overflow: visible;
}

.spot-launcher-head,
.spot-brand-face,
.consent-banner-face,
.spot-card-face,
.error-spot-face {
    background: none;
    border-radius: 0;
    box-shadow: none;
}

.spot-launcher-head {
    width: 108px;
    margin-left: -54px;
    bottom: -14px;
    filter: drop-shadow(0 6px 14px rgb(20 15 18 / 40%));
}

.spot-launcher {
    width: 108px;
    height: 64px;
}

.spot-launcher-glow {
    width: 92px;
    height: 26px;
}