*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --k1:#0D47A1; --k2:#1565C0; --k3:#1976D2; --k4:#42A5F5; --k5:#E3F2FD; --k6:#BBDEFB;
  --green:#0F6E56; --green-light:#E1F5EE; --wsp:#25D366; --wsp-dark:#1da851;
  --text:#1a1a2e; --text-muted:#6B7280; --text-light:#9CA3AF;
  --bg:#F0F4FF; --surface:#ffffff; --border:rgba(0,0,0,0.08); --border-strong:rgba(0,0,0,0.15);
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px;
  --shadow-sm:0 1px 3px rgba(0,0,0,0.08),0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:0 4px 16px rgba(13,71,161,0.12),0 2px 6px rgba(0,0,0,0.06);
  --shadow-lg:0 8px 32px rgba(13,71,161,0.16),0 4px 12px rgba(0,0,0,0.08);
}
html { scroll-behavior:smooth; }
body { font-family:'DM Sans',sans-serif; background:var(--bg); color:var(--text); min-height:100vh; line-height:1.5; }

/* TOPBAR */
.topbar { background:var(--k1); position:sticky; top:0; z-index:100; box-shadow:0 2px 20px rgba(13,71,161,0.4); }
.topbar-inner { max-width:1100px; margin:0 auto; padding:0 1.5rem; height:64px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.logo { display:flex; align-items:center; gap:12px; text-decoration:none; flex-shrink:0; }
.logo-mark { width:40px; height:40px; background:white; border-radius:10px; display:flex; align-items:center; justify-content:center; font-family:'Outfit',sans-serif; font-size:24px; font-weight:700; color:var(--k1); flex-shrink:0; box-shadow:0 2px 8px rgba(0,0,0,0.2); }
.logo-text { display:flex; flex-direction:column; }
.logo-name { font-family:'Outfit',sans-serif; font-size:16px; font-weight:700; color:white; letter-spacing:.06em; line-height:1; }
.logo-sub { font-size:10px; color:rgba(255,255,255,0.6); letter-spacing:.1em; margin-top:2px; }
.topbar-right { display:flex; align-items:center; gap:10px; flex:1; justify-content:flex-end; }
.search-bar { display:flex; align-items:center; gap:8px; background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.2); border-radius:24px; padding:8px 14px; flex:1; max-width:280px; transition:background .2s; }
.search-bar:focus-within { background:rgba(255,255,255,0.2); border-color:rgba(255,255,255,0.4); }
.search-bar i { color:rgba(255,255,255,0.6); font-size:15px; flex-shrink:0; }
.search-bar input { background:transparent; border:none; outline:none; color:white; font-size:13px; font-family:'DM Sans',sans-serif; width:100%; }
.search-bar input::placeholder { color:rgba(255,255,255,0.5); }
.cart-btn { display:flex; align-items:center; gap:7px; background:white; color:var(--k1); border:none; border-radius:24px; padding:8px 16px; font-size:13px; font-weight:600; font-family:'Outfit',sans-serif; cursor:pointer; position:relative; transition:transform .15s,box-shadow .15s; white-space:nowrap; box-shadow:0 2px 8px rgba(0,0,0,0.15); }
.cart-btn:hover { transform:translateY(-1px); box-shadow:0 4px 16px rgba(0,0,0,0.2); }
.cart-btn i { font-size:17px; }
.cart-badge { position:absolute; top:-6px; right:-6px; background:#E53935; color:white; border-radius:50%; width:20px; height:20px; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; border:2px solid var(--k1); animation:pop .2s ease; }
.admin-btn { display:flex; align-items:center; gap:6px; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.25); color:rgba(255,255,255,0.8); border-radius:24px; padding:7px 13px; font-size:12px; font-weight:500; font-family:'DM Sans',sans-serif; cursor:pointer; transition:all .15s; white-space:nowrap; }
.admin-btn:hover { background:rgba(255,255,255,0.2); color:white; }
.admin-btn i { font-size:15px; }
@keyframes pop { 0%{transform:scale(0)} 70%{transform:scale(1.2)} 100%{transform:scale(1)} }
@keyframes cartBounce { 0%{transform:translateY(-1px) scale(1)} 30%{transform:translateY(-4px) scale(1.12)} 60%{transform:translateY(0px) scale(0.95)} 100%{transform:translateY(-1px) scale(1)} }
.cart-btn.bounce { animation:cartBounce .4s ease; }
@keyframes spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes flyToCart { 0%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(0.3) translate(120px,-80px)} }
.fly-dot { position:fixed; width:12px; height:12px; background:var(--k1); border-radius:50%; pointer-events:none; z-index:9999; animation:flyToCart .5s ease-in forwards; }

