/* ==========================================================================
   Catalogue: archive layout, filter bar, product cards
   ========================================================================== */

/* Archive wrapper (Bricks/Woo default markup) */
.saints.post-type-archive-product #brx-content,
.saints.tax-product_cat #brx-content { padding-bottom: var(--saints-section); }
.saints.post-type-archive-product .saints-page-hero,
.saints.tax-product_cat .saints-page-hero { margin-bottom: 0; }
.saints .woocommerce-products-header { margin: 0; padding: 0; }
.saints .woocommerce-products-header > :not(.saints-page-hero) { display: none; }
.saints .saints-page-hero + * { margin-top: 0; }

/* Bricks' WooCommerce fallback wraps everything in a 1100px .brxe-container: open it up */
.saints.woocommerce #brx-content > .brxe-container { width: 100%; max-width: none; padding: 0; align-items: stretch; text-align: left; }
.saints.woocommerce #brx-content > .brxe-container > .woocommerce-notices-wrapper,
.saints.post-type-archive-product .saints-filterbar, .saints.tax-product_cat .saints-filterbar,
.saints.post-type-archive-product .brxe-woocommerce-products, .saints.tax-product_cat .brxe-woocommerce-products { width: 100%; max-width: var(--saints-max); margin-inline: auto; padding-inline: var(--saints-gutter); }
.saints.post-type-archive-product .saints-filterbar, .saints.tax-product_cat .saints-filterbar { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.saints .bricks-archive-title-wrapper { width: 100%; max-width: none; margin: 0; padding: 0; text-align: left; }

/* Filter bar */
.saints-filterbar { position: relative; margin: 0 0 clamp(2.5rem, 5vw, 4rem); padding-top: 2rem; }
.saints-tabs { display: flex; gap: clamp(1.25rem, 3vw, 2.75rem); border-bottom: 1px solid var(--saints-border); overflow-x: auto; scrollbar-width: none; margin-bottom: 1.5rem; }
.saints-tabs::-webkit-scrollbar { display: none; }
.saints-tab { position: relative; padding: 1rem 0 1.1rem; white-space: nowrap; font-size: .72rem; font-weight: 500; letter-spacing: var(--saints-tracking-widest); text-transform: uppercase; color: var(--saints-text-muted); transition: color .3s; }
.saints-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--saints-green); transform: scaleX(0); transition: transform .5s var(--saints-ease); }
.saints-tab:hover { color: var(--saints-dark); }
.saints-tab.is-active { color: var(--saints-green); }
.saints-tab.is-active::after, .saints-tab:hover::after { transform: scaleX(1); }

