/*
 * WooCommerce layer — enqueued ONLY on WooCommerce-relevant requests
 * (see inc/woocommerce.php). Styles WooCommerce's own loop classes, so
 * no templates need overriding and German Market's output keeps working.
 */

/* ---------- Archive header band ---------- */

/* Breadcrumb and products header form one continuous greige band: they
   are adjacent siblings with no gap, so a shared background reads as a
   single block without needing an extra wrapper element. */
.woocommerce-breadcrumb,
.woocommerce-products-header {
	background: var(--fk-color-greige);
	margin: 0;
}

/* The band spans the viewport while its text stays on the content
   column: max() keeps the element full width and pushes the padding out
   to the column edge, so no extra wrapper element is needed. */
.woocommerce-breadcrumb,
.woocommerce-products-header {
	padding-inline: max(var(--fk-space), (100% - var(--fk-max-width)) / 2);
}

/* WooCommerce ships `.woocommerce .woocommerce-breadcrumb { padding: 0;
   margin: 0 0 2em }` — one class more specific than the rules above, so
   its bottom margin cut a white stripe through the band and its zero
   padding pushed the trail flush against the left edge. Naming the
   wrapper as well wins both back. */
body.woocommerce .site-main .woocommerce-breadcrumb,
body.woocommerce-page .site-main .woocommerce-breadcrumb {
	margin: 0;
	padding-top: 1.25rem;
	padding-bottom: 0;
	/* Lines up under the logo, not on the centred content column: the
	   trail is a position marker for the header above it. */
	padding-inline: var(--fk-header-inset);
}

.woocommerce-breadcrumb {
	font-size: 0.875rem;
	color: var(--fk-color-muted);
}

.woocommerce-breadcrumb a {
	color: inherit;
}

.woocommerce-products-header {
	padding-top: 1.5rem;
	padding-bottom: 3rem;
	text-align: center;
}

.woocommerce-products-header__title {
	font-family: var(--fk-font-serif);
	font-weight: 500;
	font-size: clamp(1.75rem, 3.6vw, 2.75rem);
	line-height: 1.15;
	max-width: 60rem;
	margin: 0 auto 1rem;
}

.category-intro {
	max-width: 60rem;
	margin: 0 auto;
	font-size: 1rem;
	line-height: 1.7;
}

/* ---------- Filter chips + price links ---------- */

.category-chips ul,
.category-prices ul,
.category-all ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.category-chips ul {
	gap: 0.75rem;
	margin-top: 2rem;
}

.category-chips a,
.category-all a {
	display: inline-block;
	padding: 0.625rem 1.375rem;
	border: 1px solid rgba(31, 31, 31, 0.25);
	border-radius: 999px;
	color: var(--fk-color-text);
	text-decoration: none;
	font-size: 0.9375rem;
	line-height: 1.3;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Brand accent on hover: light sage keeps the dark label at 7.7:1. */
.category-chips a:hover,
.category-chips a:focus-visible,
.category-all a:hover,
.category-all a:focus-visible {
	background: var(--fk-color-sage);
	border-color: var(--fk-color-sage);
	color: var(--fk-color-text);
}

/* The filter you are looking at, held in the accent so the row says
   where you are and not only where you can go. Same fill as the hover
   on purpose — one accent, one meaning. */
.category-chips .current-menu-item > a,
.category-chips a[aria-current],
.category-all .current-menu-item > a,
.category-all a[aria-current] {
	background: var(--fk-color-sage);
	border-color: var(--fk-color-sage);
	color: var(--fk-color-text);
}

.category-prices ul {
	gap: 0.5rem 1.75rem;
}

/* Phones: the chips become one horizontally scrollable row instead of
   stacking into several lines that push the products off screen. The
   negative margin lets the row bleed to the screen edges, which is what
   signals "there is more to the side"; the padding keeps the first and
   last chip clear of the edge. */
@media (max-width: 47.9375em) {
	.category-chips {
		position: relative;
	}

	.category-chips ul {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		margin-inline: calc(var(--fk-space) * -1);
		padding-inline: 2rem;
		padding-bottom: 0.25rem;
	}

	.category-chips ul::-webkit-scrollbar {
		display: none;
	}

	.category-chips li {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}

	/* There is no scrollbar to give the row away, so it says so itself:
	   the band fades out behind a chevron at each end. Both fades reach
	   past the container's padding to the screen edge, where the row
	   actually ends.

	   Each one appears only while there is something to scroll to in that
	   direction — so at the start only the right chevron shows, in the
	   middle both, at the end only the left. An arrow pointing at nothing
	   would be worse than none. assets/js/archive-ui.js sets the flags. */
	.category-chips::before,
	.category-chips::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0.25rem;
		width: 3.25rem;
		pointer-events: none;
		opacity: 0;
		transition: opacity 0.2s ease;
	}

	.category-chips::before {
		left: calc(var(--fk-space) * -1);
		background:
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='16' viewBox='0 0 9 16' fill='none' stroke='%231f1f1f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 1.5 2 8l5.5 6.5'/%3E%3C/svg%3E")
				no-repeat left 0.75rem center,
			linear-gradient(to left, rgba(247, 245, 241, 0) 0%, var(--fk-color-greige) 60%);
	}

	.category-chips::after {
		right: calc(var(--fk-space) * -1);
		background:
			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='16' viewBox='0 0 9 16' fill='none' stroke='%231f1f1f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 1.5 7 8l-5.5 6.5'/%3E%3C/svg%3E")
				no-repeat right 0.75rem center,
			linear-gradient(to right, rgba(247, 245, 241, 0) 0%, var(--fk-color-greige) 60%);
	}

	.category-chips[data-more-left]::before,
	.category-chips[data-more-right]::after {
		opacity: 1;
	}
}

/* Same pill treatment as the chips, just without a resting border — so
   the hover reads as one consistent language across both filter rows. */
.category-prices a {
	display: inline-block;
	padding: 0.375rem 1rem;
	border-radius: 999px;
	color: var(--fk-color-text);
	font-size: 0.9375rem;
	line-height: 1.3;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.category-prices a:hover,
.category-prices a:focus-visible {
	background: var(--fk-color-sage);
	color: var(--fk-color-text);
}

.category-prices .current-menu-item > a,
.category-prices a[aria-current] {
	background: var(--fk-color-sage);
	color: var(--fk-color-text);
}

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

/* The grid itself runs edge to edge — the product photography carries
   this page. Everything after it returns to the content column. */
.site-main--wide .woocommerce-notices-wrapper,
.site-main--wide .woocommerce-pagination {
	padding-inline: max(var(--fk-space), (100% - var(--fk-max-width)) / 2);
}

/* ---------- Filter bar: price links and sorting on one line ---------- */

.category-filterbar {
	display: grid;
	gap: 1rem;
	justify-items: center;
	margin-top: 1.5rem;
}

@media (min-width: 64em) {
	/* Two equal outer columns keep the price links centred on the page
	   while the sort control sits at the right edge, on their line. If
	   the control ever outgrows its share both outer columns grow with
	   it, so the centre never drifts. */
	.category-filterbar {
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
	}

	/* Row named alongside the column throughout: grid places items in
	   source order and never moves its cursor backwards, so leaving the
	   row to chance is how things end up on a line of their own. */
	.category-filterbar > .category-all {
		grid-area: 1 / 1;
		justify-self: start;
	}

	.category-filterbar > .category-prices {
		grid-area: 1 / 2;
	}

	.category-filterbar > .category-sort {
		grid-area: 1 / 3;
		justify-self: end;
	}
}

/* ---------- Sorting ----------
 *
 * A <details> disclosure, not a <select>: an open native dropdown is
 * drawn by the operating system, so its spacing and typography are
 * beyond CSS. This one is ordinary markup, so it can be given the room
 * and the type the rest of the page uses.
 */

.category-sort {
	position: relative;
}

.category-sort__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
	color: var(--fk-color-text);
	transition: color 0.2s ease;
	/* Both halves of removing the disclosure triangle. */
	list-style: none;
}

