/*
 * ═══════════════════════════════════════════════════════════════
 *  category.css — Kazoku (Chef) variant  |  Barik Tools Theme
 *  Visual ref : bariklabs.com/tools/draft/category.html
 *  DOM target : category.twig (latest, b- prefix)
 *  Global tokens: style.css (:root)
 * ═══════════════════════════════════════════════════════════════
 *
 *  Prefix map (old → new):
 *    kz-catbar        → b-catbar
 *    kz-select        → b-select
 *    kz-filter-btn    → b-filter-btn
 *    kz-grid          → b-grid       ← base rules in style.css
 *    kz-card          → b-card       ← base rules in style.css
 *    kz-ribbon        → b-ribbon     ← base rules in style.css
 *    kz-paging        → b-paging
 *    kz-filter-*      → b-filter-*
 *
 *  Split:
 *    style.css   → .b-grid, .b-card, .b-ribbon, .b-price--*,
 *                  .wish-mini, .compare-mini, .btn-addtocart
 *    category.css → everything else (layout, sidebar, catbar,
 *                   paging, drawer) + 4-col grid context override
 * ═══════════════════════════════════════════════════════════════
 */

/* ───────────────────────────────────────────
   0. Local tokens
   ─────────────────────────────────────────── */
:root {
  --b-sidebar-w : 280px;
}

/* ───────────────────────────────────────────
   1. Breadcrumb
   ─────────────────────────────────────────── */
