/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Description: Custom Coded Global Header and Footer Child Theme.
Author: Custom Coded
Template: astra
Version: 1.0.0
Text Domain: astra-child
*/

/* Core Design System Tokens */
:root {
    --brand-primary: #961C53;      /* Deep Imperial Purple (Primary) */
    --brand-secondary: #D4AF37;    /* Antique Gold (Hover Accent) */
    --brand-dark: #420B24;         /* Midnight Plum (Headings/Ink) */
    --brand-text: #66334D;         /* Soft Charcoal / Mauve (Body text) */
    --brand-bg-light: #FCFAF6;     /* Warm Alabaster / Ivory */
    --brand-bg-dark: #3B071E;      /* Obsidian Purple (Footer bg) */
    --brand-border: #F3E4EB;       /* Light Lavender-Grey (Dividers) */
}

/* --- CUSTOM HEADER STYLES --- */
.site-header-custom {
    width: 100%;
    z-index: 999;
}

/* Layer 1: Top Bar */
.header-top-bar {
    background-color: var(--brand-bg-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 40px;
    border-bottom: 1px solid var(--brand-border);
}

.custom-brand-logo {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 26px;
    color: var(--brand-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}
.custom-brand-logo:hover {
    color: var(--brand-secondary);
}

/* Header Nav Menu */
.custom-header-menu {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 30px;
}
.custom-header-menu li { margin: 0; }
.custom-header-menu a {
    position: relative;
    text-decoration: none;
    color: var(--brand-text);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 500;
    font-size: 15px;
    transition: color 0.3s ease;
}
.custom-header-menu a:hover { color: var(--brand-secondary); }
.custom-header-menu a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: -4px;
    left: 0;
    background-color: var(--brand-secondary);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}
.custom-header-menu a:hover::after { transform: scaleX(1); }

/* Header Utilities */
.header-utilities-container {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Custom Inline Search Box */
.custom-search-form {
    display: inline-block;
    margin-right: 10px;
}
.search-input-wrapper {
    display: flex;
    align-items: center;
    position: relative;
    border-bottom: 1px solid var(--brand-primary);
    padding: 2px 0;
}
.search-icon {
    color: var(--brand-primary);
    font-size: 14px;
    margin-right: 8px;
}
.search-field {
    border: none !important;
    background: transparent !important;
    color: var(--brand-dark) !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 14px !important;
    padding: 2px 0 !important;
    outline: none !important;
    width: 220px;
    box-shadow: none !important;
}
.search-field::placeholder {
    color: var(--brand-text);
    opacity: 0.7;
}

/* Utility Icons */
.custom-utility-icon {
    color: var(--brand-primary);
    font-size: 18px;
    text-decoration: none;
    position: relative;
    transition: color 0.3s ease;
}
.custom-utility-icon:hover { color: var(--brand-secondary); }

.cart-icon {
    display: inline-flex;
    align-items: center;
    position: relative;
}
.cart-count {
    position: absolute;
    top: -8px;
    right: -10px;
    background-color: #D93838;
    color: #FFFFFF;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    box-sizing: border-box;
}

/* Layer 2: Bottom Bar (Categories) */
.header-bottom-bar {
    background-color: #FFFFFF;
    border-bottom: 1px solid var(--brand-border);
    padding: 12px 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.custom-category-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 40px;
}
.custom-category-menu li { margin: 0; }
.custom-category-menu a {
    position: relative;
    text-decoration: none;
    color: var(--brand-text);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
}
.custom-category-menu a:hover { color: var(--brand-secondary); }
.custom-category-menu a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: -4px;
    left: 0;
    background-color: var(--brand-secondary);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}
.custom-category-menu a:hover::after { transform: scaleX(1); }

/* --- CUSTOM FOOTER STYLES --- */
.site-footer-custom {
    background-color: var(--brand-bg-dark);
    color: #FFFFFF;
    padding: 60px 40px 30px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.footer-widgets-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    margin-bottom: 50px;
}
.footer-column { display: flex; flex-direction: column; }
.footer-logo {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 24px;
    color: var(--brand-secondary);
    margin: 0 0 15px 0;
}
.footer-about-text {
    font-size: 14px;
    line-height: 1.6;
    color: #A396AB;
    margin: 0;
}
.footer-heading {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 20px 0;
    position: relative;
}
.footer-heading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 30px;
    height: 1px;
    background-color: var(--brand-secondary);
}
.footer-links-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.footer-links-list li { margin: 0; }
.footer-links-list a {
    text-decoration: none;
    color: #A396AB;
    font-size: 14px;
    transition: color 0.3s ease, padding-left 0.3s ease;
}
.footer-links-list a:hover {
    color: var(--brand-secondary);
    padding-left: 5px;
}
.footer-newsletter-text {
    font-size: 14px;
    line-height: 1.5;
    color: #A396AB;
    margin: 0 0 15px 0;
}
.footer-newsletter-form { display: flex; flex-direction: column; gap: 10px; }
.newsletter-input {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
    padding: 10px 15px;
    font-size: 14px;
    border-radius: 4px;
    outline: none;
    transition: border-color 0.3s ease;
}
.newsletter-input:focus { border-color: var(--brand-secondary); }
.newsletter-submit-btn {
    background-color: var(--brand-primary);
    color: #FFFFFF;
    border: none;
    padding: 10px 15px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.newsletter-submit-btn:hover { background-color: var(--brand-secondary); }

/* Bottom Copyright Row */
.footer-bottom-row {
    max-width: 1200px;
    margin: 0 auto;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.footer-copyright { font-size: 13px; color: #8C7D94; }
.footer-social-links { display: flex; gap: 15px; }
.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.05);
    color: #FFFFFF;
    text-decoration: none;
    font-size: 14px;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.social-link:hover {
    background-color: var(--brand-secondary);
    color: var(--brand-primary);
}

/* Responsive Rules */
@media (max-width: 991px) {
    .header-top-bar { flex-direction: column; gap: 15px; padding: 15px 20px; }
    .custom-category-menu { gap: 20px; }
    .footer-widgets-container { grid-template-columns: repeat(2, 1fr); gap: 30px; }
}
@media (max-width: 575px) {
    .custom-category-menu { flex-wrap: wrap; justify-content: center; gap: 15px; }
    .footer-widgets-container { grid-template-columns: 1fr; }
    .footer-bottom-row { flex-direction: column; gap: 20px; text-align: center; }
}

/* ==========================================================================
   CURATED SAREE COLLECTIONS — PORTRAIT OVERLAY CARDS
   ========================================================================== */

.elementor-element-sec2cat {
    background-color: #F9F6F2 !important;
    padding-top: 70px !important;
    padding-bottom: 70px !important;
}

/* Grid: CSS Grid 4 equal cols */
.elementor-element-c2grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
}

/* Force Elementor flex reset on grid children */
.elementor-element-c2c01,
.elementor-element-c2c02,
.elementor-element-c2c03,
.elementor-element-c2c04 {
    position: relative !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background: #3B071E !important;
    box-shadow: 0 4px 22px rgba(0,0,0,0.10) !important;
    transition: transform 0.38s cubic-bezier(0.25,1,0.5,1), box-shadow 0.4s ease !important;
    cursor: pointer !important;
    padding: 0 !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
}

.elementor-element-c2c01:hover,
.elementor-element-c2c02:hover,
.elementor-element-c2c03:hover,
.elementor-element-c2c04:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 44px rgba(59, 7, 30,0.25) !important;
}

