/* =========================================================================
   MyPCB House — shop styles
   Loaded only on WooCommerce pages. Phase 1 covers the grid, the product
   card and the search hit. Filters, the Project Finder and the parts list
   arrive in Phase 2 and Phase 3.
   ========================================================================= */

/* ---------- Layout ------------------------------------------------------ */

.shop { display: block; }
.shop__main { min-width: 0; }

.breadcrumb {
	display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
	margin-bottom: var(--sp-4);
	color: var(--c-text-faint);
	font-size: .8rem;
	font-family: var(--f-mono);
}
.breadcrumb a { color: var(--c-text-dim); text-decoration: none; }
.breadcrumb a:hover { color: var(--c-accent); }
.breadcrumb__sep { color: var(--c-line); }

.woocommerce-products-header__title { margin-bottom: var(--sp-2); }
.term-description { color: var(--c-text-dim); max-width: 70ch; }

/* ---------- Toolbar ----------------------------------------------------- */

.shop-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-3);
	margin-top: var(--sp-4);
	padding-block: var(--sp-3);
	border-block: 1px solid var(--c-line-soft);
}

.shop-toolbar__filter { position: relative; flex: none; }
.shop-toolbar__filter .icon { width: 17px; height: 17px; }
.shop-toolbar__count {
	display: grid;
	place-items: center;
	min-width: 19px; height: 19px;
	margin-inline-start: 2px;
	padding: 0 5px;
	border-radius: var(--r-full);
	background: var(--c-copper);
	color: #180c02;
	font-family: var(--f-mono);
	font-size: .65rem;
	font-weight: 700;
}

.woocommerce-result-count {
	margin: 0;
	color: var(--c-text-faint);
	font-family: var(--f-mono);
	font-size: .74rem;
	letter-spacing: .04em;
}
.woocommerce-ordering { margin-inline-start: auto; }
.woocommerce-ordering select {
	min-height: 42px;
	padding: var(--sp-2) var(--sp-4);
	background: var(--c-surface-2);
	color: var(--c-text);
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	font: inherit;
	font-size: .85rem;
	cursor: pointer;
}
.woocommerce-ordering select:focus-visible { border-color: var(--c-accent); }

.woocommerce-notices-wrapper:empty { display: none; }

/* ---------- Filter drawer ----------------------------------------------- */

/* Filters slide in from the trailing edge, so they read as a panel over the
   listing rather than as the site menu appearing again. */
.drawer--end .drawer__panel {
	inset-inline-start: auto;
	inset-inline-end: 0;
	border-inline: 1px solid var(--c-line) none;
	animation-name: slide-in-end;
}
@keyframes slide-in-end { from { transform: translateX(100%); } }

.drawer__title {
	color: var(--c-text-faint);
	font-family: var(--f-mono);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
}
.drawer__body { flex: 1; padding: var(--sp-4); }
.drawer__foot {
	position: sticky;
	bottom: 0;
	padding: var(--sp-3) var(--sp-4);
	background: var(--c-surface);
	border-top: 1px solid var(--c-line);
}

.filter-group { margin-bottom: var(--sp-5); }
.filter-group:last-child { margin-bottom: 0; }
.filter-group__title {
	margin: 0 0 var(--sp-3);
	color: var(--c-text-faint);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.filter-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.filter-list__item {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	min-height: 44px;
	padding: var(--sp-2) var(--sp-2);
	border-radius: var(--r-sm);
	color: var(--c-text-dim);
	font-size: .875rem;
	text-decoration: none;
}
.filter-list__item:hover { background: var(--c-surface-2); color: var(--c-text); }

.filter-list__box {
	width: 17px; height: 17px;
	flex: none;
	border: 1px solid var(--c-line);
	border-radius: 4px;
}
.filter-list__item.is-on { color: var(--c-accent); font-weight: 600; }
.filter-list__item.is-on .filter-list__box {
	background: var(--c-accent);
	border-color: var(--c-accent);
	/* A tick drawn with two borders — no icon font, no extra request. */
	box-shadow: inset 0 0 0 2px var(--c-bg), inset 0 0 0 9px var(--c-accent);
}

.filter-list__name { flex: 1; min-width: 0; }
.filter-list__n {
	color: var(--c-text-faint);
	font-family: var(--f-mono);
	font-size: .72rem;
}

/* ---------- Product grid ------------------------------------------------ */

/* The grid fits itself to the space it is given.
 *
 * It used to be three hard-coded column counts: two up to 640px, three up to
 * 1024px, four above. Between those widths the cards simply stretched, so a
 * 900px tablet showed three cards each half again as wide as the same card on
 * a laptop, and the photograph, the title and the button all changed
 * proportion with it. auto-fill with a floor and a ceiling keeps a card the
 * same size everywhere and changes how many of them fit instead.
 *
 * min() guards the small end: a bare 158px minimum would overflow a 320px
 * phone once the gutter is taken off. */
ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(158px, 100%), 1fr));
	gap: var(--sp-3);
	margin: var(--sp-5) 0 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 640px) {
	ul.products {
		grid-template-columns: repeat(auto-fill, minmax(min(215px, 100%), 1fr));
		gap: var(--sp-4);
	}
}

