/* ============================================
   COCCOLINO: MOM & BABY - Custom Branding
   ============================================ */

:root {
  /* Coccolino Brand Colors - Warm & Soft */
  --primary-color: #735236;         /* Marrón cálido */
  --primary-hover: #5c4229;
  --primary-light: #A6785D;         /* Marrón medio */
  --primary-glow: rgba(115, 82, 54, 0.25);
  --primary-gradient: linear-gradient(135deg, #735236 0%, #A6785D 50%, #F2CEAE 100%);

  /* Secondary / Accent - Pink Tones */
  --secondary-color: #F2C1B6;       /* Rosa suave */
  --secondary-hover: #e5aa9e;
  --accent-color: #735236;          /* Marrón como acento */
  --accent-warm: #F2C1B6;           /* Rosa suave */

  /* Surfaces - Cream & Warm Tones */
  --bg-color: #F2EEEB;              /* Crema suave */
  --bg-dark: #3d2b1f;               /* Marrón oscuro para dark sections */
  --bg-darker: #2a1f16;
  --card-bg: #ffffff;               /* Blanco para tarjetas */
  --card-bg-hover: #fefefe;
  --surface-elevated: rgba(255, 255, 255, 0.95);
  --surface-warm: #F2CEAE;          /* Beige claro */

  /* Text - Warm Browns */
  --text-color: #3d2b1f;            /* Marrón oscuro para texto principal */
  --text-secondary: #735236;        /* Marrón medio */
  --text-muted: #A6785D;            /* Marrón claro */
  --text-on-dark: #F2EEEB;          /* Crema en fondos oscuros */
  --text-on-primary: #ffffff;
  --text-primary: var(--text-color);

  /* Borders & Dividers - Soft Beiges */
  --border-color: #F2CEAE;          /* Beige claro */
  --border-light: #F2EEEB;
  --divider: rgba(115, 82, 54, 0.1);
}

/* =========================
   HEADER (AUTO HEIGHT) + LOGO
   Desktop: logo centrado
   Tablet/Móvil: logo izquierda
   ========================= */

/* Header Overrides - Warm Theme */
.main-header {
  background: rgba(61, 43, 31, 0.95);
  border-bottom: 1px solid rgba(242, 206, 174, 0.2);
  height: auto !important; /* por si en el theme base hay height fijo */
  top: 0 !important;
  z-index: 10010;
}

.main-header.scrolled {
  background: rgba(61, 43, 31, 0.98);
}

/* 3 columnas: nav | logo | acciones (DESKTOP) */
.main-header .container{
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;

  /* Auto-height (crece con el logo) */
  min-height: unset !important;
  height: auto !important;
  padding: 14px 0;
}

/* Alineaciones por columna */
.main-nav{ justify-self: start; }
.logo{ justify-self: center; display:flex; align-items:center; justify-content:center; padding: 4px 0; }
.header-actions{ justify-self: end; }

/* Logo text fallback */
.logo h1,
.logo h1 a {
  color: #F2CEAE !important;
}

/* Logo imagen (controlado) */
.logo img{
  display: block;
  width: auto !important;
  height: auto !important;
  max-height: 120px !important; /* Desktop */
}

/* Tablet */
@media (max-width: 1024px){
  .logo img{
    max-height: 120px !important;
  }
}

/* Móvil */
@media (max-width: 768px){
  .logo img{
    max-height: 80px !important;
  }
}


/* =========================
   NAVIGATION LINKS
   ========================= */
.main-nav a {
  color: #F2CEAE !important;
}

.main-nav a:hover,
.main-nav a.active {
  color: #ffffff !important;
}

.main-nav a::after {
  background: #F2C1B6; /* Rosa suave para underline */
}

/* =========================
   BUTTONS
   ========================= */
.btn-primary {
  background: #735236;
  color: #ffffff;
}

.btn-primary:hover {
  background: #5c4229;
}

.btn-secondary {
  background: linear-gradient(135deg, #F2C1B6, #e5aa9e);
  color: #3d2b1f;
}

.btn-secondary:hover {
  box-shadow: 0 8px 25px rgba(242, 193, 182, 0.4);
}

/* =========================
   HERO
   ========================= */
.hero-section {
  background: linear-gradient(135deg, #F2EEEB 0%, #F2CEAE 50%, #F2EEEB 100%);
  color: #3d2b1f;
}

.hero-section h1,
.hero-section .hero-title {
  color: #735236;
}

.hero-section p,
.hero-section .hero-subtitle {
  color: #3d2b1f;
}

/* =========================
   PRODUCT CARDS
   ========================= */
.product-card {
  border: 1px solid #F2CEAE;
}

.product-card:hover {
  border-color: #F2C1B6;
  box-shadow: 0 12px 24px rgba(115, 82, 54, 0.15);
}

.product-card .product-price {
  color: #735236;
}

/* =========================
   FOOTER
   ========================= */
.main-footer {
  background: #3d2b1f;
  color: #F2EEEB;
}

.main-footer h3,
.main-footer h4 {
  color: #F2CEAE;
}

/* =========================
   MISC
   ========================= */
.cart-count {
  background: #F2C1B6;
  border-color: #3d2b1f;
  color: #3d2b1f;
}

a:hover {
  color: #735236;
}

.discount-badge {
  background: #F2C1B6;
  color: #3d2b1f;
}

.search-overlay {
  background: rgba(61, 43, 31, 0.98);
}

.toast-success,
.alert-success {
  background: #F2C1B6;
  color: #3d2b1f;
  border-color: #e5aa9e;
}
@media (max-width: 1024px) {
  .main-header .container {
    grid-template-columns: auto 1fr auto !important;
    padding: 12px 1rem !important;
  }

  .logo {
    justify-self: start;
  }

  .logo img {
    max-height: 56px !important;
    max-width: 180px;
  }

  .mobile-menu-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: #F2CEAE !important;
  }

  .header-actions {
    gap: 0.5rem;
  }
}

@media (max-width: 1024px) {
  .main-header {
    background: rgba(61, 43, 31, 0.98) !important;
  }

  .main-header .container {
    grid-template-columns: auto 1fr auto !important;
    padding: 10px 1rem !important;
  }

  .logo {
    justify-self: start !important;
  }

  .logo img {
    max-height: 52px !important;
    max-width: 170px;
  }

  .mobile-menu-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    color: #F2EEEB !important;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(242, 206, 174, 0.16);
  }

  .header-actions {
    gap: 0.45rem;
  }
}


/* Moved from header.php inline styles */
:root {
            /* Forzamos el ADN de marca puro para botones o barras */
            --primary-color: #735236 !important;
            --secondary-color: #F2C1B6 !important;
        }
        
        /* 1. GLASSMORPHISM UNIVERSAL (SIEMPRE CRISTALINO, NUNCA CAFÉ NI MORADO) */
        /* Al agrupar .main-header y .main-header.scrolled obligamos a que siempre sea cristal */
        .main-header, .main-header.scrolled {
            background-color: rgba(255, 255, 255, 0.40) !important; /* Cristal transparente al 40% */
            backdrop-filter: blur(28px) !important; /* Desenfoque extremo de Apple */
            -webkit-backdrop-filter: blur(28px) !important;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important;
            transition: all 0.4s ease;
        }

        /* 2. TEXTOS Y VECTORES OSCUROS SIEMPRE (Incluye Menú Hamburguesa) */
        .main-header .mobile-menu-toggle,
        .main-header .mobile-menu-toggle svg,
        .main-header .main-nav ul li a,
        .main-header .header-actions .nav-icon,
        .main-header .header-actions .nav-icon svg,
        .main-header .header-actions button,
        .main-header.scrolled .mobile-menu-toggle,
        .main-header.scrolled .mobile-menu-toggle svg,
        .main-header.scrolled .main-nav ul li a,
        .main-header.scrolled .header-actions .nav-icon,
        .main-header.scrolled .header-actions .nav-icon svg,
        .main-header.scrolled .header-actions button {
            color: #1e293b !important;
            stroke: #1e293b !important;
        }

        /* 3. SUBRAYADO CINÉTICO EN EL MENÚ */
        .main-nav ul li a {
            position: relative;
            text-decoration: none;
            padding-bottom: 6px; 
            transition: color 0.3s ease;
        }
        .main-nav ul li a::after {
            content: '';
            position: absolute;
            width: 0%;
            height: 2px;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            background-color: var(--secondary-color, #F2C1B6) !important;
            transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            border-radius: 2px;
        }
        .main-nav ul li a:hover::after,
        .main-nav ul li a.active::after {
            width: 100%;
        }

        /* 4. BURBUJAS TÁCTILES EN ICONOS SUPERIORES */
        .header-actions .nav-icon {
            position: relative;
            transition: all 0.3s ease;
            border-radius: 50%;
            padding: 8px; 
            margin-right: 2px;
        }
        .header-actions .nav-icon:hover {
            background-color: rgba(0, 0, 0, 0.05); 
            transform: translateY(-2px);
        }

        /* 5. LATIDO (PULSE) CONSTANTE EN LA BOLITA DEL CARRITO */
        .cart-count {
            animation: cart-pulse 2s infinite cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
        }
        @keyframes cart-pulse {
            0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
            50% { transform: scale(1.05); box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
            100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
        }

        /* 6. FONDO PREMIUM PARA EL ANNOUNCEMENT BAR (Top Bar con animación) */
        .announcement-bar {
            background: linear-gradient(90deg, #735236, #F2C1B6) !important;
            background-size: 200% 200% !important;
            animation: gradient-flow 6s ease infinite;
            border-bottom: none !important;
            color: #ffffff !important;
            font-weight: 500;
            position: relative !important;
            top: auto !important;
            z-index: 2 !important;
        }
        @keyframes gradient-flow {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
    
            .u-text-center {
            text-align: center;
        }

        .u-mb-1 {
            margin-bottom: 1rem;
        }

        .u-mb-15 {
            margin-bottom: 1.5rem;
        }

        .u-mb-2 {
            margin-bottom: 2rem;
        }

        .u-mb-3 {
            margin-bottom: 3rem;
        }

        .u-pt-8 {
            padding-top: 8rem;
        }

        .u-pb-5 {
            padding-bottom: 5rem;
        }

        .u-fw-600 {
            font-weight: 600;
        }

        .u-fw-700 {
            font-weight: 700;
        }

        .u-text-muted {
            color: var(--text-muted);
        }

        .u-alert-success-soft {
            margin-bottom: 1.5rem;
            background: #dcfce7;
            color: #166534;
            padding: 1rem;
            border-radius: 8px;
        }

        .u-alert-error-soft {
            margin-bottom: 1.5rem;
            background: #fee2e2;
            color: #991b1b;
            padding: 1rem;
            border-radius: 8px;
        }

        .u-label-block {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 600;
        }

        .u-card-lite {
            background: #f8fafc;
            border: 1px solid var(--border-light);
        }

        .u-flex-center-wrap {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
        }
        
        .cart-img-preview--empty {
            background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
        }


/* Moved from index.php inline styles */
/* =========================================
       ESTRATEGIA PREMIUM: COCCOLINO INDEX
       ========================================= */
    
    /* 1. HERO SECTION PREMIUM (Insignia Flotante y Botones Elásticos) */
            .hero-badge {
                background: rgba(255, 255, 255, 0.2) !important;
                backdrop-filter: blur(8px) !important;
                -webkit-backdrop-filter: blur(8px) !important;
                border: 1px solid rgba(255, 255, 255, 0.4) !important;
                box-shadow: 0 4px 15px rgba(0,0,0,0.1);
                animation: floating-badge 3s ease-in-out infinite;
            }
            @keyframes floating-badge {
                0% { transform: translateY(0px); }
                50% { transform: translateY(-6px); }
                100% { transform: translateY(0px); }
            }
            
            .hero-actions .btn {
                transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease !important;
            }
            .hero-actions .btn:hover {
                transform: translateY(-4px) scale(1.02) !important;
                box-shadow: 0 10px 25px rgba(0,0,0,0.2) !important;
            }
            
            /* 2. CATEGORY SHOWCASE (Fotos 3D con bordes iPhone y Zoom lento) */
            .category-tile {
                border-radius: 24px !important;
                overflow: hidden;
                transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.55s ease !important;
                box-shadow: 0 4px 10px rgba(0,0,0,0.05);
            }
            .category-tile-bg {
                transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) !important;
            }
            .category-tile-overlay {
                background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%) !important;
            }
            
            /* 3. TARJETAS DE PRODUCTO VIP (Trending y Top Ventas - Cero Gravedad) */
            .product-card {
                border-radius: 20px !important;
                border: 1px solid rgba(0,0,0,0.03) !important;
                background: #ffffff;
                transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease !important;
                overflow: hidden;
            }

            @media (hover: hover) and (pointer: fine) {
                .category-tile:hover {
                    transform: translateY(-4px) !important;
                    box-shadow: 0 14px 26px rgba(0,0,0,0.1) !important;
                }

                .category-tile:hover .category-tile-bg {
                    transform: scale(1.045) !important;
                }

                .product-card:hover {
                    transform: translateY(-5px) scale(1.01) !important;
                    box-shadow: 0 18px 32px rgba(0,0,0,0.08) !important;
                }
            }

            @media (hover: none) {
                .category-tile:hover,
                .product-card:hover {
                    transform: none !important;
                    box-shadow: inherit !important;
                }

                .category-tile:hover .category-tile-bg {
                    transform: none !important;
                }
            }
            .product-card-img {
                transition: transform 0.6s ease !important;
            }
            
            /* Botón Añadir Rápido Oculto (Aparición Fluida "Ninja") */
            .product-card .quick-add {
                opacity: 0;
                transform: translateY(15px);
                transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
                pointer-events: none; /* Inactivo hasta que pasen el cursor */
            }

            @media (hover: hover) and (pointer: fine) {
                .product-card:hover .product-card-img {
                    transform: scale(1.03) !important;
                }

                .product-card:hover .quick-add {
                    opacity: 1;
                    pointer-events: auto;
                    transform: translateY(-10px); /* Sube hacia el centro */
                }
            }

            @media (hover: none) {
                .product-card:hover .product-card-img {
                    transform: none !important;
                }
            }
            
            /* 4. MEDALLAS DE CONFIANZA (Iconos con Rebote y Sombra) */
            .trust-item {
                transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.65s ease, background-color 0.65s ease;
                padding: 20px !important;
                border-radius: 20px !important;
                background: #ffffff;
                box-shadow: 0 6px 18px rgba(0,0,0,0.03);
            }
            .trust-icon {
                display: inline-block;
                transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), filter 0.8s ease !important;
                animation: trust-icon-lottie 4.8s ease-in-out infinite;
            }
            
            /* 5. BANNER PROMOCIONAL (Bordes Ultra-Suaves) */
            .promo-card {
                border-radius: 30px !important;
                overflow: hidden;
                box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important;
                transition: transform 0.4s ease;
            }
            .promo-card:hover {
                transform: scale(1.02);
            }
            /* Agrandamiento Vectorial de Íconos al 50% (36px) */
                .trust-icon svg {
                    width: 36px !important;
                    height: 36px !important;
                    stroke-width: 1.5px !important; /* Mantiene el trazo elegante al crecer */
                    color: #735236 !important; /* Opcional: Esto los pintará de color marrón corporativo. Si prefieres negro, puedes borrar esta línea */
            }

            @media (hover: hover) and (pointer: fine) {
                .trust-item:hover {
                    transform: translateY(-4px) scale(1.01) !important;
                    box-shadow: 0 16px 30px rgba(115,82,54,0.08) !important;
                    background: linear-gradient(180deg, #ffffff 0%, #fffaf6 100%) !important;
                }

                .trust-item:hover .trust-icon {
                    transform: translateY(-2px) scale(1.06) !important;
                    filter: drop-shadow(0 6px 14px rgba(115,82,54,0.12));
                }
            }

            @keyframes trust-icon-lottie {
                0% { transform: translateY(0) scale(1) rotate(0deg); }
                20% { transform: translateY(-2px) scale(1.015) rotate(-1deg); }
                50% { transform: translateY(-4px) scale(1.03) rotate(1deg); }
                80% { transform: translateY(-2px) scale(1.015) rotate(-0.5deg); }
                100% { transform: translateY(0) scale(1) rotate(0deg); }
            }


/* Moved from store.php inline styles */
.store-breadcrumb {
            margin-bottom: 0.9rem;
        }

        .store-heading-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
            align-items: center;
            margin-top: 0.85rem;
        }

        .store-results-count {
            display: inline-flex;
            align-items: center;
            padding: 0.45rem 0.8rem;
            border-radius: 999px;
            background: #f4ede7;
            color: #8d5b39;
            font-size: 0.88rem;
            font-weight: 700;
        }

        .store-heading-note {
            color: #8b735f;
            font-size: 0.92rem;
            line-height: 1.45;
        }

        .category-filter-link {
            display: flex !important;
            align-items: center;
            justify-content: space-between;
            gap: 0.8rem;
        }

        .category-filter-name {
            display: inline-flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 0;
            min-width: 0;
        }

        .category-filter-indent {
            display: inline-block;
            width: 14px;
            flex: 0 0 14px;
        }

        .category-filter-count {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 30px;
            height: 30px;
            padding: 0 0.55rem;
            border-radius: 999px;
            background: #f8f1ea;
            color: #9a6f4b;
            font-size: 0.8rem;
            font-weight: 700;
            flex-shrink: 0;
        }

        .filters-sidebar a.active .category-filter-count {
            background: rgba(255, 255, 255, 0.2);
            color: #ffffff;
        }

        @media (max-width: 768px) {
            .store-heading-meta {
                gap: 0.55rem;
            }

            .store-results-count {
                font-size: 0.82rem;
            }

            .store-heading-note {
                font-size: 0.85rem;
            }

            .category-filter-count {
                min-width: 28px;
                height: 28px;
                font-size: 0.76rem;
            }
        }

/* ==============================================
   ADMIN: Clases compartidas (extraídas de vistas)
   ============================================== */

/* Badges de estado para pasarelas de pago y módulos admin */
.badge-active {
    background: #dcfce7;
    color: #15803d;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    display: inline-block;
}

.badge-inactive {
    background: #f1f5f9;
    color: #64748b;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    display: inline-block;
}

/* Ícono cuadrado para pasarelas de pago */
.gateway-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 800;
    flex-shrink: 0;
}

/* Toggle switch reutilizable en formularios admin */
.admin-toggle-switch {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    color: #475569;
}

/* Btn guardar de ancho completo admin (pasarelas, settings) */
.btn-save-full {
    background: #6366f1;
    color: white;
    border: none;
    padding: 1rem 1.5rem;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 700;
    transition: all 0.3s;
    width: 100%;
    font-family: inherit;
    font-size: 0.95rem;
}

.btn-save-full:hover {
    background: #4f46e5;
    transform: translateY(-1px);
    box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.2);
}

