/* ═══ Витрина каталога ═════════════════════════════════════════════════
   Макет «Каталог витрина своя» от 02.09.2026. Каталог как оглавление:
   товарных снимков нет, вес держат числа и типографика.
   ═════════════════════════════════════════════════════════════════════ */

/* Витрина строит блоки сама, без общего контейнера — крошкам тоже
   нужна его ширина */
.crumbs{width:min(100% - 80px,1280px);margin-inline:auto}
.cat-hero{width:min(100% - 80px,1280px);margin:32px auto 0;
  display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:end}
.cat-hero__t{max-width:20ch;margin:0 0 20px;font-size:clamp(36px,5vw,68px);line-height:.98;
  font-weight:600;letter-spacing:-.04em;text-wrap:balance}
.cat-hero__lead{max-width:52ch;margin:0;font-size:18px;line-height:1.55;
  color:var(--muted);text-wrap:pretty}

.cat-keys{display:grid;gap:18px}
.cat-key{padding-top:14px;border-top:1px solid var(--border)}
.cat-key__n{margin:0;font-size:40px;line-height:1;font-weight:600;letter-spacing:-.03em;
  color:var(--burgundy);font-variant-numeric:tabular-nums}
.cat-key__l{margin:6px 0 0;font-size:13px;color:var(--muted)}

.cat-sect{width:min(100% - 80px,1280px);margin:72px auto 0}
.cat-sect__h{margin:0 0 20px;font-size:13px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.cat-sect__row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:8px 24px;margin-bottom:20px}
.cat-sect__row .cat-sect__h{margin:0}
.cat-sect__more,.cat-forms__all,.cat-band__all{display:inline-flex;align-items:center;gap:8px;
  min-height:44px;font-size:15px;font-weight:600}
