/* =============================================================
   CRYPTIC ROOM — Luxury Escape Rooms
   Design System (SCSS-style structure, compiled to CSS)
   WordPress-ready: these tokens map to theme.json / ACF options
   ============================================================= */

/* ----------
   1. Design Tokens
   ---------- */
:root {
    /* Color ramps */
    --c-black: #06070a;
    --c-ink-900: #0a0c12;
    --c-ink-800: #10131c;
    --c-ink-700: #161a26;
    --c-ink-600: #1e2333;
    --c-ink-500: #2a3044;
    --c-ink-400: #3a4159;

    --c-gold-100: #fff3d6;
    --c-gold-200: #ffe6ad;
    --c-gold-300: #f4cf7a;
    --c-gold-400: #e6b54a;
    --c-gold-500: #d29a2b;
    --c-gold-600: #a9771c;

    --c-neon-cyan: #4be3ff;
    --c-neon-magenta: #ff4bd8;
    --c-neon-violet: #8a6bff;

    --c-success: #3ddc97;
    --c-warning: #ffb547;
    --c-error: #ff5470;

    --c-text: #eef1f7;
    --c-text-dim: #a7afcb;
    --c-text-mute: #6b7494;

    /* Typography */
    --font-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
    --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, monospace;

    /* Spacing — 8px system */
    --sp-1: 0.5rem;
    --sp-2: 1rem;
    --sp-3: 1.5rem;
    --sp-4: 2rem;
    --sp-5: 3rem;
    --sp-6: 4rem;
    --sp-7: 6rem;
    --sp-8: 8rem;

    /* Radius */
    --r-sm: 8px;
    --r-md: 14px;
    --r-lg: 22px;
    --r-xl: 32px;
    --r-pill: 999px;

    /* Shadows */
    --sh-soft: 0 10px 40px -12px rgba(0, 0, 0, 0.6);
    --sh-glow-gold: 0 0 0 1px rgba(230, 181, 74, 0.35), 0 18px 60px -20px rgba(230, 181, 74, 0.45);
    --sh-glass: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 30px 80px -30px rgba(0, 0, 0, 0.8);

    /* Motion */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --t-fast: 0.18s;
    --t-med: 0.4s;
    --t-slow: 0.7s;

    /* Layout */
    --container: 1280px;
    --container-narrow: 880px;
    --header-h: 84px;
    /* WP's #wpadminbar is fixed at the very top of the viewport too (32px on
       desktop, 46px below its own 782px breakpoint) — with .site-header ALSO
       fixed to the viewport top, the two used to overlap for any logged-in
       admin, which is who actually tests this site day-to-day. 0 by default
       (no admin bar for logged-out visitors); body.admin-bar below sets the
       real value. Add this, not --header-h itself, to anything computing a
       position/offset relative to the viewport — --header-h stays the
       header's own height, unrelated to where its top edge currently sits. */
    --admin-bar-h: 0px;
}
body.admin-bar {
    --admin-bar-h: 32px;
}
@media screen and (max-width: 782px) {
    body.admin-bar {
        --admin-bar-h: 46px;
    }
    /* WP core switches #wpadminbar from fixed to absolute at this same
       breakpoint, so it scrolls away with the page instead of staying
       pinned — leaving a 46px gap above .site-header (which is still fixed
       and offset by --admin-bar-h, assuming the bar is always there). Force
       it back to fixed so the offset assumption above holds on mobile too. */
    #wpadminbar {
        position: fixed;
    }
}

/* ----------
   2. Reset & Base
   ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    color: var(--c-text);
    background: var(--c-black);
    line-height: 1.6;
    font-size: 16px;
    overflow-x: hidden;
    /* cinematic vignette + grain layer */
    background-image:
            radial-gradient(120% 80% at 50% -10%, rgba(138, 107, 255, 0.12), transparent 60%),
            radial-gradient(100% 60% at 90% 10%, rgba(230, 181, 74, 0.08), transparent 55%),
            linear-gradient(180deg, #06070a 0%, #0a0c12 100%);
    background-attachment: fixed;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--t-fast) var(--ease-out);
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
}

ul,
ol {
    list-style: none;
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.01em;
}

::selection {
    background: var(--c-gold-400);
    color: var(--c-black);
}

:focus-visible {
    outline: 2px solid var(--c-gold-400);
    outline-offset: 3px;
}

/* Every decorative animation on the site (orb drift, card/hero reveals,
   button/card hover motion, counters, the archive filter fade) respects
   this — nothing here is load-bearing for comprehension, so a user who's
   told their OS they get motion-sick or distracted by it gets an
   effectively static (but still fully functional) site instead. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ----------
   3. Layout helpers
   ---------- */
.container {
    width: min(100% - 2.5rem, var(--container));
    margin-inline: auto;
}
.container--narrow {
    width: min(100% - 2.5rem, var(--container-narrow));
}
.section {
    /* Was var(--sp-8) (8rem/128px each side, 16rem/256px between two
       adjacent sections) — cut further after a first pass to 5rem still
       read as too much empty space. Decoupled from the shared --sp-8 token
       (used nowhere else) rather than changing the token itself. */
    padding-block: 3.75rem;
    position: relative;
}
.section--sm {
    padding-block: 2.5rem;
}
.grid {
    display: grid;
    gap: var(--sp-3);
}
.grid > * {
    min-width: 0;
}
.stack {
    display: flex;
    flex-direction: column;
}
.row {
    display: flex;
    align-items: center;
}
.between {
    justify-content: space-between;
}
.center {
    justify-content: center;
    text-align: center;
}
.wrap {
    flex-wrap: wrap;
}
.gap-1 { gap: var(--sp-1); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }

/* ----------
   4. Typography utilities
   ---------- */
.eyebrow {
    font-family: var(--font-body);
    font-size: 0.78rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--c-gold-300);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
}
.eyebrow::before {
    content: "";
    width: 28px;
    height: 1px;
    background: linear-gradient(90deg, var(--c-gold-400), transparent);
}
.center .eyebrow::after {
    content: "";
    width: 28px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--c-gold-400));
}

