/* RC Responsive Final v6 (2026-04-20)
   COMPREHENSIVE responsive fix.
   v6 changes:
     - FORCE Font Awesome 4.7 render (override theme bundle FA5 family)
     - Inject ::before content for all icons used (PurgeCSS-proof)
     - Touch targets >= 44px
     - Footer 1-column enforcement all mobile breakpoints
     - Hero responsive constraints
*/

/* ============================================================
   FORCE FONT AWESOME 4.7 SUBSET (override theme bundle FA5 family)
   Theme bundle defines `.fa { font-family: "Font Awesome 5 Free" }`
   but only FA4 subset is loaded via font-awesome-preload.css.
   We force ALL .fa selectors to use FontAwesome (FA4) and inject
   ::before content (PurgeCSS may have stripped them from bundle).
   ============================================================ */
.fa, .fas, .far, .fal, .fab,
.fa-solid, .fa-regular, .fa-brands,
[class^="fa-"], [class*=" fa-"] {
  font-family: "FontAwesome" !important;
  font-weight: normal !important;
  font-style: normal !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  display: inline-block;
  text-rendering: auto;
}

/* Icon glyphs (FA 4.7 codepoints) — explicit to survive PurgeCSS */
.fa-bars::before, .fa-navicon::before, .fa-reorder::before { content: "\f0c9" !important; font-family: FontAwesome !important; }
.fa-search::before { content: "\f002" !important; font-family: FontAwesome !important; }
.fa-user::before { content: "\f007" !important; font-family: FontAwesome !important; }
.fa-user-o::before { content: "\f2c0" !important; font-family: FontAwesome !important; }
.fa-shopping-bag::before { content: "\f290" !important; font-family: FontAwesome !important; }
.fa-shopping-cart::before, .fa-shopping-basket::before { content: "\f07a" !important; font-family: FontAwesome !important; }
.fa-cart-plus::before { content: "\f217" !important; font-family: FontAwesome !important; }
.fa-times::before, .fa-close::before, .fa-remove::before { content: "\f00d" !important; font-family: FontAwesome !important; }
.fa-angle-down::before { content: "\f107" !important; font-family: FontAwesome !important; }
.fa-angle-up::before { content: "\f106" !important; font-family: FontAwesome !important; }
.fa-angle-left::before { content: "\f104" !important; font-family: FontAwesome !important; }
.fa-angle-right::before { content: "\f105" !important; font-family: FontAwesome !important; }
.fa-chevron-down::before { content: "\f078" !important; font-family: FontAwesome !important; }
.fa-chevron-up::before { content: "\f077" !important; font-family: FontAwesome !important; }
.fa-chevron-left::before { content: "\f053" !important; font-family: FontAwesome !important; }
.fa-chevron-right::before { content: "\f054" !important; font-family: FontAwesome !important; }
.fa-arrow-up::before { content: "\f062" !important; font-family: FontAwesome !important; }
.fa-arrow-down::before { content: "\f063" !important; font-family: FontAwesome !important; }
.fa-arrow-left::before { content: "\f060" !important; font-family: FontAwesome !important; }
.fa-arrow-right::before { content: "\f061" !important; font-family: FontAwesome !important; }
.fa-phone::before { content: "\f095" !important; font-family: FontAwesome !important; }
.fa-mobile::before, .fa-mobile-phone::before { content: "\f10b" !important; font-family: FontAwesome !important; }
.fa-envelope::before { content: "\f0e0" !important; font-family: FontAwesome !important; }
.fa-envelope-o::before { content: "\f003" !important; font-family: FontAwesome !important; }
.fa-map-marker::before { content: "\f041" !important; font-family: FontAwesome !important; }
.fa-clock::before, .fa-clock-o::before { content: "\f017" !important; font-family: FontAwesome !important; }
.fa-heart::before { content: "\f004" !important; font-family: FontAwesome !important; }
.fa-heart-o::before { content: "\f08a" !important; font-family: FontAwesome !important; }
.fa-eye::before { content: "\f06e" !important; font-family: FontAwesome !important; }
.fa-eye-slash::before { content: "\f070" !important; font-family: FontAwesome !important; }
.fa-check::before { content: "\f00c" !important; font-family: FontAwesome !important; }
.fa-check-circle::before, .fa-check-circle-o::before { content: "\f058" !important; font-family: FontAwesome !important; }
.fa-plus::before { content: "\f067" !important; font-family: FontAwesome !important; }
.fa-minus::before { content: "\f068" !important; font-family: FontAwesome !important; }
.fa-info::before { content: "\f129" !important; font-family: FontAwesome !important; }
.fa-info-circle::before { content: "\f05a" !important; font-family: FontAwesome !important; }
.fa-question::before { content: "\f128" !important; font-family: FontAwesome !important; }
.fa-question-circle::before { content: "\f059" !important; font-family: FontAwesome !important; }
.fa-exclamation::before { content: "\f12a" !important; font-family: FontAwesome !important; }
.fa-exclamation-triangle::before, .fa-warning::before { content: "\f071" !important; font-family: FontAwesome !important; }
.fa-facebook::before, .fa-facebook-f::before { content: "\f09a" !important; font-family: FontAwesome !important; }
.fa-twitter::before { content: "\f099" !important; font-family: FontAwesome !important; }
.fa-instagram::before { content: "\f16d" !important; font-family: FontAwesome !important; }
.fa-whatsapp::before { content: "\f232" !important; font-family: FontAwesome !important; }
.fa-youtube::before, .fa-youtube-play::before { content: "\f167" !important; font-family: FontAwesome !important; }
.fa-linkedin::before, .fa-linkedin-square::before { content: "\f0e1" !important; font-family: FontAwesome !important; }
.mobile-bag-icon::before { content: "\f290" !important; font-family: FontAwesome !important; }
.fa-list::before { content: "\f03a" !important; font-family: FontAwesome !important; }
.fa-th::before { content: "\f00a" !important; font-family: FontAwesome !important; }
.fa-th-large::before { content: "\f009" !important; font-family: FontAwesome !important; }
.fa-filter::before { content: "\f0b0" !important; font-family: FontAwesome !important; }
.fa-sort::before { content: "\f0dc" !important; font-family: FontAwesome !important; }
.fa-sort-down::before, .fa-sort-desc::before { content: "\f0dd" !important; font-family: FontAwesome !important; }
.fa-sort-up::before, .fa-sort-asc::before { content: "\f0de" !important; font-family: FontAwesome !important; }
.fa-star::before { content: "\f005" !important; font-family: FontAwesome !important; }
.fa-star-o::before { content: "\f006" !important; font-family: FontAwesome !important; }
.fa-star-half-o::before, .fa-star-half-empty::before { content: "\f123" !important; font-family: FontAwesome !important; }
.fa-trash::before, .fa-trash-o::before { content: "\f014" !important; font-family: FontAwesome !important; }
.fa-edit::before, .fa-pencil::before, .fa-pencil-square-o::before { content: "\f040" !important; font-family: FontAwesome !important; }
.fa-cog::before, .fa-gear::before { content: "\f013" !important; font-family: FontAwesome !important; }
.fa-spinner::before { content: "\f110" !important; font-family: FontAwesome !important; }
.fa-circle-o-notch::before { content: "\f1ce" !important; font-family: FontAwesome !important; }
.fa-refresh::before { content: "\f021" !important; font-family: FontAwesome !important; }
.fa-bars-staggered::before, .fa-align-justify::before { content: "\f039" !important; font-family: FontAwesome !important; }
.fa-home::before { content: "\f015" !important; font-family: FontAwesome !important; }
.fa-truck::before { content: "\f0d1" !important; font-family: FontAwesome !important; }
.fa-credit-card::before { content: "\f09d" !important; font-family: FontAwesome !important; }
.fa-shield::before { content: "\f132" !important; font-family: FontAwesome !important; }
.fa-tag::before { content: "\f02b" !important; font-family: FontAwesome !important; }
.fa-tags::before { content: "\f02c" !important; font-family: FontAwesome !important; }
.fa-percent::before { content: "\f295" !important; font-family: FontAwesome !important; }
.fa-share::before, .fa-share-alt::before { content: "\f1e0" !important; font-family: FontAwesome !important; }
.fa-print::before { content: "\f02f" !important; font-family: FontAwesome !important; }
.fa-download::before { content: "\f019" !important; font-family: FontAwesome !important; }
.fa-external-link::before { content: "\f08e" !important; font-family: FontAwesome !important; }
.fa-bookmark::before, .fa-bookmark-o::before { content: "\f02e" !important; font-family: FontAwesome !important; }
.fa-comment::before, .fa-comment-o::before { content: "\f0e5" !important; font-family: FontAwesome !important; }
.fa-comments::before, .fa-comments-o::before { content: "\f0e6" !important; font-family: FontAwesome !important; }
.fa-thumbs-up::before, .fa-thumbs-o-up::before { content: "\f164" !important; font-family: FontAwesome !important; }
.fa-thumbs-down::before, .fa-thumbs-o-down::before { content: "\f165" !important; font-family: FontAwesome !important; }
.fa-cube::before { content: "\f1b2" !important; font-family: FontAwesome !important; }
.fa-cubes::before { content: "\f1b3" !important; font-family: FontAwesome !important; }
.fa-wrench::before { content: "\f0ad" !important; font-family: FontAwesome !important; }
.fa-fire::before { content: "\f06d" !important; font-family: FontAwesome !important; }
.fa-bolt::before { content: "\f0e7" !important; font-family: FontAwesome !important; }

