:root{
  --white:#FFFFFF;
  --gray-bg:#F5F5F7;
  --gray-2:#EBEBEE;
  --text:#1D1D1F;
  --muted:#6E6E73;
  --accent:#0071E3;
  --accent-hover:#0077ED;
  --accent-2:#5AC8FA;
  --border:#E5E5E7;
  --like:#FF375F;

  --ink:#0A0A0C;
  --ink-2:#141416;
  --ink-3:#1E1E22;
  --ink-text:#F5F5F7;
  --ink-muted:#8E8E93;
  --ink-border:rgba(255,255,255,.08);

  --radius:20px;
  --radius-lg:28px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.04);
  --shadow-md:0 10px 40px rgba(0,0,0,.08);
  --shadow-lg:0 30px 80px rgba(0,0,0,.14);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  color:var(--text);
  background:var(--white);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  font-weight:400;
  overflow-x:hidden;
}
a{color:var(--accent);text-decoration:none;transition:color .2s}
a:hover{color:var(--accent-hover)}
img,svg{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}

.container{max-width:1240px;margin:0 auto;padding:0 24px}
.narrow{max-width:920px;margin:0 auto;padding:0 24px}

/* ============ NAV ============ */
.nav{
  /* НЕ position:sticky. Причина (знайдено й підтверджено реальним тестуванням
     у headless Chromium/WebKit): .nav вставляється в сторінку через
     nav-slot.innerHTML = ... (js/layout.js) — а position:sticky для
     ЕЛЕМЕНТА, ВСТАВЛЕНОГО ЧЕРЕЗ innerHTML ПІСЛЯ первинного парсингу
     сторінки, стабільно НЕ спрацьовує в обох рушіях: computed position
     показує "sticky", але елемент просто їде разом зі скролом, як
     звичайний position:static. Ані форсований reflow, ані перемикання
     position toggle це не лікують. position:fixed — єдиний надійний
     варіант із тим самим способом інʼєкції, тому й вибраний тут.
     #nav-slot (порожня обгортка навколо .nav) отримує висоту navbar-а
     через JS (js/layout.js) — інакше контент під ним підскочить під шапку,
     бо fixed забирає елемент з потоку документа. */
  position:fixed;top:0;left:0;right:0;z-index:100;
}
.nav-bar{
  background:rgba(255,255,255,.72);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,.06);
  transition:background .3s, border-color .3s, color .3s, transform .3s cubic-bezier(.2,.8,.2,1);
}
/* Ховається при скролі вниз, з'являється при скролі вгору або коли
   курсор біля самого верху екрана — керується з initNavAutoHide() у app.js.
   Клас .nav-hidden додається на .nav (семантично «меню приховане»), а сам
   transform візуально застосовується до .nav-bar всередині. */
.nav.nav-hidden .nav-bar{transform:translateY(-100%)}
/* Запобіжник: на мобільному/планшеті бургер лежить всередині .nav — якщо
   меню поїде за межі екрана, дотягнутись до нього дотиком вже нічим
   (наведення мишкою не працює на сенсорному). Тому тут воно завжди видиме,
   незалежно від того, що вирішить JS. */
