/** Shopify CDN: Minification failed

Line 642:0 Expected identifier but found "/"
Line 677:3 Expected "}" to go with "{"

**/
/* =========================================================
   Variables (una sola vez)
   ========================================================= */
:root{
  --brand:        #2563eb;
  --brand-dark:   #1e40af;
  --ok:           #16a34a;
  --ink:          #111827;
  --muted:        #4b5563;
  --outline:      #e9eef5;
  --panel:        #f7f8fb;
  --iva-bg:       #eef2f7;
  --iva-ink:      #344563;
}

/* =========================================================
   Tarjeta de producto – Colecciones, Búsqueda y Carruseles
   ========================================================= */

/* Contenedor de tarjeta (mismo look en todos los listados) */
#tt-pageContent .tt-product,
[class*="tt-product-listing"] .tt-product{
  background:#fff;
  border:1px solid var(--outline);
  border-radius:16px;
  box-shadow:0 1px 4px rgba(0,0,0,.05);
  overflow:hidden;
  transition:box-shadow .2s, transform .2s;
}
#tt-pageContent .tt-product:hover,
[class*="tt-product-listing"] .tt-product:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 28px rgba(26,36,80,.10);
}

/* Área de imagen (gris como en colecciones) */
#tt-pageContent .tt-product .tt-image-box,
[class*="tt-product-listing"] .tt-image-box{
  background:var(--panel);
  border-bottom:1px solid var(--outline);
  padding:16px;
  min-height:240px;                 /* alto homogéneo en mosaicos */
  display:flex; align-items:center; justify-content:center;
}
#tt-pageContent .tt-product .tt-image-box img,
[class*="tt-product-listing"] .tt-image-box img{
  object-fit:contain !important;
  max-height:200px;
  width:auto; height:auto;
}

/* Panel inferior gris */
#tt-pageContent .tt-product .tt-description,
[class*="tt-product-listing"] .tt-description{
  background:var(--panel);
  border-top:1px solid var(--outline);
  padding:12px;
  text-align:center;
}
/* Quitar lomos/pseudos del theme que generaban “fondo raro” */
#tt-pageContent .tt-product .tt-description::before,
#tt-pageContent .tt-product .tt-description::after{
  content:none !important;
  display:none !important;
}

/* Línea superior: Vendor + categorías (opcional) */
#tt-pageContent .tt-product .tt-add-info,
[class*="tt-product-listing"] .tt-add-info{
  display:flex; gap:2px; justify-content:center;
}
#tt-pageContent .tt-product .tt-add-info li:first-child a{
  color:var(--ok); font-weight:700; text-transform:uppercase;
}
#tt-pageContent .tt-product .tt-add-info li:not(:first-child) a{
  color:var(--ink); font-weight:600;
}

/* Título + posibles 2 líneas máximo (opcional) */
#tt-pageContent .tt-product .tt-title{
  font-weight:500; line-height:1.25; margin:0 0 6px;
}
#tt-pageContent .tt-product .tt-title a{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Descripción corta (opcional) */
#tt-pageContent .tt-product .tt-description .tt-product-descr{
  color:var(--muted);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;
  margin-bottom:6px;
}

/* SKU (cubre diferentes convenciones del theme) */
#tt-pageContent .tt-product .tt-sku-line{
  margin-top:4px; font-size:15px; font-weight:300; color:var(--ink);
}
#tt-pageContent .tt-product .tt-sku,
#tt-pageContent .tt-product .sku,
#tt-pageContent .tt-product [class*="sku"]{
  font-weight:300; color:var(--ink);
}

