@charset "UTF-8";

/* ===== ESTEO brand fonts ===== */
/* Body — Nunito Sans (self-hosted, cyrillic + latin) */
@font-face {
  font-family: "Nunito Sans";
  src: url(../fonts/nunito-sans-cyrillic-400-normal.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Nunito Sans";
  src: url(../fonts/nunito-sans-latin-400-normal.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito Sans";
  src: url(../fonts/nunito-sans-cyrillic-600-normal.woff2) format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Nunito Sans";
  src: url(../fonts/nunito-sans-latin-600-normal.woff2) format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito Sans";
  src: url(../fonts/nunito-sans-cyrillic-700-normal.woff2) format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Nunito Sans";
  src: url(../fonts/nunito-sans-latin-700-normal.woff2) format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Headings — Tactic Sans Extended (ESTEO display font) */
@font-face {
  font-family: "TacticSansExd";
  src: url(../fonts/TacticSansExd-Reg.woff2) format("woff2"),
       url(../fonts/TacticSansExd-Reg.woff) format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TacticSansExd";
  src: url(../fonts/TacticSansExd-Bld.woff2) format("woff2"),
       url(../fonts/TacticSansExd-Bld.woff) format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

* {
  font-family: "Nunito Sans", Arial, Helvetica, sans-serif;
}

/* ESTEO display font for headings (and an explicit utility for div-based titles) */
h1, h2, h3, h4, h5, h6,
h1 *, h2 *, h3 *, h4 *, h5 *, h6 *,
.font-heading, .font-heading * {
  font-family: "TacticSansExd", "Nunito Sans", Verdana, Arial, Helvetica, sans-serif;
}

/* ESTEO: all site headings are uppercase (brand requirement). text-transform
   applies to the heading elements themselves; descendants inherit it. */
h1, h2, h3, h4, h5, h6,
.font-heading {
  text-transform: uppercase;
}

:root {
  --swiper-pagination-bullet-inactive-color: #fff;
  --swiper-pagination-bullet-inactive-opacity: 0.7;
  --swiper-navigation-sides-offset: 10px;
  --swiper-navigation-color: var(--accent_color);
  --swiper-pagination-color: var(--accent_color);
  --swiper-theme-color: var(--accent_color);
  --swiper-pagination-progressbar-bg-color: #ccc;
  --swiper-navigation-sides-offset: 1rem;
  --header-offset: 0px;
}

html,
body {
  scrollbar-gutter: stable;
}

.review-text.is-collapsed {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.review-text.is-expanded {
  display: block;
  overflow: visible;
}

.review-text p:last-child {
  margin-bottom: 0;
}

.models-dropdown-scroll {
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.models-dropdown-scroll::-webkit-scrollbar {
  width: 8px;
}

.models-dropdown-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.models-dropdown-scroll::-webkit-scrollbar-thumb {
  background-color: #0e1214;
  border-radius: 9999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

.models-dropdown-scroll::-webkit-scrollbar-thumb:hover {
  background-color: #a3a3a3;
}

/* ===== ESTEO animated outline buttons (port of esteo.ru .btn_animated) ===== */
.btn {
  background-color: transparent;
  border-color: transparent;
  border-radius: 0px;
  color: white !important;
}
.btn[data-btn-theme="dakr"] {
  color: #0e1214 !important;
}

.btn_animated {
  text-align: center;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.btn_animated__svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-width: 100%;
  height: 100%;
  fill: none;
  object-fit: cover;
  pointer-events: none;
}
.btn_animated__svg path {
  width: 100%;
  height: 100%;
  fill: none;
  stroke-width: 1;
  stroke: #0e1214;
  transition: stroke-dashoffset 0.3s ease-in-out, stroke 0.3s ease-in-out;
}
.btn_animated-primary {
  color: #fff;
}
.btn_animated-primary .btn_animated__svg path {
  stroke: #fff;
}
.btn_animated-primary-inverse {
  color: #0e1214;
}
.btn_animated-primary-inverse .btn_animated__svg path {
  stroke: #0e1214;
}
/* Monochrome: outline draws in on hover/focus in the button's own color
   (white on dark, #0e1214 on light) — no chromatic accent, like ESTEO. */
.btn_animated-small {
  font-size: 14px;
  line-height: 1.1;
  padding: 8px 20px;
}

/* Make the theme's filled .btn adopt the ESTEO transparent/outline look
   when it carries .btn_animated. Higher specificity + !important to win
   over tailwind.css (which is enqueued after main.css). */
.btn.btn_animated,
.btn.btn_animated:hover,
.btn.btn_animated:focus {
  background-color: transparent !important;
  border-color: transparent !important;
  border-radius: 0 !important;
}
.btn.btn_animated.btn_animated-primary,
.btn.btn_animated.btn_animated-primary:hover {
  color: #fff !important;
}
.btn.btn_animated.btn_animated-primary-inverse,
.btn.btn_animated.btn_animated-primary-inverse:hover {
  color: #0e1214 !important;
}

/* ===== Monochrome accent safety net =====
   --accent_color is now #0e1214 (dark). Where the accent text/icon sits on a
   dark surface (footer / .bg-accent-bg / .theme-dark) it would be invisible,
   so force it white there. */
.bg-accent-bg.text-accent,
.bg-accent-bg .text-accent,
.theme-dark .text-accent,
.footer .text-accent,
footer .text-accent {
  color: #fff !important;
}
.bg-accent-bg.fill-accent,
.bg-accent-bg .fill-accent,
.footer .fill-accent {
  fill: #666!important;
}

/* ===== Desktop nav dropdown — click to open =====
   The mega-menu is hidden by default via Tailwind (lg:opacity-0 lg:invisible
   pointer-events-none on .nav-dropdown). nav-menu.js toggles .nav-open on the
   .nav-group; these higher-specificity rules reveal the dropdown then. Only
   active >= lg, where the dropdown is lg:absolute (mobile uses preline). */
@media (min-width: 1024px) {
  .nav-group.nav-open > a::before {
    opacity: 1; /* keep the active underline lit while the menu is open */
  }
  .nav-group.nav-open .nav-toggle {
    transform: rotate(180deg);
  }
  .nav-group.nav-open .nav-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

/* ===== Solid dark header bar (always #0e1214) =====
   The nav must never be transparent. With a dark bar, the bar's text/icons
   (which default to dark --font_color_1) would be invisible, so make them
   light. We tint via an INHERITED color on .mainnav (not on the links
   directly) so element-level hover utilities like hover:text-white/80 still
   win inside the dropdown. Icon spans use .text-accent (color set directly),
   so they need an explicit override. The dropdown panel keeps its own dark
   bg-font + white text and is unaffected. */
.mainnav {
  background-color: #0e1214;
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.12);
}
/* The header is positioned out of flow (absolute, and fixed while revealed on
   scroll-up), so reserve its height on the body — otherwise the solid bar
   overlaps the top of the page content. --header-height is 54px / 80px(lg). */
body {
  padding-top: var(--header-height);
}

/* ===== Sticky header reveal + in-page model-nav coordination =====
   main.js toggles these classes on .mainnav: .is-fixed-top (reveal — pin to the
   top) on scroll-up, and .is-hiding (slide the bar back up, then JS removes both
   classes on the `header-slide-out` animationend) on scroll-down. These rules
   were previously defined only in the legacy layout.css, which is NOT enqueued —
   so the bar never actually fixed or animated, and near the top of model pages
   it collided with the sticky .model-nav (which also wants top:0). The keyframe
   NAME `header-slide-out` is part of main.js's contract (it waits for it). */
.mainnav.is-fixed-top {
  position: fixed;
  top: 0;
  animation: header-slide-in 0.3s ease-out;
}
.mainnav.is-hiding {
  animation: header-slide-out 0.3s ease-in both;
}
@keyframes header-slide-in {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}
@keyframes header-slide-out {
  from { transform: translateY(0); }
  to   { transform: translateY(-100%); }
}
/* In the spec-table zone main.js returns the in-page nav to normal flow. */
.model-nav--static {
  position: static !important;
}
.mainnav .text-accent {
  /* phone / map-pin icons + the submenu toggle arrow */
  color: #fff;
}
#burger-btn span {
  /* hamburger lines (were bg-font = dark) */
  background-color: #fff;
}
#navbar .nav-group > a::before {
  /* desktop hover underline (was border-accent = dark) */
  border-color: #fff;
}

/* ===== Enlarged ESTEO wordmark in the header =====
   The logo is a wide wordmark (~1081x100). It was capped at w-10/lg:w-14
   (40/56px wide) which made it a tiny sliver next to the Major logo. */
.esteo-logo-header {
  width: 8rem;
  height: auto;
}
@media (min-width: 1024px) {
  .esteo-logo-header {
    width: 9rem;
  }
}

/* ===== ESTEO homepage restyle: sharp corners + flat surfaces =====
   ESTEO is a minimalist monochrome brand with NO rounded elements. On the
   front page (body.is-root-page) we zero every Tailwind border-radius and
   drop card shadows for the flat, premium look of esteo.ru. Scoped to the
   homepage so other templates are untouched. */
.is-root-page [class*="rounded"] {
  border-radius: 0 !important;
}
.is-root-page .shadow-sm,
.is-root-page .shadow,
.is-root-page .shadow-md,
.is-root-page .shadow-lg {
  box-shadow: none !important;
}

/* No dark/black card & block borders on the homepage. border-accent-bg maps to
   --footer_background_color (#0e1214) — a near-black line that clashes with the
   clean borderless ESTEO card style. Make it invisible (keep the 1px layout). */
.is-root-page .border-accent-bg {
  border-color: transparent !important;
}

/* Hero buttons must be white (like the hero text), not the dark color that
   esteo-buttons.js auto-applies inline over the banner. !important on author
   CSS overrides the JS inline style; the outline stroke is forced white too. */
.is-root-page .hero-swiper .btn,
.is-root-page .hero-swiper .btn span {
  color: #fff !important;
}
.is-root-page .hero-swiper .btn_animated__svg path {
  stroke: #fff !important;
}

/* ===== «Back to top» button =====
   esteo-buttons.js used to pick up #toTopButton (.btn) and add .btn_animated
   (position:relative, unlayered) — beating the Tailwind .fixed utility from
   @layer utilities. Now excluded from the JS selector, but guard here too. */
#toTopButton {
  position: fixed !important;
  display: none; /* hidden by default; scrollFunction() shows/hides it */
}

/* ===== ESTEO model lineup (homepage "Модельный ряд") =====
   Re-laid in the premium, monochrome, sharp-cornered ESTEO/EXEED style: a big
   product photo on a light plate, the model name in the heading face (uppercase
   TacticSansExd), a muted sub-line, prominent price, the brand button and a
   quiet "in stock" text link. Scoped to .esteo-models so nothing else moves. */
.esteo-models__eyebrow {
  display: block;
  font-family: "NunitoSans", Arial, Helvetica, sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #828690;
  margin-bottom: 0.75rem;
}
.esteo-models__title {
  margin-top: 0;
  margin-bottom: 2.5rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.esteo-models__grid {
  column-gap: 2rem;
  row-gap: 3rem;
}
.esteo-model {
  display: flex;
  flex-direction: column;
  background: #fff;
}
.esteo-model__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f4f6f8; /* light ESTEO plate behind the product shot */
}
.esteo-model__media-link {
  display: block;
  width: 100%;
  height: 100%;
}
.esteo-model__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.esteo-model:hover .esteo-model__img {
  transform: scale(1.04);
}
.esteo-model__badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 1;
  padding: 0.4rem 0.8rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: #0e1214;
  text-decoration: none;
}
.esteo-model__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 1.5rem;
  flex: 1 1 auto;
}
.esteo-model__name {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.05;
  font-weight: 700;
  text-transform: uppercase;
  color: #0e1214;
}
.esteo-model__name a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
.esteo-model__name a:hover {
  opacity: 0.65;
}
.esteo-model__sub {
  margin: 0;
  font-size: 0.95rem;
  color: #828690;
}
.esteo-model__price {
  margin: 0.25rem 0 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #0e1214;
}
.esteo-model__actions {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding-top: 1.25rem;
}
.esteo-model__stock {
  width: fit-content;
  font-size: 0.9rem;
  color: #0e1214;
  text-decoration: none;
  border-bottom: 1px solid rgba(14, 18, 20, 0.35);
  padding-bottom: 0.2rem;
  transition: border-color 0.3s ease, opacity 0.3s ease;
}
.esteo-model__stock:hover {
  opacity: 0.7;
  border-bottom-color: #0e1214;
}
@media (min-width: 640px) {
  .esteo-model__name {
    font-size: 1.75rem;
  }
}

/* ===== Readable text on dark surfaces (footer + cookie banner) =====
   Both sit on .bg-accent-bg (#0e1214). The default text color is the
   near-identical dark --font_color_1, so body copy, menu links and the cookie
   notice rendered as black-on-black (invisible). Force ESTEO light typography:
   white headings/links, a muted grey for secondary lines. */
footer.bg-accent-bg,
#cookie-consent .bg-accent-bg {
  color: #fff;
}
footer.bg-accent-bg a,
#cookie-consent .bg-accent-bg a {
  color: #fff;
}
footer.bg-accent-bg a:hover,
#cookie-consent .bg-accent-bg a:hover {
  color: rgba(255, 255, 255, 0.7);
}
footer.bg-accent-bg .footer-col__title {
  color: #fff;
  font-weight: 600;
}
/* secondary grey lines (sub-menu links, dealer caption, disclaimer) stay legible */
footer.bg-accent-bg .text-font-third {
  color: #a3a5a6 !important;
}
footer.bg-accent-bg .text-font-third:hover {
  color: #fff !important;
}
footer.bg-accent-bg hr {
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.12) !important;
}
/* prose blocks (footer_text, disclaimer, cookie notice) carry their own color */
footer.bg-accent-bg .prose,
#cookie-consent .prose {
  color: rgba(255, 255, 255, 0.85);
}
footer.bg-accent-bg .prose a,
#cookie-consent .prose a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
footer.bg-accent-bg .prose a:hover,
#cookie-consent .prose a:hover {
  color: rgba(255, 255, 255, 0.75);
}

