/*!
 * ==================================================================
 *  MonkeyCore Platform
 *  Ontwikkeld door: Youri van Hogeloon
 *  Integrity: monkeycore/609e14dc99bb2439eb0dc0f7
 * ==================================================================
 */
@font-face {
    font-family: 'Open Sans';
    src: url("../fonts/open-sans-variable-30nvAOJ.woff2") format('woff2');
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
}

:root {
    --brand-navy: #14325f;
    --brand-navy-deep: #0f2648;
    --brand-blue: #1b6cb5;
    --brand-sky: #3f9ad6;
    --brand-sky-soft: #eaf4fb;
    --brand-orange: #c25200;
    --brand-orange-dark: #a34400;
    --brand-cream: #fbe3bd;
    --brand-pink: #f2a091;
    --color-background: #f5f8fb;
    --color-surface: #ffffff;
    --color-border: #e3e9f0;
    --color-text: #22304a;
    --color-muted: #5f7085;
    --color-success: #1d9d55;
    --color-success-bg: #e7f7ee;
    --color-success-text: #14663a;
    --color-error-bg: #fdecec;
    --color-error-text: #7f1d1d;
    --color-warning-bg: #fef4e5;
    --color-warning-text: #8a4c04;
    --color-info-bg: #eaf4fb;
    --color-info-text: #14325f;
    --color-danger: #d23b2e;
    --radius-small: 8px;
    --radius: 12px;
    --radius-large: 20px;
    --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 3px rgb(20 50 95 / 8%);
    --shadow-card: 0 1px 2px rgb(20 50 95 / 5%), 0 6px 18px rgb(20 50 95 / 7%);
    --shadow-pop: 0 18px 45px rgb(20 50 95 / 16%);
    --focus-ring: 0 0 0 3px rgb(63 154 214 / 30%);
    --transition-fast: 140ms ease;
    --transition-smooth: 240ms cubic-bezier(0.4, 0, 0.2, 1);
    --font-stack: 'Open Sans', 'Segoe UI', system-ui, sans-serif;
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

a {
    text-decoration: none;
}

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

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

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

::-webkit-scrollbar-thumb {
    background: #b9c9dd;
    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), #4aa6de);
    color: #ffffff;
    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(20 50 95 / 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(63 154 214 / 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(--color-surface);
    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(63 154 214 / 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(20 50 95 / 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(27 108 181 / 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(--color-surface);
    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);
}

.hero {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2.5rem;
    background:
        radial-gradient(1100px 420px at 85% -40%, rgb(63 154 214 / 45%), transparent 60%),
        linear-gradient(115deg, var(--brand-navy) 0%, #1b4e8f 55%, var(--brand-blue) 100%);
    color: var(--color-surface);
    border-radius: var(--radius-large);
    padding: clamp(2rem, 5vw, 3.25rem);
    margin-bottom: clamp(2rem, 4vw, 3rem);
    overflow: hidden;
    box-shadow: var(--shadow-pop);
}

.hero-copy {
    flex: 1;
    position: relative;
    z-index: 1;
}

.hero h1 {
    margin: 0 0 0.6rem;
    font-size: clamp(1.7rem, 3.6vw, 2.6rem);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.hero p {
    margin: 0 0 1.4rem;
    color: #d4e6f7;
    max-width: 36rem;
    font-size: 1.02rem;
}

.hero-usps {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    font-size: 0.86rem;
    font-weight: 600;
}

.hero-usps span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: rgb(255 255 255 / 13%);
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: 999px;
    padding: 0.4rem 1rem;
    backdrop-filter: blur(4px);
}

.hero-usps span::before {
    content: '';
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
    background: #7ee2a8;
    clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 84% 8%, 38% 68%);
}

.hero-art {
    position: relative;
    width: 300px;
    height: 210px;
    flex-shrink: 0;
}

.hero-card {
    position: absolute;
    width: 190px;
    height: 118px;
    border-radius: 16px;
    box-shadow: 0 24px 50px rgb(6 18 40 / 45%);
    border: 1px solid rgb(255 255 255 / 25%);
    transition: transform 200ms ease;
}

.hero-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: linear-gradient(160deg, rgb(255 255 255 / 30%), transparent 45%);
}

.hero-card-1 {
    background: linear-gradient(135deg, var(--brand-orange), #ff9540);
    transform: rotate(-10deg);
    top: 6px;
    left: 0;
}

.hero-card-2 {
    background: linear-gradient(135deg, var(--brand-sky), #7cc4e8);
    transform: rotate(2deg);
    top: 44px;
    left: 58px;
}

.hero-card-3 {
    background: linear-gradient(135deg, #17a45e, #5fd695);
    transform: rotate(12deg);
    top: 84px;
    left: 112px;
}

.hero:hover .hero-card-1 {
    transform: rotate(-13deg) translateY(-4px);
}

.hero:hover .hero-card-3 {
    transform: rotate(15deg) translateY(4px);
}

.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 {
    font-size: clamp(1.25rem, 2.4vw, 1.55rem);
    font-weight: 800;
    color: var(--brand-navy);
    margin: 0;
}

.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(9 24 48 / 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, #10141e, #2a475e);
}

.platform-pc {
    background: linear-gradient(135deg, #334155, #64748b);
}

.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 #d3e7f6;
    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(63 154 214 / 45%) transparent;
}

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

.filter-group {
    border-bottom: 1px solid rgb(63 154 214 / 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: #fff;
    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(63 154 214 / 45%);
    box-shadow: 0 2px 8px rgb(8 20 40 / 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(63 154 214 / 45%);
    box-shadow: 0 2px 8px rgb(8 20 40 / 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: #c3d4ea;
    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: #6cb4e4;
    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: #c3d4ea;
    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);
}

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

.button:active {
    transform: translateY(0);
}

.button-primary {
    background: var(--brand-orange);
    border-color: var(--brand-orange);
    color: var(--color-surface);
    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(63 154 214 / 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: #f5f9fd;
    border: 1px solid #d7e7f4;
    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: #ff9a3d;
    --theme-sunset-end: #ffc93d;
    --theme-midnight-start: #101426;
    --theme-midnight-end: #232a4d;
    --theme-ocean-start: #1b6cb5;
    --theme-ocean-end: #3f9ad6;
    --sale-red: #e0332b;
    --kiyoh-gold: #f6a623;
}

.hero-carousel {
    margin: clamp(1.2rem, 3vw, 1.8rem) 0 clamp(1rem, 2vw, 1.35rem);
}

.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-title {
    margin: 0 0 0.7rem;
    font-size: clamp(1.6rem, 3.4vw, 2.4rem);
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--color-surface);
}

.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(94 108 255 / 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(63 154 214 / 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-title-sale {
    font-size: clamp(1.5rem, 2.6vw, 2rem);
}

.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(--color-surface);
    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;
}

.promo-monkey {
    position: absolute;
    left: 1.1rem;
    bottom: -12px;
    width: 110px;
    pointer-events: none;
}

.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(9 16 33 / 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(9 16 33 / 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: #c9dcf0;
    font-weight: 600;
}

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

.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 {
    --monkey-face-w: clamp(120px, 12vw, 158px);
    position: relative;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #eef6fc, #e3f0fa);
    border: 1px solid #d7e7f4;
    border-radius: var(--radius-large);
    box-shadow: 0 12px 28px rgb(20 50 95 / 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(--monkey-face-w) * 0.34);
    transition: transform 150ms ease, box-shadow 150ms ease;
}

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

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

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

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

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

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

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

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

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

@keyframes monkey-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(--color-surface);
    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(63 154 214 / 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: #c3d4ea;
}

.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: #c3d4ea;
    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: #c3d4ea;
    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: #7186a5;
    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: #c3d4ea;
    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-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-monkey-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;
    justify-content: center;
    text-align: center;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

.home-top {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: clamp(1rem, 2.5vw, 1.5rem);
    align-items: stretch;
    margin: clamp(1.2rem, 3vw, 2rem) 0 clamp(2.25rem, 5vw, 3.25rem);
}

.search-hero {
    position: relative;
    display: flex;
    align-items: center;
    background:
        radial-gradient(700px 320px at 85% -20%, rgb(63 154 214 / 22%), transparent 60%),
        linear-gradient(115deg, var(--brand-navy-deep) 0%, var(--brand-navy) 70%, #1a3f78 100%);
    border-radius: var(--radius-large);
    padding: clamp(1.6rem, 4vw, 3rem);
    box-shadow: var(--shadow-pop);
    overflow: visible;
    min-height: 300px;
}

.search-hero-content {
    width: 100%;
    max-width: 40rem;
}

.search-hero-title {
    margin: 0 0 0.3rem;
    color: var(--color-surface);
    font-size: clamp(1.7rem, 3.4vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.01em;
}

.search-hero-subtitle {
    margin: 0 0 1.2rem;
    color: rgb(255 255 255 / 85%);
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    font-weight: 700;
}

.search-hero-search {
    position: relative;
}

.search-hero-search form {
    display: flex;
    align-items: center;
    background: var(--color-surface);
    border-radius: 999px;
    padding: 0.3rem 0.35rem 0.3rem 1.35rem;
    box-shadow: 0 12px 30px rgb(4 12 28 / 35%);
}

.search-hero-search input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-stack);
    font-size: 1.02rem;
    color: var(--color-text);
    padding: 0.65rem 0;
}

.search-hero-search input::placeholder {
    color: var(--color-muted);
}

.search-hero-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.9rem;
    height: 2.9rem;
    border: none;
    border-radius: 50%;
    background: var(--brand-orange);
    color: var(--color-surface);
    cursor: pointer;
    transition: background 140ms ease;
}

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

.search-hero-search .instant-results {
    left: 0;
    right: 0;
    width: auto;
    transform: none;
}

.search-hero-usps {
    list-style: none;
    display: flex;
    gap: 1.4rem;
    flex-wrap: wrap;
    margin: 1.1rem 0 0;
    padding: 0;
}

.search-hero-usps li {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: rgb(255 255 255 / 92%);
    font-size: 0.88rem;
    font-weight: 700;
}

.search-hero-usps li::before {
    content: '';
    width: 1rem;
    height: 1rem;
    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;
}

.home-top .hero-carousel {
    margin-bottom: 0;
}

.home-top .hero-banner {
    min-height: 300px;
    height: 100%;
    gap: 1rem;
    padding: clamp(1.2rem, 2.5vw, 1.8rem);
    margin-bottom: 0;
}

.home-top .hero-banner-panel {
    max-width: 100%;
    padding: clamp(1rem, 2vw, 1.4rem);
}

.home-top .hero-banner-panel h1,
.home-top .hero-banner-title {
    font-size: clamp(1.15rem, 2vw, 1.5rem);
}

.home-top .hero-banner-panel p {
    font-size: 0.88rem;
}

.home-top .hero-banner-art {
    display: none;
}

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

.hero-carousel {
    position: relative;
    margin-bottom: 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(9 16 33 / 45%);
    color: var(--color-surface);
    cursor: pointer;
    transition: background 140ms ease;
    backdrop-filter: blur(2px);
}

.hero-arrow:hover,
.hero-arrow:focus-visible {
    background: rgb(9 16 33 / 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(20 50 95 / 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(63 154 214 / 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(63 154 214 / 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 #dce9f5;
    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%, #eaf3fb 70%, #dce9f5 100%);
    border: 4px solid var(--color-surface);
    box-shadow: 0 8px 22px rgb(20 50 95 / 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 {
    --monkey-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(--monkey-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-monkey-face {
    position: absolute;
    width: calc(var(--monkey-face-w) * var(--monkey-face-scale, 1));
    left: 50%;
    top: calc(var(--monkey-face-w) * -0.34 - var(--monkey-face-w) * var(--monkey-face-head-top, 0));
    transform: translateX(-50%);
    pointer-events: none;
    filter: drop-shadow(0 6px 14px rgb(15 38 72 / 22%));
    animation: monkey-card-peek 6s ease-in-out infinite;
}

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

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

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

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

.error-status {
    display: inline-block;
    background: rgb(255 255 255 / 12%);
    color: #9fc9ea;
    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: #cfe3f5;
    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(--color-surface);
    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(63 154 214 / 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: #c0392b;
}

.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(20 50 95 / 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(8 20 40 / 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(8 20 40 / 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: #d8ecf9;
}

@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(--color-surface);
    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(20 50 95 / 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(--color-surface);
}

.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(--color-surface);
}

.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: #c0392b;
}

.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: #f4f6fa;
    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(--color-surface);
}

.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: clamp(240px, 23%, 300px);
    gap: 1.1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 0.3rem 0.15rem 0.9rem;
    flex: 1;
    min-width: 0;
}

.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: 78%;
    }
}

.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(16, 42, 67, 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(63 154 214 / 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: #fff;
    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-progress {
    margin-top: 0.8rem;
}

.loyalty-progress-track {
    height: 10px;
    border-radius: 999px;
    background: rgb(20 50 95 / 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-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(20 50 95 / 12%);
    border-radius: var(--radius-small);
    background: rgb(63 154 214 / 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: #a05a00;
}

.account-chip.chip-neutral {
    background: var(--brand-sky-soft);
    border-color: #d5e6f4;
    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: #a05a00;
    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: #c0392b;
}

.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(63 154 214 / 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: #a05a00; }
.subscription-status-cancelled, .subscription-status-expired { background: #f3f4f6; 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: #c0392b;
}

.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: #f7f9fc;
    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(--color-surface);
    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(16 42 67 / 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(63 154 214 / 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(21 34 56 / 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-monkey {
    position: relative;
    width: 130px;
    height: 110px;
}

.cart-empty-face {
    width: calc(96px * var(--monkey-face-scale, 1));
    position: absolute;
    left: 50%;
    top: calc(-96px * var(--monkey-face-head-top, 0));
    transform: translateX(-50%);
    animation: cart-monkey-peek 3.5s ease-in-out infinite;
}

.cart-empty-hand {
    width: 40px;
    position: absolute;
    bottom: 0;
    animation: monkey-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-monkey-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, #fbfcfe, #f5f8fc);
    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(16, 42, 67, 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 #cfd9e4;
    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: #9aa8b6;
    letter-spacing: 0.02em;
}

.checkout-redeem-row input:focus {
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(58, 141, 202, 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: #f1f4f8;
    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: #f7f9fc;
    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(21 34 56 / 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: #f7f9fc;
    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: #d8dee8;
}

.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: wrap;
    background: #f1f4f8;
    border-radius: var(--radius) var(--radius) 0 0;
    border: 1px solid var(--color-border);
    border-bottom: none;
    overflow: hidden;
}

.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;
    transition: background 140ms ease, color 140ms ease;
}

.product-tab:hover {
    background: rgb(63 154 214 / 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: #d8dee8;
    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(21 34 56 / 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;
    min-width: 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);
}

.monkey-card {
    --monkey-face-w: clamp(92px, 9vw, 118px);
    position: relative;
    margin-top: calc(var(--monkey-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);
}

.monkey-card h2 {
    font-size: 1.12rem;
}

.monkey-card .auth-benefits-list {
    gap: 0.6rem;
    font-size: 0.92rem;
}

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

.monkey-card-hand {
    position: absolute;
    pointer-events: none;
    filter: drop-shadow(0 3px 6px rgb(15 38 72 / 25%));
    animation: monkey-hand-bob 6s ease-in-out infinite;
}

.monkey-card-hand-top {
    width: clamp(30px, 3.4vw, 40px);
    top: -10px;
    left: 13%;
}

.monkey-card-hand-side {
    width: clamp(15px, 1.7vw, 19px);
    top: 2.3rem;
    right: -7px;
}

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

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

@media (prefers-reduced-motion: reduce) {
    .monkey-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(--color-surface);
    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, #eef3f9, #dfe9f4);
}

.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, #eef3f9, #dfe9f4);
    border-radius: var(--radius-large);
    padding: 2rem;
    margin: 1.2rem 0;
}

.news-article-visual img {
    max-height: 180px;
    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%);
}

[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-monkey,
    .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;
    }

    .monkey-card {
        --monkey-face-w: 92px;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }

    .news-layout {
        grid-template-columns: 1fr;
    }

    .news-sidebar {
        order: -1;
    }

    .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 {
        display: none;
    }
}

.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: #fff;
    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);
}

/* min-width dwingt de regel op een eigen rij; flex-basis alleen verliest van een max-width bij het wikkelen. */
.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;
}

/* Acties en statuschips horen op de titelregel, rechts uitgelijnd; de omschrijving eronder. */
.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-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(15 35 65 / 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;
}

/* Cellen met redenformulieren hebben ruimte nodig; kale knoppencellen blijven smal. */
.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;
}

/* In rasters regelt de gap de afstand; een extra margin duwt kolommen scheef. */
.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(63 154 214 / 14%);
}

.admin-method-active {
    font-size: 0.84rem;
    white-space: nowrap;
}

.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);
}

.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(63 154 214 / 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(8 20 40 / 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(8 20 40 / 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: #fff;
    font-size: 0.78rem;
    font-weight: 800;
}

.filter-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 120;
    background: rgb(8 20 40 / 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(8 20 40 / 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: #d8ecf9;
    border-color: rgb(63 154 214 / 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: #0c1f3d;
}

.monkey-widget {
    position: fixed;
    right: clamp(0.75rem, 3vw, 1.75rem);
    bottom: 0;
    z-index: 95;
}

.monkey-widget.is-open {
    z-index: 500;
}

.monkey-dock {
    position: relative;
    display: block;
    transform-origin: bottom center;
    animation: monkey-pop-in 0.8s cubic-bezier(0.34, 1.45, 0.5, 1);
}

.monkey-launcher {
    position: relative;
    display: block;
    width: 144px;
    height: 50px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.monkey-launcher:focus-visible {
    outline: 3px solid var(--brand-sky);
    outline-offset: 4px;
    border-radius: 14px;
}

.monkey-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;
}

.monkey-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(8 20 40 / 22%));
    animation: monkey-bob-idle 2.9s ease-in-out infinite;
    pointer-events: none;
}

.monkey-launcher-head.is-hop { animation: monkey-hop 0.85s ease; }
.monkey-launcher-head.is-lookaround { animation: monkey-lookaround 1.6s ease; }
.monkey-launcher-head.is-tilt { animation: monkey-tilt 1.15s ease; }
.monkey-launcher-head.is-scratch { animation: monkey-scratch 1.15s ease; }

.monkey-speech {
    position: absolute;
    right: 6px;
    bottom: calc(100% + 6px);
    max-width: 200px;
    padding: 0.55rem 0.85rem;
    background: var(--color-surface);
    color: var(--brand-navy);
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.35;
    border-radius: 16px;
    box-shadow: 0 12px 28px rgb(8 20 40 / 22%);
    opacity: 0;
    transform: translateY(10px) scale(0.82);
    transform-origin: bottom right;
    transition: opacity 240ms ease, transform 300ms cubic-bezier(0.34, 1.35, 0.6, 1);
    pointer-events: none;
    z-index: 1;
}

.monkey-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);
}

.monkey-widget.is-bubbling .monkey-speech {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.monkey-widget.is-open .monkey-speech {
    display: none;
}

.monkey-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;
}

.monkey-launcher:hover .monkey-launcher-hint,
.monkey-launcher:focus-visible .monkey-launcher-hint {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.monkey-widget.is-open .monkey-launcher-hint {
    display: none;
}

.monkey-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;
}

.monkey-dock:hover .monkey-minimize,
.monkey-minimize:focus-visible {
    opacity: 1;
    transform: scale(1);
}

.monkey-minimize:hover {
    color: var(--brand-navy);
    border-color: var(--brand-sky);
}

.monkey-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: monkey-pop-in 0.5s cubic-bezier(0.34, 1.4, 0.5, 1);
}

.monkey-restore-tab img {
    width: 34px;
    height: auto;
}

.monkey-restore-tab:hover {
    border-color: var(--brand-sky);
    background: var(--brand-sky-soft);
}

.monkey-widget.is-minimized .monkey-dock {
    display: none;
}

.monkey-widget.is-minimized .monkey-restore-tab {
    display: inline-flex;
}

@keyframes monkey-backdrop-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes monkey-pop-in {
    0% { transform: translateY(45%) scale(0.82); }
    58% { transform: translateY(-7%) scale(1.05); }
    100% { transform: translateY(0) scale(1); }
}

@keyframes monkey-bob-idle {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-6px) rotate(1deg); }
}

@keyframes monkey-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 monkey-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 monkey-tilt {
    0%, 100% { transform: rotate(0) scale(1); }
    40% { transform: rotate(-6deg) scale(1.07); }
    72% { transform: rotate(5deg) scale(1.03); }
}

@keyframes monkey-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); }
}

.monkey-panel-backdrop {
    display: none;
}

.monkey-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(8 20 40 / 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);
}

.monkey-widget.is-open .monkey-panel {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.monkey-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(63 154 214 / 65%) 0%, transparent 58%),
        linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-navy) 55%, var(--brand-navy-deep, #0c1f3d) 100%);
    color: #fff;
    overflow: hidden;
    border-bottom: 3px solid var(--brand-orange);
}

.monkey-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: monkey-head-drift 7s ease-in-out infinite;
}

.monkey-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(8 20 40 / 35%);
    animation: monkey-head-bob 3.2s ease-in-out infinite;
}

.monkey-brand-face {
    width: 92%;
    height: 92%;
    object-fit: contain;
    object-position: center;
    display: block;
}

.monkey-panel-heading {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.monkey-panel-title {
    font-weight: 800;
    font-size: 1.02rem;
    letter-spacing: 0.01em;
}

.monkey-panel-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: rgb(255 255 255 / 80%);
}

.monkey-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3fd07a;
    box-shadow: 0 0 0 0 rgb(63 208 122 / 55%);
    animation: monkey-status-pulse 2.4s ease-out infinite;
}

@keyframes monkey-head-bob {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-3px) rotate(-3deg); }
}

@keyframes monkey-head-drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-14px, 10px) scale(1.1); }
}

