/* +Performance frontend responsive
 * Capa de presentacion cargada al final del <head>.
 * No redefine Bootstrap, precios, stock ni estados funcionales.
 */

/* Medios y controles: contener contenido real sin alterar su valor ni accion. */
#motopress-main img,
#motopress-main video,
#motopress-main iframe {
  max-width: 100%;
}

#motopress-main input,
#motopress-main select,
#motopress-main textarea,
#motopress-main button {
  max-width: 100%;
  box-sizing: border-box;
}

#motopress-main .entry-content,
#motopress-main .page,
#motopress-main .post,
#motopress-main .woocommerce,
#motopress-main .summary,
#motopress-main .section-box,
#motopress-main .modal-body {
  min-width: 0;
  overflow-wrap: anywhere;
}

#motopress-main .modal,
#motopress-main .modal-dialog,
#motopress-main .modal-content {
  max-width: calc(100vw - 24px);
  box-sizing: border-box;
}

#motopress-main .acordeon-contenido,
#motopress-main .table-responsive {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#motopress-main .acordeon-contenido table,
#motopress-main .table-responsive table {
  margin-bottom: 0;
}

/* Header: la fila superior debe caber incluso en 320 CSS px. */
@media (max-width: 1199px) {
  header.header .mobile-menu-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
  }

  header.header .header-icons {
    width: 100%;
    max-width: 420px;
    margin-inline: auto;
    padding-inline: 4px;
    box-sizing: border-box;
    justify-content: space-between;
    gap: 4px;
  }

  header.header .header-icon {
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    padding: 4px;
  }

  header.header .logo_box nav.nav__primary {
    flex-wrap: wrap;
  }

  header.header .nav-left {
    flex: 0 0 auto;
  }

  header.header .nav-right {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
  }

  #topnav {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: 120px;
    left: calc(-1 * min(92vw, 360px) - 12px);
    width: min(92vw, 360px);
    height: calc(100vh - 120px);
    height: calc(100dvh - 120px);
    padding: 8px 0;
    overflow-y: auto;
    background: #fff;
    box-shadow: 2px 0 6px rgba(0,0,0,.2);
    transition: left .3s ease;
    z-index: 10040;
    overscroll-behavior: contain;
    box-sizing: border-box;
  }

  #topnav.mobile-open {
    left: 0;
  }

  #topnav > li,
  #topnav li,
  #topnav li > a {
    float: none !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  #topnav ul.sub-menu {
    position: static !important;
    display: none !important;
    visibility: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0;
    padding-left: 14px;
    border-left: 3px solid #f23534;
    background: transparent !important;
    box-sizing: border-box;
  }

  #topnav li.open > ul.sub-menu,
  #topnav li.sfHover > ul.sub-menu {
    display: block !important;
    visibility: visible !important;
  }

  #topnav li > a.has-submenu {
    position: relative;
    padding-right: 48px;
  }

  #topnav li {
    position: relative;
  }

  #topnav li > .submenu-toggle {
    position: absolute;
    top: 6px;
    right: 10px;
    display: block !important;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
  }

  #topnav li > a .sf-sub-indicator {
    display: none !important;
  }
}

@media (max-width: 360px) {
  header.header .header-icons {
    max-width: 300px;
    gap: 2px;
    padding-inline: 0;
  }

  header.header .header-icon {
    width: 38px;
    height: 38px;
    font-size: 17px;
  }

  header.header .mobile-menu-toggle {
    min-width: 38px;
    min-height: 38px;
    padding: 7px 9px;
  }

  header #search-header input#search-form_is {
    padding-inline: 12px !important;
    font-size: 12px;
  }
}

/* Sticky: tmStickUp conserva la autoridad; solo se fija su geometria. */
header.header .logo_box.isStuck,
header.header .isStuck.logo_box {
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 8px clamp(10px, 3vw, 28px) !important;
  box-sizing: border-box;
  background: #fff;
  border-bottom: 1px solid #e3e3e3;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
}

header.header .logo_box.isStuck nav.nav__primary,
header.header .isStuck.logo_box nav.nav__primary {
  width: 100%;
  max-width: 1230px;
  margin-inline: auto;
}

/* Home: compacta dentro del viewport; el full-bleed se habilita solo en desktop. */
body.home .banner_box1 {
  position: relative;
  left: auto;
  width: 100%;
  margin-left: 0;
  padding: clamp(18px, 2.2vw, 34px) clamp(10px, 2.5vw, 42px);
  box-sizing: border-box;
  background: linear-gradient(180deg, #fff 0%, #f5f5f5 100%);
}

body.home .banner_box1_wrap_inner {
  width: 100%;
  max-width: 2200px;
  margin-inline: auto;
}

body.home .home-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(14px, 1.5vw, 28px);
  margin: 0;
}

body.home .home-card {
  min-width: 0;
  margin: 0;
}

body.home .home-card .banner_box {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: 100%;
  min-height: 220px;
  aspect-ratio: 570 / 290;
  overflow: hidden;
  box-sizing: border-box;
  background: #fff;
}

body.home .home-card .featured-thumbnail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  background: #fff;
}

body.home .home-card .featured-thumbnail > img,
body.home .home-card .banner-carousel .bslide {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center;
}

body.home .home-card .banner-carousel .bslide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}

