/* =========================================================
   ARONGA FLUID — any device, any width (v8)
   Must load last among aronga-*.css
   ========================================================= */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  max-width: 100vw;
}

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

/* Fluid shell — do NOT force #content/#column-* to 100% (breaks 2-col layout) */
.container,
.container-fluid {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.uni-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.container {
  padding-left: clamp(10px, 2.2vw, 28px) !important;
  padding-right: clamp(10px, 2.2vw, 28px) !important;
}

/* =========================================================
   TWO COLUMNS: left menu + right teasers/products
   Side-by-side, full site width (category + product group)
   ========================================================= */
#product-category > .row,
#product-product > .row,
#product-search > .row,
#product-manufacturer-info > .row,
#product-special > .row {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

#product-category #column-left,
#product-product #column-left,
#product-search #column-left,
#product-manufacturer-info #column-left,
#product-special #column-left,
#product-category #column-right,
#product-product #column-right {
  float: none !important;
  position: relative !important;
  display: block !important;
  flex: 0 0 clamp(200px, 22vw, 280px) !important;
  width: clamp(200px, 22vw, 280px) !important;
  max-width: 280px !important;
  min-width: 180px !important;
  margin-top: 0 !important; /* kill UniShop menu_expanded offset */
  padding-left: 0 !important;
  padding-right: clamp(8px, 1vw, 16px) !important;
  box-sizing: border-box !important;
}

#product-category #content,
#product-product #content,
#product-search #content,
#product-manufacturer-info #content,
#product-special #content {
  float: none !important;
  position: relative !important;
  display: block !important;
  flex: 1 1 0 !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important; /* allow grid shrink */
  margin: 0 !important;
  padding-left: clamp(4px, 0.8vw, 12px) !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* Right block fills remaining width: teasers / products / scheme */
#product-category #content .uni-wrapper,
#product-product #content .uni-wrapper,
#product-category #content .category-list,
#product-category #content .products-block {
  width: 100% !important;
  max-width: 100% !important;
}

/* Subcategory teasers: fluid grid inside right column */
#product-category #content .category-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)) !important;
  gap: clamp(8px, 1.2vw, 16px) !important;
  margin: 0 0 16px 0 !important;
  float: none !important;
}

#product-category #content .category-list > div,
#product-category #content .category-list > [class*="col-"] {
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  flex: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

@media (min-width: 1100px) {
  #product-category #content .category-list {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 1400px) {
  #product-category #content .category-list {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 991px) and (min-width: 576px) {
  #product-category #content .category-list {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Tablet/phone: stack left then right, still full width */
@media (max-width: 991px) {
  #product-category > .row,
  #product-product > .row,
  #product-search > .row,
  #product-manufacturer-info > .row,
  #product-special > .row {
    flex-wrap: wrap !important;
  }

  #product-category #column-left,
  #product-product #column-left,
  #product-search #column-left,
  #product-manufacturer-info #column-left,
  #product-special #column-left,
  #product-category #column-right,
  #product-product #column-right {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 12px !important;
  }

  #product-category #content,
  #product-product #content,
  #product-search #content,
  #product-manufacturer-info #content,
  #product-special #content {
    flex: 1 1 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
  }

  #product-category #content .category-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 575px) {
  #product-category #content .category-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px 6px !important;
  }
}

/* Wide monitors: use the space, keep readable gutters */
@media (min-width: 1200px) {
  .container {
    max-width: min(1600px, calc(100vw - 48px)) !important;
  }
}
@media (min-width: 1600px) {
  .container {
    max-width: min(1760px, calc(100vw - 64px)) !important;
  }
}
@media (min-width: 2000px) {
  .container {
    max-width: min(1920px, calc(100vw - 80px)) !important;
  }
}

/* ---------- Cars / teasers: true fluid grid ---------- */
.aronga-cars {
  display: grid !important;
  /* grows/shrinks for ANY viewport — no fixed “tiny cluster” */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)) !important;
  gap: clamp(10px, 1.6vw, 22px) clamp(8px, 1.2vw, 18px) !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 clamp(16px, 2vw, 28px) 0 !important;
  padding: clamp(12px, 1.5vw, 22px) clamp(8px, 1.2vw, 16px) !important;
  box-sizing: border-box !important;
  justify-items: stretch !important;
  align-items: start !important;
}

