/*
 Theme Name:   Mermoz Child
 Template:     storefront
*/

/* =========================================
   1. GLOBAL VARIABLES (The "Config")
   ========================================= */
:root {
    --color-primary: #FE534E;
    --color-text-main: #333333;
    --color-text-light: #555555;
}

/* --- GLOBAL BODY BACKGROUND --- */
body {
    background-color: #F3F3F3 !important; /* Forces the grey background */
}

/* Optional: Ensure the main wrapper doesn't force white */
#page {
    background-color: transparent !important;
}

.col-full {
    max-width: 85dvw !important;
}

.btn-ofertas a {
    display: flex !important;
}

.hero-col-main {
    width: 100% !important;
}

.mermoz-wrapper {
    width: 100%;
    max-width: 85dvw;
    margin: 0 auto;
    /*padding: 0 15px;*/
    box-sizing: border-box;
}

/* --- 1. TOP BAR --- */
.custom-top-bar {
    background-color: #e5e5e5;
    color: #333;
    text-align: center;
    padding: 8px 0;
    font-size: 12px;
    font-weight: 500;
    text-decoration: underline;
    width: 100%;
}

/* --- 2. MAIN HEADER (Flex Container) --- */
.custom-mermoz-header {
    background: #fff;
    padding: 15px 0;
    width: 100%;
}

.header-flex-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0; /* We control spacing via flex-basis */
}

/* --- SECTION A: LOGO (25dvw) --- */
.custom-logo-area {
    flex-basis: 25dvw;
    max-width: 25dvw;
    display: flex;
    justify-content: flex-start; /* Align logo to the start of its box */
    padding-left: 20px;
}

.custom-logo-area img {
    max-width: 150px; /* Strict limit */
    height: auto;
    display: block;
}

/* --- SECTION B: SEARCH (50dvw) --- */
.custom-search-area {
    flex-basis: 50dvw;
    max-width: 50dvw;
    display: flex;
    justify-content: center;
    padding: 0 20px;
}

.custom-search-area form {
    width: 100%;
    display: flex;
    align-items: center;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 5px 15px;
    margin-bottom: 0px !important;
}


.custom-search-area input {
    width: 100%;
    border: none;
    background: transparent;
    outline: none;
    padding: 5px;
    color: #555;
}

.custom-search-area button {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #777;
    display: flex;
    align-items: center;
    padding: 0 5px;
}

/* --- SECTION C: ICONS (25dvw) --- */
.custom-icons-area {
    flex-basis: 25dvw;
    max-width: 25dvw;
    display: flex;
    justify-content: flex-end; /* Align to the end of its box */
    align-items: center;
    padding-right: 20px;
    gap: 15px;
}

.custom-comuna select {
    padding: 6px 4px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    font-size: 13px;
    color: #555;
}

.custom-icon-link {
    color: #000;
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: opacity 0.2s;
}
.custom-icon-link:hover {
    opacity: 0.7;
}

/* --- 3. MENU BAR --- */
.custom-menu-bar {
    background-color: #ebebeb;
    border-top: 1px solid #ddd;
    width: 100%;
}

.custom-menu-bar ul {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.custom-menu-bar ul li a {
    display: block;
    color: #000;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    padding: 15px 25px;
    text-decoration: none;
    letter-spacing: 0.5px;
}

.custom-menu-bar ul li a:hover {
    background-color: #ddd;
}

/* Red Offers Button */
.custom-menu-bar ul li.btn-ofertas a {
    background-color: #ff4d4d;
    color: white;
}
.custom-menu-bar ul li.btn-ofertas a:hover {
    background-color: #e60000;
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
    .header-flex-container {
        flex-direction: column;
        gap: 15px;
    }
    .custom-logo-area, .custom-search-area, .custom-icons-area {
        flex-basis: 100%;
        max-width: 100%;
        justify-content: center;
        padding: 0;
    }
}

input[type="search"] {
    box-shadow: none !important;
}

input[type="search"]:focus {
    background-color: transparent !important;;
}

/* --- MEGA MENU SYSTEM --- */

.custom-menu-bar {
    position: relative;
    z-index: 1000; /* Ensure menu sits on top of everything */
}

.main-menu-list {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
}

.main-menu-list > li {
    position: static; /* Allows the mega menu to span full width */
}

/* Links */
.main-menu-list > li > a {
    display: flex;
    align-items: center;
    color: #000;
    font-weight: 700;
    font-size: 13px;
    padding: 15px 20px;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.5px;
    transition: background 0.2s, color 0.2s;
}

.main-menu-list > li > a:hover {
    background-color: #ddd;
}

/* Arrow Rotation */
.arrow-icon {
    margin-left: 6px;
    transition: transform 0.2s ease;
}
.has-mega-menu:hover .arrow-icon {
    transform: rotate(180deg);
}

/* --- THE DROPDOWN PANEL --- */
.mega-menu-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #fff;
    border-top: 1px solid #eee;
    border-bottom: 4px solid #ff4d4d;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    padding: 30px 0;
    z-index: 2000;
}

/* Show on Hover */
.has-mega-menu:hover .mega-menu-panel {
    display: block;
    animation: fadeIn 0.2s ease-in-out;
}

/* --- THE GRID LAYOUTS --- */
.mega-menu-grid {
    display: grid;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    gap: 30px;
}

/* Grid Variants */
.col-4 { grid-template-columns: repeat(4, 1fr); }
.col-3 { grid-template-columns: repeat(3, 1fr); }
.col-2 { grid-template-columns: repeat(2, 1fr); max-width: 600px; margin-left: 0; } /* Align left for small menus */

/* --- COLUMN STYLING --- */
.mega-column h3 {
    margin: 0 0 10px 0;
    font-size: 14px;
}

.mega-column h3 a {
    color: #333;
    font-weight: 600;
    text-decoration: none;
    font-size: 14px;
    display: block;
    padding: 5px 0;
    transition: color 0.2s;
}

.mega-column h3 a:hover {
    color: #ff4d4d;
    text-decoration: underline;
}

/* --- RED BUTTON --- */
.main-menu-list > li.btn-ofertas > a {
    background-color: #ff4d4d;
    color: white !important;
}
.main-menu-list > li.btn-ofertas > a:hover {
    background-color: #e60000;
}

/* Animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- TABBED MEGA MENU (Custom - Compact Version) --- */

/* The Main Wrapper for Tabs */
.mega-tabs-layout {
    display: flex;
    min-height: 350px; /* Reduced minimum height */
    width: 100%;
}

/* 1. LEFT SIDEBAR */
.mega-sidebar {
    width: 240px; /* Slightly narrower */
    background-color: #fff;
    border-right: 1px solid #eee;
    list-style: none;
    margin: 0;
    padding: 10px 0;
    flex-shrink: 0;
}

.mega-sidebar .tab-item {
    padding: 10px 20px; /* Reduced padding */
    cursor: pointer;
    display: flex;
    justify-content: flex-start; /* ALIGN LEFT FIX */
    width: 100%;
    align-items: center;
    font-size: 13px; /* Slightly smaller text */
    font-weight: 500;
    color: #333;
    transition: background 0.2s;
    gap: 12px; /* Space between icon and text */
}

/* Icons in sidebar */
.mega-sidebar .tab-item .icon {
    width: 18px;
    display: flex;
    justify-content: center;
    color: #555;
}

/* Hover State */
.mega-sidebar .tab-item:hover {
    background-color: #f9f9f9;
}

/* Active State */
.mega-sidebar .tab-item.active {
    background-color: #f0f0f0; /* Clearer active grey */
    font-weight: 700;
    color: #000;
}

/* 2. RIGHT CONTENT AREA */
.mega-content {
    flex-grow: 1;
    padding: 20px 30px; /* Tighter padding */
    background-color: #fff;
}

/* Hide all panels by default */
.tab-panel {
    display: none;
}

/* Show only the active panel */
.tab-panel.active {
    display: block;
    animation: fadeIn 0.2s;
}

/* Panel Title */
.panel-title {
    font-size: 16px; /* Smaller title */
    font-weight: 700;
    border-bottom: 1px solid #ddd;
    padding-bottom: 8px;
    margin-bottom: 15px; /* Less space below title */
    display: flex;
    align-items: center;
    gap: 8px;
    color: #333;
}

/* Panel Grid (2 Cols for links) */
.panel-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px; 
}

