/*
Theme Name: Framez Custom Theme
Description: Custom WooCommerce theme for Framez.
Author: Your Name
Version: 1.0
*/

/* --- CORE TYPOGRAPHY & RESET --- */
/* --- CUSTOM FRAMEZ STYLES --- */
:root {
    --color-dark: #333333;
    --color-muted: #888888;
}

/* Utilities */
.container { max-width: 1400px; margin: 0 auto; padding: 0 40px; }
.text-center { text-align: center; }
.uppercase { text-transform: uppercase; }
.font-sans { font-family: 'Jost', sans-serif; }
.font-serif { font-family: 'Prata', serif; }
.italic { font-style: italic; }
.tracking-wide { letter-spacing: 0.1em; }
.text-spaced { letter-spacing: 0.2em; }
.fw-light { font-weight: 300; }
.text-xl { font-size: 3rem; }
.text-xxl { font-size: 4rem; }
.pt-100 { padding-top: 100px; }
.pb-100 { padding-bottom: 100px; }
.mt-10 { margin-top: 10px; }
.mb-10 { margin-bottom: 10px; }
.mb-50 { margin-bottom: 50px; }
.flex { display: flex; }
.justify-between { justify-content: space-between; }
.gap-10 { gap: 10px; }
.list-none { list-style: none; padding: 0; margin: 0; }

/* Header */
.transparent-header { position: absolute; top: 0; width: 100%; z-index: 100; padding: 30px 40px; }
.header-container { display: flex; justify-content: space-between; align-items: center; max-width: 1600px; margin: 0 auto; }
.main-navigation ul { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; }
.main-navigation a { text-transform: uppercase; font-family: 'Jost', sans-serif; font-size: 11px; letter-spacing: 1px; color: var(--color-dark); text-decoration: none; }
.header-icons { display: flex; gap: 20px; }

