/* ==========================================================================
   DROIX 2026 category/archive overlay (design handoff category.css).
   Handle 'droix-archive', deps droix-tokens + category — cascades OVER the
   base category.css on shop/category/tax archives. CSS-ONLY reskin of the
   EXISTING markup: the droix_archive_filter AJAX engine, category.js and all
   fragment markup stay untouched (KNOWLEDGE.md "Product Category Filter
   Performance"). Do not add/rename engine classes here.

   Existing selector map (content-product-category.php + Shoptimizer hooks +
   Custom_Product_Filter_Widget):
     header.woocommerce-products-header > .term-description + img.cg-cat-image
     .widget_custom_product_filter_widget > .filters-block > a.filters-title
       + .filters-content ul.filters-list li label input.filters-checkbox
       + span.term-count ; .price-filter ; .active-filters
     ul.products li.product > .woocommerce-image__wrapper +
       .woocommerce-card__header + .cart-right-block (.price-block .price
       .droix-card-price-* + .stock ; .buttons-block .btn-green /
       .btn-transparent) + .slider-pagination
     p.woocommerce-result-count · form.woocommerce-ordering select.orderby
     nav.woocommerce-pagination ul.page-numbers
   ========================================================================== */

/* ── Page frame / typography base ── */
body.archive.woocommerce #content.site-content,
body.post-type-archive-product #content.site-content { background: #fff; }
body.archive .site-main,
body.post-type-archive-product .site-main { font-family: var(--font-body); }

/* breadcrumb */
body.archive .woocommerce-breadcrumb,
body.post-type-archive-product .woocommerce-breadcrumb {
  font-family: var(--font-body); font-size: 13.5px; color: var(--fg-4); padding: 22px 0 18px; margin: 0;
}
body.archive .woocommerce-breadcrumb a { color: var(--fg-4); text-decoration: none; }
body.archive .woocommerce-breadcrumb a:hover { color: var(--droix-green-dark); }

/* ── Category header (title + intro + hero image) ── */
body.archive .woocommerce-products-header,
body.post-type-archive-product .woocommerce-products-header {
  border-bottom: 1px solid var(--stroke-1); padding-bottom: 22px; margin-bottom: 24px;
}
body.archive .woocommerce-products-header__title.page-title,
body.archive h1.page-title,
body.post-type-archive-product .woocommerce-products-header__title.page-title {
  font-family: var(--font-ui); font-weight: 700; font-size: clamp(28px, 3vw, 38px);
  line-height: 1.1; color: var(--fg-2); letter-spacing: -0.01em;
}
body.archive .woocommerce-products-header .term-description,
body.archive .woocommerce-products-header .term-description p {
  font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--fg-3); text-wrap: pretty;
}
body.archive .woocommerce-products-header img.cg-cat-image { border-radius: var(--radius-2xl); }

/* ── Filter sidebar ── */
body.archive .widget-area .widget_custom_product_filter_widget > .gamma.widget-title,
body.post-type-archive-product .widget-area .widget_custom_product_filter_widget > .gamma.widget-title {
  font-family: var(--font-ui); font-weight: 700; font-size: 18px; color: var(--fg-2);
  border: 0; margin-bottom: 6px;
}

/* group: title row + divider */
body.archive .filters-block,
body.post-type-archive-product .filters-block { border-top: 1px solid var(--stroke-1); padding: 16px 0; margin: 0; }
body.archive .filters-block:first-of-type { border-top: 0; }
body.archive .filters-block > a.filters-title,
body.post-type-archive-product .filters-block > a.filters-title {
  font-family: var(--font-ui); font-weight: 500; font-size: 15px; color: var(--fg-2);
  text-decoration: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
}
body.archive .filters-block > a.filters-title:hover { color: var(--fg-1); }
body.archive .filters-content { padding-top: 12px; }
body.archive .filters-content hr { display: none; }

