/* --- Globalne style i typografia --- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap');

:root {
    --primary-color: #5e72e4;
    --secondary-color: #f6f9fc;
    --accent-color: #f5365c;
    --text-dark: #2d3748;
    --text-light: #525f7f;
    --bg-light: #ffffff;
    --shadow-light: 0 0 20px rgba(0, 0, 0, 0.08);
    --border-radius: 0.5rem;
    --tt-bg: rgba(20, 20, 20, 0.9);
    --tt-bg-active: rgba(46, 204, 113, 0.85);
    --tt-text: #fff;
    --tt-radius: 50px;
    --tt-font-size: 13px;
    --tt-padding: 6px 14px;
}

/* ============================================================
   EDITOR MODERNO DE LOGOTIPO — reglas compartidas con la vista real
   ============================================================ */
/* Punto único donde el encabezado decide qué juego de colores usa.
   header.php publica dos variantes de cada valor (-l para modo claro, -d para
   modo oscuro) y aquí sólo se elige una. Así el modo oscuro no necesita
   duplicar reglas ni pelear por especificidad: cambia la variable y ya está. */
.main-header.cv-logo-config {
    --cv-header-surface: var(--cv-h-surface-l, var(--bg-light, #ffffff));
    --cv-header-ink: var(--cv-h-ink-l, #2d3748);
    --cv-header-ink-soft: var(--cv-h-ink-soft-l, rgba(45, 55, 72, .74));
    --cv-header-icon: var(--cv-h-icon-l, #0069fa);
    --cv-header-fav: var(--cv-h-fav-l, #ff4757);
    --cv-header-line: var(--cv-h-line-l, rgba(22, 32, 44, .16));
    --cv-header-wash: var(--cv-h-wash-l, rgba(22, 32, 44, .05));
    --cv-header-texture-color: var(--cv-h-texture-l, rgba(0, 0, 0, .08));
    --cv-header-border-color: var(--cv-h-border-l, transparent);
    --cv-logo-ink: var(--cv-h-logo-ink-l, currentColor);
    --cv-logo-badge-bg: var(--cv-h-badge-l, rgba(255, 255, 255, .85));
    --cv-header-drop: var(--cv-h-hdr-shadow-l, none);
    --cv-logo-badge-drop: var(--cv-h-badge-shadow-l, none);
    --cv-logo-badge-border: var(--cv-h-badge-border-l, transparent);

    border: var(--cv-header-border-width, 0) solid var(--cv-header-border-color, transparent) !important;
    border-radius: var(--cv-header-radius, 50px) !important;
    box-shadow: var(--cv-header-drop) !important;
    isolation: isolate;
    transition: background .35s ease, color .35s ease, border-color .35s ease;
}

[data-theme="dark"] .main-header.cv-logo-config {
    --cv-header-surface: var(--cv-h-surface-d, var(--bg-light, #1c1e26));
    --cv-header-ink: var(--cv-h-ink-d, #f0f2f5);
    --cv-header-ink-soft: var(--cv-h-ink-soft-d, rgba(255, 255, 255, .80));
    --cv-header-icon: var(--cv-h-icon-d, #4d9bff);
    --cv-header-fav: var(--cv-h-fav-d, #ff4757);
    --cv-header-line: var(--cv-h-line-d, rgba(255, 255, 255, .24));
    --cv-header-wash: var(--cv-h-wash-d, rgba(255, 255, 255, .10));
    --cv-header-texture-color: var(--cv-h-texture-d, rgba(255, 255, 255, .10));
    --cv-header-border-color: var(--cv-h-border-d, transparent);
    --cv-logo-ink: var(--cv-h-logo-ink-d, currentColor);
    --cv-logo-badge-bg: var(--cv-h-badge-d, rgba(28, 30, 38, .85));
    --cv-header-drop: var(--cv-h-hdr-shadow-d, none);
    --cv-logo-badge-drop: var(--cv-h-badge-shadow-d, none);
    --cv-logo-badge-border: var(--cv-h-badge-border-d, transparent);
}
.main-header.cv-logo-config::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
    background-repeat: repeat;
}
.main-header.cv-logo-config .nav-toggle.circular-toggle,
.main-header.cv-logo-config .logo,
.main-header.cv-logo-config .header-actions {
    z-index: 1;
}
/* Un solo origen de verdad para el fondo: la variable ya trae resuelto el
   color sólido, el degradado de 2 o 3 colores (lineal o radial) y la
   dirección. Antes había cuatro reglas casi iguales repetidas en dos sitios
   del archivo, y la de modo oscuro no siempre ganaba. */
.main-header.cv-logo-config.cv-header-bg-theme,
.main-header.cv-logo-config.cv-header-bg-solid,
.main-header.cv-logo-config.cv-header-bg-gradient,
.main-header.cv-logo-config.cv-header-bg-glass,
.main-header.cv-logo-config.cv-header-bg-theme.scrolled,
.main-header.cv-logo-config.cv-header-bg-solid.scrolled,
.main-header.cv-logo-config.cv-header-bg-gradient.scrolled,
.main-header.cv-logo-config.cv-header-bg-glass.scrolled {
    background: var(--cv-header-surface) !important;
}
.main-header.cv-logo-config.cv-header-bg-glass,
.main-header.cv-logo-config.cv-header-bg-glass.scrolled {
    -webkit-backdrop-filter: blur(var(--cv-header-blur, 18px)) saturate(150%);
    backdrop-filter: blur(var(--cv-header-blur, 18px)) saturate(150%);
}

/* ── Contraste automático de iconos y textos ──────────────────────────────
   La tinta se calcula en header.php a partir del fondo real que va a tener el
   encabezado en cada modo. Es lo que evita el fallo de iconos claros sobre un
   encabezado claro al activar el modo oscuro.
   Sólo se toca el estado en reposo: el verde de hover y de página actual es
   una decisión de diseño y se respeta, por eso van los :not().
   Los iconos NO se vuelven grises: conservan el azul corporativo #0069fa y
   sólo se aclaran lo justo si el fondo elegido los dejaría ilegibles. El botón
   circular de categorías sí usa tinta neutra, porque su texto era gris. */
.main-header.cv-logo-config .header-actions .action-btn:not(.current-page-item):not(.fav-btn):not(:hover),
.main-header.cv-logo-config .header-actions .action-btn:not(.current-page-item):not(.fav-btn):not(:hover) > i,
.main-header.cv-logo-config .search-trigger-btn:not(:hover) {
    color: var(--cv-header-icon) !important;
}
/* El corazón de favoritos conserva su rojo de siempre (#ff4757). Sólo cambiaría
   si el encabezado tuviera un rojo tan parecido que lo escondiese. El verde al
   pasar el cursor y el resplandor del panel abierto se dejan intactos. */
.main-header.cv-logo-config .header-actions .fav-btn:not(:hover):not(.active-panel) > i {
    color: var(--cv-header-fav) !important;
}
.main-header.cv-logo-config .nav-toggle.circular-toggle {
    color: var(--cv-header-ink-soft) !important;
}
/* El texto giratorio del botón de categorías hereda la tinta gracias a
   fill="currentColor" en el SVG; la letra central conserva el color de marca. */
.main-header.cv-logo-config .nav-toggle.circular-toggle .circle-text-wrapper svg,
.main-header.cv-logo-config .nav-toggle.circular-toggle .circle-text-wrapper svg text {
    fill: currentColor;
}
/* La chapita de no leídos mantiene su rojo y su texto blanco. */
.main-header.cv-logo-config .header-actions .action-btn .unread-badge {
    color: #fff !important;
}
/* Separador de la segunda fila de iconos, acorde con la tinta. */
.main-header.cv-logo-config .header-actions {
    border-top-color: var(--cv-header-line) !important;
}
.main-header.cv-header-texture-none::before { display: none; }
.main-header.cv-header-texture-dots::before {
    background-image: radial-gradient(circle, var(--cv-header-texture-color, rgba(0,0,0,.08)) 1.25px, transparent 1.35px);
    background-size: 15px 15px;
}
.main-header.cv-header-texture-grid::before {
    background-image:
        linear-gradient(var(--cv-header-texture-color, rgba(0,0,0,.08)) 1px, transparent 1px),
        linear-gradient(90deg, var(--cv-header-texture-color, rgba(0,0,0,.08)) 1px, transparent 1px);
    background-size: 22px 22px;
}
.main-header.cv-header-texture-diagonal::before {
    background-image: repeating-linear-gradient(135deg, var(--cv-header-texture-color, rgba(0,0,0,.08)) 0 1px, transparent 1px 11px);
}
.main-header.cv-header-texture-waves::before {
    background-image:
        radial-gradient(circle at 0 50%, transparent 9px, var(--cv-header-texture-color, rgba(0,0,0,.08)) 10px, transparent 11px),
        radial-gradient(circle at 100% 50%, transparent 9px, var(--cv-header-texture-color, rgba(0,0,0,.08)) 10px, transparent 11px);
    background-position: 0 0, 12px 12px;
    background-size: 24px 24px;
}

.main-header.cv-logo-config .logo {
    gap: var(--cv-logo-gap-local, var(--cv-logo-gap, 10px)) !important;
    border: 0 solid transparent;
    transition: transform .3s ease, filter .25s ease, opacity .25s ease !important;
}
.main-header.cv-logo-config .logo > img,
.main-header.cv-logo-config .logo > span { transition: transform .25s ease, filter .25s ease !important; }
/* La sombra ya no es un azul oscuro fijo: header.php la calcula según la
   luminancia del encabezado que tiene debajo. Sobre fondo claro es la sombra
   de siempre; sobre fondo oscuro pasa a sombra profunda + filo y halo claros,
   porque una sombra oscura sobre oscuro sencillamente no se ve. */
.main-header.cv-logo-config .logo.cv-logo-badge {
    padding: var(--cv-logo-badge-padding-y, 8px) var(--cv-logo-badge-padding-x, 14px) !important;
    border-width: var(--cv-logo-badge-border-width, 0) !important;
    border-color: var(--cv-logo-badge-border, transparent) !important;
    border-radius: var(--cv-logo-badge-radius, 24px);
    background: var(--cv-logo-badge-bg, rgba(255,255,255,.85));
    box-shadow: var(--cv-logo-badge-drop, none);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: box-shadow .35s ease, background .35s ease, border-color .35s ease;
}
.main-header.cv-logo-config .logo .cv-logo-text { color: var(--cv-logo-ink, inherit); }
.main-header.cv-logo-config .logo.cv-logo-mode-image_only .cv-logo-text { display: none !important; }
.main-header.cv-logo-config .logo.cv-logo-mode-text_only .logo-dinamico { display: none !important; }
.main-header.cv-logo-config .logo.cv-logo-hover-lift:hover > * { transform: translateY(-3px); }
.main-header.cv-logo-config .logo.cv-logo-hover-glow:hover { filter: drop-shadow(0 0 10px currentColor); }
.main-header.cv-logo-config .logo.cv-logo-hover-zoom:hover > * { transform: scale(1.045); }

@media (min-width: 1401px) {
    .main-header.cv-logo-config:not(.scrolled) { height: var(--cv-header-height, 165px); }
    .main-header.cv-logo-config .logo { top: calc(50% + var(--cv-logo-y, 0px)) !important; }
}

@media (max-width: 1400px) and (min-width: 769px) {
    .main-header.cv-logo-config .logo { gap: var(--cv-logo-gap, 10px) !important; }
}

@media (max-width: 768px) {
    .main-header.cv-logo-config {
        border-radius: var(--cv-header-mobile-radius, 28px) !important;
    }
    .main-header.cv-logo-config .logo {
        gap: var(--cv-logo-mobile-gap, 6px) !important;
    }
    .main-header.cv-logo-config .logo.cv-logo-badge {
        padding: min(var(--cv-logo-badge-padding-y, 8px), 8px) min(var(--cv-logo-badge-padding-x, 14px), 12px) !important;
    }
    .main-header.cv-logo-config .logo .cv-logo-text {
        font-size: var(--cv-logo-mobile-font-size, 16px) !important;
    }
    .main-header.cv-logo-config .logo img,
    .main-header.cv-logo-config .logo .logo-dinamico {
        width: auto !important;
        height: var(--cv-logo-mobile-size, 52px) !important;
        max-height: var(--cv-logo-mobile-size, 52px) !important;
        max-width: 42% !important;
        object-fit: contain;
    }
    .main-header.cv-logo-config .logo.cv-logo-mobile-column {
        flex-direction: column !important;
        justify-content: center !important;
    }
    .main-header.cv-logo-config .logo.cv-logo-mobile-lines-1 .cv-logo-text {
        display: block !important;
        max-width: 100% !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis;
    }
    .main-header.cv-logo-config .logo.cv-logo-mobile-lines-2 .cv-logo-text {
        display: -webkit-box !important;
        max-width: min(44vw, 210px) !important;
        overflow: hidden !important;
        white-space: normal !important;
        word-break: break-word !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
    }
    .main-header.cv-logo-config .logo.cv-logo-mobile-column .logo-dinamico { max-width: 72% !important; }
}

@media (prefers-reduced-motion: reduce) {
    .main-header.cv-logo-config .logo > * { transition: none !important; }
}

/* --- PODSTAWOWY STYL DLA TOOLTIPA --- */
#custom-tooltip-container {
    position: fixed;
    z-index: 1040;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -10px) scale(0.9);
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* Fondo por defecto (negro) */
    background: var(--tt-bg);
    color: var(--tt-text);

    padding: var(--tt-padding);
    border-radius: 50px !important;
    font-size: var(--tt-font-size);
    font-weight: 600;
    white-space: nowrap;

    /*box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.1);*/
}

/* --- MODO ACTIVO (LA PASTILLA FIJA VERDE/COLOR) --- */
#custom-tooltip-container.active-mode {
    /* AQUÍ ESTÁ LA SOLUCIÓN:
       Usamos 'color-mix' para forzar un 25% de transparencia al color que elijas.
       Así, si eliges Verde Sólido (#2ecc71), se convierte en Verde Vidrio automáticamente.
    */
    background: color-mix(in srgb, var(--tt-bg-active), transparent 25%) !important;

    /* Resplandor suave del mismo color */
    /*box-shadow: 0 0 15px color-mix(in srgb, var(--tt-bg-active), transparent 60%);*/
    opacity: 1;
}

/* --- EFECTO VIDRIO (GLASSMORPHISM) --- */
#custom-tooltip-container.glass-effect {
    /* El desenfoque mágico */
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);

    /* Borde sutil brillante */
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Ajuste específico cuando es Vidrio + Activo */
#custom-tooltip-container.glass-effect.active-mode {
    /* Forzamos un poco más de transparencia para que se note el desenfoque */
    background: color-mix(in srgb, var(--tt-bg-active), transparent 30%) !important;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

/* --- FLECHAS (TRIÁNGULOS) INTELIGENTES --- */
#custom-tooltip-container::after {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 6px 6px 6px;
    border-style: solid;
    /* Flecha normal (negra) */
    border-color: transparent transparent var(--tt-bg) transparent;
    transition: border-color 0.2s ease;
}

/* Flecha cambia de color automáticamente en modo activo */
#custom-tooltip-container.active-mode::after {
    /* La flecha también se hace transparente para coincidir con el cuerpo */
    border-color: transparent transparent color-mix(in srgb, var(--tt-bg-active), transparent 25%) transparent;
}

#custom-tooltip-container.glass-effect.active-mode::after {
    border-color: transparent transparent color-mix(in srgb, var(--tt-bg-active), transparent 30%) transparent;
}

/* --- ANIMACIONES (CORREGIDO Y COMPLETO) --- */
#custom-tooltip-container.show {
    opacity: 1;
}

/* 1. ELASTIC (Rebote) - La opción por defecto */
#custom-tooltip-container.anim-elastic {
    transform: translate(-50%, -15px) scale(0.8);
}

#custom-tooltip-container.anim-elastic.show {
    transform: translate(-50%, 0) scale(1);
    /* Usa la transición 'bouncy' definida en el bloque base */
}

/* 2. SCALE (Zoom) - Crece desde el centro */
#custom-tooltip-container.anim-scale {
    transform: translate(-50%, 0) scale(0.5);
}

#custom-tooltip-container.anim-scale.show {
    transform: translate(-50%, 0) scale(1);
    /* Sobrescribimos la transición para que sea lineal, sin rebote */
    transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.2s ease;
}

/* 3. FADE (Suave) - Solo aparece, sin moverse */
#custom-tooltip-container.anim-fade {
    transform: translate(-50%, 0) scale(1);
    /* Fijo en su sitio */
}

#custom-tooltip-container.anim-fade.show {
    transform: translate(-50%, 0) scale(1);
    /* Solo animamos la opacidad */
    transition: opacity 0.3s ease;
}

html {
    height: 100%;
}

body {
    min-height: 100%;
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--secondary-color);
    color: var(--text-light);
    line-height: 1.6;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: var(--primary-color);
    transition: color 0.3s ease;
}

a:hover {
    color: #4a5ac9;
}

h1,
h2,
h3,
h4 {
    color: var(--text-dark);
    font-weight: 700;
}

/* --- Nagłówek (Header) --- */
.main-header {
    background-color: var(--bg-light);
    /*box-shadow: 0 0 10px rgba(255, 255, 255, 0.911);*/
    border-radius: 50px;
    width: 97%;
    height: 165px;
    flex-shrink: 0;
    margin-left: auto;
    margin-right: auto;
    position: sticky;
    top: 10px;
    z-index: 1000;
    animation: fadeInDown 0.8s ease-in-out;
    
    /* LA CLAVE DEL CENTRADO 50%: Quitamos el padding que desviaba el centro */
    padding: 0 !important; 
    display: flex;
    align-items: center;
}

.logo {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--primary-color);

    /* AÑADE ESTO para arreglar el texto y la alineación */
    white-space: nowrap;
    /* Obliga al texto a estar en una sola línea */
    display: inline-flex;
    /* Asegura que imagen y texto fluyan bien */
    align-items: center;
    /* Centra verticalmente imagen y texto */
    /* --- CENTRADO ABSOLUTO (posición configurable desde el admin) --- */
    position: absolute !important;
    left: var(--logo-left, 40%) !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    
    /* Anulamos cualquier margen que venga del panel de admin */
    margin: 0 !important; 
    padding: 0 !important;
}

/* --- ESTILO DEL LOGO (MODO CLARO) --- */
.logo-dinamico {
    background: #ffffff00; /* Fondo blanco */
    border-radius: 100%;
    /* Sombra oscura muy sutil para que se vea bien en el modo claro */
    /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.185);*/
    transition: all 0.3s ease; /* Transición suave al cambiar de modo */
}

/* --- ESTILO DEL LOGO (MODO OSCURO) --- */
[data-theme="dark"] .logo-dinamico {
    background: #00000000; /* Fondo transparente (o usa var(--bg-light) si prefieres fondo oscuro) */
    /* Aquí recuperamos tu sombra/brillo blanco fuerte para que destaque en la oscuridad */
    /*box-shadow: 0 0 15px rgba(255, 255, 255, 0.6); */
    /* Si tu logo es oscuro y no se ve en fondo negro, puedes invertir sus colores con este filtro: */
    /* filter: invert(1) brightness(2); */
}

.header-actions {
    display: flex;
    align-items: center;
    
    /* Lo sacamos del flujo normal y lo pegamos a la derecha */
    position: absolute !important;
    right: 60px; /* Distancia desde el borde derecho del fondo blanco */
    top: 50%;
    transform: translateY(-50%); /* Lo centra verticalmente perfecto */
}

/* --- PRZYCISKI AKCJI W NAGŁÓWKU --- */
.action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    /* El Efecto Glass (Vidrio) */
    /*background: rgba(255, 255, 255, 0.65); 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);*/
    border: 2px solid rgba(255, 255, 255, 0.9); /* Borde sutil brillante */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Sombra suave para levantar */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Animación suave */
    font-size: 1.3rem;
    color: var(--text-light);
    margin-left: 1rem;
    position: relative;
    /*border-radius: 50%;*/
    cursor: pointer;
}

.action-btn:hover {
    transform: scale(1.1);
    color: var(--primary-color);
    background-color: #f0f3ff;
}
/* --- CORRECCIÓN: Iconos Verdes en Hover y Página Actual --- */
.header-actions .action-btn:hover,
.header-actions .action-btn.current-page-item,
.header-actions .action-btn.current-page-item i,
.cart-wrapper .cart-btn:hover,
.cart-wrapper .cart-btn.current-page-item,
.cart-wrapper .cart-btn.current-page-item i {
    color: #2ecc71 !important; /* Tu color verde neón */
    background-color: transparent !important;
}
/* --- ICONOS AZULES -> VERDES (SIN CÍRCULOS) --- */

/* 1. Estado Base: Azul y limpio (sin fondo) */
.header-actions .action-btn,
.search-trigger-btn {
    /* Quitamos cualquier fondo o borde circular */
    background: transparent !important; 
    border: none !important;
    box-shadow: none !important;
    border-radius: 50px !important;
    
    /* Tamaño y posición */
    width: 45px; 
    height: 45px;
    padding: 0;
    margin-left: 0.5rem;
    
    /* Centrado */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    /* --- AQUÍ ESTÁ EL CAMBIO DE COLOR --- */
    /* Usamos tu azul corporativo */
    color: #0069fa; 
    /* Nota: Si prefieres un azul cielo más claro, cambia la línea de arriba por: color: #3498db; */
    
    /* Transición suave */
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}

/* 1. Ukrywamy oryginalną ikonę lupy z FontAwesome */
.search-trigger-btn i {
    display: none !important;
}

/* 2. Zapewniamy pozycjonowanie dla naszej nowej lupy */
.search-trigger-btn {
    position: relative !important;
}

/* 3. Tworzymy KÓŁKO (szkiełko) lupy */
.search-trigger-btn::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2.5px solid currentColor;
    border-radius: 50%;
    top: 11px;
    left: 11px;
    /* Animacja obrotu TYLKO dla kółka */
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 4. Tworzymy RĄCZKĘ lupy */
.search-trigger-btn::after {
    content: '';
    position: absolute;
    width: 3px;
    height: 10px;
    background-color: currentColor;
    border-radius: 2px;
    top: 26px;
    left: 26px;
    transform: rotate(-45deg);
    /* Rączka nie ma animacji - stoi całkowicie w miejscu! */
}

/* 5. Co robi kółko, gdy najedziesz myszką (Hover)? */
.search-trigger-btn:hover::before {
    transform: scale(1.15); /* Tylko kółko lekko rośnie */
}

/* 6. Co robi kółko, gdy klikniesz (Aktywne)? */
.search-trigger-btn.is-active::before {
    /* Obrót 3D samego szkiełka o 180 stopni (odwrócenie na drugą stronę) */
    transform: scale(1.15) rotateY(180deg); 
}

/* 5. Ajuste de los contadores (Badges) */
/* Deben tener sombra propia para no perderse */
.header-actions .cart-count,
.header-actions .action-btn .unread-badge {
    top: -10px !important; 
    right: -10px !important;
    box-shadow: 0 3px 6px rgba(0,0,0,0.25); 
    border: 2px solid #fff;
}


/* --- WYSZUKIWARKA --- */
.search-bar-container {
    display: flex;
    align-items: center;
    border: 1px solid #e9ecef;
    border-radius: var(--border-radius);
    padding: 0.5rem 1rem;
    transition: all 0.3s ease;
    margin-right: 1.5rem;
    background-color: var(--secondary-color);
}

/*.search-bar-container:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(94, 114, 228, 0.2);
}*/
/* --- CORRECCIÓN DEFINITIVA MARCO BUSCADOR --- */

/* 1. Elimina la reacción del contenedor padre al hacer clic */
.search-bar-container,
.search-bar-container:focus,
.search-bar-container:focus-within,
.search-bar-container:active {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* 2. Elimina la reacción del botón al hacer clic */
.search-trigger-btn,
.search-trigger-btn:focus, 
.search-trigger-btn:active,
.search-trigger-btn:focus-visible,
.search-trigger-btn.is-active:focus {
    outline: none !important;
    border: none !important;
    /* Esto elimina el "resplandor" azul típico de Bootstrap/Chrome */
    box-shadow: none !important; 
    background: transparent !important;
    -webkit-tap-highlight-color: transparent !important; /* Para móviles */
}
.search-input {
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.95rem;
    border-radius: 50px;
    color: var(--text-dark);
    padding-right: 10px;
}

.search-input::placeholder {
    color: var(--text-light);
}

.search-icon {
    color: var(--text-light);
    font-size: 1.1rem;
}

.nav-toggle {
    background: none;
    border: none;
    font-size: 1.8rem;
    color: var(--text-dark);
    cursor: pointer;
    margin-right: 1.5rem;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.nav-toggle:hover {
    transform: scale(1.1);
}

/* --- NOWY PRZYCISK OKRĄGŁY Z TEKSTEM --- */

/* Reset starego stylu nav-toggle */
.nav-toggle.circular-toggle {
    width: 65px;
    /* Rozmiar przycisku */
    height: 65px;
    padding: 0;
    background: transparent;
    border: none;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-right: 1.5rem;
    transition: transform 0.3s ease, opacity 0.3s ease;
    /* To zapewnia, że przycisk zniknie płynnie, gdy JS ustawi opacity: 0 */
}

/* Hover efekt - lekkie powiększenie */
.nav-toggle.circular-toggle:hover {
    transform: scale(1.1);
}

.circle-text-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Stylizacja tekstu dookoła (SVG) */
.circle-text-wrapper svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Animacja obrotu */
    animation: spinText 10s linear infinite;
    fill: var(--text-dark);
    /* Kolor tekstu dookoła */
}

.circle-text-wrapper text {
    /* El tamaño y el espaciado NO se tocan aquí a propósito.
       Los fija el propio SVG (font-size="9.7", letter-spacing="1") junto
       con textLength="244", en unidades del viewBox 0 0 100 100. Así el texto
       escala solo con el botón y se ve igual a 65px que a 55px.
       Si se sobreescriben en px, el texto se agranda respecto al círculo y
       lengthAdjust lo aplasta para que quepa: letras altas y estrechas. */
    text-transform: uppercase;
}

/* Środkowa litera "C" */
.center-letter {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--primary-color);
    /* Kolor fioletowy (lub inny zdefiniowany w root) */
    z-index: 2;
    padding-bottom: 2px;
    /* Lekka korekta optyczna */
}

