/* ====== Home: sin espacio vertical entre tarjetas y borde del contenedor ====== */

.vs-products-block-container{
  /* colchón vertical interno (0 = sin aire) */
  --vs-vgap: 0px;  /* probá 2px si querés un pelín de aire */
  padding-top: var(--vs-vgap) !important;
  padding-bottom: var(--vs-vgap) !important;
}

/* 1) Regla base (mobile primero) */
.vs-products-block-container h2,
.vs-products-block-container .h3{
  margin-top: 14px !important;
  margin-bottom: 14px !important;
  padding-left: 14px !important;     /* mobile / base */
  color: #001841 !important;
}

/* 2) Desktop y pantallas grandes */
@media (min-width: 769px){
  .vs-products-block-container h2,
  .vs-products-block-container .h3{
    padding-left: 120px !important;  /* solo desktop */
  }
}


/* ---- SLICK ---- */
.vs-products-block-container .slick-list{
  /* algunos temas meten padding interno al viewport */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  /* si la tarjeta tiene padding/margen propio, compensamos con margen negativo opcional */
  margin-top: calc(var(--vs-vgap) * -1) !important;
  margin-bottom: calc(var(--vs-vgap) * -1) !important;
  border-radius: 14px; /* tu estilo previo */
}
.vs-products-block-container .slick-track{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.vs-products-block-container .slick-slide,
.vs-products-block-container .slick-slide > div{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ---- SWIPER ---- */
.vs-products-block-container .swiper,
.vs-products-block-container .swiper-container{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.vs-products-block-container .swiper-wrapper{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.vs-products-block-container .swiper-slide{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Si hay columnas bootstrap dentro del slide (algunos themes lo usan) */
.vs-products-block-container [class*="col"]{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Tarjeta en sí, sin aire extra vertical */
.vs-products-block-container .js-product-container{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ========== %OFF — configuración única (Home + Producto) ========== */

:root{
  --pill-bg:    #0b63e8;
  --pill-color: #fff;

  /* tamaños DESKTOP por defecto */
  --pill-fs:    12px;   /* font-size */
  --pill-fw:    400;    /* 400–600 según tu tipografía */
  --pill-py:    4px;    /* padding vertical */
  --pill-px:    7px;    /* padding horizontal */
  --pill-radius: 18px;
  --pill-gap:    8px;   /* espacio entre precio y pill */
  --pill-shadow: 0 2px 6px rgba(0,0,0,.18);
}

/* Estilo del pill: aumentar especificidad y evitar que el tema lo pise */
body .item-price-container .vs-discount-box,
body .vs-discount-box{
  display:inline-block;
  font-size: var(--pill-fs) !important;
  font-weight: var(--pill-fw) !important;
  line-height: 1 !important;
  padding: var(--pill-py) var(--pill-px) !important;
  border-radius: var(--pill-radius) !important;
  margin-left: 0;
  color: var(--pill-color) !important;
  background: var(--pill-bg) !important;
  box-shadow: var(--pill-shadow);
  white-space: nowrap; /* para que no corte en dos líneas */
}

/* Centrado con el precio (en home y PDP) */
body.template-home  .price-container .mb-3 > span.d-inline-block,
body.template-product .price-container .mb-3 > span.d-inline-block{
  display:flex !important;
  align-items:center !important;
  gap: var(--pill-gap) !important;
  overflow: visible !important;
}

/* Ajuste fino vertical si lo necesitás */
body.template-home .price-container .mb-3 > span.d-inline-block .vs-discount-box,
body.template-product .price-container .mb-3 > span.d-inline-block .vs-discount-box{
  position: relative !important;
  top: -6px !important;           /* sube/baja el pill respecto del precio */
  transform: none !important;
}

/* ======== Mobile (≤575.98px): pill más pequeño ======== */
@media (max-width: 575.98px){
  :root{
    --pill-fs: 10px;
    --pill-py: 3px;
    --pill-px: 6px;
    --pill-gap: 4px;
  }
}

/* =========================
   FICHA DE PRODUCTO (PDP)
   Alinear precio + %OFF al centro
   ========================= */

/* ===== Pill %OFF – estilo base (no lo borres si ya tenés algo similar) */
.vs-discount-box{
  background:#0b63e8 !important;
  color:#fff !important;
  font-size:12px;              /* achica/agranda el texto del pill */
  font-weight:500;
  line-height:1 !important;
  padding:3px 8px;             /* alto y ancho del pill */
  border-radius:999px;
  white-space:nowrap;
}

/* 1) Normalizar el alto de línea del precio para que no tire del %OFF hacia abajo */
.item-price,
.js-price-display,
#price_display{
  line-height:1 !important;
}

/* 2) HOME (cards): forzar contenedor precio + %OFF a usar flex y centrar vertical */
.vs-products-block-container .item-price-container .d-block.mb-1.mr-1{
  display:inline-flex !important;
  align-items:center !important;
  gap:.3rem !important;        /* separación precio–pill */
}

/* 3) FICHA (PDP): idem, pero el contenedor es un <span> */
.template-product .item-price-container span.d-inline-block.mr-1{
  display:inline-flex !important;
  align-items:center !important;
  gap:.3rem !important;
}

/* 4) Opcional: subir solo la pastilla un poco (– = más arriba) */
.vs-products-block-container .item-price-container .vs-discount-box,
.template-product        .item-price-container .vs-discount-box{
  position:relative !important;
  top:-2px !important;         /* probá -3px / -6px según te guste */
}

/* 5) Mobile: pill un toque más chico, mantiene alineación */
@media (max-width:575.98px){
  .vs-discount-box{ font-size:11px; padding:3px 7px; }
  .vs-products-block-container .item-price-container .vs-discount-box,
  .template-product        .item-price-container .vs-discount-box{
    top:-1px !important;
  }
}

/* Anclaje absoluto del %OFF en PDP */

body.template-product .price-container{ position: relative !important; }

body.template-product .price-container .vs-discount-box{
  position: absolute !important;
  transform: none !important;
  margin: 0 !important;
  z-index: 2;
}


/* --- Footer fiscal y logo de Mercado Pago --- */

footer a[href*="afip.gob.ar"], #footer a[href*="afip.gob.ar"] {
	position: absolute !important;
	right: 20px;
	bottom: 8px;
	display: inline-block !important;
	margin: 0 !important;
	float: none !important;
}

footer a[href*="afip.gob.ar"]::before, #footer a[href*="afip.gob.ar"]::before {
	content: "";
	position: absolute;
	right: calc(100% + 12px);
	bottom: 50%;
	transform: translateY(50%);
	width: 95px;
	height: 34px;
	background-image: url("https://i.ibb.co/chCRZwNr/imagesmp-Photoroom.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	opacity: .95;
}


/* --- Redondear y estilizar el botón “Comprar” --- */

button[type="submit"],
button.add-to-cart,
button.product-form__add-to-cart,
[class*="btn"] {
  border-radius: 18px !important; /* cambia el valor para más o menos redondeo */
  transition: all 0.25s ease-in-out;
}

/* Tarjetas más grandes, legibles */

.vs-trust{ display:grid; gap:12px; margin-top:2px; width:100%; max-width:100%; }
.vs-trust__item{
  width:100%; box-sizing:border-box;
  display:flex; gap:12px; align-items:flex-start;
  padding:14px 16px;
  background:#fff;
  border:1px solid #e8edf5;
  border-radius:14px;                 /* subí a 20px si tu botón es muy redondo */
  box-shadow:0 1px 2px rgba(16,24,40,.04);
}
.vs-trust__icon{
  width:24px; height:24px; flex:0 0 24px;
  display:inline-flex; align-items:center; justify-content:center;
  color:#000000; margin-top:2px;
}
.vs-trust__copy strong{ display:block; font-size:15px; line-height:1.2; font-weight:700; color:#0f172a; margin-bottom:3px; }
.vs-trust__copy small{ display:block; font-size:13.5px; line-height:1.35; color:#475467; }

/* Si tu botón “sangra” a los costados, igualamos el sangrado */
.vs-trust--bleed{ margin-left:-12px; margin-right:-12px; }

/* === CTA: alineado a la izquierda === */
.product-form .btn-add-to-cart{
  display:block;         /* bloque = ignora text-align del padre */
  width:100%;
  margin:0 !important;   /* sin auto-margins que lo centren */
}

/* Fila del form (qty + botón): por si el tema la centra */
.product-form .row{
  justify-content:flex-start !important;
  text-align:left !important;
}

/* === Badges: misma alineación/ancho que el CTA === */
.vs-trust-row{
  justify-content:flex-start !important;  /* evita centrado de la fila nueva */
  text-align:left !important;
}

.vs-trust-row > [class*="col"]{
  display:block;             /* no flex, para que respete el offset */
  margin-left:0;             /* el offset-* ya aplica su propio margen */
}

.vs-trust{ width:100%; max-width:100%; display:grid; gap:12px; }
.vs-trust__item{ width:100%; box-sizing:border-box; }

/* Mantener el “small” en una sola línea en desktop */
@media (min-width: 768px){
  .vs-trust__copy small{ white-space: nowrap; }
}
/* En mobile que pueda cortar normal */
@media (max-width: 767px){
  .vs-trust__copy small{ white-space: normal; }
}

/* MOBILE: la columna de los badges ocupa todo el ancho y sin offset */
@media (max-width: 575.98px){
  .vs-trust-row > [class*="col"]{
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;      /* anula offset-4 base */
  }
  .vs-trust{ margin-right: 0 !important; }
}

/* Subtítulo en una sola línea en móvil */
@media (max-width: 575.98px){
  .vs-trust__copy small{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* evita desbordes si el texto es muy largo */
    font-size: 13px;         /* opcional: bajá 0.5–1px si aún corta */
  }
  .vs-trust__item{ padding: 12px 14px; }  /* compacta un poco */
  .vs-trust__icon{ width: 22px; height: 22px; } /* icono apenas menor */
}


@media (max-width:575.98px){
  /* Viewport sin relleno y con recorte en Home y en la ficha */
  .vs-products-block-container .swiper,
  .vs-products-block-container .slick-list,
  .template-product section[data-store] .swiper,
  .template-product section[data-store] .slick-list{
    padding:0 !important;
    overflow:hidden !important;
  }

  /* Slides sin márgenes extra */
  .vs-products-block-container .swiper-slide,
  .vs-products-block-container .slick-slide,
  .template-product section[data-store] .swiper-slide,
  .template-product section[data-store] .slick-slide{
    margin:0 !important;
    padding:0 !important;
    box-sizing:border-box;
  }
}



/* Footer: ocultar el logo "api_18494" de medios de envío */

footer img.icon-logo[alt="api_18494"],
footer img.icon-logo[title="api_18494"],
footer img.icon-logo[src*="api_18494"],
footer img.icon-logo[data-src*="api_18494"]{
  display: none !important;
}

/* Si ese img va dentro de un <a> o <li>, podés ocultar el contenedor también: */
footer img.icon-logo[alt="api_18494"] { pointer-events: none; }

/* Columna del logo en el footer */
.vs-footer-brandcol{
  /* por si el tema mete espaciados raros */
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

/* Tamaño del logo */
.vs-footer-logo img{
  height: 90px;       /* ajustá aquí: 44–72px suele funcionar bien */
  width: auto;
  display: block;
  margin: 0;          /* sin márgenes extra */
}

/* Slogan/leyenda bajo el logo */
.vs-footer-slogan{
  margin-top: 10px;
  font-size: 30px;           /* más grande en desktop */
  font-weight: 900;          /* negrita */
  line-height: 1.3;
  letter-spacing: .2px;      /* opcional: un toque de aire entre letras */
  max-width: 420px;
  color: #fff;               /* blanco sólido */
}

/* Mobile: apenas más chico para que no rompa */
@media (max-width: 767px){
  .vs-footer-slogan{
    font-size: 18px;         /* negrita se mantiene */
    max-width: 320px;
  }
}

/* ============ VIA: Badge GRATIS súper compacto y centrado ============ */

.vs-badge{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  line-height:1 !important;
  pointer-events:none !important;  /* no tapa hovers/clicks de la card */
  user-select:none !important;
  z-index:12 !important;
}
.vs-badge--pill{
  padding:2px 8px !important;
  min-height:18px !important;
  border-radius:4px !important;
  background:#000000 !important;
  box-shadow:0 0px 0px rgba(11,99,232,.28) !important;
  border:1px solid rgba(255,255,255,.28) !important;
}
.vs-badge__text{
  color:#fff !important;
  text-transform:uppercase !important;
  font-weight:400 !important;
  font-size:11px !important;
  letter-spacing:.25px !important;

}
.vs-badge__icon{
  display:inline-block !important;
  width:14px !important; height:16px !important; flex:0 0 14px !important;
  background-repeat:no-repeat !important; background-position:center !important; background-size:15px 15px !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M3 7h10a1 1 0 0 1 1 1v6h2.5a3.5 3.5 0 0 1 3.5 3.5V18h-1.2a2.3 2.3 0 1 1-4.6 0H9.8a2.3 2.3 0 1 1-4.6 0H3V8a1 1 0 0 1 1-1Zm11 2h3.1L20 12h-6V9Z'/%3E%3C/svg%3E") !important;
}
.vs-badge--tl{ position:absolute; top:3px !important; left:0px !important; z-index:12 !important; }

/* Apagar anteriores */
.vs-ribbon{ display:none !important; }
.product__labels .label--shipping, .label--shipping, .product__label--shipping,
.badge--shipping, [class*="label"][class*="shipping"], [class*="badge"][class*="shipping"]{ display:none !important; }

/* Ajuste fino de alineación vertical */
.vs-badge__icon{
  transform: translateY(-1.2px) !important;   /* sube el camión */
  background-position: center 44% !important;  /* por si el SVG viene alto */
}

.vs-badge__text{
  display:inline-block !important;             /* permite moverlo sin afectar al flex */
  line-height: 1 !important;
  transform: translateY(1.2px) !important;     /* baja “GRATIS” */
  /* Alternativa si preferís sin transform:
     position: relative; top: 1px;  (y en el icono: top:-1px) */
}

.js-product-slide-link{ position: relative; }
.js-product-slide-link .vs-badge{ position: absolute; z-index:30; }
.js-product-slide-link .vs-badge--tl{ top:3px !important; left:6px !important; }

/* --- FIX PDP: asegurar que el slider muestre la imagen --- */

.product-detail-slider{ visibility: visible !important; height: auto !important; }
.js-product-slide-link{ position: relative !important; }
.js-product-slide-link .vs-badge{ position: absolute; z-index: 30; pointer-events:none; }
.js-product-slide-link .vs-badge--tl{ top:3px !important; left:6px !important; }


/* === Posición consistente de pills sobre la imagen (cards + PDP) === */

.js-product-slide-link,                     /* cards */
.js-product-container,                      /* fallback algunos temas */
.product-image, .product-image__container { /* PDP */
  position: relative;
}

/* pegar ambos pills al borde izquierdo */
.js-product-slide-link .vs-badge--tl,
.js-product-container .vs-badge--tl,
.product-image .vs-badge--tl,
.product-image__container .vs-badge--tl {
  left: 0px !important;
}

/* alturas preferidas */
.vs-badge--free    { top: 6px  !important; }   /* GRATIS arriba */
.vs-badge--nostock { top: 30px !important; }   /* SIN STOCK debajo y más cerca */

/* si por cualquier motivo el DOM viene invertido, forzamos el orden visual */
.vs-badge--nostock + .vs-badge--free { top: 6px !important; }
.vs-badge--free + .vs-badge--nostock { top: 30px !important; }

/* SIN STOCK sin icono y centrado vertical del texto */
.vs-badge--nostock .vs-badge__icon{
  visibility: hidden !important;   /* NO lo elimina del layout */
  width:14px !important;
  height:16px !important;
  flex:0 0 14px !important;        /* reserva el mismo ancho que GRATIS */
}

/* Ajuste fino de altura/aire si hiciera falta */
.vs-badge--nostock{
  padding-top: 4px !important;
  padding-bottom: 5px !important;
}
.vs-badge--nostock .vs-badge__text{
  transform: translateY(1px);
}


/* Posición base (cuando están solos) */
.vs-badge--free.vs-badge--tl    { top: 6px !important; left: 0 !important; }   /* GRATIS arriba */
.vs-badge--nostock.vs-badge--tl { top: 6px !important; left: 0 !important; }   /* SIN STOCK arriba cuando está solo */

/* Si coexisten, SIN STOCK baja (PDP + cards) – FREE debe aparecer antes en el HTML */
.product-detail-slider .vs-badge--free.vs-badge--tl ~ .vs-badge--nostock.vs-badge--tl,
.js-product-slide-link .vs-badge--free.vs-badge--tl ~ .vs-badge--nostock.vs-badge--tl,
.js-product-container .vs-badge--free.vs-badge--tl ~ .vs-badge--nostock.vs-badge--tl,
.product-image .vs-badge--free.vs-badge--tl ~ .vs-badge--nostock.vs-badge--tl,
.product-image__container .vs-badge--free.vs-badge--tl ~ .vs-badge--nostock.vs-badge--tl {
  top: 32px !important;   /* ajustá 30–36 px a gusto */
}


/* Fallback si por error el orden viniera invertido (SIN STOCK antes que GRATIS):
   al menos aseguramos GRATIS arriba */
.product-detail-slider .vs-badge--nostock.vs-badge--tl ~ .vs-badge--free.vs-badge--tl,
.js-product-slide-link .vs-badge--nostock.vs-badge--tl ~ .vs-badge--free.vs-badge--tl,
.js-product-container .vs-badge--nostock.vs-badge--tl ~ .vs-badge--free.vs-badge--tl,
.product-image .vs-badge--nostock.vs-badge--tl ~ .vs-badge--free.vs-badge--tl,
.product-image__container .vs-badge--nostock.vs-badge--tl ~ .vs-badge--free.vs-badge--tl {
  top: 6px !important;
}


/* === PDP: apuntar a donde realmente viven los pills (fuera del .product-detail-slider) === */
[data-store^="product-image-"] .vs-badge--tl,
.product-with-one-image .vs-badge--tl {
  left: 0 !important;            /* pegado al borde izquierdo como en cards */
}

/* Alturas base (FREE arriba, SIN STOCK debajo) */
[data-store^="product-image-"] .vs-badge--free    { top: 6px  !important; }
[data-store^="product-image-"] .vs-badge--nostock { top: 30px !important; }

.product-with-one-image .vs-badge--free    { top: 6px  !important; }
.product-with-one-image .vs-badge--nostock { top: 30px !important; }

/* Si coexisten, SIN STOCK baja; si vienen invertidos, FREE arriba */
[data-store^="product-image-"] .vs-badge--free.vs-badge--tl ~ .vs-badge--nostock.vs-badge--tl,
.product-with-one-image .vs-badge--free.vs-badge--tl ~ .vs-badge--nostock.vs-badge--tl {
  top: 32px !important;          /* ajustá 30–36px a gusto */
}
[data-store^="product-image-"] .vs-badge--nostock.vs-badge--tl ~ .vs-badge--free.vs-badge--tl,
.product-with-one-image .vs-badge--nostock.vs-badge--tl ~ .vs-badge--free.vs-badge--tl {
  top: 6px !important;
}

/* === PDP: ancho EXACTO del pill (igualar a cards) === */
[data-store^="product-image-"] .vs-badge.vs-badge--pill,
.product-with-one-image .vs-badge.vs-badge--pill {
  width: 86px !important;        /* cambialo a 84–92 según necesites */
  min-width: 86px !important;
  max-width: 86px !important;
  flex: 0 0 86px !important;      /* fija el ancho en inline-flex */
  padding: 2px 8px !important;
  box-sizing: border-box !important;
}

/* 1 sola línea de texto en PDP (evita salto "SIN\nSTOCK") */
[data-store^="product-image-"] .vs-badge__text,
.product-with-one-image .vs-badge__text {
  white-space: nowrap !important;
  line-height: 18px !important;
}

/* PDP: centrar perfecto el texto de SIN STOCK (sin reservar icono) */
[data-store^="product-image-"] .vs-badge--nostock .vs-badge__icon,
.product-with-one-image .vs-badge--nostock .vs-badge__icon{
  display: none !important;
  width: 0 !important;
  flex: 0 0 0 !important;
}

/* Reafirmamos centrado por si algún estilo del tema lo pisa */
[data-store^="product-image-"] .vs-badge.vs-badge--pill,
.product-with-one-image .vs-badge.vs-badge--pill{
  justify-content: center !important;
  text-align: center !important;
}

/* Micro-ajuste vertical del texto si hiciera falta */
[data-store^="product-image-"] .vs-badge--nostock .vs-badge__text,
.product-with-one-image .vs-badge--nostock .vs-badge__text{
  transform: translateY(0); /* deja en 0 si ya se ve bien */
}



/* Botón fijo de WhatsApp (alineación perfecta y tamaño estable) */
a.js-btn-fixed-bottom.btn-whatsapp{
  width: 56px !important;
  height: 56px !important;
  border-radius: 9999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  /* (opcional) sombra suave consistente */
  box-shadow: 0 10px 24px rgba(0,0,0,.18) !important;
}

/* El ícono (SVG) sin padding y con medidas fijas */
a.js-btn-fixed-bottom.btn-whatsapp svg,
a.js-btn-fixed-bottom.btn-whatsapp .icon-inline{
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  overflow: visible !important; /* evita recortes raros */
}

/* Por si el tema insiste con vertical-align en el SVG */
a.js-btn-fixed-bottom.btn-whatsapp svg{
  vertical-align: middle !important;
}

/* Colores de marca + WhatsApp */
:root{
  --wa-brand-blue: #0b63e8;  /* azul de tu marca */
  --wa-green: #25D366;       /* WhatsApp */
  --wa-green-hover: #22c35e; /* hover accesible */
}


/* CTA con verde oficial WhatsApp */

.wa-greet__cta{
  background: var(--wa-green) !important;
  border-color: var(--wa-green) !important;
  color:#fff !important;
}
.wa-greet__cta:hover{
  background: var(--wa-green-hover) !important;
  border-color: var(--wa-green-hover) !important;
}

/* Avatar: aro blanco + sombra */
.wa-greet__avatar{
  width:56px;height:56px;margin-right:10px;
  border-radius:999px;
  box-shadow:0 6px 24px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.08);
  border:3px solid #fff;  /* aro blanco para separarlo del fondo */
}

/* ====== Evitar scroll horizontal (FB/IG WebView, etc.) ====== */
@supports (overflow-x: clip) {
  html, body { overflow-x: clip !important; }
}
@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden !important; }
}

/* Safe areas (iPhone) + separación estándar */
:root{
  --vs-safe-right: max(env(safe-area-inset-right, 0px), 16px);
  --vs-safe-bottom: max(env(safe-area-inset-bottom, 0px), 16px);
}


/* ====== Forzar posición de los flotantes ====== */

/* Botón WhatsApp nativo del tema */
a.js-btn-fixed-bottom.btn-whatsapp,
.wpm-mv-inline-container a.js-btn-fixed-bottom.btn-whatsapp{
  position: fixed !important;
  right: var(--vs-safe-right) !important;
  bottom: var(--vs-safe-bottom) !important;
  left: auto !important;
  transform: none !important;
  z-index: 999999 !important;
}

/* Launcher/burbuja de Sofi (ajusta los selectores si usás otros) */
#vs-sofi-launcher,
#vs-sofi-bubble,
.vs-sofi-launcher,
.vs-sofi-bubble{
  position: fixed !important;
  right: calc(var(--vs-safe-right) + 86px) !important; /* deja espacio para WhatsApp */
  bottom: var(--vs-safe-bottom) !important;
  left: auto !important;
  transform: none !important;
  z-index: 999999 !important;
}


/* ====== TARJETA UNIFICADA PARA TODOS LOS PRODUCTOS ====== */

body:not(.template-product) .js-product-container {
  background: #fff !important;
  border: 1.5px solid #d5d9e0 !important;
  border-radius: 16px !important;
  transition: transform .16s ease-out, box-shadow .16s ease-out, border-color .16s ease-out;
  /* overflow: hidden;  ← lo quitamos porque corta el botón en estado loading */
  overflow: visible; /* dejamos que el botón muestre su animación */
}

/* si querés que solo las IMÁGENES queden recortadas */
body:not(.template-product) .js-product-container .product-image,
body:not(.template-product) .js-product-container .vs-product-image {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  overflow: hidden;
}


/* hover/foco */
body:not(.template-product) .js-product-container:hover {
  border-color: #b9bec7 !important;
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(15, 23, 42, .12);
}

/* mobile: un poquito menos de salto */
@media (max-width: 575.98px) {
  body:not(.template-product) .js-product-container:hover {
    transform: translateY(-2px);
  }
}

/* === PDP: botón estable sin parpadeos (input submit) === */

#product_form .js-addtocart.js-prod-submit-form.btn-add-to-cart {
  min-width: 200px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1 !important;
  position: relative;
  transition: filter .2s ease, box-shadow .2s ease, opacity .2s ease, transform .12s ease;
}

/* Neutralizar estilos del tema al hacer :active (que suelen ocultar o “aplastar”) */
#product_form .js-addtocart.js-prod-submit-form.btn-add-to-cart:active,
#product_form .js-addtocart.js-prod-submit-form.btn-add-to-cart.loading,
#product_form .js-addtocart.js-prod-submit-form.btn-add-to-cart.adding {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  display: inline-flex !important;
}

/* Estado mientras agrega (clase que activamos por JS) */
#product_form .js-addtocart.js-prod-submit-form.btn-add-to-cart.is-adding {
  pointer-events: none;
  cursor: progress !important;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.04) inset;
}

/* Mostrar “Agregando…” sin cambiar el ancho */
#product_form .js-addtocart.js-prod-submit-form.btn-add-to-cart.is-adding::after {
  content: "Agregando…";
  margin-left: 8px;
  font-weight: 600;
}


/* === Mobile: aire entre cards (respeta el Admin) === */
@media (max-width: 575.98px){

  /* Carruseles Swiper */
  .section-featured-home .swiper-wrapper,
  .vs-products-block-container .swiper-wrapper{
    margin-left: -4px !important;   /* compensa el padding del slide */
    margin-right: -4px !important;
    justify-content: flex-start !important;
  }

  .section-featured-home .swiper-slide,
  .vs-products-block-container .swiper-slide{
    /* ⚠️ NO tocar width / flex-basis */
    padding: 0 4px 14px 4px !important;  /* gutters + aire abajo */
    margin: 0 !important;
    box-sizing: border-box;
    height: auto !important;
  }

  /* La tarjeta no pega contra el borde del slide */
  .vs-products-block-container .js-product-container{
    width: 100% !important;
  }

  /* Listados / grillas (búsqueda, categorías) */
  .template-search .js-product-container,
  .template-category .js-product-container,
  .template-collection .js-product-container{
    margin-bottom: 14px !important;
  }
}