.breadcrumb {
  background    : var(--bg-alt, #f8fafc);
  border-bottom : 1px solid var(--border-soft, #e5e7eb);
}

.breadcrumb__inner {
  max-width   : var(--container, 1200px);
  margin      : 0 auto;
  padding     : 10px 16px;
  display     : flex;
  align-items : center;
  flex-wrap   : wrap;
  gap         : 6px;
  font-size   : 14px;
  color       : var(--text-muted, #9ca3af);
}

.breadcrumb__home {
  display     : inline-flex;
  align-items : center;
  color       : var(--text-muted, #9ca3af);
  transition  : color 150ms ease;
}
.breadcrumb__home:hover { color: var(--primary, #a11414); }

.breadcrumb__sep     { opacity: .6; font-size: 12px; }

.breadcrumb__link {
  color      : var(--text-muted, #9ca3af);
  transition : color 150ms ease;
}
.breadcrumb__link:hover  { color: var(--primary, #a11414); }
.breadcrumb__current     { color: var(--text-main, #111827); }

/* ───────────────────────────────────────────
   2. Category intro / hero   .cat-intro
   ─────────────────────────────────────────── */
.cat-intro {
  padding       : 28px 0 24px;
  border-bottom : 1px solid var(--border-soft, #e5e7eb);
  background    : var(--bg, #fff);
}

.cat-intro__inner {
  max-width      : var(--container, 1200px);
  margin         : 0 auto;
  padding        : 0 16px;
  display        : flex;
  flex-direction : column;
  gap            : 10px;
}

.cat-intro__label {
  display        : inline-block;
  font-size      : 13px;
  text-transform : uppercase;
  letter-spacing : 0.14em;
  font-weight    : 600;
  color          : var(--primary, #a11414);
  background     : rgba(161,20,20,.06);
  border         : 1px solid rgba(161,20,20,.20);
  padding        : 3px 10px;
  border-radius  : 999px;
}

.cat-intro__title {
  font-size      : clamp(26px, 2.2vw, 34px);
  font-weight    : 700;
  letter-spacing : -.03em;
  color          : var(--text-main, #111827);
  margin         : 0;
  display        : flex;
  align-items    : center;
  flex-wrap      : wrap;
  gap            : 10px;
}

.cat-intro__desc {
  max-width   : 720px;
  font-size   : 15px;
  line-height : 1.65;
  color       : var(--text-sub, #4b5563);
  margin      : 0;
}
.cat-intro__desc p { margin: 0; }

/* ───────────────────────────────────────────
   3. Sub-category pills   .cat-subcats
   ─────────────────────────────────────────── */
.cat-subcats {
  background    : var(--bg, #fff);
  border-bottom : 1px solid var(--border-soft, #e5e7eb);
}

.cat-subcats__inner {
  max-width      : var(--container, 1200px);
  margin         : 0 auto;
  padding        : 14px 16px;
  display        : flex;
  align-items    : center;
  gap            : .75rem;
  overflow-x     : auto;
  scrollbar-width: thin;
  scrollbar-color: var(--barik-300, #f3b0b0) transparent;
}
.cat-subcats__inner::-webkit-scrollbar        { height: 4px; }
.cat-subcats__inner::-webkit-scrollbar-thumb  {
  background    : var(--barik-200, #f9d3d3);
  border-radius : 999px;
}

.cat-subcat__item {
  display       : inline-flex;
  align-items   : center;
  padding       : .45rem .95rem;
  border-radius : 999px;
  border        : 1px solid var(--border-soft, #e5e7eb);
  background    : var(--bg, #fff);
  font-size     : 14px;
  color         : var(--text-muted, #9ca3af);
  white-space   : nowrap;
  cursor        : pointer;
  transition    : background 150ms ease, color 150ms ease,
                  border-color 150ms ease, transform 150ms ease,
                  box-shadow 150ms ease;
}
.cat-subcat__item:hover {
  border-color : var(--barik-300, #f3b0b0);
  transform    : translateY(-1px);
  box-shadow   : 0 6px 18px rgba(15,23,42,.06);
}
.cat-subcat__item.is-active {
  background   : var(--barik-600, #a11414);
  border-color : var(--barik-600, #a11414);
  color        : #fff;
  box-shadow   : 0 8px 20px rgba(161,20,20,.28);
}

/* ───────────────────────────────────────────
   4. Page wrapper + layout grid
   #product-category → .cat-layout
   ─────────────────────────────────────────── */
#product-category {
    max-width: var(--container, 1200px);
    margin: 0 auto;
    padding: 24px 16px 48px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.cat-layout {
  display               : grid;
  grid-template-columns : var(--b-sidebar-w) minmax(0, 1fr);
  gap                   : 18px;
  align-items           : flex-start;
}

/* No sidebar at all */
.cat-layout:not(:has(#column-left)):not(:has(#column-right)) {
  grid-template-columns : minmax(0, 1fr);
}
/* Right sidebar only */
.cat-layout:has(#column-right):not(:has(#column-left)) {
  grid-template-columns : minmax(0, 1fr) var(--b-sidebar-w);
}
/* Both sidebars */
.cat-layout:has(#column-left):has(#column-right) {
  grid-template-columns : var(--b-sidebar-w) minmax(0, 1fr) var(--b-sidebar-w);
}

/* ───────────────────────────────────────────
   5. Sidebar   aside#column-left / right
   mFilter outputs these as direct .cat-layout children.
   ─────────────────────────────────────────── */
.cat-layout > aside#column-left,
.cat-layout > aside#column-right {
    box-shadow: var(--b-card-shadow);
    padding: 0;
    position: sticky;
    top: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Allow inner content to scroll */
.cat-layout > aside#column-left > *,
.cat-layout > aside#column-right > * {
  flex       : 1;
  overflow-y : auto;
  min-height : 0;
}

/* Headings inside sidebar (mFilter / nav module) */
.cat-layout > aside .box-heading,
.cat-layout > aside h3 {
  font-size      : 15px;
  font-weight    : 600;
  color          : var(--text-main, #111827);
  margin         : 0 0 10px;
  padding-bottom : 8px;
  border-bottom  : 1px dashed var(--border-soft, #e5e7eb);
  display        : flex;
  align-items    : center;
  gap            : 6px;
}

/* Nav list */
.cat-layout > aside ul {
  list-style : none;
  padding    : 0;
  margin     : 8px 0 0;
  font-size  : 14px;
}

.cat-layout > aside ul li a {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  width           : 100%;
  padding         : 5px 6px;
  border-radius   : 7px;
  color           : var(--text-sub, #4b5563);
  transition      : color 140ms ease, background 140ms ease;
}
.cat-layout > aside ul li a:hover {
  color      : var(--primary, #a11414);
  background : rgba(161,20,20,.04);
}
.cat-layout > aside ul li a.active,
.cat-layout > aside ul li.active > a {
  color       : var(--primary, #a11414);
  font-weight : 600;
}

/* ───────────────────────────────────────────
   6. Toolbar   .b-catbar
   ─────────────────────────────────────────── */
.b-catbar {
  display         : flex;
  flex-wrap       : wrap;
  gap             : 12px 16px;
  justify-content : space-between;
  align-items     : center;
  padding         : 12px 16px;
  border-radius   : 999px;
  background      : #fff;
  border          : 1px solid var(--border-soft, #e5e7eb);
  box-shadow      : 0 8px 22px rgba(15,23,42,.04);
  margin-bottom   : 18px;
}

.b-catbar__left {
  display     : flex;
  flex-wrap   : wrap;
  gap         : 8px 12px;
  align-items : center;
}

.b-catbar__count {
  font-size : 14px;
  color     : var(--text-sub, #4b5563);
}
.b-catbar__count strong { font-weight: 600; }

.b-catbar__right {
  display     : flex;
  align-items : center;
  gap         : 8px;
}

/* ── Select wrapper   .b-select ── */
.b-select {
  position    : relative;
  display     : inline-flex;
  align-items : center;
}

/* FontAwesome chevron already in markup (.fa.fa-angle-down),
   hide the CSS pseudo chevron to avoid doubling */
.b-select .fa {
  position       : absolute;
  right          : 10px;
  font-size      : 12px;
  color          : var(--text-muted, #9ca3af);
  pointer-events : none;
}

.b-select__field {
  appearance         : none;
  -webkit-appearance : none;
  padding            : 6px 30px 6px 10px;
  border-radius      : 999px;
  border             : 1px solid var(--border-soft, #e5e7eb);
  background         : #f9fafb;
  font-size          : 14px;
  color              : var(--text-sub, #4b5563);
  cursor             : pointer;
  font-family        : inherit;
  transition         : border-color 150ms ease;
}
.b-select__field:focus {
  outline      : none;
  border-color : var(--barik-400, #e88080);
}

/* Mobile filter button   .b-filter-btn — hidden on desktop */
.b-filter-btn {
  display       : none;
  align-items   : center;
  gap           : 6px;
  border-radius : 999px;
  border        : 1px solid var(--primary, #a11414);
  background    : var(--primary, #a11414);
  color         : #fff;
  padding       : 6px 14px;
  font-size     : 14px;
  font-weight   : 600;
  font-family   : inherit;
  cursor        : pointer;
  transition    : background 150ms ease;
}
.b-filter-btn:hover { background: var(--primary-dark, #7c0f0f); }

/* ───────────────────────────────────────────
   7. Product grid column overrides
   .b-grid base rules live in style.css.
   Only context-aware overrides belong here.
   ─────────────────────────────────────────── */

/* 4-col when no sidebar present */
.cat-layout:not(:has(#column-left)):not(:has(#column-right)) .b-grid {
  grid-template-columns : repeat(4, minmax(0, 1fr));
}

/* ───────────────────────────────────────────
   9. Pagination   .b-paging
   ─────────────────────────────────────────── */
.b-paging {
  display         : flex;
  justify-content : center;
  margin-top      : 20px;
}

.b-paging .pagination {
  display         : flex;
  flex-wrap       : wrap;
  justify-content : center;
  gap             : 6px;
  list-style      : none;
  padding         : 0;
  margin          : 0;
  font-size       : 14px;
}

.b-paging .pagination li a,
.b-paging .pagination li span {
  min-width       : 28px;
  height          : 28px;
  border-radius   : 999px;
  border          : 1px solid var(--border-soft, #e5e7eb);
  background      : #fff;
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  padding         : 0 8px;
  color           : var(--text-sub, #4b5563);
  text-decoration : none;
  transition      : border-color 150ms ease, color 150ms ease;
}
.b-paging .pagination li a:hover {
  border-color : var(--primary, #a11414);
  color        : var(--primary, #a11414);
}
.b-paging .pagination li.active span {
  background   : var(--primary, #a11414);
  border-color : var(--primary, #a11414);
  color        : #fff;
  font-weight  : 600;
}

/* ───────────────────────────────────────────
   10. Mobile filter overlay + drawer
   .b-filter-overlay / .b-filter-drawer
   ─────────────────────────────────────────── */
.b-filter-overlay {
  position       : fixed;
  inset          : 0;
  background     : rgba(15,23,42,.45);
  opacity        : 0;
  pointer-events : none;
  transition     : opacity 200ms ease;
  z-index        : 30;
}
.b-filter-overlay.is-open {
  opacity        : 1;
  pointer-events : auto;
}

.b-filter-drawer {
  position       : fixed;
  top            : 0;
  left           : 0;
  bottom         : 0;
  width          : min(90vw, 320px);
  background     : var(--bg, #fff);
  border-radius  : 0 18px 18px 0;
  border-right   : 1px solid var(--border-soft, #e5e7eb);
  box-shadow     : 0 8px 24px rgba(15,23,42,.12);
  z-index        : 40;
  overflow-y     : auto;
  transform      : translateX(-100%);
  transition     : transform 200ms ease;
  display        : flex;
  flex-direction : column;
  padding        : 16px 14px 14px;
}
.b-filter-drawer.is-open { transform: translateX(0); }

.b-filter-drawer__head {
  display         : flex;
  justify-content : space-between;
  align-items     : center;
  padding-bottom  : 10px;
  border-bottom   : 1px solid var(--border-soft, #e5e7eb);
  margin-bottom   : 10px;
  flex-shrink     : 0;
}

.b-filter-drawer__title {
  font-size   : 15px;
  font-weight : 600;
  color       : var(--text-main, #111827);
}

.b-filter-drawer__close {
  border      : none;
  background  : transparent;
  cursor      : pointer;
  font-size   : 14px;
  color       : var(--text-muted, #9ca3af);
  display     : inline-flex;
  align-items : center;
  padding     : 4px;
  line-height : 1;
  transition  : color 140ms ease;
}
.b-filter-drawer__close:hover { color: var(--primary, #a11414); }

/* ───────────────────────────────────────────
   11. Bottom description   .cs__flex
   ─────────────────────────────────────────── */
.cs__flex {
  max-width : var(--container, 1200px);
  margin    : 0 auto;
  padding   : 0 16px 48px;
}

.cs__description {
  background    : #f9fafb;
  border        : 1px solid var(--border-soft, #e5e7eb);
  border-radius : var(--radius-lg, 14px);
  padding       : 28px 32px;
}

.description-bottom {
  font-size   : 15px;
  line-height : 1.75;
  color       : var(--text-sub, #4b5563);
}
.description-bottom h1,
.description-bottom h2,
.description-bottom h3 {
  color       : var(--text-main, #111827);
  margin-top  : 0;
  font-weight : 700;
}

/* ───────────────────────────────────────────
   12. Responsive
   ─────────────────────────────────────────── */

@media (min-width: 1200px) {
  :root { --b-sidebar-w: 300px; }
}

/* ≤ 1023px — sidebar slides in as drawer */
@media (max-width: 1023px) {
  .cat-layout,
  .cat-layout:has(#column-left),
  .cat-layout:has(#column-right),
  .cat-layout:has(#column-left):has(#column-right) {
    display : block !important;
  }

  .cat-layout > aside#column-left,
  .cat-layout > aside#column-right {
    position       : fixed;
    top            : 0;
    left           : 0;
    bottom         : 0;
    width          : min(90vw, 320px);
    max-height     : none;
    border-radius  : 0 18px 18px 0;
    transform      : translateX(-100%);
    transition     : transform 200ms ease;
    z-index        : 40;
    padding        : 16px 14px 14px;
    overflow-y     : auto;
  }
  .cat-layout > aside#column-left.is-open,
  .cat-layout > aside#column-right.is-open {
    transform : translateX(0);
  }

  .b-catbar {
    border-radius  : 16px;
    flex-direction : column;
    align-items    : stretch;
  }
  .b-catbar__left  { justify-content: space-between; }
  .b-catbar__right { display: none; }
  .b-filter-btn    { display: inline-flex; }
}

/* ≤ 640px */
@media (max-width: 640px) {
  #product-category { padding: 16px 12px 32px; }
  .cat-intro        { padding: 20px 0 16px; }
  .cs__description  { padding: 20px 18px; }
}

/* ───────────────────────────────────────────
   13. Empty state
   ─────────────────────────────────────────── */
#content > p {
  color     : var(--text-muted, #9ca3af);
  font-size : 14px;
  margin    : 20px 0;
}
#content .buttons { margin-top: 12px; }