.h-display {
    font-size: clamp(2.2rem, 5vw, 4rem);
}
.h-xl {
    font-size: clamp(1.8rem, 4vw, 3rem);
}
.h-lg {
    font-size: clamp(1.5rem, 3.2vw, 2.25rem);
}
.h-md {
    font-size: clamp(1.25rem, 2.4vw, 1.7rem);
}
.lead {
    font-size: 1.125rem;
    color: var(--c-text-dim);
    max-width: 60ch;
}
.text-gold {
    color: var(--c-gold-300);
}
.text-gradient-gold {
    background: linear-gradient(120deg, var(--c-gold-100), var(--c-gold-400) 50%, var(--c-gold-600));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ----------
   5. Buttons
   ---------- */
.btn {
    --btn-bg: var(--c-gold-400);
    --btn-fg: var(--c-black);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.95rem 1.6rem;
    border-radius: var(--r-pill);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    /* uk/pt labels ("Особистий кабінет", "Забронювати") run longer than their
       English original — without this a pill button just wraps to 2 lines
       instead of growing wider, which looks broken (and un-centers its own
       text vertically). Buttons should always stay one line; let the flex
       parent give them the width they need instead. */
    white-space: nowrap;
    background: var(--btn-bg);
    color: var(--btn-fg);
    position: relative;
    /* !important: WooCommerce's own woocommerce.css sets "button.button,
       a.button, input.button { overflow: visible }" — 2 classes + a type
       selector beats this plain ".btn" on specificity wherever a button
       also carries WC's own .button class (e.g. "woocommerce-Button button
       btn" on My Account forms), leaving the shimmer sweep below
       permanently visible off to the button's left instead of clipped.
       Same fix already applied to .wc-proceed-to-checkout .checkout-button
       for the identical reason. */
    overflow: hidden !important;
    transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out), background var(--t-fast);
    isolation: isolate;
}
.btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    transform: translateX(-120%);
    transition: transform var(--t-slow) var(--ease-out);
    z-index: -1;
}
.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px -16px rgba(230, 181, 74, 0.7);
}
.btn:hover::before {
    transform: translateX(120%);
}
.btn--ghost {
    --btn-bg: transparent;
    --btn-fg: var(--c-text);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
}
.btn--ghost:hover {
    border-color: var(--c-gold-400);
    box-shadow: var(--sh-glow-gold);
}
.btn--dark {
    --btn-bg: rgba(255, 255, 255, 0.06);
    --btn-fg: var(--c-text);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.btn--lg {
    padding: 1.15rem 2.2rem;
    font-size: 1.05rem;
}
.btn--block {
    width: 100%;
}

/* ----------
   6. Glassmorphism card
   ---------- */
.glass {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-glass);
}

/* ----------
   7. Chips, badges, pills
   ---------- */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border-radius: var(--r-pill);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--c-text-dim);
}
.chip--gold {
    background: rgba(230, 181, 74, 0.12);
    border-color: rgba(230, 181, 74, 0.4);
    color: var(--c-gold-200);
}
.chip--neon {
    background: rgba(75, 227, 255, 0.1);
    border-color: rgba(75, 227, 255, 0.35);
    color: var(--c-neon-cyan);
}

/* Kids birthday package cards: one Basic/Advanced toggle shared above the
   whole row of cards (not per card) — switching it swaps every card's
   content together, so the row reflows as a unit instead of any single
   card jumping relative to its neighbors. */
.pkg-card {
    border: 1px solid transparent;
}
.pkg-card--highlighted {
    border-color: var(--c-gold-400);
}
.pkg-toggle {
    display: inline-flex;
    padding: 0.25rem;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.pkg-toggle--global {
    margin-bottom: var(--sp-4);
}
.pkg-toggle__btn {
    padding: 0.4rem 0.9rem;
    border-radius: var(--r-pill);
    border: none;
    background: none;
    color: var(--c-text-mute);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.pkg-toggle__btn.is-active {
    background: var(--c-gold-400);
    color: var(--c-ink-900);
}
.pkg-variant-stack > .pkg-variant {
    display: none;
}
.pkg-variant-stack > .pkg-variant.is-active {
    display: block;
}

/* Dotted intensity meters (fear / difficulty / activity) */
.meter {
    display: inline-flex;
    gap: 4px;
}
.meter__dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.meter__dot.is-on[data-tone="gold"] {
    background: var(--c-gold-400);
    border-color: var(--c-gold-300);
    box-shadow: 0 0 8px var(--c-gold-400);
}
.meter__dot.is-on[data-tone="magenta"] {
    background: var(--c-neon-magenta);
    border-color: var(--c-neon-magenta);
    box-shadow: 0 0 8px var(--c-neon-magenta);
}
.meter__dot.is-on[data-tone="cyan"] {
    background: var(--c-neon-cyan);
    border-color: var(--c-neon-cyan);
    box-shadow: 0 0 8px var(--c-neon-cyan);
}

/* Rating stars */
.stars {
    display: inline-flex;
    gap: 2px;
    color: var(--c-gold-400);
    letter-spacing: 2px;
}
.stars span.dim {
    color: rgba(255, 255, 255, 0.18);
}

/* ----------
   8. Header / Nav
   ---------- */
.site-header {
    position: fixed;
    inset: var(--admin-bar-h) 0 auto 0;
    height: var(--header-h);
    z-index: 100;
    display: flex;
    align-items: center;
    transition: background var(--t-med), backdrop-filter var(--t-med), border-color var(--t-med), top var(--t-fast);
    border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
    background: rgba(8, 9, 14, 0.72);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}
.site-header__inner {
    width: min(100% - 2.5rem, var(--container));
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}
.brand__mark {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--c-gold-300), var(--c-gold-600));
    color: var(--c-black);
    font-weight: 800;
    font-family: var(--font-body);
    box-shadow: 0 0 24px -6px var(--c-gold-400);
}
.brand__logo {
    height: 44px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
}
/* WooCommerce's own stylesheet ships ".woocommerce img, .woocommerce-page img"
   (class+element specificity) which otherwise beats the single-class rule
   above on every WooCommerce page (shop/product/cart/account all carry the
   .woocommerce-page body class), stretching the logo to its native size. */
.site-header .brand__logo,
.site-footer .brand__logo {
    height: 44px;
    width: auto;
    max-width: 220px;
}
.brand__name b {
    color: var(--c-gold-300);
}
.nav {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.nav__link {
    padding: 0.55rem 0.9rem;
    border-radius: var(--r-pill);
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--c-text-dim);
    position: relative;
    transition: color var(--t-fast);
    /* Same reasoning as .btn — "Про нас" (2 words) wrapped to 2 lines here
       otherwise, since a nav link is just as wide as its longest English
       word normally allowed. */
    white-space: nowrap;
}
.nav__link:hover,
.nav__link.is-active {
    color: var(--c-text);
}
.nav__link:hover::after,
.nav__link.is-active::after {
    transform: scaleX(1);
}
.nav__link::after {
    content: "";
    position: absolute;
    left: 0.9rem;
    right: 0.9rem;
    bottom: 0.2rem;
    height: 1px;
    background: var(--c-gold-400);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--t-med) var(--ease-out);
}
.nav__dropdown {
    position: relative;
}
.nav__dropdown-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    min-width: 240px;
    padding: 0.6rem;
    border-radius: var(--r-md);
    background: rgba(12, 14, 20, 0.92);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: var(--sh-soft);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity var(--t-med), transform var(--t-med), visibility var(--t-med);
}
.nav__dropdown:hover .nav__dropdown-menu,
.nav__dropdown:focus-within .nav__dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.nav__dropdown-menu a {
    display: block;
    padding: 0.55rem 0.8rem;
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--c-text-dim);
}
.nav__dropdown-menu a:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--c-text);
}
.nav__cta {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}
.lang-switcher {
    position: relative;
    font-size: 0.85rem;
}
.lang-switcher__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    border-radius: var(--r-pill);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--c-text-dim);
    font-weight: 600;
}
.lang-switcher__btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transition: transform var(--t-med);
}
.lang-switcher.is-open .lang-switcher__btn svg {
    transform: rotate(180deg);
}
.lang-switcher__btn:hover {
    border-color: var(--c-gold-400);
    color: var(--c-gold-300);
}
.lang-switcher__menu {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    min-width: 150px;
    padding: 0.4rem;
    border-radius: var(--r-md);
    background: rgba(12, 14, 20, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: var(--sh-soft);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: all var(--t-med);
}
.lang-switcher.is-open .lang-switcher__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.lang-switcher__menu a {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 0.45rem 0.7rem;
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--c-text-dim);
    text-decoration: none;
}
.lang-switcher__menu a:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--c-text);
}

.nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.nav-toggle span {
    width: 20px;
    height: 2px;
    background: var(--c-text);
    transition: transform var(--t-med), opacity var(--t-fast);
}
.nav-toggle.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nav-toggle.is-open span:nth-child(2) {
    opacity: 0;
}
.nav-toggle.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Header cart icon + dropdown mini-cart — see header.php
   (cr_render_header_cart_widget() in inc/woocommerce-cart.php),
   woocommerce/cart/mini-cart.php and assets/js/mini-cart.js for the
   open/close toggle. Mirrors the .lang-switcher dropdown pattern above,
   with its own glass-card treatment (gradient + gold hairline + pointer
   caret) rather than the lang-switcher's flatter menu, since this panel
   carries real product imagery/pricing, not a short text list. */
.cart-widget {
    position: relative;
}
.cart-toggle {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.03);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-text-dim);
    transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.cart-toggle:hover {
    color: var(--c-gold-300);
    border-color: var(--c-gold-400);
    background: rgba(230, 181, 74, 0.08);
}
.cart-widget.is-open .cart-toggle {
    color: var(--c-gold-300);
    border-color: var(--c-gold-400);
    background: rgba(230, 181, 74, 0.1);
}
.cart-toggle .icon {
    width: 18px;
    height: 18px;
}
.cart-toggle__count {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 19px;
    height: 19px;
    padding: 0 4px;
    border-radius: var(--r-pill);
    background: linear-gradient(180deg, var(--c-gold-300), var(--c-gold-500));
    color: var(--c-black);
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 19px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--c-black, #0a0a10);
}
.cart-toggle__count.is-empty {
    display: none;
}

.mini-cart {
    position: absolute;
    top: calc(100% + 1rem);
    right: 0;
    width: 360px;
    max-height: min(75vh, 560px);
    display: flex;
    flex-direction: column;
    border-radius: var(--r-lg);
    background: linear-gradient(165deg, rgba(24, 22, 30, 0.98), rgba(14, 13, 18, 0.98));
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: var(--sh-soft), 0 0 0 1px rgba(230, 181, 74, 0.05);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px) scale(0.98);
    transform-origin: top right;
    transition: opacity var(--t-med), transform var(--t-med) var(--ease-out), visibility var(--t-med);
    z-index: 50;
    overflow: hidden;
}
.mini-cart::before {
    content: "";
    position: absolute;
    top: -7px;
    right: 14px;
    width: 14px;
    height: 14px;
    background: rgb(20, 19, 25);
    border-left: 1px solid rgba(255, 255, 255, 0.09);
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    transform: rotate(45deg);
    border-radius: 3px 0 0 0;
}
.cart-widget.is-open .mini-cart {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}
/* The one direct child of .mini-cart (header.php's wrapper div) — has to
   carry on the flex column itself, or .mini-cart__head/ul/totals/buttons
   below (all actually its grandchildren) can't shrink/scroll against
   .mini-cart's own max-height; flex/min-height only propagate to direct
   children, not through a plain block wrapper. */
.mini-cart .widget_shopping_cart_content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.mini-cart__head {
    flex: none;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 1.15rem 1.4rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.mini-cart__title {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--c-text);
}
.mini-cart__count {
    font-size: 0.76rem;
    color: var(--c-text-mute);
    white-space: nowrap;
}

.mini-cart .woocommerce-mini-cart {
    list-style: none;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    margin: 0;
    padding: 0.4rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(230, 181, 74, 0.35) transparent;
}
.mini-cart .woocommerce-mini-cart::-webkit-scrollbar {
    width: 5px;
}
.mini-cart .woocommerce-mini-cart::-webkit-scrollbar-thumb {
    background: rgba(230, 181, 74, 0.35);
    border-radius: var(--r-pill);
}

/* Rows reuse the same .cr-cart-item__media/__info/__name/__type/__meta
   building blocks as the full cart page (see woocommerce/cart/mini-cart.php
   and cart/cart.php) — this just gives that shared markup a smaller,
   flex (media/info/remove) layout instead of the full cart's 5-column
   grid, since there's no qty stepper or separate price column here. */
.mini-cart .cr-cart-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0.5rem;
    margin: 0 -0.5rem;
    border-radius: var(--r-sm);
    border-bottom: none;
    transition: background var(--t-fast);
}
.mini-cart .woocommerce-mini-cart-item + .woocommerce-mini-cart-item {
    border-top: 1px dashed rgba(255, 255, 255, 0.07);
}
.mini-cart .cr-cart-item:hover {
    background: rgba(255, 255, 255, 0.035);
}
.mini-cart .cr-cart-item__media {
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: var(--r-sm);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Ring border only for the icon boxes (booking/certificate/birthday —
   no real photo, see cr_wc_cart_item_icon_thumbnail() in
   inc/woocommerce-cart.php) — a real product photo doesn't need a frame
   around it. */
.mini-cart .cr-cart-item__media:not(:has(img)) {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}
/* !important: WooCommerce's own woocommerce.css hardcodes 32px
   ("ul.cart_list li img") — ties with this rule on class count and wins
   on element count (its extra ul/li type selectors), shrinking the photo
   to less than the .cr-cart-item__media box instead of filling it. */
.mini-cart .cr-cart-item__media img {
    width: 100% !important;
    height: 100% !important;
    border-radius: var(--r-sm);
    object-fit: cover;
}
/* .cr-cart-item__icon's own display:flex + gold color lives in
   woocommerce.css (the full cart-page section), which only loads on
   cart/checkout/my-account — but the header mini-cart's icon boxes (no
   photo: booking/certificate/birthday rows) need it on every page. Without
   it the icon fell back to inline/default-color and sat top-left in its
   box instead of centered gold. */
.mini-cart .cr-cart-item__icon {
    display: flex;
    color: var(--c-gold-300);
}
.mini-cart .cr-cart-item__icon svg {
    width: 20px;
    height: 20px;
}
/* A flex item's default min-width is auto (shrinks no further than its
   content's intrinsic width) — without this, long unbroken text/meta here
   forces the row past the mini-cart's narrow width instead of wrapping. */
.mini-cart .cr-cart-item__info {
    flex: 1;
    min-width: 0;
}
.mini-cart .cr-cart-item__name {
    font-size: 0.92rem;
}
/* .cr-cart-item__type's own display:block lives in woocommerce.css, which
   only loads on cart/checkout/my-account — but the header mini-cart (and
   this item type label) is present on every page, so without this it ran
   inline into the product name right after it ("Birthday PartyThe
   Adventurer"). */
.mini-cart .cr-cart-item__type {
    display: block;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-gold-400);
    font-weight: 700;
    margin-bottom: 0.25rem;
}
.mini-cart .cr-cart-item__meta dl.variation {
    font-size: 0.76rem;
}
/* WooCommerce's own woocommerce.css sets a 1em bottom margin on every dt/dd
   in a cart-list <dl> ("ul.cart_list li dl dd") — beats our unscoped reset
   here (more classes/elements in its selector), stacking a big gap between
   each meta line (Color/Size, Date/Time, etc). */
