<!DOCTYPE html>
<html xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml" lang="es-MX"  lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EKANN — Accesorios</title>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow:wght@400;500;600;700&family=Barlow+Condensed:wght@600;700;800&display=swap" rel="stylesheet">
<script src="https://www.gstatic.com/firebasejs/9.22.2/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.22.2/firebase-firestore-compat.js"></script>

<style>
:root{
  --or:#ff9100;--or2:#e07f00;--or-gl:rgba(255,145,0,.1);
  --bg:#f5f5f5;--s1:#ffffff;--s2:#f9f9f9;--s3:#f0f0f0;
  --b1:#e5e5e5;--b2:#d5d5d5;
  --tx:#111111;--mu:#666;--mu2:#444;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html, body {
  margin:0;padding:0;width:100%;height:100%;
  overflow:hidden;background:var(--bg);color:var(--tx);
  font-family:'Barlow',sans-serif;-webkit-font-smoothing:antialiased;
}
#app {
  position:absolute;top:0;left:0;right:0;bottom:0;
  display:flex;flex-direction:column;
}

/* ── TOPBAR ── */
.topbar{
  background:#fff;border-bottom:1px solid var(--b1);
  padding:0 12px;height:52px;
  display:flex;align-items:center;gap:10px;flex-shrink:0;
}
.brand{display:flex;align-items:center;flex-shrink:0}
.search-wrap{flex:1;position:relative;min-width:0}
.sico{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--mu);font-size:13px;pointer-events:none}
.search{
  width:100%;background:#f5f5f5;border:1.5px solid var(--b2);color:#111;
  font-family:'Barlow',sans-serif;font-size:13px;
  padding:8px 10px 8px 32px;border-radius:999px;outline:none;transition:border-color .2s;
}
.search:focus{border-color:var(--or);background:#fff;}
.search::placeholder{color:#999}
.topbar-r{margin-left:0;display:flex;align-items:center;gap:8px;flex-shrink:0}

/* Botón carrito en topbar */
.btn-cart-top{
  background:var(--or);color:#fff;border:none;border-radius:999px;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;
  letter-spacing:.04em;text-transform:uppercase;
  padding:7px 12px;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;transition:background .15s;flex-shrink:0;
}
.btn-cart-top:hover{background:var(--or2)}
@keyframes cartPop{
  0%{transform:scale(1)}
  30%{transform:scale(1.18)}
  60%{transform:scale(.93)}
  100%{transform:scale(1)}
}
.btn-cart-top.pop{ animation:cartPop .35s ease; }
.cart-badge-top{
  background:#fff;color:var(--or);border-radius:999px;
  font-size:11px;font-weight:800;padding:1px 5px;min-width:18px;text-align:center;
}

/* ── FILTER BAR (marcas) ── */
.fbar{
  background:#fff;border-bottom:1px solid var(--b1);
  padding:7px 12px;display:flex;align-items:center;gap:6px;
  flex-shrink:0;overflow:hidden; /* no scroll en el contenedor */
}
.fbar::-webkit-scrollbar{display:none}
.flbl{font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mu);flex-shrink:0;white-space:nowrap}
.chip{
  display:inline-flex;align-items:center;gap:4px;background:#f5f5f5;
  border:1px solid var(--b1);color:#555;border-radius:999px;
  padding:4px 10px;font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:all .15s;
}
#bchips{
  display:flex;align-items:center;gap:5px;flex-wrap:nowrap;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  flex:1;min-width:0;
}
#bchips::-webkit-scrollbar{display:none}
.chip:hover{border-color:var(--or);color:var(--or)}
.chip.on{background:#222;border-color:#222;color:#fff}
.chip-x{
  display:none;align-items:center;gap:4px;background:rgba(239,68,68,.1);
  border:1px solid rgba(239,68,68,.28);color:#ef4444;border-radius:999px;
  padding:4px 9px;font-size:10px;font-weight:700;cursor:pointer;white-space:nowrap;flex-shrink:0;
  transition:all .15s;text-transform:uppercase;letter-spacing:.04em;
}
.chip-x:hover{background:rgba(239,68,68,.18)}
.chip-x.show{display:inline-flex}

/* ── LAYOUT ── */
.body{display:flex;flex:1;position:relative;min-height:0;}

/* Sidebar desktop */
.sidebar{
  width:200px;flex-shrink:0;background:#fff;border-right:1px solid var(--b1);
  overflow-y:auto;padding:8px 0;scrollbar-width:thin;scrollbar-color:var(--b2) transparent;
}
.sidebar::-webkit-scrollbar{width:4px}
.sidebar::-webkit-scrollbar-thumb{background:var(--b2);border-radius:4px}
.sg-title{font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--mu);padding:10px 14px 5px}
.sitem{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 14px;cursor:pointer;font-size:13px;font-weight:500;color:#555;
  border-left:2px solid transparent;transition:all .12s;gap:6px;
}
.sitem:hover{background:var(--s3);color:var(--tx)}
.sitem.on{background:var(--or-gl);color:var(--or);border-left-color:var(--or);font-weight:700}
.sitem-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scount{font-size:10px;background:var(--b1);padding:1px 6px;border-radius:999px;color:var(--mu);flex-shrink:0}
.sitem.on .scount{background:rgba(255,145,0,.2);color:var(--or)}

/* MOBILE: categorías como pills horizontales */
.cat-pills{
  display:none;background:#fff;border-bottom:1px solid var(--b1);
  padding:8px 12px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;flex-shrink:0;gap:6px;
}
.cat-pills::-webkit-scrollbar{display:none}
.cat-pill{
  display:inline-flex;align-items:center;gap:4px;
  background:#f5f5f5;border:1px solid var(--b1);color:#555;
  border-radius:8px;padding:6px 12px;font-size:12px;font-weight:700;
  cursor:pointer;white-space:nowrap;flex-shrink:0;transition:all .15s;
  font-family:'Barlow Condensed',sans-serif;letter-spacing:.04em;text-transform:uppercase;
}
.cat-pill:hover{border-color:var(--or);color:var(--or)}
.cat-pill.on{background:var(--or);border-color:var(--or);color:#fff;}
.cat-pill .cpcount{
  background:rgba(255,255,255,.25);color:inherit;border-radius:999px;
  font-size:10px;font-weight:800;padding:1px 5px;
}
.cat-pill.on .cpcount{background:rgba(0,0,0,.2)}

/* ── MAIN GRID ── */
.main{flex:1;position:relative;min-width:0;}
.gw{
  position:absolute;top:0;left:0;right:0;bottom:0;
  overflow-y:auto;padding:14px 12px 220px 12px;
  background:#f5f5f5;scrollbar-width:thin;scrollbar-color:var(--b2) transparent;
  -webkit-overflow-scrolling:touch;
}
.gw::-webkit-scrollbar{width:5px}
.gw::-webkit-scrollbar-thumb{background:var(--b2);border-radius:4px}
.grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));gap:14px}