.category-sort__toggle::-webkit-details-marker {
	display: none;
}

.category-sort__toggle:hover,
.category-sort[open] .category-sort__toggle {
	color: var(--fk-color-sage-text);
}

/* Opening it must not draw a frame. Pointer clicks never match
   :focus-visible, so the keyboard ring below is unaffected. */
.category-sort__toggle:focus {
	outline: none;
}

.category-sort__toggle:focus-visible {
	outline: 2px solid var(--fk-color-sage-text);
	outline-offset: 4px;
}

.category-sort__icon {
	flex: 0 0 auto;
}

.category-sort__label {
	font-size: 0.9375rem;
	line-height: 1.3;
	white-space: nowrap;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
}

.category-sort__menu {
	position: absolute;
	top: calc(100% + 0.75rem);
	right: 0;
	z-index: 20;
	min-width: 15rem;
	max-width: calc(100vw - 2rem);
	margin: 0;
	padding: 0.5rem 0;
	list-style: none;
	text-align: left;
	background: var(--fk-color-bg);
	border-radius: 0.375rem;
	box-shadow: 0 14px 36px rgba(31, 31, 31, 0.18);
}

/* Generous side padding is the point: the native dropdown set the rows
   flush against its edges, which is what made it look cramped. */
.category-sort__menu a {
	display: block;
	padding: 0.6875rem 1.75rem;
	font-size: 0.9375rem;
	line-height: 1.4;
	color: var(--fk-color-text);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.category-sort__menu a:hover,
.category-sort__menu a:focus-visible {
	background: var(--fk-color-greige);
}

/* The active sorting, marked by weight and tone rather than a highlight
   bar — that reads as a state, not as a hover. */
.category-sort__menu a[aria-current="true"] {
	color: var(--fk-color-sage-text);
	font-weight: 600;
}

/* Below the desktop breakpoint the control is centred, and a menu hung
   from its right edge would reach past the left of the screen. */
@media (max-width: 63.9375em) {
	.category-sort__menu {
		right: auto;
		left: 50%;
		transform: translateX(-50%);
	}
}

/* Fallback path: WooCommerce's own control, if its markup ever changes
   past recognition. */
body.woocommerce .category-sort--native .woocommerce-ordering {
	margin: 0;
}

/* No top margin: the grid butts straight up against the greige header
   band, so no white strip cuts between them. */
.woocommerce ul.products {
	list-style: none;
	display: grid;
	gap: 3rem 1.25rem;
	grid-template-columns: 1fr;
	margin: 0;
	padding: 0;
}

/* WooCommerce's own layout sheet still targets this list: it adds a
   clearfix via ::before/::after and sizes the items with percentage
   widths and floats. In a grid container the clearfix pseudo-elements
   become real grid ITEMS (hence a phantom empty first cell) and the
   percentage widths shrink each product inside its cell. Both are
   neutralised here — the grid does the layout.

   Note the column-specific overrides further down: WooCommerce also
   ships rules keyed on the .columns-N class it prints on the list, and
   those are one class MORE specific than the reset here. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none;
}

.woocommerce ul.products li.product,
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last {
	width: auto;
	max-width: none;
	min-width: 0;
	float: none;
	clear: none;
	margin: 0;
}

@media (min-width: 40em) {
	.woocommerce ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 64em) {
	.woocommerce ul.products {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* No card, no shadow — the photo is the card. */
.woocommerce ul.products li.product {
	position: relative; /* Anchor for the sale flash. */
	display: flex;
	flex-direction: column;
	margin: 0;
	text-align: center;
}

.woocommerce ul.products li.product > a:not(.button) {
	display: flex;
	flex-direction: column;
	flex: 1;
	color: inherit;
	text-decoration: none;
}

.woocommerce ul.products li.product img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin: 0 0 1.5rem;
	transition: transform 0.4s ease;
}

.woocommerce ul.products li.product a:hover img,
.woocommerce ul.products li.product a:focus-visible img {
	transform: scale(1.02);
}


.woocommerce ul.products li.product .woocommerce-loop-product__title {
	flex: 1; /* Keeps price and button aligned across the row. */
	font-family: var(--fk-font-sans);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4;
	color: var(--fk-color-text);
	margin: 0 0 1rem;
	padding: 0;
}

.woocommerce ul.products li.product .price {
	display: block;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--fk-color-text);
	margin: 0 0 1.25rem;
}

.woocommerce ul.products li.product .price del {
	font-weight: 400;
	color: var(--fk-color-muted);
	margin-right: 0.5ch;
}

.woocommerce ul.products li.product .price ins {
	background: none;
	color: var(--fk-color-text);
}

/* German Market's legal lines (Grundpreis, Lieferzeit, MwSt.) come
   through the native loop hooks — readable, but secondary. */
.woocommerce ul.products li.product .wgm-info,
.woocommerce ul.products li.product .delivery-time-info,
.woocommerce ul.products li.product .price-unit,
.woocommerce ul.products li.product .product_unit_price,
.woocommerce ul.products li.product .woocommerce-de_price_taxrate {
	display: block;
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--fk-color-muted);
}

