/*!
 * ==================================================================
 *  LuduSpot Platform
 *  Ontwikkeld door: Youri van Hogeloon
 *  Integrity: luduspot/609e14dc99bb2439eb0dc0f7
 * ==================================================================
 */

@font-face {
    font-family: 'Fredoka';
    src: url("../fonts/fredoka-variable-latin-tp8Uwyw.woff2") format('woff2');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Fredoka';
    src: url("../fonts/fredoka-variable-latin-ext-4MyKwOB.woff2") format('woff2');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Figtree';
    src: url("../fonts/figtree-variable-latin-Dj9csJy.woff2") format('woff2');
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Figtree';
    src: url("../fonts/figtree-variable-latin-ext-iZEjIKs.woff2") format('woff2');
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --ls-primary: #f28306;
    --ls-primary-hover: #e47706;
    --ls-primary-deep: #b8530b;
    --ls-primary-high: #fdb32b;
    --ls-cream: #f4e3c9;
    --ls-sand: #d2ba9f;
    --ls-ink: #140f12;
    --ls-slate: #3f322f;
    --ls-bone: #faf8f2;
    --ls-brown: #653618;
    --ls-accent: #3abcf0;
    --ls-accent-deep: #1e7fb0;
    --ls-primary-50: #fdf5eb;
    --ls-primary-100: #fce6cd;
    --ls-primary-200: #facfa0;
    --ls-primary-300: #f7b76e;
    --ls-primary-400: #f49d3a;
    --ls-primary-600: #d27105;
    --ls-primary-700: #ae5e04;
    --ls-primary-800: #854803;
    --ls-primary-900: #5b3102;

    --brand-navy: #3f322f;
    --brand-navy-deep: #140f12;
    --brand-blue: #ae5e04;
    --brand-sky: #f28306;
    --brand-sky-soft: #fdf5eb;
    --brand-orange: #f28306;
    --brand-orange-dark: #b8530b;
    --on-orange: #140f12;
    --brand-cream: #f4e3c9;
    --brand-pink: #3abcf0;
    --color-background: #faf8f2;
    --color-surface: #ffffff;
    --color-border: #e3dbcf;
    --color-text: #1a1618;
    --color-muted: #6f6660;
    --color-success: #12a150;
    --color-success-bg: #e6f6ec;
    --color-success-text: #0d6d38;
    --color-error-bg: #fdecec;
    --color-error-text: #8f2020;
    --color-warning-bg: #fff4d9;
    --color-warning-text: #7a4a05;
    --color-info-bg: #eaf7fd;
    --color-info-text: #1e7fb0;
    --color-danger: #e5484d;
    --radius-small: 10px;
    --radius: 16px;
    --radius-large: 24px;
    --radius-pill: 999px;
    --spacing: 1rem;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --font-size-xs: 0.78rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-md: 1.125rem;
    --font-size-lg: 1.35rem;
    --font-size-xl: clamp(1.55rem, 3vw, 2.05rem);
    --shadow-soft: 0 1px 2px rgb(20 15 18 / 8%), 0 2px 8px rgb(20 15 18 / 6%);
    --shadow-card: 0 1px 2px rgb(20 15 18 / 6%), 0 8px 26px rgb(20 15 18 / 10%);
    --shadow-pop: 0 22px 55px rgb(20 15 18 / 18%);
    --shadow-warm: 0 8px 28px rgb(184 83 11 / 30%);
    --focus-ring: 0 0 0 3px rgb(58 188 240 / 45%);
    --transition-fast: 140ms ease;
    --transition-smooth: 240ms cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spot: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-pounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --font-stack: 'Figtree', 'Segoe UI', system-ui, sans-serif;
    --font-display: 'Fredoka', 'Figtree', 'Segoe UI', system-ui, sans-serif;
    --font-code: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

a {
    text-decoration: none;
}

html {
    scrollbar-width: thin;
    scrollbar-color: #d0ccc6 var(--color-background);
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--color-background);
}

::-webkit-scrollbar-thumb {
    background: #d0ccc6;
    border-radius: 999px;
    border: 2px solid var(--color-background);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--brand-sky);
}

::-webkit-scrollbar-corner {
    background: transparent;
}

body {
    margin: 0;
    font-family: var(--font-stack);
    background: var(--color-background);
    color: var(--color-text);
    line-height: 1.6;
}

html,
body {
    overflow-x: clip;
    max-width: 100%;
}

img {
    max-width: 100%;
}

h1,
h2,
h3,
p,
td,
th,
li,
dd,
dt {
    overflow-wrap: break-word;
}

code,
pre {
    font-family: 'Cascadia Mono', Consolas, monospace;
    font-size: 0.9em;
}

pre {
    background: var(--brand-navy-deep);
    color: var(--color-surface);
    padding: 0.85rem 1.1rem;
    border-radius: var(--radius);
    overflow-x: auto;
}

.container {
    max-width: 1220px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 1.5rem);
}

.topbar {
    background: linear-gradient(90deg, var(--brand-sky), #fdb32b);
    color: var(--on-orange);
    font-size: 0.82rem;
    font-weight: 600;
}

.topbar-inner {
    display: flex;
    gap: 2rem;
    justify-content: center;
    padding: 0.45rem var(--spacing);
    flex-wrap: wrap;
}

.topbar-inner span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.topbar-inner span::before {
    content: '';
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 50%;
    background: #ffffff;
    clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 84% 8%, 38% 68%);
}

.topbar-reviews {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
}

.topbar-reviews:hover {
    color: var(--brand-cream);
}

.topbar-reviews .rating-stars {
    font-size: 0.85rem;
}

@media (min-width: 900px) {
    .topbar-reviews {
        margin-left: auto;
    }
}

.site-header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 0 rgb(63 57 52 / 4%);
}

.header-inner {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

.logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.logo img {
    height: 46px;
    width: auto;
    display: block;
}

.header-search {
    position: relative;
    flex: 1;
    min-width: 0;
    max-width: 560px;
    margin: 0 auto;
}

.header-search form {
    display: flex;
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: 999px;
    overflow: hidden;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.header-search form:focus-within {
    border-color: var(--brand-sky);
    box-shadow: 0 0 0 4px rgb(154 140 123 / 15%);
}

.header-search input[type='search'] {
    flex: 1;
    min-width: 0;
    padding: 0.68rem 1.2rem;
    border: none;
    font-size: 0.98rem;
    font-family: inherit;
    color: var(--color-text);
    background: transparent;
}

.header-search input[type='search']:focus {
    outline: none;
}

.search-submit {
    border: none;
    background: var(--brand-orange);
    color: var(--on-orange);
    font-weight: 700;
    padding: 0 1.5rem;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.95rem;
    transition: background 140ms ease;
}

.search-submit:hover {
    background: var(--brand-orange-dark);
}

.instant-results {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: min(44rem, calc(100vw - 2rem));
    background: var(--color-surface);
    color: var(--color-text);
    border-radius: var(--radius-large);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-pop);
    max-height: min(34rem, 72vh);
    overflow-y: auto;
    z-index: 120;
    animation: instant-results-in 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes instant-results-in {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-0.4rem);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .instant-results {
        animation: none;
    }
}

.instant-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 1.4rem 1.2rem;
    color: var(--color-muted);
    font-size: 0.92rem;
    font-weight: 600;
}

.instant-loading-spinner {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    border: 2.5px solid var(--brand-sky-soft);
    border-top-color: var(--brand-sky);
    animation: instant-spinner 700ms linear infinite;
}

@keyframes instant-spinner {
    to {
        transform: rotate(360deg);
    }
}

.instant-chips {
    position: sticky;
    top: 0;
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    padding: 0.85rem 1.1rem 0.75rem;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    z-index: 2;
}

.instant-chip {
    appearance: none;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--brand-navy);
    font-family: var(--font-stack);
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.32rem 0.85rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background 130ms ease, color 130ms ease, border-color 130ms ease;
}

.instant-chip:hover {
    border-color: var(--brand-sky);
    color: var(--brand-blue);
}

.instant-chip.is-active {
    background: var(--brand-navy);
    border-color: var(--brand-navy);
    color: var(--color-surface);
}

.instant-section {
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--color-border);
}

.instant-section:last-child {
    border-bottom: none;
}

.instant-heading {
    display: block;
    padding: 0.35rem 1.1rem;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--brand-sky);
}

.instant-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.instant-section-head .instant-heading {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding-right: 0;
}

.instant-heading-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    padding: 0.1rem 0.4rem;
    background: var(--brand-sky-soft);
    color: var(--brand-blue);
    border-radius: 999px;
    font-size: 0.7rem;
    letter-spacing: 0;
}

.instant-heading-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 1.1rem 0.35rem 0;
    color: var(--brand-orange);
    font-size: 0.76rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.instant-heading-link:hover {
    text-decoration: underline;
}

.instant-brands {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
    padding: 0.15rem 1.1rem 0.55rem;
}

.instant-brand {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.8rem;
    background: var(--brand-sky-soft);
    color: var(--brand-blue);
    font-size: 0.82rem;
    font-weight: 700;
    border-radius: 999px;
    text-decoration: none;
    transition: background 130ms ease, color 130ms ease;
}

.instant-brand:hover {
    background: var(--brand-blue);
    color: var(--color-surface);
}

.instant-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.5rem 1.1rem;
    text-decoration: none;
    color: var(--color-text);
    font-weight: 600;
}

.instant-item:hover,
.instant-item.is-active {
    background: var(--brand-sky-soft);
}

.instant-art {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 34px;
    border-radius: 7px;
    color: var(--color-surface);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.instant-item-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.35;
}

.instant-item-name {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--brand-navy);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.instant-availability {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.instant-availability-low_stock {
    background: var(--brand-orange);
}

.instant-availability-out_of_stock {
    background: #d64545;
}

.instant-meta {
    color: var(--color-muted);
    font-size: 0.85rem;
    font-weight: 400;
}

.instant-price {
    margin-left: auto;
    font-weight: 800;
    color: var(--brand-navy);
    white-space: nowrap;
}

.instant-footer {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.8rem 1.1rem;
    background: var(--brand-sky-soft);
    color: var(--brand-blue);
    font-size: 0.9rem;
    font-weight: 800;
    text-decoration: none;
    transition: background 130ms ease, color 130ms ease;
}

.instant-footer:hover {
    background: var(--brand-blue);
    color: var(--color-surface);
}

.instant-empty {
    padding: 1rem 1.1rem;
    color: var(--color-muted);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}

.locale-selector {
    position: relative;
    flex-shrink: 0;
}

.locale-button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 2.7rem;
    background: var(--color-surface);
    color: var(--brand-navy);
    border: 2px solid var(--color-border);
    border-radius: 999px;
    padding: 0 0.7rem;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.locale-button .locale-code,
.locale-button .locale-currency {
    display: none;
}

.locale-button:hover,
.locale-button:focus-visible {
    border-color: var(--brand-sky);
    box-shadow: 0 0 0 4px rgb(154 140 123 / 12%);
    outline: none;
}

.locale-button[aria-expanded='true'] .locale-chevron {
    transform: rotate(180deg);
}

.locale-chevron {
    color: var(--color-muted);
    transition: transform 140ms ease;
}

.locale-flag {
    width: 24px;
    height: 16px;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgb(63 57 52 / 12%);
    object-fit: cover;
}

.locale-currency {
    color: var(--color-muted);
    font-weight: 600;
}

.locale-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-pop);
    list-style: none;
    margin: 0;
    padding: 0.4rem 0;
    min-width: 17rem;
    z-index: 130;
}

.locale-menu a {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 1.1rem;
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
}

.locale-menu a:hover,
.locale-menu a:focus-visible {
    background: var(--brand-sky-soft);
    outline: none;
}

.locale-menu a[aria-current='true'] {
    color: var(--brand-blue);
}

.locale-menu a[aria-current='true']::after {
    content: '';
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background: var(--brand-blue);
    clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 84% 8%, 38% 68%);
}

.locale-option-label {
    flex: 1;
}

.locale-option-currency {
    color: var(--color-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.cart-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.7rem;
    height: 2.7rem;
    background: var(--brand-navy);
    color: var(--color-surface);
    border: 2px solid var(--brand-navy);
    border-radius: 999px;
    text-decoration: none;
    transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.cart-button:hover,
.cart-button:focus-visible {
    background: var(--brand-blue);
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 4px rgb(119 105 89 / 15%);
    outline: none;
}

.cart-icon {
    flex-shrink: 0;
}

.cart-badge {
    position: absolute;
    top: -0.5rem;
    right: -0.35rem;
    min-width: 1.35rem;
    height: 1.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.3rem;
    background: var(--brand-orange);
    color: var(--on-orange);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    box-shadow: 0 2px 8px rgb(194 82 0 / 40%);
}

.main-nav {
    background: var(--color-surface);
}

.nav-inner {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 0.4rem;
    border-top: 1px solid var(--color-border);
    scrollbar-width: none;
}

.nav-inner::-webkit-scrollbar {
    display: none;
}

.nav-items {
    display: flex;
    gap: 0.2rem;
}

.nav-item {
    position: relative;
}

.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--brand-navy);
    text-decoration: none;
    font-size: clamp(0.84rem, 0.4vw + 0.6rem, 0.92rem);
    font-weight: 700;
    padding: 0.8rem clamp(0.4rem, 0.7vw, 0.7rem);
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: color 140ms ease, border-color 140ms ease;
}

.nav-link-sale {
    color: var(--brand-orange);
}

.nav-chevron {
    transition: transform 160ms ease;
    opacity: 0.55;
}

.nav-item:hover > .nav-link,
.nav-item:focus-within > .nav-link {
    color: var(--brand-orange);
    border-bottom-color: var(--brand-orange);
}

.nav-item:hover .nav-chevron,
.nav-item:focus-within .nav-chevron {
    transform: rotate(180deg);
}

.mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 140;
    min-width: 34rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--shadow-pop);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
    pointer-events: none;
}

.nav-item:nth-last-child(-n+3) .mega-menu {
    left: auto;
    right: 0;
}

.nav-item:hover .mega-menu,
.nav-item:focus-within .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.mega-inner {
    display: flex;
    gap: 2.2rem;
    padding: 1.35rem 1.5rem 1.1rem;
}

.mega-column {
    min-width: 12rem;
}

.mega-heading {
    display: block;
    color: var(--brand-sky);
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    margin-bottom: 0.65rem;
}

.mega-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.mega-links a {
    display: block;
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 600;
    padding: 0.4rem 0.6rem;
    margin-left: -0.6rem;
    border-radius: 8px;
    transition: background 130ms ease, color 130ms ease;
}

.mega-links a:hover {
    background: var(--brand-sky-soft);
    color: var(--brand-blue);
}

.mega-products {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.mega-products a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    padding: 0.35rem 0.6rem;
    margin-left: -0.6rem;
    border-radius: 8px;
    transition: background 130ms ease;
}

.mega-products a:hover {
    background: var(--brand-sky-soft);
}

.mega-product-art {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 30px;
    border-radius: 6px;
    color: var(--color-surface);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.mega-product-info {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.mega-product-name {
    color: var(--brand-navy);
    font-size: 0.9rem;
    font-weight: 700;
}

.mega-product-brand {
    color: var(--color-muted);
    font-size: 0.76rem;
    font-weight: 600;
}

.mega-view-all {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.8rem 1.5rem;
    background: var(--brand-sky-soft);
    color: var(--brand-blue);
    font-size: 0.9rem;
    font-weight: 800;
    text-decoration: none;
    border-radius: 0 0 var(--radius) var(--radius);
    transition: background 130ms ease, color 130ms ease;
}

.mega-view-all:hover {
    background: var(--brand-blue);
    color: var(--color-surface);
}

.nav-service {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    align-self: center;
    color: var(--brand-navy);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 800;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    transition: background 140ms ease, color 140ms ease;
}

.nav-service:hover {
    background: var(--brand-sky-soft);
    color: var(--brand-blue);
}

@media (max-width: 1080px) {
    .main-nav {
        display: none;
    }

    .mega-menu {
        display: none;
    }
}

.nav-inner {
    overflow: visible;
}

.nav-items {
    flex-wrap: wrap;
}

.geo-banner {
    background: var(--brand-sky-soft);
    color: var(--brand-navy);
    border-bottom: 1px solid var(--color-border);
}

.geo-banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
    flex-wrap: wrap;
}

.geo-actions {
    display: flex;
    gap: 0.5rem;
}

.site-main {
    padding-top: clamp(1.25rem, 3vw, 2rem);
    padding-bottom: clamp(2rem, 5vw, 3.5rem);
}

.section {
    margin-bottom: clamp(2.25rem, 5vw, 3.25rem);
}

.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
}

.section h2 {
    position: relative;
    font-size: clamp(1.25rem, 2.4vw, 1.55rem);
    font-weight: 800;
    color: var(--brand-navy);
    margin: 0;
}

.text-highlight {
    color: var(--brand-orange);
    background: linear-gradient(180deg, transparent 58%, rgb(255 102 0 / 14%) 58% 94%, transparent 94%);
    border-radius: 4px;
    padding: 0 0.08em;
}

.section-link {
    color: var(--brand-blue);
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    white-space: nowrap;
}

.section-link:hover {
    color: var(--brand-orange);
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
    gap: var(--spacing);
}

.category-tile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.3rem;
    min-height: 6rem;
    background: linear-gradient(150deg, var(--color-surface), var(--brand-sky-soft));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    text-decoration: none;
    color: var(--brand-navy);
    font-weight: 800;
    font-size: 1.02rem;
    padding: 1.2rem 1.4rem;
    box-shadow: var(--shadow-card);
    transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

.category-tile::after {
    content: '\2192';
    color: var(--brand-orange);
    font-size: 1.05rem;
}

.category-tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-pop);
    border-color: var(--brand-sky);
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(235px, 100%), 1fr));
    gap: 1.15rem;
}

.product-card {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    overflow: hidden;
    text-decoration: none;
    color: var(--color-text);
    box-shadow: var(--shadow-card);
    transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-pop);
    border-color: var(--brand-sky);
}

.card-art {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    aspect-ratio: 16 / 9;
    color: var(--color-surface);
    margin: 0.85rem 0.85rem 0;
    border-radius: 14px;
    overflow: hidden;
}

.card-art::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgb(255 255 255 / 22%), transparent 50%);
}

.card-art-large {
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-large);
    margin: 0;
}

.card-art-initials {
    font-size: 2.1rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    z-index: 1;
}

.card-art-type {
    z-index: 1;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: rgb(30 28 27 / 35%);
    border-radius: 999px;
    padding: 0.22rem 0.75rem;
}

.platform-playstation {
    background: linear-gradient(135deg, #003087, #0055d4);
}

.platform-xbox {
    background: linear-gradient(135deg, #0e7a0d, #3fbf3d);
}

.platform-nintendo {
    background: linear-gradient(135deg, #c00, #f43f5e);
}

.platform-steam {
    background: linear-gradient(135deg, #181716, #2a475e);
}

.platform-pc {
    background: linear-gradient(135deg, #464442, #7b7874);
}

.platform-other {
    background: linear-gradient(135deg, var(--brand-navy), var(--brand-sky));
}

.card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 0.2rem;
    padding: 0.85rem 1.1rem 1.1rem;
}

.card-delivery {
    font-size: 0.78rem;
    color: var(--color-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.card-delivery::before {
    content: '';
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background: var(--color-success);
    clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 84% 8%, 38% 68%);
}

.card-brand {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--brand-blue);
    font-weight: 800;
}

.card-name {
    font-weight: 700;
    color: var(--brand-navy);
    font-size: 1.02rem;
    line-height: 1.35;
}

.card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 0.55rem;
    gap: 0.5rem;
}

.card-price {
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--brand-navy);
}

.availability {
    font-size: 0.73rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 0.18rem 0.65rem;
    white-space: nowrap;
}

.availability-available {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.availability-low_stock {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
}

.availability-out_of_stock {
    background: var(--color-error-bg);
    color: var(--color-error-text);
}

.brand-strip {
    display: flex;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.brand-chip {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.55rem 1.35rem;
    text-decoration: none;
    color: var(--brand-navy);
    font-weight: 700;
    font-size: 0.95rem;
    box-shadow: var(--shadow-card);
    transition: transform 140ms ease, border-color 140ms ease, color 140ms ease;
}

.brand-chip:hover {
    border-color: var(--brand-sky);
    color: var(--brand-blue);
    transform: translateY(-2px);
}

.trust-panel {
    display: flex;
    align-items: center;
    gap: 2rem;
    background: var(--brand-sky-soft);
    border: 1px solid #ebe8dd;
    border-radius: var(--radius-large);
    padding: clamp(1.5rem, 3.5vw, 2.25rem);
}

.trust-mascot {
    width: 130px;
    flex-shrink: 0;
}

.trust-content h2 {
    margin: 0 0 0.75rem;
    color: var(--brand-navy);
    font-size: 1.3rem;
}

.trust-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
    gap: 0.55rem 1.5rem;
}

.trust-list li {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 600;
    color: var(--brand-navy);
}

.trust-list li::before {
    content: '';
    flex-shrink: 0;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    background: var(--color-success);
    clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 84% 8%, 38% 68%);
}

.page-header {
    margin-bottom: 1.4rem;
}

.page-header h1 {
    margin: 0 0 0.25rem;
    font-size: clamp(1.5rem, 3vw, 1.9rem);
    font-weight: 800;
    color: var(--brand-navy);
}

.results-meta {
    color: var(--color-muted);
    margin: 0;
}

.breadcrumbs {
    display: flex;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--color-muted);
    margin-bottom: 1.1rem;
    flex-wrap: wrap;
}

.breadcrumbs a {
    color: var(--brand-blue);
    text-decoration: none;
    font-weight: 600;
}

.breadcrumbs a:hover {
    color: var(--brand-orange);
}

.results-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 1.5rem;
    align-items: start;
}

.facet-sidebar {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    padding: 0.65rem 1.25rem 1.15rem;
    box-shadow: var(--shadow-card);
    position: sticky;
    top: 90px;
    max-height: calc(100dvh - 106px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgb(154 140 123 / 45%) transparent;
}

.filter-form {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.filter-group {
    border-bottom: 1px solid rgb(154 140 123 / 22%);
    padding: 0.35rem 0 0.9rem;
}

.filter-group:last-of-type {
    border-bottom: none;
}

.filter-group summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    list-style: none;
    padding: 0.65rem 0 0.45rem;
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--brand-navy);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.filter-group summary::-webkit-details-marker {
    display: none;
}

.filter-group summary:hover {
    color: var(--brand-blue);
}

.filter-group-chevron {
    flex-shrink: 0;
    color: var(--brand-blue);
    transition: transform 180ms ease;
}

.filter-group[open] > summary .filter-group-chevron {
    transform: rotate(180deg);
}

.filter-group-active .filter-chips {
    padding: 0.25rem 0 0.2rem;
}

.filter-apply {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 1.1rem;
    padding: 0.78rem 1.2rem;
    border: 1.5px solid var(--brand-navy);
    border-radius: 10px;
    background: var(--color-surface);
    color: var(--brand-orange);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.filter-apply:hover {
    background: var(--brand-orange);
    border-color: var(--brand-orange);
    color: var(--on-orange);
    transform: translateY(-1px);
}

.filter-apply:focus-visible {
    outline: 2px solid var(--brand-sky);
    outline-offset: 2px;
}

.filter-form.is-auto .filter-apply {
    display: none;
}

.results-range {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.92rem;
    font-weight: 600;
}

.price-range {
    padding: 0.4rem 0.2rem 0;
}

.price-range-track {
    position: relative;
    height: 26px;
    margin: 0 9px 0.65rem;
}

.price-range-track::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -9px;
    right: -9px;
    height: 7px;
    transform: translateY(-50%);
    border-radius: 999px;
    background: var(--brand-sky-soft);
}

.price-range-fill {
    position: absolute;
    top: 50%;
    height: 7px;
    transform: translateY(-50%);
    border-radius: 999px;
    background: linear-gradient(90deg, var(--brand-sky) 0%, var(--brand-blue) 100%);
}

.price-range-slider {
    position: absolute;
    inset: 0;
    width: calc(100% + 18px);
    margin: 0 -9px;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    pointer-events: none;
}

.price-range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid rgb(154 140 123 / 45%);
    box-shadow: 0 2px 8px rgb(26 24 22 / 25%);
    cursor: pointer;
    pointer-events: auto;
}

.price-range-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid rgb(154 140 123 / 45%);
    box-shadow: 0 2px 8px rgb(26 24 22 / 25%);
    cursor: pointer;
    pointer-events: auto;
}

.price-range-inputs {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.price-range-input {
    flex: 1;
    min-width: 0;
    width: 100%;
    padding: 0.62rem 0.75rem;
    border: 1.5px solid var(--brand-blue);
    border-radius: 10px;
    background: var(--color-surface);
    font: inherit;
    font-size: 1rem;
    color: var(--color-text);
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}

.price-range-input::-webkit-outer-spin-button,
.price-range-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.price-range-input:focus-visible {
    outline: 2px solid var(--brand-sky);
    outline-offset: 1px;
}

.price-range-sep {
    color: var(--color-muted);
    font-size: 0.92rem;
    flex-shrink: 0;
}

.empty-state {
    background: var(--color-surface);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-large);
    text-align: center;
    padding: 3.5rem 1.5rem;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.75rem;
}

.pagination-status {
    color: var(--color-muted);
    font-size: 0.9rem;
}

.product-detail {
    display: grid;
    grid-template-columns: minmax(300px, 440px) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
}

.product-visual,
.product-info {
    min-width: 0;
}

.product-visual {
    position: sticky;
    top: 100px;
}

.product-usps {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1.1rem;
    font-size: 0.92rem;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    padding: 1.1rem 1.3rem;
    box-shadow: var(--shadow-card);
}

.product-usps span {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 600;
}

.product-usps span::before {
    content: '';
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 50%;
    background: var(--color-success);
    clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 84% 8%, 38% 68%);
}

.product-info h1 {
    margin: 0.1rem 0 0.7rem;
    font-size: clamp(1.5rem, 3vw, 1.95rem);
    font-weight: 800;
    color: var(--brand-navy);
}

.product-description {
    color: var(--color-muted);
    max-width: 46rem;
}

.variant-picker {
    border: none;
    margin: 1.4rem 0 0;
    padding: 0;
}

.variant-picker legend {
    font-weight: 800;
    color: var(--brand-navy);
    margin-bottom: 0.65rem;
}

.variant-option {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.85rem;
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.8rem 1.1rem;
    margin-bottom: 0.55rem;
    cursor: pointer;
    transition: border-color 130ms ease, box-shadow 130ms ease;
}

.variant-option:hover {
    border-color: var(--brand-sky);
}

.variant-option:has(input:checked) {
    border-color: var(--brand-orange);
    box-shadow: 0 0 0 4px rgb(194 82 0 / 12%);
}

.variant-option.is-unavailable {
    opacity: 0.55;
    cursor: not-allowed;
}

.variant-face {
    font-weight: 800;
    min-width: 7rem;
    color: var(--brand-navy);
}

.variant-price {
    font-weight: 800;
    color: var(--brand-navy);
    margin-left: auto;
    font-size: 1.05rem;
}

.vat-note {
    color: var(--color-muted);
    font-size: 0.85rem;
}

.region-notice {
    border-radius: var(--radius);
    padding: 0.75rem 1.1rem;
    margin: 0.9rem 0 1.3rem;
    font-size: 0.93rem;
    font-weight: 600;
}

.region-ok {
    background: transparent;
    color: var(--brand-navy);
    text-align: right;
    font-weight: 800;
    font-size: 0.88rem;
    padding: 0.3rem 0;
    margin: 0.55rem 0 0.9rem;
}

.region-warning {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
}

.cart-note {
    color: var(--color-muted);
    font-size: 0.85rem;
    margin-top: 0.6rem;
}

.status-timeline {
    list-style: none;
    margin: 1.5rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.status-step {
    display: flex;
    gap: 1rem;
    padding-bottom: 1.4rem;
    position: relative;
    padding-left: 2.2rem;
    color: var(--color-muted);
    font-weight: 600;
}

.status-step::before {
    content: '';
    position: absolute;
    left: 0.45rem;
    top: 0.4rem;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    background: var(--color-border);
}

.status-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 0.82rem;
    top: 1.4rem;
    bottom: 0;
    width: 2px;
    background: var(--color-border);
}

.status-step.is-done {
    color: var(--brand-navy);
}

.status-step.is-done::before {
    background: var(--color-success);
}

.status-step.is-active {
    color: var(--brand-navy);
}

.status-step.is-active::before {
    background: var(--brand-orange);
    box-shadow: 0 0 0 4px rgb(194 82 0 / 18%);
}

.voucher-reveal {
    background: var(--brand-navy);
    color: var(--color-surface);
    border-radius: var(--radius-large);
    padding: 1.6rem;
    text-align: center;
    margin: 1.25rem 0;
}

.voucher-code {
    display: inline-block;
    font-family: 'Cascadia Mono', Consolas, monospace;
    font-size: 1.35rem;
    letter-spacing: 0.14em;
    background: rgb(255 255 255 / 10%);
    border: 1px dashed rgb(255 255 255 / 35%);
    border-radius: var(--radius);
    padding: 0.75rem 1.4rem;
    margin-top: 0.6rem;
    user-select: all;
}

.panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    padding: clamp(1.4rem, 3vw, 2rem);
    box-shadow: var(--shadow-card);
    max-width: 720px;
}

.site-footer {
    background: var(--brand-navy-deep);
    color: #dedacf;
    margin-top: 2.5rem;
}

.footer-inner {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 2.5rem;
    padding-top: 3rem;
    padding-bottom: 1.75rem;
}

.footer-logo img {
    height: 52px;
    width: auto;
}

.footer-inner p {
    max-width: 26rem;
    font-size: 0.92rem;
}

.site-footer h3 {
    color: #f7b76e;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.8rem;
}

.site-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer li {
    margin-bottom: 0.5rem;
    font-size: 0.92rem;
}

.site-footer a {
    color: #dedacf;
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--brand-cream);
}

.footer-payments {
    padding-top: 0.5rem;
    padding-bottom: 1.75rem;
}

.footer-payments-inner {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.5vw, 1.75rem);
    flex-wrap: wrap;
    padding: 1.1rem clamp(1.1rem, 2.5vw, 1.75rem);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-card);
}

.footer-payments-label {
    color: var(--brand-navy);
    font-size: 0.88rem;
    font-weight: 700;
    white-space: nowrap;
}

.payment-chip {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 0.28rem 0.8rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--brand-navy);
}

.footer-bottom {
    border-top: 1px solid rgb(255 255 255 / 10%);
    padding-top: 1.1rem;
    padding-bottom: 1.3rem;
    font-size: 0.8rem;
}

.button {
    display: inline-block;
    padding: 0.65rem 1.5rem;
    border-radius: 999px;
    border: 2px solid var(--color-border);
    background: var(--color-surface);
    color: var(--brand-navy);
    font-size: 0.98rem;
    font-weight: 700;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.button:hover {
    border-color: var(--brand-sky);
    background: var(--brand-sky-soft);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgb(63 57 52 / 14%);
}

.button:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.button:active {
    transform: translateY(0);
    box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
    .button:hover {
        transform: none;
    }
}

.button.button-secondary:hover {
    background: var(--brand-navy-deep, #2d2a27);
    border-color: var(--brand-navy-deep, #2d2a27);
    color: var(--color-surface);
}

.button.button-danger:hover {
    background: var(--color-error-bg);
    border-color: var(--color-error-text);
    color: var(--color-error-text);
}

.button-primary {
    background: var(--brand-orange);
    border-color: var(--brand-orange);
    color: var(--on-orange);
    box-shadow: 0 8px 20px rgb(194 82 0 / 28%);
}

.button-primary:hover {
    background: var(--brand-orange-dark);
    border-color: var(--brand-orange-dark);
    transform: translateY(-1px);
}

.button-large {
    padding: 0.9rem 2.4rem;
    font-size: 1.05rem;
}

.button-small {
    padding: 0.42rem 1.05rem;
    font-size: 0.85rem;
    border-width: 1.5px;
}

.button-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--brand-blue);
    box-shadow: none;
}

.button-ghost:hover {
    background: var(--brand-sky-soft);
    border-color: transparent;
}

.button[disabled],
.button[aria-busy='true'] {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.alert {
    border-radius: var(--radius);
    padding: 0.8rem 1.1rem;
    margin-bottom: var(--spacing);
    font-weight: 600;
}

.alert-error {
    background: var(--color-error-bg);
    color: var(--color-error-text);
}

.alert-success {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.alert-warning {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
}

.alert-info {
    background: var(--color-info-bg);
    color: var(--color-info-text);
}

.installer {
    max-width: 900px;
    margin: 0 auto;
    padding: calc(var(--spacing) * 2.5) var(--spacing) calc(var(--spacing) * 3);
}

.installer-header {
    text-align: center;
    margin-bottom: calc(var(--spacing) * 2.25);
}

.installer-header img {
    height: 56px;
    width: auto;
}

.installer-header h1 {
    margin: 0.75rem 0 0;
    font-size: 1.45rem;
    letter-spacing: 0.01em;
    color: var(--brand-navy);
}

.installer-steps {
    display: flex;
    align-items: flex-start;
    list-style: none;
    padding: 0;
    margin: 0 auto calc(var(--spacing) * 2.25);
    max-width: 820px;
    counter-reset: installer-step;
}

.installer-steps li {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    text-align: center;
    color: var(--color-muted);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.3;
}

.installer-steps li:not(:first-child)::before {
    content: '';
    position: absolute;
    top: 1.15rem;
    left: calc(-50% + 1.55rem);
    right: calc(50% + 1.55rem);
    height: 3px;
    border-radius: 999px;
    background: var(--color-border);
    transition: background var(--transition-smooth);
}

.installer-steps li.is-done:not(:first-child)::before,
.installer-steps li.is-active:not(:first-child)::before {
    background: linear-gradient(90deg, var(--color-success), var(--brand-sky));
}

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 50%;
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    color: var(--color-muted);
    font-size: 0.9rem;
    font-weight: 800;
    position: relative;
    z-index: 1;
    transition: background var(--transition-smooth), border-color var(--transition-smooth), color var(--transition-smooth), box-shadow var(--transition-smooth);
}

.installer-steps li.is-active .step-number {
    border-color: var(--brand-blue);
    color: var(--brand-blue);
    box-shadow: 0 0 0 5px rgb(154 140 123 / 16%);
}

.installer-steps li.is-active .step-label {
    color: var(--brand-navy);
    font-weight: 800;
}

.installer-steps li.is-done .step-number {
    background: var(--color-success);
    border-color: var(--color-success);
    color: #ffffff;
}

.installer-steps li.is-done .step-label {
    color: var(--color-success-text);
}

.step-check {
    display: block;
}

.step-label {
    max-width: 9rem;
    padding: 0 0.25rem;
    transition: color var(--transition-smooth);
}

.installer-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    padding: clamp(1.5rem, 3.5vw, 2.5rem);
    box-shadow: var(--shadow-card);
}

.installer-card > h2 {
    font-size: 1.3rem;
    letter-spacing: 0.01em;
}

.installer-card h2 + p {
    color: var(--color-muted);
    margin-top: 0.35rem;
}

.installer-card h3 {
    color: var(--brand-navy);
    font-size: 1.02rem;
    margin: 1.6rem 0 0.6rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--color-border);
}

