/* ============================================================
   ShopVasylieva — Gender-neutral, fully responsive CSS
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --primary:#5B4FCF;        /* purple — neutral, modern */
  --primary-light:#EDE9FF;
  --primary-dark:#4338A8;
  --accent:#F59E0B;         /* warm amber */
  --green:#16A34A;
  --red:#DC2626;
  --gray:#F8F8F8;
  --gray2:#EDEDED;
  --gray3:#767676;         /* WCAG AA fix: було #A0A0A0 (контраст 2.61:1 на білому — провал), тепер 4.54:1 */
  --gray4:#555;
  --dark:#1C1C1E;
  --white:#FFFFFF;
  --shadow:0 2px 16px rgba(0,0,0,.08);
  --shadow-md:0 4px 24px rgba(0,0,0,.12);
  --radius:12px;
  --radius-sm:8px;
  --sidebar-w:240px;
}
body{font-family:'Segoe UI',system-ui,-apple-system,Arial,sans-serif;color:var(--dark);background:#F5F5F7;font-size:15px;line-height:1.5}
/* Сторінка НІКОЛИ не повинна гортатись вбік цілком — усі горизонтальні
   "стрічки" (категорії, вкладки, мініатюри, номери сторінок тощо) мають
   ВЛАСНИЙ overflow-x:auto і тому не постраждають. А без цього правила
   будь-який елемент, що випадково стає на пару пікселів ширшим за
   екран (наприклад під час AJAX-підвантаження нових карток товару),
   робив прокручуваною ВСЮ сторінку — і якщо скрол-позиція випадково
   зсувалась вправо (типова примха мобільного Safari після
   динамічної підміни вмісту), обрізало ліву частину геть усього:
   лого в шапці, хлібні крихти, кнопку "Фільтр" — виглядало так, ніби
   "все поїхало", хоча насправді просто вся сторінка була прокручена
   вбік на кілька пікселів.
   html: width:100% (не 100vw — на iOS 100vw рахує і смугу скрола, якої
   тут і так не буде, але про всяк випадок). */
html{overflow-x:hidden;width:100%}
body{overflow-x:hidden;width:100%;position:relative}
/* <input type=file> — рендер керується ОС/браузером (кнопка "Обрати
   файл" + ім'я файлу), і навіть коли width:100% стоїть на самому полі,
   це не завжди приборкує його мінімальну ширину. max-width:100%
   гарантує, що воно ніколи не розширить картку форми вбік на
   мобільній (напр. завантаження аватара в кабінеті). */
input[type=file]{max-width:100%}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font-family:inherit}
button{cursor:pointer}
img{display:block;max-width:100%;object-fit:cover}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#ccc;border-radius:3px}

/* ===== TOPBAR ===== */


