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

/* Telegram fullscreen safe-area insets.
   --tg-safe-* mirrors WebApp.safeAreaInset (device chrome: notch, Dynamic
   Island, home indicator) and --tg-content-* mirrors contentSafeAreaInset
   (Telegram's own overlays: close button, drag handle). app.js writes the
   live values via JS; the env() fallbacks keep things working in browsers
   that report iOS safe areas natively. We compose them into --safe-top etc.
   so consumers (header, bottom-nav, modals) only deal with one variable. */
:root {
    --tg-safe-top: 0px;
    --tg-safe-bottom: 0px;
    --tg-safe-left: 0px;
    --tg-safe-right: 0px;
    --tg-content-top: 0px;
    --tg-content-bottom: 0px;
    --tg-content-left: 0px;
    --tg-content-right: 0px;
}
:root {
    /* The two Telegram insets describe the same screen-edge coordinate space
       (they're independent measurements, not nested), so the real clearance
       is the largest of native env(), safeAreaInset, and contentSafeAreaInset
       — never their sum. */
    --safe-top:    max(env(safe-area-inset-top, 0px),    var(--tg-safe-top),    var(--tg-content-top));
    --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-bottom), var(--tg-content-bottom));
    --safe-left:   max(env(safe-area-inset-left, 0px),   var(--tg-safe-left),   var(--tg-content-left));
    --safe-right:  max(env(safe-area-inset-right, 0px),  var(--tg-safe-right),  var(--tg-content-right));
}

:root {
    /* Neutral grey baseline — admins set the real palette from the
       Appearance panel, which writes these vars onto :root at runtime
       via applyAppearance(). These defaults only govern the very first
       paint before config loads. */
    --brand-display-font: 'Pricedown Bl', Impact, sans-serif;
    --brand-ui-font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Inter', 'SF Pro Display', sans-serif;

    --dark-bg: #0d0d0d;
    --dark-secondary: #1a1a1a;
    --dark-tertiary: #242424;
    --dark-border: rgba(255, 255, 255, 0.08);
    --dark-text: #f5f5f5;
    --dark-text-secondary: rgba(255, 255, 255, 0.60);
    --dark-hint: rgba(255, 255, 255, 0.35);

    /* Accents — neutral grey */
    --accent-purple: #555555;
    --accent-pink: #888888;
    --accent-coral: #aaaaaa;
    --accent-gold: #999999;
    --accent-hotpink: #777777;

    /* Fade-gradient stops — these drive every rainbow gradient used on
       primary CTA buttons, prices, the logo, and other accent surfaces.
       Admins can override these four via the Appearance editor, which
       writes them onto :root through applyAppearance(). Neutral grey
       ramp out of the box. */
    --fade-1: #555555;
    --fade-2: #777777;
    --fade-3: #999999;
    --fade-4: #bbbbbb;

    /* Taxonomy chip colors — the color used for every tag chip (filter
       row + product card badges) and the color used for every farm chip
       (filter row + product detail chip). Both are admin-tweakable from
       the Appearance editor. The *-rgb pair holds the same color as
       "r, g, b" so we can build rgba(...) borders/backgrounds without
       relying on color-mix(). Neutral grey by default. */
    --tag-color: #888888;
    --tag-color-rgb: 136, 136, 136;
    --tag-ink: #ffffff;
    --farm-color: #888888;
    --farm-color-rgb: 136, 136, 136;
    --farm-ink: #ffffff;

    /* Flat accent used for hover borders, selection, loaders */
    --accent-blue: var(--accent-yellow);
    --accent-blue-hover: var(--accent-yellow);

    /* Primary accent / outlines — neutral grey */
    --accent-yellow: #888888;
    --accent-yellow-rgb: 136, 136, 136;
    --accent-ink: #ffffff;
    --accent-stroke: var(--accent-yellow);
    --stroke-dark: #1a1a1a;

    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.10);
}

/* Premium typography: elegant display + clean UI text */
#app h1,
#app h2,
#app h3,
#app .loading-text,
#app .welcome-title,
#app .welcome-subtitle {
    font-family: var(--brand-display-font) !important;
    font-weight: 700;
    letter-spacing: 0.2px;
}

#app .btn,
#app .nav-label,
#app .sort-drop-item,
#app .filter-row-label,
#app .profile-label,
#app .profile-user-id {
    font-family: var(--brand-ui-font) !important;
}

body {
    font-family: var(--brand-ui-font);
    background: #000;
    color: var(--dark-text);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#app {
    min-height: 100vh;
    position: relative;
    z-index: 1;
    padding-bottom: 70px;
    background: transparent;
}

.screen {
    display: none;
    min-height: calc(100vh - 70px);
    background: transparent;
}

/* ======================================================================
   Weed-leaves rain — sits behind the whole app, above body background.
   Leaves are spawned from JS in index.html; styling lives here.
   ====================================================================== */
.leaf-rain {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.leaf-rain .leaf {
    position: absolute;
    top: -10vh;
    will-change: transform, opacity;
    animation-name: leafFall;
    /* Slight ease so leaves aren't falling on perfect rails — real leaves
       decelerate and accelerate as air currents shift. */
    animation-timing-function: cubic-bezier(0.42, 0.1, 0.58, 0.92);
    animation-iteration-count: infinite;
    /* Subtle drop-shadow only — per-leaf blur is applied by JS for parallax
       depth-of-field (smaller/farther leaves look softer). */
    /* drop-shadow removed: will-change:transform + filter creates rectangular composite shadow */
}
/* S-shaped side-to-side drift with multiple waypoints for a natural flutter. */
@keyframes leafFall {
    0%   { transform: translate3d(0,                                           -10vh, 0)
                      rotate(0deg); }
    20%  { transform: translate3d(calc(var(--drift, 0px) *  0.55),              15vh, 0)
                      rotate(calc(var(--spin, 180deg) * 0.18)); }
    40%  { transform: translate3d(calc(var(--drift, 0px) * -0.35),              40vh, 0)
                      rotate(calc(var(--spin, 180deg) * 0.42)); }
    60%  { transform: translate3d(calc(var(--drift, 0px) *  0.7),               65vh, 0)
                      rotate(calc(var(--spin, 180deg) * 0.62)); }
    80%  { transform: translate3d(calc(var(--drift, 0px) * -0.15),              90vh, 0)
                      rotate(calc(var(--spin, 180deg) * 0.82)); }
    100% { transform: translate3d(var(--drift, 0px),                           115vh, 0)
                      rotate(var(--spin, 180deg)); }
}
.leaf-rain .leaf-flight-ltr { animation-name: leafFlyLtr; }
.leaf-rain .leaf-flight-rtl {
    animation-name: leafFlyRtl;
}
.leaf-rain .leaf-flight-flipped { --flight-facing: -1; }
/* Horizontal flight gets explicit paths in both directions. Mirroring lives
   at the end of each transform list, so it flips only the artwork's heading
   and never the translated coordinate system. The uneven bob waypoints,
   slight pitch changes, and per-pass altitude drift mimic powered flight
   without making the aircraft float like leaves. */
@keyframes leafFlyLtr {
    0%   { transform: translate3d(var(--flight-start), 0, 0)
                      rotate(0deg) scaleX(var(--flight-facing)); }
    14%  { transform: translate3d(14vw, calc(var(--bob-soft-neg) + var(--lane-drift-quarter)), 0)
                      rotate(var(--tilt-neg)) scaleX(var(--flight-facing)); }
    29%  { transform: translate3d(29vw, calc(var(--bob-soft) + var(--lane-drift-quarter)), 0)
                      rotate(var(--tilt)) scaleX(var(--flight-facing)); }
    43%  { transform: translate3d(43vw, calc(var(--bob-neg) + var(--lane-drift-half)), 0)
                      rotate(var(--tilt-neg)) scaleX(var(--flight-facing)); }
    57%  { transform: translate3d(57vw, calc(var(--bob-soft) + var(--lane-drift-half)), 0)
                      rotate(var(--tilt)) scaleX(var(--flight-facing)); }
    71%  { transform: translate3d(71vw, calc(var(--bob) + var(--lane-drift-three-quarter)), 0)
                      rotate(var(--tilt)) scaleX(var(--flight-facing)); }
    86%  { transform: translate3d(86vw, calc(var(--bob-soft-neg) + var(--lane-drift-three-quarter)), 0)
                      rotate(var(--tilt-neg)) scaleX(var(--flight-facing)); }
    100% { transform: translate3d(var(--flight-end), var(--lane-drift), 0)
                      rotate(0deg) scaleX(var(--flight-facing)); }
}
@keyframes leafFlyRtl {
    0%   { transform: translate3d(var(--flight-end), 0, 0)
                      rotate(0deg) scaleX(var(--flight-facing)); }
    14%  { transform: translate3d(86vw, calc(var(--bob-soft-neg) + var(--lane-drift-quarter)), 0)
                      rotate(var(--tilt)) scaleX(var(--flight-facing)); }
    29%  { transform: translate3d(71vw, calc(var(--bob-soft) + var(--lane-drift-quarter)), 0)
                      rotate(var(--tilt-neg)) scaleX(var(--flight-facing)); }
    43%  { transform: translate3d(57vw, calc(var(--bob-neg) + var(--lane-drift-half)), 0)
                      rotate(var(--tilt)) scaleX(var(--flight-facing)); }
    57%  { transform: translate3d(43vw, calc(var(--bob-soft) + var(--lane-drift-half)), 0)
                      rotate(var(--tilt-neg)) scaleX(var(--flight-facing)); }
    71%  { transform: translate3d(29vw, calc(var(--bob) + var(--lane-drift-three-quarter)), 0)
                      rotate(var(--tilt-neg)) scaleX(var(--flight-facing)); }
    86%  { transform: translate3d(14vw, calc(var(--bob-soft-neg) + var(--lane-drift-three-quarter)), 0)
                      rotate(var(--tilt)) scaleX(var(--flight-facing)); }
    100% { transform: translate3d(var(--flight-start), var(--lane-drift), 0)
                      rotate(0deg) scaleX(var(--flight-facing)); }
}
@media (prefers-reduced-motion: reduce) {
    .leaf-rain { display: none; }
    /* Neutralize CSS animation/transition timing for users who ask for
       reduced motion. Only affects timing (not layout or final state), so
       the UI still works identically — it just doesn't move. */
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

.screen.active {
    display: block;
}

.main-screen {
    padding-bottom: 70px;
}

/* Loading Screen — standalone fixed overlay, not part of .screen flow */
#loading {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #000;
    z-index: 9000;
    overflow: hidden;
}

#loading.active {
    display: flex !important;
}

.loading-text {
    font-family: var(--brand-display-font);
    font-size: 20px;
    letter-spacing: 2px;
    color: var(--dark-text-secondary);
    margin-top: 16px;
}

.loading-logo {
    width: 200px;
    height: 200px;
    margin-bottom: 40px;
    object-fit: contain;
    mix-blend-mode: screen;
    animation: fadeIn 0.5s ease-in-out, float 3s ease-in-out infinite;
}

/* Brand-name text fallback rendered into a logo slot when no logo image
   is configured. Each slot context sizes it; the shared rule gives it the
   accent fade gradient so it reads as the brand mark. Empty slots collapse. */
.logo-text-slot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--brand-display-font);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 0.5px;
    background-image: linear-gradient(135deg, var(--fade-1), var(--fade-2), var(--fade-3), var(--fade-4));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.logo-text-slot:empty {
    display: none;
}
span.loading-logo.logo-text-slot {
    height: auto;
    min-height: 0;
    margin-bottom: 40px;
    font-size: 40px;
    mix-blend-mode: normal;
    animation: fadeIn 0.5s ease-in-out, float 3s ease-in-out infinite;
    padding: 0 24px;
}
span.logo-img.logo-text-slot {
    height: 96px;
    font-size: 30px;
    padding: 0 12px;
}
span.contact-logo.logo-text-slot {
    font-size: 34px;
    padding: 0 16px;
}
span.welcome-logo.logo-text-slot {
    font-size: 44px;
    padding: 0 24px;
    margin-bottom: 16px;
}


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

.loader {
    border: 4px solid var(--dark-tertiary);
    border-top: 4px solid var(--accent-blue);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Age Verification Screen */
#age-verification {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
    background: transparent;
    transition: opacity 0.3s ease, transform 0.3s ease;
}.terms-checkbox {
    margin-bottom: 18px;
    text-align: left;
    padding: 14px;
    background: rgba(30, 30, 30, 0.5);
    border-radius: 14px;
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.terms-checkbox:has(input:checked) {
    border-color: var(--accent-blue);
    background: rgba(var(--accent-yellow-rgb), 0.1);
    box-shadow: 0 0 0 3px rgba(var(--accent-yellow-rgb), 0.1);
}

.terms-checkbox label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    color: var(--dark-text);
}

.terms-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    cursor: pointer;
    accent-color: var(--accent-blue);
}

#verify-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Header.
   In Telegram fullscreen the header sits underneath the iPhone Dynamic
   Island / status bar and underneath Telegram's close button. We extend
   the *background* up to the very top edge (so the blur/glass continues
   behind the system UI) but push the *content* down by --safe-top so the
   logo never collides with the time/wifi indicators or the close X. */
.header {
    position: sticky;
    top: 0;
    background: var(--glass-bg);
    padding: calc(14px + var(--safe-top)) calc(20px + var(--safe-right)) 14px calc(20px + var(--safe-left));
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--glass-border);
    z-index: 100;
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

/* On sub-pages (any header containing a back button), Telegram's close
   X overlay clips the upper-left of the header. The home header has no
   back button there, so its centered logo stays clear and we don't need
   to touch it. We only push these sub-page headers down a touch in
   fullscreen so the back button slides below the close X. */
body.tg-fullscreen .header:has(.btn-back) {
    padding-top: calc(14px + var(--safe-top) + 28px);
}

.header-logo {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.logo-img {
    height: 96px;
    width: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.header-logo:hover .logo-img {
    transform: scale(1.05);
}

.header h2 {
    font-family: var(--brand-display-font);
    font-size: 22px;
    font-weight: 900;
    color: var(--dark-text);
    letter-spacing: 0.5px;
    margin: 0;
}

/* Icon Buttons */
.btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    min-width: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background-color 0.2s;
    color: var(--dark-text);
}

.btn-icon:hover {
    background: var(--dark-tertiary);
}

.btn-icon svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
}

.btn-menu, .btn-back {
    color: var(--accent-blue);
}

/* Category Sidebar */
.sidebar {
    position: fixed;
    top: 0;
    left: -300px;
    width: 300px;
    height: 100vh;
    background: var(--glass-bg);
    border-right: 1px solid var(--glass-border);
    z-index: 1000;
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 4px 0 32px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
}

.sidebar.open {
    left: 0;
}

/* Sort Sidebar (opens from right) */
#sort-sidebar {
    left: auto;
    right: -300px;
    border-right: none;
    border-left: 1px solid var(--glass-border);
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#sort-sidebar.open {
    right: 0;
    left: auto;
}.sidebar-header {
    padding: 20px;
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(10, 10, 10, 0.5);
}

.sidebar-header h3 {
    font-family: var(--brand-display-font);
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 1px;
    background: linear-gradient(-45deg, var(--fade-1), var(--fade-2), var(--fade-3), var(--fade-4), var(--fade-3), var(--fade-2), var(--fade-1));
    --shl: 1;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-clip: text;
    letter-spacing: -0.5px;
}

.btn-close {
    color: var(--dark-text-secondary);
}

.btn-close:hover {
    color: var(--dark-text);
}

.sidebar-content {
    padding: 16px;
    overflow-y: auto;
    height: calc(100vh - 60px);
}

.category-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.category-item {
    padding: 16px 18px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 15px;
    font-weight: 600;
    color: var(--dark-text);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.category-item:hover {
    background: linear-gradient(-45deg, var(--fade-1), var(--fade-2), var(--fade-3), var(--fade-4), var(--fade-3), var(--fade-2), var(--fade-1));
    --shl: 1;
    color: #ffffff;
    border-color: transparent;
    transform: translateX(8px);
    box-shadow: 0 6px 20px rgba(var(--accent-yellow-rgb), 0.4);
}

.category-item.active {
    background: linear-gradient(-45deg, var(--fade-1), var(--fade-2), var(--fade-3), var(--fade-4), var(--fade-3), var(--fade-2), var(--fade-1));
    --shl: 1;
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 6px 20px rgba(var(--accent-yellow-rgb), 0.4);
}

.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 999;
    display: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.sidebar-overlay.show {
    display: block;
    opacity: 1;
}

/* Content */
.content {
    padding: 20px;
    background: transparent;
    min-height: calc(100vh - 140px);
}

/* Cart page content padding to prevent footer overlap */
#cart .content {
    padding-bottom: 180px;
}.sort-dropdown-wrap {
    position: relative;
    flex: 1;
}.sort-chevron {
    transition: transform 0.25s ease;
}

.sort-chevron.open {
    transform: rotate(180deg);
}

/* ── Sort dropdown panel ─────────────────────────────────────────────────── */
.sort-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--dark-secondary);
    border: 1px solid var(--dark-border);
    border-radius: 14px;
    overflow: hidden;
    z-index: 300;
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

.sort-dropdown.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

.sort-drop-item {
    display: block;
    width: 100%;
    padding: 13px 18px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--dark-border);
    text-align: left;
    font-family: var(--brand-display-font);
    font-size: 15px;
    letter-spacing: 0.3px;
    color: var(--dark-text);
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
}

.sort-drop-item:last-child {
    border-bottom: none;
}

.sort-drop-item:hover {
    background: rgba(255, 47, 168, 0.1);
    color: #FF2FA8;
}

.sort-drop-item.active {
    --shl: 1;
    color: #ffffff;
}

/* Block --shl inheritance from active item into its own text */
.sort-drop-item.active,
.sort-drop-item.active * {
    -webkit-text-fill-color: #ffffff;
    background-clip: initial;
    -webkit-background-clip: initial;
}

/* Products Grid */
.products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 4px;
}

.product-card {
    background: var(--dark-secondary);
    border: 1px solid var(--dark-border);
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    backdrop-filter: blur(20px);
}

.product-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(-45deg, var(--fade-1), var(--fade-2), var(--fade-3), var(--fade-4), var(--fade-3), var(--fade-2), var(--fade-1));
    --shl: 1;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 0;
    border-radius: 20px;
}