/* Animacja kręcenia się */
@keyframes spinText {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Responsywność - na małych ekranach może być nieco mniejszy */
@media (max-width: 768px) {
    .nav-toggle.circular-toggle {
        width: 55px;
        height: 55px;
        margin-right: 10px;
    }

    /* Antes había aquí un font-size: 14px para el texto del círculo.
       Sobraba: el SVG escala con el viewBox, así que al reducir el botón
       de 65px a 55px el texto ya se reduce en la misma proporción. Con el
       14px el texto salía MÁS grande en móvil que en escritorio y las
       letras se veían apretadas y deformadas. */

    .center-letter {
        font-size: 1.3rem;
    }
}


.dwukolorowy-napis {
    font-size: 2.2rem;
    font-weight: 700;
    background: linear-gradient(to bottom,
            white 50%,
            red 50%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* --- Panel boczny kategorii --- */
.sidebar-categories {
    position: fixed;
    top: 10px;
    left: 15px;
    width: 350px;
    height: 98%;
    background-color: var(--bg-light);
    box-shadow: 2px 0 10px rgb(30 81 169 / 72%);
    z-index: 1100;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    transform: translateX(calc(-100% - 38px));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 50px;
}

.sidebar-categories.active {
    transform: translateX(0);
}

.sidebar-view {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.4s ease-in-out;
    padding: 2rem 0.875rem;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 50px;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
}

/* --- SCROLLBAR FINO .sidebar-view --- */
.sidebar-view::-webkit-scrollbar {
    width: 4px;
}

.sidebar-view::-webkit-scrollbar-track {
    background: transparent;
    margin-top: 100px;    /* ← tiene que ser >= border-radius del contenedor (50px) */
    margin-bottom: 100px;
}

.sidebar-view::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 20px;
}

.sidebar-view::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}

[data-theme="dark"] .sidebar-view::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
}
[data-theme="dark"] .sidebar-view::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}
[data-theme="dark"] .sidebar-view {
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.sidebar-view:not(.active) {
    transform: translateX(100%);
}

.sidebar-view.active {
    transform: translateX(0);
}

/* --- CABECERA SIDEBAR: TÍTULO CENTRADO + BOTONES FLOTANTES --- */

.sidebar-header {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    margin-bottom: 2rem;
    min-height: 60px;
    background: transparent;
}

/* Título */
.sidebar-header h3 {
    margin: 0;
    color: var(--primary-color);
    font-size: 1rem;
    font-weight: 700;
    text-align: center !important;
    z-index: 1;
    max-width: 82%;
}

/* --- ESTILOS UNIFICADOS BOTONES (CERRAR Y VOLVER) --- */

.sidebar-header .back-btn,
.sidebar-header .close-sidebar {
    position: absolute;
    top: 50%;
    /* AQUÍ ESTÁ LA CLAVE: Empezamos centrados */
    transform: translateY(-50%);
    
    width: 36px;
    height: 36px;
    border-radius: 50%;
    
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    color: var(--text-dark);
    cursor: pointer;
    /* Transición suave para evitar saltos */
    transition: all 0.3s ease; 
    margin: 0;
    z-index: 10;
}

/* Posiciones */
.sidebar-header .close-sidebar { right: 5px; }
.sidebar-header .back-btn { left: 5px; }

/* --- HOVER SIN SALTOS --- */

.sidebar-header .close-sidebar:hover {
    background: #ff4757;
    color: white;
    border-color: #ff4757;
    /* IMPORTANTE: Mantenemos el translateY(-50%) para que no salte, solo rotamos */
    transform: translateY(-50%) rotate(90deg);
    box-shadow: 0 8px 20px rgba(255, 71, 87, 0.25);
}

.sidebar-header .back-btn:hover {
    background: #ffffff;
    color: var(--primary-color);
    border-color: #fff;
    /* IMPORTANTE: Mantenemos el translateY(-50%) y movemos lateralmente */
    transform: translateY(-50%) translateX(-3px);
    box-shadow: 0 8px 20px rgba(94, 114, 228, 0.25);
}

/* Iconos */
.sidebar-header .back-btn i,
.sidebar-header .close-sidebar i {
    font-size: 1.3rem;
    line-height: 1;
    display: block;
}

.sidebar-nav-list {
    list-style: none;
    padding: 0;
}

.sidebar-nav-list li {
    margin-bottom: 0.5rem;
}

.toggle-subcategories {
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 1rem;
    color: var(--text-dark);
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 50px;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-align: center !important;
    width: 100%;
    display: block;
}

.toggle-subcategories:hover {
    background-color: rgba(94, 114, 228, 0.1);
    color: var(--primary-color);
}

.toggle-subcategories:focus {
    outline: none;
}

.sidebar-nav-list li a {
    display: flex;
    align-items: center;
    padding: 0.8rem 1rem;
    color: var(--text-dark);
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 50px;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-align: center !important;
    width: 100%;
    display: block;
}

.sidebar-nav-list li a:hover {
    background-color: rgba(94, 114, 228, 0.1);
    color: var(--primary-color);
}

.has-sub-icon {
    display: none;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1050;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
}

.overlay.active {
    visibility: visible;
    opacity: 1;
}

/* --- Koszyk (Cart, Dropdown & Cart Page) --- */

/* Licznik przy ikonie koszyka */
.cart-count {
    position: absolute;
    top: 0;
    right: 0;
    background-color: var(--accent-color);
    color: white;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: scale(0);
    transition: transform 0.2s ease-in-out;
}

.cart-count.active {
    transform: scale(1);
}

/* --- GLOBALNE PRZYCISKI ILOŚCI (STOSOWANE W CART.PHP i PRODUCT.PHP) --- */
.quantity-btn {
    width: 32px;
    height: 32px;
    border-radius: 100%;
    border: 1px solid #e0e0e0;
    background-color: transparent;
    color: var(--text-light);
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.3s ease;
    margin-left: 5px;
    margin-right: 5px;
}

.quantity-btn:hover {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* --- ZMODYFIKOWANY ROZWIJANY KOSZYK (Dropdown) --- */
.cart-dropdown {
    position: absolute;
    top: calc(100% + 5px);
    right: 7px;
    width: 360px;
    /* Szerokość */
    z-index: 1001;
    background: var(--bg-light);
    border-radius: var(--border-radius);
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.15);
    border: 1px solid #f0f0f0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.98);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    display: flex;
    flex-direction: column;
    max-height: 80vh;
    overflow: hidden;
}

.cart-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.cart-dropdown .cart-items {
    overflow-y: auto;
    flex-grow: 1;
    padding: 0;
}

.cart-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid #f5f5f5;
    transition: background-color 0.2s ease;
    position: relative;
    opacity: 1;
    transform: translateX(0);
}

.cart-dropdown-item:hover {
    background-color: #fafafa;
}

.cart-dropdown-item.is-removing {
    opacity: 0;
    transform: translateX(20px);
}

/* Link obejmujący zdjęcie i tekst w koszyku */
.cart-item-link {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-grow: 1;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

/* Zmniejszone zdjęcie w dropdownie */
.cart-dropdown .cart-item-image {
    width: 50px !important;
    height: 50px !important;
    object-fit: contain;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #f0f0f0;
    flex-shrink: 0;
}

.cart-item-details {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.2rem;
}

/* Nazwa produktu w DROPDOWNIE - pełna, mniejsza */
.cart-dropdown .cart-item-name {
    display: block;
    font-weight: 600;
    color: var(--text-dark);
    font-size: 0.85rem;
    line-height: 1.3;
    white-space: normal;
    /* Zawijanie tekstu */
    overflow: visible;
    transition: color 0.2s;
    margin-bottom: 0;
}

.cart-item-link:hover .cart-item-name {
    color: var(--primary-color);
}

/* Cena w DROPDOWNIE */
.cart-dropdown .cart-item-price {
    font-size: 0.85rem;
    color: var(--primary-color);
    font-weight: 600;
}

/* Sekcja ilości i usuwania (Wrapper) */
.cart-item-actions-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.cart-dropdown .cart-item-quantity {
    display: flex;
    align-items: center;
    gap: 0;
    background: transparent;
    border: none;
    padding: 0;
}

/* NADPISUJEMY PRZYCISKI TYLKO DLA DROPDOWNA (Mniejsze) */
.cart-dropdown .quantity-btn {
    width: 24px;
    /* Mniejsze */
    height: 24px;
    border-radius: 50%;
    border: 1px solid #e0e0e0;
    background-color: transparent;
    color: var(--text-light);
    cursor: pointer;
    font-size: 0.8rem;
    margin: 0 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.cart-dropdown .quantity-btn:hover {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.cart-dropdown .quantity-value {
    font-weight: 600;
    min-width: 20px;
    text-align: center;
    font-size: 0.85rem;
}

/* Przycisk usuwania w dropdownie */
.cart-dropdown .remove-item-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #999;
    margin-left: 5px;
    background: none;
    border: none;
    cursor: pointer;
}

.cart-dropdown .remove-item-btn:hover {
    color: #dc3545;
}

/* Stopka rozwijanego koszyka */
.cart-dropdown .cart-summary {
    padding: 1rem;
    background-color: #f8f9fa;
    border-top: 1px solid #e9ecef;
    flex-shrink: 0;
}

.cart-dropdown .cart-total {
    font-size: 1rem;
    margin-bottom: 0.8rem;
    color: var(--text-dark);
}

.cart-dropdown .btn-go-to-cart {
    display: block;
    width: 100%;
    padding: 10px;
    text-align: center;
    background-color: var(--primary-color);
    color: white;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: background-color 0.2s ease, transform 0.2s ease;
    box-shadow: 0 4px 15px rgba(94, 114, 228, 0.2);
}

.cart-dropdown .btn-go-to-cart:hover {
    background-color: #4a5ac9;
    transform: translateY(-2px);
    color: white;
}

/* Styl dla pustego koszyka */
.cart-empty {
    text-align: center;
    padding: 4rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
}

.cart-empty i {
    font-size: 4rem;
    color: #e0e0e0;
    margin-bottom: 1.5rem;
}

.cart-empty h4 {
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.cart-empty p {
    color: var(--text-light);
    max-width: 250px;
}

.alert {

    border-radius: 50px !important;
}

/* --- ESTILOS PARA ALERTA DE STOCK PERSONALIZADA --- */
.custom-stock-alert {
    border-radius: 50px;
    border: 2px solid var(--primary-color, #6a0dad);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.custom-stock-title {
    color: #333;
}

.custom-stock-text .swal2-html-container {
    color: #d33;
    font-weight: 600;
    font-size: 1.1em;
}

/* --- NUEVOS ESTILOS PARA EL BOTÓN DE CONFIRMACIÓN --- */
.custom-confirm-button {
    background-color: var(--primary-color, #0057ff) !important;
    border-radius: 50px !important;
    border: 0px solid #fff !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
    font-weight: bold !important;
    font-size: 1.1em !important;
    padding: 0.75em 2em !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.custom-confirm-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
}

/* Estilos para la alerta de error de stock */
.stock-error-alert {
    border: 2px solid #d33;
    border-radius: 60px;
}

.stock-error-html p {
    margin: 0;
    padding: 1em;
    font-weight: 500;
}

/* --- NUEVOS ESTILOS PARA EL BOTÓN DE CONFIRMACIÓN DEL ERROR --- */
.stock-error-confirm-button {
    background-color: #d33 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50px !important;
    font-weight: bold !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.stock-error-confirm-button:hover {
    background-color: #c82333 !important;
    transform: translateY(-2px);
}

/* --- NOWOCZESNA STRONA KOSZYKA (CART.PHP) --- */
.container.cart-page-main {
    max-width: 1250px;
    padding-top: 2rem;
    padding-bottom: 3rem;
}

/* Superficie interior inspirada en Mi cuenta. */
.cart-page-surface {
    position: relative;
    padding: clamp(1rem, 2.4vw, 1.6rem);
    border: 1px solid #e1e7eb;
    border-radius: 28px;
    background: linear-gradient(145deg, #f7f9fa 0%, #f1f4f6 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .95),
        0 12px 30px rgba(43, 58, 66, .055);
}

.cart-page-surface .cart-page-title {
    margin-top: 0;
}

[data-theme="dark"] .cart-page-surface {
    border-color: rgba(184, 194, 211, .13);
    background: linear-gradient(145deg, #20252f 0%, #191e27 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .035),
        0 14px 32px rgba(0, 0, 0, .22);
}

@media (max-width: 576px) {
    .container.cart-page-main {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .cart-page-surface {
        padding: .8rem;
        border-radius: 21px;
    }
}

.cart-page-container {
    max-width: 1600px;
    margin: 1rem auto;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(350px, 1fr);
    gap: 1rem;
    align-items: start;
}

.cart-page-title {
    grid-column: 1 / -1;
    font-size: 2.5rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid #e9ecef;
    padding-bottom: 1rem;
}

/* 1. CAJA EXTERIOR: Solo fondo, sombra y curvas (CERO PADDING) */
.cart-items-list {
    background-color: var(--bg-light);
    border-radius: 20px;
    box-shadow: var(--shadow-light);
    overflow: hidden; /* Fundamental para que el scroll no se salga de las curvas */
    padding: 0 !important; /* Quitamos el padding aquí */
}

.cart-products-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 1.8rem;
    padding: 1.7rem 0 1rem;
    border-bottom: 0;
}

.cart-products-header h3 {
    margin: 0;
    color: var(--text-dark);
    font-size: 1.5rem;
    font-weight: 700;
}

.cart-products-columns {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0 2.4rem 0 1.8rem;
    padding: 0 16px 10px;
    border-bottom: 1px solid #e7ecf2;
    color: #8a96a8;
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.cart-products-columns > span:first-child {
    flex: 1;
    min-width: 0;
}

.cart-products-columns__metrics {
    display: grid;
    grid-template-columns: 110px 120px 108px 40px;
    justify-content: end;
    gap: 8px;
    width: 402px;
    min-width: 402px;
}

.cart-products-columns__metrics span:first-child,
.cart-products-columns__metrics span:nth-child(2),
.cart-products-columns__metrics span:nth-child(3) {
    text-align: center;
}

/* 2. ÁREA DE SCROLL: Aquí ponemos el padding y el límite de altura */
.cart-items-scroll-area {
    max-height: 1500px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: .8rem 1.8rem 1.8rem;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #879bb0 #edf1f5;
}

/* 3. DISEÑO DE LA BARRA DE SCROLL */
.cart-items-scroll-area::-webkit-scrollbar {
    width: 10px;
}

/* El riel (track) por donde baja la barra */
.cart-items-scroll-area::-webkit-scrollbar-track {
    border-radius: 50px;
    background: #edf1f5;
    box-shadow: inset 0 0 0 1px rgba(94, 111, 132, .08);
    margin: 24px 0;
}

/* La pastillita que se mueve (thumb) */
.cart-items-scroll-area::-webkit-scrollbar-thumb {
    border: 2px solid #edf1f5;
    border-radius: 50px;
    background: linear-gradient(180deg, #a8b7c6 0%, #7f93a8 100%);
    background-clip: padding-box;
    box-shadow: inset 0 0 0 1px rgba(52, 72, 94, .08);
}

.cart-items-scroll-area::-webkit-scrollbar-thumb:hover {
    border-color: #edf1f5;
    background: linear-gradient(180deg, #4389ff 0%, #1769ff 100%);
    background-clip: padding-box;
}

/* --- MODO OSCURO (OPCIONAL) --- */
[data-theme="dark"] .cart-items-scroll-area::-webkit-scrollbar-thumb {
    border-color: #202630;
    background: linear-gradient(180deg, #718096 0%, #536274 100%);
    background-clip: padding-box;
}
[data-theme="dark"] .cart-items-scroll-area::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #6aa2ff 0%, #347fff 100%);
    background-clip: padding-box;
}

[data-theme="dark"] .cart-items-scroll-area {
    scrollbar-color: #718096 #202630;
}

[data-theme="dark"] .cart-items-scroll-area::-webkit-scrollbar-track {
    background: #202630;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}

.cart-page-item {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    padding: 1.5rem 0;
}

.cart-page-item:not(:last-child) {
    border-bottom: 1px solid #e9ecef;
}

/* --- POPRAWA JAKOŚCI ZDJĘCIA NA STRONIE KOSZYKA --- */
.cart-page-item .cart-item-image {
    width: 140px !important;
    height: 140px !important;
    object-fit: contain;
    background-color: #ffffff;
    padding: 5px;
    border: 1px solid #e9ecef;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.cart-page-item .cart-item-details {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

/* POPRAWIONE: Nazwa produktu w głównym koszyku (Zawijanie) */
.cart-page-item .cart-item-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-dark);
    white-space: normal;
    /* Zawijanie tekstu */
    line-height: 1.4;
}

/* POPRAWIONE: Cena w głównym koszyku (Kolor) */
.cart-page-item .cart-item-price {
    font-size: 1.1rem;
    color: var(--primary-color);
    /* Przywrócenie koloru */
    font-weight: 700;
}

/* Przyciski na stronie koszyka (korzystają z globalnych .quantity-btn ale z marginesem) */
.cart-page-item .cart-item-actions {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-top: 1rem;
}

.cart-page-item .remove-item-btn {
    background: none;
    border: none;
    color: var(--text-light);
    cursor: pointer;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

.cart-page-item .remove-item-btn:hover {
    color: var(--accent-color);
}

/* Podsumowanie na stronie koszyka */
.cart-summary-box {
    width: auto;
    min-width: 0;
    background-color: var(--bg-light);
    padding: 2rem;
    border-radius: 20px;
    box-shadow: var(--shadow-light);
    position: sticky;
    top: 100px;
}

.cart-summary-box h3 {
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 1rem;
}

.summary-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    font-weight: 700;
    font-size: 1.05rem;
}

.summary-subtotal-heading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cart-product-count-label {
    color: #758294;
    font-size: .76rem;
    font-weight: 650;
    line-height: 1;
}

.cart-product-count-badge {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    box-sizing: border-box;
    border: 1px solid rgba(23, 105, 255, .2);
    border-radius: 50%;
    color: #1769ff;
    background: linear-gradient(145deg, #fff 0%, #edf4ff 100%);
    box-shadow:
        0 6px 14px rgba(23, 105, 255, .13),
        inset 0 1px 0 rgba(255, 255, 255, .95);
    font-size: .78rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.summary-subtotal-colon {
    color: #7d8794;
}

[data-theme="dark"] .cart-product-count-badge {
    color: #9bc0ff;
    border-color: rgba(111, 164, 255, .35);
    background: linear-gradient(145deg, #2a3952 0%, #202c40 100%);
    box-shadow:
        0 7px 16px rgba(0, 0, 0, .22),
        inset 0 1px 0 rgba(255, 255, 255, .06);
}

[data-theme="dark"] .cart-product-count-label {
    color: #a9b5c5;
}

.summary-line.total {
    color: var(--text-dark);
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e9ecef;
}

.col-6 {
    flex: 0 0 auto;
    width: 49% !important;
    border-radius: 50px;
}

.btn{
    border-radius: 50px;
}


.col-lg-10 {
    flex: 0 0 auto;
    width: 95%;
}
.btn-outline-secondary {
    --bs-btn-color: #6c757d;
    --bs-btn-border-color: #6c757d;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #04b154;
    --bs-btn-hover-border-color: #04b154;
    --bs-btn-focus-shadow-rgb: 108, 117, 125;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #6c757d;
    --bs-btn-active-border-color: #6c757d;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #6c757d;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #6c757d;
    --bs-gradient: none;
}

.btn:hover {
background-color: #04b154;
border-color: #04b154;
}

.btn-checkout {
    display: block;
    width: 100%;
    padding: 16px;
    text-align: center;
    background-color: var(--accent-color);
    color: white;
    border-radius: 36px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    margin-top: 2rem;
    border: none;
    cursor: pointer;
}

.btn-checkout:hover {
    background-color: #17d317;
    color: rgb(255, 255, 255);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(241, 238, 239, 0.507);
}

.btn-continue-shopping {
    display: block;
    width: 80%;
    padding: 12px;
    text-align: center;
    background-color: cornflowerblue;
    color: white;
    border-radius: 36px;
    font-weight: 600;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    margin-top: 0.6rem;
    border: none;
    cursor: pointer;
}

.btn-continue-shopping:hover {
    background-color: #2e62d1;
    color: rgb(255, 255, 255);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(178, 238, 130, 0.507);
}

/* Acciones principales del carrito: mismo lenguaje visual en página y lateral. */
.cart-summary-actions,
.cart-sidebar-footer-actions {
    display: grid;
    gap: 10px;
    margin-top: 20px;
}

.cart-action-btn,
.btn-checkout.cart-action-btn,
.btn-continue-shopping.cart-action-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 54px;
    box-sizing: border-box;
    margin: 0;
    padding: 10px 48px;
    border: 1px solid transparent;
    border-radius: 50px;
    color: #fff;
    font-family: inherit;
    font-size: .96rem;
    font-weight: 750;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
}

.cart-action-btn--primary,
.btn-checkout.cart-action-btn--primary {
    background: linear-gradient(135deg, #1769ff 0%, #0d7cff 55%, #0a63e8 100%);
    border-color: rgba(10, 91, 220, .2);
    box-shadow: 0 10px 24px rgba(23, 105, 255, .24), inset 0 1px 0 rgba(255,255,255,.24);
}

.cart-action-btn--primary::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.18) 48%, transparent 72%);
    transform: translateX(-110%);
    transition: transform .55s ease;
}

.cart-action-btn--primary:hover,
.btn-checkout.cart-action-btn--primary:hover {
    color: #fff;
    background: linear-gradient(135deg, #0f5fe9 0%, #0873f2 55%, #0758cf 100%);
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(23, 105, 255, .3), inset 0 1px 0 rgba(255,255,255,.25);
}

.cart-action-btn--primary:hover::before {
    transform: translateX(110%);
}

.cart-action-btn--secondary,
.btn-continue-shopping.cart-action-btn--secondary {
    min-height: 48px;
    color: #536070;
    background: #fff;
    border-color: #d7dee8;
    box-shadow: 0 5px 14px rgba(31, 50, 81, .05);
}

.cart-action-btn--secondary:hover,
.btn-continue-shopping.cart-action-btn--secondary:hover {
    color: #1769ff;
    background: #f7faff;
    border-color: rgba(23,105,255,.38);
    transform: translateY(-2px);
    box-shadow: 0 9px 20px rgba(23,105,255,.1);
}

.cart-action-btn__icon {
    position: absolute;
    left: 12px;
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,.16);
    font-size: .8rem;
}

.cart-action-btn--secondary .cart-action-btn__icon {
    color: #1769ff;
    background: #edf4ff;
}

.cart-action-btn__arrow {
    position: absolute;
    right: 17px;
    font-size: .76rem;
    transition: transform .2s ease;
}

.cart-action-btn:hover .cart-action-btn__arrow {
    transform: translateX(3px);
}

.cart-action-btn:focus-visible {
    outline: 3px solid rgba(23,105,255,.28);
    outline-offset: 3px;
}

.cart-action-btn--empty {
    width: min(100%, 280px);
    margin: 1rem auto 0;
}

.cart-action-btn--sidebar {
    border-radius: 50px;
    font-size: .94rem;
}


/* --- Sekcja Baner (Hero) --- */
.hero-banner {
    position: relative;
    top: 20px;
    width: 97%;
    margin-left: auto;
    margin-right: auto;
    height: 500px;
    background: linear-gradient(to right, rgba(94, 114, 228, 0.85), rgba(94, 114, 228, 0.65)), no-repeat center center/cover;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffff;
    margin-bottom: 2.5rem;
    border-radius: 50px;
    overflow: hidden;
    animation: fadeInUp 1s ease-in-out;
}

.banner-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    padding: 0 20px;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.banner-content h1 {
    font-size: 3.8rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #ffffff;
    line-height: 1.2;
}

.banner-content p {
    font-size: 1.4rem;
    margin-bottom: 2.5rem;
    color: #e9ecef;
}

.cta-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #0069fa;
    color: #ffffff;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.cta-button i {
    font-size: 0.9rem;
    transition: transform 0.3s ease;
}

.cta-button:hover {
    /*transform: translateY(-5px);*/
    background-color: #04cc5e;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}

/* Botón Imprimir */
#externalPrintBtn {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #f8f5f5;
    border: 1px solid rgba(0, 0, 0, 0.020);
    padding: 0.3rem 1.2rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.3px;
    cursor: pointer;
    display: inline-block;
    gap: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

#externalPrintBtn i {
    font-size: 0.9rem;
    transition: transform 0.3s ease;
}

#externalPrintBtn:hover {
    background: #04cc5e !important; 
    color: #fff !important;
    border-color: #04cc5e;
    transform: translateY(-1px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}

#externalPrintBtn:active {
    transform: translateY(0);
}



/* Botón Cerrar Factura Moderno */
#closeInvoiceBtn {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #444;
    border: 1px solid rgba(0, 0, 0, 0.020);
    padding: 0.3rem 1.2rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

#closeInvoiceBtn i {
    font-size: 0.9rem;
    transition: transform 0.3s ease;
}

#closeInvoiceBtn:hover {
    background: #04cc5e !important; 
    color: #fff !important;
    border-color: #04cc5e;
    transform: translateY(-1px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}

#closeInvoiceBtn:hover i {
    transform: rotate(90deg); /* Pequeño detalle visual al hacer hover */
}

#closeInvoiceBtn:active {
    transform: translateY(0);
}


/* --- Sekcja produktów (ZAKTUALIZOWANA) --- */
.featured-products {
    padding: 2.5rem 0;
}

.section-title {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 3rem;
    color: var(--text-dark);
    font-weight: 700;
    position: relative;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: var(--progress-width, 0%);
    height: 4px;
    border-radius: 50px;
    background: #198754;
    transition: width 0.7s ease;
}

.section-title.is-loading::after {
    background: linear-gradient(90deg, var(--primary-color) 25%, #ffffff90 50%, var(--primary-color) 75%);
    background-size: 300% 100%;
    animation: shimmer 1s linear infinite;
    transition: width 0.7s ease;
}

@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}

/* Stylizacja karty produktu */
.product-card {
    background-color: var(--bg-light);
    border-radius: 20px !important;
    box-shadow: var(--shadow-light);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.product-link {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    color: inherit;
    text-decoration: none;
}

/* --- POPRAWA JAKOŚCI ZDJĘCIA NA LIŚCIE PRODUKTÓW --- */
.product-image-wrapper {
    width: 100%;
    height: 260px;
    background-color: transparent;
    display: flex;
    /*align-items: center;*/
    justify-content: center;
    overflow: hidden;
    border-bottom: 1px solid #f0f0f0;
    padding: 15px;
    position: relative;
}

.product-image-wrapper img {
    width: 75%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-origin: center center;
    will-change: transform;
}

.product-card:hover .product-image-wrapper img {
    transform: scale(1.12);
}

/* Informacje o produkcie (Tytuł i Cena) */
.product-info {
    padding: 1.5rem 1.5rem 0.5rem 1.5rem;
    text-align: center;
}

.product-info h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.15rem;
    color: var(--text-dark);
    font-weight: 600;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.product-info p {
    font-size: 1.25rem;
    color: var(--primary-color);
    font-weight: 700;
    margin: 0.5rem 0 0 0;
}

/* --- Sekcja przycisku (Footer karty z separatorem) --- */
.product-card-footer {
    padding: 1rem 1.5rem 1.5rem 1.5rem;
    margin-top: auto;
    width: 100%;
    border-top: 1px solid #e9ecef;
}

.add-to-cart-form {
    width: 100%;
    padding-top: 0.5rem;
}

/* Nowoczesny przycisk "Outline" */
.add-to-cart-btn {
    width: 100%;
    background-color: transparent;
    color: var(--text-dark);
    border: 2px solid var(--accent-color);
    padding: 10px 20px;
    border-radius: 50px;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.add-to-cart-btn:hover {
    background-color: var(--accent-color);
    color: white;
    box-shadow: 0 4px 12px rgba(245, 54, 92, 0.3);
    transform: translateY(-2px);
}

div:where(.swal2-container) div:where(.swal2-popup) {
    top: 20px !important;
    right: 25px !important;
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.2) !important;
    display: none;
    position: relative;
    box-sizing: border-box;
    grid-template-columns: minmax(0, 100%);
    width: var(--swal2-width);
    max-width: 90% !important;
    padding: var(--swal2-padding);
    border: var(--swal2-border);
    border-radius: var(--swal2-border-radius);
    background: var(--swal2-background);
    color: var(--swal2-color);
    font-family: inherit;
    font-size: 0.775rem;
    container-name: swal2-popup;
}

.swal2-toast div:where(.swal2-html-container) {
    margin: .5em 1em;
    padding: 0;
    overflow: initial;
    font-size: 0.75rem !important;
    text-align: initial;
}
div:where(.swal2-container) div:where(.swal2-timer-progress-bar) {
    width: 100%;
    height: .25em;
    background: #04cc5e !important;
}

/* Wiadomość o braku produktów */
.no-products-message {
    grid-column: 1 / -1;
    text-align: center;
    padding: 2rem;
    color: var(--text-light);
    font-size: 1.1rem;
}

/* --- Stopka (Footer) --- */
.main-footer {
    background-color: #263238;
    color: #cfd8dc;
    padding: 4rem 0;
    margin-top: auto;
}

.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.footer-section {
    flex: 1;
    min-width: 220px;
    margin-bottom: 2rem;
}

.footer-section h4 {
    font-size: 1.4rem;
    margin-bottom: 1.8rem;
    color: #ffffff;
    position: relative;
}

.footer-section h4::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 60px;
    height: 3px;
    background-color: var(--primary-color);
    border-radius: 2px;
}

.footer-section ul {
    list-style: none;
    padding: 0;
}

.footer-section a {
    color: #cfd8dc;
    display: block;
    margin-bottom: 1rem;
    transition: color 0.3s ease;
}

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

.social-media a {
    font-size: 2rem;
    margin-right: 1.5rem;
    color: #cfd8dc;
    transition: transform 0.3s ease, color 0.3s ease;
}

.social-media a:hover {
    transform: scale(1.2);
    color: var(--primary-color);
}

.copyright {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid #455a64;
    font-size: 0.95rem;
    color: #b0bec5;
}

/* --- Różne --- */
main {
    width: 100%;
    padding: 2rem 0;
}

.notification-pill {
    position: fixed;
    top: 130px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 15px;
    border-radius: 50px;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    z-index: 1041;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    animation: fadeInOut 4s forwards;
    text-align: center;
}

.notification-pill.success {
    background-color: #4CAF50;
}

.notification-pill.error {
    background-color: #f44336;
}

.notification-pill.warning {
    background-color: #ff9800;
}

.password-toggle-icon {
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--text-light);
    z-index: 2;
    transition: color 0.3s ease;
}

.password-toggle-icon:hover {
    color: var(--primary-color);
}

.logo-container-above.logo-container-overlap {
    position: relative;
    margin-bottom: 90px;
}

.logo-overlap {
    position: absolute;
    display: inline-flex;
    align-items: center;
    transform: translateX(-50%);
    top: -55px;
    z-index: 10;
    padding: 30px;
    right: -150px;
}

/* --- Animacje --- */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInOut {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }

    10% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    90% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
}

@keyframes animatedGradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}


/* ============================================================
   TABLET/MEDIUM SCREENS — Escalado progresivo del header
   ============================================================ */

/* ── Pantallas medianas: 769px - 1100px ── */
@media (max-width: 1100px) and (min-width: 769px) {
    .main-header {
        height: 120px;
        border-radius: 40px;
    }

    .nav-toggle.circular-toggle {
        width: 50px;
        height: 50px;
        margin-right: 0.8rem;
    }

    .logo {
        left: calc(var(--logo-left, 40%) - 5%) !important;  /* Se acerca un poco más a Categorías */
    }

    /* Escalar el texto del logo con un máx razonable */
    .logo span {
        font-size: clamp(14px, 2vw, 22px) !important;
    }

    /* Escalar la imagen del logo */
    .logo img,
    .logo .logo-dinamico {
        max-height: 60px;
    }

    .header-actions {
        right: 30px;                       /* Menos margen derecho */
        gap: 2px;
    }

    .header-actions .action-btn,
    .header-actions .cart-btn,
    .search-trigger-btn {
        width: 38px;
        height: 38px;
        font-size: 1.1rem;
        margin-left: 0.3rem;
    }
}

/* ── Pantallas estrechas: 769px - 900px ── */
@media (max-width: 900px) and (min-width: 769px) {
    .main-header {
        height: 100px;
        border-radius: 35px;
    }

    .nav-toggle.circular-toggle {
        width: 42px;
        height: 42px;
        margin-right: 0.5rem;
    }

    .logo {
        left: calc(var(--logo-left, 40%) - 8%) !important;
    }

    .logo span {
        font-size: clamp(12px, 1.8vw, 18px) !important;
        max-width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .logo img,
    .logo .logo-dinamico {
        max-height: 45px;
    }

    .header-actions {
        right: 15px;
    }

    .header-actions .action-btn,
    .header-actions .cart-btn,
    .search-trigger-btn {
        width: 34px;
        height: 34px;
        font-size: 1rem;
        margin-left: 0.2rem;
    }
}


/* ============================================================
   MOBILE HEADER FIX — Reemplaza el bloque @media (max-width: 768px)
   en style.css (líneas ~1931-1991) con este código.
   ============================================================ */

@media (max-width: 768px) {

    /* ── 1. HEADER principal: altura automática en 2 filas ── */
        .main-header {
        height: auto !important;
        padding: 10px 0 65px 0 !important;  /* padding-bottom extra para los tooltips */
        border-radius: 28px !important;
        overflow: visible !important;        /* CRÍTICO: permite que los tooltips salgan */
    }

    /* ── 2. CONTENEDOR: flex wrap para 2 filas ── */
    .header-container {
    display: flex !important;
    flex-direction: row !important;      /* ← fuerza fila horizontal */
    flex-wrap: wrap !important;          /* los iconos caen a fila 2 */
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 8px 16px !important;
    gap: 0 !important;
}


    /* 3. Modal pegado al header, sin gap */
    .search-modal {
        width: 97% !important;
        border-radius: 0 0 24px 24px !important;
        max-height: 75vh !important;
        margin-top: 25px !important;
        /* Sombra solo abajo para dar sensación de que "cuelga" del header */
        box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15) !important;
    }

    .search-header {
        width: 75% !important;
        padding: 12px 16px !important;
        gap: 10px !important;
    }

    #advanced-search-input {
        font-size: 1rem !important;
    }

    .close-search {
        padding: 5px 10px !important;
        font-size: 0.75rem !important;
        white-space: nowrap !important;
    }

        /* ── Result items más anchos en móvil ── */
    .result-item {
        width: 95% !important;         /* Más ancho que el 80% del desktop */
        padding: 15px 12px !important; /* Menos padding vertical para ver más resultados */
        border-radius: 16px !important;
    }

    /* Imagen más pequeña para ahorrar espacio */
    .result-img {
        width: 50px !important;
        height: 50px !important;
        margin-right: 10px !important;
    }

    /* Nombre del producto: evitar que se corte */
    .result-name {
        font-size: 0.85rem !important;
        white-space: normal !important;
        max-width: 100% !important;
    }

    .result-price-main {
        font-size: 0.85rem !important;
    }

.nav-toggle,
.nav-toggle.circular-toggle {
    order: 1 !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
    margin: 0 8px 0 0 !important;
    flex-shrink: 0 !important;
    width: 52px !important;
    height: 52px !important;
    align-self: center !important;       /* ← alineado al centro vertical */
}

.logo {
    order: 2 !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex: 1 1 0 !important;              /* ← '0' en vez de 'auto' evita desbordamiento */
    min-width: 0 !important;             /* ← CRÍTICO: permite que el flex item se encoja */
    margin: 0 !important;
    padding: 0 !important;
    gap: 6px;
    white-space: normal !important;
}

/* Imagen del logo */
.logo img,
.logo .logo-dinamico {
    height: 60px !important;
    width: auto !important;
    margin-bottom: 0 !important;
}

/* Texto del logo: tamaño responsivo y clamp de 2 líneas */
.logo span {
    font-size: clamp(13px, 3.5vw, 18px) !important;
    line-height: 1.2 !important;
    white-space: normal !important;       /* CRÍTICO: nowrap impedía que line-clamp funcionara */
    text-align: left !important;
    max-width: 200px;                     /* límite para no invadir los iconos */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;               /* máximo 2 líneas */
    line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;              /* rompe palabras muy largas si es necesario */
}

    /* ══════════════════════════════════════════
       FILA 2: Iconos con tooltips
    ══════════════════════════════════════════ */

    .header-actions {
        order: 3 !important;
        width: 100% !important;           /* Ocupa toda la fila → salto automático */
        position: static !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;

        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap;
        gap: 4px;
        margin-top: 8px !important;
        padding-top: 8px !important;
        border-top: 1px solid rgba(0,0,0,0.06); /* Línea separadora sutil */
    }

    /* Botones de acción un poco más pequeños en móvil */
    .header-actions .action-btn,
    .header-actions .cart-btn {
        width: 42px !important;
        height: 42px !important;
        font-size: 1.2rem !important;
        margin-left: 6px !important;
    }

    /* ── Resto de ajustes que ya tenías (se conservan) ── */
    .hero-banner {
        height: 350px;
        border-radius: 36px;
    }

    .banner-content h1 { font-size: 2.5rem; }
    .banner-content p  { font-size: 1.1rem; }

    .product-grid {
        grid-template-columns: 1fr;
    }

    .footer-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-section {
        width: 100%;
        max-width: 300px;
    }

    .footer-section h4::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .copyright-pill {
        white-space: normal !important;
        max-width: 90% !important;
        width: auto !important;
        height: auto !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        line-height: 1.5 !important;
        padding: 10px 20px !important;
        border-radius: 36px !important;
        display: inline-block !important;
        margin-left: auto;
        margin-right: auto;
    }

    /* Responsiva tabla en carrito */
    .cart-table { border: 0; }
    .cart-table thead { display: none; }
    .cart-table tr {
        margin-bottom: 15px;
        border: 1px solid #ddd;
        border-radius: 8px;
        display: block;
        width: 100%;
    }
}

/* ── Modo oscuro: ajustar separador de fila 2 ── */
[data-theme="dark"] .header-actions {
    border-top-color: rgba(255,255,255,0.08) !important;
}

    /* Responsywna tabela w koszyku */
    .cart-table {
        border: 0;
    }

    .cart-table thead {
        display: none;
    }

    .cart-table tr {
        margin-bottom: 15px;
        border: 1px solid #ddd;
        border-radius: 8px;
        display: block;
        width: 100%;
    }

    .cart-table td {
        display: block;
        width: 100%;
        text-align: right;
        padding-left: 50%;
        position: relative;
    }

    .cart-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 10px;
        font-weight: bold;
        text-transform: uppercase;
        text-align: left;
    }

/* --- Style dla opcji dostawy w koszyku --- */
.delivery-options {
    margin: 1.5rem 0;
    padding: 18px;
    border: 1px solid #e7edf4;
    border-radius: 14px;
    background: linear-gradient(145deg, #f8fafc 0%, #f4f8fd 100%);
}

.delivery-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
    font-size: 1.08rem;
    font-weight: 750;
    color: var(--text-dark);
    text-align: center;
    letter-spacing: -.01em;
}

.delivery-title__icon {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border: 1px solid #dce8fa;
    border-radius: 50%;
    color: #1769ff;
    background: #eef5ff;
    box-shadow: 0 5px 12px rgba(23,105,255,.09);
    font-size: .88rem;
}

.delivery-subtitle {
    margin: 7px auto 16px;
    color: #7b8795;
    font-size: .78rem;
    line-height: 1.4;
    text-align: center;
}

.cart-summary-box .delivery-option {
    position: relative;
    display: flex;
    margin-bottom: 10px;
    border-radius: 50px;
}

.cart-summary-box .delivery-option:last-child {
    margin-bottom: 0;
}

.cart-summary-box .delivery-option input[type="radio"] {
    position: absolute;
    z-index: 2;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.cart-summary-box .delivery-option label {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 74px;
    box-sizing: border-box;
    padding: 11px 44px 11px 11px;
    border: 1px solid #e0e7ef;
    border-radius: 50px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(31,50,81,.045);
    cursor: pointer;
    transition: transform .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.cart-summary-box .delivery-option label::after {
    content: '\2713';
    position: absolute;
    right: 13px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 1px solid #cbd5e1;
    border-radius: 50%;
    color: transparent;
    background: #fff;
    opacity: 0;
    font-size: .7rem;
    font-weight: 800;
    transition: color .2s ease, border-color .2s ease, background-color .2s ease, opacity .2s ease, transform .2s ease;
}

.cart-summary-box .delivery-option__main {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 11px;
}

.cart-summary-box .delivery-option__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    box-sizing: border-box;
    flex: 0 0 46px;
    overflow: hidden;
    border: 1px solid #dfeaec;
    border-radius: 50%;
    color: #087f8c;
    background: #f1f9fa;
    font-size: .96rem;
}

.cart-summary-box .delivery-option__icon img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.cart-summary-box .delivery-option__copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.cart-summary-box .delivery-option .delivery-name {
    overflow: hidden;
    color: #2d3a4b;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.25;
    text-overflow: ellipsis;
}

.cart-summary-box .delivery-option__copy small {
    color: #8a96a4;
    font-size: .7rem;
    font-weight: 500;
}

.cart-summary-box .delivery-option .delivery-price {
    flex: 0 0 auto;
    color: #253348;
    font-size: .84rem;
    font-weight: 750;
    white-space: nowrap;
}

.cart-summary-box .delivery-option input[type="radio"]:checked + label {
    border-color: rgba(23,105,255,.5);
    background: #f7faff;
    box-shadow: 0 0 0 3px rgba(23,105,255,.08), 0 8px 18px rgba(23,105,255,.09);
}

.cart-summary-box .delivery-option input[type="radio"]:checked + label::after {
    color: #fff;
    border-color: #1769ff;
    background: #1769ff;
    opacity: 1;
    transform: scale(1.04);
}

.cart-summary-box .delivery-option input[type="radio"]:hover + label {
    transform: translateY(-1px);
    border-color: #bfcddd;
    box-shadow: 0 8px 18px rgba(31,50,81,.08);
}

.cart-summary-box .delivery-option input[type="radio"]:focus-visible + label {
    outline: 3px solid rgba(23,105,255,.22);
    outline-offset: 2px;
}

/* --- ANIMACJE DLA KOSZYKA --- */

/* Styl dla pojedynczego produktu, który jest w trakcie usuwania */
.cart-page-item.removing {
    transition: all 0.5s ease-in-out;
    opacity: 0;
    transform: translateX(50px);
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    overflow: hidden;
    border-width: 0 !important;
}

/* Animacja dla całego kontenera koszyka, gdy staje się pusty */
@keyframes fadeOutAndUp {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}

.cart-content.fade-out {
    animation: fadeOutAndUp 0.6s forwards ease-in-out;
}

/* Animacja dla pojawiającej się wiadomości o pustym koszyku */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.empty-cart-message.fade-in {
    display: block !important;
    animation: fadeIn 0.5s 0.6s forwards ease-in-out;
    opacity: 0;
}

[data-theme="dark"] .mystyles,
[data-theme="dark"] .fav-price-mystyles {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35),
                inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .mystyles {
    background-color: #2a2d38;   /* solo para featured, en favoritos el bg viene inline */
}
[data-theme="dark"] .price-container-centered .mystyles {
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.85),
                inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .mystyle2 {
    border-radius: 50px;
    color: #ffffff;
    padding: 15px 22px;
    font-weight: bold;
    font-size: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    margin-left: auto;
    margin-right: auto;
    max-width: 450px;
}



.mystyle {
    top: 150px;
    left: 50%;
    border-radius: 50px;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.mystyle2 {
    border-radius: 50px;
    color: #000000;
    padding: 15px 22px;
    font-weight: bold;
    font-size: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    /* Centrado real: antes usaba margin-left:30%, que en movil
       empujaba la pastilla fuera del contenedor. */
    margin-left: auto;
    margin-right: auto;
    max-width: 450px;
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 576px) {
    .mystyle2 {
        padding: 13px 16px;
        font-size: 15px;
        border-radius: 22px;
        line-height: 1.3;
    }
}

/* --- OSTATECZNE STYLE DLA BANERA COOKIE --- */
#cookie-consent-banner {
    position: fixed !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 9999 !important;

    background-color: rgba(30, 30, 30, 0.95);
    color: white;
    width: auto;
    max-width: 95%;
    padding: 10px 15px 10px 25px;
    border-radius: 50px;

    display: flex;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 20px;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

#cookie-consent-banner p {
    margin: 0;
    font-size: 12.5px;
    color: #f0f0f0;
    flex-shrink: 1;
}

#cookie-consent-banner a {
    color: #a0d4ff;
    text-decoration: underline;
}

#cookie-consent-banner .cookie-buttons-wrapper {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

#cookie-consent-banner .cookie-consent-button,
#cookie-consent-banner .cookie-customize-button {
    border: none;
    padding: 10px 25px;
    border-radius: 50px;
    cursor: pointer;
    font-weight: bold;
    font-size: 13px;
    transition: background-color 0.3s;
    white-space: nowrap;
}

