/* ===================================================================
   Carrito – Tema oscuro (archivo separado)
   Respeta la paleta: --primario / --secundario / --terciario / --quintax
   =================================================================== */

/* Paleta base */
:root{
  color-scheme: dark;

  --primario:  #fae4c5;   /* títulos, acentos claros */
  --secundario:#8a4020;   /* CTA/botones del sitio */
  --terciario: #bd7a4f;   /* fondos/realces secundarios */
  --quintax:   #94ba7e;   /* CTA principal (comprar ahora) */

  --bg:      #0a0d12;
  --surface: #0d1117;
  --surface2:#111827;
  --stroke:  #1f2630;
  --text:    #e5e7eb;
  --muted:   #a1a1aa;
  --danger:  #ef4444;

  /* mapeo para utilidades heredadas */
  --brand:  var(--secundario);
  --accent: var(--primario);
}

/* ====== Página sin “corte” bajo el navbar (sólo si este CSS se carga en Carrito) ====== */
main{ padding-top:0 !important; padding-bottom:0 !important; }
header, .site-header, .navbar, .banner{
  margin-bottom:0 !important; border-bottom:0 !important;
  box-shadow:none !important; filter:none !important;
}
header::before, header::after,
.site-header::before, .site-header::after,
.banner::before, .banner::after,
.navbar::before, .navbar::after{ content:none !important; display:none !important; }

/* ====== Fondo y contenedor ====== */
.cart-bg{
  min-height:100dvh;
  background:
    radial-gradient(1200px 600px at 20% -10%, color-mix(in oklab, var(--brand) 18%, transparent), transparent 60%),
    radial-gradient(900px 480px at 110% 8%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 60%),
    var(--bg);
  color: var(--text);
  margin-top:0 !important;
}
.cart-wrap{
  width:min(1100px, 92%);
  margin:8px auto 2rem;
  padding:0 0 2rem;
  color:var(--text);
}

/* ====== Título ====== */
.cart-title{
  font-size:clamp(1.4rem, 2.5vw, 2rem);
  font-weight:800;
  letter-spacing:.2px;
  margin:0 0 1rem;
}

/* ====== Grid principal ====== */
.cart-grid{
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap:1rem;
}
@media (max-width:980px){ .cart-grid{ grid-template-columns:1fr; } }

/* ====== Card / tabla ====== */
.card{
  background:var(--surface);
  border:1px solid var(--stroke);
  border-radius:16px;
  box-shadow:0 12px 30px rgba(0,0,0,.25);
  overflow:hidden;
}
.cart-table{ width:100%; border-collapse:separate; border-spacing:0; }
.cart-table th,
.cart-table td{
  padding:.85rem .9rem;
  text-align:left;
  vertical-align:middle;
  border-bottom:1px solid var(--stroke);
}
.cart-table thead th{
  background:var(--surface2);
  color:#cbd5e1;
  font-weight:800;
  text-transform:uppercase;
  font-size:.78rem;
  letter-spacing:.04em;
  position:sticky; top:0; z-index:1;
}
.cart-table tbody tr:nth-child(odd){ background: rgba(255,255,255,.02); }
.cart-table tbody tr:hover{ background: color-mix(in oklab, var(--brand) 6%, transparent); }
.cart-table .num, .money{ text-align:right; font-variant-numeric: tabular-nums; }

/* Producto en celda */
.prod{ display:flex; align-items:center; gap:.65rem; }
.thumb{
  width:48px; height:48px; flex:0 0 48px;
  border-radius:10px; object-fit:cover;
  background:#0f1218; border:1px solid #1f2937;
}

/* Inputs y acciones */
.qty{
  width:90px; background:#0b1020; color:var(--text);
  border:1px solid #293246; border-radius:10px; padding:.48rem .6rem;
  outline:none; transition: box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.qty:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 22%, transparent);
  background:#0b1222;
}
.qty::-webkit-outer-spin-button,
.qty::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.qty{ -moz-appearance:textfield; }

.actions{ display:flex; gap:.5rem; flex-wrap:wrap; }

/* ====== Botones genéricos ====== */
.btn{
  display:inline-block; cursor:pointer; user-select:none;
  border:0; border-radius:999px; font-weight:800;
  padding:.58rem 1rem; letter-spacing:.2px;
  background:var(--secundario); color:#0b0b0b;
  transition: transform .12s ease, box-shadow .18s ease, filter .18s ease;
  text-decoration:none;
}
.btn:hover{ transform: translateY(-1px); filter:saturate(1.05) brightness(1.04); box-shadow:0 10px 24px color-mix(in oklab, var(--brand) 26%, transparent); }
.btn:active{ transform: translateY(0); }
.btn:focus-visible{ outline:none; box-shadow:0 0 0 4px color-mix(in oklab, var(--brand) 24%, transparent); }