@keyframes monkey-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%); }
}

.monkey-panel-close,
.monkey-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;
}

.monkey-panel-close:hover,
.monkey-panel-speak:hover {
    background: rgb(255 255 255 / 24%);
}

.monkey-panel-speak .monkey-speak-waves {
    opacity: 0.35;
    transition: opacity 140ms ease;
}

.monkey-panel-speak.is-active {
    background: rgb(255 255 255 / 26%);
    box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 65%);
}

.monkey-panel-speak.is-active .monkey-speak-waves {
    opacity: 1;
}

.monkey-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);
}

.monkey-message {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    max-width: 100%;
    animation: monkey-msg-in 300ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes monkey-msg-in {
    from { opacity: 0; transform: translateY(7px); }
    to { opacity: 1; transform: translateY(0); }
}

.monkey-message-user {
    justify-content: flex-end;
}

.monkey-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);
}

.monkey-bubble {
    max-width: 78%;
    padding: 0.6rem 0.85rem;
    border-radius: 16px;
    font-size: 0.92rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.monkey-message-bot .monkey-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);
}

.monkey-message-user .monkey-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(27 108 181 / 28%);
}

.monkey-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.monkey-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;
}

.monkey-suggestion:hover {
    border-color: var(--brand-sky);
}

.monkey-typing {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

.monkey-typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-muted);
    animation: monkey-typing 1.2s ease-in-out infinite;
}

