:root {
    --primary-font: 'Montserrat', sans-serif;
    --serif-font: 'Cormorant Garamond', serif;
    --bg-color: #fefefe;         
    --text-color: #fefefe;        /* Floral White */
    --accent-color: #fefefe;      /* Bone */
    --olive-drab: #565449;        /* Olive Drab */
    --warm-taupe: #A0988A;        /* Warm Taupe */
    --border-color: rgba(216, 207, 188, 0.2); /* Using Semi-transparent Bone */
    --smokey-black: #010100;
}

/* --- Base Reset & Typography --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--primary-font);
    background-color: var(--accent-color);
    color: var(--text-color);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s ease;
}



/* --- Top Utility Bar --- */
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 50px;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 1px;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--smokey-black);
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 10;
}
/* --- Top Utility Bar (Updated for Links) --- */
.top-bar-right {
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.7);
}

.top-bar-right a,
.top-bar-right .top-bar-link {
    cursor: pointer;
    padding: 0 15px;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    transition: color 0.3s ease;
    text-decoration: none;
    color: inherit;
    display: inline-flex;
    align-items: center;
}

.top-bar-right a:last-child {
    border-right: none;
    padding-right: 0;
}

.top-bar-right a:first-child {
    padding-left: 0;
}

.top-bar-right a:hover {
    color: var(--text-color);
}

.top-bar-right a i {
    margin-left: 5px;
    font-size: 9px;
}
.top-bar-left span {
    margin-right: 25px;
    color: rgba(255, 255, 255, 0.7);
}

.top-bar-right {
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.7);
}

.top-bar-right span {
    cursor: pointer;
    padding: 0 15px;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    transition: color 0.3s ease;
}

.top-bar-right span:last-child {
    border-right: none;
    padding-right: 0;
}

.top-bar-right span:first-child {
    padding-left: 0;
}

.top-bar-right span:hover {
    color: var(--text-color);
}

.top-bar-right span i {
    margin-left: 5px;
    font-size: 9px;
}
/* --- Main Navigation Header (Updated) --- */
.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 50px;
    position: absolute;
    top: 46px; /* Sits right below the top-bar initially */
    width: 100%;
    height: 90px;
    z-index: 100; /* Increased to stay above all content */
    background: var(--smokey-black);
    
    /* Smooth transition for when classes swap */
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* --- Sticky Header State with Slide Down Animation --- */
.main-header.sticky {
    position: fixed;
    top: 0;
    left: 0;
    background-color: var(--smokey-black); /* Changes background to smokey-black */
    height: 100px; /* Slightly slimmer height for sticky mode looks cleaner */
    padding: 15px 50px;
     
    /* Elegant slide down animation trigger */
    animation: slideDown 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* Scale down the massive custom logo slightly when header shrinks */
.main-header.sticky .logo-img {
    height: 85px; 
}

/* Keyframe for the slick entrance animation */
@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

.brand-section {
    display: flex;
    align-items: center;
    gap: 30px;
    height: 100%; /* Contained to parent height */
}

.logo {
    position: relative;
    display: flex;
    align-items: center;
}

/* Big Image Logo Overflow Fix */
.logo-img {
    height: 105px;        /* Large custom logo sizing */
    width: auto;          /* Maintain original design ratio */
    display: block;      
    object-fit: contain; 
    position: absolute;   /* Removes it from structural flow */
    top: 50%;
    transform: translateY(-50%); /* Keeps large logo centered on nav line */
    
}

.hamburger-menu {
    font-size: 18px;
    cursor: pointer;
    transition: opacity 0.3s ease;
    margin-left: 230px; /* Pushes hamburger menu over if logo is ultra wide */
}

.hamburger-menu:hover {
    opacity: 0.7;
}

/* --- Find this block in your CSS and update the margin line --- */
.nav-links {
    display: flex;
    list-style: none;
    gap: 30px;
    margin-left: auto; /* Pushes the nav links all the way to the right side */
    margin-right: 40px; /* Optional: Adds a clean gap between nav links and header actions */
}

.nav-links a {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 500;
}

.nav-links a:hover {
    opacity: 0.7;
}
.header-actions {
    display: flex;
    align-items: center;
    gap: 25px;
    font-size: 16px;
}

/* Custom PNG Icon Styles */
.custom-icon {
    width: 26px;       
    height: auto;
    display: block;    
    object-fit: contain;
    /* filter: invert(1); Uncomment this if your icons are black and need to be white */
}

.icon-wrapper {
    position: relative;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.icon-wrapper:hover {
    opacity: 0.7;
}
.badge {
    position: absolute;
    top: -7px;
    right: -12px;
    font-family: var(--primary-font);
    font-size: 9px;
    font-weight: 500;
    color: #ffffff;
    background-color: transparent;  
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: flex !important;  
    align-items: center;
    justify-content: center;
    line-height: 1;
    pointer-events: none;
    box-sizing: border-box;
}
/* --- Clickable Wishlist Wrapper Fixes --- */
a.icon-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
 }

a.icon-wrapper:hover {
    opacity: 0.8;
 }

/* Ensure the badge doesn't block or distort click events */
.badge {
    pointer-events: none;
}

/* ==========================================================================
   HERO SLIDER SHOWCASE (MULTI-SLIDE & AUTO-SLIDE MATRIX)
   ========================================================================== */
/* ==========================================================================
   HERO SLIDER SHOWCASE (WITH MOBILE HOVER LOCK FIX)
   ========================================================================== */

/* Outer Viewport Frame */
.hero-slider {
    position: relative;
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; 
    background-color: var(--smokey-black);
}

/* Individual Slide Container (Absolute Stacked Layers) */
.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    z-index: 0;
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), 
                visibility 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Active Visible Slide State */
.hero-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

/* Slide Background Image */
.hero-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Dark Overlay per Individual Slide */
.hero-slide::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); 
    z-index: 1; 
    pointer-events: none; 
}

/* Slide Content Container & Entrance Animation */
.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 900px;
    padding: 0 20px;
    margin-top: 40px;
    transform: translateY(25px);
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.hero-slide.active .hero-content {
    transform: translateY(0);
}

/* Subtitle & Main Title Styling */
.subtitle {
    font-family: var(--primary-font);
    font-size: 15px;
    letter-spacing: 1.5px;
    margin-bottom: 20px;
    color: var(--text-color);
    font-weight: 400;
}

.main-title {
    font-family: var(--serif-font);
    font-size: 64px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 1px;
    margin-bottom: 45px;
    color: var(--text-color);
}

/* Action Button */
/* Action Button */
.cta-btn {
    display: inline-block;
    background-color: var(--accent-color);
    color: var(--smokey-black);
    padding: 16px 45px;    
    font-family: var(--serif-font);
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    border: 1px solid var(--accent-color);
    cursor: pointer;
    transition: all 0.3s ease;
    -webkit-tap-highlight-color: transparent;
    text-decoration: none; /* Add this line! */
}

/* Only enable hover state on devices that support real hover (desktops) */
@media (hover: hover) and (pointer: fine) {
    .cta-btn:hover {
        background-color: transparent;
        color: var(--text-color);
    }
}

/* --- Pagination Dots Positioning & Animations --- */
.slider-dots {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 10;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    -webkit-tap-highlight-color: transparent;
}

/* Desktop Only Hover Trigger (Prevents Sticky Mobile Touch Scaling) */
@media (hover: hover) and (pointer: fine) {
    .dot:hover {
        background-color: var(--text-color);
        transform: scale(1.2);
    }
}

.dot.active {
    background-color: var(--accent-color, #ffffff);
    width: 42px;
    height: 10px;
    border-radius: 6px;
    border-color: transparent;
}

/* ==========================================================================
   MOBILE & TABLET RESPONSIVE LOCKS
   ========================================================================== */
@media (max-width: 1024px) {
    .main-title { 
        font-size: 40px; 
        margin-bottom: 25px;
    }
    .cta-btn {
        padding: 11px 28px;
        font-size: 13px;
    }
    .slider-dots {
        bottom: 25px;
        gap: 8px;
    }
    .subtitle {
        font-size: 11px;
        letter-spacing: 1.2px;
        margin-bottom: 12px;
        line-height: 1.4;
        padding: 0 10px;
    }
    .dot {
        width: 10px;
        height: 10px;
    }
    .dot.active {
        width: 32px;
        height: 10px;
    }
}

@media (max-width: 600px) {
    .main-title { 
        font-size: 32px; 
        margin-bottom: 20px;
    }
    .subtitle {
        font-size: 10px;
        letter-spacing: 1px;
        margin-bottom: 10px;
    }
    .slider-dots {
        bottom: 20px;
    }
}
/* --- Responsive Design --- */
@media (max-width: 1024px) {
    .nav-links { display: none; }
    .main-title { font-size: 42px; }
    .top-bar { display: none; }
    .slider-arrow { display: none; }
    
    /* 1. Allow the header to wrap content into two rows and auto-adjust height */
    .main-header { 
        top: 0; 
        padding: 15px 20px; 
        flex-wrap: wrap;       /* Allows icons to drop to the next row */
        height: auto;          /* Overrides the fixed 90px height */
        gap: 15px;    
                /* Adds spacing between the two rows */
    }

    /* 2. Left Menu + Next Logo configuration */
    .brand-section {
        flex-direction: row-reverse; /* Flips order: Hamburger comes first, then Logo */
        justify-content: flex-end;
        gap: 15px;
        flex: 1;                 /* Takes up top-row space */
        height: 50px;            /* Keeps structural flow clean */
    }

    /* Reset absolute positioning of logo on mobile so it flows normally next to hamburger */
    .logo-img {
        position: static;
        transform: none;
        height: 85px;    margin-top: 8px;         /* Scales down the logo so it looks crisp on mobile */
    }

    .hamburger-menu {
        margin-left: 0;          /* Removes the huge desktop desktop margin override */
    }

    /* 3. New row underneath for Search, Heart, Cart icons */
    .header-actions {
        width: 100%;             /* Forces the action bar to span the full width and drop down */
        justify-content: flex-end; /* Distributes icons evenly across the bottom row */
        padding-top:10px;
        border-top: 1px solid rgba(255, 255, 255, 0.1); /* Optional: clean divider line between rows */
    }
    
    /* Make sure sticky state behaves nicely with the new multi-row mobile height */
    .main-header.sticky {
        height: auto;
        padding: 10px 20px;
    }
}

/* --- Collections Promo Grid Section --- */
.promo-grid-section {
    padding: 80px 50px;
    background-color: var(--bg-color); 
}

.promo-container {
    display: flex;
    gap: 30px;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

.promo-card {
    position: relative;
    flex: 1;
    height: 450px; /* Locked height mimicking image layout ratio */
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 40px;
}

/* Background image handling with object-fit position tweaks */
.promo-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Specific position crops to match image_6f8417.jpg exactly */
.promo-container .promo-card:nth-child(1) .promo-bg-img { object-position: left center; }
.promo-container .promo-card:nth-child(2) .promo-bg-img { object-position: center center; }
.promo-container .promo-card:nth-child(3) .promo-bg-img { object-position: right center; }

/* Elegant dimming overlay for readable text overlays */
.promo-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.25);
    z-index: 1;
    transition: background-color 0.4s ease;
}

