/* ===========================================================================
   VKLADOVKE — 30-category: category page + listing grid + filter rail
   Owned by the promo-card agent. Spec: DESIGN_SPEC.md §7.
   Markup: product/category.twig (breadcrumb, toolbar, #product-list) and the
   os24 filter module (extension/opencart .../module/filter.twig — markup NOT
   touched, restyled here into the reference's left rail).
   NOTE: legacy vkladovke-skin.css loads first and styles .os24-* with its own
   cream/oak palette — rules below deliberately re-declare those selectors.
   =========================================================================== */

/* --- breadcrumbs ---------------------------------------------------------- */
.breadcrumb{
  display:flex;flex-wrap:wrap;align-items:center;
  list-style:none;margin:16px 0;padding:0;
  font-size:12px;line-height:18px;background:transparent;
}
.breadcrumb-item{display:flex;align-items:center}
/* Crumbs MUST be allowed to wrap. Stock stylesheet.css pins
   `.breadcrumb > li.breadcrumb-item` to white-space:nowrap, which was harmless
   while the breadcrumb carried short supplier names. The customer taxonomy's
   names are long — «Човни, катери та водний транспорт» measures 550px — so on a
   390px phone one crumb widened the document to 574px, the browser zoomed the
   whole page out to fit, and every fixed-position element (the cart drawer above
   all) rendered against a viewport that was no longer the screen. That is what
   "the cart acts weird on mobile" actually was. */
.breadcrumb > li.breadcrumb-item{white-space:normal;min-width:0}
.breadcrumb > li.breadcrumb-item > a{overflow-wrap:anywhere}
.breadcrumb-item+.breadcrumb-item{padding-left:0}
.breadcrumb-item+.breadcrumb-item::before{
  content:"\203A";float:none;color:var(--pr-grey-color);padding:0 8px;
}
.breadcrumb a{color:var(--pr-links-color)}
.breadcrumb a:hover{color:var(--pr-links-color);text-decoration:underline}
.breadcrumb .vk-bc-home{color:var(--pr-dark-text-color)}
.breadcrumb-item.active span{color:var(--pr-grey-color)}

/* --- page skeleton -------------------------------------------------------- */
#product-category{padding-bottom:32px}
.vk-cat-title{font-size:24px;line-height:36px;font-weight:700;margin:0 0 16px}

/* The content column MUST be allowed to shrink below its min-content width.
   A flex item defaults to min-width:auto, so when the product grid's intrinsic
   minimum exceeds the space left beside the 298px rail — 1143px against 1022px
   on «Альпінізм», thanks to one long unbreakable product name — the item refuses
   to narrow and Bootstrap's .row wraps it onto the next line. The result is a
   category page whose entire content sits BELOW a 3,000px filter sidebar: from
   the top of the page it reads as an empty category, which is exactly how Hlib
   found it. Same one-property fix as the breadcrumb further up this file. */
.vk-cat-layout > #content,
.vk-cat-layout > .vk-cat-main{min-width:0}

/* the left rail: bootstrap col-3 → fixed 274px card column (spec §7) */
.vk-cat-layout > #column-left{
  flex:0 0 298px;width:298px;max-width:298px;   /* 274 + 2×12 bs gutter */
}

/* --- filter rail (os24 filter module, restyled) --------------------------- */
.os24-filter{
  background:var(--pr-white);border:0;border-radius:var(--pr-radius-card);
  padding:16px;box-shadow:none;
}
.os24-filter-head{
  display:flex;align-items:center;gap:8px;
  background:transparent;border:0;padding:0 0 12px;width:100%;
  font-size:16px;line-height:24px;font-weight:700;color:var(--pr-dark-text-color);
  cursor:pointer;
}
.os24-filter-head:hover{background:transparent}
.os24-filter-head > i:first-child{color:var(--pr-dark-text-color);font-size:16px}
.os24-filter-title{flex:1;text-align:left}
.os24-filter-total{background:var(--pr-primary-dark-color);color:#fff;border-radius:11px;
  min-width:22px;height:22px;padding:0 6px;display:inline-flex;align-items:center;
  justify-content:center;font-size:10px;font-weight:600}
.os24-filter-head-chevron{color:var(--pr-grey-color);font-size:12px;
  transition:transform var(--pr-main-transition)}
.os24-filter-head[aria-expanded="true"] .os24-filter-head-chevron{transform:rotate(180deg)}

.os24-filter-body{padding:0;display:flex;flex-direction:column;gap:12px}