@media (max-width: 720px) {
    .installer-steps {
        gap: 0;
    }

    .installer-steps li {
        font-size: 0.7rem;
    }

    .installer-steps li:not(.is-active) .step-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .installer-steps li:not(:first-child)::before {
        left: calc(-50% + 1.4rem);
        right: calc(50% + 1.4rem);
    }

    .step-number {
        width: 2.1rem;
        height: 2.1rem;
    }
}

.installer-card .requirements-table {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

.installer-card .requirements-table th {
    background: var(--brand-sky-soft);
    color: var(--brand-navy);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.installer-card .requirements-table tbody tr:last-child td {
    border-bottom: none;
}

.installer-card .requirements-table td {
    vertical-align: middle;
    padding: 0.6rem 0.75rem;
}

.installer-card .requirements-table th:last-child,
.installer-card .requirements-table td:last-child {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.installer-card .requirements-table td:last-child .hint {
    white-space: normal;
    max-width: 280px;
    margin-left: auto;
    text-align: left;
}

.installer-card .summary {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.95rem 1.15rem;
}

.installer-card .actions {
    margin-top: calc(var(--spacing) * 1.5);
    align-items: center;
    flex-wrap: wrap;
}

.installer-card .actions .button-primary {
    margin-left: auto;
}

.installer-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 0.4rem 0 1.3rem;
    padding: 0.95rem 1.1rem;
    background: #fbfaf7;
    border: 1px solid #ebe8e0;
    border-radius: var(--radius);
    cursor: pointer;
}

.installer-checkbox input {
    margin-top: 0.25rem;
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--brand-blue);
    flex-shrink: 0;
}

.installer-checkbox strong {
    display: block;
    color: var(--brand-navy);
    margin-bottom: 0.2rem;
}

.installer-checkbox small {
    display: block;
    color: var(--color-muted);
    line-height: 1.5;
}

.installer-demo-callout {
    margin: 1.2rem 0;
    padding: 1.1rem 1.2rem;
    background: #f0f8f2;
    border: 1px solid #bfe3ca;
    border-radius: var(--radius);
}

.installer-demo-callout h3 {
    margin-top: 0;
}

.installer-demo-callout .button {
    margin-top: 0.4rem;
}

.installer-demo-accounts {
    width: 100%;
    margin: 0.6rem 0 0.2rem;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid #bfe3ca;
    border-radius: var(--radius-small);
    font-size: 0.92rem;
}

.installer-demo-accounts th,
.installer-demo-accounts td {
    padding: 0.5rem 0.7rem;
    text-align: left;
    border-bottom: 1px solid #e3f1e8;
}

.installer-demo-accounts thead th {
    background: #e6f3ea;
    color: var(--brand-navy);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.installer-demo-accounts tbody tr:last-child td {
    border-bottom: 0;
}

.installer-demo-accounts code {
    background: #f0f8f2;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    white-space: nowrap;
}

.installer-demo-status {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.6rem 0 0.2rem;
    font-weight: 700;
    color: var(--brand-navy);
}

.installer-demo-done .installer-demo-status {
    color: var(--color-success);
}

.installer-demo-spinner {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border: 3px solid #bfe3ca;
    border-top-color: var(--color-success);
    border-radius: 50%;
    animation: installer-demo-spin 800ms linear infinite;
}

@keyframes installer-demo-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .installer-demo-spinner {
        animation: none;
    }
}

.installer-card h2 {
    margin-top: 0;
    color: var(--brand-navy);
}

.field {
    margin-bottom: var(--spacing);
}

.field label {
    display: block;
    font-weight: 700;
    margin-bottom: 0.3rem;
    color: var(--brand-navy);
}

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    font-size: 1rem;
    font-family: inherit;
    line-height: 1.4;
    background: var(--color-surface);
    color: var(--color-text);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.field textarea {
    min-height: 6rem;
    resize: vertical;
}

.field select {
    height: calc(1.4em + 1.2rem + 2px);
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235f7085' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    cursor: pointer;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
    border-color: var(--brand-sky);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--brand-sky);
    box-shadow: var(--focus-ring);
}

.field input:disabled,
.field select:disabled,
.field textarea:disabled {
    background: var(--color-background);
    color: var(--color-muted);
    cursor: not-allowed;
}

.field input::placeholder,
.field textarea::placeholder {
    color: var(--color-muted);
}

fieldset {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--spacing);
    margin: 0 0 var(--spacing);
}

legend {
    font-weight: 700;
    padding: 0 0.4rem;
}

.hint {
    color: var(--color-muted);
    font-size: 0.9rem;
    margin-top: 0.2rem;
}

.choice-group {
    display: flex;
    gap: var(--spacing);
    margin-bottom: var(--spacing);
}

.choice {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.8rem 1rem;
    cursor: pointer;
}

.choice:has(input:checked) {
    border-color: var(--brand-orange);
    background: var(--color-warning-bg);
}

.actions {
    display: flex;
    gap: var(--spacing);
    margin-top: var(--spacing);
}

.requirements-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--spacing);
}

.requirements-table th,
.requirements-table td {
    text-align: left;
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}

.badge {
    display: inline-block;
    padding: 0.18rem 0.7rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}

.badge-ok {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.badge-fail {
    background: var(--color-error-bg);
    color: var(--color-error-text);
}

.badge-warn {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
}

.summary {
    display: grid;
    grid-template-columns: minmax(140px, 220px) 1fr;
    gap: 0.35rem 1rem;
    margin: 0 0 var(--spacing);
}

.summary dt {
    font-weight: 700;
    color: var(--color-muted);
}

.summary dd {
    margin: 0;
}

.next-steps li {
    margin-bottom: 0.6rem;
}

@media (max-width: 960px) {
    .results-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .facet-sidebar {
        display: none;
    }

    .product-detail {
        grid-template-columns: minmax(0, 1fr);
    }

    .product-visual {
        position: relative;
        top: auto;
    }

    .footer-inner {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .hero {
        flex-direction: column;
        text-align: center;
        padding: 2rem 1.4rem;
    }

    .hero-usps {
        justify-content: center;
    }

    .hero-art {
        width: 240px;
        height: 175px;
    }

    .trust-panel {
        flex-direction: column;
        text-align: center;
    }

    .trust-list li {
        justify-content: center;
    }
}

@media (max-width: 720px) {
    .header-inner {
        flex-wrap: wrap;
        gap: 0.9rem;
    }

    .logo img {
        height: 38px;
    }

    .header-search {
        order: 3;
        flex-basis: 100%;
        max-width: none;
    }

    .choice-group {
        flex-direction: column;
    }

    .installer-card {
        padding: var(--spacing);
    }

    .topbar-inner {
        gap: 1rem;
        font-size: 0.76rem;
    }
}

:root {
    --theme-sunset-start: #f49d3a;
    --theme-sunset-end: #fdb32b;
    --theme-midnight-start: #140f12;
    --theme-midnight-end: #2c2621;
    --theme-ocean-start: #1e7fb0;
    --theme-ocean-end: #3abcf0;
    --sale-red: #e0332b;
    --kiyoh-gold: #f6a623;
}

.hero-banner {
    position: relative;
    display: flex;
    align-items: center;
    border-radius: var(--radius-large);
    padding: clamp(1.6rem, 5vw, 3.4rem);
    overflow: hidden;
    box-shadow: var(--shadow-pop);
    min-height: clamp(240px, 30vw, 360px);
    background: linear-gradient(120deg, #d64d1e 0%, #f18a1c 55%, #f6a91d 100%);
}

.hero-banner-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center right;
}

.hero-banner-panel {
    position: relative;
    z-index: 1;
    align-self: center;
    max-width: 32rem;
    background: rgb(20 30 20 / 42%);
    border-radius: 14px;
    padding: clamp(1.4rem, 3vw, 2.2rem);
    color: var(--color-surface);
    backdrop-filter: blur(2px);
}

.hero-banner-body {
    margin: 0 0 1.4rem;
    color: rgb(255 255 255 / 92%);
    font-size: clamp(0.95rem, 1.6vw, 1.08rem);
    line-height: 1.5;
}

.hero-banner-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--brand-orange);
    border-color: var(--brand-orange);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 800;
    box-shadow: 0 10px 24px rgb(214 77 30 / 35%);
}

.hero-banner-cta:hover {
    background: var(--brand-orange-dark);
    border-color: var(--brand-orange-dark);
}

.promo-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.15rem, 2vw, 1.6rem);
    align-items: stretch;
    margin-bottom: clamp(2rem, 4vw, 2.75rem);
}

.promo-row > .promo-tile {
    min-width: 0;
    width: 100%;
    aspect-ratio: 600 / 280;
    min-height: 0;
}

.promo-tile-image {
    padding: 0;
    min-height: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.promo-tile-image .promo-tile-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.promo-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.5rem;
    min-height: 200px;
    border-radius: var(--radius-large);
    padding: 1.4rem 1.5rem;
    text-decoration: none;
    color: var(--color-surface);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.promo-tile:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-pop);
}

.promo-tile:focus-visible {
    outline: 3px solid var(--brand-sky);
    outline-offset: 3px;
}

.promo-tile.theme-midnight {
    background:
        radial-gradient(500px 220px at 100% 0%, rgb(194 180 155 / 35%), transparent 60%),
        linear-gradient(135deg, var(--theme-midnight-start), var(--theme-midnight-end));
}

.promo-tile.theme-ocean {
    background:
        radial-gradient(500px 240px at 0% 100%, rgb(255 255 255 / 18%), transparent 55%),
        linear-gradient(135deg, var(--theme-ocean-start), var(--theme-ocean-end));
}

.promo-tile.theme-navy {
    background:
        radial-gradient(460px 220px at 100% 100%, rgb(154 140 123 / 30%), transparent 60%),
        linear-gradient(140deg, var(--brand-navy-deep), var(--brand-navy));
}

.promo-badge {
    align-self: flex-start;
    margin-bottom: 0.35rem;
    background: rgb(255 255 255 / 14%);
    border: 1px solid rgb(255 255 255 / 25%);
    border-radius: 999px;
    padding: 0.28rem 0.9rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.promo-title {
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.35;
    max-width: 78%;
    letter-spacing: 0.015em;
    margin: 0.35rem 0 0.5rem;
}

.promo-tile-cta {
    position: absolute;
    right: 1.1rem;
    bottom: 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: var(--brand-orange);
    color: var(--on-orange);
    box-shadow: 0 8px 20px rgb(194 82 0 / 35%);
    text-decoration: none;
    transition: transform var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.promo-tile-cta svg {
    transition: transform var(--transition-fast);
}

.promo-tile:hover .promo-tile-cta,
.promo-tile-cta:hover {
    background: var(--brand-orange-dark);
    box-shadow: 0 10px 24px rgb(194 82 0 / 45%);
}

.promo-tile:hover .promo-tile-cta svg,
.promo-tile-cta:hover svg {
    transform: translateX(3px);
}

.promo-tile-cta:focus-visible {
    outline: 3px solid var(--color-surface);
    outline-offset: 2px;
}

.sale-tags {
    position: absolute;
    top: -6px;
    right: 1.1rem;
    display: flex;
    gap: 0.55rem;
}

.sale-tag {
    position: relative;
    display: inline-block;
    background: var(--sale-red);
    color: var(--color-surface);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1rem 0.5rem 0.5rem;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 6px 14px rgb(22 21 20 / 30%);
    transform-origin: top center;
    writing-mode: vertical-rl;
}

.sale-tag::before {
    content: '';
    position: absolute;
    top: 0.35rem;
    left: 50%;
    width: 2px;
    height: 0.45rem;
    background: rgb(255 255 255 / 65%);
    transform: translateX(-50%);
}

.sale-tag:nth-child(odd) {
    transform: rotate(-4deg);
}

.sale-tag:nth-child(even) {
    transform: rotate(3deg) translateY(4px);
}

.kiyoh-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.2rem;
    height: 4.2rem;
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--brand-navy);
    font-size: 1.45rem;
    font-weight: 800;
    box-shadow: 0 10px 24px rgb(22 21 20 / 30%);
}

.kiyoh-meta {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.kiyoh-stars {
    position: relative;
    display: inline-block;
    font-size: 1.25rem;
    line-height: 1;
    letter-spacing: 0.12em;
}

.kiyoh-stars-base {
    color: rgb(255 255 255 / 30%);
}

.kiyoh-stars-fill {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
    color: var(--kiyoh-gold);
}

.kiyoh-reviews {
    font-size: 0.88rem;
    color: #e4e0d5;
    font-weight: 600;
}

.kiyoh-brand {
    font-size: 1.3rem;
    font-weight: 800;
}

.benefits-bar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(0.7rem, 1.6vw, 1.1rem);
    margin-bottom: clamp(2rem, 4vw, 2.75rem);
}

.benefit-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.95rem 1.1rem;
    border: 1px solid #eeece6;
    border-radius: var(--radius);
    background:
        radial-gradient(220px 120px at 100% 0%, rgb(154 140 123 / 7%), transparent 70%),
        var(--color-surface);
    box-shadow: 0 4px 14px rgb(63 57 52 / 6%);
    overflow: hidden;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.benefit-item::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--brand-orange), #f28306);
    opacity: 0;
    transition: opacity 160ms ease;
}

.benefit-item:hover {
    transform: translateY(-3px);
    border-color: #e6e3d9;
    box-shadow: 0 10px 22px rgb(63 57 52 / 12%);
}

.benefit-item:hover::before {
    opacity: 1;
}

@media (hover: none) {
    .benefit-item:hover {
        transform: none;
    }
}

.benefit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(135deg, var(--brand-navy), #ae5e04);
    box-shadow: 0 5px 12px rgb(63 57 52 / 18%);
}

.benefit-icon-delivery {
    background: linear-gradient(135deg, var(--brand-orange), #f28306);
    box-shadow: 0 5px 12px rgb(194 82 0 / 24%);
}

.benefit-icon-secure {
    background: linear-gradient(135deg, #12a150, #2f9d68);
    box-shadow: 0 5px 12px rgb(31 122 77 / 24%);
}

.benefit-icon-rating {
    background: linear-gradient(135deg, #b8860b, #d9a520);
    box-shadow: 0 5px 12px rgb(184 134 11 / 24%);
}

.benefit-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.benefit-text strong {
    color: var(--brand-navy);
    font-size: 0.95rem;
}

.benefit-text span {
    color: var(--color-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

@media (max-width: 1080px) {
    .benefits-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .benefits-bar {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.55rem;
    }

    .benefit-item {
        padding: 0.75rem 0.95rem;
    }

    .benefit-icon {
        width: 38px;
        height: 38px;
    }
}

.collection-strip {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    padding: clamp(1.3rem, 3vw, 1.8rem) 0;
    margin-bottom: clamp(2.25rem, 5vw, 3.25rem);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.collection-inner {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
}

.collection-title {
    flex-shrink: 0;
    margin: 0 0 0 clamp(1rem, 3vw, 1.8rem);
    max-width: 8rem;
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    font-weight: 800;
    color: var(--brand-navy);
    line-height: 1.25;
}

.collection-slider {
    position: relative;
    flex: 1;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.collection-track {
    display: flex;
    align-items: center;
    gap: clamp(2rem, 5vw, 3.5rem);
    width: max-content;
    animation: collection-scroll 42s linear infinite;
}

.collection-slider:hover .collection-track {
    animation-play-state: paused;
}

.collection-slider.is-static .collection-track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

.collection-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 44px;
    padding: 0 0.2rem;
    border-radius: 8px;
    text-decoration: none;
}

.collection-logo:focus-visible {
    outline: 3px solid var(--brand-sky);
    outline-offset: 3px;
}

.collection-logo img {
    max-height: 44px;
    width: auto;
    filter: grayscale(1);
    opacity: 0.55;
    transition: filter 180ms ease, opacity 180ms ease, transform 180ms ease;
}

.collection-logo:hover img,
.collection-logo:focus-visible img {
    filter: grayscale(0);
    opacity: 1;
    transform: translateY(-2px);
}

@keyframes collection-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .collection-track {
        animation: none;
    }
}

.bestseller-badge {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.6rem;
    background: var(--color-success-bg);
    color: var(--color-success-text);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    border-radius: 999px;
    padding: 0.28rem 0.85rem;
}

.product-grid-support {
    align-items: stretch;
}

.support-panel {
    --spot-face-w: clamp(120px, 12vw, 158px);
    position: relative;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #f8f6f2, #f3f1ea);
    border: 1px solid #ebe8e0;
    border-radius: var(--radius-large);
    box-shadow: 0 12px 28px rgb(63 57 52 / 10%);
    padding: clamp(2.6rem, 5vw, 3.4rem) clamp(1.2rem, 2.5vw, 1.6rem) clamp(1.2rem, 2.5vw, 1.6rem);
    margin-top: calc(var(--spot-face-w) * 0.34);
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.support-panel:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgb(63 57 52 / 14%);
}

.support-spot-face {
    position: absolute;
    top: calc(var(--spot-face-w) * -0.32 - var(--spot-face-w) * var(--spot-face-head-top, 0));
    left: 63%;
    transform: translateX(-50%);
    width: calc(var(--spot-face-w) * var(--spot-face-scale, 1));
    pointer-events: none;
    filter: drop-shadow(0 6px 14px rgb(63 57 52 / 16%));
    animation: support-spot-peek 6s ease-in-out infinite;
}

@keyframes support-spot-peek {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(-4px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .support-spot-face,
    .support-spot-hand,
    .spot-card-hand,
    .error-spot-hand,
    .cart-empty-hand {
        animation: none;
    }

    .support-panel:hover {
        transform: none;
    }
}

.support-spot-hand {
    position: absolute;
    pointer-events: none;
    filter: drop-shadow(0 3px 6px rgb(63 57 52 / 14%));
    animation: spot-hand-bob 6s ease-in-out infinite;
}

.support-spot-hand-side {
    width: clamp(16px, 1.8vw, 20px);
    top: clamp(2rem, 4vw, 2.6rem);
    right: -7px;
}

.support-spot-hand-top {
    width: clamp(32px, 4vw, 44px);
    top: -10px;
    left: clamp(1.2rem, 12%, 3.4rem);
}

@keyframes spot-hand-bob {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -3px; }
}

.support-panel-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.15rem;
    height: 100%;
    padding: 0.35rem 0.2rem;
    text-align: left;
}

.support-panel h2 {
    margin: 0 0 0.9rem;
    color: var(--brand-sky);
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    font-weight: 800;
}

.support-list {
    list-style: none;
    margin: 0 0 1.1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    text-align: left;
    flex: 1;
    width: 100%;
}

.support-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--color-text);
    line-height: 1.45;
}

.support-list li::before {
    content: '';
    flex-shrink: 0;
    margin-top: 0.1rem;
    width: 1.05rem;
    height: 1.05rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%234caf50'/%3E%3Cpath d='M6.6 12.6l3.4 3.4 7.4-8' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: cover;
}

.support-emphasis {
    color: var(--brand-sky);
    font-weight: 800;
}

.support-contact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--brand-sky);
    border-color: var(--brand-sky);
    color: var(--on-orange);
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.7rem 1.2rem;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgb(154 140 123 / 30%);
}

.support-contact:hover {
    background: var(--brand-blue);
    border-color: var(--brand-blue);
    color: var(--color-surface);
}

.seo-sections {
    display: flex;
    flex-direction: column;
    gap: clamp(1.4rem, 3vw, 2rem);
    max-width: 56rem;
}

.seo-block h2 {
    margin: 0 0 0.5rem;
    color: var(--brand-navy);
    font-size: clamp(1.15rem, 2.2vw, 1.4rem);
    font-weight: 800;
}

.seo-block p {
    margin: 0 0 0.7rem;
    color: var(--color-muted);
}

.seo-subtitle {
    font-weight: 700;
    color: var(--brand-sky);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.85rem;
}

.site-footer {
    background: var(--brand-navy);
}

.footer-brand {
    padding-top: 2.5rem;
}

.footer-brand img {
    height: 44px;
    width: auto;
}

.footer-columns {
    grid-template-columns: repeat(3, 1fr);
    padding-top: 2rem;
}

.footer-address li {
    color: #dedacf;
}

.footer-social a {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.social-icon {
    flex-shrink: 0;
    color: var(--brand-sky);
}

.payment-marquee {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000000 7%, #000000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000000 7%, #000000 93%, transparent);
}

.payment-marquee-track {
    display: flex;
    width: max-content;
    animation: payment-marquee 60s linear infinite;
}

.payment-marquee:hover .payment-marquee-track,
.payment-marquee:focus-within .payment-marquee-track {
    animation-play-state: paused;
}

@keyframes payment-marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.payment-logos {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    flex: none;
    gap: clamp(1.1rem, 2vw, 1.9rem);
    padding-right: clamp(1.1rem, 2vw, 1.9rem);
}

.payment-logo {
    height: 30px;
    width: auto;
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    .payment-marquee-track {
        animation: none;
    }

    .payment-marquee {
        overflow-x: auto;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .payment-marquee .payment-logos[aria-hidden='true'] {
        display: none;
    }
}

.footer-kiyoh-link {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
}

.footer-kiyoh {
    height: 34px;
    width: auto;
    display: block;
}

.admin-shell {
    display: grid;
    grid-template-columns: 250px 1fr;
    min-height: 100vh;
}

.admin-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    background: linear-gradient(180deg, var(--brand-navy) 0%, var(--brand-navy-deep) 100%);
    color: #dedacf;
    padding: 1.5rem 1rem;
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgb(255 255 255 / 25%) transparent;
}

.admin-logo {
    padding: 0 0.5rem;
}

.admin-logo img {
    height: 26px;
    width: auto;
}

.admin-build-info {
    margin: 0.4rem 0 0;
    padding: 0.55rem 0.85rem 0;
    border-top: 1px solid rgb(255 255 255 / 12%);
    color: rgb(255 255 255 / 55%);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.admin-build-info span {
    display: block;
    color: rgb(255 255 255 / 40%);
}

.admin-nav {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.admin-nav-group {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.admin-nav-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.52rem 0.85rem;
    border-radius: var(--radius-small);
    border-left: 3px solid transparent;
    color: #dedacf;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.admin-nav-item svg {
    flex-shrink: 0;
    opacity: 0.75;
}

.admin-nav-item:hover {
    background: rgb(255 255 255 / 8%);
    color: var(--color-surface);
}

.admin-nav-item:hover svg {
    opacity: 1;
}

.admin-nav-item:focus-visible {
    outline: 2px solid var(--brand-sky);
    outline-offset: 2px;
}

.admin-nav-item.is-active {
    background: rgb(194 82 0 / 16%);
    border-left-color: var(--brand-orange);
    color: var(--color-surface);
}

.admin-nav-item.is-active svg {
    color: var(--brand-orange);
    opacity: 1;
}

.admin-nav-soon {
    color: #908b86;
    cursor: default;
}

.admin-nav-soon em {
    font-style: normal;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    background: rgb(255 255 255 / 10%);
    border-radius: 999px;
    padding: 0.12rem 0.5rem;
}

.admin-storefront-link {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #dedacf;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 700;
    padding: 0.55rem 0.85rem;
    border: 1px solid rgb(255 255 255 / 22%);
    border-radius: var(--radius-pill);
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.admin-storefront-link:hover {
    color: var(--color-surface);
    background: rgb(255 255 255 / 10%);
    border-color: rgb(255 255 255 / 40%);
}

.admin-content {
    padding: clamp(1.5rem, 3vw, 2.5rem);
    max-width: 1220px;
    margin-inline: auto;
}

.admin-content > * + * {
    margin-top: 1.75rem;
}

.admin-image-preview {
    margin-top: 0.5rem;
    max-height: 90px;
    border-radius: var(--radius-small);
    border: 1px solid var(--color-border);
    background: var(--color-background);
}

.admin-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
    gap: 1.25rem;
}

.admin-card-action {
    margin-top: auto;
    padding-top: 0.6rem;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--brand-blue);
}

a.admin-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-pop);
    border-color: var(--brand-sky);
}

a.admin-card:focus-visible {
    outline: 3px solid var(--brand-sky);
    outline-offset: 2px;
}

.admin-card.is-disabled {
    opacity: 0.65;
}

.admin-empty {
    background: var(--color-surface);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-large);
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--color-muted);
}

.admin-table-sub {
    display: block;
    color: var(--color-muted);
    font-size: 0.83rem;
}

.admin-funnel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem 1.1rem;
    margin: 0.4rem 0 0.8rem;
}

.admin-funnel-step,
.admin-funnel-total {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.75rem 1.1rem;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-surface);
    min-width: 130px;
}

.admin-funnel-total {
    border-color: var(--brand-orange);
    background: rgb(224 106 16 / 6%);
    margin-left: auto;
}

.admin-funnel-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--brand-navy);
}

.admin-funnel-label {
    font-size: 0.8rem;
    color: var(--color-muted);
}

.admin-funnel-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    color: var(--color-muted);
    font-size: 0.8rem;
    font-weight: 600;
}

@media (max-width: 720px) {
    .admin-funnel-total {
        margin-left: 0;
    }
}

.admin-game-score-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 1rem;
    margin: 0.4rem 0 0.4rem;
}

.admin-game-score-card {
    padding: 0.9rem 1.1rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-surface);
}

.admin-game-score-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.7rem;
}

.admin-game-score-head strong {
    color: var(--brand-navy);
}

.admin-game-score-head span {
    color: var(--color-muted);
    font-size: 0.8rem;
}

.admin-game-score-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.admin-game-score-list li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0.55rem;
    border: 1px solid rgb(63 57 52 / 8%);
    border-radius: 10px;
}

.admin-game-score-list li:first-child {
    border-color: rgb(224 106 16 / 45%);
    background: rgb(255 102 0 / 5%);
}

.admin-game-score-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: var(--brand-navy);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    flex-shrink: 0;
}

.admin-game-score-list li:first-child .admin-game-score-rank {
    background: var(--brand-orange);
}

.admin-game-score-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--brand-navy);
}

.admin-game-score-value {
    color: var(--brand-navy);
    font-size: 0.92rem;
}

.admin-section-heading {
    margin: 2.1rem 0 0.9rem;
    font-size: 1.15rem;
    color: var(--brand-navy);
}

.admin-gift-swatch {
    display: inline-block;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgb(63 57 52 / 16%);
}

.admin-gift-swatch-large {
    width: 72px;
    height: 72px;
    border-radius: 16px;
}

.admin-gift-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--gift-accent, var(--brand-navy));
    color: #fff;
    box-shadow: 0 3px 10px rgb(63 57 52 / 16%);
}

.admin-gift-badge-large {
    width: 72px;
    height: 72px;
}

.admin-gift-badge-large svg {
    width: 34px;
    height: 34px;
}

.admin-gift-form-preview {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.4rem;
    padding: 1rem 1.2rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-surface);
}

.admin-gift-form-preview .hint {
    margin: 0;
}

.admin-table-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.admin-table-actions form {
    margin: 0;
}

.button-danger {
    border-color: var(--color-error-bg);
    background: var(--color-error-bg);
    color: var(--color-error-text);
}

.button-danger:hover {
    border-color: var(--color-error-text);
}

.admin-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 0.9rem 1.4rem;
}

.admin-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 700;
    color: var(--brand-navy);
    cursor: pointer;
}

.admin-checkbox input {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--brand-orange);
}

.admin-error-list {
    margin: 0;
    padding-left: 1.2rem;
}

@media (max-width: 960px) {
    .promo-row {
        grid-template-columns: 1fr;
    }

    .hero-banner {
        flex-direction: column;
    }

    .hero-banner-panel {
        max-width: none;
    }

    .footer-columns {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 720px) {
    .promo-tile {
        min-height: 170px;
    }

    .support-spot-hand {
        display: none;
    }

    .footer-payments-inner {
        justify-content: center;
        row-gap: 0.85rem;
    }

    .footer-payments-label {
        flex-basis: 100%;
        text-align: center;
        order: 1;
    }

    .payment-marquee {
        flex-basis: 100%;
        order: 2;
    }

    .footer-kiyoh-link {
        margin-left: 0;
        order: 3;
        flex-basis: 100%;
        justify-content: center;
        padding-top: 0.85rem;
        border-top: 1px solid var(--color-border);
    }
}

.admin-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-card);
}

.admin-panel h2 {
    margin: 0 0 1rem;
    font-size: 1.05rem;
    color: var(--brand-navy);
}

.admin-panel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 1.5rem;
}

.admin-panel-grid .admin-panel {
    margin-bottom: 0;
}

.admin-badge {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 700;
    background: var(--color-background);
    color: var(--brand-navy);
}

.admin-badge.is-on,
.admin-badge.circuit-closed,
.admin-badge.sync-completed {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.admin-badge.is-off,
.admin-badge.circuit-open,
.admin-badge.sync-failed {
    background: var(--color-error-bg);
    color: var(--color-error-text);
}

.admin-badge.circuit-half_open,
.admin-badge.sync-running {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
}

.admin-badge-type-payment {
    background: var(--brand-sky-soft);
    color: var(--brand-blue);
}

.admin-badge-type-supplier {
    background: var(--brand-cream);
    color: var(--brand-orange-dark);
}

.admin-badge-info {
    background: var(--brand-sky-soft);
    color: var(--brand-blue);
}

.admin-badge-success {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.admin-segment {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.3rem;
    margin-bottom: 0;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
}

.admin-segment-item {
    padding: 0.42rem 1.1rem;
    border-radius: var(--radius-pill);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--color-muted);
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.admin-segment-item:hover {
    color: var(--brand-navy);
}

.admin-segment-item.is-active {
    background: var(--color-surface);
    color: var(--brand-navy);
    box-shadow: var(--shadow-soft);
}

.admin-sync-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.3rem;
    font-size: 0.85rem;
}

.admin-button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.admin-button-row form {
    margin: 0;
}

.admin-plain-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
}

.admin-plain-list > li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--color-border);
}

.admin-plain-list > li:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.admin-actions form {
    margin: 0;
}

.admin-button-small {
    display: inline-block;
    padding: 0.35rem 1rem;
    border: 2px solid var(--color-border);
    background: var(--color-surface);
    color: var(--brand-navy);
    border-radius: var(--radius-pill);
    font-size: 0.85rem;
    font-weight: 700;
    font-family: inherit;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.admin-button-small:hover {
    border-color: var(--brand-sky);
}

.admin-button-small:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.admin-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
}

.admin-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border);
}

.admin-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.admin-flash {
    border-radius: var(--radius);
    padding: 0.75rem 1.1rem;
    margin: 0 0 1.25rem;
    font-weight: 600;
}

.admin-flash-success {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.admin-flash-error {
    background: var(--color-error-bg);
    color: var(--color-error-text);
}

.announcement-bar {
    background: var(--brand-navy-deep);
    color: var(--color-surface);
    font-size: 0.82rem;
    font-weight: 700;
}

.announcement-bar-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    text-align: center;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    position: relative;
}

.announcement-bar-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / 12%);
    color: inherit;
    cursor: pointer;
    transition: background-color 130ms ease;
}

.announcement-bar-close:hover,
.announcement-bar-close:focus-visible {
    background: rgb(255 255 255 / 28%);
}

.hero-carousel {
    position: relative;
    margin: clamp(1.2rem, 3vw, 1.8rem) 0 clamp(2.25rem, 5vw, 3.25rem);
}

.hero-slides {
    display: grid;
}

.hero-slide {
    grid-area: 1 / 1;
    margin-bottom: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 600ms ease, visibility 600ms ease;
    pointer-events: none;
}

.hero-slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.hero-slide.is-active .hero-banner-panel {
    animation: hero-fade-up 700ms ease both;
}

.hero-slide.is-active .hero-banner-art img {
    animation: hero-float 6s ease-in-out infinite;
}

.hero-banner-title {
    margin: 0 0 0.6rem;
    font-size: clamp(1.7rem, 3.6vw, 2.5rem);
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--color-surface);
}

