/* Source: /app/src/static/css/.input-resolved.css */
/* Manrope — rare weights; loaded with deferred output.css (below the fold / modals). */
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope/Manrope-Thin.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope/Manrope-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope/Manrope-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
/* Component partials — order preserves cascade and dependency (buttons before sections). */
/* Footer, back-to-top, bottom CTA, and section background utilities. No @layer so these apply in source order. */
/* Section backgrounds: always defined so alternating sections work (UnoCSS may not emit these) */
.bg-white {
  background-color: var(--color-background);
}
.bg-cream {
  background-color: var(--color-cream);
}
.bg-footer {
  background-color: var(--color-footer);
}
/* Footer: semantic top border for separation (design system outline-variant) */
footer.bg-footer {
  border-top: 1px solid var(--color-outline-variant);
}
/* Footer: unified line spacing (one variable so address ↔ map link matches list gaps) */
.footer {
  --footer-line-gap: 0.125rem;
}
.footer__inner {
  padding-block: var(--spacing-xl);
}
.footer__grid {
  margin-bottom: 0;
  gap: var(--spacing-l);
}
@media (max-width: 767px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-l);
  }
  /* Hide "Разделы" on mobile — bottom bar provides navigation (specificity beats .footer__block) */
  .footer__block.footer__block--nav {
    display: none;
  }
  /* Mobile: Контакты | Адрес side-by-side, Соцсети full width for even distribution */
  .footer__block--contacts {
    grid-column: 1;
  }
  .footer__block--address {
    grid-column: 2;
  }
  .footer__block--social {
    grid-column: 1 / -1;
  }
}
.footer__block {
  display: flex;
  flex-direction: column;
  gap: var(--footer-line-gap);
}
.footer__heading {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-charcoal);
  margin: 0;
  letter-spacing: var(--letter-spacing-small);
}
/* Footer body: 1rem for readability (UX: 14–16px body, WCAG-friendly) */
.footer__content,
.footer__nav {
  margin: 0;
  font-size: 1rem;
  line-height: 1.35;
}
.footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--footer-line-gap);
}
.footer__list li {
  min-height: var(--spacing-2xl);
  display: flex;
  align-items: center;
  gap: var(--footer-line-gap);
}
.footer__address {
  margin: 0;
  padding: 0;
  line-height: 1.35;
}
.footer__address-row {
  display: flex;
  align-items: flex-start;
  gap: var(--footer-line-gap);
}
.footer__address-row .footer__icon {
  margin-top: 0.15em;
}
.footer__hours {
  font-size: 1rem;
  color: var(--color-text);
}
/* Our production & Follow us: match Contacts column (same gap, line-height, row height) */
.footer__block--address .footer__content,
.footer__block--social .footer__content {
  display: flex;
  flex-direction: column;
  gap: var(--footer-line-gap);
}
/* One block = same height as two list rows; same gap between address and map link as between list items (e.g. phones).
   Padding-top aligns first line of address with first line in other columns (one li = spacing-2xl, content centered). */
