/* =========================================================
   /tienda — grid completo + sidebar de filtros
   Depende de las variables :root definidas en cada página
   y de las clases ya existentes en ecommerce.css
   ========================================================= */

.store-hero{ padding:40px 0 6px; }
.store-hero h1{ font-family:var(--display); font-size:clamp(28px,4vw,38px); color:var(--ink); }
.store-hero p{ font-size:13.5px; color:rgba(18,18,18,0.55); margin-top:8px; }

.store-main{ background:var(--foam); padding-bottom:100px; }

.store-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin:22px 0 26px; flex-wrap:wrap;
}
.store-toolbar .count{ font-size:13.5px; color:rgba(18,18,18,0.55); }
.store-toolbar .count strong{ color:var(--ink); }
.toolbar-right{ display:flex; align-items:center; gap:10px; }
.sort-select{
  border:1px solid var(--line); border-radius:10px; padding:10px 14px; font-size:13px;
  background:#fff; color:var(--ink); font-family:var(--body); cursor:pointer;
}
.mobile-filter-btn{
  display:none; align-items:center; gap:8px; border:1.5px solid var(--line); border-radius:10px;
  padding:10px 16px; font-size:13.5px; font-weight:600; background:#fff; color:var(--ink);
}
.mobile-filter-btn svg{ width:15px; height:15px; }
.mobile-filter-btn .badge{
  background:var(--science); color:#fff; font-family:var(--mono); font-size:10px;
  width:17px; height:17px; border-radius:50%; display:flex; align-items:center; justify-content:center;
}

/* ---------- layout ---------- */
.store-layout{ display:grid; grid-template-columns:270px 1fr; gap:40px; align-items:start; }

/* ---------- sidebar ---------- */
.store-sidebar{
  /* top = alto real de tu header fijo (utility-bar 36px + nav 84px) + un pequeño respiro,
     si cambias el alto del header ajusta este valor */
  position:sticky; top:136px; background:#fff; border-radius:18px; box-shadow:var(--shadow);
  padding:22px 22px 26px; max-height:calc(100vh - 160px); overflow-y:auto;
}
.store-sidebar::-webkit-scrollbar{ width:5px; }
.store-sidebar::-webkit-scrollbar-thumb{ background:var(--line); border-radius:10px; }
.store-sidebar-head{ display:none; align-items:center; justify-content:space-between; margin-bottom:18px; }
.store-sidebar-head h3{ font-family:var(--display); font-size:17px; }
.store-sidebar-close{
  width:36px; height:36px; border-radius:50%; background:var(--foam); display:flex; align-items:center;
  justify-content:center; transition:background .2s, transform .35s var(--ease);
}
.store-sidebar-close:hover{ background:var(--ink); color:#fff; transform:rotate(90deg); }
.store-sidebar-close svg{ width:15px; height:15px; }

.filter-block{ padding:18px 0; border-bottom:1px solid var(--line); }
.filter-block:first-child{ padding-top:0; }
.filter-block:last-of-type{ border-bottom:none; }
.filter-block-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; cursor:pointer; user-select:none; }
.filter-block-head h4{ font-family:var(--display); font-size:13.5px; color:var(--ink); }
.filter-block-head .chev{
  width:8px; height:8px; border-right:1.6px solid rgba(18,18,18,.4); border-bottom:1.6px solid rgba(18,18,18,.4);
  transform:rotate(45deg); transition:transform .3s var(--ease);
}
.filter-block.collapsed .chev{ transform:rotate(-135deg); }
.filter-block-body{ display:flex; flex-direction:column; gap:11px; overflow:hidden; max-height:600px; transition:max-height .35s var(--ease); }
.filter-block.collapsed .filter-block-body{ max-height:0; }

.filter-check{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--ink); cursor:pointer; }
.filter-check input{ accent-color:var(--science); width:16px; height:16px; flex:0 0 auto; }
.filter-check .cnt{ margin-left:auto; font-family:var(--mono); font-size:11px; color:rgba(18,18,18,.4); }