#cookie-consent-banner .cookie-consent-button {
    background-color: #28a745;
    color: white;
}

#cookie-consent-banner .cookie-consent-button:hover {
    background-color: #218838;
}

#cookie-consent-banner .cookie-customize-button {
    background-color: #6c757d;
    color: white;
}

#cookie-consent-banner .cookie-customize-button:hover {
    background-color: #5a6268;
}

/* --- (Legacy fav styles removidos — ahora en sección FAVORITES BOTTOM BAR) --- */

/* --- PIGUŁKI DOSTĘPNOŚCI (MODERNO & CENTRADO) --- */
.stock-pill {
    /* 1. Centrado y Posicionamiento */
    display: flex;             /* Cambiado a flex para centrar mejor el texto interno */
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin: 16px auto 16px auto !important;   /* <--- aire arriba (vs precio) y abajo (vs footer) */
    
    /* 2. Tamaño y Forma */
    padding: 5px 12px;         /* Un poco más de aire */
    border-radius: 50px;       /* Redondo completo (estadio) */
    
    /* 3. Tipografía */
    font-size: 0.65rem;        /* Un pelín más grande para leerse bien */
    font-weight: 800;          /* Extra negrita */
    text-transform: uppercase;
    letter-spacing: 0.8px;     /* Espaciado elegante */
    
    /* 4. Efectos Modernos */
    border: none;              /* Sin bordes feos */
    box-shadow: 0 2px 6px rgba(0,0,0,0.06); /* Sombra muy sutil */
    backdrop-filter: blur(5px); /* Toque de vidrio si hay fondo detrás */
}

/* Estado: DISPONIBLE (Verde Moderno) */
.stock-pill.available {
    background-color: rgba(46, 204, 113, 0.15); /* Fondo verde suave transparente */
    color: #27ae60;                             /* Texto verde fuerte */
}

/* Estado: AGOTADO (Rojo Moderno) */
.stock-pill.unavailable {
    background-color: rgba(255, 71, 87, 0.15);  /* Fondo rojo suave transparente */
    color: #ff4757;                             /* Texto rojo fuerte */
    cursor: not-allowed;
}

/* --- NOWY STYL: WSZYSTKO W JEDNEJ KAPSULE --- */

/* Główny kontener "kapsuła" - to on ma klasę .mystyle */
.price-unified-box {
    display: flex;
    align-items: center;
    /* Pionowe środkowanie */
    justify-content: center;
    /* Poziome środkowanie */
    gap: 15px;
    /* Odstęp między ceną a resztą */
    padding: 10px 30px;
    /* Oddech wewnątrz kapsuły */
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    /* Pozwala na zawijanie na małych ekranach */
    background: #fff;
    /* Tło kapsuły (jeśli mystyle go nie ma) */
    box-shadow: 0 6px 16px rgba(1, 12, 2, 0.16);
}

/* Nowa cena (duża) */
.unified-current-price {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--primary-color, #6a0dad);
    /* Kolor główny */
    line-height: 1;
}

/* Sekcja zniżki (pionowa lub pozioma) */
.unified-discount-info {
    display: flex;
    flex-direction: column;
    /* Rabat nad starą ceną */
    align-items: center;
    /* Środkowanie */
    gap: 2px;
}

/* Badge rabatowy */
.unified-badge {
    background-color: #ff4757;
    color: white !important;
    /* Wymuszamy biały tekst na czerwonym tle */
    font-size: 0.85rem;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 50px;
    text-transform: uppercase;
}

/* Stara cena */
.unified-old-price {
    text-decoration: line-through;
    color: #999 !important;
    /* Wymuszamy szary kolor */
    font-size: 0.95rem;
}

.copyright-pill {
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 0.95rem;
    color: #ffffff;
    box-shadow: 1px 5px 8px rgba(87, 89, 204, 0.38);
    white-space: nowrap;
    z-index: 1000;
    border: 1px solid rgba(156, 169, 243, 0.4);
}



/* --- CORRECCIÓN CRÍTICA PARA EL HEADER --- */
.header-actions .action-btn {
    position: relative !important;
    overflow: visible !important;
    /* CRUCIAL */
}