/* ==============================================
   ADMIN: Premium Sidebar Redesign
   ============================================== */

/* Contenedor del sidebar: tonos cálidos y fondo limpio */
.admin-sidebar {
    background: #ffffff !important;
    border-right: 1px solid rgba(115, 82, 54, 0.1) !important;
    box-shadow: 4px 0 24px rgba(115, 82, 54, 0.03) !important;
}

/* Marca / Logo */
.admin-sidebar .sidebar-brand {
    border-bottom: 1px solid rgba(115, 82, 54, 0.08) !important;
    padding: 1.5rem !important;
}

.admin-sidebar .sidebar-site-name {
    color: #3d2b1f !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}

/* Títulos de secciones */
.admin-sidebar .nav-section-label {
    color: #A6785D !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    padding-left: 1.5rem !important;
    margin-top: 1.75rem !important;
    margin-bottom: 0.5rem !important;
}

/* Enlaces principales */
.admin-sidebar .nav-link {
    color: #5c4229 !important;
    font-weight: 500 !important;
    padding: 0.8rem 1.5rem !important;
    border-left: 3px solid transparent !important;
    border-radius: 0 !important; /* Borde izquierdo */
    transition: all 0.2s ease !important;
    font-family: 'Inter', sans-serif !important;
}

.admin-sidebar .nav-link:hover {
    background: rgba(115, 82, 54, 0.04) !important;
    color: #3d2b1f !important;
}

/* Estado activo: Borde izquierdo fuerte y fondo suave */
.admin-sidebar .nav-link.active {
    background: rgba(115, 82, 54, 0.08) !important;
    color: #735236 !important;
    font-weight: 700 !important;
    border-left: 3px solid #735236 !important;
    box-shadow: none !important;
}

/* Íconos Lucide */
.admin-sidebar .nav-icon {
    width: 20px !important;
    height: 20px !important;
    margin-right: 12px !important;
    color: #A6785D !important;
    stroke-width: 1.5px !important;
    transition: color 0.2s ease !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

.admin-sidebar .nav-link:hover .nav-icon {
    color: #735236 !important;
}

.admin-sidebar .nav-link.active .nav-icon {
    color: #735236 !important;
    stroke-width: 2px !important;
}

/* Submenús */
.admin-sidebar .nav-submenu {
    background: rgba(115, 82, 54, 0.015) !important;
    border-left: 1px solid rgba(115, 82, 54, 0.1) !important;
    margin-left: 2rem !important;
    padding-left: 0.5rem !important;
}

.admin-sidebar .nav-sublink {
    color: #735236 !important;
    opacity: 0.8 !important;
    font-weight: 400 !important;
    font-size: 0.9rem !important;
    padding: 0.6rem 1rem !important;
    display: flex !important;
    align-items: center !important;
}

.admin-sidebar .nav-sublink:hover {
    opacity: 1 !important;
    color: #3d2b1f !important;
}

.admin-sidebar .nav-sublink.active {
    font-weight: 600 !important;
    color: #735236 !important;
    opacity: 1 !important;
}

.admin-sidebar .nav-subicon {
    width: 16px !important;
    height: 16px !important;
    margin-right: 8px !important;
    stroke-width: 1.5px !important;
    color: #A6785D !important;
}

/* ==============================================
   COCCOLINO VISUAL CLOSURE PASS
   Global admin + storefront cleanup
   ============================================== */

:root {
    --coco-page-bg: #f7f3ef;
    --coco-admin-bg: #f6f4f1;
    --coco-surface: #ffffff;
    --coco-surface-soft: #fbf8f5;
    --coco-line: rgba(115, 82, 54, 0.14);
    --coco-line-strong: rgba(115, 82, 54, 0.24);
    --coco-shadow: 0 12px 32px rgba(61, 43, 31, 0.08);
    --coco-shadow-soft: 0 8px 22px rgba(61, 43, 31, 0.06);
    --coco-radius: 8px;
    --coco-radius-sm: 6px;
    --coco-gutter: clamp(1rem, 2vw, 2rem);
    --coco-section-gap: clamp(2.25rem, 5vw, 4.5rem);
}

html {
    min-width: 320px;
    background: var(--coco-page-bg);
}

body {
    text-rendering: optimizeLegibility;
}

body:not(.admin-panel):not(.admin-login-page) {
    background: var(--coco-page-bg);
}

a,
button,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}

button,
.btn,
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-outline-dark,
.btn-danger,
.btn-checkout,
.add-to-cart,
.quick-add,
.action-btn,
.status-pill,
.upload-btn,
.btn-save-full {
    min-height: 40px;
    border-radius: var(--coco-radius-sm) !important;
    font-family: inherit;
}

button:disabled,
.btn:disabled,
.btn[disabled],
input:disabled,
select:disabled,
textarea:disabled {
    cursor: not-allowed !important;
    opacity: 0.62 !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid rgba(115, 82, 54, 0.22) !important;
    outline-offset: 2px;
}

.container,
.checkout-container,
.page-container,
.page-content,
.content-page,
.success-container {
    width: min(calc(100% - (var(--coco-gutter) * 2)), 1320px);
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
}

.page-container,
.page-content,
.auth-section,
.orders-page,
.contact-page,
.product-detail-page,
.content-page {
    padding-top: clamp(2rem, 4vw, 3.75rem);
    padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.section-spacing-top {
    padding-top: 0 !important;
}

.section-header {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.section-header.mb-2,
.section-header.mb-3 {
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem) !important;
}

.section-title,
.content-page__title,
.product-title-large,
.success-hero__title {
    color: #3d2b1f;
    letter-spacing: 0 !important;
    line-height: 1.12;
    text-wrap: balance;
}

.section-subtitle,
.content-page__intro,
.success-hero__subtitle,
.text-muted {
    color: #776554 !important;
    line-height: 1.65;
}

.card,
.auth-card,
.contact-card,
.contact-form,
.cart-summary-card,
.cart-items-wrapper,
.checkout-step,
.summary-card,
.purchase-actions-card,
.success-summary-card,
.account-table-card,
.empty-state,
.order-card,
.order-downloads-card,
.detail-note-card,
.combo-component-wrapper,
.combo-component-card,
.profile-card,
.profile-section,
.form-card,
.panel-card,
.campaign-panel,
.finance-card,
.finance-kpi-card,
.migration-card,
.admin-login-card {
    border: 1px solid var(--coco-line) !important;
    border-radius: var(--coco-radius) !important;
    box-shadow: var(--coco-shadow-soft) !important;
    background: var(--coco-surface) !important;
}

.alert,
.ui-error-box,
.u-alert-success-soft,
.u-alert-error-soft,
.newsletter-inline-message {
    border-radius: var(--coco-radius-sm) !important;
    border-width: 1px !important;
    line-height: 1.5;
}

.alert-success,
.u-alert-success-soft,
.newsletter-inline-message--success {
    background: #ecfdf3 !important;
    border-color: #bbf7d0 !important;
    color: #166534 !important;
}

.alert-error,
.alert-danger,
.u-alert-error-soft,
.newsletter-inline-message--error,
.ui-error-box {
    background: #fef2f2 !important;
    border-color: #fecaca !important;
    color: #991b1b !important;
}

.alert-info {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #1e40af !important;
}

.alert-warning {
    background: #fffbeb !important;
    border-color: #fde68a !important;
    color: #92400e !important;
}

.styled-form,
.sensitive-form,
.contact-form,
.profile-security-form,
.category-form {
    display: grid;
    gap: 1rem;
}

.form-group,
.field-group,
.pos-form-field,
.contact-form-group {
    min-width: 0;
}

.form-group label,
.field-group label,
.pos-form-field label,
.contact-form label,
.styled-form label {
    display: block;
    margin-bottom: 0.45rem;
    color: #5c4229;
    font-weight: 700;
    line-height: 1.35;
}

.form-control,
.form-select,
.styled-form input,
.styled-form select,
.styled-form textarea,
.sensitive-form input,
.sensitive-form select,
.sensitive-form textarea,
.contact-form-field,
.campaign-input,
.campaign-textarea,
.qty-input,
.admin-table input,
.admin-table select,
.admin-table textarea,
.rate-table input,
.rate-table select,
.rate-table textarea {
    width: 100%;
    max-width: 100%;
    border: 1px solid var(--coco-line-strong) !important;
    border-radius: var(--coco-radius-sm) !important;
    background: #fff !important;
    color: #3d2b1f;
    min-height: 42px;
}

.styled-form textarea,
.sensitive-form textarea,
.form-control textarea,
textarea.form-control,
.campaign-textarea {
    min-height: 112px;
    resize: vertical;
}

.form-row,
.settings-grid,
.contact-grid,
.info-grid,
.pos-form-grid,
.campaign-grid,
.category-form__grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) !important;
    gap: 1rem !important;
    align-items: start;
}

