/* ============================================================
   NEXO GESTIÓN — STOREFRONT DESIGN SYSTEM v2.0 "TOP TIER"
   Mobile-First, Glassmorphism, Micro-animations, Premium
   ============================================================ */

:root {
    --primary:        #5B4FE8;
    --primary-accent: #7C3AED;
    --primary-dark:   #3B30C9;
    --primary-hover:  #4940D4;
    --primary-light:  #EEF0FF;
    --primary-glow:   rgba(91, 79, 232, 0.22);
    --primary-border: rgba(91, 79, 232, 0.35);
    --hero-gradient:  linear-gradient(135deg,#1A1040 0%,#2D2480 40%,#5B4FE8 80%,#7C6FF5 100%);
    --hero-glow:      radial-gradient(ellipse at 70% 50%,rgba(124,111,245,0.35) 0%,transparent 70%);
    --success:        #10B981;
    --success-light:  #ECFDF5;
    --success-dark:   #065F46;
    --warning:        #F59E0B;
    --warning-light:  #FFFBEB;
    --danger:         #EF4444;
    --danger-light:   #FEF2F2;
    --wa-green:   #25D366;
    --wa-dark:    #128C7E;
    --yape-purple:#742284;
    --plin-cyan:  #00D1D2;
    --bg-page:    #F0F2F8;
    --bg-card:    #FFFFFF;
    --bg-subtle:  #F8FAFC;
    --bg-glass:   rgba(255, 255, 255, 0.72);
    --border-color:  #E2E8F0;
    --border-focus:  #5B4FE8;
    --border-subtle: rgba(226, 232, 240, 0.7);
    --text-primary:   #0F172A;
    --text-secondary: #475569;
    --text-muted:     #94A3B8;
    --text-on-dark:   #FFFFFF;
    --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --radius-xs:   6px;
    --radius-sm:   10px;
    --radius-md:   14px;
    --radius-lg:   20px;
    --radius-xl:   24px;
    --radius-2xl:  32px;
    --radius-full: 9999px;
    --shadow-xs:       0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm:       0 2px 8px rgba(15, 23, 42, 0.06);
    --shadow-md:       0 6px 24px rgba(15, 23, 42, 0.08);
    --shadow-lg:       0 12px 40px rgba(15, 23, 42, 0.10);
    --shadow-xl:       0 20px 60px rgba(15, 23, 42, 0.14);
    --shadow-floating: 0 16px 48px rgba(15, 23, 42, 0.28);
    --shadow-primary:  0 8px 24px rgba(91, 79, 232, 0.30);
    --shadow-success:  0 6px 20px rgba(16, 185, 129, 0.32);
    --shadow-wa:       0 6px 20px rgba(37, 211, 102, 0.28);
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --t-fast:   0.15s;
    --t-normal: 0.22s;
    --t-slow:   0.35s;
}

/* ============================================================
   SISTEMA DE PLANTILLAS Y TEMAS CURADOS (DESIGN TOKENS)
   ============================================================ */

/* 1. PLANTILLA: SOFT BLUSH / GIRLY (Belleza, Cosmética, Moda, Pastelería) */
body[data-theme="soft-blush"],
[data-theme="soft-blush"] {
    --primary:        #D84174;
    --primary-accent: #F4729C;
    --primary-dark:   #B32D59;
    --primary-hover:  #C43465;
    --primary-light:  #FFF0F5;
    --primary-glow:   rgba(216, 65, 116, 0.24);
    --primary-border: rgba(216, 65, 116, 0.35);
    --bg-page:        #FDF7F8;
    --bg-card:        #FFFFFF;
    --bg-subtle:      #FAF0F3;
    --bg-glass:       rgba(255, 255, 255, 0.85);
    --border-color:   #F3DDE3;
    --border-focus:   #D84174;
    --border-subtle:  rgba(243, 221, 227, 0.7);
    --text-primary:   #2D1C23;
    --text-secondary: #6B4F59;
    --text-muted:     #A68A94;
    --font-heading:   'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body:      'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --radius-xs:      8px;
    --radius-sm:      12px;
    --radius-md:      16px;
    --radius-lg:      22px;
    --radius-xl:      28px;
    --radius-2xl:     36px;
    --shadow-primary: 0 8px 24px rgba(216, 65, 116, 0.28);
    --shadow-sm:      0 2px 10px rgba(180, 70, 110, 0.05);
    --shadow-md:      0 8px 26px rgba(180, 70, 110, 0.07);
    --shadow-lg:      0 14px 44px rgba(180, 70, 110, 0.09);
    --hero-gradient:  linear-gradient(135deg, #381221 0%, #6E1B3E 40%, #D84174 80%, #F59EB9 100%);
    --hero-glow:      radial-gradient(ellipse at 70% 50%, rgba(245, 158, 185, 0.35) 0%, transparent 70%);
}

body[data-theme="soft-blush"] .hero-card {
    box-shadow: 0 16px 45px rgba(216, 65, 116, 0.08);
    border-color: rgba(243, 221, 227, 0.85);
}
body[data-theme="soft-blush"] .product-card {
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 20px rgba(216, 65, 116, 0.05);
    border-color: rgba(243, 221, 227, 0.6);
}
body[data-theme="soft-blush"] .product-card:hover {
    box-shadow: 0 12px 32px rgba(216, 65, 116, 0.12);
    border-color: rgba(216, 65, 116, 0.35);
}
body[data-theme="soft-blush"] .category-chip {
    border-radius: var(--radius-full);
}
body[data-theme="soft-blush"] .btn-primary,
body[data-theme="soft-blush"] .btn-open-cart {
    letter-spacing: 0.02em;
}

/* 🎀 Moñito Coquette / Chic en el icono del carrito para Soft Blush */
body[data-theme="soft-blush"] .cart-icon-wrap::before {
    content: '';
    position: absolute;
    top: -12px;
    left: -4px;
    width: 22px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 75'%3E%3Cpath d='M50 34 C42 22 26 12 12 16 C-2 20 -2 38 12 48 C26 58 42 46 50 36 Z' fill='%23F4729C'/%3E%3Cpath d='M50 34 C58 22 74 12 88 16 C102 20 102 38 88 48 C74 58 58 46 50 36 Z' fill='%23F4729C'/%3E%3Cpath d='M44 38 C38 48 30 62 18 70 C24 68 36 60 46 44 Z' fill='%23D84174'/%3E%3Cpath d='M56 38 C62 48 70 62 82 70 C76 68 64 60 54 44 Z' fill='%23D84174'/%3E%3Cellipse cx='50' cy='35' rx='7' ry='6' fill='%23D84174'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 4;
    pointer-events: none;
    filter: drop-shadow(0 2px 4px rgba(216, 65, 116, 0.4));
    animation: bowFloat 2.8s ease-in-out infinite;
}
@keyframes bowFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-2px) rotate(4deg); }
}

body[data-theme="soft-blush"] .btn-open-cart::before {
    content: '🎀';
    font-size: 0.95rem;
    line-height: 1;
    margin-right: 2px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}

/* 2. PLANTILLA: FRESH MINT / NATURE (Orgánico, Salud, Café, Plantas) */
body[data-theme="fresh-mint"],
[data-theme="fresh-mint"] {
    --primary:        #0D8259;
    --primary-accent: #10B981;
    --primary-dark:   #086141;
    --primary-hover:  #0A714D;
    --primary-light:  #ECFDF5;
    --primary-glow:   rgba(13, 130, 89, 0.22);
    --primary-border: rgba(13, 130, 89, 0.35);
    --bg-page:        #F4F7F5;
    --bg-card:        #FFFFFF;
    --bg-subtle:      #EAF2EE;
    --bg-glass:       rgba(255, 255, 255, 0.85);
    --border-color:   #D5E5DC;
    --border-focus:   #0D8259;
    --border-subtle:  rgba(213, 229, 220, 0.7);
    --text-primary:   #13221C;
    --text-secondary: #40544B;
    --text-muted:     #7E988D;
    --font-heading:   'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body:      'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --radius-xs:      6px;
    --radius-sm:      10px;
    --radius-md:      14px;
    --radius-lg:      20px;
    --radius-xl:      24px;
    --radius-2xl:     32px;
    --shadow-primary: 0 8px 24px rgba(13, 130, 89, 0.26);
    --shadow-sm:      0 2px 10px rgba(13, 130, 89, 0.05);
    --shadow-md:      0 8px 26px rgba(13, 130, 89, 0.07);
    --shadow-lg:      0 14px 44px rgba(13, 130, 89, 0.09);
    --hero-gradient:  linear-gradient(135deg, #09261B 0%, #0F4D37 40%, #0D8259 80%, #6EE7B7 100%);
    --hero-glow:      radial-gradient(ellipse at 70% 50%, rgba(110, 231, 183, 0.35) 0%, transparent 70%);
}

body[data-theme="fresh-mint"] .hero-card {
    box-shadow: 0 16px 45px rgba(13, 130, 89, 0.08);
    border-color: rgba(213, 229, 220, 0.85);
}
body[data-theme="fresh-mint"] .product-card:hover {
    box-shadow: 0 12px 32px rgba(13, 130, 89, 0.12);
    border-color: rgba(13, 130, 89, 0.35);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background-color:var(--bg-page);color:var(--text-primary);line-height:1.5;-webkit-font-smoothing:antialiased;padding-bottom:110px;min-height:100dvh}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font-family:inherit;font-size:inherit;border:none;outline:none;background:none}
button{cursor:pointer}
img{display:block;max-width:100%}

.loader-container,.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100dvh;padding:2rem;text-align:center;background:var(--bg-page)}
.spinner-pulse{width:48px;height:48px;border-radius:50%;border:3px solid var(--border-color);border-top-color:var(--primary);animation:spinRing 0.85s linear infinite}
@keyframes spinRing{to{transform:rotate(360deg)}}
.loader-text{margin-top:1.25rem;font-weight:600;color:var(--text-muted);font-size:0.9rem}
.error-card{background:var(--bg-card);padding:2.5rem 2rem;border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);max-width:440px;width:100%;border:1px solid var(--border-color);text-align:center}
.error-card h2{font-family:var(--font-heading);font-size:1.35rem;font-weight:800;margin-bottom:0.5rem}
.error-card p{color:var(--text-secondary);font-size:0.88rem;line-height:1.55}

.store-layout{width:100%;margin:0 auto;position:relative}

.store-hero{position:relative;margin-bottom:0.5rem;width:100%}
.hero-banner{width:100%;height:200px;background:var(--hero-gradient);background-size:cover;background-position:center;position:relative;overflow:hidden}
.hero-banner::before{content:'';position:absolute;inset:0;background:var(--hero-glow);pointer-events:none}
@media(min-width:640px){.hero-banner{height:260px}}
@media(min-width:1024px){.hero-banner{height:300px}}
.hero-banner-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(15,23,42,0.05) 0%,rgba(15,23,42,0.55) 100%)}

.hero-card{background:var(--bg-card);max-width:1100px;margin:-44px 12px 0;padding:1rem 1.25rem;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);border:1px solid var(--border-color);position:relative;z-index:5;display:flex;flex-direction:column;gap:0.875rem}
@media(min-width:640px){.hero-card{margin:-52px 20px 0;padding:1.25rem 1.75rem;flex-direction:row;align-items:center;justify-content:space-between;gap:1.25rem}}
@media(min-width:1140px){.hero-card{margin:-52px auto 0}}

/* Hero Banner Compacto cuando NO hay imagen de portada asignada (Optimización Mobile Above-The-Fold) */
.store-hero.no-banner .hero-banner { height: 75px; }
.store-hero.no-banner .hero-banner-overlay { opacity: 0.15; }
.store-hero.no-banner .hero-card { margin: -32px 12px 0; }
@media(min-width:640px){
    .store-hero.no-banner .hero-banner { height: 100px; }
    .store-hero.no-banner .hero-card { margin: -40px 20px 0; }
}
@media(min-width:1024px){
    .store-hero.no-banner .hero-banner { height: 120px; }
}
@media(min-width:1140px){
    .store-hero.no-banner .hero-card { margin: -48px auto 0; }
}
.hero-card-main{display:flex;gap:1rem;align-items:center}
.store-logo-wrapper{flex-shrink:0}
.store-logo-img,.store-logo-avatar{width:72px;height:72px;border-radius:var(--radius-md);border:2.5px solid var(--border-color);background:#fff;object-fit:cover;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);transition:transform var(--t-normal) var(--ease-spring)}
.store-logo-img:hover,.store-logo-avatar:hover{transform:scale(1.04)}
@media(min-width:640px){.store-logo-img,.store-logo-avatar{width:84px;height:84px}}
.store-logo-avatar{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-accent) 100%);color:#fff;font-family:var(--font-heading);font-size:2.4rem;font-weight:900;text-transform:uppercase;letter-spacing:-0.02em}
.hero-meta{flex-grow:1;min-width:0}
.hero-title-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.hero-title{font-family:var(--font-heading);font-size:1.35rem;font-weight:900;color:var(--text-primary);letter-spacing:-0.025em;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}
@media(min-width:640px){.hero-title{font-size:1.6rem;max-width:360px}}
.verified-badge{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-accent) 100%);color:white;width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 8px var(--primary-glow)}
.hero-desc{color:var(--text-secondary);font-size:0.82rem;margin-top:3px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hero-badges-row{display:flex;gap:6px;margin-top:7px;flex-wrap:wrap;align-items:center}
.status-badge{display:inline-flex;align-items:center;gap:5px;font-size:0.7rem;font-weight:700;padding:4px 10px;border-radius:var(--radius-full)}
.status-badge-open{background:var(--success-light);color:var(--success-dark);border:1px solid rgba(16,185,129,0.25)}
.pulse-dot{width:6px;height:6px;background:var(--success);border-radius:50%;animation:blinkDot 2s infinite;flex-shrink:0}
@keyframes blinkDot{0%,100%{opacity:1;box-shadow:0 0 0 2px rgba(16,185,129,0.3)}50%{opacity:0.4;box-shadow:none}}
.hero-action-right{display:flex;gap:8px;align-items:center;width:100%;flex-wrap:wrap}
@media(min-width:640px){.hero-action-right{width:auto;flex-wrap:nowrap}}
.btn-track-header{background:var(--bg-subtle);color:var(--text-primary);border:1.5px solid var(--border-color);font-size:0.82rem;font-weight:700;padding:9px 14px;border-radius:var(--radius-full);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:all var(--t-fast);box-shadow:var(--shadow-xs);flex:1;white-space:nowrap}
@media(min-width:640px){.btn-track-header{flex:none;width:auto}}
.btn-track-header:hover{background:var(--bg-card);border-color:var(--primary);color:var(--primary);transform:translateY(-1px)}
.btn-track-header:active{transform:scale(0.96)}
.btn-wa-header{background:linear-gradient(135deg,#25D366 0%,#1DA851 100%);color:white;padding:9px 18px;border-radius:var(--radius-full);font-weight:700;font-size:0.82rem;display:inline-flex;align-items:center;gap:7px;box-shadow:var(--shadow-wa);transition:transform var(--t-fast) var(--ease-spring),box-shadow var(--t-fast);flex:1;justify-content:center;white-space:nowrap}
@media(min-width:640px){.btn-wa-header{flex:none;width:auto}}
.btn-wa-header:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 10px 28px rgba(37,211,102,0.40)}
.btn-wa-header:active{transform:scale(0.97)}
.hero-trust-bar{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;max-width:1100px;margin:10px 12px 0}
@media(min-width:640px){.hero-trust-bar{margin:12px 20px 0}}
@media(min-width:1140px){.hero-trust-bar{margin:12px auto 0}}
.trust-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--radius-sm);background:var(--bg-card);border:1px solid var(--border-color);transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.trust-item:hover{border-color:var(--primary-border);box-shadow:var(--shadow-xs)}
.trust-icon{display:flex;align-items:center;justify-content:center;color:var(--primary);flex-shrink:0}
.trust-text{display:flex;flex-direction:column;min-width:0}
.trust-text strong{font-size:0.7rem;font-weight:700;color:var(--text-primary);white-space:nowrap}
.trust-text span{font-size:0.68rem;color:var(--primary);font-weight:700}

.catalog-controls{max-width:1100px;margin:0 auto;padding:0.875rem 12px 0.375rem}
@media(min-width:640px){.catalog-controls{padding:1.125rem 20px 0.5rem}}
.search-box{position:relative;max-width:600px;margin:0 auto 0.875rem}
.search-box input{width:100%;padding:11px 40px 11px 42px;background:var(--bg-card);border:1.5px solid var(--border-color);border-radius:var(--radius-full);font-size:0.9rem;font-weight:500;color:var(--text-primary);box-shadow:var(--shadow-xs);transition:border-color var(--t-normal),box-shadow var(--t-normal),background var(--t-normal)}
.search-box input::placeholder{color:var(--text-muted)}
.search-box input:focus{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-glow);background:#fff}
.search-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none}
.search-clear{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:var(--bg-subtle);color:var(--text-muted);width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.72rem;cursor:pointer;border:1px solid var(--border-color);transition:background var(--t-fast),color var(--t-fast)}
.search-clear:hover{background:var(--border-color);color:var(--text-primary)}
.categories-wrapper{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap;padding-bottom:6px;margin:0 auto;max-width:1000px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.categories-wrapper::-webkit-scrollbar{display:none}
@media(max-width:639px){
    .categories-wrapper{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding:0 4px 6px}
}
.category-chip{background:var(--bg-card);border:1.5px solid var(--border-color);color:var(--text-secondary);padding:7px 16px;border-radius:var(--radius-full);font-size:0.78rem;font-weight:700;white-space:nowrap;cursor:pointer;transition:all var(--t-fast) var(--ease-out);box-shadow:var(--shadow-xs);letter-spacing:0.01em;flex-shrink:0}
.category-chip:hover{border-color:var(--primary-border);color:var(--primary);background:var(--primary-light)}
.category-chip.active{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-accent) 100%);border-color:transparent;color:white;box-shadow:0 4px 14px var(--primary-glow);transform:translateY(-1px)}

/* ── MODO CÍRCULOS DE CATEGORÍA (STORIES) ── */
.categories-wrapper.categories-circles-mode {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding: 6px 6px 12px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
}
.categories-wrapper.categories-circles-mode::-webkit-scrollbar {
    display: none;
}
@media (min-width: 768px) {
    .categories-wrapper.categories-circles-mode {
        justify-content: center;
        flex-wrap: wrap;
        gap: 18px;
    }
}
.category-circle-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    flex-shrink: 0;
    width: 68px;
    text-align: center;
    scroll-snap-align: start;
    user-select: none;
    transition: transform var(--t-fast) var(--ease-out);
    outline: none;
}
.category-circle-item:active {
    transform: scale(0.94);
}
.category-circle-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    padding: 2.5px;
    background: var(--border-color);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    transition: all var(--t-normal) var(--ease-spring);
    position: relative;
}
@media (min-width: 640px) {
    .category-circle-avatar {
        width: 62px;
        height: 62px;
        padding: 3px;
    }
}
.category-circle-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--bg-body);
}
.category-circle-inner.all-icon {
    background: var(--primary-light);
    color: var(--primary);
}
.category-circle-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.category-circle-letter {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--primary);
    font-family: var(--font-heading);
}
.category-circle-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    max-width: 68px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
    transition: color var(--t-fast) var(--ease-out);
}
.category-circle-item.active .category-circle-avatar {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-accent) 100%);
    box-shadow: 0 4px 14px var(--primary-glow);
    transform: translateY(-2px) scale(1.04);
}
.category-circle-item.active .category-circle-label {
    color: var(--primary);
    font-weight: 800;
}
.category-circle-item:hover .category-circle-avatar {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}
body[data-theme="soft-blush"] .category-circle-item.active .category-circle-avatar {
    background: linear-gradient(135deg, #F43F85 0%, #FB7185 100%);
    box-shadow: 0 4px 16px rgba(244, 63, 133, 0.35);
}

/* ── BANNER PROMOCIONAL INTERMEDIO (VITRINA) ── */
.promo-banner-card {
    grid-column: 1 / -1;
    width: 100%;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    margin: 8px 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--border-color);
    transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
    text-decoration: none;
    display: block;
    background: var(--bg-card);
}
.promo-banner-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
}
.promo-banner-card.format-slim {
    width: 100%;
    aspect-ratio: 16 / 4.5;
    height: auto;
}
.promo-banner-card.format-editorial {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
}
.promo-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.promo-banner-badge {
    position: absolute;
    bottom: 10px;
    right: 12px;
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: white;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    pointer-events: none;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.catalog-section{max-width:1100px;margin:0 auto;padding:0.875rem 12px}
@media(min-width:640px){.catalog-section{padding:1.125rem 20px}}
.catalog-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.catalog-title{font-family:var(--font-heading);font-size:1.2rem;font-weight:800;color:var(--text-primary);letter-spacing:-0.02em}
.products-counter{font-size:0.76rem;color:var(--text-muted);font-weight:600;background:var(--bg-subtle);padding:3px 10px;border-radius:var(--radius-full);border:1px solid var(--border-color)}

.empty-results-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3.5rem 1.5rem;
    max-width: 520px;
    margin: 0 auto;
}
.empty-search-mascot-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    position: relative;
}
.empty-results-icon {
    color: var(--text-muted);
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
}
.empty-results-title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 800;
    margin-bottom: 0.4rem;
    color: var(--text-primary);
}
.empty-results-sub {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.45;
    max-width: 440px;
    margin: 0 auto 1.5rem auto;
}
.empty-state-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}
.empty-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--t-fast);
}

.products-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:640px){.products-grid{grid-template-columns:repeat(3,1fr);gap:14px}}
@media(min-width:1024px){.products-grid{grid-template-columns:repeat(4,1fr);gap:16px}}

/* ── CONTROLES DE RENDERIZADO PROGRESIVO Y PAGINACIÓN ────────── */
.catalog-pagination-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 32px auto 40px auto;
    padding: 0 16px;
    max-width: 440px;
    width: 100%;
    position: relative;
    text-align: center;
    box-sizing: border-box;
}

.pagination-progress-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.pagination-progress-info span {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: -0.01em;
}

.pagination-progress-bar {
    width: 190px;
    height: 6px;
    background: var(--border-color);
    border-radius: var(--radius-full);
    overflow: hidden;
    position: relative;
}

.pagination-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary) 0%, var(--primary-accent, #7C3AED) 100%);
    border-radius: var(--radius-full);
    transition: width 0.35s var(--ease-out);
}

.btn-load-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 28px;
    background: var(--bg-card);
    color: var(--primary);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-full);
    font-size: 0.88rem;
    font-weight: 700;
    font-family: var(--font-body);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: all var(--t-normal) var(--ease-spring);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.btn-load-more:hover {
    border-color: var(--primary);
    background: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

.btn-load-more:active {
    transform: scale(0.97);
}

.btn-load-more:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none !important;
}