.header-actions .action-btn .unread-badge {
    position: absolute !important;
    top: -6px !important;
    /* Un poco más arriba */
    right: -8px !important;
    /* Un poco más a la derecha */
    min-width: 18px;
    height: 18px;
    font-size: 0.65rem;
    z-index: 9999 !important;
    /* Z-index máximo para que nada lo tape */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    display: flex !important;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* Solo se oculta si tiene explícitamente la clase d-none (cuando es 0) */
.header-actions .action-btn .unread-badge.d-none {
    display: none !important;
}

/* --- CORRECCIÓN INBOX --- */
.chat-user-item {
    position: relative;
    margin: 5px;
}
/* =========================================================
   CONTADOR DE MENSAJES — DISEÑO PREMIUM
   ========================================================= */

/* — Custom Properties — */
:root {
    --badge-accent: #ffffff;
    --badge-accent-rgb: rgb(52, 211, 153);
    --badge-glow: rgba(52, 211, 153, 0.603);
    --badge-bg: #34d399;
    --badge-border: rgba(52, 211, 153, 0.25);
    --badge-header-outline: #ffffff;
}

/* — Animaciones — */
@keyframes badge-breathe {
    0%, 100% { box-shadow: 0 0 0 0 var(--badge-glow), 0 1px 4px rgba(0,0,0,0.1); }
    50%      { box-shadow: 0 0 0 5px transparent,     0 2px 8px rgba(0,0,0,0.08); }
}

@keyframes badge-enter {
    from { transform: scale(0.4); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

/* — Estilo base — */
.unread-badge {
    /* Superficie con profundidad */
    background: linear-gradient(135deg, var(--badge-bg), var(--badge-bg) 60%, transparent 100%);
    border: 1px solid var(--badge-border);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--badge-accent) !important;

    /* Círculo fijo */
    width: 18px;
    height: 18px;
    aspect-ratio: 1 / 1;
    padding: 0;
    box-sizing: border-box;
    border-radius: 50%;
    flex-shrink: 0;

    /* Tipografía */
    font-size: 0.7rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    line-height: 1;

    /* Layout */
    display: flex !important;
    align-items: center;
    justify-content: center;

    /* Animaciones */
    animation:
        badge-enter   0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both,
        badge-breathe 3s    ease-in-out 0.4s infinite;

    pointer-events: none;
    transition: background 0.2s, border-color 0.2s;
}

/* — Header (absoluto sobre el botón) — */
.header-actions .action-btn .unread-badge,
.main-header .action-btn .unread-badge {
    position: absolute !important;
    top: -6px !important;
    right: -8px !important;
    border: 2px solid var(--badge-header-outline);
    width: 18px !important;
    height: 18px !important;
    z-index: 1000 !important;
}

/* — Inbox (inline en la lista) — */
.chat-user-item .unread-badge {
    position: static !important;
    margin-left: auto;
    border-color: var(--badge-border) !important;
}

/* — Ocultar — */
.unread-badge.d-none {
    display: none !important;
}
/*Header*/
.edit-categories-link a {
    font-weight: bold;
    color: var(--primary-color, #6a0dad);
    background-color: #f0f0f0;
    border-radius: 5px;
    text-align: center;
    display: block;
    margin: 10px;
    padding: 10px;
    transition: background-color 0.3s;
}  

/* --- 1. ADMIN LINK: HOVER VERDE (MODO CLARO) --- */
.edit-categories-link a:hover {
    color: rgb(52, 211, 153) !important;
    background-color: #e0e0e0 !important;
}

/* --- Fix para Edit Categories Link en Modo Oscuro --- */
[data-theme="dark"] .edit-categories-link a {
    background-color: #2d303a; 
    color: var(--primary-color) !important; 
    border: 1px solid rgba(255, 255, 255, 0.05); 
}

/* --- 2. ADMIN LINK: HOVER VERDE (MODO OSCURO) --- */
/* --- 2. ADMIN LINK: HOVER VERDE (MODO OSCURO) --- */
[data-theme="dark"] .sidebar-nav-list li.edit-categories-link a:hover {
    background-color: rgba(255, 255, 255, 0.1) !important; 
    color: rgb(52, 211, 153) !important; 
}

/* --- 3. RESTO DE CATEGORÍAS: HOVER VIOLETA (MODO OSCURO) --- */
[data-theme="dark"] .sidebar-nav-list li a:hover,
[data-theme="dark"] .toggle-subcategories:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #141414 !important;
}
/* --- STYL PRZYCISKU WYSZUKIWANIA (SAMA IKONA BEZ RAMKI) --- */
.search-bar-container {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

/* --- ESTILO LIMPIO DEL BOTÓN DE BÚSQUEDA --- */
.search-trigger-btn {
    background: transparent !important;
    border: none !important;
    outline: none !important; /* Elimina el marco al pulsar */
    box-shadow: none !important; /* Elimina sombras de enfoque */
    color: #333;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px; /* Ajustado para coincidir con tus otros botones */
    height: 45px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Estado Hover y Estado Activo (Verde) */
.search-trigger-btn:hover,
.search-trigger-btn.is-active {
    background-color: transparent !important;
    color: #2ecc71 !important; /* Verde neón igual a tus otros botones */
    transform: translateY(-3px) scale(1.1);
    outline: none !important;
    border: none !important;
}

/* Refuerzo para quitar el marco en cualquier estado de pulsación */
.search-trigger-btn:focus, 
.search-trigger-btn:active,
.search-trigger-btn:focus-visible {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* --- MODIFICACIÓN BUSCADOR: DEBAJO DEL HEADER Y BLOQUEANDO EL RESTO --- */
#search-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    
    /* Z-INDEX SUPREMO: Por encima de todo */
    z-index: 1029 !important; 
    
    /* FONDO PROTECTOR oscuro y borroso */
    /*background-color: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;*/
    
    /* UBICACIÓN EXACTA debajo del header */
    padding-top: 125px !important; 
    
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;

    /* LA SOLUCIÓN: Oculto por defecto y sin bloquear clics */
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important; 
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

/* Cuando se activa con JS (al hacer clic en la lupa) */
#search-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important; /* Ahora sí bloquea todo lo que esté debajo */
}

.search-modal {
    /* 1. Define aquí el ancho de los lados que NO serán transparentes */
    --ancho-izquierdo: 60px; /* Ajusta este valor */
    --ancho-derecho: 60px;   /* Ajusta este valor */
    
    /* 2. Apilamos los 3 fondos */
    background: 
        /* Capa principal: Transparente los primeros 50px, luego blanco hacia abajo */
        linear-gradient(to bottom, transparent 50px, #ffffff 50px),
        /* Capa lateral izquierda: Pinta de blanco desde la izquierda hacia el centro */
        linear-gradient(to right, #ffffff var(--ancho-izquierdo), transparent var(--ancho-izquierdo)),
        /* Capa lateral derecha: Pinta de blanco desde la derecha hacia el centro */
        linear-gradient(to left, #ffffff var(--ancho-derecho), transparent var(--ancho-derecho));
    
    padding-top: 50px;
    width: 97%;
    border-radius: 0 0 50px 50px;
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    transform: scale(0.9) translateY(-30px);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    max-height: 70vh;
}

#search-overlay.active .search-modal {
    transform: scale(1) translateY(0);
}

.search-header {
    width: 60%;             /* 1. Define el ancho al 60% */
    margin: 5px auto;       /* 2. Centra el elemento horizontalmente */
    padding: 15px 25px;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    border-radius: 50px !important;
    display: flex;
    align-items: center;
    gap: 18px;
}

.search-header i {
    font-size: 1.3rem;
    color: var(--primary-color, #6a0dad);
}

#advanced-search-input {
    border: none;
    font-size: 1.2rem;
    width: 100%;
    outline: none;
    font-weight: 500;
    color: #333;
}

#advanced-search-input::placeholder {
    color: #aaa;
}

.close-search {
    background: #f3f4f6;
    border: none;
    padding: 6px 12px;
    font-size: 0.8rem;
    color: #666;
    font-weight: 600;
    border-radius: 36px;
    cursor: pointer;
    transition: background 0.2s;
}

.close-search:hover {
    background: #e5e7eb;
    color: #333;
}

.search-results-container {
    overflow-y: auto;
    padding: 8px;
    margin-top: 0px;
    margin-bottom: 36px;
}

/* Chrome, Edge, Safari */
.search-results-container::-webkit-scrollbar {
    width: 5px;
}

.search-results-container::-webkit-scrollbar-track {
    border-radius: 20px;
    background: #f1f1f1;  
    margin-top: 10px; /* Margen arriba para no tocar el header */
    margin-bottom: 10px; /* Margen extra abajo por seguridad */
}

.search-results-container::-webkit-scrollbar-thumb {
    background: #d0d0d5;
    border-radius: 99px;
    border: none !important;
    transition: background 0.3s ease;
    background-clip: content-box;
}

.search-results-container::-webkit-scrollbar-thumb:hover {
    background: #a0a0a8;
}

/* Opcional: ocultar scrollbar hasta hacer hover en el modal */
.search-modal:not(:hover) .search-results-container::-webkit-scrollbar-thumb {
    background: transparent;
}

.result-item {
    display: flex;
    align-items: center;
    padding: 25px 15px;
    margin: 5px;
    text-decoration: none;
    color: #334155;
    border-radius: 50px !important;
    transition: background 0.2s;
    border-top: 1px solid #f8fafc;
    border-bottom: 1px solid #f8fafc;
    cursor: pointer;
    width: 80%;
    margin: 5px auto;

}

.result-item:last-child {
    border-bottom: none;
}

.result-item:hover {
    background-color: #f8fafc;
}

.result-img {
    width: 70px;
    height: 70px;
    object-fit: contain;
    border-radius: 10px;
    margin-right: 15px;
    /*border: 1px solid #e2e6e9;*/
}

.result-info {
    flex: 1;
}

.result-name {
    font-weight: 600;
    font-size: 1rem;
    display: block;
    color: #1e293b;
}

.result-price {
    font-size: 0.9rem;
    color: var(--primary-color, #6a0dad);
    font-weight: 700;
}

.category-link {
    color: #64748b;
    text-decoration: none;
    transition: color 0.2s;
}

.category-link:hover {
    color: var(--primary-color, #6a0dad);
    text-decoration: underline;
}

/* --- PASTILLAS GLASS PARA CATEGORÍA / SUBCATEGORÍA --- */
.result-cats {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.result-cats .cat-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 50px;
    font-size: 0.6rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    white-space: nowrap;
}

/* Pastilla CATEGORÍA (azul) */
.result-cats .cat-pill.pill-cat {
    background: rgba(31, 53, 179, 0);
    color: #5e72e4;
    border: 1px solid rgba(94, 114, 228, 0.2);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.result-cats .cat-pill.pill-cat:hover {
    background: rgba(94, 114, 228, 0.18);
    border-color: rgba(94, 114, 228, 0.45);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(94, 114, 228, 0.2);
}

/* Flecha separadora */
.result-cats .pill-separator {
    color: #ccc;
    font-size: 0.65rem;
}

/* Pastilla SUBCATEGORÍA (verde) */
.result-cats .cat-pill.pill-sub {
    background: rgba(21, 221, 3, 0);
    color: #04a84f;
    border: 1px solid rgba(4, 204, 94, 0.2);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.result-cats .cat-pill.pill-sub:hover {
    background: rgba(4, 204, 94, 0.16);
    border-color: rgba(4, 204, 94, 0.4);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(4, 204, 94, 0.18);
}

/* Dark mode */


[data-theme="dark"] .result-item {
    display: flex;
    align-items: center;
    padding: 25px 15px;
    margin: 5px;
    text-decoration: none;
    color: #334155;
    border-radius: 50px !important;
    transition: background 0.2s;
    border-top: 1px solid #111111;
    border-bottom: 1px solid #111111;
    cursor: pointer;
    width: 80%;
    margin: 5px auto;

}



[data-theme="dark"] .search-header {
    width: 60%;             /* 1. Define el ancho al 60% */
    margin: 5px auto;       /* 2. Centra el elemento horizontalmente */
    padding: 15px 25px;
    border-top: 1px solid #111111;
    border-bottom: 1px solid #111111;
    border-radius: 50px !important;
    display: flex;
    align-items: center;
    gap: 18px;
}

[data-theme="dark"] .search-header i {
    font-size: 1.3rem;
    color: var(--primary-color, #6a0dad);
}



[data-theme="dark"] .result-cats .cat-pill.pill-cat {
    background: rgba(94, 114, 228, 0.15);
    border-color: rgba(94, 114, 228, 0.3);
    color: #8fa4ff;
}

[data-theme="dark"] .result-cats .cat-pill.pill-sub {
    background: rgba(4, 204, 94, 0.12);
    border-color: rgba(4, 204, 94, 0.25);
    color: #2ecc71;
}

.cat-pill,
.cat-pill:hover,
.cat-pill:visited,
.cat-pill:focus {
    text-decoration: none !important;
}

.no-results {
    padding: 40px;
    text-align: center;
    color: #94a3b8;
}

.search-loader {
    display: none;
    width: 20px;
    height: 20px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #6a0dad;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* --- FAVORITES SIDEBAR STYLES (TARJETAS DE PRODUCTO) --- */

/* 1. Animación de Latido */
@keyframes heart-beat {
    0% { transform: scale(1); }
    14% { transform: scale(1.3); }
    28% { transform: scale(1); }
    42% { transform: scale(1.3); }
    70% { transform: scale(1); }
}


/* ══════════════════════════════════════════════════════════
   FAVORITES BOTTOM BAR — REDISEÑO MODERNO
   ══════════════════════════════════════════════════════════ */

/* 2. El Panel (BARRA INFERIOR EXPANDIBLE) */
.favorites-sidebar {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    width: 62%;
    
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 -8px 50px rgba(0, 0, 0, 0.12);
    border-radius: 24px 24px 0 0;
    
    z-index: 10050;
    display: flex;
    flex-direction: column;
    align-items: stretch; /* Hijos al 100% ancho para que el botón X funcione */
    overflow: hidden; /* Clip del contenido cuando está colapsado */
    
    max-height: 295px;
    
    opacity: 0;
    visibility: hidden;
    transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1),
                opacity 0.3s ease,
                visibility 0.3s ease,
                max-height 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.favorites-sidebar.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Estado expandido */
.favorites-sidebar.expanded {
    max-height: 90vh;
    overflow: visible; /* Permitir scroll de la lista interna */
    box-shadow: 0 -15px 60px rgba(0, 0, 0, 0.2);
}

/* Handle oculto cuando todo cabe en una fila */
.fav-drawer-handle.no-expand {
    pointer-events: none;
    opacity: 0;
    max-height: 0;
    padding: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.3s ease, padding 0.3s ease;
}

/* ── DRAWER HANDLE — Indicador central de expansión ── */
.fav-drawer-handle {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 10px 0 2px 0;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    max-height: 50px;
    opacity: 1;
    transition: opacity 0.3s ease, max-height 0.3s ease, padding 0.3s ease;
}

.fav-handle-pill {
    width: 48px;
    height: 5px;
    border-radius: 50px;
    background: #d0d5dd;
    position: relative;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Hover: se alarga y cambia color */
.fav-drawer-handle:hover .fav-handle-pill {
    width: 72px;
    background: var(--primary-color, #5e72e4);
    box-shadow: 0 0 16px rgba(94, 114, 228, 0.35);
}

/* Animación de pulso sutil */
@keyframes handle-pulse {
    0%, 100% { opacity: 0; transform: scaleX(0.6); }
    50%      { opacity: 1; transform: scaleX(1.1); }
}

.fav-handle-pill::after {
    content: '';
    position: absolute;
    inset: -3px -6px;
    border-radius: 50px;
    background: var(--primary-color, #5e72e4);
    opacity: 0;
    z-index: -1;
    animation: handle-pulse 2.5s ease-in-out infinite;
    pointer-events: none;
}

/* Expandido: handle cambia */
.favorites-sidebar.expanded .fav-handle-pill {
    width: 36px;
    background: #ff4757;
}
.favorites-sidebar.expanded .fav-handle-pill::after {
    animation: none;
    opacity: 0;
}

/* Flecha animada debajo del handle */
.fav-handle-arrow {
    display: flex;
    justify-content: center;
    margin-top: 3px;
    font-size: 0.55rem;
    color: #bbb;
    transition: all 0.3s ease;
    pointer-events: none;
}

.fav-drawer-handle:hover .fav-handle-arrow {
    color: var(--primary-color);
    transform: translateY(-2px);
}

.fav-handle-arrow i {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.favorites-sidebar.expanded .fav-handle-arrow i {
    transform: rotate(180deg);
}

/* ── HEADER — Compacto y limpio ── */
.favorites-header {
    position: relative;
    padding: 6px 20px 6px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    min-height: 30px;
}

.favorites-header h3 {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-light, #888);
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.favorites-header h3 i { 
    color: #ff4757; 
    font-size: 0.75rem;
}

/* Botón cerrar X */
.close-favorites {
    position: absolute;
    right: 15px;
    top: 65%;
    transform: translateY(-50%);
    background: #ffffff;
    border: 1.5px solid #e0e0e0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #999;
    font-size: 1rem;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.close-favorites:hover {
    background: #ff4757;
    color: white;
    border-color: #ff4757;
    transform: translateY(-50%) rotate(90deg) scale(1.1);
    box-shadow: 0 4px 12px rgba(255, 71, 87, 0.3);
}

/* ── LISTA — Flex wrap horizontal ── */
.favorites-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 16px 14px 16px;
    
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    align-content: flex-start;
    gap: 8px;
}

/* Scrollbar */
.favorites-list::-webkit-scrollbar { width: 5px; }
.favorites-list::-webkit-scrollbar-track {
    border-radius: 20px;
    background: transparent;
    margin: 8px 0;
}
.favorites-list::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 20px;
}
.favorites-list::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}




/* ── TARJETA — Uniforme y compacta ── */
.fav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 14px;
    padding: 10px 8px 8px 8px;
    position: relative;

    /* TAMAÑO FIJO = TARJETAS IGUALES */
    width: 128px;
    min-width: 128px;
    height: 220px;
    flex-shrink: 0;

    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
    transform: scale(1);
}

.fav-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    border-color: rgba(94, 114, 228, 0.15);
}

/* Imagen */
.fav-item a {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.fav-item img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    margin-bottom: 6px;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.fav-item:hover img {
    transform: scale(1.08);
}

/* Info */
.fav-info {
    width: 100%;
    text-align: center;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 110px;          /* BLOQUE FIJO: nombre (4 líneas) + precio (con o sin descuento) */
    margin-bottom: 4px;
}

/* NOMBRE — 4 líneas visibles, altura fija */
.fav-name {
    font-size: 0.68rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    /* 4 líneas = 4 × 1.3em = 5.2em */
    min-height: 5.2em;
    max-height: 5.2em;
}

/* Precio */
.fav-price {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    font-size: 0.75rem;
    flex: 1;                /* Ocupa el resto del bloque .fav-info */
    margin: 0;
}

.fav-price .price-main {
    font-size: 0.88rem;
    font-weight: 800;
}
.fav-price .price-main.is-discounted {
    color: #198754 !important;
}
.fav-price .discount-pill-small {
    font-size: 0.55rem;
    padding: 1px 4px;
}
.fav-price .price-old-small {
    font-size: 0.6rem;
}
.fav-price .price-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 0;          /* Anulamos el min-height heredado del .price-container base */
    margin: 0;
}

.fav-price-mystyles {
    border-radius: 50px;
    color: #fff;
    font-weight: bold;
    box-shadow: none;
    min-height: 24px;
}

/* ── FOOTER TARJETA — Acciones ── */
.fav-actions-footer {
    margin-top: auto;
    padding-top: 4px;
    width: 100%;
}

.fav-add-form {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
}

.fav-qty-selector {
    display: flex;
    align-items: center;
    background: #f4f6f9;
    border-radius: 50px;
    padding: 2px;
    height: 24px;
    flex: 1;
    justify-content: space-between;
}

.fav-qty-btn {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: #fff;
    color: #333;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
    transition: 0.2s;
    font-size: 0.65rem;
}

.fav-qty-btn:hover {
    background: var(--primary-color);
    color: #fff;
}

.fav-qty-input {
    width: 18px;
    text-align: center;
    border: none;
    background: transparent;
    font-weight: 700;
    font-size: 0.7rem;
    padding: 0;
    pointer-events: none;
}

.fav-cart-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 8px rgba(94, 114, 228, 0.25);
    flex-shrink: 0;
    font-size: 0.6rem;
}

.fav-cart-btn:hover {
    transform: scale(1.15) rotate(-8deg);
    background: #4a5ac9;
    box-shadow: 0 4px 14px rgba(94, 114, 228, 0.4);
}

/* La tarjeta regalo necesita pasar por su ficha para elegir el importe. */
.fav-item .fav-giftcard-btn {
    width: 100%;
    min-height: 24px;
    padding: 5px 7px;
    border-radius: 50px;
    background: var(--primary-color);
    color: #fff;
    flex-direction: row;
    justify-content: center;
    gap: 5px;
    font-size: 0.58rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(94, 114, 228, 0.25);
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.fav-item .fav-giftcard-btn:hover {
    transform: translateY(-1px);
    background: #4a5ac9;
    color: #fff;
    box-shadow: 0 4px 14px rgba(94, 114, 228, 0.4);
}

.fav-item .fav-giftcard-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.fav-out-stock {
    width: 100%;
    background: #fef2f2;
    color: #ef4444;
    font-size: 0.6rem;
    font-weight: 700;
    text-align: center;
    padding: 6px 4px;
    border-radius: 50px;
    cursor: not-allowed;
    letter-spacing: 0.3px;
}

.fav-item .stock-pill {
    font-size: 0.55rem;
    padding: 2px 8px;
    margin: 0 auto 6px auto;   /* Margen consistente hacia el footer, sin empuje superior */
    flex-shrink: 0;
}

/* ── OVERLAY + ELIMINAR + VACÍO ── */
/*.favorites-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10040;
    background: rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    transition: opacity 0.3s ease;
}
.favorites-overlay.active { display: block; }*/

/* Eliminando */
.fav-item.removing {
    opacity: 0;
    transform: scale(0.5);
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    overflow: hidden;
    height: 0 !important;
}

/* Papelera — aparece solo en hover */
.fav-remove {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 10;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.92);
    color: #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.55rem;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0;
}

.fav-item:hover .fav-remove {
    opacity: 1;
}

.fav-remove:hover {
    background: #ff4757;
    color: #fff;
    transform: rotate(15deg) scale(1.2);
    box-shadow: 0 3px 10px rgba(255, 71, 87, 0.35);
}

/* Vacío */
.fav-empty {
    width: 100%;
    text-align: center;
    padding: 20px;
    color: #bbb;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.fav-empty i {
    font-size: 2rem;
    color: #e0e0e0;
}

.fav-empty p {
    font-size: 0.8rem;
    margin: 0;
}

/* ── RESPONSIVE MÓVIL ── */
@media (max-width: 768px) {
    .favorites-sidebar {
        width: 96%;
        border-radius: 18px 18px 0 0;
        max-height: 290px;
    }
    .favorites-sidebar.expanded {
        max-height: 85vh;
    }
    .fav-item {
        width: 110px;
        min-width: 110px;
        height: 205px;
        padding: 8px 6px 6px 6px;
    }
    .fav-item img {
        width: 36px;
        height: 36px;
    }
    .fav-name {
        font-size: 0.6rem;
        -webkit-line-clamp: 4;
        line-clamp: 4;
        min-height: 5.2em;
        max-height: 5.2em;
    }
    .fav-price .price-main {
        font-size: 0.8rem;
    }
    .fav-handle-pill { width: 40px; }
}

/* --- BOTÓN HEADER (LATIDO) --- */
.fav-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.fav-count {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: #ff4757;
    color: white;
    border-radius: 50%;
    min-width: 24px;
    height: 24px;
    font-size: 0.7rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0);
    transition: 0.3s;
    z-index: 2;
    padding: 5px;
    pointer-events: none;
    border: 2px solid #fff;
}
.fav-count.active { opacity: 1; transform: scale(1); }
.fav-btn.active-panel i {
    animation: heart-beat 1.5s infinite, heart-color-pulse 1.5s infinite ease-in-out;
    font-weight: 900 !important;
}

/* --- FORZAR COLOR ROJO EN EL CORAZÓN --- */

/* 1. Estado Normal (El marco o icono siempre rojo) */
.header-actions .fav-btn i {
    color: #ff4757 !important; /* Rojo neón */
}

/* 2. Estado Hover (Al pasar el mouse) */
.header-actions .fav-btn:hover i {
    color: #2ecc71  !important; /* Mantiene el rojo */
    transform: scale(1.15);    /* Efecto zoom */
}

/* 3. Estado Activo/Latiendo (Cuando el panel está abierto) */
.header-actions .fav-btn.active-panel i {
    color: #ff4757 !important;
    text-shadow: 0 0 10px rgba(255, 71, 87, 0.5); /* Resplandor rojo */
}
.fav-price-mystyles {
    border-radius: 50px;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    min-height: 28px;
}  

/* --- KONTENER KARTY --- */
.product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-align: center;
    background: #fff;
    /* Dodajemy padding na dole, żeby elementy nie dotykały krawędzi */
    padding-bottom: 5px;
}

.product-link {
    flex-grow: 1;
    /* Rozciąga link, aby wypełnił kartę */
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

.product-image-wrapper {
    position: relative;
    margin-bottom: 10px;
    /* Opcjonalnie: można dodać stałą wysokość kontenera zdjęcia, jeśli zdjęcia są różne */
    /* height: 200px; display: flex; align-items: center; justify-content: center; */
}

.product-image-wrapper img {
    max-width: 100%;
    height: auto;
}

/* --- SEKCJA INFO (Gwarantuje równe ułożenie ceny) --- */
.product-info {
    flex-grow: 1;
    /* Wypełnia dostępną przestrzeń */
    display: flex;
    flex-direction: column;
    padding: 0 5px;
}

/* --- FIX TYTUŁU (Sztywna wysokość) --- */
.product-info h3 {
    margin: 0 0 10px 0;
    font-size: 1rem;
    color: #333;
    line-height: 1.3;

    /* Rezerwuje miejsce zawsze na 2 linie tekstu */
    min-height: 2.6rem;
    /* Ogranicza do max 2 linii (reszta to ...) */
    max-height: 2.6rem;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;

    /* Centrowanie tekstu wewnątrz boxa */
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

/* --- SEKCJA CEN (Przyklejona do dołu sekcji info) --- */
.price-container-centered {
    display: flex;
    align-items: center;
    /*justify-content: center;*/
    gap: 12px;
    margin-bottom: 5px;
    margin-top: auto;
}

/* ---- Favs & General Price Container ---- */
.price-container {
    display: flex;
    align-items: center;
    justify-content: center; /* <--- ESTO CENTRA EL CONTENIDO */
    gap: 8px;
    margin-bottom: 5px;
    margin-top: 5px;
    
    /* ESTABILIDAD: */
    min-height: 40px; /* Altura fija para que no salte si aparece/desaparece el descuento */
    width: 100%;
}

/* Asegurar que la columna derecha (descuento) no empuje demasiado */
.price-right-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Alineado a la izquierda del bloque derecho */
    justify-content: center;
    line-height: 1;
}


/* 1. Aktualna cena (Fioletowa) */
.price-main {
    font-weight: 800;
    color: #5e72e4;
    font-size: 1.3rem;
    line-height: 1;
    white-space: nowrap;       /* <--- IMPIDE que el € salte de línea */
}

/* Kolumna z prawej (Rabat + Stara Cena) */
.price-right-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;     /* <--- antes 2px: aire entre -% y cena tachada */
}

/* 2. Rabat (Pigułka) */
.discount-pill-small {
    background-color: #ff4757;
    color: #fff;
    border: 1px solid #ff4757;
    font-size: 0.7rem;
    font-weight: bold;
    padding: 1px 6px;
    border-radius: 50px;
    line-height: 1.2;
    white-space: nowrap;
}

/* 3. Stara cena */
.price-old-small {
    font-size: 0.8rem;
    text-decoration: line-through;
    color: #999;
    line-height: 1.2;
}

/* --- FOOTER KARTY (Przycisk i serce) --- */
.product-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    /* Opcjonalna linia oddzielająca */
    /* border-top: 1px solid #f0f0f0; */
}

.add-to-cart-form {
    flex-grow: 1;
    min-width: 0;
}

/* PRZYCISK DODAWANIA - Sztywna wysokość 38px */
.add-to-cart-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 38px;
    /* SZTYWNA WYSOKOŚĆ */
    padding: 0;
    /* Padding zerujemy, bo flex centruje */
    font-size: 0.85rem;
    border-radius: 50px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

/* PRZYCISK SERCA - Sztywna wysokość 38px */
.card-fav-btn {
    width: 38px;
    height: 38px;
    /* SZTYWNA WYSOKOŚĆ */
    border-radius: 50%;
    border: 1px solid #ddd;
    background: #fff;
    color: #ccc;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.card-fav-btn:hover {
    border-color: #ff4757;
    color: #ff4757;
}

.card-fav-btn.active {
    background: #ff4757;
    border-color: #ff4757;
    color: #fff;
}

.out-of-stock-pill {
    min-height: 42px;
    width: 100%;
    background: #fee2e2;
    color: #ef4444;
    font-size: 0.8rem;
    font-weight: bold;
    text-align: center;
    padding: 12px;
    border-radius: 50px;
    cursor: not-allowed;
}


/* =========================================
   SIDEBAR KOSZYKA - LUSTRZANE ODBICIE
   ========================================= */

/* Overlay - Ukryty i nieaktywny (zgodnie z prośbą o brak przyciemnienia) */
.cart-sidebar-overlay {
    display: none !important;
    pointer-events: none;
}

/* Panel boczny - Styl "Floating" (jak kategorie) */
.cart-sidebar {
    position: fixed;
    top: 180px;
    right: 28px;
    width: 326px;
    height: 78%;
    background-color: #fff;
    box-shadow: -5px 0 25px rgba(0, 0, 0, 0.15);
    z-index: 10006;

    /* Animacja TRANSFORM (płynniejsza niż right/left) */
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), top 0.3s ease, height 0.3s ease;
    transform: translateX(120%);
    /* Ukryty poza ekranem w prawo */

    border-radius: 25px;
    /* Zaokrąglone rogi */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #f0f0f0;
}
/* --- POSICIÓN DEL CARRITO CUANDO HAY SCROLL --- */
body.header-scrolled .cart-sidebar {
    top: 140px; /* Sube de 180px a 140px (ajústalo según lo pegado que lo quieras al header) */
    height: 78%; /* Opcional: aprovecha el nuevo espacio para hacer el panel más alto */
}
/* Stan aktywny - wysunięcie */
.cart-sidebar.active {
    transform: translateX(0);
}

/* Responsywność na telefony */
@media (max-width: 480px) {
    .cart-sidebar {
        width: 100%;
        top: 0;
        right: 0;
        height: 100%;
        border-radius: 0;
        /* Na telefonie pełny ekran bez zaokrągleń */
        transform: translateX(100%);
    }
}
@media (max-width: 480px) {
    .cart-sidebar,
    body.header-scrolled .cart-sidebar { /* Protege ambos estados */
        width: 100%;
        top: 0 !important;
        right: 0;
        height: 100% !important;
        border-radius: 0;
        transform: translateX(100%);
    }
}

/* --- NAGŁÓWEK KOSZYKA (Wyśrodkowany) --- */
.cart-sidebar-header {
    padding: 20px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: center;
    /* Wyśrodkowanie tekstu */
    align-items: center;
    background: #fff;
    position: relative;
    /* Ważne dla pozycjonowania przycisku X */
    flex-shrink: 0;
}

.cart-sidebar-header h3 {
    margin: 0;
    font-size: 1rem;
    color: var(--text-dark);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Przycisk zamknięcia (Absolutnie po prawej) */
.close-cart {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    background: #f8f9fa;
    border: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: var(--text-light);
    cursor: pointer;
    transition: all 0.3s ease;
}

.close-cart:hover {
    background: var(--accent-color);
    /* lub #ff4757 */
    color: white;
    transform: translateY(-50%) rotate(90deg);
}

/* --- LISTA PRODUKTÓW --- */
.cart-sidebar-items {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

/* --- SCROLLBAR MODERNO (solo áreas del chat) --- */

.cart-sidebar-items::-webkit-scrollbar {
    width: 6px;
}

.cart-sidebar-items::-webkit-scrollbar-button {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}

.cart-sidebar-items::-webkit-scrollbar-track {
    background-color: #d0d0d5;
}

.cart-sidebar-items::-webkit-scrollbar-thumb {
    background-color: #d0d0d5;
    border-radius: 99px;
    border: none !important;
}

.cart-sidebar-items::-webkit-scrollbar-thumb:hover {
    background-color: #a0a0a8;
}
/* --- SCROLLBAR MODERNO Y REDONDO --- */

/* 1. El riel (track) invisible */
.cart-sidebar-items::-webkit-scrollbar {
    width: 5px; 
}

.cart-sidebar-items::-webkit-scrollbar-track {
    border-radius: 20px;
    background: #f1f1f1;  
    margin-top: 10px; /* Margen arriba para no tocar el header */
    margin-bottom: 10px; /* Margen extra abajo por seguridad */
}

/* 2. La barra (thumb) */
.cart-sidebar-items::-webkit-scrollbar-thumb {
    background: #d1d5db; /* Gris suave */
    border-radius: 20px;
    border: 2px solid transparent;
    background-clip: content-box;
}

/* 3. Hover en la barra */
.cart-sidebar-items::-webkit-scrollbar-thumb:hover {
    background: #bbb; /* Se pone de tu color corporativo al tocarla */
}



.cart-sidebar-item {
    display: flex;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid #f5f5f5;
    align-items: center;
    transition: opacity 0.3s ease;
}

/* Zdjęcia w koszyku */
.cart-sidebar-item img {
    width: 70px;
    height: 70px;
    object-fit: contain;
    border-radius: 10px;
    border: 1px solid #f0f0f0;
    padding: 5px;
    background: transparent;
}

/* --- CENY I RABATY (Brakujące style) --- */
.sidebar-price-box {
    display: flex;
    flex-direction: row;
    /* Ustawiamy obok siebie */
    align-items: center;
    /* Wyśrodkowanie w pionie */
    gap: 10px;
    /* Odstęp między ceną a słupkiem zniżki */
    margin-top: 4px;
}

/* 1. Aktualna Cena (Fioletowa) */
.sidebar-current-price {
    font-weight: 800;
    color: var(--primary-color);
    font-size: 1rem;
    line-height: 1;
}

.sidebar-price-col {
    display: flex;
    flex-direction: column;
    /* Wewnątrz kolumny elementy są jeden pod drugim */
    align-items: flex-start;
    /* Wyrównaj do lewej */
    gap: 2px;
    /* Mały odstęp między pigułką a starą ceną */
    line-height: 1;
}

/* Styl pigułki (Czerwona) */
.sidebar-discount-badge {
    font-size: 0.7rem;
    background: #ff4757;
    color: white;
    padding: 2px 6px;
    border-radius: 50px;
    font-weight: bold;
    text-transform: uppercase;
}

/* Styl starej ceny (Przekreślona) */
.sidebar-old-price {
    font-size: 0.75rem;
    color: #aaa;
    text-decoration: line-through;
    font-weight: bold;
}

/* --- KONTROLKI ILOŚCI (+/-) --- */
.cart-item-actions-wrapper {
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 82%;
}

.cart-item-quantity {
    display: flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(145deg, #f3f6fa, #e9eef5);
    border: 1px solid rgba(94, 114, 228, .12);
    border-radius: 50px;
    padding: 4px;
    box-shadow: inset 0 1px 2px rgba(38, 51, 77, .06);
}

.cart-sidebar-item .quantity-btn {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    border: 1px solid rgba(94, 114, 228, .2);
    background: linear-gradient(145deg, #ffffff, #edf1f7);
    box-shadow: 0 4px 10px rgba(39, 55, 79, .13), inset 0 1px 0 rgba(255,255,255,.9);
    cursor: pointer;
    color: #3d4a63;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
}

.cart-sidebar-item .quantity-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #6f7fff, #4f65e8);
    border-color: transparent;
    color: white;
    transform: translateY(-1px) scale(1.04);
    box-shadow: 0 7px 14px rgba(79, 101, 232, .28);
}

.cart-sidebar-item .quantity-btn:active:not(:disabled) {
    transform: scale(.94);
}

.cart-sidebar-item .quantity-btn:focus-visible {
    outline: 3px solid rgba(79, 101, 232, .22);
    outline-offset: 2px;
}

.cart-sidebar-item .quantity-btn:disabled {
    cursor: not-allowed;
    color: #a8b0be;
    border-color: #e2e6ec;
    background: #eef1f5;
    box-shadow: inset 0 1px 2px rgba(34, 45, 66, .06);
    transform: none;
}

.cart-sidebar-item .quantity-btn i {
    font-size: .7rem;
    pointer-events: none;
}

.cart-sidebar-item .quantity-value {
    margin: 0 4px;
    font-weight: 700;
    font-size: 0.9rem;
    min-width: 24px;
    text-align: center;
}

.cart-sidebar-item .remove-item-btn {
    color: #dc3545;
    background-color: #ffffff;
    border: 1px solid #eee;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0;
    flex-shrink: 0;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(220, 53, 69, 0.1);
}

.cart-sidebar-item .remove-item-btn:hover {
    background-color: #dc3545;
    color: #fff;
    transform: rotate(15deg) scale(1.1);
    box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
}

/* --- STOPKA KOSZYKA --- */
.cart-sidebar-footer {
    padding: 0 20px 20px;
    background: #fff;
    border-top: 1px solid #f0f0f0;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.03);
    flex-shrink: 0;
}

/* Tirador del resumen: permite ganar espacio para la lista sin ocultar el total. */
.cart-footer-drag-handle {
    width: calc(100% + 40px);
    min-height: 34px;
    margin: 0 -20px 8px;
    padding: 8px 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    cursor: ns-resize;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.cart-footer-drag-handle::before {
    content: '';
    width: 44px;
    height: 5px;
    border-radius: 999px;
    background: #cfd4da;
    transition: width .2s ease, background-color .2s ease;
}

.cart-footer-drag-handle:hover::before,
.cart-footer-drag-handle:focus-visible::before,
.cart-sidebar-footer.is-dragging .cart-footer-drag-handle::before {
    width: 56px;
    background: var(--primary-color);
}

.cart-footer-drag-handle:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: -3px;
}

.cart-sidebar-footer-details {
    overflow: hidden;
    max-height: var(--cart-footer-details-height, 320px);
    opacity: 1;
    transition: max-height .28s ease, opacity .2s ease, margin .28s ease;
}

.cart-sidebar-footer.is-collapsed .cart-sidebar-footer-details {
    opacity: 0;
    margin-bottom: -8px;
}

.cart-sidebar-footer.is-collapsed .cart-summary-row.total {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: 0 !important;
}

.cart-sidebar-footer.is-collapsed .cart-sidebar-footer-actions {
    margin-top: 10px !important;
}

.cart-sidebar-footer.is-dragging .cart-sidebar-footer-details {
    transition: none;
}

.cart-summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 0.95rem;
    color: var(--text-light);
}

.cart-summary-row.total {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #eee;
    font-weight: 800;
    font-size: 1.3rem;
    color: var(--text-dark);
    display: flex;
    align-items: flex-end;
}

.cart-summary-row.total span:last-child {
    color: #0d6efd;
    font-size: 1.5rem;
}

/* --- PUSTY KOSZYK (Smutna buźka) --- */
.cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #ccc;
    text-align: center;
}

.cart-empty i {
    font-size: 4rem;
    margin-bottom: 15px;
    opacity: 0.5;
}

/* --- IKONA KOSZYKA W NAGŁÓWKU (Czysta) --- */
.cart-wrapper .cart-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cart-wrapper .cart-btn:hover {
    transform: scale(1.1);
    color: var(--primary-color);
}

/* --- NAPRAWA WYGLĄDU KOSZYKA (CART.PHP) --- */

/* 1. Kontener całego wiersza */
.cart-page-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border: 1px solid #e5ebf2;
    border-radius: 16px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 7px 18px rgba(31, 50, 81, .06);
    gap: 18px;
}

/* 2. Lewa strona (Zdjęcie + Nazwa) - Zajmuje całe wolne miejsce */
.cart-item-clickable-area {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 3. Prawa strona (Interakcja) - SZTYWNA SZEROKOŚĆ */
.cart-item-interactive-area {
    width: 402px !important;
    min-width: 402px;
    flex-shrink: 0 !important; /* ZABRANIAMY ZMNIEJSZANIA */
    display: flex;
    align-items: center;
    /*justify-content: flex-end; */
    justify-content: flex-end;
    gap: 8px;
}

.cart-item-unit-price {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 110px;
    min-width: 110px;
    flex: 0 0 110px;
}

.cart-item-unit-price .cart-price-layout {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    margin-top: 0;
}

.cart-item-unit-price .price-main-cart {
    font-size: 1rem;
    white-space: nowrap;
}

.cart-item-unit-price .price-right-column {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1px;
}

.cart-item-unit-price .discount-pill-small {
    font-size: .62rem;
    line-height: 1.15;
    padding: 2px 6px;
    color: #fff;
    background-color: #ff5064;
    border-color: #ff5064;
}

.cart-item-unit-price .price-old-small {
    font-size: .72rem;
    white-space: nowrap;
}

/* 4. Fix dla przycisku usuwania (żeby zajmował miejsce nawet jak jest ukryty) */
.remove-item-btn.invisible-placeholder {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none;
    display: inline-flex !important; /* Ważne: musi być inline-flex, a nie none! */
}

/* Upewnij się, że przycisk ma zawsze ten sam rozmiar */
.cart-item-interactive-area .remove-item-btn {
    width: 40px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0 !important;
    transition: opacity 0.3s ease;
}


/* Obrazek w koszyku - sztywny rozmiar */
.cart-page-item .cart-item-image {
    width: 72px !important;
    height: 72px !important;
    box-sizing: border-box;
    object-fit: contain;
    border-radius: 10px;
    border: 1px solid #f0f0f0;
    background: #fff;
    padding: 5px;
    flex-shrink: 0 !important; /* Nie zgniataj obrazka */
}

/* Kontener na nazwę i cenę pod nazwą */
.cart-item-basic-details {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    gap: 5px;
}

.cart-item-basic-details > a {
    display: block;
    min-width: 0;
}

.cart-item-name {
    display: block;
    max-width: 100%;
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    line-height: 1.3;
    overflow-wrap: break-word;
    text-wrap: pretty;
}

/* Przycisk usuwania */
.remove-item-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #999;
    font-size: 0.9rem;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s;
}

.remove-item-btn:hover {
    color: #ff4757;
}

/* Sekcja ilości */
.cart-item-quantity {
    border: 1px solid #ddd;
    border-radius: 50px;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Cena końcowa (Subtotal) — píldora centrada, alineada con la columna "Total" */
.cart-item-subtotal .subtotal-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    max-width: 100%;
    height: 42px;
    padding: 0 10px;
    /*border-radius: 12px;
    border: 1px solid rgba(94, 114, 228, .14);
    background: linear-gradient(145deg, #f3f6fa, #e9eef5);
    box-shadow: inset 0 1px 2px rgba(38, 51, 77, .06);*/
    font-size: .95rem;
    font-weight: 800;
    color: #1f3251;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
    flex-shrink: 0 !important;
    white-space: nowrap;
}

[data-theme="dark"] .cart-item-subtotal .subtotal-value {
    color: #e6ebf3;
    border-color: rgba(148, 163, 184, .22);
    background: linear-gradient(145deg, #2b333f, #232a35);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
}

[data-theme="dark"] .cart-products-columns {
    border-bottom-color: rgba(148, 163, 184, .16);
    color: #8f9caf;
}

[data-theme="dark"] .cart-page-item {
    border-color: rgba(148, 163, 184, .16);
    background: linear-gradient(135deg, #242b37 0%, #1f2631 100%);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
}

/* 1. Nadajemy stałą szerokość kontenerowi ceny subtotal */
.cart-page-item .cart-item-subtotal {
    width: 108px !important;
    min-width: 108px !important;
    text-align: center;            /* Cena centrada bajo la columna "Total" */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;                /* Zabrania zgniatania tej sekcji */
    margin-right: 0;
}

/* 2. Upewniamy się, że przycisk usuwania zajmuje stałe miejsce w układzie */
.cart-page-item .remove-item-btn {
    width: 40px !important;        /* Stała szerokość przycisku */
    height: 40px !important;
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;                /* Zabrania zgniatania przycisku */
}


/* Responsywność dla telefonów */
@media (max-width: 768px) {
    .cart-products-columns {
        display: none;
    }

    .cart-page-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .cart-item-interactive-area {
        width: 100% !important;
        min-width: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        justify-content: stretch;
        gap: 12px;
        margin-top: 15px;
    }

    .cart-item-unit-price {
        grid-column: 1;
        grid-row: 1;
        width: auto;
        min-width: 0;
        justify-content: flex-start;
    }

    .cart-item-unit-price .cart-price-layout {
        align-items: flex-start;
    }

    .cart-page-item .quantity-selector {
        grid-column: 1;
        grid-row: 2;
    }

    .cart-page-item .cart-item-subtotal {
        grid-column: 2;
        grid-row: 1;
        width: auto !important;
        min-width: 0 !important;
        justify-self: end;
    }

    .cart-page-item .remove-item-btn {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
    }
}

@media (max-width: 992px) {
    .cart-page-container {
        grid-template-columns: minmax(0, 1fr);
    }

    .cart-summary-box {
        width: 100%;
        box-sizing: border-box;
        position: static;
    }
}

  /* --- Modern Footer Styles --- */
.main-footer {
    background-color: #1a1a1a; /* Ciemne tło */
    color: #b0b0b0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    margin-top: 50px;
}

.container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 15px;
    /*padding-left: 28px;
    padding-right: 15px;*/
}

/* Newsletter */
.footer-newsletter {
    background-color: #252525;
    padding: 40px 0;
    border-bottom: 1px solid #333;
    text-align: center;
    border-radius: 25px;
    width: 97%;
    margin-left: auto;
    margin-right: auto;
}

.newsletter-content h3 {
    color: #fff;
    margin-bottom: 10px;
    font-size: 24px;
}

.newsletter-form {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

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

.newsletter-form input {
    padding: 12px 20px;
    border-radius: 50px;
    border: 2px solid transparent;
    background: rgba(255, 255, 255, 0.05); /* Półprzezroczyste tło */
    color: #fff;
    width: 300px;
    outline: none;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Sprężysta animacja */
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
}

/* Efekt "Wow" przy kliknięciu w pole */
.newsletter-form input:focus {
    width: 330px; 
    background: #333;
    border-color: #e67e22;
    box-shadow: 0 0 20px rgba(230, 126, 34, 0.4);
}

.newsletter-form button {
    padding: 12px 30px;
    background: linear-gradient(45deg, #e67e22, #f39c12);
    color: #fff;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(230, 126, 34, 0.3);
}

/* Animacja przycisku na hover */
.newsletter-form button:hover {
    transform: translateY(-3px); /* Unoszenie */
    box-shadow: 0 8px 25px rgba(230, 126, 34, 0.5);
    background: linear-gradient(45deg, #f39c12, #e67e22);
}

/* Efekt kliknięcia (active) */
.newsletter-form button:active {
    transform: translateY(1px);
    box-shadow: 0 2px 10px rgba(230, 126, 34, 0.3);
}

/* Opcjonalny efekt "błysku" przechodzącego przez przycisk */
.newsletter-form button::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 20%;
    height: 200%;
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(30deg);
    transition: all 0.5s;
}

.newsletter-form button:hover::after {
    left: 120%;
}

/* Footer Grid */
.footer-widgets {
    padding: 60px 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 40px;
}

.footer-col h4 {
    color: #fff;
    font-size: 18px;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}

.footer-col h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 2px;
    background-color: #e67e22;
}

.footer-col ul {
    list-style: none;
    padding: 0;
}

.footer-col ul li {
    margin-bottom: 10px;
}

.footer-col ul li a {
    color: #b0b0b0;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-col ul li a:hover {
    color: #fff;
    padding-left: 5px; /* Efekt przesunięcia */
}

/* Ikony Płatności i Dostawy */
.payment-icons, .shipping-icons {
    font-size: 32px;
    display: flex;
    gap: 15px;
    color: #fff;
    align-items: center; /* Ważne: centruje ikony i obrazek InPost w jednej linii */
}

.mt-4 {
    margin-top: 25px;
}

/* Bottom Bar */
.footer-bottom {
    background-color: #111;
    padding: 20px 0;
    border-top: 1px solid #333;
    border-radius: 25px;
    width: 97%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 10px;
}

.bottom-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

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

.social-link {
    width: 45px;
    height: 45px;
    background: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s;
}

.social-link:hover {
    background: #e67e22;
    transform: translateY(-3px);
}

/* Responsywność */
@media (max-width: 768px) {
    .newsletter-form {
        flex-direction: column;
        align-items: center;
    }
    .newsletter-form input {
        width: 100%;
    }
    .bottom-flex {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
}

.footer-newsletter {
    padding: 60px 0;
    /* Animowany gradient w tle */
    background: linear-gradient(-45deg, #1a1a1a, #2c3e50, #7722e6, #000983);
    /*background-size: 400% 400%;*/
    /*animation: gradientBG 15s ease infinite;*/
    font-family: 'Poppins', sans-serif;
    overflow: hidden;
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.newsletter-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 40px;
    border-radius: 50px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}

.newsletter-content h3 {
    font-size: 2.2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 15px;
    letter-spacing: -1px;
}

.newsletter-content p {
    color: rgba(255,255,255,0.8);
    font-size: 1.1rem;
    margin-bottom: 30px;
}

/* Styl ikony dla zalogowanych */
.welcome-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    text-align: center;
}

.main-icon {
    font-size: 4rem;
    color: #e67e22;
    width: fit-content;
    margin: 0 auto 20px;
    display: block;
    text-align: center;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

/* Ulepszony Input i Button z poprzedniego kroku */
.newsletter-form {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.newsletter-form input {
    padding: 15px 25px;
    border-radius: 50px;
    border: 2px solid rgba(255,255,255,0.2);
    background: rgba(0,0,0,0.2);
    color: #fff;
    width: 350px;
    transition: 0.3s;
}

.newsletter-form input:focus {
    border-color: #e67e22;
    background: rgba(0,0,0,0.4);
    box-shadow: 0 0 20px rgba(230, 126, 34, 0.4);
    outline: none;
}

.newsletter-form button {
    padding: 15px 40px;
    background: #e67e22;
    color: #fff;
    border: none;
    border-radius: 50px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 10px 20px rgba(230, 126, 34, 0.4);
}

.newsletter-form button:hover {
    transform: scale(1.05) rotate(-2deg);
    background: #fff;
    color: #e67e22;
}
/* --- Compact Modern Pills Grid --- */
.footer-widgets {
    padding: 40px 0; /* Zmniejszony padding ogólny */
}

.footer-grid {
    display: grid;
    /* Automatyczne dopasowanie: minimum 200px szerokości, ale rozciągnij, by wypełnić */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
    gap: 15px; /* Mniejsze odstępy między kolumnami */
    align-items: start;
}

/* Styl pojedynczej "pastylki" - sekcji */
.footer-col {
    background: rgba(255, 255, 255, 0.03); /* Bardzo subtelne tło */
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 30px; /* Nowoczesne zaokrąglenie, ale nie przesadzone */
    padding: 25px; /* Kompaktowe wnętrze */
    transition: background 0.3s, border-color 0.3s, transform 0.3s;
    height: 100%; /* Żeby wszystkie były równe */
}

/* Efekt najechania na całą sekcję */
.footer-col:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(230, 126, 34, 0.3); /* Delikatny pomarańcz */
    transform: translateY(-2px);
}

.footer-col h4 {
    color: #fff;
    font-size: 16px; /* Zgrabniejszy font */
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-col h4 i {
    color: #e67e22;
}

/* Lista linków */
.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

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

/* Wygląd linków - muszą być wyraźnie klikalne */
.footer-col ul li a {
    color: #b0b0b0;
    text-decoration: none;
    font-size: 14px;
    display: block; /* Link na całą szerokość wiersza */
    padding: 8px 12px; /* Powiększone pole kliknięcia */
    border-radius: 15px; /* Mała pastylka dla linku */
    transition: all 0.2s ease;
}

/* Hover na konkretny link */
.footer-col ul li a:hover {
    color: #fff;
    background: rgba(230, 126, 34, 0.1); /* Podświetlenie tła linku */
    padding-left: 15px; /* Lekkie przesunięcie */
}

/* Sekcja kontaktowa (tekst) */
.footer-desc {
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 15px;
    color: #999;
}

.contact-list li {
    font-size: 13px;
    color: #b0b0b0;
    margin-bottom: 10px;
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Ikony płatności i wysyłki - kompaktowe */
.icons-grid {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.icons-grid i {
    font-size: 20px;
    color: #ccc;
    transition: 0.3s;
}

.icons-grid i:hover {
    color: #e67e22;
    transform: scale(1.1);
}

.mt-compact {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px dashed rgba(255,255,255,0.1);
}


/* --- SELECTOR DE CANTIDAD COMPACTO --- */

.cart-page-item .quantity-selector {
    box-sizing: border-box;
    /* El ancho compacto libera espacio para el nombre del producto. */
    width: 120px !important;
    min-width: 120px !important;
    height: 42px !important; /* Odrobinę wyższy dla lepszych proporcji */
    
    background: linear-gradient(145deg, #f3f6fa, #e9eef5);
    border-radius: 50px;
    border: 1px solid rgba(94, 114, 228, .12);
    display: flex;
    align-items: center;
    justify-content: space-between; /* Rozpychamy przyciski do brzegów */
    padding: 0 5px; /* Delikatny margines wewnętrzny */
    box-shadow: inset 0 1px 2px rgba(38, 51, 77, .06);
    flex-shrink: 0 !important; /* Zapobiegamy kurczeniu się */
}

/* 2. PRZYCISKI (+ i -) - Lekko większe dla wygody */
.cart-page-item .quantity-btn {
    width: 30px !important;        
    height: 30px !important;       
    flex: 0 0 30px !important;     
    
    border-radius: 50%;
    background: linear-gradient(145deg, #ffffff, #edf1f7);
    border: 1px solid rgba(94, 114, 228, .2);
    color: #3d4a63;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.9rem;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
    margin: 0 !important;
    box-shadow: 0 4px 10px rgba(39, 55, 79, .13), inset 0 1px 0 rgba(255,255,255,.9);
}

/* 3. INPUT CENTRALNY - espacio para tres cifras */
.cart-page-item .quantity-value {
    width: 45px !important;
    flex: 0 0 45px !important;
    
    text-align: center;
    background: transparent;
    border: none;
    font-weight: 700;
    font-size: 1.1rem; /* Większa czcionka liczby */
    color: #333;
    padding: 0;
    margin: 0;
    outline: none;
    pointer-events: none;
    line-height: 45px; 
    height: 100%;
}

.cart-page-item .quantity-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #6f7fff, #4f65e8);
    border-color: transparent;
    color: white;
    transform: translateY(-1px) scale(1.04);
    box-shadow: 0 7px 14px rgba(79, 101, 232, .28);
}

.cart-page-item .quantity-btn:active:not(:disabled) {
    transform: scale(.94);
}

.cart-page-item .quantity-btn:focus-visible {
    outline: 3px solid rgba(79, 101, 232, .22);
    outline-offset: 2px;
}

.cart-page-item .quantity-btn:disabled {
    cursor: not-allowed;
    color: #a8b0be;
    border-color: #e2e6ec;
    background: #eef1f5;
    box-shadow: inset 0 1px 2px rgba(34, 45, 66, .06);
    transform: none;
}
.cart-page-item .quantity-btn i {
    width: 14px !important;
    text-align: center;
    display: inline-block;
}

/* Quitar flechas nativas del input number */
.cart-page-item .quantity-value::-webkit-outer-spin-button,
.cart-page-item .quantity-value::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.cart-page-item .quantity-value {
    appearance: textfield;
    -moz-appearance: textfield;
}
.form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--bs-body-bg);
    background-clip: padding-box;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: 50px !important;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

/* --- DARK MODE CONFIGURATION --- */

/* 1. Definicja zmiennych dla trybu ciemnego */
[data-theme="dark"] {
    --primary-color: #7b8bea; /* Nieco jaśniejszy fiolet dla lepszego kontrastu */
    --secondary-color: #0f1115; /* Bardzo ciemne tło strony (zamiast szarego) */
    --accent-color: #ff5b77;
    
    --text-dark: #f0f2f5; /* Główny tekst na biały */
    --text-light: #a0aec0; /* Poboczny tekst na jasnoszary */
    
    --bg-light: #1c1e26; /* Tło kart/nagłówka (ciemny granat/szary) */
    
    --shadow-light: 0 4px 20px rgba(0, 0, 0, 0.6); /* Mocniejszy cień w nocy */
}

/* 2. Globalne nadpisania dla Dark Mode */
[data-theme="dark"] body {
    background-color: var(--secondary-color);
    color: var(--text-dark);
}

[data-theme="dark"] a {
    color: #ffffff;
}

[data-theme="dark"] h1, 
[data-theme="dark"] h2, 
[data-theme="dark"] h3, 
[data-theme="dark"] h4,
[data-theme="dark"] .product-info h3,
[data-theme="dark"] .cart-item-name,
[data-theme="dark"] .section-title {
    color: var(--text-dark) !important;
}

/* 3. Karty produktów i kontenery */
[data-theme="dark"] .product-card,
/* El encabezado personalizado desde el editor se pinta con su propio motor de
   color (variables --cv-h-*), así que aquí se excluye a propósito. */
[data-theme="dark"] .main-header:not(.cv-logo-config),
[data-theme="dark"] .sidebar-categories,
[data-theme="dark"] .cart-sidebar,
[data-theme="dark"] .cart-dropdown,
[data-theme="dark"] .cart-page-item .cart-item-image,
[data-theme="dark"] .cart-items-list,
[data-theme="dark"] .cart-summary-box,
[data-theme="dark"] .cart-sidebar-header, 
[data-theme="dark"] .cart-sidebar-footer,
[data-theme="dark"] .sidebar-view {
    background-color: var(--bg-light) !important;
    border-color: #2d303a;
}

/* 4. Przyciski z efektem szkła (Glassmorphism) w trybie ciemnym */
[data-theme="dark"] .action-btn,
[data-theme="dark"] .sidebar-header .back-btn,
[data-theme="dark"] .sidebar-header .close-sidebar, 
[data-theme="dark"] .close-cart {
    background: rgba(255, 255, 255, 0.1); /* Bardziej subtelne w nocy */
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-dark);
}



[data-theme="dark"] .action-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--primary-color);
}

/* 5. Wyszukiwarka */
[data-theme="dark"] .search-bar-container {
    background-color: rgba(255, 255, 255, 0);
    /*border: solid #2d303a;*/
}

[data-theme="dark"] .search-input {
    color: var(--text-dark);
}

[data-theme="dark"] .search-trigger-btn {
    color: var(--text-dark);
}

/* 6. Inne elementy interfejsu */
[data-theme="dark"] .nav-toggle.circular-toggle .circle-text-wrapper text {
    fill: var(--text-dark); /* Tekst obrotowy na biały */
}

[data-theme="dark"] .toggle-subcategories:hover,
[data-theme="dark"] .sidebar-nav-list li a:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .cart-item-details .cart-item-price,
[data-theme="dark"] .sidebar-current-price,
[data-theme="dark"] .price-main {
    color: #a3b1ff; /* Jaśniejszy fiolet ceny */
}

[data-theme="dark"] .price-old-small,
[data-theme="dark"] .sidebar-old-price {
    color: #666 !important;
}

/* Pigułka ilości w koszyku */
[data-theme="dark"] .cart-page-item .quantity-selector,
[data-theme="dark"] .cart-sidebar-item .quantity-btn,
[data-theme="dark"] .cart-item-quantity {
    background-color: #252830 !important;
    border-color: #383c48;
    color: #fff;
}

[data-theme="dark"] .cart-page-item .quantity-btn {
    background-color: #383c48;
    border-color: #4a4f5e;
    color: #fff;
}

[data-theme="dark"] .cart-page-item .quantity-btn:disabled,
[data-theme="dark"] .cart-sidebar-item .quantity-btn:disabled {
    background: #20242c !important;
    border-color: #303641 !important;
    color: #687181 !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.25) !important;
}

[data-theme="dark"] .cart-page-item .quantity-value,
[data-theme="dark"] .quantity-value {
    color: #fff;
}

/* Stopka */
[data-theme="dark"] .main-footer {
    background-color: #0d0e11; /* Jeszcze ciemniejsza stopka */
    border-top: 1px solid #2d303a;
}

/* Modal Cookies i Wyszukiwania */
[data-theme="dark"] .search-modal,
[data-theme="dark"] #cookieConsentPreferencesModal .modal-content {
    background-color: var(--bg-light) !important;
    color: var(--text-dark);
}

[data-theme="dark"] .search-modal {
    background: 
        /* Usamos la variable oscura en lugar de #ffffff */
        linear-gradient(to bottom, transparent 50px, var(--bg-light) 50px),
        linear-gradient(to right, var(--bg-light) var(--ancho-izquierdo), transparent var(--ancho-izquierdo)),
        linear-gradient(to left, var(--bg-light) var(--ancho-derecho), transparent var(--ancho-derecho)) !important;
    color: var(--text-dark);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.5); /* Sombra más fuerte para la noche */
}
/* --- FIX BOTÓN CERRAR BÚSQUEDA --- */
[data-theme="dark"] .close-search {
    background: #2d303a; /* Fondo oscuro */
    color: var(--text-dark);
}

[data-theme="dark"] .close-search:hover {
    background: #ff4757; /* Tu rojo original para hover */
    color: #fff;
}

/* --- FIX SCROLLBAR RESULTADOS MODO OSCURO --- */
[data-theme="dark"] .search-results-container::-webkit-scrollbar-track {
    background: #1c1e26; /* Fondo oscuro del modal */
}

[data-theme="dark"] .search-results-container::-webkit-scrollbar-thumb {
    background: #2d303a; /* Gris oscuro para la barra */
}

[data-theme="dark"] .search-results-container::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color); /* Tu morado al pasar el cursor */
}

[data-theme="dark"] #advanced-search-input {
    background: transparent;
    color: var(--text-dark);
}
[data-theme="dark"] .result-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
}
[data-theme="dark"] .result-name {
    color: var(--text-dark);
}

/* Naprawa SVG w przycisku kategorii (tekst wokół) */
[data-theme="dark"] .nav-toggle .circle-text-wrapper svg text {
    fill: #f0f2f5;
}

div:where(.swal2-container) div:where(.swal2-popup) {
    display: none;
    position: relative;
    box-sizing: border-box;
    grid-template-columns: minmax(0, 100%);
    width: var(--swal2-width);
    max-width: 100%;
    padding: var(--swal2-padding);
    border: var(--swal2-border);
    border-radius: 50px !important;
    background: var(--swal2-background);
    color: var(--swal2-color);
    font-family: inherit;
    font-size: 1rem;
    container-name: swal2-popup;
    z-index: 10000 !important;
}

div:where(.swal2-container) {
    display: grid;
    position: fixed;
    z-index: 20000 !important;
    inset: 0;
    box-sizing: border-box;
    grid-template-areas:
        "top-start top top-end"
        "center-start center center-end"
        "bottom-start bottom-center bottom-end";
    grid-template-rows: minmax(min-content, auto) minmax(min-content, auto) minmax(min-content, auto);
    height: 100%;
    padding: var(--swal2-container-padding);
    overflow-x: hidden;
    transition: var(--swal2-backdrop-transition);
    -webkit-overflow-scrolling: touch;
}
/* --- MODIFICACIÓN BUSCADOR: SIN FONDO Y MÁS ABAJO --- */

#search-overlay {
    /* 1. Quitamos el fondo negro y el desenfoque */
    /*background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;*/
    
    /* 2. Lo bajamos más (Ajusta los px si lo quieres más arriba o abajo) */
    padding-top: 125px !important; 
    
    /* Mantenemos el puntero para poder cerrar al hacer clic en el vacío */
    pointer-events: auto;
}

/* ← AÑADIR JUSTO AQUÍ DEBAJO, después de la regla desktop */
@media (max-width: 768px) {
    #search-overlay {
        padding-top: 165px !important;  /* Pisa el 175px solo en móvil */
    }
}

/* ============================================================
   SMALL SCREENS — Ajustes extra para < 480px
   ============================================================ */
@media (max-width: 480px) {
    .logo img,
    .logo .logo-dinamico {
        height: 42px !important;         /* Logo más pequeño en pantallas chicas */
    }

    .logo span {
        font-size: 12px !important;
        max-width: 120px;                /* Menos espacio disponible */
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .nav-toggle,
    .nav-toggle.circular-toggle {
        width: 42px !important;
        height: 42px !important;
    }

    .header-actions .action-btn,
    .header-actions .cart-btn {
        width: 36px !important;
        height: 36px !important;
        font-size: 1rem !important;
        margin-left: 4px !important;
    }
}

/* Hacemos que la caja del buscador destaque más (ya que no hay fondo negro) */
.search-modal {
    /* Sombra más fuerte para que se distinga del contenido de la web */
    /*box-shadow: 0 10px 50px rgba(0, 0, 0, 0.25) !important;*/
    
    /* Un borde fino para definirla mejor */
    /*border: 1px solid rgba(0, 0, 0, 0.1) !important;*/
    
    /* Animación de entrada: Que caiga un poco desde arriba */
    transform-origin: top center;
}

/* Opcional: Si quieres ocultar el overlay cuando no está activo para que no estorbe clics */
#search-overlay:not(.active) {
    pointer-events: none;
}
/* --- FIX FINAL MODO OSCURO: BOTONES ORIGINALES Y SELECTOR NEGRO --- */

/* 1. PANELES OSCUROS (Fondo general) */
[data-theme="dark"] .sidebar-categories,
[data-theme="dark"] .sidebar-view,
/* ─── FAVORITES SIDEBAR — Glass effect en Dark Mode ─── */
[data-theme="dark"] .favorites-sidebar {
    background-color: rgba(28, 30, 38, 0.55) !important;   /* mismo color, pero con alpha */
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.08);
    /*box-shadow: 0 -8px 50px rgba(0, 0, 0, 0.45);*/
}
[data-theme="dark"] .cart-sidebar {
    background-color: var(--bg-light) !important;
    border-color: #2d303a;
}

/* 2. TÍTULOS (Morado original) */
[data-theme="dark"] .sidebar-header h3,
[data-theme="dark"] .favorites-header h3,
[data-theme="dark"] .cart-sidebar-header h3 {
    color: var(--primary-color) !important;
}

/* =========================================================
   3. BOTONES FLOTANTES (Cerrar vs Volver) - COMPORTAMIENTO DIFERENCIADO
   ========================================================= */

/* Estilo BASE para ambos en Modo Oscuro (Vidrio Oscuro) */
[data-theme="dark"] .sidebar-header .back-btn,
[data-theme="dark"] .sidebar-header .close-sidebar,
[data-theme="dark"] .close-favorites,
[data-theme="dark"] .close-cart {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    border: 2px solid rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

/* A) BOTÓN VOLVER (Flecha): Se pone MORADO y se mueve a la IZQUIERDA */
[data-theme="dark"] .sidebar-header .back-btn:hover {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
    transform: translateY(-50%) translateX(-5px) !important; /* Movimiento original */
}

/* B) BOTÓN CERRAR (Cruz): Se pone ROJO y ROTA (Igual que el original) */
[data-theme="dark"] .sidebar-header .close-sidebar:hover,
[data-theme="dark"] .close-favorites:hover,
[data-theme="dark"] .close-cart:hover {
    background: #ff4757 !important; /* ROJO ORIGINAL */
    border-color: #ff4757 !important;
    color: #fff !important;
    /* Recuperamos la rotación y el centrado */
    transform: translateY(-50%) rotate(90deg) !important; 
    box-shadow: 0 0 15px rgba(255, 71, 87, 0.6) !important; /* Resplandor rojo */
}

/* =========================================================
   4. SELECTOR DE CANTIDAD (FAVORITOS) - VERDADERAMENTE OSCURO
   ========================================================= */

/* Drawer handle en dark mode */
[data-theme="dark"] .fav-handle-pill {
    background: rgba(255, 255, 255, 0.2);
}
[data-theme="dark"] .fav-drawer-handle:hover .fav-handle-pill {
    background: var(--primary-color) !important;
    box-shadow: 0 0 16px rgba(123, 139, 234, 0.4);
}
[data-theme="dark"] .fav-handle-arrow {
    color: rgba(255, 255, 255, 0.3);
}

/* La cápsula contenedora */
[data-theme="dark"] .fav-qty-selector {
    background-color: #000000 !important; /* Negro puro o muy oscuro */
    border: 1px solid #333 !important;     /* Borde sutil */
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.5);
}

/* Los botones pequeños (+ / -) */
[data-theme="dark"] .fav-qty-btn {
    background-color: #222 !important;     /* Gris casi negro */
    color: #fff !important;
    border: 1px solid #444 !important;
}

[data-theme="dark"] .fav-qty-btn:hover {
    background-color: var(--primary-color) !important; /* Morado al tocar */
    border-color: var(--primary-color) !important;
}

/* El número en el medio */
[data-theme="dark"] .fav-qty-input {
    color: #fff !important;
    font-weight: 700;
}

/* =========================================================
   5. AJUSTES FINALES DE TEXTO Y TARJETAS
   ========================================================= */

/* ─── FAV ITEMS — Tarjetas SÓLIDAS oscuras (sin glass) ─── */
[data-theme="dark"] .fav-item {
    background-color: #1e1e1e;                          /* sólido, opaco */
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: none;                              /* sin glass */
    -webkit-backdrop-filter: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .fav-item:hover {
    background-color: #32353f;                          /* un pelín más claro al hover */
    border-color: rgba(123, 139, 234, 0.35);            /* tinte morado del primary */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* ─── PRECIO PILL — sólido, visible, sin glass ─── */
[data-theme="dark"] .fav-price,
[data-theme="dark"] .fav-price-mystyles {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: #fff;                                        /* texto blanco siempre legible */
}

/* Si la pastilla queda apagada porque el bg viene del inline style,
   le damos un pequeño contorno para destacarla sobre el fondo oscuro */
[data-theme="dark"] .fav-price-mystyles {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35),
                inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .fav-name { color: #fff !important; }

/* Enlaces del menú lateral */
[data-theme="dark"] .sidebar-nav-list li a,
[data-theme="dark"] .toggle-subcategories {
    color: #f0f2f5 !important;
}
[data-theme="dark"] .sidebar-nav-list li a:hover,
[data-theme="dark"] .toggle-subcategories:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: var(--primary-color, #6a0dad);
}
/* To sprawia, że przycisk jest niewidzialny, ale ZAJMUJE MIEJSCE */
.remove-item-btn.invisible-placeholder {
    visibility: hidden !important; /* Ważne! */
    opacity: 0 !important;
    pointer-events: none;
    display: inline-flex !important; /* Wymuszamy, żeby nie zniknął z układu */
}

/* =========================================
   MODAL DE COOKIES: VERSIÓN DEFINITIVA (AZUL & TARJETAS)
   ========================================= */

/* 1. Superposición (Z-Index Extremo) */
/* Esto asegura que tape a la pastilla de cookies (que tiene 9999) */
.modal-backdrop {
    z-index: 1050 !important;
}
#cookieConsentPreferencesModal {
    z-index: 10001 !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    /*background-color: rgba(20, 20, 20, 0.6);*/
}

/* 2. Contenedor Principal (La tarjeta blanca) */
#cookieConsentPreferencesModal .custom-cookie-modal {
    border-radius: 50px !important;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    background: #ffffff;
    overflow: hidden;
    padding: 10px; /* Margen interno para que la cabecera azul flote */
}

/* 3. Cabecera AZUL (Estilo Pastilla Flotante) */
#cookieConsentPreferencesModal .modal-header {
    background: #0d6efd !important; /* Tu azul */
    color: #fff !important;
    padding: 1rem 1rem !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 40px !important; /* Muy redondo */
    margin-bottom: 15px; /* Separación con el contenido */
    position: relative !important; /* Necesario para mover la X libremente */
    padding-right: 60px !important; /* Dejamos hueco a la derecha para la X */
}

#cookieConsentPreferencesModal .modal-title {
    color: #fff !important;
    font-weight: 800;
    font-size: 1.3rem;
    padding-left: 10px;
}

/* BOTÓN CERRAR (X): Corrección para que el rojo se vea ROJO */
#cookieConsentPreferencesModal .btn-close {
    /* Posición absoluta para subirlo */
    position: absolute !important;
    top: 50% !important;           /* Lo centramos verticalmente primero */
    right: 15px !important;        /* Pegado a la derecha */
    margin: 0 !important;
    
    /* AJUSTE FINO DE ALTURA: */
    /* Si lo quieres MÁS ARRIBA, cambia el -50% a -60% o -70% */
    transform: translateY(-50%) !important; 

    /* Estilo de la X (Blanca SVG) */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
    background-color: rgba(255, 255, 255, 0.2) !important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 1rem;
    
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    opacity: 1 !important;
    box-shadow: none !important;
    border: none !important;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    filter: none !important;
}

