/* ===== Moto Swatches - estilos principais ===== */
.moto-swatches-widget{ position:relative; display:block; }
.moto-swatches-widget img{ display:block; width:100%; height:auto; border-radius:8px !important; user-select:none; -webkit-user-drag:none; }

/* Swiper base */
.moto-swatches-widget .swiper { position:relative; overflow:hidden; }
.moto-swatches-widget .swiper-wrapper { display:flex; transition-property:transform; box-sizing:content-box; }
.moto-swatches-widget .swiper-slide { flex-shrink:0; width:100%; }

/* Thumbs (3 por vez, 5px espaço) */
.moto-swatches-widget .moto-thumbs-bottom-wrap{ margin-top:8px; }
.moto-swatches-widget .moto-thumbs-bottom .swiper-slide{ height:200px; }
.moto-swatches-widget .moto-thumbs-bottom .swiper-slide img{
  width:100%; height:100%; object-fit:cover; border-radius:8px; user-select:none; -webkit-user-drag:none;
}
@media(max-width:767px){ .moto-swatches-widget .moto-thumbs-bottom .swiper-slide{ height:200px; } }

/* Setas/Paginação */
.moto-swatches-widget .swiper-button-prev, .moto-swatches-widget .swiper-button-next{ pointer-events:auto; z-index:5; }
.moto-swatches-widget .swiper-button-next:after, .moto-swatches-widget .swiper-button-prev:after{ font-size:18px; color:#fff; }

/* Swatches (acima das thumbs) */
.moto-swatches-widget .color-nav--above{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:10px; margin-bottom:8px; }
.moto-swatches-widget .color-nav__btn{
  width:12px; height:12px; padding:0 !important; line-height:1 !important;
  border-radius:50% !important;
  background: var(--c, #ccc) !important;
  border:1px solid rgba(255,255,255,.6);
  appearance:none; -webkit-appearance:none;
  outline:none !important; box-shadow:none !important;
  cursor:pointer;
}
/* Swatch ativo */
.moto-swatches-widget .color-nav__btn.is-active{
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(0,0,0,.35) !important;
}

/* Swatch com duas cores (diagonal) */
.moto-swatches-widget .color-nav__btn.is-dual{
  background: linear-gradient(135deg, var(--c, #ccc) 50%, var(--c2, #ccc) 50%) !important;
}
.moto-swatches-widget .color-nav__btn.is-dual:hover,
.moto-swatches-widget .color-nav__btn.is-dual:focus,
.moto-swatches-widget .color-nav__btn.is-dual.is-active{
  background: linear-gradient(135deg, var(--c, #ccc) 50%, var(--c2, #ccc) 50%) !important;
}

/* Swatch com três cores (diagonal em 3 faixas) */
.moto-swatches-widget .color-nav__btn.is-triple{
  background: linear-gradient(135deg,
    var(--c,  #ccc) 0%,     var(--c,  #ccc) 33.333%,
    var(--c2, #ccc) 33.333%,var(--c2, #ccc) 66.666%,
    var(--c3, #ccc) 66.666%,var(--c3, #ccc) 100%
  ) !important;
}
.moto-swatches-widget .color-nav__btn.is-triple:hover,
.moto-swatches-widget .color-nav__btn.is-triple:focus,
.moto-swatches-widget .color-nav__btn.is-triple.is-active{
  background: linear-gradient(135deg,
    var(--c,  #ccc) 0%,     var(--c,  #ccc) 33.333%,
    var(--c2, #ccc) 33.333%,var(--c2, #ccc) 66.666%,
    var(--c3, #ccc) 66.666%,var(--c3, #ccc) 100%
  ) !important;
}

/* Botões X custom (GLightbox/Elementor) */
.glightbox-container{ z-index: 999999; }
.ms-text-close, .ms-el-close{
  position: fixed;
  right: 16px;
  top: 16px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.45) !important;
  border-radius: 8 px !important;
  border: 1px solid rgba(255,255,255,.4) !important;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: .5px;
  z-index: 1000000;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease;
  line-height: 1;
  padding: 10px !important;
  border-radius: 6px !important;
}
.ms-text-close:hover, .ms-el-close:hover{transform: scale(1) !important;background-color: #373737 !important;  }



.glightbox-clean .gclose, .glightbox-clean .gnext, .glightbox-clean .gprev{padding: 10px !important; border: #fff 1px solid !important; border-radius: 8px; width: 50px !important; height: 50px !important; font-size: 12px !important;}
.gclose svg, .gnext svg, .gprev svg{width: 18px !important;}
.glightbox-clean .gclose:hover, .glightbox-clean .gnext:hover, .glightbox-clean .gprev:hover{border-radius: 8px !important; background-color: #373737;}