/*
 * Product category listing.
 *
 * Hand-written and loaded on its own, not compiled from assets/scss. The Grunt
 * pipeline builds style.css from main.scss through grunt-contrib-sass, which
 * needs a Ruby toolchain that is not part of this checkout; keeping the
 * catalogue rules in a separate file lets them ship without rebuilding the
 * whole bundle. It is enqueued only on product taxonomy archives.
 */

/* Rows need to read apart without drawing a box around every product, so the
   vertical gap is roughly double the horizontal one. Column gap is left alone
   — the grid's track sizing is calculated against it. */
.product-catalog .wc-block-product-template {
	row-gap: 44px;
}

/* Every card is the same height, so the price and the buy button sit on the
   same line across a row regardless of how tall the product name wraps.
   The border is always there and starts out transparent: appearing on hover
   would shift the card by a pixel. */
.product-catalog .wc-block-product-template > li.wc-block-product {
	display: flex;
	flex-direction: column;
	padding-bottom: 16px;
	border: 1px solid transparent;
	border-radius: 8px;
	transition: border-color .56s cubic-bezier(.2, .6, .2, 1),
		box-shadow .56s cubic-bezier(.2, .6, .2, 1),
		transform .56s cubic-bezier(.2, .6, .2, 1);
}

/* Pointer devices only — on a touch screen the hover state sticks after a
   tap and the card looks selected. */
@media (hover: hover) {
	.product-catalog .wc-block-product-template > li.wc-block-product:hover {
		border-color: rgba(29, 64, 58, .18);
		box-shadow: 0 6px 24px rgba(29, 64, 58, .10);
		transform: translateY(-1px);
	}

	/* Nobody asked for the card to move when they are only trying to read. */
	@media (prefers-reduced-motion: reduce) {
		.product-catalog .wc-block-product-template > li.wc-block-product {
			transition-duration: .01ms;
		}

		.product-catalog .wc-block-product-template > li.wc-block-product:hover {
			transform: none;
		}
	}
}

.product-catalog .wc-block-product .wp-block-woocommerce-product-button {
	margin-top: auto;
	/* Every card reserves the same status line below its button, so quantities
	   and errors never move the button or a neighbouring card. */
	min-height: 56px;
	justify-content: flex-start;
	gap: 4px;
}

/* Product photos arrive at whatever proportions the supplier delivered — the
   catalogue holds everything from square to 16:9. Giving the image a fixed
   square box and containing the photo inside it makes the row line up without
   cropping anything off the product. */
.product-catalog .wc-block-product .wp-block-woocommerce-product-image,
.product-catalog .wc-block-product .wp-block-woocommerce-product-image > a {
	display: block;
	width: 100%;
	/* Matches the card, so a photo that fills its box does not square off the
	   two top corners. */
	border-radius: 8px;
	overflow: hidden;
}

.product-catalog .wc-block-product .wp-block-woocommerce-product-image img {
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	/* The block prints object-fit: cover as an inline style. */
	object-fit: contain !important;
	border-radius: 8px;
}

/* The product name, set as the product pages set it: green, bold, underlined.
   Each product remains an h2 below the category h1, so a screen reader can
   move through the products without skipping a heading level. */
.product-catalog .wc-block-product .wp-block-post-title {
	margin: 14px 0 6px;
	padding: 0 8px;
	color: var(--wp--preset--color--harjedalskok-main);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: underline;
}

.product-catalog .wc-block-product .wp-block-woocommerce-product-price {
	margin-bottom: 12px !important;
	font-size: 14px;
}

/* Add to cart was a full-width block button and dominated the page. It takes
   the same quiet shape as the sorting control and the pagination numbers, so
   the catalogue has one vocabulary for its controls. */
.product-catalog .wc-block-product .wp-block-woocommerce-product-button {
	margin-bottom: 0 !important;
	color: var(--wp--preset--color--harjedalskok-main);
}

.product-catalog .wc-block-product .wc-block-components-product-button__button {
	width: auto;
	min-width: 0;
	height: 32px;
	padding: 0 14px;
	border: 0;
	border-radius: 4px;
	background-color: var(--wp--preset--color--harjedalskok-secondary);
	color: var(--wp--preset--color--harjedalskok-main);
	font-family: inherit;
	font-size: 13px;
	font-weight: 400;
	line-height: 20px;
}

@media (hover: hover) {
	.product-catalog .wc-block-product .wc-block-components-product-button__button:hover {
		background-color: var(--hk-catalog-sand-hover);
	}
}

.product-catalog .wc-block-product .cart-hint {
	display: block;
	min-height: 20px;
	color: var(--wp--preset--color--harjedalskok-main);
	text-align: center;
	font-size: 12px;
	line-height: 20px;
}