/* HOW TO BUY */
.how-banner { background:white; border-bottom:1px solid var(--border); }
.how-inner { max-width:1100px; margin:0 auto; padding:0 1.5rem; display:flex; align-items:stretch; gap:0; }
.how-label { display:flex; align-items:center; gap:8px; padding:14px 20px 14px 0; border-right:1px solid var(--border); margin-right:8px; flex-shrink:0; }
.how-label i { font-size:18px; color:var(--k2); }
.how-label span { font-family:'Outfit',sans-serif; font-size:13px; font-weight:700; color:var(--k1); white-space:nowrap; letter-spacing:.02em; }
.how-steps { display:flex; align-items:center; flex:1; flex-wrap:nowrap; overflow-x:visible; gap:0; }
.how-step { display:flex; align-items:center; gap:8px; padding:12px 8px; flex-shrink:1; min-width:0; }
.step-num { width:24px; height:24px; background:var(--k1); color:white; border-radius:50%; font-size:12px; font-weight:700; font-family:'Outfit',sans-serif; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.step-icon { width:32px; height:32px; background:var(--k5); border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.step-icon i { font-size:16px; color:var(--k2); }
.step-text { display:flex; flex-direction:column; }
.step-title { font-size:12px; font-weight:600; color:var(--text); font-family:'Outfit',sans-serif; white-space:normal; line-height:1.3; }
.step-desc { font-size:11px; color:var(--text-muted); white-space:normal; line-height:1.3; }
.step-arrow { color:var(--text-light); font-size:14px; flex-shrink:0; padding:0 4px; }

/* HERO */
.hero { background:linear-gradient(135deg,var(--k1) 0%,var(--k3) 100%); padding:2.5rem 1.5rem; position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.hero-inner { max-width:1100px; margin:0 auto; position:relative; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.hero-content h2 { font-family:'Outfit',sans-serif; font-size:26px; font-weight:700; color:white; line-height:1.2; }
.hero-content p { color:rgba(255,255,255,0.75); font-size:14px; margin-top:6px; }
.hero-pills { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.hero-pill { display:flex; align-items:center; gap:5px; background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.25); border-radius:20px; padding:5px 12px; font-size:12px; color:white; }
.hero-pill i { font-size:13px; }
.hero-badge { background:white; color:var(--k1); border-radius:var(--radius-lg); padding:16px 20px; text-align:center; box-shadow:var(--shadow-lg); }
.hero-badge .hb-num { font-family:'Outfit',sans-serif; font-size:28px; font-weight:700; color:var(--k1); line-height:1; }
.hero-badge .hb-lbl { font-size:11px; color:var(--text-muted); margin-top:3px; }

/* MAIN */
.main { max-width:1100px; margin:0 auto; padding:1.5rem; }
.tabs-wrap { background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); overflow:hidden; }
/* Catalog layout: sidebar + products */
.catalog-layout { display:flex; align-items:flex-start; gap:0; }
.brand-sidebar { width:168px; flex-shrink:0; border-right:1px solid var(--border); padding:1rem 0; position:sticky; top:72px; max-height:calc(100vh - 90px); overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
.brand-sidebar::-webkit-scrollbar { width:4px; }
.brand-sidebar::-webkit-scrollbar-track { background:transparent; }
.brand-sidebar::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }
.brand-sidebar-title { font-family:'Outfit',sans-serif; font-size:11px; font-weight:700; color:var(--text-muted); letter-spacing:.08em; text-transform:uppercase; padding:0 14px 8px; display:flex; align-items:center; gap:5px; }
.brand-sidebar-title i { font-size:13px; color:var(--k3); }
.brand-sidebar-list { display:flex; flex-direction:column; gap:1px; }
.brand-filter-btn { display:flex; align-items:center; justify-content:space-between; gap:6px; padding:7px 14px; font-size:13px; font-family:'DM Sans',sans-serif; color:var(--text-muted); background:transparent; border:none; cursor:pointer; text-align:left; width:100%; transition:background .12s, color .12s; border-left:3px solid transparent; }
.brand-filter-btn:hover { background:var(--k5); color:var(--k1); }
.brand-filter-btn.active { background:var(--k5); color:var(--k1); font-weight:600; border-left-color:var(--k1); }
.brand-filter-btn .bfb-count { font-size:11px; background:var(--bg); border-radius:10px; padding:1px 6px; color:var(--text-muted); flex-shrink:0; font-family:'Outfit',sans-serif; }
.brand-filter-btn.active .bfb-count { background:var(--k6); color:var(--k2); }
/* Hide sidebar when no brands */
.brand-sidebar.hidden { display:none; }
.products-section { flex:1; min-width:0; padding:1.25rem; }
.tabs { display:flex; border-bottom:1px solid var(--border); overflow-x:auto; padding:0 1rem; scrollbar-width:none; overscroll-behavior-x:contain; touch-action:pan-x; }
.tabs::-webkit-scrollbar { display:none; }
.tab-btn { display:flex; align-items:center; gap:7px; padding:14px 18px; font-size:14px; font-family:'DM Sans',sans-serif; cursor:pointer; border:none; background:transparent; color:var(--text-muted); border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; transition:color .15s; font-weight:500; }
.tab-btn:hover { color:var(--k2); }
.tab-btn.active { color:var(--k1); border-bottom-color:var(--k1); font-weight:600; }
.tab-btn i { font-size:16px; }
.tab-count { background:var(--k5); color:var(--k2); border-radius:20px; padding:1px 8px; font-size:11px; font-weight:600; }
.tab-btn.active .tab-count { background:var(--k1); color:white; }
.products-section { padding:1.25rem; }
.section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.1rem; }
.section-title { font-family:'Outfit',sans-serif; font-size:16px; font-weight:600; color:var(--text); display:flex; align-items:center; gap:7px; }
.section-title i { color:var(--k2); font-size:18px; }
.products-count { font-size:12px; color:var(--text-muted); }

/* BRAND SECTION IN STOREFRONT */
.brand-container { display:flex; flex-direction:column; gap:0; }
.brand-section-header { display:flex; align-items:center; gap:8px; font-family:'Outfit',sans-serif; font-size:14px; font-weight:700; color:var(--k1); background:var(--k5); border:1px solid var(--k6); border-radius:var(--radius-md); padding:9px 14px; margin-top:8px; }
.brand-section-header:first-child { margin-top:0; }
.brand-section-header i { font-size:15px; color:var(--k2); }
.brand-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px; margin-top:10px; margin-bottom:8px; }

/* GRID */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px; }

