@charset "UTF-8";
/* Version: 1.0.8 | Updated: 2026-03-23 */
/* Базовые цвета и токены — в css/tokens.css (загружается до index) */

/* ── Centralized icon system (Phosphor Duotone) ── */
.lm-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  color: currentColor;
}

/* Skip-to-content link — visible only on keyboard focus */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 999999;
  padding: 12px 24px;
  background: var(--color-accent, #C78C47);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus {
  top: 8px;
}

/* Touch target safety: ensure tappable elements meet 44px minimum on touch devices */
@media (pointer: coarse) {
  button, [role="button"], input[type="submit"],
  .btn, a.button, .quick-prompts li {
    min-height: var(--touch-target-min, 44px);
    min-width: var(--touch-target-min, 44px);
  }
}

:root {
  /* Переопределения/дополнения к tokens.css */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px; /* Changed from 40px to 48px for stricter grid */
  --spacing-3xl: 64px; /* Changed from 48px to 64px */
  --spacing-4xl: 80px; /* Changed from 64px to 80px */
  --spacing-5xl: 96px; /* Changed from 80px to 96px */
  --spacing-6xl: 128px; /* Changed from 96px to 128px */
  --spacing-7xl: 160px; /* Changed from 128px to 160px */

  /* Catalog Price - 8pt grid (Müller-Brockmann) */
  --catalog-price-size: 24px;
  --catalog-price-old-size: 18px;

  /* Hero section */
  --hero-height: 520px;
  --hero-aspect-ratio: 21 / 7; /* ~3:1 соотношение */
  --hero-max-height: 600px;
  --hero-min-height: 360px;
  --hero-slider-width: 70%;
  --hero-ads-width: 30%;
  --hero-pagination-bottom: var(--spacing-sm); /* 8px от низа слайдера */
  --hero-pagination-height: var(--spacing-lg); /* 24px общая высота области клика */
  --hero-pagination-line: 3px; /* толщина визуальной линии */
  --hero-text-gap: var(--spacing-sm); /* 8px отступ между текстом и пагинацией */
  --hero-pagination-gap: var(--spacing-md); /* 16px между bullets */

  /* Field Pattern - Intersecting Diamonds (Brandbook: "посевные поля") */
  --field-size: 64px;
  --field-pattern: 
    conic-gradient(from -45deg at 75% 12.5%, rgba(199,140,71,0.06) 25%, transparent 0),
    conic-gradient(from 135deg at 25% 87.5%, rgba(199,140,71,0.06) 25%, transparent 0) 
     0 calc(var(--field-size)/2),
    conic-gradient(from 180deg at 50% 75%, transparent 62.5%, rgba(199,140,71,0.06) 0),
    conic-gradient(at 50% 25%, transparent 62.5%, rgba(199,140,71,0.06) 0) 
     0 calc(var(--field-size)/2);
  --field-pattern-size: var(--field-size) calc(2*var(--field-size));
  
  /* Stronger version for hover states */
  --field-pattern-strong: 
    conic-gradient(from -45deg at 75% 12.5%, rgba(199,140,71,0.12) 25%, transparent 0),
    conic-gradient(from 135deg at 25% 87.5%, rgba(199,140,71,0.12) 25%, transparent 0) 
     0 calc(var(--field-size)/2),
    conic-gradient(from 180deg at 50% 75%, transparent 62.5%, rgba(199,140,71,0.12) 0),
    conic-gradient(at 50% 25%, transparent 62.5%, rgba(199,140,71,0.12) 0) 
     0 calc(var(--field-size)/2);

  /* Паттерн для карточек товаров (брендбук: «посевные поля») — opacity 0.12 для заметности */
  --field-pattern-card: 
    conic-gradient(from -45deg at 75% 12.5%, rgba(199,140,71,0.12) 25%, transparent 0),
    conic-gradient(from 135deg at 25% 87.5%, rgba(199,140,71,0.12) 25%, transparent 0) 
     0 calc(var(--field-size)/2),
    conic-gradient(from 180deg at 50% 75%, transparent 62.5%, rgba(199,140,71,0.12) 0),
    conic-gradient(at 50% 25%, transparent 62.5%, rgba(199,140,71,0.12) 0) 
     0 calc(var(--field-size)/2);
}

h1, h2, h3, h4, h5, h6, .catalogName, .catalogTitle {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

/* Accessibility: hide from view, keep for screen readers */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  border: 0;
}

html {
  margin: 0;
  padding: 0;
  overflow-x: hidden !important;
  overflow-y: scroll !important;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  padding: 0;
  overflow-x: clip !important;
  overflow-y: visible !important;
  height: auto !important;
  background: var(--color-bg-main);
  color: var(--color-text-white);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  font-family: 'Manrope', sans-serif;
}
/* .background {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: url('../img/Group5489.png') no-repeat center center;
	background-size: cover;
	z-index: 1;
} */
body.inside {
  background-color: var(--color-bg-main);
}

#page.site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow: visible !important;
  max-width: 100%;
}

#page-wrapper,
#page.site > main {
  flex: 1 0 auto;
}

/* Убираем возможные лишние скроллбары на контейнерах */
#page, main, #main, .site-main, #wrapper-navbar {
  overflow: visible !important;
}

/* content-visibility: below-fold секции рендерятся по мере скролла */
/* featureCatalog и saleCatalog исключены — при content-visibility: auto overflow обрезается,
   а catalogOptions при hover расширяются за пределы секции */
section.partners,
section.blog {
  content-visibility: auto;
  contain-intrinsic-size: auto var(--section-intrinsic-size, 500px);
}

::-webkit-scrollbar {
  width: 4px;
  height: 4px;
  /* Width of the scrollbar */
}

::-webkit-scrollbar-track {
  background: var(--color-bg-main);
}

::-webkit-scrollbar-thumb {
  background: var(--color-accent);
  /* Background of the thumb */
  border-radius: 0;
  /* Rounded corners for the thumb */
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-placeholder);
  /* Background of the thumb on hover */
}

@keyframes animateIn {
  0% {
    transform: scale(1);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

@keyframes animateOut {
  0% {
    transform: scale(1);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-16px);
  }

  100% {
    transform: translateY(0);
  }
}

/* @keyframes hoverWave removed for Flat Brutalism */

input:-webkit-autofill {
  outline: 0;
  border: 0;
  background-color: var(--color-bg-card) !important;
  color: var(--color-text-white) !important;
  -webkit-text-fill-color: var(--color-text-white) !important;
  caret-color: var(--color-text-white);
  box-shadow: 0 0 0px 1000px var(--color-bg-card) inset !important;
  transition: background-color 9999s ease-in-out 0s;
}

/* Карусели — единые стили (переменные в tokens.css) */
.recommendSlider.swiper,
.promoSlider.swiper,
.partnersSlider.swiper,
.blogSlider.swiper {
  overflow: visible !important;
  position: relative;
  padding: 0; /* Align carousel content with wrapper edges */
  margin-bottom: var(--carousel-margin-bottom);
}

/* Product sliders: карточки товаров не обрезать */
.recommendSlider .swiper-slide,
.promoSlider .swiper-slide {
  overflow: visible !important;
  height: auto;
}

.categoriesSlider .swiper,
.categoriesSlider .swiper-wrapper,
.categoriesSlider .swiper-slide {
  overflow: visible !important;
}

section:not(.blog) .swiper-button-prev,
section:not(.blog) .swiper-button-next {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%);
  z-index: 10;
  margin: 0;
}

.swiper-button-prev {
  left: 0 !important;
}

.swiper-button-next {
  right: 0 !important;
}

.blog .swiper {
  overflow: visible !important;
}

.blogNav {
  display: flex;
  gap: 12px;
  margin-top: var(--spacing-2xl);
}

.blog .swiper-button-prev,
.blog .swiper-button-next {
  position: relative;
  left: unset;
  right: unset;
  bottom: unset;
  top: unset;
  margin: 0;
}

.blog .blogNav .swiper-button-prev svg,
.blog .blogNav .swiper-button-next svg {
  width: 24px !important;
  height: 24px !important;
  flex-shrink: 0 !important;
  display: block !important;
}

/* .swiper-button-prev1,
.swiper-button-next1 {
	left: 45%;
}

.swiper-button-prev1 {
	top: 43%;
}

.swiper-button-prev2,
.swiper-button-next2 {
	top: 60%;
	transform: translateY(-60%);
}

.swiper-button-prev2,
.swiper-button-prev3,
.swiper-button-prev5,
.swiper-button-prev6 {
	left: -75px;
}

.swiper-button-next2,
.swiper-button-next3,
.swiper-button-next5,
.swiper-button-next6 {
	right: -75px;
} */
.swiper-button-next.swiper-button-disabled svg path,
.swiper-button-prev.swiper-button-disabled svg path {
  stroke: var(--color-bg-main);
}

.swiper-button-next:after,
.swiper-button-prev:after {
  content: none;
}

[class^="swiper-button-"] {
  background: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  min-width: var(--touch-target-min, 44px);
  min-height: var(--touch-target-min, 44px);
  width: 50px;
  height: 50px;
  transition: transform 0.3s ease, opacity 0.3s ease, color 0.3s ease, background-color 0.3s ease;
  border: 1px solid var(--color-accent);
  outline: none !important;
  box-shadow: none !important;
}

[class^="swiper-button-"]:hover {
  background: var(--color-accent-sand);
  border-color: var(--color-accent-sand);
}

[class^="swiper-button-"] svg path {
  stroke: var(--color-text-dark) !important;
  transition: transform 0.3s ease, opacity 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}

[class^="swiper-button-"]:hover svg path {
  stroke: var(--color-bg-main) !important;
}

.swiper-button-disabled {
  opacity: 0.3;
  background: transparent !important;
  border-color: var(--color-border) !important;
  cursor: not-allowed;
}

.swiper-button-disabled svg path {
  stroke: var(--color-border) !important;
}

.swiper-pagination {
  position: absolute;
  bottom: -30px !important;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: var(--touch-target-spacing, 8px);
  z-index: 10;
}

.hero .swiper-pagination {
  bottom: var(--hero-pagination-bottom) !important;
  left: var(--spacing-2xl) !important;
  display: flex;
  justify-content: flex-start;
  width: auto;
  gap: var(--hero-pagination-gap);
}

/* Hero: компактные точки пагинации в стиле сайта */
.hero .swiper-pagination-bullet {
  display: inline-block;
  box-sizing: content-box;
  width: 32px;
  height: var(--hero-pagination-line, 3px);
  min-height: 0;
  padding: calc((var(--hero-pagination-height) - var(--hero-pagination-line, 3px)) / 2) 0 !important;
  margin: 0 !important;
  background: rgba(255, 255, 255, 0.4);
  background-clip: content-box;
  border-radius: 0;
  opacity: 0.8;
  cursor: pointer;
  transition: background 0.3s ease, opacity 0.3s ease;
}

.hero .swiper-pagination-bullet:hover {
  opacity: 1;
}

.hero .swiper-pagination-bullet-active {
  background: var(--color-accent);
  background-clip: content-box;
  opacity: 1;
}

.catalogItem {
  min-width: 145px;
}

.swiper-pagination-bullet {
  width: 202px;
  height: 2px;
  min-height: var(--touch-target-min, 44px);
  padding: 21px 0;
  margin: 0;
  background: rgba(255, 255, 255, 0.2);
  background-clip: content-box;
  cursor: pointer;
  box-sizing: content-box;
}

.swiper-pagination-bullet-active {
  background: var(--color-text-white)fff;
  background-clip: content-box;
}

.breadcrumbs {
  margin-bottom: 60px !important;
  color: var(--color-text-gray);
}

.breadcrumbs a {
  color: var(--color-text-white);
}

.breadcrumbs a::after {
  content: "";
  display: inline-block;
  margin-left: 12px;
  margin-right: 32px;
  width: 13px;
  height: 13px;
  background-image: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.81628 3.21208L11.1042 6.5L7.81628 9.78791' stroke='currentColor' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1.89587 6.5H11.0121' stroke='currentColor' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.woocommerce .header {
  margin-bottom: 32px;
}

.woocommerce .woocommerce-breadcrumb {
  color: var(--color-text-gray);
  font-weight: 400;
  font-size: 1rem;
  line-height: 100%;
}

.woocommerce .woocommerce-breadcrumb a {
  color: var(--color-text-white);
}

#woocommerce-wrapper.catalog .woocommerce-breadcrumb {
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Старые стили .callbutton удалены — теперь callbutton только внутри fab-twobtn */

.breadcrumbs ul {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 32px;
}

.breadcrumbs ul li::after {
  content: "";
  display: inline-block;
  width: 13px;
  height: 13px;
  background-image: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.81628 3.21208L11.1042 6.5L7.81628 9.78791' stroke='white' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1.89587 6.5H11.0121' stroke='white' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: 8px;
  /* Отступ от текста */
  vertical-align: middle;
}

.breadcrumbs ul li:last-child::after {
  content: none;
}

.onsale {
  display: none;
}

button {
  color: var(--color-text-on-accent);
  background: var(--color-accent);
  border-radius: 0;
  padding: 16px 32px;
  min-height: var(--touch-target-min, 44px);
  font-weight: 900;
  font-size: 1rem;
  line-height: 100%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  outline: 0;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

button:hover {
  background: var(--color-accent-sand);
}

button:active {
  transform: scale(0.95);
}

a {
  color: var(--color-text-white);
  text-decoration: none;
}

/* p {
	margin-bottom: 24px;
	font-size: 1rem;
	font-weight: 400;
	line-height: 22.4px;
} */
ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

li {
  list-style-position: inside;
}

img {
  width: 100%;
}

section {
  margin-top: 60px;
  margin-bottom: 120px;
  position: relative;
}
section.hero {
  margin-top: 8px; /* Brockmann 8px grid — header already has 8px margin-bottom */
}

input,
textarea,
button {
  font-family: 'Manrope', sans-serif;
}

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-weight: 500;
  font-size: 1rem;
  line-height: 100%;
  background: var(--color-bg-main);
  border: 1px solid var(--color-text-dark-alt);
  border-radius: 0;
  padding: 20px 20px;
  color: var(--color-text-white);
  width: 100%;
  font-family: 'Manrope', sans-serif;
}

/* .select-wrapper {
  position: relative;
  display: inline-block;
  width: calc(25% - 12px);
}

.select-wrapper::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 13.9999C9.41668 13.9999 8.83335 13.7749 8.39168 13.3332L2.95835 7.89991C2.71668 7.65824 2.71668 7.25824 2.95835 7.01658C3.20002 6.77491 3.60002 6.77491 3.84168 7.01658L9.27502 12.4499C9.67502 12.8499 10.325 12.8499 10.725 12.4499L16.1583 7.01658C16.4 6.77491 16.8 6.77491 17.0417 7.01658C17.2833 7.25824 17.2833 7.65824 17.0417 7.89991L11.6083 13.3332C11.1667 13.7749 10.5833 13.9999 10 13.9999Z' fill='white'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  transform: translateY(-50%);
  pointer-events: none;
} */

.custom-select-wrapper {
  position: relative;
  width: 100%;
  user-select: none;
}

.custom-select-trigger {
  background: var(--color-bg-main);
  color: var(--color-text-white);
  padding: 16px 24px;
  border: 1px solid var(--color-border);
  border-radius: 0;
  cursor: pointer;
  position: relative;
  font-family: 'Manrope', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.75rem;
  line-height: 100%;
  white-space: nowrap;
  letter-spacing: -0.02em;
  transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.custom-select-trigger:hover {
  border-color: var(--color-accent);
}

.custom-select-trigger::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 13.9999C9.41668 13.9999 8.83335 13.7749 8.39168 13.3332L2.95835 7.89991C2.71668 7.65824 2.71668 7.25824 2.95835 7.01658C3.20002 6.77491 3.60002 6.77491 3.84168 7.01658L9.27502 12.4499C9.67502 12.8499 10.325 12.8499 10.725 12.4499L16.1583 7.01658C16.4 6.77491 16.8 6.77491 17.0417 7.01658C17.2833 7.25824 17.2833 7.65824 17.0417 7.89991L11.6083 13.3332C11.1667 13.7749 10.5833 13.9999 10 13.9999Z' fill='white'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  transform: translateY(-50%);
  pointer-events: none;
}

.custom-options {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 0;
  display: none;
  z-index: 10;
  max-height: 200px;
  overflow-y: auto;
  padding: 8px 0;
  box-shadow: none;
}

.custom-options.open {
  display: block;
}

.custom-option {
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.6875rem;
  padding: 12px 24px;
  cursor: pointer;
  color: var(--color-text-white);
  width: 100%;
  display: block;
  letter-spacing: -0.02em;
  transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.custom-option:hover {
  background-color: var(--color-bg-main);
  color: var(--color-accent);
}

.miniWrapper {
  max-width: 800px;
  margin: auto;
}

.wrapper {
  max-width: 1440px;
  margin: auto;
  padding: 0 var(--spacing-2xl);
}

.header.headerMobile {
  display: none;
}

.header {
  background: var(--color-bg-card);
  border-bottom: 1px solid var(--color-border);
  padding-top: 24px;
  padding-bottom: 24px;
  margin-bottom: 8px;
  position: relative;
  z-index: 1001;
  transition:
    transform 0.5s ease,
    top 0.5s ease;
}

.header.fixed {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  -webkit-animation: upper_down 0.5s;
  animation: upper_down 0.5s;
  padding-top: 0;
  padding-bottom: 20px;
  z-index: 9999;
}

.header.fixed .headerTop {
  display: none;
}

@-webkit-keyframes upper_down {
  0% {
    transform: translateY(-100px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes upper_down {
  0% {
    transform: translateY(-100px);
  }

  100% {
    transform: translateY(0);
  }
}

.headerLogo {
  display: flex;
  align-items: center;
}

.headerLogo div {
  display: flex;
  align-items: center;
}

.headerTop {
  border-bottom: 1px solid var(--color-border);
}

.headerTop .wrapper {
  display: flex;
  justify-content: space-between;
  gap: 0;
  padding-bottom: 20px;
}

.headerContacts {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
}

.headerContacts div {
  display: flex;
  justify-content: center;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.8125rem;
  line-height: 100%;
  letter-spacing: -0.02em;
}

.headerLogin {
  display: flex;
  justify-content: flex-start;
  gap: 12px;
}

.headerBot .wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-top: 24px;
}

.headerFilter {
  flex: 1 0 auto;
}

.headerBtnFilter,
.headerBtnReg {
  display: none;
}

.headerBtnsGroup {
  display: flex;
  gap: 12px;
}

.headerCatalog,
a.headerCatalog {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
  text-decoration: none;
  color: inherit;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.875rem;
  line-height: 100%;
  border-radius: 0;
  border: 1px solid var(--color-border);
  padding: var(--spacing-md) var(--spacing-xl);
  min-height: 56px;
  cursor: pointer;
  transition: transform 0.3s ease, opacity 0.3s ease, color 0.3s ease, background-color 0.3s ease;
  letter-spacing: -0.02em;
}

.headerCatalog:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-on-accent);
}

.headerCatalog:hover svg path {
  stroke: var(--color-text-dark);
}

.headerCatalog svg {
  transition: transform 0.7s ease, opacity 0.7s ease, color 0.7s ease, background-color 0.7s ease;
}

.headerCatalog:hover svg {
  transform: rotate(-90deg);
}

/* Catalog Mega-Menu */
.headerCatalogWrap {
  position: relative;
  z-index: 100;
}

.catalogMegaMenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 680px;
  max-width: 900px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
  box-shadow: 0 16px 48px rgba(0,0,0,0.35);
}

.catalogMegaMenu[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.catalogMegaMenu__inner {
  padding: 24px;
}

.catalogMegaMenu__header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}

/* Desktop: hide mobile-only elements */
.catalogMegaMenu__close,
.catalogMegaMenu__title {
  display: none;
}

.catalogMegaMenu__allLink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 900;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-accent);
  text-decoration: none;
  transition: color 0.2s;
}

.catalogMegaMenu__allLink:hover {
  color: var(--color-text-light);
}

.catalogMegaMenu__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.catalogMegaMenu__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  text-decoration: none;
  color: var(--color-text-light);
  font-weight: 700;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  transition: background 0.2s, color 0.2s;
  border: 1px solid transparent;
}

.catalogMegaMenu__item:hover {
  background: rgba(199, 140, 71, 0.08);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.catalogMegaMenu__item img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
}

.catalogMegaMenu__name {
  flex: 1;
  line-height: 1.3;
}

.catalogMegaMenu__count {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  font-weight: 900;
  background: rgba(255,255,255,0.05);
  padding: 2px 8px;
  min-width: 28px;
  text-align: center;
  flex-shrink: 0;
}

/* Active state for catalog button */
/* When mega-menu open, header above hero (z:1000) */
.header:has(.headerCatalog[aria-expanded="true"]) {
  z-index: 1001;
}

.headerCatalog[aria-expanded="true"] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-on-accent);
}

.headerCatalog[aria-expanded="true"] svg path {
  stroke: var(--color-text-dark);
}

.headerFilter form {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex: 1 0 auto;
}

.headerFilter select {
  flex: 1 0 auto;
}

.headerFilter button {
  padding: 16px 24px;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: -0.02em;
}

.headerFilterSub {
  display: none;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}

.headerCart {
  position: relative;
  background: var(--color-bg-main);
  padding: 16px;
  border-radius: 0;
  border: 1px solid var(--color-border);
  width: 48px;
  height: 48px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s ease, opacity 0.4s ease, color 0.4s ease, background-color 0.4s ease;
}

.headerCart:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.headerCart span {
  position: absolute;
  top: -4px;
  right: -4px;
  border-radius: 0;
  width: 24px;
  height: 24px;
  background: var(--color-accent);
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-text-on-accent);
  font-weight: 900;
  font-size: 0.6875rem;
  border: 2px solid var(--color-bg-main);
}

/* .headerLang {
  position: relative;
} */

.headerLang select {
  padding: 7px;
  text-align: center;
  line-height: normal;
}

/* Hero на всю ширину экрана (edge-to-edge) */
.hero {
  width: calc(100vw - var(--scrollbar-width, 0px));
  margin-left: calc(-50vw + 50% + var(--scrollbar-width, 0px) / 2);
  padding: 0;
  position: relative;
  z-index: 10; /* Below header so search dropdown renders on top */
}

.hero > .wrapper {
  max-width: none;
  padding: 0;
  width: 100%;
}

.heroGrid {
  display: grid;
  grid-template-columns: 1fr var(--hero-ads-width, 30%);
  overflow: visible;
  /* clip-path removed — shadow and 3D breakout handled by z-index and visible overflow */
  gap: 0;
}

.heroSlider {
  position: relative;
  min-width: 0;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.heroAds {
  min-width: 0;
  overflow: hidden;
  height: var(--hero-max-height, 700px);
  transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Rubber snap-back: sidebar slides in from right with elastic overshoot (GPU-only, no reflow) */
@keyframes adsSnapBack {
  0%   { transform: translateX(100%); opacity: 0; }
  60%  { transform: translateX(-4%); opacity: 1; }
  80%  { transform: translateX(2%); }
  100% { transform: translateX(0); opacity: 1; }
}
.heroAds.snap-back {
  animation: adsSnapBack 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.heroAds.adsSlider {
  height: 100%;
}

.heroAds.adsSlider .swiper-wrapper {
  height: 100%;
}

.heroAds.adsSlider .swiper-slide {
  height: 100% !important;
}

/* Анимация текста при смене слайда: fade-in + slide-up */

.heroSlider .swiper-button-prev {
  position: absolute !important;
  left: 0;
  top: 50% !important;
  border-radius: 0;
}

.heroSlider .swiper-button-next {
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  border-radius: 0;
}

/* .swiper-slide:nth-child(2) .heroSliderImage img {
  object-position: 100px center;
} */

.heroAdsTop {
  position: relative;
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  padding: var(--spacing-2xl);
  padding-bottom: calc(var(--hero-pagination-bottom) + var(--hero-pagination-height) + var(--hero-text-gap));
  border-radius: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  perspective: 800px;
}

.heroAdsTop h3 {
  font-weight: 900;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 0.95;
  position: relative;
  z-index: 1;
  margin-bottom: 20px;
  letter-spacing: -0.03em;
}

.heroAdsTop p {
  max-width: 319px;
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.4;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
  opacity: 0.85;
}

.heroAdsTop a {
  z-index: 1;
}

.heroAdsTop button {
  border: 2px solid var(--color-text-on-accent);
  color: var(--color-text-on-accent);
  background: transparent;
  padding: 14px 32px;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.heroAdsTop button:hover {
  background: var(--color-text-on-accent);
  color: var(--color-accent);
}

.heroAdsDecor {
  position: absolute;
  top: 250px;
  right: 0;
  width: 515px;
  height: 515px;
  background: url("../img/Group22.webp") no-repeat;
  background-size: contain;
  pointer-events: none;
  /* чтобы не мешал кликам */
  transform-origin: bottom right;
  /* transition: transform 0.4s; */
  transform-style: preserve-3d;
  will-change: transform;
}

/* .heroAdsTop::after {
  content: "";
  position: absolute;
  bottom: -54px;
  right: -64px;
  width: 100%;
  height: 100%;
  background: url("../img/90d45dd16b5dc78c00e45c70c1f59199.png");
  background-size: contain;
  background-repeat: no-repeat;
} */

.heroAdsBot {
  position: relative;
  background: url("../img/e959b959b404091d90624fa9db16f897.jpeg");
  padding: var(--spacing-2xl) var(--spacing-2xl) var(--spacing-5xl) var(--spacing-2xl); /* 1:2 Ratio (48px top, 96px bottom) */
  border-radius: 0;
  overflow: hidden;
}

.heroAdsBot::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--field-pattern-strong);
  background-size: var(--field-pattern-size);
  opacity: 0.5;
  pointer-events: none;
}

.heroAdsBot h3 {
  font-weight: 800;
  font-size: var(--spacing-2xl); /* Increased for hierarchy (48px) */
  line-height: 100%;
  z-index: 1;
  position: relative;
  letter-spacing: -0.02em;
}

.heroAdsBot p {
  font-weight: 500;
  font-size: 1rem;
  line-height: 150%;
  margin-bottom: 8px;
  z-index: 1;
  position: relative;
}

.heroAdsBot button {
  background: transparent;
  border: 1px solid var(--color-text-white);
  z-index: 1;
  position: relative;
}

.heroAdsBot::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(16, 17, 30, 0.5803921569);
  border-radius: 0;
}

/* Categories — Compact Carousel */
.categories {
  position: relative;
  padding: 16px 0 32px 0;
}

.categories .wrapper {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  max-width: 100%;
}

/* Компактная карусель — padding для рамок */
.categoriesSlider {
  position: relative;
  padding: 0.75rem 1.25rem 1.5rem 1.25rem;
  margin: 0 -1.25rem;
  width: calc(100% + 2.5rem);
  max-width: none;
  min-width: 0;
  min-height: 6rem;
  overflow: visible;
}

.categoriesSlider .swiper-wrapper {
  display: flex;
}

.categoriesNav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

.categories .categoriesNav .swiper-button-prev,
.categories .categoriesNav .swiper-button-next {
  position: relative !important;
  left: unset !important;
  right: unset !important;
  top: unset !important;
  transform: none !important;
  margin: 0;
}

.categoriesSlider .swiper-button-prev svg,
.categoriesSlider .swiper-button-next svg,
.categoriesNav .swiper-button-prev svg,
.categoriesNav .swiper-button-next svg {
  width: 24px !important;
  height: 24px !important;
  flex-shrink: 0 !important;
  display: block !important;
}

.swiper-wrapper {
  height: unset;
}

/* Category Cards — Balanced Carousel.
   Use inset box-shadow as "border" so overflowing icons (negative margin-top)
   don't get crossed by a real border line. */
.categoriesSlider .swiper-slide {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
  border-radius: 0;
  transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
  height: auto;
  min-height: 5rem;
  background: rgba(255,255,255,0.02);
  width: auto;
  min-width: 16rem;
  flex-shrink: 0;
  overflow: visible;
}

.categoriesSlider .swiper-slide:hover {
  box-shadow: inset 0 0 0 1px var(--color-accent);
  background: rgba(199, 140, 71, 0.05);
}

.categoriesSlider .swiper-slide:hover img,
.categoriesSlider .swiper-slide:hover svg {
  transform: scale(1.08);
}

.categoriesSlider .swiper-slide:hover .categoriesInfo div {
  transform: translateX(0.375rem);
}

.categoriesSlider img,
.categoriesSlider svg {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
  object-position: center;
  transition: transform 0.3s ease, opacity 0.3s ease, color 0.3s ease, background-color 0.3s ease;
  flex-shrink: 0;
}
/* Category icons — oversized with overflow, muted gray default */
.categoriesInfo img {
  width: 4.5rem;
  height: 4.5rem;
  margin-top: -1.5rem;
  position: relative;
  z-index: 2;
  filter: grayscale(1) brightness(0.8);
  opacity: 0.7;
}
.categoriesSlider .swiper-slide:hover .categoriesInfo img {
  filter: grayscale(0) brightness(1);
  opacity: 1;
}

/* Arrow icon (external SVG) */
.categoriesSlider .swiper-slide > svg {
  width: 1.25rem;
  height: 1.25rem;
  opacity: 0.3;
  transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease;
  flex-shrink: 0;
}

.categoriesSlider .swiper-slide:hover > svg {
  opacity: 1;
  transform: translateX(0.25rem);
}

.categoriesSlider .swiper-slide > svg path {
  stroke: currentColor;
}

.categoriesInfo {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem;
  flex: 1;
  min-width: 0;
  overflow: visible;
}

.categoriesInfo div {
  transition: transform 0.3s ease, opacity 0.3s ease, color 0.3s ease, background-color 0.3s ease;
  min-width: 0;
}

.categoriesInfo h3,
.categoriesInfo h5 {
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.3;
  margin-bottom: 0.25rem;
}

.categoriesInfo p {
  font-weight: 500;
  font-size: 0.8125rem;
  line-height: 1;
  color: rgba(255,255,255,0.5);
  white-space: nowrap;
}

/* .featureCatalog,
.saleCatalog {
	overflow: hidden;
} */

.featureCatalog {
  z-index: 2;
  position: relative;
  overflow: visible;
}

.saleCatalog {
  z-index: 1;
  position: relative;
  overflow: visible;
}

.catalogBtns {
  /* margin-bottom: 80px; откудо это*/
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0;
}

.saleCatalog .catalogBtns,
.featureCatalog .catalogBtns {
  align-items: flex-end;
  margin-bottom: 48px;
}

.saleCatalog .catalogBtns .catalogTitle,
.featureCatalog .catalogBtns .catalogTitle {
  margin-bottom: 0;
}

.saleCatalog .catalogBtnsRight,
.featureCatalog .catalogBtnsRight {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.featureCatalog .catalogBtnsRight > a,
.saleCatalog .catalogBtnsRight > a {
  width: 100%;
  align-self: stretch;
  display: block;
}

.featureCatalog .catalogBtnsRight .catalogMoreBtn,
.saleCatalog .catalogBtnsRight .catalogMoreBtn {
  width: 100%;
  min-width: 0;
  height: 50px;
  padding: 4px 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  line-height: 1.1;
  text-align: center;
  flex: none;
  word-break: break-word;
}

.saleCatalog .catalogNav,
.featureCatalog .catalogNav {
  display: flex;
  gap: 12px;
  align-items: center;
}

.saleCatalog .catalogNav .swiper-button-prev,
.saleCatalog .catalogNav .swiper-button-next,
.featureCatalog .catalogNav .swiper-button-prev,
.featureCatalog .catalogNav .swiper-button-next {
  position: relative !important;
  left: unset !important;
  right: unset !important;
  bottom: unset !important;
  top: unset !important;
  transform: none !important;
  margin: 0;
}

.saleCatalog .catalogNav .swiper-button-prev svg,
.saleCatalog .catalogNav .swiper-button-next svg,
.featureCatalog .catalogNav .swiper-button-prev svg,
.featureCatalog .catalogNav .swiper-button-next svg {
  width: 24px !important;
  height: 24px !important;
  flex-shrink: 0 !important;
  display: block !important;
}

.catalogTitle {
  font-size: clamp(48px, 8vw, 128px);
  line-height: 0.9;
  margin-bottom: 48px;
  letter-spacing: -0.04em;
}

.catalogTitlePage {
  margin-bottom: 60px;
}

.catalogTitle + p {
  max-width: 990px;
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--color-text-gray);
  margin-bottom: 48px;
}

.catalogBox {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  gap: 24px;
  flex-wrap: wrap;
  row-gap: 48px;
}

.catalogBox--stretch {
  align-items: stretch;
}

/* Главная: skeleton → AJAX, те же классы/структура — layout стабилен */
.catalogBox--front.catalogBox--loaded .catalogItem {
  animation: catalogItemFadeIn 0.35s ease forwards;
}
.catalogBox--front.catalogBox--loaded .catalogItem:nth-child(1) { animation-delay: 0.02s; }
.catalogBox--front.catalogBox--loaded .catalogItem:nth-child(2) { animation-delay: 0.05s; }
.catalogBox--front.catalogBox--loaded .catalogItem:nth-child(3) { animation-delay: 0.08s; }
.catalogBox--front.catalogBox--loaded .catalogItem:nth-child(4) { animation-delay: 0.11s; }
.catalogBox--front.catalogBox--loaded .catalogItem:nth-child(5) { animation-delay: 0.14s; }
.catalogBox--front.catalogBox--loaded .catalogItem:nth-child(6) { animation-delay: 0.17s; }
.catalogBox--front.catalogBox--loaded .catalogItem:nth-child(7) { animation-delay: 0.2s; }
.catalogBox--front.catalogBox--loaded .catalogItem:nth-child(8) { animation-delay: 0.23s; }
@keyframes catalogItemFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* .single-product .catalogBox {
  row-gap: 0;
} */

.catalogBoxPage {
  width: 100%;
  margin-top: 0;
}

/* Few-product fallback — когда в категории 1-2 товара,
   flex: 0 0 calc(25% - 18px) оставляет товар в углу с 75% пустоты.
   .products prefix для specificity > .products .product (с !important).
   !important чтобы перебить * { margin: 0 } reset и любые другие. */
.products .catalogItem:only-child,
.products .catalogItem:first-child:nth-last-child(2),
.products .catalogItem:first-child:nth-last-child(2) ~ .catalogItem {
  margin-inline: auto !important;
}

.catalogFilter + .catalogBoxPage,
.catalogPluginFilter + .catalogBoxPage {
  width: calc(75% - 6px);
  margin-top: 0;
}

.catalogBox .catalogBoxPage {
  margin-top: var(--spacing-2xl);
}

.catalogBox .catalogFilter + .catalogBoxPage,
.catalogBox .catalogPluginFilter + .catalogBoxPage {
  margin-top: 0;
}

.catalogFilterName {
  display: none;
}

.selectedFilters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.selected-filter-tag {
  display: flex;
  gap: 5px;
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  border-radius: 0;
  padding: 5px;
}

.remove-filter {
  background: transparent;
  padding: 0;
}

.selectedFilterTag {
  background-color: var(--color-accent);
  color: var(--color-text-on-accent);
  padding: 8px 16px;
  border-radius: 0;
  display: flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  border: 1px solid var(--color-accent);
}

.selectedFilterTag button {
  margin-left: 8px;
  cursor: pointer;
  font-weight: 900;
  color: var(--color-text-on-accent);
  padding: 0;
  border: none;
  background: transparent;
  line-height: 1;
  font-size: 1rem;
}

.catalogFilterSwitcher {
  display: flex;
  justify-content: center;
  align-items: stretch;
  margin-bottom: var(--spacing-2xl);
  margin-top: 20px;
  border: 1px solid var(--color-border);
  border-radius: 0;
  overflow: hidden;
  background: var(--color-bg-card);
}

.catalogFilterSwitcher div {
  padding: 20px 12px;
  flex-grow: 1;
  flex-basis: 50%;
  text-align: center;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: 0.875rem;
  transition: transform 0.3s ease, opacity 0.3s ease, color 0.3s ease, background-color 0.3s ease;
  color: var(--color-text-muted);
}

.catalogFilterSwitcher div.active {
  background-color: var(--color-accent);
  color: var(--color-text-on-accent);
}

.catalogFilterSwitcher div:not(:last-child) {
  border-right: 1px solid var(--color-border);
}

.catalogFilterSwitcher div:hover:not(.active) {
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-text-light);
}

