/* ═══════════════════════════════════════════════════════════════
   Cabecera de la tienda (logo + buscador + cuenta + carrito, fila de
   categorías y panel lateral de categorías) — Zonelan
   La comparten TODAS las páginas de la tienda desde el 13/10/2026 (antes
   el buscador solo estaba en index.html). En index.html funciona sobre el
   catálogo de la propia página; en el resto, js/cabecera-tienda.js lleva
   a index.html?buscar=… / ?grupo=… / ?categoria=…
═══════════════════════════════════════════════════════════════ */
/* ═══ Cabecera de tienda (logo + buscador + cuenta + carrito), estilo
   coolmod.com — fila 1 lleva el buscador GRANDE integrado (no una banda
   aparte debajo). flex-wrap con .header-search forzado a ancho completo
   por debajo de 768px es lo que hace que en móvil el buscador baje a su
   propia línea en vez de apretarse junto al logo/cuenta/carrito. */
.nav{flex-wrap:wrap;row-gap:.6rem;padding-top:.6rem;padding-bottom:.6rem;height:auto;min-height:64px}
.header-search{order:2;flex:1 1 320px;max-width:680px;margin:0 auto}
.nav .logo{order:1}
.nav-tools{order:3;display:flex;align-items:center;gap:.5rem;margin-left:auto}
.hbg{order:4}
@media(max-width:767px){.header-search{order:5;flex:1 1 100%;max-width:none;margin:0}}
/* Por debajo de 480px el selector de categoría + el botón "Buscar" no caben
   junto al campo de texto sin recortarse — se oculta el selector (la
   búsqueda sigue funcionando sobre "Todo el catálogo", su valor por
   defecto) para dejarle sitio de sobra al campo y al botón. */
