/* =========================================================
   Nirav Electronic — custom styles
   Light-first theme with dedicated dark sections + dark footer.
   Supplements Tailwind CDN. No inline / internal CSS elsewhere.
   ========================================================= */

:root {
    --gold: #9a6f2e;
    --sand: #c6a15b;
    --ink: #201d22;
    --page: #f7f5ef;
    --night: #141017;
    --line: rgba(0, 0, 0, 0.10);
}

html { -webkit-text-size-adjust: 100%; }
html, body { max-width: 100%; overflow-x: hidden; background: var(--page); color: var(--ink); }
#smooth-wrapper, #smooth-content, main, section { overflow-x: clip; }
*, *::before, *::after { min-width: 0; }

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

img { max-width: 100%; height: auto; }
iframe { max-width: 100%; }

/* ---------- Header ---------- */
.site-header .nav-shell { background: transparent; }
.site-header.is-stuck .nav-shell {
    background: rgba(247, 245, 239, 0.9);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 34px -22px rgba(0, 0, 0, 0.4);
}
.site-header.is-stuck #header-inner { height: 3.75rem; }
@media (min-width: 1024px) { .site-header.is-stuck #header-inner { height: 4.25rem; } }

/* announcement bar collapses once scrolled */
.announce { max-height: 2.25rem; opacity: 1; }
.site-header.is-stuck .announce { max-height: 0; opacity: 0; }

.site-header.is-hidden { transform: translateY(-100%); }

/* ---------- Nav link underline ---------- */
.nav-link { position: relative; }
.nav-link::after {
    content: "";
    position: absolute;
    left: 0; bottom: -6px;
    width: 100%; height: 1px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .35s ease;
}
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- Decorative ---------- */
.text-gradient-gold {
    background: linear-gradient(120deg, #b98a3e 0%, #9a6f2e 45%, #6f4f20 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.text-gradient-sand {
    background: linear-gradient(120deg, #e8d3a4 0%, #c6a15b 50%, #9a7434 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

.hairline { height: 1px; background: linear-gradient(90deg, transparent, rgba(154,111,46,.5), transparent); }
.hairline-dark { height: 1px; background: linear-gradient(90deg, transparent, rgba(198,161,91,.45), transparent); }

.grain, .grain-dark { position: relative; }
.grain::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(rgba(0,0,0,.035) 1px, transparent 1px);
    background-size: 5px 5px;
}
.grain-dark::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 5px 5px;
}

/* dark section base */
.section-dark {
    background:
        radial-gradient(80% 60% at 15% 0%, rgba(198,161,91,.10), transparent 60%),
        radial-gradient(70% 60% at 100% 100%, rgba(198,161,91,.07), transparent 55%),
        var(--night);
    color: #efe9dd;
}

/* eyebrow label */
.eyebrow {
    display: inline-flex; align-items: center; gap: .55rem;
    font-size: .7rem; letter-spacing: .3em; text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 1.75rem; height: 1px; background: currentColor; opacity: .6; }

/* ---------- Cards ---------- */
.product-card { transition: transform .4s cubic-bezier(.22,1,.36,1), border-color .4s, box-shadow .4s; }
.product-card:hover {
    transform: translateY(-6px);
    border-color: rgba(154,111,46,.45);
    box-shadow: 0 26px 50px -28px rgba(60,45,20,.35);
}
.product-media {
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(198,161,91,.16), transparent 60%),
        linear-gradient(160deg, #f4efe4, #ece5d6);
}
.product-media-dark {
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(198,161,91,.18), transparent 60%),
        linear-gradient(160deg, #241f2a, #17131c);
}

.lift { transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s; }
.lift:hover { transform: translateY(-4px); }

/* image fallback placeholder (if an image fails to load) */
.img-fallback {
    display: grid; place-items: center; width: 100%; height: 100%;
    color: rgba(154,111,46,.45);
    background: linear-gradient(160deg, #f4efe4, #e7dfce);
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(2rem, 6vw, 3rem); letter-spacing: .1em;
}
.section-dark .img-fallback,
.product-media-dark .img-fallback {
    color: rgba(198,161,91,.4);
    background: linear-gradient(160deg, #241f2a, #17131c);
}

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; }
.marquee__track { display: flex; gap: 4rem; width: max-content; animation: marquee 30s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Forms ---------- */
.field {
    width: 100%; background: #fff; border: 1px solid var(--line);
    border-radius: .6rem; padding: .85rem 1rem; color: var(--ink);
    font-size: .95rem; transition: border-color .25s, box-shadow .25s;
}
.field:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(154,111,46,.15); }
.field::placeholder { color: rgba(32,29,34,.38); }
select.field { appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239a6f2e' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem;
}

/* ---------- Legal prose ---------- */
.prose-legal h2 { font-family: "Cormorant Garamond", serif; font-size: 1.6rem; color: var(--ink); margin: 2.2rem 0 .8rem; }
.prose-legal h3 { font-weight: 600; color: var(--ink); margin: 1.4rem 0 .5rem; }
.prose-legal p, .prose-legal li { color: rgba(32,29,34,.72); line-height: 1.75; margin-bottom: .8rem; }
.prose-legal ul { list-style: disc; padding-left: 1.4rem; margin-bottom: 1rem; }
.prose-legal a { color: var(--gold); text-decoration: underline; }
.prose-legal strong { color: var(--ink); }

/* ---------- Responsive ---------- */
@media (max-width: 640px) { .marquee__track { gap: 2.5rem; } }

@media (prefers-reduced-motion: reduce) {
    .marquee__track { animation: none; }
    * { scroll-behavior: auto !important; transition: none !important; }
}