@media screen and (min-width: 1600px) {
  .catalogFilterSwitcher div span {
    max-width: 120px;
  }
}

.catalogFilterContent {
  margin-bottom: 20px;
}

.catalogFilterContent .catalogFilterGroup {
  margin-bottom: 0;
}

.catalogFilterContent .catalogFilterContext {
  opacity: 1;
  height: 100%;
}

.catalogFilterContent .filter-content {
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  padding: 24px;
  border-radius: 0;
}

.catalogFilterGroup {
  margin-bottom: 24px;
}

.catalogFilterGroupTitle {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: 0.875rem;
  margin-bottom: 16px;
  color: var(--color-accent);
}

.catalogFilterCheckboxes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 250px;
  overflow-y: auto;
  padding-right: 10px;
}

/* Custom Scrollbar for filters */
.catalogFilterCheckboxes::-webkit-scrollbar {
  width: 4px;
}
.catalogFilterCheckboxes::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0;
}
.catalogFilterCheckboxes::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 0;
}

.catalogCategories {
  margin-bottom: 80px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 32px;
  overflow-x: auto;
  padding-bottom: 10px;
}

.catalogCategories ul {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.catalogCategories ul li a {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  padding: 12px 24px;
  border-radius: 0;
  color: var(--color-text-light);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: 0.8125rem;
  transition: transform 0.3s ease, opacity 0.3s ease, color 0.3s ease, background-color 0.3s ease;
  white-space: nowrap;
  display: block;
}

.catalogCategories ul li a:hover {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  border-color: var(--color-accent);
}

.catalogCategories ul li.active a {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  border-color: var(--color-accent);
}

.catalogCategories ul li a:hover {
  border-color: var(--color-accent);
}

.catalogCategories ul li a.active {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
}

.brandCatalog .catalogBtns {
  margin-bottom: 120px;
}

.catalogItem {
  /* Catalog Item — concept parameters (rem-based для accessibility) */
  --ci-lift: -0.25rem;          /* hover lift (-4px) */
  --ci-shadow-y: 0.75rem;       /* hover shadow Y (12px) */
  --ci-shadow-blur: 2rem;       /* hover shadow blur (32px) */
  --ci-pattern-h: 5.5rem;       /* brandbook ::after pattern height (88px) */
  --ci-img-h: 16rem;            /* image slot height (256px) */
  --ci-img-max-h: 15rem;        /* image max-height (240px) */
  --ci-img-scale-hover: 1.1;    /* image zoom on hover */

  flex: 0 0 calc(25% - 18px);
  position: relative;
  isolation: isolate;
  background-color: var(--color-bg-card);
  background-image: var(--field-pattern-card);
  background-size: var(--field-pattern-size);
  padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-4xl) var(--spacing-lg);
  border-radius: 0;
  border: 1px solid var(--color-border);
  flex-direction: column;
  display: flex;
  justify-content: flex-start;
  text-align: left;
  overflow: visible;
  z-index: 9;
  margin-top: 0;
  /* Single unified transition (was duplicated below) */
  transition:
    transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
    opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
    color 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
    background-color 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
    border-color 0.35s ease,
    box-shadow 0.35s ease;
  container-type: inline-size;
}

/* Отпечатки элементов брендбука внизу карточки (как в футере) — разные фигуры на разных карточках */
.catalogItem::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: var(--ci-pattern-h);
  pointer-events: none;
  z-index: 0;
  opacity: 0.18;
  mix-blend-mode: multiply;
  background-repeat: no-repeat;
  background-position: bottom center;
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 40%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0%, #000 40%, transparent 100%);
}

/* 1) Волны (протектор шины) — 4n+1 */
.catalogItem:nth-child(4n+1)::after {
  background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 40 Q20 20 40 40 T80 40' stroke='%23C78C47' stroke-width='1.5' fill='none' opacity='0.6'/%3E%3Cpath d='M0 48 Q20 28 40 48 T80 48' stroke='%23C78C47' stroke-width='1.2' fill='none' opacity='0.5'/%3E%3Cpath d='M0 56 Q20 36 40 56 T80 56' stroke='%23C78C47' stroke-width='1' fill='none' opacity='0.4'/%3E%3C/svg%3E");
  background-size: 120px 88px;
}

/* 2) Дуги (поля) — 4n+2 */
.catalogItem:nth-child(4n+2)::after {
  background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 70 A40 40 0 0 1 70 70' stroke='%23C78C47' stroke-width='1.5' fill='none' opacity='0.6'/%3E%3Cpath d='M20 65 A30 30 0 0 1 60 65' stroke='%23C78C47' stroke-width='1.2' fill='none' opacity='0.5'/%3E%3Cpath d='M30 60 A20 20 0 0 1 50 60' stroke='%23C78C47' stroke-width='1' fill='none' opacity='0.4'/%3E%3C/svg%3E");
  background-size: 100px 88px;
}

/* 3) Кольцо (круг) — 4n+3 */
.catalogItem:nth-child(4n+3)::after {
  background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='40' cy='50' r='28' stroke='%23C78C47' stroke-width='2' fill='none' opacity='0.5'/%3E%3Ccircle cx='40' cy='50' r='18' stroke='%23C78C47' stroke-width='1' fill='none' opacity='0.35'/%3E%3C/svg%3E");
  background-size: 90px 88px;
}

/* 4) Параллельные линии — 4n */
.catalogItem:nth-child(4n)::after {
  background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='10' y1='30' x2='70' y2='55' stroke='%23C78C47' stroke-width='1.5' opacity='0.6'/%3E%3Cline x1='15' y1='42' x2='75' y2='67' stroke='%23C78C47' stroke-width='1.2' opacity='0.5'/%3E%3Cline x1='20' y1='54' x2='80' y2='79' stroke='%23C78C47' stroke-width='1' opacity='0.4'/%3E%3C/svg%3E");
  background-size: 110px 88px;
}

.catalogItem.skeleton-card::after {
  display: none;
}

/* При активном WebGL скрываем статичный ::after */
.catalogItem.has-webgl-pattern::after {
  display: none;
}

.catalogItem:hover {
  border-color: var(--color-accent);
  transform: translateY(var(--ci-lift));
  box-shadow: 0 var(--ci-shadow-y) var(--ci-shadow-blur) rgba(0, 0, 0, 0.28);
  background-color: var(--color-bg-card);
  background-image: var(--field-pattern-card);
}

/* RAM Effect - эффект "тарана" для следующей секции при раскрытии карточки */
@keyframes ramImpact {
  0% {
    transform: translateY(0);
  }
  8% {
    /* Момент удара - резкое смещение вниз */
    transform: translateY(calc(12px * var(--ram-force, 1)));
  }
  20% {
    transform: translateY(calc(-4px * var(--ram-force, 1)));
  }
  35% {
    transform: translateY(calc(6px * var(--ram-force, 1)));
  }
  50% {
    transform: translateY(calc(-2px * var(--ram-force, 1)));
  }
  65% {
    transform: translateY(calc(2px * var(--ram-force, 1)));
  }
  80% {
    transform: translateY(calc(-1px * var(--ram-force, 1)));
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes ramPulse {
  0% {
    opacity: 0;
    transform: scaleX(0);
  }
  10% {
    opacity: 1;
    transform: scaleX(1);
  }
  100% {
    opacity: 0;
    transform: scaleX(1);
  }
}

section.ram-impact {
  animation: ramImpact 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

section.ram-impact::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
  animation: ramPulse 0.35s ease-out;
  pointer-events: none;
  transform-origin: center;
}

@media (prefers-reduced-motion: reduce) {
  .catalogItem:hover {
    transform: none;
  }
  .catalogItem:hover .catalogImage img {
    transform: none;
  }
}

.catalogItem:hover .catalogQuality {
  background: var(--color-bg-card);
  border-color: var(--color-accent);
}

.catalogItemPage {
  width: calc(25% - 18px);
}

.catalogImage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: var(--ci-img-h);
  min-height: var(--ci-img-h);
  max-height: var(--ci-img-h);
  margin-bottom: 1rem;
  overflow: hidden;
}

.catalogImage a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.catalogImage img {
  width: auto;
  max-width: 100%;
  height: 100%;
  max-height: var(--ci-img-max-h);
  border-radius: 0;
  -o-object-fit: contain;
  object-fit: contain;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  filter: none;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  vertical-align: middle;
}

.catalogItem:hover .catalogImage img {
  transform: scale(var(--ci-img-scale-hover)) translateZ(30px);
}

.catalogContent {
  margin-bottom: 16px;
  flex: 1 1 auto;
  overflow: visible;
  display: flex;
  flex-direction: column;
}

.catalogInfo {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  order: -1; /* артикул перед брендом */
}

.catalogInfo p {
  color: var(--color-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.625rem;
  line-height: 100%;
  letter-spacing: 0.05em;
  background: none;
  padding: 0;
  border-radius: 0;
  opacity: 0.5;
}

.catalogName {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.8125rem;
  line-height: 1.3;
  margin-bottom: 8px;
  letter-spacing: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-height: 20px; /* single line reserved */
}

.catalogName a {
  transition: transform 0.3s ease, opacity 0.3s ease, color 0.3s ease, background-color 0.3s ease;
  color: var(--color-text-light);
  text-decoration: none;
}

.catalogName a:hover {
  color: var(--color-accent);
}

.catalogCat {
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(12px, 3.5cqi, 15px);
  color: var(--color-text-light);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: calc(2 * 1.3em); /* reserve 2 lines */
}

.catalogBtns {
  display: flex;
  gap: 10px;
}

.catalogBtns .btn {
  flex: 1;
  padding: 12px;
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 0;
  transition: transform 0.3s ease, opacity 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}

.catalogBtns .btn-primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-on-accent);
}

.catalogBtns .btn-primary:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  transform: scale(1.02);
}

.catalogBtns .btn-outline {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-light);
  position: relative;
  overflow: hidden;
}
.catalogBtns .btn-outline::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  transition: left 0.5s ease;
  pointer-events: none;
}
.catalogBtns .btn-outline:hover::before {
  left: 100%;
}

.catalogBtns .btn-outline:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--color-text-light);
}

.catalogExtra {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.catalogAttr {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}

.catalogAttr div {
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.625rem;
  line-height: 100%;
  text-align: center;
  background: var(--color-bg-main);
  padding: 6px 12px;
  border-radius: 0;
  border: 1px solid var(--color-border);
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
}

/* Спецификации товара — скрыты по умолчанию, раскрываются при hover */
.catalogOptionsWrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
  margin-top: 16px;
}

.catalogOptions {
  position: relative;
  width: 100%;
  min-height: 0;
  background-color: transparent;
  padding: 0;
  overflow: hidden; /* needed for grid-rows:0fr collapse */
}

.catalogItem:hover .catalogOptionsWrap,
.catalogItem.row-hover .catalogOptionsWrap {
  grid-template-rows: 1fr;
}
/* When expanded, allow tooltips to escape */
.catalogItem:hover .catalogOptions,
.catalogItem.row-hover .catalogOptions {
  overflow: visible;
}

.catalogOptions::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Opera */
}

.catalogOptions div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 4px 10px;
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(7px, 1.8vw, 11px);
  line-height: 1.4;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 6px;
  letter-spacing: -0.02em;
}

.catalogOptions div span {
  color: var(--color-text-muted);
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
  flex: 1 1 auto;
}

.catalogOptions div p {
  color: var(--color-text-light);
  text-align: right;
  min-width: 0;
  flex: 0 1 auto;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Tooltip для атрибутов с текстом в скобках */
.catalogOptions div span.has-tooltip {
  position: relative;
  cursor: help;
  border-bottom: 1px dotted var(--color-accent);
}

.catalogOptions div span.has-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 0;
  bottom: 100%;
  margin-bottom: 6px;
  padding: 10px 14px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-accent);
  border-radius: 0;
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: none;
  white-space: normal;
  max-width: 220px;
  min-width: 120px;
  line-height: 1.4;
  color: var(--color-text-light);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 100;
  transition: opacity 0.2s, visibility 0.2s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.catalogOptions div span.has-tooltip:hover::after {
  opacity: 1;
  visibility: visible;
}

.catalogFlags {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  overflow: visible;
  position: relative;
  z-index: 1;
}

/* Waving flag animation - subtle CSS simulation */
@keyframes flagWave {
  0%, 100% {
    transform: perspective(200px) rotateY(0deg) scaleX(1);
  }
  20% {
    transform: perspective(200px) rotateY(-2deg) scaleX(0.98);
  }
  40% {
    transform: perspective(200px) rotateY(0deg) scaleX(1);
  }
  60% {
    transform: perspective(200px) rotateY(2deg) scaleX(0.98);
  }
  80% {
    transform: perspective(200px) rotateY(0deg) scaleX(1);
  }
}

.catalogFlag {
  /* width/height заданы в HTML для CLS; размер через --img-flag-size */
  width: var(--img-flag-size, 20px);
  height: var(--img-flag-size, 20px);
  margin-left: 5px;
  vertical-align: middle;
  position: relative;
  top: -1px;
  border-radius: 0;
  box-shadow: none;
  border: none;
  transform-origin: left center;
  animation: flagWave 2.5s ease-in-out infinite;
  will-change: transform;
  transition: filter 0.3s ease;
  display: inline-block;
}

.catalogFlag:hover {
  animation-play-state: paused;
  filter: brightness(1.1);
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .catalogFlag {
    animation: none;
  }
}

/* Disable CSS animation when canvas (WebGL) is active */
.catalogFlag.flag-wave-canvas {
  animation: none;
  border: none;
  box-shadow: none;
  image-rendering: auto;
}

.catalogFlag--lg {
  width: 22px;
  height: 22px;
}

.catalogIcons {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
}

.catalogIcon {
  display: inline-block;
  width: 32px;
  height: 32px;
  background-color: var(--color-icon);
  -webkit-mask-image: var(--icon-url);
  mask-image: var(--icon-url);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition: background-color 0.3s ease;
}

/* Purpose icon — rendered as <img> to preserve native colors
   (highlighted wheel for axle variants). Reset masking + bg inherited from .catalogIcon. */
img.catalogIcon,
img.catalogIcon--purpose {
  background-color: transparent !important;
  -webkit-mask: none !important;
  mask: none !important;
  object-fit: contain;
}

.nameIcon {
  display: inline-block;
  width: 18px;
  height: 18px;
  background-color: var(--color-icon);
  -webkit-mask-image: var(--icon-url);
  mask-image: var(--icon-url);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  vertical-align: middle;
  margin-left: 5px;
}

.catalogBuy {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  align-content: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  min-width: 0;
  margin-top: auto; /* Brockmann: price always at bottom */
}

.catalogPrice {
  font-weight: 900;
  font-size: var(--catalog-price-size);
  line-height: 100%;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  gap: 4px;
  letter-spacing: -0.02em;
  flex: 1 1 70px;
  min-width: 70px;
}

.catalogPrice .regular-price,
.catalogPrice .sale-price,
.catalogPrice .woocommerce-Price-amount,
.catalogPrice bdi {
  font-size: inherit;
  font-weight: inherit;
  color: var(--color-text-light);
}

.catalogCart {
  flex-shrink: 0;
}

.catalogPrice .old-price {
  font-weight: 900;
  font-size: var(--catalog-price-old-size);
  line-height: 100%;
  text-decoration: none;
  color: var(--color-sale);
  opacity: 0.5;
  margin-right: 8px;
}
/* Custom strikethrough — on the inner amount span, not the outer wrapper */
.catalogPrice .old-price .woocommerce-Price-amount {
  position: relative;
  display: inline;
}
.catalogPrice .old-price .woocommerce-Price-amount::after {
  content: '';
  position: absolute;
  left: -2px;
  right: -2px;
  top: 50%;
  height: 2px;
  background: var(--color-sale, #c0392b);
  transform: rotate(-8deg);
  opacity: 1;
}

.catalogCart a.button {
  color: var(--color-text-on-accent) !important;
  opacity: 1 !important;
  background-color: var(--color-accent) !important;
  min-width: 44px;
  min-height: 44px;
  width: 48px;
  height: 48px;
  border-radius: 0 !important;
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 0;
  padding: 0;
  cursor: pointer !important;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 1px solid var(--color-accent) !important;
}

.catalogCart a.button:hover {
  background-color: var(--color-text-light) !important;
  border-color: var(--color-text-light) !important;
  /* Только лёгкое увеличение, без rotate — кнопка остаётся под курсором */
  transform: scale(1.05);
}

.catalogCart a.button::after {
  margin-left: 0 !important;
}

.added_to_cart.wc-forward {
  position: absolute;
  background: var(--color-text-light);
  color: var(--color-text-dark);
  padding: 10px 20px;
  border-radius: 0;
  left: 50%;
  bottom: -25px;
  transform: translateX(-50%);
  z-index: 99;
  width: max-content;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.625rem;
  letter-spacing: 0.05em;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: none;
}

.catalogQuality {
  font-weight: 900;
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 0.02em;
  line-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  position: absolute;
  /* Sit exactly on the top frame: 40px badge centred on the 1px border */
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 16px;
  border-radius: 0;
  width: auto;
  min-width: 160px;
  max-width: 100%;
  height: 40px;
  z-index: 11;
  margin-left: auto;
  margin-right: auto;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  box-shadow: none;
}

/* В сетке каталога (catalogBox, catalogBoxPage) — значок в потоке, не поверх карточки */
.catalogBox .catalogQuality,
.catalogBoxPage .catalogQuality {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  margin-bottom: 16px;
  align-self: center;
  max-width: 100%;
  min-width: 0; /* позволяет сжиматься под ширину карточки (карточка может быть уже 160px) */
}

.catalogQuality img,
.catalogQuality svg {
  width: 20px;
  height: 20px;
  -o-object-fit: contain;
  object-fit: contain;
}

.catalogQuality.green {
  border: 2px solid var(--color-accent-sand);
  color: var(--color-accent-sand);
}

.catalogQuality.yellow {
  border: 2px solid var(--color-accent);
  color: var(--color-accent);
  animation: 1s hoverWave infinite linear;
}

.catalogMarks {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  position: relative;
  top: auto;
  right: auto;
  margin-bottom: 4px;
  min-height: 24px; /* reserve space even when empty */
}

.catalogMarks img {
  width: auto;
  height: 24px;
  -o-object-fit: contain;
  object-fit: contain;
}

.catalogSale {
  position: absolute;
  top: 15px;
  right: 15px;
  padding: 8px 12px;
  border-radius: 0;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.75rem;
  line-height: 100%;
  color: var(--color-text-white);
  background: var(--color-sale-bg);
  z-index: 12;
  letter-spacing: -0.02em;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.catalogMore {
  margin-top: 48px;
  text-align: center;
}

/* Кнопки «Побачити все» — WCAG AA через токены */
.catalogMoreBtn,
.catalogBtns .catalogMoreBtn {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0;
  padding: 16px 32px;
  font-weight: 900;
  font-size: 1rem;
  line-height: 100%;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.catalogMoreBtn:hover,
.catalogBtns .catalogMoreBtn:hover {
  background: var(--color-accent-hover);
  color: var(--color-text-on-accent);
}

.catalogBtns .catalogMoreBtn {
  flex: 1;
  padding: 12px;
  font-size: 0.75rem;
  text-align: center;
}

.catalogFilter {
  flex: 0 0 auto;
  width: calc(25% - 18px);
  background: var(--color-bg-card);
  padding: 32px 24px;
  border-radius: 0;
  border: 1px solid var(--color-border);
  height: fit-content;
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), color 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), background-color 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.catalogFilter:hover {
  border-color: var(--color-accent);
  transform: translateY(-8px);
  box-shadow: none;
}

.catalogFilterSearch {
  position: relative;
  margin-bottom: 32px;
}

.catalogFilterSearch::after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M8.625%2015.75C12.56%2015.75%2015.75%2012.56%2015.75%208.625C15.75%204.68997%2012.56%201.5%208.625%201.5C4.68997%201.5%201.5%204.68997%201.5%208.625C1.5%2012.56%204.68997%2015.75%208.625%2015.75Z%22%20stroke%3D%22%23C78C47%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3Cpath%20d%3D%22M16.5%2016.5L15%2015%22%20stroke%3D%22%23C78C47%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E");
  width: 18px;
  height: 18px;
  background-size: contain;
  background-repeat: no-repeat;
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 20px;
  pointer-events: none;
}

.catalogFilter input[type="search"] {
  border: 1px solid var(--color-border);
  background: var(--color-bg-main);
  border-radius: 0;
  padding: 14px 20px;
  outline: none;
  width: 100%;
  padding-left: 52px;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.8125rem;
  line-height: 100%;
  color: var(--color-text-light);
  letter-spacing: -0.02em;
  transition: transform 0.3s ease, opacity 0.3s ease, color 0.3s ease, background-color 0.3s ease;
  box-shadow: none;
}

.catalogFilter input[type="search"]:focus {
  border-color: var(--color-accent);
  background: var(--color-bg-card);
}

.catalogFilter input[type="search"]::-moz-placeholder {
  color: var(--color-text-muted);
}

.catalogFilter input[type="search"]::placeholder {
  color: var(--color-text-muted);
}

.catalogFilterItem:not(:last-child) {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-border);
}

.catalogFilterTitle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-weight: 900;
  font-size: 0.875rem;
  line-height: 1.2;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  transition: transform 0.3s ease, opacity 0.3s ease, color 0.3s ease, background-color 0.3s ease;
  color: var(--color-text-light);
  position: relative;
}

.catalogFilterTitle::after {
  content: "";
  width: 12px;
  height: 8px;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23C78C47' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  flex-shrink: 0;
}

.catalogFilterTitle.active::after {
  transform: rotate(180deg);
}

.catalogFilterTitle:hover {
  color: var(--color-accent);
}

.catalogFilterContext {
  height: 0;
  opacity: 0;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 0;
  padding: 0 12px;
  margin-top: 0;
}

.catalogFilterTitle.active + .catalogFilterContext {
  margin-top: 16px;
  padding: 16px 12px;
}

.catalogFilterContext .checkbox-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.875rem;
  line-height: 100%;
  transition: color 0.2s ease;
  letter-spacing: -0.02em;
}

.catalogFilterContext .checkbox-item:hover {
  color: var(--color-accent);
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  cursor: pointer;
  position: relative;
  transition: opacity 0.2s ease;
}

.checkbox-item:hover {
  opacity: 0.9;
}

.checkbox-item input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkbox-item label {
  cursor: pointer;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.75rem;
  line-height: 1.2;
  color: var(--color-text-light);
  user-select: none;
  letter-spacing: -0.02em;
  transition: color 0.3s ease;
}

.checkbox-item:hover label {
  color: var(--color-accent);
}

.checkbox-item .checkmark {
  width: 20px;
  height: 20px;
  border: 1px solid var(--color-border);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  flex-shrink: 0;
  background-color: var(--color-bg-main);
}

.checkbox-item:hover .checkmark {
  border-color: var(--color-accent);
}

.checkbox-item input:checked + .checkmark {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

.checkbox-item input:checked + .checkmark::after {
  content: "";
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3L4.5 8.5L2 6' stroke='%232b211f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: block;
}

.catalogFilterOptions .custom-brand-list li {
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.75rem;
  line-height: 1.2;
  margin-bottom: 14px;
  transition: transform 0.3s ease, opacity 0.3s ease, color 0.3s ease, background-color 0.3s ease;
  display: flex;
  align-items: center;
  letter-spacing: 0.02em;
  color: var(--color-text-light);
}

.catalogFilterOptions .custom-brand-list li::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--color-accent);
  border-radius: 0;
  margin-right: 12px;
  transition: transform 0.3s ease, opacity 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}

.catalogFilterOptions .custom-brand-list li:hover {
  color: var(--color-accent);
  cursor: pointer;
  padding-left: 5px;
}

.catalogFilterOptions .custom-brand-list li:hover::before {
  transform: scale(1.5);
  box-shadow: none;
}

.catalogFilterName {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  cursor: pointer;
  transition: transform 0.3s ease, opacity 0.3s ease, color 0.3s ease, background-color 0.3s ease;
  color: var(--color-text-light);
  font-size: 0.875rem;
}

.catalogFilterName.active {
  margin-bottom: 16px;
  color: var(--color-accent);
}

.catalogFilterName.active + .catalogFilterWrapper {
  display: block;
}

.custom-price-slider #amount {
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.875rem;
  line-height: 100%;
  margin-bottom: 11px;
  text-align: center;
  color: var(--color-accent);
  letter-spacing: -0.02em;
}

.custom-price-slider #slider-range {
  height: 3px;
  background: var(--color-bg-main);
  border: 0;
  margin-bottom: 31px;
  box-shadow: none;
}

.custom-price-slider #slider-range .ui-slider-range {
  background: var(--color-accent);
}

.custom-price-slider #slider-range .noUi-handle {
  border: 2px solid var(--color-text-light);
  border-radius: 0;
  background: var(--color-accent);
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  box-shadow: none;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.custom-price-slider #slider-range .noUi-handle:hover {
  transform: translateY(-50%) scale(1.2);
}

.noUi-horizontal .noUi-handle {
  right: -10px;
}

.custom-price-slider #slider-range .noUi-handle::after,
.custom-price-slider #slider-range .noUi-handle::before {
  content: none;
}

.custom-price-slider .noUi-connect {
  background: var(--color-accent);
}

/* Price input fields styling */
.custom-price-slider input[type="text"],
.custom-price-slider input[type="number"],
.price-inputs input,
.wpc-filters-range-inputs input,
.noUi-tooltip {
  background: var(--color-bg-main) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
  color: var(--color-text-light) !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  font-size: 0.8125rem !important;
  padding: 8px 16px !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 0.3s ease;
  text-align: center;
  letter-spacing: -0.02em;
}

.custom-price-slider input:focus,
.price-inputs input:focus,
.wpc-filters-range-inputs input:focus {
  border-color: var(--color-accent) !important;
}

