/* mirespresso_redesign — homepage-only styles (Hero + "Популярные категории" / CategoryBento +
   BannerSlider). Loaded only on _home-preview/, not sitewide via styles.css. Hand-translated
   1:1 from src/styles/components/_hero.scss, _category-bento.scss, _banner-slider.scss, and
   the .section/.section__* rules from _section.scss (not in the base shell yet, but required
   for this block's own layout — not a Hero/CategoryBento/BannerSlider rule itself, included
   because this page genuinely needs it). Reuses the shell's own tokens/grid/Geologica — no
   second design system. Swiper's own CSS (loaded separately via CDN) supplies swiper-wrapper/
   swiper-slide base layout; only this file's own banner-slider__* classes are added here. */

/* ===== .section wrapper (from _section.scss — needed by "Популярные категории") ===== */
.section {
  padding-block: var(--space-8);
}
.section--subtle {
  background: var(--color-bg-subtle);
}
.section__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
@media (min-width: 768px) {
  .section__head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
  }
}
.section__head-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.section__link {
  flex-shrink: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand);
  white-space: nowrap;
}
.section__link:hover {
  color: var(--color-brand-hover);
}

/* ===== Hero ===== */
.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--color-text);
  background: var(--color-bg-subtle);
}
.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}
@media (max-width: 1199px) {
  .hero__image { object-position: center; }
}
@media (max-width: 1199px) and (orientation: portrait) {
  .hero__image { object-position: right center; }
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--color-scrim-rgb), 0.34) 0, rgba(var(--color-scrim-rgb), 0.14) 60px, rgba(var(--color-scrim-rgb), 0) 120px);
}
@media (max-width: 1199px) {
  .hero__scrim {
    background:
      linear-gradient(180deg, rgba(var(--color-scrim-rgb), 0.36) 0, rgba(var(--color-scrim-rgb), 0) 88px),
      linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.78) 34%, rgba(255, 255, 255, 0) 50%);
  }
}
.hero__copy--mobile { display: none; }
@media (max-width: 1199px) {
  .hero__copy--desktop { display: none; }
  .hero__copy--mobile { display: inline; }
}
/* .hero--image-copy — not used by the current approved hero content (imageContainsCopy is
   unset), kept for 1:1 fidelity with the source component in case content changes later. */