/* Outlined button, matching the design. */
.woocommerce ul.products li.product a.button {
	align-self: center;
	display: inline-block;
	background: transparent;
	color: var(--fk-color-text);
	border: 1px solid rgba(31, 31, 31, 0.35);
	border-radius: 0.25rem;
	padding: 0.625rem 1.5rem;
	font-size: 0.9375rem;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product a.button:focus-visible {
	background: var(--fk-color-text);
	border-color: var(--fk-color-text);
	color: #fff;
}

/* One badge everywhere: the loop, the related products and the single
   product's own photo. WooCommerce draws that last one as a green
   circle from `.woocommerce span.onsale`, which is why it looked like a
   different brand from the ones in the grid. */
body.woocommerce ul.products li.product .onsale,
body.woocommerce .woocommerce-product-gallery .onsale,
body.woocommerce span.onsale {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	bottom: auto;
	left: auto;
	min-width: 0;
	min-height: 0;
	width: auto;
	height: auto;
	margin: 0;
	z-index: 3;
	display: inline-block;
	/* White on the darker sage: 5.6:1. On --fk-color-sage-dark it was
	   4.4:1, just under the threshold — the badge is 13px, so it counts
	   as normal text. */
	background: var(--fk-color-sage-text);
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.02em;
	padding: 0.25rem 0.75rem;
	border-radius: 0.25rem;
	text-align: center;
}

/* On the product page it sits in the top left of the photo — the zoom
   button already owns the other corner. */
body.woocommerce .woocommerce-product-gallery .onsale {
	top: 1rem;
	left: 1rem;
	right: auto;
}

/* ---------- Archive grid: beating WooCommerce's column rules ----------
 *
 * WooCommerce prints <ul class="products columns-3"> and ships rules like
 * `.woocommerce ul.products.columns-3 li.product { width: 30.75%; float:
 * left }`. That is one class more specific than the reset above, so the
 * items kept their percentage widths and floats inside the grid cells —
 * which is what made the products render at wildly different sizes.
 *
 * Repeating the selectors with `body.woocommerce` and the theme's own
 * wrapper class wins outright, independent of stylesheet order.
 */

/* Scoped away from single products on purpose: they carry --wide too
   since their bands run the full width, and the related products sit in
   a ul.products of their own with its own card design. Without the
   exclusion these two grids would be one rule serving two intentions. */
body.woocommerce:not(.single-product) .site-main--wide ul.products {
	display: grid;
	gap: 3rem 1.25rem;
	grid-template-columns: 1fr;
	margin: 0;
}

@media (min-width: 40em) {
	body.woocommerce:not(.single-product) .site-main--wide ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 64em) {
	body.woocommerce:not(.single-product) .site-main--wide ul.products {
		grid-template-columns: repeat(3, 1fr);
	}
}

body.woocommerce:not(.single-product) .site-main--wide ul.products li.product {
	width: auto;
	max-width: none;
	min-width: 0;
	float: none;
	clear: none;
	margin: 0;
}

body.woocommerce:not(.single-product) .site-main--wide ul.products li.product > a:not(.button) {
	width: 100%;
}

body.woocommerce:not(.single-product) .site-main--wide ul.products li.product a img,
body.woocommerce:not(.single-product) .site-main--wide ul.products li.product img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin: 0 0 1.5rem;
}

/* ---------- Pagination ---------- */

.woocommerce-pagination {
	margin-top: 3.5rem;
	text-align: center;
}

.woocommerce-pagination ul {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
}

.woocommerce-pagination ul li {
	border: 0;
}

.woocommerce-pagination a,
.woocommerce-pagination span.current {
	display: inline-block;
	padding: 0.5rem 0.875rem;
	border: 1px solid rgba(31, 31, 31, 0.25);
	border-radius: 0.25rem;
	text-decoration: none;
	color: var(--fk-color-text);
}

.woocommerce-pagination span.current {
	background: var(--fk-color-text);
	border-color: var(--fk-color-text);
	color: #fff;
}

/* ---------- SEO text below the grid ---------- */

/* Closing band: greige again, so the page reads header band → products →
   text band. Long-form copy needs a measure, not the full viewport, and
   it needs to be flush left — centred body text is exhausting to read. */
.category-description {
	background: var(--fk-color-greige);
	margin: 4rem 0 0;
	padding: 4rem var(--fk-space) 4.5rem;
}

.category-description > * {
	max-width: 46rem;
	margin-inline: auto;
	text-align: left;
}

/* Media may breathe wider than the text column. */
.category-description > figure,
.category-description > .wp-block-embed,
.category-description > .wp-block-video {
	max-width: 60rem;
}

.category-description h2 {
	font-family: var(--fk-font-serif);
	font-weight: 500;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	line-height: 1.2;
	margin: 3rem auto 1rem;
}

.category-description h3 {
	font-family: var(--fk-font-serif);
	font-weight: 500;
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	line-height: 1.25;
	margin: 2.25rem auto 0.75rem;
}

.category-description > *:first-child {
	margin-top: 0;
}

.category-description p {
	margin: 0 auto 1.25rem;
	line-height: 1.75;
}

.category-description ul,
.category-description ol {
	margin: 0 auto 1.25rem;
	padding-left: 1.25rem;
	line-height: 1.75;
}

.category-description img {
	height: auto;
}

/* Auto-loading sentinel: no box of its own, just a scroll trigger.
   Shared with the magazine, hence the neutral name. */
.fk-sentinel {
	height: 1px;
}

/* ---------- Back to top ---------- */

.back-to-top {
	margin: 0;
	padding: 2.5rem var(--fk-space);
	text-align: center;
	background: var(--fk-color-greige);
}

.back-to-top a {
	display: inline-block;
	padding: 0.625rem 1.5rem;
	border: 1px solid rgba(31, 31, 31, 0.25);
	border-radius: 999px;
	color: var(--fk-color-text);
	font-size: 0.9375rem;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.back-to-top a:hover,
.back-to-top a:focus-visible {
	background: var(--fk-color-sage);
	border-color: var(--fk-color-sage);
}

/* Embedded video inside the category text keeps its aspect ratio and
   never spills out of the column. */
.category-description iframe {
	display: block;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
	border-radius: 0.5rem;
}

/* WooCommerce renders struck prices at opacity .5, which drops this from
   5.6:1 to 2.1:1 — below the accessibility threshold. Full opacity, and a
   selector specific enough to win. */
body.woocommerce ul.products li.product .price del,
body.woocommerce ul.products li.product .price del .amount,
body.woocommerce ul.products li.product .price del bdi {
	opacity: 1;
	color: var(--fk-color-sage-text);
	font-weight: 400;
}

/* Same for the breadcrumb: keep the muted tone, but make sure nothing
   fades or overrides it. */
body.woocommerce .woocommerce-breadcrumb,
body.woocommerce .woocommerce-breadcrumb a,
body.woocommerce-page .woocommerce-breadcrumb,
body.woocommerce-page .woocommerce-breadcrumb a {
	color: var(--fk-color-sage-text);
	opacity: 1;
}

/* =====================================================================
 * Single product page
 *
 * WooCommerce's own stylesheets load here — unlike on archives, where
 * they are dequeued — so every rule below is competing with one of
 * theirs. Three fights were lost to that in a row, each found only when
 * something looked wrong on screen, so the rules are written to one
 * standard instead of being tuned one at a time:
 *
 *   body.single-product.woocommerce div.product …
 *
 * Three classes and two elements before anything of ours is named.
 * WooCommerce's deepest selector on this page is
 * `.woocommerce div.product .woocommerce-tabs ul.tabs li.active a` —
 * five classes, four elements — and the prefix plus our own chain clears
 * it with room to spare. Anything added here should keep the prefix,
 * whether or not it looks like it needs it today.
 *
 * This is the only source for the product page. There is no critical
 * file beside it: this stylesheet is itself render-blocking on that one
 * template, so inlining a copy of the first screen would add bytes and a
 * second place to keep in step — which is how the breadcrumb came to
 * shift sideways the moment the async sheet landed.
 * ================================================================== */

body.single-product .site-main {
	padding-top: 0;
}

/* No band behind the trail here. The archive rule paints one across the
   full width, and it applies to every WooCommerce page. */
body.single-product .woocommerce-breadcrumb {
	background: none;
}

/* The trail sits outside div.product, so it takes the prefix it can.
   <main> runs the full width on this template, so the trail places
   itself on the content column: max() keeps the element full width and
   pushes the padding out to the column's edge. */
body.single-product.woocommerce .site-main .woocommerce-breadcrumb,
body.single-product.woocommerce-page .site-main .woocommerce-breadcrumb {
	margin: 0 0 2rem;
	padding-top: 1.25rem;
	padding-bottom: 0;
	padding-inline: max(var(--fk-space), (100% - var(--fk-max-width)) / 2);
	font-size: 0.875rem;
	color: var(--fk-color-muted);
}

/* ---------- Gallery and summary ---------- */

/* div.product is only a stack: the gallery and summary sit in
   .product-top, which holds the content column, and the bands below run
   the full width of <main>. */
body.single-product.woocommerce div.product {
	margin: 0;
	padding: 0;
}

body.single-product.woocommerce div.product .product-top {
	max-width: var(--fk-max-width);
	margin: 0 auto;
	padding-inline: var(--fk-space);
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
}

@media (min-width: 56em) {
	body.single-product.woocommerce div.product .product-top {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 3.5rem;
		align-items: start;
	}
}

/* WooCommerce sizes both at 48% and floats them. Inside a grid that
   gives two half-width boxes sitting in half-width cells. */
body.single-product.woocommerce div.product .product-top > .woocommerce-product-gallery,
body.single-product.woocommerce div.product .product-top > .summary {
	width: auto;
	max-width: none;
	float: none;
	clear: none;
	margin: 0;
	padding: 0;
}

body.single-product.woocommerce div.product .woocommerce-product-gallery {
	position: relative;
}

/* The ratio is reserved before the photo arrives, so the summary beside
   it never jumps. */
body.single-product.woocommerce div.product .woocommerce-product-gallery img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 0.5rem;
	display: block;
	box-shadow: none;
}

