/*
 * MONTECRISTO — camada técnica adicional
 * Não substitui o CSS original. Só corrige responsividade, interação e acessibilidade.
 */

html,
body {
  max-width: 100%;
}

body {
  overflow-x: clip;
}

@supports not (overflow: clip) {
  body { overflow-x: hidden; }
}

img,
picture,
video,
canvas,
svg {
  max-width: 100%;
}

img,
video {
  height: auto;
}

product-card,
main-product,
main-product-images,
special-selection,
carrousel-related-products {
  min-width: 0;
}

/* Mantém o card original e acrescenta apenas feedback sutil. */
product-card {
  position: relative;
  transform: translateZ(0);
  transition: transform .28s ease, box-shadow .28s ease;
}

product-card .product-card-images {
  overflow: hidden;
}

product-card .product-card-images img,
.card-prouct-special-selection img {
  transition: transform .34s ease, opacity .34s ease;
  transform-origin: center center;
}

@media (hover: hover) and (pointer: fine) {
  product-card:hover {
    transform: translateY(-3px);
  }

  product-card:hover .product-card-images img,
  .card-prouct-special-selection:hover img {
    transform: scale(1.018);
  }
}

product-card:active,
.card-prouct-special-selection:active {
  transform: scale(.995);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
product-card:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Revelação discreta: só entra em vigor se o JS estiver ativo. */
@media (prefers-reduced-motion: no-preference) {
  .mc-js .mc-reveal {
    opacity: .01;
    transform: translateY(10px);
    transition: opacity .45s ease, transform .45s ease;
  }

  .mc-js .mc-reveal.mc-visible {
    opacity: 1;
    transform: none;
  }
}

/* Regras de segurança responsiva sem remodelar o desktop. */
@media (max-width: 1200px) {
  .container,
  .page-width,
  .header-content,
  .footer-content {
    max-width: 100%;
  }
}

@media (max-width: 992px) {
  body.mc-menu-open {
    overflow: hidden;
  }

  body.mc-menu-open .menu-drawer {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateX(0) !important;
  }

  .menu-drawer {
    max-width: min(92vw, 480px);
  }

  .product-card-images img,
  .container-item-image img,
  .banner_image,
  .image_item_collection {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  html,
  body {
    width: 100%;
    min-width: 0;
  }

  main,
  section,
  .shopify-section,
  .main-product-content,
  .container-infos,
  .container-image,
  .container-products,
  .container-products-special-selection,
  .blaze-container,
  .blaze-track-container {
    min-width: 0;
    max-width: 100%;
  }

  input,
  select,
  textarea,
  button {
    max-width: 100%;
  }

  .container-title-price,
  .container-quantity-add-cart,
  .container-options {
    min-width: 0;
  }

  .title,
  .title-product,
  .price-product,
  .installments-product,
  .info_installment,
  p,
  a,
  span {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 576px) {
  .product-card-images,
  .container-item-image,
  .container-image {
    min-width: 0;
  }

  .main-product-form-add-to-cart,
  .menu-newsletter-button,
  .menu-newsletter-field {
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* LM Bazar: somente ajuste de encaixe da nova logo; não altera o layout do tema. */
img.logo[src*="lm-bazar-logo.png"],
img[src*="lm-bazar-logo.png"] {
  object-fit: contain;
}

header img.logo[src*="lm-bazar-logo.png"] {
  width: auto !important;
  height: 60px !important;
  max-width: 190px !important;
}

@media (max-width: 768px) {
  header img.logo[src*="lm-bazar-logo.png"] {
    height: 48px !important;
    max-width: 150px !important;
  }
}

/* LM Bazar: remove integrações antigas de relojoaria que não pertencem à nova marca. */
a[href*="/pages/rolex"],
.rolex-clock-wrapper,
iframe[title="Rolex Watches"] {
  display: none !important;
}

.main-footer .lm-bazar-footer-logo {
  width: 150px !important;
  height: auto !important;
  max-height: 150px !important;
  object-fit: contain !important;
}

/* LM Bazar — correção local do carrossel principal.
   Mantém o visual do tema, mas garante que slide e paginação avancem juntos. */
banner-carousel .blaze-track-container {
  overflow: hidden !important;
}

banner-carousel .blaze-track.lm-banner-track {
  display: flex !important;
  width: 100% !important;
  will-change: transform;
  transition: transform .30s ease !important;
}

banner-carousel .lm-banner-track > .blaze-slide {
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: 100% !important;
}

banner-carousel .banner_image {
  width: 100% !important;
  height: auto !important;
}

@media (min-width: 600px) {
  banner-carousel .banner_image.desktop { display: block !important; }
  banner-carousel .banner_image.mobile { display: none !important; }
}

@media (max-width: 599px) {
  banner-carousel .banner_image.desktop { display: none !important; }
  banner-carousel .banner_image.mobile { display: block !important; }
}


/* LM Bazar — paginação do banner sem sobrepor a arte no celular. */
@media (max-width: 599px) {
  banner-carousel.lm-local-carousel .blaze-track-container {
    overflow: hidden !important;
  }

  banner-carousel.lm-local-carousel .lm-banner-pagination {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: 100% !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 10px 8px 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: #fff !important;
    z-index: 5 !important;
  }

  banner-carousel.lm-local-carousel .lm-banner-pagination button {
    position: static !important;
    display: block !important;
    flex: 0 0 auto !important;
    width: 8px !important;
    min-width: 8px !important;
    height: 8px !important;
    min-height: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #1a1a1a !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
  }

  banner-carousel.lm-local-carousel .lm-banner-pagination button::before,
  banner-carousel.lm-local-carousel .lm-banner-pagination button::after {
    content: none !important;
    display: none !important;
  }

  banner-carousel.lm-local-carousel .lm-banner-pagination button.active,
  banner-carousel.lm-local-carousel .lm-banner-pagination button[aria-current="true"] {
    background: #1a1a1a !important;
  }
}

/* LM Bazar — carrossel reduzido para 2 banners.
   Cada slide usa <picture>: nunca renderiza desktop + mobile ao mesmo tempo. */
banner-carousel.lm-local-carousel .lm-banner-picture {
  display: block !important;
  width: 100% !important;
  line-height: 0 !important;
}

banner-carousel.lm-local-carousel .lm-banner-picture .lm-banner-only {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  object-fit: contain !important;
}

@media (max-width: 767px) {
  banner-carousel.lm-local-carousel,
  banner-carousel.lm-local-carousel .blaze-slider,
  banner-carousel.lm-local-carousel .blaze-container,
  banner-carousel.lm-local-carousel .blaze-track-container,
  banner-carousel.lm-local-carousel .lm-banner-track,
  banner-carousel.lm-local-carousel .lm-banner-track > .blaze-slide,
  banner-carousel.lm-local-carousel .lm-banner-picture {
    width: 100% !important;
    max-width: 100% !important;
  }

  banner-carousel.lm-local-carousel .lm-banner-track > .blaze-slide {
    overflow: hidden !important;
  }

  banner-carousel.lm-local-carousel .lm-banner-picture .lm-banner-only {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* LM Bazar — correção dos anúncios/produtos personalizados
   Remove o efeito de borda/área de cor diferente e faz a imagem ocupar melhor o card. */
product-card .product-card-images {
  background: #f2f2f2 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  aspect-ratio: 1 / 1 !important;
  position: relative;
}

product-card .product-card-images > a,
product-card .product-card-images .second-image-link {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
}

product-card .product-card-images img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

product-card .overlay-bg-card-product {
  inset: 0 !important;
}


/* LM Bazar — comércio via WhatsApp */
.lm-whatsapp-buy {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
}
.lm-whatsapp-header .nav-cart-icon {
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.lm-wa-icon { font-size: 2rem; line-height: 1; color: #575656; }
.lm-demo-notice {
  margin: 1rem auto 0;
  text-align: center;
  font-size: 1.2rem;
  line-height: 1.5;
  color: #fff;
  opacity: .82;
}