.mini-cart .cr-cart-item__meta dl.variation dd,
.mini-cart .cr-cart-item__meta dl.variation dt {
    margin-bottom: 0 !important;
}
.mini-cart .cr-cart-item .quantity {
    display: block;
    font-size: 0.8rem;
    color: var(--c-text-mute);
    margin-top: 0.35rem;
}
.mini-cart .cr-cart-item .quantity .amount {
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--c-gold-300);
    font-weight: 600;
}
.mini-cart .cr-cart-item .remove {
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-text-mute);
    font-size: 1.1rem;
    line-height: 1;
    opacity: 0.6;
    transition: opacity var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.mini-cart .cr-cart-item:hover .remove {
    opacity: 1;
}
.mini-cart .cr-cart-item .remove:hover {
    color: var(--c-error);
    background: rgba(255, 84, 112, 0.12);
    opacity: 1;
}

.mini-cart__empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2.4rem 1.5rem;
    gap: 0.9rem;
}
.mini-cart__empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-text-mute);
}
.mini-cart .woocommerce-mini-cart__empty-message {
    color: var(--c-text);
    font-size: 0.95rem;
    font-weight: 500;
    margin: 0;
}
.mini-cart__empty-cta {
    font-size: 0.82rem;
    color: var(--c-gold-400);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.mini-cart__empty-cta:hover {
    color: var(--c-gold-300);
}

.mini-cart .woocommerce-mini-cart__total {
    flex: none;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: 0.9rem;
    color: var(--c-text-dim);
    padding: 1rem 1.4rem 0;
    margin: 0.4rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.mini-cart .woocommerce-mini-cart__total .amount {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--c-text);
}
.mini-cart .woocommerce-mini-cart__buttons {
    flex: none;
    display: flex;
    gap: 0.6rem;
    margin: 0;
    padding: 1rem 1.4rem 1.4rem;
}
/* "View cart"/"Checkout" are the site's own .btn/.btn--ghost component
   (see cr_render_mini_cart_buttons() in inc/woocommerce-cart.php) — this
   just shrinks them to fit two side by side in the mini-cart's narrow
   width; color, radius, and hover state all come from .btn/.btn--ghost
   themselves. */
.mini-cart .woocommerce-mini-cart__buttons .btn {
    flex: 1;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
}

/* Below the header's own breakpoint (see the .nav/.nav-toggle switch further
   down) .cart-widget is no longer flush against the viewport's right edge —
   the hamburger button sits after it. .mini-cart's `right: 0` is anchored to
   .cart-widget's own box, not the viewport, so at narrow widths the 360px
   panel was spilling off the left edge of the screen. Anchoring to the
   viewport instead (fixed + left/right insets) keeps it fully on-screen
   regardless of exactly where the cart icon sits. */
@media (max-width: 768px) {
    .mini-cart {
        position: fixed;
        top: calc(var(--header-h) + var(--admin-bar-h));
        left: 1.25rem;
        right: 1.25rem;
        width: auto;
        max-height: min(70vh, 520px);
        transform-origin: top center;
    }
    .mini-cart::before {
        display: none;
    }
}
@media (max-width: 480px) {
    .mini-cart {
        left: 1rem;
        right: 1rem;
    }
}

/* Header search — icon-only trigger (matches .cart-toggle exactly) that
   opens a full-width overlay covering the header bar (assets/js/search.js
   owns the .is-open toggle + AJAX; header.php has the markup). Deliberately
   its own bar rather than a dropdown pinned to the icon, since the input
   needs to feel like the header itself transformed into a search bar. */
.search-widget {
    position: relative;
}
.search-toggle {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.03);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-text-dim);
    transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.search-toggle:hover,
.search-toggle[aria-expanded="true"] {
    color: var(--c-gold-300);
    border-color: var(--c-gold-400);
    background: rgba(230, 181, 74, 0.08);
}
.search-toggle .icon {
    width: 18px;
    height: 18px;
}

.search-overlay {
    position: fixed;
    inset: var(--admin-bar-h) 0 auto 0;
    z-index: 110;
    background: linear-gradient(165deg, rgba(24, 22, 30, 0.98), rgba(14, 13, 18, 0.98));
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    border-bottom: 1px solid rgba(230, 181, 74, 0.16);
    box-shadow: var(--sh-soft);
    max-height: min(82vh, 680px);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity var(--t-med), transform var(--t-med) var(--ease-out), visibility var(--t-med);
    scrollbar-width: thin;
    scrollbar-color: rgba(230, 181, 74, 0.35) transparent;
}
.search-overlay.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.search-overlay__bar {
    height: var(--header-h);
    flex: none;
    display: flex;
    align-items: center;
}
.search-overlay__form {
    width: min(100% - 2.5rem, var(--container));
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: 0.9rem;
}
.search-overlay__icon {
    flex: none;
    width: 22px;
    height: 22px;
    color: var(--c-gold-400);
}
.search-overlay__input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--c-text);
}
.search-overlay__input::placeholder {
    color: var(--c-text-mute);
}
.search-overlay__close {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.03);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-text-dim);
    transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.search-overlay__close svg {
    width: 15px;
    height: 15px;
}
.search-overlay__close:hover {
    color: var(--c-gold-300);
    border-color: var(--c-gold-400);
    background: rgba(230, 181, 74, 0.08);
}