body.single-product.woocommerce div.product .woocommerce-product-gallery__wrapper {
	margin: 0;
}

/* Thumbnails below the main shot, only when there is more than one. */
body.single-product.woocommerce div.product .flex-control-thumbs {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.75rem;
	margin: 0.75rem 0 0;
	padding: 0;
	float: none;
}

body.single-product.woocommerce div.product .flex-control-thumbs li {
	width: auto;
	float: none;
	margin: 0;
}

/* The sale badge. WooCommerce draws it as a green circle hanging off the
   corner — `min-height`, `min-width`, `line-height` and `border-radius`
   all have to be undone, not just the colour, or it stays round. */
body.single-product.woocommerce div.product .woocommerce-product-gallery .onsale,
body.single-product.woocommerce div.product span.onsale {
	position: absolute;
	top: 1rem;
	left: 1rem;
	right: auto;
	bottom: auto;
	z-index: 3;
	display: inline-block;
	width: auto;
	height: auto;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0.25rem 0.75rem;
	border-radius: 0.25rem;
	/* White on the darker sage: 5.6:1. On --fk-color-sage-dark it was
	   4.4:1, just under the threshold — the badge is 13px, so it counts
	   as normal text. */
	background: var(--fk-color-sage-text);
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.02em;
	text-align: center;
}

.product-gallery__zoom {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--fk-color-text);
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(31, 31, 31, 0.12);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.product-gallery__zoom:hover,
.product-gallery__zoom:focus-visible {
	transform: scale(1.06);
	box-shadow: 0 6px 16px rgba(31, 31, 31, 0.2);
}

/* ---------- Lightbox ---------- */

/* Built by assets/js/product.js from the link WooCommerce already puts
   around the photo. Lives in the top layer, outside div.product, so it
   has nothing to compete with. */
.product-lightbox {
	max-width: min(92vw, 60rem);
	max-height: 92vh;
	padding: 0;
	border: 0;
	border-radius: 0.5rem;
	background: transparent;
	overflow: visible;
}

.product-lightbox::backdrop {
	background: rgba(31, 31, 31, 0.82);
}

/* A column, so a tall card and its caption share the 92vh between them
   instead of the caption dropping off the bottom edge. Bound to [open]
   on purpose: a bare `display` would override the browser's own rule
   that keeps a closed dialog hidden, and the overlay would stand on the
   page from the first paint. */
.product-lightbox[open] {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.product-lightbox img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 92vh;
	/* Lets the picture give way to the caption in the flex column — a
	   flex item will not shrink below its content size without it. */
	min-height: 0;
	object-fit: contain;
	border-radius: 0.5rem;
}

/* Which motif is on screen. The product photo opens without one, so the
   line disappears rather than standing empty. */
.product-lightbox__caption {
	flex: 0 0 auto;
	margin: 0;
	color: #fff;
	font-size: 0.9375rem;
	line-height: 1.4;
	text-align: center;
}

.product-lightbox__close {
	position: absolute;
	top: -0.75rem;
	right: -0.75rem;
	z-index: 1;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--fk-color-bg);
	color: var(--fk-color-text);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(31, 31, 31, 0.3);
}

/* ---------- Summary ---------- */

body.single-product.woocommerce div.product .product_title {
	font-family: var(--fk-font-serif);
	font-weight: 500;
	font-size: clamp(1.875rem, 3.4vw, 2.75rem);
	line-height: 1.15;
	margin: 0 0 0.75rem;
	padding: 0;
	clear: none;
}

body.single-product.woocommerce div.product .woocommerce-product-rating {
	margin: 0 0 1.25rem;
	line-height: 1;
}

/* The stars are a webfont glyph from WooCommerce's stylesheet; only the
   colour is ours. Gold is the brand's accent for ratings. WooCommerce
   floats them right, which would drop them beside the title. */
body.single-product.woocommerce div.product .woocommerce-product-rating .star-rating {
	color: var(--fk-color-star);
	float: none;
	margin: 0;
	font-size: 1.125em;
}

body.single-product.woocommerce div.product .woocommerce-product-rating .woocommerce-review-link {
	display: none;
}

body.single-product.woocommerce div.product .woocommerce-product-details__short-description {
	font-size: 1.0625rem;
	line-height: 1.6;
	margin: 0 0 2rem;
	max-width: 34rem;
}

body.single-product.woocommerce div.product .woocommerce-product-details__short-description p:last-child {
	margin-bottom: 0;
}

/* Price on the left, reassurance on the right — they read as one block
   of "what it costs and what you get". */
.product-highlights {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
	margin: 0 0 2rem;
}

@media (min-width: 30em) {
	.product-highlights {
		grid-template-columns: auto 1fr;
		gap: 2rem;
		align-items: start;
	}
}

/* WooCommerce's `p.price` carries its own green and its own size. */
body.single-product.woocommerce div.product .product-highlights .price,
body.single-product.woocommerce div.product .product-highlights .price .amount,
body.single-product.woocommerce div.product .product-highlights .price bdi {
	font-family: var(--fk-font-sans);
	font-size: 1.75rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--fk-color-text);
	margin: 0 0 0.75rem;
	display: block;
}

/* A struck price at opacity .5 drops this tone from 5.6:1 to 2.1:1 —
   below the accessibility threshold. Full opacity, smaller instead. */
body.single-product.woocommerce div.product .product-highlights .price del,
body.single-product.woocommerce div.product .product-highlights .price del .amount,
body.single-product.woocommerce div.product .product-highlights .price del bdi {
	opacity: 1;
	font-size: 1.125rem;
	font-weight: 400;
	color: var(--fk-color-sage-text);
	margin: 0;
	display: inline;
}

body.single-product.woocommerce div.product .product-highlights .price ins {
	text-decoration: none;
	background: none;
	font-weight: 500;
}

/* German Market's tax, shipping and delivery notes land here, under the
   price. They are legally required and deliberately kept quiet, not
   hidden — the contrast still clears AA. */
