/* ETTIS_SITE_MODERN: refinement layer on top of website.css. Remove its <link> to revert. */

/* ---------- Base ---------- */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--site-header-h, 4.5rem) + 14px); }
body.site-body { overflow-x: clip; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
::selection { background: var(--site-gold); color: #0b0b0b; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
    outline: 2px solid var(--site-gold) !important; outline-offset: 3px; border-radius: 6px;
}

@media (hover: hover) and (min-width: 900px) {
    html { scrollbar-color: var(--site-gold-dark) var(--site-bg); scrollbar-width: thin; }
    ::-webkit-scrollbar { width: 10px; }
    ::-webkit-scrollbar-track { background: var(--site-bg); }
    ::-webkit-scrollbar-thumb { background: linear-gradient(var(--site-gold), var(--site-gold-dark)); border-radius: 10px; border: 2px solid var(--site-bg); }
}

/* ---------- Glass header on scroll ---------- */
.site-header { transition: background-color .35s ease, box-shadow .35s ease, backdrop-filter .35s ease; }
body.sm-scrolled .site-header {
    background-color: rgba(12, 14, 20, .78) !important;
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    box-shadow: 0 12px 32px -20px rgba(0, 0, 0, .9), inset 0 -1px 0 var(--site-border-gold);
}

/* ---------- Scroll progress + back to top ---------- */
.sm-progress {
    position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 10001;
    background: var(--site-gradient-gold); transform-origin: 0 50%; transform: scaleX(0);
    box-shadow: 0 0 12px var(--site-gold-glow); pointer-events: none;
}
.sm-top {
    position: fixed; left: 16px; bottom: 16px; z-index: 9996;
    width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--site-border-gold);
    background: rgba(20, 24, 32, .85); color: var(--site-gold);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    display: grid; place-items: center; font-size: 1.15rem; cursor: pointer;
    box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .8);
    opacity: 0; transform: translateY(12px); pointer-events: none;
    transition: opacity .3s ease, transform .3s ease, background-color .2s ease, bottom .3s ease;
}
.sm-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.sm-top:hover { background: var(--site-gold); color: #0b0b0b; }
body:has(.es-basket-bar.is-on) .sm-top,
body:has(.es-go-checkout:not(.is-hidden)) .sm-top { bottom: 84px; }

/* ---------- Section labels ---------- */
.site-section__label {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .32rem .85rem; border-radius: 999px;
    border: 1px solid var(--site-border-gold);
    background: linear-gradient(135deg, rgba(212,168,75,.14), rgba(212,168,75,.04));
    letter-spacing: .12em;
}
.site-section__label::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: var(--site-gold); box-shadow: 0 0 10px var(--site-gold-glow);
}
.site-section__head h2 { letter-spacing: -.01em; }

/* ---------- Card depth on hover (keeps existing reveal animation) ---------- */
.site-feature, .site-plan, .site-quote, .site-step, .site-stat, .site-contact__detail {
    transition: opacity .7s ease, transform .7s ease, translate .3s ease, border-color .3s ease, box-shadow .3s ease, background-color .3s ease;
}
@media (hover: hover) {
    .site-feature:hover, .site-plan:hover, .site-quote:hover, .site-step:hover, .site-stat:hover {
        translate: 0 -5px;
        border-color: var(--site-border-gold) !important;
        box-shadow: var(--site-shadow), 0 0 0 1px rgba(212,168,75,.18), 0 18px 40px -18px var(--site-gold-glow);
    }
    .site-feature:hover .site-feature__icon { transform: scale(1.08) rotate(-4deg); }
}
.site-feature__icon { transition: transform .35s cubic-bezier(.3,1.5,.5,1); }

/* ---------- Primary button shine ---------- */
.site-btn { transition: translate .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease; }
.site-btn--primary { position: relative; overflow: hidden; isolation: isolate; }
.site-btn--primary::after {
    content: ''; position: absolute; inset: 0 auto 0 0; width: 40%; z-index: -1;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
    transform: translateX(-130%) skewX(-20deg); pointer-events: none;
}
@media (hover: hover) {
    .site-btn:hover { translate: 0 -2px; }
    .site-btn--primary:hover::after { transition: transform .8s ease; transform: translateX(320%) skewX(-20deg); }
    .site-btn--primary:hover { box-shadow: 0 14px 30px -12px var(--site-gold-glow) !important; }
}
.site-btn:active { translate: 0 0; }

/* ---------- Forms ---------- */
.site-form input, .site-form select, .site-form textarea {
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.site-form input:focus, .site-form select:focus, .site-form textarea:focus {
    border-color: var(--site-gold) !important;
    box-shadow: 0 0 0 4px rgba(212,168,75,.16) !important;
    outline: none !important;
}

/* ---------- Mobile comfort ---------- */
@media (max-width: 900px) {
    .site-nav__link, .site-nav__cta { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ---------- Bring earlier shop additions into the gold theme ---------- */
.site-nav__badge { background: var(--site-gradient-gold) !important; color: #0b0b0b !important; }
.es-teaser__eyebrow { color: var(--site-gold) !important; }
.es-teaser__all { background: var(--site-gradient-gold) !important; color: #0b0b0b !important; }
.es-teaser__all:hover { color: #0b0b0b !important; box-shadow: 0 12px 26px -12px var(--site-gold-glow) !important; }
.es-teaser__card { background: var(--site-surface) !important; border-color: var(--site-border) !important; }
.es-teaser__card:hover { border-color: var(--site-border-gold) !important; box-shadow: 0 18px 40px -18px var(--site-gold-glow) !important; }
.es-teaser__price, .es-teaser__empty a { color: var(--site-gold) !important; }
.es-teaser__head h2 { font-family: var(--font-display); }
.es-crumb { background: var(--site-bg-elevated) !important; border-bottom-color: var(--site-border) !important; }
.es-crumb__home { color: var(--site-gold) !important; }
.es-add-toast { background: var(--site-bg-elevated) !important; border: 1px solid var(--site-border-gold); }
.es-add-toast__go { background: var(--site-gradient-gold) !important; color: #0b0b0b !important; }
.es-basket-bar, .es-go-checkout { background: var(--site-bg-elevated) !important; border: 1px solid var(--site-border-gold); }
.es-go-checkout span:last-child { color: var(--site-gold) !important; }

/* ---------- Respect "reduce motion" ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .site-feature:hover, .site-plan:hover, .site-quote:hover, .site-step:hover, .site-stat:hover, .site-btn:hover { translate: none; }
    .site-btn--primary::after, .sm-progress { display: none; }
    .sm-top, .site-feature__icon { transition: none; }
}