/**
 * WEB.CSS - Unified Hero Styles (shared public website CSS)
 * DJ Prestige Sound - April 2026
 *
 * Hero cinéma 100vh — immersif, luxueux, form intégré
 */

/* ============================================================
   CUSTOM PROPERTIES
   ============================================================ */
:root {
    --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
    --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
    --transition-fast: 0.2s var(--ease-smooth);
    --transition-medium: 0.4s var(--ease-smooth);
    --transition-slow: 0.8s var(--ease-out-expo);
}

/* ============================================================
   SITE HERO — Cinéma 100vh
   ============================================================ */
.site-hero {
    position: relative;
    min-height: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    background: var(--color-bg-primary);
    padding-bottom: 32px;
    /* Clip horizontally to defend against any child (3D-tilt form-wrapper,
       monolith flow with inset:-10%, hero canvas) escaping the viewport.
       Safari's overflow-x:hidden on body alone doesn't always reach into
       a transformed/perspective subtree, so we clip at the hero boundary. */
    overflow-x: clip;
}

/* Form-only hero (home page): no title/logo/icon → tighter footprint so
   the concierge bar feels anchored, not floating in empty space. */
.site-hero:not(:has(.site-hero__content)) {
    min-height: 280px;
    /* Top padding clears the fixed navbar (--navbar-height: 70px) so the
       form never disappears beneath it — visible on Safari especially. */
    padding-top: calc(var(--navbar-height, 70px) + 24px);
    padding-bottom: 20px;
    justify-content: center;
}
.site-hero:not(:has(.site-hero__content)) .site-hero__form-wrapper {
    margin-top: 0;
}

/* Confine background visual layers to the hero box even though hero
   itself stays overflow:visible for dropdowns. */
.hero__slideshow,
.hero__monolith,
.hero__video-bg,
#hero-particles,
.site-hero::before,
.site-hero::after {
    overflow: hidden;
}

/* Vignette cinéma — assombrit les bords, lumière au centre */
.site-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: radial-gradient(ellipse 80% 70% at 50% 40%, transparent 30%, rgba(0,0,0,0.6) 100%);
}

/* Grain film argentique ultra-subtil */
.site-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 300px 300px;
    mix-blend-mode: overlay;
}

/* Compact — pages intérieures */
.site-hero--compact {
    height: 65vh;
    min-height: 420px;
}

/* ============================================================
   HERO SLIDESHOW
   ============================================================ */
.hero__slideshow {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* Transparent canvas — gold particles over slideshow */
#hero-particles {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.hero__slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.06);
    filter: brightness(0.4);
    transition: opacity 1.8s var(--ease-out-expo), transform 9s linear;
    will-change: opacity, transform;
}

.hero__slide.active {
    opacity: 1;
    transform: scale(1);
}

/* ============================================================
   HERO SCROLL PARALLAX (CSS-only)
   Replaces the GSAP `scrub: true` ScrollTriggers from immersive.js.
   Modern browsers (Chrome/Edge/Opera 115+) animate this entirely
   on the compositor — zero JS scroll work. Safari/Firefox simply
   skip the rule and the hero stays put on scroll, which is fine.
   ============================================================ */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        #hero-particles {
            animation: hero-canvas-parallax linear both;
            animation-timeline: view();
            animation-range: exit 0% exit 100%;
            will-change: transform, opacity;
        }
        .site-hero__content {
            animation: hero-content-parallax linear both;
            animation-timeline: view();
            animation-range: exit 0% exit 100%;
            will-change: transform, opacity;
        }
    }
}

@keyframes hero-canvas-parallax {
    to { transform: translateY(200px) scale(1.2); opacity: 0.2; }
}

@keyframes hero-content-parallax {
    to { transform: translateY(-100px); opacity: 0; }
}

