/* Abordazh header — redesign per Illustrator spec (1320 container, 3×72 bands).
   Colors, sizes and radii taken from the exported SVG. Icons are inline SVG (no font FOUT). */

/* design tokens exposed globally so catalog/product-list styles can use them too */
:root {
  --abz-panel: #051e05; --abz-yellow: #ffd645; --abz-call: #d2dcdc;
  --abz-ink: #001400; --abz-line: #d2dcdc; --abz-radius: 4px;
}
.abz-header {
  --abz-panel: #051e05;      /* main bar background */
  --abz-yellow: #ffd645;     /* Каталог / accent */
  --abz-call: #d2dcdc;       /* "Зателефонуйте мені" */
  --abz-ink: #001400;        /* dark text / logo */
  --abz-ph: #505050;         /* search placeholder */
  --abz-crumb: #283c28;      /* active breadcrumb */
  --abz-line: #d2dcdc;
  --abz-radius: 4px;
  position: relative;
  font-family: var(--font-body, "IBM Plex Sans", system-ui, sans-serif);
  color: var(--abz-ink);
}
.abz-header * { box-sizing: border-box; }
.abz-header a { text-decoration: none; color: inherit; }
.abz-header button { cursor: pointer; }

/* inline icons */
.abz-ic { display: inline-block; flex: none; width: 24px; height: 24px; fill: currentColor; vertical-align: middle; }
.abz-ic svg { display: block; width: 100%; height: 100%; fill: currentColor; }

/* container = 1320 centered, 20px gutters */
.abz-wrap { max-width: 1320px; margin: 0 auto; padding-inline: 20px; }

/* Bootstrap .container: drop the stepped responsive max-widths (540/720/960/1140) — fluid below
   the desktop breakpoint — and cap it at 1320px on desktop (matches .abz-wrap). */
.container { max-width: none; }
@media (min-width: 992px) { .container { max-width: 1320px; } }

/* ---------------- Sticky footer ----------------
   Pin #footer to the bottom of the viewport on short pages. <body> stacks its children
   in a column at least one screen tall and #wrapper (the <main>) absorbs the slack, so
   the footer never floats mid-screen. Bootstrap sets border-box globally, so the mobile
   bar padding on <body> is counted inside the 100vh/100dvh box. The push transform on
   #wrapper/#footer is only visual and does not affect this flex layout. */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
#wrapper { flex: 1 0 auto; }
#footer { flex-shrink: 0; }