.hero-banner-actions {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.hero-banner-cta-secondary {
    background: rgb(255 255 255 / 12%);
    border-color: rgb(255 255 255 / 35%);
    color: var(--color-surface);
}

.hero-banner-cta-secondary:hover {
    background: rgb(255 255 255 / 22%);
    border-color: var(--color-surface);
    color: var(--color-surface);
}

.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border: none;
    border-radius: 50%;
    background: rgb(22 21 20 / 45%);
    color: var(--color-surface);
    cursor: pointer;
    transition: background 140ms ease;
    backdrop-filter: blur(2px);
}

.hero-arrow:hover,
.hero-arrow:focus-visible {
    background: rgb(22 21 20 / 70%);
    outline: none;
}

.hero-arrow:focus-visible {
    box-shadow: 0 0 0 3px var(--brand-sky);
}

.hero-arrow-prev {
    left: 0.9rem;
}

.hero-arrow-next {
    right: 0.9rem;
}

.hero-dots {
    position: absolute;
    left: 50%;
    bottom: 0.9rem;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    gap: 0.5rem;
}

.hero-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.hero-dot::before {
    content: '';
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: rgb(255 255 255 / 45%);
    transition: background 140ms ease, transform 140ms ease;
}

.hero-dot:hover::before,
.hero-dot:focus-visible::before {
    background: rgb(255 255 255 / 75%);
}

.hero-dot:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--brand-sky);
}

.hero-dot.is-active::before {
    background: var(--color-surface);
    transform: scale(1.25);
}

@keyframes hero-fade-up {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes hero-float {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-slide {
        transition: none;
    }

    .hero-slide.is-active .hero-banner-panel,
    .hero-slide.is-active .hero-banner-art img {
        animation: none;
    }
}

.cms-page {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-card);
    padding: clamp(1.6rem, 4vw, 3rem) clamp(1.6rem, 5vw, 4rem);
}

.cms-page h1 {
    margin: 0 0 1.4rem;
    font-size: clamp(1.7rem, 3.4vw, 2.5rem);
    font-weight: 800;
    color: var(--brand-navy);
    line-height: 1.14;
}

.cms-page-body {
    max-width: 62rem;
    font-size: 1.03rem;
    line-height: 1.7;
}

.cms-page-body h2 {
    margin: 1.9rem 0 0.6rem;
    font-size: clamp(1.25rem, 2.4vw, 1.55rem);
    font-weight: 800;
    color: var(--brand-navy);
}

.cms-page-body h3 {
    margin: 1.2rem 0 0.35rem;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--brand-navy);
}

.cms-page-body p {
    margin: 0 0 0.85rem;
    color: var(--color-text);
}

.cms-page-body ul,
.cms-page-body ol {
    margin: 0 0 0.85rem;
    padding-left: 1.3rem;
}

.cms-page-body li {
    margin-bottom: 0.35rem;
}

.cms-page-body a {
    color: var(--brand-orange);
    font-weight: 700;
    text-decoration: none;
}

.cms-page-body a:hover {
    color: var(--brand-orange-dark);
}

.seo-external-link {
    color: var(--brand-blue);
    font-weight: 700;
}

.seo-external-link:hover {
    color: var(--brand-orange);
}

@media (max-width: 960px) {
    .header-actions {
        margin-left: auto;
    }

    .hero-arrow {
        width: 2.2rem;
        height: 2.2rem;
    }
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.checkout-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.4rem, 4vw, 3.2rem);
    align-items: start;
    margin-top: 1rem;
}

.checkout-column h2 {
    margin: 0 0 0.9rem;
    color: var(--brand-navy);
    font-size: 1.35rem;
    font-weight: 800;
}

.checkout-note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-muted);
    font-size: 0.92rem;
    margin: 0 0 1.4rem;
}

.checkout-note svg {
    color: var(--brand-sky);
    flex-shrink: 0;
}

.checkout-note-success svg {
    color: var(--color-success);
}

.checkout-products-label {
    margin: 0 0 0.5rem;
    color: var(--color-text);
    font-size: 0.95rem;
}

.checkout-summary-lines {
    list-style: none;
    margin: 0 0 0.9rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.checkout-summary-lines li {
    display: flex;
    justify-content: space-between;
    gap: 0.8rem;
    font-weight: 600;
}

.order-discount-line {
    display: flex;
    justify-content: space-between;
    gap: 0.8rem;
    margin: 0.3rem 0;
    font-weight: 600;
    color: var(--color-success);
}

.checkout-total-bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1.2rem;
    padding: 0.95rem 1.15rem;
    background: linear-gradient(105deg, var(--brand-navy), var(--brand-blue));
    color: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: 0 6px 16px rgb(63 57 52 / 18%);
    font-weight: 800;
}

.checkout-total-note {
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 600;
    opacity: 0.85;
}

.checkout-trust-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-muted);
    font-size: 0.88rem;
    margin: 0 0 2rem;
}

.checkout-trust-line svg {
    color: var(--color-success);
    flex-shrink: 0;
}

.checkout-back {
    color: var(--color-muted);
    border-color: var(--color-border);
    background: var(--color-surface);
}

.checkout-subheading {
    margin: 0 0 1rem;
    color: var(--brand-sky);
    font-size: 1.25rem;
    font-weight: 800;
}

.checkout-column-details label {
    display: block;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.checkout-column-details input,
.checkout-column-details select {
    width: 100%;
    font-family: var(--font-stack);
    font-size: 1rem;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 0.75rem 0.9rem;
    margin-bottom: 0.6rem;
}

.checkout-column-details input:focus,
.checkout-column-details select:focus {
    outline: none;
    border-color: var(--brand-sky);
    box-shadow: 0 0 0 4px rgb(154 140 123 / 14%);
}

.checkout-hint {
    color: var(--color-muted);
    font-size: 0.85rem;
    margin: 0 0 1.1rem;
}

.payment-method-list {
    list-style: none;
    margin: 0 0 1.2rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.payment-method-option {
    display: grid;
    grid-template-columns: auto 56px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 0.85rem;
    row-gap: 0.4rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.78rem 0.95rem;
    cursor: pointer;
    background: var(--color-surface);
    transition: border-color 130ms ease, box-shadow 130ms ease, background-color 130ms ease;
}

.payment-method-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 30px;
}

.payment-method-fee {
    justify-self: end;
    white-space: nowrap;
    padding: 0.12rem 0.5rem;
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    font-weight: 700;
}

.payment-method-info {
    grid-column: 1 / -1;
}

.payment-method-option:hover {
    border-color: var(--brand-sky);
}

.payment-method-option:has(input:checked) {
    border-color: #4caf50;
    background: #f4faf1;
    box-shadow: 0 0 0 3px rgb(76 175 80 / 14%);
}

.payment-method-option input[type='radio']:checked {
    accent-color: #4caf50;
}

.payment-method-info {
    display: none;
    flex-direction: column;
    gap: 0.2rem;
    padding-top: 0.4rem;
    border-top: 1px solid rgb(76 175 80 / 25%);
    font-size: 0.88rem;
    color: var(--color-text);
}

.payment-method-info strong {
    color: var(--brand-navy);
}

.payment-method-option:has(input:checked) .payment-method-info {
    display: flex;
}

.payment-method-free {
    color: #1d8348;
    background: #e7f6ec;
}

.checkout-captcha-notice {
    margin-top: -1.4rem;
    font-size: 0.82rem;
    align-items: flex-start;
}

.checkout-captcha-notice svg {
    color: var(--color-muted);
    margin-top: 0.15rem;
}

.checkout-captcha-notice a {
    color: var(--brand-blue);
}

.form-captcha-notice {
    color: var(--color-muted);
    font-size: 0.82rem;
    margin: 0.5rem 0 1rem;
}

.form-captcha-notice a {
    color: var(--brand-blue);
}

.payment-method-logo {
    max-height: 26px;
    max-width: 56px;
    width: auto;
    height: auto;
    display: block;
    object-fit: contain;
}

.payment-method-logo-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 26px;
    border-radius: 5px;
    background: var(--brand-sky-soft);
    color: var(--brand-blue);
    font-size: 0.7rem;
    font-weight: 800;
}

.payment-method-name {
    font-weight: 700;
    color: var(--brand-navy);
    min-width: 0;
}

.checkout-terms a {
    color: var(--brand-blue);
}

.checkout-submit {
    width: 100%;
    justify-content: center;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: linear-gradient(180deg, #4fb954, #3f9e44);
    border-color: #43a047;
    color: var(--color-surface);
    font-size: 1.08rem;
    font-weight: 800;
    padding: 1rem 1.4rem;
    border-radius: var(--radius);
    box-shadow: 0 8px 20px rgb(76 175 80 / 30%);
    transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.checkout-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgb(76 175 80 / 38%);
}

.checkout-submit:hover {
    background: #3d9c42;
    border-color: #3d9c42;
    color: var(--color-surface);
}

.checkout-submit:disabled {
    background: var(--color-border);
    border-color: var(--color-border);
    color: var(--color-muted);
    box-shadow: none;
    cursor: not-allowed;
}

@media (max-width: 980px) {
    .checkout-columns {
        grid-template-columns: 1fr;
    }
}

.checkout-optins {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 1rem;
}

.checkout-checkbox {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    font-weight: 500;
    color: var(--color-text);
}

.checkout-checkbox input {
    width: 1.15rem;
    height: 1.15rem;
    accent-color: var(--brand-sky);
    flex-shrink: 0;
}

.checkout-coupon {
    margin-bottom: 1.1rem;
}

.checkout-coupon-toggle {
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    color: var(--brand-sky);
    font-family: var(--font-stack);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.checkout-coupon-toggle:hover {
    color: var(--brand-blue);
}

.checkout-coupon-field {
    margin-top: 0.7rem;
}

.checkout-coupon-field input {
    width: 100%;
    font-family: var(--font-stack);
    font-size: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 0.7rem 0.9rem;
}

.checkout-coupon-field input:focus {
    outline: none;
    border-color: var(--brand-sky);
    box-shadow: 0 0 0 4px rgb(154 140 123 / 14%);
}

.about-intro {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: clamp(1.5rem, 4vw, 2.6rem);
    align-items: start;
}

.about-video {
    position: sticky;
    top: 90px;
}

.about-video-frame {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    aspect-ratio: 16 / 9;
    background: var(--brand-navy-deep);
}

.about-video-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.about-video-caption {
    display: block;
    margin-top: 0.6rem;
    color: var(--color-muted);
    font-weight: 700;
    font-size: 0.92rem;
}

.about-team {
    margin-top: clamp(2.4rem, 6vw, 3.6rem);
}

.about-team h2 {
    margin: 0 0 0.4rem;
    font-size: clamp(1.35rem, 2.6vw, 1.7rem);
    font-weight: 800;
    color: var(--brand-navy);
}

.about-team-lead {
    max-width: 46rem;
    margin: 0 0 1.8rem;
    color: var(--color-muted);
    font-size: 1.02rem;
}

.about-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
    gap: clamp(1rem, 2.5vw, 1.6rem);
}

.team-card {
    background: var(--brand-sky-soft);
    border: 1px solid #eeebe3;
    border-radius: var(--radius);
    padding: 1.6rem 1.4rem 1.4rem;
    text-align: center;
}

.team-avatar {
    width: 150px;
    height: 150px;
    object-fit: cover;
    margin: 0 auto 0.9rem;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, #fff 0%, #fdf5eb 70%, #eeebe3 100%);
    border: 4px solid var(--color-surface);
    box-shadow: 0 8px 22px rgb(63 57 52 / 14%);
}

.team-card h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--brand-navy);
}

.team-role {
    margin: 0.15rem 0 0.8rem;
    color: var(--brand-sky);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.team-bio {
    margin: 0;
    color: var(--color-text);
    font-size: 0.92rem;
    line-height: 1.55;
    text-align: left;
}

@media (max-width: 860px) {
    .about-intro {
        grid-template-columns: 1fr;
    }

    .about-video {
        position: static;
        order: -1;
    }
}

.payment-logos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
    gap: 1rem;
    margin-top: 1.8rem;
}

.payment-logo-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    padding: 1.1rem 0.9rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    text-align: center;
}

.payment-logo-card img {
    height: 34px;
    width: auto;
    object-fit: contain;
}

.payment-logo-card span {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--brand-navy);
}

.error-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52vh;
    padding: clamp(2rem, 5vw, 4rem) 1rem;
}

.error-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.error-card {
    --spot-face-w: clamp(130px, 15vw, 175px);
    position: relative;
    max-width: 36rem;
    width: 100%;
    background:
        radial-gradient(420px 260px at 100% 0%, rgb(255 255 255 / 14%), transparent 60%),
        linear-gradient(150deg, var(--brand-navy-deep), var(--brand-navy));
    color: var(--color-surface);
    border-radius: var(--radius-large);
    margin-top: calc(var(--spot-face-w) * 0.4);
    padding: clamp(2.6rem, 6vw, 3.6rem) clamp(1.6rem, 5vw, 3.2rem) clamp(2rem, 4vw, 2.8rem);
    box-shadow: var(--shadow-card);
    text-align: center;
}

.error-spot-face {
    position: absolute;
    width: calc(var(--spot-face-w) * var(--spot-face-scale, 1));
    left: 50%;
    top: calc(var(--spot-face-w) * -0.34 - var(--spot-face-w) * var(--spot-face-head-top, 0));
    transform: translateX(-50%);
    pointer-events: none;
    filter: drop-shadow(0 6px 14px rgb(46 43 41 / 22%));
    animation: spot-card-peek 6s ease-in-out infinite;
}

.error-spot-hand {
    position: absolute;
    pointer-events: none;
    filter: drop-shadow(0 3px 6px rgb(46 43 41 / 25%));
    animation: spot-hand-bob 6s ease-in-out infinite;
}

.error-spot-hand-top {
    width: clamp(40px, 4.6vw, 52px);
    top: -13px;
    left: 13%;
}

.error-spot-hand-side {
    width: clamp(19px, 2.2vw, 25px);
    top: 3rem;
    right: -9px;
}

@media (prefers-reduced-motion: reduce) {
    .error-spot-face {
        animation: none;
    }
}

.error-status {
    display: inline-block;
    background: rgb(255 255 255 / 12%);
    color: #d0c7b9;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.3rem 0.9rem;
    border-radius: 999px;
    margin-bottom: 0.9rem;
}

.error-heading {
    margin: 0 0 0.5rem;
    color: var(--color-surface);
    font-size: clamp(2.6rem, 10vw, 4.2rem);
    font-weight: 800;
    line-height: 1;
}

.error-message {
    margin: 0 0 0.9rem;
    color: #eae6da;
    font-size: clamp(1.1rem, 2.6vw, 1.35rem);
    font-weight: 700;
    line-height: 1.35;
}

.error-joke {
    margin: 0 auto 1.9rem;
    max-width: 26rem;
    color: rgb(255 255 255 / 72%);
    font-size: 0.98rem;
    font-style: italic;
    line-height: 1.5;
}

.error-home {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--brand-orange);
    border-color: var(--brand-orange);
    color: var(--on-orange);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.9rem 1.6rem;
    border-radius: 8px;
}

.error-home:hover {
    background: #a84700;
    border-color: #a84700;
    color: var(--color-surface);
}

.error-back {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: transparent;
    border: 2px solid rgb(255 255 255 / 45%);
    color: var(--color-surface);
    font-weight: 800;
    font-size: inherit;
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.9rem 1.6rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 130ms ease, border-color 130ms ease;
}

.error-back:hover {
    background: rgb(255 255 255 / 12%);
    border-color: var(--color-surface);
    color: var(--color-surface);
}

.account-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.7rem;
    height: 2.7rem;
    color: var(--brand-navy);
    text-decoration: none;
    border: 2px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    transition: border-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.account-button:hover,
.account-button:focus-visible {
    border-color: var(--brand-sky);
    color: var(--brand-blue);
    box-shadow: 0 0 0 4px rgb(154 140 123 / 12%);
    outline: none;
}

.account-dot {
    position: absolute;
    top: 0.2rem;
    right: 0.2rem;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--color-success);
    box-shadow: 0 0 0 2px var(--color-surface);
}

.profile-menu {
    position: relative;
}

.profile-menu-button {
    cursor: pointer;
    padding: 0;
}

.profile-menu-panel {
    position: absolute;
    top: calc(100% + 0.55rem);
    right: 0;
    min-width: 16.5rem;
    padding: 0.45rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-pop);
    z-index: 60;
}

.profile-menu-header {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.7rem 0.7rem;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 0.35rem;
}

.profile-menu-header .account-avatar {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 0.85rem;
}

.profile-menu-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.profile-menu-meta strong {
    color: var(--brand-navy);
    font-size: 0.92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-menu-meta span {
    color: var(--color-muted);
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-menu-panel a[role='menuitem'] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    border-radius: var(--radius-small);
    color: var(--brand-navy);
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.profile-menu-panel a[role='menuitem']:hover,
.profile-menu-panel a[role='menuitem']:focus-visible {
    background: var(--brand-sky-soft);
    color: var(--brand-blue);
    outline: none;
}

.profile-menu-panel .profile-menu-logout {
    color: var(--color-danger);
    margin-top: 0.35rem;
    border-top: 1px solid var(--color-border);
    border-radius: 0 0 var(--radius-small) var(--radius-small);
}

.profile-menu-panel .profile-menu-logout:hover,
.profile-menu-panel .profile-menu-logout:focus-visible {
    background: rgb(210 59 46 / 8%);
    color: var(--color-danger);
}

.auth-page {
    display: flex;
    flex-direction: column;
}

.auth-page > .auth-card {
    align-self: center;
}

.auth-card {
    width: 100%;
    max-width: 26rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-card);
    padding: clamp(1.6rem, 4vw, 2.4rem);
}

.auth-card h1 {
    margin: 0 0 1.2rem;
    color: var(--brand-navy);
    font-size: 1.6rem;
    font-weight: 800;
}

.auth-remember {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    margin: 0.2rem 0 0.4rem;
}

.password-reveal-wrap {
    position: relative;
}

.password-reveal-wrap input {
    padding-right: 2.9rem;
}

.password-reveal-toggle {
    position: absolute;
    top: 50%;
    right: 0.55rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
    transition: color var(--transition-fast), background var(--transition-fast);
}

.password-reveal-toggle:hover {
    color: var(--brand-navy);
    background: var(--brand-sky-soft);
}

.password-reveal-toggle svg {
    flex-shrink: 0;
}

.password-reveal-toggle svg[hidden] {
    display: none;
}

.password-reveal-toggle[aria-pressed='true'] {
    color: var(--brand-blue);
}

.password-reveal-toggle:focus-visible {
    outline: 2px solid var(--brand-sky);
    outline-offset: 1px;
}

.auth-submit {
    width: 100%;
    justify-content: center;
    margin-top: 1.2rem;
}

.auth-hint {
    color: var(--color-muted);
    font-size: 0.85rem;
    margin: 0.35rem 0 0;
}

.auth-links {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.2rem;
    flex-wrap: wrap;
}

.auth-links a {
    color: var(--brand-blue);
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
}

.account-shell {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: clamp(1.2rem, 3vw, 2.2rem);
    align-items: start;
}

.account-nav {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.2rem;
    position: sticky;
    top: 90px;
}

.account-nav-title {
    margin: 0 0 0.8rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--brand-sky);
}

.account-nav nav {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.account-nav a {
    display: block;
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    color: var(--brand-navy);
    text-decoration: none;
    font-weight: 700;
    transition: background 130ms ease, color 130ms ease;
}

.account-nav a:hover {
    background: var(--brand-sky-soft);
    color: var(--brand-blue);
}

.account-nav a.is-active {
    background: var(--brand-navy);
    color: var(--color-surface);
}

.account-nav-logout {
    margin-top: 0.6rem;
    padding-top: 0.75rem !important;
    border-top: 1px solid var(--color-border);
    border-radius: 0 0 8px 8px !important;
    color: var(--color-danger) !important;
}

.account-nav-logout:hover {
    background: var(--color-error-bg) !important;
    color: #a12a1f !important;
}

.account-content h1 {
    margin: 0 0 1rem;
    color: var(--brand-navy);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
}

.account-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
    gap: 1rem;
    margin: 1.4rem 0;
}

.account-card {
    display: block;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.2rem;
    text-decoration: none;
    box-shadow: var(--shadow-card);
    transition: transform 140ms ease, box-shadow 140ms ease;
}

.account-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-pop);
}

.account-card h3 {
    margin: 0 0 0.35rem;
    color: var(--brand-navy);
}

.account-card p {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.9rem;
}

.account-order-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.account-order-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.9rem 1.1rem;
    text-decoration: none;
    color: var(--brand-navy);
    font-weight: 700;
}

.account-order-list a:hover {
    border-color: var(--brand-sky);
}

.account-order-status {
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    background: var(--brand-sky-soft);
    color: var(--brand-blue);
}

.account-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.4rem;
    margin-bottom: 1.2rem;
}

.account-panel h2 {
    margin: 0 0 0.9rem;
    color: var(--brand-navy);
    font-size: 1.2rem;
}

.session-list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.session-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.8rem 0.95rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.session-item-current {
    border-color: var(--brand-sky);
    background: var(--brand-sky-soft);
}

.session-item-empty {
    justify-content: center;
    color: var(--color-muted);
}

.session-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--brand-navy);
}

.session-details {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1;
}

.session-details strong {
    color: var(--brand-navy);
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.session-current-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.55rem;
    border-radius: var(--radius-pill);
    background: var(--brand-blue);
    color: var(--color-surface);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.session-meta {
    color: var(--color-muted);
    font-size: 0.82rem;
}

.session-item form {
    margin-left: auto;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .session-item {
        flex-wrap: wrap;
    }

    .session-item form {
        width: 100%;
        margin-left: 0;
    }

    .session-item form .button {
        width: 100%;
    }
}

.account-panel label {
    display: block;
    font-weight: 700;
    margin: 0.7rem 0 0.35rem;
}

.account-panel input,
.account-panel select,
.account-content input,
.account-content select {
    width: 100%;
    max-width: 26rem;
    font-family: var(--font-stack);
    font-size: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 0.7rem 0.9rem;
    margin-bottom: 0.4rem;
}

.account-panel-danger {
    border-color: #f2c4c4;
}

.account-reveal-code code,
.account-recovery-codes code,
.account-2fa-secret code {
    display: inline-block;
    background: var(--brand-navy-deep);
    color: #7fe3a3;
    padding: 0.5rem 0.9rem;
    border-radius: 8px;
    font-size: 1.1rem;
    letter-spacing: 0.08em;
}

.account-recovery-codes {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr));
    gap: 0.6rem;
    margin: 1rem 0;
    padding: 0;
}

.account-activity {
    list-style: none;
    margin: 0;
    padding: 0;
}

.account-activity li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.9rem;
}

.account-activity li:last-child {
    border-bottom: 0;
}

.account-activity-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 50%;
}

.account-activity-icon.is-ok {
    background: #e5f6ec;
    color: var(--color-success);
}

.account-activity-icon.is-fail {
    background: var(--color-error-bg);
    color: var(--color-danger);
}

.account-activity-details {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex: 1;
}

.account-activity-details strong {
    color: var(--brand-navy);
    font-weight: 700;
}

.account-activity-meta {
    color: var(--color-muted);
    font-size: 0.8rem;
}

.account-activity-status {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    white-space: nowrap;
}

.account-activity-status.ok {
    background: #e5f6ec;
    color: var(--color-success);
}

.account-activity-status.fail {
    background: var(--color-error-bg);
    color: var(--color-danger);
}

.account-activity-empty {
    color: var(--color-muted);
}

.account-activity .ok {
    color: var(--color-success);
}

.account-activity .fail {
    color: #e5484d;
}

.account-order-lines {
    list-style: none;
    margin: 1.2rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.account-order-lines li {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.9rem 1.1rem;
}

.account-order-line-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-weight: 700;
}

.account-order-total {
    display: flex;
    justify-content: space-between;
    font-size: 1.15rem;
    border-top: 2px solid var(--color-border);
    padding-top: 0.8rem;
}

.account-back {
    display: inline-block;
    margin-bottom: 0.8rem;
    color: var(--brand-blue);
    font-weight: 700;
    text-decoration: none;
}

@media (max-width: 820px) {
    .account-shell {
        grid-template-columns: 1fr;
    }

    .account-nav {
        position: static;
    }
}

.menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.7rem;
    height: 2.7rem;
    flex-shrink: 0;
    background: var(--color-surface);
    color: var(--brand-navy);
    border: 2px solid var(--color-border);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color 140ms ease, color 140ms ease;
}

.menu-toggle:hover,
.menu-toggle:focus-visible {
    border-color: var(--brand-sky);
    color: var(--brand-blue);
    outline: none;
}

.site-header.menu-open .menu-toggle {
    border-color: var(--brand-sky);
    color: var(--brand-blue);
}

.menu-toggle-box {
    position: relative;
    display: block;
    width: 20px;
    height: 15px;
}

.menu-toggle-bar {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2.4px;
    border-radius: 999px;
    background: currentColor;
    transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1), opacity 180ms ease, top 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-toggle-bar:nth-child(1) {
    top: 0;
}

.menu-toggle-bar:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
}

.menu-toggle-bar:nth-child(3) {
    top: 100%;
    transform: translateY(-100%);
}

.menu-toggle {
    transition: transform 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.menu-toggle:active {
    transform: scale(0.9);
}

.menu-toggle:hover {
    box-shadow: 0 4px 12px rgb(63 57 52 / 14%);
}

.site-header.menu-open .menu-toggle-bar:nth-child(1),
.menu-toggle[aria-expanded='true'] .menu-toggle-bar:nth-child(1),
.mobile-drawer.is-open .mobile-drawer-close .menu-toggle-bar:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

.site-header.menu-open .menu-toggle-bar:nth-child(2),
.menu-toggle[aria-expanded='true'] .menu-toggle-bar:nth-child(2),
.mobile-drawer.is-open .mobile-drawer-close .menu-toggle-bar:nth-child(2) {
    opacity: 0;
    transform: translateY(-50%) scaleX(0.3);
}

.site-header.menu-open .menu-toggle-bar:nth-child(3),
.menu-toggle[aria-expanded='true'] .menu-toggle-bar:nth-child(3),
.mobile-drawer.is-open .mobile-drawer-close .menu-toggle-bar:nth-child(3) {
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
}

.mobile-drawer-close .menu-toggle-box {
    width: 18px;
    height: 14px;
}

.mobile-drawer.is-open .mobile-drawer-close .menu-toggle-bar:nth-child(1) { transition-delay: 150ms; }
.mobile-drawer.is-open .mobile-drawer-close .menu-toggle-bar:nth-child(2) { transition-delay: 110ms; }
.mobile-drawer.is-open .mobile-drawer-close .menu-toggle-bar:nth-child(3) { transition-delay: 150ms; }

.mobile-drawer-close:active {
    transform: scale(0.9);
}

.mobile-drawer {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 401;
    width: min(400px, 92vw);
    height: 100dvh;
    flex-direction: column;
    background: var(--color-surface);
    box-shadow: 18px 0 45px rgb(26 24 22 / 30%);
    transform: translateX(-102%);
    transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-drawer.is-open {
    transform: translateX(0);
}

.mobile-drawer-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 400;
    background: rgb(26 24 22 / 45%);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 220ms ease;
}

.site-header.menu-open .mobile-drawer-backdrop:not([hidden]) {
    opacity: 1;
}

.mobile-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-shrink: 0;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--color-border);
}

.mobile-drawer-head img {
    height: 27px;
    width: auto;
}

.mobile-drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    background: var(--brand-sky-soft);
    color: var(--brand-navy);
    cursor: pointer;
    transition: background 140ms ease, transform 140ms ease;
}

.mobile-drawer-close:hover,
.mobile-drawer-close:focus-visible {
    background: #efece2;
}

@media (prefers-reduced-motion: reduce) {
    .menu-toggle-bar,
    .mobile-drawer,
    .mobile-drawer-backdrop {
        transition: none;
    }
}

.mobile-drawer-nav {
    flex: 1;
    min-height: 0;
    padding: 0.75rem 1rem calc(1.25rem + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
}

.mobile-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-nav-list > li + li {
    border-top: 1px solid var(--color-border);
}

.mobile-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 0.35rem;
    color: var(--brand-navy);
    font-weight: 800;
    font-size: 1rem;
    text-decoration: none;
}

.mobile-nav-link:hover,
.mobile-nav-link:focus-visible {
    color: var(--brand-blue);
    outline: none;
}

.mobile-nav-link svg {
    color: var(--color-muted);
    flex-shrink: 0;
}

.mobile-nav-group {
    margin: 0;
}

.mobile-nav-group summary {
    list-style: none;
    cursor: pointer;
}

.mobile-nav-group summary::-webkit-details-marker {
    display: none;
}

.mobile-nav-chevron {
    transition: transform 150ms ease;
}

.mobile-nav-group[open] .mobile-nav-chevron {
    transform: rotate(90deg);
    color: var(--brand-blue);
}

.mobile-nav-group[open] > summary {
    color: var(--brand-blue);
}

.mobile-nav-sublist {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0.1rem 0.35rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.mobile-nav-sublink-all {
    background: var(--brand-navy);
    color: var(--color-surface);
}

.mobile-nav-link-sale {
    color: var(--brand-orange);
}

.mobile-nav-sublink {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    background: var(--brand-sky-soft);
    color: var(--brand-navy);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
}

.mobile-nav-sublink:hover,
.mobile-nav-sublink:focus-visible {
    background: var(--brand-sky);
    color: var(--on-orange);
    outline: none;
}

.mobile-drawer-footer {
    display: grid;
    gap: 0.5rem;
    margin-top: 1rem;
}

.mobile-drawer-action {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 0.9rem;
    background: var(--brand-sky-soft);
    color: var(--brand-navy);
    border-radius: var(--radius);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
}

.mobile-drawer-action:hover,
.mobile-drawer-action:focus-visible {
    color: var(--brand-blue);
    outline: none;
}

html.drawer-open,
body.drawer-open {
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
}

.mobile-drawer-nav {
    touch-action: pan-y;
}

.site-header.menu-open {
    z-index: 400;
}

@media (max-width: 1080px) {
    .menu-toggle {
        display: inline-flex;
    }

    .mobile-drawer:not([hidden]) {
        display: flex;
    }

    .mobile-drawer-backdrop:not([hidden]) {
        display: block;
    }

    .header-inner {
        flex-wrap: wrap;
        gap: 0.7rem;
        row-gap: 0.7rem;
    }

    .logo img {
        height: 36px;
    }

    .header-search {
        order: 5;
        flex-basis: 100%;
        max-width: none;
        margin: 0;
    }

    .header-actions {
        gap: 0.45rem;
    }

    .topbar-inner {
        justify-content: center;
        gap: 1rem;
    }

    .topbar-inner .topbar-reviews {
        display: none;
    }

    .topbar-inner.is-rotating {
        position: relative;
        height: 2rem;
        padding-top: 0;
        padding-bottom: 0;
        flex-wrap: nowrap;
    }

    .topbar-inner.is-rotating .topbar-usp {
        position: absolute;
        inset: 0;
        justify-content: center;
        opacity: 0;
        transform: translateY(0.45rem);
        transition: opacity 350ms ease, transform 350ms ease;
        pointer-events: none;
    }

    .topbar-inner.is-rotating .topbar-usp.is-active {
        opacity: 1;
        transform: translateY(0);
    }

    .topbar-inner.is-rotating .topbar-usp.is-leaving {
        opacity: 0;
        transform: translateY(-0.45rem);
    }

    @media (prefers-reduced-motion: reduce) {
        .topbar-inner.is-rotating .topbar-usp {
            transition: none;
            transform: none;
        }
    }
}

.password-meter {
    margin: 0.6rem 0 0.4rem;
}

.password-meter-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.3rem;
}

.password-meter-bar span {
    height: 0.4rem;
    border-radius: 999px;
    background: var(--color-border);
    transition: background 160ms ease;
}

.password-meter-bar[data-level='1'] span:nth-child(-n+1) { background: #e0533f; }
.password-meter-bar[data-level='2'] span:nth-child(-n+2) { background: var(--brand-orange); }
.password-meter-bar[data-level='3'] span:nth-child(-n+3) { background: var(--brand-sky); }
.password-meter-bar[data-level='4'] span:nth-child(-n+4) { background: var(--color-success); }

.password-meter-label {
    display: block;
    min-height: 1.1rem;
    margin-top: 0.3rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-muted);
}

.password-requirements {
    list-style: none;
    margin: 0.4rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.25rem;
}

.password-requirements li {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--color-muted);
    font-size: 0.85rem;
}

.password-requirements li::before {
    content: '';
    width: 0.95rem;
    height: 0.95rem;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid var(--color-border);
    background: transparent;
    transition: background 140ms ease, border-color 140ms ease;
}

.password-requirements li.is-met {
    color: var(--color-success);
}

.password-requirements li.is-met::before {
    border-color: var(--color-success);
    background: var(--color-success) center / 70% no-repeat;
    clip-path: none;
}

.qr-panel {
    display: flex;
    gap: 1.4rem;
    align-items: flex-start;
    flex-wrap: wrap;
    margin: 1rem 0;
}

