/* ============================================
   RECIPE SHOP — Krem.no
   Products from the shop on single oppskrift pages:
   - template-parts/recipe-shop-list.php: sidebar list (desktop, ≥1025px)
   - template-parts/recipe-shop-carousel.php: krem/product-carousel at the
     slot chosen in Krem Innstillinger (mobile/tablet, ≤1024px)
   All values use CSS variables from theme.json.
   ============================================ */

/* ============================================
   SIDEBAR LIST (DESKTOP)
   ============================================ */
.recipe-shop-list {
	margin-top: var(--wp--custom--spacing--lg);
}

/* Same red underline as the main-column section titles, sized for the sidebar. */
.recipe-shop-list__title {
	font-size: var(--wp--preset--font-size--large);
	margin: 0 0 var(--wp--custom--spacing--md);
	padding-bottom: var(--wp--custom--spacing--xs);
	border-bottom: 3px solid var(--wp--preset--color--primary);
	display: inline-block;
}

.recipe-shop-list__items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--spacing--sm);
}

/* --- Card --- */
.recipe-shop-card {
	display: flex;
	align-items: center;
	gap: var(--wp--custom--spacing--sm);
	padding: var(--wp--custom--spacing--sm) var(--wp--custom--spacing--md) var(--wp--custom--spacing--sm) var(--wp--custom--spacing--sm);
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--border-radius--lg);
	box-shadow: var(--wp--custom--shadow--card);
	transition: box-shadow var(--wp--custom--transition);
}

.recipe-shop-card:hover {
	box-shadow: var(--wp--custom--shadow--md);
}

/* Image + text (+ chevron for variable products) — the product link. */
.recipe-shop-card__link {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: var(--wp--custom--spacing--md);
	color: var(--wp--preset--color--text);
	text-decoration: none;
	border-radius: var(--wp--custom--border-radius--default);
}

.recipe-shop-card__link:hover {
	color: var(--wp--preset--color--text);
}

.recipe-shop-card__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.recipe-shop-card__image {
	flex: 0 0 var(--wp--custom--sizes--thumbnail-sidebar);
	aspect-ratio: 1 / 1;
	border-radius: var(--wp--custom--border-radius--default);
	overflow: hidden;
	background: var(--wp--preset--color--background-alt);
}

.recipe-shop-card__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--spacing--xs);
}

/* Clamped to 2 lines so long names don't blow up the row height. */
.recipe-shop-card__name {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.25;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color var(--wp--custom--transition);
}

.recipe-shop-card__link:hover .recipe-shop-card__name {
	color: var(--wp--preset--color--primary);
}

.recipe-shop-card__category {
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.3;
	color: var(--wp--preset--color--text-muted);
	margin: 0;
}

/* Sale: current price first, struck-through regular price after it. */
.recipe-shop-card__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: var(--wp--custom--spacing--sm);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--primary);
	margin: 0;
}

.recipe-shop-card__price ins {
	order: -1;
	text-decoration: none;
}

.recipe-shop-card__price del {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	color: var(--wp--preset--color--text-muted);
}

/* --- Round action: add-to-cart button, or chevron inside the link --- */
.recipe-shop-card__action {
	flex: 0 0 var(--wp--custom--icon-size--touch);
	width: var(--wp--custom--icon-size--touch);
	height: var(--wp--custom--icon-size--touch);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--wp--custom--border-radius--pill);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	transition: background-color var(--wp--custom--transition), transform var(--wp--custom--transition);
}

.recipe-shop-card__action .icon {
	width: var(--wp--custom--icon-size--md);
	height: var(--wp--custom--icon-size--md);
}

.recipe-shop-card__cart:hover,
.recipe-shop-card__link:hover .recipe-shop-card__action {
	background: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--white);
	transform: scale(1.06);
}

.recipe-shop-card__cart:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* WooCommerce toggles .loading / .added on the button (add-to-cart.js). */
.recipe-shop-card__icon-check {
	display: none;
}