.product-highlights__price {
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--fk-color-sage-text);
}

.product-usps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
	font-size: 1rem;
	line-height: 1.4;
}

.product-usps li {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
}

.product-usps svg {
	flex: 0 0 auto;
	margin-top: 0.2em;
	color: var(--fk-color-sage-dark);
}

/* ---------- Add to cart ---------- */

body.single-product.woocommerce div.product .product-top form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin: 2rem 0 0;
}

/* WooCommerce clears its float layout with a table pseudo-element on the
   form. In a flex container that stops being invisible and becomes an
   item, adding a phantom gap between the quantity and the button. */
body.single-product.woocommerce div.product .product-top form.cart::before,
body.single-product.woocommerce div.product .product-top form.cart::after {
	content: none;
}

body.single-product.woocommerce div.product .product-top form.cart div.quantity {
	float: none;
	margin: 0;
}

body.single-product.woocommerce div.product .product-top form.cart .qty {
	width: 3.75rem;
	padding: 0.75rem 0.5rem;
	text-align: center;
	border: 1px solid rgba(31, 31, 31, 0.25);
	border-radius: 0.25rem;
}

/* The `.alt` class carries WooCommerce's purple and its own hover. */
body.single-product.woocommerce div.product .product-top form.cart button.button,
body.single-product.woocommerce div.product .product-top form.cart button.button.alt {
	float: none;
	padding: 0.875rem 2rem;
	border: 1px solid var(--fk-color-text);
	border-radius: 0.25rem;
	background: var(--fk-color-text);
	color: #fff;
	font-size: 1rem;
	font-weight: 400;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

/* Sage on hover, with the dark label on it — 7.7:1, comfortably past AA
   for text this size. */
body.single-product.woocommerce div.product .product-top form.cart button.button:hover,
body.single-product.woocommerce div.product .product-top form.cart button.button:focus-visible,
body.single-product.woocommerce div.product .product-top form.cart button.button.alt:hover,
body.single-product.woocommerce div.product .product-top form.cart button.button.alt:focus-visible {
	background: var(--fk-color-sage);
	border-color: var(--fk-color-sage);
	color: var(--fk-color-text);
	box-shadow: 0 10px 24px rgba(31, 31, 31, 0.22);
}

/* Out of stock and backorder notices still print — see
   fk2026_stock_html() — and should read as a statement, not an alarm. */
body.single-product.woocommerce div.product .stock {
	color: var(--fk-color-sage-text);
	font-size: 0.9375rem;
	margin: 0 0 1rem;
}

body.single-product.woocommerce div.product .stock.out-of-stock {
	color: #b3261e;
}

/* ---------- Greeting card and delivery date ---------- */

/* Both sit inside the add-to-cart form, so they take the section's
   prefix where they touch anything WooCommerce styles, and their own
   class names where they do not. */

.gift-card,
.delivery-date {
	width: 100%;
	margin: 1.75rem 0 0;
	padding-top: 1.75rem;
	border-top: 1px solid rgba(31, 31, 31, 0.12);
}

/* Room before the buy button: the last of the options and the decision
   to buy should not read as one row of controls. */
.delivery-date {
	margin-bottom: 1.25rem;
}

/* Shown to shop managers only, when the setup is incomplete. */
.gift-card__hint {
	width: 100%;
	margin: 1.5rem 0 0;
	padding: 0.875rem 1rem;
	border-left: 3px solid var(--fk-color-sage-dark);
	background: var(--fk-color-greige);
	font-size: 0.875rem;
	line-height: 1.5;
}

.gift-card__question,
.delivery-date__label {
	display: block;
	margin: 0 0 0.75rem;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--fk-color-text);
}

/* The checkbox comes before the options in the markup so this sibling
   selector can do the revealing. No script involved: tick the box and
   the motifs are there, with or without JavaScript. */
.gift-card__check {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.gift-card__label {
	display: inline-flex;
	align-items: flex-start;
	gap: 0.625rem;
	cursor: pointer;
	font-size: 0.9375rem;
	line-height: 1.5;
}

/* The price never splits from its brackets. */
.gift-card__price {
	white-space: nowrap;
}

/* The box is drawn rather than native, so the tick can be the brand's
   sage instead of the operating system's blue. */
.gift-card__label::before {
	content: "";
	flex: 0 0 auto;
	width: 1.125rem;
	height: 1.125rem;
	margin-top: 0.125rem;
	border: 1px solid rgba(31, 31, 31, 0.4);
	border-radius: 0.1875rem;
	background: var(--fk-color-bg) no-repeat center;
	background-size: 0.75rem;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.gift-card__check:checked + .gift-card__label::before {
	border-color: var(--fk-color-sage-dark);
	background-color: var(--fk-color-sage-dark);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6.5 4.75 9 10 3'/%3E%3C/svg%3E");
}

.gift-card__check:focus-visible + .gift-card__label::before {
	outline: 2px solid var(--fk-color-sage-text);
	outline-offset: 2px;
}

.gift-card__check:not(:checked) ~ .gift-card__options {
	display: none;
}

.gift-card__options {
	margin-top: 1.5rem;
}

.gift-card__motifs {
	margin: 0;
	padding: 0;
	border: 0;
}

.gift-card__motifs legend {
	padding: 0;
	margin: 0 0 0.875rem;
	font-size: 0.9375rem;
}

.gift-card__motifs .required {
	color: var(--fk-color-sage-text);
	border: 0;
}

.gift-card__motifs ul {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
	gap: 1rem 0.75rem;
	margin: 0;
	padding: 0;
}

.gift-card__motifs li {
	position: relative;
	margin: 0;
}

.gift-card__motifs label {
	display: block;
	cursor: pointer;
}

/* The radio itself is out of sight; the picture is the control, and its
   outline is what says which one is chosen. */
.gift-card__motifs input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
}

.gift-card__motif {
	display: block;
	border-radius: 0.375rem;
	padding: 0.25rem;
	outline: 2px solid transparent;
	outline-offset: 1px;
	transition: outline-color 0.15s ease;
}

.gift-card__motif img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 0.25rem;
	margin: 0 0 0.375rem;
}

.gift-card__motif-name {
	display: block;
	font-size: 0.8125rem;
	line-height: 1.3;
	color: var(--fk-color-sage-text);
	text-align: center;
}

/* The magnifier sits over the corner of the picture and is a link, not
   a button: without script it opens the file, which is the same promise
   the product photo makes. It stands outside the label so that a click
   on it does not also tick the motif — the picture selects, the
   magnifier enlarges.

   28 px: the icon is drawn at 14, the rest is the hit area, which the
   24 px minimum is measured against. Measured against the tile rather
   than picked: a motif tile is around 90 px wide in the summary column,
   and at 32 px the white disc took a third of the picture — on a
   greeting card, whose corner is usually part of the design. */
