/* ============================================================
   GLOBAL — variables, reset, layout, nav, buttons, utilities
   ============================================================ */

:root {
    color-scheme: light;

    /* Brand — honey gold, quiet enough for a curated shelf (not neon amber) */
    --primary-color: #C9A227;
    --primary-hover: #B8921F;
    --primary-rgb: 201, 162, 39;
    --primary-hover-rgb: 184, 146, 31;
    --accent-color: #D4B84A;
    --secondary-color: #2C2416;
    --secondary-rgb: 44, 36, 22;

    /* Type */
    --font-ui: 'Outfit', sans-serif;
    --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;

    /* Surfaces */
    --white: #FFFFFF;
    --surface-color: #FFFFFF;
    --bg-color: #FFFBF5;
    --bg-rgb: 255, 251, 245;
    --gray-100: #FDF8F0;
    --gray-200: #EDE6D9;
    --gray-800: var(--secondary-color);
    --header-bg: rgba(var(--bg-rgb), 0.95);
    /* Dark chrome behind the header — the mockup's top band. Locked to the
       light-theme brown so it does not invert when --secondary-color does. */
    --header-band: #2C2416;
    --header-band-end: color-mix(in srgb, #2C2416 72%, var(--primary-color));
    --header-on-band: #FFFFFF;
    --header-on-band-muted: rgba(255, 255, 255, 0.75);
    --header-on-band-line: rgba(255, 255, 255, 0.18);
    --border-width: 1px;

    /* Text */
    --text-color: #4A4235;
    --text-muted: #7A7265;
    --text-subtle: #A89F8F;
    --text-on-dark: #FFFFFF;
    --text-on-primary: var(--secondary-color);

    /* Badge & tags */
    --badge-bg: #F7F0DC;
    --badge-color: #8A7018;
    --primary-light: rgba(var(--primary-rgb), 0.12);

    /* Product surfaces — the shared layer the redesigned pages read.
       --plate-bg   neutral plate a product photo floats on, with padding
       --hairline   1px rule between rows of facts; the only divider we use
       --pill-*     the primary pill button: solid, high contrast, no gradient */
    --plate-bg: #F5F1EA;
    --hairline: #E8E2D6;
    --pill-bg: #1A1611;
    /* Slightly lighter than the rest state — darkening to #000 was invisible. */
    --pill-bg-hover: #3A3228;
    --pill-text: #FFFFFF;

    /* Status */
    --verified-color: #2a7732;
    --danger-color: #DC2626;
    --danger-hover: #B91C1C;
    --danger-on: #FFFFFF;
    --alert-warning-bg: #FFF3CD;
    --alert-warning-text: #856404;
    --alert-warning-border: #FFEBBA;
    --alert-info-bg: #D1ECF1;
    --alert-info-text: #0C5460;
    --alert-info-border: #BEE5EB;

    /* Map clusters */
    --cluster-sm-bg: rgba(var(--primary-rgb), 0.6);
    --cluster-sm-inner: rgba(var(--primary-rgb), 0.8);
    --cluster-md-bg: rgba(var(--primary-hover-rgb), 0.6);
    --cluster-md-inner: rgba(var(--primary-hover-rgb), 0.8);
    --cluster-lg-bg: rgba(var(--secondary-rgb), 0.6);
    --cluster-lg-inner: rgba(var(--secondary-rgb), 0.8);
    --cluster-text: var(--text-on-dark);

    /* Footer */
    --footer-bg: var(--secondary-color);
    --footer-link-color: var(--accent-color);
    --footer-text-opacity: 0.75;

    /* Layout */
    --radius: 12px;
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 16px;

    /* Shadows */
    --shadow-color: 0, 0, 0;
    --shadow: 0 10px 15px -3px rgba(var(--shadow-color), 0.1), 0 4px 6px -2px rgba(var(--shadow-color), 0.05);
    --shadow-lg: 0 20px 25px -5px rgba(var(--shadow-color), 0.1), 0 10px 10px -5px rgba(var(--shadow-color), 0.04);
    --shadow-sm: 0 1px 3px rgba(var(--shadow-color), 0.1);
    --shadow-md: 0 4px 6px rgba(var(--shadow-color), 0.1);
    --shadow-card-hover: 0 10px 20px rgba(var(--shadow-color), 0.1);
    --shadow-primary: 0 4px 6px -1px rgba(var(--primary-rgb), 0.35);
    --shadow-primary-hover: 0 10px 15px -3px rgba(var(--primary-rgb), 0.45);
    --focus-ring: 0 0 0 3px rgba(var(--primary-rgb), 0.25);

    /* Theme switcher — hi-contrast icon halves (paired for nav bg contrast) */
    --theme-contrast-half-a: var(--secondary-color);
    --theme-contrast-half-b: var(--primary-color);
    --theme-contrast-ring: var(--secondary-color);
}

/* ── Dark theme ── */
[data-theme="dark"] {
    color-scheme: dark;

    --primary-color: #D4B84A;
    --primary-hover: #E0C96A;
    --primary-rgb: 212, 184, 74;
    --primary-hover-rgb: 224, 201, 106;
    --accent-color: #E0C96A;
    --secondary-color: #F0E6D6;
    --secondary-rgb: 240, 230, 214;

    --font-ui: 'Outfit', sans-serif;
    --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;

    --surface-color: #1E1A14;
    --bg-color: #12100C;
    --bg-rgb: 18, 16, 12;
    --gray-100: #2A2418;
    --gray-200: #3D3528;
    --gray-800: #F0E6D6;
    --header-bg: rgba(var(--bg-rgb), 0.95);
    --header-band: #2C2416;
    --header-band-end: color-mix(in srgb, #2C2416 72%, var(--primary-color));
    --header-on-band: #FFFFFF;
    --header-on-band-muted: rgba(255, 255, 255, 0.75);
    --header-on-band-line: rgba(255, 255, 255, 0.18);

    --text-color: #E8E0D4;
    --text-muted: #B8AFA0;
    --text-subtle: #8A8070;
    --text-on-primary: #1A1408;

    --badge-bg: rgba(var(--primary-rgb), 0.16);
    --badge-color: #D4B84A;
    --primary-light: rgba(var(--primary-rgb), 0.2);

    /* Product surfaces — the pill inverts in dark so it stays the loud element */
    --plate-bg: #241F17;
    --hairline: #3A3226;
    --pill-bg: #F0E6D6;
    --pill-bg-hover: #FFFFFF;
    --pill-text: #12100C;

    --verified-color: #5ccf68;
    --danger-color: #F87171;
    --danger-hover: #EF4444;
    --danger-on: #1A0808;
    --alert-warning-bg: #422006;
    --alert-warning-text: #FCD34D;
    --alert-warning-border: #78350F;
    --alert-info-bg: #0C4A6E;
    --alert-info-text: #7DD3FC;
    --alert-info-border: #0369A1;

    --footer-bg: #0A0806;
    --footer-link-color: var(--primary-color);

    --shadow-color: 0, 0, 0;
    --shadow: 0 10px 15px -3px rgba(var(--shadow-color), 0.35), 0 4px 6px -2px rgba(var(--shadow-color), 0.25);
    --shadow-lg: 0 20px 25px -5px rgba(var(--shadow-color), 0.4), 0 10px 10px -5px rgba(var(--shadow-color), 0.3);
    --shadow-sm: 0 1px 3px rgba(var(--shadow-color), 0.3);
    --shadow-md: 0 4px 6px rgba(var(--shadow-color), 0.3);
    --shadow-card-hover: 0 10px 20px rgba(var(--shadow-color), 0.35);
    --focus-ring: 0 0 0 3px rgba(var(--primary-rgb), 0.4);

    --theme-contrast-half-a: var(--primary-color);
    --theme-contrast-half-b: var(--gray-200);
    --theme-contrast-ring: var(--secondary-color);
}

/* ── High-contrast theme (WCAG AA) ── */
[data-theme="high-contrast"] {
    color-scheme: dark;

    --primary-color: #FFD700;
    --primary-hover: #FFEA00;
    --primary-rgb: 255, 215, 0;
    --primary-hover-rgb: 255, 234, 0;
    --accent-color: #FFFF00;
    --secondary-color: #FFFFFF;
    --secondary-rgb: 255, 255, 255;

    --font-ui: 'Outfit', sans-serif;
    --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;

    --surface-color: #000000;
    --bg-color: #000000;
    --bg-rgb: 0, 0, 0;
    --gray-100: #000000;
    --gray-200: #FFFFFF;
    --gray-800: #FFFFFF;
    --header-bg: #000000;
    --header-band: #000000;
    --header-band-end: #000000;
    --header-on-band: #FFFFFF;
    --header-on-band-muted: #FFFFFF;
    --header-on-band-line: #FFFFFF;
    --border-width: 2px;

    --text-color: #FFFFFF;
    --text-muted: #FFFFFF;
    --text-subtle: #FFFF00;
    --text-on-primary: #000000;

    --badge-bg: #000000;
    --badge-color: #FFFF00;
    --primary-light: #000000;

    /* Product surfaces — no tinted plate here: the plate reads as a border
       instead, and the pill is pure white on black */
    --plate-bg: #000000;
    --hairline: #FFFFFF;
    --pill-bg: #FFFFFF;
    --pill-bg-hover: #FFFF00;
    --pill-text: #000000;

    --verified-color: #00e676;
    --danger-color: #FF4444;
    --danger-hover: #FF6666;
    --danger-on: #000000;
    --alert-warning-bg: #000000;
    --alert-warning-text: #FFFF00;
    --alert-warning-border: #FFFF00;
    --alert-info-bg: #000000;
    --alert-info-text: #FFFFFF;
    --alert-info-border: #FFFFFF;

    --footer-bg: #000000;
    --footer-link-color: #FFFF00;
    --footer-text-opacity: 1;

    --radius: 0;
    --radius-sm: 0;
    --radius-md: 0;
    --radius-lg: 0;
    --shadow: none;
    --shadow-lg: none;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-card-hover: none;
    --shadow-primary: none;
    --shadow-primary-hover: none;
    --focus-ring: 0 0 0 3px #FFFF00;

    --theme-contrast-half-a: var(--primary-color);
    --theme-contrast-half-b: var(--surface-color);
    --theme-contrast-ring: var(--secondary-color);
}

/* ── Reset ── */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-ui);
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Display serif on page titles — same grammar as Home / Explore heroes. */
h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--secondary-color);
    line-height: 1.25;
}

