/* Каталог — главная витрина. Поверх home.css: те же шрифты и кнопки, своя спокойная гамма (владелец, 15.10:
   «грубые края, цветовая схема»). Вся страница на белом — швов между блоками нет; «Как купить» и подвал —
   листы со скруглённым верхом. Цвета: графит — текст и кнопки, один акцент — малиновый (#C2205A),
   баннеры — светлые оттенки. Зелёного и жёлтого в каталоге нет.
   Блок «Ещё в каталоге» (.ct-more) стоит и на страницах товаров, где home.css нет, — у него свои цвета.
   Без скрипта всё видно: слайды листаются пальцем, карточки стоят все; прячет только то, что ставит скрипт. */

.ct-page {
  --accent: #C2205A;                    /* белый текст на нём — контраст выше 4,5 */
  --line: #ECE6E1;
  --muted: #5E5E66;
  --soft: #F7F3EF;                      /* тёплый светлый лист: «Как купить», подложки */
  --photo: #F4F2F0;                     /* под фото товара — нейтральная, без розового */
  background: var(--paper);
}
.ct-page [hidden] { display: none; }

/* --- шапка с меню ------------------------------------------------------------ */
/* шапка уходит вместе со страницей; при прокрутке вверх выезжает плашка .hbar, как на главной (владелец, 15.10) */
.ct-top { position: relative; z-index: 20; }
.ct-js .hbar { display: block; position: fixed; inset: 0 0 auto 0; z-index: 50; padding: 8px 10px 0; pointer-events: none;
  transform: translateY(-120%); transition: transform .35s var(--ease); }
.ct-js .hbar.is-on { transform: none; }
.ct-top__in { display: flex; align-items: center; gap: 14px; min-height: 60px; }
.ct-top__name { flex: none; display: inline-flex; align-items: center; min-height: 44px; font-weight: 900; letter-spacing: -.02em; text-decoration: none; color: var(--rose); }
.ct-top__nav { display: flex; gap: 4px; min-width: 0; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.ct-top__nav::-webkit-scrollbar { display: none; }
.ct-top__nav a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 999px;
  font-size: .88rem; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background-color .2s var(--ease), color .2s var(--ease); }
