/* =========================================================
   APP.CSS LIMPIO Y CORREGIDO
   Catálogo profesional + carrito + modal compacto
========================================================= */

/* =============================
   BASE
============================= */

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

body{
  font-family:var(--font-main);
  background:var(--bg-page);
  color:var(--text-main);
}

button,
input{
  font-family:inherit;
}

button{
  cursor:pointer;
  border:0;
}

/* =============================
   HEADER
============================= */

.topbar{
  background:var(--bg-header);
  height:var(--header-height);
  min-height:var(--header-height);
  display:grid;
  grid-template-columns:90px 1fr auto;
  align-items:center;
  padding:12px 28px;
  color:var(--text-light);
  box-shadow:var(--shadow-md);
  position:sticky;
  top:0;
  z-index:50;
  overflow:visible;
}

.brand{
  display:contents;
}

.brand-logo{
  grid-column:1;
  width:var(--logo-size-pc, 58px);
  height:var(--logo-size-pc, 58px);
  object-fit:contain;
  background:transparent;
  transform:scale(1.8); /* CAMBIAR ACA*/
  transform-origin:center;
}

.brand h1{  /* CAMBIAR TAMAÑO A TITULO*/
  grid-column:2;
  text-align:center;
  font-family:var(--font-title);
  font-size:var(--brand-title-size-pc, 38px);
  font-weight:800;
  letter-spacing:.5px;
}

#shareCatalogBtn{
  grid-column:3;
}
/* =============================
   BOTONES GENERALES
============================= */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:999px;
  padding:12px 18px;
  font-weight:700;
  transition:.2s;
}

.btn-light{
  background:var(--btn-share);
  color:var(--btn-text-dark);
}

.btn-primary{
  background:var(--btn-primary);
  color:var(--btn-text-light);
}

.btn-primary:hover{
  background:var(--btn-primary-hover);
}

.btn-whatsapp{
  background:var(--btn-whatsapp);
  color:white;
  width:100%;
}

.btn-outline{
  background:white;
  color:var(--primary);
  border:2px solid var(--primary);
}

.full{
  width:100%;
}

/* =============================
   BUSCADOR Y CATEGORÍAS
============================= */

.search-section{
  max-width:var(--container-max);
  margin:22px auto 12px;
  padding:0 18px;
}

.search-box{
  background:var(--bg-input);
  border-radius:999px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 18px;
  box-shadow:var(--shadow-sm);
}

.search-box input{
  width:100%;
  border:0;
  outline:0;
  font-size:16px;
}

.categories-bar{
  max-width:var(--container-max);
  margin:0 auto 20px;
  padding:8px 18px 12px;
  display:flex;
  gap:10px;
  overflow-x:auto;
}

.category-btn{
  background:var(--category-bg);
  color:var(--category-text);
  border-radius:999px;
  padding:11px 18px;
  font-weight:700;
  white-space:nowrap;
  box-shadow:var(--shadow-sm);
}

.category-btn.active{
  background:var(--category-active);
  color:var(--category-active-text);
}

/* =============================
   LAYOUT Y CATÁLOGO
============================= */

.layout{
  max-width:var(--container-max);
  margin:0 auto;
  padding:0 18px 90px;
}

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

.product-card,
.premium-card{
  background:#fff;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 12px 35px rgba(15,23,42,.08);
  border:1px solid rgba(15,23,42,.06);
  transition:.25s;
   /* Optimización de renderizado */
  content-visibility:auto;
  contain-intrinsic-size:450px;
}

.product-card:hover,
.premium-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--card-shadow-hover);
}

.product-image-wrap,
.premium-image{
  height:225px;
  background:#ffffff;
  position:relative;
  overflow:visible;
}

.product-image-wrap img,
.premium-image img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:10px;
  display:block;
  transition:transform .35s ease;
}

.product-card:hover .product-image-wrap img,
.premium-card:hover .premium-image img{
  transform:scale(1.04);
}

.discount-badge{
  position:absolute;
  top:10px;
  left:10px;
  background:var(--discount);
  color:white;
  padding:7px 11px;
  border-radius:999px;
  font-weight:800;
  font-size:13px;
  z-index:2;
  box-shadow:none;
}

.favorite-btn{
  position:absolute;
  top:12px;
  right:12px;
  width:38px;
  height:38px;
  border-radius:50%;
  background:white;
  font-size:22px;
  box-shadow:var(--shadow-sm);
  z-index:2;
}

.favorite-btn.active{
  background:var(--primary);
  color:white;
}

.image-actions{
  position:absolute;
  left:18px;
  right:18px;
  bottom:-28px;
  display:flex;
  justify-content:center;
  gap:6px;
  z-index:3;
}

.image-action{
  flex:0 1 128px;
  max-width:128px;
  height:24px;
  min-height:24px;
  background:rgba(0,0,0,.88);
  color:white;
  border-radius:999px;
  padding:0 10px;
  font-size:11px;
  font-weight:900;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
}

.image-actions .image-action:only-child{
  flex:0 0 128px;
  max-width:128px;
}

.product-info,
.premium-info{
  padding:12px 14px 14px;
  text-align:center;
}

.product-info h3,
.premium-info h3{
  min-height:42px;
  margin-bottom:5px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-family:var(--font-title);
  font-size:18px;
  line-height:1.15;
  color:var(--text-title);
}

.product-meta{
  min-height:18px;
  margin:4px 0;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:nowrap;
  gap:7px;
  white-space:nowrap;
  font-size:12px;
  color:var(--text-muted);
}

.product-code,
.product-brand,
.product-stock{
  font-size:13px;
  color:var(--text-muted);
  margin-bottom:4px;
}

.product-stock{
  color:var(--success);
  font-weight:700;
  margin-bottom:7px;
}

.product-price{
  color:var(--price);
  font-size:20px;
  font-weight:900;
  line-height:1;
  margin:6px 0 5px;
}

.card-wholesale strong,
.wholesale-price strong{
  color:var(--success);
}

.card-actions{
  display:flex;
  gap:8px;
  margin:12px 0;
}

.small-btn{
  flex:1;
  border-radius:999px;
  padding:9px 10px;
  font-size:13px;
  font-weight:700;
  color:white;
}

.btn-detail{
  background:var(--btn-detail);
}

.btn-video{
  background:var(--btn-video);
}

.product-info .btn-primary{
  border-radius:10px;
  padding:11px 14px;
  margin-top:8px;
}

.card-qty{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  margin:9px 0 8px;
}

.card-qty button{
  width:28px;
  height:28px;
  border-radius:9px;
  background:var(--primary);
  color:white;
  font-size:var(--brand-title-size-mobile, 24px);
  font-weight:900;
  line-height:1;
}

.card-qty strong{
  min-width:24px;
  text-align:center;
  font-size:17px;
}

.open-variants{
  width:78% !important;
  max-width:210px;
  height:36px;
  margin:10px auto 0 !important;
  padding:0 14px !important;
  border-radius:8px !important;
  background:var(--primary) !important;
  color:#fff !important;
  border:2px solid var(--primary) !important;
  font-size:13px !important;
  font-weight:800 !important;
  box-shadow:none !important;
}

.open-variants:hover{
  background:var(--primary-dark) !important;
  transform:translateY(-1px);
}

.load-more-wrap{
  text-align:center;
  margin:28px 0;
}

/* =============================
   CARRITO FLOTANTE
============================= */

.cart-floating{
  position:fixed;
  right:22px;
  bottom:22px;
  width:64px;
  height:64px;
  border-radius:50%;
  background:var(--cart-color, var(--primary));
  color:white;
  border:2px solid rgba(255,255,255,.92);
  font-size:28px;
  box-shadow:0 8px 22px rgba(15,23,42,.28);
  z-index:80;
  transition:transform .18s ease, box-shadow .18s ease;
}

/* Cuando el cliente agrega su primer producto dentro de un modal,
   el mismo carrito flotante del inicio queda visible para que decida
   continuar comprando o revisar/finalizar su pedido. */
body.cart-has-items .cart-floating{
  z-index:120;
}

.cart-floating span{
  position:absolute;
  top:-6px;
  right:-6px;
  background:var(--secondary);
  color:white;
  border:2px solid #fff;
  border-radius:50%;
  width:26px;
  height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:800;
}

/* =============================
   OVERLAY
============================= */

.overlay{
  position:fixed;
  inset:0;
  background:var(--overlay);
  opacity:0;
  pointer-events:none;
  transition:.25s;
  z-index:90;
}

.overlay.show{
  opacity:1;
  pointer-events:auto;
}

/* =============================
   CARRITO PANEL
============================= */

.cart-panel{
  position:fixed;
  top:0;
  right:-440px;
  width:430px;
  max-width:96vw;
  height:100vh;
  background:#fff;
  z-index:100;
  transition:.3s;
  display:flex;
  flex-direction:column;
  box-shadow:var(--shadow-lg);
}

.cart-panel.show{
  right:0;
}

.cart-header{
  flex:0 0 auto;
  padding:22px 24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid #eeeeee;
}

.icon-btn{
  width:36px;
  height:36px;
  border-radius:50%;
  background:#f3f4f6;
}

.cart-items{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  padding:0 22px;
}

.cart-summary{
  flex:0 0 auto;
  border-top:1px solid #eeeeee;
  padding:14px 24px 18px;
  background:#fff;
}

.cart-bottom-info{
  width:100%;
}

.cart-total-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:12px;
}

.cart-products-total,
.cart-money-total{
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}

.cart-products-total span,
.cart-money-total span{
  font-size:15px;
  color:#111827;
}

.cart-products-total strong{
  font-size:16px;
  font-weight:900;
  color:#111827;
}

.cart-money-total span{
  color:var(--price);
  font-size:19px;
}

.cart-money-total strong,
#cartTotal{
  color:var(--price);
  font-size:22px;
  font-weight:900;
}

.cart-summary label{
  display:block;
  margin:4px 0 7px;
  font-size:15px;
  font-weight:900;
  color:#111827;
}

.cart-summary input{
  width:100%;
  height:46px;
  border-radius:10px;
  border:1px solid #e5e7eb;
  padding:0 14px;
  margin:0 0 10px;
}

.cart-actions-final{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
}

#sendWhatsappBtn,
#continueShoppingBtn{
  flex:1 1 0;
  width:auto;
  min-width:0;
  height:46px;
  margin:0;
  padding:0 10px;
  border-radius:10px;
  font-size:13px;
  font-weight:900;
  line-height:1.1;
  white-space:normal;
}

#sendWhatsappBtn{
  background:#16a34a;
  color:white;
}

#continueShoppingBtn{
  background:var(--primary);
  color:white;
}

.premium-cart-item,
.cart-item{
  display:grid;
  grid-template-columns:78px 1fr;
  gap:16px;
  padding:20px 0;
  border-bottom:1px solid #eeeeee;
}

.premium-cart-item img,
.cart-item img{
  width:78px;
  height:78px;
  border-radius:10px;
  object-fit:cover;
}

.cart-item-info{
  flex:1;
}

.cart-item-info h4{
  font-size:14px;
  font-weight:900;
  margin-bottom:7px;
}

.cart-item-info small,
.cart-variant-line{
  display:block;
  color:#111827;
  font-size:13px;
  margin-bottom:7px;
  letter-spacing:.1px;
}

.cart-price-line{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  width:100%;
  margin-top:8px;
  margin-bottom:10px;
}

.cart-price-line span{
  font-size:13px;
  color:#111827;
}

.cart-price-line strong{
  color:var(--price);
  font-size:16px;
  font-weight:900;
  white-space:nowrap;
}

.cart-item-actions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  margin-top:8px;
}

.cart-item-actions button{
  width:26px;
  height:26px;
  border-radius:8px;
  padding:0;
  background:var(--primary);
  color:white;
  font-weight:700;
}

.cart-remove{
  background:transparent !important;
  color:#111 !important;
  font-size:17px;
  box-shadow:none;
}

/* =============================
   MODAL VARIANTES PREMIUM
   Qué hace:
   - Abre la ventana de tallas, colores y precios por mayor.
   - Evita espacios blancos grandes.
   - Acomoda imagen, datos y precio por mayor en una cabecera profesional.
   - Si hay 1 color, el botón queda pequeño; si hay muchos, baja a nuevas filas.
============================= */

.modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:14px;
  z-index:110;
}

.modal.show{
  display:flex;
}

/* Caja general del modal de variantes */
.modal-content{
  width:fit-content;
  min-width:620px;
  max-width:94vw;
  max-height:90vh;
  overflow:auto;
  background:#fff;
  border-radius:18px;
  padding:18px 20px;
  box-shadow:0 25px 70px rgba(15,23,42,.28);
  position:relative;
}

/* Título del modal */
.modal-content h2{
  text-align:center;
  font-size:18px;
  font-weight:900;
  margin:2px 0 16px;
  color:#111827;
}

/* Botón X para cerrar el modal */
.modal-close{
  position:absolute;
  right:16px;
  top:16px;
  width:36px;
  height:36px;
  border-radius:50%;
  background:#f3f4f6;
  color:#111827;
  font-size:18px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Cabecera: imagen izquierda + datos + mayoreo */
.variant-layout{
  display:grid;
  grid-template-columns:150px minmax(430px,1fr);
  gap:14px;
  align-items:start;
  width:100%;
  max-width:760px;
  margin:0 auto 14px;
  padding-bottom:14px;
  border-bottom:1px solid #eeeeee;
}

/* Imagen del producto dentro del modal */
.variant-image-wrap{
  width:150px;
  height:150px;
  background:#f8fafc;
  border-radius:12px;
  padding:8px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.variant-image-wrap img{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:10px;
}

/* Datos del producto y caja de precio mayorista */
.variant-info{
  display:grid;
  grid-template-columns:minmax(190px,1fr) 175px;
  column-gap:14px;
  align-items:start;
  width:100%;
  min-width:0;
}

/* Estos datos quedan en la columna izquierda */
.variant-info h3,
#variantCode,
#variantBrand,
#variantDiscount,
#variantOldPrice,
#variantPrice{
  grid-column:1;
}

.variant-info h3{
  font-size:18px;
  line-height:1.1;
  font-weight:900;
  color:#111827;
  margin:0 0 5px;
}

.variant-info p{
  font-size:12px;
  color:#1f2937;
  margin:0 0 4px;
}

/* Precio principal del producto */
#variantPrice{
  font-size:25px;
  line-height:1;
  color:var(--price);
  font-weight:900;
  margin:6px 0 0;
}

/* Etiqueta de descuento */
#variantDiscount{
  width:max-content;
  min-width:auto;
  padding:5px 9px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  background:var(--discount);
  color:#fff;
  position:static;
  box-shadow:none;
  margin:2px 0 4px;
}

/* Precio por mayor: al lado derecho de la cabecera */
.wholesale-box{
  grid-column:2;
  grid-row:1 / span 7;
  justify-self:end;
  width:175px;
  min-width:175px;
  max-width:175px;
  margin:0 0 0 auto;
  padding:0;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:10px;
  overflow:hidden;
  box-shadow:none;
}

.wholesale-box h4{
  margin:0;
  padding:7px 8px;
  font-size:10px;
  line-height:1;
  font-weight:900;
  color:#111827;
  border-bottom:1px solid #eeeeee;
}

.wholesale-row{
  display:grid;
  grid-template-columns:78px 1fr;
  align-items:center;
  gap:6px;
  padding:6px 8px;
  border-bottom:1px solid #eeeeee;
}

.wholesale-row:last-child{
  border-bottom:none;
}

.wholesale-row span,
.wholesale-row strong{
  font-size:9.5px;
  line-height:1.15;
  white-space:nowrap;
}

.wholesale-row span{
  color:#111827;
  font-weight:500;
}

.wholesale-row strong{
  color:#111827;
  font-weight:900;
  text-align:right;
}

/* Secciones de opciones: color, talla y cantidad */
.option-section{
  width:100%;
  max-width:760px;
  margin:13px auto 0;
}

.option-section h4,
.quantity-section h4{
  font-size:13px;
  font-weight:900;
  color:#111827;
  margin-bottom:8px;
}

/* Contenedores de botones: no estiran una sola opción */
.option-grid,
.size-grid{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:flex-start;
  width:100%;
  max-width:760px;
}

.color-option,
.size-option{
  font-weight:900;
}

/* Botón de color: tamaño fijo para que 1 color no ocupe todo el ancho */
.color-card{
  width:140px;
  min-width:140px;
  max-width:140px;
  height:48px;
  flex:none;
  border-radius:10px;
  background:#fff;
  border:2px solid #e5e7eb;
  padding:5px 8px;
  display:grid;
  grid-template-columns:28px 1fr;
  grid-template-rows:1fr 1fr;
  column-gap:7px;
  align-items:center;
  position:relative;
  color:#111827;
}

.color-card .color-dot{
  grid-row:1 / span 2;
  width:28px;
  height:28px;
  border-radius:50%;
  border:1px solid #d1d5db;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);
}

.color-card strong{
  font-size:12px;
  font-weight:900;
  line-height:1;
}

.color-card small{
  font-size:10px;
  color:#111827;
  font-weight:700;
}

/* Color seleccionado */
.color-card.active{
  background:#fff;
  color:#111827;
  border-color:var(--primary);
}

.color-card.active::after{
  content:"✓";
  position:absolute;
  right:-8px;
  top:-8px;
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--primary);
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:900;
}

/* Botón normal para presentación, tamaño, capacidad, sabor, etc. */
.button-card{
  width:110px;
  min-width:110px;
  max-width:110px;
  min-height:42px;
  flex:none;
  border-radius:10px;
  border:2px solid #e5e7eb;
  background:#fff;
  color:#111827;
  padding:6px 10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
}

.button-card strong{
  font-size:12px;
  font-weight:900;
}

.button-card small{
  font-size:10px;
}

.button-card.active{
  border-color:var(--primary);
  background:var(--primary);
  color:#fff;
}

/* Botón de talla: tamaño fijo y compacto */
.size-card,
.size-option{
  width:86px;
  min-width:86px;
  max-width:86px;
  height:46px;
  flex:none;
  border-radius:10px;
  border:2px solid #e5e7eb;
  background:#fff;
  color:#111827;
  padding:5px 8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  font-weight:900;
}

.size-card strong,
.size-option strong{
  font-size:14px;
  line-height:1;
}

.size-card small,
.size-option small{
  font-size:10px;
  font-weight:700;
  color:#111827;
}

/* Talla seleccionada */
.size-card.active,
.size-option.active{
  background:var(--primary);
  border-color:var(--primary);
  color:white;
}

.size-card.active small,
.size-option.active small{
  color:white;
}

/* Opción sin stock */
.size-card.disabled,
.size-option:disabled,
.size-option.disabled{
  opacity:.45;
  background:#f3f4f6;
  color:#6b7280;
  cursor:not-allowed;
}

/* Cantidad: permite escribir número y usar + / - */
.quantity-section{
  width:100%;
  max-width:760px;
  margin:13px auto 0;
}

.quantity-control{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:0;
  padding:0;
  border-radius:0;
}

.qty-btn{
  width:32px;
  height:32px;
  border-radius:9px;
  background:var(--primary);
  color:#fff;
  font-size:19px;
  font-weight:900;
}

.variant-qty-input,
#variantQty{
  width:52px;
  height:32px;
  text-align:center;
  font-size:14px;
  font-weight:900;
  color:#111827;
  border:1px solid #e5e7eb;
  border-radius:8px;
  outline:none;
  background:#fff;
  appearance:textfield;
  -moz-appearance:textfield;
}

.variant-qty-input::-webkit-outer-spin-button,
.variant-qty-input::-webkit-inner-spin-button,
#variantQty::-webkit-outer-spin-button,
#variantQty::-webkit-inner-spin-button{
  -webkit-appearance:none;
  appearance:none;
  margin:0;
}

/* Mensaje de stock */
.stock-message{
  width:100%;
  max-width:760px;
  margin:13px auto;
  padding:10px 14px;
  border-radius:10px;
  background:#eaf8ef;
  color:#111111;
  text-align:center;
  font-size:13px;
  font-weight:800;
}

/* Oculta el botón agregar si el carrito se actualiza directo */
#addVariantToCart{
  display:none !important;
}

/* Botón cancelar del modal de variantes */
#cancelVariant{
  width:180px;
  max-width:90%;
  height:42px;
  border-radius:999px;
  font-size:14px;
  font-weight:800;
  margin:18px auto 0;
  display:block;

  background:var(--primary);
  color:#fff;
  border:none;

  transition:.25s;
}

#cancelVariant:hover{
  background:var(--primary-dark);
}


/* =============================
   FOOTER
============================= */