/* Content Stacking */
.promo-content {
    position: relative;
    z-index: 2;
    max-width: 280px;
}

.promo-title {
    font-family: var(--serif-font); /* Elegant Cormorant Garamond style */
    font-size: 32px;
    font-weight: 400;
    line-height: 1.25;
    color: var(--text-color);
    margin-bottom: 20px;
    letter-spacing: 0.5px;
}

.promo-link {
    font-family: var(--primary-font); /* Clean Montserrat text */
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 500;
    color: var(--text-color);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    padding-bottom: 4px;
    transition: all 0.3s ease;
}

/* --- Interactive Effects --- */
.promo-card:hover .promo-bg-img {
    transform: scale(1.04); /* High-end subtle zooming effect */
}

.promo-card:hover::after {
    background-color: rgba(0, 0, 0, 0.4); /* Dims background slightly on hover to elevate titles */
}

.promo-link:hover {
    border-bottom-color: var(--text-color);
    opacity: 1;
}

.promo-link i {
    font-size: 10px;
    transition: transform 0.3s ease;
}

.promo-link:hover i {
    transform: translateX(4px); /* Arrow glides forward smoothly */
}

/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
    .promo-grid-section {
        padding: 50px 20px;
    }
    .promo-container {
        flex-direction: column; /* Stacks vertically effortlessly on smaller screens */
        gap: 20px;
    }
    .promo-card {
        height: 350px;
    }
    .promo-title {
        font-size: 22px;
    }
}



/* --- Shop By Category Section (With Subtle Luxury Background) --- */
.category-section {
    position: relative;
    padding: 80px 50px;
    text-align: center;
    background-image: linear-gradient(rgba(254, 254, 254, 0.92), rgba(254, 254, 254, 0.92)), 
                      url('hero-accessories-linens.webp'); /* <-- Replace with your image path */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll; /* Smooth appearance */
    overflow: hidden;
}

/* Ensure inner elements stay crisp & above the background layer */
.category-section-title,
.category-carousel-wrapper {
    position: relative;
    z-index: 2;
}

.category-section-title {
    font-family: var(--serif-font);
    font-size: 36px;
    font-weight: 600;
    color: var(--smokey-black);
    margin-bottom: 50px;
    letter-spacing: 0.5px;
}

.category-section-title {
    font-family: var(--serif-font);
    font-size: 36px;
    font-weight: 600;
    color: var(--smokey-black);
    margin-bottom: 50px;
    letter-spacing: 0.5px;
}

/* Carousel Container Positioner */
.category-carousel-wrapper {
    position: relative;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 20px; /* Space for the arrows on the absolute outer edge */
}

.category-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    overflow-x: auto; /* Handles overflowing on smaller viewing frames */
    scrollbar-width: none; /* Hidden scrollbars to keep look minimalist */
}

.category-container::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Safari and Chrome */
}

/* Individual Category Items */
.category-item {
    flex: 1;
    min-width: 140px; /* Prevents columns from shrinking into non-circles */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    group: hover;
}

/* Perfect Round Crop Frame */
.category-img-box {
    width: 100%;
    aspect-ratio: 1 / 1; /* Locks container to a perfect square */
    border-radius: 50%; /* Smooth circular mask */
    overflow: hidden;
    margin-bottom: 20px;
    background-color: var(--accent-color); /* Placeholder tone before image loads */
}

.category-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Minimalist Hover Lift Action */
.category-item:hover .category-img {
    transform: scale(1.06);
}

/* Text Stylings */
.category-name {
    font-family: var(--serif-font);
    font-size: 18px;
    font-weight: 500;
    color: var(--smokey-black);
    margin-bottom: 4px;
}

.category-count {
    font-family: var(--primary-font);
    font-size: 12px;
    color: var(--warm-taupe); /* Elegant taupe for non-active metadata */
    letter-spacing: 0.5px;
}

/* --- Round Slide Buttons --- */
.cat-arrow {
    position: absolute;
    top: calc(50% - 30px); /* Centers line alignment perfectly with circle midpoints */
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    z-index: 3;
    color: var(--smokey-black);
    font-size: 12px;
    transition: all 0.3s ease;
}

.cat-arrow:hover {
    background-color: var(--smokey-black);
    color: #ffffff;
}

.cat-arrow-left {
    left: 10px;
}

.cat-arrow-right {
    right: 10px;
}

/* --- Responsiveness Settings --- */
@media (max-width: 992px) {
    .category-section {
        padding: 60px 20px;
    }
    .category-container {
        overflow-x: scroll; /* Allows swipe touch control on tablet screen styles */
        justify-content: flex-start;
        padding-bottom: 10px;
    }
    .category-item {
        flex: 0 0 160px; /* Fixed item size when view becomes compressed */
    }
    .cat-arrow {
        display: none; /* Minimalist clean thumb scrolling rules for mobiles */
    }
    .category-section-title {
    
    font-size: 32px;
    
}
}



/* --- Dual Banner Feature Section --- */
.dual-banner-section {
    padding: 40px 50px 80px 50px; /* Reduced top padding to balance space with category section */
    background-color: var(--bg-color);
}

.dual-banner-container {
    display: flex;
    gap: 30px;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

.banner-card {
    position: relative;
    flex: 1;
    height: 520px; /* Elevated height matching the layout ratio of the image */
    overflow: hidden;
    display: flex;
    align-items: center; /* Centers the content box vertically */
    padding: 60px;       /* Pushes content nicely away from edges */
}

/* Background Image setup with smooth zoom scaling */
.banner-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Left overlay tint so white typography stands out cleanly */
.banner-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.1) 100%);
    z-index: 1;
    transition: background-color 0.4s ease;
}

/* Stacking structural elements over image layers */
.banner-content {
    position: relative;
    z-index: 2;
    max-width: 380px;
}

.banner-title {
    font-family: var(--serif-font);
    font-size: 38px;
    font-weight: 500;
    line-height: 1.3;
    color: #ffffff; /* Explicitly white text overlay as per your image */
    margin-bottom: 25px;
    letter-spacing: 0.5px;
}

.banner-link {
    font-family: var(--primary-font);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 500;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    padding-bottom: 4px;
    transition: all 0.3s ease;
}

/* --- Smooth Transitions and Hovers --- */
.banner-card:hover .banner-bg-img {
    transform: scale(1.03); /* Luxury macro-scale effect */
}

.banner-card:hover::after {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.15) 100%);
}

.banner-link:hover {
    border-bottom-color: #ffffff;
    opacity: 0.85;
}

.banner-link i {
    font-size: 10px;
    transition: transform 0.3s ease;
}

.banner-link:hover i {
    transform: translateX(4px); /* Glides arrow key rightwards */
}

/* --- Mobile / Tablet Configurations --- */
@media (max-width: 992px) {
    .dual-banner-section {
        padding: 20px 20px 60px 20px;
    }
    .dual-banner-container {
        flex-direction: column; /* Collapses nicely into grid row stacks on screens */
        gap: 20px;
    }
    .banner-card {
        height: 400px;
        padding: 40px;
    }
    .banner-title {
        font-size: 22px;
    }
}


/* --- New Products Section --- */
.products-section {
    padding: 60px 50px 80px 50px;
    background-color: var(--bg-color);
    text-align: center;
}

.products-section-title {
    font-family: var(--serif-font);
    font-size: 36px;
    font-weight: 600;
    color: var(--smokey-black);
    margin-bottom: 50px;
    letter-spacing: 0.5px;
}

.products-carousel-wrapper {
    position: relative;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 1px;
}

/* --- Products Container Adjustment --- */
.products-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* Exactly 5 equal columns for PC */
    gap: 30px;
}

/* --- Product Card Fixed PC Width --- */
.product-card {
    display: flex;
    flex-direction: column;
    background: transparent;
    text-align: center;
    position: relative;
    width: 100%;  
}

/* Image container set to crop and match edge proportions */
.product-img-box {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1.15;
    background-color: #f5f5f5;
    overflow: hidden;
    margin-bottom: 25px;
    display: flex; /* Keeps the flex layout intact */
    align-items: center;
    justify-content: center;
    text-decoration: none; /* Removes any default link styling */
}
/* --- Image Link Overlay Fix --- */
.product-img-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    position: relative;
    z-index: 1;
}

/* Ensure images scale & transition properly within the <a> tag */
.product-img-link .product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Stretch title link over the entire card surface */
.product-title-link a.full-card-link::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
}

/* Ensure interactive elements sit above the full-card click layer */
.product-actions-sidebar,
.color-swatches,
.add-to-cart-text-btn {
    position: relative;
    z-index: 10;
}

/* Keep sidebar positioned absolutely over image */
.product-actions-sidebar {
    position: absolute;
}
/* --- Pristine Minimalist Gliding Transition --- */
.product-img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Primary Image Base State */
.product-img:not(.img-hover) {
    position: relative;
    opacity: 1;
    transform: scale(1) translateX(0);
}

/* Secondary Hover Image Base State */
.product-img.img-hover {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    /* Inna thwath poddak scale up wela & right side ekata shift wela layer eka yatin hide wenna */
    transform: scale(1.08) translateX(12px); 
    z-index: 1;
}

/* --- Clean Hover Micro-Animation Triggers --- */
.product-card:hover .product-img:not(.img-hover) {
    opacity: 0;
    transform: scale(0.95) translateX(-12px); /* Main image eka poddak bahi eddi podi glide ekak */
}

.product-card:hover .product-img.img-hover {
    opacity: 1;
    transform: scale(1) translateX(0); /* Second image eka smooth eke fix position ekata enawa */
    z-index: 2;
}

/* --- High-End Product Overlay/Hover Controls --- */
.product-badges {
    position: absolute;
    top: 15px;
    left: 15px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 4;
}

.badge-sale {
    background-color: #ff3b30;
    color: #ffffff;
    font-family: var(--primary-font);
    font-size: 11px;
    font-weight: 500;
    padding: 4px 10px;
    text-transform: uppercase;
}

.badge-new {
    background-color: #ffffff;
    color: var(--smokey-black);
    font-family: var(--primary-font);
    font-size: 11px;
    font-weight: 400;
    padding: 4px 10px;
    border: 1px solid rgba(0,0,0,0.05);
    text-transform: capitalize;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}

.product-actions-sidebar {
    position: absolute;
    top: 15px;
    right: -45px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 5;
    transition: right 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.product-card:hover .product-actions-sidebar {
    right: 15px;
}

/* --- High-End Product Overlay/Hover Controls (White PNG Matrix) --- */
.action-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    padding: 0;
    overflow: hidden;
}