/* Precio + chip “IVA incluido” */
#tt-pageContent .tt-product .tt-price,
[class*="tt-product-listing"] .tt-price{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline;
  gap:6px; width:100%;
}
#tt-pageContent .tt-product .tt-price .new-price{
  font-weight:900; font-size:18px; color:var(--ink);
}
#tt-pageContent .tt-product .tt-price .old-price{
  color:#9ca3af; text-decoration:line-through;
}
#tt-pageContent .tt-product .tt-price::after,
[class*="tt-product-listing"] .tt-price::after{
  content:"IVA incluido"; background:var(--iva-bg); color:var(--iva-ink);
  border-radius:999px; padding:3px 10px; font-size:12px; font-weight:700;
  order:2;
}

/* Botón “Agregar”: centrado, ancho cómodo y sin overlay */
#tt-pageContent .tt-product .tt-btn-addtocart,
[class*="tt-product-listing"] .tt-btn-addtocart{
  display:block;
  width:clamp(220px, 85%, 340px);
  min-height:56px;
  margin:12px auto 6px;      /* CENTRADO */
  border-radius:14px;
  font-weight:800;
  background:var(--brand); border-color:var(--brand); color:#fff;
  box-shadow:0 8px 22px rgba(37,99,235,.12);
}
#tt-pageContent .tt-product .tt-btn-addtocart:hover{
  background:var(--brand-dark); border-color:var(--brand-dark);
  transform:translateY(-1px);
}


/* =========================================================
   Ajustes móviles
   ========================================================= */
@media (max-width:640px){
  #tt-pageContent .tt-product .tt-description{ padding:12px 12px 16px; }
  #tt-pageContent .tt-product .tt-btn-addtocart{
    width:calc(100% - 24px);
    margin:10px 12px 14px;
    font-size:16px; letter-spacing:.02em; border-radius:14px;
  }
  /* Opcional: ocultar quickview en móvil */
  #tt-pageContent .tt-product .tt-btn-quickview,
  #tt-pageContent .tt-product .tt-quickview{
    display:none !important;
  }
}

/* =========================================================
   Equipos relacionados (thumbs más grandes) - opcional
   Añade la clase .thumbs-plus al bloque que quieras potenciar
   ========================================================= */
.thumbs-plus .tt-product .tt-image-box{ padding:8px; }
@media (min-width:1024px){
  .thumbs-plus .tt-product .tt-image-box{ padding:6px; }
}
.thumbs-plus .tt-product .tt-image-box .tt-img{ aspect-ratio:4/3; }
/* ============================
   Forzar botón siempre visible
   y centrado en todas las listas
   (colecciones, búsqueda, carruseles)
   ============================ */

#tt-pageContent .tt-product .tt-product-inside-hover{
  /* el tema lo oculta: invertimos eso */
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  position: static !important;
  height: auto !important;
  pointer-events: auto !important;

  /* sin panel blanco */
  background: transparent !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;

  /* espacio y centrado debajo de "IVA incluido" */
  margin-top: 12px !important;
  text-align: center !important;
}

/* Botón Agregar: igual que en colecciones, centrado y ancho cómodo */
#tt-pageContent .tt-product .tt-product-inside-hover .btn,
#tt-pageContent .tt-product .tt-btn-addtocart{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  width: clamp(220px, 85%, 340px);
  min-height: 54px;
  border-radius: 14px;

  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 6px 18px rgba(37,99,235,.25);
}
#tt-pageContent .tt-product .tt-product-inside-hover .btn:hover,
#tt-pageContent .tt-product .tt-btn-addtocart:hover{
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  transform: translateY(-1px);
}

/* pequeño ajuste del icono del carrito dentro del botón */
#tt-pageContent .tt-product .tt-product-inside-hover .btn [class*="icon"],
#tt-pageContent .tt-product .tt-btn-addtocart [class*="icon"]{
  margin-right: 8px;
}
/* =========================================================
   AJUSTES FINALES — unifica tarjetas y botón "Agregar"
   ========================================================= */

/* 1) Área de IMAGEN: fondo blanco + pequeño marco gris
      (colecciones, búsqueda y cualquier grid del theme) */