.footer{
  background:var(--bg-footer);
  color:var(--text-footer);
  padding:14px 22px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.footer strong{
  font-size:15px;
}

.footer p{
  font-size:13px;
  margin-top:4px;
}

.footer small{
  display:block;
  font-size:12px;
  margin-top:3px;
}

.created-by{
  font-weight:800;
}

.social-links{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  flex-wrap:wrap;
  margin-right:96px; /* espacio para que el carrito no tape las redes */
}

.social-icon{
  width:42px;
  height:42px;
  border-radius:50%;
  background:#ffffff;
  color:#111827;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  box-shadow:0 8px 22px rgba(0,0,0,.18);
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease, color .22s ease;
}

.social-icon svg{
  width:20px;
  height:20px;
  display:block;
  fill:currentColor;
}

.social-icon:hover{
  transform:translateY(-4px) scale(1.06);
  box-shadow:0 12px 30px rgba(0,0,0,.24);
}

.social-whatsapp{
  color:#25D366;
}

.social-facebook{
  color:#1877F2;
}

.social-instagram{
  color:#E1306C;
}

.social-tiktok{
  color:#111827;
}

.social-youtube{
  color:#FF0000;
}

.social-whatsapp:hover{
  background:#25D366;
  color:#fff;
}

.social-facebook:hover{
  background:#1877F2;
  color:#fff;
}

.social-instagram:hover{
  background:linear-gradient(45deg,#FEDA75,#FA7E1E,#D62976,#962FBF,#4F5BD5);
  color:#fff;
}

.social-tiktok:hover{
  background:#000;
  color:#fff;
}

.social-youtube:hover{
  background:#FF0000;
  color:#fff;
}

/* =============================
   ESTADOS / TOAST / SKELETON
============================= */

.empty-state,
.empty-cart{
  background:white;
  border-radius:18px;
  padding:30px;
  text-align:center;
}

.toast{
  position:fixed;
  left:50%;
  bottom:30px;
  transform:translateX(-50%) translateY(120px);
  padding:14px 24px;
  border-radius:40px;
  font-weight:700;
  color:white;
  z-index:99999;
  opacity:0;
  transition:.30s;
  box-shadow:0 10px 30px rgba(0,0,0,.20);
}

.toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

.toast.success{
  background:#22c55e;
}

.toast.error{
  background:#ef4444;
}

.toast.info{
  background:#3b82f6;
}

.skeleton-card{
  background:white;
  border-radius:var(--card-radius);
  padding:14px;
  box-shadow:var(--card-shadow);
}

.skeleton-img,
.skeleton-line{
  background:linear-gradient(90deg,#eee,#f7f7f7,#eee);
  background-size:200% 100%;
  animation:skeleton 1.2s infinite;
}

.skeleton-img{
  height:230px;
  border-radius:16px;
}

.skeleton-line{
  height:16px;
  border-radius:999px;
  margin-top:14px;
}

.skeleton-line.small{
  width:60%;
}

.skeleton-line.price{
  width:40%;
  height:22px;
}

/*========================================
RESPONSIVE TABLET
Qué hace:
- Ajusta el modal para tablets.
- Mantiene mayoreo a la derecha sin romper el diseño.
========================================*/

@media(max-width:850px){

  .modal-content{
    width:96vw;
    min-width:0;
    padding:14px;
  }

  .variant-layout{
    grid-template-columns:125px 1fr;
    max-width:100%;
    gap:12px;
  }

  .variant-image-wrap{
    width:125px;
    height:125px;
  }

  .variant-info{
    grid-template-columns:minmax(145px,1fr) 150px;
    column-gap:10px;
  }

  .wholesale-box{
    width:150px;
    min-width:150px;
    max-width:150px;
  }

  .wholesale-box h4{
    font-size:9px;
    padding:6px 7px;
  }

  .wholesale-row{
    grid-template-columns:74px 1fr;
    gap:5px;
    padding:6px 7px;
  }

  .wholesale-row span,
  .wholesale-row strong{
    font-size:8.8px;
  }

  #variantPrice{
    font-size:23px;
  }

}

/*========================================
RESPONSIVE CELULAR
Qué hace:
- En celular el modal usa todo el ancho disponible.
- Imagen + datos + mayoreo quedan en una fila compacta.
- Si hay un solo color o talla, no se estira al 100%.
========================================*/

@media(max-width:600px){

  .topbar{
    grid-template-columns:48px 1fr 82px;
    align-items:center;
    gap:6px;
    padding:10px 10px;
  }

  .brand{
    display:contents;
  }

  .brand-logo{  /*CAMBIAR ACA CEL*/
    grid-column:1;
    width:var(--logo-size-mobile, 56px);
    height:var(--logo-size-mobile, 56px);
  }

  .brand h1{
  grid-column:2;
  text-align:center;
  font-size:20px;
  line-height:1.05;
  white-space:normal;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

  #shareCatalogBtn{
    grid-column:3;
    width:77px;
    height:42px;
    margin:0;
    padding:0;
    font-size:0;
    border-radius:18px;
    white-space:normal;
    line-height:1;
    overflow:hidden;
  }

#shareCatalogBtn::after{
    content:"🔗\A Compartir\A Catálogo";
    white-space:pre-line;
    font-size:10px;
    font-weight:900;
    line-height:1.05;
    text-align:center;
}

   body.mobile-view-large .catalog-grid{
  grid-template-columns:1fr !important;
}

body.mobile-view-large .product-image-wrap,
body.mobile-view-large .premium-image{
  height:280px;
}

body.mobile-view-compact .catalog-grid{
  grid-template-columns:repeat(2, minmax(0,1fr)) !important;
  gap:10px;
}

body.mobile-view-compact .product-image-wrap,
body.mobile-view-compact .premium-image{
  height:165px;
}

  .modal{
    padding:8px;
    align-items:flex-start;
  }

  .modal-content{
    width:100%;
    min-width:0;
    max-width:100%;
    max-height:96vh;
    border-radius:16px;
    padding:14px;
  }

  .modal-content h2{
    font-size:15px;
    padding-right:36px;
    margin-bottom:12px;
  }

  .variant-layout{
    grid-template-columns:108px 1fr;
    gap:9px;
    max-width:100%;
    padding-bottom:12px;
    margin-bottom:12px;
  }

  .variant-image-wrap{
    width:108px;
    height:108px;
    padding:6px;
  }

  .variant-info{
    grid-template-columns:minmax(82px,1fr) 126px;
    column-gap:7px;
    align-items:start;
  }

  .variant-info h3{
    font-size:15px;
    margin-bottom:4px;
  }

  .variant-info p{
    font-size:10.5px;
    margin-bottom:3px;
  }

  #variantDiscount{
    font-size:10px;
    padding:4px 7px;
    margin:2px 0 3px;
  }

  #variantPrice{
    font-size:20px;
    margin-top:5px;
  }

  .wholesale-box{
    grid-column:2;
    grid-row:1 / span 7;
    justify-self:end;
    width:126px;
    min-width:126px;
    max-width:126px;
  }

  .wholesale-box h4{
    font-size:7.8px;
    padding:5px;
  }

  .wholesale-row{
    grid-template-columns:64px 1fr;
    gap:3px;
    padding:5px;
  }

  .wholesale-row span,
  .wholesale-row strong{
    font-size:7.6px;
    white-space:nowrap;
  }

  .option-section,
  .quantity-section,
  .stock-message,
  #cancelVariant{
    max-width:100%;
  }

  .option-section{
    margin-top:12px;
  }

  .option-section h4,
  .quantity-section h4{
    font-size:13px;
    margin-bottom:8px;
  }

  .option-grid,
  .size-grid{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }

  .color-card{
    width:120px;
    min-width:120px;
    max-width:120px;
    height:42px;
    padding:4px 7px;
    grid-template-columns:24px 1fr;
  }

  .color-card .color-dot{
    width:24px;
    height:24px;
  }

  .color-card strong{
    font-size:11px;
  }

  .color-card small{
    font-size:9px;
  }

  .button-card{
    width:105px;
    min-width:105px;
    max-width:105px;
    min-height:40px;
  }

  .size-card,
  .size-option{
    width:72px;
    min-width:72px;
    max-width:72px;
    height:38px;
    padding:4px 7px;
  }

  .size-card strong,
  .size-option strong{
    font-size:13px;
  }

  .size-card small,
  .size-option small{
    font-size:9px;
  }

  .image-actions{
    left:14px;
    right:14px;
    bottom:-24px;
    gap:5px;
    justify-content:center;
  }

  .image-action{
    height:22px;
    min-height:22px;
    padding:0 8px;
    font-size:10px;
    border-radius:999px;
    flex:0 1 118px;
    max-width:118px;
  }

  .image-actions .image-action:only-child{
    max-width:118px;
    flex:0 0 118px;
  }

  .product-price{
    font-size:20px;
    margin:5px 0 4px;
  }

  .cart-panel{
    width:100%;
    max-width:100%;
    right:-100%;
  }

  .footer{
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:14px 16px 58px;
    gap:6px;
}

  .footer strong{
    font-size:14px;
  }

  .footer p{
    font-size:12px;
    margin-top:3px;
  }

  .footer small{
    font-size:11px;
    margin-top:2px;
  }

  .social-links{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    margin-top:8px;
    margin-right:0;
    padding-right:0;
    flex-wrap:wrap;
  }

  .social-icon{
    width:36px;
    height:36px;
  }

  .social-icon svg{
    width:18px;
    height:18px;
  }

  .cart-floating{
    right:16px;
    bottom:72px;
    width:58px;
    height:58px;
    font-size:25px;
  }

}


/* MODAL DETALLE PRODUCTO
   Qué hace:
   - Abre la ventana de descripción del producto.
   - Usa el color principal en precio y botón Cerrar.
*/

.detail-modal-content{
  max-width:900px;
}

.detail-layout{
  display:grid;
  grid-template-columns:300px 1fr;
  gap:24px;
  align-items:center;
  margin-bottom:20px;
}

.detail-image-wrap{
  width:300px;
  height:300px;
  background:#f8fafc;
  border-radius:14px;
  padding:10px;
}

.detail-image-wrap img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.detail-info h3{
  font-size:22px;
  font-weight:900;
  margin-bottom:8px;
}

.detail-info p{
  margin-bottom:6px;
  color:#111827;
}

#detailPrice{
    color:var(--price) !important;
    font-size:30px !important;
    font-weight:900 !important;
    line-height:1;
    margin-top:12px;
}

.detail-description{
  border-top:1px solid #eeeeee;
  padding-top:16px;
  margin-top:10px;
}

.detail-description h4{
  font-size:15px;
  font-weight:900;
  margin-bottom:8px;
}

.detail-description p{
  white-space:pre-line;
  line-height:1.6;
  font-size:15px;
}
#closeDetailBtn{
    display:flex !important;
    align-items:center;
    justify-content:center;

    width:180px;
    height:42px;

    margin:22px auto 0;

    border:none;
    border-radius:999px;

    background:var(--primary) !important;
    color:#fff !important;

    font-size:15px;
    font-weight:800;

    cursor:pointer;
}

.detail-close-btn:hover{
    filter:brightness(.95);
    transform:translateY(-2px);
}

.detail-close-btn:active{
    transform:scale(.98);
}

@media(max-width:600px){
 .detail-layout{
    grid-template-columns:1fr;
    gap:16px;
  }

   .detail-image-wrap{
    width:100%;
    max-width:320px;
    height:320px;
    margin:0 auto;
  }

  #closeDetailBtn{
    width:140px;
    height:38px;
  }
}

/* =========================================================
   CORRECCIÓN FINAL COMPLETA: DESCUENTO + CANTIDADES
   Pegar al final del CSS.
========================================================= */

/* Precio anterior tachado en catálogo */
.product-old-price{
  font-size:15px;
  color:#777;
  text-decoration:line-through;
  text-decoration-color:#ff2b6a;
  text-decoration-thickness:2px;
  margin:4px 0 2px;
  font-weight:600;
}
/* Precio anterior tachado en modal de variantes */
#variantOldPrice,
.variant-old-price{
  grid-column:1;
  display:block;
  font-size:14px;
  color:#777;
  text-decoration:line-through;
  text-decoration-color:#ff2b6a;
  text-decoration-thickness:2px;
  margin:4px 0 2px;
  font-weight:600;
}

/* Precio anterior tachado en modal detalle */
#detailOldPrice,
.detail-old-price{
  display:block;
  font-size:16px;
  color:#777;
  text-decoration:line-through;
  text-decoration-color:#ff2b6a;
  text-decoration-thickness:2px;
  margin:8px 0 2px;
  font-weight:600;
}

/* Precio anterior tachado en carrito */
.cart-old-price{
  display:block;
  font-size:12px;
  color:#777;
  text-decoration:line-through;
  text-decoration-color:#ff2b6a;
  text-decoration-thickness:2px;
  margin-bottom:2px;
  font-weight:600;
}

/* Texto del descuento en carrito */
.cart-discount-line{
  display:block;
  font-size:12px;
  color:var(--discount);
  font-weight:900;
  margin-bottom:3px;
}

/* Precio final */
.product-price,
#variantPrice,
#detailPrice{
  color:var(--price);
  font-weight:900;
}

/* Inputs para escribir cantidad directa */
.card-qty-input,
.cart-qty-input{
  width:48px;
  height:30px;
  text-align:center;
  border:1px solid #e5e7eb;
  border-radius:8px;
  font-weight:900;
  font-size:15px;
  color:#111827;
  outline:none;
  background:#fff;
}

.card-qty-input:focus,
.cart-qty-input:focus{
  border-color:var(--primary);
}

.card-qty-input::-webkit-outer-spin-button,
.card-qty-input::-webkit-inner-spin-button,
.cart-qty-input::-webkit-outer-spin-button,
.cart-qty-input::-webkit-inner-spin-button{
  -webkit-appearance:none;
  appearance:none;
  margin:0;
}

/* Mayoreo compacto en tarjeta */
.card-wholesale-list.wholesale-compact{
  width:100%;
  max-width:238px;
  margin:8px auto 10px;
  padding:6px 7px;

  background:var(--wh-bg);
  border:1px solid var(--wh-border);
  border-radius:var(--wh-radius);
}

.wholesale-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  color:var(--wh-title);
  font-size:9.5px;
  font-weight:900;
  line-height:1;
  margin-bottom:5px;
  white-space:nowrap;
}

.wholesale-icon{
    font-size:13px;
    color:var(--wh-icon);
  line-height:1;
}

.wholesale-tiers{
  display:grid;
  align-items:center;
  gap:4px;
}

.wholesale-tier{
  text-align:center;
  padding:0 5px;
  border-right:1px solid #e5e7eb;
}

.wholesale-tier:last-child{
  border-right:none;
}

.wholesale-tier span{
  display:block;
  font-size:10px;
  font-weight:900;
  line-height:1.05;
  color:var(--wh-tier);
}

.wholesale-tier strong{
  display:block;
  margin-top:2px;
  font-size:10.5px;
  font-weight:900;
  line-height:1.05;
  color:var(--wh-price);
}
/* DISTRIBUCIÓN SEGÚN CANTIDAD DE RANGOS */

/* 1 precio por mayor */
.wholesale-one{
    grid-template-columns:1fr;
}

/* 2 precios por mayor */
.wholesale-two{
    grid-template-columns:repeat(2,1fr);
}

/* 3 o más precios por mayor */
.wholesale-three{
    grid-template-columns:repeat(3,1fr);
}

/* Si hay un solo rango */
.wholesale-one .wholesale-tier{
    border-right:none;
    text-align:center;
}

/* Si hay dos rangos */
.wholesale-two .wholesale-tier:last-child{
    border-right:none;
}

/* Si hay tres rangos */
.wholesale-three .wholesale-tier:last-child{
    border-right:none;
}

/* Compatibilidad por si alguna tarjeta aún usa el diseño anterior */
.card-wholesale-list:not(.wholesale-compact){
  margin:4px 0 8px;
}

.card-wholesale{
  display:flex;
  justify-content:center;
  gap:5px;
  font-size:11px;
  font-weight:600;
  line-height:1.2;
  margin-bottom:2px;
}

.card-wholesale span{
  color:#555;
}

.card-wholesale strong{
  color:var(--success);
  font-weight:700;
}
@media(max-width:600px){
  .card-wholesale-list.wholesale-compact{
    max-width:220px;
    margin:7px auto 9px;
    padding:6px;
  }

  .wholesale-title{
    font-size:9px;
    gap:4px;
  }

  .wholesale-icon{
    font-size:12px;
  }

  .wholesale-tier{
    padding:0 4px;
  }

  .wholesale-tier span{
    font-size:9.5px;
  }

  .wholesale-tier strong{
    font-size:10px;
  }
}

/* Opciones no se estiran */
.option-grid,
.size-grid{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
}

.option-grid .color-card,
.option-grid .color-option{
  width:140px !important;
  min-width:140px !important;
  max-width:140px !important;
  flex:0 0 140px !important;
}

.size-grid .size-card,
.size-grid .size-option{
  width:86px !important;
  min-width:86px !important;
  max-width:86px !important;
  flex:0 0 86px !important;
}

@media(max-width:600px){
  .option-grid,
  .size-grid{
    gap:8px !important;
  }

  .option-grid .color-card,
  .option-grid .color-option{
    width:120px !important;
    min-width:120px !important;
    max-width:120px !important;
    flex:0 0 120px !important;
  }

  .size-grid .size-card,
  .size-grid .size-option{
    width:72px !important;
    min-width:72px !important;
    max-width:72px !important;
    flex:0 0 72px !important;
  }
}

/* =============================
   BARRA INSTALAR APP - DISEÑO PREMIUM
   Qué hace:
   - Aparece arriba del logo solo cuando Chrome permite instalar la PWA.
   - Usa los colores principales del catálogo.
   - Al instalar la app, desaparece.
   - En escritorio se oculta para no molestar.
============================= */

.install-app-bar{
  width:100%;
  min-height:46px;
  padding:6px 14px;

  display:none;
  align-items:center;
  justify-content:center;
  gap:18px;

  position:sticky;
  top:0;
  z-index:500;

  background:var(--install-bg, var(--bg-header));
  color:#fff;

  box-shadow:0 8px 24px rgba(0,0,0,.18);
}

.install-app-bar div{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-width:0;
   font-size:.90rem;
}

.install-app-bar strong{
  font-family:var(--font-title);
  font-size:20px;
  font-weight:900;
  line-height:1;
  color:#fff;
  white-space:nowrap;
}

.install-app-bar span{
  display:none;
}

#installAppBtn{
  min-width:122px;
  height:42px;
  padding:0 22px;

  border:none;
  border-radius:999px;

  background:#fff;
  color:var(--install-bg, var(--bg-header));

  font-family:var(--font-main);
  font-size:16px;
  font-weight:900;

  box-shadow:0 8px 22px rgba(0,0,0,.14);
  cursor:pointer;
  white-space:nowrap;
}

#closeInstallBar{
  width:34px;
  height:34px;
  min-width:34px;

  border:none;
  border-radius:50%;

  background:rgba(255,255,255,.18);
  color:#fff;

  font-size:18px;
  font-weight:900;
  cursor:pointer;
}

@media(max-width:600px){
  .install-app-bar{
    min-height:42px;
    padding:5px 10px;
    gap:10px;
  }

  .install-app-bar strong{
    font-size:14px;
  }

  #installAppBtn{
    min-width:82px;
    height:30px;
    padding:0 12px;
    font-size:12px;
  }

  #closeInstallBar{
    width:26px;
    height:26px;
    min-width:26px;
    font-size:14px;
  }
}

  #closeInstallBar{
    width:30px;
    height:30px;
    min-width:30px;
    font-size:16px;
  }
}

@media(min-width:900px){
  .install-app-bar{
    display:none !important;
  }
}


/* Ocultamiento firme de botones controlados desde Google Sheets. */
.quick-filter-btn.sheet-hidden,
.quick-filter-btn[hidden]{
  display:none !important;
}

/* =============================
   BUSCADOR + FILTROS RÁPIDOS
   ❤️ Favoritos | 🔥 Más vendidos | 🏷️ Ofertas
============================= */

.search-tools{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
}

.search-tools .search-box{
    flex:1;
    min-width:0;
}

.quick-filter-btn{
  width:46px;
  height:46px;
  min-width:46px;
  border-radius:50%;
  background:#fff;
  color:var(--primary);
  font-size:19px;
  font-weight:900;
  box-shadow:var(--shadow-sm);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.2s;
}

.quick-filter-btn.active{
  background:var(--primary);
  color:#fff;
  transform:translateY(-1px);
}

@media(max-width:600px){
  .search-section{
    padding:0 14px;
  }

  .search-box{
    padding:13px 14px;
  }

  .quick-filter-btn{
    width:42px;
    height:42px;
    min-width:42px;
    font-size:17px;
  }
}

/* BUSCADOR + FILTROS EN UNA SOLA FILA EN CELULAR */
.search-tools{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
}

.search-tools .search-box{
  flex:1;
  min-width:0;
}

.search-filters{
  display:flex;
  align-items:center;
  gap:7px;
  flex:none;
}

.quick-filter-btn{
  width:42px;
  height:42px;
  min-width:42px;
  border-radius:50%;
}

@media(max-width:600px){
  .search-section{
    margin:18px auto 10px;
    padding:0 12px;
  }

  .search-tools{
    gap:6px;
  }

  .search-box{
    height:48px;
    padding:0 13px;
  }

  .search-box input{
    font-size:14px;
  }

  .search-filters{
    gap:5px;
  }

  .quick-filter-btn{
    width:36px;
    height:36px;
    min-width:36px;
    font-size:15px;
  }
}
/* CORRECCIÓN CARRITO EN CELULAR */
@media(max-width:600px){

  .cart-panel{
    width:100%;
    max-width:100%;
    height:100dvh;
    max-height:100dvh;
    right:-100%;
    overflow:hidden;
  }

  .cart-panel.show{
    right:0;
  }

  .cart-items{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding:0 18px;
  }

  .cart-summary{
    flex:0 0 auto;
    padding:12px 18px calc(18px + env(safe-area-inset-bottom));
    background:#fff;
  }

  .cart-actions-final{
    display:flex;
    gap:8px;
  }

  #sendWhatsappBtn,
  #continueShoppingBtn{
    height:44px;
    font-size:12px;
  }
}

/* =========================================================
   CORRECCIÓN FINAL FOOTER CELULAR
   Pegar al final para que nada lo sobrescriba.
   Reduce la altura del footer en móviles.
========================================================= */

@media(max-width:600px){

  .footer{
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;

    padding:12px 16px 34px !important;
    gap:4px !important;

    min-height:auto !important;
  }

  .footer strong{
    font-size:13px !important;
    line-height:1.1 !important;
    margin:0 !important;
  }

  .footer p{
    font-size:11px !important;
    line-height:1.25 !important;
    margin:3px 0 0 !important;
  }

  .footer small{
    font-size:10.5px !important;
    line-height:1.2 !important;
    margin-top:2px !important;
  }

  .created-by{
    margin-top:3px !important;
  }

  .social-links{
    width:100% !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;

    gap:10px !important;
    margin-top:10px !important;
    margin-right:0 !important;
    padding:0 !important;

    flex-wrap:wrap !important;
  }

  .social-icon{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;
  }

  .social-icon svg{
    width:17px !important;
    height:17px !important;
  }

  .layout{
    padding-bottom:42px !important;
  }

  .cart-floating{
    right:16px !important;
    bottom:56px !important;
    width:54px !important;
    height:54px !important;
    font-size:23px !important;
  }

}
/* =========================================================
   CARRUSEL DETALLE - SOLO BOLITAS PROFESIONALES
========================================================= */

/* Oculta flechas */
.detail-gallery-btn{
  display:none !important;
}

/* Contenedor de imagen */
.detail-gallery{
  position:relative;
  overflow:hidden;
}

/* Imagen */
.detail-gallery img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

/* Bolitas */
.detail-dots{
  position:absolute;
  left:0;
  right:0;
  bottom:12px;
  display:none;
  justify-content:center;
  align-items:center;
  gap:9px;
  z-index:20;
}