.price-inputs,
.wpc-filters-range-inputs {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.price-inputs input,
.wpc-filters-range-inputs input {
  flex: 1;
  min-width: 0;
  max-width: 120px;
}

.partners .partnersSlider {
  padding-left: 0;
  padding-right: 0;
}

.partnersNav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

.partners .partnersNav .swiper-button-prev,
.partners .partnersNav .swiper-button-next {
  position: relative !important;
  left: unset !important;
  right: unset !important;
  top: unset !important;
  transform: none !important;
  margin: 0;
}

.partners .partnersNav .swiper-button-prev svg,
.partners .partnersNav .swiper-button-next svg {
  width: 24px !important;
  height: 24px !important;
  flex-shrink: 0 !important;
  display: block !important;
}

.partnersSlider .swiper-slide {
  min-width: 0;
  box-sizing: border-box;
}

.partnersSlider .swiper-slide:first-child {
  margin-left: 8px;
}

.partnersItem {
  background: var(--color-bg-card);
  padding: 8px;
  border-radius: 0;
  border: 1px solid var(--color-border);
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), color 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), background-color 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 120px;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}

/* как у .catalogImage img — фикс. высота, ширина auto, не тянет глобальный img{width:100%} */
.partnersItem img {
  width: auto !important;
  max-width: 100%;
  height: 88px;
  object-fit: contain;
  display: block;
  filter: grayscale(1) brightness(0.7) contrast(1.2);
  opacity: 0.6;
  transition: transform 0.3s ease, opacity 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}

.partnersItem:hover img {
  filter: grayscale(0) brightness(1) contrast(1);
  opacity: 1;
}

.partnersItem:hover {
  border-color: var(--color-accent);
  transform: translateY(-5px);
  background: var(--color-bg-card-dark);
}

.bestBox {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 32px;
}

.bestItem {
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  width: calc(33.333% - 22px);
  background: var(--color-bg-card);
  border-radius: 0;
  padding: 64px 48px;
  border: 1px solid var(--color-border);
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), color 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), background-color 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Scroll-triggered: fade-in + slide-up при появлении в viewport */
.bestItem[data-scroll-animate] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.4s ease, box-shadow 0.4s ease;
}

.bestItem[data-scroll-animate].best-item-visible {
  opacity: 1;
  transform: translateY(0);
}

.bestItem[data-scroll-animate][data-animate-delay="1"] { transition-delay: 0.1s; }
.bestItem[data-scroll-animate][data-animate-delay="2"] { transition-delay: 0.2s; }

@media (prefers-reduced-motion: reduce) {
  .bestItem[data-scroll-animate] {
    opacity: 1;
    transform: none;
  }
}

.bestItem::before {
  display: none; /* Pattern disabled - too distracting */
}

.bestItem:hover::before {
  display: none;
}

.bestItem:hover {
  border-color: var(--color-accent);
  transform: translateY(-10px);
  box-shadow: none;
}

.bestItem:hover .bestInfo {
  transform: translateY(-10px);
}

.bestItem:hover .bestTitle {
  color: var(--color-accent);
}

.bestItem:hover .bestImage {
  transform: translate3d(12px, 0px, 0.3em) scale(1.2);
}

.bestItem:hover .bestImage img {
  transform: translate3d(12px, 0px, 0.5em) scale(1.2);
}

.bestItem:hover button {
  opacity: 1;
  visibility: visible;
  /* bottom: 80px; */
}

.bestTitle {
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 100%;
  margin-bottom: 12px;
  transition: transform 0.6s ease, opacity 0.6s ease, color 0.6s ease, background-color 0.6s ease;
}

.bestText {
  font-weight: 400;
  font-size: 1rem;
  line-height: 150%;
  max-width: 70%;
  margin-bottom: 12px;
}

.bestInfo {
  position: relative;
  z-index: 1;
  max-width: calc(100% - 200px);
  transition: transform 0.6s ease, opacity 0.6s ease, color 0.6s ease, background-color 0.6s ease;
}

.best button {
  /* opacity: 0;
	visibility: hidden; */
  transition: transform 0.6s ease, opacity 0.6s ease, color 0.6s ease, background-color 0.6s ease;
  transform: translateY(0);
  position: absolute;
  bottom: var(--spacing-2xl);
}

.bestImage {
  overflow: hidden;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform 0.8s ease, opacity 0.8s ease, color 0.8s ease, background-color 0.8s ease;
  position: absolute;
  right: -156px;
  bottom: -156px;
  border-radius: 0;
}

.bestImage img {
  transition: transform 0.8s ease, opacity 0.8s ease, color 0.8s ease, background-color 0.8s ease;
  width: 315px;
  height: 315px;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 0;
}

.blog {
  overflow: visible;
  z-index: 0;
  position: relative;
}

.blogSub {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0;
  margin-bottom: 60px;
}

.blogSub p {
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.875rem;
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

.blogTitle {
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(32px, 5vw, 64px);
  line-height: 1;
  margin-bottom: 24px;
  letter-spacing: -0.04em;
}

.blogText {
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.875rem;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--color-text-muted);
}

.blogSlider {
  border-radius: 0;
  padding-bottom: var(--spacing-2xl);
  overflow: visible;
}

/* Брутализм: компактные точки пагинации блога в стиле сайта */
.blog .swiper-pagination {
  gap: 8px;
}

.blog .swiper-pagination-bullet {
  display: inline-block;
  box-sizing: content-box;
  width: 32px;
  height: 3px;
  padding: 10px 0;
  margin: 0;
  background: var(--color-border);
  background-clip: content-box;
  border-radius: 0;
  opacity: 0.6;
  cursor: pointer;
  transition: background 0.3s ease, opacity 0.3s ease;
}

.blog .swiper-pagination-bullet:hover {
  opacity: 0.9;
}

.blog .swiper-pagination-bullet-active {
  background: var(--color-accent);
  background-clip: content-box;
  opacity: 1;
}

/* Брутализм: крупные панорамные кадры, острые углы, чёткие границы */
.blog .swiper-slide {
  border: 2px solid var(--color-border);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.blog .swiper-slide:hover {
  border-color: var(--color-accent);
  box-shadow: 8px 8px 0 0 rgba(199, 140, 71, 0.15);
}

.blogImage {
  position: relative;
  line-height: 0;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  aspect-ratio: 16/10;
}

.blogImage img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  display: block;
  border-radius: 0;
  transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

a.blogItem {
  display: flex;
  flex-direction: column;
  position: relative;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

/* Иконка-стрелка в углу — брутализм */
a.blogItem > svg {
  position: absolute;
  top: var(--spacing-lg);
  right: var(--spacing-xl);
  z-index: 2;
  color: var(--color-accent);
  opacity: 0.7;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

a.blogItem:hover > svg {
  opacity: 1;
  transform: translate(2px, -2px);
}

.blogInfo {
  position: relative;
  z-index: 1;
  padding: var(--spacing-lg) var(--spacing-xl);
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.blogName {
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(16px, 2vw, 22px);
  line-height: 1.2;
  margin-bottom: 0;
  letter-spacing: -0.02em;
  transition: color 0.3s ease;
  color: var(--color-text-light);
}

a.blogItem:hover .blogName {
  color: var(--color-accent);
}

.blogName a {
  color: var(--color-text-light);
  text-decoration: none;
}

.blogName a:hover {
  color: var(--color-accent);
}

.blog .swiper-slide:hover .blogImage img {
  transform: scale(1.05);
}

/* Фигуры брендбука — в углу справа секции/обёртки, появляются при наведении на секцию */
.blog .wrapper {
  position: relative;
}

.blogBgDraw {
  position: absolute;
  top: 0;
  right: 0;
  width: 320px;
  height: 320px;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.5s ease 1.4s;
}

/* Скошенные поля — премиум-качество: сдержанность, мягкость, утончённость */
.blogBgDraw-svg {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  opacity: 0.48;
  mix-blend-mode: multiply;
  filter: blur(0.2px);
  transform: rotate(-1deg);
  transform-origin: top right;
}

/* Показываем только активную композицию */
.blogBgDraw-comp { display: none; }
.blogBgDraw--waves .blogBgDraw-comp--waves,
.blogBgDraw--arcs .blogBgDraw-comp--arcs,
.blogBgDraw--circles .blogBgDraw-comp--circles,
.blogBgDraw--lines .blogBgDraw-comp--lines { display: block; }

.blogBgDraw-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.blogBgDraw-path {
  stroke-dasharray: 500;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Видимость при наведении */
.blog:hover .blogBgDraw,
.blog .wrapper:hover .blogBgDraw {
  opacity: 1;
  transition-delay: 0s;
}

.blog .swiper-slide {
  overflow: visible;
}

.blog .swiper-slide svg {
  position: absolute;
  top: var(--spacing-2xl);
  right: var(--spacing-2xl);
  z-index: 1;
}

.footer{
  flex-shrink: 0;
  position: relative;
  overflow: visible;
  isolation: isolate;
  padding-top: 48px;
}

.footer::before{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:120px;
  pointer-events:none;
  z-index:0;

  opacity:.24;
  mix-blend-mode: multiply;

  /* SVG с изогнутыми зубьями через feDisplacementMap */
  background-image:url("data:image/svg+xml,%3Csvg%20width='120'%20height='120'%20viewBox='0%200%20120%20120'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient%20id='dent'%20x1='0%25'%20y1='0%25'%20x2='0%25'%20y2='100%25'%3E%3Cstop%20offset='0%25'%20stop-color='black'%20stop-opacity='0.42'/%3E%3Cstop%20offset='100%25'%20stop-color='black'%20stop-opacity='0.08'/%3E%3C/linearGradient%3E%3Cfilter%20id='bend'%20x='-30%25'%20y='-30%25'%20width='160%25'%20height='160%25'%3E%3CfeGaussianBlur%20in='SourceGraphic'%20stdDeviation='1.5'%20result='b'/%3E%3CfeTurbulence%20type='turbulence'%20baseFrequency='0.12'%20numOctaves='1'%20seed='3'%20result='n'/%3E%3CfeDisplacementMap%20in='b'%20in2='n'%20scale='10'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cg%20transform='rotate(-90%2060%2060)'%20filter='url(%23bend)'%3E%3Cpath%20d='M-20%2020%20L50%2055%20L50%2085%20L-20%2050%20Z'%20fill='url(%23dent)'/%3E%3Cpath%20d='M140%2020%20L70%2055%20L70%2085%20L140%2050%20Z'%20fill='url(%23dent)'/%3E%3C/g%3E%3C/svg%3E");

  background-repeat: repeat-x;
  background-position: bottom center;
  background-size: 78px 120px;

  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 55%, transparent 100%);
          mask-image: linear-gradient(to top, #000 0%, #000 55%, transparent 100%);
}

.footerBox {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-2xl);
  margin-bottom: 48px;
}

.footerInfo {
  flex: 1;
}

.footerData {
  flex: 1;
  display: flex;
  justify-content: center;
}

.footerSocials {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  gap: 16px;
}

.footer .faqName svg {
  display: none;
}

@media (max-width: 992px) {
  .footerBox {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .footerData {
    justify-content: center;
    width: 100%;
  }
  .footerInfo {
    text-align: center;
  }
  .footerContacts ul li {
    justify-content: center;
  }
  .footer .faqName svg {
    display: block;
  }
}

.footerLogo {
  margin-bottom: 24px;
  text-align: left;
}

.footerLogo svg {
  width: 180px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.footerContacts ul li {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.8125rem;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--color-text-light);
}

.footerContacts ul li a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footerContacts ul li a:hover {
  color: var(--color-accent);
}

.footerData {
  display: flex;
  gap: 60px;
  justify-content: space-between;
}

.footerMenu h5 {
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.875rem;
  line-height: 1;
  margin-bottom: 32px;
  letter-spacing: 0.1em;
  color: var(--color-accent);
}

.footerMenu li {
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.75rem;
  line-height: 1.4;
  margin-bottom: 16px;
  letter-spacing: 0.02em;
}

.footerMenu li a {
  color: var(--color-text-muted);
  transition: transform 0.3s ease, opacity 0.3s ease, color 0.3s ease, background-color 0.3s ease;
  text-decoration: none;
}

.footerMenu li a:hover {
  color: var(--color-text-light);
  padding-left: 5px;
}

.footerSocials {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  overflow: visible;
}

.footerSocials a {
  overflow: visible;
}

.footerSocials div {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 0;
  width: 44px;
  height: 44px;
  transition: transform 0.15s cubic-bezier(0.2, 0, 0, 1), 
              background 0.15s ease, 
              border-color 0.15s ease,
              box-shadow 0.15s ease;
  will-change: transform;
}

.footerSocials div:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  transform: translate(-4px, -4px);
  box-shadow: 4px 4px 0px var(--color-accent);
}

.footerSocials div:active {
  transform: translate(0, 0);
  box-shadow: none;
  transition-duration: 0.05s;
}

.footerSocials div svg {
  width: 20px;
  height: 20px;
  fill: var(--color-text-light);
  transition: fill 0.3s ease;
}

.footerSocials div:hover svg {
  fill: var(--color-text-dark);
}

.footerSocials div:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.footerSocials div:hover svg path {
  fill: var(--color-text-dark);
}

.footerSocials div a {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
}

.footerCopyright {
  text-align: center;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.6875rem;
  line-height: 100%;
  color: var(--color-text-gray);
  letter-spacing: 0.05em;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}

.productOverview {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 80px;
  margin-top: 80px;
  margin-bottom: 120px;
}

.productImage {
  flex: 0 0 auto;
  width: calc(40% - 30px);
  background: var(--color-bg-card);
  padding: var(--spacing-2xl);
  border-radius: 0;
  border: 1px solid var(--color-border);
}

.productImage > img {
  width: 100%;
  height: 500px;
  -o-object-fit: contain;
  object-fit: contain;
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.4));
}

.flex-control-nav.flex-control-thumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  list-style-type: none;
  margin-top: 32px;
  padding: 0;
}

.flex-control-nav.flex-control-thumbs img {
  border-radius: 0;
  width: 80px;
  height: 80px;
  border: 1px solid var(--color-border);
  transition: transform 0.3s ease, opacity 0.3s ease, color 0.3s ease, background-color 0.3s ease;
  object-fit: cover;
}

.flex-control-nav.flex-control-thumbs img.flex-active {
  border-color: var(--color-accent);
  transform: scale(1.05);
}

.productInfo {
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: 60px;
  flex: 1;
}

.productInfoLeft {
  display: flex;
  flex-direction: column;
}

.productInfoLeft > a {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
  line-height: 1;
  color: var(--color-accent);
  text-decoration: none;
  letter-spacing: 0.05em;
  display: inline-block;
  margin-top: 24px;
}

.productTitle {
  font-weight: 900;
  font-size: clamp(28px, 3.5vw, 48px);
  line-height: 1.1;
  margin-bottom: 24px;
  letter-spacing: -0.03em;
  color: var(--color-text-light);
}

.productStock {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.6875rem;
  line-height: 1;
  color: var(--color-success);
  margin-bottom: 16px;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.productStock::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--color-success);
  border-radius: 0;
  box-shadow: none;
}

.productCart {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 24px;
  width: 100%;
  margin-bottom: 32px;
}

.productCart .cart {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.productCart .quantity {
  margin: 0 !important;
}

.productCart .quantity input {
  width: 100% !important;
  height: 50px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-main);
  color: var(--color-text-white);
  text-align: center;
  font-size: 1.125rem;
  font-weight: 700;
  border-radius: 0;
}

.single-product .productCart button {
  padding: 16px 24px;
  width: 100%;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  border-radius: 0;
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  border: 1px solid rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease;
  cursor: pointer;
}

.single-product .productCart button:hover {
  background: var(--color-accent-sand);
  transform: none;
  box-shadow: none;
}

.single-product .productCart button[name="add-to-cart"] {
  background: var(--color-accent);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--color-text-on-accent);
}

.single-product .productCart button[name="add-to-cart"]:hover {
  background: var(--color-accent-sand);
  color: var(--color-text-dark);
}

.productShorts {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 32px;
}

.productShorts a {
  color: inherit;
  text-decoration: none;
}

.productShorts div {
  background: rgba(255, 255, 255, 0.03);
  padding: 12px 20px;
  border-radius: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--color-border);
  transition: transform 0.3s ease, opacity 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}

.productShorts a:hover div {
  border-color: var(--color-accent);
  background: rgba(199, 140, 71, 0.1);
}

.productShorts div p:first-child {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-accent);
}

.productShorts div p:last-child {
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.8125rem;
  line-height: 1;
  color: var(--color-text-light);
}

.productDescription {
  margin-bottom: var(--spacing-2xl);
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  letter-spacing: -0.01em;
}

.getDesc {
  overflow: hidden;
  height: 120px;
}

.productDescription p {
  font-weight: 400;
  font-size: 1rem;
  line-height: 100%;
  margin-bottom: 12px;
}

.productDescription ul li {
  list-style-type: disc;
  list-style-position: inside;
}

.productDelivery {
  background: var(--color-bg-card);
  padding: 32px;
  border-radius: 0;
  border: 1px solid var(--color-border);
}

.productDeliveryItem:not(:last-of-type) {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-border);
}

.productDeliveryName {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.875rem;
  line-height: 1.2;
  margin-bottom: 12px;
  color: var(--color-accent);
  letter-spacing: -0.02em;
}

.productDeliveryName svg {
  width: 24px;
  height: 24px;
}

.productDeliveryText ul li {
  font-weight: 400;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--color-text-muted);
  list-style-type: none;
  padding-left: 0;
  position: relative;
}

.productDeliveryText ul li::before {
  display: none;
}

.productDeliveryText ul li {
  font-weight: 400;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--color-text-muted);
  list-style-type: none;
  padding-left: 0;
  position: relative;
}

.productDeliveryText ul li::before {
  display: none;
}

.productSpecification {
  display: flex;
  justify-content: space-between;
  gap: 80px;
  margin-bottom: 120px;
}

.productDescription h2 {
  font-weight: 900;
  text-transform: uppercase;
  font-size: 1.5rem;
  line-height: 1.2;
  margin-bottom: 24px;
  letter-spacing: -0.02em;
  color: var(--color-text-light);
}

.productDescription p {
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.875rem;
  line-height: 1.6;
  margin-bottom: 20px;
  color: var(--color-text-muted);
  letter-spacing: -0.02em;
}

.productDescription ul li {
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.8125rem;
  line-height: 1.6;
  margin-bottom: 12px;
  color: var(--color-text-muted);
  letter-spacing: -0.02em;
  list-style-type: none;
  padding-left: 20px;
  position: relative;
}

.productDescription ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  background: var(--color-accent);
  border-radius: 0;
}

.productSubbuy {
  flex: 0 0 auto;
  width: calc(34% - 32px);
  background: var(--color-bg-card);
  padding: 32px;
  border-radius: 0;
  border: 1px solid var(--color-border);
}

.productSubbuyItem {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.8125rem;
  line-height: 1.2;
  margin-bottom: 16px;
  color: var(--color-text-light);
  letter-spacing: -0.02em;
}

.productSubbuyItem:last-of-type {
  gap: 32px;
  margin-bottom: 0;
}

.productSubbuyItem:last-of-type span {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
}

.productSubbuyItem img {
  width: 20px;
  height: 20px;
}

.productSubbuy button {
  margin-top: 32px;
}

.productPrice {
  font-weight: 900;
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
  color: var(--color-text-light);
}

.productAttr {
  margin-bottom: 80px;
}

.productAttr h2 {
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1;
  margin-bottom: 32px;
  color: var(--color-text-light);
}

.productTable {
  width: 100%;
  border-collapse: collapse;
}

.productTable table {
  width: 100%;
  border: 1px solid var(--color-border);
}

.productTable th {
  background: rgba(255, 255, 255, 0.05);
  padding: 16px;
  text-align: left;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
  color: var(--color-accent);
  border-bottom: 1px solid var(--color-border);
}

.productTable td {
  padding: 16px;
  font-size: 0.875rem;
  color: var(--color-text-light);
  border-bottom: 1px solid var(--color-border);
}

.productTable tr:last-child td {
  border-bottom: none;
  margin-bottom: 48px;
  letter-spacing: -0.04em;
  color: var(--color-text-light);
}

.productTable {
  background: var(--color-bg-card);
  border-radius: 0;
  width: 100%;
  padding: var(--spacing-2xl);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border);
}

.productTable table {
  width: 100%;
  border-collapse: collapse;
}

.productTable td,
.productTable th {
  padding: 20px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.productTable th {
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.875rem;
  line-height: 1.2;
  color: var(--color-accent);
  letter-spacing: 0.05em;
}

.productTable td {
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--color-text-muted);
  letter-spacing: -0.02em;
}

/* Tooltip для атрибутов таблицы с текстом в скобках */
.productTable th.has-tooltip {
  position: relative;
  cursor: help;
  border-bottom: 2px dotted var(--color-accent);
}

.productTable th.has-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 100%;
  margin-bottom: 8px;
  padding: 12px 16px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-accent);
  border-radius: 0;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: none;
  white-space: normal;
  max-width: 240px;
  min-width: 140px;
  line-height: 1.4;
  color: var(--color-text-light);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 100;
  transition: opacity 0.2s, visibility 0.2s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.productTable th.has-tooltip:hover::after {
  opacity: 1;
  visibility: visible;
}

.related.products {
  padding-bottom: 100px;
}

.related.products .catalogBoxPage {
  width: 100%;
}

.related.products .catalogBoxPage .catalogItemPage {
  width: calc(25% - 32px);
  flex: 1 0 auto;
  background-color: var(--color-bg-card);
  background-image: var(--field-pattern-card);
  background-size: var(--field-pattern-size);
}

.brandTitle {
  font-weight: 700;
  font-size: 2.25rem;
  line-height: 150%;
  margin-bottom: 12px;
  text-align: center;
}

.brandDesc {
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 150%;
  text-align: center;
}

.brandImage {
  margin-top: 80px;
  margin-bottom: 80px;
  line-height: 0;
  display: flex;
  justify-content: center;
}

.brandImage img {
  border-radius: 0;
  object-fit: contain;
  /* height: 100%; */
}

.brandHistory {
  margin-top: 60px;
}

.brandDescription {
  margin-bottom: 60px;
  max-height: 200px;
  overflow: hidden;
}

.brandDescription p {
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.875rem;
  line-height: 1.6;
  margin-bottom: 24px;
  color: var(--color-text-muted);
  letter-spacing: -0.02em;
}

.brandDescriptionItem {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-2xl);
  margin-bottom: 60px;
  background: var(--color-bg-card);
  padding: 32px;
  border-radius: 0;
  border: 1px solid var(--color-border);
}

.brandDescriptionItem div:first-child {
  font-weight: 900;
  text-transform: uppercase;
  font-size: 1.5rem;
  line-height: 1.2;
  flex: 0 0 auto;
  width: calc(30% - 20px);
  color: var(--color-accent);
  letter-spacing: -0.04em;
}

.brandDescriptionItem div:last-child {
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  letter-spacing: -0.02em;
}

.brandMore {
  color: var(--color-accent);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.875rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  margin-bottom: 60px;
  display: inline-block;
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 4px;
  transition: transform 0.3s ease, opacity 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}

.brandMore:hover {
  color: var(--color-text-light);
  border-color: var(--color-text-light);
}

.brandVideo {
  position: relative;
  line-height: 0;
  border-radius: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.brandVideo::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  transition: background 0.4s ease;
}

.brandVideo:hover::after {
  background: rgba(0, 0, 0, 0.2);
}

.brandVideo img {
  width: 100%;
  height: 510px;
  -o-object-fit: cover;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.brandVideo:hover img {
  transform: scale(1.05);
}

.brandVideo svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  width: 80px;
  height: 80px;
}

.brandVideo:hover svg {
  transform: translate(-50%, -50%) scale(1.2);
  filter: drop-shadow(0 0 20px var(--color-accent));
}

.woocommerce-cart .wc-block-product-new {
  margin-top: 80px;
}

.wc-block-grid__products .wc-block-grid__product-image img {
  height: 300px !important;
}

/* .wc-block-grid__products {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
} */

.ui-slider-horizontal .ui-slider-handle:first-child {
  margin-left: 0 !important;
}

.custom-price-slider {
  padding: 12px;
}

.single-post .header {
  margin-bottom: 48px;
}

article {
  margin-bottom: 60px;
}

article ul {
  margin-bottom: 20px;
}

article li {
  list-style-type: disc;
  list-style-position: inside;
}

article p {
  margin-bottom: 20px;
}

.singleTitle {
  text-align: center;
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(32px, 6vw, 64px);
  line-height: 1.1;
  margin-bottom: 48px;
  letter-spacing: -0.04em;
  color: var(--color-text-light);
}

.singleImage {
  margin-bottom: 60px;
  height: 600px;
  border-radius: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.singleImage img {
  object-fit: cover;
  border-radius: 0;
  height: 100%;
  width: 100%;
}

.singleContent {
  font-weight: 900;
  text-transform: uppercase;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  letter-spacing: -0.02em;
}

.error404error {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 100px 0;
}

.error404error svg {
  width: 100%;
  max-width: 600px;
  margin-bottom: 48px;
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.5));
}

.error404error div {
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(24px, 4vw, 48px);
  line-height: 1;
  margin-bottom: 48px;
  letter-spacing: -0.04em;
  color: var(--color-text-light);
}

/* ═══════════════════════════════════════════════════════
   CART PAGE — Elegant Warm Brutalism
   ═══════════════════════════════════════════════════════ */

/* Zero border-radius — kill ALL WC Blocks rounded corners */
.woocommerce-cart *,
.woocommerce-checkout * {
  border-radius: 0 !important;
}

/* Container — full-width with inner constraint */
.woocommerce-cart #content,
.woocommerce-checkout #content {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 48px;
  padding-right: 48px;
  width: 100%;
}

/* Page title */
.woocommerce-cart .entry-header {
  margin-bottom: 48px;
  padding-bottom: 24px;
  border-bottom: 2px solid var(--color-border);
}

.woocommerce-cart .entry-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--color-text-white);
  text-align: left;
}

/* ── Full width chain: force every ancestor to be 100% ── */
.woocommerce-cart #page-wrapper,
.woocommerce-cart #content,
.woocommerce-cart #main,
.woocommerce-cart article,
.woocommerce-cart .entry-content {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ── Disable CSS Container Queries by resetting container-type ── */
.woocommerce-cart .wp-block-woocommerce-cart {
  container-type: normal !important;
  max-width: 100%;
  width: 100%;
}

.woocommerce-cart .wc-block-cart.is-mobile .wc-block-components-sidebar-layout,
.woocommerce-cart .wc-block-cart .wc-block-components-sidebar-layout {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 48px;
  align-items: flex-start;
}

.woocommerce-cart .wc-block-cart.is-mobile .wc-block-components-sidebar-layout > .wc-block-components-main,
.woocommerce-cart .wc-block-cart .wc-block-components-sidebar-layout > .wc-block-components-main {
  flex: 1 1 0 !important;
  min-width: 0;
  max-width: none !important;
}

.woocommerce-cart .wc-block-cart.is-mobile .wc-block-components-sidebar-layout > .wc-block-components-sidebar,
.woocommerce-cart .wc-block-cart .wc-block-components-sidebar-layout > .wc-block-components-sidebar {
  flex: 0 0 400px !important;
  min-width: 0;
  max-width: none !important;
  position: sticky;
  top: 24px;
}

/* Override is-mobile stacking for cart items table */
.woocommerce-cart .wc-block-cart.is-mobile .wc-block-cart-items .wc-block-cart-items__row {
  display: table-row !important;
}

.woocommerce-cart .wc-block-cart.is-mobile .wc-block-cart-items .wc-block-cart-items__row td {
  display: table-cell !important;
}

.woocommerce-cart .wc-block-cart.is-mobile .wc-block-cart-items thead {
  display: table-header-group !important;
}

/* ── Sidebar (order summary) ── */
.wc-block-cart .wc-block-components-sidebar {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  padding: 32px !important;
  border-radius: 0;
}

/* Sidebar title "Cart totals" */
.wc-block-cart .wc-block-cart__totals-title {
  display: block !important;
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--color-text-white);
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border);
}

/* ── Cart items table ── */
.wc-block-cart .wc-block-cart-items {
  border-collapse: collapse;
  width: 100%;
}

.wc-block-cart .wc-block-cart-items th {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border);
}

.wc-block-cart .wc-block-cart-items .wc-block-cart-items__row {
  border-bottom: 1px solid var(--color-border);
}

.wc-block-cart .wc-block-cart-items .wc-block-cart-items__row td {
  padding-top: 24px;
  padding-bottom: 24px;
  vertical-align: top;
}

/* ── Product image ── */
.wc-block-cart .wc-block-cart-item__image {
  width: 100px;
}

.wc-block-cart .wc-block-cart-item__image img {
  border: 1px solid var(--color-border);
  border-radius: 0;
  background: var(--color-bg-main);
  object-fit: contain;
}

/* ── Product name ── */
.woocommerce-cart .wc-block-components-product-name {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.9375rem;
  letter-spacing: -0.02em;
  color: var(--color-text-white);
  text-decoration: none;
  display: block;
  margin-bottom: 8px;
}

.woocommerce-cart .wc-block-components-product-name:hover {
  color: var(--color-accent);
}

/* ── Product metadata ── */
.woocommerce-cart .wc-block-components-product-metadata__description {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* ── Prices ── */
.woocommerce-cart .wc-block-components-formatted-money-amount {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800;
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--color-text-white);
}

.woocommerce-cart .wc-block-cart-item__prices {
  margin-bottom: 8px;
}

/* Smaller price in line items */
.woocommerce-cart .wc-block-cart-item__product .wc-block-components-formatted-money-amount {
  font-size: 0.9375rem;
}

/* ── Quantity selector ── */
.woocommerce-cart .wc-block-components-quantity-selector {
  background: var(--color-bg-main);
  border: 1px solid var(--color-border);
  border-radius: 0;
  padding: 0;
  margin-bottom: 16px !important;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
}

.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700 !important;
  font-size: 0.9375rem !important;
  color: var(--color-text-white);
  background: transparent;
  border: none;
  width: 48px;
  text-align: center;
}

.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  width: 40px;
  height: 40px;
  cursor: pointer;
  font-size: 1.125rem;
  transition: color 0.15s, background 0.15s;
}

.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:hover {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
}

/* ── Remove item button ── */
.woocommerce-cart button.wc-block-cart-item__remove-link {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1 !important;
  color: var(--color-text-muted) !important;
  background: none !important;
  padding: 8px 0 !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  border: none;
  cursor: pointer;
  transition: color 0.15s;
}

.woocommerce-cart button.wc-block-cart-item__remove-link:hover {
  color: #e74c3c !important;
}

.woocommerce-cart button.wc-block-cart-item__remove-link::after {
  display: none;
}

/* ── Coupon / Discount panel ── */
.wc-block-components-panel__button {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-text-white);
  border: none;
  background: none;
  padding: 16px 0;
  cursor: pointer;
}

.wc-block-components-panel__button svg {
  color: var(--color-text-muted);
}

/* Coupon input row */
.wc-block-components-totals-coupon__content {
  display: flex;
  gap: 0;
  align-items: stretch;
}

.wc-block-components-totals-coupon__content .wc-block-components-text-input {
  flex: 1;
  position: relative;
}

/* Coupon input — respect WC floating label system */
.wc-block-components-totals-coupon__content .wc-block-components-text-input input[type="text"],
#wc-block-components-totals-coupon__input-coupon {
  background: var(--color-bg-main) !important;
  border: 1px solid var(--color-border) !important;
  border-right: none !important;
  border-radius: 0 !important;
  color: var(--color-text-white) !important;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem !important;
  height: 50px !important;
  padding: 16px 12px !important;
  box-sizing: border-box;
  outline: none;
  -webkit-appearance: none;
  width: 100%;
}

