/*
 * Shop Archive Styles
 * Sections:
 *   1. Shop Hero (breadcrumbs)
 *   2. Shop Categories (active state extension)
 *   3. Shop Filter Bar
 *   4. Shop Products Grid
 *   5. Load More / Count
 *   6. Sidebar Drawer
 *   7. Price Histogram
 *   8. Price Range Slider
 *   9. Responsive
 */

/* ============================================================
   1. SHOP HERO
============================================================ */
.shop-hero {
  padding-top: 1.25em;
  padding-bottom: 0;
}

.shop-hero__breadcrumbs .breadcrumb {
  justify-content: center;
  text-transform: uppercase;
}

.shop-hero__breadcrumbs .breadcrumb__separator,
.shop-hero__breadcrumbs .breadcrumb__item--current span,
.shop-hero__breadcrumbs .breadcrumb a {
  color: #121212;
}

.shop-hero__breadcrumbs .breadcrumb__separator,
.shop-hero__breadcrumbs .breadcrumb__item--current span {
  opacity: 0.6;
}

/* ============================================================
   2. SHOP CATEGORIES – active state extension
============================================================ */
.shop-categories {
  padding-top: 3.35em;
  padding-bottom: 1.875em;
  overflow: hidden;
  border-bottom: 1px solid var(--stroke-light);
}

.shop-cat-description {
  padding-top: 1.875em;
  padding-bottom: calc(1.875em * 2);
}
.shop-cat-description :where(h1, h2, h3, h4, h5, h6) {
  text-transform: uppercase;
}

/* ============================================================
   BRAND HERO – taxonomy-product_brand.php
============================================================ */
.brand-hero {
  padding-top: calc(1.25em + 10px);
  padding-bottom: 0;
}

.brand-hero__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.brand-hero__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 3em;
  width: calc(50% - 10px / 2);
  background-color: var(--color-white);
  border-radius: var(--border-radius--small);
  padding: 2.5em;
}

.brand-hero__name {
  margin: 0 0 0.3em;
  text-transform: uppercase;
  font-size: var(--font-size--h1);
}

.brand-hero__desc {
  margin: 0;
  color: var(--color-dark);
  font-size: 1.15em;
  max-width: 40em;
  line-height: 1.461;
}

.brand-hero__images {
  width: calc(50% - 10px / 2);
  display: flex;
  gap: 10px;
}

.brand-hero__image-item {
  flex: 1;
}

.brand-hero__image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--border-radius--small);
}

@media only screen and (max-width: 991px) {
  .brand-hero__inner {
    flex-direction: column;
  }

  .brand-hero__info,
  .brand-hero__images {
    width: 100%;
  }

  .brand-hero__info {
    padding: 2em 15px;
  }

  .brand-hero__desc {
    font-size: 1em;
  }

  .brand-hero {
    padding-top: 2em;
    padding-bottom: 0;
  }
}

@media only screen and (max-width: 575px) {
  .shop-cat-description {
    padding-top: 1em;
    padding-bottom: 2em;
  }
}

/* Override: active category circle gets black border */
.product-categories__item--active img {
  outline: 1px solid var(--color-black);
}

.product-categories__item--active h5 {
  color: var(--color-black);
}

/* ============================================================
   3. SHOP FILTER BAR
============================================================ */
.shop-main {
  padding-top: 0;
}

.shop-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: 1.625em 0;
}

.search-results .shop-filter {
  border-top: 1px solid #e6e6e6;
}

.shop-filter__left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75em;
}

.shop-filter__right {
  display: flex;
  align-items: center;
  gap: 0.75em;
  flex-shrink: 0;
}

/* ── Dropdowns ─────────────────────────────────────────────── */
.shop-filter__dropdown {
  position: relative;
}

.shop-filter__dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 0.445em;
  background: none;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--border-radius--small);
  padding: 1.133334em 1.667em;
  font-size: 0.9375em;
  font-family: "Fjalla One", sans-serif;
  font-weight: 400;
  line-height: 1.469;
  cursor: pointer;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0;
  background-color: var(--color-white);
  transition:
    border-color 0.2s,
    background 0.2s;
}

.shop-filter__dropdown-trigger svg {
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

.shop-filter__dropdown.is-open .shop-filter__dropdown-trigger svg {
  transform: rotate(180deg);
}

.shop-filter__dropdown-panel {
  position: absolute;
  top: calc(100% + 0.75em);
  left: 0;
  min-width: 17.5em;
  background: var(--color-white);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--border-radius--small);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  z-index: 50;
  display: none;
  padding: 0 0.575em 0 0;
}