.hero--image-copy .hero__scrim {
  background:
    linear-gradient(180deg, rgba(var(--color-scrim-rgb), 0.34) 0%, rgba(var(--color-scrim-rgb), 0.12) 24%, rgba(var(--color-scrim-rgb), 0) 52%, rgba(var(--color-scrim-rgb), 0.2) 100%),
    linear-gradient(90deg, rgba(var(--color-scrim-rgb), 0.2) 0%, rgba(var(--color-scrim-rgb), 0.08) 45%, rgba(var(--color-scrim-rgb), 0) 76%);
}
@media (max-width: 1199px) {
  .hero--image-copy .hero__image { object-position: 86% center; }
  .hero--image-copy .hero__scrim {
    background: linear-gradient(180deg, rgba(var(--color-scrim-rgb), 0.78) 0%, rgba(var(--color-scrim-rgb), 0.52) 40%, rgba(var(--color-scrim-rgb), 0.75) 100%);
  }
}
@media (min-width: 1200px) {
  .hero--image-copy .hero__eyebrow, .hero--image-copy .hero__title, .hero--image-copy .hero__text {
    animation: none; opacity: 0; pointer-events: none;
  }
}
.hero__content {
  position: relative;
  z-index: 1;
  max-width: 780px;
  padding: var(--space-8) var(--container-padding-inline);
}
@media (max-width: 1199px) {
  .hero__content {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-rows: clamp(4rem, 12svh, 7.5rem) auto minmax(var(--space-4), 1fr) auto auto clamp(3rem, 8svh, 6rem);
    width: 100%;
    max-width: none;
    padding: 0 var(--container-padding-inline);
    align-self: stretch;
  }
}
@media (min-width: 1024px) {
  .hero__content {
    max-width: 1200px;
    padding-inline-start: var(--container-padding-inline);
    padding-inline-end: 0;
    margin-inline-start: max(0px, calc((100vw - var(--container-max-width)) / 2));
  }
}
@media (max-width: 1199px) {
  .hero__copy-block { grid-row: 2; align-self: start; max-width: 44rem; }
}
@media (min-width: 1200px) {
  .hero__copy-block {
    max-width: calc(min(64vw, 105svh) - max(0px, calc((100vw - var(--container-max-width)) / 2)) - var(--container-padding-inline));
  }
}
.hero__eyebrow {
  color: var(--color-text);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0;
}
@media (min-width: 1024px) {
  .hero__eyebrow { font-size: var(--font-size-md); }
}
.hero__title {
  color: var(--color-text);
  margin-block: var(--space-4) var(--space-5);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 0;
  line-height: 1.02;
  font-size: clamp(1.75rem, 8vw, 3.75rem);
  overflow-wrap: break-word;
}
@media (max-width: 1199px) {
  .hero__title { margin-block: var(--space-3) var(--space-4); font-size: clamp(1.75rem, 8vw, 3rem); }
}
@media (min-width: 1024px) {
  .hero__title { font-size: clamp(3.5rem, 5vw, 5.5rem); }
}
@media (min-width: 1200px) and (max-aspect-ratio: 3/2) {
  .hero__image { object-position: 60% center; }
  .hero__copy-block {
    max-width: calc(min(60vw, 105svh) - max(0px, calc((100vw - var(--container-max-width)) / 2)) - var(--container-padding-inline));
  }
  .hero__title { font-size: clamp(3rem, 4.5vw, 5.5rem); }
  .hero__actions { flex-direction: column; align-items: flex-start; }
}
.hero__text {
  color: var(--color-text);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-regular);
  line-height: 1.25;
  max-width: 42ch;
  margin-bottom: var(--space-7);
  white-space: pre-line;
}
@media (max-width: 1199px) {
  .hero__text { max-width: 32ch; margin-bottom: 0; font-size: clamp(1.125rem, 5.5vw, var(--font-size-lg)); }
}
@media (min-width: 1024px) {
  .hero__text { font-size: var(--font-size-xl); max-width: 1000px; }
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }
@media (max-width: 1199px) {
  .hero__actions { grid-row: 4; align-self: end; }
}
.hero__actions .button { font-size: var(--font-size-base); padding: 1em 2em; }
@media (min-width: 1024px) {
  .hero__actions .button { font-size: var(--font-size-md); padding: 1.1em 2.25em; }
}
.hero__actions .button--outline {
  color: var(--color-text);
  border-color: rgba(var(--color-scrim-rgb), 0.34);
}
@media (max-width: 1199px) {
  .hero__actions .button--outline { background: rgba(255, 255, 255, 0.82); }
}
.hero__company-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-4);
  color: var(--color-text);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  transition: color 180ms ease;
}
@media (max-width: 1199px) {
  .hero__company-link { grid-row: 5; align-self: start; text-shadow: none; }
}
.hero__company-link:hover { color: var(--color-brand-hover); }
.hero__company-link-icon { transition: transform 180ms ease; }
.hero__company-link:hover .hero__company-link-icon { transform: translate(2px, -2px); }
@media (max-width: 1199px) and (max-height: 700px) {
  .hero__content { grid-template-rows: 4rem auto minmax(var(--space-2), 1fr) auto auto 2rem; }
  .hero__eyebrow { font-size: var(--font-size-sm); }
  .hero__title { margin-block: var(--space-2) var(--space-3); font-size: clamp(1.5rem, 7vw, 2rem); }
  .hero__text { font-size: var(--font-size-base); }
  .hero__actions { gap: var(--space-3); }
  .hero__actions .button { padding: 0.85em 1.35em; font-size: var(--font-size-sm); }
  .hero__company-link { margin-top: var(--space-3); font-size: var(--font-size-base); }
}
@media (max-width: 1199px) and (orientation: landscape) {
  .hero__content { grid-template-rows: 3rem auto minmax(var(--space-1), 1fr) auto auto 0.75rem; }
  .hero__copy-block, .hero__actions, .hero__company-link { max-width: 46%; }
  .hero__title { font-size: clamp(1.5rem, 4.5vw, 2.25rem); }
  .hero__text { font-size: var(--font-size-base); }
}
@keyframes hero-reveal {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.reveal {
  animation: hero-reveal 640ms cubic-bezier(0.16, 0.84, 0.44, 1) both;
  animation-delay: var(--reveal-delay, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; }
}

/* ===== CategoryBento ("Популярные категории") ===== */
.bento-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .bento-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(0, auto); }
}
@media (min-width: 1024px) {
  .bento-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 280px 280px 200px;
    grid-auto-rows: 200px;
  }
}
.bento-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-bg-subtle);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
  grid-column: span 1;
  aspect-ratio: 4/3;
}
.bento-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.bento-card--lg { aspect-ratio: 3/4; }
@media (min-width: 768px) {
  .bento-card--lg { grid-column: span 2; aspect-ratio: 21/9; }
}
@media (min-width: 1024px) {
  .bento-card--lg { grid-row: span 2; aspect-ratio: auto; }
  .bento-card--md { grid-column: span 2; aspect-ratio: auto; }
  .bento-card--sm { grid-column: span 2; aspect-ratio: auto; }
}
.bento-grid:has(.bento-card:nth-child(6)) .bento-card:nth-child(6) {
  /* 6-card homepage layout (confirmed: the approved CategoryBento renders all 6 entries from
     data.ts, not 5 — SIZE_BY_POSITION only controls visual weight, not item count). */
}
@media (min-width: 1024px) {
  .bento-grid:has(.bento-card:nth-child(6)) .bento-card:nth-child(6) {
    grid-column: 1 / -1;
  }
}
.bento-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 500ms cubic-bezier(0.16, 0.84, 0.44, 1);
}
.bento-card[data-category-id='cat-professional'] .bento-card__image {
  object-position: 60% center;
}
@media (min-width: 768px) {
  .bento-card[data-category-id='cat-professional'].bento-card--lg { aspect-ratio: 3/2; }
}
@media (min-width: 1024px) {
  .bento-card[data-category-id='cat-professional'].bento-card--lg { aspect-ratio: auto; }
}
@media (min-width: 1024px) {
  .bento-card[data-category-id='cat-accessories'] .bento-card__image { object-position: center 20%; }
}
.bento-card:hover .bento-card__image { transform: scale(1.045); }
.bento-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(var(--color-scrim-rgb), 0.78) 0%, rgba(var(--color-scrim-rgb), 0.18) 45%, rgba(var(--color-scrim-rgb), 0) 68%);
}
.bento-card__content {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 1;
  padding: var(--space-5);
  color: var(--color-text-inverse);
}
.bento-card__title {
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  font-size: var(--font-size-md);
  overflow-wrap: break-word;
}
.bento-card--lg .bento-card__title { font-size: var(--font-size-lg); }
@media (min-width: 768px) {
  .bento-card--lg .bento-card__title { font-size: var(--font-size-xl); }
}
.bento-card__description {
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-thin);
  color: rgba(255, 255, 255, 0.82);
}
.bento-card__arrow {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-pill);
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(6px);
  transition: transform var(--transition-base), background-color var(--transition-base), color var(--transition-base);
}
@media (hover: hover) {
  .bento-card:hover .bento-card__arrow {
    color: var(--color-text-inverse);
    background: var(--color-brand);
    transform: translate(2px, -2px);
  }
}
@media (hover: none) {
  .bento-card__arrow { color: var(--color-text-inverse); background: var(--color-brand); }
}