/* When input is active (has value or focused), push text down for floating label */
.wc-block-components-totals-coupon__content .wc-block-components-text-input.is-active input[type="text"] {
  padding: 24px 12px 8px !important;
}

#wc-block-components-totals-coupon__input-coupon:focus,
.wc-block-components-totals-coupon__content input:focus {
  border-color: var(--color-accent) !important;
  box-shadow: none !important;
}

/* Floating label styling */
.wc-block-components-totals-coupon__content .wc-block-components-text-input label,
.wc-block-components-totals-coupon__content label {
  color: var(--color-text-muted) !important;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem !important;
  left: 12px !important;
  top: 25px !important;
  transform: translateY(-50%) !important;
  pointer-events: none;
}

/* Label shrunk when input has focus or value */
.wc-block-components-totals-coupon__content .wc-block-components-text-input.is-active label {
  top: 6px !important;
  transform: scale(0.75) !important;
  transform-origin: top left;
}

.wc-block-components-totals-coupon__button {
  background: var(--color-accent) !important;
  color: var(--color-text-on-accent) !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 14px 24px;
  height: 50px;
  box-sizing: border-box;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

.wc-block-components-totals-coupon__button:hover {
  background: var(--color-accent-hover) !important;
}

/* ── Order summary (sidebar) totals ── */
.wc-block-cart .wc-block-components-totals-wrapper,
.woocommerce-cart .wc-block-components-totals-wrapper {
  border-color: var(--color-border) !important;
  padding: 12px 0 !important;
}

.woocommerce-cart .wc-block-components-totals-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.woocommerce-cart .wc-block-components-totals-item__label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.woocommerce-cart .wc-block-components-totals-item__value {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  color: var(--color-text-white);
}

/* Footer total row — big accent price */
.woocommerce-cart .wc-block-components-totals-footer-item {
  padding-top: 16px !important;
  margin-top: 8px;
  border-top: 2px solid var(--color-border) !important;
}

.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 1.125rem;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--color-text-white);
}

.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--color-accent);
}

/* Order summary heading block */
.woocommerce-cart .wp-block-woocommerce-cart-order-summary-heading-block {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--color-text-white);
  margin-bottom: 16px;
}

/* Order summary block inner spacing */
.woocommerce-cart .wp-block-woocommerce-cart-order-summary-block {
  border: none !important;
  margin-bottom: 0 !important;
}

.woocommerce-cart .wp-block-woocommerce-cart-order-summary-totals-block {
  margin-top: 8px;
}

/* ── Proceed to Checkout button ── */
.woocommerce-cart .wc-block-cart__submit-container a,
.woocommerce-cart .wc-block-cart__submit-container button,
.woocommerce-cart .wp-block-woocommerce-proceed-to-checkout-block a,
.woocommerce-cart .wp-block-woocommerce-proceed-to-checkout-block button,
.woocommerce-cart .wc-block-cart__submit-button {
  display: block;
  width: 100%;
  background: var(--color-accent) !important;
  color: var(--color-text-on-accent) !important;
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 0.9375rem;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 20px 32px;
  cursor: pointer;
  transition: background 0.15s;
}

.woocommerce-cart .wc-block-cart__submit-container a:hover,
.woocommerce-cart .wc-block-cart__submit-container button:hover,
.woocommerce-cart .wp-block-woocommerce-proceed-to-checkout-block a:hover,
.woocommerce-cart .wp-block-woocommerce-proceed-to-checkout-block button:hover,
.woocommerce-cart .wc-block-cart__submit-button:hover {
  background: var(--color-accent-hover) !important;
}

.woocommerce-cart .wc-block-cart__submit.wp-block-woocommerce-proceed-to-checkout-block,
.woocommerce-cart .wp-block-woocommerce-proceed-to-checkout-block {
  margin-top: 24px;
  margin-bottom: 0;
}

/* ── Text inputs ── */
.woocommerce-cart .wc-block-components-text-input input[type="text"] {
  background: var(--color-bg-main);
  border: 1px solid var(--color-border);
  border-radius: 0;
  color: var(--color-text-white);
  font-family: 'Space Grotesk', sans-serif;
  padding: 12px 16px;
}

.woocommerce-cart .wc-block-components-text-input input[type="text"] + label,
.woocommerce-cart .wc-blocks-components-select .wc-blocks-components-select__select + label {
  color: var(--color-text-muted);
  font-family: 'Space Grotesk', sans-serif;
}

/* ── Empty cart ── */
.woocommerce-cart .wc-block-cart__empty-cart__title {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  text-transform: uppercase;
  color: var(--color-text-white);
  margin-bottom: 16px;
}

.woocommerce-cart .wc-block-cart__empty-cart__title + p {
  color: var(--color-text-muted);
  font-size: 1rem;
  margin-bottom: 32px;
}

/* Empty cart icon */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
  filter: invert(1) brightness(0.7) sepia(1) hue-rotate(0deg) saturate(3);
  opacity: 0.6;
}

/* Empty cart "browse shop" link */
.woocommerce-cart .wp-block-woocommerce-empty-cart-block a.wp-block-button__link,
.woocommerce-cart .wc-block-cart__empty-cart a {
  background: var(--color-accent) !important;
  color: var(--color-text-on-accent) !important;
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 0 !important;
  padding: 16px 32px;
  text-decoration: none;
  transition: background 0.15s;
}
.woocommerce-cart .wp-block-woocommerce-empty-cart-block a.wp-block-button__link:hover {
  background: var(--color-accent-hover) !important;
}

/* Empty cart separator */
.wp-block-woocommerce-empty-cart-block hr {
  border-color: var(--color-border) !important;
  opacity: 0.5;
  margin: 32px 0;
}

/* Empty cart "Новинки" heading */
.wp-block-woocommerce-empty-cart-block > .wp-block-heading {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--color-text-white);
  margin-bottom: 24px;
}

/* ── Empty cart product grid ── */
.wp-block-woocommerce-empty-cart-block .wc-block-grid {
  font-size: 1rem !important;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
  flex-wrap: unset !important;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border) !important;
  border-bottom: 1px solid var(--color-border) !important;
  padding: 16px;
  transition: border-color 0.2s;
  max-width: none !important;
  flex: unset !important;
  text-align: left;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product:hover {
  border-color: var(--color-accent) !important;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-link {
  text-decoration: none;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image {
  width: 100%;
  aspect-ratio: 1;
  background: var(--color-bg-main);
  border: 1px solid var(--color-border);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: contain;
  padding: 16px;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--color-text-white);
  text-decoration: none;
  display: block;
  margin-bottom: 8px;
  line-height: 1.3;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  color: var(--color-text-white);
  margin-bottom: 12px;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price del {
  color: var(--color-sale);
  opacity: 0.7;
  font-size: 0.8125rem;
  font-weight: 600;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price ins {
  text-decoration: none;
}

.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart {
  white-space: normal !important;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .wp-block-button__link,
.wp-block-woocommerce-empty-cart-block .add_to_cart_button {
  background: var(--color-accent) !important;
  color: var(--color-text-on-accent) !important;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 0.75rem !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: none !important;
  border-radius: 0 !important;
  padding: 12px 16px !important;
  width: 100%;
  text-align: center;
  text-decoration: none;
  display: block !important;
  white-space: normal !important;
  word-break: normal !important;
  transition: background 0.15s;
}
.wp-block-woocommerce-empty-cart-block .add_to_cart_button:hover {
  background: var(--color-accent-hover) !important;
}

@media (max-width: 768px) {
  .wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .wp-block-woocommerce-empty-cart-block .wc-block-grid__product {
    max-width: none !important;
    flex: unset !important;
  }
}

/* ── Cross-sells block ── */
.woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block {
  margin-top: 48px;
  padding-top: 48px;
  border-top: 1px solid var(--color-border);
}

.woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block h2 {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--color-text-white);
  margin-bottom: 24px;
}

/* Cross-sell product cards */
.woocommerce-cart .wc-block-grid__product {
  border: 1px solid var(--color-border);
  padding: 16px;
  transition: border-color 0.15s;
}

.woocommerce-cart .wc-block-grid__product:hover {
  border-color: var(--color-accent);
}

.woocommerce-cart .wc-block-grid__product-image img {
  border-radius: 0;
  object-fit: contain;
  background: var(--color-bg-main);
}

.woocommerce-cart .wc-block-grid__product-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--color-text-white);
}

.woocommerce-cart .wc-block-grid__product-price {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  color: var(--color-accent);
}

.woocommerce-cart .wc-block-grid__product .wp-block-button__link {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  border-radius: 0;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 10px 20px;
}

/* ── Cart item total column (right-aligned price) ── */
.wc-block-cart .wc-block-cart-item__total .wc-block-components-formatted-money-amount {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800;
  font-size: 1.125rem;
  color: var(--color-accent);
}

/* ── Responsive: single column on actual mobile ── */
@media (max-width: 768px) {
  .woocommerce-cart #content,
  .woocommerce-checkout #content {
    padding-left: 16px;
    padding-right: 16px;
  }
  .woocommerce-cart .wc-block-cart .wc-block-components-sidebar-layout,
  .woocommerce-cart .wc-block-cart.is-mobile .wc-block-components-sidebar-layout {
    flex-direction: column !important;
    flex-wrap: wrap !important;
  }
  .woocommerce-cart .wc-block-cart .wc-block-components-sidebar-layout > .wc-block-components-sidebar,
  .woocommerce-cart .wc-block-cart.is-mobile .wc-block-components-sidebar-layout > .wc-block-components-sidebar {
    flex: 1 1 100% !important;
    position: static;
  }
  .woocommerce-cart .wc-block-cart.is-mobile .wc-block-cart-items .wc-block-cart-items__row {
    display: flex !important;
    flex-wrap: wrap;
    gap: 16px;
  }
  .woocommerce-cart .wc-block-cart.is-mobile .wc-block-cart-items .wc-block-cart-items__row td {
    display: block !important;
  }
  .woocommerce-cart .wc-block-cart.is-mobile .wc-block-cart-items thead {
    display: none !important;
  }
}

/* .wc-block-components-text-input input,
.wc-blocks-components-select .wc-blocks-components-select__select {
	background-color: var(--color-bg-card) !important;
	border-radius: 0 !important;
	color: var(--color-text-white) !important;
} */
/* стили для того чтобы фон не исчезал при автоинпуте */
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-blocks-components-select .wc-blocks-components-select__select {
  background-color: var(--color-bg-card) !important;
  color: var(--color-text-white) !important;
  border-radius: 0 !important;
  border: 1px solid transparent !important;
  background-clip: padding-box;
  -webkit-background-clip: padding-box;
  appearance: none;
  -webkit-appearance: none;
  overflow: hidden; /* чтобы inset-тень повторяла скругление */
}

/* Chrome / Safari / Edge */
.wc-block-components-text-input input:-webkit-autofill,
.wc-block-components-text-input input:-webkit-autofill:hover,
.wc-block-components-text-input input:-webkit-autofill:focus,
.wc-blocks-components-select
  .wc-blocks-components-select__select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--color-bg-card) inset !important;
  box-shadow: 0 0 0 1000px var(--color-bg-card) inset !important;
  -webkit-text-fill-color: var(--color-text-white) !important;
  border-radius: 0 !important;
  border: 1px solid transparent !important;
  transition:
    background-color 99999s ease-out,
    color 99999s ease-out;
}

/* Современный :autofill */
.wc-block-components-text-input input:autofill,
.wc-blocks-components-select .wc-blocks-components-select__select:autofill {
  box-shadow: 0 0 0 1000px var(--color-bg-card) inset !important;
  color: var(--color-text-white) !important;
}

/* Firefox */
.wc-block-components-text-input input:-moz-autofill,
.wc-blocks-components-select
  .wc-blocks-components-select__select:-moz-autofill {
  box-shadow: 0 0 0 1000px var(--color-bg-card) inset !important;
  color: var(--color-text-white) !important;
  border-radius: 0 !important;
  border: 1px solid transparent !important;
}

.wc-blocks-components-select__container {
  border-radius: 0 !important;
}

.wc-block-components-text-input input + label,
.wc-blocks-components-select .wc-blocks-components-select__select,
.wc-blocks-components-select__container label {
  color: var(--color-text-white) !important;
}

.wc-block-components-text-input input + label:focus {
  color: #000 !important;
}

/* База: всегда тёмный фон + белый текст */
.wc-block-checkout__add-note .wc-block-components-textarea,
.wc-block-checkout__add-note .wc-block-components-textarea__input,
.wc-block-checkout__add-note .wc-block-components-textarea textarea {
  background-color: var(--color-bg-card) !important;
  color: var(--color-text-white) !important;
  border-radius: 0 !important;
  border: 1px solid transparent !important;
  background-clip: padding-box;
  -webkit-background-clip: padding-box;
  overflow: hidden; /* чтобы inset-тень повторяла скругление */
}

/* Placeholder приглушённый */
.wc-block-checkout__add-note
  .wc-block-components-textarea
  textarea::placeholder {
  color: var(--color-text-muted);
}

/* Фокус: не меняем фон, убираем возможные тени */
.wc-block-checkout__add-note .wc-block-components-textarea:focus-within,
.wc-block-checkout__add-note .wc-block-components-textarea textarea:focus {
  background-color: var(--color-bg-card) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Chrome / Safari / Edge — автофилл */
.wc-block-checkout__add-note
  .wc-block-components-textarea
  textarea:-webkit-autofill,
.wc-block-checkout__add-note
  .wc-block-components-textarea
  textarea:-webkit-autofill:hover,
.wc-block-checkout__add-note
  .wc-block-components-textarea
  textarea:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--color-bg-card) inset !important;
  box-shadow: 0 0 0 1000px var(--color-bg-card) inset !important;
  -webkit-text-fill-color: var(--color-text-white) !important;
  border-radius: 0 !important;
  border: 1px solid transparent !important;
  transition:
    background-color 99999s ease-out,
    color 99999s ease-out;
}

/* Современный :autofill */
.wc-block-checkout__add-note .wc-block-components-textarea textarea:autofill {
  box-shadow: 0 0 0 1000px var(--color-bg-card) inset !important;
  color: var(--color-text-white) !important;
}

/* Firefox — автофилл */
.wc-block-checkout__add-note
  .wc-block-components-textarea
  textarea:-moz-autofill {
  box-shadow: 0 0 0 1000px var(--color-bg-card) inset !important;
  color: var(--color-text-white) !important;
  border-radius: 0 !important;
  border: 1px solid transparent !important;
}

/* Подсказываем браузерам, что тёмная тема — чтобы не "осветляли" поля */
.wc-block-checkout {
  color-scheme: dark;
}

.entry-header {
  font-weight: 700;
  font-size: 2.25rem;
  line-height: 150%;
  margin-bottom: 32px;
}

.wc-block-checkout__guest-checkout-notice {
  font-weight: 400;
  font-size: 1rem;
  line-height: 150%;
}

.wc-block-components-checkout-step__description {
  margin-bottom: 12px;
}

.wc-block-components-address-form__address_2-toggle {
  margin-bottom: 4px;
}

.wc-block-components-notice-banner {
  margin-top: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   CHECKOUT PAGE — Elegant Warm Brutalism
   Mirrors cart page styling. Manrope + Space Grotesk.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Disable container queries (WC Blocks switches to mobile layout) ── */
.woocommerce-checkout .wp-block-woocommerce-checkout {
  container-type: normal !important;
  max-width: 100%;
  width: 100%;
}

/* ── Two-column layout: form | sidebar ── */
.woocommerce-checkout .wc-block-components-sidebar-layout {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 48px;
  align-items: flex-start;
  container-type: normal !important;
}
.woocommerce-checkout .wc-block-components-sidebar-layout > .wc-block-components-main {
  flex: 1 1 0 !important;
  min-width: 0;
  max-width: none !important;
}
.woocommerce-checkout .wc-block-components-sidebar-layout > .wc-block-components-sidebar {
  flex: 0 0 400px !important;
  min-width: 0;
  max-width: none !important;
  position: sticky;
  top: 24px;
}

/* ── Sidebar card ── */
.woocommerce-checkout .wc-block-components-sidebar {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  padding: 32px !important;
}

/* ── Page title ── */
.woocommerce-checkout h1 {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--color-text-white);
  margin-bottom: 32px;
}

/* ── Step headings (Контактна інформація, Адреса доставки, etc.) ── */
.woocommerce-checkout .wc-block-components-checkout-step__heading {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--color-text-white);
}

/* ── Step content ── */
.woocommerce-checkout .wc-block-components-checkout-step__description,
.woocommerce-checkout .wc-block-components-checkout-step__content {
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

/* ── Address card ── */
.woocommerce-checkout .wc-block-components-address-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border) !important;
  color: var(--color-text-white);
}
.woocommerce-checkout .wc-block-components-address-card__address-section--secondary {
  color: var(--color-text-muted) !important;
}
.woocommerce-checkout .wc-block-components-address-card__edit {
  color: var(--color-accent) !important;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none !important;
  cursor: pointer;
}

/* ── Shipping method ── */
.woocommerce-checkout .wc-block-components-radio-control__label {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  color: var(--color-text-white);
}
.woocommerce-checkout .wc-block-components-radio-control__secondary-label {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  color: var(--color-accent);
}

/* ── Payment method ── */
.woocommerce-checkout .wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option--checked {
  border-color: var(--color-accent) !important;
  background: transparent !important;
}
.woocommerce-checkout .wc-block-components-payment-method-label {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
}
.woocommerce-checkout .wc-block-components-checkout-step__content .payment_box {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* ── Place order button ── */
.woocommerce-checkout .wc-block-components-checkout-place-order-button {
  background: var(--color-accent) !important;
  color: var(--color-text-on-accent) !important;
  border: none !important;
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 18px 32px;
  transition: background 0.15s;
}
.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover {
  background: var(--color-accent-hover) !important;
}

/* ── Return to cart link ── */
.woocommerce-checkout .wc-block-components-checkout-return-to-cart-button {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--color-text-muted) !important;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.woocommerce-checkout .wc-block-components-checkout-return-to-cart-button:hover {
  color: var(--color-accent) !important;
}

/* ── Terms & conditions text ── */
.woocommerce-checkout .wc-block-checkout__terms {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.woocommerce-checkout .wc-block-checkout__terms a {
  color: var(--color-accent);
}

/* ── Order note textarea ── */
.woocommerce-checkout .wc-block-components-textarea {
  background: var(--color-bg-main) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text-white) !important;
  font-family: 'Manrope', sans-serif;
}

/* ═══ SIDEBAR: Order Summary ═══ */

/* Summary block container */
.wp-block-woocommerce-checkout-order-summary-block {
  background-color: transparent;
  border-radius: 0 !important;
  padding: 0;
}

/* Summary panel title */
.woocommerce-checkout .wc-block-components-panel__button {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--color-text-white);
  border: none;
  background: none;
  padding: 0 0 16px;
}
.woocommerce-checkout .wc-block-components-panel__button svg {
  color: var(--color-text-muted);
}

/* ── Order summary item (product row) ── */
.wc-block-components-order-summary-item {
  display: grid !important;
  grid-template-columns: 56px 1fr auto !important;
  gap: 0 16px !important;
  align-items: start !important;
  width: 100% !important;
  padding: 16px 0 !important;
  border-bottom: 1px solid var(--color-border);
}
.wc-block-components-order-summary-item:last-child {
  border-bottom: none;
}

/* Product image */
.wc-block-components-order-summary-item__image {
  display: block !important;
  width: 56px !important;
  grid-row: 1 / 3 !important;
  grid-column: 1 !important;
  position: relative;
}
.wc-block-components-order-summary-item__image > img {
  width: 56px !important;
  height: 56px !important;
  max-width: 56px !important;
  object-fit: contain;
  border: 1px solid var(--color-border);
  background: var(--color-bg-main);
}

/* Quantity badge */
.wc-block-components-order-summary-item__quantity {
  background: var(--color-accent) !important;
  color: var(--color-text-on-accent) !important;
  border: 2px solid var(--color-bg-card) !important;
  box-shadow: none !important;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 0.6875rem;
}

/* Product name */
.wc-block-components-order-summary-item__description {
  display: block !important;
  min-width: 0 !important;
  padding: 0 !important;
  word-break: break-word !important;
  grid-column: 2 !important;
}
.wc-block-components-order-summary-item__description .wc-block-components-product-name {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 0.8125rem;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--color-text-white);
  display: block;
  margin-bottom: 4px;
}

/* Hide duplicate description paragraph */
.wc-block-components-order-summary-item__description .wc-block-components-product-metadata {
  display: none !important;
}

/* Prices in item */
.wc-block-components-order-summary-item__description .wc-block-cart-item__prices {
  margin-top: 4px;
}
.wc-block-components-order-summary-item__description .wc-block-components-formatted-money-amount {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 0.8125rem;
}

/* Old price — red strikethrough */
.wc-block-components-order-summary-item del {
  color: var(--color-sale, #e30613) !important;
  opacity: 0.8;
  font-weight: 600;
}

/* Discounted price */
.wc-block-components-order-summary-item ins {
  text-decoration: none;
  color: var(--color-text-white);
}

/* Total price column */
.wc-block-components-order-summary-item__total-price {
  display: block !important;
  text-align: right !important;
  grid-column: 3 !important;
  white-space: nowrap;
}
.wc-block-components-order-summary-item__total-price .wc-block-components-formatted-money-amount {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800;
  font-size: 0.875rem;
  color: var(--color-text-white);
}

/* Sale badge */
.wc-block-components-order-summary-item .wc-block-components-sale-badge {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.625rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--color-accent);
  background: transparent;
  border: 1px solid var(--color-accent);
  padding: 2px 6px;
  margin-top: 4px;
  display: inline-block;
}

/* ═══ SIDEBAR: Totals ═══ */
.woocommerce-checkout .wc-block-components-totals-wrapper {
  border-color: var(--color-border) !important;
  padding: 12px 0 !important;
}

/* Coupon panel */
.woocommerce-checkout .wc-block-components-panel__button {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-text-white);
}

/* Totals labels */
.woocommerce-checkout .wc-block-components-totals-item__label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}
.woocommerce-checkout .wc-block-components-totals-item__value {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  color: var(--color-text-white);
}

/* Footer total — big accent price */
.woocommerce-checkout .wc-block-components-totals-footer-item {
  padding-top: 16px !important;
  margin-top: 8px;
  border-top: 2px solid var(--color-border) !important;
}
.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 1.125rem;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--color-text-white);
}
.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--color-accent);
}

/* ═══ CHECKOUT FORM INPUTS ═══ */

/* Text inputs, selects, textareas */
.woocommerce-checkout .wc-block-components-text-input input,
.woocommerce-checkout .wc-block-components-text-input select,
.woocommerce-checkout .wc-block-components-combobox .wc-block-components-combobox-control input,
.woocommerce-checkout .wc-block-components-combobox .wc-block-components-combobox-control,
.woocommerce-checkout select,
.woocommerce-checkout .wc-block-components-textarea textarea {
  background: var(--color-bg-main) !important;
  color: var(--color-text-white) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
  font-family: 'Manrope', sans-serif;
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 20px 12px 8px !important;
  height: auto !important;
  min-height: 52px;
  box-shadow: none !important;
  outline: none !important;
  -webkit-appearance: none;
  box-sizing: border-box;
  width: 100%;
}

/* Focus state */
.woocommerce-checkout .wc-block-components-text-input input:focus,
.woocommerce-checkout .wc-block-components-combobox .wc-block-components-combobox-control input:focus,
.woocommerce-checkout .wc-block-components-textarea textarea:focus {
  border-color: var(--color-accent) !important;
  box-shadow: none !important;
}

/* Floating labels */
.woocommerce-checkout .wc-block-components-text-input label,
.woocommerce-checkout .wc-block-components-combobox .components-base-control__label {
  color: var(--color-text-muted) !important;
  font-family: 'Manrope', sans-serif;
  font-size: 0.875rem !important;
  font-weight: 400;
}

/* Label shrunk state */
.woocommerce-checkout .wc-block-components-text-input.is-active label {
  font-size: 0.6875rem !important;
  color: var(--color-text-muted) !important;
}

/* Text input container bottom border override */
.woocommerce-checkout .wc-block-components-text-input {
  border-bottom: none !important;
}

/* Checkbox styling */
.woocommerce-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
  accent-color: var(--color-accent);
}
.woocommerce-checkout .wc-block-components-checkbox__label {
  font-family: 'Manrope', sans-serif;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

/* Radio buttons */
.woocommerce-checkout .wc-block-components-radio-control__input {
  accent-color: var(--color-accent);
}

/* Combobox dropdown list */
.woocommerce-checkout .components-form-token-field__suggestions-list,
.woocommerce-checkout .wc-block-components-combobox .components-form-token-field__suggestions-list {
  background: var(--color-bg-main) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text-white) !important;
}
.woocommerce-checkout .components-form-token-field__suggestion,
.woocommerce-checkout .wc-block-components-combobox .components-form-token-field__suggestion {
  color: var(--color-text-white) !important;
  padding: 10px 12px;
  font-family: 'Manrope', sans-serif;
}
.woocommerce-checkout .components-form-token-field__suggestion.is-selected,
.woocommerce-checkout .wc-block-components-combobox .components-form-token-field__suggestion.is-selected {
  background: var(--color-accent) !important;
  color: var(--color-text-on-accent) !important;
}

/* Autofill override */
.woocommerce-checkout input:-webkit-autofill,
.woocommerce-checkout input:-webkit-autofill:hover,
.woocommerce-checkout input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--color-text-white) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--color-bg-main) inset !important;
  border: 1px solid var(--color-border) !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* Phone input */
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="text"] {
  color: var(--color-text-white) !important;
}

/* ═══ CHECKOUT RESPONSIVE ═══ */
@media (max-width: 768px) {
  .woocommerce-checkout .wc-block-components-sidebar-layout {
    flex-direction: column !important;
  }
  .woocommerce-checkout .wc-block-components-sidebar-layout > .wc-block-components-sidebar {
    flex: 1 1 100% !important;
    min-width: 0;
    position: static;
  }
  .woocommerce-checkout .wc-block-components-sidebar {
    padding: 16px !important;
  }
}

.wc-block-components-totals-footer-item
  .wc-block-components-totals-item__value {
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 150%;
}

.wc-block-components-form .wc-block-components-checkout-step {
  margin-bottom: 32px;
}

.wc-block-components-notice-banner.is-error {
  background-color: var(--color-bg-card) !important;
  color: var(--color-text-white) !important;
}

.wc-block-components-form .wc-block-components-checkout-step {
  margin-bottom: 20px;
}

.wc-block-checkout__terms.wc-block-checkout__terms--with-separator {
  padding-top: 0;
}

.wc-block-components-form
  .wc-block-checkout__order-notes.wc-block-components-checkout-step {
  margin-bottom: 32px;
}

.wp-block-woocommerce-checkout-actions-block .wc-block-checkout__actions_row {
  flex-direction: column-reverse;
  align-items: flex-start !important;
  gap: 32px;
}

.wp-block-woocommerce-checkout-actions-block
  .wc-block-checkout__actions_row
  .wc-block-components-checkout-place-order-button {
  width: 100%;
}

.wp-block-woocommerce-checkout-actions-block
  .wc-block-checkout__actions_row
  .wc-block-components-checkout-place-order-button {
  width: 100% !important;
}

.woocommerce nav.woocommerce-pagination ul {
  border-radius: 0;
  border: none;
}

.woocommerce nav.woocommerce-pagination ul li {
  border-radius: 0;
  border: none;
  margin-right: 12px;
  margin-bottom: 12px;
  /* width: 47px; */
}

.woocommerce nav.woocommerce-pagination ul li a {
  border: 2px solid var(--color-border-light-3);
  border-radius: 0;
}

.woocommerce nav.woocommerce-pagination ul li span {
  border: 2px solid transparent;
  border-radius: 0;
}

.woocommerce .custom-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 48px;
}

.woocommerce .custom-pagination .dots {
  color: var(--color-text-gray);
  font-weight: 900;
}

.woocommerce .custom-pagination a {
  border: 1px solid var(--color-border);
  border-radius: 0;
  padding: 12px 20px;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.875rem;
  line-height: 100%;
  color: var(--color-text-white);
  transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease;
  letter-spacing: -0.02em;
}

.woocommerce .custom-pagination a:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.woocommerce .custom-pagination a.pagination-page.active {
  color: var(--color-text-on-accent);
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.wp-block-woocommerce-cart-order-summary-totals-block {
  display: none !important;
}

.wc-block-cart-item__image {
  width: 180px;
}

.wc-block-cart-item__product {
  padding-left: 48px !important;
}

/* .woocommerce nav.woocommerce-pagination ul li:last-child {
	width: 67px;
} */

.woocommerce nav.woocommerce-pagination ul li a.prev,
.woocommerce nav.woocommerce-pagination ul li a.next {
  border: 2px solid transparent;
}

/* .woocommerce nav.woocommerce-pagination ul li a.prev::after {
	content: 'prev';
	padding-right: 5px;
}

.woocommerce nav.woocommerce-pagination ul li a.next::before {
	content: 'next';
	padding-right: 5px;
} */

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  padding: 12px 20px;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
}

.woocommerce nav.woocommerce-pagination {
  margin: auto;
}

/* ── Contacts page ── */
.contactsTitle {
  font-weight: 700;
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  line-height: 150%;
  margin-bottom: 48px;
}

.contactsSubTitle {
  font-weight: 700;
  font-size: clamp(1.25rem, 3.5vw, 2.25rem);
  line-height: 120%;
  margin-bottom: 24px;
}

.contactsBox {
  display: grid;
  grid-template-columns: 1fr 55%;
  gap: 32px;
  align-items: start;
}

.contactsLocation {
  min-width: 0;
}

.contactsSwitcher {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 48px;
}