.aronga-cars__item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  text-align: center !important;
  text-decoration: none !important;
}

.aronga-cars__img,
.aronga-cars img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: contain !important;
  margin: 0 auto !important;
}

.aronga-cars__name,
.aronga-cars__item span {
  display: block !important;
  width: 100% !important;
  margin-top: clamp(6px, 1vw, 10px) !important;
  font-size: clamp(11px, 0.95vw + 0.35rem, 15px) !important;
  line-height: 1.25 !important;
  text-align: center !important;
  word-break: break-word !important;
}

.aronga-cars-heading,
.heading.aronga-cars-heading {
  font-size: clamp(18px, 1.4vw + 0.7rem, 26px) !important;
  margin: clamp(6px, 1vw, 12px) 0 clamp(10px, 1.2vw, 18px) !important;
}

/* Prefer 5 columns when there is room (desktop) */
@media (min-width: 1100px) {
  .aronga-cars {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

/* Tablet */
@media (max-width: 1099px) and (min-width: 640px) {
  .aronga-cars {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Phone */
@media (max-width: 639px) {
  .aronga-cars {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px 8px !important;
  }
}

/* Very narrow / foldables */
@media (max-width: 360px) {
  .aronga-cars {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px 6px !important;
    padding: 10px 6px !important;
  }
  .aronga-cars__name,
  .aronga-cars__item span {
    font-size: 11px !important;
  }
}

/* Landscape phones: keep 3 if width allows */
@media (max-width: 900px) and (orientation: landscape) and (min-width: 560px) {
  .aronga-cars {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* ---------- Header / chrome ---------- */
.header-block,
.header-block__wrapper,
header .row,
.top-links,
.footer {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 991px) {
  .header-block,
  .header-block__wrapper,
  header .row {
    flex-wrap: wrap !important;
  }

  .header-search,
  #search {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }

  .header-search input,
  #search input,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  textarea,
  select {
    font-size: 16px !important; /* prevent iOS zoom */
    max-width: 100% !important;
  }

  .aronga-brand {
    max-width: calc(100vw - 96px) !important;
  }

  .aronga-brand__badge {
    font-size: clamp(9px, 2.6vw, 11px) !important;
    white-space: nowrap !important;
  }

  .btn,
  .btn-primary,
  .btn-default,
  .header-menu__btn,
  .btn-menu,
  a[href^="tel:"] {
    min-height: 44px !important;
  }
}

/* ---------- Category / products / checkout ---------- */
#product-category #content .uni-wrapper,
#product-product #content .uni-wrapper,
#unicheckout .uni-wrapper,
#checkout-cart .uni-wrapper,
#common-home .uni-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* category-list grid is defined in TWO COLUMNS section above — do not override */

@media (max-width: 767px) {
  .product-thumb,
  .product-layout,
  .product-grid > div,
  .product-list > div {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Checkout / forms never overflow */
#unicheckout,
#checkout-cart,
#checkout-checkout,
.checkout,
form {
  max-width: 100% !important;
}

#unicheckout .row > [class*="col-"],
#checkout-cart .row > [class*="col-"],
#checkout-checkout .row > [class*="col-"] {
  max-width: 100% !important;
}

@media (max-width: 767px) {
  #unicheckout .row > [class*="col-"],
  #checkout-cart .row > [class*="col-"],
  #checkout-checkout .row > [class*="col-"] {
    width: 100% !important;
    flex: 0 0 100% !important;
  }
}

/* Info strips / contact cards */
.aronga-info,
.home-advantage,
.advantage,
[class*="advantage"] {
  max-width: 100% !important;
}

/* Tables scroll instead of breaking layout */
.table-responsive,
#content .table,
.product-list,
.compare-table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Map / iframe */
iframe[src*="yandex"],
iframe[src*="map"],
.aronga-map,
.map {
  width: 100% !important;
  max-width: 100% !important;
}

/* Leaf schemes stay readable but fluid */
#product-category #content .aronga-scheme-block--leaf {
  max-width: min(720px, 100%) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#product-category #content .aronga-scheme-block--leaf img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
}

/* Touch: reduce hover-only motion */
@media (hover: none) {
  .aronga-cars__item:hover {
    transform: none !important;
  }
}