.monkey-typing span:nth-child(2) { animation-delay: 0.15s; }
.monkey-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes monkey-typing {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-4px); opacity: 1; }
}

.monkey-input {
    display: flex;
    padding: 0.65rem 0.8rem 0.4rem;
    background: var(--color-surface);
}

.monkey-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;
}

.monkey-input-shell:focus-within {
    border-color: var(--brand-sky);
    background: var(--color-surface);
    box-shadow: 0 0 0 4px var(--brand-sky-soft);
}

.monkey-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);
}

.monkey-input-field:focus {
    outline: none;
    box-shadow: none;
}

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

.monkey-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;
}

.monkey-input-mic:hover {
    color: var(--brand-blue);
    background: var(--brand-sky-soft);
}

.monkey-input-mic:focus-visible {
    outline: 2px solid var(--brand-sky);
    outline-offset: 2px;
}

.monkey-widget.is-listening .monkey-input-mic {
    color: #fff;
    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: monkey-listening-pulse 1.4s ease-out infinite;
}

.monkey-widget.is-listening .monkey-input-shell {
    border-color: var(--brand-orange);
    box-shadow: 0 0 0 4px rgb(194 82 0 / 12%);
}

@keyframes monkey-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%); }
}

.monkey-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: #fff;
    cursor: pointer;
    box-shadow: 0 4px 12px rgb(194 82 0 / 32%);
    transition: transform 140ms ease, box-shadow 140ms ease;
}

