/* HotSki — template 2 «Листинг»: catalog.html (одежда · оборудование · подборки) · rasprodazha.html · search.html.
   Skeleton coolzone listing_anoraki / podrazdel_odezhda (refs/coolzone/pages): crumbs + H1 → filters in one row →
   grid 4 × 338 with one big card 506 × 717 and an empty field in row 2 → pagination → SEO in three columns → bottom.
   States (logic/NEW_MAP_2.md §2): B7 sale poster over the grid (R41), B8 empty search. Motion: transform/opacity only. */

/* the hidden attribute wins over the display rules below */
.lst [hidden] { display: none !important; }

/* ---------- B1 crumbs + H1 ---------- */
.lst { padding-top: calc(var(--hdr) + 34px); }
.lst-head { display: grid; gap: 24px; justify-items: start; }
.lst-head .crumbs a { transition: color var(--tr); }
.lst-head .crumbs .sep { padding: 0 4px; }
.lst-head__title { max-width: 1160px; }
.lst-head__title .ln { overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.lst-head__title .ch { display: inline-block; }

/* ---------- B2 filters in a row (coolzone: «МЕМБРАНА ⌄ · … · ЦЕНА ⌄», hairline across the page) ---------- */
.flt { position: relative; z-index: 30; margin-top: 46px; }
.flt__line { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #e4e4e4; transform-origin: 0 50%; pointer-events: none; }
.flt__row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.flt__groups { display: flex; flex-wrap: wrap; gap: 0 38px; }
.flt__grp { position: relative; }
.flt__btn {
  position: relative; display: inline-flex; align-items: center; gap: 10px; height: 54px;
  font-size: 13px; line-height: 1; text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap;
}
.flt__btn::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 1px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease-out); }
.flt__btn:hover::after, .flt__grp.is-open .flt__btn::after { transform: scaleX(1); }
.flt__btn[disabled] { color: #b9b9b9; cursor: default; }
.flt__btn[disabled]::after { display: none; }
.flt__chev { width: 6px; height: 6px; margin-left: 2px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.4s var(--ease-out); }
.flt__grp.is-open .flt__chev { transform: translateY(2px) rotate(-135deg); }
.flt__mark { display: none; min-width: 16px; height: 16px; padding: 0 5px; border-radius: 8px; background: var(--red); color: var(--white); font-size: 10px; font-weight: 400; line-height: 16px; text-align: center; letter-spacing: 0; }
.flt__grp.is-set .flt__mark { display: inline-block; }
.flt__side { display: flex; align-items: center; gap: 26px; flex: 0 0 auto; }
.flt__reset { flex: 0 0 auto; }
/* selected season from the product card (?y=): a chip with the brand dot and a cross */
.flt__chip { display: inline-flex; align-items: center; gap: 10px; height: 30px; padding: 0 12px 0 12px; border: 1px solid var(--ink); border-radius: 10px; font-size: 12px; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; transition: box-shadow var(--tr), border-color var(--tr); }
.flt__chip:hover { box-shadow: inset 0 0 0 0.5px var(--ink); }
.flt__chip .dot { width: 6px; height: 6px; }
.flt__x { position: relative; width: 10px; height: 10px; }
.flt__x::before, .flt__x::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; transform: rotate(45deg); transition: transform 0.35s var(--ease-out); }
.flt__x::after { transform: rotate(-45deg); }
.flt__chip:hover .flt__x::before { transform: rotate(135deg); }
.flt__chip:hover .flt__x::after { transform: rotate(45deg); }

.flt__panel {
  position: absolute; left: -26px; top: 100%; min-width: 300px; padding: 22px 26px 24px; background: var(--white);
  border-top: 1px solid #e6e6e6; box-shadow: 0 30px 40px rgba(20, 20, 20, 0.1);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 0.25s, transform 0.4s var(--ease-out), visibility 0s 0.4s;
}
.flt__grp.is-open .flt__panel { opacity: 1; visibility: visible; transform: none; transition: opacity 0.25s, transform 0.4s var(--ease-out), visibility 0s; }
.flt__cap { display: block; margin-bottom: 12px; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray); }