.gift-card__zoom {
	position: absolute;
	top: 0.375rem;
	right: 0.375rem;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	color: var(--fk-color-text);
	text-decoration: none;
	box-shadow: 0 1px 4px rgba(31, 31, 31, 0.18);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gift-card__zoom svg {
	width: 0.875rem;
	height: 0.875rem;
}

/* The 5 px lift of a link, not the 2 px of a tile: this one goes
   somewhere. */
.gift-card__zoom:hover,
.gift-card__zoom:focus-visible {
	transform: scale(1.08);
	box-shadow: 0 6px 14px rgba(31, 31, 31, 0.24);
}

.gift-card__zoom:focus-visible {
	outline: 2px solid var(--fk-color-sage-text);
	outline-offset: 2px;
}

.gift-card__motifs label:hover .gift-card__motif {
	outline-color: rgba(31, 31, 31, 0.2);
}

.gift-card__motifs input:checked + .gift-card__motif {
	outline-color: var(--fk-color-sage-dark);
}

.gift-card__motifs input:checked + .gift-card__motif .gift-card__motif-name {
	color: var(--fk-color-text);
}

.gift-card__motifs input:focus-visible + .gift-card__motif {
	outline-color: var(--fk-color-sage-text);
	outline-offset: 3px;
}

.gift-card__message {
	margin: 1.5rem 0 0;
}

.gift-card__message label {
	display: block;
	margin: 0 0 0.375rem;
	font-size: 0.9375rem;
}

body.single-product.woocommerce div.product .product-top form.cart .gift-card__message textarea {
	width: 100%;
	max-width: none;
	min-height: 6rem;
	padding: 0.75rem;
	border: 1px solid rgba(31, 31, 31, 0.25);
	border-radius: 0.25rem;
	background: var(--fk-color-bg);
	font: inherit;
	font-size: 1rem;
	resize: vertical;
}

/* ---------- Delivery date ---------- */

/* The native field when the calendar never runs. */
body.single-product.woocommerce div.product .product-top form.cart .delivery-date__input {
	width: auto;
	max-width: 100%;
	padding: 0.625rem 0.75rem;
	border: 1px solid rgba(31, 31, 31, 0.25);
	border-radius: 0.25rem;
	background: var(--fk-color-bg);
	font: inherit;
	font-size: 1rem;
}

/* The button that opens the calendar. Outlined and quiet until a date
   is chosen, then it carries the date itself — it is the only thing
   visible while the calendar is closed. */
.delivery-date__trigger {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.75rem 1.25rem;
	border: 1px solid rgba(31, 31, 31, 0.3);
	border-radius: 999px;
	background: var(--fk-color-bg);
	color: var(--fk-color-text);
	font: inherit;
	font-size: 0.9375rem;
	line-height: 1.3;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.delivery-date__trigger:hover,
.delivery-date__trigger[aria-expanded="true"] {
	border-color: var(--fk-color-sage-dark);
	box-shadow: 0 4px 14px rgba(31, 31, 31, 0.1);
}

.delivery-date__trigger:focus-visible {
	outline: 2px solid var(--fk-color-sage-text);
	outline-offset: 2px;
}

.delivery-date__trigger svg {
	flex: 0 0 auto;
	color: var(--fk-color-sage-dark);
}

/* Chosen: the sage fill says the date is set, without shouting. */
.delivery-date__trigger--set {
	border-color: var(--fk-color-sage-dark);
	background: var(--fk-color-sage);
}

.delivery-date__trigger--set svg {
	color: var(--fk-color-text);
}

.delivery-date__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
}

.delivery-date__clear {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--fk-color-sage-text);
	font: inherit;
	font-size: 0.8125rem;
	text-decoration: underline;
	text-underline-offset: 0.25em;
	cursor: pointer;
}

/* `display: block` above outranks the browser's own rule for [hidden],
   which is how a hidden element stays on screen. */
.delivery-date__clear[hidden] {
	display: none;
}

.delivery-picker {
	margin-top: 0.75rem;
	max-width: 21rem;
	margin: 0;
	padding: 0.75rem;
	border: 1px solid rgba(31, 31, 31, 0.14);
	border-radius: 0.5rem;
	background: var(--fk-color-bg);
}

.delivery-picker__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}

.delivery-picker__month {
	font-size: 0.9375rem;
	font-weight: 600;
}

.delivery-picker__nav {
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	border-radius: 0.25rem;
	background: none;
	color: var(--fk-color-text);
	font-size: 1.125rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.delivery-picker__nav:hover:not(:disabled),
.delivery-picker__nav:focus-visible:not(:disabled) {
	background: var(--fk-color-greige);
}

.delivery-picker__nav:disabled {
	opacity: 0.3;
	cursor: default;
}

.delivery-picker__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 0.125rem;
	text-align: center;
}

.delivery-picker__weekday {
	padding: 0.25rem 0;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var(--fk-color-sage-text);
}

.delivery-picker__day {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	padding: 0;
	border: 0;
	border-radius: 0.25rem;
	background: none;
	color: var(--fk-color-text);
	font: inherit;
	font-size: 0.875rem;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.delivery-picker__day:hover,
.delivery-picker__day:focus-visible {
	background: var(--fk-color-greige);
}

/* Not a button at all — Sundays, holidays and anything outside the
   window are rendered as plain text, so there is nothing to press. */
.delivery-picker__day--off {
	color: rgba(31, 31, 31, 0.28);
	cursor: default;
}

.delivery-picker__day--off:hover {
	background: none;
}

.delivery-picker__day[aria-pressed="true"] {
	background: var(--fk-color-sage-dark);
	color: #fff;
}

/* ---------- Details band ---------- */

/* Full-bleed greige, the tabs on a white card inside it — the same
   figure-on-ground the front page uses for its sections. */
.product-details {
	background: var(--fk-color-greige);
	margin-top: 4.5rem;
	padding-block: 4rem;
}

.product-details__inner {
	max-width: var(--fk-max-width);
	margin: 0 auto;
	padding-inline: var(--fk-space);
}

.product-details__title {
	font-family: var(--fk-font-serif);
	font-weight: 500;
	font-size: clamp(1.5rem, 2.8vw, 2.25rem);
	line-height: 1.2;
	margin: 0 0 2rem;
}

body.single-product.woocommerce div.product .woocommerce-tabs {
	background: var(--fk-color-bg);
	border-radius: 0.5rem;
	padding: 0 2rem 2rem;
	margin: 0;
	clear: none;
}

/* WooCommerce draws these as folder tabs: bordered boxes with rounded
   tops, a rule underneath painted by ul::before, and corner shapes on
   each li::before and li::after. All four have to go, not just the
   colours, or the flat row keeps the folder's outline. */
body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	overflow: visible;
	border-bottom: 1px solid rgba(31, 31, 31, 0.14);
}

body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs::before,
body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	content: none;
	display: none;
}

body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: 1.125rem 1.5rem;
	color: var(--fk-color-sage-text);
	text-decoration: none;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.3;
	text-shadow: none;
	border-bottom: 2px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}

body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover,
body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li a:focus-visible {
	color: var(--fk-color-text);
}

/* The open tab, marked on the rule it sits on rather than by a box. */
body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: none;
	border: 0;
}

body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--fk-color-text);
	border-bottom-color: var(--fk-color-text);
}

body.single-product.woocommerce div.product .woocommerce-tabs .panel {
	margin: 0;
	padding: 0;
	font-size: 1rem;
	line-height: 1.7;
}

body.single-product.woocommerce div.product .woocommerce-tabs .panel > h2:first-child {
	font-family: var(--fk-font-serif);
	font-weight: 500;
	font-size: clamp(1.375rem, 2.4vw, 1.875rem);
	margin: 0 0 1.25rem;
}

