/** 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; }
@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 ─────────────────────────────────── */
/* OJO especificidad: esta regla apila varios :not() con selectores
   compuestos (ej. ":not(.quantity-selector input)"), lo que le da más
   especificidad de la que aparenta — más que reglas como
   ".cart-drawer__dialog .cart-discount__input" (2 clases). Por eso
   también se excluye aquí "[class*='cart-discount']", para que el
   campo de cupón lo controlen únicamente sus propias reglas más abajo
   (versión oscura en /cart, versión clara en el drawer) y no este
   estilo genérico de inputs. */
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; } }
/* ── FORMULARIO DE CONTACTO — mayor contraste ─────────────────
   Invertimos los campos a claro (fondo blanco, texto casi negro)
   para que combine con la página de Contacto y se lea con máximo
   contraste. Se targetea por ID único, no afecta otros inputs. */
#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;
}
/* ── BOTONES GLOBALES ─────────────────────────────────────── */
/* NOTA: border-radius:0 aplica a todos los botones EXCEPTO quick-add (sobreescrito abajo) */
.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; }
/* ── BOTONES MXO ──────────────────────────────────────────── */
.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 ────────────────────────────────────── */
/* Antes este bloque (que controla el carrito: drawer y /cart) usaba un
   gris muy oscuro (#2a2a2a → #3a3a3a) que se sentía pesado y desentonaba
   con el resto del sitio — sobre todo en el drawer, que tiene fondo
   blanco. Se unifica con el mismo tratamiento claro que ya usa la ficha
   de producto (".product-information .quantity-selector" más abajo):
   fondo casi blanco, borde gris sutil, texto oscuro. Se ve limpio tanto
   sobre el blanco del drawer como sobre el negro de /cart (contraste
   fuerte en ambos casos). */
.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; }
/* ── AGREGAR AL CARRITO — verde ───────────────────────────── */
.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 — ícono circular, siempre visible ──────────── */
/* Usamos quick-add-component como ancestro para ganar especificidad
   sobre el .button { border-radius: 0 !important } global */
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;
}
/* SVG dentro del botón */
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; }
/* Texto interno invisible, solo muestra ícono */
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;
}
/* SVG dentro del span de texto */
.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; }
/* Hover — verde */
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;
}
/* ── PRECIO ───────────────────────────────────────────────── */
.price, .price-item, .price__regular, .price-item--regular { color: var(--mxo-orange) !important; font-weight: 700 !important; }
/* ── CARDS ────────────────────────────────────────────────── */
.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; }
/* ── PÁGINA DE PRODUCTO ───────────────────────────────────── */
.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; }
/* ── PRECIO EN LA FICHA DE PRODUCTO — más grande, acorde al valor del producto ──
   Estaba heredando el tamaño default del tema (14px), demasiado discreto para
   un ticket alto. Escopeado a product-price DENTRO de .product-information
   para no afectar precios de tarjetas de colección/quick-add (que sí deben
   quedarse chicos). */
.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; }
/* ── COLECCIONES ──────────────────────────────────────────── */
.collection { background: var(--mxo-black) !important; }
.collection__title { font-family: var(--mxo-font-brand) !important; color: var(--mxo-white) !important; text-transform: uppercase !important; }
/* ── FEATURED COLLECTION ──────────────────────────────────── */
.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; }
/* ── FOOTER ───────────────────────────────────────────────── */
/* El color-scheme-1 dentro del footer inyecta variables negras — sobreescribir todo */
.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; }
/* Sobreescribir variable de color-scheme-1 que hace los textos negros */
.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;
}
/* Links */
.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; }
/* Textos generales del footer */
.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; }
/* Headings del footer */
.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; }
/* ── NEWSLETTER ───────────────────────────────────────────── */
.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; }
/* ── CARRITO ──────────────────────────────────────────────── */
.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; }
/* OJO: el span gris de abajo NO debe pintar el texto interno del botón
   "Seguir comprando" (span.button-text) — antes ".cart-page--empty span"
   sin excepción capturaba también ese span y dejaba el texto gris sobre
   fondo naranja, casi ilegible. Se excluye explícitamente. */