.recipe-shop-card__cart.added .recipe-shop-card__icon-bag {
	display: none;
}

.recipe-shop-card__cart.added .recipe-shop-card__icon-check {
	display: inline-block;
}

.recipe-shop-card__cart.loading {
	pointer-events: none;
	cursor: progress;
}

.recipe-shop-card__cart.loading .icon {
	display: none;
}

.recipe-shop-card__cart.loading::after {
	content: "";
	width: var(--wp--custom--icon-size--sm);
	height: var(--wp--custom--icon-size--sm);
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: var(--wp--custom--border-radius--pill);
	animation: recipe-shop-spin 0.8s linear infinite;
}

@keyframes recipe-shop-spin {
	to { transform: rotate(360deg); }
}

/* WooCommerce inserts a «Vis handlekurv» link after the button — the mini-cart
   drawer opens instead, so the link would only break the row layout. */
.recipe-shop-card .added_to_cart {
	display: none;
}

/* --- Footer link --- */
.recipe-shop-list__more {
	display: inline-block;
	margin-top: var(--wp--custom--spacing--md);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.recipe-shop-list__more:hover {
	color: var(--wp--preset--color--primary-dark);
	text-decoration: underline;
}

/*
 * --- Sticky: follows the reader through the recipe ---
 * The aside stretches to the full row (recipe.css) so the list has room to
 * travel. recipe-shop.js adds .is-sticky only when the whole list fits between
 * the fixed header and the Bakemodus pill; a taller list stays in the normal
 * flow instead of getting its bottom cards cut off. `top` is set on the plain
 * list too, so the script can read the resolved offset before sticking.
 */
@media (min-width: 1025px) {
	.recipe-shop-list {
		top: calc(var(--wp--custom--sizes--topbar-height) + var(--wp--custom--sizes--header-height) + var(--wp--custom--spacing--md));
	}

	body.admin-bar .recipe-shop-list {
		top: calc(var(--wp-admin--admin-bar--height, 32px) + var(--wp--custom--sizes--topbar-height) + var(--wp--custom--sizes--header-height) + var(--wp--custom--spacing--md));
	}

	body:has(.site-header--no-topbar) .recipe-shop-list {
		top: calc(var(--wp--custom--sizes--header-height) + var(--wp--custom--spacing--md));
	}

	body.admin-bar:has(.site-header--no-topbar) .recipe-shop-list {
		top: calc(var(--wp-admin--admin-bar--height, 32px) + var(--wp--custom--sizes--header-height) + var(--wp--custom--spacing--md));
	}

	.recipe-shop-list.is-sticky {
		position: sticky;
	}
}

/* --- Responsive: the sidebar flattens ≤1024px; the mobile carousel takes over --- */
@media (max-width: 1024px) {
	.recipe-shop-list {
		display: none;
	}
}

/* ============================================
   CAROUSEL (MOBILE / TABLET)
   krem/product-carousel supplies the cream full-bleed band and the cards;
   this wrapper only spaces it and switches it off on desktop.
   ============================================ */
.recipe-shop-carousel {
	margin-block: var(--wp--custom--spacing--xl);
}

/* At the top of the main column the layout grid gap already separates it
   from the quick-facts card. */
.recipe-main > .recipe-shop-carousel:first-child {
	margin-top: 0;
}

@media (min-width: 1025px) {
	.recipe-shop-carousel {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.recipe-shop-card,
	.recipe-shop-card__name,
	.recipe-shop-card__action {
		transition-duration: 0s;
	}

	.recipe-shop-card__cart:hover,
	.recipe-shop-card__link:hover .recipe-shop-card__action {
		transform: none;
	}

	.recipe-shop-card__cart.loading::after {
		animation-duration: 2.4s;
	}
}

@media print {
	.recipe-shop-list,
	.recipe-shop-carousel {
		display: none;
	}
}