body.home .home-card .banner-carousel .bslide-active {
  opacity: 1;
}

body.home .home-card .extra-wrap {
  width: min(62%, 420px);
  max-width: calc(100% - 20px);
  padding: clamp(16px, 2vw, 30px) 0 12px clamp(16px, 2.4vw, 32px);
  box-sizing: border-box;
}

body.home .home-card .extra-wrap h4 {
  font-size: clamp(27px, 2.3vw, 48px);
  line-height: 1;
  overflow-wrap: normal;
}

body.home .home-card .extra-wrap p {
  max-width: 22ch;
}

body.home .home-card .extra-wrap .btn {
  max-width: 100%;
  white-space: normal;
  box-sizing: border-box;
}

body.home .banner_box--superpro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.92) 34%, rgba(255,255,255,.15) 66%, rgba(255,255,255,0) 100%);
}

body.home .home-card .banner_box--superpro .featured-thumbnail > img.superpro-product-photo {
  object-position: 62% center;
}

body.home .home-card .banner_box--superpro .featured-thumbnail > img.superpro-brand-logo {
  position: absolute !important;
  top: auto !important;
  left: auto !important;
  z-index: 2;
  right: 14px;
  bottom: 12px;
  width: clamp(54px, 6vw, 82px) !important;
  height: auto !important;
  max-width: 82px !important;
  padding: 4px;
  border-radius: 6px;
  background: rgba(255,255,255,.9);
  object-fit: contain !important;
}

body.home .banner_box--superpro .extra-wrap {
  z-index: 3;
}

@media (min-width: 1200px) {
  body.home .banner_box1 {
    left: 50%;
    width: calc(100vw - 30px);
    margin-left: calc(-50vw + 15px);
  }
}

@media (max-width: 1099px) {
  body.home .home-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  body.home .banner_box1 {
    padding-inline: 10px;
  }

  body.home .home-card-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  body.home .home-card .banner_box {
    min-height: 0;
  }

  body.home .home-card .extra-wrap {
    top: 0;
    width: 58%;
    margin-top: 0;
    padding: 5% 0 0 5%;
  }

  body.home .home-card .extra-wrap h4 {
    margin: 0 0 4px;
    font-size: clamp(22px, 7vw, 32px);
  }

  body.home .home-card .extra-wrap p {
    display: block;
    margin: 0 0 8px;
    font-size: clamp(10px, 3.5vw, 13px);
    line-height: 1.25;
  }

  body.home .home-card .extra-wrap .btn {
    padding: 6px 8px;
    font-size: clamp(9px, 3vw, 12px) !important;
    line-height: 1.3 !important;
  }

  body.home .home-card .banner_box--superpro .featured-thumbnail > img.superpro-brand-logo {
    right: 8px;
    bottom: 8px;
    width: 52px !important;
  }
}

/* Listados, filtros y paginacion. */
#motopress-main .woocommerce-ordering,
#motopress-main .woocommerce-pagination,
#motopress-main .pagination,
#motopress-main .pagination ul {
  max-width: 100%;
}

#motopress-main .woocommerce-pagination ul,
#motopress-main .pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

#motopress-main ul.products li.product img,
#motopress-main .images.product-gallery img,
#motopress-main .cart-item img,
#motopress-main .checkout-summary img {
  object-fit: contain;
}

/* Formularios, carrito, checkout y cuenta en touch. */
@media (max-width: 767px) {
  #motopress-main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  #motopress-main select,
  #motopress-main textarea {
    width: 100%;
    min-width: 0;
  }

  #motopress-main button,
  #motopress-main input[type="submit"],
  #motopress-main input[type="button"],
  #motopress-main a.btn,
  #motopress-main a.button,
  #motopress-main .select2-selection--single {
    min-height: 44px;
  }

  #motopress-main .woocommerce-ordering {
    float: none;
    width: 100%;
    margin: 16px 0;
  }

  #motopress-main .woocommerce-ordering select {
    min-height: 44px;
  }

  #motopress-main .checkout,
  #motopress-main form.checkout,
  #motopress-main .login-wrapper,
  #motopress-main .profile-container,
  #motopress-main .form-address-wrapper {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  #motopress-main .wiz-step {
    min-height: 0;
    padding: 20px 14px;
  }

  #motopress-main .step-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  #motopress-main .step-actions > * {
    flex: 1 1 130px;
  }

  #motopress-main .profile-list .pl-row,
  #motopress-main .checkout-confirm-totals .row {
    align-items: flex-start;
  }

  #motopress-main .profile-list .pl-value,
  #motopress-main .checkout-confirm-totals strong {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  #motopress-main .cart-buttons-secondary,
  #motopress-main .cart-action-bar-bottom {
    max-width: 100%;
  }

  #motopress-main .contact-page .row-fluid,
  #motopress-main .address-fields-row,
  #motopress-main .form-row {
    min-width: 0;
  }
}

/* En ultrawide se aprovecha espacio visual, pero formularios y lectura conservan medida. */
@media (min-width: 1800px) {
  #motopress-main .checkout,
  #motopress-main form.checkout,
  #motopress-main .login-wrapper,
  #motopress-main .profile-container,
  #motopress-main article.post,
  #motopress-main .entry-content {
    margin-inline: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home .home-card .banner-carousel .bslide,
  header.header #topnav {
    transition-duration: .01ms !important;
  }
}