/* Cada bolita */
.detail-dot{
  width:12px;
  height:12px;
  border-radius:50%;
  background:#d1d5db;
  border:2px solid #fff;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}

/* Bolita activa */
.detail-dot.active{
  background:var(--primary);
  transform:scale(1.25);
}

/* =========================================================
   DISEÑO FINAL CELULAR: SELECTOR EN HEADER + COMPARTIR FOOTER
   - PC y tablet quedan igual.
   - Solo celular cambia el botón Compartir del header por selector de vista.
   - Botón Compartir corregido para no montarse con el carrito.
========================================================= */

.mobile-view-toggle,
.footer-share-mobile{
  display:none !important;
}

@media(max-width:600px){

  /* Header en celular: logo | título | selector */
  .topbar{
    grid-template-columns:72px 1fr 82px !important;
    align-items:center !important;
    gap:6px !important;
    padding:10px 10px !important;
  }

  .brand{
    display:contents !important;
  }

  .brand-logo{
    grid-column:1 !important;
    width:var(--logo-size-mobile, 56px) !important;
    height:var(--logo-size-mobile, 56px) !important;
    justify-self:start !important;
  }

  .brand h1{ /* CAMBIAR TAMAÑO A TITULO CEL */
    grid-column:2 !important;
    text-align:center !important;
    font-size:var(--brand-title-size-mobile, 24px) !important;
    line-height:1.05 !important;
    white-space:normal !important;

    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:center !important;
  }

  /* En celular ya no mostramos el botón grande de compartir arriba */
  #shareCatalogBtn{
    display:none !important;
  }

  /* Selector integrado al header */
  .header-view-toggle{
    grid-column:3 !important;
    display:flex !important;
    justify-content:flex-end !important;
    align-items:center !important;
    gap:5px !important;
    width:82px !important;
    height:42px !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    color:#fff !important;
  }

  .view-btn{
    width:34px !important;
    height:38px !important;
    min-width:34px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:10px !important;
    background:transparent !important;
    color:rgba(255,255,255,.82) !important;
    box-shadow:none !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:1px !important;

    font-family:var(--font-main) !important;
    font-weight:900 !important;
    line-height:1 !important;
    transition:.22s ease !important;
  }

  .view-btn .view-icon{
    display:block !important;
    font-size:24px !important;
    line-height:.82 !important;
    font-weight:900 !important;
  }

  .view-btn small{
    display:block !important;
    font-size:10px !important;
    line-height:1 !important;
    font-weight:900 !important;
  }

  .view-btn.active{
    color:#fff !important;
    transform:translateY(-1px) !important;
  }

  .view-btn.active .view-icon{
    text-shadow:0 0 10px rgba(255,255,255,.45) !important;
  }

  .view-separator{
    width:1px !important;
    height:26px !important;
    background:rgba(255,255,255,.55) !important;
    display:block !important;
  }

  /* Vista grande: 1 producto por fila */
  body.mobile-view-large .catalog-grid{
    grid-template-columns:1fr !important;
  }

  body.mobile-view-large .product-image-wrap,
  body.mobile-view-large .premium-image{
    height:280px !important;
  }

  /* Vista compacta: 2 productos por fila */
  body.mobile-view-compact .catalog-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:10px !important;
  }

  body.mobile-view-compact .layout{
    padding-left:10px !important;
    padding-right:10px !important;
  }

  body.mobile-view-compact .product-card,
  body.mobile-view-compact .premium-card{
    border-radius:15px !important;
  }

  body.mobile-view-compact .product-image-wrap,
  body.mobile-view-compact .premium-image{
    height:165px !important;
  }

  body.mobile-view-compact .product-image-wrap img,
  body.mobile-view-compact .premium-image img{
    padding:6px !important;
  }

  body.mobile-view-compact .product-info,
  body.mobile-view-compact .premium-info{
    padding:28px 8px 10px !important;
  }

  body.mobile-view-compact .product-info h3,
  body.mobile-view-compact .premium-info h3{
    font-size:13px !important;
    line-height:1.15 !important;
  }

  body.mobile-view-compact .product-meta{
    font-size:10px !important;
    gap:4px !important;
  }

  body.mobile-view-compact .product-old-price{
    font-size:12px !important;
  }

  body.mobile-view-compact .product-price{
    font-size:17px !important;
  }

  body.mobile-view-compact .discount-badge{
    font-size:10px !important;
    padding:5px 8px !important;
  }

  body.mobile-view-compact .favorite-btn{
    width:30px !important;
    height:30px !important;
    font-size:18px !important;
  }

  body.mobile-view-compact .card-qty{
    gap:8px !important;
  }

  body.mobile-view-compact .card-qty button{
    width:25px !important;
    height:25px !important;
    font-size:17px !important;
  }

  body.mobile-view-compact .card-qty-input{
    width:38px !important;
    height:27px !important;
    font-size:13px !important;
  }

  body.mobile-view-compact .open-variants{
    width:100% !important;
    height:34px !important;
    font-size:11px !important;
  }

  body.mobile-view-compact .image-action{
    font-size:9px !important;
    max-width:100px !important;
  }

  /* Footer en celular: redes + compartir sin montarse con carrito */
  .social-links{
    width:100% !important;
    display:flex !important;
    justify-content:center !important;
    align-items:flex-start !important;
    gap:14px !important;
    margin-top:10px !important;
    margin-right:0 !important;
    padding:0 54px 0 0 !important; /* espacio para el carrito flotante */
    flex-wrap:wrap !important;
  }

  .social-icon{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
  }

  .social-icon svg{
    width:18px !important;
    height:18px !important;
  }

  /* Botón Compartir: compatible con SVG directo o con .share-circle */
  .footer-share-mobile{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:4px !important;

    width:48px !important;
    min-width:48px !important;
    height:auto !important;
    min-height:0 !important;

    padding:0 !important;
    margin:0 !important;
    border:none !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    color:#fff !important;
    overflow:visible !important;
    cursor:pointer !important;
  }

  .footer-share-mobile .share-circle,
  .footer-share-mobile > svg{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
    border-radius:50% !important;
    background:#fff !important;
    color:var(--primary) !important;
    fill:var(--primary) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    box-shadow:0 8px 20px rgba(0,0,0,.18) !important;
  }

  .footer-share-mobile > svg{
    padding:9px !important;
    box-sizing:border-box !important;
  }

  .footer-share-mobile .share-circle svg{
    width:19px !important;
    height:19px !important;
    fill:var(--primary) !important;
  }

  .footer-share-mobile span,
  .footer-share-mobile small{
    display:block !important;
    width:70px !important;
    margin:0 !important;
    padding:0 !important;
    text-align:center !important;
    color:#fff !important;
    font-size:10px !important;
    line-height:1 !important;
    font-weight:800 !important;
    white-space:nowrap !important;
  }
}

/* COMPARTIR FOOTER: SOLO ICONO, SIN TEXTO NI CUADRADO */
@media(max-width:600px){

  .footer-share-mobile{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
    border-radius:50% !important;
    background:#fff !important;
    color:var(--primary) !important;
    padding:0 !important;
    margin:0 !important;
    box-shadow:0 8px 22px rgba(0,0,0,.18) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
  }

  .footer-share-mobile .share-circle{
    width:42px !important;
    height:42px !important;
    border-radius:50% !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  .footer-share-mobile svg{
    width:20px !important;
    height:20px !important;
    fill:var(--primary) !important;
  }

  .footer-share-mobile small,
  .footer-share-mobile span{
    display:none !important;
  }
}

/* =========================================================
   EVITAR PARPADEO AL ACTUALIZAR DATOS DE EMPRESA
   Pegar al final de css/app.css
========================================================= */

body.app-loading #empresaAccess,
body.app-loading #empresaView{
  display:none !important;
  visibility:hidden !important;
}

#empresaAccess.hidden,
#empresaView.hidden{
  display:none !important;
}

/* Compartir footer: solo círculo, sin texto ni cuadrado */
@media(max-width:600px){
  .footer-share-mobile{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
    border-radius:50% !important;
    background:#fff !important;
    color:var(--primary) !important;
    padding:0 !important;
    margin:0 !important;
    box-shadow:0 8px 22px rgba(0,0,0,.18) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
  }

  .footer-share-mobile .share-circle{
    width:42px !important;
    height:42px !important;
    border-radius:50% !important;
    background:transparent !important;
    box-shadow:none !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  .footer-share-mobile svg{
    width:20px !important;
    height:20px !important;
    fill:var(--primary) !important;
  }

  .footer-share-mobile small,
  .footer-share-mobile span{
    display:none !important;
  }
}
/* OCULTAR EMPRESA DESDE EL INICIO PARA EVITAR ICONO GRANDE AL ACTUALIZAR */
#empresaAccess{
  display:none !important;
}

body.app-ready #empresaAccess:not(.hidden){
  display:block !important;
}

body.hide-empresa #empresaAccess,
#empresaAccess.hidden{
  display:none !important;
}

.btn-whatsapp-product{
  width:78%;
  max-width:210px;
  min-height:38px;
  margin:10px auto 0;
  padding:9px 14px;
  border-radius:10px;
  background:#16a34a;
  color:#fff;
  font-size:13px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
}

.btn-whatsapp-product:hover{
  background:#12813b;
}


/* =========================================
   ALINEAR PRECIOS CON Y SIN DESCUENTO
========================================= */

.product-old-price{
  height:22px;
  min-height:22px;
  margin:4px 0 2px;
  line-height:22px;
}

.product-old-price.empty{
  visibility:hidden;
}



/* =========================================================
   FICHA DE PRODUCTO V2
   - Tarjeta limpia y clicable
   - Galería con miniaturas
   - Detalle, variantes, cantidad, carrito y WhatsApp
========================================================= */

.modal-open{
  overflow:hidden;
}

.product-detail-trigger{
  cursor:pointer;
}

.product-open-hint{
  position:absolute;
  left:50%;
  bottom:10px;
  transform:translateX(-50%);
  min-width:104px;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(17,24,39,.86);
  color:#fff;
  font-size:11px;
  font-weight:800;
  line-height:1;
  text-align:center;
  opacity:0;
  transition:.2s ease;
  pointer-events:none;
}

.product-detail-trigger:hover .product-open-hint,
.product-image-wrap:hover .product-open-hint{
  opacity:1;
}

.card-options-note{
  width:100%;
  margin:8px 0 4px;
  color:var(--text-muted);
  font-size:clamp(8px,2.2vw,11px);
  font-weight:700;
  line-height:1.2;
  letter-spacing:-0.15px;
  text-align:center;
  white-space:nowrap;
}

.card-whatsapp-btn{
  width:78%;
  max-width:210px;
  min-height:38px;
  margin:10px auto 0;
  padding:9px 14px;
  border-radius:10px;
  background:#25D366;
  color:#fff;
  font-size:13px;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  box-shadow:0 8px 18px rgba(37,211,102,.22);
}

.card-whatsapp-btn:hover,
.detail-whatsapp-btn:hover{
  background:#1fb85a;
  transform:translateY(-1px);
}

.whatsapp-icon{
  width:23px;
  height:23px;
  flex:0 0 23px;
  border:0;
  border-radius:50%;
  background:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.whatsapp-icon svg{
  width:15px;
  height:15px;
  display:block;
  fill:#25D366;
}

.product-detail-modal{
  padding:18px;
}

.detail-modal-content{
  width:min(1080px, 96vw);
  min-width:0;
  max-width:1080px;
  max-height:92vh;
  padding:22px;
  overflow:auto;
  border-radius:22px;
}

.product-detail-layout{
  display:grid;
  grid-template-columns:minmax(0, 1.12fr) minmax(330px, .88fr);
  gap:28px;
  align-items:start;
}

.product-detail-media,
.product-detail-info{
  min-width:0;
}

.detail-image-wrap.detail-gallery{
  width:100%;
  height:min(560px, 62vh);
  min-height:420px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:18px;
  overflow:hidden;
}

.detail-image-wrap.detail-gallery > img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:18px;
  display:block;
}

.detail-gallery-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:42px;
  height:42px;
  border-radius:50%;
  background:rgba(255,255,255,.94);
  color:#111827;
  box-shadow:0 8px 22px rgba(15,23,42,.18);
  z-index:3;
  font-size:28px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.detail-prev{ left:12px; }
.detail-next{ right:12px; }

.detail-thumbs{
  display:flex;
  gap:10px;
  margin-top:12px;
  padding:3px 2px 6px;
  overflow-x:auto;
  scrollbar-width:thin;
}

.detail-thumb{
  flex:0 0 72px;
  width:72px;
  height:72px;
  border:1px solid #dfe3e8;
  border-radius:11px;
  background:#fff;
  padding:4px;
  overflow:hidden;
  box-shadow:none;
  transition:border-color .18s ease, box-shadow .18s ease;
}

.detail-thumb.active{
  border:2px solid var(--primary);
  box-shadow:0 3px 10px rgba(15,23,42,.12);
}

.detail-thumb img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.product-detail-info{
  padding:4px 4px 4px 0;
}

.product-detail-info > h2{
  margin:0 42px 8px 0;
  color:var(--text-title);
  font-family:var(--font-title);
  font-size:30px;
  line-height:1.12;
  text-align:left;
}

.detail-meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px 16px;
  margin-bottom:10px;
  color:var(--text-muted);
  font-size:13px;
  font-weight:600;
}

.detail-old-price{
  margin:4px 0 1px;
  color:#777;
  font-size:16px;
  font-weight:600;
  text-decoration:line-through;
  text-decoration-color:#ff2b6a;
  text-decoration-thickness:2px;
}

.detail-price{
  margin:2px 0 8px;
  color:var(--price);
  font-size:34px;
  line-height:1;
  font-weight:900;
}

.detail-stock{
  margin:5px 0 12px;
  color:var(--price);
  font-size:13px;
  font-weight:800;
}

.detail-description-section{
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid #e5e7eb;
}

.detail-description-section h3,
.detail-option-group h3,
.detail-wholesale h4{
  margin:0 0 8px;
  color:#111827;
  font-size:14px;
  font-weight:900;
}

.detail-description-section p{
  max-height:220px;
  overflow:auto;
  white-space:pre-line;
  color:#374151;
  font-size:14px;
  line-height:1.58;
}

.detail-video-btn{
  margin-top:14px;
  min-height:40px;
  padding:9px 16px;
  border-radius:10px;
  background:#111827;
  color:#fff;
  font-size:13px;
  font-weight:900;
  align-items:center;
  justify-content:center;
}

.detail-wholesale{
  margin:14px 0;
  padding:12px;
  border:1px solid var(--wh-border, #e5e7eb);
  border-radius:12px;
  background:var(--wh-bg, #f8fafc);
}

.detail-wholesale-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(95px, 1fr));
  gap:8px;
}

.detail-wholesale-tier{
  padding:8px;
  border-radius:9px;
  background:#fff;
  text-align:center;
}

.detail-wholesale-tier span,
.detail-wholesale-tier strong{
  display:block;
  font-size:11px;
}

.detail-wholesale-tier strong{
  margin-top:2px;
  color:var(--price);
  font-size:13px;
}

.detail-variants{
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid #e5e7eb;
}

.detail-option-group + .detail-option-group{
  margin-top:13px;
}

.detail-option-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.detail-variant-btn{
  min-width:64px;
  min-height:38px;
  padding:8px 12px;
  border:2px solid #e5e7eb;
  border-radius:10px;
  background:#fff;
  color:#111827;
  font-size:12px;
  font-weight:900;
}

.detail-variant-btn.active{
  border-color:var(--primary);
  background:var(--primary);
  color:#fff;
}

.detail-variant-btn:disabled{
  opacity:.38;
  cursor:not-allowed;
}

.detail-variant-message{
  margin-top:10px;
  color:#6b7280;
  font-size:12px;
  font-weight:700;
}

.detail-variant-message.success{ color:var(--success); }
.detail-variant-message.error{ color:var(--danger); }

.detail-quantity-row{
  margin-top:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  font-size:14px;
  font-weight:900;
}

.detail-quantity-control{
  display:flex;
  align-items:center;
  gap:8px;
}

.detail-quantity-control button{
  width:34px;
  height:34px;
  border-radius:9px;
  background:var(--primary);
  color:#fff;
  font-size:20px;
  font-weight:900;
}

.detail-quantity-control input{
  width:56px;
  height:34px;
  border:1px solid #d1d5db;
  border-radius:9px;
  text-align:center;
  font-size:14px;
  font-weight:900;
}

.detail-action-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:8px;
  margin-top:16px;
}

.detail-whatsapp-btn,
.detail-cart-btn{
  width:100%;
  min-width:0;
  min-height:42px;
  padding:8px 10px;
  border-radius:10px;
  font-size:11.5px;
  font-weight:800;
  line-height:1.15;
  white-space:normal;
}

.detail-whatsapp-btn{
  background:#25D366;
  color:#fff;
  box-shadow:0 7px 16px rgba(37,211,102,.20);
  gap:6px;
}

.detail-cart-btn{
  background:var(--primary);
  color:#fff;
}

.detail-cart-btn:hover{
  background:var(--primary-dark);
}

.detail-close-link{
  display:block;
  width:max-content;
  max-width:100%;
  margin:13px auto 6px;
  padding:7px 12px;
  border-radius:999px;
  background:#f3f4f6;
  color:#4b5563;
  font-size:11px;
  font-weight:800;
  text-decoration:none;
}


/* =========================================================
   AJUSTES PREMIUM DEFINITIVOS - JULIO 2026
========================================================= */
.product-meta span{white-space:nowrap;}
.product-old-price{height:22px;min-height:22px;line-height:22px;margin:3px 0 1px;}
.product-old-price.empty{visibility:hidden;}

@media (min-width:701px){
  .product-image-wrap,.premium-image{height:225px;}
  .product-image-wrap img,.premium-image img{padding:6px 10px 2px;}
}

@media (max-width:700px){
  .product-detail-modal{
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding:7px 7px 24px;
  }
  .detail-modal-content{
    max-height:none;
    min-height:0;
    overflow:visible;
    margin:0 auto 24px;
    padding-bottom:28px;
  }
  .product-detail-layout{align-items:start;}
  .detail-action-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:7px;}
  .detail-whatsapp-btn,.detail-cart-btn{min-height:40px;padding:7px 6px;font-size:10.5px;}
  .detail-whatsapp-btn .whatsapp-icon{width:20px;height:20px;flex-basis:20px;}
  .detail-whatsapp-btn .whatsapp-icon svg{width:13px;height:13px;}
  .detail-close-link{margin-top:12px;margin-bottom:12px;font-size:10.5px;}
}

@media (max-width:520px){
  body.mobile-view-compact .product-image-wrap,
  body.mobile-view-compact .premium-image{height:150px!important;}
  body.mobile-view-compact .product-info,
  body.mobile-view-compact .premium-info{padding:9px 6px 10px!important;}
  body.mobile-view-compact .product-info h3,
  body.mobile-view-compact .premium-info h3{min-height:34px!important;margin-bottom:4px!important;}
  body.mobile-view-compact .product-meta{min-height:15px!important;gap:3px!important;font-size:8.5px!important;}
  body.mobile-view-compact .product-meta span{font-size:8.5px!important;}
  body.mobile-view-compact .product-old-price{height:19px!important;min-height:19px!important;line-height:19px!important;}
}


/* =========================================================
   ACABADO FINAL FICHA DE PRODUCTO
   - Colores con círculo visual
   - Cantidad sincronizada automáticamente con carrito
   - WhatsApp y Seguir viendo en la misma fila
   - Scroll móvil completo
========================================================= */

.detail-color-btn{
  min-width:104px;
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  padding:8px 11px;
}

.detail-color-dot{
  width:20px;
  height:20px;
  flex:0 0 20px;
  border-radius:50%;
  background:var(--detail-color);
  border:1px solid rgba(17,24,39,.18);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.45);
}

.detail-color-btn.active .detail-color-dot{
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.55),
    0 0 0 2px #fff,
    0 0 0 4px var(--primary);
}

.detail-action-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:stretch;
  gap:9px;
  margin-top:16px;
}

.detail-whatsapp-btn,
.detail-close-link{
  width:100%;
  min-width:0;
  min-height:42px;
  margin:0;
  padding:8px 10px;
  border-radius:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  font-family:var(--font-main);
  font-size:11.5px;
  font-weight:800;
  line-height:1.15;
  text-align:center;
  white-space:normal;
}

.detail-whatsapp-btn{
  background:#25D366;
  color:#fff;
  box-shadow:0 7px 16px rgba(37,211,102,.20);
}

.detail-whatsapp-btn .whatsapp-icon{
  width:24px;
  height:24px;
  flex:0 0 24px;
  border:0;
  border-radius:50%;
  background:#fff;
  color:#25D366;
  display:flex;
  align-items:center;
  justify-content:center;
}

.detail-whatsapp-btn .whatsapp-icon svg{
  width:16px;
  height:16px;
  display:block;
  fill:currentColor;
}

.detail-close-link{
  background:var(--primary);
  color:#fff;
  box-shadow:0 7px 16px rgba(11,61,145,.18);
}

.detail-close-link:hover{
  background:var(--primary-dark);
  transform:translateY(-1px);
}

.detail-cart-btn,
#detailAddCartBtn{
  display:none !important;
}

@media(max-width:700px){
  .product-detail-modal{
    align-items:flex-start !important;
    overflow-y:auto !important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding:7px 7px calc(34px + env(safe-area-inset-bottom)) !important;
  }

  .detail-modal-content{
    width:100% !important;
    max-width:100% !important;
    max-height:none !important;
    overflow:visible !important;
    margin:0 auto !important;
    padding-bottom:calc(28px + env(safe-area-inset-bottom)) !important;
  }

  .detail-action-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:7px !important;
    margin-top:14px !important;
  }

  .detail-whatsapp-btn,
  .detail-close-link{
    min-height:40px !important;
    padding:7px 6px !important;
    font-size:10.5px !important;
    border-radius:10px !important;
  }

  .detail-whatsapp-btn .whatsapp-icon{
    width:20px !important;
    height:20px !important;
    flex-basis:20px !important;
  }

  .detail-whatsapp-btn .whatsapp-icon svg{
    width:13px !important;
    height:13px !important;
  }

  .detail-color-btn{
    min-width:96px;
    padding:7px 9px;
    font-size:11px;
  }

  .detail-color-dot{
    width:18px;
    height:18px;
    flex-basis:18px;
  }
}
/* BOTONES PAREJOS EN LA FICHA DEL PRODUCTO */
.detail-action-grid{
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:10px !important;
  align-items:stretch !important;
}

.detail-whatsapp-btn,
.detail-close-link{
  width:100% !important;
  min-width:0 !important;
  min-height:46px !important;
  margin:0 !important;
  padding:8px 12px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;

  border-radius:12px !important;

  font-family:var(--font-main) !important;
  font-size:12px !important;
  font-weight:800 !important;
  line-height:1.1 !important;
  text-align:center !important;
}

.detail-whatsapp-btn{
  background:#25D366 !important;
  color:#fff !important;
}

.detail-close-link{
  background:var(--primary) !important;
  color:#fff !important;
}

/* CELULAR */
@media(max-width:700px){
  .detail-action-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:8px !important;
  }

  .detail-whatsapp-btn,
  .detail-close-link{
    min-height:44px !important;
    padding:7px 8px !important;
    font-size:11px !important;
    border-radius:11px !important;
  }

  .detail-whatsapp-btn .whatsapp-icon{
    width:21px !important;
    height:21px !important;
    flex:0 0 21px !important;
  }

  .detail-whatsapp-btn .whatsapp-icon svg{
    width:14px !important;
    height:14px !important;
  }
}
#sendWhatsappBtn{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
}

#sendWhatsappBtn .cart-whatsapp-icon{
  width:22px;
  height:22px;
  flex:0 0 22px;
  border:0;
  border-radius:50%;
  background:#fff;
  color:#25D366;
  display:flex;
  align-items:center;
  justify-content:center;
}

