/* ═══════════════════════════════════════════════════════════════
   Нова дизайн-система novoplast.ua (за концепт-макетом користувача,
   25.07+, поетапний редизайн). Простір імен .novo-* / .nav-* /
   .site-footer* — НЕ чіпає спільну легасі-обгортку .container/#content/
   .row/.col-lg-12, яку відкриває header.blade.php і закриває
   footer.blade.php для решти сторінок сайту (категорія/товар/блог/кошик).

   Фаза 1 (поточна): шапка + футер. Наступні фази додають сюди ж
   секції каталогу/картки товару/кошика/checkout (як один цільний
   стиль-файл, за прикладом самого макету). --------------------- */

/* ---------- Base reset (normalize.css 3.0.2 + bootstrap 3.3.2 scaffolding/type,
   відновлено 1:1 із бекапу /var/www/site від 27.07 15:00, ЗА годину до видалення
   бандла). Регресія: styles_c56a2d1629.min.css ніс не тільки .container/.row/
   .col-* (ті вже повернуто нижче для легасі-контенту в .page-wrap), а й БАЗОВІ
   стилі голих тегів - html/body/h1-h6/p/ul/ol/dl/table/a/img/hr/form-елементи.
   Ці правила ніколи не значились як class="" у розмітці, тому grep по 632
   bootstrap-класах (фаза 6) їх не бачив: body лишився без margin:0 (браузерний
   дефолт 8px), * без box-sizing:border-box сайт-вайд (не лише 5 заскоуплених
   ділянок нижче - звідси плавання ширини карток на головній), заголовки/списки/
   таблиці в легасі-контенті (блог, статичні сторінки, minishop2-виджет пошуку)
   втратили дефолтні відступи бутстрапу. Класи-хелпери (.h1-.h6, .container,
   .row/.col-*) сюди свідомо НЕ повернуто - вони або вже неживі (звірено фазою 6),
   або живуть заскоупленими нижче під .page-wrap. */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 10px; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