.shop-filter__dropdown.is-open .shop-filter__dropdown-panel {
  display: block;
}

/* ── Counter badge ──────────────────────────────────────────── */
.shop-filter__count {
  border-radius: var(--border-radius--small);
  font-size: 0.8em;
  min-width: 1.251em;
  height: 1.501em;
  font-weight: 500;
  background-color: rgb(0, 0, 0);
  color: rgb(246, 246, 246);
  font-family: "Archivo", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.shop-filter__count[hidden] {
  display: none;
}

/* ── Panel header (Odaberi sve / Ništa) ─────────────────────── */
.shop-filter__panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5em 1em;
  border-bottom: 1px solid var(--stroke-light);
}

.shop-filter__select-all,
.shop-filter__clear-all {
  background: none;
  border: none;
  padding: 0.15em 0;
  font-size: 0.6875em;
  cursor: pointer;
  color: var(--color-black);
  text-underline-offset: 2px;
  transition: opacity 0.15s;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1.504;
}

.shop-filter__select-all:hover,
.shop-filter__clear-all:hover {
  opacity: 0.55;
}

/* ── Checkbox list ──────────────────────────────────────────── */
.shop-filter__dropdown-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 22.5em;
  overflow-y: auto;
}

.shop-filter__check-item label {
  display: flex;
  align-items: center;
  gap: 0.92em;
  padding: 0.81em 1em;
  cursor: pointer;
  font-size: 0.82em;
  color: var(--color-black);
  transition: background 0.15s;
}

.shop-filter__check-item label:hover {
  background: var(--bg-light);
}

.shop-filter__check-item input[type="checkbox"] {
  flex-shrink: 0;
  width: 1.35em;
  height: 1.35em;
  accent-color: var(--color-black);
  cursor: pointer;
  margin: 0;
}

.shop-filter__check-item label span:first-of-type {
  flex: 1;
}

.shop-filter__item-count {
  font-size: 0.915em;
  line-height: 1.5;
  padding: 0px 4px;
  flex-shrink: 0;
  color: rgba(18, 18, 18, 0.5);
  background-color: #f6f6f6;
  border-radius: var(--border-radius--small);
}

.shop-filter__check-item label:hover .shop-filter__item-count {
  background-color: var(--color-white);
}

/* ── Active filter tags ─────────────────────────────────────── */
.shop-filter__active {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75em;
  padding-left: 0.75em;
  position: relative;
}

.shop-filter__active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 21px;
  background-color: rgba(0, 0, 0, 0.1);
}

.filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.445em;
  font-size: 0.9375em;
  font-family: "Fjalla One", sans-serif;
  font-weight: 400;
  line-height: 1.469;
  white-space: nowrap;
  color: #072835;
  background-color: #efefef;
  border-radius: 10em;
  padding: 0.4658em 0.8em;
}

.filter-tag__remove {
  padding: 0;
  margin: 0;
  border: 0;
  outline: none;
  cursor: pointer;
}

.filter-tag__remove::before {
  content: "";
  position: relative;
  width: 1.05em;
  height: 1.05em;
  display: block;
  background-image: url("../img/remove.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.filter-tag__remove:hover {
  opacity: 1;
}

/* ── Sort dropdown (right-aligned panel) ────────────────────── */
.shop-filter__dropdown--sort .shop-filter__dropdown-panel {
  left: auto;
  right: 0;
  min-width: 14em;
  padding: 0;
}

.shop-filter__sort-item {
  padding: 0.75em 1em;
  font-size: 0.82em;
  cursor: pointer;
  color: var(--color-black);
  transition: background 0.15s;
  list-style: none;
}

.shop-filter__sort-item:hover {
  background: var(--bg-light);
}

.shop-filter__sort-item.is-active {
  font-weight: 600;
  background: var(--bg-light);
}

/* ── Sidebar toggle button ─────────────────────────────────── */
.shop-filter__sidebar-btn {
  display: flex;
  align-items: center;
  gap: 0.445em;
  background: none;
  border: 1px solid rgba(0, 0, 0, 1);
  border-radius: var(--border-radius--small);
  padding: 1.133334em 1.667em;
  font-size: 0.9375em;
  font-family: "Fjalla One", sans-serif;
  font-weight: 400;
  line-height: 1.469;
  cursor: pointer;
  color: var(--color-white);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0;
  background-color: var(--color-black);
  border: 0;
  transition:
    border-color 0.2s,
    background 0.2s;
}

.shop-filter__sidebar-btn svg {
  max-height: 1.25em;
  width: auto;
}

/* ============================================================
   4. SHOP PRODUCTS GRID
============================================================ */
.shop-products__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 33px 4px;
}

