/* Kepworth storefront */
@font-face { font-family:'Manrope'; font-weight:400; font-display:swap; src:url(../fonts/Manrope-400.cyrillic.woff2) format('woff2'); unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Manrope'; font-weight:400; font-display:swap; src:url(../fonts/Manrope-400.latin.woff2) format('woff2'); }
@font-face { font-family:'Manrope'; font-weight:700; font-display:swap; src:url(../fonts/Manrope-700.cyrillic.woff2) format('woff2'); unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Manrope'; font-weight:700; font-display:swap; src:url(../fonts/Manrope-700.latin.woff2) format('woff2'); }

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

:root{
  --dark:#0f1620;
  --dark-2:#141d2b;
  --blue:#0e7fd0;
  --blue-dark:#0a66a8;
  --cyan:#00b3ff;
  --green:#69b815;
  --red:#f94d4d;
  --bg:#ffffff;
  --gray:#f4f6f8;
  --border:#e3e7eb;
  --text:#1c2430;
  --muted:#77828f;
  --radius:8px;
  --shadow:0 4px 16px rgba(15,22,32,.08);
}

html{-webkit-text-size-adjust:100%}
body{font-family:'Manrope',system-ui,sans-serif;font-size:14px;color:var(--text);background:var(--bg);line-height:1.45}
a{text-decoration:none;color:inherit}
ul{list-style:none}
img{max-width:100%;display:block}
button{cursor:pointer;font-family:inherit;border:none;background:none;color:inherit}
input,select{font-family:inherit;font-size:14px}

.container{max-width:1280px;margin:0 auto;padding:0 16px}

/* ---------- topbar ---------- */
.topbar{background:var(--dark);color:rgba(255,255,255,.65);font-size:12px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.topbar__inner{display:flex;justify-content:space-between;align-items:center;gap:16px}
.topbar__links{display:flex;gap:18px;flex-wrap:wrap}
.topbar__links a:hover{color:#fff}
/* перемикач мови (topbar + мобільне меню) */
.lang-switch{display:inline-flex;gap:8px;align-items:center;white-space:nowrap}
.lang-switch b{color:#fff;font-weight:600}
.lang-switch a{color:inherit;opacity:.75}
.lang-switch a:hover{color:#fff;opacity:1}
.mobmenu__lang{margin-top:10px}
.mobmenu__lang .lang-switch{font-size:14px}
.mobmenu__lang .lang-switch b{color:#111}
.mobmenu__lang .lang-switch a{color:#0e7fd0;opacity:1}
.header__lang{color:#98a2ae;font-size:13px;white-space:nowrap}
.header__lang .lang-switch b{color:#fff}
.header__lang .lang-switch a:hover{color:#fff}
@media(max-width:760px){.header__lang{display:none}}

/* ---------- header ---------- */
.header{background:var(--dark);padding:14px 0;position:sticky;top:0;z-index:100;box-shadow:0 2px 10px rgba(0,0,0,.35)}
.header__inner{display:flex;align-items:center;gap:14px}

.logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo__mark{width:38px;height:38px;border-radius:9px;object-fit:cover;display:block}
.logo__text{color:#fff;font-size:21px;font-weight:800;letter-spacing:.5px}
.logo__text small{display:block;font-size:9px;font-weight:400;color:var(--cyan);letter-spacing:2.5px;text-transform:uppercase}

.catalog-btn{display:flex;align-items:center;gap:9px;background:var(--blue);color:#fff;padding:11px 20px;border-radius:var(--radius);font-weight:700;font-size:15px;flex-shrink:0;transition:background .15s}
.catalog-btn:hover{background:var(--blue-dark)}
.catalog-btn svg{width:17px;height:17px}

.search{flex:1;position:relative;min-width:160px}
.search__input{width:100%;padding:11px 44px 11px 15px;border:none;border-radius:var(--radius);background:rgba(255,255,255,.09);color:#fff;outline:none;transition:background .15s}
.search__input::placeholder{color:rgba(255,255,255,.45)}
.search__input:focus{background:rgba(255,255,255,.15)}
.search__btn{position:absolute;right:11px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.55);display:flex}
.search__btn:hover{color:#fff}

.header__phone{display:flex;align-items:center;gap:7px;color:rgba(255,255,255,.9);font-weight:700;white-space:nowrap;padding:8px 10px;border-radius:var(--radius)}
.header__phone svg{width:17px;height:17px;color:var(--cyan)}
.header__phone:hover{background:rgba(255,255,255,.08)}

.cart-btn{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.09);color:#fff;padding:10px 16px;border-radius:var(--radius);font-weight:700;white-space:nowrap;position:relative;transition:background .15s}
.cart-btn:hover{background:rgba(255,255,255,.16)}
.cart-btn svg{width:19px;height:19px}
.j-cart-count{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;background:var(--cyan);color:var(--dark);border-radius:10px;font-size:11px;font-weight:800;padding:0 5px}
.j-cart-count:empty{display:none}

/* ---------- megamenu ---------- */
.catmenu{position:relative;flex-shrink:0}
.megamenu{display:none;position:absolute;top:calc(100% + 10px);left:0;min-width:640px;background:#fff;color:var(--text);border-radius:var(--radius);box-shadow:0 12px 40px rgba(15,22,32,.25);padding:18px;z-index:200}
.megamenu.open{display:block}
.megamenu__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.megamenu__item{display:flex;align-items:center;gap:14px;padding:10px 12px;border-radius:8px;transition:background .15s}
.megamenu__item:hover{background:var(--gray)}
.megamenu__img{width:52px;height:52px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--border);border-radius:8px;padding:4px}
.megamenu__img img{max-width:100%;max-height:100%;object-fit:contain}
.megamenu__name{font-weight:700;font-size:14px}
.megamenu__all{display:inline-block;margin-top:12px;font-weight:800;font-size:13px}
.megamenu__all:hover{text-decoration:underline}
@media (max-width:760px){.megamenu{min-width:calc(100vw - 32px);left:-60px}.megamenu__grid{grid-template-columns:1fr}}

/* ---------- category nav ---------- */
.catnav{background:var(--dark-2);border-top:1px solid rgba(255,255,255,.05)}
.catnav__list{display:flex;gap:4px;overflow-x:auto;padding:0}
.catnav__list a{display:block;padding:11px 16px;color:rgba(255,255,255,.75);font-size:13px;font-weight:700;white-space:nowrap;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.catnav__list a:hover,.catnav__list a.active{color:#fff;border-bottom-color:var(--cyan)}

/* ---------- breadcrumbs ---------- */
.breadcrumbs{padding:14px 0;font-size:12px;color:var(--muted)}
.breadcrumbs a:hover{color:var(--blue)}
.breadcrumbs span{margin:0 7px;color:#c3cad2}

/* ---------- page ---------- */
.page-title{font-size:26px;font-weight:800;margin-bottom:18px}
.section{padding:36px 0}
.section__title{font-size:22px;font-weight:800;margin-bottom:22px}

/* ---------- catalog layout ---------- */
.catalog-layout{display:grid;grid-template-columns:250px 1fr;gap:24px;align-items:start;padding-bottom:48px}
@media (max-width:900px){.catalog-layout{grid-template-columns:1fr}}

.sidebar{position:sticky;top:84px;display:flex;flex-direction:column;gap:0}
@media (max-width:900px){.sidebar{position:static}}

.filter{border-bottom:1px solid var(--border)}
.filter:last-child{border-bottom:none}
.filter__title{padding:14px 0 10px;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;list-style:none}
.filter__title::-webkit-details-marker{display:none}
.filter__title::after{content:'';width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .15s;flex-shrink:0}
details.filter[open]>.filter__title::after{transform:rotate(-135deg)}
.filter__body{padding:0 0 14px}
details.filter:not([open])>.filter__body{display:none}
.filter label{display:flex;align-items:center;gap:9px;padding:5px 0;cursor:pointer;font-size:13px}
.filter label:hover{color:var(--blue)}
.filter input[type=checkbox]{width:16px;height:16px;accent-color:var(--blue)}
.filter__count{margin-left:6px;color:var(--muted);font-size:12px}
.filter__count::before{content:'('}
.filter__count::after{content:')'}
/* grid, а не flex — гарантує, що інпути й кнопка ніколи не вилізуть
   за межі сайдбара (250px), незалежно від ширини спінерів у number-полях */
.price-inputs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.price-inputs input{width:100%;min-width:0;box-sizing:border-box;padding:7px 9px;border:1px solid var(--border);border-radius:6px;text-align:center}
.price-inputs span{display:none}

/* Двохручковий слайдер ціни (референс in-green): два накладені range-інпути */
.price-slider{position:relative;height:26px;margin-top:14px}
.price-slider__track{position:absolute;top:11px;left:8px;right:8px;height:4px;background:var(--border);border-radius:2px}
.price-slider__fill{position:absolute;top:0;height:100%;background:var(--blue);border-radius:2px}
.price-slider__range{position:absolute;top:5px;left:0;width:100%;height:16px;margin:0;background:none;-webkit-appearance:none;appearance:none;pointer-events:none}
.price-slider__range::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--blue);box-shadow:0 1px 3px rgba(0,0,0,.25);cursor:pointer}
.price-slider__range::-moz-range-thumb{pointer-events:auto;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--blue);box-shadow:0 1px 3px rgba(0,0,0,.25);cursor:pointer}
.price-slider__range::-moz-range-track{background:none}

/* ---------- catalog toolbar (Фаза 6.32/6.33) ---------- */
.catalog-toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 0;border-bottom:1px solid var(--border);margin-bottom:20px}
.catalog-toolbar__label{display:flex;align-items:center;gap:8px;font-weight:800;font-size:14px;flex-shrink:0}
.catalog-toolbar__label svg{width:16px;height:16px;color:var(--blue)}
.catalog-toolbar .active-filters{flex:1 1 auto}
.catalog-toolbar__right{display:flex;align-items:center;gap:20px;margin-left:auto;flex-shrink:0;flex-wrap:wrap}
.toolbar__found{font-size:13px;color:var(--muted);white-space:nowrap}

/* Сегментований перемикач сортування — одна рамка з кількома
   кнопками-сегментами замість випадаючого списку (Фаза 6.33, за
   референсом користувача) */
.segmented{display:flex;align-items:center;gap:10px}
.segmented__label{font-size:13px;color:var(--text);white-space:nowrap;flex-shrink:0}
.segmented__group{display:flex;border:1px solid var(--border);border-radius:10px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.segmented__btn{padding:9px 16px;font-size:13px;font-weight:400;color:var(--text);background:#fff;border-right:1px solid var(--border);white-space:nowrap;flex-shrink:0;transition:background .15s}
.segmented__btn:last-child{border-right:none}
.segmented__btn:hover{background:var(--gray)}
.segmented__btn.active{background:var(--gray)}

/* Перемикач вигляду сітка/список товарів (Фаза 6.33) */
.view-toggle{display:flex;align-items:center;gap:10px}
.view-toggle__label{font-size:13px;color:var(--text);white-space:nowrap;flex-shrink:0}
.view-toggle__group{display:flex;align-items:center;gap:2px;border:1px solid var(--border);border-radius:10px;padding:3px}
.view-toggle__btn{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:7px;color:var(--muted);transition:background .15s,color .15s}
.view-toggle__btn svg{width:16px;height:16px}
.view-toggle__btn:hover{color:var(--text)}
.view-toggle__btn.active{background:var(--gray);color:var(--text)}

/* ---------- product grid ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}

/* Вигляд "список" (Фаза 6.33) — та сама картка, лише контейнер і
   декілька властивостей картки перевизначені: без зміни розмітки
   cardHTML можна перемикати вигляд чистим CSS */
.grid--list{display:flex;flex-direction:column;gap:12px}
.grid--list .card{flex-direction:row;align-items:stretch}
.grid--list .card__img{width:150px;flex-shrink:0;padding:12px}
.grid--list .card__body{flex:1;padding:14px 16px;justify-content:center}
.grid--list .card__title{-webkit-line-clamp:1;min-height:auto}
@media (max-width:600px){
  .grid--list .card{flex-direction:column}
  .grid--list .card__img{width:100%}
}

.card{border:1px solid var(--border);border-radius:var(--radius);background:#fff;position:relative;display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s;overflow:hidden}
.card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}

.card__img{aspect-ratio:1;display:flex;align-items:center;justify-content:center;padding:10px;background:#fff;position:relative}
.card__img img{width:100%;height:100%;object-fit:contain}

/* Стікери оверлеєм на фото (референс in-green): гарантія синім, розпродаж/−% червоним, Bluetooth бірюзовим, стек зверху-зліва */
.card__badges{position:absolute;left:0;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:3px;pointer-events:none}
.card__badges--top{top:10px}
.card__badges--bottom{bottom:10px}
.card__badge{font-size:11px;font-weight:700;line-height:1.2;color:#fff;padding:3px 8px;white-space:nowrap;text-transform:uppercase;letter-spacing:.02em}
/* Стилі стікерів (design.stickers.style) — колір задається інлайн з конфіга */
.card__badge--label{border-radius:0 4px 4px 0}
.card__badge--flag{padding-right:15px;clip-path:polygon(0 0,100% 0,calc(100% - 8px) 50%,100% 100%,0 100%)}
.card__badge--ribbon{margin-left:6px;border-radius:0 2px 2px 0;position:relative}
.card__badge--ribbon::after{content:"";position:absolute;left:-6px;top:0;width:0;height:0;border-style:solid;border-width:0 6px 6px 0;border-color:transparent rgba(0,0,0,.38) transparent transparent}
.card__badge--bookmark{padding-bottom:9px;border-radius:0 3px 0 0;clip-path:polygon(0 0,100% 0,100% 100%,50% calc(100% - 6px),0 100%)}

.card__body{padding:0 14px 14px;display:flex;flex-direction:column;flex:1}
.card__code{font-size:11px;color:var(--muted);margin-bottom:5px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.card__rating{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.card__rating .stars{color:#f5a623;font-size:12px;letter-spacing:-1px}
.card__reviews{display:inline-flex;align-items:center;gap:3px;color:var(--muted);text-decoration:none}
.card__reviews:hover{color:var(--blue)}
.card__reviews svg{width:14px;height:14px}
.card__rating-count{color:var(--muted);font-weight:600}
.card__reviews:hover .card__rating-count{color:var(--blue)}
.card__title{font-size:13px;font-weight:700;line-height:1.4;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:36px}
.card__title a:hover{color:var(--blue)}

.tag{font-size:11px;padding:3px 9px;border-radius:12px;border:1px solid var(--border);color:var(--muted);white-space:nowrap}
.tag--avail{color:var(--green);border-color:var(--green)}

.card__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto}
.card__price-wrap{display:flex;flex-direction:column;gap:2px}
.card__old{font-size:13px;color:var(--muted);text-decoration:line-through}
.card__price{font-size:19px;font-weight:800}
.card__buy{flex-shrink:0;width:42px;height:42px;border-radius:var(--radius);background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;transition:background .15s;position:relative}
.card__buy svg{width:19px;height:19px}
/* Бейдж Покупки Частинами на фото картки (лапка mono + макс. платежів) */
/* Стікери банків "частинами" на картці (як in-green): стек знизу зліва,
   лапка mono + пиріг ПриватБанку. Другий бейдж стає над першим. */
.card__bank{position:absolute;bottom:8px;left:8px;z-index:1;display:inline-flex;align-items:center;gap:3px;background:#000;color:#fff;border-radius:20px;padding:2px 8px 2px 6px;font-size:12px;font-weight:700;pointer-events:none}
.card__bank svg{width:15px;height:15px}
.card__privat,.card__abank,.card__sense,.card__pumb{background:#fff;color:#0b0b0b;box-shadow:0 1px 4px rgba(0,0,0,.18)}
.card__abank svg,.card__sense svg,.card__pumb svg{border-radius:5px}
.card__buy:hover{background:var(--blue-dark)}
.card__buy:disabled{opacity:.7}
.card__buy.added{background:var(--green)}
.card__buy[data-state]{color:transparent}
.card__buy[data-state]::after{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;font-weight:800}
.card__buy[data-state="loading"]::after{content:'…'}
.card__buy[data-state="added"]::after{content:'✓'}
.card__buy[data-state="error"]::after{content:'!'}

/* Активні фільтри — чіпи з хрестиком + "Очистити фільтр" (тепер у catalog-toolbar, Фаза 6.32) */
.active-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.active-filters__chip{display:inline-flex;align-items:center;gap:7px;padding:6px 8px 6px 14px;border:1px solid var(--border);border-radius:20px;font-size:13px;font-weight:600;color:var(--text);background:#fff}
.active-filters__chip button{border:none;background:none;color:var(--muted);width:16px;height:16px;font-size:15px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.active-filters__chip button:hover{color:var(--red)}
.active-filters__clear{display:inline-flex;align-items:center;gap:6px;border:none;background:none;color:var(--muted);font-size:13px;font-weight:600;cursor:pointer;padding:6px 4px;transition:color .15s}
.active-filters__clear svg{width:14px;height:14px}
.active-filters__clear:hover{color:var(--blue)}

/* SEO filter-landing (Фаза 3) */
.filter-intro{color:var(--muted);margin:-10px 0 22px;max-width:680px;line-height:1.5}
.related-filters{margin:32px 0 44px;padding-top:24px;border-top:1px solid var(--border)}
.related-filters__title{font-weight:800;font-size:15px;margin-bottom:12px}
.related-filters__list{display:flex;flex-wrap:wrap;gap:10px}
.related-filters__list a{padding:8px 16px;border:1px solid var(--border);border-radius:20px;font-size:13px;font-weight:600;transition:all .15s}
.related-filters__list a:hover{border-color:var(--blue);color:var(--blue)}

.faq{margin:32px 0 44px;max-width:760px}
.faq__title{font-weight:800;font-size:22px;margin-bottom:14px}
.faq__item{border:1px solid var(--border);border-radius:8px;padding:14px 16px;margin-bottom:8px}
.faq__item summary{font-weight:700;cursor:pointer;font-size:16px;line-height:1.4}
.faq__item p{margin-top:10px;color:var(--text);font-size:16px;line-height:1.6}

/* ---------- category tiles (home) ---------- */
.tiles{display:flex;flex-wrap:wrap;gap:16px;justify-content:flex-start}
.tiles--align-center{justify-content:center}
.tile{flex:0 1 220px;border:1px solid var(--border);border-radius:var(--radius);padding:22px;display:flex;align-items:center;gap:16px;transition:all .2s;background:#fff}
.tile:hover{border-color:var(--blue);box-shadow:var(--shadow)}
.tile__icon{width:56px;height:56px;border-radius:12px;background:linear-gradient(135deg,#e8f6ff,#d3ecfb);display:flex;align-items:center;justify-content:center;color:var(--blue);flex-shrink:0}
.tile__icon svg{width:28px;height:28px}
.tile__name{font-weight:800;font-size:15px}
.tile__count{font-size:12px;color:var(--muted)}

/* стиль "Кружечки" */
.tiles--circles{text-align:center}
.tiles--circles .tile{flex:0 1 140px;flex-direction:column;border:none;background:none;padding:10px;gap:10px}
.tiles--circles .tile:hover{box-shadow:none}
.tiles--circles .tile:hover .tile__icon{border-color:var(--blue)}
.tiles--circles .tile__icon{width:84px;height:84px;border-radius:50%;border:1px solid var(--border);background:#fff}
.tiles--circles .tile__icon svg{width:32px;height:32px}
.tiles--circles .tile__name{font-size:13px;font-weight:700}

@media (max-width:480px){.tile{flex-basis:100%}.tiles--circles .tile{flex-basis:42%}}

/* ---------- banners ---------- */
.banner-row{padding:16px 0 0}
.banner-row--full .banner-grid{max-width:none}
.banner-grid{display:grid;align-items:stretch}
.banner-cell{display:block;overflow:hidden;position:relative}
.banner-cell img{width:100%;height:100%;object-fit:cover;display:block}
.banner-cell--empty{background:linear-gradient(135deg,#eef3f7,#dde6ee)}
a.banner-cell{transition:opacity .15s}
a.banner-cell:hover{opacity:.92}
@media (max-width:760px){
  .banner-grid{grid-template-columns:1fr!important}
  .banner-cell{grid-row:auto!important}
}

/* ---------- home intro ---------- */
.intro{background:var(--dark);color:#fff;padding:44px 0}
.intro__grid{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.intro h1{font-size:30px;font-weight:800;line-height:1.2;margin-bottom:10px}
.intro p{color:rgba(255,255,255,.65);max-width:560px}
.intro__feats{display:flex;gap:26px;flex-wrap:wrap;margin-top:22px}
.feat{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700}
.feat svg{width:22px;height:22px;color:var(--cyan);flex-shrink:0}

/* ---------- product page ---------- */
.product{display:grid;grid-template-columns:1fr 1fr;gap:36px;padding-bottom:48px;align-items:start}
@media (max-width:800px){.product{grid-template-columns:1fr}}
/* Sticky-галерея (десктоп): фото "залипає" під шапкою, поки праворуч
   прокручуються характеристики — як на in-green/Horoshop (без пустоти
   там, де галерея коротша за колонку з характеристиками). top=84px —
   висота sticky-шапки, як у .sidebar. На мобільному колонка одна —
   sticky вимкнено (інакше фото зайняло б пів-екрана під час скролу). */
@media (min-width:801px){.product__gallery{position:sticky;top:84px;align-self:start}}
/* Галерея-слайдер: трек зі слайдами (translateX), точки (моб), мініатюри (десктоп) */
.product__slider{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius);background:#fff;touch-action:pan-y}
.product__track{display:flex;transition:transform .42s cubic-bezier(.22,.61,.36,1);will-change:transform}
.product__track.dragging{transition:none}
.product__slide{flex:0 0 100%;min-width:100%;box-sizing:border-box;padding:28px;min-height:300px;display:flex;align-items:center;justify-content:center}
.product__slide img{max-width:100%;max-height:440px;object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none}
.product__dots{display:none;position:absolute;left:0;right:0;bottom:12px;z-index:2;justify-content:center;align-items:center;gap:7px}
.product__dot{width:7px;height:7px;padding:0;border:none;border-radius:50%;background:rgba(0,0,0,.22);cursor:pointer;transition:width .28s ease,background .28s ease}
.product__dot.active{background:var(--blue);width:20px;border-radius:4px}
.product__code{font-size:12px;color:var(--muted);margin-bottom:8px}
.product__title{font-size:18px;font-weight:700;line-height:1.4;margin-bottom:12px}
/* Мета-рядок під заголовком: зліва зірки + відгуки, справа "Код: артикул" */
.product__meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.product__meta .product__rating{margin-bottom:0}
.product__sku{margin-left:auto;color:var(--muted);font-size:14px;white-space:nowrap}
.product__rating{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.product__rating .stars{color:#f5a623;font-size:16px;letter-spacing:1px}
.product__rating a{color:var(--muted);font-size:13px;text-decoration:none}
.product__rating a:hover{color:var(--blue)}
/* Блок покупки — ДЕСКТОП (референс in-green): ціна+обране в рядок, розділювач, кнопки в ряд, без фону */
.product__buy-panel{margin-bottom:24px;position:relative}
.product__price-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 6px}
.product__price-main{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.product__price{font-size:36px;font-weight:700;line-height:1.1}
.product__old{font-size:21px;color:#acacac;text-decoration:line-through;font-weight:400}
.product__avail{font-size:14px;font-weight:600;color:var(--green);margin:0}
/* Наявність: три статуси (metadata.in_stock) + вільний коментар адміна */
.product__avail--out{color:#8a8a8a}
.product__avail--preorder{color:#e08a00}
.product__avail-note{display:block;font-size:13px;font-weight:400;color:var(--muted);margin-top:2px}
.product__buy[disabled]{background:#e6e6e6;color:#8a8a8a;cursor:not-allowed;border-color:#e6e6e6}
.card__avail{font-size:12px;font-weight:600;color:var(--muted);margin:0 0 5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card__avail--out{color:#8a8a8a}
.card__avail--preorder{color:#e08a00}
.card__buy[disabled]{opacity:.4;cursor:not-allowed}
.product__divider{border:none;border-top:1px solid var(--border);margin:20px 0}
.product__buybox{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch}
.qty{display:flex;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.qty button{width:40px;height:48px;font-size:18px;background:var(--gray)}
.qty input{width:52px;text-align:center;border:none;outline:none;font-weight:700}
/* Кнопки як на in-green: Купити — зелена, решта — біла з рамкою; в рядок, натуральна ширина */
.product__buy{display:inline-flex;align-items:center;justify-content:center;height:54px;padding:0 34px;background:var(--blue);color:#fff;border-radius:8px;font-weight:600;font-size:17px;transition:background .15s;cursor:pointer}
.product__buy:hover{background:var(--blue-dark)}
.product__buy.added{background:var(--green)}
.product__btn-alt{display:inline-flex;align-items:center;justify-content:center;height:54px;padding:0 28px;background:#fff;color:#0b0b0b;border:1px solid var(--border);border-radius:8px;font-weight:600;font-size:17px;cursor:pointer;transition:background .15s}
.product__btn-alt:hover{background:#f7f7f7}
/* МОБІЛЬНА версія — лишається як була: панель з фоном, кнопки в стовпчик, обране окремим рядком нижче */
@media (max-width:800px){
  .product__buy-panel{background:#f5f6f8;border-radius:12px;padding:18px}
  .product__price-row{margin-bottom:14px}
  .product__avail{margin-bottom:6px}
  .product__divider{display:none}
  .product__buy{flex:1 1 100%;height:48px;font-size:16px}
  .product__btn-alt{flex:1 1 100%;height:48px;font-size:16px}
}
/* Кнопка "Покупка Частинами" — прозора, як "Розстрочка" (не перетягує увагу) */
.product__btn-mono{background:#fff}
.product__btn-mono:hover{background:#f5f6f8}
/* Прев'ю банків "частинами" під кнопками (як in-green): рядок з іконкою
   банку + "до N платежів по X грн" на кожен банк. Клік → модалка. */
/* Прев'ю банків "частинами" — слайдер чипів (референс Rozetka): чипи
   ФІКСОВАНОЇ ширини, свайп справа наліво, наступний чип "визирає" за краєм
   (peek), scroll-snap доводить до чипа. На десктопі всі влазять + стрілки;
   на мобільному видно ~1.7 чипа й гортаєш пальцем. Внутрішній overflow-x:auto
   (спільний карусельний компонент) не дає сторінці їхати горизонтально. */
/* Grid-елементи .product НЕ мають роздуватись під ширину слайдера чипів
   (дефолтний min-width:auto давав горизонтальний скрол сторінки на мобільному
   після додавання 3-го банку). min-width:0 → колонка тримає ширину треку,
   а слайдер гортається всередині свого overflow-x:auto viewport. */
.product>*{min-width:0}
/* Область на 100% ширини блоку. Чипи (по ширині контенту, сіра плашка хугає
   текст) розкладаються зліва направо: влізли всі — показуємо всі; не влізли —
   зайве обрізається viewport'ом (overflow-x) і зʼявляється стрілка гортати.
   На мобільному екран вужчий → 2 повних + peek третього (свайп). */
.product__parts.carousel{margin:-4px 0 20px;max-width:100%}
.carousel--parts .carousel__track{gap:12px}
/* Стрілки — на КРАЯХ viewport (оверлеєм на "визираючий" чип, як Rozetka),
   а не назовні: інакше торчать за блок і дають горизонтальний скрол. */
.carousel--parts .carousel__arrow{width:34px;height:34px;background:rgba(255,255,255,.92)}
.carousel--parts .carousel__arrow--prev{left:2px}
.carousel--parts .carousel__arrow--next{right:2px}
.parts-chip{display:flex;align-items:center;gap:9px;flex:0 0 auto;background:#f5f6f8;border:none;border-radius:14px;padding:11px 14px;cursor:pointer;text-align:left;transition:background .15s}
.parts-chip:hover{background:#eceef1}
.parts-chip__icon{flex-shrink:0}
.parts-chip__icon svg{width:28px;height:28px;display:block;border-radius:7px}
.parts-chip__text{display:flex;flex-direction:column;gap:1px;white-space:nowrap;min-width:0}
.parts-chip__brand{font-size:14px;font-weight:700;color:#0b0b0b;line-height:1.2}
.parts-chip__sum{font-size:13px;color:var(--muted);line-height:1.2}
.parts-chip__sum b{color:#0b0b0b;font-weight:700}
/* Блок вибору кількості платежів ПЧ у чекауті (референс in-green) */
.monopart-box{margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.monopart-box__note{font-size:12px;color:var(--muted);margin-bottom:10px;line-height:1.4}
.monopart-box .j-monopart-parts{max-width:340px}
.monopart-box__max{font-size:12px;color:var(--muted);margin-top:6px}
/* Модалка вибору платежів на PDP */
.mp-modal{position:fixed;inset:0;z-index:1000;background:rgba(10,10,15,.6);display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(2px)}
.mp-modal__card{background:#fff;border-radius:20px;padding:28px;width:100%;max-width:520px;position:relative;box-shadow:0 24px 70px rgba(0,0,0,.35);animation:mp-in .2s ease-out;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
@keyframes mp-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.mp-modal__close{position:absolute;top:16px;right:18px;font-size:26px;line-height:1;color:var(--muted);background:none;border:none;cursor:pointer;transition:color .15s}
.mp-modal__close:hover{color:#0b0b0b}
.mp-modal__brand{font-size:19px;font-weight:800;letter-spacing:-.01em;margin-bottom:18px}
.mp-modal__brand b{font-weight:800}
.mp-modal__prod{display:flex;align-items:center;gap:14px;padding:14px;background:#f5f6f8;border-radius:14px;margin-bottom:20px}
.mp-modal__thumb{width:60px;height:60px;object-fit:contain;border-radius:10px;background:#fff;flex-shrink:0}
.mp-modal__prod-info{min-width:0}
.mp-modal__name{font-size:14px;line-height:1.35;color:#0b0b0b;margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mp-modal__price{font-size:22px;font-weight:800;white-space:nowrap}
.mp-modal__label{font-size:13px;font-weight:700;color:var(--muted);margin-bottom:10px}
/* Рядки банків у модалці (як in-green "Покупка в кредит"): радіо-вибір
   банку, у кожного свій селект платежів і примітка про комісію. */
.mp-modal__banks{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.mp-bank{display:flex;align-items:flex-start;gap:12px;padding:14px;border:2px solid #e6e8ec;border-radius:14px;cursor:pointer;transition:border-color .15s,background .15s}
.mp-bank:hover{border-color:#cfd3da}
.mp-bank.is-active{border-color:#14a24a;background:#f4fbf7}
.mp-bank__check{width:20px;height:20px;border:2px solid #cfd3da;border-radius:50%;flex-shrink:0;margin-top:3px;position:relative;transition:border-color .15s,background .15s}
.mp-bank.is-active .mp-bank__check{border-color:#14a24a;background:#14a24a}
.mp-bank.is-active .mp-bank__check::after{content:"";position:absolute;inset:0;margin:auto;width:8px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:translateY(-1px) rotate(-45deg)}
.mp-bank__icon svg{width:26px;height:26px;display:block;color:#000;margin-top:1px}
.mp-bank__main{flex:1;min-width:0}
.mp-bank__name{font-size:15px;line-height:1.3;margin-bottom:8px}
.mp-bank__name b{font-weight:800}
.mp-bank__select{max-width:260px}
.mp-bank__note{font-size:11px;color:var(--muted);line-height:1.4;margin-top:8px}
/* Липка CTA: завжди видима під час скролу списку банків у скрол-картці.
   bottom:0 (безпечно, без клипу об скруглення). Тінь зверху відділяє від
   контенту, що прокручується під нею. */
.mp-modal__go{width:100%;padding:15px;font-size:16px;font-weight:700;color:#fff;background:#0b0b0b;border:none;border-radius:14px;cursor:pointer;transition:opacity .15s;position:sticky;bottom:0;margin-top:4px;box-shadow:0 -10px 16px -6px #fff}
.mp-modal__go:hover{opacity:.88}
.product__feats{border-top:1px solid var(--border);padding-top:18px;display:flex;flex-direction:column;gap:9px}
.product__feats div{display:flex;gap:10px;align-items:center;font-size:13px}
.product__feats svg{width:18px;height:18px;color:var(--blue);flex-shrink:0}

.specs-title{margin-top:18px;font-weight:700}
.specs-table{width:100%;margin-top:8px;border-collapse:collapse;font-size:13px}
.specs-table tr{border-top:1px solid var(--border)}
.specs-table tr:first-child{border-top:none}
.specs-table th{text-align:left;color:var(--muted);font-weight:600;padding:9px 12px 9px 0;width:40%;white-space:nowrap}
.specs-table td{padding:9px 0;font-weight:700}

/* ---------- blog (Фаза 4.4) ---------- */
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;padding-bottom:48px}
.blog-card{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--radius);background:#fff;overflow:hidden;transition:box-shadow .2s,transform .2s}
.blog-card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.blog-card__img{aspect-ratio:16/9;background:var(--gray)}
.blog-card__img img{width:100%;height:100%;object-fit:cover}
.blog-card__body{padding:16px;display:flex;flex-direction:column;flex:1}
.blog-card__date{font-size:12px;color:var(--muted);margin-bottom:6px}
.blog-card__title{font-size:16px;font-weight:800;line-height:1.35;margin-bottom:8px}
.blog-card__excerpt{font-size:13px;color:var(--muted);line-height:1.5}

.article{max-width:760px;margin:0 auto;padding-bottom:56px}
.article__title{font-size:30px;font-weight:800;line-height:1.25;margin-bottom:10px}
.article__date{font-size:13px;color:var(--muted);margin-bottom:22px}
.article__cover{border-radius:var(--radius);overflow:hidden;margin-bottom:28px}
.article__cover img{width:100%;display:block;object-fit:cover}
.article__body{font-size:16px;line-height:1.75;color:var(--text)}
.article__body h2{font-size:23px;font-weight:800;margin:36px 0 14px}
.article__body h3{font-size:19px;font-weight:800;margin:28px 0 12px}
.article__body p{margin-bottom:18px}
.article__body a{color:var(--blue);text-decoration:underline}
.article__body a:hover{color:var(--blue-dark)}
.article__body strong{font-weight:800}
.article__body img{max-width:100%;border-radius:var(--radius);margin:8px 0 22px;display:block}
.article__body ul,.article__body ol{margin:0 0 18px 22px}
.article__body li{margin-bottom:6px}
.article__body blockquote{border-left:3px solid var(--blue);padding:4px 0 4px 18px;margin:0 0 18px;color:var(--muted);font-style:italic}
.article-embed{position:relative;margin:8px 0 26px;border-radius:var(--radius);overflow:hidden;background:var(--dark)}
.article-embed--video{aspect-ratio:16/9}
.article-embed--video iframe{width:100%;height:100%;border:none;display:block}
.article-embed video{width:100%;display:block}
.article-products{margin:8px 0 28px}
.article-products.grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}

@media (max-width:600px){
  .article__title{font-size:24px}
  .article__body{font-size:15px}
  .article__body h2{font-size:20px}
}

/* ---------- cart page ---------- */
.cart-table{width:100%;border-collapse:collapse;margin-bottom:22px}
.cart-table th{font-size:12px;color:var(--muted);text-align:left;padding:10px 12px;border-bottom:2px solid var(--border);text-transform:uppercase;letter-spacing:.4px}
.cart-table td{padding:14px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
.cart-item__img{width:72px;height:72px;object-fit:contain;border:1px solid var(--border);border-radius:6px;padding:6px}
.cart-item__title{font-weight:700;font-size:13px;max-width:340px}
.cart-remove{color:var(--muted);font-size:20px;line-height:1;padding:6px}
.cart-remove:hover{color:var(--red)}
.cart-total{display:flex;justify-content:flex-end;align-items:center;gap:18px;font-size:16px;margin-bottom:22px}
.cart-total b{font-size:24px}
.cart-actions{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-bottom:48px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 26px;border-radius:var(--radius);font-weight:800;font-size:15px;transition:all .15s}
.btn--primary{background:var(--blue);color:#fff}
.btn--primary:hover{background:var(--blue-dark)}
.btn--ghost{border:1px solid var(--border)}
.btn--ghost:hover{border-color:var(--blue);color:var(--blue)}
.cart-empty{text-align:center;padding:70px 0;color:var(--muted)}
.cart-empty svg{width:60px;height:60px;margin:0 auto 16px;color:#c9d1d9}

/* ---------- footer ---------- */
.footer{background:var(--dark);color:rgba(255,255,255,.65);padding:42px 0 22px;margin-top:24px}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:30px;margin-bottom:30px}
@media (max-width:800px){.footer__grid{grid-template-columns:1fr 1fr}}
.footer__title{color:#fff;font-weight:800;font-size:14px;margin-bottom:14px}
.footer__links{display:flex;flex-direction:column;gap:8px;font-size:13px}
.footer__links a:hover{color:#fff}
.footer__desc{font-size:13px;line-height:1.6;margin-top:10px}
.footer__phone{display:block;color:#fff;font-size:16px;font-weight:800;margin-bottom:4px}
.footer__mail{color:var(--cyan);font-size:13px;display:block}
.footer__hours{font-size:13px;color:rgba(255,255,255,.6);margin-top:10px}
.footer__bottom{border-top:1px solid rgba(255,255,255,.09);padding-top:18px;display:flex;justify-content:space-between;font-size:12px;flex-wrap:wrap;gap:8px}

.loader-row{padding:52px;text-align:center;color:var(--muted);grid-column:1/-1}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .header__inner{flex-wrap:wrap;row-gap:10px}
  .search{order:10;flex:1 1 100%}
  .header__phone .btn-label{display:none}
  .megamenu{min-width:520px}
}

@media (max-width:760px){
  .topbar__links{gap:12px;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .topbar__links a{white-space:nowrap}
  .topbar__inner{gap:10px}

  /* шапка ОДНИМ рядком: [лого] [Каталог] ... [телефон] [кошик];
     пошук — другим рядком на всю ширину (правило ≤900px вище).
     Раніше кошик не влазив і падав на окремий третій рядок —
     шапка займала пів екрана. */
  .header{padding:10px 0}
  .header__inner{gap:8px}
  .logo{gap:6px}
  .logo__mark{width:30px;height:30px;border-radius:8px}
  .logo__text{font-size:15px;letter-spacing:.3px}
  .logo__text small{display:none}

  .catalog-btn{padding:8px 10px;font-size:13px;gap:6px}
  .catalog-btn svg{width:16px;height:16px}
  .header__phone{padding:6px;margin-left:auto}
  .header__phone svg{width:19px;height:19px}
  .cart-btn{padding:8px 9px}
  .cart-btn .btn-label{display:none}
  .cart-btn svg{width:19px;height:19px}

  .megamenu{position:fixed;left:16px;right:16px;top:auto;min-width:0;max-height:70vh;overflow:auto}
  .megamenu__grid{grid-template-columns:1fr 1fr;gap:6px}

  .catalog-layout{gap:16px}
  .products-grid,.grid{grid-template-columns:repeat(2,1fr)!important}

  .intro{padding:28px 0}
  .intro h1{font-size:22px}
  .intro p{font-size:13px}
  .intro__feats{gap:14px;margin-top:16px}
  .feat{font-size:12px}
  .feat svg{width:18px;height:18px}

  .catalog-toolbar{gap:10px;padding:12px 0}
  .catalog-toolbar__right{gap:10px;margin-left:0}

  .product{gap:20px}
  .product__title{font-size:16px}
  .product__price{font-size:28px}
  .product__old{font-size:18px}

  .cart-table thead{display:none}
  .cart-table,.cart-table tbody,.cart-table tr,.cart-table td{display:block;width:100%}
  .cart-table tr{border:1px solid var(--border);border-radius:8px;margin-bottom:10px;padding:10px;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
  .cart-table td{border:none;padding:0}
  .cart-item__title{max-width:none}

  .footer__grid{grid-template-columns:1fr;gap:22px}
  .footer__bottom{flex-direction:column;align-items:flex-start;gap:6px}
}

@media (max-width:480px){
  .products-grid,.grid{grid-template-columns:1fr!important}
  .subcat-grid{grid-template-columns:repeat(3,1fr)}
  .categories-grid{grid-template-columns:repeat(2,1fr)}
  .container{padding:0 12px}
  .search__input{padding:10px 40px 10px 12px;font-size:13px}
}

/* ---------- форма зворотного зв'язку ({{contact-form}}) ---------- */
.contact-form{display:flex;flex-direction:column;gap:12px;max-width:480px;margin:16px 0}
.contact-form__input{width:100%;padding:11px 15px;border:1px solid #d6dbe2;border-radius:var(--radius);background:#fff;color:#1c2430;outline:none;font:inherit;transition:border-color .15s}
.contact-form__input:focus{border-color:#00b3ff}
.contact-form__input::placeholder{color:#98a2ae}
textarea.contact-form__input{resize:vertical;min-height:110px}
.contact-form__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.contact-form .btn{align-self:flex-start}
.contact-form__status{font-size:14px;min-height:18px}
.contact-form__status.is-ok{color:#1a9e55}
.contact-form__status.is-err{color:#d64545}

/* ---------- мобільний каталог (як на in-green): drawer фільтрів + select сортування ---------- */
.catalog-toolbar__label{background:none;border:none;padding:0;cursor:default;color:inherit;font-weight:800;font-size:14px}
.sort-select{display:none}
.sidebar__mobilebar{display:none}
@media (max-width:900px){
  /* тулбар: рядок 1 — кнопка Фільтри + сортування + вид;
     рядок 2 (за потреби) — чіпи активних фільтрів */
  .catalog-toolbar .active-filters{flex-basis:100%;order:10;min-width:0}
  .catalog-toolbar__label{cursor:pointer;border:1px solid var(--border);border-radius:10px;padding:9px 14px;flex-shrink:0;background:#fff}
  .catalog-toolbar__right{flex-wrap:nowrap;flex:1 1 auto;min-width:0;margin-left:0}
  .toolbar__found{display:none}
  .segmented{display:none}
  .sort-select{display:block;flex:1;min-width:0;border:1px solid var(--border);border-radius:10px;padding:9px 10px;font-size:13px;background:#fff;color:var(--text);appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:14px;padding-right:30px}
  .view-toggle__label{display:none}

  /* сайдбар фільтрів -> off-canvas панель */
  .sidebar{position:fixed;top:0;left:0;bottom:0;z-index:300;width:min(320px,86vw);background:#fff;padding:0 16px 16px;overflow-y:auto;transform:translateX(-105%);transition:transform .25s ease;box-shadow:4px 0 24px rgba(0,0,0,.15)}
  .sidebar.open{transform:none}
  .sidebar__mobilebar{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:#fff;padding:14px 0 10px;border-bottom:1px solid var(--border);margin-bottom:10px;z-index:1}
  .sidebar__mobilebar b{font-size:16px}
  .sidebar__close{background:none;border:none;font-size:22px;line-height:1;padding:4px 8px;cursor:pointer;color:var(--text)}
}
.filter-backdrop{position:fixed;inset:0;background:rgba(15,22,32,.5);z-index:290;opacity:0;pointer-events:none;transition:opacity .25s}
.filter-backdrop.show{opacity:1;pointer-events:auto}
body.drawer-open{overflow:hidden}

/* ---------- оформлення замовлення (cart.html, як на in-green) ---------- */
.checkout{display:grid;grid-template-columns:1fr 400px;gap:24px;align-items:start}
@media (max-width:900px){.checkout{grid-template-columns:1fr}.checkout__summary{order:-1}}
.checkout__form{display:flex;flex-direction:column;gap:16px}
.checkout__box{border:1px solid var(--border);border-radius:12px;padding:20px;background:#fff}
.checkout__title{font-size:17px;font-weight:800;margin-bottom:14px}
.checkout__row{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.checkout__row:last-child{margin-bottom:0}
.checkout__row label{font-size:13px;color:var(--muted)}
.checkout__submit{align-self:flex-start;padding:13px 32px;font-size:15px}
.checkout__back{display:inline-block;margin-top:12px;font-size:13px;color:var(--muted)}
.checkout__back:hover{color:var(--blue)}
.summary-item{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--border);position:relative}
.summary-item__img{width:56px;height:56px;object-fit:contain;border-radius:8px;background:var(--gray);flex-shrink:0}
.summary-item__info{flex:1;min-width:0}
.summary-item__title{font-size:13px;font-weight:600;line-height:1.35;margin-bottom:8px;padding-right:20px}
.summary-item__row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.summary-item .cart-remove{position:absolute;top:10px;right:0}
.checkout-success{text-align:center;padding:48px 16px;display:flex;flex-direction:column;align-items:center;gap:12px}
.checkout-success svg{width:56px;height:56px;color:#1a9e55}
.checkout-success h2{font-size:22px}
.checkout-success p{color:var(--muted);max-width:420px}
.checkout-success .btn{margin-top:8px}
/* Екран очікування підтвердження Покупки Частинами */
.monopart-wait__spin{width:46px;height:46px;border-radius:50%;border:4px solid var(--border);border-top-color:var(--blue);animation:mp-spin .8s linear infinite}
.monopart-wait__status{font-weight:600;color:var(--blue)!important}
@keyframes mp-spin{to{transform:rotate(360deg)}}

/* ---------- мобільна шапка з гамбургером (як на in-green) ---------- */
.burger,.search-toggle{display:none;background:none;border:none;color:#fff;padding:8px;cursor:pointer;flex-shrink:0}
.burger svg,.search-toggle svg{width:22px;height:22px;display:block}
@media (max-width:760px){
  .topbar{display:none!important}
  .j-catnav-row{display:none!important}
  .catmenu{display:none}
  .header__phone{display:none}
  /* кабінет на мобільному живе в гамбургер-меню (як на in-green),
     а не іконкою в шапці — інакше дублювався б */
  .accmenu{display:none}
  .burger,.search-toggle{display:block}
  .header__inner{gap:4px;flex-wrap:wrap}
  .logo{flex:1;justify-content:center;gap:6px;min-width:0}
  .cart-btn{background:none;padding:8px}
  /* пошук прихований, розгортається лупою */
  .search{display:none}
  .header.search-open .search{display:flex;order:10;flex:1 1 100%;margin-top:8px}
}
/* виїзне гамбургер-меню */
.mobmenu{position:fixed;top:0;left:0;bottom:0;z-index:300;width:min(320px,86vw);background:#fff;padding:0 20px 20px;overflow-y:auto;transform:translateX(-105%);transition:transform .25s ease;box-shadow:4px 0 24px rgba(0,0,0,.15)}
.mobmenu.open{transform:none}
.mobmenu__bar{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:#fff;padding:16px 0 12px;border-bottom:1px solid var(--border);margin-bottom:6px;z-index:1}
.mobmenu__bar b{font-size:17px}
.mobmenu__section{padding:14px 0;border-bottom:1px solid var(--border)}
.mobmenu__title{font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.mobmenu__links{display:flex;flex-direction:column}
.mobmenu__links a{padding:10px 0;font-size:16px;color:var(--text);border-bottom:1px solid #f2f4f7}
.mobmenu__links a:last-child{border-bottom:none}
.mobmenu__links a:active{color:var(--blue)}
/* пункти кабінету в бічному меню (як на in-green: іконка + підпис).
   button (Вийти) вирівнюємо під <a>, щоб рядок не відрізнявся. */
.mobmenu__acclist a,.mobmenu__acclist button{display:flex;align-items:center;gap:12px;width:100%;padding:10px 0;font:inherit;font-size:16px;color:var(--text);background:none;border:none;border-bottom:1px solid #f2f4f7;text-align:left;cursor:pointer}
.mobmenu__acclist button:last-child{border-bottom:none}
.mobmenu__acclist svg{width:20px;height:20px;flex-shrink:0;color:var(--muted)}
.mobmenu__acc .mobmenu__title{text-transform:none;letter-spacing:0;font-size:14px;color:var(--text)}
.mobmenu__contacts{border-bottom:none}
.mobmenu__phone{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:800;color:var(--text);margin-bottom:6px}
.mobmenu__phone svg{width:20px;height:20px;color:var(--blue)}
.mobmenu__hours{font-size:13px;color:var(--muted);margin-bottom:10px}
.mobmenu__mail{font-size:14px;color:var(--blue)}

/* ---------- табличний вигляд каталогу (режим "список", як на in-green) ---------- */
.grid--table{display:block!important}
.ptable-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ptable{width:100%;border-collapse:collapse;font-size:13px;background:#fff}
.ptable th{text-align:left;padding:10px 12px;color:var(--muted);font-size:12px;font-weight:600;border-bottom:1px solid var(--border);white-space:nowrap}
.ptable td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
.ptable tbody tr:hover{background:var(--gray)}
.ptable tbody tr.selected{background:#eef8f1}
.ptable__sku{color:var(--muted);white-space:nowrap;font-size:12px}
.ptable__imgcell{width:56px}
.ptable__imgcell img{width:48px;height:48px;object-fit:contain;display:block}
.ptable__name a{font-weight:600}
.ptable__name a:hover{color:var(--blue)}
.ptable__avail{color:#1a9e55;white-space:nowrap;font-size:12px}
.ptable__avail--out{color:#8a8a8a}
.ptable__avail--preorder{color:#e08a00}
.ptable__note{display:block;color:var(--muted);white-space:normal;font-weight:400}
.ptable__price{white-space:nowrap;font-weight:700}
.ptable__old{color:var(--muted);text-decoration:line-through;font-weight:400;font-size:12px}
.ptable__sum{font-weight:800;white-space:nowrap;min-width:90px;text-align:right}
.ptable__qty .qty{display:inline-flex}

/* Мобільний list-вид: замість широкої таблиці (що розʼїжджалась по
   горизонталі на телефоні) — стопка рядків, як in-green: фото зліва,
   праворуч SKU/назва/ціна/степер/наявність. Стовпчик "Сума" ховаємо
   (підсумок і так є в плаваючій панелі "Моє замовлення"). */
@media (max-width:768px){
  .ptable-wrap{overflow-x:visible}
  .ptable{display:block;font-size:14px}
  .ptable thead{display:none}
  .ptable tbody{display:block}
  .ptable tr{display:grid;grid-template-columns:84px 1fr;column-gap:12px;row-gap:2px;align-items:center;padding:12px 0;border-bottom:1px solid var(--border)}
  .ptable td{display:block;padding:0;border:none;white-space:normal}
  .ptable__imgcell{grid-column:1;grid-row:1/6;width:auto;align-self:center}
  .ptable__imgcell img{width:80px;height:80px}
  .ptable__sku{grid-column:2;grid-row:1}
  .ptable__name{grid-column:2;grid-row:2}
  .ptable__name a{font-size:14px;line-height:1.3}
  .ptable__price{grid-column:2;grid-row:3;font-size:16px}
  .ptable__avail{grid-column:2;grid-row:4}
  .ptable__qty{grid-column:2;grid-row:5;margin-top:4px}
  .ptable__sum{display:none}
}

/* плаваюча панель "Моє замовлення" */
.orderbar{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--border);box-shadow:0 -6px 20px rgba(15,22,32,.12);z-index:150;transform:translateY(110%);transition:transform .2s ease}
.orderbar.show{transform:none}
.orderbar__inner{display:flex;align-items:center;gap:16px;padding:10px 16px}
.orderbar__label{display:flex;align-items:center;gap:10px}
.orderbar__label svg{width:20px;height:20px;color:var(--blue)}
.orderbar__total{margin-left:auto;white-space:nowrap;font-size:14px}
.orderbar__total b{font-size:17px}
.orderbar__submit{padding:11px 22px}
@media (max-width:760px){
  .orderbar__inner{gap:10px;padding:10px 12px}
  .orderbar__label b{display:none}
  .orderbar__submit{flex:1;padding:11px 10px;font-size:13px}
}

/* ---------- автокомпліт Нової Пошти в чекауті ---------- */
.npac{position:relative}
.npac__list{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:60;background:#fff;border:1px solid var(--border);border-radius:8px;max-height:280px;overflow-y:auto;box-shadow:0 8px 24px rgba(15,22,32,.14)}
.npac__item{padding:10px 12px;cursor:pointer;font-size:13px;line-height:1.35;border-bottom:1px solid #f2f4f7}
.npac__item:last-child{border-bottom:none}
.npac__item:hover{background:var(--gray)}
.npac__empty{padding:10px 12px;color:var(--muted);font-size:13px}
.contact-form__input:disabled{background:var(--gray);color:var(--muted);cursor:not-allowed}

/* ---------- блок "Блог" на головній (ряд останніх статей) ---------- */
.home-blog__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;gap:16px}
.home-blog__all{font-size:14px;font-weight:700;color:var(--blue);white-space:nowrap}
.home-blog__all:hover{text-decoration:underline}
/* Десктоп: сітка як на in-green — auto-fill (НЕ auto-flow:column з 1fr!),
   інакше одна-єдина стаття розтягується на всю ширину екрана */
.blog-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
.blog-row .blog-card__title{font-size:15px;-webkit-line-clamp:3;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
/* Мобайл: горизонтальна стрічка зі свайпом (видно ~1.3 картки) */
@media (max-width:760px){.blog-row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(200px,72%);overflow-x:auto;padding-bottom:8px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}.blog-row .blog-card{scroll-snap-align:start}}

/* ---------- таблиці й плейсхолдери фото в статтях блогу ---------- */
.article-table-wrap{overflow-x:auto;margin:20px 0;-webkit-overflow-scrolling:touch}
.article-table{width:100%;border-collapse:collapse;font-size:14px;min-width:320px}
.article-table th,.article-table td{border:1px solid var(--border);padding:9px 12px;text-align:left}
.article-table thead th{background:var(--gray);font-weight:800}
.article-table tbody tr:nth-child(even){background:#fafbfc}
.article-photo-ph{display:flex;align-items:center;gap:12px;margin:20px 0;padding:22px;border:2px dashed var(--border);border-radius:var(--radius);background:var(--gray);color:var(--muted)}
.article-photo-ph__ico{font-size:26px}
.article-photo-ph__cap{font-size:14px}

/* ---------- перелінковка картки товару (чіпи-лендинги + схожі) ---------- */
/* заголовки секцій картки — один рівень (22px), як «Опис» і «Схожі товари» */
h2.specs-title,h2.faq__title{font-size:22px;font-weight:800;margin:0 0 12px}
.specs-title{margin-top:22px!important}
.product-links{margin:18px 0}
.product-links__title{font-size:13px;color:var(--muted);margin-bottom:8px}
.product-links__chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-block;padding:6px 14px;border:1px solid var(--border);border-radius:999px;background:#fff;font-size:13px;font-weight:600;color:var(--fg);transition:border-color .15s,background .15s}
.chip:hover{border-color:var(--blue);background:var(--gray)}
.related{margin-top:40px}
.related .section__title{margin-bottom:18px}
@media(max-width:760px){.related{margin-top:28px}}

/* Універсальна горизонтальна карусель карток (референс in-green: "Схожі
   товари", "Всі товари цього бренда") — один рядок, стрілки на десктопі
   (js/medusa.js initCarousels), нативний свайп на мобільному (overflow-x
   auto + touch, без кастомного JS). Використовувати для БУДЬ-ЯКОГО нового
   подібного блоку карток — lib.js renderCarousel(title, itemsHTML). */
.carousel__body{position:relative}
.carousel__viewport{overflow-x:auto;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}
.carousel__viewport::-webkit-scrollbar{display:none}
.carousel__track{display:flex;gap:16px}
.carousel__track>.card{flex:0 0 230px;scroll-snap-align:start}
.carousel__viewport{scroll-snap-type:x proximity}
.carousel__arrow{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;color:var(--fg);cursor:pointer;z-index:2;transition:box-shadow .15s,opacity .15s,border-color .15s}
.carousel__arrow svg{width:18px;height:18px}
.carousel__arrow:hover{border-color:var(--blue);color:var(--blue)}
.carousel__arrow:disabled{opacity:0;pointer-events:none}
.carousel__arrow--prev{left:-19px}
.carousel__arrow--next{right:-19px}
@media(max-width:760px){
  .carousel__arrow{display:none}
  .carousel__track>.card{flex-basis:72%}
}

/* ---------- відгуки про товар ---------- */
/* ⚠️ Та сама картка, що й зріз (.dg): рамка + внутрішній відступ 28px.
   Раніше .reviews була секцією без рамки, тож її заголовок і підпис
   починались лівіше за зріз — на сторінці це читалось як «все гуляє». */
.reviews{margin-top:28px;border:1px solid var(--border);border-radius:14px;background:var(--bg);padding:26px 28px;
  --dg-label:13px;--dg-small:15px;--dg-text:16px;--dg-h2:22px}
.reviews .section__title{font-size:var(--dg-h2);line-height:1.2;letter-spacing:-.02em;margin:0 0 12px}
.reviews__summary{display:flex;align-items:center;gap:9px;font-size:var(--dg-text);margin-bottom:10px;flex-wrap:wrap}
.reviews__summary strong{font-size:var(--dg-text)}
.reviews__note{color:var(--muted);font-size:var(--dg-small);line-height:1.55;margin-bottom:20px;max-width:70ch}
.reviews__empty{color:var(--muted);font-size:var(--dg-small);margin-bottom:20px}
/* список — без власної рамки: розділювачі між записами, а не картка в картці */
.reviews__list{display:flex;flex-direction:column}
.review{padding:18px 0;border-bottom:1px solid var(--border)}
.review:last-child{border-bottom:0}
.review--ours{background:#f7fcf8;box-shadow:inset 3px 0 0 var(--green);border-radius:8px;padding:18px 16px;margin:0 -16px}
/* підзаголовок групи: думки про інші моделі тієї ж лінійки */
.reviews__group{font-size:var(--dg-label);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:22px 0 6px;border-top:1px solid var(--border);margin-top:8px}
.review__head{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.review__author{font-weight:700;font-size:var(--dg-text)}
.review__date{color:var(--muted);font-size:var(--dg-label);font-variant-numeric:tabular-nums}
.review__tag{font-size:var(--dg-label);color:var(--muted);background:var(--gray);border-radius:20px;padding:3px 10px;margin-left:auto;white-space:nowrap}
.review__tag--ours{background:#e8f6ea;color:#3d7c1f;font-weight:700}
.review__text{color:var(--text);font-size:var(--dg-text);line-height:1.6}
.reviews__more{border-top:1px solid var(--border);margin-top:0}
.reviews__more summary{cursor:pointer;padding:16px 0;font-weight:700;font-size:var(--dg-text);color:var(--blue-dark);list-style:none;display:flex;align-items:center;gap:10px;transition:color .15s}
.reviews__more summary:hover{color:var(--blue)}
.reviews__more summary::-webkit-details-marker{display:none}
.reviews__more summary::after{content:'';width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-4px;transition:transform .25s}
.reviews__more[open] summary::after{transform:rotate(-135deg);margin-top:2px}
.reviews__more[open] summary{border-bottom:1px solid var(--border)}
.reviews .review-form{margin-top:24px}
.review-form{margin-top:26px}
@media (max-width:560px){
  .reviews{--dg-h2:20px;padding:20px 18px}
  .review{padding:16px 0}
  .review--ours{padding:16px 12px;margin:0 -12px}
  .review__tag{margin-left:0}
}
.review-form{max-width:560px;border:1px solid var(--border);border-radius:var(--radius);padding:20px;background:var(--gray)}
.review-form__title{font-weight:800;font-size:16px;margin-bottom:12px}
.review-form__stars{display:flex;gap:4px;margin-bottom:12px}
.rf-star{background:none;border:none;cursor:pointer;font-size:28px;line-height:1;color:#f5a623;padding:0}
.review-form input,.review-form textarea{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:10px;margin-bottom:10px;font:inherit;background:#fff}
.review-form__submit{background:var(--blue);color:#fff;border:none;border-radius:10px;padding:11px 22px;font-weight:700;cursor:pointer}
.review-form__submit:disabled{opacity:.6;cursor:default}
.review-form__msg{margin-top:10px;font-size:14px}
.review-form__msg.is-ok{color:#1a8a4a}
.review-form__msg.is-err{color:#d33}
@media(max-width:760px){.reviews{margin-top:28px}}

/* ---------- опис товару + автор статті ---------- */
.product-desc{margin-top:36px}
/* ⚠️ довгі тексти картки товару — 16px, як у блоці досвіду власників.
   База вітрини 14px розрахована на короткі підписи каталогу; для опису на
   900+ знаків це дрібно, і поруч із блоком нижче давало різнобій кеглів. */
.product-desc__body{font-size:16px;line-height:1.6;color:var(--fg)}
/* підзаголовки ВСЕРЕДИНІ тексту — нижчий рівень за заголовок секції (22px) */
.product-desc__body h2,.product-desc__body h3{font-size:18px;font-weight:800;margin:22px 0 10px}
.product-desc__body p{margin:0 0 12px}
.product-desc__body ul,.product-desc__body ol{margin:0 0 12px 20px}
.article__meta{display:flex;gap:12px;align-items:center;color:var(--muted);font-size:14px;margin-bottom:18px}
.article__author{font-weight:700;color:var(--fg)}
.article__author::before{content:"✍ "}

/* ---------- SEO-текст на головній (під каталогом) ---------- */
.home-seo-section{background:var(--gray)}
.home-seo{max-width:820px;margin:0 auto}
.home-seo h2{font-size:24px;font-weight:800;line-height:1.25;margin:32px 0 14px;color:var(--fg)}
.home-seo h2:first-child{margin-top:0}
.home-seo p{font-size:16px;line-height:1.7;color:var(--fg);margin:0 0 16px}
.home-seo strong{font-weight:700}
.home-seo ul{list-style:none;padding:0;margin:0 0 18px}
.home-seo ul li{position:relative;padding-left:32px;margin-bottom:12px;font-size:16px;line-height:1.6}
.home-seo ul li::before{content:"";position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:50%;background:var(--blue);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/13px no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/13px no-repeat}
@media(max-width:760px){.home-seo h2{font-size:20px}.home-seo p,.home-seo ul li{font-size:15px}}

/* ---------- згортання SEO-тексту головної ("Читати повністю") ---------- */
/* Прихована частина лишається в DOM (max-height, не display:none) — Google
   бачить увесь текст; для людини — акуратне розкриття без стрибка сторінки. */
/* max-height виставляє JS (initHomeSeo) = scrollHeight контенту — щоб не
   обрізати текст будь-якої довжини (на вузькому екрані він високий). */
.home-seo__more{max-height:0;overflow:hidden;transition:max-height .5s ease,opacity .4s ease;opacity:0}
.home-seo.is-open .home-seo__more{opacity:1}
.home-seo__intro{position:relative}
/* затухання низу першого блоку, поки згорнуто — натяк "є ще" */
/* ⚠️ селектор через .j-home-seo і ПРЯМОГО нащадка: index.html має зовнішню
   обгортку <div class="home-seo"> навколо маркера, і потомковий селектор
   `.home-seo:not(.is-open) .home-seo__intro` матчився ЧЕРЕЗ НЕЇ — градієнт
   лишався навіть після розкриття (баг 2026-07-27) */
.j-home-seo:not(.is-open) > .home-seo__intro::after{content:"";position:absolute;left:0;right:0;bottom:0;height:88px;background:linear-gradient(to bottom,rgba(244,246,248,0),var(--gray));pointer-events:none}
.home-seo__toggle{display:flex;align-items:center;gap:8px;margin:20px auto 0;background:#fff;border:1px solid var(--border);border-radius:999px;padding:11px 24px;font-weight:700;font-size:15px;color:var(--blue);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.home-seo__toggle:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.home-seo__chev{width:18px;height:18px;transition:transform .3s;flex:none}
.home-seo.is-open .home-seo__chev{transform:rotate(180deg)}

/* ---------- галерея фото товару ---------- */
.product__thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.product__thumb{width:72px;height:72px;padding:0;border:2px solid var(--border);border-radius:10px;background:#fff;cursor:pointer;overflow:hidden;transition:border-color .15s}
.product__thumb img{width:100%;height:100%;object-fit:contain;display:block}
.product__thumb:hover{border-color:var(--blue)}
.product__thumb.active{border-color:var(--blue)}
@media(max-width:768px){
  .product__thumbs{display:none}
  .product__dots{display:flex}
  .product__slide{padding:16px;min-height:240px}
}

/* ── Особистий кабінет ── */
.account-btn{display:inline-flex;align-items:center;gap:8px;color:#fff}
.account-btn svg{width:20px;height:20px}
.account-btn:hover{color:var(--blue)}
/* ---------- Кабінет: дропдаун у шапці (референс in-green) ----------
   Той самий патерн, що й .megamenu: .open показує. Ім'я користувача —
   у .j-account-label, пункти рендерить ui.js із CAB_LINKS. */
.accmenu{position:relative;flex-shrink:0}
.accmenu__chev{display:inline-flex;align-items:center;transition:transform .15s}
.accmenu__chev svg{width:12px;height:12px}
.accmenu:has(.accmenu__dd.open) .accmenu__chev{transform:rotate(180deg)}
.accmenu__dd{display:none;position:absolute;top:calc(100% + 10px);right:0;min-width:230px;background:#fff;color:var(--text);border-radius:var(--radius);box-shadow:0 12px 40px rgba(15,22,32,.25);padding:8px;z-index:200}
.accmenu__dd.open{display:block}
.accmenu__item{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;border-radius:8px;background:none;border:none;cursor:pointer;font:inherit;font-size:14px;color:var(--text);text-align:left;transition:background .15s}
.accmenu__item:hover{background:var(--gray)}
.accmenu__item svg{width:19px;height:19px;flex-shrink:0;color:var(--muted)}
.accmenu__sep{height:1px;background:var(--border);margin:6px 8px}
/* ім'я довге — не розпирає шапку */
.account-btn .j-account-label{max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-auth{max-width:420px;margin:24px auto}
.account-tabs{display:flex;gap:8px;margin-bottom:18px}
.account-tab{flex:1;padding:11px;border:1px solid var(--border);border-radius:8px;background:#fff;font-weight:600;font-size:15px;cursor:pointer;color:var(--muted)}
.account-tab.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.account-form{display:flex;flex-direction:column;gap:12px}
.account-inp{padding:12px 14px;border:1px solid var(--border);border-radius:8px;font-size:15px;outline:none;box-sizing:border-box;width:100%}
.account-inp:focus{border-color:var(--blue)}
.account-submit{margin-top:4px}
.account-msg{font-size:13px;min-height:18px}
.account-msg.is-err{color:var(--red)}
/* Кабінет: бічне меню + розділи (референс in-green) */
.cab{display:grid;grid-template-columns:220px 1fr;gap:28px;margin:16px 0 40px}
.cab__nav{display:flex;flex-direction:column;gap:2px}
.cab__navitem{text-align:left;padding:11px 14px;border:none;background:none;font-size:15px;color:#333;cursor:pointer;border-radius:8px}
.cab__navitem:hover{background:var(--gray)}
.cab__navitem.active{background:var(--gray);font-weight:700}
.cab__logout{color:var(--muted);margin-top:8px}
.cab__title{font-size:26px;font-weight:800;margin-bottom:18px}
.cab__empty{color:var(--muted);padding:14px 0}
.cab-profile{display:flex;flex-direction:column;gap:0;max-width:520px}
.cab-field{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--border)}
.cab-field span{color:var(--muted)}
.cab-form{display:flex;flex-direction:column;gap:14px;max-width:480px}
.cab-form__row{display:flex;flex-direction:column;gap:6px}
.cab-form__row label{color:var(--muted);font-size:13px}
.account-msg.is-ok{color:var(--green)}
.cab-order{display:grid;grid-template-columns:1fr 1.4fr auto;gap:18px;align-items:start;border:1px solid var(--border);border-radius:12px;padding:18px 20px;margin-bottom:12px}
.cab-order__num{font-weight:700;margin-bottom:6px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cab-order__badge{font-size:11px;font-weight:600;padding:2px 8px;border-radius:5px;color:#fff}
.cab-order__badge.is-new{background:var(--blue)}
.cab-order__badge.is-done{background:var(--green)}
.cab-order__badge.is-cancel{background:#9aa2ac}
.cab-order__date{color:var(--muted);font-size:13px}
.cab-order__item{color:#333;font-size:14px;margin-bottom:2px}
.cab-order__total{font-weight:800;white-space:nowrap;text-align:right}
@media(max-width:768px){
  .cab{grid-template-columns:1fr;gap:14px}
  .cab__nav{flex-direction:row;flex-wrap:wrap}
  .cab__navitem{padding:9px 12px}
  .cab__logout{margin-top:0}
  .cab-order{grid-template-columns:1fr;gap:8px}
  .cab-order__total{text-align:left}
}

/* Обране (сердечко) — на картці кутом, на PDP кнопкою-текстом */
.card__wish{position:absolute;top:10px;right:10px;z-index:3;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:rgba(255,255,255,.9);color:#9aa2ac;cursor:pointer;transition:color .15s,background .15s;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.card__wish svg{width:18px;height:18px}
.card__wish:hover{color:var(--red)}
.card__wish.active{color:var(--red)}
.card__wish.active svg{fill:var(--red)}
.product__wish{display:inline-flex;align-items:center;gap:8px;background:none;border:none;color:var(--muted);font-size:15px;cursor:pointer;padding:6px 0;margin-bottom:16px}
.product__wish svg{width:20px;height:20px}
.product__wish:hover{color:var(--red)}
.product__wish.active{color:var(--red)}
.product__wish.active svg{fill:var(--red)}
/* Обране: --top у рядку з ціною (десктоп), --below окремим рядком (моб). Тут — щоб перебити базовий display вище */
.product__wish--top{margin:0}
.product__wish--below{display:none}
@media (max-width:800px){
  .product__wish--top{display:none}
  .product__wish--below{display:inline-flex}
}

/* ─── Зріз думок власників (узагальнення відгуків) ─────────────────────── */
/* ⚠️ ТИПОГРАФІЧНА ШКАЛА блока: рівно 6 ступенів, інших розмірів тут бути
   не повинно. Базовий текст — 16px і НЕ зменшується на мобільному (нижче
   16px читати з телефона важко, iOS ще й зумить поля вводу). Було 13
   різних розмірів — саме звідси відчуття «різнобою». */
.dg{
  --dg-label:13px;  /* службові uppercase-підписи, джерело */
  --dg-small:15px;  /* другорядне: лічильники, підписи під числами */
  --dg-text:16px;   /* ОСНОВНИЙ текст: списки, відповіді, примітки */
  --dg-lead:18px;   /* вступний абзац */
  --dg-h3:20px;     /* підзаголовки секцій */
  --dg-h2:22px;     /* заголовок блока — як у решти секцій вітрини */
  --dg-num:34px;    /* великі числа */
  --dg-lh:1.6;      /* єдина висота рядка для тексту */
  margin-top:40px;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--bg);
}
.dg>*{padding:26px 28px}
.dg>*+*{border-top:1px solid var(--border)}
.dg__head{display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap;padding-bottom:0;border:0}
/* ⚠️ глобальний .section__title має margin-bottom:22px — при align-items:center
   flex центрує по margin-box, і заголовок «з'їжджав» на 11px відносно бейджа */
.dg__head .section__title{font-size:var(--dg-h2);line-height:1.2;letter-spacing:-.02em;margin:0}
/* метка-походження: притиснута праворуч, щоб не читалась як хвіст заголовка */
.dg__badge{display:inline-flex;align-items:center;gap:7px;margin-left:auto;background:#eaf4fc;color:var(--blue-dark);font-size:var(--dg-label);font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:6px 12px;border-radius:20px;white-space:nowrap}
.dg__badge::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--blue);flex:none}
/* ⚠️ власний padding перебиває боковий відступ секції (.dg>*), тож задаємо
   горизонтальні 28px явно — інакше лід прилипає до рамки */
.dg__summary{font-size:var(--dg-lead);line-height:var(--dg-lh);padding:14px 28px 26px;border:0;max-width:66ch;color:var(--text)}
.dg__h3{font-size:var(--dg-h3);line-height:1.3;font-weight:700;margin-bottom:14px;letter-spacing:-.01em}
.dg__sub{font-size:var(--dg-label);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}

.dg__facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--border);border-top:1px solid var(--border);padding:0}
/* структура KPI як у сучасних дашбордів: іконка з підписом одним рядком
   зверху, велике число знизу. Іконка окремим рядком над числом давала кашу */
.dg__fact{background:var(--bg);padding:18px 28px 20px;display:flex;flex-direction:column;gap:10px;transition:background .2s}
.dg__fact:hover{background:#fbfdff}
.dg__fact-top{display:flex;align-items:center;gap:8px;font-size:var(--dg-label);color:var(--muted);line-height:1.35}
.dg__fact-i{width:17px;height:17px;flex:none;color:var(--blue);display:block}
.dg__fact-i svg{width:100%;height:100%;display:block}
.dg__fact-n{font-size:var(--dg-num);font-weight:800;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:6px}
.dg__fact-s{font-size:var(--dg-small);font-weight:600;color:var(--muted);letter-spacing:0}
.dg__tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}
.dg__tab{font:inherit;cursor:pointer;background:var(--gray);border:1.5px solid transparent;border-radius:10px;padding:13px 16px;display:flex;flex-direction:column;gap:4px;text-align:left;color:inherit;transition:border-color .18s,background .18s,transform .18s,box-shadow .18s}
.dg__tab:hover{border-color:#bcd9ef;background:#f7fbfe;transform:translateY(-1px)}
.dg__tab.is-on{background:#eaf4fc;border-color:var(--blue);box-shadow:0 2px 10px rgba(14,127,208,.13)}
.dg__tab:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.dg__tab-t{font-weight:700;font-size:var(--dg-text);line-height:1.3}
.dg__tab-c{font-size:var(--dg-small);color:var(--muted);font-variant-numeric:tabular-nums}

.dg__panel{display:none;background:var(--gray);border-radius:12px;padding:22px}
.dg__panel.is-on{display:block}
.dg__run{display:flex;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px dashed var(--border)}
.dg__run:last-child{border-bottom:0}
.dg__run-w{flex:1;font-size:var(--dg-text);line-height:1.45}
/* трек — діагональна штриховка (той самий прийом, що в сучасних дашбордах):
   одразу видно шкалу й заповнення, навіть коли смуга коротка */
.dg__run-b{width:min(34%,160px);height:10px;border-radius:5px;background:repeating-linear-gradient(135deg,#eef2f6 0 5px,#e2e8ef 5px 10px);flex:none;position:relative;overflow:hidden}
/* неакцентні смуги приглушені, найдовша в сегменті — на повний колір */
.dg__run-b i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--blue),var(--cyan));border-radius:5px;transform-origin:left;opacity:.42;transition:opacity .2s}
.dg__run.is-top .dg__run-b i{opacity:1}
.dg__run.is-top .dg__run-h{color:var(--blue-dark)}
.dg__run-h{font-weight:800;font-size:var(--dg-text);min-width:68px;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.dg__note{background:#fff8e6;border-left:3px solid #f0b429;border-radius:8px;padding:14px 16px;font-size:var(--dg-text);font-weight:600;line-height:1.5;margin:18px 0}
.dg__says ul{padding-left:22px;list-style:disc}
.dg__says li{font-size:var(--dg-text);line-height:var(--dg-lh);margin-bottom:9px}
.dg__says li:last-child{margin-bottom:0}
.dg__says li::marker{color:var(--blue)}

.dg__q{border-bottom:1px solid var(--border)}
.dg__q:last-child{border-bottom:0}
.dg__q summary{cursor:pointer;padding:15px 0;font-weight:700;font-size:var(--dg-text);line-height:1.4;list-style:none;display:flex;gap:12px;align-items:baseline;transition:color .15s}
.dg__q summary:hover{color:var(--blue-dark)}
.dg__q summary::-webkit-details-marker{display:none}
.dg__q summary::before{content:'';width:7px;height:7px;border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(-45deg);flex:none;transition:transform .25s;margin-top:6px}
.dg__q[open] summary::before{transform:rotate(45deg)}
.dg__q p{padding:0 0 15px 19px;font-size:var(--dg-text);line-height:var(--dg-lh);color:var(--text)}

.dg__years{display:flex;flex-direction:column}
/* ⚠️ ширини колонок фіксовані: кожен рядок — окремий grid, і при auto
   числа та оцінки не ставали б в одну вертикаль */
.dg__yr{display:grid;grid-template-columns:56px 1fr 40px 116px;align-items:center;gap:14px;padding:11px 0;border-bottom:1px dashed var(--border)}
.dg__yr:last-child{border-bottom:0}
.dg__yr-y{font-size:var(--dg-text);font-weight:700;font-variant-numeric:tabular-nums;line-height:1.3}
.dg__yr-y sup{font-size:11px;color:var(--muted);font-weight:400;margin-left:1px}
.dg__yr-b{height:10px;border-radius:5px;background:repeating-linear-gradient(135deg,#eef2f6 0 5px,#e2e8ef 5px 10px);position:relative;overflow:hidden}
.dg__yr-b i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--blue),var(--cyan));border-radius:5px;opacity:.42}
.dg__yr.is-top .dg__yr-b i{opacity:1}
.dg__yr.is-top .dg__yr-n{color:var(--blue-dark)}
.dg__yr-n{font-size:var(--dg-text);font-weight:800;font-variant-numeric:tabular-nums;text-align:right}
/* ⚠️ зірки й число — ОКРЕМІ колонки: при flex-end пара «зірки+4,76» довша
   за «зірки+5», і рядок із короткою оцінкою з'їжджав ліворуч */
.dg__yr-a{display:grid;grid-template-columns:auto 40px;align-items:center;gap:8px;color:var(--muted);font-size:var(--dg-small);font-variant-numeric:tabular-nums}
.dg__yr-a .stars{font-size:12px}
.dg__yr-a b{font-weight:700;color:var(--text);text-align:right}
.dg__trend-note{font-size:var(--dg-label);color:var(--muted);margin-top:12px}
.dg__trend-note span{margin-left:6px}
.dg__src{font-size:var(--dg-label);color:var(--muted);line-height:1.6;background:var(--gray)}

/* ── Анімація: вмикається лише коли JS позначив блок (.dg--anim),
   тож без JS усе видно одразу. ⚠️ Поява зроблена на transition, а НЕ на
   animation з fill-mode: якщо анімації не програються (headless, екзотичні
   режими), кінцевий стан усе одно застосується і вміст лишиться видимим.
   Смужка автономії — на animation без fill-mode (декор: не програлось —
   просто не намалювалась, число годин поруч видно завжди).
   ⚠️ Панель сегмента і стовпчики років анімації НЕ мають свідомо: там
   застряглий перший кадр ховав би сам контент. ── */
@keyframes dgGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes dgFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .dg--anim .dg__facts,.dg--anim .dg__segs,.dg--anim .dg__qa,.dg--anim .dg__trend{
    opacity:0;transform:translateY(8px);
    transition:opacity .55s cubic-bezier(.22,.61,.36,1),transform .55s cubic-bezier(.22,.61,.36,1);
  }
  .dg--anim.is-in .dg__facts,.dg--anim.is-in .dg__segs,.dg--anim.is-in .dg__qa,.dg--anim.is-in .dg__trend{opacity:1;transform:none}
  .dg--anim.is-in .dg__segs{transition-delay:.06s}
  .dg--anim.is-in .dg__qa{transition-delay:.1s}
  .dg--anim.is-in .dg__trend{transition-delay:.14s}
  .dg.is-in .dg__panel.is-on .dg__run-b i{animation:dgGrow .75s cubic-bezier(.22,.61,.36,1)}
  .dg__q[open] p{animation:dgFade .3s ease}
}
::view-transition-old(dg-panel),::view-transition-new(dg-panel){animation-duration:.28s}

@media (max-width:560px){
  /* ⚠️ Зменшуємо ЛИШЕ заголовки, числа й відступи. Основний текст (--dg-text)
     лишається 16px — на телефоні дрібніше читати важко. */
  .dg{--dg-h2:20px;--dg-num:28px;--dg-h3:18px;--dg-lead:17px}
  .dg__badge{margin-left:0}
  .dg__head{gap:10px}
  .dg>*{padding:20px 18px}
  .dg__panel{padding:18px}
  .dg__fact{padding:14px 18px 16px;gap:8px}
  .dg__run{flex-wrap:wrap;gap:8px}
  .dg__run-b{order:3;width:100%}
  .dg__run-h{min-width:0}
  .dg__tab{flex:1 1 100%}
  .dg__yr{grid-template-columns:48px 1fr 34px;gap:10px}
  .dg__summary{padding:12px 18px 20px}
  .dg__yr-a{grid-column:2 / -1;justify-content:flex-start}
}