/* ===== ESTEO single-model template restyle (.is-model-page) =====
   The single-models template is re-laid in the premium, monochrome, flat
   ESTEO look — exactly like the homepage: sharp corners, no shadows, no
   near-black borders, and the dark feature/overview plates turned into light
   ESTEO plates so body copy is readable (it was dark-on-dark before). Scoped
   to the wrapper added in single-models.php so no other template moves. */
.is-model-page [class*="rounded"] {
  border-radius: 0 !important;
}
.is-model-page .shadow-sm,
.is-model-page .shadow,
.is-model-page .shadow-md,
.is-model-page .shadow-lg {
  box-shadow: none !important;
}
.is-model-page .border-accent-bg {
  /*border-color: transparent !important;*/
}

/* Dark near-black plates (bg-accent-bg = #0e1214) -> light ESTEO plate with
   dark, readable text. Covers the overview block, the exterior/interior
   feature plates, the video-reviews section and the card price footers. */
.is-model-page .bg-accent-bg {
  background-color: #f4f6f8 !important;
  color: #0e1214 !important;
}
.is-root-page .cards .bg-accent-bg {
  background-color: #f4f6f8 !important;
  color: #0e1214 !important;
}
/* Undo the global "accent text on dark surface -> white" safety net here, since
   these surfaces are now light (3-class specificity beats the 2-class net). */
