.content-title {
  margin-top: 0;
  margin-bottom: 30px;
  font-size: 26px;
}

/* ── Category page layout with optional sidebars from Pages Constructor ── */
.cat-page-layout{display:grid;grid-template-columns:1fr;gap:40px;align-items:start;}
.cat-page-layout.has-left{grid-template-columns:280px 1fr;}
.cat-page-layout.has-right{grid-template-columns:1fr 280px;}
.cat-page-layout.has-left.has-right{grid-template-columns:280px 1fr 280px;}
.cat-page-col-left,.cat-page-col-right{min-width:0;display:flex;flex-direction:column;gap:16px;}
.cat-page-main{min-width:0;}

/* On DESKTOP the drawer-body wrapper is invisible to the layout — its children become
   direct children of the aside, exactly as before my refactor (no extra DOM box, no
   accidental flex-spacing). The chrome (head/foot/toggle/backdrop) is hidden entirely. */
.cat-filter-drawer-body{display:contents;}

/* Controls row above products grid — 1:1 with reference:
   LEFT  side: active chips + product count
   RIGHT side: Remove filters (top) + Sort dropdown (bottom), stacked vertically.
   44px top margin on desktop (per spec) — overrides Bootstrap .mt-4. */
.category__filter-mobile{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  flex-wrap:wrap;
  margin-top:44px !important;
  margin-bottom:40px;
}

/* Left side — chips + count. Starts at the same x as the filter sidebar. */
.cat-active-filters-wrap{
  display:none;
  flex-direction:column;align-items:flex-start;gap:6px;
  flex:1 1 auto;min-width:0;
}
.cat-active-filters-wrap.has-filters{display:flex;}

