/*
Theme Name:     Light Gallery — Kadence Child
Theme URI:      https://lightgallery.example.com
Description:    Premium decorative lighting showroom child theme for Kadence. Built for Light Gallery, Nagpur. Editorial, luxury interior-design brand feel with GSAP + Three.js interactions and WooCommerce running in catalog/enquiry mode (no cart, no payments).
Author:         Light Gallery
Author URI:     https://instagram.com/lightgalleryngp
Template:       kadence
Version:        1.0.0
Text Domain:    light-gallery
Tags:           luxury, catalog, woocommerce, lighting, editorial
*/

/* ==========================================================================
   Light Gallery — Design Tokens
   ========================================================================== */
:root {
    --lg-bg-ivory:        #F7F1E6;
    --lg-panel-cream:     #FBF7EF;
    --lg-espresso:        #241812;
    --lg-espresso-2:      #2F2018;
    --lg-gold:            #B8905A;
    --lg-gold-glow:       #E4C68A;
    --lg-text:            #2C2620;
    --lg-text-muted:      #8A7C6C;
    --lg-hairline:        rgba(184, 144, 90, 0.35);

    --lg-font-serif:  "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --lg-font-sans:   "Jost", "Helvetica Neue", Arial, sans-serif;
    --lg-font-script: "Mrs Saint Delafield", "Great Vibes", cursive;

    --lg-container: 1280px;
}

/* ==========================================================================
   Base / Overrides on Kadence
   ========================================================================== */
html { scroll-behavior: smooth; }

body.light-gallery,
body {
    background: var(--lg-bg-ivory);
    color: var(--lg-text);
    font-family: var(--lg-font-sans);
    font-weight: 300;
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--lg-font-serif);
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--lg-espresso);
    line-height: 1.15;
}

h1 { font-size: clamp(2.4rem, 5.2vw, 4.4rem); font-weight: 400; }
h2 { font-size: clamp(1.9rem, 3.8vw, 3rem);   font-weight: 400; }
h3 { font-size: clamp(1.35rem, 2vw, 1.7rem);  font-weight: 500; }

a { color: var(--lg-espresso); text-decoration: none; transition: color .3s ease; }
a:hover { color: var(--lg-gold); }

.lg-container {
    max-width: var(--lg-container);
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}

.lg-eyebrow {
    font-family: var(--lg-font-sans);
    font-size: 0.72rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--lg-gold);
    font-weight: 400;
}

.lg-script {
    font-family: var(--lg-font-script);
    font-weight: 400;
    color: var(--lg-gold-glow);
    letter-spacing: 0.01em;
}