a {
    text-decoration: none;
    color: inherit;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ── Header ──
   One row: brand, the search field sitting next to it, then utility
   controls pushed to the right. No card chrome, no shadow. */
.main-header {
    background-color: var(--header-band);
    background-image: linear-gradient(180deg, var(--header-band), var(--header-band-end));
    box-shadow: none;
    padding: 0.85rem 0 0;
    position: sticky;
    top: 0;
    z-index: 1100;
    border-bottom: none;
    color: var(--header-on-band);
}

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

/* Logo + search as one left-hand unit. The cluster may shrink on mid-width
   screens but never grows past the search's own max, so empty space stays
   between the field and the utilities — not inside the field. */
.header-start {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-width: 0;
    flex: 1 1 auto;
    max-width: 46rem;
}

/* ── Header search — never collapsed with the mobile menu ── */
.header-search {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: none;
    height: 2.75rem;
    padding: 0 1.1rem 0 0.4rem;
    border: var(--border-width) solid var(--hairline);
    border-radius: 999px;
    background: var(--surface-color);
}

.header-search:focus-within {
    border-color: var(--primary-color);
    box-shadow: var(--focus-ring);
}

.header-search-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-color);
    font-family: inherit;
    font-size: 0.95rem;
    height: 100%;
}

.header-search-input:focus {
    outline: none;
}