/* option = circle toggle, the brand dot inside when on (coolzone «кружок-переключатель») */
.fopt { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 14px; width: 100%; padding: 7px 0; text-align: left; font-size: 13px; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap; }
.fopt__ring { position: relative; width: 14px; height: 14px; border: 1px solid var(--ink); border-radius: 50%; transition: border-color 0.2s; }
.fopt__ring::after { content: ""; position: absolute; left: 3px; top: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--red); transform: scale(0); transition: transform 0.35s var(--ease-out); }
.fopt:hover .fopt__ring, .fopt.is-on .fopt__ring { border-color: var(--red); }
.fopt.is-on .fopt__ring::after { transform: scale(1); }
.fopt__n { min-width: 18px; text-align: right; color: var(--gray); font-size: 12px; letter-spacing: 0; }
.fopt[disabled] { color: #c2c2c2; cursor: default; }
.fopt[disabled] .fopt__ring { border-color: #dadada; }

/* sizes = chips */
.fsz { display: flex; flex-wrap: wrap; gap: 6px; width: 372px; }
.fsz__b { min-width: 46px; height: 32px; padding: 0 10px; border: 1px solid #dcdcdc; border-radius: 10px; font-size: 12px; letter-spacing: 0.02em; transition: border-color 0.2s, box-shadow 0.2s, color 0.2s; }
.fsz__b:hover { border-color: var(--ink); }
.fsz__b.is-on { border-color: var(--red); color: var(--red); box-shadow: inset 0 0 0 0.5px var(--red); }
.fsz__b[disabled] { color: #cacaca; border-color: #efefef; cursor: default; }
.fsz__none { font-size: 13px; color: var(--gray); }

/* price: two fields on the line + a double slider (fill = scaleX) */
.fpr { width: 330px; }
.fpr__vals { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 22px; }
.fpr__vals label { display: grid; gap: 4px; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray); }
.fpr__vals input { width: 100%; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; padding: 6px 0 8px; background: transparent; outline: none; font-size: 15px; font-weight: 300; color: var(--ink); }
.fpr__vals input:focus { border-bottom-color: var(--red); }
.fpr__track { position: relative; height: 22px; }
.fpr__track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #d2d2d2; }
.fpr__fill { position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background: var(--red); transform-origin: 0 50%; }
.fpr__track input { position: absolute; left: 0; top: 0; width: 100%; height: 22px; margin: 0; padding: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; outline: none; }
.fpr__track input::-webkit-slider-runnable-track { height: 22px; background: none; border: 0; }
.fpr__track input::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 16px; height: 16px; margin-top: 3px; border-radius: 50%; border: 1px solid var(--ink); background: var(--white); cursor: grab; transition: border-color 0.2s, transform 0.2s; }
.fpr__track input:active::-webkit-slider-thumb { border-color: var(--red); transform: scale(1.15); cursor: grabbing; }
.fpr__track input::-moz-range-track { background: none; border: 0; }
.fpr__track input::-moz-range-thumb { pointer-events: auto; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--ink); background: var(--white); cursor: grab; }
.fpr__fixed { font-size: 15px; }

/* count · sort · stock switch */
.lst-bar { display: flex; align-items: center; justify-content: space-between; gap: 30px; min-height: 100px; }
.lst-bar__tools { display: flex; align-items: center; gap: 22px; }
.lst-bar__label { font-size: 13px; text-transform: uppercase; letter-spacing: 0.02em; color: var(--gray); }
.lst-sort { display: flex; gap: 20px; }
.lst-stock { display: inline-flex; align-items: center; gap: 12px; padding-left: 24px; border-left: 1px solid #e4e4e4; font-size: 13px; line-height: 1; text-transform: uppercase; letter-spacing: 0.02em; }
.lst-stock i { position: relative; width: 32px; height: 18px; border: 1px solid var(--ink); border-radius: 10px; }
.lst-stock i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--gray); transition: transform 0.4s var(--ease-out), background-color 0.25s; }
.lst-stock.is-on i::after { transform: translateX(14px); background: var(--red); }

/* ---------- B3 grid: 4 × 338, gap 16; the big card spans 2 columns and takes 3/4 of them (506 + empty field) ---------- */
.lgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 64px var(--gap); align-items: start; }
.lgrid > * { min-width: 0; }
.lcell--big { grid-column: span 2; }
.lcell--big > .pcard { width: calc((100% - var(--gap)) * 0.75); }
.lgrid .pcard.is-rv .pcard__media img { transition: opacity 0.85s ease-in-out; }
.lveil { position: absolute; inset: 0; z-index: 4; background: var(--white); transform-origin: 50% 0%; pointer-events: none; }
.lgrid-empty { display: grid; gap: 18px; justify-items: start; padding: 40px 0 20px; }

