/* Shop, category and search pages, and the product card used everywhere (approved mockups, 22 Oct 2026).
   Sections: category head + banner, result count, the grid, the card, pagination, page spacing.
   WooCommerce's own layout stylesheet floats the cards and gives them a percentage width; the grid
   below replaces that, so the card's width, float and margin carry !important (in this one place only). */

/* ---------------------------------------------------------------- category head + banner */
.cat-top { max-width: var(--hj-wrap); margin-inline: auto; padding: 40px var(--hj-gut) 0; }
.cat-head { text-align: center; max-width: 860px; margin: 0 auto 26px; }
.cat-head h1 {
	margin: 0 0 10px; font-size: clamp(28px, 3vw, 36px); font-weight: 600; line-height: 1.15;
	letter-spacing: .06em; text-transform: uppercase;
}
.cat-desc { font-size: 15.5px; line-height: 1.65; font-weight: 300; color: var(--hj-ink-2); }
.cat-desc p { margin: 0; }

/* Black copy panel, then up to three photos (--n is how many). */
.cat-banner { display: grid; grid-template-columns: 1.25fr repeat(var(--n, 3), minmax(0, 1fr)); height: 360px; background: var(--hj-ink); overflow: hidden; }
.cat-banner img { display: block; width: 100%; min-width: 0; height: 100%; object-fit: cover; object-position: 50% 12%; }
.cb-copy {
	display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px;
	padding: 0 36px; background: var(--hj-ink); color: #fff;
}
.cb-copy p { margin: 0; }
.cb-brand { font-size: 11.5px; letter-spacing: .28em; text-transform: uppercase; color: var(--hj-gold); }
.cb-name { font-size: clamp(44px, 5.2vw, 68px); font-weight: 600; line-height: 1; letter-spacing: .04em; text-transform: uppercase; color: #fff; }
.cb-sub { margin-bottom: 18px !important; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.cb-copy .cb-btn {
	display: inline-flex; align-items: center; min-height: 42px; padding: 0 26px; background: #fff; color: var(--hj-ink);
	font-size: 12.5px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; text-decoration: none;
}
.cb-copy .cb-btn:hover { background: var(--hj-accent-soft); color: var(--hj-ink); }

/* ---------------------------------------------------------------- notices + result count (inside the 1180 column) */
.woocommerce-notices-wrapper { max-width: var(--hj-wrap); margin-inline: auto; padding-inline: var(--hj-gut); }
.woocommerce .woocommerce-result-count {
	float: none; max-width: var(--hj-wrap); margin: 34px auto 16px; padding-inline: var(--hj-gut);
	font-size: 14px; color: var(--hj-ink-2); text-align: center;
}
.cat-anchor { display: block; scroll-margin-top: calc(var(--hj-sticky, 72px) + 12px); }

/* ---------------------------------------------------------------- the grid: edge to edge, 2px gaps */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; margin: 0; padding: 0; list-style: none;
}
/* Category pages show four products per row (three on tablets; phones keep two, see the 900px block below). */
.tax-product_cat.woocommerce ul.products,
.tax-product_cat.woocommerce-page ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) {
	.tax-product_cat.woocommerce ul.products,
	.tax-product_cat.woocommerce-page ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }
.woocommerce ul.products li.product,
.woocommerce-page ul.products[class*="columns-"] li.product {
	position: relative; display: flex; flex-direction: column; float: none !important; clear: none !important;
	width: auto !important; min-width: 0; margin: 0 !important; padding: 0;
}
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link {
	display: flex; flex: 1; flex-direction: column; min-width: 0; color: var(--hj-ink); text-decoration: none;
}

/* ---------------------------------------------------------------- the card */
.woocommerce ul.products li.product .qav-thumb { position: relative; display: block; overflow: hidden; background: var(--hj-mist); }
.woocommerce ul.products li.product .qav-thumb img {
	display: block; width: 100%; height: auto; margin: 0; aspect-ratio: 2 / 3; object-fit: cover; object-position: 50% 14%;
	transition: transform .6s ease;
}
/* The Atome logo is an image inside the photo box: the photo rule above (2:3 crop, zoom on hover) must not touch it. */
.woocommerce ul.products li.product .qav-atome img,
.woocommerce ul.products li.product:hover .qav-atome img { aspect-ratio: auto; object-fit: contain; transform: none; transition: none; }
.woocommerce ul.products li.product:hover .qav-thumb img { transform: scale(1.03); }

/* Atome logo height: 15px in the product-page line, 13px in the badge on the photo (Shop Kit reads these two values). */
body .qav-atome { --qav-atome-logo-height: 15px; --qav-atome-badge-logo-height: 13px; }

