/* MAGNA V84 — catálogo, promociones, visibilidad, cursor y responsive */

/* The large overlay can be taller than the viewport on shorter desktop windows. */
.desktop-mega-menu{
  max-height:calc(100dvh - 84px);
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

/* Product cards must fill their full stretched height so the gray base never appears below the info panel. */
#catalogGrid .product-card{
  display:flex;
  flex-direction:column !important;
  align-self:stretch !important;
  background:linear-gradient(180deg,#222 0%,#151515 100%) !important;
}
#catalogGrid .product-card-info{
  flex:1 1 auto !important;
  width:100% !important;
  background:linear-gradient(180deg,#222 0%,#151515 100%) !important;
}


/* Compact dual-handle price filter: two thumbs on one track. */
.catalog-filter-bar{
  grid-template-columns:minmax(220px,1fr) 220px minmax(300px,430px) auto !important;
}
.catalog-price-range-box-dual{
  display:block;
  min-width:300px;
  padding:10px 12px 12px;
  border:1px solid rgba(255,255,255,.11);
  background:#101010;
}
.catalog-price-values{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:7px;
  color:#f5f2ec;
  font-size:12px;
  white-space:nowrap;
}
.catalog-price-values .catalog-price-separator{
  color:#777;
  flex:0 0 auto;
}
.catalog-price-values strong{
  color:#f5f2ec;
  font-size:12px;
  letter-spacing:.15px;
}
.catalog-dual-slider{
  --from:0%;
  --to:100%;
  position:relative;
  height:22px;
}
.catalog-dual-slider::before,
.catalog-dual-slider::after{
  content:"";
  position:absolute;
  top:8px;
  height:6px;
  border-radius:999px;
  pointer-events:none;
}
.catalog-dual-slider::before{
  left:0;
  right:0;
  background:#343434;
}
.catalog-dual-slider::after{
  left:var(--from);
  right:calc(100% - var(--to));
  background:linear-gradient(90deg,#f7941d,#ffc45c);
}
.catalog-dual-slider input[type="range"]{
  position:absolute;
  inset:0;
  width:100%;
  height:22px;
  margin:0;
  padding:0;
  background:transparent !important;
  appearance:none;
  -webkit-appearance:none;
  pointer-events:none;
  outline:none;
}
.catalog-dual-slider input[type="range"]::-webkit-slider-runnable-track{
  height:6px;
  background:transparent;
  border:0;
}
.catalog-dual-slider input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:18px;
  height:18px;
  margin-top:-6px;
  border-radius:50%;
  background:#fff;
  border:3px solid #f7941d;
  box-shadow:0 0 0 4px rgba(247,148,29,.16);
  pointer-events:auto;
  cursor:grab;
}
.catalog-dual-slider input[type="range"]:active::-webkit-slider-thumb{cursor:grabbing}
.catalog-dual-slider input[type="range"]::-moz-range-track{
  height:6px;
  background:transparent;
  border:0;
}
.catalog-dual-slider input[type="range"]::-moz-range-thumb{
  width:18px;
  height:18px;
  border-radius:50%;
  background:#fff;
  border:3px solid #f7941d;
  box-shadow:0 0 0 4px rgba(247,148,29,.16);
  pointer-events:auto;
  cursor:grab;
}
#catalogPriceMinFilter{z-index:3}
#catalogPriceFilter{z-index:4}
#catalogGrid .product-card[hidden],
#catalogGrid .product-card.is-filtered-out,
[data-accessory][hidden]{display:none !important}

@media (max-width:1320px){
  .catalog-filter-bar{grid-template-columns:minmax(200px,1fr) 190px minmax(280px,1.2fr) auto !important}
  .catalog-price-range-box-dual{min-width:280px}
}
@media (max-width:900px){
  .catalog-filter-bar{grid-template-columns:1fr 1fr !important}
  .catalog-filter-title{grid-column:1/-1 !important}
  .catalog-price-range-box-dual{min-width:0}
}
@media (max-width:640px){
  .catalog-filter-bar{grid-template-columns:1fr !important}
  .catalog-filter-title{grid-column:auto !important}
}

/* Use the native system cursor everywhere. It is more reliable than hiding it for a custom cursor. */
html.magna-custom-cursor,
html.magna-custom-cursor body,
html.magna-custom-cursor body *{cursor:auto !important}
html.magna-custom-cursor a,
html.magna-custom-cursor button,
html.magna-custom-cursor [role="button"],
html.magna-custom-cursor [role="link"],
html.magna-custom-cursor input[type="range"],
html.magna-custom-cursor input[type="checkbox"]{cursor:pointer !important}
html.magna-custom-cursor input[type="text"],
html.magna-custom-cursor input[type="email"],
html.magna-custom-cursor input[type="tel"],
html.magna-custom-cursor input[type="number"],
html.magna-custom-cursor textarea{cursor:text !important}
.cursor,.cursor-ring{display:none !important}

/* From tablet/intermediate widths downward use the real side drawer, never the tall white desktop overlay. */
@media (max-width:1000px){
  .desktop-mega-menu,
  .desktop-mega-backdrop{
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
  body.desktop-menu-open{overflow:auto !important}

  #mainNav{
    justify-content:flex-start !important;
    gap:10px !important;
  }
  #mainNav .nav-logo{
    margin-right:auto !important;
    flex:0 1 auto !important;
  }
  #mainNav .magna-shop-cart-btn{
    order:20 !important;
    margin-left:0 !important;
    margin-right:2px !important;
    flex:0 0 auto !important;
  }
  #mainNav .mobile-menu-toggle{
    order:30 !important;
    margin-left:0 !important;
    flex:0 0 auto !important;
  }

  .mobile-drawer{
    display:block !important;
    width:min(92vw,400px) !important;
    height:100dvh !important;
    max-height:100dvh !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior-y:contain !important;
    -webkit-overflow-scrolling:touch !important;
    touch-action:pan-y !important;
    padding-bottom:calc(34px + env(safe-area-inset-bottom)) !important;
  }
  .mobile-drawer-links{
    padding-bottom:24px !important;
  }
}