.qr-code {
    width: min(220px, 60vw);
    aspect-ratio: 1;
    padding: 0.6rem;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.qr-code svg {
    display: block;
    width: 100%;
    height: 100%;
}

.qr-instructions {
    flex: 1;
    min-width: 15rem;
}

.qr-instructions ol {
    margin: 0.4rem 0 0;
    padding-left: 1.2rem;
    display: grid;
    gap: 0.4rem;
    color: var(--color-text);
    font-size: 0.93rem;
}

.qr-secret {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.4rem 0.7rem;
    background: var(--brand-sky-soft);
    border-radius: 8px;
    font-family: ui-monospace, 'Cascadia Mono', monospace;
    font-size: 0.9rem;
    letter-spacing: 0.12em;
    word-break: break-all;
}

.cms-page-payments .pm-heading {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.cms-page-payments .pm-logo {
    height: 30px;
    width: auto;
    padding: 0.3rem 0.55rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-sizing: content-box;
    box-shadow: 0 1px 4px rgb(63 57 52 / 8%);
}

.jobs-page {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.jobs-intro h2 {
    margin-top: 1.6rem;
}

.jobs-vacancies h2,
.jobs-apply h2 {
    color: var(--brand-navy);
    margin: 0 0 0.9rem;
}

.jobs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
    gap: 1rem;
}

.job-card {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.3rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-card);
}

.job-card-open {
    background: var(--brand-sky-soft);
    border-style: dashed;
}

.job-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 12px;
    background: linear-gradient(150deg, var(--brand-sky), var(--brand-blue));
    color: var(--on-orange);
}

.job-card-title {
    margin: 0;
    color: var(--brand-navy);
    font-size: 1.08rem;
}

.job-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.job-card-tags li {
    padding: 0.15rem 0.6rem;
    border-radius: var(--radius-pill);
    background: var(--brand-sky-soft);
    color: var(--brand-blue);
    font-size: 0.78rem;
    font-weight: 700;
}

.job-card-note {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.9rem;
}

.job-card-apply {
    margin-top: auto;
    align-self: flex-start;
}

.jobs-apply {
    padding: 1.6rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-card);
}

.jobs-apply-intro {
    color: var(--color-muted);
    margin: 0 0 1.1rem;
}

.jobs-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1.2rem;
}

@media (max-width: 640px) {
    .jobs-form-grid {
        grid-template-columns: 1fr;
    }
}

.jobs-submit {
    margin-top: 0.6rem;
}

.job-detail {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    max-width: 860px;
}

.job-detail-header {
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
    padding: 1.6rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-card);
}

.job-detail-header h1 {
    margin: 0 0 0.6rem;
    color: var(--brand-navy);
    font-size: 1.6rem;
}

.job-detail-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 14px;
    background: linear-gradient(150deg, var(--brand-sky), var(--brand-blue));
    color: var(--on-orange);
}

.job-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.job-detail-meta li {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.7rem;
    border-radius: var(--radius-pill);
    background: var(--brand-sky-soft);
    color: var(--brand-blue);
    font-size: 0.82rem;
    font-weight: 700;
}

.job-detail-body {
    padding: 0 0.2rem;
}

.job-detail-body h2 {
    color: var(--brand-navy);
    margin: 1.4rem 0 0.5rem;
    font-size: 1.15rem;
}

.job-detail-body ul {
    margin: 0.4rem 0 0.9rem;
    padding-left: 1.3rem;
}

.job-detail-body li {
    margin-bottom: 0.3rem;
}

@media (max-width: 640px) {
    .job-detail-header {
        flex-direction: column;
    }
}

.recommended-note {
    color: var(--color-muted);
    font-size: 0.85rem;
}

.fraud-zone-bar {
    display: flex;
    height: 2rem;
    margin: 0.4rem 0 0.9rem;
    border-radius: 8px;
    overflow: hidden;
    font-size: 0.72rem;
    font-weight: 800;
    color: #fff;
}

.fraud-zone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    white-space: nowrap;
    padding: 0 0.3rem;
}

.fraud-zone-approve {
    background: #2f9e44;
}

.fraud-zone-review {
    background: #e8930c;
}

.fraud-zone-decline {
    background: #e5484d;
}

.fraud-config-warning {
    font-size: 0.86rem;
}

.news-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1.3rem;
}

.news-filter-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 1.05rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--brand-navy);
    font-weight: 700;
    font-size: 0.88rem;
    text-decoration: none;
    transition: border-color 150ms ease, background 150ms ease, color 150ms ease, transform 150ms ease;
}

.news-filter-chip:hover {
    border-color: var(--brand-blue);
    color: var(--brand-blue);
    transform: translateY(-1px);
}

.news-filter-chip.is-active {
    background: var(--brand-navy);
    border-color: var(--brand-navy);
    color: var(--color-surface);
}

@media (max-width: 640px) {
    .news-filter {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-top: 0.2rem;
        padding-bottom: 0.4rem;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .news-filter::-webkit-scrollbar {
        display: none;
    }

    .news-filter-chip {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

@media (hover: none) {
    .news-filter-chip,
    .news-pagination-page,
    .news-pagination-step {
        transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
    }

    .news-filter-chip:hover,
    .news-pagination-page:hover,
    .news-pagination-step:hover {
        transform: none;
    }
}

.news-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0 0 1.2rem;
    padding: 0.65rem 1rem;
    background: #f8f8f6;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.news-toolbar-status {
    color: var(--color-muted);
    font-size: 0.9rem;
}

.news-toolbar-perpage {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--color-muted);
    font-size: 0.9rem;
}

.news-toolbar-perpage select {
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    font: inherit;
    color: var(--color-text);
}

.news-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 2rem;
}

.news-pagination-pages {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.news-pagination-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.55rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--brand-navy);
    font-weight: 700;
    font-size: 0.92rem;
    text-decoration: none;
    transition: border-color 150ms ease, background 150ms ease, color 150ms ease, transform 150ms ease;
}

.news-pagination-page:hover {
    border-color: var(--brand-blue);
    color: var(--brand-blue);
    transform: translateY(-1px);
}

.news-pagination-page.is-current {
    background: var(--brand-orange);
    border-color: var(--brand-orange);
    color: var(--on-orange);
}

.news-pagination-gap {
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    min-width: 1.4rem;
    color: var(--color-muted);
    font-weight: 700;
}

.news-pagination-step {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.05rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--brand-navy);
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transition: border-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.news-pagination-step:hover {
    border-color: var(--brand-blue);
    color: var(--brand-blue);
    transform: translateY(-1px);
}

.news-pagination-step.is-disabled {
    opacity: 0.45;
    pointer-events: none;
}

.related-products {
    margin-top: 2rem;
}

.related-carousel {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 0.4rem;
}

.related-carousel-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 3.3rem) / 4);
    gap: 1.1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0.15rem;
    scrollbar-width: none;
    padding: 0.3rem 0.15rem 0.9rem;
    flex: 1;
    min-width: 0;
}

@media (max-width: 1200px) {
    .related-carousel-track {
        grid-auto-columns: calc((100% - 2.2rem) / 3);
    }
}

@media (max-width: 960px) {
    .related-carousel-track {
        grid-auto-columns: calc((100% - 1.1rem) / 2);
    }
}

.related-carousel-track::-webkit-scrollbar {
    display: none;
}

.related-carousel-track .product-card {
    scroll-snap-align: start;
}

.carousel-arrow {
    align-self: center;
    flex-shrink: 0;
    width: 2.6rem;
    height: 2.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--brand-navy);
    cursor: pointer;
    box-shadow: var(--shadow-card);
    transition: color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.carousel-arrow:hover:not(:disabled),
.carousel-arrow:focus-visible {
    color: var(--brand-blue);
    border-color: var(--brand-blue);
}

.carousel-arrow:disabled {
    opacity: 0.35;
    cursor: default;
    box-shadow: none;
}

.related-carousel:not(.has-overflow) .carousel-arrow {
    display: none;
}

@media (max-width: 720px) {
    .carousel-arrow {
        display: none;
    }

    .related-carousel-track {
        grid-auto-columns: 100%;
    }
}

.card-region-flag {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 2;
}

.region-flag {
    display: inline-flex;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 3px;
    padding: 0.22rem;
    box-shadow: 0 1px 3px rgba(44, 41, 39, 0.14);
    line-height: 0;
}

.region-flag svg {
    display: block;
    border-radius: 1px;
}

.card-region-note {
    display: block;
    color: var(--color-muted);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.45;
    margin-top: 0.35rem;
}

.product-visual-flag {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    z-index: 3;
}

.delivery-promise-instant,
.delivery-promise-rapid {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.cart-line-delivery,
.checkout-line-delivery {
    font-size: 0.8rem;
    font-weight: 700;
}

.cart-line-delivery.delivery-promise-instant,
.checkout-line-delivery.delivery-promise-instant {
    color: var(--color-success);
}

.cart-line-delivery.delivery-promise-rapid,
.checkout-line-delivery.delivery-promise-rapid {
    color: var(--brand-blue);
}

.cart-line-delivery.delivery-promise-unavailable,
.checkout-line-delivery.delivery-promise-unavailable {
    color: var(--color-error-text);
}

.checkout-line-delivery {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.45rem;
}

.loyalty-balance-panel {
    background:
        radial-gradient(420px 200px at 100% 0%, rgb(154 140 123 / 12%), transparent 60%),
        var(--color-surface);
}

.loyalty-balance-figure {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0 0 0.3rem;
}

.loyalty-balance-figure strong {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--brand-navy);
    line-height: 1.1;
}

.loyalty-balance-figure span {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--brand-blue);
}

.loyalty-balance-main {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.loyalty-coin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-orange), #e07b1f);
    color: var(--on-orange);
    box-shadow: 0 6px 14px rgb(194 82 0 / 25%);
}

.loyalty-balance-value {
    margin: 0.15rem 0 0.6rem;
    color: var(--color-muted);
    font-weight: 600;
}

.loyalty-campaign-banner {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.7rem;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    background: linear-gradient(100deg, var(--brand-orange), #f28306);
    color: var(--on-orange);
    font-size: 0.86rem;
    font-weight: 700;
    box-shadow: 0 6px 16px rgb(194 82 0 / 28%);
}

.loyalty-campaign-banner svg {
    flex-shrink: 0;
}

.loyalty-progress {
    margin-top: 0.8rem;
}

.loyalty-progress-track {
    height: 10px;
    border-radius: 999px;
    background: rgb(63 57 52 / 10%);
    overflow: hidden;
}

.loyalty-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--brand-blue), var(--brand-navy));
    min-width: 6px;
}

.loyalty-progress-note {
    margin: 0.4rem 0 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-muted);
}

.loyalty-tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.75rem;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.loyalty-tier-bronze {
    background: linear-gradient(135deg, #f7e5d5, #eccbaa);
    border-color: #d9ab7c;
    color: #7a4a1c;
}

.loyalty-tier-silver {
    background: linear-gradient(135deg, #f6f6f4, #e5e4e0);
    border-color: #c7c4bf;
    color: #5f5c58;
}

.loyalty-tier-gold {
    background: linear-gradient(135deg, #fdf3d1, #f6df94);
    border-color: #e3c25c;
    color: #8a6a10;
}

.loyalty-tier-platinum {
    background: linear-gradient(135deg, #f3f1ec, #e3dfd3);
    border-color: #c0b8ab;
    color: #2d4373;
}

.loyalty-tier-progress {
    margin-top: 0.8rem;
}

.loyalty-tier-top-note {
    margin: 0.6rem 0 0;
    font-weight: 700;
    color: var(--brand-navy);
}

.loyalty-tiers-intro {
    margin: 0 0 1rem;
    color: var(--color-muted);
    line-height: 1.6;
    max-width: 70ch;
}

.loyalty-tier-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: 0.9rem;
}

.loyalty-tier-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.loyalty-tier-card.is-current {
    border-color: var(--brand-sky);
    box-shadow: 0 0 0 3px rgb(154 140 123 / 14%);
}

.loyalty-tier-requirement {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--brand-navy);
}

.loyalty-tier-perk {
    margin: 0;
    font-size: 0.88rem;
    color: var(--color-muted);
    line-height: 1.55;
}

.loyalty-tier-current-label {
    margin-top: auto;
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--brand-blue);
}

.payment-method-restricted-note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0.9rem 0 0;
    padding: 0.7rem 0.9rem;
    border-radius: var(--radius-small);
    background: var(--brand-sky-soft);
    color: var(--brand-navy);
    font-size: 0.86rem;
    line-height: 1.55;
}

.payment-method-restricted-note svg {
    flex-shrink: 0;
    margin-top: 0.15rem;
    color: var(--brand-blue);
}

.checkout-submit-arrow {
    font-size: 1.1rem;
    transition: transform var(--transition-fast);
}

.checkout-submit:hover:not(:disabled) .checkout-submit-arrow {
    transform: translateX(3px);
}

.checkout-submit-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: 0.7rem 0 0;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--color-muted);
}

.checkout-submit-note svg {
    color: var(--color-success);
    flex-shrink: 0;
}

.order-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
    gap: 1.6rem;
    align-items: start;
}

.order-main {
    min-width: 0;
}

.order-main > * {
    margin-top: 0;
    margin-bottom: 0;
}

.order-main > * + * {
    margin-top: 1.6rem;
}

.order-main > .order-receipt + * {
    margin-top: 2.4rem;
}

.order-main > .order-gift-share + * {
    margin-top: 2.2rem;
}

@keyframes order-block-in {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes order-icon-pop {
    0% {
        transform: scale(0.4);
        opacity: 0;
    }

    65% {
        transform: scale(1.12);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.order-main > *,
.order-aside {
    animation: order-block-in 420ms cubic-bezier(0.22, 0.8, 0.35, 1) both;
}

.order-main > *:nth-child(2) {
    animation-delay: 90ms;
}

.order-main > *:nth-child(3) {
    animation-delay: 180ms;
}

.order-main > *:nth-child(4) {
    animation-delay: 270ms;
}

.order-main > *:nth-child(n+5) {
    animation-delay: 340ms;
}

.order-aside {
    animation-delay: 200ms;
}

.order-result-icon {
    animation: order-icon-pop 520ms cubic-bezier(0.34, 1.4, 0.5, 1) 180ms both;
}

@media (prefers-reduced-motion: reduce) {
    .order-main > *,
    .order-aside,
    .order-result-icon {
        animation: none;
    }
}

.order-aside {
    position: sticky;
    top: 90px;
}

.order-aside .order-video {
    margin-top: 0;
    max-width: none;
}

@media (max-width: 960px) {
    .order-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .order-aside {
        position: static;
    }
}

.order-receipt {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large) var(--radius-large) 0 0;
    box-shadow: var(--shadow-card);
    padding: 1.4rem 1.5rem 1.7rem;
}

.order-receipt-edge {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -9px;
    height: 10px;
    background:
        linear-gradient(-45deg, transparent 7px, var(--color-surface) 0) 0 0 / 18px 100%,
        linear-gradient(45deg, transparent 7px, var(--color-surface) 0) 9px 0 / 18px 100%;
    background-repeat: repeat-x;
    filter: drop-shadow(0 2px 2px rgb(42 40 38 / 8%));
}

.order-receipt-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem;
    padding-bottom: 1rem;
    border-bottom: 1px dashed var(--color-border);
}

.order-receipt-logo {
    flex-shrink: 0;
    width: 60px;
    height: 34px;
    object-fit: contain;
}

.order-receipt-meta {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.order-receipt-meta strong {
    color: var(--brand-navy);
    font-size: 1.05rem;
}

.order-receipt-meta span {
    font-size: 0.85rem;
    color: var(--color-muted);
    font-weight: 600;
}

.order-receipt-head .order-status-badge {
    margin-left: auto;
}

.order-receipt-payment {
    margin: 0.9rem 0 0;
    font-size: 0.9rem;
    color: var(--color-muted);
}

.order-receipt-payment strong {
    color: var(--brand-navy);
}

.order-receipt-note {
    margin: 0.6rem 0 0;
    font-size: 0.9rem;
    color: var(--color-muted);
    line-height: 1.6;
}

.order-receipt .order-lines {
    margin-top: 1rem;
}

.order-receipt-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin: 1rem 0 0;
    padding-top: 1rem;
    border-top: 1px dashed var(--color-border);
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--brand-navy);
}

.order-receipt-total strong {
    font-size: 1.3rem;
}

.order-receipt-vat {
    margin: 0.3rem 0 0;
    font-size: 0.82rem;
    color: var(--color-muted);
    text-align: right;
}

.order-result-reason {
    margin-top: 0.5rem;
    font-weight: 600;
}

.order-lines {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.order-lines li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.8rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--color-border);
}

.order-lines li:last-child {
    border-bottom: none;
}

.order-line-name {
    flex: 1 1 12rem;
    min-width: 0;
    font-weight: 600;
    color: var(--brand-navy);
}

.order-line-status {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-muted);
    white-space: nowrap;
}

.order-line-price {
    font-weight: 700;
    white-space: nowrap;
}

.order-line-code {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.35rem;
}

.order-line-code code {
    padding: 0.4rem 0.7rem;
    border-radius: var(--radius-small);
    border: 1px dashed var(--brand-sky);
    background: var(--brand-sky-soft);
    color: var(--brand-navy);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    word-break: break-all;
    user-select: all;
}

.order-line-code-note {
    font-size: 0.8rem;
    color: var(--color-muted);
}

.order-instant-badge-note {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0.9rem 0 0;
    font-size: 0.86rem;
    font-weight: 600;
    color: #8a6a10;
}

.trustpilot-section .trustpilot-widget,
.order-trustpilot .trustpilot-widget {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-card);
    padding: 1.1rem 1rem;
}

.order-trustpilot {
    margin-top: 1.6rem;
    max-width: 640px;
}

.trustpilot-widget-product {
    margin: 0 0 1.1rem;
}

.trustpilot-fallback {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--brand-navy);
    font-weight: 600;
    text-decoration: none;
}

.trustpilot-fallback:hover span:last-child,
.trustpilot-fallback:focus-visible span:last-child {
    text-decoration: underline;
}

.trustpilot-fallback-stars {
    display: inline-flex;
    gap: 0.15rem;
    color: #00b67a;
}

.trustpilot-fallback-card {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
    padding: 0.8rem 1rem;
    text-align: center;
}

.trustpilot-fallback-card strong {
    font-size: 1.02rem;
}

.trustpilot-fallback-card span:last-child {
    color: var(--color-muted);
    font-weight: 500;
    font-size: 0.88rem;
}

.trustpilot-fallback-inline {
    font-size: 0.86rem;
}

.social-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: 1.1rem;
}

.social-card {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1.15rem 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: 4px solid var(--brand-navy);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-card);
    text-decoration: none;
    color: var(--color-text);
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.social-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-pop);
}

.social-card-facebook {
    border-top-color: #1877f2;
}

.social-card-facebook .social-card-icon {
    color: #1877f2;
}

.social-card-instagram {
    border-top-color: #d6249f;
}

.social-card-instagram .social-card-icon {
    color: #d6249f;
}

.social-card-x {
    border-top-color: #171717;
}

.social-card-x .social-card-icon {
    color: #171717;
}

.social-card-tiktok {
    border-top-color: #3abcf0;
}

.social-card-tiktok .social-card-icon {
    color: #1e7fb0;
}

.social-card-youtube {
    border-top-color: #ff0000;
}

.social-card-youtube .social-card-icon {
    color: #d90000;
}

.social-card-linkedin {
    border-top-color: #0a66c2;
}

.social-card-linkedin .social-card-icon {
    color: #0a66c2;
}

.social-card-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.social-card-icon {
    display: inline-flex;
}

.social-card-platform {
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--brand-navy);
}

.social-card-date {
    margin-left: auto;
    font-size: 0.78rem;
    color: var(--color-muted);
    white-space: nowrap;
}

.social-card-title {
    font-size: 1rem;
    color: var(--brand-navy);
    line-height: 1.4;
}

.social-card-body {
    font-size: 0.9rem;
    color: var(--color-muted);
    line-height: 1.6;
}

.social-card-more {
    margin-top: auto;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--brand-blue);
}

.social-card-embed {
    cursor: default;
}

.social-card-embed:hover {
    transform: none;
    box-shadow: var(--shadow-card);
}

.social-embed-frame {
    position: relative;
    border-radius: var(--radius-small);
    overflow: hidden;
    background: var(--color-background);
    aspect-ratio: 4 / 5;
}

.social-card-youtube .social-embed-frame {
    aspect-ratio: 16 / 9;
}

.social-embed-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.social-card-embed .social-card-more {
    text-decoration: none;
}

.social-card-embed .social-card-more:hover {
    text-decoration: underline;
}

.video-facade-frame {
    position: absolute;
    inset: 0;
}

.video-facade-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-facade-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-facade-button {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    height: 100%;
    padding: 1rem;
    border: none;
    cursor: pointer;
    background:
        radial-gradient(340px 200px at 78% 18%, rgb(154 140 123 / 30%), transparent 65%),
        linear-gradient(150deg, rgb(29 27 26 / 82%), rgb(63 57 52 / 62%));
    color: var(--color-surface);
    font: inherit;
    transition: filter 150ms ease;
}

.video-facade-button:hover {
    filter: brightness(1.12);
}

.video-facade-button:focus-visible {
    outline: 3px solid var(--brand-sky);
    outline-offset: -3px;
}

.video-facade-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: var(--brand-orange);
    box-shadow: 0 10px 26px rgb(26 24 22 / 35%);
    transition: transform 160ms ease;
}

.video-facade-button:hover .video-facade-play {
    transform: scale(1.08);
}

.video-facade-label {
    font-weight: 800;
    font-size: 0.98rem;
    text-align: center;
    max-width: 30ch;
}

.video-facade-note {
    font-size: 0.78rem;
    font-weight: 600;
    color: rgb(255 255 255 / 65%);
}

.video-facade-play::after,
.social-video-play::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgb(255 255 255 / 45%);
    animation: video-play-pulse 2.2s ease-out infinite;
}

@keyframes video-play-pulse {
    0% {
        transform: scale(0.85);
        opacity: 0;
    }

    45% {
        opacity: 1;
    }

    100% {
        transform: scale(1.25);
        opacity: 0;
    }
}

.video-facade-play,
.social-video-play {
    position: relative;
}

@media (prefers-reduced-motion: reduce) {
    .video-facade-play::after,
    .social-video-play::after {
        animation: none;
        opacity: 0;
    }
}

.social-video-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    background: var(--brand-navy-deep);
}

.social-video-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.social-video-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 300ms ease;
}

.social-card-video:hover .social-video-thumb {
    transform: scale(1.04);
}

.social-video-button {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    height: 100%;
    padding: 0.9rem;
    border: none;
    cursor: pointer;
    background: linear-gradient(180deg, rgb(29 27 26 / 25%), rgb(29 27 26 / 70%));
    color: var(--color-surface);
    font: inherit;
}

.social-video-button:focus-visible {
    outline: 3px solid var(--brand-sky);
    outline-offset: -3px;
}

.social-video-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--brand-orange);
    box-shadow: 0 10px 24px rgb(26 24 22 / 40%);
    transition: transform 160ms ease;
}

.social-video-button:hover .social-video-play {
    transform: scale(1.1);
}

.social-video-title {
    font-weight: 700;
    font-size: 0.85rem;
    text-align: center;
    max-width: 32ch;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-shadow: 0 2px 8px rgb(29 27 26 / 60%);
}

.seo-sections,
.social-section,
.trustpilot-section,
.news-related {
    content-visibility: auto;
    contain-intrinsic-size: auto 480px;
}

.loyalty-how-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 0.8rem;
    margin-top: 0.6rem;
}

.loyalty-how-card {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    padding: 0.85rem 1rem;
    border: 1px solid rgb(63 57 52 / 12%);
    border-radius: var(--radius-small);
    background: rgb(154 140 123 / 6%);
}

.loyalty-how-card p {
    margin: 0;
    line-height: 1.5;
}

.loyalty-how-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 50%;
    background: var(--brand-navy);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 800;
}

.loyalty-history-table td:nth-child(3),
.loyalty-history-table td:nth-child(4) {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.loyalty-history-table td.is-positive {
    color: var(--color-success);
}

.loyalty-history-table td.is-negative {
    color: var(--color-danger);
}

.account-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.4rem 0 1.4rem;
}

.account-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid var(--color-border);
    color: var(--color-text);
    background: var(--color-surface);
}

.account-chip.chip-ok {
    background: #e8f6ec;
    border-color: #bfe5cb;
    color: #1d7a3d;
}

.account-chip.chip-warn {
    background: #fdf1e4;
    border-color: #f5d4ab;
    color: #ae5e04;
}

.account-chip.chip-neutral {
    background: var(--brand-sky-soft);
    border-color: #ebe7de;
    color: var(--brand-navy);
}

a.account-chip:hover,
a.account-chip:focus-visible {
    border-color: var(--brand-sky);
    outline: none;
}

.account-card {
    position: relative;
}

.account-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    margin-bottom: 0.6rem;
    border-radius: 12px;
    background: var(--brand-sky-soft);
    color: var(--brand-blue);
}

.account-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.6rem;
}

.account-section-head h2 {
    margin: 0;
}

.account-empty {
    margin-top: 1.6rem;
    padding: 1.6rem;
    text-align: center;
    background: var(--brand-sky-soft);
    border-radius: var(--radius);
}

.account-empty p {
    margin: 0 0 0.9rem;
    color: var(--color-muted);
    font-weight: 600;
}

@media (max-width: 860px) {
    .account-shell {
        grid-template-columns: 1fr;
    }

    .account-nav {
        position: static;
    }

    .account-nav-title {
        display: none;
    }

    .account-nav nav {
        display: flex;
        flex-direction: row;
        gap: 0.4rem;
        overflow-x: auto;
        padding-bottom: 0.4rem;
        -webkit-overflow-scrolling: touch;
    }

    .account-nav nav a {
        flex-shrink: 0;
        white-space: nowrap;
        padding: 0.5rem 0.9rem;
        border-radius: 999px;
        border: 1px solid var(--color-border);
        background: var(--color-surface);
    }

    .account-nav nav a.is-active {
        background: var(--brand-navy);
        color: var(--color-surface);
        border-color: var(--brand-navy);
    }
}

@media (max-width: 600px) {
    .header-inner .locale-selector {
        display: none;
    }

    .logo {
        flex: 1;
        min-width: 0;
    }

    .logo img {
        width: 100%;
        max-width: 210px;
        height: auto;
    }

    .header-actions {
        margin-left: 0;
    }
}

.mobile-drawer-locales {
    display: none;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.8rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--color-border);
}

@media (max-width: 600px) {
    .mobile-drawer-locales {
        display: flex;
    }
}

.mobile-drawer-locales-heading {
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted);
    padding: 0 0.15rem 0.25rem;
}

.mobile-drawer-locale {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--brand-navy);
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
}

.mobile-drawer-locale-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-drawer-locale-currency {
    color: var(--color-muted);
    font-size: 0.78rem;
    font-weight: 600;
}

.mobile-drawer-locale[aria-current='true'] .mobile-drawer-locale-currency {
    color: inherit;
}

.mobile-drawer-locale[aria-current='true'] {
    border-color: var(--brand-blue);
    color: var(--brand-blue);
    background: var(--brand-sky-soft);
}

@media (max-width: 1320px) {
    .nav-service {
        display: none;
    }
}

.instant-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.instant-chip.is-dimmed {
    opacity: 0.45;
}

.instant-chip-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--brand-sky-soft);
    color: var(--brand-blue);
    font-size: 0.7rem;
    font-weight: 800;
}

.instant-chip.is-active .instant-chip-count {
    background: rgb(255 255 255 / 22%);
    color: inherit;
}

.instant-item-name mark {
    background: none;
    color: var(--brand-blue);
    font-weight: 800;
}

.instant-empty {
    display: grid;
    gap: 0.25rem;
    padding: 1.1rem 1.2rem;
    text-align: center;
}

.instant-empty strong {
    color: var(--brand-navy);
}

.instant-empty span {
    color: var(--color-muted);
    font-size: 0.88rem;
}

.cart-page h1 {
    color: var(--brand-navy);
    margin: 0 0 1.2rem;
}

.cart-empty {
    display: grid;
    justify-items: center;
    gap: 0.9rem;
    padding: clamp(2rem, 6vw, 3.5rem);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-card);
    text-align: center;
}

.cart-empty p {
    margin: 0;
    color: var(--color-muted);
    font-weight: 600;
}

.cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: clamp(1.2rem, 3vw, 2rem);
    align-items: start;
}

.cart-lines {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.8rem;
}

.cart-line {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.2rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}

.cart-line.has-region-warning {
    border-color: #f5d4ab;
}

.cart-line-art {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 12px;
    background: linear-gradient(140deg, var(--brand-navy-deep), var(--brand-blue));
    color: var(--color-surface);
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: 0.03em;
}

.cart-line-info {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.cart-line-brand {
    color: var(--brand-sky);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.cart-line-name {
    color: var(--brand-navy);
    font-weight: 800;
    text-decoration: none;
}

a.cart-line-name:hover {
    color: var(--brand-blue);
}

.cart-line-variant {
    color: var(--color-muted);
    font-size: 0.88rem;
}

.cart-line-price-change,
.cart-line-region {
    font-size: 0.82rem;
    color: #ae5e04;
    font-weight: 600;
}

.cart-line-quantity {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.cart-line-quantity input[type='number'] {
    width: 4.2rem;
    padding: 0.5rem 0.4rem 0.5rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--brand-navy);
}

.cart-line-quantity .button-secondary {
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--brand-navy);
    cursor: pointer;
}

.cart-line-quantity .button-secondary:hover {
    border-color: var(--brand-sky);
    color: var(--brand-blue);
}

.cart-line-total {
    font-weight: 800;
    color: var(--brand-navy);
    white-space: nowrap;
}

.cart-line-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--color-muted);
    font-size: 1.3rem;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}

.cart-line-remove:hover {
    background: #fdecec;
    color: #e5484d;
}

.cart-summary {
    position: sticky;
    top: 100px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-card);
    padding: 1.4rem;
}

.cart-summary h2 {
    margin: 0 0 0.9rem;
    color: var(--brand-navy);
    font-size: 1.2rem;
}

.cart-summary dl {
    margin: 0;
}

.cart-summary-row {
    display: flex;
    justify-content: space-between;
    font-weight: 800;
    color: var(--brand-navy);
    font-size: 1.1rem;
}

.cart-summary-row dd {
    margin: 0;
}

.cart-summary-note {
    color: var(--color-muted);
    font-size: 0.82rem;
    margin: 0.4rem 0 1rem;
}

.cart-checkout-button {
    width: 100%;
    justify-content: center;
    font-size: 1rem;
}

.cart-usps {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
}

.cart-usps li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text);
    font-size: 0.88rem;
    font-weight: 600;
}

.cart-usps li::before {
    content: '';
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%234caf50'/%3E%3Cpath d='M6.6 12.6l3.4 3.4 7.4-8' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: cover;
}

.cart-payment-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

.cart-payment-strip img {
    height: 22px;
    width: auto;
}

.cart-price-alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.cart-price-alert p {
    margin: 0;
}

@media (max-width: 900px) {
    .cart-layout {
        grid-template-columns: 1fr;
    }

    .cart-summary {
        position: static;
    }

    .cart-line {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            'art info remove'
            'art qty total';
        row-gap: 0.6rem;
    }

    .cart-line-art { grid-area: art; }
    .cart-line-info { grid-area: info; }
    .cart-line-quantity { grid-area: qty; }
    .cart-line-total { grid-area: total; justify-self: end; }
    .cart-line > form:last-child { grid-area: remove; justify-self: end; }
}

.checkout-coupon {
    margin-bottom: 1rem;
    padding: 0.9rem 1rem;
    background: var(--brand-sky-soft);
    border: 1px dashed var(--brand-sky);
    border-radius: var(--radius);
}

.checkout-coupon-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 800;
    color: var(--brand-navy);
    font-size: 0.92rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
}

.checkout-coupon-label svg {
    color: var(--brand-blue);
}

.checkout-coupon-field input {
    width: 100%;
    padding: 0.65rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.checkout-coupon-field input:focus {
    outline: none;
    border-color: var(--brand-sky);
    box-shadow: 0 0 0 3px rgb(154 140 123 / 15%);
}

.checkout-account {
    display: grid;
    gap: 0.5rem;
}

.checkout-account-password {
    padding: 0.8rem 0.9rem;
    background: var(--brand-sky-soft);
    border-radius: var(--radius);
    display: grid;
    gap: 0.35rem;
}

.checkout-account-password label {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--brand-navy);
}

.checkout-account-hint {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.82rem;
}

.faq-list {
    display: grid;
    gap: 0.7rem;
    margin-top: 1.2rem;
}

.faq-item {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: border-color 140ms ease;
}

.faq-item[open] {
    border-color: var(--brand-sky);
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.2rem;
    cursor: pointer;
    font-weight: 800;
    color: var(--brand-navy);
    list-style: none;
    user-select: none;
}

.faq-question::-webkit-details-marker {
    display: none;
}

.faq-question:hover {
    color: var(--brand-blue);
}

.faq-chevron {
    flex-shrink: 0;
    color: var(--color-muted);
    transition: transform 160ms ease;
}

.faq-item[open] .faq-chevron {
    transform: rotate(180deg);
    color: var(--brand-blue);
}

.faq-answer {
    padding: 0 1.2rem 1.1rem;
    color: var(--color-text);
}

.faq-answer p:first-child {
    margin-top: 0;
}

.faq-answer p:last-child {
    margin-bottom: 0;
}

.locale-menu {
    padding: 0.5rem;
    min-width: 18.5rem;
}

.locale-menu a {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
}

.locale-option-currency {
    min-width: 2.6rem;
    text-align: right;
}

.subscription-list {
    display: grid;
    gap: 1rem;
}

.subscription-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: 1.2rem 1.4rem;
}

.subscription-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.subscription-card-head h2 {
    margin: 0;
    font-size: 1.15rem;
    color: var(--brand-navy);
}

.subscription-status {
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--brand-sky-soft);
    color: var(--brand-navy);
}