/* Keep the reserved line when there is no quantity to show. */
.product-catalog .wc-block-product .cart-hint[hidden] {
	display: block;
	visibility: hidden;
}

.product-catalog .wc-block-product .hk-catalog-add-to-cart[aria-disabled="true"] {
	background-color: #f7f5f4;
	cursor: wait;
}

/* The category page opens like the rest of the Produkter group: a full-bleed
   band carrying the name, then the description on the secondary background.
   The Produkter pages build both in Stackable, which cannot render term data,
   so these are core blocks laid out the same way: a full-bleed padded band,
   and inside it a separate wrapper holding the measure. Keeping those two on
   one element is what centred the heading and pushed the copy to the edge —
   a flex item shrinks to its text, and the measure comes from an auto margin
   that left alignment has to remove. */
/* The page measure. The hero, the description band and the shop content all
   read from it, so widening it on a large screen keeps the first product card
   lined up with the H1 above it. The static Produkter pages are fixed at
   1092px; above 1500px this one gets the extra room instead of running a thin
   column of products down the middle. */
.product-catalog {
	--hk-catalog-measure: 1092px;
	/* The palette has one sand and no darker step, and harjedalskok-separator
	   is a green — wrong family for a hover on a sand control. This is the
	   same sand a shade down, so the controls stay in their own colour. */
	--hk-catalog-sand-hover: #dcd7d4;
}

/* Only the grid opens out on a large screen. The hero and the description
   band keep the site measure, so a category page still starts like every
   other page — it is the products that get the extra room, not the copy. */
@media screen and (min-width: 1500px) {
	.product-catalog .catalog-body {
		/* What WordPress's constrained layout caps the shop content at. */
		--wp--style--global--content-size: 1400px;
	}
}

.hk-category-hero .hk-category-measure,
.hk-category-intro .hk-category-measure {
	width: 100%;
	max-width: var(--hk-catalog-measure);
	margin-inline: auto;
}

.hk-category-hero {
	/* The Produkter heroes run about 240px because they carry a button under
	   the heading. Ours has only the heading, so the height is held here. */
	min-height: 240px;
	display: flex;
	align-items: center;
	/* Both set per term from the category image when one exists; until then
	   the band stays on the brand green with light text. */
	background-image: var(--hk-category-hero-image, none);
	background-size: cover;
	background-position: top center;
}

.hk-category-hero .wp-block-query-title {
	margin: 0;
	font-size: 77px;
	line-height: 1.05;
	text-align: left;
	color: var(--hk-category-hero-color, var(--wp--preset--color--harjedalskok-secondary));
}

/* The Produkter pages set their intro copy in a 600px column at the left of
   the measure. */
.hk-category-intro .wp-block-term-description {
	max-width: 600px;
	margin: 0;
}

/* A description may open with its own heading, as the Produkter sections do.
   Sized to match those. */
.hk-category-intro .wp-block-term-description h2 {
	margin: 0 0 24px;
	font-size: 35px;
	line-height: 1.2;
}

.hk-category-intro .wp-block-term-description > :first-child {
	margin-top: 0;
}

.hk-category-intro .wp-block-term-description > :last-child {
	margin-bottom: 0;
}

/* A term with no description leaves the block empty; the band goes with it
   rather than printing a bare stripe of colour. */
.hk-category-intro:not(:has(p)) {
	display: none;
}

/* Subcategory row. Plain text chips rather than image tiles: the row has to
   read as navigation inside the category, not as a second product grid, and
   it stays legible for a group of two as well as one of seven.

   The colour is set on the list item, not the link. The compiled theme sheet
   carries a global `a { color: inherit !important }`, so the anchor can only
   take the colour it inherits. */
.hk-category-nav {
	margin: 0 0 6px;
}

.hk-category-nav .list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hk-category-nav .item {
	color: var(--wp--preset--color--harjedalskok-main);
}

.hk-category-nav .chip {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	padding: 9px 18px;
	border: 1px solid var(--wp--preset--color--harjedalskok-main);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	text-decoration: none;
	transition: background-color .15s ease;
}

.hk-category-nav .chip:hover,
.hk-category-nav .chip:focus-visible {
	background-color: var(--wp--preset--color--harjedalskok-secondary);
}

/* The chip for the archive currently being viewed. */
.hk-category-nav .item.is-current {
	color: var(--wp--preset--color--harjedalskok-secondary);
}

.hk-category-nav .item.is-current .chip,
.hk-category-nav .item.is-current .chip:hover,
.hk-category-nav .item.is-current .chip:focus-visible {
	background-color: var(--wp--preset--color--harjedalskok-main);
}