.form-actions,
.modal-actions,
.category-modal__actions,
.pos-modal__actions,
.custom-modal-actions,
.profile-orders-actions,
.success-actions,
.cart-actions-wrapper,
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.form-actions,
.modal-actions,
.category-modal__actions,
.pos-modal__actions {
    justify-content: flex-end;
}

/* Admin shell */
body.admin-panel {
    background: var(--coco-admin-bg) !important;
    color: #3d2b1f;
}

.admin-layout {
    background: var(--coco-admin-bg) !important;
    min-width: 0;
}

.admin-sidebar {
    position: sticky !important;
    top: 0 !important;
    width: 268px !important;
    height: 100vh !important;
    min-height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin;
}

.admin-sidebar .sidebar-brand {
    position: sticky;
    top: 0;
    z-index: 2;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
}

.admin-sidebar .sidebar-nav ul {
    padding: 0.75rem 0 1.5rem !important;
}

.admin-sidebar .nav-link,
.admin-sidebar .nav-sublink {
    min-height: 42px;
    line-height: 1.35;
    gap: 0.25rem;
}

.admin-sidebar .nav-link span:first-child,
.admin-sidebar .nav-group-toggle span:first-child {
    min-width: 0;
}

.admin-content {
    flex: 1 1 auto;
    min-width: 0 !important;
    overflow-x: hidden !important;
    padding: clamp(1.25rem, 2vw, 2.25rem) !important;
    background: var(--coco-admin-bg) !important;
}