#sendWhatsappBtn .cart-whatsapp-icon svg{
  width:14px;
  height:14px;
  display:block;
  fill:currentColor;
}


/* =========================================================
   AJUSTE FINAL MÓVIL — CÓDIGO/MARCA Y PRECIO POR MAYOR
   Solo afecta la vista móvil compacta de 2 productos.
========================================================= */
@media (max-width:520px){

  /* Código y Marca siempre en una sola fila */
  body.mobile-view-compact .product-meta{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:center !important;
    gap:5px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    font-size:9px !important;
    line-height:1.1 !important;
  }

  body.mobile-view-compact .product-meta > *{
    min-width:0 !important;
    white-space:nowrap !important;
  }

  /* Caja de precio por mayor más compacta */
  body.mobile-view-compact .card-wholesale-list.wholesale-compact{
    width:100% !important;
    max-width:100% !important;
    margin:6px auto 8px !important;
    padding:5px 4px !important;
  }

  body.mobile-view-compact .card-wholesale-list.wholesale-compact .wholesale-title{
    margin-bottom:4px !important;
    font-size:7.5px !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }

  /* Los tres rangos siempre en una sola fila */
  body.mobile-view-compact .card-wholesale-list.wholesale-compact .wholesale-tiers{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
    gap:0 !important;
    width:100% !important;
    align-items:center !important;
  }

  /* Cada rango: "Desde 3" y "S/ 45.00" sin saltos internos */
  body.mobile-view-compact .card-wholesale-list.wholesale-compact .wholesale-tier{
    min-width:0 !important;
    padding:0 2px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:2px !important;
    white-space:nowrap !important;
  }

  body.mobile-view-compact .card-wholesale-list.wholesale-compact .wholesale-tier span,
  body.mobile-view-compact .card-wholesale-list.wholesale-compact .wholesale-tier strong{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    font-size:7.4px !important;
    line-height:1 !important;
    white-space:nowrap !important;
    word-break:keep-all !important;
    overflow-wrap:normal !important;
    text-align:center !important;
  }
}

.product-old-price-empty{
  visibility:hidden;
}

/* PRECIO POR MAYOR EN UNA FILA SOLO EN CELULAR */
@media(max-width:700px){

  .detail-wholesale-grid{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
    gap:6px !important;
    width:100% !important;
  }

  .detail-wholesale-tier{
    min-width:0 !important;
    padding:8px 3px !important;
    text-align:center !important;
  }

  .detail-wholesale-tier span,
  .detail-wholesale-tier strong{
    display:block !important;
    white-space:nowrap !important;
    font-size:11px !important;
  }
}

/* PRECIO NO REGISTRADO */

.product-no-price{
  margin:8px 0 7px;
  min-height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--primary);
  font-size:20px;
  font-weight:800;
  line-height:1.2;
  text-align:center;
}

@media(max-width:520px){
  body.mobile-view-compact .product-no-price{
    min-height:23px;
    margin:6px 0 5px;
    font-size:15px;
    line-height:1.15;
  }
}


/* =========================================================
   MEJORA VISUAL CELULAR + MODOS DE CATEGORÍAS
   CONFIG (Google Sheets):
   MODO_CATEGORIAS = BOTONES | DESPLEGABLE | AUTO | OCULTAR
========================================================= */

.sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

.categories-select-wrap{
  max-width:var(--container-max);
  margin:0 auto 18px;
  padding:0 18px;
}

.categories-select-wrap[hidden],
.categories-bar[hidden]{
  display:none !important;
}

.categories-select{
  width:100%;
  height:46px;
  padding:0 44px 0 16px;
  border:1px solid var(--card-border);
  border-radius:14px;
  background-color:var(--category-bg);
  color:var(--category-text);
  font-family:var(--font-main);
  font-size:14px;
  font-weight:800;
  outline:none;
  box-shadow:var(--shadow-sm);
  cursor:pointer;
}

.categories-select:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent);
}

@media(max-width:600px){
  /* Buscador e iconos alineados y con la misma altura visual */
  .search-section{
    margin:12px auto 5px !important;
    padding:0 10px !important;
  }

  .search-tools{
    gap:5px !important;
    align-items:center !important;
  }

  .search-tools .search-box,
  .search-box{
    height:40px !important;
    min-height:40px !important;
    padding:0 11px !important;
    gap:7px !important;
  }

  .search-box > span{
    font-size:16px !important;
    line-height:1 !important;
  }

  .search-box input{
    height:38px !important;
    font-size:13.5px !important;
    line-height:1 !important;
  }

  .quick-filter-btn{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    font-size:16px !important;
    box-shadow:0 4px 12px rgba(0,0,0,.08) !important;
  }

  /* Categorías más compactas, juntas y prolijas */
  .categories-bar{
    margin:0 auto 8px !important;
    padding:3px 10px 7px !important;
    gap:6px !important;
    scrollbar-width:thin;
  }

  .category-btn{
    min-height:38px !important;
    padding:7px 14px !important;
    border-radius:999px !important;
    font-size:13px !important;
    line-height:1 !important;
    box-shadow:0 4px 12px rgba(0,0,0,.07) !important;
  }

  .categories-select-wrap{
    margin:2px auto 9px !important;
    padding:0 10px !important;
  }

  .categories-select{
    height:40px !important;
    padding:0 40px 0 13px !important;
    border-radius:12px !important;
    font-size:13px !important;
  }
}


/* =========================================================
   AJUSTES DE PLANTILLA CENTRALIZADA
========================================================= */
html.install-compact .install-app-bar{
  min-height:34px;
  padding:3px 10px;
  gap:10px;
  box-shadow:0 4px 14px rgba(0,0,0,.14);
}
html.install-compact .install-app-bar strong{
  font-size:13px;
}
html.install-compact #installAppBtn{
  min-width:68px;
  height:25px;
  padding:0 10px;
  font-size:11px;
}

/* Barra delgada de anuncios administrada desde la hoja CONFIG */
.announcement-bar{
  width:100%;
  min-height:27px;
  background:var(--primary-soft);
  color:var(--text-main);
  border-bottom:1px solid color-mix(in srgb, var(--primary) 22%, transparent);
  overflow:hidden;
}
.announcement-viewport{
  width:100%;
  overflow:hidden;
  white-space:nowrap;
}
.announcement-track{
  min-height:27px;
  display:inline-flex;
  align-items:center;
  gap:42px;
  padding:0 18px;
  font-family:var(--font-main);
  font-size:12px;
  font-weight:700;
  will-change:transform;
}
.announcement-track.is-moving{
  animation:catalog-announcement var(--announcement-duration, 22s) linear infinite;
}
.announcement-item::before{
  content:attr(data-icon);
  color:var(--primary);
  margin-right:8px;
}
.announcement-item.marker-dot::before{
  content:"";
  display:inline-block;
  width:7px;
  height:7px;
  margin-right:8px;
  border-radius:999px;
  background:var(--primary);
  vertical-align:middle;
}
.announcement-item.marker-none::before{
  content:none;
  margin-right:0;
}
@keyframes catalog-announcement{
  from{transform:translateX(100vw)}
  to{transform:translateX(-100%)}
}
@media (prefers-reduced-motion:reduce){
  .announcement-track.is-moving{animation:none; transform:none;}
}
@media(max-width:600px){
  .announcement-bar,.announcement-track{min-height:25px;}
  .announcement-track{font-size:11px;gap:30px;padding:0 12px;}
}

/* =========================================================
   AJUSTE VISUAL 2026-07-16
   Buscador y categorías más compactos + corazón circular móvil
========================================================= */

/* PC: ancho y altura más equilibrados */
@media (min-width: 601px){
  .search-section{
    max-width:900px !important;
    margin:16px auto 10px !important;
    padding:0 16px !important;
  }

  .search-box{
    height:46px !important;
    min-height:46px !important;
    padding:0 16px !important;
  }

  .search-box input{
    height:44px !important;
    font-size:15px !important;
  }

  .quick-filter-btn{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    max-width:42px !important;
  }

  .categories-select-wrap{
    max-width:900px !important;
    margin:0 auto 12px !important;
    padding:0 16px !important;
  }

  .categories-select{
    height:42px !important;
    border-radius:12px !important;
    font-size:13.5px !important;
  }

  .categories-bar{
    max-width:900px !important;
  }
}

/* Celular: buscador, selector y filtros compactos y uniformes */
@media (max-width:600px){
  .search-section{
    margin:10px auto 6px !important;
  }

  .search-tools .search-box,
  .search-box{
    height:40px !important;
    min-height:40px !important;
    border-radius:20px !important;
  }

  .categories-select-wrap{
    margin:1px auto 8px !important;
  }

  .categories-select{
    height:40px !important;
    border-radius:12px !important;
  }

  /* Evita que el corazón de favoritos se estire */
  .favorite-btn,
  body.mobile-view-compact .favorite-btn{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:34px !important;
    min-width:34px !important;
    max-width:34px !important;
    height:34px !important;
    min-height:34px !important;
    max-height:34px !important;
    padding:0 !important;
    margin:0 !important;
    border-radius:50% !important;
    aspect-ratio:1 / 1 !important;
    line-height:1 !important;
    font-size:20px !important;
    flex:0 0 34px !important;
    overflow:hidden !important;
  }
}


/* =========================================================
   UX PREMIUM FINAL v40
   Buscador/categorías compactos + acciones de tarjeta limpias
========================================================= */
.search-section{
  max-width:var(--container-max);
  margin:16px auto 12px;
  padding:0 18px;
}
.catalog-toolbar{
  display:grid;
  grid-template-columns:minmax(360px,1fr) minmax(230px,300px);
  grid-template-areas:"search select" "buttons buttons";
  align-items:center;
  gap:10px 14px;
  width:100%;
}
.search-tools{
  grid-area:search;
  display:grid;
  grid-template-columns:minmax(260px,1fr) repeat(3,44px);
  align-items:center;
  gap:8px;
  min-width:0;
}
.search-box{
  min-width:0;
  height:44px;
  padding:0 16px;
  border-radius:999px;
}
.search-box input{font-size:15px;min-width:0;}
.quick-filter-btn{
  width:44px !important;
  min-width:44px !important;
  max-width:44px !important;
  height:44px !important;
  min-height:44px !important;
  padding:0 !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
  line-height:1 !important;
  aspect-ratio:1/1 !important;
  flex:0 0 44px !important;
}
.categories-select-wrap{
  grid-area:select;
  width:100%;
  max-width:300px;
  margin:0;
  padding:0;
  justify-self:end;
}
.categories-select{
  width:100%;
  height:44px;
  min-height:44px;
  padding:0 38px 0 15px;
  border-radius:12px;
  font-size:14px;
  font-weight:700;
}
.categories-bar{
  grid-area:buttons;
  width:100%;
  max-width:100%;
  margin:0;
  padding:2px 0 4px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:8px;
  overflow:visible;
}
.category-btn{
  min-height:38px;
  padding:8px 15px;
  font-size:13px;
}
.favorite-btn{
  width:38px !important;
  min-width:38px !important;
  max-width:38px !important;
  height:38px !important;
  min-height:38px !important;
  max-height:38px !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:50% !important;
  aspect-ratio:1/1 !important;
  display:grid !important;
  place-items:center !important;
  line-height:1 !important;
  flex:0 0 38px !important;
  box-sizing:border-box !important;
}
.card-options-note{
  display:block;
  width:100%;
  margin:4px 0 6px;
  padding:0 2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:clamp(9px,1.05vw,12px);
  line-height:1.25;
  text-align:center;
  cursor:pointer;
}
.card-purchase-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  margin-top:8px;
}
.card-purchase-row .card-qty{margin:0;flex:0 1 auto;}
.card-whatsapp-icon-btn{
  width:38px;
  min-width:38px;
  max-width:38px;
  height:38px;
  min-height:38px;
  max-height:38px;
  padding:0;
  border:0;
  border-radius:50%;
  display:grid;
  place-items:center;
  flex:0 0 38px;
  background:var(--btn-whatsapp);
  color:#fff;
  box-shadow:0 6px 16px rgba(22,163,74,.24);
  cursor:pointer;
}
.card-whatsapp-icon-btn:hover{background:var(--btn-whatsapp-hover);transform:translateY(-1px);}
.card-whatsapp-icon-btn .whatsapp-icon{
  width:22px;
  height:22px;
  flex:0 0 22px;
  background:transparent;
}
.card-whatsapp-icon-btn .whatsapp-icon svg{width:18px;height:18px;fill:currentColor;}
.card-purchase-row.has-variants{justify-content:center;}

@media (max-width:760px){
  .search-section{margin:10px auto 8px;padding:0 10px;}
  .catalog-toolbar{
    grid-template-columns:1fr;
    grid-template-areas:"search" "select" "buttons";
    gap:8px;
  }
  .search-tools{
    grid-template-columns:minmax(0,1fr) repeat(3,40px);
    gap:6px;
  }
  .search-box{height:40px;padding:0 12px;}
  .search-box input{font-size:14px;}
  .quick-filter-btn{
    width:40px !important;min-width:40px !important;max-width:40px !important;
    height:40px !important;min-height:40px !important;
    flex-basis:40px !important;
  }
  .categories-select-wrap{
    width:min(88%,360px);
    max-width:360px;
    justify-self:center;
  }
  .categories-select{height:40px;min-height:40px;font-size:13px;border-radius:11px;}
  .categories-bar{
    justify-content:center;
    gap:6px;
    padding:0 2px 3px;
  }
  .category-btn{min-height:34px;padding:7px 12px;font-size:12px;}
  .favorite-btn{
    width:34px !important;min-width:34px !important;max-width:34px !important;
    height:34px !important;min-height:34px !important;max-height:34px !important;
    flex-basis:34px !important;font-size:19px !important;
  }
  .card-options-note{
    font-size:clamp(8px,2.35vw,10.5px);
    letter-spacing:-.15px;
    margin:3px 0 5px;
  }
  .card-purchase-row{gap:6px;margin-top:6px;}
  .card-whatsapp-icon-btn{
    width:34px;min-width:34px;max-width:34px;
    height:34px;min-height:34px;max-height:34px;
    flex-basis:34px;
  }
  .card-whatsapp-icon-btn .whatsapp-icon{width:20px;height:20px;flex-basis:20px;}
  .card-whatsapp-icon-btn .whatsapp-icon svg{width:16px;height:16px;}
}

@media (min-width:761px){
  /* Con botones, las categorías ocupan una segunda línea centrada; sin scroll oculto. */
  .categories-bar:not([hidden]){display:flex;}
  .categories-select-wrap:not([hidden]){display:block;}
}


/* =========================================================
   AJUSTES FINALES PREMIUM v42
========================================================= */
.product-meta-separator{
  flex:0 0 auto;
  color:#cbd5e1;
  font-weight:700;
}
.detail-meta-row{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:nowrap;
  gap:7px;
  min-width:0;
  font-size:12px;
  color:var(--text-muted);
}
.detail-meta-row.has-both #detailCode::after{
  content:"|";
  margin-left:7px;
  color:#cbd5e1;
  font-weight:700;
}
#detailBrand{
  min-width:0;
  white-space:nowrap;
  font-size:clamp(10px,1.5vw,12px);
}
.detail-wholesale{
  margin:8px 0 10px;
  padding:8px 10px;
  border-radius:10px;
}
.detail-wholesale-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  margin-bottom:6px;
  color:var(--text-title);
  font-size:10px;
  line-height:1;
  letter-spacing:.2px;
}
.detail-wholesale-title .wholesale-icon{font-size:13px;line-height:1;}
.detail-wholesale-grid{
  grid-template-columns:repeat(auto-fit,minmax(76px,1fr));
  gap:5px;
}
.detail-wholesale-tier{padding:5px 6px;border-radius:7px;}
.detail-wholesale-tier span{font-size:9.5px;line-height:1.15;}
.detail-wholesale-tier strong{font-size:11px;line-height:1.15;margin-top:1px;color:var(--price);}
.detail-variant-image-btn{
  width:64px;
  min-width:64px;
  min-height:72px;
  padding:4px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:4px;
  border-radius:10px;
  overflow:hidden;
}
.detail-variant-image-btn img{
  width:52px;
  height:52px;
  object-fit:cover;
  border-radius:7px;
  display:block;
}
.detail-variant-image-btn span{
  width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:9px;
  line-height:1.1;
  text-align:center;
}
.detail-variant-image-btn.active{
  border-color:var(--primary);
  box-shadow:0 0 0 2px var(--primary-soft);
}
/* Evita que el corazón se estire por reglas generales de botones. */
.product-card .favorite-btn{
  inline-size:34px!important;
  block-size:34px!important;
  min-inline-size:34px!important;
  max-inline-size:34px!important;
  min-block-size:34px!important;
  max-block-size:34px!important;
  padding:0!important;
  border-radius:999px!important;
  aspect-ratio:1/1!important;
  flex:none!important;
}
@media (max-width:760px){
  .detail-meta-row{justify-content:center;font-size:10px;gap:5px;}
  .detail-meta-row.has-both #detailCode::after{margin-left:5px;}
  #detailBrand{font-size:clamp(8px,2.4vw,10px);}
  .detail-wholesale{margin:6px 0 8px;padding:7px 8px;}
  .detail-wholesale-title{font-size:9px;margin-bottom:5px;}
  .detail-wholesale-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;}
  .detail-wholesale-tier{padding:4px 3px;}
  .detail-wholesale-tier span{font-size:8px;}
  .detail-wholesale-tier strong{font-size:9.5px;}
  .detail-variant-image-btn{width:58px;min-width:58px;min-height:66px;}
  .detail-variant-image-btn img{width:46px;height:46px;}
}


/* =========================================================
   PREMIUM FINAL V44 — CATEGORÍAS, TARJETAS Y VARIANTES
========================================================= */

/* Barra de botones: siempre una sola fila. Las categorías extra viven
   en un panel flotante que se abre con Más ▾. */