.product-card:hover::before {
    opacity: 0.05;
}

.product-card:hover {
    border-color: var(--accent-blue);
    box-shadow: 0 12px 40px rgba(var(--accent-yellow-rgb), 0.3), 0 0 0 1px rgba(var(--accent-yellow-rgb), 0.1);
    transform: translateY(-6px) scale(1.02);
}

.product-card:active {
    transform: translateY(-3px) scale(1);
}

.product-media {
    width: 100%;
    height: 200px;
    object-fit: cover;
    background: linear-gradient(135deg, var(--dark-tertiary) 0%, var(--dark-secondary) 100%);
    display: block;
    position: relative;
    overflow: hidden;
}

.product-media-error {
    width: 100%;
    height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--dark-tertiary);
    color: var(--dark-text-secondary);
    gap: 12px;
    padding: 20px;
    text-align: center;
}

.product-media-error svg {
    opacity: 0.5;
    color: var(--dark-text-secondary);
}

.product-media-error p {
    font-size: 13px;
    margin: 0;
    font-weight: 500;
    line-height: 1.4;
}

.product-media-error small {
    font-size: 11px;
    opacity: 0.7;
    display: block;
    margin-top: 4px;
}.product-media::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(to top, rgba(10, 10, 10, 0.6) 0%, transparent 100%);
    pointer-events: none;
}

.product-media img,
.product-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    display: block;
}

/* Ensure video plays smoothly */
.product-media video {
    background: var(--dark-tertiary);
}

/* For vertical videos, ensure they fit properly */
.product-media video[src] {
    object-position: center;
}

.product-card:hover .product-media img,
.product-card:hover .product-media video {
    transform: scale(1.08);
}

.product-info {
    padding: 14px;
    position: relative;
    z-index: 1;
}.product-name {
    font-family: var(--brand-display-font);
    font-size: 16px;
    font-weight: 900;
    margin-bottom: 6px;
    color: var(--dark-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    letter-spacing: 0.3px;
}

.product-price {
    font-family: var(--brand-display-font);
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 0.5px;
    background: linear-gradient(-45deg, var(--fade-1), var(--fade-2), var(--fade-3), var(--fade-4), var(--fade-3), var(--fade-2), var(--fade-1));
    --shl: 1;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.product-offers-count {
    font-size: 11px;
    color: var(--dark-text-secondary);
    font-weight: 500;
    opacity: 0.8;
}

/* Strikethrough original price shown next to the discounted one
 * when any offer on a product is on sale. */
.product-price-old {
    font-family: var(--brand-ui-font);
    font-size: 13px;
    font-weight: 500;
    color: var(--dark-text-secondary);
    text-decoration: line-through;
    opacity: 0.7;
    margin-right: 4px;
}

/* Sale ribbon in the upper-left of a product card. */
.product-promo-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: linear-gradient(135deg, #ff3b6b, #ff7a4d);
    color: #fff;
    font-family: var(--brand-ui-font);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.6px;
    padding: 4px 10px;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(255, 59, 107, 0.45);
    text-transform: uppercase;
    z-index: 2;
    pointer-events: none;
}
.product-card { position: relative; }

/* ==========================================================================
   Like (heart) button — frosted glass pill, top-right of the card media.
   Sale badge owns top-left (z-index 2), price row owns the bottom, so this
   sits at z-index 3 with no collisions. Liked LOOK is entirely class-driven
   (.liked) so it survives even with motion fully disabled; only the pop /
   burst / shrink / tick keyframes below are animation, kept to transform +
   opacity only.
   ========================================================================== */
.like-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(12, 12, 14, 0.55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.92);
    box-shadow: var(--elev-1);
    cursor: pointer;
    transition: transform 0.15s var(--press);
}

/* Detail-view variant: sits inline next to the product name instead of
   floating over the media. Stays position:relative (not static) so its own
   ::before (burst ring) / ::after (hit area) pseudo-elements still anchor
   to the button itself rather than escaping to the nearest ancestor. */
.like-btn.like-btn--inline {
    position: relative;
    top: auto;
    right: auto;
    z-index: auto;
    flex: 0 0 auto;
}

.like-btn:active {
    transform: scale(0.9);
}

/* Hit area — visual pill is ~32px tall, expand the tap target to >=44px
   without affecting layout. ::after reserved for the hit area, ::before
   is the like burst ring below. */
.like-btn::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: inherit;
}

.like-heart {
    display: block;
    color: inherit;
}

.like-btn.liked {
    color: var(--accent-yellow);
    border-color: rgba(var(--accent-yellow-rgb), 0.5);
    box-shadow: var(--elev-1), 0 0 0 4px rgba(var(--accent-yellow-rgb), 0.35);
}
.like-btn.liked .like-heart path {
    fill: currentColor;
}

.like-count {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2px;
    font-variant-numeric: tabular-nums;
}
.like-count:empty {
    display: none;
}

/* Burst ring — a circle centered on the heart that expands and fades. */
.like-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 15px;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    border: 2px solid currentColor;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
}
.like-btn--inline::before {
    left: 9px;
}

.like-btn.just-liked .like-heart {
    animation: like-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.like-btn.just-liked::before {
    animation: like-burst 0.5s var(--ease-out);
}
.like-btn.just-unliked .like-heart {
    animation: like-shrink 0.22s var(--press);
}

.like-count.tick {
    animation: like-count-tick 0.25s var(--ease-out);
}

@keyframes like-pop {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.32); }
    60%  { transform: scale(0.92); }
    100% { transform: scale(1); }
}

@keyframes like-shrink {
    0%   { transform: scale(1); }
    40%  { transform: scale(0.82); }
    100% { transform: scale(1); }
}

@keyframes like-burst {
    0%   { transform: scale(0.4); opacity: 0.75; }
    100% { transform: scale(1.6); opacity: 0; }
}

@keyframes like-count-tick {
    from { transform: translateY(4px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

/* Price + offers row */
.product-price-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
}

/* Farm label on card */
.product-farm-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #4ade80;
    margin-bottom: 4px;
    opacity: 0.85;
}

/* Tag badges row on card */
.product-tags-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
}

.tag-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.tag-badge {
    background: rgba(var(--tag-color-rgb), 0.12);
    color: var(--tag-color);
    border: 1px solid rgba(var(--tag-color-rgb), 0.35);
}

/* ── Filter chips section (two rows: tags + farms) ──────────────────────── */
.filter-chips-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 16px 10px;
}

/* Search box that live-narrows the tag/farm chip lists — essential once a
   tenant has dozens of tags. */
.filter-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 6px;
}
.filter-search-icon {
    position: absolute;
    left: 12px;
    color: var(--dark-hint);
    pointer-events: none;
}
.filter-search-input {
    flex: 1;
    height: 38px;
    padding: 0 34px 0 36px;
    border-radius: 12px;
    border: 1px solid var(--dark-border);
    background: var(--dark-secondary);
    color: var(--dark-text-primary);
    font-size: 14px;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    -webkit-appearance: none;
}
.filter-search-input::placeholder { color: var(--dark-hint); }
.filter-search-input:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(var(--accent-yellow-rgb), 0.18);
}
.filter-search-clear {
    position: absolute;
    right: 8px;
    width: 22px;
    height: 22px;
    display: none;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(var(--accent-yellow-rgb), 0.18);
    color: var(--dark-text-primary);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}
.filter-search-input:not(:placeholder-shown) ~ .filter-search-clear { display: inline-flex; }

/* Hint shown inside a chip row when search/faceting leaves it empty. */
.filter-chip-empty {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 6px;
    color: var(--dark-hint);
    font-size: 13px;
    font-style: italic;
    white-space: nowrap;
}

.filter-row-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
}

.filter-row-label {
    font-family: var(--brand-display-font);
    font-size: 11px;
    letter-spacing: 0.8px;
    color: var(--dark-hint);
    white-space: nowrap;
    flex-shrink: 0;
    text-transform: uppercase;
    min-width: 38px;
}

.filter-chips-inner {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding-bottom: 2px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    flex: 1;
}

.filter-chips-inner::-webkit-scrollbar { display: none; }

/* Edge fade so chips scroll off under a soft gradient instead of a hard cut. */
.filter-chips-inner {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}

.filter-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 15px;
    border-radius: 19px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--dark-border);
    background: var(--dark-secondary);
    color: var(--dark-text-secondary);
    transition: background .28s cubic-bezier(.22,1,.36,1),
                border-color .28s cubic-bezier(.22,1,.36,1),
                color .28s cubic-bezier(.22,1,.36,1),
                transform .12s cubic-bezier(.22,1,.36,1);
    scroll-snap-align: start;
    white-space: nowrap;
    line-height: 1;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}

/* Leading mark: a taxonomy-colored dot when idle, a check when active. */
.chip-mark {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--chip-dot, var(--dark-hint));
    transition: width .2s, height .2s, transform .2s, background .2s;
}
.filter-chip-tag  { --chip-dot: var(--tag-color); }
.filter-chip-farm { --chip-dot: var(--farm-color); }
.chip-label { line-height: 1; }

/* Active chip: filled with its taxonomy color, luminance-aware ink so light
   colors (e.g. Noir's near-white tag) stay readable instead of white-on-white. */
.filter-chip.active {
    background: var(--chip-color, var(--accent-blue));
    border-color: var(--chip-color, var(--accent-blue));
    color: var(--chip-ink, #fff);
    box-shadow: 0 4px 16px -2px rgba(var(--chip-color-rgb, var(--accent-yellow-rgb)), 0.5);
}
/* Active mark morphs the dot into a check drawn in the ink color. */
.filter-chip.active .chip-mark {
    width: 6px;
    height: 10px;
    border-radius: 0;
    background: transparent;
    border: solid var(--chip-ink, #fff);
    border-width: 0 2px 2px 0;
    transform: translateY(-1px) rotate(45deg);
}

.filter-chip-tag.active  { --chip-color: var(--tag-color);  --chip-ink: var(--tag-ink,  #fff); --chip-color-rgb: var(--tag-color-rgb); }
.filter-chip-farm.active { --chip-color: var(--farm-color); --chip-ink: var(--farm-ink, #fff); --chip-color-rgb: var(--farm-color-rgb); }

/* "All" chip — fixes the old bug where it used a light accent with white ink.
   It now carries the accent color + contrast-correct ink when active. */
.filter-chip-all.active {
    --chip-color: var(--accent-blue);
    --chip-ink: var(--accent-ink, #fff);
    --chip-color-rgb: var(--accent-yellow-rgb);
}
/* When a filter is set, the "All" chip becomes a "Clear" affordance with an ✕. */
.filter-chip-all.is-clear {
    color: var(--dark-text-primary);
    border-color: rgba(var(--accent-yellow-rgb), 0.45);
}
.filter-chip-all.is-clear .chip-mark {
    position: relative;
    width: 10px;
    height: 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.filter-chip-all.is-clear .chip-mark::before,
.filter-chip-all.is-clear .chip-mark::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 11px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent-blue);
}
.filter-chip-all.is-clear .chip-mark::before { transform: translate(-50%, -50%) rotate(45deg); }
.filter-chip-all.is-clear .chip-mark::after  { transform: translate(-50%, -50%) rotate(-45deg); }

@media (hover: hover) {
    .filter-chip:not(.active):hover {
        border-color: var(--chip-dot, var(--accent-blue));
        color: var(--dark-text-primary);
        transform: translateY(-1px);
    }
}
.filter-chip:active { transform: scale(0.95); }

/* Per-row active count badge appended to the "Tags" / "Farms" label. */
.filter-row-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    margin-left: 6px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--accent-blue);
    color: var(--accent-ink, #fff);
    font-family: var(--brand-ui-font);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0;
    vertical-align: middle;
}

/* Staggered entrance — gated to first paint by JS so it never replays on tap. */
.filter-chip.chip-in {
    animation: chipIn .42s cubic-bezier(.22,1,.36,1) both;
    animation-delay: calc(var(--chip-i, 0) * 28ms);
}
@keyframes chipIn {
    from { opacity: 0; transform: translateY(7px) scale(.96); }
    to   { opacity: 1; transform: none; }
}

/* Press pulse — a ring that fades out without shifting layout. */
.filter-chip.chip-pulse::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    border: 1.5px solid var(--chip-color, var(--accent-blue));
    animation: chipPulse .5s cubic-bezier(.22,1,.36,1) forwards;
    pointer-events: none;
}
@keyframes chipPulse {
    from { opacity: .7; transform: scale(1); }
    to   { opacity: 0;  transform: scale(1.18); }
}

@media (prefers-reduced-motion: reduce) {
    .filter-chip.chip-in { animation: none; }
    .filter-chip.chip-pulse::after { animation: none; content: none; }
    .filter-chip.active .chip-mark { transition: none; }
}

.btn {
    padding: 14px 28px;
    border: none;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
    letter-spacing: 0.3px;
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn:hover::before {
    width: 400px;
    height: 400px;
}

.btn:active {
    transform: scale(0.96);
}

.btn-primary {
    --shl: 1;
    background: linear-gradient(90deg, var(--fade-1), var(--fade-2), var(--fade-3), var(--fade-4));
    color: #0a0a0a;
    border: 1.5px solid var(--accent-yellow);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn-primary > * { --shl: 0; }

.btn-primary:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

.btn-secondary {
    background: var(--glass-bg);
    color: var(--dark-text);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(20px);
}

.btn-secondary:hover {
    background: var(--dark-tertiary);
    border-color: var(--accent-blue);
    box-shadow: 0 8px 20px rgba(var(--accent-yellow-rgb), 0.2);
    transform: translateY(-2px);
}

.btn-danger {
    background: #1a1a1a;
    color: var(--accent-yellow);
    box-shadow: 0 8px 24px rgba(255, 47, 168, 0.25);
    border: 1.5px solid var(--accent-yellow);
}

.btn-danger:hover {
    background: #242424;
    box-shadow: 0 12px 32px rgba(255, 47, 168, 0.4);
    transform: translateY(-2px);
}

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

/* ==========================================================
   Product Details — redesigned
   ========================================================== */
#product-details .content {
    padding: 0 16px 24px;
}

.product-details-hero {
    margin: 0 -16px 0;
    position: relative;
    background: radial-gradient(ellipse at top, rgba(var(--accent-yellow-rgb), 0.14), transparent 65%),
                var(--dark-secondary);
    border-bottom: 1px solid rgba(var(--accent-yellow-rgb), 0.18);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    max-height: 52vh;
}

.product-details-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 60px;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, var(--dark-bg, #000));
}

.product-details-media {
    width: 100%;
    max-height: 52vh;
    object-fit: contain;
    display: block;
    border-radius: 0;
    margin: 0;
    border: none;
    background: transparent;
}

.product-details-media img,
.product-details-media video {
    width: 100%;
    max-height: 52vh;
    object-fit: contain;
    display: block;
    border-radius: 0;
}

.product-details-body {
    padding-top: 18px;
}

/* ── Product gallery (extra media) ──────────────────────────────── */
.product-gallery {
    margin: 28px 0 20px;
    position: relative;
}

.gallery-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0 2px 10px;
}

.gallery-eyebrow {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    color: var(--text-secondary, rgba(255,255,255,0.55));
}

.gallery-counter {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.75);
    font-variant-numeric: tabular-nums;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 3px 9px;
    border-radius: 999px;
    backdrop-filter: blur(8px);
}
.gallery-counter-sep {
    opacity: 0.4;
    margin: 0 3px;
}

.gallery-viewer {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: #0a0a0a;
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow:
        0 18px 40px rgba(0,0,0,0.45),
        inset 0 0 0 1px rgba(255,255,255,0.02);
}

.gallery-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}
.gallery-track::-webkit-scrollbar { display: none; }

.gallery-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    aspect-ratio: 1 / 1;
    background: #0a0a0a;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.gallery-slide-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery-slide.is-video .gallery-slide-media {
    object-fit: contain;
    background: #000;
}

.gallery-progress {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 12px;
    height: 3px;
    border-radius: 999px;
    background: rgba(255,255,255,0.14);
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
}
.gallery-progress-fill {
    display: block;
    height: 100%;
    width: 0%;
    background: var(--accent-yellow, #ffd166);
    border-radius: 999px;
    transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 0 10px rgba(255, 209, 102, 0.55);
}

.gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(0,0,0,0.55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    z-index: 3;
    opacity: 0;
}
.gallery-viewer:hover .gallery-nav { opacity: 1; }
.gallery-nav:hover {
    background: rgba(0,0,0,0.78);
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}
.gallery-nav:active { transform: translateY(-50%) scale(0.96); }
.gallery-nav svg { width: 18px; height: 18px; }
.gallery-nav-prev { left: 10px; }
.gallery-nav-next { right: 10px; }

@media (hover: hover) and (pointer: fine) {
    .gallery-nav { display: flex; }
}

.gallery-thumbs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 12px 2px 4px;
    scrollbar-width: none;
    scroll-behavior: smooth;
}
.gallery-thumbs::-webkit-scrollbar { display: none; }

.gallery-thumb {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid transparent;
    padding: 0;
    background: var(--dark-tertiary, #1a1a1a);
    cursor: pointer;
    position: relative;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    opacity: 0.6;
}
.gallery-thumb:hover {
    transform: translateY(-2px);
    opacity: 0.85;
}
.gallery-thumb.is-active {
    opacity: 1;
    border-color: var(--accent-yellow, #ffd166);
    box-shadow:
        0 0 0 3px rgba(255, 209, 102, 0.18),
        0 6px 16px rgba(0,0,0,0.45);
    transform: translateY(-2px);
}

.gallery-thumb-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery-thumb-video {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.4);
    color: #fff;
    pointer-events: none;
}
.gallery-thumb-video svg {
    width: 20px;
    height: 20px;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
}
/* ─────────────────────────────────────────────────────────────── */

/* Meta chip row (category / farm) at top of details body */
.detail-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}
.detail-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--dark-text-secondary);
}
.detail-meta-chip svg { width: 12px; height: 12px; flex-shrink: 0; }
.detail-meta-chip--category { color: var(--accent-yellow); border-color: rgba(var(--accent-yellow-rgb), 0.3); background: rgba(var(--accent-yellow-rgb), 0.07); }
.detail-meta-chip--farm { color: var(--farm-color); border-color: rgba(var(--farm-color-rgb), 0.28); background: rgba(var(--farm-color-rgb), 0.07); }

