/* ===================================================================
   Carrito – Restart (paleta + cuadrillé + mobile fix)
   Respeta: --primario / --secundario / --terciario / --quintax
   =================================================================== */

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

  --primario:  #fae4c5;
  --secundario:#8a4020;
  --terciario: #bd7a4f;
  --quintax:   #94ba7e;

  --secundario-rgb: 138,64,32;   /* para líneas del cuadrillé */

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

  --brand:  var(--secundario);
  --accent: var(--primario);
}

/* ------- Fondo página (AHORA con primario + cuadrícula global) ------- */
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;
}

.cart-bg{
  min-height:100dvh;
  background-color: var(--primario);   /* ✅ fondo base */
  color: var(--text);

  /* cuadrícula global “bien marcada” aplicada al fondo */
  position: relative;
  isolation: isolate;

  /* preset del patrón (igual al que guardamos) */
  --grid-size: 64px;
  --grid-size-md: 56px;
  --grid-size-sm: 44px;
  --grid-color-rgb: var(--cuaternario-rgb, 61,43,31);
  --grid-alpha: .16;

  /* malla dibujada directamente en el fondo */
  background-image:
    linear-gradient(rgba(var(--grid-color-rgb), var(--grid-alpha)) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--grid-color-rgb), var(--grid-alpha)) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size),
                   var(--grid-size) var(--grid-size);
  background-position: center top;

  /* compat: variables antiguas (ya no usadas) */
  --c-grid-size: 64px;
  --c-grid-size-md: 56px;
  --c-grid-size-sm: 44px;
  --c-line-rgb: var(--secundario-rgb, 138,64,32);
  --c-line-alpha: .14;
}

/* anulamos los pseudo-elementos para evitar doble patrón */
.cart-bg::before,
.cart-bg::after{ content:none !important; }

.cart-bg > *{ position: relative; z-index: 1; }

/* responsive del patrón */
@media (max-width:1200px){
  .cart-bg{
    background-size: var(--grid-size-md) var(--grid-size-md),
                     var(--grid-size-md) var(--grid-size-md);
  }
}
@media (max-width:768px){
  .cart-bg{
    background-size: var(--grid-size-sm) var(--grid-size-sm),
                     var(--grid-size-sm) var(--grid-size-sm);
  }
}

/* ------- Contenedor con CUADRILLÉ ------- */
.cart-wrap{
  width:min(1100px, 92%);
  margin:0px auto 2rem;
  padding:0 0 2rem;
  position: relative; isolation:isolate;
  border-radius:18px;
  border:1px solid var(--stroke);
  background: var(--cuaternario, #0d1117); /* color de los “cuadros” del contenedor */
  box-shadow:0 18px 40px rgba(0,0,0,.22);
  overflow: clip;
  color:var(--text);

  --grid-size: 64px;
  --grid-size-md: 56px;
  --grid-size-sm: 44px;
  --line-rgb: var(--secundario-rgb);
  --line-alpha: .18;
  --vignette: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,.25) 100%);
}
.cart-wrap::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(var(--line-rgb), var(--line-alpha)) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--line-rgb), var(--line-alpha)) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size);
}
.cart-wrap::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background: var(--vignette);
}
@media (max-width:1200px){
  .cart-wrap::before{ background-size: var(--grid-size-md) var(--grid-size-md), var(--grid-size-md) var(--grid-size-md); }
}
@media (max-width:768px){
  .cart-wrap::before{ background-size: var(--grid-size-sm) var(--grid-size-sm), var(--grid-size-sm) var(--grid-size-sm); }
}

/* ------- Estructura ------- */
.cart-title{
  /* corregido: clamp válido y centrado */
  font-size:clamp(1.6rem, 2.6vw, 2.8rem);
  font-weight:800;
  letter-spacing:0.12em;
  margin:0 auto 1rem;        /* centrado del bloque */
  text-align:center;         /* centrado del texto */
}

.cart-grid{
  position:relative; z-index:1;
  display:grid; gap:1rem; grid-template-columns:2fr 1fr;
}
@media (max-width:980px){ .cart-grid{ grid-template-columns:1fr; } }

.card{
  background:var(--surface); border:1px solid var(--primario);
  border-radius:16px; overflow:hidden;
}

/* ------- Tabla ------- */
.cart-table{ width:100%; border-collapse:separate; border-spacing:0; }
.cart-table th, .cart-table td{
  padding:.85rem .9rem; border-bottom:1px solid var(--stroke); vertical-align:middle;
}
.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; }

.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; }

.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; }