.price-inputs{ display:flex; align-items:center; gap:8px; }
.price-inputs input{
  width:100%; border:1px solid var(--line); border-radius:8px; padding:9px 10px; font-size:12.5px;
  font-family:var(--mono); color:var(--ink);
}
.price-inputs input:focus{ outline:none; border-color:var(--science); }
.price-inputs span{ color:rgba(18,18,18,.35); font-size:12px; }

.filter-clear-all{
  width:100%; text-align:center; padding:12px; border-radius:10px; border:1.5px solid var(--line);
  font-size:13px; font-weight:600; color:var(--ink); transition:all .2s; margin-top:16px;
}
.filter-clear-all:hover{ border-color:var(--science); color:var(--science); background:rgba(236,85,152,0.05); }

/* ---------- active filter chips ---------- */
.active-filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.active-filter-chip{
  display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); border-radius:20px;
  padding:7px 8px 7px 14px; font-size:12.5px; color:var(--ink); box-shadow:0 4px 12px -8px rgba(18,18,18,.15);
}
.active-filter-chip button{
  width:18px; height:18px; border-radius:50%; background:var(--foam); display:flex; align-items:center; justify-content:center;
  transition:background .2s;
}
.active-filter-chip button:hover{ background:#C6494A; color:#fff; }
.active-filter-chip button svg{ width:9px; height:9px; }

/* ---------- empty state ---------- */
.store-empty{ text-align:center; padding:90px 20px; background:#fff; border-radius:18px; box-shadow:var(--shadow); }
.store-empty svg{ width:60px; height:60px; color:var(--mist); margin-bottom:18px; }
.store-empty h3{ font-family:var(--display); font-size:19px; margin-bottom:8px; }
.store-empty p{ font-size:13.5px; color:rgba(18,18,18,.55); margin-bottom:22px; }

/* ---------- product grid ----------
   Ojo: .product-card / .product-media / .product-body / .stars etc. NO viven en
   ecommerce.css sino en el <style> inline de index.html. tienda/index.html
   incluye su propia copia de ese bloque para no depender de otro archivo. */
#storeGrid.product-grid{ grid-template-columns:repeat(3,1fr); gap:22px; }
@media(max-width:1200px){ #storeGrid.product-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ #storeGrid.product-grid{ grid-template-columns:1fr 1fr; gap:12px; } }

/* ---------- mobile: sidebar se convierte en drawer ---------- */
.store-filter-overlay{
  position:fixed; inset:0; z-index:990; background:rgba(18,18,18,0.0); opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .45s var(--ease), background .45s var(--ease), visibility 0s linear .45s;
}
.store-filter-overlay.open{
  opacity:1; visibility:visible; pointer-events:auto; background:rgba(18,18,18,0.45); backdrop-filter:blur(2px);
  transition:opacity .45s var(--ease), background .45s var(--ease), visibility 0s linear 0s;
}
@media(max-width:980px){
  .store-layout{ grid-template-columns:1fr; }
  .mobile-filter-btn{ display:inline-flex; }
  .store-sidebar{
    position:fixed; top:0; left:0; height:100dvh; width:320px; max-width:86vw; z-index:995;
    transform:translateX(-100%); transition:transform .5s var(--ease); border-radius:0; box-shadow:none;
    max-height:100dvh;
  }
  .store-sidebar.open{ transform:translateX(0); box-shadow:24px 0 60px -24px rgba(18,18,18,.4); }
  .store-sidebar-head{ display:flex; }
}

/* ---------- shimmer mientras carga el catálogo ---------- */
@keyframes ss-skel-shimmer{ 0%{ background-position:-400px 0; } 100%{ background-position:400px 0; } }
.ss-skel-shimmer{
  background:linear-gradient(90deg, var(--foam) 25%, #fff 37%, var(--foam) 63%);
  background-size:800px 100%;
  animation:ss-skel-shimmer 1.6s linear infinite;
}
.ss-skel-card{ pointer-events:none; }
.ss-skel-line{ border-radius:6px; }