.header-search-input::placeholder {
    color: var(--text-subtle);
}

/* WebKit decorates type="search" with its own controls; they fight the pill. */
.header-search-input::-webkit-search-decoration,
.header-search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

/* Magnifier lives inside the pill, on the left — it is still the submit
   control, just without the filled pill chrome the mockup does not have. */
.header-search-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
}

.header-search-submit:hover {
    color: var(--text-color);
}

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

.header-search-icon {
    width: 1.1rem;
    height: 1.1rem;
}

.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: var(--border-width) solid var(--header-on-band-line);
    border-radius: var(--radius);
    background: transparent;
    color: var(--header-on-band);
    cursor: pointer;
    flex-shrink: 0;
}

.nav-toggle:focus-visible {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: var(--focus-ring);
}

.nav-toggle-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.nav-toggle-close {
    display: none;
}

.main-header.nav-open .nav-toggle-open {
    display: none;
}

.main-header.nav-open .nav-toggle-close {
    display: block;
}

.header-utilities {
    display: flex;
    align-items: center;
    margin-left: auto;
    gap: 1.25rem;
    flex-shrink: 0;
}

.header-menu-links {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

/* Desktop: wrapper is transparent so lang, separator and icons stay in the
   utility row. Mobile overrides this into a single toolbar line. */
.header-toolbar {
    display: contents;
}

.header-util-link__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
}

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

.logo {
    flex-shrink: 0;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--secondary-color);
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.025em;
}

.logo-icon {
    height: 3rem;
    width: auto;
}

/* The header is a dark band in every theme, so the light-on-dark wordmark
   is the one that reads. The files themselves are unchanged. */
.logo-light {
    display: none;
}

.logo-dark {
    display: block;
}

.nav-auth {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* The account links sat inside .main-nav before the shell split in two and
   took their type from it; they live in the utility row now. */
.nav-auth a:not(.btn) {
    font-weight: 600;
    color: var(--header-on-band);
    transition: color 0.2s;
}

.nav-auth a:not(.btn):hover {
    color: var(--primary-color);
}

.header-account,
.header-lookup {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    color: var(--header-on-band);
    flex-shrink: 0;
}

.header-account:hover,
.header-lookup:hover {
    color: var(--primary-color);
}

.header-account:focus-visible,
.header-lookup:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius);
}

.nav-separator {
    width: 1px;
    height: 1.25em;
    background-color: var(--header-on-band-line);
    flex-shrink: 0;
}

.lang-switcher {
    position: relative;
    display: flex;
    align-items: center;
}

.lang-dropdown {
    position: relative;
}

.lang-dropdown__button {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--header-on-band);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.lang-dropdown__button::-webkit-details-marker {
    display: none;
}

.lang-dropdown__button:hover,
.lang-dropdown[open] > .lang-dropdown__button {
    color: var(--primary-color);
}

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

.lang-dropdown__chevron {
    width: 1rem;
    height: 1rem;
    transition: transform 0.15s ease;
}

.lang-dropdown[open] .lang-dropdown__chevron {
    transform: rotate(180deg);
}

.lang-dropdown__list {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + 0.4rem);
    z-index: 1200;
    min-width: 11rem;
    margin: 0;
    padding: 0.35rem;
    list-style: none;
    background-color: var(--surface-color);
    border: var(--border-width) solid var(--gray-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}