.hero__slide-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ============================================================
   HERO ANIMATED BG — Liquid Monolith
   100% CSS + SVG, seamless infinite loop, GPU-friendly.
   - Layer 1 (.hero__monolith-flow): drifting violet radial gradients
   - Layer 2 (.hero__monolith-mark) : breathing logo (SVG used as mask
     so the colour can be driven from CSS, not from the SVG's fill)
   Keyframes are self-symmetric (0% ≡ 100%) → no loop seam.
   ============================================================ */
.hero__monolith {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.hero__monolith-flow {
    position: absolute;
    inset: -10%;
    background:
        radial-gradient(ellipse 65% 45% at 25% 30%,
            rgba(139, 92, 246, 0.45) 0%, rgba(139, 92, 246, 0.18) 40%, transparent 70%),
        radial-gradient(ellipse 75% 55% at 75% 70%,
            rgba(167, 139, 250, 0.38) 0%, rgba(167, 139, 250, 0.15) 45%, transparent 75%),
        radial-gradient(ellipse 50% 40% at 50% 50%,
            rgba(196, 181, 253, 0.22) 0%, transparent 75%),
        radial-gradient(ellipse 80% 60% at 15% 85%,
            rgba(124, 58, 237, 0.30) 0%, transparent 70%),
        radial-gradient(ellipse 70% 50% at 90% 15%,
            rgba(168, 85, 247, 0.25) 0%, transparent 70%);
    animation: monolith-flow 32s ease-in-out infinite;
    will-change: transform;
}

/* @property pour animations CSS sur custom values (Chrome/Safari/FF 128+) */
@property --sweep-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@property --engrave {
    syntax: '<number>';
    initial-value: 0;
    inherits: false;
}

.hero__monolith-mark {
    position: absolute;
    top: 36%;
    left: 50%;
    width: clamp(150px, 26vmin, 300px);
    height: clamp(150px, 26vmin, 300px);
    transform: translate(-50%, -50%);
    background-image: var(--logo-src);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 1;
    /* GRAVURE VIVANTE — micro drop-shadow respirant, donne l'impression de métal gravé */
    filter: drop-shadow(0 0 calc(2px + var(--engrave) * 5px) rgba(255, 246, 217, calc(0.25 + var(--engrave) * 0.25)));
    animation: monolith-engrave 9s ease-in-out infinite;
}

/* Mobile : hero plus compact, logo plus haut et plus petit */
@media (max-width: 540px) {
    .site-hero {
        min-height: 0;
        padding-top: 170px;
        padding-bottom: 12px;
    }
    /* Form-only hero on mobile: no logo → tight padding above navbar */
    .site-hero:not(:has(.site-hero__content)) {
        padding-top: calc(var(--navbar-height, 60px) + 20px);
        padding-bottom: 16px;
    }
    .hero__monolith-mark {
        top: 100px;
        width: clamp(120px, 32vmin, 150px);
        height: clamp(120px, 32vmin, 150px);
        transform: translate(-50%, 0);
    }
    .site-hero__form-wrapper {
        margin-top: 0;
        /* Neutralise le tilt 3D inline (perspective + transform) qui casse
           position:fixed des panels enfants (panel invités). */
        perspective: none !important;
        transform: none !important;
    }
}

/* SILLON MAGNÉTIQUE — conic-gradient masqué par le SVG, balaye le logo
   comme une aiguille de tourne-disque. Le mask coupe le reflet pour qu'il
   n'apparaisse QUE sur les pixels du logo. */
.hero__monolith-mark::after {
    content: '';
    position: absolute;
    inset: 0;
    background: conic-gradient(
        from var(--sweep-angle),
        transparent 0deg,
        transparent 300deg,
        rgba(255, 248, 220, 0.55) 335deg,
        rgba(255, 230, 170, 0.85) 350deg,
        rgba(255, 248, 220, 0.55) 360deg,
        transparent 360deg
    );
    -webkit-mask-image: var(--logo-src);
            mask-image: var(--logo-src);
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    mix-blend-mode: screen;
    pointer-events: none;
    animation: monolith-sweep 7s linear infinite;
}

@keyframes monolith-engrave {
    0%, 100% { --engrave: 0; }
    50%      { --engrave: 1; }
}

@keyframes monolith-sweep {
    to { --sweep-angle: 360deg; }
}

@keyframes monolith-flow {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    33% {
        transform: translate3d(2%, -1.5%, 0) scale(1.02);
    }
    66% {
        transform: translate3d(-2%, 1%, 0) scale(1.025);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero__monolith-flow,
    .hero__monolith-mark,
    .hero__monolith-mark::after {
        animation: none;
    }
    .hero__monolith-mark { --engrave: 0.4; }
}

/* Video background (YouTube embed, fills hero) */
.hero__video-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.hero__video-bg iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 180%;
    height: 180%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    border: 0;
}

/* ============================================================
   HERO OVERLAY — Dégradé bas renforcé
   ============================================================ */
.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(
            180deg,
            rgba(10, 10, 10, 0.20) 0%,
            rgba(10, 10, 10, 0.40) 40%,
            rgba(10, 10, 10, 0.70) 70%,
            rgba(10, 10, 10, 0.90) 100%
        );
}

/* ============================================================
   HERO CONTENT — Zone centrale
   ============================================================ */
.site-hero__content {
    position: relative;
    z-index: 5;
    max-width: 960px;
    width: 100%;
    padding: 0 clamp(24px, 5vw, 60px);
    padding-top: clamp(80px, 12vh, 120px);
    margin-bottom: auto;
    animation: heroContentIn 1.2s var(--ease-out-expo) both;
}

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

/* ============================================================
   HERO LOGO
   ============================================================ */
.site-hero__logo {
    width: 72px;
    height: 72px;
    margin: 0 auto 24px;
}

.site-hero__logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid rgba(201, 169, 98, 0.4);
    box-shadow: 0 0 40px rgba(201, 169, 98, 0.2);
}

