/* Header brand-logo bar (`#brand-block`, in base.html), desktop sizing only — add.css's
   `@media (max-width: 719px) #brand-block ul li a img` rule owns mobile (it has an extra `a`
   in the selector chain, so it's more specific than a plain `... li img` rule regardless of
   file order; don't redefine mobile sizing here, it'll silently lose to that one). Not even
   the live site sizes this element — every brand logo there just happens to already be a
   small, roughly-similar-sized file (~40-65px tall). Our Zoomlion logo (fetched separately,
   see README.md History) is a wider PNG at its native size, and any future upload via /admin/
   could be any size, so without a fixed box each logo rendered at native pixel dimensions —
   fine for the original set, way too large the moment one image doesn't match. Constrain
   every logo to the same box regardless of the uploaded file's real dimensions. */
#brand-block ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 10px 0;
}
#brand-block ul li img {
  display: block;
  width: auto;
  height: 88px;
  max-width: 220px;
  object-fit: contain;
}

/* Project-authored overrides — not part of the mirrored OpenCart theme.
   Icon + alignment for the homepage "Каталог техники" widget (`.homecatalog_full`, in
   home.html). The vendor CSS only defines background-image icons for the first 9 `nth-child`
   positions (matching the original site's ~8-item hand-picked list); this rebuild lists every
   real subcategory of Автокаталог, so item 10+ would otherwise render with no icon at all.
   Switched to an inline icon element per link instead (see _category_icon.html) so every item
   gets one consistently, and reset the vendor's fixed-height/background-position li styling
   that assumed a short, static list. */
.homecatalog_full .homecatalog_in > div ul li {
  background: none !important;
  padding-left: 0 !important;
  height: auto !important;
}
.homecatalog_full .homecatalog_in > div ul li > a.cat-link {
  display: flex;
  align-items: center;
  gap: 10px;
}
.homecatalog_full .cat-icon {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  object-fit: contain;
  border-radius: 4px;
}
.homecatalog_full svg.cat-icon {
  color: rgba(255, 255, 255, 0.75);
}
.homecatalog_full .cat-link:hover svg.cat-icon {
  color: #e81c59;
}

/* Catalog listing (category_detail.html): the vendor theme ships a sort dropdown, a
   subcategory dropdown, and a grid/list view toggle inside `.product_sorting`, but its own
   CSS hides everything except the sort dropdown (`.category_listing_grid{display:none}`,
   scoped the same as on the live mirror site). We want the subcategory filter and the
   grid/list toggle too, so un-hide them and stack the three controls with visible gaps. */
#product-category .container_in .product_sorting {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: auto;
}
#product-category .container_in .category_listing_grid {
  display: block;
}
/* The vendor CSS also fixes every direct child div (and `.category_sort_all`
   specifically) to a hardcoded 40-50px height with matching line-height, sized for
   a single-line label+select. On narrow phones the "Подкатегория"/"Сортировать по"
   label wraps onto its own line above the select, needing more than that fixed
   height - the overflow isn't clipped, so it spills downward and overlaps the
   next control instead of the column gap pushing it down. Let every row size to
   its actual content. */
#product-category .container_in .product_sorting > div,
#product-category .container_in .product_sorting .category_sort_all {
  height: auto;
  line-height: normal;
}

/* Catalog sidebar (category_detail.html `<aside id="column-left">`). On the live mirror
   site this column is populated at runtime by a paid AJAX "Mega Filter" plugin (manufacturer
   filter, price range) that isn't part of this rebuild, so the vendor CSS only ever styled
   `aside` as a `display:flex` row — fine there, since the plugin's JS replaced its contents
   before a user ever saw the row layout. We fill it with a real (server-rendered) category
   nav list instead, so lay it out as an actual vertical list; `.category_catalog_title` and
   `.list-group-item.active` colors are already defined by the vendor CSS, `.list-group-item`
   itself never was (it only ever existed inside the plugin's own un-scraped stylesheet). */
#product-category .container_in aside {
  display: block;
}
#product-category .container_in aside .list-group-item {
  display: block;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-top: none;
  color: #333;
  text-decoration: none;
}
#product-category .container_in aside .list-group-item:first-child {
  border-top: 1px solid #ddd;
}
#product-category .container_in aside .list-group-item:hover {
  background: #f5f5f5;
}
#product-category .container_in aside .list-group-item-sub {
  padding-left: 28px;
  font-size: 13px;
}

/* Product card (_product_card.html). The real imported catalog data has up to ~30 spec
   rows per product (vs. the handful the old demo data had), and some spec values are full
   sentences (e.g. "Описание") rather than short numbers — the template now only renders the
   first 6 rows with truncated values, but the vendor CSS never needed word-wrapping on the
   spec table's narrow 2nd column (`td:nth-child(2)`, ~37-40% width) because its own content
   was always short. Force wrapping so long values can't push past the column/card edge. */
.attribute_description table td {
  overflow-wrap: anywhere;
}
.attribute_description table td:nth-child(2) {
  text-align: left;
}

/* Mobile nav (base.html `.mob_menuToggle.burger`). Fixes for the off-canvas menu:
   1. The "Закрыть" close button used to be a bare <h3> with no click behavior — the panel is
      a pure checkbox-hack (`input:checked ~ #burger_content{transform:none}`) and nothing ever
      unchecked the box again. base.html now renders a standalone
      `<label for="mobile-nav-toggle" class="mob_menu_close">` (labels toggle their checkbox
      natively, no JS needed) — styled below as a large "×" button pinned to the top-right
      corner, replacing the old inline text link.
   2. "КАТАЛОГ ТЕХНИКИ" / "СЕРВИС" only revealed their submenu on `:hover`, unreachable by
      touch (see site.js, which toggles this `.open` class on tap).
   3. More breathing room between menu rows, and the panel scrolls internally (rather than
      clipping or growing the whole page) once there are enough categories to overflow it. */