.btn-load-more-spinner {
    width: 15px;
    height: 15px;
    border: 2px solid var(--primary-border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spinPaginationLoader 0.75s linear infinite;
    display: inline-block;
    vertical-align: middle;
}

@keyframes spinPaginationLoader {
    to { transform: rotate(360deg); }
}

.pagination-end-message {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    box-shadow: var(--shadow-xs);
    animation: fadeInEndMsg 0.3s var(--ease-out);
}

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

.catalog-scroll-sentinel {
    height: 12px;
    width: 100%;
    margin-top: 8px;
    pointer-events: none;
    opacity: 0;
}


.product-card{background:var(--bg-card);border-radius:var(--radius-md);border:1.5px solid var(--border-color);overflow:visible;display:flex;flex-direction:column;cursor:pointer;transition:transform var(--t-normal) var(--ease-spring),box-shadow var(--t-normal) var(--ease-out),border-color var(--t-fast);box-shadow:var(--shadow-sm);position:relative;will-change:transform}
.product-card:hover{transform:translateY(-4px) scale(1.01);box-shadow:0 16px 40px rgba(91,79,232,0.14);border-color:var(--primary-border)}
.product-card:active{transform:scale(0.98);transition-duration:var(--t-fast)}


.product-thumb-container{position:relative;width:100%;aspect-ratio:1/1;background:linear-gradient(160deg,#F8FAFC 0%,#F0F2F8 100%);overflow:hidden;border-radius:calc(var(--radius-md) - 1.5px) calc(var(--radius-md) - 1.5px) 0 0;display:flex;align-items:center;justify-content:center;flex-shrink:0}
@media(min-width:640px){.product-thumb-container{aspect-ratio:1/1}}
.product-img-element{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--ease-out);will-change:transform}
.product-card:hover .product-img-element{transform:scale(1.07)}

.product-placeholder-box{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:linear-gradient(160deg,#F8FAFC 0%,#EEF0FF 100%);color:#CBD5E1;transition:background var(--t-normal)}
.product-placeholder-box svg{width:42px;height:42px;stroke:#CBD5E1;transition:stroke var(--t-normal),transform var(--t-normal) var(--ease-spring)}
.product-placeholder-box span{font-size:0.65rem;font-weight:700;color:#CBD5E1;letter-spacing:0.06em;text-transform:uppercase}
.product-card:hover .product-placeholder-box{background:linear-gradient(160deg,#EEF0FF 0%,#E0E7FF 100%)}
.product-card:hover .product-placeholder-box svg{stroke:var(--primary);transform:scale(1.12) rotate(-3deg)}

.product-thumb-bottom-badges {
    position: absolute;
    bottom: 8px;
    left: 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-start;
    z-index: 4;
    pointer-events: none;
}

.stock-tag-pill {
    position: absolute;
    bottom: 8px;
    left: 8px;
    font-size: 0.62rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    z-index: 4;
    border: 1px solid rgba(255,255,255,0.25);
    box-shadow: 0 2px 8px rgba(0,0,0,0.14);
}
.product-thumb-bottom-badges .stock-tag-pill,
.product-thumb-bottom-badges .flash-timer-pill {
    position: static;
}
.stock-tag-pill.in-stock{background:rgba(16,185,129,0.88);color:white}
.stock-tag-pill.low-stock{background:rgba(245,158,11,0.90);color:white}
.stock-tag-pill.low-stock.boutique-style{background:linear-gradient(135deg,rgba(124,58,237,0.95) 0%,rgba(217,70,239,0.95) 100%);color:#FFFFFF;border-color:rgba(255,255,255,0.35);text-transform:none;font-weight:700}
.stock-tag-pill.low-stock.sobrio-style{background:rgba(51,65,85,0.92);color:#F8FAFC;border-color:rgba(255,255,255,0.20);text-transform:none;font-weight:700}
.stock-tag-pill.low-stock.custom-style{text-transform:none;font-weight:700}
.stock-tag-pill.out-stock{background:rgba(239,68,68,0.92);color:white}
.stock-tag-pill.pickup-only{background:rgba(15,23,42,0.92);color:#FEF3C7;border:1px solid rgba(245,158,11,0.45);display:inline-flex;align-items:center;gap:3px;box-shadow:0 2px 8px rgba(0,0,0,0.22)}

/* ── RIBBON 3D PLEGADO LATERAL (OPCIÓN 2 - SAAS MULTI-NEGOCIO) ────────── */
.product-ribbon-3d{position:absolute;top:10px;left:-7px;background:linear-gradient(135deg,#E11D48 0%,#BE123C 100%);color:#FFFFFF;padding:3px 8px 3px 8px;font-size:0.62rem;font-weight:800;letter-spacing:0.04em;text-transform:uppercase;border-radius:0 6px 6px 0;box-shadow:0 4px 12px rgba(225,29,72,0.38),0 2px 4px rgba(0,0,0,0.12);z-index:10;display:inline-flex;align-items:center;gap:5px;transition:transform var(--t-fast) var(--ease-spring),box-shadow var(--t-fast);pointer-events:none;line-height:1.2}
.product-ribbon-3d::after{content:'';position:absolute;bottom:-6px;left:0;width:0;height:0;border-top:6px solid #71091E;border-left:7px solid transparent}
.product-card:hover .product-ribbon-3d{transform:translateX(2px) scale(1.03);box-shadow:0 6px 16px rgba(225,29,72,0.48)}
.ribbon-3d-text{font-weight:900;font-size:0.60rem;letter-spacing:0.05em}
.ribbon-3d-tag{background:#FFFFFF;color:#E11D48;padding:2px 5px;border-radius:4px;font-size:0.62rem;font-weight:900;letter-spacing:-0.01em;box-shadow:0 1px 3px rgba(0,0,0,0.12)}
.product-ribbon-3d.flash-ribbon{background:linear-gradient(135deg,#EA580C 0%,#C2410C 100%);box-shadow:0 4px 12px rgba(234,88,12,0.40)}
.product-ribbon-3d.flash-ribbon::after{border-top-color:#7C2D12}
.product-ribbon-3d.flash-ribbon .ribbon-3d-tag{color:#EA580C}

/* Fallback badge */
.discount-tag-pill{position:absolute;top:8px;right:8px;font-size:0.62rem;font-weight:900;padding:3px 8px;border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:0.04em;background:linear-gradient(135deg,#FF3B30 0%,#FF6B00 100%);color:white;z-index:2;border:1px solid rgba(255,255,255,0.30);box-shadow:0 2px 10px rgba(255,59,48,0.35);animation:glowDiscount 2s infinite ease-in-out}
@keyframes glowDiscount{0%,100%{box-shadow:0 2px 8px rgba(255,59,48,0.35)}50%{box-shadow:0 4px 14px rgba(255,59,48,0.60)}}

.featured-tag-pill{position:absolute;bottom:8px;left:8px;font-size:0.6rem;font-weight:800;padding:2px 7px;border-radius:var(--radius-full);background:rgba(245,158,11,0.92);color:white;z-index:2;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 2px 6px rgba(0,0,0,0.14)}

.product-details{padding:10px 11px 11px;display:flex;flex-direction:column;flex-grow:1;justify-content:space-between;gap:6px}
.product-brand-tag{font-size:0.62rem;font-weight:800;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.07em;line-height:1}
.product-name-title{font-family:var(--font-heading);font-size:0.87rem;font-weight:700;color:var(--text-primary);line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.2em;margin:1px 0 0}
.product-variant-hint{display:inline-flex;align-items:center;gap:4px;font-size:0.68rem;font-weight:600;color:var(--text-muted);margin:3px 0 0;letter-spacing:0.01em;line-height:1}
.product-variant-hint svg{flex-shrink:0;color:var(--primary);stroke:var(--primary)}
.product-footer-row{display:flex;align-items:center;justify-content:space-between;margin-top:auto}
.product-prices-block{display:flex;flex-direction:column;line-height:1.15}
.product-old-price{font-size:0.75rem;color:var(--text-muted);text-decoration:line-through;font-weight:600}
.product-price-display{font-family:var(--font-heading);font-size:0.96rem;font-weight:800;color:var(--text-primary);letter-spacing:-0.02em}
.product-price-display.offer{color:#E11D48;font-weight:900}
.price-from-prefix{font-size:0.72rem;font-weight:700;color:var(--text-muted);text-transform:none;letter-spacing:0;margin-right:2px}
.btn-add-action{width:32px;height:32px;border-radius:50%;background:var(--primary-light);color:var(--primary);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background var(--t-fast),color var(--t-fast),transform var(--t-fast) var(--ease-spring),box-shadow var(--t-fast);flex-shrink:0;padding:0;margin:0;border:none;box-sizing:border-box}
.btn-add-action svg{display:block;margin:auto;pointer-events:none}
.btn-add-action.disabled{opacity:0.4;cursor:not-allowed;pointer-events:none;background:var(--border-color);color:var(--text-muted)}
.product-card:hover .btn-add-action:not(.disabled),.btn-add-action:not(.disabled):hover{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-accent) 100%);color:white;transform:scale(1.12) rotate(90deg);box-shadow:0 4px 12px var(--primary-glow)}
.btn-add-action:not(.disabled):active{transform:scale(0.9)}

.floating-cart-bar{position:fixed;bottom:16px;left:14px;right:14px;max-width:480px;margin:0 auto;z-index:90;animation:slideUpBar 0.3s var(--ease-spring)}
@keyframes slideUpBar{from{transform:translateY(90px);opacity:0}to{transform:translateY(0);opacity:1}}
.cart-bar-pill{background:linear-gradient(135deg,#0F172A 0%,#1E293B 100%);border-radius:var(--radius-full);padding:9px 10px 9px 16px;display:flex;align-items:center;justify-content:space-between;box-shadow:var(--shadow-floating);cursor:pointer;transition:transform var(--t-fast) var(--ease-spring),box-shadow var(--t-fast);border:1px solid rgba(255,255,255,0.08);position:relative;overflow:hidden}
.cart-bar-pill::before{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(91,79,232,0.12) 0%,transparent 60%);pointer-events:none}
.cart-bar-pill:hover{transform:scale(1.02) translateY(-1px);box-shadow:0 20px 60px rgba(15,23,42,0.40)}
.cart-bar-pill:active{transform:scale(0.98)}
.cart-bar-left{display:flex;align-items:center;gap:12px}
.cart-icon-wrap{position:relative;color:#fff;display:flex;align-items:center}
.cart-pill-count{position:absolute;top:-7px;right:-10px;background:var(--danger);color:white;font-size:0.6rem;font-weight:900;padding:1px 5px;border-radius:var(--radius-full);min-width:17px;text-align:center;border:1.5px solid #1E293B}
.cart-bar-info{display:flex;flex-direction:column;line-height:1.2}
.cart-bar-sub{font-size:0.66rem;color:#64748B;font-weight:600;text-transform:uppercase;letter-spacing:0.05em}
.cart-bar-amount{font-family:var(--font-heading);font-size:1rem;font-weight:800;color:#fff;letter-spacing:-0.02em}
.btn-open-cart{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-accent) 100%);color:white;padding:8px 16px;border-radius:var(--radius-full);font-weight:700;font-size:0.8rem;display:flex;align-items:center;gap:5px;box-shadow:0 4px 12px var(--primary-glow);transition:transform var(--t-fast) var(--ease-spring);flex-shrink:0}
.btn-open-cart:hover{transform:translateX(2px)}

.modal-overlay,.drawer-overlay{position:fixed;inset:0;background:rgba(15,23,42,0.60);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:9999;display:flex;align-items:flex-end;justify-content:center;cursor:pointer}
@media(min-width:640px){.modal-overlay,.drawer-overlay{align-items:center}}
.modal-card{background:var(--bg-card);width:100%;max-width:500px;border-radius:var(--radius-xl) var(--radius-xl) 0 0;padding:0 1.25rem 1.5rem;max-height:92dvh;overflow-y:auto;position:relative;cursor:default;animation:sheetSlideUp 0.32s var(--ease-out);overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.modal-card-product{padding:0 0 1.5rem;overflow-x:hidden}
@media(min-width:640px){.modal-card{border-radius:var(--radius-xl);padding:0 1.5rem 1.75rem;max-height:90vh;box-shadow:var(--shadow-xl);animation:modalFadeIn 0.25s var(--ease-out)}.modal-card-product{padding:0 0 1.75rem}}
@keyframes sheetSlideUp{from{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes modalFadeIn{from{transform:translateY(16px) scale(0.98);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}

.modal-drag-pill{width:40px;height:4px;border-radius:2px;background:var(--border-color);margin:12px auto 16px}
@media(min-width:640px){.modal-drag-pill{display:none}}

.modal-close-btn,.drawer-close-btn{position:absolute;top:14px;right:14px;background:rgba(255,255,255,0.85);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--text-secondary);width:36px;height:36px;border-radius:50%;font-size:0.9rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:20;transition:background var(--t-fast),transform var(--t-fast) var(--ease-spring),color var(--t-fast);border:1.5px solid var(--border-color);box-shadow:var(--shadow-sm)}
.modal-close-btn:hover,.drawer-close-btn:hover{background:#ffffff;color:var(--text-primary);transform:scale(1.08) rotate(90deg);box-shadow:var(--shadow-md)}
.modal-close-btn:active,.drawer-close-btn:active{transform:scale(0.92)}

/* ── GALERÍA DE FOTOS PROTAGONISTA (EDGE-TO-EDGE 100% & LIGHTBOX) ── */
.modal-gallery-wrapper{position:relative;width:100%;background:linear-gradient(160deg,#F8FAFC 0%,#EEF2F6 100%);border-bottom:1px solid var(--border-color);overflow:hidden;border-radius:var(--radius-xl) var(--radius-xl) 0 0}
.modal-gallery-container{position:relative;width:100%;aspect-ratio:1/1;max-height:460px;overflow:hidden;touch-action:pan-y;user-select:none;display:flex;align-items:center;justify-content:center}
@media(min-width:640px){.modal-gallery-container{max-height:480px}}
.modal-gallery-track{display:flex;width:100%;height:100%;transition:transform 0.35s cubic-bezier(0.25,1,0.5,1);will-change:transform}
.modal-gallery-slide{flex:0 0 100%;width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative;user-select:none;-webkit-user-drag:none;background:inherit;cursor:zoom-in;padding:0;box-sizing:border-box}
.modal-gallery-slide img{width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:auto;-webkit-user-drag:none;transition:transform var(--t-fast) var(--ease-spring)}
.modal-gallery-slide:hover img{transform:scale(1.03)}

/* Botón Flotante de Zoom / Pantalla Completa en la Galería */
.gallery-zoom-btn{position:absolute;top:14px;left:14px;background:rgba(255,255,255,0.60);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--text-secondary);width:36px;height:36px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:15;transition:background var(--t-fast),transform var(--t-fast) var(--ease-spring),color var(--t-fast),box-shadow var(--t-fast);border:1px solid rgba(255,255,255,0.70);box-shadow:0 2px 10px rgba(0,0,0,0.06);padding:0}
.gallery-zoom-btn:hover{background:rgba(255,255,255,0.95);color:var(--primary);transform:scale(1.08);box-shadow:var(--shadow-md)}
.gallery-zoom-btn:active{transform:scale(0.92)}

/* Botón Flotante de Compartir Producto en la Galería */
.gallery-share-btn{position:absolute;top:14px;left:56px;background:rgba(255,255,255,0.60);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--text-secondary);width:36px;height:36px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:15;transition:background var(--t-fast),transform var(--t-fast) var(--ease-spring),color var(--t-fast),box-shadow var(--t-fast);border:1px solid rgba(255,255,255,0.70);box-shadow:0 2px 10px rgba(0,0,0,0.06);padding:0}
.gallery-share-btn:hover{background:rgba(255,255,255,0.95);color:var(--primary);transform:scale(1.08);box-shadow:var(--shadow-md)}
.gallery-share-btn:active{transform:scale(0.92)}

/* Botones de Navegación de Galería con Glassmorphism y Auto-Hide */
.gallery-nav-btn{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,0.48);color:var(--text-primary);border:1px solid rgba(255,255,255,0.65);box-shadow:0 4px 16px rgba(0,0,0,0.08);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:12;opacity:0;pointer-events:none;transition:opacity 0.32s cubic-bezier(0.16,1,0.3,1),background var(--t-fast),border-color var(--t-fast),color var(--t-fast),transform var(--t-fast) var(--ease-spring),box-shadow var(--t-fast);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.modal-gallery-wrapper.nav-visible .gallery-nav-btn,
.modal-gallery-wrapper:hover .gallery-nav-btn{opacity:1;pointer-events:auto}
.gallery-nav-btn:hover{background:rgba(255,255,255,0.92);border-color:var(--primary-border);color:var(--primary);transform:translateY(-50%) scale(1.1);box-shadow:0 6px 22px rgba(91,79,232,0.22)}
.gallery-nav-btn:active{transform:translateY(-50%) scale(0.94)}
.gallery-nav-btn.prev{left:10px}
.gallery-nav-btn.next{right:10px}
.gallery-nav-btn:disabled{opacity:0!important;pointer-events:none!important}

/* ── LIGHTBOX / VISOR DE IMAGEN A PANTALLA COMPLETA ──────────────── */
.lightbox-overlay{position:fixed;inset:0;background:rgba(11,15,25,0.96);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);z-index:100050;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:default;animation:lightboxFadeIn 0.22s var(--ease-out);user-select:none;-webkit-user-select:none;touch-action:none;overflow:hidden}
@keyframes lightboxFadeIn{from{opacity:0;transform:scale(0.98)}to{opacity:1;transform:scale(1)}}
.lightbox-top-bar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:14px 18px;z-index:30;pointer-events:auto;background:linear-gradient(180deg,rgba(11,15,25,0.85) 0%,transparent 100%)}
.lightbox-counter-badge{color:rgba(255,255,255,0.90);font-size:0.82rem;font-weight:700;letter-spacing:0.05em;background:rgba(255,255,255,0.12);padding:5px 12px;border-radius:var(--radius-full);border:1px solid rgba(255,255,255,0.18);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lightbox-actions{display:flex;align-items:center;gap:10px}
.lightbox-btn{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.22);color:#ffffff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background var(--t-fast),transform var(--t-fast) var(--ease-spring),color var(--t-fast);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:0}
.lightbox-btn:hover{background:rgba(255,255,255,0.28);transform:scale(1.08);color:#ffffff}
.lightbox-btn:active{transform:scale(0.92)}
.lightbox-btn.close{background:rgba(239,68,68,0.25);border-color:rgba(239,68,68,0.45);color:#FCA5A5}
.lightbox-btn.close:hover{background:rgba(239,68,68,0.45);color:#ffffff}

.lightbox-body{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:0;box-sizing:border-box;overflow:hidden;touch-action:none}
.lightbox-img-wrapper{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;overflow:hidden;touch-action:none}
.lightbox-img{max-width:92vw;max-height:82vh;width:auto;height:auto;object-fit:contain;border-radius:10px;box-shadow:0 25px 60px -10px rgba(0,0,0,0.7);cursor:zoom-in;will-change:transform;-webkit-user-drag:none;transform-origin:center center;transition:transform 0.28s cubic-bezier(0.2,0.8,0.2,1)}
.lightbox-img.is-zoomed{cursor:grab}
.lightbox-img.is-dragging{cursor:grabbing;transition:none!important}

.lightbox-nav-btn{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.22);color:#ffffff;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:25;transition:all var(--t-fast) var(--ease-spring);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:0}
.lightbox-nav-btn:hover{background:rgba(255,255,255,0.28);color:#ffffff;transform:translateY(-50%) scale(1.1)}
.lightbox-nav-btn:active{transform:translateY(-50%) scale(0.92)}
.lightbox-nav-btn.prev{left:14px}
.lightbox-nav-btn.next{right:14px}
.lightbox-nav-btn:disabled{opacity:0.2;pointer-events:none}
.lightbox-overlay.is-zoomed .lightbox-nav-btn{opacity:0.15;pointer-events:none}

.lightbox-hint-footer{position:absolute;bottom:14px;left:0;right:0;text-align:center;color:rgba(255,255,255,0.75);font-size:0.75rem;font-weight:500;letter-spacing:0.03em;pointer-events:none;z-index:20}
.lightbox-hint-footer span{background:rgba(15,23,42,0.65);padding:5px 14px;border-radius:var(--radius-full);border:1px solid rgba(255,255,255,0.15);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
@media(max-width:640px){
    .lightbox-nav-btn{width:38px;height:38px}
    .lightbox-nav-btn.prev{left:8px}
    .lightbox-nav-btn.next{right:8px}
    .lightbox-top-bar{padding:12px 14px}
}

.modal-gallery-dots{display:flex;justify-content:center;align-items:center;gap:6px;position:absolute;bottom:10px;left:0;right:0;z-index:10;pointer-events:none}
.gallery-dot{width:7px;height:7px;border-radius:50%;background:rgba(15,23,42,0.25);border:none;padding:0;cursor:pointer;pointer-events:auto;transition:all var(--t-fast) var(--ease-out)}
.gallery-dot.active{width:22px;border-radius:4px;background:var(--primary);box-shadow:0 0 8px var(--primary-glow)}

/* Miniaturas de la Galería del Modal */
.modal-gallery-thumbs{display:flex;align-items:center;gap:8px;padding:8px 14px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;background:#ffffff;border-bottom:1px solid var(--border-color)}
.modal-gallery-thumbs::-webkit-scrollbar{height:4px}
.modal-gallery-thumbs::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.15);border-radius:4px}
.gallery-thumb-btn{flex:0 0 52px;width:52px;height:52px;border-radius:var(--radius-sm, 8px);border:2px solid transparent;overflow:hidden;cursor:pointer;background:#F1F5F9;padding:0;transition:all var(--t-fast) var(--ease-spring);box-sizing:border-box}
.gallery-thumb-btn:hover{border-color:var(--primary-border);transform:scale(1.04)}
.gallery-thumb-btn.active{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary), 0 2px 8px rgba(0,0,0,0.12);transform:scale(1.06)}
.gallery-thumb-btn img{width:100%;height:100%;object-fit:cover;display:block}

/* ── CATEGORÍA EN MODAL DE PRODUCTO (BADGE MINIMALISTA) ── */
.modal-prod-category-wrapper{display:flex;align-items:center;margin-bottom:8px}
.modal-prod-category-tag{
    font-size:0.72rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:0.06em;
    color:var(--primary);
    background:var(--primary-light);
    border:1px solid var(--primary-border);
    padding:3px 10px;
    border-radius:var(--radius-full);
    display:inline-flex;
    align-items:center;
}

/* ── LAYOUT BASE DEL MODAL (MOBILE POR DEFECTO) ── */
.modal-product-layout{display:flex;flex-direction:column;width:100%}
.modal-product-media-col{width:100%;position:relative}
.modal-product-info-col{width:100%;display:flex;flex-direction:column}

.modal-product-header-info{padding:1.1rem 1.25rem 0.25rem}
@media(min-width:640px){.modal-product-header-info{padding:1.25rem 1.5rem 0.25rem}}
.modal-tag-cat{font-size:0.68rem;color:var(--text-muted);font-weight:700;text-transform:uppercase;letter-spacing:0.07em;display:block;margin-bottom:3px}
.modal-prod-title{font-family:var(--font-heading);font-size:1.15rem;font-weight:800;color:var(--text-primary);line-height:1.25;letter-spacing:-0.02em}
.modal-price-stock-row{display:flex;align-items:center;justify-content:space-between;margin-top:6px;gap:8px}
.modal-price-stack{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px}
.modal-old-price{font-size:0.95rem;color:var(--text-muted);text-decoration:line-through;font-weight:700}
.modal-prod-price{font-family:var(--font-heading);font-size:1.35rem;font-weight:900;color:var(--primary);letter-spacing:-0.03em}
.modal-prod-price.offer{color:#E11D48;font-weight:900}
.modal-discount-pill{font-size:0.68rem;font-weight:900;padding:3px 8px;border-radius:var(--radius-full);background:linear-gradient(135deg,#FF3B30 0%,#FF6B00 100%);color:white;letter-spacing:0.04em;text-transform:uppercase;box-shadow:0 2px 8px rgba(255,59,48,0.30);align-self:center}

.stock-status-pill{font-size:0.72rem;font-weight:700;padding:4px 10px;border-radius:var(--radius-full);letter-spacing:0.02em;white-space:nowrap}
.stock-status-pill.in-stock{background:var(--success-bg);color:var(--success);border:1px solid rgba(16,185,129,0.20)}
.stock-status-pill.out-stock{background:var(--danger-bg);color:var(--danger);border:1px solid rgba(239,68,68,0.20)}
.stock-status-pill.low-stock{background:var(--warning-bg);color:var(--warning);border:1px solid rgba(245,158,11,0.20)}
.stock-status-pill.low-stock.boutique-style{background:rgba(245,243,255,0.95);color:#7C3AED;border:1px solid rgba(124,58,237,0.28)}
.stock-status-pill.low-stock.sobrio-style{background:#F1F5F9;color:#334155;border:1px solid #CBD5E1}
.stock-status-pill.low-stock.custom-style{font-weight:700}

.chip-discount-tag{font-size:0.65rem;background:#FEE2E2;color:#DC2626;padding:1px 5px;border-radius:4px;font-weight:800;margin-left:2px}
.cart-item-old-price{font-size:0.75rem;color:var(--text-muted);text-decoration:line-through;margin-right:4px;font-weight:600}
.cart-savings-badge{font-size:0.7rem;color:#059669;background:#ECFDF5;padding:2px 6px;border-radius:4px;font-weight:700;display:inline-block;margin-top:2px}

/* ── AVISO DE SOLO RECOJO EN MODAL DE PRODUCTO ───────────────────────── */
.modal-pickup-only-notice{display:flex;align-items:center;gap:8px;margin:8px 0 2px;padding:8px 12px;background:#FEF3C7;border:1.5px solid #FCD34D;border-radius:var(--radius-sm);color:#92400E;font-size:0.80rem;font-weight:600;line-height:1.35;animation:fadeIn 0.25s ease}
.modal-pickup-only-notice svg{flex-shrink:0;stroke:#D97706}

.modal-content-body{padding:0.75rem 1.25rem 0}
@media(min-width:640px){.modal-content-body{padding:0.75rem 1.5rem 0}}
.modal-prod-description{color:var(--text-secondary);font-size:0.84rem;line-height:1.5;margin-bottom:1rem;padding:10px 12px;background:var(--bg-subtle);border-radius:var(--radius-sm);border:1px solid var(--border-color)}
.modal-variants-block,.modal-quantity-block{margin-top:1rem}
.modal-field-label{display:block;font-size:0.76rem;font-weight:800;color:var(--text-secondary);margin-bottom:8px;text-transform:uppercase;letter-spacing:0.05em}
.variant-chips-grid{display:flex;flex-wrap:wrap;gap:7px}
.variant-select-chip{background:var(--bg-card);border:1.5px solid var(--border-color);color:var(--text-primary);padding:8px 14px;border-radius:var(--radius-sm);font-size:0.82rem;font-weight:700;cursor:pointer;transition:all var(--t-fast) var(--ease-out);letter-spacing:0.01em;display:inline-flex;align-items:center;gap:6px}
.variant-select-chip:hover:not(:disabled){border-color:var(--primary);color:var(--primary);background:var(--primary-light);transform:translateY(-1px)}
.variant-select-chip.selected{background:linear-gradient(135deg,var(--primary-light) 0%,#E0E7FF 100%);border-color:var(--primary);color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow)}
.variant-select-chip:disabled{opacity:0.40;cursor:not-allowed;text-decoration:line-through}

/* ── BADGE DE COLORES EN CARD DE CATÁLOGO ── */
.product-colors-badge{position:absolute;bottom:8px;right:8px;background:rgba(15,23,42,0.85);color:#fff;font-size:0.62rem;font-weight:800;padding:3px 8px;border-radius:var(--radius-full);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,0.20);display:flex;align-items:center;gap:4px;z-index:2;box-shadow:0 2px 8px rgba(0,0,0,0.18);letter-spacing:0.02em}

.qty-control-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.qty-pill-control{display:inline-flex;align-items:center;background:var(--bg-subtle);border-radius:var(--radius-full);padding:4px;border:1.5px solid var(--border-color);transition:border-color var(--t-fast)}
.btn-qty-step{width:32px;height:32px;border-radius:50%;background:var(--bg-card);color:var(--text-primary);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-xs);transition:all var(--t-fast) var(--ease-spring);border:1.5px solid var(--border-color);flex-shrink:0;padding:0;margin:0;box-sizing:border-box}
.btn-qty-step svg{display:block;margin:auto;pointer-events:none}
.btn-qty-step:hover:not(.is-disabled){background:var(--primary);color:white;border-color:var(--primary);transform:scale(1.1);box-shadow:0 4px 12px var(--primary-glow)}
.btn-qty-step:active:not(.is-disabled){transform:scale(0.9)}
.btn-qty-step.is-disabled{opacity:0.35;cursor:not-allowed;background:var(--bg-subtle);border-color:var(--border-color)}
.btn-qty-step.is-disabled:hover{background:var(--bg-subtle);color:var(--text-primary);border-color:var(--border-color);transform:none;box-shadow:none}
.qty-display-number{font-family:var(--font-heading);font-weight:800;padding:0 18px;font-size:1rem;color:var(--text-primary);min-width:48px;text-align:center;letter-spacing:-0.02em}
.qty-stock-hint{font-size:0.75rem;font-weight:700;color:var(--text-secondary);background:var(--bg-subtle);padding:5px 12px;border-radius:var(--radius-full);border:1px solid var(--border-color);display:inline-flex;align-items:center;gap:4px;animation:fadeIn 0.2s ease-out;line-height:1.2}
.qty-stock-hint.is-single{color:#7C3AED;background:rgba(124,58,237,0.08);border-color:rgba(124,58,237,0.22)}
@keyframes qtyShake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
.qty-pill-control.qty-shake{animation:qtyShake 0.38s ease-in-out;border-color:#F59E0B !important}
.modal-footer-cta{margin-top:1.25rem;margin-bottom:0.5rem;padding:0;width:100%}
@media(min-width:640px){.modal-footer-cta{padding:0}}

/* ── REDISEÑO DEL MODAL EN PANTALLAS GRANDES (DESKTOP SPLIT VIEW >= 860PX) ── */
@media(min-width:860px){
    .modal-card.modal-card-product{
        max-width:900px;
        width:92vw;
        max-height:88vh;
        padding:0;
        border-radius:var(--radius-xl);
        overflow:hidden;
        display:flex;
        flex-direction:column;
    }
    .modal-product-layout{
        display:grid;
        grid-template-columns:430px 1fr;
        min-height:520px;
        max-height:88vh;
        width:100%;
        overflow:hidden;
    }
    .modal-product-media-col{
        background:linear-gradient(160deg,#F8FAFC 0%,#F1F5F9 100%);
        border-right:1px solid var(--border-color);
        display:flex;
        flex-direction:column;
        justify-content:flex-start;
        align-items:stretch;
        position:relative;
        height:100%;
        overflow-y:auto;
        scrollbar-width:thin;
    }
    .modal-product-media-col .modal-gallery-wrapper{
        border-bottom:none;
        border-radius:0;
        background:transparent;
    }
    .modal-product-media-col .modal-gallery-container{
        max-height:430px;
        aspect-ratio:1/1;
    }
    .modal-product-media-col .modal-gallery-thumbs{
        background:rgba(255,255,255,0.85);
        -webkit-backdrop-filter:blur(8px);
        backdrop-filter:blur(8px);
        border-top:1px solid var(--border-color);
        border-bottom:none;
        padding:10px 16px;
    }
    .modal-product-info-col{
        display:flex;
        flex-direction:column;
        height:100%;
        max-height:88vh;
        overflow-y:auto;
        padding:1.5rem 1.75rem 1.25rem;
        box-sizing:border-box;
        scrollbar-width:thin;
    }
    .modal-product-info-col .modal-product-header-info{
        padding:0 0 0.5rem 0;
    }
    .modal-product-info-col .modal-content-body{
        padding:0;
        flex:1 0 auto;
        display:flex;
        flex-direction:column;
    }
    .modal-product-info-col .modal-footer-cta{
        padding:0;
        margin-top:1.25rem;
        margin-bottom:0.75rem;
        border-top:none;
        background:transparent;
        position:relative;
        bottom:auto;
        z-index:1;
    }
    .modal-product-info-col .modal-prod-title{
        font-size:1.35rem;
    }
    .modal-product-info-col .modal-prod-price{
        font-size:1.55rem;
    }
}

/* ── STICKY BOTTOM ACTION BAR (PDP SCROLL REVEAL) ─────────────────────── */
.modal-sticky-action-bar {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 125%);
    width: 100%;
    max-width: 500px;
    z-index: 10002;
    background: var(--bg-card, rgba(255, 255, 255, 0.96));
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-top: 1.5px solid var(--border-color, #E2E8F0);
    box-shadow: 0 -8px 30px rgba(15, 23, 42, 0.12);
    padding: 10px 16px;
    padding-bottom: max(10px, env(safe-area-inset-bottom, 10px));
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.24s ease;
    opacity: 0;
    pointer-events: none;
    box-sizing: border-box;
}

.modal-sticky-action-bar.is-visible {
    transform: translate(-50%, 0);
    opacity: 1;
    pointer-events: auto;
}

.sticky-action-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.sticky-action-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.sticky-action-thumb {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm, 8px);
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--border-color, #E2E8F0);
    background: var(--bg-subtle, #F8FAFC);
}

.sticky-action-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.sticky-action-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-primary, #0F172A);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
}

.sticky-action-price-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 2px;
}

.sticky-action-price {
    font-family: var(--font-heading, sans-serif);
    font-size: 1.08rem;
    font-weight: 900;
    color: var(--primary, #4F46E5);
    letter-spacing: -0.02em;
}

.sticky-action-variant {
    font-size: 0.72rem;
    color: var(--text-muted, #64748B);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sticky-action-right {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sticky-btn-add {
    padding: 10px 18px;
    font-size: 0.84rem;
    font-weight: 800;
    border-radius: var(--radius-full, 9999px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 4px 14px var(--primary-glow, rgba(79, 70, 229, 0.35));
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    white-space: nowrap;
}

.sticky-btn-add:active {
    transform: scale(0.96);
}

.sticky-btn-wa {
    padding: 9px 14px;
    font-size: 0.80rem;
    font-weight: 700;
    border-radius: var(--radius-full, 9999px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    white-space: nowrap;
}

/* En desktop/tablet el precio se visualiza en la columna izquierda junto a foto y nombre */
.sticky-btn-price-chip {
    display: none;
}

/* ── MÓVIL (OPCIÓN 2: Botón full-width con precio integrado, sin saturación visual) ── */
@media (max-width: 640px) {
    .modal-sticky-action-bar {
        padding: 8px 12px max(8px, env(safe-area-inset-bottom, 8px));
    }

    /* Ocultamos miniatura, nombre y precio de la izquierda en celular */
    .sticky-action-left {
        display: none !important;
    }

    .sticky-action-inner {
        gap: 0;
        width: 100%;
    }

    .sticky-action-right {
        width: 100%;
        flex: 1;
    }

    /* Botón ancho completo de 48px de alto para máxima comodidad táctil */
    .sticky-btn-add,
    .sticky-btn-wa {
        width: 100%;
        justify-content: center;
        height: 48px;
        font-size: 0.94rem;
        padding: 0 16px;
    }

    .sticky-btn-price-chip {
        display: inline-flex;
        align-items: center;
        font-weight: 800;
        letter-spacing: -0.01em;
        margin-left: 3px;
    }
}

@media (min-width: 860px) {
    .modal-sticky-action-bar {
        max-width: 900px;
        border-radius: 0 0 var(--radius-xl, 18px) var(--radius-xl, 18px);
    }
}

/* ── MODAL COMPARTIR PRODUCTO (SOCIAL SHARE MODAL) ─────────────── */
.modal-card-share{
    max-width:440px;
    width:92vw;
    padding:1.75rem 1.5rem 1.5rem;
    border-radius:var(--radius-xl);
    text-align:center;
    background:var(--bg-card);
    box-shadow:var(--shadow-xl);
    position:relative;
    animation:modalFadeIn 0.25s var(--ease-out);
}
.share-modal-header{margin-bottom:1.15rem}
.share-modal-icon-badge{
    width:48px;
    height:48px;
    border-radius:50%;
    background:var(--primary-light);
    color:var(--primary);
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 10px;
}
.share-modal-title{
    font-family:var(--font-heading);
    font-size:1.22rem;
    font-weight:800;
    color:var(--text-primary);
    margin:0 0 4px;
    letter-spacing:-0.02em;
}
.share-modal-subtitle{
    font-size:0.82rem;
    color:var(--text-muted);
    margin:0;
    line-height:1.4;
}
.share-modal-product-card{
    display:flex;
    align-items:center;
    gap:12px;
    background:var(--bg-subtle);
    border:1.5px solid var(--border-color);
    border-radius:var(--radius-md);
    padding:10px 12px;
    margin-bottom:1.25rem;
    text-align:left;
}
.share-modal-prod-thumb{
    width:48px;
    height:48px;
    border-radius:var(--radius-sm);
    object-fit:cover;
    background:var(--bg-card);
    border:1px solid var(--border-color);
    flex-shrink:0;
}
.share-modal-prod-info{
    display:flex;
    flex-direction:column;
    min-width:0;
    overflow:hidden;
}
.share-modal-prod-name{
    font-size:0.86rem;
    font-weight:700;
    color:var(--text-primary);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.share-modal-prod-price{
    font-size:0.92rem;
    font-weight:800;
    color:var(--primary);
    margin-top:2px;
    letter-spacing:-0.01em;
}
.share-social-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:8px;
    margin-bottom:1.25rem;
}
.share-social-btn{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    background:transparent;
    border:none;
    cursor:pointer;
    padding:6px 2px;
    border-radius:var(--radius-md);
    transition:transform var(--t-fast) var(--ease-spring);
}
.share-social-btn:hover{transform:translateY(-3px)}
.share-social-btn:active{transform:scale(0.94)}
.share-social-btn-icon{
    width:48px;
    height:48px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#ffffff;
    box-shadow:0 3px 10px rgba(0,0,0,0.08);
    transition:all var(--t-fast) ease;
}
.share-social-btn:hover .share-social-btn-icon{
    box-shadow:0 6px 16px rgba(0,0,0,0.16);
    transform:scale(1.05);
}
.share-btn-whatsapp .share-social-btn-icon{background:#25D366}
.share-btn-facebook .share-social-btn-icon{background:#1877F2}
.share-btn-telegram .share-social-btn-icon{background:#229ED9}
.share-btn-instagram .share-social-btn-icon{
    background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
.share-social-btn-label{
    font-size:0.75rem;
    font-weight:700;
    color:var(--text-secondary);
    letter-spacing:-0.01em;
}
.share-link-box{text-align:left}
.share-link-label{
    font-size:0.75rem;
    font-weight:700;
    color:var(--text-muted);
    margin-bottom:6px;
    display:block;
    text-transform:uppercase;
    letter-spacing:0.04em;
}
.share-link-input-group{
    display:flex;
    align-items:center;
    background:var(--bg-subtle);
    border:1.5px solid var(--border-color);
    border-radius:var(--radius-md);
    overflow:hidden;
    padding:3px 4px 3px 12px;
    transition:border-color var(--t-fast);
}
.share-link-input-group:focus-within{border-color:var(--primary)}
.share-link-input{
    flex:1;
    border:none;
    background:transparent;
    font-size:0.82rem;
    color:var(--text-primary);
    outline:none;
    min-width:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-family:inherit;
}
.share-link-copy-btn{
    padding:8px 18px;
    font-size:0.8rem;
    font-weight:700;
    border-radius:var(--radius-sm);
    white-space:nowrap;
    flex-shrink:0;
}

/* ── HIGHLIGHT PULSANTE AL VOLVER AL CATÁLOGO (MITIGACIÓN CONTRA 1) ── */
@keyframes productCardPulseHighlight{
    0%{box-shadow:0 0 0 0 rgba(99,102,241,0.6);transform:scale(1)}
    40%{box-shadow:0 0 0 10px rgba(99,102,241,0.22);transform:scale(1.02)}
    100%{box-shadow:0 0 0 0 rgba(99,102,241,0);transform:scale(1)}
}
.product-card-highlighted{
    animation:productCardPulseHighlight 1.8s ease-out;
    border-color:var(--primary)!important;
    position:relative;
    z-index:4;
}

.btn-primary{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-accent) 100%);color:white;padding:13px 20px;border-radius:var(--radius-md);font-family:var(--font-heading);font-weight:700;font-size:0.92rem;cursor:pointer;box-shadow:var(--shadow-primary);transition:transform var(--t-fast) var(--ease-spring),box-shadow var(--t-fast),opacity var(--t-fast);text-align:center;letter-spacing:-0.01em}
.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 12px 32px var(--primary-glow)}
.btn-primary:active:not(:disabled){transform:scale(0.98) translateY(0)}
.btn-primary:disabled{opacity:0.55;cursor:not-allowed;box-shadow:none}
.btn-secondary{background:var(--bg-subtle);color:var(--text-secondary);padding:11px 18px;border-radius:var(--radius-md);font-weight:700;font-size:0.87rem;cursor:pointer;text-align:center;border:1.5px solid var(--border-color);transition:background var(--t-fast),border-color var(--t-fast),transform var(--t-fast)}
.btn-secondary:hover{background:var(--border-color);border-color:#CBD5E1}
.btn-block{width:100%;display:block}
.btn-lg{padding:15px 22px;font-size:0.97rem}
.btn-wa-block{background:linear-gradient(135deg,#25D366 0%,#1DA851 100%);color:white;padding:13px 20px;border-radius:var(--radius-md);font-family:var(--font-heading);font-weight:700;font-size:0.92rem;display:flex;align-items:center;justify-content:center;gap:9px;margin-top:9px;box-shadow:var(--shadow-wa);transition:transform var(--t-fast) var(--ease-spring),box-shadow var(--t-fast);letter-spacing:-0.01em}
.btn-wa-block:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(37,211,102,0.40)}
.btn-wa-block:active{transform:scale(0.98)}

/* ── CAJA DE CONSULTA SIN PEDIDO EN CHECKOUT ── */
.checkout-dudas-box{margin-top:14px;padding:11px 14px;text-align:center;background:rgba(37,211,102,0.06);border:1px dashed rgba(37,211,102,0.40);border-radius:var(--radius-md);display:flex;flex-direction:column;align-items:center;gap:4px;transition:background var(--t-fast)}
.checkout-dudas-box:hover{background:rgba(37,211,102,0.09)}
.checkout-dudas-label{font-size:0.82rem;color:var(--text-secondary);font-weight:500;line-height:1.4}
.btn-link-dudas-wa{background:none;border:none;padding:2px 4px;color:#128C7E;font-family:inherit;font-size:0.86rem;font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;gap:6px;transition:color var(--t-fast),transform var(--t-fast)}
.btn-link-dudas-wa:hover{color:#075E54;transform:translateY(-1px)}
.btn-link-dudas-wa:active{transform:translateY(0)}

/* ── TARJETA DE RECOJO EN TIENDA & GOOGLE MAPS ── */
.pickup-location-card{background:var(--bg-subtle);border:1.5px solid var(--border-color);border-radius:var(--radius-lg);padding:1rem 1.125rem;margin-top:10px;margin-bottom:8px;display:flex;flex-direction:column;gap:8px;transition:border-color var(--t-fast)}
.pickup-card-header{display:flex;align-items:center;gap:8px}
.pickup-card-header svg{color:var(--primary);flex-shrink:0}
.pickup-card-title{font-family:var(--font-heading);font-weight:800;font-size:0.92rem;color:var(--text-primary)}
.pickup-card-address{font-size:0.82rem;color:var(--text-secondary);line-height:1.4}
.btn-maps-link{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:#ffffff;color:var(--primary);border:1.5px solid var(--primary-border);padding:7px 13px;border-radius:var(--radius-full);font-size:0.78rem;font-weight:700;text-decoration:none;align-self:flex-start;margin-top:3px;transition:all var(--t-fast);box-shadow:0 2px 6px rgba(99,102,241,0.08);cursor:pointer}
.btn-maps-link:hover{background:var(--primary-light);border-color:var(--primary);transform:translateY(-1px);color:var(--primary-dark)}
.pickup-branches-dropdown{width:100%;padding:9px 12px;border-radius:var(--radius-md);border:1.5px solid var(--border-color);background:#ffffff;font-size:0.85rem;font-family:inherit;color:var(--text-primary);font-weight:600;outline:none}
.pickup-branches-dropdown:focus{border-color:var(--primary)}

.drawer-sheet{background:var(--bg-card);width:100%;max-width:500px;height:93dvh;border-radius:var(--radius-xl) var(--radius-xl) 0 0;display:flex;flex-direction:column;position:relative;cursor:default;animation:drawerSlideUp 0.32s var(--ease-out);overflow:hidden}
@keyframes drawerSlideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@media(min-width:640px){.drawer-sheet{border-radius:var(--radius-xl);height:auto;max-height:90vh;animation:modalFadeIn 0.25s var(--ease-out)}}
.drawer-pill-indicator{width:40px;height:4px;border-radius:2px;background:var(--border-color);margin:12px auto 0;flex-shrink:0}
@media(min-width:640px){.drawer-pill-indicator{display:none}}
.drawer-sheet-header{padding:14px 1.25rem;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center;flex-shrink:0}
.drawer-sheet-title{display:flex;align-items:center;gap:9px}
.drawer-sheet-title h3{font-family:var(--font-heading);font-size:1.1rem;font-weight:800;color:var(--text-primary);letter-spacing:-0.02em}
.drawer-count-badge{background:var(--primary-light);color:var(--primary);font-size:0.7rem;font-weight:800;padding:3px 8px;border-radius:var(--radius-full);border:1px solid var(--primary-border)}
.drawer-sheet-body{padding:1.125rem 1.25rem 2rem;overflow-y:auto;flex-grow:1;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.cart-empty-view{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:3rem 1.5rem;gap:0.75rem}
.empty-cart-svg{color:var(--text-muted);margin-bottom:0.25rem;opacity:0.6}
.cart-empty-view h4{font-family:var(--font-heading);font-size:1.05rem;font-weight:800;color:var(--text-primary)}
.cart-empty-view p{font-size:0.84rem;color:var(--text-muted);max-width:280px;line-height:1.45}
.cart-empty-actions{display:flex;flex-direction:column;gap:8px;width:100%;max-width:260px;margin-top:0.6rem}
.cart-empty-actions .btn-secondary{background:var(--bg-subtle);border:1px solid var(--border-color);color:var(--text-primary);padding:10px 14px;border-radius:var(--radius-full);font-size:0.84rem;font-weight:600;cursor:pointer;transition:all var(--t-fast)}
.cart-empty-actions .btn-secondary:hover{background:var(--bg-card);border-color:var(--primary-border);color:var(--primary)}
.cart-products-list{display:flex;flex-direction:column;gap:8px}
.cart-item-card{position:relative;display:flex;align-items:center;gap:12px;padding:12px 12px;background:var(--bg-subtle);border-radius:var(--radius-sm);border:1px solid var(--border-color);transition:border-color var(--t-fast)}
.cart-item-card:hover{border-color:var(--primary-border)}
.cart-item-thumb{width:52px;height:52px;border-radius:var(--radius-xs);object-fit:cover;background:var(--bg-card);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;border:1px solid var(--border-color);color:var(--text-muted)}
.cart-item-meta{flex-grow:1;min-width:0}
.cart-item-name{font-weight:700;font-size:0.84rem;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:24px}
.cart-item-opt{font-size:0.72rem;color:var(--text-muted);margin-top:2px;padding-right:24px}
.cart-pickup-only-badge{display:inline-flex;align-items:center;gap:4px;font-size:0.68rem;font-weight:800;color:#B45309;background:#FEF3C7;border:1px solid #FDE68A;padding:2px 6px;border-radius:4px;margin-top:3px;letter-spacing:0.01em}
.cart-pickup-only-badge svg{flex-shrink:0;stroke:#D97706}
.cart-item-subtotal{font-family:var(--font-heading);font-weight:800;color:var(--primary);font-size:0.90rem;letter-spacing:-0.02em}
.cart-item-meta-row{display:flex;align-items:center;justify-content:space-between;margin-top:8px;gap:8px;width:100%}

/* ── STEPPER DE CANTIDAD EN CARRITO ─────────────────────────────────── */
.cart-item-qty-stepper{display:inline-flex;align-items:center;background:#ffffff;border:1.5px solid var(--border-color);border-radius:var(--radius-full);padding:2px;gap:4px;box-shadow:0 1px 3px rgba(0,0,0,0.04)}
.btn-qty-mini{width:24px;height:24px;border-radius:50%;background:var(--bg-subtle);color:var(--text-primary);display:inline-flex;align-items:center;justify-content:center;border:none;cursor:pointer;transition:all var(--t-fast);padding:0}
.btn-qty-mini:hover:not(:disabled){background:var(--primary-light);color:var(--primary);transform:scale(1.1)}
.btn-qty-mini:active:not(:disabled){transform:scale(0.92)}
.btn-qty-mini:disabled{opacity:0.35;cursor:not-allowed}
.qty-mini-value{font-size:0.78rem;font-weight:800;color:var(--text-primary);min-width:18px;text-align:center;line-height:1}
.cart-savings-badge{display:inline-block;font-size:0.65rem;font-weight:800;color:#059669;background:#ECFDF5;border:1px solid #A7F3D0;padding:2px 6px;border-radius:var(--radius-full);margin-top:3px}

/* ── BARRA DE PROGRESO DE ENVÍO GRATIS ───────────────────────────────── */
.cart-shipping-progress-box{background:linear-gradient(135deg,#EEF2FF 0%,#F8FAFC 100%);border:1.5px solid #E0E7FF;border-radius:var(--radius-md);padding:10px 14px;margin-bottom:12px;box-shadow:0 2px 6px rgba(99,102,241,0.06)}
.shipping-progress-header{display:flex;align-items:center;gap:6px;font-size:0.76rem;color:#334155;font-weight:600;margin-bottom:6px;line-height:1.3}
.shipping-progress-header strong{color:#4F46E5}
.shipping-progress-icon{font-size:0.9rem;flex-shrink:0}
.shipping-progress-track{width:100%;height:6px;background:#E2E8F0;border-radius:3px;overflow:hidden;position:relative}
.shipping-progress-fill{height:100%;background:linear-gradient(90deg,#6366F1 0%,#4F46E5 100%);border-radius:3px;transition:width 0.4s cubic-bezier(0.16,1,0.3,1),background 0.3s ease}
.shipping-progress-fill.unlocked{background:linear-gradient(90deg,#10B981 0%,#059669 100%);box-shadow:0 0 8px rgba(16,185,129,0.5);animation:unlockPulse 2s infinite ease-in-out}
@keyframes unlockPulse{0%,100%{opacity:1}50%{opacity:0.85}}

/* ── BANNER DE AHORRO TOTAL EN CHECKOUT ─────────────────────────────── */
.checkout-total-savings-banner{background:linear-gradient(135deg,#ECFDF5 0%,#D1FAE5 100%);border:1.5px solid #6EE7B7;border-radius:var(--radius-sm);padding:8px 12px;margin-bottom:10px;display:flex;align-items:center;gap:7px;color:#065F46;font-size:0.80rem;font-weight:800;letter-spacing:-0.01em;box-shadow:0 2px 8px rgba(16,185,129,0.12);animation:fadeIn 0.3s ease}
.savings-badge-icon{font-size:0.95rem;flex-shrink:0}

/* ── CROSS-SELLING EN EL CARRITO ─────────────────────────────────────── */
.cart-upsell-section{margin-top:12px;margin-bottom:4px}
.cart-upsell-title{font-size:0.74rem;font-weight:800;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.04em;margin-bottom:8px}
.cart-upsell-scroll{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cart-upsell-scroll::-webkit-scrollbar{display:none}
.cart-upsell-card{background:var(--bg-subtle);border:1px solid var(--border-color);border-radius:var(--radius-sm);padding:8px;display:flex;align-items:center;gap:8px;flex-shrink:0;width:205px;transition:all var(--t-fast)}
.cart-upsell-card:hover{border-color:var(--primary-border);background:#fff;transform:translateY(-1px);box-shadow:var(--shadow-xs)}
.cart-upsell-thumb{width:36px;height:36px;border-radius:var(--radius-xs);object-fit:cover;flex-shrink:0;background:#fff;border:1px solid var(--border-color)}
.cart-upsell-info{flex-grow:1;min-width:0}
.cart-upsell-name{font-size:0.74rem;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cart-upsell-price{font-size:0.76rem;font-weight:800;color:var(--primary)}
.btn-upsell-add{background:var(--primary-light);color:var(--primary);border:none;border-radius:var(--radius-full);width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-weight:900;font-size:0.85rem;transition:all var(--t-fast);flex-shrink:0}
.btn-upsell-add:hover{background:var(--primary);color:#fff;transform:scale(1.1)}

/* ── MICRO-ANIMACIONES DE CONFIRMACIÓN DEL CARRITO ──────────────────── */
@keyframes cartBump{0%{transform:scale(1)}30%{transform:scale(1.12) translateY(-3px)}60%{transform:scale(0.96) translateY(1px)}100%{transform:scale(1) translateY(0)}}
@keyframes badgePop{0%{transform:scale(1)}50%{transform:scale(1.45)}100%{transform:scale(1)}}
.cart-bump-animation{animation:cartBump 0.45s cubic-bezier(0.34,1.56,0.64,1)!important}
.badge-pop-animation{animation:badgePop 0.35s cubic-bezier(0.34,1.56,0.64,1)!important}

/* ── EFECTO DE PULSO Y DESTELLOS AL AGREGAR AL CARRITO ── */
.btn-add-action.btn-success-pulse {
    background: var(--success, #10B981) !important;
    color: #ffffff !important;
    transform: scale(1.22) rotate(360deg) !important;
    box-shadow: 0 0 16px var(--primary-glow) !important;
    transition: transform 0.4s var(--ease-spring), background 0.25s !important;
}
.btn-primary.btn-success-pulse {
    transform: scale(1.04) !important;
    box-shadow: 0 8px 28px var(--primary-glow) !important;
}

.sparkle-particle {
    position: fixed;
    pointer-events: none;
    z-index: 100000;
    font-size: 15px;
    line-height: 1;
    user-select: none;
    animation: sparkleFly 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes sparkleFly {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(0.4) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: translate(var(--tx), var(--ty)) scale(1.25) rotate(180deg);
    }
    100% {
        opacity: 0;
        transform: translate(calc(var(--tx) * 1.35), calc(var(--ty) * 1.35 - 12px)) scale(0.3) rotate(360deg);
    }
}

.btn-trash-item{position:absolute;top:10px;right:10px;background:none;color:var(--text-muted);font-size:0.95rem;padding:4px;cursor:pointer;border-radius:var(--radius-xs);transition:color var(--t-fast),background var(--t-fast),transform var(--t-fast);border:none;line-height:1;display:flex;align-items:center;justify-content:center}
.btn-trash-item:hover{color:var(--danger);background:var(--danger-light);transform:scale(1.1)}
.cart-divider-line{height:1px;background:var(--border-color);margin:1.25rem 0}

/* ── SPLIT VIEW DEL CARRITO EN 2 COLUMNAS (DESKTOP) ── */
.cart-split-grid {
    display: flex;
    flex-direction: column;
}

.cart-col-review {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cart-col-section-header {
    display: none;
}

.cart-col-checkout {
    display: flex;
    flex-direction: column;
}

@media (min-width: 880px) {
    .drawer-overlay {
        align-items: center;
        padding: 20px;
    }

    .drawer-sheet {
        max-width: 960px;
        width: 92vw;
        height: 88vh;
        max-height: 760px;
        border-radius: var(--radius-xl);
        box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.40);
        border: 1px solid var(--border-color);
        display: flex;
        flex-direction: column;
    }

    .drawer-sheet:has(#cart-empty-state:not([style*="display: none"])) {
        max-width: 480px;
        height: auto;
    }

    .drawer-sheet-body {
        padding: 0;
        overflow: hidden;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .cart-split-grid {
        display: grid;
        grid-template-columns: 44% 56%;
        height: 100%;
        overflow: hidden;
    }

    .cart-col-review {
        background: #F8FAFC;
        border-right: 1px solid var(--border-color);
        padding: 1.25rem 1.5rem 1.75rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .cart-col-review .cart-item-card {
        background: #FFFFFF;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    }

    .cart-col-section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 6px;
        border-bottom: 1.5px dashed var(--border-color);
        margin-bottom: 2px;
    }

    .cart-col-section-title {
        font-family: var(--font-heading);
        font-size: 0.82rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-secondary);
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .cart-col-section-title::before {
        content: '';
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--primary);
    }

    .cart-col-checkout {
        background: #FFFFFF;
        padding: 1.25rem 1.75rem 1.75rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .cart-divider-line {
        display: none;
    }

    .cart-col-review::-webkit-scrollbar,
    .cart-col-checkout::-webkit-scrollbar {
        width: 5px;
    }

    .cart-col-review::-webkit-scrollbar-thumb,
    .cart-col-checkout::-webkit-scrollbar-thumb {
        background: #CBD5E1;
        border-radius: 4px;
    }

    .cart-col-review::-webkit-scrollbar-thumb:hover,
    .cart-col-checkout::-webkit-scrollbar-thumb:hover {
        background: #94A3B8;
    }
}

.checkout-step-title{font-family:var(--font-heading);font-size:0.9rem;font-weight:800;margin:1.125rem 0 0.625rem;color:var(--text-primary);letter-spacing:-0.01em;display:flex;align-items:center;gap:8px}
.checkout-step-title::before{content:'';display:inline-block;width:3px;height:14px;background:linear-gradient(to bottom,var(--primary),var(--primary-accent));border-radius:2px;flex-shrink:0}
.checkout-field{margin-bottom:10px}
.checkout-field label{display:block;font-size:0.73rem;font-weight:700;color:var(--text-secondary);margin-bottom:5px;text-transform:uppercase;letter-spacing:0.04em}
.checkout-field input,.checkout-field textarea{width:100%;padding:9px 13px;background:var(--bg-subtle);border:1.5px solid var(--border-color);border-radius:var(--radius-sm);font-size:0.87rem;color:var(--text-primary);transition:border-color var(--t-fast),box-shadow var(--t-fast),background var(--t-fast);font-weight:500}
.checkout-field input:focus,.checkout-field textarea:focus{background:#fff;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow)}
.checkout-field input::placeholder,.checkout-field textarea::placeholder{color:var(--text-muted);font-weight:400}
.checkout-field textarea{resize:vertical;min-height:68px}

.delivery-toggle-row, .delivery-options-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin-bottom:10px}
.delivery-card-option{display:flex;flex-direction:column;height:100%;transition:opacity var(--t-fast),filter var(--t-fast)}
.delivery-card-option.disabled-delivery-option{opacity:0.42;cursor:not-allowed;filter:grayscale(0.85);pointer-events:none;user-select:none}
.delivery-card-option.disabled-delivery-option .delivery-card-box{background:#F8FAFC !important;border-color:#CBD5E1 !important}

/* ── BANNER DE ADVERTENCIA SOLO RECOJO EN CHECKOUT ───────────────────── */
.checkout-pickup-warning-banner{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;padding:10px 14px;background:#FFFBEB;border:1.5px solid #F59E0B;border-radius:var(--radius-sm);color:#92400E;font-size:0.80rem;line-height:1.45;box-shadow:0 2px 8px rgba(245,158,11,0.10);animation:fadeIn 0.25s ease}
.checkout-pickup-warning-banner .banner-warn-icon{flex-shrink:0;stroke:#D97706;margin-top:1px}
.checkout-pickup-warning-banner .banner-warn-text{flex:1}
.checkout-pickup-warning-banner .banner-warn-text strong{color:#78350F;font-weight:800}

.delivery-card-option input{display:none}
.delivery-card-box{border:1.5px solid var(--border-color);border-radius:var(--radius-sm);padding:10px 8px;text-align:center;cursor:pointer;transition:all var(--t-fast);background:var(--bg-card);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:82px;height:100%;box-sizing:border-box}
.delivery-card-option input:checked+.delivery-card-box{border-color:var(--primary);background:var(--primary-light);box-shadow:0 0 0 3px var(--primary-glow)}
.delivery-card-box .d-icon-svg{color:var(--text-muted);display:flex;align-items:center;justify-content:center}
.delivery-card-option input:checked+.delivery-card-box .d-icon-svg{color:var(--primary)}
.delivery-card-box strong{display:block;font-size:0.80rem;font-weight:700;color:var(--text-primary);line-height:1.2}
.delivery-card-box .d-cost-sub{font-size:0.72rem;color:var(--text-muted);line-height:1.2}
.delivery-card-box .d-cost-sub.d-cost-highlight{font-size:0.82rem;font-weight:800;color:var(--primary);letter-spacing:-0.01em}
.delivery-card-option input:checked+.delivery-card-box .d-cost-sub.d-cost-highlight{color:var(--primary-dark)}

/* ── ESTILOS PARA CHECKOUT POR AGENCIA ─────────────────────────────── */
.agency-checkout-section{margin-top:4px;margin-bottom:10px;animation:fadeIn 0.22s ease}

/* Aviso compacto y sutil de instrucciones (sin título redundante) */
.agency-instructions-tip{display:flex;align-items:center;gap:9px;background:#F5F3FF;border:1px solid #DDD6FE;border-radius:10px;padding:8px 12px;margin-bottom:12px;font-size:0.78rem;color:#5B21B6;font-weight:500;line-height:1.35}
.agency-instructions-icon{font-size:0.95rem;flex-shrink:0}
.agency-instructions-text{flex:1}

/* Custom Select Dropdown Elegante */
.custom-agency-dropdown-wrap{position:relative;width:100%;box-sizing:border-box}
.custom-agency-btn{width:100%;display:flex !important;align-items:center !important;justify-content:space-between !important;padding:10px 14px !important;background:#ffffff !important;border:1.5px solid var(--border-color, #E2E8F0) !important;border-radius:12px !important;cursor:pointer !important;font-size:0.88rem !important;font-weight:600 !important;color:var(--text-primary, #0F172A) !important;transition:border-color var(--t-fast),box-shadow var(--t-fast),background-color var(--t-fast) !important;box-shadow:0 1px 3px rgba(0,0,0,0.04) !important;text-align:left !important;box-sizing:border-box !important}
.custom-agency-btn:hover{border-color:var(--primary, #6366F1) !important;background:#F8FAFC !important}
.custom-agency-dropdown-wrap.is-open .custom-agency-btn{border-color:var(--primary, #6366F1) !important;box-shadow:0 0 0 3.5px rgba(99,102,241,0.18) !important;background:#ffffff !important}
.custom-agency-btn-left{display:flex !important;align-items:center !important;gap:10px !important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.custom-agency-icon{display:flex !important;align-items:center !important;justify-content:center !important;color:var(--primary, #6366F1);background:rgba(99,102,241,0.09);width:28px;height:28px;border-radius:8px;flex-shrink:0}
.custom-agency-current{font-weight:700;color:var(--text-primary, #1E293B);font-size:0.88rem}
.custom-agency-arrow{color:#64748B !important;transition:transform 0.22s cubic-bezier(0.4,0,0.2,1) !important;flex-shrink:0;margin-left:8px}
.custom-agency-dropdown-wrap.is-open .custom-agency-arrow{transform:rotate(180deg) !important;color:var(--primary, #6366F1) !important}
.custom-agency-menu{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#ffffff !important;border:1.5px solid #E2E8F0 !important;border-radius:14px !important;box-shadow:0 14px 30px -4px rgba(15,23,42,0.14),0 4px 12px -2px rgba(15,23,42,0.06) !important;z-index:150 !important;padding:6px !important;opacity:0;visibility:hidden;transform:translateY(-6px) scale(0.98);transition:opacity 0.18s ease,transform 0.18s ease,visibility 0.18s;pointer-events:none;max-height:230px;overflow-y:auto;box-sizing:border-box !important}
.custom-agency-dropdown-wrap.is-open .custom-agency-menu{opacity:1 !important;visibility:visible !important;transform:translateY(0) scale(1) !important;pointer-events:auto !important}
.custom-agency-item{display:flex !important;align-items:center !important;justify-content:space-between !important;padding:10px 12px !important;border-radius:9px !important;font-size:0.86rem !important;font-weight:600 !important;color:#334155 !important;cursor:pointer !important;transition:background 0.12s,color 0.12s !important;user-select:none;box-sizing:border-box !important;width:100%}
.custom-agency-item:hover{background:#F1F5F9 !important;color:var(--primary, #6366F1) !important}
.custom-agency-item.is-selected{background:rgba(99,102,241,0.09) !important;color:var(--primary, #6366F1) !important;font-weight:700 !important}
.custom-agency-item-left{display:flex !important;align-items:center !important;gap:9px !important}
.custom-agency-item-check{display:none;color:var(--primary, #6366F1);flex-shrink:0}
.custom-agency-item.is-selected .custom-agency-item-check{display:block !important}
.custom-agency-item-otra{border-top:1px dashed #E2E8F0 !important;margin-top:4px !important;padding-top:10px !important;color:var(--primary, #6366F1) !important;font-weight:700 !important}

.checkout-select{width:100%;padding:9px 13px;background:var(--bg-subtle);border:1.5px solid var(--border-color);border-radius:var(--radius-sm);font-size:0.87rem;color:var(--text-primary);font-weight:600;outline:none;cursor:pointer;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.checkout-select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow);background:#fff}
.field-hint{display:block;font-size:0.72rem;color:var(--text-muted);margin-top:4px}

.payment-chips-grid{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:10px}
.payment-method-chip{flex:1 1 calc(50% - 4px);min-width:130px;padding:10px 8px;background:var(--bg-card);border:1.5px solid var(--border-color);border-radius:var(--radius-sm);font-weight:700;font-size:0.82rem;cursor:pointer;text-align:center;transition:all var(--t-fast);color:var(--text-secondary);display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}
.payment-method-chip:hover{border-color:var(--primary-border);color:var(--primary);background:var(--primary-light)}
.payment-method-chip.selected{border-color:var(--primary);background:var(--primary-light);color:var(--primary);box-shadow:0 0 0 2px var(--primary-glow)}
.payment-info-box{background:var(--bg-subtle);padding:12px 14px;border-radius:var(--radius-sm);border:1px solid var(--border-color);font-size:0.8rem;margin-bottom:12px;color:var(--text-secondary);line-height:1.5}
.qr-code-img{border-radius:var(--radius-sm);margin-top:8px;box-shadow:var(--shadow-sm)}
.copy-btn-clip{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-accent) 100%);color:white;padding:3px 8px;border-radius:var(--radius-xs);font-size:0.68rem;font-weight:700;transition:transform var(--t-fast),opacity var(--t-fast);flex-shrink:0}
.copy-btn-clip:hover{opacity:0.88;transform:scale(1.05)}

.checkout-summary-box{background:var(--bg-subtle);padding:14px 16px;border-radius:var(--radius-md);margin:1.25rem 0 1rem;border:1.5px solid var(--border-color)}
.summary-row{display:flex;justify-content:space-between;font-size:0.82rem;color:var(--text-secondary);margin-bottom:6px;font-weight:500}
.summary-row-total{border-top:1.5px solid var(--border-color);padding-top:10px;margin-top:8px;margin-bottom:0;font-size:1.05rem;font-weight:800;color:var(--text-primary)}
.summary-row-total span:last-child{color:var(--primary);font-family:var(--font-heading);letter-spacing:-0.02em}

.success-card-view{text-align:center;padding:0.5rem 1.25rem 1.75rem}
.success-check-bubble{width:68px;height:68px;background:linear-gradient(135deg,var(--success) 0%,#059669 100%);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1.25rem;box-shadow:var(--shadow-success);animation:successPop 0.5s var(--ease-spring)}
@keyframes successPop{0%{transform:scale(0);opacity:0}60%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
.success-card-view h3{font-family:var(--font-heading);font-size:1.35rem;font-weight:900;color:var(--text-primary);letter-spacing:-0.025em}
.success-order-tag{font-size:0.95rem;color:var(--primary);margin:8px 0 4px;font-weight:700;font-family:var(--font-heading)}
.success-subtext{font-size:0.83rem;color:var(--text-secondary);margin-bottom:1.5rem;line-height:1.5;max-width:300px;margin-left:auto;margin-right:auto}

.drawer-sheet-body::-webkit-scrollbar,.modal-card::-webkit-scrollbar{width:6px}
.drawer-sheet-body::-webkit-scrollbar-track,.modal-card::-webkit-scrollbar-track{background:transparent}
.drawer-sheet-body::-webkit-scrollbar-thumb,.modal-card::-webkit-scrollbar-thumb{background:rgba(148,163,184,0.45);border-radius:3px}
.drawer-sheet-body::-webkit-scrollbar-thumb:hover,.modal-card::-webkit-scrollbar-thumb:hover{background:rgba(148,163,184,0.75)}
.modal-card,.drawer-sheet-body{scrollbar-width:thin;scrollbar-color:rgba(148,163,184,0.45) transparent}
@media(min-width:640px){body{padding-bottom:100px}}

/* ── BOTONES DE RASTREO EN HEADER Y ÉXITO ────────────────────────────── */
.btn-track-header{background:var(--bg-subtle);color:var(--text-primary);border:1.5px solid var(--border-color);font-size:0.8rem;font-weight:700;padding:6px 12px;border-radius:var(--radius-full);cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all var(--t-fast);box-shadow:var(--shadow-xs)}
.btn-track-header:hover{background:var(--bg-card);border-color:var(--primary);color:var(--primary);transform:translateY(-1px)}
.btn-track-header:active{transform:scale(0.96)}

.btn-track-success-view{background:var(--bg-subtle);color:var(--text-primary);border:1.5px solid var(--border-color);font-weight:700;font-size:0.92rem;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:var(--radius-md);cursor:pointer;transition:all var(--t-fast);margin-top:10px}
.btn-track-success-view:hover{background:var(--bg-card);border-color:var(--primary);color:var(--primary);transform:translateY(-1px)}

/* ── MODAL DE RASTREO ─────────────────────────────────────────────────── */
.rastreo-modal-card{max-width:540px;max-height:88vh;overflow-y:auto}
.rastreo-header{text-align:center;margin-bottom:1.25rem}
.rastreo-icon-bubble{width:52px;height:52px;background:var(--primary-light);color:var(--primary);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 10px;border:1.5px solid var(--primary-border)}
.rastreo-header h3{font-family:var(--font-heading);font-size:1.25rem;font-weight:800;color:var(--text-primary);letter-spacing:-0.02em;margin-bottom:4px}
.rastreo-header p{font-size:0.85rem;color:var(--text-secondary);line-height:1.4}

/* Pedidos Recientes en Memoria Local */
.rastreo-recent-box{background:var(--bg-subtle);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:10px 12px;margin-bottom:1rem}
.rastreo-recent-title{font-size:0.75rem;font-weight:800;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-muted);margin-bottom:8px}
.rastreo-recent-chips{display:flex;flex-wrap:wrap;gap:8px}
.recent-order-chip{background:var(--bg-card);border:1px solid var(--border-color);padding:6px 10px;border-radius:var(--radius-full);font-size:0.8rem;font-weight:700;color:var(--text-primary);cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:all var(--t-fast)}
.recent-order-chip:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-light);transform:translateY(-1px)}
.recent-order-chip span{color:var(--text-secondary);font-size:0.72rem;font-weight:500}

/* Encabezado del Estado del Pedido */
.rastreo-status-top-card{background:var(--bg-subtle);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:12px 14px;display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.rastreo-code-tag span{font-size:0.78rem;color:var(--text-secondary);display:block}
.rastreo-code-tag strong{font-size:1.05rem;font-family:var(--font-heading);font-weight:800;color:var(--text-primary);letter-spacing:-0.01em}

.track-badge{padding:4px 10px;border-radius:var(--radius-full);font-size:0.75rem;font-weight:800;letter-spacing:0.02em;text-transform:uppercase}
.track-badge-warning{background:rgba(245,158,11,0.14);color:#D97706;border:1px solid rgba(245,158,11,0.3)}
.track-badge-info{background:rgba(14,165,233,0.14);color:#0284C7;border:1px solid rgba(14,165,233,0.3)}
.track-badge-primary{background:var(--primary-light);color:var(--primary);border:1px solid var(--primary-border)}
.track-badge-success{background:rgba(16,185,129,0.14);color:#059669;border:1px solid rgba(16,185,129,0.3)}
.track-badge-danger{background:rgba(239,68,68,0.14);color:#DC2626;border:1px solid rgba(239,68,68,0.3)}

.track-desc-bubble{background:var(--bg-card);border:1.5px solid var(--border-color);border-radius:var(--radius-md);padding:10px 14px;margin-bottom:1.25rem}
.track-desc-bubble p{font-size:0.875rem;color:var(--text-secondary);line-height:1.45;margin:0}

/* ── LÍNEA DE TIEMPO / STEPPER ────────────────────────────────────────── */
.timeline-stepper{display:flex;flex-direction:column;gap:0;margin-bottom:1.25rem;padding:4px 8px}
.stepper-step{display:flex;gap:14px;position:relative;padding-bottom:18px}
.stepper-step:last-child{padding-bottom:0}

.stepper-indicator{display:flex;flex-direction:column;align-items:center;position:relative}
.stepper-dot{width:26px;height:26px;border-radius:50%;background:var(--bg-subtle);border:2px solid var(--border-color);color:var(--text-muted);display:flex;align-items:center;justify-content:center;font-size:0.75rem;font-weight:800;z-index:2;transition:all var(--t-normal)}
.stepper-line{width:2px;flex-grow:1;background:var(--border-color);margin:4px 0;position:absolute;top:26px;bottom:-4px;z-index:1}
.stepper-step:last-child .stepper-line{display:none}

.stepper-content{flex-grow:1;padding-top:2px}
.stepper-title{font-size:0.88rem;font-weight:700;color:var(--text-muted);margin-bottom:2px;display:flex;align-items:center;gap:6px}
.stepper-sub{font-size:0.78rem;color:var(--text-muted)}

/* Estados del Stepper: Completado, Activo, Pendiente */
.stepper-step.step-completed .stepper-dot{background:#10B981;border-color:#10B981;color:white}
.stepper-step.step-completed .stepper-line{background:#10B981}
.stepper-step.step-completed .stepper-title{color:var(--text-primary)}
.stepper-step.step-completed .stepper-sub{color:var(--text-secondary)}

.stepper-step.step-active .stepper-dot{background:var(--primary);border-color:var(--primary);color:white;box-shadow:0 0 0 4px var(--primary-light);animation:pulseDot 1.6s infinite}
.stepper-step.step-active .stepper-title{color:var(--primary);font-weight:800}
.stepper-step.step-active .stepper-sub{color:var(--text-primary);font-weight:500}

@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(79,70,229,0.45)}70%{box-shadow:0 0 0 7px rgba(79,70,229,0)}100%{box-shadow:0 0 0 0 rgba(79,70,229,0)}}

/* ── RESUMEN DEL PEDIDO EN RASTREO ────────────────────────────────────── */
.track-summary-card{background:var(--bg-subtle);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:10px 14px;margin-bottom:1.25rem}
.track-summary-row{display:flex;justify-content:space-between;font-size:0.85rem;padding:4px 0;color:var(--text-secondary)}
.track-summary-row strong{color:var(--text-primary);font-weight:700}
.track-total-val{color:var(--primary)!important;font-size:0.95rem}

.track-items-container{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:10px 14px;margin-bottom:1.25rem}
.track-items-title{font-size:0.78rem;font-weight:800;text-transform:uppercase;letter-spacing:0.04em;color:var(--text-muted);margin-bottom:8px}
.track-items-list{display:flex;flex-direction:column;gap:8px}
.track-item-row{display:flex;justify-content:space-between;align-items:center;font-size:0.84rem;padding-bottom:6px;border-bottom:1px solid var(--border-color)}
.track-item-row:last-child{border-bottom:none;padding-bottom:0}
.track-item-name{font-weight:700;color:var(--text-primary)}
.track-item-opt{font-size:0.75rem;color:var(--text-secondary)}
.track-item-price{font-weight:800;color:var(--text-primary);white-space:nowrap}

.track-actions-grid{display:flex;flex-direction:column;gap:8px;margin-top:1rem}

/* ── ESTILOS DEL CRONÓMETRO DE OFERTA FLASH (URGENCIA / FOMO) ──────────── */
.discount-tag-pill.flash-badge {
    background: linear-gradient(135deg, #FF4500 0%, #EA580C 100%);
    color: white;
    font-weight: 800;
    box-shadow: 0 2px 8px rgba(234, 88, 12, 0.4);
    animation: flashGlow 2.5s infinite;
}

.flash-timer-pill {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(6px);
    color: #FBBF24;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    gap: 4px;
    border: 1px solid rgba(251, 191, 36, 0.3);
    letter-spacing: 0.02em;
    z-index: 2;
}

@keyframes flashGlow {
    0% { box-shadow: 0 0 0 0 rgba(234, 88, 12, 0.5); }
    50% { box-shadow: 0 0 0 6px rgba(234, 88, 12, 0); }
    100% { box-shadow: 0 0 0 0 rgba(234, 88, 12, 0); }
}

.modal-flash-sale-banner {
    background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
    border: 1.5px solid #FDBA74;
    border-radius: var(--radius-md);
    padding: 10px 14px;
    margin-top: 10px;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    animation: fadeIn 0.3s ease;
}

.flash-sale-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.flash-icon {
    font-size: 1.1rem;
    animation: pulseIcon 1.2s infinite;
}

@keyframes pulseIcon {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.flash-text-label {
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #C2410C;
}

.flash-sale-countdown {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 2px;
}

.timer-box {
    background: #7C2D12;
    color: #FFF;
    border-radius: 6px;
    padding: 4px 6px;
    min-width: 44px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.timer-value {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1;
    color: #FEF08A;
    letter-spacing: -0.02em;
}

.timer-unit {
    font-size: 0.60rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #FED7AA;
    margin-top: 2px;
}

.timer-sep {
    font-size: 1.1rem;
    font-weight: 900;
    color: #C2410C;
}

/* ============================================================
   SMART UX / UI COMPONENTS & GATILLOS COMERCIALES
   ============================================================ */

/* ── Smart Badges Row ────────────────────────────────────────── */
.v2-badges-row {
    display: flex;
    gap: 6px;
    margin-top: 7px;
    flex-wrap: wrap;
    align-items: center;
}
.v2-smart-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    letter-spacing: 0.01em;
    transition: all var(--t-fast);
}
.v2-smart-badge.badge-shipping {
    background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
    color: #065F46;
    border: 1px solid rgba(16, 185, 129, 0.25);
}
.v2-smart-badge.badge-security {
    background: linear-gradient(135deg, #EEF0FF 0%, #E0E7FF 100%);
    color: #3730A3;
    border: 1px solid rgba(91, 79, 232, 0.20);
}
.v2-smart-badge.badge-payment {
    background: linear-gradient(135deg, #FFF7ED 0%, #FFEDD5 100%);
    color: #9A3412;
    border: 1px solid rgba(245, 158, 11, 0.25);
}
.v2-smart-badge.badge-dispatch {
    background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
    color: #14532D;
    border: 1px solid rgba(34, 197, 94, 0.25);
}

/* ── V2 Trust Bar Enhancement ────────────────────────────────── */
.v2-trust-bar .trust-text span {
    color: var(--success-dark);
    font-weight: 800;
}

/* ── Quick Filter Pills (Centradas) ─────────────────────────── */
.quick-filters-container {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 4px 12px 8px;
    margin: 0 auto;
    max-width: 1000px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.quick-filters-container::-webkit-scrollbar { display: none }
@media(max-width:639px){
    .quick-filters-container {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        padding: 4px 4px 6px;
    }
}

.quick-filter-pill {
    background: var(--bg-card);
    border: 1.5px solid var(--border-color);
    color: var(--text-secondary);
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--t-fast) var(--ease-out);
    box-shadow: var(--shadow-xs);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.quick-filter-pill:hover {
    border-color: var(--primary-border);
    color: var(--primary);
    background: var(--primary-light);
    transform: translateY(-1px);
}
.quick-filter-pill.active {
    background: linear-gradient(135deg, #F97316 0%, #EF4444 100%);
    border-color: transparent;
    color: white;
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.30);
    transform: translateY(-1px);
}
.quick-filter-pill.active-featured {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    border-color: transparent;
    color: white;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.30);
    transform: translateY(-1px);
}
.quick-filter-pill.active-new {
    background: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%);
    border-color: transparent;
    color: white;
    box-shadow: 0 4px 14px rgba(139, 92, 246, 0.30);
    transform: translateY(-1px);
}
.quick-filter-pill .qf-count {
    font-size: 0.62rem;
    font-weight: 900;
    background: rgba(255,255,255,0.25);
    padding: 1px 5px;
    border-radius: var(--radius-full);
    opacity: 0.9;
}
@media(min-width:640px) {
    .quick-filters-container { padding: 0 20px 6px }
}

/* ── Cross-Selling Section in Modal (V2) ─────────────────────── */
.cross-selling-section {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}
.cross-selling-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    gap: 8px;
}
.cross-selling-title {
    font-family: var(--font-heading);
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}
.cross-selling-title-icon {
    color: var(--primary);
    flex-shrink: 0;
}
.cross-selling-nav-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}
.cross-nav-arrow-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1.5px solid var(--border-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-xs);
    transition: all var(--t-fast) var(--ease-spring);
    padding: 0;
    flex-shrink: 0;
}
.cross-nav-arrow-btn:hover {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
    transform: scale(1.1);
    box-shadow: 0 3px 10px var(--primary-glow);
}
.cross-nav-arrow-btn:active {
    transform: scale(0.92);
}
.cross-nav-arrow-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}
.cross-selling-scroll-wrapper {
    position: relative;
    width: 100%;
}
.cross-selling-scroll {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    user-select: none;
    cursor: grab;
}
.cross-selling-scroll.active-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
}
.cross-selling-scroll::-webkit-scrollbar { display: none }

.cross-sell-card {
    flex-shrink: 0;
    width: 130px;
    background: var(--bg-card);
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border-color);
    overflow: hidden;
    cursor: pointer;
    transition: all var(--t-fast) var(--ease-spring);
    box-shadow: var(--shadow-xs);
}
.cross-sell-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-border);
}
.cross-sell-card:active {
    transform: scale(0.97);
}
.cross-sell-thumb {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    background: linear-gradient(160deg, #F8FAFC 0%, #F0F2F8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.cross-sell-thumb-placeholder {
    width: 100%;
    aspect-ratio: 1/1;
    background: linear-gradient(160deg, #F8FAFC 0%, #EEF0FF 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #CBD5E1;
}
.cross-sell-info {
    padding: 6px 8px 8px;
}
.cross-sell-name {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 3px;
}
.cross-sell-price {
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--primary);
}

/* ── V2 Stock Urgency Pulse for Modal ────────────────────────── */
.stock-status-pill.urgency-pulse {
    animation: urgencyPulse 1.5s ease-in-out infinite;
}
@keyframes urgencyPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
}

/* ── Checkout Security Reassurance ────────────────────────── */
.checkout-reassurance {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    padding: 10px 14px;
    margin: 10px 0 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--success-dark);
    background: var(--success-light);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: var(--radius-sm);
    line-height: 1.4;
}

/* ── Smart Badges de Confianza en Cabecera ─────────────────── */
.v2-smart-badges-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}
.v2-smart-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.2;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}
.v2-smart-badge svg {
    flex-shrink: 0;
}
.v2-smart-badge.badge-shipping {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
}
.v2-smart-badge.badge-payment {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}
.v2-smart-badge.badge-security {
    background: #f5f3ff;
    color: #6d28d9;
    border-color: #ddd6fe;
}
.v2-smart-badge.badge-whatsapp {
    background: #f0fdfa;
    color: #0f766e;
    border-color: #99f6e4;
}
.v2-smart-badge.badge-changes {
    background: #fffbeb;
    color: #b45309;
    border-color: #fde68a;
}
.quick-filter-pill svg {
    margin-right: 3px;
    vertical-align: middle;
    flex-shrink: 0;
    transition: transform var(--t-fast) ease, color var(--t-fast) ease;
}
.quick-filter-pill:hover svg {
    transform: scale(1.12);
}
.quick-filter-pill .qf-icon-fire {
    color: #F97316;
}
.quick-filter-pill .qf-icon-star {
    color: #F59E0B;
}
.quick-filter-pill .qf-icon-new {
    color: #8B5CF6;
}
.quick-filter-pill.active .qf-icon-fire,
.quick-filter-pill.active-featured .qf-icon-star,
.quick-filter-pill.active-new .qf-icon-new {
    color: #ffffff;
}

/* ============================================================
   ZOKO BUYER PASS & BUYER PORTAL (PRO EDITION)
   ============================================================ */

/* Botón Mi Cuenta en Header */
.btn-buyer-account-header {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    color: var(--primary);
    border: 1.5px solid var(--primary-border);
    padding: 7px 14px;
    border-radius: var(--radius-full);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--t-fast) var(--ease-out);
    box-shadow: var(--shadow-xs);
    white-space: nowrap;
}

.btn-buyer-account-header:hover {
    background: var(--primary-light);
    border-color: var(--primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.btn-buyer-account-header svg {
    color: var(--primary);
}

/* Banner de Comprador en Checkout */
.checkout-buyer-banner {
    background: #F8FAFC;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    margin-bottom: 16px;
}

.buyer-banner-content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.buyer-banner-icon {
    color: var(--primary);
    flex-shrink: 0;
}

.btn-link-auth {
    background: none;
    border: none;
    color: var(--primary);
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}

.btn-link-auth:hover {
    color: var(--primary-dark);
}

.btn-link-auth.danger {
    color: var(--danger);
}

.buyer-logged-badge {
    color: var(--success-dark);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

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

/* Selector de Direcciones Guardadas en Checkout */
.saved-addresses-picker {
    margin-bottom: 12px;
}

.picker-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-secondary);
    display: block;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.saved-addresses-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
}

.saved-addr-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    font-size: 0.8rem;
    color: var(--text-primary);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--t-fast);
}

.saved-addr-chip:hover {
    border-color: var(--primary);
    background: var(--primary-light);
}

.saved-addr-chip.active {
    border-color: var(--primary);
    background: var(--primary-light);
    font-weight: 700;
    color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-glow);
}

/* Registro Opcional en Checkout */
.checkout-register-opt-box {
    background: var(--bg-subtle);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    margin: 14px 0;
}

.custom-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    user-select: none;
}

.custom-checkbox-label input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: var(--primary);
    cursor: pointer;
}

/* Modal de Autenticación de Comprador */
.buyer-auth-modal-card {
    max-width: 420px;
    padding: 24px;
    border-radius: var(--radius-xl);
}

.buyer-auth-header {
    text-align: center;
    margin-bottom: 18px;
}

.buyer-auth-icon-bubble {
    width: 52px;
    height: 52px;
    margin: 0 auto 12px;
    border-radius: var(--radius-full);
    background: var(--primary-light);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px var(--primary-glow);
}

.buyer-auth-header h3 {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.buyer-auth-header p {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.buyer-auth-tabs {
    display: flex;
    background: #E2E8F0;
    border-radius: var(--radius-sm);
    padding: 3px;
    margin-bottom: 18px;
}

.buyer-tab-btn {
    flex: 1;
    padding: 8px 12px;
    border: none;
    background: transparent;
    border-radius: var(--radius-xs);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--t-fast);
}

.buyer-tab-btn.active {
    background: #ffffff;
    color: var(--primary);
    box-shadow: var(--shadow-xs);
}

.buyer-auth-error {
    background: var(--danger-light);
    color: var(--danger);
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 12px;
    border: 1px solid #fca5a5;
}

/* Tarjeta Post-Pedido en Pantalla de Éxito */
.success-buyer-card {
    background: linear-gradient(135deg, #F8FAFC 0%, #EEF0FF 100%);
    border: 1.5px solid var(--primary-border);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin: 16px 0;
    text-align: left;
    box-shadow: 0 4px 14px var(--primary-glow);
}

.sg-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--primary-dark);
    margin-bottom: 4px;
}

.sg-title svg {
    color: #F59E0B;
}

.sg-desc {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
    line-height: 1.4;
}

.sg-input-row {
    display: flex;
    gap: 8px;
}

.sg-input-row input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    background: #ffffff;
}

.sg-input-row button {
    padding: 10px 16px;
    font-size: 0.85rem;
    white-space: nowrap;
}

.sg-feedback {
    margin-top: 8px;
    font-size: 0.8rem;
    font-weight: 600;
}

.success-logged-box {
    text-align: center;
}

.sl-badge-row {
    margin-bottom: 10px;
}

.sl-badge {
    background: var(--success-light);
    color: var(--success-dark);
    padding: 6px 12px;
    border-radius: var(--radius-full);
    font-size: 0.82rem;
    font-weight: 700;
    border: 1px solid #a7f3d0;
}

.btn-portal-from-success {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    background: var(--primary);
    color: #ffffff;
    border: none;
    padding: 11px 16px;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all var(--t-fast);
}

.btn-portal-from-success:hover {
    background: var(--primary-dark);
}

/* ── VISTA A PANTALLA COMPLETA: PORTAL DEL COMPRADOR (MI CUENTA) ── */
.buyer-fullscreen-view {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: #F8FAFC;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    animation: bfvFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes bfvFadeIn {
    from { opacity: 0; transform: scale(0.985); }
    to { opacity: 1; transform: scale(1); }
}

/* Barra Superior Sticky */
.bfv-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border-color);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.bfv-back-btn {
    background: #F1F5F9;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 8px 16px;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all var(--t-fast);
}

.bfv-back-btn:hover {
    background: #E2E8F0;
    transform: translateX(-3px);
}

.bfv-title {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--text-primary);
}

.bfv-logout-btn {
    background: #FFF1F2;
    border: 1px solid #FECDD3;
    color: #BE123C;
    padding: 8px 14px;
    border-radius: var(--radius-full);
    font-size: 0.82rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all var(--t-fast);
}

.bfv-logout-btn:hover {
    background: #FEE2E2;
    color: #9F1239;
    border-color: #FDA4AF;
}

/* Contenedor Principal */
.bfv-main-container {
    max-width: 920px;
    width: 100%;
    margin: 0 auto;
    padding: 24px 20px 80px;
    flex: 1;
}

/* Tarjeta Hero de Bienvenida */
.bfv-hero-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
    flex-wrap: wrap;
}

.bfv-hero-details h2 {
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--text-primary);
    margin-bottom: 2px;
    line-height: 1.2;
}

.bfv-hero-details p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
}

.bfv-hero-badge {
    margin-left: auto;
}

.bfv-badge-pill {
    background: var(--primary-light);
    color: var(--primary);
    border: 1px solid var(--primary-border);
    font-size: 0.74rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    letter-spacing: 0.02em;
}

/* Layout de Direcciones (2 Columnas en Desktop) */
.buyer-addresses-layout {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 24px;
    align-items: start;
}

@media (max-width: 768px) {
    .buyer-addresses-layout {
        grid-template-columns: 1fr;
    }
}

.bfv-section-subtitle {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.form-add-address-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 18px;
    box-shadow: var(--shadow-xs);
}

/* Tarjeta de Edición de Perfil (In-Page) */
.bfv-profile-edit-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    max-width: 580px;
    margin: 0 auto;
}

.bfv-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.bfv-card-icon {
    font-size: 1.5rem;
    background: var(--primary-light);
    width: 46px;
    height: 46px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bfv-card-header h4 {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.bfv-card-header p {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin: 0;
}

.bfv-form-actions {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}

/* Fallback / Compatibilidad */
.buyer-portal-card {
    max-width: 520px;
    max-height: 88vh;
    padding: 20px;
    border-radius: var(--radius-xl);
    overflow-y: auto;
}

.buyer-profile-hero {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 16px;
    padding-right: 48px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 14px;
}

.buyer-avatar-bubble {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background: var(--primary);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.1rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px var(--primary-glow);
}

.buyer-profile-info {
    flex: 1;
    min-width: 0;
}

.buyer-profile-info h3 {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

/* Beneficios de Registrarse (Value Proposition - Centrado y con Íconos Nativos) */
.buyer-perks-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    max-width: 440px;
}

.buyer-perk-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--text-secondary);
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    padding: 5px 11px;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all var(--t-fast);
}

.buyer-perk-pill:hover {
    border-color: var(--primary-border);
    color: var(--primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07);
}

.buyer-perk-pill svg {
    color: var(--primary);
    stroke: var(--primary);
    flex-shrink: 0;
}

.btn-buyer-edit-link {
    background: none;
    border: none;
    color: var(--primary);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    transition: opacity var(--t-fast);
}

.btn-buyer-edit-link:hover {
    color: var(--primary-dark);
}

/* ── BOTÓN DE FAVORITOS EN TARJETAS DE PRODUCTO (FEATURE B) ── */
.btn-fav-card {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1.5px solid rgba(226, 232, 240, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 6;
    transition: all var(--t-fast) var(--ease-spring);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    padding: 0;
}

.btn-fav-card:hover {
    background: #ffffff;
    transform: scale(1.12);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25);
    border-color: #fca5a5;
}

.btn-fav-card:active {
    transform: scale(0.92);
}

.btn-fav-card.active {
    background: #FFF1F2;
    border-color: #FECDD3;
}

.btn-fav-card.active svg {
    fill: #EF4444;
    stroke: #EF4444;
    animation: favPop 0.35s var(--ease-spring);
}

@keyframes favPop {
    0% { transform: scale(0.8); }
    50% { transform: scale(1.35); }
    100% { transform: scale(1); }
}

/* ── FILTROS EN MIS PEDIDOS (FEATURE E) ── */
.buyer-orders-filter-bar {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.buyer-filter-pill {
    padding: 6px 12px;
    border-radius: var(--radius-full);
    border: 1.5px solid var(--border-color);
    background: #F8FAFC;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--t-fast);
}

.buyer-filter-pill:hover {
    border-color: var(--primary-border);
    color: var(--primary);
    background: var(--primary-light);
}

.buyer-filter-pill.active {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
    box-shadow: 0 2px 8px var(--primary-glow);
}

/* ── TARJETAS DE FAVORITOS EN PORTAL (FEATURE B) ── */
.buyer-fav-item-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    margin-bottom: 10px;
    box-shadow: var(--shadow-xs);
    transition: all var(--t-fast);
}

.buyer-fav-item-card:hover {
    border-color: var(--primary-border);
    box-shadow: var(--shadow-sm);
}

.bfc-thumb {
    width: 54px;
    height: 54px;
    border-radius: var(--radius-xs);
    object-fit: cover;
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    flex-shrink: 0;
}

.bfc-info {
    flex: 1;
    min-width: 0;
}

.bfc-info h4 {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 3px;
    cursor: pointer;
}

.bfc-info h4:hover {
    color: var(--primary);
}

.bfc-price {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--primary);
}

.bfc-stock-tag {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: var(--radius-full);
    margin-left: 6px;
}

.bfc-stock-tag.out {
    background: #FEE2E2;
    color: #991B1B;
}

.bfc-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.btn-fav-add-cart {
    background: var(--primary-light);
    color: var(--primary);
    border: 1px solid var(--primary-border);
    padding: 6px 10px;
    border-radius: var(--radius-xs);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--t-fast);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.btn-fav-add-cart:hover {
    background: var(--primary);
    color: #ffffff;
}

.btn-fav-remove {
    background: none;
    border: none;
    color: var(--danger);
    cursor: pointer;
    padding: 6px;
    border-radius: var(--radius-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--t-fast);
}

.btn-fav-remove:hover {
    background: var(--danger-light);
}

.buyer-profile-subrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.btn-buyer-logout-text {
    background: none;
    border: none;
    color: var(--danger);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: opacity var(--t-fast);
}

.btn-buyer-logout-text:hover {
    opacity: 0.8;
    color: #dc2626;
}

.buyer-portal-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 24px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}

.buyer-portal-tabs::-webkit-scrollbar {
    display: none;
}

.buyer-portal-tab-btn {
    flex: 1;
    min-width: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: #ffffff;
    color: var(--text-secondary);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--t-fast);
    box-shadow: var(--shadow-xs);
}

.buyer-portal-tab-btn:hover {
    border-color: var(--primary-border);
    color: var(--primary);
    background: var(--primary-light);
}

.buyer-portal-tab-btn.active {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
    box-shadow: 0 4px 14px var(--primary-glow);
}

.buyer-portal-tab-btn.active svg {
    stroke: #ffffff;
}

/* Tarjeta de Pedido en Portal */
.buyer-order-item-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 14px;
    margin-bottom: 12px;
    box-shadow: var(--shadow-xs);
    transition: all var(--t-fast);
}

.buyer-order-item-card:hover {
    border-color: var(--primary-border);
    box-shadow: var(--shadow-sm);
}

.boi-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.boi-store-tag {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.boi-status-badge {
    padding: 3px 8px;
    border-radius: var(--radius-full);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.boi-status-pendiente { background: #FEF3C7; color: #B45309; }
.boi-status-confirmado { background: #DBEAFE; color: #1D4ED8; }
.boi-status-preparando { background: #EDE9FE; color: #6D28D9; }
.boi-status-encamino { background: #E0F2FE; color: #0284C7; }
.boi-status-entregado { background: #D1FAE5; color: #065F46; }
.boi-status-cancelado { background: #FEE2E2; color: #991B1B; }

.boi-meta-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.boi-total {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-primary);
}

.boi-products-mini {
    background: #F8FAFC;
    border-radius: var(--radius-xs);
    padding: 8px 10px;
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-bottom: 10px;
    line-height: 1.4;
}

.boi-actions {
    display: flex;
    gap: 8px;
}

.boi-btn-track {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 10px;
    border-radius: var(--radius-xs);
    font-size: 0.78rem;
    font-weight: 700;
    background: var(--primary-light);
    color: var(--primary);
    border: 1px solid var(--primary-border);
    cursor: pointer;
    text-decoration: none;
}

.boi-btn-wa {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 10px;
    border-radius: var(--radius-xs);
    font-size: 0.78rem;
    font-weight: 700;
    background: #ECFDF5;
    color: #065F46;
    border: 1px solid #A7F3D0;
    cursor: pointer;
    text-decoration: none;
}

/* Tarjeta de Dirección en Portal */
.buyer-addr-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bac-info strong {
    font-size: 0.88rem;
    color: var(--text-primary);
    display: block;
    margin-bottom: 2px;
}

.bac-info p {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin: 0;
}

.bac-btn-del {
    background: none;
    border: none;
    color: var(--danger);
    cursor: pointer;
    padding: 6px;
    border-radius: var(--radius-xs);
}

.bac-btn-del:hover {
    background: var(--danger-light);
}

.form-add-address {
    background: #F8FAFC;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 14px;
    margin-top: 14px;
}

.add-address-title {
    font-weight: 800;
    font-size: 0.88rem;
    color: var(--text-primary);
    margin-bottom: 10px;
}

.buyer-empty-box {
    text-align: center;
    padding: 32px 16px;
    color: var(--text-muted);
}

.empty-icon-bubble {
    font-size: 2.2rem;
    margin-bottom: 10px;
}

.buyer-empty-box h4 {
    color: var(--text-primary);
    font-size: 1rem;
    margin-bottom: 4px;
}

.buyer-empty-box p {
    font-size: 0.82rem;
    max-width: 280px;
    margin: 0 auto;
}

/* ── BARRA SUPERIOR PERSISTENTE (STICKY TOP NAVBAR) ── */
.store-top-navbar {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(226, 232, 240, 0.85);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
    transition: all var(--t-fast);
    padding: 0;
}

.top-nav-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.top-nav-left {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.top-nav-left.scrolled-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.top-nav-left.scrolled-visible:hover {
    opacity: 0.85;
}

.top-nav-logo {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-full);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-light);
    border: 1px solid var(--border-color);
    flex-shrink: 0;
}

.top-nav-logo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.top-nav-logo-avatar {
    font-size: 0.85rem;
    font-weight: 900;
    color: var(--primary);
}

.top-nav-store-name {
    font-family: var(--font-heading);
    font-size: 0.94rem;
    font-weight: 800;
    color: var(--text-primary);
    white-space: nowrap;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.top-nav-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-top-favs {
    background: #ffffff;
    color: var(--text-secondary);
    border: 1.5px solid var(--border-color);
    padding: 6px 13px;
    border-radius: var(--radius-full);
    font-size: 0.80rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    position: relative;
    transition: all var(--t-fast);
    box-shadow: var(--shadow-xs);
}

.btn-top-favs:hover {
    border-color: #FECDD3;
    color: #E11D48;
    background: #FFF1F2;
    transform: translateY(-1px);
}

.btn-top-favs svg {
    stroke: currentColor;
    color: #E11D48;
}

.top-fav-badge {
    background: #EF4444;
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 800;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    animation: popBadge 0.25s var(--ease-spring);
}

@keyframes popBadge {
    0% { transform: scale(0.5); }
    80% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.btn-top-cart {
    background: #ffffff;
    color: var(--text-primary);
    border: 1.5px solid var(--border-color);
    padding: 6px 13px;
    border-radius: var(--radius-full);
    font-size: 0.80rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    position: relative;
    transition: all var(--t-fast);
    box-shadow: var(--shadow-xs);
}

.btn-top-cart:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-light);
    transform: translateY(-1px);
}

.btn-top-cart svg {
    stroke: currentColor;
    color: var(--primary);
    flex-shrink: 0;
}

.top-cart-badge {
    background: #F1F5F9;
    color: #64748B;
    font-size: 0.68rem;
    font-weight: 800;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: all var(--t-fast);
}

.top-cart-badge.has-items {
    background: var(--primary);
    color: #ffffff;
    box-shadow: 0 2px 6px var(--primary-glow);
    animation: popBadge 0.25s var(--ease-spring);
}

.btn-top-account {
    background: var(--primary);
    color: #ffffff;
    border: 1.5px solid var(--primary);
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-size: 0.80rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all var(--t-fast);
    box-shadow: 0 2px 8px var(--primary-glow);
    white-space: nowrap;
}

.btn-top-account:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    transform: translateY(-1px);
}

.btn-top-account svg {
    stroke: #ffffff;
}

@media (max-width: 600px) {
    .top-nav-inner {
        padding: 6px 12px;
    }
    .top-nav-store-name {
        max-width: 120px;
        font-size: 0.86rem;
    }
    .top-fav-label,
    .top-cart-label {
        display: none;
    }
    .btn-top-favs,
    .btn-top-cart {
        padding: 6px 10px;
    }
    .btn-top-account {
        padding: 6px 12px;
        font-size: 0.78rem;
    }
}

/* ── BANNER DE FAVORITOS PARA VISITANTES (MODO INVITADO) ── */
.buyer-guest-fav-banner {
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    border: 1px solid #BFDBFE;
    border-radius: var(--radius-md);
    padding: 12px 16px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-shadow: var(--shadow-xs);
    flex-wrap: wrap;
}

.bgfb-content {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 220px;
}

.bgfb-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
}

.bgfb-text strong {
    display: block;
    font-size: 0.86rem;
    color: #1E40AF;
    margin-bottom: 2px;
}

.bgfb-text p {
    margin: 0;
    font-size: 0.76rem;
    color: #3B82F6;
}

.btn-guest-save-favs {
    background: #2563EB;
    color: #ffffff;
    border: none;
    padding: 8px 14px;
    border-radius: var(--radius-full);
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--t-fast);
}

.btn-guest-save-favs:hover {
    background: #1D4ED8;
}

.bfv-login-pill-btn {
    background: var(--primary-light);
    border: 1px solid var(--primary-border);
    color: var(--primary);
    padding: 8px 14px;
    border-radius: var(--radius-full);
    font-size: 0.82rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all var(--t-fast);
}

.bfv-login-pill-btn:hover {
    background: var(--primary);
    color: #ffffff;
}

.bfv-login-pill-btn svg {
    stroke: currentColor;
}

/* ============================================================
   🏪 PIE DE PÁGINA MODERNO (STORE FOOTER & POLÍTICAS)
   ============================================================ */
.store-footer {
    background: #ffffff;
    border-top: 1px solid var(--border-color);
    margin-top: 3.5rem;
    padding-top: 2.5rem;
    padding-bottom: 120px; /* Margen de seguridad para que la barra flotante no tape el footer */
    color: var(--text-primary);
    font-size: 0.88rem;
    position: relative;
    z-index: 10;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.25rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .footer-container {
        grid-template-columns: 1.2fr 1fr 1fr;
        gap: 2.5rem;
    }
}

.footer-col {
    display: flex;
    flex-direction: column;
}

.footer-brand-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.footer-logo-wrap {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: var(--shadow-xs);
}

.footer-logo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.footer-logo-avatar {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: #ffffff;
    font-weight: 800;
    font-size: 1.2rem;
}

.footer-store-name {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
}

.footer-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #EFF6FF;
    color: #2563EB;
    border: 1px solid #BFDBFE;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 0.72rem;
    font-weight: 700;
    margin-top: 4px;
    cursor: pointer;
    transition: all var(--t-fast);
}

.footer-verified-badge:hover {
    background: #DBEAFE;
    transform: translateY(-1px);
}

.footer-company-info {
    margin: 6px 0;
    color: var(--text-secondary);
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.footer-data-pill {
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    padding: 2px 6px;
    border-radius: var(--radius-xs);
    font-weight: 600;
    color: var(--text-primary);
}

.footer-address {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 0.8rem;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    line-height: 1.4;
}

.footer-address svg {
    flex-shrink: 0;
    margin-top: 2px;
}

/* Fila de Redes Sociales en Footer */
.footer-social-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.footer-social-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-subtle, #F8FAFC);
    border: 1px solid var(--border-color, #E2E8F0);
    color: var(--text-secondary, #475569);
    text-decoration: none;
    transition: all var(--t-normal, 0.22s) var(--ease-out, ease);
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(0,0,0,0.04));
}

.footer-social-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,0.08));
}

.footer-social-ig:hover {
    background: linear-gradient(135deg, #833AB4, #FD1D1D, #FCB045);
    color: #FFFFFF;
    border-color: transparent;
}

.footer-social-tt:hover {
    background: #000000;
    color: #FFFFFF;
    border-color: #000000;
}

.footer-social-fb:hover {
    background: #1877F2;
    color: #FFFFFF;
    border-color: #1877F2;
}

.footer-col-title {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 14px;
    letter-spacing: -0.2px;
    position: relative;
    padding-bottom: 8px;
}

.footer-col-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 24px;
    height: 2px;
    background: var(--primary);
    border-radius: 2px;
}

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

.footer-link-btn {
    background: transparent;
    border: none;
    padding: 6px 0;
    color: var(--text-secondary);
    font-size: 0.84rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    transition: color var(--t-fast), transform var(--t-fast);
}

.footer-link-btn:hover {
    color: var(--primary);
    transform: translateX(3px);
}

.footer-link-btn svg {
    color: var(--primary);
    flex-shrink: 0;
    transition: transform var(--t-fast);
}

.footer-contact-desc {
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.5;
    margin-bottom: 14px;
}

.footer-contact-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-btn-wa {
    background: #25D366;
    color: #ffffff;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 0.84rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.25);
    transition: all var(--t-fast);
}

.footer-btn-wa:hover {
    background: #20BA5A;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(37, 211, 102, 0.35);
}

.footer-btn-track {
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 9px 14px;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all var(--t-fast);
}

.footer-btn-track:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: #ffffff;
}

/* Barra Inferior del Footer (Safe Harbor & Copyright) */
.footer-bottom-bar {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
    background: #FAFAFA;
}

.footer-bottom-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

.footer-safe-harbor {
    font-size: 0.74rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0 0 14px;
    text-align: justify;
}

.footer-safe-harbor strong {
    color: var(--text-secondary);
}

.footer-copyright-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.76rem;
    color: var(--text-muted);
    padding-bottom: 0.5rem;
}

.footer-platform-badge {
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
    color: #475569;
    padding: 3px 8px;
    border-radius: var(--radius-full);
    font-weight: 600;
}

/* ============================================================
   📋 MODALES DE POLÍTICAS Y VERIFICACIÓN
   ============================================================ */
.modal-card-policy {
    max-width: 620px;
    width: 100%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.policy-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 1.25rem 1.5rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.policy-icon-bubble {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--primary-light);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.policy-icon-bubble svg {
    width: 24px;
    height: 24px;
    stroke: var(--primary);
    display: block;
}

.policy-modal-title {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
}

.policy-modal-subtitle {
    margin: 2px 0 0;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.policy-modal-body {
    padding: 1.25rem 1.5rem;
    overflow-y: auto;
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--text-primary);
}

.policy-modal-body h4 {
    font-family: var(--font-heading);
    font-size: 0.96rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 1.1rem 0 0.45rem;
    display: flex;
    align-items: center;
    gap: 7px;
}

.policy-modal-body h4:first-child {
    margin-top: 0;
}

.policy-modal-body p {
    margin: 0 0 0.8rem;
    color: #475569;
}

.policy-modal-body ul {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
    color: #475569;
}

.policy-modal-body li {
    margin-bottom: 0.45rem;
}

.policy-highlight-card {
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin: 14px 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.policy-highlight-header {
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
    font-size: 0.85rem;
}

.policy-highlight-header svg {
    stroke: var(--primary);
    flex-shrink: 0;
}

.policy-highlight-text {
    margin: 0;
    line-height: 1.5;
    color: #475569;
}

.policy-list-item-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 4px;
}

.policy-list-item-title svg {
    stroke: var(--primary);
    flex-shrink: 0;
    vertical-align: text-bottom;
}

.policy-inline-svg {
    display: inline-block;
    vertical-align: -2px;
    margin-right: 4px;
    stroke: var(--primary);
}

.policy-notice-alert {
    background: #fffbeb;
    border: 1px solid #fef3c7;
    border-left: 3px solid #f59e0b;
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin: 12px 0;
}

.policy-notice-alert .policy-highlight-header {
    color: #92400e;
}

.policy-notice-alert .policy-highlight-header svg {
    stroke: #d97706;
}

.policy-modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
    background: #ffffff;
}

/* Modal de Tienda Verificada */
.modal-card-verification {
    max-width: 480px;
    width: 100%;
}

.verification-modal-header {
    text-align: center;
    padding: 1.5rem 1.5rem 0.5rem;
}

.verification-badge-bubble {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #EFF6FF;
    color: #2563EB;
    border: 2px solid #BFDBFE;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
}

.verification-modal-header h3 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
}

.verification-modal-body {
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.verification-check-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: var(--bg-subtle);
    padding: 12px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    transition: all var(--t-fast);
}

.verification-check-item:hover {
    background: var(--bg-card);
    border-color: var(--primary-border, var(--border-focus));
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.v-semantic-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
    transition: transform var(--t-fast);
}

.v-icon-wa {
    background: rgba(37, 211, 102, 0.12);
    color: #15803D;
    border: 1px solid rgba(37, 211, 102, 0.28);
}

.v-icon-shipping {
    background: rgba(37, 99, 235, 0.10);
    color: #2563EB;
    border: 1px solid rgba(37, 99, 235, 0.22);
}

.v-icon-activity {
    background: rgba(124, 58, 237, 0.10);
    color: #7C3AED;
    border: 1px solid rgba(124, 58, 237, 0.22);
}

.v-icon-ruc {
    background: rgba(217, 119, 6, 0.10);
    color: #D97706;
    border: 1px solid rgba(217, 119, 6, 0.24);
}

.v-icon-policy {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.v-check-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #10B981;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.78rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.verification-check-item strong {
    font-size: 0.88rem;
    color: var(--text-primary);
    display: block;
    margin-bottom: 3px;
    line-height: 1.3;
}

.verification-check-item p {
    margin: 0;
    font-size: 0.80rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.verification-modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
}

/* ============================================================
   SISTEMA DE TOASTS Y NOTIFICACIONES MODERNAS (STOREFRONT)
   ============================================================ */
.store-toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
    max-width: calc(100vw - 32px);
    width: 380px;
}

@media (max-width: 640px) {
    .store-toast-container {
        top: 14px;
        right: 16px;
        left: 16px;
        width: auto;
        max-width: 100%;
    }
}

.store-toast {
    position: relative;
    background: #0f172a;
    color: #ffffff;
    border-radius: var(--radius-md);
    padding: 14px 16px 16px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.28), 0 4px 12px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    pointer-events: auto;
    overflow: hidden;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: toastSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transform-origin: top center;
    transition: transform 0.2s ease, opacity 0.25s ease;
}

.store-toast.hiding {
    animation: toastSlideOut 0.25s cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes toastSlideIn {
    0% {
        opacity: 0;
        transform: translateY(-20px) scale(0.94);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes toastSlideOut {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-16px) scale(0.92);
    }
}

.store-toast-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.store-toast-body {
    flex: 1;
    min-width: 0;
}

.store-toast-title {
    font-family: var(--font-heading);
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 2px;
}

.store-toast-desc {
    font-size: 0.82rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.85);
    word-break: break-word;
}

.store-toast-close {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: var(--radius-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    line-height: 1;
    transition: color 0.15s ease, background 0.15s ease;
}

.store-toast-close:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
}

/* Tipos de Toasts */
.store-toast-success {
    border-left: 4px solid var(--success);
}
.store-toast-success .store-toast-icon {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

.store-toast-error {
    border-left: 4px solid var(--danger);
}
.store-toast-error .store-toast-icon {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.store-toast-warning {
    border-left: 4px solid var(--warning);
}
.store-toast-warning .store-toast-icon {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

.store-toast-info {
    border-left: 4px solid var(--primary);
}
.store-toast-info .store-toast-icon {
    background: rgba(91, 79, 232, 0.25);
    color: #a5b4fc;
}

/* Barra de progreso de tiempo */
.store-toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: rgba(255, 255, 255, 0.15);
}

.store-toast-progress-bar {
    height: 100%;
    width: 100%;
    transform-origin: left;
    transition: transform linear;
}

.store-toast-success .store-toast-progress-bar { background: var(--success); }
.store-toast-error .store-toast-progress-bar { background: var(--danger); }
.store-toast-warning .store-toast-progress-bar { background: var(--warning); }
.store-toast-info .store-toast-progress-bar { background: var(--primary); }

/* ============================================================
   BANNERS DE ALERTA CONTEXTUALES (INLINE ALERTS)
   ============================================================ */
.store-inline-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    margin: 14px 0 16px;
    font-size: 0.85rem;
    line-height: 1.45;
    position: relative;
    animation: bannerFadeIn 0.25s var(--ease-out);
}

@keyframes bannerFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.store-inline-alert-danger {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.store-inline-alert-danger .store-inline-alert-icon {
    color: #dc2626;
    flex-shrink: 0;
    margin-top: 1px;
}

.store-inline-alert-title {
    font-weight: 700;
    font-size: 0.88rem;
    margin-bottom: 2px;
    font-family: var(--font-heading);
}

.store-inline-alert-desc {
    color: #7f1d1d;
    font-size: 0.82rem;
}

.store-inline-alert-actions {
    margin-top: 8px;
}

.store-alert-btn-wa {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #25d366;
    color: #ffffff !important;
    font-weight: 700;
    font-size: 0.78rem;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 2px 8px rgba(37, 211, 102, 0.3);
}

.store-alert-btn-wa:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.45);
}

.store-inline-alert-close {
    background: none;
    border: none;
    color: #991b1b;
    opacity: 0.6;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0 4px;
    align-self: flex-start;
    transition: opacity 0.15s ease;
}

.store-inline-alert-close:hover {
    opacity: 1;
}

/* Resaltado de inputs con error y animación Shake */
.input-field-error {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.22) !important;
    background-color: #fffbfb !important;
    animation: fieldShake 0.35s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes fieldShake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}

/* ============================================================
   MODAL DE CONFIRMACIÓN MODERNO (REEMPLAZO WINDOW.CONFIRM)
   ============================================================ */
.store-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 100010;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: confirmFadeIn 0.2s ease-out;
}

@keyframes confirmFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.store-confirm-card {
    background: var(--bg-card);
    max-width: 400px;
    width: 100%;
    border-radius: var(--radius-xl);
    padding: 24px;
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border-color);
    text-align: center;
    animation: confirmCardPop 0.25s var(--ease-spring);
}

@keyframes confirmCardPop {
    from { transform: scale(0.92); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.store-confirm-icon-box {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fef2f2;
    color: #ef4444;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
}

.store-confirm-title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.store-confirm-desc {
    font-size: 0.86rem;
    color: var(--text-secondary);
    line-height: 1.45;
    margin-bottom: 20px;
}

.store-confirm-actions {
    display: flex;
    gap: 10px;
}

.store-confirm-actions button {
    flex: 1;
    padding: 11px 16px;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: 0.86rem;
    cursor: pointer;
    transition: all var(--t-fast);
}

.btn-confirm-cancel {
    background: var(--bg-subtle);
    color: var(--text-secondary);
    border: 1.5px solid var(--border-color);
}

.btn-confirm-cancel:hover {
    background: var(--border-color);
    color: var(--text-primary);
}

.btn-confirm-danger {
    background: var(--danger);
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
}

.btn-confirm-danger:hover {
    background: #dc2626;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(239, 68, 68, 0.45);
}

/* ── WIDGET DE MASCOTA ASISTENTE GIRLY (ESTILO BOUTIQUE COQUETTE) ── */
.mascot-dock-widget {
    position: fixed;
    bottom: 22px;
    right: 18px;
    z-index: 85;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    pointer-events: none;
    transition: bottom 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.25s ease;
    user-select: none;
}

.mascot-dock-widget.has-floating-bar {
    bottom: 86px;
}

/* Globito de Diálogo Coquette */
.mascot-speech-bubble {
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1.5px solid #FBCFE8;
    border-radius: 18px 18px 4px 18px;
    padding: 10px 14px 10px 14px;
    max-width: 220px;
    box-shadow: 0 12px 28px -6px rgba(244, 63, 94, 0.22), 0 4px 12px -2px rgba(0, 0, 0, 0.06);
    margin-bottom: 8px;
    pointer-events: auto;
    cursor: pointer;
    position: relative;
    animation: mascotBubblePop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}

.mascot-speech-bubble:hover {
    transform: translateY(-2px) scale(1.02);
    border-color: #F43F5E;
    box-shadow: 0 16px 32px -4px rgba(244, 63, 94, 0.30);
}

.mascot-bubble-text {
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 600;
    color: #4C1D95;
    line-height: 1.35;
    display: block;
    padding-right: 14px;
}

.mascot-bubble-close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(244, 63, 94, 0.1);
    color: #E11D48;
    border: none;
    font-size: 11px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--t-fast);
}

.mascot-bubble-close:hover {
    background: #E11D48;
    color: #FFFFFF;
    transform: scale(1.15);
}

/* Cola del globito */
.mascot-speech-bubble::after {
    content: '';
    position: absolute;
    bottom: -7px;
    right: 28px;
    width: 12px;
    height: 12px;
    background: #FFFFFF;
    border-right: 1.5px solid #FBCFE8;
    border-bottom: 1.5px solid #FBCFE8;
    transform: rotate(45deg);
    pointer-events: none;
}

/* Botón y Avatar de la Mascota */
.mascot-avatar-btn {
    width: 72px;
    height: 72px;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    pointer-events: auto;
    position: relative;
    outline: none;
    animation: mascotGentleFloat 3.6s ease-in-out infinite;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    filter: drop-shadow(0 8px 18px rgba(244, 63, 94, 0.25));
}

.mascot-avatar-btn:hover {
    animation-play-state: paused;
    transform: scale(1.12) rotate(4deg) translateY(-2px);
    filter: drop-shadow(0 12px 22px rgba(244, 63, 94, 0.38));
}

.mascot-avatar-btn:active {
    transform: scale(0.95) rotate(-2deg);
}

.mascot-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
}

/* Badge mini de interacción mágica sobre la mascota */
.mascot-sparkle-badge {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #FB7185 0%, #F43F5E 100%);
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    box-shadow: 0 3px 8px rgba(244, 63, 94, 0.35);
    transition: transform var(--t-fast);
}

/* Insignia oficial de WhatsApp sobre el avatar de la mascota */
.mascot-wa-badge {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 26px;
    height: 26px;
    background: #25D366;
    border: 2.5px solid #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    box-shadow: 0 3px 9px rgba(37, 211, 102, 0.45);
    transition: transform var(--t-fast);
    z-index: 2;
}

.mascot-avatar-btn:hover .mascot-sparkle-badge,
.mascot-avatar-btn:hover .mascot-wa-badge {
    transform: scale(1.18);
}

/* ── BOTÓN FLOTANTE DIRECTO DE WHATSAPP (CUANDO LA MASCOTA ESTÁ INACTIVA) ── */
.floating-wa-btn {
    position: fixed;
    bottom: 22px;
    right: 18px;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.42);
    z-index: 85;
    text-decoration: none;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), bottom 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow var(--t-fast);
}
.floating-wa-btn:hover {
    transform: scale(1.08) translateY(-2px);
    box-shadow: 0 12px 28px rgba(37, 211, 102, 0.52);
}
.floating-wa-btn:active {
    transform: scale(0.95);
}
.floating-wa-btn.has-floating-bar {
    bottom: 86px;
}
@media (min-width: 1024px) {
    .floating-wa-btn {
        bottom: 28px;
        right: 28px;
        width: 60px;
        height: 60px;
    }
    .floating-wa-btn.has-floating-bar {
        bottom: 96px;
    }
}

/* Animaciones suaves */
@keyframes mascotGentleFloat {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-7px) rotate(1.5deg);
    }
}

@keyframes mascotBubblePop {
    0% {
        opacity: 0;
        transform: translateY(12px) scale(0.85);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Estado de la mascota en el Carrito Vacío */
.cart-empty-mascot-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    position: relative;
}

.cart-empty-mascot-img {
    width: 105px;
    height: 105px;
    object-fit: contain;
    animation: mascotGentleFloat 4s ease-in-out infinite;
    filter: drop-shadow(0 8px 16px rgba(244, 63, 94, 0.20));
}

.cart-empty-ground-shadow {
    width: 80px;
    height: 10px;
    background: radial-gradient(ellipse at center, rgba(124, 58, 237, 0.2) 0%, rgba(244, 63, 94, 0.08) 50%, transparent 70%);
    border-radius: 50%;
    margin-top: -6px;
}

/* ── POPOVER INTERACTIVO DE LA MASCOTA ── */
/* ── BACKDROP PARA BOTTOM SHEET MÓVIL DEL ASISTENTE ── */
.mascot-sheet-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 94;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.mascot-sheet-backdrop.visible {
    opacity: 1;
    pointer-events: auto;
}
@media (min-width: 640px) {
    .mascot-sheet-backdrop {
        display: none !important;
    }
}

/* Tirador / Handle para Bottom Sheet Móvil */
.mascot-sheet-handle {
    display: block;
    width: 40px;
    height: 4px;
    background: #CBD5E1;
    border-radius: 4px;
    margin: 8px auto 2px auto;
}
@media (min-width: 640px) {
    .mascot-sheet-handle {
        display: none !important;
    }
}

/* ── POPOVER / BOTTOM SHEET INTERACTIVO DE LA MASCOTA ── */
.mascot-popover-card {
    position: fixed;
    bottom: 104px;
    right: 18px;
    width: 324px;
    max-width: calc(100vw - 36px);
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1.5px solid #FBCFE8;
    border-radius: 20px;
    box-shadow: 0 20px 45px -8px rgba(244, 63, 94, 0.24), 0 8px 20px -4px rgba(0, 0, 0, 0.08);
    z-index: 95;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.92) translateY(14px);
    transform-origin: bottom right;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
    user-select: none;
    overflow: hidden;
}

.mascot-popover-card.visible {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1) translateY(0);
}

/* Modo Bottom Sheet en Móviles (< 640px) */
@media (max-width: 639px) {
    .mascot-popover-card {
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 24px 24px 0 0 !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: none !important;
        border-top: 1.5px solid #FBCFE8 !important;
        box-shadow: 0 -12px 36px rgba(15, 23, 42, 0.16) !important;
        transform: translateY(100%) !important;
        transform-origin: bottom center !important;
        max-height: 85vh;
        display: flex;
        flex-direction: column;
    }
    .mascot-popover-card.visible {
        transform: translateY(0) !important;
    }
    .mascot-popover-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

.mascot-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px 10px 14px;
    background: linear-gradient(135deg, #FFF1F2 0%, #FAF5FF 100%);
    border-bottom: 1px solid #FCE7F3;
}

.mascot-popover-identity {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.mascot-popover-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 2px solid #FDA4AF;
    padding: 2px;
    box-shadow: 0 4px 10px rgba(244, 63, 94, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.mascot-popover-avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
}

.mascot-popover-avatar img.avatar-human {
    object-fit: cover;
}

.mascot-popover-identity-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mascot-popover-name-row {
    display: flex;
    align-items: center;
    gap: 7px;
}

.mascot-popover-name {
    font-family: var(--font-heading);
    font-size: 0.94rem;
    font-weight: 700;
    color: #1E1B4B;
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mascot-popover-online-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 600;
    color: #059669;
    background: rgba(16, 185, 129, 0.12);
    padding: 1.5px 6px;
    border-radius: 999px;
    flex-shrink: 0;
}

.mascot-popover-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10B981;
    display: inline-block;
    animation: mascotPulseDot 2s infinite ease-in-out;
}

@keyframes mascotPulseDot {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
    }
    70% {
        box-shadow: 0 0 0 5px rgba(16, 185, 129, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

.mascot-popover-meta-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 1px;
    flex-wrap: wrap;
}

.mascot-popover-role {
    font-family: var(--font-body);
    font-size: 0.70rem;
    font-weight: 600;
    color: #BE123C;
    background: rgba(253, 242, 248, 0.95);
    padding: 1.5px 6px;
    border-radius: 8px;
    display: inline-block;
}

.mascot-popover-close-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.05);
    color: #64748B;
    font-size: 13px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--t-fast);
    flex-shrink: 0;
}

.mascot-popover-close-btn:hover {
    background: #E11D48;
    color: #FFFFFF;
    transform: scale(1.08);
}

.mascot-popover-body {
    padding: 12px 14px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Burbuja de chat personal del asesor / mascota */
.mascot-popover-bubble {
    background: #FDF4FF;
    border: 1px solid #F5D0FE;
    border-radius: 14px;
    border-top-left-radius: 3px;
    padding: 10px 12px;
    box-shadow: 0 2px 6px rgba(168, 85, 247, 0.05);
}

.mascot-popover-bubble p {
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: #4C1D95;
    line-height: 1.40;
    margin: 0;
    font-weight: 500;
}

/* Tarjeta de tips y recomendaciones */
.mascot-tip-box {
    background: linear-gradient(135deg, #FFF1F2 0%, #FAF5FF 100%);
    border: 1.5px solid #FECDD3;
    border-radius: 14px;
    padding: 10px 12px;
    box-shadow: 0 3px 10px -2px rgba(244, 63, 94, 0.08);
}

.mascot-tip-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
}

.mascot-tip-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-body);
    font-size: 0.69rem;
    font-weight: 700;
    color: #E11D48;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.mascot-tip-rotar-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: none;
    background: rgba(225, 29, 72, 0.08);
    color: #BE123C;
    font-family: var(--font-body);
    font-size: 0.69rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 7px;
    cursor: pointer;
    transition: all var(--t-fast);
}

.mascot-tip-rotar-btn:hover {
    background: #E11D48;
    color: #FFFFFF;
    transform: scale(1.05);
}

.mascot-rotar-icon {
    display: inline-block;
    transition: transform 0.25s ease;
}

.mascot-tip-rotar-btn:hover .mascot-rotar-icon {
    transform: rotate(180deg);
}

.mascot-tip-content {
    font-family: var(--font-body);
    font-size: 0.80rem;
    color: #334155;
    line-height: 1.40;
    margin: 0;
    font-weight: 500;
}

/* Envoltorio y Botón Destacado de WhatsApp (CTA Principal y Único) */
.mascot-popover-wa-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 2px;
}

.mascot-popover-action-btn.whatsapp-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 14px;
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    color: #FFFFFF;
    border-radius: 14px;
    font-family: var(--font-body);
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
    transition: all var(--t-fast);
    border: none;
    cursor: pointer;
    text-align: center;
}

.mascot-popover-action-btn.whatsapp-cta:hover {
    filter: brightness(1.06);
    transform: translateY(-1.5px);
    box-shadow: 0 6px 18px rgba(37, 211, 102, 0.45);
}

.mascot-popover-action-btn.whatsapp-cta:active {
    transform: scale(0.98);
}

.mascot-popover-wa-subtext {
    text-align: center;
    font-family: var(--font-body);
    font-size: 0.68rem;
    color: #64748B;
    font-weight: 500;
}

/* Modo Solo Tips (Sin WhatsApp): Botón de explorar catálogo */
.mascot-popover-tips-only-footer {
    display: flex;
    justify-content: center;
    margin-top: 4px;
    padding-top: 2px;
}

.mascot-popover-explore-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #FFF1F2 0%, #FDF4FF 100%);
    border: 1.5px solid #FBCFE8;
    border-radius: 12px;
    color: #BE123C;
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--t-fast);
}

.mascot-popover-explore-btn:hover {
    background: linear-gradient(135deg, #FCE7F3 0%, #F5D0FE 100%);
    border-color: #F43F5E;
    color: #9F1239;
    transform: translateY(-1.5px);
    box-shadow: 0 4px 12px rgba(244, 63, 94, 0.16);
}

.mascot-popover-explore-btn:active {
    transform: scale(0.98);
}

.mascot-popover-explore-btn svg {
    transition: transform var(--t-fast);
}

.mascot-popover-explore-btn:hover svg {
    transform: translateX(3px);
}

.mascot-tip-tag-svg {
    flex-shrink: 0;
}

.mascot-bubble-close svg,
.mascot-popover-close-btn svg {
    display: block;
    pointer-events: none;
}

/* Grilla de Acciones Rápidas Secundarias (mantenida por compatibilidad) */
.mascot-popover-quick-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.mascot-popover-action-btn.secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 10px;
    background: #F8FAFC;
    color: #334155;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    font-family: var(--font-body);
    font-size: 0.80rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--t-fast);
}

.mascot-popover-action-btn.secondary:hover {
    background: #F1F5F9;
    border-color: #CBD5E1;
    transform: translateY(-1.5px);
}

@media (min-width: 1024px) {
    .mascot-avatar-btn {
        width: 80px;
        height: 80px;
    }
    .mascot-dock-widget {
        bottom: 28px;
        right: 28px;
    }
    .mascot-dock-widget.has-floating-bar {
        bottom: 96px;
    }
    .mascot-popover-card {
        bottom: 114px;
        right: 28px;
        width: 330px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   SISTEMA DE CAMPAÑAS FESTIVAS Y AMBIENTACIÓN ESTACIONAL (PUNTO 4)
   ═══════════════════════════════════════════════════════════════════════ */

/* Contenedor anclado a la tienda de partículas ambientales (pegado a la tienda, scrolls con la tienda) */
:root {
    --campaign-area-height: 820px;
}

@media (max-width: 640px) {
    :root {
        --campaign-area-height: 640px;
    }
}

.store-campaign-particles {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1140px;
    height: var(--campaign-area-height, 820px);
    pointer-events: none;
    z-index: 6;
    overflow: hidden;
    contain: layout style paint;
}

.campaign-particle {
    position: absolute;
    user-select: none;
    pointer-events: none;
    will-change: transform, opacity;
    backface-visibility: hidden;
    line-height: 1;
}

/* 1. NAVIDAD MÁGICA 🎄 */
.campaign-particle.navidad {
    color: #E2E8F0;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.9), 0 0 16px rgba(244, 63, 94, 0.4);
    animation: campaignSnowFall linear infinite;
}

body.campaign-navidad .header-search-bar-wrap {
    box-shadow: 0 4px 18px rgba(225, 29, 72, 0.08);
}

@keyframes campaignSnowFall {
    0% {
        transform: translateY(-35px) translateX(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: var(--p-op, 0.85);
    }
    90% {
        opacity: var(--p-op, 0.85);
    }
    100% {
        transform: translateY(var(--campaign-area-height, 820px)) translateX(var(--p-drift, 25px)) rotate(360deg);
        opacity: 0;
    }
}

/* 2. HALLOWEEN COQUETTE / SPOOKY CHIC 🎃👻 */
/* Fantasmas Flotantes Pastel (volando desde abajo hacia arriba con vaivén) */
.halloween-ghost-item {
    position: absolute;
    top: 0;
    width: 74px;
    height: 92px;
    pointer-events: none;
    user-select: none;
    will-change: transform, opacity;
    animation: ghostFloatUp linear infinite;
    z-index: 10;
    filter: drop-shadow(0 12px 26px rgba(244, 114, 182, 0.55));
}

@media (max-width: 640px) {
    .halloween-ghost-item {
        width: 58px;
        height: 72px;
    }
}

.halloween-ghost-svg {
    width: 100%;
    height: 100%;
    display: block;
}

@keyframes ghostFloatUp {
    0% {
        transform: translate3d(0, var(--campaign-area-height, 820px), 0) rotate(-5deg);
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    28% {
        transform: translate3d(26px, calc(var(--campaign-area-height, 820px) * 0.70), 0) rotate(6deg);
    }
    52% {
        transform: translate3d(-22px, calc(var(--campaign-area-height, 820px) * 0.45), 0) rotate(-6deg);
    }
    76% {
        transform: translate3d(24px, calc(var(--campaign-area-height, 820px) * 0.20), 0) rotate(5deg);
    }
    92% {
        opacity: 1;
    }
    100% {
        transform: translate3d(0, -100px, 0) rotate(-3deg);
        opacity: 0;
    }
}

/* Murciélagos Volando de lado a lado con aleteo fluido y natural */
.halloween-bat-track {
    position: absolute;
    left: 0;
    width: 100%;
    pointer-events: none;
    user-select: none;
    will-change: transform, opacity;
    z-index: 10;
}

.halloween-bat-track.fly-ltr {
    animation: batFlyLeftToRight linear infinite;
}

.halloween-bat-track.fly-rtl {
    animation: batFlyRightToLeft linear infinite;
}

.halloween-bat-wing-body {
    width: 50px;
    height: 30px;
    will-change: transform;
    animation: batWingFlap 0.35s ease-in-out infinite alternate;
    filter: drop-shadow(0 4px 10px rgba(15, 23, 42, 0.45));
}

.halloween-bat-wing-body.bat-flipped {
    transform-origin: center;
    scale: -1 1;
}

.halloween-bat-svg {
    width: 100%;
    height: 100%;
    display: block;
}

@keyframes batFlyLeftToRight {
    0% {
        transform: translate3d(-60px, 0, 0) rotate(5deg);
        opacity: 0;
    }
    6% {
        opacity: 0.95;
    }
    25% {
        transform: translate3d(25vw, 15px, 0) rotate(3deg);
    }
    50% {
        transform: translate3d(50vw, -12px, 0) rotate(6deg);
    }
    75% {
        transform: translate3d(75vw, 14px, 0) rotate(4deg);
    }
    94% {
        opacity: 0.95;
    }
    100% {
        transform: translate3d(calc(100% + 60px), -6px, 0) rotate(5deg);
        opacity: 0;
    }
}

@keyframes batFlyRightToLeft {
    0% {
        transform: translate3d(calc(100% + 60px), 0, 0) rotate(-5deg);
        opacity: 0;
    }
    6% {
        opacity: 0.95;
    }
    28% {
        transform: translate3d(72%, -16px, 0) rotate(-3deg);
    }
    58% {
        transform: translate3d(36%, 14px, 0) rotate(-6deg);
    }
    94% {
        opacity: 0.95;
    }
    100% {
        transform: translate3d(-60px, -8px, 0) rotate(-5deg);
        opacity: 0;
    }
}

@keyframes batWingFlap {
    0% {
        transform: scaleY(1) rotate(0deg);
    }
    50% {
        transform: scaleY(0.76) rotate(3deg);
    }
    100% {
        transform: scaleY(0.95) rotate(-3deg);
    }
}

/* Partículas ambientales de fondo para Halloween (flores rosadas, lunas negras y brillos) */
.campaign-particle.halloween {
    text-shadow: 0 0 10px rgba(244, 114, 182, 0.6), 0 0 16px rgba(251, 207, 232, 0.4);
    animation: campaignSpookyRise linear infinite;
}

@keyframes campaignSpookyRise {
    0% {
        transform: translateY(var(--campaign-area-height, 820px)) translateX(0) scale(0.85);
        opacity: 0;
    }
    15% {
        opacity: var(--p-op, 0.7);
    }
    85% {
        opacity: var(--p-op, 0.7);
    }
    100% {
        transform: translateY(-35px) translateX(var(--p-drift, -20px)) scale(1.15);
        opacity: 0;
    }
}

/* ── TELARAÑAS COQUETTE ENTRE TARJETAS DE PRODUCTO (HALLOWEEN) 🕸️ ── */
body.campaign-halloween .product-card:nth-child(2)::before,
body.campaign-halloween .product-card:nth-child(3)::before,
body.campaign-halloween .product-card:nth-child(6)::before,
body.campaign-halloween .product-card:nth-child(7)::before,
body.campaign-halloween .product-card:nth-child(10)::before,
body.campaign-halloween .product-card:nth-child(11)::before {
    content: '';
    position: absolute;
    top: -8px;
    left: -24px;
    width: 76px;
    height: 76px;
    pointer-events: none;
    z-index: 12;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none'%3E%3Cpath d='M0 0 L80 0 M0 0 L74 28 M0 0 L58 58 M0 0 L28 74 M0 0 L0 80' stroke='%23EC4899' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M0 0 L80 0 M0 0 L74 28 M0 0 L58 58 M0 0 L28 74 M0 0 L0 80' stroke='%23FFFFFF' stroke-width='1.2' stroke-linecap='round' opacity='0.85'/%3E%3Cpath d='M26 0 Q20 12 18 18 Q12 20 0 26' stroke='%23F472B6' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M52 0 Q40 24 36 36 Q24 40 0 52' stroke='%23F472B6' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M76 0 Q58 35 52 52 Q35 58 0 76' stroke='%23F472B6' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M26 0 Q20 12 18 18 Q12 20 0 26 M52 0 Q40 24 36 36 Q24 40 0 52 M76 0 Q58 35 52 52 Q35 58 0 76' stroke='%23FFFFFF' stroke-width='0.9' stroke-linecap='round' opacity='0.7'/%3E%3Cline x1='52' y1='52' x2='52' y2='68' stroke='%23EC4899' stroke-width='1.6' stroke-dasharray='2.5 1.5'/%3E%3Cellipse cx='52' cy='72' rx='4.2' ry='3.4' fill='%23181829'/%3E%3Ccircle cx='50.6' cy='71.5' r='0.9' fill='%23FFFFFF'/%3E%3Ccircle cx='53.4' cy='71.5' r='0.9' fill='%23FFFFFF'/%3E%3Cpath d='M47 70 C44 68 43 70 42 72 M47 72 C44 72 43 73.5 42 75 M57 70 C60 68 61 70 62 72 M57 72 C60 72 61 73.5 62 75' stroke='%23181829' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E");
    transition: transform var(--t-fast) var(--ease-spring);
    filter: drop-shadow(0 3px 8px rgba(236, 72, 153, 0.45));
}

body.campaign-halloween .product-card:nth-child(2):hover::before,
body.campaign-halloween .product-card:nth-child(3):hover::before,
body.campaign-halloween .product-card:nth-child(6):hover::before,
body.campaign-halloween .product-card:nth-child(7):hover::before,
body.campaign-halloween .product-card:nth-child(10):hover::before,
body.campaign-halloween .product-card:nth-child(11):hover::before {
    transform: scale(1.1) rotate(2deg);
}

@media (max-width: 640px) {
    body.campaign-halloween .product-card:nth-child(2)::before,
    body.campaign-halloween .product-card:nth-child(3)::before,
    body.campaign-halloween .product-card:nth-child(6)::before,
    body.campaign-halloween .product-card:nth-child(7)::before,
    body.campaign-halloween .product-card:nth-child(10)::before,
    body.campaign-halloween .product-card:nth-child(11)::before {
        width: 58px;
        height: 58px;
        left: -16px;
        top: -6px;
    }
}

/* 3. SAN VALENTÍN (AMOR & AMISTAD) 💖 */
.campaign-particle.san_valentin {
    text-shadow: 0 0 8px rgba(251, 113, 133, 0.5), 0 0 16px rgba(244, 63, 94, 0.3);
    animation: campaignHeartsRise linear infinite;
}

@keyframes campaignHeartsRise {
    0% {
        transform: translateY(var(--campaign-area-height, 820px)) translateX(0) scale(0.65);
        opacity: 0;
    }
    15% {
        opacity: var(--p-op, 0.65);
    }
    85% {
        opacity: var(--p-op, 0.65);
    }
    100% {
        transform: translateY(-35px) translateX(var(--p-drift, 25px)) scale(1.08);
        opacity: 0;
    }
}

/* 4. CYBER SALE & BLACK DAYS ⚡ */
.campaign-particle.cyber {
    text-shadow: 0 0 8px rgba(59, 130, 246, 0.7), 0 0 18px rgba(99, 102, 241, 0.5);
    animation: campaignCyberDrift linear infinite;
}

body.campaign-cyber .badge-oferta {
    box-shadow: 0 0 10px rgba(37, 99, 235, 0.4);
    animation: cyberBadgeGlow 2.5s ease-in-out infinite alternate;
}

@keyframes cyberBadgeGlow {
    0% { filter: drop-shadow(0 0 2px rgba(59, 130, 246, 0.4)); }
    100% { filter: drop-shadow(0 0 7px rgba(99, 102, 241, 0.8)); }
}

@keyframes campaignCyberDrift {
    0% {
        transform: translateY(var(--campaign-area-height, 820px)) translateX(0) rotate(0deg);
        opacity: 0;
    }
    15% {
        opacity: var(--p-op, 0.7);
    }
    85% {
        opacity: var(--p-op, 0.7);
    }
    100% {
        transform: translateY(-35px) translateX(var(--p-drift, -15px)) rotate(180deg);
        opacity: 0;
    }
}

/* 5. PRIMAVERA & FLORES 🌸 */
.campaign-particle.primavera {
    text-shadow: 0 0 8px rgba(244, 114, 182, 0.4), 0 0 14px rgba(251, 207, 232, 0.6);
    animation: campaignSakuraFall linear infinite;
}

@keyframes campaignSakuraFall {
    0% {
        transform: translateY(-35px) translateX(0) rotate(0deg) scale(0.75);
        opacity: 0;
    }
    12% {
        opacity: var(--p-op, 0.75);
    }
    88% {
        opacity: var(--p-op, 0.75);
    }
    100% {
        transform: translateY(var(--campaign-area-height, 820px)) translateX(var(--p-drift, 40px)) rotate(420deg) scale(1);
        opacity: 0;
    }
}

/* ── ATUENDOS Y ACCESORIOS FESTIVOS DE LA MASCOTA ── */
.mascot-campaign-accessory {
    position: absolute;
    pointer-events: none;
    z-index: 4;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: block;
}

/* Gorrito de Santa (Navidad) */
.mascot-campaign-accessory.navidad {
    top: -12px;
    left: 2px;
    width: 38px;
    height: 38px;
    transform: rotate(-12deg);
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.22));
}

.mascot-avatar-btn:hover .mascot-campaign-accessory.navidad {
    transform: rotate(-5deg) scale(1.15) translateY(-2px);
}

/* Sombrero de Brujita / Lazo Spooky (Halloween) */
.mascot-campaign-accessory.halloween {
    top: -14px;
    left: 4px;
    width: 38px;
    height: 38px;
    transform: rotate(-8deg);
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.28));
}

.mascot-avatar-btn:hover .mascot-campaign-accessory.halloween {
    transform: rotate(-2deg) scale(1.15) translateY(-2px);
}

/* Corazón de Satén (San Valentín) */
.mascot-campaign-accessory.san_valentin {
    top: -4px;
    right: 4px;
    width: 28px;
    height: 28px;
    transform: rotate(14deg);
    filter: drop-shadow(0 3px 7px rgba(225, 29, 72, 0.35));
}

.mascot-avatar-btn:hover .mascot-campaign-accessory.san_valentin {
    transform: rotate(24deg) scale(1.22);
}

/* Gafas VIP & Rayo (Cyber Sale) */
.mascot-campaign-accessory.cyber {
    top: 24px;
    left: 12px;
    width: 48px;
    height: 20px;
    filter: drop-shadow(0 3px 6px rgba(37, 99, 235, 0.4));
}

.mascot-avatar-btn:hover .mascot-campaign-accessory.cyber {
    transform: scale(1.1);
}

/* Flor de Cerezo / Corona Floral (Primavera) */
.mascot-campaign-accessory.primavera {
    top: -8px;
    right: 6px;
    width: 30px;
    height: 30px;
    transform: rotate(12deg);
    filter: drop-shadow(0 3px 6px rgba(244, 114, 182, 0.35));
}

.mascot-avatar-btn:hover .mascot-campaign-accessory.primavera {
    transform: rotate(28deg) scale(1.2);
}

/* ── INSIGNIAS FESTIVAS EN EL POPOVER DE LA MASCOTA ── */
.mascot-campaign-pill {
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2.5px 8px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    letter-spacing: 0.2px;
    margin-top: 3px;
}

.mascot-campaign-pill.navidad {
    background: #FFE4E6;
    color: #BE123C;
    border: 1px solid #FDA4AF;
}

.mascot-campaign-pill.halloween {
    background: #F3E8FF;
    color: #6B21A8;
    border: 1px solid #D8B4FE;
}

.mascot-campaign-pill.san_valentin {
    background: #FCE7F3;
    color: #9D174D;
    border: 1px solid #FBCFE8;
}

.mascot-campaign-pill.cyber {
    background: #DBEAFE;
    color: #1E40AF;
    border: 1px solid #93C5FD;
}

.mascot-campaign-pill.primavera {
    background: #DCFCE7;
    color: #166534;
    border: 1px solid #86EFAC;
}

/* Respeto estricto a accesibilidad y ahorro de recursos */
@media (prefers-reduced-motion: reduce) {
    .campaign-particle {
        animation: none !important;
        display: none !important;
    }
    .mascot-avatar-btn {
        animation: none !important;
    }
}

/* ============================================================
   COMBOS COMPRADOS JUNTOS FRECUENTEMENTE (FREQUENTLY BOUGHT TOGETHER)
   Amazon & Shopify Style - World-Class UX/UI Design System
   ============================================================ */

.bundle-combo-section {
    margin-top: 20px;
    margin-bottom: 22px;
    background: linear-gradient(135deg, #FAF8FF 0%, #FFFFFF 50%, #F5F3FF 100%);
    border: 1.5px solid rgba(124, 58, 237, 0.18);
    border-radius: var(--radius-lg, 18px);
    padding: 16px 18px;
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.06), 0 1px 3px rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
    transition: box-shadow var(--t-normal) ease, border-color var(--t-normal) ease;
}

.bundle-combo-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #7C3AED 0%, #EC4899 50%, #F59E0B 100%);
}

.bundle-combo-section:hover {
    border-color: rgba(124, 58, 237, 0.32);
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.10);
}

/* Encabezado del Combo */
.bundle-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.bundle-header-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-heading, 'Outfit', sans-serif);
    font-size: 0.96rem;
    font-weight: 800;
    color: var(--text-primary, #0F172A);
    letter-spacing: -0.01em;
}

.bundle-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(124, 58, 237, 0.12);
    color: #7C3AED;
    flex-shrink: 0;
}

.bundle-discount-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: #FFFFFF;
    font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
    font-size: 0.72rem;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 9999px;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25);
    letter-spacing: 0.02em;
    animation: bundleBadgePulse 3s infinite ease-in-out;
}

@keyframes bundleBadgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}

/* Tira Visual de Miniaturas Encadenadas */
.bundle-chain-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0 14px;
    border-bottom: 1px dashed rgba(124, 58, 237, 0.15);
    margin-bottom: 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.bundle-chain-row::-webkit-scrollbar {
    display: none;
}

.bundle-thumb-card {
    position: relative;
    width: 64px;
    height: 64px;
    min-width: 64px;
    border-radius: var(--radius-md, 14px);
    background: #FFFFFF;
    border: 2px solid var(--border-color, #E2E8F0);
    overflow: hidden;
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(0,0,0,0.04));
    transition: all var(--t-fast) var(--ease-out);
}

.bundle-thumb-card.active {
    border-color: #7C3AED;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.20);
}

.bundle-thumb-card.inactive {
    opacity: 0.38;
    filter: grayscale(80%);
}

.bundle-thumb-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bundle-thumb-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F8FAFC;
    color: var(--text-muted, #94A3B8);
}

.bundle-thumb-badge {
    position: absolute;
    bottom: 2px;
    left: 2px;
    right: 2px;
    background: rgba(15, 23, 42, 0.75);
    color: #FFFFFF;
    font-size: 0.58rem;
    font-weight: 700;
    text-align: center;
    border-radius: 4px;
    padding: 1px 0;
    backdrop-filter: blur(4px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bundle-chain-plus {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.10);
    color: #7C3AED;
    font-size: 14px;
    font-weight: 900;
    user-select: none;
}

/* Lista de Chequeo de Artículos */
.bundle-checklist {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-bottom: 14px;
}

.bundle-check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: var(--radius-sm, 10px);
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(226, 232, 240, 0.6);
    transition: background var(--t-fast) ease, border-color var(--t-fast) ease;
    cursor: pointer;
    user-select: none;
}

.bundle-check-row:hover {
    background: #FFFFFF;
    border-color: rgba(124, 58, 237, 0.25);
}

.bundle-check-row.unselected {
    opacity: 0.45;
    background: transparent;
}

.bundle-check-input {
    width: 18px;
    height: 18px;
    accent-color: #7C3AED;
    cursor: pointer;
    flex-shrink: 0;
}

.bundle-check-info {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.bundle-check-text {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary, #0F172A);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bundle-check-tag {
    font-size: 0.70rem;
    font-weight: 700;
    color: #7C3AED;
    background: rgba(124, 58, 237, 0.08);
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 5px;
    vertical-align: middle;
}

.bundle-check-prices {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    flex-shrink: 0;
}

.bundle-check-old-price {
    font-size: 0.74rem;
    color: var(--text-muted, #94A3B8);
    text-decoration: line-through;
    font-weight: 500;
}

.bundle-check-cur-price {
    font-size: 0.84rem;
    color: var(--text-primary, #0F172A);
    font-weight: 800;
}

.bundle-check-cur-price.discounted {
    color: #10B981;
}

/* Fila de Precios Totales y Ahorro */
.bundle-summary-footer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid rgba(124, 58, 237, 0.12);
}

.bundle-total-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.bundle-total-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary, #475569);
}

.bundle-total-values {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.bundle-total-old {
    font-size: 0.85rem;
    color: var(--text-muted, #94A3B8);
    text-decoration: line-through;
    font-weight: 600;
}

.bundle-total-final {
    font-family: var(--font-heading, 'Outfit', sans-serif);
    font-size: 1.22rem;
    font-weight: 900;
    color: #7C3AED;
    letter-spacing: -0.01em;
}

.bundle-savings-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #ECFDF5;
    color: #065F46;
    border: 1px solid #A7F3D0;
    font-size: 0.74rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: var(--radius-full, 9999px);
}

/* Botón de Acción Principal para Agregar Combo */
.bundle-add-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 20px;
    background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%);
    color: #FFFFFF;
    border: none;
    border-radius: var(--radius-md, 14px);
    font-family: var(--font-heading, 'Outfit', sans-serif);
    font-size: 0.94rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.32);
    transition: all var(--t-normal, 0.22s) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
    letter-spacing: 0.01em;
}

.bundle-add-btn:hover {
    background: linear-gradient(135deg, #6D28D9 0%, #5B21B6 100%);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(124, 58, 237, 0.40);
}

.bundle-add-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25);
}

.bundle-add-btn:disabled {
    background: #CBD5E1;
    color: #64748B;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

.bundle-add-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    animation: bundleBtnIconBounce 2.5s infinite ease-in-out;
}

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

@media (max-width: 480px) {
    .bundle-combo-section {
        padding: 14px 14px;
        margin-top: 16px;
        margin-bottom: 18px;
    }
    .bundle-header-title {
        font-size: 0.88rem;
    }
    .bundle-thumb-card {
        width: 56px;
        height: 56px;
        min-width: 56px;
    }
    .bundle-check-text {
        font-size: 0.78rem;
    }
    .bundle-total-final {
        font-size: 1.12rem;
    }
    .bundle-add-btn {
        padding: 12px 16px;
        font-size: 0.88rem;
    }
}

/* ── ESTILOS PARA COMBOS Y PACKS EN CATÁLOGO (DOBLE PRESENCIA) ────── */
.quick-filter-pill.active-combos {
    background: linear-gradient(135deg, #7C3AED 0%, #4F46E5 100%) !important;
    color: #FFFFFF !important;
    border-color: #7C3AED !important;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.28) !important;
}

.quick-filter-pill.active-combos .qf-count {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #FFFFFF !important;
}

/* Tarjeta Independiente de Combo / Pack en el Catálogo */
.product-card.combo-pack-card {
    border: 1.5px solid var(--border-color);
    background: var(--bg-card);
    position: relative;
    overflow: visible;
}

.product-card.combo-pack-card:hover {
    border-color: rgba(124, 58, 237, 0.45);
    box-shadow: 0 10px 24px rgba(124, 58, 237, 0.12);
}

/* 3D Ribbon Exclusivo para Packs de Ahorro */
.product-ribbon-3d.pack-ribbon {
    background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.38), 0 2px 4px rgba(0, 0, 0, 0.12);
}

.product-ribbon-3d.pack-ribbon::after {
    border-top-color: #4C1D95;
}

.product-ribbon-3d.pack-ribbon .ribbon-3d-tag {
    color: #7C3AED;
}

/* Collage multi-producto para portadas de combos sin foto única */
.combo-collage-container {
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
    background: #F8FAFC;
    overflow: hidden;
}

.combo-collage-item {
    flex: 1;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.combo-collage-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--t-normal) ease;
}

.product-card.combo-pack-card:hover .combo-collage-item img {
    transform: scale(1.05);
}

.combo-collage-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 2px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
    z-index: 2;
}

.combo-variant-hint {
    color: #7C3AED !important;
    font-weight: 700;
}

.combo-variant-hint svg {
    color: #7C3AED !important;
    stroke: #7C3AED !important;
}

.btn-add-action.combo-btn-add {
    background: #EDE9FE;
    color: #7C3AED;
}

.btn-add-action.combo-btn-add:hover {
    background: #7C3AED;
    color: #FFFFFF;
}

/* Indicador sutil de cross-selling en tarjetas individuales de productos */
.product-combo-cross-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    color: #7C3AED;
    background: #F5F3FF;
    padding: 2px 7px;
    border-radius: 4px;
    margin-top: 4px;
    cursor: pointer;
    transition: all var(--t-fast) ease;
    border: 1px solid rgba(124, 58, 237, 0.2);
    line-height: 1.25;
    align-self: flex-start;
}

.product-combo-cross-pill:hover {
    background: #EDE9FE;
    color: #6D28D9;
    border-color: #7C3AED;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(124, 58, 237, 0.15);
}

.combo-modal-single-variant-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    font-size: 0.75rem;
    color: #475569;
    margin-top: 6px;
}

.combo-modal-single-variant-badge strong {
    color: #1E293B;
}

.combo-modal-single-variant-badge svg {
    color: #10B981;
}

/* Modal de Pack / Combo */
.modal-card-combo-pack {
    max-width: 540px;
    width: 100%;
    background: #FFFFFF;
    border-radius: 20px;
    padding: 24px;
    position: relative;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.combo-modal-header {
    margin-bottom: 16px;
}

.combo-modal-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: #EDE9FE;
    color: #6D28D9;
    font-size: 0.72rem;
    font-weight: 800;
    border-radius: 20px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.combo-modal-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-main, #0F172A);
    margin: 0 0 4px 0;
    line-height: 1.3;
}

.combo-modal-desc {
    font-size: 0.82rem;
    color: var(--text-secondary, #64748B);
    margin: 0;
    line-height: 1.4;
}

.combo-modal-body {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-right: 4px;
    margin-bottom: 16px;
}

.combo-modal-item-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 10px 12px;
}

.combo-modal-item-thumb {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 8px;
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
}

.combo-modal-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.combo-modal-item-info {
    flex: 1;
    min-width: 0;
}

.combo-modal-item-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-main, #0F172A);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.combo-modal-item-price {
    font-size: 0.82rem;
    font-weight: 600;
    color: #64748B;
    margin-top: 2px;
}

.combo-modal-item-variants {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.combo-variant-chip {
    font-size: 0.72rem;
    padding: 3px 8px;
    border-radius: 6px;
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
    color: #334155;
    cursor: pointer;
    transition: all 0.15s ease;
}

.combo-variant-chip.selected {
    background: #7C3AED;
    border-color: #7C3AED;
    color: #FFFFFF;
    font-weight: 700;
}

.combo-modal-footer {
    border-top: 1px solid #E2E8F0;
    padding-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.combo-modal-prices {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.combo-modal-price-col {
    display: flex;
    flex-direction: column;
}

.combo-modal-price-label {
    font-size: 0.75rem;
    color: #64748B;
    font-weight: 500;
}

.combo-modal-price-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.combo-modal-price-old {
    font-size: 0.88rem;
    color: #94A3B8;
    text-decoration: line-through;
    font-weight: 600;
}

.combo-modal-price-final {
    font-size: 1.35rem;
    font-weight: 800;
    color: #059669;
}

.combo-modal-savings-pill {
    padding: 4px 10px;
    background: #DCFCE7;
    color: #15803D;
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: 20px;
}

.combo-modal-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 18px;
    font-size: 0.95rem;
    font-weight: 700;
    background: linear-gradient(135deg, #7C3AED 0%, #5B4FE8 100%);
    border: none;
    border-radius: 12px;
    color: #FFFFFF;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);
    transition: transform var(--t-fast) ease, box-shadow var(--t-fast) ease;
}

.combo-modal-add-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(124, 58, 237, 0.45);
}


/* combo-suggestion-banner */
#cart-combo-suggestions{margin:8px 0 4px}
.cart-combo-suggestion-banner{background:linear-gradient(135deg,#fefce8,#fef9c3);border:1.5px solid #fde047;border-radius:10px;padding:10px 12px;margin-bottom:8px;display:flex;align-items:center;gap:10px;animation:comboBannerIn 0.3s ease;position:relative;overflow:hidden}
.cart-combo-suggestion-banner::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 60%,rgba(250,204,21,0.12));pointer-events:none}
@keyframes comboBannerIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.combo-suggestion-icon{font-size:1.35rem;flex-shrink:0;line-height:1}
.combo-suggestion-body{flex:1;min-width:0}
.combo-suggestion-title{font-size:0.77rem;font-weight:800;color:#92400e;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.combo-suggestion-subtitle{font-size:0.71rem;color:#a16207;margin-top:1px;line-height:1.3}
.combo-suggestion-badge{display:inline-flex;align-items:center;gap:3px;background:#fde047;color:#78350f;font-size:0.67rem;font-weight:800;padding:2px 6px;border-radius:99px;margin-top:3px;white-space:nowrap}
.btn-activar-combo{background:#f59e0b;color:#fff;border:none;border-radius:8px;padding:6px 11px;font-size:0.72rem;font-weight:800;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:all 0.18s ease}
.btn-activar-combo:hover{background:#d97706;transform:scale(1.04)}
@media(max-width:380px){.cart-combo-suggestion-banner{flex-wrap:wrap;gap:6px}.btn-activar-combo{width:100%;text-align:center;padding:7px}}

/* ============================================================
   SHIELD DE PROTECCIÓN DE IMÁGENES Y DERECHOS DE CATÁLOGO
   ============================================================ */
.product-thumb-container,
.product-img-element,
.modal-gallery-slide,
.modal-gallery-slide img,
.modal-gallery-track,
.lightbox-img-wrapper,
.lightbox-img,
.gallery-thumb-btn img,
.cart-item-thumb,
.cart-upsell-thumb,
.cross-sell-thumb,
.category-circle-thumb,
.category-circle-img,
.share-modal-prod-thumb,
.sticky-action-thumb,
.protected-catalog-media {
    -webkit-touch-callout: none !important; /* Deshabilita el menú guardar/compartir en iOS Safari */
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;    /* Previene arrastrar imagen al escritorio o a Google Images */
}

/* Toast flotante discreto de derechos de autor y protección de catálogo */
.catalog-protect-toast {
    position: fixed;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%) translateY(30px);
    background: rgba(15, 23, 42, 0.94);
    color: #FFFFFF;
    padding: 10px 18px;
    border-radius: 9999px;
    font-size: 0.82rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.12);
    z-index: 999999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.catalog-protect-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.catalog-protect-toast svg {
    flex-shrink: 0;
    color: #F59E0B;
}