.shop-products__empty {
  text-align: center;
  padding: 4em 0;
  color: var(--color-black-70);
  font-size: 0.9375em;
}

/* Loading state overlay */
.shop-products.is-loading {
  position: relative;
  min-height: 200px;
}

.shop-products.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.7);
  z-index: 5;
}

.shop-products.is-loading::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 6;
  width: 2em;
  height: 2em;
  border: 2px solid var(--stroke-light);
  border-top-color: var(--color-black);
  border-radius: 50%;
  animation: shop-spin 0.6s linear infinite;
  transform: translate(-50%, -50%);
}

@keyframes shop-spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* ============================================================
   5. LOAD MORE / COUNT
============================================================ */
.shop-products__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.375em;
  padding: 4.15em 0 7em;
}

.shop-products__count {
  font-size: 1em;
  line-height: 1.581;
  color: #121212;
  margin: 0;
  letter-spacing: 0.2px;
  font-weight: 300;
}

.shop-load-more {
  outline: none;
  border: none;
  cursor: pointer;
}
/* .shop-load-more {
  min-width: 12em;
  text-align: center;
  border: 1.5px solid var(--color-black);
  background: none;
  color: var(--color-black);
  padding: 0.75em 2em;
  font-size: 0.875em;
  font-family: inherit;
  cursor: pointer;
  border-radius: 2em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition:
    background 0.2s,
    color 0.2s;
}

.shop-load-more:hover {
  background: var(--color-black);
  color: var(--color-white);
} */

.shop-load-more.is-loading {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ============================================================
   6. SIDEBAR DRAWER
============================================================ */
.shop-sidebar {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
}

.shop-sidebar.is-open {
  pointer-events: all;
}

.shop-sidebar__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.3s ease;
}

.shop-sidebar.is-open .shop-sidebar__overlay {
  background: rgba(0, 0, 0, 0.4);
}

.shop-sidebar__panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 30em;
  max-width: 100%;
  background: var(--color-white);
  transform: translateX(-100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 0 3em;
}

.shop-sidebar.is-open .shop-sidebar__panel {
  transform: translateX(0);
}

.shop-sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2em 0 0.5em;
  border-bottom: 1px solid var(--stroke-light);
  position: sticky;
  top: 0;
  background: var(--color-white);
  z-index: 2;
}

.shop-sidebar__title {
  font-size: 1.75em;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  margin: 0;
  line-height: 1;
}

.shop-sidebar__close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25em;
  color: var(--color-black);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.15s;
}

.shop-sidebar__close:hover {
  background: var(--bg-light);
}

.shop-sidebar__section {
  padding: 1.5em 0;
  border-bottom: 1px solid var(--stroke-light);
}

.shop-sidebar__section-title {
  font-size: 0.8125em;
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.5;
  margin: 0 0 0.925em;
  font-family: "Archivo", sans-serif;
  color: var(--color-black);
}

/* ── Quick filter checkboxes ────────────────────────────────── */
.shop-sidebar__checkboxes {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.shop-sidebar__checkbox {
  display: flex;
  align-items: center;
  gap: 0.92em;
  cursor: pointer;
  font-size: 0.82em;
  color: var(--color-black);
  transition: background 0.15s;
  line-height: 1.5;
}

.shop-sidebar__checkbox input[type="checkbox"] {
  flex-shrink: 0;
  width: 1.35em;
  height: 1.35em;
  accent-color: var(--color-black);
  cursor: pointer;
  margin: 0;
}

/* ── Check-list (category / brand checkboxes) ───────────────── */
.shop-sidebar__check-list {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  max-height: 12.75em;
  overflow-y: auto;
}

/* ── Size pill buttons ──────────────────────────────────────── */
.shop-sidebar__sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}

.shop-sidebar__size-btn {
  background: none;
  border: 1px solid var(--stroke-light);
  border-radius: var(--border-radius--small);
  padding: 0.595em 1.22em;
  font-size: 0.82em;
  line-height: 1.5;
  font-family: inherit;
  cursor: pointer;
  text-transform: uppercase;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}

.shop-sidebar__size-btn:hover,
.shop-sidebar__size-btn.is-active {
  background: var(--color-black);
  border-color: var(--color-black);
  color: var(--color-white);
}