.monkey-input-send:hover {
    transform: translateY(-1px) scale(1.06);
    box-shadow: 0 6px 16px rgb(194 82 0 / 42%);
}

.monkey-input-send:active {
    transform: scale(0.94);
}

.monkey-input-send:focus-visible {
    outline: 2px solid var(--brand-sky);
    outline-offset: 2px;
}

.monkey-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 .monkey-widget {
    bottom: var(--sticky-buy-bar-height, 64px);
    transition: bottom 220ms ease;
}

html.monkey-chat-open,
body.monkey-chat-open {
    overflow: hidden;
    overscroll-behavior: none;
}

@media (max-width: 520px) {
    .monkey-widget {
        right: 0.6rem;
        bottom: env(safe-area-inset-bottom, 0px);
    }

    body.has-sticky-buy-bar .monkey-widget {
        bottom: calc(var(--sticky-buy-bar-height, 64px) + env(safe-area-inset-bottom, 0px));
    }

    .monkey-launcher {
        width: 118px;
        height: 44px;
    }

    .monkey-launcher-head {
        width: 118px;
        margin-left: -59px;
        bottom: -9px;
    }

    .monkey-launcher-glow {
        width: 100px;
    }

    .monkey-speech {
        max-width: min(62vw, 230px);
        font-size: 0.8rem;
    }

    .monkey-widget.is-open .monkey-panel-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgb(8 20 40 / 45%);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        animation: monkey-backdrop-in 220ms ease;
    }

    .monkey-panel {
        position: fixed;
        right: 0;
        left: 0;
        bottom: var(--monkey-keyboard, 0px);
        width: 100%;
        height: min(calc(100dvh - 3rem), calc(var(--monkey-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(8 20 40 / 38%);
    }

    .monkey-panel-close {
        width: 40px;
        height: 40px;
        background: rgb(255 255 255 / 18%);
    }

    .monkey-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%);
    }

    .monkey-panel-head {
        padding-top: 1.35rem;
    }

    .monkey-input-field {
        font-size: 1rem;
    }

    .monkey-bubble {
        max-width: 84%;
        font-size: 0.95rem;
    }

    .monkey-restore-tab {
        font-size: 0.78rem;
        padding: 0.3rem 0.7rem 0.3rem 0.5rem;
    }
}

