/* Раскладка витрины.
 *
 * В хендоффе это выход Tailwind CLI, но собирать его нам нечем и незачем: набор классов в
 * шаблонах закрыт и невелик, а сборочный шаг ради полусотни правил стоил бы дороже самих
 * правил. Разметка при этом остаётся той же, что прислал дизайнер, — правки от него ложатся
 * без перевода.
 *
 * Здесь только раскладка. Всё, что про вид, живёт в components.css и читает токены. */

.flex{display:flex}
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.flex-none{flex:none}
.grid{display:grid}
.block{display:block}
.hidden{display:none}
.items-start{align-items:flex-start}
.items-center{align-items:center}
.items-baseline{align-items:baseline}
.justify-between{justify-content:space-between}
.justify-center{justify-content:center}
.justify-end{justify-content:flex-end}
.ml-auto{margin-left:auto}
.mt-auto{margin-top:auto}
.min-w-0{min-width:0}
.w-full{width:100%}
.text-center{text-align:center}
.text-right{text-align:right}
.cursor-pointer{cursor:pointer}
.whitespace-nowrap{white-space:nowrap}
.break-word{word-break:break-word}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.relative{position:relative}

.gap-\[4px\]{gap:4px}   .gap-\[5px\]{gap:5px}   .gap-\[6px\]{gap:6px}
.gap-\[7px\]{gap:7px}   .gap-\[8px\]{gap:8px}   .gap-\[9px\]{gap:9px}
.gap-\[10px\]{gap:10px} .gap-\[11px\]{gap:11px} .gap-\[12px\]{gap:12px}
.gap-\[14px\]{gap:14px} .gap-\[16px\]{gap:16px}
.gap-y-\[8px\]{row-gap:8px} .gap-y-\[10px\]{row-gap:10px} .gap-y-\[12px\]{row-gap:12px}

.mt-\[6px\]{margin-top:6px}   .mt-\[8px\]{margin-top:8px}
.mt-\[11px\]{margin-top:11px} .mt-\[12px\]{margin-top:12px}
.mt-\[13px\]{margin-top:13px} .mt-\[14px\]{margin-top:14px}
.mt-\[15px\]{margin-top:15px} .mt-\[18px\]{margin-top:18px}
.mb-\[6px\]{margin-bottom:6px}   .mb-\[8px\]{margin-bottom:8px}
.mb-\[10px\]{margin-bottom:10px} .mb-\[12px\]{margin-bottom:12px}
.mb-\[14px\]{margin-bottom:14px} .mb-\[18px\]{margin-bottom:18px}
.mb-\[20px\]{margin-bottom:20px} .mb-\[22px\]{margin-bottom:22px}

.p-\[18px\]{padding:18px}
.py-\[5px\]{padding-top:5px;padding-bottom:5px}
.py-\[8px\]{padding-top:8px;padding-bottom:8px}
.py-\[12px\]{padding-top:12px;padding-bottom:12px}
.pt-\[2px\]{padding-top:2px}   .pt-\[14px\]{padding-top:14px}
.pt-\[20px\]{padding-top:20px}
.pb-\[13px\]{padding-bottom:13px} .pb-\[24px\]{padding-bottom:24px}
.pb-\[44px\]{padding-bottom:44px}

.text-\[13px\]{font-size:13px}
.text-\[14px\]{font-size:14px}
.text-\[15px\]{font-size:15px}
.fw-700{font-weight:700}
.fw-800{font-weight:800}

/* Четыре факта под героем. Волосяные разделители — только пока строка одна: перенесённая
   на вторую строку колонка начинается с отступа, и её подпись перестаёт совпадать по левому
   краю с той, что стоит над ней. Вертикальная линия ценой съехавшего столбца не стоит. */
.hero-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  border-top:1px solid var(--line)}
.hero-facts>div{min-width:0;padding:12px 14px}
.hero-facts>div:first-child{padding-left:0}
.hero-facts>div:last-child{padding-right:0}
@media (min-width:760px){
  .hero-facts>div:not(:last-child){border-right:1px solid var(--line)}
}
@media (max-width:759px){
  .hero-facts{column-gap:20px}
  .hero-facts>div{padding-inline:0}
}

/* Две колонки одинаковой ширины — плитки кармы на карточке и в панели наличия. */
.cols-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* Витрина: фильтры слева, сетка справа. На узком экране фильтры уезжают наверх сами —
   flex-wrap, а не медиазапрос: ломается это по месту, а не по ширине окна. */
.shop-layout{display:flex;align-items:flex-start;gap:clamp(18px,2vw,28px);flex-wrap:wrap}
.shop-main{flex:999 1 420px;min-width:0;display:flex;flex-direction:column;gap:14px}

/* Читается только скринридером: подписи у иконок-кнопок обязаны быть, видеть их незачем. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Индикаторы htmx меняют только прозрачность: сдвиг раскладки на каждом запросе читается
   как подёргивание страницы, а не как загрузка. */
.htmx-indicator{opacity:0;transition:opacity var(--dur) var(--ease)}
.htmx-request .htmx-indicator,.htmx-request.htmx-indicator{opacity:1}
.htmx-indicator-show{display:none}
.htmx-request .htmx-indicator-show{display:inline}
.htmx-request .htmx-indicator-hide{display:none}