.footer__production-block {
  min-height: calc(2 * var(--spacing-2xl) + var(--footer-line-gap));
  padding-top: calc((var(--spacing-2xl) - 1.35em) / 2);
  display: flex;
  flex-direction: column;
  gap: var(--footer-line-gap);
}
.footer__production-block .footer__address {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-start;
}
.footer__production-block .footer__map-link {
  padding: 0;
  display: inline-flex;
  align-items: center;
}
.footer__icon {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  color: var(--color-text-muted);
}
.footer .footer-link:hover .footer__icon,
.footer__map-link:hover .footer__icon {
  color: var(--color-wood-brown);
}
.footer__bottom {
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-l);
  border-top: 1px solid var(--color-outline);
}
.footer__copyright {
  font-size: var(--font-size-small);
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.35;
}
/* Footer links: link-on-surface for 4.5:1+ contrast on footer background (L 85% light / L 14% dark) */
.footer .footer-link {
  color: var(--color-link-on-surface);
  transition: color var(--transition-base) var(--transition-ease);
}
.footer .footer-link:hover {
  color: var(--color-link-on-surface-hover);
}
.footer .footer-link:active {
  color: var(--color-link-on-surface-active);
}
.footer .footer-link:visited {
  color: var(--color-link-on-surface-visited);
}
.footer-link:focus-visible {
  outline: 2px solid var(--color-link-on-surface-focus);
  outline-offset: 2px;
}
.footer-link--touch {
  display: inline-flex;
  align-items: center;
  gap: var(--footer-line-gap);
}
.footer__list .footer-link--touch {
  padding-block: 0;
}
@media (prefers-reduced-motion: reduce) {
  .footer .footer-link {
    transition: none;
  }
}
/* Back to top: one per page, show after scroll. UX: almost transparent so it doesn’t dominate; still visible and accessible. */
.back-to-top {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  padding: 0;
  color: var(--color-text);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: background-color var(--transition-base) var(--transition-ease),
    color var(--transition-base) var(--transition-ease),
    border-color var(--transition-base) var(--transition-ease),
    transform var(--transition-base) var(--transition-ease);
  /* Almost transparent: readable over any content, low visual weight */
  background: color-mix(in oklch, var(--color-surface-elevated) 60%, transparent);
  box-shadow: 0 1px 3px oklch(0% 0 0 / 0.08);
}
.back-to-top:hover {
  background: color-mix(in oklch, var(--color-container-primary) 75%, transparent);
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.back-to-top:focus-visible {
  outline: 2px solid var(--color-outline);
  outline-offset: 2px;
}
.back-to-top__icon {
  width: 1.25rem;
  height: 1.25rem;
}
/* Mobile only: back-to-top lives inside the bottom bar */
.back-to-top--in-bar {
  flex-shrink: 0;
}
/* Bottom CTA: mobile only, fixed at bottom, same scroll-to-show as back-to-top (Alpine) */
.bottom-cta--fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky-bottom);
}
/* Never show on desktop/laptop even if the window is narrow. */
@media (hover: hover) and (pointer: fine) {
  .bottom-cta--fixed {
    display: none !important;
  }
}
/* Hide on tablet/desktop viewports (but keep phone-landscape alive even when width jumps past 768). */
@media (min-width: 768px) and (min-height: 600px) {
  .bottom-cta--fixed {
    display: none !important;
  }
}
@media (min-width: 1024px) {
  .bottom-cta--fixed {
    display: none !important;
  }
}
/* Bottom bar: lightly transparent (UX: content shows through but bar and buttons stay readable over any background) */
.bottom-cta {
  background: color-mix(in oklch, var(--color-background) 32%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid oklch(0% 0 0 / 0.08);
  box-shadow: 0 -1px 3px oklch(0% 0 0 / 0.04);
  transition: transform var(--transition-slow) var(--transition-ease),
    opacity var(--transition-slow) var(--transition-ease);
}
@media (prefers-reduced-motion: reduce) {
  .bottom-cta {
    transition-duration: 0.01ms;
  }
}
.bottom-cta__inner {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--spacing-s);
  align-items: stretch;
  padding-top: var(--spacing-s);
  padding-bottom: max(var(--spacing-m), env(safe-area-inset-bottom, 0));
  padding-left: var(--container-padding-mobile);
  padding-right: var(--container-padding-mobile);
}
/* Phone landscape: preserve content height; keep touch targets >= 44px. */
@media (orientation: landscape) and (max-height: 480px) {
  .bottom-cta__inner {
    padding-top: var(--spacing-xs);
    padding-bottom: max(var(--spacing-s), env(safe-area-inset-bottom, 0));
  }

  .bottom-cta__btn {
    font-size: var(--font-size-small);
    padding: var(--spacing-xs) var(--spacing-s);
  }
}
.bottom-cta__inner .bottom-cta__btn {
  flex: 1;
  min-width: 0;
}
@media (min-width: 768px) {
  .bottom-cta__inner {
    padding-left: var(--container-padding-tablet);
    padding-right: var(--container-padding-tablet);
  }
}
.bottom-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target-min);
  padding: var(--spacing-s) var(--spacing-m);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  border-radius: var(--radius-md);
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--transition-base) var(--transition-ease),
    color var(--transition-base) var(--transition-ease),
    border-color var(--transition-base) var(--transition-ease);
}
.bottom-cta__btn:focus-visible {
  outline: 2px solid var(--color-outline);
  outline-offset: 2px;
}
.bottom-cta__btn--primary {
  color: var(--color-on-primary);
  background-color: var(--color-primary);
  border: 1px solid transparent;
}
.bottom-cta__btn--primary:hover {
  color: var(--color-on-primary-hover, var(--color-on-primary));
  background-color: var(--color-primary-hover);
}
/* Secondary button: subtle opaque tint so text behind doesn’t show through (UX: readable on any content) */
.bottom-cta__btn--secondary {
  color: var(--color-secondary);
  background: color-mix(in oklch, var(--color-background) 55%, transparent);
  border: 2px solid var(--color-secondary);
}
.bottom-cta__btn--secondary:hover {
  background-color: var(--color-secondary);
  color: var(--color-on-primary);
}
/* Shared buttons and focus utilities. Single source: .focus-ring, .btn base + variants. */
@layer components {
  /* Focus ring: one definition, use .focus-ring or .focus-ring-rounded in markup. */
  .focus-ring:focus-visible {
    outline: 2px solid var(--color-outline);
    outline-offset: 2px;
  }

  .focus-ring-rounded:focus-visible {
    outline: 2px solid var(--color-outline);
    outline-offset: 2px;
    border-radius: var(--radius-md);
  }

  /* Button base: shared by .btn-primary and .btn-secondary (DRY). */
  .btn-primary,
  .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-s);
    padding: calc(var(--spacing-s) + var(--spacing-xs)) var(--spacing-l);
    border-radius: var(--radius-lg);
    font-weight: var(--font-weight-semibold);
    transition: background-color var(--transition-base) var(--transition-ease),
      color var(--transition-base) var(--transition-ease),
      border-color var(--transition-base) var(--transition-ease),
      box-shadow var(--transition-base) var(--transition-ease),
      transform var(--transition-base) var(--transition-ease);
  }

  .btn-primary {
    border: 1px solid transparent;
    background-color: var(--color-primary);
    color: var(--color-on-primary);
  }

  .btn-primary:hover {
    background-color: var(--color-primary-hover);
    color: var(--color-on-primary-hover, var(--color-on-primary));
  }

  .btn-primary:focus-visible {
    outline: 2px solid var(--color-outline);
    outline-offset: 2px;
  }

  .btn-primary:active {
    background-color: var(--color-primary-active);
  }

  .btn-primary:disabled,
  .btn-primary[aria-disabled="true"] {
    background-color: var(--color-primary-disabled);
    cursor: not-allowed;
    opacity: 0.7;
  }

  .btn-secondary {
    border: 2px solid var(--color-secondary);
    background-color: transparent;
    color: var(--color-secondary);
  }

  .btn-secondary:hover {
    background-color: var(--color-secondary);
    color: var(--color-on-primary);
  }

  .btn-secondary:focus-visible {
    outline: 2px solid var(--color-outline);
    outline-offset: 2px;
  }

  .btn-secondary:active {
    background-color: var(--color-secondary-active);
    border-color: var(--color-secondary-active);
    color: var(--color-on-primary);
  }

  .btn-secondary:disabled,
  .btn-secondary[aria-disabled="true"] {
    border-color: var(--color-secondary-disabled);
    color: var(--color-secondary-disabled);
    cursor: not-allowed;
    opacity: 0.7;
  }
}
/* Benefits section: benefit cards grid and benefits bento. */
@layer components {
  .benefit-card {
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-xl);
    background-color: var(--color-surface);
    padding: var(--spacing-l);
    text-align: left;
    transition: transform var(--transition-base) var(--transition-ease),
      box-shadow var(--transition-base) var(--transition-ease);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .benefit-card p {
    margin-bottom: 0;
  }
  /* Mobile: all cards same width (full column); from 768px first card gets different layout */
  .benefits-grid .benefit-card:first-child {
    width: 100%;
    max-width: 100%;
    justify-self: stretch;
  }

  .benefit-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
  }

  .benefit-card__care-link {
    color: var(--color-link);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--transition-base) var(--transition-ease);
  }

  .benefit-card__care-link:hover {
    color: var(--color-link-hover);
  }

  .benefit-card__care-link:focus-visible {
    outline: 2px solid var(--color-link-focus);
    outline-offset: 2px;
  }

  /* Benefits: mobile = single column; tablet/laptop = narrow first column (diagram), 2nd & 3rd share space (1fr 1fr), 4th below; grid always fits container */
  .benefits-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-m);
    align-items: start;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  @media (min-width: 768px) {
    .benefits-grid {
      /* First column capped so cards 2 & 3 always get space; right columns share remainder */
      grid-template-columns: min(240px, 28%) minmax(0, 1fr) minmax(0, 1fr);
      grid-template-rows: auto auto;
    }
    .benefits-grid .benefit-card:first-child {
      grid-column: 1;
      grid-row: 1 / -1;
      width: auto;
      max-width: none;
      align-self: stretch;
    }
    .benefits-grid .benefit-card:nth-child(2) {
      grid-column: 2;
      grid-row: 1;
    }
    .benefits-grid .benefit-card:nth-child(3) {
      grid-column: 3;
      grid-row: 1;
    }
    .benefits-grid .benefit-card:nth-child(4) {
      grid-column: 2 / -1;
      grid-row: 2;
    }
  }

  @media (min-width: 1024px) {
    .benefits-grid {
      grid-template-columns: min(260px, 22%) minmax(0, 1fr) minmax(0, 1fr);
    }
  }

  /* Benefits bento: same grid as portfolio-bento, 4 items — diagram large, 2 cards, 1 wide card */
  .benefits-bento {
    display: grid;
    gap: var(--spacing-m);
    grid-template-columns: repeat(1, minmax(0, 1fr));
    grid-auto-rows: minmax(9rem, auto);
    grid-auto-flow: dense;
  }

  @media (min-width: 640px) {
    .benefits-bento {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-auto-rows: minmax(9rem, auto);
    }

    .benefits-bento__item--wide {
      grid-column: span 2;
      grid-row: span 2;
    }

    .benefits-bento__item--full {
      grid-column: span 2;
    }
  }

  @media (min-width: 1024px) {
    .benefits-bento {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      grid-auto-rows: minmax(9rem, auto);
    }

    .benefits-bento__item--wide {
      grid-column: span 2;
      grid-row: span 2;
    }

    .benefits-bento__item--full {
      grid-column: span 2;
    }
  }

  .benefits-bento__item {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background-color: var(--color-surface-container);
    box-shadow: var(--shadow-sm);
    min-height: 0;
    min-width: 0;
  }

  .benefits-bento__inner {
    height: 100%;
    padding: var(--spacing-l);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }

  /* Не сбрасывать padding: отступы задаёт .benefits-bento__inner (тот же div), иначе текст упирается в границу карточки */
  .benefits-bento__item .benefit-card {
    flex: 1;
    margin: 0;
    min-height: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
  }

  .benefits-bento__item .benefit-card:hover {
    transform: none;
    box-shadow: none;
  }

  .benefits-bento__item:hover {
    box-shadow: var(--shadow-md);
  }

  .benefits-bento__item--wide .layers-diagram__illustration {
    max-width: min(var(--layers-illustration-max-width-mobile), 100%);
  }
  .benefits-bento__item--wide .layers-diagram--by-lang .layers-diagram__illustration {
    max-width: 100%;
  }

  @media (min-width: 640px) {
    .benefits-bento__item--wide .layers-diagram__illustration {
      max-width: var(--layers-illustration-max-width-tablet);
    }
    .benefits-bento__item--wide .layers-diagram--by-lang .layers-diagram__illustration {
      max-width: 100%;
    }
  }

  @media (min-width: 1024px) {
    .benefits-bento__item--wide .layers-diagram__illustration {
      max-width: var(--layers-illustration-max-width-desktop);
    }
    .benefits-bento__item--wide .layers-diagram--by-lang .layers-diagram__illustration {
      max-width: 100%;
    }
  }

  /* PhotoSwipe: переменные и подложка см. вне @layer ниже (vendor CSS без слоя). */

  .pswp__button {
    opacity: 0.9;
  }

  .pswp__button:hover,
  .pswp__button:focus-visible {
    opacity: 1;
  }

  .pswp__button:focus-visible {
    outline: 2px solid var(--pswp-icon-color);
    outline-offset: 2px;
    border-radius: var(--radius-md);
  }

  .pswp__counter {
    font-size: var(--font-size-small);
    letter-spacing: 0.02em;
    color: oklch(98% 0 0 / 0.95);
    padding: var(--spacing-s) var(--spacing-m);
  }

  .pswp__custom-caption {
    position: absolute;
    left: 50%;
    bottom: var(--spacing-m);
    transform: translateX(-50%);
    width: calc(100% - 2 * var(--container-padding-mobile));
    max-width: 32rem;
    padding: var(--spacing-s) var(--spacing-m);
    font-size: var(--font-size-small);
    line-height: 1.4;
    color: var(--color-text);
    background-color: color-mix(in oklch, var(--color-surface) 88%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: var(--radius-md);
    text-align: center;
    z-index: 10;
    pointer-events: none;
  }

  .pswp__custom-caption[hidden] {
    display: none;
  }

  @media (min-width: 768px) {
    .pswp__custom-caption {
      bottom: var(--spacing-l);
      padding: var(--spacing-m) var(--spacing-l);
      max-width: 44rem;
      font-size: var(--font-size-body);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .pswp,
    .pswp__bg,
    .pswp__container,
    .pswp__slide {
      transition-duration: 0.01ms !important;
    }
  }

  .portfolio-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    cursor: pointer;
  }

  .skip-to-main {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  .skip-to-main:focus {
    left: var(--spacing-m);
    top: var(--spacing-m);
    width: auto;
    height: auto;
    padding: var(--spacing-s) var(--spacing-m);
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    border-radius: var(--radius-md);
    z-index: 50;
  }

}
/*
 * PhotoSwipe: vendor/photoswipe.css подгружается с JS без @layer — правила здесь
 * вне @layer и с селектором html…, чтобы перебить vendor и работали токены темы.
 * Подложка — как у попапа (scrim + blur), плотность: --color-scrim-strong (в 2× менее прозрачный scrim).
 */
html .pswp .pswp__bg {
  background-color: var(--color-scrim-strong);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
html .pswp {
  --pswp-placeholder-bg: oklch(12% 0 0);
  --pswp-icon-color: oklch(98% 0 0);
  --pswp-icon-color-secondary: oklch(65% 0 0);
  --pswp-icon-stroke-color: oklch(50% 0 0);
  --pswp-icon-stroke-width: 1.5px;
  --pswp-preloader-color: oklch(50% 0 0 / 0.4);
  --pswp-preloader-color-secondary: oklch(98% 0 0 / 0.9);
}
html.dark .pswp {
  --pswp-placeholder-bg: var(--color-surface-container);
  --pswp-icon-color-secondary: var(--color-text-muted);
}
/* Catalog: filters, bento, product cards, empty state. */
@layer components {
  /*
   * Catalog-scoped tokens (set on #catalog in buyer_home.html so they cascade here).
   * --palette-padding: inset inside bento card content on narrow viewports (all sides)
   *   so active filter outlines / rings are not clipped by overflow-x: clip on the wrap.
   */
  #catalog {
    --palette-padding: 0.3rem;
  }

  /* Section header: title + subtitle row + spacing below */
  .catalog-section-header {
    margin-bottom: var(--spacing-l, 1.5rem);
  }

  .catalog-section-header__title-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-m);
  }

  .catalog-download-btn {
    flex-shrink: 0;
  }

  /* Subtitle and Download button on one line */
  .catalog-subtitle-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem 1rem;
    margin-top: var(--spacing-s);
    margin-bottom: var(--spacing-m);
    text-align: center;
  }

  .catalog-subtitle-row .catalog-subtitle-text {
    margin: 0;
    font-size: 1.125rem;
    line-height: var(--line-height-body);
    color: var(--color-text-secondary);
  }

  /* Overflow containment so tablet (e.g. iPad Pro 1024px) does not scroll horizontally.
     Desktop (≥1280px): allow horizontal overflow so card borders / focus rings are not clipped. */
  .catalog-filters-bento-wrap {
    margin-bottom: var(--spacing-l);
    min-width: 0;
    overflow-x: clip;
  }

  /* Inset so active filter rings / double borders on cards do not sit flush against the clip edge */
  @media (max-width: 1279.98px) {
    .catalog-filters-bento-wrap .catalog-bento-card__content {
      padding: var(--palette-padding);
    }
  }

  @media (min-width: 1280px) {
    .catalog-filters-bento-wrap {
      overflow-x: visible;
    }
  }

  .catalog-filters-bento {
    display: grid;
    gap: var(--spacing-s);
    grid-template-columns: repeat(1, minmax(0, 1fr));
    grid-auto-rows: minmax(9rem, auto);
    grid-auto-flow: dense;
    min-width: 0;
  }

  @media (min-width: 640px) {
    .catalog-filters-bento {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-auto-rows: minmax(10rem, auto);
      gap: var(--spacing-m);
      align-items: start;
    }

    /* Tablet / small laptop: keep dependent filters on the first row:
       Installation (left) → Sizes (right), then Grade below. */
    .catalog-bento-card--installation {
      grid-column: 1;
      grid-row: 1;
    }

    .catalog-bento-card--sizes {
      grid-column: 2;
      grid-row: 1;
    }

    .catalog-bento-card--grade {
      grid-column: 1;
      grid-row: 2;
    }
  }

  /* Desktop only: 50-col bento row. Tablet (e.g. iPad Pro 1024px) keeps 2-col stacked layout. */
  @media (min-width: 1280px) {
    .catalog-filters-bento {
      grid-template-columns: repeat(50, minmax(0, 1fr));
      grid-auto-rows: minmax(10rem, auto);
      gap: var(--spacing-m);
    }

    /* Row 1: Grade 15, Installation 15, Sizes 20 (50 cols). */
    .catalog-bento-card--grade {
      grid-column: span 14;
      grid-row: 1;
    }

    .catalog-bento-card--installation {
      grid-column: span 22;
      grid-row: 1;
    }

    .catalog-bento-card--sizes {
      grid-column: span 15;
      grid-row: 1;
    }
  }

  .catalog-bento-card {
    background-color: var(--color-surface-container);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-lg);
    padding: var(--spacing-l);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-m);
    min-width: 0;
  }

  .catalog-bento-card__title {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    letter-spacing: var(--letter-spacing-small);
    min-height: 1.5em;
    flex-shrink: 0;
    transition:
      color var(--transition-base) var(--transition-ease),
      box-shadow var(--transition-base) var(--transition-ease);
  }

  .catalog-bento-card__content {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: flex-start;
    gap: var(--spacing-s);
  }

  .catalog-bento-card__content--icons {
    justify-content: center;
  }

  @media (min-width: 640px) {
    .catalog-bento-card__content--icons {
      justify-content: flex-start;
    }
  }

  /* Sizes card: buttons in a row with wrap (2+ columns when width allows); placeholder = single centered hint */
  .catalog-bento-card__content--sizes {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    align-content: flex-start;
    gap: var(--spacing-s);
    min-height: 0;
  }

  .catalog-bento-card__content--sizes.catalog-bento-card__content--sizes-placeholder {
    flex-direction: column;
    align-content: center;
  }

  .catalog-sizes-hint,
  .catalog-sizes-empty {
    font-size: var(--font-size-body-sm);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.4;
  }

  .catalog-sizes-table-wrap {
    overflow: auto;
    min-height: 0;
  }

  .catalog-sizes-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-body-sm);
    color: var(--color-text-secondary);
  }

  .catalog-sizes-table th,
  .catalog-sizes-table td {
    padding: var(--spacing-xs) var(--spacing-s);
    text-align: left;
    border-bottom: 1px solid var(--color-outline-variant);
  }

  .catalog-sizes-table th {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    white-space: nowrap;
  }

  .catalog-sizes-table th:last-child,
  .catalog-sizes-table td:last-child {
    padding-right: 0;
  }

  .catalog-sizes-table tbody tr:last-child td {
    border-bottom: none;
  }

  /* Color palette wrapper: separate block (not a bento card); portfolio-style (title + bento grid only) */
  .catalog-palette {
    container-type: inline-size;
    container-name: color-card;
    margin-top: var(--spacing-l);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-m); /* same as .catalog-bento-card title–content gap */
  }

  .catalog-bento-card__content--swatches {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-s);
    align-items: center;
    align-content: flex-start;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  /* Palette grid: unified swatch sizing, responsive column count */
  .catalog-bento-card__content--swatches-bento {
    display: grid;
    gap: var(--spacing-m) var(--spacing-l);
    overflow: visible;
    grid-template-columns: repeat(auto-fill, minmax(clamp(120px, 14vw, 170px), 1fr));
    padding-top: var(--spacing-xs);
  }

  .catalog-bento-swatch-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
  }

  .catalog-palette__grid .catalog-bento-swatch-wrap {
    min-width: 0;
    width: 100%;
  }

  /* Mobile only: flex wrap so bento doesn't get too small; tablet+ keep bento (see expandable width) */
  .catalog-color-expandable {
    position: relative;
  }

  .catalog-color-expandable__clip {
    overflow: hidden;
    transition: max-height var(--transition-base) var(--transition-ease);
  }

  .catalog-color-expandable__clip.catalog-color-expandable__clip--all-visible {
    overflow: visible;
  }

  .catalog-color-expandable__actions {
    display: flex;
    justify-content: center;
    margin-top: var(--spacing-s);
    transition: opacity var(--transition-base), visibility var(--transition-base);
  }

  .catalog-color-expandable__actions--hidden {
    opacity: 0;
    visibility: hidden;
    margin-top: 0;
    height: 0;
    overflow: hidden;
  }

  .catalog-color-expandable__btn-more {
    min-height: var(--touch-target-min);
    padding: var(--spacing-xs) var(--spacing-m);
    font-size: var(--font-size-body-sm);
    /* Faster, predictable taps on mobile (no double-tap-zoom wait on the control) */
    touch-action: manipulation;
  }

  .catalog-palette__grid .catalog-bento-swatch {
    min-width: 0;
    width: 100%;
    aspect-ratio: 1 / 1;
    min-height: var(--touch-target-min);
    border-radius: 50%;
  }

  .catalog-bento-card__content--swatches-bento .catalog-bento-swatch--bg {
    background-color: var(--color-surface-container);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .catalog-bento-swatch__image-wrap {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.3s ease-in;
  }

  .catalog-bento-swatch__image-wrap.is-loaded {
    opacity: 1;
  }

  .catalog-bento-swatch__image {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }

  /* Явно вертикальная карточка (напр. Коричневый): кнопки колонкой */
  .catalog-bento-card--color-vertical .catalog-bento-card__content--swatches {
    flex-direction: column;
    align-items: stretch;
  }

  .catalog-bento-card--color-vertical .catalog-bento-swatch {
    width: 100%;
  }

  /* Color filter: round swatch with label below */
  .catalog-bento-swatch {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 4.5rem;
    aspect-ratio: 1 / 1;
    min-width: 4rem;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--color-outline-variant);
    color: var(--color-text);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    transition:
      border-color var(--transition-base) var(--transition-ease),
      box-shadow var(--transition-base) var(--transition-ease),
      transform var(--transition-base) var(--transition-ease);
  }

  .catalog-bento-card--color .catalog-bento-swatch {
    max-width: 100%;
  }

  /* Full-button background: image (from product texture) */
  .catalog-bento-swatch--bg {
    background-color: var(--color-surface-container);
  }

  .catalog-bento-swatch:hover {
    border-color: var(--color-secondary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }

  .catalog-bento-swatch:active {
    box-shadow: var(--shadow-sm);
    transform: translateY(0);
  }

  .catalog-bento-swatch:focus-visible {
    outline: 2px solid var(--color-outline);
    outline-offset: 2px;
  }

  .catalog-bento-swatch__label {
    display: block;
    text-align: center;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    padding: var(--spacing-xs) 0;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }

}
/* Portfolio: bento grid and expandable load-more. */
@layer components {
  .portfolio-bento {
    display: grid;
    gap: var(--spacing-m);
    grid-template-columns: repeat(1, minmax(0, 1fr));
    grid-auto-rows: 9rem;
    grid-auto-flow: dense;
  }

  @media (min-width: 640px) {
    .portfolio-bento {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-auto-rows: 10rem;
    }

    .portfolio-bento__item:nth-child(5n + 1) {
      grid-column: span 2;
      grid-row: span 2;
    }

    .portfolio-bento__item:nth-child(5n + 4) {
      grid-row: span 2;
    }
  }

  @media (min-width: 1024px) {
    .portfolio-bento {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      grid-auto-rows: 9rem;
    }

    .portfolio-bento__item:nth-child(7n + 1) {
      grid-column: span 2;
      grid-row: span 2;
    }

    .portfolio-bento__item:nth-child(7n + 4) {
      grid-column: span 2;
    }

    .portfolio-bento__item:nth-child(7n + 6) {
      grid-row: span 2;
    }
  }

  .portfolio-bento__item {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background-color: var(--color-surface-container);
    box-shadow: var(--shadow-sm);
    min-width: 0;
  }

  .portfolio-bento__link {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
  }

  .portfolio-bento__link:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }

  .portfolio-bento__image {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
    transform: scale(1);
    transition: transform var(--transition-base) var(--transition-ease);
  }

  .portfolio-bento__overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: var(--spacing-m);
    background: linear-gradient(0deg, oklch(0% 0 0 / 0.65), oklch(0% 0 0 / 0));
    color: var(--color-text-on-inverse);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
  }

  .portfolio-bento__title {
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
    text-shadow: 0 2px 12px oklch(0% 0 0 / 0.35);
  }

  .portfolio-bento__meta {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2xs);
    font-size: 0.875rem;
    color: oklch(100% 0 0 / 0.85);
  }

  .portfolio-bento__item:hover .portfolio-bento__image,
  .portfolio-bento__item:focus-within .portfolio-bento__image {
    transform: scale(1.03);
  }

  /* Portfolio expandable: limited initial count, peek of next "page", load more */
  .portfolio-expandable {
    position: relative;
  }

  .portfolio-expandable__clip {
    position: relative;
    overflow: hidden;
    transition: max-height var(--transition-base) var(--transition-ease);
  }

  .portfolio-expandable__peek {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4.5rem;
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      oklch(100% 0 0 / 0),
      var(--color-cream)
    );
    transition: opacity var(--transition-base) var(--transition-ease);
  }

  .portfolio-expandable__peek--hidden {
    opacity: 0;
    visibility: hidden;
  }

  .portfolio-expandable__actions {
    display: flex;
    justify-content: center;
    margin-top: var(--spacing-m);
    transition: opacity var(--transition-base), visibility var(--transition-base);
  }

  .portfolio-expandable__actions--hidden {
    opacity: 0;
    visibility: hidden;
    margin-top: 0;
    height: 0;
    overflow: hidden;
  }

  .portfolio-expandable__btn-more {
    min-inline-size: 12rem;
  }

}
/* Size Variants section: bento grid of installation types + size tables. */
@layer components {

  /* Full-bleed grid: same horizontal padding as .container-page, без max-width — шире на больших экранах */
  .sv-bento-bleed {
    width: 100%;
    box-sizing: border-box;
    padding-inline: var(--container-padding-mobile);
  }

  @media (min-width: 768px) {
    .sv-bento-bleed {
      padding-inline: var(--container-padding-tablet);
    }
  }

  @media (min-width: 1024px) {
    .sv-bento-bleed {
      padding-inline: var(--container-padding-desktop);
    }
  }

  /* ── Bento grid ─────────────────────────────────────────────────────────── */

  .sv-bento {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-m);
  }

  /* Планшеты и ноутбуки: карточки укладки на всю ширину (профиль — без принудительного span) */
  @media (min-width: 768px) {
    .sv-card--span-1:not(.sv-card--profile),
    .sv-card--span-2,
    .sv-card--span-3 {
      grid-column: 1 / -1;
    }
  }

  /* Большие экраны: две колонки — «Как устроена доска» половина ширины, остальные карточки на всю полосу */
  @media (min-width: 1024px) {
    .sv-bento {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sv-card--profile {
      grid-column: span 1;
    }

    .sv-card--installation {
      grid-column: 1 / -1;
    }
  }

  /* ── Card base ──────────────────────────────────────────────────────────── */

  .sv-card {
    background-color: var(--color-surface-container);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-outline-variant);
    padding: var(--spacing-l);
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
  }

  .sv-card--installation {
    gap: var(--spacing-s);
    --sv-installation-icon-size: calc(2 * var(--sv-card-icon-size));
  }

  /* ── Card info area (icon + title + subtitle + summary) ─────────────────── */
  /* Icon size: 64px (4rem) so header has room for custom square images. Use 64×64px (or 128×128 for retina). */
  .sv-card__info {
    /* We intentionally use float-based wrapping here:
       the text should flow on the right and, if long, continue under the icon. */
    display: flow-root;
  }

  .sv-card__icon-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
  }

  .sv-card:not(.sv-card--profile):not(.sv-card--installation) .sv-card__icon-block {
    float: left;
    margin: 0 var(--spacing-m) var(--spacing-xs) 0;
    width: var(--sv-card-icon-size);
  }

  .sv-card__icon {
    flex-shrink: 0;
    width: var(--sv-card-icon-size);
    height: var(--sv-card-icon-size);
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-outline-variant);
    background-color: var(--color-surface-container-high);
    overflow: hidden;
    color: var(--color-secondary);
    /* Reserve space before CSS loads — prevents layout shift on hard refresh */
    min-width: var(--sv-card-icon-size);
    min-height: var(--sv-card-icon-size);
  }

  /* Карточки укладки: в шапке заголовок слева, описание справа */
  .sv-card--installation .sv-card__header {
    flex-shrink: 0;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-m);
  }

  .sv-card--installation .sv-card__header .sv-card__title {
    margin: 0;
    flex: 0 1 auto;
    min-width: 0;
  }

  .sv-card--installation .sv-card__header .sv-card__subtitle--header {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 38rem;
    text-align: end;
    text-wrap: balance;
  }

  /* Под шапкой: слева квадратная иконка 1:1, справа таблица */
  .sv-card--installation .sv-card__body {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--spacing-m);
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
    min-height: 0;
  }

  .sv-card--installation .sv-card__icon-block {
    float: none;
    margin: 0;
    flex-shrink: 0;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    width: var(--sv-installation-icon-size);
    min-width: var(--sv-installation-icon-size);
  }

  .sv-card--installation .sv-card__icon {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: var(--sv-installation-icon-size);
    height: var(--sv-installation-icon-size);
    aspect-ratio: 1 / 1;
    max-width: 100%;
    /* Reserve space before CSS loads — prevents layout shift on hard refresh */
    min-width: var(--sv-installation-icon-size);
    min-height: var(--sv-installation-icon-size);
  }

  .sv-card--installation .sv-card__content-col {
    flex: 1 1 auto;
    min-width: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }

  .sv-card--installation .sv-card__content-col .sv-card__table-scroll {
    width: 100%;
    min-width: 0;
  }

  @media (max-width: 767px) {
    .sv-card--installation .sv-card__header {
      flex-direction: column;
      align-items: stretch;
      gap: var(--spacing-xs);
    }

    .sv-card--installation .sv-card__header .sv-card__subtitle--header {
      text-align: start;
      max-width: none;
    }

    .sv-card--installation .sv-card__body {
      flex-direction: column;
      align-items: stretch;
      gap: var(--spacing-s);
    }

    .sv-card--installation .sv-card__icon-block {
      align-self: center;
    }
  }

  .sv-card__icon svg,
  .sv-card__icon img {
    width: 100%;
    height: 100%;
    display: block;
    -o-object-fit: contain;
       object-fit: contain;
  }

  .sv-card__icon-label {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    color: var(--color-secondary);
    line-height: 1;
  }

  .sv-card__info-text {
    min-width: 0;
  }

  .sv-card__title {
    font-size: var(--font-size-lead);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-heading);
    letter-spacing: var(--letter-spacing-heading);
    color: var(--color-text);
    margin: 0 0 var(--spacing-xs);
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  .sv-card__subtitle {
    font-size: var(--font-size-body);
    color: var(--color-text-muted);
    margin: 0 0 var(--spacing-xs);
    line-height: var(--line-height-small);
  }

  /* (Removed) .sv-card__summary — we no longer display size ranges. */

  /* ── Таблицы размеров (в колонке справа от SVG; на узких экранах — прокрутка по X) ─ */

  .sv-card__table-scroll {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
  }

  .sv-card__table {
    width: 100%;
    min-width: 26rem;
    border-collapse: collapse;
    font-size: var(--font-size-small);
    color: var(--color-text);
  }

  .sv-card__table--stack {
    margin-top: var(--spacing-m);
  }

  .sv-card__table-caption {
    caption-side: top;
    text-align: start;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-body);
    color: var(--color-text);
    padding: 0 0 var(--spacing-xs);
  }

  .sv-card__table thead th {
    text-align: start;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    padding: var(--spacing-xs) var(--spacing-s);
    border-bottom: 1px solid var(--color-outline-variant);
    white-space: nowrap;
  }

  .sv-card__table tbody td {
    padding: var(--spacing-s);
    border-bottom: 1px solid var(--color-outline-variant);
    vertical-align: middle;
  }

  .sv-card__table tbody tr:last-child td {
    border-bottom: none;
  }

  .sv-card__desc {
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
    margin: var(--spacing-s) 0 0;
    line-height: var(--line-height-body);
  }

  /* (Removed) Visualization area — no per-size diagrams anymore. */

  /* Profile card: no divider, image flows naturally */
  .sv-card--profile .sv-card__info {
    display: block;
  }

  .sv-card--profile .sv-card__visual--profile {
    border-top: none;
    padding-top: var(--spacing-s);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-m);
  }

  /* Планшет и десктоп: две схемы профиля в один ряд (на мобильных — колонка) */
  @media (min-width: 768px) {
    .sv-card--profile .sv-card__visual--profile {
      flex-direction: row;
    }

    .sv-profile-block {
      flex: 1;
      min-width: 0;
    }
  }

  .sv-profile-block {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
  }

  /* Wrapper reserves space before CSS loads — viewBox 240×144 = 5:3 ratio */
  .sv-profile-svg-wrapper {
    width: 100%;
  }

  @media (min-width: 768px) {
    .sv-profile-svg-wrapper {
      max-height: none; /* Let it size naturally on wider screens */
    }
  }

  .sv-profile-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    -o-object-fit: cover;
       object-fit: cover;
    aspect-ratio: 5 / 3;
  }

  /* SVG-диаграммы в карточке «Как устроена доска» */
  .sv-profile-svg {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-md);
    color: var(--color-text);
  }

  /* Для схемы слоёв допускаем вылеты линий/стрелок за viewBox */
  .sv-profile-svg--layers {
    overflow: visible;
  }

  /* Подписи в SVG (Шип/Паз/Фаска и размерные подписи) — без stroke на группе, обычная насыщенность */
  .sv-profile-svg .sv-profile-label__text,
  .sv-profile-svg .sv-layers-dim__text {
    font-size: var(--font-size-body);
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-regular);
    white-space: nowrap;
  }

  /* Hover для схемы слоёв: линии и подписи */
  .sv-profile-svg--layers .sv-layers-line {
    transition: stroke var(--transition-base) var(--transition-ease),
      stroke-width var(--transition-base) var(--transition-ease),
      opacity var(--transition-base) var(--transition-ease);
  }

  .sv-profile-svg--layers .sv-layers-dim__text {
    transition: fill var(--transition-base) var(--transition-ease);
  }

  .sv-profile-svg--layers .sv-layers-hit {
    fill: transparent;
    pointer-events: all;
    cursor: pointer;
  }

  /* Меняем курсор и по самим подписям/размерным группам */
  .sv-profile-svg--layers .sv-layers-dim,
  .sv-profile-svg--layers .sv-layers-dim__text {
    cursor: pointer;
  }

  /* Hover по области/подписи 0,6–0,8 мм → линии 1 и 2 + подпись */
  .sv-profile-svg--layers:has(.sv-layers-hit--bevel:hover) .sv-layers-line--1,
  .sv-profile-svg--layers:has(.sv-layers-hit--bevel:hover) .sv-layers-line--2,
  .sv-profile-svg--layers:has(.sv-layers-dim--bevel:hover) .sv-layers-line--1,
  .sv-profile-svg--layers:has(.sv-layers-dim--bevel:hover) .sv-layers-line--2 {
    stroke: var(--color-secondary);
    stroke-width: 1.5;
    opacity: 1;
  }

  .sv-profile-svg--layers:has(.sv-layers-hit--bevel:hover) .sv-layers-dim--bevel .sv-layers-dim__text,
  .sv-profile-svg--layers:has(.sv-layers-dim--bevel:hover) .sv-layers-dim--bevel .sv-layers-dim__text {
    fill: var(--color-secondary);
    stroke: none;
  }

  /* Hover по области/подписи 3 мм → линии 1 и 3 + подпись */
  .sv-profile-svg--layers:has(.sv-layers-hit--lamella:hover) .sv-layers-line--1,
  .sv-profile-svg--layers:has(.sv-layers-hit--lamella:hover) .sv-layers-line--3,
  .sv-profile-svg--layers:has(.sv-layers-dim--lamella:hover) .sv-layers-line--1,
  .sv-profile-svg--layers:has(.sv-layers-dim--lamella:hover) .sv-layers-line--3 {
    stroke: var(--color-secondary);
    stroke-width: 1.5;
    opacity: 1;
  }

  .sv-profile-svg--layers:has(.sv-layers-hit--lamella:hover) .sv-layers-dim--lamella .sv-layers-dim__text,
  .sv-profile-svg--layers:has(.sv-layers-dim--lamella:hover) .sv-layers-dim--lamella .sv-layers-dim__text {
    fill: var(--color-secondary);
    stroke: none;
  }

  /* (Removed) size diagram grid + per-size CTA styles. */
}
/* Grades section: three bento cards + expandable compare table (portfolio-style).
   Image aspect 3:4 (taller). Table: 3 columns only, criterion words in cell text. */