.lang-dropdown__option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.7rem;
    border-radius: var(--radius-sm);
    color: var(--text-color);
    font-size: 0.95rem;
    text-decoration: none;
}

.lang-dropdown__option:hover,
.lang-dropdown__option:focus-visible {
    background-color: var(--gray-100);
    outline: none;
}

.lang-dropdown__option.is-active {
    font-weight: 600;
    color: var(--primary-color);
}

.lang-dropdown__code {
    min-width: 1.75rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.lang-dropdown__option.is-active .lang-dropdown__code {
    color: inherit;
}

/* ── Buttons ──
   One hover grammar for every variant: lift + soft shadow.
   Variants only change fill/ink; motion stays on .btn. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.5rem;
    border-radius: var(--radius);
    font-weight: 600;
    cursor: pointer;
    border: none;
    letter-spacing: 0.025em;
    white-space: nowrap;
    box-shadow: none;
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

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

.btn:disabled,
.btn[disabled],
.btn:disabled:hover,
.btn[disabled]:hover {
    transform: none;
    box-shadow: none;
    cursor: not-allowed;
}

/* Same grammar as .btn-pill: solid high-contrast CTA, no amber gradient. */
.btn-primary {
    background: var(--pill-bg);
    color: var(--pill-text);
    border-radius: 999px;
}

.btn-primary:hover {
    background: var(--pill-bg-hover);
    color: var(--pill-text);
}

/* The primary pill — one loud, solid call to action per page. */
.btn-pill {
    background: var(--pill-bg);
    color: var(--pill-text);
    border-radius: 999px;
    padding: 0.7rem 1.75rem;
}

.btn-pill:hover {
    background: var(--pill-bg-hover);
    color: var(--pill-text);
}

.btn-outline {
    border: 2px solid var(--secondary-color);
    color: var(--secondary-color);
    background: transparent;
}

.main-header .btn-outline {
    border-color: var(--header-on-band);
    color: var(--header-on-band);
}

.main-header .btn-outline:hover {
    background-color: var(--header-on-band);
    color: var(--header-band);
}

.btn-outline:hover {
    background-color: var(--secondary-color);
    /* Must contrast with --secondary-color in every theme: white-on-cream
       (dark theme) failed because --text-on-dark stayed white. */
    color: var(--bg-color);
}

.btn-secondary {
    background: var(--gray-100);
    color: var(--secondary-color);
    border: 2px solid var(--gray-200);
}

.btn-secondary:hover {
    background: var(--gray-200);
}

.btn-danger {
    background: var(--danger-color);
    color: var(--danger-on);
    border: none;
}

.btn-danger:hover {
    background: var(--danger-hover);
}

.btn-block {
    display: block;
    width: 100%;
}

.btn-sm {
    padding: 0.3rem 0.8rem;
    font-size: 0.9rem;
    line-height: 1;
}

/* Compact jar count — one hairline pill, same radius as header search.
   Spinners are hidden: they are an OS control and ignore the type. */
input[type="number"].qty-input {
    width: 2.4rem;
    min-height: 2.35rem;
    padding: 0.35rem 0.2rem;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    background: var(--surface-color);
    color: var(--text-color);
    font-family: var(--font-ui);
    font-size: 0.95rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    text-align: center;
    appearance: textfield;
    -moz-appearance: textfield;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input[type="number"].qty-input::-webkit-outer-spin-button,
input[type="number"].qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

input[type="number"].qty-input:focus-visible {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: var(--focus-ring);
}

.qty-stepper {
    display: inline-flex;
    align-items: stretch;
    height: 2.35rem;
    vertical-align: middle;
    overflow: hidden;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    background: var(--surface-color);
}

.qty-stepper:focus-within {
    border-color: var(--primary-color);
    box-shadow: var(--focus-ring);
}

.qty-stepper__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.qty-stepper input[type="number"].qty-input {
    width: 2.25rem;
    min-height: 0;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.qty-stepper input[type="number"].qty-input:focus-visible {
    box-shadow: none;
}

.qty-stepper__btn:hover:not(:disabled) {
    background: var(--gray-200);
    color: var(--text-color);
}

.qty-stepper__btn:focus-visible,
.qty-stepper .qty-input:focus-visible {
    position: relative;
    z-index: 1;
}

.qty-stepper__btn .icon {
    display: block;
}

.qty-stepper__btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

[data-theme="high-contrast"] .qty-stepper {
    border-width: 2px;
}

[data-theme="high-contrast"] .qty-stepper input[type="number"].qty-input {
    border-width: 0;
}

/* ── Main content ── */
.main-content {
    flex: 1;
    padding: 2rem 0;
}

/* ── Footer ── */
.main-footer {
    background-color: var(--footer-bg);
    color: var(--text-on-dark);
    padding: 2rem 0;
    margin-top: auto;
    text-align: center;
}

.footer-sponsor {
    font-size: 0.9rem;
    margin-top: 0.5rem;
    opacity: var(--footer-text-opacity);
}

.footer-sponsor a {
    color: var(--footer-link-color);
}

/* ── Utilities ── */
.text-muted   { color: var(--text-muted); }
.text-subtle  { color: var(--text-subtle); }
.link-primary { color: var(--primary-color); font-weight: 600; }
.mt-1         { margin-top: 1rem; }
.mt-2         { margin-top: 2rem; }
.d-inline     { display: inline; }
.hidden       { display: none; }

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.2;
    white-space: nowrap;
}

.badge--price {
    background: var(--badge-bg);
    color: var(--badge-color);
}

.badge--free {
    background: color-mix(in srgb, var(--verified-color) 14%, var(--surface-color));
    color: var(--verified-color);
}

.badge--info {
    background: var(--plate-bg);
    color: var(--text-muted);
    border: 1px solid var(--hairline);
}

.badge--pending {
    background: var(--plate-bg);
    color: var(--text-subtle);
    border: 1px dashed var(--hairline);
    font-variant-numeric: tabular-nums;
}

/* Standalone form control (outside .form-group) — same grammar as form inputs */
.form-control {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-family: var(--font-ui);
    font-size: 1rem;
    background-color: var(--surface-color);
    color: var(--text-color);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus-visible {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: var(--focus-ring);
}

.form-hint {
    color: var(--text-muted);
    display: block;
}

.form-hint-center {
    color: var(--text-muted);
    text-align: center;
    display: block;
    margin-top: 0.5rem;
}

/* Empty state — shared across many views */
.empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3.5rem 1.5rem;
    background: transparent;
    border-radius: 0;
    border: 1px solid var(--hairline);
    color: var(--text-muted);
    line-height: 1.55;
    max-width: 36rem;
    margin-inline: auto;
}

.empty-state__alts-heading {
    margin: 1.25rem 0 0.65rem;
    color: var(--text-color);
    font-size: 0.95rem;
    font-weight: 600;
}

.empty-state__alts {
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 0.75rem;
}

.empty-state__alt {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
}

.empty-state__alt:hover {
    text-decoration: underline;
}

/* ── Layout switch (grid / list) ──
   Segmented toggle with icons — one quiet control for catalog density. */
.layout-switch {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    background: var(--plate-bg);
    gap: 0.1rem;
}

.layout-switch__option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.layout-switch__option:hover {
    color: var(--text-color);
}

.layout-switch__option.is-active,
.layout-switch__option[aria-pressed="true"],
[data-layout="grid"] .layout-switch__option[data-layout-option="grid"],
[data-layout="list"] .layout-switch__option[data-layout-option="list"],
[data-layout="auto"] .layout-switch__option[data-layout-option="list"] {
    background: var(--surface-color);
    color: var(--text-color);
    box-shadow: inset 0 0 0 1px var(--hairline);
}

/* When the root already says which layout is on, mute the inactive icon. */
[data-layout="grid"] .layout-switch__option[data-layout-option="list"],
[data-layout="list"] .layout-switch__option[data-layout-option="grid"],
[data-layout="auto"] .layout-switch__option[data-layout-option="grid"] {
    background: transparent;
    color: var(--text-muted);
    box-shadow: none;
}

@media (max-width: 900px) {
    [data-layout="auto"] .layout-switch__option[data-layout-option="grid"] {
        background: var(--surface-color);
        color: var(--text-color);
        box-shadow: inset 0 0 0 1px var(--hairline);
    }

    [data-layout="auto"] .layout-switch__option[data-layout-option="list"] {
        background: transparent;
        color: var(--text-muted);
        box-shadow: none;
    }
}

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

[data-theme="high-contrast"] .layout-switch {
    border-width: 2px;
    background: #000;
}

[data-theme="high-contrast"] .layout-switch__option.is-active,
[data-theme="high-contrast"] .layout-switch__option[aria-pressed="true"],
[data-theme="high-contrast"] [data-layout="grid"] .layout-switch__option[data-layout-option="grid"],
[data-theme="high-contrast"] [data-layout="list"] .layout-switch__option[data-layout-option="list"],
[data-theme="high-contrast"] [data-layout="auto"] .layout-switch__option[data-layout-option="list"] {
    background: #000;
    color: #FFFF00;
    box-shadow: inset 0 0 0 2px #FFFF00;
}

@media (max-width: 900px) {
    [data-theme="high-contrast"] [data-layout="auto"] .layout-switch__option[data-layout-option="grid"] {
        background: #000;
        color: #FFFF00;
        box-shadow: inset 0 0 0 2px #FFFF00;
    }

    [data-theme="high-contrast"] [data-layout="auto"] .layout-switch__option[data-layout-option="list"] {
        background: transparent;
        color: var(--text-muted);
        box-shadow: none;
    }
}

/* ── Theme switcher ── */
.theme-switcher {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.theme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: var(--border-width) solid transparent;
    border-radius: var(--radius);
    background: transparent;
    color: var(--header-on-band-muted);
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}

.theme-btn:hover {
    color: var(--primary-color);
    background-color: rgba(255, 255, 255, 0.08);
}

.theme-btn:focus-visible {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: var(--focus-ring);
}

.theme-btn[aria-pressed="true"] {
    color: var(--primary-color);
    background-color: rgba(var(--primary-rgb), 0.18);
    border-color: var(--primary-color);
}

.theme-icon {
    width: 1.15rem;
    height: 1.15rem;
}

.theme-icon-contrast .contrast-ring {
    fill: none;
    stroke: var(--header-on-band);
    stroke-width: 2;
}

.theme-icon-contrast .contrast-dark {
    fill: var(--theme-contrast-half-a);
    stroke: none;
}

.theme-icon-contrast .contrast-light {
    fill: var(--theme-contrast-half-b);
    stroke: none;
}

.theme-icon-contrast .contrast-divider {
    stroke: var(--theme-contrast-ring);
    stroke-width: 1.5;
    stroke-linecap: round;
}

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

/* ── High-contrast: visible borders on interactive surfaces ── */
[data-theme="high-contrast"] .main-header,
[data-theme="high-contrast"] .hero-section,
[data-theme="high-contrast"] .listing-card,
[data-theme="high-contrast"] .listing-badge-status,
[data-theme="high-contrast"] .product-card,
[data-theme="high-contrast"] .product-card__plate,
[data-theme="high-contrast"] .product-hero__plate,
[data-theme="high-contrast"] .honey-type-chip__plate,
[data-theme="high-contrast"] .apiary-card,
[data-theme="high-contrast"] .auth-container,
[data-theme="high-contrast"] .edit-profile-container,
[data-theme="high-contrast"] .dashboard-header,
[data-theme="high-contrast"] .stat-card,
[data-theme="high-contrast"] .empty-state,
[data-theme="high-contrast"] .apiary-photos__plate,
[data-theme="high-contrast"] .map-controls,
[data-theme="high-contrast"] .payment-result,
[data-theme="high-contrast"] .payment-pay-card,
[data-theme="high-contrast"] .payment-codes-section,
[data-theme="high-contrast"] .settlements-section,
[data-theme="high-contrast"] .dashboard-finance,
[data-theme="high-contrast"] .dashboard-sidebar,
[data-theme="high-contrast"] .order-card,
[data-theme="high-contrast"] .tabs-nav,
[data-theme="high-contrast"] .beekeeper-page__top,
[data-theme="high-contrast"] .beekeeper-note,
[data-theme="high-contrast"] .passport-score,
[data-theme="high-contrast"] .passport-welfare,
[data-theme="high-contrast"] .fulfillment-picker__option {
    border: 2px solid var(--gray-200);
    box-shadow: none;
}

[data-theme="high-contrast"] .fulfillment-picker__option:has(input:checked) {
    border-color: var(--primary-color);
    background: transparent;
}

/* Keep the round avatar; gold ring stays the identity cue in HC. */
[data-theme="high-contrast"] .beekeeper-portrait__plate {
    border: 3px solid var(--primary-color);
    box-shadow: none;
    border-radius: 50%;
}

[data-theme="high-contrast"] .btn-outline,
[data-theme="high-contrast"] .btn-secondary,
[data-theme="high-contrast"] .form-control,
[data-theme="high-contrast"] .form-group input,
[data-theme="high-contrast"] .form-group textarea,
[data-theme="high-contrast"] .form-group select,
[data-theme="high-contrast"] input[type="number"].qty-input,
[data-theme="high-contrast"] .filter-select,
[data-theme="high-contrast"] .theme-btn,
[data-theme="high-contrast"] .nav-toggle,
[data-theme="high-contrast"] .apiary-sort__select,
[data-theme="high-contrast"] .product-hero__badge,
[data-theme="high-contrast"] .product-card__badge,
[data-theme="high-contrast"] .trade-info,
[data-theme="high-contrast"] .payment-pay-summary,
[data-theme="high-contrast"] .payment-code-product {
    border-width: 2px;
}

/* In HC, --gray-100 is #000 — chip background disappears on black page. */
[data-theme="high-contrast"] .product-hero__badge-chip {
    background-color: transparent;
    border: 2px solid currentColor;
    color: var(--text-color);
}

[data-theme="high-contrast"] .product-card__badge {
    border-width: 2px;
    color: var(--text-color);
}

[data-theme="high-contrast"] .badge--price,
[data-theme="high-contrast"] .badge--info,
[data-theme="high-contrast"] .badge--pending,
[data-theme="high-contrast"] .badge--free {
    border: 2px solid currentColor;
    background: transparent;
}

[data-theme="high-contrast"] .product-card__passport {
    border-width: 2px;
    color: var(--text-color);
    background-color: transparent;
}

[data-theme="high-contrast"] .product-hero__badge-info-trigger {
    border-width: 2px;
}

/* popup shadow is invisible in HC; the border carries the separation instead */
[data-theme="high-contrast"] .product-hero__badge-info-text {
    border-width: 2px;
    box-shadow: none;
}

[data-theme="high-contrast"] .honey-tag,
[data-theme="high-contrast"] .popup-tag {
    border: 2px solid var(--badge-color);
}

[data-theme="high-contrast"] a:focus-visible,
[data-theme="high-contrast"] button:focus-visible,
[data-theme="high-contrast"] input:focus-visible,
[data-theme="high-contrast"] select:focus-visible,
[data-theme="high-contrast"] textarea:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
}

[data-theme="high-contrast"] .btn-outline:hover {
    color: var(--text-on-primary);
}

/* ── High-contrast: redesign components not covered by the blocks above ── */

/* apiary-rail__badge has no default border; in HC plate-bg = #000000 so the
   amber text floats on the same black surface without a frame. */
[data-theme="high-contrast"] .apiary-rail__badge {
    border: 2px solid var(--badge-color);
}

/* trade-badge borders use color-mix which resolves to near-transparent in HC. */
[data-theme="high-contrast"] .trade-badge-pickup,
[data-theme="high-contrast"] .trade-badge-payment {
    border-width: 2px;
    border-color: currentColor;
}

/* rating-score pill uses --gray-100 as background; in HC that token is #000000
   — identical to the page background, making the pill invisible. */
[data-theme="high-contrast"] .product-card__rating-score,
[data-theme="high-contrast"] .product-hero__rating-score {
    background-color: var(--gray-200);
    color: var(--text-on-primary);
}

/* facet-rail mobile sheet has border-right: 1px that should be 2px in HC. */
[data-theme="high-contrast"] .facet-rail {
    border-right-width: 2px;
}

/* Button row layouts */
.btn-row {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    flex-wrap: wrap;
    align-items: center;
}

.btn-row-equal {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
    align-items: stretch;
}

.btn-row-equal > .btn,
.btn-row-equal > .btn-row-form {
    flex: 1 1 0;
    min-width: 7rem;
}

.btn-row-equal > .btn-row-form {
    display: flex;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
}

.btn-row-equal > .btn-row-form .btn {
    flex: 1;
    width: 100%;
}

.btn-row-owner {
    display: flex;
    flex: 1 1 14rem;
    gap: 1rem;
    min-width: 14rem;
}

.btn-row-owner > .btn,
.btn-row-owner > .btn-row-form {
    flex: 1 1 0;
    min-width: 6.5rem;
}

.btn-row-owner > .btn-row-form {
    display: flex;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
}

.btn-row-owner > .btn-row-form .btn {
    flex: 1;
    width: 100%;
}

/* Owner preview callout — top of public pages the owner is viewing. */
.owner-preview {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    padding: 0.9rem 1.15rem;
    border: 1px solid var(--hairline);
    border-left: 3px solid var(--primary-color);
    border-radius: var(--radius);
    background: var(--plate-bg);
}

.owner-preview__copy {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    min-width: 0;
    flex: 1 1 16rem;
}

.owner-preview__icon {
    flex-shrink: 0;
    margin-top: 0.15em;
    color: var(--primary-color);
}

.owner-preview__text {
    margin: 0;
    color: var(--text-color);
    font-size: 0.95rem;
    line-height: 1.45;
}

.owner-preview__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}

