/* ITEMPLS — shop archive, product grid, card, filters.
 *
 * The legacy catalogue was a narrow column of products beside a tall
 * sidebar. This replaces it with a full-width responsive grid and moves
 * filtering into a drawer on small screens, which is where the space
 * actually is.
 *
 * Every card is the same height by construction: a fixed image ratio, a
 * two-line clamp on the title, and the price row pinned to the bottom with
 * margin-top:auto. Ragged card bottoms are the single thing that makes a
 * WooCommerce grid look generic, and they come from letting content decide
 * height.
 */

.it-shop { display: block; padding-block: var(--it-s5) var(--it-s8); }

.it-shop__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--it-s3);
	margin-bottom: var(--it-s5);
}
.it-shop__title { margin: 0; font-size: var(--it-fs-xl); }
.it-shop__count { color: var(--it-text-muted); font-size: var(--it-fs-sm); }
.it-shop__tools { margin-left: auto; display: flex; gap: var(--it-s2); align-items: center; }

/* ------------------------------------------------------------- the grid */
.woocommerce ul.products,
ul.products {
	display: grid !important;
	/* V3 density: 150px tracks fill a 1170px container with 6-7 columns
	   where 200px gave 5. A deep catalogue is compared, not browsed. */
	/* 170px, not 150: at 150 the cards read as widgets rather than as the
	 * things being sold. A 186px minimum gave 215px cards -- V2's width, and
	 * V2's five per row -- so the floor is 170, which lands six across at
	 * about 177px each. Six, where V2 got five and the last pass got seven. */
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: var(--it-s3);
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}
@media (max-width: 520px) {
	ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--it-s3); }
}

/* Neutralise the parent theme's float/percentage-width grid. */
.woocommerce ul.products li.product,
ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
	padding: 0 !important;
}

/* -------------------------------------------------------------- the card */
ul.products li.product {
	display: flex;
	flex-direction: column;
	background: var(--it-surface);
	border: 1px solid var(--it-line);
	border-radius: var(--it-r-lg);
	overflow: hidden;
	transition: border-color var(--it-t), transform var(--it-t), box-shadow var(--it-t);
	position: relative;
}
ul.products li.product:hover {
	border-color: var(--it-line-strong);
	transform: translateY(-2px);
	box-shadow: var(--it-shadow);
}

/* One image area, one ratio, everywhere. */
ul.products li.product a img,
ul.products li.product img.attachment-woocommerce_thumbnail {
	display: block;
	width: 100%;
	aspect-ratio: var(--it-card-ratio);
	object-fit: contain;
	background:
		radial-gradient(120% 90% at 50% 0%, #1b2130 0%, #10141b 70%);
	padding: var(--it-s4);
	margin: 0 !important;
	border-bottom: 1px solid var(--it-line);
}

/* A product with no image must not collapse the grid. */
ul.products li.product .it-card__noimg {
	aspect-ratio: var(--it-card-ratio);
	display: grid;
	place-items: center;
	background: var(--it-surface-2);
	border-bottom: 1px solid var(--it-line);
	color: var(--it-text-faint);
	font-size: var(--it-fs-xs);
	letter-spacing: .08em;
	text-transform: uppercase;
}

ul.products li.product .it-card__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: var(--it-s3) var(--it-s4) var(--it-s4);
	flex: 1 1 auto;
}

ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2 {
	font-size: var(--it-fs-base) !important;
	font-weight: 600;
	color: var(--it-text);
	margin: 0 !important;
	padding: 0 !important;
	/* Exactly two lines, always: the grid stays even and long runeword
	 * names do not push the price out of alignment. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-clamp: 2;
	overflow: hidden;
	min-height: calc(2 * var(--it-fs-base) * 1.35);
	line-height: 1.35;
}

.it-card__meta { display: flex; flex-wrap: wrap; gap: 6px; }

.it-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--it-s3);
	margin-top: auto;            /* pins the price row to the bottom */
	padding-top: var(--it-s3);
}
.it-card__price { font-size: var(--it-fs-md); }
.it-card__price .from {
	display: block;
	font-size: var(--it-fs-xs);
	font-weight: 500;
	color: var(--it-text-faint);
}

/* The whole card is clickable, but the CTA stays a real button for
 * keyboard and screen-reader users. */
.it-card__link::after { content: ""; position: absolute; inset: 0; }

/* ANYTHING THE CUSTOMER CAN OPERATE MUST SIT ABOVE THAT PANEL.
 *
 * .it-card__link::after is a transparent panel stretched across the whole
 * card. It is positioned, so it paints above every STATIC descendant no
 * matter where they sit in the DOM -- and a static button underneath it never
 * receives a click, because the panel is what the browser hit-tests.
 *
 * The line below used to read, alone:
 *
 *     ul.products li.product .button { position: relative; z-index: 1; }
 *
 * which lifted WooCommerce's own .button and nothing else. Every control
 * added afterwards used .it-* classes and silently fell underneath: the Fast
 * Buy roll radios, the quantity box, Add, and Request. Clicking Add on a
 * catalogue card opened the product page instead of adding the item -- on
 * every card in the shop, in grid and list alike. Measured, not guessed:
 * document.elementFromPoint at the centre of .it-fb__add returned
 * .it-card__link on unique items, charms and boots.
 *
 * So this is a rule about interactive elements rather than a list of class
 * names, because the list is what failed. A control added next year is
 * covered by it without anyone remembering this comment exists. */
