@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  /* спільні параметри */
  --max:1220px;
  --radius:28px;
  --radius-md:18px;
  --radius-sm:12px;
  /* м’які розсіяні тіні: кілька шарів + великий blur, без «різкої» смуги знизу */
  --shadow:
    0 0 0 1px rgba(31,42,48,.05),
    0 1px 2px rgba(15,23,42,.03),
    0 6px 24px rgba(15,23,42,.065),
    0 20px 52px rgba(15,23,42,.085);
  --shadow-soft:
    0 0 0 1px rgba(31,42,48,.04),
    0 1px 2px rgba(15,23,42,.025),
    0 4px 18px rgba(15,23,42,.05),
    0 14px 40px rgba(15,23,42,.07);
  --shadow-lift:
    0 0 0 1px rgba(31,42,48,.06),
    0 2px 4px rgba(15,23,42,.04),
    0 10px 32px rgba(15,23,42,.09),
    0 28px 64px rgba(15,23,42,.1);
  --shadow-lift-accent:
    0 0 0 1px rgba(217,36,54,.12),
    0 2px 6px rgba(15,23,42,.04),
    0 12px 40px rgba(15,23,42,.09),
    0 30px 68px rgba(15,23,42,.1);
  --card-edge:rgba(31,42,48,.12);
  --card-edge-soft:rgba(31,42,48,.08);

  /* базові значення теми (дублюють денну) */
  --bg:#f3f4f6;
  --bg-soft:#e5e7eb;
  --surface:#ffffff;
  --surface-2:#f9fafb;
  --surface-3:#e5e7eb;
  --brand-gray:#616c72;
  --text:#111827;
  --muted:#4b5563;
  --muted-2:#6b7280;
  --line:rgba(97,108,114,.24);
  --line-strong:rgba(97,108,114,.45);
  --accent:#d92436;
  --accent-2:#d92436;
  --accent-glow:rgba(217,36,54,.3);
  --success:#26c281;
  --site-header-height:92px;
}

/* денна тема (як зараз) */
body[data-theme="light"],
body:not([data-theme]){
  /* світла тема: тільки бренд-палітра */
  --bg:#f5f7f8;            /* Фон */
  --bg-soft:#e4eaee;
  --surface:#ffffff;
  --surface-2:#f5f7f8;
  --surface-3:#e4eaee;
  --brand-gray:#4e5b61;    /* Основний сірий */
  --text:#1f2a30;          /* Темний текст */
  --muted:#4e5b61;
  --muted-2:#8a959b;       /* Метал */
  --line:rgba(142,153,159,.28);
  --line-strong:rgba(79,90,96,.5);
  --accent:#d92436;        /* Акцент */
  --accent-2:#d92436;
  --accent-glow:rgba(217,36,54,.32);
}

/* нічна тема (попередній темний варіант) */
body[data-theme="dark"]{
  --bg:#05060a;
  --bg-soft:#0b1018;
  --surface:#090b12;
  --surface-2:#111827;
  --surface-3:#1f2933;
  --brand-gray:#cbd5e1;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --muted-2:#6b7280;
  --line:rgba(148,163,184,.35);
  --line-strong:rgba(148,163,184,.6);
  --accent:#d92436;
  --accent-2:#d92436;
  --accent-glow:rgba(217,36,54,.5);
}

/* уточнення для світлої теми: тіні й контраст посилань */
body[data-theme="light"] .card,
body[data-theme="light"] .product-card,
body[data-theme="light"] .mini-card,
body[data-theme="light"] .filters,
body[data-theme="light"] .detail-card,
body[data-theme="light"] .cta,
body[data-theme="light"] .page-hero__box,
body:not([data-theme]) .card,
body:not([data-theme]) .product-card,
body:not([data-theme]) .mini-card,
body:not([data-theme]) .filters,
body:not([data-theme]) .detail-card,
body:not([data-theme]) .cta,
body:not([data-theme]) .page-hero__box{
  background:#ffffff;
  border:1px solid var(--card-edge-soft);
  box-shadow:var(--shadow);
}

/* Хедер світлої теми: легка прозорість + легкий blur */
body[data-theme="light"] .header,
body[data-theme="light"] .header.is-scrolled,
body:not([data-theme]) .header,
body:not([data-theme]) .header.is-scrolled{
  background:rgba(247,247,247,.78);
  border-bottom:1px solid rgba(142,153,159,.2);
  box-shadow:0 12px 28px rgba(31,42,48,.07);
  backdrop-filter:blur(12px) saturate(1.05);
  -webkit-backdrop-filter:blur(12px) saturate(1.05);
}
body[data-theme="light"] .footer,
body:not([data-theme]) .footer,
body[data-theme="dark"] .footer{
  background:#546670;
  box-shadow:0 18px 36px rgba(15,23,42,.12);
  color:#fff;
}

/* світла тема: основний текстовий колір #1f2a30 в ключових блоках */
body[data-theme="light"] .navbar,
body[data-theme="light"] .nav__links a,
body:not([data-theme]) .navbar,
body:not([data-theme]) .nav__links a{
  color:#1f2a30;
}

body[data-theme="light"] .product-card h3,
body[data-theme="light"] .product-card h3 a,
body[data-theme="light"] .product-card p,
body[data-theme="light"] .catalog-card h3,
body[data-theme="light"] .catalog-card p{
  color:#1f2a30;
}

body[data-theme="light"] .footer__title,
body[data-theme="light"] .footer-list a,
body[data-theme="light"] .footer-contacts__text,
body:not([data-theme]) .footer__title,
body:not([data-theme]) .footer-list a,
body:not([data-theme]) .footer-contacts__text{
  color:#fff;
}
body[data-theme="light"] .footer__text,
body:not([data-theme]) .footer__text{
  color:rgba(255,255,255,.92);
}
body[data-theme="light"] .footer-contacts__label,
body:not([data-theme]) .footer-contacts__label{
  color:#fff;
}
body[data-theme="light"] .footer-contacts a,
body[data-theme="light"] .footer-meta a,
body:not([data-theme]) .footer-contacts a,
body:not([data-theme]) .footer-meta a{
  color:#fff;
}
body[data-theme="light"] .footer-contacts__map-link:hover,
body:not([data-theme]) .footer-contacts__map-link:hover{
  color:#111;
  border-bottom-color:rgba(0,0,0,.35);
}
body[data-theme="light"] .footer__social-title,
body:not([data-theme]) .footer__social-title{
  color:#fff;
}
body[data-theme="light"] .footer-social__link,
body:not([data-theme]) .footer-social__link{
  color:#fff;
}
body[data-theme="light"] .footer-social li:nth-child(1) .footer-social__link{
  background:linear-gradient(135deg,#f09433 0%,#dc2743 50%,#bc1888 100%);
}
body[data-theme="light"] .footer-social li:nth-child(2) .footer-social__link{
  background:#229ED9;
}
body[data-theme="light"] .footer-social li:nth-child(3) .footer-social__link{
  background:#25D366;
}
body[data-theme="light"] .footer__bottom,
body:not([data-theme]) .footer__bottom{
  color:rgba(255,255,255,.88);
}

/* світла тема: заголовки всюди темні + червоні акценти в span, не біло-червоні */
body[data-theme="light"] .hero__title,
body[data-theme="light"] .section__title,
body[data-theme="light"] h1,
body[data-theme="light"] h2,
body[data-theme="light"] h3,
body[data-theme="light"] h4,
body:not([data-theme]) .hero__title,
body:not([data-theme]) .section__title,
body:not([data-theme]) h1,
body:not([data-theme]) h2,
body:not([data-theme]) h3,
body:not([data-theme]) h4{
  color:#1f2a30;
}

/* світла тема: перестраховка для всіх “карток” і боксів, щоб не лишилось білого тексту на світлому */
body[data-theme="light"] .card,
body[data-theme="light"] .product-card,
body[data-theme="light"] .detail-card,
body[data-theme="light"] .article-card,
body[data-theme="light"] .certificate-card,
body[data-theme="light"] .cta,
body[data-theme="light"] .empty-state,
body[data-theme="light"] .filters{
  color:#1f2a30;
}

body[data-theme="light"] .card h3,
body[data-theme="light"] .product-card h3,
body[data-theme="light"] .detail-card h1,
body[data-theme="light"] .detail-card h2,
body[data-theme="light"] .article-card h3,
body[data-theme="light"] .certificate-card h3{
  color:#1f2a30;
}

body[data-theme="light"] a:hover{
  color:#111;
}
body:not([data-theme]) a:hover{
  color:#111;
}
body[data-theme="light"] .nav__links a:hover{
  color:#111;
}
body[data-theme="light"] a.card.catalog-card:hover,
body[data-theme="light"] a.card.catalog-card:hover h3,
body[data-theme="light"] a.card.catalog-card:hover p,
body[data-theme="light"] a.card.catalog-card:hover .catalog-card__cta{
  color:#1f2a30;
}
body[data-theme="light"] .catalog-card__icon{
  background:linear-gradient(180deg, #ffffff 0%, #eef1f5 100%);
  border:1px solid rgba(31,42,48,.1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 2px 4px rgba(31,42,48,.04),
    0 8px 28px rgba(31,42,48,.06);
}
body[data-theme="light"] .catalog-card:hover .catalog-card__icon{
  border-color:rgba(31,42,48,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 2px 6px rgba(31,42,48,.05),
    0 12px 36px rgba(31,42,48,.08);
}
body[data-theme="light"] .catalog-card__placeholder{
  border-color:rgba(31,42,48,.1);
  background:linear-gradient(180deg, #ffffff, #f1f5f9);
  color:#64748b;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (max-width: 1095px){
  :root{
    --site-header-height:80px;
  }
}
@media (max-width: 760px){
  :root{
    --site-header-height:72px;
  }
}

body{
  margin:0;
  font-family:'Manrope', Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  position:relative;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.06;
  background-image:
    radial-gradient(circle at 20% 0%, rgba(217,36,54,.18) 0, transparent 42%),
    radial-gradient(circle at 80% 100%, rgba(97,108,114,.18) 0, transparent 38%);
  background-size: 420px 420px, 360px 360px;
}
main, .header, .footer{position:relative; z-index:1}
main{
  margin:0;
  padding:0;
}
img{display:block;max-width:100%}
a{color:var(--text);text-decoration:none;transition:all .3s ease}
a:hover{color:#111}
/* темна тема: посилання на темному тлі — світліший hover (чорний був би невидимий) */
body[data-theme="dark"] a:hover{
  color:#e5e7eb;
}
.container{width:min(var(--max), calc(100% - 32px)); margin:0 auto}
.hide-mobile{display:inline-flex}

/* перемикач теми */
.theme-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--surface-2);
  color:var(--muted);
  padding:0;
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .15s ease;
}
.theme-toggle:hover{
  background:var(--surface-3);
  border-color:var(--accent-glow);
  color:var(--accent);
  transform:translateY(-1px);
}
.theme-toggle:active{
  transform:translateY(0);
}
.theme-toggle__icon{
  width:16px;
  height:16px;
  position:relative;
}
.theme-toggle__icon::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:currentColor;
  mask-position:center;
  mask-repeat:no-repeat;
  mask-size:contain;
  -webkit-mask-position:center;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-size:contain;
}
.theme-toggle__icon--sun::before{
  mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 4a1 1 0 0 1 1 1v1.06a1 1 0 1 1-2 0V5A1 1 0 0 1 12 4Zm5.657 2.343a1 1 0 0 1 0 1.414L17.25 8.164a1 1 0 0 1-1.414-1.414l.407-.407a1 1 0 0 1 1.414 0ZM12 8a4 4 0 1 1 0 8 4 4 0 0 1 0-8Zm-7 3a1 1 0 0 1 1-1h1.06a1 1 0 1 1 0 2H6A1 1 0 0 1 5 11Zm12 0a1 1 0 0 1 1-1h1.06a1 1 0 1 1 0 2H18a1 1 0 0 1-1-1ZM6.75 6.75a1 1 0 0 1 1.414 0l.407.407A1 1 0 0 1 7.157 8.57L6.75 8.164A1 1 0 0 1 6.75 6.75ZM12 17a1 1 0 0 1 1 1v1.06a1 1 0 1 1-2 0V18a1 1 0 0 1 1-1Zm-5.25.25a1 1 0 0 1 1.414 0l.407.407a1 1 0 1 1-1.414 1.414l-.407-.407a1 1 0 0 1 0-1.414Zm10.5 0a1 1 0 0 1 0 1.414l-.407.407a1 1 0 0 1-1.414-1.414l.407-.407a1 1 0 0 1 1.414 0Z'/%3E%3C/svg%3E");
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 4a1 1 0 0 1 1 1v1.06a1 1 0 0 1-2 0V5A1 1 0 0 1 12 4Zm5.657 2.343a1 1 0 0 1 0 1.414L17.25 8.164a1 1 0 0 1-1.414-1.414l.407-.407a1 1 0 0 1 1.414 0ZM12 8a4 4 0 1 1 0 8 4 4 0 0 1 0-8Zm-7 3a1 1 0 0 1 1-1h1.06a1 1 0 1 1 0 2H6A1 1 0 0 1 5 11Zm12 0a1 1 0 0 1 1-1h1.06a1 1 0 1 1 0 2H18a1 1 0 0 1-1-1ZM6.75 6.75a1 1 0 0 1 1.414 0l.407.407A1 1 0 0 1 7.157 8.57L6.75 8.164A1 1 0 0 1 6.75 6.75ZM12 17a1 1 0 0 1 1 1v1.06a1 1 0 1 1-2 0V18a1 1 0 0 1 1-1Zm-5.25.25a1 1 0 0 1 1.414 0l.407.407a1 1 0 1 1-1.414 1.414l-.407-.407a1 1 0 0 1 0-1.414Zm10.5 0a1 1 0 0 1 0 1.414l-.407.407a1 1 0 0 1-1.414-1.414l.407-.407a1 1 0 0 1 1.414 0Z'/%3E%3C/svg%3E");
}
.theme-toggle__icon--moon::before{
  mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M20.354 14.354a1 1 0 0 0-1.285-1.285A6.5 6.5 0 0 1 10.93 4.93a1 1 0 0 0-1.285-1.285A8.5 8.5 0 1 0 20.354 14.354Z'/%3E%3C/svg%3E");
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M20.354 14.354a1 1 0 0 0-1.285-1.285A6.5 6.5 0 0 1 10.93 4.93a1 1 0 0 0-1.285-1.285A8.5 8.5 0 1 0 20.354 14.354Z'/%3E%3C/svg%3E");
}
.theme-toggle__icon--moon{
  display:none;
}

body[data-theme="dark"] .theme-toggle{
  background:var(--surface-2);
  color:var(--accent);
}
body[data-theme="dark"] .theme-toggle__icon--sun{
  display:none;
}
body[data-theme="dark"] .theme-toggle__icon--moon{
  display:block;
}

.header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(8,11,14,.4);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:background .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.header.is-scrolled{
  background:rgba(8,11,14,.72);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  border-bottom-color:rgba(255,255,255,.1);
}
.topbar,.navbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.topbar{
  min-height:42px;
  padding:9px 0;
  font-size:13px;
  color:var(--muted-2);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.topbar__items,.nav__links,.hero__actions,.product-card__actions,.quick-links,.badges,.hero-badges,.list{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.topbar a{color:var(--muted)}
.topbar a:hover{color:#111}
.navbar{
  padding:18px 0;
  position:relative;
}
.logo{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  line-height:0;
}
.logo img{
  height:54px;
  width:auto;
  max-width:none;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.35));
}
.nav__links a{
  color:var(--muted);
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:14px;
  position:relative;
  overflow:visible;
  display:inline-flex;
  align-items:center;
  line-height:1.2;
}
/* Пункт "Зворотній зв’язок" теж тільки в мобільному бургері (дублює CTA) */
.nav__links a.nav-link--feedback{
  display:none;
}
@media (max-width: 1095px){
  .nav__links a.nav-link--feedback{
    display:block;
  }
}
/* Підкреслення в хедері: суцільна червона лінія; напрямок анімації — JS (nav-underline-o-*) */
@media (min-width: 1096px){
  .nav__links a::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-6px;
    height:2px;
    border-radius:2px;
    background:var(--accent);
    transform:scaleX(0);
    transform-origin:left center;
    opacity:0;
    transition:transform .68s cubic-bezier(.22,1,.36,1), opacity .5s ease;
  }
  .nav__links a.nav-underline-o-left::after{
    transform-origin:left center;
  }
  .nav__links a.nav-underline-o-right::after{
    transform-origin:right center;
  }
  .nav__links a.nav-underline-active::after{
    transform:scaleX(1);
    opacity:1;
  }
  body[data-theme="dark"] .nav__links a:hover{
    color:#e5e7eb;
  }
  body[data-theme="light"] .nav__links a:hover,
  body:not([data-theme]) .nav__links a:hover{
    color:#111;
  }
  body[data-theme="dark"] .nav__links a:focus-visible{
    color:#e5e7eb;
    outline:none;
  }
  body[data-theme="light"] .nav__links a:focus-visible,
  body:not([data-theme]) .nav__links a:focus-visible{
    color:#1f2a30;
    outline:none;
  }
  .nav__links a:focus-visible::after{
    transform:scaleX(1);
    opacity:1;
    transform-origin:left center;
  }
}

.button{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:13px 24px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, var(--accent) 0%, var(--accent) 100%);
  color:#fff;
  font:inherit;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:
    0 14px 30px rgba(31,42,48,.28),
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 0 26px rgba(31,42,48,.16);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease, color .3s ease;
}
.button::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, transparent 20%, rgba(255,255,255,.18) 50%, transparent 80%);
  transform:translateX(-130%);
  transition:transform .6s ease;
  z-index:-1;
}
.button:hover{
  color:#fff;
  transform:translateY(-2px);
  box-shadow:
    0 20px 36px rgba(31,42,48,.34),
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 0 40px rgba(31,42,48,.18);
}
.button:hover::before{transform:translateX(130%)}
.button--ghost{
  background:rgba(255,255,255,.02);
  color:var(--text);
  box-shadow:
    0 0 0 1px rgba(31,42,48,.06),
    0 1px 2px rgba(15,23,42,.04),
    0 6px 20px rgba(15,23,42,.07),
    0 16px 44px rgba(15,23,42,.09);
}
.button--ghost:hover{
  background:rgba(255,255,255,.06);
  color:var(--text);
}
body[data-theme="dark"] .button--ghost{
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 2px 4px rgba(0,0,0,.22),
    0 10px 28px rgba(0,0,0,.3),
    0 22px 48px rgba(0,0,0,.38);
}

.button--light{
  color:#fff;
  border-color:rgba(255,255,255,.24);
  background:rgba(255,255,255,.08);
  box-shadow:0 14px 32px rgba(0,0,0,.28);
}
.button--light:hover{
  border-color:rgba(255,255,255,.34);
  background:rgba(255,255,255,.14);
}
.button--sm{min-height:44px; padding:10px 16px; font-size:12px}

/* Hero CTA: переливчастий градієнт */
@keyframes heroCtaIride{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
.button--hero-cta{
  gap:8px;
  min-height:46px;
  padding:11px 22px;
  font-family:inherit;
  font-size:14px;
  font-weight:800;
  letter-spacing:.1em;
  line-height:1.2;
  text-transform:uppercase;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:linear-gradient(
    95deg,
    #8f1220 0%,
    #b81828 14%,
    var(--accent) 28%,
    #ff7d8a 42%,
    #ffb3bc 50%,
    #ff7d8a 58%,
    var(--accent) 72%,
    #b81828 86%,
    #8f1220 100%
  );
  background-size:240% 100%;
  animation:heroCtaIride 6s ease-in-out infinite;
  color:#fff;
  box-shadow:
    0 4px 16px rgba(0,0,0,.22),
    0 0 0 1px rgba(255,255,255,.1) inset,
    0 1px 0 rgba(255,255,255,.18) inset;
}
.hero-cta__icon{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  transform-origin:center;
  transition:transform .42s cubic-bezier(.22,1,.36,1), filter .42s ease, opacity .42s ease;
}
.hero-cta__icon svg{display:block}
.button--hero-secondary .hero-cta__icon{
  color:currentColor;
  opacity:.95;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.22));
}
.button--hero-cta:hover{
  transform:translateY(-2px);
  color:#fff;
  box-shadow:
    0 10px 32px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,255,255,.14) inset,
    0 0 28px rgba(217,36,54,.4);
}
.button--hero-cta:hover .hero-cta__icon--door{
  transform:translateX(3px) rotate(-10deg) scale(1.08);
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.35));
}
/* перекриває a:hover (#111) у світлій темі */
body[data-theme="light"] a.button--hero-cta:hover,
body:not([data-theme]) a.button--hero-cta:hover,
body[data-theme="dark"] a.button--hero-cta:hover{
  color:#fff;
}
a.button--hero-cta:focus-visible{
  color:#fff;
}
.button--hero-secondary{
  min-height:46px;
  padding:11px 20px;
  font-family:inherit;
  font-size:14px;
  font-weight:800;
  letter-spacing:.1em;
  line-height:1.2;
  text-transform:uppercase;
  gap:8px;
  border-radius:999px;
  border:1.5px solid rgba(255,255,255,.52);
  background:rgba(8,11,14,.18);
  color:#fff;
  box-shadow:0 2px 12px rgba(0,0,0,.12);
  animation:none;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.button--hero-secondary::before{
  display:none;
}
.button--hero-secondary:hover{
  color:#1f2a30;
  border-color:rgba(255,255,255,.85);
  background:rgba(255,255,255,.94);
  box-shadow:0 8px 28px rgba(0,0,0,.18);
  transform:translateY(-2px);
}
.button--hero-secondary:hover .hero-cta__icon--chat{
  transform:translateX(2px) rotate(-8deg) scale(1.08);
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.22));
}

.hero-cta-pair{
  display:flex;
  flex-wrap:nowrap;
  align-items:stretch;
  justify-content:center;
  gap:10px;
  max-width:100%;
  width:100%;
}
.hero-cta-pair .button{
  flex:1 1 0;
  min-width:0;
  justify-content:center;
  text-align:center;
}