/* -N% pill (Shop Kit prints the span; the look is ours) */
.woocommerce ul.products li.product .qav-thumb span.onsale {
	position: absolute; top: 10px; right: 10px; left: auto; z-index: 2; min-width: 0; min-height: 0; margin: 0;
	padding: 3px 9px; border-radius: 0; background: var(--hj-ink); color: #fff;
	font-size: 12.5px; font-weight: 600; line-height: 1.5; letter-spacing: .04em;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	margin: 12px 0 0 !important; padding: 0 12px; font-size: 15px; font-weight: 500; line-height: 1.3 !important; letter-spacing: 0;
	text-align: left; text-transform: none; color: var(--hj-ink);
}
.woocommerce ul.products li.product .cc-desc {
	margin: 2px 0 0; padding: 0 12px; font-size: 13.5px; line-height: 1.4; color: var(--hj-muted);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Price: new price first, old price struck through after it (WooCommerce prints <del> first, so the row is reversed). */
.woocommerce ul.products li.product .price {
	display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: baseline; gap: 8px; flex-wrap: wrap;
	margin: auto 0 0; padding: 6px 12px 0; font-size: 15px; font-weight: 400; text-align: left; color: var(--hj-ink);
}
.woocommerce ul.products li.product .price ins { background: none; font-weight: 600; text-decoration: none; color: var(--hj-ink); }
.woocommerce ul.products li.product .price del { font-size: 13.5px; opacity: 1; color: var(--hj-muted); }
.woocommerce ul.products li.product .price > .woocommerce-Price-amount { font-weight: 600; }
.woocommerce ul.products li.product .price del .woocommerce-Price-amount { font-weight: 400; }
.woocommerce ul.products li.product.outofstock .qav-thumb img { filter: grayscale(.35) opacity(.85); }

/* ---------------------------------------------------------------- pagination: square page numbers, ink for the current one */
.woocommerce nav.woocommerce-pagination { margin: 40px 0 0; text-align: center; }
.woocommerce nav.woocommerce-pagination ul.page-numbers { display: inline-flex; gap: 8px; margin: 0; padding: 0; border: 0; white-space: normal; }
.woocommerce nav.woocommerce-pagination ul li { display: block; float: none; margin: 0; border: 0; overflow: visible; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 10px; margin: 0;
	border: 1px solid var(--hj-line-2); border-radius: 0; background: #fff; color: var(--hj-ink);
	font-family: var(--hj-sans); font-size: 13px; font-weight: 500; letter-spacing: .04em; line-height: 1; text-decoration: none;
	transition: border-color .2s, background .2s, color .2s;
}
.woocommerce nav.woocommerce-pagination ul li a:hover { border-color: var(--hj-ink); background: #fff; color: var(--hj-ink); }
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--hj-ink); border-color: var(--hj-ink); color: #fff; }
.woocommerce nav.woocommerce-pagination ul li a.prev,
.woocommerce nav.woocommerce-pagination ul li a.next { font-size: 15px; }
.woocommerce nav.woocommerce-pagination ul li span.dots { border-color: transparent; color: var(--hj-muted); }

/* ---------------------------------------------------------------- page spacing */
/* The parent theme caps <main> at 1140px and, on phones, pads it 10px each side; the grid runs the full page
   width. Room under the grid (or its pagination) before the footer; on phones it also clears TSC's bottom bar. */
body.woocommerce.archive main.site-main { max-width: none; margin-inline: 0; padding: 0 0 84px; }

@media (max-width: 900px) {
	.cat-top { padding: 24px 16px 0; }
	.cat-head { margin-bottom: 20px; }
	.cat-desc { font-size: 15px; }
	.cat-banner { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); grid-template-rows: auto 150px; height: auto; }
	.cb-copy { grid-column: 1 / -1; align-items: center; text-align: center; padding: 26px 16px; }
	.cb-name { font-size: 48px; }
	.cb-sub { margin-bottom: 14px !important; }
	.woocommerce .woocommerce-result-count { margin: 24px auto 12px; padding-inline: 16px; font-size: 13px; }
	.woocommerce-notices-wrapper { padding-inline: 16px; }

	.woocommerce ul.products,
	.woocommerce-page ul.products,
	.tax-product_cat.woocommerce ul.products,
	.tax-product_cat.woocommerce-page ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.woocommerce ul.products li.product .woocommerce-loop-product__title,
	.woocommerce ul.products li.product .cc-desc { padding-inline: 10px; }
	.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 14px; }
	.woocommerce ul.products li.product .price { padding-inline: 10px; font-size: 14px; }
	.woocommerce ul.products li.product .qav-thumb span.onsale { top: 8px; right: 8px; }
	.woocommerce nav.woocommerce-pagination { margin: 28px 0 0; }
	.woocommerce nav.woocommerce-pagination ul.page-numbers { gap: 6px; }
	.woocommerce nav.woocommerce-pagination ul li a,
	.woocommerce nav.woocommerce-pagination ul li span { min-width: 36px; height: 36px; padding: 0 8px; }
	body.woocommerce.archive main.site-main { padding: 0 0 52px; }
}