.search-overlay__results {
    width: min(100% - 2.5rem, var(--container));
    margin-inline: auto;
    padding: 0 0 1.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.search-overlay__section {
    padding-top: 1.1rem;
}
.search-overlay__section-title {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--c-gold-400);
    margin-bottom: 0.4rem;
}
.search-overlay__item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.55rem 0.4rem;
    margin: 0 -0.4rem;
    border-radius: var(--r-sm);
    transition: background var(--t-fast);
}
.search-overlay__item:hover {
    background: rgba(255, 255, 255, 0.04);
}
.search-overlay__item-media {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: var(--r-sm);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.search-overlay__item-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.search-overlay__item-info {
    flex: 1;
    min-width: 0;
}
.search-overlay__item-title {
    font-size: 0.92rem;
    color: var(--c-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-overlay__item-excerpt {
    font-size: 0.78rem;
    color: var(--c-text-mute);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-overlay__seeall {
    display: block;
    text-align: center;
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
    font-size: 0.85rem;
    color: var(--c-gold-400);
}
.search-overlay__seeall:hover {
    color: var(--c-gold-300);
}
.search-overlay__state {
    padding: 1.75rem 0.4rem;
    text-align: center;
    color: var(--c-text-mute);
    font-size: 0.88rem;
}

@media (max-width: 640px) {
    .search-overlay__form {
        gap: 0.6rem;
    }
    .search-overlay__input {
        font-size: 1.05rem;
    }
}

/* search.php's "Pages" section — a plain link list (no thumbnail/meta the
   way rooms/games/products/posts have), styled as a set of .glass rows
   rather than the card grid every other result type reuses. */
.search-page-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.search-page-list__item {
    padding: 1rem 1.4rem;
    border-radius: var(--r-lg);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: border-color var(--t-fast), background var(--t-fast);
}
.search-page-list__item:hover {
    border-color: rgba(230, 181, 74, 0.35);
    background: rgba(255, 255, 255, 0.045);
}
.search-page-list__item a {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--c-text);
}
.search-page-list__item a:hover {
    color: var(--c-gold-300);
}
.search-page-list__item p {
    margin-top: 0.3rem;
    font-size: 0.86rem;
    color: var(--c-text-mute);
}

/* Mobile drawer */
.mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: rgba(6, 7, 10, 0.97);
    backdrop-filter: blur(24px);
    display: flex;
    flex-direction: column;
    padding: calc((var(--header-h) + var(--admin-bar-h)) + 2rem) 1.5rem 2rem;
    transform: translateX(100%);
    transition: transform var(--t-slow) var(--ease-out);
    overflow-y: auto;
}
.mobile-nav.is-open {
    transform: translateX(0);
}
.mobile-nav a {
    padding: 0.9rem 0;
    font-family: var(--font-display);
    font-size: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--c-text-dim);
}
.mobile-nav a:hover {
    color: var(--c-gold-300);
}

/* ----------
   9. Footer
   ---------- */
.site-footer {
    background: linear-gradient(180deg, #06070a, #04050a);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: var(--sp-7);
    position: relative;
}
.site-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--c-gold-400), transparent);
    opacity: 0.4;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
    gap: var(--sp-5);
    padding-bottom: var(--sp-6);
}
.footer-col h4 {
    font-family: var(--font-body);
    font-size: 0.78rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--c-gold-300);
    margin-bottom: var(--sp-2);
}
.footer-col ul li {
    margin-bottom: 0.6rem;
}
.footer-col a {
    color: var(--c-text-dim);
    font-size: 0.93rem;
}
.footer-col a:hover {
    color: var(--c-gold-300);
}
.footer-brand p {
    color: var(--c-text-mute);
    font-size: 0.9rem;
    margin-top: var(--sp-2);
    max-width: 38ch;
}
.social {
    display: flex;
    gap: 0.7rem;
    margin-top: var(--sp-3);
}
.social a {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--c-text-dim);
    transition: all var(--t-med) var(--ease-out);
}
.social a:hover {
    border-color: var(--c-gold-400);
    color: var(--c-gold-300);
    transform: translateY(-3px);
}
.newsletter {
    display: flex;
    gap: 0.5rem;
    margin-top: var(--sp-2);
}
.newsletter input {
    flex: 1;
    padding: 0.7rem 1rem;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--c-text);
    font-family: inherit;
}
.newsletter input::placeholder {
    color: var(--c-text-mute);
}
.newsletter .btn {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    padding: 0;
}
.newsletter .btn svg {
    width: 18px;
    height: 18px;
    transform: rotate(-90deg);
}
.newsletter__msg {
    display: block;
    margin-top: var(--sp-1, 0.5rem);
    font-size: 0.85rem;
}
.newsletter__msg.is-success { color: var(--c-success); }
.newsletter__msg.is-error { color: var(--c-error); }
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-block: var(--sp-3);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-2);
    color: var(--c-text-mute);
    font-size: 0.85rem;
}
.footer-bottom a {
    color: var(--c-text-mute);
}
.footer-bottom a:hover {
    color: var(--c-gold-300);
}

/* ----------
   16. Section heading
   ---------- */
.section-head {
    text-align: center;
    margin-bottom: var(--sp-6);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
}
.section-head .lead {
    margin-inline: auto;
}
.section-head--row {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
    margin-bottom: var(--sp-5);
}
.section-head--row .lead {
    margin: 0;
}
@media (max-width: 640px) {
    .section-head--row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sp-2);
    }
    .section-head--row .btn {
        align-self: stretch;
        text-align: center;
    }
}

/* Related products (single-product page): smaller, right-aligned heading
   and a tighter top gap under the tabs — deliberately not .section-head,
   which centers and uses a larger heading everywhere else. */
.related-products {
    padding-top: var(--sp-3);
}
.related-products__head {
    text-align: left;
    margin-bottom: var(--sp-3);
}
.related-products__head h2 {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
}

/* ----------
   18. Booking calendar
   ---------- */
.booking {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: var(--sp-3);
    align-items: start;
}
.booking__sidebar {
    position: sticky;
    top: calc((var(--header-h) + var(--admin-bar-h)) + 1rem);
}
.booking__panel {
    padding: var(--sp-3);
    border-radius: var(--r-lg);
}
.calendar {
    border-radius: var(--r-md);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.calendar__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sp-2) var(--sp-3);
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.calendar__nav {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--c-text-dim);
    transition: all var(--t-fast);
}
.calendar__nav:hover {
    border-color: var(--c-gold-400);
    color: var(--c-gold-300);
}
.calendar__week {
    text-align: center;
    font-family: var(--font-display);
    font-size: 1.1rem;
}
.calendar__week small {
    display: block;
    font-family: var(--font-body);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-text-mute);
    margin-top: 0.2rem;
}
.calendar__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.83rem;
}
.calendar__table th,
.calendar__table td {
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 0.45rem 0.3rem;
    text-align: center;
    vertical-align: middle;
}
.calendar__table thead th {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-text-mute);
    font-weight: 600;
    padding: 0.7rem 0.3rem;
    background: rgba(255, 255, 255, 0.02);
}
.calendar__table thead th .day-num {
    display: block;
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--c-text);
    margin-top: 0.15rem;
    letter-spacing: 0;
    text-transform: none;
}
.calendar__table thead th.is-today .day-num {
    color: var(--c-gold-300);
}
.calendar__time {
    color: var(--c-text-mute);
    font-family: var(--font-mono);
    font-size: 0.78rem;
}
.slot {
    width: 100%;
    padding: 0.55rem 0.3rem;
    border-radius: 6px;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    transition: all var(--t-fast);
    border: 1px solid transparent;
}
.slot.is-free {
    background: rgba(61, 220, 151, 0.08);
    color: var(--c-success);
    border-color: rgba(61, 220, 151, 0.25);
}
.slot.is-free:hover {
    background: rgba(61, 220, 151, 0.18);
    transform: scale(1.05);
}
.slot.is-booked {
    background: rgba(255, 84, 112, 0.06);
    color: rgba(255, 84, 112, 0.5);
    border-color: rgba(255, 84, 112, 0.12);
    text-decoration: line-through;
    cursor: not-allowed;
}
.slot.is-selected {
    background: var(--c-gold-400);
    color: var(--c-black);
    border-color: var(--c-gold-300);
    box-shadow: 0 0 0 2px rgba(230, 181, 74, 0.3);
}
.calendar__legend {
    display: flex;
    gap: var(--sp-3);
    justify-content: center;
    padding: var(--sp-2);
    font-size: 0.78rem;
    color: var(--c-text-mute);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
}
.legend-dot {
    width: 11px;
    height: 11px;
    border-radius: 3px;
    display: inline-block;
    margin-right: 0.4rem;
    vertical-align: middle;
}
.legend-dot.free { background: rgba(61, 220, 151, 0.5); }
.legend-dot.booked { background: rgba(255, 84, 112, 0.4); }
.legend-dot.selected { background: var(--c-gold-400); }