/* ===== HEADER ===== */
header{background:var(--white);box-shadow:0 1px 0 #eee,var(--shadow);position:sticky;top:0;z-index:200}
.header-inner{max-width:1280px;margin:auto;padding:12px 16px;display:flex;align-items:center;gap:12px}
.logo{font-size:20px;font-weight:900;color:var(--primary);white-space:nowrap;flex-shrink:0;letter-spacing:-.5px}
.logo span{color:var(--dark)}

/* Гамбургер і лупа-кнопка в шапці — лише мобільна версія (@media нижче) */
.mobile-menu-btn{display:none;border:none;background:none;padding:6px;color:var(--dark);cursor:pointer;flex-shrink:0}
.mobile-menu-btn svg{width:24px;height:24px}
.mobile-search-btn{display:none!important}

.search-wrap{flex:1;display:flex;max-width:720px;position:relative}
.search-wrap input{width:100%;height:42px;border:2px solid #E5E5EA;border-right:none;border-radius:var(--radius-sm) 0 0 var(--radius-sm);padding:0 14px;font-size:14px;outline:none;transition:.15s;background:#F8F8F8}
.search-wrap input:focus{border-color:var(--primary);background:#fff}
.search-wrap button{height:42px;padding:0 18px;background:var(--primary);color:#fff;border:none;border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:14px;font-weight:600;white-space:nowrap;transition:.15s}
.search-wrap button:hover{background:var(--primary-dark)}

/* Автопідказки пошуку — випадає під полем, працює і на ПК, і на мобільній */
.search-suggest{
  display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:250;
  background:var(--white);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);
  max-height:400px;overflow-y:auto;border:1px solid #eee;
}
.search-suggest.open{display:block}
.search-suggest-item{display:flex;align-items:center;gap:10px;padding:9px 12px;text-decoration:none;color:var(--dark)}
.search-suggest-item:hover{background:var(--gray)}
.search-suggest-img{width:36px;height:36px;border-radius:6px;object-fit:cover;flex-shrink:0}
.search-suggest-noimg{display:flex;align-items:center;justify-content:center;background:var(--gray);font-size:16px}
.search-suggest-name{flex:1;font-size:13px;font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search-suggest-price{font-size:13px;font-weight:700;color:var(--primary);flex-shrink:0}

.header-icons{display:flex;gap:2px;align-items:center;flex-shrink:0;margin-left:auto}
.icon-btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 10px;border:none;background:none;font-size:10px;color:var(--gray4);border-radius:var(--radius-sm);position:relative;cursor:pointer;transition:.15s}
.icon-btn:hover{background:var(--gray);color:var(--primary)}
.icon-btn svg{width:22px;height:22px}
.cart-badge{position:absolute;top:2px;right:4px;background:var(--primary);color:#fff;font-size:10px;font-weight:700;border-radius:50%;width:18px;height:18px;display:none;align-items:center;justify-content:center}
.cart-badge.show{display:flex}

/* ===== NAV CATEGORIES ===== */
.nav-cats{background:var(--white);border-bottom:1px solid #EDEDED}
.nav-cats .inner{max-width:1280px;margin:auto;padding:0 16px;display:flex;gap:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.nav-cats .inner::-webkit-scrollbar{display:none}
.nav-cat{display:flex;flex-direction:row;align-items:center;gap:6px;padding:10px 16px;font-size:13px;font-weight:600;color:var(--gray4);white-space:nowrap;cursor:pointer;transition:color .15s;text-decoration:none;position:relative;z-index:0}
.nav-cat:hover,.nav-cat-wrap.nav-hover-active .nav-cat{color:#fff}
/* Трапецієподібна підсвітка вкладки — з'являється ЛИШЕ на реальному
   наведенні (hover/JS-стан dropdown), НЕ на .active (поточна сторінка) —
   інакше одночасно "світилось" би і поточна категорія, і та, на яку
   навели, і було незрозуміло, яка з них що означає. */
.nav-cat::before{
  content:'';
  position:absolute;
  inset:0 -6px 0;
  background:var(--primary);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M23 0L77 0Q84 0 87 7L100 40L0 40L13 7Q16 0 23 0Z' fill='%23000'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M23 0L77 0Q84 0 87 7L100 40L0 40L13 7Q16 0 23 0Z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  opacity:0;
  transform:scaleY(.85);
  transform-origin:top;
  transition:opacity .18s, transform .18s;
  z-index:-1;
  pointer-events:none;
}
.nav-cat:hover::before,.nav-cat-wrap.nav-hover-active .nav-cat::before{
  opacity:1;
  transform:scaleY(1);
}
/* Поточна категорія (URL) — лише тонший, спокійніший акцент, щоб не
   плутати з активним ховером/dropdown-станом іншої вкладки. */
.nav-cat.active{color:var(--primary)}
/* На ховері підпис ЗАВЖДИ білий, навіть якщо це одночасно активна (поточна)
   категорія — інакше текст того ж кольору (var(--primary)), що й фонова
   трапеція під ним, стає невидимим. Найпомітніше саме на категоріях без
   підменю (нема дропдауна, що відволікає) — власник саме так і побачив. */
.nav-cat.active:hover,.nav-cat-wrap.nav-hover-active .nav-cat.active{color:#fff}
.nav-cat-icon{width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;position:relative;z-index:1;line-height:1}
.nav-cat-icon-img{width:22px;height:22px;object-fit:contain;flex-shrink:0;position:relative;z-index:1}

/* ── Випадаюче меню підкатегорій стовпчиками (тільки ПК, ховер) ── */
.nav-cat-wrap{position:relative;display:flex}
.nav-cat-dropdown{
  display:none;
  position:fixed;
  background:#fff;
  border:1.5px solid #EEEEEE;
  border-radius:var(--radius-sm);
  box-shadow:0 16px 32px rgba(28,28,30,.14);
  padding:18px 22px;
  z-index:9999;
  min-width:300px;
}
.nav-cat-dropdown.open{display:block}
.nav-cat-dropdown-cols{columns:2;column-gap:32px}
.nav-cat-dropdown-link{display:block;padding:7px 0;font-size:13.5px;font-weight:600;color:var(--dark);text-decoration:none;break-inside:avoid;white-space:nowrap;transition:.12s}
.nav-cat-dropdown-link:hover{color:var(--primary)}
@media (max-width:768px) {
  .nav-cat-dropdown{display:none !important}
}

/* ===== SUBCAT STRIP ===== */
.subcat-strip{background:#fff;border-bottom:1px solid #f0f0f0;padding:0;overflow:hidden;max-height:0;transition:max-height .3s ease}
.subcat-strip.open{max-height:60px}
.subcat-strip .inner{max-width:1280px;margin:auto;padding:8px 16px;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.subcat-strip .inner::-webkit-scrollbar{display:none}
.subcat-chip{padding:5px 14px;border:1.5px solid #ddd;border-radius:20px;font-size:12px;color:var(--gray4);white-space:nowrap;cursor:pointer;text-decoration:none;transition:.15s}
.subcat-chip:hover,.subcat-chip.active{border-color:var(--primary);color:var(--primary);background:var(--primary-light)}

/* ===== PAGE WRAPPER ===== */
.page-wrap{max-width:1280px;margin:auto;padding:20px 16px}
.page-title{font-size:22px;font-weight:800;margin-bottom:20px}

/* ===== HOME HERO ===== */
.hero{border-radius:var(--radius);background:linear-gradient(135deg,#5B4FCF 0%,#7C3AED 50%,#6D28D9 100%);padding:40px 40px 0;display:flex;align-items:flex-end;justify-content:space-between;overflow:hidden;margin-bottom:24px;min-height:260px;position:relative}
.hero-text{color:#fff;max-width:460px;padding-bottom:40px}
.hero-text h1{font-size:32px;font-weight:900;line-height:1.2;margin-bottom:10px}
.hero-text p{font-size:15px;opacity:.85;margin-bottom:20px}
.hero-img{font-size:100px;line-height:1;margin-bottom:-8px;flex-shrink:0}
.hero-badges{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.hero-badge{background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.3);color:#fff;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600}

/* Власний банер-фото (замінює градієнт) — темний градієнт зверху,
   щоб білий текст лишався читабельним поверх будь-якого фото. */
.hero.hero-custom{background-size:cover;background-position:center}
.hero.hero-custom::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,10,40,.72) 0%,rgba(20,10,40,.35) 55%,rgba(20,10,40,.05) 100%);z-index:0}
.hero.hero-custom .hero-text{position:relative;z-index:1}

/* ===== HOME HERO CAROUSEL (кілька слайдів) ===== */
.hero-carousel{border-radius:var(--radius);overflow:hidden;margin-bottom:24px;position:relative;aspect-ratio:2.4/1}
.hero-carousel .hero-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .5s ease;
  background-size:cover;background-position:center;display:flex;align-items:flex-end;justify-content:space-between;padding:40px;
  isolation:isolate}
.hero-carousel .hero-slide.active{opacity:1;visibility:visible}
.hero-carousel .hero-slide-img{position:absolute;inset:0;z-index:-1;display:block}
.hero-carousel .hero-slide-img img{width:100%;height:100%;object-fit:cover;display:block}
.hero-carousel .hero-slide::before{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(20,10,40,.72) 0%,rgba(20,10,40,.35) 55%,rgba(20,10,40,.05) 100%);z-index:0}
.hero-carousel .hero-slide.no-text::before{display:none}
.hero-carousel .hero-slide .hero-text{position:relative;z-index:1}
.hero-carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.85);border:none;cursor:pointer;z-index:5;display:flex;align-items:center;
  justify-content:center;font-size:19px;color:#333;transition:background .15s}
.hero-carousel-arrow:hover{background:#fff}
.hero-carousel-arrow.prev{left:14px}
.hero-carousel-arrow.next{right:14px}
.hero-carousel-dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:7px;z-index:5}
.hero-carousel-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.55);border:none;cursor:pointer;
  padding:0;transition:.2s}
.hero-carousel-dot.active{background:#fff;width:20px;border-radius:5px}

.btn-primary{background:var(--primary);color:#fff;border:none;padding:12px 26px;border-radius:var(--radius-sm);font-size:14px;font-weight:700;cursor:pointer;transition:.15s;display:inline-flex;align-items:center;gap:6px}
.btn-primary:hover{background:var(--primary-dark)}
.btn-white{background:#fff;color:var(--primary);border:none;padding:12px 26px;border-radius:var(--radius-sm);font-size:14px;font-weight:700;cursor:pointer;transition:.15s}

/* ==== Auth CTA (Зареєструватися / Увійти) — виразна кнопка, щоб не губилась на фоні ==== */
.btn-auth-primary{
  width:100%; padding:14px; border:none; border-radius:10px;
  font-size:15.5px; font-weight:700; letter-spacing:.2px; color:#fff;
  background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);
  box-shadow:0 4px 14px rgba(91,79,207,.38);
  cursor:pointer; transition:transform .15s ease, box-shadow .15s ease;
}
.btn-auth-primary:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(91,79,207,.48); }
.btn-auth-primary:active{ transform:translateY(0); box-shadow:0 3px 10px rgba(91,79,207,.35); }
.auth-switch-link{ color:var(--primary); font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.auth-switch-link:hover{ color:var(--primary-dark); }

/* ==== OAuth (Google / Facebook) ==== */
.btn-oauth{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:11px; border-radius:10px; font-size:14px; font-weight:600;
  text-decoration:none; transition:.15s; border:1.5px solid #E2E2E2; box-sizing:border-box;
}
.btn-oauth svg{ width:19px; height:19px; flex-shrink:0; }
.btn-oauth-google{ background:#fff; color:#333; }
.btn-oauth-google:hover{ background:#F8F8F8; border-color:#c9c9c9; }
.btn-oauth-facebook{ background:#1877F2; color:#fff; border-color:#1877F2; }
.btn-oauth-facebook:hover{ background:#1565D8; }
.btn-white:hover{background:var(--primary-light)}
.btn-outline{background:#fff;color:var(--dark);border:1.5px solid #ddd;padding:9px 18px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;cursor:pointer;transition:.15s}
.btn-outline:hover{border-color:var(--primary);color:var(--primary)}

/* Кнопка "Каталог товарів" на головній — лише мобільна версія (@media нижче) */
.mobile-catalog-btn{display:none}
.mobile-cat-banners{display:none}

/* КРИТИЧНО: без цих двох правил .mobile-drawer і .mobile-drawer-overlay
   не мали ЖОДНОГО стилю поза мобільним @media — і на ПК рендерились як
   звичайний блочний контент прямо в потоці сторінки (весь текст шторки
   "вивалювався" на головну, а SVG-іконки без розміру розтягувались на
   весь екран). Тепер приховані завжди, а мобільний @media лише вмикає
   показ і позиціонування, коли є клас .open. */
.mobile-drawer-overlay{display:none}
.mobile-drawer{display:none}

/* ===== SECTION TITLES ===== */
.section-title{font-size:20px;font-weight:800;margin-bottom:16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.section-title a{font-size:13px;font-weight:500;color:var(--primary)}
.section-title a:hover{text-decoration:underline}

/* ===== CATEGORY CHIPS ===== */
.cat-chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.cat-chip{background:var(--white);border:1.5px solid #EDEDED;border-radius:20px;padding:8px 18px;font-size:13px;cursor:pointer;transition:.15s;display:flex;align-items:center;gap:6px;text-decoration:none}
.cat-chip:hover,.cat-chip.active{border-color:var(--primary);color:var(--primary);background:var(--primary-light)}

/* ===== PRODUCT GRID ===== */
.products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-bottom:32px}
/* min-width:0 на прямих дітях гріда — без цього CSS Grid не дає
   колонці стиснутись вужче за природний мінімальний розмір вмісту
   картки (за замовчуванням grid-item має min-width:auto, а не 0).
   Картка з товаром, що має багато розмірів (напр. 6-8 кнопок розмірів
   в ряд) або довгу непереносиму строку, могла "роздути" всю колонку
   й обрізати сітку товарів праворуч на мобільній — саме така скарга
   надходила з реальних сторінок каталогу (сторінка 2+, де траплялись
   товари з довшим рядом розмірів, яких не було на 1-й сторінці
   тестових даних). */
.products-grid > *{min-width:0}

.product-card{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;cursor:pointer;transition:transform .2s,box-shadow .2s;position:relative;display:block;text-decoration:none;color:inherit;min-width:0}
.product-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.product-card .badge-tag{position:absolute;top:10px;left:10px;background:var(--primary);color:#fff;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;z-index:1}
.product-card .badge-tag.sale{background:#DC2626}
.product-card .badge-tag.low{background:var(--accent);color:#1C1C1E}
.wish-btn{position:absolute;top:10px;right:10px;background:rgba(255,255,255,.9);backdrop-filter:blur(4px);border:none;border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:15px;box-shadow:0 2px 8px rgba(0,0,0,.1);z-index:1;transition:.15s;cursor:pointer}
.wish-btn:hover,.wish-btn.active{transform:scale(1.15)}
.product-thumb{height:200px;background:linear-gradient(135deg,var(--gray) 0%,var(--gray2) 100%);display:flex;align-items:center;justify-content:center;font-size:72px;position:relative;overflow:hidden}
.product-thumb img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.product-thumb .emoji-fallback{font-size:72px;z-index:1}
.product-thumb .thumb-hover{opacity:0;transition:opacity .25s}
.product-card:hover .thumb-hover{opacity:1}
.color-dots{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);display:flex;gap:4px;z-index:2}
.color-dot{width:12px;height:12px;border-radius:50%;border:2px solid rgba(255,255,255,.9);box-shadow:0 1px 3px rgba(0,0,0,.2)}
.product-info{padding:12px}
.product-name{font-size:13.5px;font-weight:700;margin-bottom:3px;line-height:1.35;color:var(--dark)}
.product-cat{font-size:11.5px;color:var(--gray3);margin-bottom:8px}
.product-price-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:8px}
.product-price{font-size:16px;font-weight:800;color:var(--dark)}
.product-old-price{font-size:12px;color:var(--gray3);text-decoration:line-through}

/* Акційна ціна — червона й виділена, щоб знижку було видно одразу,
   а не тільки по перекресленій старій ціні поруч. */
.product-price.sale{color:#DC2626}
.product-page-price.sale{color:#DC2626}

/* Розміри на картці товару — видно ще до переходу на сторінку товару,
   яких розмірів немає в наявності (перекреслені й приглушені). */
.card-sizes{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
.card-size-chip{font-size:10.5px;font-weight:700;color:#555;background:#F4F4F6;border-radius:5px;padding:2px 6px;line-height:1.4}
.card-size-chip.unavailable{color:#C4C4CC;background:#FAFAFA;text-decoration:line-through}
.product-discount{font-size:11px;color:#DC2626;font-weight:700}
.product-stock{font-size:11px;color:var(--gray3);margin-bottom:6px}
.product-stock.low{color:var(--accent)}
.product-stock.out{color:var(--red)}
.add-cart-btn{width:100%;background:var(--primary);color:#fff;border:none;border-radius:var(--radius-sm);padding:9px;font-size:13px;font-weight:600;cursor:pointer;transition:.15s}
.add-cart-btn:hover{background:var(--primary-dark)}
.add-cart-btn:disabled{background:var(--gray2);color:var(--gray3);cursor:not-allowed}

/* ===== BANNER BLOCKS ===== */
.banner-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:32px}
.banner-block{border-radius:var(--radius);padding:28px;display:flex;align-items:center;justify-content:space-between;overflow:hidden;text-decoration:none;color:inherit;position:relative}
.banner-block.blue{background:linear-gradient(135deg,#3B82F6,#2563EB)}
.banner-block.green{background:linear-gradient(135deg,#16A34A,#15803D)}
.banner-block h3{color:#fff;font-size:18px;font-weight:800;margin-bottom:6px}
.banner-block p{color:rgba(255,255,255,.8);font-size:13px;margin-bottom:14px}
.banner-icon{font-size:60px;flex-shrink:0}

/* Власний банер-фото — той самий затемнюючий градієнт, що й у hero. */
.banner-block.banner-custom{background-size:cover;background-position:center}
.banner-block.banner-custom::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,20,.65) 0%,rgba(10,10,20,.25) 60%,rgba(10,10,20,0) 100%);z-index:0}
.banner-block.banner-custom>div{position:relative;z-index:1}

/* ===== SHOP PAGE ===== */
.shop-layout{display:flex;gap:24px;align-items:flex-start}
.sidebar{width:var(--sidebar-w);flex-shrink:0;background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}
.sidebar.sticky-sidebar {
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 100px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sidebar-scroll-area{
  display:flex;flex-direction:column;gap:4px;
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width: thin;
  scrollbar-color: #ddd transparent;
}
.sidebar-scroll-area::-webkit-scrollbar { width: 4px; }
.sidebar-scroll-area::-webkit-scrollbar-track { background: transparent; }
.sidebar-scroll-area::-webkit-scrollbar-thumb { background: #ddd; border-radius: 99px; }
.sidebar h3{font-size:15px;font-weight:800;margin-bottom:14px;color:var(--dark);padding-bottom:10px;border-bottom:1px solid #eee}

/* ── Верхній рядок сайдбару: заголовок + "Скинути" одразу зверху ── */
.sidebar-top-row{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;margin-bottom:14px;border-bottom:1px solid #eee;flex-shrink:0}
.sidebar-reset-link{font-size:12.5px;font-weight:600;color:var(--gray3);text-decoration:none;transition:.15s}
.sidebar-reset-link:hover{color:#EF4444}

.sidebar-section{margin-bottom:20px}
.sidebar-section h4{font-size:11px;font-weight:700;color:var(--gray3);margin-bottom:10px;text-transform:uppercase;letter-spacing:.6px}
.sidebar-link{display:block;padding:7px 10px;font-size:13.5px;color:var(--gray4);cursor:pointer;border-left:3px solid transparent;border-radius:0 6px 6px 0;transition:.15s;text-decoration:none}
.sidebar-link:hover,.sidebar-link.active{color:var(--primary);border-left-color:var(--primary);background:var(--primary-light)}
.sidebar-subcats{margin:2px 0 6px 18px;padding-left:10px;border-left:2px solid #eee}
.sidebar-sublink{display:block;padding:5px 10px;font-size:12.5px;color:var(--gray3);cursor:pointer;border-radius:6px;transition:.15s;text-decoration:none}
.sidebar-sublink:hover,.sidebar-sublink.active{color:var(--primary);background:var(--primary-light);font-weight:600}
.filter-check{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:13px;cursor:pointer}
.filter-check input{accent-color:var(--primary);width:15px;height:15px}
.filter-color-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.filter-color-swatch{width:22px;height:22px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:.15s}
.filter-color-swatch:hover,.filter-color-swatch.active{border-color:var(--primary);transform:scale(1.2)}
.price-range{display:flex;gap:8px;align-items:center;margin-top:6px}
.price-range input[type=number]{width:78px;padding:6px 8px;border:1.5px solid #eee;border-radius:6px;font-size:12px;text-align:center;outline:none}
.price-range input[type=number]:focus{border-color:var(--primary)}

/* ── Повзунок ціни (два накладені range-інпути) ── */
.price-slider{position:relative;height:28px;margin:16px 4px 2px}
.price-slider-track{position:absolute;top:50%;left:0;right:0;height:4px;background:#EBEAF2;border-radius:2px;transform:translateY(-50%)}
.price-slider-range{position:absolute;top:50%;height:4px;background:var(--primary);border-radius:2px;transform:translateY(-50%)}
.price-slider-thumb{position:absolute;top:50%;left:0;width:100%;transform:translateY(-50%);
  -webkit-appearance:none;appearance:none;background:none;pointer-events:none;margin:0;height:18px}
.price-slider-thumb::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;pointer-events:auto;
  width:18px;height:18px;border-radius:50%;background:#fff;border:2.5px solid var(--primary);
  box-shadow:0 1px 4px rgba(0,0,0,.18);cursor:pointer}
.price-slider-thumb::-moz-range-thumb{
  pointer-events:auto;width:18px;height:18px;border-radius:50%;background:#fff;
  border:2.5px solid var(--primary);box-shadow:0 1px 4px rgba(0,0,0,.18);cursor:pointer}
.price-slider-thumb::-moz-range-track{background:transparent;border:none}
.price-slider-bounds{display:flex;justify-content:space-between;font-size:11px;color:var(--gray3);margin-top:2px}

/* ── Список розмірів/віку/сезону — компактні "чіпи" з рамкою (той
   самий стиль, що й .subcat-chip вище), а не чекбокс+текст у 2
   стовпчики. Кожен чіп сам підлаштовується під довжину свого тексту й
   переноситься ЦІЛИМ рядком при потребі — на відміну від попереднього
   варіанту, де довгий підпис ("0-3 міс.") переносився усередині
   фіксованої колонки грід-сітки, а короткий ("3 міс.") лишався в один
   рядок, і рядки "стрибали" по висоті одне відносно одного. ── */
.size-checklist{display:flex;flex-wrap:wrap;gap:8px;max-height:280px;overflow-y:auto;margin-top:6px;padding:2px 2px 4px 0}
.size-checklist--grouped{max-height:170px;margin-top:4px;margin-bottom:6px}
.size-checklist--single{max-height:190px}
.size-group-label{font-size:11.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:#78709F;margin:12px 2px 0;flex-basis:100%}
.size-group-label:first-of-type{margin-top:6px}
.size-checklist::-webkit-scrollbar{width:5px}
.size-checklist::-webkit-scrollbar-thumb{background:#E2E0EE;border-radius:3px}
.size-check-row{
  display:inline-flex;align-items:center;justify-content:center;
  padding:8px 14px;border:1.5px solid #ddd;border-radius:20px;
  font-size:12.5px;line-height:1.3;color:var(--gray4);white-space:nowrap;
  cursor:pointer;transition:.15s;
}
.size-check-row:hover{border-color:var(--primary);color:var(--primary)}
.size-check-row:has(.size-check-input:checked){border-color:var(--primary);color:var(--primary);background:var(--primary-light);font-weight:700}
.size-check-input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.size-check-input:focus-visible ~ .size-check-label{outline:2px solid var(--primary);outline-offset:3px;border-radius:4px}
.size-check-box{display:none}
/* Розмір/сезон присутній у категорії, але 0 товарів відповідають
   поточним іншим фільтрам (напр. ціні) — не ховаємо (список "стрибав"
   би), а сіримо, як і чипи розмірів на картці товару (fix63). Чекбокс
   лишається клікабельним — вибір все одно валідний (multi-select
   "АБО" всередині групи), просто повідомляє "з цим — 0 результатів". */
.size-check-row.unavailable{border-color:#F0F0F0;color:#C4C4CC}
.size-check-row.unavailable:hover{border-color:#F0F0F0;color:#C4C4CC}
.size-check-row.unavailable .size-check-label{text-decoration:line-through}

/* ── Акордеон груп фільтра (розміри/вік/сезонність) — заголовок з
   стрілочкою, що плавно розгортає/згортає список нижче. Grid-рядок
   0fr → 1fr замість max-height — плавно й без "магічних" пікселів. ── */
.filter-accordion{margin-bottom:4px}
.filter-accordion-header{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  background:none;border:none;padding:10px 2px;margin:8px 0 0;cursor:pointer;
  font-size:11.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:#78709F;
}
.filter-accordion:first-child .filter-accordion-header{margin-top:0}
.filter-accordion-chevron{width:15px;height:15px;flex-shrink:0;transition:transform .22s ease;color:#B8B3D6}
.filter-accordion[data-open="1"] .filter-accordion-chevron{transform:rotate(180deg)}
.filter-accordion-body-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease}
.filter-accordion[data-open="1"] .filter-accordion-body-wrap{grid-template-rows:1fr}
.filter-accordion-body{overflow:hidden;min-height:0}
.filter-accordion-body .size-checklist{margin-top:2px}

.shop-main{flex:1;min-width:0}

/* ===== MOBILE FILTER TOGGLE ===== */
.filter-toggle-btn{display:none;width:100%;padding:11px;background:var(--white);border:1.5px solid #eee;border-radius:var(--radius-sm);font-size:14px;font-weight:600;margin-bottom:16px;color:var(--dark);cursor:pointer}
.sidebar-backdrop{display:none}
.sidebar-close-btn{display:none}
.sidebar-mobile-footer{display:none}

/* ===== SHOP TOOLBAR ===== */
.shop-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:10px}
.shop-toolbar h2{font-size:19px;font-weight:800}
.results-count{font-size:12px;color:var(--gray3)}
.sort-select{padding:8px 12px;border:1.5px solid #eee;border-radius:var(--radius-sm);font-size:13px;color:var(--dark);cursor:pointer;background:var(--white);outline:none}
.sort-select:focus{border-color:var(--primary)}
.sort-select-wrap{display:flex;align-items:center;gap:0}
.sort-select-wrap svg{display:none}

.breadcrumb{font-size:12.5px;color:var(--gray3);margin-bottom:14px}
.mobile-subcat-chips{display:none}
.breadcrumb a{color:var(--primary);cursor:pointer}
.breadcrumb a:hover{text-decoration:underline}

/* ===== PRODUCT PAGE ===== */
.product-page-layout{display:grid;grid-template-columns:1fr 1fr;gap:40px;background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);padding:32px;margin-bottom:24px}
/* min-width:0 — той самий захист від "роздування" grid-колонки за
   вмістом (див. детальний коментар у cart.php біля .cart-grid), тут
   про всяк випадок наперед, щоб довгий напис/кнопка на вкладках товару
   ніколи не змогли розсунути сторінку вбік на мобільній. */
.product-page-layout > *{min-width:0}
/* min-width:0 — критично: без цього grid-колонка "розпирається" під
   ширину незгорнутого ряду мініатюр (коли фото багато, ряд рахує свою
   мінімальну ширину як суму всіх мініатюр і штовхає всю колонку ширше
   за її законну частку 1fr, звідси й "розтягнуте" фото з сірими
   смугами по боках). */
.product-gallery{min-width:0}
.product-gallery .main-img{border-radius:var(--radius);height:520px;background:var(--gray);display:flex;align-items:center;justify-content:center;font-size:110px;margin-bottom:10px;overflow:hidden;position:relative;cursor:pointer}
.product-gallery .main-img img{width:100%;height:100%;object-fit:contain}
.thumb-row-wrap{display:flex;align-items:center;gap:6px}
.thumb-row{display:flex;gap:8px;overflow-x:auto;scroll-behavior:smooth;flex:1;min-width:0;scrollbar-width:none;-ms-overflow-style:none}
.thumb-row::-webkit-scrollbar{display:none}
.thumb-arrow{flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--gray);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;color:var(--dark);transition:.15s}
.thumb-arrow:hover{background:var(--gray2)}
.thumb-arrow:disabled{opacity:.25;cursor:default;pointer-events:none}
.product-gallery .main-img.no-zoom{cursor:default}
.main-img-nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.85);border:none;font-size:20px;color:var(--dark);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s;z-index:2;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.main-img-nav:hover{background:#fff;transform:translateY(-50%) scale(1.08)}
.main-img-prev{left:14px}
.main-img-next{right:14px}
.main-img-nav.hidden{display:none}
@media(max-width:640px){.main-img-nav{width:34px;height:34px;font-size:17px}}
.thumb-row{display:flex;gap:8px;scroll-snap-type:x proximity}
.thumb{width:64px;height:64px;border-radius:var(--radius-sm);background:var(--gray2);display:flex;align-items:center;justify-content:center;font-size:24px;cursor:pointer;border:2px solid transparent;overflow:hidden;transition:.15s;flex-shrink:0;scroll-snap-align:start}
.thumb:hover,.thumb.active{border-color:var(--primary)}
.thumb img{width:100%;height:100%;object-fit:contain;background:var(--gray)}
@media(max-width:640px){
  .thumb-row{gap:10px}
  .thumb{width:60px;height:60px}
}

/* ===== ЛАЙТБОКС (перегляд фото на весь екран) ===== */
.pdp-lightbox{position:fixed;inset:0;background:rgba(10,10,12,.94);z-index:10000;display:none;align-items:center;justify-content:center;flex-direction:column}
.pdp-lightbox.open{display:flex}
.pdp-lightbox img{max-width:90vw;max-height:82vh;object-fit:contain;border-radius:6px;user-select:none}
.pdp-lightbox-close{position:absolute;top:18px;right:22px;background:rgba(255,255,255,.12);color:#fff;border:none;width:42px;height:42px;border-radius:50%;font-size:20px;cursor:pointer;transition:.15s}
.pdp-lightbox-close:hover{background:rgba(255,255,255,.22)}
.pdp-lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.12);color:#fff;border:none;width:48px;height:48px;border-radius:50%;font-size:22px;cursor:pointer;transition:.15s;display:flex;align-items:center;justify-content:center}
.pdp-lightbox-nav:hover{background:rgba(255,255,255,.22)}
.pdp-lightbox-prev{left:18px}
.pdp-lightbox-next{right:18px}
.pdp-lightbox-counter{color:rgba(255,255,255,.7);font-size:13px;margin-top:14px;letter-spacing:.3px}
@media(max-width:640px){
  .pdp-lightbox-nav{width:40px;height:40px;font-size:18px}
  .pdp-lightbox-close{width:38px;height:38px;top:10px;right:10px}
}
.product-page-info h1{font-size:22px;font-weight:900;margin-bottom:6px;line-height:1.3}
.product-page-cat{font-size:12.5px;color:var(--gray3);margin-bottom:16px}
.product-page-sku{color:var(--gray3);font-size:12.5px}
.product-page-price{font-size:28px;font-weight:900;color:var(--dark);margin-bottom:4px}
.product-page-oldprice{font-size:14px;color:var(--gray3);text-decoration:line-through;display:inline}
.product-page-discount{display:inline-block;background:#FEF2F2;color:#DC2626;font-size:12px;font-weight:700;padding:2px 10px;border-radius:20px;margin-left:8px}
.product-stock-info{font-size:13px;margin:8px 0 20px;display:flex;align-items:center;gap:6px}
.product-stock-info.ok{color:var(--green)}
.product-stock-info.low{color:var(--accent)}
.product-stock-info.out{color:var(--red)}
.option-label{font-size:12.5px;font-weight:700;color:var(--gray4);margin-bottom:8px;text-transform:uppercase;letter-spacing:.4px}

/* ===== STAR RATING INPUT (review form) ===== */
.star-rating-input{display:flex;flex-direction:row-reverse;gap:4px;font-size:26px}
.star-rating-input input{display:none}
.star-rating-input label{color:#DDD;cursor:pointer;transition:.15s}
.star-rating-input input:checked ~ label,
.star-rating-input label:hover,
.star-rating-input label:hover ~ label{color:#f5a623}
.btn-submit-review{background:var(--primary);color:#fff;border:none;padding:11px 20px;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;transition:.15s}
.btn-submit-review:hover{background:var(--primary-dark)}
.color-options{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.color-opt{width:30px;height:30px;border-radius:50%;cursor:pointer;border:3px solid transparent;transition:.15s}
.color-opt:hover,.color-opt.active{border-color:var(--primary);transform:scale(1.12)}
.size-options{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px}
.size-opt{padding:7px 14px;border:1.5px solid #ddd;border-radius:var(--radius-sm);font-size:13px;font-weight:600;cursor:pointer;background:var(--white);transition:.15s}
.size-opt:hover{border-color:var(--primary);color:var(--primary)}
.size-opt.active{border-color:var(--primary);background:var(--primary);color:#fff}
.size-opt.oos{color:#ccc;border-color:#eee;text-decoration:line-through;cursor:not-allowed;pointer-events:none;background:var(--white)}
.size-opt.oos:hover{border-color:#eee;color:#ccc}
.product-stock-info.neutral{color:var(--gray3);font-size:13px}
.qty-row{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.qty-row label{font-size:12.5px;font-weight:700;color:var(--gray4);text-transform:uppercase;letter-spacing:.4px}
.qty-ctrl{display:flex;align-items:center;border:1.5px solid #ddd;border-radius:var(--radius-sm);overflow:hidden}
.qty-ctrl button{width:36px;height:36px;border:none;background:var(--white);font-size:18px;color:var(--dark);transition:.15s}
.qty-ctrl button:hover{background:var(--gray)}
.qty-ctrl span{width:40px;text-align:center;font-size:15px;font-weight:700}
.add-to-cart-big{width:100%;padding:14px;background:var(--primary);color:#fff;border:none;border-radius:var(--radius-sm);font-size:15px;font-weight:700;margin-bottom:10px;cursor:pointer;transition:.15s}
.add-to-cart-big:hover{background:var(--primary-dark)}
.wishlist-big{width:100%;padding:12px;background:var(--white);color:var(--primary);border:2px solid var(--primary);border-radius:var(--radius-sm);font-size:14px;font-weight:700;cursor:pointer;transition:.15s}
.wishlist-big:hover{background:var(--primary-light)}
.product-attrs table{width:100%;font-size:13px;border-collapse:collapse;margin-top:8px}
.product-attrs td{padding:7px 0;border-bottom:1px solid #f0f0f0;vertical-align:top}
.product-attrs td:first-child{color:var(--gray3);width:130px;font-size:12px;text-transform:uppercase;letter-spacing:.3px}

/* ===== TABS ===== */
.prod-tabs{display:flex;border-bottom:2px solid #eee;margin-bottom:20px;overflow-x:auto;scrollbar-width:none}
.prod-tabs::-webkit-scrollbar{display:none}
.prod-tab{padding:10px 18px;font-size:13.5px;font-weight:700;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;color:var(--gray3);background:none;border-top:none;border-left:none;border-right:none;white-space:nowrap;transition:.15s}
.prod-tab.active{color:var(--primary);border-bottom-color:var(--primary)}
.tab-content{display:none;font-size:14px;line-height:1.8;color:var(--gray4)}
.tab-content.active{display:block}

/* ===== CART ===== */
.cart-layout{display:grid;grid-template-columns:1fr 360px;gap:24px;align-items:flex-start}
.cart-card{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;margin-bottom:16px}
.cart-header{padding:14px 20px;border-bottom:1px solid #f0f0f0;font-size:15px;font-weight:700;display:flex;justify-content:space-between;align-items:center}
.cart-item{display:flex;gap:14px;padding:14px 20px;border-bottom:1px solid #f0f0f0;align-items:center}
.cart-item:last-child{border-bottom:none}
.cart-item-img{width:76px;height:76px;border-radius:var(--radius-sm);background:var(--gray);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:32px;overflow:hidden}
.cart-item-img img{width:100%;height:100%;object-fit:cover}
.cart-item-info{flex:1;min-width:0}
.cart-item-name{font-size:13.5px;font-weight:700;margin-bottom:3px;display:block;color:var(--dark)}
.cart-item-meta{font-size:12px;color:var(--gray3);margin-bottom:6px}
.cart-item-price{font-size:15px;font-weight:800;color:var(--dark)}
.cart-item-controls{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}
.remove-btn{background:none;border:none;color:var(--gray3);font-size:18px;padding:4px;cursor:pointer;transition:.15s;line-height:1}
.remove-btn:hover{color:var(--red)}
.link-btn{background:none;border:none;color:var(--gray3);font-size:13px;cursor:pointer;text-decoration:underline}
.link-btn:hover{color:var(--red)}

.cart-empty{text-align:center;padding:80px 20px;color:var(--gray3)}
.cart-empty .big-icon{font-size:72px;margin-bottom:16px}
.cart-empty h3{font-size:20px;font-weight:700;margin-bottom:8px;color:var(--dark)}
.cart-empty p{margin-bottom:20px}

.order-summary-wrap{position:sticky;top:80px}
.order-summary{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}
.order-summary h3{font-size:16px;font-weight:800;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #eee}
.summary-row{display:flex;justify-content:space-between;font-size:13.5px;padding:7px 0;border-bottom:1px solid #f5f5f5}
.summary-row:last-of-type{border-bottom:none}
.summary-row.total{font-size:18px;font-weight:900;border-bottom:none;padding-top:14px;margin-top:6px;border-top:2px solid #eee}
.promo-wrap{display:flex;gap:8px;margin:16px 0}
.promo-wrap input{flex:1;padding:9px 12px;border:1.5px solid #ddd;border-radius:var(--radius-sm);font-size:13px;outline:none}
.promo-wrap input:focus{border-color:var(--primary)}
.promo-wrap button{padding:9px 14px;background:var(--gray);border:1.5px solid #eee;border-radius:var(--radius-sm);font-size:13px;font-weight:600;cursor:pointer;transition:.15s}
.promo-wrap button:hover{border-color:var(--primary);color:var(--primary)}
.delivery-options{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.delivery-opt{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1.5px solid #eee;border-radius:var(--radius-sm);cursor:pointer;font-size:13px;transition:.15s}
.delivery-opt input{accent-color:var(--primary)}
.delivery-opt.selected{border-color:var(--primary);background:var(--primary-light)}
.delivery-block{animation:fadeIn .15s ease}
.suggest-list{position:absolute;top:100%;left:0;right:0;background:#fff;border:1.5px solid #EDEDED;border-radius:var(--radius-sm);box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:200;max-height:220px;overflow-y:auto;margin-top:2px}
.suggest-item{padding:10px 14px;font-size:13.5px;cursor:pointer;border-bottom:1px solid #F5F5F7;transition:.1s}
.suggest-item:hover{background:var(--primary-light);color:var(--primary)}
.suggest-item:last-child{border-bottom:none}
.suggest-item.suggest-empty{color:#999;cursor:default}
.suggest-item.suggest-empty:hover{background:none;color:#999}
.form-group{position:relative}
.checkout-btn{width:100%;padding:14px;background:var(--primary);color:#fff;border:none;border-radius:var(--radius-sm);font-size:15px;font-weight:800;cursor:pointer;transition:.15s;margin-top:16px;letter-spacing:.3px}
.checkout-btn:hover{background:var(--primary-dark)}
.secure-note{text-align:center;font-size:11.5px;color:var(--gray3);margin-top:10px}

/* ===== FORM FIELDS ===== */
.field-label{font-size:12.5px;font-weight:700;color:var(--gray4);margin-bottom:6px;text-transform:uppercase;letter-spacing:.4px}
.form-group{margin-bottom:12px}
.form-group label{font-size:12.5px;font-weight:600;color:var(--gray4);display:block;margin-bottom:5px}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:10px 13px;border:1.5px solid #ddd;border-radius:var(--radius-sm);font-size:13.5px;outline:none;transition:.15s;background:var(--white)}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--primary)}

/* ===== ACCOUNT ===== */
.account-card{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);padding:32px;max-width:460px;margin:auto}
.account-card h2{font-size:20px;font-weight:800;margin-bottom:22px;text-align:center}
.form-divider{text-align:center;color:var(--gray3);font-size:12px;margin:14px 0;position:relative}
.form-divider::before,.form-divider::after{content:'';position:absolute;top:50%;width:40%;height:1px;background:#eee}
.form-divider::before{left:0}
.form-divider::after{right:0}
.error-msg{color:var(--red);font-size:13px;text-align:center;margin-top:8px;padding:8px;background:#FEF2F2;border-radius:var(--radius-sm)}

/* ===== WISHLIST ===== */
.wishlist-empty{text-align:center;padding:80px 20px;color:var(--gray3)}

/* ===== TOAST ===== */
.toast{position:fixed;bottom:20px;right:20px;background:#333;color:#fff;padding:12px 20px;border-radius:var(--radius-sm);font-size:14px;z-index:9999;opacity:0;transition:opacity .3s;pointer-events:none;max-width:320px;box-shadow:var(--shadow-md)}
.toast.show{opacity:1}
.toast.green{background:var(--green)}
.toast.purple{background:var(--primary)}

/* ===== ===================================================
   RESPONSIVE
   ===================================================== ===== */

/* Tablet: 768-1024 */
@media (max-width:1024px) {
  .hero{min-height:220px;padding:32px 28px 0}
  .hero-text h1{font-size:26px}
  .hero-img{font-size:80px}
  .banner-row{grid-template-columns:1fr}
  .cart-layout{grid-template-columns:1fr}
  .order-summary-wrap{position:static}
  .products-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
}

/* Mobile: ≤768 */
@media (max-width:768px) {
  /* ── iOS Safari: будь-яке поле вводу з font-size менше 16px змушує
     Safari АВТОМАТИЧНО зумити всю сторінку при фокусі (це поведінка
     самого браузера, не сайту) — екран "стрибає" щоразу, коли покупець
     торкається поля пошуку, промокоду, адреси доставки, форми
     реєстрації тощо. На ПК/десктопі це правило не діє (лише в цьому
     мобільному медіа-запиті), тому компактний вигляд полів на десктопі
     не змінюється — 16px лише там, де інакше зумило б.
     !important — навмисно: у файлі є десятки конкретніших правил
     (.search-wrap input, .form-group input, .pgn-jump-input тощо) з
     власним дрібнішим font-size, і за звичайною специфічністю CSS вони
     переважили б цей загальний селектор навіть усередині медіа-запиту. */
  input,select,textarea{font-size:16px!important}

  /* Header */

  .header-inner{flex-wrap:wrap;gap:6px;padding:10px 10px}
  .logo{font-size:16px}
  .mobile-menu-btn{display:flex;align-items:center;justify-content:center}
  .mobile-search-btn{display:flex!important}
  /* Рядок пошуку ховаємо за замовчуванням — розгортається кнопкою-лупою
     в шапці (поруч із перемикачем мови), а не займає окремий рядок
     завжди, як було раніше. */
  .search-wrap{order:4;width:100%;max-width:100%;flex:0 0 100%;display:none;margin-top:8px}
  .search-wrap.mobile-open{display:flex}
  .header-icons .icon-btn span:not(.cart-badge){display:none}
  /* Профіль і Вибране прибрані з рядка шапки на мобільній — забагато
     іконок не влазило поруч із логотипом (рядок "з'їжджав"/обрізався).
     Обидва пункти тепер у шторці-меню (гамбургер). */
  .header-icon-desktop-only{display:none}
  .icon-btn{padding:6px 6px}
  .icon-btn svg{width:24px;height:24px}
  .cart-badge{width:16px;height:16px;font-size:9px;top:0;right:2px}

  /* Nav — горизонтальну стрічку категорій ховаємо, замінена гамбургер-шторкою */
  .nav-cats{display:none}
  .subcat-strip{display:none}

  /* ══ Мобільна шторка-меню ══ */
  .mobile-drawer-overlay{
    display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:300;
  }
  .mobile-drawer-overlay.open{display:block}
  .mobile-drawer{
    position:fixed;top:0;left:0;bottom:0;width:82%;max-width:340px;background:var(--white);
    z-index:301;transform:translateX(-100%);transition:transform .25s ease;
    display:flex;flex-direction:column;box-shadow:var(--shadow-md);
  }
  .mobile-drawer.open{transform:translateX(0)}
  .mobile-drawer-header{
    display:flex;align-items:center;justify-content:space-between;padding:16px;
    border-bottom:1px solid var(--gray2);flex-shrink:0;
  }
  .mobile-drawer-title{font-size:17px;font-weight:800;color:var(--primary)}
  .mobile-drawer-close{border:none;background:var(--gray);width:32px;height:32px;border-radius:50%;font-size:16px;color:var(--gray4);cursor:pointer}
  .mobile-drawer-body{overflow-y:auto;flex:1;padding:8px 0 24px}

  .mobile-drawer-flat{
    display:flex;align-items:center;gap:12px;padding:13px 16px;font-size:15px;font-weight:600;
    color:var(--dark);text-decoration:none;
  }
  .mobile-drawer-flat-icon{width:26px;height:26px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;line-height:1}
  .mobile-drawer-flat-icon img{width:26px;height:26px;object-fit:contain}
  .mobile-drawer-badge{
    position:absolute;right:16px;top:50%;transform:translateY(-50%);
    background:var(--primary);color:#fff;font-size:11px;font-weight:700;
    min-width:18px;height:18px;border-radius:99px;display:none;align-items:center;justify-content:center;padding:0 5px;
  }
  .mobile-drawer-badge.show{display:flex}

  /* Весь рядок категорії — це кнопка (якщо є підкатегорії, клік розгортає
     список, НЕ переходить одразу в категорію) або посилання (якщо
     підкатегорій нема, тоді клік одразу веде в категорію). */
  .mobile-drawer-cat-row{
    display:flex;align-items:center;width:100%;border:none;background:none;
    padding:0 16px;font:inherit;text-decoration:none;color:var(--dark);cursor:pointer;text-align:left;
  }
  .mobile-drawer-cat-link{
    flex:1;display:flex;align-items:center;gap:12px;padding:13px 0;font-size:15px;font-weight:600;min-width:0;
  }
  .mobile-drawer-chevron{
    color:var(--gray3);flex-shrink:0;padding:13px 0 13px 8px;
    display:flex;align-items:center;justify-content:center;transition:transform .2s;
  }
  .mobile-drawer-chevron svg{width:18px;height:18px}
  .mobile-drawer-cat.open .mobile-drawer-chevron{transform:rotate(180deg);color:var(--primary)}
  .mobile-drawer-subs{display:none;flex-direction:column;padding:2px 16px 8px 52px;gap:2px}
  .mobile-drawer-cat.open .mobile-drawer-subs{display:flex}
  .mobile-drawer-subs a{padding:8px 0;font-size:13.5px;font-weight:500;color:var(--gray4);text-decoration:none}
  .mobile-drawer-subs a:hover{color:var(--primary)}
  /* "Всі товари категорії" — виділяємо жирнішим і темнішим, щоб було
     видно, що це окрема "показати все", а не ще одна підкатегорія. */
  .mobile-drawer-subs-all{font-weight:700 !important;color:var(--dark) !important;border-bottom:1px solid var(--gray2);margin-bottom:2px;padding-bottom:10px !important}

  .mobile-drawer-hours{
    display:flex;align-items:center;gap:12px;padding:14px 16px;margin-top:8px;
    border-top:1px solid var(--gray2);color:var(--gray4);font-size:13px;font-weight:600;
  }
  .mobile-drawer-hours svg{width:20px;height:20px;flex-shrink:0;color:var(--primary)}

  .mobile-drawer-info-links{display:flex;flex-direction:column;border-top:1px solid var(--gray2);padding-top:4px}
  .mobile-drawer-info-links a{padding:11px 16px;font-size:13.5px;font-weight:600;color:var(--gray4);text-decoration:none}
  .mobile-drawer-info-links a:hover{color:var(--primary)}

  /* Nav */
  .nav-cat{flex-direction:column;align-items:center;gap:4px;padding:8px 10px;font-size:11px}
  .nav-cat-icon{width:34px;height:34px;font-size:19px}
  .nav-cat-icon-img{width:34px;height:34px;object-fit:contain}

  /* Page */
  .page-wrap{padding:16px 12px}

  .mobile-catalog-btn{
    display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
    background:var(--green);color:#fff;font-size:15px;font-weight:700;font-family:inherit;
    padding:14px;border:none;border-radius:var(--radius-sm);margin-bottom:20px;text-decoration:none;cursor:pointer;
  }
  .mobile-catalog-btn svg{width:20px;height:20px}
  .mobile-catalog-btn:active{background:#128a3e}

  /* ══ Банери категорій на головній ══
     Повне зображення (як постер), написи поверх нього абсолютно
     позиціоновані у % — саме ці % редагуються перетягуванням мишкою в
     адмінці (Мобільна версія → Банери на категорії), тому в CSS фіксованих
     координат нема — вони приходять інлайном з PHP для кожного напису. */
  .mobile-cat-banners{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}
  .mobile-cat-banner{
    display:block;position:relative;border-radius:var(--radius);overflow:hidden;
    background:var(--gray);text-decoration:none;box-shadow:var(--shadow);
    aspect-ratio:4/3;
  }
  .mobile-cat-banner img{width:100%;height:100%;object-fit:cover;display:block}
  .mobile-cat-banner-text{
    position:absolute;line-height:1.25;text-shadow:0 1px 3px rgba(0,0,0,.15);
    max-width:90%;white-space:pre-line;
  }
  .page-title{font-size:18px}

  /* Hero */
  .hero{min-height:180px;padding:24px 20px 0;border-radius:var(--radius-sm)}
  .hero-carousel{aspect-ratio:1/1;border-radius:var(--radius-sm)}
  .hero-carousel .hero-slide{padding:24px 20px}
  .hero-text h1{font-size:21px}
  .hero-text p{font-size:13px}
  .hero-img{font-size:60px}

  /* Shop layout */
  /* align-items:flex-start (з десктопної версії, де .shop-layout —
     ГОРИЗОНТАЛЬНИЙ flex-ряд і flex-start керує ВЕРТИКАЛЬНИМ
     вирівнюванням сайдбара й контенту) тут ЗАЛИШАВСЯ активним і після
     зміни на flex-direction:column — а в колонковому flex саме
     align-items керує ШИРИНОЮ дочірніх елементів. flex-start там
     означає "не розтягувати, а стискати під власний вміст" — тому
     .shop-main (з сіткою товарів) не тримався у фіксованій ширині
     батька, а рахував свою ширину з умісту гріда, і ця розрахована
     ширина "гуляла" (то ширша, то вужча) залежно від того, скільки
     карток товару вже довантажено — саме це виглядало як сторінка,
     що "розпирає" вбік дедалі більше з кожним "Показати ще", а потім
     ніби саме собою вирівнювалась. stretch тут — головний фікс:
     примушує .shop-main завжди займати рівно 100% доступної ширини,
     незалежно від кількості/вмісту карток. */
  .shop-layout{flex-direction:column;align-items:stretch;gap:16px}
  .shop-main{width:100%}
  /* ── Шторка фільтрів на мобільній: виїжджає з ЛІВОГО краю, не на всю
     ширину екрана (зупиняється, лишаючи видиме затемнення справа — так
     видно, що це шторка поверх сторінки, а не окрема сторінка) ── */
  .sidebar.sticky-sidebar{
    position:fixed; top:0; left:0; bottom:0; right:auto;
    width:min(88vw, 380px); max-width:88vw; height:100%; max-height:100vh;
    display:flex; flex-direction:column;
    border-radius:0; box-shadow:10px 0 34px rgba(20,16,50,.18);
    padding:16px 16px 0; margin:0; z-index:1001;
    transform:translateX(-100%); transition:transform .3s cubic-bezier(.32,.72,0,1);
  }
  .sidebar.sticky-sidebar.open{transform:translateX(0)}
  .sidebar-backdrop{
    display:block; position:fixed; inset:0; background:rgba(20,16,40,.45);
    opacity:0; pointer-events:none; transition:opacity .3s ease; z-index:1000;
  }
  .sidebar-backdrop.open{opacity:1; pointer-events:auto}
  .sidebar-close-btn{
    display:flex; align-items:center; justify-content:center; width:30px; height:30px;
    border:none; background:#F5F4FA; border-radius:50%; color:#6B6690; cursor:pointer; flex-shrink:0;
  }
  .sidebar-close-btn svg{width:16px;height:16px}
  .sidebar-close-btn:active{background:#EAE8F4}
  .sidebar-mobile-footer{
    display:block; flex-shrink:0; padding:12px 0 16px; margin-top:auto;
    border-top:1px solid #F0EFF7; background:#fff;
  }
  .sidebar-show-results-btn{
    width:100%; padding:14px; border:none; border-radius:var(--radius-sm);
    background:var(--primary); color:#fff; font-size:14.5px; font-weight:700; cursor:pointer;
    transition:background .15s;
  }
  .sidebar-show-results-btn:active{background:var(--primary-dark, #5B4FCF)}
  .mobile-subcat-chips{
    display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;margin-bottom:16px;
    -ms-overflow-style:none;scrollbar-width:none;
  }
  .mobile-subcat-chips::-webkit-scrollbar{display:none}
  .mobile-subcat-chip{
    flex-shrink:0;padding:9px 17px;border-radius:99px;border:1.5px solid var(--gray2);
    background:var(--white);color:var(--dark);font-size:13px;font-weight:600;white-space:nowrap;
    text-decoration:none;transition:background .15s,border-color .15s,color .15s,transform .1s;
  }
  .mobile-subcat-chip:active{transform:scale(.96)}
  .mobile-subcat-chip.active{background:var(--dark);border-color:var(--dark);color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.15)}

  /* Тулбар "Фільтри та категорії / За популярністю" — дві однакові пігулки
     в ряд, H2 з назвою категорії ховаємо (вже є в breadcrumb і чипах вище). */
  .shop-toolbar{flex-wrap:nowrap;gap:10px}
  .shop-toolbar > div:first-child{display:none}
  .shop-toolbar #sortForm{flex:1;min-width:0}
  .filter-toggle-btn{
    display:flex;align-items:center;justify-content:center;gap:7px;flex:1;min-width:0;width:auto;
    margin-bottom:0;background:var(--white);border:1.5px solid #eee;border-radius:var(--radius-sm);
    padding:11px 10px;font-size:13.5px;transition:border-color .15s,background .15s;
  }
  .filter-toggle-btn:active{background:var(--gray)}
  .filter-toggle-btn svg{width:18px;height:18px;flex-shrink:0}
  .sort-select-wrap{
    display:flex;align-items:center;gap:7px;width:100%;padding:11px 10px;
    background:var(--white);border:1.5px solid #eee;border-radius:var(--radius-sm);transition:border-color .15s;
  }
  .sort-select-wrap svg{display:block;width:18px;height:18px;flex-shrink:0;color:var(--dark)}
  .sort-select{border:none;padding:0;flex:1;min-width:0;font-size:13.5px;font-weight:600}

  /* Products */
  .products-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .product-thumb{height:160px}
  .product-thumb .emoji-fallback{font-size:56px}
  .product-info{padding:10px}
  .product-name{font-size:12.5px}
  .product-price{font-size:14px}
  .add-cart-btn{padding:8px;font-size:12px}

  /* Головна: "Новинки" — один рядок з горизонтальним скролом замість
     сітки 2×N (решта секцій нижче на мобільній сховані — mobile-hide-section). */
  .mobile-hide-section{display:none}
  .products-grid.mobile-scroll-row{
    display:flex;grid-template-columns:none;overflow-x:auto;gap:12px;
    padding-bottom:4px;-ms-overflow-style:none;scrollbar-width:none;
  }
  .products-grid.mobile-scroll-row::-webkit-scrollbar{display:none}
  .products-grid.mobile-scroll-row > *{flex:0 0 46%;min-width:150px}

  /* Product page */
  .product-page-layout{grid-template-columns:1fr;gap:20px;padding:16px}
  .product-gallery .main-img{height:360px}
  .product-page-info h1{font-size:19px}
  .product-page-price{font-size:24px}

  /* Cart */
  .cart-layout{grid-template-columns:1fr;gap:16px}
  .cart-item{gap:10px;padding:12px 14px}
  .cart-item-img{width:60px;height:60px;font-size:26px}
  .cart-item-name{font-size:12.5px}
  .order-summary{padding:16px}

  /* Banner */
  .banner-row{gap:12px}
  .banner-block{padding:20px;border-radius:var(--radius-sm)}
  .banner-block h3{font-size:15px}
  .banner-icon{font-size:44px}

  /* Tabs */
  .prod-tab{padding:8px 12px;font-size:12.5px}
}

/* Small mobile: ≤380 */
@media (max-width:380px) {
  .products-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .product-thumb{height:140px}
  .hero-img{display:none}
}

/* ===== FOOTER ===== */
.site-footer{background:#1A1A2E;color:#ccc;margin-top:48px;padding:40px 0 24px}
.footer-inner{max-width:var(--max-width);margin:0 auto;padding:0 20px}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:32px;margin-bottom:32px}
.footer-col-title{font-size:13px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px}
.footer-link{display:block;color:#aaa;font-size:13px;text-decoration:none;margin-bottom:8px;transition:.15s}
.footer-link:hover{color:#fff}
.footer-bottom{border-top:1px solid #2A2A4A;padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:12px;color:#888}

/* ===== LANG SWITCHER ===== */
.lang-switcher{display:flex;align-items:center;gap:4px}
.lang-btn{font-size:12px;font-weight:700;padding:3px 8px;border-radius:6px;text-decoration:none;color:#ccc;transition:.15s}
.lang-btn:hover{color:#fff;background:rgba(255,255,255,.1)}
.lang-btn.active{color:#fff;background:var(--primary)}

/* ===== Out-of-stock cards — grey, dimmed, no hover effect ===== */
.oos-card {
    opacity: 0.55;
    filter: grayscale(40%);
    cursor: default;
}
.oos-card:hover {
    transform: none !important;
    box-shadow: var(--shadow) !important;
}
.oos-card .add-cart-btn {
    background: #C4C4C4 !important;
    color: #fff !important;
    cursor: not-allowed !important;
}
.oos-badge {
    background: #9CA3AF !important;
    color: #fff !important;
    font-size: 10px !important;
}
.oos-card .wish-btn { display: none; }

/* ════════════════════════════════════════════════════
   PAGINATION — Load More (ASOS/H&M style)
   ════════════════════════════════════════════════════ */
.pgn-bar {
  margin: 48px 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* ── Progress bar ─────────────────────────────────── */
.pgn-progress-wrap {
  width: 100%;
  max-width: 400px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.pgn-progress-line {
  flex: 1;
  height: 4px;
  background: #EBEBEB;
  border-radius: 99px;
  overflow: hidden;
}
.pgn-progress-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 99px;
  transition: width .5s ease;
}
.pgn-progress-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray3);
  white-space: nowrap;
  min-width: 52px;
  text-align: right;
}

/* ── Load More button ─────────────────────────────── */
.pgn-load-more {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 240px;
  padding: 14px 32px;
  background: #fff;
  border: 2px solid #222;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: #222;
  cursor: pointer;
  letter-spacing: .3px;
  transition: background .18s, color .18s, border-color .18s, transform .12s;
  overflow: hidden;
}
.pgn-load-more:hover {
  background: #222;
  color: #fff;
}
.pgn-load-more:active { transform: scale(.97); }

.pgn-btn-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  padding: 0 6px;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  border-radius: 999px;
  margin-left: 6px;
  transition: background .18s;
}
.pgn-load-more:hover .pgn-btn-count {
  background: var(--primary-dark, #5a6fd6);
}

/* Loading state */
.pgn-load-more.pgn-loading {
  pointer-events: none;
  opacity: .7;
}
.pgn-btn-spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(0,0,0,.15);
  border-top-color: #222;
  border-radius: 50%;
  animation: pgnSpin .7s linear infinite;
  flex-shrink: 0;
}
.pgn-load-more.pgn-loading .pgn-btn-spinner { display: block; }
.pgn-load-more.pgn-loading:hover .pgn-btn-spinner { border-top-color: #fff; }
@keyframes pgnSpin { to { transform: rotate(360deg); } }

/* ── Classic page nav (SEO fallback, hidden below button) */
.pgn-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12.5px;
  color: var(--gray3);
}
.pgn-link {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
  transition: opacity .15s;
}
.pgn-link:hover { opacity: .75; }
.pgn-page-info { color: var(--gray3); }

/* ── All loaded ───────────────────────────────────── */
.pgn-all-loaded {
  font-size: 13px;
  color: var(--gray3);
  font-weight: 500;
  text-align: center;
  margin: 0;
  padding: 8px 0;
}

/* ── Empty state ──────────────────────────────────── */
.shop-empty {
  text-align: center;
  padding: 60px 20px;
  color: #999;
}
.shop-empty-icon { font-size: 64px; margin-bottom: 12px; }
.shop-empty h3 { font-size: 18px; margin-bottom: 8px; color: #555; font-weight: 700; }

/* ── Mobile ───────────────────────────────────────── */
@media (max-width: 600px) {
  .pgn-load-more { min-width: 200px; padding: 13px 24px; font-size: 13px; }
  .pgn-progress-wrap { max-width: 100%; }
}

/* ════════════════════════════════════════════════════
   NUMBERED PAGINATION (Rozetka / Prom.ua style)
   ════════════════════════════════════════════════════ */
.pgn-wrap {
  display: flex;
  flex-direction: column;
  /* stretch, не center: у flex-direction:column саме align-items керує
     ШИРИНОЮ дочірнього елемента. center/flex-start означали б "стискай
     під власний вміст" — а вміст (.pgn-controls, ряд номерів сторінок)
     міняється щоразу після AJAX-підвантаження (інший набір видимих
     номерів/крапок "..." залежно від того, яка сторінка активна), тож
     "бажана" ширина без stretch то зростала, то зменшувалась — і саме
     це "розпирало" сторінку вбік дедалі більше з кожним "Показати ще"
     (той самий механізм, що й у .shop-layout вище). stretch фіксує
     ширину рівно по батьківському контейнеру завжди. */
  align-items: stretch;
  gap: 16px;
  margin: 48px 0 32px;
}

/* Цифри пагінації і форма "Перейти на сторінку" — разом в одному ряду,
   а не окремими рядками одне під одним (лишень переносяться, якщо
   реально не влазять по ширині). */
.pgn-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

/* ── Counter "Показано 36 із 127" ─────────────────── */
.pgn-counter {
  font-size: 13px;
  color: var(--gray3);
  font-weight: 500;
  /* .pgn-wrap тепер stretch (не center) — .pgn-counter став на всю
     ширину контейнера, тож текст усередині треба центрувати явно. */
  text-align: center;
}

/* ── Row of page buttons ──────────────────────────── */
.pgn-nums {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
}

/* Base button */
.pgn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 8px;
  border: 1.5px solid #E0E0E0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  text-decoration: none;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
  user-select: none;
  line-height: 1;
}
a.pgn-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: #F5F4FF;
}

/* Current page */
.pgn-current {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
  cursor: default;
  pointer-events: none;
}

/* Disabled (first page at 1, last page at last) */
.pgn-disabled {
  color: #D0D0D0 !important;
  border-color: #EFEFEF !important;
  cursor: not-allowed;
  pointer-events: none;
}

/* Arrow buttons (‹ › « ») — slightly wider */
.pgn-first,
.pgn-last  { font-size: 16px; min-width: 38px; }
.pgn-prev,
.pgn-next  { font-size: 18px; min-width: 38px; }

/* Loading state (AJAX) */
.pgn-btn.pgn-loading {
  opacity: .5;
  pointer-events: none;
}

/* Ellipsis */
.pgn-dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 40px;
  font-size: 16px;
  color: #BDBDBD;
  font-weight: 700;
  letter-spacing: 2px;
  cursor: default;
}

/* ── Jump to page ─────────────────────────────────── */
.pgn-jump {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}
.pgn-jump-label {
  font-size: 12.5px;
  color: var(--gray3);
  white-space: nowrap;
}
.pgn-jump-input {
  width: 54px;
  height: 36px;
  padding: 0 8px;
  border: 1.5px solid #E0E0E0;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  color: #333;
  outline: none;
  transition: border-color .15s;
}
.pgn-jump-input:focus { border-color: var(--primary); }
/* Hide arrows in number inputs */
.pgn-jump-input::-webkit-inner-spin-button,
.pgn-jump-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.pgn-jump-input[type=number] { -moz-appearance: textfield; }

.pgn-jump-btn {
  height: 36px;
  padding: 0 14px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}
.pgn-jump-btn:hover { background: #5a6fd6; }

/* ── Mobile ───────────────────────────────────────── */
@media (max-width: 540px) {
  .pgn-btn   { min-width: 36px; height: 36px; font-size: 13px; }
  /* Раніше «/» і "перейти на сторінку" повністю ховались на мобільній —
     разом із тим, що рядок цифр скролився БЕЗ видимого скролбару, це
     виглядало як "номери сторінок кудись зникли справа" (fix63, скарга
     власника). Тепер лишаємо все на місці: перша/остання сторінка і
     перехід на довільну — так само доступні, як на ПК. ── */
  .pgn-jump-label { display: none; } /* лишаємо тільки інпут+кнопку, щоб не розпирало рядок */
  /* width трохи більша, ніж на ПК (54px) не зменшуємо — font-size тут
     примусово 16px (див. правило anti-zoom вище в цьому ж медіа-запиті),
     тож поле має лишатись достатньо широким для 3 цифр номера сторінки. */
  .pgn-jump-input { width: 50px; height: 34px; padding: 0 6px; }
  .pgn-jump-btn   { height: 34px; padding: 0 12px; font-size: 13px; }
  /* Рядок цифр — один рядок з горизонтальним скролом, але тепер із
     ТОНКИМ ВИДИМИМ скролбаром і затемненням країв, щоб було видно, що
     можна прогорнути далі, а не просто "обрізано". ── */
  .pgn-nums  {
    gap: 4px; flex-wrap: nowrap; overflow-x: auto; max-width: 100%;
    justify-content: flex-start; padding: 0 2px 8px;
    scrollbar-width: thin; scrollbar-color: #D8D6F5 transparent;
  }
  /* Затемнення правого краю — тільки коли рядок ДІЙСНО не влазить
     (клас pgn-scrollable ставить app.js), інакше остання кнопка
     виглядала б "приглушеною" навіть коли гортати вже нікуди. */
  .pgn-nums.pgn-scrollable {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent 100%);
  }
  .pgn-nums::-webkit-scrollbar { display: block; height: 4px; }
  .pgn-nums::-webkit-scrollbar-thumb { background: #D8D6F5; border-radius: 99px; }
  .pgn-nums::-webkit-scrollbar-track { background: transparent; }
  .pgn-btn { flex-shrink: 0; }
}
@media (max-width: 380px) {
  .pgn-btn   { min-width: 32px; height: 32px; font-size: 12px; padding: 0 5px; }
  .pgn-jump-input { width: 46px; padding: 0 4px; }
}

/* ════════════════════════════════════════════════════
   FOOTER — SOCIAL BUTTONS
   ════════════════════════════════════════════════════ */
.site-footer {
  background: #1A1B23;
  color: #E2E4EA;
  margin-top: 60px;
  padding: 48px 0 0;
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 40px;
}
.footer-col { display: flex; flex-direction: column; gap: 10px; }
.footer-heading {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: #9CA3AF;
  margin-bottom: 6px;
}
.footer-link {
  color: #CBD5E1;
  text-decoration: none;
  font-size: 14.5px;
  transition: color .15s;
}
.footer-link:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid #2D2F3B;
  padding: 16px 24px;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #6B7280;
  flex-wrap: wrap;
  gap: 8px;
}

/* Social buttons — горизонтальний ряд круглих іконок без підписів
   (Адмінка → Налаштування → Соцмережі: можна завантажити свою картинку
   іконки замість вбудованого SVG — .social-icon-img). */
.footer-socials { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; }
.footer-socials-horizontal { margin-bottom: 4px; }
.social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #272832;
  border: 1px solid #32354A;
  text-decoration: none;
  color: #E2E4EA;
  transition: background .15s, transform .1s, border-color .15s;
  flex-shrink: 0;
}
.social-btn:hover {
  background: #2E3045;
  border-color: #4B4E6A;
  transform: translateY(-2px);
}
.social-icon {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--brand, #555);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* Instagram uses gradient fill */
.social-btn[title="Instagram"] .social-icon {
  background: linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
}
.social-icon svg {
  width: 18px;
  height: 18px;
  color: #fff;
}
.social-icon-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
/* Власні завантажені іконки (Налаштування → Соцмережі) — БЕЗ кола/фону
   навколо: власник завантажує вже готові прозорі PNG, а подвійне коло
   (наше + вже кругла іконка на картинці) виглядає як зайва рамка. */
.social-btn.social-btn--custom {
  width: 44px;
  height: 44px;
  background: none;
  border: none;
}
.social-btn.social-btn--custom:hover {
  background: none;
  border: none;
  opacity: .8;
}
.social-btn.social-btn--custom .social-icon-img {
  border-radius: 0;
  object-fit: contain;
}
.footer-email {
  margin-top: 6px;
  display: block;
}

/* ════════════════════════════════════════════════════
   LANGUAGE SWITCHER — icon-btn у ряду профіль/обране/кошик
   (видимий і на десктопі, і на мобільній — так само, як інші іконки)
   ════════════════════════════════════════════════════ */
.lang-switcher-compact svg { width: 22px; height: 22px; }
.lang-switcher-compact.open,
.lang-switcher-compact:hover { background: var(--gray); color: var(--primary); }
.lang-drop {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #fff;
  border: 1.5px solid #E8E8E8;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.16);
  z-index: 500;
  min-width: 90px;
  overflow: hidden;
}
.lang-drop.open { display: block; }
.lang-drop a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 11px 14px;
  font-size: 13.5px;
  font-weight: 500;
  color: #222;
  text-decoration: none;
  transition: background .12s;
}
.lang-drop a:hover { background: #F5F5F7; }
.lang-drop a.active { font-weight: 700; color: var(--primary); background: #F0EEFF; }

@media (max-width:768px) {
  .lang-drop { right: -6px; min-width: 84px; }
}

/* ════════════════════════════════════════════════════
   LANG SUGGEST — ненав'язлива пропозиція перейти на UA
   (замінює старий на весь екран попап "оберіть мову")
   ════════════════════════════════════════════════════ */
.lang-suggest {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  max-width: 380px;
  animation: langSuggestIn .4s cubic-bezier(.2,.8,.2,1);
}
.lang-suggest.lang-suggest-hide { animation: langSuggestOut .3s ease forwards; }
@keyframes langSuggestIn {
  from { opacity: 0; transform: translateY(24px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes langSuggestOut {
  to { opacity: 0; transform: translateY(16px) scale(.96); }
}
.lang-suggest-inner {
  position: relative;
  background: #fff;
  border-radius: 18px;
  padding: 18px 20px 18px 18px;
  box-shadow: 0 12px 40px rgba(20,20,40,.18), 0 2px 8px rgba(20,20,40,.08);
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid #F0F0F3;
}
.lang-suggest-flag { font-size: 30px; line-height: 1; }
.lang-suggest-text { display: flex; flex-direction: column; gap: 4px; padding-right: 18px; }
.lang-suggest-text strong { font-size: 14.5px; color: #16161D; }
.lang-suggest-text span { font-size: 12.5px; color: #8A8A97; line-height: 1.5; }
.lang-suggest-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.lang-suggest-btn {
  flex: 1;
  text-align: center;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: transform .12s, opacity .12s;
  white-space: nowrap;
}
.lang-suggest-btn:hover { transform: translateY(-1px); }
.lang-suggest-btn.primary { background: linear-gradient(135deg,#7C3AED,#6D28D9); color: #fff; }
.lang-suggest-btn.ghost { background: #F5F5F7; color: #6B6B76; }
.lang-suggest-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  color: #C4C4CC;
  font-size: 15px;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
}
.lang-suggest-close:hover { color: #8A8A97; }

@media (max-width: 640px) {
  .lang-suggest { left: 14px; right: 14px; bottom: 14px; max-width: none; }
}

/* ── Cookie-згода (банер + детальні налаштування) ── */
.cookie-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:10000;
  background:#fff;border-top:1.5px solid #EDEDED;box-shadow:0 -4px 24px rgba(0,0,0,.12);
  padding:16px 20px;animation:cookieBannerIn .35s cubic-bezier(.2,.8,.2,1);
}
@keyframes cookieBannerIn{from{transform:translateY(100%)}to{transform:translateY(0)}}
.cookie-banner-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.cookie-banner-text{flex:1 1 380px;font-size:13.5px;line-height:1.5;color:var(--gray4);margin:0}
.cookie-banner-actions{display:flex;gap:10px;flex-wrap:wrap;flex-shrink:0}
.cookie-banner-actions .btn-primary,.cookie-banner-actions .btn-outline{padding:10px 18px;font-size:13px;white-space:nowrap}

.cookie-modal-overlay{
  position:fixed;inset:0;z-index:10001;background:rgba(20,18,30,.5);
  display:flex;align-items:center;justify-content:center;padding:16px;
  animation:cookieFadeIn .2s ease;
}
@keyframes cookieFadeIn{from{opacity:0}to{opacity:1}}
.cookie-modal{
  background:#fff;border-radius:16px;max-width:520px;width:100%;
  max-height:88vh;overflow-y:auto;padding:26px;box-shadow:var(--shadow-md);
}
.cookie-modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.cookie-modal-header h3{margin:0;font-size:18px;color:var(--dark)}
.cookie-modal-close{background:none;border:none;font-size:18px;color:var(--gray4);cursor:pointer;padding:4px;line-height:1}
.cookie-modal-intro{font-size:13.5px;line-height:1.5;color:var(--gray4);margin:8px 0 20px}
.cookie-cat-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:14px 0;border-top:1px solid #F0F0F0}
.cookie-cat-row:first-of-type{border-top:none}
.cookie-cat-row strong{font-size:14px;color:var(--dark)}
.cookie-cat-desc{font-size:12.5px;color:var(--gray4);margin-top:3px;line-height:1.4}
.cookie-always-on{font-size:11.5px;color:#9A97AC;font-weight:600;white-space:nowrap;margin-top:2px}
.cookie-modal-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:20px;flex-wrap:wrap}
.cookie-policy-link{font-size:12.5px;color:var(--primary);text-decoration:underline}
.cookie-modal-footer .btn-primary{white-space:nowrap}

/* Повзунок-перемикач (та сама механіка, що й в адмінці) */
.toggle-switch{position:relative;display:inline-flex;align-items:center;cursor:pointer;flex-shrink:0}
.toggle-switch input{position:absolute;opacity:0;width:0;height:0}
.toggle-switch-track{width:42px;height:24px;background:#D1D5DB;border-radius:999px;position:relative;transition:background .18s ease}
.toggle-switch-thumb{position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .18s ease}
.toggle-switch input:checked + .toggle-switch-track{background:var(--primary)}
.toggle-switch input:checked + .toggle-switch-track .toggle-switch-thumb{transform:translateX(18px)}
.toggle-switch input:focus-visible + .toggle-switch-track{outline:2px solid var(--primary);outline-offset:2px}

.cookie-reopen-btn{
  position:fixed;left:16px;bottom:16px;z-index:9998;
  width:44px;height:44px;border-radius:50%;border:1.5px solid #EDEDED;
  background:#fff;box-shadow:var(--shadow-md);font-size:20px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.15s;
}
.cookie-reopen-btn:hover{transform:scale(1.08)}

@media (max-width: 640px){
  .cookie-banner{padding:14px}
  .cookie-banner-inner{flex-direction:column;align-items:stretch}
  .cookie-banner-actions{flex-direction:column}
  .cookie-banner-actions button{width:100%}
  .cookie-modal{padding:20px;border-radius:14px 14px 0 0;max-height:92vh}
  .cookie-modal-overlay{align-items:flex-end;padding:0}
  .cookie-reopen-btn{left:12px;bottom:12px;width:40px;height:40px;font-size:18px}
}