.mob_menu_close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
}
.opencart_menu > li.dropdown.open > .dropdown_menu {
  display: block;
}
.mob_menuToggle #burger_content {
  overflow-y: auto;
  max-height: 105vh;
}
.nav_in .mob_menuToggle #burger_content li {
  padding: 18px 0;
}
/* The vendor CSS unconditionally puts a truck-sprite background on whichever item happens to be
   3rd in ANY list nested inside the mobile menu (`.opencart_menu li:nth-child(3)` — a plain
   descendant selector, not scoped to direct children) — a positional rule from the shared
   OpenCart theme template, not something tied to what that item actually is. It hits both the
   3rd top-level row ("КАТАЛОГ ТЕХНИКИ") *and* the 3rd category link inside its submenu (e.g.
   "Foton" in the brand list). Remove it everywhere it could land, same selector shape as the
   vendor rule so it wins every match, not just the top-level one. */
#burger_content .opencart_menu li:nth-child(3) a {
  background: none !important;
  padding-left: 0 !important;
}
/* Every category link inside the mobile "КАТАЛОГ ТЕХНИКИ"/"СЕРВИС" submenus also gets a blank
   45px left gutter reserved for an icon from `.dropdown_menu li a{padding-left:45px}` (scss.css)
   — no image ever renders there since the sprite classes above aren't used on this site, so it's
   just dead indentation. Drop it so every submenu link sits flush like the rest of the menu. */
#burger_content .dropdown .dropdown_menu li a {
  padding-left: 0 !important;
}

/* The off-canvas panel is 109vw wide, shifted fully off-screen via `transform:translate(-100%)`
   when closed rather than being removed from layout — belt-and-braces guard against it (or any
   other transformed element) introducing horizontal scroll on mobile. */
html, body {
  overflow-x: hidden;
}

/* Language switcher (base.html, `_language_switcher.html`). This is a plain `<select>`
   posting to Django's `set_language` view - there's no vendor markup or CSS for it at all
   (the mirror's version was an OpenCart button+dropdown widget we didn't reuse), so it
   rendered as a bare, unstyled native select. Style it to match the header's top bar: small
   uppercase Roboto Condensed text, the same muted gray as `.header_compare`, an accent-colored
   hover/focus state, and a custom caret since native select arrows can't be recolored.

   It's rendered twice: once in `#header_top` (class `desktop`) and once inside the off-canvas
   `#burger_content` panel (class `language-switcher--mobile`, only reachable on mobile since
   its ancestor `.mob_menu.mobile` is itself hidden at 720px+) - so on narrow screens it lives
   in the menu instead of competing for space in the top bar.

   The `#header_top` copy relies on the vendor's `.desktop{display:none}` mobile rule to hide
   below 720px, but our own unscoped `.language-switcher{display:flex}` below has the same
   specificity and loads after it (site.css is the last stylesheet in base.html), so it was
   winning the cascade and showing the switcher in the header on mobile anyway. Force it hidden
   explicitly, scoped to where the desktop copy actually lives. */
#header_top .language-switcher.desktop {
  display: flex;
}
@media (max-width: 719px) {
  #header_top .language-switcher.desktop {
    display: none;
  }
}
.language-switcher {
  display: flex;
  align-items: center;
  margin-right: 15px;
}
.language-switcher select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid #d5d5d5;
  border-radius: 3px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23818181' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 9px 6px;
  padding: 4px 24px 4px 10px;
  font-size: 13px;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  color: #818181;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.language-switcher select:hover {
  border-color: #3d5a86;
  color: #3d5a86;
}
.language-switcher select:focus {
  outline: none;
  border-color: #3d5a86;
  color: #3d5a86;
  box-shadow: 0 0 0 2px rgba(61, 90, 134, 0.15);
}
.language-switcher select option {
  color: #333;
  background: #fff;
  text-transform: none;
  font-weight: normal;
}

/* The mobile copy lives at the top of the dark off-canvas menu, above the nav links, so it
   needs its own spacing and a bit more visual weight instead of the compact top-bar sizing. */
.language-switcher--mobile {
  margin: 0 0 20px;
}
.language-switcher--mobile select {
  width: 100%;
  font-size: 14px;
  padding: 10px 30px 10px 14px;
  background-position: right 12px center;
}

/* Home page "Новости" section header (home.html `.tltblog_page .top`): the vendor CSS gives it
   a decorative background texture, "/static/img/theme/smoke.jpg", that was never part of the
   mirrored asset dump - 404s on every home page load. Drop the missing image reference; the
   section reads fine on the plain background. */
.tltblog_page .top {
  background-image: none;
}

/* Product card "Подробнее"/"Batafsil" button (_product_card.html): the vendor CSS points the
   arrow inside `.in_product_with span` at "/static/img/theme/button_arrow_right.png", a sprite
   file that was never part of the mirrored asset dump - every page with a product card 404s on
   it. Rather than redraw the arrow (it overlapped the button text), just drop it. The vendor
   rule is repeated per breakpoint against a very specific selector chain (up to an id + 6
   classes) for each of the featured/category/search contexts, so matching or beating that
   specificity here isn't practical - !important instead. */
.in_product_with span {
  background-image: none !important;
}