/* each facet group = a #f3f3f3 rounded panel */
.os24-fg{background:var(--pr-bg);border:0;border-bottom:0;border-radius:var(--pr-radius-ctl);padding:12px}
.os24-fg:last-child{border-bottom:0}
.os24-fg-head{
  display:flex;align-items:center;gap:8px;width:100%;
  background:transparent;border:0;padding:0;
  font-size:14px;line-height:21px;font-weight:600;color:var(--pr-dark-text-color);
  cursor:pointer;text-align:left;
}
.os24-fg-head:hover{background:transparent;color:var(--pr-primary-dark-color)}
.os24-fg.has-selection .os24-fg-head{color:var(--pr-primary-dark-color)}
.os24-fg-name{flex:1}
.os24-fg-badge{background:var(--pr-primary-dark-color);color:#fff;border-radius:10px;
  min-width:20px;height:20px;padding:0 6px;display:inline-flex;align-items:center;
  justify-content:center;font-size:10px;font-weight:600}
.os24-fg-chevron{color:var(--pr-grey-color);font-size:12px;transition:transform var(--pr-main-transition)}
.os24-fg-head[aria-expanded="true"] .os24-fg-chevron{transform:rotate(180deg)}
.os24-fg-inner{padding:8px 0 0}

.os24-fg-search{position:relative;margin-bottom:8px}
.os24-fg-search > i{position:absolute;left:10px;top:50%;transform:translateY(-50%);
  color:var(--pr-grey-color);font-size:11px}
.os24-fg-search-input{
  width:100%;background:var(--pr-white);border:2px solid var(--pr-white);
  border-radius:var(--pr-radius-ctl);padding:6px 10px 6px 28px;min-height:32px;
  font-size:12px;color:var(--pr-dark-text-color);
}
.os24-fg-search-input:focus{border-color:var(--pr-primary-light-color);outline:0;box-shadow:none}