.action-png-icon {
    width: 18px;         
    height: auto;
    display: block;
    object-fit: contain;
    filter: invert(1);   
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.action-icon-btn:hover {
    background-color: var(--smokey-black);
    border-color: var(--smokey-black);
}

.action-icon-btn:hover .action-png-icon {
    filter: invert(0);   
    transform: scale(1.08); 
}

/* --- Metadata Info Structures --- */
.product-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.product-brand {
    font-family: var(--primary-font);
    font-size: 12px;
    color: var(--warm-taupe);
    letter-spacing: 1px;
    text-transform: capitalize;
}

.product-title-link a {
    font-family: var(--serif-font);
    font-size: 16px;
    font-weight: 500;
    color: var(--smokey-black);
    transition: opacity 0.3s ease;
}

.product-title-link a:hover {
    opacity: 0.6;
}

.product-price-box {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 2px;
}

.current-price {
    font-family: var(--primary-font);
    font-size: 14px;
    font-weight: 500;
    color: var(--smokey-black);
}

.old-price {
    font-family: var(--primary-font);
    font-size: 13px;
    font-weight: 400;
    color: var(--warm-taupe);
    text-decoration: line-through;
    opacity: 0.7;
}

.color-swatches {
    display: flex;
    gap: 10px;          
    margin: 6px 0;
    align-items: center;
}

.swatch {
    width: 16px;        
    height: 16px;       
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    transition: transform 0.2s ease;
}

.swatch:hover {
    transform: scale(1.15);
}

.swatch.active::after {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border: 1px solid var(--smokey-black);
    border-radius: 50%;
}

.add-to-cart-text-btn {
    display: block;
    width: 100%;
    background-color: var(--smokey-black);
    color: #ffffff;
    font-family: var(--primary-font);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 14px 20px;
    margin-top: 15px;
    border: 1px solid var(--smokey-black);
    transition: all 0.3s ease;
}

.add-to-cart-text-btn:hover {
    background-color: transparent;
    color: var(--smokey-black);
    opacity: 1;
}

.prod-arrow {
    position: absolute;
    top: calc(50% - 40px);
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    z-index: 5;
    color: var(--smokey-black);
    font-size: 12px;
    transition: all 0.3s ease;
}

.prod-arrow:hover {
    background-color: var(--smokey-black);
    color: #ffffff;
}

.prod-arrow-left { left: -15px; }
.prod-arrow-right { right: -15px; }

/* --- Mobile / Tablet View (Unchanged Exact Code) --- */
@media (max-width: 992px) {
    .products-section { padding: 50px 20px; }
    
    .products-container {
        display: flex; /* Restores flex row layout for mobile horizontal scrolling */
        overflow-x: auto;
        scrollbar-width: none;
        justify-content: flex-start;
    }
    
    .products-container::-webkit-scrollbar { display: none; }
    
    .product-card {
        width: auto;
        flex: 0 0 260px; /* Exact mobile card width */
    }
    
    .prod-arrow { display: none; }
    .product-actions-sidebar { right: 15px; }
    .products-section-title {
    font-family: var(--serif-font);
    font-size: 32px;
    
}
}

/* ==========================================================================
   1.2 ABOUT OUR PRODUCTS SECTION STYLES
   ========================================================================== */
.about-products-section {
    padding: 100px 50px;
    background-color: var(--bg-color);
}

.about-products-section .section-header {
    text-align: center;
    margin-bottom: 60px;
}

.about-products-section .section-main-title {
    font-family: var(--serif-font);
    font-size: 40px;
    font-weight: 600;
    color: var(--smokey-black);
    letter-spacing: 0.5px;
    margin-top: 5px;
}

/* Grid alignment mimicking editorial magazine spreads */
.about-grid-container {
    display: flex;
    gap: 35px;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

.about-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: transparent;
    transition: transform 0.4s ease;
}

/* Image containment window with aspect scaling */
.about-img-box {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1.25; /* Sleek vertical orientation */
    overflow: hidden;
    background-color: #f2f0eb;
    margin-bottom: 25px;
}

.about-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Elegant minimalist visual badges overlaying image frames */
.about-overlay-badge {
    position: absolute;
    bottom: 15px;
    left: 15px;
    background-color: #ffffff;
    color: var(--smokey-black);
    font-family: var(--primary-font);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 5px 12px;
    z-index: 2;
    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
}

/* Typography metadata layout inside details row */
.about-content-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.about-card-title {
    font-family: var(--serif-font);
    font-size: 24px;
    font-weight: 500;
    color: var(--smokey-black);
    margin-bottom: 12px;
}

.about-card-desc {
    font-family: var(--primary-font);
    font-size: 14px;
    line-height: 1.6;
    color: var(--olive-drab);
    font-weight: 300;
    margin-bottom: 18px;
    opacity: 0.9;
}

/* Clean animated action text underline targets */
.about-explore-link {
    font-family: var(--primary-font);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
    color: var(--smokey-black);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid rgba(1, 1, 0, 0.2);
    padding-bottom: 4px;
    transition: all 0.3s ease;
}

/* --- Section Micro-Interaction Hovers --- */
.about-card:hover .about-img {
    transform: scale(1.06);
}

.about-explore-link:hover {
    border-bottom-color: var(--smokey-black);
    gap: 12px;
}

.about-explore-link i {
    font-size: 10px;
    transition: transform 0.3s ease;
}

.about-explore-link:hover i {
    transform: translateX(3px);
}


/* ==========================================================================
   1.3 CONTACT DETAILS & LOCATION FINDER STYLES
   ========================================================================== */
.contact-finder-section {
    padding: 80px 50px 100px 50px;
    background-color: #fcfbfa; /* Slightly warmer variance backdrop */
    border-top: 1px solid var(--border-color);
}

.contact-container-layout {
    display: flex;
    gap: 60px;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    align-items: center;
}

/* Left Content Core Panel */
.contact-info-panel {
    flex: 1.1;
    text-align: left;
}

.company-tagline {
    font-family: var(--primary-font);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--warm-taupe);
    font-weight: 600;
    display: block;
    margin-bottom: 10px;
}

.company-main-name {
    font-family: var(--serif-font);
    font-size: 46px;
    font-weight: 600;
    color: var(--smokey-black);
    line-height: 1.1;
    margin-bottom: 25px;
}

.company-main-name .pvt-ltd {
    font-family: var(--primary-font);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--warm-taupe);
    display: inline-block;
    margin-left: 5px;
    vertical-align: middle;
}

.company-mission-statement {
    font-family: var(--primary-font);
    font-size: 15px;
    line-height: 1.7;
    color: var(--olive-drab);
    font-weight: 300;
    margin-bottom: 30px;
}

.panel-divider {
    border: none;
    border-top: 1px solid rgba(160, 152, 138, 0.15);
    margin: 30px 0;
}

/* Contact Data Rows Formatting Grid */
.info-matrix {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.matrix-row {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.matrix-icon {
    font-size: 18px;
    color: var(--olive-drab);
    width: 25px;
    margin-top: 3px;
    text-align: center;
}

.matrix-data h4 {
    font-family: var(--primary-font);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--warm-taupe);
    margin-bottom: 5px;
    font-weight: 600;
}

.matrix-data p {
    font-family: var(--serif-font);
    font-size: 18px;
    font-weight: 400;
    color: var(--smokey-black);
    line-height: 1.4;
}

.interactive-contact-link {
    transition: color 0.3s ease;
}

.interactive-contact-link:hover {
    color: var(--warm-taupe);
}

.sub-teletext {
    font-family: var(--primary-font) !important;
    font-size: 12px !important;
    color: var(--warm-taupe) !important;
    margin-top: 4px;
    letter-spacing: 0.5px;
}

/* Social Icon Badges Configurations */
.social-connectivity-block h4 {
    font-family: var(--primary-font);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--warm-taupe);
    margin-bottom: 15px;
    font-weight: 600;
}

.social-icon-row {
    display: flex;
    gap: 15px;
}

.social-circle-link {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(86, 84, 73, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--olive-drab);
    font-size: 14px;
    background-color: transparent;
    transition: all 0.3s ease;
}

.social-circle-link:hover {
    background-color: var(--smokey-black);
    color: #ffffff;
    border-color: var(--smokey-black);
    transform: translateY(-3px);
}

/* Right Interactive Maps Layout Panel */
.contact-map-panel {
    flex: 0.9;
    position: relative;
    aspect-ratio: 4 / 3;
    width: 100%;
    box-shadow: 0 15px 40px rgba(0,0,0,0.04);
}

.embedded-google-map {
    width: 100%;
    height: 100%;
    border: none;
    filter: grayscale(1) contrast(1.05) invert(0.03); /* High end gray premium mapping hue styling */
    transition: filter 0.5s ease;
}

.contact-map-panel:hover .embedded-google-map {
    filter: grayscale(0.2) contrast(1); /* Smoothly animate colors on user boundary hover */
}

/* Decorative Framing Accents on Map Panel Edge lines */
.map-corner-accent {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid var(--warm-taupe);
    pointer-events: none;
    z-index: 2;
}

.map-corner-accent.top-left {
    top: -8px;
    left: -8px;
    border-right: none;
    border-bottom: none;
}

.map-corner-accent.bottom-right {
    bottom: -8px;
    right: -8px;
    border-left: none;
    border-top: none;
}


/* ==========================================================================
   RESPONSIVE DESIGN BREAKPOINTS OVERRIDES
   ========================================================================== */
@media (max-width: 992px) {
    /* About products adaptive stack rules */
    .about-products-section {
        padding: 60px 20px;
    }
    .about-grid-container {
        flex-direction: column;
        gap: 40px;
    }
    .about-img-box {
        aspect-ratio: 1 / 1; /* Standard square layout on tablets/mobiles */
    }
    .about-products-section .section-main-title {
        font-size: 32px;
    }

    /* Contact panel layout collapsing rules */
    .contact-finder-section {
        padding: 60px 20px;
    }
    .contact-container-layout {
        flex-direction: column-reverse; /* Map drops nicely directly below text content blocks */
        gap: 50px;
    }
    .company-main-name {
        font-size: 34px;
    }
    .contact-map-panel {
        aspect-ratio: 16 / 10; /* Wider viewports on mobile scroll lanes */
    }
}



/* ==========================================================================
   KITCHENS AND UTILITY STYLES (NO NUMBERS)
   ========================================================================= */
.kitchens-utility-section {
    padding: 120px 50px;
    background-color: var(--bg-color);
    position: relative;
}

/* Master Section Editorial Heading Layout */
.luxury-section-heading {
    max-width: 700px;
    margin-bottom: 90px;
    text-align: left;
}