/* ============================================================
   FONT AWESOME @font-face — ABSOLUTE URL fallback
   (in case preload CSS doesn't load OR has CORS issues)
   Use absolute URL so path is correct regardless of CSS file location.
   ============================================================ */
@font-face {
  font-family: "FontAwesome";
  src: url("/themes/warehouse/assets/css/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0") format("woff2"),
       url("/themes/warehouse/assets/css/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   GLOBAL — touch-friendly, no horizontal overflow
   ============================================================ */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}
img, video, iframe, embed, object {
  max-width: 100% !important;
  height: auto;
}

/* ============================================================
   CLS PREVENTION — reserve space for images without explicit dimensions
   Targets CMS images, banners, hero blocks where Smarty doesn't emit width/height
   ============================================================ */
img[src*="/img/cms/"]:not([width]):not([height]),
img[src*="/img/p/"]:not([width]):not([height]),
.iqitelementor-block img:not([width]):not([height]),
.elementor-image img:not([width]):not([height]),
.elementor-widget-image img:not([width]):not([height]),
.banner img:not([width]):not([height]) {
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: rgba(0,0,0,0.02);
}
/* Hero banners typically wider */
.rc-hero img:not([width]):not([height]),
.layerslider img:not([width]):not([height]),
.banner-home img:not([width]):not([height]) {
  aspect-ratio: 21 / 9;
}
/* Product card images square-ish */
.product-miniature img:not([width]):not([height]),
.thumbnail-container img:not([width]):not([height]) {
  aspect-ratio: 1 / 1;
}

/* ============================================================
   ACCESSIBILITY — restore focus indicator (WCAG 2.4.7)
   Theme suppressed all focus rings. We restore via :focus-visible
   so mouse users don't see ring but keyboard users do.
   ============================================================ */
*:focus-visible {
  outline: 2px solid #1d4ed8 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(29,78,216,0.12) !important;
  border-radius: 3px !important;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible {
  outline: 2px solid #1d4ed8 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(29,78,216,0.12) !important;
}
/* Skip link visible on focus */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 99999;
  background: #1d4ed8;
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 6px 0;
  text-decoration: none;
  font-weight: 600;
}

/* ============================================================
   HERO + CAROUSEL pagination dots — minimum 44px touch target (WCAG 2.5.5)
   Visible dot stays small (8px), but invisible padding extends hit area.
   ============================================================ */
.rc-hero-dot,
.swiper-pagination-bullet,
.layerslider-pagination .ls-bullet,
[class*="hero"] [class*="dot"],
[class*="carousel"] [data-slide-to],
.tablist [role="tab"] {
  position: relative;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  background-clip: content-box !important;
  cursor: pointer;
}
.rc-hero-dot::after,
.swiper-pagination-bullet::after,
.layerslider-pagination .ls-bullet::after,
[class*="hero"] [class*="dot"]::after,
[class*="carousel"] [data-slide-to]::after,
.tablist [role="tab"]::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  transition: background 0.2s ease, transform 0.2s ease;
}
.rc-hero-dot[aria-current="true"]::after,
.swiper-pagination-bullet-active::after,
.layerslider-pagination .ls-bullet.ls-bullet-active::after,
[role="tab"][aria-selected="true"]::after {
  background: #d11326;
  transform: translate(-50%, -50%) scale(1.3);
}
.skip-link:focus {
  left: 0;
}