body.single-product.woocommerce div.product .woocommerce-tabs .panel ul {
	padding-left: 1.25rem;
}

body.single-product.woocommerce div.product .woocommerce-tabs .panel li {
	margin-bottom: 0.375rem;
}

@media (max-width: 47.9375em) {
	body.single-product.woocommerce div.product .woocommerce-tabs {
		padding-inline: 1.25rem;
		border-radius: 0;
		margin-inline: calc(var(--fk-space) * -1);
	}

	/* The tab row scrolls sideways rather than stacking, so the panel
	   below it does not get pushed off the first screen. */
	body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}

	body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs::-webkit-scrollbar {
		display: none;
	}

	body.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li {
		flex: 0 0 auto;
	}
}

/* ---------- Reviews ---------- */

/* This block cannot follow the section's prefix alone. WooCommerce
   styles the reviews through IDs — `#reviews #comments` for the list,
   `#review_form #respond` for the form, `input#submit` for the button —
   and an ID outweighs any number of classes. So the rules here name the
   same IDs and add to them; classes cannot win these on their own. */

body.single-product.woocommerce div.product .woocommerce-Reviews-title {
	font-family: var(--fk-font-serif);
	font-weight: 500;
	font-size: clamp(1.375rem, 2.4vw, 1.875rem);
	line-height: 1.25;
	margin: 0 0 2rem;
}

body.single-product.woocommerce div.product #reviews #comments ol.commentlist {
	list-style: none;
	display: grid;
	gap: 1.5rem;
	margin: 0 0 3rem;
	padding: 0;
}

body.single-product.woocommerce div.product #reviews #comments ol.commentlist li {
	margin: 0;
	padding: 0;
}

/* WooCommerce boxes each review in a bordered card with the avatar
   floated over it. A rule between entries is quieter and reads as a
   list rather than as a stack of receipts. */
body.single-product.woocommerce div.product #reviews #comments ol.commentlist li .comment_container {
	display: grid;
	grid-template-columns: 2.75rem 1fr;
	gap: 1rem;
	align-items: start;
	padding: 0 0 1.5rem;
	border: 0;
	border-bottom: 1px solid rgba(31, 31, 31, 0.12);
	background: none;
	border-radius: 0;
}

body.single-product.woocommerce div.product #reviews #comments ol.commentlist li:last-child .comment_container {
	border-bottom: 0;
	padding-bottom: 0;
}

body.single-product.woocommerce div.product #reviews #comments ol.commentlist li img.avatar {
	position: static;
	width: 2.75rem;
	height: 2.75rem;
	float: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--fk-color-greige);
}

body.single-product.woocommerce div.product #reviews #comments ol.commentlist li .comment-text {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
}

/* Author and date on one line, the stars at the end of it. */
body.single-product.woocommerce div.product #reviews #comments .comment-text p.meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.375rem;
	margin: 0 0 0.5rem;
	font-size: 0.9375rem;
	color: var(--fk-color-sage-text);
}

body.single-product.woocommerce div.product #reviews #comments .comment-text .woocommerce-review__author {
	font-family: var(--fk-font-sans);
	font-weight: 600;
	color: var(--fk-color-text);
}

body.single-product.woocommerce div.product #reviews #comments .comment-text .star-rating {
	float: none;
	margin: 0 0 0.5rem;
	color: var(--fk-color-star);
}

body.single-product.woocommerce div.product #reviews #comments .comment-text .description {
	font-size: 1rem;
	line-height: 1.7;
}

body.single-product.woocommerce div.product #reviews #comments .comment-text .description p:last-child {
	margin-bottom: 0;
}

/* ---------- Review form ---------- */

body.single-product.woocommerce div.product #review_form_wrapper {
	max-width: 40rem;
}

body.single-product.woocommerce div.product #review_form #respond .comment-reply-title {
	display: block;
	font-family: var(--fk-font-serif);
	font-weight: 500;
	font-size: 1.25rem;
	line-height: 1.3;
	margin: 0 0 0.75rem;
}

body.single-product.woocommerce div.product #review_form #respond .comment-notes {
	font-size: 0.875rem;
	color: var(--fk-color-sage-text);
	margin: 0 0 1.5rem;
}

body.single-product.woocommerce div.product #review_form #respond .comment-form label {
	display: block;
	margin: 0 0 0.375rem;
	font-size: 0.9375rem;
	line-height: 1.4;
}

body.single-product.woocommerce div.product #review_form #respond .comment-form .required {
	color: var(--fk-color-sage-text);
	border: 0;
}

body.single-product.woocommerce div.product #review_form #respond .comment-form p {
	margin: 0 0 1.25rem;
}

body.single-product.woocommerce div.product #review_form #respond .comment-form input[type="text"],
body.single-product.woocommerce div.product #review_form #respond .comment-form input[type="email"],
body.single-product.woocommerce div.product #review_form #respond .comment-form textarea {
	width: 100%;
	max-width: none;
	padding: 0.75rem;
	border: 1px solid rgba(31, 31, 31, 0.25);
	border-radius: 0.25rem;
	background: var(--fk-color-bg);
	font: inherit;
	font-size: 1rem;
	color: var(--fk-color-text);
}

body.single-product.woocommerce div.product #review_form #respond .comment-form textarea {
	min-height: 8rem;
	resize: vertical;
}

body.single-product.woocommerce div.product #review_form #respond .comment-form input:focus-visible,
body.single-product.woocommerce div.product #review_form #respond .comment-form textarea:focus-visible {
	outline: 2px solid var(--fk-color-sage-text);
	outline-offset: 1px;
	border-color: var(--fk-color-sage-text);
}

/* The rating: WooCommerce's script swaps the select for these stars, so
   the select only shows if the script never runs. Both are styled. */
body.single-product.woocommerce div.product #review_form #respond .comment-form-rating {
	margin: 0 0 1.25rem;
}

body.single-product.woocommerce div.product #review_form #respond p.stars a {
	color: var(--fk-color-star);
}

body.single-product.woocommerce div.product #review_form #respond .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: 0.875rem;
	line-height: 1.5;
}

body.single-product.woocommerce div.product #review_form #respond .comment-form-cookies-consent label {
	margin: 0;
	font-size: inherit;
}

/* Two IDs on WooCommerce's side; the same two plus our own here. */
body.single-product.woocommerce div.product #review_form #respond input#submit {
	display: inline-block;
	width: auto;
	padding: 0.875rem 2rem;
	border: 1px solid var(--fk-color-text);
	border-radius: 0.25rem;
	background: var(--fk-color-text);
	color: #fff;
	font-size: 1rem;
	font-weight: 400;
	cursor: pointer;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

body.single-product.woocommerce div.product #review_form #respond input#submit:hover,
body.single-product.woocommerce div.product #review_form #respond input#submit:focus-visible {
	background: var(--fk-color-sage);
	border-color: var(--fk-color-sage);
	color: var(--fk-color-text);
}

/* ---------- Related products ---------- */

/* No gap to the band above: same background, one continuous block. */
.product-related {
	background: var(--fk-color-greige);
	padding-block: 0 4.5rem;
}

.product-related__inner {
	max-width: var(--fk-max-width);
	margin: 0 auto;
	padding-inline: var(--fk-space);
}