@layer components {

  .gr-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-m);
  }

  @media (min-width: 768px) {
    .gr-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 1024px) {
    .gr-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  /* ── Grade card ────────────────────────────────────────────────────────────── */

  .gr-card {
    background-color: var(--color-surface-container);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    transition:
      border-color var(--transition-base) var(--transition-ease),
      box-shadow var(--transition-base) var(--transition-ease),
      transform var(--transition-base) var(--transition-ease);
  }

  /* Min-height = padding + 2 lines of text (so thesis block is consistent; images align on one line) */
  .gr-card__thesis {
    padding: var(--spacing-m) var(--spacing-l) var(--spacing-s);
    font-size: var(--font-size-body);
    line-height: var(--line-height-small);
    color: var(--color-text-secondary);
    margin: 0;
    min-height: calc(
      var(--spacing-m) + 2 * var(--line-height-small) * var(--font-size-body) + var(--spacing-s)
    );
  }

  /* Photo: 3:4 (taller) for stronger visual */
  .gr-card__media {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    flex-shrink: 0;
    background-color: var(--color-surface-container-high);
  }

  .gr-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
    transition: transform var(--transition-slow) var(--transition-ease);
  }

  .gr-card:hover .gr-card__media img {
    transform: scale(1.03);
  }

  /* Hover hint: make the whole card feel interactive and "invite" a click on CTA.
     Reuses the catalog filter hover language: container background + primary border + subtle lift. */
  .gr-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
  }

  @media (prefers-reduced-motion: reduce) {
    .gr-card:hover .gr-card__media img {
      transform: none;
    }

    .gr-card:hover {
      transform: none;
    }
  }

  /* Footer: title row */
  .gr-card__footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--spacing-m);
    padding: var(--spacing-m) var(--spacing-l);
    border-top: 1px solid var(--color-outline-variant);
    flex-wrap: wrap;
  }

  .gr-card__title {
    margin: 0;
    font-size: var(--font-size-lead);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-heading);
    letter-spacing: var(--letter-spacing-heading);
    color: var(--color-text);
  }

  /* ── Compare: button floats over card in gradient zone (portfolio-style) ────── */

  .gr-compare-expandable {
    position: relative;
    margin-top: var(--spacing-m);
  }

  /* When collapsed: card looks "cut off" at bottom (no bottom border, only top radius) */
  .gr-compare {
    background-color: var(--color-surface-container);
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-xl);
    position: relative;
    overflow: hidden;
    transition: border-radius var(--transition-slower) var(--transition-ease),
                border-color var(--transition-base) var(--transition-ease);
  }

  .gr-compare-expandable:not(.gr-compare-expandable--open) .gr-compare {
    border-bottom-color: transparent;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }

  .gr-compare-expandable--open .gr-compare {
    border-bottom-color: var(--color-outline-variant);
  }

  /* Collapsed: show ~1.5 rows (height кратно 8px: 96px = 6rem) */
  .gr-compare-expandable__clip {
    position: relative;
    overflow: hidden;
    max-height: 4.5rem; /* 72px */
    transition: max-height var(--transition-slower) var(--transition-ease);
  }

  .gr-compare-expandable--open .gr-compare-expandable__clip {
    max-height: 70rem;
  }

  /* When detailed (catalog) table is visible, allow much more height */
  .gr-compare-expandable--catalog-open .gr-compare-expandable__clip {
    max-height: 160rem;
  }

  /* Gradient at bottom of visible clip — content and "edge" fade out */
  .gr-compare-expandable__peek {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4.5rem;
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      oklch(100% 0 0 / 0),
      var(--color-surface-container)
    );
    transition: opacity var(--transition-base) var(--transition-ease);
  }

  .gr-compare-expandable--open .gr-compare-expandable__peek {
    opacity: 0;
    visibility: hidden;
  }

  /* Button below the partially visible card (like portfolio "Показать ещё") */
  .gr-compare-expandable__actions {
    display: flex;
    justify-content: center;
    margin-top: var(--spacing-m);
  }

  .gr-compare-expandable__btn {
    min-inline-size: 12rem;
  }

  /* Same grid as .gr-grid so column headers and lists align with bento cards above */
  .gr-compare__body {
    padding: var(--spacing-l) 0;
  }

  .gr-compare__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-m);
  }

  @media (min-width: 768px) {
    .gr-compare__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 1024px) {
    .gr-compare__grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .gr-compare__col {
    min-width: 0;
    padding-inline: var(--spacing-l);
  }

  /* Column title on same baseline as bento card titles (Natur, Rustik) */
  .gr-compare__col-title {
    margin: 0 0 var(--spacing-xs);
    font-size: var(--font-size-lead);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-heading);
    letter-spacing: var(--letter-spacing-heading);
    color: var(--color-text);
  }

  /* Desktop/laptop: hide duplicate column headers (titles already visible above in cards).
     Keep them accessible for screen readers. */
  @media (min-width: 1024px) {
    .gr-compare__col-title {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border-width: 0;
    }
  }

  .gr-compare__list {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-secondary);
  }

  .gr-compare__list li {
    padding: var(--spacing-xs) 0 var(--spacing-xs) 0;
    padding-inline-start: 1.25em;
    position: relative;
  }

  .gr-compare__list li::before {
    content: "• ";
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: var(--font-weight-regular);
  }

  .gr-compare__list li:first-child {
    padding-top: 0;
  }

  /* ── Printed catalog table (2nd step) ─────────────────────────────────────── */

  .gr-compare-catalog {
    display: block;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    padding: 0 var(--spacing-l) var(--spacing-l);
    transition: max-height var(--transition-slower) var(--transition-ease),
                opacity var(--transition-slower) var(--transition-ease);
  }

  .gr-compare-expandable--catalog-open .gr-compare-catalog {
    max-height: 120rem;
    opacity: 1;
  }

  .gr-compare-catalog__head {
    padding-top: var(--spacing-m);
    padding-bottom: var(--spacing-s);
  }

  .gr-compare-catalog__kicker {
    margin: 0 0 var(--spacing-2xs);
    font-size: var(--font-size-small);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
  }

  .gr-compare-catalog__title {
    margin: 0;
    font-size: var(--font-size-lead);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-heading);
    letter-spacing: var(--letter-spacing-heading);
    color: var(--color-text);
  }

  .gr-compare-catalog__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--color-outline-variant);
    border-radius: var(--radius-l);
    background: var(--color-surface-container-high);
  }

  .gr-compare-catalog__table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 48rem;
  }

  .gr-compare-catalog__table th,
  .gr-compare-catalog__table td {
    vertical-align: top;
    text-align: left;
    padding: var(--spacing-s) var(--spacing-m);
    border-bottom: 1px solid var(--color-outline-variant);
    border-right: 1px solid var(--color-outline-variant);
    color: var(--color-text-secondary);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
  }

  .gr-compare-catalog__table thead th {
    position: sticky;
    top: 0;
    background: var(--color-surface-container);
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
    z-index: 1;
  }

  .gr-compare-catalog__table th[scope="row"] {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
    background: var(--color-surface-container);
    width: 12rem;
  }

  .gr-compare-catalog__table tr:last-child th,
  .gr-compare-catalog__table tr:last-child td {
    border-bottom: 0;
  }

  .gr-compare-catalog__table th:last-child,
  .gr-compare-catalog__table td:last-child {
    border-right: 0;
  }

  .gr-compare-catalog__list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .gr-compare-catalog__list li {
    padding: var(--spacing-2xs) 0;
    padding-inline-start: 1.25em;
    position: relative;
  }

  .gr-compare-catalog__list li::before {
    content: "• ";
    position: absolute;
    left: 0;
    color: var(--color-primary);
  }

  @media (max-width: 767px) {
    .gr-compare-expandable__clip {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    .gr-compare__grid {
      min-width: 20rem;
    }
  }

}
/* Partners page: hero, stats, geography, contact card.
   Reuses benefits-bento, benefit-card, story-transition from shared/benefits. */
