/* ==========================================================================
   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; }

/* ── BNPL marketing band (template-parts/archive-bnpl-banner.php) ──
   Full-width list item after every 5th product; light DROIX port of the
   GPDStore .gpd-loop-banner. The provider pills (.dx-bnpl-badge with inline
   brand colours) come from droix-bnpl-controller's badge renderer. */
body.archive .site-main ul.products li.dx-loop-banner,
body.tax-product_tag .site-main ul.products li.dx-loop-banner {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px 26px;
  background: linear-gradient(115deg, #F7FBE1, #FDFEF6 55%, var(--droix-green-tint)) !important;
  border: 1px solid #DFEAAE;
  border-radius: var(--radius-xl);
  padding: 26px 30px;
  min-height: 0;
  overflow: hidden;
  cursor: default;
}
body.archive .site-main ul.products li.dx-loop-banner:hover {
  border-color: var(--droix-green);
  box-shadow: none;
  transform: none;
}
body.archive .dx-loop-banner .ic {
  width: 54px;
  height: 54px;
  border-radius: 15px;
  background: #EDF4CB;
  color: var(--droix-green-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
body.archive .dx-loop-banner .ic svg { width: 26px; height: 26px; stroke: currentColor; }
/* copy grows to fill the row; when it can't keep its 340px basis the
   logos + CTA wrap to a second row (tablet/narrow desktop) */
body.archive .dx-loop-banner .copy { flex: 1 1 340px; min-width: 0; }
body.archive .dx-loop-banner .eyebrow {
  display: block;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--droix-green-dark);
  margin-bottom: 5px;
}
body.archive .dx-loop-banner h3 {
  margin: 0 0 4px;
  font-family: var(--font-ui);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--fg-2);
}
body.archive .dx-loop-banner p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--fg-3);
  line-height: 1.5;
}
body.archive .dx-loop-banner .dx-bnpl-from { color: var(--fg-1); font-weight: 600; }
body.archive .dx-loop-banner .dx-bnpl-from strong { color: var(--droix-green-dark); }
body.archive .dx-loop-banner .logos { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
body.archive .dx-loop-banner .dx-bnpl-badge,
.dx-bnpl-modal .dx-bnpl-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  min-width: 58px;
  padding: 0 11px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: -0.2px;
  flex: 0 0 auto;
}
body.archive .dx-loop-banner .dx-bnpl-badge__logo,
.dx-bnpl-modal .dx-bnpl-badge__logo { height: 13px; width: auto; display: block; }
body.archive .dx-loop-banner .cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--droix-green);
  color: #fff;
  border: 1px solid var(--droix-green);
  border-radius: var(--radius-pill);
  padding: 11px 20px;
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
body.archive .dx-loop-banner .cta:hover { background: var(--droix-green-dark); border-color: var(--droix-green-dark); color: #fff; }
body.archive .dx-loop-banner .cta svg { width: 15px; height: 15px; }

@media (max-width: 768px) {
  body.archive .site-main ul.products li.dx-loop-banner,
  body.tax-product_tag .site-main ul.products li.dx-loop-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 20px;
  }
  /* column direction: the 340px flex-basis would become a height — reset it */
  body.archive .dx-loop-banner .copy { flex: 0 0 auto; }
  body.archive .dx-loop-banner .logos { flex-wrap: wrap; }
  body.archive .dx-loop-banner .cta { align-self: stretch; justify-content: center; }
}

/* ── BNPL "See your options" modal (#dx-archive-bnpl-modal) ── */
body.dx-bnpl-modal-open { overflow: hidden; }

.dx-bnpl-modal {
  position: fixed;
  inset: 0;
  z-index: 100001;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 11, 11, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 20px;
}
.dx-bnpl-modal[hidden] { display: none; }
.dx-bnpl-modal__panel {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: 86vh;
  overflow: auto;
  background: #fff;
  border: 1px solid var(--stroke-2);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 26px 28px;
  text-align: left;
  cursor: auto;
}
.dx-bnpl-modal__panel:focus { outline: none; }
.dx-bnpl-modal__eyebrow {
  margin: 0 0 8px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--droix-green-dark);
}
.dx-bnpl-modal__panel h3 {
  margin: 0 0 6px;
  font-family: var(--font-ui);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.4px;
  color: var(--fg-2);
}
.dx-bnpl-modal__intro {
  margin: 0 0 18px;
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fg-4);
}
.dx-bnpl-modal__close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: var(--bg-4);
  color: var(--fg-2);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}
.dx-bnpl-modal__close:hover { background: var(--fg-gray-300); }
.dx-bnpl-modal__rows {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dx-bnpl-modal__rows li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--stroke-2);
}
.dx-bnpl-modal__rows li:first-child { border-top: 0; }
.dx-bnpl-modal__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-family: var(--font-body); }
.dx-bnpl-modal__body .main { color: var(--fg-1); font-size: 14px; font-weight: 600; }
.dx-bnpl-modal__body .main strong { color: var(--fg-1); }
.dx-bnpl-modal__body .sub { color: var(--fg-4); font-size: 12.5px; line-height: 1.45; }
.dx-bnpl-modal__body .more { color: var(--droix-green-dark); font-size: 12.5px; text-decoration: none; }
.dx-bnpl-modal__body .more::after { content: " ›"; }
.dx-bnpl-modal__body .more:hover { color: var(--fg-1); }
.dx-bnpl-modal__disclaimer {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--stroke-2);
  font-family: var(--font-body);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--fg-4);
}