body { margin: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.42857143; color: #333; background-color: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
figure { margin: 0; }
img { vertical-align: middle; border: 0; }
a { background-color: transparent; color: #337ab7; text-decoration: none; }
a:focus, a:hover { color: #23527c; text-decoration: underline; }
/* Скоуп навмисно вузький (лише реальні "голі" легасі-посилання, де
   спрацьовує саме цей базовий a:hover) - .legacy-content/.desc-text/.seo-txt,
   а НЕ голий a:hover сайт-вайд: border-bottom - ІНША властивість за
   text-decoration, тож компонентні :hover (novo-card/nav-item/footer-links
   тощо), що перекривають лише text-decoration, її б не перекрили і лінія
   "протекла" б на всі посилання сайту (як сталось у коміті b326708). */
.legacy-content a:focus, .legacy-content a:hover,
.desc-text a:focus, .desc-text a:hover,
.seo-txt a:focus, .seo-txt a:hover {
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
h1, h2, h3, h4, h5, h6 { font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; }
h1, h2, h3 { margin-top: 20px; margin-bottom: 10px; }
h4, h5, h6 { margin-top: 10px; margin-bottom: 10px; }
h1 { font-size: 36px; }
h2 { font-size: 30px; }
h3 { font-size: 24px; }
h4 { font-size: 18px; }
h5 { font-size: 14px; }
h6 { font-size: 12px; }
p { margin: 0 0 10px; }
ol, ul { margin-top: 0; margin-bottom: 10px; }
ol ol, ol ul, ul ol, ul ul { margin-bottom: 0; }
dl { margin-top: 0; margin-bottom: 20px; }
dt { font-weight: 700; }
dd { margin-left: 0; line-height: 1.42857143; }
blockquote { padding: 10px 20px; margin: 0 0 20px; font-size: 17.5px; border-left: 5px solid #eee; }
hr { height: 0; margin-top: 20px; margin-bottom: 20px; border: 0; border-top: 1px solid #eee; box-sizing: content-box; }
table { border-spacing: 0; border-collapse: collapse; }
td, th { padding: 0; }
button, input, optgroup, select, textarea { margin: 0; font: inherit; color: inherit; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }
fieldset { padding: .35em .625em .75em; margin: 0 2px; border: 1px solid silver; min-width: 0; }
legend { padding: 0; border: 0; }

/* Самохостинг SVG-спрайт (/assets/icons/sprite.svg) замість icon-фонта —
   fixed width/height одразу в HTML-атрибутах, тому елементи не "стрибають"
   після довантаження шрифту (fill:currentColor успадковується крізь <use>
   у символ, бо жоден path у спрайті не задає власний fill). */
.icon { display: inline-block; width: 1em; height: 1em; fill: currentColor; vertical-align: -0.125em; flex-shrink: 0; }

:root {
  --primary: #1f84db;
  --primary-deep: #186bb5;
  --primary-soft: #e8f3fc;
  --orange: #ff7800;
  --dark: #1a1a2e;
  --dark2: #2d2d44;
  --mid: #6b6b80;
  --light: #eef2f6;
  --white: #ffffff;
  --green: #2dce89;
  --green-bg: #f0faf5;
  --border: #dde4ef;
  --red: #ff4757;
  --shadow: 0 2px 8px rgba(26,46,80,0.07);
  --shadow-md: 0 4px 20px rgba(26,46,80,0.10);
  --shadow-lg: 0 12px 40px rgba(26,46,80,0.15);
  --r: 16px;
  --r-sm: 12px;
  --r-xs: 8px;
  --tr: all 0.18s ease-in-out;
}

/* Заміна bootstrap .container для елементів шапки/футера, що НЕ входять
   у спільну легасі-обгортку .container/#content/.row/.col-lg-12 (описану
   вище) — та лишається на bootstrap до фази з рескіном самого контенту.
   Ширини/паддінги 1:1 з bootstrap .container + кастомний override 1400px,
   що раніше жив у <style> всередині header.blade.php. Без bootstrap-клірфіксу
   (:before/:after{display:table}) — він тут не потрібен. */
.novo-container { max-width: 1360px; padding-right: 20px; padding-left: 20px; margin-right: auto; margin-left: auto; }
/* Заміна bootstrap .row>.col-lg-12 (єдина колонка на всю ширину):
   row(-15px margin) + col(+15px padding) в сумі давали 0 відносно
   padding самого .container - тому тут просто position:relative
   (контейнер позиціювання для нащадків) без додаткових відступів. */
.novo-col-main { position: relative; min-height: 1px; }

/* Дрібні bootstrap-утиліти, що реально використовуються (search.blade.php,
   category.blade.php) - виносимо 1:1, а не тягнемо весь bootstrap заради двох класів */
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.hidden { display: none !important; }

/* ─────────────────────────── HEADER ─────────────────────────── */
.novo-header { background: var(--white); font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; }
.novo-header *, .novo-header *::before, .novo-header *::after { box-sizing: border-box; }
/* Базовий скид легасі-стилів посилань (bootstrap3-бандл інакше домальовує
   синій колір/підкреслення на :hover поверх наших правил) */
.novo-header a, .novo-header a:hover, .novo-header a:focus,
.site-footer a, .site-footer a:hover, .site-footer a:focus,
.novo-breadcrumb-wrap a, .novo-breadcrumb-wrap a:hover {
  text-decoration: none !important;
}
.header-sticky-wrapper { z-index: 200; background: var(--white); box-shadow: 0 2px 12px rgba(26,26,46,0.06); }

@media (max-width: 1023px) {
  /* position:sticky (не fixed) — сам лишається в потоці, тому не треба
     вручну вгадувати висоту (margin-top) для nav-strip: раніше банер
     (змінної висоти, вмикається/вимикається адміном) ламав розрахунок
     фіксованих 70px і лишав порожній проміжок над меню. */
  .header-sticky-wrapper { position: sticky; top: 0; z-index: 201; }
}

/* Лого - раніше жило як background-image:url(base64 PNG) всередині
   легасі bootstrap-бандла (styles_c56a2d1629.min.css), винесено
   у звичайний файл при знятті бандла (фаза 6 видалення bootstrap) */
.logo-ua { display: inline-block; background-image: url(/assets/icons/logo-ua.png); background-position: center center; background-repeat: no-repeat; background-size: 125px 25px; margin-right: 5px; width: 125px; height: 30px; }

.header-top { display: flex; align-items: center; gap: 14px; padding-top: 14px; padding-bottom: 14px; }
/* Bootstrap-клірфікс .container:before/:after (content:" "; display:table) у флекс-контексті
   стає справжнім флекс-елементом і зʼїдає gap - зсуває логотип праворуч */
.header-top::before, .header-top::after { content: none; }
.header-top .logo-ua { flex-shrink: 0; }
@media (max-width: 480px) {
  .header-top { gap: 8px; padding-top: 12px; padding-bottom: 12px; }
  .header-top .logo-ua { background-size: 95px 19px !important; width: 95px !important; height: 30px !important; }
  .lang-pill { padding: 0 8px; font-size: 11px; }
}

.header-search { flex: 1; max-width: 520px; position: relative; margin: 0; }
.header-search input { width: 100%; height: 42px; background: var(--white); border: 1.5px solid var(--border); border-radius: 100px; padding: 0 44px 0 16px; font-family: inherit; font-size: 13.5px; color: var(--dark); outline: none; transition: var(--tr); margin: 0; }
.header-search input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(31,132,219,.1); background: var(--white); }
.header-search button { position: absolute; right: 0; top: 0; height: 42px; width: 44px; background: none; border: none; color: var(--mid); font-size: 16px; cursor: pointer; padding: 0; }

.header-contacts { flex: 1; display: flex; align-items: center; justify-content: center; gap: 14px; }
.hc-phone { font-size: 16px; font-weight: 800; color: var(--dark); transition: var(--tr); text-decoration: none; }
.hc-phone:hover { color: var(--primary); text-decoration: none; }
.hc-social { color: var(--mid); font-size: 16px; transition: var(--tr); text-decoration: none; line-height: 1; }
.hc-social:hover { color: var(--primary); text-decoration: none; }
.hc-hours { font-size: 13px; color: var(--mid); font-weight: 500; margin-left: 6px; }
.hc-link { font-size: 13px; font-weight: 700; color: var(--primary); border-bottom: 1px solid transparent; transition: var(--tr); text-decoration: none; }
.hc-link:hover { border-bottom-color: var(--primary); color: var(--primary); text-decoration: none; }
@media (max-width: 860px) { .header-contacts { display: none; } }

.header-actions { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.btn-icon { width: 42px; height: 42px; border-radius: 50%; background: var(--white); display: flex; align-items: center; justify-content: center; font-size: 18px; transition: var(--tr); color: var(--dark); position: relative; padding: 0; border: none; cursor: pointer; }
.btn-icon:hover { background: var(--primary-soft); color: var(--primary); }
.cart-badge { position: absolute; top: -2px; right: -2px; background: var(--red); color: #fff !important; font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; padding: 0 3px; border-radius: 100px; display: none; align-items: center; justify-content: center; }
.cart-badge.on { display: flex; }

/* Пігулка перемикача мов (Укр/рос) — окремий компонент, без легасі .link класу */
.lang-pill { display: inline-flex; align-items: center; height: 42px; padding: 0 12px; border-radius: 100px; font-size: 12px; font-weight: 700; color: var(--mid); white-space: nowrap; }
.lang-pill .lang-alt { color: var(--primary) !important; text-decoration: none !important; border: none !important; box-shadow: 0 1px 0 0 transparent; }
.lang-pill .lang-alt:hover { color: var(--primary-deep) !important; box-shadow: 0 1px 0 0 var(--primary-deep); }
.lang-pill .lang-sep { margin: 0 2px; opacity: .5; }

/* ─────────────────────────── NAV STRIP ─────────────────────────── */
.nav-strip { border-top: 1px solid var(--border); background: var(--white); font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; }
.nav-strip *, .nav-strip *::before, .nav-strip *::after { box-sizing: border-box; }
.nav-inner { display: flex; scrollbar-width: none; }
.nav-inner::-webkit-scrollbar { display: none; }
.nav-inner::before, .nav-inner::after { content: none; }
/* overflow-x:auto лише на мобайлі (де дропдауни й так вимкнені нижче) —
   на десктопі overflow-x!=visible ЗАВЖДИ змушує браузер обчислювати
   overflow-y як auto (навіть при явному overflow-y:visible, це по CSS
   Overflow spec, не браузерний баг) і обрізає абсолютно позиційований
   .nav-dropdown замість showить його поверх сторінки.
   Поріг 1180px (не 1023px, як markup нижче для .nav-dropdown/.nav-item-full)
   — виміряно: за повними лейблами nav-item-full реально потрібно до 1169px,
   інакше в діапазоні ~1024–1170px overflow-x ще visible і .nav-item-wrap
   вилазить за .nav-inner БЕЗ скролу, роздуваючи document.body.scrollWidth
   (тягне за собою весь .page-wrap/футер на всіх сторінках). */
@media (max-width: 1180px) {
  .nav-inner { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
.nav-item-wrap { position: relative; flex-shrink: 0; }
.nav-item { display: block; padding: 12px 0; margin-right: 28px; font-size: 13.5px; font-weight: 600; color: var(--mid); white-space: nowrap; border-bottom: 2px solid transparent; transition: var(--tr); text-decoration: none; }
.nav-item:hover, .nav-item.active { color: var(--dark); border-bottom-color: var(--primary); text-decoration: none; }
.nav-item-short { display: none; }
@media (max-width: 1180px) {
  .nav-item-full { display: none; }
  .nav-item-short { display: inline; }
}
.nav-item .icon-chevron-down { font-size: 9px; margin-left: 4px; opacity: .6; }

.nav-dropdown {
  display: none; position: absolute; top: 100%; left: 0; z-index: 250;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-sm);
  box-shadow: var(--shadow-md); padding: 8px; min-width: 220px; margin-top: -2px;
}
.nav-item-wrap:hover .nav-dropdown, .nav-item-wrap:focus-within .nav-dropdown { display: block; }
.nav-dropdown a { display: block; padding: 9px 12px; border-radius: 6px; font-size: 13px; font-weight: 600; color: var(--dark); white-space: nowrap; text-decoration: none; }
.nav-dropdown a:hover { background: var(--primary-soft); color: var(--primary); text-decoration: none; }
@media (max-width: 1180px) { .nav-dropdown { display: none !important; } }

/* ─────────────────────────── BREADCRUMB ─────────────────────────── */
.novo-breadcrumb-wrap { background: transparent; border-top: none; padding-top: 20px; font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; }
.novo-breadcrumb-wrap *, .novo-breadcrumb-wrap *::before, .novo-breadcrumb-wrap *::after { box-sizing: border-box; }
.novo-breadcrumb { max-width: 1360px; margin: 0 auto; padding: 10px 0; display: flex; align-items: center; font-size: 12.5px; color: var(--mid); overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.novo-breadcrumb::-webkit-scrollbar { display: none; }
.bc-link { color: var(--mid); transition: var(--tr); text-decoration: none; }
.bc-link:hover { color: var(--primary); text-decoration: none; }
.bc-sep { margin: 0 6px; opacity: .5; }
.bc-cur { color: var(--dark); font-weight: 700; }

/* ─────────────────────────── FOOTER ─────────────────────────── */
.site-footer { background: var(--white); border-top: 1px solid var(--border); padding: 52px 0 24px; margin-top: 44px; font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; }
.site-footer *, .site-footer *::before, .site-footer *::after { box-sizing: border-box; }
.footer-grid { max-width: 1360px; margin: 0 auto 36px; padding: 0 20px; display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 36px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; } }
@media (max-width: 500px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-logo { display: inline-block; margin-bottom: 14px; }
.footer-brand p { color: var(--mid); font-size: 13.5px; line-height: 1.7; max-width: 280px; margin: 0 0 10px 0; }
.footer-ukr { font-size: 12px; color: var(--mid); margin-top: 10px; }
.social-links { display: flex; gap: 10px; margin-top: 16px; }
.social-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--light); display: flex; align-items: center; justify-content: center; color: var(--mid); font-size: 15px; transition: var(--tr); }
.social-btn:hover { background: var(--primary); color: #fff; }
.footer-title { font-size: 15px; font-weight: 800; color: var(--dark); margin-bottom: 18px; margin-top: 0; }
ul.footer-links { list-style: none; display: flex; flex-direction: column; gap: 11px; padding: 0; margin: 0; }
ul.footer-links li { list-style: none; margin: 0; padding: 0; }
.footer-links a { color: var(--mid); font-size: 13.5px; font-weight: 500; transition: var(--tr); text-decoration: none; }
.footer-links a:hover { color: var(--primary); text-decoration: none; }
.fc-item { display: flex; align-items: flex-start; gap: 12px; color: var(--mid); font-size: 13.5px; margin-bottom: 14px; }
.fc-item .icon { font-size: 17px; color: var(--primary); margin-top: 1px; flex-shrink: 0; width: 18px; text-align: center; }
.fc-item a { color: var(--dark); font-weight: 700; transition: var(--tr); text-decoration: none; }
.fc-item a:hover { color: var(--primary); text-decoration: none; }
.footer-bottom { max-width: 1360px; margin: 0 auto; padding: 20px 20px 0; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: var(--mid); font-size: 12.5px; }
.footer-bottom a { color: var(--mid); text-decoration: none; }
.footer-bottom a:hover { color: var(--primary); text-decoration: none; }
.footer-warning { max-width: 1360px; margin: 12px auto 0; padding: 0 20px; font-size: 12px; color: var(--mid); }
.footer-warning span { color: var(--primary); font-weight: 600; }

/* ─────────────────────────── ОГОЛОШЕННЯ (banner_active) ─────────────────────────── */
.novo-banner { background: var(--primary-soft); color: var(--primary-deep); font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 13px; font-weight: 600; text-align: center; padding: 8px 20px; }

/* ═══════════════════════════════════════════════════════════════
   ФАЗА 2 — КАТАЛОГ КАТЕГОРІЙ (25.07+)
   Простір імен: .page-wrap/.catalog-layout/.sidebar/.sf-*/.main/
   .top-cats/.tc-*/.seo-intro/.toolbar/.pgrid/.novo-card*/.pag/.mfd*
   Живе ВСЕРЕДИНІ спільної легасі-обгортки .container/.row/.col-lg-12
   (Фаза 1 її не займала) — тому власний max-width тут не завжди
   вихід у 100% ширини сторінки, це прийнятний компроміс, як і в футері. */
.page-wrap, .page-wrap * , .page-wrap *::before, .page-wrap *::after { box-sizing: border-box; }
.page-wrap { font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; color: var(--dark); max-width: 1360px; margin: 0 auto; padding: 20px 0 0; display: flex; flex-direction: column; gap: 16px; }
.catalog-layout { display: flex; gap: 20px; align-items: flex-start; width: 100%; }

/* ---------- Заголовок сторінки ---------- */
.title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.page-title { font-size: clamp(20px, 3vw, 28px); font-weight: 800 !important; letter-spacing: -.3px; margin: 0; line-height: 1.55; }
.cnt-badge { background: var(--primary-soft); color: var(--primary); padding: 4px 12px; border-radius: 100px; font-size: 12px; font-weight: 700; white-space: nowrap; }

/* ---------- Top-cats (адмін-курировані плитки, category_tiles) ---------- */
.top-cats { margin-bottom: 0; }
ul.tc-list { display: flex; flex-wrap: wrap; gap: 16px; list-style: none; padding: 0 0 12px; margin: 0; }
li.tc-item-wrap { flex-shrink: 0; padding: 0; list-style: none; margin: 0 0 20px; margin-right: calc(14.2857% - 137.286px); }
.tc-link { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 120px; text-align: center; color: var(--dark); text-decoration: none; transition: var(--tr); }
.tc-link:hover { color: var(--dark); text-decoration: none; }
.tc-img { width: 120px; height: 120px; background-size: cover; background-position: center; background-color: var(--light); clip-path: url(#sub-category-clip-path); position: relative; transition: var(--tr); }
.tc-img::before { content: ""; opacity: .04; background-image: radial-gradient(50% 50%, #0000 0%, #000 100%); width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; transition: var(--tr); }
.tc-link:hover .tc-img::before { opacity: .12; }
.tc-name { font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.tc-count { display: none; }
li.tc-more { display: none; margin: 0; padding: 0; list-style: none; }

@media (max-width: 1023px) {
  .top-cats { border: 1px solid var(--border); border-radius: var(--r); padding: 0 16px; }
  ul.tc-list { flex-direction: column; flex-wrap: nowrap; gap: 0; padding-bottom: 0; }
  li.tc-item-wrap { display: none; margin: 0; }
  li.tc-item-wrap:nth-child(-n+3) { display: block; }
  .tc-link { flex-direction: row; width: 100%; text-align: left; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border); }
  li.tc-item-wrap:last-child .tc-link { border-bottom: none; }
  .tc-img { width: 44px; height: 44px; }
  .tc-name { flex: 1; font-size: 13.5px; font-weight: 600; }
  li.tc-more { display: block; }
  .tc-more-btn { width: 100%; display: flex; align-items: center; gap: 16px; padding: 12px 0; background: none; border: none; font-family: inherit; cursor: pointer; color: var(--dark); font-weight: 600; font-size: 13.5px; }
  .tc-more-icon { width: 44px; height: 44px; background: var(--light); display: flex; align-items: center; justify-content: center; color: var(--mid); font-size: 20px; clip-path: url(#sub-category-clip-path); }
  ul.tc-list.expanded li.tc-item-wrap { display: block; }
  ul.tc-list.expanded li.tc-more { display: none; }
}

/* ---------- SEO-інтро (короткий вступ над сайдбаром) ---------- */
.seo-intro { background: var(--white); border: none; border-radius: var(--r); padding: 18px 20px; display: flex; gap: 16px; align-items: flex-start; }
.seo-ico { width: 44px; height: 44px; flex-shrink: 0; background: var(--primary-soft); border-radius: var(--r-xs); display: flex; align-items: center; justify-content: center; color: var(--primary); font-size: 20px; }
.seo-ttl { font-size: 14px; font-weight: 700; margin: 0 0 5px; }
.seo-txt { font-size: 12.5px; color: var(--mid); line-height: 1.65; margin: 0; }
.seo-txt p { margin: 0 0 8px; }
.seo-txt p:last-child { margin-bottom: 0; }

/* ---------- Довгий SEO-текст після лістингу ---------- */
.seo-block { background: var(--white); border: 1px solid var(--border); border-radius: var(--r); padding: 24px 26px; margin-top: 8px; }
.seo-block h2 { font-size: 18px; font-weight: 800; margin-bottom: 10px; letter-spacing: -.2px; }
.seo-block h3 { font-size: 14px; font-weight: 700; margin: 16px 0 7px; }
.seo-block p { font-size: 13px; color: var(--mid); line-height: 1.75; margin-bottom: 10px; }

/* ---------- Сайдбар-фільтри / мобільний дровер ----------
   ОДНА форма в DOM (id="mse2_filters" — на нього зав'язаний filters.js) —
   на десктопі звичайний статичний сайдбар, на мобайлі той самий контейнер
   стає fixed slide-in дровером (клас .on від filters-drawer.js). Без
   дублювання полів — тому і жодного ризику розсинхронізації двох копій. */
.sidebar { width: 252px; min-width: 252px; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; }
#mse2_filters { display: contents; }
.mfd-head { display: none; }
@media (max-width: 1023px) {
  .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 301;
    width: min(290px, 90vw); min-width: 0; background: var(--white);
    overflow-y: auto; padding-bottom: 20px; gap: 0;
    transform: translateX(-100%); transition: transform .28s cubic-bezier(.4,0,.2,1);
  }
  .sidebar.on { transform: none; box-shadow: 8px 0 40px rgba(26,26,46,.14); }
  /* display:contents на #mse2_filters (потрібен на десктопі, щоб .sf-картки
     були прямими flex-дітьми .sidebar) ламає обчислення scrollHeight
     батька-скролл-контейнера — .sidebar думає, що скролити нічого, і
     остання частина списку розмірів обрізається без скролу. На мобайлі,
     де .sidebar сам стає overflow-y:auto дровером, формі повертаємо
     реальний бокс. */
  #mse2_filters { display: flex; flex-direction: column; }
  .sidebar .sf { border: none; border-bottom: 1px solid var(--border); border-radius: 0; box-shadow: none; }
  .sidebar .sf:last-child { border-bottom: none; }
  .mfd-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--border);
    position: sticky; top: 0; background: var(--white); z-index: 1;
  }
  .mfd-title { font-size: 17px; font-weight: 800; margin: 0; }
  .mfd-close { width: 34px; height: 34px; border-radius: var(--r-xs); background: var(--light); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; color: var(--mid); transition: var(--tr); }
  .mfd-close:hover { background: var(--border); }
}
.sf { background: var(--white); border: none; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-md); }
.sf-head { padding: 14px 16px 10px; display: flex; align-items: center; justify-content: space-between; }
.sf-title { font-size: 11.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--mid); }
.sf-reset { font-size: 11.5px; color: var(--primary); font-weight: 700; transition: var(--tr); padding: 0; background: none; border: none; text-decoration: none; }
.sf-reset:hover { opacity: .7; text-decoration: none; }
.sf-body { padding: 2px 14px 14px; }
.r-list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.r-item { display: flex; align-items: center; gap: 9px; padding: 6px 4px; border-radius: var(--r-xs); cursor: pointer; transition: background var(--tr); margin: 0; list-style: none; }
.r-item:hover { background: #e4eaf2; }
.r-item input[type=radio], .r-item input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--primary); cursor: pointer; flex-shrink: 0; margin: 0; }
.r-lbl { font-size: 13px; font-weight: 500; cursor: pointer; flex: 1; margin: 0; }
.r-cnt { font-size: 11px; color: var(--mid); font-weight: 600; }

/* ---------- Тулбар (мобільний фільтр-тригер + лічильники + сортування) ---------- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; padding-bottom: 40px; }
.stock-row { display: flex; gap: 8px; flex-wrap: wrap; margin-right: auto; align-items: center; }
.stock-badge { display: flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--r-xs); font-size: 12px; font-weight: 700; }
.stock-badge.in { background: var(--green-bg); color: #1f9b5e; border: 1px solid #d4f0e2; }
.stock-badge.ord { background: #fff8ee; color: #c47a00; border: 1px solid #fce8cd; }
.stock-dot { width: 7px; height: 7px; border-radius: 50%; }
.stock-badge.in .stock-dot { background: var(--green); }
.stock-badge.ord .stock-dot { background: #f0a800; }
@media (max-width: 1023px) { .stock-row { display: none; } }

.toolbar { padding: 0 0 10px; display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.mob-filter-btn { display: none; align-items: center; gap: 6px; padding: 7px 13px; border-radius: var(--r-xs); background: var(--primary-soft); color: var(--primary); font-size: 13px; font-weight: 700; border: none; cursor: pointer; }
@media (max-width: 1023px) { .mob-filter-btn { display: flex; margin-right: auto; } .toolbar { padding: 0; } }

.sort-sel { padding: 6px 28px 6px 11px; border: 1.5px solid var(--border); border-radius: var(--r-xs); font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--dark); background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b6b80' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center; appearance: none; outline: none; transition: var(--tr); cursor: pointer; }
.sort-sel:focus { border-color: var(--primary); }
.sort-sel a { color: inherit; text-decoration: none; }

/* ---------- Картка товару ---------- */
.pgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 540px) and (max-width: 1023px) { .pgrid { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
@media (min-width: 1024px) { .pgrid { display: flex; flex-direction: column; gap: 8px; } }

.novo-card { background: var(--white); border-radius: var(--r); overflow: hidden; position: relative; display: flex; flex-direction: column; transition: var(--tr); text-decoration: none; color: var(--dark); box-shadow: var(--shadow-md); }
/* :hover БЕЗ гварда на touch-пристроях "залипає" при тапі/свайпі (iOS Safari
   тримає псевдоклас :hover, доки не тапнути десь-інде) — на каруселі
   .prow-scroll це виглядало як "зникає підложка картки" під час перелистування
   (box-shadow:none нижче + назва стає синьою var(--primary) одночасно). */
@media (hover: hover) {
  .novo-card:hover { box-shadow: var(--shadow-md); z-index: 10; text-decoration: none; color: var(--dark); }
  .novo-card:hover .novo-card-img img { transform: scale(1.06); }
  .novo-card:hover .novo-card-name { color: var(--primary); text-decoration: none; }
}
@media (hover: hover) and (max-width: 1023px) { .novo-card:hover { box-shadow: none; } }
@media (max-width: 1023px) { .novo-card-body { padding: 10px 10px 5px; } }

.novo-card-img { background: var(--white); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.novo-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.novo-card-img .no-photo { font-size: 38px; opacity: .2; }

.novo-card-cover { display: none; }
/* На каруселі (home/"Схожі товари") картка клікабельна на весь блок -
   cover зверху (z-index:1) ловить клік будь-де (фото/назва/ціна ведуть на
   той самий $p->url(), що і його власні <a>, тож дублювання нешкідливе).
   .btn-req піднято явно (z-index:2), бо це JS-модалка "Замовити", а не
   посилання - має лишитись клікабельною поверх cover. .card-add (кошик)
   у каруселі й так display:none (рядок нижче), піднімати нема сенсу. */
.prow-scroll .novo-card-cover { display: block; position: absolute; inset: 0; z-index: 1; }

.novo-card-bgs { position: absolute; top: 8px; left: 8px; z-index: 2; display: flex; flex-direction: column; gap: 3px; }
.bg { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 100px; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .2px; }
.bg-sale { background: #ff0e7d linear-gradient(90deg, #ff4747, #ff0e7d); color: #fff; }

.novo-card-body { padding: 10px 12px 6px; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.novo-card-name { font-size: 12.5px; font-weight: 700; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0; color: var(--dark); text-decoration: none; transition: var(--tr); }
.novo-card-meta { font-size: 11px; color: var(--mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meta-avail-short { display: none; }
@media (max-width: 1023px) {
  .meta-avail-full { display: none; }
  .meta-avail-short { display: inline; }
}

.novo-card-specs { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; list-style: none; padding: 0; }
.spec-row { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--mid); }
.spec-row .icon { font-size: 11px; color: #b0b0c0; flex-shrink: 0; }
.spec-row b { color: var(--dark); font-weight: 700; }
.novo-card-intro { font-size: 12px; color: var(--mid); line-height: 1.4; }

.novo-card-foot { padding: 9px 12px 12px; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 8px; }
.price-block { display: flex; flex-direction: column; }
.price-old { font-size: 11px; color: var(--mid); text-decoration: line-through; line-height: 1; }
.price-now { font-size: 17px; font-weight: 800; color: var(--dark); line-height: 1.15; }
.price-now.sale { color: var(--red); }
.price-unit { font-size: 10px; color: var(--mid); margin-top: 1px; }
.price-percent { display: none; }

.btn-add { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; height: 40px; padding: 0 11px; border-radius: var(--r-xs); background: var(--primary); color: #fff; font-size: 12px; font-weight: 700; transition: var(--tr); white-space: nowrap; flex-shrink: 0; border: none; outline: none; cursor: pointer; text-decoration: none; }
.btn-add:hover { background: var(--primary-deep); box-shadow: 0 4px 12px rgba(31,132,219,.3); color: #fff; text-decoration: none; }

.card-add { transition: opacity .18s ease; }
.card-stepper { display: flex; align-items: center; width: 100%; height: 40px; box-sizing: border-box; background: var(--green); border-radius: var(--r-xs); padding: 4px; gap: 0; }
.cs-btn { width: 32px; height: 32px; flex-shrink: 0; border: none; background: #fff; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--dark); cursor: pointer; transition: var(--tr); outline: none; font-size: 13px; padding: 0; }
@media (hover: hover) { .cs-btn:hover { background: #f0f0f0; } }
.cs-btn:active { transform: scale(.92); }
.cs-btn .icon-trash3 { fill: var(--mid); }
.cs-qty { flex: 1; min-width: 0; text-align: center; font-size: 15px; font-weight: 700; color: #fff; background: none; border: none; outline: none; font-family: inherit; -moz-appearance: textfield; }
.cs-qty::-webkit-outer-spin-button, .cs-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.btn-req { width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px; border-radius: var(--r-xs); background: var(--light); color: var(--dark); font-size: 13px; font-weight: 700; transition: var(--tr); border: none; cursor: pointer; }
.btn-req:hover { background: var(--border); }

.novo-card-main { display: contents; }

@media (min-width: 1024px) {
  .novo-card { flex-direction: row; border-radius: var(--r-sm); min-height: 130px; }
  .novo-card-bgs { flex-direction: row; top: 10px; left: 10px; }
  .novo-card-img { width: 152px; min-width: 152px; height: 152px; aspect-ratio: auto; }
  .novo-card-body { flex: 1; flex-direction: row; align-items: flex-start; gap: 24px; padding: 16px 22px; }
  .novo-card-main { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; justify-content: space-between; }
  .novo-card-name { -webkit-line-clamp: 2; font-size: 15px; font-weight: 600 !important; }
  .novo-card-specs { flex-direction: row; flex-wrap: wrap; gap: 6px 20px; margin-top: 6px; }
  .spec-row { font-size: 12px; }
  .novo-card-foot { flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 10px; width: 200px; min-width: 200px; max-width: 200px; padding: 16px 20px; background: var(--white); border-radius: 0 var(--r-sm) var(--r-sm) 0; border-left: 1px solid var(--border); }
  .price-block { align-items: flex-start; }
  .price-old { font-size: 12px; }
  .price-now { font-size: 26px; }
  .btn-add { width: 100%; justify-content: center; height: 40px; padding: 0 10px; font-size: 13px; border-radius: var(--r-xs); }
  .btn-req { padding: 10px; font-size: 13px; border-radius: var(--r-xs); }
}

/* ---------- Секція-заголовок ("Категорії"/"Акції" на головній, "Схожі товари"
   на сторінці товару) + горизонтальна карусель .novo-card фіксованої ширини.
   Спільне для home.css і product.css, щоб картка виглядала однаково скрізь. ---------- */
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; gap: 12px; }
.section-title { font-size: 20px; font-weight: 800 !important; }
.section-link { font-size: 13px; font-weight: 700; color: var(--primary); white-space: nowrap; transition: var(--tr); }
.section-link:hover { opacity: .7; text-decoration: none; }

.prow-section { max-width: 1360px; margin: 44px auto 0; padding: 0; background: #fff; }
.prow-section .section-head { padding: 0; }
.prow-scroll {
  display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 22px 20px 30px; margin: -22px -20px -30px;
  scroll-padding-left: 20px;
}
.prow-scroll::-webkit-scrollbar { display: none; }
.prow-item { flex: 0 0 182px; scroll-snap-align: start; }

/* .novo-card на ≥1024px за замовчуванням стає горизонтальним (вище в цьому файлі) —
   тут карусель завжди фіксованої ширини, тож форсуємо мобільний вертикальний вигляд */
.prow-scroll .novo-card { flex-direction: column; border-radius: var(--r); min-height: 0; height: 270px; }
.prow-scroll .novo-card-img { width: auto; min-width: 0; height: auto; aspect-ratio: 1; flex-shrink: 0; }
.prow-scroll .novo-card-body { flex: 0 0 auto; flex-direction: column; align-items: stretch; gap: 4px; padding: 10px 10px 5px; min-height: 0; overflow: hidden; }
.prow-scroll .novo-card-main { display: contents; }
.prow-scroll .novo-card-name { -webkit-line-clamp: 2; font-size: 12.5px; font-weight: 700 !important; }
.prow-scroll .novo-card-specs { flex-direction: column; flex-wrap: nowrap; gap: 3px; margin-top: 4px; }
.prow-scroll .spec-row { font-size: 11px; }
.prow-scroll .novo-card-foot { flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 8px; width: auto; min-width: 0; max-width: none; padding: 9px 12px 12px; background: none; border-radius: 0; border-left: none; flex-shrink: 0; margin-top: 5px; }
.prow-scroll .price-block { flex-direction: row; align-items: center; justify-content: flex-start; gap: 6px; }
.prow-scroll .price-now { font-size: 17px; letter-spacing: -.3px; order: 1; }
.prow-scroll .price-now.sale { color: var(--dark); }
.prow-scroll .price-old { font-size: 12px; font-weight: 500; order: 2; }
.prow-scroll .price-percent { display: inline; font-size: 11px; color: var(--red); font-weight: 700; order: 3; }
/* Товари "на замовлення" (без прямої покупки) - кнопка замість ціни, стискаємо під той самий бюджет висоти футера */
.prow-scroll .btn-req { padding: 4px; font-size: 12px; gap: 4px; position: relative; z-index: 2; }
.prow-scroll .btn-req .icon { width: 13px; height: 13px; }

/* Компактна картка каруселі: без ID/наявності, характеристик, ціни за шт. і кнопки "В кошик" */
.prow-scroll .novo-card-meta,
.prow-scroll .novo-card-specs,
.prow-scroll .novo-card-intro,
.prow-scroll .price-unit,
.prow-scroll .card-add { display: none; }
.prow-scroll .novo-card-foot { padding-top: 0; }

/* .page-wrap - flex-контейнер (flex-direction:column), а .prow-section має
   margin:auto зліва/справа для центрування на головній (де предок - звичайний
   block flow, не flex). Усередині flex-контейнера auto-марджини на крос-осі
   означають "не розтягуй" замість "розтягни й центруй по max-width" - секція
   стискалась до контенту (3 картки ≈ 600px) і "спливала" в центр сторінки
   товару замість вирівнювання по лівому краю з рештою контенту вище. */
.page-wrap .prow-section { margin-left: 0; margin-right: 0; max-width: none; }

/* ---------- Пагінація ---------- */
.pag { display: flex; justify-content: center; gap: 5px; margin-top: 20px; }
.p-btn { width: 38px; height: 38px; border-radius: var(--r-xs); display: flex; align-items: center; justify-content: center; font-size: 13.5px; font-weight: 700; background: var(--white); border: 1.5px solid var(--border); color: var(--mid); cursor: pointer; transition: var(--tr); text-decoration: none; }
.p-btn:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }
.p-btn.on { background: var(--primary); border-color: var(--primary); color: var(--white); }
.p-btn.disabled { opacity: .4; pointer-events: none; }

/* ---------- Затемнення позаду мобільного дровера фільтрів ---------- */
.novo-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(26,26,46,.35); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity .25s; }
.novo-overlay.on { opacity: 1; pointer-events: all; }

/* ---------- Кошик (side drawer) ---------- */
.cart-drawer { position: fixed; top: 0; bottom: 0; right: 0; z-index: 301; background: var(--white); transition: transform .28s cubic-bezier(.4,0,.2,1), box-shadow .28s ease; display: flex; flex-direction: column; width: min(437px, 100vw); transform: translateX(100%); box-shadow: none; }
.cart-drawer.on { transform: none; box-shadow: -8px 0 40px rgba(26,26,46,.14); }

.cd-head { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: var(--white); z-index: 1; gap: 12px; }
.cd-title { font-size: 17px; font-weight: 800; }
.cd-count { font-size: 12px; color: var(--mid); font-weight: 500; margin-top: 2px; }
.cd-close { width: 34px; height: 34px; border-radius: var(--r-xs); background: var(--light); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; color: var(--mid); transition: var(--tr); padding: 0; }
.cd-close:hover { background: var(--border); }

.cd-items { flex: 1; overflow-y: auto; padding: 0; }

.cd-item { display: flex; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); position: relative; transition: opacity .18s ease; }
.cd-item:last-child { border-bottom: none; }
.cd-item-img { width: 64px; height: 64px; flex-shrink: 0; border-radius: 10px; background: var(--light); border: 1px solid var(--border); padding: 5px; box-sizing: border-box; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.cd-item-img img { width: 100%; height: 100%; object-fit: contain; }
.cd-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.cd-item-name { font-size: 13px; font-weight: 700; line-height: 1.35; color: var(--dark); text-decoration: none; padding-right: 26px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cd-item-name:hover { color: var(--primary); text-decoration: none; }
.cd-item-rm { position: absolute; right: 16px; top: 14px; width: 26px; height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #b8bcc4; transition: var(--tr); padding: 0; background: transparent; border: none; }
.cd-item-rm:hover { background: #fee2e2; color: var(--red); }
.cd-item-rm .icon { font-size: 12px; }

/* Пакування+ціна | сірий степпер, у рамці */
.cd-pack-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 5px 5px 12px; border: 1.5px solid var(--border); border-radius: 10px; }
.cd-pack-info { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.cd-pack-pk { font-size: 12.5px; font-weight: 700; color: var(--dark); line-height: 1.3; white-space: nowrap; }
.cd-pack-price { font-size: 11px; color: var(--mid); font-weight: 500; line-height: 1.4; white-space: nowrap; }

.cd-qty { display: flex; align-items: center; flex-shrink: 0; background: var(--light); border-radius: 8px; padding: 3px; height: 38px; }
.cd-qty-btn { width: 32px; height: 32px; flex-shrink: 0; background: #fff; border: 1px solid var(--border); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--dark); cursor: pointer; transition: var(--tr); padding: 0; font-size: 13px; }
@media (hover: hover) { .cd-qty-btn:hover { background: #f4f4f6; } }
.cd-qty-btn:active { transform: scale(.92); }
.cd-qty-btn:disabled { opacity: .35; cursor: default; }
.cd-qty-val { width: 34px; min-width: 0; text-align: center; font-size: 13px; font-weight: 800; color: var(--dark); background: none; border: none; outline: none; font-family: inherit; -moz-appearance: textfield; padding: 0; }
.cd-qty-val::-webkit-outer-spin-button, .cd-qty-val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cd-line-total { text-align: right; font-size: 15px; font-weight: 800; color: var(--dark); white-space: nowrap; }

.cd-empty { text-align: center; padding: 56px 20px; color: var(--mid); }
.cd-empty .icon { font-size: 48px; opacity: .15; display: block; margin-bottom: 14px; }
.cd-empty p { margin: 0 0 16px; font-size: 14.5px; color: var(--dark); font-weight: 600; }
.cd-empty-link { display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; border-radius: var(--r-xs); border: 1px solid var(--border); font-size: 13.5px; font-weight: 700; color: var(--dark); text-decoration: none; }
.cd-empty-link:hover { background: var(--light); color: var(--dark); text-decoration: none; }

.cd-foot { padding: 16px 20px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: var(--white); }
.cd-total-line { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.cd-total-lbl { font-size: 14px; font-weight: 700; color: var(--dark); }
.cd-total-sum { font-size: 23px; font-weight: 800; color: var(--dark); }
.cd-view-link { display: block; text-align: center; margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--mid); transition: var(--tr); }
.cd-view-link:hover { color: var(--primary); text-decoration: none; }

.btn-checkout { width: 100%; height: 50px; background: var(--primary); color: #fff; border-radius: var(--r-xs); font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; transition: var(--tr); border: none; font-family: inherit; cursor: pointer; text-decoration: none; }
.btn-checkout:hover { background: var(--primary-deep); box-shadow: 0 4px 16px rgba(31,132,219,.3); color: #fff; text-decoration: none; }

.is-removing { opacity: 0; }

@media (max-width: 480px) {
  .cart-drawer { width: 100vw; }
}

/* ---------- Модалка "Замовити" (native <dialog>, без bootstrap.js) ---------- */
.novo-modal { position: fixed; margin: auto; padding: 0; border: none; border-radius: var(--r); box-shadow: var(--shadow-lg); width: calc(100% - 32px); max-width: 440px; font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; color: var(--dark); }
.novo-modal::backdrop { background: rgba(26,26,46,.5); }
.novo-modal-header { position: relative; padding: 18px 40px 12px 18px; border-bottom: 1px solid var(--border); }
.novo-modal-title { margin: 0 0 4px; font-size: 17px; font-weight: 800; }
.novo-modal-header small { font-size: 12.5px; color: var(--mid); }
.novo-modal-close { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: var(--r-xs); background: var(--light); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; line-height: 1; color: var(--mid); transition: var(--tr); padding: 0; }
.novo-modal-close:hover { background: var(--border); }
.novo-modal-body { padding: 18px; }
.novo-modal-row { display: flex; gap: 12px; flex-wrap: wrap; }
.novo-form-group { flex: 1; min-width: 160px; margin-bottom: 0; }
.novo-form-label { display: block; font-size: 12.5px; font-weight: 700; color: var(--dark); margin-bottom: 6px; }
.novo-form-control { display: block; width: 100%; height: 42px; padding: 0 14px; font-family: inherit; font-size: 14px; color: var(--dark); background: var(--white); border: 1.5px solid var(--border); border-radius: var(--r-xs); outline: none; transition: var(--tr); box-sizing: border-box; }
.novo-form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(31,132,219,.1); }
.novo-form-hint { display: block; margin-top: 4px; font-size: 11.5px; color: var(--mid); }
.novo-modal-actions { text-align: right; margin-top: 16px; }
.novo-btn-danger, .novo-btn-default, .novo-btn-primary { display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 20px; border-radius: var(--r-xs); border: none; outline: none; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: var(--tr); }
.novo-btn-danger { background: var(--red); color: #fff; }
.novo-btn-danger:hover { background: #e63e4d; }
.novo-btn-danger:disabled { opacity: .6; cursor: default; }
.novo-btn-default { background: var(--light); color: var(--dark); }
.novo-btn-default:hover { background: var(--border); }
.novo-btn-primary { background: var(--primary); color: #fff; }
.novo-btn-primary:hover { background: var(--primary-deep); }
.novo-alert { padding: 12px 14px; border-radius: var(--r-xs); font-size: 13.5px; margin-bottom: 12px; }
.novo-alert-success { background: var(--green-bg); color: #1f7a4d; }
.novo-alert-danger { background: #fdeceb; color: #b3251a; }

/* ---------- Легасі bootstrap-грід усередині $category->content()/$page->renderedContent() ---------- */
/* Готовий HTML, замерзлий у БД (categories.content_uk/ru, pages.content_uk/ru)
   ще при імпорті з MODX - НЕ blade-шаблон, тому жоден grep по
   resources/views цього не бачив (25 категорій з дітьми + 12 сторінок).
   Знято разом з bootstrap.css у фазі видалення bootstrap - без цих класів
   тайли/колонки просто стають стовпчиком замість сітки. Відтворено повну
   стандартну 12-колонкову bootstrap 3 сітку (перевірено запитом по БД -
   значення від col-*-1 до col-*-12 усіх чотирьох брейкпоінтів реально
   зустрічаються), а не лише вибірку - легше підтримувати, ніж вгадувати
   кожне наступне число. */
.page-wrap .row { margin-right: -15px; margin-left: -15px; }
.page-wrap .row:before, .page-wrap .row:after { content: " "; display: table; }
.page-wrap .row:after { clear: both; }
.page-wrap [class*="col-xs-"], .page-wrap [class*="col-sm-"],
.page-wrap [class*="col-md-"], .page-wrap [class*="col-lg-"] {
  position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; box-sizing: border-box;
}
.page-wrap .col-xs-1, .page-wrap .col-xs-2, .page-wrap .col-xs-3, .page-wrap .col-xs-4,
.page-wrap .col-xs-5, .page-wrap .col-xs-6, .page-wrap .col-xs-7, .page-wrap .col-xs-8,
.page-wrap .col-xs-9, .page-wrap .col-xs-10, .page-wrap .col-xs-11, .page-wrap .col-xs-12 { float: left; }
.page-wrap .col-xs-1 { width: 8.33333333%; }
.page-wrap .col-xs-2 { width: 16.66666667%; }
.page-wrap .col-xs-3 { width: 25%; }
.page-wrap .col-xs-4 { width: 33.33333333%; }
.page-wrap .col-xs-5 { width: 41.66666667%; }
.page-wrap .col-xs-6 { width: 50%; }
.page-wrap .col-xs-7 { width: 58.33333333%; }
.page-wrap .col-xs-8 { width: 66.66666667%; }
.page-wrap .col-xs-9 { width: 75%; }
.page-wrap .col-xs-10 { width: 83.33333333%; }
.page-wrap .col-xs-11 { width: 91.66666667%; }
.page-wrap .col-xs-12 { width: 100%; }
@media (min-width: 768px) {
  .page-wrap .col-sm-1 { float: left; width: 8.33333333%; }
  .page-wrap .col-sm-2 { float: left; width: 16.66666667%; }
  .page-wrap .col-sm-3 { float: left; width: 25%; }
  .page-wrap .col-sm-4 { float: left; width: 33.33333333%; }
  .page-wrap .col-sm-5 { float: left; width: 41.66666667%; }
  .page-wrap .col-sm-6 { float: left; width: 50%; }
  .page-wrap .col-sm-7 { float: left; width: 58.33333333%; }
  .page-wrap .col-sm-8 { float: left; width: 66.66666667%; }
  .page-wrap .col-sm-9 { float: left; width: 75%; }
  .page-wrap .col-sm-10 { float: left; width: 83.33333333%; }
  .page-wrap .col-sm-11 { float: left; width: 91.66666667%; }
  .page-wrap .col-sm-12 { float: left; width: 100%; }
}
@media (min-width: 992px) {
  .page-wrap .col-md-1 { float: left; width: 8.33333333%; }
  .page-wrap .col-md-2 { float: left; width: 16.66666667%; }
  .page-wrap .col-md-3 { float: left; width: 25%; }
  .page-wrap .col-md-4 { float: left; width: 33.33333333%; }
  .page-wrap .col-md-5 { float: left; width: 41.66666667%; }
  .page-wrap .col-md-6 { float: left; width: 50%; }
  .page-wrap .col-md-7 { float: left; width: 58.33333333%; }
  .page-wrap .col-md-8 { float: left; width: 66.66666667%; }
  .page-wrap .col-md-9 { float: left; width: 75%; }
  .page-wrap .col-md-10 { float: left; width: 83.33333333%; }
  .page-wrap .col-md-11 { float: left; width: 91.66666667%; }
  .page-wrap .col-md-12 { float: left; width: 100%; }
}
@media (min-width: 1200px) {
  .page-wrap .col-lg-1 { float: left; width: 8.33333333%; }
  .page-wrap .col-lg-2 { float: left; width: 16.66666667%; }
  .page-wrap .col-lg-3 { float: left; width: 25%; }
  .page-wrap .col-lg-4 { float: left; width: 33.33333333%; }
  .page-wrap .col-lg-5 { float: left; width: 41.66666667%; }
  .page-wrap .col-lg-6 { float: left; width: 50%; }
  .page-wrap .col-lg-7 { float: left; width: 58.33333333%; }
  .page-wrap .col-lg-8 { float: left; width: 66.66666667%; }
  .page-wrap .col-lg-9 { float: left; width: 75%; }
  .page-wrap .col-lg-10 { float: left; width: 83.33333333%; }
  .page-wrap .col-lg-11 { float: left; width: 91.66666667%; }
  .page-wrap .col-lg-12 { float: left; width: 100%; }
}
.page-wrap .img-responsive { display: block; max-width: 100%; height: auto; }

.error-404-page { max-width: 560px; margin: 64px auto; padding: 0 20px; text-align: center; }
.error-404-title { margin: 0 0 24px; font-size: 22px; font-weight: 700; color: var(--dark); }
.error-404-gif { display: block; width: 100%; height: auto; border-radius: var(--r-xs); margin-bottom: 32px; }