@media (max-width:760px){
  #mainNav{
    gap:8px !important;
  }
  #mainNav .magna-shop-cart-btn{
    width:46px !important;
    min-width:46px !important;
    height:46px !important;
    margin-right:0 !important;
  }
  #mainNav .mobile-menu-toggle{
    width:46px !important;
    min-width:46px !important;
    height:46px !important;
  }
  .mobile-drawer{
    width:min(94vw,390px) !important;
    padding-left:18px !important;
    padding-right:18px !important;
  }
}

/* Override the legacy single-slider styling on the maximum handle. */
.catalog-dual-slider #catalogPriceMinFilter,
.catalog-dual-slider #catalogPriceFilter{
  background:transparent !important;
  accent-color:#f7941d !important;
  pointer-events:none !important;
}
.catalog-dual-slider #catalogPriceMinFilter::-webkit-slider-runnable-track,
.catalog-dual-slider #catalogPriceFilter::-webkit-slider-runnable-track{
  height:6px !important;
  background:transparent !important;
  border:0 !important;
}
.catalog-dual-slider #catalogPriceMinFilter::-moz-range-track,
.catalog-dual-slider #catalogPriceFilter::-moz-range-track{
  height:6px !important;
  background:transparent !important;
  border:0 !important;
}
.catalog-dual-slider #catalogPriceMinFilter::-webkit-slider-thumb,
.catalog-dual-slider #catalogPriceFilter::-webkit-slider-thumb{
  pointer-events:auto !important;
}
.catalog-dual-slider #catalogPriceMinFilter::-moz-range-thumb,
.catalog-dual-slider #catalogPriceFilter::-moz-range-thumb{
  pointer-events:auto !important;
}
.catalog-top-card[hidden]{display:none !important}

/* MAGNA V85 — rango automático, filtros equilibrados, accesorios y actualizaciones vivas */