@media (max-width: 991px) {
  /* Touch targets minimum 44x44 (WCAG / iOS HIG) */
  a, button, [role="button"], .btn, input[type="submit"], input[type="button"] {
    min-height: 44px;
  }
  button, .btn {
    min-width: 44px;
  }

  /* ============================================================
     1. HEADER MOBILE — logo + iconos uniformes
     ============================================================ */
  #mobile-header .col-mobile-logo img.logo,
  #mobile-header .col-mobile-logo img {
    max-height: 50px !important;
    max-width: 160px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }
  #mobile-header .col-mobile-logo,
  #mobile-header .col-mobile-logo a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 50px !important;
  }
  #mobile-header .col-mobile-btn .fa,
  #mobile-header .col-mobile-btn i.fa,
  #mobile-header .col-mobile-btn i[class^="fa-"],
  #mobile-header .col-mobile-btn i[class*=" fa-"] {
    font-size: 22px !important;
    line-height: 22px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    color: #1d1d1b !important;
  }
  #mobile-header .col-mobile-btn {
    min-height: 50px !important;
    min-width: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #mobile-header .col-mobile-btn .m-nav-btn,
  #mobile-header .col-mobile-btn > a,
  #mobile-header .col-mobile-btn > div > a {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    color: #1d1d1b !important;
    padding: 4px 8px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
  /* Hide text labels in header (keep cart count visible) */
  #mobile-header .col-mobile-btn .m-nav-btn > span:not(.cart-products-count):not(.cart-products-count-btn),
  #mobile-header .col-mobile-btn > a > span:not(.cart-products-count):not(.cart-products-count-btn),
  #mobile-header .col-mobile-btn > div > a > span:not(.cart-products-count):not(.cart-products-count-btn) {
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Cart badge */
  #mobile-header .col-mobile-btn-cart .cart-products-count,
  #mobile-header .col-mobile-btn-cart .cart-products-count-btn {
    font-size: 10px !important;
    line-height: 1 !important;
    color: #fff !important;
    height: 16px !important;
    overflow: visible !important;
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    background: #d11326 !important;
    min-width: 16px !important;
    border-radius: 8px !important;
    padding: 0 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    border: 1.5px solid #fff !important;
  }

  /* ============================================================
     2. MOBILE MENU DRAWER — TODO TEXTO BLANCO
     ============================================================ */
  #_mobile_iqitmegamenu-mobile,
  #iqitmegamenu-mobile,
  #_mobile_iqitmegamenu-mobile *,
  #iqitmegamenu-mobile *,
  .mobile-menu__tab,
  .mobile-menu__tab *,
  .mobile-menu__link,
  .mobile-menu__title,
  .js-mobile-menu__tab-title,
  .mobile-menu__submenu,
  .mobile-menu__submenu *,
  .mobile-menu__row,
  .mobile-menu__row *,
  .mobile-menu__column,
  .mobile-menu__column *,
  .mobile-menu__links-list,
  .mobile-menu__links-list-li,
  .mobile-menu__links-list-li * {
    color: #ffffff !important;
  }
  .mobile-menu__tab .fa.expand-icon,
  .mobile-menu__arrow,
  .mobile-menu__back-btn .fa {
    color: rgba(255,255,255,0.7) !important;
  }

  /* link width 100% (no 70%) */
  html body .mobile-menu .mobile-menu__link,
  html body #iqitmegamenu-mobile .mobile-menu__link,
  html body .mobile-menu__tab .mobile-menu__link {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Tienda align-left + Servicios + Contacto */
  html body .mobile-menu__tab.mobile-menu__tab--id-6 > a.mobile-menu__link,
  html body .mobile-menu__tab.mobile-menu__tab--id-6 > .mobile-menu__link,
  html body .mobile-menu__tab.mobile-menu__tab--has-submenu > a,
  html body .mobile-menu__tab.mobile-menu__tab--has-submenu > .mobile-menu__link,
  html body .mobile-menu__tab > .js-mobile-menu__link--has-submenu {
    justify-content: flex-start !important;
    text-align: left !important;
    padding-left: 16px !important;
  }
  .mobile-menu__tab.mobile-menu__tab--has-submenu {
    align-items: stretch !important;
  }

  /* Contacto envelope icon */
  html body .mobile-menu__tab.mobile-menu__tab--id-18 > a.mobile-menu__link::before,
  html body .mobile-menu__tab.mobile-menu__tab--id-18 > a::before {
    content: "" !important;
    display: inline-block !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    background-color: rgba(29,78,216,0.12) !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/><polyline points='22,6 12,13 2,6'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 16px !important;
    border: 1px solid rgba(29,78,216,0.2) !important;
    flex-shrink: 0 !important;
    margin-right: 12px !important;
    vertical-align: middle !important;
  }
  /* Tienda cart icon */
  html body .mobile-menu__tab.mobile-menu__tab--id-6 > a.mobile-menu__link::before,
  html body .mobile-menu__tab.mobile-menu__tab--id-6 > a::before {
    content: "" !important;
    display: inline-block !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    background-color: rgba(29,78,216,0.12) !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='21' r='1'/><circle cx='20' cy='21' r='1'/><path d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 16px !important;
    border: 1px solid rgba(29,78,216,0.2) !important;
    flex-shrink: 0 !important;
    margin-right: 12px !important;
    vertical-align: middle !important;
  }

  /* Tienda submenu 3-col stacked */
  html body .mobile-menu__row {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
  }
  html body .mobile-menu__column {
    width: 100% !important;
    max-width: 100% !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    padding: 12px 0 4px 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }
  html body .mobile-menu__column:first-child {
    border-top: 0 !important;
    padding-top: 4px !important;
  }
  html body .mobile-menu__column .mobile-menu__links-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  html body .mobile-menu__column .mobile-menu__links-list-li {
    list-style: none !important;
    padding: 0 !important;
    margin: 2px 0 !important;
  }
  html body .mobile-menu__column .mobile-menu__links-list-li > a {
    color: #ffffff !important;
    padding: 12px 16px 12px 28px !important;
    display: block !important;
    font-size: 14px !important;
    text-decoration: none !important;
    border-radius: 6px !important;
    transition: background 0.15s !important;
    width: 100% !important;
    min-height: 44px !important;
  }
  html body .mobile-menu__column .mobile-menu__links-list-li > a:hover,
  html body .mobile-menu__column .mobile-menu__links-list-li > a:active {
    background: rgba(255,255,255,0.06) !important;
  }
  html body .mobile-menu__submenu {
    background: transparent !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-shadow: none !important;
    padding: 8px 12px !important;
  }

  /* Elementor overflow protection — exclude sliders */
  html body .elementor-element:not(.elementor-widget-image-carousel):not([class*="slider"]):not([class*="swiper"]):not([class*="layerslider"]):not([class*="gallery"]) {
    max-width: 100vw !important;
  }

  /* ============================================================
     HERO + CONTENT MOBILE — prevent overflow
     ============================================================ */
  .rc-hero, .rc-hero * {
    max-width: 100% !important;
  }
  .rc-hero img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Clip hero/slider sections at viewport edge to prevent prev/next spill on mobile */
  .elementor-section[class*="slider-section"],
  .elementor-widget[class*="slider-widget"],
  .elementor-image-carousel.swiper-container,
  .layerslider-wrapper,
  .ls-wrapper,
  .rc-hero-container {
    overflow: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  /* Swiper: ensure wrapper doesn't exceed viewport */
  .elementor-image-carousel.swiper-container .swiper-wrapper {
    max-width: 100vw !important;
  }

  /* ============================================================
     PRODUCT GRID — 2 columns mobile (better than 1)
     ============================================================ */
  .products .product-miniature,
  .featured-products .product-miniature,
  #products .product-miniature {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
  @media (max-width: 480px) {
    .products .product-miniature,
    .featured-products .product-miniature,
    #products .product-miniature {
      flex: 0 0 100% !important;
      max-width: 100% !important;
    }
  }

  /* ============================================================
     COOKIE BANNER — prevent it eating viewport
     ============================================================ */
  #cookieplus-popup,
  .cookieplus-popup,
  [id*="cookieplus"],
  .cookies-banner {
    max-height: 50vh !important;
    overflow-y: auto !important;
  }

  /* ============================================================
     QTY INPUT mobile — restore visibility on product page
     (theme bundle hides with `display:none !important` on <768px)
     ============================================================ */
  body#product .product-add-to-cart .qty,
  body#product .product-quantity .qty,
  body#product .product-add-to-cart .input-group.bootstrap-touchspin,
  body#product .product-quantity .input-group.bootstrap-touchspin,
  body#product .product-add-to-cart .input-group-btn-vertical,
  body#product .product-quantity .input-group-btn-vertical,
  body#product .product-add-to-cart .col-add-qty,
  body#product .product-quantity .col-add-qty {
    display: flex !important;
    width: auto !important;
    height: auto !important;
    align-items: center !important;
  }
  body#product .product-add-to-cart .input-group.bootstrap-touchspin {
    width: 100px !important;
    margin-right: 12px !important;
  }
  body#product .product-add-to-cart .input-group.bootstrap-touchspin input {
    width: 40px !important;
    height: 44px !important;
    text-align: center !important;
    border: 1px solid #d1d5db !important;
    border-radius: 0 !important;
    padding: 0 4px !important;
  }
  body#product .product-add-to-cart .bootstrap-touchspin-up,
  body#product .product-add-to-cart .bootstrap-touchspin-down {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 44px !important;
    background: #f3f4f6 !important;
    border: 1px solid #d1d5db !important;
    color: #1f2937 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
  }
  body#product .product-add-to-cart .bootstrap-touchspin-up {
    border-radius: 0 4px 4px 0 !important;
  }
  body#product .product-add-to-cart .bootstrap-touchspin-down {
    border-radius: 4px 0 0 4px !important;
  }
  /* Layout container: qty + add-to-cart side by side */
  body#product .product-add-to-cart .input-group-add-cart,
  body#product .product-add-to-cart .product-add-cart {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }

  /* ============================================================
     PRODUCT CARD — fix add-to-cart button overflow on 2-col mobile
     ============================================================ */
  .product-miniature .mini-action-row,
  .product-miniature .product-add-cart,
  .product-miniature .input-group-add-cart {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    width: 100% !important;
    align-items: center !important;
  }
  .product-miniature .btn.add-to-cart,
  .product-miniature .mini-cart-btn,
  .product-miniature .btn-product-list.add-to-cart {
    font-size: 11px !important;
    padding: 8px 4px !important;
    white-space: normal !important;
    line-height: 1.2 !important;
    word-break: keep-all !important;
    text-align: center !important;
    flex: 1 1 100% !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  /* Related products carousel buttons: prevent text clipping */
  .product-accessories .product-miniature .btn.add-to-cart,
  .related-products .product-miniature .btn.add-to-cart,
  .js-product-accessories .btn.add-to-cart,
  .swiper-slide .btn.add-to-cart {
    font-size: 10px !important;
    padding: 6px 2px !important;
    letter-spacing: -0.2px !important;
  }
  /* Hide share button on mobile (frees space for AÑADIR button) */
  html body .product-miniature .btn-mini-share,
  html body .product-miniature button.btn-mini-share,
  html body .mini-action-row .btn-mini-share {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }
  /* Force mini-action-row + add-to-cart to use full card width */
  .product-miniature .mini-action-row {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 8px !important;
  }
  .product-miniature .btn.add-to-cart,
  .product-miniature .mini-cart-btn {
    width: 100% !important;
    min-width: 100% !important;
    flex: 1 1 100% !important;
    border-radius: 24px !important;
  }
  /* On very narrow viewports (<360px) shrink button text */
  @media (max-width: 360px) {
    .product-miniature .btn.add-to-cart,
    .product-miniature .mini-cart-btn {
      font-size: 10px !important;
      padding: 8px 4px !important;
    }
    /* Header: shrink logo + icons to keep all in one row at 320 */
    #mobile-header .col-mobile-logo img.logo,
    #mobile-header .col-mobile-logo img {
      max-width: 100px !important;
      max-height: 40px !important;
    }
    #mobile-header .col-mobile-btn .fa,
    #mobile-header .col-mobile-btn i.fa {
      font-size: 18px !important;
    }
    #mobile-header .col-mobile-btn,
    #mobile-header .col-mobile-btn .m-nav-btn,
    #mobile-header .col-mobile-btn > a {
      padding: 4px 4px !important;
      min-width: 36px !important;
    }
    #mobile-header .row {
      flex-wrap: nowrap !important;
    }
  }
  /* Product name: truncate to 2 lines max */
  .product-miniature .product-title,
  .product-miniature h3,
  .product-miniature .h3 {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-height: 2.6em !important;
    line-height: 1.3 !important;
    font-size: 13px !important;
  }
}