html body ul.products li.product .it-fb,
html body ul.products li.product .it-card__actions,
html body ul.products li.product .it-card__foot,
html body ul.products li.product .button,
html body ul.products li.product .added_to_cart,
html body ul.products li.product .it-card__body button,
html body ul.products li.product .it-card__body input,
html body ul.products li.product .it-card__body label,
html body ul.products li.product .it-card__body select {
	position: relative;
	z-index: 2;
}

ul.products li.product .button,
ul.products li.product .added_to_cart {
	min-height: 38px;
	padding: 8px 14px;
	font-size: var(--it-fs-sm);
	border-radius: var(--it-r);
	margin: 0 !important;
}

/* Kill the parent theme's hover overlays and secondary-image swap, which
 * fight the fixed ratio. */
ul.products li.product .shoptimizer-loop-product__link::after,
ul.products li.product .product-image-flip,
ul.products li.product .woocommerce-loop-product__link .secondary-image { display: none !important; }

/* --------------------------------------------------------------- filters */
.it-filters { display: grid; gap: var(--it-s4); }
.it-filters__group { border-top: 1px solid var(--it-line); padding-top: var(--it-s4); }
.it-filters__group:first-child { border-top: 0; padding-top: 0; }
.it-filters__legend {
	font-size: var(--it-fs-xs);
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--it-text-faint);
	margin-bottom: var(--it-s3);
}
.it-filters__opt {
	display: flex; align-items: center; gap: 10px;
	padding: 7px 0; color: var(--it-text-muted); font-size: var(--it-fs-sm);
}
.it-filters__opt:hover { color: var(--it-text); }

.it-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: var(--it-s6); }
@media (max-width: 1000px) {
	.it-layout { grid-template-columns: minmax(0, 1fr); }
	.it-layout__aside { display: none; }
}

/* Mobile: filters live in a bottom sheet, reachable from a sticky bar. */
.it-filterbar { display: none; }
@media (max-width: 1000px) {
	.it-filterbar {
		display: flex; gap: var(--it-s2);
		position: sticky; top: 64px; z-index: 90;
		padding: var(--it-s3) 0;
		background: var(--it-bg);
		border-bottom: 1px solid var(--it-line);
	}
	.it-sheet {
		position: fixed; inset: auto 0 0 0;
		max-height: 82vh; overflow-y: auto;
		background: var(--it-surface);
		border-top: 1px solid var(--it-line);
		border-radius: var(--it-r-lg) var(--it-r-lg) 0 0;
		padding: var(--it-s5);
		z-index: 400;
		transform: translateY(100%);
		transition: transform var(--it-t);
	}
	.it-sheet[data-open="true"] { transform: none; }
}

/* Hide Shoptimizer's sidebar and breadcrumb bar on shop pages. */
.woocommerce-page #secondary, .widget-area.shop-sidebar { display: none !important; }

/* WooCommerce clears its float grid with ul.products::before/::after. In a CSS
 * grid those pseudo-elements become grid ITEMS, so the first cell was taken by
 * an invisible table and the first row of products started in column two. */
ul.products::before,
ul.products::after { display: none !important; content: none !important; }

/* ------------------------------------------------------------------------
 * The shop grid as it actually rendered, reviewed in a real browser on the
 * final pass. None of these tripped a probe.
 * ------------------------------------------------------------------------ */

/* Hiding Shoptimizer's sidebar left its content area at the sidebar-layout
 * width and float, so the grid sat pushed right of a ~390px empty column. */
html body.woocommerce-shop #primary,
html body.post-type-archive-product #primary,
html body.tax-product_cat #primary,
html body.woocommerce-shop .content-area,
html body.tax-product_cat .content-area,
html body.post-type-archive-product .content-area {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
	max-width: none !important;
}

/* The no-image placeholder rendered as a narrow box in the corner rather
 * than filling the card's image area, so those cards looked broken. */
ul.products li.product { align-items: stretch !important; }
ul.products li.product .it-card__noimg {
	width: 100%;
	align-self: stretch;
	text-align: center;
}

/* Card titles: Kirki reached them too, so they came out serif. */
html body ul.products li.product .woocommerce-loop-product__title,
html body ul.products li.product h2.woocommerce-loop-product__title {
	font-family: var(--it-font) !important;
	color: var(--it-text) !important;
}

/* "Choose mode" broke onto two lines in the button. */
ul.products li.product .it-card__foot .it-btn {
	white-space: nowrap;
	padding: 8px 12px;
	flex: none;
}
ul.products li.product .it-card__foot { flex-wrap: wrap; }