/* Десктоп: кнопки "товстіші" та ширші */
@media (min-width: 960px){
  .hero-cta-pair{
    gap:14px;
    max-width:980px;
    margin-inline:auto;
  }
  .hero-cta-pair .button{
    flex:0 0 auto;
    width:clamp(280px, 22vw, 420px);
  }
  .button--hero-cta,
  .button--hero-secondary{
    min-height:56px;
    padding:15px 28px;
    font-size:15px;
    letter-spacing:.1em;
  }
  .hero-cta__icon svg{
    width:20px;
    height:20px;
  }
}
@media (max-width: 420px){
  .hero-cta-pair{
    gap:10px;
  }
  .hero-cta-pair .button--hero-cta{
    padding:12px 16px;
    font-size:12px;
    letter-spacing:.09em;
    gap:7px;
  }
  .hero-cta-pair .hero-cta__icon svg{
    width:16px;
    height:16px;
  }
  .hero-cta-pair .button--hero-secondary{
    padding:12px 16px;
    font-size:12px;
    letter-spacing:.06em;
  }
}
@media (prefers-reduced-motion: reduce){
  .button--hero-cta{
    animation:none;
    background:linear-gradient(180deg, #ef3d4d 0%, var(--accent) 42%, #b81828 100%);
    background-size:100% 100%;
  }
  .button--hero-cta,
  .button--hero-secondary{
    transform:none;
  }
  .button--hero-cta:hover,
  .button--hero-secondary:hover{
    transform:none;
  }
  .hero-cta__icon,
  .button--hero-cta:hover .hero-cta__icon--door,
  .button--hero-secondary:hover .hero-cta__icon--chat{
    transform:none !important;
    filter:none !important;
  }
}

.hero{
  position:relative;
  min-height:100svh;
  overflow:hidden;
  display:flex;
  align-items:center;
}
.hero-bg{
  position:absolute;
  inset:0;
  background:url("/static/images/hero-bg.b9d6a0fde77a.jpg") center center / cover no-repeat;
  transform:scale(1);
  animation:heroZoom 20s ease-out forwards;
}
.hero-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at center, transparent 15%, rgba(0,0,0,.14) 70%);
}
.hero-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(7,10,12,.34) 0%, rgba(7,10,12,.54) 100%),
    linear-gradient(90deg, rgba(8,11,14,.58) 0%, rgba(8,11,14,.28) 45%, rgba(8,11,14,.42) 100%);
}
/* Головна: фото під текстом — як на мобільному (темніший оверлей на ПК теж) */
.hero.hero--premium .hero-overlay{
  background:
    linear-gradient(180deg, rgba(7,10,12,.40) 0%, rgba(7,10,12,.56) 100%),
    linear-gradient(90deg, rgba(8,11,14,.56) 0%, rgba(8,11,14,.28) 50%, rgba(8,11,14,.44) 100%);
}
.hero__shell{
  position:relative;
  z-index:2;
  width:100%;
  display:grid;
  gap:28px;
  justify-items:center;
  align-content:center;
  padding:96px 0 88px;
}
/* Головна: hero починається від верху вікна під шапкою — без зайвої білої смуги */
main > .hero.hero--premium:first-child{
  margin-top:calc(-1 * var(--site-header-height));
  min-height:calc(100svh + var(--site-header-height));
}
.hero.hero--premium .hero__shell{
  /* Ритм відступів hero (рівномірно і трохи більше) */
  --hero-pad: clamp(64px, 7vh, 104px);
  --hero-shell-gap: clamp(30px, 3.6vh, 52px);
  --hero-content-gap: clamp(14px, 2vh, 22px);
  padding-top:calc(var(--site-header-height) + var(--hero-pad));
  padding-bottom:var(--hero-pad);
  gap:var(--hero-shell-gap);
}

/* Низькі екрани: hero має влізти в 1 екран без обрізання */
@media (max-height: 760px){
  .hero.hero--premium .hero__shell{
    --hero-pad: 58px;
    --hero-shell-gap: 26px;
    --hero-content-gap: 16px;
    padding-top:calc(var(--site-header-height) + var(--hero-pad));
    padding-bottom:var(--hero-pad);
    gap:var(--hero-shell-gap);
  }
  .hero-stats{gap:12px}
  .stat{padding:18px 16px}
  .stat b{font-size:24px}
  .hero-badges{gap:10px}
  .badge{padding:9px 12px; font-size:12px}
}
@media (max-height: 680px){
  .hero.hero--premium .hero__shell{
    --hero-pad: 50px;
    --hero-shell-gap: 22px;
    --hero-content-gap: 14px;
    padding-top:calc(var(--site-header-height) + var(--hero-pad));
    padding-bottom:var(--hero-pad);
    gap:var(--hero-shell-gap);
  }
}
.hero__shell--door{
  align-content:stretch;
}
.hero-main{
  width:100%;
  display:grid;
  gap:32px;
  align-items:center;
}
@media (min-width: 960px){
  .hero-main{
    grid-template-columns:minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}
.hero-content{
  max-width:960px;
  text-align:center;
  color:var(--text);
}
.hero--premium .hero-content{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:var(--hero-content-gap, 14px);
}

/* Hero rhythm: rely on flex/grid gaps, not per-element margins */
.hero--premium .hero-label-row,
.hero--premium .hero__title,
.hero--premium .lead--hero,
.hero--premium .hero-cta-pair{
  margin:0;
}
/* Головний hero: білий текст на фото, без світлої «картки» навколо блоку */
body[data-theme="light"] .hero--premium .hero-content,
body:not([data-theme]) .hero--premium .hero-content{
  padding:0;
  background:transparent;
  border:none;
  box-shadow:none;
  border-radius:0;
  color:#fff;
}
body[data-theme="light"] .hero--premium .hero__title,
body:not([data-theme]) .hero--premium .hero__title{
  color:#fff;
}
body[data-theme="light"] .hero--premium .hero-label,
body:not([data-theme]) .hero--premium .hero-label{
  color:#fff;
  border-color:rgba(255,255,255,.38);
  background:rgba(255,255,255,.1);
  box-shadow:none;
}
body[data-theme="light"] .hero--premium .lead--hero,
body:not([data-theme]) .hero--premium .lead--hero{
  color:rgba(255,255,255,.88);
}
body[data-theme="light"] .hero--premium .button--hero-secondary,
body:not([data-theme]) .hero--premium .button--hero-secondary{
  border-color:rgba(255,255,255,.5);
  color:#fff;
  background:rgba(6,8,12,.24);
  box-shadow:0 2px 14px rgba(0,0,0,.15);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
body[data-theme="light"] .hero--premium .button--hero-secondary:hover,
body:not([data-theme]) .hero--premium .button--hero-secondary:hover{
  border-color:rgba(255,255,255,.88);
  background:rgba(255,255,255,.95);
  color:#1f2a30;
  box-shadow:0 8px 28px rgba(0,0,0,.18);
}
body[data-theme="dark"] .hero--premium .button--hero-secondary{
  border-color:rgba(255,255,255,.48);
  color:rgba(248,250,252,.95);
  background:rgba(6,8,12,.28);
  box-shadow:0 2px 14px rgba(0,0,0,.2);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
body[data-theme="dark"] .hero--premium .button--hero-secondary:hover{
  border-color:rgba(255,255,255,.85);
  background:rgba(255,255,255,.94);
  color:#111;
  box-shadow:0 8px 28px rgba(0,0,0,.22);
}
.hero--premium .hero__title,
.hero--premium .lead--hero{
  width:100%;
  text-align:center;
}
.hero--door .hero-content{
  text-align:left;
  max-width:840px;
}

@media (min-width: 960px){
  .hero--door .hero-content{
    margin-left:-30px;
  }
}
.hero-label,.badge,.chip{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(10px);
}
.hero-label{
  padding:10px 18px;
  margin-bottom:18px;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#e8edf2;
}
.hero-label-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-bottom:18px;
}
.hero-label-row .hero-label{
  margin-bottom:0;
}
.hero__title,.section__title,h1,h2,h3,h4{
  margin:0;
  color:var(--text);
  font-weight:800;
  letter-spacing:-.03em;
}
.hero__title{
  color:var(--text);
  font-size:clamp(38px, 6vw, 60px);
  line-height:1;
  max-width:980px;
  margin:0 auto 20px;
  text-transform:uppercase;
}
.hero--door .hero__title{
  margin:0 0 20px;
}
.hero__title span,.section__title span{color:var(--accent-2)}
.lead{
  font-size:18px;
  line-height:1.7;
  color:var(--muted);
  margin:0;
}
.lead--hero{
  color:rgba(255,255,255,.82);
  max-width:760px;
  margin:0 auto 30px;
}
.lead-hero__br-desktop{
  display:none;
}
@media (min-width:1025px){
  .lead-hero__br-desktop{
    display:block;
  }
}
.hero--door .lead--hero{
  margin:0 0 30px;
}
.hero-stats{
  width:min(100%, 940px);
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}
.stat{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:stretch;
  gap:8px;
  min-height:0;
  padding:22px 20px;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.03) 100%);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:var(--shadow-soft);
  text-align:center;
}
.stat b{
  display:block;
  margin:0;
  font-size:28px;
  line-height:1.08;
  color:#fff;
}
.stat span{
  display:block;
  margin:0;
  color:rgba(255,255,255,.72);
  font-size:14px;
  line-height:1.5;
}
.hero-badges{justify-content:center}
.badge{
  padding:10px 16px;
  color:#e8edf2;
  font-size:13px;
  letter-spacing:.03em;
}

/* Головна: мобільний hero — ритм, CTA в один стовпчик */
@media (max-width: 760px){
  .hero.hero--premium .hero__shell{
    gap:22px;
    padding-top:calc(var(--site-header-height) + 24px);
    padding-bottom:64px;
  }
  .hero--premium .hero-label-row{
    gap:8px;
    margin-bottom:14px;
    justify-content:center;
  }
  .hero--premium .hero-label{
    padding:8px 14px;
    font-size:10px;
    letter-spacing:.11em;
  }
  .hero--premium .hero__title{
    font-size:clamp(26px, 8vw, 40px);
    line-height:1.07;
    margin-bottom:14px;
  }
  .hero--premium .lead--hero{
    font-size:15px;
    line-height:1.65;
    margin-bottom:22px;
    padding-left:6px;
    padding-right:6px;
  }
  .hero--premium .hero-cta-pair{
    flex-direction:column;
    align-items:stretch;
    gap:11px;
    max-width:min(100%, 400px);
    margin-left:auto;
    margin-right:auto;
  }
  .hero--premium .hero-cta-pair .button{
    flex:0 0 auto;
    width:100%;
  }
  /* Hero stats/badges: на ~760px плашки не мають розтягуватись на всю ширину */
  .hero--premium .hero-stats{
    width:min(100%, 680px);
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
  }
  .hero--premium .hero-stats .stat{
    padding:16px 14px;
    border-radius:18px;
  }
  .hero--premium .hero-stats .stat span{
    font-size:13px;
    line-height:1.45;
  }
  .hero--premium .hero-stats .stat b{
    font-size:clamp(22px, 6.5vw, 28px);
  }
  .hero--premium .hero-badges{
    width:min(100%, 680px);
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    align-items:stretch;
    gap:8px;
  }
  .hero--premium .hero-badges .badge{
    justify-content:center;
    text-align:center;
    min-height:0;
    padding:11px 14px;
    font-size:12px;
    line-height:1.35;
  }
}

@media (max-width: 520px){
  .hero--premium .hero-stats{
    grid-template-columns:1fr;
  }
  .hero--premium .hero-badges{
    grid-template-columns:1fr;
  }
}

/* Головна: двері зліва, заголовок і лід справа (десктоп); на мобільному — текст зверху */
.hero-intro{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:clamp(22px, 5vw, 36px);
  width:100%;
  max-width:100%;
}
.hero-intro__labels{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
}
.hero-intro__main{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(22px, 5vw, 36px);
  width:100%;
}
.hero-intro__door{
  display:flex;
  justify-content:center;
  width:100%;
  max-width:100%;
}
@media (min-width: 960px){
  .hero-intro{
    align-items:stretch;
  }
  .hero-intro__main{
    display:grid;
    grid-template-columns:auto minmax(0, 1fr);
    gap:clamp(32px, 5vw, 64px);
    align-items:center;
    justify-items:start;
    width:100%;
    max-width:min(1120px, 100%);
    margin-inline:auto;
    /* Праворуч від геометричного центру: ml+mr:auto тягне вліво, якщо задати лише ml — тому зсув через translateX */
    transform:translateX(clamp(24px, 4vw, 80px));
    box-sizing:border-box;
  }
  .hero-intro__door{
    grid-column:1;
    grid-row:1;
    justify-self:center;
    align-self:center;
    /* Інакше flex тягне двері на всю висоту рядка — полотно лишається зверху, текст виглядає «нижче» дверей */
    align-items:center;
  }
  .hero-intro__copy{
    grid-column:2;
    grid-row:1;
    min-width:0;
    width:100%;
    max-width:min(720px, 100%);
    justify-self:start;
    align-self:center;
    text-align:left;
  }
  .hero--premium .hero-intro__copy.hero-content{
    align-items:flex-start;
  }
  .hero-intro__copy .hero__title{
    margin-left:0;
    margin-right:0;
    text-align:left;
  }
  .hero-intro__copy .lead--hero{
    margin-left:0;
    margin-right:0;
    text-align:left;
    max-width:min(720px, 100%);
  }
}
/* Ширший десктоп: перший абзац ліда в один рядок — після <br> «під реальні…» гарантовано другий рядок */
@media (min-width: 1100px){
  .hero-intro__copy .lead-hero__line-pre{
    white-space:nowrap;
  }
}
.hero-intro-door-animate{
  opacity:0;
  transform:translateY(28px);
  animation:fadeSlideUp .9s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay:.58s;
}
@media (prefers-reduced-motion: reduce){
  .hero-intro-door-animate{
    opacity:1;
    transform:none;
    animation:none;
  }
}

/* інтерактивні двері в hero */
a.hero-door-scene{
  display:block;
  text-decoration:none;
  /* Не inherit — інакше CTA «Каталог» тягне темний --text з main і зливається з фоном */
  color:#fff;
  -webkit-tap-highlight-color:transparent;
}
a.hero-door-scene:hover,
a.hero-door-scene:focus-visible{
  color:#fff;
}
a.hero-door-scene:focus-visible{
  outline:2px solid rgba(255,255,255,.95);
  outline-offset:6px;
  border-radius:20px;
}
.hero-door-scene{
  position:relative;
  width:320px;
  max-width:80vw;
  height:520px;
  margin:0 auto;
}
/* Великі двері в hero (головна, зліва від тексту) */
.hero-door-scene--hero{
  width:276px;
  max-width:min(276px, calc(100vw - 32px), 44vw);
  height:462px;
  margin:0;
  /* Тінь (.hero-door__floor) absolute з bottom:-34px не входить у висоту — без margin зливається з hero-stats */
  margin-bottom:calc(34px + clamp(20px, 3.5vw, 44px));
  flex-shrink:0;
  box-sizing:border-box;
  align-self:center;
}
.hero-door-scene--hero .hero-door__frame{
  border-width:11px;
  border-radius:16px;
}
.hero-door-scene--hero .hero-door__panel{
  border-radius:12px;
}
.hero-door-scene--hero .hero-door__surface{
  padding:18px 15px;
}
.hero-door-scene--hero .hero-door__surface::after{
  width:min(152px, 58%);
  height:52px;
  bottom:66%;
  opacity:1;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.32)) drop-shadow(0 0 1px rgba(255,255,255,.35));
}
.hero-door-scene--hero .hero-door__handle{
  right:17px;
  height:56px;
  margin-top:-28px;
  width:4px;
}
.hero-door-scene--hero .hero-door__floor{
  bottom:-34px;
  height:34px;
}
.hero-door-scene--hero .hero-door-back{
  inset:0;
  border-radius:12px;
  padding:16px 12px 16px;
}
.hero-door-scene--hero .hero-door-back__cta{
  padding:11px 12px 13px 14px;
  gap:10px;
  font-size:clamp(13px, 2.75vw, 20px);
  letter-spacing:.09em;
  border-radius:10px;
}
.hero-door-scene--hero .hero-door-back__cta-icon svg{
  width:21px;
  height:30px;
}
.hero-door-scene--hero .hero-door__label{
  display:none;
}

@media (min-width: 960px){
  .hero-door-scene:not(.hero-door-scene--hero){
    transform:translateX(60px);
  }
  .hero-door-scene--hero{
    transform:translateX(8px);
  }
}
.hero-door{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  padding:0;
  border:none;
  background:none;
  cursor:pointer;
  perspective:1200px;
  transform-style:preserve-3d;
  z-index:2;
}
.hero-door__frame{
  position:relative;
  width:100%;
  height:100%;
  border-radius:18px;
  padding:0;
  box-sizing:border-box;
  border:10px solid transparent;
  /* Прозорий центр — під панеллю видно .hero-door-back; червоний лише «обідок» */
  background:
    linear-gradient(transparent, transparent) padding-box,
    linear-gradient(
      155deg,
      #7f1d1d 0%,
      #b91c1c 20%,
      #dc2626 42%,
      var(--accent) 54%,
      #be123c 72%,
      #7f1d1d 100%
    ) border-box;
  background-clip:padding-box, border-box;
  -webkit-background-clip:padding-box, border-box;
  box-shadow:
    0 30px 70px rgba(0,0,0,.82),
    0 12px 28px rgba(217,36,54,.35),
    inset 0 1px 0 rgba(255,255,255,.18);
  display:flex;
  align-items:stretch;
  justify-content:center;
}
.hero-door__panel{
  position:relative;
  z-index:2;
  width:100%;
  border-radius:10px;
  background:linear-gradient(135deg, #f9fafb, #e5e7eb);
  box-shadow:
    inset 0 0 0 2px rgba(217,36,54,.38),
    0 18px 40px rgba(0,0,0,.45);
  transform-origin:left center;
  transform:rotateY(0deg);
  transform-style:preserve-3d;
  transition:transform .8s cubic-bezier(.22,1,.36,1);
}
.hero-door__surface{
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(229,231,235,.95)),
    radial-gradient(circle at 8% 0%, rgba(217,36,54,.22) 0, transparent 56%);
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  padding:22px 20px;
}
.hero-door__surface::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:1;
  opacity:.32;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}
.hero-door__hinges{
  position:absolute;
  left:2px;
  top:9%;
  bottom:9%;
  width:12px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:flex-start;
  pointer-events:none;
  z-index:2;
}
.hero-door__hinge{
  flex-shrink:0;
  width:7px;
  height:28px;
  border-radius:2px;
  background:linear-gradient(90deg,#3d4450 0%,#cbd5e1 45%,#94a3b8 58%,#2f3540 100%);
  box-shadow:
    inset 1px 0 1px rgba(255,255,255,.5),
    inset -1px 0 2px rgba(0,0,0,.55),
    0 1px 4px rgba(0,0,0,.4);
}
.hero-door__surface::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:68%;
  width:140px;
  height:46px;
  background:url("/static/images/parafire-logo.3371caa33768.png") center center / contain no-repeat;
  opacity:.96;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.28));
  transition:opacity .3s ease, transform .3s ease;
  z-index:3;
}
.hero-door__handle{
  position:absolute;
  right:18px;
  top:50%;
  width:4px;
  height:54px;
  margin-top:-27px;
  border-radius:999px;
  background:linear-gradient(180deg, #e5e7eb, #9ca3af);
  box-shadow:
    0 0 0 2px rgba(217,36,54,.42),
    0 4px 10px rgba(0,0,0,.55);
  z-index:4;
}
.hero-door__label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(248,113,113,.45);
  background:rgba(55,12,18,.78);
  color:#f9fafb;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.hero-door__label::after{
  content:"→";
  font-size:12px;
}
.hero-door__floor{
  position:absolute;
  left:4%;
  right:4%;
  bottom:-42px;
  height:42px;
  background:
    radial-gradient(ellipse at 50% 0, rgba(0,0,0,.9) 0, transparent 65%);
  opacity:.9;
}
.hero--door-open .hero-door__panel,
.hero-door-scene:hover .hero-door__panel,
.hero-door-scene:focus-visible .hero-door__panel,
.hero-door-scene--scroll-open .hero-door__panel{
  transform:rotateY(78deg);
}
.hero--door-open .hero-door__label,
.hero-door-scene:hover .hero-door__label,
.hero-door-scene:focus-visible .hero-door__label,
.hero-door-scene--scroll-open .hero-door__label{
  opacity:0;
  transform:translateY(8px);
  transition:opacity .3s ease, transform .3s ease;
}
.hero--door-open .hero-door__surface::after,
.hero-door-scene:hover .hero-door__surface::after,
.hero-door-scene:focus-visible .hero-door__surface::after,
.hero-door-scene--scroll-open .hero-door__surface::after{
  opacity:0;
  transform:translateY(6px);
}