/* Each card is its own container, so what follows can respond to the width of
 * THE CARD rather than the width of the window.
 *
 * That distinction is the whole point. The same card appears in the shop grid,
 * in the four-up "related products" strip, and inside a narrow page column.
 * Keyed to the viewport it was right in one of those and wrong in the others. */
ul.products li.product {
	container-type: inline-size;
	container-name: card;

	position: relative;

	/* A three-row grid rather than a flex column: the photograph, then
	 * everything that reads, then the button pinned to the floor. Every card
	 * in a row therefore puts its title on the same line and its button on the
	 * same line, whatever the length of the product name. That alignment is
	 * what makes a grid look set rather than assembled. */
	display: grid;
	grid-template-rows: auto 1fr auto;
	gap: var(--sp-2);

	padding: var(--sp-2) var(--sp-2) var(--sp-3);

	background: var(--c-surface);
	border: 1px solid var(--c-line-soft);
	border-radius: var(--r-lg);
	transition: border-color var(--dur) var(--ease),
				transform var(--dur) var(--ease),
				box-shadow var(--dur) var(--ease);
}
ul.products li.product:hover {
	border-color: var(--c-accent);
	transform: translateY(-3px);
	box-shadow: var(--sh-2);
}

/* WooCommerce wraps the photo, the title and the price in one link. It is the
 * middle row, and it stacks its own children. */
ul.products li.product > a {
	display: grid;
	grid-template-rows: auto auto 1fr;
	gap: var(--sp-2);
	grid-row: 1 / 3;
	text-decoration: none;
	color: inherit;
	min-width: 0;
}

/* The photo plate. See --c-plate in theme.css for why this exists.
 *
 * The width is now plain 100% inside the card's own padding. It used to be
 * calc(100% - var(--sp-4)) with a separate margin, which had to be kept in
 * step by hand and drifted the moment the spacing scale became fluid. */
ul.products li.product img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
	background: var(--c-plate);
	border: 1px solid var(--c-plate-edge);
	border-radius: var(--r-md);
	padding: var(--sp-3);
	margin: 0;
	transition: transform var(--dur) var(--ease);
}
/* The part lifts slightly, as if picked up off the bench. */
ul.products li.product:hover img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
	ul.products li.product:hover img { transform: none; }
}

ul.products li.product .woocommerce-loop-product__title {
	padding: 0 var(--sp-2);
	margin: 0;
	font-size: .85rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--c-text);

	/* Two lines, then an ellipsis. Keeps every card the same height. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;

	/* Long unbroken part numbers must not push the card wider than its
	   column — "MQ-6-Liquefied-Petroleum-Gas-Sensor" is a real title here. */
	overflow-wrap: anywhere;
}

ul.products li.product .price {
	display: block;
	padding: 0 var(--sp-2);
	margin: 0;
	align-self: end;
	color: var(--c-copper);
	font-weight: 700;
	font-size: .95rem;
	font-variant-numeric: tabular-nums;
}
ul.products li.product .price del { color: var(--c-text-faint); font-weight: 500; font-size: .85rem; margin-inline-end: var(--sp-2); }
ul.products li.product .price ins { text-decoration: none; }

ul.products li.product .star-rating { margin: 0 var(--sp-2); font-size: .75rem; color: var(--c-copper); }