.subscription-status-active { background: #e8f6ec; color: #1d7a3d; }
.subscription-status-past_due, .subscription-status-pending_renewal { background: #fdf1e4; color: #ae5e04; }
.subscription-status-cancelled, .subscription-status-expired { background: #f5f5f4; color: var(--color-muted); }

.subscription-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
    gap: 0.8rem;
    margin: 0.9rem 0;
}

.subscription-meta dt {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted);
}

.subscription-meta dd {
    margin: 0.15rem 0 0;
    font-weight: 800;
    color: var(--brand-navy);
}

.subscription-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

.subscription-cancel {
    color: #e5484d;
}

.checkout-checkbox-highlight {
    padding: 0.6rem 0.8rem;
    background: var(--brand-sky-soft);
    border-radius: var(--radius);
    font-weight: 700;
}

.checkout-auto-renew-note {
    margin: 0;
    padding: 0.6rem 0.8rem;
    background: var(--brand-sky-soft);
    border-radius: var(--radius);
    color: var(--color-muted);
    font-size: 0.88rem;
}

.product-redeem-info {
    margin: 1rem 0;
    padding: 1rem 1.2rem;
    background: var(--brand-sky-soft);
    border-radius: var(--radius);
}

.product-redeem-info h2 {
    margin: 0 0 0.4rem;
    font-size: 1rem;
    color: var(--brand-navy);
}

.product-redeem-info p {
    margin: 0;
    color: var(--color-text);
    font-size: 0.92rem;
}

.product-redeem-note {
    margin-top: 0.4rem;
    font-weight: 700;
}

.checkout-customer-inputs {
    display: grid;
    gap: 0.3rem;
    margin: 0.8rem 0;
    padding: 0.9rem 1rem;
    background: var(--brand-sky-soft);
    border-radius: var(--radius);
}

.checkout-customer-inputs label {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--brand-navy);
}

.checkout-input-hint {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.8rem;
}

.breadcrumbs {
    margin: 1rem 0 1.25rem;
    font-size: 0.86rem;
}

.breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.breadcrumb-list li {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--color-muted);
}

.breadcrumb-list a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--color-muted);
    text-decoration: none;
    transition: color 130ms ease;
}

.breadcrumb-list a:hover {
    color: var(--brand-orange);
}

.breadcrumb-list span[aria-current="page"] {
    color: var(--brand-navy);
    font-weight: 700;
}

.breadcrumb-chevron {
    opacity: 0.5;
}

.card-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 140px;
    padding: 1.1rem;
    background: #fbfaf8;
    border-radius: var(--radius) var(--radius) 0 0;
}

.card-visual img {
    max-width: 70%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 220ms ease;
}

.product-card:hover .card-visual img {
    transform: scale(1.06);
}

.card-sale-badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 2;
    background: var(--brand-orange);
    color: var(--on-orange);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
}

.card-pick-badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 2;
    background: var(--brand-sky-soft);
    color: var(--brand-navy);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgb(44 41 39 / 18%);
}

.card-summary {
    display: block;
    color: var(--color-muted);
    font-size: 0.82rem;
    line-height: 1.45;
    margin-top: 0.2rem;
}

.card-price-old {
    color: var(--color-muted);
    font-weight: 600;
    margin-right: 0.4rem;
    font-size: 0.85em;
}

.card-price-sale {
    color: var(--brand-orange);
    font-weight: 800;
}

.card-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    margin-top: 0.75rem;
    width: 100%;
    pointer-events: none;
}

.product-card {
    position: relative;
}

.product-card:hover .card-cta {
    background: var(--brand-orange-dark);
}

.cta-cart-icon {
    flex-shrink: 0;
    transition: transform 160ms ease;
}

.product-card:hover .card-cta .cta-cart-icon,
.button:hover .cta-cart-icon {
    transform: translateX(2px) scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
    .product-card,
    .cta-cart-icon {
        transition: none;
    }

    .product-card:hover {
        transform: none;
    }
}

.results-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    margin-bottom: 1.1rem;
}

.sort-form {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-left: auto;
}

.sort-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--brand-navy);
}

.sort-form select {
    min-width: 12rem;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    font: inherit;
    color: var(--brand-navy);
}

.filter-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--brand-sky-soft);
    color: var(--brand-navy);
    border: 1px solid rgb(154 140 123 / 35%);
    border-radius: 999px;
    padding: 0.32rem 0.8rem;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 130ms ease, border-color 130ms ease;
}

.filter-chip:hover {
    background: #fdeeee;
    border-color: #e8b4b4;
    color: #b03030;
}

.filter-chip-remove {
    font-size: 1rem;
    line-height: 1;
}

.filter-chips-clear {
    font-size: 0.82rem;
    color: var(--brand-orange);
    font-weight: 700;
    text-decoration: none;
}

.sale-hero {
    position: relative;
    border-radius: var(--radius-large);
    margin: 1.25rem 0 0.5rem;
    overflow: hidden;
    min-height: clamp(220px, 32vw, 420px);
    display: flex;
    align-items: center;
    box-shadow: var(--shadow-card);
}

.sale-hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 72% center;
}

.sale-hero-panel {
    position: relative;
    z-index: 1;
    max-width: min(430px, 60%);
    margin: clamp(1.25rem, 3.5vw, 2.6rem);
    background: rgb(40 38 37 / 86%);
    border-radius: var(--radius);
    padding: clamp(1.15rem, 2.8vw, 1.9rem);
    color: var(--color-surface);
    backdrop-filter: blur(2px);
}

.sale-hero-panel h1 {
    color: var(--color-surface);
    font-size: clamp(1.3rem, 2.6vw, 1.9rem);
    line-height: 1.25;
    margin: 0 0 0.7rem;
}

.sale-hero-panel p {
    margin: 0;
    line-height: 1.65;
    font-size: clamp(0.88rem, 1.4vw, 1rem);
    color: rgb(255 255 255 / 92%);
}

@media (max-width: 720px) {
    .sale-hero {
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
    }

    .sale-hero-image {
        position: static;
        aspect-ratio: 1280 / 450;
        height: auto;
    }

    .sale-hero-panel {
        max-width: none;
        margin: 0;
        border-radius: 0;
    }
}

.sale-title .results-meta {
    font-weight: 400;
    font-size: 1.1rem;
    color: var(--color-muted);
    margin-left: 0.6rem;
}

.cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.6rem;
    padding: clamp(2rem, 6vw, 3.5rem) 1rem;
    background: var(--color-surface);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-large);
}

.cart-empty h2 {
    margin: 0.4rem 0 0;
}

.cart-empty p {
    max-width: 34rem;
    color: var(--color-muted);
    margin: 0;
}

.cart-empty-spot {
    position: relative;
    width: 130px;
    height: 110px;
}

.cart-empty-face {
    width: calc(96px * var(--spot-face-scale, 1));
    position: absolute;
    left: 50%;
    top: calc(-96px * var(--spot-face-head-top, 0));
    transform: translateX(-50%);
    animation: cart-spot-peek 3.5s ease-in-out infinite;
}

.cart-empty-hand {
    width: 40px;
    position: absolute;
    bottom: 0;
    animation: spot-hand-bob 6s ease-in-out infinite;
}

.cart-empty-hand-left { left: 4px; transform: rotate(-12deg); }
.cart-empty-hand-right { right: 4px; transform: rotate(12deg) scaleX(-1); }

@keyframes cart-spot-peek {
    0%, 100% { transform: translateX(-50%) rotate(-2deg); }
    50% { transform: translateX(-50%) rotate(2deg); }
}

.cart-empty-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 0.9rem;
    justify-content: center;
}

.cart-summary-total dt,
.cart-summary-total dd {
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--brand-navy);
}

.checkout-totals {
    margin: 0.9rem 0 0.4rem;
    border-top: 1px solid var(--color-border);
    padding-top: 0.7rem;
}

.checkout-totals-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin: 0.3rem 0;
    font-size: 0.92rem;
}

.checkout-totals-row dt {
    color: var(--color-muted);
}

.checkout-totals-discount dd {
    color: #1d8348;
    font-weight: 700;
}

.checkout-redeem-panel {
    margin: -0.4rem 0 1.1rem;
    border: none;
    background: transparent;
}

.checkout-redeem-panel .accordion-trigger {
    display: inline-flex;
    width: auto;
    padding: 0.25rem 0;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--brand-blue);
    background: none;
    border: none;
}

.checkout-redeem-panel .accordion-trigger:hover {
    color: var(--brand-orange);
}

.checkout-redeem-panel .accordion-body {
    margin-top: 0.6rem;
    padding: 1.1rem;
    background: linear-gradient(180deg, #fdfdfc, #faf9f7);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 2px rgba(44, 41, 39, 0.04);
}

.checkout-redeem-heading {
    margin: 0;
    font-size: inherit;
}

.checkout-redeem-block + .checkout-redeem-block {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--color-border);
}

.checkout-redeem-label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 700;
    color: var(--brand-navy);
    font-size: 0.92rem;
    margin-bottom: 0.45rem;
}

.checkout-redeem-row {
    display: flex;
    gap: 0;
    align-items: stretch;
}

.checkout-redeem-row input {
    flex: 1;
    min-width: 0;
    height: 2.75rem;
    padding: 0 0.85rem;
    margin: 0;
    font-size: 0.92rem;
    background: var(--color-surface);
    border: 1px solid #dedbd5;
    border-right: none;
    border-radius: 8px 0 0 8px;
    transition: border-color var(--transition-fast, 0.15s ease), box-shadow var(--transition-fast, 0.15s ease);
}

.checkout-redeem-row input::placeholder {
    color: #aca9a4;
    letter-spacing: 0.02em;
}

.checkout-redeem-row input:focus {
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(144, 131, 116, 0.18);
    position: relative;
    z-index: 1;
}

.checkout-redeem-apply {
    flex-shrink: 0;
    white-space: nowrap;
    height: 2.75rem;
    padding: 0 1.15rem;
    margin: 0;
    display: inline-flex;
    align-items: center;
    background: var(--brand-blue);
    border: 1px solid var(--brand-blue);
    color: var(--color-surface);
    font-weight: 700;
    font-size: 0.9rem;
    border-radius: 8px;
    transition: background var(--transition-fast, 0.15s ease), border-color var(--transition-fast, 0.15s ease);
}

.checkout-redeem-row input + .checkout-redeem-apply {
    border-radius: 0 8px 8px 0;
}

.checkout-redeem-row .checkout-redeem-value {
    flex: 1;
    align-self: center;
    padding-right: 0.8rem;
}

.checkout-redeem-apply:hover,
.checkout-redeem-apply:focus-visible {
    background: var(--brand-navy);
    border-color: var(--brand-navy);
    color: var(--color-surface);
}

.checkout-redeem-applied {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

.checkout-redeem-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #e7f6ec;
    border: 1px solid #b7e0c4;
    color: #1d8348;
    font-weight: 800;
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    font-size: 0.86rem;
}

.checkout-redeem-value {
    font-weight: 700;
    color: var(--brand-navy);
    font-size: 0.9rem;
}

.checkout-redeem-remove {
    background: none;
    border: none;
    color: var(--brand-orange);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    font: inherit;
    font-size: 0.84rem;
    padding: 0.2rem;
}

.checkout-redeem-remove:hover {
    color: #b03030;
}

.checkout-redeem-invalid {
    color: #b03030;
    font-size: 0.88rem;
    margin: 0.2rem 0;
}

.payment-method-fee {
    margin-left: auto;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-muted);
    background: #f6f5f3;
    border-radius: 999px;
    padding: 0.22rem 0.6rem;
    white-space: nowrap;
}

.payment-methods-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.65rem;
    background: none;
    border: none;
    color: var(--brand-blue);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0.35rem 0.2rem;
}

.payment-methods-toggle:hover {
    color: var(--brand-orange);
}

.payment-methods-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.payment-methods-toggle svg {
    transition: transform 150ms ease;
}

.checkout-captcha {
    margin: 1rem 0 0.4rem;
}

.product-gallery {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    padding: 1.1rem;
}

.product-gallery-main {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    background: #fbfaf8;
    border-radius: var(--radius);
    overflow: hidden;
}

.product-gallery-main img {
    max-width: 72%;
    max-height: 82%;
    object-fit: contain;
    filter: drop-shadow(0 14px 28px rgb(40 38 37 / 18%));
    transition: transform 240ms ease;
}

.product-gallery-main:hover img {
    transform: scale(1.05);
}

.product-gallery-thumbs {
    display: flex;
    gap: 0.6rem;
    margin-top: 0.8rem;
}

.product-gallery-thumb {
    width: 64px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fbfaf8;
    border: 2px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    padding: 6px;
    transition: border-color 140ms ease;
}

.product-gallery-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.product-gallery-thumb.is-active,
.product-gallery-thumb:hover {
    border-color: var(--brand-blue);
}

.product-rating {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none;
    margin: 0.1rem 0 0.4rem;
}

.rating-word {
    font-weight: 800;
    color: var(--brand-navy);
}

.rating-stars {
    position: relative;
    display: inline-block;
    font-size: 1.05rem;
    line-height: 1;
    letter-spacing: 2px;
}

.rating-stars-large {
    font-size: 1.5rem;
}

.rating-stars-base {
    color: #e3e1dd;
}

.rating-stars-fill {
    position: absolute;
    inset: 0;
    overflow: hidden;
    white-space: nowrap;
    color: #00a664;
}

.rating-count {
    color: var(--color-muted);
    font-size: 0.88rem;
}

.product-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin: 0.35rem 0 0.75rem;
}

.product-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: #17703d;
    font-weight: 700;
    font-size: 0.95rem;
}

.product-warning {
    background: #fdf8e2;
    border: 1px solid #efe4b0;
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    margin: 0.6rem 0;
    font-size: 0.9rem;
}

.product-warning p {
    margin: 0.15rem 0;
}

.product-more-info {
    display: inline-block;
    font-weight: 800;
    color: var(--brand-navy);
    margin: 0.3rem 0 0.8rem;
}

.product-price-display {
    margin: 1.1rem 0 0.2rem;
    text-align: right;
    font-size: 2.1rem;
    font-weight: 800;
    color: var(--brand-blue);
    line-height: 1.1;
}

.product-earn-note {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    margin: 0.35rem 0 0;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--brand-orange);
}

.product-earn-note svg {
    flex: 0 0 auto;
}

.product-quantity-row {
    display: flex;
    gap: 0.7rem;
    align-items: stretch;
    margin-top: 1rem;
}

.product-quantity-row input {
    width: 5rem;
    text-align: center;
}

.product-buy-button {
    flex: 1;
}

.service-fee-note {
    font-size: 0.86rem;
    color: var(--color-muted);
    margin: 0.35rem 0;
}

.variant-price-old {
    display: block;
    color: var(--color-muted);
    font-size: 0.82em;
    font-weight: 600;
}

.product-tabs {
    margin: clamp(1.75rem, 4vw, 2.75rem) 0;
}

.product-tabs-bar {
    display: flex;
    flex-wrap: nowrap;
    background: #f6f5f3;
    border-radius: var(--radius) var(--radius) 0 0;
    border: 1px solid var(--color-border);
    border-bottom: none;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.product-tabs-bar::-webkit-scrollbar {
    display: none;
}

.product-tab {
    background: none;
    border: none;
    font: inherit;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--brand-navy);
    padding: 0.95rem 1.4rem;
    cursor: pointer;
    flex: 0 0 auto;
    white-space: nowrap;
    transition: background 140ms ease, color 140ms ease;
}

.product-tab:hover {
    background: rgb(154 140 123 / 12%);
}

.product-tab.is-active {
    background: var(--brand-blue);
    color: var(--color-surface);
}

.product-tab-panel {
    border: 1px solid var(--color-border);
    border-radius: 0 0 var(--radius) var(--radius);
    background: var(--color-surface);
    padding: clamp(1.2rem, 3vw, 1.9rem);
}

.product-tab-panel h2 {
    color: var(--brand-blue);
    font-size: 1.15rem;
    margin-top: 0;
}

.product-longtext.is-collapsed {
    max-height: 16rem;
    overflow: hidden;
    position: relative;
}

.product-longtext.is-collapsed::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4.5rem;
    background: linear-gradient(rgb(255 255 255 / 0%), var(--color-surface));
}

.read-more-toggle {
    display: inline-block;
    margin-top: 0.6rem;
    background: none;
    border: none;
    color: var(--brand-orange);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    text-decoration: none;
    padding: 0.2rem 0;
}

.read-more-toggle:hover {
    color: var(--brand-orange-dark);
}

.reviews-aggregate {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1rem;
}

.reviews-aggregate-meta {
    color: var(--color-muted);
    font-size: 0.9rem;
}

.reviews-latest-heading {
    color: var(--brand-sky);
    font-size: 1.05rem;
    margin: 1.4rem 0 0.6rem;
}

.reviews-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.review-entry {
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--color-border);
}

.review-entry-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.7rem;
}

.review-entry-date {
    color: var(--color-muted);
    font-size: 0.84rem;
}

.review-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.14rem 0.6rem;
    border-radius: 999px;
    background: var(--color-success-bg);
    color: var(--color-success-text);
    font-size: 0.76rem;
    font-weight: 700;
}

.review-verified-badge svg {
    flex-shrink: 0;
}

.review-invite-page {
    display: flex;
    flex-direction: column;
}

.review-invite-card {
    max-width: 640px;
    margin: 0 auto;
    width: 100%;
}

.review-invite-card h1 {
    color: var(--brand-navy);
    font-size: 1.45rem;
    margin: 0 0 0.5rem;
}

.review-invite-intro {
    color: var(--color-muted);
    margin: 0 0 1.4rem;
}

.review-invite-product {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1rem 1.1rem 1.1rem;
    margin: 0 0 1.2rem;
}

.review-invite-product legend {
    font-weight: 800;
    color: var(--brand-navy);
    padding: 0 0.4rem;
}

.review-invite-rating-label {
    display: block;
    font-weight: 700;
    color: var(--brand-navy);
    margin-bottom: 0.3rem;
}

.review-entry-title {
    font-weight: 700;
    margin: 0.35rem 0 0.1rem;
}

.review-entry-body {
    margin: 0.25rem 0 0;
    color: var(--color-text);
}

.reviews-external {
    margin-top: 1rem;
}

.review-form-wrap {
    margin-top: 1.6rem;
    border-top: 2px solid var(--color-border);
    padding-top: 1.2rem;
}

.review-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1rem;
}

.review-form-hint {
    font-size: 0.84rem;
    color: var(--color-muted);
}

.review-rating-picker {
    border: none;
    margin: 0 0 0.6rem;
    padding: 0;
}

.review-rating-picker legend {
    font-weight: 700;
    font-size: 0.92rem;
    margin-bottom: 0.3rem;
}

.review-rating-stars {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 0.15rem;
}

.review-rating-stars input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.review-rating-stars label {
    font-size: 1.7rem;
    color: #e3e1dd;
    cursor: pointer;
    transition: color 120ms ease, transform 120ms ease;
}

.review-rating-stars input:checked ~ label,
.review-rating-stars label:hover,
.review-rating-stars label:hover ~ label {
    color: #f5b301;
}

.review-rating-stars label:hover {
    transform: scale(1.15);
}

.sticky-buy-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 130;
    background: rgb(255 255 255 / 92%);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -6px 20px rgb(40 38 37 / 8%);
    padding: 0.45rem 0;
    transform: translateY(105%);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--transition-smooth), opacity var(--transition-smooth), visibility var(--transition-smooth);
}

.sticky-buy-bar.is-visible {
    transform: none;
    opacity: 1;
    visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
    .sticky-buy-bar {
        transition: none;
    }
}

.sticky-buy-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.sticky-buy-product {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex: 1 1 auto;
    min-width: 0;
}

.sticky-buy-product > div {
    flex: 1 1 auto;
    min-width: 0;
}

.sticky-buy-inner > .button {
    flex-shrink: 0;
}

.sticky-buy-product img {
    flex-shrink: 0;
}

.sticky-buy-product strong {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sticky-buy-price {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--brand-blue);
    font-weight: 800;
}

.auth-split {
    display: grid;
    grid-template-columns: minmax(235px, 315px) minmax(320px, 460px);
    gap: clamp(1.25rem, 3vw, 2rem);
    justify-content: center;
    align-items: start;
    margin-top: 1rem;
}

.auth-benefits {
    background:
        radial-gradient(420px 260px at 100% 0%, rgb(255 255 255 / 14%), transparent 60%),
        linear-gradient(150deg, var(--brand-navy-deep), var(--brand-navy));
    color: var(--color-surface);
    border-radius: var(--radius-large);
    padding: clamp(1.5rem, 3vw, 2.1rem);
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.auth-benefits h2 {
    color: var(--color-surface);
    font-size: 1.25rem;
    margin: 0;
}

.auth-split-single {
    grid-template-columns: minmax(320px, 460px);
}

.spot-card {
    --spot-face-w: clamp(92px, 9vw, 118px);
    position: relative;
    margin-top: calc(var(--spot-face-w) * 0.38);
    padding: clamp(1.8rem, 3vw, 2.2rem) clamp(1.15rem, 2.2vw, 1.5rem) clamp(1.1rem, 2vw, 1.4rem);
    gap: 0.75rem;
    box-shadow: var(--shadow-card);
}

.spot-card h2 {
    font-size: 1.12rem;
}

.spot-card .auth-benefits-list {
    gap: 0.6rem;
    font-size: 0.92rem;
}

.spot-card-face {
    position: absolute;
    width: calc(var(--spot-face-w) * var(--spot-face-scale, 1));
    left: 62%;
    top: calc(var(--spot-face-w) * -0.34 - var(--spot-face-w) * var(--spot-face-head-top, 0));
    transform: translateX(-50%);
    pointer-events: none;
    filter: drop-shadow(0 6px 14px rgb(46 43 41 / 22%));
    animation: spot-card-peek 6s ease-in-out infinite;
}

.spot-card-hand {
    position: absolute;
    pointer-events: none;
    filter: drop-shadow(0 3px 6px rgb(46 43 41 / 25%));
    animation: spot-hand-bob 6s ease-in-out infinite;
}

.spot-card-hand-top {
    width: clamp(30px, 3.4vw, 40px);
    top: -10px;
    left: 13%;
}

.spot-card-hand-side {
    width: clamp(15px, 1.7vw, 19px);
    top: 2.3rem;
    right: -7px;
}

@keyframes spot-card-peek {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(-4px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .spot-card-face {
        animation: none;
    }
}

.auth-benefits-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.auth-benefits-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    line-height: 1.5;
    color: rgb(255 255 255 / 92%);
}

.auth-benefits-list svg {
    flex-shrink: 0;
    margin-top: 0.2rem;
    color: #63d68f;
}

.auth-intro {
    color: var(--color-muted);
    margin-top: -0.4rem;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 1.2rem 0 0.9rem;
    color: var(--color-muted);
    font-size: 0.84rem;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

.auth-alt-action {
    width: 100%;
    text-align: center;
}

.account-profile {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.4rem 0.5rem 1rem;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 0.8rem;
}

.account-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.9rem;
    height: 2.9rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(150deg, var(--brand-sky), var(--brand-blue));
    color: var(--on-orange);
    font-weight: 800;
    letter-spacing: 0.03em;
}

.account-profile-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.account-profile-meta strong {
    color: var(--brand-navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-profile-meta span {
    color: var(--color-muted);
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-nav nav a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
    gap: 1.2rem;
}

.news-card {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    overflow: hidden;
    text-decoration: none;
    color: var(--color-text);
    box-shadow: var(--shadow-card);
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.news-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-pop);
}

.news-card-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    background: linear-gradient(140deg, #f6f5f1, #eeebe5);
}

.news-card-visual img {
    max-height: 70%;
    max-width: 55%;
    object-fit: contain;
}

.news-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1rem 1.1rem 1.15rem;
}

.news-card-meta {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.78rem;
    color: var(--color-muted);
}

.news-card-category {
    background: var(--brand-sky-soft);
    color: var(--brand-blue);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
    font-size: 0.72rem;
}

.news-card-title {
    font-weight: 800;
    color: var(--brand-navy);
    font-size: 1.02rem;
    line-height: 1.4;
}

.news-card-excerpt {
    color: var(--color-muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

.news-card-more {
    margin-top: 0.35rem;
    font-weight: 800;
    color: var(--brand-orange);
    font-size: 0.88rem;
}

.news-article {
    max-width: 780px;
    margin: 0 auto;
}

.news-article-header h1 {
    margin: 0.5rem 0;
}

.news-article-excerpt {
    color: var(--color-muted);
    font-size: 1.05rem;
    line-height: 1.6;
}

.news-article-visual {
    display: flex;
    justify-content: center;
    background: linear-gradient(140deg, #f6f5f1, #eeebe5);
    border-radius: var(--radius-large);
    padding: 2rem;
    margin: 1.2rem 0;
}

.news-article-visual img {
    max-width: 100%;
    max-height: 220px;
    object-fit: contain;
}

.news-article-body {
    line-height: 1.75;
}

.news-related h2 {
    margin-bottom: 1rem;
}

.contact-layout {
    display: grid;
    grid-template-columns: minmax(260px, 340px) 1fr;
    gap: clamp(1.25rem, 3vw, 2rem);
    align-items: start;
    margin-top: 1rem;
}

.contact-channels {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-channel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    padding: 1.2rem 1.3rem;
    box-shadow: var(--shadow-card);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.contact-channel:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-pop);
}

.contact-channel h2 {
    font-size: 1.02rem;
    margin: 0.5rem 0 0.25rem;
}

.contact-channel p {
    color: var(--color-muted);
    font-size: 0.88rem;
    margin: 0 0 0.4rem;
}

.contact-channel a {
    font-weight: 800;
    color: var(--brand-orange);
}

.contact-channel a:hover {
    color: var(--brand-orange-dark);
}

.contact-channel-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 12px;
    background: var(--brand-sky-soft);
    color: var(--brand-blue);
}

.contact-form-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    padding: clamp(1.3rem, 3vw, 1.9rem);
    box-shadow: var(--shadow-card);
}

.contact-form-card h2 {
    margin-top: 0;
}

.contact-form-hint {
    color: var(--color-muted);
    font-size: 0.9rem;
}

.contact-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1rem;
}

.contact-service-pages {
    margin-top: clamp(1.6rem, 4vw, 2.6rem);
}

.contact-service-pages h2 {
    color: var(--brand-navy);
    font-size: 1.25rem;
    margin: 0 0 0.9rem;
}

.contact-service-pages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: 1rem;
}

.contact-service-page {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    text-decoration: none;
    color: var(--color-text);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.contact-service-page:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-pop);
}

.contact-service-page-title {
    font-weight: 800;
    color: var(--brand-navy);
    font-size: 1.02rem;
}

.contact-service-page-text {
    color: var(--color-muted);
    font-size: 0.88rem;
}

.contact-service-page-more {
    margin-top: auto;
    color: var(--brand-blue);
    font-weight: 700;
    font-size: 0.88rem;
}

.promo-tile-kiyoh {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    text-align: center;
    padding-bottom: 1.2rem;
}

.kiyoh-widget-heading {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 0.02em;
    color: var(--color-surface);
}

.kiyoh-widget-heading svg {
    color: var(--kiyoh-gold);
    filter: drop-shadow(0 1px 4px rgb(0 0 0 / 25%));
}

.kiyoh-widget-frame {
    border: 0;
    max-width: 100%;
    border-radius: var(--radius);
    background: rgb(255 255 255 / 8%);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 14%);
}

.kiyoh-facade {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.85rem 0.95rem;
    border-radius: var(--radius);
    background: rgb(255 255 255 / 8%);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 14%);
    max-width: 360px;
}

.kiyoh-facade-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border: 1.5px solid rgb(255 255 255 / 65%);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font-weight: 700;
    font-size: 0.88rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.kiyoh-facade-button:hover {
    background: rgb(255 255 255 / 14%);
}

.kiyoh-facade-button:focus-visible {
    outline: 2.5px solid #f28306;
    outline-offset: 2px;
}

.kiyoh-facade-hint {
    font-size: 0.74rem;
    line-height: 1.45;
    opacity: 0.82;
}

[data-controller="reveal"] > * {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 420ms ease var(--reveal-delay, 0ms), transform 420ms ease var(--reveal-delay, 0ms);
}

[data-controller="reveal"] > .is-revealed {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    [data-controller="reveal"] > * {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .sale-spot,
    .cart-empty-face {
        animation: none;
    }
}

.hero-slide .hero-banner-bg {
    animation: hero-kenburns 14s ease-in-out infinite alternate;
}

@keyframes hero-kenburns {
    from { transform: scale(1); }
    to { transform: scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-slide .hero-banner-bg {
        animation: none;
    }
}

@media (max-width: 900px) {
    .auth-split {
        grid-template-columns: 1fr;
    }

    .auth-benefits {
        order: 2;
    }

    .spot-card {
        --spot-face-w: 92px;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }

    .news-layout {
        grid-template-columns: 1fr;
    }

    .contact-layout {
        grid-template-columns: 1fr;
    }

    .sale-hero {
        grid-template-columns: 1fr;
    }

    .sale-hero-art {
        min-height: 150px;
    }

    .review-form-grid,
    .contact-form-grid {
        grid-template-columns: 1fr;
    }

    .sticky-buy-bar {
        padding: 0.65rem 0 calc(0.65rem + env(safe-area-inset-bottom, 0px));
    }

    .sticky-buy-inner {
        gap: 0.75rem;
    }

    .sticky-buy-product img,
    .sticky-buy-product .rating-stars {
        display: none;
    }

    .sticky-buy-product strong {
        display: block;
        max-width: 100%;
        font-size: 0.92rem;
    }

    .sticky-buy-price {
        font-size: 1rem;
    }

    .sticky-buy-bar .button {
        white-space: nowrap;
        padding: 0.7rem 1.05rem;
        font-size: 0.95rem;
    }
}

.admin-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.admin-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: 0.75rem 1.5rem;
}

.admin-topbar-title {
    font-weight: 800;
    color: var(--brand-navy);
    font-size: 1.02rem;
}

.admin-topbar-actions {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
}

.admin-topbar-menu {
    position: relative;
}

.admin-topbar-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--brand-navy);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.admin-topbar-trigger:hover {
    border-color: var(--brand-sky);
    background: var(--brand-sky-soft);
}

.admin-topbar-trigger:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.admin-topbar-trigger .admin-chevron {
    color: var(--color-muted);
}

.admin-lang-trigger > svg:first-child {
    color: var(--brand-blue);
}

.admin-profile-name {
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, var(--brand-sky) 0%, var(--brand-blue) 75%);
    color: var(--on-orange);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.admin-avatar-lg {
    width: 40px;
    height: 40px;
    font-size: 0.9rem;
}

.admin-menu-panel {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    min-width: 210px;
    padding: 0.4rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-pop);
    z-index: 60;
    display: grid;
    gap: 0.1rem;
}

.admin-menu-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.65rem;
    border-radius: var(--radius-small);
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
}

.admin-menu-item:hover,
.admin-menu-item:focus-visible {
    background: var(--brand-sky-soft);
    color: var(--brand-navy);
    outline: none;
}

.admin-menu-item.is-active {
    color: var(--brand-blue);
    font-weight: 800;
}

.admin-menu-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    padding: 0.05rem 0.3rem;
    border-radius: var(--radius-small);
    background: var(--color-background);
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--color-muted);
}

.admin-menu-logout {
    color: var(--color-danger);
}

.admin-menu-logout:hover {
    background: var(--color-error-bg);
    color: var(--color-error-text);
}

.admin-profile-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.65rem 0.6rem;
    margin-bottom: 0.2rem;
    border-bottom: 1px solid var(--color-border);
}

.admin-profile-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.admin-profile-meta strong {
    font-size: 0.88rem;
    color: var(--brand-navy);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-profile-meta small {
    font-size: 0.76rem;
    color: var(--color-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-nav-heading {
    display: block;
    margin: 0 0.85rem 0.35rem;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgb(255 255 255 / 45%);
}

.admin-auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(150deg, var(--brand-navy-deep), var(--brand-navy));
    padding: 1.5rem;
}

.admin-auth-card {
    width: min(420px, 100%);
    background: var(--color-surface);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-pop);
    padding: clamp(1.5rem, 4vw, 2.25rem);
}

.admin-auth-card-wide {
    width: min(560px, 100%);
}

.admin-auth-logo {
    display: block;
    margin: 0 auto 1rem;
}

.admin-auth-card h1 {
    font-size: 1.25rem;
    margin: 0 0 0.6rem;
}

.admin-auth-card label {
    display: block;
    font-weight: 700;
    font-size: 0.88rem;
    margin: 0.8rem 0 0.25rem;
}

.admin-auth-card input {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font: inherit;
}

.admin-auth-submit {
    width: 100%;
    margin-top: 1.1rem;
}

.admin-auth-note {
    margin-top: 1rem;
    color: var(--color-muted);
    font-size: 0.84rem;
}

.admin-auth-cancel {
    display: inline-block;
    margin-top: 0.9rem;
    font-size: 0.86rem;
    color: var(--color-muted);
}

.admin-totp-setup {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    margin: 1rem 0;
    flex-wrap: wrap;
}

.admin-totp-qr {
    width: 180px;
    flex-shrink: 0;
}

.admin-totp-manual {
    min-width: 0;
    font-size: 0.88rem;
}

.admin-totp-manual code {
    display: block;
    margin-top: 0.4rem;
    padding: 0.5rem 0.7rem;
    background: var(--color-background);
    border-radius: var(--radius);
    word-break: break-all;
}

.admin-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-bottom: 0;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--color-border);
}