.lg-hairline { border: 0; height: 1px; background: var(--lg-hairline); margin: 0; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.lg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: 0.95rem 1.9rem;
    font-family: var(--lg-font-sans);
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 400;
    border-radius: 0;
    transition: transform .3s ease, background .3s ease, color .3s ease, border-color .3s ease;
    cursor: pointer;
    border: 1px solid transparent;
}
.lg-btn--primary { background: var(--lg-gold); color: #fff; }
.lg-btn--primary:hover { background: var(--lg-espresso); color: var(--lg-gold-glow); transform: translateY(-1px); }
.lg-btn--ghost   { background: transparent; color: var(--lg-espresso); border-color: var(--lg-espresso); }
.lg-btn--ghost:hover { background: var(--lg-espresso); color: #fff; }
.lg-btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.lg-btn--ghost-light:hover { background: var(--lg-gold); border-color: var(--lg-gold); color: #fff; }

/* ==========================================================================
   Nav
   ========================================================================== */
.lg-nav {
    position: sticky; top: 0; z-index: 60;
    background: rgba(247, 241, 230, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: box-shadow .3s ease, background .3s ease;
    border-bottom: 1px solid transparent;
}
.lg-nav.is-scrolled {
    box-shadow: 0 12px 40px -20px rgba(36, 24, 18, 0.25);
    border-bottom-color: var(--lg-hairline);
}
.lg-nav__inner {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.1rem 0;
    gap: 2rem;
}
.lg-logo { font-family: var(--lg-font-script); font-size: 2.15rem; color: var(--lg-espresso); line-height: 1; }
.lg-logo em { font-style: normal; color: var(--lg-gold); }
.lg-nav__links { display: flex; align-items: center; gap: 2.1rem; list-style: none; margin: 0; padding: 0; }
.lg-nav__links a {
    font-family: var(--lg-font-sans);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--lg-text);
    position: relative;
}
.lg-nav__links a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
    height: 1px; background: var(--lg-gold); transform: scaleX(0);
    transform-origin: left; transition: transform .35s ease;
}
.lg-nav__links a:hover::after { transform: scaleX(1); }
.lg-nav__toggle { display: none; background: none; border: 0; cursor: pointer; font-size: 1.4rem; color: var(--lg-espresso); }

@media (max-width: 900px) {
    .lg-nav__links { display: none; }
    .lg-nav__toggle { display: block; }
    .lg-nav.is-open .lg-nav__links {
        display: flex; flex-direction: column; align-items: flex-start;
        position: absolute; top: 100%; left: 0; right: 0;
        background: var(--lg-panel-cream); padding: 1.5rem 1.5rem 2rem;
        border-top: 1px solid var(--lg-hairline);
    }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.lg-hero {
    position: relative;
    background: var(--lg-espresso);
    color: #F5E9D3;
    overflow: hidden;
    padding: clamp(4rem, 9vw, 7rem) 0 clamp(4rem, 9vw, 6rem);
}
.lg-hero__grid {
    display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center;
    position: relative; z-index: 2;
}
.lg-hero__eyebrow { color: var(--lg-gold-glow); opacity: .9; }
.lg-hero h1 { color: #F5E9D3; margin: 1.4rem 0 1.4rem; }
.lg-hero h1 em { font-style: italic; color: var(--lg-gold-glow); font-family: var(--lg-font-serif); }
.lg-hero p.lg-hero__sub { font-size: 1.08rem; color: rgba(245, 233, 211, .78); max-width: 42ch; margin-bottom: 2.2rem; }
.lg-hero__cta { display: flex; gap: 1rem; flex-wrap: wrap; }
.lg-hero__img {
    position: relative; aspect-ratio: 4/5; overflow: hidden;
    box-shadow: 0 40px 80px -30px rgba(0,0,0,.6);
}
.lg-hero__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lg-hero__particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .55; }
@media (max-width: 820px) {
    .lg-hero__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Sections
   ========================================================================== */
.lg-section { padding: clamp(4rem, 8vw, 7rem) 0; }
.lg-section--dark { background: var(--lg-espresso); color: #EFE1C7; }
.lg-section--dark h2, .lg-section--dark h3 { color: #F5E9D3; }
.lg-section--cream { background: var(--lg-panel-cream); }

.lg-section__head { max-width: 780px; margin: 0 auto clamp(2.5rem, 5vw, 4rem); text-align: center; }
.lg-section__head--left { margin-left: 0; text-align: left; }
.lg-section__sub { color: var(--lg-text-muted); margin-top: 1rem; font-size: 1.05rem; }
.lg-section--dark .lg-section__sub { color: rgba(239, 225, 199, .72); }

/* Categories */
.lg-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--lg-hairline); border: 1px solid var(--lg-hairline); }
.lg-cats a {
    background: var(--lg-panel-cream);
    padding: 2.5rem 1.5rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
    text-align: center; transition: background .35s ease, transform .35s ease;
    min-height: 220px;
}
.lg-cats a:hover { background: #fff; transform: translateY(-2px); }
.lg-cats svg { width: 44px; height: 44px; stroke: var(--lg-gold); stroke-width: 1.2; fill: none; }
.lg-cats span { font-family: var(--lg-font-serif); font-size: 1.15rem; color: var(--lg-espresso); }
@media (max-width: 900px) { .lg-cats { grid-template-columns: repeat(2, 1fr); } }

/* Signature */
.lg-signature { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.lg-signature__gallery { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 1.5rem; }
.lg-signature__gallery .lg-photo:nth-child(1) { grid-row: span 2; aspect-ratio: 3/5; }
.lg-signature__gallery .lg-photo:nth-child(2) { aspect-ratio: 4/3; }
.lg-signature__gallery .lg-photo:nth-child(3) { aspect-ratio: 4/3; }
.lg-photo { position: relative; overflow: hidden; }
.lg-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s ease; }
.lg-photo:hover img { transform: scale(1.04); }
.lg-photo__cap {
    position: absolute; left: 1.2rem; bottom: 1.2rem; right: 1.2rem;
    background: rgba(36,24,18,.72); color: #F5E9D3; padding: .8rem 1rem;
    backdrop-filter: blur(6px);
}
.lg-photo__cap b { font-family: var(--lg-font-serif); font-weight: 500; display: block; font-size: 1.05rem; }
.lg-photo__cap span { font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--lg-gold-glow); }

.lg-3d {
    background: linear-gradient(180deg, #1A100C 0%, #2B1D14 100%);
    padding: 2rem; min-height: 480px; position: relative; overflow: hidden;
}
.lg-3d__label { position: absolute; top: 1.2rem; left: 1.2rem; z-index: 3; }
.lg-3d__label small { color: rgba(239, 225, 199, .55); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; }
.lg-3d__label b { display: block; color: #F5E9D3; font-family: var(--lg-font-serif); font-size: 1.15rem; margin-top: .3rem; }
.lg-3d canvas { display: block; width: 100% !important; height: 100% !important; }
.lg-3d__hint { position: absolute; bottom: 1rem; left: 0; right: 0; text-align: center; color: rgba(239, 225, 199, .5); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; }
@media (max-width: 900px) { .lg-signature { grid-template-columns: 1fr; } .lg-3d { min-height: 420px; } }

/* Stories */
.lg-stories { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.lg-story { background: transparent; }
.lg-story__img { aspect-ratio: 4/5; overflow: hidden; margin-bottom: 1.3rem; }
.lg-story__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease; }
.lg-story:hover .lg-story__img img { transform: scale(1.05); }
.lg-story h3 { color: #F5E9D3; margin-bottom: .6rem; }
.lg-story p { color: rgba(239, 225, 199, .72); font-size: .95rem; }
@media (max-width: 900px) { .lg-stories { grid-template-columns: 1fr; } }

/* Spaces */
.lg-spaces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.lg-space { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.lg-space img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease; }
.lg-space:hover img { transform: scale(1.06); }
.lg-space span {
    position: absolute; left: 1.2rem; bottom: 1.2rem; color: #fff;
    font-family: var(--lg-font-serif); font-size: 1.4rem;
    text-shadow: 0 2px 20px rgba(0,0,0,.6);
}
@media (max-width: 900px) { .lg-spaces { grid-template-columns: repeat(2, 1fr); } }

/* Why */
.lg-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem 3rem; }
.lg-why__item svg { width: 34px; height: 34px; stroke: var(--lg-gold); stroke-width: 1.2; fill: none; margin-bottom: 1rem; }
.lg-why__item h3 { margin-bottom: .5rem; }
.lg-why__item p { color: var(--lg-text-muted); font-size: .95rem; }
@media (max-width: 900px) { .lg-why { grid-template-columns: 1fr; } }

/* Final CTA */
.lg-final { background: var(--lg-espresso); color: #F5E9D3; padding: clamp(4rem, 8vw, 6rem) 0; text-align: center; }
.lg-final h2 { color: #F5E9D3; max-width: 780px; margin: 0 auto 1.2rem; }
.lg-final h2 em { font-style: italic; color: var(--lg-gold-glow); }
.lg-final__meta { color: rgba(239, 225, 199, .72); margin: .5rem 0 2rem; }
.lg-final__cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* Footer */
.lg-footer { background: #1B120E; color: rgba(239, 225, 199, .7); padding: 4rem 0 2rem; }
.lg-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 3rem; }
.lg-footer h4 { color: #F5E9D3; font-family: var(--lg-font-serif); font-weight: 500; margin-bottom: 1rem; font-size: 1.1rem; }
.lg-footer ul { list-style: none; padding: 0; margin: 0; }
.lg-footer ul li { margin-bottom: .5rem; }
.lg-footer a { color: rgba(239, 225, 199, .7); font-size: .9rem; }
.lg-footer a:hover { color: var(--lg-gold-glow); }
.lg-footer__bottom { border-top: 1px solid rgba(184, 144, 90, .2); padding-top: 1.5rem; text-align: center; font-size: .8rem; color: rgba(239, 225, 199, .45); }
@media (max-width: 900px) { .lg-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .lg-footer__grid { grid-template-columns: 1fr; } }

/* Floating WhatsApp */
.lg-wa {
    position: fixed; bottom: 24px; right: 24px; z-index: 90;
    width: 58px; height: 58px; border-radius: 50%;
    background: #25D366; color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 12px 30px -6px rgba(37, 211, 102, .55);
    transition: transform .3s ease;
}
.lg-wa:hover { transform: scale(1.08); color: #fff; }
.lg-wa svg { width: 30px; height: 30px; fill: #fff; }

/* ==========================================================================
   WooCommerce catalog-mode overrides (no prices, no add-to-cart)
   ========================================================================== */
.woocommerce .price,
.woocommerce-page .price,
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce .add_to_cart_button,
.woocommerce .single_add_to_cart_button,
.woocommerce-cart-form,
.woocommerce-mini-cart,
.cart-contents,
.woocommerce-product-rating { display: none !important; }

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--lg-font-serif) !important;
    color: var(--lg-espresso) !important;
    font-size: 1.15rem !important;
}
.woocommerce ul.products li.product a img { transition: transform 1s ease; }
.woocommerce ul.products li.product:hover a img { transform: scale(1.04); }

/* Enquire button injected by functions.php */
.lg-enquire {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .8rem 1.4rem;
    background: var(--lg-espresso); color: #F5E9D3 !important;
    font-family: var(--lg-font-sans); font-size: .75rem;
    letter-spacing: .22em; text-transform: uppercase;
    margin-top: 1rem; transition: background .3s ease;
}
.lg-enquire:hover { background: var(--lg-gold); }
.lg-enquire--wa { background: #25D366; }
.lg-enquire--wa:hover { background: #128C7E; }

/* Product single */
.lg-product-detail { padding: 3rem 0; }
.lg-product-detail .lg-container { display: grid; grid-template-columns: 1.2fr 1fr; gap: 4rem; }
.lg-product-detail h1 { margin-bottom: .5rem; }
.lg-product-detail .lg-cat-badge { color: var(--lg-gold); letter-spacing: .22em; text-transform: uppercase; font-size: .72rem; }
.lg-specs { width: 100%; margin: 2rem 0; border-collapse: collapse; }
.lg-specs td { padding: .8rem 0; border-bottom: 1px solid var(--lg-hairline); font-size: .95rem; }
.lg-specs td:first-child { color: var(--lg-text-muted); width: 40%; }
@media (max-width: 900px) { .lg-product-detail .lg-container { grid-template-columns: 1fr; gap: 2rem; } }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .lg-hero__particles, .lg-3d canvas { opacity: 0 !important; }
}