@media (max-width: 380px) {
    .monkey-launcher {
        width: 104px;
        height: 40px;
    }

    .monkey-launcher-head {
        width: 104px;
        margin-left: -52px;
        bottom: -8px;
    }

    .monkey-speech {
        max-width: 58vw;
    }
}

@media (max-height: 480px) {
    .monkey-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;
    }

    .monkey-panel-head {
        padding: 0.55rem 0.85rem;
    }

    .monkey-panel-avatar {
        width: 36px;
        height: 36px;
    }

    .monkey-disclaimer {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .monkey-dock,
    .monkey-launcher-head,
    .monkey-launcher-head.is-hop,
    .monkey-launcher-head.is-lookaround,
    .monkey-launcher-head.is-tilt,
    .monkey-launcher-head.is-scratch,
    .monkey-restore-tab,
    .monkey-panel-avatar,
    .monkey-panel-glow,
    .monkey-status-dot,
    .monkey-typing span,
    .monkey-widget.is-listening .monkey-input-mic,
    .monkey-widget.is-open .monkey-panel-backdrop,
    .monkey-message {
        animation: none;
    }

    .monkey-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;
}

/* Filterbalk en tabel horen bij elkaar: zelfde paar-afstand als de datatable-toolbar. */
.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 {
    --monkey-face-scale: 1.175;
    --monkey-face-head-top: 0.517;
}