/* Player selector */
.player-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--r-pill);
    padding: 0.3rem;
}
.stepper__btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    color: var(--c-text);
    transition: all var(--t-fast);
}
.stepper__btn:hover:not(:disabled) {
    background: var(--c-gold-400);
    color: var(--c-black);
}
.stepper__btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
.stepper__value {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--c-gold-300);
    min-width: 80px;
    text-align: center;
}
.stepper__value small {
    display: block;
    font-family: var(--font-body);
    font-size: 0.7rem;
    color: var(--c-text-mute);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.price-breakdown {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-block: var(--sp-3);
    font-size: 0.9rem;
}
.price-row {
    display: flex;
    justify-content: space-between;
    color: var(--c-text-dim);
}
.price-row.total {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 0.8rem;
    margin-top: 0.4rem;
    font-size: 1.05rem;
    color: var(--c-text);
}
.price-row.total .amt {
    font-family: var(--font-display);
    font-size: 1.8rem;
    color: var(--c-gold-300);
}

.selected-slot-summary {
    padding: var(--sp-2);
    border-radius: var(--r-md);
    background: rgba(75, 227, 255, 0.05);
    border: 1px dashed rgba(75, 227, 255, 0.3);
    font-size: 0.85rem;
    color: var(--c-text-dim);
    margin-bottom: var(--sp-2);
    display: none;
}
.selected-slot-summary.is-visible {
    display: block;
}

/* ----------
   19. Forms
   ---------- */

/* Every <select>'s own box is styled above (translucent dark background),
   but its dropdown list is rendered natively by the browser/OS and won't
   honor a semi-transparent background — it was falling back to a light
   popup with our light option text on top of it, unreadable. Give the
   popup an explicit opaque background instead, and hint the browser to use
   its dark native chrome (scrollbar, built-in hover highlight) via
   color-scheme, since that highlight itself isn't stylable cross-browser. */
select {
    color-scheme: dark;
}
select option,
select optgroup {
    background-color: var(--c-ink-800);
    color: var(--c-text);
}

.form-grid,
.wpcf7-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
    min-width: 0;
}
.field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
    position: relative;
}
.field select,
.wpcf7-form .wpcf7-form-control-wrap {
    width: 100%;
}
.field--full {
    grid-column: 1 / -1;
}
.cr-gc-gift-toggle__label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
    color: var(--c-text-dim);
    cursor: pointer;
}
.cr-gc-gift-toggle__label input[type="checkbox"] {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--c-gold-400);
    cursor: pointer;
}
.field label {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--c-text-dim);
    letter-spacing: 0.02em;
}
.field input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea {
    /* HTML "size"/"cols" attributes (added by CF7) otherwise set their own intrinsic width */
    width: 100%;
    padding: 0.85rem 1rem;
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--c-text);
    font-family: inherit;
    font-size: 0.95rem;
    transition: border-color var(--t-fast), background var(--t-fast);
}
.field input::placeholder,
.field textarea::placeholder {
    color: var(--c-text-mute);
}
.field input:not([type="submit"]):not([type="button"]):focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--c-gold-400);
    background: rgba(230, 181, 74, 0.04);
}
.field textarea {
    resize: vertical;
    min-height: 140px;
}

/* Native select arrow — replaced with a themed chevron */
.field select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 2.75rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a7afcb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 14px;
}

/* ---------- Custom select dropdown ----------
   Progressive enhancement over <select> (built by assets/js/custom-select.js):
   the real <select> stays in the DOM (so form submission / existing .val()
   code keeps working) but is visually hidden — a themed trigger button +
   listbox replace its native, unstylable popup. */
.cr-select {
    position: relative;
}
.cr-select__native {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}
.cr-select__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--t-fast), background var(--t-fast);
}
.cr-select__label {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.cr-select__trigger::after {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid var(--c-text-mute);
    border-bottom: 1.5px solid var(--c-text-mute);
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--t-fast);
}
.cr-select.is-open .cr-select__trigger::after {
    transform: rotate(225deg) translateY(2px);
}

/* Pill variant — matches the filter bar's original .select select look */
.cr-select--pill .cr-select__trigger {
    padding: 0.85rem 1.1rem;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--c-text);
    font-size: 0.9rem;
}

/* Field variant — matches the form fields' original .field select look */
.cr-select--field .cr-select__trigger {
    padding: 0.85rem 1rem;
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--c-text);
    font-size: 0.95rem;
}
.cr-select.is-open .cr-select__trigger,
.cr-select__trigger:focus-visible {
    outline: none;
    border-color: var(--c-gold-400);
    background: rgba(230, 181, 74, 0.04);
}

.cr-select__menu {
    list-style: none;
    margin: 0;
    padding: 0.4rem;
    position: absolute;
    z-index: 20;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    max-height: 280px;
    overflow-y: auto;
    background: var(--c-ink-800);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--r-md);
    box-shadow: var(--sh-glass);
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity var(--t-fast), transform var(--t-fast);
}
.cr-select.is-open .cr-select__menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.cr-select__option {
    padding: 0.6rem 0.8rem;
    border-radius: var(--r-sm);
    color: var(--c-text-dim);
    font-size: 0.9rem;
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast);
}
.cr-select__option.is-active {
    background: rgba(230, 181, 74, 0.1);
    color: var(--c-gold-300);
}
.cr-select__option.is-selected {
    color: var(--c-gold-300);
    font-weight: 600;
}

/* Native submit-button chrome — strip so .btn styling fully applies */
input[type="submit"],
input[type="button"] {
    font-family: inherit;
    cursor: pointer;
    border: none;
    appearance: none;
    -webkit-appearance: none;
}

/*
 * Contact Form 7 — validation tips, submit spinner, response message.
 * Selectors are boosted to match/exceed the specificity of CF7's own
 * plugin stylesheet (".wpcf7 form .wpcf7-response-output" etc.), which
 * otherwise wins the cascade and silently overrides these rules.
 */
.wpcf7 form.wpcf7-form .wpcf7-not-valid-tip {
    grid-column: 1 / -1;
    color: var(--c-error);
    font-size: 0.82rem;
    margin-top: -0.2rem;
}
.wpcf7 form.wpcf7-form .wpcf7-form-control.wpcf7-not-valid {
    border-color: var(--c-error);
}
.wpcf7 form.wpcf7-form .wpcf7-spinner {
    display: none;
}
.wpcf7 form.wpcf7-form .wpcf7-response-output {
    text-align: center;
    grid-column: 1 / -1;
    margin: 0;
    padding: 1rem 1.2rem;
    border-radius: var(--r-md);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: var(--c-text-dim);
    font-size: 0.92rem;
    box-shadow: var(--sh-glass);
}
.wpcf7 form.wpcf7-form.sent .wpcf7-response-output {
    border-color: rgba(61, 220, 151, 0.4);
    background: rgba(61, 220, 151, 0.08);
    color: var(--c-success);
}
.wpcf7 form.wpcf7-form.failed .wpcf7-response-output,
.wpcf7 form.wpcf7-form.aborted .wpcf7-response-output,
.wpcf7 form.wpcf7-form.payment-required .wpcf7-response-output {
    border-color: rgba(255, 84, 112, 0.4);
    background: rgba(255, 84, 112, 0.08);
    color: var(--c-error);
}
.wpcf7 form.wpcf7-form.spam .wpcf7-response-output,
.wpcf7 form.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7 form.wpcf7-form.unaccepted .wpcf7-response-output {
    border-color: rgba(255, 181, 71, 0.4);
    background: rgba(255, 181, 71, 0.08);
    color: var(--c-warning);
}

/* ----------
   20. Feature card / icon card
   ---------- */
.feature-card {
    padding: var(--sp-3);
    border-radius: var(--r-lg);
    transition: transform var(--t-med) var(--ease-out);
    height: 100%;
}
.feature-card:hover {
    transform: translateY(-6px);
}
.feature-card__icon {
    width: 56px;
    height: 56px;
    border-radius: var(--r-md);
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(230, 181, 74, 0.15), rgba(230, 181, 74, 0.04));
    border: 1px solid rgba(230, 181, 74, 0.25);
    color: var(--c-gold-300);
    margin-bottom: var(--sp-2);
}
.feature-card h4 {
    font-size: 1.25rem;
    margin-bottom: 0.4rem;
}
.feature-card p {
    color: var(--c-text-dim);
    font-size: 0.93rem;
}