.panel-grid-2 .col {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.panel-grid-2 a {
    font-size: 13px; /* Compact font size */
    color: #555;
    text-decoration: none;
    transition: color 0.2s;
    line-height: 1.4; /* Tighter line height */
    text-transform: capitalize; /* Cleaner look */
    padding: 5px 10px !important;
}

/* "Ver Todo" Link Special Styling */
.panel-grid-2 a:first-child {
    font-weight: 700;
    margin-bottom: 5px;
    text-transform: uppercase;
    font-size: 12px;
}

.panel-grid-2 a:hover {
    color: #ff4d4d;
    text-decoration: underline;
}

/* --- STANDARD COMPACT MEGA GRID --- */
.mega-menu-grid.col-3-compact {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px; /* Space between columns */
    max-width: 1000px; /* Restrict width so it doesn't look stretched */
    margin: 0 auto;
    padding: 20px 40px;
}

/* Re-use the tight styling you liked */
.mega-column h3 {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    text-transform: uppercase;
    border-bottom: 2px solid #eee;
    padding-bottom: 8px;
    margin-bottom: 12px;
}

.mega-column a {
    display: block;
    font-size: 13px; /* Compact font */
    color: #555 !important;
    text-decoration: none;
    padding: 3px 0 !important; /* Very tight vertical padding */
    transition: color 0.2s, padding-left 0.2s;
}

.mega-column a:hover {
    color: #ff4d4d !important;
    padding-left: 5px !important; /* Slight slide on hover */
    background: transparent !important;
}

/* =========================================
   4. CAROUSELS & COMPONENTS
   ========================================= */

.mermoz-product-carousel-section {
    padding: 30px 0;
}

.carousel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding: 0 5px;
}

.carousel-title {
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0;
    color: var(--color-text-main);
}

.view-more-link {
    font-size: 13px;
    color: var(--color-text-light);
    text-decoration: underline;
}

/* --- PRODUCT CARD (Compact) --- */

.mermoz-product-carousel-section .swiper-slide {
    height: auto;
    display: flex;
}

.product-card {
    background: #fff;
    border-radius: 4px;
    padding: 10px;
    text-align: center;
    position: relative;
    border: 1px solid #eee;
    transition: transform 0.2s, box-shadow 0.2s;
    height: 100%;             /* Fill the slide */
    width: 100%;              /* Fill width */
    display: flex;
    flex-direction: column;   /* Stack content vertically */
    justify-content: flex-start; /* Start from top */
}

.product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* Badge */
.sale-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #ff6b6b;
    color: white;
    font-weight: 700;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

/* Image */
.product-image img {
    max-height: 140px; /* Reduced from 180px */
    width: auto;
    margin: 0 auto 10px; /* Less margin */
    display: block;
    object-fit: contain;
}

/* Compact Info Area */
.product-info-compact {
    margin-bottom: 10px;
    flex-grow: 1;       /* Expands to fill empty space */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Optional: aligns price to bottom of this section */
}

.product-meta {
    font-size: 10px;
    text-transform: uppercase;
    color: #999;
    margin-bottom: 3px;
    letter-spacing: 0.5px;
}

.product-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 5px;
    min-height: 34px; /* Forces 2 lines */
    overflow: hidden;
}
.product-title a {
    color: #333;
    text-decoration: none;
}

.product-price {
    font-size: 15px;
    font-weight: 800;
    color: #333;
    margin: 0;
}
.product-price del {
    color: #ccc;
    font-weight: 400;
    font-size: 12px;
}

/* Swiper Arrows */
.swiper-button-next, .swiper-button-prev {
    width: 35px;
    height: 35px;
    text-shadow: none !important;
}
.swiper-button-next:after, .swiper-button-prev:after {
    font-size: 14px;
    color: #333;
    font-weight: bold;
}

/* =========================================
   HERO SECTION (Banner)
   ========================================= */

.mermoz-hero-section {
    padding: 20px 0; /* Space above/below the whole section */
}

/* The Grid Layout */
.hero-grid {
    display: grid;
    /* The exact math: 59% | 19% | 19% */
    grid-template-columns: 69% 28%; 
    gap: 0.5rem; /* The minimal gap */
    justify-content: space-between; /* Ensures it stretches fully */
    width: 100%;
}

/* Images Generic Reset */
.hero-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures images fill their boxes without stretching */
    display: block;
    border-radius: 4px; /* Optional: Rounded corners look nice */
}

/* 1. Main Carousel Column */
.hero-col-main {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 4px;
}

.hero-swiper {
    width: 100%;
    height: 100%; /* Force swiper to fill the column height */
}

/* 2 & 3. Side Banner Columns */
.hero-col-side {
    display: flex;
    flex-direction: column;
}

.banner-link {
    display: block;
    height: 100%;
    transition: opacity 0.2s;
}
.banner-link:hover {
    opacity: 0.9;
}

/* --- SWIPER CUSTOMIZATION FOR HERO --- */
/* Arrows */
.hero-swiper .swiper-button-next, 
.hero-swiper .swiper-button-prev {
    color: #fff; /* White arrows */
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Dots */
.hero-swiper .swiper-pagination-bullet-active {
    background-color: var(--color-primary, #ff6b6b);
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
    .hero-grid {
        display: flex;
        flex-direction: column; /* Stack them vertically */
        gap: 15px;
    }

    /* On mobile, banners take full width */
    .hero-col-main, 
    .hero-col-side {
        width: 100%;
        height: auto; /* Let height adapt to image */
    }
    
    /* Optional: Hide side banners on mobile if you want content up higher? */
    /* .hero-col-side { display: none; } */
}

/* =========================================
   CATEGORIES SECTION
   ========================================= */

.mermoz-categories-section {
    padding: 40px 0;
}

.section-title {
    text-align: center;
    font-size: 22px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--color-text-main);
    margin-bottom: 30px;
}

/* The Grid Container */
.categories-grid {
    display: grid;
    /* Create 8 equal columns */
    grid-template-columns: repeat(8, 1fr); 
    gap: 15px; /* Space between items */
    width: 100%;
}

.cat-item {
    display: block;
    transition: transform 0.2s;
}

.cat-item:hover {
    transform: translateY(-5px); /* Nice lift effect */
}

.cat-item img {
    width: 100%;
    height: auto;
    border-radius: 12px; /* Smooth rounded corners */
    display: block;
    aspect-ratio: 1 / 1; /* Force square shape even if image isn't perfect */
    object-fit: cover;
}

/* --- RESPONSIVE MOBILE (Scrollable Strip) --- */
@media (max-width: 1024px) {
    .categories-grid {
        display: flex; /* Switch to Flex for scrolling */
        overflow-x: auto; /* Enable horizontal scroll */
        scroll-snap-type: x mandatory; /* Snap effect */
        padding-bottom: 20px; /* Space for scrollbar */
        gap: 10px;
        -webkit-overflow-scrolling: touch; /* Smooth scroll iOS */
    }

    .cat-item {
        flex: 0 0 140px; /* Fixed width on mobile */
        scroll-snap-align: start;
    }
}

/* =========================================
   LIFESTYLE BENTO GRID
   ========================================= */

.mermoz-lifestyle-section {
    padding: 40px 0;
}

/* GENERAL STYLING */
.bento-container {
    display: grid;
    gap: 15px;
    /* Default Desktop: 12 cols */
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(280px, auto); /* Slightly reduced height for better proportions */
}

.bento-item a {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-decoration: none;
    border-radius: 12px;
    background-color: #eee; /* Fallback color */
}

/* Background Image Pseudo-element */
.bento-item a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.4s ease;
    z-index: 1;
}

/* Specific Background Images */
.vegano-item a::before      { background-image: url('/wp-content/uploads/2025/11/estilo1.webp'); }
.aplv-item a::before        { background-image: url('/wp-content/uploads/2025/11/estilo2.webp'); }
.lacteos-item a::before     { background-image: url('/wp-content/uploads/2025/11/estilo3.webp'); }
.kosher-item a::before      { background-image: url('/wp-content/uploads/2025/11/estilo4.webp'); }
.organico-item a::before    { background-image: url('/wp-content/uploads/2025/11/estilo5.webp'); }
.azucar-item a::before      { background-image: url('/wp-content/uploads/2025/11/estilo6.webp'); }
.vegetariano-item a::before { background-image: url('/wp-content/uploads/2025/11/estilo7.webp'); }
.keto-item a::before        { background-image: url('/wp-content/uploads/2025/11/estilo8.webp'); }
.gluten-item a::before      { background-image: url('/wp-content/uploads/2025/11/estilo9.webp'); }

.bento-item:hover a::before {
    transform: scale(1.05);
}

/* Text Bar Styling */
.bento-text-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 60px; /* Fixed height looks cleaner than percentage */
    background-color: #F86E68; /* Matches your screenshot */
    z-index: 2;
    padding: 0 15px;
    box-sizing: border-box;
}

/* Text Bubble Styling */
.bento-item span {
    background-color: #FDC05C;
    color: white;
    font-family: sans-serif;
    font-weight: 800;
    font-size: 14px;
    padding: 6px 15px;
    border-radius: 8px;
    line-height: 1.2;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    text-transform: uppercase;
}