/* Hero */
.hero-section { height: 85vh; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; position: relative; }
.hero-section::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.15); }
.hero-content { position: relative; z-index: 2; color: #fff; }
.hero-content h1 { font-family: 'Jost', sans-serif; font-size: 4vw; font-weight: 300; letter-spacing: 2px; text-shadow: 0 2px 10px rgba(0,0,0,0.2); }
.hero-dots { margin-top: 30px; }
.dot { display: inline-block; width: 8px; height: 8px; border: 1px solid #fff; border-radius: 50%; margin: 0 5px; cursor: pointer; }
.dot.active { background: #fff; }


/* --- EXACT FIGMA "OUR RANGES" STAGGER --- */
.ranges-section {
    width: 100%; /* Forces full width */
    background-color: #f4f4f4; 
    padding: 80px 0 160px 0; 
    position: relative;
}
.ranges-section h2 {
    font-family: 'Prata', serif;
    font-size: clamp(3rem, 5vw, 4.5rem);
    text-align: center;
    color: #000;
    margin-bottom: 0; 
    position: relative;
    z-index: 10;
}

.ranges-staggered-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    align-items: start;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    /* This negative margin pulls the grid UP so the text sits inside the "V" shape */
    margin-top: -30px; 
}

.range-card {
    position: relative;
    display: block;
    border-radius: 12px; /* Rounded corners like the screenshot */
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08); /* Soft drop shadow */
    transition: transform 0.4s ease;
}

.range-card img {
    width: 100%;
    height: 556px; /* Forces all images to be the same vertical rectangle size */
    object-fit: cover;
    display: block;
}

/* --- THE EXACT FIGMA "V" SHAPE CASCADE --- */
.range-card:nth-child(1) { margin-top: 0; }
.range-card:nth-child(2) { margin-top: 140px; }
.range-card:nth-child(3) { margin-top: 280px; } /* Pushed down the most */
.range-card:nth-child(4) { margin-top: 140px; }
.range-card:nth-child(5) { margin-top: 0; }


/* Text overlay styling (if you want the text on the images like the first mockup) */
.range-card::after {
    content: ''; position: absolute; inset: 0;
    background: rgba(0,0,0,0.2); transition: 0.3s; pointer-events: none;
}
.range-card:hover::after { background: rgba(0,0,0,0.4); }
.range-card h4 {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    color: #fff; font-family: 'Jost', sans-serif; font-size: 1.2rem; font-weight: 400;
    z-index: 2; margin: 0; text-align: center; pointer-events: none;
}


/* --- 2. STANDARD IPADS / TABLETS (Exact Desktop Replica) --- */
@media (max-width: 991px) {
    /* Force exactly 5 columns with smaller gaps */
    .ranges-staggered-grid { 
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important; 
        gap: 12px !important; 
        padding: 0 15px !important;
        margin-top: 0 !important;
    }
    
    .range-card { 
        border-radius: 8px !important; 
    }
    

    
    /* The EXACT Proportional "V" Cascade for iPads */
    .range-card:nth-child(1) { margin-top: 0 !important; }
    .range-card:nth-child(2) { margin-top: 70px !important; }
    .range-card:nth-child(3) { margin-top: 140px !important; }
    .range-card:nth-child(4) { margin-top: 70px !important; }
    .range-card:nth-child(5) { margin-top: 0 !important; }
    
    /* Ensures the bottom of the V doesn't get cut off */
    .ranges-section { 
        padding-bottom: 100px !important; 
    }
    
    /* Scale the typography so it fits nicely above the V */
    .ranges-section h2 { 
        font-size: 2.8rem !important; 
        margin-bottom: 20px !important; 
    }
    
    /* Shrink the category text inside the boxes so it doesn't break into two lines */
    .range-card h4 { 
        font-size: 11px !important; 
        letter-spacing: 0 !important; 
    }
}



/* --- MOBILE OVERRIDES (So it doesn't look broken on phones/tablets) --- */
@media (max-width: 1199px) {
    /* 3 columns on tablet */
    .ranges-staggered-grid { grid-template-columns: repeat(3, 1fr); margin-top: 40px; }
    /* Turn off the massive V-shape on smaller screens */
    .range-card:nth-child(1), .range-card:nth-child(2), .range-card:nth-child(3), 
    .range-card:nth-child(4), .range-card:nth-child(5) { margin-top: 0; }
    .ranges-section { padding-bottom: 100px; }
}

@media (max-width: 767px) {
    /* 1 column on phone */
    .ranges-staggered-grid { grid-template-columns: 1fr; }
    .range-card img { height: 160px; }
}


/* --- EXACT "GRIP. TURN. OPEN." (SCALES PERFECTLY ON EVERY DEVICE) --- */
.feature-split {
    background-color: #ffffff;
    padding: 8vw 0; /* Padding shrinks proportionally on mobile */
    overflow: hidden;
    width: 100%;
}

.feature-split-inner {
    display: flex !important;
    flex-direction: row !important; /* FORCES horizontal layout on ALL devices */
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap !important; /* Prevents text from dropping to the next line */
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    gap: 5vw; /* Fluid gap between text and images */
    padding: 0 2vw;
}

/* --- THE HALF-HIDDEN TEXT EFFECT --- */
/* --- THE GRADIENT FADE TEXT EFFECT --- */
.feature-text {
    font-family: 'Prata', serif;
    font-size: 2.5vw; /* Text scales based on screen width */
    font-weight: 400;
    white-space: nowrap; /* Never breaks to second line */
    margin: 0;
    
    /* 1. Create the Gradient (Fades from dark gray at the top to completely transparent at the bottom) */
    background: linear-gradient(to bottom, #888888 30%, rgba(255,255,255,0) 90%);
    
    /* 2. Apply the gradient ONLY to the text */
    -webkit-background-clip: text;
    background-clip: text;
    
    /* 3. Make the actual text color transparent so the background gradient shows through */
    -webkit-text-fill-color: transparent;
    color: transparent; 
}

/* Image container */
.feature-images {
    display: flex !important;
    flex-direction: row !important; /* FORCES images to stay side-by-side */
    gap: 2.5vw;
}

/* Images: Proportional rectangles */
.feature-img {
    width: 18vw; 
    height: 25vw; 
    object-fit: cover;
    border-radius: 1vw; /* Scalable rounded corners */
    box-shadow: 0 1vw 3vw rgba(0,0,0,0.06);
    background: #f4f4f4;
}

/* --- CAP THE MAX SIZE FOR HUGE DESKTOP MONITORS --- */
@media (min-width: 1400px) {
    .feature-split { padding: 120px 0; }
    .feature-split-inner { gap: 70px; }
    .feature-text { font-size: 48px; }
    .feature-images { gap: 35px; }
    .feature-img { width: 250px; height: 350px; border-radius: 16px; box-shadow: 0 15px 40px rgba(0,0,0,0.06); }
}

/* Best Sellers Slider */
.product-slide img { background: #e9e9e9; padding: 20px; border-radius: 8px; mix-blend-mode: multiply; }
.swiper-button-next, .swiper-button-prev { color: var(--color-dark); top: auto; bottom: 0; }


/* --- EXACT FIGMA BEST SELLERS 3D LAYOUT --- */
.best-sellers-section {
    background-color: #ffffff;
    overflow: hidden; 
    width: 100vw; 
    max-width: 100%; 
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

.bestSellersSlider {
    width: 100%;
    padding: 60px 0 20px 0; 
}

/* 1. Forces the exact Landscape Dimensions from the screenshot */
.bs-slide {
    width: 400px !important;  /* Fixed wide width */
    height: 260px !important; /* Fixed shorter height */
}

.bs-card {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.bs-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #f4f4f4;
}

/* --- PILL NAVIGATION BUTTONS (FIGMA MATCH) --- */
.bs-nav-container {
    display: flex;
    justify-content: center;
    margin-top: 50px; /* Pushes it down below the carousel perfectly */
    position: relative;
    z-index: 10;
}

.bs-nav-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 35px; /* Wider spacing between the left and right arrows */
    padding: 10px 22px; /* Perfect pill proportions */
    border: 1px solid #e0e0e0; /* Very delicate, light gray outline */
    border-radius: 50px; 
    background: transparent;
}

.bs-prev, .bs-next {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #999999; /* Light gray arrows */
    display: flex;
    align-items: center;
    padding: 0; /* Removed padding to rely on the gap */
    transition: color 0.3s ease;
    outline: none;
}

/* Arrows turn black on hover for good UX */
.bs-prev:hover, .bs-next:hover {
    color: #000000; 
}

/* --- 1. Dark overlay so white text is always visible --- */
.bs-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.25) !important; /* Static dark tint */
    transition: all 0.3s ease;
    z-index: 5 !important;
    pointer-events: none; /* Allows clicks to pass through to the image */
}

/* Darkens the image slightly more when you hover over it */
.bs-card:hover .bs-overlay {
    background: rgba(0, 0, 0, 0.45) !important;
}

/* --- 2. Centered White Text (Forces it above everything) --- */
.bs-title {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: #ffffff !important; /* Pure white text */
    font-family: 'Jost', sans-serif !important;
    font-size: 1.6rem !important; /* Size from mockup */
    font-weight: 300 !important;
    letter-spacing: 1px !important;
    margin: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
    z-index: 20 !important; /* Forces it to the very top */
    pointer-events: none; /* Prevents text from blocking the link click */
    text-shadow: 0 4px 10px rgba(0,0,0,0.3) !important; /* Soft drop shadow to make it pop */
}

/* Scale text down on phones */
@media (max-width: 767px) {
    .bs-title { font-size: 1.2rem !important; }
}


/* 2. Responsive scaling for smaller screens */
@media (max-width: 1199px) {
    .bs-slide { width: 320px !important; height: 220px !important; }
}
@media (max-width: 767px) {
    .bs-slide { width: 240px !important; height: 180px !important; }
}

/* Footer */
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 2fr; gap: 40px; }
.newsletter-form input { flex: 1; padding: 12px 15px; border: 1px solid #eee; background: #fafafa; font-family: 'Jost', sans-serif; outline: none; }
.newsletter-form button { padding: 12px 25px; border: 1px solid var(--color-dark); background: transparent; cursor: pointer; text-transform: uppercase; font-size: 11px; letter-spacing: 1px; transition: 0.3s; }
.newsletter-form button:hover { background: var(--color-dark); color: #fff; }
.border-top { border-top: 1px solid #eaeaea; }





/* --- BULLETPROOF STICKY HEADER --- */
.site-header { 
    position: fixed !important; /* Forces it to stick */
    top: 0 !important; 
    left: 0 !important; 
    right: 0 !important; 
    z-index: 9999 !important; /* Forces it above sliders and images */
    padding: 25px 0; 
    background-color: rgb(255 255 255 / 45%); 
    transition: all 0.3s ease-in-out !important; 
    box-sizing: border-box !important; 
}

/* When the user scrolls */
.site-header.scrolled {
   background-color: rgb(255 255 255 / 45%) !important;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08) !important; 
    padding: 15px 0 !important; 
}

/* Fixes the header getting hidden under the WordPress Admin Bar */
.admin-bar .site-header {
    top: 32px !important;
}
@media screen and (max-width: 782px) {
    .admin-bar .site-header { top: 46px !important; }
}

/* 2. Fixes the "Icons in the very right corner" issue */
.header-container { 
    display: grid; 
    grid-template-columns: 1fr auto 1fr; 
    align-items: center; 
    max-width: 1400px; /* Limits width so icons don't hit monitor edges */
    margin: 0 auto; /* Centers the whole header */
    padding: 0 40px; /* Adds the safety padding here instead of the full header */
    box-sizing: border-box;
}

/* 3. Keep the rest of your Header Grid layout exactly the same */
.header-left { display: flex; justify-content: flex-end; align-items: center; padding-right: 40px; }
.header-center { display: flex; justify-content: center; }
.site-logo img { height: 35px; }
.header-right { display: flex; justify-content: space-between; align-items: center; padding-left: 40px; }

/* Desktop Nav Typography */
.desktop-nav ul { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; }
.desktop-nav a { text-transform: uppercase; font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 400; letter-spacing: 1px; color: #000; text-decoration: none; transition: 0.3s; }
.desktop-nav a:hover { color: #666; }

/* Icons Container */
.header-icons-wrap { display: flex; align-items: center; gap: 25px; }
.user-icon, .search-icon-btn { color: #000; cursor: pointer; background: transparent; border: none; padding: 0; display: flex; align-items: center; transition: 0.3s; }
.user-icon:hover, .search-icon-btn:hover { color: #666; }

/* Expandable Search Animation */
.header-search { display: flex; align-items: center; }
.search-form { display: flex; align-items: center; }
.search-input { 
    width: 0; opacity: 0; visibility: hidden; 
    padding: 0; border: none; border-bottom: 1px solid #000; 
    background: transparent; color: #000; font-family: 'Jost', sans-serif; 
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); outline: none; 
}
.header-search.active .search-input { width: 200px; opacity: 1; visibility: visible; padding: 5px 10px; margin-right: 15px; }

/* Mobile Menu Toggle (Hidden on Desktop) */
.mobile-menu-btn { display: none; }

/* --- FULLSCREEN MOBILE MENU --- */
.fullscreen-mobile-menu {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
    background: rgba(255, 255, 255, 0.98); z-index: 2000;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transform: translateY(-20px);
    transition: all 0.4s ease;
}
.fullscreen-mobile-menu.active { opacity: 1; visibility: visible; transform: translateY(0); }
.close-mobile-menu { position: absolute; top: 30px; right: 40px; font-size: 40px; background: none; border: none; cursor: pointer; color: #000; }
.mobile-menu-content { text-align: center; }
.mobile-menu-content ul { list-style: none; padding: 0; margin-bottom: 20px; }
.mobile-menu-content li { margin: 15px 0; }
.mobile-menu-content a { font-size: 24px; font-family: 'Jost', sans-serif; text-transform: uppercase; letter-spacing: 2px; color: #000; text-decoration: none; }

/* --- RESPONSIVE LOGIC --- */
@media (max-width: 991px) {
    .desktop-nav { display: none; } /* Hide desktop menus */
    
    /* Reset Grid for Mobile */
    .header-left { justify-content: flex-start; padding-right: 0; }
    .header-right { justify-content: flex-end; padding-left: 0; }
    
    /* Show Hamburger Icon */
    .mobile-menu-btn { display: flex; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; }
    .mobile-menu-btn span { display: block; width: 25px; height: 2px; background: #000; }
}



/* --- HERO SLIDER (1920 x 1100) --- */
.hero-section { 
    width: 100%; 
    height: 1100px; /* Exact height requested */
    max-height: 100vh; /* Prevents it from breaking on smaller laptops */
    position: relative; 
    overflow: hidden; 
}

.hero-slide {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
}

/* Subtle gradient to ensure white text is always readable without making the image dark */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.3) 100%);
    z-index: 1;
}

/* Positions text exactly like the Figma file */
.hero-content {
    position: absolute;
    bottom: 25%; /* Pushes text to the lower area */
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 2;
}

.hero-content h1 {
    font-family: 'Jost', sans-serif;
    font-size: clamp(3rem, 5vw, 5.5rem); /* Scales smoothly on different screens */
    font-weight: 300; /* Thin font like the mockup */
    color: #ffffff;
    letter-spacing: 2px;
    margin: 0;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); /* Soft shadow to separate from background */
}

/* --- SWIPER DOTS (Pagination) --- */
.hero-pagination {
    bottom: 20% !important; /* Sits just below the text */
    z-index: 3 !important;
}

.hero-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: transparent; /* Hollow middle */
    border: 1.5px solid #ffffff; /* White border */
    opacity: 0.8;
    margin: 0 8px !important;
    transition: all 0.3s ease;
}

/* The active dot becomes solid white */
.hero-pagination .swiper-pagination-bullet-active {
    background: #ffffff;
    opacity: 1;
}



/* ==========================================================================
   RESPONSIVE DESIGN (TABLETS, IPAD PRO, MOBILE)
   ========================================================================== */

/* --- Swiper Slider Fallback (Ensures slider works even if CDN is slow) --- */
.heroSwiper { overflow: hidden; width: 100%; position: relative; }
.heroSwiper .swiper-wrapper { display: flex; }
.heroSwiper .swiper-slide { flex-shrink: 0; width: 100%; }

/* --- 1. IPAD PRO & LARGE TABLETS (Max Width: 1199px) --- */
@media (max-width: 1199px) {
    /* Adjust Hero Height */
    .hero-section { height: 60vh !important; min-height: 500px; }
    
    /* Shrink Typography */
    .hero-content h1 { font-size: 4rem; }
    .text-xxl { font-size: 3rem; }
    .text-xl { font-size: 2.5rem; }
    
    /* 5-Column Grid becomes 3-Column Grid */
    .ranges-staggered-grid { grid-template-columns: repeat(3, 1fr); }
    /* Turn off the massive staggered effect so it looks clean on tablets */
    .range-card:nth-child(even) { margin-top: 20px; transform: translateY(0); }
}

/* --- 2. STANDARD IPADS & TABLETS (Max Width: 991px) --- */
@media (max-width: 991px) {
    /* Header padding adjustments */
    .site-header { padding: 15px 0; }
    .site-header.scrolled { padding: 10px 20px; }
    
    /* Hero Content */
    .hero-section { height: 50vh !important; min-height: 400px; }
    .hero-content h1 { font-size: 3rem; }
    
    /* Feature Split Section (Stacks Vertically) */
    .feature-split-inner { flex-direction: column; text-align: center; gap: 20px; }
    
    /* Footer Grid becomes 2 Columns */
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; text-align: center; }
    .footer-widget.links, .footer-widget.newsletter { align-items: center; display: flex; flex-direction: column; }
    .newsletter-form { width: 100%; max-width: 400px; justify-content: center; }
	
/* 1. Force the 3-column grid and reduce outside padding */
    .header-container {
        grid-template-columns: 1fr auto 1fr !important;
        padding: 15px 20px !important; 
    }
    
    /* 2. Remove the heavy desktop side-padding */
    .header-left, .header-right {
        padding: 0 !important;
    }
    
    /* 3. Keep icons close together on small screens */
    .header-icons-wrap {
        display: flex !important;
        gap: 15px !important;
    }

    /* 4. Stop the search bar from pushing the user icon off-screen when clicked */
    .header-search.active .search-input { 
        width: 120px !important; /* Smaller width for mobile */
        margin-right: 10px;
    }
	
}

/* --- 3. MOBILE PHONES (Max Width: 767px) --- */
@media (max-width: 767px) {
    /* Section Paddings */
    .pt-100 { padding-top: 50px; }
    .pb-100 { padding-bottom: 50px; }
    
    /* Typography */
    .hero-content h1 { font-size: 2.5rem; }
    .text-xxl { font-size: 2.2rem; }
    
    /* Ranges Grid becomes 1 Column */
    .ranges-staggered-grid { grid-template-columns: 1fr; gap: 15px; }
    .range-card:nth-child(even) { margin-top: 0; } /* Completely flat grid */
    
    /* Best Sellers */
    .product-slide img { padding: 10px; }
    
    /* Footer becomes 1 Column */
    .footer-grid { grid-template-columns: 1fr; gap: 40px; }
    .footer-bottom { flex-direction: column; gap: 15px; text-align: center; }
}




/* ==========================================================================
   6. CATALOGUE SECTION
   ========================================================================== */
.catalogue-section {
    background-color: #ffffff;
    overflow: hidden;
}

.catalogue-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    max-width: 1000px;
    margin: 0 auto;
    padding-bottom: 80px; /* Space for the right book that drops down */
}

/* Floating Book Styling */
.cat-book {
    display: block;
    transition: transform 0.4s ease;
    border-radius: 4px;
    /* Massive, soft drop shadow to create the 3D floating effect */
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.15), 0 10px 20px rgba(0, 0, 0, 0.05);
}