/* ----------
   21. CTA band
   ---------- */
.cta-band {
    position: relative;
    border-radius: var(--r-xl);
    overflow: hidden;
    padding: var(--sp-6);
    text-align: center;
    isolation: isolate;
}
.cta-band::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
            radial-gradient(60% 80% at 50% 0%, rgba(230, 181, 74, 0.25), transparent 60%),
            linear-gradient(135deg, var(--c-ink-800), var(--c-ink-900));
    border: 1px solid rgba(230, 181, 74, 0.2);
}
.cta-band h2 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    margin-top: var(--sp-2);
    margin-bottom: var(--sp-2);
}
.cta-band p {
    color: var(--c-text-dim);
    max-width: 52ch;
    margin: 0 auto var(--sp-4);
}

/* ----------
   22. Page hero (interior pages)
   ---------- */
.page-hero {
    padding-top: calc((var(--header-h) + var(--admin-bar-h)) + var(--sp-7));
    padding-bottom: var(--sp-6);
    position: relative;
    overflow: hidden;
}
/* Floating decorative orbs — every hero-style section on the site (front
   page, archives, single posts/jobs, static pages) drops one or two of
   these in the top corners for ambient depth. The old float keyframe moved
   them only 20-30px over a full 12s, which reads as static to the eye —
   by the time a viewer notices anything changed, it's already drifted
   back. Wider travel + a slow breathing scale/opacity makes the motion
   actually perceptible while staying slow and ambient, not distracting. */
.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.5;
    pointer-events: none;
    z-index: -1;
    animation: orbDrift 16s var(--ease-in-out) infinite;
}
.orb--gold {
    background: var(--c-gold-400);
}
.orb--violet {
    background: var(--c-neon-violet);
    /* Runs out of phase with the gold orb it's almost always paired with
       (front-page.php, archive heroes, etc.) — without this every page's
       two orbs breathed in lockstep, which reads as mechanical rather than
       ambient. */
    animation-delay: -8s;
}
@keyframes orbDrift {
    0%   { transform: translate(0, 0) scale(1); opacity: 0.5; }
    25%  { transform: translate(50px, -60px) scale(1.15); opacity: 0.65; }
    50%  { transform: translate(-30px, 30px) scale(0.9); opacity: 0.4; }
    75%  { transform: translate(35px, 45px) scale(1.08); opacity: 0.58; }
    100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
}
/* WooCommerce renders its own breadcrumb (single product, shop) via
   woocommerce_breadcrumb() rather than page.php's markup, with its own
   "color: rgb(118,118,118); font-size:.92em" — same visual treatment as
   .breadcrumb here so it doesn't stand out as a different color/size from
   every other page's breadcrumb. WC's rule is ".woocommerce:where(...)
   .woocommerce-breadcrumb" — the :where() is zero-specificity, but the
   leading ".woocommerce" isn't, giving it (0,2,0)/(0,2,1); match that by
   prefixing with ".woocommerce" and "nav" here too. */
.breadcrumb,
.woocommerce nav.woocommerce-breadcrumb {
    display: flex;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--c-text-mute);
    margin-bottom: var(--sp-3);
}
.woocommerce nav.woocommerce-breadcrumb a {
    color: inherit;
}
.breadcrumb a:hover,
.woocommerce nav.woocommerce-breadcrumb a:hover {
    color: var(--c-gold-300);
}
.breadcrumb span.sep {
    opacity: 0.4;
}
.page-hero h1 {
    font-size: clamp(2.4rem, 6vw, 4.5rem);
    margin-top: var(--sp-2);
    margin-bottom: var(--sp-2);
}
.page-hero p {
    color: var(--c-text-dim);
    max-width: 60ch;
}

/* ----------
   25. Loading animation
   ---------- */
.loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--c-black);
    display: grid;
    place-items: center;
    transition: opacity var(--t-slow) var(--ease-out), visibility var(--t-slow);
}
.loader.is-done {
    opacity: 0;
    visibility: hidden;
}
.loader__lock {
    width: 70px;
    height: 70px;
    border: 2px solid rgba(230, 181, 74, 0.2);
    border-top-color: var(--c-gold-400);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    position: relative;
}
.loader__lock::after {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-bottom-color: var(--c-gold-300);
    animation: spin 1.6s linear infinite reverse;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
.loader__text {
    position: absolute;
    bottom: 30%;
    font-family: var(--font-display);
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--c-gold-300);
    font-size: 0.85rem;
    animation: fadeIn 1s var(--ease-out);
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
}

.rooms-grid-wrap .rooms-grid {
    transition: opacity 0.18s var(--ease-out);
}
.rooms-grid-wrap.is-loading .rooms-grid {
    opacity: 0;
}
.rooms-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--c-text-dim);
    padding: var(--sp-5) 0;
}

/* ----------
   26. Scroll reveal
   ---------- */
[data-reveal] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
    transition-delay: var(--reveal-delay, 0s);
}
[data-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0);
}
[data-reveal="left"] {
    transform: translateX(-40px);
}
[data-reveal="right"] {
    transform: translateX(40px);
}
[data-reveal="left"].is-revealed,
[data-reveal="right"].is-revealed {
    transform: translateX(0);
}
/* On mobile the left/right columns stack, so the horizontal slide-in has no
   layout meaning and its pre-reveal translateX(±40px) pushes the element past
   the viewport edge — body clips it but html doesn't, leaving a few px of
   horizontal scroll. Use the vertical reveal there instead. */
@media (max-width: 768px) {
    [data-reveal="left"],
    [data-reveal="right"] {
        transform: translateY(30px);
    }
    [data-reveal="left"].is-revealed,
    [data-reveal="right"].is-revealed {
        transform: translateY(0);
    }
}

.record-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(4, 5, 10, 0.85) 0%, transparent 55%);
}
.record-card__time {
    position: absolute;
    bottom: var(--sp-2);
    left: var(--sp-2);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-display);
    font-size: 1.6rem;
    color: var(--c-gold-300);
    text-shadow: 0 0 20px rgba(230, 181, 74, 0.5);
}
.record-card__time svg { color: var(--c-gold-400); flex-shrink: 0; }
.record-card__name {
    position: absolute;
    bottom: 2.7rem;
    left: var(--sp-2);
    right: var(--sp-2);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--c-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.record-card__badge {
    position: absolute;
    top: var(--sp-2);
    right: var(--sp-2);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    background: rgba(230, 181, 74, 0.15);
    border: 1px solid rgba(230, 181, 74, 0.4);
    color: var(--c-gold-300);
    padding: 0.2rem 0.6rem;
    border-radius: var(--r-pill);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6), 0 0 16px rgba(230, 181, 74, 0.2);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}
.records-nav,
.reviews-nav {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--c-text-dim);
    display: grid;
    place-items: center;
    transition: all var(--t-fast);
    background: rgba(255, 255, 255, 0.03);
}
.records-nav svg,
.reviews-nav svg {
    width: 18px;
    height: 18px;
}
/* Chevrons are geometrically centered in their viewBox, but an open "V"
   shape optically reads heavier on the open (line-end) side than on the
   pointed vertex — nudge each a hair toward its point to correct for it. */