/* ============================================================
   HERO ICON
   ============================================================ */
.site-hero__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    margin: 0 auto 28px;
    background: rgba(201, 169, 98, 0.1);
    border: 1px solid rgba(201, 169, 98, 0.3);
    border-radius: 50%;
    backdrop-filter: blur(8px);
}

.site-hero__icon i {
    font-size: 26px;
    color: var(--color-gold);
}

/* ============================================================
   HERO TITLE — Cinéma XXL
   ============================================================ */
.site-hero__title {
    font-family: var(--font-display);
    font-size: clamp(44px, 7vw, 80px);
    font-weight: 300;
    letter-spacing: 3px;
    line-height: 1.0;
    margin: 0 0 16px;
    background: linear-gradient(
        135deg,
        #ffffff    0%,
        rgba(255,255,255,0.92) 40%,
        var(--color-gold)      65%,
        var(--color-gold-light) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================================
   HERO SUBTITLE
   ============================================================ */
.site-hero__subtitle {
    font-family: var(--font-body);
    font-size: clamp(15px, 1.8vw, 20px);
    font-weight: 300;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.70);
    max-width: 560px;
    margin: 0 auto;
    letter-spacing: 0.3px;
}

/* ============================================================
   HERO FORM WRAPPER — centré verticalement quand pas de titre
   ============================================================ */
.site-hero__form-wrapper {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 100%;
    /* Padding aligned with .catalog-results__container so the hero form
       and the catalogue beneath it share the same horizontal rhythm. */
    padding: 0 clamp(24px, 5vw, 80px);
    margin-top: auto;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    animation: heroFormIn 1.4s var(--ease-out-expo) 0.3s both;
}

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

/* ============================================================
   HERO SCROLL INDICATOR
   ============================================================ */
.hero__scroll {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.hero__scroll span {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
}

.hero__scroll-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(180deg, var(--color-gold), transparent);
    animation: scrollLine 2s ease-in-out infinite;
}

@keyframes scrollLine {
    0%, 100% { opacity: 0.3; transform: scaleY(0.6); }
    50%       { opacity: 1;   transform: scaleY(1); }
}

/* ============================================================
   HERO FORM SELECT — Native fallback styling (all pages)
   ============================================================ */
.hero-form__select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
    border: none;
    outline: none;
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: 16px;
    width: 100%;
    cursor: pointer;
    padding: 0;
}