.owner-preview__actions .btn-row-form {
    display: inline-flex;
    margin: 0;
}

.delete-confirm {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    max-width: 22rem;
}

.delete-confirm__panel {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    background: var(--plate-bg);
}

.delete-confirm__panel[hidden] {
    display: none;
}

.delete-confirm__message {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--text-color);
}

.delete-confirm__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.delete-confirm__form {
    display: inline;
    margin: 0;
}

[data-theme="high-contrast"] .owner-preview {
    border-width: 2px;
    border-left-width: 4px;
    background: #000;
}

/* Post-create confirmation on the owner dashboard. Same grammar as
   .owner-preview (plate, gold rule) so it is a moment, not a Bootstrap info
   alert. The check is "the listing is live", not a verification badge. */
.listing-posted {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 1.5rem;
    padding: 1.2rem 1.3rem 1.25rem;
    border: 1px solid var(--hairline);
    border-left: 3px solid var(--primary-color);
    border-radius: var(--radius);
    background: var(--plate-bg);
    color: var(--text-color);
}

.listing-posted__mark {
    flex-shrink: 0;
    margin-top: 0.2em;
    color: var(--primary-color);
}

.listing-posted__text {
    min-width: 0;
    flex: 1;
}

.listing-posted__heading {
    margin: 0 0 0.4rem;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--secondary-color);
}