@media(max-width:820px){
  .nav.nav-hidden .nav-bar{transform:none}
}
.nav.on-dark .nav-bar{
  background:rgba(10,10,12,.55);
  border-bottom-color:rgba(255,255,255,.06);
}
.nav.on-dark .logo,
.nav.on-dark .nav-links a,
.nav.on-dark .cart-link{color:#fff}
.nav.on-dark .burger span{background:#fff}

.nav-inner{
  max-width:1240px;margin:0 auto;
  padding:16px 24px;
  display:flex;align-items:center;
  gap:24px;
}
.logo{
  font-weight:600;font-size:22px;letter-spacing:-.02em;color:var(--text);
  margin-right:auto;
}
.nav-links{display:flex;gap:36px;align-items:center}
.nav-links a{
  color:var(--text);font-size:14px;font-weight:400;
  opacity:.82;transition:opacity .2s, color .2s;
}
.nav-links a:hover{opacity:1;color:var(--text)}
.nav.on-dark .nav-links a:hover{color:#fff;opacity:1}
.nav-links a.active{opacity:1;font-weight:500}
/* Кошик винесено з .nav-links в окремий .nav-right — щоб на мобільному
   він завжди лишався видимим поруч з гамбургером, а не ховався разом з
   рештою пунктів меню всередині випадного списку. */
.nav-right{display:flex;align-items:center;gap:8px}
.search-toggle,.cart-link{
  display:inline-flex;align-items:center;justify-content:center;position:relative;
  width:36px;height:36px;border-radius:50%;
  color:var(--text);opacity:.75;transition:opacity .2s, color .2s, background .2s;
}
.search-toggle:hover,.cart-link:hover{opacity:1;color:var(--text);background:rgba(0,0,0,.05)}
.nav.on-dark .search-toggle:hover,.nav.on-dark .cart-link:hover{color:#fff;background:rgba(255,255,255,.1)}
.search-toggle.active{opacity:1;background:rgba(0,0,0,.06)}
.cart-count{
  position:absolute;top:2px;right:2px;
  background:var(--accent);color:#fff;
  font-size:10px;font-weight:600;
  min-width:16px;height:16px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 4px;line-height:1;
  box-shadow:0 0 0 2px var(--white);
}
.nav.on-dark .cart-count{box-shadow:0 0 0 2px var(--ink)}
.cart-count.empty{display:none}

/* ============ SITE SEARCH (в навбарі) ============ */
.site-search{
  max-height:0;overflow:hidden;
  transition:max-height .3s cubic-bezier(.2,.8,.2,1);
  border-top:1px solid transparent;
}
.site-search.open{max-height:420px;border-top-color:rgba(0,0,0,.06)}
.nav.on-dark .site-search.open{border-top-color:rgba(255,255,255,.08)}
.site-search-inner{
  max-width:1240px;margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;gap:12px;color:var(--muted);
}
.nav.on-dark .site-search-inner{color:var(--ink-muted)}
.site-search-inner input{
  flex:1;border:0;background:none;outline:none;
  font:inherit;font-size:16px;color:var(--text);
}
.nav.on-dark .site-search-inner input{color:#fff}
.site-search-inner input::placeholder{color:var(--muted)}
.nav.on-dark .site-search-inner input::placeholder{color:var(--ink-muted)}
.site-search-close{
  width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:13px;flex-shrink:0;
}
.site-search-close:hover{background:rgba(0,0,0,.06);color:var(--text)}
.site-search-results{
  max-width:1240px;margin:0 auto;padding:0 24px 14px;
  max-height:340px;overflow-y:auto;
}
.search-result{
  display:flex;align-items:center;gap:14px;padding:10px 8px;border-radius:10px;
  color:var(--text);text-decoration:none;
}
.search-result:hover{background:rgba(0,0,0,.05);color:var(--text)}
.nav.on-dark .search-result{color:#fff}
.nav.on-dark .search-result:hover{background:rgba(255,255,255,.08)}
.search-result-thumb{
  width:44px;height:44px;border-radius:8px;overflow:hidden;flex-shrink:0;
  background:var(--gray-bg);display:flex;align-items:center;justify-content:center;
}
.search-result-thumb img{width:100%;height:100%;object-fit:cover}
.search-result-body{min-width:0;flex:1}
.search-result-title{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-result-snippet{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav.on-dark .search-result-snippet{color:var(--ink-muted)}
.search-result-snippet mark,.search-result-title mark{background:none;color:var(--accent);font-weight:600}
.search-result-kind{
  font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-faint,var(--muted));
  flex-shrink:0;
}
.search-group-label{
  font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  padding:12px 8px 6px;
}
.nav.on-dark .search-group-label{color:var(--ink-muted)}
.search-empty{padding:20px 8px;text-align:center;color:var(--muted);font-size:13px}
.nav.on-dark .search-empty{color:var(--ink-muted)}

.burger{display:none;width:28px;height:28px;position:relative}
.burger span{position:absolute;left:4px;right:4px;height:1.5px;background:var(--text);transition:.2s}
.burger span:nth-child(1){top:9px}
.burger span:nth-child(2){top:14px}
.burger span:nth-child(3){top:19px}

@media(max-width:820px){
  .burger{display:block}
  .nav-links{
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;align-items:stretch;
    background:rgba(255,255,255,.98);
    backdrop-filter:blur(20px);
    border-bottom:1px solid var(--border);
    padding:8px 0;display:none;
  }
  .nav.on-dark .nav-links{background:rgba(10,10,12,.98);border-bottom-color:var(--ink-border)}
  .nav-links.open{display:flex}
  .nav-links a{padding:14px 24px;border-bottom:1px solid var(--border)}
  .nav.on-dark .nav-links a{border-bottom-color:var(--ink-border)}
  .nav-links a:last-child{border-bottom:0}
}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 26px;
  border-radius:980px;
  font-size:15px;font-weight:500;letter-spacing:-.005em;
  transition:all .25s cubic-bezier(.2,.8,.2,1);
  cursor:pointer;
  border:1px solid transparent;
  line-height:1.2;white-space:nowrap;
}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hover);color:#fff;transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,113,227,.35)}
.btn-secondary{background:transparent;color:var(--accent)}
.btn-secondary:hover{color:var(--accent-hover)}
.btn-ghost{background:var(--gray-bg);color:var(--text)}
.btn-ghost:hover{background:var(--gray-2)}
.btn-light{background:#fff;color:var(--text);border:1px solid var(--border)}
.btn-light:hover{background:var(--gray-bg)}
.btn-outline-white{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn-outline-white:hover{background:rgba(255,255,255,.1);border-color:#fff}
.btn-white{background:#fff;color:var(--ink)}
.btn-white:hover{background:var(--gray-bg);transform:translateY(-2px)}
.btn-lg{padding:16px 34px;font-size:17px}

/* ============ HERO — LIGHT WITH IMAGE BEHIND TEXT ============ */
.hero-product{
  position:relative;
  min-height:100vh;
  background:#fff;
  overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:24px;
  padding-top:calc(72px + 50px);
  padding-bottom:40px;
  text-align:center;
  margin-top:-72px;
}
/* Чиста картинка як фон, без градієнтного перекриття. */
.hero-product-bg{display:none}
.hero-product{
  background:url('../images/hero.jpg') center bottom / cover no-repeat #fff;
}
.hero-product-overlay{display:none}

.hero-product-text{
  position:relative;z-index:2;
  max-width:1000px;
  margin:0 auto;
}
.hero-product-eyebrow{
  color:var(--accent);
  font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  display:inline-block;
  margin-bottom:20px;
}
.hero-product h1{
  font-size:clamp(38px, 5.6vw, 76px);
  line-height:1.05;
  letter-spacing:-.03em;
  font-weight:600;
  color:var(--text);
  margin-bottom:20px;
}
.hero-product-sub{
  font-size:clamp(17px, 1.4vw, 20px);
  color:var(--muted);
  max-width:600px;
  margin:0 auto 32px;
  line-height:1.45;
  font-weight:400;
}
.hero-product-cta{
  display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
}
/* мобільний вигляд hero — див. "MOBILE REFINEMENTS" внизу файлу */

/* ============ HERO CINEMATIC (legacy — kept for other pages if reused) ============ */
.hero-cinema{
  position:relative;
  min-height:100vh;
  margin-top:-72px; /* pull under sticky nav */
  padding-top:72px;
  color:#fff;
  overflow:hidden;
  background:#0A0A0C;
}
.hero-cinema-bg{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(10,10,12,.35) 0%, rgba(10,10,12,.55) 55%, rgba(10,10,12,.95) 100%),
    url('../images/hero.jpg') center 30%/cover no-repeat,
    radial-gradient(circle at 30% 30%, #1a2540 0%, #0A0A0C 60%);
  will-change:transform;
  transform:translateZ(0);
}
.hero-cinema-content{
  position:relative;z-index:2;
  min-height:calc(100vh - 72px);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 24px 100px;
  max-width:1240px;margin:0 auto;
}
.hero-eyebrow{
  font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent-2);
  margin-bottom:24px;opacity:.9;
}
.hero-cinema h1{
  font-size:clamp(48px, 8vw, 104px);
  line-height:1.02;letter-spacing:-.035em;
  font-weight:600;
  max-width:900px;
  margin-bottom:28px;
}
.hero-cinema .sub{
  font-size:clamp(18px, 1.6vw, 22px);
  color:rgba(255,255,255,.75);
  max-width:560px;line-height:1.45;
  margin-bottom:40px;
  font-weight:400;
}
.hero-cta-row{display:flex;gap:12px;flex-wrap:wrap}
.hero-scroll-hint{
  position:absolute;bottom:36px;left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,.5);font-size:12px;letter-spacing:.15em;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:12px;z-index:3;
}
.hero-scroll-hint::after{
  content:"";width:1px;height:40px;background:linear-gradient(180deg,rgba(255,255,255,.6),transparent);
  animation:scrollHint 2s ease-in-out infinite;
}
@keyframes scrollHint{0%,100%{opacity:.3;transform:scaleY(.5)}50%{opacity:1;transform:scaleY(1)}}

/* ============ STATS BAND (below hero) ============ */
.stats{
  background:var(--ink);color:#fff;
  padding:80px 0;
  border-top:1px solid var(--ink-border);
}
.stats-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:32px;
  text-align:left;
}
@media(max-width:820px){.stats-grid{grid-template-columns:repeat(2,1fr);gap:24px 20px}}
.stat-item{
  padding:8px 0;
  border-left:1px solid var(--ink-border);
  padding-left:24px;
  min-width:0; /* grid-колонки 1fr інакше не стискаються менше за вміст (велика цифра) — саме через це блок вилазив за межі екрана на мобільному */
}
@media(max-width:480px){.stat-item{padding-left:14px}}
.stat-num{
  display:flex;flex-wrap:wrap;align-items:baseline;row-gap:2px;
  font-size:clamp(40px, 4.2vw, 72px);
  font-weight:500;letter-spacing:-.03em;line-height:1.15;
  margin-bottom:12px;
  background:linear-gradient(180deg,#fff 0%, #9c9c9f 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat-num .stat-affix{
  font-size:.32em;font-weight:500;letter-spacing:-.01em;line-height:1.3;
  white-space:pre-wrap; /* у flex-контейнері пробіл на краю тексту елемента інакше обрізається —
                            а саме пробілом у data-prefix/data-suffix тримається відступ від цифри */
}
.stat-label{color:var(--ink-muted);font-size:14px;letter-spacing:.02em;line-height:1.4}

/* ============ SECTIONS ============ */
section{padding:140px 0;position:relative}
@media(max-width:720px){section{padding:90px 0}}
.section-head{text-align:center;margin-bottom:80px}
.section-head .eyebrow{
  color:var(--accent);font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  margin-bottom:16px;display:block;
}
.section-head h2{
  font-size:clamp(38px, 5vw, 60px);
  line-height:1.05;letter-spacing:-.025em;
  font-weight:600;margin-bottom:20px;
}
.section-head p{color:var(--muted);font-size:20px;max-width:640px;margin:0 auto;line-height:1.4}
.dark-theme .section-head h2{color:#fff}
.dark-theme .section-head p{color:var(--ink-muted)}
.section-alt{background:var(--gray-bg)}
.section-dark{
  background:var(--ink);color:#fff;
}
.section-dark h2, .section-dark h3, .section-dark h4{color:#fff}

/* ============ PRODUCT CARDS ============ */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media(max-width:980px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid-4{grid-template-columns:1fr}}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid-3{grid-template-columns:1fr}}

.card{
  background:var(--white);
  border-radius:var(--radius);
  padding:24px;
  box-shadow:none;
  transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s, border-color .3s;
  display:flex;flex-direction:column;
  position:relative;
  border:1px solid #E1E1E4;
  overflow:hidden;
  cursor:pointer;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:#CFCFD4}
.card-badge{
  position:absolute;top:16px;right:16px;
  background:var(--text);color:#fff;
  font-size:11px;font-weight:500;letter-spacing:.02em;
  padding:6px 12px;border-radius:100px;
  z-index:2;
}
.card-image{
  background:#fff;
  border-radius:16px;
  padding:16px;
  margin-bottom:20px;
  aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  position:relative;
}
.card-image img{
  width:100%;height:100%;object-fit:contain;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.card:hover .card-image img{transform:scale(1.05)}
.card-image svg{max-width:75%;max-height:75%}

/* ============ ТОВАР "НЕМАЄ В НАЯВНОСТІ" — приглушено в каталозі, ============
   плашка на фото, форма "повідомити коли з'явиться" замість купівлі */
.card-out-of-stock{cursor:pointer}
.card-out-of-stock .card-image img{filter:grayscale(1);opacity:.55}
.card-out-of-stock h3, .card-out-of-stock .desc, .card-out-of-stock .price{opacity:.6}
.card-oos-plate, .product-oos-plate{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  background:rgba(29,29,31,.86);color:#fff;
  font-size:13px;font-weight:500;letter-spacing:.01em;
  padding:8px 16px;border-radius:14px;z-index:2;
  /* На вузьких картках (компактні мобільні ряди) nowrap-пігулка на всю
     ширину напису обрізалась по краю картки (overflow:hidden на .card) —
     тепер напис переноситься в рамках самої картки замість того, щоб
     вилазити за неї. */
  white-space:normal;text-align:center;line-height:1.3;
  max-width:calc(100% - 20px);box-sizing:border-box;
}
.product-oos-plate{font-size:14px;padding:10px 20px}
.restock-block{padding:20px 22px;background:var(--gray-bg);border-radius:16px}
.restock-notice{margin:0 0 14px;font-size:14px;color:var(--muted);line-height:1.5}
.restock-form{display:flex;flex-direction:column;gap:10px}
.restock-form input{
  width:100%;padding:13px 16px;border:1px solid var(--border);border-radius:12px;
  font-family:inherit;font-size:14px;background:var(--white);color:var(--text);
}
.restock-form input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(0,113,227,.1)}
.restock-compare-link{margin-top:12px;width:100%;text-align:center}

/* ============ ФОТО, ЩО ВАНТАЖИТЬСЯ (спінер) ============ */
.img-slot{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  color:var(--muted);
}
.spinner-ring{
  width:34px;height:34px;max-width:30%;max-height:30%;
  border-radius:50%;
  border:3px solid var(--gray-2);
  border-top-color:var(--accent);
  animation:spinRing .7s linear infinite;
}
@keyframes spinRing{to{transform:rotate(360deg)}}
.img-fade-in{animation:imgFadeIn .35s ease both}
@keyframes imgFadeIn{from{opacity:0} to{opacity:1}}

/* ============ ЗАВАНТАЖЕННЯ ЦІЛОЇ СТОРІНКИ (product.html, blog-post.html) ============ */
.page-loader{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;padding:160px 20px;min-height:50vh;color:var(--muted);
}
.page-loader .spinner-ring{width:44px;height:44px;max-width:none;max-height:none;border-width:3.5px}
.page-loader span{font-size:15px}

/* ============ SKELETON-ЗАГЛУШКИ ============
   Використовують ТІ САМІ класи (.card, .card-image, .card-pills, .pill,
   .card-actions, .btn), що й реальні картки — тому мають ідентичні
   розміри/відступи, і при підміні на реальний вміст сторінка не
   "стрибає" (немає layout shift). */
.shimmer, .card-image.shimmer, .pill.shimmer, .btn.shimmer{
  background:linear-gradient(100deg, var(--gray-bg) 30%, var(--gray-2) 50%, var(--gray-bg) 70%) !important;
  background-size:200% 100%;animation:skeletonShimmer 1.4s ease-in-out infinite;
  border-color:transparent !important;color:transparent !important;box-shadow:none !important;
}
.skeleton-card{cursor:default}
.skeleton-card:hover{transform:none;box-shadow:none;border-color:#E1E1E4}
.skeleton-text{
  display:inline-block;width:100%;height:.9em;border-radius:4px;vertical-align:middle;
  background:linear-gradient(100deg, var(--gray-bg) 30%, var(--gray-2) 50%, var(--gray-bg) 70%);
  background-size:200% 100%;animation:skeletonShimmer 1.4s ease-in-out infinite;
}
@keyframes skeletonShimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}
.card h3{
  font-size:22px;font-weight:600;letter-spacing:-.01em;
  margin-bottom:6px;
}
.card p.desc{color:var(--muted);font-size:14px;line-height:1.5;margin-bottom:16px;flex-grow:1}
.card .price{
  font-size:24px;font-weight:500;letter-spacing:-.01em;
  margin-bottom:18px;
}
.card .card-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.card .card-actions .btn{padding:11px 18px;font-size:14px}
.card .card-actions .btn.btn-primary{flex:1;text-align:center;justify-content:center}

/* --- Іконки-кнопки на картці товару: лайк (= зберегти й додати в
   порівняння) і кошик (= додати в кошик, з попапом вибору стану, якщо їх
   декілька). Кругла форма — щоб візуально не змагатись з "Купити" за
   основну увагу, воно тут головне. --- */
.icon-btn{
  width:40px;height:40px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;border:1px solid var(--border);
  background:var(--white);color:var(--muted);
  transition:border-color .2s,color .2s,background .2s,transform .15s;
}
.icon-btn:hover{border-color:#CFCFD4;color:var(--text)}
.icon-btn:active{transform:scale(.92)}
.icon-btn.cart-icon-btn:hover{border-color:var(--accent);color:var(--accent)}
.icon-btn.like-btn.active{border-color:var(--like);color:var(--like);background:rgba(255,55,95,.08)}

/* ============ PILLS / BADGES ============ */
.card-pills{
  display:flex;flex-wrap:wrap;gap:6px;
  margin-bottom:12px;
}
.pill{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 10px;border-radius:100px;
  font-size:11px;font-weight:500;letter-spacing:.02em;
  line-height:1.4;
}
.pill-brand{
  background:var(--ink);color:#fff;
}
.pill-agg{
  background:rgba(0,113,227,.1);color:var(--accent);
  cursor:help;
}
.pill-agg-no{
  background:var(--gray-bg);color:var(--muted);
}
.pill-brand-inseego{background:#0071E3;color:#fff}
.pill-brand-netgear{background:#111;color:#fff}

/* Inline pills on product page (bigger) */
.product-pills{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-bottom:16px;
}
.product-pills .pill{padding:6px 14px;font-size:12px}

/* ============ CONDITION SWITCHER ============ */
.cond-switcher{
  margin:24px 0 20px;
}
.cond-switcher .label{
  font-size:13px;color:var(--muted);letter-spacing:.02em;margin-bottom:10px;
  text-transform:uppercase;
}
.cond-btns{
  display:flex;flex-wrap:wrap;gap:8px;
  padding:6px;
  background:var(--gray-bg);
  border-radius:14px;
}
.cond-btn{
  flex:1;min-width:140px;
  padding:12px 16px;
  background:transparent;
  border-radius:10px;
  text-align:left;
  transition:background .2s, color .2s, box-shadow .2s;
  border:1px solid transparent;
}
.cond-btn:hover{background:rgba(255,255,255,.5)}
.cond-btn.active{
  background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  border-color:var(--border);
}
.cond-btn-label{
  font-size:14px;font-weight:500;color:var(--text);
  display:block;margin-bottom:2px;
}
.cond-btn-price{
  font-size:13px;color:var(--muted);font-weight:500;
}
.cond-btn.active .cond-btn-price{color:var(--accent)}
.cond-note{
  color:var(--muted);font-size:13px;
  margin-top:12px;line-height:1.5;
}

/* Cart item cond label */
.cart-item-cond{
  font-size:12px;color:var(--muted);
  margin-bottom:2px;
}

/* Accessory pill style */
.pill-accessory{background:#F0EFE4;color:#8B7B4A}

/* ============ FULL-BLEED BANNERS ============ */
.banner{
  position:relative;
  min-height:80vh;
  display:flex;align-items:center;
  color:#fff;
  overflow:hidden;
  padding:80px 0;
}
.banner-bg{
  position:absolute;inset:0;background-size:cover;background-position:center;
  will-change:transform;
}
.banner-overlay{
  position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(10,10,12,.75) 0%, rgba(10,10,12,.35) 100%);
}
.banner.right .banner-overlay{
  background:linear-gradient(270deg, rgba(10,10,12,.75) 0%, rgba(10,10,12,.35) 100%);
}
.banner-content{position:relative;z-index:2;max-width:640px}
.banner.right .banner-content{margin-left:auto;text-align:right}
.banner-eyebrow{
  color:var(--accent-2);font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  margin-bottom:20px;display:block;
}
.banner h2{
  font-size:clamp(38px, 5.5vw, 72px);
  line-height:1.05;letter-spacing:-.03em;
  font-weight:600;margin-bottom:20px;color:#fff;
}
.banner p{
  font-size:20px;line-height:1.5;
  color:rgba(255,255,255,.8);
  margin-bottom:32px;
  max-width:520px;
}
.banner.right p{margin-left:auto}
.banner-bg-speed{
  background-image:
    linear-gradient(135deg,#1a2540 0%,#0A0A0C 100%),
    url('../images/banner-speed.jpg');
  background-blend-mode:multiply;
  background-size:cover;background-position:center;
}
.banner-bg-coverage{
  background-image:
    linear-gradient(135deg,#2a3548 0%,#0A0A0C 100%),
    url('../images/banner-coverage.jpg');
  background-blend-mode:multiply;
  background-size:cover;background-position:center;
}
.banner-bg-cta{
  background-image:
    linear-gradient(135deg,#0071E3 0%,#0A0A0C 100%),
    url('../images/banner-cta.jpg');
  background-blend-mode:multiply;
  background-size:cover;background-position:center;
}

/* Real image via css var (fallback if jpg missing → gradient stays) */
.banner-bg[data-img]{background-image:var(--bg-image)}

/* ============ FEATURES ============ */
.features{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}
.features.features-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.features.features-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.features,.features.features-4{grid-template-columns:1fr;gap:16px}}
.feature{
  padding:44px 32px;
  background:var(--gray-bg);
  border-radius:var(--radius);
  transition:transform .3s, background .3s;
}
.feature:hover{transform:translateY(-4px);background:var(--gray-2)}
.feature-icon{
  width:56px;height:56px;
  background:var(--white);
  border-radius:16px;
  display:inline-flex;align-items:center;justify-content:center;
  margin-bottom:24px;
  box-shadow:var(--shadow-sm);
}
.feature h3{font-size:24px;font-weight:600;margin-bottom:10px;letter-spacing:-.01em}
.feature p{color:var(--muted);font-size:16px;line-height:1.5}

/* ============ ПРОМО "ПІДБІР РОУТЕРА" (на головній, під каталогом) ============ */
.finder-promo{
  display:flex;align-items:center;gap:24px;margin-top:40px;
  padding:28px 32px;border-radius:var(--radius-lg);
  background:rgba(0,113,227,.06);border:1px solid rgba(0,113,227,.14);
  transition:border-color .2s,background .2s;
}
.finder-promo:hover{background:rgba(0,113,227,.1);border-color:rgba(0,113,227,.22)}
.finder-promo-icon{font-size:34px;flex-shrink:0;line-height:1}
.finder-promo-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.finder-promo-text strong{font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--text)}
.finder-promo-text span{color:var(--muted);font-size:14px;line-height:1.4}
.finder-promo .btn{flex-shrink:0;white-space:nowrap;pointer-events:none}
@media(max-width:680px){
  .finder-promo{flex-direction:column;text-align:center;gap:14px;padding:28px 24px}
}

/* ============ TRUST BAR ============ */
.trust{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  padding:56px 32px;
  background:var(--gray-bg);
  border-radius:28px;
}
.trust.trust-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.trust,.trust.trust-4{grid-template-columns:repeat(2,1fr);gap:20px}}
@media(max-width:520px){.trust,.trust.trust-4{grid-template-columns:1fr;text-align:center}}
.trust-item{display:flex;align-items:center;gap:16px;justify-content:center}
.trust-item strong{font-weight:500;font-size:16px}
.trust-item svg{flex-shrink:0}

/* ============ FOOTER ============ */
/* #footer-slot порожній до виконання js/layout.js (вставляє реальний
   футер через innerHTML) — без зарезервованої висоти сторінка спочатку
   малюється з 0px тут, а потім різко "стрибає" вниз, коли футер
   з'являється. Виміряно реальним CLS (PerformanceObserver, той самий
   API, що й Core Web Vitals): 0.43 з 0.47 загального зсуву на товарній
   сторінці йшло саме звідси — набагато більше, ніж від самих фото
   (котрі й так захищені aspect-ratio на .card-image/.product-main-img).
   Значення нижче — заміряна Playwright'ом реальна висота футера на
   кожній ширині екрана; не пікселі-в-піксель (текст може перенестись
   по-різному), але різко зменшує стрибок замість його повної відсутності. */
#footer-slot{min-height:480px}
@media(max-width:820px){
  #footer-slot{min-height:1000px}
}
footer{
  background:var(--ink);color:var(--ink-text);
  padding:80px 0 40px;
}
.footer-grid{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:44px;
  margin-bottom:60px;
}
@media(max-width:820px){.footer-grid{grid-template-columns:1fr 1fr;gap:40px}}
.footer-col h4{font-size:12px;font-weight:600;margin-bottom:20px;color:#fff;letter-spacing:.08em;text-transform:uppercase}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:12px}
.footer-col a{color:var(--ink-muted);font-size:14px}
.footer-col a:hover{color:#fff}
.footer-brand{font-weight:600;font-size:22px;margin-bottom:16px;color:#fff}
.footer-brand-text{color:var(--ink-muted);font-size:14px;line-height:1.6;max-width:320px}
.footer-bottom{
  border-top:1px solid var(--ink-border);padding-top:32px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  color:var(--ink-muted);font-size:12px;
}
.footer-bottom a{color:var(--ink-muted);text-decoration:underline}
.footer-bottom a:hover{color:#fff}

/* ============ CATALOG ============ */
.catalog-hero{
  padding:100px 0 40px;
  text-align:center;
  /* position+z-index тут — не косметика: усередині лежить .blog-search-wrap
     (випадний список пошуку блогу), а сам .catalog-hero — position:static
     без цього. Нижче по DOM є ще один position:relative <section> (з
     фільтрами) без власного z-index — і без цього правила саме він
     переможе в порядку малювання й ляже ПОВЕРХ випадного списку пошуку,
     хай там і стоїть z-index глибше в дереві. */
  position:relative;z-index:5;
}
.catalog-hero h1{font-size:clamp(44px,6vw,72px);font-weight:600;letter-spacing:-.03em;margin-bottom:16px}
.catalog-hero p{color:var(--muted);font-size:20px;max-width:600px;margin:0 auto}

.catalog-layout{
  display:grid;grid-template-columns:280px 1fr;gap:56px;
  padding:60px 0 140px;
}
@media(max-width:900px){.catalog-layout{grid-template-columns:1fr;gap:32px}}
.filter-sidebar{
  background:var(--gray-bg);
  border-radius:var(--radius);
  padding:28px;
  height:fit-content;
  position:sticky;top:100px;
}
.filter-group{margin-bottom:28px}
.filter-group:last-child{margin-bottom:0}
.filter-group h4{font-size:12px;font-weight:600;margin-bottom:14px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.filter-option{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:14px;cursor:pointer}
.filter-option input{accent-color:var(--accent);cursor:pointer}
.filter-range{width:100%;accent-color:var(--accent)}
.filter-reset{
  font-size:13px;color:var(--accent);cursor:pointer;
  margin-top:12px;padding:0;
}
.catalog-header{
  display:flex;justify-content:space-between;align-items:baseline;margin-bottom:32px;
  flex-wrap:wrap;gap:12px;
}
.catalog-count{color:var(--muted);font-size:14px}
.catalog-header-actions{display:flex;gap:10px;flex-wrap:wrap}
/* На мобільному лічильник ("5 моделей") прибираємо — з кнопками (особливо
   всі три: 4G/5G/Порівняти) на вузькому екрані і без нього тісно, а сам
   лічильник — другорядна інформація, без якої легко обійтись. Самі кнопки
   мають лишатись в один рядок (не переноситись) — компактніші й, якщо все
   одно не влазять, з горизонтальним скролом замість переносу на другий рядок. */
@media(max-width:560px){
  .catalog-count{display:none}
  .catalog-header{justify-content:center}
  .catalog-header-actions{
    width:100%;flex-wrap:nowrap;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding-bottom:2px; /* трохи місця, щоб тінь фокусу кнопки не обрізалась */
  }
  .catalog-header-actions::-webkit-scrollbar{display:none}
  .catalog-header-actions .btn{flex-shrink:0;padding:9px 16px;font-size:13px}
}
.catalog-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
@media(max-width:1140px){.catalog-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.catalog-grid{grid-template-columns:1fr}}

/* ============ PRODUCT PAGE ============ */
/* padding-top/bottom, а НЕ скорочений "padding:60px 0 120px" — цей елемент
   одночасно .container (padding:0 24px), і 3-значний shorthand обнуляв би
   бокові відступи .container, притискаючи весь контент до країв екрана. */
.product-page{padding-top:60px;padding-bottom:120px}
.crumbs{color:var(--muted);font-size:13px;margin-bottom:40px;letter-spacing:.02em}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--text)}
.back-link{
  display:inline-flex;align-items:center;gap:6px;
  font-size:14px;font-weight:500;color:var(--text);
  margin-bottom:20px;
}
.back-link:hover{color:var(--accent)}
.back-link svg{flex-shrink:0;transition:transform .2s}
.back-link:hover svg{transform:translateX(-3px)}
.product-layout{
  display:grid;grid-template-columns:1.3fr 1fr;gap:80px;align-items:start;
}
@media(max-width:980px){.product-layout{grid-template-columns:1fr;gap:40px}}
.product-visual{
  position:sticky;top:100px;
}
@media(max-width:980px){.product-visual{position:static}}

.product-gallery{display:flex;flex-direction:column;gap:16px}
.product-main-img{
  position:relative;
  background:#fff;
  border:1px solid #E1E1E4;
  border-radius:24px;
  padding:32px;
  aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.product-main-img img{
  max-width:100%;max-height:100%;object-fit:contain;
  transition:opacity .3s ease;
}
.product-main-img svg{max-width:80%;max-height:80%}
@media(max-width:720px){
  .product-main-img{padding:20px;border-radius:20px}
}

/* Стрілки прокрутки фото поверх головного зображення */
.gallery-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.92);
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  color:var(--text);
  box-shadow:var(--shadow-sm);
  cursor:pointer;z-index:2;
  transition:background .2s, box-shadow .2s, transform .2s;
}
.gallery-nav:hover{background:#fff;box-shadow:var(--shadow-md)}
.gallery-nav:active{transform:translateY(-50%) scale(.92)}
.gallery-nav-prev{left:14px}
.gallery-nav-next{right:14px}
@media(max-width:720px){
  .gallery-nav{width:34px;height:34px}
  .gallery-nav-prev{left:8px}
  .gallery-nav-next{right:8px}
}

.product-thumbs{
  display:flex;gap:10px;flex-wrap:wrap;
}
.product-thumb{
  flex:0 0 auto;
  width:76px;height:76px;
  background:var(--gray-bg);
  border-radius:14px;
  padding:8px;
  cursor:pointer;
  border:2px solid transparent;
  transition:border-color .2s, transform .2s, background .2s;
  overflow:hidden;
}
.product-thumb:hover{background:var(--gray-2);transform:translateY(-2px)}
.product-thumb.active{border-color:var(--accent);background:#fff}
.product-thumb img{width:100%;height:100%;object-fit:contain;display:block}
@media(max-width:720px){
  .product-thumb{width:64px;height:64px;padding:6px;border-radius:12px}
}
.product-info h1{font-size:clamp(36px,4vw,52px);letter-spacing:-.025em;font-weight:600;margin-bottom:14px;line-height:1.05}
.product-tagline{color:var(--muted);font-size:19px;line-height:1.5;margin-bottom:32px}
.product-price{font-size:36px;font-weight:500;letter-spacing:-.015em;margin-bottom:14px}
.product-military{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;
  background:rgba(0,113,227,.08);
  color:var(--accent);
  border-radius:100px;
  font-size:13px;font-weight:500;line-height:1.4;
  margin-bottom:28px;
}
.product-military:empty{display:none}
.product-military strong{font-weight:600}
.product-desc{
  color:var(--text);font-size:17px;line-height:1.6;
  margin:32px 0;padding:28px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.product-buttons{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:8px}

.spec-table{
  width:100%;border-collapse:collapse;
  margin-top:8px;
}
.spec-table tr{border-bottom:1px solid var(--border)}
.spec-table tr:last-child{border-bottom:0}
.spec-table th, .spec-table td{
  padding:18px 0;text-align:left;font-size:15px;
  font-weight:400;vertical-align:top;
}
.spec-table th{color:var(--muted);width:45%;font-weight:400}
.spec-table td{color:var(--text);font-weight:500}

/* ---- Чіпи для булевих/акцентних полів у таблиці характеристик (мережа,
   агрегація, Ethernet-порт) — щоб виділялись з першого погляду, а не
   губились серед звичайного тексту специфікацій. ---- */
.spec-chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;border-radius:100px;
  font-size:12.5px;font-weight:500;
}
.spec-chip svg{flex-shrink:0}
.spec-chip-network{background:rgba(0,113,227,.1);color:var(--accent)}
.spec-chip-yes{background:rgba(52,199,89,.12);color:#1F8A3B}
.spec-chip-no{background:var(--gray-bg);color:var(--muted)}

/* ---- "Показати ще характеристики" — рядки .spec-extra-row стартують
   схованими (display:none інлайном), кнопка їх розкриває. Використовується
   і на сторінці товару (.spec-table), і в порівнянні (.compare-table і
   мобільні .spec-table картки) — toggleSpecRows() у js/app.js. ---- */
.spec-toggle-row td{padding:0;border-bottom:0}
.spec-toggle-btn{
  width:100%;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:16px 0;color:var(--accent);font-size:13px;font-weight:500;
  border-top:1px solid var(--border);
}
.spec-toggle-btn:hover{background:var(--gray-bg)}
.spec-toggle-chevron{transition:transform .2s}
.spec-toggle-btn.open .spec-toggle-chevron{transform:rotate(180deg)}

/* ============ BLOG ============ */
.blog-card-image{
  background:var(--gray-bg);border-radius:16px;margin-bottom:20px;
  aspect-ratio:16/9;overflow:hidden;position:relative;
}
.blog-card-image img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.card:hover .blog-card-image img{transform:scale(1.05)}
.blog-card-meta{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted);margin-bottom:10px;letter-spacing:.02em}
.blog-card-category{color:var(--accent);font-weight:500}
.blog-empty{grid-column:1/-1;text-align:center;padding:80px 0;color:var(--muted)}

/* --- Картка статті при наведенні трохи підростає (transform — не впливає
   на розмітку) і показує панель із повним описом. Ця панель — position:absolute
   і кріпиться під карткою (top:100%), тому вона НЕ змінює висоту картки в
   гріді й не зсуває сусідні блоки нижче — просто перекриває їх зверху,
   поки курсор на картці. --- */
.card.blog-card{position:relative;overflow:visible;transform-origin:top center}
.card.blog-card:hover{
  transform:scale(1.03);
  z-index:6;border-color:#CFCFD4;
  /* Низ картки стає квадратним і без власного бордера — інакше на стику з
     панеллю знизу видно заокруглений "хвостик" і подвійну лінію, і панель
     виглядає відірваним окремим блоком, а не продовженням картки. Власну
     тінь картки на hover теж прибираємо — тінь для всієї фігури дає панель
     знизу (.blog-card-overlay), інакше на стику дублюються дві тіні. */
  border-radius:var(--radius) var(--radius) 0 0;
  border-bottom-color:transparent;
  box-shadow:none;
}
.card.blog-card p.desc{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  max-height:3.4em;overflow:hidden;
}
.blog-card-overlay{
  position:absolute;left:0;right:0;top:100%;
  background:var(--white);border:1px solid #CFCFD4;border-top:0;
  border-radius:0 0 var(--radius) var(--radius);
  box-shadow:var(--shadow-lg);
  padding:0 24px;max-height:0;opacity:0;overflow:hidden;pointer-events:none;
  transition:max-height .35s cubic-bezier(.2,.8,.2,1), opacity .3s, padding .35s;
}
.blog-card-overlay p{color:var(--muted);font-size:14px;line-height:1.5;margin:0}
.blog-card-overlay .blog-card-more{display:block;color:var(--accent);font-size:13px;font-weight:500;margin-top:10px}
.card.blog-card:hover .blog-card-overlay{max-height:160px;opacity:1;padding:16px 24px 20px;pointer-events:auto}

/* Підсвічування збігу при переході зі пошуку (як у результатах пошуку,
   так і на самій сторінці статті — js/blog-post.js) */
mark, .search-highlight{
  background:var(--accent-soft, #E8EDFF);color:var(--accent);
  padding:0 2px;border-radius:3px;font-weight:600;
}

/* --- Пошук і фільтри на сторінці /blog/ --- */
/* z-index:20 тут обов'язковий, а не косметичний: .blog-search-wrap лежить у
   непозиціонованому .catalog-hero, а нижче по DOM є ще один position:relative
   елемент (<section> з фільтрами) без власного z-index. Без явного z-index
   тут випадний список пошуку програє порядок малювання тій секції цілком —
   фільтри намальовуються ПОВЕРХ нього, хоч у самого списку z-index:30. */
.blog-search-wrap{max-width:480px;margin:28px auto 0;position:relative;z-index:20;text-align:left}
.blog-search{
  display:flex;align-items:center;gap:10px;
  padding:14px 18px;border-radius:100px;
  border:1px solid var(--border);background:var(--white);
  transition:border-color .2s, box-shadow .2s;
}
.blog-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px rgba(0,113,227,.1)}
.blog-search svg{color:var(--muted);flex-shrink:0}
.blog-search input{
  flex:1;border:0;outline:none;background:none;font:inherit;font-size:15px;color:var(--text);
}
.blog-search input::placeholder{color:var(--muted)}
/* Випадний список результатів під полем — той самий патерн, що й пошук
   у навбарі (js/app.js): нічого на сторінці не скролить і не фільтрує,
   просто показує знайдені статті прямо тут. */
.blog-search-results{
  display:none;position:absolute;left:0;right:0;top:calc(100% + 8px);
  background:var(--white);border:1px solid var(--border);border-radius:16px;
  box-shadow:var(--shadow-md);max-height:360px;overflow-y:auto;
  padding:6px;z-index:30;text-align:left;
}
.blog-search-results.open{display:block}

.filter-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:32px}
/* Каталог /routers/: рядок з категорією зліва і кнопкою "Порівняти" справа
   в тому самому рядку (а не окремим блоком кнопок над сіткою) — тому
   .filter-bar всередині цієї обгортки без власного нижнього відступу. */
.catalog-filter-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:8px}
.catalog-filter-row .filter-bar{margin-bottom:0}
@media(max-width:560px){.catalog-filter-row .btn{padding:9px 16px;font-size:13px}}
.filter-group-label{font-size:12px;color:var(--muted);margin-right:2px}
.filter-chip{
  padding:8px 14px;border-radius:100px;border:1px solid var(--border);
  font-size:13px;font-weight:500;color:var(--text);background:var(--white);
  transition:border-color .2s,background .2s,color .2s;
}
.filter-chip:hover{border-color:#CFCFD4}
.filter-chip.active{background:var(--text);border-color:var(--text);color:#fff}
.filter-divider{width:1px;height:20px;background:var(--border);margin:0 6px}
@media(max-width:640px){.filter-divider{display:none;width:100%;height:0}}
.filter-select{
  padding:8px 34px 8px 14px;border-radius:100px;border:1px solid var(--border);
  font-size:13px;font-weight:500;color:var(--text);background:var(--white);
  font-family:inherit;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236E6E73' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
.filter-select:hover{border-color:#CFCFD4}

/* ---- Пагінація ---- */
.pagination{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:48px}
.page-btn{
  padding:10px 18px;border-radius:100px;border:1px solid var(--border);
  font-size:14px;font-weight:500;color:var(--text);background:var(--white);
  transition:border-color .2s,background .2s;
}
.page-btn:hover:not(:disabled){border-color:#CFCFD4;background:var(--gray-bg)}
.page-btn:disabled{opacity:.35;cursor:default}
.page-info{font-size:13px;color:var(--muted)}

.blog-post{max-width:760px;margin:0 auto;padding:80px 24px 120px}
.blog-post-cover{width:100%;border-radius:var(--radius-lg);margin-bottom:36px;aspect-ratio:16/9;overflow:hidden;background:var(--gray-bg)}
.blog-post-cover img{width:100%;height:100%;object-fit:cover}
.blog-post-meta{display:flex;gap:14px;align-items:center;font-size:13px;color:var(--muted);margin-bottom:16px}
.blog-post h1{font-size:clamp(30px,4vw,44px);line-height:1.1;letter-spacing:-.02em;margin-bottom:24px}
.blog-post-body{font-size:17px;line-height:1.75;color:var(--text)}
.blog-post-body h2{font-size:26px;margin:40px 0 16px;letter-spacing:-.01em}
.blog-post-body h3{font-size:20px;margin:32px 0 12px}
.blog-post-body p{margin-bottom:18px}
.blog-post-body ul, .blog-post-body ol{margin:0 0 18px 22px}
.blog-post-body li{margin-bottom:6px}
.blog-post-body img{border-radius:16px;margin:24px 0}
.blog-post-body a{text-decoration:underline}
/* {{product:slug}} у тексті статті — реальна картка каталогу, але не на
   всю ширину колонки тексту (виглядало б як банер), а компактно й по
   центру, з явним відступом від абзаців навколо. */
.blog-product-card{max-width:320px;margin:32px auto;text-decoration:none}
.blog-product-card .card{cursor:pointer}
.blog-post-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:40px}
.blog-post-tags .pill{background:var(--gray-bg);color:var(--muted)}

.box-contents{
  background:var(--gray-bg);
  border-radius:var(--radius);
  padding:40px;
  margin-top:80px;
}
.box-contents h3{font-size:26px;font-weight:600;margin-bottom:20px;letter-spacing:-.01em}
.box-contents ul{list-style:none}
.box-contents li{
  padding:14px 0;border-bottom:1px solid rgba(0,0,0,.06);
  display:flex;align-items:center;gap:14px;font-size:16px;
}
.box-contents li:last-child{border-bottom:0}
.box-contents li::before{
  content:"";width:8px;height:8px;background:var(--accent);border-radius:50%;flex-shrink:0;
}

/* ============ COMPARE ============ */
.compare-hero{
  padding:100px 0 40px;text-align:center;
}
.compare-hero h1{font-size:clamp(44px,6vw,72px);font-weight:600;letter-spacing:-.03em;margin-bottom:16px}
.compare-hero p{color:var(--muted);font-size:20px;max-width:600px;margin:0 auto}
.compare-page{padding:40px 0 140px}

/* ---- Порожній стан — коли ще нічого не позначено ⚖. ---- */
.compare-empty{
  text-align:center;color:var(--muted);
  padding:64px 24px;border:1px dashed var(--border);border-radius:var(--radius);
  margin-bottom:24px;
}
.compare-empty svg{margin:0 auto 16px;color:var(--muted)}
.compare-empty p{font-size:17px;font-weight:500;color:var(--text);margin-bottom:8px}
.compare-empty .compare-empty-hint{
  font-size:14px;font-weight:400;color:var(--muted);
  max-width:420px;margin:0 auto 20px;line-height:1.5;
}
.compare-empty .compare-add-wrap{display:inline-block;margin:0 auto 20px}

/* ---- Один цільний блок: панель "лічильник + додати товар" зверху,
   впритул до самої таблиці/карток під нею — раніше це були два окремі,
   візуально розірвані елементи (селект висів у кутку сторінки окремо від
   таблиці), тепер це одна картка з спільною рамкою й тінню. ---- */
.compare-card{
  border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow-md);
  overflow:hidden;background:var(--white);
}
.compare-controls{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:12px;padding:16px 20px;
  background:var(--gray-bg);border-bottom:1px solid var(--border);
}
.compare-count{color:var(--muted);font-size:14px}

/* ---- "Додати товар" — багате випадне меню (пошук + фото/назва/ціна
   роутерів), а не голий <select>. Той самий патерн, що й пошук у навбарі
   (.site-search-results/.search-result), лише прив'язаний до кнопки. ---- */
.compare-add-wrap{position:relative}
/* position:fixed, не absolute — точні left/top виставляє JS
   (compareToggleAddPanel) через getBoundingClientRect() кнопки, з
   обмеженням у межах екрана. Раніше було absolute+right:0 відносно
   кнопки — на вузьких екранах кнопка не завжди сидить біля самого
   правого краю (тулбар ділить простір із лічильником зліва), тож
   320px-панель тягнулась ЗА лівий край екрана (виміряно: до -109px).
   text-align:left — .compare-empty центрує кнопку/wrap текстом. */
.compare-add-panel{
  display:none;position:fixed;
  width:320px;max-width:calc(100vw - 32px);
  background:var(--white);border:1px solid var(--border);border-radius:16px;
  box-shadow:var(--shadow-md);z-index:30;overflow:hidden;text-align:left;
}
.compare-add-panel.open{display:block}
.compare-add-search{
  display:flex;align-items:center;gap:8px;padding:12px 14px;
  border-bottom:1px solid var(--border);color:var(--muted);
}
.compare-add-search input{
  flex:1;border:0;outline:none;background:none;font:inherit;font-size:14px;color:var(--text);
}
.compare-add-search input::placeholder{color:var(--muted)}
.compare-add-list{max-height:300px;overflow-y:auto;padding:6px}
.compare-add-item{
  width:100%;display:flex;align-items:center;gap:12px;
  padding:8px;border-radius:10px;text-align:left;color:var(--text);
}
.compare-add-item:hover{background:var(--gray-bg)}
.compare-add-item-thumb{
  width:44px;height:44px;border-radius:8px;overflow:hidden;flex-shrink:0;
  background:var(--gray-bg);display:flex;align-items:center;justify-content:center;
}
.compare-add-item-thumb img{width:100%;height:100%;object-fit:contain}
.compare-add-item-body{min-width:0;flex:1}
.compare-add-item-name{font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.compare-add-item-price{font-size:12.5px;color:var(--muted)}
.compare-add-empty{padding:20px 8px;text-align:center;color:var(--muted);font-size:13px}
.compare-remove{
  position:absolute;top:12px;right:12px;z-index:2;
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--white);border:1.5px solid var(--border);color:var(--text);
  box-shadow:var(--shadow-sm);
  font-size:15px;line-height:1;
  transition:border-color .2s,color .2s,background .2s;
}
.compare-remove:hover{border-color:var(--like);color:var(--like);background:rgba(255,55,95,.08)}
.compare-wrapper{overflow-x:auto}
.compare-table{width:100%;border-collapse:collapse;table-layout:fixed;background:var(--white);min-width:900px}
.compare-table th, .compare-table td{
  padding:14px 12px;text-align:left;
  font-size:13px;border-bottom:1px solid var(--border);
  vertical-align:top;word-wrap:break-word;
}
.compare-table thead th{
  background:var(--gray-bg);font-weight:600;font-size:14px;
  padding:20px 12px;position:relative;
}
/* Раніше — величезний логотип-напис на всю висоту колонки, що сам по собі
   "з'їдав" третину ширини таблиці під порожнім місцем зліва. Тепер — та ж
   ширина, що й у колонки з назвами характеристик нижче (140px): рядок
   просто підписаний, а не рекламує бренд. */
.compare-table thead th.compare-brand-cell{
  width:140px;
  background:var(--gray-bg);
  text-align:left;vertical-align:bottom;
  font-size:13px;font-weight:500;letter-spacing:0;
  color:var(--muted);
}
/* Перший стовпець (назви характеристик) лишається на місці під час
   горизонтального скролу таблиці на вузьких екранах — інакше на телефоні,
   прокрутивши вбік, людина бачить самі значення без підпису, що саме
   порівнює. Свій background обов'язковий: без нього крізь sticky-комірку
   видно вміст сусідніх стовпців, що проїжджають під нею при скролі. */
.compare-table thead th.compare-brand-cell{position:sticky;left:0;z-index:2}
.compare-table tbody th{
  color:var(--muted);font-weight:400;width:140px;font-size:13px;
  position:sticky;left:0;z-index:1;background:var(--white);
}
/* max-width тут — суть фіксу "фото на пів екрана": колонка на широкому
   столі з 1-2 товарами лишається широкою (table-layout:fixed ділить
   всю ширину порівну), але вміст усередині більше не розтягується під
   неї — фото/кнопка мають нормальний, а не гігантський розмір. */
.compare-th-inner{
  display:flex;flex-direction:column;align-items:center;
  gap:0;min-width:0;
  max-width:180px;margin:0 auto;
}
.compare-table .compare-img{
  aspect-ratio:1/1;
  background:#fff;
  border:1px solid #E1E1E4;
  border-radius:12px;
  padding:10px;
  margin-bottom:12px;
  display:flex;align-items:center;justify-content:center;
  width:100%;max-width:100%;
}
.compare-table .compare-img img{width:100%;height:100%;object-fit:contain}
.compare-name{
  min-height:48px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-weight:600;font-size:14px;letter-spacing:-.005em;line-height:1.25;
  padding:0 2px;
}
.compare-price{
  min-height:32px;
  display:flex;align-items:center;
  font-size:19px;font-weight:500;letter-spacing:-.01em;
  margin:6px 0 12px;
}
.compare-cta{width:100%;text-align:center;justify-content:center;padding:10px 12px;font-size:13px}
/* "Показати ще характеристики" усередині compare-table (вищий пріоритет,
   ніж загальне .compare-table td — інакше рядок дістає їхній border/padding). */
.compare-table .spec-toggle-row td{padding:0;border-bottom:0}

/* ---- Мобільна версія порівняння (патерн з Rozetka) — прихована на
   десктопі, показується замість .compare-wrapper на вузьких екранах.
   Детальніше про причину — коментар над #compare-mobile у compare.html. ---- */
.compare-mobile{display:none}
.compare-mobile-strip{
  display:flex;gap:12px;overflow-x:auto;padding:16px;
  scroll-snap-type:x proximity;
}
.compare-mobile-card{
  scroll-snap-align:start;flex:0 0 132px;position:relative;
  border:1px solid var(--border);border-radius:14px;padding:12px 10px;
  border-top:3px solid var(--c);background:var(--white);
}
.compare-mobile-card .compare-remove{top:6px;right:6px;width:26px;height:26px;font-size:12px}
.compare-mobile-card-img{
  aspect-ratio:1/1;background:#fff;border:1px solid var(--border);border-radius:10px;
  padding:8px;margin-bottom:8px;display:flex;align-items:center;justify-content:center;
}
.compare-mobile-card-img img{width:100%;height:100%;object-fit:contain}
.compare-mobile-card-name{
  font-size:12.5px;font-weight:600;line-height:1.25;min-height:32px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.compare-mobile-card-price{font-size:14px;font-weight:600;margin:4px 0 8px}
.compare-mobile-card-cta{width:100%;text-align:center;justify-content:center;padding:7px;font-size:12px}

.compare-mobile-controls{
  display:flex;justify-content:flex-end;padding:0 16px 14px;border-bottom:1px solid var(--border);
}
.compare-diff-toggle{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text);cursor:pointer}
.toggle-switch{position:relative;display:inline-block;width:38px;height:22px;flex-shrink:0}
.toggle-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.toggle-switch-track{
  position:absolute;inset:0;background:var(--gray-2);border-radius:20px;transition:background .2s;
}
.toggle-switch-track::before{
  content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;
  background:var(--white);border-radius:50%;box-shadow:var(--shadow-sm);transition:transform .2s;
}
.toggle-switch input:checked + .toggle-switch-track{background:var(--accent)}
.toggle-switch input:checked + .toggle-switch-track::before{transform:translateX(16px)}

.compare-mobile-rows{padding:4px 16px 16px}
.compare-mobile-spec{padding:16px 0;border-bottom:1px solid var(--border)}
.compare-mobile-spec:last-of-type{border-bottom:0}
.compare-mobile-spec-label{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.02em;margin-bottom:10px}
.compare-mobile-spec-row{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:13.5px}
.compare-mobile-spec-dot{width:8px;height:8px;border-radius:50%;background:var(--c);flex-shrink:0}
.compare-mobile-spec-pname{
  color:var(--muted);flex:0 0 auto;max-width:34%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.compare-mobile-spec-val{margin-left:auto;text-align:right;font-weight:500}
.compare-mobile-extra{display:contents}
@media(max-width:720px){
  .compare-wrapper{display:none}
  .compare-mobile{display:block}
}

/* ============ SUPPORT ============ */
.support-hero{padding:100px 0 40px;text-align:center}
.support-hero h1{font-size:clamp(44px,6vw,72px);font-weight:600;letter-spacing:-.03em;margin-bottom:16px}
.support-hero p{color:var(--muted);font-size:20px;max-width:600px;margin:0 auto}
.support-page{padding:40px 0 140px}
.faq{max-width:800px;margin:0 auto 100px}
.faq-item{border-bottom:1px solid var(--border)}
.faq-question{
  width:100%;text-align:left;padding:28px 0;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  font-size:19px;font-weight:500;letter-spacing:-.005em;
  color:var(--text);
}
.faq-question .plus{
  width:28px;height:28px;position:relative;flex-shrink:0;
  border-radius:50%;background:var(--gray-bg);
  transition:transform .3s ease, background .3s;
}
.faq-question:hover .plus{background:var(--gray-2)}
.faq-question .plus::before,.faq-question .plus::after{
  content:"";position:absolute;background:var(--text);
  left:50%;top:50%;
}
.faq-question .plus::before{width:12px;height:1.5px;transform:translate(-50%,-50%)}
.faq-question .plus::after{width:1.5px;height:12px;transform:translate(-50%,-50%);transition:opacity .3s}
.faq-item.open .plus::after{opacity:0}
.faq-item.open .plus{background:var(--accent);}
.faq-item.open .plus::before{background:#fff}
.faq-answer{
  max-height:0;overflow:hidden;
  color:var(--muted);font-size:16px;line-height:1.6;
  transition:max-height .35s ease, padding .35s ease;
}
.faq-item.open .faq-answer{padding:0 0 28px;max-height:400px}

.contact-block{
  display:grid;grid-template-columns:1fr 1fr;gap:60px;
  max-width:1000px;margin:0 auto;
}
@media(max-width:820px){.contact-block{grid-template-columns:1fr;gap:40px}}
.contact-form h3, .contact-info h3{font-size:28px;font-weight:600;margin-bottom:28px;letter-spacing:-.015em}
.form-row{margin-bottom:18px}
.form-row label{
  display:block;font-size:13px;color:var(--muted);margin-bottom:8px;
}
.form-row input, .form-row textarea, .form-row select{
  width:100%;padding:16px 18px;
  border:1px solid var(--border);
  border-radius:14px;
  font-family:inherit;font-size:15px;
  background:var(--white);color:var(--text);
  transition:border-color .2s, box-shadow .2s;
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(0,113,227,.1);
}
.form-row textarea{resize:vertical;min-height:130px}
.form-row select{
  appearance:none;padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2386868B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;
}
.form-row select:disabled,.form-row select option:disabled{color:var(--muted)}
.contact-info-item{padding:18px 0;border-bottom:1px solid var(--border)}
.contact-info-item:last-child{border-bottom:0}
.contact-info-item .label{font-size:12px;color:var(--muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.05em}
.contact-info-item .value{font-size:17px;color:var(--text)}

/* ============ CART DRAWER ============ */
.cart-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.5);
  z-index:200;opacity:0;pointer-events:none;transition:opacity .3s;
  backdrop-filter:blur(4px);
}
.cart-overlay.open{opacity:1;pointer-events:auto}
.cart-drawer{
  position:fixed;top:0;right:0;bottom:0;
  width:100%;max-width:460px;
  background:var(--white);z-index:201;
  transform:translateX(100%);transition:transform .4s cubic-bezier(.2,.8,.2,1);
  display:flex;flex-direction:column;
  box-shadow:-20px 0 60px rgba(0,0,0,.2);
}
.cart-drawer.open{transform:translateX(0)}
.cart-head{
  padding:28px;display:flex;justify-content:space-between;align-items:center;
  border-bottom:1px solid var(--border);
}
.cart-head h2{font-size:22px;font-weight:600;letter-spacing:-.01em}
.cart-my-orders-link{font-size:13px;color:var(--muted);white-space:nowrap}
.cart-my-orders-link:hover{color:var(--accent)}
.cart-close{
  width:36px;height:36px;border-radius:50%;
  background:var(--gray-bg);
  display:flex;align-items:center;justify-content:center;font-size:16px;
}
.cart-close:hover{background:var(--gray-2)}
.cart-body{flex:1;overflow-y:auto;padding:16px 28px}
.cart-empty{text-align:center;padding:60px 20px;color:var(--muted)}
.cart-empty p{margin-bottom:24px;font-size:15px}
.cart-item{
  display:flex;gap:16px;padding:20px 0;border-bottom:1px solid var(--border);
}
.cart-item:last-child{border-bottom:0}
.cart-item-img{
  width:80px;height:80px;background:var(--gray-bg);border-radius:14px;
  flex-shrink:0;padding:10px;display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.cart-item-img img{width:100%;height:100%;object-fit:contain}
.cart-item-info{flex:1;min-width:0}
.cart-item-name{font-weight:500;font-size:16px;margin-bottom:4px}
.cart-item-price{color:var(--muted);font-size:13px}
.cart-item-controls{display:flex;align-items:center;gap:10px;margin-top:12px}
.qty-btn{
  width:28px;height:28px;border-radius:50%;background:var(--gray-bg);
  display:inline-flex;align-items:center;justify-content:center;font-size:14px;
}
.qty-btn:hover{background:var(--gray-2)}
.qty{min-width:20px;text-align:center;font-size:14px;font-weight:500}
.cart-item-remove{
  margin-left:auto;color:var(--muted);
  display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;
  transition:background .2s,color .2s;
}
.cart-item-remove:hover{color:var(--like);background:var(--gray-bg)}
.cart-foot{
  padding:24px 28px 32px;border-top:1px solid var(--border);
  background:var(--white);
}
.cart-military-note{
  display:flex;align-items:center;gap:8px;
  padding:10px 14px;
  background:rgba(0,113,227,.08);
  color:var(--accent);
  border-radius:12px;
  font-size:13px;font-weight:500;
  margin-bottom:16px;
}
.cart-military-note strong{font-weight:600}
.cart-total{
  display:flex;justify-content:space-between;
  margin-bottom:20px;font-size:18px;
}
.cart-total strong{font-weight:600}
.cart-foot .btn{width:100%;text-align:center}

/* ============ CHECKOUT MODAL ============ */
.checkout-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.5);
  z-index:210;opacity:0;pointer-events:none;transition:opacity .3s;
  backdrop-filter:blur(4px);
}
.checkout-overlay.open{opacity:1;pointer-events:auto}
.checkout-modal{
  position:fixed;top:50%;left:50%;
  transform:translate(-50%,-46%) scale(.97);
  width:100%;max-width:480px;max-height:88vh;
  background:var(--white);z-index:211;border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;overflow:hidden;
  opacity:0;pointer-events:none;
  transition:opacity .3s, transform .3s cubic-bezier(.2,.8,.2,1);
}
.checkout-modal.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.checkout-form{padding:24px 28px 28px;overflow-y:auto}
.checkout-form .form-row textarea{min-height:80px}
.np-autocomplete{position:relative}
.np-autocomplete input:disabled{opacity:.5;cursor:not-allowed}
.np-suggest{
  position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:20;
  background:var(--white);border:1px solid var(--border);border-radius:14px;
  box-shadow:var(--shadow-md);max-height:260px;overflow-y:auto;
  display:none;
}
.np-suggest.open{display:block}
.np-suggest-item{
  padding:11px 16px;font-size:14px;cursor:pointer;
  border-bottom:1px solid var(--border);
}
.np-suggest-item:last-child{border-bottom:0}
.np-suggest-item:hover, .np-suggest-item.active{background:var(--gray-bg)}
.np-suggest-empty{padding:14px 16px;font-size:13px;color:var(--muted)}
.checkout-summary{
  display:flex;justify-content:space-between;align-items:center;
  font-size:18px;margin:8px 0 20px;padding-top:16px;border-top:1px solid var(--border);
}
.checkout-summary strong{font-weight:600}
@media(max-width:520px){
  .checkout-modal{max-width:calc(100% - 24px)}
}

/* ============ ПОПАП ВИБОРУ СТАНУ (іконка кошика на картці товару) ============ */
.cond-modal{max-width:420px}
.cond-modal-body{padding:4px 28px 28px}
.cond-modal-body .cond-btns{flex-direction:column;padding:6px}
.cond-modal-body .cond-btn{width:100%;min-width:0}

/* ============ ORDER SUCCESS POPUP ============ */
.success-modal{
  max-width:600px;padding:44px 36px 36px;text-align:center;overflow-y:auto;
}
.success-icon{
  width:56px;height:56px;min-width:56px;min-height:56px;flex-shrink:0;border-radius:50%;
  background:rgba(52,199,89,.12);color:#1F8A3B;
  display:flex;align-items:center;justify-content:center;margin:0 auto 20px;
}
.success-modal h2{font-size:24px;font-weight:600;letter-spacing:-.015em;margin-bottom:14px}
.success-text{color:var(--muted);font-size:15px;line-height:1.6;margin-bottom:18px}
.receipt{
  text-align:left;background:var(--gray-bg);border-radius:16px;
  padding:20px 22px;margin-bottom:20px;
}
.receipt-row{
  display:flex;justify-content:space-between;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--border);font-size:14px;
}
.receipt-row:first-child{padding-top:0}
.receipt-row:last-child{border-bottom:0}
.receipt-row .name{color:var(--text)}
.receipt-row .cond{color:var(--muted);font-size:12px;display:block}
.receipt-row .price{white-space:nowrap;font-weight:500}
.receipt-total{
  display:flex;justify-content:space-between;padding-top:12px;
  font-size:16px;font-weight:600;
}
.receipt-meta{
  margin-top:14px;padding-top:14px;border-top:1px solid var(--border);
  font-size:13px;color:var(--muted);line-height:1.7;
}
.fiscal-receipt-block{margin-top:16px}
.fiscal-receipt-frame{
  width:100%;height:480px;border:1px solid var(--border);border-radius:12px;
  background:var(--gray-bg);
}
.fiscal-receipt-actions{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
  margin-top:12px;
}
.fiscal-receipt-check-link{font-size:13px;color:var(--muted)}
.fiscal-receipt-check-link:hover{color:var(--accent)}
@media(max-width:480px){
  .fiscal-receipt-frame{height:360px}
}
.success-note{
  display:flex;align-items:center;gap:8px;justify-content:center;
  padding:10px 14px;background:var(--gray-bg);color:var(--muted);
  border-radius:12px;font-size:13px;margin-bottom:24px;text-align:left;
}
.success-more{margin-top:40px;text-align:left}
.success-more h3{font-size:18px;font-weight:600;margin-bottom:16px;letter-spacing:-.01em}
.success-more .grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:600px){
  .success-modal{max-width:calc(100% - 24px);padding:32px 20px 28px}
  .success-more .grid-3{grid-template-columns:1fr}
}

/* ============ /my-orders/ — локальна історія замовлень (без акаунтів) ============ */
.badge{
  display:inline-flex;align-items:center;padding:4px 10px;border-radius:100px;
  font-size:12px;font-weight:600;white-space:nowrap;
}
.badge-new{background:rgba(0,113,227,.1);color:var(--accent)}
.badge-processing{background:rgba(255,159,10,.14);color:#B5730B}
.badge-done{background:rgba(52,199,89,.14);color:#1F8A3B}
.badge-cancelled{background:rgba(255,59,48,.12);color:#D70015}
.order-card{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);padding:24px 28px;margin-bottom:20px;
}
.order-card-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  margin-bottom:16px;flex-wrap:wrap;
}
.order-card-head strong{font-size:17px;font-weight:600;display:block;margin-bottom:2px}
.order-card-date{color:var(--muted);font-size:13px}
.order-card-badges{display:flex;gap:6px;flex-wrap:wrap}
.orders-empty{text-align:center;padding:80px 20px;color:var(--muted)}
.orders-empty .btn{margin-top:20px}

/* ============ /order-success/ — окрема сторінка (не попап), куди
   повертає Monobank після оплати ============ */
.order-status-card{
  max-width:600px;margin:0 auto;background:var(--white);border:1px solid var(--border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-md);
  padding:44px 36px 36px;text-align:center;
}
.order-status-card .success-icon.pending{background:var(--gray-bg);color:var(--muted)}
.order-status-card .success-icon.pending .spinner-ring{width:26px;height:26px;border-width:2.5px}
.order-status-card .success-icon.failed{background:rgba(255,59,48,.1);color:#D92B1F}
.order-status-card .receipt-link{
  display:inline-flex;align-items:center;gap:6px;margin-top:6px;
  font-size:13px;font-weight:600;color:var(--accent);
}
@media(max-width:600px){
  .order-status-card{max-width:calc(100% - 24px);padding:32px 20px 28px}
}

/* ============ ANIMATIONS ============ */
.fade-up{opacity:0;transform:translateY(30px);transition:opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1)}
.fade-up.visible{opacity:1;transform:translateY(0)}
.fade-in{opacity:0;transition:opacity 1s ease}
.fade-in.visible{opacity:1}
.slide-left{opacity:0;transform:translateX(-40px);transition:opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1)}
.slide-left.visible{opacity:1;transform:translateX(0)}
.slide-right{opacity:0;transform:translateX(40px);transition:opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1)}
.slide-right.visible{opacity:1;transform:translateX(0)}
.scale-in{opacity:0;transform:scale(.94);transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1)}
.scale-in.visible{opacity:1;transform:scale(1)}
.stagger > *{opacity:0;transform:translateY(24px);transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1)}
.stagger.visible > *{opacity:1;transform:translateY(0)}
.stagger.visible > *:nth-child(1){transition-delay:0s}
.stagger.visible > *:nth-child(2){transition-delay:.08s}
.stagger.visible > *:nth-child(3){transition-delay:.16s}
.stagger.visible > *:nth-child(4){transition-delay:.24s}

/* Toast */
.toast{
  position:fixed;bottom:32px;left:50%;transform:translateX(-50%) translateY(120%);
  background:var(--ink);color:#fff;
  padding:16px 28px;border-radius:100px;
  font-size:14px;z-index:300;font-weight:500;
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 20px 50px rgba(0,0,0,.25);
}
.toast.show{transform:translateX(-50%) translateY(0)}

/* ============================================================
   MOBILE REFINEMENTS
   ============================================================ */

/* --- Хедер: логотип завжди зліва, кошик — праворуч, компактніше --- */
@media(max-width:820px){
  .nav-inner{padding:12px 16px}
  .logo{font-size:19px}
}

/* --- Hero на мобільному: фото знову як CSS-фон на весь блок (не окремий
   бокс), але сама секція нижча, ніж була — тому фото не виглядає
   "розтягнутим в пустоту" і краще скомпоновано із заголовком. --- */
@media(max-width:820px){
  .hero-product{
    min-height:68vh;
    padding:calc(72px + 36px) 20px 32px;
    background:url('../images/hero-mobile.jpg') center bottom / cover no-repeat #fff;
  }
  .hero-product h1{font-size:36px;line-height:1.05;margin-bottom:16px}
  .hero-product-sub{font-size:16px;margin-bottom:24px}
  .hero-product-sub br{display:none}
  .hero-product-cta .btn{padding:12px 22px;font-size:14px}
}
@media(max-width:480px){
  .hero-product{min-height:62vh}
  .hero-product h1{font-size:32px}
}

/* --- Section paddings: менші відступи на мобільному --- */
@media(max-width:720px){
  section{padding:70px 0}
  .section-head{margin-bottom:44px}
  .section-head h2{font-size:32px;line-height:1.1}
  .section-head p{font-size:16px}
  .section-head .eyebrow{font-size:11px}
  .stats{padding:48px 0 !important}
  .stat-num{font-size:32px;margin-bottom:6px}
  .stat-label{font-size:13px}
  .stat-item{padding-left:16px}
}
@media(max-width:400px){
  .stats-grid{gap:20px 14px}
  .stat-num{font-size:26px;overflow-wrap:anywhere}
  .stat-item{padding-left:12px}
}

/* --- Banners (fullbleed): нижчий min-height, менші відступи --- */
@media(max-width:720px){
  .banner{min-height:auto;padding:70px 20px !important}
  .banner-content{max-width:100%}
  .banner.right .banner-content{text-align:left;margin-left:0}
  .banner h2{font-size:32px}
  .banner p{font-size:16px;margin-bottom:24px}
  .banner.right p{margin-left:0}
}

/* --- Cards: компактніше (фото менш квадратне — на всю ширину екрана
   1:1 займало майже весь екран однією карткою) --- */
@media(max-width:560px){
  .grid-3, .grid-4{gap:14px}
  .card{padding:16px}
  .card-image{aspect-ratio:16/11;padding:12px;margin-bottom:14px}
  .card h3{font-size:18px;margin-bottom:4px}
  .card p.desc{font-size:13px;margin-bottom:12px}
  .card .price{font-size:21px}
  .card-actions{gap:6px}
  .card-actions .btn{padding:10px 14px;font-size:13px;flex:1;text-align:center;justify-content:center}
  .icon-btn{width:38px;height:38px}
}

/* --- Каталог ("Оберіть свій роутер"): по 2 картки в ряд на мобільному
   замість однієї на всю ширину — компактніші картки під вужчу колонку --- */
@media(max-width:560px){
  #home-products{grid-template-columns:repeat(2,1fr);gap:12px}
  #home-products .card{padding:14px}
  #home-products .card-badge,
  #home-products .card-pills{display:none}
  #home-products .card-image{aspect-ratio:1/1;padding:8px;margin-bottom:10px}
  #home-products .card h3{font-size:15px;font-weight:700;margin-bottom:3px;line-height:1.25}
  #home-products .card p.desc{display:none}
  #home-products .card .price{font-size:17px;font-weight:700;color:var(--accent);margin-bottom:10px}
  /* align-items:center успадковувався від .card-actions і в column-режимі
     центрував кнопку по горизонталі, хоча назва/ціна над нею — по лівому
     краю: кнопка "пливла" не під текстом. stretch тягне її на всю ширину
     картки — і вирівнює з текстом, і сама кнопка стає помітнішою/більшою. */
  #home-products .card-actions{flex-direction:column;align-items:stretch;gap:6px;margin-top:auto}
  #home-products .card-actions .icon-btn{display:none}
  #home-products .card-actions .btn{width:100%;padding:12px 14px;font-size:14px;font-weight:600}
  #home-products .card-oos-plate{font-size:11px;padding:6px 10px}
}

/* --- "Хіти продажу": на мобільному менші картки в один ряд з
   горизонтальним скролом — одразу видно ~2.35 картки (натяк, що є ще).
   Бейдж/бренд-чіпи прибрані — фото натомість займає значно більше місця. --- */
@media(max-width:720px){
  #hits-products{
    display:flex;flex-wrap:nowrap;gap:12px;
    overflow-x:auto;scroll-snap-type:x mandatory;
    scroll-padding-left:24px;
    -webkit-overflow-scrolling:touch;
    margin:0 -24px;padding:4px 24px 14px;
    scrollbar-width:none;
  }
  #hits-products::-webkit-scrollbar{display:none}
  #hits-products > .card{
    flex:0 0 auto;width:42%;scroll-snap-align:start;padding:10px;
  }
  #hits-products .card-badge,
  #hits-products .card-pills{display:none}
  #hits-products .card-image{aspect-ratio:1/1;padding:2px;margin-bottom:8px}
  #hits-products .card h3{font-size:14px;font-weight:700;margin-bottom:2px;line-height:1.25}
  #hits-products .card p.desc{display:none}
  #hits-products .card .price{font-size:16px;font-weight:700;color:var(--accent);margin-bottom:8px}
  /* без .desc (сховано) зникла "гумка" flex-grow, що рівняла кнопки по
     низу картки — тепер заголовки різної довжини зсували кнопки на різну
     висоту між картками; margin-top:auto повертає вирівнювання.
     align-items:stretch — той самий фікс вирівнювання кнопки, що й у
     #home-products вище (інакше кнопка центрувалась, а не йшла під текст). */
  #hits-products .card-actions{flex-direction:column;align-items:stretch;gap:6px;margin-top:auto}
  #hits-products .card-actions .icon-btn{display:none}
  #hits-products .card-actions .btn{width:100%;padding:11px 12px;font-size:13px;font-weight:600}
  #hits-products .card-oos-plate{font-size:11px;padding:6px 10px}
}

/* --- Feature cards: іконка зліва + заголовок/текст справа замість
   великого вертикального блоку — компактніше по висоті на мобільному.
   ВАЖЛИВО: .feature-icon, h3 і p — прямі сусідні елементи в HTML (без
   спільної обгортки для тексту), тому display:flex розкидав би їх трьома
   окремими колонками. Grid з areas розставляє їх правильно без зміни HTML. --- */
@media(max-width:720px){
  .features{gap:10px}
  .feature{
    padding:16px;
    display:grid;
    grid-template-columns:44px 1fr;
    grid-template-areas:"icon title" "icon text";
    align-items:start;
    column-gap:14px;row-gap:2px;
    text-align:left;
  }
  .feature-icon{grid-area:icon;width:44px;height:44px;margin-bottom:0;border-radius:12px}
  .feature-icon svg{width:22px;height:22px}
  .feature h3{grid-area:title;font-size:16px;margin-bottom:0;align-self:end}
  .feature p{grid-area:text;font-size:13.5px;line-height:1.45}
}

/* --- Trust bar на мобільному: 2 колонки з іконкою зверху --- */
@media(max-width:520px){
  .trust,.trust.trust-4{padding:32px 20px;gap:24px}
  .trust-item{flex-direction:column;text-align:center;gap:10px}
  .trust-item strong{font-size:13px}
}

/* --- Footer: компактніше --- */
@media(max-width:520px){
  footer{padding:56px 0 32px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px;margin-bottom:36px}
  .footer-col h4{font-size:11px;margin-bottom:12px}
  .footer-col li{margin-bottom:8px}
  .footer-col a{font-size:13px}
  .footer-brand{font-size:19px}
  .footer-brand-text{font-size:13px}
  .footer-bottom{font-size:11px}
}

/* --- Catalog: фільтри згортаємо в акордеон --- */
@media(max-width:900px){
  .catalog-layout{padding:20px 0 80px}
  .catalog-hero{padding:80px 0 20px}
  .catalog-hero h1{font-size:38px}
  .catalog-hero p{font-size:16px}
  .filter-sidebar{
    position:static;
    padding:0;background:transparent;
  }
  .filter-sidebar > .filter-group,
  .filter-sidebar > .filter-reset{display:none}
  .filter-sidebar.open > .filter-group,
  .filter-sidebar.open > .filter-reset{display:block}
  .filter-sidebar::before{
    content:"Фільтри";
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 20px;
    background:var(--gray-bg);
    border-radius:14px;
    font-weight:600;font-size:14px;
    cursor:pointer;
    letter-spacing:.02em;
  }
  .filter-sidebar::after{
    content:"+";
    position:absolute;right:32px;margin-top:-42px;
    font-size:22px;font-weight:400;color:var(--muted);
    pointer-events:none;transition:transform .2s;
  }
  .filter-sidebar.open::after{content:"−"}
  .filter-sidebar{position:relative;cursor:pointer}
  .filter-sidebar.open{
    background:var(--gray-bg);border-radius:18px;padding:0 20px 20px;
  }
  .filter-sidebar.open::before{background:transparent;padding:16px 0 8px}
  .filter-sidebar.open::after{margin-top:-42px;right:22px}
  .filter-sidebar > .filter-group{margin-top:12px}
  .catalog-header{margin-bottom:20px}
}

/* --- Compare: підказка про горизонтальний скрол, менший min-width --- */
@media(max-width:720px){
  .compare-hero{padding:80px 0 20px}
  .compare-hero h1{font-size:38px}
  .compare-hero p{font-size:16px}
  .compare-page{padding:20px 0 80px}
  .compare-table{min-width:820px}
  .compare-wrapper{position:relative}
  .compare-wrapper::after{
    content:"← гортайте таблицю →";
    display:block;
    text-align:center;
    padding:10px;
    font-size:12px;color:var(--muted);
    background:var(--gray-bg);
    border-top:1px solid var(--border);
  }
}

/* --- Product page --- */
@media(max-width:980px){
  .product-page{padding-top:20px;padding-bottom:80px}
  .crumbs{margin-bottom:20px;font-size:12px}
}
@media(max-width:720px){
  .product-info h1{font-size:30px}
  .product-tagline{font-size:16px;margin-bottom:20px}
  .product-price{font-size:28px;margin-bottom:12px}
  .product-desc{font-size:15px;padding:20px 0;margin:20px 0}
  .product-buttons .btn{flex:1;text-align:center;justify-content:center}
  .cond-btns{padding:4px;gap:4px}
  .cond-btn{min-width:0;padding:10px 12px}
  .cond-btn-label{font-size:13px}
  .cond-btn-price{font-size:12px}
  .spec-table th, .spec-table td{padding:14px 0;font-size:14px}
  .box-contents{padding:28px 22px;margin-top:60px}
  .box-contents h3{font-size:22px}
  .product-thumbs{gap:8px}
  .product-thumb{width:56px;height:56px}
}

/* --- Support page --- */
@media(max-width:720px){
  .support-hero{padding:80px 0 20px}
  .support-hero h1{font-size:38px}
  .support-hero p{font-size:16px}
  .support-page{padding:30px 0 80px}
  .faq{margin-bottom:60px}
  .faq-question{padding:22px 0;font-size:16px;gap:16px}
  .faq-answer{font-size:15px}
  .contact-form h3, .contact-info h3{font-size:22px;margin-bottom:20px}
}

/* --- Cart drawer: повна ширина + інші дрібниці --- */
@media(max-width:520px){
  .cart-drawer{max-width:100%}
  .cart-head{padding:20px}
  .cart-body{padding:12px 20px}
  .cart-foot{padding:16px 20px 22px}
  .cart-item-img{width:64px;height:64px}
  .cart-item-name{font-size:14px}
}

/* --- Product-military badge — не переносити некрасиво --- */
@media(max-width:520px){
  .product-military{font-size:12px;padding:6px 12px}
}

/* --- Toast — не за краєм --- */
@media(max-width:520px){
  .toast{bottom:20px;left:16px;right:16px;transform:translateY(120%);text-align:center;font-size:13px;padding:14px 16px;border-radius:14px}
  .toast.show{transform:translateY(0)}
}

/* --- iOS Safari: інпут/select/textarea з font-size < 16px змушує
   Safari автоматично зумити всю сторінку при фокусі на поле — критично
   для форми оформлення замовлення й контактної форми. Піднімаємо лише
   на мобільному, щоб не чіпати десктопну типографіку. --- */
@media(max-width:820px){
  .form-row input, .form-row textarea, .form-row select{font-size:16px}
}

/* --- Кошик і пошук завжди видимі поруч з гамбургером на мобільному --- */
@media(max-width:820px){
  .nav-right{gap:2px}
  .search-toggle,.cart-link{width:32px;height:32px}
  .cart-count{min-width:15px;height:15px;font-size:9px}
  .site-search-inner{padding:12px 20px}
  .site-search-results{padding:0 20px 12px}
}