/** Shopify CDN: Minification failed

Line 438:13 Expected identifier but found "{"
Line 438:14 Unexpected "{"
Line 438:24 Expected ":"
Line 450:13 Expected identifier but found "{"
Line 450:14 Unexpected "{"
Line 450:24 Expected ":"

**/
.ctm-headbtn.gap {
    gap: 14px;
}
.header__buttons:has(.ctm-headbtn) {
    gap: 1.4rem;
}
.extra--button {
    border: 1px solid #0056b3;
    border-radius: 100px;
    padding: 8px 10px;
    font-size: 14px;
    color: #0056b3;
    font-weight: 700;
}
.header__search.flex {
    padding-right: 0;
}
.account-menu.dropdown__nav{
    position: absolute;
    background: #fff;
    padding: 20px;
    border: 1px solid #eee;
    border-top: 0px;
    visibility:hidden;
    opacity: 0;
    transition: var(--animation-nav);
}
span.account-menu-list .block {
    padding: 2px 0px;
}
.login.btn.button_refill_list {
    background-color: #3682f8 !important;
    border-color: #3682f8 !important;
    color: #fff;
    letter-spacing: normal;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
    text-transform: none;
    padding: 4px 15px;
    height: auto;
}
.login.btn.button_refill_list:hover,
.login.btn.button_refill_list:focus-visible {
    background-color: #1f5fd8 !important;
    border-color: #1f5fd8 !important;
    color: #fff;
}
.login.btn.button_refill_list:focus-visible {
    outline: 2px solid #3682f8;
    outline-offset: 2px;
}

/* ============================================================================
   Indicador de cuenta del header (.header-account): invitado/autenticado
   siempre visible con texto, en los 4 rangos. La rama invitado/autenticado
   se resuelve 100% en Liquid (routes.account_url / routes.account_login_url);
   aqui solo se decide que ETIQUETA se muestra (corta o completa) segun ancho.
   ============================================================================ */
.header-account__label--short { display: block; }
.header-account__label--full { display: none; }

/* .header-cart__label ("Carrito") solo se muestra en móvil/tablet (reglas mas abajo).
   Por defecto (laptop/escritorio) usa el mismo patrón que .visually-hidden (theme.css):
   oculto EN PANTALLA pero disponible para lectores de pantalla, igual que antes
   (el span ya era el único nombre accesible del botón; display:none lo habría
   quitado también del árbol de accesibilidad en ese rango). */
.header-cart__label {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (min-width: 1366px) {
  .header-account__label--short { display: none; }
  .header-account__label--full { display: block; }
}

/* Laptop 1024-1365.98px: pildora horizontal compacta, mismo fondo/texto azul
   y blanco que escritorio, solo mas angosta (etiqueta corta, menos padding). */
@media (min-width: 1024px) and (max-width: 1365.98px) {
  .login.btn.button_refill_list.header-account {
    height: 42px;
    padding: 0 10px;
    flex: 0 0 auto;
  }
  .header-account .header-account__label {
    font-size: 12.5px;
    white-space: nowrap;
  }
  .header-account__icon svg { width: 20px; height: 20px; }
}

/* Tablet 768-1023.98px: icono en circulo azul arriba, etiqueta debajo (fuera
   del circulo, color de texto normal). Todo el bloque sigue siendo un solo <a>.
   white-space: nowrap en label previene que "Iniciar sesión" se divida en dos líneas. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  /* Alinear "Iniciar sesión" + "Carrito" hacia la derecha como grupo. */
  .header__top {
    padding-right: 15px;
  }
  /* El contenedor de "FACTURA AQUÍ" (.ctm-headbtn) comparte el mismo padre
     flex (.header__buttons) que cuenta y carrito, y sigue visible en tablet.
     Reducimos el gap real del padre para acercar cuenta+carrito, pero
     compensamos con margin-left (positivo, no negativo) en .login-menu--dropdown
     para que la separación FACTURA→cuenta no cambie (14px original: 5px de
     gap + 9px de margin-left = 14px sin alterar). Solo el hueco cuenta→carrito
     baja a 5px, que es lo único que se pidió acercar. */
  .header__top .header__icons--right .header__buttons {
    gap: 5px;
    column-gap: 5px;
    justify-content: flex-end;
  }
  .header__buttons .login-menu--dropdown {
    margin-left: 9px;
  }
  .login.btn.button_refill_list.header-account {
    background: none !important;
    border-color: transparent !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: auto;
    min-width: 76px;
    height: auto;
    min-height: 44px;
    padding: 0;
    overflow: visible;
    flex: 0 0 auto;
  }
  .header-account__icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 50%;
    background: #3682f8;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
  }
  .header-account__icon svg { width: 18px; height: 18px; }
  .header-account .header-account__label {
    font-size: 11.5px;
    line-height: 1.05;
    text-align: center;
    color: rgb(var(--color-foreground));
    white-space: nowrap;
    overflow: visible;
    width: max-content;
    max-width: none;
  }

  /* Carrito con el mismo patrón que "Iniciar sesión" en tablet: mismo min-width,
     gap, padding y tamaño de círculo (42px) — ver valores de .header-account arriba. */
  .header__icons .cart-drawer-button {
    flex-direction: column;
    gap: 2px;
    width: auto;
    min-width: 76px;
    height: auto;
    min-height: 44px;
    padding: 0;
    background-color: transparent;
    border-radius: 0;
  }
  .header__icons .cart-drawer-button .header-cart__icon {
    position: relative;
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 50%;
    background-color: #3682f8;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
  }
  .header__icons .cart-drawer-button .header-cart__icon svg { width: 18px; height: 18px; }
  .header__icons .cart-drawer-button .cart-count { top: -4px; right: -4px; }
  .header__icons .cart-drawer-button .header-cart__label {
    position: static;
    overflow: visible;
    width: max-content;
    height: auto;
    margin: 0;
    clip: auto;
    display: block;
    font-size: 11.5px;
    line-height: 1.05;
    text-align: center;
    color: rgb(var(--color-foreground));
    white-space: nowrap;
    max-width: none;
  }
}

/* Movil hasta 767.98px: mismo patron vertical, mas compacto; area tactil
   minima 44x44 vía padding (el circulo visible puede ser mas chico).
   white-space: nowrap en label previene que "Iniciar sesión" se divida en dos líneas. */
@media (max-width: 767.98px) {
  /* Alinear "Iniciar sesión" + "Carrito" hacia la derecha como grupo. */
  .header__top {
    padding-right: 12px;
  }
  /* "FACTURA AQUÍ" (.ctm-headbtn) esta oculto en movil (display:none real),
     asi que reducir el gap del padre .header__buttons aqui solo acerca
     cuenta+carrito -- no hay otro elemento visible al que afecte. */
  .header__top .header__icons--right .header__buttons {
    gap: 3px;
    column-gap: 3px;
    justify-content: flex-end;
  }
  .login.btn.button_refill_list.header-account {
    background: none !important;
    border-color: transparent !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    width: auto;
    min-width: 72px;
    height: auto;
    min-height: 44px;
    padding: 0;
    overflow: visible;
    flex: 0 0 auto;
  }
  .header-account__icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    background: #3682f8;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
  }
  .header-account__icon svg { width: 17px; height: 17px; }
  .header-account .header-account__label {
    font-size: 10.5px;
    line-height: 1.05;
    text-align: center;
    color: rgb(var(--color-foreground));
    white-space: nowrap;
    overflow: visible;
    width: max-content;
    max-width: none;
  }
}
.wishlistNavappend {
    position: relative;
    background: #3682f8;
    border-radius: 50px;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
    z-index: 6;
    order: -1;
    display: flex;
    align-items: center;
    padding: 0px 12px;
}
.wishlistNavappend:hover,
.wishlistNavappend:focus-within {
    background: #1f5fd8;
}
ul.site-nav__dropdown.text-left.nav-wishlist-list__data {
    min-width: 160px;
    width: 100%;
}
.site-nav__dropdown {
    position: absolute;
    left: 0;
    top: 32px;
    margin: 0;
    z-index: 99;
    display: block;
    visibility: hidden;
    background-color: #fff;
    min-width: 100%;
    padding: 10px 0 5px;
    box-shadow: 0 10px 20px #00000017;
    transform: translate3d(0,-12px,0);
}
.site-nav--has-dropdown:hover .site-nav__dropdown {
    display: block;
    visibility: visible;
    transform: translateZ(0);
    transition: all .3s cubic-bezier(.2, .06, .05, .95);
}
.header-wishlist-king .menu-list__item {
    display: block;
    top: 15px;
}
.nav-wishlist-list__data .menu-list__item{
    max-width: 100%;
}
li.site-nav__dropdown-link.tmenu_item_content_alignment_left {
    padding: 1px 10px;
    text-transform: capitalize;
}
.header-wishlist-king .menu-list__item .list-heading, .header-wishlist-king .menu-list__item .custom_list_scroll {
    display: none;
}
.header-wishlist-king .menu-list__item .list-heading.top-border.inner_list_create {
    display: block;
    background: #fff;
}
.wishlistNavappend.tmenu_item--root a.site-nav__link.tmenu_item_link {
    color: #fff;
    text-transform: none!important;
}
.wishlistNavappend.tmenu_item--root a.site-nav__link.tmenu_item_link:focus-visible {
    outline: 2px solid #3682f8;
    outline-offset: 2px;
}
wishlist-king.site-nav__dropdown {
    position: sticky;
    bottom: -8px;
}
.menu-drawer__menus ul.flex-grow {
    display: flex;
    flex-direction: column;
}
.wishlistMobileAppend .mobile-nav__has-sublist {
    display: flex;
    gap: 10px;
    align-items: center;
}
/* ====== "Mis listas de resurtidos" en el drawer ======
   >=768px: se conserva el aspecto anterior (drawer de tablet/escritorio SIN cambios).
   <=767.98px: botón móvil grande MAHA (icono + texto + chevron, 48px táctiles).
   El !important en margin es heredado del código original: neutraliza los márgenes
   de li del menú del tema que llegan con mayor especificidad. */
@media (min-width: 768px) {
  li.mobile-nav__item.wishlistMobileAppend.tmenu_item_mobile {
      order: -1;
      margin: 0 15px!important;
  }
  li.mobile-nav__item.wishlistMobileAppend.tmenu_item_mobile .mobile-nav__has-sublist a {
      background: #3682f8;
      border-radius: 999px;
      transition: background-color 150ms ease;
  }
  li.mobile-nav__item.wishlistMobileAppend.tmenu_item_mobile .mobile-nav__has-sublist a:hover,
  li.mobile-nav__item.wishlistMobileAppend.tmenu_item_mobile .mobile-nav__has-sublist a:focus-visible {
      background: #1f5fd8;
  }
}
@media (max-width: 767.98px) {
  li.mobile-nav__item.wishlistMobileAppend.tmenu_item_mobile {
    order: -1;
    /* 12px bajo Facturar/Rastrear · 18px antes de "Platos" · 16px laterales (los del contenido del drawer) */
    margin: 12px 16px 18px !important;
  }
}

/* ============================================================================
   MAHA — Top bar (.topbar: WhatsApp / Encontrar tienda / Información /
   frase central / selector país-moneda / redes sociales) al azul de
   "Agregar al carrito". Todo el texto/iconos pasan a blanco por herencia de
   color (los svg de redes usan fill="currentColor"; los enlaces no traen
   color propio). El desplegable de país/moneda (.disclosure-list) ya tiene
   fondo claro propio: se refuerza el color de texto oscuro explícitamente
   para que no herede el blanco de la barra.
   ============================================================================ */
.topbar {
  background-color: #3682f8;
  color: #ffffff;
}
.topbar a,
.topbar button,
.topbar .disclosure__toggle {
  color: #ffffff;
  transition: color 150ms ease, opacity 150ms ease;
}
.topbar a:hover,
.topbar .disclosure__toggle:hover {
  color: #ffffff;
  opacity: 0.82;
}
.topbar a:focus-visible,
.topbar button:focus-visible,
.topbar .disclosure__toggle:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}
/* Desplegable de país/moneda: fondo claro + texto oscuro legible (no hereda el blanco de la barra) */
.topbar .disclosure-list {
  color: rgb(var(--color-foreground));
}
.topbar .disclosure-list a,
.topbar .disclosure-list__option {
  color: rgb(var(--color-foreground));
}
@media (prefers-reduced-motion: reduce) {
  .topbar a,
  .topbar button,
  .topbar .disclosure__toggle {
    transition: none;
  }
}

.mobile-nav__has-sublist,.mobile-nav__link--button{
  display:flex
}
.mobile-nav__has-sublist>*,.mobile-nav__link--button>*{
    flex:1 1 auto;
    word-break:break-word;
}
.mobile-nav__link--button{
  width:100%;
  text-align:left;
  padding:0;
}

table{
  width:100%;
  border-spacing:1px;
  position:relative;
  border:0 none;
  background:{{ settings.color_borders | default: "#1c1d1d" }};
  background:var(--colorBorder);
}
.table-wrapper{
  max-width:100%;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
td,th{
  border:0 none;
  text-align:left;
  padding:10px 15px;
  background:{{ settings.color_body_bg | default: "#fff" }};
  background:var(--colorBody)
}

/* Overall container styling */
.ShippingEstimator {
    font-family: 'Inter', sans-serif; /* Using Inter font as per guidelines */
    max-width: 800px; /* Limit width for better appearance */
    margin: 20px auto; /* Center the widget */
    padding: 20px;
    border: 2px solid #28a745; /* Green border from the image */
    border-radius: 15px; /* Rounded corners for the main container */
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}
/* Inner form container */
#cs_shipping_rate .form {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Spacing between elements */
}
/* Hidden input fields - ensure they don't affect layout */
.ShippingEstimator input[type="hidden"] {
    display: none;
}
/* Form row for select, input, and button */
.ShippingEstimator__Form {
    display: flex;
    align-items: center;
    gap: 10px; /* Space between form elements */
    padding-bottom: 0 !important; /* Override inline style */
}

/* Country select dropdown */
.ShippingEstimator__Form .cntry {
    flex: 1;
    padding: 0px 15px;
    height: var(--buttons-height);
    border: 1px solid #ccc;
    border-radius: 10px;
    background-color: #e6ffe6;
    color: #333;
    font-size: 15px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20fill%3D%22%234CAF50%22%20d%3D%22M216%2096L128%20184%2040%2096h176z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    cursor: pointer;
    font-weight: bold;
    text-align: center;
}

/* Zip code input field */
.ShippingEstimator__Form #input_postcode {
    flex: 1; /* Allow input to grow more */
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-radius: 8px; /* Rounded corners */
    font-size: 16px;
    color: #333;
    background-color: #f9f9f9; /* Slightly off-white background */
    width: 100%;
}

.ShippingEstimator__Form #input_postcode::placeholder {
    color: #888; /* Placeholder color */
}

/* Check button */
.ShippingEstimator__Form #search_postcode {
    flex: 1; /* Allow button to grow */
    padding: 10px 15px;
    border: none;
    border-radius: 8px; /* Rounded corners */
    background-color: #28a745; /* Green background */
    color: #ffffff; /* White text */
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
    white-space: break-spaces;
}

.ShippingEstimator__Form #search_postcode:hover {
    background-color: #218838; /* Darker green on hover */
}

/* Error message styling */
.ShippingEstimator__Error {
    background-color: #ffe6e6; /* Light red background */
    color: #cc0000; /* Dark red text */
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #cc0000;
    font-size: 14px;
    text-align: center;
    margin-top: 10px;
}

/* Shipping rates display */
#shipping_rates {
    background-color: #f0f0f0; /* Light grey background */
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #ddd;
    margin-top: 15px;
}

#shipping_rates ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#shipping_rates li {
    margin-bottom: 10px;
    line-height: 1.4;
}

#shipping_rates li span {
    display: block; /* Ensure spans take full width */
    color: #333;
    font-size: 15px;
}

.shipprice {
    font-weight: bold;
    color: #28a745; /* Green for price */
    float: right; /* Align price to the right */
}

.shipdesc {
    font-size: 13px;
    color: #666;
    margin-top: 5px;
}

/* Styling for the initial text "Revisa el tiempo de entrega..." */
.ShippingEstimator > div:first-child:before {
    content: "Revisa el tiempo de entrega (y cotiza el costo en tu carrito)";
    display: block;
    text-align: center;
    font-weight: bold;
    color: #28a745; /* Green color */
    margin-bottom: 15px;
    font-size: 1.1em;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .ShippingEstimator__Form {
        flex-direction: column; /* Stack elements vertically on small screens */
        align-items: stretch; /* Stretch elements to full width */
    }

    .ShippingEstimator__Form .cntry,
    .ShippingEstimator__Form #input_postcode,
    .ShippingEstimator__Form #search_postcode {
        flex: none; /* Remove flex growth */
        width: 100%; /* Full width */
    }
}

/* Error message styling */
.ShippingEstimator__Error {
    background-color: #ffe6e6; /* Light red background */
    color: #cc0000; /* Dark red text */
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #cc0000;
    font-size: 14px;
    text-align: center;
    margin-top: 10px;
    /*
     * REMOVED: display: block !important;
     * This was added previously to force content visible for demonstration.
     * Removing it allows the inline style="display: none" from your HTML
     * or any JavaScript logic to control its visibility.
     */
}

/* Shipping rates display */
#shipping_rates {
    background-color: #f0f0f0; /* Light grey background */
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #ddd;
    margin-top: 15px;
    display: none; /* ADDED: This will hide the box by default */
}
#shipping_rates li span.shipdesc {
    color: #555;
    font-size: 16px 
}

/* input#input_postcode {
    max-width: 200px !important;
} */

.ShippingEstimator__Form .cntry, .ShippingEstimator__Form #input_postcode, .ShippingEstimator__Form #search_postcode {
    align-self: center !important; 
}

.ShippingEstimator__Form .cntry {
    color: rgb(40, 167, 69)!important;
}

.pdfContainer {
  margin-top: 15px !important;
}
button.create-modal-popup.btn {
  background: #0056b3;
  transition: color .5s ease, background .5s ease, border-color .5s ease;
}
button.create-modal-popup.btn:after {
  display: none;
}
button.create-modal-popup.btn:has(.is-loading) .create_button {
    visibility: hidden;
}
button.create-modal-popup.btn .wishlist-loader.is-loading {
    display: block;
    position: absolute;
    left: 42%;
}
.product-card__wrapper.h-full {
    justify-content: space-between;
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 10px;
}
.product-card.product-card-style-standard {
    height: 100%;
}
.f-price__regular {
    color: #c20000;
}
.ht-slider-arrow .ht-slide-btn {
    padding: 0px;
}

/* product card  */
.pcard_netTeam {
    color: #29c74f;
}
.copy-text {
    position: relative;
    padding: 0px;
    background: #fff;
    border: 0px;
    display: flex;
}
.copy-text .text {
    color: #0056b3;
}
p.inventory-text {
    margin: 0px;
    color: #2ac54c;
}
.copy-text button {
	padding: 0px 10px;
	color: #fff;
	font-size: 18px;
	border: none;
	outline: none;
	border-radius: 10px;
	cursor: pointer;
    height: auto;
}
.copy-text button:active {
	background: #809ce2;
}
.copy-text button::before {
	content: "Copiado";
	position: absolute;
	top: -45px;
	right: 0px;
	background: #5c81dc;
	padding:5px 10px;
	border-radius: 20px;
	font-size: 14px;
	display: none;
}
.copy-text.active button::before,
.copy-text.active button::after {
	display: block;
}
.cardBottom-button {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.cardBottom-button quantity-input.quantity {
    width: 100%;
}
.cardBottom-qty,
.product-variant-sales-format {
    width: 50%;
    max-width: 50%;
}
.productCardButtons .product-card__main-actions {
    position: relative;
    top: unset;
    bottom: unset;
    left: unset;
    right: unset;
    width: 100%;
}
.priceIncl{
    font-size: 12px;
    opacity: 0.7;
}

.sales-format-text {
    border: 1px solid #e5e5e5;
    font-size: 16px;
    text-align: center;
    border-radius: 30px;
    min-height: var(--buttons-height);
    align-items: center;
    display: flex;
    justify-content: center;
}
.product__block.product__block--title.section--title {
    margin-top: 0;
}
#simpAskQuestion .button, #simpAskQuestion a.btn, #simpAskQuestion input.btn {
    line-height: inherit;
}
@media (min-width: 768px) {
    .product-card:not(.product-card--simple) .productCardButtons .product-card__actions .btn{
        opacity: 1;
        transform: translateY(0px);
    }
    #ProductsList[data-layout=list] .product-card__wrapperBx {
        display: flex;
        align-items: center;
        gap: 15px;
    }
    #ProductsList[data-layout=list] .product-card__list-actions {
        display: flex;
        margin-bottom: 10px;
    }
}
/* Header laptop (>=1024px): el buscador debe absorber el espacio libre, no las
   acciones. La regla base del tema da 1fr a "icons", dejando espacio muerto que
   justify-end empuja contra el borde derecho (carrito pegado, huecos irregulares).
   minmax(24rem, 1fr) reserva un piso usable para el buscador; nunca queda a 0. */
@media (min-width: 1024px){
    .header__top--logo-left {
        --header-grid-template: "logo search icons" / auto minmax(24rem, 1fr) auto;
    }
    /* El form debe llenar exactamente lo que el grid le da (nunca más: si mantiene
       un min-width fijo mayor al track disponible, se monta sobre Factura/Rastreo
       cuando la cuenta recupera su texto en >=1280px). Techo de 65rem = ancho
       original del tema en desktop ancho, sin cambios visuales ahi. */
    .header__search .search__form {
        width: 100%;
        min-width: 0;
        max-width: var(--search-form-width, 65rem);
    }
}
@media screen and (max-width:1100px){
    .extra--button {
        padding: 8px 7px;
        font-size: 12px;
    }
}
@media screen and (max-width:660px){
    .extra--button {
        display:none;
    }
    .ht-gpr-arrow-more-btn-wrap {
        gap: 5px;
    }
}

/* New Changes -$- 1205 */
/* #simpAskQuestion a.simpAskQuestionForm-btnOpen {
    border-radius: unset !important;
} */
.quantity__button svg {
    width: 1.2rem;
}
.collection .collection__content .sticky-element form.face-form {
    max-height: 600px;
    overflow: auto;
    scrollbar-width: thin;
    padding-right: 5px;
}
.two-column-section .block_text-inline a[title="#simpAskQuestion"] {
  width: 100%;
  background-color: rgb(var(--color-button));
  color: rgb(var(--color-button-text));
  border: var(--buttons-border-width) solid rgba(var(--color-border), var(--color-border-alpha, 1));
  display: flex;
  position: relative;
  overflow: hidden; /* zaroori hai ::before animation ke liye */
  padding: 0px 3.2rem;
  justify-content: center;
  align-items: center;
  height: var(--buttons-height);
  border-radius: var(--buttons-radius, 0);
  text-decoration: none;
  font-weight: bold;
  text-transform: var(--buttons-transform, var(--buttons-transform-default));
  transition: color 0.3s;
  z-index: 1;
}
.two-column-section .block_text-inline a[title="#simpAskQuestion"]::before {
  position: absolute;
  content: "";
  width: 0px;
  inset-block: -0.1rem;
  inset-inline-start: -0.1rem;
  background-color: rgb(var(--color-button-text)); /* white fill */
  transition: width var(--animation-button, 0.3s ease);
  z-index: -1;
  border-radius: inherit;
}
.two-column-section .block_text-inline a[title="#simpAskQuestion"]:hover::before {
  width: calc(100% + 0.2rem);
}

.two-column-section .block_text-inline a[title="#simpAskQuestion"]:hover {
  color: rgb(var(--color-button));
  border: 1px solid;
}
@media (hover: hover) and (pointer: fine) {
    .two-column-section .block_text-inline a[title="#simpAskQuestion"]:hover {
        color: rgb(var(--color-button));
    }
    .two-column-section .block_text-inline a[title="#simpAskQuestion"]:hover:before{
        width: calc(100% + var(--buttons-border-width, 0px));
    }
}

/* New Css -$- 0306 */
.menu-sidebar__item .menu-sidebar__toggle .menu-sidebar__url {
    width: 100%;
}
.two-column-section .block_text-inline a[title="#simpAskQuestion"] {
    position: relative;
    background-color: #34a853;
    border-radius: 20px;
}
.two-column-section .block_text-inline a[title="#simpAskQuestion"]:after {
    position: absolute;
    content: '\e801';
    font-family: "simpqafonticons";
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center; 
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-left: .2em;
    left: 30%;
}
@media (hover: hover) and (pointer: fine) {
    .two-column-section .block_text-inline a[title="#simpAskQuestion"]:hover {
        color: #34a853 !important;
        border-color: #34a853;
    }
}

/* New Css -$- 0906 */
table.spec-table__table,
table.variant-specs__table,
.compatibility-products__table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    border: 1px solid #d9d9d9;
}
.section-compatibility-products *{
    color: #333 !important;
}
@media (min-width: 990px) {
    .product:not(.product--media-has-0) .product__media-wrapper {
        max-width: 35% !important;
    }
}

/* New Css -$- 1206 */
.section-rich-text--has-specs .section-rich-text__inner .rich-text__text h3,
.section-rich-text--has-specs .section-rich-text__inner .rich-text__text table {
    display: none;
}

/* ============================================================================
   MAHA — Armonización de paleta de la TABLA DE MAYOREO del PDP (HulkApps)
   Solo estilos (la tabla la inyecta la app HulkApps; NO se toca su lógica ni
   los datos: los tramos siguen viniendo del backend de HulkApps).
   Los tramos/precios reales NO se alteran; solo color, borde y tipografía.
   ============================================================================ */
table.hulkapps-table.table,
.hulkapps-table {
  border: 1px solid #E6E6E8 !important;
  border-radius: 14px !important;
  overflow: hidden;
}
.hulkapps-volumes tr,
.hulkapps-table tr {
  border-bottom: 1px solid #E6E6E8 !important;
}
.hulkapps-volumes thead th,
.hulkapps-table thead th {
  background-color: #EAF1FF !important;
  color: #1F5FD8 !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
}
.hulkapps-table th,
.hulkapps-table td {
  border: 0 !important;
  padding: 9px 15px !important;
  background: #fff !important;
  color: #141414 !important;
}
/* Fila / precio destacado del tramo activo */
.hulkapps-table .hulkapps-price,
.hulkapps-price {
  color: #E0322C !important;
  font-weight: 800 !important;
}
.hulkapps-table tr.active,
.hulkapps-table tr.selected,
.hulkapps-volumes tr.active {
  background: #F6F6F7 !important;
}
/* Total calculado por cantidad (span con color inline verde Google) -> verde MAHA */
.product-calculated-total .calculated-total,
.product-calculated-text .calculated-total,
span.calculated-total {
  color: #2E5F52 !important;
  font-weight: 700 !important;
}
.product-calculated-total label {
  color: #4A4A52 !important;
}