/* Wraps the product name + inline like heart so the heart sits right-aligned
   on the same line as the title in the detail view. */
.product-details-name-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.product-details-name {
    font-family: var(--brand-display-font);
    font-size: 34px;
    font-weight: 900;
    letter-spacing: 0.8px;
    margin: 0 0 10px;
    color: var(--dark-text);
    line-height: 1.08;
}.detail-tags-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.product-details-description {
    font-size: 15px;
    color: var(--dark-text-secondary);
    margin-bottom: 22px;
    line-height: 1.6;
}

/* ---------- Offers block ---------- */
.offers-section { margin-top: 22px; }
.offers-section-title {
    font-family: var(--brand-display-font);
    font-size: 20px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent-yellow);
    margin: 0 0 12px;
    text-shadow: 0 2px 0 #1a1a1a;
}

.offers-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 0;
}

/* Customer type selector (shared / per-type products). */
.type-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
}
.type-chip {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 12px;
    border: 1px solid var(--dark-border);
    background: var(--dark-secondary);
    color: var(--dark-text-secondary);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s cubic-bezier(.22,1,.36,1), border-color .2s, color .2s, transform .12s;
}
.type-chip:active { transform: scale(0.96); }
.type-chip.active {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
    color: var(--accent-ink, #fff);
    box-shadow: 0 4px 16px -2px rgba(var(--accent-yellow-rgb), 0.5);
}
.offers-pick-hint {
    color: var(--dark-hint);
    font-size: 14px;
    padding: 8px 2px 4px;
    margin: 0;
}

/* Admin product editor — types block. */
.editor-types-block { display: flex; flex-direction: column; gap: 10px; }
.editor-types-blurb { color: var(--dark-text-secondary); font-size: 12.5px; line-height: 1.4; margin: 0; }
.editor-types-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.editor-types-toggle-copy { display: flex; flex-direction: column; gap: 2px; }
.editor-types-toggle-copy small { color: var(--dark-text-secondary); font-size: 12px; }
.editor-switch { position: relative; flex-shrink: 0; width: 46px; height: 28px; cursor: pointer; }
.editor-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.editor-switch-track { display: block; width: 46px; height: 28px; border-radius: 999px; background: rgba(255,255,255,0.14); transition: background .2s cubic-bezier(.22,1,.36,1); }
.editor-switch-thumb { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.45); transition: transform .2s cubic-bezier(.22,1,.36,1); }
.editor-switch input:checked ~ .editor-switch-track { background: var(--accent-blue, #34d399); }
.editor-switch input:checked ~ .editor-switch-track .editor-switch-thumb { transform: translateX(18px); }
.editor-types-list { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.editor-types-row { display: flex; align-items: center; gap: 8px; }
.editor-types-row .editor-input { flex: 1; }
.editor-offer-type {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding-top: 10px;
    border-top: 1px solid var(--dark-border);
}
.editor-offer-type > span { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--dark-text-secondary); }
.editor-offer-type-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.editor-otype-chip {
    flex: 0 0 auto;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 9px;
    border: 1px solid var(--dark-border);
    background: rgba(255, 255, 255, 0.05);
    color: var(--dark-text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.editor-otype-chip:active { transform: scale(0.96); }
.editor-otype-chip.active {
    background: rgba(var(--accent-yellow-rgb), 0.16);
    border-color: rgba(var(--accent-yellow-rgb), 0.6);
    color: var(--accent-yellow);
}
.editor-offer-type-hint { color: var(--dark-hint); font-size: 12px; }

.offer-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(var(--accent-yellow-rgb), 0.1);
    border: 1px solid rgba(var(--accent-yellow-rgb), 0.28);
    font-family: var(--brand-ui-font);
    font-size: 10.5px;
    font-weight: 800;
    color: var(--accent-yellow);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.offer-type-badge svg { width: 11px; height: 11px; flex-shrink: 0; }

.offer-name {
    font-family: var(--brand-display-font);
    font-weight: 900;
    margin: 0 0 4px;
    font-size: 20px;
    color: #fff;
    letter-spacing: 0.6px;
    line-height: 1.15;
    text-align: center;
    width: 100%;
}

.offer-description {
    font-size: 12.5px;
    color: var(--dark-text-secondary);
    margin: 0 0 2px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: center;
    width: 100%;
}

.offer-card-price {
    width: 100%;
    display: flex;
    justify-content: center;
}

.offer-price {
    font-family: var(--brand-display-font);
    font-size: 28px;
    font-weight: 900;
    letter-spacing: 0.8px;
    line-height: 1;
    background: linear-gradient(-45deg, var(--fade-1), var(--fade-2), var(--fade-3), var(--fade-4), var(--fade-3), var(--fade-2), var(--fade-1));
    --shl: 1;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
    margin: 0;
}

.offer-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--accent-yellow);
    background: rgba(var(--accent-yellow-rgb), 0.08);
    color: var(--accent-yellow);
    font-family: var(--brand-display-font);
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.12s ease, color 0.18s ease;
    margin-top: auto;
}
.offer-cta svg { width: 14px; height: 14px; flex-shrink: 0; transition: transform 0.18s ease; }
.offer-cta:hover {
    background: var(--accent-yellow);
    color: #0a0a0a;
}
.offer-cta:hover svg { transform: translateX(3px); }
.offer-cta:active { transform: scale(0.97); }

/* Bottom Navigation.
   Same trick as .header but on the bottom: glass extends to the home
   indicator, but tap targets sit above it. */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--glass-bg);
    border-top: 1px solid var(--glass-border);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px calc(var(--safe-right)) calc(12px + var(--safe-bottom)) calc(var(--safe-left));
    z-index: 100;
    box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
}

.nav-item {
    background: none;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 8px 20px;
    position: relative;
    color: var(--dark-text-secondary);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 12px;
}

/* Admin-only tab in the bottom nav: hidden for regular users, shown
 * once the server-verified is_admin flag flips body.is-admin. */
.nav-item-admin { display: none; }
body.is-admin .nav-item-admin { display: flex; }

/* When Admin is visible the bar has six slots; tighten padding a touch
 * so tap targets still fit on 360px-wide devices. */
body.is-admin .bottom-nav .nav-item { padding: 8px 12px; }
@media (max-width: 400px) {
    body.is-admin .bottom-nav .nav-item { padding: 8px 8px; }
    body.is-admin .bottom-nav .nav-label { font-size: 10px; }
}

.nav-item.active {
    color: var(--accent-blue);
    background: rgba(var(--accent-yellow-rgb), 0.12);
}

.nav-item.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 3px;
    background: var(--accent-blue);
    border-radius: 0 0 3px 3px;
    box-shadow: 0 2px 8px rgba(var(--accent-yellow-rgb), 0.45);
}

/* Bottom active underline indicator (Home / Shop / Profile & Orders) */
.nav-item.active::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 34px;
    height: 3px;
    background: var(--accent-gold);
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(var(--accent-yellow-rgb), 0.5);
}

.nav-icon {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    stroke-width: 2;
    transition: transform 0.2s;
}

.nav-item.active .nav-icon {
    stroke-width: 2.5;
}

.nav-item:active .nav-icon {
    transform: scale(0.95);
}

.nav-label {
    font-size: 12px;
    font-weight: 500;
}.language-item {
    background: linear-gradient(135deg, 
        rgba(30, 30, 35, 0.9) 0%, 
        rgba(40, 40, 50, 0.9) 50%,
        rgba(30, 30, 35, 0.9) 100%);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 18px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 14px;
    font-size: 16px;
    color: var(--dark-text);
    backdrop-filter: blur(30px);
    position: relative;
    overflow: hidden;
}

.language-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(var(--accent-yellow-rgb), 0.1), 
        transparent);
    transition: left 0.6s;
}

.language-item:hover::before {
    left: 100%;
}

.language-item:hover {
    border-color: var(--accent-blue);
    box-shadow: 0 8px 32px rgba(var(--accent-yellow-rgb), 0.2);
    transform: translateY(-4px);
}

.language-item:active {
    transform: translateY(-2px) scale(0.98);
}

.language-item.active {
    background: linear-gradient(-45deg, var(--fade-1), var(--fade-2), var(--fade-3), var(--fade-4), var(--fade-3), var(--fade-2), var(--fade-1));
    --shl: 1;
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 8px 32px rgba(var(--accent-yellow-rgb), 0.4);
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 80px 20px;
    animation: fadeIn 0.5s ease-in-out;
    position: relative;
}

.empty-state::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(var(--accent-yellow-rgb), 0.1) 0%, transparent 70%);
    border-radius: 50%;
    animation: pulse 3s ease-in-out infinite;
}

.empty-state svg {
    color: var(--accent-blue);
    opacity: 0.5;
    position: relative;
    z-index: 1;
}

.empty-state p {
    font-size: 16px;
    color: var(--dark-text-secondary);
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}/* ==================================================================
   Profile – polished layout
   ================================================================== */
.profile-content {
    padding: 20px 16px 32px;
}

/* Hero: avatar + name + handle + premium badge */
.profile-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 24px 16px 20px;
    margin-bottom: 22px;
    background: linear-gradient(180deg, rgba(var(--accent-yellow-rgb), 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(var(--accent-yellow-rgb), 0.18);
    border-radius: 22px;
    position: relative;
    overflow: hidden;
}

.profile-hero::before {
    content: "";
    position: absolute;
    inset: -40% -10% auto -10%;
    height: 160px;
    background: radial-gradient(ellipse at top, rgba(var(--accent-yellow-rgb), 0.18), transparent 70%);
    pointer-events: none;
}

.profile-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: #111;
    border: 2px solid var(--accent-yellow);
    box-shadow: 0 0 0 4px rgba(var(--accent-yellow-rgb), 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-yellow);
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

#profile-icon-fallback { width: 46px; height: 46px; }

.profile-displayname {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.2px;
    margin: 4px 0 0;
    z-index: 1;
}

.profile-meta-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    z-index: 1;
}

.profile-handle {
    font-size: 14px;
    color: var(--dark-text-secondary);
    font-weight: 500;
}

.profile-premium-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-yellow);
    background: rgba(var(--accent-yellow-rgb), 0.12);
    border: 1px solid rgba(var(--accent-yellow-rgb), 0.35);
    padding: 4px 10px;
    border-radius: 999px;
    letter-spacing: 0.2px;
}

.profile-premium-badge svg {
    width: 12px;
    height: 12px;
}

/* Language card */
.profile-lang-card {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    margin-bottom: 22px;
    background: linear-gradient(135deg, var(--dark-secondary) 0%, var(--dark-tertiary) 100%);
    border: 1px solid var(--dark-border);
    border-radius: 16px;
    color: var(--dark-text);
    cursor: pointer;
    transition: border-color 0.2s, transform 0.1s;
}

.profile-lang-card:hover { border-color: rgba(var(--accent-yellow-rgb), 0.45); }
.profile-lang-card:active { transform: scale(0.99); }

.profile-lang-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(var(--accent-yellow-rgb), 0.08);
    border: 1px solid rgba(var(--accent-yellow-rgb), 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-yellow);
    flex-shrink: 0;
}

.profile-lang-icon svg { width: 22px; height: 22px; }

.profile-lang-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}

.profile-lang-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
    color: var(--dark-text-secondary);
}

.profile-lang-value {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.profile-lang-chev {
    width: 18px;
    height: 18px;
    color: var(--dark-text-secondary);
    flex-shrink: 0;
}

/* Section heading (shared in profile screen) */
.profile-section-heading {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--dark-text-secondary);
    margin: 4px 4px 10px;
}

/* Detail list */
.detail-list {
    background: linear-gradient(135deg, var(--dark-secondary) 0%, var(--dark-tertiary) 100%);
    border: 1px solid var(--dark-border);
    border-radius: 16px;
    padding: 4px 16px;
    margin-bottom: 22px;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.detail-row:last-child { border-bottom: none; }

.detail-label {
    font-size: 13px;
    color: var(--dark-text-secondary);
    font-weight: 500;
    flex-shrink: 0;
}

.detail-value {
    font-size: 14px;
    color: #fff;
    font-weight: 600;
    text-align: right;
    word-break: break-word;
    max-width: 60%;
}

.detail-value-mono {
    font-family: 'SF Mono', 'Monaco', 'Menlo', Consolas, monospace;
    font-size: 13px;
    letter-spacing: 0.3px;
}

.language-flag-display {
    font-size: 22px;
    line-height: 1;
}

.language-name-display {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}

.profile-section {
    margin-bottom: 24px;
}/* Custom Popup */
.custom-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: flex-end;
    opacity: 0;
    transition: opacity 0.3s;
}

.custom-popup.show {
    opacity: 1;
}

.custom-popup.show .custom-popup-content {
    transform: translateY(0);
}

/* Backdrop sits inside the .custom-popup fixed container */
.custom-popup-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 0;
}
/* Content sheet sits on top of the backdrop */
.custom-popup > .custom-popup-content {
    position: relative;
    z-index: 1;
}

/* -------- Product reorder popup -------- */
.reorder-popup-content {
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.reorder-popup-body {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 4px;
}
.reorder-hint {
    margin-bottom: 12px;
    font-size: 13px;
}
.reorder-footer {
    display: flex;
    gap: 10px;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--dark-border);
    flex-shrink: 0;
}
.reorder-footer .btn { flex: 1; }

.sort-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sort-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}
.sort-item--ghost {
    opacity: 0.88;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
    border-color: var(--accent-yellow, #5ac8fa) !important;
    border-radius: 12px;
    background: #1b1b1f;
}
.sort-placeholder {
    border: 2px dashed rgba(255,255,255,0.13);
    border-radius: 12px;
    background: rgba(255,255,255,0.02);
    pointer-events: none;
}
.sort-handle {
    color: var(--dark-hint);
    cursor: grab;
    flex-shrink: 0;
    padding: 4px 2px;
    touch-action: none;
    display: flex;
    align-items: center;
}
.sort-handle:active { cursor: grabbing; }
.sort-thumb {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}
.sort-thumb-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.07);
    font-weight: 700;
    font-size: 14px;
    color: var(--dark-text-secondary);
}
.sort-name {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: var(--dark-text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sort-hidden-badge {
    font-size: 11px;
    font-weight: 700;
    color: var(--dark-hint);
    background: rgba(255,255,255,0.06);
    border-radius: 6px;
    padding: 2px 6px;
    margin-left: 6px;
    vertical-align: middle;
}

.custom-popup-content {
    position: relative;
    background: #141417;
    background-image: linear-gradient(180deg, #1b1b1f 0%, #111114 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px 22px 0 0;
    width: 100%;
    max-height: 78vh;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform 0.3s;
    box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.65);
    display: flex;
    flex-direction: column;
}

.custom-popup-header {
    padding: 20px;
    border-bottom: 1px solid var(--dark-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.custom-popup-header h3 {
    font-family: var(--brand-display-font);
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 0.5px;
    color: var(--dark-text);
    margin: 0;
}

.custom-popup-close {
    background: none;
    border: none;
    color: var(--dark-text-secondary);
    font-size: 24px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s;
}

.custom-popup-close:hover {
    background: var(--dark-secondary);
}

.custom-popup-body {
    padding: 8px;
    overflow-y: auto;
    flex: 1;
}

.language-popup-item {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    border-radius: 12px;
    margin: 4px 0;
    transition: background 0.2s;
}

.language-popup-item:hover {
    background: var(--dark-secondary);
}

.language-popup-item.active {
    background: rgba(var(--accent-yellow-rgb), 0.1);
    font-weight: 600;
}

.language-flag {
    font-size: 24px;
    width: 32px;
    text-align: center;
}

.language-name {
    flex: 1;
    font-size: 16px;
    color: var(--dark-text);
}

.language-popup-item.active .language-name {
    color: var(--accent-blue);
}

.language-check {
    font-size: 20px;
    color: var(--accent-blue);
    margin-left: auto;
}

/* List */
.list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Scrollbar Styling for Dark Theme */
::-webkit-scrollbar {
    width: 8px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--dark-border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--dark-hint);
}

/* Offer cards — 2-per-row vertical premium cards (centered content) */
.offer-card {
    background: linear-gradient(160deg, rgba(var(--accent-yellow-rgb), 0.05) 0%, rgba(255, 255, 255, 0.02) 60%, rgba(0, 0, 0, 0.15) 100%);
    border: 1px solid rgba(var(--accent-yellow-rgb), 0.25);
    border-radius: 16px;
    padding: 14px 14px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    gap: 10px;
    min-height: 180px;
    transition: border-color 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    position: relative;
    overflow: hidden;
}

.offer-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-yellow-rgb), 0.12), transparent);
    transition: left 0.6s ease;
    pointer-events: none;
}

.offer-card:hover::before { left: 100%; }

/* Offer on sale: soft warm glow + diagonal sale ribbon. */
.offer-card.has-promo {
    border-color: rgba(255, 90, 120, 0.55);
    box-shadow: 0 0 0 1px rgba(255, 90, 120, 0.18), 0 10px 30px rgba(255, 90, 120, 0.14);
}
.offer-promo-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(135deg, #ff3b6b, #ff7a4d);
    color: #fff;
    font-family: var(--brand-ui-font);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.6px;
    padding: 4px 9px;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(255, 59, 107, 0.45);
    text-transform: uppercase;
    z-index: 2;
    pointer-events: none;
}
/* Original (pre-discount) price shown above the active price. */
.offer-price-old {
    display: inline-block;
    font-family: var(--brand-ui-font);
    font-size: 14px;
    font-weight: 500;
    color: var(--dark-text-secondary);
    text-decoration: line-through;
    opacity: 0.75;
    margin-right: 6px;
}
.offer-card.has-promo .offer-price {
    /* Pull the sale price slightly forward so the eye lands on it. */
    filter: drop-shadow(0 1px 6px rgba(255, 90, 120, 0.35));
}

.offer-card:hover {
    border-color: rgba(var(--accent-yellow-rgb), 0.55);
    box-shadow: 0 10px 30px rgba(var(--accent-yellow-rgb), 0.18);
    transform: translateY(-3px);
}

