/* Shop archives and product cards. Layout stays Blocksy's; this dresses it. */

.woocommerce ul.products li.product {
	background: var( --haft-kreda );
	border: 0;
	border-radius: var( --haft-radius );
	padding: 12px;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/*
 * Hover: the card lifts and the photo leans in. No border to recolour — the
 * chalk card on linen is its own edge, as on the checkout's fields.
 */
.woocommerce ul.products li.product:hover,
.woocommerce ul.products li.product:focus-within {
	transform: translateY( -4px );
	box-shadow: 0 12px 28px rgba( 23, 26, 33, 0.14 );
}

/*
 * The whole card is the link. It lifts on hover and reads as one clickable
 * thing, so a click on the price or the padding has to land on the product
 * too, not only on the photo and the title.
 *
 * A stretched link, not a wrapping <a>: the title's link grows a layer over
 * the card, so there is still one link per product for a screen reader. The
 * category links and the button stand above that layer and keep their own
 * targets.
 */
.woocommerce ul.products li.product {
	position: relative;
}

.woocommerce ul.products li.product .woocommerce-LoopProduct-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.woocommerce ul.products li.product .entry-meta a,
.woocommerce ul.products li.product .ct-woo-card-actions {
	position: relative;
	z-index: 2;
}

.woocommerce ul.products li.product .ct-media-container img {
	transition: transform 0.4s ease;
}

.woocommerce ul.products li.product:hover .ct-media-container img,
.woocommerce ul.products li.product:focus-within .ct-media-container img {
	transform: scale( 1.04 );
}

/* „Twój haft" on the photo of every personalizable card — the shop's one
   badge, in the shape of the quantity mark in the cart. */
.woocommerce ul.products li.product .haft-znaczek-haft {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	padding: 4px 8px;
	border-radius: var( --haft-radius );
	background: var( --haft-mulina );
	color: #fff;
	font-family: var( --haft-font-kod );
	font-size: 0.66rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.2;
	pointer-events: none;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var( --haft-font-display );
	font-weight: 700;
	letter-spacing: -0.01em;
	font-size: 1rem;
}

.woocommerce ul.products li.product .price {
	font-family: var( --haft-font-kod );
	color: var( --haft-atrament );
	font-size: 0.95rem;
}

.woocommerce ul.products li.product .price del {
	opacity: 0.5;
}

.woocommerce ul.products li.product .price ins {
	color: var( --haft-mulina );
	text-decoration: none;
}

.woocommerce .woocommerce-products-header__title,
.woocommerce-page .entry-title {
	font-family: var( --haft-font-display );
	letter-spacing: -0.02em;
}

/* Buttons: thread red, near-zero radius — a workshop, not an app. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce button.button.alt,
.woocommerce .wc-block-components-button {
	background: var( --haft-mulina );
	color: var( --haft-kreda );
	border-radius: var( --haft-radius );
	font-family: var( --haft-font-display );
	font-weight: 700;
	letter-spacing: 0.01em;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce button.button.alt:hover {
	background: var( --haft-atrament );
	color: var( --haft-kreda );
}

/*
 * The band above the shop: title and a sentence on the left, spools on the
 * right, tabs straight under it. Replaces Blocksy's centred hero, which left
 * a screen of linen between the title and the tabs.
 */
.haft-sklep-pas {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) 300px;
	align-items: center;
	gap: 32px;
	padding: 0 0 28px;
}

.haft-sklep-pas__tytul {
	font-family: var( --haft-font-display );
	font-size: clamp( 1.9rem, 3.6vw, 2.7rem );
	letter-spacing: -0.02em;
	margin: 0 0 18px;
}

/*
 * The band starts near the header, not a screen below it.
 *
 * Two things stood above it: Blocksy's 60px of content spacing and
 * WooCommerce's products header, which on these pages is an empty element —
 * the title it would hold is in the band, where the sentence and the spools
 * are. Both go; the band carries its own bottom padding.
 */
.post-type-archive-product .site-main > .ct-container,
.tax-product_cat .site-main > .ct-container {
	padding-top: 24px;
}

.post-type-archive-product .woocommerce-products-header,
.tax-product_cat .woocommerce-products-header {
	display: none;
}

.haft-sklep-pas__zdanie {
	max-width: 44ch;
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.6;
	color: #3b414f;
}

.haft-szpulki {
	display: block;
	width: 100%;
	height: auto;
	justify-self: end;
}

.haft-szpulki__nitka {
	fill: none;
	stroke: var( --haft-mulina );
	stroke-width: 4;
	stroke-linecap: round;
	stroke-dasharray: 12 8;
}

.haft-szpulka__brzeg {
	fill: #d9c9a8;
	stroke: #b8965e;
	stroke-width: 1.5;
}

.haft-szpulka__zwoje {
	fill: none;
	stroke: rgba( 255, 255, 255, 0.28 );
	stroke-width: 1.5;
}

.haft-szpulka--mulina .haft-szpulka__nic {
	fill: var( --haft-mulina );
}