#cookieConsentPreferencesModal .btn-close:hover {
    background-color: #ff4757 !important; /* Rojo al pasar el mouse */
    transform: translateY(-50%) rotate(90deg) scale(1.1) !important; /* Mantiene la altura al rotar */
    box-shadow: 0 5px 15px rgba(255, 71, 87, 0.4) !important;
}

/* 5. Tarjetas de Opciones (Gris suave) */
.cookie-option-card {
    background-color: #f8f9fc;
    border-radius: 30px;
    padding: 15px 20px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    margin-bottom: 10px; /* Separación entre tarjetas */
}

.cookie-option-card:hover {
    background-color: #fff;
    border-color: rgba(94, 114, 228, 0.2);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}

/* Iconos de las tarjetas */
.cookie-icon-box {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(46, 204, 113, 0.15);
    color: #27ae60;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* 6. Interruptores (Switches) */
.custom-switch {
    width: 50px !important;
    height: 26px !important;
    background-color: #e9ecef;
    border: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

.custom-switch:checked {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.custom-switch:disabled {
    opacity: 0.6;
    background-color: #27ae60 !important;
}

/* BOTÓN GUARDAR: Pastilla bonita con degradado */
.save-pref-btn {
    border-radius: 50px !important;
    padding: 12px 30px;
    font-weight: 700;
    font-size: 1rem;
    color: white !important;
    border: none;
    
    /* EL DEGRADADO DE 2 COLORES (Verde a Azul) */
    background: linear-gradient(45deg, #218838, #007bff) !important;
    background-size: 200% auto !important; /* Necesario para la animación */
    
    box-shadow: 0 10px 20px rgba(0, 123, 255, 0.3);
    transition: all 0.4s ease;
}

.save-pref-btn:hover {
    /* Mueve el degradado para el efecto visual */
    background-position: right center !important; 
    box-shadow: 0 15px 30px rgba(33, 136, 56, 0.4);
    transform: translateY(-2px);
}

.save-pref-btn:active {
    /* Efecto click (hundirse) */
    transform: translateY(1px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

/* AJUSTES DARK MODE */
[data-theme="dark"] #cookieConsentPreferencesModal .custom-cookie-modal {
    background: #1c1e26;
    border-color: #2d303a;
}
[data-theme="dark"] #cookieConsentPreferencesModal .modal-header {
    /* Mantenemos el azul en dark mode o lo oscurecemos un poco si prefieres */
    background: #0d6efd !important; 
    border-bottom-color: rgba(255,255,255,0.05) !important;
}
[data-theme="dark"] .cookie-option-card {
    background-color: #252830;
}
[data-theme="dark"] .cookie-option-card:hover {
    background-color: #2d303a;
    border-color: #444;
}
[data-theme="dark"] .custom-switch {
    background-color: #4a4f5e;
}



/* =========================================
   LA "PASTILLA" DE COOKIES (BANNER FLOTANTE)
   ========================================= */

#cookie-consent-banner {
    position: fixed !important;
    bottom: 30px !important;       /* Flotando un poco por encima del borde */
    left: 50% !important;
    transform: translateX(-50%) !important;
    
    /* Z-INDEX: 9999 (Alto, pero MENOR que el modal que es 10001) */
    z-index: 1069 !important;

    /* Estilo Vidrio Oscuro Moderno */
    background-color: rgb(25 25 35 / 68%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    /* Forma y Bordes */
    width: auto;
    max-width: 90%;      /* Para que no toque los bordes en móvil */
    min-width: 350px;    /* Tamaño mínimo decente */
    padding: 12px 15px 12px 25px; /* Padding asimétrico para el texto */
    border-radius: 50px; /* Bordes completamente redondos */
    border: 1px solid rgba(255, 255, 255, 0.1);
    
    /* Sombra elegante */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);

    /* Flexbox para alinear texto y botones */
    display: flex;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 15px;
    
    /* Animación de entrada suave */
    animation: slideUpFade 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Texto de la pastilla */
#cookie-consent-banner p {
    margin: 0;
    font-size: 0.75rem;
    color: #e0e0e0;
    font-weight: 500;
    line-height: 1.4;
    flex: 1; /* Ocupa el espacio disponible */
    min-width: 200px;
}

/* Enlace dentro del texto (si lo hay) */
#cookie-consent-banner a {
    color: #6a0dad; /* Tu morado o un color acento */
    text-decoration: none;
    font-weight: 700;
    border-bottom: 1px dotted #6a0dad;
}

/* Contenedor de botones (Derecha) */
#cookie-consent-banner .cookie-buttons-wrapper {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* ESTILO DE LOS BOTONES DE LA PASTILLA */
#cookie-consent-banner .cookie-consent-button,
#cookie-consent-banner .cookie-customize-button {
    border: none;
    padding: 10px 24px;
    border-radius: 50px; /* Redondos */
    cursor: pointer;
    font-weight: 700;
    font-size: 0.65rem;
    transition: all 0.3s ease;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Botón ACEPTAR (Verde o tu color principal) */
#cookie-consent-banner .cookie-consent-button {
    background-color: #2ecc71; /* Verde vibrante */
    color: white;
    box-shadow: 0 4px 15px rgba(46, 204, 113, 0.3);
}

#cookie-consent-banner .cookie-consent-button:hover {
    background-color: #27ae60;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(46, 204, 113, 0.4);
}