.contactsSwitcher button {
  font-weight: 700;
  font-size: clamp(0.875rem, 2vw, 1.25rem);
  line-height: 100%;
  background-color: var(--color-bg-card);
  border-radius: 0;
  color: var(--color-text-white);
  padding: 12px 16px;
  min-height: 48px;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.contactsSwitcher button:hover {
  background-color: var(--color-border, #443D3A);
}

.contactsSwitcher button.active {
  background-color: var(--color-accent);
  color: var(--color-text-on-accent);
}

.contactsContent {
  margin-bottom: 56px;
}

.contactsContent address {
  font-style: normal;
}

.contactsContent ul {
  margin-bottom: 56px;
}

.contactsContent ul li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 1rem;
  line-height: 150%;
  margin-bottom: 16px;
}

.contactsContent ul li svg {
  flex-shrink: 0;
}

/* Tab transition — opacity fade */
.contactsTab {
  transition: opacity 0.25s ease;
}
.contactsTab[style*="display: none"] {
  opacity: 0;
}

/* ── Leaflet map — dark brutalist style ── */
#contactsLeafletMap {
  width: 100%;
  height: clamp(300px, 50vw, 555px);
  z-index: 1;
  border: 2px solid var(--color-border, #443D3A);
}
/* Warm tint on dark tiles */
#contactsLeafletMap .leaflet-tile-pane {
  filter: sepia(0.15) saturate(1.2) brightness(0.95);
}
/* Popup */
.contactsMap .leaflet-popup-content-wrapper {
  background: var(--color-bg-card, #241C1A);
  color: var(--color-text-white, #FAF8F7);
  border-radius: 0;
  border: 1px solid var(--color-accent, #C78C47);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.875rem;
  line-height: 1.5;
  padding: 12px 16px;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.3);
}
.contactsMap .leaflet-popup-content-wrapper b {
  color: var(--color-accent, #C78C47);
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 1rem;
}
.contactsMap .leaflet-popup-content {
  margin: 0;
}
.contactsMap .leaflet-popup-tip {
  background: var(--color-bg-card, #241C1A);
  border: 1px solid var(--color-accent, #C78C47);
  border-top: none;
  border-left: none;
}
.contactsMap .leaflet-popup-close-button {
  color: var(--color-text-muted, #DAD1C8);
  font-size: 18px;
  top: 4px;
  right: 6px;
}
.contactsMap .leaflet-popup-close-button:hover {
  color: var(--color-accent, #C78C47);
}
/* Zoom controls */
.contactsMap .leaflet-control-zoom {
  border: none;
  box-shadow: none;
}
.contactsMap .leaflet-control-zoom a {
  width: 36px;
  height: 36px;
  line-height: 36px;
  background: var(--color-bg-card, #241C1A);
  color: var(--color-accent, #C78C47);
  border: 1px solid var(--color-border, #443D3A);
  border-radius: 0;
  font-size: 18px;
  font-weight: 700;
  transition: background 0.2s, color 0.2s;
}
.contactsMap .leaflet-control-zoom a:hover {
  background: var(--color-accent, #C78C47);
  color: var(--color-bg-card, #241C1A);
}
/* Attribution */
.contactsMap .leaflet-control-attribution {
  background: rgba(36, 28, 26, 0.8);
  color: var(--color-text-muted, #DAD1C8);
  font-size: 10px;
  border-radius: 0;
}
.contactsMap .leaflet-control-attribution a {
  color: var(--color-accent, #C78C47);
}
/* Gold pin — no default marker background */
.lm-map-pin {
  background: none !important;
  border: none !important;
}
.lm-map-pin svg {
  filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.4));
}

.contactsForm form {
  background-color: var(--color-bg-card);
  padding: 32px;
  border-radius: 0;
}

.contactsForm p {
  font-weight: 700;
  font-size: 1rem;
  line-height: 150%;
  margin-bottom: 20px;
}

.contactsForm h3 {
  margin-bottom: 32px;
}

.contactsForm label {
  font-weight: 700;
  font-size: 1rem;
  line-height: 150%;
}

.contactsForm input,
.contactsForm textarea {
  display: block;
  width: 100%;
  color: var(--color-text-white);
  background-color: var(--color-bg-main);
  padding: 12px 16px;
  outline: none;
  border: 1px solid var(--color-border, #443D3A);
  border-radius: 0;
  margin-top: 8px;
  margin-bottom: 16px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem;
  min-height: 48px;
  transition: border-color 0.2s;
}
.contactsForm input:focus,
.contactsForm textarea:focus {
  border-color: var(--color-accent, #C78C47);
  box-shadow: 0 0 0 2px rgba(199, 140, 71, 0.25);
}
.contactsForm textarea {
  resize: vertical;
  min-height: 120px;
}

.contactsForm button,
.contactsForm input[type="submit"] {
  background-color: var(--color-accent);
  color: var(--color-text-on-accent);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 100%;
  width: 100%;
  min-height: 48px;
  padding: 16px 24px;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background-color 0.2s;
}
.contactsForm button:hover,
.contactsForm input[type="submit"]:hover {
  background-color: var(--color-accent-hover, #d99b56);
}

.policyTitle,
.faqTitle,
.deliveryTitle {
  font-weight: 700;
  font-size: 2.25rem;
  line-height: 150%;
  margin-bottom: 48px;
}

.policyBanner,
.faqBanner,
.deliveryBanner {
  position: relative;
  height: 243px;
  margin-bottom: 64px;
}

.policyBanner::after,
.faqBanner::after,
.deliveryBanner::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  background: #40312ead;
}

.policyBanner img,
.faqBanner img,
.deliveryBanner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  border-radius: 0;
}

.policy h6 {
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 150%;
  margin-bottom: 12px;
}

.policy p {
  font-weight: 500;
  font-size: 1rem;
  line-height: 150%;
  margin-bottom: 16px;
}

.faqItem {
  background-color: var(--color-bg-card);
  padding: 20px;
  border-radius: 0;
  margin-bottom: 32px;
}

/* Native <details>/<summary> — hide default marker */
details.faqItem > summary {
  list-style: none;
}
details.faqItem > summary::-webkit-details-marker {
  display: none;
}
details.faqItem > summary .faqChevron {
  transition: transform 0.3s ease;
}
details.faqItem[open] > summary .faqChevron {
  transform: rotate(180deg);
}

.faqItem .faqName {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.faqItem .faqName > div {
  display: flex;
  gap: 12px;
}

.deliveryTable {
  display: flex;
  background-color: var(--color-bg-card);
  padding: 20px;
  border-radius: 0;
  margin-bottom: 32px;
}

.deliveryTr {
  flex-basis: 50%;
}

.deliveryTr > div > div:not(:last-child) {
  margin-bottom: var(--spacing-2xl);
}

.deliveryTable h6 {
  font-weight: 700;
  font-size: 1rem;
  line-height: 150%;
}

.delivery h3 {
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 150%;
  margin-bottom: 32px;
}

.deliveryTable h4 {
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 150%;
  margin-bottom: var(--spacing-2xl);
}

.deliveryTr:first-child {
  border-right: 1px solid var(--color-bg-main);
}

.deliveryTr:first-child > div {
  max-width: 342px;
}

.deliveryTr:last-child > div {
  max-width: 399px;
  margin-left: 157px;
}

.deliveryCancel h3 {
  margin-bottom: 12px;
}

.deliveryCancel p {
  font-weight: 500;
  font-size: 1rem;
  line-height: 150%;
  margin-bottom: 20px;
}

.aboutBanner {
  margin-bottom: 22px;
}

.aboutImage {
  height: 360px;
}

.aboutImage img {
  height: 100%;
  border-radius: 0;
  object-fit: cover;
}

.aboutBanner {
  position: relative;
  margin-bottom: 22px;
}

.aboutBanner::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #40312ead;
}

.aboutText {
  position: absolute;
  max-width: 625px;
  left: 136px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

.aboutText h1 {
  font-weight: 700;
  font-size: 2.25rem;
  line-height: 150%;
  margin-bottom: 12px;
}

.aboutText p {
  font-weight: 500;
  font-size: 1rem;
  line-height: 150%;
}

.aboutTeam {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 123px;
}

.aboutMission {
  position: relative;
  flex-basis: auto;
  width: calc(354px - 24px);
  margin-right: 100px;
}

.aboutMission img {
  width: unset;
  border-radius: 0;
}

.aboutInfo {
  position: absolute;
  top: 55px;
  left: 34px;
  width: 320px;
}

.aboutInfo h3 {
  font-weight: 700;
  font-size: 2.25rem;
  line-height: 150%;
  margin-bottom: 12px;
}

.aboutInfo p {
  font-weight: 500;
  font-size: 1rem;
  line-height: 150%;
}

.aboutGeneral {
  margin-top: 54px;
  display: flex;
  gap: 32px;
}

.aboutGeneral img {
  width: 74px;
  height: 74px;
  border-radius: 0;
}

.aboutName {
  font-weight: 700;
  font-size: 1rem;
  line-height: 150%;
  margin-bottom: 12px;
  text-align: center;
}

.aboutPost {
  font-weight: 500;
  font-size: 1rem;
  line-height: 150%;
  margin-bottom: 12px;
}

.aboutPhone {
  font-weight: 500;
  font-size: 1rem;
  line-height: 150%;
}

.aboutEmployees {
  margin-top: 55px;
}

.aboutEmployees h3 {
  font-weight: 700;
  font-size: 2.25rem;
  line-height: 150%;
  margin-bottom: 12px;
}

.aboutEmployees p {
  font-weight: 500;
  font-size: 1rem;
  line-height: 150%;
}

.aboutPhoto {
  margin-bottom: 32px;
}

.aboutItems {
  display: flex;
  flex-wrap: wrap;
  gap: 45px;
  row-gap: 48px;
  margin-top: 54px;
}

.aboutItem {
  flex: 1 0 auto;
  width: calc(25% - 45px);
}

.aboutItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.aboutItem .aboutPhoto img {
  width: 114px;
  height: 114px;
  border-radius: 0;
}

.aboutAds {
  position: relative;
  background: var(--color-bg-card);
  border-radius: 0;
  margin-bottom: 88px;
  padding-top: var(--spacing-2xl);
  padding-bottom: 80px;
}

.aboutAds::after {
  content: "";
  position: absolute;
  top: -85px;
  left: 50%;
  transform: translateX(-50%);
  width: 1280px;
  height: 359px;
  background-image: url("../img/bg-o-nas-f-Photoroom.png");
  background-repeat: no-repeat;
}

.aboutAdsIntro {
  margin-left: auto;
  margin-right: auto;
}

.aboutAdsIntro {
  max-width: 642px;
}

.aboutAds h3 {
  font-weight: 700;
  font-size: 2.25rem;
  line-height: 150%;
  text-align: center;
  margin-bottom: 12px;
}

.aboutAds p {
  font-weight: 500;
  font-size: 1rem;
  line-height: 150%;
  text-align: center;
}

.aboutPlus {
  max-width: 775px;
  display: flex;
  justify-content: space-between;
  align-self: center;
  gap: 60px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 111px;
}

.aboutPlus div {
  flex: 0 0 228px;
  width: calc(33.333% - 60px);
  text-align: center;
}

.aboutPlus div img {
  width: 56px;
}

.aboutPlus div h4 {
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 150%;
  text-align: center;
}

.aboutPlus div h4 {
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 150%;
  text-align: center;
  margin-bottom: 12px;
}

.aboutPlus div p {
  font-weight: 500;
  font-size: 1rem;
  line-height: 150%;
  text-align: center;
}

.aboutInvite {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  margin-bottom: 60px;
}

.aboutInvite h3 {
  font-weight: 700;
  font-size: 2.25rem;
  line-height: 150%;
  margin-bottom: 12px;
}

.aboutInvite p {
  font-weight: 500;
  font-size: 1rem;
  line-height: 150%;
}

.aboutInvite > div {
  flex: 1 0 auto;
  width: calc(50% - 32px);
}

.aboutInvite > div:last-child {
  position: relative;
  height: 552px;
}

.aboutInvite > div:last-child::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #40312ead;
}

.aboutInvite > div:last-child img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

#header-placeholder {
  box-sizing: border-box;
}

.woocommerce-MyAccount-navigation,
.woocommerce-MyAccount-content {
  width: unset !important;
  float: unset !important;
}

.woocommerce-MyAccount-navigation .list-group {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}

.woocommerce-info {
  background: var(--color-bg-main);
  color: var(--color-text-white);
}

.is-large.wc-block-cart .wc-block-cart-items,
.is-large.wc-block-cart .wc-block-cart-items td {
  border-bottom: none !important;
}

.faqBody .faqContent ul li {
  list-style-type: disc;
}

.logged-in article {
  margin-bottom: 180px;
}

.resetFiltersButton {
  padding: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.woocommerce-order-received h1 {
  font-weight: 700;
  font-size: 2.25rem;
  line-height: 150%;
}

.woocommerce-order-received .woocommerce-order-overview__order.order,
.woocommerce-order-received .woocommerce-order-overview__date.date,
.woocommerce-order-received .woocommerce-order-overview__total.total,
.woocommerce-order-overview__payment-method.method {
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 150%;
  text-transform: uppercase;
}

.woocommerce-order-received .woocommerce-order-overview__order.order strong,
.woocommerce-order-received .woocommerce-order-overview__date.date strong,
.woocommerce-order-received .woocommerce-order-overview__total.total strong,
.woocommerce-order-overview__payment-method.method strong {
  margin-top: 8px;
  font-weight: 400;
  font-size: 1rem;
  line-height: 150%;
}

.woocommerce-order-received
  .woocommerce-notice.woocommerce-notice--success.woocommerce-thankyou-order-received {
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 150%;
  margin-bottom: 32px;
}

.woocommerce-order-received .woocommerce table.shop_table th {
  font-weight: 400;
  font-size: 1rem;
  line-height: 150%;
}

.woocommerce-order-received .woocommerce-table__product-table.product-total,
.woocommerce-order-received .woocommerce-table__product-total.product-total,
.woocommerce-order-received tfoot td {
  text-align: right;
}

.woocommerce-order-received .woocommerce ul.order_details li {
  border-right: 1px solid var(--color-border);
}

.woocommerce-order-received .woocommerce ul.order_details li:last-child {
  border-right: none;
}

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles))
  a.button.loading {
  padding-right: 0;
}

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles))
  a.button.loading::after {
  position: static;
}

.woocommerce-order-received
  .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details,
.woocommerce-order-received
  .woocommerce-table.woocommerce-table--order-details.shop_table.order_details,
.woocommerce-order-received .wc-bacs-bank-details.order_details.bacs_details,
.woocommerce-order-received
  .woocommerce-column.woocommerce-column--1.woocommerce-column--billing-address.col-1
  address,
.woocommerce-order-received
  .woocommerce-column.woocommerce-column--2.woocommerce-column--shipping-address.col-2
  address {
  background-color: var(--color-bg-card);
  padding: 26px;
  border-radius: 0;
}

.woocommerce-order-received
  .woocommerce-column.woocommerce-column--1.woocommerce-column--billing-address.col-1
  address,
.woocommerce-order-received
  .woocommerce-column.woocommerce-column--2.woocommerce-column--shipping-address.col-2
  address {
  height: 100%;
  max-height: 350px;
  line-height: 2.4;
}

.woocommerce-order-received
  .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details,
.woocommerce-order-received .wc-bacs-bank-details.order_details.bacs_details {
  width: fit-content;
  display: flex;
  flex-wrap: wrap;
  row-gap: 12px;
}

.woocommerce-order-received
  .woocommerce-table.woocommerce-table--order-details.shop_table.order_details {
  margin-bottom: 32px;
}

.woocommerce-order-received .woocommerce-order-overview .woocommerce-order-overview__email.email,
/* .woocommerce-order-received .woocommerce-order-overview__payment-method.method, */
/* .woocommerce-order-received .woocommerce-bacs-bank-details, */
/* .woocommerce-order-received .woocommerce-table.woocommerce-table--order-details.shop_table.order_details, */
.woocommerce-order-received .woocommerce-table.woocommerce-table--order-details.shop_table.order_details tbody+tfoot {
  display: none;
}

.woocommerce-customer-details--email,
.woocommerce-customer-details--phone {
  display: flex;
  align-items: center;
}

.woocommerce-order-received
  .wc-bacs-bank-details.order_details.bacs_details
  li {
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 150%;
  text-transform: uppercase;
}

.woocommerce-order-received
  .wc-bacs-bank-details.order_details.bacs_details
  li
  strong {
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.7;
  letter-spacing: 1.4px;
  margin-top: 5px;
  word-break: break-word;
  overflow-wrap: break-word;
}

.woocommerce-order-received h2 {
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 150%;
  margin-bottom: 12px;
}

.woocommerce-order-received .woocommerce-table__product-name.product-name {
  font-weight: 400;
  font-size: 1rem;
  line-height: 150%;
}

.woocommerce-order-received .woocommerce-table__product-name.product-name,
.woocommerce-order-received .woocommerce-table__product-total.product-total {
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 150%;
}

.woocommerce-order-received .woocommerce table.shop_table tfoot th,
.woocommerce-order-received .woocommerce .woocommerce-customer-details address {
  border: none;
}

.woocommerce-order-received
  .woocommerce-customer-details
  .woocommerce-columns.woocommerce-columns--addresses.addresses {
  display: flex;
  justify-content: space-between;
  gap: 32px;
}

.woocommerce .col2-set::before,
.woocommerce .col2-set::after,
.woocommerce-page .col2-set::before,
.woocommerce-page .col2-set::after {
  content: none !important;
  display: none !important;
  clear: none !important;
}

.woocommerce-order-received
  .woocommerce-customer-details
  .woocommerce-columns.woocommerce-columns--addresses.addresses
  address {
  height: 100%;
}

.woocommerce-customer-details--phone {
  margin: 0;
}

/*# sourceMappingURL=index.css.map */

.cart-icon-wrapper {
  line-height: 0;
}

.products-loader {
  text-align: center;
  padding: 32px;
}

.products-loader .spinner {
  display: inline-block;
  width: 32px;
  height: 32px;
  animation: spin 0.7s linear infinite;
  margin: auto;
}

/* Анимация вращения */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.searchItem {
  display: flex;
  gap: 32px;
}

.searchItem img {
  width: 400px;
  height: 400px;
  object-fit: contain;
}

.search-results .page-header {
  margin-bottom: 60px;
}

.search-no-results .page-header {
  margin-bottom: 16px;
}

.search-results .page-title {
  line-height: 100%;
}

.search-results .catalogBox {
  padding: 48px 0;
}

.search-results .catalogBox article:not(:last-of-type) {
  margin-bottom: -160px;
  width: 100%;
}

.search-results article .entry-header {
  margin-bottom: 0px;
}

.search-results article .entry-title {
  font-size: 2rem;
}

.search-results .pagination {
  display: flex;
  margin: 48px 0;
}

.search-results .pagination li a,
.search-results .pagination li span {
  border: 2px solid var(--color-border-light-3);
  border-radius: 0;
  margin-right: 12px;
  padding: 12px 20px;
}

.search-results .pagination li span {
  background-color: var(--color-accent);
}

.header .search-form input,
.no-results.not-found input {
  height: 56px;
  background: var(--color-bg-main);
  color: var(--color-text-white);
  padding: 12px;
  border: 0;
  outline: 0;
  border-radius: 0;
  cursor: pointer;
  position: relative;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 100%;
  white-space: nowrap;
  width: 100%;
}

.header .search-form input.active:-webkit-autofill,
.header .search-form input.active:-webkit-autofill:hover,
.header .search-form input.active:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--color-bg-main) inset;
  -webkit-text-fill-color: var(--color-text-white);
  border: none;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--color-text-white) !important;
  box-shadow: 0 0 0 1000px var(--color-bg-main) inset !important;
  border-radius: 0 !important;
  /* заливаем весь фон */
  background-clip: padding-box;
  /* не даём фону залезать за границы */
  transition: background-color 9999s ease-in-out 0s;
}

.header .search-form input {
  width: 100%;
  height: 48px;
  padding: 12px 12px 12px 16px;
  border: 1px solid var(--color-border, #ddd);
  border-radius: 0;
  min-width: 0;
  opacity: 1;
  transition: border-color 0.3s ease;
}

.header .search-form input::placeholder {
  opacity: 0.5;
  color: var(--color-text-muted);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.8125rem;
  font-weight: 400;
}

/* .active keeps same style — input always visible */
.header .search-form input.active {
  border-color: var(--color-accent, #C78C47);
}
/* border: 1px solid var(--color-text-dark-alt); */

.search-form {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  /* border: 1px solid #E2E8F0;
	border-radius: 0; */
  width: 100%;
}

.page-content .input-group {
  display: flex;
  gap: 12px;
  max-width: 100%;
  width: 100%;
}

.page-content .search-form {
  justify-content: flex-start;
  margin-top: 32px;
}

.no-results.not-found input {
  border: 1px solid #e2e8f0;
  border-radius: 0;
  min-width: 300px;
}

.page-content .search-form button {
  color: var(--color-text-white);
  background: var(--color-bg-main);
  width: 100%;
  height: 56px;
  border: 1px solid #e2e8f0;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.4s ease, opacity 0.4s ease, color 0.4s ease, background-color 0.4s ease;
}

.page-content .search-form button:hover {
  background: var(--color-accent);
}

.search-results .footer {
  margin-top: 100px;
}

.no-results.not-found {
  height: 50vh;
}

.header .search-form button,
.no-results.not-found input[type="submit"] {
  color: var(--color-text-white);
  padding: 4px 4px;
  background: var(--color-bg-main);
  border: none;
  border-radius: 0;
  width: 56px;
  height: 56px;
  z-index: 1;
  position: relative;
  transition: transform 0.4s ease, opacity 0.4s ease, color 0.4s ease, background-color 0.4s ease;
}

.header .search-form button:hover {
  background: var(--color-accent);
}

.headerMenuSearch {
  width: 100%;
}

.headerMenuSearch .input-group {
  gap: 0;
  display: flex;
  justify-content: flex-end !important;
  align-items: stretch;
  width: 100%;
}

/* ── Live Search Dropdown ── */
.search-form {
  position: relative;
}
.live-search-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--color-bg-main);
  border: 1px solid var(--color-border);
  border-top: none;
  max-height: 420px;
  overflow-y: auto;
  animation: lsSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes lsSlideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.ls-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  text-decoration: none;
  color: var(--color-text-white);
  border-bottom: 1px solid var(--color-border);
  transition: background 0.15s ease;
  cursor: pointer;
}
.ls-item:last-child {
  border-bottom: none;
}
.ls-item:hover,
.ls-item.is-active {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
}
.ls-item img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex-shrink: 0;
  background: rgba(255,255,255,0.05);
}
.ls-item-info {
  flex: 1;
  min-width: 0;
}
.ls-item-name {
  font-family: 'Manrope', sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ls-item-price {
  font-family: 'Manrope', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-accent);
  margin-top: 2px;
}
.ls-item:hover .ls-item-price,
.ls-item.is-active .ls-item-price {
  color: var(--color-text-on-accent);
}
.ls-empty {
  padding: 20px 16px;
  text-align: center;
  color: var(--color-text-gray);
  font-family: 'Manrope', sans-serif;
  font-size: 0.8125rem;
}
/* Loading skeleton */
.ls-loading {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ls-loading span {
  display: block;
  height: 68px;
  background: linear-gradient(90deg,
    var(--color-bg-main) 25%,
    var(--color-border) 50%,
    var(--color-bg-main) 75%
  );
  background-size: 200% 100%;
  animation: lsShimmer 1.5s ease-in-out infinite;
  border-bottom: 1px solid var(--color-border);
}
@keyframes lsShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* White theme overrides */

/* Live search dropdown — mobile */
@media (max-width: 768px) {
  .live-search-dropdown {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 60vh;
    border: none;
    border-top: 1px solid var(--color-border);
  }
  .ls-item img {
    width: 40px;
    height: 40px;
  }
  .ls-item {
    padding: 8px 12px;
    gap: 10px;
  }
  .ls-item-name { font-size: 0.75rem; }
  .ls-item-price { font-size: 0.6875rem; }
}

/* ═══════════════════════════════════════════════════════════
   SMART SEARCH — chips, suggestions dropdown, product items
   ═══════════════════════════════════════════════════════════ */

/* Input wrapper with chips */
.ss-input-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.ss-input-wrap .search-field {
  flex: 1;
  min-width: 80px;
}

/* Chips */
.ss-chip-area {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.ss-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--color-accent);
  color: var(--color-text-on-accent, #fff);
  font-family: 'Manrope', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  animation: ssChipIn 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes ssChipIn {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}
.ss-chip__label {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ss-chip__hint {
  font-weight: 400;
  opacity: 0.7;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ss-chip__remove {
  background: none;
  border: none;
  color: inherit;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.ss-chip__remove:hover {
  opacity: 1;
}

/* Dropdown — inherits from live-search-dropdown base */
.ss-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  left: auto;
  z-index: 9999;
  background: var(--color-bg-main);
  border: 1px solid var(--color-border);
  border-top: none;
  min-width: 420px;
  max-height: 480px;
  overflow-y: auto;
  animation: lsSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Sections */
.ss-section--suggestions {
  padding: 4px 0;
}
.ss-divider {
  height: 1px;
  background: var(--color-border);
  margin: 0;
}

/* Suggestion item */
.ss-suggestion {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background 0.15s ease;
  font-family: 'Manrope', sans-serif;
  font-size: 0.8125rem;
  color: var(--color-text-white);
}
.ss-suggestion:hover,
.ss-suggestion.is-active {
  background: rgba(199, 140, 71, 0.12);
}
.ss-suggestion__label {
  flex: 1;
  font-weight: 600;
}
.ss-suggestion__label mark {
  background: none;
  color: var(--color-accent);
  font-weight: 700;
}
.ss-suggestion__hint {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-gray);
  font-weight: 500;
}
.ss-suggestion__count {
  font-size: 0.6875rem;
  color: var(--color-text-gray);
  opacity: 0.6;
  min-width: 24px;
  text-align: right;
}
.ss-suggestion__tab {
  display: inline-block;
  padding: 1px 6px;
  font-family: 'Space Grotesk', monospace;
  font-size: 0.5625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: rgba(199, 140, 71, 0.15);
  color: var(--color-accent);
  border: 1px solid rgba(199, 140, 71, 0.3);
}

/* Product item in dropdown */
.ss-product {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  text-decoration: none;
  color: var(--color-text-white);
  border-bottom: 1px solid var(--color-border);
  transition: background 0.15s ease;
  cursor: pointer;
}
.ss-product:last-child {
  border-bottom: none;
}
.ss-product:hover,
.ss-product.is-active {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
}
.ss-product__img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex-shrink: 0;
  background: rgba(255,255,255,0.05);
}
.ss-product__info {
  flex: 1;
  min-width: 0;
}
.ss-product__name {
  font-family: 'Manrope', sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ss-product__price {
  font-family: 'Manrope', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-accent);
  margin-top: 2px;
}
.ss-product:hover .ss-product__price,
.ss-product.is-active .ss-product__price {
  color: var(--color-text-on-accent);
}

/* Smart search loading */
.ss-loading {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ss-loading span {
  display: block;
  height: 52px;
  background: linear-gradient(90deg,
    var(--color-bg-main) 25%,
    var(--color-border) 50%,
    var(--color-bg-main) 75%
  );
  background-size: 200% 100%;
  animation: lsShimmer 1.5s ease-in-out infinite;
  border-bottom: 1px solid var(--color-border);
}

/* Smart search empty */
.ss-empty {
  padding: 20px 16px;
  text-align: center;
  color: var(--color-text-gray);
  font-family: 'Manrope', sans-serif;
  font-size: 0.8125rem;
}

/* White theme overrides for smart search */

/* Smart search — mobile */
@media (max-width: 768px) {
  .ss-dropdown {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 60vh;
    border: none;
    border-top: 1px solid var(--color-border);
  }
  .ss-product__img {
    width: 40px;
    height: 40px;
  }
  .ss-product {
    padding: 8px 12px;
    gap: 10px;
  }
  .ss-product__name { font-size: 0.75rem; }
  .ss-product__price { font-size: 0.6875rem; }
  .ss-suggestion { padding: 8px 12px; }
  .ss-suggestion__tab { display: none; } /* TAB hint hidden on mobile — touch UX */
  .ss-chip {
    font-size: 0.6875rem;
    padding: 2px 6px;
  }
}

.headerFiltres {
  position: relative;
}

/* Legacy hidden search — replaced by always-visible bar */
.headerMobileMenuSearch {
  display: none;
}

/* Always-visible mobile search bar */
.headerMobileSearchBar {
  display: none;
}

.headerMobile .headerMobileSearchBar {
  display: block;
  padding: 0 16px 12px;
}

.headerMobileSearchBar .search-form {
  position: relative;
}

.headerMobileSearchBar .input-group {
  display: flex;
  gap: 0;
  width: 100%;
}

.headerMobileSearchBar .search-form input[type="search"] {
  flex: 1;
  height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-main);
  color: var(--color-text);
  font-size: 14px;
}

.headerMobileSearchBar .search-form button {
  width: 48px;
  height: 48px;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-left: none;
  background: var(--color-bg-main);
  display: flex;
  align-items: center;
  justify-content: center;
}

.error-404.not-found {
  margin-top: 80px;
  margin-bottom: 20vh;
}

.woocommerce-message {
  border-top: none;
  background-color: var(--color-bg-card);
  color: var(--color-text-white);
  padding: 20px 32px 20px 80px;
  font-weight: 800;
  font-size: 1rem;
  line-height: 150%;
  border-radius: 0;
}

.woocommerce-message::before {
  color: var(--color-accent);
  font-size: 2.5625rem;
  top: 0.8em;
  left: 0.5em;
}

.woocommerce-message a.button {
  font-size: 1rem;
  line-height: 100%;
  background-color: var(--color-accent);
  color: #40312E;
  border-radius: 0;
  padding: 16px 20px;
  font-weight: 700;
}

#wc-toasts-container {
  width: 90dvw;
  margin: 0 auto 20px auto;
}

#wc-toasts .wc-toast {
  border-radius: 0;
  padding: 12px 16px;
  margin-bottom: 12px;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  box-shadow: none;
  border: 1px solid var(--color-border);
}

.wc-toast--success {
  background:
    linear-gradient(0deg, rgba(60, 197, 126, 0.2), rgba(60, 197, 126, 0.2)),
    #1f2330;
  border: 1px solid rgba(60, 197, 126, 0.4);
}

.wc-toast--success .wc-toast__icon::before {
  content: "✔";
  color: var(--color-success);
}

.wc-toast--error {
  background:
    linear-gradient(0deg, rgba(244, 89, 89, 0.2), rgba(244, 89, 89, 0.2)),
    #1f2330;
  border: 1px solid rgba(244, 89, 89, 0.4);
}
.wc-toast--error .wc-toast__icon::before {
  content: "⛔";
  color: var(--color-error);
}
.wc-toast__message {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: white;
}
.wc-toast__action,
.wc-toast__close {
  display: none;
}

.wc-toast__message a.wc-forward {
  color: var(--color-text-on-accent);
  background: var(--color-accent);
  border-radius: 0;
  padding: 16px 32px;
  font-weight: 700;
  font-size: 1rem;
  line-height: 150%;
  border: 0;
  outline: 0;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
}
/*****************************/

.block_color_fon {
  background: var(--color-bg-main);
  padding: 4px;
  border-radius: 0;
}
.block_color_fon_item svg path {
  stroke: white;
}
.block_color_fon_item {
  transition:
    transform 0.5s ease,
    top 0.5s ease;
  display: flex;
  align-items: center;
  border-radius: 0;
  transform: scale(0.95);
  padding: 12px;
}
.fon_active {
  background: var(--color-accent);
  transform: scale(1.01);
}
/* --- White Theme Overrides --- */

/* White theme: Filter styles */

/* White theme: Catalog Quality badges - добавляем фон для контрастности */

/* White theme: Swiper navigation disabled state */

/* White theme: Sale badge */

@media (max-width: 768px) {
  .woocommerce-order-received
    .woocommerce-customer-details
    .woocommerce-columns.woocommerce-columns--addresses.addresses {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
  }
  .woocommerce-order-received
    .woocommerce-column.woocommerce-column--1.woocommerce-column--billing-address.col-1
    address,
  .woocommerce-order-received
    .woocommerce-column.woocommerce-column--2.woocommerce-column--shipping-address.col-2
    address {
    height: auto;
  }
}

#fe-catalog {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 100px;
  height: min-content;
  width: calc(75% - 16px);
}

/* Страница каталога с фильтром */
.catalogContainer {
  display: flex;
  justify-content: space-between;
}

/* Plugin filter styles */
.catalogPluginFilter {
  width: calc(25% - 15px);
}
/* Секции FE свёрнуты по умолчанию */
#fe-filters-root .wpc-filters-section .wpc-filter-content {
  display: none;
}
#fe-filters-root .wpc-filters-section.is-open .wpc-filter-content {
  display: block;
}
/* Кликабельный заголовок */
#fe-filters-root .wpc-filters-section .wpc-filter-header {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border: 1px solid var(--color-border);
  border-radius: 0;
  background: var(--color-bg-main);
  margin: 12px 0 8px;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.875rem;
  letter-spacing: -0.02em;
  transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

#fe-filters-root .wpc-filters-section .wpc-filter-header:hover {
  border-color: var(--color-accent);
}

/* Карточка блока фильтров */
#fe-filters-root .fe-card {
  background: var(--color-bg-card);
  border-radius: 0;
  font-weight: 900;
  margin-top: 0;
  /*  padding: 32px 24px; */
}
#fe-filters-root .fe-card--size {
  padding: 12px 0;
  border-radius: 0;
}