.offer-card-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 100%;
    margin-top: auto;
}/* Smooth Page Transitions */
.screen {
    animation: fadeInUp 0.3s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hover Effects for Interactive Elements */
.category-item,
.language-item {
    position: relative;
    overflow: hidden;
}

.category-item::after,
.language-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(51, 144, 236, 0.1), transparent);
    transition: left 0.5s;
}

.category-item:hover::after,
.language-item:hover::after {
    left: 100%;
}

/* Glassmorphism Effects */
.header,
.cart-footer,
.bottom-nav {
    background: rgba(10, 10, 10, 0.8);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}

/* Improved Focus States */
input:focus,
select:focus,
button:focus {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Custom Selection Color */
::selection {
    background: var(--accent-blue);
    color: white;
}

::-moz-selection {
    background: var(--accent-blue);
    color: white;
}

/* Welcome Animation */
.welcome-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.welcome-overlay.show {
    opacity: 1;
}

.welcome-overlay.fade-out {
    opacity: 0;
}

.welcome-content {
    text-align: center;
    animation: welcomeSlideUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.welcome-logo {
    width: 220px;
    height: auto;
    margin-bottom: 32px;
    animation: welcomeScale 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.welcome-title {
    font-family: var(--brand-display-font);
    font-size: 42px;
    font-weight: 900;
    letter-spacing: 1px;
    color: var(--dark-text);
    margin-bottom: 12px;
    animation: welcomeFadeIn 1s ease-in-out 0.3s backwards;
}

.welcome-subtitle {
    font-family: var(--brand-display-font);
    font-size: 18px;
    letter-spacing: 2px;
    color: var(--dark-text-secondary);
    animation: welcomeFadeIn 1s ease-in-out 0.5s backwards;
}

@keyframes welcomeSlideUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes welcomeScale {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes welcomeFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Responsive adjustments for cart popup */
@media (max-width: 480px) {
    /* Keep 2 products per row on mobile */
    .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
        padding: 4px;
    }
    
    .product-media {
        height: 180px;
    }
    
    /* Tighter offer cards on very small screens — still 2 per row */
    .offers-list { gap: 10px; }
    .offer-card {
        padding: 12px 12px 10px;
        min-height: 160px;
        border-radius: 14px;
    }
    .offer-name { font-size: 18px; }
    .offer-price { font-size: 24px; }
    .offer-cta { padding: 9px 10px; font-size: 13px; }

    .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
    }
}

/* Tablet Optimization */
@media (min-width: 481px) and (max-width: 768px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .product-media {
        height: 200px;
    }
}

/* Desktop Optimization */
@media (min-width: 769px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        max-width: 800px;
        margin: 0 auto;
    }
    
    .product-media {
        height: 240px;
    }
}

/* ============================================================================
   OnlyTerps Swiss — Reviews / Info / Contact screens + order-contact popup
   GTA palette, yellow outlines, works on top of the leaf rain.
   ============================================================================ */

/* Bottom nav: 5 items now — tighten padding / label size so nothing overflows */
.bottom-nav .nav-item {
    padding: 8px 8px;
    flex: 1 1 0;
    min-width: 0;
}
.bottom-nav .nav-label {
    font-size: 11px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 360px) {
    .bottom-nav .nav-label { font-size: 10px; }
}

/* ---------- Bitcoin merchant credit ---------- */
.wallet-content {
    width: min(100%, 720px);
    margin: 0 auto;
    padding: 18px 16px 110px;
}
.wallet-balance-panel,
.wallet-address-panel,
.wallet-history-section {
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    background: var(--glass-bg);
    box-shadow: var(--elev-1);
}
.wallet-balance-panel { padding: 20px; }
.wallet-balance-topline,
.wallet-section-heading,
.wallet-address-row,
.wallet-deposit-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.wallet-balance-topline {
    color: var(--dark-text-secondary);
    font-size: 13px;
    font-weight: 700;
}
.wallet-network-badge,
.wallet-status {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 8px;
    border: 1px solid var(--accent-yellow);
    border-radius: 999px;
    color: var(--accent-yellow);
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}
.wallet-balance-value {
    margin-top: 12px;
    color: var(--dark-text-primary);
    font-family: var(--font-mono, monospace);
    font-size: 30px;
    font-weight: 800;
    line-height: 1.15;
}
.wallet-balance-value small { font-size: 14px; color: var(--dark-text-secondary); }
.wallet-balance-atomic {
    margin-top: 6px;
    color: var(--dark-hint);
    font-family: var(--font-mono, monospace);
    font-size: 13px;
}
.wallet-address-cta {
    width: 100%;
    min-height: 48px;
    margin: 14px 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.wallet-address-panel,
.wallet-history-section { padding: 16px; margin-top: 14px; }
.wallet-section-heading { margin-bottom: 14px; }
.wallet-section-heading h3 {
    margin: 0;
    font-size: 15px;
    letter-spacing: 0;
}
.wallet-section-heading > span:not(.wallet-status) {
    color: var(--dark-hint);
    font-size: 12px;
}
.wallet-qr-shell {
    width: min(210px, 70vw);
    aspect-ratio: 1;
    margin: 0 auto 14px;
    display: grid;
    place-items: center;
    padding: 10px;
    border-radius: 8px;
    background: #ffffff;
}
.wallet-qr-shell img { width: 100%; height: 100%; object-fit: contain; }
.wallet-qr-loading { color: #222222; font-size: 13px; font-weight: 700; }
.wallet-address-row {
    min-height: 48px;
    padding: 8px 8px 8px 12px;
    border: 1px solid var(--dark-border);
    border-radius: 8px;
    background: var(--dark-secondary);
}
.wallet-address-row code {
    min-width: 0;
    color: var(--dark-text-primary);
    font-family: var(--font-mono, monospace);
    font-size: 12px;
    overflow-wrap: anywhere;
}
.wallet-copy { flex: 0 0 44px; min-width: 44px; min-height: 44px; }
.wallet-network-warning {
    margin-top: 10px;
    color: #ffbe55;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}
.wallet-deposit-list { display: grid; gap: 8px; }
.wallet-deposit-item {
    min-height: 58px;
    padding: 10px 0;
    border-bottom: 1px solid var(--dark-border);
}
.wallet-deposit-item:last-child { border-bottom: 0; }
.wallet-deposit-main { min-width: 0; display: grid; gap: 4px; }
.wallet-deposit-main strong { font-size: 14px; }
.wallet-deposit-main code { color: var(--dark-hint); font-size: 11px; }
.wallet-status-credited { color: #54d68b; border-color: #54d68b; }
.wallet-status-reversed { color: #ff7171; border-color: #ff7171; }
.wallet-empty { padding: 24px 0 12px; color: var(--dark-hint); text-align: center; }
.wallet-empty[hidden] { display: none; }
.wallet-address-panel[hidden],
.wallet-address-row[hidden],
.wallet-qr-shell img[hidden],
.wallet-qr-loading[hidden] { display: none; }
@media (max-width: 390px) {
    .bottom-nav .nav-item { padding-inline: 3px; }
    .bottom-nav .nav-label { font-size: 9px; }
    .wallet-balance-value { font-size: 26px; }
}

/* ---------- Reviews ---------- */
.reviews-stats {
    display: grid;
    grid-template-columns: minmax(120px, 160px) 1fr;
    gap: 20px;
    padding: 20px;
    margin: 0 0 18px;
    background: var(--glass-bg);
    border: 1px solid var(--accent-yellow);
    border-radius: 18px;
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
}
.reviews-avg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 6px 0;
    border-right: 1px solid rgba(var(--accent-yellow-rgb), 0.25);
}
.reviews-avg-num {
    font-family: var(--brand-display-font);
    font-size: 54px;
    line-height: 1;
    color: var(--accent-yellow);
    letter-spacing: 1px;
    text-shadow: 0 2px 0 #1a1a1a, 0 0 18px rgba(var(--accent-yellow-rgb), 0.35);
}
.reviews-stars-big {
    display: inline-flex;
    gap: 4px;
    font-size: 20px;
    margin-top: 6px;
    color: rgba(255, 255, 255, 0.2);
    letter-spacing: 2px;
}
.reviews-stars-big span.on { color: var(--accent-yellow); text-shadow: 0 0 6px rgba(var(--accent-yellow-rgb), 0.45); }
.reviews-count {
    margin-top: 6px;
    font-size: 12px;
    color: var(--dark-text-secondary);
}
.reviews-breakdown {
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: center;
}
.breakdown-row {
    display: grid;
    grid-template-columns: 28px 1fr 28px;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--dark-text-secondary);
}
.breakdown-label { font-weight: 600; color: var(--dark-text); }
.breakdown-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid rgba(var(--accent-yellow-rgb), 0.25);
}
.breakdown-fill {
    height: 100%;
    background: var(--accent-yellow);
    border-radius: 999px;
    box-shadow: 0 0 10px rgba(var(--accent-yellow-rgb), 0.45);
    transition: width 0.4s ease;
}
.breakdown-count { text-align: right; color: var(--dark-text); font-weight: 600; }

/* ---- Review form ---- */
.review-form-card {
    padding: 20px;
    background: var(--glass-bg);
    border: 1px solid var(--accent-yellow);
    border-radius: 18px;
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    margin-bottom: 22px;
}
.review-form-title {
    font-family: var(--brand-display-font);
    font-size: 26px;
    letter-spacing: 1px;
    color: var(--accent-yellow);
    margin: 0 0 4px;
    text-shadow: 0 2px 0 #1a1a1a;
}
.review-form-sub {
    font-size: 13px;
    color: var(--dark-text-secondary);
    margin: 0 0 14px;
}
.star-input {
    display: flex;
    gap: 6px;
    margin: 4px 0 14px;
}
.star-input .star-btn {
    font-size: 32px;
    line-height: 1;
    background: none;
    border: none;
    padding: 4px 2px;
    color: rgba(255, 255, 255, 0.22);
    cursor: pointer;
    transition: transform 0.15s ease, color 0.15s ease, text-shadow 0.15s ease;
}
.star-input .star-btn:hover { transform: scale(1.08); }
.star-input .star-btn.on {
    color: var(--accent-yellow);
    text-shadow: 0 0 10px rgba(var(--accent-yellow-rgb), 0.55);
}
#review-comment {
    width: 100%;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--accent-yellow);
    border-radius: 12px;
    color: var(--dark-text);
    padding: 12px 14px;
    font: inherit;
    resize: vertical;
    min-height: 88px;
    outline: none;
    transition: box-shadow 0.2s ease;
}
#review-comment:focus {
    box-shadow: 0 0 0 3px rgba(var(--accent-yellow-rgb), 0.25);
}
.anon-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0;
    font-size: 14px;
    color: var(--dark-text);
    cursor: pointer;
    user-select: none;
}
.anon-toggle input { display: none; }
.anon-toggle-box {
    width: 22px;
    height: 22px;
    border: 2px solid var(--accent-yellow);
    border-radius: 6px;
    position: relative;
    transition: background 0.2s ease;
}
.anon-toggle input:checked + .anon-toggle-box {
    background: var(--accent-yellow);
}
.anon-toggle input:checked + .anon-toggle-box::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 11px;
    border: solid #0a0a0a;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}
.review-form-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}

/* ---- Reviews list ---- */
.reviews-list-header h3 {
    font-family: var(--brand-display-font);
    font-size: 22px;
    letter-spacing: 1px;
    color: var(--accent-yellow);
    margin: 6px 0 12px;
    text-shadow: 0 2px 0 #1a1a1a;
}
.reviews-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 20px;
}
.review-card {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 12px;
    padding: 14px;
    background: var(--glass-bg);
    border: 1px solid var(--accent-yellow);
    border-radius: 14px;
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
}
.review-card.skeleton {
    min-height: 80px;
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
    animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 0.9; }
}
.review-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--accent-yellow);
    background: #111;
}
.review-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--brand-display-font);
    font-size: 22px;
    color: var(--accent-yellow);
    background: #0a0a0a;
}
.review-avatar-fallback.anon {
    color: #777;
    background: repeating-linear-gradient(45deg, #0f0f0f 0 6px, #1a1a1a 6px 12px);
}
.review-body { min-width: 0; }
.review-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}
.review-name {
    font-weight: 700;
    color: var(--dark-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60%;
}
.review-stars {
    display: inline-flex;
    gap: 2px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.2);
    letter-spacing: 1px;
    flex-shrink: 0;
}
.review-stars .on { color: var(--accent-yellow); text-shadow: 0 0 6px rgba(var(--accent-yellow-rgb), 0.45); }
.review-text {
    margin: 2px 0 4px;
    color: var(--dark-text);
    line-height: 1.45;
    font-size: 14px;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.review-date {
    font-size: 11px;
    color: var(--dark-hint);
}

/* ---------- Info screen ---------- */
.info-hero {
    text-align: center;
    padding: 6px 12px 22px;
}
.info-hero-title {
    font-family: var(--brand-display-font);
    letter-spacing: 2px;
    font-size: 52px;
    line-height: 1;
    color: #ffffff;
    margin: 0 0 10px;
    text-shadow:
        0 2px 0 #0a0a0a,
        0 0 18px rgba(var(--accent-yellow-rgb), 0.25);
    -webkit-text-stroke: 1px var(--accent-yellow);
    text-transform: uppercase;
}.info-section {
    background: var(--glass-bg);
    border: 1px solid var(--accent-yellow);
    border-radius: 18px;
    padding: 18px 18px 14px;
    margin-bottom: 16px;
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
}
.info-section-title {
    font-family: var(--brand-display-font);
    font-size: 24px;
    letter-spacing: 1.5px;
    color: var(--accent-yellow);
    margin: 0 0 12px;
    text-shadow: 0 2px 0 #1a1a1a;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
}
.info-section-icon {
    width: 24px;
    height: 24px;
    color: var(--accent-yellow);
    flex-shrink: 0;
    filter: drop-shadow(0 1px 0 #1a1a1a);
}
.info-subtitle {
    margin: 14px 0 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--dark-text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.info-subtitle-icon {
    width: 16px;
    height: 16px;
    color: var(--accent-yellow);
    flex-shrink: 0;
}
.info-rows {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px dashed rgba(var(--accent-yellow-rgb), 0.18);
    font-size: 14px;
    color: var(--dark-text);
}
.info-row-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}
.info-row-icon {
    width: 16px;
    height: 16px;
    color: var(--accent-yellow);
    flex-shrink: 0;
}
.info-flag {
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.35));
}
.info-rows .info-row:last-child,
.info-row.info-row-solo {
    border-bottom: none;
}
.info-row-solo {
    padding: 8px 0 2px;
}
.info-row-price {
    color: var(--accent-yellow);
    font-family: var(--brand-display-font);
    font-size: 22px;
    letter-spacing: 1px;
    text-shadow: 0 2px 0 #1a1a1a;
}
.info-note {
    margin: 10px 0 4px;
    font-size: 12.5px;
    color: var(--dark-text-secondary);
    line-height: 1.5;
}

/* Shipping section — restrictions alert + payment method cards */
.info-shipping-note {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.ship-alert {
    background: rgba(255, 140, 60, 0.10);
    border: 1px solid rgba(255, 140, 60, 0.28);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 12.5px;
    color: rgba(255, 185, 110, 0.92);
    line-height: 1.55;
    margin: 6px 0;
}
.ship-note-text {
    font-size: 12.5px;
    color: var(--dark-text-secondary);
    line-height: 1.55;
    margin: 3px 0;
}

/* "How to pay" payment method cards in shipping section */
.ship-pay-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
}
.ship-method-card {
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.ship-method-head {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ship-method-sym {
    font-size: 16px;
    line-height: 1;
    filter: drop-shadow(0 1px 0 rgba(0,0,0,0.4));
}
.ship-method-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-yellow);
    letter-spacing: 0.3px;
}
.ship-method-instruction {
    font-size: 12px;
    color: var(--dark-text-secondary);
    line-height: 1.5;
    margin: 0;
    padding-left: 24px;
}

.info-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 14px;
}
.info-chip {
    padding: 6px 12px;
    border-radius: 999px;
    font-family: var(--brand-display-font);
    letter-spacing: 1px;
    color: var(--accent-yellow);
    border: 1px solid var(--accent-yellow);
    background: rgba(0, 0, 0, 0.35);
    font-size: 14px;
    text-shadow: 0 1px 0 #1a1a1a;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.info-chip-flag {
    font-size: 13px;
    line-height: 1;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.45));
}
.info-badge-ok {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    color: #0a0a0a;
    background: var(--accent-yellow);
    letter-spacing: 0.5px;
}
.support-247 {
    font-family: var(--brand-display-font);
    font-size: 28px;
    color: var(--accent-yellow);
    letter-spacing: 1px;
    text-shadow: 0 2px 0 #1a1a1a;
    display: inline-block;
    padding: 4px 0;
}

/* Delivery-times 2x2 grid — clearer than a flat list */
.shift-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 4px 0 10px;
}
.shift-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 14px 8px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(var(--accent-yellow-rgb), 0.35);
    border-radius: 12px;
    text-align: center;
}
.shift-card-icon {
    width: 20px;
    height: 20px;
    color: var(--accent-yellow);
    margin-bottom: 2px;
    filter: drop-shadow(0 1px 0 #1a1a1a);
}
.shift-card-label {
    font-size: 11px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--dark-text-secondary);
    font-weight: 600;
}
.shift-card-time {
    font-family: var(--brand-display-font);
    font-size: 26px;
    letter-spacing: 1px;
    color: var(--accent-yellow);
    text-shadow: 0 2px 0 #1a1a1a;
    line-height: 1;
}
.info-section-support .info-tg-cta {
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}
.info-section-support .info-tg-cta span,
.info-section-support .info-tg-cta svg {
    color: #ffffff;
}
.info-section-support .info-tg-cta .info-support-handle {
    font-size: 12px;
    opacity: 0.75;
    font-weight: 500;
}