#tt-pageContent .tt-product .tt-image-box,
[class*="tt-product-listing"] .tt-image-box{
  background:#fff !important;                 /* blanco liso */
  border:1px solid #e9eef5 !important;        /* marco gris claro */
  border-radius:12px !important;
  padding:12px !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.015);/* micro relieve */
}

/* Mantener la imagen contenida */
#tt-pageContent .tt-product .tt-image-box img,
[class*="tt-product-listing"] .tt-image-box img{
  object-fit:contain !important;
  width:100%; height:auto;
}

/* 2) Quitar el “panel blanco” que dibuja el theme
      detrás del botón en carruseles/grids */
.tt-product .tt-product-inside-hover,
.tt-carousel-products .tt-product .tt-product-inside-hover,
#tt-recent-products .tt-product .tt-product-inside-hover,
#tt-related-products .tt-product .tt-product-inside-hover{
  background:transparent !important;
  box-shadow:none !important;
  -webkit-box-shadow:none !important;
  border:0 !important;
  padding:0 !important;
  margin-top:12px !important;   /* respirito debajo de “IVA incluido” */
  text-align:center !important; /* para centrar el botón dentro */
  opacity:1 !important; visibility:visible !important;
  transform:none !important; height:auto !important;
  pointer-events:auto !important;
}

/* 3) Botón “AGREGAR” — MISMO LOOK y CENTRADO
      (colecciones, búsqueda, carruseles) */
#tt-pageContent .tt-product .tt-btn-addtocart,
.tt-product .tt-product-inside-hover .btn{
  display:inline-flex !important;
  align-items:center; justify-content:center;
  width:clamp(220px, 85%, 340px) !important;   /* ancho cómodo */
  min-height:56px !important;
  margin:12px auto 6px !important;            /* CENTRADO */
  border-radius:14px !important;
  font-weight:800 !important;
  background:#2563eb !important;
  border-color:#2563eb !important;
  color:#fff !important;
  box-shadow:0 8px 22px rgba(37,99,235,.12) !important;
}
#tt-pageContent .tt-product .tt-btn-addtocart:hover,
.tt-product .tt-product-inside-hover .btn:hover{
  background:#1e40af !important;
  border-color:#1e40af !important;
  transform:translateY(-1px);
}

/* Iconito del carrito con un pequeño margen */
#tt-pageContent .tt-product .tt-btn-addtocart [class*="icon"],
.tt-product .tt-product-inside-hover .btn [class*="icon"]{
  margin-right:8px;
}

/* 4) Panel inferior gris (por si algún preset lo cambia) */
#tt-pageContent .tt-product .tt-description,
[class*="tt-product-listing"] .tt-description{
  background:#f7f8fb !important;
  border-top:1px solid #e9eef5 !important;
  padding:12px !important;
  text-align:center;
}
/* eliminar pseudo-elementos que a veces crean “fondos raros” */
#tt-pageContent .tt-product .tt-description::before,
#tt-pageContent .tt-product .tt-description::after{
  content:none !important;
  display:none !important;
}

/* 5) Móvil: botón ancho y cómodo */
@media (max-width:640px){
  #tt-pageContent .tt-product .tt-btn-addtocart,
  .tt-product .tt-product-inside-hover .btn{
    width:calc(100% - 24px) !important;
    margin:10px 12px 14px !important;
    font-size:16px;
    letter-spacing:.02em;
  }
}
/* =========================
   FIX: centrar "Agregar" en COLECCIONES
   (el tema lo alinea a la izquierda)
   ========================= */
body.pagecollection #tt-pageContent .tt-layout-product-item .tt-product .tt-product-inside-hover,
body.pagecollection #tt-pageContent .tt-layout-product-item .tt-product .tt-description{
  text-align: center !important;
}

/* el overlay del tema puede estar absoluto; lo normalizamos */
body.pagecollection #tt-pageContent .tt-layout-product-item .tt-product .tt-product-inside-hover{
  position: static !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  height: auto !important;
  pointer-events: auto !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin-top: 12px !important;  /* respiro debajo del “IVA incluido” */
}