body.single-product.woocommerce div.product .related.products {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

body.single-product.woocommerce div.product .related.products > h2 {
	font-family: var(--fk-font-serif);
	font-weight: 500;
	font-size: clamp(1.5rem, 2.8vw, 2.25rem);
	line-height: 1.2;
	margin: 0 0 2.5rem;
}

/* Same card as the front page's showcase. The two live in separate
   stylesheets that never load together — front-page.css is off on shop
   pages, this file is off on the front page — so sharing them would cost
   a request rather than save bytes. */
body.single-product.woocommerce div.product .related.products ul.products {
	list-style: none;
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
	margin: 0;
	padding: 0;
}

/* WooCommerce clears its float grid the same way it clears the cart
   form. In a grid container those pseudo-elements become cells. */
body.single-product.woocommerce div.product .related.products ul.products::before,
body.single-product.woocommerce div.product .related.products ul.products::after {
	content: none;
	display: none;
}

body.single-product.woocommerce div.product .related.products ul.products li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	width: auto;
	max-width: none;
	float: none;
	clear: none;
	margin: 0;
	padding: 1.25rem;
	background: var(--fk-color-bg);
	border-radius: 0.75rem;
	text-align: center;
	box-shadow: 0 8px 24px rgba(31, 31, 31, 0.12);
	transition: transform 0.3s ease;
}

body.single-product.woocommerce div.product .related.products li.product > a:not(.button) {
	display: flex;
	flex-direction: column;
	flex: 1;
	color: inherit;
	text-decoration: none;
}

body.single-product.woocommerce div.product .related.products .woocommerce-loop-product__title {
	flex: 1;
	font-family: var(--fk-font-sans);
	font-size: 1rem;
	line-height: 1.4;
	padding: 0;
	margin: 0 0 0.75rem;
}

/* Compositor-only hover: a second shadow fades in instead of animating
   the first one, which would repaint on every frame. */
body.single-product.woocommerce div.product .related.products li.product::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: 0 28px 56px rgba(31, 31, 31, 0.28);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

body.single-product.woocommerce div.product .related.products li.product:hover {
	transform: translateY(-6px);
}

body.single-product.woocommerce div.product .related.products li.product:hover::after {
	opacity: 1;
}

body.single-product.woocommerce div.product .related.products li.product img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	border-radius: 0.5rem;
	margin: 0 0 1rem;
}

body.single-product.woocommerce div.product .related.products li.product .price {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--fk-color-text);
	margin: 0 0 1rem;
}

body.single-product.woocommerce div.product .related.products li.product .price del,
body.single-product.woocommerce div.product .related.products li.product .price del bdi {
	opacity: 1;
	font-weight: 400;
	color: var(--fk-color-sage-text);
}

body.single-product.woocommerce div.product .related.products li.product .price ins {
	text-decoration: none;
	background: none;
}

body.single-product.woocommerce div.product .related.products li.product .onsale {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	left: auto;
	bottom: auto;
}

body.single-product.woocommerce div.product .related.products li.product .button {
	align-self: center;
	display: inline-block;
	float: none;
	padding: 0.625rem 1.25rem;
	border-radius: 0.375rem;
	background: var(--fk-color-text);
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 400;
	text-decoration: none;
}

body.single-product.woocommerce div.product .related.products li.product .button:hover,
body.single-product.woocommerce div.product .related.products li.product .button:focus-visible {
	background: var(--fk-color-sage);
	color: var(--fk-color-text);
}

.product-related__action {
	margin: 2.5rem 0 0;
	text-align: center;
}

/* =====================================================================
 * Slide-in cart panel
 *
 * A native <dialog> pinned to the right edge: the backdrop, the focus
 * trap and Escape come from the browser. Only the slide is ours, and it
 * is switched off for anyone who asked for less motion (see global.css).
 * ================================================================== */

.cart-panel {
	position: fixed;
	inset: 0 0 0 auto;
	max-width: none;
	max-height: none;
	width: min(26rem, 100vw);
	height: 100%;
	margin: 0;
	padding: 2rem 1.75rem;
	border: 0;
	background: var(--fk-color-bg);
	color: var(--fk-color-text);
	overflow-y: auto;
	overscroll-behavior: contain;
	/* The closed position. The attribute below is set one frame after the
	   dialog opens, which is what gives the browser something to animate
	   from. */
	transform: translateX(100%);
	transition: transform 0.3s ease;
}

.cart-panel[data-open] {
	transform: none;
}

.cart-panel::backdrop {
	background: rgba(31, 31, 31, 0.45);
}

.cart-panel__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	margin: 0 0 1.5rem;
	padding: 0;
	border: 1px solid rgba(31, 31, 31, 0.14);
	border-radius: 50%;
	background: none;
	color: var(--fk-color-text);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.cart-panel__close:hover,
.cart-panel__close:focus-visible {
	background: var(--fk-color-greige);
}

.cart-panel__title {
	font-family: var(--fk-font-serif);
	font-weight: 500;
	font-size: 1.5rem;
	line-height: 1.2;
	margin: 0 0 1.75rem;
}

.cart-panel__count {
	color: var(--fk-color-sage-text);
	font-size: 1rem;
	vertical-align: super;
}

.cart-panel__items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.5rem;
}

.cart-panel__item {
	display: grid;
	grid-template-columns: 4.5rem 1fr auto;
	gap: 1rem;
	align-items: start;
}

.cart-panel__thumb img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 0.375rem;
	display: block;
}

.cart-panel__name {
	display: block;
	font-family: var(--fk-font-serif);
	font-size: 1.0625rem;
	line-height: 1.3;
	color: inherit;
	text-decoration: none;
	margin-bottom: 0.5rem;
}

.cart-panel__name:hover,
.cart-panel__name:focus-visible {
	text-decoration: underline;
}

/* WooCommerce's own item data list — variations today, the greeting card
   and delivery date once those exist. */
.cart-panel__details .variation {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.125rem 0.5rem;
	margin: 0 0 0.5rem;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--fk-color-sage-text);
}

.cart-panel__details .variation dt,
.cart-panel__details .variation dd {
	margin: 0;
}

.cart-panel__details .variation p {
	margin: 0;
}

.cart-panel__meta {
	margin: 0 0 0.375rem;
	font-size: 0.8125rem;
	color: var(--fk-color-sage-text);
}

.cart-panel__remove {
	font-size: 0.8125rem;
	color: var(--fk-color-sage-text);
}

.cart-panel__price {
	font-size: 0.9375rem;
	white-space: nowrap;
}

.cart-panel__summary {
	margin: 2rem 0 0;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(31, 31, 31, 0.14);
}

.cart-panel__total {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 600;
}

.cart-panel__note {
	margin: 0.375rem 0 0;
	font-size: 0.8125rem;
	color: var(--fk-color-sage-text);
}

.cart-panel__actions {
	display: grid;
	gap: 0.75rem;
	margin-top: 1.75rem;
}

.cart-panel__actions a {
	text-align: center;
}

.cart-panel__continue {
	display: block;
	width: 100%;
	margin: 1.25rem 0 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--fk-color-sage-text);
	font-size: 0.9375rem;
	text-align: center;
	text-decoration: underline;
	text-underline-offset: 0.25em;
	cursor: pointer;
}

.cart-panel__empty {
	margin: 0;
	color: var(--fk-color-sage-text);
}