.haft-szpulka--denim .haft-szpulka__nic {
	fill: var( --haft-denim );
}

.haft-szpulka--zloto .haft-szpulka__nic {
	fill: #c9a267;
}

@media ( max-width: 780px ) {
	.haft-sklep-pas {
		grid-template-columns: 1fr;
		gap: 16px;
		padding: 0 0 16px;
	}

	.haft-szpulki {
		width: 200px;
		justify-self: start;
	}
}

/*
 * The category tabs — one look, two places.
 *
 * On the home page they are buttons that filter the featured grid in place
 * (assets/js/home.js); on the shop and the category archives they are links to
 * the archives themselves (inc/catalog.php). The rules live here rather than in
 * home.css because the shop is where most of them are seen, and the two bars
 * must not drift apart. A button marks its state with aria-pressed, a link with
 * aria-current, so both are named below.
 *
 * Neither is the ARIA tabs pattern, which would oblige us to arrow-key
 * navigation and panels that do not exist.
 */
.haft-zakladki {
	display: flex;
	gap: 6px;
	border-bottom: 1px solid var( --haft-szew );
	margin-bottom: 38px;
	overflow-x: auto;
	scrollbar-width: none;
}

.haft-zakladki::-webkit-scrollbar {
	display: none;
}

.haft-zakladka {
	display: inline-block;
	padding: 13px 20px;
	font-family: var( --haft-font-display );
	font-weight: 700;
	font-size: 0.86rem;
	white-space: nowrap;
	color: #5c6474;
	background: none;
	border: 0;
	border-bottom: 3px solid transparent;
	margin-bottom: -1px;
	cursor: pointer;
	text-decoration: none;
	transition: color 0.15s;
}

.haft-zakladka:hover,
.haft-zakladka:focus-visible {
	color: var( --haft-atrament );
}

/* "page" on the archive itself, "true" on a line while inside one of its subcategories. */
.haft-zakladka[aria-pressed="true"],
.haft-zakladka[aria-current] {
	color: var( --haft-atrament );
	border-bottom-color: var( --haft-mulina );
}

.haft-zakladka__ile {
	font-family: var( --haft-font-kod );
	font-size: 0.68rem;
	opacity: 0.55;
	margin-left: 6px;
}

/*
 * "Wybierz opcje" sits in the middle of its card. Blocksy aligns the actions
 * row from a Customizer variable that also governs the title and the price;
 * naming the row keeps those on the left, where the mock-up has them.
 */
.woocommerce ul.products li.product .ct-woo-card-actions {
	justify-content: center;
}

/*
 * The second row inside a line: its subcategories.
 *
 * Smaller and boxed rather than underlined, so it reads as a level below the
 * lines, not a second list of the same thing. The corner is the controls'
 * 2px, like every other control in the shop. Up to eight fit on a laptop; on a
 * phone the row scrolls sideways, as the lines do.
 */
.haft-zakladki:has( + .haft-podkategorie ) {
	margin-bottom: 16px;
}

.haft-podkategorie {
	display: flex;
	gap: 8px;
	margin-bottom: 38px;
	overflow-x: auto;
	scrollbar-width: none;
}

.haft-podkategorie::-webkit-scrollbar {
	display: none;
}

.haft-podkategoria {
	display: inline-block;
	padding: 7px 14px;
	font-family: var( --haft-font-display );
	font-weight: 700;
	font-size: 0.8rem;
	white-space: nowrap;
	color: #5c6474;
	border: 1px solid var( --haft-szew );
	border-radius: var( --haft-radius );
	text-decoration: none;
	transition: color 0.15s, border-color 0.15s;
}

.haft-podkategoria:hover,
.haft-podkategoria:focus-visible {
	color: var( --haft-atrament );
	border-color: var( --haft-atrament );
}

.haft-podkategoria[aria-current="page"] {
	color: var( --haft-kreda );
	background: var( --haft-mulina );
	border-color: var( --haft-mulina );
}

.haft-podkategoria__ile {
	font-family: var( --haft-font-kod );
	font-size: 0.66rem;
	opacity: 0.6;
	margin-left: 6px;
}

@media ( prefers-reduced-motion: reduce ) {
	.woocommerce ul.products li.product,
	.woocommerce ul.products li.product .ct-media-container img,
	.haft-zakladka,
	.haft-podkategoria {
		transition: none;
	}

	.woocommerce ul.products li.product:hover,
	.woocommerce ul.products li.product:focus-within {
		transform: none;
	}

	.woocommerce ul.products li.product:hover .ct-media-container img,
	.woocommerce ul.products li.product:focus-within .ct-media-container img {
		transform: none;
	}
}

/*
 * The hint under a variable product's add-to-cart button.
 *
 * WooCommerce swaps -disabled for -enabled on the container the moment a
 * variation matches, so this one selector is the entire show/hide mechanism.
 */
.haft-podpowiedz {
	font-size: 0.8rem;
	color: #8a919e;
	margin: 10px 0 0;
}

.woocommerce-variation-add-to-cart-enabled .haft-podpowiedz {
	display: none;
}