.catalog-toolbar{position:relative;}
.categories-bar{
  position:relative;
  display:flex;
  flex-wrap:nowrap !important;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  width:max-content;
  max-width:100%;
  overflow:visible;
}
.categories-bar .category-btn,
.category-more-toggle{
  flex:0 0 auto;
  min-height:34px;
  padding:7px 13px;
  border:0;
  border-radius:999px;
  font-family:var(--font-main);
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
  cursor:pointer;
  box-shadow:0 7px 18px rgba(15,23,42,.08);
}
.category-more-toggle{background:#fff;color:var(--text-main);}
.categories-bar .category-extra{display:none;}
.categories-bar.show-more-categories{
  z-index:40;
}
.categories-bar.show-more-categories .category-extra{
  display:flex;
  position:relative;
}
.categories-bar.show-more-categories{
  flex-wrap:wrap !important;
  width:min(760px,calc(100vw - 40px));
  padding:10px;
  background:rgba(255,255,255,.98);
  border:1px solid rgba(15,23,42,.08);
  border-radius:16px;
  box-shadow:0 18px 45px rgba(15,23,42,.16);
}

/* Desplegable compacto, alineado al inicio en PC. */
.categories-select-wrap{width:280px;max-width:100%;margin:0;}
.categories-select{
  width:100%;
  height:38px;
  min-height:38px;
  padding:0 36px 0 14px;
  text-align:left;
  text-align-last:left;
  font-size:12.5px;
  font-weight:700;
  border-radius:11px;
}

/* Tarjetas: sin estirarse artificialmente. */
.catalog-grid{align-items:start;}
.product-card{align-self:start;height:auto !important;min-height:0 !important;}
.product-card .product-info{height:auto !important;min-height:0 !important;}
.product-card .favorite-btn{
  width:40px !important;
  height:40px !important;
  min-width:40px !important;
  min-height:40px !important;
  max-width:40px !important;
  max-height:40px !important;
  padding:0 !important;
  aspect-ratio:1/1;
  border-radius:50% !important;
  flex:0 0 40px !important;
  line-height:1 !important;
  display:grid !important;
  place-items:center !important;
}
.card-purchase-row{justify-content:center;align-items:center;gap:9px;}
.card-qty{margin-inline:auto;}
.card-whatsapp-icon-btn{flex:0 0 38px;}
.card-options-note{white-space:nowrap;overflow:visible;text-overflow:clip;line-height:1.1;}
.product-meta{display:flex;justify-content:center;align-items:baseline;flex-wrap:nowrap;gap:4px;white-space:nowrap;}
.product-meta .meta-separator{opacity:.45;}

/* Modal: precio y mayoreo juntos, justo debajo de Código | Marca. */
.detail-meta-row.has-both > span + span::before{content:"|";margin:0 7px;color:rgba(15,23,42,.35);}
.detail-price-wholesale-row{
  display:grid;
  grid-template-columns:minmax(105px,.8fr) minmax(190px,1.35fr);
  align-items:center;
  gap:12px;
  margin:4px 0 7px;
}
.detail-price-block{min-width:0;}
.detail-price-wholesale-row .detail-old-price,
.detail-price-wholesale-row .detail-price{margin-inline:0;text-align:left;}
.detail-price-wholesale-row .detail-wholesale{
  margin:0 !important;
  padding:7px 9px !important;
  border-radius:11px !important;
}
.detail-price-wholesale-row .detail-wholesale-title{font-size:10px;gap:4px;margin-bottom:4px;}
.detail-price-wholesale-row .wholesale-icon{font-size:12px;}
.detail-price-wholesale-row .detail-wholesale-grid{gap:5px;}
.detail-price-wholesale-row .detail-wholesale-tier{padding:3px 4px;min-width:0;}
.detail-price-wholesale-row .detail-wholesale-tier span{font-size:8.5px;}
.detail-price-wholesale-row .detail-wholesale-tier strong{font-size:10px;color:var(--price);}

/* Miniaturas de variantes: sin nombres visibles. En PC el nombre aparece
   como aviso flotante semitransparente al pasar el mouse. */
.detail-variant-image-btn,
.variant-image-option{
  position:relative;
  width:56px !important;
  height:56px !important;
  min-width:56px !important;
  padding:3px !important;
  border-radius:10px !important;
  overflow:visible;
}
.detail-variant-image-btn img,
.variant-image-option img{
  width:100%;height:100%;object-fit:cover;border-radius:7px;display:block;
}
@media (hover:hover) and (pointer:fine){
  .detail-variant-image-btn:hover::after,
  .variant-image-option:hover::after{
    content:attr(data-label);
    position:absolute;
    left:50%;bottom:calc(100% + 7px);
    transform:translateX(-50%);
    padding:5px 8px;
    border-radius:7px;
    background:rgba(15,23,42,.78);
    color:#fff;
    font-size:10px;
    white-space:nowrap;
    pointer-events:none;
    z-index:20;
  }
}

@media (max-width:768px){
  .categories-select-wrap{width:min(82vw,310px);margin:0 auto;}
  .categories-select{
    height:34px;min-height:34px;
    padding:0 30px 0 30px;
    text-align:center;text-align-last:center;
    font-size:11.5px;border-radius:10px;
  }
  .categories-bar{
    width:100%;
    max-width:100%;
    justify-content:center;
    gap:6px;
  }
  .categories-bar .category-btn,
  .category-more-toggle{
    min-height:31px;
    padding:6px 9px;
    font-size:10.5px;
  }
  .categories-bar.show-more-categories{
    width:calc(100% - 8px);
    justify-content:center;
    padding:8px;
  }
  .product-card .favorite-btn{
    width:34px !important;height:34px !important;
    min-width:34px !important;min-height:34px !important;
    max-width:34px !important;max-height:34px !important;
    flex-basis:34px !important;
  }
  body.mobile-view-compact .product-meta{
    font-size:clamp(7px,2.15vw,9.5px) !important;
    letter-spacing:-.12px;
    gap:2px;
  }
  body.mobile-view-compact .card-options-note{
    font-size:clamp(6.8px,2vw,9px) !important;
    letter-spacing:-.16px;
    width:100%;
  }
  body.mobile-view-compact .card-purchase-row{gap:5px;}
  body.mobile-view-compact .card-whatsapp-icon-btn{
    width:34px;height:34px;min-width:34px;flex-basis:34px;
  }
  .detail-price-wholesale-row{
    grid-template-columns:minmax(90px,.72fr) minmax(170px,1.28fr);
    gap:7px;
  }
  .detail-price-wholesale-row .detail-wholesale{padding:5px 6px !important;}
  .detail-price-wholesale-row .detail-wholesale-title{font-size:8.5px;}
  .detail-price-wholesale-row .detail-wholesale-tier span{font-size:7.5px;}
  .detail-price-wholesale-row .detail-wholesale-tier strong{font-size:8.8px;}
  .detail-variant-image-btn,
  .variant-image-option{
    width:48px !important;height:48px !important;min-width:48px !important;
  }
}

@media (max-width:430px){
  .detail-price-wholesale-row{grid-template-columns:92px minmax(0,1fr);}
  .detail-meta-row{font-size:clamp(9px,2.7vw,11px);white-space:nowrap;}
}


/* =========================================================
   PREMIUM FINAL V45 — AJUSTES DEFINITIVOS SOLICITADOS
========================================================= */

/* El ancho visual coincide con la grilla de productos. */
.search-section .catalog-toolbar{
  width:min(1200px, calc(100% - 32px));
  margin-inline:auto;
}

/* PC + modo desplegable: categoría, buscador e iconos en una sola fila. */
@media (min-width:769px){
  .catalog-toolbar[data-category-mode="desplegable"]{
    display:grid;
    grid-template-columns:250px minmax(280px, 470px) repeat(3, 42px);
    align-items:center;
    justify-content:start;
    gap:9px;
  }
  .catalog-toolbar[data-category-mode="desplegable"] .search-tools{display:contents;}
  .catalog-toolbar[data-category-mode="desplegable"] .categories-select-wrap{grid-column:1;grid-row:1;width:250px;margin:0;}
  .catalog-toolbar[data-category-mode="desplegable"] .search-box{
  grid-column:2;
  grid-row:1;
  width:100%;
  max-width:none;
  height:46px;
  padding-top:0;
  padding-bottom:0;
}
  .catalog-toolbar[data-category-mode="desplegable"] #filterFavoritesBtn{grid-column:3;grid-row:1;}
  .catalog-toolbar[data-category-mode="desplegable"] #filterBestSellersBtn{grid-column:4;grid-row:1;}
  .catalog-toolbar[data-category-mode="desplegable"] #filterOffersBtn{grid-column:5;grid-row:1;}
  .catalog-toolbar[data-category-mode="desplegable"] .categories-bar{display:none!important;}

  .catalog-toolbar[data-category-mode="botones"] .search-tools{max-width:620px;}
  .catalog-toolbar[data-category-mode="botones"] .categories-bar{width:100%;margin-top:8px;}
}

/* Botones de categorías siempre en una sola línea; extras aparecen en panel. */
.categories-bar{width:100%;max-width:100%;min-width:0;}
.categories-bar:not(.show-more-categories){overflow:hidden;}
.category-more-toggle{
  background:var(--primary)!important;
  color:#fff!important;
  border:1px solid color-mix(in srgb,var(--primary) 78%,#000 8%)!important;
  box-shadow:0 6px 15px color-mix(in srgb,var(--primary) 22%,transparent)!important;
}
.categories-bar.show-more-categories{
  position:absolute;
  left:0;
  top:calc(100% + 7px);
  display:flex;
  flex-wrap:wrap!important;
  max-width:min(760px,calc(100vw - 32px));
}

/* Desplegable móvil corto, delgado y centrado. */
@media (max-width:768px){
  .search-section .catalog-toolbar{width:calc(100% - 20px);}
  .categories-select-wrap{width:min(72vw,250px)!important;margin:7px auto 0!important;}
  .categories-select{
    height:31px!important;min-height:31px!important;
    padding:0 27px!important;
    font-size:10.8px!important;
    line-height:31px!important;
    border-radius:9px!important;
    text-align:center!important;text-align-last:center!important;
  }
  .categories-bar{gap:5px!important;justify-content:flex-start!important;}
  .categories-bar .category-btn,.category-more-toggle{
    min-height:29px!important;padding:5px 8px!important;font-size:10px!important;
  }
  .categories-bar.show-more-categories{
    top:calc(100% + 5px);
    width:100%!important;
    max-width:100%!important;
    justify-content:center!important;
  }
}

/* Tarjetas iguales por fila, sin deformar controles. */
.catalog-grid{align-items:stretch!important;}
.product-card{height:100%!important;align-self:stretch!important;display:flex!important;flex-direction:column!important;}
.product-card .product-info{height:100%!important;display:flex!important;flex-direction:column!important;}
.product-card .product-price,.product-card .product-no-price{white-space:nowrap;}
.card-purchase-row{margin-top:auto!important;min-height:38px;justify-content:center!important;}
.card-purchase-placeholder{visibility:hidden;}
.card-qty{margin-inline:auto!important;}

/* Corazón estrictamente circular, incluso en compacta. */
.product-card .favorite-btn,
body.mobile-view-compact .product-card .favorite-btn,
body.mobile-view-large .product-card .favorite-btn{
  box-sizing:border-box!important;
  width:36px!important;height:36px!important;
  min-width:36px!important;min-height:36px!important;
  max-width:36px!important;max-height:36px!important;
  padding:0!important;margin:0!important;
  border-radius:999px!important;aspect-ratio:1/1!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  flex:0 0 36px!important;line-height:1!important;
}

/* Aviso de variantes más visible e interactivo, siempre en una línea. */
.card-options-note{
  color:var(--primary)!important;
  font-weight:900!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
  animation:variantHintPulse 1.8s ease-in-out infinite;
}
.card-options-note span{display:inline-block;animation:variantFinger 1.4s ease-in-out infinite;}
@keyframes variantHintPulse{0%,100%{opacity:.72}50%{opacity:1}}
@keyframes variantFinger{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}

/* Marca larga se ajusta únicamente en celular con dos columnas. */
@media (max-width:768px){
  body.mobile-view-compact .product-meta{font-size:clamp(6.8px,2vw,9px)!important;}
  body.mobile-view-compact .product-meta strong{font-size:inherit!important;}
  body.mobile-view-compact .card-options-note{font-size:clamp(6.3px,1.82vw,8.4px)!important;letter-spacing:-.28px!important;}
}

/* WhatsApp de tarjeta entre Código/Marca y Precio. */
.card-whatsapp-upper{display:flex;justify-content:center;min-height:30px;margin:4px 0 1px;}
.card-whatsapp-upper .card-whatsapp-icon-btn{
  width:31px!important;height:31px!important;min-width:31px!important;min-height:31px!important;
  max-width:31px!important;max-height:31px!important;
  margin:0!important;padding:0!important;border-radius:50%!important;box-shadow:none!important;
}
.card-whatsapp-upper .whatsapp-icon{width:20px;height:20px;flex-basis:20px;}
.card-whatsapp-upper .whatsapp-icon svg{width:13px;height:13px;}

/* Modal: Código debajo del nombre; Marca con exactamente el mismo tamaño. */
.detail-meta-row{justify-content:flex-start!important;gap:0!important;font-size:12px!important;line-height:1.35!important;}
#detailCode,#detailBrand{font-size:inherit!important;font-weight:600!important;white-space:nowrap;}
.detail-meta-row.has-both > span + span::before{margin:0 7px!important;}
.detail-price{white-space:nowrap!important;font-size:clamp(25px,3.2vw,38px)!important;line-height:1!important;}
.detail-price-wholesale-row{align-items:center!important;}

/* Precio mayorista compacto solo en modal. */
.detail-price-wholesale-row .detail-wholesale{max-width:340px;}
.detail-price-wholesale-row .detail-wholesale-title{font-size:9px!important;}
.detail-price-wholesale-row .detail-wholesale-tier span{font-size:8px!important;}
.detail-price-wholesale-row .detail-wholesale-tier strong{font-size:9.5px!important;}

/* Si OPCIÓN 1 es Color, solo círculo; en otras opciones, texto + punto decorativo. */
.detail-color-btn.is-color-only{width:34px!important;height:34px!important;min-width:34px!important;padding:4px!important;border-radius:50%!important;}
.detail-color-btn.is-color-only .detail-color-dot{width:22px!important;height:22px!important;margin:0!important;border-radius:50%!important;}
.detail-color-btn.is-text-option .detail-color-dot{width:7px!important;height:7px!important;min-width:7px!important;border-radius:50%!important;background:var(--primary)!important;border:0!important;}

@media (max-width:768px){
  .detail-meta-row{justify-content:center!important;font-size:10px!important;}
  .detail-price-wholesale-row{grid-template-columns:minmax(86px,.68fr) minmax(0,1.32fr)!important;gap:6px!important;}
  .detail-price{font-size:clamp(21px,7vw,29px)!important;}
  .detail-price-wholesale-row .detail-wholesale-title{font-size:8px!important;}
  .detail-price-wholesale-row .detail-wholesale-tier span{font-size:7px!important;}
  .detail-price-wholesale-row .detail-wholesale-tier strong{font-size:8.5px!important;}
}

/* =========================================================
   AJUSTE FINAL EXCLUSIVO DE TARJETAS DE PRODUCTO
   WhatsApp junto al precio, Código | Marca adaptable y alturas uniformes.
========================================================= */
.product-card .product-info{
  min-width:0;
}

.product-card .product-meta{
  width:100%;
  min-width:0;
  height:30px;
  min-height:30px;
  margin:2px 0 0;
  padding:0 4px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:nowrap;
  gap:4px;
  overflow:visible;
  text-align:center;
  white-space:nowrap;
  line-height:1.15;
  font-size:12px;
}
.product-card .product-meta > span{min-width:0;}
.product-card .product-meta strong{font-size:inherit;}
.product-card .product-meta.brand-medium{font-size:11px;}
.product-card .product-meta.brand-long{font-size:10px;letter-spacing:-.12px;}
.product-card .product-meta.brand-very-long{
  height:30px;
  min-height:30px;
  font-size:9px;
  line-height:1.05;
  letter-spacing:-.18px;
  white-space:normal;
}
.product-card .product-meta.brand-very-long .product-brand{
  display:inline;
  max-width:72%;
  text-align:center;
  overflow-wrap:anywhere;
}
.product-card .product-meta-empty{visibility:hidden;}

.product-card .product-old-price,
.product-card .product-old-price.product-old-price-empty{
  box-sizing:border-box;
  height:22px;
  min-height:22px;
  line-height:22px;
  margin:1px 0 0;
}
.product-card .product-old-price.product-old-price-empty{visibility:hidden;}

.product-card .card-price-whatsapp-row{
  position:relative;
  width:100%;
  min-width:0;
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 44px;
  margin:0;
}
.product-card .card-price-whatsapp-row.without-whatsapp{padding-inline:8px;}
.product-card .card-price-whatsapp-row .product-price,
.product-card .card-price-whatsapp-row .product-no-price{
  min-width:0;
  margin:0!important;
  text-align:center;
  white-space:nowrap;
}
.product-card .card-price-whatsapp-row .card-whatsapp-icon-btn{
  position:absolute;
  right:7px;
  top:50%;
  transform:translateY(-58%);
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  min-height:34px!important;
  max-width:34px!important;
  max-height:34px!important;
  margin:0!important;
  padding:0!important;
  border-radius:50%!important;
  flex:0 0 34px!important;
  box-shadow:0 4px 12px rgba(22,163,74,.20);
}
.product-card .card-price-whatsapp-row .card-whatsapp-icon-btn:hover{
  transform:translateY(-61%);
}
.product-card .card-price-whatsapp-row .whatsapp-icon{
  width:20px;
  height:20px;
  flex-basis:20px;
}
.product-card .card-price-whatsapp-row .whatsapp-icon svg{
  width:16px;
  height:16px;
}

.product-card .card-purchase-row,
.product-card .card-purchase-placeholder{
  box-sizing:border-box;
  width:100%;
  min-height:38px;
  height:38px;
  margin-top:3px!important;
  display:flex;
  align-items:center;
  justify-content:center!important;
}
.product-card .card-purchase-placeholder{visibility:hidden;}

/* Anula la ubicación anterior; ya no se genera, pero queda neutralizada. */
.product-card .card-whatsapp-upper{display:none!important;}

@media (max-width:768px){
  body.mobile-view-large .product-card .product-meta{font-size:11.5px;}
  body.mobile-view-large .product-card .product-meta.brand-medium{font-size:10.7px;}
  body.mobile-view-large .product-card .product-meta.brand-long{font-size:9.8px;}
  body.mobile-view-large .product-card .product-meta.brand-very-long{font-size:9px;}

  body.mobile-view-compact .product-card .product-meta{
    height:30px;
    min-height:30px;
    padding-inline:1px;
    gap:2px;
    font-size:9px!important;
    letter-spacing:-.12px;
  }
  body.mobile-view-compact .product-card .product-meta.brand-medium{font-size:8px!important;}
  body.mobile-view-compact .product-card .product-meta.brand-long{font-size:7px!important;letter-spacing:-.22px;}
  body.mobile-view-compact .product-card .product-meta.brand-very-long{
    font-size:6.5px!important;
    line-height:1.02;
    letter-spacing:-.25px;
  }
  body.mobile-view-compact .product-card .product-meta.brand-very-long .product-brand{max-width:70%;}
  body.mobile-view-compact .product-card .card-price-whatsapp-row{
    min-height:34px;
    padding:0 35px 0 3px;
  }
  body.mobile-view-compact .product-card .card-price-whatsapp-row .card-whatsapp-icon-btn{
    right:3px;
    width:29px!important;
    height:29px!important;
    min-width:29px!important;
    min-height:29px!important;
    max-width:29px!important;
    max-height:29px!important;
  }
  body.mobile-view-compact .product-card .card-price-whatsapp-row .whatsapp-icon{
    width:18px;height:18px;flex-basis:18px;
  }
  body.mobile-view-compact .product-card .card-price-whatsapp-row .whatsapp-icon svg{width:14px;height:14px;}
  body.mobile-view-compact .product-card .product-old-price,
  body.mobile-view-compact .product-card .product-old-price.product-old-price-empty{
    height:19px!important;
    min-height:19px!important;
    line-height:19px!important;
    margin-top:0!important;
  }
  body.mobile-view-compact .product-card .card-purchase-row,
  body.mobile-view-compact .product-card .card-purchase-placeholder{
    height:36px;
    min-height:36px;
    margin-top:2px!important;
  }
}

/* =========================================================
   DISTRIBUCIÓN INTERNA COMPACTA DE TARJETAS
   Solo modifica separación, orden visual y alineación interna.
========================================================= */
.product-card .product-info,
.product-card .premium-info{
  box-sizing:border-box;
  padding:5px 12px 10px!important;
  text-align:center;
  gap:0!important;
}

/* Aviso inmediatamente debajo de la imagen. */
.product-card .card-options-note{
  box-sizing:border-box;
  width:100%;
  height:16px;
  min-height:16px;
  margin:1px 0 1px!important;
  padding:0 1px!important;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:clamp(8px,.95vw,10.5px)!important;
  line-height:16px!important;
  letter-spacing:-.15px!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
}
.product-card .card-options-note-placeholder{
  visibility:hidden;
  pointer-events:none;
}

/* Nombre compacto, pero con reserva uniforme de hasta dos líneas. */
.product-card .product-info h3,
.product-card .premium-info h3{
  box-sizing:border-box;
  min-height:36px!important;
  height:36px!important;
  margin:0!important;
  padding:0 2px!important;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:17px;
  line-height:1.08!important;
  overflow:hidden;
}

/* Código | Marca: una línea prioritaria y dos como último recurso. */
.product-card .product-meta{
  box-sizing:border-box;
  width:100%;
  min-width:0;
  height:24px!important;
  min-height:24px!important;
  margin:1px 0 0!important;
  padding:0 3px!important;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:nowrap;
  gap:3px!important;
  line-height:1.05!important;
  white-space:nowrap;
  overflow:visible;
  font-size:11.5px;
}
.product-card .product-meta.brand-medium{font-size:10.7px!important;}
.product-card .product-meta.brand-long{font-size:9.7px!important;letter-spacing:-.12px!important;}
.product-card .product-meta.brand-very-long{
  height:24px!important;
  min-height:24px!important;
  font-size:8.8px!important;
  line-height:1.02!important;
  letter-spacing:-.18px!important;
  white-space:normal!important;
}
.product-card .product-meta.brand-very-long .product-brand{
  display:inline;
  max-width:74%;
  text-align:center;
  overflow-wrap:anywhere;
}

/* Precio anterior: reserva mínima para mantener el precio final alineado. */
.product-card .product-old-price,
.product-card .product-old-price.product-old-price-empty{
  box-sizing:border-box;
  height:17px!important;
  min-height:17px!important;
  line-height:17px!important;
  margin:0!important;
  padding:0!important;
}

/* Precio final siempre centrado; WhatsApp flotante a la derecha sin empujarlo. */
.product-card .card-price-whatsapp-row{
  box-sizing:border-box;
  position:relative;
  width:100%;
  min-width:0;
  min-height:34px!important;
  height:34px!important;
  margin:0!important;
  padding:0 40px!important;
  display:flex;
  align-items:center;
  justify-content:center;
}
.product-card .card-price-whatsapp-row.without-whatsapp{padding-inline:8px!important;}
.product-card .card-price-whatsapp-row .product-price,
.product-card .card-price-whatsapp-row .product-no-price{
  width:auto;
  margin:0!important;
  padding:0!important;
  text-align:center!important;
  line-height:1!important;
  white-space:nowrap;
}
.product-card .card-price-whatsapp-row .card-whatsapp-icon-btn{
  right:5px!important;
  top:50%!important;
  transform:translateY(-58%)!important;
  width:31px!important;
  height:31px!important;
  min-width:31px!important;
  min-height:31px!important;
  max-width:31px!important;
  max-height:31px!important;
}
.product-card .card-price-whatsapp-row .card-whatsapp-icon-btn:hover{
  transform:translateY(-61%)!important;
}

/* Cantidad próxima al precio, con separación uniforme. */
.product-card .card-purchase-row,
.product-card .card-purchase-placeholder{
  box-sizing:border-box;
  width:100%;
  height:36px!important;
  min-height:36px!important;
  margin-top:2px!important;
  padding:0!important;
  display:flex;
  align-items:center;
  justify-content:center!important;
}

@media (max-width:768px){
  body.mobile-view-large .product-card .product-info,
  body.mobile-view-large .product-card .premium-info{
    padding:4px 10px 9px!important;
  }
  body.mobile-view-large .product-card .card-options-note{
    height:15px;min-height:15px;line-height:15px!important;
  }
  body.mobile-view-large .product-card .product-info h3,
  body.mobile-view-large .product-card .premium-info h3{
    height:34px!important;min-height:34px!important;font-size:16px!important;
  }

  body.mobile-view-compact .product-card .product-info,
  body.mobile-view-compact .product-card .premium-info{
    padding:3px 6px 8px!important;
  }
  body.mobile-view-compact .product-card .card-options-note{
    height:14px!important;
    min-height:14px!important;
    margin:0!important;
    line-height:14px!important;
    font-size:clamp(6.2px,1.8vw,8px)!important;
    letter-spacing:-.25px!important;
  }
  body.mobile-view-compact .product-card .product-info h3,
  body.mobile-view-compact .product-card .premium-info h3{
    height:32px!important;
    min-height:32px!important;
    margin:0!important;
    font-size:13px!important;
    line-height:1.05!important;
  }
  body.mobile-view-compact .product-card .product-meta{
    height:22px!important;
    min-height:22px!important;
    margin:0!important;
    padding-inline:0!important;
    gap:2px!important;
    font-size:8.7px!important;
  }
  body.mobile-view-compact .product-card .product-meta.brand-medium{font-size:7.8px!important;}
  body.mobile-view-compact .product-card .product-meta.brand-long{font-size:6.9px!important;letter-spacing:-.2px!important;}
  body.mobile-view-compact .product-card .product-meta.brand-very-long{
    height:22px!important;
    min-height:22px!important;
    font-size:6.3px!important;
    line-height:1!important;
  }
  body.mobile-view-compact .product-card .product-meta.brand-very-long .product-brand{max-width:70%;}
  body.mobile-view-compact .product-card .product-old-price,
  body.mobile-view-compact .product-card .product-old-price.product-old-price-empty{
    height:15px!important;
    min-height:15px!important;
    line-height:15px!important;
    margin:0!important;
  }
  body.mobile-view-compact .product-card .card-price-whatsapp-row{
    height:31px!important;
    min-height:31px!important;
    padding:0 33px 0 3px!important;
  }
  body.mobile-view-compact .product-card .card-price-whatsapp-row .card-whatsapp-icon-btn{
    right:2px!important;
    width:27px!important;height:27px!important;
    min-width:27px!important;min-height:27px!important;
    max-width:27px!important;max-height:27px!important;
  }
  body.mobile-view-compact .product-card .card-purchase-row,
  body.mobile-view-compact .product-card .card-purchase-placeholder{
    height:34px!important;
    min-height:34px!important;
    margin-top:1px!important;
  }
}


/* =========================================================
   CORRECCIÓN DEFINITIVA — TARJETAS ULTRACOMPACTAS
   Alcance exclusivo: contenido informativo de product-card.
========================================================= */
.product-card{
  height:auto!important;
  min-height:0!important;
  align-self:start!important;
}
.product-card .product-info,
.product-card .premium-info{
  height:auto!important;
  min-height:0!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  gap:0!important;
  padding:1px 12px 7px!important;
}

/* Mensaje de opciones: pegado a la imagen y sin fila alta reservada. */
.product-card .card-options-note{
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  margin:0 0 1px!important;
  padding:0 1px!important;
  display:block!important;
  font-size:clamp(9px,.95vw,11px)!important;
  line-height:1.08!important;
  text-align:center!important;
  white-space:nowrap!important;
  overflow:visible!important;
}
.product-card .card-options-note-placeholder{
  display:block!important;
  height:1px!important;
  min-height:1px!important;
  margin:0!important;
  padding:0!important;
  visibility:hidden!important;
  animation:none!important;
}

/* Nombre: máximo dos líneas, centrado y sin aire extra. */
.product-card .product-info h3,
.product-card .premium-info h3{
  height:auto!important;
  min-height:2.16em!important;
  max-height:2.16em!important;
  margin:0 0 1px!important;
  padding:0 2px!important;
  display:-webkit-box!important;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden!important;
  text-align:center!important;
  line-height:1.08!important;
}

/* Código | Marca: misma línea base, tamaño y altura de línea para todo. */
.product-card .product-meta{
  box-sizing:border-box!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:2.12em!important;
  margin:0 0 1px!important;
  padding:0 2px!important;
  display:block!important;
  overflow:hidden!important;
  text-align:center!important;
  white-space:normal!important;
  font-size:12px!important;
  line-height:1.06!important;
  letter-spacing:0!important;
}
.product-card .product-meta > *,
.product-card .product-meta .product-meta-part,
.product-card .product-meta .product-meta-label,
.product-card .product-meta strong,
.product-card .product-meta .product-meta-separator{
  display:inline!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  vertical-align:baseline!important;
  font:inherit!important;
  line-height:inherit!important;
  letter-spacing:inherit!important;
}
.product-card .product-meta strong{font-weight:700!important;}
.product-card .product-meta .product-meta-part{white-space:normal!important;}
.product-card .product-meta .product-meta-separator{
  margin-inline:3px!important;
  opacity:.55!important;
  white-space:nowrap!important;
}
.product-card .product-meta.brand-medium{font-size:11px!important;}
.product-card .product-meta.brand-long{font-size:10px!important;letter-spacing:-.08px!important;}
.product-card .product-meta.brand-very-long{
  font-size:9px!important;
  line-height:1.04!important;
  letter-spacing:-.12px!important;
}
.product-card .product-meta.brand-very-long .product-brand{
  max-width:none!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
}
.product-card .product-meta-empty{
  height:1px!important;
  min-height:1px!important;
  margin:0!important;
  visibility:hidden!important;
}

/* Precio anterior solo ocupa altura real cuando existe. */
.product-card .product-old-price{
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  line-height:1.05!important;
}
.product-card .product-old-price.product-old-price-empty{
  display:block!important;
  height:1px!important;
  min-height:1px!important;
  line-height:1px!important;
  margin:0!important;
  padding:0!important;
  visibility:hidden!important;
}

/* Precio centrado respecto a toda la tarjeta; WhatsApp fuera del flujo. */
.product-card .card-price-whatsapp-row{
  position:relative!important;
  box-sizing:border-box!important;
  width:100%!important;
  height:auto!important;
  min-height:31px!important;
  margin:0!important;
  padding:0 40px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.product-card .card-price-whatsapp-row.without-whatsapp{padding-inline:4px!important;}
.product-card .card-price-whatsapp-row .product-price,
.product-card .card-price-whatsapp-row .product-no-price{
  margin:0!important;
  padding:0!important;
  text-align:center!important;
  line-height:1!important;
}
.product-card .card-price-whatsapp-row .card-whatsapp-icon-btn{
  position:absolute!important;
  right:5px!important;
  top:47%!important;
  transform:translateY(-50%)!important;
  margin:0!important;
}
.product-card .card-price-whatsapp-row .card-whatsapp-icon-btn:hover{
  transform:translateY(-53%)!important;
}

/* Cantidad cercana al precio; nunca empujada al fondo. */
.product-card .card-purchase-row,
.product-card .card-purchase-placeholder{
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  margin:2px 0 0!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.product-card .card-purchase-row{margin-top:2px!important;}
.product-card .card-purchase-placeholder{
  height:1px!important;
  min-height:1px!important;
  margin-top:0!important;
  visibility:hidden!important;
}
.product-card .card-qty{margin-inline:auto!important;}

@media (max-width:768px){
  body.mobile-view-large .product-card .product-info,
  body.mobile-view-large .product-card .premium-info{
    padding:1px 10px 7px!important;
  }
  body.mobile-view-large .product-card .product-meta{font-size:11.5px!important;}
  body.mobile-view-large .product-card .product-meta.brand-medium{font-size:10.7px!important;}
  body.mobile-view-large .product-card .product-meta.brand-long{font-size:9.8px!important;}
  body.mobile-view-large .product-card .product-meta.brand-very-long{font-size:9px!important;}

  body.mobile-view-compact .product-card .product-info,
  body.mobile-view-compact .product-card .premium-info{
    padding:0 6px 6px!important;
  }
  body.mobile-view-compact .product-card .card-options-note{
    margin:0 0 1px!important;
    font-size:clamp(7px,1.9vw,8.6px)!important;
    line-height:1.05!important;
    letter-spacing:-.18px!important;
  }
  body.mobile-view-compact .product-card .product-info h3,
  body.mobile-view-compact .product-card .premium-info h3{
    min-height:2.1em!important;
    max-height:2.1em!important;
    margin-bottom:1px!important;
    font-size:13px!important;
    line-height:1.05!important;
  }
  body.mobile-view-compact .product-card .product-meta{
    max-height:2.06em!important;
    margin:0 0 1px!important;
    padding-inline:0!important;
    font-size:8.4px!important;
    line-height:1.03!important;
    letter-spacing:-.12px!important;
  }
  body.mobile-view-compact .product-card .product-meta.brand-medium{font-size:7.8px!important;}
  body.mobile-view-compact .product-card .product-meta.brand-long{font-size:7px!important;letter-spacing:-.18px!important;}
  body.mobile-view-compact .product-card .product-meta.brand-very-long{
    font-size:6.4px!important;
    line-height:1.02!important;
    letter-spacing:-.22px!important;
  }
  body.mobile-view-compact .product-card .product-meta .product-meta-separator{
    margin-inline:2px!important;
  }
  body.mobile-view-compact .product-card .card-price-whatsapp-row{
    min-height:29px!important;
    padding:0 33px!important;
  }
  body.mobile-view-compact .product-card .card-price-whatsapp-row.without-whatsapp{
    padding-inline:2px!important;
  }
  body.mobile-view-compact .product-card .card-purchase-row{margin-top:2px!important;}
}

/* =========================================================
   AJUSTE PREMIUM FINAL — INFORMACIÓN DE TARJETA
   Código/Marca adaptables, aviso de variantes en fila inferior
   y precio centrado sin depender del botón WhatsApp.
========================================================= */
.product-card .product-info,
.product-card .premium-info{
  padding-top:2px!important;
}

/* El nombre comienza inmediatamente después de la imagen. */
.product-card .product-info h3,
.product-card .premium-info h3{
  margin-top:0!important;
  margin-bottom:2px!important;
}

/* Código y Marca comparten tipografía y línea base real. */
.product-card .product-meta{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:baseline!important;
  justify-content:center!important;
  column-gap:0!important;
  row-gap:1px!important;
  max-height:none!important;
  overflow:visible!important;
}
.product-card .product-meta .product-meta-part,
.product-card .product-meta .product-meta-label,
.product-card .product-meta strong,
.product-card .product-meta .product-meta-separator{
  display:inline!important;
  vertical-align:baseline!important;
  font:inherit!important;
  line-height:inherit!important;
}
.product-card .product-meta .product-meta-part{
  min-width:0!important;
}
.product-card .product-meta.brand-long,
.product-card .product-meta.brand-very-long{
  line-height:1.08!important;
}
/* Para marcas muy largas: Código arriba y Marca abajo, ambos centrados. */
.product-card .product-meta.brand-very-long .product-code,
.product-card .product-meta.brand-very-long .product-brand{
  flex:0 0 100%!important;
  width:100%!important;
  text-align:center!important;
}
.product-card .product-meta.brand-very-long .product-meta-separator{
  display:none!important;
}

/* El precio usa todo el ancho de la tarjeta; WhatsApp queda superpuesto a la derecha. */
.product-card .card-price-whatsapp-row,
.product-card .card-price-whatsapp-row.has-whatsapp,
.product-card .card-price-whatsapp-row.without-whatsapp{
  display:grid!important;
  grid-template-columns:1fr!important;
  place-items:center!important;
  padding:0!important;
}
.product-card .card-price-whatsapp-row .product-price,
.product-card .card-price-whatsapp-row .product-no-price{
  grid-column:1!important;
  grid-row:1!important;
  width:100%!important;
  text-align:center!important;
  justify-self:center!important;
}
.product-card .card-price-whatsapp-row .card-whatsapp-icon-btn{
  z-index:2!important;
}

/* Fila inferior interactiva: aviso de variantes o controles de cantidad. */
.product-card .card-purchase-row,
.product-card .card-purchase-row.has-variants,
.product-card .card-purchase-row.has-quantity{
  min-height:34px!important;
  margin-top:2px!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.product-card .card-purchase-row.has-variants{
  padding-inline:4px!important;
}
.product-card .card-options-note.card-options-note-inline{
  width:auto!important;
  max-width:100%!important;
  min-height:0!important;
  height:auto!important;
  margin:0!important;
  padding:3px 7px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
  white-space:normal!important;
  text-wrap:balance!important;
  font-size:10px!important;
  line-height:1.12!important;
  border-radius:8px!important;
  cursor:pointer!important;
}

@media (max-width:768px){
  body.mobile-view-large .product-card .product-info,
  body.mobile-view-large .product-card .premium-info{
    padding-top:2px!important;
  }
  body.mobile-view-compact .product-card .product-info,
  body.mobile-view-compact .product-card .premium-info{
    padding-top:1px!important;
  }
  body.mobile-view-compact .product-card .product-meta.brand-long .product-code,
  body.mobile-view-compact .product-card .product-meta.brand-long .product-brand,
  body.mobile-view-compact .product-card .product-meta.brand-very-long .product-code,
  body.mobile-view-compact .product-card .product-meta.brand-very-long .product-brand{
    flex:0 0 100%!important;
    width:100%!important;
    text-align:center!important;
  }
  body.mobile-view-compact .product-card .product-meta.brand-long .product-meta-separator,
  body.mobile-view-compact .product-card .product-meta.brand-very-long .product-meta-separator{
    display:none!important;
  }
  body.mobile-view-compact .product-card .card-price-whatsapp-row{
    padding:0!important;
  }
  body.mobile-view-compact .product-card .card-options-note.card-options-note-inline{
    padding:2px 4px!important;
    gap:2px!important;
    font-size:7.5px!important;
    line-height:1.1!important;
  }
  body.mobile-view-compact .product-card .card-purchase-row,
  body.mobile-view-compact .product-card .card-purchase-row.has-variants,
  body.mobile-view-compact .product-card .card-purchase-row.has-quantity{
    min-height:32px!important;
    margin-top:1px!important;
  }
}

/* =========================================================
   AJUSTE PREMIUM RESPONSIVO — JULIO 2026
   Nombres completos, descuento después del precio y más aire en PC.
========================================================= */

/* El nombre siempre se muestra completo y la tarjeta crece solo lo necesario. */
.product-card .product-info h3,
.product-card .premium-info h3{
  min-height:0!important;
  max-height:none!important;
  height:auto!important;
  display:block!important;
  overflow:visible!important;
  -webkit-line-clamp:unset!important;
  -webkit-box-orient:initial!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  text-wrap:balance!important;
  margin-bottom:3px!important;
}

/* Código y Marca permanecen muy cerca del nombre, pero sin superponerse. */
.product-card .product-meta{
  margin-top:0!important;
  margin-bottom:4px!important;
  overflow:visible!important;
  max-height:none!important;
  text-wrap:balance!important;
}
.product-card .product-meta .product-meta-part{
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}

/* El precio anterior/descuento aparece después del precio final. */
.product-card .product-discount-after-price{
  margin:1px 0 3px!important;
  padding:0!important;
  text-align:center!important;
  line-height:1.15!important;
  opacity:.78!important;
  text-decoration:none!important;
}

.product-card .product-discount-after-price span{
  font-size:.9em!important;
  font-weight:600!important;
  text-decoration:none!important;
}

.product-card .product-discount-after-price .old-price-value{
  text-decoration:line-through!important;
  text-decoration-color:#ff2b6a!important;
  text-decoration-thickness:2px!important;
}

/* Aviso de opciones: admite dos líneas, más visible y claramente interactivo. */
.product-card .card-options-note.card-options-note-inline{
  width:min(100%, 210px)!important;
  min-height:40px!important;
  padding:5px 10px!important;
  font-size:11.5px!important;
  line-height:1.18!important;
  font-weight:700!important;
  text-align:center!important;
  white-space:normal!important;
  text-wrap:balance!important;
  border:1px solid color-mix(in srgb, var(--primary) 28%, transparent)!important;
  box-shadow:0 3px 10px rgba(15,23,42,.08)!important;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease!important;
}
.product-card .card-options-note.card-options-note-inline:hover,
.product-card .card-options-note.card-options-note-inline:focus-visible{
  transform:translateY(-1px) scale(1.015)!important;
  box-shadow:0 5px 14px rgba(15,23,42,.13)!important;
}
.product-card .card-options-note.card-options-note-inline > span:first-child{
  flex:0 0 auto!important;
  font-size:1.18em!important;
  animation:cardOptionTap 1.8s ease-in-out infinite!important;
}
@keyframes cardOptionTap{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-2px) rotate(-7deg)}
}

/* En PC se agrega aire visual; celular conserva la compactación lograda. */
@media (min-width:769px){
  .product-card .product-info,
  .product-card .premium-info{
    padding:8px 14px 13px!important;
  }
  .product-card .product-info h3,
  .product-card .premium-info h3{
    margin-bottom:5px!important;
    line-height:1.2!important;
  }
  .product-card .product-meta{
    margin-bottom:6px!important;
    font-size:12px!important;
    line-height:1.16!important;
  }
  .product-card .product-meta.brand-medium{font-size:11.5px!important;}
  .product-card .product-meta.brand-long{font-size:10.8px!important;}
  .product-card .product-meta.brand-very-long{font-size:10.2px!important;}
  .product-card .card-price-whatsapp-row{
    min-height:36px!important;
    margin-top:2px!important;
  }
  .product-card .product-discount-after-price{
    margin:2px 0 5px!important;
  }
  .product-card .card-purchase-row,
  .product-card .card-purchase-row.has-variants,
  .product-card .card-purchase-row.has-quantity{
    min-height:44px!important;
    margin-top:5px!important;
  }
}

@media (max-width:768px){
  .product-card .product-info h3,
  .product-card .premium-info h3{
    margin-bottom:2px!important;
    line-height:1.08!important;
  }
  .product-card .product-meta{
    margin-bottom:2px!important;
  }
  .product-card .product-discount-after-price{
    margin:0 0 2px!important;
    font-size:10px!important;
  }
  body.mobile-view-compact .product-card .card-options-note.card-options-note-inline{
    width:min(100%, 150px)!important;
    min-height:36px!important;
    padding:4px 6px!important;
    font-size:8.4px!important;
    line-height:1.15!important;
  }
}

/* =========================================================
   AJUSTE FINAL DE UNIFORMIDAD — JULIO 2026
   Todas las tarjetas iguales, categorías completas y meta más cercana en móvil.
========================================================= */

/* La barra superior comparte exactamente el ancho y la recta de la grilla. */
.search-section{
  width:100%!important;
  max-width:none!important;
  padding-inline:0!important;
}
.search-section .catalog-toolbar{
  width:calc(100% - 36px)!important;
  max-width:var(--container-max)!important;
  margin-inline:auto!important;
}

/* Buscador, filtros y selector siempre tienen el mismo alto. */
.search-box,
.quick-filter-btn,
.categories-select{
  height:44px!important;
  min-height:44px!important;
  max-height:44px!important;
  box-sizing:border-box!important;
}
.quick-filter-btn{
  width:44px!important;
  min-width:44px!important;
  max-width:44px!important;
}

/* En modo botones se muestran todas las categorías, completas y en filas ordenadas. */
.catalog-toolbar[data-category-mode="botones"] .categories-bar{
  display:flex!important;
  width:100%!important;
  flex-wrap:wrap!important;
  justify-content:flex-start!important;
  align-items:center!important;
  overflow:visible!important;
  padding-inline:0!important;
}
.catalog-toolbar[data-category-mode="botones"] .categories-bar .category-btn,
.catalog-toolbar[data-category-mode="botones"] .categories-bar .category-extra{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  max-width:100%!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  line-height:1.15!important;
  text-align:center!important;
}
.catalog-toolbar[data-category-mode="botones"] .category-more-toggle{
  display:none!important;
}
.catalog-toolbar[data-category-mode="botones"] .categories-bar.show-more-categories{
  position:static!important;
  width:100%!important;
  max-width:100%!important;
  padding:2px 0 4px!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

/* Altura calculada por JavaScript para todo el catálogo visible. */
.catalog-grid{
  align-items:stretch!important;
}
.product-card{
  align-self:stretch!important;
  display:flex!important;
  flex-direction:column!important;
  box-sizing:border-box!important;
}
.product-card .product-info,
.product-card .premium-info{
  flex:1 1 auto!important;
  display:flex!important;
  flex-direction:column!important;
  min-height:0!important;
}
.product-card .card-purchase-row{
  margin-top:auto!important;
}

/* El espacio reservado para “Antes” conserva la misma altura con o sin descuento. */
.product-card .product-old-price,
.product-card .product-discount-after-price,
.product-card .product-old-price-empty{
  min-height:16px!important;
  height:16px!important;
  margin:1px 0 3px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
}
.product-card .product-old-price-empty{
  visibility:hidden!important;
}

@media (max-width:768px){
  .search-section .catalog-toolbar{
    width:calc(100% - 20px)!important;
  }
  .search-box,
  .quick-filter-btn{
    height:40px!important;
    min-height:40px!important;
    max-height:40px!important;
  }
  .quick-filter-btn{
    width:40px!important;
    min-width:40px!important;
    max-width:40px!important;
  }
  .categories-select{
    height:34px!important;
    min-height:34px!important;
    max-height:34px!important;
    line-height:34px!important;
  }
  .catalog-toolbar[data-category-mode="botones"] .categories-bar{
    justify-content:flex-start!important;
    gap:5px!important;
  }
  .catalog-toolbar[data-category-mode="botones"] .categories-bar .category-btn{
    min-height:31px!important;
    padding:6px 9px!important;
  }

  /* Código/Marca suben y quedan cerca tanto con nombres de una como de dos líneas. */
  .product-card .product-info h3,
  .product-card .premium-info h3{
    margin-bottom:0!important;
    padding-bottom:0!important;
  }
  .product-card .product-meta{
    margin-top:-1px!important;
    margin-bottom:2px!important;
    padding-top:0!important;
    row-gap:0!important;
    line-height:1.04!important;
  }
  body.mobile-view-compact .product-card .product-info,
  body.mobile-view-compact .product-card .premium-info{
    padding-top:0!important;
  }
  .product-card .product-old-price,
  .product-card .product-discount-after-price,
  .product-card .product-old-price-empty{
    min-height:13px!important;
    height:13px!important;
    margin:0 0 2px!important;
  }
}

/* =========================================================
   CORRECCIÓN FINAL CATEGORÍAS — MÁS / MENOS RESTAURADO
   BOTONES permanece en una sola fila en PC y celular.
========================================================= */
.catalog-toolbar[data-category-mode="botones"] .categories-bar{
  position:relative!important;
  display:flex!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  flex-wrap:nowrap!important;
  justify-content:flex-start!important;
  align-items:center!important;
  overflow:hidden!important;
  padding:0!important;
}
.catalog-toolbar[data-category-mode="botones"] .categories-bar .category-btn,
.catalog-toolbar[data-category-mode="botones"] .categories-bar .category-extra,
.catalog-toolbar[data-category-mode="botones"] .category-more-toggle{
  display:inline-flex!important;
  flex:0 0 auto!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  max-width:none!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
  line-height:1.15!important;
}
.catalog-toolbar[data-category-mode="botones"] .categories-bar .category-extra{
  display:none!important;
}
.catalog-toolbar[data-category-mode="botones"] .category-more-toggle{
  display:inline-flex!important;
}
.catalog-toolbar[data-category-mode="botones"] .categories-bar.show-more-categories{
  position:absolute!important;
  left:0!important;
  top:calc(100% + 7px)!important;
  z-index:50!important;
  width:min(760px,calc(100vw - 36px))!important;
  max-width:min(760px,calc(100vw - 36px))!important;
  flex-wrap:wrap!important;
  overflow:visible!important;
  gap:7px!important;
  padding:10px!important;
  background:rgba(255,255,255,.98)!important;
  border:1px solid rgba(15,23,42,.09)!important;
  border-radius:16px!important;
  box-shadow:0 18px 45px rgba(15,23,42,.16)!important;
}
.catalog-toolbar[data-category-mode="botones"] .categories-bar.show-more-categories .category-extra{
  display:inline-flex!important;
}

@media (max-width:768px){
  .catalog-toolbar[data-category-mode="botones"] .categories-bar{
    flex-wrap:nowrap!important;
    overflow:hidden!important;
    gap:5px!important;
  }
  .catalog-toolbar[data-category-mode="botones"] .categories-bar.show-more-categories{
    left:0!important;
    top:calc(100% + 5px)!important;
    width:100%!important;
    max-width:100%!important;
    flex-wrap:wrap!important;
    justify-content:flex-start!important;
    gap:5px!important;
    padding:8px!important;
  }
}

/* OPCION 1 EN MODO BOTON: texto completo y sin apariencia circular */
.detail-option1-text-btn{
  width:auto!important;
  min-width:52px;
  min-height:38px;
  height:auto;
  padding:8px 14px!important;
  border-radius:10px!important;
  white-space:normal;
  line-height:1.2;
  text-align:center;
  overflow-wrap:anywhere;
}

@media (max-width:768px){
  .detail-option1-text-btn{
    min-height:42px;
    padding:9px 13px!important;
    font-size:14px;
  }
}


/* =========================================================
   AJUSTES SOLICITADOS — TOAST, MODAL Y PRECIOS
========================================================= */
/* El aviso usa exactamente el color principal de los botones. */
.toast.success,
.toast.info{
  background:var(--primary)!important;
}

/* Tachado rojo, sólido y claramente visible en todos los precios anteriores. */
.product-old-price,
.variant-old-price,
.detail-old-price,
.cart-old-price,
.old-price{
  text-decoration-line:line-through!important;
  text-decoration-style:solid!important;
  text-decoration-color:#e11d48!important;
  text-decoration-thickness:2px!important;
}

/* Evita que el punto de color se deforme al reducir el ancho en celular. */
.color-card .color-dot{
  width:28px!important;
  min-width:28px!important;
  max-width:28px!important;
  height:28px!important;
  min-height:28px!important;
  max-height:28px!important;
  aspect-ratio:1 / 1!important;
  border-radius:50%!important;
  flex:0 0 28px!important;
  box-sizing:border-box!important;
}

/* Precio por mayor más angosto, pero con espacio suficiente para importes largos. */
.wholesale-box{
  width:158px;
  min-width:158px;
  max-width:158px;
}
.wholesale-row{
  grid-template-columns:minmax(52px,1fr) minmax(64px,auto);
  gap:4px;
  padding-inline:6px;
}
.wholesale-row strong{
  min-width:0;
  overflow:visible;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}

@media(max-width:600px){
  .toast{
    max-width:calc(100vw - 28px)!important;
    width:max-content!important;
    padding:10px 16px!important;
    font-size:12px!important;
    line-height:1!important;
    white-space:nowrap!important;
    text-align:center!important;
    bottom:20px!important;
  }

  .color-card .color-dot{
    width:24px!important;
    min-width:24px!important;
    max-width:24px!important;
    height:24px!important;
    min-height:24px!important;
    max-height:24px!important;
    flex-basis:24px!important;
  }

  .wholesale-box{
    width:116px!important;
    min-width:116px!important;
    max-width:116px!important;
  }
  .wholesale-row{
    grid-template-columns:minmax(43px,1fr) minmax(58px,auto)!important;
    gap:2px!important;
    padding:5px 4px!important;
  }
  .wholesale-row span{
    font-size:7px!important;
  }
  .wholesale-row strong{
    font-size:7.5px!important;
    letter-spacing:-.1px!important;
  }
}


/* =========================================================
   MODAL: TRES ACCIONES EN UNA SOLA FILA
========================================================= */
.detail-action-grid{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:9px !important;
}
.detail-cart-btn,
#detailAddCartBtn{
  display:flex !important;
  width:100% !important;
  min-width:0 !important;
  min-height:46px !important;
  margin:0 !important;
  padding:8px 10px !important;
  border:0 !important;
  border-radius:12px !important;
  align-items:center !important;
  justify-content:center !important;
  background:var(--primary) !important;
  color:#fff !important;
  font-family:var(--font-main) !important;
  font-size:12px !important;
  font-weight:800 !important;
  line-height:1.1 !important;
  text-align:center !important;
  cursor:pointer;
}
.detail-cart-btn:hover,
#detailAddCartBtn:hover{background:var(--primary-dark) !important;}

@media(max-width:700px){
  .detail-action-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:5px !important;
  }
  .detail-whatsapp-btn,
  .detail-close-link,
  .detail-cart-btn,
  #detailAddCartBtn{
    min-height:42px !important;
    padding:6px 4px !important;
    border-radius:9px !important;
    font-size:9.2px !important;
    line-height:1.05 !important;
    white-space:normal !important;
  }
  .detail-whatsapp-btn{gap:4px !important;}
  .detail-whatsapp-btn .whatsapp-icon{
    width:18px !important;
    height:18px !important;
    flex:0 0 18px !important;
  }
  .detail-whatsapp-btn .whatsapp-icon svg{
    width:12px !important;
    height:12px !important;
  }
}

/* =========================================================
   V51 — MODAL: PRECIO POR MAYOR EN UNA SOLA FILA
   Tres escalas siempre alineadas; importes largos visibles.
========================================================= */
.detail-price-wholesale-row{
  grid-template-columns:minmax(118px,.78fr) minmax(245px,1.22fr) !important;
  justify-content:space-between !important;
}
.detail-price-wholesale-row .detail-wholesale{
  width:100% !important;
  max-width:310px !important;
  min-width:0 !important;
  justify-self:end !important;
  box-sizing:border-box !important;
}
.detail-price-wholesale-row .detail-wholesale-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:4px !important;
}
.detail-price-wholesale-row .detail-wholesale-tier{
  min-width:0 !important;
  padding:4px 2px !important;
  overflow:visible !important;
}
.detail-price-wholesale-row .detail-wholesale-tier span,
.detail-price-wholesale-row .detail-wholesale-tier strong{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:clip !important;
  text-align:center !important;
  font-variant-numeric:tabular-nums !important;
}
.detail-price-wholesale-row .detail-wholesale-tier strong{
  font-size:clamp(8.8px,.9vw,10.5px) !important;
  letter-spacing:-.15px !important;
}