/* ---------- Info > Map section ---------- */
.info-section-map .info-map-address {
    margin: -4px 0 10px;
    color: var(--dark-text-secondary);
    font-size: 13px;
}
.info-section-map .info-map-frame {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--dark-border);
    background: rgba(255,255,255,0.03);
    height: 260px;
}
.info-section-map .info-map-frame iframe {
    display: block;
    width: 100%;
    height: 260px;
    border: 0;
}
.info-section-map .info-map-frame .leaflet-container {
    width: 100%;
    height: 100%;
    background: #0a1014;
}
.info-section-map .info-map-cta {
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* ZIP / postal-code chips on Delivery + Meetup cards. */
.info-zips-wrap { margin-top: 4px; }
.info-zips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.info-zip-chip {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 11px;
    border-radius: 8px;
    background: rgba(var(--accent-yellow-rgb), 0.10);
    border: 1px solid rgba(var(--accent-yellow-rgb), 0.28);
    color: var(--dark-text-primary);
    font-size: 12.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.3px;
}

/* ---------- Contact screen ---------- */
.contact-hero {
    text-align: center;
    padding: 8px 12px 24px;
}
.contact-logo {
    width: 96px;
    height: 96px;
    object-fit: contain;
    margin: 0 auto 10px;
    display: block;
    background: #000;
    border-radius: 20px;
    padding: 8px;
    border: 1px solid rgba(var(--accent-yellow-rgb), 0.25);
}
.contact-hero-title {
    font-family: var(--brand-display-font);
    letter-spacing: 2px;
    font-size: 46px;
    line-height: 1;
    color: #ffffff;
    margin: 0 0 8px;
    text-shadow:
        0 2px 0 #0a0a0a,
        0 0 18px rgba(var(--accent-yellow-rgb), 0.25);
    -webkit-text-stroke: 1px var(--accent-yellow);
    text-transform: uppercase;
}.contact-cards {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 0 20px;
}
.contact-card {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--glass-bg);
    border: 2px solid var(--accent-yellow);
    border-radius: 18px;
    color: var(--dark-text);
    text-decoration: none;
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
    position: relative;
    overflow: hidden;
}
.contact-card::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(120% 120% at 0% 0%, rgba(var(--accent-yellow-rgb),0.10), transparent 60%);
    opacity: 0.9;
}
.contact-card:hover,
.contact-card:active {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(var(--accent-yellow-rgb), 0.18), 0 0 0 3px rgba(var(--accent-yellow-rgb), 0.18);
}
.contact-card-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    object-fit: cover;
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.contact-card-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    z-index: 1;
}
.contact-card-name {
    font-family: var(--brand-display-font);
    font-size: 22px;
    letter-spacing: 1px;
    color: var(--accent-yellow);
    line-height: 1;
    text-shadow: 0 2px 0 #1a1a1a;
}
.contact-card-handle {
    font-size: 13px;
    color: var(--dark-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.contact-card-arrow {
    color: var(--accent-yellow);
    flex-shrink: 0;
    z-index: 1;
}

/* Tighter variant when shown inside the order-contact popup */
.contact-cards-compact { gap: 10px; padding: 0; }
.contact-cards-compact .contact-card {
    grid-template-columns: 48px 1fr auto;
    padding: 12px;
    gap: 12px;
    border-radius: 14px;
}
.contact-cards-compact .contact-card-icon {
    width: 48px; height: 48px; border-radius: 12px;
}
.contact-cards-compact .contact-card-name { font-size: 18px; }

/* ---------- Order-contact popup (reuses .custom-popup) ---------- */
#order-contact-popup { display: none; }
#order-contact-popup.show .custom-popup-content { transform: translateY(0); opacity: 1; }
.contact-popup-content { max-width: 460px; }
.contact-popup-sub {
    color: var(--dark-text-secondary);
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.5;
}

/* ---------- Profile shortcuts ---------- */
.profile-shortcuts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 6px;
}
.profile-shortcut {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 8px;
    background: linear-gradient(135deg, var(--dark-secondary) 0%, var(--dark-tertiary) 100%);
    border: 1px solid var(--dark-border);
    border-radius: 14px;
    color: var(--dark-text);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.profile-shortcut:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--accent-yellow-rgb), 0.5);
    box-shadow: 0 6px 18px rgba(var(--accent-yellow-rgb), 0.12);
}
.profile-shortcut-icon {
    width: 24px;
    height: 24px;
    color: var(--accent-yellow);
    flex-shrink: 0;
}

/* ── Info-tab inline admin editor ─────────────────────────────────────── */
/* Pencil buttons are hidden by default; only revealed when the body has
   the .is-admin class (set on mini-app boot if /api/user says so). */
