/*
Theme Name: Navgrah
Theme URI: https://navgrah.co
Author: Innovo Fintech Solutions Pvt Ltd
Description: Custom Navgrah WordPress and WooCommerce theme.
Version: 0.1.0
Text Domain: navgrah
*/

/* =========================================================
01. THEME VARIABLES
========================================================= */

:root {
--navgrah-bg: #faf9f5;
--navgrah-paper: #ffffff;
--navgrah-ink: #26232b;
--navgrah-muted: #756f79;
--navgrah-line: #e4dfe8;
--navgrah-soft: #f1edf4;
--navgrah-dark: #26232b;

/* Buttons */
--navgrah-button-purple: #241238;
--navgrah-button-purple-dark: #241238;

/* CTA */
--navgrah-cta-orange: #d98218;	
	
/* Dedicated footer color — change this value to retheme only the footer. */
--navgrah-footer: #241238;

--navgrah-accent: #d4af37;
--navgrah-accent-dark: #b58f24;

/* Central brand palette — change these values to retheme the site. */
--navgrah-primary: #d98218;
--navgrah-primary-dark: #b96712;
--navgrah-primary-soft: #e6a044;

/* Buttons use the former royal-purple brand color in this variant. */
--navgrah-button-purple-dark: #10182b;
--navgrah-gold: #d4af37;
--navgrah-gold-dark: #b58f24;

--navgrah-cta-orange-shadow: rgba(190, 115, 25, 0.22);

--navgrah-container: 1400px;

--navgrah-radius-sm: 10px;
--navgrah-radius-md: 18px;
--navgrah-radius-lg: 30px;

--navgrah-transition: 0.25s ease;

}

/* =========================================================
02. RESET / GLOBAL
========================================================= */

*,
*::before,
*::after {
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
}

body {
margin: 0;
padding: 0;

background: var(--navgrah-bg);
color: var(--navgrah-ink);

font-family:
    Arial,
    Helvetica,
    sans-serif;

line-height: 1.6;

overflow-x: hidden;

}

body.menu-open,
body.search-open {
overflow: hidden;
}

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

a {
color: inherit;
text-decoration: none;
}

button,
input,
textarea,
select {
font: inherit;
}

button {
cursor: pointer;
}

main {
display: block;
}

/* =========================================================
03. GLOBAL LAYOUT
========================================================= */

.container {
width: min(
calc(100% - 80px),
var(--navgrah-container)
);

margin-left: auto;
margin-right: auto;

}

.eyebrow {
margin: 0 0 14px;

font-size: 11px;
font-weight: 600;

letter-spacing: 0.18em;
text-transform: uppercase;

color: var(--navgrah-accent);

}

.section-title {
    margin: 0;

    font-size: clamp(
        30px,
        3.75vw,
        60px
    );

    font-weight: 300;

    line-height: 1;

    letter-spacing: -0.045em;
}

/* =========================================================
04. HEADER
========================================================= */

.site-header {
position: relative;

width: 100%;

background: var(--navgrah-bg);

border-bottom:
    1px solid
    var(--navgrah-line);

z-index: 1000;

}

.header-inner {
min-height: 92px;

display: grid;

grid-template-columns:
    1fr
    auto
    1fr;

align-items: center;

column-gap: 35px;

}

/* =========================================================
05. BRAND
========================================================= */

.brand {
justify-self: start;
}

.brand-link {
display: inline-flex;

align-items: center;

color: var(--navgrah-dark);

}

.brand-name {
display: block;

font-size: 26px;
font-weight: 700;

line-height: 1;

letter-spacing: -0.6px;

color: var(--navgrah-gold);

}

/* =========================================================
06. DESKTOP NAVIGATION
========================================================= */

.primary-nav {
justify-self: center;
}

.primary-nav .nav-list {
margin: 0;
padding: 0;

display: flex;

align-items: center;

justify-content: center;

gap: 34px;

list-style: none;

}

.primary-nav .nav-list li {
margin: 0;
padding: 0;

list-style: none;

}

.primary-nav .nav-list a {
position: relative;

display: inline-flex;

align-items: center;

padding: 6px 0;

font-size: 18px;
font-weight: 500;

line-height: 1;

color: var(--navgrah-gold);

white-space: nowrap;

transition:
    color var(--navgrah-transition);

}

.primary-nav .nav-list a::after {
content: "";

position: absolute;

left: 0;
bottom: -5px;

width: 0;
height: 1px;

background: var(--navgrah-dark);

transition:
    width var(--navgrah-transition);

}

.primary-nav .nav-list a {
color: var(--navgrah-gold) !important;
}

.primary-nav .nav-list a:hover::after {
width: 100%;
}

/* =========================================================
07. HEADER ACTIONS
========================================================= */

.header-actions {
justify-self: end;

display: flex;

align-items: center;

gap: 20px;

}

.header-cart,
.search-toggle,
.menu-toggle {
position: relative;

display: inline-flex;

align-items: center;
justify-content: center;

width: 26px;
height: 26px;

margin: 0;
padding: 0;

border: 0;

background: transparent;

color: var(--navgrah-dark);

cursor: pointer;

transition:
    opacity var(--navgrah-transition),
    transform var(--navgrah-transition);

}

.header-cart,
.search-toggle,
.menu-toggle {
opacity: 0.65;
}

.header-cart,
.search-toggle,
.menu-toggle {
transform: scale(0.94);
}

.header-action-icon {
display: block;

width: 20px;
height: 20px;

}

/* CART COUNT */

.cart-total {
position: absolute;

top: -7px;
right: -9px;

min-width: 16px;
height: 16px;

padding: 0 4px;

display: flex;

align-items: center;
justify-content: center;

border-radius: 50%;

background: var(--navgrah-dark);
color: #ffffff;

font-size: 9px;
font-weight: 600;

line-height: 1;

}

/* =========================================================
08. MOBILE MENU BUTTON
========================================================= */

.menu-toggle {
display: none;

flex-direction: column;

gap: 5px;

}

.menu-toggle span {
display: block;

width: 20px;
height: 1.5px;

background: var(--navgrah-dark);

transition:
    transform var(--navgrah-transition),
    opacity var(--navgrah-transition);

}

/* =========================================================
09. MOBILE NAVIGATION
========================================================= */