/* ===== BannerSlider ===== */
.banner-slider {
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
  background: rgb(var(--color-scrim-rgb));
}
.banner-slider__swiper {
  width: 100%;
  height: min(calc(100vw / 0.5628), 720px);
}
@media (min-width: 768px) {
  .banner-slider__swiper { height: calc(100vw / 3.9477); }
}
.banner-slider .swiper-slide { position: relative; overflow: hidden; }
.banner-slider__link { display: block; width: 100%; height: 100%; }
.banner-slider__link picture { display: block; width: 100%; height: 100%; }
.banner-slider__image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.banner-slider__nav {
  display: none;
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(6px);
  color: var(--color-text-inverse);
  font-size: 1.5rem;
  line-height: 1;
  transition: background-color var(--transition-fast);
}
.banner-slider__nav:hover { background: rgba(255, 255, 255, 0.32); }
@media (min-width: 768px) {
  .banner-slider__nav { display: flex; }
}
.banner-slider__nav--prev { left: var(--space-4); }
@media (min-width: 1024px) {
  .banner-slider__nav--prev { left: var(--space-6); }
}
.banner-slider__nav--next { right: var(--space-4); }
@media (min-width: 1024px) {
  .banner-slider__nav--next { right: var(--space-6); }
}
.banner-slider .banner-slider__swiper .banner-slider__pagination {
  position: absolute;
  z-index: 2;
  bottom: var(--space-4);
  left: 50%;
  width: auto;
  justify-content: center;
  transform: translateX(-50%);
  display: flex;
  gap: var(--space-2);
}
@media (min-width: 1024px) {
  .banner-slider .banner-slider__swiper .banner-slider__pagination { bottom: var(--space-6); }
}
.banner-slider .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.5);
  opacity: 1;
  cursor: pointer;
  transition: background-color var(--transition-fast), width var(--transition-fast);
}
.banner-slider .swiper-pagination-bullet-active {
  background: var(--color-surface);
  width: 22px;
}