ul.products li.product .button {
	grid-row: 3;
	margin: 0;
	min-height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	border-radius: var(--r-md);
	background: var(--c-accent);
	color: var(--c-accent-ink);
	border: 0;
	font-weight: 700;
	font-size: .8rem;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
ul.products li.product .button:hover { background: var(--c-accent-dim); color: var(--c-accent-ink); }
ul.products li.product .added_to_cart { display: none; }

/* Feedback while the theme's fetch() add-to-cart is in flight, and after it
   lands. Without this the button looks inert for the whole round trip and
   people tap it twice. */
ul.products li.product .button.is-busy { opacity: .65; cursor: progress; }
ul.products li.product .button.is-busy::after {
	content: "";
	width: 13px; height: 13px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: var(--r-full);
	animation: spin .7s linear infinite;
}
ul.products li.product .button.is-added {
	background: var(--c-ok);
	color: #04140f;
}
ul.products li.product .button.is-added::after {
	content: "\2713";
	font-weight: 900;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	ul.products li.product .button.is-busy::after { animation-duration: 2s; }
}

/* Below about 170px of card there is no room for a word and an icon. Note
   this asks the CARD, not the window — a narrow card in a wide sidebar gets
   the same treatment as a card on a phone, which is the correct answer and
   is not something a media query can express. */
@container card (max-width: 170px) {
	ul.products li.product .button { font-size: .74rem; padding-inline: var(--sp-2); }
	ul.products li.product .woocommerce-loop-product__title { font-size: .8rem; }
	ul.products li.product img { padding: var(--sp-2); }
}

/* A generous card can afford to show more of the name. */
@container card (min-width: 260px) {
	ul.products li.product .woocommerce-loop-product__title { -webkit-line-clamp: 3; font-size: .9rem; }
	ul.products li.product .price { font-size: 1.05rem; }
}

/* Sale flash, styled as a copper trace tag */
ul.products li.product .onsale,
.single-product .onsale {
	position: absolute;
	top: var(--sp-3);
	inset-inline-start: var(--sp-3);
	z-index: var(--z-raised);
	margin: 0;
	padding: 3px var(--sp-3);
	background: var(--c-copper);
	color: #180c02;
	border-radius: var(--r-full);
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.out-of-stock-badge {
	position: absolute; inset: 0;
	display: grid; place-items: center;
	background: rgb(6 20 16 / .6);
	color: var(--c-text);
	font-weight: 700;
}

/* The live search result styles used to live here. They have moved to
   theme.css, because the search sheet is in the header of every page while
   this stylesheet only loads on the shop — so searching from the About page
   produced a list of unstyled links. */

/* ---------- Single product ---------------------------------------------- */

/* Gallery and summary sit side by side on a wide screen; the tabs and the
   related row below span the full width. Grid handles both without needing
   a template override. */
.single-product div.product {
	display: grid;
	gap: var(--sp-5);
	margin-top: var(--sp-4);
}
@media (min-width: 900px) {
	.single-product div.product {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
		gap: var(--sp-6);
		align-items: start;
	}
	.single-product div.product > .woocommerce-tabs,
	.single-product div.product > .related,
	.single-product div.product > .upsells,
	.single-product div.product > .woocommerce-product-gallery + .summary ~ * {
		grid-column: 1 / -1;
	}
}

/* Gallery: the photo sits on a plate, same as everywhere else. */
.woocommerce-product-gallery {
	position: relative;
	min-width: 0;
	background: var(--c-plate);
	border: 1px solid var(--c-plate-edge);
	border-radius: var(--r-lg);
	padding: var(--sp-3);
	overflow: hidden;
}
.woocommerce-product-gallery img { width: 100%; height: auto; background: transparent; }
.woocommerce-product-gallery__wrapper { margin: 0; }

.woocommerce-product-gallery .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin: var(--sp-3) 0 0;
	padding: 0;
	list-style: none;
}
.woocommerce-product-gallery .flex-control-thumbs li { width: 62px; }
.woocommerce-product-gallery .flex-control-thumbs img {
	border: 1px solid var(--c-plate-edge);
	border-radius: var(--r-sm);
	cursor: pointer;
	opacity: .65;
	transition: opacity var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs img:hover {
	opacity: 1;
	border-color: var(--c-accent);
}
.woocommerce-product-gallery__trigger {
	position: absolute;
	top: var(--sp-3); inset-inline-end: var(--sp-3);
	z-index: var(--z-raised);
	width: 40px; height: 40px;
	display: grid; place-items: center;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-full);
	color: var(--c-text);
	text-decoration: none;
	font-size: 0;
}
.woocommerce-product-gallery__trigger::before { content: "⤢"; font-size: 17px; }

/* Summary */
.summary.entry-summary { min-width: 0; }
.product_title {
	margin: 0 0 var(--sp-3);
	font-size: clamp(1.4rem, 4.2vw, 2rem);
	line-height: 1.18;
	letter-spacing: -.025em;
}

.single-product .summary .price {
	display: flex;
    flex-wrap: wrap;
	align-items: baseline;
	gap: var(--sp-2);
	margin: 0 0 var(--sp-4);
	color: var(--c-copper);
	font-family: var(--f-mono);
	font-size: clamp(1.5rem, 5vw, 2.1rem);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.single-product .summary .price del {
	color: var(--c-text-faint);
	font-size: .55em;
	font-weight: 500;
}
.single-product .summary .price ins { text-decoration: none; }

.woocommerce-product-details__short-description {
	margin-bottom: var(--sp-4);
	color: var(--c-text-dim);
	font-size: .925rem;
	line-height: 1.6;
}

/* The technical strip: stock, part code, drawer. */
.facts {
	display: grid;
	gap: 0;
	margin: 0 0 var(--sp-5);
	padding: var(--sp-1) 0;
	border-block: 1px dashed var(--c-line);
}
.facts__row {
	display: grid;
	grid-template-columns: 104px 1fr;
	gap: var(--sp-3);
	align-items: center;
	padding-block: var(--sp-2);
}
.facts__row + .facts__row { border-top: 1px dashed var(--c-line-soft); }
.facts dt {
	color: var(--c-text-faint);
	font-family: var(--f-mono);
	font-size: .66rem;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.facts dd { margin: 0; font-size: .875rem; font-weight: 600; }
.facts dd a { color: var(--c-accent); text-decoration: none; }
.facts dd.is-ok { color: var(--c-ok); }
.facts dd.is-out { color: var(--c-danger); }

/* Add to cart */
.single-product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--sp-3);
	margin: 0 0 var(--sp-4);
}
.single-product form.cart .quantity { flex: none; }
.single-product .quantity input.qty {
	width: 78px;
	min-height: 52px;
	padding: var(--sp-2);
	background: var(--c-surface-2);
	color: var(--c-text);
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	font: inherit;
	font-family: var(--f-mono);
	font-size: 1rem;
	text-align: center;
}
.single-product form.cart button[type="submit"],
.single-product form.cart .single_add_to_cart_button {
	flex: 1 1 220px;
	min-height: 52px;
	padding-inline: var(--sp-5);
	border: 0;
	border-radius: var(--r-md);
	background: var(--c-accent);
	color: var(--c-accent-ink);
	font: inherit;
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
	transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.single-product form.cart button[type="submit"]:hover { background: var(--c-accent-dim); }
.single-product form.cart button[type="submit"]:active { transform: translateY(1px); }

/* WooCommerce prints its own "14 in stock" line right above the button.
   The facts strip already answers that question in the visitor's language
   ("In stock, ships today" / "Only 3 left"), so the raw one is dropped. */
.single-product .summary p.stock { display: none; }

/* Compare and wishlist links come from plugins as bare anchors. Give them
   a consistent secondary-action look rather than leaving them as stray
   underlined text under the buy button. */
.single-product .summary .compare,
.single-product .summary .yith-wcwl-add-to-wishlist a,
.single-product .summary .woocommerce-product-compare-button {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	min-height: 42px;
	margin-inline-end: var(--sp-2);
	padding: 0 var(--sp-4);
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	background: transparent;
	color: var(--c-text-dim);
	font-size: .85rem;
	font-weight: 600;
	text-decoration: none;
}
.single-product .summary .compare:hover,
.single-product .summary .yith-wcwl-add-to-wishlist a:hover {
	border-color: var(--c-accent);
	color: var(--c-accent);
}

/* Variation dropdowns */
.single-product table.variations { width: 100%; margin: 0 0 var(--sp-3); border-collapse: collapse; }
.single-product table.variations th,
.single-product table.variations td { padding: var(--sp-2) 0; text-align: start; vertical-align: middle; }
.single-product table.variations label { color: var(--c-text-faint); font-size: .8rem; font-weight: 600; }
.single-product table.variations select {
	width: 100%;
	min-height: 46px;
	padding: var(--sp-2) var(--sp-3);
	background: var(--c-surface-2);
	color: var(--c-text);
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	font: inherit;
}

/* Tabs */
.woocommerce-tabs { margin-top: var(--sp-6); }
.woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-1);
	margin: 0 0 var(--sp-4);
	padding: 0 0 2px;
	list-style: none;
	border-bottom: 1px solid var(--c-line);
	overflow-x: auto;
	scrollbar-width: none;
}
.woocommerce-tabs ul.tabs::-webkit-scrollbar { display: none; }
.woocommerce-tabs ul.tabs li { flex: none; }
.woocommerce-tabs ul.tabs a {
	display: block;
	padding: var(--sp-3) var(--sp-4);
	color: var(--c-text-dim);
	font-size: .875rem;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	margin-bottom: -3px;
}
.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs a:hover { color: var(--c-accent); border-bottom-color: var(--c-accent); }

