/* 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;
}

/* Home page "Новости" cards (home.html `.tlt_article`): bigger title, plus the excerpt
   (`post.excerpt`, `.news-card__excerpt`) and capped body preview (`post.body_preview`, `.intro`)
   both given their own horizontal inset distinct from the title, instead of sitting flush with
   `.description`'s shared 10px padding. The vendor title-size rule is a 5-class selector
   (`.tltblog_page .tltblog_content .tltblog_content_in .tlt_article .description>h4 a`) so it's
   matched here to win on specificity regardless of cascade order. */
.tltblog_page .tltblog_content .tltblog_content_in .tlt_article .description > h4 a {
  font-size: 21px;
  line-height: 1.3;
}
.tltblog_content_in .tlt_article .description .news-card__excerpt {
  font-family: "Roboto", sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: #555;
  padding: 0 8px;
  margin: 0 0 8px;
}
.tltblog_content_in .tlt_article .description .intro {
  padding: 0 8px;
}

/* Homepage "Популярная автотехника" section (home.html `#featured_products`): now a Swiper
   slider (same swiper.jquery.js already used by the top slideshow) capped at 3 cards per view
   instead of the vendor's wrapping flex grid. The card markup/classes are untouched so the
   vendor `#featured_products .container_in .product-layout ...` rules (border, image sizing,
   price box, buttons) still apply as-is — each slide wraps its card in its own small
   `.container_in` div just so that descendant selector still matches.

   IMPORTANT: `.container_in` must NOT be put on `.swiper-viewport`/any ancestor of the
   swiper-container+pagination+arrows group. The vendor CSS also has a *direct* rule
   `#featured_products .container_in{display:flex;flex-wrap:wrap;justify-content:space-around}`
   (its old flex-grid layout) — if `.container_in` lands on the viewport, that turns the
   swiper-container/pagination/arrow divs themselves into a wrapped flex row and the whole
   slider's positioning breaks on desktop. Keeping it scoped to a one-child wrapper per slide
   means that rule just centers a single 100%-width item, a no-op.

   Only the fixed `width:310px`/`370px` from scss.css needs overriding so each card fills its
   Swiper-computed slide width instead of a hardcoded one. */
#featured_products .swiper-slide .product-layout {
  width: 100%;
  margin-bottom: 0;
}
#featured_products .swiper-viewport {
  margin-bottom: 0;
}
#featured_products .swiper-pagination {
  display: block;
  position: static;
  margin-top: 15px;
}
/* The vendor pager arrows are a plain <img> cropped from a shared multi-purpose sprite
   (`technical.png`, also reused for the search icon and grid/list toggle) via
   object-position — those crop values are tuned for the top slideshow's specific icons
   and don't apply to an <img> at all once it's replaced. Swapped this slider's arrows for
   self-contained inline SVG chevrons (same pattern as `_category_icon.html`) instead of
   fighting the sprite's crop math; only size/color need defining here since the vendor
   `.swiper-pager .swiper-button-next/prev{...}` rules already handle position/opacity. */
#featured_products .swiper-button-next svg,
#featured_products .swiper-button-prev svg {
  display: block;
  width: 22px;
  height: 22px;
  color: #3d5a86;
}
#featured_products .swiper-button-next:hover svg,
#featured_products .swiper-button-prev:hover svg {
  color: #e81c59;
}

/* Product detail "Описание" tab (product_detail.html `#tab-description`): every product's
   description field is being repurposed to hold just a phone number, so this is styled as a
   centered call-to-action (phone icon + bigger bold text) instead of the vendor's plain
   left-aligned 16px paragraph. Selector matches the vendor `.tab-content #tab-description`
   rule's id+class specificity so it wins regardless of cascade order.

   `display` stays `none` unless `.active` is also present — the vendor's tab toggle is
   `.tab-content .tab-pane{display:none}` / `.tab-content .active{display:block}`, switched by
   `bootstrap.min.js`'s tab plugin adding/removing `.active`. An unconditional `display:flex` here
   beat that toggle on specificity and kept the phone CTA visible even while the Характеристики
   tab was selected. */
#product-product #tab-description.product-phone-cta {
  display: none;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  text-align: center;
  padding: 28px 10px;
}
#product-product #tab-description.product-phone-cta.active {
  display: flex;
}
#product-product #tab-description.product-phone-cta .product-phone-cta__icon {
  width: 72px;
  height: 72px;
  color: #3d5a86;
  flex-shrink: 0;
}
#product-product #tab-description.product-phone-cta .product-phone-cta__text p {
  font-size: 40px;
  font-weight: 700;
  font-family: "Roboto Condensed", sans-serif;
  color: #1c1c1c;
  line-height: 1.3;
  margin: 0;
}
@media (max-width: 719px) {
  #product-product #tab-description.product-phone-cta .product-phone-cta__icon {
    width: 60px;
    height: 60px;
  }
  #product-product #tab-description.product-phone-cta .product-phone-cta__text p {
    font-size: 28px;
  }
}

/* Product detail additional-images strip (product_detail.html `.product-images-slider`): same
   Swiper conversion as `#featured_products` above, same reasoning — the vendor `.dop_images`
   class stays on the outer wrapper (kept for its outline/padding on `.image-additional` and its
   `display:flex` rule, which is a no-op here since that wrapper now has a single child, the
   swiper-container) while the fixed `width:110px`/`200px` it puts on `.image-additional` is
   overridden per-breakpoint below so Swiper's own slide box is what actually sizes each thumb.
   `box-sizing: border-box` keeps `.image-additional`'s padding/outline from overflowing that
   box the way the vendor's original content-box sizing would. */