.listing-posted__body {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text-muted);
}

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

.listing-posted__next li {
    margin: 0;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-sm);
    background: var(--surface-color);
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--text-color);
}

.listing-posted__actions {
    margin: 1.05rem 0 0;
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

[data-theme="high-contrast"] .listing-posted {
    border-width: 2px;
    border-left-width: 4px;
    background: #000;
}

/* ── Mobile layout ── */
@media (max-width: 768px) {
    .main-header {
        padding: 0.75rem 0 0;
    }

    /* Brand and toggle share the first row; the search field takes the whole
       second one. The utilities are what the toggle collapses — the search
       field is never part of that. header-start unwraps so logo and search
       can take their own orders. */
    .header-top {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        padding-bottom: 0.75rem;
    }

    .header-start {
        display: contents;
        max-width: none;
    }

    .logo {
        order: 1;
        margin-right: auto;
    }

    .logo-icon {
        height: 2.75rem;
    }

    .nav-toggle {
        display: inline-flex;
        order: 2;
    }

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

    .header-utilities {
        display: none;
        order: 4;
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        margin-left: 0;
        gap: 0.75rem;
        padding-top: 0.25rem;
    }

    .nav-separator {
        display: none;
    }

    /* Compact dropdown under the search field — not a full-screen sheet. */
    .main-header.nav-open .header-utilities {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.65rem;
        padding: 0.35rem 0 0.85rem;
    }

    .main-header.nav-open .header-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }

    .lang-switcher {
        justify-content: flex-start;
        flex: 1 1 auto;
        min-width: 0;
    }

    .lang-dropdown__button {
        padding-inline-start: 0;
    }

    /* The list floats over the menu and anchors to the button's start edge.
       Keeping it out of the flow leaves the toolbar row at its normal height
       instead of stretching the header while the list is open. */
    .lang-dropdown__list {
        inset-inline-start: 0;
        inset-inline-end: auto;
        min-width: 12rem;
    }

    .main-header.nav-open .header-menu-links {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.15rem;
        flex-shrink: 0;
    }

    .main-header.nav-open .header-cart,
    .main-header.nav-open .header-account,
    .main-header.nav-open .header-lookup {
        width: 2.5rem;
        height: 2.5rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        color: var(--header-on-band);
        text-decoration: none;
    }

    .main-header.nav-open .header-cart:hover,
    .main-header.nav-open .header-account:hover,
    .main-header.nav-open .header-lookup:hover {
        color: var(--primary-color);
    }

    .main-header.nav-open .header-util-link__icon {
        width: 2.5rem;
        height: 2.5rem;
        color: inherit;
    }

    .header-cart__badge {
        top: -0.2rem;
        right: -0.35rem;
    }

    .nav-auth {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        padding: 0;
    }

    .nav-auth .btn {
        width: 100%;
        border-radius: 999px;
        padding: 0.7rem 1.5rem;
        letter-spacing: 0.04em;
    }

    .main-header .btn:hover {
        transform: none;
        box-shadow: none;
    }

    .theme-switcher {
        justify-content: center;
    }

    .main-content {
        padding: 1.25rem 0;
    }

    .container {
        padding: 0 16px;
    }
}