/* Image widget */
.elementor-element-c2c01 .elementor-widget-image,
.elementor-element-c2c02 .elementor-widget-image,
.elementor-element-c2c03 .elementor-widget-image,
.elementor-element-c2c04 .elementor-widget-image {
    display: block !important;
    line-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

.elementor-element-c2c01 .elementor-widget-image figure,
.elementor-element-c2c01 .elementor-widget-image .e-con-inner,
.elementor-element-c2c02 .elementor-widget-image figure,
.elementor-element-c2c02 .elementor-widget-image .e-con-inner,
.elementor-element-c2c03 .elementor-widget-image figure,
.elementor-element-c2c03 .elementor-widget-image .e-con-inner,
.elementor-element-c2c04 .elementor-widget-image figure,
.elementor-element-c2c04 .elementor-widget-image .e-con-inner {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    display: block !important;
}

.elementor-element-c2c01 .elementor-widget-image figure img,
.elementor-element-c2c01 .elementor-widget-image a img,
.elementor-element-c2c02 .elementor-widget-image figure img,
.elementor-element-c2c02 .elementor-widget-image a img,
.elementor-element-c2c03 .elementor-widget-image figure img,
.elementor-element-c2c03 .elementor-widget-image a img,
.elementor-element-c2c04 .elementor-widget-image figure img,
.elementor-element-c2c04 .elementor-widget-image a img {
    width: 100% !important;
    height: 420px !important;
    object-fit: cover !important;
    object-position: center top !important;
    display: block !important;
    border-radius: 0 !important;
    transition: transform 0.55s cubic-bezier(0.25,1,0.5,1) !important;
    margin: 0 !important;
    padding: 0 !important;
}

.elementor-element-c2c01:hover .elementor-widget-image img,
.elementor-element-c2c02:hover .elementor-widget-image img,
.elementor-element-c2c03:hover .elementor-widget-image img,
.elementor-element-c2c04:hover .elementor-widget-image img {
    transform: scale(1.06) !important;
}

/* HTML overlay widget */
.elementor-element-c2c01 .elementor-widget-html,
.elementor-element-c2c02 .elementor-widget-html,
.elementor-element-c2c03 .elementor-widget-html,
.elementor-element-c2c04 .elementor-widget-html {
    position: absolute !important;
    inset: 0 !important;
    z-index: 3 !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0 !important;
    pointer-events: none !important;
    width: 100% !important;
    height: 100% !important;
}

.rs-card-overlay {
    position: absolute !important;
    inset: 0 !important;
    pointer-events: all !important;
}

.rs-card-link {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    text-decoration: none !important;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.00) 45%,
        rgba(8,3,20,0.82) 100%
    ) !important;
    border-radius: 18px !important;
}