.info-edit-btn {
    display: none;
    margin-left: auto;
    background: rgba(var(--accent-yellow-rgb), 0.12);
    color: var(--accent-yellow, #ffe04a);
    border: 1px solid rgba(var(--accent-yellow-rgb), 0.35);
    border-radius: 10px;
    width: 32px;
    height: 32px;
    padding: 0;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.info-edit-btn:hover { background: rgba(var(--accent-yellow-rgb), 0.22); }
.info-edit-btn:active { transform: scale(0.95); }
.info-edit-btn svg { width: 16px; height: 16px; }

body.is-admin .info-edit-btn { display: inline-flex; }

.info-section-title { display: flex; align-items: center; gap: 8px; }

.info-edit-popup-content {
    max-height: 85vh;
    overflow-y: auto;
}

#info-edit-fields .info-edit-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}
#info-edit-fields label {
    font-size: 13px;
    font-weight: 600;
    color: var(--dark-text-secondary, #9aa0a6);
}
#info-edit-fields .info-edit-hint {
    font-size: 11px;
    color: var(--dark-text-secondary, #9aa0a6);
    opacity: 0.75;
}
#info-edit-fields input[type="text"],
#info-edit-fields textarea {
    width: 100%;
    padding: 10px 12px;
    background: var(--dark-secondary, #1c1d22);
    color: var(--dark-text, #fff);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    box-sizing: border-box;
    resize: vertical;
}
#info-edit-fields textarea { min-height: 90px; line-height: 1.45; }
#info-edit-fields input[type="text"]:focus,
#info-edit-fields textarea:focus {
    outline: none;
    border-color: var(--accent-yellow, #ffe04a);
}

.info-edit-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 16px;
}
.info-edit-actions .btn { min-width: 110px; }

/* Admin → Info tab inline editor */
.admin-info-lead {
    margin: -4px 4px 16px 4px;
    color: var(--dark-text-secondary, #9aa0a6);
    font-size: 13px;
}
.admin-info-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}
.admin-info-tab {
    appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: var(--dark-text-secondary, #9aa0a6);
    padding: 10px 6px;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s, transform .15s;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}
.admin-info-tab svg { width: 20px; height: 20px; }
.admin-info-tab:active { transform: scale(.97); }
.admin-info-tab.active {
    background: linear-gradient(160deg, rgba(var(--accent-yellow-rgb), 0.22), rgba(var(--accent-yellow-rgb), 0.08));
    border-color: rgba(var(--accent-yellow-rgb), 0.45);
    color: var(--dark-text, #fff);
    box-shadow: 0 6px 18px rgba(var(--accent-yellow-rgb), 0.15);
}
.admin-info-card { padding: 18px; }
.admin-info-fields .info-edit-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}
.admin-info-fields label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--dark-text-secondary, #9aa0a6);
}
.admin-info-fields .info-edit-hint {
    font-size: 11px;
    color: var(--dark-text-secondary, #9aa0a6);
    opacity: 0.7;
}
.admin-info-fields input[type="text"],
.admin-info-fields textarea {
    width: 100%;
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.35);
    color: var(--dark-text, #fff);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    font-family: inherit;
    font-size: 14px;
    box-sizing: border-box;
    resize: vertical;
}
.admin-info-fields textarea { min-height: 110px; line-height: 1.45; }
.admin-info-fields input[type="text"]:focus,
.admin-info-fields textarea:focus {
    outline: none;
    border-color: rgba(var(--accent-yellow-rgb), 0.55);
    box-shadow: 0 0 0 3px rgba(var(--accent-yellow-rgb), 0.15);
}
.admin-info-footer {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 4px;
}
.admin-info-footer .btn { min-width: 120px; }
@media (max-width: 380px) {
    .admin-info-tab { font-size: 11px; padding: 8px 4px; }
    .admin-info-tab svg { width: 18px; height: 18px; }
}

/* ───────────── Shared Info editor (admin panel + pencil popup) ────────
 * Both editors render through renderInfoEditor() so they share markup
 * and styling. The key UX wins here are: clear "you are editing X"
 * header, friendly labels with help text, repeating-row editors for
 * list/pairs (so admins never touch pipe-separated textareas), and
 * inline live previews showing exactly what will render on the Info
 * tab. */
.info-ed-header {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(var(--accent-yellow-rgb), 0.14), rgba(var(--accent-yellow-rgb), 0.04));
    border: 1px solid rgba(var(--accent-yellow-rgb), 0.28);
    margin-bottom: 16px;
}
.info-ed-header-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(var(--accent-yellow-rgb), 0.22);
    color: #fed4e5;
    flex-shrink: 0;
}
.info-ed-header-icon svg { width: 22px; height: 22px; }
.info-ed-header-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.info-ed-header-text strong {
    font-family: var(--brand-ui-font);
    font-size: 16px;
    color: var(--dark-text, #fff);
    line-height: 1.2;
}
.info-ed-header-text span {
    font-size: 12px;
    color: var(--dark-text-secondary, #9aa0a6);
    line-height: 1.4;
}

/* Per-section Show/Hide switch row, sits between header and fields. */
.info-ed-toggle-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    margin-bottom: 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--dark-border, rgba(255,255,255,0.08));
}
.info-ed-toggle-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.info-ed-toggle-copy strong {
    font-family: var(--brand-ui-font);
    font-size: 13.5px;
    color: var(--dark-text, #fff);
    line-height: 1.2;
}
.info-ed-toggle-copy span {
    font-size: 12px;
    color: var(--dark-text-secondary, #9aa0a6);
    line-height: 1.4;
}
.info-ed-switch { position: relative; flex-shrink: 0; width: 46px; height: 28px; cursor: pointer; }
.info-ed-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.info-ed-switch-track {
    display: block;
    width: 46px;
    height: 28px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    transition: background .2s cubic-bezier(.22,1,.36,1);
}
.info-ed-switch-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.45);
    transition: transform .2s cubic-bezier(.22,1,.36,1);
}
.info-ed-switch input:checked ~ .info-ed-switch-track { background: var(--accent-blue, #34d399); }
.info-ed-switch input:checked ~ .info-ed-switch-track .info-ed-switch-thumb { transform: translateX(18px); }

/* Dimmed fields when the section is hidden from customers (still editable). */
.info-ed-fields[data-info-dimmed] { opacity: 0.5; transition: opacity .2s; }

.info-ed-fields { display: flex; flex-direction: column; gap: 18px; }
.info-ed-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--dark-border, rgba(255,255,255,0.08));
}

.info-ed-label { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.info-ed-label-text {
    font-family: var(--brand-ui-font);
    font-size: 15px;
    font-weight: 700;
    color: var(--dark-text, #fff);
    letter-spacing: 0.1px;
    text-transform: none;
}
.info-ed-help {
    font-size: 12px;
    line-height: 1.45;
    color: var(--dark-text-secondary, #9aa0a6);
}

/* Unified input for text/emoji + list rows */
.info-ed-input,
.info-ed-textarea {
    width: 100%;
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.35);
    color: var(--dark-text, #fff);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    font-family: inherit;
    font-size: 14px;
    box-sizing: border-box;
}
.info-ed-textarea {
    min-height: 90px;
    line-height: 1.5;
    resize: vertical;
}
.info-ed-input:focus,
.info-ed-textarea:focus {
    outline: none;
    border-color: rgba(var(--accent-yellow-rgb), 0.55);
    box-shadow: 0 0 0 3px rgba(var(--accent-yellow-rgb), 0.15);
}
.info-ed-input--emoji {
    font-size: 22px;
    text-align: center;
    padding: 10px 12px;
    max-width: 120px;
}
.info-ed-input::placeholder,
.info-ed-textarea::placeholder {
    color: rgba(255,255,255,0.28);
}

/* Live preview chip shown under fields that define previewAs */
.info-ed-preview {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    align-self: flex-start;
    border-radius: 999px;
    background: rgba(var(--accent-yellow-rgb), 0.1);
    border: 1px dashed rgba(var(--accent-yellow-rgb), 0.3);
    color: var(--dark-text, #fff);
    font-size: 12px;
    font-weight: 600;
}
.info-ed-preview::before {
    content: '👁';
    font-size: 12px;
    opacity: 0.85;
}

/* List / pair repeating-row editor */
.info-ed-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.info-ed-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
}
.info-ed-row--pair {
    grid-template-columns: 1fr 1fr auto;
}
.info-ed-pair-heads {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 8px;
    padding: 0 4px;
    color: var(--dark-text-secondary, #9aa0a6);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.info-ed-pair-heads span:last-child { width: 36px; }

.info-ed-remove {
    display: grid;
    place-items: center;
    width: 36px;
    height: 40px;
    border: 1px solid var(--dark-border, rgba(255,255,255,0.08));
    border-radius: 10px;
    background: rgba(255, 80, 80, 0.08);
    color: #ff8a8a;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.info-ed-remove:hover {
    background: rgba(255, 80, 80, 0.16);
    border-color: rgba(255, 80, 80, 0.45);
}

.info-ed-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 8px 12px;
    border: 1px dashed rgba(var(--accent-yellow-rgb), 0.45);
    border-radius: 999px;
    background: rgba(var(--accent-yellow-rgb), 0.06);
    color: #fed4e5;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    margin-top: 2px;
}
.info-ed-add:hover { background: rgba(var(--accent-yellow-rgb), 0.12); }

@media (max-width: 420px) {
    .info-ed-row--pair { grid-template-columns: 1fr auto; }
    .info-ed-row--pair > [data-info-pair-b] { grid-column: 1 / 2; }
    .info-ed-row--pair > [data-info-remove] { grid-column: 2 / 3; grid-row: 1 / span 2; height: auto; align-self: stretch; }
    .info-ed-pair-heads span:nth-child(2) { display: none; }
    .info-ed-pair-heads { grid-template-columns: 1fr auto; }
}

/* Admin → Appearance editor */
.admin-appearance { display: flex; flex-direction: column; gap: 14px; }
.appearance-block { padding: 18px; }
.appearance-title {
    margin: 0 0 10px 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--dark-text, #fff);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.appearance-block .admin-muted {
    margin: -4px 0 12px 0;
    font-size: 12px;
    color: var(--dark-text-secondary, #9aa0a6);
}
.appearance-block .admin-field { margin-bottom: 10px; }
.appearance-block .admin-field:last-child { margin-bottom: 0; }

.appearance-color-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.appearance-color-row:last-child { border-bottom: none; }
.appearance-color-row input[type="color"] {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    width: 44px;
    height: 44px;
    padding: 0;
    background: #000;
    cursor: pointer;
    flex-shrink: 0;
}
.appearance-color-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 3px; }
.appearance-color-row input[type="color"]::-webkit-color-swatch { border: none; border-radius: 8px; }
.appearance-color-meta { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.appearance-color-meta strong { font-size: 14px; color: var(--dark-text, #fff); font-weight: 600; }
.appearance-color-meta span { font-size: 11px; color: var(--dark-text-secondary, #9aa0a6); }
.appearance-hex {
    width: 92px;
    padding: 8px 10px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.4);
    color: var(--dark-text, #fff);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    text-align: center;
    text-transform: uppercase;
    flex-shrink: 0;
}

.appearance-seg {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.appearance-seg-btn {
    appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: var(--dark-text-secondary, #9aa0a6);
    padding: 12px 8px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s, transform .15s;
}
.appearance-seg-btn:active { transform: scale(.97); }
.appearance-seg-btn.active {
    background: linear-gradient(160deg, rgba(var(--accent-yellow-rgb), 0.25), rgba(var(--accent-yellow-rgb), 0.08));
    border-color: rgba(var(--accent-yellow-rgb), 0.5);
    color: var(--dark-text, #fff);
}
.appearance-motion-seg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.appearance-motion-seg .appearance-seg-btn {
    min-height: 44px;
    white-space: normal;
    line-height: 1.25;
}
.appearance-image-color-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.appearance-image-color-controls .appearance-motion-seg {
    flex: 1 1 320px;
}

.appearance-switch { position: relative; display: inline-block; width: 46px; height: 26px; cursor: pointer; }
.appearance-switch input { opacity: 0; width: 0; height: 0; }
.appearance-switch-track {
    position: absolute; inset: 0;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    transition: background .2s;
    display: block;
}
.appearance-switch-thumb {
    position: absolute; top: 2px; left: 2px;
    width: 20px; height: 20px;
    background: #fff; border-radius: 50%;
    transition: transform .2s;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.appearance-switch input:checked + .appearance-switch-track {
    background: linear-gradient(160deg, rgba(var(--accent-yellow-rgb), 0.55), rgba(var(--accent-yellow-rgb), 0.25));
    border-color: rgba(var(--accent-yellow-rgb), 0.65);
}
.appearance-switch input:checked + .appearance-switch-track .appearance-switch-thumb { transform: translateX(20px); }

.appearance-rain-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    transition: opacity .2s;
}
.appearance-field-wide { grid-column: 1 / -1; }
.appearance-rain-grid select,
.appearance-rain-grid input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.4);
    color: var(--dark-text, #fff);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    font-size: 13px;
    box-sizing: border-box;
}
.appearance-upload-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.appearance-upload-row > span {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--dark-text-secondary, #9aa0a6);
}
.appearance-upload-row input[type="file"] {
    font-size: 13px;
    color: var(--dark-text-secondary, #9aa0a6);
}

.appearance-color-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.appearance-color-row > span {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--dark-text-secondary, #9aa0a6);
}
.appearance-color-swatch {
    position: relative;
    width: 52px;
    height: 30px;
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    overflow: hidden;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.appearance-color-icon {
    position: relative;
    z-index: 1;
    color: #fff;
    pointer-events: none;
    filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.7));
}
.appearance-color-swatch input[type="color"] {
    position: absolute;
    top: -6px;
    left: -6px;
    width: calc(100% + 12px);
    height: calc(100% + 12px);
    border: none;
    padding: 0;
    margin: 0;
    background: transparent;
    cursor: pointer;
    opacity: 0;
}

.appearance-bg-preview {
    height: 120px;
    border-radius: 14px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
}

/* Live preview block for the "Fade gradient" admin editor. Every rule
   here pulls its colors from --fade-1..4, which applyAppearance() writes
   onto :root. That means editing a fade stop in the color picker
   automatically repaints the preview with zero extra JS. */
.appearance-fade-preview {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 10px 0 14px;
}
.appearance-fade-preview-bar {
    height: 18px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--fade-1), var(--fade-2), var(--fade-3), var(--fade-4));
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.appearance-fade-preview-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.appearance-fade-preview-price {
    font-family: var(--brand-display-font, Impact, sans-serif);
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 0.3px;
    background: linear-gradient(-45deg, var(--fade-1), var(--fade-2), var(--fade-3), var(--fade-4), var(--fade-3), var(--fade-2), var(--fade-1));
    background-size: 300% 300%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.appearance-fade-preview-btn {
    padding: 10px 18px;
    border: 1.5px solid var(--accent-yellow, #FFE04A);
    border-radius: 999px;
    color: #111;
    font-weight: 700;
    font-size: 13px;
    cursor: default;
    background: linear-gradient(90deg, var(--fade-1), var(--fade-2), var(--fade-3), var(--fade-4));
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
}

.appearance-slider { display: flex; flex-direction: column; gap: 6px; }
.appearance-slider-head {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 12px;
    color: var(--dark-text-secondary, #9aa0a6);
}
.appearance-slider-val {
    color: var(--dark-text, #fff);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.appearance-slider input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    outline: none;
    cursor: pointer;
}
.appearance-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--accent-yellow, #FFE04A);
    border: 2px solid #000;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    cursor: pointer;
}
.appearance-slider input[type="range"]::-moz-range-thumb {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--accent-yellow, #FFE04A);
    border: 2px solid #000;
    cursor: pointer;
}

.appearance-footer {
    position: sticky;
    bottom: 70px;
    margin-top: 6px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 10px 4px;
    z-index: 1;
}
.appearance-footer .btn { min-width: 120px; }

/* ---------- Admin Map editor (Leaflet, point/area) ---------- */
.admin-map-editor { display: flex; flex-direction: column; gap: 14px; }
.admin-map-coords {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Point / Area segmented toggle. */
.map-mode-toggle {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--dark-border);
}
.map-mode-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 38px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--dark-text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, color .2s;
}
.map-mode-btn.active {
    background: var(--accent-blue);
    color: var(--accent-ink, #fff);
}

/* Interactive Leaflet canvas. */
.admin-map-canvas {
    height: 300px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--dark-border);
    background: #0a1014;
}
.admin-map-canvas .leaflet-container { width: 100%; height: 100%; background: #0a1014; }

.map-search-row { display: flex; gap: 8px; margin-bottom: 10px; }
.map-search-row .filter-search-input { padding-left: 12px; }
.map-search-btn { flex: 0 0 auto; font-size: 12px; font-weight: 700; }

.map-quick-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.map-quick-row .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
}
.map-coords-readout {
    font-size: 12px;
    color: var(--dark-hint);
    font-variant-numeric: tabular-nums;
    margin-left: auto;
}

/* Draggable radius handle (matches /terpphone). */
.tp-resize-handle { background: transparent !important; border: none !important; cursor: ew-resize !important; }
.tp-resize-handle > span {
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 9999px;
    background: #34d399;
    border: 3px solid #052e1c;
    box-shadow: 0 0 0 2px rgba(52,211,153,0.45), 0 4px 12px rgba(0,0,0,0.55);
    transition: transform .12s ease;
}
.tp-resize-handle:hover > span, .tp-resize-handle:active > span { transform: scale(1.12); }

.appearance-subtle {
    margin: 0;
    color: var(--dark-hint);
    font-size: 12px;
}

@media (max-width: 420px) {
    .admin-map-coords { grid-template-columns: 1fr; }
    .appearance-color-row { flex-wrap: wrap; }
    .appearance-hex { width: 100%; }
    .appearance-seg-btn { padding: 10px 4px; font-size: 12px; }
}

/* Card density — driven by body.density-{compact,comfortable,spacious}
 * from applyAppearance(). The CSS-level knob only adjusts a few global
 * rhythm variables; individual components don't need bespoke rules. */
body.density-compact     { --density-scale: 0.8;  --density-gap:  10px; }
body.density-comfortable { --density-scale: 1.0;  --density-gap:  14px; }
body.density-spacious    { --density-scale: 1.2;  --density-gap:  20px; }
body.density-compact .product-card,
body.density-compact .review-card,
body.density-compact .admin-card,
body.density-compact .admin-product-row,
body.density-compact .admin-review-row { padding: 12px; border-radius: 16px; }
body.density-spacious .product-card,
body.density-spacious .review-card,
body.density-spacious .admin-card,
body.density-spacious .admin-product-row,
body.density-spacious .admin-review-row { padding: 22px; border-radius: 26px; }
body.density-compact .products-grid    { gap: 10px; }
body.density-spacious .products-grid   { gap: 22px; }
.admin-content { padding-bottom: 110px; }
.admin-content .admin-hero-card,
.admin-content .admin-stats-grid { display: none; }
.admin-content.admin-on-home .admin-hero-card { display: flex; }
.admin-content.admin-on-home .admin-stats-grid { display: grid; }
.admin-hero-card,
.admin-card,
.admin-product-row,
.admin-review-row,
.admin-stat-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.035));
    border: 1px solid var(--glass-border);
    border-radius: 22px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.28);
}
.admin-hero-card {
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding: 22px;
    margin-bottom: 16px;
}
.admin-eyebrow {
    display: block;
    margin-bottom: 8px;
    color: var(--accent-yellow);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.admin-hero-card h1 { margin: 0 0 6px; font-size: 32px; }
.admin-hero-card p,
.admin-muted,
.admin-product-copy p,
.admin-product-meta { color: var(--dark-text-secondary); }
.admin-hero-card p { max-width: 260px; font-size: 14px; line-height: 1.45; }
.admin-hero-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    width: auto;
    padding: 11px 16px;
    border-radius: 14px;
}
.admin-stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}
.admin-stat-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    text-align: left;
}
.admin-stat-ico {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 12px;
    background: rgba(var(--accent-yellow-rgb), 0.14);
    color: var(--accent-yellow);
}
.admin-stat-ico svg { width: 18px; height: 18px; }
.admin-stat-text { display: grid; line-height: 1.1; }
.admin-stat-text strong { font-size: 20px; color: var(--dark-text); font-family: var(--brand-ui-font) !important; }
.admin-stat-text span { color: var(--dark-text-secondary); font-size: 11px; }
.admin-home-grid,
.admin-panel-section { display: none; }
.admin-panel-section.active { display: block; }
.admin-home-grid.active {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.admin-home-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
    padding: 18px 16px 16px;
    border: 1px solid var(--glass-border);
    border-radius: 22px;
    background:
        radial-gradient(circle at 0% 0%, rgba(var(--accent-yellow-rgb), 0.12), transparent 60%),
        linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,255,255,0.025));
    color: var(--dark-text);
    text-align: left;
    box-shadow: 0 14px 36px rgba(0,0,0,0.28);
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.2s ease;
    position: relative;
    overflow: hidden;
}
.admin-home-tile:active { transform: scale(0.98); }
.admin-home-tile:hover { border-color: rgba(var(--accent-yellow-rgb), 0.42); }
.admin-home-tile-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 14px;
    margin-bottom: 6px;
    background: rgba(var(--accent-yellow-rgb), 0.14);
    color: var(--accent-yellow);
    box-shadow: inset 0 0 0 1px rgba(var(--accent-yellow-rgb), 0.28);
}
.admin-home-tile-icon svg { width: 20px; height: 20px; }
.admin-home-tile[data-accent="taxonomy"] .admin-home-tile-icon { background: rgba(129, 140, 248, 0.14); color: #a5b4fc; box-shadow: inset 0 0 0 1px rgba(129, 140, 248, 0.38); }
.admin-home-tile[data-accent="contact"]  .admin-home-tile-icon { background: rgba(56, 189, 248, 0.12);  color: #7dd3fc; box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.36); }
.admin-home-tile[data-accent="info"]     .admin-home-tile-icon { background: rgba(148, 163, 184, 0.15); color: #cbd5f5; box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.36); }
.admin-home-tile[data-accent="appearance"] .admin-home-tile-icon { background: rgba(244, 114, 182, 0.13); color: #f9a8d4; box-shadow: inset 0 0 0 1px rgba(244, 114, 182, 0.36); }
.admin-home-tile[data-accent="reviews"]  .admin-home-tile-icon { background: rgba(74, 222, 128, 0.14);  color: #86efac; box-shadow: inset 0 0 0 1px rgba(74, 222, 128, 0.36); }
.admin-home-tile[data-accent="currency"] .admin-home-tile-icon { background: rgba(250, 204, 21, 0.16);  color: #facc15; box-shadow: inset 0 0 0 1px rgba(250, 204, 21, 0.36); }
.admin-home-tile strong {
    font-family: var(--brand-ui-font) !important;
    font-size: 16px;
    line-height: 1.15;
}
.admin-home-tile-sub {
    color: var(--dark-text-secondary);
    font-size: 12px;
    line-height: 1.35;
}
.admin-section-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    border: 1px solid var(--dark-border);
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    color: var(--dark-text);
    padding: 8px 14px 8px 10px;
    font-weight: 700;
    font-size: 13px;
}
.admin-section-back svg { opacity: 0.9; }
.admin-section-title {
    margin: 0 0 14px;
    font-size: 30px;
}
.admin-toolbar { display: flex; gap: 10px; margin-bottom: 14px; align-items: center; }
.admin-toolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    width: auto;
    padding: 10px 14px;
    border-radius: 12px;
}
.admin-toolbar input,
.admin-field input,
.admin-field textarea,
.admin-field select,
.admin-chip-editor input {
    width: 100%;
    border: 1px solid var(--dark-border);
    border-radius: 14px;
    background: rgba(255,255,255,0.06);
    color: var(--dark-text);
    padding: 13px 14px;
    font: inherit;
    outline: none;
}
.admin-toolbar input:focus,
.admin-field input:focus,
.admin-field textarea:focus,
.admin-field select:focus,
.admin-chip-editor input:focus {
    border-color: rgba(var(--accent-yellow-rgb), 0.65);
    box-shadow: 0 0 0 3px rgba(var(--accent-yellow-rgb), 0.12);
}
.admin-list { display: grid; gap: 12px; }
.admin-product-row { overflow: hidden; }
.admin-product-main {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    border: 0;
    padding: 13px;
    background: transparent;
    color: inherit;
    text-align: left;
}
.admin-product-thumb {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    border-radius: 18px;
    overflow: hidden;
    background: rgba(var(--accent-yellow-rgb), 0.12);
    color: var(--accent-yellow);
    font-weight: 900;
    font-size: 24px;
}
.admin-product-thumb img { width: 100%; height: 100%; object-fit: cover; }
.admin-product-copy { min-width: 0; }
.admin-product-copy h3 {
    margin: 0 0 4px;
    font-family: var(--brand-ui-font) !important;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.admin-product-copy p { margin: 0 0 8px; font-size: 12px; }
.admin-product-meta { display: flex; flex-wrap: wrap; gap: 7px; font-size: 11px; }
.admin-product-meta span,
.admin-status-live,
.admin-status-hidden {
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.07);
}
.admin-status-live { color: #6ee7a8; }
.admin-status-hidden { color: #fca5a5; }
.admin-product-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--dark-border);
}
.admin-product-actions button,
.admin-review-row button {
    border: 0;
    background: transparent;
    color: var(--dark-text);
    padding: 12px;
    font-weight: 800;
}
.admin-product-actions button + button { border-left: 1px solid var(--dark-border); }
.admin-product-actions .danger,
.admin-review-row .danger { color: #ff8a8a; }.admin-card { padding: 16px; }
.admin-card h3 { margin: 0 0 12px; font-size: 22px; }
.admin-field { display: grid; gap: 7px; margin-bottom: 12px; }
.admin-field span,
.admin-chip-editor > span {
    color: var(--dark-text-secondary);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.admin-field small { color: var(--dark-hint); font-size: 11px; }.admin-review-row { display: flex; justify-content: space-between; gap: 12px; padding: 14px; }
.admin-review-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.admin-review-head strong { color: var(--accent-yellow); letter-spacing: 1px; }
.admin-review-head em { color: var(--dark-hint); font-size: 12px; }
.admin-review-row p { margin: 0; color: var(--dark-text-secondary); line-height: 1.4; }
/* ─── Product editor (mirrors the user-facing product details page) ─── */
.admin-editor-screen { background: var(--dark-bg); }
.admin-editor-content { padding: 0 0 140px; }
#admin-product-form {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}
.editor-hero {
    position: relative;
    margin: -8px -4px 14px;
    padding: 12px 16px 0;
}
.editor-hero-media {
    position: relative;
    aspect-ratio: 16 / 12;
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(var(--accent-yellow-rgb), 0.14), rgba(255,255,255,0.03));
    border: 1px solid var(--glass-border);
    box-shadow: 0 18px 44px rgba(0,0,0,0.34);
}
.editor-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.editor-hero-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--dark-text-secondary);
    font-size: 13px;
    letter-spacing: 0.02em;
}
.editor-hero-empty svg { opacity: 0.7; }
.editor-hero-upload {
    position: absolute;
    bottom: 14px;
    right: 28px;
    z-index: 2;
    cursor: pointer;
}
.editor-hero-upload-inner {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(10, 10, 10, 0.72);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.12);
    color: var(--dark-text);
    font-weight: 700;
    font-size: 13px;
}
.editor-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 6px 16px 20px;
}

/* Grouped cards so the editor reads as distinct sections instead of a
   flat stack of mismatched controls. */
.editor-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--dark-border);
}
.editor-card-title {
    margin: 0;
    font-family: var(--brand-ui-font) !important;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dark-text-secondary);
}

/* Shared standard input used across the editor (types rows, etc.). */
.editor-input {
    width: 100%;
    height: 44px;
    border: 1px solid var(--dark-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--dark-text);
    padding: 0 14px;
    font: inherit;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.editor-input:focus {
    border-color: rgba(var(--accent-yellow-rgb), 0.65);
    box-shadow: 0 0 0 3px rgba(var(--accent-yellow-rgb), 0.12);
}
.editor-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.editor-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border: 1px solid var(--dark-border);
    border-radius: 999px;
    background: rgba(255,255,255,0.05);
    color: var(--dark-text);
    font-weight: 700;
    font-size: 13px;
}
.editor-meta-chip svg { width: 14px; height: 14px; flex-shrink: 0; }
.editor-meta-chevron { opacity: 0.7; }
.editor-meta-chip.is-empty { color: var(--dark-text-secondary); border-style: dashed; }
.editor-meta-chip--category { color: var(--accent-yellow); border-color: rgba(var(--accent-yellow-rgb), 0.32); background: rgba(var(--accent-yellow-rgb), 0.07); }
.editor-meta-chip--category.is-empty { color: var(--dark-text-secondary); background: rgba(255,255,255,0.04); }
.editor-meta-chip--farm { color: #86efac; border-color: rgba(74, 222, 128, 0.3); background: rgba(74, 222, 128, 0.07); }
.editor-meta-chip--farm.is-empty { color: var(--dark-text-secondary); background: rgba(255,255,255,0.04); border-color: var(--dark-border); }
.editor-field-label {
    display: inline-block;
    color: var(--dark-text-secondary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.editor-name-field { display: block; }
.editor-name-input {
    width: 100%;
    border: 1px solid var(--dark-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--dark-text);
    padding: 12px 14px;
    font-family: var(--brand-ui-font) !important;
    font-size: 18px;
    font-weight: 700;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.editor-name-input:focus {
    border-color: rgba(var(--accent-yellow-rgb), 0.65);
    box-shadow: 0 0 0 3px rgba(var(--accent-yellow-rgb), 0.12);
}
.editor-field { display: block; }
.editor-textarea {
    width: 100%;
    min-height: 100px;
    border: 1px solid var(--dark-border);
    border-radius: 16px;
    background: rgba(255,255,255,0.04);
    color: var(--dark-text);
    padding: 13px 14px;
    font: inherit;
    line-height: 1.45;
    outline: none;
    resize: vertical;
}
.editor-textarea:focus { border-color: rgba(var(--accent-yellow-rgb), 0.65); box-shadow: 0 0 0 3px rgba(var(--accent-yellow-rgb), 0.12); }
.editor-tags-block { display: grid; gap: 8px; }
.editor-tags-head { display: flex; align-items: center; justify-content: space-between; }
.editor-tags-manage {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--dark-border);
    border-radius: 999px;
    background: rgba(255,255,255,0.05);
    color: var(--dark-text);
    padding: 6px 12px;
    font-weight: 700;
    font-size: 12px;
}
.editor-tags-row { display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; }
.editor-selected-tag { background: rgba(var(--accent-yellow-rgb), 0.14); border-color: rgba(var(--accent-yellow-rgb), 0.42); color: var(--accent-yellow); }
.editor-tags-empty { color: var(--dark-hint); font-size: 12px; padding: 6px 0; }
.editor-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.editor-block-head .editor-card-title { flex: 1; }
.editor-block-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(var(--accent-yellow-rgb), 0.5);
    border-radius: 999px;
    background: rgba(var(--accent-yellow-rgb), 0.1);
    color: var(--accent-yellow);
    padding: 7px 12px;
    font-weight: 800;
    font-size: 12px;
    cursor: pointer;
}
.editor-block-add input { display: none; }

.editor-block-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.editor-block-promo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(255, 90, 120, 0.45);
    border-radius: 999px;
    background: rgba(255, 90, 120, 0.12);
    color: #ff8da0;
    padding: 7px 12px;
    font-weight: 800;
    font-size: 12px;
    cursor: pointer;
}
.editor-block-promo:hover { background: rgba(255, 90, 120, 0.18); }
.editor-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.editor-gallery-cell {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--dark-border);
}
.editor-gallery-cell img,
.editor-gallery-cell video { width: 100%; height: 100%; object-fit: cover; display: block; }
.editor-gallery-cell.is-pending { border-color: rgba(var(--accent-yellow-rgb), 0.5); }
.editor-gallery-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 3px 7px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
    background: var(--accent-yellow);
    color: #1a1a1a;
    border-radius: 999px;
}
.editor-gallery-del {
    position: absolute;
    top: 6px;
    right: 6px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 0;
    background: rgba(10, 10, 10, 0.72);
    color: #fff;
    cursor: pointer;
}
.editor-gallery-empty,
.editor-gallery-hint {
    margin: 0;
    color: var(--dark-hint);
    font-size: 12px;
}
.editor-offers-list { display: grid; gap: 10px; }
.editor-offers-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 16px;
    border: 1px dashed var(--dark-border);
    border-radius: 16px;
    background: rgba(255,255,255,0.03);
    color: var(--dark-text-secondary);
    font-weight: 700;
    cursor: pointer;
}
.editor-offer-card {
    border: 1px solid var(--dark-border);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.editor-offer-top { display: flex; gap: 8px; align-items: end; }
.editor-offer-top .editor-offer-field--name { flex: 1; }
.editor-offer-bottom { display: flex; gap: 8px; align-items: end; }
.editor-offer-bottom .editor-offer-field--price { flex: 1; }
.editor-offer-field { display: grid; gap: 5px; }
.editor-offer-field span {
    color: var(--dark-text-secondary);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.editor-offer-field input {
    width: 100%;
    border: 1px solid var(--dark-border);
    border-radius: 12px;
    background: rgba(255,255,255,0.05);
    color: var(--dark-text);
    padding: 10px 12px;
    font: inherit;
    outline: none;
}
.editor-offer-field input:focus { border-color: rgba(var(--accent-yellow-rgb), 0.65); }
.editor-offer-remove {
    display: grid;
    place-items: center;
    width: 36px;
    height: 40px;
    border: 1px solid var(--dark-border);
    border-radius: 12px;
    background: rgba(255,80,80,0.08);
    color: #ff8a8a;
    cursor: pointer;
}
.editor-offer-promo-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 40px;
    padding: 0 10px;
    border: 1px solid var(--dark-border);
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    color: var(--dark-text-secondary);
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.editor-offer-promo-btn:hover {
    border-color: rgba(255, 90, 120, 0.5);
    color: #ff8da0;
    background: rgba(255, 90, 120, 0.1);
}
.editor-offer-promo-btn.is-on {
    border-color: rgba(255, 90, 120, 0.75);
    background: linear-gradient(135deg, rgba(255, 90, 120, 0.22), rgba(255, 122, 77, 0.18));
    color: #fff;
    box-shadow: 0 4px 14px rgba(255, 59, 107, 0.25);
}
.editor-offer-card.has-promo {
    border-color: rgba(255, 90, 120, 0.55);
    background: linear-gradient(180deg, rgba(255, 90, 120, 0.06), rgba(255,255,255,0.02));
}
.editor-offer-promo-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(255, 90, 120, 0.08);
    border: 1px solid rgba(255, 90, 120, 0.22);
    font-size: 12px;
    color: var(--dark-text);
    flex-wrap: wrap;
}
.editor-offer-promo-preview strong {
    font-family: var(--brand-ui-font);
    font-size: 16px;
    color: #ff8da0;
    margin-left: auto;
}
.editor-offer-promo-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 90, 120, 0.2);
    color: #ff8da0;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.03em;
}
.editor-offer-promo-clear {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    border: 0;
    background: rgba(255, 90, 120, 0.25);
    color: #fff;
    cursor: pointer;
}