.hero-door-back{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  box-sizing:border-box;
  border-radius:10px;
  padding:22px 20px 22px;
  overflow:visible;
  background:linear-gradient(180deg, #101012 0%, #030304 55%, #010102 100%);
  box-shadow:
    0 18px 44px rgba(0,0,0,.9),
    inset 0 0 0 1px rgba(255,255,255,.06);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:6px;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .5s ease, transform .5s ease;
  z-index:1;
  pointer-events:none;
}
.hero-door-back__cta{
  position:relative;
  z-index:2;
  display:inline-flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:nowrap;
  margin:0;
  padding:12px 16px 15px 18px;
  max-width:100%;
  min-width:0;
  width:100%;
  box-sizing:border-box;
  border-radius:10px;
  font-size:17px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  line-height:1;
  color:#fff;
  text-align:center;
  -webkit-font-smoothing:antialiased;
  text-shadow:0 1px 3px rgba(0,0,0,.75);
  border:1px solid rgba(255,255,255,.22);
  background-color:transparent;
  background-image:none;
  isolation:isolate;
  box-shadow:none;
  transition:transform .32s cubic-bezier(.22,1,.36,1), border-color .32s ease, box-shadow .32s ease;
  flex-shrink:0;
  cursor:pointer;
  pointer-events:auto;
}
/* Ледь помітна рамка всередині — без «червоного» об’єму */
.hero-door-back__cta::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.hero-door-back__cta::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:0;
  background:radial-gradient(
    ellipse 115% 70% at 50% -15%,
    rgba(255,255,255,.08) 0%,
    transparent 50%
  );
  opacity:0;
  transition:opacity .32s ease;
}
.hero-door-back__cta-label{
  position:relative;
  z-index:1;
  flex:1;
  flex-shrink:1;
  min-width:0;
  align-self:center;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  gap:2px;
  color:#fff;
  text-shadow:inherit;
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:normal;
  text-align:right;
}
.hero-door-back__cta-line{
  display:block;
  line-height:1.05;
  transition:color .22s ease, text-shadow .22s ease;
}
.hero-door-back__cta-label:hover .hero-door-back__cta-line{
  color:var(--accent);
  text-shadow:0 1px 3px rgba(0,0,0,.85);
}
.hero-door-back__cta-icon{
  position:relative;
  z-index:1;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  align-self:center;
  color:#fff;
  opacity:.92;
  transform:translateY(0.5px);
  transition:transform .32s cubic-bezier(.22,1,.36,1), opacity .32s ease;
}
.hero-door-back__cta-icon svg{
  display:block;
  width:24px;
  height:34px;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.5));
}
.hero-door-scene:hover .hero-door-back__cta,
.hero-door-scene:focus-visible .hero-door-back__cta,
.hero-door-scene--scroll-open .hero-door-back__cta{
  transform:translateY(-2px) scale(1.02);
  border-color:rgba(255,255,255,.38);
  box-shadow:0 12px 28px rgba(0,0,0,.35);
}
.hero-door-scene:hover .hero-door-back__cta::after,
.hero-door-scene:focus-visible .hero-door-back__cta::after,
.hero-door-scene--scroll-open .hero-door-back__cta::after{
  opacity:1;
}
/* Додатковий ховер саме по кнопці (вища специфічність за .hero-door-scene:hover …) */
.hero-door-scene:hover .hero-door-back__cta:hover,
.hero-door-scene:focus-visible .hero-door-back__cta:hover,
.hero-door-scene--scroll-open .hero-door-back__cta:hover{
  transform:translateY(-3px) scale(1.03);
  border-color:rgba(255,255,255,.5);
  box-shadow:0 14px 32px rgba(0,0,0,.4);
}
.hero-door-scene:hover .hero-door-back__cta:hover .hero-door-back__cta-icon,
.hero-door-scene:focus-visible .hero-door-back__cta:hover .hero-door-back__cta-icon,
.hero-door-scene--scroll-open .hero-door-back__cta:hover .hero-door-back__cta-icon{
  transform:translate(2px, 0.5px);
  opacity:1;
}
.hero-door-scene:hover .hero-door-back__cta:hover::after,
.hero-door-scene:focus-visible .hero-door-back__cta:hover::after,
.hero-door-scene--scroll-open .hero-door-back__cta:hover::after{
  opacity:1;
}
.hero-door-back__text{
  margin:0;
  font-size:13px;
  line-height:1.7;
  color:rgba(226,232,240,.9);
  text-align:center;
}
.hero-door-back__actions{
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
}
.hero-door-back__actions .button--sm{
  min-height:40px;
  padding:9px 16px;
  font-size:11px;
}
.hero--door-open .hero-door-back,
.hero-door-scene:hover .hero-door-back,
.hero-door-scene:focus-visible .hero-door-back,
.hero-door-scene--scroll-open .hero-door-back{
  opacity:1;
  transform:translateY(0);
}

@media (prefers-reduced-motion: reduce){
  .hero-door__panel{transition-duration:.01ms !important;}
  .hero-door-back{transition-duration:.01ms !important;}
  .hero-door-back__cta{transition-duration:.01ms !important;}
  .hero-door-back__cta-icon{transition-duration:.01ms !important;}
  .hero-door-scene:hover .hero-door-back__cta,
  .hero-door-scene:focus-visible .hero-door-back__cta,
  .hero-door-scene--scroll-open .hero-door-back__cta{
    transform:none;
  }
  .hero-door-scene:hover .hero-door-back__cta:hover,
  .hero-door-scene:focus-visible .hero-door-back__cta:hover,
  .hero-door-scene--scroll-open .hero-door-back__cta:hover{
    transform:none;
  }
  .hero-door-scene:hover .hero-door-back__cta:hover .hero-door-back__cta-icon,
  .hero-door-scene:focus-visible .hero-door-back__cta:hover .hero-door-back__cta-icon,
  .hero-door-scene--scroll-open .hero-door-back__cta:hover .hero-door-back__cta-icon{
    transform:none;
  }
}

/* Тач / мобільний hero: повільніше відкривання дверей (на десктопі лишається .8s) */
@media (hover: none) and (max-width: 960px){
  .hero-door__panel{
    transition-duration:1.35s;
    transition-timing-function:cubic-bezier(.2,1,.42,1);
  }
  .hero-door-back{
    transition-duration:.85s;
  }
  .hero-door-back__cta{
    transition-duration:.55s;
  }
  .hero-door__label{
    transition-duration:.42s ease;
  }
  .hero-door__surface::after{
    transition-duration:.42s ease;
  }
}

@media (max-width: 960px){
  .hero-main{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
  }
  /* Не чіпаємо .hero-door-scene--hero на головній */
  .hero-door-scene:not(.hero-door-scene--hero){
    order:2;
    width:260px;
    height:380px;
    align-self:center;
  }
  .hero--door .hero-content{
    order:1;
  }
}

/* Двері hero на вузьких екранах */
@media (max-width: 560px){
  .hero-door-scene--hero{
    width:min(210px, 52vw);
    height:352px;
    max-width:min(210px, calc(100% - 16px));
  }
  .hero-door-scene--hero .hero-door-back{
    inset:0;
    border-radius:12px;
    padding:12px 10px 12px;
  }
  .hero-door-scene--hero .hero-door-back__cta{
    padding:9px 8px 11px 10px;
    gap:7px;
    font-size:clamp(11px, 3.35vw, 16px);
    letter-spacing:.07em;
    border-radius:8px;
  }
  .hero-door-scene--hero .hero-door-back__cta-icon svg{
    width:18px;
    height:26px;
  }
  .hero-door-scene--hero .hero-door__surface::after{
    width:min(124px, 56%);
    height:44px;
    bottom:64%;
    opacity:1;
    filter:drop-shadow(0 3px 8px rgba(0,0,0,.3)) drop-shadow(0 0 1px rgba(255,255,255,.3));
  }
  .hero-door-scene--hero .hero-door__handle{
    right:14px;
    height:46px;
    margin-top:-23px;
  }
  .hero-door-scene--hero .hero-door__floor{
    bottom:-28px;
    height:28px;
  }
  .hero-door-scene--hero{
    margin-bottom:calc(28px + clamp(18px, 4vw, 36px));
  }
}
@media (max-width: 380px){
  .hero-door-scene--hero{
    width:min(184px, 86vw);
    height:308px;
    max-width:calc(100% - 8px);
    margin-bottom:calc(28px + clamp(16px, 5vw, 28px));
  }
  .hero-door-scene--hero .hero-door__surface::after{
    width:min(108px, 54%);
    height:38px;
    bottom:63%;
  }
}

.hero-animate > *{
  opacity:0;
  transform:translateY(28px);
  animation:fadeSlideUp .9s cubic-bezier(.22,1,.36,1) forwards;
}
.hero-animate .hero-label-row,
.hero-animate .hero-label{animation-delay:.1s}
.hero-animate .hero__title{animation-delay:.25s}
.hero-animate .lead{animation-delay:.42s}

.section{
  padding:104px 0;
}
.section--soft{
  background:linear-gradient(180deg, rgba(255,255,255,.02) 0%, rgba(255,255,255,.015) 100%);
}

/* Ледь помітне розділення між блоками (після hero / page-hero / попередньої секції) */
.hero + .section,
.section + .section,
.page-hero + .section{
  border-top:1px solid rgba(142,153,159,.16);
}
body[data-theme="dark"] .hero + .section,
body[data-theme="dark"] .section + .section,
body[data-theme="dark"] .page-hero + .section{
  border-top-color:rgba(255,255,255,.08);
}

/* світла тема: м’який фон секцій для відділення блоків */
body[data-theme="light"] .section{
  background:#f7f7f7;
}
body[data-theme="light"] .section--soft{
  background:#ffffff;
}
.section__head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:32px;
}
.section__head--compact{margin-bottom:20px}
.section-kicker{
  display:inline-flex;
  align-items:center;
  margin:0 0 14px;
  padding:8px 14px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  color:#f2f6fa;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.14em;
}

/* світла тема: обводка без заливки */
body[data-theme="light"] .section-kicker,
body:not([data-theme]) .section-kicker{
  color:#1f2a30;
  border-color:rgba(31,42,48,.2);
}
body[data-theme="light"] .page-hero__box .section-kicker,
body:not([data-theme]) .page-hero__box .section-kicker{
  border-color:rgba(31,42,48,.24);
}
.section__title{
  font-size:clamp(30px, 4vw, 54px);
  line-height:1;
  text-transform:uppercase;
}
.section__title--sm{font-size:24px}
.section__text{
  max-width:760px;
  color:var(--muted);
  font-size:17px;
  line-height:1.7;
}

/* компенсуємо висоту sticky-хедера при переході по якорях (#about, #form) */
#about,
#form{
  scroll-margin-top:calc(var(--site-header-height) + 24px);
}

@media (max-width: 760px){
  #about,
  #form{
    scroll-margin-top:calc(var(--site-header-height) + 28px);
  }
}

.section__actions{
  margin-top:26px;
  display:flex;
  justify-content:flex-end;
}

@media (max-width: 760px){
  .section__actions{
    justify-content:center;
  }
}

/* Головна: «Усі сертифікати» / «Усі кейси» — на вузьких екранах лише стрілка */
.certificates-all-link__arrow,
.cases-all-link__arrow{
  display:none;
}
@media (max-width: 760px){
  .certificates-all-link,
  .cases-all-link{
    min-width:46px;
    min-height:44px;
    padding:10px 12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .certificates-all-link__label,
  .cases-all-link__label{
    display:none;
  }
  .certificates-all-link__arrow,
  .cases-all-link__arrow{
    display:block;
  }
}

.grid-4,.products-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:22px;
}
.products-grid--home{
  grid-template-columns:repeat(4, minmax(0, 1fr));
}
.card,.product-card,.mini-card,.filters,.detail-card,.cta,.page-hero__box{
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.025) 100%);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.card::before,.product-card::before,.mini-card::before,.filters::before,.detail-card::before,.cta::before,.page-hero__box::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.06), transparent 18%);
  opacity:.6;
}
.catalog-card{
  padding:28px 24px;
  min-height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  background:var(--surface-2);
  border:1px solid var(--card-edge-soft);
  box-shadow:var(--shadow);
  transition:transform .32s ease, border-color .32s ease, box-shadow .32s ease, background .32s ease;
}
a.card.catalog-card{
  color:inherit;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
a.card.catalog-card:hover{
  color:inherit;
}
a.card.catalog-card:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}
.catalog-card:hover{
  transform:translateY(-6px);
  border-color:rgba(31,42,48,.18);
  box-shadow:
    0 0 0 1px rgba(217,36,54,.1),
    0 2px 6px rgba(15,23,42,.04),
    0 12px 40px rgba(15,23,42,.1),
    0 32px 72px rgba(15,23,42,.12),
    0 0 48px rgba(217,36,54,.06);
}
.mini-card:hover{
  transform:translateY(-6px);
  border-color:rgba(31,42,48,.16);
  box-shadow:var(--shadow-lift);
}
.catalog-card__icon{
  width:104px;
  height:104px;
  margin-bottom:18px;
  display:grid;
  place-items:center;
  border-radius:20px;
  overflow:hidden;
  background:linear-gradient(165deg, rgba(255,255,255,.1), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  transition:border-color .32s ease, box-shadow .32s ease, background .32s ease;
}
.catalog-card:hover .catalog-card__icon{
  border-color:rgba(255,255,255,.16);
  background:linear-gradient(165deg, rgba(255,255,255,.13), rgba(255,255,255,.05));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
}
.catalog-card__icon img{
  max-width:88px;
  max-height:88px;
  width:auto;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.22));
}
/* Категорії на головній: без тіні на самих зображеннях */
.categories-grid .catalog-card__icon img{
  filter:none;
}

/* Home categories: subtle zoom in/out (random stagger via JS vars) */
@keyframes pfCategoryKenBurns{
  0%{transform:scale(1)}
  55%{transform:scale(1.12)}
  100%{transform:scale(1.03)}
}
.categories-grid .catalog-card__icon img.pf-kb{
  transform-origin:center;
  will-change:transform;
  animation:pfCategoryKenBurns var(--kb-dur, 7.2s) cubic-bezier(.22,1,.36,1) var(--kb-delay, 0s) infinite;
}
@media (prefers-reduced-motion: reduce){
  .categories-grid .catalog-card__icon img.pf-kb{animation:none !important; transform:none !important}
}
.catalog-card h3, .mini-card h3, .product-card h3{font-size:22px; margin-bottom:10px}
.catalog-card p,.mini-card p,.product-card p,.detail-description{
  color:var(--muted);
  line-height:1.7;
}
.detail-description{
  display:flex;
  flex-direction:column;
  gap:0.28em;
  align-items:stretch;
  max-width:100%;
  min-width:0;
  /* трохи менший шрифт, щоб рядки вміщались в одну лінію */
  font-size:15px;
  line-height:1.55;
}
.detail-description__line{
  display:block;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  /* Prefer single line; allow wrapping on small screens */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  word-break:normal;
  overflow-wrap:normal;
}
.detail-description.detail-description--wrap .detail-description__line{
  white-space:normal;
  overflow:visible;
  overflow-wrap:break-word;
  word-break:break-word;
}

/* Мобільний detail: однаковий шрифт, дозволяємо перенос рядків */
@media (max-width: 760px){
  .detail-description{
    font-size:14px;
    line-height:1.7;
  }
  .detail-description__line{ white-space:normal; overflow:visible; overflow-wrap:break-word; }
}
.catalog-card__cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:12px;
  color:var(--text);
  font-weight:700;
}
.catalog-card__cta-text--short{
  display:none;
}
.catalog-card__cta::after{
  content:"→";
  transition:transform .3s ease;
}
.catalog-card:hover .catalog-card__cta::after,
a.card.catalog-card:hover .catalog-card__cta::after{
  transform:translateX(4px);
}

/* Категорії на головній: однакова висота карток у рядку, «Перейти в каталог» по нижньому краю */
.categories-grid{
  align-items:stretch;
}
.categories-grid .catalog-card{
  height:100%;
  box-sizing:border-box;
}
.categories-grid .catalog-card__icon{
  width:140px;
  height:140px;
  margin-bottom:12px;
}
.categories-grid .catalog-card__icon img{
  max-width:120px;
  max-height:120px;
}
.categories-grid .catalog-card h3{
  margin-bottom:4px;
}
.categories-grid .catalog-card p{
  margin:0 0 6px;
  line-height:1.45;
  flex:1 1 auto;
  min-height:0;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}
.categories-grid .catalog-card__cta{
  margin-top:auto;
}

@media (max-width: 760px){
  .catalog-card__cta{
    font-size:0;
    gap:6px;
  }
  .catalog-card__cta::after{
    font-size:16px;
  }
}

.footer{
  margin-top:80px;
  /* Верх футера + низ смуги «Ми в соцмережах» до лінії — однакові (див. .footer__social-row) */
  padding:28px 0 32px;
  background:#546670;
  border-top:1px solid rgba(0,0,0,.12);
  color:#fff;
}
.footer__grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:40px;
  align-items:flex-start;
}
.footer__col--brand .footer__logo img{
  display:block;
  height:52px;
  width:auto;
  max-width:min(240px, 100%);
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.35)) brightness(1.06);
}
@media (min-width: 768px){
  .footer__col--brand .footer__logo img{
    height:72px;
    max-width:min(300px, 100%);
  }
}
.footer__text{
  margin-top:18px;
  max-width:320px;
  font-size:14px;
  line-height:1.7;
  color:rgba(255,255,255,.92);
}
.footer__brand-meta{
  margin-top:16px;
  max-width:480px;
}
.footer__brand-meta .footer__title{
  margin-bottom:12px;
}
.footer__title{
  margin:0 0 18px;
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#fff;
}
.footer-list{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.footer-list a{
  font-size:14px;
  color:#fff;
}
.footer-list a:hover{
  color:#111;
}
.footer-contacts{
  display:flex;
  flex-direction:column;
  gap:16px;
  font-size:14px;
}
.footer-contacts__block{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.footer-contacts__label{
  font-weight:600;
  color:#fff;
}
.footer-contacts__text{
  margin:0;
  color:#fff;
}
.footer-contacts__map-link{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.35);
  transition:color .2s ease, border-color .2s ease;
}
.footer-contacts__map-link:hover{
  color:#111;
  border-bottom-color:rgba(0,0,0,.35);
}
.footer-contacts a{
  color:#fff;
}
.footer-contacts a:hover{
  color:#111;
}
.footer-meta a{
  color:#fff;
}
.footer-meta a:hover{
  color:#111;
}
/* mailto / tel: глобальний a{ color: var(--text) } не має «з’їдати» клік і видимість */
.footer a[href^="mailto:"],
.footer a[href^="tel:"]{
  cursor:pointer;
  position:relative;
  z-index:2;
  text-decoration:underline;
  text-underline-offset:0.2em;
  text-decoration-color:rgba(255,255,255,.5);
}
.footer a[href^="mailto:"]:hover,
.footer a[href^="tel:"]:hover{
  text-decoration-color:currentColor;
}
body[data-theme="dark"] .footer-list a:hover,
body[data-theme="dark"] .footer-contacts a:hover,
body[data-theme="dark"] .footer-meta a:hover,
body[data-theme="dark"] .footer-contacts__map-link:hover{
  color:#111;
}
.footer-meta{
  display:flex;
  flex-direction:column;
  gap:16px;
  font-size:14px;
}
.footer__social-row{
  margin-bottom:28px;
  padding:0 0 28px;
  border-bottom:1px solid rgba(255,255,255,.18);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px 24px;
}
.footer__social-title{
  margin:0;
  padding:0;
  font-size:13px;
  line-height:1.25;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#fff;
}
.footer-social{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin:0;
  padding:0;
  list-style:none;
}
.footer-social li{
  margin:0;
}
.footer-social__link{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:50%;
  overflow:hidden;
  color:#fff;
  border:1px solid transparent;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  transform:translateZ(0);
  transition:
    color .25s ease,
    background .25s ease,
    border-color .25s ease,
    transform .22s ease,
    opacity .28s ease,
    box-shadow .25s ease;
}
.footer-social li:nth-child(1) .footer-social__link{
  background:linear-gradient(135deg,#f09433 0%,#dc2743 50%,#bc1888 100%);
  border-color:rgba(255,255,255,.35);
}
.footer-social li:nth-child(2) .footer-social__link{
  background:#229ED9;
  border-color:rgba(34,158,217,.55);
}
.footer-social li:nth-child(3) .footer-social__link{
  background:#25D366;
  border-color:rgba(37,211,102,.55);
}
/* Десктоп: тускло за замовчуванням, яскраво при наведенні (без filter — інакше артефакти «квадрата» по колу) */
@media (min-width:769px) and (hover:hover){
  .footer-social li:nth-child(1) .footer-social__link,
  .footer-social li:nth-child(2) .footer-social__link,
  .footer-social li:nth-child(3) .footer-social__link{
    opacity:.82;
    box-shadow:none;
  }
  .footer-social li:nth-child(1) .footer-social__link{
    border-color:rgba(255,255,255,.22);
  }
  .footer-social li:nth-child(2) .footer-social__link{
    border-color:rgba(34,158,217,.35);
  }
  .footer-social li:nth-child(3) .footer-social__link{
    border-color:rgba(37,211,102,.35);
  }
  body[data-theme="light"] .footer-social li:nth-child(1) .footer-social__link,
  body:not([data-theme]) .footer-social li:nth-child(1) .footer-social__link{
    border-color:rgba(31,42,48,.14);
  }
  body[data-theme="light"] .footer-social li:nth-child(2) .footer-social__link,
  body:not([data-theme]) .footer-social li:nth-child(2) .footer-social__link{
    border-color:rgba(34,158,217,.32);
  }
  body[data-theme="light"] .footer-social li:nth-child(3) .footer-social__link,
  body:not([data-theme]) .footer-social li:nth-child(3) .footer-social__link{
    border-color:rgba(37,211,102,.32);
  }
  .footer-social li:nth-child(1) .footer-social__link:hover,
  .footer-social li:nth-child(2) .footer-social__link:hover,
  .footer-social li:nth-child(3) .footer-social__link:hover{
    opacity:1;
    border-color:rgba(248,250,252,.55);
    transform:translateY(-2px) translateZ(0);
    box-shadow:0 10px 26px rgba(0,0,0,.22);
  }
  body[data-theme="light"] .footer-social li:nth-child(1) .footer-social__link:hover,
  body:not([data-theme]) .footer-social li:nth-child(1) .footer-social__link:hover{
    border-color:rgba(248,250,252,.65);
    box-shadow:0 10px 26px rgba(15,23,42,.18);
  }
  body[data-theme="light"] .footer-social li:nth-child(2) .footer-social__link:hover,
  body:not([data-theme]) .footer-social li:nth-child(2) .footer-social__link:hover{
    border-color:rgba(34,158,217,.65);
  }
  body[data-theme="light"] .footer-social li:nth-child(3) .footer-social__link:hover,
  body:not([data-theme]) .footer-social li:nth-child(3) .footer-social__link:hover{
    border-color:rgba(37,211,102,.65);
  }
}
/* Мобільна версія: завжди насичені кольори */
@media (max-width:768px){
  .footer-social li:nth-child(1) .footer-social__link,
  .footer-social li:nth-child(2) .footer-social__link,
  .footer-social li:nth-child(3) .footer-social__link{
    filter:none;
    opacity:1;
  }
  .footer-social li:nth-child(1) .footer-social__link{
    border-color:rgba(255,255,255,.4);
  }
  .footer-social li:nth-child(2) .footer-social__link{
    border-color:rgba(34,158,217,.55);
  }
  .footer-social li:nth-child(3) .footer-social__link{
    border-color:rgba(37,211,102,.55);
  }
  body[data-theme="light"] .footer-social li:nth-child(1) .footer-social__link{
    border-color:rgba(255,255,255,.42);
  }
  body[data-theme="light"] .footer-social li:nth-child(2) .footer-social__link{
    border-color:rgba(34,158,217,.55);
  }
  body[data-theme="light"] .footer-social li:nth-child(3) .footer-social__link{
    border-color:rgba(37,211,102,.55);
  }
}
.footer-social__icon{
  display:block;
  flex-shrink:0;
}

.footer__bottom{
  margin-top:28px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.18);
  display:flex;
  justify-content:space-between;
  gap:16px;
  font-size:12px;
  color:rgba(255,255,255,.88);
}

/* Планшет: 2 колонки; контакти на всю ширину другим рядком */
@media (max-width: 1024px){
  .footer__grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    row-gap:32px;
  }
  .footer__col--contacts{
    grid-column:1 / -1;
  }
}
@media (max-width: 640px){
  .footer{
    margin-top:56px;
    padding:28px 0 28px;
  }
  .footer__grid{
    grid-template-columns:1fr;
    gap:28px;
  }
  .footer__bottom{
    flex-direction:column;
    align-items:flex-start;
  }
  .footer__social-row{
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
  }
  .footer__social-title{
    width:100%;
    text-align:center;
  }
  .footer-social{
    justify-content:center;
  }
}