.cart-page--empty p, .cart-page--empty span:not(.cart-items__empty-button *) { color: #777 !important; font-size: 13px !important; }
/* Antes se usaba ".cart-page--empty a:not([class*='sign'])" para detectar
   el link de "Seguir comprando", pero "sesión" no contiene la subcadena
   en inglés "sign", así que el link "Inicia sesión" también se convertía
   sin querer en un botón naranja a mitad de frase. Se apunta directo a
   la clase real del botón. */
.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; }
/* ── FIX CRÍTICO — bug de layout roto en el carrito (imagen invisible, filas descuadradas) ──
   CAUSA RAÍZ: el selector comodín [class*="cart-item"] (sin el "s") coincidía por
   substring con TODAS las clases reales del tema, que son "cart-items__..." (plural).
   Por ejemplo "cart-items__media-image" SÍ contiene la subcadena "cart-item", así que
   este selector le aplicaba padding:20px 0 al <img> del producto, aplastándolo a ~1px
   de alto real (quedaba invisible) y sumando espacio extra en cada fila del carrito
   (drawer y página /cart). Los selectores "cart-item__xxx" (con doble guion bajo, SIN
   la "s") de abajo nunca coincidían con nada en este tema — eran código muerto, no
   dañino, así que se eliminan junto con el comodín. El resto de estilos de color ya
   están cubiertos por las reglas de abajo (.cart-drawer__dialog .cart-items__... y
   los selectores de /cart), así que no se pierde nada al quitar este bloque. */
.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; }
/* Antes: fondo negro plano (#0d0d0d), poco atractivo. Ahora: gris grafito
   con borde sutil y foco verde de marca al hacer clic, más acorde al resto
   de inputs del sitio. */
[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; }
/* ── "DESCUENTO" — dejar claro que es clickeable (acordeón para capturar cupón) ──
   El renglón "Descuento" es un <summary> de un <details> nativo: sí es
   clickeable (cursor:pointer ya lo tenía), pero el ícono "+" que lo indica
   heredaba un color crema (#F0EDE8) pensado para fondos oscuros — sobre el
   fondo blanco del drawer quedaba prácticamente invisible, y sin ese ícono
   visible el renglón se leía como texto informativo, no como un control.
   Se oscurece el ícono, se resalta en naranja al pasar el mouse (junto con
   la etiqueta), y se gira 45° cuando el acordeón está abierto (el "+" se
   convierte visualmente en "×") para reforzar que es interactivo. */
.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; }
/* Input y botón de cupón DENTRO DEL DRAWER: versión clara acorde al fondo
   blanco del drawer. El bloque de arriba (fondo #1e1e1e/#222) se queda
   para la página /cart, que tiene fondo negro y ahí sí combina; en el
   drawer blanco esa misma caja oscura se veía fuera de lugar. */
.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; } }
/* ── CART ITEMS (tabla Horizon actual) — fix contraste texto negro sobre negro — SOLO pagina /cart ── */
#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 (carrito deslizable) — fondo blanco nativo del tema, forzar texto oscuro + acentos verde/naranja de marca ── */
.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; }
/* Botón "Seguir comprando" del carrito VACÍO en el drawer (móvil sobre todo):
   la regla ".cart-drawer__dialog [class*='cart-items__']" de arriba pinta
   TODO texto dentro del drawer en #0d0d0d (casi negro) — incluido el texto
   de este botón. Si el botón además hereda un fondo oscuro por defecto del
   tema, queda texto casi negro sobre fondo casi negro = ilegible. Se fuerza
   el mismo botón sólido naranja que usamos en la página /cart, con texto
   blanco explícito en el span interno (mayor especificidad, va después). */
.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; }
/* Botón de eliminar (bote de basura): antes 44px vs. los 32px del selector
   de cantidad — se veía desproporcionado. Se empareja el tamaño para que
   toda la fila de controles luzca uniforme. */
.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;
}
/* ── MINIATURA DE PRODUCTO EN CARRITO — más grande y consistente (drawer y /cart) ──
   Antes dependía 100% del ancho de columna del grid (a veces 53px en el drawer,
   apenas visible). Fijamos un tamaño explícito, cuadrado, con buena resolución,
   inspirado en referencias de carritos de tiendas de refacciones (miniatura clara
   y reconocible junto al nombre del producto). */
.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;
  }
}
/* ── FIX: la columna del grid no crecía junto con la miniatura ──────────
   Causa raíz: ".cart-items__table-row" define la columna de la imagen con
   "clamp(2.5rem, 15cqi, 7.5rem)" (un ancho fluido basado en el contenedor).
   En el drawer, angosto, ese clamp resuelve a ~53px — más chico que los 88px
   de la miniatura de arriba. Como la miniatura tiene flex-shrink:0, se
   desbordaba fuera de su columna y tapaba el nombre/descripción del
   producto. Solución: fijar el ancho de la columna al tamaño real de la
   miniatura + un margen pequeño, para que imagen y texto nunca se encimen. */