/* The sort dropdown rendered dark-on-dark: only its chevron showed. */
html body .woocommerce-ordering select,
html body .woocommerce-ordering .orderby {
	color: var(--it-text) !important;
	background-color: var(--it-surface-3) !important;
	border: 1px solid var(--it-line) !important;
	font-family: var(--it-font) !important;
	min-width: 190px;
}
html body .woocommerce-pagination a,
html body .woocommerce-pagination span,
html body nav.woocommerce-pagination ul li a,
html body nav.woocommerce-pagination ul li span { color: var(--it-text-muted) !important; }
html body nav.woocommerce-pagination ul li span.current { color: var(--it-accent) !important; }

/* Phones: Shoptimizer's "Show filters" toggle opened the sidebar this theme
 * removes, so it was a white bar leading nowhere. */
.mobile-filter,
html body .shoptimizer-mobile-filter,
html body button.mobile-filter { display: none !important; }
/* A media query here used to hide pagination below 860px, opening with
 *   .woocommerce-products-header ~ nav.woocommerce-pagination
 * -- the same general-sibling mistake as the rule in v2.css, so phones
 * lost their only way to page through a category by an entirely separate
 * route. Both are gone: Shoptimizer's controls are unhooked in
 * inc/pagination.php and .it-pager replaces them. */
/* The grid kept Shoptimizer's left offset but no right one on phones, so the
 * cards ran to the screen edge. */
html body ul.products { margin-inline: 0 !important; width: 100% !important; box-sizing: border-box; }

/* ===================================================== catalogue pagination ==
 *
 * The control that reaches the rest of the results. Three layers, deliberately
 * in this order, because each one is the fallback for the one above it:
 *
 *   1. Load more   -- a link to /page/N/ that script upgrades into an append
 *   2. Page numbers -- always real links, crawlable and keyboard-reachable
 *   3. Show 48 / 96 -- the page size, as query-string links
 *
 * Nothing here needs JavaScript to reach a product.
 */
.it-pager {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin: 30px 0 8px;
	padding: 22px 16px 24px;
	border-top: 1px solid var(--it-line);
	text-align: center;
}
.it-pager__count {
	margin: 0;
	font-size: var(--it-fs-sm);
	font-weight: 600;
	color: var(--it-muted);
	font-variant-numeric: tabular-nums;
}
.it-pager__more {
	min-width: 260px;
	min-height: 46px;
	font-size: var(--it-fs-md);
}
.it-pager__more[aria-busy="true"] { opacity: .65; pointer-events: none; }

/* Page numbers. paginate_links() emits its own markup, so this styles what
 * WordPress gives us rather than asking it for different markup. */
.it-pager__pages .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	min-height: 38px;
	padding: 0 10px;
	margin: 0 2px;
	border: 1px solid var(--it-line-strong);
	border-radius: 8px;
	font-size: var(--it-fs-sm);
	font-weight: 600;
	color: var(--it-ink);
	font-variant-numeric: tabular-nums;
}
.it-pager__pages a.page-numbers:hover {
	border-color: var(--it-accent);
	color: var(--it-accent);
}
.it-pager__pages .page-numbers.current {
	background: var(--it-accent);
	border-color: var(--it-accent);
	color: var(--it-on-accent, #1a1204);
}
.it-pager__pages .page-numbers.dots { border-color: transparent; min-width: 22px; padding: 0; }
.it-pager__pages .page-numbers.prev,
.it-pager__pages .page-numbers.next { padding: 0 14px; }

.it-pager__size {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--it-fs-xs);
	color: var(--it-muted);
}
.it-pager__size a {
	min-width: 34px;
	padding: 4px 8px;
	border: 1px solid var(--it-line);
	border-radius: 6px;
	color: var(--it-muted);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.it-pager__size a:hover { border-color: var(--it-accent); color: var(--it-accent); }
.it-pager__size a[aria-current="true"] {
	border-color: var(--it-accent);
	color: var(--it-ink);
	background: var(--it-surface-2);
}

/* Appended pages announce themselves, so a screen reader is told that more
 * products arrived rather than silently gaining 48 list items. */
.it-pager__live {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (max-width: 600px) {
	.it-pager__more { min-width: 0; width: 100%; }
	.it-pager__pages .page-numbers { min-width: 34px; min-height: 34px; margin: 2px 1px; }
}

/* A reference tooltip is labelled as one.
 *
 * A capture shared with a sibling variant -- Coven Diadem's tooltip standing
 * in for Coven Death Mask, one roll's for another -- has the right item and
 * possibly the wrong base or roll. The badge says "Stats (ref)" and the
 * caption says why, because a customer who discovers that after paying is a
 * refund. A roll with its own capture drops the label when it is selected. */
.it-card__stats[data-kind="reference"] { opacity: .88; }
.it-peek[data-kind="reference"] .it-peek__cap { color: var(--it-warn, #b8860b); }