.content-header,
.dashboard-header {
    gap: 1rem;
    margin-bottom: 1.5rem !important;
    padding-bottom: 1rem !important;
    border-bottom: 1px solid var(--coco-line) !important;
}

.content-header h1,
.content-header h2,
.dashboard-header h2,
.admin-content h1,
.admin-content h2 {
    color: #3d2b1f !important;
    letter-spacing: 0 !important;
    line-height: 1.18;
    text-wrap: balance;
}

.admin-content .card,
.admin-content .panel-card,
.admin-content .form-card,
.admin-content .campaign-panel,
.admin-content .migration-card {
    padding: clamp(1rem, 2vw, 1.5rem) !important;
    margin-bottom: 1.25rem;
}

.stats-grid,
.dashboard-grid,
.charts-grid,
.finance-grid,
.finance-kpi-grid,
.finance-charts-grid,
.pos-search-grid {
    gap: 1rem !important;
}

.stat-card {
    border: 1px solid var(--coco-line) !important;
    border-radius: var(--coco-radius) !important;
    box-shadow: var(--coco-shadow-soft) !important;
    min-width: 0;
}

.stat-card:hover,
.card:hover,
.product-card:hover,
.promo-card:hover,
.order-card:hover {
    transform: translateY(-2px);
}

.table-container,
.campaign-table-wrap,
.pos-table-wrap,
.variants-table-wrap,
.account-table-card,
.cart-items-wrapper,
.card:has(> table),
.card:has(.admin-table),
.card:has(.rate-table),
.card:has(.items-table),
.card:has(.cart-table),
.card:has(.cart-table-styled),
.card:has(.orders-table) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