.rs-card-arrow {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.20) !important;
    border: 1.5px solid rgba(255,255,255,0.55) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #FFFFFF !important;
    font-size: 15px !important;
    line-height: 1 !important;
    z-index: 5 !important;
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease !important;
    font-family: sans-serif !important;
    text-align: center !important;
}

.elementor-element-c2c01:hover .elementor-element-c2c01:hover .rs-card-arrow,
.elementor-element-c2c02:hover .rs-card-arrow,
.elementor-element-c2c03:hover .rs-card-arrow,
.elementor-element-c2c04:hover .rs-card-arrow {
    background: #D4AF37 !important;
    border-color: #D4AF37 !important;
    color: #3B071E !important;
}

.rs-card-body {
    position: absolute !important;
    bottom: 20px !important;
    left: 20px !important;
    right: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 3px !important;
    z-index: 5 !important;
}

/* BRAND §4 Typography: Primary Heading = Cormorant Garamond (serif) */
.rs-card-title {
    font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif !important;
    font-size: 23px !important;
    font-weight: 700 !important;
    font-style: normal !important;
    color: #FFFFFF !important;
    line-height: 1.25 !important;
    letter-spacing: 0.01em !important;
    text-shadow: 0 2px 14px rgba(0,0,0,0.70) !important;
    display: block !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
}

/* BRAND §4 Typography: Body/UI = Plus Jakarta Sans (sans-serif), gold accent */
.rs-card-count {
    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: #D4AF37 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    text-shadow: none !important;
}

/* Responsive */
@media (max-width: 1024px) {
    .elementor-element-c2grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .elementor-element-c2c01 .elementor-widget-image figure img,
.elementor-element-c2c01 .elementor-widget-image a img,
.elementor-element-c2c02 .elementor-widget-image figure img,
.elementor-element-c2c02 .elementor-widget-image a img,
.elementor-element-c2c03 .elementor-widget-image figure img,
.elementor-element-c2c03 .elementor-widget-image a img,
.elementor-element-c2c04 .elementor-widget-image figure img,
.elementor-element-c2c04 .elementor-widget-image a img {
        height: 360px !important;
    }
}

@media (max-width: 575px) {
    .elementor-element-c2grid {
        grid-template-columns: 1fr !important;
    }
    .elementor-element-c2c01 .elementor-widget-image figure img,
.elementor-element-c2c01 .elementor-widget-image a img,
.elementor-element-c2c02 .elementor-widget-image figure img,
.elementor-element-c2c02 .elementor-widget-image a img,
.elementor-element-c2c03 .elementor-widget-image figure img,
.elementor-element-c2c03 .elementor-widget-image a img,
.elementor-element-c2c04 .elementor-widget-image figure img,
.elementor-element-c2c04 .elementor-widget-image a img {
        height: 300px !important;
    }
}



/* ==RS-LAYOUT-FIXES-START== */

/* =======================================
   WHY RATHNAMAYI STUDIO — 4 columns
   ======================================= */
