/* ===========================
   ALLSTORE MODERN THEME (CLEAN)
   Header + Hero Nike-style + Catalog + Cart + Slider
   =========================== */

:root{
  --hero-start:#111a2b;
  --hero-end:#1a2f5b;
  --accent:#ff4f5e;         /* coral/red CTA */
  --primary:#00a5df;        /* azul UI */
  --text:#111;
  --muted:#6b7280;
  --round:18px;
  --shadow:0 10px 30px rgba(0,0,0,.12);

  /* Gutter ¨˛nico (header + hero) */
  --page-gutter: clamp(16px, 3vw, 48px);
}

body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
 background-color: #15233f;
}

/* Elimina el fondo claro heredado de bootstrap */
body.bg-light { background-color: transparent !important; }

/* ---------- Header ---------- */
.site-header{
  position: sticky; top: 0; z-index: 1030;
}
.site-header.dark{
  background: linear-gradient(120deg,var(--hero-start),var(--hero-end));
  box-shadow: 0 6px 24px rgba(0,0,0,.12);
}
.site-header .container{
  max-width:none; width:100%;
  padding-inline: var(--page-gutter);
}
.site-header .menu-link{
  color:#374151; text-decoration:none; font-weight:600;
}
.site-header .menu-link:hover{ color:var(--primary) }
.site-header.dark .menu-link{ color: rgba(255,255,255,.85); }
.site-header.dark .menu-link.active{ color:#fff; }

.main-menu{
  display:flex; align-items:center; white-space:nowrap;
  gap: clamp(8px, 1.2vw, 16px); padding:0;
}
.main-menu .menu-link{
  position:relative; display:inline-block;
  padding-inline: clamp(10px, .9vw, 14px);
  text-transform:uppercase; letter-spacing:.02em; font-weight:700;
}
.main-menu .menu-link::after{
  content:""; position:absolute; left:8px; right:8px; bottom:6px;
  height:3px; background:#ff6a3d; border-radius:3px;
  transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.main-menu .menu-link:hover::after,
.main-menu .menu-link.active::after{ transform:scaleX(1); }

/* Buscador header */
.header-tools .search-form{
  min-width: min(420px, 36vw);
  padding:0 15px 0 0;
}
.search-form .search-bar{ position:relative; }
.search-form .search-bar i{
  position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#9ca3af;
}
.search-form .form-control{
  width:100%; padding-left:36px; border-radius:12px; height:40px;
}
.site-header.dark .search-form .form-control{
  background: rgba(255,255,255,.08); color:#fff; border-color: rgba(255,255,255,.15);
}
.site-header.dark .search-form .form-control::placeholder{ color:rgba(255,255,255,.7) }
.site-header.dark .search-bar i{ color: rgba(255,255,255,.6); }

/* Logo + carrito */
.logo-img{ height:72px; width:auto; display:block; margin-right: clamp(8px, 1.2vw, 20px); }
.cart-bubble{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:999px; text-decoration:none;
}
.site-header.dark .cart-bubble{ background: rgba(255,255,255,.10); color:#fff; }
.site-header.dark .cart-bubble:hover{ background: rgba(255,255,255,.18); }
.cart-count{
  position:absolute; top:-6px; right:-6px;
  background: var(--primary); color:#fff; min-width:18px; height:18px; padding:0 5px;
  font-size:11px; line-height:18px; border-radius:999px; display:flex; align-items:center; justify-content:center;
}

/* CTA */
.btn-cta{
  background:var(--accent); color:#fff; border:none; border-radius:12px;
  padding:.75rem 1.25rem; font-weight:700; box-shadow:var(--shadow)
}
.btn-cta:hover{ filter:brightness(.95); color:#fff }

/* ---------- HERO ---------- */
.hero-nike{
  background:linear-gradient(120deg,var(--hero-start),var(--hero-end));
  color:#fff; position:relative; padding:60px 0;
}
.hero-nike .hero-inner.container{
  max-width:none; width:100%;
  padding-inline: var(--page-gutter); /* mismo gutter que header */
}
.hero-nike .text-light-70{ color:rgba(255,255,255,.8) }
.hero-nike .product-perspective{ position:relative; display:inline-block }
.hero-nike .product-perspective img{
  filter:drop-shadow(0 20px 60px rgba(0,0,0,.4));
  max-height:360px;
}
.hero-nike .orbit{
  position:absolute; border:2px dashed rgba(255,255,255,.3);
  border-radius:50%; animation:spin 18s linear infinite;
}
.hero-nike .orbit-1{ width:360px; height:200px; left:-20px; top:20px; transform:rotate(-10deg); }
.hero-nike .orbit-2{ width:420px; height:240px; left:-40px; top:-10px; transform:rotate(15deg); }
@keyframes spin{ from{transform:rotate(0)} to{transform:rotate(360deg)} }

/* M¨˘s espacio para el slider, sin solapar */
@media (min-width: 768px){
  .hero-nike{ padding-bottom: 140px; }
}
.hero-visual .product-perspective{ position: relative; z-index: 0; }
.hero-visual .nike-strip{ position: relative; z-index: 1; margin-top: 18px; }

/* ===========================
   SLIDER ESTILO NIKE (Embla)
   =========================== */
.nike-strip.embla{ position: relative; overflow: visible; }
.embla__viewport{ overflow: hidden; }
.embla__container{ display: flex; gap: 1.1rem; }

/* Peeking de tarjetas */
.embla__slide{ flex: 0 0 78%; }
@media (min-width: 576px){ .embla__slide{ flex: 0 0 56%; } }
@media (min-width: 768px){ .embla__slide{ flex: 0 0 42%; } }
@media (min-width: 992px){ .embla__slide{ flex: 0 0 30%; } }
@media (min-width: 1200px){ .embla__slide{ flex: 0 0 24%; } }

/* Tarjeta blanca tipo pastilla (m¨˘s alta + hueco para imagen) */
.ns-card{
  position: relative; display: flex; align-items: center;
  background:#fff; border-radius:20px;
  min-height:132px;
  padding:18px 50px 18px 164px; /* hueco izq para imagen */
  box-shadow:0 12px 30px rgba(0,0,0,.14);
  overflow:visible;
}

/* Imagen flotante separada del texto */
.ns-thumb{
  position:absolute; left:-12px; top:50%; transform:translateY(-50%);
  width:150px; height:120px; display:grid; place-items:center; pointer-events:none;
}
.ns-thumb img{
  max-width:100%; max-height:100%; object-fit:contain;
  filter:drop-shadow(0 14px 20px rgba(0,0,0,.28));
  transform:rotate(-10deg) translateX(10px);
}

/* Contenido del pill */
.ns-body{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.ns-name{
  margin:0; font-weight:800; font-size:.95rem; color:#0f172a;
  line-height:1.2; display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:2; overflow:hidden; text-overflow:ellipsis;
  white-space:normal; word-break:break-word; hyphens:auto;
  max-height:calc(1.4em * 2);
}
.ns-meta{ display:flex; align-items:center; gap:.55rem; font-size:.72rem; color:#64748b; }
.ns-stars i{ color:#f59e0b; margin-right:1px; }
.ns-row{ display:flex; align-items:center; justify-content:space-between; }
.ns-price{ font-weight:800; font-size:1.05rem; color:#0f172a; }
.ns-plus{ border-radius:999px; width:38px; height:38px; padding:0; }

/* Flechas redondas */
.ns-arrow{
  position:absolute; top:calc(50% + 2px); transform:translateY(-50%);
  width:44px; height:44px; border-radius:999px; border:0;
  background:#ffffffeb; color:#111; display:grid; place-items:center;
  box-shadow:0 10px 24px rgba(0,0,0,.18); z-index:5; pointer-events:auto;
}
.ns-prev{ left:-50px; } .ns-next{ right:-10px; }
.ns-arrow:active{ transform:translateY(-50%) scale(.96); }

/* Degrad¨¦s laterales (peeking) */
.ns-edge{ position:absolute; inset:0 auto; width:60px; z-index:4; pointer-events:none; }
.ns-edge--left{ left:0;  background:linear-gradient(90deg,#0b1020,rgba(11,16,32,.55),transparent); }
.ns-edge--right{ right:0; background:linear-gradient(270deg,#0b1020,rgba(11,16,32,.55),transparent); }

/* Responsive m¨®vil: pill m¨˘s compacto */
@media (max-width: 575.98px){
  .ns-card{ min-height:118px; padding-left:148px; }
  .ns-thumb{ width:136px; height:108px; left:-10px; }
  .ns-thumb img{ transform:rotate(-8deg) translateX(8px); }
}

/* ---------- Cat¨˘logo (grid cards) ---------- */
.product-card{
  border-radius:16px; overflow:hidden; background:#fff;
  box-shadow:0 1px 8px rgba(0,0,0,.06);
  transition:transform .2s, box-shadow .2s;
  position:relative; cursor:pointer;
}
.product-card:hover{ transform:translateY(-4px); box-shadow:0 10px 30px rgba(0,0,0,.12) }
.product-image{
  background:#fff; padding:14px; position:relative;
  display:flex; align-items:center; justify-content:center; height:210px;
}
.product-image img{ max-height:180px; object-fit:contain }
.product-actions{ position:absolute; top:10px; right:10px; z-index:2 }
.product-actions .details-btn{
  display:inline-flex; width:36px; height:36px; border-radius:50%;
  align-items:center; justify-content:center; background:#fff; color:#111;
  box-shadow:0 2px 8px rgba(0,0,0,.12)
}
.product-title{
  font-weight:600;
  line-height:1.2; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden; text-overflow:ellipsis; white-space:normal; word-break:break-word; hyphens:auto;
  min-height:40px; max-height:calc(1.4em * 2);
}
.product-price{ font-weight:800; color:#111 }
.btn-add-to-cart{ border-radius:10px; position:relative; z-index:3; }
.product-card .stretched-link{ position:static; }

/* ---------- Filtros ---------- */
.price-filter .price-range{ width:160px }
#price-range-label{ font-weight:600 }

/* ---------- Carrito / Modal ---------- */
.cart-item{ padding:14px 0; border-bottom:1px solid #e5e7eb }
.cart-item-image{ max-height:80px; object-fit:contain }
.quantity-controls .quantity-btn{
  width:28px; height:28px; border-radius:50%; border:1px solid #ddd; background:#fff
}
.quantity-value{ min-width:28px; text-align:center }

.modal-backdrop.show{ backdrop-filter: blur(2px); }
.modal-content{ border-radius:16px; box-shadow:var(--shadow); }

/* Toast liviano */
.as-toast{
  position:fixed; top:14px; right:14px; z-index:1080;
  background:#111; color:#fff; padding:.6rem .9rem; border-radius:12px;
  box-shadow:var(--shadow); opacity:0; transform:translateY(-6px);
  transition:all .25s ease;
}
.as-toast.show{ opacity:1; transform:translateY(0); }



/* ===== Footer ===== */
.as-footer{
  background: linear-gradient(160deg,var(--hero-start),var(--hero-end));
  color:#fff; padding:48px 0 18px;
}
.as-footer .logo-footer{ height:38px; width:auto; }
.as-footer .foot-title{ font-weight:800; letter-spacing:.02em; margin-bottom:.6rem; }
.as-footer .foot-text{ color:rgba(255,255,255,.75); }

.as-footer .foot-links,
.as-footer .foot-contact{
  list-style:none; padding:0; margin:0; display:grid; gap:.45rem;
}
.as-footer .foot-links a{
  color:rgba(255,255,255,.85); text-decoration:none;
}
.as-footer .foot-links a:hover{ color:#fff; text-decoration:underline; }
.as-footer .foot-contact li{ color:rgba(255,255,255,.85); }
.as-footer .foot-contact i{
  width:18px; text-align:center; margin-right:.4rem; color:#80d8ff;
}

.as-footer .foot-newsletter{ display:flex; gap:.5rem; }
.as-footer .foot-newsletter .form-control{
  background:rgba(255,255,255,.12); border-color:transparent; color:#fff;
}
.as-footer .foot-newsletter .form-control::placeholder{ color:rgba(255,255,255,.7); }

.as-footer .socials{ display:flex; gap:.6rem; margin-top:.5rem; }
.as-footer .socials a{
  width:36px; height:36px; display:grid; place-items:center;
  border-radius:999px; background:rgba(255,255,255,.1); color:#fff;
}
.as-footer .socials a:hover{ background:rgba(255,255,255,.2); }

.as-footer .foot-divider{ border-color:rgba(255,255,255,.15); margin:24px 0; }