/* =====================================================
   shop-layout.css — WooCommerce Shop + Category Styles
   shop.php        → no sidebar, 4-column full-width grid
   taxonomy-product_cat.php → vertical sidebar + 4-column grid
   WooCommerce 7.x+ | drop into your active theme
   ===================================================== */

/* ── Reset ────────────────────────────────────────── */
.shop-wrapper *,
.shop-wrapper *::before,
.shop-wrapper *::after {
  box-sizing: border-box;
}
p.shop-hero__sub,.shop-hero__sub strong {
    color: #FFF ! important;
}
mark.count {
    background: transparent;
}
.woocommerce ul.products li.product .woocommerce-loop-category__title, .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product h3{
	font-size: .9375rem !important;
    font-weight: 500;
    line-height: 1.35;
    padding: .875rem 1rem .25rem !important;
    color: #111827;
}
/* ── Container ────────────────────────────────────── */
.container {
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* ── Hero ─────────────────────────────────────────── */
.shop-hero {
  padding-block: 3.5rem 2.5rem;
  border-bottom: 0.5px solid #e5e5e5;
  background: #fff;
	padding-top: 120px;
    display: block;
}
.shop-hero--cat.has-bg {
  background:
    linear-gradient(135deg, rgba(0,0,0,.48), rgba(0,0,0,.22)),
    var(--cat-bg, #f3f4f6) center / cover no-repeat;
  color: #fff;
}
.shop-hero--cat.has-bg .shop-hero__eyebrow,
.shop-hero--cat.has-bg .shop-hero__sub,
.shop-hero--cat.has-bg .shop-hero__desc {
  color: rgba(255,255,255,.72);
}
.shop-hero__inner {
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}
.shop-hero__eyebrow {
  display: block;
  font-size: .75rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: .5rem;
}
.shop-hero__title {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 500;
  line-height: 1.15;
  margin-bottom: .625rem;
	margin-top: 10px;
}
.shop-hero__sub {
  font-size: .9375rem;
  color: #6b7280;
}
.shop-hero__sub strong {
  color: #111827;
  font-weight: 600;
}
.shop-hero__desc {
  max-width: 600px;
  margin-block: .75rem .375rem;
  font-size: .9375rem;
  line-height: 1.65;
  color: #6b7280;
}

/* ── Breadcrumb (category page) ───────────────────── */
.shop-breadcrumb { margin-bottom: 1rem; }
.shop-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .375rem;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: .8125rem;
  color: #9ca3af;
}
.shop-breadcrumb li { display: flex; align-items: center; gap: .375rem; }
.shop-breadcrumb li:not(:last-child)::after { content: "/"; opacity: .45; }
.shop-breadcrumb a { color: inherit; text-decoration: none; transition: color .15s; }
.shop-breadcrumb a:hover { color: #111; }
.shop-breadcrumb li[aria-current] { color: #374151; }

/* ── Sub-category chip strip (category page) ──────── */
.subcat-strip {
  padding-block: 1.125rem;
  border-bottom: 0.5px solid #e5e5e5;
  background: #fff;
}
.subcat-strip__scroll {
  display: flex;
  gap: .625rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.subcat-strip__scroll::-webkit-scrollbar { display: none; }
.subcat-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4375rem .9375rem;
  border-radius: 100px;
  border: 0.5px solid #d1d5db;
  background: #fff;
  font-size: .8125rem;
  white-space: nowrap;
  text-decoration: none;
  color: #111827;
  transition: border-color .15s, background .15s;
}
.subcat-chip:hover { border-color: #9ca3af; background: #f9fafb; }
.subcat-chip img { border-radius: 50%; object-fit: cover; }
.subcat-chip__count { font-size: .75rem; color: #9ca3af; }

/* ── Sticky toolbar ───────────────────────────────── */
.shop-toolbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 0.5px solid #e5e5e5;
}
.shop-toolbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 54px;
  gap: 1rem;
}
.shop-toolbar__left { font-size: .875rem; color: #6b7280; }
.shop-toolbar__right { display: flex; align-items: center; gap: .625rem; }
.shop-toolbar__right .woocommerce-ordering select,
.shop-toolbar__right select {
  border: 0.5px solid #d1d5db;
  border-radius: 8px;
  padding: .375rem .75rem;
  font-size: .875rem;
  background: #fff;
  color: #111827;
}

/* Filter toggle — only used on category page (mobile) */
.filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  padding: .4375rem .9375rem;
  border: 0.5px solid #d1d5db;
  border-radius: 100px;
  background: transparent;
  font-size: .875rem;
  cursor: pointer;
  color: #111827;
  transition: border-color .15s, background .15s;
}
.filter-toggle:hover { border-color: #9ca3af; background: #f9fafb; }
.filter-toggle[aria-expanded="true"] { background: #f3f4f6; border-color: #9ca3af; }

/* ── SHOP.PHP — no sidebar, full-width 4-col grid ─── */
/* .shop-main is a direct child of .shop-wrapper on shop.php */
.shop-wrapper > .shop-main {
  padding-block: 2rem 3rem;
}

/* Force exactly 4 columns on shop.php */
.shop-wrapper > .shop-main .woocommerce ul.products,
.woocommerce.shop-wrapper > .shop-main ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.25rem !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.woocommerce .products ul::after, .woocommerce .products ul::before, .woocommerce ul.products::after, .woocommerce ul.products::before {
    content: " ";
    display: none ! important;
}
main#main-content {
    padding-top: 10px;
}
.woocommerce ul.products li.product a img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 0 0px ! important;
    box-shadow: none;
    background: #336fb540;
}
.woocommerce ul.products li.product {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 0.5px solid #e5e5e5;
    border-radius: 12px;
    overflow: hidden;
    background: #f5f7f6 ! important;
    transition: border-color .2s;
}
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
    float: left ! important;
    margin: 0 ! important;
    padding: 0 ! important;
    position: relative ! important;
    width: 100% ! important;
    margin-left: 0 ! important ;
}
/* ── CATEGORY PAGE — sidebar + 4-col grid ─────────── */
.shop-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding-block: 2rem 3rem;
  align-items: start;
}

/* Force exactly 4 columns inside the category grid area */
.shop-layout .shop-main .woocommerce ul.products,
.shop-layout .shop-main ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.25rem !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* ── Sidebar (category page only) ────────────────── */
@media (min-width: 901px) {
  /* Hide filter toggle on desktop — sidebar always visible */
  .filter-toggle { display: none; }

  .shop-sidebar {
    position: sticky;
    top: 70px;
    max-height: calc(100vh - 86px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #e5e7eb transparent;
  }
}

@media (max-width: 900px) {
  /* Category page collapses to single column, sidebar becomes drawer */
  .shop-layout {
    grid-template-columns: 1fr;
  }
  .shop-sidebar {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(320px, 100vw);
    z-index: 50;
    transform: translateX(110%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    overflow-y: auto;
    background: #fff;
    border-left: 0.5px solid #e5e5e5;
  }
  .shop-sidebar.is-open { transform: translateX(0); }
  .shop-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 49;
    background: rgba(0,0,0,.3);
  }
  .shop-sidebar-overlay.is-open { display: block; }

  /* 2 columns on mobile for both templates */
  .shop-wrapper > .shop-main .woocommerce ul.products,
  .shop-layout .shop-main .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

.shop-sidebar__inner { padding: 1.5rem 1.25rem; }

.sidebar-close-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
@media (min-width: 901px) { .sidebar-close-row { display: none; } }

.sidebar-heading { font-size: .9375rem; font-weight: 500; }
.sidebar-close {
  background: none;
  border: none;
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  color: #6b7280;
  padding: .25rem;
}
.sidebar-close:hover { color: #111; }

.sidebar-section { margin-bottom: 1.75rem; }
.sidebar-section__title {
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #9ca3af;
  font-weight: 600;
  margin-bottom: .875rem;
}

.sidebar-cat-list { list-style: none; padding: 0; margin: 0; }
.sidebar-cat-list__item a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .4375rem 0;
  font-size: .9rem;
  text-decoration: none;
  color: #6b7280;
  border-bottom: 0.5px solid #f3f4f6;
  transition: color .15s;
}
.sidebar-cat-list__item a:hover,
.sidebar-cat-list__item.is-active a { color: #111827; }
.sidebar-cat-list__item.is-active a { font-weight: 500; }

.cat-count {
  font-size: .75rem;
  color: #9ca3af;
  background: #f3f4f6;
  border-radius: 100px;
  padding: .125rem .5625rem;
  flex-shrink: 0;
}

.sidebar-reset {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  margin-top: 1rem;
  font-size: .8125rem;
  color: #6b7280;
  text-decoration: none;
  border: 0.5px solid #d1d5db;
  border-radius: 100px;
  padding: .3125rem .8125rem;
  transition: color .15s, border-color .15s;
}
.sidebar-reset:hover { color: #111827; border-color: #9ca3af; }

/* ── Product cards (shared) ───────────────────────── */
.woocommerce ul.products li.product {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 0.5px solid #e5e5e5;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  transition: border-color .2s;
}
.woocommerce ul.products li.product:hover {
  border-color: #c4c4c4;
}
.woocommerce ul.products li.product a img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  border-bottom: 0.5px solid #f3f4f6;
}
.woocommerce ul.products li.product .onsale {
  position: absolute;
  top: .75rem;
  left: .75rem;
  background: #111827;
  color: #fff;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .25rem .625rem;
  border-radius: 100px;
  z-index: 1;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: .9375rem !important;
  font-weight: 500;
  line-height: 1.35;
  padding: .875rem 1rem .25rem !important;
  color: #111827;
}
.woocommerce ul.products li.product .price {
  font-size: .9375rem;
  padding: 0 1rem .875rem;
  color: #6b7280;
  display: block;
  flex-grow: 1;
}
.woocommerce ul.products li.product .price ins {
  text-decoration: none;
  font-weight: 600;
  color: #111827;
}
.woocommerce ul.products li.product .price del {
  opacity: .55;
  font-size: .85em;
  margin-right: .25rem;
}
.woocommerce ul.products li.product .star-rating {
  margin: 0 1rem .5rem;
  font-size: .875em;
}
.woocommerce ul.products li.product .button {
  display: block;
  margin: auto 1rem 1rem;
  padding: .5rem 1rem;
  border: 0.5px solid #d1d5db;
  border-radius: 8px;
  font-size: .875rem;
  text-align: center;
  text-decoration: none;
  background: transparent;
  color: #111827;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.woocommerce ul.products li.product .button:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}
.woocommerce ul.products li.product .button.added {
  background: #111827;
  color: #fff;
  border-color: #111827;
}

/* ── No products found ────────────────────────────── */
.woocommerce-info,
.woocommerce-no-products-found {
  padding: 4rem 2rem;
  text-align: center;
  color: #6b7280;
  font-size: .9375rem;
}

/* ── Pagination ───────────────────────────────────── */
.woocommerce-pagination,
.woocommerce-pagination ul {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap;
  gap: .375rem !important;
  margin-top: 2.5rem !important;
  padding: 0 !important;
  list-style: none !important;
}
.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 0.5px solid #d1d5db !important;
  border-radius: 8px !important;
  font-size: .875rem;
  text-decoration: none;
  color: #374151;
  background: #fff;
  transition: background .15s;
}
.woocommerce-pagination ul li span.current {
  background: #f3f4f6 !important;
  border-color: #9ca3af !important;
  font-weight: 600;
  color: #111827;
}
.woocommerce-pagination ul li a:hover {
  background: #f9fafb !important;
}

/* ── Breakpoints ──────────────────────────────────── */
@media (max-width: 1200px) {
  /* On smaller desktops drop to 3 cols if sidebar is present */
  .shop-layout .shop-main .woocommerce ul.products,
  .shop-layout .shop-main ul.products {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  /* Shop page (no sidebar) keeps 4 cols down to 900px */
}

@media (max-width: 900px) {
  .shop-wrapper > .shop-main .woocommerce ul.products,
  .shop-layout .shop-main .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: .875rem !important;
  }
}

@media (max-width: 480px) {
  .shop-wrapper > .shop-main .woocommerce ul.products,
  .shop-layout .shop-main .woocommerce ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: .625rem !important;
  }
  .shop-hero { padding-block: 2rem 1.5rem; }
}

/* ── Sidebar JS toggle ────────────────────────────── */
/*
  Add to your theme's main.js to wire up the mobile filter drawer
  (category page only — shop.php has no sidebar):

  const btn     = document.querySelector('.filter-toggle');
  const aside   = document.querySelector('#shop-sidebar');
  const overlay = document.querySelector('.shop-sidebar-overlay');

  btn?.addEventListener('click', () => {
    const open = aside.classList.toggle('is-open');
    btn.setAttribute('aria-expanded', String(open));
    overlay?.classList.toggle('is-open', open);
    document.body.style.overflow = open ? 'hidden' : '';
  });

  const closeDrawer = () => {
    aside.classList.remove('is-open');
    btn?.setAttribute('aria-expanded', 'false');
    overlay?.classList.remove('is-open');
    document.body.style.overflow = '';
  };

  overlay?.addEventListener('click', closeDrawer);
  document.querySelector('.sidebar-close')?.addEventListener('click', closeDrawer);
*/

/* ── Top filter bar (category page) ──────────────── */
.top-filter-bar {
  background: #fff;
  border-bottom: 0.5px solid #e5e5e5;
  padding-block: .875rem;
}
.top-filter-bar__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .625rem;
}
.top-filter-bar__label {
  font-size: .8125rem;
  color: #9ca3af;
  font-weight: 500;
  white-space: nowrap;
  margin-right: .25rem;
}
.top-filter-bar__form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .625rem;
  flex: 1;
}

/* Individual select wrapper */
.top-filter-bar__select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.top-filter-select {
  appearance: none;
  -webkit-appearance: none;
  height: 38px;
  padding: 0 2.25rem 0 .875rem;
  border: 0.5px solid #d1d5db;
  border-radius: 100px;
  background: #fff;
  font-size: .875rem;
  color: #111827;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  min-width: 148px;
}
.top-filter-select:hover {
  border-color: #9ca3af;
  background: #f9fafb;
}
.top-filter-select:focus {
  outline: none;
  border-color: #6b7280;
  box-shadow: 0 0 0 3px rgba(107,114,128,.12);
}
/* Active state — a value is selected */
.top-filter-select.is-active,
.top-filter-select:not([value=""]):valid {
  border-color: #111827;
  background: #f3f4f6;
  font-weight: 500;
}
.top-filter-chevron {
  position: absolute;
  right: .75rem;
  pointer-events: none;
  color: #9ca3af;
}

/* Clear link */
.top-filter-bar__clear {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .8125rem;
  color: #6b7280;
  text-decoration: none;
  border: 0.5px solid #d1d5db;
  border-radius: 100px;
  padding: 0 .875rem;
  height: 38px;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
  margin-left: auto;
}
.top-filter-bar__clear:hover {
  color: #111827;
  border-color: #9ca3af;
}

@media (max-width: 600px) {
  .top-filter-bar__inner {
    gap: .5rem;
  }
  .top-filter-select {
    min-width: 120px;
    font-size: .8125rem;
  }
  .top-filter-bar__label {
    width: 100%;
  }
}