.product-card{
  overflow:hidden;
  display:flex;
  flex-direction:column;
  height:100%;
  transition:transform .34s cubic-bezier(.22,1,.36,1), box-shadow .34s ease, border-color .34s ease;
}
.product-card__image-wrap{
  position:relative;
  display:block;
  aspect-ratio: 3 / 4;
  min-height:auto;
  padding:0;
  background:
    radial-gradient(circle at top, rgba(219,0,50,.12), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border-bottom:1px solid rgba(255,255,255,.08);
  overflow:hidden;
}
.product-card__image-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, transparent 20%, rgba(255,255,255,.08) 46%, transparent 72%);
  transform:translateX(-130%);
  transition:transform .8s ease;
}
.product-card:hover .product-card__image-wrap::after{transform:translateX(130%)}
.product-card__image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  transition:transform .45s ease, opacity .35s ease;
  filter:none;
  padding:0;
  background:transparent;
}
.product-card:hover .product-card__image{transform:scale(1.05)}
.product-card__image--secondary{opacity:0}
.product-card:hover .product-card__image--secondary{opacity:1}
.product-card:hover .product-card__image--primary{opacity:0}
.product-card--alt .product-card__image--primary{opacity:0}
.product-card--alt .product-card__image--secondary{opacity:1}
.product-card__body{
  padding:20px 20px 22px;
  display:flex;
  flex-direction:column;
  gap:12px;
  flex:1;
}
.product-card__meta{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.chip{
  padding:8px 12px;
  color:#dbe3eb;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.chip--ok{
  border-color:rgba(38,194,129,.24);
  background:rgba(38,194,129,.12);
  color:#bff2db;
}
.product-card h3 a{
  color:#fff;
}
.product-card h3 a:hover{color:#111}
body[data-theme="dark"] .product-card h3 a:hover,
.products-grid .product-card h3 a:hover{
  color:#111;
}
.product-card__footer{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin-top:auto;
}
.product-card__price{
  font-size:28px;
  font-weight:800;
  color:#fff;
}
.detail-price{
  font-size:clamp(26px, 4vw, 34px);
  font-weight:800;
  color:#d92436;
  letter-spacing:-.02em;
}
.product-card__actions{justify-content:flex-end}

.about-grid,.cta__grid,.catalog-layout,.detail-card{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:28px;
}
.about-media,.detail-card__image{
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
}
.about-media img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.detail-card__image img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.detail-card__image{
  position:relative;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}

.about-content,.cta__content{align-self:center}
.about-points{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
  margin-top:24px;
}
.mini-card{
  padding:20px;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.cta{padding:40px;}
.form{
  position:relative;
  display:grid;
  gap:14px;
}
/* Honeypot: не показувати користувачу (лише для антибота) */
.lead-honeypot{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
  opacity:0;
  pointer-events:none;
}
.input{
  width:100%;
  min-height:54px;
  padding:15px 42px 15px 16px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.38);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  color:#fff;
  font:inherit;
  outline:none;
  transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

/* Number inputs: avoid clipped/overlapping digits on mobile */
input.input[type="number"]{
  padding-right:16px;
}
input.input[type="number"]::-webkit-outer-spin-button,
input.input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}
input.input[type="number"]{
  -moz-appearance:textfield;
}
select.input{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  cursor:pointer;
  background-image:
    radial-gradient(circle at 0 0, rgba(255,255,255,.08), transparent 55%),
    linear-gradient(180deg, rgba(15,23,42,.14), rgba(15,23,42,.3)),
    url("data:image/svg+xml,%3Csvg width='18' height='12' viewBox='0 0 18 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4l6 6 6-6' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:
    0 0,
    0 0,
    right 16px center;
  background-size:
    120% 220%,
    120% 220%,
    18px 12px;
}
select.input option{
  color:#f8fbff;
  background:#06090e;
}

/* Каталог: кастомне сортування (замість нативного списку ОС) */
.catalog-sort-label{
  gap:8px;
}
.catalog-sort-select{
  position:relative;
  width:100%;
}
.catalog-sort-select__native{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
button.catalog-sort-select__trigger.input{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  margin:0;
  text-align:left;
  cursor:pointer;
  padding-right:44px;
}
.catalog-sort-select__value{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.catalog-sort-select__chevron{
  flex-shrink:0;
  width:18px;
  height:12px;
  background:url("data:image/svg+xml,%3Csvg width='18' height='12' viewBox='0 0 18 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4l6 6 6-6' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity:.85;
  transform-origin:center;
  transition:transform .22s cubic-bezier(.22,1,.36,1);
}
body[data-theme="light"] .catalog-sort-select__chevron,
body:not([data-theme]) .catalog-sort-select__chevron{
  background-image:url("data:image/svg+xml,%3Csvg width='18' height='12' viewBox='0 0 18 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4l6 6 6-6' fill='none' stroke='%234e5b61' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.catalog-sort-select__list{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 6px);
  z-index:260;
  margin:0;
  padding:6px;
  list-style:none;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.35);
  background:linear-gradient(180deg, rgba(15,23,42,.98), rgba(9,11,18,.98));
  box-shadow:0 18px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04);
  max-height:min(320px, 70vh);
  overflow-y:auto;
}

/* Фільтри: "Сортування" поруч з низом панелі — відкриваємо список вгору (ПК + мобільна) */
.filters .catalog-sort-select__list{
  top:auto;
  bottom:calc(100% + 6px);
}
/* Фільтри: "Категорія" (multiselect) має відкриватися вниз */
.filters .catalog-multiselect .catalog-sort-select__list{
  top:calc(100% + 6px);
  bottom:auto;
}
.catalog-sort-select__option{
  margin:0;
  padding:12px 14px;
  border-radius:12px;
  font-size:14px;
  line-height:1.35;
  color:#e5e7eb;
  cursor:pointer;
  white-space:nowrap;
  transition:background .15s ease, color .15s ease;
}
.catalog-sort-select__option:hover,
.catalog-sort-select__option:focus-visible{
  outline:none;
  background:rgba(217,36,54,.18);
  color:#fff;
}
.catalog-sort-select__option.is-selected{
  background:rgba(217,36,54,.12);
  color:#fff;
  font-weight:600;
}
body[data-theme="light"] .catalog-sort-select__list,
body:not([data-theme]) .catalog-sort-select__list{
  border:1px solid rgba(31,42,48,.2);
  background:#ffffff;
  box-shadow:var(--shadow-lift);
}
body[data-theme="light"] .catalog-sort-select__option,
body:not([data-theme]) .catalog-sort-select__option{
  color:#1f2a30;
}
body[data-theme="light"] .catalog-sort-select__option:hover,
body[data-theme="light"] .catalog-sort-select__option:focus-visible,
body:not([data-theme]) .catalog-sort-select__option:hover,
body:not([data-theme]) .catalog-sort-select__option:focus-visible{
  background:rgba(217,36,54,.1);
  color:#b91c1c;
}
body[data-theme="light"] .catalog-sort-select__option.is-selected,
body:not([data-theme]) .catalog-sort-select__option.is-selected{
  background:rgba(217,36,54,.08);
  color:#9a1824;
}
.catalog-sort-select__trigger[aria-expanded="true"]{
  border-color:rgba(217,36,54,.45);
  box-shadow:0 0 0 3px rgba(217,36,54,.15);
}
.catalog-sort-select__trigger[aria-expanded="true"] .catalog-sort-select__chevron{
  transform:rotate(180deg);
}
body[data-theme="light"] .catalog-sort-select__trigger[aria-expanded="true"],
body:not([data-theme]) .catalog-sort-select__trigger[aria-expanded="true"]{
  border-color:rgba(217,36,54,.4);
  box-shadow:0 0 0 3px rgba(217,36,54,.12);
}

/* Каталог: мультивибір категорій у стилі сортування */
.catalog-multiselect__list{
  padding:10px;
}
.catalog-multiselect__option{
  margin:0;
  padding:0;
}
.catalog-multiselect__row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 10px;
  border-radius:12px;
  cursor:pointer;
  user-select:none;
  color:inherit;
  transition:background .15s ease, color .15s ease;
}
.catalog-multiselect__row:hover,
.catalog-multiselect__row:focus-within{
  background:rgba(217,36,54,.12);
}
.catalog-multiselect__row input[type="checkbox"]{
  width:18px;
  height:18px;
  accent-color: var(--accent);
  flex:0 0 auto;
}
.catalog-multiselect__row span{
  flex:1;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Фільтри: назви категорій не обрізати — перенос на 2 рядки */
.filters .catalog-multiselect__row{
  align-items:flex-start;
}
.filters .catalog-multiselect__row span{
  white-space:normal;
  overflow:visible;
  text-overflow:unset;
  line-height:1.25;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

/* Фільтри: кнопки дій (показати/скинути) */
.filters__actions{
  display:grid;
  gap:10px;
}
.filters__actions .button{
  width:100%;
}
/* Фільтри: "Скинути фільтр" — тонка обводка */
.filters__actions .filters-reset{
  border:1px solid rgba(31,42,48,.22);
}
.filters__actions .filters-reset:hover{
  border-color:rgba(31,42,48,.3);
}

textarea.input{min-height:130px; resize:vertical}
.input:focus{
  border-color:rgba(142,153,159,.95);
  box-shadow:0 0 0 4px rgba(31,42,48,.12), 0 0 30px rgba(31,42,48,.1);
  background:rgba(255,255,255,.04);
}

/* поля вводу в світлій темі: ледь помітна, але читабельна обводка */
body[data-theme="light"] .input,
body:not([data-theme]) .input{
  border:1px solid rgba(31,42,48,.28);
  background:#ffffff;
  color:#1f2a30;
}
body[data-theme="light"] .input::placeholder,
body:not([data-theme]) .input::placeholder{
  color:rgba(142,149,155,.9);
}
body[data-theme="light"] .input:focus,
body:not([data-theme]) .input:focus{
  border-color:#4e5b61;
  box-shadow:0 0 0 3px rgba(31,42,48,.16);
  background:#ffffff;
}
.input::placeholder{color:#8d98a3}
label.label{
  display:grid;
  gap:8px;
  color:#dfe5eb;
  font-weight:600;
}
.label-group{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
.checkbox{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--muted);
}
.checkbox input{accent-color:var(--accent)}
.notice,.seo-box{
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:var(--muted);
  line-height:1.6;
}
.notice a{color:#fff}
.notice--success{
  border-color:rgba(38,194,129,.24);
  background:rgba(38,194,129,.12);
  color:#cff7e6;
}
body[data-theme="light"] .notice,
body:not([data-theme]) .notice{
  color:#1f2a30;
  border-color:rgba(31,42,48,.12);
  background:rgba(245,247,248,.92);
}
body[data-theme="light"] .notice a,
body:not([data-theme]) .notice a{
  color:#b91c1c;
}
body[data-theme="light"] .notice--success,
body:not([data-theme]) .notice--success{
  color:#0d3d26;
  border-color:rgba(25,135,84,.38);
  background:rgba(209,237,220,.98);
}
body[data-theme="light"] .notice--error,
body:not([data-theme]) .notice--error{
  color:#7f1d1d;
  border-color:rgba(185,28,28,.35);
  background:rgba(254,226,226,.98);
}
.page-hero{
  padding:100px 0 34px;
}
.breadcrumbs{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:16px;
  color:var(--muted-2);
  font-size:14px;
}
.breadcrumbs a{color:var(--muted-2)}

body[data-theme="light"] .breadcrumbs,
body[data-theme="light"] .breadcrumbs a,
body:not([data-theme]) .breadcrumbs,
body:not([data-theme]) .breadcrumbs a{
  color:#1f2a30;
}
.page-hero__box{
  padding:28px;
}
.page-title{font-size:clamp(34px, 5vw, 62px)}
.page-title.page-title--case{
  font-size:clamp(28px, 4.2vw, 52px);
  line-height:1.12;
}
.page-hero--category .page-title{
  font-size:clamp(22px, 3.4vw, 36px);
  line-height:1.12;
}
.section--catalog{padding-top:36px}
/* прибираємо зайвий повітряний проміжок між хедером каталогу і фільтрами */
.page-hero + .section--catalog{
  margin-top:-32px;
}

.error-page{
  padding:56px 0 72px;
  min-height:38vh;
}
.error-page__inner{
  max-width:560px;
  margin:0 auto;
  text-align:center;
}
.error-page__code{
  display:inline-block;
  margin:0 0 16px;
  font-size:clamp(52px, 12vw, 88px);
  font-weight:800;
  line-height:1;
  letter-spacing:.04em;
  color:rgba(217,36,54,.95);
  text-shadow:0 12px 40px rgba(217,36,54,.18);
}
.error-page__title{
  margin:0 0 14px;
  font-size:clamp(22px, 3.5vw, 30px);
  letter-spacing:.02em;
}
.error-page__text{
  margin:0 0 20px;
  color:var(--muted);
  line-height:1.65;
}
.error-page__path{
  margin:-8px 0 24px;
  font-size:13px;
  color:var(--muted-2);
}
.error-page__path code{
  display:inline-block;
  max-width:100%;
  padding:6px 10px;
  border-radius:10px;
  word-break:break-all;
  font-size:12px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
}
body[data-theme="light"] .error-page__path code{
  background:rgba(31,42,48,.05);
  border-color:rgba(31,42,48,.1);
  color:#475569;
}
.error-page__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
}
.error-page--500 .error-page__code{
  color:rgba(148,163,184,.95);
  text-shadow:0 12px 32px rgba(15,23,42,.15);
}

.catalog-layout{
  grid-template-columns:320px minmax(0, 1fr);
  align-items:start;
}
.filters{
  position:sticky;
  --filters-top:118px;
  top:var(--filters-top);
  padding:24px;
  /* Важливо: overflow має бути visible, щоб випадаючі списки (sorting/size) не обрізались */
  overflow:visible;
}
.filters__body{
  /* Скролимо тільки тіло фільтрів — dropdown має з’являтися поверх */
  max-height:calc(100vh - var(--filters-top) - 24px - 64px);
  overflow:auto;
  /* Сховати скролбар, але залишити прокрутку */
  scrollbar-width:none;
  -ms-overflow-style:none;
  /* Не “залипаємо” на скролі всередині фільтрів на мобільних */
  overscroll-behavior:auto;
  padding-right:4px;
  /* Дати місце під тінь CTA-кнопки внизу (інакше її обрізає overflow:auto) */
  padding-bottom:18px;
  /* не показувати горизонтальний скрол в фільтрах */
  overflow-x:hidden;
}
.filters__body::-webkit-scrollbar{width:0;height:0}

/* ПК: коли відкритий dropdown в фільтрах — не обрізати його скрол-контейнером */
.filters__body:has(.catalog-sort-select__trigger[aria-expanded="true"]),
.filters__body:has(.catalog-multiselect__trigger[aria-expanded="true"]){
  overflow:visible;
  overflow-x:visible;
}
.filters__form{
  display:grid;
  gap:16px;
}
/* Каталог: CTA-кнопка у фільтрах без тіні */
.filters__form > .button[type="submit"]{
  box-shadow:none !important;
}
.filters__form > .button[type="submit"]:hover{
  box-shadow:none !important;
}
/* Каталог: і "Скинути фільтр" теж без тіні */
.filters__actions .button{
  box-shadow:none !important;
}
.filters__actions .button:hover{
  box-shadow:none !important;
}
.catalog-content{display:grid; gap:18px}
.catalog-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-width:0;
  padding:18px 22px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.035);
}
.catalog-topbar__info{
  font-size:15px;
  color:var(--muted);
  min-width:0;
}
.catalog-topbar__info strong{color:var(--text)}
.catalog-topbar__range{
  font-weight:600;
  color:var(--muted-2);
  white-space:nowrap;
}
.catalog-pagination{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:8px 0 4px;
}
.catalog-pagination__list{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin:0;
  padding:0;
  list-style:none;
}
.catalog-pagination__list li{
  display:inline-flex;
  align-items:center;
}
.catalog-pagination__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:40px;
  min-height:40px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--surface-2);
  color:var(--text);
  font-size:14px;
  font-weight:700;
  text-decoration:none;
  transition:border-color .2s ease, background .2s ease, color .2s ease;
}
.catalog-pagination__link:hover{
  border-color:rgba(219,0,50,.35);
  color:var(--text);
}
.catalog-pagination__link--nav{
  min-width:auto;
  padding:0 16px;
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:.06em;
}
.catalog-pagination__current{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:40px;
  min-height:40px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid rgba(219,0,50,.45);
  background:rgba(219,0,50,.1);
  color:var(--accent);
  font-size:14px;
  font-weight:800;
}
.catalog-pagination__muted{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:0 12px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--muted-2);
  opacity:.65;
}
.catalog-pagination__ellipsis{
  padding:0 4px;
  color:var(--muted-2);
  font-weight:700;
}
.catalog-pagination__meta{
  margin:0;
  font-size:13px;
  color:var(--muted);
}
.quick-links{
  min-width:0;
  max-width:100%;
}

/* Mobile/tablet: categories dropdown instead of quick links row */
.catalog-topbar__category{display:none}
@media (max-width: 1120px){
  .catalog-topbar{
    flex-wrap:wrap;
    align-items:flex-start;
  }
  .catalog-topbar__category{
    display:block;
    width:100%;
  }
  .catalog-topbar__category .catalog-sort-select,
  .catalog-topbar__category .catalog-sort-select__trigger{
    width:100%;
  }
  .quick-links{
    display:none !important;
  }
}

/* ~980px: topbar must not widen the page */
@media (max-width: 980px){
  .catalog-topbar{
    flex-wrap:wrap;
    align-items:flex-start;
    padding:12px 14px;
  }
  .quick-links{
    flex:1 1 100%;
  }
  .catalog-topbar__info{
    font-size:13px;
    line-height:1.35;
  }
  .catalog-topbar__range{
    display:none;
  }
}

/* Каталог (не ПК): швидкі категорії компактні, без “пігулок”, з переносами */
@media (max-width: 1095px){
  .quick-links{
    flex-wrap:wrap;
    overflow:visible;
    padding-bottom:0;
    margin-bottom:0;
    gap:8px 10px;
    scroll-snap-type:none;
  }
  .quick-links a{
    padding:0;
    border:none;
    background:transparent;
    border-radius:0;
    box-shadow:none;
    font-size:11px;
    font-weight:800;
    letter-spacing:.05em;
    text-transform:uppercase;
    white-space:normal;
    line-height:1.2;
    color:var(--text);
  }
  .quick-links a:hover{
    border-color:transparent;
    box-shadow:none;
    color:var(--accent);
  }
}
.quick-links a{
  padding:10px 14px;
  border-radius:999px;
  background:var(--surface-2);
  border:1px solid var(--line);
  color:var(--text);
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  white-space:nowrap;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.quick-links a:hover{
  border-color:rgba(219,0,50,.42);
  box-shadow:0 0 24px rgba(219,0,50,.1);
}

/* Каталог: планшети/невеликі екрани — робимо швидкі категорії компактними в один ряд */
@media (max-width: 980px){
  .quick-links{
    flex-wrap:wrap;
    overflow:visible;
    -webkit-overflow-scrolling:auto;
    gap:8px 10px;
    padding-bottom:0;
    margin-bottom:0;
    scroll-snap-type:none;
  }
  .quick-links a{
    flex:0 0 auto;
    scroll-snap-align:start;
    padding:8px 10px;
    font-size:12px;
    border-radius:12px; /* без “кружечків/пігулок” */
    letter-spacing:.06em;
  }
  .quick-links::-webkit-scrollbar{height:0}
  .quick-links{scrollbar-width:none}
}

/* Каталог: мобільний вигляд швидких категорій — компактний, зі скролом в ряд */
@media (max-width: 760px){
  .quick-links{
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    gap:10px;
    padding-bottom:8px;
    margin-bottom:-8px;
    scroll-snap-type:x proximity;
  }
  .quick-links a{
    flex:0 0 auto;
    scroll-snap-align:start;
    padding:8px 12px;
    font-size:12px;
  }
  .quick-links::-webkit-scrollbar{height:0}
  .quick-links{scrollbar-width:none}
}
.detail-card{
  padding:28px;
  align-items:start;
}
.detail-card__image{
  min-height:420px;
  display:grid;
  place-items:center;
  padding:30px;
}
.detail-card__image img{max-height:300px; object-fit:contain}
.detail-card__content{
  display:grid;
  gap:18px;
}
.detail-title{font-size:clamp(22px, 2.9vw, 38px)}
.detail-title.is-long{
  font-size:clamp(20px, 2.4vw, 32px);
  line-height:1.12;
}
.detail-sku{
  color:var(--muted);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:13px;
}
.detail-actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}
.empty-state{
  padding:34px;
  border-radius:22px;
  border:1px dashed rgba(255,255,255,.18);
  background:rgba(255,255,255,.02);
}
.empty-state--wide{
  grid-column:1/-1;
}
.empty-state h3{margin-bottom:8px}
.empty-state p{
  margin:0;
  color:var(--muted);
  max-width:44ch;
  line-height:1.65;
}
.empty-state__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin-top:20px;
}
body[data-theme="light"] .empty-state,
body:not([data-theme]) .empty-state{
  border-color:rgba(31,42,48,.16);
  background:rgba(255,255,255,.94);
  box-shadow:var(--shadow-soft);
}
body[data-theme="light"] .empty-state p,
body:not([data-theme]) .empty-state p{
  color:#4e5b61;
}
.footer__grid{gap:40px}
.footer h3{
  font-size:14px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#fff;
  margin-bottom:18px;
}
.footer__text{max-width:480px}
.footer .list{
  display:grid;
  gap:10px;
}
.footer .list a{color:#fff}
.footer .list a:hover{color:#111}
.footer-contacts{
  display:grid;
  gap:16px;
}
.footer-contacts__block{
  display:grid;
  gap:4px;
  font-size:14px;
}
.footer-contacts__block strong{
  font-weight:700;
  color:#fff;
}
.footer-contacts__block a,
.footer-contacts__block span{
  color:#fff;
}

@keyframes heroZoom{
  from{transform:scale(1)}
  to{transform:scale(1.08)}
}
@keyframes fadeSlideUp{
  from{opacity:0; transform:translateY(28px)}
  to{opacity:1; transform:translateY(0)}
}

/* Загальна анімація появи блоків при скролі */
[data-reveal]{
  opacity:0;
  transform:translateY(18px);
  transition:
    opacity .7s cubic-bezier(.22,1,.36,1),
    transform .7s cubic-bezier(.22,1,.36,1);
  will-change:opacity, transform;
}
[data-reveal].is-revealed{
  opacity:1;
  transform:translateY(0);
}
[data-reveal="subtle"]{
  transform:translateY(12px);
  transition-duration:.6s;
}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{
    opacity:1;
    transform:none;
    transition:none;
  }
}

@media (max-width: 1120px){
  .grid-4,.products-grid,.products-grid--home{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .about-points{grid-template-columns:1fr}
  .catalog-layout,.detail-card,.about-grid,.cta__grid{grid-template-columns:1fr}
  .filters{position:static}
  .topbar{display:none}
  /* Один стовпчик: текст і форма на всю ширину — без вузького центрованого блоку 520px */
  .cta__content{
    max-width:100%;
    margin:0;
    width:100%;
    align-self:stretch;
    justify-self:stretch;
  }
  .cta__content .section__text{
    max-width:100%;
  }
}
@media (max-width: 760px){
  .container{width:min(var(--max), calc(100% - 40px))}
  .navbar{padding:14px 0; flex-wrap:wrap}
  .nav__links{width:100%; justify-content:space-between; gap:10px}
  .nav__links a{font-size:12px}
  .hide-mobile{display:none}
  .hero__title{font-size:clamp(34px, 12vw, 56px)}
  .lead{font-size:16px}
  .hero-stats{grid-template-columns:1fr}
  .hero__actions,.product-card__footer,.catalog-topbar{flex-direction:column; align-items:stretch}
  .products-grid:not(.products-grid--catalog):not(.products-grid--home),.grid-4{grid-template-columns:1fr}
  .section{padding:76px 0}
  .cta,.detail-card,.page-hero__box,.filters{padding:20px}
  .product-card__body{padding:18px}
  .label-group{grid-template-columns:1fr}
  .catalog-mobile-tools{display:block; margin-bottom:14px}
  .cta,
  .page-hero__box,
  .detail-card,
  .filters{
    padding-left:18px;
    padding-right:18px;
  }
  .cta__content,
  .cta__content .section__text,
  .cta__content .section__title{
    padding-left:2px;
    padding-right:2px;
  }
  .hero__shell{
    padding-left:0;
    padding-right:0;
  }
  .hero-stats,
  .hero-badges{
    min-width:0;
    margin-left:0;
    margin-right:0;
  }
  .stat,
  .badge{
    min-width:0;
  }
}


.nav-actions{display:flex;align-items:center;gap:12px}

.cart-pill{
  display:inline-flex;align-items:center;gap:8px;
  min-height:46px;padding:0 18px;border-radius:999px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(31,42,48,.28);
  box-shadow:0 1px 0 rgba(255,255,255,.85) inset;
  color:var(--text);font-weight:700;text-transform:uppercase;font-size:12px;letter-spacing:.08em;
}
.cart-pill > span:not(.cart-pill__consult-icon):not(.cart-pill__consult-text){
  display:inline-flex;align-items:center;justify-content:center;
  min-width:24px;height:24px;padding:0 6px;border-radius:999px;
  color:#fff;
  background:var(--accent);box-shadow:0 0 18px rgba(219,0,50,.28);
}
/* a:hover — чорний; кнопки .button перекривають; кошик — var(--text) */
.cart-pill,
.cart-icon{
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease, color .3s ease;
}
.cart-pill:hover,
.cart-icon:hover{
  color:var(--text);
  transform:translateY(-2px);
}
.cart-pill:hover{
  border-color:rgba(217,36,54,.45);
  background:rgba(255,255,255,.92);
  box-shadow:0 12px 28px rgba(31,42,48,.12);
}
body[data-theme="dark"] .cart-pill{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset;
}
body[data-theme="dark"] .cart-pill:hover{
  border-color:rgba(248,113,113,.55);
  background:rgba(255,255,255,.12);
  box-shadow:0 12px 28px rgba(0,0,0,.25);
}

/* Хедер: CTA «Замовити консультацію» — акцент, іконка, hover */
.cart-pill--consult-cta{
  position:relative;
  isolation:isolate;
  gap:10px;
  padding:0 17px 0 13px;
  border:1px solid rgba(255,255,255,.42);
  background:linear-gradient(142deg, #fb7185 0%, var(--accent) 32%, #b91c1c 72%, #7f1d1d 100%);
  color:#fff;
  box-shadow:
    0 1px 0 rgba(255,255,255,.38) inset,
    0 6px 20px rgba(217,36,54,.42);
  text-shadow:0 1px 0 rgba(0,0,0,.18);
  overflow:hidden;
  transition:
    transform .42s cubic-bezier(.22,1,.36,1),
    box-shadow .42s ease,
    border-color .42s ease,
    filter .42s ease;
}
.cart-pill--consult-cta::before{
  content:"";
  position:absolute;
  inset:-50%;
  background:radial-gradient(circle 45% at 28% 18%, rgba(255,255,255,.38) 0, transparent 62%);
  opacity:.55;
  pointer-events:none;
  z-index:0;
  transition:opacity .45s ease, transform .55s cubic-bezier(.22,1,.36,1);
}
.cart-pill--consult-cta > *{
  position:relative;
  z-index:1;
}
.cart-pill__consult-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:50%;
  flex-shrink:0;
  background:rgba(255,255,255,.92);
  box-shadow:
    0 1px 0 rgba(255,255,255,.65) inset,
    0 2px 10px rgba(0,0,0,.18);
  /* Іконка завжди червона (навіть на hover) */
  color:var(--accent);
  transition:transform .5s cubic-bezier(.34,1.56,.64,1), box-shadow .4s ease;
}
.cart-pill__consult-icon svg{
  display:block;
  width:17px;
  height:17px;
}
.cart-pill__consult-text{
  letter-spacing:.07em;
}
.cart-pill--consult-cta:hover{
  color:#fff;
  transform:translateY(-4px) scale(1.03);
  border-color:rgba(255,255,255,.65);
  filter:brightness(1.06) saturate(1.05);
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 14px 32px rgba(217,36,54,.55),
    0 0 36px rgba(254,202,202,.4);
}
.cart-pill--consult-cta:hover::before{
  opacity:.9;
  transform:translate(6%, 5%) scale(1.05);
}
.cart-pill--consult-cta:hover .cart-pill__consult-icon{
  transform:scale(1.12) rotate(-10deg);
  background:rgba(255,255,255,.96);
  color:var(--accent);
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 6px 18px rgba(0,0,0,.22);
}
.cart-pill--consult-cta:focus-visible{
  outline:2px solid rgba(255,255,255,.95);
  outline-offset:3px;
}
body[data-theme="dark"] .cart-pill--consult-cta,
body[data-theme="dark"] .cart-pill--consult-cta:hover{
  color:#fff;
}
@media (min-width: 1096px) and (max-width: 1260px){
  .cart-pill--consult-cta{
    padding:0 13px 0 11px;
    gap:8px;
    font-size:11px;
    letter-spacing:.06em;
  }
  .cart-pill__consult-icon{
    width:28px;
    height:28px;
  }
  .cart-pill__consult-icon svg{
    width:15px;
    height:15px;
  }
}
@media (prefers-reduced-motion: reduce){
  .cart-pill--consult-cta,
  .cart-pill--consult-cta::before,
  .cart-pill__consult-icon{
    transition-duration:.01ms !important;
  }
  .cart-pill--consult-cta:hover{
    transform:none;
    filter:none;
  }
  .cart-pill--consult-cta:hover::before{
    transform:none;
  }
  .cart-pill--consult-cta:hover .cart-pill__consult-icon{
    transform:none;
  }
}

.cart-icon:hover{
  border-color:rgba(217,36,54,.32);
  box-shadow:0 14px 30px rgba(31,42,48,.14);
}
.hero__actions--center,.product-card__actions--center{justify-content:center}
.product-card__actions form,.detail-actions form{margin:0}
.products-grid--catalog{grid-template-columns:repeat(3,minmax(0,1fr))}
.products-grid--home{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (min-width: 1320px){
  .products-grid--home{
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:28px 24px;
  }
}
.product-card__footer{gap:14px}
.product-card__footer,.cart-item__aside{display:flex;flex-direction:column}
.product-card__actions{justify-content:center}
.about{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);
  gap:32px 40px;
  align-items:stretch;
}
.about__media{
  min-width:0;
  max-width:100%;
  display:flex;
  flex-direction:column;
  align-self:stretch;
  background:var(--bg);
  border-radius:24px;
  overflow:hidden;
}
.about__media img{
  display:block;
  flex-shrink:0;
  width:100%;
  max-width:100%;
  height:auto;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:center;
  border-radius:inherit;
  border:none;
  box-shadow:none;
  background:var(--bg);
}
body[data-theme="light"] .about__media,
body[data-theme="light"] .about__media img,
body:not([data-theme]) .about__media,
body:not([data-theme]) .about__media img{
  background:#f7f7f7;
}
.about__media-spacer{
  flex:1 1 auto;
  min-height:0;
  margin:0;
  padding:0;
  border:none;
  background:transparent;
  box-shadow:none;
}
.about__body{
  align-self:start;
  padding-top:2px;
}
.section__title--about{
  font-size:clamp(20px,2.5vw,34px);
  line-height:1.06;
  max-width:22em;
  margin-bottom:18px;
}
.about__intro{
  max-width:640px;
  margin:0;
  color:var(--muted);
  font-size:17px;
  line-height:1.7;
}
.about__rule{
  display:block;
  width:100%;
  height:1px;
  margin:26px 0 22px;
  border:none;
  background:var(--line);
}
.about-formats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  align-items:stretch;
  width:100%;
  max-width:100%;
}
.about-format{
  display:flex;
  flex-direction:column;
  gap:14px;
  height:100%;
  min-height:100%;
  padding:22px 20px;
  border-radius:20px;
  border:1px solid var(--line);
  background:var(--surface);
  box-shadow:var(--shadow-soft);
}
body[data-theme="dark"] .about-format{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.1);
  box-shadow:none;
}
.about-format__title{
  margin:0;
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:14px;
  font-weight:800;
  letter-spacing:.06em;
  line-height:1.3;
  text-transform:uppercase;
  color:var(--text);
}
.about-format__list{
  margin:0;
  padding-left:1.15em;
  color:var(--muted);
  font-size:15px;
  line-height:1.65;
  list-style:disc;
}
.about-format__list li{
  margin:0 0 6px;
  padding-left:2px;
}
.about-format__list li:last-child{
  margin-bottom:0;
}
.about-format__br-desktop{
  display:none;
}
@media (min-width:721px){
  .about-format__br-desktop{
    display:block;
  }
}
.about-format__cta{
  margin-top:auto;
  padding-top:6px;
}
@media (min-width:1025px){
  .about{
    gap:36px 44px;
  }
  /* Фото на всю висоту рядка (як блок праворуч), без порожньої смуги під знімком */
  .about__media{
    max-width:100%;
    margin-inline-end:0;
    min-height:0;
    align-self:stretch;
  }
  .about__media-spacer{
    display:none;
  }
  .about__media img{
    flex:1 1 0;
    flex-shrink:1;
    min-height:260px;
    width:100%;
    height:auto;
    max-height:none;
    aspect-ratio:unset;
    object-fit:cover;
    object-position:center;
  }
  .about__intro{
    font-size:18px;
    line-height:1.75;
    max-width:42rem;
  }
  .about__rule{
    margin:30px 0 27px;
  }
  .about-formats{
    gap:22px;
  }
  .about-format{
    padding:26px 22px;
    gap:16px;
  }
  .about-format__list{
    font-size:15.5px;
    line-height:1.7;
  }
}
/* На середніх екранах (~700px) 1 колонка виглядає “розтягнуто”. Перемикаємось на 1 колонку тільки на вузьких. */
@media (max-width: 640px){
  .about-formats{
    grid-template-columns:1fr;
  }
}
.cart-layout{display:grid;grid-template-columns:1.5fr .9fr;gap:18px;align-items:start}
.cart-items{display:grid;gap:16px;padding-bottom:8px}
.cart-item{display:grid;grid-template-columns:96px 1fr minmax(112px,148px);gap:12px 14px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);align-items:center;overflow:visible}
.cart-item__image img{width:100%;height:88px;object-fit:contain;border-radius:12px;background:rgba(255,255,255,.04)}
.cart-item__price{font-size:19px;font-weight:800;color:var(--text)}
.cart-summary{padding:22px;position:sticky;top:110px}
.summary-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.detail-actions{display:flex;flex-wrap:wrap;gap:14px}
input[type=file].vTextField{padding:8px}
@media (max-width: 1024px){
  /* 1024–861px: каталог ще виглядає краще в 3 колонки (інакше картки стають “занадто великими”) */
  .products-grid--catalog{grid-template-columns:repeat(3,minmax(0,1fr))}
  .products-grid--home{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cart-layout{grid-template-columns:1fr}
  .cart-summary{position:static}
  .about{grid-template-columns:1fr}
}

/* ~700px: блоки "формати співпраці" виглядають занадто розтягнутими — звужуємо і центруємо */
@media (max-width: 760px){
  .about-formats{
    width:min(100%, 680px);
    margin-left:auto;
    margin-right:auto;
  }
  .about-format{
    padding:18px 16px;
    border-radius:18px;
  }
  .about-format__list{
    font-size:14px;
    line-height:1.6;
  }
}
@media (max-width: 720px){
  .products-grid--catalog,.products-grid--home{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cart-item{grid-template-columns:1fr}
  .nav-actions{gap:8px}
  .cart-pill{min-height:40px;padding:0 12px}
}


.catalog-mobile-tools{display:none}
.filters-toggle__icon{font-size:14px; opacity:.8}
.filters__body{display:block}
@media (min-width: 761px){
  .catalog-mobile-tools{display:none !important}
  .filters{max-height:none !important}
  .filters .filters__body{display:block !important; padding-top:0}
}
@media (max-width: 420px){
  .container{width:min(var(--max), calc(100% - 28px))}
  .hero-badges{grid-template-columns:1fr 1fr; gap:8px}
  .hero-badges .badge{font-size:12px; padding:10px}
}

/* Catalog responsiveness (requested):
   - tablets: 3 cards per row + filters on top
   - phones: 2 cards per row + filters on top
   Also: prevent horizontal overflow from grid/cards. */
@media (max-width: 1120px){
  .section--catalog .catalog-layout{grid-template-columns:1fr}
  .section--catalog .filters{position:static; top:auto}
  .section--catalog .products-grid--catalog{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    width:100%;
    min-width:0;
  }
  .section--catalog .products-grid--catalog .product-card{min-width:0}
}
@media (max-width: 640px){
  .section--catalog .products-grid--catalog{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:14px 12px;
  }
}


body{
  overflow-x:hidden;
}
.container{
  padding-left: 0;
  padding-right: 0;
}
.nav-panel{
  display:flex;
  align-items:center;
  gap:18px;
  margin-left:auto;
}

/* Десктоп-хедер: логотип | меню по центру | дії справа */
@media (min-width: 1096px){
  .navbar{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    column-gap:18px;
  }
  /* nav-panel потрібен для мобільного; на десктопі "розплющуємо" його вміст в 3 колонки */
  .nav-panel{
    display:contents;
  }
  .logo{grid-column:1}
  .nav__links{
    grid-column:2;
    justify-content:center;
    flex-wrap:nowrap;
    min-width:0;
  }
  .nav-actions{
    grid-column:3;
    justify-content:flex-end;
    flex-wrap:nowrap;
  }
}
.burger{
  display:none;
  width:48px;
  height:48px;
  border-radius:14px;
  border:1px solid rgba(31,42,48,.14);
  background:rgba(255,255,255,.92);
  color:var(--text);
  box-shadow:0 10px 24px rgba(0,0,0,.16);
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
}
.burger span{
  width:20px;
  height:2px;
  background:currentColor;
  transition:transform .3s ease, opacity .3s ease;
}
.burger.is-active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.is-active span:nth-child(2){opacity:0}
.burger.is-active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.catalog-layout{
  grid-template-columns:minmax(260px, 300px) minmax(0,1fr);
  align-items:start;
}
.filters{
  position:sticky;
  --filters-top:110px;
  top:var(--filters-top);
}

/* Важливо: цей блок нижче по файлу перекривав адаптив і ламав каталог на ~900–1100px */
@media (max-width: 1120px){
  .catalog-layout{
    grid-template-columns:1fr;
  }
  .filters{
    position:static;
    top:auto;
  }
}
.detail-main-image{
  display:block;
  width:100%;
  border:0;
  padding:0;
  background:none;
  cursor:zoom-in;
}
.detail-main-image img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:contain;
  background:#fff;
}

.detail-card__image .product-card__flags{
  position:absolute;
  top:20px;
  right:20px;
  z-index:3;
  display:flex;
  gap:8px;
  pointer-events:none;
}
.detail-card__image .product-card__flags .flag-badge{
  pointer-events:auto;
  opacity:.98;
}
.detail-thumbs{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:12px;
  margin-top:14px;
}

/* Мобільні: мініатюри можуть не влазити — робимо компактніше */
@media (max-width: 760px){
  .detail-thumbs{
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:10px;
  }
  .detail-thumb{
    border-radius:12px;
  }
}

@media (max-width: 420px){
  .detail-thumbs{
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:10px;
  }
}

/* Desktop: основне фото більше, мініатюри менші та нижче */
@media (min-width: 960px){
  .detail-card{
    grid-template-columns:minmax(0, 1.25fr) minmax(0, .75fr);
  }
  .detail-card__image{
    min-height:540px;
    padding:26px;
    place-items:start center;
  }
  .detail-card__image img{max-height:460px}
  .detail-main-image img{
    aspect-ratio:auto;
    height:min(460px, 58vh);
  }
  .detail-thumbs{
    width:80%;
    margin:26px auto 0;
    gap:10px;
  }
}
.detail-thumb{
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  overflow:hidden;
  background:rgba(255,255,255,.04);
  padding:0;
  cursor:pointer;
}
.detail-thumb img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
}
.detail-thumb.is-active{
  border-color:rgba(219,0,50,.7);
  box-shadow:0 0 0 2px rgba(219,0,50,.15);
}
.lightbox{
  position:fixed;
  inset:0;
  z-index:300;
  background:rgba(4,6,10,.92);
  display:grid;
  place-items:center;
  padding:24px;
}
.lightbox[hidden]{display:none}
.lightbox__figure{
  margin:0;
  max-width:min(1200px, calc(100vw - 120px));
  max-height:calc(100vh - 100px);
}
.lightbox__figure img{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:calc(100vh - 100px);
  border-radius:18px;
}
.lightbox__close,
.lightbox__nav{
  position:absolute;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  margin:0;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(12,14,18,.78);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:#fff;
  width:52px;
  height:52px;
  border-radius:999px;
  cursor:pointer;
  box-shadow:0 4px 18px rgba(0,0,0,.4);
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.lightbox__close:hover,
.lightbox__close:focus-visible,
.lightbox__nav:hover,
.lightbox__nav:focus-visible{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.28);
  outline:none;
}
.lightbox__close:active,
.lightbox__nav:active{
  transform:scale(.96);
}
.lightbox__nav--prev:active,
.lightbox__nav--next:active{
  transform:translateY(-50%) scale(.96);
}
.lightbox__close:focus-visible,
.lightbox__nav:focus-visible{
  box-shadow:0 0 0 2px rgba(255,255,255,.35);
}
.lightbox__btn-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  pointer-events:none;
}
.lightbox__btn-icon svg{
  display:block;
  flex-shrink:0;
}
.lightbox__close{top:20px; right:20px}
.lightbox__close .lightbox__btn-icon svg{
  width:22px;
  height:22px;
}
.lightbox__nav--prev{left:24px; top:50%; transform:translateY(-50%)}
.lightbox__nav--next{right:24px; top:50%; transform:translateY(-50%)}
body.lightbox-open{overflow:hidden}