.cat-active-filters{
  display:flex;flex-wrap:wrap;gap:6px;
}
.cat-active-filters .osf-chip-tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 8px 6px 12px;
  background:#fff;border:1px solid #e5e5e5;border-radius:999px;
  color:#1a1a1a;font-size:13px;font-weight:500;
}
.cat-active-filters .osf-chip-tag__x{
  background:none;border:0;color:#888;cursor:pointer;
  font-size:16px;line-height:1;padding:0 4px;
}
.cat-active-filters .osf-chip-tag__x:hover{color:#1a1a1a;}
.cat-active-filters-count{font-size:13px;color:#6b6b6b;}

/* Right side — Remove filters (top, 120×40) + Sort dropdown (bottom, fixed 200×44).
   Both children get align-self:flex-end so their right edges sit at the column's right edge.
   No fixed parent width — column shrinks to fit the widest child (sort dropdown).
   margin-left:auto pins this column to the right edge of .category__filter-mobile even
   when the chips-wrap on the left is display:none (no chips yet) — otherwise with only
   one flex item the controls would slide to the left. */
.category__filter-right{
  display:flex;flex-direction:column;align-items:flex-end;gap:8px;
  flex-shrink:0;
  margin-left:auto;
}
.category__filter-right .category__sort{
  width:200px;align-self:flex-end;margin:0;
}
.category__filter-right .category__sort > .form-group{margin:0;width:100%;}
.category__filter-right .category__sort #input-sort{
  width:100%;height:44px;display:block;margin:0;
  padding:0 36px 0 16px;
  background:#fff;border:1px solid #e5e5e5;border-radius:10px;
  color:#1a1a1a;font-size:13px;font-weight:500;line-height:1;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;
}
.category__filter-right .category__sort #input-sort:focus{outline:none;border-color:#1a1a1a;}

/* "Remove filters" — fixed 120×40 per spec. align-self:flex-end forces it to the right
   edge of the parent column regardless of the parent's align-items setting (defensive
   in case of flex quirk with display:inline-flex set inline by syncChips()). */
.cat-remove-filters{
  display:none;
  align-items:center;justify-content:center;
  width:120px;height:40px;padding:0;margin:0 0 0 auto;
  align-self:flex-end;
  background:#fff;border:1px solid #e5e5e5;border-radius:10px;
  color:#1a1a1a;font-size:13px;font-weight:500;cursor:pointer;
  transition:border-color .15s, background .15s;
  line-height:1;
  box-sizing:border-box;
}
.cat-remove-filters:hover{border-color:#1a1a1a;background:#fafafa;}

/* The SEO filter widget renders its own #osf-selected-chips bar inside the sidebar; we
   already mirror those chips above the products grid (#cat-active-filters), so hide the
   sidebar copy to avoid showing the active filter twice. The element stays in the DOM —
   syncChips() still observes it for changes — but is invisible to the user. */
.cat-page-col-left #osf-selected-chips,
.cat-filter-drawer-body #osf-selected-chips{display:none !important;}
.cat-filter-drawer-head,
.cat-filter-drawer-foot,
.cat-filter-toggle,
.cat-filter-backdrop{display:none;}

@media (max-width:991px){
  .cat-page-layout,
  .cat-page-layout.has-left,
  .cat-page-layout.has-right,
  .cat-page-layout.has-left.has-right{grid-template-columns:1fr !important;}

  /* Mobile/tablet 1:1 with reference:
     - Filter button + Sort dropdown sit on the same top row
     - Active-filter chips appear in a row BELOW the buttons (full width)
     - Product count "N products" is hidden (reference shows only chips)
     - "Remove filters" button is hidden (reference uses only the chip × to clear) */
  #cat-active-filters-count{display:none !important;}
  .cat-active-filters-wrap{
    flex:0 0 100% !important;
    width:100% !important;
    order:99;
    margin:0;
  }
  .cat-remove-filters{display:none !important;}

  /* Open-button shown on mobile next to Sort dropdown — fixed 104×44 per spec. */
  .cat-filter-toggle{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    width:104px;height:44px;padding:0;
    background:#fff;border:1px solid #e5e5e5;border-radius:12px;
    color:#1a1a1a;font-size:14px;font-weight:500;cursor:pointer;
    box-shadow:0 1px 2px rgba(0,0,0,.03);
    transition:border-color .15s, background .15s, box-shadow .15s;
    line-height:1;
    box-sizing:border-box;
  }
  .cat-filter-toggle:hover{border-color:#1a1a1a;box-shadow:0 2px 6px rgba(0,0,0,.06);}
  .cat-filter-toggle:active{background:#fafafa;}
  .cat-filter-toggle svg{flex-shrink:0;}

  /* Slide-out drawer — fixed full-height, off-canvas on the left */
  #cat-filter-drawer.cat-page-col-left{
    position:fixed;top:0;left:0;bottom:0;
    width:88%;max-width:380px;
    background:#fff;
    z-index:9999;
    transform:translateX(-100%);
    transition:transform .25s ease;
    display:flex;flex-direction:column;gap:0;
    box-shadow:0 8px 32px rgba(0,0,0,.18);
    overflow:hidden;
  }
  body.cat-filter-open #cat-filter-drawer.cat-page-col-left{transform:translateX(0);}
  body.cat-filter-open{overflow:hidden;}

  /* Sticky head with title + close */
  .cat-filter-drawer-head{
    display:flex;align-items:center;justify-content:space-between;
    padding:18px 20px;border-bottom:1px solid #ececec;
    flex-shrink:0;
  }
  .cat-filter-drawer-title{font-size:18px;font-weight:600;color:#1a1a1a;}
  .cat-filter-drawer-close{
    background:transparent;border:0;color:#1a1a1a;
    font-size:28px;line-height:1;cursor:pointer;padding:0 4px;
  }

  /* Scrollable filter body — overrides the desktop "display:contents" so the wrapper
     becomes a real flex item again (taking 100% of the drawer's height between head/foot). */
  .cat-filter-drawer-body{
    display:block !important;
    flex:1 1 auto;overflow-y:auto;
    padding:18px 20px;
    -webkit-overflow-scrolling:touch;
  }

  /* Sticky footer with clear + apply */
  .cat-filter-drawer-foot{
    display:flex;gap:10px;
    padding:14px 20px;border-top:1px solid #ececec;
    background:#fff;flex-shrink:0;
  }
  .cat-filter-drawer-clear,
  .cat-filter-drawer-apply{
    flex:1;height:46px;border-radius:10px;
    font-size:14px;font-weight:500;cursor:pointer;
    transition:opacity .15s;
  }
  .cat-filter-drawer-clear{background:#fff;border:1px solid #d4d4d4;color:#1a1a1a;}
  .cat-filter-drawer-clear:hover{border-color:#1a1a1a;}
  .cat-filter-drawer-apply{background:#1a1a1a;border:none;color:#fff;}
  .cat-filter-drawer-apply:hover{opacity:.85;}

  /* Backdrop overlay */
  .cat-filter-backdrop{
    position:fixed;inset:0;
    background:rgba(0,0,0,.45);
    z-index:9998;
    opacity:0;visibility:hidden;
    transition:opacity .25s ease,visibility .25s ease;
    display:block;
  }
  body.cat-filter-open .cat-filter-backdrop{opacity:1;visibility:visible;}

  /* When our drawer is open, render the SEO filter widget INLINE inside it (not the
     widget's own fullscreen overlay) and hide all sibling modules (categories tree,
     duplicate triggers) so the user sees ONLY the filter on the very first click. */
  body.cat-filter-open .cat-filter-drawer-body > * { display:none !important; }
  body.cat-filter-open .cat-filter-drawer-body .osf,
  body.cat-filter-open .cat-filter-drawer-body #osf-widget {
    display:block !important;
    position:static !important;
    inset:auto !important;
    z-index:auto !important;
    padding:0 !important;
    background:transparent !important;
    overflow:visible !important;
  }
  /* Defensive: even if .osf is wrapped in some module-output container, walk parents */
  body.cat-filter-open .cat-filter-drawer-body .osf,
  body.cat-filter-open .cat-filter-drawer-body :has(> .osf) { display:block !important; }
  /* Kill the SEO filter's own floating "Filter" button entirely while our drawer owns the UI */
  body.cat-filter-open .osf-mobile-trigger { display:none !important; }
  /* The SEO filter's "apply" / "reset" sticky bar lives inside .osf — push it down to the
     bottom of our drawer body so it doesn't overlap the head. */
  body.cat-filter-open .cat-filter-drawer-body .osf__mobile-bar { position:static !important; }

  /* The SEO filter widget already provides its own apply/reset bar (.osf__mobile-bar)
     with a live "[N] Apply" counter. Hide our duplicate drawer-foot to avoid 2 sets
     of buttons stacked at the bottom. */
  body.cat-filter-open .cat-filter-drawer-foot { display:none !important; }
}

/* ── Override global .list-group (horizontal pills) inside sidebar — force vertical tree ──
   These rules apply to the optional category-tree module (`extension/module/category`)
   if it is mounted in column_left/column_right. They give the tree its rounded white
   "card" look. They DO NOT apply to the SEO filter (.osf), which is flattened below. */
.cat-page-col-left .list-group,
.cat-page-col-right .list-group{
  display:flex;
  flex-direction:column;
  padding:14px 14px;
  padding-bottom:14px;
  margin:0;
  gap:2px;
  background:#fff;
  border:1px solid var(--color-border,#e7e4e4);
  border-radius:16px;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.cat-page-col-left .list-group::after,
.cat-page-col-right .list-group::after{display:none;}
.cat-page-col-left .list-group-item,
.cat-page-col-right .list-group-item{
  display:block;
  width:100%;
  margin:0;
  padding:12px 14px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#393939;
  font-size:15px;
  font-weight:500;
  text-decoration:none;
  transition:background .15s ease, color .15s ease;
}
.cat-page-col-left .list-group-item:last-child,
.cat-page-col-right .list-group-item:last-child{margin-bottom:0;}
.cat-page-col-left .list-group-item:hover,
.cat-page-col-right .list-group-item:hover{
  background:var(--otc-btn-primary,#f5f5f5);
  color:var(--otc-btn-primary-text,#fff);
}
.cat-page-col-left .list-group-item.active,
.cat-page-col-right .list-group-item.active{
  background:var(--otc-btn-primary,#222);
  color:var(--otc-btn-primary-text,#fff);
  font-weight:600;
}
/* Child items (indent and smaller) */
.cat-page-col-left .list-group-item--child,
.cat-page-col-right .list-group-item--child{
  padding-left:28px;
  font-size:14px;
  font-weight:400;
}
.card-category {
  margin-bottom: 30px;
}

.category-empty-img {
  object-fit: cover;
  max-width: 500px;
  max-height: 470px;

  @media screen and (max-width: 499px) {
    width: 100%;
    height: 100%;
    padding: 10px;
  }
}

.category__sort {
  margin-right: 30px;
  margin-bottom: 50px;
}
.category__sort .form-group {
  margin-bottom: 0;
}
.category__sort #input-sort {
  border-radius: 10px;
  width: 203px;
  height: fit-content;
  padding: 9px 11px 10px 12px;
  color: #000;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  background-image: url('/image/catalog/arrow-down.svg');
  background-position: calc(100% - 10px) 50%;
  background-repeat: no-repeat;
  background-size: 10px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}
.category__sort #input-sort:focus {
  border-color: var(--color-main);
}
.category__view {
  margin-right: 20px;
  margin-bottom: 50px;
}
.category__view .btn-group {
  height: 100%;
}
.category__view .btn-group button {
  width: 48px;
  height: 44px;
  background: #fff;
  border: var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.category__view .btn-group #list-view {
  border-radius: 10px 0px 0px 10px;
}
.category__view .btn-group #grid-view {
  border-radius: 0px 10px 10px 0px;
}
.category__view .btn-group #list-view.active,
.category__view .btn-group #grid-view.active {
  background: var(--color-main);
  border: var(--border);
}
.category__view .btn-group #list-view.active svg rect,
.category__view .btn-group #grid-view.active svg rect {
  fill: #fff;
}
.category__block .btn-custom {
  padding: 10px;
  font-size: 16px;
  line-height: 22px;
  width: 100%;
}
.category__block {
  display: grid;
  grid-template-columns: repeat(3, minmax(20px, 33%));
  gap: 20px;
  width: 100%;
}
.category__block.list {
  grid-template-columns: (1, minmax(20px, 100%));
  width: 100%;
}
.category__block.list .product-card-rating--big-card {
  width: 100%;
  /* column-gap: 90px; */
}
.category__block.list .product-card-rating--big-card .product-card-rating__product-img {
  order: 1;
}
.category__block.list
  .product-card-rating--big-card.product-card-rating.r-20
  .product-card-rating__icons-btns {
  right: calc(100% - 64px);
}
.category__block.list .product-card-rating--big-card .product-card-rating__descr {
  flex-grow: 1;
}
@media (max-width: 450px) {
  .category__filter-button {
    margin-right: 0px !important;
  }
}

.category__filter-button {
  display: none;
}
@media (max-width: 1199px) {
  .card-category {
    padding-bottom: 40px;
  }
  .content-title {
    font-size: 24px;
    margin-bottom: 25px;
  }
  .category__block {
    grid-template-columns: repeat(2, minmax(20px, 50%));
  }
}
@media (max-width: 991px) {
  #column-left {
    display: none;
  }
  #content {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
  }
  .category__filter-button {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 12px;
    border: none;
    background-color: var(--color-main);
    cursor: pointer;
    outline: none;
    color: #fff;
    height: fit-content;
    padding: 10px 18px 9px;
    margin-right: 30px;
    transition: var(--transition);
  }
  .category__filter-button:hover {
    background-color: var(--hover-add);
    transition: var(--transition);
  }
}
@media (max-width: 767px) {
  .content-title {
    font-size: 20px;
    margin-bottom: 20px;
    padding-top: 16px;
    border-top: var(--border);
  }
  .card-category {
    padding-bottom: 16px;
    /* border-bottom: var(--border); */
    margin-bottom: 24px;
  }
  .category__view {
    display: none;
  }
  .category__sort {
    margin-right: 0;
    margin-bottom: 24px;
  }
  .category__sort #input-sort {
    font-size: 16px;
    line-height: 22px;
  }
}
/* Grid cols on mobile controlled via admin settings (grid_cols_mobile) — see header.twig inline CSS at ≤500px */
@media (max-width: 500px) {
  .category__block {
    width: 100%;
  }
}
@media (max-width: 389px) {
  .category__filter-button {
    margin-right: 18px;
    column-gap: 10px;
    padding: 10px 16px 9px;
  }
}

.empty-catalog {
  margin-top: 60px;
}

.text-empty-title {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.5;
  margin-top: 30px;
  margin-bottom: 16px;
  text-align: center;
}

.text-empty-description {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  max-width: 370px;
  text-align: center;
  margin-bottom: 0;
}

/* ──────────────────────────────────────────────────────────────────────────
   SEO Filter sidebar polish — match reference design 1:1.
   Scope: ONLY when the .osf widget is rendered inside the desktop left
   column (`.cat-page-col-left`). The widget's own stylesheet keeps its
   defaults so other rendering contexts (e.g. mobile drawer, a possible
   right-column placement) are untouched.
   ────────────────────────────────────────────────────────────────────────── */

/* B. Strip the outer card around the filter — flat sidebar.
      The reference shows sections separated by thin bottom borders, not
      a single rounded card surrounding the whole widget. */
.cat-page-col-left .osf,
.cat-page-col-left #osf-widget{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  padding:0 !important;
  box-shadow:none !important;
}

/* A. Hide the duplicate "Фильтр" header inside the widget. The drawer-head
      already shows "Фільтри" on mobile, and the desktop sidebar in the
      reference design has no such heading. We keep the head row visible
      ONLY for the "Сбросить все" button (top-right link). */
.cat-page-col-left .osf__head{
  padding:6px 0 8px;
  border-bottom:0;
  margin-bottom:0;
  justify-content:flex-end;
}
.cat-page-col-left .osf__title{display:none !important;}
.cat-page-col-left .osf__reset{
  font-size:12px;
  color:#8a8a8a;
  text-decoration:underline;
  text-underline-offset:2px;
}
.cat-page-col-left .osf__reset:hover{color:#1a1a1a;}

/* D. Section visuals — reinforce the flat divider look. The widget's own
      .osf-group already has a thin bottom border; here we just guarantee
      consistent vertical rhythm and a clean "no border on first/last"
      look so it reads as a flat list inside the column. */
.cat-page-col-left .osf-group{
  border-bottom:1px solid #ececec;
  padding:14px 0;
}
.cat-page-col-left .osf-group:first-of-type{padding-top:6px;}
.cat-page-col-left .osf-group:last-of-type{border-bottom:0;}

/* C. "+ Show all" / "− Show less" link styling — text link below the value
      list, matching the reference. The widget already emits the button when
      a group's display_limit is exceeded; this just polishes typography. */
.cat-page-col-left .osf-show-all{
  display:inline-flex;align-items:center;gap:4px;
  margin-top:8px;padding:0;
  background:none;border:0;
  color:#1a1a1a;font-size:13px;font-weight:500;
  cursor:pointer;
  text-decoration:none;
}
.cat-page-col-left .osf-show-all:hover{text-decoration:underline;}
.cat-page-col-left .osf-show-all::before{content:'+';font-size:15px;font-weight:400;line-height:1;}
.cat-page-col-left .osf-show-all.is-expanded::before{content:'−';}