.cat-sect__more svg,.cat-forms__all svg,.cat-band__all svg{width:16px;fill:none;
  stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ── Страны ──────────────────────────────────────────────────────── */
.geo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.geo__c{display:block;padding:32px;background:var(--white);border:1px solid #EDE4DE;
  border-radius:24px;color:var(--ink)}
.geo__c:hover{border-color:var(--burgundy);color:var(--ink)}
.geo__top{display:flex;align-items:flex-start;justify-content:space-between;
  gap:20px;margin-bottom:22px}
.geo__glyph{display:block;font-family:'Hiragino Sans','Yu Gothic','Noto Sans JP',
  'Apple SD Gothic Neo','Malgun Gothic',sans-serif;font-size:56px;line-height:.9;
  color:var(--burgundy)}
.geo__count{text-align:right}
.geo__num{display:block;font-size:34px;line-height:1;font-weight:600;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.geo__unit{display:block;margin-top:4px;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.geo__name{display:block;margin-bottom:8px;font-size:22px;font-weight:600;letter-spacing:-.02em}
.geo__brands{display:block;font-size:15px;line-height:1.5;color:var(--muted);text-wrap:pretty}

/* ── Форма выпуска ───────────────────────────────────────────────── */
.cat-forms{width:min(100% - 80px,1280px);margin:72px auto 0;
  display:grid;grid-template-columns:300px minmax(0,1fr);gap:56px;align-items:start}
.cat-forms__lead{max-width:34ch;margin:0 0 18px;font-size:17px;line-height:1.5;
  color:var(--ink);text-wrap:pretty}
.bars{display:grid;gap:2px;border-bottom:1px solid var(--border)}
.bar{display:grid;grid-template-columns:150px minmax(0,1fr) 40px;align-items:center;
  gap:20px;min-height:56px;padding:0 4px;border-top:1px solid var(--border);color:var(--ink)}
.bar:hover{color:var(--burgundy)}
.bar__n{font-size:16px}
.bar__t{display:block;height:10px;background:#EFE7DF;border-radius:999px;overflow:hidden}
.bar__f{display:block;height:10px;background:var(--burgundy);border-radius:999px;
  transform-origin:left center}
/* Полосы стоят ниже сгиба: если пустить анимацию при загрузке, к моменту
   прокрутки она уже отыграет. Скрипт ставит «ждёт», а когда полосы попадают
   на экран — «идёт». Без скрипта полосы просто нарисованы целиком */
.bars--ждёт .bar__f{transform:scaleX(0)}
.bars--идёт .bar__f{transform:scaleX(1);
  transition:transform .9s cubic-bezier(.22,.7,.2,1)}
.bar__c{text-align:right;font-size:15px;font-weight:600;color:var(--muted);
  font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){
  .bars--ждёт .bar__f{transform:scaleX(1)}
  .bars--идёт .bar__f{transition:none}}

/* ── Марки ───────────────────────────────────────────────────────── */
.brands-band{display:flex;flex-wrap:wrap;gap:0 28px;padding-top:20px;
  border-top:1px solid var(--border)}
/* Область нажатия 44px при той же плотности: промежуток между строками
   убран, высоту держит сама ссылка */
.brands-band a{display:inline-flex;align-items:center;gap:6px;min-height:44px;
  font-size:clamp(18px,1.7vw,24px);font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.brands-band a:hover{color:var(--burgundy)}
.brands-band span{font-size:12px;font-weight:600;color:var(--muted);
  font-variant-numeric:tabular-nums}

/* ── Полоса подборок ─────────────────────────────────────────────── */
.cat-band{margin-top:80px;background:var(--burgundy)}
.cat-band__in{width:min(100% - 80px,1280px);margin-inline:auto;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);align-items:stretch;gap:56px}
.cat-band__txt{min-width:0;align-self:center;padding:64px 0}
.cat-band__kick{margin:0 0 14px;font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--blush)}
/* Картинка выходит за правый край контейнера до края окна: полоса идёт
   во всю ширину, и обрывать снимок по сетке незачем */
.cat-band__img{display:block;position:relative;min-width:0;height:100%;
  min-height:380px;margin-right:calc(-1 * max(40px, -640px + 50vw))}
.cat-band__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cat-band__t{max-width:24ch;margin:0 0 14px;font-size:clamp(26px,2.8vw,38px);line-height:1.06;
  font-weight:600;letter-spacing:-.03em;color:#FFF}
.cat-band__p{max-width:46ch;margin:0 0 30px;font-size:16px;line-height:1.55;
  color:var(--blush);text-wrap:pretty}
.cat-band__go{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px}
.cat-band__btn{display:inline-flex;align-items:center;justify-content:center;min-height:60px;
  padding:0 34px;background:#FFF;border-radius:999px;font-size:16px;font-weight:600;
  color:var(--burgundy)}
.cat-band__btn:hover{background:var(--blush);color:var(--burgundy-hover)}
.cat-band__all{color:var(--blush)}
.cat-band__all:hover{color:#FFF}

/* ── Лента новых поступлений ─────────────────────────────────────── */
/* Шапка и плитки берутся из home.css; здесь только рамка секции,
   потому что витрина строит ширину сама, без общего контейнера */
.cat-rail{width:min(100% - 80px,1280px);margin:72px auto 96px}
.cat-rail .hsec{margin-bottom:22px}
.cat-rail .disclaimer{margin-top:20px}

/* ═══ Планшет ═════════════════════════════════════════════════════════ */
@media (max-width:1024px){
  .cat-hero{grid-template-columns:minmax(0,1fr);gap:32px}
  .cat-keys{display:flex;gap:40px}
  .geo{grid-template-columns:minmax(0,1fr)}
  .cat-forms{grid-template-columns:minmax(0,1fr);gap:28px}
}

@media (max-width:860px){
  /* Картинка уходит: в одной колонке она превращается в полосу поперёк
     экрана и мешает читать, а не помогает */
  .cat-band__in{grid-template-columns:minmax(0,1fr);gap:0}
  .cat-band__txt{padding:40px 0 32px}
  .cat-band__img{display:none}
}

/* ═══ Телефон ═════════════════════════════════════════════════════════ */
@media (max-width:767px){
  .cat-hero__t{font-size:34px}   /* макет «Каталог витрина своя моб»: 34 */
  .cat-hero,.cat-sect,.cat-forms,.cat-rail,.cat-band__in,.crumbs{width:calc(100% - 32px)}
  .cat-hero{margin-top:28px}
  .cat-keys{flex-wrap:wrap;gap:20px 28px}
  .cat-key{flex:1 1 40%}
  .cat-key__n{font-size:32px}
  /* Направления в столбик: счётчик над названием, стрелка не нужна */
  .bar{grid-template-columns:110px minmax(0,1fr) 34px;gap:12px}
  .geo__c{padding:22px}
  .geo__glyph{font-size:42px}
  .geo__name{font-size:20px}
  .cat-band__btn{width:100%}
  .cat-sect,.cat-forms,.cat-rail{margin-top:48px}
  .cat-rail{margin-bottom:48px}
}

/* ═══ Направления карточками (макет «Каталог витрина своя» 06.09) ══════
   Раздел перестал быть строкой указателя и стал карточкой с товаром
   внутри: слева иконка и число, справа название, подразделы и лента
   позиций этого раздела. */
.cw-dirs{display:flex;flex-direction:column;gap:20px}
.cw-row{display:grid;grid-template-columns:120px minmax(0,1fr);align-items:start;
  gap:32px;padding:32px;background:var(--white);border:1px solid #EDE4DE;
  border-radius:var(--radius-surface);transition:border-color .18s}
/* Наведение по макету: карточка целиком уходит в бордовый, и всё, что
   на ней, светлеет. Полумера — подсветить одну рамку — на белом фоне
   почти не читается, а карточка кликается вся. */
.cw-row:hover{background:var(--burgundy);border-color:var(--burgundy)}
.cw-row:hover .cw-title,.cw-row:hover .cw-num{color:var(--white)}
.cw-row:hover .cw-unit,.cw-row:hover .cw-note,
.cw-row:hover .cw-lbl{color:rgba(255,255,255,.72)}
.cw-row:hover .cw-ico{background:rgba(255,255,255,.14);color:var(--white)}
.cw-row:hover .cw-sub{color:var(--blush);text-decoration-color:rgba(255,255,255,.45)}
.cw-row:hover .cw-sub:hover{color:var(--white);text-decoration-color:var(--white)}
.cw-row:hover .cw-nav{border-color:rgba(255,255,255,.45);color:var(--white)}
.cw-row:hover .cw-nav:hover{border-color:var(--white);background:rgba(255,255,255,.16)}
/* Плитки в ленте остаются светлыми: это отдельные товары, они не часть
   подсветки раздела */
.cw-row:hover .tile{background:var(--white)}

.cw-side__go{display:block;color:var(--ink)}
.cw-ico{display:grid;place-items:center;width:56px;height:56px;margin-bottom:18px;
  background:var(--porcelain);border-radius:16px;color:var(--burgundy)}
.cw-ico svg{width:26px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.cw-num{display:block;font-size:46px;line-height:.95;font-weight:600;
  letter-spacing:-.04em;color:var(--burgundy);font-variant-numeric:tabular-nums}
.cw-unit{display:block;margin-top:6px;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}

.cw-body{min-width:0}
.cw-title{display:block;margin-bottom:10px;font-size:clamp(24px,2.4vw,32px);
  line-height:1.1;font-weight:600;letter-spacing:-.025em;color:var(--ink)}
.cw-title:hover{color:var(--burgundy)}
.cw-note{max-width:64ch;margin:0 0 14px;font-size:15px;line-height:1.5;
  color:var(--muted);text-wrap:pretty}
.cw-subs{display:flex;flex-wrap:wrap;gap:8px 18px}
.cw-sub{display:inline-flex;align-items:center;min-height:32px;font-size:15px;
  color:var(--burgundy);text-decoration:underline var(--border);
  text-underline-offset:4px}
.cw-sub:hover{text-decoration-color:var(--burgundy)}

.cw-rail{margin-top:24px}
.cw-rail__head{display:flex;align-items:center;justify-content:space-between;
  gap:16px;margin-bottom:12px}
.cw-lbl{margin:0;font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.cw-navs{display:flex;gap:8px}
.cw-nav{display:grid;place-items:center;width:36px;height:36px;padding:0;
  background:transparent;border:1px solid var(--border);
  border-radius:var(--radius-pill);color:var(--burgundy);cursor:pointer}
.cw-nav:hover{border-color:var(--burgundy);background:rgba(229,196,200,.28)}
.cw-nav svg{width:16px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.cw-nav[disabled]{opacity:.35;cursor:default}
.cw-nav[disabled]:hover{border-color:var(--border);background:none}

/* Лента внутри карточки: плитка уже 232 и на песочном фоне — карточка
   раздела белая, и белая плитка на ней потерялась бы */
.cw-track{grid-auto-columns:232px;gap:12px;padding-bottom:2px}
.cw-track .tile{background:var(--porcelain);border-color:#EDE4DE}
.cw-track .tile__body{padding:14px 16px 18px}
/* В ленте раздела имя занимает две строки, а не три. В макете оно
   короткое — «The Golden Aojiru», — у нас в имени ещё и описание,
   и третья строка тянула вверх всю ленту: соседние плитки с коротким
   именем висели с пустотой над ценой. Полное имя осталось в подсказке
   ссылки и в карточке. */
.cw-track .tile__name{-webkit-line-clamp:2;min-height:2.4em}

.cat-sect .disclaimer{margin-top:20px}

/* ── Карточки направлений на узких экранах ─────────────────────────── */
@media (max-width:1024px){
  .cw-row{gap:24px;padding:24px}
}
@media (max-width:767px){
  /* Столбец в 120 пикселей съедал треть экрана, телу оставалось 140 —
     название переносилось по слову. На телефоне шапка карточки идёт
     строкой: иконка и число слева, название справа от них */
  .cw-row{grid-template-columns:minmax(0,1fr);gap:16px;padding:18px 16px;
    border-radius:20px}
  .cw-side{display:block}
  .cw-side__go{display:flex;align-items:center;gap:14px}
  .cw-ico{width:44px;height:44px;margin-bottom:0;border-radius:12px;flex:none}
  .cw-ico svg{width:22px}
  .cw-num{font-size:34px}
  .cw-unit{display:inline;margin-top:0;font-size:12px}
  .cw-title{font-size:24px;margin-bottom:8px}
  .cw-note{margin-bottom:12px;font-size:15px}
  .cw-subs{gap:6px 14px}
  .cw-rail{margin-top:18px}
  /* Лента листается пальцем — стрелки на телефоне лишние */
  .cw-navs{display:none}
  .cw-track{grid-auto-columns:216px}
}

/* ── Полоса подборок на телефоне ───────────────────────────────────── */
@media (max-width:767px){
  /* Картинка возвращается, но снизу и во всю ширину: в столбик она
     работает как разделитель между текстом и следующим экраном */
  .cat-band__img{display:block;min-height:0;height:240px;margin:0 -16px}
  .cat-band__txt{padding:36px 0 28px}
}