.hero-form__select option {
    background: #0e0e10;
    color: var(--color-text-primary);
    padding: 10px;
}

/* Location input fallback */
#hero-location-container input,
.hero-form__field--location input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
    border: none;
    outline: none;
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: 16px;
    width: 100%;
    padding: 0;
}

#hero-location-container input::placeholder,
.hero-form__field--location input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

/* Tom Select overrides for location (all pages) */
#hero-location-container .ts-wrapper {
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-height: 0 !important;
}

#hero-location-container .ts-control {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    color: var(--color-text-primary) !important;
    font-size: 16px !important;
    font-family: inherit !important;
    cursor: text !important;
}

#hero-location-container .ts-control input {
    color: var(--color-text-primary) !important;
    font-size: 16px !important;
}

#hero-location-container .ts-dropdown {
    background: #0E0E10 !important;
    border: 1px solid rgba(201, 169, 98, 0.35) !important;
    border-radius: 12px !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.7) !important;
}

#hero-location-container .ts-dropdown .option {
    color: rgba(255, 255, 255, 0.7) !important;
    padding: 10px 14px !important;
}

#hero-location-container .ts-dropdown .option:hover,
#hero-location-container .ts-dropdown .option.active {
    background: rgba(201, 169, 98, 0.1) !important;
    color: var(--color-text-primary) !important;
}

/* ============================================================
   GEOAPIFY AUTOCOMPLETE — Global dark, solid background
   Rendered inside the field container (see home.js)
   ============================================================ */
.geoapify-autocomplete-input {
    background: none !important;
    border: none !important;
    color: var(--color-text-primary) !important;
    font-size: 16px !important;
    font-family: inherit !important;
    padding: 0 !important;
    height: auto !important;
    box-shadow: none !important;
    outline: none !important;
}

.geoapify-autocomplete-input::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

.geoapify-close-button { display: none !important; }

.geoapify-autocomplete-items {
    padding: 6px !important;
    background: #0E0E10 !important;
    border: 1px solid rgba(201, 169, 98, 0.35) !important;
    border-radius: 16px !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6), 0 2px 10px rgba(201, 169, 98, 0.18) !important;
    overflow: hidden !important;
}

.geoapify-autocomplete-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    background: transparent !important;
    border-radius: 10px !important;
    color: #f5f2e9 !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
}

.geoapify-autocomplete-item + .geoapify-autocomplete-item { margin-top: 1px !important; }

.geoapify-autocomplete-item .icon {
    width: 20px !important; height: 20px !important; flex: 0 0 20px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    color: var(--color-gold) !important; opacity: 0.7 !important;
}

.geoapify-autocomplete-item .icon svg { width: 16px !important; height: 16px !important; }

.geoapify-autocomplete-item .address {
    flex: 1 !important; line-height: 1.5 !important;
    color: rgba(255, 255, 255, 0.6) !important; font-size: 13px !important;
}

.geoapify-autocomplete-item b,
.geoapify-autocomplete-item strong { color: var(--color-gold) !important; font-weight: 600 !important; }

.geoapify-autocomplete-item:hover {
    background: rgba(201, 169, 98, 0.16) !important;
    box-shadow: inset 0 0 0 1px rgba(201, 169, 98, 0.45) !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .site-hero {
        height: auto;
        min-height: 0;
    }

    .site-hero--compact {
        height: 65vh;
        min-height: 380px;
    }

    .site-hero__content {
        margin-bottom: clamp(200px, 32vh, 260px);
    }

    .site-hero__title {
        font-size: clamp(40px, 11vw, 64px);
        letter-spacing: 2px;
    }

    .site-hero__subtitle {
        font-size: 14px;
    }

    .hero__scroll {
        display: none;
    }
}