/* ── Currency form inline layout ───────────────────────────────────────────── */
.user-currency-form {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.user-currency-form .form-group {
    margin-bottom: 0;
    flex: 0 0 auto;
}

.user-currency-form .form-group select {
    width: auto;
    /* padding-right stays with controls.css — it is the chevron's gutter. */
    padding-block: 0.6rem;
    padding-left: 0.75rem;
    font-size: 1rem;
}

.user-currency-form .btn {
    padding: 0.6rem 1.25rem;
    font-size: 1rem;
    white-space: nowrap;
}

/* ── Apiary visibility banner ──────────────────────────────────────────────── */
.apiary-visibility-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
    border: 1px solid transparent;
}

.apiary-visibility-banner.visibility-public {
    background: color-mix(in srgb, var(--verified-color) 14%, var(--surface-color));
    border-color: color-mix(in srgb, var(--verified-color) 40%, var(--hairline));
    color: var(--verified-color);
}

.apiary-visibility-banner.visibility-private {
    background: var(--alert-warning-bg);
    border-color: var(--alert-warning-border);
    color: var(--alert-warning-text);
}

[data-theme="dark"] .apiary-visibility-banner.visibility-public {
    background: #064e3b;
    border-color: #059669;
    color: #6ee7b7;
}

.visibility-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.visibility-badge {
    font-weight: 600;
    white-space: nowrap;
}