.records-nav--prev svg,
.reviews-nav--prev svg { transform: translateX(-1px); }
.records-nav--next svg,
.reviews-nav--next svg { transform: translateX(1px); }
.records-nav:hover,
.reviews-nav:hover {
    border-color: var(--c-gold-400);
    color: var(--c-gold-300);
}

/* ----------
   29. Fancybox dark overrides
   ---------- */
.fancybox__container {
    --fancybox-bg: rgba(4, 5, 10, 0.97);
    --fancybox-color: var(--c-text);
    --fancybox-accent-color: var(--c-gold-400);
    font-family: var(--font-body);
}
.fancybox__toolbar {
    background: linear-gradient(to bottom, rgba(4, 5, 10, 0.8), transparent);
}
.fancybox__caption {
    font-size: 0.85rem;
    color: var(--c-text-dim);
    text-align: center;
}
.fancybox__thumb.is-nav-selected::after {
    border-color: var(--c-gold-400);
}

/* ----------
   30. Misc utilities
   ---------- */
.divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
    margin-block: var(--sp-5);
}
.tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.text-center { text-align: center; }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
/* .mb-* was used throughout the theme (single-room.php, single-job.php,
   single-online_game.php, template-faq.php, template-gift-certificates.php)
   but never actually defined — every "mb-2"/"mb-3"/"mb-4" class was a no-op,
   which is why headings like "Intensity profile" or the FAQ category chips
   sat flush against whatever followed them. */
.mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-5 { margin-bottom: var(--sp-5); }
.mb-6 { margin-bottom: var(--sp-6); }
.hide-mobile { }
.hide-desktop { display: none; }

/* ----------
   29. Prose (blog/privacy/terms)
   ---------- */
.prose {
    max-width: 72ch;
}
.prose > * + * {
    margin-top: var(--sp-3);
}
.prose h2 {
    font-size: 1.9rem;
    margin-top: var(--sp-5);
}
.prose h3 {
    font-size: 1.4rem;
    margin-top: var(--sp-4);
}
.prose p,
.prose li {
    color: var(--c-text-dim);
    line-height: 1.8;
}
.prose ul {
    list-style: disc;
    padding-left: 1.4rem;
}
.prose ol {
    list-style: decimal;
    padding-left: 1.4rem;
}
.prose ul li,
.prose ol li {
    margin-top: 0.5rem;
}
.prose a {
    color: var(--c-gold-300);
    text-decoration: underline;
}

.seo-more {
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-lg);
}
.seo-more__summary {
    cursor: pointer;
    list-style: none;
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--c-text);
}
.seo-more__summary::-webkit-details-marker {
    display: none;
}
.seo-more__summary::before {
    content: '+';
    display: inline-block;
    width: 1.2em;
    color: var(--c-gold-300);
}
.seo-more[open] .seo-more__summary::before {
    content: '−';
}
.seo-more__body {
    margin-top: var(--sp-3);
}

/* ----------
   30. Responsive
   ---------- */
@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
    .booking {
        grid-template-columns: 1fr;
    }
    .booking__sidebar {
        position: static;
    }
    /* .stats/.steps/.reviews (home.css), .room-layout/.room-sidebar/
       .gallery (rooms.css), .job-layout/.job-sidebar (careers.css), and
       .blog-grid (blog.css) responsive rules all moved to those files —
       same load-order tie-break issue as .hero__meta below: base.css loads
       first, so a same-specificity override here always lost the cascade
       tie to the later file's unconditional desktop rule, regardless of
       viewport. Grep each file for "Moved from base.css" to find them. */
}

@media (max-width: 768px) {
    .nav,
    .nav__cta .btn:not(.nav-toggle) {
        display: none;
    }
    .nav-toggle {
        display: flex;
    }
    /* Language switcher stays visible in the mobile header row (between
       search and cart, same order as desktop) instead of being hidden —
       shrunk down to fit alongside the icon buttons on narrow screens. */
    .nav__cta .lang-switcher__btn {
        padding: 0.4rem 0.6rem;
        font-size: 0.75rem;
    }
    /* An uploaded logo image is height:44px/width:auto/max-width:220px — on
       narrow screens a wide-aspect logo can eat most of the header row and
       push the search/cart/hamburger icons past the viewport edge. Shrink
       it once .nav (desktop menu) is already hidden and space is tight. */
    .site-header .brand__logo {
        height: 32px;
        max-width: 110px;
    }
    /* .records-wrap/.record-card/.reviews-wrap/.reviews-slider .review
       moved to rooms.css — same load-order issue as .hero__meta below
       (rooms.css defines their unconditional desktop rule, and loads
       after this file). .record-card__time/.records-nav/.reviews-nav stay
       here since base.css also owns their unconditional desktop rule. */
    .record-card__time {
        font-size: 1.9rem;
    }
    .records-nav,
    .reviews-nav {
        width: 44px;
        height: 44px;
        font-size: 1.6rem;
    }
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--sp-4);
    }
    /* .hero/.hero__meta/.hero__stats mobile overrides moved to home.css —
       base.css loads before home.css, so a same-specificity rule here lost
       the cascade tie to home.css's unconditional desktop rule regardless
       of viewport. See home.css for the real overrides. */
    .calendar__table {
        font-size: 0.72rem;
    }
    .calendar__table th,
    .calendar__table td {
        padding: 0.3rem 0.1rem;
    }
    .slot {
        padding: 0.4rem 0.1rem;
        font-size: 0.66rem;
    }
    /* .rooms-grid.is-list .room-card/.product-card (rooms.css), all
       .filter-* and .shop-layout (filter-bar.css), .blog-grid (blog.css),
       .gallery (rooms.css), and .intensity-* (rooms.css) responsive rules
       moved to those files — same load-order issue as .hero__meta below.
       .filter-bar's own desktop `position: relative` was beating this
       block's non-!important `position: fixed`, so the mobile filter
       drawer never actually went full-screen. */
    .section {
        padding-block: 2.5rem;
    }
    .rooms-grid {
        grid-template-columns: 1fr !important;
    }
    .jobs-grid {
        grid-template-columns: 1fr !important;
    }
    .form-grid,
    .wpcf7-form {
        grid-template-columns: 1fr;
    }
    /* Inline-styled two-column layout grids (hero/story/feature splits
       across front-page.php and templates/*.php) always stack on mobile. */
    .grid[style*="grid-template-columns:1fr 1fr"],
    .grid[style*="grid-template-columns: 1fr 1fr"],
    .grid[style*="grid-template-columns:1.2fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    /* Inline-styled three-column card grids go to two on tablet/mobile,
       one on narrow phones (see 480px query below). */
    .grid[style*="repeat(3"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    /* Homepage online-games preview: one full-width card per row on mobile,
       matching the featured-rooms grid (.rooms-grid) right above it, instead
       of two cramped columns. ID + !important to beat the inline
       grid-template-columns on the element. */
    #online-preview {
        grid-template-columns: 1fr !important;
    }
    #corporate .grid > [style*="order:2"] {
        order: -1 !important;
    }
}

@media (max-width: 480px) {
    /* .stats/.steps/.step::after/.reviews responsive rules moved to
       home.css — same load-order tie-break issue as .hero__meta above. */
    .grid[style*="repeat(3"] {
        grid-template-columns: 1fr !important;
    }
}