/* ===== ProductTabs / "Лучшие предложения" (from _tabs.scss + _product-card.scss — card is a
   trimmed-down port: only fields with a confirmed real Bitrix source are rendered, so the
   favorite/quick-view/compare/qty-stepper/rating/bonus/old-price classes from the source
   component aren't needed here; see the commit message for what's omitted and why) ===== */
.tabs__list {
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-6);
}
.tabs__button {
  padding-block: var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-thin);
  color: var(--color-text);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 280ms ease, border-color 280ms ease;
  background: none;
}
.tabs__button:hover { color: var(--color-brand-hover); }
.tabs__button--active {
  color: var(--color-text);
  border-color: var(--color-brand);
}
.tabs--catalog .tabs__button--active { font-weight: var(--font-weight-bold); }
.tabs__empty {
  grid-column: 1 / -1;
  padding-block: var(--space-8);
  text-align: center;
  color: var(--color-text-muted);
}
/* Real cause of "all tab panels visible at once": the browser's default [hidden]{display:none}
   rule and the author rule `.grid{display:grid}` (sitewide styles.css) have equal specificity
   (0,1,0) — at a tie, author CSS beats the user-agent stylesheet, so `.grid` always won and the
   `hidden` attribute set by home.js had no visual effect on any panel, active or not. This rule
   (.tabs--catalog + [data-tab-panel] + [hidden], specificity 0,3,0) outranks `.grid` and actually
   hides inactive panels. */