/* ── Color swatches ─────────────────────────────────────────── */
.shop-sidebar__colors {
  display: flex;
  gap: 0.5em;
  overflow-y: auto;
  flex-wrap: wrap;
}

.shop-sidebar__color-item {
  display: flex;
  align-items: center;
  gap: 0.75em;
  cursor: pointer;
  padding: 0.5em;
  width: calc(50% - 0.5em / 1.5);
}

.shop-sidebar__color-item input[type="checkbox"] {
  display: none;
}

.shop-sidebar__color-item span {
  font-size: 0.82em;
  line-height: 1.5;
  text-transform: capitalize;
}

.shop-sidebar__color-swatch {
  width: 1.25em;
  height: 1.25em;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px #e6e6e6;
  transition: box-shadow 0.15s;
}

.shop-sidebar__color-item.is-active .shop-sidebar__color-swatch {
  box-shadow: 0 0 0 2px var(--color-black);
}

/* ── Sidebar lists (legacy, kept for compat) ────────────────── */
.shop-sidebar__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 240px;
  overflow-y: auto;
}

.shop-sidebar__list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5em 0.75em;
  font-size: 0.875em;
  cursor: pointer;
  border-radius: 0.35em;
  transition: background 0.15s;
  color: var(--color-black-70);
}

.shop-sidebar__list-item:hover {
  background: var(--bg-light);
  color: var(--color-black);
}

.shop-sidebar__list-item.is-active {
  background: var(--bg-light);
  color: var(--color-black);
  font-weight: var(--font-weight--semibold);
}

.shop-sidebar__count {
  font-size: 0.85em;
  opacity: 0.5;
  flex-shrink: 0;
  margin-left: 0.5em;
}

/* ── Sidebar footer ─────────────────────────────────────────── */
.shop-sidebar__footer {
  display: flex;
  gap: 0.75em;
  padding: 2em 0;
  margin-top: auto;
  border-top: 1px solid var(--stroke-light);
  position: sticky;
  bottom: 0;
  background: var(--color-white);
}

.shop-sidebar__apply {
  flex: 1;
  outline: none;
  transition: opacity 0.2s;
  border: 0;
  padding: 1.25em 1.25em;
  line-height: 1;
  border: 1px solid var(--color-black);
  transition: all 0.4s ease;
}

.shop-sidebar__apply:hover {
  opacity: 0.85;
}

.shop-sidebar__reset {
  outline: none;
  background-color: #f6f6f6;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: none;
  padding: 1.25em 1.25em;
  line-height: 1;
  transition: all 0.4s ease;
}

.shop-sidebar__reset:hover {
  border-color: var(--color-black);
  color: var(--color-black);
}

/* ============================================================
   7. PRICE HISTOGRAM
============================================================ */
.price-histogram {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 60px;
  margin-bottom: 0;
}

.price-histogram__bar {
  flex: 1;
  background: #d1d5db;
  border-radius: 0;
  min-height: 2px;
  transition: background 0.15s;
  cursor: default;
}

.price-histogram__bar:hover {
  background: #3b82f6;
  opacity: 0.6;
}

/* Selected range bars (highlighted by JS) */
.price-histogram__bar.is-selected {
  background: #3b82f6;
  opacity: 0.8;
}

/* ============================================================
   8. PRICE RANGE SLIDER
============================================================ */
.price-range {
  margin-top: 0em;
}

/* ── Range thumb tooltip ────────────────────────────────────── */
.price-range__tip {
  position: absolute;
  bottom: calc(100% + 14px);
  background: var(--color-black);
  color: var(--color-white);
  font-size: 0.7em;
  line-height: 1.5;
  padding: 0.33em 0.785em;
  border-radius: var(--border-radius--small);
  pointer-events: none;
  white-space: nowrap;
  z-index: 2;
}

#price-tip-min {
  left: 0;
}

.price-range__track {
  position: relative;
  height: 2px;
  background: #e6e6e6;
  border-radius: 0;
  margin-bottom: 1.5em;
}

.price-range__fill {
  position: absolute;
  top: 0;
  height: 100%;
  background: #3b82f6;
  border-radius: 0;
  pointer-events: none;
}

.price-range__input {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  appearance: none;
  background: transparent;
  pointer-events: none;
  margin: 0;
  padding: 0;
}

.price-range__input::-webkit-slider-thumb {
  appearance: none;
  pointer-events: all;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #3b82f6;
  border: 3px solid var(--color-white);
  cursor: grab;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
}

.price-range__input::-webkit-slider-thumb:active {
  cursor: grabbing;
}