/* Filtros del catálogo: los tres controles comparten altura y proporción. */
.catalog-filter-bar{
  grid-template-columns:minmax(240px,.85fr) minmax(210px,.68fr) minmax(340px,1fr) 190px !important;
  gap:16px !important;
  align-items:end !important;
}
.catalog-filter-field{min-width:0 !important}
.catalog-brand-trigger,
.catalog-price-range-box-dual,
.catalog-filter-clear{
  height:58px !important;
  min-height:58px !important;
  max-height:58px !important;
}
.catalog-price-range-box-dual{
  min-width:0 !important;
  padding:7px 14px 8px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
}
.catalog-price-values{margin-bottom:2px !important;font-size:11px !important}
.catalog-dual-slider{height:20px !important}
.catalog-filter-clear{
  align-self:end !important;
  padding:0 18px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  white-space:nowrap !important;
}
@media(max-width:1050px){
  .catalog-filter-bar{grid-template-columns:1fr 1fr !important}
  .catalog-filter-title{grid-column:1/-1 !important}
  .catalog-filter-clear{grid-column:1/-1 !important;width:220px !important;justify-self:start !important}
}
@media(max-width:640px){
  .catalog-filter-bar{grid-template-columns:1fr !important;padding:16px !important}
  .catalog-filter-title,.catalog-filter-clear{grid-column:auto !important}
  .catalog-filter-clear{width:100% !important}
}