/* Botón PERSONALIZAR (Gris oscuro / sutil) */
#cookie-consent-banner .cookie-customize-button {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

#cookie-consent-banner .cookie-customize-button:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

/* Animación de entrada */
@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translate(-50%, 50px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

/* Responsividad para móviles */
@media (max-width: 576px) {
    #cookie-consent-banner {
        flex-direction: column; /* Apilar texto y botones */
        align-items: center !important;
        text-align: center;
        padding: 20px;
        width: 90%;
        bottom: 20px;
    }
    
    #cookie-consent-banner p {
        margin-bottom: 10px;
    }
    
    #cookie-consent-banner .cookie-buttons-wrapper {
        width: 100%;
        justify-content: center;
    }
}


.result-info {
    flex: 1; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 15px !important;
    margin-right: 5px;
    gap: 4px; /* Separación entre la línea de arriba y la de abajo */
}

/* --- FILA SUPERIOR: Nombre y Precio Actual --- */
.result-row-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.result-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: #333;
    white-space: nowrap;
    /*overflow: hidden;*/
    /*text-overflow: ellipsis;*/
    max-width: 350px;
}

.result-price-main {
    font-weight: 700; /* Negrita como el original */
    font-size: 1rem;
    color: var(--primary-color) !important;
    white-space: nowrap;
}

.result-price-main.is-discounted {
    color: var(--primary-color) !important;
}

/* --- FILA INFERIOR: Categorías y Descuentos --- */
.result-row-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
}

/* Enlaces de categorías */
.result-cats a {
    color: #888;
    text-decoration: none;
    transition: color 0.2s;
}
.result-cats a:hover {
    color: #ff4757; /* Hover de color */
    text-decoration: underline;
}
.result-cats i {
    font-size: 0.7em;
    margin: 0 3px;
    color: #ccc;
}

/* Grupo de descuento a la derecha */
.result-discount-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.result-old-price {
    text-decoration: line-through;
    color: #999;
    font-weight: bold;
    font-size: 0.85rem;
}

/* LA PASTILLA REDONDA (50px) */
.result-pill {
    background-color: #ff4757;
    color: #ffe0e3;
    border: 1px solid #ff4757;
    font-size: 0.7rem;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 50px;
    line-height: 1.2;
    white-space: nowrap;
}
/* --- CÍRCULO MAGNÍFICO PARA LA FLECHA --- */
.result-arrow-circle {
    /* Forma y tamaño */
    width: 26px;
    height: 26px;
    border-radius: 50%;
    
    /* Posicionamiento y Margen */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 15px; /* Separación del texto */
    
    /* Estilo Inicial (Sutil) */
    background-color: #f8f9fa; /* Gris muy claro */
    color: #ccc;               /* Icono gris */
    border: 1px solid #eee;
    
    /* La Magia de la Animación */
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Efecto rebote */
    cursor: pointer;
}

/* --- EFECTO HOVER (MAGNÍFICO) --- */
/* Al pasar el ratón por encima de la FILA ENTERA (.result-item) */
.result-item:hover .result-arrow-circle {
    background-color: #04cc5e; 
    color: #fff; 
    border-color: #04cc5e;
    transform: scale(1.15);    /* Se hace un poco más grande */
    box-shadow: 0 4px 12px rgba(4, 204, 94, 0.3); /* Sombra suave (Glow) */
}

/* Pequeño movimiento de la flecha hacia la derecha */
.result-item:hover .result-arrow-circle i {
    transform: translateX(2px);
    transition: transform 0.2s ease;
}

/* ============================================
   PASTILLA INFO ICONOS + HEADER SHRINK SCROLL  (v3)
   ============================================ */

/* Header: animaciones suaves. Z-index original (1000) para no romper el search */
/* ── Contador de reserva del carrito (2 min) ────────────────────────────
   Mismo lenguaje visual que el del checkout, pero más pequeño: aquí es un
   apunte, no una promesa formal. Se pone en rojo en los últimos 30 s. */
.cv-carrito-contador {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    margin: .6rem 1rem;
    padding: .45rem .85rem;
    border: 1px solid #cfe8d8;
    border-radius: 999px;
    background: #f1faf4;
    color: #1c6b3f;
    font-size: .8rem;
    line-height: 1;
    transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.cv-carrito-contador .cv-carrito-reloj {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}
.cv-carrito-contador.cv-carrito-urgente {
    border-color: #f3c6c6;
    background: #fdf2f2;
    color: #a12b2b;
}
/* En la página del carrito se centra y se limita el ancho */
.cart-page-surface > .cv-carrito-contador {
    max-width: 380px;
    margin: 0 auto 1.2rem;
}
[data-theme="dark"] .cv-carrito-contador {
    border-color: rgba(148,163,184,.25);
    background: rgba(16,185,129,.10);
    color: #6ee7b7;
}
[data-theme="dark"] .cv-carrito-contador.cv-carrito-urgente {
    border-color: rgba(248,113,113,.35);
    background: rgba(248,113,113,.12);
    color: #fca5a5;
}

/* ── Contador de reserva del checkout ───────────────────────────────────
   Franja discreta que le dice al cliente que su pedido está apartado y
   cuánto le queda. Se pone en rojo en los dos últimos minutos. */
#cv-reserva-contador {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin: 0 auto 1rem;
    max-width: 420px;
    padding: .55rem 1rem;
    border: 1px solid #cfe8d8;
    border-radius: 999px;
    background: #f1faf4;
    color: #1c6b3f;
    font-size: .86rem;
    line-height: 1;
    transition: background .3s ease, border-color .3s ease, color .3s ease;
}
#cv-reserva-contador .cv-reserva-reloj {
    font-variant-numeric: tabular-nums;   /* que no baile al descontar */
    font-weight: 700;
}
#cv-reserva-contador.cv-reserva-urgente {
    border-color: #f3c6c6;
    background: #fdf2f2;
    color: #a12b2b;
}
[data-theme="dark"] #cv-reserva-contador {
    border-color: rgba(148,163,184,.25);
    background: rgba(16,185,129,.10);
    color: #6ee7b7;
}
[data-theme="dark"] #cv-reserva-contador.cv-reserva-urgente {
    border-color: rgba(248,113,113,.35);
    background: rgba(248,113,113,.12);
    color: #fca5a5;
}

.main-header {
    transition: padding 0.3s ease, background 0.3s ease,
                backdrop-filter 0.3s ease, box-shadow 0.3s ease, height 0.3s ease;
    /* El header cambia de altura mientras el usuario hace scroll. Sin esto el
       navegador lo usa como ancla y corrige la posición del scroll a mitad de
       la transición, lo que provocaba el parpadeo al subir despacio. */
    overflow-anchor: none;
}

/* === LAYOUT de .header-actions ===
   Usamos position: relative para anclar la pastilla absoluta dentro */
.header-actions {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    flex-direction: row;
    flex-wrap: nowrap;
    width: auto;
}
.header-actions .icons-row {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}

/* === LA PASTILLA: ancho fijo, posición absoluta */
#icon-info-pill {
    position: absolute;
    /* ANCLAJE FIJO: Ya no depende del centro, siempre se ancla a la derecha */
    right: 0; 
    left: auto;
    transform: none; 
    
    top: calc(100% + 8px);          
    width: 666px !important;                   
    box-sizing: border-box;
    padding: 2px 4px;
    background: var(--tt-bg);
    color: var(--tt-text);
    border-radius: var(--tt-radius);
    font-size: var(--tt-font-size);
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;            
    z-index: 5;
    transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Texto interior con fade al cambiar */
#icon-info-pill .pill-text {
    display: inline-block;
    transition: opacity 0.15s ease;
    opacity: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
#icon-info-pill .pill-text.fading {
    opacity: 0;
}

/* Modo activo (página actual / panel abierto) — verde glass */
#icon-info-pill.active-mode {
    background: color-mix(in srgb, var(--tt-bg-active), transparent 25%);
    /*box-shadow: 0 0 15px color-mix(in srgb, var(--tt-bg-active), transparent 60%);*/
    /*border: 1px solid rgba(255, 255, 255, 0.5);*/
}

/* Variantes de color */
#icon-info-pill.tooltip-blue  { background: rgba(52, 152, 219, 0.85); }
#icon-info-pill.tooltip-green { background: rgba(46, 204, 113, 0.85); }
#icon-info-pill.tooltip-red   { background: rgba(231, 76, 60, 0.85); }

/* === HEADER SCROLLED (estrecho + glass) === */
.main-header.scrolled {
    /*background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);*/
    height: 125px;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    /*background-color: #ffffffc2;
    backdrop-filter: blur(30px);*/
}
[data-theme="dark"] .main-header.scrolled:not(.cv-logo-config) {
    background: rgba(28, 30, 38) !important;
}

.main-header.scrolled .logo {
    transform: scale(0.75);
    transform-origin: left center;
    transition: transform 0.3s ease;
}

.main-header.scrolled .header-actions .action-btn {
    transform: scale(0.85);
    transition: transform 0.3s ease;
}

/* Cuando hay scroll → la pastilla salta ARRIBA de los iconos
   Pegada al borde superior del header, sin sobresalir */
.main-header.scrolled .header-actions #icon-info-pill {
    top: calc(100% + 8px);
    /* Se escala manteniéndose pegado a la derecha */
    transform: scale(0.90);
    transform-origin: center top; 
}
body.header-scrolled.search-active .main-header.scrolled {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    transition: border-radius 0.3s ease;
}
/* === SEARCH OVERLAY: hereda el mismo glass cuando el header está scrolled === */
/*body.header-scrolled #search-overlay .search-modal {
    background:
        linear-gradient(to bottom, transparent 50px, rgba(255, 255, 255, 0.85) 50px),
        linear-gradient(to right, rgba(255, 255, 255, 0.85) var(--ancho-izquierdo, 60px), transparent var(--ancho-izquierdo, 60px)),
        linear-gradient(to left,  rgba(255, 255, 255, 0.85) var(--ancho-derecho, 60px),  transparent var(--ancho-derecho, 60px))
        !important;
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.18);
}*/
[data-theme="dark"] body.header-scrolled #search-overlay .search-modal {
    background:
        linear-gradient(to bottom, transparent 50px, rgba(20, 20, 20, 0.85) 50px),
        linear-gradient(to right, rgba(20, 20, 20, 0.85) var(--ancho-izquierdo, 60px), transparent var(--ancho-izquierdo, 60px)),
        linear-gradient(to left,  rgba(20, 20, 20, 0.85) var(--ancho-derecho, 60px),  transparent var(--ancho-derecho, 60px))
        !important;
}
body.header-scrolled #search-overlay .search-header {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-top-color: rgba(0, 0, 0, 0.05);
    border-bottom-color: rgba(0, 0, 0, 0.05);
}
[data-theme="dark"] body.header-scrolled #search-overlay .search-header {
    background: rgba(40, 40, 40, 0.5);
    border-top-color: rgba(255, 255, 255, 0.08);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* === SEARCH ABIERTO: el modal SIEMPRE usa el mismo color glass del header scrolled ===
   (sin tocar el header ni el padding del overlay → no se rompe la apertura) */
/*body.search-active #search-overlay .search-modal {
    /*background:
        linear-gradient(to bottom, transparent 50px, rgba(255, 255, 255, 0.85) 50px),
        linear-gradient(to right, rgba(255, 255, 255, 0.85) var(--ancho-izquierdo, 60px), transparent var(--ancho-izquierdo, 60px)),
        linear-gradient(to left,  rgba(255, 255, 255, 0.85) var(--ancho-derecho, 60px),  transparent var(--ancho-derecho, 60px))
        !important;
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.18);
}*/
[data-theme="dark"] body.search-active #search-overlay .search-modal {
    background:
        linear-gradient(to bottom, transparent 50px, rgba(28, 30, 38) 50px),
        linear-gradient(to right, rgba(28, 30, 38) var(--ancho-izquierdo, 60px), transparent var(--ancho-izquierdo, 60px)),
        linear-gradient(to left,  rgba(28, 30, 38) var(--ancho-derecho, 60px),  transparent var(--ancho-derecho, 60px))
        !important;
}
body.search-active #search-overlay .search-header {
    background: rgba(255, 255, 255);
    /*backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);*/
    border-top-color: rgba(0, 0, 0, 0.05);
    border-bottom-color: rgba(0, 0, 0, 0.05);
}
[data-theme="dark"] body.search-active #search-overlay .search-header {
    background: rgba(40, 40, 40, 0.5);
    border-top-color: rgba(255, 255, 255, 0.08);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* Si además el header está realmente scrolled, el modal sube para pegarse al header pequeño */
body.header-scrolled.search-active #search-overlay {
    padding-top: 80px !important;
    transition: padding-top 0.3s ease !important;
}

/* Desactivamos el tooltip flotante viejo cuando es de un botón del header */
#custom-tooltip-container.hidden-by-pill {
    display: none !important;
}

/* === Fix Firefox para el botón circular de Categorías === */
.nav-toggle.circular-toggle .circle-text-wrapper svg text {
    text-rendering: geometricPrecision;
}
.nav-toggle.circular-toggle .circle-text-wrapper svg textPath {
    font-feature-settings: "kern" 0;
}

/* --- ADAPTACIÓN DE LA PASTILLA PARA MÓVILES --- */
@media (max-width: 768px) {
    #icon-info-pill {
        right: auto !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 95% !important; 
    }
    .main-header.scrolled .header-actions #icon-info-pill {
        transform: translateX(-50%) scale(0.95) !important;
        transform-origin: center top !important;
    }
}
/* ============================================================
   FIX DEFINITIVO 4.0: SIN GRADIENTE TRANSPARENTE AL HACER SCROLL
   ============================================================ */

/* 1. Header siempre por encima del buscador */
.main-header,
.main-header.scrolled {
    z-index: 1040 !important;
}

/* 2. Cuando hay scroll → modal SÓLIDO desde el píxel 0 (sin los 50px transparentes) */
body.header-scrolled.search-active #search-overlay .search-modal {
    background: var(--bg-light, #ffffff) !important;
    padding-top: 30px !important;              /* quitamos el hueco de 50px */
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    margin-top: 0 !important;
    transform: scale(1) translateY(0) !important;  /* sin truco de -40px */
}

[data-theme="dark"] body.header-scrolled.search-active #search-overlay .search-modal {
    background: rgba(28, 30, 38, 1) !important;
}

/* 3. El overlay se pega justo debajo del header scrolled (135px) */
body.header-scrolled.search-active #search-overlay {
    padding-top: 135px !important;
    transition: padding-top 0.3s ease !important;
}

/* 4. Móvil */

@media (max-width: 768px) {
    .search-modal, body.header-scrolled.search-active #search-overlay .search-modal {
        width: 97% !important;
        margin-top: -30px !important;
        padding-top: 60px !important;
        background: var(--bg-light, #ffffff) !important;
        border-radius: 0 0 24px 24px !important;
        box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15) !important;
        max-height: 75vh !important;
    }
}
/* ============================================================
   FIX MÓVIL HEADER v2 — pastilla integrada + modal pegado
   ============================================================ */
@media (max-width: 768px) {

    /* --- HEADER: sin padding-bottom fantasma --- */
    .main-header {
        height: auto !important;
        padding: 10px 0 12px 0 !important;   /* ← antes 65px */
        overflow: hidden !important;          /* ← caja limpia */
        border-radius: 28px !important;
    }
    .main-header.scrolled {
        height: auto !important;              /* ← antes 135px fijo */
        padding-top: 8px !important;
        padding-bottom: 10px !important;
    }

    /* --- HEADER-ACTIONS: columna (iconos arriba, pastilla debajo) --- */
    .header-actions {
        order: 3 !important;
        width: 100% !important;
        position: static !important;
        transform: none !important;
        display: flex !important;
        flex-direction: column !important;    /* ← clave */
        align-items: stretch !important;
        gap: 8px !important;
        margin-top: 8px !important;
        padding-top: 8px !important;
        border-top: 1px solid rgba(0,0,0,0.06);
    }
    .header-actions .icons-row {
        width: 100%;
        justify-content: center !important;
        flex-wrap: wrap;
        gap: 6px;
    }

    /* --- INFO-PILL: item estático del flex, ya no absolute --- */
    #icon-info-pill,
    .main-header.scrolled .header-actions #icon-info-pill {
        position: static !important;
        transform: none !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: calc(100% - 24px) !important;
        margin: 0 12px !important;
        align-self: center;
    }

    /* --- SEARCH OVERLAY: se pega al header de forma dinámica --- */
    #search-overlay {
        padding-top: var(--header-bottom, 170px) !important;
        transition: padding-top 0.25s ease !important;
    }
    body.header-scrolled.search-active #search-overlay {
        padding-top: var(--header-bottom, 110px) !important;
    }

    /* --- SEARCH MODAL: sin gap, sin banda transparente --- */
    .search-modal,
    body.header-scrolled.search-active #search-overlay .search-modal {
        width: 97% !important;
        margin-top: 0;            /* ← antes 25px */
        padding-top: 0;            /* ← mata la banda de 50px */
        background: var(--bg-light, #ffffff) !important;  /* sólido */
        border-radius: 0 0 24px 24px !important;
        box-shadow: 0 20px 40px -10px rgba(0,0,0,0.15) !important;
        max-height: 75vh !important;
    }
    [data-theme="dark"] .search-modal,
    [data-theme="dark"] body.header-scrolled.search-active #search-overlay .search-modal {
        background: rgba(28, 30, 38, 1) !important;
    }
    .search-header {
        width: 92% !important;
        margin: 10px auto !important;
        padding: 10px 14px !important;
        gap: 10px !important;
    }
}

