/* ============================================
   AVNI BHUVA - Site-wide Style Override
   Ensures consistent fonts, colors, and spacing
   Last loaded CSS - overrides all other stylesheets
   ============================================ */

/* ---- Google Fonts Import ---- */
@import url('https://fonts.googleapis.com/css2?family=Arapey:ital@0;1&family=Montserrat:wght@400;500;600;700;900&display=swap');

/* ---- CSS Variables ---- */
:root {
    --brand-primary: #F0B27A;
    --brand-secondary: #19b395;
    --text-dark: #343435;
    --text-body: #666666;
    --text-light: #999999;
    --bg-white: #ffffff;
    --bg-light: #f9f9f9;
    --border-color: #ebebeb;
    --font-body: 'Arapey', serif;
    --font-heading: 'Playfair Display', 'Arapey', serif;
    --font-nav: 'Montserrat', sans-serif;
    --font-primary: 'Arapey', serif;
}

/* ---- Font System ---- */
/* Body text: Arapey (serif) */
body,
html,
p,
span,
div,
li,
td,
th {
    font-family: var(--font-body) !important;
}

/* Headings: Playfair Display (serif) */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.headline h2,
.headline h3,
.section-title,
.page-title,
.product .text h3 {
    font-family: var(--font-heading) !important;
}

/* Nav, buttons, UI: Montserrat (sans-serif) */
a,
input,
textarea,
select,
button,
label,
.btn,
.menu > li > a,
.main-nav a,
.mobile-menu a,
.filter-btn,
.view-all-btn,
.hero-btn,
.brand-story-btn,
.shop-now-btn,
.widget-title,
.product-card-body h3,
.product-card-body h3 a,
.price,
.product-price,
.product-title,
.breadcrumb-item,
.breadcrumb-item a,
.g-font-size-20,
.g-font-size-16,
.g-font-size-14 {
    font-family: var(--font-nav) !important;
}

/* ---- Body base ---- */
body {
    color: var(--text-body);
    background-color: var(--bg-white);
    font-size: 14px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---- Consistent Heading Sizes ---- */
h1, .h1 {
    font-size: 2.6rem;
    font-weight: 400;
    color: var(--text-dark);
    line-height: 1.4;
}

h2, .h2 {
    font-size: 2.2rem;
    font-weight: 400;
    color: var(--text-dark);
    line-height: 1.4;
}

h3, .h3 {
    font-size: 1.8rem;
    font-weight: 400;
    color: var(--text-dark);
    line-height: 1.4;
}

h4, .h4 {
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--text-dark);
}

h5, .h5 {
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--text-dark);
}

h6, .h6 {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-dark);
}

/* ---- Links ---- */
a {
    color: var(--text-dark);
    transition: color 0.3s ease;
}

a:hover,
a:focus {
    color: var(--brand-primary);
    text-decoration: none;
}

/* ---- Page Headers (Policy pages, etc.) ---- */
.page-header {
    padding: 3rem 0;
    margin-bottom: 0;
}

.page-header .page-title {
    font-size: 2.4rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0;
}

/* ---- Override Summernote inline fonts on all pages ---- */
.main p, .main span, .main div, .main td, .main li,
.main p[style], .main span[style], .main div[style], .main td[style] {
    font-family: var(--font-body) !important;
}
.main h1, .main h2, .main h3, .main h4, .main h5, .main h6,
.main h1[style], .main h2[style], .main h3[style] {
    font-family: var(--font-heading) !important;
}

/* ---- Page Content (Policy pages) ---- */
.page-content {
    padding: 3rem 0;
}

.page-content p {
    font-size: 1.4rem;
    line-height: 1.86;
    color: var(--text-body);
    margin-bottom: 1.5rem;
}

.page-content ul {
    margin-bottom: 1.5rem;
}

.page-content li {
    font-size: 1.4rem;
    line-height: 1.86;
    color: var(--text-body);
}

.page-content strong {
    font-weight: 600;
    color: var(--text-dark);
}

.page-content h6 {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-top: 2rem;
    margin-bottom: 1rem;
}

/* ---- Product Cards ---- */
.product-title a {
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--text-dark);
}

.product-title a:hover,
.product-title a:focus {
    color: var(--brand-primary);
}

.product-price {
    font-size: 1.6rem;
    font-weight: 600;
}

.old-price {
    color: var(--text-light);
    text-decoration: line-through;
}

/* ---- Cart Page ---- */
.table.table-cart th {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-dark);
}

.table.table-cart td {
    font-size: 1.4rem;
    color: var(--text-body);
    vertical-align: middle;
}

.table.table-cart .product-col .product-title {
    font-size: 1.4rem;
}

/* ---- Checkout ---- */
.checkout h2 {
    font-size: 2rem;
    font-weight: 600;
}

/* ---- Forms ---- */
.form-control {
    font-family: var(--font-primary) !important;
    font-size: 1.4rem;
    color: var(--text-dark);
}

.form-control:focus {
    border-color: var(--brand-primary);
    box-shadow: none;
}

/* ---- Buttons consistency ---- */
.btn {
    font-family: var(--font-primary) !important;
    font-weight: 500;
    transition: all 0.3s ease;
}

/* ---- Footer consistency ---- */
.footer,
footer.footer,
footer.footer.mt-5 {
    font-size: 1.4rem;
    color: #cccccc !important;
    background-color: #1a1a1a !important;
    margin-top: 0 !important;
}

.footer .widget-list li a,
.footer a {
    color: #cccccc !important;
}

.footer .widget-list li a:hover,
.footer .widget-list li a:focus,
.footer a:hover,
.footer a:focus {
    color: #ffffff !important;
}