/* Tablet refinement */
@media (min-width: 576px) and (max-width: 991px) {
  #mobile-header .col-mobile-logo img.logo,
  #mobile-header .col-mobile-logo img {
    max-width: 180px !important;
    max-height: 54px !important;
  }
}

/* ============================================================
   FOOTER MOBILE: una sección por salto de línea (stacked)
   Aplica en TODAS las pantallas mobile + tablet
   ============================================================ */
@media (max-width: 991px) {
  footer .footer-container .row,
  footer #footer-container .row,
  .footer-container .row,
  footer .container > .row {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
    gap: 0 !important;
  }
  footer .footer-container .col,
  footer #footer-container .col,
  footer .footer-container [class*="col-"],
  footer #footer-container [class*="col-"],
  .footer-container [class*="col-"],
  footer .container > .row > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    text-align: left !important;
    padding: 16px 16px !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  }
  footer .footer-container [class*="col-"]:last-child,
  footer #footer-container [class*="col-"]:last-child {
    border-bottom: 0 !important;
  }
  footer .footer-container .block,
  footer .footer-container .block-content,
  footer .footer-container p,
  footer .footer-container .part,
  .footer-container .block,
  .footer-container .block-content,
  .footer-container p {
    text-align: left !important;
  }
  footer ul, footer ol,
  .footer-container ul, .footer-container ol {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
  }
  footer ul li, footer ol li,
  .footer-container ul li, .footer-container ol li {
    text-align: left !important;
    padding: 4px 0 !important;
    margin: 0 !important;
  }
  footer ul li a,
  footer ol li a,
  .footer-container a {
    text-align: left !important;
    display: inline-block !important;
    min-height: 36px;
    padding: 6px 0;
  }
  footer h1, footer h2, footer h3, footer h4, footer h5, footer h6,
  .footer-container h1, .footer-container h2, .footer-container h3,
  .footer-container h4, .footer-container h5, .footer-container h6,
  footer .block-title,
  footer .h4 {
    text-align: left !important;
    margin-bottom: 12px !important;
  }
  footer .footer-before .row > [class*="col-"],
  footer .footer-after .row > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    padding: 12px 16px !important;
  }
  footer .social-icons,
  footer .followus,
  footer [class*="social"] {
    justify-content: flex-start !important;
    text-align: left !important;
    padding-left: 0 !important;
  }
  /* Maps embed: limit height, keep aspect */
  footer iframe, footer .map-container {
    max-height: 240px !important;
    width: 100% !important;
  }
  /* Payment icons row: scrollable horizontal */
  footer .footer-after,
  .footer-after,
  .payment-methods {
    text-align: left !important;
    padding-left: 16px !important;
  }
  footer .payment-list,
  .payment-list,
  .footer-after [class*="payment"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: flex-start !important;
  }
}

