/* Attribute Facets UI */
.facet__body{ max-block-size: var(--facet-max, 240px); overflow: auto; }
.facet__list .form-check-input{ inline-size: 1.05rem; block-size: 1.05rem; }
.facet-count{ margin-inline-start: auto; opacity: .75; font-variant-numeric: tabular-nums; }

/* Swatches */
.facet__swatches .facet-swatch{ inline-size: 28px; block-size: 28px; border-radius: 999px; display: inline-block; border: 2px solid rgba(0,0,0,.15); cursor: pointer; position: relative; }
.facet__swatches input:checked + .facet-swatch{ outline: 2px solid rgba(0,0,0,.6); outline-offset: 2px; }
.facet__swatches input[disabled] + .facet-swatch{ opacity: .4; cursor: not-allowed; }

/* Keep things RTL-friendly */
.facet .card-header .btn{ padding: .125rem .5rem; }


/* ---- Facets isolation (kill global section/container bleed) ---- */

/* Our facet "section" should not inherit section backgrounds/paddings */
.js-shop-filters section.facet.card {
  background: #fff !important;         /* reset any accent bg */
  padding: 0 !important;               /* neutralize .section section { padding:60px } */
  border: 1px solid rgba(0,0,0,.17);
  border-radius: var(--bs-border-radius);
}
.form-check{
  margin-top: 10px;
}
/* Header + toggle button (neutral, not from .container button styles) */
.js-shop-filters .facet .card-header {
  background: #f5f7f9 !important;      /* slightly darker than body */
  color: inherit;
  border-bottom: 1px solid rgba(0,0,0,.06);
  padding: .5rem .75rem;
}

.js-shop-filters .facet .card-header .btn {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: rgba(0,0,0,.7);
}
.js-shop-filters .facet .card-header .btn:hover,
.js-shop-filters .facet .card-header .btn:focus {
  color: rgba(0,0,0,.9);
}

/* Body: ensure consistent padding and internal scroll only here */
.js-shop-filters .facet .facet__body {
  background: #fff;
  padding: .5rem .75rem !important;    /* explicit, stable */
  max-block-size: var(--facet-max, 240px);
  overflow: auto;
}

/* Swatch visuals unaffected by theme */
.js-shop-filters .facet .facet__swatches .facet-swatch {
  inline-size: 28px; block-size: 28px;
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.15);
}

/* Make the facet count align left in RTL (number on LEFT) */
[dir="rtl"] .js-shop-filters .facet .facet-count {
  margin-inline-start: auto; /* already set earlier; keep explicit here */
}

/* Remove weird inherited hovers/backgrounds on list items */
.js-shop-filters .facet .facet__item,
.js-shop-filters .facet .facet-swatch-wrap {
  background: transparent !important;
}

/* Optional: if your theme colors .portfolio section > * directly, add this */
.portfolio .js-shop-filters section.facet.card {
  background: #fff !important;
}

.sidebar, .shop-sidebar, .js-shop-filters {
  /* ensure nested sections inside sidebar don’t get global section padding */
}
.js-shop-filters section {
  padding: 0 !important;
}

/* Card hover */
.js-shop-filters .facet.card {
  transition: box-shadow .2s ease, border-color .2s ease;
}
.js-shop-filters .facet.card:hover {
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.12);
}

/* List items */
.js-shop-filters .facet .facet__item {
  border-radius: .5rem;
  transition: background-color .15s ease, transform .12s ease, box-shadow .15s ease;
  padding-inline: .35rem;
}
.js-shop-filters .facet .facet__item:hover {
  background: #f7f9fb;
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(0,0,0,.05);
}

/* Swatches */
.js-shop-filters .facet .facet-swatch {
  transition: box-shadow .15s ease, transform .12s ease, border-color .15s ease;
}
.js-shop-filters .facet .facet-swatch-wrap:hover .facet-swatch {
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px rgba(0,0,0,.08);
}


.js-shop-filters .facet .facet__swatches{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--swatch-cell), 1fr));
  gap: .5rem;
}


.js-shop-filters .facet .facet-icon{
  inline-size: 24px; block-size: 24px; object-fit: contain; opacity: .9;
}


/* ===== Uniform color swatch tiles (fixed cell width) ===== */
:root{
  --swatch-size: 28px;     /* circle diameter */
  --swatch-cell: 74px;     /* tile width — tweak to taste */
  --swatch-gap: .5rem;
}

/* only for Color facet; remove [data-facet="pa_color"] to apply to all swatch facets */
.js-shop-filters .facet[data-facet="pa_color"] .facet__swatches{
  display: flex;
  flex-wrap: wrap;
  gap: var(--swatch-gap);
  align-items: flex-start;
}