/* botón centrado y con el mismo estilo que en Búsqueda/Home */
body.pagecollection #tt-pageContent .tt-layout-product-item .tt-product .tt-product-inside-hover .btn,
body.pagecollection #tt-pageContent .tt-layout-product-item .tt-product .tt-btn-addtocart{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: clamp(220px, 85%, 340px) !important;
  min-height: 56px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 12px !important;
  border-radius: 14px !important;
  font-weight: 800 !important;
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #fff !important;
  box-shadow: 0 8px 22px rgba(37,99,235,.12) !important;
}
body.pagecollection #tt-pageContent .tt-layout-product-item .tt-product .tt-product-inside-hover .btn:hover,
body.pagecollection #tt-pageContent .tt-layout-product-item .tt-product .tt-btn-addtocart:hover{
  background: #1e40af !important;
  border-color: #1e40af !important;
  transform: translateY(-1px);
}

/* iconito del carrito con respirito */
body.pagecollection #tt-pageContent .tt-layout-product-item .tt-product .tt-product-inside-hover .btn [class*="icon"],
body.pagecollection #tt-pageContent .tt-layout-product-item .tt-product .tt-btn-addtocart [class*="icon"]{
  margin-right: 8px;
}


/* =========================================================
   UNIFICAR TARJETAS + BOTÓN "AGREGAR" (todas las vistas)
   Pegar al FINAL del archivo syscom-collection.css
   ========================================================= */

/* Paleta base (si ya la tienes, puedes omitirla) */
:root{
  --brand:#2563eb;      /* azul botón */
  --brand-dark:#1e40af; /* azul hover */
  --outline:#e9eef5;    /* marco suave */
  --panel:#f7f8fb;      /* panel gris inferior */
}

/* ---------- Contenedor tarjeta (colecciones, búsqueda, carruseles) */
#tt-pageContent .tt-product,
[class*="tt-product-listing"] .tt-product{
  background:#fff;
  border:1px solid var(--outline);
  border-radius:16px;
  box-shadow:0 1px 4px rgba(0,0,0,.05);
  overflow:hidden;
  transition:transform .2s, box-shadow .2s;
}
#tt-pageContent .tt-product:hover,
[class*="tt-product-listing"] .tt-product:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 28px rgba(26,36,80,.10);
}

/* ---------- Área de imagen: blanco + marco gris (en todos los contextos) */
#tt-pageContent .tt-product .tt-image-box,
[class*="tt-product-listing"] .tt-image-box{
  background:#fff !important;
  border:1px solid var(--outline) !important;
  border-radius:12px !important;
  padding:12px !important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.015);
}
#tt-pageContent .tt-product .tt-image-box img,
[class*="tt-product-listing"] .tt-image-box img{
  object-fit:contain !important;
  width:100%; height:auto;
}

/* ---------- Panel inferior gris unificado */
#tt-pageContent .tt-product .tt-description,
[class*="tt-product-listing"] .tt-description{
  background:var(--panel) !important;
  border-top:1px solid var(--outline) !important;
  padding:12px !important;
  text-align:center;
}
#tt-pageContent .tt-product .tt-description::before,
#tt-pageContent .tt-product .tt-description::after{
  content:none !important;
}

/* =========================================================
   FIX CRÍTICO: eliminar overlay y centrar botón en TODOS los contextos
   (colecciones, búsqueda y carruseles/slick)
   ========================================================= */

/* 1) Neutralizar el panel/overlay del tema */
#tt-pageContent .tt-product .tt-product-inside-hover,
.tt-product .tt-product-inside-hover,
.slick-slider .tt-product .tt-product-inside-hover{
  position:static !important;
  left:auto !important; right:auto !important; top:auto !important; bottom:auto !important;
  opacity:1 !important; visibility:visible !important; transform:none !important; height:auto !important;
  pointer-events:auto !important;

  background:transparent !important;
  box-shadow:none !important; -webkit-box-shadow:none !important;
  border:0 !important; padding:0 !important;

  margin-top:12px !important;
  text-align:center !important;
}