/* the big card (coolzone B3 «одна большая» · R31 poster: callout top, brand word cut by the edge like the footer word) */
.lbig .pcard__media { background: var(--snow); }
.lbig .pcard__media img.is-front { transform-origin: 50% 42%; }
.lbig:hover .pcard__media img.is-front { transform: scale(1.035); }
.lbig .pcard__media img.is-back { object-fit: cover; }
/* hover keeps the scene (the point of the big tile); the arrows flip to the product photo (inline opacity from cards.js wins) */
.lbig:hover .pcard__media img.is-back { opacity: 0; }
.lbig__tag { position: absolute; z-index: 3; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 9px; padding: 8px 13px 8px 10px; border-radius: 999px; font-size: 10px; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); transition: opacity 0.3s; }
.lbig__tag .dot { width: 6px; height: 6px; }
.lbig__word { position: absolute; z-index: 2; left: 0; right: 0; text-align: center; white-space: nowrap; font-family: var(--f-disp); font-weight: 900; text-transform: uppercase; line-height: 0.8; letter-spacing: -0.005em; color: var(--red); pointer-events: none; }
.lbig__word--bottom { bottom: -0.13em; font-size: 186px; }
.lbig__word--top { top: 60px; font-size: 92px; }
.lbig__word .ch { display: inline-block; }
.lbig__pin { position: absolute; z-index: 3; left: var(--x); top: var(--y); width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--white); display: grid; place-items: center; box-shadow: 0 4px 14px rgba(20, 40, 70, 0.22); transition: opacity 0.3s; animation: lbPin 3s ease-in-out infinite; }
.lbig__pin::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.lbig__pin::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.95); animation: lbRing 3s ease-out infinite; }
.lbig:hover .lbig__pin, .lbig:hover .lbig__pin::before { animation-play-state: paused; }
.lbig.is-flipped .lbig__tag, .lbig.is-flipped .lbig__pin { opacity: 0; }
@keyframes lbPin { 0%, 100% { transform: scale(0.9); } 50% { transform: scale(1); } }
@keyframes lbRing { 0% { transform: scale(1); opacity: 0.9; } 70%, 100% { transform: scale(2.3); opacity: 0; } }

/* ---------- B4 pagination (coolzone podrazdel: «1 2 3 4 … 5», «СЛЕДУЮЩАЯ СТРАНИЦА ›») ---------- */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding-top: 92px; padding-bottom: 80px; }
.pager__nums { display: flex; align-items: center; gap: 20px; font-size: 13px; line-height: 1; letter-spacing: 0.02em; }
.pager__n { position: relative; min-width: 10px; padding: 5px 1px; text-align: center; }
.pager__n::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform var(--tr); }
a.pager__n:hover::after { transform: scaleX(1); }
.pager__n.is-on::after { transform: scaleX(1); background: var(--red); }
.pager__n.is-off, .pager__dots { color: var(--gray); }
.pager__next { display: inline-flex; align-items: center; gap: 16px; font-size: 13px; line-height: 1; text-transform: uppercase; letter-spacing: 0.02em; }
.pager__next .arr { transition: transform 0.4s var(--ease-out), box-shadow var(--tr); }
.pager__next:hover .arr { transform: translateX(4px); box-shadow: inset 0 0 0 0.5px var(--ink); }
.pager__next.is-off { color: var(--gray); pointer-events: none; }
.pager__next.is-off .arr { border-color: #cfcfcf; }

/* ---------- B5 SEO text: title across, lead, three columns (coolzone B5) ---------- */
.lseo { position: relative; padding: 66px 0 84px; }
.lseo::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: #e4e4e4; }
.lseo__title { max-width: 1120px; }
.lseo__lead { max-width: 1060px; margin-top: 28px; font-size: 20px; line-height: 1.4; font-weight: 300; }
.lseo__cols { margin-top: 50px; columns: 3; column-gap: var(--gap); font-size: 15px; line-height: 1.5; }
.lseo__cols > * { margin: 0 0 1.05em; }
.lseo__cols > *:last-child { margin-bottom: 0; }
.lseo__sub { font-size: 20px; line-height: 1.18; font-weight: 400; text-transform: uppercase; margin: 0 0 16px; padding-top: 12px; break-after: avoid; break-inside: avoid; }
.lseo__cols > .lseo__sub:first-child { padding-top: 0; }
.lseo__list { display: grid; gap: 4px; break-inside: avoid; }
.lseo__list li { display: flex; align-items: baseline; gap: 12px; }
.lseo__list li::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--red); transform: translateY(-2px); }