.tabs--catalog [data-tab-panel][hidden] {
  display: none;
}

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  overflow: hidden;
  transition: box-shadow 300ms ease, transform 300ms ease;
}
.product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.product-card__image-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--color-bg-subtle);
  overflow: hidden;
}
.product-card__image-link { display: block; width: 100%; height: 100%; }
.product-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* contain, not cover — these are real product photos (not art-directed lifestyle crops like
     Hero/CategoryBento), and the real source files are square (confirmed: 600x600 / 6000x6000),
     so this matches cover visually here while staying correct if a future product has a
     non-square photo. No CSS blur/filter, no artificial upscale — see commit message for the
     real root cause of the reported blur (wrong source file, not a CSS issue). */
  object-fit: contain;
  transition: transform 500ms cubic-bezier(0.16, 0.84, 0.44, 1);
}
.product-card:hover .product-card__image { transform: scale(1.045); }
.product-card__favorite {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.7);
  color: var(--color-icon);
}
.product-card__favorite:disabled { opacity: 0.6; cursor: default; }
.product-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  flex: 1;
}
.product-card__name {
  font-size: 0.9375rem;
  font-weight: var(--font-weight-semibold);
  line-height: 1.35;
  color: var(--color-text);
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-card__name:hover { color: var(--color-brand-hover); }
.product-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--color-text);
}
.product-card__availability { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--font-weight-thin); }
.product-card__availability-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.product-card__prices { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }
.product-card__price { font-size: 1.25rem; font-weight: 650; color: var(--color-text); }
.product-card__actions { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.product-card__actions .button { height: 44px; }
.product-card__cart-row { display: flex; gap: var(--space-2); }
.product-card__cart-row .button { flex: 1; min-width: 0; }
.product-card__qty {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.product-card__qty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--color-text);
  background: none;
  transition: background-color var(--transition-fast);
}
.product-card__qty-btn:hover { background: var(--color-bg-subtle); }
.product-card__qty-value {
  min-width: 1.5em;
  text-align: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

/* ===== BenefitsSection ("Покупка кофемашины без лишних сложностей") — from _benefits.scss ===== */
.benefits__grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .benefits__grid { grid-template-columns: repeat(2, 1fr); }
}
.benefits__intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
}
@media (min-width: 768px) {
  .benefits__intro { grid-column: span 2; }
}
@media (min-width: 1024px) {
  .benefits__intro { grid-column: 1 / -1; grid-row: 1; }
}
@media (min-width: 1024px) {
  .benefits__grid { grid-template-columns: repeat(2, 1fr); }
  .benefit-card--01 { grid-column: 1; grid-row: 2 / 4; }
  .benefit-card--02 { grid-column: 2; grid-row: 3 / 5; }
  .benefit-card--03 { grid-column: 1; grid-row: 4 / 6; }
  .benefit-card--04 { grid-column: 2; grid-row: 5 / 7; }
}
.benefits__text {
  max-width: 46ch;
  color: var(--color-text);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
}
.benefits--subtle { background: var(--color-bg-subtle); }
.benefits--subtle .benefit-card:not(.benefit-card--accent) { background: var(--color-surface); }
.benefit-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-7);
  min-height: 220px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
  box-shadow: var(--shadow-sm);
  transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
}
@media (min-width: 1024px) {
  .benefit-card { padding: var(--space-8); min-height: 280px; }
}
.benefit-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
}
.benefit-card--04 { min-height: 260px; }
@media (min-width: 1024px) {
  .benefit-card--04 { min-height: 340px; }
}
.benefit-card__top { display: flex; align-items: center; justify-content: space-between; }
.benefit-card__number {
  font-size: var(--font-size-lg);
  font-style: italic;
  font-weight: var(--font-weight-medium);
  color: var(--color-brand);
}
.benefit-card__number-column { display: none; }
@media (min-width: 1024px) {
  .benefit-card__number-flow { display: none; }
  .benefit-card__number-column { display: inline; }
}
.benefit-card__icon { color: var(--color-icon-strong); }
.benefit-card__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-text);
}
@media (min-width: 1024px) {
  .benefit-card__title { font-size: var(--font-size-xl); }
}
.benefit-card__description {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-thin);
  color: var(--color-text);
  line-height: var(--line-height-normal);
}
@media (min-width: 1024px) {
  .benefit-card__description { font-size: var(--font-size-md); }
}
.benefit-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: auto;
  padding-top: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-brand);
  width: fit-content;
}
.benefit-card__cta-icon { transition: transform 300ms ease; }
a.benefit-card__cta { transition: color 300ms ease; }
a.benefit-card__cta:hover { color: var(--color-brand-hover); }
a.benefit-card__cta:hover .benefit-card__cta-icon { transform: translate(2px, -2px); }
.benefit-card--accent {
  background: var(--color-surface-dark);
  border-color: var(--color-surface-dark);
}
.benefit-card--accent .benefit-card__number { color: var(--color-text-inverse); }
.benefit-card--accent .benefit-card__icon { color: rgba(255, 255, 255, 0.85); }
.benefit-card--accent .benefit-card__title { color: var(--color-text-inverse); }
.benefit-card--accent .benefit-card__description { color: rgba(255, 255, 255, 0.75); }
.benefit-card--accent .benefit-card__cta { color: var(--color-text-inverse); }
.benefit-card--accent:hover { border-color: var(--color-brand); }