/* ---------------- TOP BAR (72px, white) ---------------- */
.abz-topbar { background: #fff; }
.abz-topbar .abz-wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; }
.abz-contacts { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 24px; color: var(--abz-ink); flex-wrap: wrap; }
.abz-contacts .sep { color: #9aa39a; }
.abz-contacts a.phone { font-weight: 700; color: var(--abz-ink); }
.abz-contacts .hours b { font-weight: 700; }
.abz-contacts .hours { color: var(--abz-ink); }

.abz-util { display: flex; align-items: center; }
.abz-util .abz-sep { width: 1px; height: 20px; background: #e2e6e2; margin-inline: 8px; }
.abz-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; background: transparent; border: 0;
  font-size: 14px; line-height: 24px; font-weight: 500; color: var(--abz-ink); border-radius: var(--abz-radius); }
.abz-chip .abz-ic { width: 20px; height: 20px; }
.abz-chip:hover { background: #f1f4f1; }

/* topbar dropdowns (language / currency) */
.abz-dd { position: relative; }
/* while open, lift the whole dropdown into its own stacking context above the rest of the
   header (call button, catalog, search) and page content — at every breakpoint. Its menu has
   a transform (own context), so a z-index on the menu alone isn't enough. */
.abz-dd.open { z-index: 90; }
.abz-dd__menu { position: absolute; top: 100%; left: 0; right: 0; min-width: 100%; background: #fff;
  border: 1px solid var(--abz-line); box-shadow: 0 14px 30px rgba(0,0,0,.12); padding: 4px; border-radius: var(--abz-radius); z-index: 80;
  opacity: 0; visibility: hidden; transform: translateY(-10px); pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, visibility .16s; }
.abz-dd.open .abz-dd__menu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.abz-dd.open > .abz-chip { background: #f1f4f1; }
.abz-dd.open > .abz-chip .abz-caret { transform: rotate(180deg); }
.abz-caret { transition: transform .16s ease; }
.abz-dd__menu a { display: block; padding: 8px 12px; font-size: 14px; line-height: 24px; color: var(--abz-ink); border-radius: var(--abz-radius); white-space: nowrap; }
.abz-dd__menu a:hover { background: #f1f4f1; }
.abz-dd__menu a.active { color: #0a7d0a; font-weight: 700; }

/* sign-in */
.abz-signin .abz-chip { gap: 8px; }

/* ---------------- MAIN BAR (72px, dark panel) ---------------- */
.abz-mainbar { background: var(--abz-panel); position: relative; }
.abz-mainbar .abz-wrap { display: flex; align-items: center; gap: 20px; min-height: 72px; }

/* logo — two layers: dark (overhangs onto white bands) + white (clipped to the 72px panel) */
.abz-brand { position: relative; flex: none; width: 290px; height: 72px; align-self: stretch; margin-right: 20px; }
.abz-brand__layer { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; }
.abz-brand__layer img { position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%) rotate(-5deg); transform-origin: center; height: 81px; width: auto; display: block; }
.abz-brand__white { overflow: hidden; }                 /* clip to the 72px band */
.abz-brand__white img { filter: invert(1) brightness(1.06); }  /* black logo -> white on panel */
/* dark layer keeps the logo black; it shows only where it overhangs onto the white top/breadcrumb bands */

/* Каталог button (yellow) */
.abz-catbtn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; flex: none;
  height: 48px; min-width: 130px; padding: 0 18px; background: var(--abz-yellow); color: var(--abz-ink);
  border: 0; border-radius: var(--abz-radius); font-size: 18px; font-weight: 700; line-height: 24px;
  position: relative; z-index: 61; transition: filter .12s; }
.abz-catbtn:hover { filter: brightness(.95); }
.abz-catbtn .abz-ic-close { display: none; }
.abz-catbtn.is-open .abz-ic-open { display: none; }
.abz-catbtn.is-open .abz-ic-close { display: inline-block; }

/* Search (white, flexible) */
/* search and the call button share the free space 1:1 (flex-basis 0), so they shrink and grow
   together (proportionally) as the window resizes. The call button is capped at its text width
   (max-content) below so it never grows past its label; the search takes whatever is left. */
.abz-search { flex: 1 1 0; min-width: 0; }
/* the ps_searchbar widget ships a min-width (~304px) on .ps-searchbar; clear it so the whole
   search shrinks with its flex track (otherwise it overflows and overlaps the call button
   at the 992 min desktop width) and grows again as the window widens. */
.abz-search .ps-searchbar { width: 100%; min-width: 0; margin: 0; }
.abz-search .ps-searchbar__form { display: flex; align-items: center; height: 48px; background: #fff;
  border-radius: var(--abz-radius); overflow: hidden; position: relative; padding-inline: 10px; gap: 6px; }
.abz-search .ps-searchbar__magnifier { position: static !important; transform: none !important; inset: auto; order: 0; margin: 0;
  width: 24px; height: 24px; background: transparent; color: var(--abz-ink); border: 0; padding: 0; display: grid; place-items: center; }
.abz-search .ps-searchbar__magnifier svg, .abz-search .ps-searchbar__magnifier .abz-ic { width: 24px; height: 24px; }
.abz-search .ps-searchbar__input { order: 1; flex: 1 1 auto; min-width: 0; border: 0; outline: 0; height: 100%; padding: 0;
  font-size: 16px; line-height: 24px; color: var(--abz-ink); background: transparent; box-shadow: none;
  text-overflow: ellipsis; }   /* ellipsis on the placeholder (and value) when it overflows the field */
.abz-search .ps-searchbar__input::placeholder { color: var(--abz-ph); }
.abz-search .ps-searchbar__clear { position: static !important; transform: none !important; order: 2; margin: 0; }
.abz-search .ps-searchbar__dropdown { position: absolute; z-index: 65; left: 0; right: 0; top: 100%; background: #fff;
  border: 1px solid var(--abz-line); box-shadow: 0 14px 30px rgba(0,0,0,.14); }

/* Зателефонуйте мені — shrinks with the search (flex-basis 0, 1:1), but never grows past its
   own text (max-width: max-content). The icon stays put; the label stays on one line and gets
   an ellipsis when the button is too narrow for it. */
.abz-callbtn { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  flex: 1 1 0; min-width: 0; max-width: max-content; overflow: hidden;
  height: 48px; padding: 0 20px; background: var(--abz-call); color: var(--abz-ink); border: 0; border-radius: var(--abz-radius);
  font-size: 16px; font-weight: 700; line-height: 24px; transition: filter .12s; }
.abz-callbtn:hover { filter: brightness(.96); }
.abz-callbtn .abz-ic { flex: none; }
.abz-callbtn__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Cart */
.abz-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.abz-actions .ps-shoppingcart, .abz-actions .header-block { position: relative; }
.abz-actions .header-block__action-btn { display: inline-flex; align-items: center; justify-content: center; color: #f5fafa; position: relative; padding: 0 24px 0 0; }
.abz-actions .header-block__title { display: none !important; }
.abz-actions .header-block__icon,
.abz-actions .abz-ic { width: 48px; height: 48px; color: #f5fafa; }
.abz-actions .header-block__badge {
  position: absolute; min-width: 24px; height: 24px; padding: 0 5px; border-radius: 999px;
  background: var(--abz-yellow); color: var(--abz-ink); display: grid; place-items: center;
  font-family: var(--font-mono, "IBM Plex Mono", ui-monospace, monospace); font-size: 12px; font-weight: 600; line-height: 1; }

/* ---------------- BREADCRUMBS (72px, white) ---------------- */
/* hide the theme's own breadcrumb — we render our own band in header.tpl */
.breadcrumb, nav.breadcrumb, ol.breadcrumb { display: none !important; }
/* Home promo bar — same 48px white band as the breadcrumbs, in place of them on the home page.
   Background is white by default; the abzpromobar module can override it per-message. */
.abz-promobar { background: #fff; border-bottom: 1px solid var(--bs-gray-300); }
/* one-line 48px band at every width: the message never wraps and gets an ellipsis if too long
   (keeps a fixed height so the bar can sit in the sticky header stack on mobile) */
.abz-promobar .abz-wrap { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; flex-wrap: nowrap; }
.abz-promobar__msg { margin: 0; font-size: 14px; line-height: 1; color: var(--abz-ink); text-align: center;
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.abz-promobar__img { height: 28px; width: auto; flex: none; }
.abz-promobar a { color: inherit; text-decoration: underline; }

.abz-crumbs { background: #fff; border-bottom: 1px solid var(--bs-gray-300); }
/* breadcrumbs stay on ONE line; if they overflow, the band scrolls horizontally (touch/drag)
   and the scrollbar is hidden (no visible track) */
.abz-crumbs .abz-wrap { display: flex; align-items: center; gap: 10px; min-height: 48px;
  flex-wrap: nowrap; white-space: nowrap; overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none;
  font-size: 14px; line-height: 24px; }
.abz-crumbs .abz-wrap::-webkit-scrollbar { display: none; }
.abz-crumbs .abz-wrap > * { flex: none; }   /* items don't shrink — they overflow and scroll */
.abz-crumbs a { color: var(--abz-crumb); }
.abz-crumbs a:hover { color: var(--abz-ink); text-decoration: underline; }
.abz-crumbs .sep { color: #b9c1b9; }
.abz-crumbs .current { color: var(--abz-ink); }

/* ---------------- mega menu + scrim (kept from phase 2, restyled to panel) ---------------- */
.abz-header { z-index: auto; }
/* Scrim: keep the element fully opaque and fade the TINT via background-color (not element
   opacity). An opacity animation makes the browser defer the backdrop-filter blur until it
   settles, so the dim used to snap in only after the panel finished sliding. Fading the
   background-color keeps the blur rendered from the first frame, in sync with the panel (.28s). */
.abz-scrim { position: fixed; inset: 0; z-index: 50; background-color: rgba(4,10,4,0);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  visibility: hidden; will-change: background-color;
  transition: background-color .28s ease, visibility .28s ease; }
.abz-scrim.is-open { background-color: rgba(4,10,4,.5); visibility: visible; }
.abz-mega { position: absolute; left: 0; right: 0; z-index: 60; max-width: 1320px; margin-inline: auto;
  background: #fff; border: 3px solid var(--abz-yellow); border-radius: var(--abz-radius);
  box-shadow: 0 22px 48px rgba(0,0,0,.28); overflow: hidden;
  opacity: 0; visibility: hidden; transform: translateY(-10px); pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, visibility .16s; }
.abz-mega.is-open { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.abz-mega__inner { display: grid; grid-template-columns: 330px 1fr; min-height: 420px; }

/* left rail — grey panel, 48px text-only rows, active = inset light-yellow highlight */
.abz-mega__rail { position: relative; background: #f8f8f8; border-right: 1px solid #dcdcdc; padding: 24px 0; max-height: 72vh; overflow-y: auto; }
/* frame lines: above the first category and below the last one (inset 20px) */
.abz-mega__rail::before, .abz-mega__rail::after { content: ""; position: absolute; left: 20px; right: 20px; height: 1px; background: #dcdcdc; z-index: 1; pointer-events: none; transition: opacity .12s; }
.abz-mega__rail::before { top: 24px; }
.abz-mega__rail::after { bottom: 24px; }
/* hide the top frame when the first category is hovered/focused/active, and the bottom
   frame when the last one is — same behaviour as the inner dividers */
.abz-mega__rail:has(.abz-mega__railbtn:first-child:hover)::before,
.abz-mega__rail:has(.abz-mega__railbtn:first-child:focus)::before,
.abz-mega__rail:has(.abz-mega__railbtn:first-child.active)::before { opacity: 0; }
.abz-mega__rail:has(.abz-mega__railbtn:last-child:hover)::after,
.abz-mega__rail:has(.abz-mega__railbtn:last-child:focus)::after,
.abz-mega__rail:has(.abz-mega__railbtn:last-child.active)::after { opacity: 0; }
.abz-mega__railbtn { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; height: 48px;
  padding: 0 25px 0 21px; background: transparent; border: 0; border-radius: 0; text-align: left; cursor: pointer;
  font-family: var(--font-body, "IBM Plex Sans", system-ui, sans-serif); font-size: 16px; font-weight: 700; line-height: 24px; color: #374b37; }
.abz-mega__railbtn::before { content: ""; position: absolute; inset: 0 20px; border-radius: var(--abz-radius); background: transparent; z-index: 0; }
/* divider between rows, inset 20px; first row has no top border, last no bottom border */
.abz-mega__railbtn::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: 0; height: 1px; background: #dcdcdc; transition: opacity .12s; }
.abz-mega__railbtn:last-child::after { display: none; }
/* on hover/active hide the row's own bottom divider AND the previous row's (i.e. the
   lines that would touch the top and bottom of the inset highlight) */
.abz-mega__railbtn:hover::after,
.abz-mega__railbtn.active::after,
.abz-mega__railbtn:has(+ .abz-mega__railbtn:hover)::after,
.abz-mega__railbtn:has(+ .abz-mega__railbtn.active)::after { opacity: 0; }
.abz-mega__railbtn:hover::before { background: #fff4d1; }   /* lighter yellow — inset visible on hover */
.abz-mega__railbtn.active { color: var(--abz-panel); }
.abz-mega__railbtn.active::before { background: #ffeaa2; }
.abz-mega__railname { position: relative; z-index: 1; flex: 1 1 auto; padding-left: 20px; }
.abz-mega__chev { position: relative; z-index: 1; width: 20px; height: 20px; margin-left: auto; flex: none; color: currentColor; }
.abz-mega__chev svg { display: block; width: 100%; height: 100%; fill: currentColor; }

/* right panel — white content: 24px title + 16px grey desc + 16px bold link columns + grey CTA */
.abz-mega__panels { background: #fdfdfd; padding: 24px 20px; max-height: 72vh; overflow-y: auto; }
.abz-mega__panel { display: none; } .abz-mega__panel.active { display: block; }
.abz-mega__head { margin-bottom: 6px; }
.abz-mega__head h3 { margin: 0; font-family: var(--font-body, "IBM Plex Sans", system-ui, sans-serif);
  font-size: 24px; font-weight: 700; line-height: 32px; color: var(--abz-panel); }
.abz-mega__desc { margin: 0 0 16px; font-size: 16px; font-weight: 400; line-height: 24px; color: #646464; max-width: 900px; }
.abz-mega__cols { columns: 4 200px; column-gap: 20px; }
/* subcategory rows: line above each (incl. the first row) + below the last; -1px collapses doubles */
.abz-mega__cols a { display: block; break-inside: avoid; padding: 12px 0; margin-top: -1px;
  border-top: 1px solid #dcdcdc; border-bottom: 1px solid #dcdcdc;
  font-family: var(--font-body, "IBM Plex Sans", system-ui, sans-serif); font-size: 16px; font-weight: 700; line-height: 24px; color: #374b37; }
.abz-mega__cols a:hover { color: var(--abz-panel); }
.abz-mega__all { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 20px; margin-top: 20px;
  background: var(--abz-call); color: var(--abz-ink); border-radius: var(--abz-radius);
  font-size: 16px; font-weight: 700; line-height: 24px; }
.abz-mega__all:hover { filter: brightness(.96); }
.abz-mega__all .abz-ic { width: 20px; height: 20px; }

/* mobile shell markup is hidden on desktop; switched on at ≤ sm below */
.abz-mbars { display: none; }

/* ---------------- responsive ---------------- */
@media (max-width: 991.98px) {
  .abz-topbar { display: none; }
  .abz-mainbar .abz-wrap { min-height: 64px; gap: 12px; }
  .abz-brand { width: 190px; height: 64px; }
  .abz-brand__layer img { height: 84px; }
  .abz-catbtn { min-width: 0; height: 44px; padding: 0 14px; font-size: 16px; }
  .abz-catbtn .abz-catbtn__label { display: none; }
  .abz-callbtn .abz-callbtn__label { display: none; }
  .abz-callbtn { padding: 0 12px; height: 44px; }
  .abz-search .ps-searchbar__form { height: 44px; }
  .abz-actions .header-block__icon, .abz-actions .abz-ic { width: 40px; height: 40px; }
  .abz-mega { max-width: none; }
  .abz-mega__inner { grid-template-columns: 1fr; }
  .abz-mega__rail { border-right: 0; border-bottom: 1px solid #eee; max-height: none; }
  .abz-mega__panels { max-height: none; }
}

/* ==================== MOBILE SHELL (≤ lg / 991.98px) ====================
   The burger shell (fixed top bars + bottom bar + push drawers + search modal) runs all
   the way up to lg; the real desktop header (with the mega menu) only appears at ≥992px.
   The desktop header bars and mega are hidden here; real widgets are relocated into the
   mobile slots by JS. Bar heights match the desktop everywhere: top bar 48, main bar 72,
   bottom bar 72 (and the promo bar / breadcrumbs stay 48 from the base rules). Phone values
   (2-line schedule, 46px logo, switchers-in-drawer) are the defaults; the bands below surface
   the switchers into the top bar (≥576) and grow the logo + collapse the schedule (≥768). */
@media (max-width: 991.98px) {
  :root {
    --abz-drawer-w: 320px;
    --abz-topbar-h: 48px;
    --abz-mainbar-h: 72px;
    --abz-bottombar-h: 72px;
    --abz-shift: 0px;
  }

  /* hide desktop header, show mobile bars */
  .abz-topbar, .abz-mainbar, .abz-mega { display: none !important; }
  #header, #header.js-sticky-header { position: static !important; transform: none !important; box-shadow: none !important; }
  .abz-mbars { display: block; }

  /* reserve room for the fixed top bars + bottom bar */
  body { padding-top: calc(var(--abz-topbar-h) + var(--abz-mainbar-h)); padding-bottom: var(--abz-bottombar-h); }
  /* a fixed 48px band sits under the top+main bars: the promo bar on home (page-index) or the
     breadcrumbs on inner pages — reserve its 48px in either case */
  body.page-index, body:has(.abz-crumbs) { padding-top: calc(var(--abz-topbar-h) + var(--abz-mainbar-h) + 48px); }

  /* PUSH — shift the whole visible area (content, footer, crumbs/promo, and the bars) */
  body.abz-nav-left  { --abz-shift: var(--abz-drawer-w); }
  body.abz-nav-right { --abz-shift: calc(-1 * var(--abz-drawer-w)); }
  #wrapper, #footer, .abz-crumbs, .abz-promobar,
  .abz-mtopbar, .abz-mmainbar, .abz-mbottombar {
    transition: transform .28s ease;
    transform: translateX(var(--abz-shift));
  }
  /* while a side panel is open, promote the pushed layer to the GPU so the scrim's
     backdrop-filter composites the moving content cheaply and the blur/dim shows in sync
     with the slide (scoped to the open state to avoid a permanent will-change cost) */
  body.abz-nav-open #wrapper, body.abz-nav-open #footer, body.abz-nav-open .abz-crumbs,
  body.abz-nav-open .abz-promobar, body.abz-nav-open .abz-mtopbar,
  body.abz-nav-open .abz-mmainbar, body.abz-nav-open .abz-mbottombar { will-change: transform; }
  /* Scroll lock: while any mobile panel is open, freeze the shifted page — ONLY the panel's own
     content scrolls. Lock both <html> and <body> (so the window can't scroll), and contain
     overscroll inside the panels so reaching a panel's end doesn't chain-scroll the page behind. */
  html:has(> body.abz-nav-open), html:has(> body.abz-search-open),
  body.abz-nav-open, body.abz-search-open { overflow: hidden; }
  .abz-drawer__body, .abz-catnav__l1, .abz-catnav__l2,
  #offcanvas-faceted .offcanvas-body { overscroll-behavior: contain; }

  /* promo bar becomes a third fixed band right under the top+main bars, so it travels with the
     header (sticky can't work here — its parent #header is only as tall as the band itself).
     It stays in the push list above, so it shifts with the drawer like the other bars. */
  .abz-promobar { position: fixed; top: calc(var(--abz-topbar-h) + var(--abz-mainbar-h));
    left: 0; right: 0; height: 48px; z-index: 39; }
  /* breadcrumbs: same fixed band as the promo bar, on inner pages — it's in the push list above
     so it also shifts with the drawers/filter */
  .abz-crumbs { position: fixed; top: calc(var(--abz-topbar-h) + var(--abz-mainbar-h));
    left: 0; right: 0; height: 48px; z-index: 39; }

  /* ---- top bar: phones chip (left) + schedule (right) ---- */
  .abz-mtopbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: var(--abz-topbar-h);
    background: #fff; border-bottom: 1px solid var(--abz-line);
    display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px;
  }
  /* while a top-bar dropdown (phones chip / switchers) is open, lift the whole top bar above the
     main bar (both are z-40, and the later main bar was painting over the open menu) */
  .abz-mtopbar:has(.abz-dd.open) { z-index: 45; }
  .abz-mphones { position: relative; }
  .abz-mchip {
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px;
    background: #eef3f3; border: 0; border-radius: var(--abz-radius);
    font-size: 13px; font-weight: 600; line-height: 1; color: var(--abz-ink);
  }
  .abz-mchip .abz-ic { width: 18px; height: 18px; }
  .abz-mchip .abz-caret { width: 16px; height: 16px; transition: transform .16s ease; }
  .abz-mphones.open .abz-caret { transform: rotate(180deg); }
  .abz-mphones .abz-dd__menu { left: 0; right: auto; min-width: 240px; }
  .abz-mphones .abz-dd__menu .phone { font-weight: 700; }
  /* callback button — same design as the desktop .abz-callbtn: grey-blue band, phone-callback
     icon, centred bold label */
  .abz-mcallitem {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; margin-top: 4px; height: 44px; padding: 0 16px;
    background: var(--abz-call); border: 0; border-radius: var(--abz-radius);
    font: inherit; font-size: 16px; font-weight: 700; line-height: 24px; color: var(--abz-ink); cursor: pointer;
    white-space: nowrap;
  }
  .abz-mcallitem .abz-ic { flex: none; width: 24px; height: 24px; }
  .abz-mschedule { display: flex; flex-direction: column; align-items: flex-start; text-align: left; line-height: 1.25; font-size: 11px; color: var(--abz-ink); }
  .abz-mschedule b { font-size: 12px; }
  /* switchers slot in the top bar: empty + hidden on phone (they live in the left drawer);
     the tablet band below turns this on and fills it via JS. */
  .abz-mtopswitch { display: none; }

  /* ---- main bar: burger + logo + catalog ---- */
  .abz-mmainbar {
    position: fixed; top: var(--abz-topbar-h); left: 0; right: 0; z-index: 40; height: var(--abz-mainbar-h);
    background: var(--abz-panel); display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px;
  }
  .abz-mbtn {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 48px; height: 48px; padding: 0; border: 0; border-radius: var(--abz-radius); cursor: pointer;
  }
  /* menu · interests (catalog) · search · cart — render at their native 48px SVG size
     (no forced .abz-ic clamp); colour still comes from currentColor. */
  .abz-mburger .abz-ic, .abz-mcatalog .abz-ic, .abz-msearch .abz-ic,
  .abz-mcart .abz-ic, .abz-mcart .header-block__icon { width: auto; height: auto; }
  .abz-mburger .abz-ic svg, .abz-mcatalog .abz-ic svg, .abz-msearch .abz-ic svg,
  .abz-mcart .abz-ic svg { width: auto; height: auto; }
  .abz-mburger { background: transparent; color: #f5fafa; }
  .abz-mbrand { flex: 1 1 auto; position: relative; height: 100%; min-width: 0; }
  /* Two stacked layers (like the desktop logo): the dark layer overhangs onto the white bars,
     the white layer is clipped to the green main-bar band. Two pre-rendered SVGs (dark + white),
     no invert() filter — nothing gets its own compositing layer, so no push lag. At phone size
     (46px) the logo fits inside the bar, so nothing overhangs and only the white layer shows. */
  .abz-mbrand__layer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
  .abz-mbrand__layer img { height: 46px; width: auto; display: block; transform: rotate(-5deg); }
  .abz-mbrand__white { overflow: hidden; }   /* clip the white layer to the bar band */
  .abz-mcatalog { background: var(--abz-yellow); color: var(--abz-ink); }
  .abz-mcatalog .abz-ic-close { display: none; }
  body.abz-nav-right .abz-mcatalog .abz-ic-open { display: none; }
  body.abz-nav-right .abz-mcatalog .abz-ic-close { display: inline-flex; }

  /* ---- bottom bar: search + cart ---- */
  .abz-mbottombar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; height: var(--abz-bottombar-h);
    background: var(--abz-panel); display: flex; align-items: center; justify-content: space-between; padding: 0 12px;
  }
  .abz-msearch { background: transparent; color: #f5fafa; }
  /* magnifier ↔ close (×) — when the search panel is open the button turns into a close control */
  .abz-msearch .abz-ic-close { display: none; width: 26px; height: 26px; }
  .abz-msearch .abz-ic-close svg { width: 100%; height: 100%; }
  body.abz-search-open .abz-msearch .abz-ic-open { display: none; }
  body.abz-search-open .abz-msearch .abz-ic-close { display: inline-flex; }
  .abz-mcart { display: flex; align-items: center; }
  .abz-mcart .abz-actions .header-block__action-btn { padding-right: 20px; }

  /* ---- scrim over the dimmed page ---- */
  .abz-scrim { z-index: 50; }
  body.abz-nav-open .abz-scrim, body.abz-search-open .abz-scrim { background-color: rgba(4,10,4,.5); visibility: visible; }

  /* ---- drawers ---- */
  .abz-drawer {
    position: fixed; top: 0; bottom: 0; width: var(--abz-drawer-w); max-width: 88vw; z-index: 70;
    background: #fff; display: flex; flex-direction: column; overflow: hidden; transition: transform .28s ease;
  }
  .abz-drawer--left  { left: 0;  transform: translateX(-100%); box-shadow: 4px 0 24px rgba(0,0,0,.18); }
  .abz-drawer--right { right: 0; transform: translateX(100%);  box-shadow: -4px 0 24px rgba(0,0,0,.18); }
  body.abz-nav-left  .abz-drawer--left  { transform: translateX(0); }
  body.abz-nav-right .abz-drawer--right { transform: translateX(0); }
  /* ===== LEFT drawer (mobile menu) redesign ===== */
  /* band 1 (48px, white): the sign-in button lives here, aligned with the page top bar */
  .abz-drawer__auth { flex: none; min-height: var(--abz-topbar-h); display: flex; align-items: center; padding: 6px 20px; background: #fff; }
  .abz-drawer__auth:empty { display: none; }
  .abz-drawer__auth .abz-signin { display: inline-flex; }
  .abz-drawer__auth .abz-chip {
    display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px;
    background: var(--abz-call); color: var(--abz-ink); border: 0; border-radius: var(--abz-radius);
    font-size: 16px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer;
  }
  .abz-drawer__auth .abz-chip .abz-ic { width: 24px; height: 24px; flex: none; }
  .abz-drawer__auth .abz-chip .abz-ic svg { width: 100%; height: 100%; fill: currentColor; }

  /* band 2 (72px, green): menu icon + title + close box */
  .abz-drawer__head {
    flex: none; height: var(--abz-mainbar-h); display: flex; align-items: center; gap: 14px;
    padding: 0 8px 0 20px; background: var(--abz-panel); color: #e6f0f0;
  }
  .abz-drawer__menuic { width: 24px; height: 24px; flex: none; color: #e6f0f0; }
  .abz-drawer__menuic svg { width: 100%; height: 100%; }
  .abz-drawer__title { flex: 1 1 auto; font-size: 20px; font-weight: 700; }
  .abz-drawer__close {
    flex: none; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid rgba(255,255,255,.3); border-radius: var(--abz-radius);
    color: rgba(255,255,255,.75); cursor: pointer;
  }
  .abz-drawer__close .abz-ic { width: 26px; height: 26px; }
  .abz-drawer__close .abz-ic svg { width: 100%; height: 100%; }

  /* body */
  .abz-drawer__body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 20px; }

  /* language + currency as segmented toggles — reuse the dropdown's option links, drop the trigger */
  .abz-drawer__switchers { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 0; }
  /* the relocated .abz-util wraps lang + currency — stack them so each toggle starts at the left */
  .abz-drawer__switchers .abz-util { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; width: 100%; }
  .abz-drawer__switchers .abz-dd { position: static; }
  .abz-drawer__switchers .abz-dd .abz-chip { display: none; }
  .abz-drawer__switchers .abz-dd__menu {
    position: static; opacity: 1; visibility: visible; transform: none; pointer-events: auto; min-width: 0;
    display: inline-flex; gap: 4px; background: #f1f6f6; border: 1px solid #dbe6e6; border-radius: 8px; padding: 1px; box-shadow: none;
  }
  .abz-drawer__switchers .abz-dd__menu a {
    display: inline-flex; align-items: center; justify-content: center; padding: 4px 10px;
    border-radius: 5px; font-size: 14px; font-weight: 600; color: var(--abz-ink); white-space: nowrap;
  }
  .abz-drawer__switchers .abz-dd__menu a.active { background: #fff; box-shadow: 0 1px 3px rgba(0,20,0,.14); }

  /* primary links (simple list) */
  .abz-drawer__links { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 24px 0; }
  nav.abz-drawer__links > a { padding: 0; font-size: 16px; font-weight: 700; color: #374b37; border: 0; }

  /* contacts / hours / copyright */
  .abz-drawer__label { margin: 0 0 10px; font-size: 13px; color: #6a726a; }
  .abz-drawer__contacts, .abz-drawer__hours { margin-bottom: 24px; }
  .abz-drawer__strong { display: block; margin: 0 0 10px; font-size: 16px; font-weight: 700; color: var(--abz-ink); }
  a.abz-drawer__strong { text-decoration: none; }
  .abz-drawer__contacts > .abz-drawer__strong,
  .abz-drawer__hours > .abz-drawer__strong { font-size: 13px; margin: 0; }
  /* socials (migrated from the mobile-hidden footer) */
  .abz-drawer__social { display: flex; gap: 20px; margin-bottom: 24px; }
  .abz-drawer__social a { font-size: 14px; font-weight: 700; color: #374b37; text-decoration: none; }
  .abz-drawer__social a:hover { text-decoration: underline; }
  /* copyright + legal links */
  .abz-drawer__copy { display: flex; flex-direction: column; gap: 12px; font-size: 13px; margin: 0; color: #6a726a; }
  .abz-drawer__copytext { line-height: 1.45; }
  .abz-drawer__legal { display: flex; flex-direction: column; gap: 8px; }
  .abz-drawer__legal a { font-size: 13px; color: #374b37; text-decoration: underline; }

  /* footer stays hidden on mobile (its links moved into the curated menu above) */
  #footer { display: none; }

  /* ---- catalog accordion (relocated into right drawer) ---- */
  .abz-catacc { display: block; }
  .abz-catacc__item { border-bottom: 1px solid #dcdcdc; }
  .abz-catacc__row { display: flex; align-items: stretch; min-height: 48px; }
  .abz-catacc__link { flex: 1 1 auto; display: flex; align-items: center; padding: 0 8px 0 20px; font-size: 16px; font-weight: 700; color: #374b37; }
  .abz-catacc__toggle { flex: none; width: 56px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; border-left: 1px solid #eef1ee; color: #374b37; cursor: pointer; }
  .abz-catacc__toggle .abz-ic { width: 22px; height: 22px; transition: transform .18s ease; }
  .abz-catacc__item.is-open > .abz-catacc__row .abz-catacc__toggle .abz-ic { transform: rotate(180deg); }
  .abz-catacc__sub { display: flex; flex-direction: column; background: #f8faf8; padding: 4px 0; }
  .abz-catacc__sublink, .abz-catacc__all { padding: 10px 20px 10px 32px; font-size: 15px; color: #374b37; }
  .abz-catacc__all { font-weight: 700; color: var(--abz-panel); }

  /* ---- catalog: two-level slider in the right drawer (L1 rail -> L2 category panel) ---- */
  #abzDrawerRightBody.abz-catnav { overflow: hidden; padding: 0; }
  .abz-catnav__track { display: flex; width: 200%; height: 100%; transition: transform .28s ease; }
  #abzDrawerRightBody.is-l2 .abz-catnav__track { transform: translateX(-50%); }
  .abz-catnav__l1, .abz-catnav__l2 { width: 50%; flex: 0 0 50%; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; }

  /* level 1: the cloned rail rendered as a full-width tappable list */
  .abz-catnav .abz-mega__rail { display: block; padding: 0; background: transparent; }
  .abz-catnav .abz-mega__rail::before, .abz-catnav .abz-mega__rail::after { display: none; } /* desktop divider lines */
  .abz-catnav .abz-mega__railbtn { display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 14px 20px; border: 0; border-bottom: 1px solid #eef1ee; background: transparent;
    text-align: left; font-size: 16px; font-weight: 700; color: #374b37; cursor: pointer; }
  .abz-catnav .abz-mega__railbtn::before { display: none; }                 /* desktop hover pill */
  .abz-catnav .abz-mega__railname { flex: 1 1 auto; padding: 0; }
  .abz-catnav .abz-mega__chev { width: 20px; height: 20px; flex: none; margin-left: auto; transform: none; }

  /* level 2: back button + head + desc + single-column subcategories + "Усі товари" */
  .abz-catnav__l2 { padding-bottom: 16px; }
  .abz-catnav__back { display: flex; align-items: center; gap: 6px; width: 100%;
    padding: 12px 20px; border: 0; border-bottom: 1px solid #eef1ee; background: #f6f8f6;
    font-size: 15px; font-weight: 700; color: var(--abz-ink); cursor: pointer; }
  .abz-catnav__back .abz-ic { width: 20px; height: 20px; flex: none; }
  .abz-catnav__l2 .abz-mega__panel { display: block; }                      /* clone shows without .active */
  .abz-catnav__l2 .abz-mega__head { padding: 16px 20px 2px; }
  .abz-catnav__l2 .abz-mega__head h3 { margin: 0; font-size: 20px; }
  .abz-catnav__l2 .abz-mega__desc { padding: 0 20px 12px; margin: 0; font-size: 14px; color: #646464; }
  .abz-catnav__l2 .abz-mega__cols { display: flex; flex-direction: column; padding: 0; gap: 0; }
  .abz-catnav__l2 .abz-mega__cols a { padding: 12px 20px; border-bottom: 1px solid #f0f2f0; font-size: 15px; font-weight: 600; color: #374b37; }
  .abz-catnav__l2 .abz-mega__all { display: inline-flex; align-items: center; gap: 8px; margin: 14px 20px 0; padding: 10px 16px; border-radius: var(--abz-radius); }

  /* (faceted filter now a right-side overlay panel for all breakpoints — see global section below) */

  /* ---- search panel: slides UP from under the bottom bar; same height & colour as the bar ---- */
  /* The bar is kept ABOVE the panel for the whole open AND close slide (abz-search-open /
     abz-search-closing rule below), so the panel emerges from under the bar on open and slides
     back DOWN under it on close — it never rides on top of the bar. At rest it is
     visibility:hidden (visibility flips only after the .28s slide has finished, so the panel
     stays paintable, and bar-masked, for the entire close). */
  .abz-searchmodal {
    position: fixed; bottom: var(--abz-bottombar-h); left: 0; right: 0; z-index: 51;
    height: var(--abz-bottombar-h); background: #fff;
    display: flex; align-items: center; padding: 0 12px;
    box-shadow: 0 -8px 20px rgba(0,0,0,.10);
    transform: translateY(100%); visibility: hidden;
    transition: transform .28s ease, visibility 0s linear .28s;
  }
  body.abz-search-open .abz-searchmodal {
    transform: translateY(0); visibility: visible;
    transition: transform .28s ease, visibility 0s linear 0s;
  }
  /* keep the bar above the panel while opening (abz-search-open) and while closing
     (abz-search-closing, set by JS for the slide-down) so the panel is always masked by it */
  body.abz-search-open .abz-mbottombar,
  body.abz-search-closing .abz-mbottombar { z-index: 52; }

  .abz-searchmodal__bar { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }
  .abz-searchmodal__field { flex: 1 1 auto; min-width: 0; }
  .abz-searchmodal__field .abz-search { display: block; }
  .abz-searchmodal__field .ps-searchbar { width: 100%; min-width: 0; margin: 0; }
  /* the input box is a filled, outlined field so it clearly reads as a search box on the white
     panel (magnifier + input styling come from the global .abz-search rules) */
  .abz-searchmodal__field .ps-searchbar__form { background: #f1f5f5; border: 1px solid var(--abz-line); }

  /* ps_searchbar's mobile mode is a magnifier icon that opens a Bootstrap top-offcanvas, with the
     real input hidden inside it (visibility:hidden until shown). Inside OUR panel we don't want
     that icon+offcanvas dance — we neutralise the offcanvas so its real input renders inline and
     always visible, and hide the icon trigger + the offcanvas close button. */
  .abz-searchmodal .ps-searchbar--mobile { flex: 1 1 auto; min-width: 0; width: 100%; }
  /* hide the magnifier trigger. display:none can't win here: Bootstrap's .d-flex is `!important`
     inside a cascade layer, which beats an unlayered `!important` regardless of specificity. So we
     collapse it with properties Bootstrap doesn't force — absolute + 0×0 takes it out of flow. */
  .abz-searchmodal .ps-searchbar--mobile > .header-block {
    position: absolute; width: 0; height: 0; overflow: hidden; opacity: 0; pointer-events: none;
  }
  /* visibility:inherit (NOT visible) — the offcanvas must FOLLOW the panel's visibility, else it
     forcibly un-hides itself and the input paints over the bottom bar while the panel is closed. */
  .abz-searchmodal .ps-searchbar__offcanvas.offcanvas {
    position: static; visibility: inherit; transform: none; width: 100%; height: auto; max-height: none;
    background: transparent; box-shadow: none; border: 0; padding: 0;
  }
  .abz-searchmodal .offcanvas-header { padding: 0; gap: 0; width: 100%; }
  /* the offcanvas close (×) — collapsed the same way (Bootstrap layer !important) */
  .abz-searchmodal .offcanvas-header > .btn,
  .abz-searchmodal .offcanvas-header > button {
    position: absolute; width: 0; height: 0; overflow: hidden; opacity: 0; pointer-events: none;
  }
  .abz-searchmodal .ps-searchbar__container { flex: 1 1 auto; min-width: 0; width: 100%; }
  .abz-searchmodal .ps-searchbar { width: 100%; min-width: 0; margin: 0; }
  .abz-searchmodal .ps-searchbar__form { width: 100%; }
}

/* ==================== TABLET+ BAND (576–991px) ====================
   Same bar heights and logo as the phone shell — the change is that language/currency/
   sign-in surface into the top bar (out of the left drawer), so the 575→576 transition
   has no height jump. Everything else — burger, catalog, search, cart, push drawers —
   is inherited from the shell block above. (The 768–991 band adds the logo/schedule
   changes on top of this.) */
@media (min-width: 576px) and (max-width: 991.98px) {
  /* top bar becomes: phones chip · schedule grouped on the LEFT, switchers pushed to the
     right by the auto margin (so the schedule sits left-aligned next to the chip, not centred).
     .abz-util renders as dark .abz-chip items — reads correctly on the white bar. */
  .abz-mtopswitch { display: flex; align-items: center; margin-left: auto; }
  .abz-mtopswitch .abz-util { display: flex; align-items: center; }
  .abz-mtopswitch .abz-chip { padding: 4px 6px; font-size: 13px; line-height: 20px; }
  .abz-mtopswitch .abz-chip .abz-ic { width: 18px; height: 18px; }
  .abz-mtopswitch .abz-sep { margin-inline: 4px; }
  /* dropdowns open flush to the bar's right edge so they don't spill off-screen */
  .abz-mtopswitch .abz-dd__menu { left: auto; right: 0; }

  /* left drawer now carries only the page links — the emptied switchers slot is hidden */
  .abz-drawer__switchers { display: none; }
}

/* ==================== WIDE SHELL (768–991px) ====================
   Still the burger shell (bar heights are the canonical 48/72), but two things grow toward
   desktop: the logo takes its full desktop size (81px, overhanging the 72px bar like the
   desktop header), and the schedule collapses to a single line, vertically centred. */
@media (min-width: 768px) and (max-width: 991.98px) {
  /* logo at desktop scale: it overhangs the green bar and the dark layer shows on the white
     bands above (top bar) and below (promo bar); the white layer stays clipped to the bar */
  .abz-mbrand__layer img { height: 81px; }
  /* schedule on one centred line instead of two stacked rows */
  .abz-mschedule { flex-direction: row; align-items: center; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .abz-header *, .abz-scrim, .abz-drawer, .abz-searchmodal,
  #wrapper, #footer, .abz-mtopbar, .abz-mmainbar, .abz-mbottombar { transition: none !important; }
}

/* ============================ CATALOG / PRODUCT LIST ============================ */
/* 1) product title */
a.product-miniature__title { font-size: 14.5px; font-weight: 700; line-height: 1.35; flex: 1; color: var(--abz-panel); }

/* 2) hide the qty selector + add-to-cart (no BO toggle for listing-only; done in theme) */
.product-miniature__actions { display: none; }
.product-miniature__quickview-button { font-size: 13px; }
.product-miniature__quickview-icon { flex: none; }

/* 3) desktop (≥992px) — exactly 3 products per row */
@media (min-width: 992px) {
  #js-product-list .products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 4) active filter pills */
.active-filters__pill { font-size: 14px; }

/* 5) facet accordion group titles: one line, ellipsis when too long */
.accordion-button { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* ============ FILTER + SORT: single right-side overlay panel (all breakpoints) ============ */
/* scoped to faceted pages (category/search/manufacturer/…) only, via the filter offcanvas */
/* drop the left column entirely; sort + subcategory tree + facets all live in the panel now,
   so the product grid gets the full width */
body:has(#offcanvas-faceted) #left-column { display: none !important; }
body:has(#offcanvas-faceted) #center-column { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; }
@media (min-width: 992px) { body:has(#offcanvas-faceted) #js-product-list .products { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* toolbar: hide the sort dropdown (moved into the panel), keep the filter button on the RIGHT,
   shown at every size */
.products__sort-dropdown { display: none !important; }
.products__sort { justify-content: flex-end; }
#search_filter_toggler.products__filter-button {
  display: inline-flex !important; flex: 0 0 auto; margin-left: auto; width: auto;
  font-size: 15px; font-weight: 700; color: #051e05;
  border-color: hsl(180 13% 74% / 1); background: #d2dcdc;
}

/* the panel: right side, overlay (Bootstrap backdrop, no page push), comfortable width.
   Force the offcanvas-end geometry ourselves — the module's .ps-facetedsearch--mobile styles
   fight Bootstrap's positioning. */
#offcanvas-faceted.offcanvas {
    display: flex; position: fixed; inset: 0 0 0 auto; width: min(92vw, 440px);
    transform: translateX(100%); transition: transform .28s ease;
  }
/* animate ON the .showing/.hiding phases (like Bootstrap) so the panel SLIDES in/out in sync with
   the backdrop — not snapping at the end. Our base translateX(100%) covers closed + closing. */
#offcanvas-faceted.offcanvas.showing,
#offcanvas-faceted.offcanvas.show:not(.hiding) { transform: none !important; }
#offcanvas-faceted #search_filters_wrapper { display: block; }      /* relocated desktop facets (was .d-none) */

/* one unified accordion (sort + categories + facets): only horizontal separators between items,
   NO vertical/side borders anywhere, no focus shadows */
#offcanvas-faceted .accordion, #offcanvas-faceted .accordion-item,
#offcanvas-faceted .accordion-button, #offcanvas-faceted .accordion-body,
#offcanvas-faceted .search-filters__item { border-left: 0 !important; border-right: 0 !important; box-shadow: none !important; }
#offcanvas-faceted .accordion-item { border-top: 0; }
#offcanvas-faceted .accordion-body { padding-top: 2px; padding-bottom: 12px; }
#offcanvas-faceted .accordion-body > li { list-style: none; }

/* sort options — radio look; text typography matches the facet values (16/400/#212529),
   radio matches the facet checkbox size/border */
#offcanvas-faceted .abz-fp-sort__opt { display: flex; align-items: center; gap: 12px; padding: 6px 0; font-size: 14px; line-height: 24px; font-weight: 400; color: #212529; }
#offcanvas-faceted .abz-fp-sort__opt::before { content: ""; flex: none; width: 16px; height: 16px; border: 1px solid var(--abzf-check); border-radius: 50%; }
#offcanvas-faceted .abz-fp-sort__opt.is-active::before { border-color: var(--abzf-check); box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 8px var(--abz-panel) !important; }
/* categories reuse the facet value markup (.search-filters__item / .form-check-input) → identical checkbox */