/* 2) Mismo botón en todas partes y CENTRADO */
#tt-pageContent .tt-product .tt-btn-addtocart,
.tt-product .tt-product-inside-hover .btn{
  display:inline-flex !important;
  align-items:center; justify-content:center;
  width:clamp(220px,85%,340px) !important;
  min-height:56px !important;
  margin:12px auto 6px !important;        /* << CENTRADO */
  border-radius:14px !important;
  font-weight:800 !important;
  background:var(--brand) !important;
  border-color:var(--brand) !important;
  color:#fff !important;
  box-shadow:0 8px 22px rgba(37,99,235,.12) !important;
}
#tt-pageContent .tt-product .tt-btn-addtocart:hover,
.tt-product .tt-product-inside-hover .btn:hover{
  background:var(--brand-dark) !important;
  border-color:var(--brand-dark) !important;
  transform:translateY(-1px);
}

/* Ajuste pequeño del icono dentro del botón */
#tt-pageContent .tt-product .tt-btn-addtocart [class*="icon"],
.tt-product .tt-product-inside-hover .btn [class*="icon"]{
  margin-right:8px;
}

/* 3) En desktop algunas hojas del theme re-fuerzan el overlay.
      Reforzamos nuestra anulación también ahí. */
@media (min-width:1025px){
  #tt-pageContent .tt-product .tt-description .tt-product-inside-hover{
    position:static !important;
  }
}

/* 4) Botón cómodo en móvil */
@media (max-width:640px){
  #tt-pageContent .tt-product .tt-btn-addtocart,
  .tt-product .tt-product-inside-hover .btn{
    width:calc(100% - 24px) !important;
    margin:10px 12px 14px !important;
    font-size:16px; letter-spacing:.02em;
  }
}
/* === SUPER FIX: centrar botón "Agregar" en TODOS los listados === */

/* 1) El contenedor del botón, que el theme deja en flex a la izquierda */
#tt-pageContent .tt-product .tt-row-btn,
.tt-product .tt-row-btn,
.slick-slider .tt-product .tt-row-btn{
  display: flex !important;
  justify-content: center !important;
}

/* 2) Por si el <form> interno hereda el flex y empuja a la izquierda */
#tt-pageContent .tt-product .tt-row-btn form,
.tt-product .tt-row-btn form,
.slick-slider .tt-product .tt-row-btn form{
  display: flex !important;
  justify-content: center !important;
  width: 100%;
}

/* 3) El propio botón mantiene su ancho cómodo y centrado */
#tt-pageContent .tt-product .tt-product-inside-hover .btn,
#tt-pageContent .tt-product .tt-btn-addtocart{
  margin-left: auto !important;
  margin-right: auto !important;
  width: clamp(220px, 85%, 340px) !important;
}
#tt-pageContent .tt-product .tt-product-inside-hover{
  position: static !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  height: auto !important;
  pointer-events: auto !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin-top: 12px !important;   /* respiro bajo “IVA incluido” */
  text-align: center !important;
}
/* El SKU se ve clickeable */
#tt-pageContent .tt-product .tt-sku,
#tt-pageContent .tt-product .tt-sku-line,
#tt-pageContent .tt-product [class*="sku"]{
  cursor: pointer;
  text-underline-offset: 2px;
}

/* Colores del SKU */
:root{
  --sku-base:  #082c4e;  /* color normal */
  --sku-hover: #60a5fa;  /* azul clarito al pasar el mouse */
}

/* Estilo base del SKU (clickeable con el JS que pusimos) */
#tt-pageContent .tt-product .tt-sku,
#tt-pageContent .tt-product .tt-sku-line,
#tt-pageContent .tt-product [class*="sku"]{
  color: var(--sku-base);
  line-height: 1.1;
  cursor: pointer;
  text-decoration: none !important; /* sin subrayado */
  transition: color .18s ease;
}