.cat-book img {
    width: 350px;
    height: auto;
    display: block;
    border-radius: 4px;
}

.cat-book:hover {
    transform: translateY(-10px);
}

/* Positioning the overlapping cascade */
.cat-book-left {
    z-index: 1;
}

.cat-book-right {
    z-index: 2;
    margin-left: 80px; /* Pulls it left over the first book */
    margin-top: 120px;  /* Pushes it down */
}

/* ==========================================================================
   7. TRUSTED BY INDUSTRY LEADERS
   ========================================================================== */
.trusted-section {
    background-color: #ffffff;
    position: relative;
    overflow: hidden;
}

.trusted-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 60px;
}

/* Typography matching the mockup exactly */
.trusted-title {
    font-family: 'Jost', sans-serif;
    font-size: 2.8rem;
    font-weight: 400;
    color: #111;
    margin-bottom: 10px;
    letter-spacing: -0.5px;
}

.trusted-subtitle {
    font-family: 'Jost', sans-serif;
    font-size: 2.2rem;
    font-weight: 300;
    color: #888; /* Lighter thin text */
    margin-bottom: 30px;
}

.trusted-text {
    font-family: 'Jost', sans-serif;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #444;
    max-width: 90%;
    margin-bottom: 40px;
}

.trusted-author strong {
    display: block;
    font-family: 'Jost', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.trusted-author span {
    display: block;
    font-family: 'Jost', sans-serif;
    font-size: 0.8rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 5px;
}

/* Image with Gray Backing Effect */
.trusted-image-wrapper {
    position: relative;
    width: 100%;
}

/* The light gray box behind the image */
.trusted-bg-box {
    position: absolute;
    top: -40px;
    bottom: -40px;
    left: 10%;
    right: -50vw; /* Stretches the gray box off the screen to the right */
    background-color: #f2f2f2;
    z-index: 1;
}

.trusted-img {
    position: relative;
    z-index: 2;
    width: 120%; /* Makes image bleed out of its container */
    max-width: none;
    transform: scale(1.1);
}

/* ==========================================================================
   MOBILE & TABLET RESPONSIVENESS
   ========================================================================== */
@media (max-width: 991px) {
    /* Catalogue Tablets */
    .cat-book img { width: 300px; }
    .cat-book-right { margin-left: -50px; margin-top: 80px; }
    
    /* Trusted Tablets */
    .trusted-grid { grid-template-columns: 1fr; gap: 40px; text-align: center; }
    .trusted-text { max-width: 100%; margin: 0 auto 40px auto; }
    .trusted-bg-box { left: -50vw; top: 20px; bottom: 0; }
    .trusted-img { width: 100%; transform: scale(1); }
}

@media (max-width: 767px) {
    /* Catalogue Phones */
    .catalogue-container { flex-direction: column; align-items: center; padding-bottom: 0; gap: 40px; }
    .cat-book-right { margin-left: 0; margin-top: 0; } /* Removes overlap so they stack cleanly on small phones */
    .cat-book img { width: 100%; max-width: 320px; }
    
    /* Trusted Phones */
    .trusted-title { font-size: 2rem; }
    .trusted-subtitle { font-size: 1.5rem; }
}



/* ==========================================================================
   FOOTER SECTION (Figma Match)
   ========================================================================== */
.site-footer {
    background-color: #ffffff;
    width: 100%;
}

/* --- 1. Top Black Abstract Bar --- */
.footer-black-bar {
    background-color: #000000;
    height: 100px;
    width: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
}

/* Uses standard text styled to look like the abstract F graphic */
.bg-letter {
    color: #ffffff;
    font-family: 'Prata', serif;
    font-size: 260px;
    line-height: 0.6;
    user-select: none;
}
.left-letter { margin-left: 25%; }
.right-letter { margin-right: -20px; }

/* --- 2. Main Footer Layout --- */
.footer-container {
    padding: 80px 40px 40px 40px;
    max-width: 1400px;
    margin: 0 auto;
}

.footer-logo-section {
    margin-bottom: 60px;
}
.footer-logo-section img {
    height: 100%; /* Adjust as needed */
    margin-bottom: 10px;
}
.footer-tagline {
    font-size: 1.1rem;
    color: #000;
}

/* --- 3. The Grid --- */
.footer-main-grid {
    display: grid;
    grid-template-columns: 1.5fr 1.5fr 2fr; /* Allocates more space for the newsletter */
    gap: 40px;
}

.footer-heading {
    font-family: 'Jost', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    color: #888888;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 25px;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-links li {
    margin-bottom: 15px;
}
.footer-links a {
    font-family: 'Jost', sans-serif;
    font-size: 0.85rem;
    color: #111111;
    text-decoration: none;
    transition: color 0.3s ease;
}
.footer-links a:hover {
    color: #888888;
}

/* --- 4. Newsletter Form Styling --- */
.newsletter-label {
    display: block;
    font-family: 'Jost', sans-serif;
    font-size: 0.6rem;
    font-weight: 500;
    color: #333333;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.newsletter-form {
    display: flex;
    gap: 15px;
    align-items: center;
}

.newsletter-input {
    flex: 1;
    background-color: #f4f4f4; /* Very light gray */
    border: 1px solid #e5e5e5;
    border-radius: 8px; /* Rounded corners */
    padding: 12px 15px;
    font-family: 'Jost', sans-serif;
    font-size: 0.9rem;
    color: #333;
    outline: none;
    transition: border 0.3s;
}
.newsletter-input:focus {
    border-color: #000;
}

.newsletter-btn {
    background-color: #ffffff;
    border: 1px solid #000000;
    border-radius: 8px; /* Rounded corners */
    padding: 12px 25px;
    font-family: 'Jost', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    color: #000000;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.newsletter-btn:hover {
    background-color: #000000;
    color: #ffffff;
}

/* --- 5. Bottom Socials & Copyright --- */
.footer-bottom {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-top: 80px;
    padding-top: 30px;
}

.footer-socials {
    display: flex;
    gap: 20px;
}
.footer-socials a {
    color: #666666;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease;
}
.footer-socials a:hover {
    color: #000000;
}

.footer-copyright {
    font-family: 'Jost', sans-serif;
    font-size: 0.7rem;
    color: #999999;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 991px) {
    .footer-main-grid { grid-template-columns: 1fr 1fr; }
    .newsletter-col { grid-column: span 2; margin-top: 20px; }
}

@media (max-width: 767px) {
    .footer-main-grid { grid-template-columns: 1fr; gap: 40px; }
    .newsletter-col { grid-column: span 1; margin-top: 0; }
    .newsletter-form { flex-direction: column; align-items: stretch; }
    .footer-bottom { flex-direction: column; align-items: center; gap: 20px; }
    .left-letter { margin-left: 10%; }
}








/* ==========================================================================
   CATEGORY ARCHIVE PAGE (Figma Match)
   ========================================================================== */
.category-page {
    background-color: #ffffff;
}

/* --- 1. Header Area & Divider --- */
.category-header {
    margin-bottom: 50px;
    border-bottom: 1px solid #eaeaea; /* The subtle line under the title */
    padding-bottom: 20px;
}

.cat-breadcrumbs {
    font-family: 'Jost', sans-serif;
    font-size: 0.75rem;
    color: #333333;
    margin-bottom: 30px;
}
.cat-breadcrumbs a {
    color: #333333;
    text-decoration: none;
    transition: color 0.3s;
}
.cat-breadcrumbs a:hover {
    color: #888888;
}
.cat-breadcrumbs .divider {
    margin: 0 8px;
    color: #999999;
}

.cat-title-search {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.cat-title {
    font-family: 'Jost', sans-serif;
    font-size: 2.8rem;
    font-style: italic; /* Matches the Figma text styling */
    font-weight: 400;
    margin: 0;
    color: #000000;
}

/* --- Search Bar in Header --- */
.cat-search-form {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #666666;
}
.cat-search-input {
    border: none;
    outline: none;
    font-family: 'Jost', sans-serif;
    font-size: 0.75rem;
    color: #333333;
    width: 140px;
    background: transparent;
}
.cat-search-input::placeholder {
    color: #999999;
}

/* --- 2. The 3-Column Product Grid --- */
.custom-products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px 30px; /* 50px gap top/bottom, 30px gap left/right */
}

.cat-product-card {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease;
}

.cat-product-card:hover {
    transform: translateY(-5px); /* Slight lift on hover */
}

.cat-img-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1; /* Forces exact square boxes like screenshot */
    border-radius: 12px; /* Soft rounded corners */
    overflow: hidden;
    background-color: #f7f7f7; /* Light grey backdrop */
    margin-bottom: 18px; /* Space between image and text */
}