/* each tile has exactly the same width */
.js-shop-filters .facet[data-facet="pa_color"] .facet-swatch-wrap{
  flex: 0 0 var(--swatch-cell);
  inline-size: var(--swatch-cell);
  text-align: center;
}

/* center the circle and keep size fixed */
.js-shop-filters .facet[data-facet="pa_color"] .facet-swatch{
  inline-size: var(--swatch-size);
  block-size: var(--swatch-size);
  margin-inline: auto;
}

/* labels don’t grow the tile */
.js-shop-filters .facet[data-facet="pa_color"] .facet-swatch-name{
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* count stays compact on the left in RTL */
[dir="rtl"] .js-shop-filters .facet[data-facet="pa_color"] .facet-count{
  min-inline-size: 1.5ch;
  text-align: center;
}


/* Center the name + count under each swatch and keep them tight */
.js-shop-filters .facet[data-facet="pa_color"] .facet-swatch-wrap .small.text-muted {
  display: grid !important;
  grid-auto-flow: column;          /* 2 cells: [name][count] */
  justify-content: center;         /* center the pair as a block */
  align-items: center;
  gap: .25rem;                     /* bring number closer to the name */
  text-align: center;
}

/* Neutralize Bootstrap's ms-auto so count doesn't fly away */
.js-shop-filters .facet[data-facet="pa_color"] .facet-count {
  margin-inline-start: 0 !important;
  min-inline-size: 1ch;            /* compact */
  text-align: start;
}

/* Make the name behave nicely inside the fixed-width tile */
.js-shop-filters .facet[data-facet="pa_color"] .facet-swatch-name {
  display: inline-block;
  max-inline-size: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* approx height for 2 rows (circle + label line + gaps) */
.js-shop-filters .facet[data-facet="pa_color"] .facet__body{
  --facet-max: calc(3 * (var(--swatch-size) + 28px) + var(--swatch-gap));
}


/* BRAND facet ONLY */
/* Brands card: match other facet cards' top spacing */
.js-shop-filters .facet[data-facet="brand"] .facet__body{
  padding: 1rem .75rem .6rem !important;  /* top = 1rem like others */
}

.js-shop-filters .facet[data-facet="brand"] .facet__item{
  display:flex; align-items:center; gap:.5rem;
  padding:.35rem .5rem; border-radius:.5rem;
  /* hover effect comes from your existing global facet hover rules */
}

.js-shop-filters .facet[data-facet="brand"] .form-check-input{
  inline-size:1.05rem; block-size:1.05rem;
  margin:0;
}

.js-shop-filters .facet[data-facet="brand"] .form-check-label{
  display:inline-flex; align-items:center; gap:.5rem;
  flex:1; min-inline-size:0;
}

.js-shop-filters .facet[data-facet="brand"] .facet-name{
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}

.js-shop-filters .facet[data-facet="brand"] .brand-icon{
  inline-size:24px; block-size:24px; flex:0 0 24px;
  object-fit:contain; opacity:.95;
}

/* RTL nudge for the icon only in brands facet */
[dir="rtl"] .js-shop-filters .facet[data-facet="brand"] .brand-icon{
  margin-inline-end:.125rem;
}


/* ---- Card hover (same feel as your filter boxes) ---- */
.js-shop-filters .facet.card[data-facet="sort"],
.js-shop-filters .facet.card[data-facet="price"],
.js-shop-filters .facet.card[data-facet="options"]{
  transition: transform .18s ease, box-shadow .18s ease;
}
.js-shop-filters .facet.card[data-facet="sort"]:hover,
.js-shop-filters .facet.card[data-facet="price"]:hover,
.js-shop-filters .facet.card[data-facet="options"]:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.05);
}

/* Parent-only hover for sort/price/options cards */
.js-shop-filters .facet.card[data-facet="sort"],
.js-shop-filters .facet.card[data-facet="price"],
.js-shop-filters .facet.card[data-facet="options"]{
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease;
}
.js-shop-filters .facet.card[data-facet="sort"]:hover,
.js-shop-filters .facet.card[data-facet="price"]:hover,
.js-shop-filters .facet.card[data-facet="options"]:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.05);
}

/* keep dropdown visible and above the price slider */
.js-shop-filters .facet.card[data-facet="sort"]{ overflow: visible; z-index: 2; }
.js-shop-filters .facet.card[data-facet="sort"] .dropdown-menu{ z-index: 2000; }