/* Grid Spans */
.bento-col-span-6 { grid-column: span 6; }
.bento-col-span-3 { grid-column: span 3; }
.bento-col-span-2 { grid-column: span 2; }

/* --- RESPONSIVE: TABLET (6 Cols) --- */
@media (max-width: 1024px) {
    .bento-container {
        grid-template-columns: repeat(6, 1fr);
        grid-auto-rows: minmax(200px, auto);
    }
    .bento-col-span-6 { grid-column: span 6; }
    .bento-col-span-3 { grid-column: span 3; }
    .bento-col-span-2 { grid-column: span 2; }
}

/* --- RESPONSIVE: MOBILE (Custom Stack) --- */
@media (max-width: 640px) {
    .bento-container {
        grid-template-columns: repeat(6, 1fr);
        grid-auto-rows: minmax(140px, auto);
        gap: 10px;
    }
    
    .bento-text-bar { height: 40px; }
    .bento-item span { font-size: 11px; padding: 4px 10px; }

    /* Custom Mobile Order & Sizing */
    .vegano-item      { order: 1; grid-column: span 6; }
    .aplv-item        { order: 2; grid-column: span 2; }
    .lacteos-item     { order: 3; grid-column: span 2; }
    .kosher-item      { order: 4; grid-column: span 2; }
    .keto-item        { order: 5; grid-column: span 3; }
    .gluten-item      { order: 6; grid-column: span 3; }
    .organico-item    { order: 7; grid-column: span 2; }
    .azucar-item      { order: 8; grid-column: span 2; }
    .vegetariano-item { order: 9; grid-column: span 2; }
}

/* =========================================
   TEXT BANNER SECTION
   ========================================= */

.mermoz-text-banner-section {
    padding: 40px 0;
    background-color: #fff;
    width: 100%;
}

.text-banner-box {
    border: 4px solid #EFD1D2; /* The Pinkish Border */
    padding: 40px 20px;
    text-align: center;
    width: 100%;
    box-sizing: border-box; /* Ensures padding doesn't break width */
    background-color: white;
}

.banner-heading {
    font-size: 28px;
    font-weight: 500; /* Regular/Medium weight like image */
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #383838; /* Dark Grey */
    margin: 0 0 10px 0;
}

.banner-subheading {
    font-size: 16px;
    color: #383838; /* Dark Grey */
    margin: 0;
    font-weight: 400;
}

/* Mobile Adjustment */
@media (max-width: 768px) {
    .text-banner-box {
        padding: 20px 10px;
        border-width: 3px;
    }
    .banner-heading {
        font-size: 20px;
    }
    .banner-subheading {
        font-size: 14px;
    }
}

/* =========================================
   VIDEO CAROUSEL SECTION
   ========================================= */

.mermoz-video-section {
    padding: 50px 0; /* Slightly more vertical space */
}

/* The Card - Prettier Styling */
.video-card {
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
}

/* Hover Effect for the whole card */
.video-card:hover {
    transform: translateY(-5px); /* Lifts up slightly */
}

/* Thumbnail Area (Square Aspect Ratio) */
.video-thumbnail-wrapper {
    position: relative;
    width: 100%;
    padding-top: 100%; /* 1:1 Aspect Ratio (Square) */
    background-color: #000;
    cursor: pointer;
}

.video-thumbnail-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
    transition: opacity 0.2s;
}

.video-thumbnail-wrapper:hover img {
    opacity: 0.8;
}

/* Iframe (Loaded on click) */
.video-thumbnail-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
}

/* Play Button Overlay */
.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(0,0,0,0.6);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    pointer-events: none;
    transition: transform 0.2s, background 0.2s;
    backdrop-filter: blur(2px); /* Modern blur effect */
}

.video-thumbnail-wrapper:hover .play-button {
    transform: translate(-50%, -50%) scale(1.1);
    background: var(--color-primary); /* Use your brand red on hover */
}

/* Title - Centered and Padded */
.video-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-main);
    line-height: 1.4;
    text-align: center; /* Centered */
    padding: 20px 15px; /* Nice spacing around text */
    margin: 0;
    /* Clamp to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-grow: 1; /* Ensures title area fills space if needed */
    display: flex;             /* Use flex to center vertically if title is short */
    align-items: center;       /* Vertical center */
    justify-content: center;   /* Horizontal center */
}

/* Adjust Swiper Arrows for this section */
.mermoz-video-swiper .swiper-button-next,
.mermoz-video-swiper .swiper-button-prev {
    background-color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.mermoz-video-swiper .swiper-button-next:after,
.mermoz-video-swiper .swiper-button-prev:after {
    font-size: 16px;
    font-weight: bold;
    color: var(--color-text-main);
}

/* =========================================
   NEWSLETTER SECTION
   ========================================= */

.mermoz-newsletter-section {
    padding: 40px 0;
}

/* The Container Box */
.newsletter-dashed-box {
    border: 2px dashed #2c3e50; /* Dark dashed border */
    background-color: #f9f9f9;  /* Light grey background */
    padding: 30px 40px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap; /* Wraps on mobile */
}

/* Text Styling */
.newsletter-text h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-main);
    margin: 0;
    line-height: 1.4;
}

.newsletter-form-container {
    flex-grow: 1;
    max-width: 600px;
}

/* --- OVERRIDING THE PLUGIN STYLES --- */
/* We target the class .tnp-subscription created by the plugin */

.tnp-subscription form {
    display: flex !important;
    gap: 0 !important; /* Connect them visually */
    align-items: stretch;
}

/* The Email Input Field */
.tnp-field-email {
    flex-grow: 1;
    margin-bottom: 0 !important;
}

.tnp-field-email input.tnp-email {
    width: 100% !important;
    height: 45px !important;
    border: 1px solid #ccc !important;
    border-right: none !important; /* Merge with button */
    border-radius: 4px 0 0 4px !important;
    padding: 0 15px !important;
    font-size: 14px;
    background: #fff;
}

/* The Submit Button */
.tnp-field-button {
    margin-bottom: 0 !important;
}

.tnp-field-button input.tnp-submit {
    background-color: #333 !important; /* Dark Grey Button */
    color: #fff !important;
    height: 45px !important;
    border: 1px solid #333 !important;
    border-radius: 0 4px 4px 0 !important;
    padding: 0 30px !important;
    font-weight: 600;
    cursor: pointer;
    text-transform: capitalize;
    font-size: 14px;
    transition: background 0.2s;
}

.tnp-field-button input.tnp-submit:hover {
    background-color: #000 !important;
}

/* Hide Privacy Checkbox (Optional - enable if you need GDPR) */
.tnp-field-privacy {
    display: none; 
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 768px) {
    .newsletter-dashed-box {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }
    
    .newsletter-form-container {
        width: 100%;
    }
}

.tnp-field.tnp-field-email label{
    display: none !important;
}

/* =========================================
   INSTAGRAM SECTION
   ========================================= */

.mermoz-instagram-section {
    padding: 40px 0;
    overflow: hidden; /* Prevent horizontal scrollbar if images bleed */
}

/* Title */
.insta-title {
    text-align: center;
    font-size: 20px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--color-text-main);
    margin-bottom: 25px;
}

.insta-title a {
    color: var(--color-primary); /* The Mermoz Red */
    text-decoration: none;
    font-weight: 800;
}

.insta-title a:hover {
    text-decoration: underline;
}

/* Slide Items */
.insta-slide {
    position: relative;
    /* Force square aspect ratio */
    aspect-ratio: 1 / 1; 
    overflow: hidden;
}

.insta-link {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.insta-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.insta-link:hover img {
    transform: scale(1.1);
}

/* Hover Overlay */
.insta-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3); /* Darkens image */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.insta-link:hover .insta-overlay {
    opacity: 1;
}

/* =========================================
   FOOTER SECTION (Simplified)
   ========================================= */

.site-footer {
    background-color: #E6E6E6; /* Grey */
    padding: 50px 0 20px 0;
    margin-top: 0;
    color: var(--color-text-main);
}

/* --- TOP ROW (3 Columns) --- */
.footer-main-row {
    display: flex;
    justify-content: space-between; /* Pushes cols apart */
    margin-bottom: 60px;
    gap: 20px;
}

/* Flex sizing for top columns */
.footer-col-left,
.footer-col-center,
.footer-col-right {
    flex: 1; /* Equal width basis */
}

/* Align Right Column contents to the right */
.footer-col-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end; 
    text-align: right;
}

/* Headings */
.footer-heading {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 15px;
    color: #000;
}

/* Lists */
.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-links li {
    margin-bottom: 8px;
}

.footer-links a {
    color: #666;
    text-decoration: none;
    font-size: 14px;
}

.footer-links a:hover {
    color: var(--color-primary);
}

/* Payments & Socials */
.payment-block, .social-block {
    margin-bottom: 20px;
}