#fe-filters-root .fe-card--rest {
  padding: 12px 0 20px 0;
  border-radius: 0;
  margin-top: 0;
}
#fe-filters-root .fe-card--price {
  padding: 12px 0 20px 0;
  border-radius: 0;
  margin-top: 0;
}

/* Вкладки */
#fe-filters-root .fe-tabs {
  display: flex;
  background: var(--color-bg-main);
  border-radius: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
}

#fe-filters-root .fe-tab {
  appearance: none;
  border: 0;
  padding: 16px 12px;
  border-radius: 0;
  background: var(--color-bg-main);
  color: var(--color-text-white);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.8125rem;
  letter-spacing: -0.02em;
  cursor: pointer;
  flex: 1;
  text-align: center;
  transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
#fe-filters-root .fe-tab.is-active {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
}

/* Стрелка аккордеона */
#fe-filters-root .fe-acc-arrow {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin-left: 8px;
  transition: transform 0.2s ease;
}
#fe-filters-root .wpc-filters-section.is-open .fe-acc-arrow {
  transform: rotate(180deg);
}

/* Контент секций (скрыт по умолчанию) */
/* Filter content height — let plugin handle show/hide via wpc-opened */
.wpc-filter-content {
  max-height: 224px;
  overflow: hidden;
  padding: 8px;
  transition: max-height 0.4s ease-in-out;
}
/* Expand filter list on hover */
#fe-filters-root .wpc-filters-section.is-open:hover > .wpc-filter-content {
  max-height: 70vh !important;
  overflow: hidden !important;
}
#fe-filters-root .wpc-filters-section.is-open:hover .wpc-filter-content ul.wpc-filters-ul-list {
  max-height: 70vh !important;
  overflow-y: hidden !important;
}
.wpc-filter-content.lm-expanded {
  max-height: 70vh !important;
}
/* Fade hint when items overflow */
#fe-filters-root .wpc-filter-content::after {
  content: '';
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  display: block;
  height: 32px;
  background: linear-gradient(to bottom, transparent, var(--color-bg-main, #241C1A));
  pointer-events: none;
  transition: opacity 0.3s;
}
#fe-filters-root .wpc-filters-section.is-open:hover > .wpc-filter-content::after {
  opacity: 0;
}
#fe-filters-root .wpc-filters-section.is-open .wpc-filter-content {
  display: block;
}

/* Скроллбар */
#fe-filters-root .wpc-filter-content::-webkit-scrollbar {
  width: 4px;
}
#fe-filters-root .wpc-filter-content::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 0;
}
#fe-filters-root .wpc-filter-content::-webkit-scrollbar-thumb:hover {
  background: var(--color-accent);
}

/* Modern Chips Style for WPC Filters */
#fe-filters-root .wpc-filters-ul-list,
#fe-filters-root ul.wpc-filters-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

#fe-filters-root .wpc-checkbox-item,
#fe-filters-root .wpc-term-item {
  margin: 0 !important;
  width: auto !important;
  float: none !important;
  display: flex;
}

#fe-filters-root .wpc-checkbox-item label,
#fe-filters-root .wpc-term-item label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  background: var(--color-bg-main);
  border: 1px solid var(--color-border);
  border-radius: 0;
  color: var(--color-text-white);
  font-size: 0.8125rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease;
  text-align: center;
  min-height: 48px;
  width: 100%;
}

#fe-filters-root .wpc-checkbox-item input[type="checkbox"],
#fe-filters-root .wpc-checkbox-item input[type="radio"],
#fe-filters-root .wpc-term-item input[type="checkbox"],
#fe-filters-root .wpc-term-item input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

#fe-filters-root .wpc-checkbox-item label:hover,
#fe-filters-root .wpc-term-item label:hover {
  border-color: var(--color-accent);
  background: rgba(255, 255, 255, 0.1);
}

#fe-filters-root .wpc-checkbox-item input:checked + label,
#fe-filters-root .wpc-term-item input:checked + label,
#fe-filters-root .wpc-term-item.checked label {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  border-color: var(--color-accent);
  font-weight: 900;
}

/* Hide default checkmark if present in label */
#fe-filters-root .wpc-checkbox-item label::before,
#fe-filters-root .wpc-checkbox-item label::after,
#fe-filters-root .wpc-term-item label::before,
#fe-filters-root .wpc-term-item label::after {
  display: none !important;
}

.wpc-filters-scroll-container {
  background-color: var(--color-text-dark);
  border-radius: 0;
  margin-top: 32px;
}

.wpc-filter-title {
  margin: 0 !important;
}

/* Показывать группы без переноса DOM */
#fe-filters-root[data-fe-pane="size"] .wpc-filters-section.fe-type {
  display: none;
}
#fe-filters-root[data-fe-pane="type"] .wpc-filters-section.fe-size {
  display: none;
}
#fe-filters-root[data-fe-attrs="closed"] .wpc-filters-section.fe-attr {
  display: none;
}

/* Conflicting styles removed to restore cleaner design */

/* Fix for jQuery UI Slider in Filter Everything */
#fe-filters-root .ui-slider-handle {
  border: 2px solid var(--color-text-light) !important;
  border-radius: 0 !important;
  background: var(--color-accent) !important;
  width: 20px !important;
  height: 20px !important;
  box-shadow: none;
  cursor: pointer;
  transition: transform 0.2s ease;
  outline: none;
  top: 50% !important;
  margin-top: -10px !important; /* Center vertically */
}

#fe-filters-root .ui-slider-handle:hover {
  transform: scale(1.2);
}

#fe-filters-root .ui-slider-range {
  background: var(--color-accent) !important;
}

#fe-filters-root .ui-slider-horizontal {
  height: 4px !important;
  background: var(--color-border) !important;
  border: none !important;
}

/* Fix for noUiSlider in Filter Everything (if used) */
#fe-filters-root .noUi-handle {
  border: 2px solid var(--color-text-light) !important;
  border-radius: 0 !important;
  background: var(--color-accent) !important;
  width: 20px !important;
  height: 20px !important;
  box-shadow: none;
  cursor: pointer;
  transition: transform 0.2s ease;
  outline: none;
  right: -10px !important;
}

#fe-filters-root .noUi-handle:hover {
  transform: scale(1.2);
}

#fe-filters-root .noUi-connect {
  background: var(--color-accent) !important;
}

#fe-filters-root .noUi-target {
  background: var(--color-border) !important;
  border: none !important;
  box-shadow: none !important;
  height: 4px !important;
}

/* Скрываем мобильные кнопки FE на десктопе */
@media (min-width: 992px) {
  #fe-filters-root .wpc-filters-open-button-container,
  #fe-filters-root .wpc-widget-close-container {
    display: none;
  }
  #left-sidebar .catalogPluginFilter {
    position: sticky;
    top: 88px;
  }
}

/* Групповой тогглер для «Атрибути» */
#fe-filters-root .fe-attrs-toggle {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-radius: 0;
}
#fe-filters-root .fe-attrs-toggle .fe-acc-arrow {
  pointer-events: none;
}

.wpc-filters-range-wrapper input[type="number"] {
  padding: 4px 8px;
  border-radius: 0;
}

body
  .wpc-filters-main-wrap
  li.wpc-term-count-0:not(.wpc-has-not-empty-children)
  label {
  margin-right: 12px;
}

/* Added by apply_button_fixes.py */
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.button:hover,
a.button:hover {
    color: var(--color-text-on-accent) !important;
}

/* Final Button Overrides (Added by finalize_buttons.py) */
.woocommerce-message a.button {
    border-radius: 0 !important;
    color: #40312E !important;
    font-weight: 700 !important;
}

/* Ensure high contrast on all primary buttons */
button,
input[type="submit"],
input[type="button"],
.button,
a.button:not(.loading) {
    color: var(--color-text-on-accent);
    font-weight: 700;
    border-radius: 0;
}

/* Hover state for high contrast */
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.button:hover,
a.button:hover {
    color: var(--color-text-on-accent) !important;
    opacity: 0.9;
}

/* Single Product Page Fixes - Brutalist Overhaul */
.productOverview {
    margin-top: 120px !important;
    margin-bottom: 120px !important;
}

.related.products {
    padding-bottom: 120px !important;
}

.productTitle {
    font-size: clamp(20px, 2.5vw, 32px) !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.03em !important;
    color: var(--color-text-light) !important;
    margin-bottom: 16px !important;
}

.productPrice {
    color: var(--color-accent) !important;
    font-size: 3rem !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.04em !important;
}

/* Single product page top price block */
.productCart .catalogPrice {
    font-size: 2.625rem !important;
}

.productCart .catalogPrice .sale-price,
.productCart .catalogPrice .regular-price,
.productCart .catalogPrice .woocommerce-Price-amount,
.productCart .catalogPrice bdi {
    font-size: 2.625rem !important;
}

.productCart .catalogPrice .old-price {
    font-size: 1.5rem !important;
}

.productInfoLeft a {
    color: var(--color-accent) !important;
    text-decoration: none !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
}

/* Fix description text weight and color */
.productDescription p {
    font-weight: 400 !important;
    line-height: 1.6 !important;
    color: var(--color-text-muted-light) !important;
    margin-bottom: 20px !important;
}

/* Adjust headings in description */
.productDescription h2 {
    font-size: 1.5rem !important;
    margin-bottom: 24px !important;
    color: var(--color-text-white) !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.02em !important;
}

/* Gallery Images Radius */
.woocommerce-product-gallery__wrapper > div > img {
    border-radius: 0 !important;
}
/* Product image zoom — CSS transform-origin follows cursor via JS */
.woocommerce-product-gallery__wrapper > div > a {
    display: block;
    overflow: hidden;
    cursor: crosshair;
    position: relative;
}

/* Zoom lens overlay on product image */
.lm-zoom-lens {
    position: absolute;
    display: none;
    border: 2px solid var(--color-accent, #C78C47);
    background: rgba(199, 140, 71, 0.15);
    pointer-events: none;
    z-index: 10;
    box-sizing: border-box;
}

/* Zoom window — shows magnified area */
.lm-zoom-window {
    position: absolute;
    display: none;
    z-index: 9999;
    border: 1px solid var(--color-border, #443D3A);
    background-color: var(--color-bg-card, #241C1A);
    background-repeat: no-repeat;
    pointer-events: none;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

/* Hide zoom on mobile — touch doesn't support hover */
@media (max-width: 768px) {
    .lm-zoom-lens,
    .lm-zoom-window {
        display: none !important;
    }
    .woocommerce-product-gallery__wrapper > div > a {
        cursor: pointer;
    }
}
.productImage {
    overflow: hidden;
}
.productImage .flex-viewport {
    overflow: hidden !important;
}
.productImage .woocommerce-product-gallery__wrapper {
    overflow: hidden;
}

/* Gallery trigger: заменяем эмодзи на SVG-иконку */
.woocommerce-product-gallery__trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: 0;
  transition: transform 0.3s ease, opacity 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}

.woocommerce-product-gallery__trigger:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

.woocommerce-product-gallery__trigger span {
  display: none;
}

.woocommerce-product-gallery__trigger::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23261c19' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Tabs Styling */
.woocommerce-tabs ul.tabs {
    border-bottom: 1px solid var(--color-border) !important;
    margin-bottom: var(--spacing-2xl) !important;
}

.woocommerce-tabs ul.tabs li {
    background: transparent !important;
    border: none !important;
    margin-right: var(--spacing-2xl) !important;
}

.woocommerce-tabs ul.tabs li a {
    color: var(--color-text-light) !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    font-size: 1rem !important;
    letter-spacing: -0.02em !important;
    padding: 20px 0 !important;
    display: block !important;
    transition: transform 0.3s ease, opacity 0.3s ease, color 0.3s ease, background-color 0.3s ease !important;
}

.woocommerce-tabs ul.tabs li.active a {
    color: var(--color-accent) !important;
    box-shadow: none !important;
    border-bottom: 2px solid var(--color-accent) !important;
}

.woocommerce-Tabs-panel {
    padding: var(--spacing-2xl) 0 !important;
}

/* Related Products Brutalist Style */
.upsells.products,
.related.products {
  margin-top: 80px;
  padding-top: 64px;
  border-top: 8px solid #000;
}

.upsells.products h2,
.related.products h2 {
  font-size: 3rem;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: var(--spacing-2xl);
  letter-spacing: -0.03em;
}

.products .product {
  border: 1px solid var(--color-border) !important;
  padding: 24px !important;
  transition: transform 0.3s ease, opacity 0.3s ease, color 0.3s ease, background-color 0.3s ease !important;
  background: var(--color-bg-card) !important;
  border-radius: 0 !important;
}

.products .product:hover {
  transform: translateY(-5px) !important;
  border-color: var(--color-accent) !important;
  box-shadow: none !important;
}

.products .product h2 {
  font-size: 1.25rem !important;
  font-weight: 900 !important;
  margin: 20px 0 !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
  color: var(--color-text-white) !important;
}

.products .product .price {
  font-size: 1.5rem !important;
  font-weight: 900 !important;
  color: var(--color-text-white) !important;
  display: block !important;
  margin-bottom: 20px !important;
}

.products .product .button {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  background: var(--color-accent) !important;
  color: var(--color-text-on-accent) !important;
  padding: 15px !important;
  text-transform: uppercase !important;
  font-weight: 900 !important;
  font-size: 1rem !important;
  border-radius: 0 !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
  transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease !important;
}

.products .product .button:hover {
  background: var(--color-accent-sand) !important;
  color: var(--color-text-dark) !important;
}

/* ============================================
   SKELETON SCREENS - Loading placeholders
   ============================================ */

/* Skeleton animation - shimmer effect */
@keyframes skeletonShimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Base skeleton styles */
.skeleton {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.03) 0%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.03) 100%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s ease-in-out infinite;
  border-radius: 4px;
}

/* Product card skeleton */
.catalogItem.skeleton-card {
  pointer-events: none;
}

.skeleton-card .skeleton-image {
  width: 100%;
  height: 200px;
  background: rgba(255, 255, 255, 0.05);
  margin-bottom: 16px;
}

.skeleton-card .skeleton-text {
  height: 14px;
  background: rgba(255, 255, 255, 0.05);
  margin-bottom: 8px;
}

.skeleton-card .skeleton-text.short {
  width: 60%;
}

.skeleton-card .skeleton-text.medium {
  width: 80%;
}

.skeleton-card .skeleton-title {
  height: 20px;
  background: rgba(255, 255, 255, 0.05);
  margin-bottom: 12px;
  width: 90%;
}

.skeleton-card .skeleton-price {
  height: 24px;
  background: rgba(255, 255, 255, 0.05);
  width: 40%;
  margin-top: 16px;
}

.skeleton-card .skeleton-button {
  height: 48px;
  background: rgba(255, 255, 255, 0.05);
  margin-top: 16px;
  width: 48px;
}

/* Skeleton row for price + button */
.skeleton-card .skeleton-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
}

/* Loading state for catalog grid */
.catalogGrid.is-loading .catalogItem:not(.skeleton-card) {
  opacity: 0.5;
  pointer-events: none;
}

/* Skeleton for filter sidebar */
.skeleton-filter {
  padding: 16px;
}

.skeleton-filter .skeleton-filter-title {
  height: 20px;
  width: 60%;
  background: rgba(255, 255, 255, 0.05);
  margin-bottom: 16px;
}

.skeleton-filter .skeleton-filter-item {
  height: 32px;
  background: rgba(255, 255, 255, 0.03);
  margin-bottom: 8px;
  border-radius: 4px;
}

/* Pulse animation alternative */
@keyframes skeletonPulse {
  0%, 100% {
    opacity: 0.4;
  }
  50% {
    opacity: 0.8;
  }
}

.skeleton-pulse {
  animation: skeletonPulse 1.5s ease-in-out infinite;
}

/* Hide skeleton when content loaded */
.skeleton-card.loaded {
  display: none;
}

/* Skeleton grid layout - matches catalogGrid */
.skeleton-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  width: 100%;
}

@media (max-width: 1199px) {
  .skeleton-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .skeleton-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .skeleton-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   QUICK ORDER MODAL - Progressive form
   ============================================ */

.quick-order-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.quick-order-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
}

.quick-order-content {
  position: relative;
  background: var(--color-bg-main);
  border: 2px solid var(--color-accent);
  padding: 32px;
  max-width: 420px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}

.quick-order-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  color: var(--color-text-light);
  font-size: 1.75rem;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.quick-order-close:hover {
  opacity: 1;
}

.quick-order-header {
  margin-bottom: 24px;
  text-align: center;
}

.quick-order-header h3 {
  font-size: 1.5rem;
  font-weight: 900;
  text-transform: uppercase;
  margin: 0 0 8px;
  color: var(--color-text-light);
}

.quick-order-subtitle {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  margin: 0;
}

.quick-order-form .form-group {
  margin-bottom: 16px;
}

.quick-order-form label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-text-light);
}

.quick-order-form label .required {
  color: var(--color-sale);
}

.quick-order-input {
  width: 100%;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--color-border);
  color: var(--color-text-light);
  font-size: 1rem;
  transition: border-color 0.2s, background 0.2s;
}

.quick-order-input:focus {
  outline: none;
  border-color: var(--color-accent);
  background: rgba(255, 255, 255, 0.08);
}

.quick-order-input::placeholder {
  color: var(--color-text-gray);
}

textarea.quick-order-input {
  resize: vertical;
  min-height: 60px;
}

.field-hint {
  display: block;
  margin-top: 4px;
  font-size: 0.75rem;
  color: var(--color-text-gray);
}

.quick-order-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}

.quick-order-submit {
  width: 100%;
  padding: 16px 24px;
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  border: none;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.quick-order-submit:hover:not(:disabled) {
  background: var(--color-accent-sand);
}

.quick-order-submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.quick-order-submit .spinner {
  width: 20px;
  height: 20px;
}

.quick-order-expand {
  background: none;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  padding: 8px;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: transform 0.2s, opacity 0.2s, color 0.2s, background-color 0.2s;
}

.quick-order-expand:hover {
  border-color: var(--color-accent);
  color: var(--color-text-light);
}

/* Success state */
.quick-order-success {
  text-align: center;
  padding: 32px 16px;
}

.quick-order-success .success-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  color: #4CAF50;
}

.quick-order-success .success-icon svg {
  width: 100%;
  height: 100%;
}

.quick-order-success h4 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--color-text-light);
}

.quick-order-success p {
  color: var(--color-text-muted);
  margin: 0;
}

/* Product preview */
.quick-order-product {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
  margin-top: 20px;
  font-size: 0.8125rem;
}

.quick-order-product .product-label {
  color: var(--color-text-gray);
}

.quick-order-product .product-name {
  color: var(--color-text-light);
  font-weight: 600;
}

/* Step transitions */
.quick-order-step {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Quick order trigger button */
.quick-order-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: transparent;
  border: 2px solid var(--color-accent);
  color: var(--color-accent);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.2s, opacity 0.2s, color 0.2s, background-color 0.2s;
}

.quick-order-btn:hover {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
}

.quick-order-btn svg {
  width: 18px;
  height: 18px;
}

/* ============================================
   TIRE SELECTOR - Agentic UX Wizard
   ============================================ */

.tire-selector-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 100000 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
}

.tire-selector-modal[style*="display: flex"],
.tire-selector-modal[style*="display:flex"] {
  display: flex !important;
}

.tire-selector-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.9) !important;
  backdrop-filter: blur(8px) !important;
}

.tire-selector-content {
  position: relative !important;
  background: var(--color-text-on-accent) !important;
  border: 3px solid var(--color-accent) !important;
  padding: 32px !important;
  max-width: 600px !important;
  width: 100% !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  z-index: 100001 !important;
}

.tire-selector-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  color: var(--color-text-light);
  font-size: 2rem;
  cursor: pointer;
  padding: 4px 12px;
  line-height: 1;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.tire-selector-close:hover {
  opacity: 1;
}

.tire-selector-header {
  text-align: center;
  margin-bottom: 24px;
}

.tire-selector-header h2 {
  font-size: 1.75rem;
  font-weight: 900;
  text-transform: uppercase;
  margin: 0 0 8px;
  color: var(--color-accent);
}

.tire-selector-header p {
  color: var(--color-text-muted);
  margin: 0;
}

/* Progress bar */
.tire-selector-progress {
  margin-bottom: 32px;
}

.progress-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  margin-bottom: 12px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--color-accent);
  transition: width 0.3s ease;
}

.progress-steps {
  display: flex;
  justify-content: space-between;
}

.progress-steps .step {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-text-gray);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  transition: transform 0.3s ease, opacity 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}

.progress-steps .step.active {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
}

.progress-steps .step.completed {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
}

/* Step content */
.tire-step {
  animation: fadeIn 0.3s ease;
}

.tire-step h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 16px;
  color: var(--color-text-light);
  text-align: center;
}

.step-hint {
  text-align: center;
  color: var(--color-text-gray);
  font-size: 0.875rem;
  margin: -8px 0 16px;
}

/* Option cards */
.option-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.option-grid.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.option-grid.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.option-grid.small {
  gap: 8px;
}

.option-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease;
  text-align: center;
}

.option-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(199, 140, 71, 0.3);
}

.option-card.selected,
.option-card:has(input:checked) {
  background: rgba(199, 140, 71, 0.1);
  border-color: var(--color-accent);
}

.option-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.option-card .option-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.option-card .option-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(69%) sepia(58%) saturate(456%) hue-rotate(2deg) brightness(92%) contrast(89%);
}

.option-card .option-icon svg {
  width: 32px;
  height: 32px;
  color: var(--color-warning);
}

.option-card.selected .option-icon img,
.option-card:hover .option-icon img {
  filter: brightness(0) saturate(100%) invert(100%);
}

.option-card.selected .option-icon svg,
.option-card:hover .option-icon svg {
  color: var(--color-text-white);
}

.option-card .option-label {
  font-weight: 600;
  color: var(--color-text-light);
  font-size: 0.875rem;
}

.option-card .option-desc {
  font-size: 0.6875rem;
  color: var(--color-text-gray);
  margin-top: 4px;
}

.option-card.mini {
  padding: 10px 8px;
}

.option-card.mini .option-label {
  font-size: 0.8125rem;
}

/* Size inputs */
.size-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

.size-group label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.tire-select {
  width: 100%;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--color-border);
  color: var(--color-text-light);
  font-size: 1rem;
}

.tire-select:focus {
  outline: none;
  border-color: var(--color-accent);
}

.budget-group {
  margin-top: 24px;
}

.budget-group > label {
  display: block;
  margin-bottom: 12px;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

/* Navigation */
.tire-selector-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 32px;
  gap: 16px;
}

.nav-btn {
  padding: 16px 24px;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.2s, opacity 0.2s, color 0.2s, background-color 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.nav-btn.prev {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

.nav-btn.prev:hover {
  border-color: var(--color-text-light);
  color: var(--color-text-light);
}

.nav-btn.next {
  background: var(--color-accent);
  border: none;
  color: var(--color-text-on-accent);
  margin-left: auto;
}

.nav-btn.next:hover {
  background: var(--color-accent-sand);
}

/* Recommendations */
.recommendations-loading {
  padding: 24px 0;
}

.recommendations-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.recommendation-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border);
  text-decoration: none;
  transition: transform 0.2s, opacity 0.2s, color 0.2s, background-color 0.2s;
  position: relative;
}

.recommendation-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--color-accent);
}

.recommendation-card img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.02);
}

.rec-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rec-brand {
  font-size: 0.6875rem;
  color: var(--color-accent);
  text-transform: uppercase;
  font-weight: 600;
}

.rec-name {
  font-size: 0.875rem;
  color: var(--color-text-light);
  font-weight: 600;
}

.rec-price {
  font-size: 1rem;
  color: var(--color-accent);
  font-weight: 700;
}

.rec-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  font-size: 0.625rem;
  font-weight: 700;
  padding: 2px 6px;
  text-transform: uppercase;
}

.recommendations-explain {
  margin-top: 20px;
  padding: 16px;
  background: rgba(199, 140, 71, 0.1);
  border-left: 3px solid var(--color-accent);
}

.recommendations-explain h4 {
  margin: 0 0 8px;
  font-size: 0.875rem;
  color: var(--color-accent);
}

