/* =========================================================
   1MARKA MOBILE IMAGE SCALE FIX
   Fixes oversized product images and horizontal overflow on phones.
   ========================================================= */

html,
body {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

*,
*::before,
*::after {
  box-sizing: border-box !important;
}

img,
picture,
svg,
video,
canvas {
  max-width: 100% !important;
  height: auto !important;
}

.container,
.wrapper,
.section,
main,
header,
footer {
  max-width: 100% !important;
}

/* Large product infographic images must not overflow mobile viewport */
.model-gallery,
.product-gallery,
.catalog-grid,
.bath-grid,
.models-grid,
.grid,
.gallery,
.image-grid {
  max-width: 100% !important;
  overflow: hidden !important;
}

.model-gallery img,
.product-gallery img,
.catalog-grid img,
.bath-grid img,
.models-grid img,
.gallery img,
.image-grid img,
.card img,
.product-card img,
.catalog-card img,
.model-card img,
.bath-card img,
section img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
}

/* Desktop/tablet: keep normal premium crop */
@media (min-width: 769px) {
  .card img,
  .product-card img,
  .catalog-card img,
  .model-card img,
  .bath-card img {
    aspect-ratio: 4 / 3;
    object-fit: cover !important;
  }
}

/* Phone: cards stack correctly and images are readable */
@media (max-width: 768px) {
  body {
    min-width: 0 !important;
  }

  .container,
  .wrapper,
  .section,
  .contacts-wrapper,
  .catalog-grid,
  .bath-grid,
  .models-grid,
  .grid,
  .model-gallery,
  .product-gallery,
  .gallery,
  .image-grid {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
  }

  .card,
  .product-card,
  .catalog-card,
  .model-card,
  .bath-card,
  .tile {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: hidden !important;
  }

  /* Product infographics should fit the screen, not keep original huge width */
  .model-gallery img,
  .product-gallery img,
  .gallery img,
  .image-grid img,
  section img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Catalog/card photos still crop beautifully */
  .card img,
  .product-card img,
  .catalog-card img,
  .model-card img,
  .bath-card img {
    aspect-ratio: 4 / 3;
    object-fit: cover !important;
  }

  /* Hero should not create horizontal scroll */
  .hero,
  .page-hero,
  .contact-hero,
  .contacts-hero {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    background-size: cover !important;
    background-position: center !important;
  }

  .hero .container,
  .hero-inner,
  .hero-content {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
  }
}