/** Shopify CDN: Minification failed

Line 15:0 All "@import" rules must come first

**/
/* ============================================================
   MEXOUTDOOR — Global styles v10
   Paleta: Negro #0d0d0d | Verde #5A8F2E | Naranja #E85D20 | Blanco #F0EDE8
   ============================================================ */
@font-face {
font-family: 'AsphalticScratch';
src: url('/cdn/shop/files/ASPHALTIC_SCRATCH_ROUNDED_PERSONAL_USE.ttf?v=1774029795') format('truetype');
font-weight: normal; font-style: normal; font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;600;700&family=Barlow+Condensed:wght@400;600;700;900&display=swap');
:root {
--mxo-black:        #000000;
--mxo-carbon:       #0d0d0d;
--mxo-graphite:     #161616;
--mxo-steel:        #222222;
--mxo-muted:        #999999;
--mxo-light:        #cccccc;
--mxo-white:        #F0EDE8;
--mxo-green:        #5A8F2E;
--mxo-green-dark:   #3e6a1e;
--mxo-orange:       #E85D20;
--mxo-orange-dark:  #c94a14;
--mxo-font-brand:   'AsphalticScratch', 'Barlow Condensed', sans-serif;
--mxo-font-display: 'Barlow Condensed', sans-serif;
--mxo-font-body:    'Barlow', sans-serif;
}
/* ── BASE ──────────────────────────────────────────────────── */
body { background: var(--mxo-black) !important; color: var(--mxo-white) !important; font-family: var(--mxo-font-body) !important; }
/* ── HEADER ────────────────────────────────────────────────── */
.header { background: rgba(0,0,0,0.95) !important; backdrop-filter: blur(20px); box-shadow: 0 2px 24px rgba(0,0,0,0.6) !important; }
.header__row--top, .header__row, .header-wrapper { border-bottom: none !important; }
header-group { border-bottom: none !important; position: relative !important; z-index: 100 !important; }
.header__heading-link, .header__heading { font-family: var(--mxo-font-brand) !important; font-size: 30px !important; letter-spacing: 0.06em !important; color: var(--mxo-white) !important; text-transform: lowercase !important; }
.header__menu-item a, .header__menu-item span { font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: var(--mxo-light) !important; transition: color 0.2s !important; }
.header__menu-item:hover a { color: var(--mxo-green) !important; }
.header__icon { color: var(--mxo-light) !important; }
.header__icon:hover { color: var(--mxo-green) !important; }
/* Horizon 4.1.3 renombro las clases del menu superior y de los iconos de accion
   (antes .header__menu-item / .header__icon, ahora .menu-list__link / .header-actions__action).
   Las reglas de arriba ya no aplican a nada -> el texto del menu y los iconos
   quedaban con el color por defecto (negro) sobre el header oscuro = invisibles.
   Se agregan los selectores equivalentes con las clases nuevas. El estado activo
   (.menu-list__link--active) y el hover ya estan cubiertos mas abajo. */
.menu-list__link { font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: var(--mxo-light) !important; transition: color 0.2s !important; }
.header-actions__action { color: var(--mxo-light) !important; }
.header-actions__action:hover { color: var(--mxo-green) !important; }
@media(max-width:768px) { .header__heading-link { font-size: 22px !important; } }
/* ── MENÚ MÓVIL ────────────────────────────────────────────── */
@media (max-width: 749px) {
.menu-drawer-container { z-index: 9999 !important; position: relative !important; }
.menu-drawer { z-index: 9999 !important; }
.menu-drawer__backdrop { z-index: 9998 !important; }
.mxo-hero { z-index: 1 !important; position: relative !important; }
.mxo-hero__controls, .mxo-hero__bar { z-index: 2 !important; }
.menu-drawer, .menu-drawer * { color: #0d0d0d !important; }
}
/* ── MEGA-MENU DESKTOP ────────────────────────────────────────── */
@media (min-width: 750px) {
.mega-menu { background: #ffffff !important; }
.mega-menu, .mega-menu * { color: #0d0d0d !important; }
.mega-menu__link:hover, .menu-list__link:hover,
.header__menu-item:hover > a, .header__menu-item:hover > span { color: #E85D20 !important; font-weight: 700 !important; }
.menu-list__link--active { color: #E85D20 !important; font-weight: 700 !important; }
}
/* ── HORIZON SCHEME FIX ──────────────────────────────────────── */
.color-scheme-6 { --color-border: transparent !important; --color-border-opacity: 0 !important; }
[class*="header"] { box-shadow: none !important; }
.header { box-shadow: 0 2px 24px rgba(0,0,0,0.6) !important; }
/* ── FORMULARIOS GLOBALES ──────────────────────────────────── */
input:not(.quantity-selector input):not([name="quantity"]):not([class*="email-signup"]):not([class*="cart-discount"]),
select, textarea {
background: var(--mxo-steel) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
color: var(--mxo-white) !important;
border-radius: 0 !important; font-size: 14px !important;
}
input:not(.quantity-selector input):focus, select:focus, textarea:focus { border-color: var(--mxo-green) !important; outline: none !important; }
input::placeholder, textarea::placeholder { color: var(--mxo-muted) !important; }
@media(max-width:768px) { input, select, textarea { font-size: 16px !important; padding: 14px 16px !important; } }
#ContactForm-name,
#ContactForm-email,
#ContactForm-phone,
#ContactForm-body {
background: #ffffff !important;
color: #0d0d0d !important;
border: 1px solid #cccccc !important;
}
#ContactForm-name::placeholder,
#ContactForm-email::placeholder,
#ContactForm-phone::placeholder,
#ContactForm-body::placeholder {
color: #666666 !important;
}
#ContactForm-name:focus,
#ContactForm-email:focus,
#ContactForm-phone:focus,
#ContactForm-body:focus {
border-color: var(--mxo-green) !important;
outline: none !important;
}
.button, button[type="submit"], .btn { font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; border-radius: 0 !important; transition: all 0.2s !important; }
.button--primary, .shopify-payment-button__button--unbranded { background: var(--mxo-orange) !important; color: #fff !important; border: none !important; }
.button--primary:hover { background: var(--mxo-orange-dark) !important; }
.button--secondary { background: var(--mxo-green) !important; color: #fff !important; border: none !important; }
.button--secondary:hover { background: var(--mxo-green-dark) !important; }
.mxo-btn-orange { background: var(--mxo-orange); color: #fff; border: none; padding: 16px 40px; font-size: 15px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; transition: all 0.2s; text-decoration: none; display: inline-block; cursor: pointer; }
.mxo-btn-orange:hover { background: var(--mxo-orange-dark); transform: translateY(-1px); }
.mxo-btn-green { background: var(--mxo-green); color: #fff; border: none; padding: 16px 40px; font-size: 15px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; transition: all 0.2s; text-decoration: none; display: inline-block; cursor: pointer; }
.mxo-btn-green:hover { background: var(--mxo-green-dark); }
.mxo-btn-ghost { background: transparent; color: var(--mxo-white); border: 1px solid rgba(255,255,255,0.14); padding: 16px 40px; font-size: 15px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; transition: all 0.2s; text-decoration: none; display: inline-block; cursor: pointer; }
.mxo-btn-ghost:hover { border-color: var(--mxo-green); color: var(--mxo-green); }
.quantity-selector { background: #f2f2f2 !important; border: 1px solid #d5d5d5 !important; border-radius: 0 !important; overflow: hidden !important; display: flex !important; align-items: center !important; }
.quantity-selector input, .quantity-selector input[type="number"], input[name="quantity"] { background: #f2f2f2 !important; color: #0d0d0d !important; border: none !important; border-left: 1px solid #d5d5d5 !important; border-right: 1px solid #d5d5d5 !important; font-size: 13px !important; text-align: center !important; padding: 0 6px !important; min-width: 32px !important; }
.quantity-minus, .quantity-plus { background: #f2f2f2 !important; color: #0d0d0d !important; border: none !important; border-radius: 0 !important; min-width: 32px !important; display: flex !important; align-items: center !important; justify-content: center !important; opacity: 1 !important; cursor: pointer !important; }
.quantity-minus:hover:not(:disabled), .quantity-plus:hover:not(:disabled) { background: #e2e2e2 !important; color: #0d0d0d !important; }
.quantity-minus:disabled { background: #f7f7f7 !important; color: #bbbbbb !important; cursor: not-allowed !important; opacity: 1 !important; }
.add-to-cart-button:not(.quick-add__button--add):not(.quick-add__button--choose),
.sticky-add-to-cart__button { background: var(--mxo-green) !important; color: #ffffff !important; border: none !important; border-radius: 0 !important; }
.add-to-cart-button:not(.quick-add__button--add):not(.quick-add__button--choose):hover,
.sticky-add-to-cart__button:hover { background: var(--mxo-green-dark) !important; }
quick-add-component .quick-add__button--add,
quick-add-component .quick-add__button--choose,
.quick-add__button--add,
.quick-add__button--choose {
opacity: 1 !important;
background: rgba(15, 15, 15, 0.78) !important;
border: 1px solid rgba(255,255,255,0.18) !important;
border-radius: 50% !important;
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
backdrop-filter: blur(6px) !important;
color: #F0EDE8 !important;
transition: background 0.2s, border-color 0.2s !important;
font-size: 0 !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
quick-add-component .quick-add__button--add svg,
quick-add-component .quick-add__button--choose svg,
.quick-add__button--add svg,
.quick-add__button--choose svg { width: 17px !important; height: 17px !important; }
quick-add-component .quick-add__button--add .add-to-cart-text,
quick-add-component .quick-add__button--choose .add-to-cart-text,
.quick-add__button--add .add-to-cart-text,
.quick-add__button--choose .add-to-cart-text {
background: transparent !important;
color: #F0EDE8 !important;
font-size: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.quick-add__button--add .add-to-cart-text svg,
.quick-add__button--choose .add-to-cart-text svg { width: 17px !important; height: 17px !important; font-size: 17px !important; }
quick-add-component .quick-add__button--add:hover,
quick-add-component .quick-add__button--choose:hover,
.quick-add__button--add:hover,
.quick-add__button--choose:hover {
background: var(--mxo-green) !important;
border-color: var(--mxo-green) !important;
color: #ffffff !important;
}
.price, .price-item, .price__regular, .price-item--regular { color: var(--mxo-orange) !important; font-weight: 700 !important; }
.card { background: var(--mxo-graphite) !important; border-radius: 0 !important; }
.card__heading a { color: var(--mxo-white) !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; font-family: var(--mxo-font-display) !important; }
.card-wrapper:hover { transform: translateY(-3px); transition: transform 0.3s; }
.product__title { font-family: var(--mxo-font-brand) !important; font-size: clamp(28px,4vw,48px) !important; color: var(--mxo-white) !important; text-transform: uppercase !important; letter-spacing: 0.03em !important; }
.product__price { color: var(--mxo-orange) !important; font-size: 1.5em !important; font-weight: 700 !important; }
.product-information product-price .price,
.product-information product-price .price-item {
font-size: 28px !important;
line-height: 1.1 !important;
}
@media (max-width: 749px) {
.product-information product-price .price,
.product-information product-price .price-item {
font-size: 24px !important;
  }
}
.product-form__submit { background: var(--mxo-green) !important; color: #fff !important; border-radius: 0 !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; }
.product-form__submit:hover { background: var(--mxo-green-dark) !important; }
.collection { background: var(--mxo-black) !important; }
.collection__title { font-family: var(--mxo-font-brand) !important; color: var(--mxo-white) !important; text-transform: uppercase !important; }
.section--featured-collection .card__heading a { font-family: var(--mxo-font-display) !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; }
.section--featured-collection .price, .section--featured-collection .price__regular, .section--featured-collection .price-item { color: var(--mxo-orange) !important; font-family: var(--mxo-font-display) !important; font-weight: 700 !important; }
.section--featured-collection .button, .section--featured-collection button[type="submit"] { background: var(--mxo-green) !important; color: #fff !important; border-radius: 0 !important; border: none !important; }
.section--featured-collection .button:hover, .section--featured-collection button[type="submit"]:hover { background: var(--mxo-green-dark) !important; }
.shopify-section-group-footer-group,
.shopify-section-group-footer-group .section-background,
.shopify-section-group-footer-group .section,
.footer-content { background: #161616 !important; }
.shopify-section-group-footer-group { box-shadow: 0 -2px 24px rgba(0,0,0,0.5) !important; }
.footer { background: #161616 !important; border-top: 1px solid rgba(90,143,46,0.1) !important; }
.shopify-section-group-footer-group .color-scheme-1,
.shopify-section-group-footer-group [class*="color-scheme"] {
--color-foreground: 240 237 232 !important;
background: #161616 !important;
}
.shopify-section-group-footer-group a,
.footer-content a,
.footer a { color: rgba(240, 237, 232, 0.85) !important; transition: color 0.2s !important; }
.shopify-section-group-footer-group a:hover,
.footer-content a:hover,
.footer a:hover { color: #F0EDE8 !important; }
.shopify-section-group-footer-group p,
.shopify-section-group-footer-group li,
.shopify-section-group-footer-group span:not([class*="email"]):not([class*="signup"]),
.footer-content p,
.footer-content li { color: rgba(240, 237, 232, 0.75) !important; }
.footer__heading,
.shopify-section-group-footer-group h2,
.shopify-section-group-footer-group h3,
.shopify-section-group-footer-group h4 { font-size: 11px !important; letter-spacing: 0.20em !important; text-transform: uppercase !important; color: var(--mxo-green) !important; }
.email-signup__input-group { background: #ffffff !important; border-radius: 4px !important; overflow: hidden !important; width: 100% !important; }
.email-signup__input { background: #ffffff !important; color: #0d0d0d !important; }
.email-signup__input::placeholder { color: #888888 !important; }
.email-signup__button { background: #E85D20 !important; color: #ffffff !important; }
.cart-page { background: #0d0d0d !important; min-height: 60vh; padding: 48px 24px !important; }
.cart-page__title, .cart-title { font-family: var(--mxo-font-brand) !important; text-transform: uppercase !important; font-size: 32px !important; color: #F0EDE8 !important; letter-spacing: 0.06em !important; margin-bottom: 32px !important; }
.cart-page--empty .cart-page__title { color: #555 !important; font-size: 24px !important; }
.cart-page--empty p, .cart-page--empty span:not(.cart-items__empty-button *) { color: #777 !important; font-size: 13px !important; }
.cart-page--empty .cart-items__empty-button { display: inline-block !important; margin-top: 24px !important; background: #E85D20 !important; color: #ffffff !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.14em !important; padding: 14px 32px !important; text-decoration: none !important; border-radius: 0 !important; transition: background 0.2s !important; }
.cart-page--empty .cart-items__empty-button * { color: #ffffff !important; }
.cart-page--empty .cart-items__empty-button:hover { background: #c94d18 !important; }
.cart-page__footer, [class*="cart__footer"], [class*="cart-footer"] { background: #0d0d0d !important; border-top: 1px solid rgba(255,255,255,0.07) !important; padding-top: 24px !important; margin-top: 16px !important; }
.cart-page__subtotal, [class*="cart-subtotal"], [class*="subtotal"] { color: #F0EDE8 !important; font-size: 13px !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; }
.cart-page__total, [class*="cart-total"], [class*="cart__total"] { color: #F0EDE8 !important; font-size: 20px !important; font-weight: 700 !important; }
.cart-page__taxes, [class*="cart-taxes"], [class*="shipping-note"] { color: #555 !important; font-size: 11px !important; }
.cart-page__checkout, [class*="cart__checkout"], button[name="checkout"], a[href="/checkout"] { display: block !important; width: 100% !important; background: #E85D20 !important; color: #ffffff !important; font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.16em !important; padding: 18px !important; border: none !important; border-radius: 0 !important; cursor: pointer !important; text-align: center !important; text-decoration: none !important; transition: background 0.2s !important; margin-top: 16px !important; }
.cart-page__checkout:hover, button[name="checkout"]:hover, a[href="/checkout"]:hover { background: #c94d18 !important; }
.cart-page__continue, [class*="continue-shopping"], [class*="cart__continue"] { display: block !important; width: 100% !important; background: transparent !important; color: #F0EDE8 !important; font-size: 10px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.16em !important; padding: 14px !important; border: 1px solid rgba(255,255,255,0.15) !important; border-radius: 0 !important; cursor: pointer !important; text-align: center !important; text-decoration: none !important; margin-top: 8px !important; transition: border-color 0.2s, color 0.2s !important; }
.cart-page__continue:hover { border-color: #E85D20 !important; color: #E85D20 !important; }
.cart-bubble__background { background: #E85D20 !important; }
.cart-bubble__text { color: #ffffff !important; }
[class*="discount-code"] input, [class*="cart-discount"] input {
background: #1e1e1e !important;
color: #F0EDE8 !important;
border: 1px solid rgba(255,255,255,0.16) !important;
border-radius: 4px !important;
padding: 12px 14px !important;
font-size: 13px !important;
transition: border-color 0.2s !important;
}
[class*="discount-code"] input:focus, [class*="cart-discount"] input:focus {
border-color: var(--mxo-green) !important;
outline: none !important;
}
[class*="discount-code"] input::placeholder, [class*="cart-discount"] input::placeholder { color: #888888 !important; }
[class*="discount-code"] button, [class*="cart-discount"] button { background: #5A8F2E !important; color: #ffffff !important; border: none !important; border-radius: 4px !important; font-size: 10px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.12em !important; transition: background 0.2s !important; }
[class*="discount-code"] button:hover, [class*="cart-discount"] button:hover { background: var(--mxo-green-dark) !important; }
.cart-discount__summary { cursor: pointer !important; }
.cart-totals__icon svg { transition: transform 0.2s, color 0.2s !important; }
.details[open] .cart-totals__icon svg { transform: rotate(45deg) !important; }
.cart-discount__summary:hover .cart-discount__label,
.cart-discount__summary:hover .cart-totals__icon svg { color: var(--mxo-orange) !important; }
.cart-drawer__dialog .cart-totals__icon svg { color: #666666 !important; }
.cart-drawer__dialog .cart-discount__input {
background: #f2f2f2 !important;
color: #0d0d0d !important;
border: 1px solid #d5d5d5 !important;
}
.cart-drawer__dialog .cart-discount__input::placeholder { color: #888888 !important; }
.cart-drawer__dialog .cart-discount__input:focus {
border-color: var(--mxo-green) !important;
outline: none !important;
}
@media (max-width: 749px) { .cart-page { padding: 32px 16px !important; } .cart-page__title { font-size: 24px !important; } }
#shopify-section-template--21963258069081__cart-section .cart-items__table th { color: #999999 !important; }
#shopify-section-template--21963258069081__cart-section .cart-items__title { color: #F0EDE8 !important; }
#shopify-section-template--21963258069081__cart-section .cart-items__variant dt, #shopify-section-template--21963258069081__cart-section .cart-items__variant dd { color: #999999 !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; }
#shopify-section-template--21963258069081__cart-section .cart-items__price { color: #F0EDE8 !important; font-weight: 700 !important; }
#shopify-section-template--21963258069081__cart-section .cart-totals__total-label, #shopify-section-template--21963258069081__cart-section .cart-totals__total-value { color: #F0EDE8 !important; }
#shopify-section-template--21963258069081__cart-section .cart-discount__label { color: #999999 !important; }
.cart-drawer__dialog { background: #ffffff !important; }
.cart-drawer__dialog .cart-items__table, .cart-drawer__dialog .cart-items__table-row, .cart-drawer__dialog .cart-items__media, .cart-drawer__dialog .cart-items__details, .cart-drawer__dialog .cart-items__product-info, .cart-drawer__dialog .cart-items__variants-wrapper, .cart-drawer__dialog .cart-items__variants, .cart-drawer__dialog .cart-items__variant, .cart-drawer__dialog .cart-items__quantity, .cart-drawer__dialog [class*="cart-items__"] { color: #0d0d0d !important; }
.cart-drawer__dialog .cart-items__title { color: #0d0d0d !important; font-weight: 700 !important; }
.cart-drawer__dialog .cart-items__variant dt, .cart-drawer__dialog .cart-items__variant dd { color: #666666 !important; font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; }
.cart-drawer__dialog .cart-items__price { color: var(--mxo-orange) !important; font-weight: 700 !important; }
.cart-drawer__dialog .cart-drawer__header, .cart-drawer__dialog #cart-drawer-header { color: #0d0d0d !important; }
.cart-drawer__dialog .cart-drawer__header *, .cart-drawer__dialog #cart-drawer-header * { color: #0d0d0d !important; }
.cart-drawer__dialog .cart-totals__total-label, .cart-drawer__dialog .cart-totals__total-value, .cart-drawer__dialog .cart-primary-typography { color: #0d0d0d !important; font-weight: 700 !important; }
.cart-drawer__dialog .cart-totals__total-value { color: var(--mxo-orange) !important; }
.cart-drawer__dialog .cart-discount__label { color: #666666 !important; }
.cart-drawer__dialog [class*="discount"] button, .cart-drawer__dialog .cart-discount__button { background: var(--mxo-green) !important; color: #ffffff !important; border: none !important; }
.cart-drawer__dialog .cart__checkout-button, .cart-drawer__dialog button[name="checkout"] { background: var(--mxo-orange) !important; color: #ffffff !important; }
.cart-drawer__dialog .cart__checkout-button:hover, .cart-drawer__dialog button[name="checkout"]:hover { background: var(--mxo-orange-dark) !important; }
.cart-drawer__dialog a:not(.cart__checkout-button):not([class*="button"]) { color: var(--mxo-green) !important; }
.cart-drawer__dialog .cart-items__remove, .cart-drawer__dialog [class*="cart-items__remove"] { color: #666666 !important; }
.cart-drawer__dialog .cart-items__remove:hover { color: var(--mxo-orange) !important; }
.cart-drawer__dialog .cart-items__empty-button {
background: #E85D20 !important;
color: #ffffff !important;
display: inline-block !important;
padding: 14px 32px !important;
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.14em !important;
text-decoration: none !important;
border-radius: 0 !important;
}
.cart-drawer__dialog .cart-items__empty-button * { color: #ffffff !important; }
.cart-drawer__dialog .cart-items__empty-button:hover { background: #c94d18 !important; }
.cart-items__table-row .cart-items__remove {
width: 32px !important;
height: 32px !important;
}
.cart-items__table-row .cart-items__remove svg {
width: 16px !important;
height: 16px !important;
}
.cart-items__media-container {
width: 88px !important;
height: 88px !important;
flex-shrink: 0 !important;
}
.cart-items__media-image {
width: 88px !important;
height: 88px !important;
object-fit: cover !important;
}
@media (max-width: 749px) {
.cart-items__media-container,
.cart-items__media-image {
width: 72px !important;
height: 72px !important;
  }
}
.cart-items__table-row {
grid-template-columns: 100px minmax(0, 1fr) minmax(var(--cart-item-price-width, 6rem), auto) !important;
column-gap: 16px !important;
}
@media (max-width: 749px) {
.cart-items__table-row {
grid-template-columns: 82px minmax(0, 1fr) minmax(var(--cart-item-price-width, 6rem), auto) !important;
column-gap: 12px !important;
  }
}
.mxo-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mxo-green); margin-bottom: 14px; display: flex; align-items: center; gap: 12px; }
.mxo-eyebrow::before { content: ''; width: 20px; height: 1px; background: currentColor; flex-shrink: 0; }
.mxo-section-title { font-family: var(--mxo-font-brand); font-size: clamp(36px,5vw,60px); font-weight: normal; line-height: 0.95; text-transform: uppercase; margin-bottom: 16px; letter-spacing: 0.02em; color: var(--mxo-white); }
.mxo-section-sub { font-size: 15px; font-weight: 400; color: var(--mxo-light); line-height: 1.8; max-width: 520px; margin-bottom: 52px; }
.mxo-trust__num { font-weight: 700 !important; }
.mxo-trust__label { font-size: 11px !important; color: var(--mxo-muted) !important; letter-spacing: 0.12em !important; }
.mxo-stat__num { font-weight: 700 !important; }
.mxo-stat__label { font-size: 10px !important; color: var(--mxo-muted) !important; letter-spacing: 0.12em !important; }
.mxo-exp__meta { font-size: 12px !important; color: var(--mxo-muted) !important; }
.mxo-exp__price small { font-size: 11px !important; color: var(--mxo-muted) !important; }
.mxo-exp__cat { color: var(--mxo-green) !important; font-size: 9px !important; letter-spacing: 0.18em !important; }
.mxo-serv__desc { font-weight: 400 !important; color: var(--mxo-muted) !important; line-height: 1.8 !important; font-size: 14px !important; }
.mxo-b2b__list li { color: var(--mxo-light) !important; font-size: 14px !important; }
.mxo-b2b__note { color: var(--mxo-muted) !important; }
.mxo-ext__sub { color: var(--mxo-muted) !important; font-size: 14px !important; }
.mxo-ext__cat { color: var(--mxo-light) !important; font-size: 9px !important; letter-spacing: 0.1em !important; }
.mxo-tips__excerpt { color: var(--mxo-muted) !important; font-size: 13px !important; line-height: 1.75 !important; }
.mxo-tips__date { color: var(--mxo-muted) !important; font-size: 10px !important; }
.mxo-tips__pod-desc { color: var(--mxo-muted) !important; font-size: 13px !important; }
.mxo-act__tag { font-size: 9px !important; letter-spacing: 0.18em !important; }
.mxo-act__pill { font-size: 9px !important; letter-spacing: 0.06em !important; }
.mxo-brands__label { font-size: 10px !important; letter-spacing: 0.22em !important; }
.mxo-brands__item { font-size: 14px !important; }
.mxo-act .mxo-eyebrow       { color: var(--mxo-green) !important; }
.mxo-act .mxo-section-title { color: var(--mxo-white) !important; }
.mxo-exp .mxo-eyebrow       { color: var(--mxo-green) !important; }
.mxo-exp .mxo-section-title { color: var(--mxo-orange) !important; }
.mxo-serv .mxo-eyebrow      { color: var(--mxo-orange) !important; }
.mxo-serv .mxo-section-title{ color: var(--mxo-green) !important; }
.mxo-tips .mxo-eyebrow      { color: var(--mxo-green) !important; }
.mxo-tips .mxo-section-title{ color: var(--mxo-orange) !important; }
.mxo-ext .mxo-eyebrow       { color: var(--mxo-green) !important; }
.mxo-ext .mxo-ext__title    { color: var(--mxo-white) !important; }
.mxo-b2b .mxo-eyebrow       { color: var(--mxo-orange) !important; }
.mxo-b2b .mxo-section-title { color: var(--mxo-green) !important; }
.mxo-wa { position: fixed; bottom: 28px; right: 28px; z-index: 9999; width: 54px; height: 54px; border-radius: 50%; background: #25D366; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 24px; text-decoration: none; box-shadow: 0 4px 22px rgba(37,211,102,0.32); transition: transform 0.2s, box-shadow 0.2s; }
.mxo-wa:hover { transform: scale(1.1); box-shadow: 0 6px 30px rgba(37,211,102,0.5); }
@media(max-width:768px) {
.mxo-act, .mxo-serv, .mxo-ext, .mxo-exp, .mxo-b2b { border-top: 1px solid rgba(255,255,255,0.06) !important; }
.mxo-eyebrow { font-size: 10px; letter-spacing: 0.16em; }
.mxo-section-sub { font-size: 15px; max-width: 100%; line-height: 1.7; }
.mxo-trust__label { font-size: 10px !important; letter-spacing: 0.10em !important; }
.mxo-serv__desc { font-size: 14px !important; line-height: 1.75 !important; }
.mxo-b2b__list li { font-size: 14px !important; }
.mxo-act__pill { font-size: 9px !important; letter-spacing: 0.05em !important; }
.mxo-btn-orange, .mxo-btn-green, .mxo-btn-ghost { padding: 16px 28px; font-size: 14px; }
}
@media(max-width:480px) {
.mxo-eyebrow { font-size: 9px; letter-spacing: 0.12em; }
.mxo-section-sub { font-size: 14px; }
}
.product-media-container,
.product-media,
.product-media__image,
[class*="card__media"],
[class*="card-media"] {
background: #1e1e1e !important;
}
.mxo-hero__controls {
left: 50% !important;
transform: translateX(-50%) !important;
bottom: 28px !important;
}
[class*="__text_BWEbKk"] p {
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
color: var(--mxo-muted) !important;
margin-bottom: 8px !important;
font-family: var(--mxo-font-body) !important;
}
@media screen and (min-width: 750px) {
.product-information--media-left .product-information__media {
width: 100% !important;
max-width: 440px !important;
min-width: 0 !important;
  }
.product-information__grid.product-information--media-left {
grid-template-columns: 460px 460px !important;
column-gap: 40px !important;
justify-content: center !important;
  }
}
.variant-option--buttons .variant-option__button-label__pill {
background-color: var(--mxo-steel) !important;
}
.variant-option--buttons label {
background-color: #eef5e7 !important;
transition: background-color 0.15s !important;
}
.variant-option--buttons label:has(input[data-option-available="false"]) {
background-color: #efefef !important;
}
.variant-option--buttons label:has(input[data-option-available="false"]) .variant-option__button-label__text {
color: rgba(0,0,0,0.35) !important;
}
.variant-option--buttons .variant-option__strikethrough line {
stroke: rgba(0,0,0,0.45) !important;
stroke-width: 1.75px !important;
}
.variant-option--swatches label,
.variant-option--swatches .swatch {
width: 46px !important;
height: 46px !important;
}
@media screen and (min-width: 750px) {
.product-information--media-left .product-information__media {
max-width: 506px !important;
  }
.product-information__grid.product-information--media-left {
grid-template-columns: 510px 460px !important;
column-gap: 34px !important;
  }
}
.slideshow-controls__thumbnail {
width: 74px !important;
height: 74px !important;
}
.slideshow-controls__thumbnail img {
width: 74px !important;
height: 74px !important;
}
[class*="__text_xrnftG"] h1 {
font-family: var(--mxo-font-display) !important;
font-size: clamp(34px, 4.5vw, 56px) !important;
font-weight: 700 !important;
letter-spacing: 0.01em !important;
text-transform: uppercase !important;
color: #0d0d0d !important;
line-height: 1.05 !important;
padding-left: 18px !important;
border-left: 4px solid var(--mxo-green) !important;
}
@media (max-width: 749px) {
[class*="__text_xrnftG"] h1 { font-size: clamp(26px, 7vw, 38px) !important; padding-left: 12px !important; border-left-width: 3px !important; }
}
[class*="__text_aEtTtq"] {
margin-top: 32px !important;
padding-top: 24px !important;
border-top: 1px solid #e5e5e5 !important;
max-width: 560px !important;
}
[class*="__text_aEtTtq"] p {
font-size: 15px !important;
line-height: 1.75 !important;
color: #444444 !important;
letter-spacing: 0.01em !important;
margin-block: 12px !important;
}
[class*="__text_aEtTtq"] ul,
[class*="__text_aEtTtq"] ol {
font-size: 15px !important;
line-height: 1.75 !important;
color: #444444 !important;
padding-left: 20px !important;
margin-block: 12px !important;
}
[class*="__text_aEtTtq"] li { margin-bottom: 6px !important; }
[class*="__text_aEtTtq"] strong { color: #0d0d0d !important; }
.product-information .quantity-selector {
background: #ffffff !important;
border: 1px solid #cccccc !important;
}
.product-information .quantity-selector input[type="number"] {
background: #ffffff !important;
color: #0d0d0d !important;
border-left: 1px solid #cccccc !important;
border-right: 1px solid #cccccc !important;
}
.product-information .quantity-minus,
.product-information .quantity-plus {
background: #f5f5f5 !important;
color: #0d0d0d !important;
}
.product-information .quantity-minus:hover:not(:disabled),
.product-information .quantity-plus:hover:not(:disabled) {
background: #e8e8e8 !important;
color: #0d0d0d !important;
}
.product-information .quantity-minus:disabled {
background: #f5f5f5 !important;
color: #cccccc !important;
opacity: 1 !important;
}
.cart-items__unit-price-wrapper { display: none !important; }
[class*="__trust_badges"] {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  padding: 14px 0 !important;
  border-top: 1px solid #e5e5e5 !important;
  border-bottom: 1px solid #e5e5e5 !important;
}
[class*="__trust_badges"] p {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #444444 !important;
}
[class*="__trust_badges"] strong {
  color: var(--mxo-green) !important;
  font-weight: 700 !important;
}
@media (max-width: 749px) {
  [class*="__trust_badges"] { gap: 12px 20px !important; }
  [class*="__trust_badges"] p { font-size: 10px !important; }
}
/* ── SELECTOR DE COLOR ESTILO GARMIN (grid de miniaturas grandes) ──────────
   Pedido por Memo: que el selector de "Color" en la pagina de producto se
   vea como el grid de Garmin.com (miniaturas grandes en cuadricula, borde
   negro marcado en la opcion seleccionada), en vez de circulos chicos en una
   sola fila. Se limita al variant-picker de la PAGINA DE PRODUCTO usando el
   atributo data-template-product-match="true" que Horizon ya agrega solo
   cuando el variant-picker corresponde al producto que se esta viendo (no
   aplica en quick-add ni en las tarjetas de coleccion/carrito). */
variant-picker[data-template-product-match="true"] .variant-option--swatches {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}
variant-picker[data-template-product-match="true"] .variant-option--swatches legend {
  flex: 0 0 100% !important;
  margin-bottom: 2px !important;
}
variant-picker[data-template-product-match="true"] .variant-option--swatches .variant-option__button-label--has-swatch {
  padding: 3px !important;
  border: 1px solid rgba(0,0,0,0.15) !important;
  border-radius: 10px !important;
  transition: border-color 0.15s ease !important;
}
variant-picker[data-template-product-match="true"] .variant-option--swatches .variant-option__button-label--has-swatch:hover {
  border-color: rgba(0,0,0,0.5) !important;
}
variant-picker[data-template-product-match="true"] .variant-option--swatches .variant-option__button-label--has-swatch:has(input:checked) {
  border: 2px solid #0d0d0d !important;
  padding: 2px !important;
}
variant-picker[data-template-product-match="true"] .variant-option--swatches label,
variant-picker[data-template-product-match="true"] .variant-option--swatches .swatch {
  width: 92px !important;
  height: 92px !important;
  border-radius: 8px !important;
}
@media (max-width: 749px) {
  variant-picker[data-template-product-match="true"] .variant-option--swatches label,
  variant-picker[data-template-product-match="true"] .variant-option--swatches .swatch {
    width: 76px !important;
    height: 76px !important;
  }
}

/* ── HEADER: logo dinámico según fondo (negro por defecto, blanco en hover/click) ──
   Pedido por Memo: el header se queda negro (con el logo blanco-sobre-negro que
   ya existe) mientras el mega-menu de abajo no está abierto. En cuanto el mouse
   pasa sobre un link del menú (o se abre por click/teclado), el mega-menu ya se
   pone blanco — aquí hacemos que el header TAMBIÉN pase a blanco y que se
   muestre la imagen del logo con fondo blanco y letra negra (settings.logo_inverse,
   ya subida en Shopify) en vez del logo negro. Es un cambio dinámico de imagen
   (display swap), no un filtro/blend forzado: ambas imágenes ya existen tal cual
   fueron subidas, solo se intercambia cuál se muestra. Solo aplica en desktop,
   donde vive el mega-menu; en móvil el menú usa el drawer y ya tiene su propio
   tratamiento (ver bloque "MENÚ MÓVIL" arriba).

   FIX (Memo detectó el bug): usar .header:hover en vez de
   .header:has(.menu-list__link:hover) para el estado base. Con el selector
   anterior, al mover el mouse del link hacia el logo (que vive dentro del
   mismo .header pero NO es un .menu-list__link) el :has() dejaba de cumplirse
   y el header regresaba a negro a medio paso, antes de llegar al dropdown.
   Con .header:hover el header se mantiene blanco mientras el cursor esté en
   cualquier parte de la barra superior (logo, links, iconos, espacios vacíos),
   que es exactamente "estar dentro del menú superior". El fallback por
   aria-expanded se mantiene para cuando el mega-menu sigue abierto aunque el
   mouse ya haya bajado al panel blanco de abajo (que vive fuera de .header). */
@media (min-width: 750px) {
  .header:hover,
  .header:has(.menu-list__link[aria-expanded="true"]) {
    background: #ffffff !important;
  }

  .header:hover .menu-list__link,
  .header:has(.menu-list__link[aria-expanded="true"]) .menu-list__link,
  .header:hover .header-actions__action,
  .header:has(.menu-list__link[aria-expanded="true"]) .header-actions__action {
    color: #0d0d0d !important;
  }

  .header:hover .menu-list__link:hover,
  .header:has(.menu-list__link[aria-expanded="true"]) .menu-list__link[aria-expanded="true"] {
    color: #E85D20 !important;
    font-weight: 700 !important;
  }

  .header:hover .header-logo__image-container--original,
  .header:has(.menu-list__link[aria-expanded="true"]) .header-logo__image-container--original {
    display: none !important;
  }

  .header:hover .header-logo__image-container--inverse,
  .header:has(.menu-list__link[aria-expanded="true"]) .header-logo__image-container--inverse {
    display: block !important;
  }
}

/* ── PÁGINA INSTALACIÓN: formulario claro estilo Contacto ──────────────────
   El formulario de #InstalacionForm (página /pages/instalacion) usa inputs
   genéricos sin ID especial, así que heredaban el estilo oscuro global
   pensado para el carrito/checkout (fondo steel + texto blanco), y se veían
   como cajas negras ilegibles sobre esta página de fondo blanco. Aquí se
   sobreescribe con el mismo tratamiento claro que ya usa #ContactForm-*,
   y se resetean los checkboxes (que también heredaban el fondo oscuro y
   quedaban como cuadros negros sin poder distinguir marcado/no marcado). */
#InstalacionForm input[type="text"],
#InstalacionForm textarea {
  background: #ffffff !important;
  color: #0d0d0d !important;
  border: 1px solid #cccccc !important;
  border-radius: 4px !important;
}
#InstalacionForm input[type="text"]::placeholder,
#InstalacionForm textarea::placeholder {
  color: #888888 !important;
}
#InstalacionForm input[type="text"]:focus,
#InstalacionForm textarea:focus {
  border-color: var(--mxo-green) !important;
  outline: none !important;
}
#InstalacionForm input[type="checkbox"] {
  all: revert;
  width: 16px !important;
  height: 16px !important;
  margin-right: 6px !important;
  vertical-align: middle !important;
  cursor: pointer !important;
  accent-color: var(--mxo-green);
}
#InstalacionForm button[type="submit"] {
  transition: background 0.2s !important;
}
#InstalacionForm button[type="submit"]:hover {
  background: var(--mxo-green-dark) !important;
}

/* ── CARRITO (DRAWER): fix de legibilidad Descuento/Total estimado ─────────
   Pedido por Memo: en el drawer del carrito (el panel que se abre al dar clic
   en el icono del carrito), el texto "Descuento", "Total estimado", su valor
   y el aviso de impuestos/envio se veian casi blancos sobre fondo blanco =
   ilegibles.

   Causa real: las reglas viejas de este archivo (mas arriba, ".cart-drawer__dialog ...")
   ya no aplican a nada. Horizon 4.1.3 renombro el contenedor del drawer: ya no es
   "<div class=\"cart-drawer__dialog\">", ahora es "<dialog class=\"theme-drawer__dialog\">"
   dentro de "<theme-drawer id=\"cart-drawer\">". Mismo patron que el bug del menu
   superior (clases renombradas entre versiones de Horizon). Como resultado, el texto
   con clases ".cart-primary-typography" / ".cart-secondary-typography" se quedaba con
   el color claro pensado para fondos oscuros (rgb 240,237,232), invisible sobre el
   fondo blanco del drawer. Se usa el id #cart-drawer (estable, no cambia con estos
   renombres de clase) para que el fix no dependa de la clase interna. */
#cart-drawer .cart-primary-typography,
#cart-drawer .cart-secondary-typography,
#cart-drawer small {
  color: #0d0d0d !important;
}
#cart-drawer .cart-totals__total-label,
#cart-drawer .cart-totals__total-value {
  color: #0d0d0d !important;
  font-weight: 700 !important;
}
#cart-drawer .cart-totals__total-value {
  color: var(--mxo-orange) !important;
}
#cart-drawer .cart-discount__label {
  color: #666666 !important;
}

/* ── HERO: la barra de progreso del carrusel se asomaba sobre el menu ──────
   Memo detecto que la linea naranja de avance (indica cuanto falta para el
   siguiente slide, cuando hay mas de 1) se veia por ENCIMA del menu de
   navegacion, aunque todo lo demas del hero se queda correctamente detras.

   Causa: en sections/mxo-hero.liquid, .mxo-hero__progress y .mxo-hero__controls
   tienen z-index:20, mas alto que el header (sticky, z-index:18). Eso no
   deberia ser problema si .mxo-hero formara su propio stacking context (que
   contendria ese z-index:20 por debajo del header sin importar el numero) --
   y de hecho ya existe una regla que hace justo eso, pero esta encerrada en
   el media query de movil (@media max-width:749px, bloque MENU MOVIL arriba).
   En desktop .mxo-hero se queda sin z-index propio, asi que su barra de
   progreso (z:20) compite directo contra el header (z:18) en el stacking
   context general de la pagina y le gana, asomandose encima.

   Los controles (flechas/dots, tambien z:20) tienen el mismo problema
   tecnico, pero viven abajo del hero (bottom:28px), lejos del header, por
   eso no se notaban -- no es que esten bien por diseno, solo no se cruzan
   visualmente con el header.

   Fix: aplicar en TODOS los anchos de pantalla el mismo tratamiento que ya
   usa movil (position:relative + z-index:1 en .mxo-hero). Esto no cambia el
   orden interno del hero (barra/controles/progreso se siguen ordenando igual
   entre si), solo evita que escapen por encima del header. */
.mxo-hero { position: relative !important; z-index: 1 !important; }