/* ============================================================
   COPYRIGHT row — single line, no 2-col split
   ============================================================ */
@media (max-width: 991px) {
  .copyright,
  .footer-copyright,
  footer .copyright-row {
    text-align: left !important;
    padding: 12px 16px !important;
    font-size: 12px !important;
  }
  .copyright > *,
  .footer-copyright > * {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    margin: 4px 0 !important;
  }
}

/* ============================================================
   FOOTER MOBILE — COMPACT + LEFT-ALIGNED (estilo Uniclima)
   ============================================================ */
@media (max-width: 991px) {
  /* Reduce footer total height */
  #footer.js-footer {
    font-size: 13px !important;
  }
  /* Each accordion section: compact padding */
  #footer .footer-container .block,
  #footer .footer-container .block-toggle,
  #footer .footer-container [class*="block-iqit"] {
    padding: 14px 18px !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    text-align: left !important;
  }
  #footer .footer-container .block:last-child,
  #footer .footer-container .block-toggle:last-child {
    border-bottom: 0 !important;
  }
  /* Accordion title: small, uppercase, left-aligned */
  #footer .block-toggle .block-title,
  #footer .block-toggle h4,
  #footer .block-toggle .h4,
  #footer .block-toggle .block-title-iqit,
  #footer .footer-container h4,
  #footer .footer-container .h4 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    text-align: left !important;
    color: #ffffff !important;
    line-height: 1.4 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
  }
  /* Accordion arrow: clean position right */
  #footer .block-toggle .block-title::after,
  #footer .block-toggle h4::after,
  #footer .block-toggle .h4::after,
  #footer .block-toggle [class*="title"] .fa,
  #footer .block-toggle .toggle-icon {
    float: none !important;
    margin-left: auto !important;
    font-size: 12px !important;
    color: rgba(255,255,255,0.5) !important;
  }
  /* Block content: when expanded, compact */
  #footer .block-content,
  #footer .block-toggle .block-content {
    padding: 12px 0 0 0 !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  #footer .block-content ul,
  #footer .block-content ol {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }
  #footer .block-content li,
  #footer .block-content li a {
    padding: 6px 0 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    min-height: 32px !important;
    text-align: left !important;
  }
  /* Hide Google Maps iframe in elementor section (huge on mobile) */
  iframe[src*="google.com/maps"],
  iframe[src*="maps.google"],
  .elementor-custom-embed iframe[src*="maps"],
  #footer iframe[src*="google.com/maps"],
  #footer iframe[src*="maps.google"],
  #footer .google-map,
  #footer [class*="google-map"] {
    max-height: 180px !important;
    margin: 8px 0 !important;
    border-radius: 8px !important;
    width: 100% !important;
  }
  /* Hide the elementor section that contains the map (frees ~350px) */
  .elementor-custom-embed:has(iframe[src*="maps"]) {
    max-height: 200px !important;
    overflow: hidden !important;
    border-radius: 8px !important;
    margin: 16px !important;
  }
  /* Contact block: icons + text inline */
  #footer .block-iqitcontactpage .contact-rich,
  #footer .contact-rich {
    text-align: left !important;
  }
  #footer .contact-rich .data,
  #footer .contact-rich p {
    margin: 6px 0 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  #footer .contact-rich .icon,
  #footer .contact-rich .fa {
    margin-right: 8px !important;
    color: rgba(255,255,255,0.7) !important;
  }

  /* Copyright + payment row: compact, left-aligned, single column */
  #footer-copyrights,
  ._footer-copyrights-1 {
    padding: 14px 0 !important;
    text-align: left !important;
  }
  #footer-copyrights .container,
  ._footer-copyrights-1 .container {
    padding: 0 18px !important;
  }
  #footer-copyrights .row {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin: 0 !important;
  }
  #footer-copyrights [class*="copyright"],
  #footer-copyrights .copyright-img,
  #footer-copyrights .copyright-txt,
  ._footer-copyrights-1 [class*="copyright"] {
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    padding: 0 !important;
    flex: 0 0 100% !important;
  }
  #footer-copyrights .copyright-img {
    text-align: left !important;
  }
  #footer-copyrights .copyright-img img {
    max-height: 28px !important;
    width: auto !important;
    margin: 0 !important;
  }
  #footer-copyrights .copyright-txt span,
  #footer-copyrights .copyright-txt {
    font-size: 11px !important;
    line-height: 1.4 !important;
    text-align: left !important;
    color: rgba(255,255,255,0.5) !important;
    display: block !important;
  }
  /* Cancel push/pull bootstrap classes that flip order on mobile */
  #footer-copyrights .push-sm-6,
  #footer-copyrights .pull-sm-6 {
    left: 0 !important;
    right: 0 !important;
  }
  /* Block separator dividers cleaner */
  #footer hr,
  #footer .divider {
    margin: 8px 0 !important;
    border-color: rgba(255,255,255,0.08) !important;
  }
}