.cat-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    mix-blend-mode: multiply; /* Helps images with white backgrounds blend into the gray box */
}

.cat-product-title {
    font-family: 'Jost', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: #000000;
    margin: 0;
}

/* Pagination */
.cat-pagination {
    margin-top: 60px;
    text-align: center;
}

/* --- 3. MOBILE RESPONSIVENESS --- */
@media (max-width: 991px) {
    /* 2 columns on tablets */
    .custom-products-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 20px; }
    .cat-title { font-size: 2.2rem; }
}

@media (max-width: 767px) {
    /* 1 column on phones */
    .custom-products-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
    
    /* Stack the title and search bar */
    .cat-title-search { flex-direction: column; align-items: normal; gap: 20px; }
    .cat-search-form { width: 100%; border-bottom: 1px solid #eaeaea; padding-bottom: 10px; }
    .cat-search-input { width: 100%; }
}



/* ==========================================================================
   SINGLE PRODUCT PAGE (Figma Match)
   ========================================================================== */
.single-product-page { background-color: #ffffff; }

/* --- 1. Main Grid Layout (60% Left / 40% Right) --- */
.s-prod-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    margin-bottom: 0;
}

/* --- 2. Left: Big Image & Overlay --- */
.s-main-img-wrapper {
    position: relative;
    width: 100%;
    background-color: #f6f6f6;
    border-radius: 4px;
    overflow: hidden;
}
.s-main-img-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    mix-blend-mode: multiply; /* Blends white image backgrounds perfectly */
}
.s-main-overlay-text {
    position: absolute;
    bottom: 40px;
    left: 40px;
    color: #000;
}
.s-main-overlay-text h2 {
    font-family: 'Jost', sans-serif;
    font-size: 2.2rem;
    font-weight: 400;
    margin: 0 0 5px 0;
}
.s-main-overlay-text .s-sku {
    font-family: 'Jost', sans-serif;
    font-size: 0.8rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- 3. Right: 2x2 Gallery --- */
.s-gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 40px;
}
.s-gallery-grid img {
    width: 100%;
    aspect-ratio: 1 / 1; /* Forces exact squares */
    object-fit: cover;
    background-color: #f6f6f6;
    border-radius: 4px;
    mix-blend-mode: multiply;
}

