/* ── FUENTE (auto-hospedada, mismo criterio que Bootstrap: sin
           depender de fonts.googleapis.com en redes móviles inestables) ──
           Un solo archivo variable cubre los 5 pesos 400-800 — es el mismo
           archivo que Google Fonts ya sirve para Chrome moderno, solo que
           aquí vive en el propio servidor. */
        @font-face {
            font-family: 'Plus Jakarta Sans';
            font-style: normal;
            font-weight: 400 800;
            font-display: swap;
            src: url('../vendor/fonts/plus-jakarta-sans.woff2') format('woff2');
        }

        /* ── DESIGN TOKENS ── */
        :root {
            --primary:       #6C47FF;
            --primary-dark:  #5235CC;
            --primary-light: #F0EEFF;
            --accent:        #FF6B47;
            --dark:          #0F0F13;
            --surface:       #F7F6FF;
            --card-bg:       #FFFFFF;
            --border:        rgba(108,71,255,.12);
            --shadow-sm:     0 2px 8px rgba(0,0,0,.05);
            --shadow:        0 4px 24px rgba(108,71,255,.10);
            --shadow-hover:  0 12px 40px rgba(108,71,255,.18);
            --radius:        16px;
            --radius-sm:     10px;
            --font:         'Plus Jakarta Sans', system-ui, sans-serif;
            --ease:          cubic-bezier(.4,0,.2,1);
            --nav-h:         64px;
            --bottom-nav-h:  64px;
            /* Safe area para notch/Dynamic Island */
            --sat: env(safe-area-inset-top, 0px);
            --sar: env(safe-area-inset-right, 0px);
            --sab: env(safe-area-inset-bottom, 0px);
            --sal: env(safe-area-inset-left, 0px);
        }
        *, *::before, *::after { box-sizing: border-box; }
        html {
            overscroll-behavior: none;
            /* El clip del overflow horizontal tiene que vivir también en <html>:
               en la PWA en modo standalone (iOS sobre todo) el elemento que
               scrollea es <html>, no <body>, así que un overflow-x sólo en body
               no impedía el paneo lateral en la ficha de producto. `clip` (no
               `hidden`) evita crear un contenedor de scroll y no rompe el
               position:sticky de la barra superior; `hidden` queda de fallback
               para navegadores sin soporte de `clip`. */
            overflow-x: hidden;
            overflow-x: clip;
        }
        body {
            font-family: var(--font);
            background: var(--surface);
            color: var(--dark);
            -webkit-font-smoothing: antialiased;
            margin: 0;
            position: relative;
            max-width: 100%;
            overflow-x: hidden;
            overflow-x: clip;
            overscroll-behavior: none;
            padding-bottom: calc(var(--bottom-nav-h) + var(--sab));
        }
        @media (min-width: 768px) { body { padding-bottom: 0; } }

        /* PWA standalone: evitar que Bootstrap desplace el body al abrir offcanvas */
        @media all and (display-mode: standalone) {
            body { padding-right: 0 !important; }
            body.offcanvas-backdrop { display: none !important; }
        }

        /* ── NAVBAR ── */
        .store-nav {
            background: rgba(255,255,255,.92);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-bottom: 1px solid var(--border);
            height: var(--nav-h);
            position: sticky;
            top: 0;
            z-index: 1000;
            padding-left:  max(1rem, var(--sal));
            padding-right: max(1rem, var(--sar));
            transition: box-shadow .25s var(--ease);
        }
        .store-nav.scrolled { box-shadow: 0 4px 24px rgba(0,0,0,.07); }
        .store-nav .inner {
            max-width: 1200px;
            margin: 0 auto;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
        }
        .nav-brand {
            display: flex;
            align-items: center;
            text-decoration: none;
            flex-shrink: 0;
        }
        .nav-brand img { height: 40px; width: auto; display: block; max-width: 220px; }

        /* Links desktop */
        .nav-links {
            display: none;
            align-items: center;
            gap: 4px;
        }
        @media (min-width: 768px) { .nav-links { display: flex; } }
        .nav-link-s {
            color: #555;
            font-weight: 500;
            font-size: .875rem;
            padding: .45rem .9rem;
            border-radius: var(--radius-sm);
            text-decoration: none;
            transition: background .2s, color .2s;
            white-space: nowrap;
        }
        .nav-link-s:hover { background: var(--primary-light); color: var(--primary); }

        /* Acciones navbar */
        .nav-actions { display: flex; align-items: center; gap: 8px; }
        .admin-icon {
            color: #bbb; font-size: 1rem;
            padding: .45rem .5rem;
            text-decoration: none;
            border-radius: 8px;
            transition: color .2s, background .2s;
            display: none;
        }
        @media (min-width: 768px) { .admin-icon { display: flex; align-items: center; } }
        .admin-icon:hover { color: var(--primary); background: var(--primary-light); }
        button.admin-icon { background: none; border: none; cursor: pointer; }

        .cart-btn {
            background: var(--primary);
            color: #fff !important;
            border: none;
            border-radius: 50px;
            padding: .55rem 1.1rem;
            font-weight: 600;
            font-size: .875rem;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: .4rem;
            min-height: 44px;
            transition: background .2s, transform .2s, box-shadow .2s;
        }
        .cart-btn:hover { background: var(--primary-dark); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(108,71,255,.35); }
        .cart-badge {
            background: var(--accent); color: #fff;
            border-radius: 50%; width: 18px; height: 18px;
            font-size: .6rem; font-weight: 700;
            display: inline-flex; align-items: center; justify-content: center;
        }

        /* Hamburger (sólo móvil) */
        .hamburger {
            display: flex;
            align-items: center;
            justify-content: center;
            background: none;
            border: none;
            width: 44px; height: 44px;
            border-radius: var(--radius-sm);
            color: var(--dark);
            font-size: 1.4rem;
            cursor: pointer;
            transition: background .2s;
        }
        @media (min-width: 768px) { .hamburger { display: none; } }
        .hamburger:hover { background: var(--primary-light); }

        /* Móvil: logo completo, ocultar carrito del top nav
           (ya está en el bottom-nav) */
        @media (max-width: 767px) {
            .nav-brand { overflow: hidden; flex-shrink: 0; }
            .nav-brand svg { width: auto; height: 36px; display: block; }
            .nav-cart-hide { display: none !important; }
        }

        /* ── OFFCANVAS MENÚ MÓVIL ── */
        .mobile-menu .offcanvas-header { border-bottom: 1px solid var(--border); padding: 1.25rem 1.5rem; }
        .mobile-menu .offcanvas-body { padding: 1.25rem 1.5rem; }
        .mobile-nav-link {
            display: flex;
            align-items: center;
            gap: .75rem;
            padding: .85rem 1rem;
            border-radius: var(--radius-sm);
            text-decoration: none;
            color: var(--dark);
            font-weight: 500;
            font-size: 1rem;
            transition: background .2s, color .2s;
            min-height: 52px;
        }
        .mobile-nav-link:hover,
        .mobile-nav-link.active { background: var(--primary-light); color: var(--primary); }
        .mobile-nav-link i { font-size: 1.2rem; width: 24px; text-align: center; }

        /* ── BOTTOM NAVIGATION (móvil) ── */
        .bottom-nav {
            display: flex;
            position: fixed;
            bottom: 0; left: 0; right: 0;
            max-width: 100%;
            overflow: hidden;
            background: rgba(255,255,255,.96);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-top: 1px solid var(--border);
            z-index: 999;
            padding-bottom: var(--sab);
            padding-left: var(--sal);
            padding-right: var(--sar);
            box-shadow: 0 -4px 20px rgba(0,0,0,.06);
        }
        @media (min-width: 768px) { .bottom-nav { display: none; } }
        .bottom-nav-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: .2rem;
            padding: .6rem 0;
            text-decoration: none;
            color: #666;
            font-size: .68rem;
            font-weight: 600;
            letter-spacing: .01em;
            position: relative;
            min-height: var(--bottom-nav-h);
            transition: color .2s;
        }
        .bottom-nav-item i { font-size: 1.35rem; line-height: 1; }
        .bottom-nav-item.active { color: var(--primary); }
        .bottom-nav-item.active i { color: var(--primary); }
        .bottom-nav-item:not(.active):hover { color: #555; }
        .bottom-cart-badge {
            position: absolute;
            top: .55rem; left: calc(50% + .4rem);
            background: var(--accent); color: #fff;
            border-radius: 50%;
            width: 16px; height: 16px;
            font-size: .58rem; font-weight: 700;
            display: flex; align-items: center; justify-content: center;
        }

        /* ── STOCK BADGE ── */
        .stock-badge {
            position: absolute; top: .6rem; left: .6rem;
            font-size: .65rem; font-weight: 700;
            padding: .2rem .55rem; border-radius: 50px;
        }
        .stock-badge.out { background:#FEF2F2; color:#B91C1C; }
        .stock-badge.low { background:#FFF7ED; color:#C94A1E; }

        /* ── BADGES NUEVO / TEMPORADA ── */
        .product-badge-wrap {
            position: absolute; top: .6rem; right: .6rem;
            display: flex; flex-direction: column; gap: .28rem; align-items: flex-end;
            z-index: 1; pointer-events: none;
        }
        .product-badge {
            font-size: .62rem; font-weight: 700; letter-spacing: .05em;
            text-transform: uppercase; white-space: nowrap;
            padding: .22rem .65rem; border-radius: 50px;
        }
        .product-badge.is-new {
            background: linear-gradient(135deg, var(--primary) 0%, #FF6B47 100%);
            color: #fff;
            box-shadow: 0 2px 10px rgba(108,71,255,.45);
            position: relative; overflow: hidden;
        }
        .product-badge.is-new::after {
            content: '';
            position: absolute; top: -50%; left: -75%;
            width: 50%; height: 200%;
            background: linear-gradient(to right, transparent, rgba(255,255,255,.45), transparent);
            transform: skewX(-20deg);
            animation: badge-shimmer 2.4s ease-in-out infinite;
        }
        @keyframes badge-shimmer {
            0%   { left: -75%; }
            100% { left: 135%; }
        }
        .product-badge.is-seasonal { background: #FEF3C7; color: #B45309; }

        /* ── PRECIO CON DESCUENTO ── */
        .price-original {
            font-size: .78rem; font-weight: 500;
            color: #BBB; text-decoration: line-through;
            white-space: nowrap;
        }
        .discount-badge {
            font-size: .68rem; font-weight: 700;
            color: #C94A1E; background: #FFF0EC;
            border-radius: 4px; padding: .15rem .4rem;
            white-space: nowrap; line-height: 1.4;
        }
        .savings-label {
            font-size: .78rem; font-weight: 600; color: #16A34A;
        }

        /* ── DISPONIBILIDAD (fulfillment) ── */
        .fulfillment-tag {
            display: inline-flex; align-items: center; gap: .3rem;
            font-size: .7rem; font-weight: 600;
            padding: .22rem .65rem; border-radius: 50px;
            white-space: nowrap;
        }
        .fulfillment-tag.in-stock  { color: #15803D; background: #F0FDF4; }
        .fulfillment-tag.on-demand { color: #B45309; background: #FFFBEB; }
        .fulfillment-tag.local-only { color: #B45309; background: #FFFBEB; }

        /* ── VENDIDOS ── */
        .sold-label {
            font-size: .7rem; font-weight: 600;
            color: #16A34A;
            display: flex; align-items: center; gap: .25rem;
        }

        /* ── NOMBRE EN CARD ── */
        .product-name-link {
            font-size: .875rem; font-weight: 600; color: var(--dark);
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .product-name-link:hover { color: var(--primary); }

        /* ── BOTÓN AGREGAR CIRCULAR ── */
        .card-add-btn {
            width: 38px; height: 38px; border-radius: 50%;
            background: var(--primary); color: #fff; border: none;
            display: inline-flex; align-items: center; justify-content: center;
            font-size: 1rem; cursor: pointer; flex-shrink: 0;
            transition: background .2s, transform .2s;
        }
        .card-add-btn:hover { background: var(--primary-dark); transform: scale(1.1); }

        /* ── CARDS DE PRODUCTO ── */
        .product-card {
            border: 1.5px solid var(--border) !important;
            border-radius: var(--radius) !important;
            background: var(--card-bg);
            overflow: hidden;
            transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
            box-shadow: var(--shadow-sm);
        }
        @media (hover: hover) {
            .product-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); border-color: rgba(108,71,255,.28) !important; }
            .product-card:hover .product-img-wrap img { transform: scale(1.06); }
        }
        .product-img-wrap {
            height: 180px;
            overflow: hidden;
            background: linear-gradient(135deg,#F0EEFF,#EAE8FF);
            display: flex; align-items: center; justify-content: center;
            position: relative;
        }
        @media (min-width: 576px) { .product-img-wrap { height: 220px; } }
        .product-img-wrap img { width:100%;height:100%;object-fit:cover;transition:transform .4s ease; }

        /* ── BUTTONS ── */
        .btn-store {
            background: var(--primary); color: #fff;
            border: none; border-radius: 50px;
            padding: .65rem 1.4rem;
            font-weight: 600; font-size: .875rem;
            cursor: pointer; text-decoration: none;
            display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
            min-height: 44px;
            transition: background .2s, transform .2s, box-shadow .2s;
        }
        .btn-store:hover { background: var(--primary-dark); color: #fff; }
        @media (hover: hover) { .btn-store:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(108,71,255,.3); } }

        .btn-outline-s {
            background: transparent; color: var(--primary);
            border: 2px solid var(--primary); border-radius: 50px;
            padding: .6rem 1.3rem;
            font-weight: 600; font-size: .875rem;
            text-decoration: none;
            display: inline-flex; align-items: center; gap: .4rem;
            min-height: 44px;
            transition: background .2s, color .2s;
        }
        .btn-outline-s:hover { background: var(--primary); color: #fff; }

        /* ── CATEGORY PILLS ── */
        .cat-pills-wrap {
            display: flex;
            gap: .5rem;
            overflow-x: auto;
            padding-bottom: .5rem;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
        }
        .cat-pills-wrap::-webkit-scrollbar { display: none; }
        .cat-pill {
            display: inline-flex; align-items: center; gap: .3rem;
            padding: .5rem 1rem;
            border-radius: 50px; background: #fff;
            border: 1.5px solid var(--border);
            color: #555; font-size: .875rem; font-weight: 500;
            text-decoration: none; white-space: nowrap;
            flex-shrink: 0;
            min-height: 40px;
            transition: all .2s;
        }
        .cat-pill:hover, .cat-pill.active { background: var(--primary); border-color: var(--primary); color: #fff; }

        /* ── CATEGORY SCROLL WRAP (catalog) ── */
        .cat-scroll-wrap { position: relative; }
        .cat-scroll-wrap::after {
            content: '';
            position: absolute;
            top: 0; right: 0;
            width: 52px; height: 100%;
            background: linear-gradient(to right, transparent, var(--surface));
            pointer-events: none;
            z-index: 1;
        }

        /* ── CATEGORY CARD GRID (home) ── */
        .cat-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: .75rem;
        }
        @media (min-width: 480px) { .cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
        @media (min-width: 768px) { .cat-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; } }

        .cat-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: .9rem .5rem;
            border-radius: var(--radius);
            background: var(--card-bg);
            border: 1.5px solid var(--border);
            text-decoration: none;
            color: var(--dark);
            font-size: .78rem;
            font-weight: 600;
            line-height: 1.3;
            gap: .5rem;
            transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s, background .2s;
            min-height: 90px;
            justify-content: center;
            min-width: 0;
            overflow-wrap: break-word;
        }
        .cat-card:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow);
            border-color: rgba(108,71,255,.3);
            background: var(--primary-light);
            color: var(--primary);
        }
        .cat-card-icon {
            width: 40px; height: 40px;
            border-radius: 12px;
            background: var(--primary-light);
            color: var(--primary);
            display: flex; align-items: center; justify-content: center;
            font-size: 1.2rem;
            flex-shrink: 0;
            transition: background .2s, color .2s;
        }
        .cat-card:hover .cat-card-icon { background: var(--primary); color: #fff; }

        /* ── TYPOGRAPHY ── */
        .section-title { font-family: var(--font); font-weight: 800; letter-spacing: -.02em; }
        .price-tag { font-family: var(--font); font-size: 1.1rem; font-weight: 700; color: var(--primary); }
        .pill-label { font-size: .72rem; padding: .2rem .6rem; border-radius: 50px; font-weight: 600; }

        /* ── SEARCH ── */
        .search-wrap {
            background: #fff; border: 2px solid #E8E6F5; border-radius: 50px;
            display: flex; align-items: center;
            padding: .35rem .35rem .35rem 1rem; gap: .5rem;
            transition: border-color .2s, box-shadow .2s;
        }
        .search-wrap:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(108,71,255,.1); }
        .search-wrap input { border:none;outline:none;flex:1;font-size:.9rem;background:transparent;min-width:0; }
        .search-wrap button { background:var(--primary);color:#fff;border:none;border-radius:50px;padding:.55rem 1.1rem;font-weight:600;font-size:.875rem;cursor:pointer;white-space:nowrap;min-height:40px;transition:background .2s; }
        .search-wrap button:hover { background: var(--primary-dark); }

        @media (max-width: 480px) {
            .search-wrap { flex-wrap: wrap; border-radius: 16px; padding: .5rem .5rem .5rem 1rem; }
            .search-wrap input { min-width: 100%; order: 1; }
            .search-wrap button { order: 2; width: 100%; border-radius: 10px; margin-top: .3rem; }
        }

        /* ── QTY STEPPER ── */
        .qty-stepper { display:inline-flex;align-items:center;border:2px solid #E8E6F5;border-radius:50px;overflow:hidden; }
        .qty-btn { background:none;border:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.1rem;color:var(--primary);transition:background .15s; }
        .qty-btn:hover { background: rgba(108,71,255,.08); }
        .qty-input { border:none;width:40px;text-align:center;font-weight:700;font-size:.9rem;outline:none;background:transparent; }
        .qty-input::-webkit-inner-spin-button,
        .qty-input::-webkit-outer-spin-button { -webkit-appearance:none;margin:0; }
        .qty-input[type=number] { -moz-appearance:textfield; }

        /* ── FORM INPUTS ── */
        .inp {
            border: 2px solid #E8E6F5 !important;
            border-radius: var(--radius-sm) !important;
            padding: .8rem 1rem !important;
            font-size: 1rem !important;
            transition: border-color .2s, box-shadow .2s !important;
            background: #fff !important;
        }
        .inp:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 4px rgba(108,71,255,.1) !important; outline: none !important; }

        /* ── CART ── */
        .cart-row { border-bottom: 1px solid #F0EEF8; }
        .cart-row:last-child { border-bottom: none; }
        .summary-box { background:#fff;border:1.5px solid var(--border);border-radius:var(--radius);padding:1.5rem; }
        @media (min-width: 992px) { .summary-box { position: sticky; top: calc(var(--nav-h) + 16px); } }

        /* ── HERO ── */
        .hero-section {
            background: linear-gradient(135deg,#5235CC 0%,#6C47FF 45%,#9B7AFF 75%,#FF6B47 100%);
            border-radius: 20px;
            padding: clamp(2rem,6vw,4.5rem) clamp(1.25rem,5vw,4rem);
            color: #fff; position: relative; overflow: hidden;
            margin-bottom: 2rem;
        }
        @media (min-width: 768px) { .hero-section { border-radius: 24px; } }
        .hero-section::before { content:'';position:absolute;top:-40%;right:-15%;width:520px;height:520px;background:rgba(255,255,255,.06);border-radius:50%;pointer-events:none; }
        .hero-section::after  { content:'';position:absolute;bottom:-35%;left:-8%;width:360px;height:360px;background:rgba(255,255,255,.04);border-radius:50%;pointer-events:none; }
        .hero-title { font-family:var(--font);font-size:clamp(1.75rem,6vw,3.75rem);font-weight:800;letter-spacing:-.04em;line-height:1.08; }
        .hero-badge { display:inline-block;background:rgba(255,255,255,.18);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3);border-radius:50px;padding:.3rem 1rem;font-size:.78rem;font-weight:600;margin-bottom:1rem; }
        .hero-cta { background:#fff;color:var(--primary);border:none;border-radius:50px;padding:.75rem 1.75rem;font-weight:700;font-size:.95rem;text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;min-height:48px;transition:transform .2s,box-shadow .2s; }
        .hero-cta:hover { transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.22);color:var(--primary-dark); }
        .hero-social {
            display: inline-flex; align-items: center; justify-content: center;
            width: 40px; height: 40px; border-radius: 50%;
            background: rgba(255,255,255,.15);
            border: 1px solid rgba(255,255,255,.25);
            color: #fff; font-size: 1.1rem; text-decoration: none;
            backdrop-filter: blur(8px);
            transition: background .2s, transform .2s;
        }
        .hero-social:hover { background: rgba(255,255,255,.28); transform: translateY(-2px); color: #fff; }

        /* ── SEARCH OVERLAY ── */
        .search-overlay {
            display: none;
            position: fixed; inset: 0;
            background: rgba(15,15,19,.6);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            z-index: 1100;
            align-items: flex-start;
            justify-content: center;
            padding: 5rem 1rem 1rem;
        }
        .search-overlay.open { display: flex; animation: soFade .18s ease; }
        @keyframes soFade { from{opacity:0} to{opacity:1} }
        .search-box {
            width: 100%; max-width: 640px;
            background: #fff;
            border-radius: 20px;
            box-shadow: 0 24px 80px rgba(0,0,0,.22);
            overflow: hidden;
            animation: soSlide .22s var(--ease);
        }
        @keyframes soSlide { from{transform:translateY(-12px);opacity:0} to{transform:translateY(0);opacity:1} }
        .search-box-input {
            display: flex; align-items: center; gap: .75rem;
            padding: .85rem 1.25rem;
            border-bottom: 1.5px solid #f1f0f8;
        }
        .search-box-input input {
            flex: 1; border: none; outline: none;
            font-size: 1.05rem; font-weight: 500;
            font-family: var(--font); color: var(--dark);
            background: transparent;
        }
        .search-box-input i { font-size: 1.2rem; color: #aaa; flex-shrink: 0; }
        .search-close-btn {
            background: #f5f4ff; border: none; border-radius: 8px;
            color: var(--primary); width: 34px; height: 34px;
            cursor: pointer; display: flex; align-items: center; justify-content: center;
            font-size: 1rem; flex-shrink: 0; transition: background .15s;
        }
        .search-close-btn:hover { background: #e8e4ff; }
        .search-results { max-height: 420px; overflow-y: auto; }
        .search-results::-webkit-scrollbar { width: 4px; }
        .search-results::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
        .search-result-item {
            display: flex; align-items: center; gap: .85rem;
            padding: .7rem 1.25rem;
            text-decoration: none; color: inherit;
            border-bottom: 1px solid #f8f7ff;
            transition: background .15s;
        }
        .search-result-item:last-child { border-bottom: none; }
        .search-result-item:hover { background: var(--surface); text-decoration: none; }
        .search-result-thumb {
            width: 52px; height: 52px; flex-shrink: 0;
            border-radius: 10px; overflow: hidden;
            background: linear-gradient(135deg,#f0eeff,#eae8ff);
            display: flex; align-items: center; justify-content: center;
        }
        .search-result-thumb img { width: 100%; height: 100%; object-fit: cover; }
        .search-result-info { flex: 1; min-width: 0; }
        .search-result-name { font-size: .88rem; font-weight: 600; color: var(--dark); line-height: 1.3; }
        .search-result-cat  { font-size: .72rem; color: #aaa; margin-top: .1rem; }
        .search-result-price { font-size: .92rem; font-weight: 700; color: var(--primary); white-space: nowrap; }
        .search-hint { padding: 1.5rem; text-align: center; font-size: .85rem; color: #aaa; }
        .search-all-link {
            display: block; text-align: center;
            padding: .8rem 1.25rem;
            font-size: .82rem; font-weight: 600; color: var(--primary);
            border-top: 1.5px solid #f1f0f8;
            text-decoration: none;
            transition: background .15s;
        }
        .search-all-link:hover { background: var(--surface); }

        /* ── NAV SEARCH ICON ── */
        .nav-search-btn {
            background: none; border: none; cursor: pointer;
            color: #888; font-size: 1.15rem;
            width: 44px; height: 44px; border-radius: var(--radius-sm);
            display: flex; align-items: center; justify-content: center;
            transition: color .2s, background .2s;
        }
        .nav-search-btn:hover { color: var(--primary); background: var(--primary-light); }

        /* ── CART TOAST ── */
        .cart-toast {
            position: fixed; bottom: calc(var(--bottom-nav-h) + var(--sab) + 12px); right: 16px;
            background: var(--dark); color: #fff;
            border-radius: 12px; padding: .75rem 1.1rem;
            font-size: .85rem; font-weight: 600;
            display: flex; align-items: center; gap: .5rem;
            box-shadow: 0 8px 28px rgba(0,0,0,.22);
            z-index: 1050;
            transform: translateY(0);
            opacity: 0; pointer-events: none;
            transition: opacity .22s, transform .22s;
        }
        @media (min-width: 768px) {
            .cart-toast { bottom: 20px; }
        }
        .cart-toast.show { opacity: 1; pointer-events: auto; }

        /* ── SW UPDATE TOAST ── */
        .sw-update-toast {
            position: fixed; top: calc(var(--nav-h) + var(--sat) + 10px);
            left: 50%; max-width: calc(100% - 2rem);
            transform: translateX(-50%) translateY(-10px);
            background: var(--dark); color: #fff;
            border-radius: 50px; padding: .5rem .5rem .5rem 1rem;
            font-size: .8rem; font-weight: 600;
            display: flex; align-items: center; gap: .6rem;
            box-shadow: 0 8px 28px rgba(0,0,0,.25);
            z-index: 1100;
            opacity: 0; pointer-events: none;
            transition: opacity .22s, transform .22s;
        }
        .sw-update-toast.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
        .sw-update-toast button {
            background: var(--primary); color: #fff; border: none; border-radius: 50px;
            padding: .4rem .9rem; font-size: .75rem; font-weight: 700; cursor: pointer;
            white-space: nowrap; flex-shrink: 0;
        }

        /* ── STICKY ADD-TO-CART (product page, mobile) ── */
        .sticky-atc {
            display: none;
            position: fixed; bottom: calc(var(--bottom-nav-h) + var(--sab));
            left: 0; right: 0;
            max-width: 100%;
            overflow: hidden;
            background: rgba(255,255,255,.96);
            backdrop-filter: blur(12px);
            border-top: 1px solid var(--border);
            padding: .65rem max(1rem, var(--sar)) .65rem max(1rem, var(--sal));
            z-index: 990;
            gap: .75rem; align-items: center;
            flex-wrap: nowrap;
        }
        .sticky-atc.visible { display: flex; }
        @media (min-width: 768px) { .sticky-atc { display: none !important; } }
        /* Refuerza el shrink/no-shrink por si las utilidades de Bootstrap
           (flex-grow-1/min-width-0) no bastan en algún WebView de PWA — el
           botón nunca debe perder su tamaño, el texto es el que se trunca. */
        .sticky-atc > div {
            flex: 1 1 auto;
            min-width: 0;
            overflow: hidden;
        }
        .sticky-atc form {
            flex: 0 0 auto;
        }

        /* ── EMPTY STATE ── */
        .empty-state { text-align:center;padding:3rem 1.5rem; }
        .empty-icon { width:72px;height:72px;background:linear-gradient(135deg,#F0EEFF,#E8E6F5);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1.25rem;font-size:1.75rem;color:var(--primary); }

        /* ── SUCCESS ── */
        .success-icon { width:84px;height:84px;background:linear-gradient(135deg,#22C55E,#16A34A);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem;box-shadow:0 12px 32px rgba(34,197,94,.28); }

        /* ── CHECKOUT ── */
        .checkout-card { border:1.5px solid var(--border) !important;border-radius:var(--radius) !important;overflow:hidden;background:#fff; }
        .checkout-header { background:linear-gradient(135deg,var(--primary) 0%,#9B7AFF 100%);color:#fff;padding:1.5rem; }

        /* ── FOOTER ── */
        .store-footer { background:var(--dark);color:#777;padding:3rem 0 2rem;margin-top:4rem; }
        .store-footer .f-brand { font-family:var(--font);font-weight:800;color:#fff;font-size:1.35rem;letter-spacing:-.02em; }
        .store-footer a { color:#666;text-decoration:none;font-size:.875rem;transition:color .2s; }
        .store-footer a:hover { color:#fff; }
        .store-footer .f-sep { border-color:#1E1E24 !important; }

        /* ── ANIMACIONES ── */
        @keyframes fadeUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
        .fade-up { animation:fadeUp .4s var(--ease) both; }
        .delay-1 { animation-delay:.1s; }
        .delay-2 { animation-delay:.2s; }
        .delay-3 { animation-delay:.3s; }

        /* ── FLASH ── */
        .flash-msg { border-radius:var(--radius-sm);border:none;font-size:.9rem; }

        /* ── UTILIDADES ── */
        .touch-target { min-height: 44px; min-width: 44px; }

        /* ── CATALOGO (movido desde catalog.php para que el Service
           Worker lo pueda cachear como recurso aparte) ── */
        /* ── FILTER BAR ── */
        .filter-bar {
            position: sticky;
            top: var(--nav-h);
            z-index: 90;
            background: rgba(247,246,255,.97);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid var(--border);
            padding: .6rem 0;
            margin: -1rem -12px .75rem;
            padding-left: 12px;
            padding-right: 12px;
        }
        
        /* ── CHIPS SCROLL ── */
        .chips-row {
            display: flex;
            gap: .4rem;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            padding-bottom: 2px;
        }
        .chips-row::-webkit-scrollbar { display: none; }
        
        .chip {
            display: inline-flex;
            align-items: center;
            gap: .3rem;
            padding: .35rem .85rem;
            border-radius: 50px;
            border: 1.5px solid var(--border);
            background: #fff;
            font-size: .78rem;
            font-weight: 600;
            color: #555;
            white-space: nowrap;
            cursor: pointer;
            text-decoration: none;
            transition: border-color .15s, background .15s, color .15s;
            flex-shrink: 0;
        }
        .chip:hover  { border-color: var(--primary); color: var(--primary); }
        .chip.active { border-color: var(--primary); background: var(--primary); color: #fff; }
        .chip.active i { color: #fff; }
        .chip-dismiss { font-size: .7rem; opacity: .7; margin-left: .1rem; }
        
        /* Sort chip con dropdown */
        /* Paneles flotantes — position:fixed para escapar de overflow */
        .chip-dropdown,
        .price-pop {
            position: fixed;
            background: #fff;
            border: 1.5px solid var(--border);
            border-radius: 14px;
            box-shadow: 0 8px 32px rgba(0,0,0,.13);
            z-index: 1100;
            display: none;
        }
        .chip-dropdown.open,
        .price-pop.open { display: block; }
        
        .chip-dropdown {
            min-width: 180px;
            overflow: hidden;
        }
        .price-pop {
            padding: 1rem 1.1rem 1.1rem;
            min-width: 230px;
        }
        
        .chip-dd-item {
            display: flex;
            align-items: center;
            gap: .5rem;
            padding: .6rem 1rem;
            font-size: .82rem;
            color: #444;
            cursor: pointer;
            transition: background .15s;
            border: none;
            background: none;
            width: 100%;
            text-align: left;
        }
        .chip-dd-item:hover { background: var(--primary-light); color: var(--primary); }
        .chip-dd-item.selected { font-weight: 700; color: var(--primary); }
        .chip-dd-item.selected::after { content: '✓'; margin-left: auto; }
        .price-range-wrap { position: relative; height: 4px; background: #e2e8f0; border-radius: 4px; margin: 1.25rem .4rem .4rem; }
        .price-range-fill { position: absolute; height: 100%; background: var(--primary); border-radius: 4px; pointer-events: none; }
        .price-range-wrap input[type=range] {
            position: absolute; width: 100%; height: 4px;
            background: none; outline: none; border: none;
            pointer-events: none; -webkit-appearance: none;
        }
        .price-range-wrap input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 18px; height: 18px; border-radius: 50%;
            background: #fff; border: 2.5px solid var(--primary);
            cursor: pointer; pointer-events: all;
            box-shadow: 0 1px 4px rgba(108,71,255,.25);
        }
        .price-range-wrap input[type=range]::-moz-range-thumb {
            width: 16px; height: 16px; border-radius: 50%;
            background: #fff; border: 2.5px solid var(--primary);
            cursor: pointer; pointer-events: all;
            box-shadow: 0 1px 4px rgba(108,71,255,.25);
        }
        
        /* ── PRODUCT GRID ── */
        #productGrid {
            --cols: 2;
            display: grid;
            grid-template-columns: repeat(var(--cols), 1fr);
            gap: .6rem;
        }
        @media (min-width: 480px)  { #productGrid { --cols: 2; gap: .75rem; } }
        @media (min-width: 640px)  { #productGrid { --cols: 3; } }
        @media (min-width: 992px)  { #productGrid { --cols: 4; } }
        
        .ml-card {
            background: #fff;
            border-radius: 14px;
            border: 1.5px solid var(--border);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            transition: box-shadow .2s, transform .2s;
            position: relative;
        }
        .ml-card:hover { box-shadow: 0 6px 24px rgba(108,71,255,.12); transform: translateY(-2px); }
        
        .ml-img-wrap {
            position: relative;
            aspect-ratio: 1 / 1;
            background: #F7F6FF;
            overflow: hidden;
        }
        .ml-img-wrap img {
            width: 100%; height: 100%;
            object-fit: cover;
            display: block;
            transition: transform .4s ease;
        }
        .ml-card:hover .ml-img-wrap img { transform: scale(1.04); }
        .ml-img-placeholder {
            width: 100%; height: 100%;
            display: flex; align-items: center; justify-content: center;
            color: #C4BCEC;
        }
        
        .ml-discount-badge {
            position: absolute;
            top: .5rem; left: .5rem;
            background: var(--accent);
            color: #fff;
            font-size: .65rem;
            font-weight: 700;
            padding: .2rem .5rem;
            border-radius: 50px;
        }
        .ml-stock-badge {
            position: absolute;
            top: .5rem; left: .5rem;
            font-size: .62rem;
            font-weight: 700;
            padding: .2rem .5rem;
            border-radius: 50px;
        }
        .ml-stock-badge.out  { background: #fee2e2; color: #991b1b; }
        .ml-stock-badge.low  { background: #fef9c3; color: #854d0e; }
        
        .ml-new-badge {
            position: absolute;
            top: .5rem; right: 2.2rem;
            background: #DBEAFE; color: #1D4ED8;
            font-size: .58rem; font-weight: 700;
            padding: .15rem .45rem; border-radius: 50px;
        }
        
        .ml-body {
            padding: .6rem .7rem .7rem;
            display: flex;
            flex-direction: column;
            gap: .3rem;
            flex: 1;
        }
        .ml-name {
            font-size: .78rem;
            font-weight: 500;
            color: #222;
            line-height: 1.3;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-decoration: none;
        }
        .ml-name:hover { color: var(--primary); }
        
        .ml-price-original {
            font-size: .7rem;
            color: #94a3b8;
            text-decoration: line-through;
            line-height: 1;
        }
        .ml-price {
            font-size: 1rem;
            font-weight: 800;
            color: #0F0F13;
            line-height: 1;
        }
        @media (min-width: 640px) { .ml-price { font-size: 1.05rem; } }
        
        .ml-delivery-pill {
            display: inline-flex;
            align-items: center;
            gap: .25rem;
            font-size: .65rem;
            font-weight: 600;
            padding: .18rem .5rem;
            border-radius: 50px;
            width: fit-content;
        }
        .ml-delivery-pill.in-stock  { background: #dcfce7; color: #166534; }
        .ml-delivery-pill.on-demand { background: #fef3c7; color: #92400e; }
        .ml-delivery-pill.local-only { background: #fef3c7; color: #92400e; }
        
        .ml-add-btn {
            margin-top: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: .3rem;
            width: 100%;
            padding: .45rem;
            background: var(--primary);
            color: #fff;
            border: none;
            border-radius: 8px;
            font-size: .78rem;
            font-weight: 600;
            cursor: pointer;
            transition: background .2s;
            text-decoration: none;
        }
        .ml-add-btn:hover { background: var(--primary-dark); color: #fff; }
        .ml-add-btn.disabled { background: #e2e8f0; color: #94a3b8; cursor: not-allowed; }
        
        /* Results bar */
        .results-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: .75rem;
            flex-wrap: wrap;
            gap: .4rem;
        }
        .results-count { font-size: .8rem; color: #888; }

        /* ── PRODUCTO: ESTRELLAS DE RESEÑA (movido desde product.php) ── */
        .star-selector { display:flex; gap:.4rem; margin-bottom:.25rem; }
        .star-opt {
            font-size:1.8rem; cursor:pointer; color:#CBD5E1;
            transition:color .15s, transform .1s;
            user-select:none; line-height:1;
        }
        .star-opt.active, .star-opt:hover { color:#F59E0B; transform:scale(1.15); }

        /* ── PRODUCTO: GALERÍA / LIGHTBOX (movido desde product.php) ── */
        /* ── GALERÍA ── */
        .product-gallery-main {
            border-radius: var(--radius);
            overflow: hidden;
            background: linear-gradient(135deg,#F0EEFF,#EAE8FF);
            aspect-ratio: 1 / 1;
            display: flex; align-items: center; justify-content: center;
            position: relative;
            cursor: zoom-in;
            border: 1.5px solid var(--border);
        }
        .product-gallery-main.no-img { cursor: default; }
        .gallery-main-img {
            width: 100%; height: 100%;
            object-fit: contain;
            transition: transform .35s var(--ease), opacity .2s;
            padding: 1rem;
        }
        .gallery-main-img.switching { opacity: 0; transform: scale(.96); }
        .product-gallery-main:hover .gallery-main-img { transform: scale(1.04); }
        .gallery-zoom-hint {
            position: absolute; bottom: .75rem; right: .75rem;
            background: rgba(0,0,0,.45); color: #fff;
            font-size: .72rem; font-weight: 600;
            padding: .3rem .7rem; border-radius: 50px;
            backdrop-filter: blur(6px);
            pointer-events: none; opacity: 0; transition: opacity .2s;
        }
        .product-gallery-main:hover .gallery-zoom-hint { opacity: 1; }
        
        /* ── THUMBNAILS ── */
        .gallery-thumbs {
            display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem;
            scrollbar-width: thin; scrollbar-color: var(--border) transparent;
        }
        .gallery-thumbs::-webkit-scrollbar { height: 4px; }
        .gallery-thumbs::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
        .gallery-thumb {
            width: 64px; height: 64px; flex-shrink: 0;
            border-radius: 10px; overflow: hidden; cursor: pointer;
            border: 2px solid transparent;
            transition: border-color .2s, transform .15s;
        }
        .gallery-thumb.active { border-color: var(--primary); }
        .gallery-thumb:hover  { transform: scale(1.06); }
        .gallery-thumb img    { width: 100%; height: 100%; object-fit: cover; display: block; }
        
        /* ── SELECTOR DE COLOR/VARIANTE (ficha de producto) ── */
        .color-swatches { display: flex; flex-wrap: wrap; gap: .7rem; }
        .color-swatch {
            display: flex; flex-direction: column; align-items: center; gap: .35rem;
            width: 64px; text-decoration: none; cursor: pointer;
        }
        .color-swatch-thumb {
            position: relative;
            width: 56px; height: 56px; border-radius: 12px; overflow: hidden;
            border: 2px solid var(--border); background: #f8fafc;
            display: flex; align-items: center; justify-content: center;
            transition: border-color .2s, transform .15s, box-shadow .2s;
        }
        .color-swatch:hover .color-swatch-thumb { border-color: var(--primary); transform: translateY(-2px); }
        .color-swatch.selected .color-swatch-thumb {
            border-color: var(--primary); box-shadow: 0 0 0 3px rgba(108,71,255,.15);
        }
        .color-swatch-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .color-swatch-check {
            position: absolute; top: -6px; right: -6px;
            width: 20px; height: 20px; border-radius: 50%;
            background: var(--primary); color: #fff; border: 2px solid #fff;
            display: flex; align-items: center; justify-content: center;
            font-size: .6rem; line-height: 1;
        }
        .color-swatch-dot {
            position: absolute; bottom: 2px; right: 2px;
            width: 10px; height: 10px; border-radius: 50%;
            background: #F59E0B; border: 2px solid #fff;
        }
        .color-swatch-label {
            font-size: .72rem; font-weight: 600; color: #666;
            max-width: 64px; text-align: center; line-height: 1.2;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
            transition: color .2s;
        }
        .color-swatch.selected .color-swatch-label,
        .color-swatch:hover .color-swatch-label { color: var(--primary); }

        /* ── DESCRIPCIÓN ── */
        .product-description {
            font-size: .92rem;
            line-height: 1.75;
            color: #555;
            background: #FAFAFE;
            border-radius: var(--radius-sm);
            padding: 1rem 1.25rem;
            border: 1px solid var(--border);
        }
        
        /* ── SHARE BUTTONS ── */
        .share-btn {
            width: 36px; height: 36px;
            border-radius: 50%;
            background: #F5F4FF;
            border: 1.5px solid var(--border);
            color: var(--primary);
            font-size: 1rem;
            display: inline-flex; align-items: center; justify-content: center;
            text-decoration: none;
            transition: background .2s, transform .2s;
            cursor: pointer;
        }
        .share-btn:hover { background: var(--primary); color: #fff; transform: scale(1.1); }
        
        /* ── LIGHTBOX ── */
        .lightbox {
            display: none;
            position: fixed; inset: 0;
            background: rgba(0,0,0,.92);
            z-index: 9999;
            align-items: center; justify-content: center;
            padding: 1rem;
            backdrop-filter: blur(8px);
        }
        .lightbox.open { display: flex; animation: lbFadeIn .2s ease; }
        @keyframes lbFadeIn { from{opacity:0} to{opacity:1} }
        
        .lightbox-inner {
            position: relative;
            max-width: min(90vw, 900px);
            max-height: 90vh;
            display: flex; align-items: center; justify-content: center;
            flex-direction: column; gap: .5rem;
        }
        .lightbox-img {
            max-width: 100%; max-height: 85vh;
            object-fit: contain; border-radius: 12px;
            box-shadow: 0 32px 80px rgba(0,0,0,.6);
            animation: lbZoomIn .22s var(--ease);
        }
        @keyframes lbZoomIn { from{transform:scale(.9);opacity:0} to{transform:scale(1);opacity:1} }
        
        .lightbox-counter {
            color: rgba(255,255,255,.6); font-size: .8rem; font-weight: 600; text-align: center;
        }
        .lightbox-close {
            position: fixed; top: 1rem; right: 1rem;
            background: rgba(255,255,255,.15); border: none; color: #fff;
            width: 44px; height: 44px; border-radius: 50%; font-size: 1.5rem; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            backdrop-filter: blur(8px); transition: background .2s; z-index: 10; line-height: 1;
        }
        .lightbox-close:hover { background: rgba(255,255,255,.28); }
        .lightbox-nav {
            position: fixed; top: 50%; transform: translateY(-50%);
            background: rgba(255,255,255,.12); border: none; color: #fff;
            width: 52px; height: 52px; border-radius: 50%; font-size: 2rem; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            backdrop-filter: blur(8px); transition: background .2s; z-index: 10; line-height: 1;
        }
        .lightbox-nav:hover  { background: rgba(255,255,255,.25); }
        .lightbox-nav:disabled { opacity: .2; cursor: default; }
        .lightbox-prev { left: .75rem; }
        .lightbox-next { right: .75rem; }