/* Shared responsive corrections. Desktop geometry and theme colors stay in
   their existing stylesheets. Fix overflow at the layout source, not by zoom. */
html[data-site-theme] { overflow-x: clip; }
html[data-site-theme] body { min-width: 0; }
html[data-site-theme] section { overflow-x: clip; }

@media (max-width: 991.98px) {
  /* Logo, menu button and controls share one row in both writing directions. */
  html[data-site-theme] body #nav > .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    align-items: center;
  }
  html[data-site-theme] body #nav .navbar-brand {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    margin: 0 !important;
    justify-self: start;
  }
  html[data-site-theme] body #nav .navbar-toggler {
    grid-column: 2;
    grid-row: 1;
    width: 36px;
    min-height: 40px;
    margin: 0 !important;
    padding: 6px;
  }
  html[data-site-theme] body #nav .theme-switch-row {
    grid-column: 3;
    grid-row: 1;
    margin: 0 !important;
    gap: 5px;
  }
  html[data-site-theme] body #nav .navbar-collapse {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    max-height: calc(100dvh - 150px);
    overflow-y: auto;
  }
  html[data-site-theme] body #nav .navbar-nav {
    width: 100%;
    align-items: stretch;
    margin: 0 !important;
  }
  html[data-site-theme] body #nav .navbar-nav > .nav-item > .nav-link {
    display: block;
    width: 100%;
    padding: 12px 14px !important;
    text-align: start;
    white-space: normal;
  }
  html[data-site-theme] body #nav .artamehr-submenu {
    min-width: 0;
    max-width: 100%;
  }
  /* Sideways scroll animations must not enlarge the mobile viewport. */
  html[data-site-theme] body [data-aos^="fade-"] { transform: translateY(16px); }
  html[data-site-theme] body [data-aos^="fade-"].aos-animate { transform: none; }
}

@media (max-width: 767.98px) {
  /* Bootstrap g-5's 48px negative gutters exceeded the 24px container gutter. */
  html[data-site-theme] body .container > .row { --bs-gutter-x: 1.5rem; }
  html[data-site-theme] body .row > * { min-width: 0; }
  html[data-site-theme] body footer > .container > .row > .footer-nav-column {
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }
  html[data-site-theme] body footer .fci { min-width: 0; }
  html[data-site-theme] body footer .fciinfo { overflow-wrap: anywhere; }
  html[data-site-theme] body #topbar .site-topbar-date { display: inline !important; }
  html[data-site-theme] body #hero .htitle {
    max-width: 100%;
    font-size: clamp(28px, 7.5vw, 48px);
    overflow-wrap: break-word;
  }
  html[data-site-theme] body #hero .htitle .hero-company-line { font-size: .86em; }
  html[data-site-theme] body #hero .htitle .hero-company-name { font-size: 1.32em; }
  html[data-site-theme] body #hero .hbtns { flex-wrap: wrap; }
  html[data-site-theme] body :is(.catalog-tools, .detail-copy, .brand-description, .branch-panel) {
    min-width: 0;
    overflow-wrap: break-word;
  }
  html[data-site-theme] body :is(input, textarea, select) { max-width: 100%; }
  html[data-site-theme] body .feature-row { min-width: 0; overflow-wrap: anywhere; }
}

@media (max-width: 575.98px) {
  html[data-site-theme] body #nav > .container { gap: 5px; }
  html[data-site-theme] body #nav .navbar-brand .artamehr-white-wordmark {
    max-width: 138px;
  }
  html[data-site-theme] body #nav .navbar-brand .artamehr-white-wordmark > img {
    max-width: 138px !important;
    height: auto !important;
  }
  html[lang="en"][data-site-theme] body #nav img.english-brand-a {
    width: 26px !important;
    height: 29px !important;
  }
  html[lang="en"][data-site-theme] body #nav .english-brand-text { font-size: 27px !important; }
  html[lang="en"][data-site-theme] body #nav .english-brand-subtitle { font-size: 7px; }
  html[data-site-theme] body #nav .theme-switch { padding: 3px; gap: 1px; }
  html[data-site-theme] body #nav .theme-switch button { width: 23px; height: 26px; padding: 3px; }
  html[data-site-theme] body #nav .theme-switch svg { width: 16px; height: 16px; }
  html[data-site-theme] body #nav .theme-switch-row { gap: 4px; }
  html[data-site-theme] body .cms-pagination { gap: 8px; flex-wrap: wrap; }
  html[data-site-theme] body .cms-pagination button { padding: 8px 12px; }
}

@media (min-width: 360px) and (max-width: 575.98px) {
  html[data-site-theme] body .products-catalog-page #product-grid,
  html[data-site-theme] body .brands-page #brand-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  html[data-site-theme] body :is(#product-grid, #brand-grid) .catalog-copy { padding: 12px; }
  html[data-site-theme] body :is(#product-grid, #brand-grid) .catalog-name { font-size: 15px; }
  html[data-site-theme] body :is(#product-grid, #brand-grid) .catalog-picture { padding: 10px; }
  html[data-site-theme] body :is(#product-grid, #brand-grid) .catalog-picture img { padding: 8px; }
  html[data-site-theme] body #mgrid > .mwrap { flex: 0 0 50%; width: 50%; }
  html[data-site-theme] body #mgrid .mbody { padding: 12px; }
  html[data-site-theme] body #mgrid .mtit { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-site-theme] body [data-aos^="fade-"] { transform: none; }
}