@media(max-width:768px){
  .detail-price-wholesale-row{
    grid-template-columns:minmax(82px,.62fr) minmax(188px,1.38fr) !important;
    gap:5px !important;
  }
  .detail-price-wholesale-row .detail-wholesale{
    width:100% !important;
    max-width:238px !important;
    padding:5px !important;
  }
  .detail-price-wholesale-row .detail-wholesale-title{
    margin-bottom:4px !important;
    font-size:8px !important;
    white-space:nowrap !important;
  }
  .detail-price-wholesale-row .detail-wholesale-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:2px !important;
  }
  .detail-price-wholesale-row .detail-wholesale-tier{
    padding:3px 1px !important;
  }
  .detail-price-wholesale-row .detail-wholesale-tier span{
    font-size:clamp(6.7px,1.85vw,7.8px) !important;
    letter-spacing:-.12px !important;
  }
  .detail-price-wholesale-row .detail-wholesale-tier strong{
    font-size:clamp(7.8px,2.15vw,9.2px) !important;
    letter-spacing:-.22px !important;
  }
}

@media(max-width:390px){
  .detail-price-wholesale-row{
    grid-template-columns:minmax(76px,.58fr) minmax(174px,1.42fr) !important;
    gap:4px !important;
  }
  .detail-price-wholesale-row .detail-wholesale{
    max-width:218px !important;
    padding:4px !important;
  }
  .detail-price-wholesale-row .detail-wholesale-title{
    font-size:7.4px !important;
  }
  .detail-price-wholesale-row .detail-wholesale-tier span{
    font-size:6.4px !important;
  }
  .detail-price-wholesale-row .detail-wholesale-tier strong{
    font-size:7.6px !important;
  }
}