.woocommerce-Tabs-panel { color: var(--c-text-dim); font-size: .925rem; line-height: 1.65; }
.woocommerce-Tabs-panel h2 { font-size: 1.15rem; color: var(--c-text); }
.woocommerce-Tabs-panel table { width: 100%; border-collapse: collapse; }
.woocommerce-Tabs-panel th,
.woocommerce-Tabs-panel td {
	padding: var(--sp-3);
	text-align: start;
	border-bottom: 1px solid var(--c-line-soft);
}
.woocommerce-Tabs-panel th { color: var(--c-text-faint); font-weight: 600; width: 34%; }

/* Related / upsells */
.related, .upsells { margin-top: var(--sp-6); }
.related > h2, .upsells > h2 {
	margin-bottom: var(--sp-4);
	font-size: clamp(1.2rem, 3.6vw, 1.6rem);
}

/* ---------- Sticky add-to-cart bar (single product) --------------------- */

/* On a long product page the real button scrolls away and the visitor has
   to hunt back up for it. This keeps the price and the button in thumb
   reach, and only appears once the real one is off screen. */
.sticky-buy {
	position: fixed;
	inset-inline: 0;
	bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
	z-index: var(--z-buybar);
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-3) var(--sp-4);
	background: color-mix(in oklab, var(--c-surface) 95%, transparent);
	backdrop-filter: blur(12px);
	border-top: 1px solid var(--c-line);
	transform: translateY(130%);
	transition: transform var(--dur) var(--ease);
}
.sticky-buy.is-visible { transform: none; }