.hk-category-nav .count {
	font-weight: 400;
	opacity: .75;
}

/* Sorting control, centred under the subcategory row and close to it. It
   takes the shape of an unvisited pagination number rather than a subcategory
   chip: the chips are places to go and this is a control, so it stays quieter
   — same square, same weight, no outline. The chevron is drawn here because
   appearance: none takes the built-in one away. Colour goes on the toolbar,
   not the select, for the same reason as the chips. */
.product-catalog .catalog-toolbar {
	margin: 32px 0 32px;
	color: var(--wp--preset--color--harjedalskok-main);
}

.product-catalog .woocommerce-ordering {
	margin: 0;
}

.product-catalog .woocommerce-ordering select.orderby {
	appearance: none;
	max-width: 100%;
	height: 32px;
	padding: 0 34px 0 12px;
	border: 0;
	border-radius: 4px;
	background-color: var(--wp--preset--color--harjedalskok-secondary);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231d403a' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	cursor: pointer;
}

.product-catalog .woocommerce-ordering select.orderby:hover {
	background-color: var(--hk-catalog-sand-hover);
}

/* Pagination. Small and quiet: it sits under the last row of products and
   should not compete with them, so the numbers are chips at text size with a
   clear gap above the grid. */
.product-catalog .wp-block-query-pagination {
	margin-top: 56px;
	gap: 6px;
	color: var(--wp--preset--color--harjedalskok-main);
	font-size: 14px;
	line-height: 20px;
}

.product-catalog .wp-block-query-pagination-numbers {
	display: flex;
	gap: 6px;
}

.product-catalog .wp-block-query-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 8px;
	border-radius: 4px;
	background-color: var(--wp--preset--color--harjedalskok-secondary);
	text-decoration: none;
}

.product-catalog .wp-block-query-pagination .page-numbers:hover {
	background-color: var(--hk-catalog-sand-hover);
}

/* The page you are on is a span, not a link, so it takes a colour directly. */
.product-catalog .wp-block-query-pagination .page-numbers.current {
	background-color: var(--wp--preset--color--harjedalskok-main);
	color: var(--wp--preset--color--harjedalskok-secondary);
}

/* Previous and next are chevrons. "Föregående sida" and "Nästa sida" are
   longer than the row of numbers they sit beside and made the pagination the
   loudest thing under the grid. The words stay in the markup for a screen
   reader, pushed out of view. Unlike the numbers these carry no square until
   you point at one — three filled boxes in a row of five would read as three
   current pages. */
.product-catalog .wp-block-query-pagination-previous,
.product-catalog .wp-block-query-pagination-next {
	position: relative;
	display: inline-flex;
	width: 32px;
	height: 32px;
	padding: 0;
	overflow: hidden;
	border-radius: 4px;
	background-color: transparent;
	text-decoration: none;
	/* Reliable inside a flex box in a way text-indent is not. */
	font-size: 0;
	transition: background-color .15s ease;
}

.product-catalog .wp-block-query-pagination-previous::before,
.product-catalog .wp-block-query-pagination-next::before {
	content: "";
	position: absolute;
	inset: 0;
	background: center center / 8px 14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='14' viewBox='0 0 8 14'%3E%3Cpath d='M6.5 1 1.5 7l5 6' fill='none' stroke='%231d403a' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.product-catalog .wp-block-query-pagination-next::before {
	transform: scaleX(-1);
}

.product-catalog .wp-block-query-pagination-previous:hover,
.product-catalog .wp-block-query-pagination-next:hover {
	background-color: var(--hk-catalog-sand-hover);
}

@media screen and (max-width: 1209px) {
	.hk-category-hero .wp-block-query-title {
		font-size: 56px;
	}
}

@media screen and (max-width: 767px) {
	.product-catalog > .hk-category-hero,
	.product-catalog > .hk-category-intro,
	.product-catalog > .catalog-body {
		padding-right: var(--hk-mobile-gutter) !important;
		padding-left: var(--hk-mobile-gutter) !important;
	}

	.hk-category-hero {
		min-height: 180px;
	}

	.hk-category-hero .wp-block-query-title {
		font-size: 40px;
	}

	.hk-category-intro {
		padding-top: 2.5em !important;
		padding-bottom: 2.5em !important;
	}

	.hk-category-intro .wp-block-term-description h2 {
		font-size: 32px;
		margin-bottom: 14px;
	}

	.hk-category-nav {
		margin-bottom: 6px;
	}

	.hk-category-nav .chip {
		padding: 7px 14px;
		font-size: 13px;
	}

	.product-catalog .wp-block-query-pagination {
		margin-top: 40px;
	}
}