/* Promo popup */
.offer-promo-popup .custom-popup-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px 20px 20px;
    overflow-y: auto;
    max-height: 88dvh;
}
.offer-promo-popup h3 {
    margin: 0;
    font-family: var(--brand-ui-font) !important;
    font-size: 20px;
}
.promo-popup-subtitle {
    margin: -4px 0 0;
    color: var(--dark-text-secondary);
    font-size: 13px;
}
.promo-type-seg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 4px;
    border-radius: 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--dark-border);
}
.promo-type-btn {
    border: 0;
    background: transparent;
    color: var(--dark-text-secondary);
    font-weight: 800;
    font-size: 13px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
}
.promo-type-btn.active {
    background: linear-gradient(135deg, #ff3b6b, #ff7a4d);
    color: #fff;
    box-shadow: 0 4px 14px rgba(255, 59, 107, 0.35);
}
.promo-value-field { display: grid; gap: 6px; }
.promo-value-field span {
    color: var(--dark-text-secondary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.promo-value-field input {
    width: 100%;
    border: 1px solid var(--dark-border);
    border-radius: 12px;
    background: rgba(255,255,255,0.05);
    color: var(--dark-text);
    padding: 12px 14px;
    font-size: 18px;
    font-weight: 700;
    outline: none;
}
.promo-value-field input:focus { border-color: rgba(255,90,120,0.65); }
.promo-preview {
    display: grid;
    gap: 6px;
    max-height: 180px;
    overflow-y: auto;
    padding: 10px;
    border-radius: 12px;
    background: rgba(255,255,255,0.03);
    border: 1px dashed var(--dark-border);
}
.promo-preview-hint { color: var(--dark-hint); font-size: 12px; }
.promo-preview-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 10px;
    align-items: baseline;
    font-size: 13px;
}
.promo-preview-old {
    color: var(--dark-text-secondary);
    text-decoration: line-through;
    font-size: 12px;
}
.promo-preview-row strong {
    font-family: var(--brand-ui-font);
    color: #ff8da0;
    font-size: 15px;
}
.promo-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.promo-actions .btn { flex: 1; min-width: 90px; }
.btn.btn-danger {
    background: rgba(255, 90, 120, 0.14);
    color: #ff8da0;
    border: 1px solid rgba(255, 90, 120, 0.45);
}
.btn.btn-ghost {
    background: transparent;
    color: var(--dark-text-secondary);
    border: 1px solid var(--dark-border);
}
.editor-visibility {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--dark-border);
    border-radius: 18px;
    background: rgba(255,255,255,0.04);
    padding: 14px 16px;
}
.editor-visibility span { display: grid; gap: 3px; }
.editor-visibility strong { font-family: var(--brand-ui-font) !important; font-size: 15px; }
.editor-visibility small { color: var(--dark-hint); font-size: 12px; }

.admin-editor-actions {
    position: sticky;
    bottom: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 12px 16px 16px;
    margin: 0 -16px;
    background: linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,0.95) 35%);
}

/* ─── Shared taxonomy picker ─── */
.admin-taxonomy-popup-content { max-width: 480px; }
.admin-taxonomy-hint {
    margin: 0 0 12px;
    color: var(--dark-text-secondary);
    font-size: 13px;
    line-height: 1.45;
}
.admin-taxonomy-create {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
.admin-taxonomy-create input {
    flex: 1;
    border: 1px solid var(--dark-border);
    border-radius: 12px;
    background: rgba(255,255,255,0.06);
    color: var(--dark-text);
    padding: 11px 14px;
    font: inherit;
    outline: none;
}
.admin-taxonomy-create input:focus { border-color: rgba(var(--accent-yellow-rgb), 0.6); }
.admin-taxonomy-create button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 11px 14px;
    border-radius: 12px;
}
.admin-taxonomy-list { display: grid; gap: 8px; }
.admin-taxonomy-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--dark-border);
    border-radius: 14px;
    background: rgba(255,255,255,0.04);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.admin-taxonomy-row:not(:has(.admin-taxonomy-select)) { grid-template-columns: 1fr auto auto; }
.admin-taxonomy-row.is-selected {
    border-color: rgba(var(--accent-yellow-rgb), 0.55);
    background: rgba(var(--accent-yellow-rgb), 0.1);
}
.admin-taxonomy-name {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--dark-text);
    font: inherit;
    padding: 8px 4px;
    outline: none;
}
.admin-taxonomy-name:focus { border-bottom: 1px solid var(--accent-yellow); }
.admin-taxonomy-select,
.admin-taxonomy-visibility,
.admin-taxonomy-delete {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid var(--dark-border);
    background: rgba(255,255,255,0.05);
    color: var(--dark-text-secondary);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.admin-taxonomy-select.is-on {
    color: #1a1a1a;
    background: var(--accent-yellow);
    border-color: rgba(var(--accent-yellow-rgb), 0.9);
}
.admin-taxonomy-visibility[data-visible="0"] { color: #fca5a5; border-color: rgba(252, 165, 165, 0.35); background: rgba(252, 165, 165, 0.07); }
.admin-taxonomy-delete { color: #ff8a8a; }
.admin-taxonomy-delete:hover { background: rgba(255, 120, 120, 0.12); border-color: rgba(255, 120, 120, 0.4); }
.admin-taxonomy-empty { padding: 16px; text-align: center; color: var(--dark-hint); }

@media (max-width: 430px) {
    .admin-hero-card { display: flex; flex-direction: column; align-items: stretch; }
    .admin-hero-action { width: 100%; margin-top: 12px; justify-content: center; }
    .admin-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Maintenance screen ──────────────────────────────────────────────────── */
.maintenance-screen {
    display: none;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    background: var(--bg-color, #000);
    z-index: 9999;
    padding: 32px 24px;
    overflow-y: auto;
}
.maintenance-screen.active { display: flex; }

.maintenance-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 340px;
    width: 100%;
    text-align: center;
    animation: fadeUp 0.45s cubic-bezier(.22,.68,0,1.2) both;
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

.maintenance-icon-wrap {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    border: 1.5px solid rgba(255,255,255,.12);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: maintPulse 3s ease-in-out infinite;
}

@keyframes maintPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb, var(--accent-yellow-rgb)), .25); }
    50%       { box-shadow: 0 0 0 18px rgba(var(--accent-rgb, var(--accent-yellow-rgb)), 0); }
}

.maintenance-icon {
    width: 36px;
    height: 36px;
    stroke: var(--accent-color, #FFE04A);
}

.maintenance-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-color, #f5f5f5);
    margin: 0;
    line-height: 1.2;
}

.maintenance-subtitle {
    font-size: .9rem;
    color: var(--text-secondary-color, #9aa0a6);
    margin: 0;
    line-height: 1.5;
}

.maintenance-code-wrap {
    width: 100%;
    margin-top: 8px;
}

.maintenance-code-hint {
    font-size: .8rem;
    color: var(--text-secondary-color, #9aa0a6);
    margin: 0 0 10px;
}

.maintenance-code-row {
    display: flex;
    gap: 8px;
}

.maintenance-code-input {
    flex: 1;
    background: var(--surface-color, #111);
    border: 1.5px solid rgba(255,255,255,.12);
    border-radius: 10px;
    color: var(--text-color, #f5f5f5);
    font-size: .95rem;
    padding: 10px 14px;
    outline: none;
    transition: border-color .2s;
    letter-spacing: 3px;
    text-align: center;
}
.maintenance-code-input:focus { border-color: var(--accent-color, #FFE04A); }

.maintenance-code-btn { flex-shrink: 0; width: 44px; height: 44px; padding: 0; border-radius: 10px; display: flex; align-items: center; justify-content: center; }

.maintenance-code-error {
    display: none;
    color: #ff5c5c;
    font-size: .8rem;
    margin: 8px 0 0;
    animation: shake .3s ease;
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25%       { transform: translateX(-5px); }
    75%       { transform: translateX(5px); }
}

/* Admin maintenance tile accent */
[data-accent="maintenance"] .admin-home-tile-icon { color: #ff9a3c; }
[data-accent="maintenance"]:hover { border-color: rgba(255,154,60,.35); }
[data-accent="maintenance"]:hover .admin-home-tile-icon { color: #ffb347; }

/* Admin maintenance toggle switch */
.admin-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.maint-toggle-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    flex-shrink: 0;
    cursor: pointer;
}
.maint-toggle-switch input { opacity: 0; width: 0; height: 0; }

.maint-toggle-slider {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.1);
    border-radius: 13px;
    transition: background .25s;
}
.maint-toggle-slider::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 3px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    transition: transform .25s;
}
.maint-toggle-switch input:checked + .maint-toggle-slider { background: var(--accent-color, #FFE04A); }
.maint-toggle-switch input:checked + .maint-toggle-slider::before { transform: translateX(22px); }

/* Admin custom contact card editor */
.admin-cc { border:1px solid var(--dark-border); border-radius:14px; padding:12px 12px 10px; margin-bottom:12px; background:rgba(255,255,255,0.03); }
.admin-cc-head { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.admin-cc-icon-preview { width:30px; height:30px; border-radius:8px; object-fit:cover; background:rgba(255,255,255,.06); padding:3px; flex:none; }
.admin-cc-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; }
.admin-cc-del { flex:none; width:28px; height:28px; border-radius:8px; border:1px solid var(--dark-border); background:rgba(255,255,255,0.04); color:var(--dark-text-secondary); font-size:13px; line-height:1; cursor:pointer; }
.admin-cc-del:hover { color:#ff6b6b; border-color:rgba(255,107,107,.5); }
.admin-cc .admin-field { margin-bottom:9px; gap:5px; }
.admin-cc .admin-field span { font-size:11px; }
.admin-cc .admin-field input, .admin-cc .admin-field select { padding:10px 12px; border-radius:11px; }
.admin-cc-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.admin-cc-upload input[type="file"] { padding:7px; font-size:12px; }
.admin-cc-toggles { display:flex; flex-wrap:wrap; gap:8px; margin-top:2px; }
.admin-cc-toggle { display:flex; align-items:center; gap:8px; flex:1; min-width:140px; padding:9px 11px; border:1px solid var(--dark-border); border-radius:11px; background:rgba(255,255,255,0.04); cursor:pointer; }
.admin-cc-toggle span { font-size:12px; font-weight:700; color:var(--dark-text-secondary); }
.admin-cc-toggle input { width:auto; flex:none; accent-color:var(--accent-color, #FFE04A); }


/* ==========================================================================
   ╔══════════════════════════════════════════════════════════════════════╗
   ║  LIQUID GLASS × GTA — DESIGN OVERHAUL LAYER  (2026-06-23)               ║
   ║  Structure/feel only. Every color reads admin tokens (--accent-yellow,  ║
   ║  --fade-1..4, --tag/-farm-color) so the theme stays admin-configurable. ║
   ║  Appended last → wins on source order. Neutral grey by default.         ║
   ╚══════════════════════════════════════════════════════════════════════╝
   ========================================================================== */

:root {
    /* ---- structural scale (color-free) ---- */
    --r-xs: 10px;
    --r-sm: 12px;
    --r-md: 16px;
    --r-lg: 22px;
    --r-xl: 28px;
    --r-pill: 999px;

    /* the single no-bounce ease used everywhere */
    --press: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    /* ---- liquid-glass light model (white alphas, not brand color) ---- */
    --glass-blur: 22px;                         /* perf lever */
    --glass-bg: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.035) 42%, rgba(255,255,255,0.02));
    --glass-border: rgba(255, 255, 255, 0.16);
    --glass-hi: rgba(255, 255, 255, 0.42);      /* top specular bevel */
    --glass-occ: rgba(0, 0, 0, 0.55);           /* bottom ambient occlusion */

    /* ---- elevation ramp ---- */
    --elev-1: 0 6px 16px -10px rgba(0,0,0,0.6);
    --elev-2: 0 16px 36px -16px rgba(0,0,0,0.65);
    --elev-3: 0 28px 60px -22px rgba(0,0,0,0.75);

    /* accent glow built from the admin accent triplet (default 136,136,136) */
    --accent-glow: rgba(var(--accent-yellow-rgb), 0.45);
    --accent-soft: rgba(var(--accent-yellow-rgb), 0.16);
}

/* ==========================================================================
   1 · UNIFIED ICON LANGUAGE
   One geometry for all ~126 inline SVGs: 24-grid, 2px stroke, round caps/joins.
   CSS stroke-width sits above SVG presentation attributes in the cascade, so
   this normalizes every icon without editing markup. Fill-only icons
   (placeholders, premium star, play) carry no stroke, so this is a no-op there.
   ========================================================================== */
#app svg {
    stroke-linecap: round;
    stroke-linejoin: round;
}
#app svg * {
    stroke-width: 2px;
}
/* keep emphasis weights deliberate */
#app .nav-item.active svg * { stroke-width: 2.35px; }
#app .btn-back svg *,
#app .btn-menu svg *,
#app .admin-section-back svg * { stroke-width: 2px; }
/* large hero/empty placeholders read lighter */
#app .empty-state > svg *,
#app .product-media-error svg *,
#app .maintenance-icon * { stroke-width: 1.7px; }

/* ==========================================================================
   2 · TYPOGRAPHY  (Pricedown brand/hero · Space Grotesk headings · Manrope UI
   · system mono numerals). Fonts loaded via the existing Google Fonts link.
   ========================================================================== */
:root {
    --font-head: 'Space Grotesk', var(--brand-ui-font);
    --font-mono: ui-monospace, 'SF Mono', 'Roboto Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
}
/* Section/screen subheads in Space Grotesk; brand + big hero stay Pricedown */
/* Section/screen headings keep the GTA display face (Pricedown) */
#app h2, #app h3,
#app .info-section-title span,
#app .reviews-list-header h3,
#app .sidebar-header h3,
#app .admin-section-title,
#app .admin-home-tile-label {
    font-family: var(--brand-display-font) !important;
    font-weight: 700;
    letter-spacing: 0.3px;
}
/* Brand wordmark + true hero titles keep the GTA display face */
#app .logo-text-slot,
#app .welcome-title,
#app .info-hero-title,
#app .loading-text {
    font-family: var(--brand-display-font) !important;
    letter-spacing: 0.5px;
}
/* Prices keep the GTA display face (Pricedown); still tabular + tight. */
#app .product-price,
#app .offer-price {
    font-family: var(--brand-display-font) !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.5px;
    font-weight: 900;
}
/* Other numerals stay monospace — tabular + tight */
#app .reviews-avg-num,
#app .maintenance-code-input,
#app .profile-user-id {
    font-family: var(--font-mono) !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    font-weight: 700;
}

/* ==========================================================================
   3 · LIQUID-GLASS PRIMITIVE  (focused: chrome + popups + key surfaces)
   ========================================================================== */
.lg-glass,
.header,
.bottom-nav,
.sidebar,
.custom-popup-content,
.product-card,
.offer-card,
.contact-card,
.review-form-card,
.gallery-viewer {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(165%);
    backdrop-filter: blur(var(--glass-blur)) saturate(165%);
    box-shadow:
        inset 0 1.5px 0 var(--glass-hi),
        inset 0 0 0 1px rgba(255,255,255,0.04),
        inset 0 -14px 26px -14px var(--glass-occ),
        var(--elev-2);
}
/* travelling specular sheen — the "liquid" read. Pointer-safe, paint-only. */
.header::after,
.bottom-nav::after,
.custom-popup-content::after,
.offer-card::after,
.contact-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.16) 47%, rgba(255,255,255,0.03) 53%, transparent 67%);
    mix-blend-mode: screen;
    opacity: 0.7;
    z-index: 0;
}
/* keep glass children above the sheen */
.header > *, .bottom-nav > *, .custom-popup-content > * { position: relative; z-index: 1; }