/* =========================================================
   V52 — MODAL: CÓDIGO | MARCA ALINEADOS CON EL NOMBRE
   Solo afecta la línea informativa del modal de detalle.
========================================================= */
.product-detail-info > h2,
.product-detail-info > .detail-meta-row{
  box-sizing:border-box;
  width:100%;
  padding-left:0!important;
  margin-left:0!important;
  text-align:left!important;
}

.product-detail-info > .detail-meta-row{
  display:flex!important;
  align-items:baseline!important;
  justify-content:flex-start!important;
  flex-wrap:nowrap!important;
  gap:0!important;
  max-width:100%;
  margin-top:0!important;
  white-space:nowrap!important;
  font-size:clamp(9px,1.15vw,12px)!important;
  line-height:1.35!important;
  letter-spacing:-.08px;
}

.product-detail-info > .detail-meta-row #detailCode,
.product-detail-info > .detail-meta-row #detailBrand{
  display:inline!important;
  flex:0 0 auto!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  font:inherit!important;
  line-height:inherit!important;
  letter-spacing:inherit!important;
  white-space:nowrap!important;
}

/* Evita separadores duplicados y deja uno solo entre Código y Marca. */
.product-detail-info > .detail-meta-row.has-both #detailCode::after{
  content:none!important;
}
.product-detail-info > .detail-meta-row.has-both > #detailBrand::before{
  content:"|"!important;
  display:inline!important;
  margin:0 7px!important;
  color:rgba(15,23,42,.35)!important;
  font:inherit!important;
}

@media (max-width:768px){
  .product-detail-info > .detail-meta-row{
    justify-content:flex-start!important;
    font-size:clamp(8px,2.45vw,10px)!important;
    letter-spacing:-.18px!important;
  }
  .product-detail-info > .detail-meta-row.has-both > #detailBrand::before{
    margin:0 4px!important;
  }
}


/* =========================================================
   V53 — MODAL: MAYOREO COMPACTO + ACCIONES EN UNA SOLA FILA
   Solo modifica el bloque mayorista y los tres botones del modal.
========================================================= */
/* La tarjeta mayorista ocupa solo lo necesario y permanece a la derecha. */
.detail-price-wholesale-row .detail-wholesale{
  width:max-content !important;
  max-width:270px !important;
  min-width:0 !important;
  justify-self:end !important;
  padding:6px 8px !important;
}
.detail-price-wholesale-row .detail-wholesale-grid{
  display:grid !important;
  grid-auto-flow:column !important;
  grid-auto-columns:max-content !important;
  grid-template-columns:none !important;
  justify-content:end !important;
  align-items:center !important;
  gap:0 !important;
}
.detail-price-wholesale-row .detail-wholesale-tier{
  position:relative !important;
  width:max-content !important;
  min-width:0 !important;
  padding:2px 7px !important;
  border-radius:0 !important;
  background:transparent !important;
  overflow:visible !important;
}
.detail-price-wholesale-row .detail-wholesale-tier + .detail-wholesale-tier{
  border-left:1px solid rgba(15,23,42,.28) !important;
}
.detail-price-wholesale-row .detail-wholesale-tier span,
.detail-price-wholesale-row .detail-wholesale-tier strong{
  width:auto !important;
  min-width:max-content !important;
  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:clip !important;
}
.detail-price-wholesale-row .detail-wholesale-tier span{
  font-size:8px !important;
}
.detail-price-wholesale-row .detail-wholesale-tier strong{
  font-size:10px !important;
  letter-spacing:-.18px !important;
}

/* WhatsApp solo como icono; los tres controles permanecen en una fila. */
.detail-action-grid{
  display:grid !important;
  grid-template-columns:44px minmax(0,1fr) minmax(0,1.28fr) !important;
  align-items:stretch !important;
  gap:7px !important;
}
.detail-action-grid .detail-whatsapp-btn{
  width:44px !important;
  min-width:44px !important;
  max-width:44px !important;
  min-height:44px !important;
  padding:0 !important;
  border-radius:50% !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
}
.detail-action-grid .detail-whatsapp-btn .whatsapp-icon{
  width:24px !important;
  height:24px !important;
  flex:0 0 24px !important;
  margin:0 !important;
}
.detail-action-grid .detail-whatsapp-btn .whatsapp-icon svg{
  width:17px !important;
  height:17px !important;
}
.detail-action-grid .detail-close-link,
.detail-action-grid .detail-cart-btn{
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  white-space:nowrap !important;
}

@media(max-width:700px){
  .detail-price-wholesale-row .detail-wholesale{
    width:max-content !important;
    max-width:226px !important;
    padding:5px 6px !important;
  }
  .detail-price-wholesale-row .detail-wholesale-tier{
    padding:2px 4px !important;
  }
  .detail-price-wholesale-row .detail-wholesale-tier span{
    font-size:6.9px !important;
  }
  .detail-price-wholesale-row .detail-wholesale-tier strong{
    font-size:8.4px !important;
    letter-spacing:-.22px !important;
  }
  .detail-action-grid{
    grid-template-columns:38px minmax(0,.92fr) minmax(0,1.22fr) !important;
    gap:4px !important;
  }
  .detail-action-grid .detail-whatsapp-btn{
    width:38px !important;
    min-width:38px !important;
    max-width:38px !important;
    min-height:38px !important;
  }
  .detail-action-grid .detail-whatsapp-btn .whatsapp-icon{
    width:21px !important;
    height:21px !important;
    flex-basis:21px !important;
  }
  .detail-action-grid .detail-whatsapp-btn .whatsapp-icon svg{
    width:15px !important;
    height:15px !important;
  }
  .detail-action-grid .detail-close-link,
  .detail-action-grid .detail-cart-btn{
    min-height:38px !important;
    padding:5px 4px !important;
    font-size:8.7px !important;
    line-height:1 !important;
  }
}

@media(max-width:390px){
  .detail-price-wholesale-row .detail-wholesale{
    max-width:210px !important;
    padding-inline:5px !important;
  }
  .detail-price-wholesale-row .detail-wholesale-tier{padding-inline:3px !important;}
  .detail-price-wholesale-row .detail-wholesale-tier span{font-size:6.4px !important;}
  .detail-price-wholesale-row .detail-wholesale-tier strong{font-size:7.8px !important;}
}

/* =========================================================
   V55 — MODAL: BOTONES SECUNDARIO Y PRINCIPAL UNIFORMES
   Solo iguala ancho/alto de Seguir viendo y Agregar al carrito.
========================================================= */
.detail-action-grid{
  grid-template-columns:44px minmax(0,1fr) minmax(0,1fr) !important;
}
.detail-action-grid .detail-close-link,
.detail-action-grid .detail-cart-btn,
.detail-action-grid #detailAddCartBtn{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  min-height:44px !important;
  height:44px !important;
  padding:8px 9px !important;
  border-radius:12px !important;
  font-size:11.5px !important;
  line-height:1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:nowrap !important;
}
.detail-action-grid .detail-close-link{
  background:#64748b !important;
  color:#fff !important;
  border:0 !important;
  box-shadow:0 7px 16px rgba(71,85,105,.18) !important;
}
.detail-action-grid .detail-close-link:hover{
  background:#475569 !important;
}


/* =========================================================
   AJUSTE V56 — "Consultar precio" compacto en móvil
   Permite dos líneas sin invadir el icono de WhatsApp.
========================================================= */
@media (max-width: 640px){
  body.mobile-view-compact .product-card .card-price-whatsapp-row.has-whatsapp{
    min-height:36px!important;
    padding-right:32px!important;
    padding-left:2px!important;
  }

  body.mobile-view-compact .product-card .card-price-whatsapp-row .product-no-price{
    width:100%!important;
    max-width:70px!important;
    white-space:normal!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    line-height:1.02!important;
    font-size:11px!important;
    text-align:center!important;
    justify-self:center!important;
  }
}

/* =========================================================
   V57 — CÍRCULOS DE COLOR PERFECTAMENTE REDONDOS EN CELULAR
   Ajuste exclusivo de forma; no modifica el resto del modal.
========================================================= */
@media (max-width:768px){
  .detail-option-list .detail-color-btn.is-color-only{
    box-sizing:border-box!important;
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    min-height:34px!important;
    max-width:34px!important;
    max-height:34px!important;
    flex:0 0 34px!important;
    aspect-ratio:1 / 1!important;
    padding:4px!important;
    margin:0!important;
    border-radius:50%!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    line-height:1!important;
  }

  .detail-option-list .detail-color-btn.is-color-only .detail-color-dot{
    box-sizing:border-box!important;
    width:22px!important;
    height:22px!important;
    min-width:22px!important;
    min-height:22px!important;
    max-width:22px!important;
    max-height:22px!important;
    flex:0 0 22px!important;
    aspect-ratio:1 / 1!important;
    margin:0!important;
    border-radius:50%!important;
  }

  .option-grid .color-card .color-dot{
    box-sizing:border-box!important;
    width:28px!important;
    height:28px!important;
    min-width:28px!important;
    min-height:28px!important;
    max-width:28px!important;
    max-height:28px!important;
    aspect-ratio:1 / 1!important;
    border-radius:50%!important;
  }
}

/* =========================================================
   V62 — AJUSTE EXCLUSIVO PARA CELULAR
   1) Precio de la tarjeta perfectamente centrado.
   2) Cantidad del modal desplazada a la izquierda para que
      el carrito flotante no cubra el botón +.
========================================================= */
@media (max-width:768px){
  /* El precio ocupa toda la fila y queda centrado respecto a la tarjeta,
     sin ser empujado por el botón de WhatsApp. */
  .product-card .card-price-whatsapp-row,
  .product-card .card-price-whatsapp-row.has-whatsapp,
  .product-card .card-price-whatsapp-row.without-whatsapp,
  body.mobile-view-compact .product-card .card-price-whatsapp-row,
  body.mobile-view-large .product-card .card-price-whatsapp-row{
    position:relative!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    place-items:center!important;
    width:100%!important;
    padding-left:0!important;
    padding-right:0!important;
  }

  .product-card .card-price-whatsapp-row .product-price,
  .product-card .card-price-whatsapp-row .product-no-price{
    grid-column:1!important;
    grid-row:1!important;
    width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
    padding-left:0!important;
    padding-right:0!important;
    text-align:center!important;
    justify-self:center!important;
  }

  .product-card .card-price-whatsapp-row .card-whatsapp-icon-btn{
    position:absolute!important;
    right:4px!important;
  }

  /* En el modal, Cantidad y sus controles permanecen juntos hacia la
     izquierda, dejando libre el lado derecho para el carrito flotante. */
  .detail-quantity-row{
    justify-content:flex-start!important;
    gap:18px!important;
    padding-right:72px!important;
  }

  .detail-quantity-row > span{
    flex:0 0 auto!important;
  }

  .detail-quantity-control{
    flex:0 0 auto!important;
    margin-left:0!important;
    margin-right:auto!important;
  }
}

@media (max-width:390px){
  .detail-quantity-row{
    gap:12px!important;
    padding-right:62px!important;
  }
}


/* =========================================================
   V63 — AJUSTES PUNTUALES SOLICITADOS
   1) Vista móvil 2: precio centrado de forma absoluta.
   2) PC: botón Compartir corto, a la derecha y con texto primario.
========================================================= */
@media (min-width:769px){
  .topbar{
    grid-template-columns:minmax(120px,1fr) auto minmax(120px,1fr)!important;
  }

  .brand-logo{
    justify-self:start;
  }

  .brand h1{
    justify-self:center;
  }

  #shareCatalogBtn{
    justify-self:end;
    min-width:auto!important;
    width:auto!important;
    padding:10px 18px!important;
    background:#fff!important;
    color:var(--primary)!important;
    border:2px solid var(--primary)!important;
    white-space:nowrap!important;
  }
}

@media (max-width:768px){
  body.mobile-view-compact .product-card .card-price-whatsapp-row{
    position:relative!important;
    display:block!important;
    min-height:38px!important;
    padding:0!important;
  }

  body.mobile-view-compact .product-card .card-price-whatsapp-row .product-price,
  body.mobile-view-compact .product-card .card-price-whatsapp-row .product-no-price{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    width:auto!important;
    max-width:calc(100% - 12px)!important;
    margin:0!important;
    padding:0!important;
    transform:translate(-50%,-50%)!important;
    text-align:center!important;
    white-space:nowrap!important;
  }

  body.mobile-view-compact .product-card .card-price-whatsapp-row .card-whatsapp-icon-btn{
    position:absolute!important;
    right:4px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
  }
}

/* =========================================================
   V64 — MODAL MÓVIL: CANTIDAD CENTRADA SOBRE LOS BOTONES
   Ajuste exclusivo de posición. No cambia tamaños ni funciones.
========================================================= */
@media (max-width:768px){
  .detail-quantity-row{
    justify-content:center!important;
    gap:12px!important;
    padding-left:42px!important;
    padding-right:0!important;
  }

  .detail-quantity-control{
    margin-left:0!important;
    margin-right:0!important;
  }
}

@media (max-width:390px){
  .detail-quantity-row{
    gap:10px!important;
    padding-left:40px!important;
    padding-right:0!important;
  }
}

/* =========================================================
   V65 — AJUSTE PUNTUAL DEL MODAL
   Cantidad alineada al inicio; contador centrado sobre los
   botones Seguir viendo y Agregar al carrito.
========================================================= */
.detail-quantity-row{
  position:relative!important;
  justify-content:center!important;
  padding-left:44px!important;
  padding-right:0!important;
}
.detail-quantity-row > span{
  position:absolute!important;
  left:0!important;
  margin:0!important;
}
.detail-quantity-control{
  margin:0!important;
}
.detail-action-grid .detail-close-link,
.detail-action-grid .detail-cart-btn,
.detail-action-grid #detailAddCartBtn{
  font-size:12.5px!important;
}