/* ============ BOTÓN SCROLL TO TOP CON PROGRESO ============ */
.scroll-top-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 55px;
    height: 55px;
    border: none;
    border-radius: 50%;
    background-color: var(--bg-light, #fff);
    color: var(--primary-color, #5e72e4);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.8);
    transition: opacity 0.35s ease,
                visibility 0.35s ease,
                transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                background-color 0.25s ease,
                color 0.25s ease;
    z-index: 10998;
}

.scroll-top-btn.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.scroll-top-btn:hover {
    background-color: var(--primary-color, #5e72e4);
    color: #fff;
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 10px 25px rgba(94, 114, 228, 0.4);
}

.scroll-top-btn:hover .scroll-progress-ring__fill {
    stroke: var(--accent-color, #f5365c);
}

.scroll-top-btn i {
    font-size: 1.1rem;
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease;
}

.scroll-top-btn:hover i {
    transform: translateY(-3px);
}

/* Anillo SVG */
.scroll-progress-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg); /* Empieza arriba (12 en punto) */
}

.scroll-progress-ring__bg {
    fill: none;
    stroke: rgba(0, 0, 0, 0.08);
    stroke-width: 3;
}

.scroll-progress-ring__fill {
    fill: none;
    stroke: var(--primary-color, #5e72e4);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 125.66;  /* 2 * π * r (r=20) */
    stroke-dashoffset: 125.66; /* Empieza vacío */
    transition: stroke-dashoffset 0.1s linear, stroke 0.25s ease;
}

/* --- Modo oscuro --- */
[data-theme="dark"] .scroll-top-btn {
    background-color: #2a2a3a;
    color: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .scroll-progress-ring__bg {
    stroke: rgba(255, 255, 255, 0.12);
}

/* Responsive */
@media (max-width: 576px) {
    .scroll-top-btn {
        width: 48px;
        height: 48px;
        bottom: 20px;
        right: 20px;
    }
}

/* =============================================
   DARK MODE — MIS PEDIDOS (my-orders.php)
   Selector: [data-theme="dark"]
   ============================================= */

/* --- Contenedores principales y tarjetas --- */
[data-theme="dark"] .order-details-card,
[data-theme="dark"] .order-list-item a.order-main-link,
[data-theme="dark"] .sidebar-order-btn {
    background-color: var(--bg-light, #1c1e26) !important;
    border-color: #2d303a !important;
    color: var(--text-dark, #e8e8ec) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .sidebar-order-btn:hover,
[data-theme="dark"] .order-list-item a.order-main-link:hover {
    background-color: #252830 !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .sidebar-order-btn.active {
    background-color: #252830 !important;
    border-color: #04cc5e !important;
}

/* --- Títulos y textos por defecto --- */
[data-theme="dark"] .order-details-card h1, 
[data-theme="dark"] .order-details-card h2, 
[data-theme="dark"] .order-details-card h3, 
[data-theme="dark"] .order-details-card h4, 
[data-theme="dark"] .order-details-card h5,
[data-theme="dark"] .order-list-item h5,
[data-theme="dark"] .order-details-card strong,
[data-theme="dark"] .sidebar-order-btn strong {
    color: #e8e8ec !important;
}

/* --- Pastillas de cantidad y miniaturas de productos --- */
[data-theme="dark"] .qty-pill {
    background-color: #2d303a !important;
    color: #e8e8ec !important;
}
[data-theme="dark"] .product-thumb {
    background: #252830 !important;
}

/* --- Separadores y bordes (líneas de los productos y pie de página) --- */
[data-theme="dark"] li[style*="border-bottom: 1px solid #eee;"] {
    border-bottom-color: #2d303a !important;
}
[data-theme="dark"] .summary-section, 
[data-theme="dark"] .summary-row.total, 
[data-theme="dark"] .footer-actions-container {
    border-top-color: #2d303a !important;
}

/* --- Cajas de Facturación y Envío (sobrescribiendo estilos inline) --- */
[data-theme="dark"] div[style*="background:#fafafa;"] {
    background: #252830 !important;
    border-color: #383c48 !important;
}
[data-theme="dark"] div[style*="color:#1f2937;"] {
    color: #e8e8ec !important;
}
[data-theme="dark"] div[style*="color:#6b7280;"] {
    color: #a0aec0 !important;
}

/* --- Botones genéricos de acción (Volver, etc) --- */
[data-theme="dark"] .action-pill-neutral {
    background-color: #252830 !important;
    color: #e8e8ec !important;
}
[data-theme="dark"] .action-pill-neutral:hover {
    background-color: #383c48 !important;
    color: #ffffff !important;
}

/* --- Barra de historial (Versiones del pedido) --- */
[data-theme="dark"] .version-selector-bar {
    background: linear-gradient(135deg, #252830, #1c1e26) !important;
    border-color: #383c48 !important;
}
[data-theme="dark"] .version-pill {
    background: #1c1e26 !important;
    border-color: #383c48 !important;
    color: #a3b1ff !important;
}
[data-theme="dark"] .version-pill:hover {
    background: #2d303a !important;
    border-color: #a3b1ff !important;
}
[data-theme="dark"] .version-pill-active {
    background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
    color: #ffffff !important;
    border-color: #4f46e5 !important;
}

/* --- Avisos de diferencias de pago e historial --- */
[data-theme="dark"] div[style*="background:linear-gradient(135deg,#fff7ed,#fffbeb);"] {
    background: linear-gradient(135deg, rgba(249,115,22,0.1), rgba(249,115,22,0.05)) !important;
    border-color: rgba(249,115,22,0.3) !important;
}
[data-theme="dark"] .edit-history-panel {
    background: #1e2028 !important;
    border-color: #383c48 !important;
}
[data-theme="dark"] .edit-history-panel > div:first-child {
    background: #252830 !important;
    border-color: #383c48 !important;
}
[data-theme="dark"] .edit-history-panel > div {
    border-color: #2d303a !important;
}
[data-theme="dark"] .order-edit-meta {
    background: linear-gradient(135deg, rgba(245,158,11,0.1), rgba(245,158,11,0.05)) !important;
    border-color: #f59e0b !important;
}

/* --- Desglose de estados flotante superior --- */
[data-theme="dark"] .status-breakdown-container {
    background: #1c1e26 !important;
    border-color: #2d303a !important;
}
[data-theme="dark"] .status-breakdown-container .empty-text {
    color: #e8e8ec !important;
}

/* --- Visualizador de la Factura (Modal interno) --- */
[data-theme="dark"] #invoiceContainer > div:first-child {
    background: #1e2028 !important;
    border-color: #2d303a !important;
}
[data-theme="dark"] #invoiceContainer > div:last-child,
[data-theme="dark"] #invoiceLoadingOverlay {
    background: #1e2028 !important;
}
[data-theme="dark"] #closeInvoiceBtn {
    color: #e8e8ec !important;
}

/* --- MODAL: Pagar Diferencia --- */
[data-theme="dark"] #payDiffModal {
    background: #1e2028 !important;
}
[data-theme="dark"] .pay-diff-method {
    background: #252830 !important;
    border-color: #383c48 !important;
}
[data-theme="dark"] .pay-diff-method span {
    color: #e8e8ec !important;
}
[data-theme="dark"] .pay-diff-method > div:first-of-type {
    background: #1c1e26 !important;
}
[data-theme="dark"] #payDiffSuccess h3 {
    color: #e8e8ec !important;
}

/* --- MODAL: Repetir Pedido --- */
[data-theme="dark"] .reorder-modal__dialog {
    background: #1e2028 !important;
    color: #e8e8ec !important;
}
[data-theme="dark"] .reorder-modal__header, 
[data-theme="dark"] .reorder-modal__footer {
    border-color: #2d303a !important;
    background: #1c1e26 !important;
}
[data-theme="dark"] .reorder-modal__title {
    color: #e8e8ec !important;
}
[data-theme="dark"] .reorder-section__list {
    border-color: #383c48 !important;
}
[data-theme="dark"] .reorder-section__list li {
    background: #252830 !important;
    border-color: #2d303a !important;
    color: #e8e8ec !important;
}
[data-theme="dark"] .reorder-section__list li + li {
    border-top-color: #383c48 !important;
}
[data-theme="dark"] .reorder-section__list .name { 
    color: #e8e8ec !important; 
}
[data-theme="dark"] .reorder-modal__btn--ghost {
    background: #252830 !important;
    color: #e8e8ec !important;
    border-color: #383c48 !important;
}
[data-theme="dark"] .reorder-modal__btn--ghost:hover { 
    background: #383c48 !important; 
}

/* --- Spinners y carga --- */
[data-theme="dark"] .detail-spinner-overlay {
    background: rgba(28, 30, 38, 0.8) !important;
}

/* Carrito moderno: ajustes finales responsive y modo oscuro. */
.delivery-title {
    font-family: 'Poppins', 'Montserrat', sans-serif;
}

@media (max-width: 576px) {
    .delivery-options {
        padding: 14px;
        border-radius: 14px;
    }

    .delivery-title {
        font-size: .98rem;
    }

    .delivery-subtitle {
        max-width: 250px;
    }

    .cart-summary-box .delivery-option label {
        min-height: 68px;
        padding: 9px 40px 9px 9px;
    }

    .cart-summary-box .delivery-option__icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        border-radius: 50%;
    }

    .cart-summary-box .delivery-option .delivery-name {
        font-size: .84rem;
    }

    .cart-summary-box .delivery-option .delivery-price {
        font-size: .78rem;
    }

    .cart-action-btn,
    .btn-checkout.cart-action-btn,
    .btn-continue-shopping.cart-action-btn {
        min-height: 52px;
        padding-right: 42px;
        padding-left: 42px;
        border-radius: 50px;
        font-size: .91rem;
    }
}

[data-theme="dark"] .cart-action-btn--secondary,
[data-theme="dark"] .btn-continue-shopping.cart-action-btn--secondary {
    color: #d9e4f2;
    background: #222731;
    border-color: #3c4654;
    box-shadow: 0 6px 16px rgba(0,0,0,.18);
}

[data-theme="dark"] .cart-action-btn--secondary:hover,
[data-theme="dark"] .btn-continue-shopping.cart-action-btn--secondary:hover {
    color: #8db8ff;
    background: #283140;
    border-color: rgba(85,145,245,.56);
}

[data-theme="dark"] .cart-action-btn--secondary .cart-action-btn__icon {
    color: #8db8ff;
    background: rgba(65,128,235,.15);
}

[data-theme="dark"] .delivery-options {
    border-color: #343c49;
    background: linear-gradient(145deg, #20252e 0%, #1c222b 100%);
}

[data-theme="dark"] .delivery-title {
    color: #edf3fb !important;
}

[data-theme="dark"] .delivery-title__icon {
    color: #8db8ff;
    border-color: #35445a;
    background: #243147;
}

[data-theme="dark"] .delivery-subtitle,
[data-theme="dark"] .cart-summary-box .delivery-option__copy small {
    color: #94a1b2;
}

[data-theme="dark"] .cart-summary-box .delivery-option label {
    border-color: #3a4350;
    background: #252b35;
    box-shadow: 0 5px 14px rgba(0,0,0,.16);
}

[data-theme="dark"] .cart-summary-box .delivery-option .delivery-name,
[data-theme="dark"] .cart-summary-box .delivery-option .delivery-price {
    color: #ecf2f9;
}

[data-theme="dark"] .cart-summary-box .delivery-option__icon {
    border-color: #35464d;
    background: #23353a;
}

[data-theme="dark"] .cart-summary-box .delivery-option label::after {
    border-color: #566273;
    background: #20252e;
}

[data-theme="dark"] .cart-summary-box .delivery-option input[type="radio"]:checked + label {
    border-color: rgba(91,151,255,.65);
    background: #26344a;
    box-shadow: 0 0 0 3px rgba(66,133,244,.12), 0 8px 20px rgba(0,0,0,.2);
}

[data-theme="dark"] .cart-summary-box .delivery-option input[type="radio"]:checked + label::after {
    border-color: #4c91ff;
    background: #4c91ff;
}

/* ============================================================
   FIX MODO OSCURO — BUSCADOR: banda transparente en el modal
   ------------------------------------------------------------
   En movil el .search-modal tiene padding-top:0, pero la regla
   [data-theme="dark"] body.search-active ... seguia pintando el
   degradado con "transparent 50px" arriba (y los laterales solo
   opacos en 60px). Resultado: un trozo transparente por el que
   se veia la pagina de detras. Aqui lo dejamos solido.
   ============================================================ */
@media (max-width: 768px) {
    [data-theme="dark"] body.search-active #search-overlay .search-modal,
    [data-theme="dark"] body.header-scrolled #search-overlay .search-modal,
    [data-theme="dark"] body.header-scrolled.search-active #search-overlay .search-modal,
    [data-theme="dark"] .search-modal {
        background: #1c1e26 !important;
        padding-top: 0 !important;
        margin-top: 0 !important;
        border-radius: 0 0 24px 24px !important;
        box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.55) !important;
    }

    [data-theme="dark"] body.search-active #search-overlay .search-header,
    [data-theme="dark"] body.header-scrolled #search-overlay .search-header {
        background: #262933 !important;
        border-top-color: rgba(255, 255, 255, 0.08) !important;
        border-bottom-color: rgba(255, 255, 255, 0.08) !important;
    }

    /* El contenedor de resultados tambien solido, para que no se
       transparente el hueco cuando aun no hay resultados. */
    [data-theme="dark"] #search-overlay .search-results-container {
        background: #1c1e26 !important;
    }
}

/* ============================================================
   FIX MOVIL — El panel de busqueda debe "soldarse" al header
   ------------------------------------------------------------
   El header tiene border-radius 28px, asi que sus esquinas
   inferiores dejaban ver el fondo azul de la pagina justo
   encima del panel: los dos bloques no se juntaban.
   Con el buscador abierto cuadramos las esquinas de abajo del
   header y alineamos el ancho del modal al del header (97%).
   ============================================================ */
@media (max-width: 768px) {
    body.search-active .main-header,
    body.search-active .main-header.scrolled {
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        transition: border-radius 0.2s ease;
    }

    body.search-active #search-overlay .search-modal,
    body.search-active.header-scrolled #search-overlay .search-modal,
    .search-modal {
        width: 97% !important;          /* mismo ancho que .main-header */
        margin-left: auto !important;
        margin-right: auto !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
        border-bottom-left-radius: 24px !important;
        border-bottom-right-radius: 24px !important;
    }
}

/* ============================================================
   MODO OSCURO — SELECTOR DE CANTIDAD (carrito, carrito lateral
   y desplegable del header)
   ------------------------------------------------------------
   Las reglas antiguas usaban "background-color", que solo pisa
   la capa de color: el "background: linear-gradient(...)" claro
   del modo dia es una background-IMAGE y seguia pintandose
   encima. Por eso las pildoras y los botones + / - se veian
   claros con el tema oscuro. Aqui usamos el atajo "background"
   (que resetea tambien la imagen).
   ============================================================ */

/* --- Pildora contenedora --- */
[data-theme="dark"] .cart-page-item .quantity-selector,
[data-theme="dark"] .cart-item-quantity {
    background: linear-gradient(145deg, #252a34, #1e222b) !important;
    border-color: #383c48 !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .45) !important;
}

/* --- Botones + / - --- */
[data-theme="dark"] .cart-page-item .quantity-btn:not(.is-trash),
[data-theme="dark"] .cart-sidebar-item .quantity-btn:not(.is-trash):not(.is-trash-small),
[data-theme="dark"] .cart-dropdown .quantity-btn:not(.is-trash) {
    background: linear-gradient(145deg, #343a47, #2a2f3a) !important;
    border: 1px solid #454b5a !important;
    color: #e8ecf5 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}

[data-theme="dark"] .cart-page-item .quantity-btn:not(.is-trash):hover:not(:disabled),
[data-theme="dark"] .cart-sidebar-item .quantity-btn:not(.is-trash):not(.is-trash-small):hover:not(:disabled),
[data-theme="dark"] .cart-dropdown .quantity-btn:not(.is-trash):hover:not(:disabled) {
    background: linear-gradient(135deg, #6f7fff, #4f65e8) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 7px 16px rgba(79, 101, 232, .38) !important;
}

[data-theme="dark"] .cart-page-item .quantity-btn:disabled,
[data-theme="dark"] .cart-sidebar-item .quantity-btn:disabled,
[data-theme="dark"] .cart-dropdown .quantity-btn:disabled {
    background: #20242c !important;
    border-color: #303641 !important;
    color: #687181 !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3) !important;
}

/* --- Numero central --- */
[data-theme="dark"] .quantity-value,
[data-theme="dark"] .cart-page-item .quantity-value,
[data-theme="dark"] .cart-sidebar-item .quantity-value,
[data-theme="dark"] .cart-dropdown .quantity-value {
    background: transparent !important;
    color: #e8ecf5 !important;
}

/* ============================================================
   MODO OSCURO — PAPELERAS Y ANIMACIONES DE LOS BOTONES
   ------------------------------------------------------------
   1) .cart-sidebar-item .remove-item-btn (la papelera que borra
      el producto entero) tenia background-color: #ffffff fijo y
      ninguna regla dark -> era la mancha blanca del carrito
      lateral.
   2) Reafirmamos transition + transform en modo oscuro para que
      todos los botones conserven exactamente la misma animacion
      que en modo claro (elevacion, escala y giro de la papelera).
   ============================================================ */

/* --- Papelera "eliminar producto" del carrito lateral --- */
[data-theme="dark"] .cart-sidebar-item .remove-item-btn {
    color: #ff7c89 !important;
    background: linear-gradient(145deg, #332630, #291f26) !important;
    border: 1px solid #573039 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .38) !important;
}

[data-theme="dark"] .cart-sidebar-item .remove-item-btn:hover {
    color: #fff !important;
    background: linear-gradient(135deg, #ef5a69, #dc3545) !important;
    border-color: transparent !important;
    transform: rotate(15deg) scale(1.1);
    box-shadow: 0 6px 16px rgba(220, 53, 69, .45) !important;
}

/* --- Papelera del desplegable del header --- */
[data-theme="dark"] .cart-dropdown .remove-item-btn {
    color: #8d94a3 !important;
    background: none !important;
}

[data-theme="dark"] .cart-dropdown .remove-item-btn:hover {
    color: #ff7c89 !important;
    transform: rotate(15deg) scale(1.1);
}

/* --- Animaciones: mismas curvas que en modo claro --- */
[data-theme="dark"] .cart-page-item .quantity-btn,
[data-theme="dark"] .cart-sidebar-item .quantity-btn,
[data-theme="dark"] .cart-dropdown .quantity-btn,
[data-theme="dark"] .cart-page-item .remove-item-btn,
[data-theme="dark"] .cart-sidebar-item .remove-item-btn,
[data-theme="dark"] .cart-dropdown .remove-item-btn {
    transition: transform .18s ease, box-shadow .18s ease,
                background .18s ease, color .18s ease,
                border-color .18s ease !important;
}

[data-theme="dark"] .cart-page-item .quantity-btn:hover:not(:disabled),
[data-theme="dark"] .cart-sidebar-item .quantity-btn:hover:not(:disabled),
[data-theme="dark"] .cart-dropdown .quantity-btn:hover:not(:disabled) {
    transform: translateY(-1px) scale(1.04);
}

[data-theme="dark"] .cart-page-item .quantity-btn:active:not(:disabled),
[data-theme="dark"] .cart-sidebar-item .quantity-btn:active:not(:disabled),
[data-theme="dark"] .cart-dropdown .quantity-btn:active:not(:disabled),
[data-theme="dark"] .cart-sidebar-item .remove-item-btn:active,
[data-theme="dark"] .cart-page-item .remove-item-btn:active {
    transform: scale(.94);
}

/* Las papeleras (.is-trash / .is-trash-small / .remove-item-btn) comparten
   estilo y animacion: el giro se define junto a cada una en cart.php y
   header.php para que las tres se comporten igual. */

/* ============================================================
   SIDEBAR DE CATEGORIAS — CTA FIJA ABAJO + BOTONES MODERNOS
   ============================================================ */

/* ── 1. Estructura: cabecera / lista con scroll / CTA anclada ──
   Antes la vista entera hacia scroll, asi que el boton "Ver catalogo
   completo" quedaba justo detras de la ultima categoria. Ahora el
   scroll lo hace solo la lista y la CTA vive siempre al final. */
#main-categories.sidebar-view {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#main-categories .sidebar-header {
    flex: 0 0 auto;
}

#main-categories .sidebar-nav-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    /* Holgura para que la elevacion y la sombra del hover no se recorten. */
    padding: 6px 10px 12px 8px;
    margin: 0;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
}

#main-categories .sidebar-nav-list::-webkit-scrollbar { width: 4px; }
#main-categories .sidebar-nav-list::-webkit-scrollbar-track { background: transparent; }
#main-categories .sidebar-nav-list::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 99px;
}
[data-theme="dark"] #main-categories .sidebar-nav-list {
    scrollbar-color: rgba(255, 255, 255, .2) transparent;
}
[data-theme="dark"] #main-categories .sidebar-nav-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .2);
}

#main-categories .sidebar-catalog-cta {
    flex: 0 0 auto;
    margin-top: auto;
    position: relative;
}

/* Desvanecido sobre la lista para que los items no se corten en seco */
#main-categories .sidebar-catalog-cta::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -26px;
    height: 26px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--bg-light, #fff));
}

/* ── 2. Botones de categoria ── */
.sidebar-categories .sidebar-nav-list li a,
.sidebar-categories .toggle-subcategories {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(135deg, rgba(94, 114, 228, .07), rgba(94, 114, 228, .02));
    border: 1px solid rgba(94, 114, 228, .12);
    box-shadow: 0 1px 2px rgba(20, 30, 60, .04);
    will-change: transform;
    transition: transform .3s cubic-bezier(.16, 1, .3, 1),
                background .3s ease,
                color .3s ease,
                border-color .3s ease,
                box-shadow .3s ease,
                letter-spacing .3s ease;
}

/* Barra de acento que crece desde la izquierda */
.sidebar-categories .sidebar-nav-list li a::before,
.sidebar-categories .toggle-subcategories::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 4px;
    height: 0;
    border-radius: 0 4px 4px 0;
    background: #fff;
    opacity: 0;
    transform: translateY(-50%);
    transition: height .3s cubic-bezier(.16, 1, .3, 1), opacity .3s ease;
}

/* Destello que barre el boton al pasar */
.sidebar-categories .sidebar-nav-list li a::after,
.sidebar-categories .toggle-subcategories::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 34%, rgba(255, 255, 255, .3) 50%, transparent 66%);
    transform: translateX(-130%);
    transition: transform .75s cubic-bezier(.22, .61, .36, 1);
}

.sidebar-categories .sidebar-nav-list li a:hover,
.sidebar-categories .toggle-subcategories:hover,
.sidebar-categories .sidebar-nav-list li a:focus-visible,
.sidebar-categories .toggle-subcategories:focus-visible {
    background: linear-gradient(135deg, #6f7fff 0%, #5e72e4 60%, #4f65e8 100%);
    color: #fff;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -10px rgba(79, 101, 232, .65);
    letter-spacing: .4px;
}

.sidebar-categories .sidebar-nav-list li a:hover::before,
.sidebar-categories .toggle-subcategories:hover::before {
    height: 54%;
    opacity: .85;
}

.sidebar-categories .sidebar-nav-list li a:hover::after,
.sidebar-categories .toggle-subcategories:hover::after {
    transform: translateX(130%);
}

.sidebar-categories .sidebar-nav-list li a:active,
.sidebar-categories .toggle-subcategories:active {
    transform: translateY(-1px) scale(.985);
    box-shadow: 0 6px 14px -8px rgba(79, 101, 232, .6);
}

.sidebar-categories .sidebar-nav-list li a:focus-visible,
.sidebar-categories .toggle-subcategories:focus-visible {
    outline: 3px solid rgba(94, 114, 228, .3);
    outline-offset: 2px;
}

/* Chevron para las categorias que tienen subcategorias */
.sidebar-categories .toggle-subcategories .has-sub-icon {
    display: block;
    position: absolute;
    right: 16px;
    top: 50%;
    font-size: .72rem;
    opacity: 0;
    transform: translate(-6px, -50%);
    transition: opacity .3s ease, transform .3s cubic-bezier(.16, 1, .3, 1);
}

.sidebar-categories .toggle-subcategories:hover .has-sub-icon {
    opacity: .9;
    transform: translate(0, -50%);
}

/* ── 3. Entrada escalonada al abrir el panel ── */
@keyframes sbItemIn {
    from { opacity: 0; transform: translateX(-16px); }
    to   { opacity: 1; transform: none; }
}

.sidebar-categories.active .sidebar-view.active .sidebar-nav-list li {
    animation: sbItemIn .5s cubic-bezier(.16, 1, .3, 1) both;
}

.sidebar-categories.active .sidebar-view.active .sidebar-nav-list li:nth-child(1)  { animation-delay: .06s }
.sidebar-categories.active .sidebar-view.active .sidebar-nav-list li:nth-child(2)  { animation-delay: .10s }
.sidebar-categories.active .sidebar-view.active .sidebar-nav-list li:nth-child(3)  { animation-delay: .14s }
.sidebar-categories.active .sidebar-view.active .sidebar-nav-list li:nth-child(4)  { animation-delay: .18s }
.sidebar-categories.active .sidebar-view.active .sidebar-nav-list li:nth-child(5)  { animation-delay: .22s }
.sidebar-categories.active .sidebar-view.active .sidebar-nav-list li:nth-child(6)  { animation-delay: .26s }
.sidebar-categories.active .sidebar-view.active .sidebar-nav-list li:nth-child(7)  { animation-delay: .30s }
.sidebar-categories.active .sidebar-view.active .sidebar-nav-list li:nth-child(8)  { animation-delay: .34s }
.sidebar-categories.active .sidebar-view.active .sidebar-nav-list li:nth-child(9)  { animation-delay: .38s }
.sidebar-categories.active .sidebar-view.active .sidebar-nav-list li:nth-child(10) { animation-delay: .42s }
.sidebar-categories.active .sidebar-view.active .sidebar-nav-list li:nth-child(n+11) { animation-delay: .46s }

/* ── 4. Modo oscuro ── */
[data-theme="dark"] #main-categories .sidebar-catalog-cta::before {
    background: linear-gradient(to bottom, rgba(28, 30, 38, 0), var(--bg-light, #1c1e26));
}

[data-theme="dark"] .sidebar-categories .sidebar-nav-list li a,
[data-theme="dark"] .sidebar-categories .toggle-subcategories {
    background: linear-gradient(135deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
    border-color: rgba(255, 255, 255, .09);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

[data-theme="dark"] .sidebar-categories .sidebar-nav-list li a:hover,
[data-theme="dark"] .sidebar-categories .toggle-subcategories:hover,
[data-theme="dark"] .sidebar-categories .sidebar-nav-list li a:focus-visible,
[data-theme="dark"] .sidebar-categories .toggle-subcategories:focus-visible {
    background: linear-gradient(135deg, #7b8bea 0%, #6373e0 60%, #5461d6 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .75);
}

/* ── 5. Respeto por quien pide menos movimiento ── */
@media (prefers-reduced-motion: reduce) {
    .sidebar-categories.active .sidebar-view.active .sidebar-nav-list li { animation: none; }
    .sidebar-categories .sidebar-nav-list li a,
    .sidebar-categories .toggle-subcategories,
    .sidebar-categories .sidebar-nav-list li a::after,
    .sidebar-categories .toggle-subcategories::after { transition: none; }
    .sidebar-categories .sidebar-nav-list li a:hover,
    .sidebar-categories .toggle-subcategories:hover { transform: none; }
}

/* ── Jerarquía de navegación del panel de categorías ── */
#main-categories .sidebar-main-header {
    display: block;
    min-height: 0;
    padding: 14px 20px 12px;
    margin-bottom: 8px;
    text-align: center;
}

#main-categories .sidebar-main-title-pill {
    width: calc(100% - 52px);
    min-height: 40px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
}

#main-categories .sidebar-main-title-pill h3 {
    max-width: none;
    margin: 0;
}

#main-categories .sidebar-main-header .close-sidebar {
    top: 35px;
}

#main-categories .sidebar-main-header .sidebar-catalog-cta {
    display: flex;
    justify-content: center;
}

