/* =========================================================
   STICKERBIKE — TIENDA / CATÁLOGO v1
   ========================================================= */
.store-body{background:#f4f6f8}
.store-main{max-width:1580px;margin:0 auto;padding:38px clamp(18px,4vw,68px) 70px}
.store-hero{
  min-height:170px;display:flex;align-items:flex-end;justify-content:space-between;
  gap:25px;margin-bottom:28px;padding:30px 34px;border-radius:18px;
  background:
    linear-gradient(110deg,rgba(6,22,39,.96),rgba(6,22,39,.76)),
    radial-gradient(circle at 80% 50%,rgba(255,255,255,.10),transparent 35%);
  color:#fff;overflow:hidden
}
.store-hero>div:first-child>span{color:var(--brand-primary);font-size:9px;font-weight:950;letter-spacing:.14em}
.store-hero h1{margin:5px 0 0;font-size:56px;line-height:.9;letter-spacing:-.055em;color:#fff}
.store-hero p{margin:12px 0 0;color:rgba(255,255,255,.68);font-size:12px}
.store-hero-count{text-align:right}
.store-hero-count strong{display:block;font-size:38px;line-height:1;color:#fff}
.store-hero-count span{font-size:9px;color:rgba(255,255,255,.56)}

.store-layout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:26px;align-items:start}
.store-sidebar{position:sticky;top:20px;display:grid;gap:14px}
.store-search,.store-categories,.store-surprise{
  border:1px solid #dde4ea;border-radius:14px;background:#fff
}
.store-search{padding:15px}
.store-search label,.store-side-title{
  display:block;margin-bottom:9px;color:#7a8796;font-size:8px;font-weight:950;letter-spacing:.12em
}
.store-search>div{display:grid;grid-template-columns:minmax(0,1fr) 39px;gap:6px}
.store-search input{min-width:0;height:41px;padding:0 11px;border:1px solid #dce3e9;border-radius:9px;font-size:11px;outline:none}
.store-search input:focus{border-color:var(--brand-primary)}
.store-search button{border:0;border-radius:9px;background:var(--brand-primary);color:#fff;font-size:18px;cursor:pointer}

.store-categories{padding:15px}
.store-category-main{
  min-height:39px;display:flex;align-items:center;justify-content:space-between;
  gap:8px;padding:0 9px;border-radius:8px;color:var(--brand-secondary);
  font-size:9px;font-weight:950;text-decoration:none
}
.store-category-main small{color:#8a96a4;font-size:8px}
.store-category-main.active{background:var(--brand-secondary);color:#fff}
.store-category-main.active small{color:rgba(255,255,255,.65)}
.store-category-group{margin-top:5px}
.store-subcategories{display:grid;padding:4px 7px 8px 17px}
.store-subcategories a{
  min-height:31px;display:flex;align-items:center;justify-content:space-between;
  border-left:1px solid #e1e6eb;padding:0 8px;color:#66758a;font-size:9px
}
.store-subcategories a small{font-size:8px;color:#9aa4b0}
.store-subcategories a.active{border-left-color:var(--brand-primary);color:var(--brand-primary);font-weight:900}

.store-surprise{
  display:block;padding:20px;text-decoration:none;
  background:
    linear-gradient(140deg,color-mix(in srgb,var(--brand-primary) 88%,#000),var(--brand-primary));
  border-color:transparent;color:#fff
}
.store-surprise>span{font-size:7.5px;font-weight:900;letter-spacing:.11em;color:rgba(255,255,255,.68)}
.store-surprise strong{display:block;margin-top:4px;font-size:22px;color:#fff;letter-spacing:-.03em}
.store-surprise p{margin:8px 0 16px;color:rgba(255,255,255,.78);font-size:9px;line-height:1.45}
.store-surprise b{font-size:9px;color:#fff}

.store-catalog{min-width:0}
.store-toolbar{
  min-height:57px;display:flex;align-items:center;justify-content:space-between;
  gap:15px;margin-bottom:15px;padding:10px 14px;border:1px solid #dde4ea;border-radius:12px;background:#fff
}
.store-toolbar>div span{display:block;color:#8b96a3;font-size:8px}
.store-toolbar>div strong{display:block;margin-top:2px;color:var(--brand-secondary);font-size:11px}
.store-sort label{display:flex;align-items:center;gap:8px;color:#8793a2;font-size:8px;font-weight:900}
.store-sort select{height:36px;padding:0 28px 0 10px;border:1px solid #dce3e9;border-radius:8px;background:#fff;color:var(--brand-secondary);font-size:9px;font-weight:850}

.store-products-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.store-product-card{
  overflow:hidden;border:1px solid rgba(11,31,58,.12);border-radius:14px;background:#151b21;
  box-shadow:0 5px 16px rgba(11,31,58,.06);transition:transform .2s ease,box-shadow .2s ease
}
.store-product-link{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;color:#fff}
.store-product-image{position:absolute;inset:0;display:grid;place-items:center;background:#e9ecef}
.store-product-image img{width:100%;height:100%;object-fit:contain;transition:transform .3s ease}
.store-product-overlay{
  position:absolute;left:0;right:0;bottom:0;z-index:2;min-height:118px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding:42px 13px 13px;
  background:linear-gradient(to top,rgba(7,13,20,.96),rgba(7,13,20,.76) 55%,transparent)
}
.store-product-copy{min-width:0}
.store-product-copy small{display:block;color:var(--brand-primary);font-size:7.5px;font-weight:950;letter-spacing:.1em;text-transform:uppercase}
.store-product-copy h2{margin:5px 0 0;color:#fff;font-size:12px;line-height:1.15}
.store-product-copy strong{display:block;margin-top:7px;color:#fff;font-size:15px}
.store-product-cta{
  flex:0 0 auto;min-height:34px;display:inline-flex;align-items:center;gap:6px;
  padding:0 10px;border-radius:8px;background:var(--brand-primary);color:#fff;
  font-size:7.5px;font-weight:950;white-space:nowrap
}
.store-product-cta b{font-size:12px}

@media (hover:hover) and (pointer:fine){
  .store-product-card:hover{transform:translateY(-4px);box-shadow:0 15px 30px rgba(11,31,58,.14)}
  .store-product-card:hover img{transform:scale(1.025)}
  .store-category-main:hover{background:#f2f5f7}
  .store-category-main.active:hover{background:var(--brand-secondary)}
  .store-surprise:hover{filter:brightness(1.04)}
}

.store-pagination{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:15px;margin-top:28px
}
.store-pagination>a:last-child{text-align:right}
.store-pagination a{color:#64748a;font-size:9px;font-weight:900}
.store-pagination>div{display:flex;gap:5px}
.store-pagination>div a{
  width:34px;height:34px;display:grid;place-items:center;border:1px solid #dce3e9;border-radius:8px;background:#fff
}
.store-pagination>div a.active{background:var(--brand-primary);border-color:var(--brand-primary);color:#fff}

.store-empty{padding:70px 25px;border:1px solid #dde4ea;border-radius:14px;background:#fff;text-align:center}
.store-empty>span{color:var(--brand-primary);font-size:8px;font-weight:950;letter-spacing:.12em}
.store-empty h2{margin:6px 0 17px;color:var(--brand-secondary)}
.store-empty a{display:inline-flex;padding:12px 16px;border-radius:9px;background:var(--brand-primary);color:#fff;font-size:9px;font-weight:950}

@media(max-width:1180px){
  .store-layout{grid-template-columns:230px minmax(0,1fr)}
  .store-products-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:800px){
  .store-main{padding:20px 14px 50px}
  .store-hero{min-height:140px;padding:24px}
  .store-hero h1{font-size:44px}
  .store-layout{grid-template-columns:1fr}
  .store-sidebar{position:static}
  .store-categories{max-height:390px;overflow:auto}
  .store-surprise{display:none}
}
@media(max-width:540px){
  .store-hero{align-items:flex-start;flex-direction:column}
  .store-hero-count{text-align:left}
  .store-products-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .store-product-overlay{min-height:104px;align-items:flex-start;flex-direction:column;gap:7px;padding:32px 9px 9px}
  .store-product-copy h2{font-size:10.5px}
  .store-product-copy strong{font-size:13px}
  .store-product-cta{min-height:29px;padding:0 8px;font-size:6.8px}
  .store-toolbar{align-items:flex-start;flex-direction:column}
  .store-sort{width:100%}
  .store-sort label{justify-content:space-between}
  .store-pagination{grid-template-columns:1fr}
  .store-pagination>a:last-child{text-align:left}
}


/* =========================================================
   TIENDA v2 — BANNER FULL WIDTH
   ========================================================= */
.store-main-with-full-hero{
  max-width:none !important;
  margin:0 !important;
  padding:0 0 70px !important;
}

.store-hero-full{
  position:relative;
  width:100%;
  min-height:230px !important;
  margin:0 0 28px !important;
  padding:0 !important;
  border-radius:0 !important;
  overflow:hidden;
  display:flex;
  align-items:center;
  background:
    linear-gradient(
      90deg,
      rgba(6,22,39,.88) 0%,
      rgba(6,22,39,.72) 42%,
      rgba(6,22,39,.38) 72%,
      rgba(6,22,39,.22) 100%
    ),
    url('../img/header-tienda.jpg') center center / cover no-repeat !important;
}

.store-hero-inner{
  width:min(100%,1580px);
  margin:0 auto;
  padding:0 clamp(22px,4vw,68px);
}

.store-hero-full .store-hero-inner>span{
  display:block;
  margin-bottom:8px;
  color:var(--brand-primary,#ff6413);
  font-size:11px !important;
  font-weight:950;
  letter-spacing:.14em;
}

.store-hero-full h1{
  margin:0 !important;
  max-width:760px;
  color:#fff !important;
  font-size:46px !important;
  line-height:.95 !important;
  letter-spacing:-.045em !important;
  font-weight:950 !important;
}

.store-hero-full p{
  max-width:620px;
  margin:12px 0 0 !important;
  color:rgba(255,255,255,.82) !important;
  font-size:12px !important;
  line-height:1.5;
}

/* El catálogo mantiene el ancho anterior */
.store-main-with-full-hero .store-layout{
  width:min(calc(100% - 36px),1444px);
  margin:0 auto;
}

/* Se elimina visualmente el antiguo contador de productos del hero */
.store-hero-count{
  display:none !important;
}

@media(max-width:800px){
  .store-hero-full{
    min-height:190px !important;
    background:
      linear-gradient(
        90deg,
        rgba(6,22,39,.88),
        rgba(6,22,39,.52)
      ),
      url('../img/header-tienda.jpg') 58% center / cover no-repeat !important;
  }

  .store-hero-inner{
    padding:0 20px;
  }

  .store-hero-full .store-hero-inner>span{
    font-size:10px !important;
  }

  .store-hero-full h1{
    font-size:36px !important;
  }

  .store-main-with-full-hero .store-layout{
    width:calc(100% - 28px);
  }
}


/* =========================================================
   TIENDA v3 — BANNER 160px + PARALLAX
   ========================================================= */
.store-hero-full{
  min-height:160px !important;
  height:160px !important;
  background-attachment:fixed !important;
  background-position:center 42% !important;
}

.store-hero-inner{
  display:flex;
  flex-direction:column;
  justify-content:center;
  height:100%;
}

.store-hero-full .store-hero-inner>span{
  margin-bottom:5px !important;
}

.store-hero-full h1{
  font-size:38px !important;
}

.store-hero-full p{
  margin-top:8px !important;
}

/* En móviles/iPhone evitamos background-attachment:fixed */
@media(max-width:800px){
  .store-hero-full{
    min-height:150px !important;
    height:150px !important;
    background-attachment:scroll !important;
    background-position:58% center !important;
  }

  .store-hero-full h1{
    font-size:32px !important;
  }
}


/* =========================================================
   TIENDA v4 — FONDO 100% ANCHO + PARALLAX SUTIL
   ========================================================= */
.store-hero-full{
  min-height:160px !important;
  height:160px !important;

  /*
   * La imagen ocupa 100% del ancho sin ampliarse como cover.
   * Mantiene su proporción natural.
   */
  background-size:100% auto !important;
  background-repeat:no-repeat !important;
  background-position:center calc(50% + var(--store-parallax-y,0px)) !important;
  background-attachment:scroll !important;
}

/* Conservamos el overlay actual, pero sin zoom de imagen */
.store-hero-full{
  background-image:
    linear-gradient(
      90deg,
      rgba(6,22,39,.88) 0%,
      rgba(6,22,39,.72) 42%,
      rgba(6,22,39,.38) 72%,
      rgba(6,22,39,.22) 100%
    ),
    url('../img/header-tienda.jpg') !important;
}

@media(max-width:800px){
  .store-hero-full{
    height:150px !important;
    min-height:150px !important;
    background-size:auto 100% !important;
    background-position:58% center !important;
    --store-parallax-y:0px !important;
  }
}


/* =========================================================
   TIENDA v5 — PARALLAX REAL SIN HUECOS
   ========================================================= */

.store-hero-full{
  position:relative !important;
  height:160px !important;
  min-height:160px !important;
  overflow:hidden !important;
  background:none !important;
}

/*
 * Capa de imagen más alta que el banner:
 * 160px visibles + 50px de margen total para parallax.
 */
.store-hero-bg{
  position:absolute;
  left:0;
  top:-25px;
  width:100%;
  height:210px;
  z-index:0;

  background-image:
    linear-gradient(
      90deg,
      rgba(6,22,39,.88) 0%,
      rgba(6,22,39,.72) 42%,
      rgba(6,22,39,.38) 72%,
      rgba(6,22,39,.22) 100%
    ),
    url('../img/header-tienda.jpg');

  background-repeat:no-repeat;
  background-position:center center;

  /*
   * En desktop grande usa exactamente el ancho completo.
   * No fuerza cover.
   */
  background-size:100% auto;

  transform:translate3d(0,var(--store-parallax-y,0px),0);
  will-change:transform;
  pointer-events:none;
}

/* Texto siempre por encima del fondo */
.store-hero-inner{
  position:relative !important;
  z-index:1 !important;
  height:100% !important;
}

/*
 * En anchos intermedios la imagen a 100% podría quedar con
 * menos de 210px de altura. En ese rango usamos altura fija
 * para garantizar cobertura sin huecos.
 */
@media(max-width:1100px) and (min-width:801px){
  .store-hero-bg{
    background-size:auto 210px;
  }
}

/* Móvil: sin parallax, siempre cubierto */
@media(max-width:800px){
  .store-hero-full{
    height:150px !important;
    min-height:150px !important;
  }

  .store-hero-bg{
    top:0;
    height:150px;
    background-size:cover;
    background-position:58% center;
    transform:none !important;
    --store-parallax-y:0px !important;
  }
}


/* =========================================================
   TIENDA v6 — PARALLAX 80px TOTAL
   ========================================================= */
.store-hero-bg{
  top:-45px !important;
  height:250px !important;
}

@media(max-width:1100px) and (min-width:801px){
  .store-hero-bg{
    background-size:auto 250px !important;
  }
}


/* =========================================================
   TIENDA v7 — SIDEBAR MÁS LEGIBLE + ACORDEÓN
   ========================================================= */

/* Sidebar general más grande y usable */
.store-sidebar{
  font-size:13px;
}

.store-search{
  padding:18px !important;
}

.store-search label,
.store-side-title{
  margin-bottom:11px !important;
  font-size:10px !important;
  letter-spacing:.11em !important;
}

.store-search input{
  height:45px !important;
  padding:0 13px !important;
  font-size:12.5px !important;
}

.store-search button{
  height:45px !important;
  font-size:20px !important;
}

.store-categories{
  padding:17px !important;
}

/* Todos los productos */
.store-category-main{
  min-height:44px !important;
  padding:0 11px !important;
  font-size:11px !important;
  border-radius:9px !important;
}

.store-category-main small{
  font-size:9px !important;
}

/* Cada categoría principal */
.store-category-group{
  margin-top:9px !important;
  border-top:1px solid #edf1f4;
  padding-top:7px;
}

.store-category-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 38px;
  gap:6px;
  align-items:center;
}

.store-category-row .store-category-main{
  min-height:40px !important;
  font-size:10.5px !important;
  font-weight:950 !important;
  letter-spacing:.02em;
}

/* Botón burger/acordeón */
.store-category-toggle{
  width:38px;
  height:38px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  border:1px solid #dbe2e8;
  border-radius:9px;
  background:#fff;
  cursor:pointer;
  transition:
    background .16s ease,
    border-color .16s ease,
    transform .16s ease;
}

.store-category-toggle span{
  width:14px;
  height:2px;
  display:block;
  border-radius:999px;
  background:var(--brand-secondary,#0b1f3a);
  transition:
    transform .18s ease,
    opacity .18s ease,
    background .18s ease;
}

/* Estado abierto: burger se transforma sutilmente */
.store-category-group.open .store-category-toggle{
  border-color:var(--brand-primary,#ff6413);
  background:color-mix(in srgb,var(--brand-primary,#ff6413) 8%,white);
}

.store-category-group.open .store-category-toggle span{
  background:var(--brand-primary,#ff6413);
}

.store-category-group.open .store-category-toggle span:nth-child(1){
  transform:translateY(5px) rotate(45deg);
}
.store-category-group.open .store-category-toggle span:nth-child(2){
  opacity:0;
}
.store-category-group.open .store-category-toggle span:nth-child(3){
  transform:translateY(-5px) rotate(-45deg);
}

/* Subcategorías colapsables */
.store-subcategories{
  display:none !important;
  padding:6px 4px 5px 12px !important;
}

.store-category-group.open .store-subcategories{
  display:grid !important;
}

.store-subcategories a{
  min-height:38px !important;
  padding:0 10px !important;
  border-left:2px solid #e3e8ed !important;
  color:#536378 !important;
  font-size:10.5px !important;
  font-weight:700;
  line-height:1.25;
}

.store-subcategories a span{
  min-width:0;
}

.store-subcategories a small{
  font-size:9px !important;
}

.store-subcategories a.active{
  border-left-color:var(--brand-primary,#ff6413) !important;
  color:var(--brand-primary,#ff6413) !important;
  font-weight:950 !important;
  background:color-mix(in srgb,var(--brand-primary,#ff6413) 4%,white);
}

/* Un poco más de presencia al hover */
@media (hover:hover) and (pointer:fine){
  .store-category-toggle:hover{
    border-color:var(--brand-primary,#ff6413);
    transform:translateY(-1px);
  }

  .store-subcategories a:hover{
    border-left-color:var(--brand-primary,#ff6413) !important;
    color:var(--brand-secondary,#0b1f3a) !important;
    background:#f8fafb;
  }
}

@media(max-width:800px){
  .store-categories{
    max-height:none !important;
    overflow:visible !important;
  }

  .store-category-main{
    font-size:11.5px !important;
  }

  .store-subcategories a{
    min-height:42px !important;
    font-size:11px !important;
  }
}


/* =========================================================
   TIENDA v8 — CATEGORÍAS SIMPLES / CLICK = FILTRO + DESPLIEGUE
   ========================================================= */

/* Se elimina por completo el botón burger */
.store-category-row,
.store-category-toggle{
  display:none !important;
}

.store-category-group{
  margin-top:8px !important;
  padding-top:7px !important;
  border-top:1px solid #edf1f4;
}

/* Toda la fila de categoría es clickeable */
.store-category-parent{
  width:100%;
  min-height:44px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px;
  padding:0 11px !important;
  border-radius:9px !important;
  color:var(--brand-secondary,#0b1f3a) !important;
  background:transparent;
  font-size:11.5px !important;
  font-weight:950 !important;
  letter-spacing:.015em;
}

.store-category-right{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:8px;
}

.store-category-right small{
  color:#8b97a4 !important;
  font-size:9.5px !important;
}

.store-category-right b{
  display:inline-block;
  color:#8b97a4;
  font-size:15px;
  line-height:1;
  transition:transform .16s ease;
}

/* Categoría activa: se destaca y abre */
.store-category-parent.active-parent{
  background:#f2f5f8 !important;
  color:var(--brand-primary,#ff6413) !important;
}

.store-category-group.open .store-category-right b{
  transform:rotate(180deg);
  color:var(--brand-primary,#ff6413);
}

/* Cerradas por defecto */
.store-subcategories{
  display:none !important;
  padding:4px 5px 7px 15px !important;
}

/* Solo la categoría que se está navegando queda abierta */
.store-category-group.open .store-subcategories{
  display:grid !important;
}

.store-subcategories a{
  min-height:39px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  padding:0 11px !important;
  border-left:2px solid #e4e9ed !important;
  color:#536378 !important;
  font-size:10.8px !important;
  font-weight:700 !important;
}

.store-subcategories a small{
  font-size:9.5px !important;
  color:#8b97a4 !important;
}

.store-subcategories a.active{
  border-left-color:var(--brand-primary,#ff6413) !important;
  color:var(--brand-primary,#ff6413) !important;
  background:color-mix(in srgb,var(--brand-primary,#ff6413) 4%,white);
  font-weight:950 !important;
}

@media (hover:hover) and (pointer:fine){
  .store-category-parent:hover{
    background:#f5f7f9 !important;
    color:var(--brand-primary,#ff6413) !important;
  }

  .store-subcategories a:hover{
    border-left-color:var(--brand-primary,#ff6413) !important;
    background:#f8fafb;
    color:var(--brand-secondary,#0b1f3a) !important;
  }
}


/* =========================================================
   TIENDA v9 — OVERLAY DE PRODUCTOS MÁS BAJO
   ========================================================= */

/*
 * El degradado se separa del contenido para que podamos
 * cambiar su opacidad sin afectar título, precio ni botón.
 */
.store-product-overlay{
  min-height:88px !important;
  padding:30px 13px 11px !important;
  background:none !important;
  isolation:isolate;
}

.store-product-overlay::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(
      to top,
      rgba(7,13,20,.92) 0%,
      rgba(7,13,20,.70) 48%,
      rgba(7,13,20,.18) 78%,
      rgba(7,13,20,0) 100%
    );
  opacity:1;
  transition:opacity .22s ease;
}

/*
 * OVER:
 * sólo el degradado baja al 10%.
 * Textos y botón se mantienen al 100%.
 */
@media (hover:hover) and (pointer:fine){
  .store-product-card:hover .store-product-overlay::before{
    opacity:.10;
  }
}

/*
 * En móvil no existe hover real: mantenemos un degradado
 * un poco más fuerte para asegurar lectura.
 */
@media(max-width:540px){
  .store-product-overlay{
    min-height:82px !important;
    padding:26px 9px 9px !important;
  }

  .store-product-overlay::before{
    opacity:1 !important;
  }
}