.payment-icons {
    display: flex;
    gap: 15px;
    justify-content: flex-end; /* Align right */
}

.payment-icons img {
    height: 35px;
    width: auto;
}

/* Socials - Images */
.social-icons {
    display: flex;
    gap: 12px;
    justify-content: flex-end; /* Align right */
    align-items: center;
}

.social-icons a {
    display: block; /* Removes weird gaps */
}

.social-icons img {
    width: 24px;  /* Match the previous SVG size */
    height: 24px;
    display: block;
    transition: transform 0.2s ease; /* Smooth zoom animation */
}

/* Hover Effect: Gentle Zoom */
.social-icons a:hover img {
    transform: scale(1.2);
}

/* Mobile Adjustment */
@media (max-width: 768px) {
    .social-icons {
        justify-content: center; /* Center on mobile */
    }
}

/* --- BOTTOM ROW (Logo | Text | Empty) --- */
.footer-bottom-row {
    border-top: 1px solid #ddd;
    padding-top: 30px;
    display: flex;
    align-items: center; /* Vertical center */
}

.f-logo, .f-copy, .f-spacer {
    flex: 1; /* Force equal width so center item is dead center */
}

/* Alignments */
.f-logo {
    text-align: left;
}
.f-logo img {
    opacity: 0.8;
}

.f-copy {
    text-align: center;
}
.f-copy p {
    font-size: 13px;
    color: #888;
    margin: 0;
}

.f-spacer {
    /* Empty space just to balance the flexbox */
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .footer-main-row {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }
    .footer-col-right {
        align-items: center; /* Center align on mobile */
    }
    .payment-icons, .social-icons {
        justify-content: center;
    }
    
    .footer-bottom-row {
        flex-direction: column;
        gap: 20px;
    }
    .f-spacer { display: none; }
}

/* =========================================
   SINGLE PRODUCT PAGE (Refined Layout)
   ========================================= */

/* Main Wrapper - 85dvw Centered */
.mermoz-single-container {
    width: 85dvw;
    max-width: 1600px; /* Optional cap for huge screens */
    margin: 40px auto;
}

/* --- 1. TOP GRID (Image + Summary) --- */
.mermoz-product-top-grid {
    display: flex;
    gap: 50px; /* Nice gap between image and text */
    margin-bottom: 50px;
}

/* Left: Images (40%) */
.mermoz-product-gallery {
    flex: 0 0 40%;
    max-width: 40%;
}

/* Ensure images fill the 40% container */
.woocommerce-product-gallery img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid #eee;
}

/* Right: Summary (Rest of space) */
.mermoz-product-summary {
    flex: 1;
}

/* Hiding Duplicates inside the form hook */
.product-cart-form .product_title,
.product-cart-form .price,
.product-cart-form .woocommerce-product-details__short-description {
    display: none !important;
}

/* Title & Price */
.mermoz-product-summary .product_title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.1;
}

/* =========================================
   CUSTOM SINGLE PRODUCT PRICE STYLING
   ========================================= */

/* The Wrapper Container */
.mermoz-product-summary .mermoz-custom-price {
    display: flex;
    flex-direction: column; /* Stack them vertically */
    align-items: flex-start;
    gap: 5px; /* Small space between REF and Sale price */
    margin-bottom: 15px;
}

/* The "REF: $X" Line */
.mermoz-product-summary .price-ref {
    font-size: 18px;
    color: #888; /* Gray text */
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1;
}

/* The Main Sale Price Line */
.mermoz-product-summary .price-sale {
    font-size: 34px; /* Large and bold */
    color: #000; /* Black text */
    font-weight: 800;
    line-height: 1;
}

.price-ref {
      font-size: 15px;
    color: #888; /* Gray text */
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1;
}

/* Breadcrumbs */
.woocommerce-breadcrumb {
    margin-bottom: 15px;
    font-size: 12px;
    color: #888;
    text-transform: uppercase;
}
.woocommerce-breadcrumb a { color: #888; text-decoration: none; }

/* =========================================
   GLOBAL PRODUCT ACTIONS (Cart & Carousel)
   ========================================= */

/* 1. CONTAINER FOR QUANTITY + BUTTON */
/* Single Product Page Wrapper */
form.cart {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    margin-bottom: 30px;
}

/* Carousel Wrapper */
.custom-add-to-cart-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    width: 100%;
}

/* 2. UNIFIED QUANTITY SELECTOR */
.qty-selector, 
.quantity {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    height: 40px; /* Standardize Height */
    overflow: hidden;
    background-color: #fff;
    width: fit-content;
}