.saints-filters__toggle { display: none; }
.saints-filters__groups { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.5rem; }
.saints-filter { display: flex; align-items: center; gap: 1rem; }
.saints-filter__label { font-size: .65rem; font-weight: 500; letter-spacing: var(--saints-tracking-widest); text-transform: uppercase; color: var(--saints-text-muted); }
.saints-filter__chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.saints-chip {
	display: inline-flex; align-items: center; gap: .45rem; min-height: 34px; padding: 0 .95rem;
	border: 1px solid var(--saints-border); border-radius: 100px; background: transparent;
	font-size: .78rem; color: var(--saints-dark); transition: border-color .3s, background-color .3s, color .3s;
}
.saints-chip:hover { border-color: var(--saints-green); color: var(--saints-green); }
.saints-chip.is-active { background: var(--saints-green); border-color: var(--saints-green); color: #fff; }
.saints-swatch { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,.08); background: #ddd; }
.saints-swatch--geelgoud-18k, .saints-swatch--geelgoud { background: linear-gradient(135deg, #f1d79a, #c9a24f); }
.saints-swatch--witgoud-18k, .saints-swatch--witgoud { background: linear-gradient(135deg, #f4f4f2, #c9cac6); }
.saints-swatch--rosegoud-18k, .saints-swatch--rosegoud { background: linear-gradient(135deg, #f2c7b4, #c98a74); }
.saints-swatch--platina { background: linear-gradient(135deg, #eef0f2, #aab0b5); }
.saints-filters__reset { font-size: .7rem; letter-spacing: var(--saints-tracking-wide); text-transform: uppercase; color: var(--saints-green); border-bottom: 1px solid currentColor; padding-bottom: 2px; }

.saints .woocommerce-ordering { margin: 0 0 2rem; float: none; display: flex; justify-content: flex-end; }
.saints .woocommerce-ordering select { appearance: none; border: 0; border-bottom: 1px solid var(--saints-border); background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23335338'/%3E%3C/svg%3E") no-repeat right center; padding: .5rem 1.5rem .5rem 0; font-family: var(--saints-font-sans); font-size: .78rem; color: var(--saints-dark); cursor: pointer; }
.saints .woocommerce-result-count { display: none; }

@media (max-width: 760px) {
	.saints-filters__toggle { display: inline-flex; align-items: center; gap: .4rem; min-height: 42px; padding: 0 1.1rem; border: 1px solid var(--saints-green); background: none; color: var(--saints-green); font-size: .7rem; letter-spacing: var(--saints-tracking-wide); text-transform: uppercase; cursor: pointer; }
	.saints-filters__groups { display: none; flex-direction: column; align-items: stretch; gap: 1.25rem; margin-top: 1.25rem; padding: 1.25rem; background: var(--saints-surface); border: 1px solid var(--saints-border); }
	.saints-filters.is-open .saints-filters__groups { display: flex; }
	.saints-filter { flex-direction: column; align-items: flex-start; gap: .6rem; }
}

/* Product grid */
.saints ul.products, .saints-grid {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2.5rem, 5vw, 4.5rem) clamp(1.25rem, 3vw, 2.75rem);
}
.saints ul.products::before, .saints ul.products::after { display: none !important; }
.saints-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.saints ul.products li.product.saints-card, .saints-card { width: auto !important; margin: 0 !important; float: none !important; padding: 0; }
@media (max-width: 1024px) { .saints ul.products, .saints-grid, .saints-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .saints ul.products, .saints-grid, .saints-grid--4 { grid-template-columns: 1fr; } }

/* Card */
.saints-card__link { display: block; color: inherit; }
.saints-card__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #fff; margin-bottom: 1.5rem; }
.saints-card__media::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--saints-border); pointer-events: none; transition: border-color .5s; }
.saints-card__img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; transition: opacity .9s var(--saints-ease), transform 1.6s var(--saints-ease); }
.saints-card__img--hover { opacity: 0; transform: scale(1.06); }
.saints-card:hover .saints-card__media.has-hover .saints-card__img:not(.saints-card__img--hover) { opacity: 0; }
.saints-card:hover .saints-card__img--hover { opacity: 1; transform: scale(1); }
.saints-card:hover .saints-card__media:not(.has-hover) .saints-card__img { transform: scale(1.04); }
.saints-card:hover .saints-card__media::after { border-color: var(--saints-border-light); }
.saints-card__flag { position: absolute; top: 1rem; left: 1rem; z-index: 2; padding: .35rem .7rem; background: rgba(249,248,246,.92); border: 1px solid var(--saints-border-light); font-size: .6rem; font-weight: 500; letter-spacing: var(--saints-tracking-widest); text-transform: uppercase; color: var(--saints-green); }
.saints-card__body { text-align: center; padding-inline: .5rem; }
.saints-card__kicker { font-size: .625rem; font-weight: 500; letter-spacing: var(--saints-tracking-widest); text-transform: uppercase; color: var(--saints-green); margin: 0 0 .6rem; }
.saints .saints-card__title { font-size: clamp(1.5rem, 2vw, 1.85rem); font-weight: 400; margin: 0 0 .35rem; letter-spacing: .05em; position: relative; display: inline-block; }
.saints-card__title::after { content: ""; position: absolute; left: 50%; bottom: -2px; width: 0; height: 1px; background: var(--saints-green); transition: width .6s var(--saints-ease), left .6s var(--saints-ease); }
.saints-card:hover .saints-card__title::after { width: 100%; left: 0; }
.saints-card__sub { font-size: .8125rem; color: var(--saints-text-muted); margin: 0 0 .75rem; line-height: 1.5; }
.saints-card__price { font-size: .875rem; letter-spacing: .04em; color: var(--saints-dark); margin: 0; }
.saints-card__price del { color: var(--saints-text-muted); margin-right: .4rem; }
.saints-card__price ins { text-decoration: none; }
.saints-price-request { font-size: .7rem; font-weight: 500; letter-spacing: var(--saints-tracking-widest); text-transform: uppercase; color: var(--saints-green); }

/* Pagination */
.saints .woocommerce-pagination { margin-top: clamp(3rem, 6vw, 5rem); text-align: center; }
.saints .woocommerce-pagination ul.page-numbers { display: inline-flex; gap: .4rem; border: 0; margin: 0; padding: 0; list-style: none; }
.saints .woocommerce-pagination ul.page-numbers li { border: 0; }
.saints .woocommerce-pagination .page-numbers a, .saints .woocommerce-pagination .page-numbers span { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--saints-border); font-size: .8rem; color: var(--saints-dark); background: transparent; }
.saints .woocommerce-pagination .page-numbers .current, .saints .woocommerce-pagination .page-numbers a:hover { background: var(--saints-green); border-color: var(--saints-green); color: #fff; }

.saints .woocommerce-info.woocommerce-no-products-found { margin-top: 1rem; }

/* ==========================================================================
   Mobile: compact list cards (photo left, details right) + compact archive top
   ========================================================================== */
@media (max-width: 640px) {
	.saints ul.products, .saints-grid, .saints-grid--4 { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--saints-border); }
	.saints-prose .saints-grid--inline { gap: 0; }

	.saints-card__link { display: grid; grid-template-columns: 40% minmax(0, 1fr); gap: 1.1rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--saints-border); }
	.saints-card__media { aspect-ratio: 1; margin: 0; }
	.saints-card__flag { top: .5rem; left: .5rem; padding: .25rem .45rem; font-size: .5rem; }

	.saints-card__body { text-align: left; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; }
	.saints-card__kicker { font-size: .56rem; margin: 0; }
	.saints .saints-card__title { font-size: 1.45rem; margin: 0; letter-spacing: .03em; }
	.saints-card__title::after { display: none; }
	.saints-card__sub { font-size: .75rem; line-height: 1.45; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
	.saints-card__price { font-size: .875rem; margin-top: .3rem; }
	.saints-card__body::after { content: "Bekijk ring \2192"; margin-top: .45rem; font-size: .6rem; font-weight: 500; letter-spacing: var(--saints-tracking-wide); text-transform: uppercase; color: var(--saints-green); border-bottom: 1px solid currentColor; padding-bottom: 2px; }

	/* Hover image swap makes no sense on touch: keep the product shot */
	.saints-card:hover .saints-card__media.has-hover .saints-card__img:not(.saints-card__img--hover) { opacity: 1; }
	.saints-card:hover .saints-card__img--hover { opacity: 0; }

	/* Compact archive header so products appear sooner */
	.saints.post-type-archive-product .saints-page-hero,
	.saints.tax-product_cat .saints-page-hero { padding: 1.75rem 0 1.5rem; }
	.saints.post-type-archive-product .saints-page-hero .saints-crumbs,
	.saints.tax-product_cat .saints-page-hero .saints-crumbs { margin-bottom: 1rem; }
	.saints.post-type-archive-product .saints-page-hero .saints-kicker,
	.saints.tax-product_cat .saints-page-hero .saints-kicker { margin-bottom: .6rem; }
	.saints.post-type-archive-product .saints-page-hero__title,
	.saints.tax-product_cat .saints-page-hero__title { font-size: 2.4rem; margin-bottom: .4rem; }
	.saints.post-type-archive-product .saints-page-hero__lead,
	.saints.tax-product_cat .saints-page-hero__lead { font-size: .9rem; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

	.saints.post-type-archive-product .saints-filterbar,
	.saints.tax-product_cat .saints-filterbar { padding-top: .75rem; margin-bottom: 1.25rem; }
	.saints-tab { padding: .75rem 0 .8rem; font-size: .65rem; }
	.saints-tabs { gap: 1.25rem; }
	.saints-filters__toggle { min-height: 38px; }

	/* Bricks puts the filter bar and the sort dropdown in one flex row: let the filter
	   bar dissolve (display: contents) so Filters + sorting share one compact line. */
	.saints .bricks-before-shop-loop { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-bottom: 1.25rem; }
	.saints .bricks-before-shop-loop > .saints-filterbar { display: contents; }
	.saints .bricks-before-shop-loop .saints-tabs { order: 1; flex: 1 1 100%; margin: 0; }
	.saints .bricks-before-shop-loop .saints-filters { order: 2; flex: 0 0 auto; display: block; }
	.saints .bricks-before-shop-loop .saints-filters.is-open { flex: 1 1 100%; }
	.saints .bricks-before-shop-loop > .woocommerce-ordering { order: 3; flex: 1 1 0; min-width: 0; margin: 0; justify-content: flex-end; }
	.saints .bricks-before-shop-loop > .woocommerce-notices-wrapper { order: 4; flex: 1 1 100%; }
	.saints .woocommerce-ordering select { width: auto; max-width: 100%; text-align: right; font-size: .72rem; letter-spacing: .04em; }
}