.mobile-navigation {
display: none;

width: 100%;

background: var(--navgrah-bg);

border-bottom:
    1px solid
    var(--navgrah-line);

z-index: 999;

}

.mobile-navigation.is-active,
.mobile-navigation.is-open {
display: block;
}

.mobile-navigation .container {
padding-top: 24px;
padding-bottom: 24px;
}

.mobile-nav-list {
margin: 0;
padding: 0;

list-style: none;

}

.mobile-nav-list li {
margin: 0 0 18px;
padding: 0;

list-style: none;

}

.mobile-nav-list li {
margin-bottom: 0;
}

.mobile-nav-list a {
display: block;

font-size: 18px;
font-weight: 500;

color: var(--navgrah-dark);

}

/* =========================================================
10. SEARCH OVERLAY
========================================================= */

.search-overlay {
position: fixed;

inset: 0;

display: none;

align-items: center;
justify-content: center;

padding: 30px;

background:
    rgba(
        245,
        244,
        240,
        0.98
    );

z-index: 9999;

}

.search-overlay.is-active,
.search-overlay.is-open {
display: flex;
}

.search-overlay-inner {
position: relative;

width: min(
    100%,
    720px
);

}

.search-close {
position: absolute;

top: -55px;
right: 0;

width: 36px;
height: 36px;

margin: 0;
padding: 0;

border: 0;

background: transparent;

color: var(--navgrah-dark);

font-size: 34px;
font-weight: 300;

line-height: 1;

}

.navgrah-search-form {
display: flex;

gap: 10px;

}

.navgrah-search-form input[type="search"] {
flex: 1;

min-width: 0;

height: 58px;

padding:
    0
    20px;

border:
    1px solid
    #bfc0c3;

border-radius: 0;

background: #ffffff;

color: var(--navgrah-dark);

outline: none;

}

.navgrah-search-form input[type="search"] {
border-color:
var(--navgrah-dark);
}

.navgrah-search-form button {
min-height: 58px;

padding:
    0
    28px;

border:
    1px solid
    var(--navgrah-dark);

background:
    var(--navgrah-primary);

color: #ffffff;

transition:
    background var(--navgrah-transition),
    color var(--navgrah-transition);

}

.navgrah-search-form button {
background: transparent;

color: var(--navgrah-dark);

}



/* =========================================================
12. INSTAGRAM / FOOTER OVERLAPPING GALLERY
========================================================= */

/*
 * The gallery belongs to front-page.php.
 *
 * footer.php must NOT contain another gallery.
 *
 * Desktop:
 *   - five square Instagram images
 *   - centered within the page
 *   - gallery overlaps the top portion of the footer
 *
 * Mobile:
 *   - five images remain in a single horizontal strip
 *   - section remains stable without affecting the footer layout
 */


/* ---------------------------------------------------------
   GALLERY SECTION
--------------------------------------------------------- */

.footer-gallery-section {
    position: relative;

    width: 100%;

    margin: 0;

    padding: 52px 0 0;

    background: transparent;

    z-index: 20;

    isolation: isolate;
}


/* ---------------------------------------------------------
   TORN PAPER TOP EDGE
--------------------------------------------------------- */

.site-footer::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 72px;

    background-image:
        url("assets/images/torn-edges/torn-top.svg");

    background-repeat: no-repeat;

    background-position: center;

    background-size: 100% 100%;

    z-index: 1;

    pointer-events: none;
}


/* ---------------------------------------------------------
   GALLERY CONTAINER
--------------------------------------------------------- */

.footer-gallery-container {
    position: relative;

    width:
        min(
            calc(100% - 80px),
            1400px
        );

    margin: 0 auto;

    z-index: 21;
}


/* ---------------------------------------------------------
   IMAGE GRID
--------------------------------------------------------- */

.footer-gallery-grid {
    position: relative;

    display: grid;

    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );

    width: 100%;

    margin: 0;

    padding: 0;

    gap: 0;

    overflow: visible;

    z-index: 22;
}


/* ---------------------------------------------------------
   INDIVIDUAL IMAGE
--------------------------------------------------------- */

.footer-gallery-item {
    position: relative;

    display: block;

    width: 100%;

    aspect-ratio: 1 / 1;

    overflow: hidden;

    background: #ded9d2;

    text-decoration: none;

    z-index: 1;
}


/* ---------------------------------------------------------
   IMAGE
--------------------------------------------------------- */

.footer-gallery-item img {
    display: block;

    width: 100%;
    height: 100%;

    max-width: none;

    object-fit: cover;

    object-position: center;

    transition:
        transform 0.45s ease,
        filter 0.35s ease;
}


/* ---------------------------------------------------------
   IMAGE HOVER
--------------------------------------------------------- */

.footer-gallery-item:hover img {
    transform: scale(1.045);

    filter: brightness(0.94);
}


/* ---------------------------------------------------------
   CENTER INSTAGRAM OVERLAY
--------------------------------------------------------- */

.footer-gallery-instagram {
    z-index: 5;
}


.footer-gallery-instagram-overlay {
    position: absolute;

    top: 50%;
    left: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 74px;
    height: 74px;

    transform:
        translate(
            -50%,
            -50%
        );

    color: #ffffff;

    pointer-events: none;

    z-index: 10;

    filter:
        drop-shadow(
            0
            3px
            7px
            rgba(
                0,
                0,
                0,
                0.28
            )
        );

    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}


.footer-gallery-instagram-overlay svg {
    display: block;

    width: 54px;
    height: 54px;
}


/* ---------------------------------------------------------
   INSTAGRAM HOVER
--------------------------------------------------------- */

.footer-gallery-instagram:hover
.footer-gallery-instagram-overlay {
    transform:
        translate(
            -50%,
            -50%
        )
        scale(1.08);

    opacity: 0.92;
}


/* =========================================================
   FOOTER OVERLAP
========================================================= */

/*
 * The gallery is intentionally pulled upward into the
 * footer. The footer remains the dark background underneath.
 */

.footer-gallery-section + .site-footer {
    position: relative;

    z-index: 10;

    margin-top: -110px;

    padding-top: 170px;
}


/* =========================================================
   DESKTOP FOOTER SAFETY
========================================================= */

