/* synced with aronga-fluid */
.aronga-cars{grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))!important;width:100%!important;max-width:none!important}
/* ARONGA_CARS_FULLWIDTH */

.aronga-cars {

  width: 100% !important;

  max-width: none !important;

  margin-left: 0 !important;

  margin-right: 0 !important;

  box-sizing: border-box !important;

}

.aronga-cars__img {

  max-height: none !important;

  width: 100% !important;

  height: auto !important;

  aspect-ratio: 4 / 3 !important;

  object-fit: contain !important;

}



/* =========================================================

   ARONGA Responsive — adapts to phone / tablet / desktop


   ========================================================= */





/* Base fluid safety */


*,


*::before,


*::after {


  box-sizing: border-box;


}





html {


  -webkit-text-size-adjust: 100%;


  text-size-adjust: 100%;


  overflow-x: hidden;


}





body {


  overflow-x: hidden;


  max-width: 100vw;


}





img,


video,


svg,


canvas {


  max-width: 100%;


  height: auto;


}





iframe {


  max-width: 100%;


}





table {


  max-width: 100%;


}





/* Scrollable tables on narrow screens */


.table-responsive,


.product-list,


.compare-table,


#content .table {


  overflow-x: auto;


  -webkit-overflow-scrolling: touch;


}





/* Containers don't spill — keep Bootstrap column widths */
.container,
.container-fluid,
.uni-wrapper {
  max-width: 100%;
}






/* ---------- Large desktop ---------- */


@media (min-width: 1200px) {


  .aronga-cars {


    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;


  }


  #product-category .category-list > div {


    width: 20% !important;


  }


}





/* ---------- Tablet ---------- */


@media (max-width: 1199px) {


  .aronga-cars {


    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;


    gap: 12px 10px !important;


  }


  .aronga-cars__img {


    max-height: none !important;


  }


  #product-category .category-list > div {


    width: 33.333% !important;


  }


}





@media (max-width: 991px) {


  /* iOS: fixed bg is janky */


  body {


    background-attachment: scroll !important;


    font-size: 16px !important;


    line-height: 1.45 !important;


  }





  /* Don't force 44px on every sidebar/menu link (aronga-mobile side-effect) */


  .column-left a,


  .column-right a,


  #column-left a,


  .menu a,


  .menu1 a,


  .menu2 a,


  .category-list__item,


  .breadcrumb a,


  .footer a {


    min-height: 0 !important;


  }





  /* Real CTAs stay tappable */


  .btn,


  .btn-primary,


  .header-menu__btn,


  .btn-menu,


  a[href^="tel:"],


  .top-menu__links a[href*="information_id=4"] {


    min-height: 44px !important;


  }





  /* Header: wrap instead of overflow */


  .header-block,


  .header-block__wrapper,


  header .row {


    flex-wrap: wrap !important;


  }





  .header-block__item-logo,


  #logo,


  .header-logo {


    max-width: 100% !important;


  }





  .aronga-brand {


    margin-left: 6px !important;


    max-width: calc(100vw - 90px);


  }





  .aronga-brand__badge {


    font-size: 10px !important;


    padding: 4px 8px 4px 6px !important;


    white-space: nowrap !important;


  }





  .aronga-brand__sub {


    font-size: 9px !important;


    overflow: hidden;


    text-overflow: ellipsis;


  }





  /* Search full width on its row */


  .header-search,


  #search {


    width: 100% !important;


    max-width: 100% !important;


    margin-top: 8px;


  }





  .header-search input,


  #search input {


    font-size: 16px !important; /* no iOS zoom */


    min-height: 44px !important;


  }





  /* Tap targets */


  .btn,


  .btn-primary,


  .btn-default,


  .header-menu__btn,


  .btn-menu {


    min-height: 44px !important;


    padding: 10px 14px !important;


  }





  a[href^="tel:"] {


    font-size: 18px !important;


    font-weight: 700 !important;


  }





  /* Content padding */


  #product-category #content .uni-wrapper,


  #product-product #content .uni-wrapper,


  #unicheckout .uni-wrapper {


    padding: 12px !important;


    border-radius: 10px !important;


  }





  /* Category teasers: 2–3 per row */


  #product-category .category-list > div {


    width: 50% !important;


    padding-left: 6px !important;


    padding-right: 6px !important;


  }





  #product-category .category-list__img,


  #product-category .category-list img {


    max-height: 110px !important;


  }





  /* Scheme fits viewport */


  #product-category #content .aronga-scheme-block--leaf {


    max-width: 100% !important;


    padding: 8px !important;


    margin-bottom: 14px !important;


  }





  #product-category #content .aronga-scheme-block--leaf .aronga-scheme__img {


    max-width: 100% !important;


    max-height: min(55vh, 360px) !important;


  }





  /* Products */


  .product-thumb__name,


  .product-thumb__name a {


    font-size: 15px !important;


    line-height: 1.35 !important;


  }





  .product-thumb__price,


  .price {


    font-size: 17px !important;


  }





  /* Home heading */


  #common-home .heading,


  .uni-module .heading {


    font-size: 22px !important;


    text-align: left !important;


  }





  /* Map */


  .aronga-footer-map,


  .aronga-map,


  .contacts__map {


    max-width: 100% !important;


  }





  .aronga-footer-map iframe,


  .aronga-map iframe,


  .contacts__map iframe {


    height: 280px !important;


    min-height: 240px !important;


  }





  /* Checkout sticky */


  #unicheckout .unicheckout-sticky__wrapper {


    position: static !important;


    width: 100% !important;


  }





  /* Menu drawer above everything */


  .menu,


  #menu,


  .menu-wrapper,


  .menu1,


  .menu2 {


    z-index: 10050 !important;


  }


}