.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;
  }
}
/* ── COMPONENTES MXO ──────────────────────────────────────── */
.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; }
/* ── WHATSAPP ─────────────────────────────────────────────── */
.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); }
/* ── RESPONSIVE ───────────────────────────────────────────── */
@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; }
}
/* Fondo gris oscuro en contenedor de imagen — todos los productos */
.product-media-container,
.product-media,
.product-media__image,
[class*="card__media"],
[class*="card-media"] {
background: #1e1e1e !important;
}
/* ============================================
   FIX: Controles hero — centrados, sin
   solapamiento con botones de acción
============================================ */
.mxo-hero__controls {
left: 50% !important;
transform: translateX(-50%) !important;
bottom: 28px !important;
}
/* ── VENDOR en página de producto ─────────────────────────── */
/* Bloque de texto que muestra {{ product.vendor }} */
/* Aparece encima del título — menor jerarquía, estilo eyebrow */
[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;
}
/* ── PRODUCT MEDIA — reducir contenedor del carrusel en escritorio ── */
@media screen and (min-width: 750px) {
.product-information--media-left .product-information__media {
width: 100% !important;
max-width: 440px !important;
min-width: 0 !important;
  }
/* La columna del grid seguía midiendo 960px aunque la imagen se topara a 440px,
   dejando ~500px de espacio muerto entre la imagen y el panel de compra.
   OJO: product-information__grid y product-information--media-left son
   DOS CLASES DEL MISMO ELEMENTO (no ancestro-descendiente) — por eso
   necesita selector compuesto SIN espacio entre ambas clases. */
.product-information__grid.product-information--media-left {
grid-template-columns: 460px 460px !important;
column-gap: 40px !important;
justify-content: center !important;
  }
}
/* ── SELECTOR DE VARIANTES (Tamaño/Versión) — color de selección + disponibilidad ──
   Horizon anima un "pill" negro que se desliza para marcar la opción elegida
   (.variant-option__button-label__pill). Lo cambiamos a verde de marca en vez
   de negro plano — refuerza identidad y se distingue mejor del botón "Agregar
   al carrito" (que también es verde, dando consistencia) sin competir con el
   naranja de precio/CTA secundarios.
   Además: las opciones SIN combinación válida solo tenían una línea diagonal
   casi invisible (stroke rgba(0,0,0,0.13), 1px) — casi nadie la notaba. Ahora:
   fondo verde muy tenue = combinación disponible, fondo gris = no disponible,
   y la línea diagonal más gruesa y oscura para que sea evidente a simple vista.
   El pill de selección se probó en verde, pero competía visualmente con el
   botón "Agregar al carrito" (también verde) — restándole protagonismo al
   CTA principal. Se cambió a gris carbón oscuro: diferencia con claridad
   "opción elegida" de "acción de compra", deja el verde como color único
   de la acción principal, y conecta con el material carbono/titanio de
   los relojes. */
.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;
}
/* ── SWATCHES DE COLOR — 34px originales → 41px (+20%) → 46px (+12% adicional, ~+35% total) ── */
.variant-option--swatches label,
.variant-option--swatches .swatch {
width: 46px !important;
height: 46px !important;
}
/* ── MEDIA PRINCIPAL DEL PRODUCTO — imagen grande +15% y miniaturas del slider +15% ──
   El contenedor de imagen estaba limitado a 440px (ver regla arriba de esta sección).
   Lo subimos a 506px (+15%) y ampliamos la columna del grid para que no se corte
   ni deje espacio muerto. Las miniaturas seleccionables (64px) también +15% (74px). */
@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;
}
/* ── NOMBRE DE PRODUCTO (H1) — más grande y con presencia ──
   El H1 no traía ninguna clase propia (heredaba el font-family "Inter"
   por defecto del tema, 32px, sin marca). Lo targeteamos por el bloque
   de texto contenedor [class*="__text_xrnftG"].
   Fuente: se probó AsphalticScratch (la del logo) pero es una tipografía
   decorativa/rugosa — ilegible en nombres con acentos (Fēnix) y specs
   largas (Pro – AMOLED, MicroLED). Para conversión el nombre debe leerse
   rápido, así que usamos Barlow Condensed en bold, mucho más grande,
   más peso y un acento verde a la izquierda para que destaque sin
   sacrificar legibilidad. */
[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; }
}
/* ── DESCRIPCIÓN DE PRODUCTO — mejor legibilidad y jerarquía ── */
[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; }
/* ── QUANTITY SELECTOR — versión clara para página de producto (fondo blanco) ── */
.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;
}

/* ── PÁGINA DE PRODUCTO — se mantiene fondo blanco (scheme-1) ──
   Home/Inicio permanece en negro por decisión de diseño; no se
   toca. Página de producto y colecciones se quedan claras por
   legibilidad y tasa de conversión. ── */

/* ── PRECIO UNITARIO FANTASMA — ocultar, no aplica a este catálogo ── */
.cart-items__unit-price-wrapper { display: none !important; }

/* ── TRUST BADGES — señales de confianza junto al botón de compra ── */
[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; }
}