.elementor-element-whygrd {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
    gap: 0 !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    align-content: unset !important;
    justify-content: unset !important;
}
.elementor-element-whygrd > .elementor-element {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: unset !important;
}

/* =======================================
   ANATOMY OF A DRAPE — side by side
   ======================================= */
.elementor-element-sec5drape {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}
.elementor-element-drapelft {
    flex: 0 0 48% !important;
    width: 48% !important;
    max-width: 48% !important;
    min-height: 520px !important;
    box-sizing: border-box !important;
}
.elementor-element-drapergt {
    flex: 0 0 52% !important;
    width: 52% !important;
    max-width: 52% !important;
    box-sizing: border-box !important;
}
.elementor-element-drapelft {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}
.elementor-element-drapesp {
    flex-grow: 1 !important;
    min-height: 180px !important;
}

/* =======================================
   PROVENANCE ICON BOXES
   ======================================= */
.elementor-element-provc1iw,
.elementor-element-provc2iw,
.elementor-element-provc3iw {
    min-height: 56px !important;
    width: 56px !important;
    flex-shrink: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    display: flex !important;
}

/* =======================================
   RESPONSIVE
   ======================================= */
@media (max-width: 1024px) {
    .elementor-element-drapelft,
    .elementor-element-drapergt {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .elementor-element-whygrd {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 600px) {
    .elementor-element-whygrd {
        grid-template-columns: 1fr !important;
    }
}

/* ==RS-LAYOUT-FIXES-END== */


/* ===== HEADER LOGO IMAGE ===== */
.custom-brand-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}
.custom-brand-logo .site-logo-img {
    height: 50px;
    width: auto;
    max-width: 200px;
    display: block;
    object-fit: contain;
}
.custom-brand-logo .site-logo-text {
    font-family: "Playfair Display", serif;
    font-size: 18px;
    font-weight: 600;
    color: #961C53;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
}


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

/* Hide mobile elements on desktop */
.mobile-header-bar,
.mobile-search-bar {
    display: none;
}

/* Show desktop elements on desktop */
.desktop-header {
    display: flex;
}

/* ---- Mobile breakpoint (<= 768px) ---- */
@media (max-width: 768px) {

    /* Hide desktop header layers */
    .desktop-header {
        display: none !important;
    }

    /* ---- MOBILE TOP BAR ---- */
    .mobile-header-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
        height: 60px;
        background: #FCFAF6;
        border-bottom: 1px solid rgba(150, 28, 83,0.08);
        position: sticky;
        top: 0;
        z-index: 999;
    }

    /* Hamburger button */
    .mobile-hamburger {
        background: none;
        border: none;
        cursor: pointer;
        padding: 6px;
        display: flex;
        flex-direction: column;
        gap: 5px;
        justify-content: center;
        min-width: 36px;
    }
    .hamburger-line {
        display: block;
        width: 22px;
        height: 2px;
        background: #961C53;
        border-radius: 2px;
        transition: all 0.3s ease;
    }

    /* Center logo */
    .mobile-brand-logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        text-decoration: none;
    }
    .mobile-logo-img {
        height: 40px;
        width: auto;
        max-width: 140px;
        object-fit: contain;
        display: block;
    }
    .mobile-logo-text {
        font-family: "Playfair Display", serif;
        font-size: 17px;
        font-weight: 600;
        color: #961C53;
        letter-spacing: 0.04em;
        white-space: nowrap;
    }

    /* Right icons */
    .mobile-header-icons {
        display: flex;
        align-items: center;
        gap: 14px;
    }
    .mobile-icon {
        color: #961C53;
        font-size: 18px;
        text-decoration: none;
        position: relative;
        display: flex;
        align-items: center;
    }
    .mobile-cart-wrap {
        position: relative;
    }
    .mobile-cart-count {
        position: absolute;
        top: -7px;
        right: -8px;
        background: #D4AF37;
        color: #fff;
        font-size: 9px;
        font-weight: 700;
        border-radius: 50%;
        width: 16px;
        height: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }

    /* ---- MOBILE SEARCH BAR ---- */
    .mobile-search-bar {
        display: block;
        background: #FCFAF6;
        padding: 10px 20px 0;
        position: sticky;
        top: 60px;
        z-index: 998;
    }
    .mobile-search-form {
        display: flex;
        align-items: center;
        gap: 10px;
        /* Only bottom border — no box, no rounded corners */
        border: none;
        border-bottom: 1.5px solid rgba(150, 28, 83,0.22);
        padding-bottom: 9px;
        background: transparent;
    }
    .mobile-search-icon {
        color: #804360;
        font-size: 13px;
        flex-shrink: 0;
        opacity: 0.75;
    }
    .mobile-search-field {
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        outline: none !important;
        -webkit-appearance: none;
        width: 100%;
        font-family: "Plus Jakarta Sans", sans-serif;
        font-size: 13px;
        font-weight: 400;
        color: #961C53;
        padding: 0;
        letter-spacing: 0.01em;
    }
    .mobile-search-field::placeholder {
        color: #B0A8B8;
        font-style: normal;
    }
    /* Thin decorative gold accent line under search */
    .mobile-search-bar::after {
        content: "";
        display: block;
        height: 2px;
        background: linear-gradient(to right, #D4AF37 0%, rgba(212,175,55,0.15) 60%, transparent 100%);
        margin-top: 0;
        opacity: 0.6;
    }
}