/* Модалка консультації (замість скролу до #form) */
body.consult-modal-open{
  overflow:hidden;
}
.toast{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%) translateY(10px);
  z-index:260;
  width:min(calc(100% - 32px), 560px);
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(31,42,48,.14);
  background:linear-gradient(135deg, #fb7185 0%, var(--accent) 42%, #b91c1c 100%);
  box-shadow:0 18px 44px rgba(0,0,0,.26), 0 10px 30px rgba(217,36,54,.22);
  color:#fff;
  font-weight:800;
  text-align:center;
  font-size:15px;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.toast.toast--success{
  border-color:rgba(22,163,74,.35);
  background:linear-gradient(135deg, #22c55e 0%, #16a34a 55%, #15803d 100%);
  box-shadow:0 18px 44px rgba(0,0,0,.18), 0 10px 30px rgba(22,163,74,.22);
}
.toast.is-open{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
.toast[hidden]{display:none}
body[data-theme="dark"] .toast{
  border-color:rgba(255,255,255,.18);
  box-shadow:0 18px 44px rgba(0,0,0,.45);
}
.consult-modal{
  position:fixed;
  inset:0;
  z-index:120;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:clamp(18px, 6vh, 56px) 18px 18px;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  /* Скрол якщо контент не влізає — але не всередині картки */
  overflow:auto;
}
.consult-modal[hidden]{display:none}
.consult-modal__dialog{
  width:min(720px, 100%);
  max-height:none;
  overflow:visible;
  border-radius:22px;
  border:1px solid rgba(31,42,48,.14);
  background:#fff;
  box-shadow:0 30px 70px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.25);
  transform:translateY(18px) scale(.98);
  opacity:0;
  transition:transform .42s cubic-bezier(.22,1,.36,1), opacity .32s ease;
  position:relative;
}
.consult-modal.is-open .consult-modal__dialog{
  transform:translateY(0) scale(1);
  opacity:1;
}
.consult-modal__close{
  position:absolute;
  top:14px;
  right:14px;
  z-index:5;
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(31,42,48,.16);
  background:rgba(17,24,39,.04);
  color:#111;
  cursor:pointer;
  padding:0;
  display:grid;
  place-items:center;
  transition:background .2s ease,border-color .2s ease,transform .15s ease;
}
.consult-modal__close:hover,
.consult-modal__close:focus-visible{
  background:rgba(17,24,39,.08);
  border-color:rgba(31,42,48,.26);
  outline:none;
}
.consult-modal__close:active{transform:scale(.96)}
.consult-modal__content{
  padding:22px 22px 20px;
  color:#111;
}
.consult-modal__content .cta__grid{
  display:grid;
  grid-template-columns:1fr;
}
.consult-modal__content .cta__content{
  padding-right:0;
  padding-left:0;
  padding-top:0;
}
.consult-modal__content .form{
  padding-left:0;
  padding-right:0;
}
.consult-modal__content .section__title{
  margin-top:6px;
  font-size:clamp(22px, 2.4vw, 34px);
  line-height:1.12;
}

/* Світла модалка: перевизначаємо кольори тексту/лейблів */
.consult-modal__content .section-kicker{
  color:rgba(31,42,48,.72);
}
.consult-modal__content .section__title{
  color:#111;
}
.consult-modal__content .section__title.is-long{
  font-size:clamp(20px, 2.1vw, 30px);
  line-height:1.16;
}
.consult-modal__content .section__text{
  color:rgba(31,42,48,.7);
}

.consult-modal__close-icon{
  line-height:0;
  display:block;
}
.consult-modal__close-icon svg{
  display:block;
}

@media (prefers-reduced-motion: reduce){
  .consult-modal__dialog{transition-duration:.01ms !important}
  .consult-modal.is-open .consult-modal__dialog{transform:none}
}

@media (max-width: 1095px){
  .topbar{display:none}
  .burger{display:inline-flex}
  .nav-actions--mobile{
    gap:6px;
  }
  .nav-panel{
    position:absolute;
    left:16px;
    right:16px;
    top:calc(100% + 10px);
    display:flex;
    flex-direction:column;
    align-items:stretch;
    padding:18px;
    border-radius:22px;
    border:1px solid rgba(255,255,255,.1);
    background:rgba(8,11,14,.97);
    box-shadow:0 24px 48px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.04);
    margin-left:0;
    z-index:110;
    transform-origin:top center;
    opacity:0;
    visibility:hidden;
    transform:translateY(-16px) scale(.96);
    pointer-events:none;
    transition:
      opacity .4s cubic-bezier(.22,1,.36,1),
      transform .4s cubic-bezier(.22,1,.36,1),
      visibility 0s linear .4s;
  }
  .nav-panel.is-open{
    opacity:1;
    visibility:visible;
    transform:translateY(0) scale(1);
    pointer-events:auto;
    transition:
      opacity .4s cubic-bezier(.22,1,.36,1),
      transform .4s cubic-bezier(.22,1,.36,1),
      visibility 0s;
  }
  .nav-panel .nav__links a{
    opacity:0;
    transform:translateX(-14px);
    transition:opacity .32s ease, transform .32s cubic-bezier(.22,1,.36,1), border-color .28s ease, padding-left .28s ease, color .25s ease;
    padding-bottom:12px;
    border-bottom:1px solid rgba(255,255,255,.07);
    width:100%;
  }
  .nav-panel .nav__links a:hover{
    border-bottom-color:rgba(217,36,54,.5);
    padding-left:8px;
    color:#f8fafc;
  }
  /* темний фон панелі: світліший текст (перекриває #1f2a30 зі світлої теми) */
  body[data-theme="light"] .nav-panel .nav__links a,
  body:not([data-theme]) .nav-panel .nav__links a,
  body[data-theme="dark"] .nav-panel .nav__links a{
    color:rgba(241,245,249,.94);
  }
  body[data-theme="light"] .nav-panel .nav__links a:hover,
  body:not([data-theme]) .nav-panel .nav__links a:hover,
  body[data-theme="dark"] .nav-panel .nav__links a:hover{
    color:#f8fafc;
  }
  body[data-theme="light"] .nav-panel .cart-pill,
  body:not([data-theme]) .nav-panel .cart-pill,
  body[data-theme="dark"] .nav-panel .cart-pill{
    color:rgba(248,250,252,.95);
    border-color:rgba(255,255,255,.22);
    background:rgba(255,255,255,.1);
    box-shadow:none;
  }
  body[data-theme="light"] .nav-panel .cart-pill:hover,
  body:not([data-theme]) .nav-panel .cart-pill:hover,
  body[data-theme="dark"] .nav-panel .cart-pill:hover{
    color:#111;
    border-color:rgba(248,113,113,.45);
    background:rgba(255,255,255,.85);
  }
  body[data-theme="light"] .nav-panel .cart-pill--consult-cta,
  body:not([data-theme]) .nav-panel .cart-pill--consult-cta,
  body[data-theme="dark"] .nav-panel .cart-pill--consult-cta{
    color:#fff;
    text-shadow:0 1px 0 rgba(0,0,0,.18);
    border-color:rgba(255,255,255,.42);
    background:linear-gradient(142deg, #fb7185 0%, var(--accent) 32%, #b91c1c 72%, #7f1d1d 100%);
    box-shadow:
      0 1px 0 rgba(255,255,255,.35) inset,
      0 6px 18px rgba(217,36,54,.4);
  }
  body[data-theme="light"] .nav-panel .cart-pill--consult-cta:hover,
  body:not([data-theme]) .nav-panel .cart-pill--consult-cta:hover,
  body[data-theme="dark"] .nav-panel .cart-pill--consult-cta:hover{
    color:#fff;
    border-color:rgba(255,255,255,.6);
    background:linear-gradient(142deg, #fda4af 0%, #e11d48 38%, #9f1239 100%);
    box-shadow:
      0 1px 0 rgba(255,255,255,.45) inset,
      0 12px 28px rgba(217,36,54,.5);
  }
  .nav-panel.is-open .nav__links a{
    opacity:1;
    transform:translateX(0);
  }
  .nav-panel.is-open .nav__links a:nth-child(1){transition-delay:.05s;}
  .nav-panel.is-open .nav__links a:nth-child(2){transition-delay:.09s;}
  .nav-panel.is-open .nav__links a:nth-child(3){transition-delay:.13s;}
  .nav-panel.is-open .nav__links a:nth-child(4){transition-delay:.17s;}
  .nav-panel.is-open .nav__links a:nth-child(5){transition-delay:.21s;}
  .nav-panel.is-open .nav__links a:nth-child(6){transition-delay:.25s;}
  .nav-panel.is-open .nav__links a:nth-child(7){transition-delay:.29s;}
  .nav-panel.is-open .nav__links a:nth-child(8){transition-delay:.33s;}
  .nav-panel .nav-actions{
    opacity:0;
    transform:translateY(10px);
    transition:opacity .35s ease .15s, transform .35s cubic-bezier(.22,1,.36,1) .15s;
  }
  .nav-panel.is-open .nav-actions{
    opacity:1;
    transform:translateY(0);
  }
  .nav-panel:not(.is-open) .nav__links a,
  .nav-panel:not(.is-open) .nav-actions{
    transition-delay:0s;
    transition-duration:.2s;
  }
  .nav__links{
    width:100%;
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
  }
  .nav-actions{
    width:100%;
    justify-content:space-between;
    flex-wrap:wrap;
  }
  .hide-mobile{display:none}
}

@media (max-width: 760px){
  .container{width:min(var(--max), calc(100% - 32px))}
  .header{overflow:visible}
  .navbar{padding:14px 0; gap:12px; align-items:center}
  .logo img{
    height:46px;
  }
  .nav-panel{left:0; right:0; top:calc(100% + 10px)}
  .hero-content,
  .hero-stats,
  .hero-badges,
  .page-hero__box,
  .cta,
  .about,
  .catalog-layout,
  .detail-card,
  .footer__grid{
    width:100%;
    min-width:0;
  }
  .hero-stats{
    grid-template-columns:1fr;
    gap:12px;
  }
  .stat{
    padding:18px 16px;
  }
  .products-grid:not(.products-grid--home):not(.products-grid--catalog),
  .grid-4{
    grid-template-columns:1fr;
  }
  .products-grid--home{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:14px 12px;
  }
  .catalog-layout,.detail-card,.footer__grid,.about,.cta__grid{
    grid-template-columns:1fr;
    gap:18px;
  }
  .section--catalog .catalog-layout{
    gap:0;
  }
  /* Каталог (мобільний): згорнуті фільтри не займають місця; розгортання з анімацією */
  .section--catalog .filters{
    position:relative;
    top:auto;
    max-height:0;
    min-height:0;
    margin:0;
    padding:0;
    border:none;
    background:transparent;
    box-shadow:none;
    opacity:0;
    overflow:hidden;
    pointer-events:none;
    visibility:hidden;
    transition:
      max-height .52s cubic-bezier(.22,1,.36,1),
      opacity .34s ease,
      padding .34s ease,
      margin .34s ease,
      border-color .34s ease,
      box-shadow .34s ease,
      visibility 0s linear .36s;
  }
  .section--catalog .filters::before{
    opacity:0;
    transition:opacity .25s ease;
  }
  .section--catalog .filters.is-open{
    max-height:min(3400px,200vh);
    opacity:1;
    pointer-events:auto;
    visibility:visible;
    margin:0 0 16px;
    padding:16px 14px 20px;
    border:1px solid var(--line);
    background:var(--surface);
    border-radius:20px;
    box-shadow:0 16px 44px rgba(15,23,42,.1);
    overflow:visible;
    touch-action:pan-y;
    transition:
      max-height .58s cubic-bezier(.22,1,.36,1),
      opacity .4s ease .04s,
      padding .42s ease .04s,
      margin .35s ease,
      visibility 0s;
  }
  .section--catalog .filters.is-open::before{
    opacity:.55;
  }
  .section--catalog .filters .filters__body{
    display:block;
    max-height:none;
    opacity:1;
    padding-top:10px;
    overflow:visible;
  }
  .section--catalog .filters.is-open .section__head{
    animation:filtersPanelReveal .45s cubic-bezier(.22,1,.36,1) .06s both;
  }
  .section--catalog .filters.is-open .filters__form{
    animation:filtersPanelReveal .48s cubic-bezier(.22,1,.36,1) .1s both;
  }
  .filters-toggle{
    width:100%;
  }
  .product-card__footer,
  .hero__actions,
  .product-card__actions{
    flex-direction:column;
    align-items:stretch;
  }
  .detail-thumbs{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
  }
  .lightbox{
    padding:16px;
  }
  .lightbox__figure{
    max-width:calc(100vw - 32px);
  }
  .lightbox__close,
  .lightbox__nav{
    width:46px;
    height:46px;
  }
  .lightbox__close .lightbox__btn-icon svg{
    width:20px;
    height:20px;
  }
  .lightbox__nav .lightbox__btn-icon svg{
    width:22px;
    height:22px;
  }
}

/* Каталог (планшети до 1120px): фільтри зверху, згорнуті за замовчуванням як на мобільному */
@media (min-width: 761px) and (max-width: 1120px){
  .section--catalog .catalog-layout{
    grid-template-columns:1fr;
    gap:0;
  }
  .section--catalog .filters{
    position:relative;
    top:auto;
    max-height:0;
    min-height:0;
    margin:0;
    padding:0;
    border:none;
    background:transparent;
    box-shadow:none;
    opacity:0;
    overflow:hidden;
    pointer-events:none;
    visibility:hidden;
    transition:
      max-height .52s cubic-bezier(.22,1,.36,1),
      opacity .34s ease,
      padding .34s ease,
      margin .34s ease,
      border-color .34s ease,
      box-shadow .34s ease,
      visibility 0s linear .36s;
  }
  .section--catalog .filters::before{
    opacity:0;
    transition:opacity .25s ease;
  }
  .section--catalog .filters.is-open{
    max-height:min(3400px,200vh);
    opacity:1;
    pointer-events:auto;
    visibility:visible;
    margin:0 0 16px;
    padding:16px 14px 20px;
    border:1px solid var(--line);
    background:var(--surface);
    border-radius:20px;
    box-shadow:0 16px 44px rgba(15,23,42,.1);
    overflow:visible;
    transition:
      max-height .58s cubic-bezier(.22,1,.36,1),
      opacity .4s ease .04s,
      padding .42s ease .04s,
      margin .35s ease,
      visibility 0s;
  }
  .section--catalog .filters.is-open::before{
    opacity:.55;
  }
  .section--catalog .filters .filters__body{
    display:block;
    max-height:none;
    opacity:1;
    padding-top:10px;
    /* дозволяємо “проскролити сторінку” коли всередині фільтрів дійшли до краю */
    overscroll-behavior:auto;
  }
  .filters-toggle{
    width:100%;
  }
}

@keyframes filtersPanelReveal{
  from{
    opacity:0;
    transform:translateY(-10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@media (prefers-reduced-motion: reduce){
  .section--catalog .filters,
  .section--catalog .filters.is-open{
    transition-duration:.01ms !important;
    transition-delay:0s !important;
  }
  .section--catalog .filters.is-open .section__head,
  .section--catalog .filters.is-open .filters__form{
    animation:none !important;
  }
}


.product-card__flags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  min-height:22px;
}
.button[disabled],
button[disabled]{
  opacity:.55;
  cursor:not-allowed;
  pointer-events:none;
  box-shadow:none !important;
  filter:grayscale(.1);
}


/* NEW / Хіт / знижка — єдиний компактний стиль (як на фото товару) */
.flag-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:22px;
  padding:4px 9px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  line-height:1.2;
  text-transform:uppercase;
  letter-spacing:.06em;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    0 0 0 1px rgba(31,42,48,.04),
    0 1px 2px rgba(15,23,42,.04),
    0 4px 14px rgba(15,23,42,.08);
  margin:0 4px 4px 0;
}
.flag-badge--sale{
  background:linear-gradient(180deg, var(--accent) 0%, var(--accent) 100%);
  color:#fff;
  border-color:rgba(217,36,54,.35);
}
.flag-badge--hit{
  background:linear-gradient(180deg, #d4a84b 0%, #a16207 100%);
  color:#fffbeb;
  border-color:rgba(217, 119, 6, .42);
  box-shadow:
    0 0 0 1px rgba(31,42,48,.04),
    0 2px 4px rgba(161,98,7,.12),
    0 6px 18px rgba(161,98,7,.16);
}
.flag-badge--new{
  background:linear-gradient(180deg, #3fa38a 0%, #1d6b55 100%);
  color:#ecfdf5;
  border-color:rgba(16, 185, 129, .38);
  box-shadow:
    0 0 0 1px rgba(31,42,48,.04),
    0 2px 4px rgba(29,107,85,.1),
    0 6px 18px rgba(29,107,85,.14);
}
.flag-badge--order{
  background:rgba(255,255,255,.1);
  color:#f3f5f7;
  border-color:rgba(255,255,255,.2);
}
body[data-theme="light"] .detail-card__content .flag-badge--order,
body[data-theme="light"] .products-grid .flag-badge--order,
body:not([data-theme]) .detail-card__content .flag-badge--order,
body:not([data-theme]) .products-grid .flag-badge--order{
  background:rgba(31,42,48,.06);
  color:#4e5b61;
  border-color:rgba(31,42,48,.14);
}
.product-card__flags{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px;}
.detail-price-block{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  width:100%;
}
.detail-price-vat{
  margin:0;
  font-size:13px;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--muted);
  line-height:1.35;
}
.product-card__price-wrap,.detail-price-wrap{display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap;}
.product-card__old-price,.detail-old-price{color:var(--muted); text-decoration:line-through; font-size:14px; font-weight:700;}
.detail-old-price{font-size:18px;}
.qty-stepper{display:inline-flex; align-items:center; gap:8px; padding:4px 6px; border-radius:999px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);}
.qty-stepper__btn{width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06); color:var(--text); font-size:20px; line-height:1; cursor:pointer;}
.qty-stepper__btn:disabled{opacity:.35; cursor:not-allowed;}
.qty-stepper__value{min-width:26px; text-align:center; font-weight:800; color:var(--text); font-size:16px;}
.cart-item__qty-box{display:flex; flex-direction:column; align-items:center; gap:8px;}
.cart-item__qty-label{font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); text-align:center;}
.cart-item__price-wrap{display:flex; flex-direction:column; align-items:flex-end; gap:6px; text-align:right;}
.cart-item__price-note{font-size:12px; color:var(--accent-2); font-weight:700;}
.lightbox__figure{position:relative;}
.lightbox__zoom-controls{position:absolute; top:16px; right:16px; z-index:3; display:flex; gap:8px;}
.lightbox__zoom-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:46px;
  height:42px;
  padding:0 12px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:999px;
  background:rgba(12,15,18,.82);
  color:#fff;
  font-weight:800;
  font-size:15px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
[data-lightbox-image]{transition:transform .22s ease; transform-origin:center center; touch-action:manipulation;}
/* touch behaviour already controlled in dedicated block below */
@media (max-width: 860px){
  /* важливо: 100% - 32px має бути через calc(), інакше правило може ламати ширину */
  .container{width:min(calc(100% - 32px), 1240px);}
  .hero,.section,.page-hero{overflow:hidden;}
  /* Кошик: тіні .card не обрізати (box-shadow виходить за межі блоку) */
  .section:has(.cart-layout){
    overflow:visible;
  }
  .hero [data-aos], .section [data-aos], .page-hero [data-aos]{max-width:100%;}
  .hero__shell,.about,.cta__grid,.catalog-layout,.detail-card{min-width:0;}
  .hero-content,.hero-stats,.hero-badges{width:100%;}
  .hero-stats{grid-template-columns:1fr;}
}
@media (max-width: 760px){
  .lightbox__zoom-controls{
    display:none;
  }
  .cart-item__aside,.cart-item__qty-box,.cart-item__price-wrap{align-items:center;}
  .cart-item__price-wrap{text-align:center;}
  .cart-item__aside > form:last-of-type{justify-content:center;}
}


.cta__content > *{max-width:100%;}
@media (max-width:760px){
  .cta__content, .cta__content *{word-break:normal; overflow-wrap:anywhere;}
}


.product-card h3{
  margin:0;
  min-height:3.2em;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.product-card__price-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}
.product-card__old-price{
  font-size:14px;
  color:var(--muted-2);
  text-decoration:line-through;
}
.products-grid--catalog .product-card,
.products-grid--home .product-card{
  min-height:100%;
}
@media (max-width: 760px){
  .product-card__body{
    padding:16px 16px 18px;
  }
  .product-card h3{
    min-height:auto;
  }
  /* сітка головної / каталогу: назва займає мінімум 2 рядки — однакова висота карток */
  .products-grid--home .product-card h3,
  .products-grid--catalog .product-card h3{
    min-height:2.9em;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
}


.cta__grid{
  align-items:center;
}
.cta__content{
  max-width:520px;
  margin:0 auto;
  padding:0 18px;
  text-align:left;
}
.cta__content .section__title{
  font-size:clamp(28px, 4vw, 44px);
}
.cta__content .section__title{
  overflow-wrap:anywhere;
}

/* Сторінка товару: "Заявка на <назва>" — компактніше для довгих назв */
#order-form .cta__content .section__title{
  font-size:clamp(22px, 2.6vw, 34px);
  line-height:1.12;
}
#order-form .cta__content .section__title.is-long{
  font-size:clamp(20px, 2.2vw, 30px);
  line-height:1.16;
}
.cta__content .section__text{
  max-width:460px;
  font-size:16px;
  line-height:1.7;
}
.form{
  padding:0 18px;
}
@media (max-width: 860px){
  .cta{
    padding:28px 18px;
  }
  .cta__content{
    max-width:100%;
    padding:0 8px;
  }
  .cta__content .section__title{
    font-size:clamp(24px, 7vw, 34px);
  }
  .cta__content .section__text{
    font-size:15px;
    max-width:100%;
  }
  .form{
    padding:0 8px;
  }
}


.products-grid--catalog,
.products-grid--home{
  gap:28px 22px;
}

/* Схожі товари: горизонтальний скрол, не сітка */
.products-grid.products-grid--related{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  align-items:stretch;
  gap:14px;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  overscroll-behavior-x:contain;
  padding-bottom:10px;
  scrollbar-width:thin;
  scrollbar-color:rgba(31,42,48,.35) transparent;
}
.products-grid.products-grid--related::-webkit-scrollbar{
  height:6px;
}
.products-grid.products-grid--related::-webkit-scrollbar-thumb{
  border-radius:999px;
  background:rgba(31,42,48,.28);
}
body[data-theme="dark"] .products-grid.products-grid--related{
  scrollbar-color:rgba(255,255,255,.25) transparent;
}
body[data-theme="dark"] .products-grid.products-grid--related::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.22);
}
.products-grid.products-grid--related .product-card{
  flex:0 0 min(240px, 82vw);
  max-width:min(240px, 82vw);
  min-width:0;
  scroll-snap-align:start;
}
@media (min-width: 1025px){
  .products-grid.products-grid--related .product-card{
    flex-basis:min(220px, 28vw);
    max-width:min(220px, 28vw);
  }
}
.products-grid--related .product-card__image-wrap{
  aspect-ratio:1/1;
}
.products-grid--related .product-card__body{
  padding:12px 12px 14px;
  gap:8px;
}
.products-grid--related .product-card h3{
  font-size:clamp(14px, 1.9vw, 16px);
  line-height:1.25;
  margin-bottom:0;
  min-height:2.5em;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.products-grid--related .product-card__sku{
  font-size:11px;
}
.products-grid--related .product-card__price{
  font-size:18px;
}
.products-grid--related .product-card__old-price{
  font-size:12px;
}
.products-grid--related .product-card__footer{
  gap:10px;
  margin-top:4px;
}
.products-grid--related .product-card__actions{
  gap:6px;
}
.products-grid--related .product-card__actions .button--sm{
  min-height:36px;
  padding:8px 12px;
  font-size:11px;
}
.products-grid--related .flag-badge{
  font-size:10px;
  padding:4px 8px;
}

/* Головна — «Популярні товари» (хіти): горизонтальний скрол */
.scroll-arrows{
  position:relative;
}
.scroll-arrows__btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:5;
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(31,42,48,.14);
  background:rgba(255,255,255,.92);
  color:#111;
  box-shadow:0 10px 24px rgba(0,0,0,.16);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  user-select:none;
  transition:transform .2s ease, opacity .2s ease, box-shadow .2s ease, background .2s ease;
}
.scroll-arrows__btn--prev{left:-10px}
.scroll-arrows__btn--next{right:-10px}
.scroll-arrows__btn:hover{
  transform:translateY(-50%) scale(1.04);
  background:rgba(255,255,255,.98);
}
.scroll-arrows__btn.is-hidden{
  opacity:0;
  pointer-events:none;
}
body[data-theme="dark"] .scroll-arrows__btn{
  background:rgba(12,14,18,.82);
  border-color:rgba(255,255,255,.14);
  color:#fff;
  box-shadow:0 10px 28px rgba(0,0,0,.42);
}
.scroll-arrows [data-scroll-container]{
  scroll-behavior:smooth;
  /* щоб стрілки не перекривали першу/останню картку */
  padding-left:26px;
  padding-right:26px;
}