.section-numeric-tag {
    font-family: var(--primary-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 4px;
    color: var(--warm-taupe);
    display: block;
    margin-bottom: 12px;
}

.section-primary-title {
    font-family: var(--serif-font);
    font-size: 48px;
    font-weight: 600;
    color: var(--smokey-black);
    line-height: 1.1;
    margin-bottom: 20px;
}

.section-editorial-intro {
    font-family: var(--primary-font);
    font-size: 15px;
    line-height: 1.7;
    color: var(--olive-drab);
    font-weight: 300;
}

/* Sub-Stream Layout Containers */
.product-stream-block {
    margin-bottom: 100px;
}

.product-stream-block:last-child {
    margin-bottom: 0;
}

.stream-header-bar {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 45px;
}

.stream-title {
    font-family: var(--serif-font);
    font-size: 26px;
    font-weight: 500;
    color: var(--smokey-black);
    white-space: nowrap;
}

.stream-divider-line {
    flex: 1;
    height: 1px;
    background-color: var(--border-color);
}

/* The Matrix: Style vs Colour Grid Allocation */
.dual-browsing-matrix {
    display: flex;
    gap: 70px;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

.style-browsing-column {
    flex: 1.4;
}

.color-browsing-column {
    flex: 1;
}

.matrix-mini-label {
    font-family: var(--primary-font);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--warm-taupe);
    font-weight: 600;
    display: block;
    margin-bottom: 8px;
}

.matrix-title {
    font-family: var(--serif-font);
    font-size: 30px;
    font-weight: 500;
    color: var(--smokey-black);
    margin-bottom: 35px;
}

/* Style Column Cards Frameworks */
.style-cards-grid {
    display: flex;
    gap: 20px;
    width: 100%;
}

.style-card-item {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.style-img-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    margin-bottom: 18px;
    background-color: #f5f4f0;
}

.style-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.style-hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(1, 1, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
    padding: 20px;
}

.style-action-btn {
    font-family: var(--primary-font);
    font-size: 11px;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border: 1px solid #ffffff;
    padding: 12px 18px;
    text-align: center;
    transform: translateY(10px);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.style-card-item:hover .style-hover-overlay {
    opacity: 1;
}

.style-card-item:hover .style-action-btn {
    transform: translateY(0);
}

.style-card-item:hover .style-main-img {
    transform: scale(1.05);
}

.style-item-name {
    font-family: var(--serif-font);
    font-size: 19px;
    font-weight: 500;
    color: var(--smokey-black);
    margin-bottom: 6px;
}

.style-item-meta {
    font-family: var(--primary-font);
    font-size: 12px;
    line-height: 1.5;
    color: var(--warm-taupe);
    font-weight: 300;
}

.compact-utility-aspect {
    aspect-ratio: 1 / 1 !important;
}

/* Colour Rows Stack Lists Layout */
.palette-browsing-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--border-color);
}

.palette-row-item {
    display: flex;
    align-items: center;
    padding: 24px 0;
    border-bottom: 1px solid var(--border-color);
    position: relative;
    transition: padding-left 0.3s ease;
}

.palette-visual-swatch {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-right: 25px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.04);
}

.palette-text-details {
    flex: 1;
    text-align: left;
    padding-right: 20px;
}

.palette-text-details h5 {
    font-family: var(--serif-font);
    font-size: 18px;
    font-weight: 500;
    color: var(--smokey-black);
    margin-bottom: 4px;
}

.palette-text-details p {
    font-family: var(--primary-font);
    font-size: 12px;
    line-height: 1.4;
    color: var(--olive-drab);
    font-weight: 300;
}

.palette-arrow-link {
    font-size: 16px;
    color: var(--warm-taupe);
    transition: all 0.3s ease;
    padding: 10px;
}

.palette-row-item:hover {
    padding-left: 10px;
}

.palette-row-item:hover .palette-arrow-link {
    color: var(--smokey-black);
    transform: translateX(5px);
}

/* Responsive Breakpoints Override */
@media (max-width: 1200px) {
    .dual-browsing-matrix {
        gap: 40px;
    }
}

@media (max-width: 992px) {
    .kitchens-utility-section {
        padding: 80px 20px;
    }
    
    .section-primary-title {
        font-size: 32px;
    }

    .dual-browsing-matrix {
        flex-direction: column !important;
        gap: 55px;
    }

    .matrix-title {
        margin-bottom: 25px;
        font-size: 26px;
    }

    .style-cards-grid {
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 10px;
    }
    
    .style-cards-grid::-webkit-scrollbar {
        display: none;
    }

    .style-card-item {
        flex: 0 0 240px;
    }
    
    .matrix-reversed {
        flex-direction: column-reverse !important; 
    }
}




/* ==========================================================================
   WARDROBES AND STORAGE UNITS STYLES (NO NUMBERS)
   ========================================================================== */
.wardrobes-storage-section {
    padding: 120px 50px;
    background-color: var(--bg-color);
    position: relative;
    border-top: 1px solid var(--border-color);
}

/* Shares heading, stream block, and card layout styles seamlessly with kitchens */
.wardrobes-storage-section .luxury-section-heading {
    max-width: 700px;
    margin-bottom: 90px;
    text-align: left;
}

.wardrobes-storage-section .section-numeric-tag {
    font-family: var(--primary-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 4px;
    color: var(--warm-taupe);
    display: block;
    margin-bottom: 12px;
}

.wardrobes-storage-section .section-primary-title {
    font-family: var(--serif-font);
    font-size: 48px;
    font-weight: 600;
    color: var(--smokey-black);
    line-height: 1.1;
    margin-bottom: 20px;
}

.wardrobes-storage-section .section-editorial-intro {
    font-family: var(--primary-font);
    font-size: 15px;
    line-height: 1.7;
    color: var(--olive-drab);
    font-weight: 300;
}

/* Desktop Horizontal Mirror Mode for Visual Balance */
@media (min-width: 993px) {
    .matrix-reversed-desktop {
        flex-direction: row-reverse !important;
    }
    
    .matrix-reversed-desktop .style-browsing-column {
        flex: 1.1; /* Perfectly weights the two-column wardrobe layout balance */
    }
}

/* Reusing core UI styles safely with unique section bindings */
.wardrobes-storage-section .dual-browsing-matrix {
    display: flex;
    gap: 70px;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

.wardrobes-storage-section .style-browsing-column {
    flex: 1.4;
}

.wardrobes-storage-section .color-browsing-column {
    flex: 1;
}

.wardrobes-storage-section .matrix-mini-label {
    font-family: var(--primary-font);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--warm-taupe);
    font-weight: 600;
    display: block;
    margin-bottom: 8px;
}

.wardrobes-storage-section .matrix-title {
    font-family: var(--serif-font);
    font-size: 30px;
    font-weight: 500;
    color: var(--smokey-black);
    margin-bottom: 35px;
}

/* Image containment rules tailored for storage frames */
.wardrobes-storage-section .style-cards-grid {
    display: flex;
    gap: 20px;
    width: 100%;
}

.wardrobes-storage-section .style-card-item {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.wardrobes-storage-section .style-img-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    margin-bottom: 18px;
    background-color: #f5f4f0;
}

.wardrobes-storage-section .style-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.wardrobes-storage-section .style-hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(1, 1, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
    padding: 20px;
}

.wardrobes-storage-section .style-action-btn {
    font-family: var(--primary-font);
    font-size: 11px;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border: 1px solid #ffffff;
    padding: 12px 18px;
    text-align: center;
    transform: translateY(10px);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.wardrobes-storage-section .style-card-item:hover .style-hover-overlay {
    opacity: 1;
}

.wardrobes-storage-section .style-card-item:hover .style-action-btn {
    transform: translateY(0);
}

.wardrobes-storage-section .style-card-item:hover .style-main-img {
    transform: scale(1.05);
}

.wardrobes-storage-section .style-item-name {
    font-family: var(--serif-font);
    font-size: 19px;
    font-weight: 500;
    color: var(--smokey-black);
    margin-bottom: 6px;
}

.wardrobes-storage-section .style-item-meta {
    font-family: var(--primary-font);
    font-size: 12px;
    line-height: 1.5;
    color: var(--warm-taupe);
    font-weight: 300;
}

/* Swatch Array Lists Layout */
.wardrobes-storage-section .palette-browsing-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--border-color);
}

.wardrobes-storage-section .palette-row-item {
    display: flex;
    align-items: center;
    padding: 24px 0;
    border-bottom: 1px solid var(--border-color);
    position: relative;
    transition: padding-left 0.3s ease;
}

.wardrobes-storage-section .palette-visual-swatch {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-right: 25px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.04);
}

.wardrobes-storage-section .palette-text-details {
    flex: 1;
    text-align: left;
    padding-right: 20px;
}

.wardrobes-storage-section .palette-text-details h5 {
    font-family: var(--serif-font);
    font-size: 18px;
    font-weight: 500;
    color: var(--smokey-black);
    margin-bottom: 4px;
}

.wardrobes-storage-section .palette-text-details p {
    font-family: var(--primary-font);
    font-size: 12px;
    line-height: 1.4;
    color: var(--olive-drab);
    font-weight: 300;
}

.wardrobes-storage-section .palette-arrow-link {
    font-size: 16px;
    color: var(--warm-taupe);
    transition: all 0.3s ease;
    padding: 10px;
}

.wardrobes-storage-section .palette-row-item:hover {
    padding-left: 10px;
}

.wardrobes-storage-section .palette-row-item:hover .palette-arrow-link {
    color: var(--smokey-black);
    transform: translateX(5px);
}

/* Responsive Overrides (Collapse Stack Patterns) */
@media (max-width: 1200px) {
    .wardrobes-storage-section .dual-browsing-matrix {
        gap: 40px;
    }
}

@media (max-width: 992px) {
    .wardrobes-storage-section {
        padding: 80px 20px;
    }
    
    .wardrobes-storage-section .section-primary-title {
        font-size: 32px;
    }

    .wardrobes-storage-section .dual-browsing-matrix {
        flex-direction: column !important; /* Forces uniform mobile order downstream */
        gap: 55px;
    }

    .wardrobes-storage-section .matrix-title {
        margin-bottom: 25px;
        font-size: 26px;
    }

    .wardrobes-storage-section .style-cards-grid {
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 10px;
    }
    
    .wardrobes-storage-section .style-cards-grid::-webkit-scrollbar {
        display: none;
    }

    .wardrobes-storage-section .style-card-item {
        flex: 0 0 240px;
    }
}



/* ==========================================================================
   ACCESSORIES, LINENS, AND ADD-ONS STYLES
   ========================================================================== */
.accessories-linens-section {
    padding: 120px 50px;
    background-color: var(--bg-color);
    position: relative;
    border-top: 1px solid var(--border-color);
}

/* Base Editorial Alignment Blocks inherited from main architectural templates */
.accessories-linens-section .luxury-section-heading {
    max-width: 700px;
    margin-bottom: 90px;
    text-align: left;
}

