:root{
  --brand:#00B1EA;--brand-600:#0096c7;--brand-700:#0077b6;
  --bg:#f5f6f7;--panel:#fff;--text:#1f2937;--muted:#6b7280;
  --border:#e5e7eb;--border-2:#d9dde3;
  --shadow-sm:0 4px 12px rgba(2,6,23,.06);
  --shadow-md:0 12px 24px rgba(2,6,23,.08);
  --shadow-lg:0 16px 36px rgba(2,6,23,.12);
  --radius:12px;--radius-lg:14px;
  --success:#00a650;--danger:#ef4444;
}

/* =============================================================================
   Reset básico
============================================================================= */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}
img{max-width:100%;display:block}
button{cursor:pointer}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
[hidden], .hidden{display:none !important}

/* =============================================================================
   Topbar
============================================================================= */
.topbar{position:sticky;top:0;z-index:30;display:grid;grid-template-columns:320px 1fr 320px;gap:16px;align-items:center;padding:14px 18px;background:var(--brand);box-shadow:var(--shadow-sm);border-bottom:1px solid rgba(255,255,255,.16)}
.brand{display:flex;align-items:center;gap:12px}
.brand-logo{height:44px;width:auto;object-fit:contain}
.brand-text strong,.brand-text span{color:#fff}
.brand-text span{opacity:.9;font-size:12px}

/* Search */
.search{display:flex;gap:10px;align-items:center}
.search-field{position:relative;flex:1}
.search input{width:100%;padding:12px 38px 12px 14px;border:0;border-radius:var(--radius);background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),0 4px 10px rgba(0,0,0,.06);outline:none;transition:box-shadow .2s}
.search input:focus{box-shadow:inset 0 0 0 2px var(--brand-600),0 6px 14px rgba(0,0,0,.10)}
.search-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:8px;border:0;background:#eef2f7;color:#334155;font-size:18px;line-height:1}

/* Actions + (fallback) native select */
.actions{display:flex;gap:10px;align-items:center;justify-content:flex-end}
.sort-wrap select{padding:10px 12px;border-radius:10px;border:0;background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),0 4px 10px rgba(0,0,0,.06);transition:box-shadow .2s;max-width:180px}
.sort-wrap select:focus{box-shadow:inset 0 0 0 2px var(--brand-600),0 6px 14px rgba(0,0,0,.10)}