/* Minus / Plus Buttons */
.qty-btn,
.qty-btn-single {
    width: 35px;
    height: 100%;
    background: #f9f9f9;
    border: none;
    font-weight: bold;
    font-size: 18px;
    cursor: pointer;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    padding: 0;
}
.qty-btn:hover, .qty-btn-single:hover { background: #eee; }

/* The Input Field */
input.qty-input, 
.quantity input.qty {
    width: 45px;
    height: 100%;
    border: none !important;
    border-left: 1px solid #eee !important;
    border-right: 1px solid #eee !important;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    padding: 0;
    background: #fff;
    -moz-appearance: textfield;
}

/* Remove Spinners */
input.qty-input::-webkit-outer-spin-button,
input.qty-input::-webkit-inner-spin-button,
.quantity input.qty::-webkit-outer-spin-button,
.quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* 3. ADD TO CART BUTTONS */
/* Carousel Button */
.main-add-btn {
    flex-grow: 1;
    background-color: #333 !important;
    color: white !important;
    text-transform: capitalize;
    height: 40px; /* Match Qty Height */
    line-height: 40px;
    padding: 0 10px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    text-align: center;
    transition: background 0.2s;
    border: none;
}

/* Single Product Button */
.single_add_to_cart_button {
    background-color: #333 !important;
    color: white !important;
    height: 40px !important; /* Match Qty Height */
    padding: 0 40px !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    border-radius: 4px !important;
    transition: background 0.2s;
    border: none !important;
}

.main-add-btn:hover,
.single_add_to_cart_button:hover {
    background-color: #000 !important;
    color: #fff !important;
}

/* Out of Stock */
.out-of-stock {
    width: 100%;
    background-color: #ccc;
    color: white;
    border: none;
    padding: 8px;
    font-size: 13px;
    cursor: not-allowed;
    border-radius: 4px;
}

/* --- 3. ACCORDIONS (Full Width) --- */
.mermoz-product-accordions {
    border-top: 1px solid #ddd;
    width: 100%; /* Ensures it follows the 85dvw parent */
    margin-bottom: 50px;
}

.mermoz-details { border-bottom: 1px solid #ddd; }

.mermoz-details summary {
    padding: 20px 0;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    list-style: none;
}
.mermoz-details summary::-webkit-details-marker { display: none; }

.mermoz-details summary h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.mermoz-details .details-content {
    padding-bottom: 30px;
    line-height: 1.6;
    color: #555;
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .mermoz-single-container { width: 95vw; }
    
    .mermoz-product-top-grid {
        flex-direction: column;
        gap: 30px;
    }
    
    .mermoz-product-gallery, 
    .mermoz-product-summary {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.single-product div.product .woocommerce-product-gallery {
    width: 100%;
}

span.onsale {
    position: absolute !important;
    z-index: 10;
    margin-top: 1rem;
    left: 1rem;
    margin-bottom: 0px !important;
}

/* --- CATEGORY/LIFESTYLE THUMBNAILS --- */
.product-category-thumbnails {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Space between items */
    margin-top: 20px;
    margin-bottom: 20px;
    align-items: flex-start; /* Align to top */
}

.product-category-item {
    width: auto;
    display: flex;
    justify-content: center;
}

.product-category-item a {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center horizontally */
    text-decoration: none;
    gap: 8px;
    width: 80px; /* Limit width of each item so text wraps if needed */
}

/* The Icon Image */
.product-category-item img {
    height: 40px !important; /* Force fixed height */
    width: auto !important;  /* Maintain aspect ratio */
    max-width: 100%;
    object-fit: contain;
    border: none;
    padding: 0;
    margin: 0;
    border-radius: 0; /* Remove circle crop if these are lifestyle icons */
    /* If you prefer circles, keep border-radius: 50% */
}

/* The Text Label */
.product-category-item .cat-name {
    font-size: 11px;
    line-height: 1.2;
    text-align: center; /* Center text */
    color: #666;
    font-weight: 600;
    text-transform: uppercase;
    white-space:nowrap;
}

/* Hover Effect */
.product-category-item a:hover .cat-name {
    color: var(--color-primary);
}

.storefront-breadcrumb {
    margin: 0px !important;
    padding: 0px !important;
}

.storefront-breadcrumb .col-full {
    margin: 0px !important;
    padding: 0px !important;
}

.pwb-single-product-brands.pwb-clearfix {
    display: none !important;
}

.brand-link {
    color: #888 !important;
    text-transform: uppercase !important;
    text-decoration: underline !important;
    font-size: 20px !important;
}

.edit-link {
    display: none !important;
}

.single-product div.product form.cart {
    gap: 0px !important;
    
}

.single-product div.product form.cart .qty-selector {
    margin-right: 10px !important;
}

/* =========================================
   SHOP / ARCHIVE PAGE
   ========================================= */
   
  

.mermoz-shop-header {
    display: flex;
    justify-content: space-between; /* Pushes Title Left, Sort Right */
    align-items: center; /* Vertically Center */
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee; /* Optional separator line */
    flex-wrap: wrap;
    gap: 20px;
}

/* Left Side: Title */
.mermoz-shop-header .header-left h1 {
    margin: 0;
    font-size: 28px;
    font-weight: 300; /* Lighter weight like reference */
    color: #333;
    text-transform: uppercase;
}

/* Right Side: Actions */
.mermoz-shop-header .header-right {
    display: flex;
    align-items: center;
    gap: 15px; /* Space between Dropdown and "Showing X results" */
}

/* The Sorting Dropdown */
.woocommerce-ordering {
    margin: 0 !important; /* Remove default WC margins */
}
.woocommerce-ordering select {
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
    background-color: #fff;
    color: #555;
    cursor: pointer;
}

/* The "Showing 1-12 of X" Text */
.woocommerce-result-count {
    margin: 0 !important; /* Remove default WC margins */
    float: none !important; /* Remove default float */
    font-size: 13px;
    color: #888;
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
    .mermoz-shop-header {
        flex-direction: column; /* Stack them on mobile */
        align-items: flex-start;
        gap: 10px;
    }
    
    .mermoz-shop-header .header-right {
        width: 100%;
        justify-content: space-between; /* Spread dropdown and text */
    }
}

.mermoz-shop-container {
    display: flex;
    gap: 40px;
    padding-top: 40px;
    padding-bottom: 60px;
    align-items: flex-start;
}

/* 1. SIDEBAR */
.mermoz-shop-sidebar {
    flex: 0 0 280px; /* Fixed width */
    max-width: 280px;
}

.mermoz-filter-box {
    background: #fff;
    border-radius: 8px;
    margin-bottom: 0px;
}

.widget-title {
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    color: #333;
    border-bottom: 2px solid #ddd;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

/* Filter Lists */
.mermoz-filter-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mermoz-filter-box li {
    margin-bottom: 8px;
    font-size: 14px;
    color: #555;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mermoz-filter-box a {
    color: #555;
    text-decoration: none;
    transition: color 0.2s;
}
.mermoz-filter-box a:hover {
    color: var(--color-primary);
}

/* Price Slider Styling Override (WooCommerce Default is ugly) */
.widget_price_filter .price_slider {
    background: #eee;
    margin-bottom: 20px;
}
.widget_price_filter .price_slider_bar {
    background: var(--color-primary);
}
.widget_price_filter .price_slider_handle {
    border: 2px solid var(--color-primary);
}

/* 2. PRODUCT GRID */
.mermoz-shop-content {
    flex: 1;
}

/* Force the UL grid to behave like our Flex Cards */
ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr); /* 4 Columns like design */
    gap: 20px;
}

ul.products::before, 
ul.products::after { 
    display: none !important; /* Kill Storefront float clears */
}

/* Card Overrides for Shop Grid */
.mermoz-shop-card {
    width: 100% !important; /* Override Storefront widths */
    margin: 0 !important;
    float: none !important;
    list-style: none;
}

/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
    ul.products { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .mermoz-shop-container { flex-direction: column; }
    .mermoz-shop-sidebar { width: 100%; max-width: 100%; }
    ul.products { grid-template-columns: repeat(2, 1fr); }
}

.woocommerce-pagination { display: none; }

/* --- MARCAS DROPDOWN SPECIFIC --- */
ul.brands-children {
    max-height: 300px; /* Limit height so it doesn't stretch sidebar */
    overflow-y: auto;  /* Enable scrolling inside the dropdown */
    background-color: #f9f9f9;
    padding-right: 5px !important; /* Space for scrollbar */
}

/* Custom Scrollbar for Marcas */
ul.brands-children::-webkit-scrollbar {
    width: 5px;
}
ul.brands-children::-webkit-scrollbar-track {
    background: #eee;
}
ul.brands-children::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

/* Marcas List Items */
ul.brands-children li {
    display: flex;
    justify-content: space-between;
}
ul.brands-children li a {
    font-size: 13px !important;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

/* Count number styling inside Marcas */
ul.brands-children .count {
    font-size: 11px;
    color: #999;
}

/* =========================================
   SIDEBAR CATEGORY ACCORDION (Classic Widget Fix)
   ========================================= */

/* 1. Reset List Styles (Remove folder icons/bullets) */
.widget_product_categories ul.product-categories,
.widget_product_categories ul.children {
    list-style: none !important;
    padding: 0;
    margin: 0;
}

/* 2. Main Parent Items */
.widget_product_categories ul.product-categories > li {
    position: relative;
    display: flex;
    flex-wrap: wrap; /* Allow children to drop to next line */
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
    border-bottom: 1px solid #eee;
}

/* 3. Links Styling */
.widget_product_categories ul.product-categories li a {
    flex-grow: 1;
    padding: 12px 10px;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    display: block;
}

.widget_product_categories ul.product-categories li a:hover {
    color: var(--color-primary);
    background-color: #f9f9f9;
}

/* 4. The Toggle Arrow */
.cat-toggle {
    font-size: 20px;
    cursor: pointer;
    padding: 10px;
    line-height: 1;
    color: #999;
    font-weight: bold;
}

.cat-item.active-cat-dropdown > .cat-toggle {
    transform: rotate(180deg);
    color: #333;
}

/* 5. The Children List (Hidden by default) */
ul.children {
    flex-basis: 100%;
    width: 100%;
    display: none;
    background-color: #f9f9f9;
    border-left: 3px solid var(--color-primary); /* visual indicator */
    padding-left: 0 !important;
}

/* Show children when active */
li.active-cat-dropdown > ul.children {
    display: block !important;
}

/* Child Items Styling */
ul.children li {
    border-bottom: 1px solid #fff !important;
}
ul.children li a {
    padding-left: 20px !important; /* Indent children */
    font-size: 13px !important;
    color: #666 !important;
}

/* 6. "Ver Todo" Styling (Injected via JS) */
li.view-all-item a {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px !important;
    color: var(--color-primary) !important;
}

/* =========================================
   SIDEBAR WIDGET TITLES & CONTAINER
   ========================================= */

/* 1. Style the Heading block to look like the title bar */
.mermoz-shop-sidebar h1,
.mermoz-shop-sidebar h2,
.mermoz-shop-sidebar h3,
.mermoz-shop-sidebar h4,
.mermoz-shop-sidebar .widget-title {
    background-color: #3D3D3D; /* Dark Gray Background */
    color: #ffffff; /* White Text */
    padding: 12px 15px;
    margin-bottom: 0 !important; /* Connects to the box below */
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px 4px 0 0; /* Rounded top corners */
}

/* 2. Style the Category List Container */
.wc-block-product-categories {
    background: #fff;
    border: 1px solid #eee;
    border-top: none; /* Remove top border to merge with title */
    padding: 15px;
    border-radius: 0 0 4px 4px; /* Rounded bottom corners */
}

/* 3. Hide "Sin categoría" if JS doesn't catch it */
.wc-block-product-categories-list-item a[href*="sin-categoria"] {
    display: none;
}

.wc-block-product-filter-price-slider .text input[type=text] {
    max-width: 80px !important;
}

.widget_product_categories ul li::before {
    display: none !important;
}

ul.product-categories li {
    padding-left: 0px !important;
}

ul.product-categories li:hover {
    background-color: white !important;
}

.cat-item {
    margin-bottom: 0px !important;
}

.ui-slider-range.ui-corner-all.ui-widget-header {
    background-color: var(--color-primary) !important;
}

span.ui-slider-handle.ui-corner-all.ui-state-default {
    background-color: var(--color-primary) !important;
}

.price_slider_amount {
    display: flex !important;
    flex-direction: column-reverse !important;
    justify-content: center !important;
    align-items: ;: stretch !important;
}

.price_slider_amount .button {
    background-color: #D5D5D5 !important;
}

.price_slider_amount .button :hover {
    background-color: #c1c1c1 !important;
}

.price-label {
    text-align: center !important;
}

.widget_price_filter .price_slider_amount {
    text-align: center !important;
}


/* =========================================
   SHOP DISPATCH BANNER
   ========================================= */

.mermoz-dispatch-banner {
    width: 100%;
    background-color: #fff;
    border: 1px solid #CDCBF7;
    margin-bottom: 20px;              /* Space before the shop grid */
    margin-top: 20px;
    padding: 15px 0;
}

.mermoz-dispatch-banner .banner-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.dispatch-text {
    color: #4E3E93; /* Purple Text */
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0;
    letter-spacing: 1px;
    line-height: 1;
}

.truck-icon {
    height: 24px; /* Adjust based on your icon size */
    width: auto;
    display: block;
}

/* Optional: Flip the second truck to face inward */
.truck-icon.flipped {
    transform: scaleX(-1);
}

/* Mobile Adjustment */
@media (max-width: 768px) {
    .dispatch-text {
        font-size: 16px;
    }
    .truck-icon {
        height: 18px;
    }
}

/* Success State for Add to Cart */
.main-add-btn.product-added-success,
.single_add_to_cart_button.product-added-success {
    background-color: #999 !important; /* Light Grey */
    color: #fff !important;
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px; /* Space between text and checkmark */
}

.main-add-btn.product-added-success svg,
.single_add_to_cart_button.product-added-success svg {
    margin-top: -1px; /* Tiny alignment tweak */
}

/* HIDE the "Ver Carrito" link globally just in case JS is slow */
a.added_to_cart.wc-forward {
    display: none !important;
}

/* =========================================
   PAGE: TIENDAS (/tiendas)
   ========================================= */

.mermoz-stores-page {
    padding: 40px 0 60px 0;
}

.page-heading-center {
    text-align: center;
    font-size: 24px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 40px;
    color: var(--color-text-main);
}

/* Store Card Wrapper */
.store-card-container {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* The Card Itself */
.store-card {
    max-width: 500px;
    width: 100%;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
}

.store-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    margin-bottom: 20px;
}

/* Info Area */
.store-content {
    padding: 10px;
}

.store-name {
    font-size: 18px;
    font-weight: 800;
    color: #333;
    margin-bottom: 20px;
}

.store-row {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    align-items: center;
}

.icon-box svg {
    fill: #333;
    margin-top: 3px;
}

.text-box {
    font-size: 14px;
    line-height: 1.4;
    color: #333;
}

.text-muted {
    color: #777;
    font-weight: 400;
}

/* Button */
.store-button {
    display: inline-flex;
    align-items: center;
    background-color: #444;
    color: #fff;
    padding: 10px 25px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    margin-top: 10px;
    transition: background 0.2s;
}

.store-button:hover {
    background-color: #000;
    color: #fff;
}

.store-button .arrow {
    margin-left: 8px;
    font-size: 16px;
    line-height: 1;
}

/* =========================================
   PAGE: LOS LEONES (/los-leones)
   ========================================= */

.mermoz-store-detail-page {
    padding: 40px 0;

}

/* 1. Title */
.store-page-title {
    font-size: 28px;
    font-weight: 700;
    color: #333;
    margin-bottom: 40px;
}

/* 2. Info & Map Grid */
.store-main-grid {
    display: flex;
    gap: 40px;
    margin-bottom: 60px;
    align-items: stretch; /* Makes map same height as info */
}

/* Info Column */
.store-info-col {
    flex: 0 0 40%; /* Takes 40% width approximately */
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.info-icon {
    width: 20px;
    height: auto;
    margin-top: 3px; /* Align with text top */
}

.info-text {
    font-size: 14px;
    line-height: 1.5;
    color: #555;
}
.info-text a { color: #555; text-decoration: none; }
.info-text a:hover { text-decoration: underline; color: var(--color-primary); }
.info-text strong { color: #000; }

/* Map Column */
.store-map-col {
    flex: 1; /* Takes remaining space */
    border-radius: 8px;
    overflow: hidden;
    min-height: 300px; /* Ensure map has height */
}

/* 3. Gallery Row (40% - 15% - 40%) */
.store-gallery-row {
    display: flex;
    justify-content: space-between; /* Distributes the remaining 5% gap automatically */
    width: 100%
}

.gal-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    display: block;
    max-height: 40dvh;
}

/* Specific Widths */
.gal-wide {
    width: 40%;
}
.gal-narrow {
    width: 15%;
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
    .store-main-grid {
        flex-direction: column;
        gap: 30px;
    }
    
    .store-map-col {
        height: 300px; /* Fixed height for map on mobile */
    }

    /* Stack Images */
    .store-gallery-row {
        flex-direction: column;
        gap: 15px;
    }
    .gal-wide, .gal-narrow {
        width: 100%; /* Full width on mobile */
        height: auto;
    }
}

/* =========================================
   PAGE: CONTACTO (/contacto)
   ========================================= */

.mermoz-contact-page {
    padding: 60px 0;
    text-align: center;
}

/* Subtext */
.contact-subtext {
    font-size: 16px;
    color: #555;
    margin-bottom: 50px;
    line-height: 1.6;
    text-align: center;
}
.contact-subtext a {
    color: var(--color-primary); /* Mermoz Red */
    text-decoration: none;
    font-weight: 600;
}

/* Cards Grid */
.contact-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 50px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Card Base */
.contact-card {
    background: #fff;
    border-radius: 8px;
    padding: 40px 20px;
    border: 2px solid #eee; /* Default fallback */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}
.contact-card:hover {
    transform: translateY(-5px);
}

/* Border Colors */
.card-red { border-color: #F16A66; }
.card-green { border-color: #009501; }
.card-yellow { border-color: #E9BF00; }

/* Card Icon */
.card-icon svg {
    height: 10dvh;
    width: auto;
    margin-bottom: 20px;
}

/* Card Title */
.card-title {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
    min-height: 50px; /* Aligns titles if lengths vary */
    display: flex;
    align-items: center;
}

/* Card Text */
.card-text {
    font-size: 13px;
    color: #777;
    line-height: 1.5;
}
.card-text a {
    color: var(--color-primary);
    text-decoration: underline;
    font-weight: 600;
}

/* FAQ Text Bottom */
.contact-faq-text {
    font-size: 16px;
    color: #555;
    margin-top: 20px;
}
.contact-faq-text a {
    color: var(--color-primary);
    font-weight: 700;
    text-decoration: underline;
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
    .contact-cards-grid {
        grid-template-columns: 1fr; /* Stack cards */
        gap: 20px;
    }
    .contact-card {
        padding: 30px 20px;
    }
}

/* =========================================
   PAGE: DESPACHOS (/despachos)
   ========================================= */

.mermoz-despachos-page {
    padding: 60px 0;

}

/* Reuse border colors */
.card-blue { border-color: #3E2EA1; }

/* Text Content Styling */
.despachos-content-text {
    max-width: 900px;
    margin: 0 auto;
    font-size: 14px;
    line-height: 1.8;
    color: #555;
}

.despachos-content-text p {
    margin-bottom: 20px;
}

.despachos-content-text strong {
    color: #000;
}

/* =========================================
   PAGE: DEVOLUCIONES (/devoluciones)
   ========================================= */

.mermoz-devoluciones-page {
    padding: 60px 0;
}

/* Top Grid (2 Columns) */
.devoluciones-top-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
    margin: 0 auto 60px auto;
}

/* Left Column */
.devo-col-left {
    text-align: center;
    color: #555;
    font-size: 14px;
    line-height: 1.6;
}
.devo-col-left a {
    color: var(--color-primary);
    text-decoration: underline;
    font-weight: 600;
}
.envelope-icon svg {
    margin-bottom: 20px;
    fill: #F16A66; /* Ensure icon is red */
}

/* Right Column (Box) */
.devo-col-right {
    display: flex;
    justify-content: center;
}

.devo-box {
    border: 2px solid #F16A66; /* Red Border */
    padding: 40px;
    text-align: center;
    border-radius: 8px;
    width: 100%;
}

.devo-box p {
    font-size: 13px;
    color: #555;
    margin-bottom: 20px;
    line-height: 1.5;
}

/* Button */
.devo-button {
    display: inline-block;
    background-color: #333;
    color: #fff;
    padding: 10px 20px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    transition: background 0.2s;
}
.devo-button:hover {
    background-color: #000;
    color: #fff;
}

/* Text Lists */
.devoluciones-text-content {
    margin: 0 auto;
    color: #555;
    font-size: 14px;
    line-height: 1.8;
}

.devoluciones-text-content ul {
    padding-left: 20px;
}

.devoluciones-text-content li {
    margin-bottom: 10px;
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .devoluciones-top-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* =========================================
   PAGE: QUIENES SOMOS (/quienes-somos)
   ========================================= */

.mermoz-about-page {
    padding: 60px 0;
}

/* Text Styling */
.about-text-block {
    max-width: 900px;
    margin: 0 auto 60px auto; /* Bottom margin to separate from gallery */
    text-align: center;
    font-size: 16px;
    color: #555;
    line-height: 1.8;
}

.about-text-block p {
    margin-bottom: 20px;
}

.about-text-block strong {
    color: #333;
    font-weight: 700;
}

.about-text-block .last-line {
    font-weight: 600;
    color: #333;
    margin-top: 30px;
}

/* =========================================
   PAGE: FAQ (/faq)
   ========================================= */

.mermoz-faq-page {
    padding: 60px 0;
}

.faq-accordions-container {
    margin: 0 auto;
    border-top: 1px solid #eee;
}


.mermoz-faq-page .mermoz-details summary:hover {
    background-color: #f9f9f9;
    padding-left: 10px; /* Slide effect */
    padding-right: 10px;
    transition: all 0.2s;
}

.privacy-policy-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.privacy-policy-container {
    max-width: 900px;
    text-align: center;
    font-size: 16px;
    color: #555;
    line-height: 1.8;
}

.privacy-policy-container strong {
    font-weight: bold !important;
}

/* =========================================
   PAGE: BLOG / VIDEOS (/blog-3)
   ========================================= */

.mermoz-blog-page {
    padding: 40px 0;
}

/* Common Button Style */
.blog-btn {
    display: inline-block;
    background-color: #444;
    color: #fff;
    padding: 10px 20px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
    margin-top: 15px;
}
.blog-btn:hover {
    background-color: #000;
    color: #fff;
}

/* CONTAINER 1: Top Grid (20% - 50% - 20%) */
.blog-top-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2%; /* Approximate gap */
    margin-bottom: 30px;
}

.blog-intro-col {
    flex: 0 0 20%;
}
.blog-intro-col h2 {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 10px;
    color: #333;
}

.blog-img-col-wide {
    flex: auto;
}
.blog-img-col-narrow {
    flex: auto;
}

.blog-top-grid img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

/* CONTAINER 2: Mid Grid (45% - 45%) */
.blog-mid-grid {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
}

.blog-mid-img {
    flex: 0 0 48%; /* Use 48% to leave 4% gap */
}
.blog-mid-img img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

/* CONTAINER 4: Lifestyle Grid (20% - 75%) */
.blog-lifestyle-grid {
    display: flex;
    align-items: center;
    gap: 5%;
    margin: 40px 0;
}

.blog-carousel-col {
    flex: 0 0 75%;
    width: 75%; /* Force width for swiper */
    min-width: 0; /* CRITICAL FIX for Swiper inside Flexbox */
}
/* Override internal padding of video section when used here */
.blog-carousel-col .mermoz-video-section {
    padding: 0;
}

/* CONTAINER 5: Bottom Link Banner */
/*.blog-bottom-banner {*/
/*    border: 1px solid #E0F7FA; */
/*    padding: 30px;*/
/*    text-align: center;*/
/*    border-radius: 4px;*/
/*    margin-bottom: 40px;*/
/*    transition: box-shadow 0.2s;*/
/*}*/
/*.blog-bottom-banner:hover {*/
/*    box-shadow: 0 5px 15px rgba(0,0,0,0.05);*/
/*}*/

/*.blog-bottom-banner a {*/
/*    text-decoration: none;*/
/*}*/

.blog-bottom-banner h2 {
    font-size: 22px;
    font-weight: 600;
    color: #555;
    margin: 0;
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
    .blog-top-grid,
    .blog-mid-grid,
    .blog-lifestyle-grid {
        flex-direction: column;
        gap: 30px;
    }
    
    .blog-intro-col,
    .blog-img-col-wide,
    .blog-img-col-narrow,
    .blog-mid-img,
    .blog-carousel-col {
        flex: 0 0 100%;
        width: 100%;
    }
    
    .blog-intro-col {
        text-align: center;
    }
}

.text-banner-box.blog-bottom-banner {
    border: 4px solid #513F8F !important;
}

/* =========================================
   VIDEO GRID PAGE
   ========================================= */

.mermoz-video-archive-page {
    padding: 40px 0;
}

/* Grid Layout */
.video-grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 Columns */
    gap: 30px;
}

/* Hide items initially */
.hidden-video-item {
    display: none;
}

/* Animation for revealing */
.fade-in-item {
    animation: fadeInVideo 0.5s ease forwards;
}

@keyframes fadeInVideo {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Reuse existing .video-card styles from home, but ensure full height */
.vertical-card {
    height: 100%;
}

/* Mobile Responsive */
@media (max-width: 1024px) {
    .video-grid-container {
        grid-template-columns: repeat(2, 1fr); /* 2 Cols on Tablet */
    }
}

@media (max-width: 640px) {
    .video-grid-container {
        grid-template-columns: 1fr; /* 1 Col on Mobile */
        gap: 20px;
    }
}

/* --- PLAYLIST LINK CARD --- */
.playlist-card {
    background-color: #eee; /* Distinguish from white video cards */
    border: 2px dashed #ccc; /* Dashed border style */
    box-shadow: none; /* Flat look */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px; /* Ensure it matches approx height of video cards */
}

.playlist-card:hover {
    background-color: #e5e5e5;
    border-color: #999;
    transform: translateY(-5px);
}

.playlist-link {
    text-align: center;
    text-decoration: none;
    color: #555;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    width: 100%;
    height: 100%;
    justify-content: center;
    padding: 20px;
}

.playlist-link:hover {
    color: var(--color-primary); /* Turn red on hover */
}

.playlist-icon svg {
    transition: transform 0.3s ease;
}

.playlist-link:hover .playlist-icon svg {
    transform: scale(1.2) rotate(-5deg); /* Fun animation */
}

/* =========================================
   MINI CART (Slide-out & Items)
   ========================================= */

/* --- 1. CONTAINER & ANIMATION (Restored) --- */
.mini-cart-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

.mini-cart-overlay.open {
    opacity: 1;
    visibility: visible;
}

.mini-cart-panel {
    position: fixed;
    top: 0;
    right: -450px; /* Hidden off-screen */
    width: 400px;
    max-width: 100%;
    height: 100%;
    background: #fff;
    z-index: 9999;
    box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    transition: right 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
}

.mini-cart-panel.open {
    right: 0; /* Slide in */
}

/* --- 2. HEADER --- */
.mini-cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #eee;
    background: #fff;
}

.mini-cart-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 400;
    color: #333;
    display: flex;
    align-items: center;
    gap: 10px;
}

.close-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #333;
    padding: 0;
}

/* --- 3. CONTENT AREA --- */
.mini-cart-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.widget_shopping_cart_content {
    height: 100%;
    display: flex;
    flex-direction: column;
}

ul.woocommerce-mini-cart {
    flex: 1;
    margin: 0;
    padding: 0;
}

/* --- 4. PRODUCT ITEM (Custom PHP Layout) --- */
li.woocommerce-mini-cart-item {
    display: grid !important;
    grid-template-columns: 70px 1fr 30px !important; /* 3 Columns */
    gap: 15px;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #f5f5f5;
}

/* Col 1: Image */
.mini-cart-img { grid-column: 1; }
.mini-cart-img img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    border: 1px solid #eee;
    display: block;
}

/* Col 2: Content */
.mini-cart-info {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}
.mini-cart-info .product-name {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    line-height: 1.3;
    text-decoration: none;
}
.mini-cart-info .quantity {
    font-size: 13px;
    color: #777;
}

/* Col 3: Trash */
.mini-cart-remove {
    grid-column: 3;
    display: flex;
    justify-content: flex-end;
}
.mini-cart-remove a.remove {
    background: none !important;
    border: none !important;
    padding: 0;
    display: block;
}

/* Hide default remove button to avoid duplicates */
li.woocommerce-mini-cart-item a.remove:not(.remove_from_cart_button) {
    display: none !important;
}

/* --- 5. FOOTER BUTTONS --- */
.woocommerce-mini-cart__total {
    text-align: center;
    font-size: 18px;
    color: #333;
    border-top: 1px solid #eee;
    padding-top: 20px;
    margin-bottom: 20px;
}

.woocommerce-mini-cart__buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Reset Buttons */
.woocommerce-mini-cart__buttons .button,
.btn-continue-shopping {
    width: 100%;
    text-align: center;
    border-radius: 0;
    font-weight: 600;
    padding: 15px;
    text-transform: none;
    font-size: 16px;
    border: none;
    cursor: pointer;
    display: block;
    text-decoration: none;
    transition: background 0.2s;
}

/* Dark Grey Style */
.woocommerce-mini-cart__buttons .button,
.btn-continue-shopping {
    background-color: #444 !important;
    color: #fff !important;
}
.woocommerce-mini-cart__buttons .button:hover,
.btn-continue-shopping:hover {
    background-color: #222 !important;
}

/* --- 6. BADGE STYLING (Icon) --- */
.custom-icon-link {
    position: relative;
}

.cart-count-badge {
    position: absolute;
    top: -5px;
    right: -8px;
    background-color: var(--color-primary);
    color: white;
    font-size: 10px;
    font-weight: bold;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #fff;
}

/* =========================================
   CART PAGE
   ========================================= */

/* Hide the big "Carrito" title */
.woocommerce-cart .entry-header {
    display: none;
}

/* Ensure content takes full width (Storefront can be stubborn) */
.woocommerce-cart .content-area {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}

/* =========================================
   MOBILE HEADER & NAV
   ========================================= */

/* Hide Desktop on Mobile */
@media (max-width: 768px) {
    .desktop-only-header {
        display: none;
    }
    
    div#content {
        display: flex !important;
        justify-content: center !important;
    }
}

/* Hide Mobile on Desktop */
@media (min-width: 769px) {
    .mobile-only-header,
    .mobile-bottom-nav {
        display: none !important;
    }
}

/* --- MOBILE TOP HEADER --- */
.mobile-only-header {
    background: #fff;
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
    position: sticky;
    top: 0;
    z-index: 999;
}

/* Row 1: Menu | Logo | Cart */
.mobile-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.mobile-logo img {
    height: 35px; /* Adjust height */
    width: auto;
}

.mobile-menu-toggle, .mobile-back-btn {
    background: none;
    border: none;
    padding: 0;
    color: #333;
}

.mobile-cart-link {
    color: #333;
    position: relative;
}

/* Row 2: Back | Search */
.mobile-search-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mobile-search-form {
    flex-grow: 1;
    display: flex;
    align-items: center;
    background: #f5f5f5; /* Light grey background */
    border-radius: 4px;
    padding: 5px 10px;
    border: 1px solid #eee;
}

.mobile-search-form input {
    width: 100%;
    border: none;
    background: transparent;
    padding: 5px;
    font-size: 14px;
    outline: none;
}

.mobile-search-form button {
    background: transparent;
    border: none;
    color: #999;
}


/* --- BOTTOM STICKY NAV --- */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    border-top: 1px solid #ddd;
    display: flex;
    justify-content: space-around;
    padding: 10px 0;
    z-index: 9999;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}

.mobile-bottom-nav .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #666;
    font-size: 11px;
    gap: 4px;
}

.mobile-bottom-nav .nav-item svg {
    width: 22px;
    height: 22px;
    stroke-width: 2px;
}

.mobile-bottom-nav .nav-item.active,
.mobile-bottom-nav .nav-item:hover {
    color: var(--color-primary);
}


.mobile-search-row form {
    margin-bottom: 0px !important;
}

/* =========================================
   MOBILE MENU (Slide-out)
   ========================================= */

/* Overlay */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s;
}
.mobile-menu-overlay.open { opacity: 1; visibility: visible; }

/* Panel */
.mobile-menu-panel {
    position: fixed;
    top: 0;
    left: -350px; /* Hidden Left */
    width: 320px;
    height: 100%;
    background: #fff;
    z-index: 9999;
    box-shadow: 5px 0 15px rgba(0,0,0,0.1);
    transition: left 0.3s ease;
    display: flex;
    flex-direction: column;
}
.mobile-menu-panel.open { left: 0; }

/* Close Button */
.mobile-menu-panel .close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 30px;
    z-index: 10;
}

/* Tabs Header */
.mobile-menu-tabs {
    display: flex;
    margin-top: 50px; /* Space for close btn */
}

.mobile-tab-btn {
    flex: 1;
    background: #ccc;
    border: none;
    padding: 15px 0;
    font-weight: 700;
    color: #555;
    font-size: 13px;
    cursor: pointer;
}
.mobile-tab-btn.active {
    background: #fff;
    color: #000;
    border-bottom: 2px solid transparent; /* Or accent color */
}

/* Content Area */
.mobile-tab-content {
    display: none;
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}
.mobile-tab-content.active { display: block; }

/* -- TAB 1: MAIN MENU -- */
.mobile-main-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.mobile-main-nav li {
    margin-bottom: 20px;
    text-align: center;
}
.mobile-main-nav a {
    text-decoration: none;
    color: #333;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
}

/* Special Offer Button */
.mobile-main-nav .btn-ofertas a {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-primary);
    color: #fff;
    padding: 10px;
    border-radius: 4px;
}