.is-model-page .bg-accent-bg.text-accent,
.is-model-page .bg-accent-bg .text-accent {
  color: #0e1214 !important;
}
.is-model-page .bg-accent-bg .text-font-fourth,
.is-model-page .bg-accent-bg .text-font-third {
  color: #7d8082 !important;
}

/* The «Комплектации и цены» block is an intentional dark contrast section
   (bg-font = #0e1214) with no light sub-surfaces, so ALL of its text must be
   white to read on the dark background (was a mix of grey/dark-on-dark). The
   3-class specificity beats Tailwind text-* utilities; inline button colours
   from esteo-buttons.js are left intact. */
.is-model-page .config.bg-font,
.is-model-page .config.bg-font * {
  color: #fff;
}
.is-model-page .config.bg-font .text-accent {
  color: #fff !important;
}
/* …except the spec table (.config-body), which renders on a WHITE surface —
   its option names/values must stay dark. Higher specificity (4 classes) than
   the white rule above so it wins inside the table. */
.is-model-page .config.bg-font .config-body,
.is-model-page .config.bg-font .config-body * {
  color: #0e1214;
}

/* The sticky in-page model nav: dark bar, uppercase, with an active-section
   highlight driven by the scrollspy in single-models.php. Inactive links are
   muted; hover and the current section are white with an underline. */