/* ============================================================
   REMOVE GRAY BACKGROUND from FAQ + Servicios sections
   (originally #f5f5f5 inline — override to transparent)
   ============================================================ */
.rc-faq,
.rc-servicios,
.rc-faq.rc-faq,
div.rc-faq,
div.rc-servicios {
  background: transparent !important;
  background-color: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ============================================================
   FAQ — REDESIGN estético + responsive
   ============================================================ */
.rc-faq {
  padding: 32px 0 !important;
}
.rc-faq h2,
.rc-faq #faq-title-custom {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #1a2b4a !important;
  text-align: center !important;
  margin: 0 0 28px 0 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
}
.rc-faq .faq-container {
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
  align-items: start !important;
}
.rc-faq .faq-item {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03) !important;
  overflow: hidden !important;
  transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.2s ease !important;
}
.rc-faq .faq-item:hover {
  box-shadow: 0 4px 16px rgba(29,78,216,0.10), 0 2px 6px rgba(29,78,216,0.06) !important;
  border-color: rgba(29,78,216,0.22) !important;
  transform: translateY(-1px) !important;
}
.rc-faq .faq-item.active,
.rc-faq .faq-item.open,
.rc-faq .faq-item[aria-expanded="true"] {
  border-color: rgba(29,78,216,0.30) !important;
  box-shadow: 0 6px 20px rgba(29,78,216,0.12), 0 2px 6px rgba(29,78,216,0.08) !important;
  background: linear-gradient(180deg, #f8faff 0%, #ffffff 100%) !important;
}
.rc-faq .faq-question {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 18px 20px !important;
  cursor: pointer !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1a2b4a !important;
  letter-spacing: -0.01em !important;
  line-height: 1.4 !important;
  user-select: none !important;
  background: transparent !important;
  border: none !important;
  width: 100% !important;
  text-align: left !important;
  transition: color 0.2s ease !important;
}
.rc-faq .faq-question:hover {
  color: #1d4ed8 !important;
}
.rc-faq .faq-question span:first-child {
  flex: 1 !important;
  min-width: 0 !important;
  white-space: normal !important;
  word-wrap: break-word !important;
}
.rc-faq .faq-arrow {
  font-size: 11px !important;
  color: #1d4ed8 !important;
  flex-shrink: 0 !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: rgba(29,78,216,0.08) !important;
  border: none !important;
}
.rc-faq .faq-item.active .faq-arrow,
.rc-faq .faq-item.open .faq-arrow,
.rc-faq .faq-item[aria-expanded="true"] .faq-arrow {
  transform: rotate(90deg) !important;
  background: rgba(29,78,216,0.18) !important;
}
.rc-faq .faq-answer {
  padding: 0 20px 20px 20px !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: #4b5563 !important;
  border-top: 1px solid rgba(0,0,0,0.04) !important;
  margin-top: -1px !important;
  padding-top: 16px !important;
  animation: faqSlideDown 0.3s ease !important;
}
.rc-faq .faq-answer p,
.rc-faq .faq-answer * {
  color: #4b5563 !important;
  margin: 0 0 10px 0 !important;
  background: transparent !important;
}
.rc-faq .faq-answer p:last-child,
.rc-faq .faq-answer *:last-child {
  margin-bottom: 0 !important;
}
@keyframes faqSlideDown {
  from { opacity: 0; transform: translateY(-4px); max-height: 0; }
  to { opacity: 1; transform: translateY(0); max-height: 600px; }
}

/* FAQ — Mobile single column */
@media (max-width: 991px) {
  .rc-faq {
    padding: 24px 0 !important;
  }
  .rc-faq h2,
  .rc-faq #faq-title-custom {
    font-size: 22px !important;
    margin: 0 0 20px 0 !important;
    padding: 0 16px !important;
  }
  .rc-faq .faq-container {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 0 12px !important;
    max-width: 100% !important;
  }
  .rc-faq .faq-question {
    padding: 16px 14px !important;
    font-size: 14px !important;
  }
  .rc-faq .faq-arrow {
    width: 24px !important;
    height: 24px !important;
    font-size: 10px !important;
  }
  .rc-faq .faq-answer {
    padding: 14px 14px 16px 14px !important;
    font-size: 13px !important;
  }
}