@media (max-width:600px) {
  .brand-grid { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
}
.product-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; display:flex; flex-direction:column; transition:transform .2s,box-shadow .2s,border-color .2s; }
.product-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--k6); }
.product-card.out-of-stock { opacity:.6; }
.prod-img { height:86px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.prod-img-photo { height:140px; position:relative; overflow:hidden; background:#f8f8f8; }
.prod-img-photo img { width:100%; height:100%; object-fit:contain; object-position:center; display:block; padding:4px; box-sizing:border-box; }
.prod-img i { font-size:34px; position:relative; z-index:1; }
.prod-img.perf { background:linear-gradient(135deg,#FBEAF0 0%,#F4C0D1 100%); }
.prod-img.perf i { color:#993556; }
.prod-img.elec { background:linear-gradient(135deg,#E3F2FD 0%,#BBDEFB 100%); }
.prod-img.elec i { color:var(--k1); }
.prod-img.vaper { background:linear-gradient(135deg,#EAF3DE 0%,#C0DD97 100%); }
.prod-img.vaper i { color:#3B6D11; }
.stock-badge { position:absolute; top:6px; right:6px; border-radius:20px; padding:2px 7px; font-size:10px; font-weight:700; font-family:'Outfit',sans-serif; z-index:2; }
.stock-badge.ok { background:var(--green-light); color:var(--green); }
.stock-badge.low { background:#FFF3E0; color:#E65100; }
.stock-badge.out { background:#FFEBEE; color:#C62828; }
.prod-body { padding:10px 12px; flex:1; display:flex; flex-direction:column; gap:3px; }
.prod-name { font-size:13px; font-weight:600; line-height:1.3; font-family:'Outfit',sans-serif; }
.prod-desc { font-size:11px; color:var(--text-muted); flex:1; line-height:1.4; }
.prod-footer { padding:9px 12px; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:6px; }
.prod-price { font-family:'Outfit',sans-serif; font-size:14px; font-weight:700; color:var(--green); }
.add-btn { display:flex; align-items:center; gap:4px; background:transparent; border:1px solid var(--border-strong); border-radius:20px; padding:4px 10px; font-size:11px; font-weight:600; font-family:'DM Sans',sans-serif; cursor:pointer; color:var(--text); transition:all .15s; white-space:nowrap; }
.add-btn:hover:not(:disabled) { background:var(--k5); border-color:var(--k4); color:var(--k1); }
.add-btn.added { background:var(--green-light); border-color:#5DCAA5; color:var(--green); }
.add-btn:disabled { opacity:.5; cursor:not-allowed; }
.add-btn i { font-size:12px; }
.card-qty-ctrl { display:flex; align-items:center; gap:5px; }

/* PRICE FILTER / SORT */
.price-filter { display:flex; align-items:center; gap:10px; margin-bottom:1.1rem; padding:10px 14px; background:#F8FAFF; border:1px solid var(--border); border-radius:var(--radius-md); }
.pf-label { font-size:12px; font-weight:600; color:var(--text-muted); font-family:'Outfit',sans-serif; white-space:nowrap; display:flex; align-items:center; gap:5px; }
.pf-label i { font-size:14px; color:var(--k2); }
.pf-select { border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:6px 10px; font-size:13px; font-family:'DM Sans',sans-serif; color:var(--text); outline:none; background:var(--surface); cursor:pointer; transition:border-color .15s; }
.pf-select:focus { border-color:var(--k2); }
.pf-search-wrap { position:relative; display:flex; align-items:center; flex:1; min-width:0; }
.pf-search-icon { position:absolute; left:9px; font-size:14px; color:var(--text-light); pointer-events:none; }
.pf-search-input { width:100%; border:1.5px solid var(--border); border-radius:var(--radius-sm); padding:6px 10px 6px 30px; font-size:13px; font-family:'DM Sans',sans-serif; color:var(--text); outline:none; background:var(--surface); transition:border-color .15s; }
.pf-search-input:focus { border-color:var(--k2); }
.pf-search-input::placeholder { color:var(--text-light); }

/* VAPER PROMO BANNER */
.vaper-promo { display:flex; align-items:center; gap:12px; background:linear-gradient(135deg,#1a2e10,#2d5018); border-radius:var(--radius-md); padding:14px 18px; margin-bottom:1.1rem; }
.vaper-promo-icon { font-size:24px; flex-shrink:0; }
.vaper-promo-text { flex:1; }
.vaper-promo-title { font-family:'Outfit',sans-serif; font-size:14px; font-weight:700; color:#C0DD97; }
.vaper-promo-desc { font-size:12px; color:rgba(192,221,151,0.75); margin-top:2px; }
.vaper-promo-btn { display:flex; align-items:center; gap:5px; background:var(--wsp); color:white; border:none; border-radius:20px; padding:7px 14px; font-size:12px; font-weight:600; font-family:'Outfit',sans-serif; cursor:pointer; white-space:nowrap; text-decoration:none; transition:background .15s; flex-shrink:0; }
.vaper-promo-btn:hover { background:var(--wsp-dark); }
.vaper-promo-btn i { font-size:14px; }
@media(max-width:600px) { .vaper-promo { flex-wrap:wrap; } .vaper-promo-btn { width:100%; justify-content:center; } }
body.dark .vaper-promo { background:linear-gradient(135deg,#0d1a08,#1a2e10); }

/* STOCK LOW ALERT ON CARD */
.stock-low-alert { display:flex; align-items:center; gap:4px; font-size:10px; font-weight:700; color:#E65100; background:#FFF3E0; border-radius:0 0 var(--radius-md) var(--radius-md); padding:4px 10px; font-family:'Outfit',sans-serif; }
.stock-low-alert i { font-size:11px; }
.stock-last-one { color:#C62828; background:#FFEBEE; }

/* WHY US SECTION */
.why-section { max-width:1100px; margin:1.5rem auto 0; padding:0 1.5rem; }
.why-inner { background:white; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:1.75rem; }
.why-title { font-family:'Outfit',sans-serif; font-size:17px; font-weight:700; color:var(--text); margin-bottom:1.25rem; display:flex; align-items:center; gap:8px; }
.why-title i { color:var(--k2); font-size:20px; }
.why-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px; }
.why-card { display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:14px; border:1px solid var(--border); border-radius:var(--radius-md); background:#FAFBFF; transition:box-shadow .2s,border-color .2s; }
.why-card:hover { box-shadow:var(--shadow-sm); border-color:var(--k6); }
.why-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.why-icon i { font-size:20px; }
.why-card-title { font-family:'Outfit',sans-serif; font-size:13px; font-weight:700; color:var(--text); }
.why-card-desc { font-size:12px; color:var(--text-muted); line-height:1.5; }

/* ── ZONA DE ENVÍO ── */
.zona-btn { width:100%; display:flex; align-items:center; padding:9px 12px; border:1.5px solid var(--border); border-radius:var(--radius-md); background:var(--surface); cursor:pointer; font-size:13px; font-family:'DM Sans',sans-serif; color:var(--text-muted); transition:all .15s; text-align:left; }
.zona-btn:hover { border-color:var(--k4); color:var(--k2); background:var(--k5); }
.zona-btn.sel { border-color:var(--k1); color:var(--k1); background:var(--k5); font-weight:600; }
.zona-precio { font-family:'Outfit',sans-serif; font-size:12px; font-weight:700; color:var(--green); flex-shrink:0; }
.zona-consultar { color:#E65100 !important; }
.zona-btn.sel .zona-precio { color:var(--k1); }
body.dark .zona-btn { background:var(--surface); border-color:rgba(255,255,255,0.1); color:var(--text-muted); }
body.dark .zona-btn.sel { border-color:var(--k3); background:var(--k5); color:var(--k4); }

/* ── HORARIOS ── */
.schedule-section { max-width:1100px; margin:1.5rem auto 0; padding:0 1.5rem; }
.schedule-inner { background:white; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:1.75rem; display:grid; grid-template-columns:auto 1fr; gap:1.5rem 2.5rem; align-items:start; }
.schedule-left { display:flex; flex-direction:column; gap:6px; }
.schedule-title { font-family:'Outfit',sans-serif; font-size:17px; font-weight:700; color:var(--text); display:flex; align-items:center; gap:8px; }
.schedule-title i { color:var(--k2); font-size:20px; }
.schedule-wsp { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--text-muted); margin-top:4px; }
.schedule-wsp i { color:var(--wsp); font-size:15px; }
.schedule-wsp a { color:var(--wsp); font-weight:600; text-decoration:none; }
.schedule-wsp a:hover { text-decoration:underline; }
.schedule-grid { display:flex; flex-direction:column; gap:6px; }
.schedule-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:8px 14px; border-radius:var(--radius-sm); border:1px solid var(--border); background:#FAFBFF; }
.schedule-day { font-size:13px; font-weight:600; color:var(--text); font-family:'Outfit',sans-serif; white-space:nowrap; }
.schedule-hours { font-size:13px; color:var(--text-muted); white-space:nowrap; }
.schedule-badge { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; font-family:'Outfit',sans-serif; border-radius:20px; padding:2px 10px; white-space:nowrap; }
.schedule-badge.open { background:var(--green-light); color:var(--green); }
.schedule-badge.closed { background:#FFF3E0; color:#E65100; }
.schedule-badge i { font-size:11px; }
body.dark .schedule-inner { background:#1a1d27; }
body.dark .schedule-row { background:#12151f; border-color:rgba(255,255,255,0.06); }
@media(max-width:700px) {
  .schedule-inner { grid-template-columns:1fr; gap:1.25rem; }
}
@media(max-width:600px) {
  .schedule-section { padding:0 .75rem; }
  .schedule-inner { padding:1.25rem 1rem; }
  .schedule-title { font-size:15px; }
}

/* ── RESEÑAS ── */
.reviews-section { max-width:1100px; margin:1.5rem auto 0; padding:0 1.5rem; }
.reviews-inner { background:white; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:1.75rem; }
.reviews-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:1.25rem; }
.reviews-title { font-family:'Outfit',sans-serif; font-size:17px; font-weight:700; color:var(--text); display:flex; align-items:center; gap:8px; }
.reviews-title i { color:#F59E0B; font-size:20px; }
.reviews-summary { display:flex; align-items:center; gap:10px; }
.reviews-avg { font-family:'Outfit',sans-serif; font-size:28px; font-weight:700; color:var(--text); line-height:1; }
.reviews-avg-stars { display:flex; gap:2px; }
.reviews-avg-stars i { font-size:17px; color:#F59E0B; }
.reviews-avg-count { font-size:12px; color:var(--text-muted); }
.reviews-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr)); gap:14px; }
.review-card { background:#FAFBFF; border:1px solid var(--border); border-radius:var(--radius-md); padding:1rem 1.1rem; display:flex; flex-direction:column; gap:8px; }
.review-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.review-author { display:flex; align-items:center; gap:9px; }
.review-avatar { width:36px; height:36px; border-radius:50%; background:var(--k5); display:flex; align-items:center; justify-content:center; font-family:'Outfit',sans-serif; font-size:15px; font-weight:700; color:var(--k2); flex-shrink:0; overflow:hidden; }
.review-name { font-size:13px; font-weight:600; font-family:'Outfit',sans-serif; color:var(--text); line-height:1.2; }
.review-product { font-size:11px; color:var(--text-muted); margin-top:1px; }
.review-stars { display:flex; gap:2px; flex-shrink:0; }
.review-stars i { font-size:14px; }
.star-full { color:#F59E0B; }
.star-empty { color:#D1D5DB; }
.review-text { font-size:13px; color:var(--text-muted); line-height:1.6; font-style:italic; }
.review-text::before { content:'"'; }
.review-text::after { content:'"'; }
.review-date { font-size:11px; color:var(--text-light); }
body.dark .reviews-inner { background:#1a1d27; }
body.dark .review-card { background:#12151f; border-color:rgba(255,255,255,0.06); }
body.dark .review-avatar { background:var(--k5); }
/* ── CARRUSEL DE RESEÑAS ── */
.reviews-carousel { position:relative; overflow:hidden; }
.reviews-carousel-track { display:flex; transition:transform .35s cubic-bezier(.4,0,.2,1); gap:14px; }
.reviews-carousel-track .review-card { flex:0 0 calc(33.333% - 10px); min-width:0; }
.reviews-carousel-nav { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:1.1rem; }
.reviews-carousel-btn { width:32px; height:32px; border-radius:50%; border:1.5px solid var(--border); background:var(--surface); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:15px; color:var(--text-muted); transition:all .15s; flex-shrink:0; }
.reviews-carousel-btn:hover:not(:disabled) { border-color:var(--k3); color:var(--k1); background:var(--k5); }
.reviews-carousel-btn:disabled { opacity:.3; cursor:not-allowed; }
.reviews-carousel-dots { display:flex; gap:5px; }
.reviews-carousel-dot { width:7px; height:7px; border-radius:50%; background:var(--border-strong); border:none; cursor:pointer; padding:0; transition:background .15s,transform .15s; }
.reviews-carousel-dot.active { background:var(--k1); transform:scale(1.25); }
@media(max-width:900px) {
  .reviews-carousel-track .review-card { flex:0 0 calc(50% - 7px); }
}
@media(max-width:600px) {
  .reviews-carousel-track .review-card { flex:0 0 100%; }
}
body.dark .reviews-carousel-btn { background:#1a1d27; border-color:rgba(255,255,255,0.1); color:var(--text-muted); }
body.dark .reviews-carousel-btn:hover:not(:disabled) { background:rgba(255,255,255,0.06); color:var(--k4); border-color:var(--k3); }
body.dark .reviews-carousel-dot { background:rgba(255,255,255,0.2); }
body.dark .reviews-carousel-dot.active { background:var(--k4); }

@media(max-width:600px) {
  .reviews-section { padding:0 .75rem; }
  .reviews-inner { padding:1.25rem 1rem; }
  .reviews-title { font-size:15px; }
  .reviews-grid { grid-template-columns:1fr; }
}

/* FOOTER */
.page-footer { background:var(--k1); color:rgba(255,255,255,0.9); margin-top:2.5rem; padding:2rem 1.5rem 1.5rem; }
.footer-inner { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1fr auto; gap:2rem; align-items:start; }
.footer-brand { display:flex; flex-direction:column; gap:8px; }
.footer-logo { display:flex; align-items:center; gap:10px; }
.footer-logo-mark { width:38px; height:38px; background:white; border-radius:9px; display:flex; align-items:center; justify-content:center; font-family:'Outfit',sans-serif; font-size:22px; font-weight:700; color:var(--k1); flex-shrink:0; }
.footer-logo-name { font-family:'Outfit',sans-serif; font-size:15px; font-weight:700; color:white; letter-spacing:.06em; }
.footer-tagline { font-size:12px; color:rgba(255,255,255,0.6); margin-left:48px; }
.footer-wsp { display:flex; align-items:center; gap:6px; font-size:12px; color:rgba(255,255,255,0.7); margin-left:48px; margin-top:2px; }
.footer-wsp i { font-size:14px; color:var(--wsp); }
.footer-social { display:flex; flex-direction:column; gap:10px; align-items:flex-end; }
.footer-social-title { font-size:11px; color:rgba(255,255,255,0.5); font-family:'Outfit',sans-serif; text-transform:uppercase; letter-spacing:.08em; }
.footer-ig { display:flex; align-items:center; gap:8px; background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); border-radius:10px; padding:8px 14px; text-decoration:none; color:white; font-size:13px; font-weight:600; font-family:'Outfit',sans-serif; transition:opacity .15s,transform .15s; }
.footer-ig:hover { opacity:.9; transform:translateY(-2px); }
.footer-ig i { font-size:18px; }
.footer-divider { height:1px; background:rgba(255,255,255,0.1); max-width:1100px; margin:1.25rem auto 0; }
.footer-bottom { max-width:1100px; margin:.75rem auto 0; font-size:11px; color:rgba(255,255,255,0.4); display:flex; justify-content:space-between; flex-wrap:wrap; gap:4px; }
@media(max-width:600px) {
  .footer-inner { grid-template-columns:1fr; gap:1.25rem; }
  .footer-social { align-items:flex-start; }
  .why-grid { grid-template-columns:repeat(2,1fr); }
  .price-filter { gap:8px; }
  .pf-input { width:80px; }
}
.card-qty-btn { width:24px; height:24px; border-radius:6px; border:1.5px solid var(--k4); background:var(--k5); color:var(--k1); font-size:15px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; line-height:1; transition:all .12s; }
.card-qty-btn:hover { background:var(--k1); color:white; border-color:var(--k1); }
.card-qty-num { font-size:14px; font-weight:700; font-family:'Outfit',sans-serif; color:var(--k1); min-width:18px; text-align:center; }
.no-results { grid-column:1/-1; text-align:center; padding:3rem 1rem; color:var(--text-muted); }
.no-results i { font-size:40px; display:block; margin:0 auto 10px; color:var(--text-light); }

/* OVERLAY & DRAWER */
.overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:200; backdrop-filter:blur(2px); }
.overlay.open { display:block; }
.cart-drawer { position:fixed; top:0; right:-380px; width:360px; height:100%; background:var(--surface); z-index:201; display:flex; flex-direction:column; transition:right .25s cubic-bezier(.4,0,.2,1); box-shadow:-4px 0 32px rgba(0,0,0,0.15); }
.cart-drawer.open { right:0; }
.cart-header { background:var(--k1); padding:1rem 1.25rem; display:flex; align-items:center; justify-content:space-between; }
.cart-header h2 { font-family:'Outfit',sans-serif; font-size:16px; font-weight:600; color:white; display:flex; align-items:center; gap:8px; }
.cart-header h2 i { font-size:19px; }
.close-cart { background:rgba(255,255,255,0.15); border:none; border-radius:8px; width:32px; height:32px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:white; font-size:18px; transition:background .15s; }
.close-cart:hover { background:rgba(255,255,255,0.25); }
.cart-items { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:1rem 1.25rem; display:flex; flex-direction:column; gap:10px; }
.cart-items::-webkit-scrollbar { width:4px; }
.cart-items::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:4px; }
.cart-item { display:flex; gap:10px; align-items:flex-start; padding:10px; background:#F8FAFF; border:1px solid var(--border); border-radius:var(--radius-md); }
.ci-icon { width:38px; height:38px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; }
.ci-info { flex:1; }
.ci-name { font-size:13px; font-weight:600; font-family:'Outfit',sans-serif; }
.ci-price { font-size:11px; color:var(--text-muted); margin-top:1px; }
.ci-subtotal { font-size:12px; font-weight:600; color:var(--green); }
.ci-qty { display:flex; align-items:center; gap:6px; margin-top:6px; }
.qty-btn { width:22px; height:22px; border-radius:6px; border:1px solid var(--border-strong); background:var(--surface); cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center; color:var(--text); transition:all .12s; line-height:1; }
.qty-btn:hover { background:var(--k5); border-color:var(--k4); color:var(--k1); }
.qty-num { font-size:13px; font-weight:600; min-width:18px; text-align:center; }
.ci-del { background:transparent; border:none; cursor:pointer; color:var(--text-light); font-size:16px; padding:4px; display:flex; align-items:center; transition:color .12s; }
.ci-del:hover { color:#E53935; }
.empty-cart { text-align:center; padding:3rem 1rem; color:var(--text-muted); }
.empty-cart i { font-size:48px; display:block; margin:0 auto 12px; color:var(--text-light); }
.empty-cart p { font-size:14px; }
.empty-cart span { font-size:12px; color:var(--text-light); margin-top:4px; display:block; }
.delivery-section { padding:1rem 1.25rem; border-top:1px solid var(--border); }
.delivery-lbl { font-size:13px; font-weight:600; color:var(--text); margin-bottom:10px; display:flex; align-items:center; gap:6px; font-family:'Outfit',sans-serif; }
.delivery-lbl i { color:var(--k2); font-size:15px; }
.delivery-opts { display:flex; gap:8px; }
.d-opt { flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; padding:10px 8px; border:1.5px solid var(--border); border-radius:var(--radius-md); cursor:pointer; background:transparent; font-family:'DM Sans',sans-serif; transition:all .15s; color:var(--text-muted); }
.d-opt:hover { border-color:var(--k4); color:var(--k2); background:var(--k5); }
.d-opt.sel { border-color:var(--k1); color:var(--k1); background:var(--k5); }
.d-opt i { font-size:20px; }
.d-opt span { font-size:11px; font-weight:600; text-align:center; line-height:1.2; }
.addr-wrap { margin-top:10px; display:none; }
.envio-form { display:flex; flex-direction:column; gap:8px; }
.envio-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.envio-field { display:flex; flex-direction:column; gap:3px; }
.envio-label { font-size:11px; font-weight:600; color:var(--text-muted); font-family:'Outfit',sans-serif; display:flex; align-items:center; gap:4px; }
.envio-label i { font-size:12px; color:var(--k3); }
.addr-input.input-error { border-color:#E53935 !important; background:#FFF5F5; }
.addr-input { width:100%; border:1.5px solid var(--border); border-radius:var(--radius-md); padding:9px 12px; font-size:13px; font-family:'DM Sans',sans-serif; color:var(--text); background:var(--surface); outline:none; resize:none; transition:border-color .15s; line-height:1.5; }
.addr-input:focus { border-color:var(--k2); }
.addr-input::placeholder { color:var(--text-light); }
.cart-footer { padding:1rem 1.25rem; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:12px; background:#FAFBFF; }
.totals { display:flex; flex-direction:column; gap:4px; }
.total-row { display:flex; justify-content:space-between; align-items:center; }
.total-label { font-size:12px; color:var(--text-muted); }
.total-items { font-size:12px; color:var(--text-muted); }
.total-divider { height:1px; background:var(--border); margin:4px 0; }
.grand-label { font-size:14px; font-weight:600; font-family:'Outfit',sans-serif; }
.grand-amount { font-size:20px; font-weight:700; font-family:'Outfit',sans-serif; color:var(--k1); }
.wsp-btn { display:flex; align-items:center; justify-content:center; gap:9px; background:var(--wsp); color:white; border:none; border-radius:var(--radius-md); padding:13px; font-size:14px; font-weight:600; font-family:'Outfit',sans-serif; cursor:pointer; transition:all .15s; box-shadow:0 2px 12px rgba(37,211,102,0.3); letter-spacing:.02em; }
.wsp-btn:hover { background:var(--wsp-dark); transform:translateY(-1px); }
.cupon-row { display:flex; flex-direction:column; gap:5px; }
.cupon-input-wrap { display:flex; align-items:center; gap:0; border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; background:white; transition:border-color .15s; }
.cupon-input-wrap:focus-within { border-color:var(--k3); }
.cupon-icon { padding:0 8px; font-size:14px; color:var(--text-light); flex-shrink:0; }
.cupon-input { flex:1; border:none; outline:none; font-size:13px; font-family:'DM Sans',sans-serif; padding:8px 4px; background:transparent; color:var(--text); letter-spacing:.04em; }
.cupon-input::placeholder { color:var(--text-light); letter-spacing:0; }
.cupon-btn { border:none; background:var(--k1); color:white; font-size:12px; font-weight:600; font-family:'Outfit',sans-serif; padding:8px 14px; cursor:pointer; transition:background .15s; white-space:nowrap; }
.cupon-btn:hover { background:var(--k2); }
.cupon-btn:disabled { background:var(--text-light); cursor:not-allowed; }
.cupon-msg { font-size:11px; min-height:14px; padding:0 2px; }
.cupon-msg.ok  { color:var(--green); }
.cupon-msg.err { color:#C62828; }

/* ══ DARK MODE ══ */
body.dark {
  --bg:#0f1117; --surface:#1a1d27; --border:rgba(255,255,255,0.08); --border-strong:rgba(255,255,255,0.15);
  --text:#e8eaf0; --text-muted:#8b92a8; --text-light:#555e7a;
  --k5:#1a2540; --k6:#1e3060;
}
body.dark .how-banner { background:#1a1d27; border-color:rgba(255,255,255,0.06); }

/* ── MEDIOS DE PAGO ── */
.pagos-banner { background:white; border-bottom:1px solid var(--border); }
.pagos-inner { max-width:1100px; margin:0 auto; padding:10px 1.5rem; display:flex; align-items:center; gap:0; flex-wrap:wrap; overflow-x:auto; scrollbar-width:none; }
.pagos-inner::-webkit-scrollbar { display:none; }
.pagos-label { display:flex; align-items:center; gap:7px; padding-right:16px; border-right:1px solid var(--border); margin-right:12px; flex-shrink:0; }
.pagos-label i { font-size:16px; color:var(--k2); }
.pagos-label span { font-family:'Outfit',sans-serif; font-size:12px; font-weight:700; color:var(--k1); white-space:nowrap; letter-spacing:.02em; }
.pagos-methods { display:flex; align-items:center; gap:0; flex-wrap:wrap; flex:1; }
.pago-pill { display:flex; align-items:center; gap:9px; padding:6px 16px 6px 0; }
.pago-icon { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.pago-icon i { font-size:16px; }
.pago-info { display:flex; flex-direction:column; }
.pago-name { font-size:12px; font-weight:600; color:var(--text); font-family:'Outfit',sans-serif; display:flex; align-items:center; gap:5px; }
.pago-desc { font-size:11px; color:var(--text-muted); }
.pago-sep { width:1px; height:28px; background:var(--border); margin:0 16px 0 0; flex-shrink:0; }
.pago-pronto { opacity:.7; }
.pago-pronto-tag { background:#EDE7F6; color:#7B1FA2; border-radius:10px; padding:1px 6px; font-size:9px; font-weight:700; font-family:'Outfit',sans-serif; letter-spacing:.03em; }
body.dark .pagos-banner { background:#1a1d27; border-color:rgba(255,255,255,0.06); }

/* ── ACORDEÓN INFO (envoltorio de Cómo comprar + Medios de pago) ── */
/* Por defecto (PC/tablet) el toggle no se muestra y el contenido siempre está visible, igual que antes */
.info-toggle { display:none; }
.info-accordion-body { display:block; }
.info-accordion-inner { display:block; }

/* ── HISTORIAL DE PRECIO ── */
.price-drop { display:inline-flex; align-items:center; gap:6px; background:#E8F5E9; border:1px solid #A5D6A7; border-radius:20px; padding:4px 10px; font-size:12px; margin-bottom:2px; }
.price-drop-old { text-decoration:line-through; color:var(--text-muted); font-size:11px; }
.price-drop-badge { background:#2E7D32; color:white; border-radius:10px; padding:1px 7px; font-size:10px; font-weight:700; font-family:'Outfit',sans-serif; }
.price-drop i { font-size:13px; color:#2E7D32; }
body.dark .tabs-wrap { background:#1a1d27; }
body.dark .brand-sidebar { border-color:rgba(255,255,255,0.07); }
body.dark .brand-filter-btn:hover, body.dark .brand-filter-btn.active { background:rgba(255,255,255,0.06); color:var(--k4); }
body.dark .brand-filter-btn.active { border-left-color:var(--k4); }
body.dark .brand-filter-btn .bfb-count { background:rgba(255,255,255,0.06); }
body.dark .brand-filter-btn.active .bfb-count { background:rgba(66,165,245,0.15); color:var(--k4); }
body.dark .product-card { background:#1a1d27; }
body.dark .product-card:hover { border-color:#2a3a6a; }
body.dark .admin-prod-list .apl-item { background:#12151f; }
body.dark .price-filter { background:#12151f; }
body.dark .why-inner { background:#1a1d27; }
body.dark .why-card { background:#12151f; border-color:rgba(255,255,255,0.06); }
body.dark .cart-drawer { background:#1a1d27; }
body.dark .cart-item { background:#12151f; }
body.dark .cart-footer { background:#12151f; }
body.dark .addr-input { background:#12151f; color:var(--text); border-color:rgba(255,255,255,0.1); }
body.dark .addr-input.input-error { border-color:#E53935 !important; background:#2a1010; }
body.dark .al-input { background:#12151f; color:var(--text); border-color:rgba(255,255,255,0.1); }
body.dark .admin-login { background:#1a1d27; }
body.dark .admin-panel { background:#1a1d27; }
body.dark .ap-body { background:#1a1d27; }
body.dark .ap-tabs { background:#12151f; }
body.dark .stock-table tr:hover td { background:#12151f; }
body.dark .sum-card { background:#12151f; }
body.dark .edit-modal { background:#1a1d27; }
body.dark .edit-modal-footer { background:#12151f; }
body.dark .edit-input { background:#12151f; color:var(--text); border-color:rgba(255,255,255,0.1); }
body.dark .af-input, body.dark .af-select { background:#12151f; color:var(--text); border-color:rgba(255,255,255,0.1); }
body.dark .pf-select, body.dark .pf-search-input { background:#12151f; color:var(--text); border-color:rgba(255,255,255,0.1); }
body.dark .img-drop-zone { background:#12151f; border-color:rgba(255,255,255,0.12); }
body.dark .d-opt { border-color:rgba(255,255,255,0.1); color:var(--text-muted); }
body.dark .d-opt.sel { border-color:var(--k3); background:var(--k5); color:var(--k4); }
body.dark .prod-img.perf { background:linear-gradient(135deg,#2a1520,#3d1a28); }
body.dark .prod-img.elec { background:linear-gradient(135deg,#101e35,#152845); }
body.dark .prod-img.vaper { background:linear-gradient(135deg,#101e10,#1a2e10); }
body.dark .prod-img-photo { background:#1e1e1e; }
body.dark .prod-modal-img { background:#1e1e1e; }
body.dark .carousel-slide { background:#1e1e1e; }

/* DARK TOGGLE BTN */
.dark-toggle { display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); color:rgba(255,255,255,0.8); border-radius:50%; width:34px; height:34px; cursor:pointer; font-size:16px; transition:all .2s; flex-shrink:0; }
.dark-toggle:hover { background:rgba(255,255,255,0.2); color:white; }

/* ══ ANNOUNCEMENT BANNER ══ */
.ann-banner { display:none; background:#111111; color:white; text-align:center; padding:9px 2rem; font-size:13px; font-family:'Outfit',sans-serif; font-weight:500; position:relative; letter-spacing:.01em; }
.ann-banner.visible { display:block; }
.ann-banner a { color:white; text-decoration:underline; }
.ann-close { position:absolute; right:12px; top:50%; transform:translateY(-50%); background:transparent; border:none; color:rgba(255,255,255,0.7); cursor:pointer; font-size:16px; display:flex; align-items:center; padding:4px; }
.ann-close:hover { color:white; }
body.dark .ann-banner { background:#000000; }

/* ══ SKELETON LOADER ══ */
@keyframes shimmer {
  0% { background-position:-600px 0; }
  100% { background-position:600px 0; }
}
.skeleton { background:linear-gradient(90deg,var(--border) 25%,rgba(0,0,0,0.04) 50%,var(--border) 75%); background-size:600px 100%; animation:shimmer 1.4s infinite; border-radius:6px; }
body.dark .skeleton { background:linear-gradient(90deg,rgba(255,255,255,0.05) 25%,rgba(255,255,255,0.1) 50%,rgba(255,255,255,0.05) 75%); background-size:600px 100%; animation:shimmer 1.4s infinite; }
.skel-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; display:flex; flex-direction:column; }
.skel-img { height:86px; }
.skel-body { padding:10px 12px; display:flex; flex-direction:column; gap:7px; }
.skel-line { height:11px; }
.skel-line.w80 { width:80%; }
.skel-line.w55 { width:55%; }
.skel-footer { padding:9px 12px; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; gap:8px; }
.skel-price { height:14px; width:60px; }
.skel-btn { height:28px; width:72px; border-radius:20px; }

/* ══ WHATSAPP FAB ══ */
.wsp-fab { position:fixed; bottom:24px; right:24px; z-index:150; width:52px; height:52px; background:var(--wsp); border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 20px rgba(37,211,102,0.45); cursor:pointer; text-decoration:none; transition:transform .2s,box-shadow .2s; }
.wsp-fab:hover { transform:scale(1.1); box-shadow:0 6px 28px rgba(37,211,102,0.55); }
.wsp-fab i { font-size:26px; color:white; }
.wsp-fab-tooltip { position:absolute; right:62px; background:#1a1a2e; color:white; font-size:12px; font-family:'DM Sans',sans-serif; white-space:nowrap; padding:5px 10px; border-radius:6px; opacity:0; pointer-events:none; transition:opacity .2s; }
.wsp-fab:hover .wsp-fab-tooltip { opacity:1; }
@media(max-width:600px) { .wsp-fab { bottom:16px; right:16px; width:46px; height:46px; } .wsp-fab i { font-size:22px; } }

/* ══ INSTAGRAM FAB ══ */
.ig-fab { position:fixed; bottom:88px; right:24px; z-index:150; width:52px; height:52px; background:linear-gradient(135deg,#feda75 0%,#fa7e1e 25%,#d62976 50%,#962fbf 75%,#4f5bd5 100%); border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 20px rgba(214,41,118,0.45); cursor:pointer; text-decoration:none; transition:transform .2s,box-shadow .2s; }
.ig-fab:hover { transform:scale(1.1); box-shadow:0 6px 28px rgba(214,41,118,0.55); }
.ig-fab i { font-size:26px; color:white; }
.ig-fab-tooltip { position:absolute; right:62px; background:#1a1a2e; color:white; font-size:12px; font-family:'DM Sans',sans-serif; white-space:nowrap; padding:5px 10px; border-radius:6px; opacity:0; pointer-events:none; transition:opacity .2s; }
.ig-fab:hover .ig-fab-tooltip { opacity:1; }
@media(max-width:600px) { .ig-fab { bottom:72px; right:16px; width:46px; height:46px; } .ig-fab i { font-size:22px; } }

/* Prevent iOS zoom on input focus */
@media (max-width:600px) {
  input, select, textarea { font-size:16px !important; }
}

/* Extra pequeño — 360px y menos */
@media (max-width:380px) {
  .tab-btn { padding:10px 9px; font-size:12px; }
  .grid { grid-template-columns:repeat(2,1fr); gap:8px; }
  .brand-grid { grid-template-columns:repeat(2,1fr); gap:8px; }
  .topbar-inner { gap:6px; }
  .search-bar { max-width:110px; }
}
/* ── PRODUCT DETAIL MODAL ── */
.prod-modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:250; backdrop-filter:blur(3px); align-items:center; justify-content:center; padding:1rem; }
.prod-modal-overlay.open { display:flex; }
.prod-modal { background:var(--surface); border-radius:var(--radius-lg); width:min(95vw,520px); max-height:90vh; display:flex; flex-direction:column; box-shadow:var(--shadow-lg); overflow:hidden; animation:modalIn .2s ease; }
@keyframes modalIn { from{opacity:0;transform:scale(.95) translateY(10px)} to{opacity:1;transform:scale(1) translateY(0)} }
.prod-modal-img { height:220px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; flex-shrink:0; background:#f8f8f8; }
.prod-modal-img img { width:100%; height:100%; object-fit:contain; padding:8px; box-sizing:border-box; }
.prod-modal-img-icon { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.prod-modal-img-icon i { font-size:64px; }
.prod-modal-close { position:absolute; top:10px; right:10px; background:rgba(0,0,0,0.45); border:none; border-radius:50%; width:32px; height:32px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:white; font-size:16px; transition:background .15s; }
.prod-modal-close:hover { background:rgba(0,0,0,0.65); }
/* Carrusel de imágenes en el modal */
.carousel-wrap { position:relative; width:100%; height:100%; overflow:hidden; }
.carousel-track { display:flex; height:100%; transition:transform .3s cubic-bezier(.4,0,.2,1); will-change:transform; }
.carousel-slide { flex-shrink:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#f8f8f8; }
.carousel-slide img { width:100%; height:100%; object-fit:contain; padding:8px; box-sizing:border-box; }
.carousel-btn { position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,0.45); border:none; border-radius:50%; width:32px; height:32px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:white; font-size:16px; transition:background .15s; z-index:2; }
.carousel-btn:hover { background:rgba(0,0,0,0.65); }
.carousel-btn.prev { left:10px; }
.carousel-btn.next { right:46px; }
.carousel-dots { position:absolute; bottom:8px; left:50%; transform:translateX(-50%); display:flex; gap:5px; z-index:2; }
.carousel-dot { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,0.5); border:none; cursor:pointer; padding:0; transition:background .15s,transform .15s; }
.carousel-dot.active { background:white; transform:scale(1.3); }
.prod-modal-body { padding:1.25rem; flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; display:flex; flex-direction:column; gap:10px; }
.prod-modal-name { font-family:'Outfit',sans-serif; font-size:18px; font-weight:700; color:var(--text); line-height:1.3; }
.prod-modal-brand { font-size:12px; color:var(--k2); font-weight:600; font-family:'Outfit',sans-serif; display:flex; align-items:center; gap:4px; }
.prod-modal-desc { font-size:13px; color:var(--text-muted); line-height:1.7; }
.prod-modal-footer { padding:1rem 1.25rem; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:12px; background:#FAFBFF; flex-shrink:0; }
.prod-modal-price { font-family:'Outfit',sans-serif; font-size:22px; font-weight:700; color:var(--green); }
body.dark .prod-modal { background:var(--surface); }
body.dark .prod-modal-footer { background:#12151f; }
@media(max-width:600px) { .prod-modal-img { height:220px; } .prod-modal-name { font-size:17px; } .prod-modal-body { padding:1rem; } .prod-modal-footer { padding:.85rem 1rem; } }

/* ══ MOBILE OPTIMIZADO ══ */
@media (max-width:600px) {

  /* TOPBAR */
  .topbar-inner { padding:0 1rem; height:56px; gap:8px; }
  .logo-mark { width:36px; height:36px; font-size:20px; }
  .logo-name { font-size:14px; }
  .logo-sub { display:none; }
  .search-bar { display:none; }
  .dark-toggle { width:32px; height:32px; font-size:15px; }
  .cart-btn { padding:7px 14px; font-size:13px; gap:6px; }

  /* ANN BANNER */
  .ann-banner { font-size:12px; padding:8px 2.5rem 8px 1rem; }

  /* HOW TO BUY */
  .how-label { display:none; }
  .how-inner { padding:0 .75rem; }
  .how-steps { display:grid; grid-template-columns:1fr 1fr; gap:0; flex:none; width:100%; overflow:visible; }
  .step-arrow { display:none; }
  .how-step { padding:10px 8px; gap:6px; }
  .step-desc { display:block; font-size:10px; }
  .step-title { font-size:11px; }
  .step-num { width:20px; height:20px; font-size:10px; }
  .step-icon { width:28px; height:28px; }
  .step-icon i { font-size:13px; }

  /* HERO */
  .hero { padding:1.25rem 1rem; }
  .hero-badge { display:none; }
  .hero-content h2 { font-size:20px; }
  .hero-content p { font-size:13px; }
  .hero-pills { gap:6px; margin-top:10px; }
  .hero-pill { font-size:11px; padding:4px 10px; }

  /* MAIN */
  .main { padding:.75rem; }
  .tabs { padding:0 .5rem; }
  .tab-btn { padding:12px 14px; font-size:13px; gap:5px; }
  .tab-btn i { font-size:15px; }
  /* Sidebar en mobile: horizontal scrolleable arriba de los productos */
  .catalog-layout { flex-direction:column; }
  .brand-sidebar { width:100%; position:static; max-height:none; border-right:none; border-bottom:1px solid var(--border); padding:.5rem 0; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; }
  .brand-sidebar-title { padding:0 12px 6px; }
  .brand-sidebar-list { flex-direction:row; gap:4px; padding:0 12px 4px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; overscroll-behavior-x:contain; }
  .brand-sidebar-list::-webkit-scrollbar { display:none; }
  .brand-filter-btn { white-space:nowrap; border-left:none; border-bottom:3px solid transparent; border-radius:var(--radius-sm); padding:6px 12px; width:auto; }
  .brand-filter-btn.active { border-left-color:transparent; border-bottom-color:var(--k1); }
  .products-section { padding:1rem; }

  /* FILTRO */
  .price-filter { flex-wrap:wrap; gap:8px; padding:8px 12px; }
  .pf-label { width:100%; }
  .pf-select { flex:1; font-size:14px; padding:8px 10px; }
  .pf-search-wrap { flex:1; min-width:140px; }
  .pf-search-input { font-size:14px; padding:8px 10px 8px 30px; }

  /* GRILLA DE PRODUCTOS — 2 columnas en mobile */
  .grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .brand-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .brand-section-header { font-size:13px; padding:8px 12px; }

  /* TARJETAS — más grandes y táctiles */
  .prod-img { height:100px; }
  .prod-img i { font-size:36px; }
  .prod-img-photo { height:120px; background:#f8f8f8; }
  .prod-img-photo img { width:100%; height:100%; object-fit:contain; object-position:center; display:block; padding:4px; box-sizing:border-box; }
  .prod-body { padding:9px 10px; gap:3px; }
  .prod-name { font-size:13px; line-height:1.3; }
  .prod-desc { font-size:11px; }
  .prod-footer { padding:8px 10px; }
  .prod-price { font-size:15px; }

  /* BOTONES MÁS FÁCILES DE TOCAR */
  .add-btn { font-size:12px; padding:7px 12px; border-radius:20px; }
  .card-qty-btn { width:28px; height:28px; font-size:16px; }
  .card-qty-num { font-size:15px; }

  /* STOCK ALERT */
  .stock-low-alert { font-size:11px; padding:5px 10px; }

  /* CARRITO — pantalla completa en mobile */
  .cart-drawer { width:100%; right:-100%; }
  .cart-drawer.open { right:0; }
  .cart-header { padding:.9rem 1rem; }
  .cart-header h2 { font-size:15px; }
  .cart-items { padding:.9rem 1rem; gap:8px; }
  .cart-item { padding:10px; gap:8px; }
  .ci-icon { width:36px; height:36px; font-size:16px; }
  .ci-name { font-size:13px; }
  .ci-price { font-size:11px; }
  .qty-btn { width:26px; height:26px; font-size:15px; }
  .qty-num { font-size:14px; }

  /* DELIVERY */
  .delivery-section { padding:.9rem 1rem; }
  .d-opt { padding:10px 6px; }
  .d-opt i { font-size:20px; }
  .d-opt span { font-size:11px; }

  /* TOTALES Y BOTON WSP */
  .cart-footer { padding:.9rem 1rem; gap:10px; }
  .grand-label { font-size:14px; }
  .grand-amount { font-size:20px; }
  .wsp-btn { font-size:15px; padding:14px; border-radius:var(--radius-md); }

  /* WHY US */
  .why-section { padding:0 .75rem; }
  .why-inner { padding:1.25rem 1rem; }
  .why-title { font-size:15px; }
  .why-grid { grid-template-columns:repeat(2,1fr); gap:8px; }
  .why-card { padding:12px 10px; gap:6px; }
  .why-icon { width:34px; height:34px; }
  .why-card-title { font-size:12px; }
  .why-card-desc { font-size:11px; }

  /* FOOTER */
  .footer-inner { grid-template-columns:1fr; gap:1.25rem; }
  .footer-social { align-items:flex-start; }
  .footer-bottom { font-size:10px; }

  /* FAB WHATSAPP */
  .wsp-fab { bottom:16px; right:16px; width:50px; height:50px; }
  .wsp-fab i { font-size:24px; }
  .wsp-fab-tooltip { display:none; }

  /* RESEÑAS */
  .reviews-section { padding:0 .75rem; margin-top:1rem; }
  .reviews-inner { padding:1.25rem 1rem; }
  .reviews-title { font-size:14px; }
  .reviews-grid { grid-template-columns:1fr; }

  /* MEDIOS DE PAGO — apilado prolijo, sin la etiqueta centrada en el medio */
  .pagos-banner { overflow-x:visible; }
  .pagos-inner { flex-direction:column; align-items:flex-start; flex-wrap:nowrap; padding:10px 1rem; gap:2px; }
  .pagos-label { border-right:none; margin-right:0; padding-right:0; padding-bottom:8px; margin-bottom:4px; border-bottom:1px solid var(--border); width:100%; }
  .pagos-methods { flex-direction:column; align-items:flex-start; width:100%; flex-wrap:nowrap; gap:2px; }
  .pago-pill { width:100%; padding:7px 0; flex-shrink:0; }
  .pago-sep { display:none; }

  /* ACORDEÓN INFO — Cómo comprar + Medios de pago colapsados por defecto */
  .info-toggle { display:flex; align-items:center; justify-content:space-between; width:100%; background:var(--surface); border:none; border-bottom:1px solid var(--border); padding:13px 1rem; font-family:'DM Sans',sans-serif; font-size:13px; font-weight:700; color:var(--k1); cursor:pointer; text-align:left; }
  .info-toggle i { font-size:16px; color:var(--k2); }
  .info-toggle span { display:flex; align-items:center; gap:7px; }
  .info-toggle-arrow { transition:transform .25s ease; }
  .info-accordion.open .info-toggle-arrow { transform:rotate(180deg); }
  .info-accordion-body { display:grid; grid-template-rows:0fr; overflow:hidden; transition:grid-template-rows .3s ease; }
  .info-accordion.open .info-accordion-body { grid-template-rows:1fr; }
  .info-accordion-inner { overflow:hidden; min-height:0; }
  body.dark .info-toggle { background:#1a1d27; border-color:rgba(255,255,255,0.06); }


  /* ENVIO ROW en carrito — grid 2 campos lado a lado */
  .envio-row { grid-template-columns:1fr 1fr; gap:6px; }

  /* HERO — título no se corte */
  .hero-content h2 { font-size:18px; word-break:break-word; }

  /* FOOTER */
  .footer-inner { grid-template-columns:1fr; }
  .footer-social { align-items:flex-start; }
  .footer-tagline { font-size:11px; }
}

/* Extra pequeño 360px */
@media (max-width:380px) {
  .tab-btn { padding:10px 10px; font-size:12px; }
  .grid { gap:8px; }
  .brand-grid { gap:8px; }
  .topbar-inner { gap:6px; }
  .prod-name { font-size:12px; }
  .prod-price { font-size:14px; }
  .add-btn { font-size:11px; padding:6px 10px; }
}