/* ============================================================
   Agripar — carrusel de categorías + card de producto
   Portado del rediseño de TAZ Motos (public/taz-loja.css) con la
   paleta de Agripar. Hoja estática a propósito: el server no
   recompila Tailwind, así que nada de acá depende del build.
   ============================================================ */

:root{
  --ag-red:      #D91E1E;
  --ag-red-d:    #B71818;
  --ag-line:     #CFCFD4;
  --ag-ink:      #212529;
  --ag-green:    #2BA24A;
  --ag-green-d:  #208a3e;
  --ag-radius:   16px;
}

/* ============================================================
   1. CARRUSEL DE CATEGORÍAS
   ============================================================ */
.ag-catwrap{
  width:min(1320px, calc(100% - 56px));
  margin:24px auto 0;
  background:#f4f5f7;
  border-radius:18px;
  padding:12px 20px 8px;
  box-shadow:0 -2px 18px rgba(0,0,0,.06);
}
.ag-catsec{padding:20px 0 10px}
.ag-sec-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.ag-h{font-size:22px;font-weight:800;color:var(--ag-ink);display:flex;align-items:center;gap:10px;margin:0}
.ag-h .ag-ico{color:var(--ag-red);display:inline-flex}
.ag-seeall{color:var(--ag-red);font-weight:700;font-size:13px;white-space:nowrap;text-decoration:none}
.ag-seeall:hover{color:var(--ag-red-d)}

.ag-cat-carousel{position:relative}
.ag-catrow{
  display:flex;gap:10px;overflow-x:auto;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px;
}
.ag-catrow::-webkit-scrollbar{display:none}

.ag-catitem{
  flex:0 0 auto;width:170px;min-width:170px;
  background:#fff;border:1px solid var(--ag-line);border-radius:12px;
  padding:16px 8px;text-align:center;display:block;color:inherit;
  text-decoration:none;transition:.15s;
}
.ag-catitem:hover{box-shadow:0 4px 14px rgba(0,0,0,.08);transform:translateY(-2px);text-decoration:none}
.ag-catitem:hover .ag-circ{border-color:var(--ag-red)}