/* =========================================================
   MINI GALERÍA DE CONFIANZA DEBAJO DEL CATÁLOGO
   Solo se activa cuando MOSTRAR_EMPRESA = NO y existen fotos.
========================================================= */
.catalog-gallery[hidden]{
  display:none!important;
}
.catalog-gallery{
  width:100%;
  padding:8px 20px 30px;
}
.catalog-gallery-inner{
  width:min(1180px, 100%);
  margin:0 auto;
  padding:24px 22px 20px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,250,250,.98));
  box-shadow:0 10px 28px rgba(0,0,0,.07);
}
.catalog-gallery-title{
  margin:0 0 18px;
  text-align:center;
  color:var(--text-color, #202020);
  font-size:clamp(1.25rem, 2.2vw, 1.75rem);
  line-height:1.2;
  font-weight:800;
  letter-spacing:-.02em;
}
.catalog-gallery-title::after{
  content:"";
  display:block;
  width:58px;
  height:3px;
  margin:10px auto 0;
  border-radius:999px;
  background:var(--primary-color, var(--bg-header, #333));
  opacity:.85;
}
.catalog-gallery-viewport{
  overflow-x:auto;
  scroll-behavior:smooth;
  scrollbar-width:none;
  overscroll-behavior-inline:contain;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.catalog-gallery-viewport::-webkit-scrollbar{
  display:none;
}
.catalog-gallery-track{
  display:flex;
  gap:14px;
  width:max-content;
  padding:2px 2px 8px;
}
.catalog-gallery-item{
  flex:0 0 clamp(180px, 24vw, 270px);
  height:180px;
  margin:0;
  overflow:hidden;
  border-radius:15px;
  background:#f2f2f2;
  box-shadow:0 5px 16px rgba(0,0,0,.10);
  scroll-snap-align:start;
}
.catalog-gallery-item img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .35s ease;
}
.catalog-gallery-item:hover img{
  transform:scale(1.035);
}
.catalog-gallery-description{
  max-width:760px;
  margin:14px auto 0;
  text-align:center;
  color:var(--text-muted, #666);
  font-size:.96rem;
  line-height:1.6;
}
@media (max-width:600px){
  .catalog-gallery{
    padding:4px 12px 22px;
  }
  .catalog-gallery-inner{
    padding:20px 14px 16px;
    border-radius:16px;
  }
  .catalog-gallery-title{
    margin-bottom:15px;
  }
  .catalog-gallery-track{
    gap:10px;
  }
  .catalog-gallery-item{
    flex-basis:78vw;
    max-width:280px;
    height:168px;
  }
  .catalog-gallery-description{
    margin-top:11px;
    font-size:.9rem;
    line-height:1.5;
  }
}


/* =========================================================
   IMPORTACIÓN GRUPAL ABIERTA
   Productos marcados con MAS_VENDIDO = SI
========================================================= */
.importacion-banner{
  display:flex;
  align-items:center;
  gap:12px;
  margin:4px 0 18px;
  padding:14px 18px;
  border:2px solid var(--import-border, #F59E0B);
  border-radius:16px;
  background:color-mix(in srgb, var(--import-border, #F59E0B) 10%, #fff);
  box-shadow:var(--shadow-sm);
}
.importacion-banner[hidden]{display:none!important;}
.importacion-banner-icon{font-size:28px;line-height:1;}
.importacion-banner h2{margin:0;font-size:clamp(18px,2.2vw,25px);color:var(--primary-dark);}
.importacion-banner p{margin:2px 0 0;font-size:13px;font-weight:600;color:var(--text-soft);}
.product-card-importacion{
  position:relative;
  border:2px solid var(--import-border, #F59E0B)!important;
  box-shadow:0 8px 24px color-mix(in srgb, var(--import-border, #F59E0B) 22%, transparent)!important;
  overflow:hidden;
}
.product-importacion-badge{
  position:absolute;
  top:10px;
  left:10px;
  z-index:8;
  display:inline-flex;
  align-items:center;
  gap:5px;
  max-width:calc(100% - 58px);
  padding:6px 9px;
  border-radius:999px;
  background:var(--import-label, #F59E0B);
  color:#fff;
  font-size:10px;
  line-height:1;
  font-weight:900;
  letter-spacing:.35px;
  box-shadow:0 4px 12px rgba(0,0,0,.16);
}
@media(max-width:600px){
  .importacion-banner{padding:12px 13px;margin-bottom:14px;}
  .importacion-banner-icon{font-size:23px;}
  .importacion-banner p{font-size:11px;}
  .product-importacion-badge{top:7px;left:7px;padding:5px 7px;font-size:8px;}
}


/* =========================================================
   RD JAAM IMPORT — CONTROLES PROFESIONALES COORDINADOS
   Solo afecta filtros rápidos, anuncio e información de importación.
========================================================= */
.quick-filter-btn.sheet-hidden,
.quick-filter-btn[hidden]{display:none!important;}

/* Orden visual: Importación, Favoritos y Ofertas. */
#filterBestSellersBtn{order:1;}
#filterFavoritesBtn{order:2;}
#filterOffersBtn{order:3;}

/* Importación se entiende sin ocupar demasiado espacio. */
.quick-filter-btn.quick-filter-importacion{
  width:auto!important;
  min-width:126px!important;
  max-width:none!important;
  padding:0 15px!important;
  border-radius:999px!important;
  gap:7px;
  white-space:nowrap;
  line-height:1;
}
.quick-filter-importacion-icon{font-size:18px;line-height:1;}
.quick-filter-importacion-text{font-size:12px;font-weight:900;letter-spacing:.1px;}
.quick-filter-btn.quick-filter-importacion[data-estado="cerrada"]{opacity:.82;}
.quick-filter-btn.quick-filter-importacion[data-estado="proximamente"]{border-style:dashed;}

/* Estado de la campaña dentro del banner, sin alterar tarjetas. */
.importacion-banner[data-estado="cerrada"]{
  --import-border:#64748B;
  background:color-mix(in srgb, #64748B 9%, #fff);
}
.importacion-banner[data-estado="proximamente"]{
  --import-border:#8B5CF6;
  background:color-mix(in srgb, #8B5CF6 9%, #fff);
}

@media(max-width:600px){
  .quick-filter-btn.quick-filter-importacion{
    min-width:104px!important;
    padding:0 10px!important;
    gap:5px;
  }
  .quick-filter-importacion-icon{font-size:16px;}
  .quick-filter-importacion-text{font-size:10px;}
}


/* =========================================================
   AJUSTES PUNTUALES V90 - NO ALTERAR EL RESTO DEL DISEÑO
========================================================= */
.cart-floating{
  background:var(--cart-color, var(--primary)) !important;
  color:#fff !important;
}
.cart-floating:hover{box-shadow:0 10px 26px rgba(15,23,42,.32);}
.cart-floating:active{transform:scale(.96);}
.cart-floating.cart-added{animation:sagc-cart-added .48s ease both !important;}
@keyframes sagc-cart-added{
  0%{transform:scale(1)}
  45%{transform:scale(1.08)}
  100%{transform:scale(1)}
}
.open-variants,
.detail-cart-btn,
#detailAddCartBtn,
#addVariantToCart{
  background:var(--add-cart-color, var(--primary)) !important;
  border-color:var(--add-cart-color, var(--primary)) !important;
}
.open-variants:hover,
.detail-cart-btn:hover,
#detailAddCartBtn:hover,
#addVariantToCart:hover{filter:brightness(.9);}

.product-old-price,
.variant-old-price,
.detail-old-price,
.cart-old-price,
.old-price,
.product-card .product-discount-after-price .old-price-value{
  text-decoration-color:#E60000 !important;
}

.detail-price{white-space:pre-line;}

.sheet-hidden[hidden]{display:none !important;}

.product-card-sold-out{position:relative;}
.product-card-sold-out .product-image-wrap img{opacity:.58;}
.product-sold-out-badge{
  position:absolute;top:9px;left:9px;z-index:8;
  padding:5px 9px;border-radius:999px;background:#B91C1C;color:#fff;
  font-size:10px;font-weight:900;line-height:1;letter-spacing:.3px;
}
.product-card-sold-out button:disabled,
.product-card-sold-out input:disabled,
.detail-action-grid button:disabled{opacity:.55;cursor:not-allowed;}

@media(max-width:700px){
  body.mobile-view-compact .card-wholesale-list.wholesale-compact .wholesale-tiers.wholesale-one{
    grid-template-columns:minmax(0,1fr) !important;
    width:min(100%, 92px) !important;
    margin-inline:auto !important;
  }
  body.mobile-view-compact .card-wholesale-list.wholesale-compact .wholesale-tiers.wholesale-two{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    width:min(100%, 150px) !important;
    margin-inline:auto !important;
  }
  body.mobile-view-compact .card-wholesale-list.wholesale-compact .wholesale-tiers.wholesale-three{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    width:100% !important;
    margin-inline:auto !important;
  }
}

/* =========================================================
   V91 ESTABILIZACIÓN ROBUSTA — JULIO 2026
   Correcciones aisladas: barra de búsqueda/filtros, mayoreo
   en Vista 2, tachado rojo y carga visual estable.
========================================================= */

/* El buscador siempre va primero; luego Importación, Favoritos y Ofertas. */
.search-tools{
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  display:grid !important;
  grid-template-columns:minmax(220px, 1fr) max-content 44px 44px !important;
  align-items:center !important;
  gap:8px !important;
}
.search-tools .search-box{
  grid-column:1 !important;
  min-width:0 !important;
  width:100% !important;
  max-width:none !important;
}
#filterBestSellersBtn{grid-column:2 !important;order:initial !important;}
#filterFavoritesBtn{grid-column:3 !important;order:initial !important;}
#filterOffersBtn{grid-column:4 !important;order:initial !important;}

/* Importación conserva texto completo y jamás invade otros botones. */
.search-tools .quick-filter-btn.quick-filter-importacion{
  width:auto !important;
  min-width:112px !important;
  max-width:170px !important;
  overflow:hidden !important;
  flex:none !important;
}
.search-tools .quick-filter-importacion-text{
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

/* En modo desplegable, la categoría queda debajo sin alterar el orden pedido. */
.catalog-toolbar[data-category-mode="desplegable"]{
  display:grid !important;
  grid-template-columns:250px minmax(0,1fr) !important;
  align-items:center !important;
  gap:8px !important;
}
.catalog-toolbar[data-category-mode="desplegable"] .categories-select-wrap{
  grid-column:1 !important;
  width:250px !important;
  margin:0 !important;
}
.catalog-toolbar[data-category-mode="desplegable"] .search-tools{
  grid-column:2 !important;
  display:grid !important;
}

.catalog-toolbar[data-category-mode="desplegable"] .categories-bar{
  display:none !important;
}

/* Vista 2 móvil: uno, dos o tres rangos de mayoreo siempre centrados. */
@media(max-width:700px){
  body.mobile-view-compact .card-wholesale-list.wholesale-compact{
    width:100% !important;
    max-width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
    box-sizing:border-box !important;
  }
  body.mobile-view-compact .card-wholesale-list.wholesale-compact .wholesale-tiers{
    margin-inline:auto !important;
    justify-content:center !important;
    justify-items:stretch !important;
  }
  body.mobile-view-compact .card-wholesale-list.wholesale-compact .wholesale-tiers.wholesale-one{
    width:min(100%, 92px) !important;
    grid-template-columns:minmax(0, 92px) !important;
  }
  body.mobile-view-compact .card-wholesale-list.wholesale-compact .wholesale-tiers.wholesale-two{
    width:min(100%, 154px) !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
  body.mobile-view-compact .card-wholesale-list.wholesale-compact .wholesale-tiers.wholesale-three{
    width:100% !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Tablet y celular: buscador arriba y filtros centrados debajo, sin montarse. */
@media(max-width:768px){
  .search-tools{
    grid-template-columns:minmax(0,1fr) auto 40px 40px !important;
    grid-template-rows:40px !important;
    gap:7px !important;
  }
  .search-tools .search-box{grid-column:1 !important;grid-row:1 !important;}
  #filterBestSellersBtn{grid-column:2 !important;grid-row:1 !important;justify-self:end !important;}
  #filterFavoritesBtn{grid-column:3 !important;grid-row:1 !important;}
  #filterOffersBtn{grid-column:4 !important;grid-row:1 !important;}
  .search-tools .quick-filter-btn.quick-filter-importacion{min-width:104px !important;max-width:min(52vw,150px) !important;}
  .catalog-toolbar[data-category-mode="desplegable"]{display:block !important;}
  .catalog-toolbar[data-category-mode="desplegable"] .categories-select-wrap{display:block;width:min(72vw,250px)!important;margin:7px auto 0!important;}
}

/* Pantallas muy estrechas: la fila inferior sigue centrada y sin superposición. */
@media(max-width:380px){
  .search-tools{
    grid-template-columns:minmax(0,1fr) 38px 38px !important;
  }
  #filterBestSellersBtn{
    grid-column:1 !important;
    max-width:100% !important;
  }
  #filterFavoritesBtn{grid-column:2 !important;}
  #filterOffersBtn{grid-column:3 !important;}
}

/* El precio anterior siempre se identifica con una línea roja real. */
.product-old-price,
.variant-old-price,
.detail-old-price,
.cart-old-price,
.old-price,
.old-price-value,
.product-card .product-discount-after-price .old-price-value{
  text-decoration-line:line-through !important;
  text-decoration-color:#E60000 !important;
  text-decoration-thickness:2px !important;
}

/* Evita que contenidos configurables aparezcan antes de conocer CONFIG. */
.quick-filter-btn.sheet-hidden,
.quick-filter-btn[hidden],
body.app-loading #empresaPreviewNombre,
body.app-loading #footerStoreName{
  display:none !important;
}


/* =========================================================
   V92 — PLANTILLA PROFESIONAL: BOTÓN ESPECIAL + ANUNCIO
   Cambios aislados; conserva modos BOTONES/DESPLEGABLE/AUTO.
========================================================= */
.quick-filter-btn{
  color:var(--primary)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:2px!important;
  line-height:1!important;
}
.quick-filter-icon{display:grid;place-items:center;width:20px;height:20px;flex:0 0 20px;}
.quick-filter-icon svg,.quick-filter-importacion-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block;}
.quick-filter-label{display:block;max-width:100%;font-size:10px;font-weight:800;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;}
.search-tools .quick-filter-btn.quick-filter-importacion{
  min-width:94px!important;max-width:122px!important;height:46px!important;padding:3px 8px!important;border-radius:13px!important;gap:1px!important;
}
.quick-filter-btn:not(.quick-filter-importacion){width:54px!important;min-width:54px!important;height:46px!important;border-radius:13px!important;padding:3px!important;}
.quick-filter-importacion-text{font-size:9.5px!important;}
.quick-filter-btn.active .quick-filter-icon svg{fill:currentColor;}
.importacion-banner-icon svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block;}

/* PC desplegable: desplegable primero y el resto en una sola fila. */
@media(min-width:769px){
  .catalog-toolbar[data-category-mode="desplegable"]{grid-template-columns:250px minmax(0,1fr)!important;}
  .catalog-toolbar[data-category-mode="desplegable"] .categories-select-wrap{grid-column:1!important;grid-row:1!important;}
  .catalog-toolbar[data-category-mode="desplegable"] .search-tools{grid-column:2!important;grid-row:1!important;}
}

/* Celular: buscador y accesos arriba; categorías/desplegable continúan debajo. */
@media(max-width:768px){
  .search-tools{grid-template-columns:minmax(92px,1fr) minmax(78px,94px) 48px 48px!important;grid-template-rows:46px!important;gap:4px!important;}
  .search-tools .search-box{height:42px!important;min-height:42px!important;}
  .search-tools .quick-filter-btn.quick-filter-importacion{min-width:0!important;width:100%!important;max-width:94px!important;height:44px!important;padding:2px 4px!important;justify-self:end!important;}
  .quick-filter-btn:not(.quick-filter-importacion){width:48px!important;min-width:48px!important;height:44px!important;}
  .quick-filter-icon,.quick-filter-importacion-icon{width:18px;height:18px;flex-basis:18px;}
  .quick-filter-icon svg,.quick-filter-importacion-icon svg{width:18px;height:18px;}
  .quick-filter-label,.quick-filter-importacion-text{font-size:8.5px!important;letter-spacing:-.15px!important;}
  .catalog-toolbar[data-category-mode="desplegable"] .categories-select-wrap{margin:7px auto 0!important;}
}
@media(max-width:380px){
  .search-tools{grid-template-columns:minmax(78px,1fr) minmax(68px,82px) 43px 43px!important;grid-template-rows:44px!important;gap:3px!important;}
  #filterBestSellersBtn{grid-column:2!important;grid-row:1!important;}
  #filterFavoritesBtn{grid-column:3!important;grid-row:1!important;}
  #filterOffersBtn{grid-column:4!important;grid-row:1!important;}
  .quick-filter-btn:not(.quick-filter-importacion){width:43px!important;min-width:43px!important;height:42px!important;}
  .search-tools .quick-filter-btn.quick-filter-importacion{height:42px!important;}
  .quick-filter-label,.quick-filter-importacion-text{font-size:7.6px!important;}
}

/* Anuncio: tamaño y estilo configurables sin trabajo extra por cliente. */
.announcement-bar[data-size="muy-pequeno"],.announcement-bar[data-size="muy-pequeno"] .announcement-track{min-height:22px;}
.announcement-bar[data-size="muy-pequeno"] .announcement-track{font-size:10px;line-height:1.15;padding-block:2px;}
.announcement-bar[data-size="muy-pequeno"] .announcement-item::before{font-size:9px;}
.announcement-bar[data-size="pequeno"],.announcement-bar[data-size="pequeno"] .announcement-track{min-height:27px;}
.announcement-bar[data-size="pequeno"] .announcement-track{font-size:12px;padding-block:3px;}
.announcement-bar[data-size="mediano"],.announcement-bar[data-size="mediano"] .announcement-track{min-height:36px;}
.announcement-bar[data-size="mediano"] .announcement-track{font-size:14px;padding-block:6px;}
.announcement-bar[data-size="grande"],.announcement-bar[data-size="grande"] .announcement-track{min-height:46px;}
.announcement-bar[data-size="grande"] .announcement-track{font-size:17px;padding-block:8px;}
.announcement-bar[data-style="premium"]{background:linear-gradient(105deg,var(--primary),color-mix(in srgb,var(--primary) 70%,#111));color:#fff;border-bottom-color:rgba(255,255,255,.25);box-shadow:inset 0 1px rgba(255,255,255,.16),0 3px 10px rgba(15,23,42,.12);}
.announcement-bar[data-style="premium"] .announcement-item{text-shadow:0 1px 2px rgba(0,0,0,.26);}
.announcement-bar[data-style="premium"] .announcement-item::before{color:#fff;}
.announcement-bar[data-moving="false"] .announcement-viewport{display:flex;justify-content:center;}
.announcement-bar[data-moving="false"] .announcement-track{display:flex;width:auto;max-width:100%;justify-content:center;transform:none!important;animation:none!important;white-space:normal;text-align:center;flex-wrap:wrap;gap:12px 28px;}

/* Modal sin precio: dos líneas reales y espacio seguro frente al mayoreo. */
.detail-price.is-no-price{white-space:pre-line!important;line-height:1.02!important;text-align:center!important;display:inline-block!important;min-width:88px!important;font-size:clamp(15px,2vw,20px)!important;}
.detail-price-block:has(.detail-price.is-no-price){display:flex;align-items:center;justify-content:center;min-height:52px;}
@media(max-width:430px){
  .detail-price-wholesale-row{grid-template-columns:minmax(88px,.64fr) minmax(0,1.36fr)!important;}
  .detail-price.is-no-price{font-size:14px!important;min-width:82px!important;}
}


/* =========================================================
   V93 — AJUSTES VISUALES RESPONSIVOS Y NEUTROS
   Cambios aislados para plantilla multiempresa:
   anuncio sutil, controles sin superposición y corazones proporcionados.
========================================================= */

/* PREMIUM conserva el color suave anterior; solo añade acabado discreto. */
.announcement-bar[data-style="premium"]{
  background:linear-gradient(
    180deg,
    color-mix(in srgb,var(--primary-soft) 96%,#fff),
    color-mix(in srgb,var(--primary-soft) 90%,var(--primary) 10%)
  )!important;
  color:var(--text-main)!important;
  border-bottom-color:color-mix(in srgb,var(--primary) 18%,transparent)!important;
  box-shadow:0 2px 7px rgba(15,23,42,.055)!important;
}
.announcement-bar[data-style="premium"] .announcement-item{
  text-shadow:none!important;
}
.announcement-bar[data-style="premium"] .announcement-item::before{
  color:var(--primary)!important;
}

/* Estado seleccionado profesional: suave, legible y sin bloque morado. */
.quick-filter-btn.active{
  background:color-mix(in srgb,var(--primary) 8%,#fff)!important;
  color:var(--primary)!important;
  border-color:color-mix(in srgb,var(--primary) 42%,transparent)!important;
  box-shadow:0 3px 9px rgba(15,23,42,.08)!important;
  transform:none!important;
}
.quick-filter-btn.active .quick-filter-icon svg{
  fill:color-mix(in srgb,var(--primary) 20%,transparent)!important;
  stroke:currentColor!important;
}

/* PC: separación empresarial estable entre los tres accesos. */
@media(min-width:769px){
  .search-tools{
    grid-template-columns:minmax(220px,1fr) 86px 58px 58px!important;
    column-gap:10px!important;
  }
  .search-tools .quick-filter-btn.quick-filter-importacion{
    width:86px!important;
    min-width:86px!important;
    max-width:86px!important;
    padding-inline:4px!important;
  }
  .quick-filter-btn:not(.quick-filter-importacion){
    width:58px!important;
    min-width:58px!important;
    max-width:58px!important;
  }
  #filterFavoritesBtn,#filterOffersBtn{justify-self:center!important;}
}

/* Celular: recupera ancho para mostrar completo “Buscar producto…”. */
@media(max-width:768px){
  .search-tools{
    grid-template-columns:minmax(112px,1fr) 76px 44px 44px!important;
    gap:3px!important;
  }
  .search-tools .quick-filter-btn.quick-filter-importacion{
    width:76px!important;
    min-width:76px!important;
    max-width:76px!important;
    padding-inline:2px!important;
  }
  .quick-filter-btn:not(.quick-filter-importacion){
    width:44px!important;
    min-width:44px!important;
    max-width:44px!important;
  }
  .quick-filter-importacion-text{font-size:8px!important;letter-spacing:-.2px!important;}
  .quick-filter-label{font-size:8px!important;letter-spacing:-.18px!important;}
}
@media(max-width:380px){
  .search-tools{
    grid-template-columns:minmax(104px,1fr) 68px 40px 40px!important;
    gap:2px!important;
  }
  .search-tools .quick-filter-btn.quick-filter-importacion{
    width:68px!important;
    min-width:68px!important;
    max-width:68px!important;
  }
  .quick-filter-btn:not(.quick-filter-importacion){
    width:40px!important;
    min-width:40px!important;
    max-width:40px!important;
  }
  .quick-filter-importacion-text,.quick-filter-label{font-size:7.2px!important;}
}

/* Corazón de tarjeta proporcional en una y dos vistas móviles. */
@media(max-width:768px){
  body.mobile-view-large .product-card .favorite-btn{
    width:30px!important;height:30px!important;
    min-width:30px!important;min-height:30px!important;
    max-width:30px!important;max-height:30px!important;
    flex-basis:30px!important;
    top:8px!important;right:8px!important;
    font-size:18px!important;
  }
  body.mobile-view-compact .product-card .favorite-btn{
    width:24px!important;height:24px!important;
    min-width:24px!important;min-height:24px!important;
    max-width:24px!important;max-height:24px!important;
    flex-basis:24px!important;
    top:6px!important;right:6px!important;
    font-size:15px!important;
    box-shadow:0 2px 6px rgba(15,23,42,.13)!important;
  }
  .product-card .favorite-btn.active{
    background:#fff!important;
    color:var(--primary)!important;
    border:1px solid color-mix(in srgb,var(--primary) 45%,transparent)!important;
  }
}


/* =========================================================
   V101 - Notificaciones claras y no invasivas
========================================================= */
.sagc-notification-button{
  position:fixed; left:14px; bottom:14px; z-index:9998;
  border:1px solid rgba(15,23,42,.12); border-radius:999px;
  padding:10px 14px; display:inline-flex; align-items:center; gap:7px;
  font:600 13px/1.2 Arial,sans-serif; cursor:pointer;
  box-shadow:0 7px 24px rgba(15,23,42,.20); background:#fff; color:#1f2937;
}
.sagc-notification-button svg{width:18px;height:18px;flex:0 0 18px;}
.sagc-notification-button:disabled{cursor:default;opacity:.72;}
body.modal-open .sagc-notification-button,
body.cart-open .sagc-notification-button{display:none !important;}
#sagcNotificationGuide{
  position:fixed; left:14px; bottom:70px; z-index:10020;
  width:min(360px,calc(100vw - 28px)); padding:12px 14px;
  border-radius:12px; background:#111827; color:#fff;
  font:500 13px/1.45 Arial,sans-serif; box-shadow:0 10px 30px rgba(15,23,42,.28);
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
#sagcNotificationGuide.show{opacity:1;transform:translateY(0);}
@media(max-width:700px){
  .sagc-notification-button{left:10px;bottom:10px;padding:9px 12px;font-size:12px;}
  #sagcNotificationGuide{left:10px;bottom:62px;width:calc(100vw - 20px);}
}

/* =========================================================
   CORRECCIÓN MINIATURAS DE VARIANTES
   - La miniatura activa conserva fondo blanco y solo marca el borde.
   - En móvil, si existen miniaturas de variantes, se oculta la galería
     secundaria bajo la imagen principal.
========================================================= */
.detail-variant-image-btn.active{
  background:#fff !important;
  color:inherit !important;
  border-color:var(--primary) !important;
  box-shadow:none !important;
}

@media (max-width:760px){
  .product-detail-section.has-variant-images .detail-thumbs,
  .detail-section.has-variant-images .detail-thumbs,
  .has-variant-images .detail-thumbs{
    display:none !important;
  }
}