/* ------- Botones base ------- */
.btn{
  display:inline-block; cursor:pointer; user-select:none;
  border:0; border-radius:999px; font-weight:800; letter-spacing:.2px;
  padding:.58rem 1rem; background:var(--secundario); color:#0b0b0b; text-decoration:none;
  transition: transform .12s ease, box-shadow .18s ease, filter .18s ease;
}
.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: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-danger{ background:var(--danger); color:#111; }
.btn-block{ display:block; width:100%; text-align:center; }

/* ------- Summary ------- */
.summary{ position:relative; z-index:1; padding:1rem; background:var(--cuaternario); }
.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(--primario); padding-top:.6rem; }
.summary .note{ font-size:.9rem; color:var(--muted); text-align:center; display:block; }

/* Botones del resumen */
.cart-bg .summary .btn, .cart-bg .summary .btn-block{
  min-height:44px; border-radius:12px; border:1.5px solid transparent; background-image:none !important; position:relative;
}
#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); }
.cart-bg .summary > a.btn-block{
  width:clamp(200px, 70%, 360px); 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 > form .btn-block{
  width:100%; background:transparent !important; color:var(--danger) !important; border-color:color-mix(in oklab, var(--danger) 60%, transparent) !important;
}

/* ======================================================
   MOBILE: Acciones sin solapes — “Quitar” a la derecha
   ====================================================== */
.actions{ display:flex; gap:0rem; flex-wrap:wrap; align-items:center; }
.actions form{ display:inline-flex; align-items:center; margin:0; }

.cart-table .actions .btn::before,
.cart-table .actions .btn::after{ content:none !important; }

@media (max-width:700px){
  .actions .btn.btn-danger,
  .actions .btn-outline.btn-danger,
  .actions [data-action="remove"],
  .actions .btn-remove,
  .actions .remove{
    margin-left:auto;
    order:2;
  }
  .actions .btn:not(.btn-danger){ order:1; }

  .cart-table thead{ display:none; }
  .cart-table{ border-collapse:separate; border-spacing:0 10px; }
  .cart-table tbody tr{
    display:grid;
    grid-template-columns: max-content 1fr max-content;
    grid-template-rows: auto auto;
    column-gap:0px; row-gap:0px;
    padding:0px; background:rgba(255,255,255,.02);
    border:1px solid var(--primario);
  }
  .cart-table tbody td{ border:0; padding:0; background:transparent; }
  .cart-table tbody td:nth-child(1){ grid-column:1 / span 2; grid-row:1; }
  .cart-table tbody td:nth-child(2){ grid-column:3; grid-row:1; text-align:right; align-self:start; padding-right:16px; }
  .cart-table tbody td:nth-child(3){ grid-column:1; grid-row:2; }
  .cart-table tbody td:nth-child(5){ grid-column:2; grid-row:2; align-self:end; justify-self:start; }
  .cart-table tbody td:nth-child(4){ grid-column:3; grid-row:2; text-align:right; align-self:end; padding-right:16px; font-weight:800; }

  .qty{ width:78px; min-height:36px; padding:.42rem .55rem; }
  .actions .btn{ min-height:36px; padding:.44rem .9rem; }
  .cart-table tbody td:nth-child(5) .btn{ min-height:36px; padding:.44rem .85rem; }
}

/* ------- Pequeños utilitarios ------- */
@media (min-width:981px){ .summary{ position:sticky; top:12px; } }

/* ====== Carrito vacío: centrar mensaje y mantener color del link ====== */

/* 1) Si el template usa clases semánticas para el vacío */
.cart-empty,
.empty-cart,
.cart-wrap .empty,
.cart-wrap .vacio{
  text-align: center;
}

.cart-empty a,
.empty-cart a,
.cart-wrap .empty a,
.cart-wrap .vacio a{
  display:inline-block;
  margin:.25rem auto 0;
  text-align:center;
  color: var(--primario) !important;  /* evita violeta */
}
.cart-empty a:visited,
.empty-cart a:visited,
.cart-wrap .empty a:visited,
.cart-wrap .vacio a:visited,
.cart-empty a:hover,
.empty-cart a:hover,
.cart-wrap .empty a:hover,
.cart-wrap .vacio a:hover,
.cart-empty a:focus,
.empty-cart a:focus,
.cart-wrap .empty a:focus,
.cart-wrap .vacio a:focus,
.cart-empty a:active,
.empty-cart a:active,
.cart-wrap .empty a:active,
.cart-wrap .vacio a:active{
  color: var(--primario) !important;
}

/* 2) Fallback: cuando la primera card NO tiene la tabla (estado vacío genérico) */
.cart-grid .card:not(:has(.cart-table)){
  text-align: center;
}
.cart-grid .card:not(:has(.cart-table)) a{
  display:inline-block;
  margin:.25rem auto 0;
  text-align:center;
  color: var(--primario) !important;
}
.cart-grid .card:not(:has(.cart-table)) a:visited,
.cart-grid .card:not(:has(.cart-table)) a:hover,
.cart-grid .card:not(:has(.cart-table)) a:focus,
.cart-grid .card:not(:has(.cart-table)) a:active{
  color: var(--primario) !important;
}