.accessories-linens-section .section-numeric-tag {
    font-family: var(--primary-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 4px;
    color: var(--warm-taupe);
    display: block;
    margin-bottom: 12px;
}

.accessories-linens-section .section-primary-title {
    font-family: var(--serif-font);
    font-size: 48px;
    font-weight: 600;
    color: var(--smokey-black);
    line-height: 1.1;
    margin-bottom: 20px;
}

.accessories-linens-section .section-editorial-intro {
    font-family: var(--primary-font);
    font-size: 15px;
    line-height: 1.7;
    color: var(--olive-drab);
    font-weight: 300;
}

/* --- Architectural Accessory 5-Column Grid Matrix --- */
.accessory-showcase-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 25px;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

.accessory-grid-card {
    display: flex;
    flex-direction: column;
    text-align: left;
    transition: transform 0.4s ease;
}

.accessory-img-window {
    width: 100%;
    aspect-ratio: 1 / 1; /* Clean high-end gallery presentation format */
    overflow: hidden;
    background-color: #f6f5f1;
    margin-bottom: 18px;
    position: relative;
}

.accessory-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.accessory-card-title {
    font-family: var(--serif-font);
    font-size: 18px;
    font-weight: 500;
    color: var(--smokey-black);
    margin-bottom: 6px;
}

.accessory-card-specs {
    font-family: var(--primary-font);
    font-size: 12px;
    line-height: 1.5;
    color: var(--warm-taupe);
    font-weight: 300;
}

/* Micro animations on accessory frames */
.accessory-grid-card:hover .accessory-thumb {
    transform: scale(1.06);
}

/* --- Kitchen Linen Interactive Grid System --- */
.linen-detailed-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
}

.linen-item-card {
    display: flex;
    flex-direction: column;
}

.linen-img-box {
    width: 100%;
    aspect-ratio: 4 / 5; /* Striking editorial presentation frame */
    overflow: hidden;
    background-color: #f5f4f0;
    margin-bottom: 16px;
}

.linen-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.linen-item-card:hover .linen-img {
    transform: scale(1.04);
}

.linen-item-card h5 {
    font-family: var(--serif-font);
    font-size: 18px;
    font-weight: 500;
    color: var(--smokey-black);
    margin-bottom: 6px;
}

.linen-item-card p {
    font-family: var(--primary-font);
    font-size: 12px;
    line-height: 1.5;
    color: var(--olive-drab);
    font-weight: 300;
}

/* Replacement Avatar configurations within right-hand display columns */
.linen-mini-avatar-box {
    width: 64px;
    height: 64px;
    border-radius: 4px;
    overflow: hidden;
    background-color: #f5f4f0;
    flex-shrink: 0;
    margin-right: 20px;
}

.linen-mini-avatar-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Sharing Global Design Utilities safely --- */
.accessories-linens-section .dual-browsing-matrix {
    display: flex;
    gap: 70px;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

.accessories-linens-section .style-browsing-column {
    flex: 1.4;
}

.accessories-linens-section .color-browsing-column {
    flex: 1;
}

.accessories-linens-section .matrix-mini-label {
    font-family: var(--primary-font);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--warm-taupe);
    font-weight: 600;
    display: block;
    margin-bottom: 8px;
}

.accessories-linens-section .matrix-title {
    font-family: var(--serif-font);
    font-size: 30px;
    font-weight: 500;
    color: var(--smokey-black);
    margin-bottom: 35px;
}

.accessories-linens-section .palette-browsing-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--border-color);
}

.accessories-linens-section .palette-row-item {
    display: flex;
    align-items: center;
    padding: 24px 0;
    border-bottom: 1px solid var(--border-color);
    position: relative;
    transition: padding-left 0.3s ease;
}

.accessories-linens-section .palette-text-details {
    flex: 1;
    text-align: left;
    padding-right: 20px;
}

.accessories-linens-section .palette-text-details h5 {
    font-family: var(--serif-font);
    font-size: 18px;
    font-weight: 500;
    color: var(--smokey-black);
    margin-bottom: 4px;
}

.accessories-linens-section .palette-text-details p {
    font-family: var(--primary-font);
    font-size: 12px;
    line-height: 1.4;
    color: var(--olive-drab);
    font-weight: 300;
}

.accessories-linens-section .palette-arrow-link {
    font-size: 16px;
    color: var(--warm-taupe);
    transition: all 0.3s ease;
    padding: 10px;
}

.accessories-linens-section .palette-row-item:hover {
    padding-left: 10px;
}

.accessories-linens-section .palette-row-item:hover .palette-arrow-link {
    color: var(--smokey-black);
    transform: translateX(5px);
}

/* ==========================================================================
   RESPONSIVE SCALING ADAPTATIONS (MOBILE BACKUPS)
   ========================================================================== */
@media (max-width: 1200px) {
    .accessories-linens-section .dual-browsing-matrix {
        gap: 35px;
    }
}

@media (max-width: 992px) {
    .accessories-linens-section {
        padding: 80px 20px;
    }
    
    .accessories-linens-section .section-primary-title {
        font-size: 32px;
    }

    /* Collapse Accessory Grid down to responsive multi-row structures on tablets */
    .accessory-showcase-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* Dynamic stream stack adjustments */
    .accessories-linens-section .dual-browsing-matrix {
        flex-direction: column !important;
        gap: 55px;
    }

    .accessories-linens-section .matrix-title {
        margin-bottom: 25px;
        font-size: 26px;
    }

    /* Horizontal touch scroll lanes for linen grid elements on mobile viewports */
    .linen-detailed-grid {
        display: flex !important;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 10px;
    }

    .linen-detailed-grid::-webkit-scrollbar {
        display: none;
    }

    .linen-item-card {
        flex: 0 0 240px; /* Locks cards into a perfect swipe horizontal rhythm */
    }
}

@media (max-width: 480px) {
    /* Hard single vertical collapse for standard micro smartphones */
    .accessory-showcase-grid {
        grid-template-columns: 1fr;
    }
}




/* ==========================================================================
   CONTACT US SECTION STYLES (PREMIUM BLACK INTERACTION MATRICES)
   ========================================================================== */
.luxury-contact-section {
    padding: 140px 50px;
    background-color: #0d0d0d; /* Premium deep architectural obsidian black */
    position: relative;
    border-top: 1px solid #1a1a1a;
    overflow: hidden;
}

/* Master Grid Layout Alignment */
.contact-section-container {
    display: flex;
    gap: 100px;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

.contact-editorial-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.contact-form-panel {
    flex: 1.2;
    background-color: #121212; /* Subtle internal dark contrast frame */
    padding: 60px;
    border: 1px solid #1a1a1a;
}

/* Text Overrides for High-Contrast Premium Black Canvas */
.luxury-section-heading.light-version .section-numeric-tag {
    color: #8c8273; /* Slightly brighter warm gold/taupe balance */
}

.luxury-section-heading.light-version .section-primary-title {
    color: #ffffff; /* Flipped to white for premium dark mode contrast */
}

.luxury-section-heading.light-version .section-editorial-intro {
    color: #a6a6a6; /* Muted stone silver for readability over black */
}

/* Studio Anchors Stack Details */
.studio-meta-grid {
    display: flex;
    flex-direction: column;
    gap: 35px;
    margin-top: 60px;
    text-align: left;
}

.meta-anchor-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.meta-label {
    font-family: var(--primary-font);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #8c8273;
    font-weight: 600;
}

.meta-value {
    font-family: var(--serif-font);
    font-size: 16px;
    color: #e5e5e5;
    font-weight: 300;
    line-height: 1.5;
}

/* Premium Low-Contrast Input Fields Architecture */
.bespoke-contact-form {
    display: flex;
    flex-direction: column;
    gap: 30px;
    text-align: left;
}

.form-row-dual {
    display: flex;
    gap: 25px;
}

.form-row-dual .form-field-group {
    flex: 1;
}

.form-field-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.form-input-label {
    font-family: var(--primary-font);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #a6a6a6;
    font-weight: 400;
}

.form-premium-input {
    width: 100%;
    background-color: #1a1a1a;
    border: 1px solid #262626;
    padding: 16px 20px;
    font-family: var(--primary-font);
    font-size: 14px;
    color: #ffffff;
    border-radius: 0; /* Keeps pristine sharp architectural aesthetics */
    outline: none;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.form-premium-input::placeholder {
    color: #4d4d4d;
}

/* Interactive Input States */
.form-premium-input:focus {
    border-color: #8c8273;
    background-color: #1f1f1f;
}

/* Tailored configurations for select arrows and textareas */
.select-custom-arrow {
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238c8273'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 18px;
    padding-right: 50px;
}

.form-textarea {
    resize: none;
    line-height: 1.6;
}

/* The Luxury Action Framework Button */
.form-action-container {
    margin-top: 10px;
}

.form-submit-luxury-btn {
    background-color: #8c8273;
    border: none;
    color: #ffffff;
    font-family: var(--primary-font);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 18px 40px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.btn-arrow-icon {
    transition: transform 0.3s ease;
}

/* Button Hover State Dynamics */
.form-submit-luxury-btn:hover {
    background-color: #ffffff;
    color: #0d0d0d;
}

.form-submit-luxury-btn:hover .btn-arrow-icon {
    transform: translateX(6px);
}

/* ==========================================================================
   RESPONSIVE SCALING OVERRIDES (MOBILE & TABLET COLLAPSE)
   ========================================================================== */
@media (max-width: 1200px) {
    .contact-section-container {
        gap: 50px;
    }
    
    .contact-form-panel {
        padding: 40px;
    }
}

@media (max-width: 992px) {
    .luxury-contact-section {
        padding: 80px 20px;
    }

    .contact-section-container {
        flex-direction: column;
        gap: 60px;
    }

    .contact-editorial-panel {
        justify-content: vertical;
    }

    .studio-meta-grid {
        margin-top: 40px;
        gap: 25px;
    }

    .contact-form-panel {
        padding: 30px 20px;
    }
}

@media (max-width: 576px) {
    .form-row-dual {
        flex-direction: column;
        gap: 30px;
    }
    
    .form-submit-luxury-btn {
        width: 100%;
        justify-content: center;
    }
}



/* ==========================================================================
   FAQ SECTION STYLES (PREMIUM WHITE ARTISAN CANVAS)
   ========================================================================== */
.luxury-faq-section {
    padding: 140px 50px;
    background-color: #ffffff; /* Crisp white premium architectural canvas */
    position: relative;
    border-top: 1px solid var(--border-color);
}

.faq-section-container {
    display: flex;
    gap: 100px;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

/* Sticky sidebar concept for modern desktop viewing */
.faq-editorial-panel {
    flex: 1;
    text-align: left;
}

@media (min-width: 993px) {
    .faq-editorial-panel {
        position: sticky;
        top: 60px;
        height: max-content;
    }
}

.faq-accordion-panel {
    flex: 1.5;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--border-color);
}

/* Accordion Component Framework */
.faq-accordion-item {
    border-bottom: 1px solid var(--border-color);
    width: 100%;
}

.faq-trigger-btn {
    width: 100%;
    background: none;
    border: none;
    padding: 32px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    cursor: pointer;
    text-align: left;
    outline: none;
    transition: padding-left 0.3s ease;
}

.faq-question {
    font-family: var(--serif-font);
    font-size: 20px;
    font-weight: 500;
    color: var(--smokey-black);
    line-height: 1.4;
}

.faq-status-icon {
    font-size: 14px;
    color: var(--warm-taupe);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}

/* Expanding Content Panel Constraints */
.faq-response-wrapper {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.faq-response-content {
    padding-bottom: 32px;
    max-width: 90%;
    text-align: left;
}

.faq-response-content p {
    font-family: var(--primary-font);
    font-size: 14px;
    line-height: 1.7;
    color: var(--olive-drab);
    font-weight: 300;
}

/* Interactive Accordion Hover & Active JavaScript Bindings Styles */
.faq-accordion-item:hover .faq-trigger-btn {
    padding-left: 8px;
}

.faq-accordion-item:hover .faq-question {
    color: #000000;
}

/* Active Class Dynamic Variants */
.faq-accordion-item.faq-active .faq-status-icon {
    transform: rotate(45deg); /* Flips plus sign neatly into a close variant */
    color: var(--smokey-black);
}

.faq-accordion-item.faq-active .faq-question {
    color: #000000;
}

/* ==========================================================================
   RESPONSIVE SCALING ADAPTATIONS (MOBILE & TABLET COLLAPSE)
   ========================================================================== */
@media (max-width: 1200px) {
    .faq-section-container {
        gap: 50px;
    }
    
    .faq-question {
        font-size: 18px;
    }
}

@media (max-width: 992px) {
    .luxury-faq-section {
        padding: 80px 20px;
    }

    .faq-section-container {
        flex-direction: column;
        gap: 40px;
    }

    .faq-trigger-btn {
        padding: 24px 0;
    }

    .faq-response-content {
        padding-bottom: 24px;
        max-width: 100%;
    }
}




/* ==========================================================================
   EDITORIAL INSIGHTS / BLOG SECTION STYLES (PURE WHITE BACKGROUND)
   ========================================================================== */
.luxury-blog-section {
    padding: 140px 50px;
    background-color: #ffffff; /* Crisp white premium architectural canvas */
    position: relative;
    border-top: 1px solid var(--border-color);
}

/* Reusing your global editorial header layout alignments safely */
.luxury-blog-section .luxury-section-heading {
    max-width: 700px;
    margin-bottom: 80px;
    text-align: left;
}

.luxury-blog-section .section-numeric-tag {
    font-family: var(--primary-font);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 4px;
    color: var(--warm-taupe);
    display: block;
    margin-bottom: 12px;
}

.luxury-blog-section .section-primary-title {
    font-family: var(--serif-font);
    font-size: 48px;
    font-weight: 600;
    color: var(--smokey-black);
    line-height: 1.1;
    margin-bottom: 20px;
}

.luxury-blog-section .section-editorial-intro {
    font-family: var(--primary-font);
    font-size: 15px;
    line-height: 1.7;
    color: var(--olive-drab);
    font-weight: 300;
}

/* Master Grid Structure */
.blog-editorial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

.blog-post-card {
    display: flex;
    flex-direction: column;
    background-color: transparent;
    transition: transform 0.4s ease;
}

/* Editorial Image Card Frames */
.blog-cover-anchor {
    text-decoration: none;
    display: block;
    width: 100%;
}

.blog-image-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 11; /* Clean horizontal widescreen photo format */
    overflow: hidden;
    background-color: #f7f6f2;
    margin-bottom: 24px;
}

.blog-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Subtle Minimalist Float Badges */
.blog-date-badge {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: var(--smokey-black);
    color: #ffffff;
    font-family: var(--primary-font);
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 10px 16px;
    font-weight: 400;
}

/* Text Detail Assemblies */
.blog-text-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    text-align: left;
}

.blog-category-tag {
    font-family: var(--primary-font);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--warm-taupe);
    font-weight: 600;
    margin-bottom: 12px;
    display: block;
}

.blog-entry-title {
    margin-bottom: 14px;
    line-height: 1.3;
}

.blog-entry-title a {
    font-family: var(--serif-font);
    font-size: 23px;
    font-weight: 500;
    color: var(--smokey-black);
    text-decoration: none;
    transition: color 0.3s ease;
}

.blog-entry-title a:hover {
    color: #000000;
}

.blog-entry-excerpt {
    font-family: var(--primary-font);
    font-size: 14px;
    line-height: 1.6;
    color: var(--olive-drab);
    font-weight: 300;
    margin-bottom: 24px;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Neatly clamps long paragraphs to 3 lines max */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Premium Navigation Links on Cards */
.blog-card-footer {
    margin-top: auto;
    padding-top: 10px;
}

.blog-read-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--smokey-black);
    font-family: var(--primary-font);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    transition: color 0.3s ease;
}