.admin-table,
.campaign-table,
.collab-table,
.rate-table,
.items-table,
.orders-table,
.invoice-table,
.cart-table,
.cart-table-styled,
.pos-table {
    width: 100%;
    min-width: 720px;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.admin-table th,
.admin-table td,
.campaign-table th,
.campaign-table td,
.collab-table th,
.collab-table td,
.rate-table th,
.rate-table td,
.items-table th,
.items-table td,
.orders-table th,
.orders-table td,
.invoice-table th,
.invoice-table td,
.cart-table th,
.cart-table td,
.cart-table-styled th,
.cart-table-styled td,
.pos-table th,
.pos-table td {
    padding: 0.85rem 1rem !important;
    vertical-align: middle !important;
    white-space: normal;
}

.admin-table th,
.campaign-table th,
.collab-table th,
.rate-table th,
.items-table th,
.orders-table th,
.invoice-table th,
.cart-table th,
.cart-table-styled th,
.pos-table th {
    background: var(--coco-surface-soft) !important;
    color: #735236 !important;
    border-bottom: 1px solid var(--coco-line) !important;
}

.admin-table tbody tr:hover,
.campaign-table tbody tr:hover,
.collab-table tbody tr:hover,
.orders-table tbody tr:hover,
.items-table tbody tr:hover,
.cart-table-styled tbody tr:hover {
    background: #fffaf6 !important;
}

.admin-table form,
.campaign-table form,
.collab-table form,
.orders-table form {
    display: inline-flex !important;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

.action-btn,
.admin-table form button.action-btn,
.admin-table form button {
    align-items: center !important;
    justify-content: center !important;
}

.status-badge,
.status-pill,
[class*="badge"],
.category-tag {
    border-radius: 999px !important;
    line-height: 1.2;
    white-space: nowrap;
}

.modal,
.claim-modal,
.custom-modal-overlay,
.pos-modal {
    padding: clamp(0.75rem, 2vw, 2rem) !important;
}

.modal-content,
.claim-modal-content,
.custom-modal-content,
.pos-modal__dialog,
.category-modal__content {
    width: min(100%, 980px) !important;
    max-height: calc(100dvh - 2rem) !important;
    overflow-y: auto !important;
    border-radius: var(--coco-radius) !important;
    border: 1px solid var(--coco-line) !important;
}

.modal-content.card {
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22) !important;
}

.modal-actions {
    margin-top: 1rem !important;
}

.category-modal__close,
.close,
.close-btn,
.mobile-menu-close,
.search-close {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Storefront */
.main-header .container,
.main-footer .container {
    width: min(calc(100% - (var(--coco-gutter) * 2)), 1320px);
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.product-grid,
.category-grid,
.trust-grid {
    gap: clamp(1rem, 2vw, 1.5rem) !important;
}

.product-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important;
}

.grid-4-col {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important;
}

.product-card,
.promo-card,
.category-tile,
.trust-item {
    min-width: 0;
    border-radius: var(--coco-radius) !important;
    border: 1px solid var(--coco-line) !important;
    overflow: hidden;
}

.product-card {
    display: flex !important;
    flex-direction: column;
    height: 100%;
}

.product-card .product-link {
    display: block;
}

.product-image,
.product-detail-hero-img,
.product-detail-image,
.cart-img-preview,
.cart-combo-gallery-thumb,
.order-item-media,
.thumb-item {
    background-color: #fffaf6 !important;
}

.product-image {
    aspect-ratio: 1 / 1;
    height: auto !important;
    overflow: hidden;
}

.product-card-img,
.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-info {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.65rem;
    padding: 1rem !important;
}

.product-title,
.product-title a,
.cart-product-name,
.order-item-title {
    overflow-wrap: anywhere;
    line-height: 1.35;
}

.product-info .add-to-cart,
.product-card .quick-add,
.product-info .btn {
    margin-top: auto;
    width: 100%;
}

.store-layout {
    grid-template-columns: minmax(230px, 280px) minmax(0, 1fr) !important;
    gap: clamp(1.25rem, 3vw, 2.5rem) !important;
}

.filters-sidebar {
    border-radius: var(--coco-radius) !important;
    max-height: calc(100dvh - 120px);
    overflow-y: auto;
}

.product-detail-grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr) !important;
    gap: clamp(1.5rem, 4vw, 3rem) !important;
}

.product-gallery,
.product-detail-info,
.product-info-side,
.combo-component-wrapper {
    min-width: 0;
}

.product-detail-hero-img {
    aspect-ratio: 1 / 1;
    width: 100%;
}

.purchase-actions-card {
    padding: clamp(1rem, 2vw, 1.5rem) !important;
}

.cart-layout-container,
.checkout-grid,
.order-content,
.profile-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: clamp(1.25rem, 3vw, 2rem) !important;
    align-items: start;
}

.cart-summary-card,
.checkout-summary,
.profile-sidebar {
    position: sticky;
    top: calc(var(--main-header-height, 72px) + 1rem);
}

.checkout-progress {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.25rem;
}

.progress-step {
    min-width: 96px;
}

.cart-product-cell,
.order-item-product,
.cart-item,
.bank-account-card,
.order-download-block {
    min-width: 0;
}

.cart-combo-gallery-preview {
    flex-shrink: 0;
}

.auth-container,
.auth-card {
    width: min(100%, 680px);
    margin-left: auto;
    margin-right: auto;
}

.auth-card.wide {
    width: min(100%, 860px);
}

.content-page {
    max-width: 920px;
}

.content-page__section {
    border-radius: var(--coco-radius) !important;
}

.main-footer {
    margin-top: var(--coco-section-gap);
}

.footer-grid,
.main-footer .footer-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.2fr) minmax(180px, 0.8fr) minmax(260px, 1fr) !important;
    gap: clamp(1.5rem, 4vw, 3rem) !important;
    align-items: start;
}

.newsletter-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
}

.newsletter-form input[type="email"] {
    min-width: 0;
}

.whatsapp-greeting {
    max-width: min(280px, calc(100vw - 110px));
}

@media (min-width: 1440px) {
    .admin-content {
        padding-left: 2.5rem !important;
        padding-right: 2.5rem !important;
    }

    .product-grid,
    .grid-4-col {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    }
}

@media (max-width: 1280px) {
    .admin-sidebar {
        width: 248px !important;
    }

    .admin-sidebar .nav-link {
        padding-left: 1.15rem !important;
        padding-right: 1rem !important;
    }

    .cart-layout-container,
    .checkout-grid,
    .order-content,
    .profile-layout {
        grid-template-columns: minmax(0, 1fr) minmax(260px, 330px);
    }
}