.os24-check{
  display:flex;align-items:center;gap:8px;padding:5px 0;
  font-size:12px;line-height:18px;color:var(--pr-dark-text-color);
  border-radius:4px;cursor:pointer;
}
.os24-check:hover{background:transparent;color:var(--pr-primary-dark-color)}
.os24-check-box{
  flex:0 0 16px;width:16px;height:16px;position:relative;
  background:var(--pr-white);border:2px solid var(--pr-light-grey-color);border-radius:4px;
  transition:background-color var(--pr-main-transition),border-color var(--pr-main-transition);
}
.os24-check-input:checked + .os24-check-box{
  background:var(--pr-primary-dark-color);border-color:var(--pr-primary-dark-color);
}
.os24-check-input:focus-visible + .os24-check-box{
  outline:2px solid var(--pr-primary-light-color);outline-offset:1px;
}
.os24-check-label{flex:1;display:flex;align-items:center;gap:6px;min-width:0}
.os24-check-input:checked ~ .os24-check-label{color:var(--pr-primary-dark-color);font-weight:600}
/* count chip: navy pill, white, right-aligned (spec §7) */
.os24-check-count{
  margin-left:auto;background:var(--pr-primary-dark-color);color:#fff;
  border-radius:10px;min-width:22px;height:20px;padding:0 6px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:600;line-height:1;opacity:1;
}
.os24-check-input:checked ~ .os24-check-label .os24-check-count{color:#fff;opacity:1}

.os24-showmore{
  background:transparent;border:0;padding:6px 0 0;
  font-size:12px;font-weight:600;color:var(--pr-links-color);cursor:pointer;
}
.os24-showmore:hover{text-decoration:underline}

.os24-filter-foot{
  display:flex;align-items:center;gap:12px;
  background:transparent;border:0;padding:16px 0 0;
}
.os24-filter-reset{font-size:14px;color:var(--pr-grey-color);text-decoration:underline}
.os24-filter-reset:hover{color:var(--pr-dark-grey-color)}
/* !important: legacy vkladovke-skin.css paints this green with !important */
.os24-filter-apply,.os24-filter .btn-primary{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;background:var(--pr-primary-dark-color) !important;
  border:0 !important;
  border-radius:var(--pr-radius-ctl);color:#fff !important;font-size:14px;font-weight:700;
  transition:background-color var(--pr-main-transition);
}
.os24-filter-apply:hover,.os24-filter .btn-primary:hover{background:#0a2158 !important;color:#fff !important}

/* --- subcategory tiles (reference «Категорії магазину» tile look) --------- */
.os24-subcats{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:16px;margin:0 0 16px;
}
.os24-subcat{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  background:var(--pr-white);border:0;border-radius:var(--pr-radius-card);
  padding:12px;overflow:hidden;
  transition:box-shadow var(--pr-main-transition);
}
.os24-subcat:hover{transform:none;box-shadow:0 2px 24px 0 rgba(37,38,39,.12)}
.os24-subcat .img{
  display:block;width:100%;aspect-ratio:4/3;
  background-size:contain;background-repeat:no-repeat;background-position:center;
  background-color:var(--pr-white);
}
.os24-subcat .nm{
  padding:0;font-size:14px;line-height:1.3;font-weight:600;text-align:center;
  color:var(--pr-dark-text-color);
}
.os24-subcat:hover .nm{color:var(--pr-primary-dark-color)}

/* --- toolbar --------------------------------------------------------------- */
.vk-toolbar{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin-bottom:16px;
}
.vk-toolbar-group{display:flex;align-items:center;gap:8px}
.vk-toolbar label{font-size:14px;font-weight:600;margin:0;white-space:nowrap}
.vk-toolbar-select,.vk-toolbar select.form-select{
  width:auto;min-width:230px;background-color:var(--pr-bg);border:2px solid var(--pr-bg);
  border-radius:var(--pr-radius-ctl);padding:8px 32px 8px 16px;min-height:40px;
  font-size:12px;color:var(--pr-dark-grey-color);box-shadow:none;
}
.vk-toolbar select.vk-toolbar-select-limit{min-width:84px}
.vk-toolbar-end{margin-left:auto;display:flex;align-items:center;gap:12px}
.vk-toolbar-compare{font-size:12px;color:var(--pr-dark-grey-color);white-space:nowrap}
.vk-toolbar-compare:hover{color:var(--pr-primary-dark-color)}
.vk-toolbar-views{display:flex;gap:4px;background:var(--pr-bg);border-radius:var(--pr-radius-ctl);padding:4px}
.vk-view-btn{
  width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:0;border-radius:var(--pr-radius-ctl);
  color:var(--pr-dark-grey-color);font-size:14px;cursor:pointer;
  transition:background-color var(--pr-main-transition),color var(--pr-main-transition);
}
.vk-view-btn:hover{color:var(--pr-primary-dark-color)}
.vk-view-btn.active{background:var(--pr-primary-dark-color);color:#fff}

/* --- the listing grid ------------------------------------------------------ */
/* Grid by id: common.js swaps #product-list's class attribute wholesale
   (row-cols-*), so the layout must not depend on those classes. The id also
   outguns bootstrap's .row-cols-*>* width on the children. */
#product-list{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:0}
#product-list > *{width:100%;max-width:100%;padding:0;margin:0;flex:none}
@media (max-width:1399.98px){#product-list{grid-template-columns:repeat(3,1fr)}}
@media (max-width:991.98px){#product-list{grid-template-columns:repeat(2,1fr)}}
@media (max-width:575.98px){#product-list{grid-template-columns:1fr}}

/* list view (#button-list): one horizontal card per row, specs visible */
#product-list.product-list{grid-template-columns:1fr}
#product-list.product-list .product-thumb.pr-module-item{
  display:grid;grid-template-columns:220px minmax(0,1fr);column-gap:24px;
}
#product-list.product-list .pr-module-item-image{min-height:160px;margin-top:24px}
#product-list.product-list .pr-module-item-image img{max-width:180px;max-height:180px}
#product-list.product-list .vk-specs{display:block}
#product-list.product-list .pr-module-item-bottom{margin-top:24px}
@media (max-width:575.98px){
  #product-list.product-list .product-thumb.pr-module-item{grid-template-columns:44% 1fr;column-gap:12px}
}

/* --- pagination ------------------------------------------------------------ */
.vk-cat-pager{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-top:16px;
}
.vk-cat-results{font-size:12px;color:var(--pr-grey-color)}
/* flex-wrap matters on phones: the customer taxonomy puts far more products in a
   category than the supplier tree did, so the pager runs to many pages. Unwrapped
   it measured 510px on a 390px screen, widened the document, and the browser
   zoomed the whole page out — same failure mode as the breadcrumb above. */
.pagination{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.pagination .page-link{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0 8px;
  background:var(--pr-bg);border:0;border-radius:var(--pr-radius-ctl);
  color:var(--pr-dark-text-color);font-size:14px;font-weight:600;box-shadow:none;
  transition:background-color var(--pr-main-transition),color var(--pr-main-transition);
}
.pagination .page-link:hover{background:var(--pr-light-grey-color);color:var(--pr-dark-text-color)}
.pagination .page-item.active .page-link{background:var(--pr-primary-dark-color);color:#fff}
.pagination .page-item.disabled .page-link{opacity:.5}

/* --- description / empty state --------------------------------------------- */
.vk-cat-desc{margin-top:16px;font-size:14px;line-height:21px;color:var(--pr-dark-grey-color)}
.vk-cat-empty p{margin:0 0 16px}

/* --- small screens ---------------------------------------------------------- */
@media (max-width:767.98px){
  .vk-toolbar{gap:8px}
  .vk-toolbar-select,.vk-toolbar select.form-select{min-width:0}
  .vk-toolbar-end{margin-left:auto}
}