/* ---------- B7 sale poster (R41: winter poster, huge type, cold, the item in frame; no percent) ---------- */
.sale { position: relative; height: clamp(560px, 43vw, 860px); margin-top: 40px; overflow: hidden; isolation: isolate;
  /* the photo's own sky and snow continued across the band (sampled from img/p/15404.webp, right edge) */
  background: linear-gradient(180deg, #e3eefa 0%, #e8f1fb 18%, #ebf2fb 30%, #f0f3fb 52%, #f6f8fc 62%, #fafbfd 74%, #ffffff 100%); }
.sale__photo { position: absolute; z-index: 0; left: 0; top: 0; bottom: 0; width: 48%;
  -webkit-mask-image: linear-gradient(90deg, #000 84%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(90deg, #000 84%, rgba(0, 0, 0, 0) 100%); }
.sale__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 0 58%; transform-origin: 20% 60%; }
.sale__img--blur { filter: blur(16px); opacity: 0; }
.sale__snow { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.sale__word { position: absolute; z-index: 2; left: 0; right: 0; top: 34px; text-align: center; white-space: nowrap; font-weight: 900; font-size: 17.4vw; line-height: 0.76; letter-spacing: -0.012em; color: var(--red); pointer-events: none; }
.sale__word .ch { display: inline-block; }
.sale__co { position: absolute; z-index: 4; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.sale__note { position: absolute; z-index: 5; right: var(--pad); bottom: 26px; width: 456px; padding: 24px 26px 26px; display: grid; gap: 16px; justify-items: start; }
.sale__lead { display: flex; align-items: baseline; gap: 12px; }
.sale__lead .dot { flex: 0 0 auto; transform: translateY(-2px); }
.sale__text { max-width: 380px; }

/* callout on the item (home hero language: dot → two segments → glass pill, R14 · R37) */
.sco { position: absolute; left: var(--x); top: var(--y); }
.sco__dot { position: absolute; left: -10px; top: -10px; width: 20px; height: 20px; border-radius: 50%; background: rgba(255, 255, 255, 0.96); display: grid; place-items: center; box-shadow: 0 4px 16px rgba(30, 50, 80, 0.25); pointer-events: auto; }
.sco__dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.sco__dot::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.9); animation: lbRing 2.8s ease-out infinite; }
.sco__seg { position: absolute; left: 0; top: 0; height: 1.5px; background: var(--white); transform-origin: 0 50%; box-shadow: 0 0 6px rgba(30, 50, 80, 0.18); }
.sco__pill { position: absolute; display: flex; align-items: center; gap: 12px; padding: 7px 20px 7px 7px; border-radius: 999px; white-space: nowrap; color: var(--ink); transform-origin: 0% 50%; pointer-events: auto; transition: box-shadow 0.3s; }
.sco__pill img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; object-position: 12% 58%; background: var(--snow); }
.sco__pill b { display: block; width: 200px; white-space: normal; font-size: 11.5px; line-height: 1.2; font-weight: 400; text-transform: uppercase; letter-spacing: 0.02em; }
.sco__pill span span { display: block; margin-top: 3px; font-size: 15px; font-weight: 400; }
.sco__pill:hover { box-shadow: 0 0 0 1px var(--red), 0 18px 40px rgba(40, 60, 90, 0.18); }

/* ---------- B8 search: found / nothing found ---------- */
.srch-top { display: grid; grid-template-columns: 2fr 1fr; min-height: 540px; margin-top: 42px; }
.srch-main { display: flex; flex-direction: column; gap: 42px; padding: 6px 64px 50px var(--pad); min-width: 0; }
.srch-form { display: flex; align-items: center; gap: 14px; max-width: 760px; padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.srch-form__ico { width: 18px; height: 18px; flex: 0 0 auto; }
.srch-form__input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-size: 20px; font-weight: 300; color: var(--ink); }
.srch-form__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.srch-form:focus-within { border-bottom-color: var(--red); }
.srch-say { display: grid; gap: 26px; justify-items: start; }
.srch-echo { font-family: var(--f-disp); font-weight: 900; text-transform: uppercase; font-size: clamp(72px, 9.6vw, 150px); line-height: 0.84; letter-spacing: -0.005em; color: var(--ink); overflow-wrap: anywhere; max-width: 100%; }
.srch[data-state="none"] .srch-echo { color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
.srch-say__count { color: var(--gray); }
.srch-pop { position: relative; background: var(--red); color: var(--white); padding: 24px 22px 30px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.srch-pop__cap { opacity: 0.9; }
.srch-pop__list { display: grid; }
.srch-pop__list a { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 0 14px; font-size: 30px; line-height: 1.1; font-weight: 300; text-transform: uppercase; border-top: 1px solid rgba(255, 255, 255, 0.4); }
.srch-pop__list a:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.4); }
.srch-pop__list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--white); transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease-out); }
.srch-pop__list a:hover::after { transform: scaleX(1); }
.srch-pop__list i { font-style: normal; font-size: 22px; transition: transform 0.45s var(--ease-out); }
.srch-pop__list a:hover i { transform: translate(4px, -4px); }
.srch[data-state="idle"] .srch-top { min-height: 420px; }
.srch[data-state="found"] .srch-top { grid-template-columns: 1fr; min-height: 0; }
.srch[data-state="found"] .srch-pop, .srch[data-state="found"] .srch-new { display: none; }
.srch-grid { padding-top: 10px; padding-bottom: 90px; }
.srch-new { padding-top: 90px; }

@media (prefers-reduced-motion: reduce) {
  .lbig__pin, .lbig__pin::before, .sco__dot::before { animation: none; }
}