/* Header — glass chrome */
.header {
    gap: 12px;
    border-bottom: 1px solid var(--glass-border);
    box-shadow:
        inset 0 1.5px 0 var(--glass-hi),
        inset 0 -14px 26px -16px var(--glass-occ),
        0 8px 28px -12px rgba(0,0,0,0.6);
}

/* Floating bottom-nav dock */
.bottom-nav {
    left: 10px; right: 10px;
    bottom: calc(8px + var(--safe-bottom));
    width: auto;
    padding: 9px calc(6px + var(--safe-right)) 9px calc(6px + var(--safe-left));
    border: 1px solid var(--glass-border);
    border-radius: var(--r-xl);
    box-shadow:
        inset 0 1.5px 0 var(--glass-hi),
        inset 0 -12px 24px -14px var(--glass-occ),
        var(--elev-3);
}
#app { padding-bottom: 92px; }
.main-screen { padding-bottom: 92px; }

/* ==========================================================================
   4 · BOTTOM NAV  (skeuo active pill + accent glow, admin-reactive)
   ========================================================================== */
.nav-item {
    transition: color 0.25s var(--press), transform 0.18s var(--press);
    border-radius: var(--r-md);
    overflow: visible;
}
.nav-item.active {
    color: var(--accent-yellow);
    background: linear-gradient(180deg, var(--accent-soft), transparent);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
}
.nav-item.active::before,
.nav-item.active::after { display: none; }     /* retire the double underline */
.nav-item.active .nav-icon {
    filter: drop-shadow(0 0 8px var(--accent-glow));
}
.nav-item:active { transform: translateY(1px) scale(0.97); }
.nav-icon { transition: transform 0.2s var(--press), filter 0.25s ease; }
.nav-label { font-family: var(--brand-ui-font); font-weight: 700; }

/* ==========================================================================
   5 · SKEUOMORPHIC CONTROLS  (refined: molded button, beveled icon)
   ========================================================================== */
/* Primary CTA — molded accent, specular top, occluded base, accent glow.
   Keeps the --shl animated fade gradient as its fill via existing rule. */
.btn-primary {
    border: none;
    border-radius: var(--r-sm);
    color: #07120b;
    text-shadow: 0 1px 0 rgba(255,255,255,0.35);
    box-shadow:
        inset 0 1.5px 0 rgba(255,255,255,0.7),
        inset 0 -9px 16px -8px rgba(0,0,0,0.4),
        0 12px 26px -10px var(--accent-glow);
    transition: transform 0.16s var(--press), box-shadow 0.2s ease, filter 0.2s ease;
}
.btn-primary:hover {
    transform: translateY(-2px);
    filter: brightness(1.06) saturate(1.05);
    box-shadow:
        inset 0 1.5px 0 rgba(255,255,255,0.75),
        0 18px 34px -10px var(--accent-glow);
}
.btn-primary:active { transform: translateY(0) scale(0.97); }
/* kill the old ripple ::before so it doesn't fight the molded look */
.btn-primary::before { display: none; }
/* The --shl animator paints an inline background-image gradient onto every
   descendant of .btn-primary (it walks children by tag, so --shl:0 alone
   can't stop it). Force children transparent so only the button's own
   molded fill shows — no stray gradient behind the icon/label. */
.btn-primary > *,
.btn-primary svg,
.btn-primary span {
    background: none !important;
    background-image: none !important;
}

/* Beveled icon buttons */
.btn-icon {
    border-radius: var(--r-sm);
    background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 4px 10px -8px rgba(0,0,0,0.6);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: transform 0.16s var(--press), background 0.2s ease, box-shadow 0.2s ease;
}
.btn-icon:hover {
    background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.05));
    transform: translateY(-1px);
}
.btn-icon:active { transform: translateY(1px) scale(0.95); box-shadow: inset 0 2px 6px rgba(0,0,0,0.45); }
.header .btn-icon[style*="opacity: 0"] { box-shadow: none; background: none; border: none; }

/* Secondary / danger refined */
.btn-secondary {
    border-radius: var(--r-sm);
    background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.02));
    border: 1px solid var(--glass-border);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
}
.btn-danger {
    border-radius: var(--r-sm);
    border: 1px solid rgba(255,90,90,0.5);
    color: #ff8a8a;
    background: linear-gradient(180deg, rgba(255,90,90,0.12), rgba(255,90,90,0.04));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 10px 24px -14px rgba(255,80,80,0.5);
}
.btn-danger:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(255,80,80,0.55); }

/* ==========================================================================
   6 · CARDS & SURFACES
   ========================================================================== */
.product-card {
    border-radius: var(--r-lg);
    transition: transform 0.4s var(--press), box-shadow 0.4s ease, border-color 0.3s ease;
}
.product-card:hover {
    border-color: rgba(var(--accent-yellow-rgb), 0.5);
    transform: translateY(-6px) scale(1.015);
    box-shadow:
        inset 0 1.5px 0 var(--glass-hi),
        0 22px 48px -20px rgba(0,0,0,0.7),
        0 0 0 1px rgba(var(--accent-yellow-rgb),0.18),
        0 18px 40px -22px var(--accent-glow);
}
.product-card:active { transform: translateY(-2px) scale(1); }

.offer-card {
    border-radius: var(--r-md);
    border: 1px solid rgba(var(--accent-yellow-rgb), 0.28);
    background: linear-gradient(165deg, var(--accent-soft) 0%, rgba(255,255,255,0.03) 55%, rgba(0,0,0,0.18) 100%);
}
.offer-card:hover {
    border-color: rgba(var(--accent-yellow-rgb), 0.55);
    transform: translateY(-4px);
    box-shadow: inset 0 1.5px 0 var(--glass-hi), 0 16px 34px -18px var(--accent-glow);
}

/* Offer CTA — molded mini-button */
.offer-cta {
    border-radius: var(--r-xs);
    border: 1px solid rgba(var(--accent-yellow-rgb), 0.4);
    background: linear-gradient(180deg, rgba(var(--accent-yellow-rgb),0.16), rgba(var(--accent-yellow-rgb),0.05));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
    transition: transform 0.16s var(--press), background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.offer-cta:hover {
    background: linear-gradient(180deg, color-mix(in oklab, var(--accent-yellow) 85%, #fff), var(--accent-yellow));
    color: #07120b;
    box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.6), 0 8px 18px -8px var(--accent-glow);
}
.offer-cta:active { transform: scale(0.96); }

/* Promo badges — molded chips */
.product-promo-badge,
.offer-promo-badge {
    border-radius: var(--r-xs);
    background: linear-gradient(180deg, #fff, color-mix(in oklab, var(--accent-yellow) 62%, #fff));
    color: #07120b;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 6px 14px -6px var(--accent-glow);
    text-shadow: none;
}

/* Chips: tags + farms (already admin-colored via --tag/--farm) refined to glass pills */
.filter-chip {
    border-radius: var(--r-pill);
    transition: transform 0.18s var(--press), background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.14);
}
.filter-chip:active { transform: scale(0.96); }

/* Category items — glass rows, accent gradient on active (keeps --shl) */
.category-item {
    border-radius: var(--r-md);
    transition: transform 0.3s var(--press), box-shadow 0.3s ease, color 0.25s ease, border-color 0.25s ease;
}
.category-item:hover { transform: translateX(6px); box-shadow: 0 8px 22px -10px var(--accent-glow); }

/* ==========================================================================
   7 · POPUPS / SHEETS  (liquid glass sheet)
   ========================================================================== */
.custom-popup-content {
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    border-bottom: none;
    box-shadow:
        inset 0 1.5px 0 var(--glass-hi),
        0 -28px 60px -22px rgba(0,0,0,0.7);
}
.contact-card {
    border-radius: var(--r-md);
    border: 1px solid var(--glass-border);
    transition: transform 0.18s var(--press), box-shadow 0.25s ease, border-color 0.25s ease;
}
.contact-card:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--accent-yellow-rgb), 0.45);
    box-shadow: inset 0 1.5px 0 var(--glass-hi), 0 14px 30px -16px var(--accent-glow);
}

/* ==========================================================================
   8 · SIDEBAR — animate transform, not `left` (kills layout thrash)
   ========================================================================== */
.sidebar {
    left: 0;
    transform: translateX(-100%);
    transition: transform 0.4s var(--ease-out);
    will-change: transform;
    border-radius: 0 var(--r-xl) var(--r-xl) 0;
    /* Respect the notch / Telegram chrome so the header doesn't slide
       under the status bar + close button (was pinned to top:0). */
    padding-top: calc(var(--safe-top) + var(--tg-content-top, 0px));
    padding-bottom: var(--safe-bottom);
    display: flex;
    flex-direction: column;
}
.sidebar.open { left: 0; transform: translateX(0); }
/* Header no longer scrolls; the list area takes the remaining height and
   scrolls on its own (was a fixed 100vh-60px that overflowed). */
.sidebar .sidebar-header { flex: 0 0 auto; }
.sidebar .sidebar-content {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}
#sort-sidebar {
    left: auto; right: 0;
    transform: translateX(100%);
    transition: transform 0.4s var(--ease-out);
    border-radius: var(--r-xl) 0 0 var(--r-xl);
}
#sort-sidebar.open { right: 0; transform: translateX(0); }

/* ==========================================================================
   9 · INFO / REVIEWS — matte work-surfaces with hairline + accent edge
   (NOT glass: focused reach keeps lists/sections light for perf)
   ========================================================================== */
.info-section,
.reviews-stats {
    border-radius: var(--r-lg);
    border: 1px solid var(--glass-border);
    background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), var(--elev-1);
}
.review-card {
    border-radius: var(--r-md);
    border: 1px solid var(--glass-border);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}
.info-section-icon { color: var(--accent-yellow); }

/* ==========================================================================
   10 · ADMIN — same chrome + matte work-surfaces + unified icons
   ========================================================================== */
.admin-home-tile {
    border-radius: var(--r-md);
    border: 1px solid var(--glass-border);
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), var(--elev-1);
    transition: transform 0.2s var(--press), box-shadow 0.25s ease, border-color 0.25s ease;
}
.admin-home-tile:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--accent-yellow-rgb), 0.4);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 14px 30px -16px var(--accent-glow);
}
.admin-home-tile:active { transform: translateY(0) scale(0.98); }
.admin-home-tile-icon { color: var(--accent-yellow); }

/* ==========================================================================
   10b · TAB HEADER MINI-LOGO  (small logo above each sub-page title)
   Reuses .logo-img so applyLogoImage() drives it: shows the admin's
   uploaded logo when set, hides cleanly otherwise.
   ========================================================================== */
.header-logo-stacked {
    flex-direction: column;
    gap: 2px;
}
.header-mini-logo {
    height: 34px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}
/* When no logo image is set the slot would fall back to brand TEXT, which is
   redundant directly above the screen title. Hide the text-only state; the
   injected <img> sibling (custom logo) stays visible. */
.header-mini-logo.logo-text-slot:not([data-logo-custom-injected]) { display: none; }
img.header-mini-logo { display: block; }


/* ==========================================================================
   11 · LOADING / WELCOME / MAINTENANCE polish
   ========================================================================== */
.loader {
    border-color: rgba(255,255,255,0.10);
    border-top-color: var(--accent-yellow);
    box-shadow: 0 0 18px -4px var(--accent-glow);
}
.maintenance-icon { color: var(--accent-yellow); filter: drop-shadow(0 0 14px var(--accent-glow)); }
.maintenance-code-btn { box-shadow: inset 0 1.5px 0 rgba(255,255,255,0.7), 0 10px 22px -10px var(--accent-glow); }

/* ==========================================================================
   12 · MOTION — staggered entrance for product grid + reveal discipline
   ========================================================================== */
@keyframes lg-rise {
    from { opacity: 0; transform: translateY(14px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.products-grid .product-card {
    animation: lg-rise 0.5s var(--ease-out) both;
}
.products-grid .product-card:nth-child(1) { animation-delay: 0.02s; }
.products-grid .product-card:nth-child(2) { animation-delay: 0.06s; }
.products-grid .product-card:nth-child(3) { animation-delay: 0.10s; }
.products-grid .product-card:nth-child(4) { animation-delay: 0.14s; }
.products-grid .product-card:nth-child(5) { animation-delay: 0.18s; }
.products-grid .product-card:nth-child(6) { animation-delay: 0.22s; }
.products-grid .product-card:nth-child(n+7) { animation-delay: 0.26s; }

/* reduced-motion: cancel entrance + sheen movement, keep all final states */
@media (prefers-reduced-motion: reduce) {
    .products-grid .product-card { animation: none !important; }
    .header::after, .bottom-nav::after, .custom-popup-content::after,
    .offer-card::after, .contact-card::after { display: none !important; }
    /* Like button: liked look is class-driven, so killing the keyframes
       here still leaves the correct end state (filled heart, glow, count). */
    .like-heart, .like-btn::before, .like-count.tick { animation: none !important; }
}

/* ==========================================================================
   13 · FOCUS-VISIBLE — accessible keyboard ring (admin-reactive)
   ========================================================================== */
#app a:focus-visible,
#app button:focus-visible,
#app input:focus-visible,
#app textarea:focus-visible,
#app select:focus-visible,
#app [tabindex]:focus-visible {
    outline: 2px solid var(--accent-yellow);
    outline-offset: 2px;
    border-radius: 6px;
}
/* ==========================================================================
   14 · MOTION TOGGLE  (admin knob: appearance.motion_enabled = false)
   applyAppearance() adds body.motion-off when the admin turns motion off.
   This mirrors the prefers-reduced-motion block above for users who don't
   set the OS flag but want a static UI. Final states are all preserved —
   only entrance, the travelling sheen, and transition timing are cut.
   ========================================================================== */
body.motion-off .products-grid .product-card { animation: none !important; }
body.motion-off .leaf-rain { display: none; }
body.motion-off .header::after,
body.motion-off .bottom-nav::after,
body.motion-off .custom-popup-content::after,
body.motion-off .offer-card::after,
body.motion-off .contact-card::after { display: none !important; }
/* Like button: same treatment as the reduced-motion block above — the
   .liked class already carries the final look, so cutting the keyframes
   just removes the pop/burst/tick flourish, not the state itself. */
body.motion-off .like-heart,
body.motion-off .like-btn::before,
body.motion-off .like-count.tick { animation: none !important; }
body.motion-off #app *,
body.motion-off #app *::before,
body.motion-off #app *::after {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
}
/* Image tile selector — click to switch bundled leaf source. */
.appearance-leaf-chooser { display: flex; align-items: center; gap: 10px; margin: 8px 0; flex-wrap: wrap; }
.appearance-image-tiles { display: flex; gap: 6px; flex-wrap: wrap; }
.appearance-image-tile { width: 56px; height: 56px; border-radius: 8px; border: 2px solid var(--dark-surface); overflow: hidden; cursor: pointer; display: flex; align-items: center; justify-content: center; background: var(--dark-bg); transition: border-color .15s; }
.appearance-image-tile.active { border-color: var(--accent-color); }
.appearance-image-tile:hover { border-color: var(--accent-color); }
.appearance-image-tile img { width: 100% !important; height: 100% !important; object-fit: cover; }
/* Leaf preview rendered as a masked silhouette filled with the chosen color,
   so the tile shows exactly what the falling leaves will look like. */
.appearance-leaf-swatch { width: 100%; height: 100%; display: block; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }
.appearance-effect-preview { display: grid; gap: 6px; min-width: 0; }
.appearance-effect-preview-label { font-size: 12px; font-weight: 700; color: var(--dark-text-secondary, #9aa0a6); }
.appearance-effect-preview-stage {
    width: 100%;
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.28);
}
.appearance-effect-preview-media {
    display: block;
    width: min(42vw, 160px);
    height: 140px;
    object-fit: contain;
}
.appearance-effect-preview-swatch {
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
@media (max-width: 430px) {
    .appearance-effect-preview-stage { min-height: 132px; }
    .appearance-effect-preview-media { width: 116px; height: 116px; }
}
/* Font picker — each tile previews the shop name rendered in that very font
   so the admin sees the style, not just its name. Two independent grids
   (display + UI) share these styles. */
.appearance-font-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.appearance-font-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.08); background: var(--dark-surface, #1a1a1a); cursor: pointer; transition: border-color .15s, transform .1s; text-align: left; overflow: hidden; }
.appearance-font-tile:hover { border-color: var(--accent-color); }
.appearance-font-tile:active { transform: scale(0.97); }
.appearance-font-tile.active { border-color: var(--accent-color); box-shadow: inset 0 0 0 1px var(--accent-color); }
.appearance-font-sample { font-size: 22px; line-height: 1.1; color: var(--dark-text, #f5f5f5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.appearance-font-label { font-family: var(--brand-ui-font); font-size: 11px; font-weight: 600; color: var(--dark-text-secondary, #9aa0a6); letter-spacing: .3px; }

/* One-tap appearance presets. */
.appearance-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 10px; }
.appearance-preset { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 6px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.08); background: var(--dark-surface, #1a1a1a); cursor: pointer; transition: border-color .15s, transform .1s; }
.appearance-preset:hover { border-color: var(--accent-color); }
.appearance-preset:active { transform: scale(0.97); }
.appearance-preset-swatch { height: 40px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25); }
.appearance-preset-name { font-size: 12px; font-weight: 600; text-align: center; color: var(--dark-text-primary, #f5f5f5); }

/* Build-from-one-color generator. */
.appearance-from-color { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.08); display: flex; flex-direction: column; gap: 8px; }
.appearance-from-color-row { display: flex; align-items: center; gap: 10px; }
.appearance-from-color-tip { font-size: 12px; line-height: 1.35; }

/* === END LIQUID GLASS × GTA LAYER === */