/* Hover / focus (teclado) */
#tt-pageContent .tt-product .tt-sku:hover,
#tt-pageContent .tt-product .tt-sku-line:hover,
#tt-pageContent .tt-product [class*="sku"]:hover,
#tt-pageContent .tt-product .tt-sku:focus,
#tt-pageContent .tt-product .tt-sku-line:focus,
#tt-pageContent .tt-product [class*="sku"]:focus{
  color: var(--sku-hover) !important;
  outline: none;
}

/* ===== Tamaño más pequeño para proveedor/marca y categoría ===== */
:root{
  /* Ajusta este valor a tu gusto: 10–13px suele verse bien */
  --addinfo-size: 12px;
}

/* Aplica a las tarjetas en colecciones, búsqueda y carruseles */
#tt-pageContent .tt-product .tt-add-info li a,
[class*="tt-product-listing"] .tt-add-info li a{
  font-size: var(--addinfo-size) !important;
  line-height: 1.15;
}

/* (Opcional) que el proveedor/marca (el primero, verde) sea un pelín más pequeño aún */
#tt-pageContent .tt-product .tt-add-info li:first-child a,
[class*="tt-product-listing"] .tt-add-info li:first-child a{
  font-size: calc(var(--addinfo-size) - 1px) !important;
}
/* ===========================
   Botón AGREGAR – Refresh UI
   =========================== */
:root{
  --btn-bg:        #2563eb;   /* azul base */
  --btn-bg-2:      #1f54e5;   /* gradiente sutil */
  --btn-hover:     #1e40af;   /* hover más oscuro */
  --btn-ring:      #93c5fd;   /* foco accesible */
  --btn-shadow:    rgba(37,99,235,.28);
}

/* En grillas/carruseles/colecciones y también en el overlay del tema */
#tt-pageContent .tt-product .tt-btn-addtocart,
.tt-product .tt-product-inside-hover .btn{
  /* layout */
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;

  /* caja */
  width: clamp(220px, 85%, 340px) !important;
  min-height: 56px !important;
  padding: 14px 18px !important;
  border-radius: 14px !important;
  border: 0 !important;

  /* tipografía */
  font-family: inherit !important;
  font-weight: 800 !important;
  font-size: 16px !important;          /* + nítido */
  letter-spacing: .03em !important;     /* respirito */
  line-height: 1 !important;
  text-transform: none !important;

  /* anti “borroso” */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  /* color/contraste */
  color: #fff !important;
/
}

/* Ícono más legible y alineado */
#tt-pageContent .tt-product .tt-btn-addtocart [class*="icon"],
.tt-product .tt-product-inside-hover .btn [class*="icon"]{
  font-size: 18px !important;
  margin-right: 6px !important;
  opacity: .95;
}


/* Active (click) */
#tt-pageContent .tt-product .tt-btn-addtocart:active,
.tt-product .tt-product-inside-hover .btn:active{
  transform: translateY(0);
  box-shadow: 0 8px 18px rgba(37,99,235,.25) !important;
}

/* Focus accesible con “ring” claro */
#tt-pageContent .tt-product .tt-btn-addtocart:focus-visible,
.tt-product .tt-product-inside-hover .btn:focus-visible{
  outline: 3px solid var(--btn-ring) !important;
  outline-offset: 2px !important;
}

/* Versión mobile: un poco más grande y ancho cómodo */
@media (max-width:640px){
  #tt-pageContent .tt-product .tt-btn-addtocart,
  .tt-product .tt-product-inside-hover .btn{
    width: calc(100% - 24px) !important;
    margin: 10px 12px 14px !important;
    min-height: 58px !important;
    font-size: 17px !important;
    letter-spacing: .02em !important;
  }