.ag-circ{
  width:58px;height:58px;border-radius:50%;
  background:#fff;border:1px solid var(--ag-line);
  display:grid;place-items:center;margin:0 auto 8px;overflow:hidden;
  color:#c3c7cf;transition:border-color .15s ease;
}
.ag-circ img{width:100%;height:100%;object-fit:contain;padding:8px;background:#fff}

/* El nombre de la categoría ocupa siempre 2 líneas: las tarjetas
   quedan del mismo alto aunque el nombre sea corto o largo. */
.ag-catitem span.ag-catname{
  font-size:12px;font-weight:600;color:#444;display:-webkit-box;
  line-height:15px;height:30px;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

.ag-cat-arrow{
  position:absolute;top:50%;left:-4px;transform:translateY(-50%);z-index:6;
  width:36px;height:36px;border-radius:50%;
  border:1px solid var(--ag-line);background:#fff;color:var(--ag-red);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.14);transition:.15s;padding:0;
}
.ag-cat-arrow.next{left:auto;right:-4px}
.ag-cat-arrow:hover{background:var(--ag-red);color:#fff;border-color:var(--ag-red)}
.ag-cat-arrow.off{opacity:.3;pointer-events:none}

@media(max-width:768px){
  .ag-catwrap{width:calc(100% - 24px);border-radius:14px;padding:10px 12px 6px}
  .ag-cat-arrow{display:none}
  .ag-catitem{width:132px;min-width:132px}
}

/* ============================================================
   2. CARD DE PRODUCTO
   Alto uniforme: cada bloque de texto tiene ALTURA FIJA, así una
   descripción de 1 línea ocupa lo mismo que una de 3, y lo que
   pasa de 3 líneas se corta con puntos suspensivos.
   ============================================================ */
.ag-card{
  /* La grilla del listado lleva `justify-items:center` en mobile: sin un ancho
     explícito la card se dimensiona por su contenido, se pasa de la columna y
     las cards se solapan entre sí. La card vieja lo evitaba con `w-full`. */
  width:100%;max-width:100%;min-width:0;
  /* La card se mide a sí misma: los botones se apilan cuando la card es
     angosta, sin importar el ancho de la pantalla. Con media queries de
     viewport no alcanzaba (a 768px la grilla da cards de 191px y el botón
     "Consultar" se cortaba). */
  container-type:inline-size;
  background:#fff;
  border:1px solid var(--ag-line);
  border-radius:0 0 var(--ag-radius) var(--ag-radius);
  overflow:hidden;
  display:flex;flex-direction:column;height:100%;
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.ag-card:hover{
  border-color:var(--ag-red);
  box-shadow:0 12px 30px rgba(217,30,30,.18);
  transform:translateY(-4px);
}

/* --- foto --- */
.ag-card-media{
  position:relative;flex:none;
  background:linear-gradient(180deg,#fffbfb,#fff);
  padding:14px;aspect-ratio:1/1;display:block;overflow:hidden;
}
.ag-card-media img{
  width:100%;height:100%;object-fit:contain;display:block;
  transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.ag-card:hover .ag-card-media img{transform:scale(1.07)}

.ag-badges{position:absolute;top:10px;left:0;z-index:2;display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.ag-badge{
  font-size:12px;font-weight:800;letter-spacing:.2px;line-height:1.1;
  padding:5px 11px;border-radius:0 4px 4px 0;text-transform:uppercase;
  background:var(--ag-red);color:#fff;box-shadow:0 2px 6px rgba(217,30,30,.3);
}
.ag-wish{
  position:absolute;top:10px;right:10px;z-index:2;
  width:30px;height:30px;border-radius:50%;
  background:#fff;border:1px solid var(--ag-line);
  display:grid;place-items:center;color:#aab;cursor:pointer;padding:0;
  box-shadow:0 1px 5px rgba(0,0,0,.1);
}
.ag-wish:hover,.ag-wish.is-active{color:var(--ag-red);border-color:var(--ag-red)}

/* --- info --- */
.ag-card-info{padding:0 14px 16px;display:flex;flex-direction:column;flex:1 1 auto;min-width:0}

.ag-card-cat{
  font-size:11px;color:var(--ag-red);font-weight:700;
  text-transform:uppercase;letter-spacing:.03em;
  height:17px;line-height:17px;margin-bottom:4px;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}

/* 13px x 18px de interlínea x 3 líneas = 54px CLAVADOS.
   Menos de 3 líneas igual ocupa 54; más de 3 se corta con "…". */
.ag-card-name{
  font-size:13px;line-height:18px;height:54px;
  color:#444;font-weight:500;margin:0 0 6px;
  text-transform:none;letter-spacing:normal;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;text-overflow:ellipsis;
}
.ag-card-name a{color:inherit;text-decoration:none}
.ag-card-name a:hover{color:var(--ag-red)}

.ag-card-price{display:flex;align-items:baseline;gap:8px;flex-wrap:nowrap;height:30px;margin-top:2px;overflow:hidden}
.ag-card-price strong{font-size:22px;line-height:30px;font-weight:800;color:var(--ag-ink);white-space:nowrap}
.ag-card-old{font-size:13px;color:#9aa3b2;text-decoration:line-through;font-weight:600;white-space:nowrap}

.ag-card-pay{
  font-size:11.5px;line-height:16px;height:16px;margin-top:4px;
  color:#5a6473;font-weight:500;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.ag-card-pay b{color:var(--ag-red);font-weight:700}

.ag-card-stock{display:flex;align-items:center;gap:6px;font-size:10.5px;line-height:15px;height:15px;margin-top:6px}
.ag-dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--ag-green)}
.ag-card-stock span:last-child{color:var(--ag-green-d);font-weight:700;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-card-stock.is-out .ag-dot{background:#9aa0a6}
.ag-card-stock.is-out span:last-child{color:#6b7075}

/* margin-top:auto = los botones quedan pegados abajo aunque algo
   de arriba cambie de alto. */
.ag-card-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:auto;padding-top:12px}
.ag-btn-add,.ag-btn-wa{
  border-radius:8px;font-size:13px;font-weight:700;padding:10px 8px;
  display:flex;align-items:center;justify-content:center;gap:6px;
  text-transform:none;letter-spacing:normal;cursor:pointer;
  white-space:nowrap;border:0;min-width:0;overflow:hidden;
}
.ag-btn-add{background:var(--ag-red);color:#fff;box-shadow:0 2px 8px rgba(217,30,30,.22)}
.ag-btn-add:hover{background:var(--ag-red-d);color:#fff}
.ag-btn-add:disabled{opacity:.5;cursor:not-allowed}
.ag-btn-wa{background:#fff;color:var(--ag-green-d);border:1.5px solid var(--ag-green)}
.ag-btn-wa:hover{background:var(--ag-green);color:#fff}

/* placeholder cuando el producto no tiene foto cargada */
.ag-nophoto{display:grid;place-items:center;gap:10px;width:100%;height:100%}
.ag-nophoto img{width:60%;height:auto;opacity:.10;transition:none}
.ag-card:hover .ag-nophoto img{transform:none}
.ag-nophoto span{font-size:11px;font-weight:600;color:#b6bac2;letter-spacing:.04em;text-transform:uppercase}

/* Botones apilados en cuanto la card no da el ancho para los dos. */
@container (max-width:250px){
  .ag-card-actions{grid-template-columns:1fr;gap:6px}
  .ag-btn-add,.ag-btn-wa{padding:9px 6px;font-size:12.5px}
}
@container (max-width:190px){
  .ag-card-info{padding:0 10px 12px}
  .ag-card-media{padding:8px}
  .ag-card-name{font-size:12.5px;line-height:17px;height:51px}
  .ag-card-price{height:26px}
  .ag-card-price strong{font-size:17px;line-height:26px}
  .ag-card-pay{font-size:10.5px}
}

@media(max-width:640px){
  .ag-card-info{padding:0 10px 12px}
  .ag-card-media{padding:8px}
  .ag-card-name{font-size:12.5px;line-height:17px;height:51px}
  .ag-card-price{height:26px}
  .ag-card-price strong{font-size:17px;line-height:26px}
  .ag-card-pay{font-size:10.5px}
  .ag-card-actions{grid-template-columns:1fr;gap:6px}
  .ag-btn-add,.ag-btn-wa{padding:9px 6px;font-size:12.5px}
}