/* ============================================================================
   MAHA — MÓVIL: header compacto, carrito proporcionado, hero acotado (2026-07-24)
   Solo <=767.98px; desktop no se toca. Scoped a clases del header/las secciones.
   ============================================================================ */
@media (max-width: 767.98px) {
  /* 1) Selector de categorías del buscador: SOLO la flecha (el select sigue funcionando;
        conserva aria-label y el picker nativo muestra los nombres al abrirse).
        color:transparent necesita !important: theme.css trae
        ".predictive-search-open .search__types .form-select" /
        ".search__form[results] ..." / ".search__form:has(.search__input:focus) ..."
        (4 clases de especificidad, sin !important) que restauran color visible
        al enfocar el input o abrir resultados -- sin !important esas reglas le
        ganaban a esta (2 clases + tipo) y "Categorías" reaparecía comprimiendo
        el campo de búsqueda. */
  .header__search .search__types select {
    width: 44px !important;
    min-width: 44px;
    max-width: 44px;
    color: transparent !important;
    padding-left: 0;
    padding-right: 0;
    background-position: center;
    text-overflow: clip;
  }
  .header__search .search__types select option { color: #141414; }

  /* 2) Carrito con el mismo patrón visual que "Iniciar sesión": icono circular
        arriba + texto "Carrito" debajo, mismo tamaño/gap/padding que header-account
        (ver regla @media max-width:767.98px de .header-account mas arriba). El <a>
        deja de ser el círculo entero; ahora es un contenedor columna transparente
        y .header-cart__icon es el círculo (con el badge anclado a ÉL, no al <a>). */
  .header__icons .cart-drawer-button {
    flex-direction: column;
    gap: 1px;
    width: auto;
    min-width: 72px;
    height: auto;
    min-height: 44px;
    padding: 0;
    background-color: transparent;
    border-radius: 0;
  }
  .header__icons .cart-drawer-button .header-cart__icon {
    position: relative;
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    background-color: #3682f8;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
  }
  .header__icons .cart-drawer-button .header-cart__icon svg { width: 17px; height: 17px; }
  .header__icons .cart-drawer-button .cart-count { top: -4px; right: -4px; }
  .header__icons .cart-drawer-button .header-cart__label {
    position: static;
    overflow: visible;
    width: max-content;
    height: auto;
    margin: 0;
    clip: auto;
    display: block;
    font-size: 10.5px;
    line-height: 1.05;
    text-align: center;
    color: rgb(var(--color-foreground));
    white-space: nowrap;
    max-width: none;
  }

  /* 3) Header más compacto: menos aire vertical entre topbar/logo/buscador/hero */
  .header .header__top.section--padding {
    padding-top: 8px;
    padding-bottom: 10px;
  }
  .header .header__search { padding-top: 8px; }

  /* 4) Slideshow del Home: respiración interna superior. La altura compacta ahora
        la da el modo "Imagen móvil compacta (4:5)" del propio slideshow (sin recortes);
        el cap de 125vw se eliminó porque cortaba texto de los banners 9:16. */
  #shopify-section-template--23226914013396__slideshow_q3U4Jn .section--slideshow {
    padding-top: 8px;
  }

  /* 5) Slide con "Ocultar textos en móvil" (p. ej. BANQUETES: el mensaje ya viene
        integrado en la imagen y el texto Liquid colisionaba con el listón). Solo móvil. */
  .slideshow__content--hide-mobile {
    display: none;
  }
}

/* ============================================================================
   MAHA — Sticky header compacto en escritorio/laptop (2026-07-27; ajustado el
   mismo día para restaurar el toggle horizontal nativo -- ver nota abajo)
   Reutiliza el estado NATIVO de FoxTheme (assets/header.js): con sticky_header
   "always", StickyHeader ya agrega "header-scrolled" a .header-section (y
   "header-pinned" a <body>) apenas scrollY pasa el punto donde arranca el
   header -- listener pasivo + requestAnimationFrame ya existentes, sin tocar
   header.js. Aquí solo se reduce el padding vertical de .header__top mientras
   ese estado esté activo, para dejar una sola fila compacta cuando la
   navegación también está colapsada. Solo >=1024px: móvil/tablet no se tocan
   (siguen su sticky y su header__top.section--padding propios).
   NOTA: el ocultamiento de .header__bottom y la revelación del botón
   hamburguesa YA NO viven aquí -- section.settings.enable_collapse_on_scroll
   (sections/header-group.json) se activó y esas dos cosas las maneja el
   mecanismo NATIVO de collapse-on-scroll (header.js: handleNavigationToggle/
   handleScrolledPastHeader + theme.css: .header__bottom.is-hide,
   .toggle-navigation-button.is-show) -- exactamente lo que el tema original
   ya traía listo para esto; las 2 reglas que había aquí antes lo duplicaban
   con un mecanismo distinto (display:none fijo) que no permitía volver a
   abrir la fila con el botón, así que el botón terminaba abriendo el drawer
   móvil en su lugar. Ver snippets/menu-drawer.liquid / #MenuDrawer: sigue
   intacto, lo sigue usando móvil/tablet sin cambios. */
@media (min-width: 1024px) {
  .header-sticky.header-scrolled .header__top {
    /* !important porque sections/header.liquid define estas mismas variables
       en un {% style %} con selector #shopify-section-{id} .header__top (ID +
       clase, más específico que estas 3 clases) -- sin !important, la versión
       del propio section siempre gana independientemente del orden de carga. */
    --section-padding-top: 4px !important;
    --section-padding-bottom: 4px !important;
  }
  /* La sombra SOLO cuando el menú horizontal está cerrado (2026-07-27): con
     el toggle nativo activo, .header__top y la fila de navegación pueden
     verse a la vez (menú abierto) -- si esta sombra se aplicara siempre
     (como antes), quedaba flotando justo en la costura entre ambas filas,
     partiendo visualmente el header en dos bloques. body.is-hide-nav es la
     misma clase que header.js ya agrega/quita (handleScrolledPastHeader/
     handleNavigationToggle) para saber si la navegación está oculta -- se
     reutiliza esa señal en vez de crear una nueva. Con el menú abierto la
     terminación visual la sigue dando la sombra NATIVA de .header__bottom
     (theme.css:7098, ya condicionada solo a .header-scrolled) al final de
     toda la fila expandida, sin cambios. */
  body.is-hide-nav .header-sticky.header-scrolled .header__top {
    box-shadow: 0 4px 18px rgba(var(--color-foreground), 0.1);
  }
}

/* ============================================================================
   MAHA — Drawer del menú (#MenuDrawer) en escritorio/laptop (2026-07-27)
   El botón de escritorio revelado arriba (.toggle-navigation-button) abre el
   MISMO #MenuDrawer que usa móvil/tablet (snippets/menu-drawer.liquid, sin
   duplicar contenido: ya trae aria-controls="MenuDrawer" y el listener de
   apertura es el genérico de ModalComponent, assets/theme.js). Se corrigen
   3 problemas de >=1024px, ninguno tocaba nada por debajo de 1024px antes:

   1) POSICIÓN DEL PANEL: ".menu-drawer{position:absolute;top:100%}" (theme.css)
      usa <header> (position:relative) como bloque contenedor. <header> vive
      DENTRO de .header-section, el elemento realmente position:sticky. Con
      el header en su estado normal (sin scroll) top:100% da el valor
      correcto (medido con Playwright: 281px = borde inferior real del
      header). Pero en cuanto .header-section queda pegado (stuck) al
      scrollear, ese mismo top:100% se recalcula mal (medido: -119px en vez
      de 77px, con el header ya compacto) por la interacción entre el
      ancestro sticky y el <header> relative anidado — el panel queda
      ~200px desplazado hacia arriba, cortando su propio encabezado y
      mezclándose con la sección de abajo. Confirmado con Playwright que el
      mismo corrimiento también ocurre en móvil/tablet al scrollear (no es
      exclusivo del header compacto de hoy) — queda fuera de este fix, que
      solo toca >=1024px a petición explícita; no se modifica el
      comportamiento móvil actual.
      Fix: en vez de depender del cálculo del bloque contenedor, se usa
      position:fixed (siempre relativo al viewport, inmune a esta
      ambigüedad) + el mismo píxel exacto que ya calcula assets/theme.js
      (MenuDrawer.prepareToShow) en --header-bottom-position, verificado
      correcto en ambos estados (281px sin scroll, 77px comprimido).
      Selector por ID (#MenuDrawer) porque theme.css:7447 tiene
      ".header--show-sperator-line .menu-drawer{top:100%}" — 2 clases,
      más específico que ".menu-drawer" solo; el ID gana sin !important.
   2) "Mis listas de resurtidos": la regla @media(min-width:768px) de arriba
      (línea ~217) solo pone background+border-radius al link — pensada
      para tablet vía el botón móvil, nunca tuvo flex/tamaño de ícono
      porque el botón de escritorio estaba oculto (opacity:0) hasta hoy.
      Sin esas reglas, los <svg> (.resurtidos-ic/.resurtidos-chev, sin
      width/height propio) se estiran a un tamaño gigante (medido: 438x438px)
      y el <a> completo se infla a su alto (medido: 914px), tapando el
      resto del menú. Fix: mismo patrón de tamaño que ya usa el bloque
      móvil (20px/16px) + color/hover propios (la regla de 768px no traía
      color, quedaba texto oscuro sobre fondo azul), re-declarado solo en
      >=1024px; border-radius 10px en vez del 50px heredado (pill
      exagerado en un botón de este alto).
   3) Encabezado + botón cerrar: menu-drawer.liquid no tenía fila de
      encabezado/cierre (a diferencia de cart-drawer.liquid, que sí la
      tiene). Se agregó en el .liquid usando las MISMAS clases que ya usa
      cart-drawer (.drawer__header/.drawer__header-inner/.drawer__close-btn/
      .drawer__heading) — cero CSS nueva para el botón en sí. Oculto por
      completo <1024px (regla base display:none) para no alterar el móvil,
      que no tiene botón cerrar visible hoy y no fue parte de esta
      solicitud. El cierre ya lo conecta el listener genérico de
      ModalComponent vía aria-controls="MenuDrawer" — sin JS nuevo.
   ============================================================================ */
#MenuDrawer .drawer__header {
  display: none;
}
@media (min-width: 1024px) {
  #MenuDrawer {
    position: fixed;
    top: var(--header-bottom-position, 0px);
    height: calc(var(--viewport-height, 100vh) - var(--header-bottom-position, 0px));
  }
  #MenuDrawer .drawer__inner {
    --modal-width: 38rem;
  }
  #MenuDrawer .drawer__header {
    display: block;
  }
}

/* ============================================================================
   MAHA — Selector de categorías del buscador
   Móvil: se conserva el <select> nativo (picker del sistema = mejor UX táctil),
   ya compactado a solo-flecha. Escritorio: listbox custom ligero porque el popup
   del <select> lo pinta el sistema operativo y no admite estilos.
   Sin JS, .search__types--custom-on no se agrega y el nativo sigue visible.
   ============================================================================ */
.search-types-custom { display: none; }
/* FOUC "Categorías" duplicado (2026-07-27): la regla ".search-types-custom{display:block}"
   de abajo (>=768px) no comprueba el atributo hidden y lo neutraliza por completo --
   desde el primer frame, antes de que el <script> inline de predictive-search.liquid
   corra, el panel personalizado quedaba visible AL MISMO TIEMPO que el <select> nativo
   (ninguno de los dos súper-específico le gana al otro por origen: [hidden] es UA,
   .search-types-custom{display:block} es autor, autor siempre gana sobre UA sin
   importar especificidad). Confirmado con Playwright en carga lenta real (throttling):
   la duplicación duró >1s antes de que el JS quitara "hidden". Reforzar [hidden] aquí,
   antes de la media query, para que gane siempre sin tocar el resto de la regla. */