#product-product .swiper-slide .image-additional {
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 0;
}
#product-product .product-images-slider .swiper-slide {
  width: 110px;
}
@media (min-width: 1200px) {
  #product-product .product-images-slider .swiper-slide {
    width: 200px;
  }
}
#product-product .product-images-slider {
  margin-bottom: 0;
}
#product-product .product-images-slider .swiper-button-next svg,
#product-product .product-images-slider .swiper-button-prev svg {
  display: block;
  width: 22px;
  height: 22px;
  color: #3d5a86;
}
#product-product .product-images-slider .swiper-button-next:hover svg,
#product-product .product-images-slider .swiper-button-prev:hover svg {
  color: #e81c59;
}

/* Product detail hero-image modal (product_detail.html #product-image-modal): the modal shell
   itself (fixed overlay, close button, .image-hero-modal__img base sizing) is defined in add.css.
   The image is now wrapped in a Swiper instance so the modal can be swiped/paged between the main
   image and gallery images instead of only ever showing whichever single image was clicked -
   Swiper needs a concrete pixel size on the container to compute slide width, so give it one here
   (the old approach let the <img> size itself intrinsically via max-width/max-height). */
.image-hero-modal__swiper {
  width: 90vw;
  height: 80vh;
  max-width: 1100px;
}
/* add.css's `.image-hero-modal__close` never set a z-index, so it stacked at the implicit "auto"
   level - vendor `.swiper-container{position:relative;z-index:1}` (swiper.min.css) then painted
   on top of it wherever the two visually overlap (the 80vh-tall swiper box reaches close to the
   top-right corner where the close button sits on shorter/mobile viewports), silently eating its
   clicks. Give it a z-index above the swiper container and its arrow buttons so it's always
   clickable regardless of viewport size. */
.image-hero-modal__close {
  z-index: 2002;
}
.image-hero-modal__swiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}
.image-hero-modal__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.image-hero-modal__button-next,
.image-hero-modal__button-prev {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2001;
  cursor: pointer;
  padding: 10px;
}
.image-hero-modal__button-prev {
  left: 15px;
}
.image-hero-modal__button-next {
  right: 15px;
}
.image-hero-modal__button-next svg,
.image-hero-modal__button-prev svg {
  display: block;
  width: 32px;
  height: 32px;
  color: #fff;
}
.image-hero-modal__button-next:hover svg,
.image-hero-modal__button-prev:hover svg {
  color: #e81c59;
}
.image-hero-modal__button-next.swiper-button-disabled,
.image-hero-modal__button-prev.swiper-button-disabled {
  opacity: .35;
  cursor: auto;
  pointer-events: 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;
}

/* News single page (news_detail.html `#content.news-article`): `#information-information
   #content` is shared by this page and four plain informational pages (about/contact/remont/
   ustanovka_kuzova), all of which rely on the vendor `#content>h1`/`#content>div p` rules
   (scss.css) for a generic left-accent-bar heading + plain paragraph styling. News articles get
   a bigger editorial-feeling heading, a publish-date byline (`post.published_at`, not previously
   rendered anywhere), and roomier body copy — scoped to `.news-article` and selectors that match
   the vendor rules' `#information-information #content` id-pair specificity so the other four
   pages sharing that markup are untouched. */
#information-information #content.news-article {
  margin-bottom: 25px;
}
#information-information #content.news-article > h1 {
  font-size: 34px;
  line-height: 1.3;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 700;
  border-bottom: none;
  padding-left: 18px;
  margin-bottom: 6px;
}
#information-information #content.news-article .news-article__meta {
  font-family: "Roboto", sans-serif;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #818181;
  padding-left: 23px;
  margin: 0 0 22px;
}
#information-information #content.news-article .news-article__lead {
  font-family: "Roboto", sans-serif;
  font-size: 19px;
  line-height: 1.5;
  font-weight: 500;
  color: #555;
  padding-left: 23px;
  margin: 0 0 20px;
}
#information-information #content.news-article .news-article__image {
  margin-bottom: 22px;
}
#information-information #content.news-article .news-article__image img {
  width: 100%;
  padding: 0;
  border: none;
  border-radius: 6px;
  margin: 0;
  display: block;
}
#information-information #content.news-article .news-article__body {
  max-width: 780px;
}
#information-information #content.news-article .news-article__body p {
  font-family: "Roboto", sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: #333;
  margin: 0 0 16px;
}
#information-information #content.news-article .news-article__body p:last-child {
  margin-bottom: 0;
}
#information-information #content.news-article .news-article__body b,
#information-information #content.news-article .news-article__body strong {
  color: #1c1c1c;
}
@media (max-width: 719px) {
  #information-information #content.news-article > h1 {
    font-size: 23px;
    padding-left: 14px;
  }
  #information-information #content.news-article .news-article__meta {
    padding-left: 19px;
    font-size: 12px;
  }
  #information-information #content.news-article .news-article__lead {
    font-size: 16px;
    padding-left: 19px;
  }
  #information-information #content.news-article .news-article__body p {
    font-size: 15px;
    line-height: 1.6;
  }
}