.ct-top__nav a:hover { background: var(--ink); color: var(--paper); }
/* «Каталог» выделен: белый на розовом подзаголовка, компактная плашка (владелец, 15.10) */
.ct-top__nav a.is-cat { min-height: 32px; padding: 0 10px; align-self: center; background: #E5356F; color: #fff; }
.ct-top__nav a.is-cat:hover { background: var(--ink); }

/* --- заголовок: компактный, товары ближе к началу ---------------------------- */
.ct-head { padding-top: clamp(12px, 3vh, 36px); padding-bottom: clamp(14px, 2.4vh, 24px); }
.ct-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
.ct-title__main { font-size: clamp(2.5rem, 11vw, 5.2rem); font-weight: 900; letter-spacing: -.04em; line-height: .92; text-transform: uppercase; }
.ct-title__main::after { content: ""; display: inline-block; width: .14em; height: .14em; margin-left: .05em; border-radius: 50%; background: var(--rose); }
.ct-title__sub { font-size: clamp(1rem, 3.6vw, 1.35rem); font-weight: 700; letter-spacing: -.01em; color: var(--muted); }

/* --- сменяющийся баннер ------------------------------------------------------ */
/* телефон: картинка своя (image_mobile, 3:2) и видна целиком, текст — под ней на сплошном цвете баннера.
   Нижние углы только цветные: если картинка доходит до скругления, по краю виден тёмный ободок (владелец, 15.10).
   Компьютер: картинка справа, к тексту уходит в цвет баннера длинной растяжкой. */
.ct-hero { position: relative; }
.ct-hero__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  border-radius: 28px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ct-hero__track::-webkit-scrollbar { display: none; }
.ct-banner, .ct-strip { --tone: #F6E4EA; }                           /* rose — пудрово-розовый */
.ct-banner--pine, .ct-strip--pine { --tone: #E3ECE7; }               /* шалфей */
.ct-banner--sun, .ct-strip--sun { --tone: #F7EBD3; }                 /* песок */
.ct-banner--cream, .ct-strip--cream { --tone: #F3ECE6; }             /* сливки */
.ct-banner { position: relative; flex: 0 0 100%; min-width: 0; scroll-snap-align: start; display: grid; align-content: start;
  overflow: hidden; border-radius: 28px; isolation: isolate; text-decoration: none; color: var(--ink); background: var(--tone); }
.ct-banner__art { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; }
/* низ картинки растворяется в цвете баннера: под текстом шва нет */
.ct-banner__art::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, var(--tone) 0, color-mix(in srgb, var(--tone) 55%, transparent) 14%, transparent 34%); }
/* без image_mobile на телефоне — компьютерная картинка, её главное справа */
.ct-banner__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 78% 50%; transition: transform .8s var(--ease); }
.ct-banner:hover .ct-banner__bg { transform: scale(1.03); }
/* фото товара — карточкой со скруглением, без круга и подложки (правило дизайна: подложка под круглой картинкой — ошибка) */
.ct-banner__product, .ct-strip__product { position: absolute; z-index: 1; overflow: hidden; border-radius: 18px;
  background: var(--paper); box-shadow: 0 16px 40px rgb(60 30 40 / .16); }
.ct-banner__product { right: 14px; top: 14px; width: 28%; max-width: 130px; aspect-ratio: 1; }
.ct-banner__product img, .ct-strip__product img { width: 100%; height: 100%; object-fit: cover; }
.ct-banner__body { position: relative; z-index: 2; display: grid; gap: 8px; justify-items: start; margin-top: -18px; padding: 0 20px 22px; }
.ct-banner__title { max-width: 16em; font-size: clamp(1.45rem, 6.4vw, 3.2rem); font-weight: 900; letter-spacing: -.035em; line-height: 1;
  text-transform: uppercase; overflow-wrap: anywhere; }
.ct-banner__text { max-width: 30em; font-size: .95rem; line-height: 1.4; color: #3A3A40; }
/* пометка БАД у баннера на товар с supplement: true — как у карточки */
.ct-banner__note, .ct-strip__note { display: block; width: fit-content; padding: 5px 8px; border-radius: 10px; background: rgb(255 255 255 / .7);
  color: #5A4300; font-size: .74rem; font-weight: 700; line-height: 1.25; }
.ct-banner__btn, .ct-strip__btn { display: inline-flex; align-items: center; gap: .5em; min-height: 48px; margin-top: 4px; padding: 0 1.3em;
  border-radius: 999px; background: var(--ink); color: var(--paper); font-weight: 800; font-size: .95rem;
  transition: background-color .25s var(--ease), transform .25s var(--ease); }
.ct-banner:hover .ct-banner__btn, .ct-strip:hover .ct-strip__btn { background: var(--accent); }
.ct-banner:hover .ct-banner__btn { transform: translateY(-2px); }
.ct-go { flex: none; width: .7em; height: .7em; }

/* управление слайдером ставит скрипт */
.ct-hero__nav { position: absolute; right: calc(var(--gutter) + 10px); bottom: 10px; z-index: 3; display: flex; align-items: center; gap: 2px; }
.ct-hero__arrow { display: none; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: var(--paper); color: var(--ink); cursor: pointer; box-shadow: 0 4px 14px rgb(23 23 26 / .12); transition: background-color .2s var(--ease), color .2s var(--ease); }
.ct-hero__arrow:hover { background: var(--ink); color: var(--paper); }
.ct-hero__arrow svg { width: 20px; height: 20px; }
.ct-hero__dots { display: flex; }
.ct-hero__dot { display: grid; place-items: center; width: 24px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.ct-hero__dot::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: rgb(23 23 26 / .25);
  transition: width .3s var(--ease), background-color .3s var(--ease); }
.ct-hero__dot[aria-current="true"]::before { width: 22px; background: var(--ink); }

/* --- поиск, разделы, порядок ---------------------------------------------- */
.ct-shop { padding: clamp(20px, 3vh, 32px) 0 clamp(48px, 8vh, 80px); }
.ct-tools { display: grid; gap: 12px; margin-bottom: 18px; }
.ct-search { position: relative; }
.ct-search__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ct-search__icon { position: absolute; left: 18px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.ct-search input { width: 100%; min-height: 52px; padding: 0 56px 0 48px; border: 1.5px solid #DCD5CF; border-radius: 999px;
  background: var(--soft); color: var(--ink); font: 600 1rem/1.2 var(--font); -webkit-appearance: none; appearance: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease); }
.ct-search input::placeholder { color: #6b6b72; font-weight: 500; }
.ct-search input::-webkit-search-cancel-button { display: none; }
.ct-search input:hover { border-color: #BDB4AD; }
.ct-search input:focus { outline: none; background: var(--paper); border-color: var(--ink); box-shadow: 0 0 0 4px rgb(23 23 26 / .08); }
.ct-search__clear { position: absolute; right: 4px; top: 50%; display: grid; place-items: center; width: 44px; height: 44px;
  padding: 0; border: 0; border-radius: 50%; background: var(--ink); color: var(--paper); transform: translateY(-50%) scale(.82); cursor: pointer; }
.ct-search__clear[hidden] { display: none; }
.ct-search__clear svg { width: 16px; height: 16px; }
.ct-search__clear:hover { background: var(--accent); }

/* разделы (появляются со вторым разделом): на телефоне — ряд, который листается вбок до края экрана */
.ct-cats { display: flex; gap: 8px; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter); overflow-x: auto;
  scrollbar-width: none; overscroll-behavior-x: contain; }
.ct-cats::-webkit-scrollbar { display: none; }
.ct-page .chip { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border: 1.5px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink);
  font: 700 .92rem/1 var(--font); white-space: nowrap; cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.ct-page .chip span { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--soft); color: var(--muted); font-size: .76rem; }
.ct-page .chip:hover { border-color: var(--ink); }
.ct-page .chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.ct-page .chip.is-on span { background: rgb(255 255 255 / .18); color: var(--paper); }

.ct-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ct-count { font-size: .9rem; font-weight: 700; color: var(--muted); }
.ct-sort { position: relative; display: inline-flex; align-items: center; }
.ct-sort__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ct-sort select { min-height: 44px; max-width: 100%; padding: 0 36px 0 14px; border: 1.5px solid var(--line); border-radius: 999px;
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%2317171A' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 13px center / 12px;
  color: var(--ink); font: 700 .9rem/1 var(--font); -webkit-appearance: none; appearance: none; cursor: pointer; }
.ct-sort select:hover { border-color: var(--ink); }

/* --- сетка карточек: 2 / 3 / 4 в ряд ---------------------------------------- */
.ct-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 12px; }
.ct-item, .ct-more .ct-item { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  border-radius: 20px; background: var(--paper); border: 1px solid var(--line, #ECE6E1);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); }
.ct-item:hover { transform: translateY(-3px); border-color: transparent; box-shadow: 0 18px 44px rgb(60 30 40 / .10); }
.ct-card { display: flex; flex: 1; flex-direction: column; color: inherit; text-decoration: none; }
/* фото товара заполняет квадрат целиком: у всех карточек одинаковая обложка, без рамок и полей разного цвета */
.ct-card__media { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--photo, #F4F2F0); }
.ct-card__media img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; transition: transform .6s var(--ease); }
.ct-item:hover .ct-card__media img { transform: scale(1.04); }
.ct-card__badge { position: absolute; left: 10px; top: 10px; z-index: 1; padding: 6px 10px; border-radius: 999px;
  background: var(--accent, #C2205A); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .02em; line-height: 1.1; }
.ct-card__body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 12px 12px 14px; }
.ct-card__cat { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted, #5E5E66); }
.ct-card__title { margin: 0; font-size: 1rem; font-weight: 900; letter-spacing: -.02em; line-height: 1.15; overflow-wrap: anywhere; }
.ct-card__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: .84rem; line-height: 1.38; color: #45454c; }
.ct-card__note { padding: 6px 8px; border-radius: 10px; background: #FBF3E2; color: #5A4300; font-size: .74rem; font-weight: 700; line-height: 1.25; }
.ct-card__more { display: inline-flex; align-items: center; gap: .4em; margin-top: auto; padding-top: 6px; font-size: .88rem; font-weight: 800; color: var(--accent, #C2205A); }

/* --- узкий баннер между рядами --------------------------------------------- */
/* на телефоне одна колонка: заголовок во всю ширину (слова не рвутся), кнопка под текстом; с 768 — кнопка сбоку */
.ct-strip { position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr);
  align-items: center; justify-items: start; gap: 14px; min-height: 120px; padding: 20px 18px; overflow: hidden; border-radius: 20px;
  background: var(--tone); color: var(--ink); text-decoration: none; }
.ct-strip__bg { position: absolute; inset: 0 0 0 auto; width: 60%; height: 100%; object-fit: cover; }
.ct-strip::before { content: ""; position: absolute; inset: 0 0 0 auto; z-index: 1; width: 60%;
  background: linear-gradient(90deg, var(--tone) 0, color-mix(in srgb, var(--tone) 60%, transparent) 40%, transparent 85%); pointer-events: none; }
.ct-strip__product { right: 14px; top: 50%; width: 92px; aspect-ratio: 1; transform: translateY(-50%); }
.ct-strip__body { position: relative; z-index: 2; display: grid; gap: 4px; }
.ct-strip__title { font-size: clamp(1.15rem, 5vw, 1.8rem); font-weight: 900; letter-spacing: -.03em; line-height: 1.02; text-transform: uppercase; overflow-wrap: break-word; }
.ct-strip__text { font-size: .9rem; line-height: 1.35; color: #3A3A40; }
.ct-strip__btn { position: relative; z-index: 2; margin-top: 0; }
/* фото товара справа (92 px): текст и кнопка не заходят под него */
.ct-strip:has(.ct-strip__product) { padding-right: 120px; }

/* место узкого баннера: несколько баннеров лежат стопкой и сменяют друг друга (catalog.js); без скрипта — столбиком */
.ct-strips { grid-column: 1 / -1; display: grid; gap: 12px; min-width: 0; }
.ct-js .ct-strips[data-strips]:not([data-strips="1"]) { gap: 0; }
.ct-js .ct-strips:not([data-strips="1"]) > .ct-strip { grid-area: 1 / 1; transition: opacity .7s var(--ease, ease), visibility 0s linear .7s; }
.ct-js .ct-strips:not([data-strips="1"]) > .ct-strip:not(.is-on) { opacity: 0; visibility: hidden; }
.ct-js .ct-strips:not([data-strips="1"]) > .ct-strip.is-on { transition: opacity .7s var(--ease, ease); }
.ct-strips__dots { display: flex; justify-content: center; grid-area: 2 / 1; }
.ct-strips__dot { display: grid; place-items: center; width: 24px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; }
.ct-strips__dot::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: rgb(23 23 26 / .22);
  transition: width .3s var(--ease, ease), background-color .3s; }
.ct-strips__dot[aria-current="true"]::before { width: 20px; background: var(--ink); }

/* --- пусто --------------------------------------------------------------------- */
.ct-empty, .ct-soon { display: grid; gap: 14px; justify-items: start; max-width: 34em; padding: 34px 0; }
.ct-empty[hidden] { display: none; }
.ct-empty__title, .ct-soon__title { font-size: clamp(1.8rem, 7vw, 3rem); }
.ct-soon { padding-block: 24px clamp(64px, 12vh, 120px); }
.ct-empty .btn, .ct-soon .btn { min-height: 52px; border: 0; font: 800 1rem/1 var(--font); cursor: pointer; }
.ct-empty .btn:hover, .ct-soon .btn:hover { background: var(--accent); }

/* --- как купить: тёплый лист со скруглённым верхом, подвал ложится на него таким же листом --- */
.ct-how { background: var(--soft); padding: clamp(48px, 9vh, 96px) 0 calc(clamp(48px, 9vh, 96px) + 36px); border-radius: 36px 36px 0 0; }
.ct-how__in { display: grid; gap: 22px; }
.ct-how h2 { font-size: clamp(2rem, 9vw, 4rem); }
.ct-how h2 span { color: var(--accent); }
.ct-how__list { display: grid; gap: 10px; counter-reset: step; }
.ct-how__list li { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; padding: 18px 20px; border-radius: 22px; background: var(--paper); }
.ct-how__list li::before { counter-increment: step; content: counter(step); grid-row: span 2; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: var(--paper); font-weight: 900; font-size: .95rem; }
.ct-how__list strong { font-size: 1.05rem; font-weight: 900; letter-spacing: -.01em; line-height: 1.2; }
.ct-how__list span { color: #3A3A40; font-size: .96rem; }

.ct-page .ct-foot { position: relative; margin-top: -36px; border-radius: 36px 36px 0 0; }
.ct-foot__nav { display: flex; flex-wrap: wrap; gap: 0 4px; margin: 0 -10px; }
.ct-foot__nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; font-weight: 700; text-decoration: none; color: var(--paper); }
.ct-foot__nav a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --- «Ещё в каталоге» на странице товара: свои цвета, стили страницы товара не трогает --- */
.ct-more { --ink: #17171A; --paper: #FFFFFF; --accent: #C2205A; --line: #ECE6E1; --muted: #5E5E66; --soft: #F7F3EF; --photo: #F4F2F0;
  --ease: cubic-bezier(.2, .7, .2, 1);
  padding: clamp(48px, 9vh, 100px) 0; background: #F7F1EA; color: #17171A;
  font-family: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
.ct-more__in { width: min(100%, 1180px); margin-inline: auto; padding-inline: clamp(20px, 5vw, 64px); display: grid; gap: 22px; }
.ct-more__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 16px; }
.ct-more__title { margin: 0; font-size: clamp(1.9rem, 8vw, 3.4rem); font-weight: 900; letter-spacing: -.035em; line-height: .95; text-transform: uppercase; }
.ct-more__all { display: inline-flex; align-items: center; gap: .5em; min-height: 48px; padding: 0 1.3em; border-radius: 999px;
  background: #17171A; color: #FFFFFF; font-weight: 800; text-decoration: none; transition: background-color .25s var(--ease); }
.ct-more__all:hover { background: #C2205A; }
.ct-more__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ct-more .ct-go { width: .7em; height: .7em; }
.ct-more img { display: block; max-width: 100%; }
.ct-more .ct-card__body { line-height: 1.4; }

@media (min-width: 768px) {
  .ct-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .ct-card__body { padding: 16px 16px 18px; }
  .ct-card__title { font-size: 1.15rem; }
  .ct-card__text { font-size: .9rem; }
  .ct-banner { align-content: center; min-height: 340px; }
  .ct-banner__art { position: absolute; inset: 0 0 0 30%; aspect-ratio: auto; }
  .ct-banner__bg { object-position: 50% 50%; }
  .ct-banner__art::after { background: linear-gradient(90deg, var(--tone) 0, color-mix(in srgb, var(--tone) 75%, transparent) 22%, transparent 60%); }
  .ct-banner__body { max-width: 62%; margin-top: 0; padding: 40px 0 56px 44px; gap: 12px; }
  .ct-banner__product { right: 8%; top: 50%; width: min(30%, 240px); max-width: none; transform: translateY(-50%) rotate(-3deg); }
  .ct-banner__title { font-size: clamp(2rem, 4.2vw, 3.4rem); }
  .ct-banner__text { font-size: 1.05rem; }
  .ct-hero__arrow { display: grid; }
  .ct-hero__nav { right: calc(var(--gutter) + 16px); bottom: 16px; }
  .ct-strip { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 24px 34px; min-height: 140px; }
  .ct-strip__product { width: 120px; right: 34%; }
  .ct-strip:has(.ct-strip__product) { padding-right: 34px; }
  .ct-strip__text { font-size: 1rem; }
  .ct-tools { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .ct-cats { grid-column: 1 / -1; margin-inline: 0; padding-inline: 0; flex-wrap: wrap; overflow: visible; }
  .ct-bar { gap: 16px; }
  .ct-how__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .ct-how__list li { grid-template-columns: 1fr; padding: 24px; }
  .ct-how__list li::before { grid-row: auto; margin-bottom: 8px; }
  .ct-more__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
}
@media (min-width: 1100px) {
  .ct-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
  /* компьютер: поиск, разделы и порядок — одной линией над сеткой */
  .ct-tools { grid-template-columns: minmax(280px, 400px) minmax(0, 1fr) auto; }
  .ct-cats { grid-column: auto; flex-wrap: nowrap; overflow-x: auto; }
  .ct-bar { grid-column: -2 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .ct-item, .ct-card__media img, .ct-banner__bg { transition: none; }
  .ct-item:hover, .ct-item:hover .ct-card__media img, .ct-banner:hover .ct-banner__bg { transform: none; }
}