/* ===== OwnershipEconomics ("Экономика владения") — from _ownership-economics.scss ===== */
.economics__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-5);
  row-gap: 0;
  margin-bottom: calc(-1 * var(--space-7));
}
@media (min-width: 768px) {
  .economics__list { column-gap: var(--space-7); margin-bottom: calc(-1 * var(--space-8)); }
}
@media (min-width: 1024px) {
  .economics__list { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--space-8); margin-bottom: 0; }
}
.economics__item {
  position: relative;
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
  align-content: start;
  padding-top: var(--space-5);
  padding-bottom: var(--space-7);
  border-top: 1px solid var(--color-border-strong);
}
@supports not (grid-template-rows: subgrid) {
  .economics__item { display: block; }
  .economics__title { min-height: 2.4em; }
}
@media (min-width: 768px) {
  .economics__item { padding-top: var(--space-6); padding-bottom: var(--space-8); }
}
@media (min-width: 1024px) {
  .economics__item { padding-bottom: 0; }
}
.economics__item::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 2.5rem;
  height: 2px;
  background: var(--color-brand);
}
.economics__figure { margin: 0; }
.economics__number {
  display: block;
  font-size: 2.5rem;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (min-width: 768px) { .economics__number { font-size: 3.5rem; } }
@media (min-width: 1440px) { .economics__number { font-size: 4.5rem; } }
.economics__title {
  margin-top: var(--space-4);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-tight);
  color: var(--color-text);
}
@media (min-width: 768px) { .economics__title { font-size: 1.25rem; } }
.economics__text {
  margin-top: var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-thin);
  line-height: var(--line-height-normal);
  color: var(--color-text);
}
@media (max-width: 359px) { .economics__text { font-size: 0.8125rem; } }
@media (min-width: 768px) { .economics__text { font-size: 0.9375rem; } }

/* ===== CaseStudy ("Кейс: Продуктовая точка...") — from _case-study.scss ===== */
.case-study__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'head' 'media' 'situation' 'results';
  gap: var(--space-6);
}
@media (min-width: 1024px) {
  .case-study__grid {
    grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas: 'media head' 'media situation' 'media results';
    column-gap: var(--space-9);
    row-gap: var(--space-7);
    align-items: start;
  }
}
@media (min-width: 1440px) {
  .case-study__grid {
    grid-template-columns: minmax(0, 44fr) minmax(0, 19fr) minmax(0, 37fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: 'media head head' 'media situation results';
    column-gap: var(--space-8);
  }
}
.case-study__head { grid-area: head; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.case-study__title {
  font-size: 1.75rem;
  max-width: 22ch;
}
@media (max-width: 359px) { .case-study__title { font-size: 1.5rem; } }
@media (min-width: 768px) { .case-study__title { font-size: 2.25rem; max-width: 30ch; } }
@media (min-width: 1024px) { .case-study__title { font-size: 2.5rem; max-width: 24ch; } }
@media (min-width: 1440px) { .case-study__title { font-size: 2.75rem; } }
.case-study__media {
  grid-area: media;
  position: relative;
  align-self: stretch;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg-subtle);
}
@media (min-width: 768px) { .case-study__media { aspect-ratio: 16 / 10; } }
@media (min-width: 1024px) { .case-study__media { aspect-ratio: 4 / 5; align-self: start; } }
@media (min-width: 1440px) { .case-study__media { aspect-ratio: auto; align-self: stretch; } }
.case-study__media::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(var(--color-scrim-rgb), 0.06);
  pointer-events: none;
}
.case-study__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.case-study__block {
  position: relative;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-strong);
}
.case-study__block::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 2.5rem;
  height: 2px;
  background: var(--color-brand);
}
@media (min-width: 768px) { .case-study__block { padding-top: var(--space-6); } }
.case-study__situation { grid-area: situation; }
.case-study__results { grid-area: results; }
.case-study__block-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-text);
}
@media (min-width: 768px) { .case-study__block-title { font-size: var(--font-size-lg); } }
.case-study__situation-text {
  margin-top: var(--space-3);
  max-width: 52ch;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-thin);
  line-height: 1.6;
  color: var(--color-text);
}
@media (min-width: 1024px) { .case-study__situation-text { font-size: var(--font-size-md); } }
.case-study__result-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-4);
  row-gap: 0;
  margin-top: var(--space-5);
  margin-bottom: calc(-1 * var(--space-5));
}
@media (min-width: 768px) {
  .case-study__result-list { column-gap: var(--space-7); margin-bottom: calc(-1 * var(--space-6)); }
}
@media (max-width: 359px) {
  .case-study__result-list { grid-template-columns: minmax(0, 1fr); }
}
.case-study__result {
  min-width: 0;
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
  align-content: start;
  padding-bottom: var(--space-5);
}
@supports not (grid-template-rows: subgrid) {
  .case-study__result { display: block; }
}
@media (min-width: 768px) { .case-study__result { padding-bottom: var(--space-6); } }
.case-study__result-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  color: var(--color-text);
}
.case-study__result-value {
  margin-top: var(--space-2);
  font-size: 1.75rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-text);
  white-space: nowrap;
}
@media (min-width: 768px) { .case-study__result-value { font-size: 2.5rem; } }
@media (min-width: 1440px) { .case-study__result-value { font-size: 2.25rem; } }
.case-study__result-unit { font-size: 0.55em; font-weight: var(--font-weight-semibold); letter-spacing: 0; }
.case-study__result-note {
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  font-weight: var(--font-weight-thin);
}