.recommendations-explain p {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.recommendations-contact {
  margin-top: 24px;
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}

.recommendations-contact p {
  margin: 0 0 12px;
  color: var(--color-text-gray);
  font-size: 0.875rem;
}

.no-results {
  text-align: center;
  color: var(--color-text-gray);
  padding: 32px 16px;
}

/* Trigger button */
.tire-selector-trigger {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 16px 28px !important;
  background: var(--color-accent) !important;
  color: var(--color-text-on-accent) !important;
  border: none !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: transform 0.2s, opacity 0.2s, color 0.2s, background-color 0.2s !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  letter-spacing: 0.02em !important;
}

.tire-selector-trigger:hover {
  background: var(--color-accent-light) !important;
  transform: scale(1.02);
}

.tire-selector-trigger svg {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
}

/* Tire Selector CTA Section */
.tire-selector-cta {
  background: linear-gradient(135deg, rgba(199, 140, 71, 0.15) 0%, rgba(199, 140, 71, 0.05) 100%) !important;
  border-top: 1px solid rgba(199, 140, 71, 0.3) !important;
  border-bottom: 1px solid rgba(199, 140, 71, 0.3) !important;
  padding: 40px 0 !important;
  margin: 0 !important;
}

.tire-selector-cta-content {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 32px !important;
}

.tire-selector-cta-text h2 {
  font-size: 26px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  margin: 0 0 8px !important;
  color: var(--color-text-white) !important;
}

.tire-selector-cta-text p {
  margin: 0 !important;
  color: var(--color-text-muted) !important;
  font-size: 0.9375rem !important;
}

@media (max-width: 768px) {
  .tire-selector-cta-content {
    flex-direction: column !important;
    text-align: center !important;
  }
  
  .tire-selector-cta-text h2 {
    font-size: 1.25rem !important;
  }
  
  .tire-selector-trigger {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ============================================
   AI SEARCH - Conversational product search
   ============================================ */

/* Горизонтальный блок: подпись над иконками, пульсация на строке иконок, по центру снизу */
.fab-twobtn {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  left: auto !important;
  transform: none !important;
  z-index: 9999 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 6px !important;
  width: auto !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* Текст над иконками — фиксированная высота, не ездит */
.fab-tooltip {
  min-height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  color: var(--color-text-dark) !important;
  pointer-events: none !important;
}
.fab-tooltip .fab-tooltip-text {
  display: block !important;
  white-space: nowrap !important;
  background: var(--color-accent) !important;
  color: var(--color-text-on-accent) !important;
  padding: 4px 12px !important;
  font-size: 0.6875rem !important;
  letter-spacing: 0.06em !important;
  opacity: 0 !important;
  transform: translateY(6px) scale(0.9) !important;
  transition:
    opacity 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Auto-cycle: tooltips appear by themselves, alternating */
@keyframes tooltipCycleSearch {
  0%, 28% { opacity: 1; transform: translateY(0) scale(1); }
  35%, 100% { opacity: 0; transform: translateY(6px) scale(0.9); }
}
@keyframes tooltipCycleCall {
  0%, 48% { opacity: 0; transform: translateY(6px) scale(0.9); }
  55%, 78% { opacity: 1; transform: translateY(0) scale(1); }
  85%, 100% { opacity: 0; transform: translateY(6px) scale(0.9); }
}
.fab-tooltip-search {
  animation: tooltipCycleSearch 6s cubic-bezier(0.34, 1.56, 0.64, 1) 2s infinite !important;
}
.fab-tooltip-call {
  position: absolute !important;
  animation: tooltipCycleCall 6s cubic-bezier(0.34, 1.56, 0.64, 1) 2s infinite !important;
}

/* Hover still overrides auto-cycle */
.fab-twobtn:has(.ai-search-fab:hover) .fab-tooltip-search,
.fab-twobtn:has(.callbutton:hover) .fab-tooltip-call {
  animation: none !important;
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

/* Одна строка иконок — только горизонтально, по центру, пульсация здесь */
.fab-btn-row {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  overflow: visible !important;
}
/* Пульсация убрана — брутализм не использует декоративные анимации */

/* ── FAB micro-interactions (2026 Dribbble / spring-physics) ── */
.fab-twobtn .ai-search-fab,
.fab-twobtn .callbutton {
  position: relative !important;
  z-index: 1 !important;
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  background: var(--color-accent) !important;
  color: var(--color-text-on-accent) !important;
  border: none !important;
  border-radius: 0 !important;
  outline: none !important;
  cursor: pointer !important;
  text-decoration: none !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 12px rgba(199, 140, 71, 0.35) !important;
  /* Spring-like cubic-bezier: overshoot then settle */
  transition:
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.4s ease,
    background 0.3s ease !important;
  will-change: transform, box-shadow !important;
}
.fab-twobtn .ai-search-fab:focus,
.fab-twobtn .callbutton:focus {
  outline: none !important;
}

/* Hover: spring bounce up + glow bloom */
.fab-twobtn .ai-search-fab:hover,
.fab-twobtn .callbutton:hover {
  transform: translateY(-6px) scale(1.05) !important;
  box-shadow:
    0 12px 32px rgba(199, 140, 71, 0.5),
    0 0 60px rgba(199, 140, 71, 0.15) !important;
}

/* Active: tactile press-down (squish) */
.fab-twobtn .ai-search-fab:active,
.fab-twobtn .callbutton:active {
  transform: translateY(1px) scale(0.92) !important;
  box-shadow: 0 1px 6px rgba(199, 140, 71, 0.3) !important;
  transition-duration: 0.1s !important;
}

.fab-twobtn .ai-search-fab svg {
  width: 24px !important;
  height: 24px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.fab-twobtn .ai-search-fab:hover svg {
  transform: scale(1.15) rotate(-8deg) !important;
}

.fab-twobtn .callbutton svg {
  width: 28px !important;
  height: 28px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.fab-twobtn .callbutton:hover svg {
  transform: scale(1.15) rotate(12deg) !important;
}

.fab-twobtn .callbutton::before,
.fab-twobtn .callbutton::after {
  display: none !important;
}

@media (max-width: 600px) {
  .fab-twobtn {
    bottom: 16px !important;
    right: 16px !important;
  }
}

@media (max-width: 375px) {
  .fab-twobtn {
    bottom: 16px !important;
    right: 12px !important;
  }
}

/* Floating Action Button (внутри fab-twobtn или отдельно) */
.ai-search-fab {
  position: fixed !important;
  bottom: 100px !important;
  right: 24px !important;
  left: auto !important;
  top: auto !important;
  z-index: 9998 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 16px 20px !important;
  background: var(--color-accent) !important;
  color: var(--color-text-on-accent) !important;
  border: none !important;
  border-radius: 0 !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 20px rgba(199, 140, 71, 0.4) !important;
  transition: transform 0.3s ease, opacity 0.3s ease, color 0.3s ease, background-color 0.3s ease !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.ai-search-fab:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 24px rgba(199, 140, 71, 0.5) !important;
}

.ai-search-fab svg {
  width: 20px !important;
  height: 20px !important;
}

.ai-search-fab .fab-label {
  display: inline !important;
}

@media (max-width: 600px) {
  .ai-search-fab {
    padding: 16px !important;
    border-radius: 0 !important;
    bottom: 90px !important;
  }
  .ai-search-fab .fab-label {
    display: none !important;
  }
}

/* Кнопка внутри .fab-twobtn — остаётся в блоке, поверх ссылки (клик = чат, не звонок) */
.fab-twobtn .ai-search-fab {
  position: relative !important;
  bottom: auto !important;
  right: auto !important;
  left: auto !important;
  top: auto !important;
  z-index: 2 !important;
}
.fab-twobtn .callbutton {
  position: relative !important;
  z-index: 1 !important;
  background: var(--color-accent, #D69844) !important;
  color: #0a0807 !important;
  box-shadow: 0 2px 12px rgba(199, 140, 71, 0.35);
  will-change: transform, opacity;
  animation: fabBreathe 3s ease-in-out infinite !important;
}

/* ── Breathing glow — GPU-composited (transform + opacity only) ── */
@keyframes fabBreathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.85; }
}

/* ── Typing dots — wave with elastic spring ── */
@keyframes fabDot {
  0%, 100% { transform: scale(1) translateY(0); opacity: 0.35; }
  25% { transform: scale(1.4) translateY(-3px); opacity: 1; }
  50% { transform: scale(0.9) translateY(1px); opacity: 0.7; }
}
.fab-twobtn .ai-search-fab svg .fab-dot-1 {
  animation: fabDot 2s cubic-bezier(0.34, 1.56, 0.64, 1) infinite !important;
}
.fab-twobtn .ai-search-fab svg .fab-dot-2 {
  animation: fabDot 2s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s infinite !important;
}
.fab-twobtn .ai-search-fab svg .fab-dot-3 {
  animation: fabDot 2s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s infinite !important;
}

/* ── Entrance: stagger pop-in on page load ── */
@keyframes fabEntrance {
  0% { opacity: 0; transform: translateY(40px) scale(0.5); }
  60% { opacity: 1; transform: translateY(-6px) scale(1.08); }
  80% { transform: translateY(2px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.fab-twobtn .ai-search-fab {
  animation: fabEntrance 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s both !important;
}
.fab-twobtn .callbutton {
  animation:
    fabEntrance 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.65s both,
    fabBreathe 3s ease-in-out 1.5s infinite !important;
}

.fab-twobtn .callbutton:hover {
  background: #e6a860 !important;
}

/* Modal */
.ai-search-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 100000 !important;
  display: none;
  align-items: stretch !important;
  justify-content: flex-end !important;
  padding: 0 !important;
  margin: 0 !important;
}

.ai-search-modal[style*="display: flex"],
.ai-search-modal[style*="display:flex"] {
  display: flex !important;
}

.ai-search-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 420px !important;
  bottom: 0 !important;
  width: auto !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.65) !important;
  backdrop-filter: blur(4px);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

/* (removed: old hero-conveyor-through-overlay hack) */

/* ── AI Search Showcase — hero-style horizontal conveyor in overlay ── */
.ai-showcase {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: auto;
}
.ai-showcase.has-items {
  opacity: 1;
}
.ai-showcase-conveyor {
  min-height: 280px;
  width: 100%;
}
/* Show product name + price inside AI showcase items */
.ai-showcase .showcase-product__name {
  display: block !important;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-text-white, #FAF8F7);
  text-align: center;
  line-height: 1.3;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-showcase .showcase-product__price {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-accent, #C78C47);
  text-align: center;
}
.ai-showcase .showcase-product__info {
  opacity: 1 !important;
  pointer-events: auto !important;
}
/* Smaller items for overlay context */
.ai-showcase .showcase-item {
  width: 180px;
  padding: 16px 0;
}
.ai-showcase .showcase-product__img {
  height: 200px;
}
/* Left/right fade masks */
.ai-showcase-conveyor::before,
.ai-showcase-conveyor::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.ai-showcase-conveyor::before {
  left: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.8), transparent);
}
.ai-showcase-conveyor::after {
  right: 0;
  background: linear-gradient(to left, rgba(0,0,0,0.8), transparent);
}
/* Pause conveyor on hover */
.ai-showcase-conveyor:hover .showcase-track.conveyor-animate {
  animation-play-state: paused;
}

/* ── Compact product list inside chat (replaces old cards) ── */
.search-results-compact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}
.search-result-inline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: rgba(199, 140, 71, 0.08);
  border-left: 2px solid var(--color-accent, #C78C47);
  text-decoration: none;
  transition: background 0.2s;
  gap: 12px;
}
.search-result-inline:hover {
  background: rgba(199, 140, 71, 0.2);
}
.search-result-inline .result-name {
  font-size: 0.75rem;
  color: var(--color-text-light, #FAF8F7);
  line-height: 1.3;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-result-inline .result-price {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-accent, #C78C47);
  white-space: nowrap;
}

/* Mobile: hide showcase, overlay full width */
@media (max-width: 600px) {
  .ai-search-overlay {
    right: 0 !important;
  }
  .ai-showcase {
    display: none !important;
  }
}

.ai-search-panel {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 420px !important;
  max-width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  background: var(--color-text-on-accent) !important;
  border-left: 3px solid var(--color-accent) !important;
  display: flex !important;
  flex-direction: column !important;
  animation: slideInRight 0.3s ease !important;
  z-index: 100001 !important;
}

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@media (max-width: 600px) {
  .ai-search-panel {
    width: 100vw !important;
    border-left: none !important;
  }
}

.ai-search-header {
  padding: 20px !important;
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
  position: relative !important;
  background: var(--color-bg-dark) !important;
  flex-shrink: 0 !important;
}

.ai-search-header h3 {
  margin: 0 0 4px !important;
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  color: var(--color-accent) !important;
  text-transform: uppercase;
}

.ai-search-header p {
  margin: 0 !important;
  font-size: 0.8125rem !important;
  color: var(--color-text-muted) !important;
}

.ai-search-close {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  background: none !important;
  border: none !important;
  color: var(--color-text-muted) !important;
  font-size: 1.75rem !important;
  cursor: pointer !important;
  padding: 4px 8px !important;
  line-height: 1 !important;
}

.ai-search-close:hover {
  color: var(--color-text-white) !important;
}

/* New chat button */
.ai-search-new-chat {
  position: absolute !important;
  top: 12px !important;
  right: 48px !important;
  background: none !important;
  border: none !important;
  color: rgba(255,255,255,0.5) !important;
  cursor: pointer !important;
  padding: 4px !important;
  line-height: 1 !important;
  transition: color 0.2s !important;
}
.ai-search-new-chat:hover {
  color: var(--color-text-white) !important;
}

/* Messages */
.ai-search-messages {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  background: var(--color-text-on-accent) !important;
}

.ai-message {
  display: flex !important;
  gap: 12px !important;
  animation: fadeIn 0.3s ease !important;
}

.ai-message.user {
  flex-direction: row-reverse !important;
}

.message-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 0 !important;
  background: var(--color-bg-dark-input) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.875rem !important;
  flex-shrink: 0 !important;
  color: var(--color-accent) !important;
}
.message-avatar .avatar-svg {
  width: 20px !important;
  height: 20px !important;
}
.message-avatar .avatar-initial {
  font-weight: 700 !important;
  color: var(--color-text-on-accent) !important;
}
.ai-message.user .message-avatar {
  background: var(--color-accent) !important;
  color: var(--color-text-on-accent) !important;
}
.ai-message.user .message-avatar .avatar-svg {
  color: var(--color-text-on-accent) !important;
}

.message-content {
  max-width: 85% !important;
  padding: 12px 16px !important;
  background: var(--color-bg-dark-alt) !important;
  border-radius: 0 !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
  color: var(--color-text-light) !important;
}

.ai-message.user .message-content {
  background: var(--color-accent) !important;
  color: var(--color-text-on-accent) !important;
  border-radius: 0 !important;
}

.ai-message.assistant .message-content {
  border-radius: 0 !important;
}

/* Manager messages */
.ai-message.manager {
  flex-direction: row;
}
.ai-message.manager .message-avatar {
  background: var(--color-accent, #C78C47);
  border-radius: 0;
}
.ai-message.manager .message-avatar .avatar-svg {
  color: #fff;
  width: 20px;
  height: 20px;
}
.ai-message.manager .message-content {
  background: rgba(199, 140, 71, 0.12);
  border-left: 3px solid var(--color-accent, #C78C47);
  border-radius: 0 !important;
}
.message-role-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-accent, #C78C47);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

/* System notices */
.ai-message.system {
  justify-content: center;
}
.ai-message.system .message-content.system-notice {
  background: transparent;
  text-align: center;
  font-size: 13px;
  color: var(--color-text-muted, #999);
  font-style: italic;
  padding: 8px 16px;
  border: 1px dashed var(--color-border, #3a3230);
}

/* Manager request bar */
.ai-search-manager-bar {
  padding: 8px 16px;
  border-top: 1px solid var(--color-border, #3a3230);
}
.ai-request-manager {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--color-accent, #C78C47);
  color: var(--color-accent, #C78C47);
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.ai-request-manager:hover {
  background: var(--color-accent, #C78C47);
  color: #fff;
}
.ai-search-manager-bar.requested .ai-request-manager {
  opacity: 0.5;
  pointer-events: none;
}
.ai-search-manager-bar.requested .ai-request-manager span::after {
  content: ' ✓';
}

.message-content p {
  margin: 0 0 8px !important;
}

.message-content p:last-child {
  margin: 0 !important;
}

/* Quick prompts */
.quick-prompts {
  list-style: none !important;
  padding: 0 !important;
  margin: 12px 0 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.quick-prompts li {
  padding: 8px 14px !important;
  background: rgba(199, 140, 71, 0.2) !important;
  border: 1px solid rgba(199, 140, 71, 0.4) !important;
  border-radius: 0 !important;
  font-size: 0.8125rem !important;
  cursor: pointer !important;
  transition: transform 0.2s, opacity 0.2s, color 0.2s, background-color 0.2s !important;
  color: var(--color-text-muted) !important;
}

.quick-prompts li:hover {
  background: var(--color-accent) !important;
  color: var(--color-text-on-accent) !important;
  border-color: var(--color-accent) !important;
}

/* Typing indicator */
.typing-indicator {
  display: inline-flex !important;
  gap: 5px !important;
  padding: 4px 0 !important;
}

.typing-indicator span {
  width: 8px !important;
  height: 8px !important;
  background: var(--color-text-gray-dark) !important;
  border-radius: 0 !important;
  animation: typingBounce 1.4s infinite ease-in-out !important;
}

.typing-indicator span:nth-child(2) {
  animation-delay: 0.2s !important;
}

.typing-indicator span:nth-child(3) {
  animation-delay: 0.4s !important;
}

@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-8px); opacity: 1; }
}

/* Search results in chat */
.search-results {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-top: 12px !important;
}

.search-result-card {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px !important;
  background: var(--color-bg-dark-input) !important;
  border: 1px solid var(--color-border-dark) !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  transition: transform 0.2s, opacity 0.2s, color 0.2s, background-color 0.2s !important;
}

.search-result-card:hover {
  background: var(--color-border-dark-alt) !important;
  border-color: var(--color-accent) !important;
  transform: translateX(4px);
}

.search-result-card img {
  width: 56px !important;
  height: 56px !important;
  object-fit: contain !important;
  background: var(--color-bg-dark) !important;
  border-radius: 0 !important;
}

.search-result-card .result-name {
  display: block !important;
  font-size: 0.8125rem !important;
  color: var(--color-text-light) !important;
  font-weight: 600 !important;
  margin-bottom: 4px !important;
  line-height: 1.3;
}

.search-result-card .result-price {
  font-size: 0.9375rem !important;
  color: var(--color-accent) !important;
  font-weight: 700 !important;
}

/* AI response text formatting */
.ai-response-text {
  line-height: 1.6;
}
.ai-response-text ul,
.ai-response-text ol {
  margin: 8px 0;
  padding-left: 20px;
}
.ai-response-text li {
  margin-bottom: 4px;
}
.ai-inline-product {
  color: var(--color-accent) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  font-weight: 600;
  transition: opacity 0.15s;
}
.ai-inline-product:hover {
  opacity: 0.8;
}

/* Input area */
.ai-search-input-wrap {
  padding: 16px !important;
  border-top: 1px solid rgba(255,255,255,0.1) !important;
  display: flex !important;
  gap: 10px !important;
  background: var(--color-bg-dark) !important;
  flex-shrink: 0 !important;
}

.ai-search-input-wrap input {
  flex: 1 !important;
  padding: 16px !important;
  background: var(--color-bg-dark-input) !important;
  border: 1px solid var(--color-border-dark) !important;
  color: var(--color-text-white) !important;
  font-size: 0.875rem !important;
  border-radius: 0 !important;
}

.ai-search-input-wrap input:focus {
  outline: none !important;
  border-color: var(--color-accent) !important;
  background: var(--color-border-dark-alt) !important;
}

.ai-search-input-wrap input::placeholder {
  color: var(--color-text-muted) !important;
}

.ai-search-input-wrap button {
  width: 48px !important;
  height: 48px !important;
  background: var(--color-accent) !important;
  border: none !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.2s, opacity 0.2s, color 0.2s, background-color 0.2s !important;
  flex-shrink: 0 !important;
  color: var(--color-text-on-accent) !important;
}

.ai-search-input-wrap button:hover {
  background: var(--color-accent-light) !important;
  transform: scale(1.05);
}

.ai-search-input-wrap button svg,
.ai-search-input-wrap button .icon-send {
  width: 20px !important;
  height: 20px !important;
  color: var(--color-text-on-accent) !important;
}

/* Брутализм: жёстко убираем скругления внутри модалки (перебивает любые глобальные стили) */
#aiSearchModal .message-avatar,
#aiSearchModal .message-content,
#aiSearchModal .ai-message.user .message-content,
#aiSearchModal .ai-message.assistant .message-content,
#aiSearchModal .quick-prompts li,
#aiSearchModal .ai-search-input-wrap input,
#aiSearchModal .ai-search-input-wrap button {
  border-radius: 0 !important;
}

/* Mobile */
@media (max-width: 600px) {
  .tire-selector-content {
    padding: 24px 16px;
  }
  
  .option-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .option-grid.cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .tire-step h3 {
    font-size: 1.125rem;
  }
}

/* Skeleton for single product page */
.product-skeleton {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  padding: 32px;
}

.product-skeleton .skeleton-gallery {
  aspect-ratio: 1;
  background: rgba(255, 255, 255, 0.05);
}

.product-skeleton .skeleton-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.product-skeleton .skeleton-info .skeleton-title {
  height: 32px;
  width: 80%;
}

.product-skeleton .skeleton-info .skeleton-price {
  height: 40px;
  width: 30%;
}

.product-skeleton .skeleton-info .skeleton-desc {
  height: 100px;
  width: 100%;
}

.product-skeleton .skeleton-info .skeleton-button {
  height: 56px;
  width: 200px;
}

/* ═══════════════════════════════════════════
   Blog / News Archive
   ═══════════════════════════════════════════ */

.blogArchive {
  padding: 60px 0 80px;
}

.blogArchive__header {
  margin-bottom: 48px;
}

.blogArchive__title {
  font-size: 2.25rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--color-text-light);
  margin-bottom: 24px;
}

.blogArchive__cats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.blogArchive__catLink {
  display: inline-flex;
  align-items: center;
  padding: 8px 20px;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  background: transparent;
  text-decoration: none;
  transition: transform 0.25s ease, opacity 0.25s ease, color 0.25s ease, background-color 0.25s ease;
}

.blogArchive__catLink:hover {
  color: var(--color-text-light);
  border-color: var(--color-text-light);
}

.blogArchive__catLink.is-active {
  color: var(--color-text-on-accent);
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.blogArchive__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.blogArchive__pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 48px;
}

.blogArchive__pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  font-weight: 700;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  text-decoration: none;
  transition: transform 0.25s ease, opacity 0.25s ease, color 0.25s ease, background-color 0.25s ease;
}

.blogArchive__pagination .page-numbers:hover {
  color: var(--color-text-light);
  border-color: var(--color-text-light);
}

.blogArchive__pagination .page-numbers.current {
  color: var(--color-text-on-accent);
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.blogArchive__empty {
  text-align: center;
  padding: 80px 0;
  color: var(--color-text-muted);
  font-size: 1.125rem;
}

/* Blog Card */
.blogCard {
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  overflow: hidden;
  transition: transform 0.35s ease, opacity 0.35s ease, color 0.35s ease, background-color 0.35s ease;
}

.blogCard:hover {
  border-color: var(--color-accent);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}

.blogCard__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.blogCard__image {
  width: 100%;
  height: 220px;
  overflow: hidden;
}

.blogCard__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.blogCard:hover .blogCard__image img {
  transform: scale(1.06);
}

.blogCard__image--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.03);
  color: var(--color-text-muted);
}

.blogCard__content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blogCard__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

.blogCard__cat {
  color: var(--color-accent);
}

.blogCard__title {
  font-size: 1.125rem;
  font-weight: 900;
  line-height: 1.3;
  color: var(--color-text-light);
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blogCard__excerpt {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin-bottom: 16px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blogCard__readmore {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-accent);
  margin-top: auto;
  transition: gap 0.25s ease;
}

.blogCard:hover .blogCard__readmore {
  gap: 12px;
}

/* White theme */

/* Blog responsive */
@media screen and (max-width: 992px) {
  .blogArchive__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .blogArchive__title {
    font-size: 1.75rem;
  }
}

@media screen and (max-width: 600px) {
  .blogArchive__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .blogArchive__title {
    font-size: 22px;
  }
  .blogCard__image {
    height: 180px;
  }
  .blogCard__content {
    padding: 16px;
  }
}

/* ────────────────────────────────────────────────────────
   Showcase Conveyor — бесконечная лента товаров (70%)
   ──────────────────────────────────────────────────────── */

/* Wrapper: contains header + belt + arrows */
.showcase-swiper-wrap {
    position: relative;
    min-width: 0;
    height: var(--hero-h, var(--hero-max-height, 700px));
    background:
        /* Left-side concentric arcs (static) */
        radial-gradient(circle 500px at -10% 55%, transparent 220px, rgba(199,140,71,0.08) 222px, rgba(199,140,71,0.08) 247px, transparent 249px),
        radial-gradient(circle 500px at -10% 55%, transparent 280px, rgba(199,140,71,0.05) 282px, rgba(199,140,71,0.05) 312px, transparent 314px),
        radial-gradient(circle 500px at -10% 55%, transparent 345px, rgba(199,140,71,0.03) 347px, rgba(199,140,71,0.03) 372px, transparent 374px),
        /* Soft vignette — industrial hangar edges */
        radial-gradient(ellipse 80% 70% at 50% 50%, transparent 55%, var(--hero-vignette) 100%),
        /* Diffused warm ambient — not a spotlight */
        radial-gradient(ellipse 90% 60% at 50% 30%, var(--hero-ambient), transparent 60%),
        /* Base */
        linear-gradient(180deg, var(--hero-bg-top) 0%, var(--hero-bg-bottom) 100%);
    display: flex;
    flex-direction: column;
    overflow: visible; /* Focused product breaks all bounds — header z-index clips from above */
    perspective: 1200px; /* 3D stage */
    perspective-origin: 50% 50%;
}
/* WebGL active — remove CSS arcs, keep only vignette/ambient/base */
.showcase-swiper-wrap.has-webgl {
    background:
        radial-gradient(ellipse 80% 70% at 50% 50%, transparent 55%, var(--hero-vignette) 100%),
        radial-gradient(ellipse 90% 60% at 50% 30%, var(--hero-ambient), transparent 60%),
        linear-gradient(180deg, var(--hero-bg-top) 0%, var(--hero-bg-bottom) 100%);
}
.showcase-swiper-wrap.has-webgl .hero-field-bg { display: none; }
/* ─── Light-off transition — power cut effect for preset changes ─── */
/* Only dims the "stage" elements — header, tabs, CTA stay visible */
.showcase-swiper-wrap.lights-off::before {
    opacity: 0 !important;
    transition: opacity 0.4s ease;
}
.showcase-swiper-wrap.lights-off .hero-field-bg,
.showcase-swiper-wrap.lights-off .showcase-conveyor,
.showcase-swiper-wrap.lights-off .hero-hover-info,
.showcase-swiper-wrap.lights-off .showcase-big-title,
.showcase-swiper-wrap.lights-off .showcase-big-title--extra,
.showcase-swiper-wrap.lights-off .showcase-swiss-circle {
    opacity: 0 !important;
    transition: opacity 0.4s ease;
}
.showcase-swiper-wrap.lights-on::before {
    transition: opacity 0.6s ease 0.1s;
}
.showcase-swiper-wrap.lights-on .hero-field-bg,
.showcase-swiper-wrap.lights-on .showcase-conveyor,
.showcase-swiper-wrap.lights-on .hero-hover-info,
.showcase-swiper-wrap.lights-on .showcase-big-title,
.showcase-swiper-wrap.lights-on .showcase-big-title--extra,
.showcase-swiper-wrap.lights-on .showcase-swiss-circle {
    transition: opacity 0.6s ease 0.1s;
}

/* Brandbook concentric arcs — two sets, counter-rotating (стр. 16, 20) */
.hero-field-bg {
    position: absolute;
    top: 50%;
    right: -280px;
    transform: translateY(-50%);
    width: 700px;
    height: 700px;
    border-radius: 50%;
    background: transparent;
    border: 30px solid rgba(199,140,71,0.10);
    border-top-color: rgba(199,140,71,0.03);
    border-left-color: rgba(199,140,71,0.03);
    box-shadow:
        0 0 0 10px transparent,
        0 0 0 45px rgba(199,140,71,0.07),
        0 0 0 48px transparent,
        0 0 0 80px rgba(199,140,71,0.04);
    z-index: 0;
    pointer-events: none;
    animation: heroArcsR 120s linear infinite;
}
@keyframes heroArcsR {
    from { transform: translateY(-50%) rotate(0deg); }
    to   { transform: translateY(-50%) rotate(360deg); }
}
@keyframes heroArcsL {
    from { transform: translateY(-50%) rotate(0deg); }
    to   { transform: translateY(-50%) rotate(-360deg); }
}

/* Industrial ceiling lamp — cone of light from above center */
.showcase-swiper-wrap::before {
    content: '';
    position: absolute;
    top: -5%;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 60%;
    clip-path: inset(8% 0 0 0); /* Keep lamp inside wrap bounds */
    background: radial-gradient(ellipse 60% 80% at 50% 0%,
        var(--hero-ceiling-light) 0%,
        var(--hero-ceiling-warm) 35%,
        transparent 70%);
    z-index: 0;
    pointer-events: none;
    animation: ceilingFlicker 18s ease-in-out infinite;
}
/* Ambient floor reflection — warm industrial bounce */
.showcase-swiper-wrap::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 25%;
    background: linear-gradient(0deg, var(--hero-floor-bounce) 0%, transparent 100%);
    z-index: 0;
    pointer-events: none;
}

/* Industrial lamp flicker — rare, subtle power fluctuation */
@keyframes ceilingFlicker {
    0%, 100% { opacity: 1; }
    /* Stable for most of the cycle */
    72% { opacity: 1; }
    /* Quick flicker — like a power dip */
    73% { opacity: 0.4; }
    73.5% { opacity: 0.9; }
    74% { opacity: 0.3; }
    74.3% { opacity: 1; }
    /* Stable again */
    75% { opacity: 1; }
}

/* ─── Fixed header — lives above the belt ─── */
/* Framing: top "canopy" — soft shadow below header closes the frame from above,
   mirroring the floor-bounce gradient at the bottom (principle 4.2) */
.showcase-swiper-wrap .showcase-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 14px 28px;
    border-bottom: none;
    position: relative;
    z-index: 5;
    flex-shrink: 0;
    font-family: 'Manrope', sans-serif;
}

/* CTA button — now outside header, in its own container */
.showcase-header .btn-hero-action {
    display: none; /* hidden inside header — real one is outside */
}
.hero-cta-wrap {
    position: absolute;
    bottom: 28px;
    right: 28px;
    z-index: 60;
}
.hero-cta-wrap .btn-hero-action {
    padding: 16px 40px;
    font-size: 0.875rem;
    letter-spacing: 0.1em;
    box-shadow:
        0 0 25px rgba(199, 140, 71, 0.25),
        inset 0 1px 0 var(--hero-nav-border);
}
.hero-cta-wrap .btn-hero-action svg {
    width: 18px;
    height: 18px;
}

.showcase-title {
    font-family: 'Manrope', sans-serif;
    font-size: 22px;
    font-weight: 800;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--color-text-white, #FAF8F7);
}

/* Category links row — Industrial Brutalist style */
.showcase-cats {
    display: flex;
    gap: 0;
    flex-wrap: wrap;
}
.showcase-cat-link {
    color: var(--hero-text-muted);
    text-decoration: none;
    font-family: 'Manrope', sans-serif;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: transparent;
    border: 1px solid var(--hero-border-subtle);
    border-right: none;
    padding: 8px 18px;
    border-radius: 0;
    transition: transform 0.15s ease, opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease;
    white-space: nowrap;
    cursor: pointer;
}
.showcase-cat-link:last-child {
    border-right: 1px solid var(--hero-border-subtle);
}
.showcase-cat-link:hover {
    background: var(--hero-bg-hover);
    color: var(--hero-text-primary);
}
.showcase-cat-link.is-active {
    background: var(--color-accent, #C78C47);
    color: var(--color-text-on-accent, #0a0807);
    border-color: var(--color-accent, #C78C47);
}

/* ─── Hero Composition Layer (Swiss Style: Müller-Brockmann) ─── */
.showcase-hero-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: block; /* Free canvas for absolute positioning */
    pointer-events: none;
    overflow: visible;
}

/* 1. Primary brand text — top-left grid anchor (Müller-Brockmann grid).
   font-size: единый clamp вместо ступенчатых vw на брейкпойнтах (Frain p.175). */
.showcase-big-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 900;
    font-size: clamp(3rem, 16vw, 12rem);
    line-height: 0.8;
    letter-spacing: -0.04em;
    text-transform: uppercase;

    color: var(--hero-text-ghost);
    -webkit-text-stroke: 1.5px var(--hero-text-stroke);
    text-shadow: 0 0 80px rgba(199, 140, 71, 0.12);

    position: absolute;
    top: 90px;
    left: 3%;
    white-space: nowrap;

    transform-origin: left top;
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.showcase-big-title.fade-out {
    opacity: 0;
    transform: translateX(-30px);
}

/* 1b. Secondary text — bottom-right, diagonal tension with primary */
.showcase-big-title--extra {
    font-size: clamp(2rem, 9vw, 8rem);
    top: auto;
    left: auto;
    right: 3%;
    bottom: 20px;
    transform: none;
    text-align: right;
    transform-origin: right bottom;
    color: rgba(199, 140, 71, 0.05);
    -webkit-text-stroke: 1px rgba(199, 140, 71, 0.10);
    text-shadow: 0 0 60px rgba(199, 140, 71, 0.06);
    opacity: 0;
    transition: opacity 0.4s ease;
}
.showcase-big-title--extra.is-visible {
    opacity: 1;
}
.showcase-big-title--extra.fade-out {
    opacity: 0;
    transform: translateX(30px);
}

/* 2. Geometric Shape (Circle Segment - Tire/Industrial) */
/* Tonal perspective: layer 2 (decor) raised to 0.14 to bridge the gap
   between background (0.03) and navigation (0.35) — principle 4.1 */
.showcase-swiss-circle {
    position: absolute;
    right: -10vw;
    bottom: -20vw;
    width: 60vw;
    height: 60vw;
    border-radius: 50%;
    border: 1px solid var(--color-accent, #C78C47);
    opacity: 0.14;
    z-index: -1;
}
.showcase-swiss-circle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    height: 70%;
    border-radius: 50%;
    border: 60px solid rgba(199, 140, 71, 0.07); /* Thick tire-like ring */
}

/* ─── Static / Energy-saving mode ─── */
/* Kill all auto-animations */
.showcase-swiper-wrap[data-static-mode="1"] .hero-field-bg,
.showcase-swiper-wrap[data-static-mode="1"] .showcase-swiss-circle {
    animation: none;
}
.showcase-swiper-wrap[data-static-mode="1"]::before {
    animation: none;
    opacity: 0.5; /* subtle static glow, no flicker */
}
/* Hide decorative noise: arcs, circle, bg-extra (subtitle controlled by responsive settings) */
.showcase-swiper-wrap[data-static-mode="1"] .hero-field-bg,
.showcase-swiper-wrap[data-static-mode="1"] .showcase-swiss-circle,
.showcase-swiper-wrap[data-static-mode="1"] .showcase-big-title--extra {
    display: none !important;
}

/* 3. Subtitle — Brutalist micro-typography (logical properties для i18n future) */
.showcase-subtitle {
    position: absolute;
    inset-inline-start: var(--st-x);
    inset-block-end: var(--st-y);
    z-index: 20;
    display: var(--st-display);
    font-family: 'Manrope', sans-serif;
    font-size: var(--st-fs);
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--hero-text-muted);
    text-transform: uppercase;
    max-width: var(--st-max-w);
    line-height: 1.5;
    pointer-events: none;
    border-inline-start: 3px solid var(--color-accent, #C78C47);
    padding-inline-start: var(--st-pad-l);
    /* Wipe reveal via transform (cheaper than clip-path) */
    overflow: hidden;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}
.showcase-subtitle.is-visible {
    transform: scaleX(1);
    opacity: 1;
}

/* ─── Hero Specs Panel — Raw values only, industrial strip ─── */
.hero-specs {
    position: absolute;
    inset-inline-start: var(--hs-x);
    inset-block-end: var(--hs-y);
    display: var(--hs-display);
    flex-direction: row;
    align-items: baseline;
    gap: var(--hs-gap);
    pointer-events: auto !important;
    z-index: 20;
    opacity: 0;
    transition: opacity 0.3s ease;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: var(--hs-pad-y) var(--hs-pad-x);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.hero-specs.is-visible {
    opacity: 1;
}
.hero-specs__row {
    display: flex;
    align-items: baseline;
    gap: 0;
    padding: 0;
    border: none;
}
.hero-specs__label {
    display: none; /* No labels — just values */
}
.hero-specs__value {
    font-family: 'Manrope', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--hero-text-spec);
    text-transform: uppercase;
    transition: transform 0.3s, opacity 0.3s, color 0.3s, background-color 0.3s;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.hero-specs__value--mono {
    font-family: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--hero-text-dim);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.hero-specs__value--link {
    color: rgba(199, 140, 71, 1);
    text-decoration: none;
    cursor: pointer;
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 4px rgba(199, 140, 71, 0.3);
}
.hero-specs__value--link:hover {
    color: #e6a860;
    text-shadow: 0 0 20px rgba(199, 140, 71, 0.4);
}
/* Separator dots between spec values */
.hero-specs__row + .hero-specs__row::before {
    content: '·';
    color: var(--hero-nav-border);
    font-size: 1.125rem;
    margin-right: 24px;
    line-height: 1;
}

/* Strategic CTA — THE brightest object on screen */
.btn-hero-action {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 18px 48px;
    background: var(--color-accent, #C78C47);
    color: var(--color-text-on-accent, #0a0807);
    font-family: 'Manrope', sans-serif;
    font-size: 0.875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    text-decoration: none;
    border: none;
    transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease;
    position: relative;
    overflow: hidden;
}
.btn-hero-action::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
    transition: left 0.5s ease;
    pointer-events: none;
    z-index: 1;
}
.btn-hero-action:hover::before {
    left: 100%;
}

.btn-hero-action:hover {
    background: #e6a860;
    transform: translateY(-3px) scale(1.04);
    color: #000;
    box-shadow: 0 8px 30px rgba(199, 140, 71, 0.4);
    /* spring bounce via linear() */
    transition-timing-function: linear(
        0, 0.006, 0.025, 0.058, 0.107, 0.168, 0.245, 0.332,
        0.428, 0.53, 0.636, 0.741, 0.843, 0.937, 0.99, 1.02,
        1.036, 1.04, 1.036, 1.024, 1.009, 0.995, 0.984, 0.979,
        0.979, 0.983, 0.989, 0.996, 1.001, 1.003, 1.003, 1.001, 1
    );
    transition-duration: 0.35s;
}
.btn-hero-action:active {
    transform: translateY(0) scale(0.97);
    transition-duration: 0.1s;
}

.btn-hero-action svg {
    width: 18px;
    height: 18px;
    transition: transform 0.3s;
}
.btn-hero-action:hover svg {
    transform: translateX(5px);
}

/* ── Gradient shimmer sweep — all gold-fill CTA buttons ── */
.catalogMoreBtn,
.catalogBtns .btn-primary,
.catalogCart a.button,
.tire-selector-trigger,
.single-product .productCart button,
.quick-order-submit,
.quick-order-btn {
    position: relative;
    overflow: hidden;
}
.catalogMoreBtn::before,
.catalogBtns .btn-primary::before,
.catalogCart a.button::before,
.tire-selector-trigger::before,
.single-product .productCart button::before,
.quick-order-submit::before,
.quick-order-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
    transition: left 0.5s ease;
    pointer-events: none;
    z-index: 1;
}
.catalogMoreBtn:hover::before,
.catalogBtns .btn-primary:hover::before,
.catalogCart a.button:hover::before,
.tire-selector-trigger:hover::before,
.single-product .productCart button:hover::before,
.quick-order-submit:hover::before,
.quick-order-btn:hover::before {
    left: 100%;
}

.marketing-highlight {
    display: none; /* Replaced by button */
}
.marketing-text {
    display: none;
}

/* Hide clutter */
.showcase-decor-line, 
.showcase-meta-info {
    display: none;
}
.meta-separator { display: none; }

/* ─── The conveyor belt — Cinematic Showcase ─── */
.showcase-conveyor {
    z-index: 2;
    flex: 1 1 auto;
    min-height: 340px;
    overflow: visible; /* No overflow clip — JS handles edge fade, header clips top */
    position: relative;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
    display: flex;
    align-items: center;
}
.showcase-conveyor:hover,
.showcase-conveyor.is-paused {
    z-index: 10; /* Rise above showcase-header (z-index:5) so info cards aren't clipped */
}

.showcase-track {
    display: flex;
    gap: 96px; /* Extra space so scale(2.3) items don't touch */
    align-items: center;
    width: max-content;
    will-change: transform;
    padding: 0 10vw; /* Center the first items */
    transform-style: preserve-3d; /* Enable 3D angular conveyor */
}

/* Бесконечная плавная прокрутка — Медленная, медитативная */
@keyframes conveyorScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(calc(var(--conveyor-width, 3000px) * -1)); }
}
.showcase-track.conveyor-animate {
    animation: conveyorScroll var(--conveyor-speed, 60s) linear infinite;
}

/* Pause on hover for readability */
.showcase-conveyor:hover .showcase-track.conveyor-animate {
    animation-play-state: paused;
}

/* ─── Showcase Item — concept parameters (Stepanov-style regular type) ───
   Все варианты item'а определяются единым набором custom props.
   Media queries переопределяют ТОЛЬКО переменные, не правила.
   Аксиомы:
     - default state = subdued (низкая opacity + grayscale + scale ≤ 1)
     - focused state = highlighted (opacity 1 + clean filter + scale ≥ 1)
     - на desktop (≥768px) JS управляет transform per-frame через rAF; CSS — fallback
     - на mobile JS-3D off → CSS управляет через transition */
.showcase-swiper-wrap {
    /* Wrapper geometry — Frain: rem-based для accessibility (root font scaling) */
    --hero-h: var(--hero-max-height, 43.75rem); /* 700px */

    /* Showcase Item — concept parameters */
    --si-width: 17.5rem;       /* 280px */
    --si-padding-y: 1.5rem;    /* 24px */
    --si-img-height: 18.75rem; /* 300px */
    --si-img-max-h: 20rem;     /* 320px */

    --si-opacity-default: 0.25;
    --si-opacity-focused: 1;
    --si-scale-default: 0.82;
    --si-scale-focused: 2.3; /* JS overrides via data-peak-scale on desktop */
    --si-filter-default: grayscale(50%) contrast(0.85) brightness(0.6);
    --si-filter-focused: grayscale(0%) contrast(1.1) brightness(1.15) saturate(1.1);

    --si-z-focused: 10;
    --si-transition: none; /* desktop: JS rAF; mobile overrides to ease */

    /* Subtitle — Brutalist micro-typography */
    --st-x: 1.75rem;     /* 28px */
    --st-y: 1.75rem;
    --st-fs: 0.8125rem;
    --st-max-w: 26.25rem; /* 420px */
    --st-pad-l: 1rem;     /* 16px */
    --st-display: block;

    /* Hero Specs panel */
    --hs-x: 1.75rem;     /* 28px */
    --hs-y: 5.625rem;    /* 90px */
    --hs-gap: 1.5rem;    /* 24px */
    --hs-pad-y: 0.625rem; /* 10px */
    --hs-pad-x: 1.25rem;  /* 20px */
    --hs-display: flex;

    /* Item Specs — Brockmann modular scale × scale(--si-scale-focused) */
    --is-fs: 0.5rem;          /* × 2.3 ≈ 18px on focused */
    --is-fs-size: 0.5625rem;  /* × 2.3 ≈ 21px focused (akcent) */
    --is-tracking: 0.05em;
    --is-sep-margin: 0.25rem; /* 4px */
    --is-sep-fs: 0.625rem;

    /* Focal decoration — brandbook: warm brutalism (warmth = static, not motion) */
    --glow-size: 25rem;     /* 400px ambient warmth disc */
    --shadow-w: 11.25rem;   /* 180px ground shadow ellipse */
    --shadow-h: 1.25rem;    /* 20px */
    --shadow-y: 1rem;       /* 16px from card bottom */
    --lift-y: -1.5rem;      /* lift focused/hover product (showcase plinth) */
}

/* ─── Product card on the belt — Cinematic Object ─── */
.showcase-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--color-text-white, #FAF8F7);
    width: var(--si-width);
    flex-shrink: 0;
    cursor: pointer;
    padding: var(--si-padding-y) 0;
    position: relative;

    opacity: var(--si-opacity-default);
    filter: var(--si-filter-default);
    transform: scale(var(--si-scale-default));
    transition: var(--si-transition);
    will-change: transform, opacity, filter;
}

/* Reduced motion — disable conveyor animations, keep static */
@media (prefers-reduced-motion: reduce) {
    .showcase-item {
        filter: none !important;
        transition: none !important;
    }
    .showcase-track.conveyor-animate {
        animation: none !important;
    }
    .showcase-subtitle {
        clip-path: none !important;
        transition: opacity 0.01ms !important;
    }
}

.showcase-product__img {
    background: transparent;
    width: 100%;
    height: var(--si-img-height);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: visible;
    position: relative;
    transition: transform 0.4s ease;
}

.showcase-product__img img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: var(--si-img-max-h);
    aspect-ratio: 1; /* tire images are square 300×300 (PHP) — reserve space → 0 CLS */
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.6));
}

/* ─── Crescendo Rhythm + 3D Angular Conveyor ─── */
/* Principle 4.8: Contrast & Rhythm — crescendo toward the focal point.
   Managed by JS (updateFocusedItem) which sets inline styles for:
   - 3D rotateY angle based on distance from center
   - Crescendo opacity/filter for near-focus items
   See: entry-client.js updateFocusedItem() */
/* ─── THE SPOTLIGHT: Focused item — Hero Centerpiece ─── */
/* Composition: focal point dominates 40%+ of visual weight.
   Rule of thirds: product sits at left-center power point.
   Contrast ratio ~6:1 between focused and background items. */
.showcase-item:hover,
.showcase-item.is-focused {
    opacity: var(--si-opacity-focused);
    filter: var(--si-filter-focused);
    transform: scale(var(--si-scale-focused));
    z-index: var(--si-z-focused);
}
/* Ambient warmth disc behind focused — static (brandbook: warm brutalism = no motion) */
.showcase-item.is-focused::before {
    content: '';
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: var(--glow-size);
    height: var(--glow-size);
    border-radius: 50%;
    background: radial-gradient(circle, var(--hero-glow) 0%, transparent 60%);
    filter: blur(30px);
    z-index: -1;
    pointer-events: none;
}

/* Ground shadow — podium effect, anchors product in space */
.showcase-item.is-focused::after {
    content: '';
    position: absolute;
    bottom: var(--shadow-y);
    left: 50%;
    transform: translateX(-50%);
    width: var(--shadow-w);
    height: var(--shadow-h);
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.2) 50%, transparent 70%);
    z-index: -1;
    pointer-events: none;
}

/* Lift product image when focused or hovered (showcase plinth — both states identical).
   Both states get same translateY for logical consistency. */
.showcase-item:hover .showcase-product__img,
.showcase-item.is-focused .showcase-product__img {
    transform: translateY(var(--lift-y));
}

.showcase-item:hover .showcase-product__img img,
.showcase-item.is-focused .showcase-product__img img {
    filter:
        drop-shadow(0 30px 50px rgba(0,0,0,0.6))
        drop-shadow(0 0 30px rgba(199, 140, 71, 0.18))
        drop-shadow(0 -8px 20px var(--hero-floor-bounce));
}

/* Product info: unified block — name + badge together form composition anchor */
.showcase-product__info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}
.showcase-item.is-focused .showcase-product__info {
    opacity: 1;
    pointer-events: auto;
}

/* ─── Product name inside item — hidden, text lives in hero-hover-info instead ─── */
.showcase-product__name {
    display: none;
}

/* ─── Floating hover-info — content set by JS on focus/hover (specs, prices) ─── */
.hero-hover-info {
    position: absolute;
    left: 28px;
    top: 30%;
    transform: translateY(-50%) translateX(-30px);
    z-index: 5;
    pointer-events: none;

    font-family: 'Manrope', sans-serif;
    font-size: 3.5rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.1;
    text-align: left;
    max-width: 420px;
    white-space: normal;
    word-break: break-word;

    color: rgba(255, 255, 255, 0.07);
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.12);
    text-shadow: 0 0 80px rgba(199, 140, 71, 0.1);

    opacity: 0;
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-hover-info.is-visible {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

@keyframes slideInName {
    0% { opacity: 0; transform: translateY(-50%) translateX(60px); }
    100% { opacity: 1; transform: translateY(-50%) translateX(0); }
}

/* Badges — always absolute so losing is-focused doesn't cause a layout jump */
.showcase-product__signal {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 25;
}

/* ─── Inline specs per item — Müller Swiss micro-typography ───
   Hidden by default.  When focus_count > 1 the hero-specs panel
   disappears and each focused item gets its OWN spec strip below
   the product image — no duplication, no overlap.              ─── */

/* When multi-focus is on, kill the global hero-specs panel */
.showcase-swiper-wrap[data-focus-count="2"] ~ .showcase-hero-content .hero-specs,
.showcase-swiper-wrap[data-focus-count="3"] ~ .showcase-hero-content .hero-specs {
    display: none !important;
}
/* Since hero-specs lives INSIDE showcase-hero-content which is INSIDE the wrap,
   use the parent selector on the wrap itself */
.showcase-swiper-wrap[data-focus-count="2"] .hero-specs,
.showcase-swiper-wrap[data-focus-count="3"] .hero-specs {
    display: none !important;
}

/* In single-focus mode, hide inline specs entirely — hero-specs panel is enough */
.showcase-swiper-wrap[data-focus-count="1"] .showcase-item__specs {
    display: none !important;
}

.showcase-item__specs {
    display: flex;
    align-items: baseline;
    gap: 0;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    white-space: nowrap;
    justify-content: center;
    position: absolute;
    bottom: -22px;
    left: 50%;
    translate: -50% 0;
    z-index: 5;
}
.showcase-item.is-focused .showcase-item__specs {
    opacity: 1;
}
.si-spec {
    font-family: 'Manrope', sans-serif;
    font-size: var(--is-fs);
    font-weight: 600;
    letter-spacing: var(--is-tracking);
    color: var(--hero-text-muted);
    text-transform: uppercase;
    line-height: 1;
}
.si-spec--size {
    color: rgba(199, 140, 71, 0.9);
    font-weight: 800;
    font-size: var(--is-fs-size);
}
.si-spec + .si-spec::before {
    content: '·';
    color: var(--hero-border-subtle);
    font-size: var(--is-sep-fs);
    margin: 0 var(--is-sep-margin);
    vertical-align: baseline;
}

/* =====================================================================
   MULTI-FOCUS: 2 or 3 items highlighted simultaneously
   ===================================================================== */

/* ── focus-count = 2 : duo hero ───────────────────────────── */
.showcase-swiper-wrap[data-focus-count="2"] .showcase-track {
    gap: 48px;
}
.showcase-swiper-wrap[data-focus-count="2"] .showcase-item {
    width: 300px;
}
.showcase-swiper-wrap[data-focus-count="2"] .showcase-item.is-focused {
    transform: scale(1.35);
}
.showcase-swiper-wrap[data-focus-count="2"] .showcase-product__img {
    height: 320px;
}
.showcase-swiper-wrap[data-focus-count="2"] .showcase-product__img img {
    max-height: 300px;
}

/* ── focus-count = 3 : trio hero ────────────── */
.showcase-swiper-wrap[data-focus-count="3"] .showcase-track {
    gap: 40px;
}
.showcase-swiper-wrap[data-focus-count="3"] .showcase-item {
    width: 260px;
}
.showcase-swiper-wrap[data-focus-count="3"] .showcase-item.is-focused {
    transform: scale(1.3);
}
.showcase-swiper-wrap[data-focus-count="3"] .showcase-product__img {
    height: 280px;
}
.showcase-swiper-wrap[data-focus-count="3"] .showcase-product__img img {
    max-height: 260px;
}

/* Unfocused items: subdued but visible */
.showcase-swiper-wrap[data-focus-count="2"] .showcase-item:not(.is-focused),
.showcase-swiper-wrap[data-focus-count="3"] .showcase-item:not(.is-focused) {
    opacity: 0.3;
    transform: scale(0.82);
}

/* showcase-product__name — styles defined in focused item section above */

/* ─── Hero Info Cards — appear on hover pause, brutalist style ─── */
.hero-info-card {
    background: rgba(36, 28, 26, 0.92);
    border: 1px solid var(--hero-border-subtle);
    padding: 6px 12px;
    font-family: 'Manrope', sans-serif;
    white-space: nowrap;
    z-index: 30;
    pointer-events: none;
    animation: infoCardIn 0.3s ease-out both;
}
.hero-info-card--out {
    animation: infoCardOut 0.3s ease-in both;
}
.hero-info-card__label {
    font-size: 0.5625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--hero-text-dim);
    margin-right: 8px;
}
.hero-info-card__value {
    font-size: 0.8125rem;
    font-weight: 800;
    color: var(--color-accent, #C78C47);
    letter-spacing: 0.02em;
}
.hero-info-card--sale .hero-info-card__value {
    text-decoration: line-through;
    color: var(--hero-text-dim);
    font-weight: 600;
}
@keyframes infoCardIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes infoCardOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* ─── Idler Rollers — industrial support points under the belt ───
   Real conveyor belts rest on idler rollers every ~1m.
   Thin vertical marks at regular intervals under the track
   create rhythm and ground the belt visually. */
.showcase-conveyor::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: repeating-linear-gradient(
        90deg,
        transparent 0px,
        transparent 118px,
        rgba(199, 140, 71, 0.12) 118px,
        rgba(199, 140, 71, 0.12) 120px,
        transparent 120px,
        transparent 180px,
        rgba(199, 140, 71, 0.06) 180px,
        rgba(199, 140, 71, 0.06) 182px,
        transparent 182px
    );
    z-index: 1;
    pointer-events: none;
}
/* Roller bolt marks — small dots at each roller position */
.showcase-conveyor::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 7px;
    background: repeating-linear-gradient(
        90deg,
        transparent 0px,
        transparent 117px,
        rgba(199, 140, 71, 0.08) 117px,
        rgba(199, 140, 71, 0.15) 119px,
        rgba(199, 140, 71, 0.15) 121px,
        rgba(199, 140, 71, 0.08) 123px,
        transparent 123px
    );
    z-index: 1;
    pointer-events: none;
}

/* Signal Badges — "Акція" burns, "В наявності" calms */
.signal-badge {
    font-size: 0.8125rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 6px 16px;
    border: 1px solid var(--hero-nav-border);
    color: var(--hero-nav-color);
    background: var(--hero-bg-hover);
}
.signal-sale {
    border-color: var(--color-accent, #C78C47);
    color: var(--color-text-on-accent, #0a0807);
    background: var(--color-accent, #C78C47);
    box-shadow: 0 0 20px rgba(199, 140, 71, 0.5);
}

/* ─── Navigation arrows — Industrial/Brutalist style ─── */
.showcase-swiper-wrap .showcase-prev,
.showcase-swiper-wrap .showcase-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 60;
    width: 64px;
    height: 64px;
    border-radius: 0;
    background: transparent;
    color: var(--hero-nav-color);
    border: 1px solid var(--hero-nav-border);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.showcase-swiper-wrap .showcase-prev { left: 20px; }
.showcase-swiper-wrap .showcase-next { right: 20px; }

.showcase-swiper-wrap .showcase-prev:hover,
.showcase-swiper-wrap .showcase-next:hover {
    background: var(--color-accent, #C78C47);
    color: var(--color-text-on-accent, #0a0807);
    border-color: var(--color-accent, #C78C47);
}
.showcase-swiper-wrap .showcase-prev svg,
.showcase-swiper-wrap .showcase-next svg {
    width: 32px;
    height: 32px;
}

/* ─── Responsive conveyor ─── */
@media (max-width: 992px) {
    .showcase-track { gap: 40px; }
    .showcase-swiper-wrap {
        --hero-h: 36.25rem;        /* 580px */
        --si-width: 13.75rem;      /* 220px */
        --si-img-height: 15rem;    /* 240px */
        --si-img-max-h: 13.75rem;  /* 220px */
        --si-opacity-default: 0.2;
        --si-filter-default: grayscale(50%) brightness(0.6);
        --si-scale-default: 0.82;
        --si-filter-focused: none;
        --si-scale-focused: 2.0;
        --st-x: 1.25rem;           /* 20px */
        --st-y: 1.5rem;            /* 24px */
        --st-max-w: 20rem;         /* 320px */
        --hs-x: 1.25rem;           /* 20px */
        --hs-y: 6.875rem;          /* 110px */
        --hs-gap: 1rem;            /* 16px */
        --hs-pad-y: 0.5rem;        /* 8px */
        --hs-pad-x: 1rem;          /* 16px */
    }
    .hero-hover-info { font-size: 1.25rem; left: 20px; max-width: 200px; }
    .hero-specs__value { font-size: 0.875rem; }
    .hero-specs__value--link { font-size: 1rem; }
    .showcase-header .btn-hero-action { padding: 12px 24px; font-size: 0.75rem; }
}
@media (max-width: 768px) {
    /* Restore CSS transition on mobile (no JS 3D) */
    .showcase-swiper-wrap {
        --hero-h: 26.25rem;       /* 420px */
        --si-width: 10rem;        /* 160px */
        --si-img-height: 8.125rem; /* 130px */
        --si-img-max-h: 7.5rem;   /* 120px */
        --si-scale-default: 0.85;
        --si-scale-focused: 1.8;
        --si-transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), color 0.6s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        --st-x: 1rem;             /* 16px */
        --st-y: 1rem;
        --st-fs: 0.6875rem;
        --st-max-w: 12.5rem;      /* 200px */
        --st-pad-l: 0.625rem;     /* 10px */
        --hs-display: none;
    }
    .showcase-big-title { top: auto; transform: translateY(-50%); -webkit-text-stroke: 0.5px var(--hero-border-subtle); }
    .showcase-big-title--extra { bottom: 70px; }
    .hero-hover-info { display: none; }
    .hero-field-bg { display: none; }
    .showcase-title { font-size: 0.875rem; }
    .showcase-cat-link { font-size: 0.625rem; padding: 6px 12px; }
    .showcase-header { padding: 10px 16px; flex-wrap: wrap; gap: 6px; }
    .showcase-header .btn-hero-action {
        width: 100%; min-height: 44px;
        padding: 10px 16px; font-size: 0.75rem;
        gap: 6px; justify-content: center;
        order: -1;
    }
    .showcase-header .btn-hero-action svg { width: 14px; height: 14px; }
    .showcase-cats { overflow-x: auto; width: 100%; -webkit-overflow-scrolling: touch; }
    .showcase-prev, .showcase-next { display: none; }
    .hero-cta-wrap { bottom: 16px; right: 16px; }
    .hero-cta-wrap .btn-hero-action { padding: 12px 24px; font-size: 0.75rem; }
}
@media (max-width: 480px) {
    .showcase-swiper-wrap {
        --hero-h: 21.875rem;       /* 350px */
        --si-width: 8.125rem;      /* 130px */
        --si-img-height: 6.875rem; /* 110px */
        --si-img-max-h: 6.25rem;   /* 100px */
        --si-scale-default: 0.8;
        --si-scale-focused: 1.6;
        --st-display: none;
    }
    .showcase-big-title--extra { bottom: 60px; }
    .showcase-title { font-size: 0.8125rem; }
    .showcase-cat-link { font-size: 0.5625rem; padding: 5px 10px; }
    .showcase-header { padding: 8px 12px; gap: 4px; }
    .hero-cta-wrap { bottom: 12px; right: 12px; }
    .hero-cta-wrap .btn-hero-action { padding: 10px 20px; font-size: 0.6875rem; }
}

/* =====================================================================
   SHOWCASE — Banner Overlay (appears between belt cycles)
   ===================================================================== */

/* Full-hero overlay that fades in over the conveyor — Flat Brutalist style */
.showcase-banner-overlay {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hero-banner-bg);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.showcase-banner-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}
/* Individual banner slides */
.showcase-banner-slide {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px 40px;
}
.showcase-banner-slide.is-active {
    display: flex;
}
.showcase-banner-slide img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 0;
    transition: transform 0.2s ease;
}
.showcase-banner-slide a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.showcase-banner-slide a:hover img {
    transform: scale(1.02);
}
/* Banner fit: cover — image fills entire hero, cropped */
.showcase-banner-slide[data-banner-fit="cover"] {
    padding: 0;
}
.showcase-banner-slide[data-banner-fit="cover"] img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
}
.showcase-banner-slide[data-banner-fit="cover"] a {
    display: block;
    width: 100%;
    height: 100%;
}
/* =====================================================================
   SHOWCASE — Video Overlay (fullscreen autoplay video preset)
   ===================================================================== */
/* ── Video overlay — industrial brutalist film ── */
.showcase-video-overlay {
    position: absolute;
    inset: 0;
    z-index: 50;
    background: #241C1A;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    transition: opacity 0.5s ease;
}
.showcase-video-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
}
.showcase-video-slide {
    position: absolute;
    inset: 0;
    display: none;
}
.showcase-video-slide.is-active {
    display: block;
}
/* cover весь hero, жёсткая обрезка краями блока — брутализм */
.showcase-video-slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    /* Twin Peaks HARD: глубокая сепия, выцветшая 70-х плёнка */
    filter: sepia(0.6) saturate(0.65) contrast(1.1) brightness(0.55) hue-rotate(-10deg);
}
/* Тёплый тонирующий слой — густой янтарный Twin Peaks */
.showcase-video-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: rgba(140, 80, 40, 0.4);
    mix-blend-mode: color;
}
/* Только виньетка — жёсткий обрез по краям, никаких fade */
.showcase-video-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(36,28,26,0.55) 100%);
}
/* Grain — жирная плёночная зернистость, усилена */
.showcase-video-overlay::after {
    content: "";
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    z-index: 4;
    pointer-events: none;
    opacity: 0.18;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 150 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 120px 120px;
    animation: grain 0.25s steps(3) infinite;
}
@keyframes grain {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-5%, -5%); }
}
.showcase-video-slide a.showcase-video-link {
    display: block;
    width: 100%;
    height: 100%;
}
.showcase-video-slide a.showcase-video-link video {
    pointer-events: none;
}