/* ============================================================
   SERVICIOS section — also remove gray + improve cards
   ============================================================ */
.rc-servicios {
  padding: 32px 0 !important;
}
.rc-servicios .service-card,
.rc-servicios [class*="service"] > div,
.rc-servicios .col {
  border-radius: 14px !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03) !important;
  transition: box-shadow 0.25s ease, transform 0.2s ease, border-color 0.25s ease !important;
  background: #ffffff !important;
}
.rc-servicios .service-card:hover,
.rc-servicios [class*="service"] > div:hover {
  box-shadow: 0 8px 24px rgba(29,78,216,0.10), 0 2px 6px rgba(29,78,216,0.06) !important;
  border-color: rgba(29,78,216,0.20) !important;
  transform: translateY(-2px) !important;
}
@media (max-width: 991px) {
  .rc-servicios {
    padding: 20px 0 !important;
  }
}

/* ============================================================
   RC FIX-13 2026-04-20: Drawer close X + back btn + submenu panel polish
   ============================================================ */
@media (max-width: 991.98px) {
  /* Close X: visible on dark drawer bg, 44x44 tap target, above panels */
  html body #iqitmegamenu-mobile .js-mobile-menu__close,
  html body .mobile-menu .mobile-menu__close {
    color: #ffffff !important;
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    border-radius: 50% !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 50 !important;
    cursor: pointer !important;
    opacity: 1 !important;
  }
  html body #iqitmegamenu-mobile .js-mobile-menu__close:active,
  html body #iqitmegamenu-mobile .js-mobile-menu__close:focus {
    background: rgba(255,255,255,0.18) !important;
    outline: 2px solid #60a5fa !important;
    outline-offset: 2px !important;
  }
  html body #iqitmegamenu-mobile .js-mobile-menu__close .fa,
  html body #iqitmegamenu-mobile .js-mobile-menu__close .fa-times {
    color: #ffffff !important;
    font-size: 18px !important;
    line-height: 1 !important;
    opacity: 1 !important;
  }

  /* Back button: only visible when a submenu is active; 44px tap target */
  html body #iqitmegamenu-mobile .js-mobile-menu__back-btn {
    display: none !important;
    align-items: center !important;
    color: #ffffff !important;
    background: transparent !important;
    border: 0 !important;
    min-height: 44px !important;
    padding: 6px 10px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
  }
  html body #iqitmegamenu-mobile .js-mobile-menu__header.mobile-menu__header--active .js-mobile-menu__back-btn,
  html body #iqitmegamenu-mobile.mobile-menu--active .js-mobile-menu__back-btn {
    display: inline-flex !important;
  }
  html body #iqitmegamenu-mobile .js-mobile-menu__back-btn .fa,
  html body #iqitmegamenu-mobile .js-mobile-menu__title {
    color: #ffffff !important;
  }

  /* Active submenu panel: override theme's white bg with dark drawer-matching bg.
     Leave positioning to theme's native CSS (absolute, top:0, w-100, h-100 on parent ul). */
  html body #iqitmegamenu-mobile .mobile-menu__submenu.mobile-menu__submenu--panel,
  html body #iqitmegamenu-mobile .js-mobile-menu__submenu {
    background: transparent !important;
  }
  html body #iqitmegamenu-mobile .mobile-menu__submenu.mobile-menu__submenu--active {
    background-color: #0b1326 !important;
    background-image: linear-gradient(180deg, #0b1326 0%, #071022 100%) !important;
    z-index: 1050 !important;
  }

  /* Submenu items: proper tap targets + white text + subtle row spacing */
  html body #iqitmegamenu-mobile .mobile-menu__submenu .mobile-menu__links-list-li {
    min-height: 44px !important;
    list-style: none !important;
  }
  html body #iqitmegamenu-mobile .mobile-menu__submenu a,
  html body #iqitmegamenu-mobile .mobile-menu__submenu .mobile-menu__links-list-li > a {
    color: #ffffff !important;
    display: block !important;
    padding: 12px 10px !important;
    min-height: 44px !important;
    border-radius: 8px !important;
  }
  html body #iqitmegamenu-mobile .mobile-menu__submenu a:hover,
  html body #iqitmegamenu-mobile .mobile-menu__submenu a:active {
    background: rgba(255,255,255,0.08) !important;
    text-decoration: none !important;
  }
}