/* ── CARD ── */
.pc{
  background:#fff;border:1px solid var(--b1);border-radius:12px;
  overflow:hidden;cursor:pointer;display:flex;flex-direction:column;
  transition:border-color .18s,transform .18s,box-shadow .18s;
}
.pc:hover{border-color:var(--or);transform:translateY(-3px);box-shadow:0 10px 28px rgba(255,145,0,.12)}
.pc-img{width:100%;padding-top:100%;position:relative;background:#f0f0f0;overflow:hidden;flex-shrink:0}
.pc-img img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;display:block;transition:transform .3s;padding:8px}
.pc-img .noimg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.pc:hover .pc-img img{transform:scale(1.06)}
.noimg{font-size:36px;opacity:.1}
.pc-body{padding:10px;flex:1;display:flex;flex-direction:column;gap:2px}
.pc-name{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:16px;color:#111;line-height:1.2}
.pc-sku{font-size:10px;color:var(--or);font-weight:600;letter-spacing:.04em}
.pc-foot{margin-top:auto;padding-top:8px;display:flex;align-items:center;justify-content:space-between;gap:6px}
.pc-foot-btns{display:flex;align-items:center;gap:5px;margin-left:auto}
.pc-brand-logo{height:18px;max-width:60px;object-fit:contain;display:block;opacity:.7;transition:opacity .15s;flex-shrink:0}
.pc:hover .pc-brand-logo{opacity:1}
.pc-brand-text{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--or);opacity:.7}
.pc:hover .pc-brand-text{opacity:1}