@media (max-width: 480px) {
    .site-hero__title {
        font-size: clamp(34px, 12vw, 48px);
        letter-spacing: 1px;
    }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .hero__slide {
        transition: opacity 0.3s ease;
        transform: none !important;
    }
    .hero__scroll-line { animation: none; }
    .site-hero__content,
    .site-hero__form-wrapper { animation: none; }
}

/* ============================================================
   CLAUDE DESIGN — Utilitaires globaux (avril 2026)
   Importés depuis le bundle Anthropic Labs.
   Préfixe .cd-* pour ne pas entrer en conflit avec l'existant
   (.btn, .container, .section-title du repo restent intacts).
   ============================================================ */

/* Hairline ornament (— TEXT •) */
.cd-ornament {
    display: inline-flex; align-items: center; gap: 14px;
    color: var(--color-gold);
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
.cd-ornament .line { width: 36px; height: 1px; background: var(--color-gold-line); }
.cd-ornament .dot  { width: 4px; height: 4px; background: var(--color-gold); border-radius: 50%; }

/* Eyebrow uppercase doré au-dessus des titres */
.cd-eyebrow {
    font-family: var(--font-body);
    font-size: var(--fs-eyebrow);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-gold);
}

/* Section heading style Claude Design */
.cd-section-title {
    font-family: var(--font-display);
    font-size: var(--fs-h1);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 12px 0 14px;
}
.cd-section-title em { font-style: italic; color: var(--color-gold-light); font-weight: 500; }

.cd-section-lead {
    color: var(--color-fg-2);
    font-size: 18px;
    font-weight: 300;
    max-width: 56ch;
    line-height: 1.6;
}

.cd-head--center { text-align: center; margin: 0 auto 8px; max-width: 720px; }
.cd-head--center .cd-ornament { justify-content: center; display: inline-flex; }
.cd-head--center .cd-section-lead { margin-left: auto; margin-right: auto; }

/* Buttons Claude Design — utilisables hors page-entreprise */
.cd-btn {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.04em;
    padding: 14px 28px;
    border-radius: 2px;
    border: 1px solid transparent;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 10px;
    transition: all 0.25s var(--ease-out);
    text-decoration: none;
}
.cd-btn--gold { background: var(--color-gold); color: #0a0a0a; }
.cd-btn--gold:hover {
    background: var(--color-gold-light);
    box-shadow: var(--shadow-gold-glow-cd);
}
.cd-btn--gold:active { background: var(--color-gold-dark); }

.cd-btn--ghost {
    background: transparent;
    color: var(--color-gold);
    border-color: var(--color-gold-line);
}
.cd-btn--ghost:hover {
    background: rgba(201, 169, 98, 0.08);
    border-color: var(--color-gold);
    color: var(--color-gold-light);
}

/* Card Claude Design */
.cd-card {
    background: var(--color-bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card-cd);
    box-shadow: var(--shadow-card-cd);
    padding: 2.5rem 2rem;
    transition: border-color 0.25s var(--ease-out);
}
.cd-card:hover { border-color: var(--color-gold-line); }
@media (max-width: 720px) {
    .cd-card { padding: 2rem 1.5rem; border-radius: var(--radius-card-cd-mobile); }
}

/* Container alternatif (narrow) */
.cd-container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 clamp(1.25rem, 3vw, 2rem); }
.cd-container--narrow { max-width: var(--container-narrow); }

/* Tags / pills */
.cd-tag {
    font-family: var(--font-body);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    padding: 7px 14px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--color-fg-2);
    cursor: pointer;
    transition: all 0.2s var(--ease-out);
}
.cd-tag:hover, .cd-tag.is-active {
    color: var(--color-gold);
    border-color: var(--color-gold-line);
    background: rgba(201, 169, 98, 0.06);
}