/* --- 4. Right: Details & Buttons --- */
.s-attr-title {
    font-family: 'Jost', sans-serif;
    font-size: 2rem;
    font-weight: 400;
    margin: 15px 0 15px 0;
    color: #000;
}
.s-attr-values p {
    font-family: 'Jost', sans-serif;
    font-size: 0.8rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 5px 0;
}
.s-divider {
    border: none;
    border-top: 1px solid #eaeaea;
    margin: 0 0 30px;
}
.s-actions {
    display: flex;
    gap: 15px;
}
.s-btn {
    flex: 1;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 14px 20px;
    border: 1px solid #ccc;
    border-radius: 50px; /* Pill shape */
    background: transparent;
    font-family: 'Jost', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s;
}
.s-btn:hover {
    border-color: #000;
    color: #000;
}

/* --- 5. Finishes Section (Circles) --- */
.s-finishes-section {
    padding-top: 0;
}
.s-finishes-grid {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    margin-top: 30px;
}
.s-finish-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 120px;
}
.s-finish-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%; /* Perfect circles */
    background-color: #f6f6f6;
    overflow: hidden;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.s-finish-circle img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}
.s-finish-name {
    font-family: 'Jost', sans-serif;
    font-size: 0.7rem;
    color: #333;
    font-weight: 500;
	text-transform: capitalize;
}