@layer components {

  /* ── Hero ── */
  #partners-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 50vh;
    min-height: 50dvh;
    padding-block: calc(var(--section-spacing) + var(--spacing-3xl));
    /* Light theme: slightly darker than global cream for stronger hero emphasis */
    background-color: oklch(85% 0.015 95);
    overflow: hidden;
    isolation: isolate;
  }

  /* Dark theme: ensure stronger separation from next section */
  .dark #partners-hero {
    background: linear-gradient(
      135deg,
      oklch(30% 0.02 95) 0%,
      oklch(20% 0.015 95) 100%
    );
  }

  @supports not (min-height: 50dvh) {
    #partners-hero {
      min-height: 50vh;
    }
  }

  /* Light theme: use standard dark text colors */
  #partners-hero .section-heading {
    color: var(--color-text);
    margin-bottom: var(--spacing-m);
  }

  #partners-hero .section-subtitle {
    color: var(--color-text-secondary);
    max-width: var(--line-length);
    margin-bottom: 0;
  }

  /* Dark theme: keep hero text light on darker background */
  .dark #partners-hero .section-heading {
    color: oklch(100% 0 0 / 0.95);
  }

  .dark #partners-hero .section-subtitle {
    color: oklch(100% 0 0 / 0.78);
  }

  #partners-hero .hero-cta-group {
    margin-top: var(--spacing-xl);
    align-items: center;
    justify-content: center;
  }

  /* Use global .btn-primary styles for hero CTA */

  /* ── Stats row inside wide bento card ── */
  .partners-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: var(--spacing-l);
    margin-top: var(--spacing-l);
  }

  .partners-stat-item {
    text-align: center;
  }

  .partners-stat-value {
    display: block;
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    color: var(--color-primary);
    margin-bottom: var(--spacing-xs);
  }

  .partners-stat-label {
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
    color: var(--color-text-secondary);
  }

  /* ── Geography ── */
  .partners-geography {
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    color: var(--color-text);
  }

  /* ── Distributor perks list ── */
  .partners-perks {
    list-style: none;
    padding: 0;
    margin: var(--spacing-s) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-s);
  }

  .partners-perks li {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-s);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    color: var(--color-text-secondary);
  }

  .partners-perks li::before {
    content: "";
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    margin-top: 0.4em;
    border-radius: var(--radius-pill);
    background-color: var(--color-primary);
  }

  /* ── Work format block ── */
  .partners-format {
    max-width: var(--line-length);
    margin: var(--spacing-xl) auto 0;
    text-align: center;
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    color: var(--color-text-secondary);
  }

  .partners-format--wide {
    max-width: var(--line-length-desktop, 75ch);
  }

  /* ── Contact section ── */
  .partners-contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-m);
    align-items: stretch;
  }

  @media (min-width: 640px) {
    .partners-contact-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  /* Laptop: 3 cards in one row */
  @media (min-width: 1024px) {
    .partners-contact-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--spacing-l);
    }
  }

  .partners-contact-card {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: var(--spacing-xl);
    background-color: var(--color-surface-container);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
  }

  .partners-contact-card__name {
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin: 0 0 var(--spacing-xs);
  }

  .partners-contact-card__role {
    font-size: var(--font-size-small);
    color: var(--color-text-secondary);
    margin: 0 0 var(--spacing-l);
  }

  .partners-contact-card__contacts {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-s);
  }

  .partners-contact-card__row {
    display: flex;
    align-items: center;
    gap: var(--spacing-s);
  }

  .partners-contact-card__row a {
    color: var(--color-link);
    font-weight: var(--font-weight-semibold);
  }

  .partners-contact-card__row a:hover {
    color: var(--color-link-hover);
  }

  .partners-contact-card__icon {
    flex-shrink: 0;
    width: var(--icon-size-md);
    height: var(--icon-size-md);
    color: var(--color-text-muted);
  }

  .partners-contact-card__note {
    margin-top: var(--spacing-l);
    padding-top: var(--spacing-m);
    border-top: 1px solid var(--color-outline-variant);
    font-size: var(--font-size-small);
    color: var(--color-text-muted);
  }

  /* Keep stacked contacts inside narrower grid cards */
  @media (min-width: 1024px) {
    .partners-contact-grid .partners-contact-card__contacts {
      flex-direction: column;
      align-items: stretch;
      gap: var(--spacing-s);
    }
  }

  /* Instagram block */
  .partners-instagram {
    display: flex;
    align-items: center;
    gap: var(--spacing-s);
    margin-top: var(--spacing-xl);
    justify-content: center;
    font-size: var(--font-size-small);
    color: var(--color-text-secondary);
  }

  .partners-instagram__icon {
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    flex-shrink: 0;
    color: var(--color-text-muted);
  }

  /* Toggle button: centred below description */
  .partners-contact-toggle {
    display: flex;
    justify-content: center;
    margin-top: var(--spacing-xl);
  }

  /* ── Distributor kit section (What distributors receive) ── */
  .partners-kit-grid {
    display: grid;
    gap: var(--spacing-m);
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(9rem, auto);
    grid-auto-flow: dense;
  }

  @media (min-width: 640px) {
    .partners-kit-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .partners-kit-card--wide {
      grid-column: span 2;
    }
  }

  @media (min-width: 1024px) {
    .partners-kit-grid {
      grid-template-columns: repeat(6, minmax(0, 1fr));
      grid-auto-rows: minmax(9rem, auto);
    }

    /* Desktop layout for distributor kit (6 cols): row1: 3+3, row2: 2+4 */
    .partners-kit-card--stands {
      grid-column: 1 / span 3;
      grid-row: 1;
    }

    .partners-kit-card--sample-cuts {
      grid-column: 4 / span 3;
      grid-row: 1;
    }

    .partners-kit-card--printed-catalogs {
      grid-column: 1 / span 2;
      grid-row: 2;
    }

    .partners-kit-card--installation {
      grid-column: 3 / span 4;
      grid-row: 2;
    }
  }

  .partners-kit-card .benefits-bento__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .partners-kit-card .benefit-card {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .partners-kit-media {
    margin: calc(-1 * var(--spacing-l)) calc(-1 * var(--spacing-l)) 0;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    overflow: hidden;
    aspect-ratio: 4 / 3;
  }

  /* Wider image (3:2) for display stands */
  .partners-kit-media--wide {
    aspect-ratio: 3 / 2;
  }

  .partners-kit-media__img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
    vertical-align: middle;
  }

  .partners-kit-media__placeholder {
    width: 100%;
    height: 100%;
    background: var(--color-surface-container-high);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .partners-kit-media__placeholder--grid {
    background: linear-gradient(
      135deg,
      var(--color-surface-container) 25%,
      var(--color-surface-container-high) 25%,
      var(--color-surface-container-high) 50%,
      var(--color-surface-container) 50%,
      var(--color-surface-container) 75%,
      var(--color-surface-container-high) 75%
    );
    background-size: 12px 12px;
  }

  .partners-kit-actions {
    margin-top: var(--spacing-l);
  }

  .partners-kit-actions .catalog-download-btn,
  .partners-kit-files__btn {
    min-height: var(--touch-target-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .partners-kit-files {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-s);
    margin-top: var(--spacing-l);
  }

  .partners-kit-files__btn {
    flex: 1 1 14rem;
    min-width: 12rem;
  }

  @media (max-width: 420px) {
    .partners-kit-files__btn {
      flex-basis: 100%;
      min-width: 0;
    }
  }

  /* ── Partners benefits section: bento 5 cols — row1: 3+2, row2: 2+3 ── */
  @media (min-width: 1024px) {
    #partners-benefits .benefits-bento {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      grid-auto-rows: minmax(9rem, auto);
    }

    /* Row 1: Производитель с проверенным опытом (3 cols), 78 оттенков (2 cols) */
    #partners-benefits .benefits-bento__item:nth-of-type(1) {
      grid-column: 1 / span 3;
      grid-row: 1;
    }

    #partners-benefits .benefits-bento__item:nth-of-type(2) {
      grid-column: 4 / span 2;
      grid-row: 1;
    }

    /* Row 2: Работаем через партнёров (2 cols), География поставок (3 cols) */
    #partners-benefits .benefits-bento__item:nth-of-type(3) {
      grid-column: 1 / span 2;
      grid-row: 2;
    }

    #partners-benefits .benefits-bento__item:nth-of-type(4) {
      grid-column: 3 / span 3;
      grid-row: 2;
    }
  }
}
/* Color detail modal: informative layout, gallery, specs, CTA. */
@layer components {
  /* ----- Overlay ----- */
  .color-modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-s);
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Phone: full-screen dialog */
  @media (max-width: 540px) {
    .color-modal {
      /* Full-screen modal on phone */
      align-items: stretch;
      padding: 0;
    }
  }

  .color-modal__backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    background-color: var(--color-scrim);
    backdrop-filter: blur(8px);
  }

  /* ----- Dialog ----- */
  .color-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(100vw - 2 * var(--spacing-s), 100vh - 2 * var(--spacing-s));
    max-width: 72rem;
    max-height: 72rem;
    aspect-ratio: 1 / 1;
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-modal);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
  }

  /* Phone: full-screen dialog */
  @media (max-width: 540px) {
    .color-modal__dialog {
      width: 100%;
      max-width: 100%;
      height: 100%;
      max-height: 100vh;
      aspect-ratio: auto;
      border-radius: 0;
    }
  }

  /* ----- Header ----- */
  .color-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-m);
    flex-shrink: 0;
  }

  .color-modal__header--overlay {
    padding: var(--spacing-m);
    pointer-events: auto;
  }

  .color-modal__title {
    margin: 0;
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-heading);
    letter-spacing: var(--letter-spacing-heading);
    color: var(--color-text-on-surface);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  }

  .color-modal__close {
    flex-shrink: 0;
    padding: var(--spacing-s);
    border: none;
    border-radius: var(--radius-md);
    background: rgba(0, 0, 0, 0.3);
    color: var(--color-text-on-surface);
    cursor: pointer;
    transition: background-color var(--transition-base) var(--transition-ease);
  }

  .color-modal__close:hover {
    background: rgba(0, 0, 0, 0.5);
  }

  .color-modal__close-icon {
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    display: block;
  }

  /* ----- Loading ----- */
  .color-modal__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-m);
    padding: var(--spacing-3xl);
  }

  .color-modal__loading-spinner {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid var(--color-outline-variant);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: color-modal-spin 0.8s linear infinite;
  }

  @keyframes color-modal-spin {
    to { transform: rotate(360deg); }
  }

  .color-modal__loading-text {
    font-size: var(--font-size-body);
    color: var(--color-text-secondary);
  }

  /* ----- Error ----- */
  .color-modal__error {
    padding: var(--spacing-xl);
    background-color: color-mix(in oklch, var(--color-error) 8%, var(--color-surface));
    border: 1px solid color-mix(in oklch, var(--color-error) 30%, transparent);
    border-radius: var(--radius-md);
    margin: var(--spacing-m);
  }

  .color-modal__error-title {
    margin: 0 0 var(--spacing-xs);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    color: var(--color-error);
  }

  .color-modal__error-body {
    margin: 0 0 var(--spacing-m);
    font-size: var(--font-size-small);
    color: var(--color-text-secondary);
  }

  .color-modal__error-close {
    padding: var(--spacing-xs) 0;
    font-size: var(--font-size-small);
    color: var(--color-link);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }

  /* ----- Body ----- */
  .color-modal__body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* ----- Gallery (full screen) ----- */
  .color-modal__gallery {
    flex: 1;
    min-height: 0;
  }

  .color-modal__main-wrap {
    height: 100%;
    background-color: var(--color-cream);
    position: relative;
    overflow: hidden;
  }

  .color-modal__main-img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
  }

  /* Phone: show left part of image on small screens */
  @media (max-width: 540px) {
    .color-modal__main-img {
      -o-object-position: left bottom;
         object-position: left bottom;
    }
  }

  .color-modal__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-surface-container);
    color: var(--color-text-muted);
  }

  .color-modal__placeholder-icon {
    width: var(--icon-size-xl);
    height: var(--icon-size-xl);
  }

  /* Swipe navigation buttons (phone only) */
  .color-modal__swipe-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.3);
    color: var(--color-text-on-surface);
    cursor: pointer;
    transition: background-color var(--transition-base) var(--transition-ease);
  }

  .color-modal__swipe-btn:hover {
    background: rgba(0, 0, 0, 0.5);
  }

  .color-modal__swipe-btn svg {
    width: 1.5rem;
    height: 1.5rem;
  }

  .color-modal__swipe-btn--prev {
    left: var(--spacing-m);
  }

  .color-modal__swipe-btn--next {
    right: var(--spacing-m);
  }

  /* Header overlay on image */
  .color-modal__header-overlay {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, transparent 100%);
  }

  /* ----- Filters overlay (desktop/tablet) ----- */
  .color-modal__filters-overlay {
    position: absolute;
    inset-block-start: var(--spacing-m);
    inset-inline: var(--spacing-m);
    z-index: 2;
    pointer-events: none;
    margin-top: calc(var(--font-size-h3) + var(--spacing-m) * 2);
  }

  /* Transparent button background for overlay context (DRY) */
  .color-modal__overlay-btn {
    background: rgba(0, 0, 0, 0.3);
    border: none;
    border-radius: var(--radius-md);
    color: var(--color-text-on-surface);
    cursor: pointer;
    transition: background-color var(--transition-base) var(--transition-ease);
  }

  .color-modal__overlay-btn:hover {
    background: rgba(0, 0, 0, 0.5);
  }

  /* Summary (collapsed) - with transition */
  .color-modal__filters-summary {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    pointer-events: auto;
    max-height: 500px;
    overflow: hidden;
    transition: max-height var(--transition-base) var(--transition-ease),
                opacity var(--transition-base) var(--transition-ease);
  }

  .color-modal__filters-summary.is-collapsed {
    max-height: 0;
    opacity: 0;
  }

  /* Summary row with swatches - single button matching half spec card width */
  .color-modal__filters-summary-row {
    display: flex;
    align-items: stretch;
    gap: var(--spacing-xs);
    /* Single button takes full row width */
    width: 100%;
  }

  /* Summary swatch-style button - single button, half spec card size */
  .color-modal__filters-swatch {
    flex: 1;
    aspect-ratio: 1 / 1;
    max-width: 11rem; /* Half of spec card max-width (22rem / 2) */
    min-width: clamp(7rem, 16vw, 9rem); /* Half of spec card min-width */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    padding: 0;
    border-radius: var(--radius-lg);
    color: var(--color-text-on-surface);
    overflow: hidden;
    transition: background-color var(--transition-base) var(--transition-ease),
                transform var(--transition-base) var(--transition-ease),
                box-shadow var(--transition-base) var(--transition-ease);
    position: relative;
    cursor: pointer;
    border: none;
    text-align: start;
    /* Background for buttons without SVG - gradient overlay */
    background: linear-gradient(135deg, rgba(139, 115, 85, 0.4) 0%, rgba(93, 64, 55, 0.5) 100%),
                rgba(0, 0, 0, 0.3);
  }

  .color-modal__filters-swatch:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }

  /* Summary swatch: one pattern area (static + generated overlay) */
  .color-modal__filters-swatch-icon-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.85;
    /* Gradient background under SVG for better contrast */
    background: linear-gradient(135deg, rgba(139, 115, 85, 0.3) 0%, rgba(93, 64, 55, 0.4) 100%);
    z-index: 0;
    /* Base slightly smaller than hover so hover zooms in (not out). Overrides global --filter-icon-scale on dynamic layer. */
    --summary-pattern-scale: 1;
  }

  .color-modal__filters-swatch:hover .color-modal__filters-swatch-icon-wrap {
    --summary-pattern-scale: 1.12;
  }

  .color-modal__filters-swatch-icon-wrap .filter-icon__grade-bg svg,
  .color-modal__filters-swatch-icon-wrap .filter-icon__grade-bg--dynamic svg {
    width: 100%;
    height: 100%;
    padding: 0;
    -o-object-fit: contain;
       object-fit: contain;
    transition: transform var(--transition-base) var(--transition-ease);
    transform: scale(var(--summary-pattern-scale));
  }

  /* Grade button background SVG layers */
  .filter-icon__grade-bg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .filter-icon__grade-bg svg {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
  }

  /* Dynamic grade background (installation-dependent) - overlays on top of fallback */
  .filter-icon__grade-bg--dynamic {
    z-index: 1;
  }

  .filter-icon__grade-bg--dynamic svg {
    transform: scale(var(--filter-icon-scale, 1));
  }

  /* Scrim for text readability */
  .color-modal__filters-swatch::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
    pointer-events: none;
    z-index: 2;
  }

  /* Text content at bottom */
  .color-modal__filters-swatch-content {
    position: relative;
    z-index: 3;
    padding: var(--spacing-xs) var(--spacing-s);
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }

  .color-modal__filters-swatch-title {
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
    color: var(--color-text-on-surface);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  }

  .color-modal__filters-swatch-subtitle {
    font-size: var(--font-size-tiny);
    font-weight: var(--font-weight-regular);
    line-height: 1.2;
    color: color-mix(in oklch, var(--color-text-on-surface) 85%, transparent);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  }

  /* Single toggle button (Выбрать/Свернуть) - with gap from summary */
  .color-modal__filters-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-m);
    border-radius: var(--radius-md);
    background: rgba(0, 0, 0, 0.3);
    border: none;
    color: var(--color-text-on-surface);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    pointer-events: auto;
    transition: background-color var(--transition-base) var(--transition-ease),
                width var(--transition-base) var(--transition-ease);
    white-space: nowrap;
  }

  .color-modal__filters-toggle-btn:hover {
    background: rgba(0, 0, 0, 0.5);
  }

  .color-modal__filters-toggle-btn svg {
    width: 1rem;
    height: 1rem;
    transition: transform var(--transition-base) var(--transition-ease);
  }

  .color-modal__filters-toggle-btn[aria-expanded="true"] svg {
    transform: rotate(180deg);
  }

  /* Collapse container - standard transition both directions */
  .color-modal__filters-collapse {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-base) var(--transition-ease);
  }

  .color-modal__filters-collapse.is-expanded {
    max-height: 500px;
  }

  .color-modal__filters-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-s);
    padding: var(--spacing-s);
    pointer-events: auto;
  }

  .color-modal__filter-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
  }

  .color-modal__filter-divider {
    display: none;
  }

  /* Filter chips: reuse .filter-btn from catalog.css (same markup/classes as catalog bento). */

  /* Stacking context for generated SVG overlay on installation/grade icons */
  .color-modal__filters-overlay .filter-btn--icon.filter-btn--with-label .filter-btn__icon-wrap,
  .color-modal__panel .filter-btn--icon.filter-btn--with-label .filter-btn__icon-wrap {
    position: relative;
  }

  /* Sizes group - always on separate row with consistent gap */
  .color-modal__filter-group--sizes {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }

  /* Grade group - always on separate row for consistent gap */
  .color-modal__filter-group--grade {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }

  /* ----- Right column overlay (specs + CTA for desktop/tablet) ----- */
  .color-modal__bottom-overlay {
    position: absolute;
    inset-block: 0;
    inset-inline-end: var(--spacing-m);
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    pointer-events: none;
    /* Take full height minus header overlay area (title + close). */
    padding-block-start: calc(var(--spacing-m) + var(--icon-size-lg) + var(--spacing-s) * 2 + var(--spacing-m));
    padding-block-end: var(--spacing-m);
  }

  .color-modal__bottom-card {
    max-width: min(22rem, 100%);
    min-width: clamp(14rem, 32vw, 18rem);
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-m);
    overflow: visible;
    height: 100%;
    justify-content: flex-start;
  }

  /* Push specs + CTA to the bottom of the right column */
  .color-modal__bottom-stack {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-m);
  }

  /* Swatch (centered relative to specs card) */
  .color-modal__swatch-wrap {
    position: relative;
    z-index: 3;
    margin-bottom: var(--spacing-s);
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-outline-variant);
    width: min(22rem, 25vh, 100%);
    aspect-ratio: 1 / 1;
    margin-top: 0;
    margin-inline: auto;
  }

  .color-modal__swatch {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }

  @media (max-width: 1024px) {
    .color-modal__swatch-wrap {
      width: min(14rem, 15vh, 100%);
      margin-top: 0;
      margin-inline-start: auto;
    }
  }

  /* ----- Specs section ----- */
  .color-modal__section--specs {
    padding: 0;
    border: none;
    margin: 0;
  }

  .color-modal__spec-list {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
  }

  .color-modal__spec-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: var(--spacing-m);
    padding: var(--spacing-xs) var(--spacing-m);
    border-radius: var(--radius-md);
    background-color: color-mix(in oklch, var(--color-surface-container-high) 85%, transparent);
    border: 1px solid color-mix(in oklch, var(--color-outline-variant) 65%, transparent);
    backdrop-filter: blur(6px);
  }

  .color-modal__spec-dt {
    margin: 0;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
  }

  .color-modal__spec-dd {
    margin: 0;
    font-size: var(--font-size-small);
    color: var(--color-text);
    text-align: right;
  }

  /* ----- CTA ----- */
  .color-modal__cta {
    padding-top: var(--spacing-s);
  }

  .color-modal__cta-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: var(--spacing-m) var(--spacing-l);
    min-height: var(--touch-target-min);
    box-sizing: border-box;
  }

  /* ----- Phone: Panel (not bottom sheet) ----- */
  .color-modal__panel {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: 5;
    background-color: var(--color-surface);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* First section inherits rounded corners from panel */
  .color-modal__panel-section:first-child {
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }

  .color-modal__panel-section {
    border-bottom: 1px solid var(--color-outline-variant);
    flex-shrink: 0;
  }

  .color-modal__panel-section:last-of-type {
    border-bottom: none;
  }

  .color-modal__panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--spacing-s) var(--spacing-m);
    background: none;
    border: none;
    cursor: pointer;
    text-align: start;
  }

  .color-modal__panel-title {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
  }

  .color-modal__panel-chevron {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
    color: var(--color-text-muted);
    transition: transform var(--transition-base) var(--transition-ease);
  }

  .color-modal__panel-chevron.is-rotated {
    transform: rotate(180deg);
  }

  .color-modal__panel-collapse {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-base) var(--transition-ease);
  }

  .color-modal__panel-collapse.is-expanded {
    max-height: 500px;
  }

  .color-modal__panel .color-modal__filters-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-m) var(--spacing-s);
    background: none;
    backdrop-filter: none;
  }

  .color-modal__panel .color-modal__spec-list {
    padding: var(--spacing-xs) var(--spacing-m) var(--spacing-s);
  }

  .color-modal__panel-cta {
    padding: var(--spacing-m);
    background-color: var(--color-surface);
  }

  /* ----- Animations ----- */
  @keyframes color-modal-spec-dd-just-applied {
    0% { color: var(--color-primary); }
    60% { color: var(--color-primary); }
    100% { color: var(--color-text); }
  }

  .color-modal__spec-dd--just-applied {
    animation: color-modal-spec-dd-just-applied 900ms var(--transition-ease);
  }

  /* ----- Reduced motion ----- */
  @media (prefers-reduced-motion: reduce) {
    .color-modal__loading-spinner {
      animation-duration: 2s;
    }

    .color-modal__filters-collapse,
    .color-modal__filters-summary,
    .color-modal__filters-swatch,
    .color-modal__panel-collapse,
    .color-modal__panel-chevron,
    .color-modal__filters-toggle-btn svg {
      transition: none;
    }
  }
}
/* Distributors section: bento grid of cards, map, balloons, CTA block. */
@layer components {

  /* Distributors map: bento grid of cards */
  .distributor-bento--with-map {
    margin-bottom: var(--spacing-xl, 2rem);
  }

  /* Map wrapper: card-style container + scroll margin so page scroll is easier above/below the map */
  .distributor-map__wrapper {
    margin-top: var(--spacing-xl, 2rem);
    padding: var(--spacing-s);
    border-radius: var(--radius-lg, 0.75rem);
    border: 1px solid var(--color-outline-variant);
    background: var(--color-surface-container);
    box-shadow: var(--shadow-sm);
    scroll-margin-top: 2rem;
    scroll-margin-bottom: 2rem;
  }

  .distributor-map__wrapper .distributor-map__container {
    margin-top: 0;
  }

  .distributor-map__container {
    margin-top: var(--spacing-xl, 2rem);
  }

  /* Balloon content on production marker (Yandex Maps popup) */
  .distributor-map-balloon {
    position: relative;
    box-sizing: border-box;
    padding: var(--spacing-s);
    /* Reserve top-right for close button so long address text never goes under it */
    padding-top: 2.25rem;
    padding-right: 2.5rem;
    min-width: 12rem;
    /* Fit within viewport on small screens: leave margin from edges */
    max-width: min(20rem, calc(100vw - 2rem));
    max-height: min(50vh, 16rem);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background-color: var(--color-surface);
    border-radius: var(--radius-md, 0.5rem);
    border: 1px solid var(--color-outline-variant, rgba(0 0 0 / 0.08));
    box-shadow: var(--shadow-lg);
  }

  .distributor-map-balloon__close {
    position: absolute;
    top: var(--spacing-xs, 0.25rem);
    right: var(--spacing-xs, 0.25rem);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm, 0.25rem);
    background: transparent;
    color: var(--color-text-secondary, currentColor);
    cursor: pointer;
  }

  /* Small screens: balloon no wider than bordered map card (container padding + wrapper padding) */
  @media (max-width: 480px) {
    .distributor-map-balloon {
      max-width: calc(100vw - 2 * var(--container-padding-mobile, 1rem) - 2 * var(--spacing-s, 0.5rem));
      max-height: 45vh;
      padding-top: 2.5rem;
      padding-right: 2.75rem;
    }

    .distributor-map-balloon__close {
      top: 0;
      right: 0;
      width: var(--touch-target-min);
      height: var(--touch-target-min);
      min-width: var(--touch-target-min);
      min-height: var(--touch-target-min);
    }
  }

  .distributor-map-balloon__close:hover {
    color: var(--color-text);
    background: var(--color-outline-variant, rgba(0 0 0 / 0.08));
  }

  .distributor-map-balloon__close:focus-visible {
    outline: 2px solid var(--color-link);
    outline-offset: 2px;
  }

  .distributor-map-balloon__address {
    margin: 0 0 var(--spacing-s) 0;
    font-size: var(--font-size-small);
    color: var(--color-text);
    line-height: var(--line-height-body);
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .distributor-map-balloon__route {
    display: inline-block;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    color: var(--color-link);
  }

  .distributor-map-balloon__route:hover {
    color: var(--color-link-hover);
  }

  /* Balloon and map container in dark theme: use standard dark theme variables */
  .dark .distributor-map-balloon {
    background-color: var(--color-surface);
    color: var(--color-text);
    border-radius: var(--radius-md, 0.5rem);
    border: 1px solid var(--color-outline-variant);
  }

  .dark .distributor-map-balloon__address {
    color: var(--color-text);
  }

  .dark .distributor-map-balloon__route {
    color: var(--color-link);
  }

  .dark .distributor-map-balloon__route:hover {
    color: var(--color-link-hover);
  }

  .dark .distributor-map-balloon__close:hover {
    background: var(--color-outline-variant);
    color: var(--color-text);
  }

  .dark .distributor-map__container {
    border-color: var(--color-outline-variant);
    background-color: var(--color-surface-container);
  }

  /* Scroll hint: callout style (icon + left border + background) so the helping message is noticeable but secondary */
  .distributor-map__scroll-hint {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--spacing-s);
    margin-top: var(--spacing-m);
    padding: var(--spacing-s) var(--spacing-m);
    border-radius: var(--radius-md, 0.5rem);
    border-left: 3px solid var(--color-primary);
    background: var(--color-surface-container);
    color: var(--color-text-secondary);
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
  }

  .distributor-map__scroll-hint-icon {
    display: inline-flex;
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-primary);
  }

  .distributor-map__scroll-hint-icon svg {
    width: 100%;
    height: 100%;
  }

  .distributor-map__scroll-hint-text {
    margin: 0;
    font-size: var(--font-size-small);
    line-height: var(--line-height-body);
  }

  .distributor-bento__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-m);
  }

  @media (min-width: 640px) {
    .distributor-bento__grid {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--spacing-m);
    }
  }

  /* Tablet + laptop: keep all cards equal width (half screen each). */
  @media (min-width: 900px) {
    .distributor-bento__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--spacing-l);
    }

    .distributor-bento__grid > template {
      display: contents;
    }
  }

  .distributor-bento__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    padding: var(--spacing-l);
    border-radius: var(--radius-lg, 0.75rem);
    border: 1px solid var(--color-outline-variant);
    background: var(--color-surface-container);
    color: var(--color-text);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    transition: background-color var(--transition-base) var(--transition-ease),
      border-color var(--transition-base) var(--transition-ease),
      box-shadow var(--transition-base) var(--transition-ease);
  }

  .distributor-bento__card:hover {
    background: var(--color-surface-container-high);
    border-color: var(--color-outline);
    box-shadow: var(--shadow-md);
  }

  .distributor-bento__card:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }

  /* No special spanning — all cards share the same grid column size. */

  .distributor-bento__card-header {
    width: 100%;
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
    min-width: 0;
  }

  .distributor-bento__card-header .distributor-bento__card-label,
  .distributor-bento__card-header .distributor-bento__card-title {
    margin-bottom: 0;
  }

  .distributor-bento__card-label,
  .distributor-bento__card-title {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-body);
    margin-bottom: var(--spacing-xs);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  @media (min-width: 900px) {
    .distributor-bento__card--production .distributor-bento__card-label {
      font-size: var(--font-size-h4);
    }
  }

  .distributor-bento__card-meta {
    font-size: var(--font-size-body);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-s);
  }

  .distributor-bento__card-meta--inline {
    margin-bottom: 0;
    flex: 0 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  .distributor-bento__phones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-xs) 0;
    margin-top: var(--spacing-xs);
  }

  .distributor-bento__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.125em;
    height: 1.125em;
    margin-right: var(--spacing-xs);
    color: var(--color-text-secondary);
  }

  .distributor-bento__icon svg {
    width: 100%;
    height: 100%;
  }

  .distributor-bento__phone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    min-height: var(--touch-target-min);
    padding: 0 var(--spacing-s);
    border-radius: var(--radius-pill, 9999px);
  }

  .distributor-bento__phones > .distributor-bento__phone:first-of-type {
    margin-left: var(--spacing-xs);
  }

  .distributor-bento__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-s);
    margin-top: var(--spacing-m);
  }

  .distributor-bento__actions .btn-primary,
  .distributor-bento__actions .btn-secondary {
    padding: var(--spacing-xs) var(--spacing-m);
    font-size: var(--font-size-small);
  }

  .distributor-bento__contact-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs) var(--spacing-m);
    align-items: center;
    margin-top: var(--spacing-xs);
  }

  .distributor-bento__contact-row .distributor-bento__phones {
    margin-top: 0;
  }

  .distributor-bento__website {
    word-break: break-word;
  }

  /* Bento card details (always visible) */
  .distributor-bento__card-details {
    margin-top: var(--spacing-s);
    margin-bottom: 0;
    text-align: left;
    font-size: var(--font-size-small);
    color: var(--color-text-secondary);
  }

  .distributor-bento__card-detail {
    margin: 0 0 var(--spacing-xs) 0;
  }

  .distributor-bento__card-detail:last-of-type {
    margin-bottom: var(--spacing-s);
  }

  .distributor-bento__detail-label {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
  }

  .distributor-bento__email-row .distributor-bento__icon {
    margin-right: var(--spacing-xs);
  }

  .distributor-bento__email-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
  }

  .distributor-bento__card-details a:not(.btn-primary):not(.btn-secondary) {
    color: var(--color-link);
  }

  .distributor-bento__card-details a:not(.btn-primary):not(.btn-secondary):hover {
    color: var(--color-link-hover);
  }

  .distributor-bento__link-yandex {
    display: inline-flex;
    align-items: center;
    margin-top: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-s);
    border-radius: 9999px;
    background: var(--color-surface-container-high);
    font-size: var(--font-size-tiny, 0.75rem);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
  }

  .distributor-bento__link-yandex:hover {
    background: var(--color-outline-variant);
    color: var(--color-link-hover);
  }

  /* ── Distributor CTA block (personalized message based on user selection) ── */
  .distributor-cta {
    width: 100%;
  }

  .distributor-cta__summary {
    margin-bottom: var(--spacing-m);
    padding: var(--spacing-m);
    border-radius: var(--radius-md, 0.5rem);
    background: var(--color-surface);
    border: 1px solid var(--color-outline-variant);
    width: 100%;
    max-width: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-s);
  }

  .distributor-cta__selection {
    font-size: var(--font-size-h4, 1.5rem);
    font-weight: var(--font-weight-semibold);
    margin: 0;
    word-break: break-word;
    line-height: 1.35;
  }

  .distributor-cta__selection-list {
    width: 100%;
    display: grid;
    gap: var(--spacing-xs);
  }

  .distributor-cta__selection-label {
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
    margin-right: var(--spacing-2xs, 0.25rem);
  }

  .distributor-cta__selection-value {
    color: var(--color-secondary);
  }

  .dark .distributor-cta__summary {
    background: var(--color-surface);
    border-color: var(--color-outline-variant);
  }

}
@unocss preflights;
@unocss utilities;
@layer utilities {
  .text-balance {
    text-wrap: balance;
  }

  /* Transition: single source of truth (duration helpers + property-specific). */
  .transition-base {
    transition-duration: var(--transition-base);
    transition-timing-function: var(--transition-ease);
  }

  .transition-fast {
    transition-duration: var(--transition-fast);
    transition-timing-function: var(--transition-ease);
  }

  .transition-slow {
    transition-duration: var(--transition-slow);
    transition-timing-function: var(--transition-ease);
  }

  .transition-slower {
    transition-duration: var(--transition-slower);
    transition-timing-function: var(--transition-ease);
  }

  .transition-colors-base {
    transition: color var(--transition-base) var(--transition-ease),
      background-color var(--transition-base) var(--transition-ease),
      border-color var(--transition-base) var(--transition-ease);
  }

  .transition-opacity-base {
    transition: opacity var(--transition-base) var(--transition-ease);
  }

  .transition-transform-base {
    transition: transform var(--transition-base) var(--transition-ease);
  }

  .transition-all-base {
    transition: all var(--transition-base) var(--transition-ease);
  }

  .aspect-square {
    aspect-ratio: 1 / 1;
  }

  .aspect-video {
    aspect-ratio: 16 / 9;
  }

  /* Line-clamp: shared base + --line-clamp modifier (DRY). */
  .line-clamp-2,
  .line-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .line-clamp-2 {
    -webkit-line-clamp: 2;
  }

  .line-clamp-3 {
    -webkit-line-clamp: 3;
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
}
@media print {
  .no-print {
    display: none !important;
  }

  /* Catalog section & filters */
  #catalog {
    @apply bg-white;
  }

  #catalog .container-page {
    @apply flex flex-col gap-8;
  }

  #catalog .section-header {
    @apply text-center;
  }

  #catalog .section-header h2 {
    @apply text-3xl font-bold text-charcoal md:text-4xl;
  }

  #catalog .section-header p {
    @apply mt-3 text-sm text-text-secondary md:text-base;
  }

  /* Filter chips row */
  #catalog .flex.flex-wrap.items-center.gap-3.justify-center.mb-4 {
    @apply mb-6;
  }

  /* Empty state card */
  #catalog .text-center.py-16 {
    @apply mx-auto max-w-xl px-4 py-12;
  }

  #catalog .text-center.py-16 img {
    display: block;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    margin: 0 auto var(--spacing-m);
    -o-object-fit: contain;
       object-fit: contain;
    opacity: 0.9;
  }

  #catalog .text-center.py-16 h3 {
    @apply mb-2 text-xl font-semibold text-charcoal;
  }

  #catalog .text-center.py-16 p {
    @apply mb-4 text-sm text-text-secondary;
  }

  /* Empty state reset button: always secondary (overrides cached HTML with btn-primary) */
  #catalog .text-center.py-16 .btn-primary,
  #catalog .text-center.py-16 .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-s);
  }

  #catalog .text-center.py-16 .btn-primary {
    border: 2px solid var(--color-secondary);
    background-color: transparent;
    color: var(--color-secondary);
  }

  #catalog .text-center.py-16 .btn-primary:hover {
    background-color: var(--color-secondary);
    color: var(--color-on-primary);
  }

  #catalog .text-center.py-16 .btn-primary img,
  #catalog .text-center.py-16 .btn-secondary img {
    @apply h-5 w-5 object-contain;
  }
}