/* ===== MOBILE SLIDE-OUT DRAWER ===== */
.mobile-nav-drawer {
    display: block !important;
    position: fixed;
    top: 0;
    left: -100% !important;
    width: min(320px, 85vw);
    height: 100vh;
    background: #FCFAF6;
    z-index: 10000;
    overflow-y: auto;
    transition: left 0.35s cubic-bezier(0.4,0,0.2,1);
    box-shadow: 4px 0 24px rgba(150, 28, 83,0.18);
    padding-bottom: 40px;
}
.mobile-nav-drawer.is-open {
    left: 0 !important;
}
.mobile-nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(20,5,30,0.45);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.mobile-nav-overlay.is-visible {
    display: block !important;
    opacity: 1 !important;
}
.mobile-hamburger {
    position: relative;
    z-index: 10;
}
.mobile-primary-menu .sub-menu,
.mobile-category-menu .sub-menu {
    list-style: none;
    margin: 0;
    padding-left: 16px;
    background: rgba(150, 28, 83,0.03);
}
.mobile-primary-menu .sub-menu a,
.mobile-category-menu .sub-menu a {
    font-size: 13px;
    padding: 10px 24px;
}

/* Drawer header row */
.mobile-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(150, 28, 83,0.1);
    background: #FCFAF6;
    position: sticky;
    top: 0;
    z-index: 1;
}
.mobile-drawer-logo-img {
    height: 38px;
    width: auto;
    object-fit: contain;
}
.mobile-drawer-close {
    background: none;
    border: none;
    font-size: 26px;
    color: #961C53;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
}

/* Drawer primary nav */
.mobile-drawer-nav {
    padding: 16px 0;
}
.mobile-primary-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mobile-primary-menu li a {
    display: block;
    padding: 13px 24px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #961C53;
    text-decoration: none;
    border-bottom: 1px solid rgba(150, 28, 83,0.06);
    transition: color 0.2s, background 0.2s;
}
.mobile-primary-menu li a:hover {
    color: #B8860B;
    background: rgba(150, 28, 83,0.04);
}

/* Drawer category section */
.mobile-drawer-categories {
    padding: 8px 0 0;
}
.mobile-drawer-cat-label {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: #B8860B;
    padding: 12px 24px 8px;
    margin: 0;
    text-transform: uppercase;
}
.mobile-category-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mobile-category-menu li a {
    display: block;
    padding: 11px 24px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #B82368;
    text-decoration: none;
    border-bottom: 1px solid rgba(150, 28, 83,0.05);
    letter-spacing: 0.04em;
    transition: color 0.2s;
}
.mobile-category-menu li a:hover {
    color: #B8860B;
}