/* Accesorios: jerarquía más compacta y tarjetas consistentes. */
.accessories-page .container{
  width:min(100%,1320px) !important;
  max-width:1320px !important;
  padding-inline:clamp(18px,4vw,52px) !important;
}
.accessories-page{padding-top:96px !important}
.accessories-hero{
  padding:52px 0 34px !important;
  grid-template-columns:minmax(0,.95fr) minmax(320px,1.05fr) !important;
  gap:46px !important;
}
.accessories-title{font-size:clamp(62px,6.4vw,98px) !important;line-height:.88 !important}
.accessories-lead{font-size:17px !important;line-height:1.65 !important}
.accessory-feature{padding:28px 30px !important;margin:34px 0 24px !important}
.accessory-feature h2{font-size:36px !important}
.accessory-feature-buy{min-width:320px !important}
.accessory-feature-buy>strong{font-size:34px !important}
.accessory-catalog-head{margin:42px 0 22px !important;align-items:center !important}
.accessory-catalog-head h2{font-size:56px !important;line-height:.92 !important}
.accessory-page-grid{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:16px !important;
  align-items:stretch !important;
}
.accessory-page-card{
  min-height:285px !important;
  height:100% !important;
  padding:22px !important;
  gap:10px !important;
}
.accessory-page-card h3{font-size:19px !important;line-height:1.2 !important;min-height:46px}
.accessory-page-card p{font-size:14px !important;line-height:1.5 !important;min-height:64px}
.accessory-page-card [data-magna-live-price],
.accessory-page-card>b,
.accessory-page-card>.magna-accessory-live-price{
  min-height:34px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:5px;
}
.accessory-page-card .accessory-card-controls{margin-top:auto !important;align-items:center !important}
.accessory-page-card .accessory-add-cart{min-height:40px !important}
.magna-accessory-image{width:100%;height:150px;object-fit:contain;background:#f3f0e9;margin-bottom:6px}
@media(max-width:1100px){
  .accessories-hero{grid-template-columns:1fr !important;gap:18px !important;padding-top:38px !important}
  .accessories-title{font-size:76px !important}
  .accessory-page-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .accessory-feature{grid-template-columns:1fr !important}
  .accessory-feature-buy{min-width:0 !important;justify-items:start !important}
  .accessory-feature-buy .accessory-card-controls{justify-content:flex-start !important}
}
@media(max-width:720px){
  .accessories-page{padding-top:82px !important}
  .accessories-page .container{padding-inline:16px !important}
  .accessories-title{font-size:56px !important}
  .accessories-lead{font-size:15px !important}
  .accessory-feature{padding:22px 18px !important}
  .accessory-feature h2{font-size:30px !important}
  .accessory-feature-buy>strong{font-size:30px !important}
  .accessory-catalog-head h2{font-size:42px !important}
  .accessory-page-grid{grid-template-columns:1fr !important}
  .accessory-page-card{min-height:0 !important}
  .accessory-page-card h3,.accessory-page-card p{min-height:0 !important}
}

/* Promociones de accesorios en el flujo de compra de una bici. */
.purchase-flow-live-price{display:flex !important;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}
.purchase-flow-old-price{text-decoration:line-through;opacity:.5;font-weight:500;font-size:.78em}
.purchase-flow-sale-price{color:#f7941d !important}
.purchase-flow-promo-label{display:inline-block;border:1px solid rgba(247,148,29,.55);color:#f7941d;padding:2px 5px;font-size:9px;letter-spacing:.08em;text-transform:uppercase}

/* El precio normal no deja residuos visuales cuando una promo se elimina. */
.magna-live-old-price:empty,.magna-live-promo-label:empty{display:none !important}

/* V86 · cursor nativo estable en toda la web. Se elimina definitivamente el cursor personalizado. */
html,html.magna-custom-cursor,html.magna-custom-cursor body,body,body *{cursor:auto !important}
a,button,[role="button"],[role="link"],summary,label[for],input[type="button"],input[type="submit"],input[type="reset"],input[type="checkbox"],input[type="radio"],input[type="range"],select{cursor:pointer !important}
input[type="text"],input[type="email"],input[type="tel"],input[type="number"],input[type="search"],input[type="password"],textarea,[contenteditable="true"]{cursor:text !important}
.cursor,.cursor-ring,#cursor,#cursorRing{display:none !important;visibility:hidden !important;opacity:0 !important;pointer-events:none !important}

/* MAGNA V87 — filtros responsivos, menú intermedio y precios de accesorios */

/* 1) El catálogo nunca debe desbordarse por el botón Limpiar filtros. */
.catalog-filter-bar{
  width:100% !important;
  max-width:100% !important;
  grid-template-columns:minmax(210px,.78fr) minmax(180px,.62fr) minmax(270px,1fr) minmax(150px,.58fr) !important;
  gap:14px !important;
  overflow:visible !important;
}
.catalog-filter-title,
.catalog-filter-field,
.catalog-filter-clear{min-width:0 !important;max-width:100% !important}
.catalog-filter-clear{
  width:100% !important;
  min-width:0 !important;
  padding-inline:14px !important;
  font-size:clamp(13px,1.05vw,17px) !important;
  letter-spacing:clamp(.7px,.16vw,2px) !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
@media(max-width:1280px){
  .catalog-filter-bar{
    grid-template-columns:minmax(190px,.75fr) minmax(280px,1.25fr) minmax(160px,.58fr) !important;
    align-items:end !important;
  }
  .catalog-filter-title{grid-column:1/-1 !important}
  .catalog-filter-clear{grid-column:auto !important;width:100% !important;justify-self:stretch !important}
}
@media(max-width:850px){
  .catalog-filter-bar{grid-template-columns:1fr 1fr !important}
  .catalog-filter-title{grid-column:1/-1 !important}
  .catalog-filter-range-field{grid-column:1/-1 !important}
  .catalog-filter-clear{grid-column:1/-1 !important;width:min(100%,260px) !important}
}
@media(max-width:560px){
  .catalog-filter-bar{grid-template-columns:1fr !important;padding:16px !important}
  .catalog-filter-title,.catalog-filter-range-field,.catalog-filter-clear{grid-column:auto !important}
  .catalog-filter-clear{width:100% !important}
}

/* 2) Tarjetas del catálogo más limpias: sin párrafos largos bajo cada modelo. */
#catalogGrid .product-card-desc{display:none !important}
#catalogGrid .product-card-info{padding-bottom:24px !important}
#catalogGrid .product-card-name{margin-bottom:10px !important}

/* 3) Antes de que el menú de escritorio empiece a apretarse, pasamos al drawer móvil. */
@media(min-width:1421px) and (max-width:1650px){
  #mainNav{padding-inline:clamp(22px,2.4vw,40px) !important}
  #mainNav .nav-logo-official{width:150px !important}
  #mainNav .magna-desktop-nav{gap:8px !important}
  #mainNav .magna-nav-item>a{padding-inline:6px !important;font-size:12.5px !important}
}
@media(max-width:1420px){
  #mainNav .magna-desktop-nav,
  nav#mainNav .magna-desktop-nav{
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
  }
  #mainNav .mobile-menu-toggle,
  nav#mainNav .mobile-menu-toggle,
  .mobile-menu-toggle{
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
    width:48px !important;
    min-width:48px !important;
    max-width:48px !important;
    height:48px !important;
    min-height:48px !important;
    padding:0 !important;
    margin:0 !important;
    border:1px solid rgba(247,148,29,.45) !important;
    overflow:visible !important;
  }
  .mobile-menu-overlay,.mobile-drawer{
    display:block !important;
  }
  .desktop-mega-menu,.desktop-mega-backdrop{
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
  body.desktop-menu-open{overflow:auto !important}
  #mainNav{
    justify-content:flex-start !important;
    gap:10px !important;
    padding-inline:clamp(18px,3vw,38px) !important;
  }
  #mainNav .nav-logo{margin-right:auto !important;flex:0 0 auto !important}
  #mainNav .magna-shop-cart-btn{
    order:20 !important;
    margin-left:0 !important;
    margin-right:2px !important;
    flex:0 0 auto !important;
  }
  #mainNav .mobile-menu-toggle{order:30 !important;flex:0 0 auto !important}
  .mobile-drawer{
    width:min(92vw,410px) !important;
    height:100dvh !important;
    max-height:100dvh !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    padding-bottom:calc(30px + env(safe-area-inset-bottom)) !important;
    overscroll-behavior-y:contain !important;
    -webkit-overflow-scrolling:touch !important;
  }
  .mobile-drawer-links{padding-bottom:28px !important}
}
@media(max-width:620px){
  #mainNav .nav-logo-official{width:138px !important}
  #mainNav .magna-shop-cart-btn,
  #mainNav .mobile-menu-toggle{width:44px !important;min-width:44px !important;max-width:44px !important;height:44px !important;min-height:44px !important}
  .mobile-drawer{width:min(95vw,390px) !important;padding-left:16px !important;padding-right:16px !important}
}

/* 4) Precios de accesorios: normal y promocional con una tipografía coherente. */
.accessory-feature-buy [data-magna-live-price],
.accessory-page-card [data-magna-live-price],
.accessory-page-card .magna-accessory-live-price{
  display:flex !important;
  align-items:baseline !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  min-height:38px !important;
  margin:0 !important;
  font-family:'Barlow Condensed','Barlow',sans-serif !important;
  line-height:1 !important;
}
.accessory-feature-buy [data-magna-live-price] .magna-live-current-price,
.accessory-page-card [data-magna-live-price] .magna-live-current-price,
.accessory-page-card .magna-accessory-live-price .magna-live-current-price{
  color:#f7941d !important;
  font-family:'Barlow Condensed','Barlow',sans-serif !important;
  font-size:30px !important;
  font-weight:800 !important;
  letter-spacing:.2px !important;
  line-height:1 !important;
}
.accessory-feature-buy [data-magna-live-price]:not(.is-promo) .magna-live-current-price,
.accessory-page-card [data-magna-live-price]:not(.is-promo) .magna-live-current-price{
  color:#f4f1eb !important;
}
.accessory-feature-buy .magna-live-old-price,
.accessory-page-card .magna-live-old-price{
  color:#989898 !important;
  opacity:.72 !important;
  font-family:'Barlow Condensed','Barlow',sans-serif !important;
  font-size:18px !important;
  font-weight:700 !important;
  text-decoration:line-through !important;
  text-decoration-thickness:2px !important;
  margin:0 !important;
}
.accessory-feature-buy .magna-live-promo-label,
.accessory-page-card .magna-live-promo-label{
  font-family:'Barlow',sans-serif !important;
  font-size:9px !important;
  line-height:1 !important;
}
/* El precio del GPS usa exactamente la misma jerarquía de los demás accesorios. */
.accessory-feature-buy>strong{font-size:inherit !important;font-family:inherit !important}
@media(max-width:720px){
  .accessory-feature-buy [data-magna-live-price] .magna-live-current-price,
  .accessory-page-card [data-magna-live-price] .magna-live-current-price{font-size:26px !important}
  .accessory-feature-buy .magna-live-old-price,
  .accessory-page-card .magna-live-old-price{font-size:16px !important}
}

/* =========================================================
   MAGNA V88 — checkout compacto + promociones accesorios
   ========================================================= */

/* El formulario de datos cabe en una sola vista en escritorio. */
.magna-checkout-panel{
  width:min(1040px,calc(100vw - 32px));
  max-height:calc(100vh - 28px);
}
@media (min-width:960px) and (min-height:680px){
  .magna-checkout-backdrop{padding:14px}
  .magna-checkout-panel{overflow:hidden}
  .magna-checkout-head{padding:13px 20px 9px;align-items:center}
  .magna-checkout-kicker{font-size:.64rem}
  .magna-checkout-head h2{font-size:1.35rem;margin-top:3px}
  .magna-checkout-close{font-size:1.65rem;line-height:1}
  .magna-checkout-body{padding:11px 20px 15px}
  .magna-checkout-total{padding:9px 12px;margin-bottom:10px}
  .magna-checkout-total strong{font-size:1.05rem}
  .magna-checkout-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 10px}
  .magna-checkout-field{gap:4px}
  .magna-checkout-field.full{grid-column:span 2}
  .magna-checkout-field label,.magna-checkout-label{font-size:.69rem}
  .magna-checkout-field input,.magna-checkout-field select{padding:9px 10px;min-height:40px}
  .magna-checkout-delivery{grid-column:span 2;gap:8px}
  .magna-checkout-delivery label{padding:8px 10px;min-height:40px;box-sizing:border-box}
  .magna-checkout-privacy{grid-column:1/-1;font-size:.75rem;line-height:1.3;align-items:center}
  .magna-checkout-error{margin-top:9px;padding:8px 10px}
  .magna-checkout-submit{padding:12px;margin-top:10px}
  .magna-checkout-note{font-size:.68rem;margin-top:6px}
}

/* Precio normal + precio promocional en el flujo de compra de una bicicleta. */
.purchase-flow-price-wrap{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  gap:2px;
  min-width:105px;
  white-space:nowrap;
}
.purchase-flow-price-wrap .purchase-flow-old-price{
  display:block;
  color:#8e8e8e;
  font-size:12px;
  line-height:1.1;
  text-decoration:line-through;
  text-decoration-thickness:1px;
  opacity:.82;
}
.purchase-flow-price-wrap .purchase-flow-sale-price{
  display:block;
  color:#f7941d !important;
  font-size:18px;
  line-height:1.1;
  font-weight:900;
}
.purchase-flow-price-wrap .purchase-flow-promo-label{
  display:block;
  margin:1px 0 0;
  padding:0;
  border:0;
  color:#f0a348;
  font-size:9px;
  line-height:1.1;
}
.purchase-flow-accessory>.purchase-flow-price-wrap{
  padding-right:2px;
}
.purchase-flow-summary-row>.purchase-flow-price-wrap{
  margin-left:auto;
}
.self-security-price.purchase-flow-price-wrap{
  align-items:flex-start;
  min-width:0;
}
.self-security-price.purchase-flow-price-wrap .purchase-flow-sale-price{
  font-size:1.35em;
}
@media(max-width:620px){
  .purchase-flow-price-wrap{min-width:88px}
  .purchase-flow-price-wrap .purchase-flow-sale-price{font-size:16px}
}