.admin-page-head h1 {
    margin: 0;
    font-size: clamp(1.4rem, 2.6vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--brand-navy);
}

.admin-page-head p,
.admin-page-head .admin-page-meta {
    flex-basis: 100%;
    min-width: 100%;
    order: 3;
    margin: 0.1rem 0 0;
    color: var(--color-muted);
    font-size: 0.95rem;
}

.admin-page-head > div,
.admin-page-head-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    order: 1;
    margin-left: auto;
}

.admin-page-head > .admin-chip,
.admin-page-head > .button {
    order: 1;
    margin-left: auto;
}

.admin-page-meta {
    color: var(--color-muted);
    margin: 0;
}

.admin-table-wrap {
    overflow-x: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-card);
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.admin-table th,
.admin-table td {
    text-align: left;
    padding: 0.75rem 1.05rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

.admin-table code {
    display: inline-block;
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    font-size: 0.78rem;
    color: var(--color-muted);
}

.admin-table thead th {
    background: var(--color-background);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--brand-navy);
    white-space: nowrap;
}

.admin-table tbody tr:last-child td {
    border-bottom: none;
}

.admin-table tbody tr:hover {
    background: var(--brand-sky-soft);
}

.admin-table tbody tr.is-inactive td {
    color: var(--color-muted);
}

.admin-sort-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: inherit;
    text-decoration: none;
}

.admin-sort-caret {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: 0.35;
}

.admin-sort-link.is-sorted .admin-sort-caret {
    opacity: 1;
}

.admin-sort-link.is-sorted.dir-asc .admin-sort-caret {
    transform: rotate(180deg);
}

.admin-datatable-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0;
    padding: 0.9rem 1.1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
}

.admin-datatable-toolbar + .admin-table-wrap {
    margin-top: 1.1rem;
}

.admin-datatable-toolbar input[type="search"],
.admin-datatable-toolbar input[type="text"] {
    flex: 1 1 13rem;
    min-width: 0;
    max-width: 22rem;
}

.admin-datatable-toolbar input,
.admin-datatable-toolbar select {
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    font: inherit;
    font-size: 0.88rem;
    background: var(--color-surface);
    color: var(--color-text);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.admin-datatable-toolbar select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235f7085' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    cursor: pointer;
}

.admin-datatable-toolbar input:hover,
.admin-datatable-toolbar select:hover {
    border-color: var(--brand-sky);
}

.admin-datatable-toolbar input:focus,
.admin-datatable-toolbar select:focus {
    outline: none;
    border-color: var(--brand-sky);
    box-shadow: var(--focus-ring);
}

.admin-pagination {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-top: 0.9rem;
    font-size: 0.88rem;
    color: var(--color-muted);
}

.admin-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--color-background);
    color: var(--brand-navy);
    border-radius: var(--radius-pill);
    padding: 0.2rem 0.65rem;
    font-size: 0.76rem;
    font-weight: 700;
    margin: 0.1rem 0.15rem 0.1rem 0;
    white-space: nowrap;
}

.admin-chip.chip-ok {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.admin-chip.chip-warn {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
}

.admin-chip.chip-error {
    background: var(--color-error-bg);
    color: var(--color-error-text);
}

.admin-chip.chip-muted {
    background: var(--color-background);
    color: var(--color-muted);
}

.admin-chip.status-paid,
.admin-chip.status-delivered {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.admin-chip.status-pending_payment,
.admin-chip.status-in_fulfilment,
.admin-chip.status-partially_delivered {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
}

.admin-chip.status-failed,
.admin-chip.status-cancelled,
.admin-chip.status-expired,
.admin-chip.status-refunded {
    background: var(--color-error-bg);
    color: var(--color-error-text);
}

.admin-stat-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    gap: 0.75rem;
    margin: 0 0 1.1rem;
}

.admin-stat {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.8rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--brand-navy);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-card);
}

.admin-stat.is-ok {
    border-left-color: var(--color-success-text);
}

.admin-stat.is-warn {
    border-left-color: var(--color-warning-text);
}

.admin-stat.is-info {
    border-left-color: var(--brand-sky);
}

.admin-stat-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-muted);
}

.admin-stat-value {
    font-size: 1.35rem;
    line-height: 1.15;
    color: var(--brand-navy);
    font-variant-numeric: tabular-nums;
}

.admin-table-business {
    font-size: 0.86rem;
}

.admin-table-business th,
.admin-table-business td {
    padding: 0.62rem 0.95rem;
}

.admin-table-business tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--color-background) 55%, transparent);
}

.admin-table-business tbody tr:hover {
    background: var(--brand-sky-soft);
}

.admin-table-business td.admin-cell-numeric,
.admin-table-business th.admin-cell-numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.admin-table-business th.admin-cell-numeric .admin-sort-link {
    justify-content: flex-end;
}

.admin-cell-link {
    color: var(--brand-navy);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.admin-cell-link:hover,
.admin-cell-link:focus-visible {
    border-bottom-color: currentColor;
}

.admin-table-empty {
    padding: 1.6rem 1rem;
    text-align: center;
    color: var(--color-muted);
}

.admin-role-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
    gap: 0.35rem 1rem;
    margin: 0.4rem 0 0.6rem;
}

.admin-quality-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
    gap: 1.1rem;
    margin: 1rem 0;
    align-items: stretch;
}

.admin-quality-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    height: 100%;
}

.admin-card.admin-quality-card > form.admin-inline-form {
    margin-top: auto;
    padding-top: 0.7rem;
}

.admin-quality-card p {
    margin: 0.4rem 0;
}

.admin-quality-meta {
    font-size: 0.82rem;
    color: var(--color-muted);
}

.admin-quality-card p.admin-quality-meta:empty {
    display: none;
}

.admin-quality-output {
    margin: 0.5rem 0 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-background);
}

.admin-quality-output summary {
    cursor: pointer;
    padding: 0.5rem 0.8rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--brand-navy);
}

.admin-quality-output pre {
    margin: 0;
    padding: 0.7rem 0.9rem;
    max-height: 420px;
    overflow: auto;
    font-size: 0.76rem;
    line-height: 1.5;
    border-top: 1px solid var(--color-border);
    white-space: pre-wrap;
    word-break: break-word;
}

.admin-quality-env {
    margin: 1rem 0;
}

.admin-quality-env h2 {
    margin: 0 0 0.6rem;
    font-size: 1rem;
}

.admin-quality-env-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
    gap: 0.7rem 1.1rem;
    margin: 0;
}

.admin-quality-env-grid dt {
    font-size: 0.76rem;
    color: var(--color-muted);
}

.admin-quality-env-grid dd {
    margin: 0.15rem 0 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--brand-navy);
    word-break: break-word;
}

.admin-quality-console {
    margin-top: 0.8rem;
}

.admin-quality-console-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.admin-quality-console-bar p {
    margin: 0;
    flex: 1;
    min-width: 200px;
}

.admin-quality-run-all {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: wrap;
    margin: 0.4rem 0 1rem;
}

.admin-quality-console-status {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-muted);
}

.admin-quality-console-status[data-state='passed'] {
    color: var(--color-success-text);
}

.admin-quality-console-status[data-state='failed'] {
    color: var(--color-error-text);
}

.admin-quality-console pre {
    margin: 0.4rem 0 0;
    padding: 0.7rem 0.9rem;
    max-height: 320px;
    overflow: auto;
    border-radius: 10px;
    background: #2a2725;
    color: #eeebe2;
    font-size: 0.76rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.admin-plugin-actions {
    display: inline-block;
    position: relative;
}

.admin-plugin-actions > summary {
    list-style: none;
    cursor: pointer;
}

.admin-plugin-actions > summary::-webkit-details-marker {
    display: none;
}

.admin-plugin-actions-body {
    position: absolute;
    right: 0;
    z-index: 30;
    min-width: 240px;
    margin-top: 0.35rem;
    padding: 0.8rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    box-shadow: 0 10px 24px rgb(42 40 38 / 14%);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.admin-pagination-status {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-muted);
}

.admin-inline-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.7rem;
    font-size: 0.85rem;
}

.admin-provider-enabled {
    margin-bottom: 0.2rem;
}

.admin-method-create {
    margin-top: 1.2rem;
}

.admin-team-photo-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-background);
    color: var(--color-muted);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
}

.admin-form {
    max-width: 920px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    padding: clamp(1.4rem, 2.5vw, 2rem);
    box-shadow: var(--shadow-card);
    margin-inline: 0;
    margin-bottom: 0;
}

.admin-form + .admin-form {
    margin-top: 1.6rem;
}

.admin-form label {
    display: block;
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--brand-navy);
    margin: 0.9rem 0 0.3rem;
}

.admin-form input,
.admin-form select,
.admin-form textarea {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    font: inherit;
    font-size: 0.94rem;
    background: var(--color-surface);
    color: var(--color-text);
    transition: border-color 130ms ease, box-shadow 130ms ease;
}

.admin-form input[type="checkbox"],
.admin-form input[type="radio"] {
    width: auto;
}

.admin-form select {
    height: calc(1.4em + 1.2rem + 2px);
    line-height: 1.4;
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235f7085' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.8rem center;
    cursor: pointer;
}

.admin-form input:hover,
.admin-form select:hover,
.admin-form textarea:hover {
    border-color: var(--brand-sky);
}

.admin-form input:focus,
.admin-form select:focus,
.admin-form textarea:focus {
    outline: none;
    border-color: var(--brand-sky);
    box-shadow: var(--focus-ring);
}

.admin-form input:disabled,
.admin-form select:disabled,
.admin-form textarea:disabled {
    background: var(--color-background);
    color: var(--color-muted);
    cursor: not-allowed;
}

.admin-form input::placeholder,
.admin-form textarea::placeholder {
    color: var(--color-muted);
}

.admin-form-hint,
.admin-form .hint {
    color: var(--color-muted);
    font-size: 0.8rem;
    font-weight: 400;
    margin: 0.3rem 0 0;
}

.admin-form .field {
    margin: 0;
}

.admin-form .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 1.3rem;
}

.admin-form fieldset {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    margin: 1.25rem 0;
    padding: 1rem 1.25rem 1.25rem;
}

.admin-form fieldset legend {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 800;
    font-size: 0.92rem;
    color: var(--brand-navy);
    padding: 0 0.4rem;
}

.admin-fieldset {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    margin: 1rem 0;
    padding: 0.7rem 1rem 0.9rem;
}

.admin-fieldset legend {
    font-weight: 700;
    font-size: 0.88rem;
    padding: 0 0.4rem;
}

.admin-role-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.84rem;
    font-weight: 600;
    margin: 0.2rem 0.7rem 0.2rem 0;
}

.admin-role-checkbox input {
    width: auto;
}

.admin-form-actions {
    display: flex;
    gap: 0.7rem;
    margin-top: 1.2rem;
}

.admin-inline-form {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.15rem 0;
}

.admin-inline-form input[type="text"],
.admin-inline-form input[type="number"] {
    width: 11rem;
    max-width: 100%;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    font: inherit;
    font-size: 0.85rem;
    background: var(--color-surface);
    color: var(--color-text);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.admin-inline-form input[type="text"]:hover,
.admin-inline-form input[type="number"]:hover {
    border-color: var(--brand-sky);
}

.admin-inline-form input[type="text"]:focus,
.admin-inline-form input[type="number"]:focus {
    outline: none;
    border-color: var(--brand-sky);
    box-shadow: var(--focus-ring);
}

.admin-actions-cell {
    white-space: nowrap;
}

.admin-actions-cell:has(.admin-inline-form),
.admin-actions-cell:has(.admin-reason) {
    white-space: normal;
    min-width: 15rem;
}

.admin-reason {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin: 0.6rem 0 0;
}

.admin-reason > span {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted);
}

.admin-reason.is-required > span {
    color: var(--brand-orange-dark);
}

.admin-reason input,
.admin-reason textarea,
.admin-form input[name="reason"],
.admin-form textarea[name="reason"] {
    width: 100%;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-background);
    color: var(--color-text);
    font: inherit;
    font-size: 0.88rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.admin-reason input:focus,
.admin-reason textarea:focus,
.admin-form input[name="reason"]:focus,
.admin-form textarea[name="reason"]:focus {
    outline: none;
    border-color: var(--brand-sky);
    background: var(--color-surface);
    box-shadow: var(--focus-ring);
}

.admin-muted {
    color: var(--color-muted);
    font-size: 0.82em;
}

.admin-audit-change details {
    margin: 0.15rem 0;
}

.admin-audit-change pre {
    max-width: 26rem;
    max-height: 12rem;
    overflow: auto;
    font-size: 0.74rem;
    margin: 0.3rem 0 0;
}

.admin-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
    gap: 1.25rem;
    margin-bottom: 0;
}

.admin-stat-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    padding: 1.15rem 1.3rem;
    text-decoration: none;
    color: inherit;
    display: block;
    box-shadow: var(--shadow-card);
    transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

a.admin-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-pop);
    border-color: var(--brand-sky);
}

.admin-stat-value {
    display: block;
    font-size: 1.65rem;
    font-weight: 800;
    color: var(--brand-navy);
    line-height: 1.15;
}

.admin-stat-label {
    display: block;
    color: var(--color-muted);
    font-size: 0.82rem;
    font-weight: 600;
    margin-top: 0.25rem;
}

.admin-stat-card.stat-ok {
    border-left: 4px solid var(--color-success);
}

.admin-stat-card.stat-warn {
    border-left: 4px solid var(--color-warning-text);
}

.admin-stat-card.stat-error {
    border-left: 4px solid var(--color-danger);
}

.admin-section {
    margin-inline: 0;
}

.admin-section > p:first-of-type,
.admin-card > p.admin-form-hint:first-of-type {
    margin-top: 0;
}

.admin-card > .admin-inline-form + .admin-inline-form {
    margin-top: 0.2rem;
}

.admin-card > .admin-table-wrap:not(:first-child),
.admin-card > form:not(:first-child) {
    margin-top: 0.25rem;
}

.admin-section > h2 {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--brand-navy);
    margin: 0 0 1rem;
}

.admin-two-column {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 1.5rem;
    align-items: start;
}

.admin-card {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    padding: clamp(1.4rem, 2.4vw, 1.75rem);
    box-shadow: var(--shadow-card);
    text-decoration: none;
    color: var(--color-text);
}

.admin-card + .admin-card {
    margin-top: 1.6rem;
}

.admin-two-column > .admin-card + .admin-card,
.admin-card-grid > .admin-card + .admin-card,
.admin-panel-grid > .admin-card + .admin-card {
    margin-top: 0;
}

.admin-section > .admin-table-wrap,
.admin-section > .admin-two-column {
    margin-top: 0.9rem;
}

a.admin-card {
    transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

.admin-card h2,
.admin-card h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--brand-navy);
}

.admin-card p {
    margin: 0;
    font-size: 0.92rem;
    color: var(--color-muted);
}

.admin-card .admin-table-wrap {
    border: none;
    box-shadow: none;
    border-radius: 0;
    margin: 0 -0.4rem;
}

.admin-card-divider {
    margin-top: 1rem !important;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

.admin-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.admin-timeline::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: var(--color-border);
}

.admin-timeline li {
    position: relative;
    padding: 0 0 1rem 2rem;
}

.admin-timeline li::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--brand-sky);
    border: 2px solid var(--color-surface);
    box-shadow: 0 0 0 2px var(--brand-sky);
}

.admin-timeline-time {
    display: block;
    font-size: 0.76rem;
    color: var(--color-muted);
}

.admin-timeline-title {
    font-weight: 700;
    color: var(--brand-navy);
}

.admin-timeline-meta {
    font-size: 0.84rem;
    color: var(--color-muted);
}

.admin-provider-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    max-width: 860px;
    margin-bottom: 0;
}

.admin-provider {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-card);
}

.admin-provider summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
    padding: 0.95rem 1.3rem;
    cursor: pointer;
    list-style: none;
    border-radius: var(--radius-large);
    transition: background 130ms ease;
}

.admin-provider summary::-webkit-details-marker {
    display: none;
}

.admin-provider summary::before {
    content: "";
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--brand-sky);
    border-bottom: 2px solid var(--brand-sky);
    transform: rotate(-45deg);
    transition: transform 150ms ease;
    flex-shrink: 0;
}

.admin-provider[open] summary::before {
    transform: rotate(45deg);
}

.admin-provider summary:hover {
    background: var(--brand-sky-soft);
}

.admin-provider[open] summary {
    border-bottom: 1px solid var(--color-border);
    border-radius: var(--radius-large) var(--radius-large) 0 0;
}

.admin-provider-name {
    flex: 1;
    font-weight: 800;
    color: var(--brand-navy);
    font-size: 1rem;
}

.admin-provider-summary-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.admin-provider-body {
    padding: 0.4rem 1.3rem 1.2rem;
}

.admin-provider-form {
    border: none;
    box-shadow: none;
    padding: 0;
    margin-bottom: 0;
    max-width: none;
}

.admin-provider-form code {
    font-size: 0.82rem;
    background: var(--color-background);
    border-radius: var(--radius-small);
    padding: 0.15rem 0.45rem;
    word-break: break-all;
}

.admin-method-table td strong {
    color: var(--brand-navy);
}

.admin-method-input {
    min-width: 5.5rem;
    max-width: 7rem;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    font: inherit;
    font-size: 0.88rem;
}

.admin-method-input:focus {
    outline: none;
    border-color: var(--brand-sky);
    box-shadow: 0 0 0 3px rgb(154 140 123 / 14%);
}

.admin-method-active {
    font-size: 0.84rem;
    white-space: nowrap;
}

.admin-method-limits {
    min-width: 15rem;
}

.admin-method-limit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem 0.6rem;
    margin-top: 0.45rem;
}

.admin-method-limit {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.admin-method-limit > span {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-muted);
}

.admin-method-limit .admin-method-input {
    min-width: 0;
    max-width: none;
    width: 100%;
}

.admin-method-table .admin-actions-cell {
    min-width: 0;
    white-space: nowrap;
}

.admin-meter {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 9rem;
}

.admin-meter-track {
    flex: 1;
    height: 10px;
    border-radius: var(--radius-pill);
    background: var(--color-background);
    overflow: hidden;
}

.admin-meter-bar {
    display: block;
    height: 100%;
    min-width: 2px;
    border-radius: 999px;
    background: var(--brand-sky);
}

.admin-meter-ok .admin-meter-bar {
    background: var(--color-success);
}

.admin-meter-warn .admin-meter-bar {
    background: var(--color-warning-text);
}

.admin-meter-error .admin-meter-bar {
    background: var(--color-danger);
}

.admin-meter-info .admin-meter-bar {
    background: var(--brand-blue);
}

.fraud-trend-chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 180px;
    padding: 0.4rem 0 0;
    overflow-x: auto;
}

.fraud-trend-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    flex: 1 0 22px;
    min-width: 0;
    height: 100%;
}

.fraud-trend-stack {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex: 1;
    width: 100%;
    max-width: 34px;
    border-radius: 4px 4px 0 0;
    overflow: hidden;
}

.fraud-trend-bar {
    display: block;
    width: 100%;
    min-height: 3px;
}

.fraud-trend-approve {
    background: var(--color-success);
}

.fraud-trend-review {
    background: var(--color-warning-text);
}

.fraud-trend-decline {
    background: var(--color-danger);
}

.fraud-trend-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--color-muted);
    white-space: nowrap;
}

.fraud-trend-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem;
    margin-top: 0.9rem;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--color-muted);
}

.fraud-trend-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.fraud-trend-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.admin-auth-remember {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.9rem 0 0.2rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--brand-navy);
    cursor: pointer;
}

.admin-auth-remember input {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--brand-orange);
    margin: 0;
}

.admin-permission-matrix {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: 0.8rem;
    margin: 1rem 0;
}

.admin-permission-group {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    margin: 0;
    min-width: 0;
    padding: 0.6rem 0.9rem 0.8rem;
}

.admin-permission-group legend {
    max-width: 100%;
    font-weight: 800;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--brand-navy);
    padding: 0 0.35rem;
    overflow-wrap: anywhere;
}

.admin-permission-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    font-weight: 400 !important;
    color: var(--color-text);
    margin: 0.35rem 0 0 !important;
    cursor: pointer;
    overflow-wrap: anywhere;
}

.admin-permission-option input {
    width: 1rem !important;
    height: 1rem;
    flex: 0 0 1rem;
    accent-color: var(--brand-orange);
    margin: 0;
}

.admin-permission-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    padding: 0.2rem 0 0.6rem;
}

.admin-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0 0 1.1rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid var(--color-border);
}

.admin-tab {
    padding: 0.45rem 1rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--color-muted);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 130ms ease, color 130ms ease;
}

.admin-tab:hover {
    background: var(--brand-sky-soft);
    color: var(--brand-blue);
}

.admin-tab.is-active {
    background: var(--brand-navy);
    color: var(--color-surface);
}

.admin-tab:focus-visible {
    outline: 2px solid var(--brand-sky);
    outline-offset: 2px;
}

.admin-lang-tabs {
    margin: 1rem 0;
    padding: 0.9rem;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.admin-lang-tabs .admin-tabs {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 0.2rem;
    margin-bottom: 0.9rem;
    padding: 0.25rem;
    border: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    max-width: 100%;
    overflow-x: auto;
}

.admin-lang-tabs .admin-tab {
    padding: 0.4rem 1.15rem;
    white-space: nowrap;
}

.admin-lang-tabs .admin-tab.is-active {
    box-shadow: var(--shadow-soft);
}

.rich-text-editor {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
    overflow: hidden;
}

.rich-text-editor:focus-within {
    border-color: var(--brand-sky);
    box-shadow: 0 0 0 3px rgb(154 140 123 / 14%);
}

.rich-text-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.4rem 0.5rem;
    background: var(--color-background);
    border-bottom: 1px solid var(--color-border);
}

.rich-text-button {
    min-width: 2rem;
    padding: 0.3rem 0.55rem;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--brand-navy);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}

.rich-text-button:hover,
.rich-text-button:focus-visible {
    background: var(--color-surface);
    border-color: var(--color-border);
}

.rich-text-button-italic {
    font-style: italic;
}

.rich-text-area {
    min-height: 200px;
    max-height: 480px;
    overflow-y: auto;
    padding: 0.8rem 1rem;
    font-size: 0.95rem;
    line-height: 1.55;
}

.rich-text-area:focus {
    outline: none;
}

.rich-text-area h2 {
    font-size: 1.2rem;
    margin: 0.8rem 0 0.4rem;
    color: var(--brand-navy);
}

.rich-text-area h3 {
    font-size: 1.05rem;
    margin: 0.7rem 0 0.3rem;
    color: var(--brand-navy);
}

.rich-text-area p {
    margin: 0 0 0.7rem;
}

.rich-text-area ul,
.rich-text-area ol {
    margin: 0 0 0.7rem;
    padding-left: 1.4rem;
}

.rich-text-area a {
    color: var(--brand-blue);
    text-decoration: underline;
}

.admin-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    padding: 0;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    color: var(--brand-navy);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.admin-nav-toggle:hover {
    background: var(--brand-sky-soft);
    border-color: var(--brand-sky);
}

.admin-nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 55;
    padding: 0;
    border: none;
    background: rgb(26 24 22 / 55%);
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
    transition: opacity var(--transition-fast);
}

.admin-topbar-title {
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 1024px) {
    .admin-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .admin-nav-toggle {
        display: inline-flex;
    }

    .admin-nav-backdrop {
        display: block;
    }

    .admin-shell.is-nav-open .admin-nav-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    .admin-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 60;
        width: min(280px, 84vw);
        max-height: 100dvh;
        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
        overscroll-behavior: contain;
        transform: translateX(-100%);
        visibility: hidden;
        box-shadow: 0 18px 45px rgb(26 24 22 / 35%);
        transition: transform 240ms ease, visibility 240ms ease;
    }

    .admin-shell.is-nav-open .admin-sidebar {
        transform: none;
        visibility: visible;
    }

    .admin-topbar {
        position: sticky;
        top: 0;
        z-index: 40;
    }
}

@media (prefers-reduced-motion: reduce) {
    .admin-sidebar {
        transition: none;
    }
}

@media (max-width: 640px) {
    .admin-topbar {
        flex-wrap: wrap;
        gap: 0.5rem 0.75rem;
        padding: 0.7rem 1rem;
    }

    .admin-topbar-actions {
        gap: 0.5rem;
    }

    .admin-profile-name {
        display: none;
    }

    .admin-content {
        padding: 1.15rem 1rem 2rem;
    }
}

.admin-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
}

@media (max-width: 1000px) {
    .admin-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 540px) {
    .admin-kpi-grid {
        grid-template-columns: 1fr;
    }
}

.admin-kpi {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    padding: 1.15rem 1.3rem;
    box-shadow: var(--shadow-card);
}

.admin-kpi-label {
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-muted);
}

.admin-kpi-value {
    font-size: clamp(1.35rem, 2.4vw, 1.75rem);
    font-weight: 800;
    color: var(--brand-navy);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.admin-kpi-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 0.82rem;
}

.admin-delta {
    display: inline-flex;
    align-items: center;
    font-weight: 800;
    font-size: 0.78rem;
    border-radius: var(--radius-pill);
    padding: 0.1rem 0.5rem;
}

.admin-delta.is-up {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.admin-delta.is-down {
    background: var(--color-error-bg);
    color: var(--color-error-text);
}

.admin-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.admin-chart {
    display: flex;
    align-items: flex-end;
    gap: clamp(0.2rem, 1vw, 0.6rem);
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
}

.admin-chart-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    flex: 1 0 22px;
    min-width: 0;
}

.admin-chart-bar-wrap {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 140px;
    background: var(--color-background);
    border-radius: var(--radius-small);
    overflow: hidden;
}

.admin-chart-bar {
    display: block;
    width: 100%;
    border-radius: var(--radius-small) var(--radius-small) 0 0;
    background: linear-gradient(180deg, var(--brand-sky) 0%, var(--brand-blue) 100%);
}

.admin-chart-bar.is-empty {
    background: var(--color-border);
}

.admin-chart-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-muted);
    white-space: nowrap;
}

@media (max-width: 640px) {
    .admin-chart-bar-wrap {
        height: 110px;
    }

    .admin-chart-label {
        font-size: 0.6rem;
    }
}

.admin-provider-summary-meta {
    flex-wrap: wrap;
    max-width: 100%;
}

.filter-panel {
    display: none;
}

.filter-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.05rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    font: inherit;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--brand-navy);
    cursor: pointer;
    box-shadow: var(--shadow-card);
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.filter-trigger:hover {
    border-color: var(--brand-sky);
}

.filter-trigger-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.4rem;
    border-radius: var(--radius-pill);
    background: var(--brand-orange);
    color: var(--on-orange);
    font-size: 0.78rem;
    font-weight: 800;
}

.filter-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 120;
    background: rgb(26 24 22 / 55%);
    opacity: 0;
    transition: opacity 220ms ease;
}

.filter-panel.is-open .filter-sheet-backdrop {
    opacity: 1;
}

.filter-sheet {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 121;
    display: flex;
    flex-direction: column;
    width: min(420px, 92vw);
    height: 100dvh;
    background: var(--color-surface);
    box-shadow: 18px 0 45px rgb(26 24 22 / 30%);
    transform: translateX(-102%);
    transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1);
}

.filter-panel.is-open .filter-sheet {
    transform: translateX(0);
}

.filter-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
}

.filter-sheet-head h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--brand-navy);
}

.filter-sheet-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: none;
    color: var(--color-muted);
    cursor: pointer;
    border-radius: var(--radius-small);
}

.filter-sheet-close:hover {
    background: var(--brand-sky-soft);
    color: var(--brand-navy);
}

.filter-sheet-body {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
    min-height: 0;
    flex: 1;
}

.filter-facet-options {
    display: grid;
    gap: 0.15rem;
}

.filter-option {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.48rem 0.45rem;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 0.97rem;
    font-weight: 600;
    color: var(--color-text);
    transition: background var(--transition-fast);
}

.filter-option:hover {
    background: var(--brand-sky-soft);
}

.filter-option input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.filter-option-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border: 2px solid var(--brand-sky);
    border-radius: 50%;
    background: var(--color-surface);
    transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.filter-option input:checked ~ .filter-option-check {
    background: var(--brand-orange);
    border-color: var(--brand-orange);
    box-shadow: inset 0 0 0 2.5px #fff;
}

.filter-option input:focus-visible ~ .filter-option-check {
    outline: 2px solid var(--brand-sky);
    outline-offset: 2px;
}

.filter-option-label {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.filter-option-count {
    color: var(--brand-navy);
    font-size: 0.9rem;
    font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
    .filter-sheet,
    .filter-sheet-backdrop {
        transition: none;
    }
}

@media (max-width: 960px) {
    .filter-panel {
        display: block;
    }
}

.seo-sections,
.site-footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 620px;
}

.section-head-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-right: 0.45rem;
    border-radius: 50%;
    background: var(--brand-navy);
    color: var(--brand-orange);
    vertical-align: -0.4rem;
}

.category-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
    gap: 0.9rem;
}

.categories-page .page-header {
    margin-bottom: 0.5rem;
}

.category-group {
    margin-top: 1.9rem;
}

.category-group-head h2 a {
    color: var(--brand-navy);
    text-decoration: none;
}

.category-group-head h2 a:hover {
    color: var(--brand-blue);
    text-decoration: underline;
}

.category-group .category-tile:first-child {
    background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-navy) 100%);
    border-color: transparent;
}

.category-group .category-tile:first-child .category-tile-name {
    color: #fff;
}

.category-group .category-tile:first-child:hover {
    background: linear-gradient(135deg, var(--brand-sky) 0%, var(--brand-navy) 100%);
}

.category-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 1rem 1.1rem;
    border-radius: var(--radius-large);
    background: var(--brand-sky-soft);
    border: 1px solid transparent;
    text-decoration: none;
    text-align: center;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}

.category-tile:hover {
    transform: translateY(-3px);
    background: #efece2;
    border-color: rgb(154 140 123 / 45%);
    box-shadow: var(--shadow-card);
}

.category-tile:focus-visible {
    outline: 3px solid var(--brand-sky);
    outline-offset: 2px;
}

.category-tile-name {
    font-size: 1.12rem;
    font-weight: 800;
    color: var(--brand-navy);
    overflow-wrap: anywhere;
}

@media (max-width: 640px) {
    .category-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .category-tile {
        min-height: 88px;
    }
}

.social-login {
    margin-top: 1.4rem;
}

.social-divider {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.9rem;
    color: var(--color-muted);
    font-size: 0.85rem;
    font-weight: 700;
}

.social-divider::before,
.social-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

.social-buttons {
    display: grid;
    gap: 0.6rem;
}

.social-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 46px;
    padding: 0.6rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: 0.95rem;
    font-weight: 800;
    text-decoration: none;
    color: #fff;
    transition: filter 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.social-button:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: var(--shadow-card);
}

.social-button:focus-visible {
    outline: 3px solid var(--brand-sky);
    outline-offset: 2px;
}

.social-button-icon {
    display: inline-flex;
    line-height: 0;
}

.social-button-icon svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.social-button-playstation { background: #0070d1; }
.social-button-xbox { background: #107c10; }
.social-button-discord { background: #5865f2; }
.social-button-nintendo { background: #e60012; }

.social-button-google {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
}

.social-button-custom { background: var(--brand-navy); }

.product-tab-media {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
    gap: 0.9rem;
    margin-top: 1.1rem;
}

.product-tab-media-item {
    display: block;
    overflow: hidden;
    border-radius: var(--radius-large);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    box-shadow: var(--shadow-soft);
}

.product-tab-media-item img,
.product-tab-media-item picture {
    display: block;
    width: 100%;
    height: auto;
}

.product-tab-video {
    display: block;
    width: 100%;
    height: auto;
    background: #272422;
}

.spot-widget {
    position: fixed;
    right: clamp(0.75rem, 3vw, 1.75rem);
    bottom: 0;
    z-index: 95;
}

.spot-widget.is-open {
    z-index: 500;
}

.spot-dock {
    position: relative;
    display: block;
    transform-origin: bottom center;
    animation: spot-pop-in 0.8s cubic-bezier(0.34, 1.45, 0.5, 1);
}

.spot-launcher {
    position: relative;
    display: block;
    width: 144px;
    height: 50px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.spot-launcher:focus-visible {
    outline: 3px solid var(--brand-sky);
    outline-offset: 4px;
    border-radius: 14px;
}

.spot-launcher-glow {
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 120px;
    height: 30px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgb(255 255 255 / 55%), transparent 70%);
    pointer-events: none;
}

.spot-launcher-head {
    position: absolute;
    left: 50%;
    bottom: -11px;
    width: 144px;
    height: auto;
    margin-left: -72px;
    transform-origin: bottom center;
    filter: drop-shadow(0 -3px 10px rgb(26 24 22 / 22%));
    animation: spot-bob-idle 2.9s ease-in-out infinite;
    pointer-events: none;
}

.spot-launcher-head.is-hop { animation: spot-hop 0.85s ease; }
.spot-launcher-head.is-lookaround { animation: spot-lookaround 1.6s ease; }
.spot-launcher-head.is-tilt { animation: spot-tilt 1.15s ease; }
.spot-launcher-head.is-scratch { animation: spot-scratch 1.15s ease; }

.spot-speech {
    position: absolute;
    right: 6px;
    bottom: calc(100% + 6px);
    max-width: 200px;
    padding: 0.55rem 0.85rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--brand-navy);
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.35;
    border-radius: 16px;
    box-shadow: 0 12px 28px rgb(26 24 22 / 22%);
    opacity: 0;
    transform: translateY(10px) scale(0.82);
    transform-origin: bottom right;
    transition: opacity 140ms ease, transform 260ms cubic-bezier(0.34, 1.35, 0.6, 1);
    pointer-events: none;
    z-index: 1;
}

.spot-speech::after {
    content: "";
    position: absolute;
    right: 26px;
    bottom: -5px;
    width: 13px;
    height: 13px;
    background: var(--color-surface);
    border-radius: 0 0 4px 0;
    transform: rotate(45deg);
}

.spot-widget.is-bubbling .spot-speech {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.spot-widget.is-open .spot-speech {
    display: none;
}

.spot-launcher-hint {
    position: absolute;
    bottom: calc(100% - 2px);
    right: 6px;
    padding: 0.3rem 0.65rem;
    background: var(--brand-navy);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-card);
    opacity: 0;
    transform: translateY(6px) scale(0.9);
    transform-origin: bottom right;
    transition: opacity 180ms ease, transform 180ms ease;
    pointer-events: none;
}

.spot-launcher:hover .spot-launcher-hint,
.spot-launcher:focus-visible .spot-launcher-hint {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.spot-widget.is-open .spot-launcher-hint {
    display: none;
}

.spot-minimize {
    position: absolute;
    top: -2px;
    right: -2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-muted);
    cursor: pointer;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 160ms ease, transform 160ms ease, color 160ms ease;
}

.spot-dock:hover .spot-minimize,
.spot-minimize:focus-visible {
    opacity: 1;
    transform: scale(1);
}

.spot-minimize:hover {
    color: var(--brand-navy);
    border-color: var(--brand-sky);
}

.spot-restore-tab {
    display: none;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.8rem 0.35rem 0.55rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--brand-navy);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 800;
    box-shadow: var(--shadow-card);
    cursor: pointer;
    transform-origin: bottom right;
    animation: spot-pop-in 0.5s cubic-bezier(0.34, 1.4, 0.5, 1);
}

.spot-restore-tab img {
    width: 34px;
    height: auto;
}

.spot-restore-tab:hover {
    border-color: var(--brand-sky);
    background: var(--brand-sky-soft);
}

.spot-widget.is-minimized .spot-dock {
    display: none;
}

.spot-widget.is-minimized .spot-restore-tab {
    display: inline-flex;
}

@keyframes spot-backdrop-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes spot-pop-in {
    0% { transform: translateY(45%) scale(0.82); }
    58% { transform: translateY(-7%) scale(1.05); }
    100% { transform: translateY(0) scale(1); }
}

@keyframes spot-bob-idle {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-6px) rotate(1deg); }
}