.footer .widget-title,
.footer h4,
.footer .widget h4 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #ffffff !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.footer p,
.footer .cta p {
    color: #cccccc !important;
}

.footer-middle {
    border-top: none !important;
}

.footer-bottom {
    color: #8a7b6b !important;
    background-color: #ede6de !important;
}

.footer-bottom .footer-copyright {
    color: #8a7b6b !important;
}

.footer-bottom .container::before,
.footer-bottom .container-fluid::before {
    display: none !important;
}

.footer .social-icons a,
.footer .social-icons a i {
    color: #cccccc !important;
}

.footer .social-icons a:hover,
.footer .social-icons a:hover i {
    color: #ffffff !important;
}

.footer .form-control {
    background: #2a2a2a !important;
    border-color: #444 !important;
    color: #fff !important;
}

.footer .btn {
    background: #ffffff !important;
    color: #1a1a1a !important;
}

/* ---- Order History ---- */
.table th {
    font-weight: 600;
    color: var(--text-dark);
}

/* ---- Out of Stock label ---- */
.out-of-stock {
    color: #dc3545;
    font-weight: 500;
}

/* ---- Breadcrumb consistency ---- */
.breadcrumb-item,
.breadcrumb-item a {
    font-size: 1.3rem;
    color: var(--text-light);
}

.breadcrumb-item.active {
    color: var(--text-dark);
}

/* ---- Category filter tabs ---- */
.nav-filter a {
    font-size: 1.4rem;
    font-weight: 500;
}

/* ---- Contact page ---- */
.contact-box h3,
address strong {
    font-weight: 600;
    color: var(--text-dark);
}

/* ---- Override old Unify font conflicts ---- */
[class*="g-font-"] {
    font-family: var(--font-primary) !important;
}

[class*="g-color-"] {
    font-family: var(--font-primary) !important;
}

/* ---- Fix Open Sans override in old CSS ---- */
.videos,
.videos * {
    font-family: var(--font-primary) !important;
}

/* ---- Invoice/PDF consistency ---- */
.invoice-title {
    font-family: var(--font-primary) !important;
}

/* ---- Consistent table styling ---- */
.table-bordered th,
.table-bordered td {
    font-family: var(--font-primary) !important;
}

/* ---- Header: Single row — Nav (left) | Logo (center) | Icons (right) ---- */

/* Make the entire header always stick to top */
.header {
    position: sticky !important;
    top: 0;
    z-index: 1000;
    background: #fff;
}

.header-middle {
    border-bottom: 1px solid #f0f0f0 !important;
    padding: 0 !important;
    background: #fff;
}

.header-middle .container {
    display: flex;
    align-items: center;
}

/* Left: Nav menu */
.header-middle .header-left {
    flex: 1;
    display: flex;
    align-items: center;
}

/* Center: Logo */
.header-middle .header-center {
    flex: 0 0 auto;
    text-align: center;
}

.header-middle .header-center .logo {
    margin: 0;
    padding: 8px 0;
    transition: padding 0.3s ease;
}

.header-middle .header-center .logo img {
    max-height: 80px;
    width: auto;
    image-rendering: -webkit-optimize-contrast;
    transition: max-height 0.3s ease;
}

/* Right: Icons */
.header-middle .header-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}

/* Normal menu size — Montserrat uppercase */
.header-6 .sticky-wrapper .main-nav .menu > li > a {
    font-family: var(--font-nav) !important;
    font-size: 14px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    color: #343435;
    padding-top: 20px;
    padding-bottom: 20px;
    transition: all 0.3s ease;
}

/* Submenu links */
.menu .submenu li a,
.megamenu .submenu li a {
    font-family: var(--font-nav) !important;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.02em;
}

/* On scroll: shrink logo and menu */
.sticky-header.fixed .header-center .logo {
    padding: 6px 0;
}

.sticky-header.fixed .header-center .logo img {
    max-height: 55px;
}

.sticky-header.fixed .main-nav .menu > li > a {
    font-size: 12px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

/* Mobile: hide nav, show hamburger */
.header-middle .header-left .mobile-menu-toggler {
    display: none;
    margin-right: 10px;
}

@media (max-width: 991px) {
    .header-middle .header-left .mobile-menu-toggler {
        display: inline-block;
    }
    .header-middle .header-left .main-nav {
        display: none;
    }
}

/* ---- About Page ---- */
.about-page section p,
.about-page section h1,
.about-page section h2 {
    font-family: var(--font-body) !important;
}
.about-page section h1,
.about-page section h2 {
    font-family: var(--font-heading) !important;
}

@media (max-width: 768px) {
    .about-hero {
        height: 60vh !important;
        min-height: 350px !important;
    }
    .about-hero h1 {
        font-size: 2.4rem !important;
    }
    .about-hero p {
        font-size: 1.2rem !important;
    }
    .about-page section {
        padding: 50px 0 !important;
    }
    .about-page section h2 {
        font-size: 2rem !important;
    }
    .about-page section p {
        font-size: 1.35rem !important;
    }
    /* Stack flex layouts on mobile */
    .about-page section > div > div[style*="display:flex"] {
        flex-direction: column !important;
    }
    .about-page section > div > div[style*="display:flex"] > div {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        min-width: unset !important;
    }
}

/* ---- Mobile responsiveness fixes ---- */
@media (max-width: 767px) {
    h1, .h1, .page-header .page-title {
        font-size: 2rem;
    }

    h2, .h2 {
        font-size: 1.8rem;
    }

    h3, .h3 {
        font-size: 1.6rem;
    }

    .page-content p,
    .page-content li {
        font-size: 1.3rem;
    }
}