/* -- TAB 2: FILTERS (Reusing classes) -- */
/* We just need to ensure the accordions work visually in this context */
.mobile-filters-wrapper .widget {
    margin-bottom: 20px;
}

.mobile-filters-wrapper .widget-title {
    background: #f5f5f5;
    color: #333;
    padding: 15px;
    margin: 0;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
}

/* =========================================
   MOBILE BANNERS LOGIC
   ========================================= */

/* 1. Default (Desktop): Hide the bottom mobile banners */
.mobile-promo-banners {
    display: none;
}

/* 2. Default (Desktop): Show the side banners in Hero */
.hero-side-banners-desktop {
    display: flex;
    gap: 10px;
}

.hero-col-main {
    width: 60%;
}

/* --- MOBILE BREAKPOINT (768px) --- */
@media (max-width: 768px) {
    
    /* 1. Hide Desktop Side Banners */
    .hero-side-banners-desktop {
        display: none !important;
    }

    /* 2. Make Main Slider Full Width */
    .hero-col-main {
        width: 100% !important;
    }

    /* 3. Show Mobile Banners Section */
    .mobile-promo-banners {
        display: block !important;
        margin-top: 30px;
        margin-bottom: 30px;
    }

    /* 4. Style Mobile Grid (2 Cols Side-by-Side) */
    .mobile-promo-grid {
        display: flex;
        gap: 10px;
        justify-content: space-between;
    }

    .promo-link {
        width: 50%; /* Equal width */
    }

    .promo-link img {
        width: 100%;
        height: auto;
        border-radius: 4px;
        display: block;
    }
}