.sticky-buy__info { display: grid; gap: 1px; min-width: 0; flex: 1; }
.sticky-buy__name {
	font-size: .78rem;
	font-weight: 600;
	color: var(--c-text-dim);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.sticky-buy__price {
	color: var(--c-copper);
	font-family: var(--f-mono);
	font-weight: 700;
	font-size: 1rem;
	font-variant-numeric: tabular-nums;
}
.sticky-buy__price del { display: none; }
.sticky-buy .btn { flex: none; }

@media (min-width: 900px) { .sticky-buy { display: none; } }
@media (prefers-reduced-motion: reduce) { .sticky-buy { transition: none; } }

/* ---------- Notices ------------------------------------------------------ */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-3);
	margin: 0 0 var(--sp-4);
	padding: var(--sp-4);
	list-style: none;
	background: var(--c-surface-2);
	border: 1px solid var(--c-line);
	border-inline-start: 3px solid var(--c-accent);
	border-radius: var(--r-md);
	font-size: .925rem;
}
.woocommerce-error { border-inline-start-color: var(--c-danger); }
.woocommerce-info  { border-inline-start-color: var(--c-copper); }
.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info .button {
	margin-inline-start: auto;
	padding: var(--sp-2) var(--sp-4);
	border-radius: var(--r-md);
	background: var(--c-surface-3);
	color: var(--c-text);
	border: 1px solid var(--c-line);
	text-decoration: none;
	font-size: .85rem;
	font-weight: 600;
}

/* ---------- Plugin leftovers on the product page ------------------------- */

/* The product box has to be the anchor for the sale tag. Without it the tag
   was positioned against the page itself and sat in the top-left corner,
   half hidden behind the header, instead of on the photo. */