/* --- 6. MOBILE RESPONSIVENESS --- */
@media (max-width: 991px) {
    .s-prod-grid { grid-template-columns: 1fr; }
    .s-gallery-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; }
    .s-finishes-grid { gap: 20px; justify-content: center; }
}
@media (max-width: 767px) {
    .s-gallery-grid { grid-template-columns: 1fr 1fr; }
    .s-actions { flex-direction: column; }
    .s-main-overlay-text { bottom: 20px; left: 20px; }
    .s-main-overlay-text h2 { font-size: 1.8rem; }
}





/* --- Selectable Sizes --- */
.s-attr-values { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.s-size-btn {
    background: transparent;
    border: 1px solid #ddd;
    border-radius: 40px;
    padding: 8px 16px;
    font-family: 'Jost', sans-serif;
    font-size: 0.8rem;
    color: #666;
    cursor: pointer;
    transition: 0.3s;
}
.s-size-btn:hover, .s-size-btn.active {
    border-color: #000;
    color: #000;
    background: #f9f9f9;
}

/* --- Selectable Finishes --- */
.s-finish-item { cursor: pointer; transition: 0.3s; opacity: 0.6; }
.s-finish-item:hover, .s-finish-item.active { opacity: 1; }
.s-finish-item.active .s-finish-circle { border: 2px solid #000; } /* Ring around active circle */

/* --- INQUIRY MODAL STYLING --- */
.framez-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
    background: rgba(0,0,0,0.6); z-index: 99999;
    display: flex; justify-content: center; align-items: center;
    opacity: 0; visibility: hidden; transition: 0.3s;
}
.framez-modal-overlay.active { opacity: 1; visibility: visible; }
.framez-modal-content {
    background: #fff; padding: 40px; width: 90%; max-width: 500px;
    border-radius: 12px; position: relative;
    font-family: 'Jost', sans-serif;
}
.close-modal {
    position: absolute; top: 20px; right: 20px;
    font-size: 30px; cursor: pointer; line-height: 1;
}
.framez-modal-content h3 { font-size: 1.8rem; margin-top: 0; margin-bottom: 5px; }
.framez-modal-content p { color: #666; font-size: 0.9rem; margin-bottom: 25px; }
.form-group { margin-bottom: 15px; }
.form-group input, .form-group textarea {
    width: 100%; padding: 15px; border: 1px solid #ddd;
    border-radius: 8px; font-family: 'Jost', sans-serif; outline: none;
}
.form-group input:focus, .form-group textarea:focus { border-color: #000; }
.submit-inquiry-btn { width: 100%; background: #000; color: #fff; margin-top: 10px; }
.submit-inquiry-btn:hover { background: #333; color: #fff; }
#form-response-msg { margin-top: 15px; text-align: center; font-weight: 500; }



/* --- 1. NEW FLEXIBLE GRID LAYOUT --- */
.s-product-wrapper {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    column-gap: 40px;
    row-gap: 15px; /* Spaces out Size and Buttons vertically */
    margin-bottom: 80px;
}

/* Desktop Grid Placement */
.sp-main-img { grid-column: 1 / 2; grid-row: 1 / 4; }
.sp-gallery { grid-column: 2 / 3; grid-row: 1 / 2; }
.sp-size { grid-column: 2 / 3; grid-row: 2 / 3; }
.sp-actions { grid-column: 2 / 3; grid-row: 3 / 4; align-self: auto; }
.sp-finishes { grid-column: 1 / 3; grid-row: 4 / 5; padding-top: 0; }


/* --- 6. ADVANCED MOBILE RESPONSIVENESS (Layout Reordering) --- */
@media (max-width: 991px) {
    /* Converts Desktop Grid into a Stacked Column */
    .s-product-wrapper {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    
    /* MAGICAL ORDERING: This dictates exactly where they appear on mobile! */
    .sp-main-img { order: 1; }
    .sp-size { order: 2; margin-top: 10px; }
    .sp-finishes { order: 3; padding-top: 10px; }
    .sp-actions { order: 4; }
    .sp-gallery { order: 5; margin-top: 40px; } /* Forced to the very bottom */
    
    /* Keeps Gallery looking nice at the bottom */
    .s-gallery-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; }
    .s-finishes-grid { justify-content: space-around; }
}

@media (max-width: 767px) {
    .s-gallery-grid { grid-template-columns: 1fr 1fr; }
    .s-actions { flex-direction: column; }
    .s-main-overlay-text { bottom: 20px; left: 20px; }
    .s-main-overlay-text h2 { font-size: 1.8rem; }
}






/* ==========================================================================
   MEGA MENU (2-LEVEL AUTOMATIC COLUMNS)
   ========================================================================== */

/* Header ko fixed rakhna taaki mega menu bahar na bhage */
.site-header { position: fixed !important; }
.desktop-nav ul li.mega-menu { position: static !important; }

/* --- THE MEGA MENU BOX --- */
.desktop-nav li.mega-menu > ul.sub-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important; /* Screen ki full cha चौड़ाई */
    background-color: #ffffff !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08) !important;
    border-top: 1px solid #eaeaea !important;
    padding: 50px 10% !important;
    
    display: none !important; /* Hidden by default */
    z-index: 9999 !important;

    /* MAGIC TRICK: 1 lambi list ko automatically 4 columns mein tod dega */
    column-count: 4 !important;
    column-gap: 50px !important;
}

/* Hover karne par menu show hoga */
.desktop-nav li.mega-menu:hover > ul.sub-menu {
    display: block !important; 
}

/* --- THE LINKS --- */
.desktop-nav li.mega-menu > ul.sub-menu > li {
    list-style: none !important;
    margin-bottom: 20px !important;
    
    /* Important: Taaki koi bhi link aada (half) kat ke agle column mein na jaye */
    break-inside: avoid !important; 
    page-break-inside: avoid !important;
}

.desktop-nav li.mega-menu > ul.sub-menu > li > a {
    font-family: 'Jost', sans-serif !important;
    font-size: 1rem !important;
    color: #555555 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
}

/* Link Hover Effect */
.desktop-nav li.mega-menu > ul.sub-menu > li > a:hover {
    color: #000000 !important;
    padding-left: 8px !important; /* Hover par link halka aage slide hoga */
}

/* --- HOVER GAP FIX (Invisible Bridge) --- */
.desktop-nav li.mega-menu > ul.sub-menu::before {
    content: '';
    position: absolute;
    top: -30px; /* Upar ki taraf bridge banayega */
    left: 0;
    width: 100%;
    height: 30px; /* Gap ko cover karega */
    background: transparent; /* Pura transparent rahega taaki dikhe na */
}

/* Parent LI ko pura clickable area banana */
.desktop-nav ul li {
    padding-bottom: 20px; /* Text ke neeche ka hover area badha dega */
}





/* ==========================================================================
   MOBILE MENU (FIXED LAYOUT, SOLID BACKGROUND & ACCORDION)
   ========================================================================== */

/* 1. Fullscreen Box (Solid White to hide background text) */
.fullscreen-mobile-menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: #ffffff !important; /* 100% Solid White */
    z-index: 999999 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; /* Start from top */
    align-items: stretch !important;
    
    opacity: 0;
    visibility: hidden;
    transform: translateX(100%); 
    transition: all 0.4s ease-in-out;
}

.fullscreen-mobile-menu.active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) !important;
}

/* 2. Close Button */
.close-mobile-menu {
    position: absolute !important;
    top: 20px !important;
    right: 25px !important;
    background: transparent !important;
    border: none !important;
    font-size: 40px !important;
    color: #000000 !important;
    cursor: pointer !important;
    z-index: 100 !important;
}

/* Naya Code: Screen ke bahar jane se rokega */
.mobile-menu-content {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden !important; /* Right side ka scroll band karega */
    padding: 80px 20px 40px 20px !important; /* Padding thodi kam ki hai */
    text-align: left !important;
    box-sizing: border-box !important; /* Width ko screen ke andar lock karega */
}

.mobile-menu-content ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.mobile-menu-content li {
    width: 100%;
    margin: 0 !important;
    border-bottom: 1px solid #f0f0f0 !important; /* Clean separator lines between links */
}

.mobile-menu-content a {
    font-family: 'Jost', sans-serif !important;
    font-size: 1.1rem !important;
    font-weight: 500 !important;
    color: #000000 !important;
    text-decoration: none !important;
    display: block !important;
    padding: 18px 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

/* Naya Code: Icon ko thoda andar khiska dega */
.mobile-menu-content li.menu-item-has-children > a {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-right: 15px !important; /* + Icon ko right screen edge se andar push karega */
    box-sizing: border-box !important;
    width: 100% !important;
}

.mobile-menu-content li.menu-item-has-children > a::after {
    content: '+';
    font-size: 1.8rem;
    font-weight: 300;
    color: #888;
}

.mobile-menu-content li.mobile-expand-active > a::after {
    content: '-';
    color: #000;
}

/* 5. Sub-menu Dropdowns (Hidden by default) */
.mobile-menu-content .sub-menu {
    display: none !important;
    padding: 0 0 15px 15px !important; /* Indent sub-menu to show hierarchy */
    border: none !important;
}

.mobile-menu-content li.mobile-expand-active > .sub-menu {
    display: block !important;
}

.mobile-menu-content .sub-menu li {
    border-bottom: none !important; /* No borders for inner links */
}

.mobile-menu-content .sub-menu a {
    font-size: 0.95rem !important;
    color: #666666 !important;
    padding: 10px 0 !important;
    text-transform: capitalize !important;
    font-weight: 400 !important;
}

/* 6. Dashboard Account Link at bottom */
.mobile-account-link {
    margin-top: 40px !important;
    border-top: 2px solid #000000 !important;
    padding-top: 10px !important;
}




/* ==========================================================================
   ABOUT US PAGE (MAGAZINE/EDITORIAL LAYOUT)
   ========================================================================== */
.about-page {
    background-color: #ffffff;
}

/* Story Split Section */
.about-story-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.story-text p {
    font-family: 'Jost', sans-serif;
    font-size: 1.15rem;
    line-height: 1.8;
    color: #555555;
    margin-bottom: 25px;
}

.story-image {
    position: relative;
}

.story-image .shadow-img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.12); /* Soft luxury shadow */
}