@media screen and (min-width: 1001px) {

    .footer-gallery-container {
        width:
            min(
                calc(100% - 80px),
                1400px
            );
    }

    .footer-gallery-grid {
        grid-template-columns:
            repeat(
                5,
                minmax(0, 1fr)
            );
    }

}


/* =========================================================
   TABLET
========================================================= */

@media screen and (max-width: 1000px) {

    .footer-gallery-section {
        padding-top: 44px;
    }


    .footer-gallery-section::before {
        height: 60px;
    }


    .footer-gallery-container {
        width:
            min(
                calc(100% - 50px),
                850px
            );
    }


    .footer-gallery-grid {
        grid-template-columns:
            repeat(
                5,
                minmax(0, 1fr)
            );
    }


    .footer-gallery-section + .site-footer {
        margin-top: -90px;

        padding-top: 145px;
    }


    .footer-gallery-instagram-overlay {
        width: 64px;
        height: 64px;
    }


    .footer-gallery-instagram-overlay svg {
        width: 48px;
        height: 48px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media screen and (max-width: 700px) {

    .footer-gallery-section {
        padding-top: 30px;
    }


    .footer-gallery-section::before {
        height: 42px;
    }


    .footer-gallery-container {
        width: 100%;
    }


    .footer-gallery-grid {
        width: 100%;

        grid-template-columns:
            repeat(
                5,
                minmax(0, 1fr)
            );

        gap: 0;
    }


    .footer-gallery-item {
        aspect-ratio: 1 / 1;
    }


    .footer-gallery-section + .site-footer {
        margin-top: -65px;

        padding-top: 110px;
    }


    .footer-gallery-instagram-overlay {
        width: 58px;
        height: 58px;
    }


    .footer-gallery-instagram-overlay svg {
        width: 42px;
        height: 42px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media screen and (max-width: 480px) {

    .footer-gallery-section {
        padding-top: 25px;
    }


    .footer-gallery-section::before {
        height: 34px;
    }


    .footer-gallery-section + .site-footer {
        margin-top: -55px;

        padding-top: 95px;
    }


    .footer-gallery-instagram-overlay {
        width: 52px;
        height: 52px;
    }


    .footer-gallery-instagram-overlay svg {
        width: 38px;
        height: 38px;
    }

}


/* =========================================================
   FOOTER FOUNDATION
========================================================= */



.site-footer {
    position: relative;

    padding:
        190px
        0
        35px;

    background:
        #241238;

    color:
        #ffffff;
}


/* Footer links inherit the footer colour */

.site-footer a {
    color:
        inherit;

    text-decoration:
        none;
}


.site-footer > .container,
.site-footer > .footer-container,
.site-footer .container {
    position: relative;

    width:
        min(
            calc(100% - 80px),
            1400px
        );

    margin-left: auto;
    margin-right: auto;

    z-index: 1;
}


/* =========================================================
   FOOTER GRID
========================================================= */

.footer-grid {
    display: grid;

    grid-template-columns:
        1.5fr
        1fr
        1fr
        1fr;

    gap:
        50px;

    padding-bottom:
        60px;
}


/* =========================================================
   FOOTER TYPOGRAPHY
========================================================= */

.site-footer h2,
.site-footer h3,
.site-footer h4 {
    margin-top:
        0;

    color:
        #ffffff;

    font-weight:
        500;
}


.site-footer p {
    color:
        rgba(
            255,
            255,
            255,
            0.62
        );
}


/* =========================================================
   FOOTER LOGO
========================================================= */

.footer-logo-link {
    display:
        inline-block;
}


.footer-logo-mark {
    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-start;

    margin-bottom:
        24px;
}


.footer-logo-image {
    display:
        block;

    width:
        165px;

    height:
        165px;

    max-width:
        165px;

    max-height:
        165px;

    object-fit:
        contain;
}


/* =========================================================
   FOOTER DESCRIPTION
========================================================= */

.footer-description {
    max-width:
        360px;

    margin:
        0 0 25px;

    font-size:
        14px;

    line-height:
        1.75;
}


/* =========================================================
   SOCIAL ICONS
========================================================= */

.footer-socials {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}


.footer-social {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        36px;

    height:
        36px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.18
        );

    border-radius:
        50%;

    color:
        rgba(
            255,
            255,
            255,
            0.75
        ) !important;

    transition:
        color 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease;
}


.footer-social:hover {
    color:
        #ffffff !important;

    background:
        rgba(
            255,
            255,
            255,
            0.08
        );

    border-color:
        rgba(
            255,
            255,
            255,
            0.35
        );
}


.footer-social svg {
    display:
        block;
}


/* =========================================================
   FOOTER HEADINGS
========================================================= */

.footer-heading {
    margin:
        0 0 24px;

    color:
        #ffffff !important;

    font-size:
        13px;

    font-weight:
        700 !important;

    line-height:
        1.2;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;
}


/* =========================================================
   FOOTER MENUS
========================================================= */

.footer-menu,
.site-footer ul {
    margin:
        0;

    padding:
        0;

    list-style:
        none;
}


.site-footer li {
    margin:
        0 0 12px;

    padding:
        0;

    list-style:
        none;
}


.site-footer li:last-child {
    margin-bottom:
        0;
}


.site-footer li a {
    display:
        inline-block;

    color:
        rgba(
            255,
            255,
            255,
            0.65
        ) !important;

    font-size:
        14px;

    line-height:
        1.5;

    transition:
        color 0.25s ease,
        opacity 0.25s ease;
}


.site-footer li a:hover {
    color:
        #ffffff !important;

    opacity:
        1;
}


/* =========================================================
   CONTACT
========================================================= */

.footer-contact-description {
    max-width:
        300px;

    margin:
        0 0 22px;

    font-size:
        14px;

    line-height:
        1.7;
}


.footer-contact-item {
    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        14px;

    color:
        rgba(
            255,
            255,
            255,
            0.68
        ) !important;

    font-size:
        14px;

    line-height:
        1.5;
}


.footer-contact-item:hover {
    color:
        #ffffff !important;
}


.footer-contact-icon {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 20px;

    width:
        20px;

    height:
        20px;

    color:
        var(--navgrah-accent);
}


.footer-contact-icon svg {
    display:
        block;
}


/* =========================================================
   FOOTER BOTTOM
========================================================= */

.footer-bottom {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    padding-top:
        25px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.15
        );

    color:
        rgba(
            255,
            255,
            255,
            0.5
        );

    font-size:
        12px;
}


.footer-copyright {
    color:
        rgba(
            255,
            255,
            255,
            0.5
        );

    line-height:
        1.5;
}


/* =========================================================
   PAYMENT METHODS
========================================================= */

.footer-payments {
    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    flex-wrap:
        wrap;

    gap:
        8px;
}


.payment-badge {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        48px;

    height:
        28px;

    padding:
        0 9px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.15
        );

    border-radius:
        4px;

    color:
        rgba(
            255,
            255,
            255,
            0.68
        );

    background:
        rgba(
            255,
            255,
            255,
            0.035
        );

    font-size:
        9px;

    font-weight:
        600;

    letter-spacing:
        0.03em;
}


/* =========================================================
   DECORATIVE FOOTER ELEMENTS
========================================================= */

.footer-decoration {
    position:
        absolute;

    pointer-events:
        none;

    z-index:
        0;
}


.site-footer .container {
    position:
        relative;

    z-index:
        1;
}


@media screen and (max-width: 1000px) {

    .site-footer > .container,
    .site-footer > .footer-container,
    .site-footer .container {
        width:
            min(
                calc(100% - 50px),
                850px
            );
    }

}


/* =========================================================
   MOBILE FOOTER
========================================================= */

@media screen and (max-width: 1100px) {

    .footer-grid {
        grid-template-columns:
            1.5fr
            1fr
            1fr;

        gap:
            40px;
    }

}


@media screen and (max-width: 800px) {

    .site-footer {
        padding:
            140px
            0
            30px;
    }


    .footer-grid {
        grid-template-columns:
            1fr
            1fr;

        gap:
            45px
            30px;
    }


    .footer-about {
        grid-column:
            1 / -1;
    }


    .footer-bottom {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            20px;
    }


    .footer-payments {
        justify-content:
            flex-start;
    }

}


@media screen and (max-width: 600px) {

    .site-footer {
        padding:
            120px
            0
            28px;
    }


    .footer-grid {
        grid-template-columns:
            1fr;

        gap:
            38px;
    }


    .footer-about {
        grid-column:
            auto;
    }


    .footer-logo-image {
        width:
            130px;

        height:
            130px;

        max-width:
            130px;

        max-height:
            130px;
    }


    .footer-description {
        max-width:
            100%;
    }


    .footer-bottom {
        gap:
            18px;
    }


    .footer-payments {
        width:
            100%;

        justify-content:
            flex-start;
    }

}

/* =========================================================
19. WOOCOMMERCE GENERAL
========================================================= */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
border-radius: 0;

background:
    var(--navgrah-primary);

color: #ffffff;

font-weight: 500;

transition:
    background var(--navgrah-transition),
    color var(--navgrah-transition);

}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
background:
var(--navgrah-accent);

