/* ============================================================
   Антим Клима — category / subcategory page (v2)
   Loads on top of home.css + v2.css (tokens, chrome, product card,
   chips, buttons). Light frost page, white filter cards. Also styles
   the shop archive (archive-product.php reuses these class names).
   Scoped to .ak. Mobile-first.
   ============================================================ */

/* ---------- page surface ---------- */
.ak.ak-catpage { background: var(--frost); color: var(--ink); }
.ak.ak-catpage .scr { background: var(--frost); color: var(--ink); min-height: 100vh; }

/* title block */
.ak .ak-cathead { margin-top: 24px; }
.ak .ak-cathead h1 { margin-top: 12px; font-size: 44px; line-height: 1; letter-spacing: -.02em; color: var(--ink); }
.ak .ak-catlead { max-width: 60ch; margin-top: 10px; font-size: 16.5px; line-height: 1.5; color: var(--ink-2); }
.ak .ak-catlead b { color: var(--ink); }
.ak .ak-mhead { padding: 14px 16px 0; }
.ak .ak-mhead .ak-crumbs { font-size: 13px; gap: 4px 6px; }
.ak .ak-mhead h1 { margin-top: 8px; font-size: 32px; line-height: 1.05; color: var(--ink); }
.ak .ak-mhead .ak-catlead { margin-top: 6px; font-size: 15px; }

/* ---------- product grids ---------- */
/* minmax(0,…): nowrap card content (badges, prices) must not widen a column past the gutter */
.ak .ak-pgrid-m { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 14px 16px 0; }
.ak .ak-pgrid-m.is-list { grid-template-columns: 1fr; gap: 10px; }
/* narrow 2-up cards (~150px): the spec chips drop their icons and the WiFi
   chip, so BTU + м² share one row and the warranty chip wraps below */
.ak .ak-pgrid-m .pcard { padding: 10px; }
.ak .ak-pgrid-m .pcard .media { padding-top: 26px; }
@container (max-width: 200px) {
  .ak .pcard .pspecs { gap: 3px; }
  .ak .pcard .pspec { padding: 3px 5px; font-size: 11.5px; }
  .ak .pcard .pspec svg, .ak .pcard .pspec.ic { display: none; }
  .ak .pcard .price { font-size: 22px; }
  .ak .pcard .pextra { font-size: 12.5px; gap: 3px 10px; }
  .ak .pcard .add { min-height: 44px; font-size: 15px; }
}
/* list view (mobile): thumbnail pinned left, the card's own flex column (details
   + bottom-aligned Купи via .add margin-top:auto) flows in the right — works
   for any number of card children, no change to the shared card markup */
.ak .ak-pgrid-m.is-list .pcard { padding: 10px 10px 10px 142px; min-height: 150px; }
.ak .ak-pgrid-m.is-list .pcard .media { position: absolute; left: 10px; top: 10px; bottom: 10px; width: 120px; aspect-ratio: auto; display: flex; align-items: center; margin: 0; padding: 0; }
.ak .ak-pgrid-m.is-list .pcard .media .pimg { width: 100%; }
.ak .ak-pgrid-m.is-list .pcard .name { min-height: 0; }
.ak .ak-pgrid-m.is-list .pcard .stockpill { margin-top: 6px; }
.ak .ak-pgrid-m.is-list .pcard .pricerow { margin: 6px 0 8px; }
/* the thumbnail is too small for text pills: icon only (full label stays in aria-label/title) */
.ak .ak-pgrid-m.is-list .pcard .plabel { padding: 4px; }
.ak .ak-pgrid-m.is-list .pcard .plabel-t { display: none; }
/* tablets / landscape phones (page is full width there): 3-up grid (4-up from
   900px), list view in two columns so a row isn't one stretched phone card */
