/* ===== Wrapper ===== */
.cb-wrap { background:#f9f9f9; padding:20px; border-radius:8px; margin-bottom:20px; }

/* ===== Fila medidas ===== */
.cb-row { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.cb-row-measures{ display:grid; grid-template-columns: repeat(3, minmax(160px, 220px)); gap:12px; align-items:end; margin-bottom:10px; }
@media (max-width: 900px){ .cb-row-measures{ grid-template-columns: repeat(2, minmax(160px,1fr)); } }
@media (max-width: 560px){ .cb-row-measures{ grid-template-columns: 1fr; } }

.cb-field { display:flex; flex-direction:column; min-width:160px; }
.cb-field label { margin-bottom:5px; font-weight:bold; }
.cb-field select { width:100%; padding:8px; border-radius:4px; border:1px solid #ccc; background:#fff; }

/* ===== Filtros tipos ===== */
.cb-filters { display:flex; flex-direction:column; gap:10px; border-top:1px solid #eee; padding-top:10px; width:100%; }
.cb-checks { display:flex; gap:14px; flex-wrap:wrap; }
.cb-check { display:flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid #e5e7eb; border-radius:999px; background:#fafafa; }
.cb-check.cb-faded { opacity:.4; }

/* ===== Botón buscar (oculto) ===== */
.cb-search-bottom{ display:none !important; }
#cb-buscador #cb-search{ padding:10px 16px; border:0; border-radius:8px; background:#111; color:#fff; font-weight:700; cursor:pointer; }
#cb-buscador #cb-search[disabled]{ opacity:.5; cursor:not-allowed; }

/* ===== Toolbar (vista + orden bajo vista, a la izquierda) ===== */
.cb-toolbar{ display:flex; justify-content:flex-start; align-items:flex-start; margin:8px 0 10px; }
.cb-toolbar-left{ display:flex; flex-direction:column; gap:8px; }
.cb-viewtoggle{ display:flex; gap:8px; }
.cb-view-btn{ padding:8px 12px; border:1px solid #ddd; background:#fff; border-radius:8px; cursor:pointer; font-weight:600; }
.cb-view-btn.is-active{ background:#111; color:#fff; border-color:#111; }

.cb-sort{ display:flex; align-items:center; gap:6px; }
.cb-sort label{ font-weight:600; }
.cb-sort select{ padding:8px; border:1px solid #ccc; border-radius:6px; background:#fff; }

/* ===== Resultados grid/list ===== */
.cb-results{ display:grid; gap:14px; margin-top:10px; }
.cb-results[data-view="grid"]{ grid-template-columns: repeat(2, minmax(320px, 1fr)); }
.cb-results[data-view="list"]{ grid-template-columns: 1fr; }
@media (max-width: 640px){
  .cb-results[data-view="grid"]{ grid-template-columns: 1fr; }
}

/* ===== Tarjeta producto ===== */
.cb-card{ display:flex; align-items:flex-start; background:#fafafa; padding:12px; border-radius:6px; border:1px solid #eee; gap:12px; }

/* Imagen miniatura (estilo genérico; será sobrescrito por los estilos de #cb-results) */
.cb-img img{ width:90px; height:auto; border:1px solid #ccc; border-radius:4px; object-fit:cover; display:block; }

/* Info */
.cb-info{ flex:1; }
.cb-title{ font-weight:600; display:block; margin-bottom:5px; color:#0a66c2; text-decoration:none; }
.cb-title:hover{ text-decoration:underline; }

/* ===== Bloque meta: logo izq + texto der ===== */
.cb-meta{ display:flex; align-items:center; gap:12px; margin:2px 0 6px; }
.cb-meta-logo{ display:flex; align-items:center; justify-content:center; }
.cb-brand-logo{ width:60px; height:auto; border:1px solid #e5e7eb; border-radius:6px; display:block; } /* logo + grande */
.cb-meta-info{ display:flex; flex-direction:column; gap:2px; }
.cb-meta-line{ display:flex; align-items:center; gap:6px; font-size:.92rem; color:#6b7280; }
.cb-meta-label{ font-weight:600; color:#6b7280; }
.cb-ref-link{ color:#0a66c2; text-decoration:none; font-weight:600; }
.cb-ref-link:hover{ text-decoration:underline; }

/* Descripción completa */
#cb-results .cb-desc{ color:#4b5563; font-size:.95rem; margin-top:4px; display:block; overflow:visible; white-space:normal; word-break:break-word; }

/* Precios */
.cb-price{ display:flex; gap:8px; align-items:baseline; margin:6px 0 4px; flex-wrap:wrap; }
.cb-price-regular{ color:#9ca3af; text-decoration:line-through; font-size:.98rem; }
.cb-price-final{ color:#d60000; font-weight:700; font-size:1.02rem; }
.cb-price-discount{ color:#d60000; font-weight:700; font-size:.98rem; }

/* Stock */
.cb-stock{ font-size:.92rem; color:#6b7280; }
.cb-stock.out{ color:#b91c1c; }

/* Acciones */
.cb-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:6px; }
.cb-qty{ display:inline-flex; align-items:center; gap:6px; border:1px solid #ccc; border-radius:4px; background:#fff; padding:2px; }
.cb-qty-input{ width:56px; padding:6px 8px; border:none; outline:none; text-align:center; }
.cb-qty-btn{ appearance:none; -webkit-appearance:none; border:none; background:#f0f0f0; padding:6px 10px; cursor:pointer; border-radius:4px; font-weight:700; line-height:1; }
.cb-qty-btn:hover{ filter:brightness(.95); }

.cb-btn-add{ padding:10px 16px; border:1px solid #000; border-radius:6px; background:#000; color:#fff; font-weight:700; cursor:pointer; }
.cb-btn-add[disabled]{ opacity:.6; cursor:not-allowed; }

.cb-btn{ display:inline-block; padding:10px 14px; border:1px solid #ddd; border-radius:6px; background:#fff; color:#333; font-weight:600; text-decoration:none; }
.cb-btn:hover{ background:#f2f2f2; }

/* Estados */
.cb-loading, .cb-empty, .cb-error{ padding:12px; background:#fafafa; border:1px dashed #ddd; border-radius:8px; }

/* Toast */
.cb-toast{ position:fixed; left:50%; top:20px; transform:translateX(-50%); background:#111; color:#fff; padding:10px 14px; border-radius:6px; opacity:0; pointer-events:none; transition:.25s ease; z-index:9999; }
.cb-toast.show{ opacity:1; }
.cb-toast.error{ background:#c00; }

/* ===== Marca / tooltip ===== */
.cb-brand{ display:inline-flex; align-items:center; gap:6px; position:relative; }
.cb-brand::after{ content:none !important; } /* evita iconos de ¿? del tema */
.cb-tip{
  position:absolute;
  z-index:9999;
  background:#111; color:#fff;
  padding:8px 10px; border-radius:6px; max-width:360px; font-size:.92rem;
  box-shadow:0 8px 20px rgba(0,0,0,.15);
  pointer-events:none; opacity:0; transition:opacity .12s ease;
}
.cb-tip.show{ opacity:1; }

/* ===== Modal imagen grande ===== */
.cb-img-modal{ position:fixed; inset:0; display:none; z-index:9998; }
.cb-img-modal.show{ display:block; }
.cb-img-modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.6); }
.cb-img-modal-dialog{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  background:#000; padding:10px; border-radius:8px; max-width:90vw; max-height:90vh;
}
.cb-img-modal-img{ display:block; max-width:86vw; max-height:80vh; }
.cb-img-modal-close{
  position:absolute; right:-10px; top:-10px;
  width:36px; height:36px; border-radius:999px; border:none;
  background:#fff; color:#111; font-size:22px; font-weight:700; cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}

/* ===== Aislar estilos dentro del wrapper ===== */
#cb-buscador, #cb-buscador * { box-sizing: border-box; }
#cb-buscador .cb-card{ background:#fafafa !important; border:1px solid #eee !important; border-radius:6px !important; }
#cb-buscador .cb-btn-add{ border:1px solid #000 !important; background:#000 !important; color:#fff !important; border-radius:6px !important; font-weight:700 !important; }
#cb-buscador .cb-btn{ border:1px solid #ddd !important; background:#fff !important; color:#333 !important; border-radius:6px !important; font-weight:600 !important; }
#cb-buscador select, #cb-buscador input[type="number"], #cb-buscador .cb-qty-btn{
  -webkit-appearance:none; appearance:none; background:#fff !important; color:#333 !important; border:1px solid #ccc !important; border-radius:4px !important;
}
#cb-buscador .cb-empty, #cb-buscador .cb-loading, #cb-buscador .cb-error{
  background:#fafafa !important; border:1px dashed #ddd !important; color:#333 !important;
}

/* ====== Medidas por llanta en ficha ====== */
.cb-measures{ margin-top:14px; }
.cb-measures-ref{ margin:8px 0 10px; font-size:1.02rem; }

.cb-mgrid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap:12px;
}
.cb-mcol{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:10px;
  box-shadow:0 1px 2px rgba(16,24,40,.06);
  padding:10px;
}
.cb-mcol-title{
  font-weight:700;
  margin-bottom:8px;
  color:#111;
}
.cb-mcol-list{
  list-style:none;
  padding:0; margin:0;
  display:flex; flex-direction:column; gap:6px;
}
.cb-mpill{
  display:inline-block;
  background:#f7f7f7;
  border:1px solid #e5e7eb;
  border-radius:999px;
  padding:6px 10px;
  font-size:.95rem;
  color:#374151;
  white-space:nowrap;
}

/* ===== Tabla de medidas en ficha dentro de la descripción ===== */
#cb-measures-block { margin-top: 16px; }
#cb-measures-block h3 { margin-bottom: 8px; }
.cb-measures-note { margin-bottom: 8px; color:#555; font-size:.95rem; }

.cb-measures-table-inline th, 
.cb-measures-table-inline td { 
  vertical-align: top; 
}
.cb-sizes-list { 
  margin: 0; 
  padding-left: 18px; 
  list-style: disc; 
}
.cb-sizes-list li { margin: 2px 0; }

.cb-metal-warning{
  margin:8px 0;
  padding:8px 10px;
  border:1px solid rgba(0,0,0,.08);
  border-left:4px solid #b45309;
  background:#fff7ed;
  line-height:1.35;
}

/* ======== Modernización resultados ======== */

/* grid responsive del contenedor de resultados */
#cb-results[data-view="grid"]{
  display: grid;
  grid-template-columns: repeat(2, 1fr) !important;  /* 2 columnas fijas */
  gap: 16px;
}
@media (max-width: 900px){
  #cb-results[data-view="grid"]{ grid-template-columns: 1fr !important; }
}

/* tarjeta base */
#cb-results .cb-card{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 6px rgba(0,0,0,.04);
  transition: transform .12s ease, box-shadow .12s ease;
}
#cb-results .cb-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
}

/* --- NUEVO: estructura interna para evitar la "tercera columna" --- */
/* En vista GRID la tarjeta es vertical (media arriba, info abajo) */
#cb-results[data-view="grid"] .cb-card{ display:block !important; }
#cb-results .cb-media{ display:flex; flex-direction:column; }

/* En vista LISTA la tarjeta son 2 columnas: media izquierda + info derecha */
#cb-results[data-view="list"] .cb-card{ display:grid !important; grid-template-columns: 260px 1fr; gap:16px; }
#cb-results[data-view="list"] .cb-media{ grid-column: 1 / 2; }
#cb-results[data-view="list"] .cb-info{ grid-column: 2 / 3; }

/* imagen con ratio fijo y badge de descuento */
#cb-results .cb-img{
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;           /* evita saltos de layout */
  background: #f6f7f9;
}
#cb-results .cb-img img{
  width: 100%; height: 100%; object-fit: contain;
}

/* badge de descuento SOLO sobre la foto */
#cb-results .cb-img .cb-badge-discount{
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 8px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .85rem;
  background: #ef4444;
  color: #fff;
  box-shadow: 0 2px 8px rgba(239,68,68,.35);
}
/* badge "Envío gratis" SOLO sobre la foto (lado derecho) */
#cb-results .cb-img .cb-badge-ship{
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 8px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .85rem;
  background: #10b981;   /* verde */
  color: #fff;
  box-shadow: 0 2px 8px rgba(16,185,129,.35);
  white-space: nowrap;
}
/* neutraliza el % en el bloque de precio, si existiera */
#cb-results .cb-price .cb-price-discount{
  position: static !important;
  background: none !important;
  color: #9ca3af !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: none !important;
}

/* contenido */
#cb-results .cb-info{ padding: 12px 14px 14px; }
#cb-results .cb-title{
  display: block; font-size: 1rem; line-height: 1.3;
  font-weight: 600; margin-bottom: 6px; color: #111827;
  text-decoration: none;
}
#cb-results .cb-title:hover{ text-decoration: underline; }

/* meta fabricante */
#cb-results .cb-meta{ display: grid; grid-template-columns: 56px 1fr !important; gap: 10px; align-items: start; margin: 6px 0 8px; }
#cb-results .cb-meta-logo img{ width: 56px !important; height: 56px !important; object-fit: contain; filter: saturate(.9); }
#cb-results .cb-meta-label{ color:#6b7280; font-size:.85rem; margin-right:6px; }
#cb-results .cb-ref-code .cb-ref-link{ color:#374151; }

/* aviso metálicas */
#cb-results .cb-metal-warning{
  margin: 8px 0; padding: 8px 10px;
  border: 1px solid rgba(0,0,0,.08);
  border-left: 4px solid #b45309;
  background: #fff7ed; line-height: 1.35;
  border-radius: 8px;
}

/* descripción compacta */
#cb-results .cb-desc{
  color:#374151; font-size:.92rem; line-height:1.45;
  margin: 6px 0 10px;
}

/* bloque de precio */
#cb-results .cb-price{
  display:flex; align-items:baseline; gap:8px; margin: 4px 0 6px;
}
#cb-results .cb-price-final{ font-size:1.25rem; font-weight:700; color:#111827; }
#cb-results .cb-price-regular{
  color:#9ca3af; text-decoration: line-through; font-size:.95rem;
}

/* stock pill */
#cb-results .cb-stock{ display:inline-block; padding:3px 8px; border-radius:999px; font-size:.8rem; font-weight:600; }
#cb-results .cb-stock.in{ background:#ecfdf5; color:#065f46; }
#cb-results .cb-stock.out{ background:#fef2f2; color:#991b1b; }

/* acciones */
#cb-results .cb-actions{ display:flex; gap:10px; align-items:center; margin-top: 10px; flex-wrap:wrap; }
#cb-results .cb-qty{ display:flex; align-items:center; gap:6px; background:#f3f4f6; border-radius:12px; padding:4px; }
#cb-results .cb-qty-input{ width:54px; text-align:center; border:0; background:transparent; font-weight:600; }
#cb-results .cb-qty-btn{ width:28px; height:28px; border:0; background:#fff; border-radius:8px; box-shadow:0 1px 2px rgba(0,0,0,.06); cursor:pointer; }
#cb-results .cb-qty-btn:active{ transform: translateY(1px); }

#cb-results .cb-btn-add{
  appearance:none; border:0; border-radius:10px;
  background:#111827; color:#fff; padding:10px 14px;
  font-weight:700; cursor:pointer; flex:1;
}
#cb-results .cb-btn-add[disabled]{ opacity:.5; cursor:not-allowed; }
#cb-results .cb-btn{ 
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid #e5e7eb; border-radius:10px; padding:10px 14px;
  background:#fff; color:#111827; text-decoration:none;
}

/* móvil: botones a ancho completo */
@media (max-width: 640px){
  #cb-results .cb-actions{ flex-direction:column; align-items:stretch; }
  #cb-results .cb-btn-add, #cb-results .cb-btn{ width:100%; }
}

/* vista lista */
#cb-results[data-view="list"] .cb-card{ display:grid; grid-template-columns: 220px 1fr; }
@media (max-width: 900px){
  #cb-results[data-view="list"] .cb-card{ grid-template-columns: 1fr; }
}

/* loader */
#cb-results .cb-loading{
  padding:20px; border:1px dashed #e5e7eb; border-radius:12px; text-align:center; color:#6b7280;
}

/* ===== Compartir (debajo de la foto, con iconos) ===== */
#cb-results .cb-share{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  padding:8px 12px; border-top:1px solid rgba(0,0,0,.06);
}
#cb-results .cb-share a,
#cb-results .cb-share button{
  appearance:none; border:1px solid #e5e7eb; background:#fff; color:#111827;
  border-radius:999px; padding:6px 10px; font-size:.85rem; line-height:1; cursor:pointer;
  text-decoration:none; display:inline-flex; align-items:center; gap:6px;
}
#cb-results .cb-share .cb-share-native{
  background:#111827; color:#fff; border-color:#111827;
}
#cb-results .cb-share button.cb-share-copy{ border-style:dashed; }
#cb-results .cb-share a:hover,
#cb-results .cb-share button:hover{ filter:brightness(.95); }
#cb-results .cb-share svg{ width:16px; height:16px; display:block; }
/* === FORZAR 2 COLUMNAS DENTRO DE CADA TARJETA TAMBIÉN EN GRID === */
/* Tarjeta en GRID: 2 columnas (media izquierda + info derecha) */
#cb-results[data-view="grid"] .cb-card{
  display: grid !important;
  grid-template-columns: 260px 1fr;  /* ancho fijo de columna izquierda */
  gap: 16px;
}

/* Mantén la estructura interna: media (foto+compartir) encima/izq, info a la derecha */
#cb-results .cb-media{ 
  display: flex; 
  flex-direction: column; 
  grid-column: 1 / 2;
}
#cb-results .cb-info{ 
  grid-column: 2 / 3; 
}

/* En LIST ya lo tenías en 2 columnas; dejamos igual o igualamos a 260px si prefieres */
#cb-results[data-view="list"] .cb-card{
  display: grid !important;
  grid-template-columns: 260px 1fr;  /* si quieres dejar 220px, cambia aquí */
  gap: 16px;
}

/* Responsive: en pantallas pequeñas, ambas vistas se apilan a 1 columna */
@media (max-width: 900px){
  #cb-results[data-view="grid"] .cb-card,
  #cb-results[data-view="list"] .cb-card{
    grid-template-columns: 1fr !important;
  }
  /* cuando hay 1 columna, que ambos bloques ocupen todo el ancho en orden natural */
  #cb-results .cb-media,
  #cb-results .cb-info{
    grid-column: 1 / -1;
  }
}

/* (opcional) si el texto de compartir te rompe altura, evita que se encoja la columna izq */
#cb-results .cb-media { min-width: 0; }
#cb-results .cb-info  { min-width: 0; }

/* META adaptable: la 1ª columna se ajusta al ancho del logo */
#cb-results .cb-meta{
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  gap: 10px !important;
  align-items: start !important;
}
#cb-results .cb-meta-logo img{
  width: 72px !important;   /* pon el tamaño que quieras */
  height: 72px !important;
  object-fit: contain;
}
/* La fila del meta sigue en grid, y centramos el bloque derecho */
#cb-results .cb-meta-info{
  align-self: center !important;
}