.products-grid.products-grid--home.products-grid--scroll{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  align-items:stretch;
  gap:14px;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  overscroll-behavior-x:contain;
  padding-bottom:10px;
  scrollbar-width:thin;
  scrollbar-color:rgba(31,42,48,.35) transparent;
}
.products-grid.products-grid--home.products-grid--scroll::-webkit-scrollbar{
  height:6px;
}
.products-grid.products-grid--home.products-grid--scroll::-webkit-scrollbar-thumb{
  border-radius:999px;
  background:rgba(31,42,48,.28);
}
body[data-theme="dark"] .products-grid.products-grid--home.products-grid--scroll{
  scrollbar-color:rgba(255,255,255,.25) transparent;
}
body[data-theme="dark"] .products-grid.products-grid--home.products-grid--scroll::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.22);
}
.products-grid.products-grid--home.products-grid--scroll .product-card{
  flex:0 0 min(240px, 82vw);
  max-width:min(240px, 82vw);
  min-width:0;
  scroll-snap-align:start;
  align-self:stretch;
}
@media (min-width: 1025px){
  .products-grid.products-grid--home.products-grid--scroll .product-card{
    flex-basis:min(220px, 28vw);
    max-width:min(220px, 28vw);
  }
}
.products-grid.products-grid--home.products-grid--scroll .empty-state{
  flex:1 0 100%;
  min-width:min(100%, 560px);
}