.visibility-hint {
    font-size: 0.875rem;
    opacity: 0.85;
}

/* ── Toggle switch (apiary card) ────────────────────────────────────────────── */
.apiary-card-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.apiary-card-actions .visibility-toggle-form {
    display: flex;
    align-items: center;
}

.visibility-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.8rem 0.3rem 0.6rem;
    border-radius: 999px;
    border: 1.5px solid var(--gray-300);
    background: var(--gray-100);
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    line-height: 1;
}

.visibility-switch:hover {
    border-color: var(--gray-400);
    background: var(--gray-200);
}

.visibility-switch__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gray-400);
    flex-shrink: 0;
    transition: background 0.15s;
}

.visibility-switch--on {
    background: #d1fae5;
    border-color: #6ee7b7;
    color: #065f46;
}

.visibility-switch--on:hover {
    background: #a7f3d0;
    border-color: #34d399;
}

.visibility-switch--on .visibility-switch__dot {
    background: #10b981;
}

[data-theme="dark"] .visibility-switch--on {
    background: #064e3b;
    border-color: #059669;
    color: #6ee7b7;
}

[data-theme="dark"] .visibility-switch--on .visibility-switch__dot {
    background: #34d399;
}

[data-theme="dark"] .visibility-switch--on:hover {
    background: #065f46;
}

.visibility-switch:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}