#main-categories .sidebar-main-header .sidebar-catalog-cta::before {
    display: none;
}

#main-categories .sidebar-nav-list {
    padding: 8px 16px 16px;
}

.sidebar-categories .sidebar-nav-list li a,
.sidebar-categories .toggle-subcategories {
    box-sizing: border-box;
    min-height: 51px;
}

/* La acción de administración conserva la misma alineación que las categorías. */
#main-categories .sidebar-nav-list .edit-categories-link a {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 0;
    background: linear-gradient(135deg, #e6f8ef 0%, #f4fcf8 100%);
    border-color: #b9e6d0;
    color: #177852 !important;
    box-shadow: 0 3px 10px rgba(23, 120, 82, .08);
}

#main-categories .sidebar-nav-list .edit-categories-link a::before {
    background: #177852;
}

#main-categories .sidebar-nav-list .edit-categories-link a:hover,
#main-categories .sidebar-nav-list .edit-categories-link a:focus-visible {
    background: linear-gradient(135deg, #16835b 0%, #0f6b49 100%);
    border-color: transparent;
    color: #fff !important;
    box-shadow: 0 12px 24px -10px rgba(15, 107, 73, .56);
}

/* ── Vista de subcategorías: categoría contextual + acción de productos ── */
.subcategory-sidebar-view {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.subcategory-sidebar-header {
    display: block;
    flex: 0 0 auto;
    min-height: 0;
    padding: 14px 50px 12px;
    margin-bottom: 8px;
    text-align: center;
}

.subcategory-sidebar-header .back-btn,
.subcategory-sidebar-header .close-sidebar {
    top: 35px;
}

.sidebar-category-title-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 42px;
    box-sizing: border-box;
    padding: 8px 12px;
    border: 1px solid rgba(94, 114, 228, .14);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(94, 114, 228, .09), rgba(94, 114, 228, .025));
    box-shadow: 0 2px 8px rgba(20, 30, 60, .04);
}

.sidebar-category-title-pill i {
    color: #5e72e4;
    font-size: .78rem;
}

.sidebar-category-title-pill h3 {
    max-width: none;
    color: #4355bd;
    font-size: .86rem;
}

.subcategory-sidebar-view .sidebar-nav-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0;
    padding: 8px 16px 12px;
}

.sidebar-products-cta {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    padding: 2px 16px 18px;
}

.subcategory-sidebar-header .sidebar-products-cta {
    padding: 8px 0 0;
}

.products-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    padding: 5px 9px;
    border: 1px solid rgba(45, 212, 191, .28);
    border-radius: 999px;
    background: linear-gradient(135deg, #0f766e 0%, #0d9488 55%, #2dd4bf 100%);
    background-size: 180% 180%;
    color: #fff;
    font-size: .66rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(13, 148, 136, .26);
    position: relative;
    overflow: hidden;
    transition: transform .25s ease, background-position .5s ease, box-shadow .25s ease;
}

.products-cta-btn:hover,
.products-cta-btn:focus-visible {
    transform: translateY(-2px);
    background-position: 100% 50%;
    box-shadow: 0 12px 26px rgba(13, 148, 136, .38);
    color: #fff;
}

.products-cta-btn .cta-arrow {
    transition: transform .25s ease;
}

.products-cta-btn:hover .cta-arrow {
    transform: translateX(3px);
}

.products-cta-btn::after {
    content: none;
}

[data-theme="dark"] #main-categories .sidebar-nav-list .edit-categories-link a {
    background: linear-gradient(135deg, rgba(22, 131, 91, .32), rgba(22, 131, 91, .14));
    border-color: rgba(86, 211, 150, .34);
    color: #8ce3b5 !important;
}

[data-theme="dark"] #main-categories .sidebar-nav-list .edit-categories-link a:hover,
[data-theme="dark"] #main-categories .sidebar-nav-list .edit-categories-link a:focus-visible {
    background: linear-gradient(135deg, #1c8b62, #126947);
    color: #fff !important;
}

[data-theme="dark"] .sidebar-category-title-pill {
    background: linear-gradient(135deg, rgba(123, 139, 234, .16), rgba(123, 139, 234, .05));
    border-color: rgba(123, 139, 234, .24);
}

[data-theme="dark"] .sidebar-category-title-pill h3,
[data-theme="dark"] .products-cta-btn {
    color: #b5c0ff;
}

[data-theme="dark"] .products-cta-btn {
    background: linear-gradient(135deg, #0b625d 0%, #0d887d 55%, #22b8a7 100%);
    color: #fff;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .5);
}

/* Sin destellos de barrido; se mantienen sombras y elevaciones. */
.sidebar-categories .sidebar-nav-list li a::after,
.sidebar-categories .toggle-subcategories::after {
    content: none;
}

/* ── Avisos de carrito y selector en modo oscuro ── */
[data-theme="dark"] .swal2-popup {
    background: #1d2029 !important;
    color: #edf1f7 !important;
    border: 1px solid rgba(255, 255, 255, .1) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .48) !important;
}

[data-theme="dark"] .swal2-title,
[data-theme="dark"] .swal2-html-container,
[data-theme="dark"] .swal2-html-container p,
[data-theme="dark"] .swal2-toast .swal2-title {
    color: #edf1f7 !important;
}

[data-theme="dark"] .swal2-popup .swal2-timer-progress-bar {
    background: rgba(255, 255, 255, .26) !important;
}

[data-theme="dark"] .stock-error-alert {
    border-color: #ff6b78 !important;
}

[data-theme="dark"] .stock-error-alert .swal2-html-container,
[data-theme="dark"] .stock-error-alert .stock-error-html {
    color: #ffd2d7 !important;
}

/* ── Aviso único para límites de stock y tarjetas regalo ── */
.limit-alert {
    border: 2px solid #fcac19 !important;
    border-radius: 25px !important;
    overflow: hidden !important;
}

.limit-alert-title {
    color: #b45309 !important;
    font-size: 1.5rem !important;
}

.limit-alert-confirm-button {
    border-radius: 999px !important;
    background-color: #ff9100 !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(255, 145, 0, .28) !important;
    font-weight: 700 !important;
}

.limit-alert .swal2-timer-progress-bar {
    background-color: #fcac19 !important;
}

[data-theme="dark"] .limit-alert {
    border-color: #ffbf4f !important;
}

[data-theme="dark"] .limit-alert-title {
    color: #ffcf7a !important;
}


/* ════════════════════════════════════════════════════════════════
   HEADER RESPONSIVO
   ----------------------------------------------------------------
   Por encima de 1400px el header se monta con position: absolute:
   el logo va donde diga el panel (--logo-left) y los iconos anclados
   a la derecha. Ahí sobra sitio y funciona bien.

   Por debajo dejaba de funcionar: al estar fuera del flujo, nada se
   reordena al estrechar la ventana, así que el texto del logo se
   metía por debajo de los iconos. Estos dos bloques devuelven los
   tres elementos al flujo normal.

   Van al final del archivo a propósito: así ganan a las reglas base
   de .logo (línea ~205) y .header-actions (línea ~237), que llevan
   !important.
   ════════════════════════════════════════════════════════════════ */

/* ── 769px – 1400px: una sola fila, círculo | logo | iconos ── */
@media (max-width: 1400px) and (min-width: 769px) {

    .header-container {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .nav-toggle.circular-toggle {
        position: static;
        flex: 0 0 auto;
        margin-right: 0;
    }

    .logo,
    .logo-container-above {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        flex: 1 1 auto;
        min-width: 0;
        justify-content: flex-start !important;
    }

    /* El tamaño lo fija el panel con un style en línea, de ahí el
       !important. A 1400px da 24px, que es el valor por defecto del
       panel: así no se nota ningún salto al cruzar el breakpoint. */
    .logo span {
        font-size: clamp(14px, 1.75vw, 24px) !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }

    /* relative, NO static: la pastilla verde es absolute y se ancla
       aquí dentro. Con static saltaría al header y se descolocaría. */
    .header-actions {
        position: relative !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        flex: 0 0 auto;
        margin-left: auto;
    }
}

/* ── Hasta 768px: logo centrado y su texto en una sola línea ──
   Los iconos ya caían a una segunda fila; eso no se toca. */
@media (max-width: 768px) {

    .nav-toggle.circular-toggle {
        flex: 0 0 52px !important;
        width: 52px !important;
        height: 52px !important;
        margin: 0 8px 0 0 !important;
    }

    /* El margen derecho iguala lo que ocupa el botón a la izquierda
       (52 + 8). Con los dos huecos iguales el logo queda centrado
       respecto al header, no respecto al espacio sobrante, y además
       nunca puede llegar a tocar el botón. */
    .logo {
        justify-content: center !important;
        text-align: center !important;
        margin: 0 60px 0 0 !important;
    }

    /* Una línea. Se quita el recorte a 2 líneas y la letra encoge con
       el ancho de pantalla hasta 11px, que sigue siendo legible. */
    .logo span {
        display: inline !important;
        white-space: nowrap !important;
        -webkit-line-clamp: unset !important;
        line-clamp: unset !important;
        -webkit-box-orient: horizontal !important;
        max-width: none !important;
        overflow: visible !important;
        word-break: normal !important;
        text-align: center !important;
        font-size: clamp(11px, 3vw, 18px) !important;
    }

    /* Con el texto en una línea la imagen no puede acaparar la fila.
       width sigue en auto, así que no se deforma. */
    .logo img,
    .logo .logo-dinamico {
        max-height: 52px !important;
        max-width: 42% !important;
        height: auto !important;
        flex-shrink: 0;
    }
}

/* El bloque de fondos que había aquí se ha unificado al principio del archivo
   (ver "Un solo origen de verdad para el fondo"). Tenerlo repetido en dos
   sitios era justo lo que hacía que a veces no se aplicara el color elegido.
   Sólo queda el remate del modo oscuro para el encabezado NO personalizado. */
[data-theme="dark"] .main-header:not(.cv-logo-config),
[data-theme="dark"] .main-header:not(.cv-logo-config).scrolled {
    background: var(--bg-light) !important;
}

/* El selector de Categorías conserva siempre un lienzo cuadrado completo.
   Estas reglas cierran las medidas antiguas y contradictorias de los breakpoints. */
.main-header.cv-logo-config .nav-toggle.circular-toggle {
    width: 65px !important;
    height: 65px !important;
    min-width: 65px !important;
    flex: 0 0 65px !important;
    aspect-ratio: 1 / 1;
    padding: 0 !important;
    margin-right: 1.5rem;
    overflow: visible !important;
    border-radius: 50%;
    box-sizing: border-box;
}
.main-header.cv-logo-config .nav-toggle.circular-toggle .circle-text-wrapper {
    width: 100% !important;
    height: 100% !important;
    min-width: 100%;
    min-height: 100%;
    overflow: visible !important;
}
.main-header.cv-logo-config .nav-toggle.circular-toggle svg {
    display: block;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
    transform-box: fill-box;
    transform-origin: 50% 50%;
}

/* Al reducir el encabezado se escala imagen + texto + separación como una
   sola unidad. La imagen ya no recibe una segunda escala independiente. */
@media (min-width: 1401px) {
    .main-header.cv-logo-config.scrolled .logo {
        transform: translate(-50%, -50%) scale(.78) !important;
        transform-origin: center center !important;
    }
}

@media (max-width: 1400px) and (min-width: 769px) {
    .main-header.cv-logo-config .nav-toggle.circular-toggle {
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
        flex-basis: 56px !important;
        margin-right: 0 !important;
    }
    .main-header.cv-logo-config.scrolled .logo {
        transform: scale(.82) !important;
        transform-origin: left center !important;
    }
}

@media (max-width: 768px) {
    .main-header.cv-logo-config .nav-toggle.circular-toggle {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        flex-basis: 52px !important;
        margin: 0 8px 0 0 !important;
    }
    .main-header.cv-logo-config.scrolled .logo {
        transform: scale(.86) !important;
        transform-origin: center center !important;
    }
}

/* Ajuste final para móvil. Tableta conserva deliberadamente la misma
   composición horizontal de escritorio y sólo reduce sus proporciones. */
@media (max-width: 768px) {
    .main-header.cv-logo-config {
        height: auto !important;
        min-height: 0;
        padding: 10px 0 12px !important;
        align-items: stretch;
        overflow: hidden !important;
    }
    .main-header.cv-logo-config .header-container {
        display: grid !important;
        grid-template-columns: 52px minmax(0, 1fr) 52px;
        grid-template-areas:
            "categories brand spacer"
            "actions actions actions";
        align-items: center !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        padding: 8px 12px !important;
        column-gap: 8px !important;
        row-gap: 9px !important;
    }
    .main-header.cv-logo-config .header-container::after {
        content: "";
        grid-area: spacer;
        width: 52px;
        height: 1px;
    }
    .main-header.cv-logo-config .nav-toggle.circular-toggle {
        grid-area: categories;
        margin: 0 !important;
        align-self: center;
    }
    .main-header.cv-logo-config .logo,
    .main-header.cv-logo-config.scrolled .logo {
        grid-area: brand;
        position: relative !important;
        inset: auto !important;
        transform: none !important;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        margin: 0 !important;
        padding: 0 !important;
        justify-self: stretch;
        justify-content: center !important;
        overflow: visible !important;
    }
    .main-header.cv-logo-config .logo img,
    .main-header.cv-logo-config .logo .logo-dinamico {
        width: auto !important;
        height: min(var(--cv-logo-mobile-size, 52px), 52px) !important;
        max-height: 52px !important;
        max-width: 38% !important;
        flex: 0 0 auto;
        object-fit: contain;
    }
    .main-header.cv-logo-config .logo .cv-logo-text,
    .main-header.cv-logo-config .logo.cv-logo-mobile-lines-1 .cv-logo-text {
        flex: 0 1 auto;
        min-width: 0;
        max-width: none !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
        font-size: clamp(10px, 3.8vw, var(--cv-logo-mobile-font-size, 16px)) !important;
        line-height: 1.1 !important;
    }
    .main-header.cv-logo-config .logo.cv-logo-mobile-lines-2 .cv-logo-text {
        max-width: 100% !important;
        white-space: normal !important;
        overflow: hidden !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
    }
    .main-header.cv-logo-config .header-actions {
        grid-area: actions;
        position: static !important;
        inset: auto !important;
        transform: none !important;
        width: 100% !important;
        min-width: 0;
        margin: 0 !important;
        padding: 8px 0 0 !important;
    }
    .main-header.cv-logo-config .header-actions .icons-row {
        width: 100%;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .main-header.cv-logo-config .header-actions .action-btn,
    .main-header.cv-logo-config .header-actions .cart-btn,
    .main-header.cv-logo-config .header-actions .search-trigger-btn {
        width: 42px !important;
        height: 42px !important;
        margin: 0 !important;
        font-size: 1.15rem !important;
    }
    .main-header.cv-logo-config #icon-info-pill,
    .main-header.cv-logo-config.scrolled #icon-info-pill {
        position: static !important;
        inset: auto !important;
        transform: none !important;
        width: calc(100% - 24px) !important;
        margin: 0 12px !important;
        align-self: center;
    }
    .main-header.cv-logo-config .geo-badge-wrap {
        display: none !important;
    }
    .main-header.cv-logo-config.scrolled .logo {
        transform: scale(.9) !important;
        transform-origin: center center !important;
    }
}

/* Tableta y "sitio de escritorio" en móvil: misma composición que
   escritorio, reducida proporcionalmente y sin cambiar al flujo flex. */
@media (max-width: 1400px) and (min-width: 769px) {
    .main-header.cv-logo-config {
        height: clamp(100px, calc(16vw - 59px), var(--cv-header-height, 165px)) !important;
        min-height: 100px;
        padding: 0 !important;
        align-items: center;
        border-radius: clamp(30px, calc(5.3vw - 19px), var(--cv-header-radius, 50px)) !important;
        overflow: visible !important;
    }
    .main-header.cv-logo-config .header-container {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        padding: 0 !important;
    }
    .main-header.cv-logo-config .nav-toggle.circular-toggle {
        position: absolute !important;
        left: 18% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: clamp(34px, calc(7.7vw - 43px), 65px) !important;
        height: clamp(34px, calc(7.7vw - 43px), 65px) !important;
        min-width: clamp(34px, calc(7.7vw - 43px), 65px) !important;
        flex-basis: auto !important;
        margin: 0 !important;
    }
    .main-header.cv-logo-config .nav-toggle.circular-toggle .center-letter {
        font-size: clamp(.9rem, calc(3.1vw - 18px), 1.6rem) !important;
    }
    .main-header.cv-logo-config .logo,
    .main-header.cv-logo-config.scrolled .logo {
        position: absolute !important;
        left: var(--logo-left, 40%) !important;
        top: calc(50% + var(--cv-logo-y, 0px)) !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        transform-origin: center center !important;
        display: inline-flex !important;
        width: auto !important;
        max-width: 34vw;
        min-width: 0;
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 0 !important;
        justify-content: center !important;
        overflow: visible !important;
        gap: clamp(4px, calc(2.7vw - 18px), var(--cv-logo-gap-local, var(--cv-logo-gap, 10px))) !important;
    }
    .main-header.cv-logo-config.scrolled .logo {
        transform: translate(-50%, -50%) scale(.82) !important;
    }
    .main-header.cv-logo-config .logo img,
    .main-header.cv-logo-config .logo .logo-dinamico {
        max-height: clamp(44px, calc(13.3vw - 76px), 110px) !important;
        max-width: 16vw !important;
        object-fit: contain;
    }
    .main-header.cv-logo-config .logo .cv-logo-text {
        min-width: 0;
        max-width: none !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
        font-size: clamp(12px, calc(2.9vw - 17px), 24px) !important;
        line-height: 1 !important;
    }
    .main-header.cv-logo-config .header-actions {
        position: absolute !important;
        right: clamp(16px, calc(11.7vw - 104px), 60px) !important;
        left: auto !important;
        top: 50% !important;
        bottom: auto !important;
        transform: translateY(-50%) !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .main-header.cv-logo-config .header-actions .icons-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-end !important;
        gap: clamp(3px, calc(.93vw - 5px), 8px) !important;
    }
    .main-header.cv-logo-config .header-actions .action-btn,
    .main-header.cv-logo-config .header-actions .cart-btn,
    .main-header.cv-logo-config .header-actions .search-trigger-btn {
        width: clamp(30px, calc(3.72vw - 7px), 45px) !important;
        height: clamp(30px, calc(3.72vw - 7px), 45px) !important;
        margin: 0 !important;
        font-size: clamp(1rem, calc(1.28vw + 3px), 1.3rem) !important;
    }
    .main-header.cv-logo-config #icon-info-pill,
    .main-header.cv-logo-config.scrolled #icon-info-pill {
        position: absolute !important;
        right: 0 !important;
        left: auto !important;
        top: calc(100% + 8px) !important;
        bottom: auto !important;
        transform: none !important;
        width: clamp(340px, calc(81.4vw - 473px), 666px) !important;
        margin: 0 !important;
        font-size: clamp(7.5px, calc(1.73vw - 10px), var(--tt-font-size, 14px)) !important;
    }
    .main-header.cv-logo-config .geo-badge-wrap {
        transform-origin: right bottom !important;
    }
}

@media (max-width: 1100px) and (min-width: 769px) {
    .main-header.cv-logo-config .geo-badge-wrap { transform: scale(.62) !important; }
}
@media (max-width: 1250px) and (min-width: 1101px) {
    .main-header.cv-logo-config .geo-badge-wrap { transform: scale(.78) !important; }
}
@media (max-width: 1400px) and (min-width: 1251px) {
    .main-header.cv-logo-config .geo-badge-wrap { transform: scale(.9) !important; }
}

/* Geometria unica de escritorio y tableta.
   El logo conserva siempre el punto horizontal guardado en el panel. La fila
   derecha ocupa las mismas coordenadas relativas a cualquier ancho y reparte
   cada accion en una columna igual, por lo que la lupa ya no salta al cruzar
   1400, 1100 o 900 px. */
@media (min-width: 769px) {
    .main-header.cv-logo-config .logo,
    .main-header.cv-logo-config.scrolled .logo {
        left: var(--logo-left, 40%) !important;
    }

    .main-header.cv-logo-config .header-actions,
    .main-header.cv-logo-config.scrolled .header-actions {
        left: 63.97% !important;
        right: auto !important;
        width: 33.35% !important;
    }

    .main-header.cv-logo-config .header-actions .icons-row {
        display: grid !important;
        grid-auto-flow: column !important;
        grid-auto-columns: minmax(0, 1fr) !important;
        align-items: center !important;
        justify-content: stretch !important;
        width: 100% !important;
        gap: 0 !important;
    }

    /* Cuando hay menos de diez acciones (por ejemplo, sin iniciar sesion),
       se reservan a la izquierda las columnas que faltan. Los iconos reales
       ocupan las ultimas posiciones y mantienen el mismo paso compacto que
       en la cabecera completa, en lugar de estirarse por toda la fila. */
    .main-header.cv-logo-config .icons-row:has(> :nth-child(-n + 9):last-child) {
        grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
        grid-auto-flow: row !important;
    }
    .main-header.cv-logo-config .icons-row:has(> :nth-child(1):last-child) { --cv-empty-action-slots: 9; }
    .main-header.cv-logo-config .icons-row:has(> :nth-child(2):last-child) { --cv-empty-action-slots: 8; }
    .main-header.cv-logo-config .icons-row:has(> :nth-child(3):last-child) { --cv-empty-action-slots: 7; }
    .main-header.cv-logo-config .icons-row:has(> :nth-child(4):last-child) { --cv-empty-action-slots: 6; }
    .main-header.cv-logo-config .icons-row:has(> :nth-child(5):last-child) { --cv-empty-action-slots: 5; }
    .main-header.cv-logo-config .icons-row:has(> :nth-child(6):last-child) { --cv-empty-action-slots: 4; }
    .main-header.cv-logo-config .icons-row:has(> :nth-child(7):last-child) { --cv-empty-action-slots: 3; }
    .main-header.cv-logo-config .icons-row:has(> :nth-child(8):last-child) { --cv-empty-action-slots: 2; }
    .main-header.cv-logo-config .icons-row:has(> :nth-child(9):last-child) { --cv-empty-action-slots: 1; }
    .main-header.cv-logo-config .icons-row:has(> :nth-child(-n + 9):last-child)::before {
        content: "";
        display: block;
        grid-column: span var(--cv-empty-action-slots, 1);
        min-width: 0;
        height: 1px;
    }

    .main-header.cv-logo-config .header-actions .icons-row > * {
        min-width: 0;
        justify-self: center;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .main-header.cv-logo-config .header-actions .search-bar-container,
    .main-header.cv-logo-config .header-actions .cart-wrapper {
        display: grid !important;
        place-items: center;
        width: 100%;
        height: 100%;
        padding: 0 !important;
    }

    .main-header.cv-logo-config .header-actions .action-btn,
    .main-header.cv-logo-config .header-actions .cart-btn,
    .main-header.cv-logo-config .header-actions .search-trigger-btn {
        width: clamp(25px, 3.2vw, 45px) !important;
        height: clamp(25px, 3.2vw, 45px) !important;
        min-width: 0 !important;
        margin: 0 !important;
        font-size: clamp(.88rem, 1.28vw, 1.3rem) !important;
    }

    .main-header.cv-logo-config #icon-info-pill,
    .main-header.cv-logo-config.scrolled #icon-info-pill {
        right: 0 !important;
        width: 109.5% !important;
    }

    /* La lupa escala desde su propio centro; no usa ya los antiguos puntos
       fijos 11/26 px, que la descentraban al reducir el boton. */
    .main-header.cv-logo-config .search-trigger-btn::before {
        width: 42% !important;
        height: 42% !important;
        top: 50% !important;
        left: 50% !important;
        border-width: clamp(1.8px, .19vw, 2.5px) !important;
        box-sizing: border-box;
        transform: translate(-62%, -62%) !important;
    }

    .main-header.cv-logo-config .search-trigger-btn::after {
        width: clamp(2px, 6%, 3px) !important;
        height: 25% !important;
        top: 56% !important;
        left: 60% !important;
        transform: rotate(-45deg) !important;
        transform-origin: 50% 0;
    }

    .main-header.cv-logo-config .search-trigger-btn:hover::before {
        transform: translate(-62%, -62%) scale(1.15) !important;
    }

    .main-header.cv-logo-config .search-trigger-btn.is-active::before {
        transform: translate(-62%, -62%) scale(1.15) rotateY(180deg) !important;
    }
}

/* ============================================================
   HEADER + BUSCADOR ENTRE TABLETA Y ESCRITORIO
   ------------------------------------------------------------
   En este intervalo el header conserva la composicion de escritorio.
   El buscador usa la altura real del header y un fondo solido, evitando
   las franjas laterales y los saltos de 125/135 px de las reglas antiguas.
   ============================================================ */
@media (min-width: 769px) and (max-width: 1400px) {
    html {
        scrollbar-gutter: stable;
    }

    body.search-active .main-header,
    body.search-active .main-header.scrolled {
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        transition: border-radius .2s ease !important;
    }

    #search-overlay,
    body.header-scrolled.search-active #search-overlay {
        height: 100dvh !important;
        padding: var(--header-bottom, 125px) 0 0 !important;
        box-sizing: border-box !important;
        align-items: flex-start !important;
        transition: opacity .25s ease, visibility .25s ease,
                    padding-top .2s ease !important;
    }

    #search-overlay .search-modal,
    body.search-active #search-overlay .search-modal,
    body.header-scrolled.search-active #search-overlay .search-modal {
        width: 97% !important;
        max-width: none !important;
        min-height: min(280px, calc(100dvh - var(--header-bottom, 125px) - 12px)) !important;
        max-height: calc(100dvh - var(--header-bottom, 125px) - 12px) !important;
        margin: 0 auto !important;
        padding: 0 !important;
        background: var(--bg-light, #fff) !important;
        border-radius: 0 0 clamp(30px, 4vw, 50px) clamp(30px, 4vw, 50px) !important;
        box-shadow: 0 28px 55px -28px rgba(20, 32, 55, .28) !important;
        overflow: hidden !important;
        transform: translateY(-12px) scale(.985) !important;
        transform-origin: top center !important;
        opacity: 0;
        transition: transform .28s cubic-bezier(.16, 1, .3, 1), opacity .2s ease !important;
    }

    #search-overlay.active .search-modal,
    body.search-active #search-overlay.active .search-modal,
    body.header-scrolled.search-active #search-overlay.active .search-modal {
        transform: translateY(0) scale(1) !important;
        opacity: 1;
    }

    #search-overlay .search-header,
    body.search-active #search-overlay .search-header,
    body.header-scrolled #search-overlay .search-header {
        width: clamp(420px, 60vw, 760px) !important;
        max-width: calc(100% - 40px) !important;
        margin: clamp(14px, 2vw, 22px) auto 10px !important;
        padding: clamp(11px, 1.35vw, 16px) clamp(16px, 2vw, 26px) !important;
        gap: clamp(10px, 1.4vw, 18px) !important;
        background: rgba(255, 255, 255, .96) !important;
        border: 1px solid rgba(31, 41, 55, .08) !important;
        border-radius: 999px !important;
        box-shadow: 0 7px 22px rgba(25, 39, 65, .06) !important;
        box-sizing: border-box !important;
    }

    #search-overlay #advanced-search-input {
        min-width: 0;
        background: transparent !important;
        font-size: clamp(1rem, 1.6vw, 1.2rem) !important;
    }

    #search-overlay .search-results-container {
        flex: 1 1 auto;
        min-height: 0;
        margin: 0 0 clamp(18px, 3vw, 34px) !important;
        padding: 8px clamp(18px, 4vw, 52px) 18px !important;
        background: transparent !important;
    }

    #search-overlay .no-results {
        padding: clamp(34px, 7vh, 64px) 16px !important;
    }

    [data-theme="dark"] #search-overlay .search-modal,
    [data-theme="dark"] body.search-active #search-overlay .search-modal,
    [data-theme="dark"] body.header-scrolled.search-active #search-overlay .search-modal {
        background: #1c1e26 !important;
        box-shadow: 0 28px 55px -25px rgba(0, 0, 0, .7) !important;
    }

    [data-theme="dark"] #search-overlay .search-header,
    [data-theme="dark"] body.search-active #search-overlay .search-header,
    [data-theme="dark"] body.header-scrolled #search-overlay .search-header {
        background: #262933 !important;
        border-color: rgba(255, 255, 255, .09) !important;
        box-shadow: 0 7px 22px rgba(0, 0, 0, .2) !important;
    }

    [data-theme="dark"] #search-overlay .search-results-container {
        background: transparent !important;
    }
}