.is-model-page .model-nav {
  text-transform: uppercase;
  /* Neutralise main.js's fragile translateY math (it is gated on .config-table
     and uses an undefined helper). The vertical offset is instead driven by
     nav-menu.js (syncModelNavTop), which sets the sticky `top` from the header's
     revealed state — so the two bars never collide. */
  transform: none !important;
}
.is-model-page #model-nav-list a {
  position: relative;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.25s ease;
}
.is-model-page #model-nav-list a:hover {
  color: #fff;
}
.is-model-page #model-nav-list li.is-active a {
  color: #fff;
}
.is-model-page #model-nav-list li.is-active a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: #fff;
}

/* ===== ESTEO catalog templates restyle (.is-catalog-page) =====
   Shared scope for the six car-catalog templates (new & used: разводящие,
   списки по модели, карточки авто). Same premium monochrome ESTEO language as
   the homepage / single-model: sharp corners, no shadows, flat hairline
   borders, heading-face uppercase card titles, light readable plates, and white
   text on the intentional dark price cards. Pure CSS restyle — the wrapper is
   the only markup change, no page variables are touched. */
.is-catalog-page [class*="rounded"] {
  border-radius: 0 !important;
}
.is-catalog-page .shadow-sm,
.is-catalog-page .shadow,
.is-catalog-page .shadow-md,
.is-catalog-page .shadow-lg {
  box-shadow: none !important;
}
/* near-black card outlines & option-row dividers -> subtle ESTEO hairline.
   border-accent-bg maps to #0e1214; a hairline keeps card/row definition
   without the heavy black line (transparent would erase spec-row dividers). */