/* ---------- Phone ---------- */


@media (max-width: 767px) {


  .aronga-cars {


    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;


    gap: 10px 8px !important;


    padding: 12px 8px 8px !important;


    border-radius: 12px !important;


  }





  .aronga-cars__img {


    max-height: none !important;


  }





  .aronga-cars__name {


    font-size: 12px !important;


    font-weight: 500 !important;


    color: #7a3f3f !important;


  }





  #product-category .category-list > div {


    width: 50% !important;


  }





  #product-category .category-list__name {


    font-size: 12px !important;


    font-weight: 500 !important;


    color: #7a3f3f !important;


  }





  #product-category .category-list__img,


  #product-category .category-list img {


    max-height: 90px !important;


  }





  h1,


  #content h1,


  .breadcrumb-h1 + h1 {


    font-size: 22px !important;


    line-height: 1.25 !important;


  }





  .footer .row > [class*="col-"] {


    margin-bottom: 16px;


  }





  /* Advantage / info strips stack */


  #common-home .col-sm-3,


  #common-home .col-md-3,


  .home-banner .col-sm-3 {


    width: 100% !important;


    float: none !important;


  }





  /* Hide decorative diamond density a bit for performance feel */


  body {


    background-size: auto, auto, auto, 64px 64px !important;


  }


}





/* ---------- Small phone ---------- */


@media (max-width: 400px) {


  .aronga-cars {


    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;


  }





  .aronga-brand__badge {


    font-size: 9px !important;


    letter-spacing: 0.02em !important;


  }





  .aronga-brand__sub {


    display: none !important; /* save space; logo badge remains */


  }





  #product-category #content .aronga-scheme-block--leaf .aronga-scheme__img {


    max-height: min(48vh, 280px) !important;


  }


}





/* ---------- Landscape phone ---------- */


@media (max-width: 900px) and (orientation: landscape) {


  #product-category #content .aronga-scheme-block--leaf .aronga-scheme__img {


    max-height: 70vh !important;


  }





  .aronga-cars {


    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;


  }


}





/* Prefer reduced motion */


@media (prefers-reduced-motion: reduce) {


  .aronga-cars__item,


  .product-thumb,


  .btn-primary {


    transition: none !important;


  }


}