/* ---- Row layout + row hover (only for facets that have items) ---- */
.js-shop-filters .facet[data-facet="sort"] .facet__item,
.js-shop-filters .facet[data-facet="options"] .facet__item{
  display:flex; align-items:center; gap:.5rem;
  padding:.35rem .5rem; border-radius:.5rem;
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
  cursor: pointer;
}
.js-shop-filters .facet[data-facet="sort"] .facet__item:hover,
.js-shop-filters .facet[data-facet="options"] .facet__item:hover{
  background:#f7f9fb;
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(0,0,0,.05);
}

/* Inputs + labels inside those rows */
.js-shop-filters .facet[data-facet="sort"] .form-check-input,
.js-shop-filters .facet[data-facet="options"] .form-check-input{
  inline-size:1.05rem; block-size:1.05rem; margin:0;
}
.js-shop-filters .facet[data-facet="sort"] .form-check-label,
.js-shop-filters .facet[data-facet="options"] .form-check-label{
  display:inline-flex; align-items:center; gap:.5rem;
  flex:1; min-inline-size:0;
}
.js-shop-filters .facet .facet-name{
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}

/* Options card spacing like others */
.js-shop-filters .facet[data-facet="options"] .card-body{
  padding: 1rem .75rem .6rem; /* match other cards */
}

/* One tidy row for the on-sale option */
.js-shop-filters .facet[data-facet="options"] .form-check{
  display:flex; align-items:center; gap:.5rem;
  margin: 0;                          /* kill BS default margin-bottom */
  padding:.35rem .5rem;               /* same feel as other rows */
  border-radius:.5rem;
  cursor:pointer;
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.js-shop-filters .facet[data-facet="options"] .form-check:hover{
  background:#f7f9fb;
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(0,0,0,.05);
}
.js-shop-filters .facet[data-facet="options"] .form-check-input{
  margin:0; inline-size:1.05rem; block-size:1.05rem;
}
.js-shop-filters .facet[data-facet="options"] .form-check-label{
  margin:0; display:flex; align-items:center;
}



/* Full-row pill + hover only for filter rows */
.js-shop-filters .facet .facet-row{
  display:flex; align-items:center; gap:.5rem;
  margin: .25rem 0;
  padding:.35rem .5rem;
  border-radius:.625rem;
  cursor:pointer;
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.js-shop-filters .facet .facet-row:hover{
  background:#f7f9fb;
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(0,0,0,.05);
}

/* Inputs + labels inside the row */
.js-shop-filters .facet .facet-row .form-check-input{
  inline-size:1.05rem; block-size:1.05rem; margin:0;
}
.js-shop-filters .facet .facet-row .form-check-label{
  display:flex; align-items:center; gap:.5rem;
  margin:0; width:100%;
}

/* Brand icon stays 24×24 with a touch of polish */
.js-shop-filters .facet .facet-row .brand-icon{
  inline-size:24px; block-size:24px; flex:0 0 24px; object-fit:contain; opacity:.95;
}

/* Keep card-body padding consistent (title spacing) */
.js-shop-filters .facet[data-facet="options"] .card-body{ padding: 1rem .75rem .6rem; }

/* RTL nudge */
[dir="rtl"] .js-shop-filters .facet .facet-row .brand-icon{ margin-inline-end:.125rem; }


/* ---------- Facet search: spacing + icon centering ---------- */
.js-shop-filters .facet .facet-search{
  position: relative;
  margin: .5rem .75rem .75rem;          /* breathing room inside the card */
}

.js-shop-filters .facet .facet-search .form-control{
  height: 40px;
  line-height: 1.25;
  border-radius: .6rem;
  padding-inline: .75rem;               /* base padding */
  padding-inline-start: 2.25rem;        /* room for the icon (LTR) */
}

/* Icon: absolutely centered vertically */
.js-shop-filters .facet .facet-search .bi-search,
.js-shop-filters .facet .facet-search .facet-search__icon{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  inset-inline-start: .65rem;           /* LTR left */
  font-size: 1rem;
  opacity: .6;
  pointer-events: none;
}

/* RTL swap: icon on the right, input padding flipped */
[dir="rtl"] .js-shop-filters .facet .facet-search .form-control{
  padding-inline-start: .75rem;
  padding-inline-end: 2.25rem;
}
[dir="rtl"] .js-shop-filters .facet .facet-search .bi-search,
[dir="rtl"] .js-shop-filters .facet .facet-search .facet-search__icon{
  inset-inline-start: auto;
  inset-inline-end: .65rem;
}

/* Kill global form-check margins inside facets (prevents squeeze/offset) */
.js-shop-filters .facet .form-check{ margin: 0 !important; }

.form-control:focus{
  border-color: #018880 !important;
  box-shadow: 0 10px 40px color-mix(in srgb, var(--accent-color), transparent 80%) !important;
}