.search-types-custom[hidden] { display: none !important; }
@media (min-width: 768px) {
  /* con el custom activo, el nativo queda operativo pero fuera de vista (form/JS intactos).
     min/max-width vencen el width:100% + max-width:8rem del contenedor del tema */
  .search__types--custom-on select.form-select,
  .search__types--custom-on > svg,
  .search__types--custom-on > .icon {
    position: absolute !important;
    width: 1px !important;
    min-width: 0 !important;
    max-width: 1px !important;
    height: 1px;
    padding: 0 !important;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
  }
  /* el contenedor absoluto del tema mide máx 8rem; el custom necesita su propio ancho */
  .search__types.search__types--custom-on { max-width: none; }
  .search-types-custom { display: block; position: relative; }
  .search-types-custom__btn {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 14px 10px 16px;
    background: #ffffff;
    border: 1px solid #e6e6e8;
    border-radius: 999px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #141414;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s ease;
  }
  .search-types-custom__btn { max-width: 168px; }
  .search-types-custom__btn [data-sel-label] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .search-types-custom__btn:hover { border-color: #d9d9dd; }
  .search-types-custom__btn:focus-visible { outline: 2px solid #3682f8; outline-offset: 2px; }
  /* .search__types svg (theme.css) posiciona el icono en absolute/right para el
     <select> nativo antiguo; como este svg tambien es descendiente de .search__types,
     heredaba esa regla y quedaba empalmado sobre "Categorías". Se reintegra al flujo
     flex del boton (position:static + transform:none neutraliza right/top/translateY). */
  .search-types-custom__btn svg {
    position: static;
    right: auto;
    top: auto;
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    color: #4a4a52;
    transform: none;
    transition: transform 0.18s ease;
  }
  .search-types-custom__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
  .search-types-custom__list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 60;
    min-width: 260px;
    max-height: 320px;
    overflow-y: auto;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #ffffff;
    border: 1px solid #e6e6e8;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(20, 20, 20, 0.12);
  }
  .search-types-custom__list::-webkit-scrollbar { width: 8px; }
  .search-types-custom__list::-webkit-scrollbar-thumb { background: #d9d9dd; border-radius: 8px; }
  .search-types-custom__list::-webkit-scrollbar-track { background: transparent; }
  .search-types-custom__list [role="option"] {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13.5px;
    color: #141414;
    cursor: pointer;
    line-height: 1.3;
  }
  .search-types-custom__list [role="option"]:hover,
  .search-types-custom__list [role="option"]:focus-visible {
    background: #f6f6f7;
    outline: none;
  }
  .search-types-custom__list [role="option"][aria-selected="true"] {
    background: #eaf1ff;
    color: #1f5fd8;
    font-weight: 600;
  }
}
@media (max-width: 767.98px) {
  /* jamás en móvil: el nativo compacto aprobado es el control */
  .search-types-custom { display: none !important; }
}

/* Tablet 768-1023.98px: el listbox custom de arriba (pensado "solo escritorio"
   según el comentario original, pero activado por @media min-width:768px sin
   tope superior) muestra el botón con el texto "Categorías" siempre visible,
   sin comprimir nada en tablet -- no es el bug de foco de móvil, pero tampoco
   cumple el objetivo de "solo la flecha" pedido para móvil Y tablet. Se oculta
   visualmente SOLO la etiqueta de texto (mismo patrón visually-hidden que
   .header-cart__label más arriba: sigue en el DOM y accesible para lectores
   de pantalla), sin tocar el botón, la lista de opciones ni el ancho general
   del buscador -- la flecha (svg hermano) no se toca y sigue visible. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .search-types-custom__btn [data-sel-label] {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* ============================================================================
   MAHA — Menú móvil (drawer): accesos rápidos Facturar / Rastrear mi pedido
   ============================================================================ */
.menu-drawer__quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid #e6e6e8;
}
.menu-drawer__quick-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #d9d9dd;
  border-radius: 10px;
  padding: 12px 8px;
  min-height: 46px;
  font-size: 13px;
  font-weight: 600;
  color: #141414;
  background: #ffffff;
  text-align: center;
  line-height: 1.2;
}
.menu-drawer__quick-action svg { width: 18px; height: 18px; color: #1f5fd8; flex: none; }
.menu-drawer__quick-action:hover,
.menu-drawer__quick-action:active { background: #f6f6f7; color: #141414; }
.menu-drawer__quick-action:focus-visible { outline: 2px solid #3682f8; outline-offset: 2px; }

/* Cápsula azul (2026-07-30), solo <1024px: mismo formato redondeado que los
   botones de escritorio, sin tocar tamaño/padding/separación actuales -- solo
   forma y color. Sin cambios de fondo en hover/active (estático, sin
   movimiento) para no introducir animación donde el pedido pide "sin
   movimiento ni animaciones". */
@media (max-width: 1023.98px) {
  .menu-drawer__quick-action {
    border-radius: 999px;
    border-color: #3682F8;
    color: #1F5FD8;
  }
  .menu-drawer__quick-action svg {
    color: #1F5FD8;
  }
  .menu-drawer__quick-action:hover,
  .menu-drawer__quick-action:active {
    background: #ffffff;
    color: #1F5FD8;
    border-color: #3682F8;
  }
  .menu-drawer__quick-action:focus-visible {
    outline: 2px solid #3682F8;
    outline-offset: 2px;
  }
}

/* ============================================================================
   MAHA — "Cotiza por WhatsApp" (snippets/whatsapp-quote-button.liquid)
   Misma etiqueta .header-whatsapp-quote en 2 contextos: header desktop
   (.header__buttons, píldora compacta) y drawer móvil
   (.menu-drawer__quick-actions, fila completa como CTA primario).
   ============================================================================ */
.header-whatsapp-quote {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  background-color: #25d366;
  color: #ffffff;
  border: 1px solid #25d366;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transform: none;
  animation: none;
  box-shadow: none;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.header-whatsapp-quote .header-whatsapp-quote__icon { color: #ffffff; flex: none; }
.header-whatsapp-quote:hover,
.header-whatsapp-quote:active {
  background-color: #128c7e;
  border-color: #128c7e;
  color: #ffffff;
  transform: none;
  animation: none;
  box-shadow: none;
}
.header-whatsapp-quote:focus-visible {
  outline: 2px solid #128c7e;
  outline-offset: 2px;
}

/* Contexto 1: header desktop/laptop (>=1024px) — píldora compacta junto a cuenta/carrito */
.header__buttons .header-whatsapp-quote {
  padding: 9px 16px;
  min-height: 40px;
}
/* 1024-1279.98px ("lg" sin "xl", mismo corte que .reversed-link__text del custom_link
   de este header): no hay espacio real para el texto sin comprimir Factura/Rastrear
   (medido: agregar el texto aquí desplaza "Factura aquí" 191px hacia la izquierda,
   directo sobre el área visual del ícono de búsqueda). El texto queda accesible para
   lectores de pantalla (mismo tratamiento que .visually-hidden de theme.css) y
   vuelve a verse a partir de 1280px, donde ya hay espacio real (medido: +118px). */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .header__buttons .header-whatsapp-quote {
    padding: 0;
    width: 40px;
    height: 40px;
    min-height: 40px;
    justify-content: center;
  }
  .header__buttons .header-whatsapp-quote__text {
    position: absolute !important;
    overflow: hidden;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* Contexto 2: drawer móvil/tablet — <li> dentro de #MenuDrawer ul.flex-grow,
   inmediatamente debajo de "Mis listas de resurtidos" (snippets/menu-drawer.liquid,
   li.menu-drawer__whatsapp-item). El <ul> es flex (.menu-drawer__menus
   ul.flex-grow{display:flex;flex-direction:column}, línea ~317) y el <li> de
   resurtidos ya usa order:-1 para aparecer antes que las categorías pese a
   estar al final del HTML (li.mobile-nav__item.wishlistMobileAppend...,
   líneas ~332/347); este <li> copia el mismo order:-1 para agruparse con él
   -- al tener orden igual, el desempate lo da el orden de fuente (resurtidos
   antes que whatsapp en el .liquid), así que queda pegado justo debajo.
   Escritorio (>=1024px) NO se toca: ese ancho de banda no estaba en el
   alcance de este cambio. margin-inline 16px reproduce el mismo inset
   horizontal que tenía dentro de .menu-drawer__quick-actions (1.6rem del
   .v-scrollable padre + 16px propios = mismo ancho que antes). */
@media (max-width: 1023.98px) {
  li.menu-drawer__whatsapp-item {
    order: -1;
    list-style: none;
    margin: 16px 16px 12px;
  }
  li.menu-drawer__whatsapp-item .header-whatsapp-quote {
    display: flex;
    width: 100%;
    justify-content: center;
    min-height: 44px;
    padding: 12px 16px;
    font-size: 13px;
  }
  li.menu-drawer__whatsapp-item .header-whatsapp-quote .header-whatsapp-quote__icon {
    width: 18px;
    height: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .header-whatsapp-quote { transition: none; transform: none; }
}

/* ============================================================================
   MAHA — Oculta el widget flotante de WhatsApp de la app externa instalada
   (script splmn-shopify-prod-*.min.js, cargado vía content_for_header — no
   forma parte de este tema, no es editable aquí). Se reemplaza por el botón
   flotante propio de abajo (.wa-float), que sí controla el tema por completo.
   La app sigue instalada y funcionando; solo se oculta su salida visual. */
#wa-chat-btn-root,
.wa-custom-chat-btn {
  display: none !important;
}

/* ============================================================================
   MAHA — Botón flotante "Cotiza por WhatsApp" (ícono circular + tooltip
   periódico "Contáctanos", ver wa-float-tooltip.js). Mismo número/enlace que
   el resto del sitio (whatsapp-quote-button.liquid), z-index 30: por debajo
   de drawers/modales (.drawer = 32) para no quedar encima cuando se abren,
   por encima del contenido normal de página.

   pointer-events: auto es OBLIGATORIO aquí: .wa-float vive dentro de
   sections/header.liquid, es decir dentro de .header-section.header-sticky,
   que trae pointer-events:none de fábrica (theme.css:7092-7097) para que el
   header sticky no bloquee clics en el contenido de atrás cuando hay zonas
   transparentes. pointer-events se hereda -- sin este override el botón
   flotante hereda "none" y queda visible pero completamente inerte al clic
   (el clic atraviesa hacia el slideshow/contenido de fondo). */
.wa-float {
  position: fixed;
  right: 24px;
  bottom: 28px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
}
.wa-float .header-whatsapp-quote.wa-float__btn {
  width: 60px;
  height: 60px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(18, 140, 126, 0.28);
}
.wa-float .header-whatsapp-quote.wa-float__btn:hover,
.wa-float .header-whatsapp-quote.wa-float__btn:active {
  box-shadow: 0 4px 14px rgba(18, 140, 126, 0.36);
}
.wa-float .header-whatsapp-quote__icon {
  width: 30px;
  height: 30px;
}
/* El texto del botón ("Cotiza por WhatsApp") solo es para lectores de
   pantalla en el flotante: el mensaje visible aquí es el tooltip aparte. */
.wa-float .header-whatsapp-quote__text {
  position: absolute !important;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.wa-float__tooltip {
  background: #ffffff;
  color: #111111;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}
.wa-float__tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Hover/foco (desktop con puntero o teclado) también muestra el tooltip,
   independiente del temporizador. En touch no existe :hover real; ahí el
   mecanismo principal es la aparición periódica automática. */
@media (hover: hover) and (pointer: fine) {
  .wa-float:hover .wa-float__tooltip,
  .wa-float:focus-within .wa-float__tooltip {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Móvil hasta 767.98px: botón flotante más grande y más arriba */
@media (max-width: 767.98px) {
  .wa-float {
    right: 22px;
    bottom: 58px;
  }
  .wa-float .header-whatsapp-quote.wa-float__btn {
    width: 54px;
    height: 54px;
  }
  .wa-float .header-whatsapp-quote__icon {
    width: 27px;
    height: 27px;
  }
}

/* Tablet 768-1023.98px: botón flotante más grande y más arriba */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .wa-float {
    right: 24px;
    bottom: 52px;
  }
  .wa-float .header-whatsapp-quote.wa-float__btn {
    width: 60px;
    height: 60px;
  }
  .wa-float .header-whatsapp-quote__icon {
    width: 30px;
    height: 30px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wa-float__tooltip { transition: none; }
}

/* MAHA — evita que el botón flotante de WhatsApp (.wa-float) se encime con la
   barra sticky "Agregar" del PDP (.sticky-atc-bar, snippets/sticky-atc-bar.liquid)
   cuando esta aparece. --wa-float-sticky-offset la calcula
   assets/wa-float-sticky-offset.js a partir de la posición REAL de .sticky-atc-bar
   (getBoundingClientRect), nunca es un valor fijo, así que sirve tanto para el
   estilo "standard" (barra de ancho completo) como "minimalist" (tarjeta flotante)
   y para cualquier alto de contenido. El selector :has(.sticky-atc-bar--show) solo
   aplica el ajuste mientras la barra está realmente visible; si no lo está, .wa-float
   conserva su posición normal de arriba. Acotado a <1024px (mismo límite que las
   reglas de arriba): escritorio no se toca. */
  body:has(.sticky-atc-bar.sticky-atc-bar--show:not(.sticky-atc-bar--dismissed)) .wa-float {
  bottom: 140px !important;
}

/* MAHA: fix pantalla negra en carga inicial (page-transition / .loading-bar)
   .loading-bar (assets/theme.css) es fixed+full-viewport+bg=--color-foreground,
   visible por defecto y solo se oculta cuando theme.js anima visibility/opacity
   tras DOMContentLoaded. En documentos grandes ese evento tarda 1-1.5s+, dejando
   una pantalla negra visible mientras tanto. Las clases page-loading/page-loaded
   que el mismo componente alterna no tienen NINGUNA regla CSS asociada (grep
   confirmado) -> el overlay no cumple hoy ninguna función visible de "transición
   entre páginas", solo produce el flash. Lo arrancamos oculto por CSS (mismo
   estado final que ya aplica el JS) para eliminar el flash sin tocar el JS,
   el color, el z-index ni el ajuste settings.enable_page_transition. */
/* ============================================================================
   MAHA — CTAs de marketing/navegación con .btn--primary negro (--color-button
   del esquema de color) recoloreados al azul de "Agregar al carrito"
   (#3682F8 / hover #1F5FD8). Selectores acotados por sección/clase única —
   NO se toca .btn--primary global. ESTADO REAL tras FOOTER-INSCRIBIRSE-IGUAL-
   QUE-AGREGAR-AL-CARRITO (ver el bloque al final de este archivo): "Inscribirse" del newsletter
   y "Aplicar" del cupon YA NO son negros -- van en azul MAHA completo (fondo,
   no solo la pastilla) con el texto en blanco, acotados por .footer-newsletter__form y
   .cart-discount__form. "Calcular" nunca fue .btn--primary: es
   #js-ship-calc.shipping-calc-overlay__btn con markup propio y ya venia en
   azul #1A56DB (un tono distinto, sin unificar a proposito). En cambio los botones
   "Comparar" de la barra de comparacion y "Ver Detalles" del modal del
   comparador SI son CTAs y van en azul; se repintan en el bloque
   COMPARAR-FIX-COLOR, al final de este archivo, con selectores acotados a
   .compare-bar__open y .compare-table__col-info.

   .section--custom-content .btn--primary es la única regla NO acotada por ID:
   es la clase real del wrapper de la sección "Custom content" (ver
   sections/custom-content.liquid), reutilizable en cualquier instancia/
   plantilla sin romperse al duplicar la sección.

   Sin movimiento: transform/animation/box-shadow quedan en "none" siempre,
   en reposo y en hover. Solo transiciona el color (150ms). El tema base
   (assets/theme.css .btn--primary::before) trae un barrido animado (::before
   crece de width:0 a 100% en hover) + invierte el color de texto en hover
   (.btn--primary:hover{color:rgb(var(--color-button))}); ambos se neutralizan
   aquí explícitamente para estos CTAs. */
#shopify-section-template--23226914013396__collection_tabs_VexkkR .btn.btn--primary,
#shopify-section-template--23226914013396__image_with_text_aXhRxw .btn.btn--primary,
#shopify-section-template--23226914013396__image_with_text_ka8yQQ .btn.btn--primary,
#shopify-section-sections--23226906935508__cart-drawer .btn.btn--primary.self-center,
a.cart__empty-header,
button[is="load-more-button"].btn--primary,
.section--custom-content .btn--primary {
  background-color: #3682f8 !important;
  border-color: #3682f8 !important;
  color: #ffffff !important;
  transform: none !important;
  animation: none !important;
  box-shadow: none !important;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
/* Mata el barrido ::before heredado de .btn--primary (theme.css) */
#shopify-section-template--23226914013396__collection_tabs_VexkkR .btn.btn--primary::before,
#shopify-section-template--23226914013396__image_with_text_aXhRxw .btn.btn--primary::before,
#shopify-section-template--23226914013396__image_with_text_ka8yQQ .btn.btn--primary::before,
#shopify-section-sections--23226906935508__cart-drawer .btn.btn--primary.self-center::before,
a.cart__empty-header::before,
button[is="load-more-button"].btn--primary::before,
.section--custom-content .btn--primary::before {
  display: none !important;
}
#shopify-section-template--23226914013396__collection_tabs_VexkkR .btn.btn--primary:hover,
#shopify-section-template--23226914013396__image_with_text_aXhRxw .btn.btn--primary:hover,
#shopify-section-template--23226914013396__image_with_text_ka8yQQ .btn.btn--primary:hover,
#shopify-section-sections--23226906935508__cart-drawer .btn.btn--primary.self-center:hover,
a.cart__empty-header:hover,
button[is="load-more-button"].btn--primary:hover,
.section--custom-content .btn--primary:hover {
  background-color: #1f5fd8 !important;
  border-color: #1f5fd8 !important;
  color: #ffffff !important;
  transform: none !important;
  animation: none !important;
  box-shadow: none !important;
}
#shopify-section-template--23226914013396__collection_tabs_VexkkR .btn.btn--primary:focus-visible,
#shopify-section-template--23226914013396__image_with_text_aXhRxw .btn.btn--primary:focus-visible,
#shopify-section-template--23226914013396__image_with_text_ka8yQQ .btn.btn--primary:focus-visible,
#shopify-section-sections--23226906935508__cart-drawer .btn.btn--primary.self-center:focus-visible,
a.cart__empty-header:focus-visible,
button[is="load-more-button"].btn--primary:focus-visible,
.section--custom-content .btn--primary:focus-visible {
  outline: 2px solid #3682f8;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  #shopify-section-template--23226914013396__collection_tabs_VexkkR .btn.btn--primary,
  #shopify-section-template--23226914013396__image_with_text_aXhRxw .btn.btn--primary,
  #shopify-section-template--23226914013396__image_with_text_ka8yQQ .btn.btn--primary,
  #shopify-section-sections--23226906935508__cart-drawer .btn.btn--primary.self-center,
  a.cart__empty-header,
  button[is="load-more-button"].btn--primary,
  .section--custom-content .btn--primary {
    transition: none;
  }
}

.loading-bar {
  visibility: hidden;
  opacity: 0;
}

/* ============================================================================
   MAHA — Drawer del menú (#MenuDrawer) en móvil/tablet (2026-07-28)
   Continuación del fix de escritorio (2026-07-27, comentario arriba, sección
   ">=1024px"): mismo root cause, confirmado entonces también <1024px pero
   fuera de aquel alcance ("a petición explícita"). Hoy se corrige para
   móvil y tablet:

   1) POSICIÓN DEL PANEL: ".menu-drawer{position:absolute;top:100%}" usa
      <header> (position:relative, dentro de .header-section sticky) como
      bloque contenedor. Al hacer scroll con el header ya pegado, ese
      top:100% se recalcula relativo al DOCUMENTO, no al viewport: medido
      hoy con Playwright, top:-7744px con scroll en 7981px (panel
      completamente invisible, fuera de pantalla). Mismo fix que escritorio:
      position:fixed + --header-bottom-position (ya calculado por
      MenuDrawer.prepareToShow, assets/header.js). #MenuDrawer (ID) gana sin
      !important sobre ".header--show-sperator-line .menu-drawer"
      (theme.css:7447, 2 clases) y sobre la utilidad ".z-1" del markup
      (z-index:1, ganaba por orden de cascada sobre ".drawer" z-index:32).
   2) OVERLAY: el fix de escritorio no tocó ".fixed-overlay" (no hacía falta
      con el ancho del panel en ese rango). En móvil/tablet si hace falta:
      sin este ajuste, el overlay (heredando position:fixed desde su regla
      base) cubre TODO el viewport incluyendo el header, tapando el botón de
      hamburguesa que cierra el menú. Se ancla al mismo offset que el panel
      para cubrir solo lo que hay debajo del header, igual que el diseño
      original (overlay antes limitado a la caja de #MenuDrawer).
   3) Z-INDEX vs hermanos de <header>: el drawer vive anidado en <header>
      (position:relative; z-index:20), que crea su propio stacking context.
      El flotante de WhatsApp (z-index:30, hermano de <header>, ver
      whatsapp-quote-button.liquid) queda por encima de TODO el header --y
      de #MenuDrawer dentro de él-- sin importar el z-index interno del
      panel. Fix: <header> sube temporalmente mientras el menú está abierto.
   4) HEADER STICKY ROTO AL ABRIR CUALQUIER DRAWER (bug preexistente, no
      introducido hoy -- confirmado también en #CartDrawer, sin tocar nada
      de esta tarea): al abrir un drawer, ModalComponent agrega
      "modal-showing"/"modal-show" a <body> (theme.js), que en theme.css
      pone overflow:hidden en <body> para bloquear el scroll de fondo. Con
      <body> en overflow:hidden, el navegador dejaba de considerar el
      viewport como contenedor de scroll de ".header-section" (position:
      sticky) y el header se desprendía y scrolleaba con el documento
      (medido: header en top:-2092px con el menú abierto, en vez de top:0).
      Esto es lo que impedía tocar el botón de hamburguesa para cerrar el
      menú al scrollear -- reproducido igual abriendo #CartDrawer, por lo
      que NO se toca el mecanismo de bloqueo de scroll (compartido por
      todos los drawers); se fija ".header-section" con position:fixed
      SOLO mientras #MenuDrawer está abierto, para no alterar el
      comportamiento de los demás drawers ni el del header en cualquier
      otro momento.
   ============================================================================ */
@media (max-width: 1023.98px) {
  /* z-index:1000 (antes 32): la app de Instagram embebida en el home
     (.instafeed-new-arrow, z-index:999 fijado por la app misma) quedaba por
     encima del overlay del drawer -- se veía y se podía interactuar con sus
     flechas de carrusel a través del menú abierto. El drawer/overlay de un
     modal debe quedar por encima de cualquier contenido normal de página;
     1000 lo garantiza sin necesidad de perseguir el z-index de cada app. */
  #MenuDrawer {
    position: fixed;
    top: var(--header-bottom-position, 0px);
    height: calc(100vh - var(--header-bottom-position, 0px));
    height: calc(100dvh - var(--header-bottom-position, 0px));
    z-index: 1000;
  }
  #MenuDrawer .fixed-overlay {
    position: fixed;
    top: var(--header-bottom-position, 0px);
    height: calc(100vh - var(--header-bottom-position, 0px));
    height: calc(100dvh - var(--header-bottom-position, 0px));
  }
  /* overscroll-behavior:contain (ausente en el tema, tanto MAHA como Hyper):
     sin esto, al llegar al principio/final del scroll interno del panel
     (.v-scrollable cubre tanto el nivel raiz -- .menu-drawer__menus -- como
     el <ul> de cada submenu abierto, misma clase) el navegador encadena el
     scroll restante hacia <body>. Con overflow:hidden en <body> normalmente
     no se ve movimiento, pero el "bounce"/scroll chaining en iOS Safari
     puede alcanzar a mover el fondo de todas formas. contain detiene la
     cadena en el propio panel sin agregar un segundo mecanismo de bloqueo. */
  #MenuDrawer .v-scrollable {
    overscroll-behavior: contain;
  }
  /* 2026-07-29: :has(#MenuDrawer[open]) -> :has(#MenuDrawer:not([hidden])).
     "open" se quita de forma SINCRONA en cuanto empieza el cierre
     (ModalComponent.hide(), theme.js), pero el bloqueo de scroll de <body>
     (clase "modal-show"/"modal-showing", overflow:hidden) sigue activo hasta
     que termina la transicion de cierre (~800ms despues, en handleAfterHide).
     Con el selector viejo, .header-section soltaba su position:fixed al
     instante -- volvía a su position:sticky nativo mientras <body> seguia
     bloqueado, y sticky calculado contra un scroll "congelado" a media
     pagina lo mandaba fuera de pantalla (medido con Playwright: top:-866px,
     ~730ms de ventana). El atributo "hidden" del propio <menu-drawer> se
     limpia recien al mismo tiempo que se libera el bloqueo de <body> (mismo
     bloque de ModalComponent.attributeChangedCallback) -- :not([hidden])
     mantiene <header>/.header-section fijos durante TODA la transicion de
     cierre, sueltan casi en el mismo instante que <body> se desbloquea. */
  .header:has(#MenuDrawer:not([hidden])) {
    z-index: 1000;
  }
  .header-section:has(#MenuDrawer:not([hidden])) {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    /* z-index:1000 en el propio .header-section (no solo en <header> hijo):
       .header-section hereda z-index:30 de .header-sticky (theme.css) y, al
       volverse position:fixed aqui, ESE 30 pasa a ser el que compite con
       otras secciones hermanas de la pagina (cada .shopify-section es su
       propio contexto de apilamiento). El z-index:1000 de <header> arriba
       queda atrapado DENTRO de ese contexto y no alcanza a competir hacia
       afuera -- por eso la app de Instagram del home (.instafeed-new-arrow,
       z-index:999, ver arriba) seguia por encima del overlay del menu
       abierto pese a que <header> ya tenia 1000. */
    z-index: 1000;
  }
}


/* ============================================================================
   MAHA — Color de categorías sin hijos en el drawer móvil/tablet (2026-07-29)
   Causa real (confirmada con Playwright en las 15 categorías reales del
   drawer): el enlace del nivel actual SIN subcategorías
   (menu-drawer-details.liquid, rama "else" del childlink) y el <summary> de
   una categoría CON subcategorías ya comparten el MISMO color computado --
   rgb(0,0,0), heredado de --color-foreground -- ninguno de los dos hereda el
   gris real de .text-subtext (rgb(102,102,102), --color-subtext), que sigue
   siendo exclusivo de los enlaces "nieto" dentro de un acordeón ya abierto
   (sin cambios aqui). La diferencia que reporta el usuario no es de color:
   es que el <summary> con hijos usa menu-drawer__item-link-heading
   (font-weight 700, negrita) mientras el enlace sin hijos hereda el peso
   normal del cuerpo (500) -- a los tamaños pequeños del drawer movil, un
   negro regular de trazo fino junto a un negro en negrita se percibe mas
   claro/gris por contraste óptico, y ahí es donde se confunde visualmente
   con el gris real de los nietos. Fix: color explícito en la nueva clase
   .menu-drawer__item-link--leaf (agregada solo a esa rama en
   menu-drawer-details.liquid) para que el valor no dependa de la herencia
   ni pueda leerse ambiguo, exactamente el #141414 pedido. No se toca
   font-weight ni ningún otro enlace: .text-subtext (nietos) sigue
   heredando su gris real sin cambios; el <summary> con hijos sigue con su
   negrita actual sin cambios. Acotado a <1024px como se pidió. */
@media (max-width: 1023.98px) {
  .menu-drawer__item-link--leaf {
    color: #141414;
  }
}

/* ============================================================================
   MAHA — Subcategorías del acordeón en móvil/tablet: lista de 1 columna
   (2026-07-29)
   snippets/menu-drawer-details.liquid (nativo, sin tocar) solo tiene 2 modos
   para los nietos de un acordeón: bloque tipo "sidebar" -> grid vía clase
   .f-grid + variable --f-columns-mobile (fijada ahí mismo en un <style>
   inline a "2"), o cualquier otro tipo -> <ul> simple de 1 columna. Las 7
   categorías del menú (sections/header-group.json, bloques sidebar_*) usan
   el tipo "sidebar" con show_collection_image:true pensado para mostrar
   imagen de colección + texto en grid -- pero los hijos reales no son
   collection_link, así que nunca hay imagen: solo texto suelto partido en
   2 columnas apretadas. --f-columns-mobile es la MISMA variable que ya usa
   el tema nativo para controlar columnas por breakpoint (--f-columns-md/-lg
   más arriba en desktop, sin fijar aquí, así que escritorio no cambia).
   Forzarla a 1 en <1024px basta para volver a una fila por enlace, ancho
   completo, con el --f-row-gap-mobile:2.4rem nativo ya intacto como
   separación vertical -- sin tocar el .liquid ni la arquitectura f-grid. */
@media (max-width: 1023.98px) {
  #MenuDrawer .menu-drawer__item-grandchild {
    --f-columns-mobile: 1;
  }
}

/* ============================================================================
   MAHA — Reset de los botones de flecha/chevron/+/- del menú de navegación
   (2026-07-29)
   snippets/menu-drawer-details.liquid, desktop-menu.liquid, mega-menu.liquid:
   el nombre de cada categoría/subcategoría es un <a href> real; la flecha
   vive en un <button type="button"> aparte que SOLO expande/contrae (ver
   assets/header.js DetailsDropdown/DetailsMega/MenuDrawerDetails y
   assets/theme.js AccordionDetails — el <a> nunca recibe preventDefault, el
   <button> sí). Sin este reset, el <button> hereda el estilo GLOBAL de botón
   del tema (--buttons-padding:3.2rem, --buttons-height, border,
   border-radius — theme.css ~2187-2202), que se ve como un círculo/cápsula
   enorme alrededor del ícono. Aquí se neutraliza SOLO para estas clases
   nuevas, sin tocar ningún otro <button> del tema.
   Referencia nativa (Hyper == MAHA en estos selectores, mismo theme.css):
   ícono real del chevron/plus-toggle = icon--2xs (1.2rem/12px), y Hyper ya
   sube ese ícono a 16px en el acordeón móvil (.accordion-details__summary
   svg.icon, ~3086-3089) — se usa 16px aquí para las 3 clases, dentro del
   rango pedido (14-18px) y consistente en todos los anchos. */
.menu-drawer__item-toggle,
.menu__item-toggle {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: inherit;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: none;
  cursor: pointer;
}
.menu-drawer__item-toggle:hover,
.menu-drawer__item-toggle:active,
.menu-drawer__item-toggle:focus-visible,
.menu__item-toggle:hover,
.menu__item-toggle:active,
.menu__item-toggle:focus-visible {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: inherit;
}
.menu-drawer__item-toggle:focus-visible,
.menu__item-toggle:focus-visible {
  outline: 2px solid rgba(var(--color-foreground), 0.5);
  outline-offset: -2px;
}
.menu-drawer__item-toggle .icon,
.menu__item-toggle .icon {
  width: 16px;
  height: 16px;
  flex: none;
}

/* Nombre real: ocupa el espacio restante de la fila, el <button> conserva su
   caja fija de 40x40px al lado. */
.menu-drawer__item-toggle-name {
  flex: 1 1 auto;
  min-width: 0;
}

/* Caso especial (sin URL válida): el <button> es la fila entera en el
   drawer/acordeón móvil — mismo ancho y separación que la fila normal, sin
   la caja fija de 40px (el nombre necesita todo el ancho). */
.menu-drawer__item-toggle--full-row {
  width: 100%;
  height: auto;
  min-width: 0;
  min-height: 40px;
  text-align: left;
}
.menu-drawer__item-toggle--full-row .icon {
  width: 16px;
  height: 16px;
}

/* Caso especial (sin URL válida) en el nav de escritorio/laptop: el <button>
   reemplaza al <a> del nombre. Contexto horizontal (barra de nav), no fila
   vertical: ancho natural del contenido, sin estirar ni empujar el ícono
   lejos del texto (mismo ritmo que .menu__item ya trae con su
   column-gap:0.4rem nativo, sin --full-row). */
.menu__item-toggle--full-row {
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
}
.menu__item-toggle--full-row .icon {
  width: 16px;
  height: 16px;
}

/* Slider with multicolumn: botón "Comprar Ahora" / "Ver Más" (block button
   dentro del slide) azul #3682F8 igual a los demás botones principales de
   MAHA. Selector por data-id del custom element (multicolumn-slider), único
   .btn--primary dentro de esta sección — no toca otros botones del tema. */
.multicolumn-slider[data-id*="slider_with_multicolumn_pMqLTj"] .btn--primary {
  background-color: #3682F8;
  border-color: #3682F8;
  color: #fff;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.multicolumn-slider[data-id*="slider_with_multicolumn_pMqLTj"] .btn--primary:hover,
.multicolumn-slider[data-id*="slider_with_multicolumn_pMqLTj"] .btn--primary:focus-visible {
  background-color: #1F5FD8;
  border-color: #1F5FD8;
  color: #fff;
}

/* ============================================================================
   MAHA — elimina el hueco blanco al colapsar el menú horizontal (2026-07-30)
   Causa: ".header[data-collapse-on-scroll=true] .header__bottom.is-hide"
   (theme.css:7020) solo aplica transform:translate3d() para deslizar la fila
   de navegación fuera de vista. transform no saca al elemento del flujo del
   documento -- su altura completa (--header-navigation-height) sigue
   reservada dentro de .header-section aunque ya no se vea, dejando un hueco
   vacío del mismo alto entre la barra superior compacta y el contenido de
   abajo. Medido con Playwright en 1440px: .header-section quedaba en 262px
   colapsado (77px de barra compacta + 185px de hueco fantasma == la altura
   exacta de --header-navigation-height) en vez de los ~77-81px reales. En
   Hyper el mismo mecanismo pasa inadvertido porque su menú demo es de una
   sola fila corta (hueco de pocos px, imperceptible); el menú de MAHA es de
   varias filas, así que el mismo hueco se vuelve grande y visible. Confirmado
   independientemente con Codex: Hyper comparte el mismo mecanismo nativo, sin
   ninguna corrección de altura.
   Fix: colapsar también max-height a 0 en el mismo estado, sincronizado con
   el transform nativo (misma --header-duration/--header-easing), y quitar
   pointer-events mientras está oculto. overflow:hidden solo se aplica en el
   estado colapsado -- los submenús (.dropdown/.mega-menu, position:absolute,
   theme.css:7137) viven dentro de .header__bottom y necesitan overflow
   visible mientras el menú está desplegado; con la fila oculta no hay
   submenú abierto que recortar. Sin cambios en header.js: el
   ResizeObserver que ya observa <header> (setHeight) recalcula
   --header-height/--header-navigation-height en cuanto la caja cambia de
   tamaño. Solo >=1024px, mismo alcance que el resto de los ajustes de este
   header (nota arriba). */
@media (min-width: 1024px) {
  .header[data-collapse-on-scroll=true] .header__bottom {
    /* MENU-CLAMP-FIX B (2026-08-12): piso 19rem evita recorte de la 2a fila.
       Playwright headed, 4 anchos, post-fonts.ready: 1024/1280/1440px=183px,
       1920px=135px. root=10px (html 62.5%), 183px=18.3rem -> 19rem (+2rem
       habria sido 21rem, pero 19rem ya cubre con 7px de margen y reduce
       la pausa muerta de animacion). max-height:0 del colapsado: intacto. */
    max-height: max(var(--header-navigation-height, 50rem), 13rem);
  }
  .header[data-collapse-on-scroll=true] .header__bottom.is-hide:not(.is-show) {
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
    transition: transform var(--header-duration) var(--header-easing), max-height var(--header-duration) var(--header-easing), visibility 0s var(--header-easing) var(--header-duration), background-color var(--header-duration-long) var(--header-duration) var(--header-easing), box-shadow var(--header-duration) var(--header-easing) 0s, border-color 0s var(--header-easing) 0s;
  }
}
/* =========================================================
   MAHA — Menú móvil
   Categorías directas: negras y gruesas
   Subcategorías desplegadas: grises y normales
   ========================================================= */
@media screen and (max-width: 1023px) {
  /* Categorías con hijos y categorías sin hijos */
  #MenuDrawer .menu-drawer__item-link:not(.menu-drawer__item-grandchild),
  #MenuDrawer .menu-drawer__item-link:not(.menu-drawer__item-grandchild) .reversed-link__text {
    color: #141414 !important;
    -webkit-text-fill-color: #141414 !important;
    font-weight: 600 !important;
    opacity: 1 !important;
  }

  /* Subcategorías que aparecen al abrir el signo + */
  #MenuDrawer .menu-drawer__item-grandchild,
  #MenuDrawer .menu-drawer__item-grandchild .reversed-link__text {
    color: #6b6b73 !important;
    -webkit-text-fill-color: #6b6b73 !important;
    font-weight: 400 !important;
    opacity: 1 !important;
  }
}

/* ============================================================================
   MAHA cart-premium.css — sección agregada 2026-08-04
   Rediseño premium del carrito (cart-drawer.liquid + main-cart.liquid).
   Solo CSS, no toca Liquid ni JSON.
   Va en custom.css (no en pdp-maha.css) porque este archivo se carga
   globalmente desde layout/theme.liquid; pdp-maha.css solo se enqueue desde
   sections/main-product.liquid y 3 secciones mas del PDP, así que nunca
   llega a /cart ni a la mayoría de las aperturas del cart-drawer.
   Tokens propios (--cart-*) para no depender de las variables --pdp-* de
   pdp-maha.css, que no existen en las páginas donde este archivo sí corre.
   Selectores tomados del HTML real leído de la API (ver reporte de la tarea):
   .cart-item, .cart-item__title, .cart-item__option-value, .cart-item__prices,
   .cart-item__media, .cart-quantity/.quantity__button, .hulkapps-reminder/
   .cart-drawer__next-tier/.cart-item__mayoreo-next, .free-shipping-goal,
   .cart__addon/.cart-accordion-details/.accordion-details__summary,
   .totals__subtotal-value, .tax-note, input[name="attributes[gift-wrapping]"].
   Para revertir: borrar desde este comentario hasta END CART PREMIUM.
   ============================================================================ */
:root {
  --cart-ink: #141414;
  --cart-ink-soft: #4a4a52;
  --cart-white: #fff;
  --cart-paper: #f6f6f7;
  --cart-line: #e6e6e8;
  --cart-muted: #8b8b91;
  --cart-border-soft: #dbe1ee;
  --cart-border-mid: #cfd6e6;
  --cart-amber: #f5a623;
  --cart-green: #00a650;
  --cart-shadow-card: 0 4px 16px rgba(20, 20, 20, .05);
}

/* ---- 1. Items del carrito: aire y separador sutil (reemplaza el borde
   default rgb(var(--color-border)) por --cart-line, mas suave) ---- */
.cart-item {
  padding-block: 20px;
  border-block-end: 1px solid var(--cart-line);
}
.cart tbody tr,
.cart tbody tr:last-child {
  border-color: var(--cart-line);
}
#CartDrawer .cart-item {
  padding-block: 18px;
}

/* ---- 2. Tipografia y jerarquia ---- */
.cart-item__title {
  font-weight: 600;
  font-size: 1.05em;
  text-decoration: none;
  color: var(--cart-ink);
}
.cart-item__title:hover {
  text-decoration: none;
}
.cart-item__option-value {
  color: var(--cart-ink-soft) !important;
  font-size: 0.85em;
}
.cart-item__prices .price {
  font-weight: 700;
  color: var(--cart-ink);
}

/* Precio total (resumen de orden) mas prominente que el precio unitario de
   cada linea -- mismas clases en drawer (.cart-drawer__subtotal-row) y en
   la pagina /cart (.cart__footer--subtotal). */
.totals__subtotal-value {
  font-size: 1.35em;
  font-weight: 700;
  color: var(--cart-ink);
}
.totals__subtotal {
  color: var(--cart-ink-soft);
  font-weight: 500;
}

/* ---- 3. Mensaje de upsell/mayoreo: caja de alerta con acento ambar,
   no un banner de oferta -- fondo casi blanco, borde izquierdo unico ---- */
.hulkapps-reminder,
.cart-drawer__next-tier,
.cart-item__mayoreo-next {
  border-left: 3px solid var(--cart-amber);
  background: #fdf8ee;
  padding: 10px 14px;
  border-radius: 0 8px 8px 0;
  font-size: 0.85em;
  color: var(--cart-ink-soft);
  margin-block: 10px;
}

/* ---- 4. Imagen del producto: radio + sombra sutil ---- */
.cart-item__media {
  border-radius: 10px;
  box-shadow: var(--cart-shadow-card);
  overflow: hidden;
}

/* ---- 5. Stepper de cantidad: pill con borde, sin fondo gris plano.
   Escopado a .cart-quantity/.cart-item para no tocar el stepper del PDP
   (card-product-v2 y el buybox tambien usan .quantity__button). ---- */
.cart-item .quantity,
.cart-quantity {
  border: 1px solid var(--cart-border-soft);
  border-radius: 999px;
  background: var(--cart-white);
  overflow: hidden;
}
.cart-item .quantity__button,
.cart-quantity .quantity__button {
  background: transparent;
  border: none;
  color: var(--cart-ink);
  transition: background-color 200ms ease, color 200ms ease;
}
.cart-item .quantity__button:hover,
.cart-quantity .quantity__button:hover {
  background-color: var(--cart-ink);
  color: var(--cart-white);
}
.cart-item .quantity__input,
.cart-quantity .quantity__input {
  text-align: center;
  font-weight: 600;
  background: transparent;
  border-inline: 1px solid var(--cart-border-soft);
}

/* ---- 6. "Eres elegible para envío gratis": caja premium con check +
   barra de progreso redondeada con degradado suave ---- */
.free-shipping-goal {
  background: #f2faf4;
  border: 1px solid #d9efe0;
  border-radius: 12px;
  padding: 14px 16px;
}
.free-shipping-goal__label--default,
.free-shipping-goal__label--success {
  font-size: 0.88em;
  color: var(--cart-ink-soft);
}
.free-shipping-goal--done {
  background: #eefaf1;
  border-color: #bfe8cc;
}
.free-shipping-goal--done .free-shipping-goal__label--success {
  color: var(--cart-green);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.free-shipping-goal--done .free-shipping-goal__label--success::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--cart-green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / 11px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.free-shipping-goal .progress-bar {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: #dcece0;
  overflow: hidden;
  margin-block-start: 8px;
}
.free-shipping-goal .progress-bar::before {
  background: linear-gradient(90deg, var(--cart-green), #3fbf6a);
  border-radius: 999px;
}

/* ---- 7. Accordions "Nota de pedido" / "Envío estimado": chevron elegante,
   border-radius y transicion suave al abrir. Mismas clases en drawer y
   pagina /cart (.cart__addon en main-cart, .cart-accordion-details en ambos).
   !important SI es necesario aqui: verificado en vivo que assets/cart.css
   (cargado por cart-drawer.liquid/main-cart.liquid, aparece DESPUES de
   custom.css en el <head>) define ".cart__addon { border-radius:
   var(--buttons-radius) }" con la MISMA especificidad (una sola clase) --
   sin !important esa regla gana por orden de cascada y el radio quedaba en
   --buttons-radius (10rem, pill) en vez del 10px pedido. Confirmado con
   getComputedStyle antes y despues de agregar !important. ---- */
.cart__addon,
.cart-accordion-details {
  border: 1px solid var(--cart-border-soft) !important;
  border-radius: 10px !important;
  background-color: var(--cart-paper) !important;
  transition: border-radius 200ms ease, background-color 200ms ease;
}
.cart__addon + .cart__addon,
.cart-accordion-details + .cart-accordion-details {
  margin-block-start: 10px;
}
.accordion-details__summary {
  font-weight: 600;
  color: var(--cart-ink);
  cursor: pointer;
}
.accordion-details__summary svg,
.accordion-details__summary img {
  transition: transform 250ms ease;
}
details[open] > .accordion-details__summary svg,
details[open] > .accordion-details__summary img {
  transform: rotate(180deg);
}
.accordion-details__content {
  animation: cartPremiumAccordionIn 220ms ease;
}
@keyframes cartPremiumAccordionIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- 8. Nota de impuestos: gris muy suave, texto pequeño ---- */
.tax-note {
  color: var(--cart-muted);
  font-size: 0.78em;
}

/* ---- 9. Botón "Verificar" / checkout: el tema ya define .btn--primary
   (color, radio via --buttons-radius) -- se respeta, solo se afina la
   transicion dentro del carrito para que se sienta consistente con el resto. ---- */
.cart__footer--buttons .btn--primary,
.cart-drawer__checkout-btn {
  transition: background-color 200ms ease, opacity 200ms ease;
}

/* ---- 10. Checkbox de envoltura: reemplazo visual 100% CSS
   (appearance:none + check inline en ::before al marcarse) ---- */
input[name="attributes[gift-wrapping]"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--cart-border-mid);
  border-radius: 5px;
  background: var(--cart-white);
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}
input[name="attributes[gift-wrapping]"]::before {
  content: "";
  width: 12px;
  height: 12px;
  transform: scale(0);
  transition: transform 120ms ease-in-out;
  background-color: var(--cart-white);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}
input[name="attributes[gift-wrapping]"]:checked {
  background-color: var(--cart-ink);
  border-color: var(--cart-ink);
}
input[name="attributes[gift-wrapping]"]:checked::before {
  transform: scale(1);
}
label[for^="GiftWrap-"] {
  font-size: 0.92em;
  line-height: 1.4;
  color: var(--cart-ink);
}

/* ---- 11. Responsivo (<749px): imagen mas chica, precio+stepper en la
   misma fila, upsell debajo del nombre, sidebar a bloque completo (ya lo
   hace el layout base al perder el flex-basis de escritorio). ---- */
@media (max-width: 749px) {
  .cart-item__media {
    flex: 0 0 7.5rem;
  }
  .cart-item__action {
    flex-wrap: nowrap;
    align-items: center;
  }
  .hulkapps-reminder,
  .cart-drawer__next-tier,
  .cart-item__mayoreo-next {
    order: -1;
    margin-block: 6px 10px;
  }
}

/* END CART PREMIUM ========================================================= */

/* ============================================================================
   MAHA cart-fase2 — 2026-08-04
   Continúa el bloque "CART PREMIUM" de arriba con lo que ese pase no cubrió.
   Solo CSS, no toca Liquid (salvo el texto de carrito vacío, que va en
   locales/es.json) ni JSON.

   Nota de investigación (para quien revierta esto más adelante): el encargo
   original describía un "banner Ahorraste $X ¡comprando por mayoreo!" — ese
   texto literal no existe en ningún .liquid/.js del tema. Los dos elementos
   reales con el mismo problema (aparecen/desaparecen vía el atributo HTML
   `hidden`, con `display:none !important` forzado desde el <style> propio de
   la sección) son:
     1. .cart__footer--mayoreo-row / .cart__footer--mayoreo-note — la fila
        "Total estimado con mayoreo" del sidebar de resumen (main-cart.liquid).
     2. [data-mayoreo-next-tier] (.cart-item__mayoreo-next en /cart,
        .cart-drawer__next-tier en el drawer) — el aviso "Agrega X piezas más
        y obtén Y%" dentro de cada renglón de producto (cart-mayoreo.js).
   Se corrigen los dos, porque cualquiera de los dos explica el síntoma
   descrito ("el producto sube/baja de golpe"). No se tocó .hulkapps-reminder
   (mismo grupo visual en el CSS de arriba): es un elemento inyectado por una
   app externa, no del tema, y no se pudo confirmar que use el mismo mecanismo
   de `hidden` — modificar su comportamiento sin esa certeza no era seguro.
   ============================================================================ */

/* ---- 1. Sin layout shift: nunca display:none. El `body` al inicio del
   selector solo sube la especificidad para ganarle al `[hidden] { display:
   none !important }` que ya definen main-cart.liquid y cart-drawer.liquid
   (mismo peso de selector si no); así no depende del orden de carga entre
   ese <style> de sección y este archivo. ---- */
body .cart__footer--mayoreo-row[hidden] {
  display: grid !important;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
body .cart__footer--mayoreo-note[hidden] {
  display: block !important;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
body [data-mayoreo-next-tier][hidden] {
  display: block !important;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.cart__footer--mayoreo-row,
.cart__footer--mayoreo-note,
[data-mayoreo-next-tier] {
  transition: opacity 200ms ease;
}
/* Mismo bug que la nota de mayoreo del sidebar: cart-mayoreo.js vacía
   el texto por completo mientras está oculto (el.textContent = ''), y un
   <p> genuinamente vacío no genera ninguna línea real -- medido en vivo:
   20px vacío (solo el padding/borde del bloque CART PREMIUM de arriba) vs
   60px con un mensaje real de una línea a este ancho (390px), 40px de
   salto. min-height fija el alto en los dos estados. */
[data-mayoreo-next-tier] {
  min-height: 6rem;
}
/* Tamaño configurable (--cart-savings-font-size, setting del editor en
   sections/main-cart.liquid) SOLO para /cart -- la regla compartida de más
   arriba (".hulkapps-reminder, .cart-drawer__next-tier,
   .cart-item__mayoreo-next { font-size: 0.85em; ... }") también alcanza al
   aviso de una app externa (.hulkapps-reminder, no se toca sin certeza) y
   al del drawer (.cart-drawer__next-tier, sección aparte con su propio
   schema, fuera de alcance de esta tarea) -- por eso el override va scoped
   solo a .cart-item__mayoreo-next, con "body" al inicio para ganarle en
   especificidad a esa regla compartida sin usar !important. El valor de
   var(...) es el fallback: mismo 0.85em de antes si no se toca el editor. */
body .cart-item__mayoreo-next {
  font-size: var(--cart-savings-font-size, 0.85em);
}

/* ---- 2. "Total estimado con mayoreo": caja de ahorro premium, misma
   estética pálida que la tarjeta de envío gratis (.free-shipping-goal--done
   más arriba). El padding/border/background se aplican SIEMPRE (no solo
   cuando está visible) a propósito: así la caja reserva su alto real tanto
   oculta como visible, sin depender de calcular un min-height a ciegas.
   Bug real detectado en esta tarea (2026-08-04, "card verde demasiado
   grande"): el min-height de la regla siguiente decía "23rem" (368px) en
   vez de "2.3rem" -- con eso la caja media casi media pantalla en vez de
   una sola línea de resumen. Se corrige el valor Y se reduce el tamaño del
   valor grande (regla más abajo, de 1.4em/800 a 1.375rem/700) para que la
   caja quede proporcional al resto del sidebar. overflow:hidden agregado
   como red de seguridad para que el número nunca se salga del borde
   redondeado si algún monto es más largo de lo esperado. */
.cart__footer--mayoreo-row.cart__footer--mayoreo-total {
  background: #f2faf4;
  border: 1px solid #d9efe0;
  border-radius: 8px;
  padding: 10px 16px;
  color: #15803d;
  overflow: hidden;
  /* Alto de una sola línea (valor a 1.375rem + line-height propio) más el
     padding de arriba -- reemplaza el "23rem" (bug, ver nota de arriba).
     Estimado por cálculo, no medido en vivo (sin navegador en esta sesión):
     recomendable confirmar visualmente y ajustar si sobra o falta espacio. */
  min-height: 2.25rem;
}
/* "El total con mayoreo" en verde y bold, pero YA NO tan grande como antes
   (bug de la tarea: desbordaba/llenaba el card). 1.375rem/700 en vez de
   1.4em/800 -- valores absolutos (no relativos a .h4) para que el tamaño no
   dependa de --font-heading-scale del tema. */
/* font-size/font-weight ahora vienen de --cart-total-price-size/
   --cart-total-price-weight (settings del editor "Carrito — Tipografía" en
   sections/main-cart.liquid, variables puestas en <main-cart> style=""). El
   valor de var(...) es el fallback: mismo 1.375rem/700 de antes, así que
   sin tocar el editor el resultado es idéntico. */
.cart__footer--mayoreo-total [data-cart-mayoreo-total-value] {
  min-width: 4em;
  text-align: right;
  font-size: var(--cart-total-price-size, 1.375rem);
  font-weight: var(--cart-total-price-weight, 700);
  color: #15803d;
  white-space: nowrap;
  word-break: break-word;
}
/* Label ("Total estimado con mayoreo") explícitamente más chico que el
   valor -- antes heredaba el tamaño completo de .h4 + font-weight:700 del
   <style> de main-cart.liquid, compitiendo visualmente con el precio en vez
   de quedar como texto de apoyo. font-size ahora viene de
   --cart-total-label-size (mismo setting del editor).
   overflow-wrap/word-break:normal (regla ya existente, conservada): el
   sidebar real es angosto (~380px medido en vivo a 1366px de viewport, no
   un ancho de página completa) -- con la columna del label reducida por
   minmax(0, 1fr) del <style> original, el texto sin esto llegaba a
   partirse A MITAD DE PALABRA ("estim/ado"). */
.cart__footer--mayoreo-row.cart__footer--mayoreo-total > span:first-child {
  font-size: var(--cart-total-label-size, 0.9375rem);
  font-weight: 600;
  line-height: 1.3;
  color: #15803d;
  overflow-wrap: normal;
  word-break: normal;
}
/* La nota es un <p> que cart-mayoreo.js vacía por completo
   (textContent = '') mientras está oculta -- medido en vivo: un bloque
   verdaderamente vacío no genera ninguna línea y su alto real es 0px pese a
   line-height:2rem (.text-sm-extra). Con min-height:2rem (una sola línea) el
   salto bajó de 40px a 20px, no a 0: el texto real ("El descuento definitivo
   se aplicará y confirmará en checkout.") envuelve a 2 líneas dentro del
   ancho real de la columna, medido en vivo incluso en escritorio (1366px).
   4rem = 2 líneas de 2rem, coincide exacto con los 40px medidos con el
   contenido real. */
.cart__footer--mayoreo-note {
  min-height: 4rem;
}

/* ---- 3. Stepper: pieza que le faltaba al pase anterior. .quantity__input
   trae su PROPIO borde vía box-shadow con border-radius:var(--inputs-radius)
   (10rem, un pill completo) heredado de assets/theme.css. Con overflow:
   hidden ya puesto en el wrapper (bloque de arriba) el recorte del wrapper
   evita que algo se salga del pill exterior, pero el input seguía intentando
   dibujar SU PROPIA esquina redondeada justo donde el botón absolute (un
   rectángulo sin radio propio) se monta encima -- ahí es donde se veían los
   fragmentos blancos. Se anula el radio propio del input: el radio final
   ahora lo da exclusivamente el wrapper. ---- */
.cart-item .quantity__input,
.cart-quantity .quantity__input {
  border-radius: 0;
}

/* ---- 4. Botón Verificar/checkout = estilos EXACTOS del botón "Agregar al
   carrito" del PDP (.product-form__submit, definido en assets/pdp-maha.css
   dentro de .product-template). pdp-maha.css NO se carga en /cart ni en el
   drawer (solo lo hacen main-product.liquid y 3 secciones más del PDP,
   verificado leyendo las secciones), así que las variables --pdp-* no
   existen aquí -- se copian los valores literales, que son los mismos que
   --pdp-blue/--pdp-blue-txt/--pdp-shadow-btn. El selector por atributo
   [name="checkout"] alcanza tanto al botón de /cart (.btn.btn--primary.w-full)
   como al del drawer (.btn.btn--primary.cart-drawer__checkout-btn) sin
   depender de esas clases extra. Se retira el barrido ::before de
   .btn--primary (animación que SÍ tiene el checkout y que "Agregar al
   carrito" no tiene) solo para este botón -- el resto de .btn--primary del
   sitio lo conserva intacto, esto no es un cambio global. */
button[name="checkout"].btn--primary {
  background: #3682f8;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 15px;
  height: auto;
  line-height: normal;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(54, 130, 248, .28);
  transition: background-color 200ms ease;
}
button[name="checkout"].btn--primary:hover {
  background: #1f5fd8;
}
button[name="checkout"].btn--primary::before {
  content: none;
}

/* ---- 5. Precio tachado (precio de oferta original) dentro del carrito.
   .price__sale es una clase compartida con PDP/tarjetas de producto -- se
   escopa a .cart-item para no tocar esos otros contextos, que no forman
   parte de esta tarea. ---- */
.cart-item .price__sale {
  color: rgba(var(--color-foreground), .4);
  font-size: 0.92em;
}

/* ---- 6. Nombre del producto: el pase anterior quitó el subrayado también
   en hover (:hover { text-decoration: none }) -- esta fase pide lo
   contrario, sin subrayado por defecto pero CON subrayado al hover. ---- */
.cart-item__title:hover {
  text-decoration: underline;
}

/* ---- 7. Imagen del producto: contain en vez de cover, para mostrar la
   pieza completa sin recortarla -- complementa el radio ya agregado arriba. */
.cart-item__media img {
  object-fit: contain;
}

/* ---- 8. Sidebar de resumen: tarjeta con sombra sutil y padding generoso.
   .cart__footer es la columna de resumen real (contiene envío gratis,
   subtotal, fila de mayoreo, botones y accordions) -- confirmado leyendo la
   estructura de main-cart.liquid. */
.cart__footer {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 24px;
}

/* END CART FASE2 ============================================================= */

/* ============================================================================
   MAHA botones-home-atc-color -- 2026-08-06 (fix hover 2026-08-06)
   Los 4 botones del home (seccion buttons_with_icon_Jdzc8D, sections/
   buttons-with-icon.liquid, clases reales ".button-list"/".button-item__inner")
   deben verse y comportarse como el boton "Agregar al carrito" del PDP
   (.product-form__submit, definido en assets/pdp-maha.css via --pdp-blue
   #3682f8 / --pdp-blue-txt #1f5fd8 / --pdp-shadow-btn).

   pdp-maha.css NO se carga en el home -- verificado leyendo que solo lo
   enqueuean sections/main-product.liquid, sections/pdp-porque-maha.liquid,
   sections/pdp-whatsapp.liquid y snippets/shipzip-pdp.liquid, y confirmado
   en vivo (la lista real de <link rel="stylesheet"> del home no incluye
   pdp-maha.css). Por eso los 3 pases anteriores de "quitar animacion" sobre
   pdp-maha.css nunca tuvieron efecto visible ahi. Mismo patron ya resuelto
   antes para el boton de Verificar/checkout del carrito (ver mas arriba,
   bloque "4. Boton Verificar/checkout"): se copian aqui los valores
   literales en vez de var(--pdp-blue), porque esa variable solo existe
   dentro de .product-template y el home no tiene esa clase en el <body>.

   FIX 2026-08-06 (highlight en la curva al hacer hover): causa real
   diagnosticada en vivo (Playwright, computed style antes/durante hover):
   el navegador reporta "outline: rgb(255,255,255) none 3px" en reposo --
   outline-style es "none" asi que Chromium no lo pinta, pero es el foco
   nativo del boton (heredado del <button>/<a> base del tema) y en
   navegadores/dispositivos que SI activan un outline o un
   -webkit-tap-highlight-color por defecto al enfocar/tocar, ese anillo NO
   sigue el border-radius:999px del boton y sobresale justo en la curva --
   de ahi el "contorno iluminado" reportado. Se neutraliza con
   outline:none explicito (no solo heredado) y -webkit-tap-highlight-color:
   transparent (equivalente para tap en moviles, que Chromium desktop no
   reproduce y por eso no se veia en las capturas anteriores). Ademas se
   iguala el hover al ATC real (oscurece a #1f5fd8 con sombra a juego,
   transition suave solo en background/box-shadow) en vez de mantenerlo
   plano como en el pase anterior -- pedido explicito de esta tarea.
   ============================================================================ */
.button-list .button-item__inner {
  background: #3682f8 !important;
  color: #fff !important;
  border: none !important;
  outline: none !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 18px rgba(54, 130, 248, .28) !important;
  animation: none !important;
  transition: background .2s ease, box-shadow .2s ease !important;
  transform: none !important;
  background-image: none !important;
  -webkit-tap-highlight-color: transparent;
}
.button-list .button-item__inner:hover,
.button-list .button-item__inner:focus {
  background: #1f5fd8 !important;
  box-shadow: 0 8px 18px rgba(31, 95, 216, .28) !important;
  background-image: none !important;
  outline: none !important;
  transform: none !important;
}
.button-list .button-item__inner::before,
.button-list .button-item__inner::after {
  content: none !important;
  display: none !important;
}
/* END BOTONES HOME ATC COLOR ================================================ */

/* ============================================================================
   MAHA — Botón flotante de WhatsApp (.wa-float) al lado IZQUIERDO en móvil y
   tablet (<=990px). Escritorio (>990px) queda EXACTAMENTE como estaba: la regla
   base de custom.css:1592 (right:24px) y la de tablet 768-1023.98px siguen
   mandando ahí; este bloque no entra en ese rango.

   Se anula 'right' con 'auto' porque las reglas previas (custom.css:1662 y
   :1678) siguen declarando right:22px/24px; sin el auto, un elemento fixed con
   left Y right definidos se estira en vez de anclarse a la izquierda.

   flex-direction: row-reverse es OBLIGATORIO aquí, no es cosmético. El orden en
   el DOM (sections/header.liquid:355-364) es tooltip -> botón, pensado para el
   anclaje derecho: así "Contáctanos" se despliega hacia el interior de la
   pantalla. Al mover el contenedor a la izquierda sin invertir el orden, el
   tooltip quedaría pegado al borde izquierdo (saliéndose del viewport, su ancho
   es variable) y el círculo verde acabaría desplazado ~110px hacia adentro, o
   sea NO en la esquina inferior izquierda que es lo que se pidió. Con
   row-reverse el botón queda pegado al borde izquierdo y el tooltip vuelve a
   abrirse hacia adentro.

   "Contáctanos" no existe como botón flotante independiente: es el tooltip
   .wa-float__tooltip (custom.css:1631), hermano flex dentro del mismo
   .wa-float, así que viaja con el botón por construcción.

   No se toca bottom, z-index, tamaño, color, sombra ni el ajuste de
   --wa-float-sticky-offset (custom.css:1704): ese bloque solo escribe 'bottom'.
   Se respeta el corte en 990px pedido, distinto del 1023.98px que usan las
   reglas de tamaño de arriba: entre 990.01 y 1023.98px el botón conserva su
   posición derecha y su tamaño de tablet, sin cambios. */
@media screen and (max-width: 990px) {
  .wa-float {
    right: auto;
    left: 24px;
    flex-direction: row-reverse;
  }
}
/* Móvil <=767.98px conserva su separación original del borde (era right:22px). */
@media screen and (max-width: 767.98px) {
  .wa-float {
    left: 22px;
  }
}
/* END WA FLOAT IZQUIERDA MOVIL/TABLET ======================================= */
/* ============================================================================
   MAHA - Top bar izquierda: 3 enlaces en UNA sola fila en laptop.
   "Mis listas de resurtidos" (158.1px @15px) sustituyo a "WhatsApp", que era
   mucho mas corto, y la fila paso a partirse en dos.

   Causa real: theme.css:6829 fija .topbar__inner a grid-template-columns:
   1fr 1fr 1fr desde 1024px. La columna izquierda recibe SIEMPRE un tercio del
   ancho, sin importar su contenido, y el <ul> trae la utilidad Tailwind
   .flex-wrap. Ancho disponible = (viewport - 2*--page-padding - 40) / 3.

   Medido con la fuente real del sitio (Instrument Sans 500, base 1.5rem=15px):
   textos 158.1 + 117.3 + 84.1 = 359.5px, gap 2rem=20px x2  ->  399.5px.
       1024px (padding 16px) -> disponible 317.3px   NO cabe
       1200px (padding 50px) -> disponible 353.3px   NO cabe
       1280px (padding 50px) -> disponible 380.0px   NO cabe
       1337px (padding 50px) -> disponible 400.0px   cabe (verificado a 1366px)
   Por eso el corte superior es 1336.98px y no 1280px: entre 1281 y 1336 seguia
   partiendose. Desde 1337px no entra ninguna regla de aqui: escritorio queda
   con su tipografia y su gap originales.

   No se toca el HTML: la utilidad .flex-wrap del <ul> (especificidad 0,1,0) se
   neutraliza con .topbar__left .topbar__menu (0,2,0). Tampoco se toca el grid,
   para que la frase central siga centrada respecto de la pagina. Todo queda
   acotado a .topbar__left: la columna derecha (pais/moneda y redes) no cambia.

   Debajo de 1024px (breakpoint lg del tema) la columna ya es display:none por
   la clase "hidden lg:flex", asi que en movil y tablet esto es inerte.
   ============================================================================ */
@media screen and (min-width: 990px) and (max-width: 1199.98px) {
  /* Peor caso 1024px: 317.3px disponibles. 12px + gap 10px = 308px. */
  .topbar__left .topbar__menu {
    flex-wrap: nowrap;
    --topbar-menu-gap: 1rem;
  }
  .topbar__left .topbar__menu-item > a {
    font-size: 1.2rem;
    white-space: nowrap;
  }
}
@media screen and (min-width: 1200px) and (max-width: 1336.98px) {
  /* Peor caso 1200px: 353.3px disponibles. 13.5px + gap 10px = 344px. */
  .topbar__left .topbar__menu {
    flex-wrap: nowrap;
    --topbar-menu-gap: 1rem;
  }
  .topbar__left .topbar__menu-item > a {
    font-size: 1.35rem;
    white-space: nowrap;
  }
}
/* END TOPBAR NOWRAP LAPTOP =================================================== */

/* G1 — sticky ATC close button */
.sticky-atc__close-btn {
  position: absolute;
  top: -10px;
  right: 3px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: currentColor;
  opacity: 0.55;
  padding: 4px;
  line-height: 0;
  z-index: 1;
}

.sticky-atc__close-btn:hover { opacity: 0.9; }
.sticky-atc-bar.sticky-atc-bar--dismissed { display: none !important; }

/* O1 — Ocultar encabezado y buscador repetidos en la pagina de busqueda ======= */
body.search-template .template-search__header > h1,
body.search-template .template-search__header > .template-search__search {
  display: none !important;
}

/* U1b - SKU encima de puntuacion: solo coleccion + solo movil */
@media (max-width: 749px) {
  .collection-template .product-card-v2__rating-row {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    /* RESENAS-PEGADAS (2026-08-18): column-gap 4px -> 0. Esta regla tiene mas
       especificidad (0,2,0) que la base de component-card-product-v2.css (0,1,0),
       asi que era ELLA la que fijaba el hueco en movil de coleccion. El row-gap
       de 2px se conserva: separa el renglon del SKU (order:-1, ancho completo)
       del renglon de estrellas. Los 3px finales los pone el margin-left de
       .product-card-v2__reviews, igual que en tableta y escritorio. */
    gap: 2px 0;
  }
  .collection-template .product-card-v2__sku {
    order: -1;
    width: 100%;
    flex-basis: 100%;
    margin-left: 0;
  }
  .collection-template .product-card-v2__stars   { order: 0; }
  .collection-template .product-card-v2__reviews { order: 1; }
}

/* V1 - texto corto en trigger de descuento: coleccion + movil unicamente.
   El body lleva '{{ request.page_type }}-template' (layout/theme.liquid), asi
   que .collection-template solo existe en paginas de coleccion. */
@media (max-width: 749px) {
  .collection-template .product-card-v2__vol-txt {
    font-size: 0;
    line-height: 0;
  }
  .collection-template .product-card-v2__vol-txt::before {
    content: "Ver descuento";
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.2;
    color: inherit;
  }
}

/* W3 — SKU no seleccionable: evita cursor de seleccion iOS al copiar */
.product-card-v2__sku {
  -webkit-user-select: none;
  user-select: none;
}

/* Y4 — toast de copia SKU: azul rectangular con piquito hacia abajo */
.sku-copied-toast {
  position: fixed;
  transform: translateX(-50%);
  background: #3682F8;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 6px;
  opacity: 1;
  transition: opacity 0.35s ease;
  pointer-events: none;
  white-space: nowrap;
  z-index: 99999;
}
.sku-copied-toast::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #3682F8;
}
.sku-copied-toast--out {
  opacity: 0;
}

/* R1 — boton resurtidos: icono + texto adaptado mobile.
   OJO: el brief pedia body.index / body.template-index / body.collection /
   body.template-collection. NINGUNA de esas 4 clases existe en este tema:
   layout/theme.liquid:120 escribe request.page_type seguido de "-template", asi que
   las clases reales del <body> son .index-template y .collection-template. Se usan esas;
   con las del brief la regla habria sido CSS muerto. */
.resurtidos-icon {
  display: none;
  vertical-align: middle;
  margin-right: 4px;
  flex-shrink: 0;
}
.resurtidos-txt-short {
  display: none;
}

@media (max-width: 990px) {
  .resurtidos-icon {
    display: none;
  }
  /* Pagina home (1 columna, tarjeta ancha): muestra texto completo */
  body.index-template .resurtidos-txt-full {
    display: inline;
  }
  body.index-template .resurtidos-txt-short {
    display: none;
  }
  /* Coleccion (2 columnas, tarjeta angosta): muestra texto corto */
  body.collection-template .resurtidos-txt-full {
    display: none;
  }
  body.collection-template .resurtidos-txt-short {
    display: inline;
  }
  /* R1-C — padding reducido para que el texto no se trunque */
  .wishlist-add__button.list_type {
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: 12px !important;
    white-space: nowrap;
    overflow: visible;
  }
}

/* Y1 — suprimir highlight azul de tap iOS en boton copiar SKU */
.product-card-v2__sku,
.product-card-v2__sku * {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

/* S1 — grid coleccion simetrico en movil: padding exterior = gap interior */
@media (max-width: 749px) {
  /* Reduce padding exterior del contenedor de seccion */
  .collection-template .collection.page-width,
  .collection-template .collection.page-width--fixed {
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-inline: 12px !important;
    --page-padding: 12px;
  }
  /* Iguala el gap entre columnas al padding exterior */
  .collection-template #ProductsList.f-grid,
  .collection-template .f-grid {
    column-gap: 12px !important;
    gap: 12px !important;
    --f-column-gap-mobile: 12px;
  }
}

/* ET1 — badges de producto: etiquetas en tarjeta de coleccion */
.f-product-card__media,
.product-card__media,
.card__media,
[class*="product-card"] .media {
  position: relative;
}
.et1-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 4px;
  pointer-events: none;
  align-items: flex-start;
  width: fit-content;
}
.et1-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: #fff;
}
.et1-badge--oferta             { background: #e53e3e; }
.et1-badge--agotado            { background: #718096; }
.et1-badge--mejor-vendido      { background: #3182ce; }
.et1-badge--nuevo              { background: #38a169; }
.et1-badge--vidrio-templado    { background: #0694a2; }
.et1-badge--alta-resistencia   { background: #dd6b20; }
.et1-badge--porcelana-vitrificada { background: #805ad5; }

@media (max-width: 749px) {
  .et1-badges { top: 6px; left: 6px; gap: 3px; }
  .et1-badge  { font-size: 10px; padding: 3px 8px; }
}

/* H3 — banner coleccion: imagen horizontal + descripcion compacta */

/* A) Limitar altura de la imagen del banner para formato horizontal */
.collection-hero .hero__media,
.collection-hero__media,
.collection-hero [class*="media"]:not(.icon) {
  max-height: 380px !important;
  min-height: 200px;
  overflow: hidden;
}
.collection-hero .hero__media img,
.collection-hero__media img,
.collection-hero [class*="media"]:not(.icon) img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* B) TYPO-AUDIT — Truncar descripcion del banner a 3 lineas.
   Correccion de selector: '.collection-hero__description .rte' era CSS MUERTO porque la
   clase 'rte' va en el MISMO elemento que 'collection-hero__description'
   (main-collection-banner.liquid:138), no en un descendiente.
   3 lineas = 4.8em -> body_font_size 15px x --font-body-line-height 1.6 = 24px por linea.
   El clamp se repite sobre el <p> porque collection.description se imprime dentro de un
   <motion-element class="block"> (main-collection-banner.liquid:139-145): con ese wrapper
   de bloque en medio, -webkit-line-clamp sobre el contenedor no recorta y el corte real lo
   daba solo max-height, sin puntos suspensivos. */
.collection-hero__description,
.collection-hero .rte,
.collection-hero__text .rte {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  max-height: 4.8em;
}
.collection-hero__description > .block > p,
.collection-hero__description > p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin-bottom: 0;
}
/* Permitir solo el primer parrafo en el banner; ocultar listas y parrafos siguientes */
.collection-hero .rte ul,
.collection-hero .rte ol,
.collection-hero .rte p ~ p {
  display: none !important;
}

@media (max-width: 749px) {
  .collection-hero .hero__media,
  .collection-hero__media {
    max-height: 240px !important;
    min-height: 160px;
  }
}

/* === H5A 2026-08-11 === */

/* H5A — subcategory label fix (ampliado). Reemplaza al bloque H4-VISUAL/H4A.
   Diagnostico A1: la clase collection-list-slider se emite SIEMPRE que la seccion
   subcollection se renderiza (sections/subcollection.liquid:77, sin condicional);
   lo condicional es la seccion entera, envuelta en {% if current_items != blank %}.
   NO existe clase alternativa: 'collection-list-grid' tiene 0 ocurrencias en los 457
   archivos del tema, asi que ese tercer selector del plan se omite por ser CSS muerto.
   La clase collection-list-slider la comparten dos tipos de seccion (subcollection y
   collection-list-slider), por lo que el segundo selector cubre ambas rutas.
   text-align:center SI se incluye aqui (a diferencia de H4A) por pedido explicito. */
.collection-template .collection-card__title,
.collection-list-slider .collection-card__title {
  font-size: 14px !important;
  line-height: 1.4 !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  text-align: center !important;
}
/* === /H5A === */

/* OV1 — ocultar badge nativo FoxTheme, sustituido por sistema ET1 */
.product-card-v2 .f-badge--sale,
.product-card .f-badge--sale,
[class*="product-card"] .f-badge--sale {
  display: none !important;
}
/* /OV1 */

/* === TP1 2026-08-11 === */

/* TP1 — neutraliza el font-size INLINE pegado dentro de collection.description.
   Causa raiz (diagnostico TYPO-PLATOS): la descripcion de la coleccion 'platos' trae
   <span style="font-size: 0.875rem;"> envolviendo su primer parrafo. Como el tema define
   en html un font-size de 62.5% (css-variables.liquid:361), la base del rem es 10px, y ese
   0.875rem son 8.75px contra los 15px normales (--font-body-size). De ahi que SOLO esa
   categoria se vea con tipografia distinta en el banner.
   No es un problema de plantilla ni de CSS del tema: las 391 colecciones usan
   templates/collection.json y el <body> no lleva el handle, asi que es imposible que una
   regla CSS afecte a una sola coleccion. Tampoco existe ninguna regla sobre
   .collection-hero__title en todo custom.css.
   Afecta a 4 colecciones, todas con el mismo 0.875rem: platos, exprimidores,
   peliculas-autoadheribles, bowls-platos-hondos-melamina.
   Esto es una MITIGACION en el tema. El arreglo de fondo es limpiar el HTML de la
   descripcion en el admin (dato de catalogo, requiere autorizacion de Guillermo).
   Se acota a los dos lugares donde se imprime collection.description:
   el banner (.collection-hero__description) y la seccion Sobre (.read-more__content). */
.collection-hero__description [style*="font-size"],
.read-more__content [style*="font-size"] {
  font-size: inherit !important;
}
/* === /TP1 === */

/* WISHLIST-BTN — igualar altura botones Crear Lista / Ir A Mis Listas */
.inner_list_create .list-create,
.inner_list_create .wishlist_page_btn {
  min-height: 48px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}
/* /WISHLIST-BTN */

/* COLLECTION-BANNER-TITLE (2026-08-12) — solo titulo en el banner de coleccion */
.collection-hero__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
}
.collection-hero__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.collection-hero__title {
  font-weight: 800;
  line-height: 1.1;
  margin: 0;
}
/* /COLLECTION-BANNER-TITLE */

/* COLLECTION-BANNER-PREMIUM (2026-08-12) — cuadro de titulo del banner.
   Raiz del tema al 62.5% => 1rem = 10px. Los rem de abajo estan reescalados
   para dar los px buscados: titulo 35-80px, eyebrow 10.5px, gaps 12px.
   Color de marca #21294f fijo en eyebrow y lineas (BANNER-COLOR-FIX), ya no
   hereda el esquema de color por coleccion del editor. */
.cbp-eyebrow {
  display: block;
  font-size: 1.05rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #21294f !important;
  opacity: 1;
  margin-bottom: 1.6rem;
}
.collection-hero__title {
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 1;
  margin: 0;
}
.collection-hero__title::before,
.collection-hero__title::after {
  content: "";
  display: block;
  width: 40%;
  height: 1px;
  margin-inline: auto;
  background: #21294f;
  opacity: 0.45;
}
.collection-hero__title::before { margin-bottom: 1.2rem; }
.collection-hero__title::after  { margin-top: 1.2rem; }

@media (max-width: 767.98px) {
  /* COLLECTION-BANNER-MOBILE (2026-08-12): se RETIRO de aqui la regla que
     ponia display:none sobre .cbp-eyebrow,
     ocultando el eyebrow "Coleccion" por debajo de 767.98px. Medido con
     Playwright en el preview del draft, en /collections/platos y /collections/cubiertos:
       1440px -> display:block, 82x17, texto "Coleccion"
        760px -> display:none, 0x0
        390px -> display:none, 0x0
     La regla base de arriba (.cbp-eyebrow) ya declara display:block, asi que
     borrar el override lo restaura en todos los anchos sin necesidad de
     !important ni de una regla nueva. Aplica a TODAS las colecciones: el
     eyebrow lo emite sections/main-collection-banner.liquid:131 sin condicion,
     y las 391 colecciones usan templates/collection.json.
     El ajuste de las lineas separadoras a 30% en movil SE CONSERVA. */
  .collection-hero__title::before,
  .collection-hero__title::after { width: 30%; }
}
/* /COLLECTION-BANNER-PREMIUM */

/* BANNER-IMG-FIX (2026-08-12) — la imagen iguala la altura de su columna.
   Medido: con titulo de 2 lineas la columna crece a 358px pero el <picture>
   se quedaba en 300px, dejando 58px de fondo a la vista. El selector real es
   picture.hero__media (no .collection-hero__media, que no existe en el HTML).
   Acotado a >=768px: en movil el banner apila y no hay columna que igualar. */
@media (min-width: 768px) {
  .collection-hero .hero__media {
    height: 100% !important;
    min-height: 300px !important;
  }
}
/* /BANNER-IMG-FIX */

/* === MENU-SPACING-B 2026-08-12 === */

/* MENU-SPACING-B — reducir el alto del item de nav en ESCRITORIO.
   Causa medida con Playwright a 1440px sobre el preview del draft:
   el <span class="menu__item"> mide 48px porque su hijo mas alto es el
   <button class="menu__item-toggle"> (la flecha que agrego MAHA para separar
   "navegar" de "expandir"), que mide 40px. El <a> del nombre mide 24px.
     48px = 40px (boton) + 4px + 4px (padding de .menu__item, que en theme.css
            nativo declara padding 0.4rem 1.6rem)
   En HYPER-REF 155038515412 ese boton NO existe, asi que el hijo mas alto es el
   <a> de 24px y el item queda en 24 + 8 = 32px. De ahi la diferencia de 16px por
   item, que con 3 filas son 48px de exceso.
   Fix: acotar el boton a 2.4rem (=24px, porque html font-size 62.5% -> 1rem=10px)
   para que el item vuelva a 24 + 8 = 32px, igual que el nativo.
   Solo >=1024px: .header__bottom es hidden lg:flex, o sea escritorio. El movil usa
   .menu-drawer__item-toggle (clase distinta, en #MenuDrawer) y no se toca. El
   tap-target de 40px no aplica aqui: es navegacion de escritorio con puntero. */
@media (min-width: 1024px) {
  .header__bottom .menu__item-toggle {
    height: 2.4rem;
    min-height: 0;
  }
}
/* === /MENU-SPACING-B === */


/* =========================================================================
   PRICE-COLLECTION-MOBILE (2026-08-12)
   Agrandar el precio de la tarjeta card-product-v2 en movil/tableta.

   1) POR QUE LLEVA #ProductsList
   assets/collection.css (minificado) declara, dentro de
   @media screen and (max-width:767.98px):
       #ProductsList .product-card-v2 .f-price,
       #ProductsList .product-card-v2 .f-price *,
       #ProductsList .product-card-v2 .f-price-item, ...
       { font-size:10px!important; line-height:1!important }
   Especificidad (1,2,0) con !important: un selector sin ID -- por ejemplo
   .product-card-v2 .f-price .f-price-item--regular (0,3,0) -- NO le gana
   por mucho !important que lleve. Por eso cada regla se declara dos veces:
     a. sin ID  -> tarjetas v2 fuera de la coleccion (home, sliders).
     b. con #ProductsList (1,3,0) -> gana dentro de la rejilla de coleccion.

   2) POR QUE LLEVA "> *"
   El money_format de la tienda envuelve el importe en la app de moneda:
       <span class="f-price-item--regular"><span class="transcy-money">$ 194.52 MXN</span></span>
   El texto visible esta en el HIJO, y ese hijo lo agarra el selector
   ".f-price *" de collection.css. Sin "> *" el padre sube a 24px pero el
   numero se queda en 10px: el computed style cambia y en pantalla no pasa nada.

   3) POR QUE INCLUYE .f-price-item--sale
   Las tarjetas con descuento ocultan .f-price__regular y muestran el precio
   en .f-price-item--sale (card-product-v2.js: visiblePriceItem()). Sin esa
   linea, los productos en oferta se quedarian en 10px junto a los de 24px.
   Se usa .f-price__regular .f-price-item--regular (no .f-price ...) para NO
   tocar el <s> tachado que vive en .f-price__sale .f-price-item--regular.

   4) ORDEN
   La regla de .is-tier-price va DESPUES de la del precio normal en cada
   @media, para ganar el empate de especificidad (1,3,0).
   ========================================================================= */

@media (max-width: 1023.98px) {
  /* Precio normal -- negro */
  .product-card-v2 .f-price__regular .f-price-item--regular,
  .product-card-v2 .f-price__regular .f-price-item--regular > *,
  .product-card-v2 .f-price__sale .f-price-item--sale,
  .product-card-v2 .f-price__sale .f-price-item--sale > *,
  #ProductsList .product-card-v2 .f-price__regular .f-price-item--regular,
  #ProductsList .product-card-v2 .f-price__regular .f-price-item--regular > *,
  #ProductsList .product-card-v2 .f-price__sale .f-price-item--sale,
  #ProductsList .product-card-v2 .f-price__sale .f-price-item--sale > * {
    font-size: 24px !important;
  }
  /* Precio mayoreo -- rojo */
  .product-card-v2 .f-price-item.is-tier-price,
  .product-card-v2 .f-price-item.is-tier-price > *,
  #ProductsList .product-card-v2 .f-price-item.is-tier-price,
  #ProductsList .product-card-v2 .f-price-item.is-tier-price > * {
    font-size: 30px !important;
  }
}

@media (max-width: 749px) {
  .product-card-v2 .f-price__regular .f-price-item--regular,
  .product-card-v2 .f-price__regular .f-price-item--regular > *,
  .product-card-v2 .f-price__sale .f-price-item--sale,
  .product-card-v2 .f-price__sale .f-price-item--sale > *,
  #ProductsList .product-card-v2 .f-price__regular .f-price-item--regular,
  #ProductsList .product-card-v2 .f-price__regular .f-price-item--regular > *,
  #ProductsList .product-card-v2 .f-price__sale .f-price-item--sale,
  #ProductsList .product-card-v2 .f-price__sale .f-price-item--sale > * {
    font-size: 18px !important;
  }
  .product-card-v2 .f-price-item.is-tier-price,
  .product-card-v2 .f-price-item.is-tier-price > *,
  #ProductsList .product-card-v2 .f-price-item.is-tier-price,
  #ProductsList .product-card-v2 .f-price-item.is-tier-price > * {
    font-size: 18px !important;
  }
}

@media (max-width: 360px) {
  .product-card-v2 .f-price__regular .f-price-item--regular,
  .product-card-v2 .f-price__regular .f-price-item--regular > *,
  .product-card-v2 .f-price__sale .f-price-item--sale,
  .product-card-v2 .f-price__sale .f-price-item--sale > *,
  #ProductsList .product-card-v2 .f-price__regular .f-price-item--regular,
  #ProductsList .product-card-v2 .f-price__regular .f-price-item--regular > *,
  #ProductsList .product-card-v2 .f-price__sale .f-price-item--sale,
  #ProductsList .product-card-v2 .f-price__sale .f-price-item--sale > * {
    font-size: 22px !important;
  }
  .product-card-v2 .f-price-item.is-tier-price,
  .product-card-v2 .f-price-item.is-tier-price > *,
  #ProductsList .product-card-v2 .f-price-item.is-tier-price,
  #ProductsList .product-card-v2 .f-price-item.is-tier-price > * {
    font-size: 28px !important;
  }
}

/* === /FIN PRICE-COLLECTION-MOBILE === */
/* PIEZA-ABBR-MOBILE */
@media (max-width: 1023.98px) {
  .product-card-v2__per {
    font-size: 0 !important;
  }
  .product-card-v2__per::after {
    content: "/ pz";
    font-size: 12px;
  }
}

/* =========================================================================
   CARD-MOBILE-FIX (2026-08-12)
   Tarjeta de coleccion card-product-v2: evitar que "/ pz" y "pzas" caigan
   a un segundo renglon en movil.

   MEDICIONES (390px, /collections/platos, 24 tarjetas):
     ancho util por tarjeta ............ 153px
       (grid #ProductsList = 177px 177px fijos, tarjeta 177 - 2px borde
        - 11px+11px de padding de .product-card-v2__content)
     fila precio con etiqueta "Mayoreo" . requiere 160px -> faltan 7px
     fila precio con etiqueta "Desde" ... requiere 148px -> cabe
     fila "Formato Venta: 12 pzas" ...... requiere 154px -> falta 1px
   Por eso el arreglo combina las dos cosas: se recupera ancho util
   (padding 11px -> 8px = +6px) Y se prohibe el salto de linea. Ninguna
   de las dos por separado alcanza: solo padding deja 23/24 tarjetas con
   el precio partido; solo nowrap deja 11/24 con el formato partido.

   ALCANCE = max-width 749px A PROPOSITO.
   A 768px la rejilla pasa a 3 columnas (ancho util 201px) y ahi el precio
   de 24px con nowrap se SALE de la tarjeta (medido: 23/24 tarjetas con
   desborde). Dejarlo envolver es preferible a que se salga, asi que el
   bloque no entra en tableta. Arriba de 1023.98px no se toca nada.
   ========================================================================= */

@media (max-width: 749px) {
  /* +6px de ancho util por tarjeta (11px -> 8px de padding lateral) */
  .product-card-v2__content,
  .product-card-v2__purchase,
  .product-card-v2__secondary {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* --- A: "/ pz" en la misma linea que el precio ---
     El salto ocurre en .product-card-v2__price-block, que es el flex con
     flex-wrap:wrap (NO en .f-price: ahi solo viven los divs del precio).
     .f-price ademas puede encoger, asi que se le prohibe partir el numero. */
  .product-card-v2__price-block {
    flex-wrap: nowrap !important;
  }
  .product-card-v2__price-block .product-card-v2__price-from,
  .product-card-v2__price-block .product-card-v2__per {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  .product-card-v2__price-block .f-price {
    flex-wrap: nowrap !important;
  }
  .product-card-v2__price-block .f-price .f-price-item {
    white-space: nowrap !important;
  }

  /* --- B: "Formato Venta: 12 pzas" en una sola linea ---
     El salto cae dentro del <b class="sales-format-text">, entre la
     cantidad (.sales-formatText) y la unidad ([data-format-unit]). */
  .product-card-v2__format .sales-format-text {
    white-space: nowrap !important;
  }
}

@media (max-width: 360px) {
  /* A 320-360px el ancho util baja a 124-144px y "Formato Venta:" (89px)
     ya no deja espacio para "12 pzas" ni con el padding reducido.
     Se abrevia la etiqueta igual que hace PIEZA-ABBR-MOBILE con "/ pz".
     El texto original queda en el DOM para lectores de pantalla. */
  .product-card-v2__format .fmt-label-mobile {
    font-size: 0 !important;
  }
  .product-card-v2__format .fmt-label-mobile::after {
    content: "Formato:";
    font-size: 12.5px;
  }
}

/* === /FIN CARD-MOBILE-FIX === */


/* =========================================================================
   COLLECTION-PRICE-MOBILE-ORDER (2026-08-12)
   SOLO pagina de coleccion (#ProductsList). El home usa el mismo snippet
   pero NO esta dentro de #ProductsList, asi que no se ve afectado.

   Orden buscado con mayoreo activo:
       [Mayoreo]                <- renglon propio
       [precio rojo] [/ pz]     <- renglon 1
       [precio tachado]         <- renglon 2, alineado a la izquierda

   DOM REAL medido (hijos DIRECTOS de .product-card-v2__price-block):
     [0] span.product-card-v2__price-from   "Mayoreo"
     [1] div.f-price                        <- contiene el precio rojo
     [2] span.product-card-v2__per          "/ pz"
     [3] span.product-card-v2__price-was    tachado
   OJO: .f-price-item.is-tier-price NO es hijo directo (padre .f-price__regular,
   abuelo .f-price). 'order' sobre el no hace nada: el flex item es .f-price.
   Por eso el order va sobre .f-price, no sobre .is-tier-price.

   POR QUE flex-wrap: wrap
   CARD-MOBILE-FIX puso flex-wrap:nowrap en .product-card-v2__price-block
   (sin #ProductsList). Con mayoreo activo los 4 hijos piden ~200px en 159px,
   asi que .f-price se aplastaba de 82px a 41px y el precio rojo se desbordaba
   encima del resto. Aqui se restaura wrap con (1,2,0) + !important, que le
   gana a la regla (0,1,0) de CARD-MOBILE-FIX SOLO dentro de la coleccion.

   Los hijos llevan flex-shrink 0 para que ninguno se vuelva a aplastar.
   ========================================================================= */

@media (max-width: 1023.98px) {

  #ProductsList .product-card-v2 .product-card-v2__price-block {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline;
    gap: 0 3px;
  }

  /* Etiqueta "Mayoreo" / "Desde" -> renglon propio */
  #ProductsList .product-card-v2 .product-card-v2__price-block > .product-card-v2__price-from {
    order: 0;
    flex: 0 0 100%;
  }

  /* Precio (el flex item real es .f-price, no .is-tier-price) */
  #ProductsList .product-card-v2 .product-card-v2__price-block > .f-price {
    order: 1;
    flex: 0 0 auto;
    min-width: 0;
    max-width: 100%;
  }

  /* "/ pz" -> misma fila que el precio */
  #ProductsList .product-card-v2 .product-card-v2__price-block > .product-card-v2__per {
    order: 2;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* Precio tachado -> renglon propio, a la izquierda */
  #ProductsList .product-card-v2 .product-card-v2__price-block > .product-card-v2__price-was {
    order: 3;
    flex: 0 0 100%;
    text-align: left;
    white-space: nowrap;
  }

}

/* -------------------------------------------------------------------------
   CONFLICTO ANOTADO con el bloque PRICE-COLLECTION-MOBILE
   Ese bloque deja el precio de mayoreo en 14px para <=749px pero en 28px
   para <=360px (quedo asi tras una edicion posterior que solo cambio el
   tramo de 749px). Medido a 320px: el precio a 28px ocupa ~137px y el ancho
   util es 124px, asi que .f-price se come el renglon completo y empuja
   "/ pz" a una tercera linea, ademas de desbordarse.
   NO se edita aquel bloque. Se neutraliza aqui, solo dentro de #ProductsList,
   igualando el valor al que ya usa el tramo <=749px (14px).
   ------------------------------------------------------------------------- */
@media (max-width: 360px) {
  #ProductsList .product-card-v2 .f-price-item.is-tier-price,
  #ProductsList .product-card-v2 .f-price-item.is-tier-price > *,
  #ProductsList .product-card-v2 .f-price__regular .f-price-item--regular,
  #ProductsList .product-card-v2 .f-price__regular .f-price-item--regular > *,
  #ProductsList .product-card-v2 .f-price__sale .f-price-item--sale,
  #ProductsList .product-card-v2 .f-price__sale .f-price-item--sale > * {
    font-size: 14px !important;
  }
}

/* === /FIN COLLECTION-PRICE-MOBILE-ORDER === */

/* === COLLECTION-FILTER-ZINDEX (2026-08-12) ===
   El panel de filtros sticky y la barra Comparar deben quedar SIEMPRE por
   encima de los badges de las tarjetas.
   Medido en vivo: .sticky-element (filtros) z-index 9 y .compare-bar z-index 10,
   contra .et1-badges z-index 10 -> el badge empataba o ganaba y los tapaba.
   Se baja el badge a 2, el mismo valor del badge nativo .product-card__badge,
   que ya convive sin conflicto dentro de .product-card-v2__media.
   NO se toca .collection__toolbar: es position:static, no sticky; forzarlo
   cambiaria el layout sin necesidad. */
.et1-badges {
  z-index: 2 !important;
}
/* === END COLLECTION-FILTER-ZINDEX === */

/* === SEARCH-NATIVE-HIDE 2026-08-12 === */

/* SEARCH-NATIVE-HIDE — oculta SOLO el dropdown de resultados del buscador NATIVO
   del tema, conservando intacto el buscador de la app RapidSearch.

   Diagnostico en el DOM real (Playwright, 1440px, preview del draft, escribiendo
   "platos" en el buscador del header). Los dos sistemas aparecen a la vez y en la
   misma posicion (y=117), superpuestos:

     NATIVO (tema)  .search__content .............. 1440x724   <- se oculta
                      .search__box.search__results . 1340x1347
                      #PredictiveSearchResults-...
                      #predictive-search-results-products-list
                      #predictive-search-results-collection-list
     APP RapidSearch  #rapid-search-results ........ 752x492    <- se conserva
                      .rps_container / .rps_left_column
                      .rps_category_block / .rps_right_column

   Namespaces disjuntos: la app usa #rapid-search-results y .rps_*, el tema usa
   .search__content y .search__* / .predictive-search-*. Cero solapamiento.

   POR QUE .search__content Y NO <predictive-search>:
   en snippets/predictive-search.liquid el <predictive-search> (L14-373) contiene
   DOS partes hermanas: el <form> con el input (L15-129) y el dropdown
   .search__content (L130-372). Ocultar <predictive-search> mataria tambien el
   input, el selector "Categorias" (.search__types) y el boton de reset, que la
   app necesita. Ocultando solo .search__content el input queda intacto.

   POR QUE NO SE USA EL SETTING predictive_search_enabled:
   existe en settings_data.json y vale true, pero NO controla el dropdown. Controla
   el selector de categorias (L24-27), los ARIA del input (L95-106), el boton de
   reset (L111-120) y la clase predictive-search-icon (L123). Apagarlo quitaria el
   selector "Categorias" que MAHA personalizo, y NO ocultaria los resultados. */
.search__content {
  display: none !important;
}
/* === /SEARCH-NATIVE-HIDE === */

/* ═══════════════════════════════════════════════════════════
   TODOS-COLLECTION — Botón infinite scroll invisible solo
   en la plantilla collection.todos
   (body.collection-template.todos, verificado en live preview)
   ═══════════════════════════════════════════════════════════ */
body.collection-template.todos button[is="load-more-button"] {
  opacity: 0 !important;
  pointer-events: none !important;
  /* NO display:none — el IntersectionObserver necesita dimensiones
     para disparar el autoload */
}


/* ============================================================
   RESURTIDOS-ANIM-FIX — Eliminar animacion del boton
   "Agregar A Resurtidos" en TODAS las paginas (colección,
   búsqueda, home, PDP).

   SELECTOR REAL (snippets/custom-wishlist-king.liquid:26-31):
     button.wishlist-add__button.list_type[data-type="list"]
     dentro de <wishlist-king> > .list_segment
   Ese snippet lo renderizan card-product.liquid:658 y
   card-product-v2.liquid:495, asi que basta una regla global.

   NO se toca el boton del corazon, que comparte la clase
   .wishlist-add__button pero lleva .heart-favorites y
   data-type="wishlist". Por eso todos los selectores exigen
   .list_type / [data-type="list"].

   QUE SE ELIMINA (medido en el navegador sobre el boton real):
     - .btn--primary::before heredado de theme.css: barra blanca
       absolute que pasa de width:0 a 213px con transition:width .4s
       al hacer hover. ESE es el "movimiento" que se veia.
     - transition: background,color .3s del propio boton.
   'animation' y 'transform' ya valian none en reposo y en hover;
   se dejan explicitos por si un tema futuro los reintroduce.

   Es el mismo tratamiento que el bloque de CTAs .btn--primary de
   mas arriba en este archivo ("Mata el barrido ::before heredado"),
   pero aquel esta acotado por ID de seccion a proposito y no
   alcanza a este boton. No se amplia aquel bloque: quitarle el
   acotamiento pintaria de azul TODOS los .btn--primary de la
   tienda (Agregar a lista de resurtidos, Ver mas, Continuar al
   pago, Aplicar de filtros...), que es justo lo que su
   comentario dice evitar. Nota: "Inscribirse" y "Aplicar" del
   cupon SI estan en azul desde FOOTER-INSCRIBIRSE-IGUAL-QUE-AGREGAR-AL-CARRITO,
   pero con selectores acotados, no tocando la clase global.
   ============================================================ */

.wishlist-add__button.list_type::before,
button.wishlist-add__button[data-type="list"]::before {
  display: none !important;
  width: 0 !important;
  transition: none !important;
  animation: none !important;
}

.wishlist-add__button.list_type,
.wishlist-add__button.list_type:hover,
.wishlist-add__button.list_type:focus,
.wishlist-add__button.list_type:focus-visible,
.wishlist-add__button.list_type:active,
button.wishlist-add__button[data-type="list"],
button.wishlist-add__button[data-type="list"]:hover,
button.wishlist-add__button[data-type="list"]:focus,
button.wishlist-add__button[data-type="list"]:focus-visible,
button.wishlist-add__button[data-type="list"]:active {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ============================================================
   FIN RESURTIDOS-ANIM-FIX
   ============================================================ */

/* ============================================================
   SWATCH-CAROUSEL-ALL (2026-08-12) - carrusel de variantes.
   Tamano base del tema: --swatch-size 2rem = 20px (theme.css:1913).
   Aqui se sube a 44px en escritorio y 48px en movil, segun lo pedido.
   El <ul is="color-swatch"> queda como HIJO DIRECTO de .pcard-sw-outer
   para no romper el custom element ColorSwatch de theme.js.
   ============================================================ */
.pcard-sw-outer {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  overflow: hidden;
}

.pcard-sw-outer ul[is="color-swatch"] {
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  max-width: calc(3 * 44px + 2 * 8px) !important;
  width: calc(3 * 44px + 2 * 8px) !important;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex-shrink: 0 !important;
  margin: 0;
}
.pcard-sw-outer ul[is="color-swatch"]::-webkit-scrollbar { display: none; }

.pcard-sw-outer .swatch-item {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  flex-shrink: 0 !important;
}
.pcard-sw-outer .swatch-item img,
.pcard-sw-outer .swatch-item .swatch-color {
  width: 44px !important;
  height: 44px !important;
  object-fit: cover !important;
}

.pcard-sw-btn {
  background: #ffffff;
  border: 1px solid #d0d0d0;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  min-width: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  line-height: 1;
  color: #1a3a5c;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
  user-select: none;
}
.pcard-sw-btn:hover {
  background: #e8f4fd;
  border-color: #1a5eb8;
  color: #1a5eb8;
}

@media (max-width: 749px) {
  .pcard-sw-outer ul[is="color-swatch"] {
    max-width: calc(3 * 48px + 2 * 8px) !important;
    width: calc(3 * 48px + 2 * 8px) !important;
  }
  .pcard-sw-outer .swatch-item {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
  }
  .pcard-sw-outer .swatch-item img,
  .pcard-sw-outer .swatch-item .swatch-color {
    width: 48px !important;
    height: 48px !important;
  }
  .pcard-sw-btn {
    width: 24px;
    height: 24px;
    min-width: 24px;
    font-size: 1.8rem;
  }
}

/* El contador +N queda comentado en el Liquid; esto es una red de seguridad. */
.pcard-sw-outer .swatch-more { display: none !important; }
/* ============================================================
   FIN SWATCH-CAROUSEL-ALL
   ============================================================ */

/* ============================================================
   SEARCH-DESK-1 (2026-08-13)
   El boton reset del buscador del header muestra el texto "Claro"
   (mala traduccion de "Clear" en locales/es.json -> templates.search.clear).
   Markup real: snippets/predictive-search.liquid:112-119
     <button type="reset" class="search__reset ...">
       <span>{{ 'templates.search.clear' | t }}</span>
       {% render 'loading-spinner' %}   <-- es un <div>, no un <span>
     </button>
   Se anula solo el texto del <span> y se dibuja una X con ::after, para
   no tocar el spinner ni la regla nativa .search__form[loading] .search__reset span
   { opacity: 0 }, que sigue ocultando la X mientras carga.
   Base del tema (theme.css): .search__reset { opacity: 0; font-size: 1.2rem;
   inset-inline-end: 1.6rem } y opacity:1 cuando el input tiene texto.
   ============================================================ */
.search__reset {
  width: 3.2rem !important;
  min-width: 3.2rem !important;
}

.search__reset > span {
  font-size: 0 !important;
  line-height: 0 !important;
  letter-spacing: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

.search__reset > span::after {
  content: "\2715";
  font-size: 1.5rem;
  line-height: 1;
  color: #6b7280;
  transition: color 0.15s;
}

.search__reset:hover > span::after,
.search__reset:focus-visible > span::after {
  color: #1a3a5c;
}
/* ============================================================
   FIN SEARCH-DESK-1
   ============================================================ */

/* ============================================================
   SEARCH-DESK-2 (2026-08-13) - un solo control en el buscador de escritorio.
   SOLO >=1024px: el buscador de movil lo gobierna Rapid Search con su propio
   overlay a pantalla completa y su propio cierre; ahi no se toca nada.

   Estado medido antes de este bloque (theme.css):
     input vacio     -> .search__reset opacity 0 | .search__icon-search opacity 1 (lupa)
     input con texto -> .search__reset opacity 1 (X) | .search__icon-search opacity 0
                        + .header__search-close opacity 1 (segunda X, fuera del pill)
   La regla nativa que los alterna es
     .search__field input:not(:placeholder-shown) ~ .predictive-search-icon { opacity: 0 }

   Cambio: al escribir se conserva visible la lupa REAL - el <button type="submit">
   con aria-label "Buscar" de predictive-search.liquid:121-127 - en vez del
   <button type="reset">. No se pinta una lupa falsa sobre el boton de limpiar:
   ese boton borra el texto al pulsarlo (verificado: "pla" -> ""), asi que con
   icono de lupa el usuario perderia su busqueda al intentar buscar.
   ============================================================ */
@media (min-width: 1024px) {
  /* La lupa (submit) sigue visible y clicable aunque haya texto escrito */
  .search__field input:not(:placeholder-shown) ~ .predictive-search-icon {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* El boton de limpiar (type=reset) deja de ocupar la ranura */
  .search__reset,
  .search__field input:not(:placeholder-shown) ~ .search__reset {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* La X exterior duplicada: boton nativo de FoxTheme para cerrar el buscador.
     Markup: sections/header.liquid:193-198 */
  .header__search-close,
  .search-open .header__search-close,
  .header__search-close:hover,
  .header__search-close:focus {
    display: none !important;
  }
}
/* ============================================================
   FIN SEARCH-DESK-2
   ============================================================ */

/* ============================================================
   SEARCH-DESK-3 - Restaurar X exterior del buscador
   Revierte el display:none de SEARCH-DESK-2 sobre .header__search-close
   El boton solo es visible cuando .search-open esta activo (FoxTheme nativo)
   ============================================================ */

@media (min-width: 1024px) {
  .search-open .header__search-close {
    display: inline-flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: auto !important;
  }
}

/* ============================================================
   FIN SEARCH-DESK-3
   ============================================================ */

/* ============================================================
   HOME-MAYOREO-FIX-1 (2026-08-13)
   Tabla "Ver descuento por cantidad" de la tarjeta card-product-v2:
   devolver al HOME los tamanos base. Coleccion y busqueda no se tocan.

   CAUSA REAL (medida en el navegador, no estaba en custom.css):
   las reglas que encogen la tabla viven en assets/component-card-product-v2.css
   y son GLOBALES -- se acotan por ANCHO, no por plantilla, asi que alcanzan
   por igual a home, coleccion y busqueda:
     @media (max-width: 989px)
       .product-card-v2__vol-tier .qty              font-size: 10px
       .product-card-v2__vol-tier .val b            font-size: 10px
       .product-card-v2__vol-tier .off              font-size: 9px
       .product-card-v2__vol-tier.is-tight .qty/.val b   font-size: 8.5px
       .product-card-v2__vol-tier.is-tight .off     font-size: 8px
     @media (max-width: 749px)
       .product-card-v2__vol-tier                   font-size: 11px
       .product-card-v2__vol-txt                    font-size: 11px
       .product-card-v2__vol-title                  font-size: 9.5px
       .product-card-v2__vol-off                    font-size: 9.5px
   Los valores restaurados abajo son los del bloque BASE de ese mismo archivo
   (sin media query): tier 13px, .off 10.5px, .vol-txt 11.5px, .vol-title 10.5px,
   .vol-off 11px.

   POR QUE ESAS REGLAS TIENEN SENTIDO FUERA DEL HOME:
   a 390px la fila de tramos mide 225px en el home y solo 137px en coleccion
   y 141px en busqueda (medido). El home tiene sitio de sobra; las rejillas de
   coleccion/busqueda no.

   CLASE DE PLANTILLA: el <body> del home es "index-template", NO "template-index".
   Medido: home "index-template ...", coleccion "collection-template ...",
   busqueda "search-template ...". Es la misma convencion que ya usa la regla
   .collection-template .product-card-v2__vol-txt de mas arriba en este archivo.

   ALCANCE <=749px, NO <=989px (corregido tras medir): entre 750 y 989px la
   rejilla del home pasa a 3-4 columnas y la fila baja a 178px, mas estrecha
   que en movil (205px a 360px, 225px a 390px, 252px a 430px). A 13px se
   desbordaban 11 de 36 filas, asi que en esa franja se dejan los tamanos
   reducidos del componente. Por el mismo motivo hay piso en 360px: a 320px
   la fila del home vuelve a 178px y se desbordaban 8 de 27. Franja util
   medida: 360px->205px, 390px->225px, 430px->252px, 600px->368px, 749px->469px.

   Se incluyen las variantes .is-tight porque esa clase la agrega JS cuando la
   fila no cabe; sin ellas volveria a ganar el 8.5px/8px.
   ============================================================ */
@media (min-width: 360px) and (max-width: 749px) {
  body.index-template .product-card-v2__vol-tier,
  body.index-template .product-card-v2__vol-tier.is-tight {
    font-size: 13px !important;
  }

  body.index-template .product-card-v2__vol-tier .qty,
  body.index-template .product-card-v2__vol-tier .val b,
  body.index-template .product-card-v2__vol-tier.is-tight .qty,
  body.index-template .product-card-v2__vol-tier.is-tight .val b {
    font-size: 13px !important;
  }

  body.index-template .product-card-v2__vol-tier .off,
  body.index-template .product-card-v2__vol-tier.is-tight .off {
    font-size: 10.5px !important;
    padding: 2px 6px !important;
  }

  body.index-template .product-card-v2__vol-txt {
    font-size: 11.5px !important;
    line-height: 1.2 !important;
  }

  body.index-template .product-card-v2__vol-title {
    font-size: 10.5px !important;
    letter-spacing: 0.12em !important;
  }

  body.index-template .product-card-v2__vol-off {
    font-size: 11px !important;
  }
}
/* ============================================================
   FIN HOME-MAYOREO-FIX-1
   ============================================================ */

/* ============================================================
   MAYOREO-PRECIO-LABEL (2026-08-13)
   Leyenda al pie del panel de descuentos por volumen de la tarjeta
   card-product-v2. El <p> lo imprime snippets/card-product-v2.liquid
   dentro de .product-card-v2__vol-pop, despues de [data-vol-tiers].

   CASO 1 (Liquid), no CASO 2 (::after sobre el contenedor): el panel
   .product-card-v2__vol-pop lo renderiza el snippet; card-product-v2.js
   solo reescribe el innerHTML de [data-vol-tiers] (linea 397), asi que
   un hermano posterior sobrevive a cada re-render de tramos. Un ::after
   habria dependido de que el contenedor no se re-cree y no permite
   ocultarlo por separado.

   Una sola tarjeta cubre las tres vistas: home renderiza
   article.product-card-v2.product-card-v2--home, y coleccion y busqueda
   article.product-card-v2 -- todas desde el mismo snippet.
   snippets/card-product.liquid NO lleva la leyenda: no tiene tabla de
   mayoreo (0 coincidencias de __vol / data-vol / tier).

   1.1rem = 11px con el root de 62.5% del tema (css-variables.liquid:363),
   a la escala del resto del panel (.vol-title 10.5px, .vol-tier 13px).
   ============================================================ */
.mayoreo-pieza-label {
  color: #dc2626;
  font-size: 1.1rem;
  font-style: italic;
  margin: 0.5rem 0 0;
  padding: 0 0.2rem;
  line-height: 1.35;
}
/* ============================================================
   FIN MAYOREO-PRECIO-LABEL
   ============================================================ */

/* ============================================================
   MOBILE-MENU-LABEL — etiqueta "Menú" bajo el icono de
   hamburguesa en el header movil.

   BOTON REAL (sections/header.liquid:108-115):
     .header__icons--left .menu-drawer-button   (lg:hidden)
   Los otros dos .menu-drawer-button del header son
   "hidden lg:flex" (escritorio) y no llevan etiqueta.

   POR QUE HACE FALTA .mobile-menu-icon
   .hamburger-line es position:absolute con top:50% y left:2px,
   asi que NO ocupa alto en el flujo: un <span> hermano quedaria
   centrado ENCIMA de las rayas. Peor aun, al crecer el boton el
   icono se recentraba (top:50% de la nueva altura) y siempre
   pisaba el texto. Envolverlo en una caja fija de 24x24 con
   position:relative devuelve al icono exactamente su geometria
   original (top resuelve a 12px, igual que antes).

   NO se toca 'transform' de .hamburger-line: al abrir el drawer
   el tema le aplica rotate(45deg) y al ::after rotate(-90deg)
   para convertirlo en X. Sobrescribirlo romperia esa animacion.
   ============================================================ */

.header__icons--left .menu-drawer-button {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  height: auto !important;
  gap: 0 !important;
  overflow: visible;
}

/* Caja propia del icono: conserva los 24x24 originales */
.mobile-menu-icon {
  display: block;
  position: relative;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
}

/* Mismo tamano/peso que las etiquetas hermanas del header
   (.header-account__label--short: 11px / 400 / line-height 1.15) */
.mobile-menu-label {
  display: block;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.15;
  color: currentColor;
  text-align: center;
  letter-spacing: 0.02em;
  margin-top: 2px;
  text-transform: none;
  white-space: nowrap;
}

/* Solo movil */
@media (min-width: 1024px) {
  .mobile-menu-label {
    display: none;
  }
}

/* ============================================================
   FIN MOBILE-MENU-LABEL
   ============================================================ */


/* MOBILE-MENU-LABEL-REPOSITION */
.header__icons--left .menu-drawer-button {
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.6rem !important;
}
.mobile-menu-label {
  text-transform: uppercase !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.08em !important;
  margin-top: 0 !important;
  order: 2 !important;
}
.mobile-menu-icon {
  order: 1 !important;
  flex-shrink: 0 !important;
}
/* end MOBILE-MENU-LABEL-REPOSITION */

/* MOBILE-MENU-320PX */
@media (max-width: 359px) {
  .mobile-menu-label { display: none !important; }
}
/* end MOBILE-MENU-320PX */

/* ============================================================
   MAYOREO-PRECIO-ROJO (2026-08-13) - tarjetas de producto.

   POR QUE ESTA REGLA VIVE AQUI Y NO EN pdp-maha.css:
   assets/pdp-maha.css solo lo carga sections/main-product.liquid (linea 52),
   es decir SOLO la pagina de producto. En home, coleccion y busqueda no se
   descarga, asi que una regla para la tarjeta puesta ahi seria codigo muerto.
   custom.css si es global.

   ELEMENTO REAL: <span class="product-card-v2__price-was" data-price-was>,
   card-product-v2.liquid:285, que rellena assets/card-product-v2.js. Hoy lo
   pinta component-card-product-v2.css:201 con color var(--v2-muted) y ya trae
   text-decoration: line-through.

   NO se usan .f-price-item--compare ni .f-price__compare: snippets/price.liquid
   no emite ninguna de las dos (0 coincidencias). Tampoco
   .card-product .f-price-item--regular:not(.f-price-item--sale) -- .card-product
   es la tarjeta del mega-menu/drawer/busqueda predictiva y ese selector alcanza
   el precio NORMAL de cualquier producto sin descuento, que se volveria rojo.
   ============================================================ */
/* === CARD-WAS-PRICE-FIX === */
/* 1. Price-block: flex+wrap en TODOS los contextos para que order funcione */
.product-card-v2__price-block {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  column-gap: 4px !important;
  row-gap: 0 !important;
}
/* 2. Etiqueta Mayoreo/Desde y precio principal: primer renglon */
.product-card-v2__price-block [data-price-from],
.product-card-v2__price-block .f-price {
  order: 1 !important;
}
/* 3. / pieza: mismo renglon, despues del precio */
.product-card-v2__price-block .product-card-v2__per {
  order: 2 !important;
  flex-shrink: 0 !important;
}
/* 4. Precio tachado: renglon propio, abajo, siempre gris (comportamiento
   BASE: coleccion, busqueda, relacionados, destacados, recientemente
   vistos, y el home en movil/tablet -- sin tocar). Las 5 propiedades de
   layout (order/flex/white-space/display/margin-top) perdieron su
   !important: nada mas las toca fuera del punto 5 de abajo (confirmado
   por grep), asi que siguen ganando en todo caso salvo ahi. color/text-
   decoration/font-size conservan su !important, sin cambios. */
.product-card-v2__price-was {
  order: 10;
  flex: 0 0 100%;
  color: #8b8b91 !important;
  text-decoration: line-through !important;
  white-space: normal;
  display: block;
  margin-top: 0.2rem;
  font-size: 1.2rem !important;
}
/* 5. PRECIO-TACHADO-EN-LINEA (2026-08-19). SOLO home (body.index-template,
   clase ya medida y usada en HOME-MAYOREO-FIX-1 mas arriba en este mismo
   archivo) y SOLO escritorio (min-width:1024px -- el corte "lg" que ya
   genera el tema en theme.css:6063 para las utilidades lg:hidden/lg:flex
   que sections/header.liquid usa para pasar del menu movil a la
   navegacion de escritorio; el mismo 1024 que ya reutilizan SEARCH-DESK-2
   y MOBILE-MENU-LABEL en este archivo. El tema NO tiene variable ni mixin
   para este corte -- es un literal repetido 19+ veces en theme.css -- asi
   que se usa el mismo literal, no uno nuevo. 768px es el corte "md" del
   tema (utilidades md:hidden, variable --f-columns-md), no el de
   escritorio; LOOKBOOK-TARJETA-VERTICAL usa 768 por una razon propia y
   distinta (ahi termina su propio patron de drawer movil), no porque 768
   sea "escritorio" en este tema. Medido en HOME 768-1023: "/ pieza" ya se
   separa del precio ahi HOY, con o sin este punto 5 (mismo resultado en
   ambos casos) -- ese defecto es previo, ajeno a [data-price-was], y no
   se toca aqui.

   Alcanza SOLO [data-price-was]: el comparativo NATIVO
   (.f-price__sale .f-price-item--regular) no tiene ninguna regla aqui y
   no se mueve -- medido antes/despues con una tarjeta de oferta nativa
   (CAJITA 1), captura identica.

   Gana por especificidad, sin !important: body.index-template
   [data-price-was] = (0,2,1) contra .product-card-v2__price-was = (0,1,0).
   Nada mas compite por estas 5 propiedades en este alcance. Coleccion
   (768-1023 incluido) y el home en movil/tablet conservan el punto 4 de
   arriba tal cual, sin excepcion. */
@media (min-width: 1024px) {
  body.index-template [data-price-was] {
    order: 3;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
    white-space: nowrap;
    display: inline;
    margin-top: 0;
  }
}
/* === /CARD-WAS-PRICE-FIX === */
/* ============================================================
   FIN MAYOREO-PRECIO-ROJO
   ============================================================ */

/* === PDP-SKU-POSITION ===
   Escritorio (>=1024px): el SKU se pega a la linea de resenas en vez de
   irse al extremo derecho de la columna.

   NO hizo falta tocar Liquid: SKU y resenas YA comparten padre. Lo arma
   assets/pdp-sku-reviews-row.js (cargado en sections/main-product.liquid:93),
   que crea <div class="pdp-reviews-sku-row"> y mete dentro
   .areviews_header_stars (app Areviews) y el .copy-text que envuelve a
   <span class="product__meta product__sku">. Nacen en niveles de DOM
   distintos, por eso el JS.

   CAUSA MEDIDA a 1440px: assets/pdp-maha.css:206-219 deja la fila en
   justify-content: space-between y las estrellas en flex: 1 1 auto, asi que
   la caja de las estrellas se estiraba a 611px (su contenido visible es
   ~260px) y el SKU quedaba clavado en el borde derecho, a x=1271 de una fila
   que empieza en x=648. Aqui se cambia a flex-start + flex: 0 1 auto, con lo
   que el SKU queda justo despues de las estrellas separado por el
   column-gap: 12px que ya existia.

   POR QUE !important: el orden de hojas en la PDP es
   theme.css -> custom.css -> pdp-maha.css. custom.css carga ANTES, asi que
   con la misma especificidad (0,2,0) ganaria pdp-maha.css. No se edita
   pdp-maha.css para no tocar un archivo de 147 KB por dos propiedades.

   Solo >=1024px, como se pidio. Por debajo se conserva tal cual el
   comportamiento actual (incluido el tramo <=989px con estrellas y SKU
   compactados que ya define pdp-maha.css).
   === */

@media (min-width: 1024px) {
  .product-template .pdp-reviews-sku-row {
    justify-content: flex-start !important;
  }
  .product-template .pdp-reviews-sku-row .areviews_header_stars {
    flex: 0 1 auto !important;
  }
}

/* === /PDP-SKU-POSITION === */

/* === COMPARAR-FIX-WAFLOAT ===
   El boton flotante de WhatsApp (.wa-float, z-index 30) tapaba el boton
   "Borrar todo" de la barra de comparacion (compare-bar, z-index 10).
   Medido en el draft: solape de 177x60px a 1440px y de 171x14px a 390px, y
   elementFromPoint sobre el centro de "Borrar todo" devolvia <div.wa-float>.
   Se sube el flotante mientras la barra esta activa, en vez de subir la barra:
   subir la barra dejaria el flotante inaccesible en esos 177px, o sea cambiar
   un boton bloqueado por otro. NO se toca el z-index de la barra ni el CSS
   inline anti-CLS de layout/theme.liquid linea 40.

   Mismo idioma que el bloque de la barra sticky del PDP de mas arriba en este
   archivo, pero sin numero fijo y sin media query: assets/compare.js linea 439
   publica --compare-bar-height en document.documentElement a partir del
   offsetHeight REAL de la barra, y lo recalcula al cambiar de breakpoint
   (linea 297) y en cada render (linea 402). Asi el desplazamiento se adapta
   solo a cualquier ancho y a cualquier alto de barra, y usa la misma fuente de
   verdad que el padding-bottom de compare.css linea 206.
   El margen de 1.6rem separa el flotante del borde superior de la barra.
   REVERTIR: borrar este bloque completo. */
body.is-product-comparing .wa-float {
  bottom: calc(var(--compare-bar-height, 109px) + 1.6rem) !important;
}
/* === /COMPARAR-FIX-WAFLOAT === */

/* === COMPARAR-FIX-COLOR ===
   Los dos botones del comparador pasan de negro al azul de marca #3682f8,
   el mismo de "Agregar al carrito", con hover #1f5fd8.
   El negro venia de una sola regla del tema base, no del CSS de la funcion:
   assets/theme.css linea 2276, .btn--primary con background rgb(--color-button),
   y --color-button sale del esquema de color scheme-1, cuyo boton es #000000.

   SELECTORES ACOTADOS a proposito. Las clases del markup son "btn btn--primary
   btn--small", que se repiten en al menos seis sitios mas del tema: la copia de
   design-mode del propio modal, snippets/quick-comparison-table-col.liquid y los
   "Ver detalles" de las tarjetas de producto. Un selector por clase suelta se
   los llevaria a todos. Aqui se apunta solo a .compare-bar__open (barra) y a
   .compare-table__col-info (celda de cabecera del modal, que cubre tanto la
   columna real como su placeholder de editor).

   Se neutraliza el barrido animado: el tema le pone a .btn--primary un ::before
   que crece de width 0 a 100% en hover (theme.css 2237-2251 y 2441-2445) y que
   ademas invierte el color del texto (theme.css 2446-2448). Sin apagarlo, estos
   botones conservarian el barrido y el texto podria quedar oscuro al pasar el
   raton. Mismo patron ya usado en este archivo para los CTAs del home.
   No se cambia tamano, radio ni tipografia.
   REVERTIR: borrar este bloque completo. */
.compare-bar__open.btn.btn--primary,
.compare-table__col-info .btn.btn--primary {
  background-color: #3682f8 !important;
  border-color: #3682f8 !important;
  color: #ffffff !important;
  transform: none !important;
  animation: none !important;
  box-shadow: none !important;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.compare-bar__open.btn.btn--primary::before,
.compare-table__col-info .btn.btn--primary::before {
  display: none !important;
}
.compare-bar__open.btn.btn--primary:hover,
.compare-bar__open.btn.btn--primary:focus-visible,
.compare-table__col-info .btn.btn--primary:hover,
.compare-table__col-info .btn.btn--primary:focus-visible {
  background-color: #1f5fd8 !important;
  border-color: #1f5fd8 !important;
  color: #ffffff !important;
  transform: none !important;
  animation: none !important;
  box-shadow: none !important;
}
/* === /COMPARAR-FIX-COLOR === */


/* === HEADER-BADGE-ADAPTABLE ===
   El contador del carrito pasa de circulo fijo a pildora que se ensancha
   con el contenido. Con 1-2 digitos queda circular; con 3-4 se alarga.
   El tope de 999+ vive en el Liquid (sections/header.liquid) y en el JS
   (assets/theme.js, CartCount.onCartUpdate).
   Motivo: en una tienda de mayoreo el carrito llega a miles de piezas y un
   circulo de ancho fijo desborda siempre -- medido: con 992 la burbuja de
   24px mostraba "99" con el ultimo digito cortado.

   min-width usa var(--cart-count-size), NO un valor fijo: assets/theme.css
   define .cart-count { width/height: var(--cart-count-size, 2rem) } y la
   sube a 2.4rem dentro de @media (min-width: 640px) para .cart-icon
   .cart-count--absolute. Reutilizando la variable, el minimo sigue solo al
   breakpoint del tema (20px en movil, 24px en escritorio) sin duplicar
   media queries aqui.

   padding 0.3rem, no 0.5rem: medido, con 0.5rem un numero de dos cifras
   crecia a 26.8px contra los 24px de alto y dejaba de ser circulo. Con
   0.3rem "7" y "84" quedan en 24x24 exactos, "842" en 26.9 y "999+" en
   34.6 -- justo la tabla pedida.

   NO se toca color, tamano de fuente ni la posicion respecto al icono.
   Solo ancho y radio. El radio pasa de 50% a 999px porque un 50% sobre una
   caja no cuadrada daria una elipse.
   REVERTIR: borrar este bloque completo. */

.cart-count.cart-count--absolute {
  width: auto !important;
  min-width: var(--cart-count-size, 2rem) !important;
  padding-left: 0.3rem !important;
  padding-right: 0.3rem !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}
/* === /HEADER-BADGE-ADAPTABLE === */


/* === ORDEN-UNIDAD-OFERTA-NATIVA === (solo escenario B)
   La unidad ("/ pieza", "/ pz" en movil) pasa a ir INMEDIATAMENTE despues del
   precio activo, dejando el tachado nativo al final:

       Mayoreo   $ 2.64 MXN / pieza   $ 3.30 MXN

   POR QUE ESTE PATRON Y NO 'order'
   'order' solo reordena hermanos del mismo contenedor flex. En la tarjeta
   .product-card-v2__per es HIJO DIRECTO de .product-card-v2__price-block,
   mientras que el tachado nativo es BISNIETO
   (.f-price > .f-price__sale > .f-price-item--regular > s), encerrado junto
   al precio activo dentro de .f-price, que para el price-block es un unico
   item flex indivisible. Ninguna asignacion de 'order' puede meter la unidad
   entre esos dos. Se replica en su lugar el patron que el PDP ya usa y que
   ahi funciona: la unidad como ::after DENTRO del propio precio activo, para
   que viaje pegada a el. Sin display:contents.

   ALCANCE = SOLO ESCENARIO B, por el combinador de hermano '~':
     A (sin mayoreo)     .f-price sin --on-sale -> no coincide -> el <span> vive
     B (oferta nativa)   .f-price--on-sale      -> coincide    -> ::after + <span> oculto
     C (tramo HulkApps)  .f-price sin --on-sale -> no coincide -> el <span> vive
   En C el tachado sale de .product-card-v2__price-was (order:10 de
   CARD-WAS-PRICE-FIX), que ya cae al final solo.

   VALORES MEDIDOS EN VIVO sobre .product-card-v2__per (1440 y 390 iguales):
     color rgb(74,74,82) · font-size 12px · font-weight 500 ·
     letter-spacing normal · line-height 19.2px · opacity 1 · margin/padding 0
   Hay que declararlos TODOS porque el ::after hereda de .f-price-item--sale,
   que es rgb(224,50,44) / 22px (18px en movil) / 800 / letter-spacing -0.44px:
   sin estas cinco lineas el "/ pieza" saldria rojo, enorme y en negrita.

   margin-left 4px: el <span> original no tenia margen, su separacion venia
   del column-gap:4px del price-block. El ::after no es item flex, asi que
   pierde ese gap y hay que reponerlo para que la separacion no cambie.

   NO toca el bloque CARD-WAS-PRICE-FIX, ni .f-price__regular, ni pdp-maha.css,
   ni Liquid, ni JS, ni el color del precio activo o del tachado.
   REVERTIR: borrar este bloque completo.
   ========================================================================= */

.product-card-v2__price-block .f-price--on-sale .f-price__sale .f-price-item--sale::after {
  content: "/ pieza";
  color: rgb(74, 74, 82);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: normal;
  line-height: 19.2px;
  opacity: 1;
  margin-left: 4px;
  text-decoration: none;
  vertical-align: baseline;
}

/* El <span> hermano solo se oculta cuando lo precede un .f-price--on-sale */
.product-card-v2__price-block .f-price--on-sale ~ .product-card-v2__per {
  display: none !important;
}

/* Mismo breakpoint y misma abreviatura que PIEZA-ABBR-MOBILE
   (custom.css:3334, @media (max-width: 1023.98px), content "/ pz") */
@media (max-width: 1023.98px) {
  .product-card-v2__price-block .f-price--on-sale .f-price__sale .f-price-item--sale::after {
    content: "/ pz";
  }
}
/* === /ORDEN-UNIDAD-OFERTA-NATIVA === */

/* === MONEDA-MXN-MINUSCULA ===
   El codigo de moneda se ve en minuscula en todos los precios del tema:
   "$ 50.46 MXN" -> "$ 50.46 mxn". Solo presentacion: text-transform no
   altera el textContent, asi que el dato subyacente sigue siendo "MXN"
   para JS, lectores de pantalla que lean el DOM crudo y cualquier scraping.

   DOS SELECTORES, ambos verificados como contenedores de SOLO el precio
   ($, digitos, separadores y MXN -- los digitos y el $ no tienen caja, asi
   que lowercase solo puede afectar a "MXN"):

     .transcy-money    tarjetas de coleccion/busqueda/relacionados, tramos de
                       mayoreo, precio y tachado del PDP, barra sticky,
                       carrito completo (linea, subtotal, PRECIO DE LISTA,
                       TOTAL AHORRADO, TOTAL A PAGAR), mini-carrito y las 6
                       celdas de precio del modal de comparar.
     .calculated-total PDP "Total por N piezas" -- unico MXN visible fuera de
                       .transcy-money en todo el barrido.

   .pdp-price-currency NO lleva regla propia: es hijo de .transcy-money y
   text-transform se hereda (medido: pasa de none a lowercase solo).

   FUERA DE ALCANCE A PROPOSITO
   El selector de pais/moneda del header y el pie
   (button.disclosure__toggle / span.localization-form__currency) dice
   "Mexico (MXN $)": lleva palabras ademas del codigo y NO es un precio.
   No esta dentro de .transcy-money, asi que estas reglas no lo alcanzan
   -- verificado: se queda en text-transform: none.
   El checkout lo aloja Shopify y el CSS del tema no llega; ahi seguira
   diciendo "MXN". No se intenta arreglar.

   DEPENDENCIA CONOCIDA -- IMPORTANTE
   .transcy-money NO lo emite el tema: viene del money_format de la TIENDA
   (Ajustes -> General -> Formato de moneda), que hoy trae embebido el
   envoltorio <span class="transcy-money"> de la app Transcy. Ese ajuste es
   dato de tienda, compartido con el tema live. Si alguien cambia el formato
   de moneda o desinstala Transcy, el envoltorio desaparece del HTML y esta
   regla deja de aplicar SIN AVISO: los precios volverian a "MXN" en
   mayuscula y no habria error en ningun lado que lo delate.
   REVERTIR: borrar este bloque completo. */

.transcy-money,
.calculated-total {
  text-transform: lowercase;
}
/* === /MONEDA-MXN-MINUSCULA === */


/* === CUENTA-DROPDOWN-MOBILE-POS — RETIRADO ===
   Este bloque reposicionaba .account-menu.dropdown__nav bajo 1023.98px para
   que el panel de cuenta no chocara con la barra de busqueda en movil.

   Quedo MUERTO con CUENTA-MOVIL-NAVEGAR-SIN-MENU (ver assets/custom.js): en
   movil el panel ya no se abre nunca, porque el mouseenter que lo abria ahora
   esta guardado por matchMedia a escritorio. Sin panel abierto no hay nada que
   reposicionar, y dejar el media query huerfano solo confundiria a quien lo
   leyera despues.

   Si algun dia se reactiva el panel en movil, los valores medidos en vivo
   eran: top calc(100% + 8px); right 96px; left auto; max-height 70vh;
   overflow-y auto -- maximos de un barrido de 320 a 1023px, relativos a
   .header__top, que es el offsetParent real del panel.
   ========================================================================= */

/* === TITULO-TARJETA-3-LINEAS ===
   Titulo de la tarjeta card-product-v2 a 3 lineas en vez de 2, reservando
   SIEMPRE el alto de las 3 (min-height) para que los botones ATC de una misma
   fila sigan alineados aunque los titulos midan distinto.

   ORIGEN (NO se toca): component-card-product-v2.css:153-160 declara
     .product-card-v2__title a { -webkit-line-clamp: 2; min-height: 2.6em; }

   POR QUE EL SELECTOR LLEVA .product-card-v2 DELANTE:
   custom.css se enlaza en el <head> (layout/theme.liquid:79), pero
   component-card-product-v2.css lo enlazan las secciones, o sea dentro del
   <body> y por tanto DESPUES. Medido en vivo sobre el draft: custom.css = link
   indice 4, component-card-product-v2.css = link indice 17. Con la misma
   especificidad (0,1,1) este append quedaria INERTE -- entra en la cascada pero
   pierde por orden de aparicion; se verifico inyectandolo y no movio un pixel.
   El .product-card-v2 extra sube la especificidad a 0,2,1 y con eso gana, sin
   gastar un !important (entre dos !important vuelve a decidir la especificidad,
   y este tema ya acumula !important en custom.css, pdp-maha.css y
   cart-styles.css). No amplia el alcance: el h3 .product-card-v2__title
   siempre vive dentro de .product-card-v2.

   3.9em y no 58.5px, para que sigan siendo 3 lineas si el font-size cambia por
   breakpoint. Medido a 1440: font-size 15px, line-height 1.3 -> 19.5px por
   linea, min-height computado = 58.5px = 3 x 19.5.

   NO toca: theme.css .text-limit-* (la barra sticky de la PDP usa
   .text-limit-2-lines), pdp-maha.css .sticky-atc-bar__product-title, el bloque
   de precio, ni el "/ pieza".

   Costo aceptado: la tarjeta pasa de 846.6px a 866.1px de alto (+19.5).
   La brecha encima del precio no se mueve (6px antes y despues).

   REVERTIR: borrar este bloque completo.
   ========================================================================= */
.product-card-v2 .product-card-v2__title a {
  -webkit-line-clamp: 3;
  min-height: 3.9em;
}
/* === /TITULO-TARJETA-3-LINEAS === */

/* === BADGES-ET1-ASPECTO-NATIVO 2026-08-14 ===
   Da a las badges ET1 el aspecto visual del badge nativo de Hyper (.f-badge),
   conservando intactas la logica Liquid de ET1, los metacampos badge_1/badge_2
   y la ocultacion del badge nativo (bloque OV1).

   MEDIDO en hyper-theme-demo.myshopify.com a 1440 (identico en tarjeta, home y
   PDP; el nativo es una sola clase .f-badge con variantes solo de color):
     font-size 12px · font-weight 700 · line-height 18px · letter-spacing normal
     padding 2px 8px · border 1px solid transparent · border-radius 40px
     display flex · align-items center · box-sizing border-box
   El borde transparente NO es decorativo: 2+18+2 de padding/linea + 2x1 de
   borde = los 24.0px exactos de alto del nativo. Sin el, salen 22px.

   POR QUE EL SELECTOR ES .et1-badges .et1-badge (0,2,0) Y NO .et1-badge (0,1,0):
   no es por conflicto entre hojas -- `et1` solo aparece en custom.css y en los
   dos snippets de tarjeta, asi que ningun component-*.css compite. Es para
   ganarle por especificidad, y no por orden, a las dos reglas de ET1 que
   declaran estas mismas propiedades: L2972 y L2993. Depender del orden dentro
   del archivo funciona hoy pero se rompe si alguien mueve un bloque.

   CONSECUENCIA DELIBERADA EN MOVIL: ET1 L2992-2993 reduce el badge a
   font-size 10px / padding 3px 8px / gap 3px por debajo de 750px. Este bloque
   lo supersede (sin editarlo) porque el nativo de Hyper NO encoge en movil y el
   criterio es 24.0px exactos tambien a 390. Lo que si se respeta de esa regla
   movil es top: 6px / left: 6px -- aqui solo se declara `gap`, nunca top/left.

   COLORES: se adopta el tono nativo solo en las tres variantes que tienen
   equivalente (oferta/nuevo/mejor-vendido). Las otras cuatro son categorias
   propias de MAHA, su color ya comunica algo y se dejan sin tocar.

   CONTENEDOR DE PDP: clase propia .et1-badges-pdp, NO se reutiliza .et1-badges.
   Reutilizarla arrastraria position:absolute/top/left/z-index de L2960 y habria
   que resetear cuatro propiedades. El nativo de PDP (.product__badges) es fila:
   display flex · flex-wrap wrap · gap 6px · align-items center · margin 0 0 24px.
   Aqui el margen inferior es 8px, no 24px, porque el h1 de MAHA ya aporta su
   propio margin-bottom de 12px y 24 abriria un hueco que el nativo no tiene.

   NOTA: el bloque ET1-STRETCH no existe en el tema. Verificado en FASE A.

   REVERTIR: borrar este bloque completo, y en sections/main-product.liquid el
   bloque marcado BADGES-ET1-PDP entre el slot badge--text y product__block--title.
   ========================================================================= */

/* separacion entre badges apiladas en la tarjeta: 4px -> 6px como el nativo */
.et1-badges {
  gap: 6px;
}

/* contenedor de la PDP: fila, igual que .product__badges del nativo */
.et1-badges-pdp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

/* las seis propiedades del aspecto nativo, en tarjeta y en PDP */
.et1-badges .et1-badge,
.et1-badges-pdp .et1-badge {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: normal;
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: 40px;
}

/* las tres variantes con equivalente nativo adoptan su tono exacto */
.et1-badge--oferta        { background: #C4301C; }
.et1-badge--nuevo         { background: #0D8756; }
.et1-badge--mejor-vendido { background: #1D349A; }
/* === /BADGES-ET1-ASPECTO-NATIVO === */

/* =========================================================================
   TABS-INFORMACION-AZUL
   -------------------------------------------------------------------------
   La fila de pestanas de las paginas de informacion (Envios / Devoluciones /
   Pago seguro / Garantia / Rastrea tu pedido) pintaba su pastilla en NEGRO.
   Debe ser el azul de marca #3682f8, con el texto blanco que ya trae el tema.

   POR QUE AQUI Y NO EN EL PERSONALIZADOR:
   el negro no es un ajuste de la seccion. Sale de theme.css:2260-2265
       .btn--secondary::before, .btn--icon::before, ... {
         background-color: rgb(var(--color-button));
       }
   y --color-button (0,0,0) viene del Esquema de color 1 de settings_data.json,
   que es GLOBAL: cambiarlo alli pondria azul TODOS los botones del sitio.
   Por eso se corrige aqui, acotado a las dos instancias de la seccion.

   QUE SE PINTA:
   la pastilla no es un background: es el pseudo-elemento ::before, que crece
   de width:0 a width:100%. Solo se cambia su COLOR; la animacion de expansion
   (theme.css:2248 transition + component-tabs.css:90) queda intacta.

   ESTADO ACTIVO  -> component-tabs.css:90  [aria-selected=true]::before
   ESTADO HOVER   -> theme.css:2440-2445    :hover::before  (mismo ::before,
                     mismo color: sin esta regla el hover seguiria en negro)

   ALCANCE (deliberadamente acotado por instancia de seccion):
     tabs_content_cFxBzR -> templates/page.json (plantilla POR DEFECTO):
                            informacion-envios, preguntas-frecuentes,
                            en-que-te-podemos-ayudar, metodos-de-pago-1,
                            como-rastrear-mi-envio, politica-de-devolucion-tienda,
                            instrucciones-lavado
     tabs_content_U7x6kw -> templates/page.warranty.json (/pages/warranty)
   No se usa .tabs-nav--buttons a secas: es generico del tema y se fugaria a
   cualquier otra seccion de pestanas que se anada en el futuro.

   ESPECIFICIDAD: (0,4,1) contra los (0,3,1) de component-tabs.css, que carga
   DESPUES que custom.css (hoja #6 vs #68). Gana por especificidad, sin
   !important y sin tocar theme.css ni component-tabs.css.

   NO SE TOCA: el texto blanco (ya correcto, component-tabs.css:87), el borde
   de 1px, el radio, el padding, ni --color-button.

   REVERTIR: borrar este bloque completo hasta /TABS-INFORMACION-AZUL.
   ========================================================================= */

/* pestana ACTIVA: la pastilla expandida en azul de marca */
[id*="tabs_content_cFxBzR"] .tabs-nav--buttons [role="tab"][aria-selected="true"]::before,
[id*="tabs_content_U7x6kw"] .tabs-nav--buttons [role="tab"][aria-selected="true"]::before {
  background-color: #3682f8;
}

/* pestana en HOVER: mismo azul. El tema expande el ::before al pasar el cursor
   (theme.css:2440), asi que sin esto una pestana inactiva se pondria negra.
   Se replica su misma media query para no afectar dispositivos tactiles. */
@media (hover: hover) and (pointer: fine) {
  [id*="tabs_content_cFxBzR"] .tabs-nav--buttons [role="tab"]:hover::before,
  [id*="tabs_content_U7x6kw"] .tabs-nav--buttons [role="tab"]:hover::before {
    background-color: #3682f8;
  }
}
/* === /TABS-INFORMACION-AZUL === */


/* === TABS-INFORMACION-AZUL-BASE ===
   Complemento de TABS-INFORMACION-AZUL (mas arriba en este archivo).

   SINTOMA: al ENTRAR el cursor la pastilla es azul, pero al SALIR se ve
   encogerse una pastilla NEGRA.

   CAUSA: aquel bloque pinto de azul solo dos estados,
   [aria-selected=true]::before y :hover::before. El ::before en su estado
   BASE seguia en background-color: rgb(var(--color-button)) = negro
   (theme.css:2260-2265). Como lo unico que anima es el ancho (width 0 <-> 100%,
   transition: width 0.4s), al salir el cursor el elemento vuelve al estado
   base y se ve encogerse la pastilla ya en negro.
   Medido en vivo a 120ms de la salida, antes del arreglo:
       ::before  background-color rgb(0, 0, 0)  width 72.86px
   despues:
       ::before  background-color rgb(54, 130, 248)  width 86.58px

   ARREGLO: el azul pasa a ser el color de la pastilla en CUALQUIER estado.
   Lo unico que distingue activo / hover / inactivo sigue siendo su ANCHO,
   que es como el tema lo diseno. No se toca la duracion ni la curva.

   ESPECIFICIDAD (0,3,1): suficiente sin !important. Le gana al (0,1,1) de
   theme.css .btn--secondary::before, y nada en component-tabs.css pinta el
   ::before base a ese nivel o superior. Verificado en vivo inyectando la
   regla en la posicion real de custom.css (hoja #14) frente a
   component-tabs.css (hoja #213): las 5 pestanas quedan en rgb(54,130,248).
   Las reglas de arriba, con (0,4,1), siguen ganando y quedan intactas.

   ALCANCE: las mismas DOS instancias, ni una mas.
     tabs_content_cFxBzR -> templates/page.json (7 paginas)
     tabs_content_U7x6kw -> templates/page.warranty.json
   No se toca --color-button (global), ni theme.css, ni component-tabs.css.
   REVERTIR: borrar este bloque completo.
   ========================================================================= */

[id*="tabs_content_cFxBzR"] .tabs-nav--buttons [role="tab"]::before,
[id*="tabs_content_U7x6kw"] .tabs-nav--buttons [role="tab"]::before {
  background-color: #3682f8;
}
/* === /TABS-INFORMACION-AZUL-BASE === */

/* === FOOTER-INSCRIBIRSE-IGUAL-QUE-AGREGAR-AL-CARRITO ===  2026-08-17
   SUSTITUYE al bloque FOOTER-BOTON-INSCRIBIRSE-AZUL + CUPON-APLICAR-AZUL
   (retirado el mismo dia). Aquel solo pintaba la pastilla ::before, que solo
   se ve en hover: el boton seguia NEGRO en reposo, que no era lo pedido.

   DECISION: "Inscribirse" del footer y "Aplicar" del cupon se ven como el
   boton "Agregar al carrito" de la ficha de producto.

   VALORES MEDIDOS EN VIVO sobre .product-template .product-form__submit
   (assets/pdp-maha.css:802-815), en maha.com.mx:
     reposo : background rgb(54,130,248) | texto #fff | border 0 none
              border-radius 999px | 15px/700 | box-shadow rgba(54,130,248,.28) 0 8px 18px
     hover  : background rgb(31,95,216). No cambia nada mas.
   font-size y font-weight ya coincidian (15px/700): no se tocan.
   Tampoco se tocan padding ni width: el boton del footer convive en linea
   con el input del newsletter y el del carrito es width:100% en su columna;
   igualar el padding descuadraria el formulario, y no es color.

   POR QUE NO SE USA var(--pdp-blue): esa variable NO esta en :root, sino en
   .product-template (assets/pdp-maha.css:8), clase que theme.liquid pone en
   el <body> SOLO en paginas de producto. Comprobado leyendo desde el footer
   en la home: --pdp-blue, --pdp-blue-txt y --pdp-shadow-btn devuelven cadena
   VACIA. Referenciarlas fuera de la PDP no pintaria nada. Por eso el token
   propio --maha-azul/-hover en :root, con el MISMO valor, valido en todo el
   sitio. (El propio pdp-maha.css ya documenta este problema con --pdp-navy,
   que tuvo que moverse a :root por lo mismo.)

   LA PASTILLA ::before, y por que NO se replica tal cual: en el "Agregar al
   carrito" el ::before es blanco y en hover se expande a 701px por encima
   del fondo; como el texto tambien es blanco, el boton queda BLANCO CON EL
   TEXTO INVISIBLE. Es un defecto real del ATC, no un efecto buscado.
   Aqui la pastilla se pinta del mismo azul del hover, asi que la animacion
   nativa se conserva (no se toca su width ni su duracion) pero el resultado
   es el que el ATC pretende: el boton pasa de #3682f8 a #1f5fd8 con el texto
   siempre legible.

   CONTRASTE: blanco sobre #3682f8 = 3.68:1, que NO cumple AA (4.5:1 para
   15px/700). Es exactamente el mismo contraste que el "Agregar al carrito"
   ya en produccion, y se acepta por igualarlo a peticion expresa. En hover,
   blanco sobre #1f5fd8 = 5.70:1, si cumple.

   NO se tocan --color-button ni --color-button-text (globales), ni
   .btn--primary de forma global, ni pdp-maha.css.
   REVERTIR: borrar este bloque completo; ambos botones vuelven a negro.
   ========================================================================= */
:root {
  --maha-azul: #3682f8;
  --maha-azul-hover: #1f5fd8;
  --maha-azul-sombra: 0 8px 18px rgba(54, 130, 248, .28);
}

.footer-newsletter__form .btn.btn--primary,
.cart-discount__form .btn.btn--primary {
  background: var(--maha-azul);
  color: #ffffff;
  border: 0 none;
  border-radius: 999px;
  box-shadow: var(--maha-azul-sombra);
}

.footer-newsletter__form .btn.btn--primary:hover,
.footer-newsletter__form .btn.btn--primary:focus,
.footer-newsletter__form .btn.btn--primary:focus-visible,
.footer-newsletter__form .btn.btn--primary:active,
.cart-discount__form .btn.btn--primary:hover,
.cart-discount__form .btn.btn--primary:focus,
.cart-discount__form .btn.btn--primary:focus-visible,
.cart-discount__form .btn.btn--primary:active {
  background: var(--maha-azul-hover);
  color: #ffffff;
}

/* La pastilla que se expande, en todos los estados, del color del hover:
   conserva la animacion nativa y evita el blanco-sobre-blanco del ATC. */
.footer-newsletter__form .btn.btn--primary::before,
.footer-newsletter__form .btn.btn--primary:hover::before,
.footer-newsletter__form .btn.btn--primary:focus::before,
.footer-newsletter__form .btn.btn--primary:focus-visible::before,
.footer-newsletter__form .btn.btn--primary:active::before,
.cart-discount__form .btn.btn--primary::before,
.cart-discount__form .btn.btn--primary:hover::before,
.cart-discount__form .btn.btn--primary:focus::before,
.cart-discount__form .btn.btn--primary:focus-visible::before,
.cart-discount__form .btn.btn--primary:active::before {
  background-color: var(--maha-azul-hover);
}

/* Texto blanco en todos los estados: theme.css:2446 lo invierte a negro en
   hover para compensar la pastilla blanca original, que aqui ya no existe. */
.footer-newsletter__form .btn.btn--primary .btn__text,
.footer-newsletter__form .btn.btn--primary:hover .btn__text,
.footer-newsletter__form .btn.btn--primary:focus .btn__text,
.footer-newsletter__form .btn.btn--primary:focus-visible .btn__text,
.footer-newsletter__form .btn.btn--primary:active .btn__text,
.cart-discount__form .btn.btn--primary .btn__text,
.cart-discount__form .btn.btn--primary:hover .btn__text,
.cart-discount__form .btn.btn--primary:focus .btn__text,
.cart-discount__form .btn.btn--primary:focus-visible .btn__text,
.cart-discount__form .btn.btn--primary:active .btn__text {
  color: #ffffff;
}
/* === /FOOTER-INSCRIBIRSE-IGUAL-QUE-AGREGAR-AL-CARRITO === */

/* === FOOTER-FACTURACION-SIN-SUBRAYADO ===  2026-08-19
   Los enlaces de la columna "Facturacion" del pie (bloque image_text, cuyo
   texto pasa por .rte, el renderizador de richtext del tema) salian
   subrayados en reposo porque theme.css:1834 fija
   text-decoration-line:underline en TODO enlace dentro de richtext, en TODO
   el sitio (descripciones de producto, paginas de politicas, etc.). La
   columna vecina "Informacion" es un bloque tipo menu, sin ese subrayado
   permanente: usa .reversed-link (theme.css:5260-5273), que solo anima un
   subrayado al pasar el mouse via background-size 0 -> 100%. Medido en vivo:
   ambas columnas ya comparten el mismo color heredado (#666666, subtext) y
   el mismo font-weight (500) -- la unica diferencia real era la decoracion.

   DECISION: igualar "Facturacion" al comportamiento de "Informacion" --
   sin tocar theme.css ni la regla global .rte a, que sigue subrayando el
   richtext en el resto del sitio (paginas de producto, politicas, etc. NO
   se ven afectadas). Se reutiliza el MISMO mecanismo de fondo-degradado y
   las MISMAS variables ya existentes en :root (--reversed-link-gap,
   --transform-origin-start/-end, --animation-default): no se inventa
   ningun valor nuevo. --reversed-link-gap normalmente solo existe dentro de
   .reversed-link (theme.css:5261); aqui se le da el mismo valor 0.1rem como
   fallback de var(), porque este selector no lleva esa clase.

   Se gana por ESPECIFICIDAD: este selector es (0,3,1) contra (0,1,1) de
   .rte a, sin !important. El richtext no tiene <span class="reversed-link__text">
   dentro del enlace, asi que se usa la variante de theme.css pensada para
   un <a> suelto (theme.css:5263-5268 y 6499-6503), reescrita con selector
   acotado solo a este bloque del pie. La animacion respeta
   prefers-reduced-motion y solo corre con mouse (hover:hover / pointer:fine),
   igual que el .reversed-link original.

   Foco por teclado: no hace falta nada aqui. *:focus-visible
   (theme.css:1134) ya pone el mismo anillo de foco en los dos tipos de
   enlace del pie -- es un token global, ya identico en ambas columnas.
   Visitado: por restriccion de privacidad de los navegadores, :visited no
   puede animar background-image en ningun sitio (tampoco en el
   .reversed-link original de "Informacion"), asi que esta regla no
   introduce ninguna diferencia nueva ahi: ambas columnas se comportan igual
   -- ninguna distingue visitado.

   Acotado a .footer-block--image_text .footer-image-box__text.rte a. NO
   alcanza ningun otro .rte del sitio.
   REVERTIR: borrar este bloque completo; los enlaces de "Facturacion"
   vuelven a su subrayado permanente. */
.footer-block--image_text .footer-image-box__text.rte a {
  text-decoration-line: none;
  background: linear-gradient(to var(--transform-origin-end), currentColor, currentColor) 0 var(--reversed-link-gap, 0.1rem) / 0 var(--reversed-link-gap, 0.1rem) no-repeat;
  background-position-x: var(--transform-origin-end);
  background-position-y: bottom;
  transition: background-size var(--animation-default), color var(--animation-default);
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .footer-block--image_text .footer-image-box__text.rte a:hover {
    background-position-x: var(--transform-origin-start);
    background-size: 100% var(--reversed-link-gap, 0.1rem);
    background-position-y: bottom;
  }
}
/* === /FOOTER-FACTURACION-SIN-SUBRAYADO === */

/* === FOOTER-FACTURACION-HOVER-COLOR ===  2026-08-19
   Segundo cabo del mismo defecto, medido en vivo tras aplicar el fix de arriba:
   en hover, "Facturacion" oscurecia a NEGRO y "Informacion" se quedaba en GRIS.
   Los dos parten del mismo gris en reposo (rgb(102,102,102), el --color-subtext
   de scheme-1) -- solo el hover diferia.

   POR QUE: el gris de "Informacion" nunca cambia en hover porque el tema lo
   trae asi a proposito -- theme.css:6504-6508 (.reversed-link ... :hover
   .reversed-link__text) trae su propia declaracion de color puesta en
   comentario de fabrica (la linea que asignaria rgb(var(--color-foreground))
   esta desactivada, no borrada). "Facturacion" en cambio SI cambia, porque
   hereda el hover de .rte a (theme.css:1841-1843): color:
   rgb(var(--color-link)) -- que aqui SI es un rgb() valido (sin alpha), a
   diferencia del rgba(var(--color-link), var(--alpha-link)) del reposo (esa
   si es invalida porque --alpha-link no existe, ver FOOTER-SISTEMA/S2b).

   DECISION: iguala "Facturacion" a "Informacion" (gris fijo, sin cambio en
   hover) -- NO al reves. Tocar el comentario de theme.css:6504-6508 cambiaria
   el hover de TODO enlace .reversed-link del sitio (menus, drawer, tarjetas);
   automaticamente descartado, fuera del alcance del pie.

   Se reutiliza el MISMO token que ya pinta el reposo de este mismo texto:
   --color-subtext / --color-subtext-alpha (theme.css:5402-5403, el mismo que
   usa la clase .text-subtext del contenedor). No se inventa ningun valor.
   Selector (0,4,1) contra (0,1,1) de ".rte a:hover" -- gana por especificidad,
   sin !important, acotado a la misma columna que el bloque de arriba.
   REVERTIR: borrar este bloque; el hover vuelve a oscurecer a negro. */
.footer-block--image_text .footer-image-box__text.rte a:hover {
  color: rgba(var(--color-subtext), var(--color-subtext-alpha, 1));
}
/* === /FOOTER-FACTURACION-HOVER-COLOR === */

/* === LOOKBOOK-TARJETA-VERTICAL === */
/* La tarjeta "Shop this look" (.lbcard__popup .drawer__inner, ancho fijado en
   component-lookbook-card-modal.css:78 con width: clamp(50%, 37.5rem, 100%))
   toma su ancho del propio mosaico, no del viewport, porque .lbcard__popup es
   position:absolute dentro de .lbcard (el mosaico). Cuando el mosaico mide
   menos que el valor preferido del clamp, la fila .lbcard__product se aprieta:
   el precio se parte en varios renglones y la flecha "ver producto"
   (a.btn.btn--icon-circle, sin flex-shrink:0 a diferencia de la miniatura
   que ya trae shrink-0 en el Liquid) se aplasta muy por debajo de sus 32px.
   Medido: se repite igual en mosaicos verticales Y horizontales angostos, no
   es un problema de orientacion.
   No se fija un ancho minimo propio para la tarjeta: mediado colLeft=6px en
   el primer mosaico de la fila a 768/1024px, y la tarjeta crece hacia la
   izquierda (justify-content:flex-end) -- un piso fijo la sacaria de la
   ventana ahi, y un max-width contra el viewport no lo resuelve porque lo
   que limita es la distancia al borde del mosaico, no el ancho de pantalla.
   En vez de eso: el precio no se parte (nowrap sobre el nodo que Transcy no
   repinta, confirmado con MutationObserver 0 mutaciones en 3.5s), la
   miniatura cede ancho, la flecha nunca baja de 32px, y la fila tiene
   permiso para envolver -- cuando thumb + flecha + precio sin partir no
   caben, la columna de texto baja a su propio renglon con el ancho
   completo de la tarjeta, dentro del clamp() nativo, sin excederlo nunca.
   Acotado a .section--lookbook-slider (lookbook-banner usa .lookbook-icon__card,
   otra clase, y no se toca). Solo desde 768px: el patron movil (<768px, el
   drawer se mueve a <body> y usa 100% del viewport) no tiene este defecto y
   no se toca.
   order en la flecha y en .lbcard__product-info: sin esto, cuando info
   envuelve (flex-grow:1, ocupa el 100% de su renglon) la flecha -- que viene
   despues en el HTML -- se queda sin lugar en ese mismo renglon y cae a un
   TERCER renglon propio, mas abajo del alto para el que esta pensado
   .fixed-overlay (el respaldo invisible del popup, dimensionado al mosaico,
   no al contenido). Ahi la flecha quedaba geometricamente detras del
   respaldo y perdia el clic. Con order, la miniatura y la flecha se quedan
   juntas en el primer renglon (ninguna de las dos crece) y solo la columna
   de texto cae a su renglon propio -- dos renglones, no tres.

   LOOKBOOK-TARJETA-EN-UNA-FILA (mismo bloque, editado): el patron de <768px
   (drawer a ancho completo) ya resuelve esto en una sola linea por producto;
   en laptop (1152-1600) la fila seguia envolviendo SIEMPRE porque el relleno
   de .lbcard__popup escala a 3rem justo ahi (component-lookbook-card-modal.css,
   min-width:1280px) y se comia ~48-60px. Medido en orden, deteniendose en
   cuanto dejo de envolver en los 6 anchos de laptop (no se gastaron mas
   palancas de las necesarias):
     1) relleno de .lbcard__popup, 2rem/3rem -> 1rem: resuelve 1366/1440/1536/1600.
     2) miniatura, 5rem -> 3.5rem: resuelve tambien 1280.
     3) separacion horizontal (columna) de .lbcard__product, gap-3 (1.2rem)
        -> gap-2 (0.8rem, token real de la escala de espaciado del tema):
        resuelve tambien 1152, el ultimo que faltaba.
   La 4a palanca (bajar el titulo un escalon a text-sm) NO hizo falta -- el
   texto ya cabe sin ella -- y no se aplico, para no gastar de mas.
   El "order" de la flecha (arriba) se queda TAL CUAL, sin neutralizar: sin
   el, el mosaico de 768px vertical (el unico que sigue envolviendo, ya que
   sus 166px no alcanzan ni con las tres palancas) vuelve a poner la flecha
   en un tercer renglon detras de .fixed-overlay -- el defecto que esto
   arreglo. Con el order puesto, en 768 la fila envuelve igual pero la
   flecha se mantiene clicable (medido con elementFromPoint): el bloqueo se
   cerro solo, sin tocar nada mas, al bajar el alto general de la fila.
   Efecto secundario aceptado: en la fila de una sola linea (1152-1920 y
   768/1024/1440+ horizontal) la flecha queda junto a la miniatura, no en el
   extremo derecho como en movil (ahi no hay wrap y el orden natural del
   flex ya la manda al extremo derecho sola). Ver conversacion para el
   detalle numerico de por que se prefirio asi. */
@media (min-width: 768px) {
  .section--lookbook-slider .lbcard__product {
    flex-wrap: wrap;
    min-width: 0;
    column-gap: 0.8rem;
  }
  .section--lookbook-slider .lbcard__popup {
    padding: 1rem;
  }
  .section--lookbook-slider .lbcard__product-thumbnail {
    width: 3.5rem;
  }
  .section--lookbook-slider .lbcard__product-price .f-price-item {
    white-space: nowrap;
  }
  .section--lookbook-slider .lbcard__product > a.btn.btn--icon-circle {
    flex-shrink: 0;
    order: 1;
  }
  .section--lookbook-slider .lbcard__product-info {
    order: 2;
  }
}
/* === /LOOKBOOK-TARJETA-VERTICAL === */

/* === FOOTER-WHATSAPP-CLEARANCE ===  2026-08-19
   El boton flotante de WhatsApp (una app, no se toca) tapaba la fila de iconos de
   pago del pie al llegar al final de la pagina en movil. Medido en vivo, con la
   pagina scrolleada hasta el fondo real (no solo el footer a la vista) y a la
   altura de viewport de un telefono real (844px, no un viewport artificialmente
   alto que esconde el problema):

     boton WhatsApp: 54px de alto, su borde inferior queda siempre a 58px del
     fondo del viewport (posicion fija de la app). Zona de exclusion: 54+58=112px
     medidos desde el fondo absoluto de la pagina.

     A 320px de ancho (el mas angosto, y el unico donde solapaba): la fila de
     iconos de pago terminaba a solo 80px del fondo, es decir 32px DENTRO de esa
     zona de exclusion -- solape real de 32x24px contra el boton.

   Se mueve lo nuestro, no el boton de la app: 12rem (120px en este tema, donde
   1rem = 10px por el font-size:62.5% de html en theme.css) de padding-bottom
   extra, sumados al padding_bottom de la seccion (que en movil ya aporta unos
   12px via su propia formula). Total resultante ~132px, por encima de los 112px
   que necesita el boton, con margen. Acotado a <=989px (breakpoint del tema
   donde el pie deja de ser rejilla) para no tocar nada en escritorio, donde no
   habia solape.
   REVERTIR: borrar este bloque; vuelve el solape en 320px. */
@media (max-width: 989px) {
  .footer .footer__bottom {
    padding-bottom: 12rem;
  }
}
/* === /FOOTER-WHATSAPP-CLEARANCE === */

/* === FOOTER-CHEVRON-GIRO ===  2026-08-19
   Cambiar icon-plus-toggle por icon-caret-down (ver footer-image-text-top.liquid)
   dejo el chevron sin girar al abrir/cerrar. Encontrado por CDP
   (CSS.getMatchedStylesForNode): hay DOS mecanismos de giro distintos en
   theme.css, y para este icono concreto competian por la misma propiedad:

     1. theme.css:3051-3053 y 3075-3077 -- el mecanismo PENSADO para
        icon-caret-down: define --tf-scale-y (1 en reposo, -1 abierto) y
        theme.css:3051 lo consume con transform: scaleY(var(--tf-scale-y))
        rotate(0). Especificidad (0,2,0). Confirmado con CDP que la variable
        SI cambia de valor correctamente al abrir/cerrar -- el mecanismo de
        estado funciona.

     2. theme.css (regla generica de otro acordeon del tema, no escrita para
        el pie): details[open] > .accordion-details__summary svg { transform:
        rotate(180deg) }. Especificidad (0,2,2) -- gana por tener un
        selector de atributo [open] y un tipo (svg) de mas. Como el <details
        is="footer-details"> del pie SIEMPRE trae el atributo open presente
        en el HTML (el estado real lo lleva aria-expanded, no el atributo
        nativo), esta regla generica esta activa todo el tiempo y le gana a
        la scaleY de arriba.

   Por que a icon-plus-toggle no le pasaba esto: su giro (theme.css:3056-3059
   y 3078-3080) rota .icon-plus-toggle path.vertical -- un <path> HIJO del
   svg, no el <svg> mismo. La regla generica de arriba solo apunta al <svg>/
   <img>, asi que nunca competia con el giro del "+".

   FIX: mismo valor que ya intentaba poner theme.css:3051 (scaleY(-1)
   rotate(0)), no un giro inventado -- solo con mas especificidad para
   ganarle a la regla generica, acotado a las columnas del pie. Sin
   !important.
   REVERTIR: borrar este bloque; el chevron vuelve a no girar (pero sigue
   siendo el chevron correcto, solo estatico). */
.footer-block--image_text .accordion-details[aria-expanded=true] .accordion-details__summary .icon-caret-down {
  transform: scaleY(-1) rotate(0);
}
/* === /FOOTER-CHEVRON-GIRO === */

/* === FOOTER-SISTEMA-VISUAL ===  2026-08-19
   Acordeon en celular / columnas abiertas con flecha en escritorio, mismo
   punto de corte que el propio tema.

   PUNTO DE CORTE: no se inventa ni se copia de otra parte. El pie deja de
   ser acordeon y pasa a rejilla de columnas abiertas exactamente en
   theme.css:7775 (@media (min-width: 1024px) { .footer-block { width:
   calc(...) } .footer__top-wrapper {...} }), y el icono de acordeon (el
   <span class="... lg:hidden"> en footer-image-text-top.liquid) se oculta
   en ese mismo punto via theme.css:6063 (@media (min-width: 1024px) {
   .lg\:hidden { display:none } }). Los dos mecanismos YA usaban el mismo
   numero -- 1024px -- antes de este cambio; no habia zona 990-1023 con
   ambos o ninguno. La flecha de abajo se ata al MISMO valor literal
   (1024px) por esa razon: no existe una variable/mixin CSS en el tema para
   este breakpoint (no es un custom property, es un numero repetido en dos
   @media distintos), asi que igualar el numero exacto es la unica forma de
   garantizar que nunca se desalineen.
   Verificado con Playwright en 988/989/990/991 y 1023/1024/1025: ver informe.

   1) ENCABEZADOS DE COLUMNA -- mayusculas + tracking + un paso mas chico,
   en las 4 columnas de enlaces, igual en movil (acordeon) y escritorio.
   Tamano: no se inventa un px nuevo -- se reusa la formula de .text-sm
   (calc(var(--font-body-size) * 0.9)), el unico paso "un escalon mas chico"
   que ya existe en theme.css, porque h6 ya es el heading mas pequeno del
   tema (no hay h7). text-transform/letter-spacing: el tema no tiene un
   token activo para esto (.text-subheading existe pero su valor global en
   settings_data.json es transform:none/letter-spacing:0 -- inerte), asi
   que aqui son propiedades nuevas, no un token reusado; 0.04em es un valor
   moderado estandar para mayusculas pequenas, no una medida del tema.

   COLOR -- 2026-08-19, FOOTER-COLOR-Y-HORARIO: el acento #c4301c (probado
   en la tarea anterior, 5.55:1 de contraste, pasaba AA) se prueba y se
   descarta por decision de Guillermo. Vuelve a negro -- rgb(var(--color-
   foreground)), el mismo token que ya usaba el resto del pie antes de que
   existiera este bloque, no un #000000 literal. Mayusculas/tracking/tamano
   NO se revierten, solo el color. */
.footer-block__heading {
  color: rgb(var(--color-foreground));
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: calc(var(--font-body-size) * 0.9);
}

/* 2) FLECHAS SOLO EN ESCRITORIO -- via ::before en el <p> que envuelve cada
   <a> (cada enlace del pie vive solo en su propio <p><a>...</a></p>, ver
   footer-group.json), nunca en el texto del enlace (el mismo dato de
   heading/text se reutiliza en otras superficies). :has() ya esta en uso
   en este mismo theme.css (linea 1626, 1557, 3257...), no es una novedad
   del proyecto. Acotado a p que SI contienen un enlace, para no ponerle
   flecha al parrafo de horario de tienda (que no es un link).
   Animacion: NO se agrega ninguna. Se busco un hover-slide ya existente en
   el tema (translateX en :hover, o un patron de icono que se desliza) y no
   hay ninguno -- solo se encontraron translateX de estado (menus, drawers,
   switches), no micro-interacciones de hover en enlaces. Por instruccion
   explicita, sin hover-slide existente no se inventa una.
   Sangria de la segunda linea: padding-left en el <p> (no en el <a>) hace
   que TODAS las lineas del texto, incluida una que envuelve a dos
   renglones, arranquen en el mismo punto -- la flecha va position:absolute
   en ese hueco, asi que no desplaza el texto. Medido con Playwright en un
   enlace de dos lineas ("Vasos de plastico personalizados"): ver informe.

   COLOR -- 2026-08-19, FOOTER-COLOR-Y-HORARIO: pasa de apagado (--color-
   subtext) al azul de la tienda, var(--maha-azul). Esa variable YA existe
   en :root (assets/custom.css, bloque FOOTER-INSCRIBIRSE-IGUAL-QUE-
   AGREGAR-AL-CARRITO, fechado 17/ago) -- se LEE con var(), no se copia el
   hex a mano ni se toca esa declaracion. No hizo falta "extraerla": ya era
   una custom property en :root, global, no un literal repetido dentro de
   un selector -- referenciarla desde aqui no requiere editar ese bloque.
   Solo la flecha lleva el azul; el texto del enlace no se toca.
   HOVER: medido en vivo (no supuesto) -- el texto del enlace usa el mismo
   color en reposo y en hover (bloque FOOTER-FACTURACION-HOVER-COLOR
   neutraliza el oscurecimiento nativo de .rte a:hover a proposito, para
   igualar la columna "Informacion"); la unica senal de hover es el
   subrayado animado del propio texto, no un cambio de color. Como el
   enlace no tiene un estado de hover EN COLOR que acompañar, la flecha
   tampoco cambia en hover -- se sigue la instruccion "si no tiene, sin
   cambio" en vez de inventar una transicion.

   SEPARACION FLECHA-TEXTO -- 2026-08-19, AÑADIDO: la flecha quedaba pegada
   al texto (medido antes de este cambio: el glyph "→" a 15px de fuente
   rinde ~15px de ancho via canvas.measureText, y el padding-left de 1.6rem
   ya reservaba solo 16px -- 1px de hueco real, imperceptible).
   La sangria colgante y la separacion son EL MISMO numero en dos lugares:
   el padding-left del <p> fija donde arranca el texto en TODAS las lineas
   (por eso no se puede tocar sin recalcular), y la flecha se queda en
   left:0 sin ancho reservado, asi que agrandar el padding-left es lo unico
   que hace falta para abrir hueco -- mover uno mueve el otro, a proposito.
   Token usado para el hueco añadido: --f-column-gap-2xs (0.8rem / 8px),
   el escalon MAS CHICO de la escala real de gaps del tema (theme.css:401-
   406, .f-grid--gap-2xs), reusado como valor, no como custom property viva
   (esa variable solo existe dentro de .f-grid--gap-2xs, fuera de ese
   contexto no resuelve nada -- mismo problema que --pdp-blue documentado
   arriba). padding-left nuevo: 1.6rem (reserva de la flecha, sin tocar) +
   0.8rem (hueco) = 2.4rem. Medido en vivo tras el cambio: separacion real
   9px (ver informe) -- cercano al token de 8px, la diferencia es el ancho
   exacto del glyph "→" en subpixeles, no un numero inventado aparte. */
@media (min-width: 1024px) {
  .footer-block--image_text .footer-image-box__text.rte p:has(> a) {
    position: relative;
    padding-left: 2.4rem;
  }
  .footer-block--image_text .footer-image-box__text.rte p:has(> a)::before {
    content: "→";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--maha-azul);
  }
}

/* 3) BLOQUE DE CONTACTO (seccion multicolumn_icon_UyeVkw, arriba del
   <footer>) -- icono + micro-etiqueta en mayusculas atenuada + valor en
   color normal. Los iconos ya existen (chat/phone/paperplane/map-pin), no
   se tocan. Se reutiliza el mismo par de clases que ya renderiza la
   seccion (multicolumn-card__title = la etiqueta "Servicio al cliente" /
   "Mandanos un mensaje" / "Ponte en contacto" / "Direccion"; multicolumn-
   card__text = el valor -- horario, telefono, correo, direccion), solo se
   invierte cual de los dos lleva el color apagado: hoy el titulo va en
   texto normal y el valor en .text-subtext (apagado); pedido es al reves. */
/* El wrapper real de esta seccion NO es #shopify-section-multicolumn_icon_UyeVkw:
   Shopify le antepone el id numerico del grupo de secciones
   (shopify-section-sections--23226905559252__multicolumn_icon_UyeVkw,
   confirmado en vivo via Playwright). Ese numero es el id interno del grupo
   y no es un dato estable para fijarlo a mano, asi que se ancla por el
   sufijo, que si es estable (es el nombre de bloque en footer-group.json). */
[id$="__multicolumn_icon_UyeVkw"] .multicolumn-card__title {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: calc(var(--font-body-size) * 0.85);
  color: rgba(var(--color-subtext), var(--color-subtext-alpha, 1));
}
[id$="__multicolumn_icon_UyeVkw"] .multicolumn-card__text {
  color: rgb(var(--color-foreground));
}

/* 3.1) SEPARACION VIÑETA-TEXTO -- 2026-08-19, AÑADIDO: intento de igualar
   la distancia marcador-texto del horario a la de la flecha (9px medidos,
   ver punto 2 arriba). NO se toca theme.css:1819 (.rte ul, la regla
   global de list-style-type, que afecta a TODO el sitio) -- se agrega una
   regla nueva, acotada solo a este bloque del pie, igual que el resto de
   FOOTER-SISTEMA-VISUAL. Se sube el padding-left del <ul> de 20px (el que
   trae el navegador por defecto) a 2.4rem (24px), el MISMO valor que ahora
   reserva el <p> de la flecha -- iguala el espacio TOTAL reservado antes
   del texto.
   LIMITE HONESTO: el hueco visible entre el punto disc y el texto NO es un
   valor que CSS deje fijar en px para un marcador nativo (list-style-
   position:outside) -- el navegador decide cuanto del padding-left ocupa
   el marcador y cuanto queda de aire; no es lo mismo que la flecha
   (position:absolute con ancho propio, control total). Medido en vivo
   despues de este cambio: ver informe -- si no coincide exacto con 9px es
   este limite, no un error, y no se fuerza mas sin reemplazar el marcador
   nativo por uno propio (lo que exigiria abandonar theme.css:1819 para
   este bloque). */
.footer-block--image_text .footer-image-box__text.rte ul {
  padding-left: 2.4rem;
}

/* 4) Etiqueta "Aceptamos" antes de los iconos de pago (footer.liquid).
   text-subtext/text-sm ya existian (color y tamano); solo mayusculas +
   tracking son nuevos, mismo tratamiento que el resto del bloque. */
.footer__payment-label {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.8rem;
}
/* === /FOOTER-SISTEMA-VISUAL === */