color: #ffffff;

}

.woocommerce ul.products {
margin: 0;

padding: 0;

list-style: none;

}

.woocommerce ul.products li.product {
margin: 0;

list-style: none;

}

.woocommerce ul.products li.product a img {
margin-bottom: 18px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
padding: 0;

font-size: 18px;

font-weight: 500;

}

.woocommerce span.onsale {
min-width: auto;
min-height: auto;

padding:
    6px 10px;

border-radius: 0;

background:
    var(--navgrah-primary);

font-size: 10px;

}

/* =========================================================
20. GLOBAL MOBILE / TABLET BEHAVIOUR
========================================================= */

/*
 * style.css controls only global UI:
 * header, navigation, search, mobile dock and footer.
 *
 * Homepage sections and their responsive layouts belong to main.css.
 */

@media screen and (max-width: 900px) {

    .container {
        width: min(
            calc(100% - 40px),
            var(--navgrah-container)
        );
    }

    /* Mobile/tablet header: brand + search only. */
    .header-inner {
        min-height: 72px;

        grid-template-columns:
            minmax(0, 1fr)
            auto;

        column-gap: 16px;
    }

    .primary-nav {
        display: none;
    }

    .menu-toggle {
        display: none;
    }

    .mobile-navigation,
    .mobile-navigation.is-active,
    .mobile-navigation.is-open {
        display: none;
    }

    .header-actions {
        gap: 12px;
    }

    .header-cart {
        display: none;
    }

    .search-toggle {
        display: inline-flex;
    }

}


/* =========================================================
21. MOBILE / TABLET BOTTOM DOCK
========================================================= */

.navgrah-mobile-dock {
    display: none;
}