@keyframes spot-hop {
    0%, 100% { transform: translateY(0) scaleY(1); }
    30% { transform: translateY(-18px) scaleY(1.04); }
    48% { transform: translateY(-18px); }
    72% { transform: translateY(0) scaleY(0.9); }
    86% { transform: translateY(-5px) scaleY(1); }
}

@keyframes spot-lookaround {
    0%, 100% { transform: rotate(0) translateX(0); }
    22% { transform: rotate(-8deg) translateX(-5px); }
    52% { transform: rotate(0) translateX(0); }
    80% { transform: rotate(8deg) translateX(5px); }
}

@keyframes spot-tilt {
    0%, 100% { transform: rotate(0) scale(1); }
    40% { transform: rotate(-6deg) scale(1.07); }
    72% { transform: rotate(5deg) scale(1.03); }
}

@keyframes spot-scratch {
    0%, 100% { transform: rotate(0) translate(0, 0); }
    12% { transform: rotate(-4deg) translate(-2px, -3px); }
    26% { transform: rotate(3deg) translate(2px, -1px); }
    40% { transform: rotate(-4deg) translate(-2px, -3px); }
    54% { transform: rotate(3deg) translate(2px, -1px); }
    68% { transform: rotate(-3deg) translate(-1px, -2px); }
    82% { transform: rotate(2deg) translate(1px, 0); }
}

.spot-panel-backdrop {
    display: none;
}

.spot-panel {
    position: absolute;
    right: 0;
    bottom: calc(68px + 0.4rem);
    display: flex;
    flex-direction: column;
    width: min(380px, calc(100vw - 2rem));
    height: min(560px, calc(100dvh - 7rem));
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    box-shadow: 0 24px 60px rgb(26 24 22 / 32%);
    overflow: hidden;
    transform-origin: bottom right;
    opacity: 0;
    transform: translateY(12px) scale(0.96);
    transition: opacity 200ms ease, transform 220ms cubic-bezier(0.34, 1.2, 0.64, 1);
}

.spot-widget.is-open .spot-panel {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.spot-panel-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1rem 1.05rem;
    background:
        radial-gradient(130% 150% at 88% -30%, rgb(154 140 123 / 65%) 0%, transparent 58%),
        linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-navy) 55%, var(--brand-navy-deep, #272422) 100%);
    color: #fff;
    overflow: hidden;
    border-bottom: 3px solid var(--brand-orange);
}

.spot-panel-glow {
    position: absolute;
    top: -60%;
    right: -20%;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgb(251 209 159 / 45%) 0%, transparent 65%);
    pointer-events: none;
    animation: spot-head-drift 7s ease-in-out infinite;
}

.spot-panel-avatar {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 32%, #fff 0%, var(--brand-sky-soft) 100%);
    border: 2px solid rgb(255 255 255 / 85%);
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 5px 14px rgb(26 24 22 / 35%);
    animation: spot-head-bob 3.2s ease-in-out infinite;
}

.spot-brand-face {
    width: 92%;
    height: 92%;
    object-fit: contain;
    object-position: center;
    display: block;
}

.spot-panel-heading {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.spot-panel-title {
    font-weight: 800;
    font-size: 1.02rem;
    letter-spacing: 0.01em;
}

.spot-panel-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: rgb(255 255 255 / 80%);
}

.spot-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3fd07a;
    box-shadow: 0 0 0 0 rgb(63 208 122 / 55%);
    animation: spot-status-pulse 2.4s ease-out infinite;
}

@keyframes spot-head-bob {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-3px) rotate(-3deg); }
}

@keyframes spot-head-drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-14px, 10px) scale(1.1); }
}

@keyframes spot-status-pulse {
    0% { box-shadow: 0 0 0 0 rgb(63 208 122 / 55%); }
    70% { box-shadow: 0 0 0 7px rgb(63 208 122 / 0%); }
    100% { box-shadow: 0 0 0 0 rgb(63 208 122 / 0%); }
}

.spot-panel-close,
.spot-panel-speak {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    background: rgb(255 255 255 / 12%);
    color: #fff;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}

.spot-panel-close:hover,
.spot-panel-speak:hover {
    background: rgb(255 255 255 / 24%);
}

.spot-panel-speak .spot-speak-waves {
    opacity: 0.35;
    transition: opacity 140ms ease;
}

.spot-panel-speak.is-active {
    background: rgb(255 255 255 / 26%);
    box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 65%);
}

.spot-panel-speak.is-active .spot-speak-waves {
    opacity: 1;
}

.spot-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    background: var(--color-background);
}

.spot-message {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    max-width: 100%;
    animation: spot-msg-in 300ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes spot-msg-in {
    from { opacity: 0; transform: translateY(7px); }
    to { opacity: 1; transform: translateY(0); }
}

.spot-message-user {
    justify-content: flex-end;
}

.spot-message-avatar {
    display: inline-flex;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

.spot-bubble {
    max-width: 78%;
    padding: 0.6rem 0.85rem;
    border-radius: 16px;
    font-size: 0.92rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.spot-message-bot .spot-bubble {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-bottom-left-radius: 5px;
    color: var(--color-text);
    box-shadow: var(--shadow-soft);
}

.spot-message-user .spot-bubble {
    background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-navy) 100%);
    color: #fff;
    border-bottom-right-radius: 5px;
    box-shadow: 0 4px 12px rgb(119 105 89 / 28%);
}

.spot-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.spot-suggestion {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.7rem;
    border-radius: var(--radius-pill);
    background: var(--brand-sky-soft);
    color: var(--brand-blue);
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid transparent;
    transition: border-color 140ms ease;
}

.spot-suggestion:hover {
    border-color: var(--brand-sky);
}

.spot-typing {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

.spot-typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-muted);
    animation: spot-typing 1.2s ease-in-out infinite;
}

.spot-typing span:nth-child(2) { animation-delay: 0.15s; }
.spot-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes spot-typing {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-4px); opacity: 1; }
}

.spot-input {
    display: flex;
    padding: 0.65rem 0.8rem 0.4rem;
    background: var(--color-surface);
}

.spot-input-shell {
    display: flex;
    align-items: flex-end;
    gap: 0.4rem;
    flex: 1;
    min-width: 0;
    padding: 0.32rem 0.32rem 0.32rem 0.95rem;
    border: 1.5px solid var(--color-border);
    border-radius: 24px;
    background: var(--color-background);
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.spot-input-shell:focus-within {
    border-color: var(--brand-sky);
    background: var(--color-surface);
    box-shadow: 0 0 0 4px var(--brand-sky-soft);
}

.spot-input-field {
    flex: 1;
    min-width: 0;
    resize: none;
    border: none;
    background: transparent;
    padding: 0.45rem 0;
    font: inherit;
    font-size: 0.94rem;
    line-height: 1.4;
    max-height: 120px;
    color: var(--color-text);
}

.spot-input-field:focus {
    outline: none;
    box-shadow: none;
}

.spot-input-field::placeholder {
    color: var(--color-muted);
}

.spot-input-mic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
    transition: color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.spot-input-mic:hover {
    color: var(--brand-blue);
    background: var(--brand-sky-soft);
}

.spot-input-mic:focus-visible {
    outline: 2px solid var(--brand-sky);
    outline-offset: 2px;
}

.spot-widget.is-listening .spot-input-mic {
    color: var(--on-orange);
    background: linear-gradient(135deg, var(--brand-orange) 0%, var(--brand-orange-dark) 100%);
    box-shadow: 0 0 0 0 rgb(194 82 0 / 45%);
    animation: spot-listening-pulse 1.4s ease-out infinite;
}

.spot-widget.is-listening .spot-input-shell {
    border-color: var(--brand-orange);
    box-shadow: 0 0 0 4px rgb(194 82 0 / 12%);
}

@keyframes spot-listening-pulse {
    0% { box-shadow: 0 0 0 0 rgb(194 82 0 / 45%); }
    70% { box-shadow: 0 0 0 9px rgb(194 82 0 / 0%); }
    100% { box-shadow: 0 0 0 0 rgb(194 82 0 / 0%); }
}

.spot-input-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-orange) 0%, var(--brand-orange-dark) 100%);
    color: var(--on-orange);
    cursor: pointer;
    box-shadow: 0 4px 12px rgb(194 82 0 / 32%);
    transition: transform 140ms ease, box-shadow 140ms ease;
}

.spot-input-send:hover {
    transform: translateY(-1px) scale(1.06);
    box-shadow: 0 6px 16px rgb(194 82 0 / 42%);
}

.spot-input-send:active {
    transform: scale(0.94);
}

.spot-input-send:focus-visible {
    outline: 2px solid var(--brand-sky);
    outline-offset: 2px;
}

.spot-disclaimer {
    margin: 0;
    padding: 0 0.9rem calc(0.6rem + env(safe-area-inset-bottom));
    background: var(--color-surface);
    font-size: 0.68rem;
    color: var(--color-muted);
    text-align: center;
}

body.has-sticky-buy-bar .spot-widget {
    bottom: var(--sticky-buy-bar-height, 64px);
    transition: bottom 220ms ease;
}

html.spot-chat-open,
body.spot-chat-open {
    overflow: hidden;
    overscroll-behavior: none;
}

@media (max-width: 520px) {
    .spot-widget {
        right: 0.6rem;
        bottom: env(safe-area-inset-bottom, 0px);
    }

    body.has-sticky-buy-bar .spot-widget {
        bottom: calc(var(--sticky-buy-bar-height, 64px) + env(safe-area-inset-bottom, 0px));
    }

    .spot-launcher {
        width: 118px;
        height: 44px;
    }

    .spot-launcher-head {
        width: 118px;
        margin-left: -59px;
        bottom: -9px;
    }

    .spot-launcher-glow {
        width: 100px;
    }

    .spot-speech {
        max-width: min(62vw, 230px);
        font-size: 0.8rem;
    }

    .spot-widget.is-open .spot-panel-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgb(26 24 22 / 45%);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        animation: spot-backdrop-in 220ms ease;
    }

    .spot-panel {
        position: fixed;
        right: 0;
        left: 0;
        bottom: var(--spot-keyboard, 0px);
        width: 100%;
        height: min(calc(100dvh - 3rem), calc(var(--spot-viewport, 100dvh) - 0.75rem));
        max-height: 100dvh;
        border-radius: var(--radius-large) var(--radius-large) 0 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-shadow: 0 -18px 48px rgb(26 24 22 / 38%);
    }

    .spot-panel-close {
        width: 40px;
        height: 40px;
        background: rgb(255 255 255 / 18%);
    }

    .spot-panel-head::before {
        content: "";
        position: absolute;
        top: 6px;
        left: 50%;
        width: 40px;
        height: 4px;
        transform: translateX(-50%);
        border-radius: 999px;
        background: rgb(255 255 255 / 45%);
    }

    .spot-panel-head {
        padding-top: 1.35rem;
    }

    .spot-input-field {
        font-size: 1rem;
    }

    .spot-bubble {
        max-width: 84%;
        font-size: 0.95rem;
    }

    .spot-restore-tab {
        font-size: 0.78rem;
        padding: 0.3rem 0.7rem 0.3rem 0.5rem;
    }
}

@media (max-width: 380px) {
    .spot-launcher {
        width: 104px;
        height: 40px;
    }

    .spot-launcher-head {
        width: 104px;
        margin-left: -52px;
        bottom: -8px;
    }

    .spot-speech {
        max-width: 58vw;
    }
}

@media (max-height: 480px) {
    .spot-panel {
        position: fixed;
        right: 0.5rem;
        left: auto;
        bottom: 0;
        width: min(420px, calc(100vw - 1rem));
        height: calc(100dvh - 0.75rem);
        border-radius: var(--radius-large) var(--radius-large) 0 0;
    }

    .spot-panel-head {
        padding: 0.55rem 0.85rem;
    }

    .spot-panel-avatar {
        width: 36px;
        height: 36px;
    }

    .spot-disclaimer {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .spot-dock,
    .spot-launcher-head,
    .spot-launcher-head.is-hop,
    .spot-launcher-head.is-lookaround,
    .spot-launcher-head.is-tilt,
    .spot-launcher-head.is-scratch,
    .spot-restore-tab,
    .spot-panel-avatar,
    .spot-panel-glow,
    .spot-status-dot,
    .spot-typing span,
    .spot-widget.is-listening .spot-input-mic,
    .spot-widget.is-open .spot-panel-backdrop,
    .spot-message {
        animation: none;
    }

    .spot-panel {
        transition: opacity 140ms ease;
    }
}

.admin-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin-inline: 0;
    margin-bottom: 0;
    padding: 0.9rem 1.1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
}

.admin-filter-bar input[type="search"],
.admin-filter-bar select {
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    font: inherit;
    font-size: 0.92rem;
    background: var(--color-surface);
    color: var(--color-text);
    min-width: 0;
}

.admin-filter-bar input[type="search"] {
    flex: 1 1 220px;
    max-width: 22rem;
}

.admin-filter-bar + .admin-table-wrap {
    margin-top: 1.1rem;
}

.admin-filter-check {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
}

.admin-catalogue-note {
    display: block;
    font-size: 0.8rem;
    margin-top: 0.2rem;
    max-width: 42ch;
    overflow-wrap: anywhere;
}

@media (max-width: 640px) {
    .admin-filter-bar input[type="search"],
    .admin-filter-bar select {
        flex: 1 1 100%;
    }
}

.admin-content select,
.admin-inline-form select {
    appearance: none;
    -webkit-appearance: none;
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background-color: var(--color-surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235f7085' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    color: var(--color-text);
    font: inherit;
    font-size: 0.9rem;
    line-height: 1.35;
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.admin-content select:hover,
.admin-inline-form select:hover {
    border-color: var(--brand-sky);
}

.admin-content select:focus,
.admin-content select:focus-visible,
.admin-inline-form select:focus,
.admin-inline-form select:focus-visible {
    outline: none;
    border-color: var(--brand-sky);
    box-shadow: var(--focus-ring);
}

.admin-content select:disabled {
    color: var(--color-muted);
    background-color: var(--color-background);
    cursor: not-allowed;
}

.about-team-grid {
    align-items: stretch;
}

.team-card {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.team-card .team-bio {
    width: 100%;
}

@media (min-width: 1100px) {
    .about-team-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    }
}

.admin-team-photo {
    display: inline-block;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-border);
    background: var(--color-background);
    vertical-align: middle;
}

@media (min-width: 700px) and (max-width: 1099px) {
    .about-team-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
        justify-content: center;
    }
}

.admin-card-grid {
    gap: 1.4rem;
}

.admin-form fieldset {
    margin: 1.25rem 0;
    padding: 1rem 1.25rem 1.25rem;
}

.admin-form fieldset legend {
    padding: 0 0.5rem;
}

.admin-form .actions {
    margin-top: 1.6rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--color-border);
}

.admin-form input[type="file"] {
    padding: 0.45rem 0.55rem;
    cursor: pointer;
}

.admin-form input[type="file"]::file-selector-button {
    margin-right: 0.8rem;
    padding: 0.45rem 1.1rem;
    border: 2px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--brand-navy);
    font: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 130ms ease, background-color 130ms ease;
}

.admin-form input[type="file"]::file-selector-button:hover {
    border-color: var(--brand-sky);
    background: var(--brand-sky-soft);
}

body.is-seasonal-theme {
    --spot-face-scale: 1.175;
    --spot-face-head-top: 0.517;
}

.empty-state img {
    height: auto;
}

.checkout-gift-options {
    margin: 0.2rem 0 1.2rem;
    padding: 1.1rem 1.2rem 1.2rem;
    border: 1px solid #ece9e1;
    border-radius: var(--radius);
    background:
        radial-gradient(360px 180px at 100% 0%, rgb(154 140 123 / 10%), transparent 65%),
        var(--color-surface);
    box-shadow: 0 6px 18px rgb(63 57 52 / 7%);
}

.checkout-gift-heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.25rem;
    color: var(--brand-navy);
    font-size: 1.02rem;
    font-weight: 800;
}

.checkout-gift-heading svg {
    flex: 0 0 auto;
    color: var(--brand-orange);
}