.products-grid .product-card{
  background:var(--surface);
  border:1px solid var(--card-edge);
  box-shadow:var(--shadow-soft);
  border-radius:2px;
}
.product-card::before{
  display:none;
}
.products-grid .product-card:hover{
  transform:translateY(-2px);
  border-color:rgba(31,42,48,.18);
  box-shadow:var(--shadow-lift-accent);
}
body[data-theme="light"] .products-grid .product-card,
body:not([data-theme]) .products-grid .product-card{
  border:1px solid var(--card-edge);
  box-shadow:var(--shadow-soft);
  background:var(--surface);
}
body[data-theme="light"] .products-grid .product-card:hover,
body:not([data-theme]) .products-grid .product-card:hover{
  border-color:rgba(31,42,48,.2);
  box-shadow:var(--shadow-lift-accent);
}
.product-card__media{
  position:relative;
  width:100%;
  flex-shrink:0;
}
.products-grid .product-card__media .product-card__flags{
  position:absolute;
  top:10px;
  right:10px;
  left:auto;
  z-index:2;
  margin:0;
  justify-content:flex-end;
  align-items:flex-start;
  align-content:flex-start;
  max-width:calc(100% - 16px);
  pointer-events:none;
}
.products-grid .product-card__media .product-card__flags .flag-badge{
  margin:0;
}
.product-card__image-wrap{
  /* Desktop/tablet: avoid overly tall cards (breaks layout around ~980px) */
  aspect-ratio: 4 / 3;
  border:none;
  border-bottom:1px solid var(--card-edge-soft);
  border-radius:0;
  background:#ffffff;
  overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(31,42,48,.05);
}