/* ===== MOBILE HERO BANNER FIX ===== */
@media (max-width: 768px) {

    /* Fix fouz_hero widget overflow/clipping on mobile */
    .elementor-widget-fouz_hero,
    .elementor-widget-fouz_hero > .elementor-widget-container {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Hero section: adjust height for mobile */
    #rs-hero-slider.rs-hero-section {
        height: 70vh !important;
        min-height: 380px !important;
        max-height: 560px !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    /* Fix the slide overlay padding - this was causing left cutoff */
    #rs-hero-slider .rs-slide-overlay {
        padding: 0 5% 0 5% !important;
        background: linear-gradient(135deg, rgba(59, 7, 30,0.88) 0%, rgba(59, 7, 30,0.55) 60%, rgba(59, 7, 30,0.15) 100%) !important;
        align-items: flex-end !important;
        padding-bottom: 40px !important;
    }

    /* Hero content: full width, no overflow */
    #rs-hero-slider .rs-hero-content {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
    }

    /* Badge: smaller on mobile */
    #rs-hero-slider .rs-hero-badge {
        font-size: 0.65rem !important;
        padding: 4px 12px !important;
        margin-bottom: 10px !important;
        letter-spacing: 1.5px !important;
    }

    /* Title: properly sized and not cut */
    #rs-hero-slider .rs-hero-title {
        font-size: clamp(1.7rem, 7.5vw, 2.4rem) !important;
        line-height: 1.18 !important;
        margin-bottom: 10px !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }

    /* Description: smaller and visible */
    #rs-hero-slider .rs-hero-description {
        font-size: 0.82rem !important;
        line-height: 1.55 !important;
        margin-bottom: 16px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    /* Buttons: stack vertically if needed */
    #rs-hero-slider .rs-hero-actions {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    #rs-hero-slider .rs-primary-btn,
    #rs-hero-slider .rs-secondary-btn {
        font-size: 0.7rem !important;
        padding: 10px 18px !important;
        letter-spacing: 1px !important;
    }

    /* Nav arrows: compact */
    #rs-hero-slider .rs-nav-btn {
        width: 34px !important;
        height: 34px !important;
        font-size: 1.1rem !important;
    }
    #rs-hero-slider .rs-prev { left: 8px !important; }
    #rs-hero-slider .rs-next { right: 8px !important; }
    #rs-hero-slider .rs-indicators { bottom: 14px !important; left: 5% !important; }

    /* FouzStudio hero widget mobile fix */
    .fouz-hero-section,
    .fouz-hero-wrapper,
    [class*="fouz-hero"] {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
    }

    /* Prevent any horizontal scroll from hero */
    body {
        overflow-x: hidden !important;
    }
    #page {
        overflow-x: hidden !important;
    }
    .site-content,
    .ast-container {
        overflow-x: hidden !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Elementor container on mobile - no side overflow */
    .elementor-section,
    .e-container,
    .elementor-container {
        overflow-x: hidden !important;
    }
}

/* Extra small phones */
@media (max-width: 480px) {
    #rs-hero-slider.rs-hero-section {
        height: 65vh !important;
        min-height: 340px !important;
    }
    #rs-hero-slider .rs-slide-overlay {
        padding: 0 4% 32px !important;
    }
    #rs-hero-slider .rs-hero-title {
        font-size: clamp(1.5rem, 8vw, 2rem) !important;
    }
}


/* ===== PREVENT HORIZONTAL SCROLL (hero full-width fix) ===== */
html {
    overflow-x: hidden !important;
}
body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}


/* ===== HERO SECTION FULL WIDTH ===== */
/* Remove Astra/Elementor container constraints from hero section */
[data-id="8c67877"],
[data-id="8c67877"] > .e-con-inner,
[data-id="8c67877"] .elementor-widget-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
.fouz-hero-banner-new {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* ===========================================================================
   MOBILE RESPONSIVE FIXES — Phase 1
   Applied: comprehensive overrides for viewports ≤ 768px
   =========================================================================== */

/* ---- 1. GLOBAL: prevent horizontal scroll caused by stretched sections ---- */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}
#page, .site-content, .ast-container,
.elementor-section, .e-container, .elementor-container {
    overflow-x: hidden !important;
}

/* ---- 2. HERO: fix left-clip caused by Elementor stretched section offset ---- */
/* Elementor stretches sections by shifting left: -(scrollbar-width/2),
   causing overflow. Force the hero wrapper and overlay back to 0,0. */
[data-id="8c67877"] {
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Also ensure the .ast-container does not add side padding on the hero page */
.elementor-page-137 .ast-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
}