/* Botón + Cotizar en grid */
.btn-add{
  background:var(--or);color:#fff;border:none;border-radius:999px;
  font-size:12px;font-weight:700;padding:6px 13px;cursor:pointer;
  font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;
  flex-shrink:0;transition:all .15s;letter-spacing:.03em;
}
.btn-add:hover{background:var(--or2)}
.btn-add.added{background:#22c55e}

.empty,.loading{
  flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;color:var(--mu);padding:40px;height:100%;
}
.e-ico{font-size:44px;opacity:.25}
.e-t{font-size:15px;font-weight:600}
.spin{width:28px;height:28px;border:2px solid var(--b2);border-top-color:var(--or);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── MODAL BASE (mobile-first, desktop override) ── */
.mbg{display:none;position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,0);backdrop-filter:blur(0px);justify-content:center;align-items:center;padding:20px;overflow-y:auto}
.mbg.open{display:flex;animation:bgi .22s forwards}
@keyframes bgi{to{background:rgba(0,0,0,.8);backdrop-filter:blur(8px)}}

/* ── MODAL DESKTOP (>700px) ── */
@media(min-width:701px){
  .mbg{ align-items:flex-start !important; justify-content:center !important; padding:16px 24px 40px !important; }
  .modal{background:#fff;border:1px solid var(--b1);border-radius:14px;width:100%;max-width:1000px;opacity:0;transform:scale(.96) translateY(12px);animation:mi .24s .05s forwards;display:flex;flex-direction:column;max-height:88vh;position:relative;overflow:hidden}
  @keyframes mi{to{opacity:1;transform:none}}
  .mheader{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:24px 30px 0;border-top:3px solid var(--or);flex-shrink:0}
  .mmarca{margin-bottom:4px}
  .mmarca img{height:32px;max-width:130px;object-fit:contain;display:block}
  .mmarca-text{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--or)}
  .mname{font-family:'Bebas Neue',sans-serif;font-size:32px;letter-spacing:.04em;color:#000;line-height:1}
  .msku{font-size:13px;color:var(--or);font-weight:700;letter-spacing:.04em;margin-top:4px}
  .mcat-tag{display:inline-block;background:var(--or);color:#fff;font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:2px 9px;border-radius:999px;margin-top:5px}
  .mclose{background:var(--or);border:none;color:#fff;width:32px;height:32px;border-radius:50%;font-size:20px;font-weight:900;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .15s;line-height:1;z-index:10;position:static}
  .mclose:hover{background:var(--or2);transform:scale(1.1)}
  .mtabs{display:flex;gap:4px;padding:14px 30px 0;border-bottom:1px solid var(--b1);flex-shrink:0;overflow-x:auto;scrollbar-width:none}
  .mtabs::-webkit-scrollbar{display:none}
  .mtab{font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#000;padding:8px 18px;border-radius:7px 7px 0 0;cursor:pointer;border:1px solid transparent;border-bottom:none;transition:all .15s;background:transparent;position:relative;bottom:-1px;flex-shrink:0;white-space:nowrap}
  .mtab:hover{color:var(--or)}
  .mtab.on{background:#fff;border-color:var(--b1);border-bottom-color:#fff;color:var(--or)}
  .mtab-panels{flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--b2) transparent}
  .mtab-panels::-webkit-scrollbar{width:6px}
  .mtab-panels::-webkit-scrollbar-thumb{background:var(--b2);border-radius:4px}
  .mtab-panel{display:none;padding:22px 30px 26px}
  .mtab-panel.on{display:flex;gap:24px}
  .mtab-panel.single{display:none}
  .mtab-panel.single.on{display:block}
  #mpanel-ficha.on{padding:12px 16px}
  .mpanel-img{width:380px;flex-shrink:0;display:flex;flex-direction:column;gap:12px}
  .mgal{background:transparent;border-radius:10px;overflow:hidden;position:relative;cursor:zoom-in}
  .mimg{width:100%;aspect-ratio:1/1 !important;object-fit:contain;background:var(--s3);border-radius:10px;padding:16px;display:block}
  .mnoimg{height:160px;display:flex;align-items:center;justify-content:center;font-size:56px;opacity:.1}
  .mthumbs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
  .mthumbs::-webkit-scrollbar{display:none}
  .mthumb{width:48px;height:48px;border-radius:6px;overflow:hidden;border:2px solid var(--b1);cursor:pointer;flex-shrink:0;background:#fff;transition:border-color .15s}
  .mthumb.on{border-color:var(--or)}
  .mthumb img{width:100%;height:100%;object-fit:contain;display:block;padding:2px}
  .mpanel-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:14px}
  .mdesc{font-size:15px;color:#000;line-height:1.6}
  .msec-t{font-size:14px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--or);margin-bottom:12px}
  .mspecs{display:grid;grid-template-columns:1fr;gap:8px}
  .mspec{display:flex;align-items:flex-start;gap:7px;font-size:14px;color:#000;background:transparent;padding:2px 0;border:none;border-radius:0}
  .msdot{color:var(--or);flex-shrink:0;font-size:14px;margin-top:1px;font-weight:900}
  #mpanel-videos.on{display:flex !important;flex-direction:row;gap:0;padding:0;align-items:stretch;overflow:hidden}
  .mvids{display:block;width:100%;padding:16px 24px;overflow-y:auto}
  .myvid-wrapper{position:relative;width:100%;max-width:560px;height:300px;padding-bottom:0;display:block;border-radius:10px;overflow:hidden;background:#000;margin:0 auto 12px;z-index:5}
  .myvid-wrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}
  .myvid-wrapper.is-short{max-width:200px;height:340px}
  .myvid-wrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none;z-index:6}
  .mvlink{display:inline-flex;align-items:center;gap:6px;background:#f5f5f5;border:1px solid var(--b2);border-radius:8px;padding:8px 14px;text-decoration:none;color:#000;font-size:13px;font-weight:600}
  .mvlink:hover{border-color:var(--or);color:var(--or)}
  .mactions{padding:16px 30px;border-top:1px solid var(--b1);display:flex;gap:12px;align-items:center;flex-shrink:0;background:#fff;z-index:10}
  .btn-wa2{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:#25D366;color:#fff;border:none;border-radius:999px;padding:10px 20px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;text-decoration:none;transition:opacity .15s}
  .btn-wa2:hover{opacity:.88}
  .btn-modal-add{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--or);color:#fff;border:none;border-radius:999px;padding:10px 20px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:all .15s}
  .btn-modal-add:hover{background:var(--or2)}
  .btn-modal-add.added{background:#22c55e}
  .img-lightbox{display:none;position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,.6);align-items:center;justify-content:center;cursor:zoom-out}
  .img-lightbox.open{display:flex}
  .img-lightbox-inner{position:relative;max-width:60vw;max-height:70vh;cursor:default}
  .img-lightbox-inner img{display:block;max-width:100%;max-height:70vh;object-fit:contain;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
  .img-lightbox-close{position:absolute;top:-14px;right:-14px;background:#ff9100;border:none;color:#fff;font-size:18px;font-weight:900;width:30px;height:30px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center}
  .img-lightbox-close:hover{background:#e07f00}
  .mficha{display:flex;flex-direction:column;gap:12px}
  .mficha img{width:100%;border-radius:10px;border:1px solid var(--b1);display:block}
  .pdf-viewer-wrap{width:100%}
  .pdf-iframe-wrap{position:relative;width:100%;border-radius:10px;overflow:hidden;background:#fafafa;border:1px solid var(--b1)}
  .pdf-iframe-wrap iframe{display:block;width:100%;height:var(--pdf-h,400px);border:none}
  .pdf-loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#fafafa;z-index:2;transition:opacity .3s}
  .pdf-loading.hidden{opacity:0}
  .pdf-loading-txt{font-size:13px;color:var(--mu);font-weight:600}
}

/* ── CARRITO ── */
.cart-panel{
  position:fixed;top:60px;right:14px;z-index:9000;
  background:#fff;border:1px solid var(--b1);border-radius:12px;
  width:340px;max-height:calc(100% - 72px);
  display:none;flex-direction:column;
  box-shadow:0 12px 40px rgba(0,0,0,.15);overflow:hidden;
}
.cart-panel.open{display:flex}
.cart-header{padding:14px 16px;border-bottom:1px solid #f0f0f0;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.cart-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:16px;color:#111}
.cart-clear{background:none;border:none;color:#aaa;font-size:12px;cursor:pointer;font-weight:600}
.cart-clear:hover{color:#ef4444}
.cart-items{overflow-y:auto;flex:1;padding:6px 0}
.cart-item{display:flex;align-items:center;gap:9px;padding:9px 14px;border-bottom:1px solid #f5f5f5}
.cart-item-img{width:42px;height:42px;border-radius:7px;background:#f5f5f5;object-fit:contain;flex-shrink:0;border:1px solid #eee}
.cart-item-info{flex:1;min-width:0}
.cart-item-name{font-size:12px;font-weight:600;color:#111;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cart-item-marca{font-size:10px;color:var(--or);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.cart-item-del{background:none;border:none;color:#ccc;font-size:18px;cursor:pointer;flex-shrink:0}
.cart-item-del:hover{color:#ef4444}
.cart-footer{padding:12px 14px;border-top:1px solid #f0f0f0;flex-shrink:0}
.cart-empty{padding:28px;text-align:center;color:#aaa;font-size:13px}
.btn-cotizar-cart{
  width:100%;background:#25D366;color:#fff;border:none;border-radius:999px;
  padding:11px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;
  text-transform:uppercase;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;transition:opacity .15s;
}
.btn-cotizar-cart:hover{opacity:.9}

/* Desktop: hide mobile body */
@media(min-width:701px){
  #mbody-m{ display:none !important; }
  #mheader-d, #mtabs, .mtab-panels, #mactions-d { display:flex; }
  #mheader-d { display:flex; }
  #mtabs { display:flex; }
  .mtab-panels { display:block; }
  #mactions-d { display:flex; }
}
/* Mobile: hide desktop elements */
@media(max-width:700px){
  #mheader-d{ display:none !important; }
  #mtabs{ display:none !important; }
  .mtab-panels{ display:none !important; }
  #mactions-d{ display:none !important; }
  #mbody-m{ display:flex !important; }
  /* mgal-mobile styles (inside scroll) */
  #mgal-m{
    border-bottom:1px solid var(--b1);
    flex-direction:column;
    background:#f5f5f5;
    margin:-18px -20px 20px -20px;
    width:calc(100% + 40px);
  }
  #mgal-m::before{
    content:'';display:block;width:40px;height:4px;
    background:#d0d0d0;border-radius:2px;margin:12px auto 6px;
  }
  #mgal-m .mimg{ width:100%;aspect-ratio:1/1;object-fit:contain;padding:16px;display:block; }
}

/* ══════════════════════════════
   RESPONSIVE MÓVIL (<= 700px)
   ══════════════════════════════ */
@media(max-width:700px){

  /* Topbar más compacto */
  .topbar{ height:48px; padding:0 10px; gap:8px; }
  .brand img{ height:26px !important; }
  .search{ font-size:13px; padding:7px 8px 7px 30px; background:#f0f0f0; border-color:#ddd; }
  .sico{ left:9px; font-size:12px; color:#888; }
  .btn-cart-top{ padding:6px 11px; font-size:12px; gap:5px; }
  .cart-badge-top{ font-size:10px; padding:1px 4px; min-width:16px; }
  .topbar-r .cnt{ display:none; } /* ocultar contador en mobile */

  /* Ocultar sidebar, mostrar pills */
  .sidebar{ display:none !important; }
  .cat-pills{ display:flex; }

  /* Categorías pill-bar */
  .fbar{ padding:6px 10px; gap:5px; }
  .flbl{ font-size:9px; }
  .chip{ padding:4px 9px; font-size:11px; }

  /* Grid 2 columnas en mobile */
  .body{ flex-direction:column; }
  .main{ flex:1; }
  .gw{ padding:10px 10px 240px 10px; }
  .grid{ grid-template-columns:repeat(2, 1fr); gap:10px; }

  /* Card mobile compacta */
  .pc{ border-radius:10px; }
  .pc-body{ padding:8px; gap:1px; }
  .pc-name{ font-size:14px; }
  .pc-sku{ font-size:9px; }
  .pc-foot{ padding-top:6px; gap:4px; }
  .pc-brand-logo{ height:15px; max-width:50px; }
  .pc-brand-text{ font-size:9px; }
  .btn-add{ font-size:11px; padding:6px 10px; }

  /* MODAL mobile: fullscreen */
  .mbg{ padding:0; align-items:flex-start; justify-content:flex-start; }
  .modal{
    flex-direction:column;
    position:fixed !important;
    top:0; left:0; right:0;
    bottom:64px;
    width:100%; max-width:100%;
    height:auto;
    max-height:none;
    margin:0;
    border-radius:0 0 14px 14px;
    border:none;
    overflow:hidden;
    opacity:1;
    transform:none;
    animation:mobileIn .25s ease both !important;
  }
  @keyframes mobileIn{ from{opacity:0} to{opacity:1} }

  /* Galería dentro del scroll — sangra hasta los bordes */
  .mgal{
    border-right:none; border-bottom:1px solid var(--b1);
    flex-direction:column; justify-content:flex-start; align-items:stretch;
    background:#f5f5f5; padding:0; flex-shrink:0;
    margin: -18px -20px 20px -20px;
    width: calc(100% + 40px);
  }
  /* Handle pill arriba */
  .mgal::before{
    content:''; display:block; width:40px; height:4px;
    background:#d0d0d0; border-radius:2px;
    margin:12px auto 6px;
  }
  /* Imagen: cuadrado perfecto, ancho completo */
  .mimg{
    width:100%;
    aspect-ratio:1/1;
    object-fit:contain;
    padding:24px;
    flex-shrink:0;
    display:block;
  }
  .mnoimg{ width:100%; aspect-ratio:1/1; }

  /* Thumbs horizontales debajo de la imagen */
  .mthumbs{
    flex-direction:row; padding:0 16px 12px;
    overflow-x:auto; overflow-y:hidden;
    max-height:none; gap:8px;
  }
  .mthumb{ width:48px; height:40px; flex-shrink:0; }

  /* Cuerpo: scroll vertical */
  .mbody{ flex:1; min-height:0; }
  .mbody-inner{ padding:18px 20px 140px; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; height:100%; }
  .mtop{ padding-right:36px; margin-bottom:12px; }
  .mname{ font-size:28px; }
  .mmarca img{ height:24px; }
  .msku{ font-size:12px; margin-top:4px; }
  .mcat-tag{ font-size:9px; padding:3px 10px; margin-bottom:14px; }
  .mdesc{ font-size:13px; line-height:1.6; margin-bottom:16px; }
  .mspecs{ grid-template-columns:1fr; gap:8px; margin-bottom:16px; }
  .mspec{ font-size:12px; padding:9px 12px; }
  .msec-t{ font-size:10px; margin-bottom:8px; }

  /* Botón cerrar reposicionado */
  .mclose{ top:14px; right:14px; width:36px; height:36px; font-size:20px; z-index:20; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.12); }

  /* Acciones full-width */
  .mactions{ gap:10px; flex-direction:column; align-items:stretch; margin-top:12px; }
  .btn-wa2, .btn-modal-add{
    justify-content:center; padding:13px 18px; font-size:15px; width:100%;
  }

  /* Carrito: drawer desde arriba en mobile */
  .cart-panel{
    top:48px;bottom:auto;left:0;right:0;width:100%;
    max-height:calc(100vh - 120px);
    border-radius:0 0 16px 16px;border-top:none;
  }
  .cart-header::before{ display:none; }
  .cart-header{ position:relative;padding-top:14px; }
}

/* Pantallas muy pequeñas (360px) */
@media(max-width:380px){
  .grid{ grid-template-columns:repeat(2,1fr);gap:8px; }
  .pc-name{ font-size:13px; }
  .btn-add{ font-size:10px;padding:5px 8px; }
  .gw{ padding:8px 8px 240px; }
}
</style>
</head>
<body>
<div id="app">
  <div class="topbar">
    <div class="search-wrap"><span class="sico"><svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="6" cy="6" r="4.5" stroke="#ff9100" stroke-width="1.8"/><line x1="9.5" y1="9.5" x2="13" y2="13" stroke="#ff9100" stroke-width="1.8" stroke-linecap="round"/></svg></span><input class="search" id="q" type="text" placeholder="Buscar accesorio..." autocomplete="off"></div>
    <div class="topbar-r">
      <span class="cnt" id="cnt"></span>
      <button class="btn-cart-top" id="btn-cart-top" onclick="toggleCart()">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg> <span id="cart-count">0</span>
      </button>
    </div>
  </div>

  <!-- Marcas (horizontal scroll) -->
  <div class="fbar">
    <div class="flbl">Marca</div>
    <div class="chip-x" id="chip-x" onclick="clearAll()">✕ Limpiar</div>
    <div id="bchips"></div>
  </div>

  <!-- Categorías pills (solo mobile) -->
  <div class="cat-pills" id="cat-pills"></div>

  <div class="body">
    <!-- Sidebar desktop -->
    <div class="sidebar" id="sidebar"></div>
    <div class="main">
      <div class="gw" id="gw"><div class="loading"><div class="spin"></div>Cargando...</div></div>
    </div>
  </div>
</div>

<!-- MODAL -->
<div class="mbg" id="mbg" onclick="if(event.target===this)closeModal()">
  <div class="modal">
    <!-- DESKTOP: header con tabs -->
    <div class="mheader" id="mheader-d">
      <div>
        <div class="mmarca" id="mmarca"></div>
        <div class="mname" id="mname"></div>
        <div class="msku" id="msku"></div>
        <div class="mcat-tag" id="mcat"></div>
      </div>
      <button class="mclose" onclick="closeModal()">×</button>
    </div>
    <div class="mtabs" id="mtabs"></div>
    <div class="mtab-panels">
      <div class="mtab-panel on" id="mpanel-info">
        <div class="mpanel-img">
          <div class="mgal" id="mgal"></div>
        </div>
        <div class="mpanel-info">
          <div class="mdesc" id="mdesc"></div>
          <div id="mspecs-wrap"></div>
        </div>
      </div>
      <div class="mtab-panel single" id="mpanel-videos">
        <div class="mvids" id="mvids-wrap"></div>
      </div>
      <div class="mtab-panel single" id="mpanel-ficha">
        <div class="mficha" id="mficha-wrap"></div>
      </div>
    </div>
    <div class="mactions" id="mactions-d">
      <button class="btn-modal-add" id="btn-modal-add" onclick="addToCartFromModal()">+ Añadir a lista</button>
      <a class="btn-wa2" id="mwa" href="#"><svg width="16" height="16" viewBox="0 0 24 24" fill="#fff"><path d="M20.52 3.48A11.93 11.93 0 0 0 12 0C5.37 0 0 5.37 0 12c0 2.11.55 4.16 1.6 5.97L0 24l6.22-1.57A11.94 11.94 0 0 0 12 24c6.63 0 12-5.37 12-12 0-3.21-1.25-6.22-3.48-8.52zM12 22c-1.85 0-3.67-.5-5.25-1.44l-.38-.22-3.93.99 1.03-3.8-.25-.4A9.94 9.94 0 0 1 2 12C2 6.48 6.48 2 12 2c2.67 0 5.18 1.04 7.07 2.93A9.93 9.93 0 0 1 22 12c0 5.52-4.48 10-10 10zm5.47-7.3c-.3-.15-1.77-.87-2.04-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.17-.17.2-.35.22-.65.07-.3-.15-1.27-.47-2.42-1.49-.9-.8-1.5-1.78-1.68-2.08-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.07-.15-.67-1.62-.92-2.22-.24-.58-.49-.5-.67-.51H6.94c-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.48s1.07 2.88 1.22 3.08c.15.2 2.1 3.2 5.08 4.49.71.31 1.27.49 1.7.63.72.23 1.37.2 1.88.12.57-.09 1.77-.72 2.02-1.42.25-.7.25-1.3.17-1.42-.07-.12-.27-.2-.57-.35z"/></svg> Solicitar cotización</a>
    </div>
    <!-- MOBILE: scroll simple -->
    <div class="mbody" id="mbody-m">
      <div class="mbody-inner">
        <div class="mgal" id="mgal-m"></div>
        <div class="mtop">
          <div class="mmarca" id="mmarca-m"></div>
          <div class="mname" id="mname-m"></div>
          <div class="msku" id="msku-m"></div>
        </div>
        <div class="mcat-tag" id="mcat-m" style="display:none;"></div>
        <div class="mdesc" id="mdesc-m"></div>
        <div id="mspecs-wrap-m"></div>
        <div id="mvids-wrap-m"></div>
        <div class="mactions">
          <button class="btn-modal-add" id="btn-modal-add-m" onclick="addToCartFromModal()">+ Añadir a lista</button>
          <button class="btn-wa2" id="mwa-m"><svg width="16" height="16" viewBox="0 0 24 24" fill="#fff"><path d="M20.52 3.48A11.93 11.93 0 0 0 12 0C5.37 0 0 5.37 0 12c0 2.11.55 4.16 1.6 5.97L0 24l6.22-1.57A11.94 11.94 0 0 0 12 24c6.63 0 12-5.37 12-12 0-3.21-1.25-6.22-3.48-8.52zM12 22c-1.85 0-3.67-.5-5.25-1.44l-.38-.22-3.93.99 1.03-3.8-.25-.4A9.94 9.94 0 0 1 2 12C2 6.48 6.48 2 12 2c2.67 0 5.18 1.04 7.07 2.93A9.93 9.93 0 0 1 22 12c0 5.52-4.48 10-10 10zm5.47-7.3c-.3-.15-1.77-.87-2.04-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.17-.17.2-.35.22-.65.07-.3-.15-1.27-.47-2.42-1.49-.9-.8-1.5-1.78-1.68-2.08-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.07-.15-.67-1.62-.92-2.22-.24-.58-.49-.5-.67-.51H6.94c-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.48s1.07 2.88 1.22 3.08c.15.2 2.1 3.2 5.08 4.49.71.31 1.27.49 1.7.63.72.23 1.37.2 1.88.12.57-.09 1.77-.72 2.02-1.42.25-.7.25-1.3.17-1.42-.07-.12-.27-.2-.57-.35z"/></svg> Solicitar cotización</button>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Lightbox desktop -->
<div class="img-lightbox" id="img-lightbox" onclick="closeLightbox()">
  <div class="img-lightbox-inner" onclick="event.stopPropagation()">
    <button class="img-lightbox-close" onclick="closeLightbox()">×</button>
    <img id="img-lightbox-img" src="" alt="">
  </div>
</div>

<!-- CARRITO -->
<div class="cart-panel" id="cart-panel">
  <div class="cart-header">
    <div class="cart-title">🛒 Lista de Cotización</div>
    <button class="cart-clear" onclick="clearCart()">Vaciar lista</button>
  </div>
  <div class="cart-items" id="cart-items"><div class="cart-empty">Agrega productos para cotizar</div></div>
  <div class="cart-footer">
    <button class="btn-cotizar-cart" onclick="sendCartWA()"><svg width="18" height="18" viewBox="0 0 24 24" fill="#fff" xmlns="http://www.w3.org/2000/svg"><path d="M20.52 3.48A11.93 11.93 0 0 0 12 0C5.37 0 0 5.37 0 12c0 2.11.55 4.16 1.6 5.97L0 24l6.22-1.57A11.94 11.94 0 0 0 12 24c6.63 0 12-5.37 12-12 0-3.21-1.25-6.22-3.48-8.52zM12 22c-1.85 0-3.67-.5-5.25-1.44l-.38-.22-3.93.99 1.03-3.8-.25-.4A9.94 9.94 0 0 1 2 12C2 6.48 6.48 2 12 2c2.67 0 5.18 1.04 7.07 2.93A9.93 9.93 0 0 1 22 12c0 5.52-4.48 10-10 10zm5.47-7.3c-.3-.15-1.77-.87-2.04-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.17-.17.2-.35.22-.65.07-.3-.15-1.27-.47-2.42-1.49-.9-.8-1.5-1.78-1.68-2.08-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.07-.15-.67-1.62-.92-2.22-.24-.58-.49-.5-.67-.51H6.94c-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.48s1.07 2.88 1.22 3.08c.15.2 2.1 3.2 5.08 4.49.71.31 1.27.49 1.7.63.72.23 1.37.2 1.88.12.57-.09 1.77-.72 2.02-1.42.25-.7.25-1.3.17-1.42-.07-.12-.27-.2-.57-.35z"/></svg> Solicitar cotización por WhatsApp</button>
  </div>
</div>

<script>
const FC={apiKey:"AIzaSyBTTdGLKEbCl3iBPk16W4ace7VUewksbhc",authDomain:"ekann-catalogo.firebaseapp.com",projectId:"ekann-catalogo",storageBucket:"ekann-catalogo.firebasestorage.app",messagingSenderId:"227325397906",appId:"1:227325397906:web:c61a335f6501c315718f4b"};
firebase.initializeApp(FC);
const db = firebase.firestore();

let ALL=[], CAT='all', BRD='all', Q='', BRAND_LOGOS={}, cart=[];

async function load(){
  try{
    const doc = await db.collection('ekann-config').doc('brand-logos').get();
    if(doc.exists) BRAND_LOGOS = doc.data();
    const s = await db.collection('ekann-catalogo').get();
    ALL = s.docs.map(d=>({id:d.id,...d.data()})).filter(p=>p.activo!==false).sort((a,b)=>{
      let r=(a.categoria||'').localeCompare(b.categoria||'','es',{numeric:true,sensitivity:'base'});
      return r!==0?r:(a.nombre||'').localeCompare(b.nombre||'','es',{numeric:true,sensitivity:'base'});
    });
    buildSidebar(); buildCatPills(); buildBrands(); apply();
  }catch(err){
    document.getElementById('gw').innerHTML=`<div class="empty"><div class="e-t">Error cargando</div><div style="font-size:12px;color:#aaa">${err.message}</div></div>`;
  }
}

function buildSidebar(){
  const cats=[...new Set(ALL.map(p=>p.categoria||'Otros'))].sort((a,b)=>a.localeCompare(b,'es',{numeric:true,sensitivity:'base'}));
  const cc={}; ALL.forEach(p=>{cc[p.categoria||'Otros']=(cc[p.categoria||'Otros']||0)+1;});
  document.getElementById('sidebar').innerHTML=
    `<div class="sg-title">Categorías</div>
     <div class="sitem on" data-c="all" onclick="setCat('all')"><span class="sitem-name">Todos</span><span class="scount">${ALL.length}</span></div>`+
    cats.map(c=>`<div class="sitem" data-c="${e(c)}" onclick="setCat('${e(c)}')"><span class="sitem-name">${e(c)}</span><span class="scount">${cc[c]}</span></div>`).join('');
}

function buildCatPills(){
  const cats=[...new Set(ALL.map(p=>p.categoria||'Otros'))].sort((a,b)=>a.localeCompare(b,'es',{numeric:true,sensitivity:'base'}));
  const cc={}; ALL.forEach(p=>{cc[p.categoria||'Otros']=(cc[p.categoria||'Otros']||0)+1;});
  document.getElementById('cat-pills').innerHTML=
    `<div class="cat-pill on" data-c="all" onclick="setCat('all')">Todos<span class="cpcount">${ALL.length}</span></div>`+
    cats.map(c=>`<div class="cat-pill" data-c="${e(c)}" onclick="setCat('${e(c)}')">${e(c)}<span class="cpcount">${cc[c]}</span></div>`).join('');
}

function buildBrands(){
  const brands=[...new Set(ALL.map(p=>p.marca).filter(Boolean))].sort((a,b)=>a.localeCompare(b,'es',{numeric:true,sensitivity:'base'}));
  document.getElementById('bchips').innerHTML=
    `<div class="chip on" data-b="all" onclick="setBrd('all')">Todas</div>`+
    brands.map(b=>{
      const lg=BRAND_LOGOS[b];
      return `<div class="chip" data-b="${e(b)}" onclick="setBrd('${e(b)}')">${lg?`<img src="${e(lg)}" style="height:14px;object-fit:contain;display:block;">`:e(b)}</div>`;
    }).join('');
}

function setCat(c){
  CAT=c;
  document.querySelectorAll('.sitem').forEach(x=>x.classList.toggle('on',x.dataset.c===c));
  document.querySelectorAll('.cat-pill').forEach(x=>x.classList.toggle('on',x.dataset.c===c));
  updX(); apply();
  const gw = document.getElementById('gw');
  gw.scrollTop = 0;
  requestAnimationFrame(()=>{ gw.scrollTop = 0; });
}
function setBrd(b){
  BRD=b;
  document.querySelectorAll('.chip[data-b]').forEach(x=>x.classList.toggle('on',x.dataset.b===b));
  updX(); apply();
  const gw = document.getElementById('gw');
  gw.scrollTop = 0;
  requestAnimationFrame(()=>{ gw.scrollTop = 0; });
}
function clearAll(){
  CAT='all';BRD='all';Q='';
  document.getElementById('q').value='';
  document.querySelectorAll('.sitem,.chip,.cat-pill').forEach(x=>x.classList.toggle('on',x.dataset.c==='all'||x.dataset.b==='all'));
  updX(); apply();
  const gw = document.getElementById('gw');
  gw.scrollTop = 0;
  requestAnimationFrame(()=>{ gw.scrollTop = 0; });
}
function updX(){
  document.getElementById('chip-x').classList.toggle('show',CAT!=='all'||BRD!=='all'||!!Q);
}

function apply(){
  const q=Q.toLowerCase();
  const res=ALL.filter(p=>
    (CAT==='all'||(p.categoria||'Otros')===CAT)&&
    (BRD==='all'||p.marca===BRD)&&
    (!q||[p.nombre,p.marca,p.sku,p.categoria,p.descripcion].join(' ').toLowerCase().includes(q))
  );
  document.getElementById('cnt').textContent=`${res.length} items`;
  if(!res.length) return document.getElementById('gw').innerHTML='<div class="empty">Sin resultados</div>';
  document.getElementById('gw').innerHTML=`<div class="grid">${res.map(p=>{
    const img=p.imagenes&&p.imagenes[0]?`<img src="${e(p.imagenes[0])}" loading="lazy">`:'<span class="noimg">📦</span>';
    const lg=BRAND_LOGOS[p.marca];
    const inCart=cart.find(x=>x.id===p.id);
    return`<div class="pc" onclick="openModal('${e(p.id)}')">
      <div class="pc-img">${img}</div>
      <div class="pc-body">
        <div class="pc-name">${e(p.nombre)}</div>
        <div class="pc-sku">${e(p.sku||'')}</div>
        <div class="pc-foot">
          ${lg?`<img class="pc-brand-logo" src="${e(lg)}">`:`<span class="pc-brand-text">${e(p.marca||'')}</span>`}
          <div class="pc-foot-btns">
            <button class="btn-add ${inCart?'added':''}" data-id="${e(p.id)}" onclick="event.stopPropagation();addToCart('${e(p.id)}')">${inCart?'✓':'+ Cotizar'}</button>
          </div>
        </div>
      </div>
    </div>`;
  }).join('')}</div>`;
}

document.getElementById('q').addEventListener('input',ev=>{
  setTimeout(()=>{Q=ev.target.value.trim();updX();apply();},200);
});
document.getElementById('q').addEventListener('keydown',ev=>{
  if(ev.key==='Enter'||ev.keyCode===13){ ev.target.blur(); }
});

let modalCurrentId=null;
const isDesktop = () => window.innerWidth > 700;

function updateModalAddBtn(){
  const ids = isDesktop() ? ['btn-modal-add'] : ['btn-modal-add-m'];
  ids.forEach(id => {
    const btn = document.getElementById(id); if(!btn) return;
    const inCart = cart.find(x => x.id === modalCurrentId);
    btn.textContent = inCart ? '✓ En lista' : '+ Añadir a lista';
    btn.classList.toggle('added', !!inCart);
  });
}

function addToCartFromModal(){
  if(!modalCurrentId) return;
  addToCart(modalCurrentId);
  updateModalAddBtn();
}

function switchTab(tabEl){
  document.querySelectorAll('.mtab').forEach(t=>t.classList.remove('on'));
  tabEl.classList.add('on');
  ['mpanel-info','mpanel-videos','mpanel-ficha'].forEach(id=>document.getElementById(id).classList.remove('on'));
  document.getElementById(tabEl.dataset.panel).classList.add('on');
}

function setImg(i,url){
  document.getElementById('mimg').src=url;
  document.querySelectorAll('.mthumb').forEach((t,j)=>t.classList.toggle('on',j===i));
}

function openLightbox(src){
  const lb=document.getElementById('img-lightbox');
  const lbImg=document.getElementById('img-lightbox-img');
  if(!lb||!lbImg) return;
  lbImg.src=src; lb.classList.add('open');
}
function closeLightbox(){
  const lb=document.getElementById('img-lightbox');
  if(lb) lb.classList.remove('open');
}

function openModal(id){
  const p=ALL.find(x=>x.id===id); if(!p)return; modalCurrentId=id;
  const desktop = isDesktop();
  const lg = BRAND_LOGOS[p.marca];
  const logoHtml = lg ? `<img src="${e(lg)}" alt="${e(p.marca||'')}">` : `<span style="font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--or)">${e(p.marca||'')}</span>`;
  const waUrl = 'https://wa.me/523316188715?text='+encodeURIComponent('Hola, me interesa: '+(p.nombre||'')+(p.sku?' ('+p.sku+')':''));

  if(desktop){
    // Show desktop elements, hide mobile
    document.getElementById('mheader-d').style.display='';
    document.getElementById('mtabs').style.display='';
    document.querySelector('.mtab-panels').style.display='';
    document.getElementById('mactions-d').style.display='';
    document.getElementById('mbody-m').style.display='none';

    document.getElementById('mmarca').innerHTML = logoHtml;
    document.getElementById('mname').textContent = p.nombre||'—';
    document.getElementById('msku').textContent = p.sku ? 'Código: '+p.sku : '';
    const catEl = document.getElementById('mcat');
    catEl.textContent = p.categoria||''; catEl.style.display = p.categoria ? '' : 'none';

    const imgs = p.imagenes||[];
    const mgalEl = document.getElementById('mgal');
    if(imgs.length){
      mgalEl.innerHTML = `<img class="mimg" id="mimg" src="${e(imgs[0])}" alt="${e(p.nombre||'')}">`;
      const mpanelImg = mgalEl.parentElement;
      let thumbsEl = mpanelImg.querySelector('.mthumbs'); if(thumbsEl) thumbsEl.remove();
      if(imgs.length>1){
        thumbsEl = document.createElement('div'); thumbsEl.className='mthumbs';
        thumbsEl.innerHTML = imgs.map((u,i)=>`<div class="mthumb${i===0?' on':''}" onclick="setImg(${i},'${e(u)}')"><img src="${e(u)}" loading="lazy"></div>`).join('');
        mpanelImg.appendChild(thumbsEl);
      }
      if(!mgalEl._lbBound){
        mgalEl.addEventListener('click',()=>{ const img=mgalEl.querySelector('.mimg'); if(img&&img.src) openLightbox(img.src); });
        mgalEl._lbBound=true;
      }
    } else { mgalEl.innerHTML='<div class="mnoimg">📦</div>'; }

    document.getElementById('mdesc').textContent = p.descripcion||'';
    const specs = p.caracteristicas||p.especificaciones||p.specs||p.detalles||[];
    const specsArr = Array.isArray(specs) ? specs : (typeof specs==='string' ? specs.split('\n') : []);
    document.getElementById('mspecs-wrap').innerHTML = specsArr.length
      ? `<div><div class="msec-t">Especificaciones</div><div class="mspecs">${specsArr.filter(Boolean).map(s=>`<div class="mspec"><span class="msdot">▸</span>${e(s)}</div>`).join('')}</div></div>` : '';

    const vids = p.videos||[];
    const wrap = document.getElementById('mvids-wrap');
    wrap.innerHTML = vids.map((u,i)=>{
      const ytId = u.match(/(?:youtu\.be\/|youtube\.com\/(?:watch\?v=|embed\/|shorts\/))([a-zA-Z0-9_-]{11})/)?.[1];
      const isShort = u.includes('/shorts/');
      if(ytId) return `<div class="myvid-wrapper${isShort?' is-short':''}"><iframe src="https://www.youtube.com/embed/${ytId}" allowfullscreen allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" loading="lazy"></iframe></div>`;
      return `<a class="mvlink" href="${e(u)}" target="_blank">▶ Video${vids.length>1?' '+(i+1):''}</a>`;
    }).join('');

    const tabs=[{id:'info',label:'Información',panel:'mpanel-info'}];
    if(vids.length) tabs.push({id:'videos',label:'Videos',panel:'mpanel-videos'});
    document.getElementById('mtabs').innerHTML = tabs.map((t,i)=>
      `<div class="mtab${i===0?' on':''}" data-panel="${t.panel}" onclick="switchTab(this)">${t.label}</div>`).join('');
    ['mpanel-info','mpanel-videos','mpanel-ficha'].forEach(id=>document.getElementById(id).classList.remove('on'));
    document.getElementById('mpanel-info').classList.add('on');
    document.getElementById('mwa').href = waUrl;

  } else {
    // Mobile: hide desktop, show mobile
    document.getElementById('mheader-d').style.display='none';
    document.getElementById('mtabs').style.display='none';
    document.querySelector('.mtab-panels').style.display='none';
    document.getElementById('mactions-d').style.display='none';
    document.getElementById('mbody-m').style.display='';

    document.getElementById('mmarca-m').innerHTML = logoHtml;
    document.getElementById('mname-m').textContent = p.nombre||'—';
    document.getElementById('msku-m').textContent = p.sku ? 'Código: '+p.sku : '';
    const catElM = document.getElementById('mcat-m');
    catElM.textContent = p.categoria||''; catElM.style.display = p.categoria ? 'inline-block' : 'none';

    const imgs = p.imagenes||[];
    const mgalM = document.getElementById('mgal-m');
    if(imgs.length){
      mgalM.innerHTML = `<img class="mimg" id="mimg-m" src="${e(imgs[0])}">${imgs.length>1?`<div class="mthumbs">${imgs.map(u=>`<div class="mthumb" onclick="document.getElementById('mimg-m').src='${e(u)}'"><img src="${e(u)}"></div>`).join('')}</div>`:''}`;
    } else { mgalM.innerHTML='<div class="mnoimg">📦</div>'; }

    document.getElementById('mdesc-m').textContent = p.descripcion||'';
    const specs = p.caracteristicas||p.especificaciones||p.specs||p.detalles||[];
    const specsArr = Array.isArray(specs)?specs:(typeof specs==='string'?specs.split('\n'):[]);
    document.getElementById('mspecs-wrap-m').innerHTML = specsArr.length
      ? `<div class="msec-t">Especificaciones</div><div class="mspecs">${specsArr.filter(Boolean).map(s=>`<div class="mspec"><span class="msdot"><svg width="10" height="10" viewBox="0 0 10 10" fill="#ff9100"><polygon points="1,0 9,5 1,10"/></svg></span><div>${e(s)}</div></div>`).join('')}</div>` : '';

    const vids = p.videos||[];
    document.getElementById('mvids-wrap-m').innerHTML = vids.length
      ? `<div class="msec-t">Videos</div><div class="mvids">${vids.map(u=>{
          const embedUrl=toEmbed(u); const thumbUrl=toThumb(u);
          if(embedUrl) return `<div class="video-thumb" onclick="playVideo(this,'${e(embedUrl)}')"><img src="${e(thumbUrl)}" loading="lazy" onerror="this.style.display='none'"><div class="play-btn"><svg width="20" height="20" viewBox="0 0 20 20" fill="white"><polygon points="6,3 17,10 6,17"/></svg></div></div>`;
          return `<a class="mvlink" href="${e(u)}" target="_blank">▶ Video</a>`;
        }).join('')}</div>` : '';

    document.getElementById('mwa-m').onclick = ()=>{ window.open(waUrl,'_blank'); };
    document.querySelector('.mbody-inner').scrollTop=0;
  }

  updateModalAddBtn();
  document.getElementById('mbg').classList.add('open');
  document.body.style.overflow='hidden';
}

function closeModal(){
  document.getElementById('mbg').classList.remove('open');
  document.body.style.overflow='';
  // Stop videos
  document.querySelectorAll('#mvids-wrap iframe, #mvids-wrap-m iframe').forEach(f=>{f.src='';});
}

function updateModalAddBtn(){
  const btn=document.getElementById('btn-modal-add'); if(!btn||!modalCurrentId)return;
  const inCart=cart.find(x=>x.id===modalCurrentId);
  btn.textContent=inCart?'✓ En lista':'+ Añadir a lista';
  btn.classList.toggle('added',!!inCart);
}

function addToCartFromModal(){
  if(!modalCurrentId)return;
  addToCart(modalCurrentId);
  updateModalAddBtn();
}



function toggleCart(){document.getElementById('cart-panel').classList.toggle('open');}

function addToCart(id){
  const p=ALL.find(x=>x.id===id); if(!p)return;
  if(cart.find(x=>x.id===id)){cart=cart.filter(x=>x.id!==id);}
  else{cart.push({id,nombre:p.nombre||'—',marca:p.marca||'',sku:p.sku||'',img:(p.imagenes||[])[0]||''});}
  updateCart();
  animateCartBtn();
}

function clearCart(){cart=[];updateCart();}

function updateCart(){
  document.getElementById('cart-count').textContent=cart.length;
  document.getElementById('cart-items').innerHTML=cart.length?cart.map(p=>`
    <div class="cart-item">
      ${p.img?`<img class="cart-item-img" src="${e(p.img)}">`:'<div class="cart-item-img"></div>'}
      <div class="cart-item-info">
        <div class="cart-item-marca">${e(p.marca)}</div>
        <div class="cart-item-name">${e(p.nombre)}</div>
        ${p.sku?`<div style="font-size:10px;color:#aaa">${e(p.sku)}</div>`:''}
      </div>
      <button class="cart-item-del" onclick="addToCart('${e(p.id)}')">×</button>
    </div>`).join(''):'<div class="cart-empty">Agrega productos para cotizar</div>';
  document.querySelectorAll('.btn-add[data-id]').forEach(btn=>{
    const inCart=cart.find(x=>x.id===btn.dataset.id);
    btn.textContent=inCart?'✓':'+ Cotizar';
    btn.classList.toggle('added',!!inCart);
  });
}

function sendCartWA(){
  if(!cart.length)return;
  let msg='Hola, me gustaría cotizar los siguientes productos EKANN:\n\n';
  cart.forEach((p,i)=>{msg+=`${i+1}. ${p.nombre}${p.sku?' ('+p.sku+')':''}${p.marca?' — '+p.marca:''}\n`;});
  msg+='\n¿Me pueden dar información de precios y disponibilidad?';
  window.open('https://wa.me/523316188715?text='+encodeURIComponent(msg),'_blank');
}

function e(s){return String(s||'').replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"')}

document.addEventListener('click',ev=>{
  const panel=document.getElementById('cart-panel');
  const btnTop=document.getElementById('btn-cart-top');
  if(panel.classList.contains('open')&&!panel.contains(ev.target)&&!btnTop.contains(ev.target)){
    panel.classList.remove('open');
  }
});

function animateCartBtn(){
  const btn = document.getElementById('btn-cart-top');
  btn.classList.remove('pop');
  void btn.offsetWidth; // reflow to restart animation
  btn.classList.add('pop');
  setTimeout(()=>btn.classList.remove('pop'), 400);
}
function toEmbed(url){
  try{
    const u=new URL(url);
    let vid='';
    if(u.hostname.includes('youtube.com')){
      if(u.pathname.includes('/shorts/')) vid=u.pathname.split('/shorts/')[1].split('/')[0];
      else vid=u.searchParams.get('v');
    } else if(u.hostname.includes('youtu.be')) vid=u.pathname.slice(1).split('?')[0];
    if(vid) return 'https://www.youtube.com/embed/'+vid+'?autoplay=1&playsinline=1';
    const vm=url.match(/vimeo\.com\/(\d+)/);
    if(vm) return 'https://player.vimeo.com/video/'+vm[1]+'?autoplay=1';
  }catch(err){}
  return null;
}
function toThumb(url){
  try{
    const u=new URL(url);
    let vid='';
    if(u.hostname.includes('youtube.com')){
      if(u.pathname.includes('/shorts/')) vid=u.pathname.split('/shorts/')[1].split('/')[0];
      else vid=u.searchParams.get('v');
    } else if(u.hostname.includes('youtu.be')) vid=u.pathname.slice(1).split('?')[0];
    if(vid) return 'https://img.youtube.com/vi/'+vid+'/hqdefault.jpg';
  }catch(err){}
  return '';
}
function playVideo(el,embedUrl){
  el.outerHTML='<div class="video-iframe-wrap"><iframe src="'+embedUrl+'" allow="autoplay; fullscreen" allowfullscreen></iframe></div>';
}
load();
</script>
</body>
</html>