/* catalog.css — СЕВАС catalog and search (019, build P6 → blue world P10, 28.09). Speaks the home language: the vivid section
   colours of the home tiles (.secard--*), products on flavour plates, pill chips on the blue, shop elements of S06 hookah-market,
   the filter of S01 moze. Motion: transform and opacity only, hover 0.2 s; the filter axes open by height (base.css details). */

/* ---------- B1 head: crumbs, the name, the live count; the section's product rises over the panel edge ---------- */
.chead { padding-top: clamp(18px, 1.6vw, 34px); }
.chead__panel { position: relative; isolation: isolate; display: grid; align-content: end; min-height: clamp(196px, 14.5vw, 340px);
  margin-top: clamp(46px, 4.4vw, 104px); padding: clamp(24px, 2.2vw, 48px) clamp(24px, 2.6vw, 56px); border-radius: var(--r-xl); color: var(--navy); }
.chead__panel .sec__more { color: var(--navy); }
.chead__panel::before { content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit; background: var(--bgc); }
.chead--kalyany { --bgc: linear-gradient(100deg, #ffd8bf 0%, #ffb08c 45%, #f2745a 100%); }   /* the vivid tiles of the home (R06/R11 Vapohub) */
.chead--smesi { --bgc: linear-gradient(100deg, #fff6be 0%, #ffe07a 45%, #f3b53a 100%); }
.chead--ugol { --bgc: linear-gradient(100deg, #d6f8ec 0%, #8fe0c6 45%, #38b99d 100%); }
.chead--aksessuary { --bgc: linear-gradient(100deg, #ffe0f1 0%, #e9b3ec 45%, #b983ee 100%); }
.chead--search { --bgc: linear-gradient(100deg, #dcebfa 0%, #aacdf0 45%, #6fa8e0 100%); }
.chead__panel.chead--search { min-height: 0; margin-top: clamp(16px, 1.4vw, 30px); }   /* no product rises over it: the results come up */
.chead__txt { position: relative; max-width: min(60%, 940px); }
.chead__h1 { margin: 0; overflow-wrap: anywhere; }
.chead__live { display: inline-flex; align-items: center; gap: 10px; margin-top: clamp(12px, 1vw, 22px); padding: 9px 16px 9px 12px;
  border-radius: var(--r-pill); background: rgba(255, 255, 255, .74); font: 600 var(--fs-1)/1.2 var(--f-text); white-space: nowrap; }
.chead__pulse { width: 9px; height: 9px; border-radius: 50%; background: #2f8a57; }   /* still: a pulsing dot is on the slop list */
.chead--search .chead__pulse { display: none; }
.chead--search .chead__live { padding-left: 16px; }
.chead__more { margin-left: clamp(12px, 1.2vw, 24px); vertical-align: middle; }
.chead__img { position: absolute; right: clamp(20px, 5%, 130px); bottom: 9%; z-index: -1; width: auto; height: 128%; max-width: 42%;
  object-fit: contain; object-position: bottom center; pointer-events: none; filter: drop-shadow(0 22px 26px rgba(15, 36, 64, .3)); }
.chead--kalyany .chead__img { height: 132%; bottom: 5%; }   /* a tall hookah: its top stays below the crumbs line, not under the header */
.chead__img.is-brand { height: 118%; bottom: 3%; }
.chead__img.is-prod { height: 136%; bottom: 2%; filter: drop-shadow(0 16px 20px rgba(22, 32, 43, .16)); }
.chead__img[hidden] { display: none; }

/* ---------- body: the filter on the left, the goods on the right ---------- */
.catbody { padding-top: clamp(26px, 2.4vw, 52px); }
.catbody__grid { display: grid; grid-template-columns: clamp(250px, 18vw, 340px) minmax(0, 1fr); gap: clamp(24px, 2.2vw, 52px); align-items: start; }
.catmain { min-width: 0; }

/* ---------- B3 filter: a lighter blue panel, axes folded and opening smoothly (S01 moze), a count at every value ---------- */
.flt { position: sticky; top: calc(var(--hdr) + 24px); max-height: calc(100vh - var(--hdr) - 44px); overflow: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent; padding: 18px 20px 20px; border-radius: var(--r-l); background: var(--panel); }
.flt__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.flt__t { display: inline-flex; align-items: center; gap: 10px; font: 600 var(--fs-2)/1 var(--f-text); }
.flt__t svg { width: 22px; height: 22px; }
.flt__reset { padding: 6px 0; font: 600 var(--fs-0)/1 var(--f-text); color: var(--link); }
.flt__reset[disabled] { color: var(--ink-3); cursor: default; }
.flt__stock { position: relative; display: flex; align-items: center; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); font-weight: 500; cursor: pointer; }
.flt__stock input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.flt__sw { position: relative; isolation: isolate; flex: none; width: 42px; height: 24px; border-radius: 12px; background: rgba(244, 239, 232, .22); overflow: hidden; }
.flt__sw::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #3fa66c; opacity: 0; transition: opacity var(--t-h) var(--ease-h); }
.flt__sw::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform var(--t-h) var(--ease-h); }
.flt__stock input:checked + .flt__sw::before { opacity: 1; }
.flt__stock input:checked + .flt__sw::after { transform: translateX(18px); }
.flt__stock input:focus-visible + .flt__sw { outline: 2px solid var(--link); outline-offset: 3px; }
.flt__hint { padding: 14px 0 4px; font-size: 15px; line-height: 1.4; color: var(--ink-2); }

.fax { border-bottom: 1px solid var(--line); }
.fax > summary { display: flex; align-items: center; gap: 8px; padding: 15px 0; list-style: none; cursor: pointer; font: 600 var(--fs-1)/1.2 var(--f-text); }
.fax > summary::-webkit-details-marker { display: none; }
.fax > summary svg { width: 18px; height: 18px; margin-left: auto; color: var(--ink-3); transition: transform var(--t-h) var(--ease-h); }
.fax[open] > summary svg { transform: rotate(180deg); }
.fax__sel { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--ink); color: var(--paper); font: 700 12px/22px var(--f-text); text-align: center; }
.fax__sel[hidden] { display: none; }
.fax__body { display: grid; gap: 1px; padding-bottom: 14px; }
.fchk { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 0;
  font-size: 15px; line-height: 1.25; cursor: pointer; }
.fchk[hidden] { display: none; }
.fchk input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.fchk__box { position: relative; width: 18px; height: 18px; border-radius: 5px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.fchk__box::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #3f86cc url("../vendor/icons/check-white.svg") center/12px no-repeat;
  opacity: 0; transform: scale(.4); transition: transform var(--t-h) var(--ease-h), opacity var(--t-h) var(--ease-h); }
.fchk input:checked + .fchk__box::after { opacity: 1; transform: none; }
.fchk input:focus-visible + .fchk__box { outline: 2px solid var(--link); outline-offset: 2px; }
.fchk__t { min-width: 0; overflow-wrap: anywhere; }
.fchk:hover .fchk__t { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.fchk__n { font-size: 14px; font-weight: 500; color: var(--ink-3); }
.fchk.is-zero { cursor: default; opacity: .42; }
.fchk.is-zero:hover .fchk__t { text-decoration: none; }
/* weights: pills in a row — 24 values fold into a few lines */
.fax__body--pills { display: flex; flex-wrap: wrap; gap: 6px; }
.fax__body--pills .fchk { display: inline-flex; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: var(--r-pill); background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; }
.fax__body--pills .fchk__box { display: none; }
.fax__body--pills .fchk:hover { box-shadow: inset 0 0 0 1px var(--ink-2); }
.fax__body--pills .fchk:hover .fchk__t { text-decoration: none; }
.fax__body--pills .fchk.is-on { background: var(--ink); color: var(--paper); box-shadow: none; }
.fax__body--pills .fchk.is-on .fchk__n { color: rgba(22, 51, 90, .8); }
.fax__body--pills .fchk:has(input:focus-visible) { outline: 2px solid var(--link); outline-offset: 2px; }
.fax__body--pills .fax__note { flex-basis: 100%; }
.fax__more { justify-self: start; margin-top: 6px; padding: 6px 0; font: 600 15px/1 var(--f-text); color: var(--link); }
.fax__more[hidden] { display: none; }
.fax__note { margin-top: 8px; font-size: 14px; line-height: 1.4; color: var(--ink-3); }
.fax__find { position: relative; display: block; margin: 0 0 8px; }
.fax__find input { width: 100%; height: 38px; padding: 0 12px 0 36px; border: 1.5px solid var(--line); border-radius: var(--r-pill); background: var(--card);
  outline: none; font-size: 14px; }
.fax__find input:focus { border-color: var(--link); }
.fax__find input::-webkit-search-cancel-button { -webkit-appearance: none; }
.fax__find svg { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; color: var(--ink-3); transform: translateY(-50%); }
.fprice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.fprice label { position: relative; display: block; }
.fprice span { position: absolute; left: 12px; top: 50%; font-size: 14px; color: var(--ink-3); pointer-events: none; transform: translateY(-50%); }
.fprice input { width: 100%; height: 42px; padding: 0 8px 0 32px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--card); outline: none;
  font-size: 15px; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.fprice input::-webkit-inner-spin-button, .fprice input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.fprice input:focus { border-color: var(--link); }
.flt__promise { margin-top: 20px; padding: 16px 16px 18px; border-radius: var(--r-m); background: var(--mist); }
.flt__promise .promise__big { font-size: var(--fs-1); font-weight: 700; line-height: 1.25; }
.flt__note { margin-top: 4px; font-size: 14px; line-height: 1.4; color: var(--ink-2); }

/* ---------- B2 next level: chips with a count (S06) ---------- */
.catchips { margin-bottom: clamp(16px, 1.4vw, 28px); }
.catchips:empty { display: none; }
.catchips .chip { cursor: pointer; }
.catchips__sep { flex: none; align-self: center; width: 1px; height: 26px; margin: 0 6px; background: var(--line); }
.chip--more { gap: .35em; color: var(--link); }
.chip--more svg { width: 16px; height: 16px; transition: transform var(--t-h) var(--ease-h); }
.chip--more.is-open svg { transform: rotate(180deg); }
.chip--key { background: var(--card); font-weight: 600; }   /* the client's own hookah chips (ДО 5000р. …) read apart from brands */

/* ---------- B5 sort as tabs over the cards (R04) + view ---------- */
.cattool { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.cattool__n { margin-left: auto; font: 500 var(--fs-0)/1 var(--f-text); color: var(--ink-2); white-space: nowrap; }
.cattool__view { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: var(--panel); }
.cattool__view button { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border-radius: var(--r-pill);
  font: 600 14px/1 var(--f-text); color: var(--ink-2); }
.cattool__view button svg { width: 18px; height: 18px; }
.cattool__view button.is-on { background: var(--ink); color: var(--paper); }
.cattool__note { min-height: 1.4em; margin-top: 10px; font-size: 14px; line-height: 1.4; color: var(--ink-3); }

/* ---------- B3 what is chosen: chips with a cross over the grid ---------- */
.catsel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.catsel[hidden] { display: none; }
.catsel__t { margin-right: 4px; font: 600 13px/1 var(--f-text); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.chip--x { background: var(--ink); color: var(--paper); box-shadow: none; cursor: pointer; }
.chip--x:hover { box-shadow: none; }
.chip--x svg { width: 14px; height: 14px; opacity: .65; }
.chip--x:hover svg { opacity: 1; }
.catsel__clear { padding: 8px 6px; font: 600 15px/1 var(--f-text); color: var(--link); }

/* ---------- B4 grid of tiles, B5 price-list rows (S06 hover_view_pricelist) ---------- */
.catgrid { margin-top: clamp(20px, 1.8vw, 36px); }
/* tiles here are narrower than on the home ribbon: price over stock, the same in every tile (S06 order) */
.catgrid .tile__meta, .catempty .tile__meta { flex-direction: column; align-items: flex-start; gap: 5px; }
.catgrid.is-list { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--line); }
.lrow { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto auto auto; align-items: center; gap: clamp(14px, 1.4vw, 30px); padding: 14px 0;
  border-bottom: 1px solid var(--line); }
.lrow:last-child { border-bottom: 0; }
.lrow__ph { position: relative; display: block; width: 72px; height: 72px; border-radius: 12px; overflow: hidden; }
.lrow__ph img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; transition: transform var(--t-h) var(--ease-h); }
.lrow:hover .lrow__ph img { transform: scale(.94); }
.lrow__ph .tile__noimg svg { width: 50%; }
.lrow__main { display: grid; gap: 4px; min-width: 0; }
.lrow__top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.lrow__brand { font: 600 13px/1.2 var(--f-text); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.lrow__name { font: 500 var(--fs-1)/1.3 var(--f-text); }
.lrow:hover .lrow__name { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.lrow__props { font-size: 14px; line-height: 1.35; color: var(--ink-2); }
.lrow .price { font-size: var(--fs-2); text-align: right; }
.lrow .price s { display: block; margin: 4px 0 0; }
.lrow .qty { height: 42px; }
.lrow .btn { min-height: 44px; padding: 0 22px; font-size: 15px; }
.lrow--out .lrow__ph img { opacity: .7; }

/* skeleton while the section loads */
.skel { aspect-ratio: 1 / 1.6; border-radius: var(--r-m); background: var(--panel); animation: catskel 1.4s ease-in-out infinite; }
@keyframes catskel { 50% { opacity: .5; } }
.caterr { padding: 30px 0; color: var(--ink-2); }

/* ---------- B7 nothing found ---------- */
.catempty { margin-top: clamp(20px, 1.8vw, 36px); padding: clamp(28px, 3vw, 60px); border-radius: var(--r-xl); background: var(--panel); }
.catempty[hidden] { display: none; }
.catempty__t { max-width: 36ch; font: 600 var(--fs-3)/1.3 var(--f-text); overflow-wrap: anywhere; }
.catempty__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.catempty__cta .btn[hidden] { display: none; }
.catempty__sub { margin: clamp(32px, 3vw, 60px) 0 clamp(16px, 1.4vw, 28px); font: 400 var(--fs-4)/1.05 var(--f-display); }
.catempty__sub[hidden] { display: none; }

/* ---------- B6 show more ---------- */
.catmore { display: grid; justify-items: center; gap: 12px; margin-top: clamp(36px, 3.4vw, 76px); }
.catmore[hidden] { display: none; }
.catmore .btn[hidden] { display: none; }
.catmore__n { font-size: var(--fs-0); color: var(--ink-3); }

/* ---------- B7 the client's section text, folded ---------- */
.cattext { margin-top: clamp(48px, 4.6vw, 110px); }
.cattext__d { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cattext__d[hidden] { display: none; }
.cattext__d > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; list-style: none; cursor: pointer;
  font: 600 var(--fs-2)/1.3 var(--f-text); }
.cattext__d > summary::-webkit-details-marker { display: none; }
.cattext__d > summary svg { flex: none; width: 20px; height: 20px; transition: transform var(--t-h) var(--ease-h); }
.cattext__d[open] > summary svg { transform: rotate(180deg); }
.cattext__b { display: grid; gap: 14px; max-width: 72ch; padding-bottom: 30px; color: var(--ink-2); }
.cattext__h { margin-top: 8px; font: 600 var(--fs-2)/1.3 var(--f-text); color: var(--ink); }

html.is-shot .skel { animation: none; }
html.is-shot .flt { max-height: none; overflow: visible; }   /* the full-page shot shows the whole filter, not its inner scroll */

@media (max-width: 1100px) {
  .catbody__grid { grid-template-columns: minmax(0, 1fr); }
  .flt { position: static; max-height: none; }
  .chead__txt { max-width: 62%; }
  .lrow { grid-template-columns: 64px minmax(0, 1fr) auto; }
  .lrow .qty { display: none; }
  .lrow .btn { grid-column: 2 / -1; justify-self: start; }
}