@media(max-width:480px){.header-search .search-cat-select,.header-search .search-sep{display:none}}
.hdr-consulta{font-size:.82rem;font-weight:800;color:var(--navy);text-decoration:underline;text-underline-offset:3px;white-space:nowrap;padding:.5rem .3rem}
@media(max-width:640px){.hdr-consulta{font-size:.76rem;padding:.5rem .2rem}}
.nav-acc{display:flex;align-items:center;gap:.4rem;padding:.5rem .7rem;border-radius:10px;font-size:.85rem;font-weight:600;color:var(--navy);transition:background .2s}
.nav-acc:hover{background:var(--bg2)}
.nav-acc svg{width:19px;height:19px;stroke:var(--navy);stroke-width:1.8;fill:none;flex-shrink:0}
.nav-acc span{display:none}
@media(min-width:1080px){.nav-acc span{display:inline}}
.hdr-cart{position:relative;background:var(--navy);color:#fff;border:none;border-radius:11px;width:42px;height:42px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .2s}
.hdr-cart:hover{background:var(--odk)}
.hdr-cart svg{width:20px;height:20px}
.hdr-cart .cart-badge{position:absolute;top:-5px;right:-5px}
@media(max-width:767px){.nav-tools{gap:.35rem}.nav-acc{padding:.5rem}}

/* Botón "Categorías" + panel lateral desplegable */
.nav-left{display:flex;align-items:center;gap:.9rem;flex-shrink:0}
/* Fila 2: el botón de categorías (naranja) + accesos directos a los grupos
   reales del menú (ver GRUPOS_CATMENU en el script de más abajo) — enlazan
   con index.html?grupo=Nombre, el mismo mecanismo de deep-link que ya usaba
   el menú de categorías. */
.nav-row2{max-width:1200px;margin:0 auto;padding:0 1.5rem;height:52px;display:flex;align-items:center;gap:1.7rem;border-top:1px solid var(--bdr)}
.catmenu-trigger{display:flex;align-items:center;gap:.55rem;padding:.6rem 1.05rem;border-radius:10px;border:none;background:linear-gradient(135deg,#ff8a4d,var(--o));font-weight:800;font-size:.86rem;color:#fff;cursor:pointer;transition:background .2s,transform .15s,box-shadow .2s;flex-shrink:0;box-shadow:0 5px 16px rgba(255,108,34,.28)}
.catmenu-trigger:hover{background:var(--odk);transform:translateY(-1px);box-shadow:0 7px 20px rgba(217,83,26,.32)}
.catmenu-trigger svg{width:18px;height:18px;stroke:#fff;stroke-width:2.4;fill:none;flex-shrink:0}
@media(max-width:640px){.catmenu-trigger span{display:none}.catmenu-trigger{padding:.6rem}}
@media(max-width:767px){.nav-row2{gap:.9rem}}
.catmenu-overlay{position:fixed;inset:0;background:rgba(20,24,36,.45);z-index:205;opacity:0;pointer-events:none;transition:.2s}
.catmenu-overlay.open{opacity:1;pointer-events:auto}
.catmenu-panel{position:fixed;top:0;left:0;height:100%;width:min(340px,90vw);background:#fff;z-index:206;transform:translateX(-100%);transition:transform .25s,visibility .25s;visibility:hidden;display:flex;flex-direction:column;box-shadow:10px 0 30px rgba(0,0,0,.15)}
.catmenu-panel.open{transform:translateX(0);visibility:visible}
.catmenu-head{padding:1.3rem 1.4rem;border-bottom:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between}
.catmenu-head h3{font-size:1.05rem;color:var(--navy)}
.catmenu-close{background:var(--bg2);border:none;width:34px;height:34px;border-radius:999px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--navy);flex-shrink:0}
.catmenu-close svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none}
.catmenu-list{flex:1;overflow-y:auto;padding:.5rem .3rem}
.catmenu-item{display:flex;align-items:center;gap:.95rem;width:100%;text-align:left;padding:.85rem .9rem;border-radius:10px;border:none;background:none;cursor:pointer;font:inherit}
.catmenu-item:hover{background:var(--bg2)}
.catmenu-item.active{background:rgba(255,108,34,.08)}
.catmenu-item .cmi{width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.catmenu-item .cmi svg{width:23px;height:23px;stroke:var(--navy);stroke-width:1.6;fill:none}
.catmenu-item.active .cmi svg{stroke:var(--o)}
.catmenu-item .cmn{flex:1;font-size:.92rem;font-weight:700;color:var(--navy);line-height:1.25}
.catmenu-item .cmc{font-size:.72rem;font-weight:700;color:var(--muted);background:var(--bg2);padding:.15rem .5rem;border-radius:999px}
.catmenu-item .cmarrow{width:15px;height:15px;stroke:var(--muted);stroke-width:2;fill:none;flex-shrink:0;transition:transform .2s}
.catmenu-item .cmarrow.open{transform:rotate(90deg)}
.catmenu-sublist{display:flex;flex-direction:column;padding:.1rem .6rem .5rem 2.9rem}
.catmenu-subitem{display:block;width:100%;text-align:left;border:none;background:none;cursor:pointer;font:inherit;padding:.5rem .6rem;border-radius:8px;font-size:.82rem;font-weight:600;color:var(--muted)}
.catmenu-subitem:hover{background:var(--bg2);color:var(--navy)}
.catmenu-subitem.active{color:var(--o);background:rgba(255,108,34,.08)}
/* "Más categorías": lo que no entra en la lista corta del grupo, plegado */
.catmenu-mas{margin-top:.25rem;border-top:1px solid var(--bdr);padding-top:.25rem}
.catmenu-mas>summary{list-style:none;cursor:pointer;padding:.5rem .6rem;border-radius:8px;font-size:.8rem;font-weight:700;color:var(--navy);display:flex;align-items:center;gap:.4rem}
.catmenu-mas>summary::-webkit-details-marker{display:none}
.catmenu-mas>summary::before{content:"▸";color:var(--muted);font-size:.75rem;transition:transform .15s;display:inline-block}
.catmenu-mas[open]>summary::before{transform:rotate(90deg)}
.catmenu-mas>summary:hover{background:var(--bg2)}
.catmenu-mas .catmenu-subitem:first-child{color:var(--muted);font-weight:600;border-bottom:none;border-radius:8px;padding-bottom:.5rem;margin-bottom:0}
.catmenu-subitem:first-child{color:var(--navy);font-weight:700;border-bottom:1px solid var(--bdr);border-radius:0;padding-bottom:.6rem;margin-bottom:.2rem}
.catmenu-trending{border-top:1px solid var(--bdr);padding:.9rem .6rem 1.2rem}
.catmenu-trending h4{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:.3rem .75rem .5rem}
.catmenu-trending a{display:flex;align-items:center;gap:.5rem;padding:.55rem .75rem;border-radius:10px;font-size:.85rem;font-weight:600;color:var(--navy);transition:background .2s}
.catmenu-trending a:hover{background:var(--bg2)}
.catmenu-trending .cmbadge{font-size:.66rem;font-weight:800;color:var(--o);background:rgba(255,108,34,.1);padding:.15rem .5rem;border-radius:999px}

/* Buscador */
.search-box{max-width:680px;margin:0 auto;position:relative;display:flex;align-items:center;background:#fff;border:1.5px solid var(--bdr);border-radius:14px;padding:.2rem .3rem .2rem .3rem;box-shadow:0 4px 18px rgba(43,49,69,.06);transition:border-color .2s,box-shadow .2s}
.search-box:focus-within{border-color:var(--o);box-shadow:0 4px 18px rgba(255,108,34,.14)}
.search-cat-select{border:none;outline:none;background:transparent;font:inherit;font-size:.82rem;font-weight:700;color:var(--navy);padding:.75rem .4rem .75rem .9rem;flex-shrink:0;max-width:150px;cursor:pointer}
@media(max-width:560px){.search-cat-select{max-width:88px}}
.search-sep{width:1px;align-self:stretch;background:var(--bdr);flex-shrink:0;margin:.5rem 0}
.search-box svg{width:19px;height:19px;stroke:var(--muted);stroke-width:2;fill:none;flex-shrink:0;margin-left:.8rem}
.search-box input{flex:1;border:none;outline:none;font:inherit;font-size:.95rem;padding:.75rem .7rem;color:var(--navy);background:transparent;min-width:0}
.search-box input::placeholder{color:var(--muted)}
.search-box button{background:var(--o);color:#fff;border:none;border-radius:10px;padding:.65rem 1.3rem;font-weight:700;font-size:.86rem;flex-shrink:0;transition:background .2s}
.search-box button:hover{background:var(--odk)}

/* Sugerencias de búsqueda (categorías + productos) al escribir */
.search-suggest{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;border:1px solid var(--bdr);border-radius:14px;box-shadow:0 14px 34px rgba(43,49,69,.14);padding:.9rem 1rem 1rem;z-index:60;max-height:70vh;overflow-y:auto}
.ss-label{font-size:.7rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem}
.ss-chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1rem}
.ss-chip{background:var(--bg2);border:1px solid var(--bdr);color:var(--navy);font-size:.78rem;font-weight:700;padding:.4rem .8rem;border-radius:999px;cursor:pointer;transition:.15s}
.ss-chip:hover{border-color:var(--o);color:var(--o)}
.ss-prod{display:flex;align-items:center;gap:.7rem;padding:.5rem .3rem;border-radius:10px;cursor:pointer}
.ss-prod:hover{background:var(--bg2)}
.ss-prod img{width:36px;height:36px;object-fit:contain;background:var(--bg2);border-radius:7px;flex-shrink:0}
.ss-prod-n{flex:1;min-width:0;font-size:.83rem;font-weight:600;color:var(--navy);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ss-prod-p{font-size:.83rem;font-weight:800;color:var(--navy);white-space:nowrap}
.ss-vertodos{display:block;text-align:center;margin-top:.7rem;padding:.6rem;border-radius:9px;background:var(--bg2);color:var(--navy);font-size:.82rem;font-weight:700;cursor:pointer}
.ss-vertodos:hover{color:var(--o)}
.ss-empty{font-size:.83rem;color:var(--muted);padding:.4rem .3rem}

/* Contador del carrito (las páginas sin carrito propio no lo traían) */
.cart-badge{position:absolute;top:-4px;right:-4px;background:var(--o);color:#fff;font-size:.72rem;font-weight:800;min-width:22px;height:22px;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 5px;border:2px solid #fff}
.cart-badge:empty,.cart-badge[data-count="0"]{display:none}
.hdr-cart{text-decoration:none}
/* En las páginas que no son la portada, los grupos del panel son enlaces */
a.catmenu-item,a.catmenu-subitem{text-decoration:none}
a.catmenu-trigger{text-decoration:none}