/* Списки региона (дизайн v2): /region/XX/coupon, /region/XX/deals и магазины /regions/XX — только своё.
   Карточки (купон, акция, магазин), вставка-призыв, пагинация, чипы и пустой список — общие,
   в jc-components.css (подключается в layouts/app). Здесь: заголовок списка .jc-lh,
   правая часть строки фильтров (выбор магазина и сортировки .jc-sel), меню .jc-menu
   и раскладка страницы магазинов региона (.jc-lh--rs, .jc-rs-sort, .jc-stores--rs).
   Статический файл: Tailwind собран Vite, сборку не пересобираем.
   Подключается из regions/latest_codes, regions/latest_coupons и regions/show через @push('head'). */

/* Заголовок списка */
.jc-lh{margin:4px 0 14px}
.jc-lh h1{margin:0;font:800 20px/1.25 Inter,sans-serif;color:#17171f;letter-spacing:-.01em}
.jc-lh p{margin:6px 0 0;font-size:14px;line-height:1.45;color:#5b6169;max-width:46rem}
.jc-lh p b{color:#17171f}
@media (min-width:768px){.jc-lh{margin:8px 0 18px}.jc-lh h1{font-size:28px}.jc-lh p{font-size:15px}}

/* Строка фильтров: над карточками, выпадающие списки — поверх них */
.jc-lh~.jc-fbar{position:relative;z-index:40}
.jc-chip--ver .jc-i{color:#16a34a}
.jc-chip--ver[aria-pressed=true] .jc-i{color:#4ade80}

/* Справа (ПК): «Магазин: все ▾» и «Сортировка: … ▾». На телефоне — шторка «Фильтры» */
.jc-fbar__r{display:none}
@media (min-width:768px){.jc-fbar__r{display:flex;gap:10px;flex:none;align-self:flex-start}}
.jc-sel{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 12px 0 14px;border-radius:10px;background:#fff;border:1.5px solid #e6e8ec;font:500 14px/1 Inter,sans-serif;color:#5b6169;white-space:nowrap;cursor:pointer;-webkit-appearance:none;appearance:none;margin:0}
.jc-sel:hover{border-color:#c9cbd6}
.jc-sel:focus-visible{outline:2px solid #06323c;outline-offset:2px}
.jc-sel b{color:#17171f;font-weight:600;display:inline-block;max-width:170px;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;line-height:1.2}
.jc-sel svg,.jc-sel .jc-i{width:16px;height:16px;color:#8a8f98;flex:none}

/* Меню сортировки */
.jc-menu{position:absolute;inset-inline-end:0;top:calc(100% + 6px);z-index:60;min-width:220px;background:#fff;border:1px solid #e6e8ec;border-radius:12px;box-shadow:0 10px 30px rgba(16,24,40,.12);padding:6px}
.jc-menu button{display:block;width:100%;text-align:start;padding:9px 12px;border:0;border-radius:8px;background:none;font:500 14px/1.2 Inter,sans-serif;color:#3f444b;cursor:pointer;white-space:nowrap}
.jc-menu button:hover,.jc-menu button:focus-visible{background:#f6f7f9;outline:none}
.jc-menu button[aria-checked=true]{font-weight:700;color:#17171f;background:#f3f4f6}

/* Магазины региона /regions/XX (regions/show): справа от заголовка (на телефоне — под ним)
   «Сортировка: … ▾» — та же .jc-sel и .jc-menu, что на списках купонов и акций */
.jc-lh--rs{display:flex;flex-direction:column;gap:12px}
.jc-lh__t{min-width:0}
/* подзаголовок с dir=auto (ar — справа налево; здесь и в regions/list_head) выравниваем, как заголовок над ним */
.jc-lh p[dir=auto]{text-align:left}
[dir=rtl] .jc-lh p[dir=auto]{text-align:right}
.jc-rs-sort{position:relative;z-index:40;align-self:flex-start}
@media (min-width:768px){.jc-lh--rs{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:24px}.jc-rs-sort{flex:none;align-self:auto}}
/* Телефон: кнопка не шире экрана — длинное значение («Mit Gutscheinen & Angeboten» на 320 px)
   сокращается многоточием, пункты меню переносятся */
@media (max-width:767.98px){
  .jc-rs-sort,.jc-rs-sort .jc-sel{max-width:100%}
  .jc-rs-sort .jc-sel b{min-width:0;max-width:none}
  .jc-rs-sort .jc-menu{inset-inline-end:auto;inset-inline-start:0;max-width:calc(100vw - 32px)}
  .jc-rs-sort .jc-menu button{padding:12px;white-space:normal}
}
/* Сетка .jc-stores — как «Популярные магазины» главной (на ПК 5 в ряд). На странице 24 карточки и вставка
   во всю строку после 12-й: dense подтягивает следующие карточки в пустые места ряда перед вставкой */
.jc-stores--rs{grid-auto-flow:row dense}
.jc-stores--rs>[data-jc-promo]{grid-column:1/-1}