.btn-read-icon {
    transition: transform 0.3s ease;
    color: var(--warm-taupe);
}

/* Smooth Interactive Zoom Effects */
.blog-post-card:hover .blog-main-img {
    transform: scale(1.05);
}

.blog-read-more-btn:hover {
    color: #000000;
}

.blog-read-more-btn:hover .btn-read-icon {
    transform: translateX(6px);
    color: var(--smokey-black);
}

/* ==========================================================================
   RESPONSIVE SCALING OVERRIDES (MOBILE & TABLET BREAKPOINTS)
   ========================================================================== */
@media (max-width: 1200px) {
    .blog-editorial-grid {
        gap: 20px;
    }
    
    .blog-entry-title a {
        font-size: 20px;
    }
}

@media (max-width: 992px) {
    .luxury-blog-section {
        padding: 80px 20px;
    }

    .luxury-blog-section .luxury-section-heading {
        margin-bottom: 50px;
    }

    .luxury-blog-section .section-primary-title {
    font-family: var(--serif-font);
    font-size: 32px;
    font-weight: 600;
    color: var(--smokey-black);
    line-height: 1.1;
    margin-bottom: 20px;
}

    /* Collapse from 3 columns down into single block layout layers on tablets */
    .blog-editorial-grid {
        grid-template-columns: 1fr;
        gap: 50px;
        max-width: 600px; /* Perfectly centers readability profile on standard screens */
    }

    .blog-image-frame {
        aspect-ratio: 3 / 2; /* Slightly deeper visual scale for single-column tracking */
        margin-bottom: 18px;
    }
}


/* ==========================================================================
   GLOBAL WEBSITE FOOTER STYLES (PREMIUM DEEP BLACK FRAMEWORK)
   ========================================================================== */
.luxury-site-footer {
    background-color: #0d0d0d; /* Matching our premium deep obsidian black */
    padding: 100px 50px 0 50px;
    border-top: 1px solid #1a1a1a;
    position: relative;
    overflow: hidden;
}

.footer-master-container {
    display: flex;
    justify-content: space-between;
    gap: 80px;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding-bottom: 80px;
}

/* Left Brand Panel Configurations */
.footer-brand-panel {
    flex: 1.2;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    text-align: left;
}

.footer-signature-logo {
    font-family: var(--serif-font);
    font-size: 32px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 2px;
    margin-bottom: 22px;
}

.footer-signature-logo .logo-dot {
    color: #8c8273; /* Elegant studio accent color */
}

.footer-brand-manifesto {
    font-family: var(--primary-font);
    font-size: 14px;
    line-height: 1.6;
    color: #a6a6a6; /* Muted stone silver overlay */
    font-weight: 300;
    margin-bottom: 30px;
}

/* Social Icon Row Framework */
.footer-social-matrix {
    display: flex;
    gap: 18px;
}

.social-icon-link {
    width: 40px;
    height: 40px;
    border: 1px solid #262626;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a6a6a6;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.social-icon-link:hover {
    color: #ffffff;
    border-color: #8c8273;
    background-color: #121212;
    transform: translateY(-3px);
}

