:root {
    --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --motion-fast: 180ms;
    --motion-standard: 320ms;
    --color-charcoal: #1A1612;
    --color-cool-gray: #6B6458;
    --color-cool-gray-light: #EDE8DF;
    --color-gold: #F0A500;
    --color-gold-dark: #C48400;
    --color-gold-pale: #F7F1E3;
}

html {
    scroll-behavior: smooth;
}

body :is(*, #sentence-case-override) {
    text-transform: none !important;
}

::selection {
    background: var(--color-gold);
    color: var(--color-charcoal);
}

::-webkit-scrollbar-thumb {
    background-color: var(--color-charcoal);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-gold);
}

.header-nav-link:hover,
.header-nav-link.is-active {
    color: var(--color-gold-dark) !important;
}

.header-nav-link::after {
    background-color: var(--color-gold) !important;
}

.topbar-contact-link:hover,
.topbar-social-link:hover {
    color: var(--color-gold) !important;
}

.topbar-contact-link svg {
    color: var(--color-gold) !important;
}

.topbar-social-link:hover {
    border-color: var(--color-gold) !important;
    background-color: rgba(240, 165, 0, 0.12) !important;
}

.mega-menu-column--contact {
    background-color: var(--color-gold-pale) !important;
}

.product-hero-section {
    background-color: var(--color-cool-gray-light) !important;
}

.quote-price-bracket {
    background-color: var(--color-charcoal) !important;
}

.footer-masthead {
    background-color: var(--color-gold-dark) !important;
}

/* Flatten decorative effects — exclude CTAs/buttons so solid/gradient fills keep working */
html body *:not(button):not([type="submit"]):not([type="button"]):not(.clb-quote-card__submit):not(.btn-get-quote):not(.product-cart-button):not(.product-buy-button):not(.header-quote-button):not(.btn-luxury-accent):not(.home-hero__button):not(.bg-brand-accent),
html body *:not(button)::before,
html body *:not(button)::after {
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

html body #hero-banner .home-hero__background {
    background-image: url("../../design/img/hero.jpg") !important;
}

html body #hero-banner .home-hero__background::after {
    background-color: rgba(15, 14, 14, 0.58) !important;
}

.hero-glow-accent,
[class*="hero-glow-accent"] {
    display: none !important;
}

.luxury-topbar .topbar-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 36px;
    width: 100%;
    max-width: 80rem;
    margin-inline: auto;
    text-align: left;
}

.luxury-topbar .topbar-text-wrapper {
    min-width: 0;
    flex: 1 1 auto;
    justify-content: flex-start;
}

.topbar-contact-links {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 16px;
}

.topbar-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(246, 246, 246, 0.88);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    transition: color var(--motion-fast) ease;
}

.topbar-contact-link:hover,
.topbar-social-link:hover {
    color: #FFB82E;
}

.topbar-contact-link svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    color: #FFB82E;
}

.topbar-contact-divider {
    width: 1px;
    height: 16px;
    background: rgba(246, 246, 246, 0.22);
}

.topbar-social-link {
    display: inline-grid;
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    place-items: center;
    border: 1px solid rgba(246, 246, 246, 0.24);
    border-radius: 50%;
    color: rgba(246, 246, 246, 0.88);
    transition: color var(--motion-fast) ease, border-color var(--motion-fast) ease, background-color var(--motion-fast) ease;
}

.topbar-social-link:hover {
    border-color: rgba(240, 165, 0, 0.65);
    background: rgba(240, 165, 0, 0.14);
}

.topbar-social-link svg {
    width: 13px;
    height: 13px;
}

@media (max-width: 760px) {
    .luxury-topbar .topbar-container {
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 12px;
        padding-block: 5px;
    }

    .luxury-topbar .topbar-text-wrapper {
        flex: 1 1 100%;
        justify-content: center;
    }

    .topbar-contact-links {
        flex: 1 1 100%;
        gap: 13px;
        justify-content: center;
    }

    .topbar-contact-link {
        font-size: 11px;
    }

    .topbar-social-link {
        width: 22px;
        height: 22px;
        flex-basis: 22px;
    }
}

.motion-ready [data-motion="reveal"] {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition:
        opacity 560ms var(--motion-ease),
        transform 560ms var(--motion-ease);
    transition-delay: var(--motion-delay, 0ms);
    will-change: opacity, transform;
}

.motion-ready [data-motion="reveal"].is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    will-change: auto;
}

.btn-luxury-primary,
.btn-luxury-secondary,
.btn-luxury-accent,
.home-hero__button,
.single-blog__sidebar-cta,
.single-blog__related > a {
    transition:
        transform var(--motion-standard) var(--motion-ease),
        box-shadow var(--motion-standard) var(--motion-ease),
        background-color var(--motion-standard) ease,
        border-color var(--motion-standard) ease,
        color var(--motion-fast) ease;
}

.btn-luxury-primary:hover,
.btn-luxury-secondary:hover,
.btn-luxury-accent:hover,
.home-hero__button:hover,
.single-blog__sidebar-cta:hover,
.single-blog__related > a:hover {
    transform: translateY(-2px);
}

.btn-luxury-primary:active,
.btn-luxury-secondary:active,
.btn-luxury-accent:active,
.home-hero__button:active {
    transform: translateY(0) scale(0.985);
}

.product-card,
.category-card,
.blog-card,
.portfolio-card,
.drawer-product-card,
.testimonial-card,
.timeline-step-card,
.home-quick-quote__card {
    transition:
        transform var(--motion-standard) var(--motion-ease),
        box-shadow var(--motion-standard) var(--motion-ease),
        border-color var(--motion-standard) ease;
}

.product-card:hover,
.category-card:hover,
.blog-card:hover,
.portfolio-card:hover,
.drawer-product-card:hover,
.testimonial-card:hover,
.timeline-step-card:hover,
.home-quick-quote__card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.09);
}

.header-nav-link,
.mega-menu-product-link,
.mega-menu-view-all,
.mega-menu-social-link,
.header-actions-group .nav-icon-circle,
.header-actions-group .nav-icon-filled {
    transition-timing-function: var(--motion-ease);
}

input,
select,
textarea {
    transition:
        border-color var(--motion-fast) ease,
        box-shadow var(--motion-fast) ease,
        background-color var(--motion-fast) ease;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline-color: #F0A500;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .motion-ready [data-motion="reveal"],
    .motion-ready [data-motion="reveal"].is-visible {
        opacity: 1 !important;
        transform: none !important;
        will-change: auto !important;
    }

    .product-card:hover,
    .category-card:hover,
    .blog-card:hover,
    .portfolio-card:hover,
    .drawer-product-card:hover,
    .testimonial-card:hover,
    .timeline-step-card:hover,
    .home-quick-quote__card:hover,
    .btn-luxury-primary:hover,
    .btn-luxury-secondary:hover,
    .btn-luxury-accent:hover,
    .home-hero__button:hover {
        transform: none !important;
    }
}