/* ===== NewsShowcase ("Новости и акции") — from _news-showcase.scss ===== */
.news-showcase__desktop { display: none; }
.news-showcase__mobile { display: flex; flex-direction: column; }
@media (min-width: 768px) {
  .news-showcase__desktop { display: flex; align-items: stretch; gap: var(--space-8); }
  .news-showcase__mobile { display: none; }
}
@media (min-width: 1440px) {
  .news-showcase { margin-bottom: var(--space-9); }
}
.news-showcase__list { position: relative; flex: 1 1 auto; min-width: 0; }
.news-showcase__row {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-6);
  padding-inline-start: var(--space-4);
  border-top: 1px solid var(--color-border);
  cursor: default;
}
.news-showcase__row:first-child { border-top: none; }
.news-showcase__row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 0;
  background: var(--color-brand);
  border-radius: var(--radius-pill);
  transform: translateY(-50%);
  transition: height var(--transition-base);
}
.news-showcase__row-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-thin);
  color: var(--color-text);
  transition: color var(--transition-base);
}
.news-showcase__row-date { flex: 0 0 auto; font-size: var(--font-size-xs); color: var(--color-text-muted); }
.news-showcase__row--active::before { height: 22px; }
.news-showcase__row--active .news-showcase__row-title { color: var(--color-brand-hover); font-weight: var(--font-weight-semibold); }
.news-showcase__photo-wrap { position: relative; flex: 0 0 auto; width: 400px; }
@media (min-width: 1024px) { .news-showcase__photo-wrap { width: 480px; } }
@media (min-width: 1440px) { .news-showcase__photo-wrap { width: 560px; } }
.news-showcase__photo {
  position: absolute;
  inset-inline-start: 0;
  inset-block: var(--space-6);
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg-subtle);
  box-shadow: var(--shadow-md);
}
.news-showcase__photo-img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.2s ease; }
.news-showcase__photo-img--fading { opacity: 0; }
.news-showcase__photo-cta {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-base), background var(--transition-base), color var(--transition-base);
}
.news-showcase__photo-cta:hover { background: var(--color-control-hover); color: var(--color-control-text); transform: scale(1.06); }
.news-showcase__accordion-item { border-top: 1px solid var(--color-border); padding-block: var(--space-4); }
.news-showcase__accordion-item:first-child { border-top: none; }
.news-showcase__accordion-trigger { display: flex; align-items: center; gap: var(--space-3); width: 100%; text-align: left; background: none; }
.news-showcase__accordion-icon { flex: 0 0 auto; color: var(--color-icon); transform: rotate(-90deg); transition: transform var(--transition-base); }
.news-showcase__accordion-icon--open { transform: rotate(0deg); }
.news-showcase__accordion-title { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); color: var(--color-text); }
.news-showcase__accordion-date {
  display: block;
  margin-top: var(--space-2);
  padding-inline-start: calc(18px + var(--space-3));
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.news-showcase__accordion-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s ease; }
.news-showcase__accordion-panel--open { grid-template-rows: 1fr; }
.news-showcase__accordion-panel-inner { overflow: hidden; min-height: 0; }
.news-showcase__accordion-photo {
  position: relative;
  display: block;
  margin-top: var(--space-4);
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg-subtle);
}
.news-showcase__accordion-photo img { width: 100%; height: 100%; object-fit: cover; }
.news-showcase__accordion-cta {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-md);
}

/* ===== NewsCard ("Интересности" home teaser) — from _news-card.scss ===== */
.news-card { display: flex; flex-direction: column; gap: var(--space-3); }
.news-card__image-wrap { aspect-ratio: 16 / 10; border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg-subtle); display: block; }
.news-card__image { width: 100%; height: 100%; object-fit: cover; }
.news-card__title { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); line-height: var(--line-height-normal); }
.news-card__title:hover { color: var(--color-brand-hover); }