/* Buttons */
.btn{padding:10px 14px;border:0;border-radius:12px;background:#0ea5e9;color:#fff;transition:background .15s,box-shadow .2s;box-shadow:0 2px 7px rgba(0,0,0,.08)}
.btn:hover{background:#0284c7;box-shadow:0 6px 14px rgba(0,0,0,.12)}
.btn-ghost{padding:9px 12px;border:1px solid var(--border);border-radius:10px;background:#fff;color:#1f2937}
.btn-light{padding:9px 12px;border-radius:10px;background:#eef7ff;color:#0b3b66;border:1px solid #cfe8ff}
.btn-full{width:100%}
.btn-apply{background:#10b981}.btn-apply:hover{background:#059669}
.btn-clear{background:#f3f4f6;color:#111827}.btn-clear:hover{background:#e5e7eb}

/* Cart button */
.cart-btn{position:relative;display:flex;align-items:center;gap:10px;background:#fff;color:#0b3b66;border:1px solid rgba(0,0,0,.06)}
.cart-ico{font-size:18px}
.cart-count{position:absolute;top:-8px;right:-8px;background:#ef4444;color:#fff;font-size:12px;min-width:18px;height:18px;border-radius:999px;display:grid;place-items:center;padding:0 5px;box-shadow:0 2px 6px rgba(0,0,0,.2)}

/* =============================================================================
   Layout + Free shipping widgets
============================================================================= */
.layout{display:grid;grid-template-columns:300px 1fr;gap:18px;padding:18px}

#fsFixed{background:#ffffff;border:1px solid var(--border);border-radius:var(--radius);padding:12px;box-shadow:var(--shadow-sm);margin-bottom:12px}
.fs-title{font-weight:700;margin-bottom:4px}
.fs-label{font-size:12px;color:#0b3b66;margin:6px 0}
.fs-bar{width:100%;height:8px;border-radius:999px;background:#eef2f7;overflow:hidden;border:1px solid #e5e7eb}
.fs-bar-fill{height:100%;background:linear-gradient(90deg,var(--brand),var(--brand-700));width:0%}
#fsFloat{position:fixed;right:16px;bottom:16px;width:min(320px, 92vw);background:#ffffffee;backdrop-filter:blur(8px) saturate(120%);border:1px solid var(--border);border-radius:14px;padding:12px;box-shadow:var(--shadow-lg);z-index:25;animation:fs-in .25s ease both}
@keyframes fs-in{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}

/* =============================================================================
   Sidebar filtros
============================================================================= */
.sidebar.filters{background:transparent;border:0;box-shadow:none;padding:0}
.filters-header{padding:8px 6px 14px}
.filters-header h2{margin:0 0 4px;font-size:20px;font-weight:700}
.results-count{font-size:12px;color:var(--muted)}
.toggle-cards{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.toggle-card{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:12px 14px;box-shadow:var(--shadow-sm);transition:box-shadow .25s,border-color .25s}
.toggle-card:hover{box-shadow:var(--shadow-md);border-color:var(--border-2)}
.tc-title{font-weight:600}
.tc-sub{font-size:12px;color:var(--muted);margin-top:2px}
.badge-full{font-weight:800;letter-spacing:.2px;color:var(--success)}

.switch{position:relative;display:inline-block;width:44px;height:26px}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;inset:0;background:#e6e9ef;border:1px solid #cfd6df;border-radius:14px;transition:background .2s,border-color .2s}
.slider:before{content:"";position:absolute;height:22px;width:22px;left:2px;top:1px;background:#fff;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.12);transition:transform .2s}
.switch input:checked + .slider{background:#cdefff;border-color:#9bdcf6}
.switch input:checked + .slider:before{transform:translateX(18px)}

.filter-group{padding:10px 6px}
.group-title{margin:10px 0 6px;font-size:14px;color:#4b5563}
.facet-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.facet-list li{display:flex;justify-content:space-between;align-items:center;color:#374151;font-size:14px;cursor:pointer;padding:6px 8px;border-radius:10px;transition:background .15s}
.facet-list li:hover{background:#f0f7ff}
.facet-list input{display:none}
.facet-list .count{color:#9aa1aa;font-size:12px}

.price{display:grid;grid-template-columns:repeat(2, minmax(80px, 100px)) auto;gap:8px}
.price input{width:100%;padding:10px;border:1px solid var(--border);border-radius:10px;background:#fff}

/* =============================================================================
   Resultados
============================================================================= */
.results{min-height:60vh}
.stats{color:var(--muted);margin-bottom:10px;padding:0 4px}
.active-filters{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 12px}
.chip{display:inline-flex;align-items:center;gap:6px;background:#e6f4ff;border:1px solid #cfe8ff;border-radius:14px;padding:6px 10px;font-size:12px;color:#0b3b66}
.chip button{border:0;background:transparent;cursor:pointer;font-size:14px;line-height:1;color:#0b3b66}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}

/* Cards */
.card{
  position:relative;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);transition:box-shadow .25s,border-color .25s;
  content-visibility:auto;contain-intrinsic-size:360px 320px;
}
.card:hover{box-shadow:var(--shadow-lg);border-color:var(--border-2)}
.card a{color:inherit;text-decoration:none;display:block}

/* Reveal progresivo */
.card.card--pending{opacity:0;transform:translateY(6px)}
.card.card--ready{opacity:1;transform:none;transition:opacity .25s ease, transform .25s ease}

/* Thumb */
.thumb{position:relative;background:#f2f6fb;display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;overflow:hidden}
.thumb::after{content:"";position:absolute;inset:auto 0 0 0;height:36px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.06));pointer-events:none}

/* Imagen card */
.thumb img,.thumb-img{max-width:90%;max-height:90%;object-fit:contain;display:block}
.thumb-img{opacity:0;transition:opacity .25s ease}
.thumb-img.is-loaded{opacity:1}
.card:hover .thumb img{filter:saturate(1.05)}

.thumb-badge{
  position:absolute; right:8px; bottom:8px;
  font-size:20px; line-height:1;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.35));
}

.incart-badge{position:absolute;top:8px;right:8px;background:#e8fff4;color:#0b5e36;border:1px solid #c6f2de;font-size:12px;font-weight:700;padding:4px 8px;border-radius:10px;box-shadow:0 4px 10px rgba(0,0,0,.08)}
.tap-hint{position:absolute;right:6px;bottom:6px;font-size:11px;color:#0b3b66;background:#e6f4ff;padding:4px 6px;border:1px solid #cfe8ff;border-radius:8px;opacity:0;transform:translateY(6px);transition:.2s}
.card:hover .tap-hint{opacity:1;transform:translateY(0)}

.info{padding:12px;display:flex;flex-direction:column;gap:8px}
.display-cat{font-size:12px;font-weight:600;color:#183153;background:#eef7ff;padding:4px 8px;border-radius:10px;width:max-content}
.name{font-weight:700;line-height:1.25;min-height:2.6em}
.muted{color:var(--muted);font-size:12px}

.pricing{display:flex;flex-direction:column;gap:6px}
.price-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.price-main{font-size:18px;font-weight:700;color:#111827}
.price-alt{font-size:18px;font-weight:700;color:#0b3b66}
.qty-badge{font-size:12px;color:#0b3b66;background:#e6f4ff;border:1px solid #cfe8ff;border-radius:8px;padding:2px 6px}
.qty-badge.alt{background:#fff9db;border-color:#fee08b;color:#8a6d00}
.price-sep{height:1px;background:#eef2f7;margin:2px 0 4px}

.quick-add{position:absolute;right:8px;bottom:8px;padding:8px 10px;border-radius:10px;background:#0ea5e9;color:#fff;border:0;box-shadow:0 8px 16px rgba(14,165,233,.25);display:flex;align-items:center;gap:6px;transition:transform .12s ease, box-shadow .2s ease, background .15s ease}
.quick-add:hover{transform:translateY(-2px);background:#0284c7}
.quick-add .qa-qty{padding:0 6px;border-radius:8px;background:rgba(255,255,255,.2);font-weight:700}

.pager{display:flex;align-items:center;justify-content:center;gap:12px;margin:18px 0}
#pageInfo{min-width:140px;text-align:center}

/* =============================================================================
   MODAL producto
============================================================================= */
#popupOverlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;padding:20px;z-index:1000;backdrop-filter:saturate(110%) blur(2px)}
#popupOverlay.open{display:flex}
#popup-content{
  width: min(960px, 96vw);
  max-height: 90vh;                 /* menos alto en pantallas grandes */
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow-lg);
  position:relative;
  transform:translateY(6px) scale(.98);
  transition:transform .18s ease, opacity .18s ease;
  opacity:.98;
  outline:0;

  display:flex;
  flex-direction:column;
  overflow:hidden;                  /* contiene el scroll y respeta bordes */
}




.popup-body{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;

  padding:16px;                     /* padding uniforme */
  min-height:0;
  overflow:auto;                    /* acá vive el scroll */
}


.popup-actions{
  position:sticky;
  bottom:0;
  left:0;
  right:0;
  width:100%;
  background:#fff;                /* opaco */
  padding:12px 16px;
  border-top:1px solid var(--border);
  box-shadow:0 -8px 16px rgba(2,6,23,.08);
  margin:0;
  border-radius:0;
  z-index: 5;                     /* por encima del contenido scrolleable */
}


.popup-media{
  background:#f2f6fb;
  border:1px solid var(--border);
  border-radius:12px;

  display:flex;
  align-items:center;
  justify-content:center;

  align-self:stretch;       /* ocupa alto del track -> márgenes visuales parejos */
  aspect-ratio:1/1;
}
.popup-media img{
  max-width:92%;
  max-height:92%;
  object-fit:contain;
}



/* Columna derecha flexible */
.popup-info{display:flex;flex-direction:column;gap:10px;min-height:0}

/* >>> Nombre del producto – legible y siempre visible */
#popup-name{
  order:-1;                 /* lo mantenemos arriba */
  flex: 0 0 auto;           /* evita que colapse/oculte en flex */
  margin:2px 0 6px;
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  font-weight:700;
  line-height:1.25;
  color:#0f172a;
  letter-spacing:.1px;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  word-break:break-word;
}

/* Precios */
.popup-prices{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.tier-line{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tier-label{font-size:12px;color:#6b7280;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:8px;padding:2px 6px}
.tier-price{font-weight:800;color:#111827}
.tier-qty{font-size:12px;color:#0b3b66;background:#e6f4ff;border:1px solid #cfe8ff;border-radius:8px;padding:2px 6px}

/* Cantidad */
.quantity-controls{display:flex;gap:10px;align-items:center;margin:12px 0}
#quantity-input{width:90px;text-align:center;padding:10px 8px;border:1px solid var(--border);border-radius:10px;background:#fff;font-weight:700}

/* Total + badge mayorista */
.popup-total{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-start;margin:8px 0 14px}
.popup-total strong{font-size:22px}

.mp-tier-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;color:#0b5e36;background:linear-gradient(135deg,#e8fff4,#d7ffe9);border:1px solid #c6f2de;box-shadow:0 8px 22px rgba(0,166,80,.15),inset 0 0 0 1px rgba(255,255,255,.7);transform:translateY(4px) scale(.96);opacity:0;pointer-events:none;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .28s ease}
.mp-tier-badge .icon{width:22px;height:22px;border-radius:50%;background:var(--success);color:#fff;display:grid;place-items:center;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35),0 2px 8px rgba(0,166,80,.35)}
.mp-tier-badge .check{width:14px;height:14px;stroke-dasharray:40;stroke-dashoffset:40;transition:stroke-dashoffset .55s ease .1s}
.mp-tier-badge.on{transform:translateY(0) scale(1);opacity:1}
@keyframes mp-pop{0%{transform:scale(.6)}60%{transform:scale(1.12)}100%{transform:scale(1)}}

/* Acciones del modal pegadas abajo */
.popup-actions {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: #fff; /* opaco total */
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 16px rgba(2,6,23,.08);
  margin: 0; /* elimina margen lateral */
  border-radius: 0; /* sin esquinas redondeadas para que ocupe todo */
  z-index: 50;
}

/* Cerrar */
#closePopup{
  position:absolute;
  top:10px;
  right:10px;
  width:36px;
  height:36px;
  border-radius:8px;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
  font-size:22px;
  line-height:1;
  z-index: 6;             /* sobre el scroll/desc */
}

/* =============================================================================
   Descripción con scroll propio
============================================================================= */
#popup-desc-wrap[hidden]{ display:none; }

.popup-desc-wrap{
  max-height: 200px;
  min-height: 100px;
  overflow: auto;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow-sm),
              inset 0 8px 8px -8px rgba(2,6,23,.06),
              inset 0 -8px 8px -8px rgba(2,6,23,.06);
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
margin-bottom: clamp(12px, 1vw, 1px);

}
.popup-desc-wrap:hover{ box-shadow: var(--shadow-md),
                                   inset 0 8px 8px -8px rgba(2,6,23,.06),
                                   inset 0 -8px 8px -8px rgba(2,6,23,.06); }
.popup-desc-wrap::-webkit-scrollbar{ width: 10px; }
.popup-desc-wrap::-webkit-scrollbar-track{ background: transparent; }
.popup-desc-wrap::-webkit-scrollbar-thumb{
  background: #cfd6df;
  border-radius: 999px;
  border: 2px solid #fff;
}
.popup-desc-wrap::-webkit-scrollbar-thumb:hover{ background: #b7c0cc; }

.popup-desc-wrap {
  max-height: 200px;
  min-height: 100px;
  overflow: auto;
  padding: 0; /* asegurás que no haya padding interno */
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow-sm),
              inset 0 8px 8px -8px rgba(2,6,23,.06),
              inset 0 -8px 8px -8px rgba(2,6,23,.06);
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}


.popup-desc-title{
  position: sticky;
  top: 0;
  margin: 0;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0px;
  color: #0f172a;
  background: linear-gradient(180deg,#ffffff,#f8fafc);
  z-index: 2;
  border-bottom: 1px solid var(--border);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  box-shadow: 0 1px 0 rgba(2,6,23,.04);
}
.popup-desc-title::before{ content:"📝"; margin-right:6px; opacity:.75; }

.popup-desc{
  padding: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: #334155;
  white-space: pre-line;
}

/* =============================================================================
   Variantes (selector de “variable”)
============================================================================= */
.variant-row{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:6px;
}
.variant-row label{
  font-size:13px;
  color:#334155;
  font-weight:600;
}
.variant-select{
  appearance:none;
  width:100%;
  padding:11px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  outline:none;
  transition:border-color .18s, box-shadow .18s;
  font-size:16px; /* evita zoom en iOS */
}
.variant-select:focus{
  border-color:#9bdcf6;
  box-shadow:0 0 0 3px rgba(0,177,234,.18);
}
.variant-help{
  font-size:12px;
  color:#64748b;
}

/* =============================================================================
   Carrito (drawer)
============================================================================= */
#cartOverlay,.cart-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .2s;z-index:1000}
#cartOverlay.on,.cart-overlay.on{opacity:1;pointer-events:auto}
#cartDrawer,.cart-drawer{position:fixed;top:0;right:0;width:min(420px,96vw);height:100%;background:#fff;border-left:1px solid var(--border);box-shadow:var(--shadow-lg);transform:translateX(100%);transition:transform .28s ease;z-index:1001;display:flex;flex-direction:column}
#cartDrawer.on,.cart-drawer.on{transform:translateX(0)}
.cart-header{display:flex;justify-content:space-between;align-items:center;padding:14px;border-bottom:1px solid var(--border)}
.cart-items{flex:1;overflow:auto;padding:10px}
.cart-item{display:grid;grid-template-columns:72px 1fr;gap:10px;padding:10px;border:1px solid var(--border);border-radius:12px;margin-bottom:10px}
.ci-thumb{ width:72px; height:72px; }
.ci-thumb{background:#f2f6fb;border:1px solid var(--border);border-radius:10px;display:flex;align-items:center;justify-content:center}
.ci-thumb img{max-width:95%;max-height:95%;object-fit:contain}
.ci-name{font-weight:700}
.ci-meta{font-size:12px;color:var(--muted)}
.ci-controls{display:flex;gap:8px;align-items:center;margin-top:6px;flex-wrap:wrap}
.ci-qty{width:60px;text-align:center;padding:8px;border:1px solid var(--border);border-radius:8px;background:#fff}
.ci-btn{padding:8px 10px;border:1px solid var(--border);background:#fff;border-radius:8px;cursor:pointer}
.ci-remove{margin-left:auto;background:#fff;border:1px solid #fecaca;color:#b91c1c;border-radius:8px;padding:8px 10px}
.ci-total{font-weight:700}
.cart-footer{border-top:1px solid var(--border);padding:12px;display:flex;flex-direction:column;gap:10px;background:#fafafa}
.cart-subtotal{display:flex;justify-content:space-between;align-items:center}
.cart-actions{display:flex;gap:10px}

/* Burbuja de grupo igual a las demás, pero más compacta */
.cart-item.cart-item--group {
  padding: 8px 10px;      /* más chico que el default */
  margin-bottom: 8px;     /* menos separación entre items */
}

/* Lista de variantes pedidas dentro del grupo (compacta y prolija) */
.cart-item--group .cart-group-variants {
  list-style: none;
  margin: 6px 0 0;
  padding: 6px 0 0;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--muted);
}
.cart-item--group .cart-group-variants li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 0;
}












/* === Cart: grupos en la misma “burbuja” y más compactos === */
.cart-item.cart-item--group{
  padding:8px 10px;
  margin-bottom:8px;
}
.cart-item--group .ci-info{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.cart-item--group .ci-name{
  /* que herede EXACTAMENTE el estilo de .ci-name normal */
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  margin: 0;
}


.cart-item--group .ci-meta{ font-size:12px; color:var(--muted); }
.cart-item--group .ci-thumb{ width:72px; height:72px; }

/* lista compacta de variantes dentro del grupo */
.cart-item--group .cart-group-variants{
  list-style:none;
  margin:6px 0 0;
  padding:6px 0 0;
  border-top:1px solid var(--border);
  font-size:12px;
  color:var(--muted);
}
.cart-item--group .cart-group-variants li{
  display:flex; justify-content:space-between; gap:8px; padding:2px 0;
}

/* ===== Controles: fila 1 a la derecha (− qty +), fila 2 precio centrado + Quitar a la derecha ===== */
.ci-controls{
  display:grid;
  /* 1fr empuja el trio a la derecha */
  grid-template-columns: 1fr 32px 60px 32px;  /* [spacer] [−] [qty] [+] */
  grid-auto-rows:auto;
  align-items:center;
  column-gap:6px;
  row-gap:6px;
  width:100%;
}

/* Botones chicos y consistentes */
.ci-controls .ci-btn{
  padding:0;
  width:32px; height:32px;
  display:grid; place-items:center;
  border-radius:8px;
  line-height:1;
}

/* Orden y posiciones (fila 1) */
.ci-controls .ci-dec{ grid-column:2; grid-row:1; }
.ci-controls .ci-qty{
  grid-column:3; grid-row:1;
  width:60px; height:32px;
  text-align:center;
  padding:0 6px;
}
.ci-controls .ci-inc{ grid-column:4; grid-row:1; }

/* Fila 2 */
/* Precio en los productos (fila principal): centrado y sin pisar "Quitar" */
.ci-controls .ci-total{
  grid-column: 1 / 4;       /* ocupa hasta antes del botón Quitar */
  grid-row: 2;
  justify-self: center;
  text-align: center;
  white-space: nowrap;
  min-width: 9rem;          /* un poco más de ancho para que no toque el botón */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}



.ci-controls .ci-remove{
  margin-left: 0;
  grid-column:4; grid-row:2;
  justify-self:end;
}



/* En grupos, mismo layout/tamaños para cada subfila de variante */
.cart-group .ci-subrow .ci-controls{

  display:grid;
  grid-template-columns: 1fr 32px 60px 32px;
  grid-auto-rows:auto;
  align-items:center;
  column-gap:6px;
  row-gap:6px;

 grid-column: 2;
  width: 100%;
}
.cart-group .ci-subrow .ci-controls .ci-btn{
  padding:0; width:32px; height:32px; display:grid; place-items:center; border-radius:8px; line-height:1;
}

.cart-group .ci-subrow{
  display: grid;
  grid-template-columns: 1fr 260px; /* izq: nombre flexible / der: controles fijo */
  column-gap: 12px;
  align-items: center;
}







.cart-group .ci-subrow .ci-controls .ci-dec{ grid-column:2; grid-row:1; }
.cart-group .ci-subrow .ci-controls .ci-qty{
  grid-column:3; grid-row:1;
  width:60px; height:32px; text-align:center; padding:0 6px;
}
.cart-group .ci-subrow .ci-controls .ci-inc{ grid-column:4; grid-row:1; }
.cart-group .ci-subrow .ci-controls .ci-total{
  grid-column: 1 / 4;     /* hasta antes del botón */
  grid-row: 2;
  justify-self: end;      /* borde derecho del precio = borde izq del botón */
  text-align: right;
  white-space: nowrap;
  min-width: 9.5rem;
  padding-right: 6px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.cart-group .ci-subrow .ci-controls .ci-remove{
  grid-column: 4; grid-row: 2;
  justify-self: start;
  margin-left: 0 !important;
}

/* Pequeño ajuste en móviles */
@media (max-width:380px){
  .ci-controls,
  .cart-group .ci-subrow .ci-controls{
    grid-template-columns: 1fr 30px 54px 30px;
    column-gap:6px;
  }
  .ci-controls .ci-btn,
  .cart-group .ci-subrow .ci-controls .ci-btn{
    width:30px; height:30px;
  }
  .ci-controls .ci-qty,
  .cart-group .ci-subrow .ci-controls .ci-qty{
    width:54px; height:30px;
  }
}





/* =============================================================================
   Toast
============================================================================= */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%, 16px);opacity:0;pointer-events:none;z-index:1100;transition:opacity .22s, transform .22s}
.toast.on{opacity:1;transform:translate(-50%, 0);pointer-events:auto}
.toast-card{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;min-width:320px;max-width:92vw;background:#fff;border:1px solid var(--border);border-radius:14px;padding:12px 14px;box-shadow:var(--shadow-lg);backdrop-filter:saturate(120%) blur(6px)}
.toast-icon{width:28px;height:28px;display:grid;place-items:center;border-radius:999px;color:#fff;background:var(--success);box-shadow:inset 0 0 0 2px rgba(255,255,255,.35),0 2px 10px rgba(0,166,80,.25)}
.toast-card.info .toast-icon{background:var(--brand)}
.toast-card.error .toast-icon{background:var(--danger)}
.toast-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.toast-body strong{font-size:14px;line-height:1.2;color:#0b3b66}
.toast-body span{font-size:12px;color:#475569;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.toast-actions{display:flex;align-items:center;gap:6px}
.toast-actions .small{padding:6px 10px;border-radius:999px;font-size:12px}
.toast-actions .icon{width:32px;height:32px;padding:0;border-radius:8px;font-size:18px;line-height:1}
.toast-progress{position:absolute;left:0;bottom:0;height:3px;width:0;background:linear-gradient(90deg,var(--brand),var(--brand-700));border-bottom-left-radius:14px;border-bottom-right-radius:14px}

/* =============================================================================
   Skeletons
============================================================================= */
.skeleton{position:relative;overflow:hidden;background:#eef2f7}
.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:shimmer 1.2s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}
.skel-card{background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-sm)}
.skel-thumb{aspect-ratio:1/1}
.skel-lines{padding:12px;display:grid;gap:8px}
.skel-line{height:12px;border-radius:6px}

/* =============================================================================
   Custom SELECT (ordenamiento)
============================================================================= */
.select{position:relative}
.select-toggle{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-width:220px;padding:10px 14px;border:0;border-radius:999px;background:#fff;
  color:#0b3b66;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),0 4px 10px rgba(0,0,0,.06);
  transition:box-shadow .2s, transform .08s ease; cursor:pointer
}
.select-toggle::after{
  content:""; width:10px; height:10px; margin-left:8px;
  mask:conic-gradient(from 45deg, #000 0 25%,transparent 0 100%); -webkit-mask:conic-gradient(from 45deg, #000 0 25%,transparent 0 100%);
  background:#0b3b66; transform:rotate(135deg); transition:transform .18s ease
}
.select.open .select-toggle{box-shadow:0 0 0 3px rgba(0,177,234,.25), inset 0 0 0 1px var(--brand-600)}
.select.open .select-toggle::after{transform:rotate(-45deg)}
.select-toggle:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(0,177,234,.25), inset 0 0 0 1px var(--brand-600)}
.select-toggle:active{transform:translateY(1px)}

.select-menu{
  position:absolute; top:calc(100% + 8px); right:0; width:240px; max-height:60vh; overflow:auto;
  background:#fff; border:1px solid var(--border); border-radius:14px; padding:6px;
  box-shadow:var(--shadow-lg);
  transform-origin:top right; transform:translateY(6px) scale(.98);
  opacity:0; pointer-events:none; transition:opacity .14s ease, transform .14s ease; z-index:40
}
.select.open .select-menu{opacity:1; transform:translateY(0) scale(1); pointer-events:auto}
.select-menu li{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px; border-radius:10px; cursor:pointer; color:#0b3b66;
  transition:background .12s ease, color .12s ease
}
.select-menu li:hover,.select-menu li:focus-visible{background:#f0f7ff;outline:none}
.select-menu li.active{background:#e6f4ff; font-weight:700}
.select-menu li.active::after{
  content:"✔"; font-size:12px; color:#0b5e36; background:#e8fff4; border:1px solid #c6f2de;
  padding:2px 6px; border-radius:999px
}
.select-menu::-webkit-scrollbar{width:10px}
.select-menu::-webkit-scrollbar-thumb{background:#e5e7eb;border-radius:999px}

/* =============================================================================
   Checkout
============================================================================= */
#checkoutOverlay{position:fixed;inset:0;background:rgba(2,6,23,.55);backdrop-filter:saturate(120%) blur(3px);display:none;align-items:center;justify-content:center;padding:16px;z-index:1200}
#checkoutOverlay.on{display:flex}
.checkout-card{width:min(980px,96vw);background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;max-height:92vh}
.checkout-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border)}
.ck-body{padding:14px 16px;overflow:auto}
.ck-total{display:flex;align-items:center;justify-content:space-between;background:#f8fafc;border:1px solid var(--border);border-radius:12px;padding:10px 12px;margin-bottom:12px}
.ck-total strong{font-size:22px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{display:flex;flex-direction:column;gap:6px}
.field.col-2{grid-column:1/-1}
.field label{font-size:13px;color:#334155;font-weight:600}
.field input,.field select,.field textarea{padding:11px 12px;border:1px solid var(--border);border-radius:10px;background:#fff;outline:none;transition:border-color .18s, box-shadow .18s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:#9bdcf6;box-shadow:0 0 0 3px rgba(0,177,234,.18)}
.ck-check{display:flex;align-items:center;gap:10px;font-weight:600}
.facturacion{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.facturacion.hidden{display:none}
.ck-actions{display:flex;justify-content:flex-end;gap:10px;padding-top:10px}
.spinner{width:16px;height:16px;border-radius:50%;border:2px solid #fff;border-right-color:transparent;display:inline-block;margin-left:8px;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ck-done{padding:24px 16px;text-align:center}
.done-ico{width:64px;height:64px;margin:6px auto 12px;border-radius:50%;display:grid;place-items:center;background:#e8fff4;color:#0b5e36;font-size:28px;border:1px solid #c6f2de;box-shadow:0 8px 22px rgba(0,166,80,.12)}

/* =============================================================================
   Accesibilidad / focus visibles
============================================================================= */
.card a:focus-visible,.btn:focus-visible,.btn-ghost:focus-visible,.search input:focus-visible,.sort-wrap select:focus-visible,#quantity-input:focus-visible,.variant-select:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(0,177,234,.25)!important}

/* =============================================================================
   Responsive
============================================================================= */
@media (max-width:1100px){
  .topbar{grid-template-columns:1fr;row-gap:10px}
  .actions{justify-self:stretch}
}
@media (max-width:900px){
  .layout{grid-template-columns:1fr}
  #popup-content{width:96vw;  max-height: 95vh;}
  .popup-body{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .facturacion{grid-template-columns:1fr}
  .popup-desc-wrap{ max-height:200px; min-height:150px; 
  }
}

/* =============================================================================
   UX móvil: evitar zoom involuntario y toques fantasma
============================================================================= */
html, body, #popupOverlay, #popup-content,
button, .btn, a, [role="button"] {
  touch-action: manipulation;
}
input, select, textarea, button { font-size:16px; } /* evita zoom de Safari */
.no-zoom{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  user-select:none; -webkit-user-select:none;
}


/* Más chico y angosto para el selector de orden */
#sortCustom .select-toggle{
  padding: 6px 12px;     /* alto y ancho interno */
  font-size: 14px;       /* tamaño del texto */
  min-width: 130px;      /* ancho mínimo del “pastilla” */
  height: 40px;          /* fuerza altura consistente */
}

/* Iconito más chico y con menos separación */
#sortCustom .select-toggle svg{
  width: 14px;
  height: 14px;
  margin-left: 6px;
}

/* Ajustá también el panel del menú si querés que acompañe */
#sortCustom .select-menu{
  width: 200px;          /* opcional: más angosto que el default */
}





/* === Selector de variables en el modal === */
#popup-content .variant-select,
#popup-content select#variant-select.variant-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #fff;
  border: 1px solid #d0d5dd;
  border-radius: 10px;
  padding: 10px 40px 10px 12px;
  font-size: 14px;
  line-height: 1.2;
  color: #111827;
  box-shadow: 0 2px 6px rgba(16,24,40,.06);
  min-width: 200px;
  cursor: pointer;
  transition: box-shadow .15s ease, border-color .15s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%236b7280' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
}
#popup-content .variant-select:hover { border-color:#00B1EA; box-shadow:0 3px 10px rgba(0,177,234,.15); }
#popup-content .variant-select:focus { outline:0; border-color:#0096c7; box-shadow:0 0 0 3px rgba(0,150,199,.2); }
#popup-content .field label[for="variant-select"] { display:block; margin-bottom:6px; font-weight:600; color:#374151; }