.checkout-gift-intro {
    margin: 0 0 0.9rem;
    color: var(--color-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.checkout-gift-options label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 700;
    color: var(--brand-navy);
}

.checkout-gift-options textarea,
.checkout-gift-options input[type="date"] {
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.checkout-gift-options textarea {
    min-height: 5.4rem;
    resize: vertical;
    line-height: 1.5;
}

.checkout-gift-options textarea:hover,
.checkout-gift-options input[type="date"]:hover {
    border-color: var(--brand-sky);
}

.checkout-gift-options textarea:focus,
.checkout-gift-options input[type="date"]:focus {
    outline: none;
    border-color: var(--brand-sky);
    box-shadow: var(--focus-ring);
}

.checkout-gift-field + .checkout-gift-field {
    margin-top: 1.1rem;
}

.checkout-gift-options .checkout-input-hint {
    margin-top: 0.35rem;
}

.checkout-gift-animation-optin {
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px dashed #ece9e1;
}

.checkout-gift-animation {
    margin-top: 0.9rem;
    padding: 1rem 1.1rem 1.2rem;
    border: 1px solid #ece9e1;
    border-radius: var(--radius-small);
    background: var(--color-surface-alt, #fbfbf9);
}

.checkout-gift-animation-intro {
    margin: 0 0 0.9rem;
    color: var(--color-muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

.checkout-gift-animation input[type="text"],
.checkout-gift-animation input[type="email"] {
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.checkout-gift-animation input[type="text"]:focus,
.checkout-gift-animation input[type="email"]:focus {
    outline: none;
    border-color: var(--brand-sky);
    box-shadow: var(--focus-ring);
}

.checkout-gift-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 0.9rem;
}

.gift-picker {
    margin: 1.1rem 0 0;
    padding: 0;
    border: 0;
}

.gift-picker legend {
    margin-bottom: 0.5rem;
    font-weight: 700;
    color: var(--brand-navy);
}

.gift-wrap-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.gift-wrap-choice {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-muted);
}

.gift-wrap-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.gift-wrap-swatch {
    display: block;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    border: 2px solid transparent;
    box-shadow: 0 3px 10px rgb(63 57 52 / 14%);
    transition: transform 130ms ease, border-color 130ms ease;
}

.gift-wrap-choice input:checked + .gift-wrap-swatch {
    border-color: var(--brand-orange);
    transform: scale(1.06);
}

.gift-wrap-choice input:focus-visible + .gift-wrap-swatch {
    box-shadow: var(--focus-ring);
}

.gift-pattern-solid .gift-box-base,
.gift-pattern-solid .gift-box-lid,
.gift-swatch-pattern-solid {
    background: linear-gradient(135deg, var(--gift-wrap-a, #3f322f), var(--gift-wrap-b, #ae5e04));
}

.gift-pattern-stripes .gift-box-base,
.gift-pattern-stripes .gift-box-lid,
.gift-swatch-pattern-stripes {
    background: repeating-linear-gradient(45deg, var(--gift-wrap-a, #b8530b) 0 12px, var(--gift-wrap-b, #f28306) 12px 24px);
}

.gift-pattern-diagonal .gift-box-base,
.gift-pattern-diagonal .gift-box-lid,
.gift-swatch-pattern-diagonal {
    background: repeating-linear-gradient(-60deg, var(--gift-wrap-b, #f28306) 0 7px, var(--gift-wrap-a, #b8530b) 7px 26px);
}

.gift-pattern-dots .gift-box-base,
.gift-pattern-dots .gift-box-lid,
.gift-swatch-pattern-dots {
    background: radial-gradient(circle at 8px 8px, rgb(255 255 255 / 55%) 3px, transparent 4px) 0 0 / 24px 24px, linear-gradient(135deg, var(--gift-wrap-a, #ae5e04), var(--gift-wrap-b, #f28306));
}

.gift-pattern-stars .gift-box-base,
.gift-pattern-stars .gift-box-lid,
.gift-swatch-pattern-stars {
    background:
        radial-gradient(circle at 5px 7px, rgb(255 255 255 / 92%) 1.6px, transparent 2.6px) 0 0 / 26px 26px,
        radial-gradient(circle at 18px 20px, rgb(255 255 255 / 55%) 2.6px, transparent 3.8px) 0 0 / 26px 26px,
        radial-gradient(circle at 12px 14px, rgb(255 255 255 / 35%) 1.1px, transparent 2px) 13px 5px / 26px 26px,
        linear-gradient(135deg, var(--gift-wrap-a, #12a150), var(--gift-wrap-b, #2f9d68));
}

.gift-pattern-sparkle .gift-box-base,
.gift-pattern-sparkle .gift-box-lid,
.gift-swatch-pattern-sparkle {
    background:
        radial-gradient(circle at 6px 6px, rgb(255 255 255 / 95%) 1px, transparent 1.9px) 0 0 / 18px 18px,
        radial-gradient(circle at 14px 12px, rgb(255 255 255 / 70%) 1.4px, transparent 2.4px) 0 0 / 22px 22px,
        radial-gradient(circle at 3px 16px, rgb(255 255 255 / 45%) 0.9px, transparent 1.7px) 4px 2px / 20px 20px,
        linear-gradient(120deg, var(--gift-wrap-a, #4b2a82), var(--gift-wrap-b, #7a4bc8));
}

.gift-pattern-zigzag .gift-box-base,
.gift-pattern-zigzag .gift-box-lid,
.gift-swatch-pattern-zigzag {
    background:
        repeating-linear-gradient(135deg, var(--gift-wrap-b, #f28306) 0 9px, transparent 9px 18px),
        repeating-linear-gradient(45deg, var(--gift-wrap-b, #f28306) 0 9px, var(--gift-wrap-a, #b8530b) 9px 18px);
}

.gift-pattern-hearts .gift-box-base,
.gift-pattern-hearts .gift-box-lid,
.gift-swatch-pattern-hearts {
    background:
        radial-gradient(circle at 7px 7px, var(--gift-wrap-b, #f3a7c3) 2.6px, transparent 3.4px) 0 0 / 22px 22px,
        radial-gradient(circle at 13px 7px, var(--gift-wrap-b, #f3a7c3) 2.6px, transparent 3.4px) 0 0 / 22px 22px,
        conic-gradient(from 135deg at 10px 12.4px, var(--gift-wrap-b, #f3a7c3) 0 90deg, transparent 90deg) 0 0 / 22px 22px,
        linear-gradient(135deg, var(--gift-wrap-a, #b03a5c), var(--gift-wrap-a, #b03a5c));
}

.gift-theme-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.gift-theme-choice {
    cursor: pointer;
}

.gift-theme-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.gift-theme-choice span {
    display: inline-block;
    padding: 0.42rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--brand-navy);
    transition: background-color 130ms ease, border-color 130ms ease, color 130ms ease;
}

.gift-theme-choice input:checked + span {
    background: var(--brand-navy);
    border-color: var(--brand-navy);
    color: #fff;
}

.gift-theme-choice input:focus-visible + span {
    box-shadow: var(--focus-ring);
}

.gift-suggestions {
    margin-top: 1.4rem;
}

.gift-suggestions-label {
    margin: 0 0 0.45rem;
    font-weight: 700;
    color: var(--brand-navy);
    font-size: 0.88rem;
}

.gift-suggestion-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.gift-suggestion {
    padding: 0.4rem 0.75rem;
    border: 1px dashed var(--brand-sky);
    border-radius: 999px;
    background: rgb(154 140 123 / 8%);
    color: var(--brand-navy);
    font-size: 0.82rem;
    cursor: pointer;
    transition: background-color 130ms ease, border-color 130ms ease;
}

.gift-suggestion:hover,
.gift-suggestion:focus-visible {
    background: rgb(154 140 123 / 18%);
    border-style: solid;
}

.gift-designer {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 1.6rem;
    align-items: flex-start;
    margin-top: 1.1rem;
    padding: 1.25rem 1.3rem;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-surface);
}

.gift-designer-pickers {
    flex: 1 1 300px;
    min-width: 0;
}

.gift-mini-preview {
    flex: 0 1 240px;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.85rem 1rem;
    border: 1px solid #ece9e1;
    border-radius: 14px;
    background: linear-gradient(160deg, var(--brand-sky-soft, #f8f6f2), #fbfbf9);
    min-width: 200px;
}

.gift-mini-box {
    position: relative;
    display: block;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgb(63 57 52 / 18%);
    flex-shrink: 0;
}

.gift-mini-ribbon {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background:
        linear-gradient(to right, transparent calc(50% - 4px), rgb(255 255 255 / 85%) calc(50% - 4px) calc(50% + 4px), transparent calc(50% + 4px)),
        linear-gradient(to bottom, transparent calc(50% - 4px), rgb(255 255 255 / 85%) calc(50% - 4px) calc(50% + 4px), transparent calc(50% + 4px));
}

.gift-mini-meta {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.gift-mini-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--gift-accent, var(--brand-navy));
    color: #fff;
}

.gift-mini-badge svg {
    width: 18px;
    height: 18px;
}

.gift-mini-title {
    font-weight: 700;
    color: var(--brand-navy);
    font-size: 0.92rem;
}

.gift-mini-note {
    font-size: 0.75rem;
    color: var(--color-muted);
}

.gift-ai-suggest {
    margin-top: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

.gift-ai-suggest-button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.gift-ai-suggest-button.is-loading {
    opacity: 0.6;
    cursor: progress;
}

.gift-ai-suggest-button.is-loading svg {
    animation: gift-ai-spin 900ms linear infinite;
}

@keyframes gift-ai-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .gift-ai-suggest-button.is-loading svg {
        animation: none;
    }
}

.gift-ai-note {
    font-size: 0.78rem;
    color: var(--color-muted);
}

.gift-ai-results {
    width: 100%;
    margin-top: 0.4rem;
}

.gift-suggestion-ai {
    border-color: var(--brand-orange);
    background: rgb(224 106 16 / 8%);
}

.gift-suggestion-ai:hover,
.gift-suggestion-ai:focus-visible {
    background: rgb(224 106 16 / 16%);
}

.gift-preview-button {
    margin-top: 1.4rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.gift-preview-inline {
    margin-top: 1.25rem;
    padding: clamp(0.9rem, 2.5vw, 1.2rem);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    background: var(--color-surface);
    box-shadow: 0 10px 28px rgb(63 57 52 / 10%);
    animation: gift-preview-in 240ms cubic-bezier(0.34, 1.3, 0.5, 1);
}

.gift-preview-inline[hidden] {
    display: none;
}

@keyframes gift-preview-in {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.99);
    }
}

@media (prefers-reduced-motion: reduce) {
    .gift-preview-inline {
        animation: none;
    }
}

.gift-preview-inline-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.8rem;
}

.gift-preview-inline-head h3 {
    margin: 0;
    color: var(--brand-navy);
    font-size: 1.05rem;
}

.gift-preview-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: #f6f5f1;
    color: var(--brand-navy);
    cursor: pointer;
}

.gift-preview-close:hover {
    background: #eeebe5;
}

.gift-preview-note {
    margin: 0.9rem 0 0;
    color: var(--color-muted);
    font-size: 0.82rem;
}

.order-gift-share {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-top: 2.4rem;
    padding: 1rem 1.2rem;
    border: 1px solid #ece9e1;
    border-radius: var(--radius);
    background:
        radial-gradient(320px 160px at 100% 0%, rgb(194 82 0 / 8%), transparent 65%),
        var(--color-surface);
}

.order-gift-share-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 13px;
    background: linear-gradient(135deg, #46413c, #ae5e04);
    color: #fff;
    box-shadow: 0 4px 10px rgb(63 57 52 / 20%), inset 0 1px 0 rgb(255 255 255 / 18%);
}

.order-gift-share-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.order-gift-share-body strong {
    color: var(--brand-navy);
}

.order-gift-share-body span {
    color: var(--color-muted);
    font-size: 0.88rem;
}

.order-gift-share-style {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

.order-gift-share-swatch {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    box-shadow: 0 2px 6px rgb(63 57 52 / 18%);
    flex-shrink: 0;
}

.order-gift-share-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--gift-accent, var(--brand-navy));
    color: #fff;
    flex-shrink: 0;
}

.order-gift-share-badge svg {
    width: 14px;
    height: 14px;
}

@media (max-width: 640px) {
    .order-gift-share {
        flex-wrap: wrap;
    }
}

.gift-page {
    padding: clamp(1.5rem, 4vw, 3rem) 0 3rem;
}

.gift-page-footer {
    margin-top: 1.6rem;
    text-align: center;
}

.gift-page-note {
    margin: 0 0 1rem;
    color: var(--color-muted);
}

.gift-scene {
    position: relative;
    max-width: 560px;
    margin: 0 auto;
    border-radius: var(--radius);
    background:
        radial-gradient(420px 240px at 50% 0%, rgb(154 140 123 / 14%), transparent 70%),
        linear-gradient(180deg, #faf9f6, #f4f3ee);
    border: 1px solid #eeebe5;
    overflow: hidden;
}

.gift-stage {
    position: relative;
    min-height: clamp(340px, 60vw, 420px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1.4rem, 4vw, 2rem) clamp(1rem, 3vw, 1.4rem);
    overflow: hidden;
}

.gift-stage::before,
.gift-stage::after {
    content: '';
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
}

.gift-stage::before {
    top: -70px;
    left: -60px;
    background: rgb(154 140 123 / 25%);
}

.gift-stage::after {
    right: -70px;
    bottom: -80px;
    background: rgb(194 82 0 / 16%);
}

.gift-box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transition: transform 200ms ease;
    z-index: 3;
    animation: gift-box-idle 4.5s ease-in-out infinite;
}

@keyframes gift-box-idle {
    0%, 86%, 100% { transform: rotate(0deg); }
    89% { transform: rotate(-2.2deg); }
    92% { transform: rotate(2.2deg); }
    95% { transform: rotate(-1.2deg); }
    98% { transform: rotate(0.8deg); }
}

.gift-box:hover {
    transform: translateY(-4px) scale(1.02);
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .gift-box {
        animation: none;
    }
}

.gift-box-lid {
    position: relative;
    display: block;
    width: 176px;
    height: 44px;
    border-radius: 8px;
    box-shadow: 0 6px 16px rgb(63 57 52 / 20%);
    z-index: 2;
    transition: transform 600ms cubic-bezier(0.34, 1.3, 0.5, 1), opacity 500ms ease;
}

.gift-bow {
    position: absolute;
    top: -22px;
    left: 50%;
    width: 44px;
    height: 26px;
    transform: translateX(-50%);
}

.gift-bow::before,
.gift-bow::after {
    content: '';
    position: absolute;
    top: 0;
    width: 20px;
    height: 24px;
    border-radius: 50% 50% 6px 6px;
    background: var(--brand-orange);
    box-shadow: inset 0 -4px 0 rgb(0 0 0 / 14%);
}

.gift-bow::before {
    left: 0;
    transform: rotate(-24deg);
}

.gift-bow::after {
    right: 0;
    transform: rotate(24deg);
}

.gift-box-base {
    position: relative;
    display: block;
    width: 152px;
    height: 128px;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 16px 30px rgb(63 57 52 / 22%);
    transition: transform 500ms ease;
}

.gift-ribbon {
    position: absolute;
    inset: 0 auto 0 50%;
    width: 22px;
    transform: translateX(-50%);
    background: rgb(255 255 255 / 30%);
}

.gift-box-hint {
    margin-top: 1.1rem;
    display: inline-block;
    padding: 0.45rem 1.1rem;
    border-radius: 999px;
    background: var(--brand-orange);
    color: var(--on-orange);
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: 0 6px 16px rgb(194 82 0 / 30%);
    animation: gift-hint-pulse 2s ease-in-out infinite;
}

@keyframes gift-hint-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

.gift-scene.is-open .gift-box {
    pointer-events: none;
}

.gift-scene.is-open .gift-box-lid {
    transform: translateY(-190px) rotate(-14deg);
    opacity: 0;
}

.gift-scene.is-open .gift-box-base {
    transform: translateY(130px) scale(0.62);
    opacity: 0.4;
    transition: transform 500ms ease, opacity 500ms ease;
}

.gift-scene.is-open .gift-box-hint {
    opacity: 0;
    transition: opacity 250ms ease;
    animation: none;
}

.gift-reveal-card {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: clamp(1.4rem, 4vw, 2rem) clamp(1rem, 4vw, 1.6rem) 3.4rem;
    text-align: center;
    opacity: 0;
    transform: translateY(36px) scale(0.94);
    filter: blur(4px);
    pointer-events: none;
    z-index: 4;
    transition: opacity 500ms ease 350ms, transform 600ms cubic-bezier(0.34, 1.3, 0.5, 1) 350ms, filter 500ms ease 350ms;
}

.gift-scene.is-open .gift-reveal-card {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
    .gift-reveal-card {
        filter: none;
        transition: opacity 300ms ease;
        transform: none;
    }
}

.gift-theme-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--gift-accent, var(--brand-navy));
    color: #fff;
    box-shadow: 0 8px 20px rgb(63 57 52 / 25%);
}

.gift-theme-badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.gift-theme-badge-icon[hidden] {
    display: none;
}

.gift-scene .gift-reveal-title {
    position: relative;
    margin: 0.2rem 0 0;
    color: var(--brand-navy);
    font-size: clamp(1.4rem, 4vw, 1.8rem);
}

.gift-reveal-recipient {
    margin: 0;
    font-weight: 700;
    color: var(--brand-navy);
}

.gift-reveal-message {
    margin: 0.3rem 0 0;
    padding: 0.8rem 1rem;
    max-width: 40ch;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #f0eee8;
    color: var(--color-text);
    font-style: italic;
    line-height: 1.5;
    box-shadow: 0 6px 14px rgb(63 57 52 / 8%);
}

.gift-reveal-sender {
    margin: 0.2rem 0 0;
    color: var(--color-muted);
    font-size: 0.9rem;
}

.gift-reveal-spot {
    position: absolute;
    right: 14px;
    bottom: 10px;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 400ms ease 800ms, transform 500ms ease 800ms;
}

.gift-scene.is-open .gift-reveal-spot {
    opacity: 1;
    transform: translateY(0);
}

.gift-confetti {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
}

.confetti-piece {
    position: absolute;
    top: -14px;
    width: 9px;
    height: 14px;
    border-radius: 2px;
    opacity: 0;
}

.gift-scene.is-open .confetti-piece {
    animation-name: gift-confetti-fall;
    animation-duration: 2.4s;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}

@keyframes gift-confetti-fall {
    0% { opacity: 0; transform: translateY(0) rotate(0deg); }
    8% { opacity: 1; }
    100% { opacity: 0; transform: translateY(420px) rotate(540deg); }
}

.confetti-1 { left: 6%; background: #b8530b; animation-delay: 350ms; }
.confetti-2 { left: 14%; background: #3f322f; animation-delay: 520ms; }
.confetti-3 { left: 22%; background: #f28306; animation-delay: 430ms; }
.confetti-4 { left: 30%; background: #12a150; animation-delay: 640ms; }
.confetti-5 { left: 38%; background: #b03a8c; animation-delay: 380ms; }
.confetti-6 { left: 46%; background: #b8530b; animation-delay: 560ms; }
.confetti-7 { left: 54%; background: #f28306; animation-delay: 470ms; }
.confetti-8 { left: 62%; background: #3f322f; animation-delay: 690ms; }
.confetti-9 { left: 70%; background: #12a150; animation-delay: 410ms; }
.confetti-10 { left: 78%; background: #b03a8c; animation-delay: 600ms; }
.confetti-11 { left: 86%; background: #b8530b; animation-delay: 500ms; }
.confetti-12 { left: 92%; background: #f28306; animation-delay: 720ms; }
.confetti-13 { left: 50%; background: #e0a13d; animation-delay: 540ms; }
.confetti-14 { left: 10%; background: #e0a13d; animation-delay: 660ms; }

@media (prefers-reduced-motion: reduce) {
    .gift-box-hint {
        animation: none;
    }

    .gift-box-lid,
    .gift-box-base,
    .gift-reveal-card,
    .gift-reveal-spot {
        transition: none;
    }

    .gift-scene.is-open .confetti-piece {
        animation: none;
    }
}

.payment-demo-page {
    display: flex;
    justify-content: center;
}

.payment-demo-card {
    width: 100%;
    max-width: 34rem;
    padding: clamp(1.6rem, 4vw, 2.4rem);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-card);
    text-align: center;
}

.payment-demo-badge {
    display: inline-block;
    margin-bottom: 0.8rem;
    padding: 0.2rem 0.7rem;
    border-radius: var(--radius-pill);
    background: var(--brand-cream);
    color: var(--brand-orange-dark);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.payment-demo-card h1 {
    margin: 0 0 0.5rem;
    color: var(--brand-navy);
}

.payment-demo-intro {
    margin: 0 0 1.3rem;
    color: var(--color-muted);
    line-height: 1.6;
}

.payment-demo-summary {
    display: grid;
    gap: 0.55rem;
    margin: 0 0 1.4rem;
    padding: 1rem 1.1rem;
    border-radius: var(--radius);
    background: var(--color-background);
    text-align: left;
}

.payment-demo-summary > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.payment-demo-summary dt {
    color: var(--color-muted);
    font-weight: 600;
}

.payment-demo-summary dd {
    margin: 0;
    font-weight: 700;
    color: var(--brand-navy);
}

.payment-demo-amount {
    font-size: 1.15rem;
    color: var(--brand-blue) !important;
}

.payment-demo-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.7rem;
}

.payment-demo-actions form {
    margin: 0;
}

.payment-demo-fail {
    border-color: var(--color-danger);
    color: var(--color-danger);
}

.payment-demo-note {
    margin: 1rem 0 0;
    color: var(--color-muted);
    font-size: 0.88rem;
}

.spot-input-call {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
    transition: color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.spot-input-call:hover {
    color: var(--color-success);
    background: var(--color-success-bg);
}

.spot-input-call:focus-visible {
    outline: 2px solid var(--brand-sky);
    outline-offset: 2px;
}

.spot-input-call.is-active {
    color: #fff;
    background: var(--color-success);
    box-shadow: 0 0 0 4px rgb(29 131 72 / 22%);
}

.spot-input-call.is-error {
    color: var(--color-danger);
    background: var(--color-error-bg);
}

.spot-widget.is-connecting .spot-input-call {
    color: var(--brand-orange);
    background: var(--brand-cream);
    animation: spot-call-pulse 1.1s ease-in-out infinite;
}

.spot-widget.is-calling .spot-panel-subtitle .spot-status-dot {
    background: var(--color-success);
    box-shadow: 0 0 0 4px rgb(29 131 72 / 20%);
}

@keyframes spot-call-pulse {
    50% {
        transform: scale(0.9);
    }
}

@media (prefers-reduced-motion: reduce) {
    .spot-widget.is-connecting .spot-input-call {
        animation: none;
    }
}

.order-result {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin: 0 0 1.6rem;
    padding: 1.2rem 1.35rem;
    border-radius: var(--radius-large);
    border: 1px solid transparent;
}

.order-result-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 50%;
    background: #fff;
}

.order-result-body h2 {
    margin: 0 0 0.3rem;
    font-size: 1.22rem;
}

.order-result-body p {
    margin: 0;
    line-height: 1.6;
}

.order-result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.9rem;
}

.order-result-paid {
    background: linear-gradient(120deg, #eefaf1, #e3f5ea);
    border-color: #bfe3ca;
}

.order-result-paid .order-result-icon {
    color: var(--color-success);
}

.order-result-paid h2 {
    color: #14663a;
}

.order-result-pending {
    background: linear-gradient(120deg, #fff7e8, #fdf1da);
    border-color: #f0dcb4;
}

.order-result-pending .order-result-icon {
    color: var(--brand-orange-dark);
}

.order-result-pending h2 {
    color: var(--brand-orange-dark);
}

.order-result-failed {
    background: linear-gradient(120deg, #fdeeee, #fbe4e4);
    border-color: #f0c4c4;
}

.order-result-failed .order-result-icon {
    color: var(--color-danger);
}

.order-result-failed h2 {
    color: #8f2020;
}

.order-result-review {
    background: linear-gradient(120deg, #f8f6f2, #f3f1eb);
    border-color: #e2ddd0;
}

.order-result-review .order-result-icon {
    color: var(--brand-blue);
}

.order-result-review h2 {
    color: var(--brand-navy);
}

.order-next {
    margin: 0 0 1.6rem;
    padding: 1.35rem 1.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-card);
}

.order-next-heading {
    margin: 0 0 1rem;
    font-size: 1.12rem;
    color: var(--brand-navy);
}

.order-next-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.9rem;
}

.order-next-step {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
}

.order-next-step-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    background: var(--color-background);
    border: 2px solid var(--color-border);
    color: var(--color-muted);
    font-size: 0.85rem;
    font-weight: 800;
}

.order-next-step.is-done .order-next-step-marker {
    background: var(--color-success-bg);
    border-color: var(--color-success);
    color: var(--color-success);
}

.order-next-step.is-current .order-next-step-marker {
    background: var(--brand-sky-soft);
    border-color: var(--brand-blue);
    color: var(--brand-blue);
}

.order-next-step-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.order-next-step-body strong {
    color: var(--brand-navy);
    font-size: 0.98rem;
}

.order-next-step-body span {
    color: var(--color-muted);
    font-size: 0.92rem;
    line-height: 1.55;
}

.order-video {
    margin-top: 1.8rem;
    max-width: 640px;
}

.order-video-heading {
    margin: 0 0 0.35rem;
    font-size: 1.12rem;
    color: var(--brand-navy);
}

.order-video-intro {
    margin: 0 0 0.9rem;
    color: var(--color-muted);
    line-height: 1.6;
}

.order-fun {
    margin-top: 1.8rem;
    max-width: 640px;
    padding: 1.1rem 1.2rem 1.3rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.order-fun-heading {
    margin: 0 0 0.35rem;
    font-size: 1.12rem;
    color: var(--brand-navy);
}

.order-fun-intro {
    margin: 0 0 1rem;
    color: var(--color-muted);
    line-height: 1.6;
}

.order-fun-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
    gap: 0.85rem;
}

.order-fun-card {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.8rem 0.9rem;
    border: 2px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-surface);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.order-fun-card:hover {
    border-color: var(--brand-sky);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgb(63 57 52 / 12%);
}

.order-fun-card:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.order-fun-card.is-active {
    border-color: var(--brand-orange);
    background: rgb(255 102 0 / 6%);
}

.order-fun-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    flex-shrink: 0;
    color: #fff;
    box-shadow: 0 4px 10px rgb(63 57 52 / 16%), inset 0 1px 0 rgb(255 255 255 / 20%);
}

.order-fun-card-icon-video {
    background: linear-gradient(135deg, #46413c, #ae5e04);
}

.order-fun-card-icon-coin {
    background: linear-gradient(135deg, #e8a20c, #c17d08);
}

.order-fun-card-icon-run {
    background: linear-gradient(135deg, #2c9a63, #12a150);
}

.order-fun-card-icon-blast {
    background: linear-gradient(135deg, #f0862a, #cf5f0d);
}

.order-fun-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.order-fun-card-body strong {
    color: var(--brand-navy);
    font-size: 0.95rem;
}

.order-fun-card-body span {
    color: var(--color-muted);
    font-size: 0.8rem;
}

.order-fun-panel {
    margin-top: 1.4rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-border);
}

.game-page-head {
    max-width: 640px;
    margin-bottom: 1.4rem;
}

.game-page-head h1 {
    margin: 0 0 0.4rem;
}

.game-page-sub {
    margin: 0;
    color: var(--color-muted);
}

.game-page-stage {
    max-width: 720px;
    padding: 1.4rem 1.5rem 1.6rem;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: var(--color-surface, #fff);
    box-shadow: 0 12px 30px rgba(42, 39, 37, 0.07);
}

.game-page-others {
    margin-top: 2.2rem;
    max-width: 720px;
}

@media (max-width: 640px) {
    .game-page-stage {
        padding: 0.9rem 0.5rem 1rem;
    }

    .order-game-hud {
        font-size: 0.78rem;
        gap: 0.35rem 0.6rem;
    }

    .order-game-touch-button {
        min-width: 4.5rem;
        min-height: 2.9rem;
    }
}

.game-page-others-title {
    margin: 0 0 0.7rem;
    font-weight: 700;
    color: var(--brand-navy);
}

.game-page-others-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 0.9rem;
}

.game-page-other {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.game-page-other:hover {
    border-color: var(--brand-navy);
    box-shadow: 0 6px 16px rgba(42, 39, 37, 0.09);
}

.game-page-other strong {
    color: var(--brand-navy);
}

.game-page-other span {
    font-size: 0.88rem;
    color: var(--color-muted);
}

.order-fun-panel[hidden] {
    display: none;
}

.order-fun-panel .order-video,
.order-fun-panel .order-game {
    margin-top: 0;
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.order-game {
    margin-top: 1.8rem;
    max-width: 640px;
    padding: 1.1rem 1.2rem 1.3rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

@media (max-width: 640px) {
    .order-game {
        padding: 0.8rem 0.5rem 0.9rem;
    }
}

.order-game-heading {
    margin: 0 0 0.35rem;
    font-size: 1.12rem;
    color: var(--brand-navy);
}

.order-game-lives {
    color: #d64545;
    font-size: 1rem;
    letter-spacing: 0.1em;
}

.order-game-canvas.order-game-canvas-run {
    aspect-ratio: 480 / 270;
}

.order-game-canvas.order-game-canvas-blast {
    aspect-ratio: 480 / 300;
}

.order-game-intro {
    margin: 0 0 0.9rem;
    color: var(--color-muted);
    line-height: 1.6;
}

.order-game-best {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0 0 0.7rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: rgb(224 106 16 / 10%);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--brand-navy);
}

.order-game-best svg {
    color: var(--brand-orange);
}

.order-game-record-notice {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.7rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    background: rgb(232 162 12 / 14%);
    color: #8a6210;
    font-weight: 700;
    font-size: 0.9rem;
}

.order-game-name-form {
    margin: 0 0 0.9rem;
}

.order-game-name-form label {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--brand-navy);
}

.order-game-name-row {
    display: flex;
    gap: 0.5rem;
}

.order-game-name-row input {
    flex: 1;
    min-width: 0;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: 10px;
}

.order-game-start {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.order-game-hud {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.6rem;
    font-size: 0.92rem;
    color: var(--color-muted);
}

.order-game-hud strong {
    color: var(--brand-navy);
}

.order-game-fullscreen,
.order-game-sound {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: #fff;
    color: var(--brand-navy);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.order-game-fullscreen:hover,
.order-game-sound:hover {
    background: var(--brand-navy);
    color: #fff;
}

.order-game-sound .order-game-sound-off {
    display: none;
}

.order-game-sound[data-muted='1'] .order-game-sound-on {
    display: none;
}

.order-game-sound[data-muted='1'] .order-game-sound-off {
    display: inline;
}

.order-game-sound[data-muted='1'] {
    color: var(--color-muted);
}

.order-game-stage:fullscreen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    padding: 1.6rem;
    background: linear-gradient(180deg, #2a2826, #1d1b1a);
}

.order-game-stage:fullscreen .order-game-hud {
    width: min(96vw, 1100px);
    color: #edeae3;
}

.order-game-stage:fullscreen .order-game-hud strong {
    color: #ffd166;
}

.order-game-stage:fullscreen .order-game-fullscreen {
    background: rgb(255 255 255 / 12%);
    border-color: rgb(255 255 255 / 30%);
    color: #fff;
}

.order-game-stage:fullscreen .order-game-canvas {
    width: auto;
    max-width: 96vw;
    max-height: 74vh;
    background: #fff;
}

.order-game-stage:fullscreen .order-game-canvas.order-game-canvas-run {
    height: min(74vh, calc(96vw * 270 / 480));
}

.order-game-stage:fullscreen .order-game-canvas.order-game-canvas-blast {
    height: min(74vh, calc(96vw * 300 / 480));
}

.order-game-stage:fullscreen .order-game-canvas:not(.order-game-canvas-run):not(.order-game-canvas-blast) {
    height: min(74vh, calc(96vw * 430 / 340));
}

.order-game-stage:fullscreen .order-game-help {
    color: #beb9b0;
}

.order-game-stage:fullscreen .order-game-touch-button {
    background: rgb(255 255 255 / 12%);
    border-color: rgb(255 255 255 / 30%);
    color: #fff;
}

html.spot-fullscreen-lock,
html.spot-fullscreen-lock body {
    overflow: hidden;
}

.order-game-stage.is-pseudo-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
    margin: 0;
    overflow: auto;
    background: linear-gradient(180deg, #2a2826, #1d1b1a);
}

.order-game-stage.is-pseudo-fullscreen .order-game-hud {
    width: min(96vw, 1100px);
    color: #edeae3;
}

.order-game-stage.is-pseudo-fullscreen .order-game-hud strong {
    color: #ffd166;
}

.order-game-stage.is-pseudo-fullscreen .order-game-fullscreen,
.order-game-stage.is-pseudo-fullscreen .order-game-touch-button {
    background: rgb(255 255 255 / 12%);
    border-color: rgb(255 255 255 / 30%);
    color: #fff;
}

.order-game-stage.is-pseudo-fullscreen .order-game-canvas {
    width: auto;
    max-width: 96vw;
    max-height: 68vh;
    background: #fff;
}

.order-game-stage.is-pseudo-fullscreen .order-game-canvas.order-game-canvas-run {
    height: min(68vh, calc(96vw * 270 / 480));
}

.order-game-stage.is-pseudo-fullscreen .order-game-canvas.order-game-canvas-blast {
    height: min(68vh, calc(96vw * 300 / 480));
}

.order-game-stage.is-pseudo-fullscreen .order-game-canvas:not(.order-game-canvas-run):not(.order-game-canvas-blast) {
    height: min(68vh, calc(96vw * 430 / 340));
}

.order-game-stage.is-pseudo-fullscreen .order-game-help {
    color: #beb9b0;
}

.order-game-canvas {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 340 / 430;
    border-radius: 14px;
    border: 1px solid var(--color-border);
    touch-action: none;
    cursor: pointer;
}

.order-game-help {
    margin: 0.6rem 0 0;
    font-size: 0.8rem;
    color: var(--color-muted);
}

.order-game-result {
    margin-top: 0.6rem;
}

.order-game-board {
    margin-top: 1.4rem;
    padding: 0.9rem 1rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: linear-gradient(160deg, var(--brand-sky-soft, #f8f6f2), #fcfcfa);
}

.order-game-board[hidden] {
    display: none;
}

.order-game-board-title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.6rem;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--brand-navy);
}

.order-game-board-title svg {
    color: var(--brand-orange);
}

.order-game-board-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.order-game-board-list li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.6rem;
    border-radius: 10px;
    background: var(--color-surface);
    border: 1px solid rgb(63 57 52 / 8%);
}

.order-game-board-list li:first-child {
    border-color: rgb(224 106 16 / 45%);
    background: rgb(255 102 0 / 5%);
}

.order-game-board-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--brand-navy);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.order-game-board-list li:first-child .order-game-board-rank {
    background: var(--brand-orange);
}

.order-game-board-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: var(--brand-navy);
    font-size: 0.88rem;
}

.order-game-board-meta {
    color: var(--color-muted);
    font-size: 0.75rem;
}

.order-game-board-score {
    color: var(--brand-navy);
    font-size: 0.92rem;
}

.order-game-result-line {
    margin: 0 0 0.8rem;
    font-size: 1rem;
    color: var(--brand-navy);
}

.order-game-server-rank {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.8rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    background: rgb(63 57 52 / 8%);
    color: var(--brand-navy);
    font-weight: 700;
    font-size: 0.88rem;
}

.order-game-server-rank[hidden] {
    display: none;
}

.order-game-touch {
    display: flex;
    gap: 0.6rem;
    margin-top: 0.7rem;
}

.order-game-touch-button {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.65rem 0.9rem;
    border: 2px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
    color: var(--brand-navy);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
    touch-action: manipulation;
    transition: border-color 140ms ease, background-color 140ms ease;
}

.order-game-touch-button:hover,
.order-game-touch-button:active {
    border-color: var(--brand-sky);
    background: rgb(63 57 52 / 5%);
}

.order-game-touch-button:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.order-game-share {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.9rem;
}

.order-game-share[hidden] {
    display: none;
}

.order-game-share-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--brand-navy);
}

.order-game-share-buttons {
    display: inline-flex;
    gap: 0.45rem;
}

.order-game-share-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--brand-navy);
    transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease, transform 140ms ease;
}

.order-game-share-link:hover {
    border-color: var(--brand-orange);
    color: var(--brand-orange);
    transform: translateY(-1px);
}

.order-game-share-link:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.scoreboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 1.2rem;
}

.scoreboard-grid-single {
    grid-template-columns: minmax(0, 560px);
    justify-content: center;
}

.scoreboard-card {
    padding: 1.1rem 1.2rem 1.2rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    background:
        radial-gradient(420px 180px at 100% 0%, rgb(63 57 52 / 5%), transparent 65%),
        var(--color-surface);
    box-shadow: var(--shadow-card);
}

.scoreboard-card-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--color-border);
}

.scoreboard-card-head strong {
    color: var(--brand-navy);
    font-size: 1.02rem;
}

.scoreboard-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: auto;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    background: rgb(224 106 16 / 10%);
    color: var(--brand-navy);
    font-size: 0.76rem;
    font-weight: 700;
}

.scoreboard-card-badge svg {
    color: var(--brand-orange);
}

.scoreboard-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #46413c, #ae5e04);
    color: #fff;
    box-shadow: 0 4px 10px rgb(63 57 52 / 18%), inset 0 1px 0 rgb(255 255 255 / 20%);
}

.scoreboard-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.scoreboard-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.65rem;
    border: 1px solid rgb(63 57 52 / 8%);
    border-radius: 10px;
    background: var(--color-surface);
}

.scoreboard-row-gold,
.scoreboard-row-silver,
.scoreboard-row-bronze {
    padding: 0.6rem 0.75rem;
}

.scoreboard-row-gold {
    border-color: rgb(212 160 23 / 55%);
    background: linear-gradient(120deg, #fff8e3, #ffefc0);
    box-shadow: 0 4px 12px rgb(212 160 23 / 18%);
}

.scoreboard-row-gold .scoreboard-name,
.scoreboard-row-gold .scoreboard-score {
    font-size: 1.02rem;
}

.scoreboard-row-silver {
    border-color: rgb(166 162 156 / 55%);
    background: linear-gradient(120deg, #fbfaf8, #efeeea);
}

.scoreboard-row-bronze {
    border-color: rgb(184 115 51 / 45%);
    background: linear-gradient(120deg, #fdf3ea, #f6e0cb);
}

.scoreboard-medal {
    display: inline-flex;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 3px rgb(63 57 52 / 22%));
}

.scoreboard-medal-ribbon-left {
    fill: var(--brand-navy);
}

.scoreboard-medal-ribbon-right {
    fill: var(--brand-orange);
}

.scoreboard-medal-star {
    fill: #fff;
}

.scoreboard-medal-gold .scoreboard-medal-disc {
    fill: #f5c343;
}

.scoreboard-medal-gold .scoreboard-medal-ring {
    fill: none;
    stroke: #d4a017;
    stroke-width: 1.4;
}

.scoreboard-medal-gold .scoreboard-medal-star {
    fill: #a87708;
}

.scoreboard-medal-silver .scoreboard-medal-disc {
    fill: #e1dfda;
}

.scoreboard-medal-silver .scoreboard-medal-ring {
    fill: none;
    stroke: #a6a29c;
    stroke-width: 1.4;
}

.scoreboard-medal-silver .scoreboard-medal-star {
    fill: #7a7671;
}

.scoreboard-medal-bronze .scoreboard-medal-disc {
    fill: #e2a06b;
}

.scoreboard-medal-bronze .scoreboard-medal-ring {
    fill: none;
    stroke: #b87333;
    stroke-width: 1.4;
}

.scoreboard-medal-bronze .scoreboard-medal-star {
    fill: #7c4a1d;
}

.scoreboard-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgb(63 57 52 / 8%);
    color: var(--brand-navy);
    font-size: 0.78rem;
    font-weight: 700;
    flex-shrink: 0;
}

.scoreboard-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: var(--brand-navy);
    font-size: 0.9rem;
}

.scoreboard-date {
    color: var(--color-muted);
    font-size: 0.76rem;
}

.scoreboard-score {
    color: var(--brand-navy);
    font-size: 0.95rem;
}

.scoreboard-empty {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

.scoreboard-share {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem 0.8rem;
    margin-top: 1.2rem;
}

.scoreboard-share-label {
    font-weight: 600;
    color: var(--brand-navy);
    font-size: 0.92rem;
}

.scoreboard-share-buttons {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.scoreboard-share-button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

@media (max-width: 560px) {
    .order-result {
        flex-direction: column;
        gap: 0.7rem;
    }

    .order-game-share {
        flex-wrap: wrap;
    }
}

.checkout-waiver {
    margin: 0.4rem 0 0;
}

.checkout-waiver-label {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    padding: 0.85rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-background);
    font-size: 0.88rem;
    line-height: 1.55;
    cursor: pointer;
}

.checkout-waiver-label input {
    margin-top: 0.2rem;
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    accent-color: var(--brand-navy);
}

.checkout-waiver-hint {
    margin: 0.5rem 0 0.8rem;
    font-size: 0.82rem;
    color: var(--color-error-text);
}

.checkout-waiver .checkout-submit {
    margin-top: 0.8rem;
}

.withdrawal-page .withdrawal-head {
    max-width: 640px;
    margin-bottom: 1.4rem;
}

.withdrawal-sub {
    color: var(--color-muted);
}

.withdrawal-form,
.withdrawal-lines,
.withdrawal-done {
    max-width: 560px;
    padding: 1.4rem 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-surface, #fff);
}

.withdrawal-field {
    margin-bottom: 1rem;
}

.withdrawal-field label {
    display: block;
    margin-bottom: 0.3rem;
    font-weight: 600;
    color: var(--brand-navy);
}

.withdrawal-field input {
    width: 100%;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    font-size: 0.95rem;
}

.withdrawal-line-list {
    list-style: none;
    margin: 1rem 0;
    padding: 0;
}

.withdrawal-line {
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    margin-bottom: 0.6rem;
}

.withdrawal-line label {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    cursor: pointer;
}

.withdrawal-line input {
    margin-top: 0.2rem;
    accent-color: var(--brand-navy);
}

.withdrawal-line small {
    display: block;
    margin-top: 0.15rem;
    color: var(--color-muted);
}

.withdrawal-line-waived_on_delivery,
.withdrawal-line-expired {
    opacity: 0.75;
    background: var(--color-background);
}

.withdrawal-declaration {
    margin: 1rem 0;
    padding: 0.9rem 1rem;
    border-left: 3px solid var(--brand-navy);
    background: var(--color-background);
    border-radius: 0 10px 10px 0;
    font-size: 0.9rem;
}

.withdrawal-model-form {
    max-width: 640px;
    margin-top: 2.2rem;
}

.withdrawal-model-form-text,
.legal-text-body {
    padding: 1rem 1.2rem;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-background);
    white-space: pre-wrap;
    word-break: break-word;
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.6;
}

.legal-text-page .container {
    max-width: 760px;
}

.legal-text-meta,
.legal-text-hash,
.withdrawal-model-form-version {
    color: var(--color-muted);
    font-size: 0.84rem;
}

.consent-banner {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    z-index: 600;
    width: min(680px, calc(100vw - 2rem));
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(30, 28, 26, 0.22);
}

.consent-banner h2 {
    margin: 0 0 0.35rem;
    font-size: 1rem;
    color: var(--brand-navy);
}

.consent-banner p {
    margin: 0 0 0.7rem;
    font-size: 0.86rem;
    line-height: 1.55;
}

.consent-settings summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.86rem;
    color: var(--brand-navy);
}

.consent-categories {
    margin-top: 0.7rem;
    display: grid;
    gap: 0.55rem;
}

.consent-category {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
    font-size: 0.84rem;
    line-height: 1.5;
    cursor: pointer;
}

.consent-category input {
    margin-top: 0.2rem;
    accent-color: var(--brand-navy);
}

.consent-banner-actions {
    display: flex;
    gap: 0.7rem;
    margin-top: 0.9rem;
}

.consent-button {
    flex: 1 1 0;
    padding: 0.7rem 1rem;
    border: 1.5px solid var(--brand-navy);
    border-radius: 10px;
    background: #fff;
    color: var(--brand-navy);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.consent-button:hover {
    background: var(--brand-navy);
    color: #fff;
}

.consent-categories .consent-button {
    flex: 0 0 auto;
    justify-self: start;
}

.spot-ai-notice {
    margin: 0;
    padding: 0.55rem 1rem;
    background: var(--color-background);
    border-bottom: 1px solid var(--color-border);
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--color-muted);
}

.spot-ai-notice a {
    color: var(--brand-navy);
    font-weight: 600;
}

.footer-legal {
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.footer-legal-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
}

.footer-legal-link svg {
    flex-shrink: 0;
    opacity: 0.85;
}

.footer-legal-link:hover span {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.consent-banner {
    border: 0;
    border-top: 4px solid var(--brand-navy);
    box-shadow: 0 22px 54px rgba(30, 28, 26, 0.28);
    padding: 1.35rem 1.5rem 1.4rem;
}

.consent-banner-header {
    display: flex;
    align-items: flex-start;
    gap: 0.95rem;
    margin-bottom: 0.85rem;
}

.consent-banner-face {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-background);
    border: 1.5px solid var(--color-border);
}

.consent-banner-face img {
    width: 46px;
    height: auto;
    display: block;
}

.consent-banner-heading {
    min-width: 0;
}

.consent-banner-heading h2 {
    margin: 0 0 0.3rem;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
}

.consent-banner-heading p {
    margin: 0;
}

.consent-banner p a {
    color: var(--brand-navy);
    font-weight: 600;
    text-underline-offset: 3px;
}

.consent-button-ghost {
    background: var(--color-background);
}

@media (max-width: 560px) {
    .consent-banner {
        padding: 1.1rem 1.1rem 1.2rem;
    }

    .consent-banner-face {
        width: 52px;
        height: 52px;
    }

    .consent-banner-face img {
        width: 38px;
    }

    .consent-banner-actions {
        flex-direction: column;
    }
}

.consent-button:focus-visible,
.footer-legal-link:focus-visible {
    outline: 2.5px solid #f28306;
    outline-offset: 2px;
}

.consent-settings {
    margin-bottom: 0.2rem;
}

.consent-settings[open] summary {
    margin-bottom: 0.2rem;
}

.withdrawal-head h1 {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.withdrawal-head h1::before {
    content: '';
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 10px;
    background-color: var(--brand-navy);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round' d='M9 14 4 9l5-5'/%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round' d='M4 9h10.5a5.5 5.5 0 0 1 0 11H9'/%3E%3C/svg%3E");
    background-size: 19px 19px;
    background-position: center;
    background-repeat: no-repeat;
}

.withdrawal-form .button,
.withdrawal-lines .button {
    margin-top: 0.4rem;
}

.withdrawal-done {
    border-left: 4px solid var(--color-success-text);
}

.withdrawal-done h2 {
    color: var(--color-success-text);
    margin-top: 0;
}

.withdrawal-model-form h2 {
    font-size: 1.1rem;
    color: var(--brand-navy);
}

.withdrawal-model-form-text,
.legal-text-body {
    background: var(--color-background);
    color: var(--brand-navy);
    border: 1px solid var(--color-border);
}

.games-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 1.1rem;
    max-width: 980px;
}

.games-hub-card {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 1.4rem 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: var(--color-surface, #fff);
    text-decoration: none;
    color: inherit;
    box-shadow: 0 10px 26px rgba(42, 39, 37, 0.06);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.games-hub-card:hover {
    border-color: var(--brand-navy);
    box-shadow: 0 16px 36px rgba(42, 39, 37, 0.12);
    transform: translateY(-2px);
}

.games-hub-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--brand-navy);
    color: #fff;
}

.games-hub-icon-card-blast {
    background: #f28306;
}

.games-hub-icon-coin-rush {
    background: #b8860b;
}

.games-hub-body {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.games-hub-body strong {
    font-size: 1.05rem;
    color: var(--brand-navy);
}

.games-hub-body span {
    color: var(--color-muted);
    font-size: 0.9rem;
}

.games-hub-cta {
    margin-top: auto;
    font-weight: 700;
    color: #f28306;
}

.product-withdrawal-note {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    margin-top: 0.9rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-background);
    font-size: 0.84rem;
    line-height: 1.55;
    color: var(--color-muted);
}

.product-withdrawal-note svg {
    flex-shrink: 0;
    margin-top: 0.15rem;
    color: var(--brand-navy);
}

.product-withdrawal-note a {
    color: var(--brand-navy);
    font-weight: 600;
}