@media (max-width: 768px) {

    /* Hero: ensure stretched container does not shift left */
    .elementor-section.elementor-section-stretched {
        left: 0 !important;
        margin-left: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
    }

    /* Hero slider wrapper */
    #rs-hero-slider.rs-hero-section {
        width: 100% !important;
        max-width: 100vw !important;
        overflow: hidden !important;
        left: 0 !important;
        right: 0 !important;
    }

    /* Hero slide overlay — fix left padding so text is NOT clipped */
    #rs-hero-slider .rs-slide-overlay {
        padding: 0 20px 40px 20px !important;
        box-sizing: border-box !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        align-items: flex-end !important;
        background: linear-gradient(
            135deg,
            rgba(59, 7, 30,0.88) 0%,
            rgba(59, 7, 30,0.55) 55%,
            rgba(59, 7, 30,0.12) 100%
        ) !important;
    }

    /* Hero content: full width, not clipped */
    #rs-hero-slider .rs-hero-content {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Hero title: readable size on mobile */
    #rs-hero-slider .rs-hero-title {
        font-size: clamp(1.6rem, 7vw, 2.2rem) !important;
        line-height: 1.18 !important;
        margin-bottom: 10px !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }

    /* Hero description: 2-line clamp */
    #rs-hero-slider .rs-hero-description {
        font-size: 0.82rem !important;
        line-height: 1.55 !important;
        margin-bottom: 16px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    /* Hero buttons: smaller, wrap-friendly */
    #rs-hero-slider .rs-btn-primary,
    #rs-hero-slider .rs-btn-secondary {
        font-size: 0.72rem !important;
        padding: 10px 18px !important;
        letter-spacing: 1px !important;
    }
    #rs-hero-slider .rs-hero-actions {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    /* Nav arrows: compact */
    #rs-hero-slider .rs-nav-btn {
        width: 34px !important;
        height: 34px !important;
        font-size: 1.1rem !important;
    }
    #rs-hero-slider .rs-prev { left: 8px !important; }
    #rs-hero-slider .rs-next { right: 8px !important; }
    #rs-hero-slider .rs-indicators {
        bottom: 14px !important;
        left: 20px !important;
    }

    /* ---- 3. PROVENANCE SECTION: reduce oversized heading ---- */
    /* 'From the weaver's hands to your wardrobe.' set to 64px — reduce for mobile */
    [data-id="prov_ttl"] .elementor-heading-title,
    .elementor-element-prov_ttl .elementor-heading-title {
        font-size: clamp(1.8rem, 8vw, 2.6rem) !important;
        line-height: 1.2 !important;
    }

    /* Provenance section: reduce padding */
    [data-id="sec_prov"],
    .elementor-element-sec_prov {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    /* ---- 4. SECTION SPACING: reduce excess top/bottom gaps on mobile ---- */
    /* Elementor sections often keep desktop padding (80px) on mobile */
    .elementor-section > .elementor-container,
    .e-con > .e-con-inner {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Section headings: reduce size globally on mobile */
    .elementor-widget-heading .elementor-heading-title[class*="elementor-size-xl"],
    .elementor-widget-heading .elementor-heading-title[class*="elementor-size-xxl"] {
        font-size: clamp(1.6rem, 7vw, 2.4rem) !important;
    }

    /* ---- 5. NEWSLETTER FORM: ensure input is visible on mobile ---- */
    .rs-dispatch-newsletter-form form.wpforms-form {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .rs-dispatch-newsletter-form .wpforms-field input[type="email"] {
        border-right: 1px solid #E2DDD5 !important;
        border-radius: 4px !important;
        width: 100% !important;
        display: block !important;
    }
    .rs-dispatch-newsletter-form button.wpforms-submit,
    .rs-dispatch-newsletter-form button.rs-dispatch-submit {
        width: 100% !important;
        border-radius: 4px !important;
        display: block !important;
    }
    .rs-dispatch-newsletter-form .wpforms-field-container {
        width: 100% !important;
    }

    /* ---- 6. CATEGORY CARDS: ensure 2-col on tablet, 1-col on phone ---- */
    .elementor-element-cat_cards {
        gap: 12px !important;
    }

    /* ---- 7. FOOTER: fix spacing ---- */
    .site-footer-custom {
        padding: 40px 20px 24px !important;
    }

} /* end @media 768px */

/* Extra-small phones (< 480px) */
@media (max-width: 480px) {

    #rs-hero-slider.rs-hero-section {
        height: 65vh !important;
        min-height: 340px !important;
    }
    #rs-hero-slider .rs-slide-overlay {
        padding: 0 16px 28px 16px !important;
    }
    #rs-hero-slider .rs-hero-title {
        font-size: clamp(1.4rem, 8vw, 1.9rem) !important;
    }

    [data-id="prov_ttl"] .elementor-heading-title,
    .elementor-element-prov_ttl .elementor-heading-title {
        font-size: clamp(1.5rem, 9vw, 2rem) !important;
    }

} /* end @media 480px */