.price-range__input::-moz-range-thumb {
  pointer-events: all;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-white);
  border: 2px solid var(--color-black);
  cursor: grab;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.price-range__inputs {
  display: flex;
  align-items: center;
  gap: 1em;
}

.price-range__dash {
  color: var(--color-black-70);
  font-size: 0.9em;
}

.price-range__field {
  flex: 1;
  display: flex;
  align-items: center;
  border: 1px solid var(--stroke-light);
  border-radius: var(--border-radius--small);
  padding: 0.65em 0.75em;
  gap: 0.75em;
  transition: border-color 0.2s;
  text-transform: uppercase;
}

.price-range__field:focus-within {
  border-color: var(--color-black);
}

.price-range__currency {
  font-size: 0.75em;
  color: #0d0d0d;
  flex-shrink: 0;
  opacity: 0.6;
}

.price-range__field input[type="number"] {
  border: none;
  outline: none;
  width: 100%;
  font-size: 0.82em;
  font-family: inherit;
  color: var(--color-black);
  background: transparent;
  -moz-appearance: textfield;
  line-height: 1.25;
}

.price-range__field input[type="number"]::-webkit-inner-spin-button,
.price-range__field input[type="number"]::-webkit-outer-spin-button {
  appearance: none;
}

/* ============================================================
   9. RESPONSIVE
============================================================ */

@media only screen and (max-width: 991px) {
  .shop-products__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .shop-filter__left {
    display: none;
  }

  .shop-filter__right {
    width: 100%;
    justify-content: space-between;
  }
}

@media only screen and (max-width: 767px) {
  .shop-filter {
    flex-wrap: wrap;
  }

  .shop-filter__left {
    order: 2;
    width: 100%;
  }

  .shop-filter__right {
    order: 1;
    width: 100%;
    justify-content: space-between;
  }

  .shop-products__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .shop-filter__dropdown--sort .shop-filter__dropdown-panel {
    right: auto;
    left: 0;
  }
  .shop-filter__sort-item {
    font-size: 0.75em;
  }
}

@media only screen and (max-width: 575px) {
  .woocommerce-page .product-categories__item img {
    display: none;
  }

  .woocommerce-page .product-categories__item {
    min-width: auto;
    width: auto;
    white-space: nowrap;
    margin-right: 15px;
  }

  .woocommerce-page .shop-categories {
    padding-top: 1.35em;
    padding-bottom: 1em;
  }
  .shop-hero__breadcrumbs .breadcrumb {
    justify-content: flex-start;
  }
  .shop-hero__breadcrumbs .breadcrumb li {
    font-size: 0.75em;
  }
  .shop-hero {
    padding-top: 10px;
  }

  .shop-filter {
    padding: 1em 0;
  }

  .woocommerce-page .product-item__title {
    font-size: 0.85em;
    line-height: 1.1;
    margin: 0 0 0.2em;
  }

  .woocommerce-page .product-item__price {
    font-size: 0.7em;
  }
  .woocommerce-page .product-item__actions.product-item__actions--mobile {
    display: none;
  }
  .shop-products__grid {
    gap: 20px 4px;
  }
  .woocommerce-page .product-item__image {
    margin-bottom: 0.25em;
  }
  .shop-products__footer {
    gap: 1em;
    padding: 3em 0;
  }
  .shop-filter__dropdown-trigger,
  .shop-filter__sidebar-btn {
    font-size: 0.8375em;
    padding-top: 0.6125em;
    padding-bottom: 0.6125em;
    padding-left: 1em;
    padding-right: 1em;
    min-height: 3em;
  }

  .shop-sidebar__panel {
    padding: 0;
  }

  /* 0 0.97em */
  .shop-sidebar__section {
    padding: 1em 15px;
  }

  .hidden-close {
    display: none;
  }

  .shop-sidebar__title {
    margin: 0;
    font-size: 0.85em;
    line-height: 1.5;
    font-weight: 500;
    color: var(--color-dark);
    text-transform: uppercase;
    font-family: "Archivo", sans-serif;
  }

  .shop-sidebar__header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25em 0;
    z-index: 999;
  }
  .shop-sidebar__close {
    position: absolute;
    left: 0.97em;
    z-index: 9;
    padding: 0;
  }
  .shop-sidebar__section {
    padding: 1.25em 0.97em;
  }
  .shop-sidebar__checkbox {
    font-size: 0.825em;
    gap: 0.85em;
  }

  .shop-sidebar__footer {
    padding: 1em 0.97em;
  }
}