body.is-seasonal-theme .logo img {
    height: calc(46px * var(--site-logo-scale, 1));
}

.empty-state img {
    height: auto;
}

@media (max-width: 900px) {
    body.is-seasonal-theme .logo img {
        height: calc(38px * var(--site-logo-scale, 1));
    }
}

@media (max-width: 640px) {
    body.is-seasonal-theme .logo img {
        height: calc(36px * var(--site-logo-scale, 1));
    }
}

.checkout-gift-options {
    margin: 0.2rem 0 1.2rem;
    padding: 1.1rem 1.2rem 1.2rem;
    border: 1px solid #d9e6f4;
    border-radius: var(--radius);
    background:
        radial-gradient(360px 180px at 100% 0%, rgb(63 154 214 / 10%), transparent 65%),
        var(--color-surface);
    box-shadow: 0 6px 18px rgb(20 50 95 / 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: 0.9rem;
}

.checkout-gift-options .checkout-input-hint {
    margin-top: 0.35rem;
}

.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;
}

/* thema-logo-verhoudingen: gegenereerd, houdt het woordmerk in elk thema even groot */
body.theme-anniversary {
    --site-logo-scale: 1.57;
}

body.theme-birthday {
    --site-logo-scale: 1.49;
}

body.theme-carnival {
    --site-logo-scale: 1.6918;
}