.single-product div.product { position: relative; }
.single-product div.product > .onsale { top: var(--sp-4); inset-inline-start: var(--sp-4); }

/* WooCommerce hides the gallery (opacity 0) until its slider script has
   loaded, which on a phone is one to two seconds of an empty white plate
   where the product should be. The first photo is a plain <img> and is
   perfectly presentable before the slider wakes up, so show it at once. */
.woocommerce-product-gallery { opacity: 1 !important; }

/* The compare plugin prints its tray on every product page, but its own
   stylesheet is held back unless the compare feature is in use (see
   performance.php). Unstyled, it was a stray paragraph under the footer.
   It is now a small tray that only appears once something is in it. */
#yith-woocompare-preview-bar { display: none; }
#yith-woocompare-preview-bar.shown {
	position: fixed;
	z-index: var(--z-tray);
	inset-inline: var(--sp-3);
	bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + var(--sp-3));
	display: block;
	padding: var(--sp-3) var(--sp-4);
	background: var(--c-surface-2);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-3);
	font-size: .85rem;
}
#yith-woocompare-preview-bar .container { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
#yith-woocompare-preview-bar header p { margin: 0; color: var(--c-text-dim); }
#yith-woocompare-preview-bar .content { display: none; }
#yith-woocompare-preview-bar footer { margin-inline-start: auto; }
#yith-woocompare-preview-bar .button {
	display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--sp-4);
	background: var(--c-accent); color: var(--c-accent-ink);
	border-radius: var(--r-md); font-weight: 700; text-decoration: none;
}
@media (min-width: 900px) {
	#yith-woocompare-preview-bar.shown { inset-inline: auto var(--sp-5); bottom: var(--sp-5); max-width: 440px; }
}
/* On a phone product page the sticky buy bar already sits above the tab bar,
   so the compare tray stacks above both rather than on top of the bar. */
@media (max-width: 899px) {
	.single-product #yith-woocompare-preview-bar.shown {
		bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 84px);
	}
}

/* ---------- Shop pagination ---------------------------------------------- */

/* WooCommerce prints its page links as a bare <ul>, which the theme never
   styled: on a phone it fell into a tall column of 10px-wide numbers. Same
   look as the theme's own .pagination, so blog and shop page the same way. */