@media (min-width: 600px) {
  .ak .ak-pgrid-m { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .ak .ak-pgrid-m.is-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .ak .ak-pgrid-m { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ak .ak-pgrid-d { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin-top: 18px; }
.ak .ak-pgrid > .ak-empty { grid-column: 1 / -1; }

/* ============================================================
   Section heading (brand strip, template-parts/brand-strip.php)
   ============================================================ */
.ak .ak-sech { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.ak .ak-sech h2 { font-size: 26px; color: var(--ink); }
.ak .ak-sech span { font-size: 15px; font-weight: 700; color: var(--muted); }

/* ============================================================
   Марки — brand filter: strip above the products, phone rail,
   sidebar/drawer card (inc/brands.php, template-parts/brand-strip.php).
   The tile itself (.ak-btile, --ak-logo scaling, selected state) is in
   home.css, shared with the mega menu "Популярни марки" row.
   ============================================================ */

/* strip above the products: two rows, the rest behind "Всички N марки" */
.ak .ak-bstrip { margin-bottom: 22px; }
.ak .ak-bstrip .ak-sech { margin-bottom: 12px; }
.ak .ak-bstrip-all { font-size: 15px; font-weight: 700; color: var(--cold-ink); text-decoration: underline; text-decoration-color: var(--cold-100); text-underline-offset: 4px; text-decoration-thickness: 2px; }
.ak .ak-bstrip-all:hover { color: var(--cold-ink); text-decoration-color: currentColor; }
.ak .ak-bgrid--strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ak .ak-bgrid--strip:not(.is-open) .ak-btile:nth-child(n+9) { display: none; }
@media (min-width: 1240px) {
  .ak .ak-bgrid--strip { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ak .ak-bgrid--strip:not(.is-open) .ak-btile:nth-child(n+9) { display: flex; }
  .ak .ak-bgrid--strip:not(.is-open) .ak-btile:nth-child(n+13) { display: none; }
  .ak .ak-bstrip-more.is-short { display: none; }
}
.ak .ak-bstrip-more { margin-top: 8px; }

/* phone rail under the title (swipe), "Всички" first like the type chips */
.ak .ak-brail-wrap { margin-top: 12px; }
.ak .ak-brail { padding: 2px 16px 4px; gap: 8px; }
.ak .ak-brail .ak-btile { --ak-logo: .8; height: 52px; min-width: 104px; padding: 0 16px; }
.ak .ak-brail .ak-btile-t { font-size: 15px; white-space: nowrap; }
.ak .ak-brail .ak-btile--all { min-width: 0; padding: 0 18px; font-family: var(--ak-font); font-weight: 800; font-size: 15px; color: var(--ink); }
.ak .ak-brail .ak-btile--all.is-on { background: var(--cold-ink); border-color: var(--cold-ink); box-shadow: none; color: #fff; }
/* chevrons + edge fade: the shared .ak-rail-wrap component (home.css) */

/* sidebar / drawer card: 2 columns, 8 then "Покажи още" */
.ak .ak-bgrid--card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ak .ak-bgrid--card .ak-btile { --ak-logo: .8; height: 52px; padding: 0 8px; }
.ak .ak-bgrid--card .ak-btile-t { font-size: 14px; }
.ak .ak-bgrid--card:not(.is-open) .ak-btile:nth-child(n+9) { display: none; }
.ak .ak-bgrid.is-open ~ .ak-showmore .ak-showmore-chev { transform: rotate(180deg); }

/* ============================================================
   Filter cards (desktop sidebar + mobile drawer), collapsible
   ============================================================ */
.ak .ak-fcard { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.ak .ak-fcard-h { width: 100%; min-height: 52px; display: flex; align-items: center; gap: 8px; padding: 14px 16px; background: transparent; color: var(--ink); cursor: pointer; }
.ak .ak-fcard-h:hover { background: var(--frost); color: var(--ink); } /* beat partdo button:hover */
.ak .ak-fcard-t { flex: 1; text-align: left; font-family: var(--ak-font); font-weight: 800; font-size: 16px; color: var(--ink); }
.ak .ak-fcard-chev { color: var(--muted); transition: transform .2s; }
.ak .ak-fcard[data-open="1"] .ak-fcard-chev { transform: rotate(180deg); }
.ak .ak-fcard-b { padding: 4px 16px 16px; border-top: 1px solid var(--line); }
.ak .ak-fcard[data-open="0"] .ak-fcard-b { display: none; }
.ak .ak-fcard-b > :first-child { margin-top: 10px; }
/* hint subtitle — rendered at the TOP of the card body (keeps headers single-line) */
.ak .ak-fcard-hint { display: block; font-weight: 600; font-size: 13.5px; line-height: 1.35; color: var(--muted); margin: 0 0 8px; }
.ak .ak-fcard-badge { font-size: 12.5px; font-weight: 800; color: #fff; background: var(--cold-ink); border-radius: 20px; min-width: 22px; height: 22px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center; }

/* subcategory links */
.ak .ak-sublink { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 10px; border-radius: 10px; font-size: 15px; font-weight: 600; color: var(--ink-2); transition: background-color .14s, color .14s; }
.ak .ak-sublink:hover { background: var(--frost); color: var(--ink); }
.ak .ak-sublink .lbl { flex: 1; }
.ak .ak-sublink .dot { display: none; }
.ak .ak-sublink .cnt { font-size: 13px; font-weight: 700; color: var(--muted); }
.ak .ak-sublink.is-active { background: var(--cold-50); color: var(--cold-ink); font-weight: 800; }
.ak .ak-sublink.is-active .cnt { color: var(--cold-ink); }

/* attribute checkbox rows (Мощност, Марка, generic) */
.ak .ak-checkrow { display: flex; align-items: center; gap: 11px; min-height: 40px; padding: 6px 0; font-size: 15px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.ak .ak-checkrow .box { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid #b9c6d2; background: #fff; color: #fff; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; transition: background-color .14s, border-color .14s; }
.ak .ak-checkrow .box.on { background: var(--cold-ink); border-color: var(--cold-ink); }
.ak .ak-checkrow:hover { color: var(--ink); }
.ak .ak-checkrow:hover .box { border-color: var(--cold-ink); }
.ak .ak-checkrow.is-on { color: var(--ink); font-weight: 700; }
.ak .ak-checkrow .lbl { flex: 1; }
.ak .ak-checkrow .cnt { font-size: 13px; font-weight: 700; color: var(--muted); }

/* Препоръка по площ — room grid */
.ak .ak-roomgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ak .ak-roomb { display: block; text-align: left; border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; background: #fff; transition: border-color .15s, background-color .15s; }
.ak .ak-roomb:hover { border-color: var(--cold); }
.ak .ak-roomb.on { border-color: var(--cold-ink); background: var(--cold-50); }
.ak .ak-roomb .rb-area { display: block; font-family: var(--ak-font-d); font-weight: 800; font-size: 18px; color: var(--ink); }
.ak .ak-roomb .rb-btu { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-top: 1px; }
.ak .ak-roomb.on .rb-btu { color: var(--cold-ink); }

/* Цена — dual-handle range slider + inputs */
.ak .ak-price-form { margin-top: 12px; }
.ak .ak-range { position: relative; height: 6px; border-radius: 99px; background: var(--cold-100); margin: 18px 10px 18px; }
.ak .ak-range-track { position: absolute; inset: 0; border-radius: 99px; }
.ak .ak-range-fill { position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-radius: 99px; background: var(--cold-ink); }
.ak .ak-range input[type="range"] { position: absolute; top: 50%; left: -10px; right: -10px; width: calc(100% + 20px); transform: translateY(-50%); -webkit-appearance: none; appearance: none; background: none; pointer-events: none; margin: 0; height: 24px; }
.ak .ak-range input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--cold-ink); box-shadow: 0 2px 6px rgba(11,42,74,.25); cursor: grab; }
.ak .ak-range input[type="range"]::-moz-range-thumb { pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--cold-ink); box-shadow: 0 2px 6px rgba(11,42,74,.25); cursor: grab; }
.ak .ak-range input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; }
.ak .ak-range input[type="range"]:focus-visible { outline: none; }
.ak .ak-range input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--cold); outline-offset: 2px; }
.ak .ak-range input[type="range"]:focus-visible::-moz-range-thumb { outline: 3px solid var(--cold); outline-offset: 2px; }
.ak .ak-price-inputs { display: flex; gap: 10px; }
.ak .ak-price-field { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; background: var(--frost); border: 1.5px solid var(--line); border-radius: 10px; padding: 0 10px; min-height: 44px; overflow: hidden; }
.ak .ak-price-field:focus-within { border-color: var(--cold); background: #fff; box-shadow: 0 0 0 3px var(--cold-50); }
.ak .ak-price-field span { flex-shrink: 0; font-size: 13px; font-weight: 700; color: var(--muted); }
/* 16px keeps iOS Safari from zooming the viewport when the field is focused. */
.ak .ak-price-field input { flex: 1; min-width: 0; width: 100%; height: auto; margin: 0; padding: 0; border: none; background: transparent; box-shadow: none; color: var(--ink); font: inherit; font-size: 16px; font-weight: 700; outline: none; -moz-appearance: textfield; appearance: textfield; }
.ak .ak-price-field input:focus-visible { outline: none; }
.ak .ak-price-field input::-webkit-outer-spin-button,
.ak .ak-price-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ak .ak-price-apply {
  margin-top: 12px; width: 100%; min-height: 44px; padding: 0 16px; border-radius: var(--r-btn);
  border: 1.5px solid var(--cold-ink); background: #fff; color: var(--cold-ink);
  font-family: var(--ak-font); font-weight: 800; font-size: 15px; cursor: pointer; transition: background-color .15s, color .15s;
}
.ak .ak-price-apply:hover { background: var(--cold-ink); color: #fff; }

/* Марка — search box + collapsible rows + show-more */
.ak .ak-fsearch { position: relative; margin: 2px 0 8px; }
.ak .ak-fsearch input { width: 100%; height: 44px; margin: 0; background: var(--frost); border: 1.5px solid var(--line); border-radius: 10px; padding: 0 12px 0 36px; color: var(--ink); font: inherit; font-size: 16px; font-weight: 500; box-shadow: none; outline: none; transition: border-color .15s, background-color .15s; }
.ak .ak-fsearch input::placeholder { color: var(--muted); }
.ak .ak-fsearch input:focus { border-color: var(--cold); background: #fff; box-shadow: 0 0 0 3px var(--cold-50); }
.ak .ak-fsearch .si { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); display: flex; pointer-events: none; color: var(--muted); }
.ak .ak-frows:not(.is-open) .ak-checkrow:nth-of-type(n+7) { display: none; }
.ak .ak-frows--btu:not(.is-open) .ak-checkrow:nth-of-type(n+5) { display: none; }
.ak .ak-showmore { margin-top: 6px; min-height: 36px; font-size: 14.5px; font-weight: 700; color: var(--cold-ink); display: inline-flex; align-items: center; gap: 5px; padding: 4px 2px; background: none; border: none; cursor: pointer; }
.ak .ak-showmore:hover { text-decoration: underline; background: none; color: var(--cold-ink); }
.ak .ak-showmore-chev { transition: transform .2s; }
.ak .ak-frows.is-open ~ .ak-showmore .ak-showmore-chev { transform: rotate(180deg); }

/* Енергиен клас — colour pills (the badge palette, --ak-en from .ak-energy--sN in home.css) */
.ak .ak-epills { display: flex; flex-wrap: wrap; gap: 6px; }
.ak .ak-epill { flex: 1; min-width: 44px; padding: 9px 4px; border-radius: 8px; font-family: var(--ak-font); font-weight: 800; font-size: 14px; text-align: center; border: 1.5px solid transparent; background: var(--cold-50); color: var(--cold-ink); }
.ak .ak-epill[class*="ak-energy--s"] { background: var(--ak-en); color: #fff; }
.ak .ak-epill:is(.ak-energy--s2, .ak-energy--s3, .ak-energy--s4) { color: #1a1a1a; }
.ak .ak-epill.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink); }

/* Функции / Оферти — toggle chips */
.ak .ak-tgrid { display: flex; flex-wrap: wrap; gap: 8px; }
.ak .ak-tchip { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; font-size: 14.5px; font-weight: 700; color: var(--ink-2); cursor: pointer; transition: border-color .14s, background-color .14s, color .14s; }
.ak .ak-tchip:hover { border-color: var(--cold); color: var(--ink); }
.ak .ak-tchip.on { border-color: var(--cold-ink); background: var(--cold-50); color: var(--cold-ink); }
.ak .ak-tchip .cnt { font-size: 12.5px; font-weight: 700; color: var(--muted); }

/* Наличност — status rows, same icons as the card stock line
   (green check = в наличност, amber clock = очакван внос) */
.ak .ak-strows { display: flex; flex-direction: column; gap: 8px; }
.ak .ak-strow { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 12px; border-radius: 10px; border: 1.5px solid var(--line); background: #fff; font-size: 15px; font-weight: 700; color: var(--ink-2); transition: border-color .14s, background-color .14s, color .14s; }
.ak .ak-strow .ic { display: inline-flex; flex: 0 0 auto; }
.ak .ak-strow.is-in .ic { color: var(--ok); }
.ak .ak-strow.is-order .ic { color: var(--wait); }
.ak .ak-strow .lbl { flex: 1; }
.ak .ak-strow .tick { display: inline-flex; }
.ak .ak-strow:hover { color: var(--ink); border-color: #b9c6d2; }
.ak .ak-strow.is-in.on { border-color: var(--ok); background: var(--ok-50); color: var(--ok-ink); }
.ak .ak-strow.is-in.on .tick { color: var(--ok); }
.ak .ak-strow.is-order.on { border-color: var(--wait); background: var(--wait-50); color: var(--wait); }
.ak .ak-strow.is-order.on .tick { color: var(--wait); }

/* Цвят — colour swatches */
.ak .ak-swgrid { display: flex; flex-wrap: wrap; gap: 9px; }
.ak .ak-swatch { width: 32px; height: 32px; border-radius: 8px; position: relative; border: 1.5px solid var(--line); }
.ak .ak-swatch.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--cold-ink); }
.ak .ak-swatch .sw-ck { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }

/* ============================================================
   Desktop layout: sticky sidebar + content
   ============================================================ */
.ak .ak-catlayout { margin-top: 24px; display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: 24px; align-items: start; padding-bottom: 10px; }
.ak .ak-side { position: sticky; top: 70px; display: flex; flex-direction: column; gap: 12px; max-height: calc(100vh - 86px); overflow-y: auto; overflow-x: hidden; padding: 2px 6px 2px 2px; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: #c3cfda transparent; }
.ak .ak-side::-webkit-scrollbar { width: 7px; }
.ak .ak-side::-webkit-scrollbar-thumb { background: #c3cfda; border-radius: 9px; }
/* scrolling flex columns must NOT compress their children — else .ak-fcard
   (overflow:hidden) clips the squeezed card content. Let the container scroll. */
.ak .ak-side > *,
.ak .ak-drawer-body > * { flex-shrink: 0; }

/* sidebar header bar (Филтри + count + clear) */
.ak .ak-filtbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 2px 4px; }
.ak .ak-filtbar .lab { font-family: var(--ak-font-d); font-weight: 800; font-size: 24px; color: var(--ink); line-height: 1.1; }
.ak .ak-filtbar .lab small { display: block; font-family: var(--ak-font); font-weight: 600; color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.ak .ak-filtbar .clr { font-size: 14px; font-weight: 700; color: var(--cold-ink); display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 0 8px; border-radius: 8px; }
.ak .ak-filtbar .clr:hover { background: var(--cold-50); }
.ak .ak-filtbar .clr.off { color: var(--muted); opacity: .6; pointer-events: none; }

/* sidebar active-filter chips */
.ak .ak-fchips { display: flex; flex-wrap: wrap; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding: 12px; }
.ak .ak-fchip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; background: var(--cold-50); border: 1px solid var(--cold-100); color: var(--cold-ink); border-radius: 999px; padding: 0 6px 0 12px; font-size: 13.5px; font-weight: 700; }
.ak .ak-fchip .x { display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; border-radius: 50%; }
.ak .ak-fchip:hover .x { background: var(--cold-ink); color: #fff; }

/* ============================================================
   Toolbar (result count, sort, per-page, view toggle)
   ============================================================ */
.ak .ak-toolbar { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 18px; flex-wrap: wrap; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); }
.ak .ak-toolbar-sp { flex: 1; }
.ak .ak-rescount { font-size: 15px; color: var(--ink-2); font-weight: 600; }
.ak .ak-rescount b { color: var(--ink); }
.ak .ak-sortform { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
.ak .ak-select { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; background: var(--frost); border: 1.5px solid var(--line); border-radius: 10px; padding: 0 12px; font-size: 15px; color: var(--muted); font-weight: 600; cursor: pointer; white-space: nowrap; }
.ak .ak-select > span { flex-shrink: 0; }
.ak .ak-select > svg { flex-shrink: 0; color: var(--ink-2); pointer-events: none; }
.ak .ak-select select { appearance: none; -webkit-appearance: none; -moz-appearance: none; height: auto; margin: 0; background: transparent; border: none; box-shadow: none; color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; outline: none; padding: 0; max-width: 200px; }
.ak .ak-select select option { color: var(--ink); background: #fff; }
.ak .ak-select select:focus, .ak .ak-select select:focus-visible { outline: none; box-shadow: none; }
.ak .ak-select:focus-within { border-color: var(--cold); background: #fff; box-shadow: 0 0 0 3px var(--cold-50); }
.ak .ak-sort-go { margin-left: 6px; min-height: 40px; padding: 0 14px; border-radius: 10px; background: var(--cold-ink); color: #fff; font-weight: 800; cursor: pointer; }
.ak .ak-sort-go:hover { background: var(--night); color: #fff; }
.ak .ak-viewtoggle { display: flex; gap: 6px; }
.ak .ak-viewbtn { width: 44px; height: 44px; padding: 0; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1.5px solid var(--line); color: var(--ink-2); cursor: pointer; }
.ak .ak-viewbtn:hover { background: #fff; border-color: var(--ink-2); color: var(--ink); } /* beat partdo button:hover */
.ak .ak-viewbtn.on, .ak .ak-viewbtn.on:hover { background: var(--cold-50); border-color: var(--cold-ink); color: var(--cold-ink); }
.ak .ak-viewbtn svg { stroke: currentColor; }

/* list view (desktop): reflow each card into a horizontal row via grid placement
   (no markup change to the shared product card). */
.ak .ak-pgrid-d.is-list { grid-template-columns: 1fr; gap: 12px; }
.ak .ak-pgrid-d.is-list .pcard { display: grid; grid-template-columns: 200px minmax(0, 1fr) 240px; grid-auto-rows: auto; column-gap: 24px; row-gap: 2px; align-items: start; padding: 14px 18px; }
.ak .ak-pgrid-d.is-list .pcard .media { grid-column: 1; grid-row: 1 / span 6; margin: 0; aspect-ratio: 5 / 4; padding: 26px 6px 6px; }
.ak .ak-pgrid-d.is-list .pcard > :not(.media):not(.pricerow):not(.pextra):not(.add) { grid-column: 2; }
.ak .ak-pgrid-d.is-list .pcard .name { min-height: 0; -webkit-line-clamp: 2; }
.ak .ak-pgrid-d.is-list .pcard .pricerow { grid-column: 3; grid-row: 1; margin: 0; padding-top: 0; }
.ak .ak-pgrid-d.is-list .pcard .pextra { grid-column: 3; grid-row: 2 / span 2; margin: 4px 0 10px; }
.ak .ak-pgrid-d.is-list .pcard .add { grid-column: 3; grid-row: 4; align-self: start; }

/* ============================================================
   Active-filter chips (above the grid)
   ============================================================ */
.ak .ak-activechips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ak-desktop .ak-activechips { margin-top: 14px; }
.ak .ak-mobile .ak-activechips, .ak.ak-mobile .ak-activechips { padding: 12px 16px 0; }
.ak .ak-activechip { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; background: var(--cold-50); border: 1px solid var(--cold-100); color: var(--cold-ink); border-radius: 999px; padding: 0 12px 0 14px; font-size: 14px; font-weight: 700; transition: background-color .14s, border-color .14s; }
.ak .ak-activechip:hover { border-color: var(--cold-ink); }
.ak .ak-activechip svg { stroke: currentColor; }
.ak .ak-clearchip { display: inline-flex; align-items: center; min-height: 36px; font-size: 14px; font-weight: 700; color: var(--cold-ink); padding: 0 6px; text-decoration: underline; text-decoration-color: var(--cold-100); text-underline-offset: 3px; }
.ak .ak-clearchip:hover { text-decoration-color: currentColor; }

/* ============================================================
   Pagination (styles paginate_links .page-numbers)
   ============================================================ */
.ak .ak-pagination { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 32px; }
.ak .ak-pagination .page-numbers { min-width: 44px; height: 44px; padding: 0 12px; border-radius: 10px; background: #fff; border: 1.5px solid var(--line); color: var(--ink); font-family: var(--ak-font); font-weight: 700; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; transition: border-color .14s, color .14s; }
.ak .ak-pagination a.page-numbers:hover { border-color: var(--cold-ink); color: var(--cold-ink); }
.ak .ak-pagination .page-numbers.current { background: var(--cold-ink); border-color: var(--cold-ink); color: #fff; }
.ak .ak-pagination .page-numbers.dots { background: transparent; border-color: transparent; color: var(--muted); }
.ak .ak-pagination svg { stroke: currentColor; }
.ak .ak-mpag { padding: 24px 16px 8px; }

/* ============================================================
   Category text (term description) below the products — page 1, unfiltered
   ============================================================ */
.ak .ak-catdesc { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
.ak-mobile .ak-catdesc { margin: 28px 16px 8px; padding-top: 22px; }
.ak .ak-catdesc-body { max-width: 75ch; font-size: 16px; line-height: 1.65; color: var(--ink-2); }
.ak .ak-catdesc.js-fold .ak-catdesc-body.is-folded:not(.is-open) { max-height: 7.5em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 35%, transparent); mask-image: linear-gradient(#000 35%, transparent); } /* preview: first heading + a line or two */
.ak .ak-catdesc-body > :first-child { margin-top: 0; }
.ak .ak-catdesc-body h2 { margin: 1.6em 0 .5em; font-family: var(--font-head); font-size: 22px; line-height: 1.25; color: var(--ink); }
.ak .ak-catdesc-body h3, .ak .ak-catdesc-body h4 { margin: 1.4em 0 .4em; font-size: 18px; line-height: 1.3; color: var(--ink); }
.ak .ak-catdesc-body p { margin: 0 0 .9em; }
.ak .ak-catdesc-body ul, .ak .ak-catdesc-body ol { margin: 0 0 1em; padding-left: 1.3em; }
.ak .ak-catdesc-body ul { list-style: disc; }
.ak .ak-catdesc-body ol { list-style: decimal; }
.ak .ak-catdesc-body li { margin: .3em 0; }
.ak .ak-catdesc-body strong, .ak .ak-catdesc-body b { color: var(--ink); }
.ak .ak-catdesc-body a { color: var(--cold-ink); text-decoration: underline; text-decoration-color: var(--cold-100); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.ak .ak-catdesc-body a:hover { text-decoration-color: currentColor; }
.ak .ak-catdesc-body table { display: block; overflow-x: auto; border-collapse: collapse; margin: 0 0 1em; font-size: 15px; }
.ak .ak-catdesc-body th, .ak .ak-catdesc-body td { padding: 8px 12px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.ak .ak-catdesc-body th { background: var(--surface-2); color: var(--ink); }
.ak .ak-catdesc-body.is-open ~ .ak-showmore .ak-showmore-chev { transform: rotate(180deg); }
.ak .ak-catdesc:not(.js-fold) .ak-catdesc-more { display: none; } /* no JS: the full text shows, no dead button */
.ak-mobile .ak-catdesc-body { font-size: 15.5px; }
.ak-mobile .ak-catdesc-body h2 { font-size: 20px; }

/* ============================================================
   Empty state
   ============================================================ */
.ak .ak-empty { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding: 44px 24px; text-align: center; }
.ak .ak-empty-ic { margin: 0 auto 14px; width: 56px; height: 56px; border-radius: 14px; }
.ak .ak-empty-t { font-family: var(--ak-font-d); font-weight: 800; font-size: 26px; color: var(--ink); }
.ak .ak-empty-d { color: var(--ink-2); font-size: 16px; margin-top: 6px; }
.ak .ak-empty-acts { display: flex; gap: 10px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }

/* ============================================================
   MOBILE — sub-category chips, filter/sort bar, drawer
   ============================================================ */
.ak .ak-subchips-wrap { margin-top: 12px; } /* chevrons + edge fade: the shared .ak-rail-wrap component (home.css) */
.ak .ak-subchips { padding: 2px 16px 4px; gap: 8px; }
.ak .ak-subchips .chip { min-height: 40px; padding: 0 14px; background: #fff; border: 1.5px solid var(--line); color: var(--ink); font-size: 14.5px; font-weight: 700; }
.ak .ak-subchips .chip .n { color: var(--muted); font-weight: 700; }
.ak .ak-subchips .chip.on { background: var(--cold-ink); border-color: var(--cold-ink); color: #fff; }
.ak .ak-mbar { display: flex; align-items: center; gap: 6px; padding: 14px 16px 0; }
.ak .ak-mbtn { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-btn); padding: 0 10px; color: var(--ink); font-family: var(--ak-font); font-weight: 800; font-size: 15.5px; white-space: nowrap; cursor: pointer; }
.ak .ak-mbtn:hover { background: #fff; border-color: var(--ink-2); color: var(--ink); } /* beat partdo button:hover */
.ak .ak-mbtn svg { color: var(--cold-ink); }
.ak .ak-mbtn-badge { background: var(--cold-ink); color: #fff; border-radius: 999px; min-width: 20px; height: 20px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
.ak .ak-mobile .ak-viewbtn, .ak.ak-mobile .ak-viewbtn { flex: 0 0 auto; width: 44px; height: 46px; }
/* 360px phones: icon out so "Филтри и сортиране" + the badge + the view toggle fit one row */
@media (max-width: 379px) {
  .ak .ak-mbtn > svg { display: none; }
}
.ak .ak-mcount { padding: 10px 16px 0; font-size: 14px; color: var(--muted); font-weight: 600; }
.ak .ak-mcount b { color: var(--ink); }

.ak .ak-drawer[hidden] { display: none; }
.ak .ak-drawer { position: fixed; inset: 0; z-index: 1000; }
.ak .ak-drawer-backdrop { position: absolute; inset: 0; background: rgba(11, 42, 74, .5); }
.ak .ak-drawer-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 90vh; max-height: 90dvh; display: flex; flex-direction: column; background: var(--frost); color: var(--ink); border-radius: 20px 20px 0 0; box-shadow: 0 -16px 50px rgba(11, 42, 74, .3); animation: akDrawerUp .28s ease; }
@keyframes akDrawerUp { from { transform: translateY(100%); } to { transform: none; } }
.ak .ak-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 12px 12px 20px; background: #fff; border-radius: 20px 20px 0 0; font-family: var(--ak-font-d); font-weight: 800; font-size: 22px; color: var(--ink); border-bottom: 1px solid var(--line); }
.ak .ak-drawer-x { width: 44px; height: 44px; padding: 0; border-radius: 999px; background: var(--frost); color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ak .ak-drawer-x:hover { background: var(--line); color: var(--ink); } /* beat partdo button:hover */
.ak .ak-drawer-x svg { stroke: currentColor; }
.ak .ak-drawer-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 14px 16px 8px; display: flex; flex-direction: column; gap: 12px; }
.ak .ak-drawer-foot { display: flex; align-items: center; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); }
.ak .ak-drawer-clear { flex: 0 0 auto; }
.ak .ak-drawer-apply { flex: 1; min-height: 50px; padding: 0 16px; border-radius: var(--r-btn); background: var(--cold-ink); color: #fff; font-family: var(--ak-font); font-weight: 800; font-size: 16px; cursor: pointer; }
.ak .ak-drawer-apply:hover { background: var(--night); color: #fff; } /* beat partdo button:hover */

/* in the mobile drawer the sort form stacks full-width */
.ak .ak-drawer .ak-sortform { flex-direction: column; align-items: stretch; gap: 10px; }
.ak .ak-drawer .ak-select { justify-content: space-between; background: #fff; }
.ak .ak-drawer .ak-select select { max-width: none; flex: 1; text-align: right; }
.ak .ak-drawer .ak-select select:not(:focus-visible) { box-shadow: none; } /* Partdo's select shadow drew a box inside the pill */

/* landscape phones: a 390px-tall sheet left ~210px for the filters — tighten
   head + foot so the scrolling body gets most of the height */
@media (orientation: landscape) and (max-height: 500px) {
  .ak .ak-drawer-panel { max-height: calc(100dvh - 12px); }
  .ak .ak-drawer-head { padding: 6px 12px 6px 20px; font-size: 19px; }
  .ak .ak-drawer-foot { padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); }
  .ak .ak-drawer-apply { min-height: 44px; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width: 1024px) and (max-width: 1240px) {
  .ak .ak-catlayout { grid-template-columns: 256px minmax(0, 1fr); gap: 20px; }
  .ak .ak-pgrid-d { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
  .ak .ak-roomb { padding: 9px 10px; }
  .ak .ak-roomb .rb-btu { font-size: 12.5px; white-space: nowrap; }
  .ak .ak-cathead h1 { font-size: 38px; }
  .ak .ak-pgrid-d.is-list .pcard { grid-template-columns: 170px minmax(0, 1fr) 210px; }
}