body.theme-christmas {
    --site-logo-scale: 1.5191;
}

body.theme-easter {
    --site-logo-scale: 1.5727;
}

body.theme-fathersday {
    --site-logo-scale: 1.0;
}

body.theme-halloween {
    --site-logo-scale: 1.39;
}

body.theme-kingsday {
    --site-logo-scale: 1.2864;
}

body.theme-mothersday {
    --site-logo-scale: 1.0;
}

body.theme-newyear {
    --site-logo-scale: 1.0;
}

body.theme-sinterklaas {
    --site-logo-scale: 1.6491;
}

body.theme-valentine {
    --site-logo-scale: 1.0;
}

.monkey-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;
}

.monkey-input-call:hover {
    color: var(--color-success);
    background: var(--color-success-bg);
}

.monkey-input-call:focus-visible {
    outline: 2px solid var(--brand-sky);
    outline-offset: 2px;
}

.monkey-input-call.is-active {
    color: #fff;
    background: var(--color-success);
    box-shadow: 0 0 0 4px rgb(29 131 72 / 22%);
}

.monkey-input-call.is-error {
    color: var(--color-danger);
    background: var(--color-error-bg);
}

.monkey-widget.is-connecting .monkey-input-call {
    color: var(--brand-orange);
    background: var(--brand-cream);
    animation: monkey-call-pulse 1.1s ease-in-out infinite;
}

.monkey-widget.is-calling .monkey-panel-subtitle .monkey-status-dot {
    background: var(--color-success);
    box-shadow: 0 0 0 4px rgb(29 131 72 / 20%);
}

@keyframes monkey-call-pulse {
    50% {
        transform: scale(0.9);
    }
}

@media (prefers-reduced-motion: reduce) {
    .monkey-widget.is-connecting .monkey-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;
}

@media (max-width: 560px) {
    .order-result {
        flex-direction: column;
        gap: 0.7rem;
    }
}