/* =========================================
   MOBILE FILTER DRAWER
   ========================================= */

/* Default: Hide Mobile Trigger */
.mobile-filter-trigger {
    display: none;
    width: 100%;
    margin-bottom: 20px;
}

/* The Button Style (Dark Grey like screenshot) */
.filter-toggle-btn {
    width: 100%;
    background-color: #333;
    color: #fff;
    border: none;
    padding: 12px;
    font-weight: 600;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
}

/* Drawer Header */
.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    background: #fff;
}
.drawer-header h3 { margin: 0; font-size: 18px; font-weight: 700; }

/* Drawer Footer */
.drawer-footer {
    padding: 15px;
    border-top: 1px solid #eee;
    background: #fff;
    margin-top: auto;
}

/* --- RESPONSIVE LOGIC --- */
@media (max-width: 768px) {
    /* Show Trigger */
    .mobile-filter-trigger { display: block; }
    
    /* Hide Desktop Sidebar */
    .mermoz-shop-sidebar.desktop-only { display: none; }
    
    /* Reuse Mobile Menu Panel styles for Filter Panel */
    .filter-panel {
        left: -100%; /* Ensure it starts hidden left */
        width: 85%;  /* Slightly wider than menu maybe */
        max-width: 350px;
    }
}

/* =========================================
   STICKY FILTER BUTTON (Mobile)
   ========================================= */

