:root{
  --bg:#0b0b0b; --panel:#121212; --muted:#9aa1ac; --fg:#fff;
  --brand:#ff6b00; --accent:#ffd166; --danger:#ef4444;
  --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.4); --header-h:72px;
  --c-blue:#1862a3; --c-red:#751616; --c-white:#DDE3EE; --sel-color:var(--c-blue);
}
*{box-sizing:border-box}
html,body{height:100%; overflow-x:hidden}
body{margin:0;background:#000;color:var(--fg);font-family:"Poppins",sans-serif}
.container{width:min(1200px,100%);margin-inline:auto;padding-inline:clamp(12px,4vw,22px)}

/* ================= Header ================= */
.site-header{position:sticky;top:0;z-index:100;background:#000;border-bottom:1px solid #1f1f1f}
.header-grid{
  display:grid;
  grid-template-columns:auto 1fr auto; /* base */
  align-items:center; gap:14px;
}
.logo img{height:55px}
.nav{text-align:right;padding-block:8px}
.nav a{color:#f6af3b;text-decoration:none;margin:0 10px;opacity:.9;font-size:12px;font-weight:500;letter-spacing:.3px}
.nav a.active{color:#f18686;font-size:13px;font-weight:600}
.burger{
  display:none;
  width:32px;
  height:32px;
  cursor:pointer;
  border:1px solid #f6af3b;
  background:#0d0d0d;
  border-radius:12px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:4px
}
.burger span{
  display:block;
  width:16px;
  height:1px;
  background:#f6af3b;
  border-radius:2px
}

/* Desktop: forzar orden LOGO | NAV | CART (aunque el cart esté antes en el DOM) */
@media (min-width:900px){
  .header-grid{
    grid-template-columns:auto 1fr auto;
    grid-template-areas:"logo nav cart";
  }
  .logo{grid-area:logo}
  .nav{grid-area:nav; display:flex; justify-content:flex-end; align-items:center; gap:10px; white-space:nowrap}
  .cart-wrap{grid-area:cart; justify-self:start; margin-left:12px}
}

/* Mobile */
@media (max-width:850px){
  .nav{display:none}
  .burger{display:inline-flex}
  .container.header-grid{padding-inline:16px}
  .header-grid{grid-template-columns:36px 1fr 36px}
  .burger{grid-column:1; justify-self:start}
  .logo{
    grid-column:2; 
    justify-self:center;
    align-items: center;
    
  }
  .logo img{
    margin-top: 5px;

  }
  .cart-wrap{
    grid-column:3; justify-self:end
  }
}

/* ================= Side bar full-height ================= */
.side-nav{
  position:fixed; 
  inset:0 auto 0 0; 
  width:60vw; 
  max-width:320px; 
  border-right:1px solid #222;
  transform:translateX(-102%); 
  transition:transform .25s ease; 
  z-index:1000;
  background:#000000f3 !important; 
  padding:16px; 
  display:flex; 
  flex-direction:column; 
  gap:10px; 
  box-shadow:8px 0 24px rgba(0,0,0,.6)
}
.side-nav a{
  font-family:"Poppins",sans-serif;
  color:#fff;
  text-decoration:none;
  padding:12px;
  border-radius:8px;
  font-size: 13px;
  font-weight: 600;
}
.side-nav a[aria-current="page"]{background:#151515}
.side-nav.open{transform:translateX(0)}
.side-close{align-self:flex-end;background:transparent;border:0;color:#aaa;font-size:26px;line-height:1;cursor:pointer;margin:-6px -2px 4px 0}
.side-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:900}

/* ================= Cart (botón + mini) ================= */
.cart-wrap{position:relative}
.cart-link,
.cart-link:visited{
  position:relative; color:#fff; text-decoration:none; display:inline-flex; align-items:center; gap:8px;
  font-weight:600; 
  line-height:1; 
}
/* evitar “morado” de SVG */
.cart-link svg{display:block}
.cart-link svg [stroke]{stroke:#f6af3b !important}
.cart-link svg [fill]{fill:transparent}

.cart-badge{
  position:absolute;
  top:-6px;
  right:-5px;
  background:#fff;
  color:var(--c-red);
  border-radius:999px;
  padding: 3px 5px;
  font-size:10px;
  font-weight:700
}

.cart-mini{
  position:absolute; right:0; top:100%; width:360px; max-width:min(90vw,380px);
  background:#0e0e0e; border:1px solid #232323; border-radius:16px;
  box-shadow:0 18px 50px rgba(0,0,0,.55);
  padding:12px; opacity:0; visibility:hidden; transform:translateY(0); transition:.2s ease; color:#fff
}
.cart-mini.show{opacity:1;visibility:visible;transform:translateY(6px)}
.cart-mini-body{max-height:60vh;overflow:auto}

/* Ítems single */
.cart-mini-item{
  position:relative;
  display:grid; grid-template-columns:56px 1fr 90px; gap:10px; align-items:center;
  padding:10px 0; padding-right:26px; border-bottom:1px dashed #262626;
}
.cart-mini-item:last-child{border-bottom:0}
.cart-mini-item img{width:56px;height:56px;object-fit:cover;border-radius:10px;border:1px solid #222}
.cart-mini-title{font-weight:600}
.cart-mini-meta{font-size:12px;color:#cfd6e1;opacity:.85;margin-top:2px}
.cart-mini-price{font-weight:800;justify-self:end;text-align:right}
.cart-mini-remove{position:absolute;top:8px;right:0;background:transparent;border:none;color:#ddd;cursor:pointer;font-size:18px}

/* PACKS: imágenes arriba; textos debajo; precio a la derecha */
.cart-mini-item.bundle{
  grid-template-columns:1fr 90px;
 
}
.bundle-thumbs{
  grid-column:1 / -1; 
  display:flex; 
  gap:6px; 
  margin-bottom:6px
}
.bundle-thumbs img{width:42px;height:42px;border-radius:8px;border:1px solid #222;object-fit:cover}
.cart-mini-item.bundle .cart-mini-title{grid-column:1 / -1; margin-top:2px}
.cart-mini-item.bundle .cart-mini-meta{grid-column:1 / -1}
.cart-mini-item.bundle .cart-mini-price{
  grid-column:2 / 3; 
  justify-self:end;
}

/* Footer (total dentro del body) + acciones */
.cart-mini-footer{margin-top:10px;border-top:1px solid #1f1f1f;padding-top:10px}
.cart-mini-row{display:flex;align-items:center;justify-content:space-between;margin:6px 0}
.cart-mini-total{font-size:16px;font-weight:900}

/* Botones genéricos */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:800;
  padding:12px 14px;border-radius:12px;border:1px solid transparent;cursor:pointer;text-decoration:none}
.btn:hover{filter:brightness(1.06)}
.btn.ghost{background:#111;border-color:#2a2a2a;color:#fff}
.btn.primary{background:var(--brand);border-color:#000;color:#000;box-shadow:0 6px 18px rgba(255,107,0,.25)}

/* ================= Footer del sitio ================= */
.site-footer{background:#000;border-top:1px solid #1a1a1a;color:#fff;display:flex;flex-direction:column;align-items:center}
.foot-grid{display:grid;grid-template-columns:1fr 1fr 1fr;padding:16px 0;align-items:start}
.foot-grid a{color:#cfd6e1;text-decoration:none;margin:4px 0;text-align:center}
.site-footer img{width:40%}
.final{background:url(/assets/img/Promo.png);color:#000;width:100%;text-align:center}
.final a{color:#000;text-decoration:none}

@media (max-width:850px){
  .foot-grid{grid-template-columns:1fr}
  .site-footer img{width:30%}
  .final{background:url(/assets/img/Promo2.png);background-size:cover}
}
/* ====== Cart: estilos para PACK y totales ====== */

/* Subtotal/price a la derecha ya existe con .cart-mini-price; reforzamos */
.cart-mini-price{ font-weight:800; justify-self:end; text-align:right; }

/* SOLO PACK: imágenes arriba, textos debajo, precio a la derecha */
.cart-mini-item.bundle{
  display:grid;
  grid-template-columns: 1fr 90px; /* texto | precio */
  align-items:start;
  gap:10px;
  padding:10px 0;
  border-bottom:1px dashed #262626;
  position:relative;
}
.cart-mini-item.bundle:last-child{ border-bottom:0; }

.bundle-thumbs{
  grid-column:1 / -1;
  display:flex; gap:6px; margin:0 0 6px;
}
.bundle-thumbs img{
  width:42px; height:42px; object-fit:cover;
  border-radius:8px; border:1px solid #222;
}
.cart-mini-item.bundle .cart-mini-title{ grid-column:1 / -1; margin-top:2px; font-weight:600; }
.cart-mini-item.bundle .cart-mini-meta{ grid-column:1 / -1; font-size:12px; color:#cfd6e1; opacity:.85; }

/* Footer del mini-cart: total + acciones */
.cart-mini-foot{
  margin-top:10px; border-top:1px solid #1f1f1f; padding-top:10px;
}
.cart-mini-row{ display:flex; align-items:center; justify-content:space-between; margin:6px 0; }
.cart-mini-total{ font-size:16px; font-weight:900; }

/* Botón checkout con estilo (evita morado y da aspecto de CTA) */
.cart-mini-foot .btn.primary{
  background:var(--brand); border-color:#000; color:#000;
  box-shadow:0 6px 18px rgba(255,107,0,.25);
}

/* Evita “morado” del ícono por estados de enlace visitado */
.cart-link, .cart-link:visited{ color:#fff; }
.cart-link svg [stroke]{ stroke:#f6af3b !important; }
.cart-link svg [fill]{ fill:transparent; }
/* Subtotal / price a la derecha */
.cart-mini-item{
  display:grid;
  grid-template-columns:56px 1fr 90px; /* img | texto | $ */
  gap:10px;
  align-items:center;
  padding:10px 0;
  border-bottom:1px dashed #262626;
  position:relative;
}
.cart-mini-item:last-child{ border-bottom:0; }
.cart-mini-price{ font-weight:800; justify-self:end; text-align:right; }

/* PACK: imágenes arriba, letras debajo, precio a la derecha */
.cart-mini-item.bundle{
  grid-template-columns:1fr 90px;      /* texto | $ */
  align-items:start;
}
.bundle-thumbs{
  grid-column:1 / -1;
  display:flex; gap:6px; margin-bottom:6px;
}
.bundle-thumbs img{
  width:42px; height:42px; object-fit:cover;
  border-radius:8px; border:1px solid #222;
}
.cart-mini-item.bundle .cart-mini-title{ grid-column:1 / -1; font-weight:600; }
.cart-mini-item.bundle .cart-mini-meta{  grid-column:1 / -1; font-size:12px; color:#cfd6e1; opacity:.85; }

/* Evitar “morado” del icono carrito por :visited */
.cart-link, .cart-link:visited{ color:#fff; }
.cart-link svg [stroke]{ stroke:#f6af3b !important; }
.cart-link svg [fill]{   fill:transparent; }

/* Layout general de filas */
.cart-mini-item{
  display:grid;
  grid-template-columns:56px 1fr 90px; /* img | texto | $ */
  gap:10px;
  align-items:center;
  padding:10px 0;
  border-bottom:1px dashed #262626;
  position:relative;
}
.cart-mini-item:last-child{ border-bottom:0; }
.cart-mini-item img{
  width:56px; height:56px; object-fit:cover;
  border-radius:10px; border:1px solid #222;
}
.cart-mini-title{ font-weight:600; }
.cart-mini-meta{ font-size:12px; color:#cfd6e1; opacity:.85; margin-top:2px; }
.cart-mini-price{ font-weight:800; justify-self:end; text-align:right; }
.cart-mini-remove{
  position:absolute; top:8px; right:0;
  background:transparent; border:none; color:#ddd; cursor:pointer; font-size:18px;
}

/* PACK: imágenes y precio en la MISMA fila (row 1); títulos debajo */
.cart-mini-item.bundle{
  grid-template-columns:1fr 90px; /* thumbs/títulos | $ */
  align-items:start;
}
.cart-mini-item.bundle .bundle-thumbs{
  grid-column:1 / 2; grid-row:1; display:flex; gap:6px; margin-bottom:6px;
}
.cart-mini-item.bundle .cart-mini-price{
  grid-column:2 / 3; 
  grid-row:1; 
  justify-self:end; 
  align-self:center;
}
.cart-mini-item.bundle .cart-mini-title{
  grid-column:1 / 2; grid-row:2; margin-top:2px;
}
.cart-mini-item.bundle .cart-mini-meta{
  grid-column:1 / 2; grid-row:3;
}

/* Footer del mini (total y botón) */
.cart-mini-row{
  display:flex; align-items:center; justify-content:space-between; margin:6px 0;
}
.cart-mini-total{ font-size:16px; font-weight:900; }

/* Evitar “morado” del icono carrito por :visited */
.cart-link, .cart-link:visited{ color:#fff; }
.cart-link svg [stroke]{ stroke:#f6af3b !important; }
.cart-link svg [fill]{   fill:transparent; }

/* Footer */ 
.site-footer{ 
  background:#000; 
  border-top:1px solid #1a1a1a; 
  padding:0; 
  margin-top:24px; 
  padding-top: 10px; 
  color:#fff; 
  display:flex; 
  flex-direction:column; 
  justify-content:center; 
  align-items:center; 
} 
.foot-grid{ 
  display:grid; 
  grid-template-columns:1fr 1fr 1fr; 
  padding:0; 
  align-items:start;
} 
.f-brand{ 
  display:flex; 
  justify-content:center;
} 
.f-nav a,.f-legal a{ 
  display:block; 
  color:#cfd6e1; 
  text-decoration:none; 
  margin:4px 0; 
  text-align:center;
  font-size: 13px;
} 
.site-footer img{ 
  width:30%; 
} 
.final{ 
  background:url(../img/Promo.png); 
  color:#000; 
  width:100% ; 
  text-align: center; 
} 
.final a{ 
  color:#000; 
  text-decoration:none; 
  font-size: 13px;
  font-weight: 600;
}
/* Responsive */ 
@media (max-width:850px){ 
 .foot-grid{ 
  grid-template-columns:1fr; 
  align-items:center; 
  justify-content:center; 
  margin-top: 17px;

} 
.site-footer{
  padding-top: 0; 
}
.f-legal{
  padding-bottom: 15px;
}
  .f-brand{ 
    display:flex; 
    flex-direction:row; 
    justify-content:center; 
  } 
  .f-brand img{ width:30%;} 
  .foot-grid a,.foot-grid p{ text-align:center; } 
  .final{ 
    background: url(../img/Promo2.png); 
    background-size: cover; 
  }
.final p{
  margin: 0;
  padding: 10px;
}
}

html, body{
  height:100%;
}

body{
  display:flex;
  flex-direction:column;
}

/* el header no crece, el main ocupa el espacio, el footer queda al fondo */
.site-header{
  flex-shrink:0;
}

main{
  flex:1;
}

.site-footer{
  flex-shrink:0;
}