/* ── Cinematic logo rise — stroke→fill, synced to video duration ── */
.video-fadeout-curtain {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: rgba(36, 28, 26, 0);
}
.video-fadeout-logo {
    width: clamp(320px, 55vw, 680px);
    height: auto;
    /* Start state: only stroke outline, no fill, shifted down */
    fill: transparent;
    stroke: rgba(255, 255, 255, 0.12);
    stroke-width: 0.3;
    filter: drop-shadow(0 0 30px rgba(199, 140, 71, 0.1));
    opacity: 0;
    transform: translateY(50px);
}
/* Logo: outline → rises → fills solid. Duration = video length */
@keyframes logoRise {
    0%   { opacity: 0;    transform: translateY(50px);
           fill: transparent; stroke: rgba(255,255,255,0.12); stroke-width: 0.3; }
    15%  { opacity: 0.4;  transform: translateY(35px);
           fill: transparent; stroke: rgba(255,255,255,0.18); stroke-width: 0.3; }
    50%  { opacity: 0.6;  transform: translateY(15px);
           fill: rgba(255,255,255,0.08); stroke: rgba(255,255,255,0.2); stroke-width: 0.25; }
    80%  { opacity: 0.85; transform: translateY(3px);
           fill: rgba(255,255,255,0.5); stroke: rgba(255,255,255,0.15); stroke-width: 0.15; }
    100% { opacity: 1;    transform: translateY(0);
           fill: rgba(255,255,255,0.9); stroke: none; stroke-width: 0; }
}
/* Background: transparent → darken → full black ("THE END") */
@keyframes curtainDarken {
    0%   { background: rgba(36, 28, 26, 0); }
    75%  { background: rgba(36, 28, 26, 0); }
    88%  { background: rgba(36, 28, 26, 0.6); }
    100% { background: rgba(36, 28, 26, 1); }
}
.video-fadeout-curtain.is-rising {
    animation: curtainDarken var(--video-duration, 9s) ease-in forwards;
}
.video-fadeout-curtain.is-rising .video-fadeout-logo {
    animation: logoRise var(--video-duration, 9s) ease-out forwards;
}
/* White theme */
@keyframes logoRiseLight {
    0%   { opacity: 0;    transform: translateY(50px);
           fill: transparent; stroke: rgba(79,65,60,0.12); }
    15%  { opacity: 0.4;  transform: translateY(35px);
           fill: transparent; stroke: rgba(79,65,60,0.18); }
    50%  { opacity: 0.6;  transform: translateY(15px);
           fill: rgba(79,65,60,0.08); stroke: rgba(79,65,60,0.2); }
    80%  { opacity: 0.85; transform: translateY(3px);
           fill: rgba(79,65,60,0.5); stroke: rgba(79,65,60,0.15); }
    100% { opacity: 1;    transform: translateY(0);
           fill: rgba(79,65,60,0.9); stroke: none; }
}
@keyframes curtainDarkenLight {
    0%   { background: rgba(235, 230, 221, 0); }
    75%  { background: rgba(235, 230, 221, 0); }
    88%  { background: rgba(235, 230, 221, 0.6); }
    100% { background: rgba(235, 230, 221, 1); }
}

/* ── Белая тема: видео светлее, тёплый выцветший вид ── */

/* ── Video decorative circles — mirror of conveyor arcs ── */
.video-arcs {
    position: absolute;
    top: 50%;
    right: -180px;
    transform: translateY(-50%);
    width: 640px;
    height: 640px;
    border-radius: 50%;
    background: transparent;
    border: 28px solid rgba(199,140,71,0.22);
    border-top-color: rgba(199,140,71,0.06);
    border-left-color: rgba(199,140,71,0.06);
    box-shadow:
        0 0 0 10px transparent,
        0 0 0 45px rgba(199,140,71,0.14),
        0 0 0 50px transparent,
        0 0 0 80px rgba(199,140,71,0.08);
    z-index: 3;
    pointer-events: none;
    animation: heroArcsR 120s linear infinite;
}
.video-swiss-circle {
    position: absolute;
    left: -12vw;
    bottom: -20vw;
    width: 55vw;
    height: 55vw;
    border-radius: 50%;
    border: 2px solid rgba(199,140,71,0.28);
    z-index: 3;
    pointer-events: none;
    animation: heroArcsL 90s linear infinite;
}
.video-swiss-circle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    height: 70%;
    border-radius: 50%;
    border: 50px solid rgba(199,140,71,0.12);
}
/* Ghost brand watermark — centered over video */
.video-brand-ghost {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    pointer-events: none;
    font-family: 'Manrope', sans-serif;
    font-weight: 900;
    font-size: clamp(5rem, 14vw, 13rem);
    line-height: 0.85;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(199,140,71,0.18);
    text-shadow: 0 0 80px rgba(199,140,71,0.08);
}
@media (max-width: 768px) {
    .video-arcs { display: none; }
    .video-swiss-circle { display: none; }
    .video-brand-ghost { font-size: 16vw; }
}

/* Conveyor + hero content fade when banner shows */
.showcase-conveyor,
.showcase-hero-content {
    transition: opacity 0.5s ease;
}

/* ── Preset tabs ── */
.showcase-cat-link[data-preset-idx] {
    cursor: pointer;
    background: none;
    font-family: 'Manrope', sans-serif;
    color: var(--color-text-muted, #DAD1C8);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 1px solid var(--color-border, #443D3A);
    padding: 5px 14px;
    border-radius: 0;
    transition: transform 0.2s, opacity 0.2s, color 0.2s, background-color 0.2s;
    white-space: nowrap;
}
.showcase-cat-link[data-preset-idx]:hover,
.showcase-cat-link[data-preset-idx].is-active {
    background: var(--color-accent, #C78C47);
    color: var(--color-text-on-accent, #0d0b0a);
    border-color: var(--color-accent, #C78C47);
}