/* Dark Quote Section */
.bg-black { background-color: #000000; }
.text-white { color: #ffffff; }

/* Values Grid Section */
.bg-light { background-color: #f9f9f9; }

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.value-box {
    background: #ffffff;
    padding: 50px 40px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.value-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

.value-number {
    display: block;
    font-size: 3.5rem;
    color: #eaeaea; /* Very light grey number behind/above text */
    line-height: 1;
    margin-bottom: 10px;
}

.value-box h4 {
    font-size: 1.1rem;
    letter-spacing: 1px;
    margin-bottom: 15px;
    color: #111;
}

.value-box p {
    font-family: 'Jost', sans-serif;
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 991px) {
    .about-story-grid { grid-template-columns: 1fr; gap: 50px; }
    .story-text { order: 2; } /* Mobile par image upar, text neeche aayega */
    .story-image { order: 1; }
    .values-grid { grid-template-columns: 1fr 1fr; }
    .about-quote h2 { font-size: 3rem !important; }
}

@media (max-width: 767px) {
    .values-grid { grid-template-columns: 1fr; }
    .about-story-grid .story-text h2 { font-size: 2.5rem !important; }
}



/* ==========================================================================
   CONTACT US PAGE
   ========================================================================== */
.contact-page {
    background-color: #ffffff;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr; /* Form column ko thoda jyada space diya hai */
    gap: 80px;
    align-items: start;
    margin-top: 20px;
}

.contact-info a {
    color: #111;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-info a:hover {
    color: #888888;
}

/* Premium Shadow Box for the Form */
.contact-form-container .form-inner-box {
    background: #ffffff;
    padding: 50px;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.06); /* Soft luxury shadow */
    border: 1px solid #f2f2f2;
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 991px) {
    .contact-grid { 
        grid-template-columns: 1fr; 
        gap: 50px; 
    }
    
    .contact-form-container .form-inner-box { 
        padding: 40px 20px; 
    }
}



/* --- CONTACT FORM ALIGNMENT FIX --- */
.framez-form {
    width: 100% !important;
    box-sizing: border-box !important;
}

.framez-form .form-row {
    width: 100% !important;
    margin-bottom: 20px !important;
    box-sizing: border-box !important;
}

.framez-form input, 
.framez-form textarea, 
.fc-submit-btn { 
    width: 100% !important; 
    max-width: 100% !important; /* Screen ke bahar jane se rokega */
    box-sizing: border-box !important; /* Padding ko width ke andar adjust karega */
}

/* Form ko center karne ke liye extra safety */
.framez-contact-wrapper {
    width: 100% !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box !important;
}



/* ==========================================================================
   FAQ PAGE
   ========================================================================== */
.faq-page { background-color: #ffffff; }

.faq-item {
    border-bottom: 1px solid #eaeaea; /* Light grey separator */
}
.faq-item:first-child {
    border-top: 1px solid #eaeaea;
}

.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent;
    border: none;
    padding: 25px 0;
    cursor: pointer;
    text-align: left;
    font-size: 1.1rem;
    color: #111111;
    font-weight: 500;
    outline: none;
    transition: color 0.3s ease;
}

.faq-question:hover { color: #666666; }

.faq-icon {
    font-size: 2rem;
    font-weight: 300;
    line-height: 1;
    color: #999999;
    transition: transform 0.4s ease, color 0.3s ease;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.faq-answer p {
    margin: 0 0 25px 0;
    font-size: 1rem;
    line-height: 1.7;
    color: #666666;
}

/* Active State (When clicked open) */
.faq-item.active .faq-question { color: #000000; }
.faq-item.active .faq-icon {
    transform: rotate(45deg); /* Turns the '+' into an 'x' */
    color: #000000;
}

/* Mobile Responsiveness */
@media (max-width: 767px) {
    .faq-question { font-size: 1rem; padding: 20px 0; }
    .faq-icon { font-size: 1.5rem; }
}