/* Right Navigation Columns Matrix Link Stacks */
.footer-links-matrix {
    flex: 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.links-column-stack {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.footer-column-heading {
    font-family: var(--primary-font);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #8c8273; /* Gold/Taupe architectural accent label */
    font-weight: 600;
    margin-bottom: 25px;
}

.footer-navigation-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.footer-navigation-list li a {
    font-family: var(--primary-font);
    font-size: 14px;
    color: #cccccc;
    text-decoration: none;
    font-weight: 300;
    transition: all 0.3s ease;
    display: inline-block;
}

.footer-navigation-list li a:hover {
    color: #ffffff;
    transform: translateX(4px); /* Understated spatial slide out on hover */
}

/* --- Fine Baseline Metadata Strip Architecture --- */
.footer-metadata-baseline {
    border-top: 1px solid #1a1a1a;
    padding: 30px 0;
    width: 100%;
}

.metadata-baseline-inner {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.copyright-notice {
    font-family: var(--primary-font);
    font-size: 12px;
    color: #666666;
    font-weight: 300;
    text-align: left;
}

.legal-links-array {
    display: flex;
    align-items: center;
    gap: 12px;
}

.legal-anchor {
    font-family: var(--primary-font);
    font-size: 12px;
    color: #666666;
    text-decoration: none;
    font-weight: 300;
    transition: color 0.3s ease;
}

.legal-anchor:hover {
    color: #a6a6a6;
}

.legal-divider {
    color: #262626;
    font-size: 11px;
}

/* ==========================================================================
   RESPONSIVE SCALING ADAPTATIONS (MOBILE COLLAPSE OVERRIDES)
   ========================================================================== */
@media (max-width: 992px) {
    .luxury-site-footer {
        padding: 80px 20px 0 20px;
    }

    .footer-master-container {
        flex-direction: column;
        gap: 60px;
        padding-bottom: 60px;
    }

    .footer-brand-panel {
        max-width: 100%;
    }

    .footer-links-matrix {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

@media (max-width: 640px) {
    /* Collapse the link rows fully vertical on compact layout viewports */
    .footer-links-matrix {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .footer-column-heading {
        margin-bottom: 16px;
    }

    .metadata-baseline-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
}



/* ==========================================================================
   GLOBAL ARCHITECTURAL FOOTER STYLES (OBSIDIAN DARK MATRIX)
   ========================================================================== */
.luxury-master-footer {
    background-color: #080808; /* Extremely deep monolithic charcoal tone */
    padding: 100px 50px 40px 50px;
    border-top: 1px solid #141414;
    position: relative;
    width: 100%;
}

/* --- Top Engagement Layer Styling Matrices --- */
.footer-top-engagement-layer {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 80px;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto 60px auto;
}

.footer-brand-anchor-block {
    flex: 1;
    max-width: 460px;
    text-align: left;
}

/* Geometric Logo Structure Rules */
.footer-logo-container {
    margin-bottom: 25px;
}

.footer-logo-link {
    text-decoration: none;
    display: flex;
    flex-direction: column;
}

.logo-main-text {
    font-family: var(--serif-font);
    font-size: 32px;
    font-weight: 600;
    letter-spacing: 3px;
    color: #ffffff;
    line-height: 1;
}

.logo-sub-text {
    font-family: var(--primary-font);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 7px;
    color: #8c8273; /* Warm taupe architectural secondary tag */
    margin-top: 4px;
}

.footer-brand-statement {
    font-family: var(--primary-font);
    font-size: 13px;
    line-height: 1.7;
    color: #808080; /* Clean readable grey balancing white titles */
    font-weight: 300;
}

/* Minimalist Email Submission Matrix Elements */
.footer-newsletter-panel {
    flex: 1;
    max-width: 500px;
    text-align: left;
}

.newsletter-mini-tag {
    font-family: var(--primary-font);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #8c8273;
    font-weight: 600;
    display: block;
    margin-bottom: 10px;
}

.newsletter-title {
    font-family: var(--serif-font);
    font-size: 24px;
    font-weight: 500;
    color: #ffffff;
    margin-bottom: 10px;
}

.newsletter-desc {
    font-family: var(--primary-font);
    font-size: 13px;
    line-height: 1.5;
    color: #808080;
    font-weight: 300;
    margin-bottom: 25px;
}

/* Precision Form Frameworks */
.footer-subscription-form {
    display: flex;
    position: relative;
    width: 100%;
    border-bottom: 1px solid #262626; /* Sleek structural underline design */
}

.newsletter-input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    padding: 14px 50px 14px 0;
    font-family: var(--primary-font);
    font-size: 14px;
    color: #ffffff;
}

.newsletter-input::placeholder {
    color: #404040;
}

/* ==========================================================================
   FOOTER NEWSLETTER SUBMISSION ENGINE (LOADER & STATES OVERRIDE)
   ========================================================================== */

/* Maintain Original Position & Add Flex Centering for Animation/Icons */
.newsletter-submit-btn {
    background: transparent;
    border: none;
    color: #8c8273;
    font-size: 16px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    padding: 10px;
    transition: color 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
    
    /* Ensures Loader & Icons stay perfectly centered */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 40px;
    height: 38px;
    border-radius: 2px;
}

.newsletter-submit-btn:hover {
    color: #ffffff;
    transform: translateY(-50%) translateX(4px);
}

/* Unique 3-White-Dots Loader for Footer Newsletter */
.ux-newsletter-dots-loader {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    width: 100% !important;
    height: 100% !important;
}

.ux-newsletter-dots-loader span {
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background-color: #ffffff !important;
    display: inline-block !important;
    animation: uxNewsletterPulseKeyframes 1.2s infinite ease-in-out both !important;
}

.ux-newsletter-dots-loader span:nth-child(1) { animation-delay: -0.32s !important; }
.ux-newsletter-dots-loader span:nth-child(2) { animation-delay: -0.16s !important; }
.ux-newsletter-dots-loader span:nth-child(3) { animation-delay: 0s !important; }

@keyframes uxNewsletterPulseKeyframes {
    0%, 80%, 100% {
        transform: scale(0.3);
        opacity: 0.2;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Dynamic Button Feedback States (Monochrome Black & White) */
.ux-news-btn-success {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #ffffff !important;
    transform: translateY(-50%) !important;
}

.ux-news-btn-error {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    transform: translateY(-50%) !important;
}

.newsletter-submit-btn:hover {
    color: #ffffff;
    transform: translateY(-50%) translateX(4px);
}

/* --- Internal Structural Components Links --- */
.footer-structural-divider {
    border: none;
    height: 1px;
    background-color: #141414;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

.footer-directory-matrix {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    width: 100%;
    max-width: 1440px;
    margin: 60px auto;
    text-align: left;
}

.directory-column-title {
    font-family: var(--serif-font);
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    margin-bottom: 25px;
    letter-spacing: 0.5px;
}

.directory-link-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.directory-link-list a {
    font-family: var(--primary-font);
    font-size: 13px;
    color: #808080;
    text-decoration: none;
    transition: color 0.3s ease, padding-left 0.3s ease;
}

.directory-link-list a:hover {
    color: #ffffff;
    padding-left: 4px;
}

/* Contact Block Column Adaptations */
.contact-directory-override {
    padding-left: 20px;
    border-left: 1px solid #141414;
}

.directory-contact-details {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-node {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.node-label {
    font-family: var(--primary-font);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #4d4d4d;
    font-weight: 600;
}

.node-data {
    font-family: var(--primary-font);
    font-size: 13px;
    line-height: 1.5;
    color: #808080;
    font-weight: 300;
}

.contact-clickable-anchor {
    color: #808080;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-clickable-anchor:hover {
    color: #ffffff;
}

/* --- Base Compliance And Six Social Streams Panel --- */
.footer-base-compliance-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1440px;
    margin: 40px auto 0 auto;
}

.copyright-text {
    font-family: var(--primary-font);
    font-size: 12px;
    color: #404040;
    font-weight: 300;
    text-align: left;
}

.footer-social-media-links {
    display: flex;
    gap: 24px;
}

.social-stream-icon {
    color: #4d4d4d;
    font-size: 16px;
    transition: color 0.3s ease, transform 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.social-stream-icon:hover {
    color: #8c8273; /* Glow gently with brand accent tone */
    transform: translateY(-2px);
}
/* Precise layout boundaries for the premium image logo */
.footer-logo-container {
    margin-bottom: 25px;
    display: block;
    text-align: left;
}

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

.footer-logo-img {
    height: 100px; /* Edit this value to match your desired branding scale height */
    width: auto;  /* Maintains pristine pixel aspect ratio automatically */
    display: block;
    object-fit: contain;
    transition: opacity 0.3s ease;
}

/* Elegant editorial hover response */
.footer-logo-link:hover .footer-logo-img {
    opacity: 0.85;
}



/* ==========================================================================
   GLOBAL SITE FOOTER RESPONSIVE ARCHITECTURE
   ========================================================================== */

/* --- Desktop Small / Tablet Landscape Viewports --- */
@media (max-width: 1200px) {
    .footer-top-engagement-layer,
    .footer-master-container {
        gap: 40px;
    }
    
    .footer-directory-matrix,
    .footer-links-matrix {
        grid-template-columns: repeat(2, 1fr);
        gap: 50px;
    }
    
    .contact-directory-override {
        padding-left: 0;
        border-left: none;
    }
}

/* --- Tablet Portrait Viewports --- */
@media (max-width: 992px) {
    .luxury-master-footer,
    .luxury-site-footer {
        padding: 80px 30px 40px 30px;
    }

    .footer-top-engagement-layer,
    .footer-master-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
        margin-bottom: 45px;
    }

    .footer-brand-anchor-block, 
    .footer-brand-panel,
    .footer-newsletter-panel {
        max-width: 100%;
    }
}

/* --- High-End Mobile Viewports (Centered & Elegant Thin Aesthetic) --- */
@media (max-width: 600px) {
    /* 1. Global Container Realignment */
    .luxury-master-footer,
    .luxury-site-footer {
        padding: 60px 20px 40px 20px;
        text-align: center;
    }

    /* 2. Brand Block & Subscription Center Engine */
    .footer-top-engagement-layer,
    .footer-master-container {
        align-items: center;
        text-align: center;
        gap: 35px;
        margin-bottom: 40px;
        padding-bottom: 0;
    }

    .footer-brand-anchor-block, 
    .footer-brand-panel,
    .footer-newsletter-panel {
        align-items: center;
        text-align: center;
    }

    /* Elegant Brand Logo Scaling */
    .footer-logo-container {
        text-align: center;
        margin-bottom: 20px;
    }

    .footer-logo-img {
        height: 65px; /* Premium sleek profile ratio reduction */
        margin: 0 auto;
    }

    .footer-brand-statement,
    .footer-brand-manifesto,
    .newsletter-desc {
        text-align: center;
        font-size: 13px;
        line-height: 1.6;
        font-weight: 300;
        color: #808080;
        padding: 0 10px;
    }

    /* Underline Form Alignment Bounds */
    .footer-subscription-form {
        margin: 0 auto;
        max-width: 320px;
    }

    .newsletter-input {
        text-align: center;
        padding: 12px 40px 12px 40px;
    }

    /* 3. Directory Columns Cascade Collapse */
    .footer-directory-matrix,
    .footer-links-matrix {
        grid-template-columns: 1fr; /* True vertical stack single timeline trace */
        gap: 35px;
        margin: 40px auto;
        text-align: center;
    }

    .directory-column,
    .links-column-stack {
        align-items: center;
        text-align: center;
    }

    .directory-column-title,
    .footer-column-heading {
        margin-bottom: 16px;
        font-size: 14px;
        letter-spacing: 1px;
    }

    .directory-link-list,
    .footer-navigation-list,
    .directory-contact-details {
        align-items: center;
        gap: 12px;
    }

    .directory-link-list a,
    .footer-navigation-list li a,
    .node-data {
        font-size: 13px;
        font-weight: 300; /* Keeps font profile ultra crisp and thin */
    }

    .directory-link-list a:hover,
    .footer-navigation-list li a:hover {
        padding-left: 0; /* Clear horizontal left movement on mobile screen layouts */
        opacity: 0.7;
    }

    /* Contact Registry Node Re-balancing */
    .contact-node {
        align-items: center;
        gap: 4px;
    }

    /* 4. Fine Baseline Metadata Strip Architecture */
    .footer-base-compliance-bar,
    .metadata-baseline-inner {
        flex-direction: column-reverse; /* Flips layer placement row layout flow elegantly */
        align-items: center;
        justify-content: center;
        gap: 25px;
        margin: 30px auto 0 auto;
    }

    .copyright-text,
    .copyright-notice {
        text-align: center;
        font-size: 11px;
        color: #555555;
    }

    .footer-social-matrix,
    .footer-social-media-links {
        justify-content: center;
        align-items: center;
        gap: 28px; /* High-grade comfort touch index target parameters */
    }

    .legal-links-array {
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px 12px;
    }
}

/* --- View All Button Section --- */
.view-all-container {
    text-align: center;
    margin-top: 50px; 
}

.view-all-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center; /* Ensures content stays centered on small screens */
    gap: 12px;
    font-family: var(--primary-font);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    color: var(--smokey-black);
    padding: 15px 40px;
    border: 1px solid var(--smokey-black);
    transition: all 0.3s ease;
}

.view-all-btn:hover {
    background-color: var(--smokey-black);
    color: #ffffff;
}

.view-all-btn i {
    font-size: 11px;
    transition: transform 0.3s ease;
}

.view-all-btn:hover i {
    transform: translateX(5px);
}

/* --- Responsive Mobile Adaptation --- */
@media (max-width: 600px) {
    .view-all-container {
        margin-top: 30px; /* Tighten vertical space on mobile */
    }

    .view-all-btn {
        width: 100%;      /* Makes the button span full width for better touch access */
        padding: 14px 20px;
        font-size: 12px;
    }
}


/* ==========================================================================
   NO ITEMS / EMPTY STATE STYLES (PC & MOBILE)
   ========================================================================== */

/* Target default fallback <p> tags inside product containers */
.products-container > p,
.no-products-found {
    grid-column: 1 / -1; /* Spans across all 5 grid columns on PC */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 20px;
    margin: 20px 0;
    background-color: #fcfbfa; /* Soft luxury canvas backdrop */
    border: 1px dashed var(--border-color);
    border-radius: 4px;
    
    /* Typography matching brand aesthetics */
    font-family: var(--serif-font);
    font-size: 20px;
    font-weight: 400;
    color: var(--warm-taupe);
    letter-spacing: 0.5px;
    line-height: 1.5;
    
    /* Transition */
    transition: all 0.3s ease;
}

/* Optional icon element styling if added inside empty state */
.products-container > p::before,
.no-products-found-icon {
    content: '\f07b'; /* FontAwesome folder-open / box-open icon code */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 28px;
    color: var(--warm-taupe);
    margin-bottom: 12px;
    opacity: 0.6;
}

/* Sub-text secondary message if present */
.no-products-found .no-products-subtext {
    font-family: var(--primary-font);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--olive-drab);
    margin-top: 8px;
    font-weight: 400;
    opacity: 0.8;
}

/* --- Mobile & Tablet Responsive Adjustments --- */
@media (max-width: 992px) {
    .products-container > p,
    .no-products-found {
        flex: 0 0 100%; /* Spans full width on flex slider layout */
        min-width: 100%;
        padding: 40px 15px;
        font-size: 17px;
        margin: 10px 0; 
    }

    .products-container > p::before,
    .no-products-found-icon {
        font-size: 22px;
        margin-bottom: 8px;
    }
}

/* ==========================================================================
   STRICT FIXED-SIZE 3-DOTS SPINNER ANIMATION (NO HEIGHT/WIDTH SHIFT)
   ========================================================================== */

/* Base Loading State - Lock pointer & dimensions */
.add-to-cart-trigger.is-loading {
    pointer-events: none !important;
    position: relative !important;
    user-select: none !important;
}

/* 1. Text Button Exact Dimension Lock (Prevent Height Jump) */
.add-to-cart-text-btn {
    height: 45px !important; /* Fixed exact height */
    line-height: 17px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.add-to-cart-text-btn.is-loading {
    padding: 0 20px !important; /* Padding lock */
}

/* 2. Round Sidebar Cart Icon Exact Dimension Lock */
.action-icon-btn {
    width: 36px !important;
    height: 36px !important;
    box-sizing: border-box !important;
}

.action-icon-btn.is-loading {
    background-color: var(--smokey-black) !important; /* Dark background on click */
    border-color: var(--smokey-black) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.action-icon-btn.is-loading .action-png-icon {
    display: none !important; /* Hide image icon */
}

/* 3-White-Dots Container - Centered inside locked height */
.btn-dots-loader {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    width: 100% !important;
    height: 100% !important;
}

/* White Dots Styling */
.btn-dots-loader span {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background-color: #ffffff !important; /* Pure white dots */
    display: inline-block !important;
    animation: dotPulse 1.2s infinite ease-in-out both !important;
}

.btn-dots-loader span:nth-child(1) { animation-delay: -0.32s !important; }
.btn-dots-loader span:nth-child(2) { animation-delay: -0.16s !important; }
.btn-dots-loader span:nth-child(3) { animation-delay: 0s !important; }

@keyframes dotPulse {
    0%, 80%, 100% {
        transform: scale(0.3);
        opacity: 0.2;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ==========================================================================
   CART DRAWER ACTION BUTTONS LOADING STATES
   ========================================================================== */

/* Lock dimensions and disable double-clicking */
.cart-checkout-master-btn.is-loading,
.cart-view-bag-secondary-btn.is-loading {
    pointer-events: none !important;
    position: relative !important;
    user-select: none !important;
    height: 50px !important; /* Locks exact height */
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Proceed To Checkout loading background */
.cart-checkout-master-btn.is-loading {
    background-color: var(--smokey-black, #010100) !important;
    border-color: var(--smokey-black, #010100) !important;
    color: transparent !important;
}

/* View Complete Bag loading background */
.cart-view-bag-secondary-btn.is-loading {
    background-color: var(--smokey-black, #010100) !important;
    border-color: var(--smokey-black, #010100) !important;
    color: transparent !important;
}

/* Dots container centered overlay */
.cart-checkout-master-btn.is-loading .btn-dots-loader,
.cart-view-bag-secondary-btn.is-loading .btn-dots-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}

/* White Dots Styling */
.cart-checkout-master-btn.is-loading .btn-dots-loader span,
.cart-view-bag-secondary-btn.is-loading .btn-dots-loader span {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background-color: #ffffff !important;
    display: inline-block !important;
    animation: dotPulse 1.2s infinite ease-in-out both !important;
}

.cart-checkout-master-btn.is-loading .btn-dots-loader span:nth-child(1),
.cart-view-bag-secondary-btn.is-loading .btn-dots-loader span:nth-child(1) { 
    animation-delay: -0.32s !important; 
}

.cart-checkout-master-btn.is-loading .btn-dots-loader span:nth-child(2),
.cart-view-bag-secondary-btn.is-loading .btn-dots-loader span:nth-child(2) { 
    animation-delay: -0.16s !important; 
}

.cart-checkout-master-btn.is-loading .btn-dots-loader span:nth-child(3),
.cart-view-bag-secondary-btn.is-loading .btn-dots-loader span:nth-child(3) { 
    animation-delay: 0s !important; 
}

/* ==========================================================================
   MOBILE MODE FIXES & DISABLE BUTTON HOVER EFFECTS ON TOUCH/MOBILE
   ========================================================================== */
@media (max-width: 992px) {
    /* Prevent JS inline width locking from breaking mobile responsive 100% full width */
    .add-to-cart-text-btn {
        width: 100% !important;
    }

    /* Disable hover background changes & transformations on touch screens */
    .add-to-cart-text-btn:hover {
        background-color: var(--smokey-black) !important;
        color: #ffffff !important;
        opacity: 1 !important;
    }

    .action-icon-btn:hover {
        background-color: #ffffff !important;
        border-color: rgba(0, 0, 0, 0.06) !important;
    }

    .action-icon-btn:hover .action-png-icon {
        filter: invert(1) !important;
        transform: none !important;
    }

    /* Keep active dark background during loading state on mobile */
    .action-icon-btn.is-loading {
        background-color: var(--smokey-black) !important;
        border-color: var(--smokey-black) !important;
    }
}

/* ==========================================================================
   WISHLIST INTERACTIVE STATES & ANIMATIONS
   ========================================================================== */

/* Standard Wishlist Button Transition Baseline */
.action-icon-btn.add-to-wishlist-trigger {
    position: relative;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), 
                background-color 0.3s ease, 
                border-color 0.3s ease;
}

/* Hover effect on wishlist button */
.action-icon-btn.add-to-wishlist-trigger:hover {
    transform: scale(1.1);
}

/* Active Wishlist State (Saved in LocalStorage) */
.action-icon-btn.add-to-wishlist-trigger.wishlist-active {
    background-color: var(--warm-taupe, #c5a880) !important; /* Premium brand accent color */
    border-color: var(--warm-taupe, #c5a880) !important;
    animation: wishlistHeartPop 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Turn PNG Icon White when Active */
.action-icon-btn.add-to-wishlist-trigger.wishlist-active .action-png-icon {
    filter: brightness(0) invert(1) !important; /* Converts black/dark icon to solid white */
    transform: scale(1.05);
}

/* Click / Touch Bounce Animation */
@keyframes wishlistHeartPop {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.25) rotate(-6deg);
    }
    75% {
        transform: scale(0.95) rotate(3deg);
    }
    100% {
        transform: scale(1);
    }
}

/* Optional SVG / FontAwesome Heart Icon (If using SVG or Icon font instead of PNG) */
.action-icon-btn.add-to-wishlist-trigger.wishlist-active i.fa-heart,
.action-icon-btn.add-to-wishlist-trigger.wishlist-active svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Processing State Indicator Lock */
.action-icon-btn.add-to-wishlist-trigger.is-processing {
    pointer-events: none;
    opacity: 0.8;
}

/* ==========================================================================
   IMAGE EXPAND MODAL STYLES (FULL MOBILE RESPONSIVE + PNG ICON EDITION)
   ========================================================================== */
.image-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    width: 100dvw;
    height: 100vh;
    height: 100dvh;
    background-color: rgba(10, 10, 10, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 15px;
    box-sizing: border-box;
     opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s cubic-bezier(0.25, 1, 0.5, 1), 
                visibility 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.image-modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.image-modal-container {
    position: relative;
    width: 100%;
    max-width: 92vw;
    max-height: 88dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: auto;
}

/* Glassmorphism Floating Close Button Container */
.image-modal-close {
    position: absolute;
    top: -48px;
    right: 0;
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 10;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

/* PNG Close Icon Styling */
.modal-close-png-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    display: block;
    /* Flips black PNG icons to clean white for high contrast over dark overlay */
    filter: brightness(0) invert(1);
    transition: transform 0.25s ease;
}

.image-modal-close:hover,
.image-modal-close:focus-visible {
    background: #070707; /* Accent gold tone */
    border-color: #050505;
    transform: scale(1.1);
}

.image-modal-close:hover .modal-close-png-icon {
    transform: rotate(90deg); /* Smooth luxury rotation interaction */
}

.image-modal-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    transform: scale(0.92);
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.image-modal-overlay.is-open .image-modal-content {
    transform: scale(1);
}

.expanded-img {
    max-width: 100%;
    max-height: 72dvh;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.65);
    user-select: none;
    -webkit-user-drag: none;
}

.expanded-caption {
    margin-top: 14px;
    color: #e5e5e5;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-align: center;
    line-height: 1.35;
    max-width: 90%;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   MOBILE RESPONSIVE BREAKPOINTS
   ========================================================================== */
@media screen and (max-width: 768px) {
    .image-modal-overlay {
        padding: 15px 10px;
    }

    .image-modal-container {
        max-width: 96vw;
        max-height: 90dvh;
    }

    /* Reposition close button inside modal top-right corner on small viewports */
    .image-modal-close {
        top: 10px;
        right: 10px;
        width: 44px; /* Optimal mobile touch target */
        height: 44px;
        background: rgba(10, 10, 10, 0.65);
        border: 1px solid rgba(255, 255, 255, 0.25);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    }

    .modal-close-png-icon {
        width: 20px;
        height: 20px;
    }

    .expanded-img {
        max-height: 75dvh;
        border-radius: 4px;
    }

    .expanded-caption {
        margin-top: 12px;
        font-size: 1.05rem;
        letter-spacing: 0.3px;
    }
}

@media screen and (max-width: 480px) {
    .expanded-img {
        max-height: 70dvh;
    }
    
    .expanded-caption {
        font-size: 0.98rem;
    }
}