.sticky-filter-btn {
    position: fixed;
    bottom: 50%; /* Sits above the bottom menu bar */
    left: 0px;  /* Float on the right (Thumb zone) */
    width: 70px;
    height: 50px;
    background-color: white; /* Dark Grey */
    color: #fff;
    border: 1px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    z-index: 990; /* Below the modal (9999) but above content */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    
    /* Animation States */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* State: Visible */
.sticky-filter-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.sticky-filter-btn svg {
    width: 22px;
    height: 22px;
}

/* Hide on Desktop */
@media (min-width: 769px) {
    .sticky-filter-btn { display: none !important; }
}

/* --- FLOATING WHATSAPP BUTTON --- */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 10px; /* 10px from bottom */
    right: 10px;  /* 10px from right */
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 10000; /* Ensure it stays on top */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.whatsapp-float:hover {
    background-color: #128c7e;
    transform: scale(1.1); /* Slight zoom on hover */
    box-shadow: 2px 2px 6px #666;
}

.whatsapp-float svg {
    width: 35px;
    height: 35px;
    margin-top: 2px; /* Visual adjustment */
}

/* --- WHATSAPP MOBILE ADJUSTMENT --- */
@media (max-width: 768px) {
    .whatsapp-float {
        /* Move it up 80px to clear the Sticky Bottom Nav */
        bottom: 80px !important; 
        /* Keep it slightly away from the edge */
        right: 15px !important;
        /* Optional: Make it slightly smaller on mobile if you want */
        width: 50px;
        height: 50px;
        font-size: 24px;
    }

    .whatsapp-float svg {
        width: 28px;
        height: 28px;
    }
    
    .footer-heading {
        text-align: center !important;
    }
}