/* ===========================
   Каталог товарів (/store/): шапка з пошуком, чіпи розділів,
   «Популярне зараз», плитки категорій, компактні дрібні розділи.
   Ширина — .container-wide з header-v2.css
   =========================== */
.ct { --ct-ink: #1f2133; --ct-muted: #8a8ea6; --ct-line: #eceef5; padding-bottom: 36px; }
.ct a { text-decoration: none; }
.ct a:hover { text-decoration: none; }
.ct a:focus-visible, .ct input:focus-visible { outline: 3px solid #667eea; outline-offset: 2px; border-radius: 10px; }
.ct [hidden] { display: none !important; }

/* ---- шапка ---- */
.ct-hero { position: relative; overflow: hidden; color: #fff; background: linear-gradient(120deg, #667eea, #764ba2); }
.ct-hero::after { content: ''; position: absolute; right: -80px; top: -120px; width: 380px; height: 380px; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.ct-hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: end; padding-top: 30px; padding-bottom: 28px; }
.ct-crumbs { margin-bottom: 10px; font-size: 13px; opacity: .85; }
.ct-crumbs a { color: #fff; }
.ct-hero h1 { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: 42px; font-weight: 700; color: #fff; }
.ct-lead { margin: 6px 0 0; font-size: 16px; opacity: .92; }
.ct-find { display: flex; align-items: center; gap: 10px; max-width: 560px; height: 52px; margin: 16px 0 0; padding: 0 16px; border-radius: 14px; background: #fff; box-shadow: 0 10px 24px rgba(20, 10, 60, .2); cursor: text; }
.ct-find i { color: var(--ct-muted); }
.ct-find input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: var(--ct-ink); }
.ct-facts { display: grid; grid-template-columns: repeat(3, 170px); gap: 12px; }
.ct-fact { padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); }
.ct-fact b { display: block; font-size: 24px; font-weight: 900; font-variant-numeric: tabular-nums; color: #fff; }
.ct-fact span { font-size: 13px; opacity: .9; }

/* ---- чіпи розділів ---- */
.ct-chips { background: #fff; border-bottom: 1px solid #e9ebf3; }
.ct-chips-in { display: flex; gap: 8px; padding-top: 12px; padding-bottom: 12px; overflow-x: auto; scrollbar-width: none; }
.ct-chips-in::-webkit-scrollbar { display: none; }
.ct-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; background: #f2f3f8; font-size: 14px; font-weight: 700; color: var(--ct-ink); white-space: nowrap; transition: background .2s ease; }
.ct-chip i { color: #667eea; }
.ct-chip:hover { background: #e8eaff; color: var(--ct-ink); }

/* ---- секції ---- */
.ct-sec { padding-top: 26px; }
.ct-h2 { margin: 0 0 16px; font-family: Georgia, 'Times New Roman', serif; font-size: 28px; color: var(--ct-ink); }

/* популярне */
.ct-hots { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.ct-hot { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden; background: radial-gradient(circle at 50% 35%, #fff 0, #f3f1ff 70%); border: 1px solid var(--ct-line); transition: transform .2s ease, box-shadow .2s ease; }
.ct-hot:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(30, 20, 80, .12); }
.ct-hot img { width: 100%; height: 100%; object-fit: contain; padding: 18px 18px 72px; }
.ct-hot span { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 2px; padding: 14px 16px; color: #fff; background: linear-gradient(180deg, rgba(31, 33, 51, 0), rgba(31, 33, 51, .85)); }
.ct-hot b { font-size: 16px; line-height: 1.25; }
.ct-hot small { font-size: 13px; opacity: .85; }

/* великі розділи */
.ct-secs { display: grid; gap: 30px; padding-top: 30px; }
.ct-cs { display: grid; gap: 14px; scroll-margin-top: 90px; }
.ct-cs-h { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.ct-cs-ic { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; font-size: 22px; color: #fff; background: linear-gradient(135deg, #667eea, #764ba2); }
.ct-cs h2 { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: 26px; color: var(--ct-ink); }
.ct-cs-h small { font-size: 14px; color: var(--ct-muted); }
.ct-cs-all { padding: 9px 14px; border-radius: 12px; background: #eef0ff; font-size: 14px; font-weight: 800; color: #4f5bd5; white-space: nowrap; }
.ct-cs-all:hover { background: #e0e4ff; color: #4f5bd5; }
.ct-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.ct-tl { display: grid; gap: 4px; align-content: start; padding: 10px 10px 12px; border-radius: 18px; background: #fff; border: 1px solid var(--ct-line); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.ct-tl:hover { transform: translateY(-3px); border-color: #c7cdf5; box-shadow: 0 12px 24px rgba(30, 20, 80, .1); }
.ct-tl-im { display: grid; place-items: center; aspect-ratio: 1; margin-bottom: 6px; border-radius: 12px; overflow: hidden; background: #f7f8ff; color: #c7cdf5; font-size: 28px; }
.ct-tl-im img { width: 100%; height: 100%; object-fit: contain; }
.ct-tl b { font-size: 14.5px; line-height: 1.25; color: var(--ct-ink); overflow-wrap: anywhere; }
.ct-tl small { font-size: 12.5px; color: var(--ct-muted); }

/* дрібні розділи */
.ct-sms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ct-sm { display: grid; gap: 10px; align-content: start; padding: 16px; border-radius: 18px; background: #fff; border: 1px solid var(--ct-line); scroll-margin-top: 90px; }
.ct-sm-h { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.ct-sm-h i { font-size: 18px; color: #667eea; }
.ct-sm-h b { color: var(--ct-ink); }
.ct-sm-h small { font-size: 13px; color: var(--ct-muted); }
.ct-sm-l { display: grid; gap: 4px; }
.ct-sm-l a { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 10px; font-size: 14.5px; color: #4b4f66; }
.ct-sm-l a:hover { background: #f7f8ff; color: var(--ct-ink); }
.ct-sm-l img, .ct-sm-noimg { width: 34px; height: 34px; border-radius: 8px; object-fit: contain; background: #f7f8ff; }
.ct-sm-l small { font-size: 12.5px; color: #a3a6bd; }

.ct-nores { margin-top: 24px; padding: 22px; border-radius: 16px; background: #fff; border: 1px solid var(--ct-line); text-align: center; color: #6b6f86; }
.ct-nores a { color: #4f5bd5; font-weight: 800; }

/* ---- адаптив ---- */
@media (max-width: 1399px) {
  .ct-hots { grid-template-columns: repeat(3, 1fr); }
  .ct-hot { aspect-ratio: 5 / 4; }
}
@media (max-width: 991px) {
  .ct-hero-in { grid-template-columns: 1fr; padding-top: 72px; }
  .ct-facts { grid-template-columns: repeat(3, 1fr); }
  .ct-sms { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
  .ct-hero-in { padding-top: 64px; padding-bottom: 20px; gap: 16px; }
  .ct-hero h1 { font-size: 30px; }
  .ct-facts { gap: 8px; }
  .ct-fact { padding: 10px; }
  .ct-fact b { font-size: 17px; }
  .ct-fact span { font-size: 11.5px; }
  .ct-h2 { font-size: 22px; }
  /* «Популярне» гортається вбік */
  .ct-hots { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 42%; overflow-x: auto; scrollbar-width: none; }
  .ct-hots::-webkit-scrollbar { display: none; }
  .ct-hot { aspect-ratio: 4 / 5; }
  .ct-secs { gap: 24px; }
  .ct-cs-ic { width: 40px; height: 40px; font-size: 18px; border-radius: 12px; }
  .ct-cs h2 { font-size: 19px; }
  .ct-cs-h small { font-size: 12.5px; }
  .ct-cs-all { padding: 7px 10px; font-size: 13px; }
  .ct-tiles { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .ct-tl { padding: 6px 6px 8px; border-radius: 14px; }
  .ct-tl b { font-size: 12.5px; }
  .ct-tl small { font-size: 11px; }
  .ct-sms { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .ct-tl, .ct-hot { transition: none; }
  .ct-tl:hover, .ct-hot:hover { transform: none; }
}