/* checkbox rows */
body.archive ul.filters-list,
body.post-type-archive-product ul.filters-list { display: flex; flex-direction: column; gap: 3px; margin: 0; }
body.archive ul.filters-list li {
  display: flex; align-items: center; gap: 8px; margin: 0; padding: 4px 0;
  font-family: var(--font-body); font-size: 14px; color: var(--fg-3);
}
body.archive ul.filters-list li:hover { color: var(--fg-1); }
body.archive ul.filters-list li label { display: flex; align-items: center; gap: 11px; cursor: pointer; font-weight: 400; margin: 0; flex: 1; min-width: 0; }
/* kill category.css's fake ::before checkbox — the styled native input below is the only box */
body.archive .filters-list label::before,
body.archive .filters-list label:hover::before,
body.archive .filters-list label.checked::before,
body.post-type-archive-product .filters-list label::before,
body.post-type-archive-product .filters-list label:hover::before,
body.post-type-archive-product .filters-list label.checked::before { content: none; }
body.archive input.filters-checkbox {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin: 0; flex: 0 0 auto;
  border-radius: 6px; border: 1.5px solid var(--stroke-3); background: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .14s ease, border-color .14s ease; position: relative;
}
body.archive input.filters-checkbox:checked { background: var(--droix-green); border-color: var(--droix-green); }
body.archive input.filters-checkbox:checked::after {
  content: ""; width: 10px; height: 6px; border: 2px solid #fff; border-top: 0; border-right: 0;
  transform: rotate(-45deg) translateY(-1px);
}
body.archive ul.filters-list li .term-count { margin-left: auto; font-size: 12.5px; color: var(--fg-5); }

/* price filter inputs */
body.archive .price-filter .price-slider { display: flex; align-items: center; gap: 8px; }
body.archive .price-filter .price-slider input[type="text"] {
  font-family: var(--font-body); font-size: 13.5px; color: var(--fg-2);
  border: 1px solid var(--stroke-3); border-radius: var(--radius-sm); padding: 8px 10px; width: 50%;
  background: #fff;
}
body.archive .price-filter .price-slider .line { color: var(--fg-5); }
/* jQuery-UI slider skin (when present) */
body.archive .widget_custom_product_filter_widget .ui-slider {
  height: 4px; border: 0; border-radius: 2px; background: var(--bg-4); margin: 14px 8px 6px;
}
/* #slider-range in the selectors: category.css styles fill/handle via that ID, so class-only rules lose */
body.archive .price-filter #slider-range .ui-slider-range,
body.post-type-archive-product .price-filter #slider-range .ui-slider-range { background: var(--droix-green); border-radius: 2px; }
body.archive .price-filter #slider-range .ui-slider-handle,
body.post-type-archive-product .price-filter #slider-range .ui-slider-handle {
  width: 20px; height: 20px; border-radius: 50%; top: 50%; transform: translateY(-50%);
  background: #fff; border: 2px solid var(--droix-green); box-shadow: var(--shadow-sm); cursor: grab; outline: none;
}

/* active filter chips */
body.archive .active-filters .filters-title { font-family: var(--font-ui); font-weight: 500; }
body.archive .active-filters .filters-list li,
body.archive .active-filters .active-filter-item {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-2); border: 1px solid var(--stroke-2); border-radius: var(--radius-pill);
  padding: 6px 10px 6px 12px; font-size: 12.5px; color: var(--fg-2);
}