@media screen and (max-width: 1000px) {

    /*
     * Fixed to the viewport.
     * No scroll-hide animation, transform or visibility toggle.
     */
    html body .navgrah-mobile-dock {
        position: fixed;

        top: auto;
        right: 0;
        bottom: 0;
        left: 0;

        z-index: 10000;

        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: stretch;

        width: 100%;
        min-width: 0;
        max-width: none;
        min-height: 68px;

        margin: 0;
        padding:
            7px
            10px
            calc(7px + env(safe-area-inset-bottom, 0px));

        box-sizing: border-box;

        background: rgba(255, 255, 255, 0.98);
        border-top: 1px solid var(--navgrah-line);
        box-shadow: 0 -8px 28px rgba(16, 24, 43, 0.10);

        visibility: visible;
        opacity: 1;
        transform: none;

        isolation: isolate;
    }

    .navgrah-dock-item {
        position: relative;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        width: 100%;
        min-width: 0;
        min-height: 54px;

        margin: 0;
        padding: 5px 2px;

        gap: 4px;

        box-sizing: border-box;

        color: var(--navgrah-muted);
        font-size: 9px;
        font-weight: 600;
        line-height: 1.1;
        text-align: center;
        text-decoration: none;

        -webkit-tap-highlight-color: transparent;
    }

    .navgrah-dock-item > i,
    .navgrah-dock-item .navgrah-dock-icon-wrap > i {
        display: block;
        flex: 0 0 auto;

        font-size: 18px;
        line-height: 1;
    }

    .navgrah-dock-item > span:last-child {
        display: block;

        width: 100%;
        max-width: 100%;
        min-width: 0;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .navgrah-dock-item.is-active {
        color: var(--navgrah-primary);
    }

    .navgrah-dock-item.is-active::before {
        content: "";

        position: absolute;
        top: 0;
        left: 50%;

        width: 24px;
        height: 3px;

        border-radius: 999px;

        background: var(--navgrah-primary);

        transform: translateX(-50%);
    }

    .navgrah-dock-icon-wrap {
        position: relative;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        width: auto;
        min-width: 0;

        line-height: 1;
    }

    .navgrah-dock-cart-count {
        position: absolute;
        top: -9px;
        right: -12px;

        display: flex;
        align-items: center;
        justify-content: center;

        min-width: 16px;
        width: auto;
        height: 16px;

        margin: 0;
        padding: 0 4px;

        border: 0;
        border-radius: 999px;

        background: var(--navgrah-primary);
        color: #ffffff;

        font-size: 8px;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
    }

    /* Keep document content clear of the fixed dock. */
    body:has(.navgrah-mobile-dock) {
        padding-bottom: 76px;
    }

}


/* =========================================================
22. SMALL MOBILE
========================================================= */

@media screen and (max-width: 600px) {

    .container {
        width: min(
            calc(100% - 30px),
            var(--navgrah-container)
        );
    }

    .header-inner {
        min-height: 68px;
        column-gap: 12px;
    }

    .brand-name {
        font-size: 23px;
    }

    .header-actions {
        gap: 10px;
    }

    .navgrah-mobile-dock {
        min-height: 64px;

        padding:
            5px
            6px
            calc(5px + env(safe-area-inset-bottom, 0px));
    }

    .navgrah-dock-item {
        min-height: 52px;
        padding: 4px 2px;
        gap: 3px;
        font-size: 8px;
    }

    .navgrah-dock-item > i,
    .navgrah-dock-item .navgrah-dock-icon-wrap > i {
        font-size: 17px;
    }

    body:has(.navgrah-mobile-dock) {
        padding-bottom: 72px;
    }

}


/* =========================================================
23. VERY SMALL MOBILE
========================================================= */

@media screen and (max-width: 380px) {

    .navgrah-mobile-dock {
        padding-left: 2px;
        padding-right: 2px;
    }

    .navgrah-dock-item {
        padding-left: 1px;
        padding-right: 1px;
        font-size: 7.5px;
    }

}

/* =========================================================
   25. NAVGRAH CMS PAGE HERO
   Default WordPress Page Template
   ---------------------------------------------------------
   Page title       -> Hero title
   First paragraph  -> Hero supporting text
   Featured image   -> Circular image treatment
   Torn SVGs        -> Hero top / bottom edges
   ========================================================= */


/* ---------------------------------------------------------
   HERO BASE
--------------------------------------------------------- */

.page-main .navgrah-page-hero {
    --page-orange: var(--navgrah-primary, #d98218);
    --page-purple: var(--navgrah-button-purple, #6f4aa8);

    position: relative;

    width: 100%;
    min-height: 410px;

    display: flex;
    align-items: stretch;

    overflow: hidden;

    background: var(--page-orange);
    color: #ffffff;

    isolation: isolate;
}


/* ---------------------------------------------------------
   HERO CONTAINER
--------------------------------------------------------- */

.page-main .navgrah-page-hero-container {
    position: relative;

    z-index: 3;

    width:
        min(
            calc(100% - 80px),
            var(--navgrah-container)
        );

    min-height: 410px;

    margin: 0 auto;

    padding:
        51px
        0
        60px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(300px, 430px);

    align-items: center;

    gap:
        clamp(
            50px,
            8vw,
            130px
        );
}


/* ---------------------------------------------------------
   HERO COPY
--------------------------------------------------------- */

.page-main .navgrah-page-hero-copy {
    position: relative;

    z-index: 4;

    min-width: 0;

    max-width: 700px;
}


/* ---------------------------------------------------------
   HERO EYEBROW
--------------------------------------------------------- */

.page-main .navgrah-page-hero-kicker {
    margin:
        0
        0
        14px;

    color:
        rgba(
            255,
            255,
            255,
            0.78
        );

    font-size: 11px;

    font-weight: 700;

    line-height: 1.2;

    letter-spacing: 0.20em;

    text-transform: uppercase;
}


/* ---------------------------------------------------------
   HERO TITLE
--------------------------------------------------------- */

.page-main .navgrah-page-hero-title {
    margin: 0;
    color: #ffffff;
    font-size: clamp(35px, 4.5vw, 65px);
    font-weight: 500;
    line-height: 0.98;
    letter-spacing: -0.045em;
    text-transform: uppercase;
}


/* ---------------------------------------------------------
   HERO SUPPORTING TEXT
--------------------------------------------------------- */

.page-main .navgrah-page-hero-description {
    max-width: 650px;

    margin:
        16px
        0
        25px;

    color:
        rgba(
            255,
            255,
            255,
            0.94
        );

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(
            14px,
            1.4vw,
            19px
        );

    line-height: 1.45;
}


/* ---------------------------------------------------------
   HERO FEATURED IMAGE MEDIA
--------------------------------------------------------- */

.page-main .navgrah-page-hero-media {
    position: relative;

    z-index: 4;

    width: 100%;

    max-width: 430px;

    aspect-ratio: 1 / 1;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    border-radius: 50%;

    background:
        rgba(
            255,
            255,
            255,
            0.04
        );
}


/* ---------------------------------------------------------
   FEATURED IMAGE
--------------------------------------------------------- */

.page-main .navgrah-page-hero-image {
    display: block;

    width: 92%;
    height: 92%;

    max-width: 92%;
    max-height: 92%;

    margin: 0;

    object-fit: contain;

    object-position: center;

    border-radius: 0;

    filter:
        drop-shadow(
            0
            16px
            25px
            rgba(
                76,
                42,
                10,
                0.18
            )
        );
}


/* ---------------------------------------------------------
   TORN HERO EDGES
--------------------------------------------------------- */

.page-main .navgrah-page-hero-torn {
    position: absolute;

    left: 0;

    width: 100%;
    height: 58px;

    display: block;

    z-index: 5;

    pointer-events: none;

    user-select: none;

    object-fit: fill;
}


/* ---------------------------------------------------------
   TORN TOP
--------------------------------------------------------- */

.page-main .navgrah-page-hero-torn-top {
    top: 0;
}


/* ---------------------------------------------------------
   TORN BOTTOM
--------------------------------------------------------- */

.page-main .navgrah-page-hero-torn-bottom {
    bottom: 0;
}


/* ---------------------------------------------------------
   NO FEATURED IMAGE
--------------------------------------------------------- */

.page-main .navgrah-page-hero.no-hero-image
.navgrah-page-hero-container {
    grid-template-columns: 1fr;
}

.page-main .navgrah-page-hero.no-hero-image
.navgrah-page-hero-copy {
    max-width: 850px;
}


/* ---------------------------------------------------------
   CMS PAGE CONTENT
--------------------------------------------------------- */

.page-main .navgrah-page-content {
    position: relative;

    width: 100%;

    background:
        var(--navgrah-bg, #f5f4f0);

    color:
        var(--navgrah-dark, #222222);
}


.page-main .navgrah-page-content-container {
    width:
        min(
            calc(100% - 80px),
            var(--navgrah-container)
        );

    margin: 0 auto;

    padding:
        80px
        0
        100px;
}


.page-main .navgrah-cms-content {
    width: 100%;

    max-width: 100%;

    margin: 0;
}


/* ---------------------------------------------------------
   CMS CONTENT TYPOGRAPHY
--------------------------------------------------------- */

.page-main .navgrah-cms-content > :first-child {
    margin-top: 0;
}

.page-main .navgrah-cms-content > :last-child {
    margin-bottom: 0;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .page-main .navgrah-page-hero {
        min-height: 560px;
    }

    .page-main .navgrah-page-hero-container {
        width:
            min(
                calc(100% - 50px),
                var(--navgrah-container)
            );

        min-height: 560px;

        padding:
            82px
            0
            90px;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(260px, 360px);

        gap: 50px;
    }

    .page-main .navgrah-page-hero-title {
        font-size:
            clamp(
                42px,
                6vw,
                64px
            );
    }

    .page-main .navgrah-page-hero-description {
        font-size: 18px;
    }

    .page-main .navgrah-page-hero-media {
        max-width: 360px;
    }

    .page-main .navgrah-page-hero-torn {
        height: 50px;
    }

    .page-main .navgrah-page-content-container {
        width:
            min(
                calc(100% - 50px),
                var(--navgrah-container)
            );

        padding:
            65px
            0
            85px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .page-main .navgrah-page-hero {
        min-height: auto;
    }

    .page-main .navgrah-page-hero-container {
        width:
            calc(100% - 36px);

        min-height: auto;

        padding:
            85px
            0
            90px;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        gap: 35px;

        text-align: center;
    }

    .page-main .navgrah-page-hero-copy {
        width: 100%;

        max-width: 650px;
    }

    .page-main .navgrah-page-hero-kicker {
        margin-bottom: 12px;

        font-size: 9px;

        letter-spacing: 0.18em;
    }

    .page-main .navgrah-page-hero-title {
        font-size:
            clamp(
                36px,
                10vw,
                52px
            );

        line-height: 1;
    }

    .page-main .navgrah-page-hero-description {
        max-width: 600px;

        margin:
            18px
            auto
            0;

        font-size: 17px;

        line-height: 1.5;
    }

    .page-main .navgrah-page-hero-media {
        width:
            min(
                78vw,
                340px
            );

        max-width: 340px;

        flex: 0 0 auto;
    }

    .page-main .navgrah-page-hero-torn {
        height: 42px;
    }

    .page-main .navgrah-page-content-container {
        width:
            calc(100% - 36px);

        padding:
            55px
            0
            80px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .page-main .navgrah-page-hero-container {
        width:
            calc(100% - 28px);

        padding:
            78px
            0
            82px;

        gap: 28px;
    }

    .page-main .navgrah-page-hero-title {
        font-size:
            clamp(
                32px,
                10vw,
                44px
            );
    }

    .page-main .navgrah-page-hero-description {
        font-size: 16px;
    }

    .page-main .navgrah-page-hero-media {
        width:
            min(
                82vw,
                300px
            );
    }

    .page-main .navgrah-page-hero-torn {
        height: 35px;
    }

    .page-main .navgrah-page-content-container {
        width:
            calc(100% - 28px);

        padding:
            45px
            0
            70px;
    }
}

/* =========================================================
   GLOBAL TYPOGRAPHY
   TIMES NEW ROMAN
   ========================================================= */

body,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body p,
body a,
body span,
body div,
body li,
body ul,
body ol,
body label,
body button,
body input,
body textarea,
body select,
body option,
body blockquote,
body figcaption,
body th,
body td,
body strong,
body em,
body small {
    font-family: "Times New Roman", Times, serif;
}



/* =========================================================
CONTACT PAGE — PREMIUM CONTACT SECTION
========================================================= */

.navgrah-contact-section {
    position: relative;

    width: 100%;

    padding: 110px 0 125px;

    background:
        radial-gradient(
            circle at 8% 45%,
            rgba(218, 171, 49, 0.10) 0,
            rgba(218, 171, 49, 0.04) 180px,
            transparent 360px
        ),
        radial-gradient(
            circle at 92% 65%,
            rgba(223, 138, 11, 0.08) 0,
            rgba(223, 138, 11, 0.03) 180px,
            transparent 360px
        ),
        #faf9f5;

    overflow: hidden;
}


/* ---------------------------------------------------------
DECORATIVE BACKGROUND DETAILS
--------------------------------------------------------- */

.navgrah-contact-section::before {
    content: "";

    position: absolute;

    width: 330px;
    height: 330px;

    top: -165px;
    left: -165px;

    border: 1px solid rgba(214, 169, 45, 0.18);

    border-radius: 50%;

    pointer-events: none;
}


.navgrah-contact-section::after {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: -210px;
    bottom: -210px;

    border: 1px solid rgba(214, 169, 45, 0.14);

    border-radius: 50%;

    pointer-events: none;
}


/* ---------------------------------------------------------
MAIN CONTACT CONTAINER
--------------------------------------------------------- */

.navgrah-contact-container {
    position: relative;

    z-index: 2;

    width: min(1180px, calc(100% - 80px));

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 0.85fr)
        minmax(0, 1.15fr);

    gap: 90px;

    align-items: stretch;
}


/* ---------------------------------------------------------
LEFT — CONTACT INFORMATION
--------------------------------------------------------- */

.navgrah-contact-info {
    position: relative;

    padding: 48px 52px;

    background: #ffffff;

    border: 1px solid rgba(25, 25, 25, 0.07);

    box-shadow:
        0 18px 55px rgba(54, 37, 16, 0.07);

    overflow: hidden;
}


.navgrah-contact-info::before {
    content: "";

    position: absolute;

    width: 170px;
    height: 170px;

    top: -85px;
    right: -85px;

    border-radius: 50%;

    background: rgba(218, 171, 49, 0.08);
}


.navgrah-contact-info::after {
    content: "";

    position: absolute;

    width: 5px;
    height: 100%;

    left: 0;
    top: 0;

    background: #d9aa2f;
}


/* ---------------------------------------------------------
EYEBROWS
--------------------------------------------------------- */

.navgrah-contact-eyebrow {
    margin: 0 0 20px;

    color: #d1a32b;

    font-size: 13px;

    font-weight: 400;

    line-height: 1.4;

    letter-spacing: 3px;

    text-transform: uppercase;
}


/* ---------------------------------------------------------
LEFT TITLE
--------------------------------------------------------- */

.navgrah-contact-title {
    margin: 0 0 28px;

    max-width: 520px;

    color: #171729;

    font-size: clamp(28px, 2vw, 38px);

    font-weight: 300;

    line-height: 0.98;

    letter-spacing: -1.5px;
}


/* ---------------------------------------------------------
INTRODUCTION
--------------------------------------------------------- */

.navgrah-contact-intro {
    margin: 0 0 42px;

    max-width: 400px;

    color: #514d49;

    font-size: 17px;

    line-height: 1.8;
}


/* ---------------------------------------------------------
CONTACT DETAILS
--------------------------------------------------------- */

.navgrah-contact-details {
    display: flex;

    flex-direction: column;

    gap: 0;
}


.navgrah-contact-detail {
    position: relative;

    padding: 18px 0;

    border-top: 1px solid rgba(25, 25, 25, 0.08);
}


.navgrah-contact-detail:last-child {
    border-bottom: 1px solid rgba(25, 25, 25, 0.08);
}


.navgrah-contact-detail-label {
    display: block;

    margin-bottom: 6px;

    color: #d1a32b;

    font-size: 11px;

    font-weight: 600;

    line-height: 1.3;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.navgrah-contact-detail-value {
    display: block;

    color: #20202d;

    font-size: 16px;

    line-height: 1.6;
}


/* ---------------------------------------------------------
RIGHT — FORM PANEL
--------------------------------------------------------- */

.navgrah-contact-form-wrap {
    position: relative;

    padding: 48px 52px;

    background: #ffffff;

    border: 1px solid rgba(25, 25, 25, 0.07);

    box-shadow:
        0 22px 65px rgba(54, 37, 16, 0.09);

    overflow: hidden;
}


.navgrah-contact-form-wrap::before {
    content: "";

    position: absolute;

    width: 240px;
    height: 240px;

    right: -120px;
    top: -120px;

    border-radius: 50%;

    background: rgba(218, 171, 49, 0.08);

    pointer-events: none;
}


.navgrah-contact-form-wrap::after {
    content: "";

    position: absolute;

    width: 120px;
    height: 120px;

    right: 28px;
    bottom: 28px;

    border: 1px solid rgba(218, 171, 49, 0.13);

    border-radius: 50%;

    pointer-events: none;
}


/* ---------------------------------------------------------
FORM TITLE
--------------------------------------------------------- */

.navgrah-contact-form-title {
    position: relative;

    z-index: 2;

    margin: 0 0 32px;

    color: #171729;

    font-size: clamp(26px, 2vw, 36px);

    font-weight: 500;

    line-height: 1.05;

    letter-spacing: -0.8px;
}


/* ---------------------------------------------------------
FORM
--------------------------------------------------------- */

.navgrah-contact-form {
    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    gap: 22px;
}


/* ---------------------------------------------------------
FORM FIELD
--------------------------------------------------------- */

.navgrah-contact-field {
    display: flex;

    flex-direction: column;

    gap: 8px;
}


.navgrah-contact-field label {
    color: #20202d;

    font-size: 13px;

    font-weight: 600;

    line-height: 1.4;

    letter-spacing: 0.3px;
}


.navgrah-contact-field input,
.navgrah-contact-field textarea {
    width: 100%;

    box-sizing: border-box;

    padding: 15px 17px;

    border: 1px solid rgba(31, 31, 42, 0.16);

    border-radius: 0;

    background: #fcfbf8;

    color: #20202d;

    font-family: inherit;

    font-size: 15px;

    line-height: 1.5;

    outline: none;

    transition:
        border-color 180ms ease,
        box-shadow 180ms ease,
        background-color 180ms ease;
}


.navgrah-contact-field input {
    min-height: 52px;
}


.navgrah-contact-field textarea {
    min-height: 155px;

    resize: vertical;
}


.navgrah-contact-field input::placeholder,
.navgrah-contact-field textarea::placeholder {
    color: #a39b91;

    opacity: 1;
}


.navgrah-contact-field input:focus,
.navgrah-contact-field textarea:focus {
    border-color: #d1a32b;

    background: #ffffff;

    box-shadow:
        0 0 0 3px rgba(209, 163, 43, 0.10);
}


/* ---------------------------------------------------------
SUBMIT BUTTON
--------------------------------------------------------- */

.navgrah-contact-submit {
    align-self: flex-start;

    margin-top: 4px;

    padding: 15px 34px;

    width: auto;
    min-width: 158px;
    min-height: 48px;

    border: none;
    outline: none;

    border-radius: 999px;

    background: #7547b8;

    color: #ffffff !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;

    line-height: 1.2 !important;
    text-align: center;

    appearance: none;
    -webkit-appearance: none;

    cursor: pointer;

    box-shadow:
        0 8px 20px rgba(117, 71, 184, 0.20);

    transition:
        transform 180ms ease,
        background-color 180ms ease,
        box-shadow 180ms ease;
}

.navgrah-contact-submit:hover {
    background: #653aa3;

    color: #ffffff !important;

    transform: translateY(-2px);

    box-shadow:
        0 12px 25px rgba(117, 71, 184, 0.25);
}

.navgrah-contact-submit:focus,
.navgrah-contact-submit:active {
    background: #653aa3;

    color: #ffffff !important;

    outline: none;

    transform: translateY(0);
}


.navgrah-contact-submit:hover {
    background: #bd8d16;

    transform: translateY(-2px);

    box-shadow:
        0 12px 25px rgba(180, 132, 22, 0.25);
}


.navgrah-contact-submit:active {
    transform: translateY(0);
}

/* =========================================================
CONTACT PAGE — SUBMIT BUTTON HOVER COLOR
========================================================= */

.navgrah-contact-submit:hover,
.navgrah-contact-submit:focus,
.navgrah-contact-submit:active {
    background: #e08a12 !important;
    color: #e08a12 !important;
}
/* =========================================================
CONTACT PAGE — SUBMIT BUTTON INNER TEXT
========================================================= */

.navgrah-contact-submit > button,
.navgrah-contact-submit > input[type="submit"],
.navgrah-contact-submit > input[type="button"] {
    appearance: none !important;
    -webkit-appearance: none !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    color: #ffffff !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    padding: 0 !important;
    margin: 0 !important;

    outline: none !important;
    text-decoration: none !important;
}


/* Normal state — white text */
.navgrah-contact-submit {
    color: #ffffff !important;
}


/* Hover / focus / active — white text */
.navgrah-contact-submit:hover,
.navgrah-contact-submit:focus,
.navgrah-contact-submit:active {
    color: #ffffff !important;
}


/* Keep actual button text white in every state */
.navgrah-contact-submit:hover > button,
.navgrah-contact-submit:hover > input[type="submit"],
.navgrah-contact-submit:hover > input[type="button"],
.navgrah-contact-submit:focus > button,
.navgrah-contact-submit:focus > input[type="submit"],
.navgrah-contact-submit:focus > input[type="button"],
.navgrah-contact-submit:active > button,
.navgrah-contact-submit:active > input[type="submit"],
.navgrah-contact-submit:active > input[type="button"] {
    color: #ffffff !important;
}


/* ---------------------------------------------------------
CONTACT PAGE — MOBILE
--------------------------------------------------------- */

@media (max-width: 900px) {

    .navgrah-contact-section {
        padding: 75px 0 90px;
    }


    .navgrah-contact-container {
        width: min(100% - 40px, 680px);

        grid-template-columns: 1fr;

        gap: 35px;
    }


    .navgrah-contact-info,
    .navgrah-contact-form-wrap {
        padding: 38px 32px;
    }


    .navgrah-contact-title {
        font-size: 44px;
    }


    .navgrah-contact-form-title {
        font-size: 38px;
    }
}


/* ---------------------------------------------------------
CONTACT PAGE — SMALL MOBILE
--------------------------------------------------------- */

@media (max-width: 520px) {

    .navgrah-contact-section {
        padding: 55px 0 70px;
    }


    .navgrah-contact-container {
        width: calc(100% - 28px);

        gap: 25px;
    }


    .navgrah-contact-info,
    .navgrah-contact-form-wrap {
        padding: 32px 24px;
    }


    .navgrah-contact-title {
        font-size: 38px;

        letter-spacing: -0.8px;
    }


    .navgrah-contact-intro {
        font-size: 15px;

        line-height: 1.7;
    }


    .navgrah-contact-form-title {
        font-size: 34px;
    }


    .navgrah-contact-submit {
        width: 100%;
    }
}

/* =========================================================
   MOBILE STABILITY PATCH
   Dock + Horizontal Scroll Only
   Does NOT alter page layouts
   ========================================================= */

@media screen and (max-width: 1000px) {

    /* -----------------------------------------------------
       1. HARD-LOCK HORIZONTAL VIEWPORT
       Does not change element widths or page layout.
    ----------------------------------------------------- */

    html {
        overflow-x: clip !important;
    }

    body {
        overflow-x: clip !important;
    }


    /* -----------------------------------------------------
       2. KEEP MOBILE DOCK FIXED + VISIBLE
       Prevent scroll scripts/classes from hiding it.
    ----------------------------------------------------- */

    html body .navgrah-mobile-dock {
        position: fixed !important;

        top: auto !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        z-index: 10000 !important;

        visibility: visible !important;
        opacity: 1 !important;

        transform: translate3d(0, 0, 0) !important;

        pointer-events: auto !important;
    }

}

/* =========================================================
   CMS PAGE HERO — MOBILE HEIGHT REDUCTION
   Surgical fix only
   ========================================================= */

@media screen and (max-width: 700px) {

    .page-main .navgrah-page-hero-container {
        padding-top: 55px;
        padding-bottom: 60px;
        gap: 26px;
    }

}

@media screen and (max-width: 480px) {

    .page-main .navgrah-page-hero-container {
        padding-top: 48px;
        padding-bottom: 52px;
        gap: 22px;
    }

}

/* =========================================================
   NAVGRAH HEADER — PURPLE / GOLD THEME
   ========================================================= */

/* Dark purple header — same as footer */
.site-header {
    background: #241238 !important;
}


/* Gold navigation text */
.site-header .primary-nav .nav-list a {
    color: var(--navgrah-gold) !important;
}


/* Gold cart + search icons */
.site-header .header-cart,
.site-header .search-toggle,
.site-header .menu-toggle {
    color: var(--navgrah-gold) !important;
}


/* Make SVG/icon elements inherit the gold */
.site-header .header-cart svg,
.site-header .search-toggle svg,
.site-header .menu-toggle svg,
.site-header .header-action-icon {
    color: var(--navgrah-gold) !important;
    stroke: var(--navgrah-gold) !important;
}


/* Cart number badge */
.site-header .cart-total {
    background: var(--navgrah-gold) !important;
    color: #241238 !important;
}


/* Navigation hover underline */
.site-header .primary-nav .nav-list a::after {
    background: var(--navgrah-gold) !important;
}


/* Keep the mobile navigation purple too */
.site-header .mobile-navigation {
    background: #241238 !important;
    border-bottom-color: rgba(255, 255, 255, 0.12);
}


/* Mobile search icon */
@media screen and (max-width: 900px) {

    .site-header .search-toggle {
        color: var(--navgrah-gold) !important;
    }

    .site-header .search-toggle svg,
    .site-header .header-action-icon {
        color: var(--navgrah-gold) !important;
        stroke: var(--navgrah-gold) !important;
    }

}