.btn-outline{
  background:transparent;
  color:var(--danger);
  border:1px solid var(--danger);
}
.btn-outline:hover{ box-shadow:0 0 0 3px color-mix(in oklab, var(--danger) 22%, transparent); }

.btn-link{ color:var(--brand); text-decoration:none; }
.btn-link:hover{ text-decoration:underline; }

.btn-danger{ background:var(--danger); color:#111; }
.btn-danger:hover{ filter:brightness(1.08); }

.btn-block{ display:block; width:100%; text-align:center; }
.btn:disabled{ opacity:.6; cursor:not-allowed; filter:grayscale(.2); }

/* Estado vacío */
.empty{
  color:#a5b4fc;
  background:var(--surface);
  border:1px dashed #293246;
  padding:1rem;
  border-radius:16px;
  margin-bottom:.75rem;
}

/* ====== Resumen ====== */
.summary{
  padding:1rem; background:var(--surface);
}
.summary h3{ margin:0 0 .6rem; font-size:1.05rem; color:#cbd5e1; }
.summary .row{ display:flex; align-items:center; justify-content:space-between; margin:.35rem 0; }
.summary .total{
  display:flex; align-items:center; justify-content:space-between;
  font-weight:800; font-size:1.15rem; margin:.6rem 0 1rem;
  border-top:1px solid var(--stroke); padding-top:.6rem;
}
.summary .note{ font-size:.9rem; color:var(--muted); text-align:center; display:block; }

/* Botones del resumen (scoped, consistentes) */
.cart-bg .summary{ --btnH:44px; --btnR:12px; }
.cart-bg .summary .btn, .cart-bg .summary .btn-block{
  box-sizing:border-box;
  display:flex; align-items:center; justify-content:center;
  min-height:var(--btnH); border-radius:var(--btnR);
  border:1.5px solid transparent;
  font-weight:800; letter-spacing:.2px;
  background-image:none !important;
  position:relative;
}
.cart-bg .summary .btn::before,
.cart-bg .summary .btn::after{ content:none !important; }

.cart-bg .summary .btn + .btn,
.cart-bg .summary .btn + form,
.cart-bg .summary form + .btn,
.cart-bg .summary form + form{ margin-top:.6rem; }

/* Comprar ahora — sólido (usa --quintax) */
#btnCheckout{
  width:100%;
  background:var(--quintax) !important;
  color:#ffffff !important;
  border-color:rgba(215,215,215,1);
  box-shadow:0 10px 24px color-mix(in oklab, var(--secundario) 22%, transparent);
}
#btnCheckout:hover{ filter:brightness(1.05); transform:translateY(-1px); }

/* Seguir comprando — outline, más chico y centrado (usa --primario) */
.cart-bg .summary > a.btn-block{
  width:clamp(200px, 70%, 360px) !important;
  margin:.6rem auto 0;
  background:transparent !important;
  color:var(--primario) !important;
  border-color:color-mix(in oklab, var(--primario) 60%, transparent) !important;
  box-shadow:none !important;
}
.cart-bg .summary > a.btn-block:hover{
  background:color-mix(in oklab, var(--primario) 10%, transparent) !important;
  border-color:color-mix(in oklab, var(--primario) 75%, transparent) !important;
}

/* Vaciar carrito — outline rojo (usa --danger) */
.cart-bg .summary > form .btn-block{
  width:100%;
  background:transparent !important;
  color:var(--danger) !important;
  border-color:color-mix(in oklab, var(--danger) 60%, transparent) !important;
}
.cart-bg .summary > form .btn-block:hover{
  background:color-mix(in oklab, var(--danger) 10%, transparent) !important;
  border-color:color-mix(in oklab, var(--danger) 75%, transparent) !important;
}

/* ====== Responsive (detalles generales en mobile) ====== */
@media (max-width:700px){
  .cart-table th, .cart-table td{ padding:.6rem .55rem; }
  .thumb{ width:40px; height:40px; }
  .prod{
    gap:.5rem;
    font-size:clamp(.78rem, 3.2vw, .92rem);
    line-height:1.15;
    white-space:normal; word-break:break-word;
    flex-wrap:wrap;
  }
  .btn{ padding:.5rem .85rem; }
  .qty{ width:84px; }
}

/* ====== Detalle opcional ====== */
@media (min-width:981px){
  .summary{ position:sticky; top:12px; }
}

/* ==========================================================
   CART (mobile) — Acciones abajo a la IZQ, precios a la DER
   Fila en grid con 3 columnas:
   - Fila 1:  [Producto (col1-2)]   [Precio (col3)]
   - Fila 2:  [Cant+Actualizar (col1)] [Quitar (col2)] [Subtotal (col3)]
   ========================================================== */
@media (max-width:700px){

  /* Sin encabezado en mobile */
  .cart-table thead{ display:none; }

  /* Cada fila como card en grid */
  .cart-table{ border-collapse:separate; border-spacing:0 10px; }
  .cart-table tbody tr{
    display:grid;
    grid-template-columns: max-content 1fr max-content; /* IZQ-IZQ-DER */
    grid-template-rows: auto auto;
    column-gap:12px; row-gap:10px;
    padding:12px;
    background: rgba(255,255,255,.02);
    border:1px solid var(--stroke);
    border-radius:14px;
    position:relative;
  }
  .cart-table tbody td{ border:0; padding:0; background:transparent; }

  /* Mapeo de celdas */
  .cart-table tbody td:nth-child(1){ grid-column:1 / span 2; grid-row:1; }                    /* Producto */
  .cart-table tbody td:nth-child(2){ grid-column:3; grid-row:1; text-align:right; align-self:start; padding-right:6px; } /* Precio (arriba der) */
  .cart-table tbody td:nth-child(3){ grid-column:1; grid-row:2; }                              /* Cantidad + Actualizar (abajo izq) */
  .cart-table tbody td:nth-child(5){ grid-column:2; grid-row:2; align-self:center; justify-self:start; } /* Quitar (junto a Actualizar) */
  .cart-table tbody td:nth-child(4){ grid-column:3; grid-row:2; text-align:right; align-self:end; padding-right:6px; }   /* Subtotal (abajo der) */

  /* Producto compacto */
  .prod{
    display:grid; grid-template-columns: 56px 1fr; align-items:center; gap:.6rem;
    font-size:.92rem; line-height:1.2; white-space:normal; word-break:break-word;
  }
  .thumb{ width:56px; height:56px; border-radius:10px; }

  /* Etiquetas auxiliares para claridad */
  .cart-table tbody td:nth-child(2)::before,
  .cart-table tbody td:nth-child(4)::before{
    display:block; font-size:.78rem; color:var(--muted);
    text-transform:uppercase; letter-spacing:.02em; margin-bottom:4px;
  }
  .cart-table tbody td:nth-child(2)::before{ content:"Precio"; }
  .cart-table tbody td:nth-child(4)::before{ content:"Subtotal"; }
  .cart-table tbody td:nth-child(4){ font-weight:800; font-size:1.03rem; }

  /* Acciones compactas (misma altura) */
  .actions{ display:flex; align-items:center; gap:.55rem; }
  .qty{ width:78px; min-height:36px; padding:.42rem .55rem; }
  .actions .btn{ min-height:36px; padding:.44rem .9rem; border-radius:999px; }
  .cart-table tbody td:nth-child(5) .btn{ min-height:36px; padding:.44rem .85rem; border-radius:999px; }

  /* Números prolijos */
  .cart-table tbody td:nth-child(2),
  .cart-table tbody td:nth-child(4){ font-variant-numeric: tabular-nums; }

  /* Ultra-chico: si no entra, “Quitar” cae debajo */
  @media (max-width:360px){
    .cart-table tbody td:nth-child(5){ grid-column:1 / span 2; grid-row:3; margin-top:.35rem; }
  }
}

/* Desktop: pequeño realce al pasar */
@media (min-width:701px){
  .cart-table tbody tr{ transition: background .18s ease, box-shadow .18s ease; }
  .cart-table tbody tr:hover{
    background: color-mix(in oklab, var(--brand) 6%, transparent);
    box-shadow: 0 8px 18px rgba(0,0,0,.18) inset;
  }
}
/* ==========================================================
   CART (mobile) — Botones debajo del contador
   y precios más a la izquierda
   ========================================================== */
@media (max-width:700px){

  /* Fila como card en grid (3 columnas) */
  .cart-table tbody tr{
    display:grid;
    grid-template-columns: max-content 1fr max-content; /* izq: imagen/título + ancho flexible + der: precios */
    grid-template-rows: auto auto;                      /* fila 1: prod+precio | fila 2: acciones+subtotal */
    column-gap:12px; row-gap:10px;
    padding:12px;
    background: rgba(255,255,255,.02);
    border:1px solid var(--stroke);
    border-radius:14px;
    position:relative;
  }
  .cart-table tbody td{ border:0; padding:0; background:transparent; }

  /* Areas: */
  /* Producto ocupa col 1–2 arriba */
  .cart-table tbody td:nth-child(1){ grid-column:1 / span 2; grid-row:1; }

  /* Precio arriba derecha, con más aire del borde */
  .cart-table tbody td:nth-child(2){
    grid-column:3; grid-row:1;
    text-align:right; align-self:start;
    padding-right:16px;            /* << más a la izquierda */
  }

  /* Contador + Actualizar (debajo, col 1) */
  .cart-table tbody td:nth-child(3){
    grid-column:1; grid-row:2;
  }

  /* Quitar va al lado de Actualizar (debajo, col 2) */
  .cart-table tbody td:nth-child(5){
    grid-column:2; grid-row:2;
    align-self:end; justify-self:start; /* se alinea a la izquierda */
  }

  /* Subtotal abajo derecha, con más aire del borde */
  .cart-table tbody td:nth-child(4){
    grid-column:3;
    text-align:right; align-self:end;
    padding-right:16px;            /* << más a la izquierda */
    font-weight:800; font-size:1.03rem;
  }

  /* Producto compacto */
  .prod{
    display:grid; grid-template-columns:56px 1fr; align-items:center; gap:.6rem;
    font-size:.92rem; line-height:1.2; white-space:normal; word-break:break-word;
  }
  .thumb{ width:56px; height:56px; border-radius:10px; }

  /* Labels para claridad (no hay thead en mobile) */
  .cart-table thead{ display:none; }
  .cart-table tbody td:nth-child(2)::before,
  .cart-table tbody td:nth-child(4)::before{
    display:block; font-size:.78rem; color:var(--muted);
    text-transform:uppercase; letter-spacing:.02em; margin-bottom:4px;
  }
  .cart-table tbody td:nth-child(2)::before{ content:"Precio"; }
  .cart-table tbody td:nth-child(4)::before{ content:"Subtotal"; }

  /* Acciones: botón Actualizar debajo del input */
  .actions{
    display:flex; flex-direction:column; align-items:flex-start;
    gap:.45rem;
  }
  .qty{ width:78px; min-height:36px; padding:.42rem .55rem; }
  .actions .btn{ min-height:36px; padding:.44rem .9rem; border-radius:999px; }

  /* Botón Quitar (mismo alto que Actualizar) */
  .cart-table tbody td:nth-child(5) .btn{
    min-height:36px; padding:.44rem .85rem; border-radius:999px;
  }

  /* Números prolijos */
  .cart-table tbody td:nth-child(2),
  .cart-table tbody td:nth-child(4){
    font-variant-numeric: tabular-nums;
  }

  /* Ultra-chico: si no entra, “Quitar” baja solo */
  @media (max-width:360px){
    .cart-table tbody td:nth-child(5){ grid-column:1 / span 2; margin-top:.35rem; }
  }
}
/* ============================
   Mobile: eliminar espacios
   bajo el navbar y sobre el footer
   (sólo para la vista de carrito)
   ============================ */
@media (max-width:700px){
  /* Quita cualquier padding/margen superior e inferior del área del carrito */
  main,
  .cart-bg,
  .cart-wrap{
    padding-top:0 !important;
    padding-bottom:0 !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
  }

  /* Evita que el primer/último hijo “colapse” márgenes hacia fuera del contenedor */
  .cart-wrap > *:first-child{ margin-top:0 !important; }
  .cart-wrap > *:last-child{  margin-bottom:0 !important; }

  /* Asegura que el header no deje sombra/borde/margen extra */
  header, .site-header, .navbar, .banner{
    margin-bottom:0 !important;
    border-bottom:0 !important;
    box-shadow:none !important;
    filter:none !important;
  }
  header::before, header::after,
  .site-header::before, .site-header::after,
  .navbar::before, .navbar::after,
  .banner::before, .banner::after{
    content:none !important;
    display:none !important;
  }

  /* Quita la separación antes del footer en esta página */
  footer, .site-footer, .cart-bg + footer{
    margin-top:0 !important;
    border-top:0 !important;
  }
}
/* =========================================
   Carrito — eliminar espacio con el navbar
   y con el footer (desktop y móvil)
   ========================================= */
main{ padding-top:0 !important; padding-bottom:0 !important; }
.cart-bg{ margin-top:0 !important; margin-bottom:0 !important; }
.cart-wrap{ margin-top:0 !important; margin-bottom:0 !important; }

/* Evita márgenes colapsados del primer/último hijo */
.cart-wrap > *:first-child{ margin-top:0 !important; }
.cart-wrap > *:last-child{  margin-bottom:0 !important; }

/* Mata cualquier divisor/sombra del header/nav/banner */
header, .site-header, .navbar, .banner{
  margin-bottom:0 !important;
  border-bottom:0 !important;
  box-shadow:none !important;
  filter:none !important;
}
header::before, header::after,
.site-header::before, .site-header::after,
.navbar::before, .navbar::after,
.banner::before, .banner::after{
  content:none !important;
  display:none !important;
}

/* Si aún queda un “pelo” de 1px, lo solapamos ligeramente */
.cart-bg{ margin-top:-1px !important; }

/* Sin aire antes del footer */
footer, .site-footer, .cart-bg + footer{
  margin-top:0 !important;
  border-top:0 !important;
}