/* filter action buttons the widget renders (apply/clear) */
body.archive .widget_custom_product_filter_widget .button,
body.archive .widget_custom_product_filter_widget button[type="submit"] {
  background: var(--droix-green); color: #0b0b0b; border: 0; border-radius: var(--radius-lg);
  font-family: var(--font-ui); font-weight: 700;
}
body.archive .widget_custom_product_filter_widget .button:hover { background: var(--droix-green-dark); color: #fff; }

/* ── Toolbar (result count + sort) ── */
body.archive p.woocommerce-result-count,
body.post-type-archive-product p.woocommerce-result-count { font-family: var(--font-body); font-size: 14px; color: var(--fg-4); }
body.archive form.woocommerce-ordering select.orderby,
body.post-type-archive-product form.woocommerce-ordering select.orderby {
  font-family: var(--font-body); font-size: 14px; color: var(--fg-2);
  background-color: #fff; border: 1px solid var(--stroke-3); border-radius: var(--radius-lg);
  padding: 11px 36px 11px 16px; cursor: pointer;
}
body.archive form.woocommerce-ordering select.orderby:hover { border-color: var(--fg-4); }

/* mobile filter toggle */
body.archive a.mobile-filter.shoptimizer-mobile-toggle {
  font-family: var(--font-ui); font-weight: 500; font-size: 14px; color: var(--fg-2);
  background: #fff; border: 1px solid var(--stroke-3); border-radius: var(--radius-lg);
}

/* ── Product cards ── */
body.archive ul.products li.product,
body.post-type-archive-product ul.products li.product {
  background: #fff; border: 1px solid var(--stroke-1); border-radius: var(--radius-xl);
  overflow: hidden;
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
body.archive ul.products li.product:hover {
  box-shadow: var(--shadow-md); border-color: var(--stroke-2); transform: translateY(-2px);
}

/* out-of-stock corner badge */
body.archive .dx-oos-badge {
  font-family: var(--font-ui); font-weight: 700; font-size: 12px; letter-spacing: .01em;
  background: var(--bg-2); color: var(--fg-4); border-radius: var(--radius-xs); padding: 5px 9px; line-height: 1;
}
/* sale flash → design -N% badge look */
body.archive ul.products li.product .onsale {
  font-family: var(--font-ui); font-weight: 700; font-size: 12px; letter-spacing: .01em;
  background: var(--droix-red-sale); color: #fff; border-radius: var(--radius-xs); padding: 5px 9px; line-height: 1.2;
  min-width: 0; min-height: 0;
}

/* title */
body.archive ul.products li.product .woocommerce-loop-product__title,
body.archive ul.products li.product .woocommerce-loop-product__title a {
  font-family: var(--font-body); font-weight: 600; font-size: 15px; line-height: 1.35; color: var(--fg-2);
  text-decoration: none;
}
body.archive ul.products li.product .woocommerce-loop-product__title a:hover { color: var(--droix-green-dark); }

/* short-description spec bullets */
body.archive ul.products li.product .woocommerce-product-details__short-description,
body.archive ul.products li.product .woocommerce-product-details__short-description li {
  font-family: var(--font-body); font-size: 12.5px; line-height: 1.5; color: var(--fg-4);
}

/* price block (shared .droix-card-price-* markup — skin only) */
body.archive ul.products li.product .price-block .price .droix-card-price-prefix {
  font-family: var(--font-body); font-size: 10.5px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--fg-5);
}
body.archive ul.products li.product .price-block .price,
body.archive ul.products li.product .price-block .price .sale-price,
body.archive ul.products li.product .price-block .price .sale-price .woocommerce-Price-amount {
  font-family: var(--font-ui); font-weight: 700; color: var(--droix-purple); letter-spacing: -0.01em;
}
body.archive ul.products li.product.sale .price-block .price .sale-price .woocommerce-Price-amount { color: var(--droix-red-sale); }
body.archive ul.products li.product .price-block .price del,
body.archive ul.products li.product .price-block .price .droix-card-price-del del,
body.archive ul.products li.product .price-block .price .droix-card-price-del del .woocommerce-Price-amount {
  font-family: var(--font-body); font-weight: 400; color: var(--fg-5); font-size: 14px;
}
body.archive ul.products li.product .price-block .price .woocommerce-price-suffix {
  font-family: var(--font-body); font-size: 11.5px; font-weight: 400; color: var(--fg-5);
  letter-spacing: 0; text-transform: none;
}

/* stock line → design pill colours */
body.archive ul.products li.product .price-block .stock { font-family: var(--font-body); font-size: 12.5px; font-weight: 500; }
body.archive ul.products li.product .price-block .stock#in-stock { color: var(--droix-green-soft); }
body.archive ul.products li.product .price-block .stock#pre-order { color: #b8860b; }
body.archive ul.products li.product .price-block .stock#out-of-stock,
body.archive ul.products li.product .price-block .stock#on-back-order { color: var(--fg-4); }

/* CTAs — keep .btn-green/.btn-transparent classes, reskin to the design */
body.archive ul.products li.product .buttons-block .btn-green,
body.archive ul.products li.product .buttons-block a.button,
body.archive ul.products li.product .buttons-block .add_to_cart_button {
  font-family: var(--font-ui); font-weight: 700; font-size: 14.5px;
  background: var(--droix-green); color: #0b0b0b; border: 0; border-radius: var(--radius-lg);
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
body.archive ul.products li.product .buttons-block .btn-green:hover,
body.archive ul.products li.product .buttons-block a.button:hover,
body.archive ul.products li.product .buttons-block .add_to_cart_button:hover {
  background: var(--droix-green-dark); color: #fff; box-shadow: var(--shadow-cta);
}
body.archive ul.products li.product .buttons-block .btn-green svg path { stroke: currentColor; }
body.archive ul.products li.product .buttons-block .btn-transparent {
  font-family: var(--font-ui); font-weight: 700; font-size: 14.5px;
  background: #fff; color: var(--fg-2); border: 1.5px solid var(--stroke-3); border-radius: var(--radius-lg);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
body.archive ul.products li.product .buttons-block .btn-transparent:hover {
  background: var(--droix-green-tint); border-color: var(--droix-green); color: var(--droix-green-dark);
}
/* compare link */
body.archive ul.products li.product .compare-wishlist-container .comparelabel {
  font-family: var(--font-body); font-size: 12px; color: var(--fg-4);
}

/* per-card slider dots (owl pagination) */
body.archive ul.products li.product .slider-pagination .owl-dot,
body.archive ul.products li.product .slider-pagination button {
  background: var(--stroke-3);
}
body.archive ul.products li.product .slider-pagination .owl-dot.active,
body.archive ul.products li.product .slider-pagination button.active {
  background: var(--droix-green);
}

/* ── Pagination ── */
body.archive nav.woocommerce-pagination ul.page-numbers,
body.post-type-archive-product nav.woocommerce-pagination ul.page-numbers { border: 0; display: inline-flex; gap: 8px; }
body.archive nav.woocommerce-pagination ul.page-numbers li { border: 0; }
body.archive nav.woocommerce-pagination ul.page-numbers li .page-numbers {
  min-width: 42px; height: 42px; padding: 0 10px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-ui); font-weight: 500; font-size: 14.5px; color: var(--fg-3);
  border: 1px solid var(--stroke-2); background: #fff;
}
body.archive nav.woocommerce-pagination ul.page-numbers li .page-numbers:hover { border-color: var(--droix-green); color: var(--droix-green-dark); background: #fff; }
body.archive nav.woocommerce-pagination ul.page-numbers li .page-numbers.current { background: var(--fg-2); border-color: var(--fg-2); color: #fff; }

/* load-more button (category.js) */
body.archive .dx-loadmore,
body.archive [class*="load-more"] button,
body.archive button.load-more {
  font-family: var(--font-ui); font-weight: 700;
  background: var(--droix-green); color: #0b0b0b; border: 0; border-radius: var(--radius-lg);
}

/* SEO / term description block under the loop (droix-tools + term description) */
body.archive .droix-tools-seo-description,
body.archive .term-description.no-next-element {
  font-family: var(--font-body); color: var(--fg-3);
}
body.archive .droix-tools-seo-description h2,
body.archive .droix-tools-seo-description h3 {
  font-family: var(--font-ui); font-weight: 700; color: var(--fg-2);
}
body.archive .droix-tools-seo-description-read-more { color: var(--droix-green-dark); font-family: var(--font-ui); font-weight: 600; }