.woocommerce-pagination { margin-top: var(--sp-6); }
.woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
	border: 0;
}
.woocommerce-pagination ul.page-numbers li { margin: 0; border: 0; }
.woocommerce-pagination .page-numbers a,
.woocommerce-pagination .page-numbers span {
	display: grid;
	place-items: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 var(--sp-3);
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	color: var(--c-text-dim);
	font-family: var(--f-mono);
	font-size: .9rem;
	font-weight: 600;
	text-decoration: none;
	transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.woocommerce-pagination .page-numbers a:hover { border-color: var(--c-accent); color: var(--c-accent); }
.woocommerce-pagination .page-numbers span.current {
	background: var(--c-accent);
	border-color: var(--c-accent);
	color: var(--c-accent-ink);
}
.woocommerce-pagination .page-numbers span.dots { border-color: transparent; }

/* Breadcrumb links are read more than tapped, but on a phone they are the
   quickest way back up a category, so each gets a real hit area. */
@media (max-width: 899px) {
	.breadcrumb a { display: inline-flex; align-items: center; min-height: 36px; }
}

/* A product whose thumbnail was never generated serves its full-size
   original — 3026px on this shop. A grid track sized "auto" grows to fit
   that, and one card burst the page to 3,886px wide. minmax(0, 1fr) pins
   every track to the card instead of to its content. */
ul.products li.product,
ul.products li.product > a { grid-template-columns: minmax(0, 1fr); }
ul.products li.product img { max-width: 100%; height: auto; }
.facts dd a { display: inline-flex; align-items: center; min-height: 36px; }

/* ---------- The bench pass: archive and cards ---------------------------- */

/* Aisle sign: title and description on the left, the drawer's photograph on
   the right. On a phone the photo becomes a short banner above the title. */
.woocommerce-products-header {
	display: grid;
	gap: var(--sp-4);
	align-items: center;
	margin-bottom: var(--sp-2);
}
.woocommerce-products-header__title {
	margin: 0;
	font-size: clamp(2rem, 6vw, 3.2rem);
	font-weight: 800;
	letter-spacing: -.04em;
}
.aisle-sign {
	position: relative;
	order: -1;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
	background: var(--c-bg);
	aspect-ratio: 16 / 7;
}
.aisle-sign img { width: 100%; height: 100%; object-fit: cover; background: transparent; }
.aisle-sign__count {
	position: absolute;
	inset-inline-start: var(--sp-3);
	bottom: var(--sp-3);
	padding: 6px 10px;
	border-radius: var(--r-sm);
	background: color-mix(in oklab, var(--c-bg) 82%, transparent);
	backdrop-filter: blur(6px);
	opacity: 1;
}
@media (min-width: 760px) {
	.woocommerce-products-header { grid-template-columns: minmax(0, 1fr) clamp(220px, 28vw, 340px); }
	.woocommerce-products-header > :not(.aisle-sign) { grid-column: 1; }
	.aisle-sign { order: 0; grid-column: 2; grid-row: 1 / span 3; aspect-ratio: 4 / 3; }
}
.woocommerce-products-header .term-description { margin: 0; }
.woocommerce-products-header .term-description p:last-child { margin-bottom: 0; }

/* Card: the part code, set like a bin label. */
ul.products li.product > a { grid-template-rows: auto auto auto 1fr; }
.card-code {
	padding: 0 var(--sp-2);
	margin-bottom: -4px;
	color: var(--c-text-faint);
	font-family: var(--f-mono);
	font-size: .62rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
ul.products li.product .price { font-family: var(--f-mono); letter-spacing: -.02em; }

/* A grid of solid mint buttons shouted over the products they sell. The
   card button is now drawn as an outline — still unmistakably the action —
   and fills when the card is hovered or the button is focused. */
ul.products li.product .button {
	background: transparent;
	color: var(--c-accent);
	box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c-accent) 55%, transparent);
}
ul.products li.product:hover .button,
ul.products li.product .button:focus-visible,
ul.products li.product .button:hover {
	background: var(--c-accent);
	color: var(--c-accent-ink);
	box-shadow: none;
}
ul.products li.product .button.is-added { background: var(--c-ok); color: #04140f; box-shadow: none; }
@media (hover: none) {
	/* On touch there is no hover, so the button stays filled — the outline
	   alone is too faint a target for a thumb. */
	ul.products li.product .button { background: color-mix(in oklab, var(--c-accent) 14%, transparent); }
}

/* The sale tag now carries a number, set in the mono face. */
ul.products li.product .onsale,
.single-product .onsale { font-family: var(--f-mono); letter-spacing: 0; text-transform: none; }

/* Cards sit on the board with footprint pads at the corners. */
ul.products li.product { background: var(--pads), var(--c-surface); }
.aisle-sign__line { margin: 0; max-width: 52ch; color: var(--c-text-dim); font-size: 1rem; }

/* Descriptions are pasted in by the shop owner, often with their own h1 and
   h2 and an emoji in front. Inside the tab they are sub-headings of the
   product, so they are scaled to read as that, not as a second page title. */
.woocommerce-Tabs-panel h1 { font-size: 1.3rem; }
.woocommerce-Tabs-panel h2 { font-size: 1.15rem; }
.woocommerce-Tabs-panel h3,
.woocommerce-Tabs-panel h4 { font-size: 1rem; }
.woocommerce-Tabs-panel :is(h1, h2, h3, h4) { margin-top: var(--sp-5); letter-spacing: -.015em; }

/* How to pay, right under the buy button (see mypcb_cart_pay_methods). */
.single-product .paynote {
	display: grid;
	gap: var(--sp-2);
	margin: var(--sp-2) 0 var(--sp-4);
	padding: var(--sp-3) var(--sp-4);
	border: 1px dashed var(--c-line);
	border-radius: var(--r-md);
}
.single-product .paynote__line { display: flex; gap: var(--sp-2); margin: 0; color: var(--c-text-dim); font-size: .8rem; line-height: 1.45; }
.single-product .paynote__line .icon { width: 16px; height: 16px; flex: none; color: var(--c-copper); margin-top: 2px; }
.single-product form.cart .single_add_to_cart_button {
	font-family: var(--f-display);
	font-size: 1.05rem;
	box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 2px 0 var(--c-accent-dim), var(--sh-2);
}
.single-product form.cart .single_add_to_cart_button:active { transform: translateY(2px); box-shadow: none; }