/* RC FIX-20 REVERTED 2026-04-20: was breaking /tienda product miniatures with
   default placeholder (visibility:hidden cascaded to product images too).
   Left PS default "Imagen no disponible" placeholder as-is. */

/* ============================================================
   RC FIX-28 2026-04-20: Hero CTA no longer hidden by pagination dots
   — Move .rc-hero-nav dots OUT of absolute overlap with CTA button
   ============================================================ */
.rc-hero {
  position: relative !important;
  padding-bottom: 70px !important; /* space for dots BELOW the card */
}
.rc-hero-nav {
  position: absolute !important;
  bottom: 10px !important;
  top: auto !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  display: inline-flex !important;
  gap: 4px !important;
  z-index: 2 !important;
}
.rc-hero-cta {
  position: relative !important;
  z-index: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 24px !important;
  background: #dc2626 !important;
  color: #ffffff !important;
  border-radius: 9999px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: background 0.2s ease, transform 0.15s ease !important;
  min-height: 48px !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25) !important;
}
.rc-hero-cta:hover,
.rc-hero-cta:focus-visible {
  background: #b91c1c !important;
  transform: translateY(-1px) !important;
  text-decoration: none !important;
  color: #ffffff !important;
}

/* Hero typography consistency — match sans-serif site font */
.rc-hero-title,
.rc-hero-price,
.rc-hero-subtitle,
.rc-hero-badge {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* Google verification badge on review avatars — stop overlapping the name */
.review-verification-badge,
[class*="review"] [class*="google"],
.review-avatar img[alt*="Google"],
.review-author > svg.google-icon {
  position: absolute !important;
  right: 2px !important;
  bottom: 2px !important;
  top: auto !important;
  left: auto !important;
  width: 18px !important;
  height: 18px !important;
  z-index: 2 !important;
}
.review-author,
[class*="review-author"] {
  position: relative !important;
  display: block !important;
  text-align: center !important;
  margin-top: 6px !important;
}

/* ============================================================
   RC FIX-29 2026-04-20: Product page polish mobile
   ============================================================ */
@media (max-width: 991.98px) {
  /* Product thumbnails: horizontal row below main image (no vertical column) */
  body#product .product-images,
  body#product .js-qv-product-images,
  body#product .product-images.js-qv-product-images {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: flex-start !important;
    margin-top: 10px !important;
    padding: 0 !important;
    width: 100% !important;
  }
  body#product .product-images .thumb-container,
  body#product .js-qv-product-images .thumb,
  body#product .product-images-layout .thumb {
    flex: 0 0 64px !important;
    width: 64px !important;
    height: 64px !important;
    margin: 0 !important;
  }
  body#product .product-images img.thumb,
  body#product .product-images .thumb-container img {
    width: 64px !important;
    height: 64px !important;
    object-fit: contain !important;
    border-radius: 6px !important;
  }

  /* Product title: smaller on mobile, better breaking */
  body#product h1.page-title,
  body#product h1.product-title,
  body#product main h1 {
    font-size: 22px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    hyphens: auto !important;
  }
}

/* ============================================================
   RC FIX-30 2026-04-20: Brand badges on home — remove faded/opaque look
   ============================================================ */
.brand-box,
.brand-item,
[class*="brand-list"] .brand,
.manufacturers .manufacturer-item {
  opacity: 1 !important;
  filter: none !important;
}
.brand-box img,
.brand-item img,
[class*="brand-list"] img,
.manufacturers img {
  filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
}

/* ============================================================
   RC FIX-23 2026-04-20: Lighthouse color-contrast — text-muted ≥4.5:1
   ============================================================ */
html body .text-muted,
html body .product-reference.text-muted,
html body .product-brand.text-muted,
html body .product-description-short.text-muted,
html body .product-category-name.text-muted,
html body small.text-muted {
  /* gray-600 #4b5563 = 7.56:1 on white (AAA) */
  color: #4b5563 !important;
}
html body .product-reference,
html body .product-reference.text-muted {
  /* SKU references need high contrast */
  color: #374151 !important; /* gray-700 = 10.3:1 on white */
}
/* Dark-bg contexts (drawer/footer dark): inherit white */
html body .drawer .text-muted,
html body footer.dark .text-muted,
html body [class*="dark"] .text-muted,
html body .bg-dark .text-muted {
  color: #d1d5db !important; /* gray-300 on dark */
}
/* Sort-by / current-sort controls */
html body .sort-by-row .sort-by,
html body .sort-by-row .current-sort,
html body .sort-by-btn {
  color: #374151 !important;
}
/* Placeholder text */
html body ::placeholder,
html body ::-webkit-input-placeholder {
  color: #6b7280 !important; /* gray-500 = 4.83:1 */
  opacity: 1 !important;
}
/* Secondary buttons */
html body .btn-secondary,
html body .btn-outline-secondary {
  color: #1f2937 !important; /* gray-800 */
}
html body .btn-secondary:not(:hover):not(:active) {
  background-color: #f3f4f6 !important;
  border-color: #d1d5db !important;
}

/* ============================================================
   RC FIX-27 2026-04-20: Final Lighthouse color-contrast fixes
   Darken reds to meet AA 4.5:1 on white/dark backgrounds.
   ============================================================ */
/* #d8412d → #b02a18 (~5.1:1 on white) */
html body .sc-item-price,
html body .product-price:not(.regular-price),
html body [class*="price-discount"],
html body .price.price-red {
  color: #b02a18 !important;
}
/* Hero badge: white on red #ed2711 (4.28:1) → darken bg to #b81d08 (~5.6:1) */
html body .rc-hero-badge,
html body [class*="hero-badge"] {
  background-color: #b81d08 !important;
  color: #ffffff !important;
}
/* .ti-read-more-active #808080 → #595959 (7.0:1) */
html body .ti-read-more-active,
html body .ti-read-more,
html body [class*="read-more-active"] {
  color: #595959 !important;
}
/* Any remaining gray-500 text used as body text — boost */
html body [style*="color: #808080"],
html body [style*="color:#808080"],
html body [style*="color: gray"] {
  color: #595959 !important;
}