@media (max-width: 1024px) {
    .admin-sidebar {
        width: 232px !important;
    }

    .admin-content {
        padding: 1.25rem !important;
    }

    .content-header,
    .dashboard-header {
        align-items: flex-start !important;
        flex-direction: column;
    }

    .store-layout,
    .product-detail-grid,
    .cart-layout-container,
    .checkout-grid,
    .order-content,
    .profile-layout,
    .contact-grid {
        grid-template-columns: 1fr !important;
    }

    .cart-summary-card,
    .checkout-summary,
    .profile-sidebar,
    .filters-sidebar {
        position: static;
        max-height: none;
    }

    .main-header .container {
        width: min(calc(100% - 2rem), 1320px);
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

@media (max-width: 768px) {
    :root {
        --coco-gutter: 1rem;
    }

    .container,
    .checkout-container,
    .page-container,
    .page-content,
    .content-page,
    .success-container {
        width: calc(100% - 2rem);
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .admin-layout {
        display: block !important;
    }

    .admin-sidebar {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        border-right: 0 !important;
        border-bottom: 1px solid var(--coco-line) !important;
    }

    .admin-sidebar .sidebar-brand {
        position: static;
        padding: 1rem !important;
    }

    .admin-sidebar .sidebar-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.5rem;
    }

    .admin-sidebar .sidebar-nav ul {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 0.35rem;
        padding: 0.5rem 1rem 1rem !important;
    }

    .admin-sidebar .sidebar-nav li {
        flex: 0 0 auto;
        margin: 0 !important;
    }

    .admin-sidebar .nav-section-label {
        display: none !important;
    }

    .admin-sidebar .nav-link,
    .admin-sidebar .nav-sublink {
        border: 1px solid var(--coco-line) !important;
        border-radius: 999px !important;
        padding: 0.65rem 0.9rem !important;
        background: #fff !important;
        white-space: nowrap;
    }

    .admin-sidebar .nav-submenu {
        display: contents !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    .admin-sidebar .nav-arrow {
        display: none;
    }

    .admin-content {
        padding: 1rem !important;
    }

    .admin-content .card,
    .admin-content .panel-card,
    .admin-content .form-card,
    .admin-content .campaign-panel,
    .admin-content .migration-card,
    .auth-card,
    .contact-card,
    .contact-form,
    .checkout-step,
    .summary-card,
    .purchase-actions-card,
    .success-summary-card,
    .profile-card,
    .profile-section {
        padding: 1rem !important;
    }

    .content-header .btn,
    .content-header button,
    .form-actions .btn,
    .modal-actions .btn,
    .success-actions .btn,
    .cart-actions-wrapper .btn {
        width: 100%;
    }

    .admin-table,
    .campaign-table,
    .collab-table,
    .rate-table,
    .items-table,
    .orders-table,
    .invoice-table,
    .cart-table,
    .cart-table-styled,
    .pos-table {
        min-width: 640px;
    }

    .modal-content,
    .claim-modal-content,
    .custom-modal-content,
    .pos-modal__dialog,
    .category-modal__content {
        margin: 0 auto !important;
        padding: 1rem !important;
        max-height: calc(100dvh - 1rem) !important;
    }

    .modal-actions {
        position: static !important;
        margin: 1rem 0 0 !important;
        padding: 1rem 0 0 !important;
        border-top: 1px solid var(--coco-line);
    }

    .product-grid,
    .grid-4-col {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .footer-grid,
    .main-footer .footer-grid,
    .newsletter-form {
        grid-template-columns: 1fr !important;
        text-align: left !important;
    }

    .main-footer .container.footer-bottom {
        display: grid;
        gap: 0.75rem;
        text-align: left;
    }

    .whatsapp-greeting {
        display: none;
    }
}

@media (max-width: 430px) {
    .product-grid,
    .grid-4-col,
    .category-grid {
        grid-template-columns: 1fr !important;
    }

    .main-header .container {
        width: calc(100% - 1.5rem);
        gap: 0.5rem;
    }

    .logo img,
    .site-logo-image {
        max-width: 150px !important;
        max-height: 64px !important;
    }

    .header-actions {
        gap: 0.2rem !important;
    }

    .nav-icon {
        width: 38px;
        height: 38px;
    }

    .checkout-progress {
        justify-content: flex-start;
    }

    .admin-table,
    .campaign-table,
    .collab-table,
    .rate-table,
    .items-table,
    .orders-table,
    .invoice-table,
    .cart-table,
    .cart-table-styled,
    .pos-table {
        min-width: 580px;
    }

    .cart-product-cell,
    .order-item-product {
        align-items: flex-start;
    }

    .custom-modal-actions,
    .modal-actions,
    .success-actions,
    .cart-actions-wrapper {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 375px) {
    .admin-content,
    .admin-content .card,
    .auth-card,
    .contact-form,
    .checkout-step,
    .summary-card {
        padding: 0.85rem !important;
    }

    .section-title,
    .content-page__title,
    .product-title-large {
        font-size: clamp(1.55rem, 8vw, 2rem) !important;
    }

    .btn-large,
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-outline,
    .btn-outline-dark {
        width: 100%;
        padding-left: 0.9rem !important;
        padding-right: 0.9rem !important;
    }
}

@media (max-height: 520px) and (orientation: landscape) {
    .admin-sidebar {
        position: relative !important;
        height: auto !important;
        min-height: auto !important;
    }

    .modal-content,
    .claim-modal-content,
    .custom-modal-content,
    .pos-modal__dialog {
        max-height: calc(100dvh - 1rem) !important;
    }

    .hero-section {
        min-height: auto !important;
        padding: 3rem 0 !important;
    }
}

/* ==============================================
   AGENT.MD CLOSURE PASS 2
   Home cards + mobile front/admin pattern closure
   ============================================== */

.best-sellers-section,
.featured-products,
.promo-banner,
.trust-section,
.mixed-commerce-section {
    margin-top: var(--coco-section-gap) !important;
    margin-bottom: var(--coco-section-gap) !important;
}

.best-sellers-section {
    overflow: hidden;
}

.product-carousel-wrapper {
    padding: 0 clamp(0.5rem, 2vw, 1.5rem) !important;
    max-width: 100%;
}

.product-carousel {
    align-items: stretch;
    gap: clamp(1rem, 2vw, 1.35rem) !important;
    padding: 0.25rem 0.25rem 1.5rem !important;
}

.carousel-item {
    width: clamp(220px, 22vw, 280px) !important;
    max-width: 280px;
    display: flex;
}

.carousel-item .product-card {
    width: 100%;
}

.product-card {
    contain: layout paint;
    isolation: isolate;
}

.product-card .product-link {
    flex: 0 0 auto;
}

.product-card .product-image {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    max-height: 300px;
    transform: none !important;
}

.product-card:hover .product-image {
    transform: none !important;
}

.product-card-img,
.product-image img {
    max-width: 100%;
    max-height: 100%;
    object-position: center;
}

.product-card-placeholder {
    min-height: 100%;
}

.product-info {
    min-height: 178px;
}

.product-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 2.7em;
    overflow: hidden;
}

.product-price {
    margin: 0 !important;
}

.product-tax-note {
    display: inline-flex;
    width: fit-content;
    margin: 0;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    background: #fffbeb;
    color: #92400e;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.25;
}

.product-card--combo {
    border: 2px solid rgba(115, 82, 54, 0.42) !important;
}

.discount-badge--combo {
    background: var(--secondary-color) !important;
    color: #3d2b1f !important;
}

.mixed-commerce-section .section-header {
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.catalog-link-wrapper,
.catalog-link-wrapper--split,
.promo-actions,
.hero-actions {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem !important;
    margin-top: clamp(1.25rem, 3vw, 2rem) !important;
}

.catalog-link-wrapper .btn,
.promo-actions .btn,
.hero-actions .btn {
    margin-left: 0 !important;
}

.category-grid {
    align-items: stretch;
}

.category-tile,
.trust-item {
    height: auto;
    min-height: 210px;
}

.trust-grid {
    align-items: stretch;
}

.trust-item {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: clamp(1rem, 2vw, 1.5rem);
}

.promo-card {
    min-height: 0 !important;
}

.promo-image {
    min-height: clamp(240px, 32vw, 420px);
}

.promo-content {
    min-width: 0;
    padding: clamp(1.25rem, 4vw, 3rem) !important;
}

.radio-grid,
.info-grid,
.checkout-steps,
.checkout-summary,
.summary-card,
.coupon-section,
.bank-account-card,
.payment-details,
.pos-page,
.pos-stack,
.pos-card,
.pos-summary-card,
.settings-grid,
.form-section,
.finance-grid,
.finance-kpi-grid,
.finance-charts-grid,
.campaign-form-layout,
.campaign-grid {
    min-width: 0;
}

.radio-card-content {
    gap: 0.85rem;
    min-width: 0;
}

.radio-text,
.radio-desc,
.radio-title {
    min-width: 0;
    overflow-wrap: anywhere;
}

.radio-price {
    flex-shrink: 0;
}

.checkout-step[style],
.summary-card[style],
.card[style],
.panel-card[style],
.pos-card[style] {
    border-radius: var(--coco-radius) !important;
}

.pos-page {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px) !important;
    gap: clamp(1rem, 2vw, 1.5rem) !important;
}

.pos-card,
.pos-summary-card {
    border-radius: var(--coco-radius) !important;
    border: 1px solid var(--coco-line) !important;
    box-shadow: var(--coco-shadow-soft) !important;
}

.pos-inline-actions {
    gap: 0.75rem !important;
}

.pos-inline-actions input {
    min-width: min(100%, 220px) !important;
}

.pos-summary-card {
    top: 1rem !important;
}

.pos-table-wrap {
    max-width: 100%;
}

.settings-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important;
}

.form-section {
    padding: clamp(1rem, 2vw, 1.5rem);
    border: 1px solid var(--coco-line);
    border-radius: var(--coco-radius);
    background: #fff;
}

.form-section + .form-section {
    margin-top: 1rem;
}

.admin-content input[type="checkbox"],
.admin-content input[type="radio"],
.styled-form input[type="checkbox"],
.styled-form input[type="radio"],
.sensitive-form input[type="checkbox"],
.sensitive-form input[type="radio"] {
    width: auto !important;
    min-height: auto !important;
}

.admin-content [style*="display:flex"],
.admin-content [style*="display: flex"] {
    min-width: 0;
}

.admin-content [style*="grid-template-columns"],
.admin-content .combo-component-row {
    min-width: 0;
}

.combo-component-row {
    grid-template-columns: minmax(220px, 1fr) minmax(88px, 120px) minmax(150px, 190px) 44px !important;
}

.admin-content textarea,
.admin-content input,
.admin-content select {
    min-width: 0;
}

@media (min-width: 1281px) {
    .product-grid.grid-4-col,
    .mixed-commerce-section .product-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .store-layout .product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1280px) {
    .product-card .product-image {
        max-height: 280px;
    }

    .pos-page {
        grid-template-columns: 1fr !important;
    }

    .pos-summary-card {
        position: static !important;
    }
}

@media (max-width: 1024px) {
    .category-grid,
    .product-grid,
    .product-grid.grid-4-col {
        display: grid !important;
        flex-direction: initial !important;
        overflow-x: visible !important;
        scroll-snap-type: none !important;
        padding: 0 !important;
    }

    .category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .product-grid,
    .product-grid.grid-4-col {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .category-grid .category-tile,
    .product-grid .product-card {
        flex: initial !important;
        max-width: none !important;
        scroll-snap-align: none !important;
    }

    .product-carousel {
        display: flex !important;
        overflow-x: auto !important;
        scroll-snap-type: x proximity !important;
        padding-bottom: 1rem !important;
    }

    .carousel-item {
        width: clamp(220px, 42vw, 260px) !important;
        flex: 0 0 auto !important;
        scroll-snap-align: start !important;
    }

    .promo-card {
        grid-template-columns: 1fr !important;
    }

    .promo-image {
        min-height: 280px;
    }

    .combo-component-row {
        grid-template-columns: minmax(0, 1fr) minmax(88px, 110px) !important;
    }
}

@media (max-width: 768px) {
    .best-sellers-section,
    .featured-products,
    .promo-banner,
    .trust-section,
    .mixed-commerce-section {
        margin-top: 2.25rem !important;
        margin-bottom: 2.25rem !important;
    }

    .section-header {
        text-align: left;
        margin-left: 0;
        margin-right: 0;
    }

    .product-grid,
    .product-grid.grid-4-col,
    .category-grid,
    .trust-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .product-card {
        max-width: 100%;
    }

    .product-card .product-image {
        aspect-ratio: 4 / 3 !important;
        max-height: none;
    }

    .product-info {
        min-height: auto;
        padding: 0.95rem !important;
    }

    .product-title {
        min-height: auto;
    }

    .carousel-item {
        width: min(78vw, 270px) !important;
    }

    .carousel-item .product-card .product-image {
        aspect-ratio: 1 / 1 !important;
    }

    .catalog-link-wrapper,
    .catalog-link-wrapper--split,
    .promo-actions,
    .hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .catalog-link-wrapper .btn,
    .promo-actions .btn,
    .hero-actions .btn {
        width: 100%;
    }

    .radio-card-content {
        align-items: flex-start;
        flex-wrap: wrap;
        padding: 1rem !important;
    }

    .radio-icon {
        flex: 0 0 42px;
        height: 42px;
        width: 42px;
        margin-right: 0 !important;
    }

    .radio-price {
        margin-left: 0;
    }

    .checkout-header {
        text-align: left !important;
    }

    .step-header {
        align-items: flex-start;
    }

    .summary-header,
    .total-row,
    .pos-summary-stat,
    .pos-summary-total {
        gap: 0.75rem;
    }

    .pos-card,
    .pos-summary-card {
        padding: 1rem !important;
    }

    .pos-search-grid,
    .pos-form-grid,
    .campaign-grid,
    .settings-grid {
        grid-template-columns: 1fr !important;
    }

    .pos-inline-actions,
    .pos-modal__actions {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .pos-inline-actions input,
    .pos-inline-actions button,
    .pos-modal__actions .btn {
        width: 100% !important;
    }

    .combo-component-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
        padding: 0.75rem;
        border: 1px solid var(--coco-line);
        border-radius: var(--coco-radius-sm);
        background: #fffaf6;
    }

    .combo-component-row > * {
        width: 100% !important;
    }

    .admin-content .sticky,
    .admin-content [style*="position: sticky"] {
        position: static !important;
    }
}

@media (max-width: 430px) {
    .product-card .product-image {
        aspect-ratio: 1 / 1 !important;
    }

    .category-tile {
        min-height: 180px;
    }

    .promo-image {
        min-height: 220px;
    }

    .product-carousel-wrapper {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .carousel-item {
        width: min(84vw, 260px) !important;
    }

    .admin-table,
    .campaign-table,
    .collab-table,
    .rate-table,
    .items-table,
    .orders-table,
    .invoice-table,
    .cart-table,
    .cart-table-styled,
    .pos-table {
        min-width: 520px !important;
    }
}

@media (max-height: 520px) and (orientation: landscape) {
    .product-grid,
    .category-grid,
    .trust-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .product-card .product-image {
        aspect-ratio: 4 / 3 !important;
    }

    .admin-sidebar .sidebar-nav ul {
        padding-bottom: 0.5rem !important;
    }
}

/* ==============================================
   ADMIN MOBILE HARD CLOSURE
   CMS, shipping, promotions, payments, Google tools
   ============================================== */

body.admin-layout {
    background: var(--coco-admin-bg) !important;
    color: #3d2b1f;
}

body.admin-layout > .admin-sidebar,
body.admin-layout > .admin-content {
    min-width: 0;
}

.admin-content > header[style],
.admin-content .content-header[style] {
    margin-bottom: clamp(1rem, 3vw, 1.5rem) !important;
}

.admin-content > header[style] > div,
.admin-content section.card > div[style*="display:flex"],
.admin-content section.card > div[style*="display: flex"],
.admin-content .card > div[style*="display:flex"],
.admin-content .card > div[style*="display: flex"] {
    min-width: 0;
}

.admin-content > header[style] h1,
.admin-content > header[style] h2,
.admin-content .content-header h1,
.admin-content .content-header h2 {
    overflow-wrap: anywhere;
}

.admin-content form[style*="minmax(450px"],
.admin-content div[style*="minmax(450px"] {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)) !important;
    gap: clamp(1rem, 3vw, 1.5rem) !important;
}

.file-input-wrapper {
    min-width: 0;
}

.file-input-wrapper .form-control,
.file-input-wrapper input[type="file"],
.file-input-wrapper input[type="text"],
.file-input-wrapper input[type="url"] {
    min-width: 0;
}

.color-picker-wrapper {
    min-width: 0;
    flex-wrap: wrap;
}

.color-picker-wrapper input[type="color"] {
    flex: 0 0 50px;
}

.preview-box {
    max-width: 100%;
}

.settings-card,
.promo-grid,
.promo-grid > *,
.panel-card,
.rate-table,
.rate-table tbody,
.rate-table tr,
.rate-table td,
.rate-table th {
    min-width: 0;
}

.settings-card {
    overflow: hidden;
}

.promo-grid {
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.8fr) !important;
}

.promo-grid .panel-card {
    align-self: start;
}

.promo-grid .table-container {
    max-width: 100%;
    overflow-x: auto !important;
}

.promo-grid .admin-table {
    min-width: 760px;
}

.badge,
code {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.gateway-icon,
.icon-box {
    flex: 0 0 auto;
}

.toggle-switch,
.checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    line-height: 1.45;
}

.toggle-switch input,
.checkbox-wrapper input {
    flex: 0 0 auto;
}

@media (max-width: 1024px) {
    body.admin-layout,
    .admin-layout {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
    }

    body.admin-layout > .admin-sidebar,
    .admin-layout > .admin-sidebar,
    .admin-sidebar {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        border-right: 0 !important;
        border-bottom: 1px solid var(--coco-line) !important;
        box-shadow: none !important;
    }

    .admin-sidebar .sidebar-brand {
        position: relative !important;
        top: auto !important;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        min-height: 0;
        padding: 1rem !important;
    }

    .admin-sidebar .sidebar-site-name {
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    .admin-sidebar .sidebar-nav {
        width: 100%;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        padding: 0 1rem 1rem !important;
        scrollbar-width: none;
    }

    .admin-sidebar .sidebar-nav::-webkit-scrollbar {
        display: none;
    }

    .admin-sidebar .sidebar-nav ul {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 0.65rem !important;
        width: max-content !important;
        min-width: 100%;
        padding: 0 !important;
        margin: 0 !important;
    }

    .admin-sidebar .sidebar-nav li {
        flex: 0 0 auto !important;
        margin: 0 !important;
    }

    .admin-sidebar .nav-section-label {
        display: none !important;
    }

    .admin-sidebar .nav-link,
    .admin-sidebar .nav-sublink {
        display: inline-flex !important;
        width: auto !important;
        min-width: max-content !important;
        min-height: 44px !important;
        padding: 0.7rem 1rem !important;
        border: 1px solid var(--coco-line) !important;
        border-radius: 999px !important;
        background: #fff !important;
        white-space: nowrap !important;
        box-shadow: none !important;
    }

    .admin-sidebar .nav-link.active,
    .admin-sidebar .nav-sublink.active {
        border-color: rgba(115, 82, 54, 0.34) !important;
        background: #fff7ef !important;
    }

    .admin-sidebar .nav-submenu {
        display: none !important;
    }

    .admin-sidebar .nav-submenu.open {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 0.65rem !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    .admin-sidebar .nav-arrow {
        display: none !important;
    }

    body.admin-layout > .admin-content,
    .admin-layout > .admin-content,
    .admin-content {
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: clamp(1rem, 3vw, 1.5rem) !important;
        overflow-x: hidden !important;
    }

    .admin-content > header[style] > div,
    .content-header,
    .content-header[style] {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        gap: 0.85rem !important;
    }

    .content-header .btn,
    .content-header a.btn,
    .admin-content > header .btn {
        width: auto !important;
        max-width: 100%;
    }

    .admin-content > header[style] h1,
    .admin-content > header[style] h2,
    .content-header h1,
    .content-header h2 {
        font-size: clamp(1.45rem, 5vw, 2rem) !important;
        line-height: 1.15 !important;
    }

    .form-section,
    .settings-card,
    .panel-card,
    .card {
        max-width: 100%;
    }

    .file-input-wrapper {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.65rem !important;
        align-items: stretch !important;
    }

    .file-input-wrapper span {
        display: block;
    }

    .form-row,
    .settings-grid,
    .promo-grid,
    .admin-content form[style*="minmax(450px"],
    .admin-content div[style*="minmax(450px"] {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .full-width {
        grid-column: auto !important;
    }

    .promo-grid .panel-card[style*="sticky"],
    .admin-content [style*="position: sticky"] {
        position: static !important;
        top: auto !important;
    }

    .promo-grid .admin-table {
        min-width: 0 !important;
    }

    .promo-grid .admin-table,
    .promo-grid .admin-table thead,
    .promo-grid .admin-table tbody,
    .promo-grid .admin-table tr,
    .promo-grid .admin-table th,
    .promo-grid .admin-table td {
        display: block !important;
        width: 100% !important;
    }

    .promo-grid .admin-table thead {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
    }

    .promo-grid .admin-table tbody {
        display: grid !important;
        gap: 0.85rem !important;
    }

    .promo-grid .admin-table tr {
        padding: 0.85rem !important;
        border: 1px solid var(--coco-line) !important;
        border-radius: var(--coco-radius) !important;
        background: #fff !important;
    }

    .promo-grid .admin-table td {
        display: flex !important;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.65rem 0 !important;
        border-bottom: 1px solid var(--coco-line) !important;
        text-align: right !important;
    }

    .promo-grid .admin-table td:last-child {
        border-bottom: 0 !important;
    }

    .promo-grid .admin-table td::before {
        content: "";
        color: #735236;
        font-weight: 800;
        text-align: left;
    }

    .promo-grid .admin-table td:nth-child(1)::before { content: "Nombre"; }
    .promo-grid .admin-table td:nth-child(2)::before { content: "Tipo"; }
    .promo-grid .admin-table td:nth-child(3)::before { content: "Valor"; }
    .promo-grid .admin-table td:nth-child(4)::before { content: "Cupón"; }
    .promo-grid .admin-table td:nth-child(5)::before { content: "Aplica a"; }
    .promo-grid .admin-table td:nth-child(6)::before { content: "Estado"; }
    .promo-grid .admin-table td:nth-child(7)::before { content: "Acciones"; }

    .promo-grid .admin-table td[colspan] {
        display: block !important;
        text-align: center !important;
    }

    .promo-grid .admin-table td[colspan]::before {
        content: none !important;
    }

    .rate-table {
        min-width: 0 !important;
    }

    .rate-table,
    .rate-table thead,
    .rate-table tbody,
    .rate-table tr,
    .rate-table th,
    .rate-table td {
        display: block !important;
        width: 100% !important;
    }

    .rate-table thead {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
    }

    .rate-table tbody {
        display: grid !important;
        gap: 0.85rem !important;
    }

    .rate-table tr {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.65rem !important;
        padding: 0.85rem !important;
        border: 1px solid var(--coco-line) !important;
        border-radius: var(--coco-radius) !important;
        background: #fff !important;
    }

    .rate-table td {
        padding: 0 !important;
        border-bottom: 0 !important;
    }

    .rate-table td::before {
        display: block;
        margin-bottom: 0.35rem;
        color: #735236;
        font-size: 0.78rem;
        font-weight: 800;
        text-transform: uppercase;
    }

    .rate-table td:nth-child(1)::before { content: "Activo"; }
    .rate-table td:nth-child(2)::before { content: "Zona"; }
    .rate-table td:nth-child(3)::before { content: "Tarifa"; }

    .rate-table input[type="text"],
    .rate-table input[type="number"] {
        min-width: 0 !important;
        width: 100% !important;
    }

    section.card > div[style*="display:flex"],
    section.card > div[style*="display: flex"],
    .card > div[style*="display:flex"],
    .card > div[style*="display: flex"] {
        flex-wrap: wrap !important;
    }

    .gateway-icon + h2,
    .icon-box + h2 {
        min-width: 0;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 520px) {
    .admin-content {
        padding: 0.85rem !important;
    }

    .form-section,
    .settings-card,
    .panel-card,
    .admin-content .card {
        padding: 1rem !important;
        border-radius: var(--coco-radius) !important;
    }

    .admin-sidebar .sidebar-brand {
        padding: 0.85rem !important;
    }

    .admin-sidebar .sidebar-nav {
        padding: 0 0.85rem 0.85rem !important;
    }

    .admin-sidebar .nav-link,
    .admin-sidebar .nav-sublink {
        min-height: 40px !important;
        padding: 0.6rem 0.85rem !important;
        font-size: 0.9rem !important;
    }

    .content-header .btn,
    .content-header a.btn,
    .admin-content > header .btn,
    .form-actions .btn,
    .btn-save,
    .btn-save-full {
        width: 100% !important;
    }

    .admin-content > header[style] > div:first-child {
        flex-wrap: nowrap !important;
    }

    .admin-content > header[style] > div:first-child > div {
        flex: 0 0 auto;
    }

    .admin-content .alert {
        padding: 0.85rem !important;
    }
}