.is-catalog-page .border-accent-bg {
  border-color: #e7eaed !important;
}

/* Card titles in the brand display face, uppercase — matches .esteo-model. */
.is-catalog-page .models-available a.font-bold,
.is-catalog-page .cards-swiper a.font-bold,
.is-catalog-page .js-card .text-2xl.font-bold {
  font-family: "TacticSansExd", "Nunito Sans", Verdana, Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

/* Dark near-black plates (bg-accent-bg = #0e1214): price footers, tag chips,
   the dealer/salon info card and image count pills -> light ESTEO plate with
   dark, readable text. Undo the global "accent text on dark -> white" net here
   (3-class specificity beats the 2-class net), since these are now light. */
.is-catalog-page .bg-accent-bg {
  background-color: #f4f6f8 !important;
  color: #0e1214 !important;
}
.is-catalog-page .bg-accent-bg.text-accent,
.is-catalog-page .bg-accent-bg .text-accent {
  color: #0e1214 !important;
}
.is-catalog-page .bg-accent-bg .text-font-fourth,
.is-catalog-page .bg-accent-bg .text-font-third {
  color: #7d8082 !important;
}

/* The single-car sidebar price card is an intentional dark contrast block
   (bg-font = #0e1214). Its text defaulted to grey/dark-on-dark (the price used
   text-accent = #0e1214 = invisible). Force white so the price & labels read.
   Inline button colours from esteo-buttons.js win over this, so they stay. */
.is-catalog-page .bg-font,
.is-catalog-page .bg-font * {
  color: #fff;
}
.is-catalog-page .bg-font .text-accent {
  color: #fff !important;
}

/* ===== ESTEO content templates restyle (.is-content-page) =====
   Shared scope for the news / promo / service / purchase post & listing
   templates (category-news, category-news-single-post,
   category-promo-single-post, category-purchase, single-post-service,
   single-post). Same premium monochrome ESTEO language as the homepage /
   catalog: sharp corners, no shadows, flat hairline borders, light readable
   plates for the near-black surfaces, white text on the intentional dark
   sections, and the brand display face for the participating-model card names.
   Pure CSS restyle — the only markup change is the wrapper <div>, no page
   variables are touched. */
.is-content-page [class*="rounded"] {
  border-radius: 0 !important;
}
.is-content-page .shadow-sm,
.is-content-page .shadow,
.is-content-page .shadow-md,
.is-content-page .shadow-lg {
  box-shadow: none !important;
}
/* near-black card outlines & dividers -> subtle ESTEO hairline. */
.is-content-page .border-accent-bg {
  border-color: #e7eaed !important;
}

/* Near-black plates (bg-accent-bg = #0e1214): the featured news card, the
   "Другие новости / спецпредложения" related sections, promo advantage cards,
   FAQ accordion headers, default-category cards and tag chips -> light ESTEO
   plate with dark, readable text. Undo the global "accent text on dark ->
   white" net here (3-class specificity beats the 2-class net). */
.is-content-page .bg-accent-bg {
  background-color: #f4f6f8 !important;
  color: #0e1214 !important;
}
.is-content-page .bg-accent-bg.text-accent,
.is-content-page .bg-accent-bg .text-accent {
  color: #0e1214 !important;
}
.is-content-page .bg-accent-bg .text-font-fourth,
.is-content-page .bg-accent-bg .text-font-third {
  color: #7d8082 !important;
}

/* Intentional dark contrast sections (bg-font = #0e1214): the credit-programs
   block (promo) and the "Мой Major" block (service). Force white text so the
   headings, labels and copy read on the dark surface. Inline button colours
   from esteo-buttons.js still win, so the CTA buttons keep their own styling. */
.is-content-page .bg-font,
.is-content-page .bg-font * {
  color: #fff;
}
.is-content-page .bg-font .text-accent {
  color: #fff !important;
}

/* Participating-model cards (promo) show real model names — render them in the
   brand display face, uppercase, to match the homepage "Модельный ряд". */
.is-content-page .models-swiper a.font-bold {
  font-family: "TacticSansExd", "Nunito Sans", Verdana, Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

/* News listing — featured card. Every 5th card (the разводящая grid's
   nth-child(5n+1)) expands into a wide dark hero band at xl via a Tailwind
   arbitrary variant that sets bg-accent-bg WITHOUT a literal class, so the
   .bg-accent-bg rule above can't reach it (and its copy defaulted to
   #0e1214 = dark-on-dark, invisible). Keep the dramatic dark band — on-brand
   for ESTEO — but force the headline/excerpt/date/label white so they read.
   Scoped to the same xl breakpoint so the normal (light) cards keep dark text. */
@media (min-width: 1280px) {
  .is-content-page.is-news-category .js-fade-up-cards > div:nth-child(5n + 1) {
    color: #fff;
  }
}

.prose a {
  word-break: normal !important;
}

.text-white a, .text-white h2, .text-white h3 {
  color: white;
}

.input-error, .checkbox-error {
  --color-accent: #d90000;
}