@media (max-width: 760px){
  /* На вузьких екранах занадто високий aspect-ratio “роздуває” картку по висоті */
  .product-card__image-wrap{
    aspect-ratio: 4 / 3;
  }
}
.product-card__image-wrap::after{
  display:none;
}
.product-card__image{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center center;
  padding:6px 10px 0;
  background:#ffffff;
}
.product-card:hover .product-card__image{
  transform:none;
}
.product-card:hover .product-card__image--primary{
  opacity:0;
}
.product-card:hover .product-card__image--secondary{
  opacity:1;
}
.product-card__body{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
  padding:18px 4px 16px;
  gap:10px;
  text-align:center;
}
.product-card__meta{
  position:absolute;
  top:12px;
  right:12px;
  left:12px;
  z-index:3;
  display:flex;
  justify-content:flex-end;
  gap:6px;
  pointer-events:none;
}
.product-card h3{
  min-height:auto;
  font-size:16px;
  line-height:1.45;
  font-weight:700;
  letter-spacing:0;
  color:#fff;
  margin:0;
}
/* головна (хіти) + каталог: однакова висота карток у рядку при різній довжині назви */
.products-grid--home .product-card h3,
.products-grid--catalog .product-card h3{
  min-height:2.9em;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.product-card h3 a{
  color:var(--text);
}
.product-card__sku{
  color:#1f2a30;
  font-size:14px;
  line-height:1.5;
}
.product-card__footer{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:14px;
  margin-top:0;
}
/* одна висота рядка в сітці: «зайве» повітря — між текстом і ціною/кнопками, а не під кнопками */
.products-grid .product-card .product-card__footer{
  margin-top:auto;
  width:100%;
  flex-shrink:0;
}
/* Однакова висота рядка ціни: місце під поточну + стару ціну (якщо знижки немає — порожній простір) */
.products-grid .product-card__price-wrap{
  justify-content:flex-start;
  min-height:3.25rem;
  width:100%;
}
.product-card__price{
  font-size:20px;
  color:#ff2d55;
  font-weight:700;
}
.product-card__price--on-request{
  font-size:15px;
  color:var(--muted);
  font-weight:600;
}
.cart-item__price--on-request{
  font-size:15px;
  color:var(--muted);
  font-weight:600;
}
.product-card__old-price{
  font-size:13px;
}
.product-card__actions{
  width:100%;
  justify-content:center;
  gap:10px;
}
.product-card__actions .button,
.product-card__actions form{
  width:100%;
}
.product-card__actions form .button{
  width:100%;
}
.product-card__actions .button,
.product-card__actions .button--sm{
  border-radius:10px;
  letter-spacing:.06em;
}
/* дублікати NEW/Хіт у meta — ті самі розміри, що й .flag-badge */
.chip.chip--tag,
.chip.chip--tag-dark,
.chip.chip--tag-order{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:22px;
  padding:4px 9px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  line-height:1.2;
  letter-spacing:.06em;
  text-transform:uppercase;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 4px 12px rgba(15,23,42,.12), 0 0 0 1px rgba(31,42,48,.05);
}
.chip.chip--tag{
  background:linear-gradient(180deg, #3fa38a 0%, #1d6b55 100%);
  border-color:rgba(16, 185, 129, .38);
  color:#ecfdf5;
  box-shadow:0 4px 12px rgba(29, 107, 85, .18), 0 0 0 1px rgba(31, 42, 48, .05);
}
.chip.chip--tag-dark{
  background:linear-gradient(180deg, #d4a84b 0%, #a16207 100%);
  border-color:rgba(217, 119, 6, .42);
  color:#fffbeb;
  box-shadow:0 4px 12px rgba(161, 98, 7, .2), 0 0 0 1px rgba(31, 42, 48, .05);
}
.chip.chip--tag-order{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.2);
  color:#f3f5f7;
}
body[data-theme="light"] .chip.chip--tag-order,
body:not([data-theme]) .chip.chip--tag-order{
  background:rgba(31,42,48,.06);
  color:#4e5b61;
  border-color:rgba(31,42,48,.14);
}
@media (max-width: 980px){
  .products-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width: 640px){
  .products-grid:not(.products-grid--home):not(.products-grid--catalog){
    grid-template-columns:1fr;
    gap:26px;
  }
  .products-grid--home{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px 10px;
  }
  .products-grid--home .product-card__body{
    padding:14px 8px 10px;
  }
  .product-card__image-wrap{
    aspect-ratio: 4 / 3;
  }
  .product-card h3{
    font-size:15px;
    line-height:1.35;
  }
  .products-grid--home .product-card h3,
  .products-grid--catalog .product-card h3{
    min-height:calc(1.35em * 2);
  }
}


/* Full product image visibility + no zoom difference on hover */
.product-card__image-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
}

.product-card__image{
  width:100%;
  height:100%;
  object-fit:contain !important;
  object-position:center center;
  padding:10px 12px 0;
  transform:none !important;
  transition:opacity .28s ease !important;
}

.product-card__image--primary,
.product-card__image--secondary{
  transform:none !important;
}

.product-card:hover .product-card__image,
.product-card:hover .product-card__image--primary,
.product-card:hover .product-card__image--secondary{
  transform:none !important;
}

.product-card__image--secondary{
  opacity:0;
}

.product-card:hover .product-card__image--primary{
  opacity:0;
}

.product-card:hover .product-card__image--secondary{
  opacity:1;
}


.certificates-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:24px;
}
.certificate-card{
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.025) 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:28px;
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.certificate-card:hover{
  transform:translateY(-4px);
  border-color:rgba(255,255,255,.14);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.1),
    0 4px 8px rgba(0,0,0,.28),
    0 16px 44px rgba(0,0,0,.38),
    0 32px 72px rgba(0,0,0,.42);
}
body[data-theme="light"] .certificate-card:hover,
body:not([data-theme]) .certificate-card:hover{
  border-color:rgba(31,42,48,.14);
  box-shadow:var(--shadow-lift-accent);
}
.certificate-card__image{
  display:block;
  width:100%;
  margin:0;
  padding:14px;
  border:none;
  border-bottom:1px solid rgba(255,255,255,.08);
  border-radius:0;
  background:#fff;
  cursor:pointer;
  font:inherit;
  text-align:left;
  color:inherit;
}
.certificate-card__image img{
  width:100%;
  aspect-ratio: 3 / 4.2;
  object-fit:contain;
  background:#fff;
  border-radius:16px;
}
.certificate-card__body{
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.certificate-card__meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.certificate-card h3{
  margin:0;
  font-size:20px;
  line-height:1.45;
  color:#1f2a30;
}
@media (max-width: 980px){
  .certificates-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px){
  .certificates-grid{
    grid-template-columns:1fr;
  }
}

/* Home: мініатюри сертифікатів під заголовком секції */
.certificates-preview-strip{
  display:flex;
  flex-wrap:nowrap;
  gap:12px 14px;
  justify-content:flex-start;
  align-items:center;
  margin-top:4px;
  padding:8px 0 10px;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;
  scrollbar-color:rgba(31,42,48,.35) transparent;
}
.certificates-preview-strip::-webkit-scrollbar{
  height:6px;
}
.certificates-preview-strip::-webkit-scrollbar-thumb{
  border-radius:999px;
  background:rgba(31,42,48,.28);
}
.certificates-preview-item{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:92px;
  height:92px;
  margin:0;
  padding:8px;
  background:#fff;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 4px 16px rgba(0,0,0,.2);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  scroll-snap-align:start;
  cursor:pointer;
  font:inherit;
  color:inherit;
}
.certificates-preview-item:hover{
  transform:translateY(-3px);
  border-color:rgba(219,0,50,.22);
  box-shadow:0 12px 28px rgba(0,0,0,.35), 0 0 0 1px rgba(219,0,50,.12);
}
.certificates-preview-item img{
  width:100%;
  height:100%;
  object-fit:contain;
}
@media (max-width: 640px){
  .certificates-preview-strip{
    display:grid;
    /* два рядки: до 6 мініатюр у ряд (12 у двох рядах) */
    grid-template-columns:repeat(6, minmax(0, 1fr));
    grid-template-rows:repeat(2, auto);
    gap:8px 6px;
    align-items:stretch;
    justify-items:stretch;
    overflow:visible;
    padding:8px 0 4px;
    scroll-snap-type:none;
    scrollbar-width:auto;
  }
  .certificates-preview-item{
    width:100%;
    max-width:none;
    height:auto;
    min-height:0;
    aspect-ratio:1;
    padding:4px;
    border-radius:12px;
  }
}


.articles-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:24px;
  align-items:stretch;
}
/* Головна — «Останні кейси»: горизонтальний скрол */
.articles-grid.articles-grid--scroll{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  align-items:stretch;
  gap:16px;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  overscroll-behavior-x:contain;
  /* місце під blur тіні (--shadow до ~52px), інакше overflow-y обрізає низ */
  padding-bottom:32px;
  scrollbar-width:thin;
  scrollbar-color:rgba(31,42,48,.35) transparent;
}
.articles-grid.articles-grid--scroll::-webkit-scrollbar{
  height:6px;
}
.articles-grid.articles-grid--scroll::-webkit-scrollbar-thumb{
  border-radius:999px;
  background:rgba(31,42,48,.28);
}
body[data-theme="dark"] .articles-grid.articles-grid--scroll{
  scrollbar-color:rgba(255,255,255,.25) transparent;
}
body[data-theme="dark"] .articles-grid.articles-grid--scroll::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.22);
}
.articles-grid.articles-grid--scroll .article-card{
  flex:0 0 min(300px, 86vw);
  max-width:min(300px, 86vw);
  min-width:0;
  scroll-snap-align:start;
}
@media (min-width: 1025px){
  .articles-grid.articles-grid--scroll .article-card{
    flex-basis:min(320px, 32vw);
    max-width:min(320px, 32vw);
  }
}
.article-card{
  position:relative;
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:0;
  background:linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.025) 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:28px;
  overflow:visible;
  box-shadow:var(--shadow);
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.article-card:hover{
  transform:translateY(-4px);
  border-color:rgba(255,255,255,.14);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.1),
    0 4px 8px rgba(0,0,0,.28),
    0 16px 44px rgba(0,0,0,.38),
    0 32px 72px rgba(0,0,0,.42);
}
body[data-theme="light"] .article-card:hover,
body:not([data-theme]) .article-card:hover{
  border-color:rgba(31,42,48,.14);
  box-shadow:var(--shadow-lift-accent);
}
.article-card__image{
  display:block;
  flex-shrink:0;
  background:#141a21;
  min-height:240px;
  overflow:hidden;
  border-radius:28px 28px 0 0;
}
.article-card__image img{
  width:100%;
  height:240px;
  object-fit:cover;
}
.article-card__placeholder{
  min-height:240px;
  display:grid;
  place-items:center;
  color:#fff;
  letter-spacing:.12em;
  font-weight:800;
  background:linear-gradient(135deg, #1b232c, #0f141a);
}
.article-card__body{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  gap:14px;
  min-height:0;
  padding:20px;
}
.article-card__body > .button{
  margin-top:auto;
  align-self:stretch;
  width:auto;
  text-align:center;
}
.article-card__meta{
  display:flex;
  gap:8px;
  /* фіксуємо висоту meta-рядка, щоб картки були однакові */
  flex-wrap:nowrap;
  overflow:hidden;
  min-height:34px;
}
.article-card__meta .chip{
  flex:0 0 auto;
}
/* мета «Стаття» / дата: базовий .chip — #dbe3eb; на світлій картці нечитабельно */
body[data-theme="light"] .article-card .chip,
body:not([data-theme]) .article-card .chip{
  color:#1f2a30;
  border-color:rgba(31,42,48,.22);
  background:rgba(31,42,48,.07);
}
body[data-theme="dark"] .article-card .chip{
  color:#e8edf2;
  border-color:rgba(255,255,255,.2);
  background:rgba(255,255,255,.09);
}
.article-card h3{
  margin:0;
  font-size:22px;
  line-height:1.35;
  color:#1f2a30;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}
.article-card p{
  margin:0;
  color:var(--muted);
  line-height:1.5;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
  min-width:0;
}

/* Однакова висота карток статей тільки в гріді (не впливає на інші блоки) */
.articles-grid .article-card h3{
  min-height:calc(1.35em * 2);
}
.articles-grid .article-card p{
  min-height:calc(1.5em * 3);
}
.articles-grid--scroll .article-card p{
  -webkit-line-clamp:2;
  min-height:calc(1.5em * 2);
}
.article-card__excerpt.article-card__excerpt--one-line{
  /* For "Останні кейси": keep it compact but readable */
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  white-space:normal;
}
.article-layout{
  display:grid;
  grid-template-columns:minmax(0, 2fr) minmax(300px, 1fr);
  gap:28px;
}
.article-detail{
  overflow:hidden;
}
.article-detail__cover img{
  width:100%;
  max-height:520px;
  object-fit:cover;
}
.case-gallery{
  margin-top:22px;
}
.case-gallery__grid{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}
.case-gallery__item{
  display:block;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(31,42,48,.12);
  background:rgba(255,255,255,.5);
}
.case-gallery__item img{
  display:block;
  width:100%;
  aspect-ratio: 4 / 3;
  object-fit:cover;
}
@media (max-width: 760px){
  .case-gallery__grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
.article-detail__content{
  padding:28px;
}
.article-detail__excerpt{
  font-size:20px;
  line-height:1.7;
  color:#1f2a30;
  margin:0 0 18px;
}
.article-detail__text{
  color:var(--muted);
  line-height:1.9;
}
.article-sidebar{
  padding:24px;
  height:max-content;
  position:sticky;
  top:110px;
}
.list--column{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin:18px 0 24px;
  align-items:stretch;
}
.article-sidebar .button{
  align-self:stretch;
}
.sidebar-case{
  display:grid;
  grid-template-columns:44px 1fr 18px;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  width:100%;
  border-radius:16px;
  border:1px solid rgba(31,42,48,.10);
  background:rgba(255,255,255,.55);
  color:#1f2a30;
  text-decoration:none;
  transition:transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease, border-color .22s ease;
}
.sidebar-case:hover{
  transform:translateY(-1px);
  border-color:rgba(219,0,50,.22);
  box-shadow:0 10px 26px rgba(15,23,42,.10);
}
.sidebar-case:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(219,0,50,.20), 0 10px 26px rgba(15,23,42,.10);
}
.sidebar-case__thumb{
  width:44px;
  height:44px;
  border-radius:12px;
  overflow:hidden;
  background:linear-gradient(135deg, #1b232c, #0f141a);
  display:grid;
  place-items:center;
}
.sidebar-case__thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.sidebar-case__thumb-fallback{
  color:#fff;
  font-weight:800;
  letter-spacing:.12em;
  font-size:11px;
}
.sidebar-case__title{
  font-weight:800;
  line-height:1.25;
  min-width:0;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}
.sidebar-case__icon{
  color:rgba(31,42,48,.65);
  transition:transform .22s cubic-bezier(.22,1,.36,1), color .22s ease;
}
.sidebar-case:hover .sidebar-case__icon{
  transform:translateX(2px);
  color:rgba(219,0,50,.95);
}
@media (max-width: 980px){
  .articles-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    grid-auto-rows:1fr;
  }
  .article-layout{
    grid-template-columns:1fr;
  }
  .article-sidebar{
    position:static;
  }
}
@media (max-width: 640px){
  .articles-grid{
    grid-template-columns:1fr;
  }
}


.notice--error{
  border-color:rgba(255,120,120,.32);
  background:rgba(255,90,90,.1);
  color:#ffd4d4;
}


.category-seo{
  padding:28px;
}
.category-seo__text{
  color:var(--muted);
  line-height:1.9;
  max-width:980px;
}
.certificate-card p{
  margin:0;
  color:var(--muted);
  line-height:1.7;
}


.product-card__size,
.detail-size-box{
  display:flex;
  flex-direction:column;
  gap:8px;
  text-align:left;
}
.product-card__size label,
.detail-size-box label,
.detail-size-box__label{
  font-size:14px;
  color:var(--muted);
  font-weight:600;
}
.product-size-select{
  width:100%;
  min-height:46px;
  padding:10px 42px 10px 14px;
  border-radius:10px;
  border:1px solid rgba(31,42,48,.26);
  background-color:#ffffff;
  color:#1f2a30;
  font:inherit;
  font-weight:600;
  outline:none;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  position:relative;
  color-scheme:light;
  accent-color:#d92436;
  background-image:url("data:image/svg+xml,%3Csvg width='18' height='12' viewBox='0 0 18 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4l6 6 6-6' fill='none' stroke='%234e5b61' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:18px 12px;
  box-shadow:0 1px 3px rgba(15,23,42,.08), 0 0 0 1px rgba(31,42,48,.08);
  cursor:pointer;
  transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.product-size-select:hover{
  border-color:rgba(217,36,54,.35);
  box-shadow:0 4px 14px rgba(15,23,42,.08), 0 0 0 1px rgba(217,36,54,.12);
}
.product-size-select:focus-visible{
  border-color:rgba(217,36,54,.55);
  box-shadow:0 0 0 3px rgba(217,36,54,.2), 0 4px 16px rgba(15,23,42,.1);
}
.product-size-select option{
  color:#1f2a30;
  background-color:#ffffff;
  padding:10px 14px;
  font-weight:600;
}
.product-size-select option:hover,
.product-size-select option:focus{
  background-color:#fef2f3;
  color:#b91c2c;
}
.product-size-select option:checked,
.product-size-select option[selected]{
  background-color:#fce8eb;
  color:#9a1824;
}
.detail-size-box{
  max-width:260px;
  margin:18px 0 6px;
}



@media (max-width: 760px){
  .catalog-mobile-tools{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin:10px 0 16px;
  }

  .filters-toggle{
    flex:1 1 auto;
    justify-content:space-between;
    min-height:46px;
    border-radius:999px;
    padding-inline:18px;
  }

  .filters-toggle__icon{
    flex:0 0 auto;
    margin-left:12px;
  }

  .catalog-mobile-reset{
    flex:0 0 auto;
    padding:0 14px;
    min-height:40px;
    border-radius:999px;
    border:1px solid var(--line);
    background:transparent;
    color:var(--brand-gray);
    font-size:12px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    white-space:nowrap;
  }
}

@media (min-width: 761px) and (max-width: 1120px){
  .catalog-mobile-tools{
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin:10px 0 16px;
  }
  .filters-toggle{
    flex:1 1 auto;
    justify-content:space-between;
    min-height:46px;
    border-radius:999px;
    padding-inline:18px;
  }
  .filters-toggle__icon{
    flex:0 0 auto;
    margin-left:12px;
  }
  .catalog-mobile-reset{
    flex:0 0 auto;
    padding:0 14px;
    min-height:40px;
    border-radius:999px;
    border:1px solid var(--line);
    background:transparent;
    color:var(--brand-gray);
    font-size:12px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    white-space:nowrap;
  }

  /* Планшет: фільтри згорнуті за замовчуванням (як на мобільному) */
  .section--catalog .filters{
    position:relative !important;
    top:auto !important;
    max-height:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:none !important;
    background:transparent !important;
    box-shadow:none !important;
    opacity:0 !important;
    overflow:hidden !important;
    pointer-events:none !important;
    visibility:hidden !important;
  }
  .section--catalog .filters.is-open{
    max-height:min(3400px,200vh) !important;
    opacity:1 !important;
    pointer-events:auto !important;
    visibility:visible !important;
    margin:0 0 16px !important;
    padding:16px 14px 20px !important;
    border:1px solid var(--line) !important;
    background:var(--surface) !important;
    border-radius:20px !important;
    box-shadow:0 16px 44px rgba(15,23,42,.1) !important;
    overflow:visible !important;
  }
  .section--catalog .filters .filters__body{
    display:block !important;
    max-height:none !important;
    padding-top:10px !important;
    overscroll-behavior:auto;
  }
}



/* Header/nav fixes */
.nav__links{
  flex-wrap:nowrap;
  gap:clamp(8px, 0.9vw, 12px);
}
.nav__links a{
  font-size:13px;
}
@media (min-width: 1096px){
  .navbar{
    flex-wrap:nowrap;
    align-items:center;
  }
  .nav-panel{
    flex-wrap:nowrap;
    align-items:center;
    gap:clamp(10px, 1.4vw, 18px);
    min-width:0;
  }
  .nav__links{
    justify-content:flex-end;
  }
  .nav__links a{
    white-space:nowrap;
    flex-shrink:0;
    letter-spacing:.06em;
  }
  .nav-actions{
    flex-wrap:nowrap;
    flex-shrink:0;
  }
}
@media (min-width: 1096px) and (max-width: 1199px){
  .nav__links a{
    font-size:12px;
    letter-spacing:.05em;
  }
  .cart-pill{
    padding:0 14px;
    min-height:44px;
    font-size:11px;
    letter-spacing:.06em;
  }
}
.nav-actions .button{
  font-size:12px;
}
.section-link-arrow .label-mobile{
  display:none;
}

.detail-card__content .product-card__meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:18px;
}
.detail-title{
  margin-top:4px;
  font-size:clamp(24px, 3.4vw, 44px);
  line-height:1.05;
}
.detail-title.is-long{
  font-size:clamp(22px, 2.8vw, 36px);
  line-height:1.12;
}
.detail-card__content .chip{
  max-width:100%;
}

.cart-item__content .product-card__meta{
  display:none;
}

@media (max-width: 1095px){
  .nav__links{
    gap:8px;
  }
  .nav__links a{
    font-size:12px;
  }
  .nav-actions .button{
    min-height:44px;
    padding:10px 14px;
    font-size:11px;
    letter-spacing:.02em;
  }
}
@media (max-width: 980px){
  .hero__title{
    font-size:clamp(36px, 7vw, 60px);
  }
}

@media (max-width: 860px){
  .section-link-arrow{
    min-width:52px;
    width:52px;
    padding:0;
  }
  .section-link-arrow .label-full{
    display:none;
  }
  .section-link-arrow .label-mobile{
    display:inline;
    font-size:22px;
    line-height:1;
  }
  .hero__title{
    font-size:clamp(30px, 8vw, 46px);
    line-height:1.02;
  }
}

@media (max-width: 640px){
  .hero__title{
    font-size:clamp(26px, 8.6vw, 38px);
  }
  .detail-title{
    font-size:clamp(22px, 6.5vw, 34px);
    line-height:1.08;
  }
}



/* Product detail tags row like ecommerce UI */
.detail-tags-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px 18px;
  flex-wrap:wrap;
  margin-bottom:22px;
}
.detail-meta-row,
.detail-flags-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.detail-card__content .product-card__meta{
  margin-bottom:0;
}
.detail-card__content .product-card__flags{
  margin-bottom:0;
}
.detail-title{
  margin-top:0;
}
/* мінімалістичні теги внизу картки товару */
.detail-tags-row--bottom{
  justify-content:flex-start;
  margin-top:18px;
}
.detail-tags-row--bottom .flag-badge{
  margin:0;
}
@media (max-width: 900px){
  .detail-tags-row{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }
}



/* Mobile fix: keep product tags clearly below the gallery */
.detail-card{
  gap: 24px;
}

.detail-card__image{
  margin-bottom: 0;
}

.detail-card__content{
  position: relative;
  z-index: 2;
}

.detail-tags-row{
  margin-bottom: 22px;
}

@media (max-width: 760px){
  .detail-card{
    gap: 18px;
  }

  .detail-card__image{
    margin-bottom: 8px;
  }

  .detail-card__content{
    padding-top: 6px;
  }

  .detail-tags-row{
    margin-top: 2px;
    margin-bottom: 18px;
    row-gap: 10px;
  }

  .detail-meta-row,
  .detail-flags-row{
    gap:6px;
  }
}



/* Compact filter header */
.filters .section__head--compact{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
  padding:0;
}

.filters .section__title--sm{
  font-size:clamp(18px, 2vw, 24px);
  line-height:1;
  margin:0;
}

.filters .section__head--compact .button--sm{
  min-height:40px;
  padding:8px 16px;
  font-size:11px;
  letter-spacing:.04em;
}

@media (max-width: 760px){
  .filters{
    border-radius:20px;
  }

  .filters .section__head--compact{
    margin-bottom:14px;
    gap:10px;
  }

  .filters .section__title--sm{
    font-size:18px;
  }

  .filters .section__head--compact .button--sm{
    min-height:36px;
    padding:7px 14px;
    font-size:10px;
  }
}

/* ===== CLIENTS PREMIUM ===== */

.clients .section__head.clients__head{
  justify-content:space-between;
  text-align:left;
  margin-bottom:40px;
}

.clients .section-kicker{
  display:inline-flex;
}

.clients__slider{
  position:relative;
  overflow:hidden;
  padding:32px 0;
  border-radius:0;
  border-left:none;
  border-right:none;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border-top:1px solid rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.05);
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

.clients__slider::before,
.clients__slider::after{
  content:"";
  position:absolute;
  top:0;
  width:80px;
  height:100%;
  z-index:2;
  pointer-events:none;
}

.clients__slider::before{
  left:0;
  background:linear-gradient(to right, var(--bg) 0%, transparent 100%);
}

.clients__slider::after{
  right:0;
  background:linear-gradient(to left, var(--bg) 0%, transparent 100%);
}

.clients__track img{
  opacity:.6;
  filter:grayscale(100%);
  transition:.3s;
}

.clients__track img:hover{
  opacity:1;
  filter:none;
}

.clients__slider:hover .clients__track{
  animation-play-state:paused;
}

.clients__track{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  align-items:center;
  gap:48px;
  width:max-content;
  padding:0;
  animation:clientsMarqueeX 45s linear infinite;
  will-change:transform;
}

.clients__item{
  flex:0 0 auto;
  height:80px;
  min-width:120px;
  max-width:220px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px 6px;
}

.clients__item img{
  display:block;
  max-width:100%;
  max-height:64px;
  width:auto;
  height:auto;
  object-fit:contain;
  filter:grayscale(100%) brightness(1.2);
  opacity:.72;
  transition:transform .35s ease, opacity .35s ease, filter .35s ease;
}

.clients__item img:hover{
  filter:grayscale(0%) brightness(1.08);
  opacity:1;
  transform:scale(1.05);
}

@keyframes clientsMarqueeX{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

@media (max-width: 900px){
  .clients__slider{
    padding:30px 0;
  }

  .clients__slider::before,
  .clients__slider::after{
    width:56px;
  }

  .clients__track{
    gap:40px;
    animation-duration:38s;
  }

  .clients__item{
    height:70px;
    min-width:104px;
    max-width:190px;
    padding:10px 8px;
  }

  .clients__item img{
    max-height:54px;
  }
}

@media (max-width: 760px){
  .clients.section{
    padding-top:88px;
    padding-bottom:88px;
  }
}

@media (max-width: 640px){
  .clients.section{
    padding-top:96px;
    padding-bottom:96px;
  }

  .clients .section__head.clients__head{
    margin-bottom:32px;
  }

  .clients__slider{
    padding:34px 0;
  }

  .clients__slider::before,
  .clients__slider::after{
    width:48px;
  }

  .clients__track{
    gap:34px;
    padding:0 12px;
    animation-duration:34s;
  }

  .clients__item{
    height:58px;
    min-width:88px;
    max-width:168px;
    padding:8px 6px;
  }

  .clients__item img{
    max-height:42px;
  }
}

/* Auto-placeholders for missing images */
.product-card__placeholder,
.clients__placeholder{
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at top right, rgba(219,0,50,.22), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  color:#eef3f7;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.catalog-card__placeholder{
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(165deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  color:rgba(226,232,240,.88);
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  border-radius:20px;
  min-height:104px;
  font-size:30px;
}

.product-card__placeholder{
  position:absolute;
  inset:0;
  border-radius:0;
  font-size:14px;
}

.product-card__placeholder span{
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(8,11,14,.45);
}

.clients__placeholder{
  width:100%;
  height:56px;
  max-width:140px;
  margin:0 auto;
  border-radius:16px;
  font-size:22px;
}

.product-card__image--primary{opacity:1;}
.product-card__image--secondary{opacity:0;}
.product-card:hover .product-card__image--primary{opacity:0;}
.product-card:hover .product-card__image--secondary{opacity:1;}

.size-picker{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.size-option{
  padding:10px 16px;
  border-radius:10px;
  border:1px solid rgba(31,42,48,.14);
  background:#ffffff;
  color:#1f2a30;
  font-weight:600;
  cursor:pointer;
  transition:border-color .25s ease, box-shadow .25s ease, background .25s ease, color .2s ease;
  box-shadow:0 1px 3px rgba(15,23,42,.06);
}

.size-option:hover{
  border-color:rgba(217,36,54,.45);
  box-shadow:0 4px 14px rgba(15,23,42,.08);
  color:#1f2a30;
}

.size-option.is-active{
  background:linear-gradient(180deg, var(--accent) 0%, #c41e2e 100%);
  border-color:rgba(217,36,54,.85);
  color:#fff;
  box-shadow:0 6px 20px rgba(217,36,54,.28);
}

@media (max-width: 760px){
  .detail-tags-row{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    margin-bottom:14px;
  }

  .detail-meta-row,
  .detail-flags-row{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
  }
}

@media (max-width: 760px){
  .detail-card__content{
    gap:14px;
  }

  .detail-title{
    font-size:clamp(22px, 6.8vw, 36px);
    line-height:1.05;
  }
}

/* mobile catalog: 2 товарні картки в ряд навіть при дуже вузьких екранах */
@media (max-width: 760px){
  /* Не чіпаємо сітку каталогу тут: її контролює блок @media (max-width: 640px) вище */
  /* категорії продукції: на ~760px квадратні картки виглядають занадто “роздутими” */
  .categories-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    align-items:start;
  }
  .categories-grid .catalog-card{
    min-height:unset;
    width:100%;
    max-width:100%;
    aspect-ratio:unset;
    min-height:0;
    padding:18px 14px;
    gap:10px;
    justify-content:center;
    box-sizing:border-box;
  }
  .categories-grid .catalog-card__icon{
    width:min(104px, 30vw);
    height:min(104px, 30vw);
    margin-bottom:2px;
    flex-shrink:0;
  }
  .categories-grid .catalog-card__icon img{
    max-width:min(92px, 26vw);
    max-height:min(92px, 26vw);
  }
  .categories-grid .catalog-card__placeholder{
    min-height:0;
    font-size:clamp(18px, 7vw, 24px);
  }
  .categories-grid .catalog-card h3{
    font-size:clamp(13px, 3.6vw, 16px);
    line-height:1.2;
    margin-bottom:0;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .categories-grid .catalog-card p{
    font-size:11px;
    line-height:1.35;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
    flex:0 1 auto;
    min-height:0;
    margin:0;
  }
  .categories-grid .catalog-card__cta{
    margin-top:2px;
    flex-shrink:0;
    font-size:clamp(10px, 2.6vw, 12px);
    font-weight:800;
    letter-spacing:.05em;
    text-transform:uppercase;
    gap:5px;
  }
  .categories-grid .catalog-card__cta::after{
    font-size:clamp(12px, 3vw, 15px);
  }
  .categories-grid .catalog-card__cta-text--full{
    display:none;
  }
  .categories-grid .catalog-card__cta-text--short{
    display:inline;
  }
}

/* Дуже вузькі екрани: квадратний формат ок */
@media (max-width: 520px){
  .categories-grid .catalog-card{
    aspect-ratio:1;
    padding:12px 10px;
    gap:4px;
    justify-content:flex-start;
  }
  .categories-grid .catalog-card__icon{
    width:min(92px, 38vw);
    height:min(92px, 38vw);
    margin-bottom:0;
  }
  .categories-grid .catalog-card__icon img{
    max-width:min(78px, 32vw);
    max-height:min(78px, 32vw);
  }
}

.cart-icon{
  position:relative;
  display:none;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border-radius:14px;
  border:1px solid rgba(31,42,48,.14);
  background:rgba(255,255,255,.92);
  color:var(--text);
  box-shadow:0 10px 24px rgba(0,0,0,.16);
}

.cart-icon svg{
  width:22px;
  height:22px;
}

.cart-icon span{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:22px;
  height:22px;
  padding:0 6px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg, #1f2a30 0%, #4e5b61 100%);
  color:#fff;
  font-size:11px;
  font-weight:800;
  line-height:1;
  box-shadow:0 8px 20px rgba(31,42,48,.3);
}

.nav-actions--mobile{
  display:none;
}

.cart-pill--desktop{
  display:inline-flex;
}

@media (max-width: 1095px){
  .nav-actions--mobile{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
    margin-left:0;
    flex-shrink:0;
    justify-self:end;
  }

  .cart-icon{
    display:flex;
  }

  .theme-toggle--mobile{
    display:none;
  }

  .cart-pill--desktop{
    display:none;
  }
}

/* Мобільний хедер: grid — логотип стискається (minmax 0), кошик+бургер лишаються в екрані */
@media (max-width: 1095px){
  .navbar{
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    align-items:center;
    gap:8px;
    min-width:0;
    justify-content:initial;
  }
  .navbar > .logo{
    min-width:0;
    max-width:100%;
    justify-self:start;
  }
  .navbar .logo img{
    display:block;
    max-width:100%;
    width:auto;
    height:48px;
    object-fit:contain;
  }
}

@media (max-width: 760px){
  .navbar .logo img{
    height:46px;
  }
}

.detail-main-image{
  width:100%;
  background:none;
  border:0;
  padding:0;
  cursor:zoom-in;
  touch-action:manipulation;
}

@media (max-width: 760px){
  .detail-main-image{
    cursor:default;
  }
}

.cart-item__aside{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
  min-width:0;
}

.cart-item__aside > form:last-of-type{
  margin:0;
  width:100%;
  display:flex;
  justify-content:flex-end;
}

.cart-item__qty-box{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}

.cart-item__qty-label{
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted-2);
  text-align:center;
}

.cart-item .qty-stepper{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:4px 6px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  width:max-content;
}

body[data-theme="light"] .cart-item .qty-stepper,
body:not([data-theme]) .cart-item .qty-stepper{
  background:#f1f5f9;
  border-color:rgba(31,42,48,.14);
}

.cart-item .qty-stepper__btn{
  width:34px;
  height:34px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  color:var(--text);
  font-size:20px;
  line-height:1;
  cursor:pointer;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

body[data-theme="light"] .cart-item .qty-stepper__btn,
body:not([data-theme]) .cart-item .qty-stepper__btn{
  background:#ffffff;
  border-color:rgba(31,42,48,.18);
  color:#1f2a30;
}

.cart-item .qty-stepper__btn:hover{
  border-color:rgba(219,0,50,.35);
  box-shadow:0 0 14px rgba(219,0,50,.12);
}

.cart-item .qty-stepper__btn:disabled{
  opacity:.45;
  cursor:not-allowed;
}

.cart-item .qty-stepper__value{
  min-width:26px;
  text-align:center;
  font-weight:800;
  font-size:16px;
  color:var(--text);
}

.cart-item__price-wrap{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
  text-align:right;
}

.cart-item__price{
  font-size:19px;
  font-weight:800;
  color:var(--text);
  line-height:1.15;
}

.cart-item__price-note{
  color:var(--muted);
  font-size:13px;
}

.cart-item__size{
  margin:0 0 2px;
  font-size:14px;
  color:var(--muted);
}
.cart-item__size strong{
  color:var(--text);
  font-weight:600;
}
.cart-item__meta{
  margin:0;
  font-size:13px;
  color:var(--muted-2);
}
.cart-item__meta span{
  color:var(--text);
}

@media (max-width: 720px){
  .cart-item{
    grid-template-columns:1fr;
    gap:12px;
    padding:12px 14px;
  }

  .cart-item__image img{
    width:100%;
    max-height:120px;
    height:auto;
    min-height:72px;
    object-fit:contain;
    border-radius:14px;
    background:rgba(255,255,255,.03);
    padding:6px;
  }

  .cart-item__content{
    display:grid;
    gap:6px;
  }

  .cart-item__content h3{
    font-size:16px;
    line-height:1.2;
    margin:0;
  }

  .cart-item__content p{
    margin:0;
    font-size:13px;
    line-height:1.45;
  }

  .cart-item__aside{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    width:100%;
  }

  .cart-item__aside > form:last-of-type{
    justify-content:center;
  }

  .cart-item__qty-box{
    align-items:center;
    gap:4px;
    width:100%;
  }

  .cart-item .qty-stepper{
    width:100%;
    justify-content:space-between;
    padding:6px 8px;
  }

  .cart-item .qty-stepper__btn{
    width:36px;
    height:36px;
    font-size:18px;
  }

  .cart-item .qty-stepper__value{
    flex:1;
    text-align:center;
    font-size:17px;
  }

  .cart-item__price-wrap{
    align-items:center;
    text-align:center;
  }

  .cart-item__price{
    font-size:18px;
  }

  .cart-item__aside form:last-child .button{
    min-height:38px;
    padding:8px 14px;
    font-size:12px;
  }
}

@media (max-width: 720px){
  .cart-item__aside form:last-child{
    margin-top:0;
  }

  .cart-item__aside form:last-child .button--ghost{
    background:rgba(255,255,255,.025);
    border-color:rgba(255,255,255,.08);
    box-shadow:none;
  }
  body[data-theme="light"] .cart-item__aside form:last-child .button--ghost,
  body:not([data-theme]) .cart-item__aside form:last-child .button--ghost{
    background:#ffffff;
    border-color:rgba(31,42,48,.2);
    color:#1f2a30;
  }
}

.filter-group{
  display:grid;
  gap:10px;
}

.filter-group__label{
  color:#dfe5eb;
  font-weight:700;
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.filter-picker{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.filter-option{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:10px 16px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
  color:var(--text);
  font-size:14px;
  font-weight:700;
  white-space:nowrap;
  cursor:pointer;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}

.filter-option input{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
}

.filter-option:hover{
  transform:translateY(-1px);
  border-color:rgba(31,42,48,.32);
  box-shadow:0 0 18px rgba(31,42,48,.14);
  background:rgba(255,255,255,.05);
}

.filter-option.is-active{
  background:linear-gradient(180deg, #1f2a30 0%, #4e5b61 100%);
  border-color:rgba(31,42,48,.9);
  color:#fff;
  box-shadow:
    0 10px 24px rgba(31,42,48,.28),
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 0 28px rgba(31,42,48,.2);
}

@media (max-width: 760px){
  .filter-picker{
    gap:8px;
  }

  .filter-picker--collapsible{
    position:relative;
    max-height:var(--collapsible-max, 220px);
    overflow:hidden;
    padding-bottom:4px;
    transition:max-height .25s ease;
  }
  .filter-picker--collapsible::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:42px;
    background:linear-gradient(180deg, rgba(17,24,39,0) 0%, rgba(17,24,39,.85) 100%);
    opacity:1;
    pointer-events:none;
    transition:opacity .2s ease;
  }
  body[data-theme="light"] .filter-picker--collapsible::after,
  body:not([data-theme]) .filter-picker--collapsible::after{
    background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.92) 100%);
  }
  .filter-picker--collapsible.is-expanded{
    max-height:2000px;
    overflow:visible;
  }
  .filter-picker--collapsible.is-expanded::after{
    opacity:0;
  }
  .filter-picker__more{
    width:100%;
    margin-top:10px;
    min-height:40px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.03);
    color:var(--text);
    font-size:13px;
    font-weight:800;
    letter-spacing:.02em;
    cursor:pointer;
    transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
  }
  .filter-picker__more:hover{
    transform:translateY(-1px);
    border-color:rgba(219,0,50,.28);
    box-shadow:0 10px 22px rgba(15,23,42,.1);
    background:rgba(255,255,255,.05);
  }

  .filter-option{
    min-height:40px;
    padding:9px 12px;
    font-size:13px;
    border-radius:12px;
  }
}

.product-card__image-wrap{
  aspect-ratio: 3 / 4;
}

.product-card__image{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* RAL color picker */
.color-picker{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.color-picker--card{
  margin:12px 0 4px;
  gap:8px;
  justify-content:center;
}
.color-picker--detail{
  margin-top:10px;
}
.color-swatch{
  width:20px;
  height:26px;
  border-radius:7px;
  border:1px solid rgba(31,42,48,.24);
  background:
    /* дверна рама (внутрішній бордер) */
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 65%),
    /* шов між полотнами */
    linear-gradient(90deg, rgba(0,0,0,.22) 0 2px, transparent 2px 100%),
    /* ручка */
    radial-gradient(circle at 78% 52%, rgba(0,0,0,.35) 0 1.1px, rgba(0,0,0,0) 1.3px),
    /* полотно */
    var(--swatch, #ccc);
  padding:0;
  cursor:pointer;
  position:relative;
  transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease, border-color .25s ease;
  box-shadow:0 6px 16px rgba(15,23,42,.08);
}
.color-picker--detail .color-swatch{
  width:28px;
  height:36px;
}
.color-swatch:hover{
  z-index:2;
}
.color-swatch::before{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:10px;
  border:2px solid rgba(219,0,50,0);
  transition:border-color .25s ease;
}
.color-swatch::after{
  content:attr(data-color);
  position:absolute;
  left:50%;
  bottom:calc(100% + 10px);
  transform:translate(-50%, 2px);
  opacity:0;
  pointer-events:none;
  padding:6px 8px;
  border-radius:10px;
  background:rgba(15,23,42,.92);
  color:#fff;
  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
  white-space:nowrap;
  box-shadow:0 12px 24px rgba(0,0,0,.18);
  transition:opacity .18s ease, transform .18s ease;
}
.color-swatch:hover::after,
.color-swatch:focus-visible::after{
  opacity:1;
  transform:translate(-50%, -2px);
}
.color-swatch::after{
  /* tooltip arrow */
}
.color-swatch::after{
  /* keep single pseudo; arrow via drop-shadow is ok */
}
.color-swatch:hover{
  transform:translateY(-1px) scale(1.08);
  box-shadow:0 10px 22px rgba(15,23,42,.12);
}
.color-swatch.is-active::before{
  border-color:rgba(219,0,50,.7);
}
.color-swatch:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(219,0,50,.18), 0 10px 22px rgba(15,23,42,.12);
}

/* Tooltip label uses ::after and data-color */
.detail-color .detail-size-box__label{
  display:block;
  margin-top:10px;
}

@media (prefers-reduced-motion: reduce){
  .color-swatch,
  .color-swatch::after{
    transition-duration:.01ms !important;
  }
}