/**
 * Fruit Warrior WooCommerce styling.
 *
 * 01 Shop archive & product grid
 * 02 Single product
 * 03 Cart & checkout (block-based)
 * 04 My account
 * 05 Notices & misc
 */

/* == 01 Shop archive & product grid =================================== */

.woocommerce-breadcrumb {
	font-size: 0.85rem;
	color: var(--fw-text-soft);
	margin-bottom: 1rem !important;
}

.woocommerce-breadcrumb a {
	color: var(--fw-green-700);
	text-decoration: none;
}

.woocommerce-products-header {
	background: var(--fw-surface);
	border-radius: var(--fw-radius-l);
	padding: clamp(1.75rem, 4vw, 3rem);
	margin-bottom: 2rem;
}

.woocommerce-products-header__title {
	font-size: clamp(2rem, 5vw, 3rem);
	margin: 0;
}

.woocommerce-products-header .term-description,
.woocommerce-products-header + .term-description {
	max-width: 60ch;
	color: var(--fw-text-soft);
}

.woocommerce-result-count {
	color: var(--fw-text-soft);
	font-size: 0.9rem;
}

.woocommerce-ordering select {
	border-radius: 999px;
	padding: 0.5rem 2.2rem 0.5rem 1rem;
	font-size: 0.9rem;
}

/* Branded shop archive: a near-full-width product wall that carries the
   landing page's colour islands and ruled information language forward. */
.fw-shop-archive {
	background: transparent;
}

.fw-shop-archive #primary {
	width: 100%;
	margin: 0;
	padding: clamp(1rem, 2.5vw, 2.25rem) 0 clamp(3rem, 7vw, 6rem);
}

.fw-shop-archive .ast-woocommerce-container {
	width: 97.5%;
	margin-inline: auto;
	padding: 0 !important;
	background: transparent !important;
}

.fw-shop-archive .woocommerce-products-header {
	display: none;
}

.fw-shop-archive .woocommerce-breadcrumb {
	margin: 0 0 clamp(0.75rem, 1.5vw, 1.25rem) !important;
	padding-inline: clamp(0.25rem, 1vw, 0.75rem);
}

.fw-shop-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(18rem, 0.7fr);
	gap: clamp(2rem, 4vw, 4.5rem);
	align-items: center;
	background: var(--fw-surface);
	color: var(--fw-text);
	border-radius: var(--fw-radius-m);
	padding: clamp(1.75rem, 3.5vw, 3.5rem);
	margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

.fw-shop-hero__copy {
	max-width: 54rem;
}

.fw-shop-hero__eyebrow {
	display: block;
	margin-bottom: clamp(1.25rem, 2.5vw, 2.25rem);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.fw-shop-hero h1 {
	margin: 0;
	color: var(--fw-heading);
	font-size: clamp(3.2rem, 6vw, 6.25rem);
	line-height: 0.9;
	letter-spacing: -0.045em;
}

.fw-shop-hero__copy p {
	margin: clamp(1rem, 2vw, 1.5rem) 0 0;
	padding-top: 0.75rem;
	border-top: 1px solid var(--fw-rule);
	font-size: clamp(0.95rem, 1.2vw, 1.1rem);
}

/* The one-sentence intro stays on one line wherever the copy column is wide
   enough (owner, 2026-09-18); below that it wraps like any paragraph. */
@media (min-width: 1100px) {
	.fw-shop-hero__copy p {
		white-space: nowrap;
	}
}

.fw-shop-filters {
	display: grid;
	border-bottom: 1px solid var(--fw-rule);
}

.fw-shop-filter {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	min-height: 3rem;
	padding: 0.65rem 0.25rem;
	border-top: 1px solid var(--fw-rule);
	color: inherit;
	font-weight: 750;
	text-decoration: none;
	transition: background-color 0.25s, color 0.25s;
}

.fw-shop-filter span:last-child {
	font-size: 1.1rem;
	transition: transform 0.25s var(--fw-ease);
}

/* The bar itself carries the product line's colour on hover and when active,
   which is why the separate coloured dot is gone. */
.fw-shop-filter {
	--fw-filter-fill: var(--fw-green-800);
	--fw-filter-ink: var(--fw-on-dark);
}

.fw-shop-filter--home-care {
	--fw-filter-fill: var(--fw-home-wash);
	--fw-filter-ink: var(--fw-text);
}

.fw-shop-filter--baby-care {
	--fw-filter-fill: var(--fw-baby-wash);
	--fw-filter-ink: var(--fw-text);
}

.fw-shop-filter:hover,
.fw-shop-filter.is-active {
	padding-inline: 0.8rem;
	background: var(--fw-filter-fill);
	color: var(--fw-filter-ink);
}

/* The selected filter is always the corporate dark green, whatever its line
   (owner, 2026-09-30); the line colours remain for hover only. */
.fw-shop-filter.is-active,
.fw-shop-filter.is-active:hover {
	background: var(--fw-green-800);
	color: var(--fw-on-dark);
}

.fw-shop-filter:focus-visible {
	outline: 3px solid var(--fw-green-800);
	outline-offset: 3px;
}

.fw-shop-archive ul.products {
	clear: both;
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: clamp(0.65rem, 1vw, 1rem);
	margin: 0 !important;
}

.fw-shop-archive ul.products::before,
.fw-shop-archive ul.products::after {
	display: none !important;
}

.fw-shop-archive ul.products li.product {
	--fw-card-accent: var(--fw-yellow-500);
	--fw-card-wash: var(--fw-home-wash);
	display: flex;
	float: none !important;
	flex-direction: column;
	width: auto !important;
	min-width: 0;
	margin: 0 !important;
	padding: 0 !important;
	background: var(--fw-surface);
	border: 1px solid rgba(95, 70, 71, 0.18);
	border-radius: var(--fw-radius-m);
	box-shadow: none;
	overflow: hidden;
	text-align: left;
	transition: border-color 0.25s;
}

/* Baby Care cards differ only by the blue category dot: photo ground,
   dividing rule and hover border are the same as Home Care (owner,
   2026-10-16). --fw-card-accent now only colours that dot. */
.fw-shop-archive ul.products li.product.product_cat-baby-care {
	--fw-card-accent: var(--fw-baby-blue);
}

.fw-shop-archive ul.products li.product:hover {
	transform: none;
	box-shadow: none;
}

.fw-shop-archive ul.products li.product:focus-within {
	outline: 3px solid var(--fw-text);
	outline-offset: 3px;
}

.fw-shop-archive .astra-shop-thumbnail-wrap {
	position: relative;
	display: grid;
	place-items: center;
	min-height: clamp(18.5rem, 23vw, 22rem);
	padding: clamp(1rem, 2vw, 1.75rem);
	background: var(--fw-card-wash);
	overflow: hidden;
}

.fw-shop-archive .astra-shop-thumbnail-wrap > a {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
}

.fw-shop-archive ul.products li.product a img {
	display: block;
	width: 100% !important;
	height: clamp(17rem, 20vw, 20rem) !important;
	max-height: none;
	margin: 0 !important;
	object-fit: contain;
	/* No drop-shadow: the photographs carry their own (2026-10-16). */
	transform: scale(1.01);
	transition: transform 0.45s var(--fw-ease);
}

.fw-shop-archive .astra-shop-summary-wrap {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	padding: clamp(1rem, 1.5vw, 1.35rem);
	border-top: 2px solid var(--fw-yellow-500);
}

.fw-shop-archive .fw-card-category {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: 0.4rem;
	color: var(--fw-text);
}

.fw-shop-archive .fw-card-category::before {
	content: '';
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: var(--fw-card-accent);
	flex: 0 0 auto;
}

.fw-shop-archive ul.products li.product .woocommerce-loop-product__title {
	margin: 0;
	color: var(--fw-text);
	font-size: clamp(1.12rem, 1.35vw, 1.4rem) !important;
	line-height: 1.15;
}

.fw-shop-archive ul.products li.product .price {
	order: 3;
	margin: 0.75rem 0;
	color: var(--fw-text) !important;
	font-size: 1.08rem !important;
}

.fw-shop-archive .fw-card-benefit {
	order: 2;
	min-height: 3.2em;
	margin: 0.6rem 0 0;
	color: var(--fw-text);
	font-size: 0.9rem;
}

.fw-shop-archive ul.products li.product .button {
	order: 4;
	margin-top: auto;
	padding: 0.6rem 1.1rem !important;
	background: var(--fw-green-800) !important;
	color: var(--fw-on-dark) !important;
}

.fw-shop-archive ul.products li.product .button:hover {
	background: var(--fw-green-800) !important;
	color: var(--fw-on-dark) !important;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.fw-shop-filter:not(.is-active):hover {
		background: var(--fw-surface);
		color: var(--fw-text);
	}

	.fw-shop-filter:hover span:last-child {
		transform: translate(0.2rem, -0.2rem);
	}

	.fw-shop-archive ul.products li.product:hover a img {
		transform: scale(1.045);
	}

	.fw-shop-archive ul.products li.product:hover {
		border-color: var(--fw-yellow-500);
	}
}

@media (prefers-reduced-motion: reduce) {
	.fw-shop-filter,
	.fw-shop-filter span:last-child,
	.fw-shop-archive ul.products li.product a img {
		transition: none !important;
	}

	.fw-shop-archive ul.products li.product:hover a img {
		transform: scale(1.01);
	}
}

@media (max-width: 1250px) {
	.fw-shop-archive ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 1100px) {
	.fw-shop-hero {
		grid-template-columns: minmax(0, 1.15fr) minmax(16rem, 0.85fr);
	}

	.fw-shop-archive ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.fw-shop-archive .astra-shop-thumbnail-wrap {
		min-height: clamp(18rem, 38vw, 22rem);
	}

	.fw-shop-archive ul.products li.product a img {
		height: clamp(17rem, 34vw, 20rem) !important;
	}
}

@media (max-width: 700px) {
	.fw-shop-archive #primary {
		padding-top: 0.65rem;
	}

	.fw-shop-archive .ast-woocommerce-container {
		width: calc(100% - 1rem);
	}

	.fw-shop-archive .woocommerce-breadcrumb {
		font-size: 0.75rem;
	}

	.fw-shop-hero {
		grid-template-columns: 1fr;
		gap: 1.5rem;
		padding: 1.35rem;
		border-radius: var(--fw-radius-m);
	}

	.fw-shop-hero__eyebrow {
		margin-bottom: 1.25rem;
	}

	.fw-shop-hero h1 {
		font-size: clamp(3rem, 15vw, 4.5rem);
	}

	.fw-shop-archive ul.products {
		grid-template-columns: 1fr !important;
	}

	.fw-shop-archive .astra-shop-thumbnail-wrap {
		min-height: 16.5rem;
		padding: 0.9rem;
	}

	.fw-shop-archive ul.products li.product a img {
		height: 15rem !important;
	}

	.fw-shop-archive .fw-card-benefit {
		min-height: 0;
	}
}

@media (min-width: 701px) {
	.fw-shop-archive .astra-shop-summary-wrap > .ast-loop-product__link {
		display: block;
		min-height: 2.4em;
	}
}

/* Product cards */
ul.products li.product {
	background: var(--fw-surface);
	border-radius: var(--fw-radius-m);
	box-shadow: var(--fw-shadow-s);
	padding: 1.25rem 1.25rem 1.5rem !important;
	position: relative;
	overflow: hidden;
	transition: transform 0.3s var(--fw-ease), box-shadow 0.3s var(--fw-ease);
	text-align: center;
}

ul.products li.product:hover {
	transform: translateY(-5px);
	box-shadow: var(--fw-shadow-m);
}

ul.products li.product a img {
	max-height: 16rem;
	width: auto;
	margin-inline: auto;
	transition: transform 0.4s var(--fw-ease);
}

ul.products li.product:hover a img {
	transform: scale(1.04) rotate(-1deg);
}

.fw-card-category {
	display: block;
	font-size: 0.75rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--fw-green-700);
	margin-bottom: 0.3rem;
}

ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--fw-font-display);
	font-size: 1.15rem !important;
	color: var(--fw-text);
	line-height: 1.3;
}

/* Every card shows the same three lines of its short description; the
   ellipsis always falls at the end of the third line. */
.fw-card-benefit {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	font-size: 0.9rem;
	color: var(--fw-text-soft);
	margin: 0.4rem 0 0.6rem;
	min-height: 2.4em;
}

/* Related products and up-sells follow the archive cards: one row of equal
   cards, the add-to-cart button pinned to the bottom of each (owner,
   2026-09-30: the buttons sat at different heights). */
@media (min-width: 701px) {
	.single-product :is(.related, .up-sells).products ul.products {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 1.5rem;
	}

	.single-product :is(.related, .up-sells).products ul.products::before,
	.single-product :is(.related, .up-sells).products ul.products::after {
		display: none !important;
	}

	.single-product :is(.related, .up-sells).products ul.products li.product {
		float: none !important;
		width: auto !important;
		margin: 0 !important;
	}
}

.single-product :is(.related, .up-sells).products ul.products li.product {
	display: flex;
	flex-direction: column;
}

.single-product :is(.related, .up-sells).products .astra-shop-summary-wrap {
	display: flex;
	flex: 1;
	flex-direction: column;
}

.single-product :is(.related, .up-sells).products .fw-card-benefit {
	min-height: calc(3 * 1.6em);
}

.single-product :is(.related, .up-sells).products ul.products li.product .button {
	align-self: flex-start;
	margin-top: auto;
}

ul.products li.product .price {
	color: var(--fw-text) !important;
	font-weight: 800;
	font-size: 1.15rem !important;
}

/* Sets: „22,97 € statt einzeln ~~29,96 €~~“ (inc/sets.php fw_set_was_html()).
   The price leads; the comparison follows in the price's own colour (owner,
   2026-10-12), lighter in weight. */
.fw-set-was {
	margin-left: 0.3rem;
	color: inherit;
	font-weight: 400;
	white-space: nowrap;
}

.fw-set-was__label {
	margin-right: 0.2rem;
	font-size: 0.8em;
}

/* Astra greys out and fades a struck price (`.price del`); here it keeps the price's colour. */
.fw-set-was del,
.fw-set-was del * {
	color: inherit !important;
	opacity: 1 !important;
}

.fw-set-was del {
	font-size: 0.9em;
	text-decoration-thickness: 1.5px;
}

.fw-set-was del .amount,
.fw-set-was del bdi {
	font-weight: 400;
}

.fw-set-now {
	white-space: nowrap;
}

/* The review form's „Absenden“ is an input#submit, which none of the button
   selectors reached, so it kept Astra's blue (--ast-global-color-0) at rest
   and in every state (2026-09-25). */
ul.products li.product .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #review_form #respond input#submit {
	background: var(--fw-green-700) !important;
	color: var(--fw-on-dark) !important;
	border-radius: 999px !important;
	padding: 0.7rem 1.5rem !important;
	font-weight: 700 !important;
	border: 0 !important;
	transition: background-color 0.25s, transform 0.25s var(--fw-ease) !important;
}

ul.products li.product .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #review_form #respond input#submit:hover {
	background: var(--fw-green-800) !important;
	transform: translateY(-2px);
}

.woocommerce .button.checkout,
.woocommerce a.checkout-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	background: var(--fw-yellow-500) !important;
	color: var(--fw-ink) !important;
}

.woocommerce .button.checkout:hover,
.woocommerce a.checkout-button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	background: var(--fw-orange-400) !important;
}

span.onsale {
	background: var(--fw-orange-400) !important;
	color: var(--fw-ink) !important;
	border-radius: 999px !important;
	font-weight: 800 !important;
	padding: 0.25rem 0.8rem !important;
	min-width: 0 !important;
	min-height: 0 !important;
	line-height: 1.6 !important;
}

/* Pagination */
.woocommerce nav.woocommerce-pagination ul {
	border: 0 !important;
	display: flex;
	gap: 0.4rem;
	justify-content: center;
}

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

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	border-radius: 50% !important;
	width: 2.5rem;
	height: 2.5rem;
	display: grid !important;
	place-items: center;
	font-weight: 700;
	background: var(--fw-surface) !important;
	color: var(--fw-ink) !important;
	box-shadow: var(--fw-shadow-s);
}

.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
	background: var(--fw-green-700) !important;
	color: var(--fw-on-dark) !important;
}

/* == 02 Single product ================================================= */

.single-product div.product .product_title {
	font-size: clamp(1.7rem, 3.5vw, 2.4rem);
}

.single-product div.product .woocommerce-product-gallery {
	background: var(--fw-surface);
	border-radius: var(--fw-radius-l);
	padding: clamp(1.25rem, 3vw, 2.5rem);
	box-shadow: var(--fw-shadow-s);
}

/* object-fit is what keeps the proportions: a WooCommerce/Astra rule wins
   the width at 100%, so the capped height alone squashed every 3:4 product
   photo by 14% (owner report, 2026-09-30). */
.single-product div.product .woocommerce-product-gallery img {
	max-height: 34rem;
	width: auto;
	margin-inline: auto;
	object-fit: contain;
}

/* A fixed stage only for galleries with another photo. Sets retain their
   existing single-image layout. */
.single-product div.product .woocommerce-product-gallery:has(.woocommerce-product-gallery__image:nth-child(2)) .woocommerce-product-gallery__image > a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 3 / 4;
	max-height: 34rem;
}

.single-product div.product .woocommerce-product-gallery:has(.woocommerce-product-gallery__image:nth-child(2)) .woocommerce-product-gallery__image > a > img {
	max-height: 34rem;
	width: 100%;
	height: 100%;
	margin-inline: auto;
	object-fit: contain;
}

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs {
	display: flex;
	justify-content: center;
	gap: 0.75rem;
	margin: 1rem 0 0 !important;
	padding: 0;
	overflow: visible;
	list-style: none;
}

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs::before,
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs::after {
	display: none;
}

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li {
	flex: 0 0 60px;
	width: 60px;
	float: none;
	margin: 0 !important;
}

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs img {
	display: block;
	width: 60px;
	height: 60px;
	padding: 0.2rem;
	border: 2px solid var(--fw-rule);
	border-radius: 0.5rem;
	background: var(--fw-surface);
	object-fit: contain;
	opacity: 1;
	cursor: pointer;
}

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs img:is(:hover, .flex-active) {
	border-color: var(--fw-ground);
}

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs img:focus-visible {
	outline: 2px solid var(--fw-ground);
	outline-offset: 3px;
}

.single-product div.product p.price {
	color: var(--fw-text) !important;
	font-size: 1.6rem !important;
	font-weight: 800;
}

.single-product div.product .woocommerce-product-details__short-description {
	color: var(--fw-text-soft);
	font-size: 1.05rem;
}

.fw-benefit-list--summary {
	margin-top: 1rem;
	font-size: 0.98rem;
}

.single-product div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: stretch;
	margin-block: 1.25rem !important;
}

.single-product div.product form.cart .quantity .qty {
	height: 100%;
	min-height: 3rem;
	border-radius: 999px;
	width: 4.5rem;
	text-align: center;
	font-weight: 700;
}

.single-product div.product form.cart .single_add_to_cart_button {
	flex: 1;
	min-width: 14rem;
	background: var(--fw-yellow-500) !important;
	color: var(--fw-ink) !important;
	font-size: 1.05rem !important;
}

.single-product div.product form.cart .single_add_to_cart_button:hover {
	background: var(--fw-orange-400) !important;
}

.product_meta {
	font-size: 0.88rem;
	color: var(--fw-text-soft);
	display: grid;
	gap: 0.2rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(95, 70, 71, 0.09);
}

.product_meta a {
	color: var(--fw-green-700);
}

/* Trust box under add-to-cart */
/* Only the payment methods live here now. The ticked notes moved into the
   product's own benefit list: two lists of ticks read as two competing sets,
   and this one was a --fw-surface card on a --fw-surface container, i.e. an
   invisible box that still indented its contents. No rule, no fill. */
.fw-trust {
	margin-bottom: 1.25rem;
}

.fw-trust__payments {
	margin: 0;
	color: var(--fw-ink-soft);
}

/* Product tabs -> clean underline tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0 !important;
	margin: 0 0 1.5rem !important;
	border-bottom: 2px solid rgba(95, 70, 71, 0.1);
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	display: none !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	padding: 0.75rem 1.1rem !important;
	font-weight: 700 !important;
	color: var(--fw-text-soft) !important;
	border-bottom: 3px solid transparent;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--fw-text) !important;
	border-bottom-color: var(--fw-yellow-500);
}

.woocommerce div.product .woocommerce-tabs .panel {
	max-width: 70ch;
}

/* Phones and tablets (owner, 2026-10-06): one row that scrolls sideways
   instead of three wrapped rows. The edge that hides more tabs fades out;
   main.js sets the two state classes and centres a tapped tab. */
@media (max-width: 860px) {
	.woocommerce div.product .woocommerce-tabs ul.tabs {
		flex-wrap: nowrap;
		gap: 0;
		overflow-x: auto;
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

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

	.woocommerce div.product .woocommerce-tabs ul.tabs li {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}

	.woocommerce div.product .woocommerce-tabs ul.tabs li a {
		display: block;
		padding: 0.75rem 0.9rem !important;
		white-space: nowrap;
	}

	.woocommerce div.product .woocommerce-tabs ul.tabs.fw-tabs--more-right {
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent);
		mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent);
	}

	.woocommerce div.product .woocommerce-tabs ul.tabs.fw-tabs--more-left {
		-webkit-mask-image: linear-gradient(to left, #000 calc(100% - 3rem), transparent);
		mask-image: linear-gradient(to left, #000 calc(100% - 3rem), transparent);
	}

	.woocommerce div.product .woocommerce-tabs ul.tabs.fw-tabs--more-left.fw-tabs--more-right {
		-webkit-mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
		mask-image: linear-gradient(to right, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
	}
}

/* Related products */
.related.products > h2,
.cross-sells > h2,
.up-sells > h2 {
	font-size: clamp(1.5rem, 3vw, 2rem);
	text-align: center;
	margin-bottom: 1.75rem;
}

.single-product .related.products .astra-shop-thumbnail-wrap,
.single-product .related.products .astra-shop-thumbnail-wrap > a {
	display: grid;
	place-items: center;
	width: 100%;
}

.single-product .related.products .astra-shop-thumbnail-wrap {
	min-height: 17rem;
}

.single-product .related.products ul.products li.product a img {
	width: 100% !important;
	height: 16rem !important;
	max-height: none;
	margin: 0 auto !important;
	object-fit: contain;
}

@media (max-width: 700px) {
	.single-product .related.products ul.products {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 1rem;
	}

	.single-product .related.products ul.products::before,
	.single-product .related.products ul.products::after {
		display: none !important;
	}

	.single-product .related.products ul.products li.product {
		float: none !important;
		width: auto !important;
		margin: 0 !important;
	}
}

/* == 03 Cart & checkout (block-based) ================================= */

.wc-block-components-button:not(.is-link) {
	border-radius: 999px !important;
	font-weight: 700 !important;
}

.wc-block-cart,
.wc-block-checkout {
	font-family: var(--fw-font-body);
}

.wc-block-components-sidebar .wc-block-components-panel,
.wc-block-components-totals-wrapper,
.wc-block-components-order-summary {
	background: transparent;
}

.wc-block-components-sidebar-layout .wc-block-components-sidebar {
	background: var(--fw-surface);
	border-radius: var(--fw-radius-l);
	box-shadow: var(--fw-shadow-s);
	padding: 1rem;
}

.wc-block-components-product-name {
	font-weight: 700 !important;
	color: var(--fw-ink) !important;
}

/* Cart and checkout are working surfaces, but still belong to the same flat,
   product-led visual system as the shop. Product media gets an uncropped stage
   and totals read as one deliberate summary field instead of a generic card. */
.woocommerce-cart #content,
.woocommerce-checkout #content {
	background: var(--fw-paper);
}

.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title {
	font-size: clamp(2.6rem, 5vw, 4.75rem);
	line-height: 0.95;
	letter-spacing: -0.04em;
}

.wc-block-cart-items {
	border-top: 1px solid var(--fw-text) !important;
}

.wc-block-cart-items th {
	padding-block: 0.9rem !important;
	border-color: rgba(95, 70, 71, 0.45) !important;
	font-size: 0.7rem !important;
	font-weight: 850 !important;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.wc-block-cart-items .wc-block-cart-items__row td {
	padding-block: 1.35rem !important;
	border-color: rgba(95, 70, 71, 0.32) !important;
}

.wc-block-cart-item__image a,
.wc-block-components-order-summary-item__image {
	display: grid;
	place-items: center;
	overflow: hidden;
	border-radius: 1rem;
	background: var(--fw-home-wash);
}

.wc-block-cart-item__image a {
	width: clamp(6.5rem, 10vw, 8.25rem);
	height: clamp(7.5rem, 12vw, 9.5rem);
	padding: 0.75rem;
}

.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img {
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	object-fit: contain !important;
}

.wc-block-cart-item__wrap {
	padding-left: clamp(0.5rem, 2vw, 1.25rem);
}

.wc-block-cart-item__wrap .wc-block-components-product-name {
	display: inline-block;
	max-width: 30ch;
	font-family: var(--fw-font-display);
	font-size: clamp(1.1rem, 1.7vw, 1.4rem) !important;
	line-height: 1.15;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.wc-block-cart-item__prices,
.wc-block-components-product-metadata {
	color: var(--fw-text-soft);
}

.wc-block-components-quantity-selector {
	border: 1px solid rgba(95, 70, 71, 0.42) !important;
	border-radius: 999px !important;
	background: transparent;
}

.wc-block-cart-item__remove-link {
	color: var(--fw-red-700) !important;
	font-size: 0.78rem !important;
	font-weight: 700 !important;
	text-decoration-thickness: 1px !important;
	text-underline-offset: 0.2em;
}

.wc-block-components-sidebar-layout .wc-block-components-sidebar {
	border: 1px solid rgba(95, 70, 71, 0.42);
	border-radius: clamp(1.25rem, 2.5vw, 2rem);
	background: var(--fw-surface);
	box-shadow: none;
	padding: clamp(1rem, 2vw, 1.5rem);
}

.wc-block-components-sidebar .wc-block-components-totals-wrapper,
.wc-block-components-sidebar .wc-block-components-panel,
.wc-block-components-sidebar .wc-block-components-order-summary {
	border-color: rgba(95, 70, 71, 0.35) !important;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--fw-font-display);
	font-size: clamp(1.35rem, 2vw, 1.75rem) !important;
	color: var(--fw-text);
}

.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	min-height: 3.5rem;
}

.wc-block-components-order-summary-item {
	padding-block: 1rem !important;
	border-color: rgba(95, 70, 71, 0.3) !important;
}

.wc-block-components-order-summary-item__image {
	width: 5.75rem !important;
	max-width: none !important;
	flex: 0 0 5.75rem !important;
	height: 6.5rem;
	padding: 0.5rem;
	background: var(--fw-surface);
}

.wc-block-components-order-summary .wc-block-components-order-summary-item .wc-block-components-order-summary-item__image > img {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	object-fit: contain !important;
}

.wc-block-components-order-summary-item__quantity {
	border: 0 !important;
	background: var(--fw-green-800) !important;
	color: var(--fw-on-dark) !important;
	font-weight: 800;
}

.wp-block-woocommerce-cart-cross-sells-block {
	margin-top: clamp(2rem, 5vw, 4rem);
	padding-top: clamp(1.5rem, 3vw, 2.5rem);
	border-top: 1px solid var(--fw-text);
}

.wp-block-woocommerce-cart-cross-sells-block > h2 {
	font-size: clamp(1.7rem, 3vw, 2.5rem);
	text-align: left;
}

.wp-block-woocommerce-cart-cross-sells-block .wc-block-grid__product {
	padding-inline: 0.5rem;
}

.wp-block-woocommerce-cart-cross-sells-block .wc-block-grid__product-image {
	display: grid;
	place-items: center;
	min-height: 16rem;
	padding: 1.25rem;
	border-radius: 1.25rem;
	background: var(--fw-surface);
}

.wp-block-woocommerce-cart-cross-sells-block .wc-block-grid__product-image img {
	width: 100% !important;
	height: 14rem !important;
	object-fit: contain !important;
}

/* WooCommerce's current cart recommendations use Product Collection rather
   than the legacy cross-sells wrapper above. Override its inline cover so
   the whole bottle fits inside the square image stage. */
.woocommerce-cart .wp-block-woocommerce-product-image img {
	object-fit: contain !important;
}

/* The empty cart still uses WooCommerce's legacy product-new grid. Its
   natural image heights staggered the set names, prices and cart actions. */
.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid .wc-block-grid__products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid .wc-block-grid__product {
	display: flex;
	flex-direction: column;
	width: auto !important;
	max-width: none !important;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 1px solid var(--fw-rule-soft);
	border-radius: var(--fw-radius-m);
	overflow: hidden;
	text-align: left;
	font-size: 1rem !important;
}

.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid .wc-block-grid__product-link {
	display: block;
	color: var(--fw-heading);
	text-decoration: none;
}

.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid .wc-block-grid__product-image {
	display: flex;
	align-items: center;
	justify-content: center;
	height: clamp(12rem, 18vw, 15rem);
	margin: 0;
	padding: 0.75rem;
	border-bottom: 2px solid var(--fw-accent);
}

.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid .wc-block-grid__product-image img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-height: 100% !important;
	min-height: 0;
	margin: 0;
	object-fit: contain;
}

.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid .wc-block-grid__product-title {
	min-height: 2.4em;
	margin: 1rem 1rem 0;
	font-family: var(--fw-font-display);
	font-size: 1.25rem;
	font-weight: 650;
	line-height: 1.2;
}

.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid .wc-block-grid__product-price {
	margin: 0.75rem 1rem 1rem;
	color: var(--fw-ink);
	font-size: 1.125rem;
	line-height: 1.4;
}

.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid .fw-set-now,
.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid .fw-set-was {
	display: block;
}

.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid .fw-set-was {
	margin-top: 0.25rem;
	color: var(--fw-ink);
	font-size: 0.85rem;
	line-height: 1.4;
}

.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid .price del {
	color: inherit;
	opacity: 1;
}

.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid .wc-block-grid__product-add-to-cart {
	margin: auto 1rem 1rem;
}

.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	max-width: 100%;
	padding: 0.7rem 1rem;
	font-size: 0.9rem;
	line-height: 1.2;
}

.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid a:focus-visible {
	outline: 2px solid var(--fw-ground);
	outline-offset: -4px;
}

.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid .wp-block-button__link:focus-visible {
	outline-color: var(--fw-on-dark);
}

@media (max-width: 1100px) {
	.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid .wc-block-grid__products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid .wc-block-grid__products {
		grid-template-columns: minmax(0, 1fr);
	}

	.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid .wc-block-grid__product-title {
		min-height: 0;
	}
}

.wc-block-components-formatted-money-amount {
	font-weight: 700;
}

.wc-block-components-text-input input,
.wc-block-components-combobox .components-combobox-control__suggestions-container input,
.wc-block-components-form .wc-block-components-text-input input {
	border-radius: var(--fw-radius-s) !important;
}

/* Cross-sells / product-grid blocks inside cart & empty-cart use the block
   button default (blue); align them with the brand buttons. */
.wp-block-button__link,
.wc-block-grid__product .add_to_cart_button,
.wc-block-components-product-button .wp-element-button {
	background-color: var(--fw-green-700) !important;
	color: var(--fw-on-dark) !important;
	border-radius: 999px !important;
	font-weight: 700 !important;
}

.wp-block-button__link:hover,
.wc-block-grid__product .add_to_cart_button:hover,
.wc-block-components-product-button .wp-element-button:hover {
	background-color: var(--fw-green-800) !important;
}

.fw-checkout-trust {
	text-align: center;
	color: var(--fw-text-soft);
	font-size: 0.9rem;
	margin-top: 1.5rem;
}

@media (max-width: 700px) {
	.wc-block-cart-item__image a {
		width: 5.5rem;
		height: 6.5rem;
		padding: 0.5rem;
	}

	.wc-block-cart-item__wrap {
		padding-left: 0.5rem;
	}

	.wc-block-components-sidebar-layout .wc-block-components-sidebar {
		padding: 0.85rem;
	}

	.wc-block-components-order-summary-item__image {
		width: 4.75rem !important;
		flex-basis: 4.75rem !important;
		height: 5.5rem;
	}
}

/* -- Checkout polish (owner, 2026-10-09) -------------------------------- */

/* One shipping option only (flat rate, or free from the threshold): no
   choice to make, the cost stands in the order summary. */
.wp-block-woocommerce-checkout-shipping-methods-block {
	display: none !important;
}

/* The marketing consent box (inc/marketing-consent.php) is the only field in
   WooCommerce's „additional information“ step; a section heading for one
   optional box overloads the checkout (owner, 2026-10-19). The fieldset's
   legend still names it for screen readers. */
.wc-block-checkout__order-fields .wc-block-components-checkout-step__heading-container {
	display: none;
}

.wc-block-checkout__order-fields.wc-block-components-checkout-step {
	margin-top: 0;
	padding-top: 0;
	margin-bottom: 0.75rem;
}

/* The separator sits under the order note, so the consent box and the terms
   checkbox stand together below it (owner, 2026-10-20). WooCommerce draws it
   as the terms block's top border (--with-separator); same colour here. */
.wc-block-checkout__order-notes.wc-block-components-checkout-step {
	padding-bottom: 1.5rem;
	border-bottom: 1px solid rgba(95, 70, 71, 0.2);
}

.wc-block-checkout__terms.wc-block-checkout__terms--with-separator {
	padding-top: 0;
	border-top: 0;
}

/* Order summary: one frame (the sidebar's), not a second box inside it. */
.wc-block-components-sidebar .wp-block-woocommerce-checkout-order-summary-block {
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	background: transparent !important;
}

/* Phones: one order overview, at the top and open (owner, 2026-10-11).
   Below 700px container width WooCommerce collapses the sidebar summary at
   the top and repeats the whole summary above the order button. The top one
   is forced open (assets/js/checkout-summary-open.js sets its state, this
   keeps the first paint open). The copy at the button stays as a slim recap:
   § 312j Abs. 2 BGB wants name, essential characteristics (the short
   description's first sentence), shipping and total incl. VAT directly before
   the button (AGB_plan.md: „Bestellübersicht steht vollständig vor dem
   Button“), so only pictures, coupon field and frame go. */
@container (max-width: 699px) {
	.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__content {
		display: block;
	}

	.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block :is(.wc-block-components-checkout-order-summary__title-icon, .wc-block-components-checkout-order-summary__title-price) {
		display: none;
	}

	.wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title {
		border-bottom: 0;
		cursor: default;
		pointer-events: none;
	}

	.checkout-order-summary-block-fill-wrapper .checkout-order-summary-block-fill {
		padding: 0;
		border: 0;
		background: transparent;
	}

	.checkout-order-summary-block-fill-wrapper .wp-block-woocommerce-checkout-order-summary-coupon-form-block {
		display: none;
	}

	.checkout-order-summary-block-fill-wrapper .wc-block-components-order-summary-item {
		padding-block: 0.5rem;
	}

	/* The picture goes, the quantity stays as „2 ד before the name. */
	.checkout-order-summary-block-fill-wrapper .wc-block-components-order-summary-item .wc-block-components-order-summary-item__image {
		width: auto !important;
		min-width: 0;
		height: auto;
		flex: 0 0 auto !important;
		padding: 0 !important;
		background: none !important;
	}

	.checkout-order-summary-block-fill-wrapper .wc-block-components-order-summary .wc-block-components-order-summary-item .wc-block-components-order-summary-item__image > img {
		display: none !important;
	}

	.checkout-order-summary-block-fill-wrapper .wc-block-components-order-summary .wc-block-components-order-summary-item .wc-block-components-order-summary-item__quantity {
		display: inline-block !important;
		white-space: nowrap;
		position: static !important;
		min-width: 0;
		height: auto;
		padding: 0;
		border: 0 !important;
		background: none !important;
		box-shadow: none !important;
		color: var(--fw-ink) !important;
		font-size: 0.95rem !important;
		font-weight: 700;
	}

	/* WooCommerce colours the number's own span white (badge text). */
	.checkout-order-summary-block-fill-wrapper .wc-block-components-order-summary .wc-block-components-order-summary-item__quantity span {
		color: inherit;
	}

	.checkout-order-summary-block-fill-wrapper .wc-block-components-order-summary-item__quantity::after {
		content: '\00a0×';
	}

	/* A small label, so the recap does not read as a second overview. */
	.checkout-order-summary-block-fill-wrapper :is(h2, .wc-block-components-title, .wc-block-components-checkout-order-summary__title-text) {
		margin: 0 0 0.25rem !important;
		font-family: var(--fw-font-body) !important;
		font-size: 0.75rem !important;
		font-weight: 700 !important;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--fw-ink) !important;
	}
}

/* The quantity badge sat clipped behind the image frame (a green sliver). */
.wc-block-components-order-summary-item__image {
	position: relative;
	overflow: visible !important;
}

.wc-block-components-order-summary-item__quantity {
	display: grid !important;
	place-items: center;
	min-width: 1.6rem;
	height: 1.6rem;
	padding: 0 0.35rem;
	border-radius: 999px !important;
	font-size: 0.8rem !important;
	line-height: 1 !important;
	transform: none !important;
	top: -0.5rem !important;
	right: -0.5rem !important;
}

/* The line total is enough; the unit price repeated it. */
.wc-block-components-order-summary-item__individual-prices {
	display: none !important;
}

/* Name and description belong together: no reserved second line for the
   name, no empty price row in between. */
.wc-block-components-order-summary-item__description .wc-block-components-product-name {
	display: block;
	/* WooCommerce lets the name grow to the image height (flex-grow). */
	flex: 0 0 auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.3 !important;
}

.wc-block-components-order-summary-item__description .wc-block-cart-item__prices {
	display: none !important;
}

.wc-block-components-order-summary-item__description .wc-block-components-product-metadata {
	margin-top: 0.3rem !important;
	font-size: 0.82rem;
	line-height: 1.4;
}

/* Fields: the label stands above the field, not squeezed into its top edge. */
.wc-block-checkout .wc-block-components-text-input {
	display: flex;
	flex-direction: column-reverse;
	margin-top: 1.1rem !important;
}

.wc-block-checkout .wc-block-components-text-input label,
.wc-block-checkout .wc-block-components-text-input.is-active label {
	position: static !important;
	transform: none !important;
	margin: 0 0 0.35rem;
	max-width: none !important;
	color: var(--fw-ink) !important;
	font-size: 0.9rem !important;
	font-weight: 600;
	line-height: 1.3 !important;
}

.wc-block-checkout .wc-block-components-text-input input,
.wc-block-checkout .wc-block-components-text-input.is-active input {
	min-height: 3rem;
	padding: 0.75rem 1rem !important;
	border: 1px solid rgba(95, 70, 71, 0.45) !important;
	background: #fff !important;
	font-size: 1rem !important;
}

.wc-block-checkout .wc-block-components-text-input input:focus {
	border-color: var(--fw-green-700) !important;
	box-shadow: 0 0 0 1px var(--fw-green-700) !important;
	outline: none !important;
}

/* Address suggestions (inc/address-autocomplete.php, 2026-10-12). With a
   provider WooCommerce puts input and label of „Adresse“ into an extra
   __wrapper; without these rules the label sat beside the field and pushed
   it out of the column (on phones the whole page scrolled sideways). */
.wc-block-checkout .wc-block-components-text-input__wrapper {
	position: relative;
	display: flex !important;
	flex-direction: column !important;
	width: 100%;
	min-width: 0;
}

.wc-block-checkout .wc-block-components-text-input__wrapper label {
	order: -1;
}

.wc-block-checkout .wc-block-components-address-autocomplete-container {
	position: relative;
	width: 100%;
	min-width: 0;
}

.wc-block-checkout .wc-block-components-address-autocomplete-container input {
	padding-right: 2.75rem !important;
}

/* The magnifier sits in the field, centred on the 3 rem input under the label. */
.wc-block-checkout .wc-block-components-address-autocomplete-icon {
	top: auto !important;
	bottom: 1.5rem !important;
	right: 1rem !important;
	transform: translateY(50%) !important;
	opacity: 0.6;
}

.wc-block-checkout .wc-block-components-address-autocomplete-suggestions {
	left: 0 !important;
	right: 0 !important;
	width: auto !important;
	margin-top: 0.35rem !important;
	border: 1px solid rgba(95, 70, 71, 0.45) !important;
	border-radius: var(--fw-radius-s) !important;
	background: #fff !important;
	box-shadow: 0 10px 24px rgba(62, 89, 40, 0.12) !important;
	overflow: hidden;
	z-index: 20;
}

.wc-block-checkout .wc-block-components-address-autocomplete-suggestions .suggestions-list {
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.wc-block-checkout .wc-block-components-address-autocomplete-suggestion {
	padding: 0.7rem 1rem !important;
	color: var(--fw-ink) !important;
	font-size: 0.95rem !important;
	line-height: 1.35 !important;
	border: 0 !important;
}

.wc-block-checkout .wc-block-components-address-autocomplete-suggestion strong {
	font-weight: 700;
	color: var(--fw-ink);
}

.wc-block-checkout .wc-block-components-address-autocomplete-suggestion:hover,
.wc-block-checkout .wc-block-components-address-autocomplete-suggestion[aria-selected="true"] {
	background: var(--fw-surface) !important;
	color: var(--fw-ink) !important;
}

/* Block, not WooCommerce's flex: flex items swallow the spaces around the link. */
.wc-block-checkout .woocommerce-address-autocomplete-branding {
	display: block !important;
	padding: 0.45rem 1rem !important;
	border-top: 1px solid rgba(95, 70, 71, 0.15) !important;
	background: #fff !important;
	color: rgba(95, 70, 71, 0.75) !important;
	font-size: 0.75rem !important;
}

.wc-block-checkout .woocommerce-address-autocomplete-branding a {
	color: var(--fw-ink) !important;
}

/* The country select gets the same treatment as the text fields. */
.wc-block-checkout .wc-blocks-components-select {
	margin-top: 1.1rem !important;
}

.wc-block-checkout .wc-blocks-components-select__container {
	display: flex;
	flex-direction: column;
	height: auto !important;
	border: 0 !important;
	background: transparent !important;
}

.wc-block-checkout .wc-blocks-components-select__label {
	position: static !important;
	transform: none !important;
	margin: 0 0 0.35rem;
	color: var(--fw-ink) !important;
	font-size: 0.9rem !important;
	font-weight: 600;
	line-height: 1.3 !important;
}

.wc-block-checkout .wc-blocks-components-select__select {
	min-height: 3rem;
	padding: 0.75rem 2.5rem 0.75rem 1rem !important;
	border: 1px solid rgba(95, 70, 71, 0.45) !important;
	border-radius: var(--fw-radius-s) !important;
	background-color: #fff !important;
	font-size: 1rem !important;
}

.wc-block-checkout .wc-blocks-components-select__expand {
	top: auto !important;
	bottom: 0.9rem;
}

/* WooCommerce pulls the cart and checkout blocks 20 px outwards on narrow
   screens, which pushed the form over the left edge (16 px gutter rule). */
@media (max-width: 782px) {
	.wp-block-woocommerce-checkout,
	.wp-block-woocommerce-cart {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

/* Coupon form in the summary: a compact green button the height of the
   field, never the block default blue (owner, 2026-10-09). */
.wc-block-components-totals-coupon__form {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: flex-end !important;
	gap: 0.5rem !important;
}

.wc-block-components-totals-coupon__form .wc-block-components-text-input {
	flex: 1 1 auto;
	min-width: 0;
	width: auto !important;
	margin-top: 0 !important;
}

.wc-block-components-totals-coupon__button,
.wc-block-components-totals-coupon__button:hover,
.wc-block-components-totals-coupon__button:focus,
.wc-block-components-totals-coupon__button:active,
.wc-block-components-totals-coupon__button:disabled {
	flex: 0 0 auto;
	height: 3rem !important;
	min-height: 3rem !important;
	padding: 0 1.1rem !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--fw-green-700) !important;
	color: var(--fw-on-dark) !important;
	font-size: 0.95rem !important;
	box-shadow: none !important;
}

/* Subtle hover: a touch darker, same pill shape. */
.wc-block-components-totals-coupon__button:hover:not(:disabled),
.wc-block-components-totals-coupon__button:focus-visible {
	background: var(--fw-green-700) !important;
	filter: brightness(0.92);
	transition: filter 0.15s ease;
}

.wc-block-components-totals-coupon__button:disabled {
	opacity: 0.55;
}

/* Express area: the legal notice reads as a quiet footnote. */
.wc-block-components-express-payment .fw-express-legal {
	font-size: 0.78rem;
	color: var(--fw-text-soft);
}

/* == 04 My account ===================================================== */

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0.75rem;
	background: var(--fw-surface);
	border-radius: var(--fw-radius-m);
	box-shadow: var(--fw-shadow-s);
	display: grid;
	gap: 0.15rem;
}

.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0.65rem 1rem;
	border-radius: var(--fw-radius-s);
	font-weight: 650;
	color: var(--fw-ink);
	text-decoration: none;
}

.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover {
	background: var(--fw-surface);
	color: var(--fw-text);
}

.woocommerce-MyAccount-content {
	background: var(--fw-surface);
	border-radius: var(--fw-radius-m);
	box-shadow: var(--fw-shadow-s);
	padding: clamp(1.5rem, 3vw, 2.25rem);
}

/* == 05 Notices & misc ================================================= */

.woocommerce-js :is(.woocommerce-message, .woocommerce-info, .woocommerce-error),
.wc-block-components-notice-banner {
	background: var(--fw-ground) !important;
	color: var(--fw-on-dark) !important;
	border: 0 !important;
	border-radius: var(--fw-radius-m) !important;
	box-shadow: none !important;
}

/* Keep automatically focused status messages free of a second rim.
   Interactive links and dismiss buttons retain their keyboard focus ring. */
.woocommerce-js :is(.woocommerce-message, .woocommerce-info, .woocommerce-error):focus,
.wc-block-components-notice-banner:focus {
	outline: none !important;
}

.woocommerce-js :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before {
	color: var(--fw-on-dark);
}

.wc-block-components-notice-banner > svg {
	background: transparent !important;
	fill: var(--fw-on-dark);
}

.woocommerce-js :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a,
.woocommerce-js .wc-block-components-notice-banner a {
	color: var(--fw-accent) !important;
	text-decoration: underline;
}

.woocommerce-js :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a.button,
.woocommerce-js .wc-block-components-notice-banner a.wc-forward {
	background: var(--fw-accent) !important;
	color: var(--fw-ground) !important;
	border: 0 !important;
	border-radius: 999px;
	text-decoration: none;
}

.woocommerce-js :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a.button:is(:hover, :focus, :active),
.woocommerce-js .wc-block-components-notice-banner a.wc-forward:is(:hover, :focus, :active) {
	background: var(--fw-orange-400) !important;
}

.woocommerce-js :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a:focus-visible,
.wc-block-components-notice-banner :is(a, button):focus-visible {
	outline: 2px solid var(--fw-on-dark) !important;
	outline-offset: 3px;
}

.woocommerce-js .wc-block-components-notice-banner a.wc-forward {
	padding: 0.65rem 1.25rem !important;
	opacity: 1;
}

.woocommerce-js .wc-block-components-notice-banner .wc-block-components-button {
	color: var(--fw-on-dark) !important;
}

@media (max-width: 544px) {
	.woocommerce-js :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a.button,
	.woocommerce-js .wc-block-components-notice-banner a.wc-forward {
		float: none;
		display: table;
		margin: 1rem 0 0;
	}
}

.woocommerce-store-notice {
	background: var(--fw-green-800);
	color: var(--fw-on-dark);
}

/* Coupon field */
.coupon .input-text {
	border-radius: 999px !important;
}

@media (max-width: 768px) {
	ul.products li.product a img {
		max-height: 12rem;
	}

	.single-product div.product form.cart .single_add_to_cart_button {
		min-width: 0;
	}
}

/* == Shop archive: elements sitting directly on the dark page ground ====
   Breadcrumb, result count and ordering are removed on the archive since
   2026-09-18 (fw_shop_archive_chrome); the breadcrumb rule stays for the
   product-category archive of a future larger catalog. */
.fw-shop-archive .woocommerce-breadcrumb {
	color: var(--fw-on-dark);
}

.fw-shop-archive .woocommerce-breadcrumb a {
	color: var(--fw-accent);
}

/* Astra styles breadcrumb links at #777, which lands at 3.8:1 on the
   container surface. Match its specificity so ours wins. */
.single-product .woocommerce-breadcrumb a,
.woocommerce .woocommerce-breadcrumb a,
.ast-woocommerce-container .woocommerce-breadcrumb a {
	color: var(--fw-green-700);
}

/* WooCommerce ships a slate #1e293b on some form labels, which is the only
   text on the account and checkout forms that is not on our palette. */
.woocommerce-form__label,
.woocommerce-form__label span,
.woocommerce form .form-row label,
.wc-block-components-checkbox__label {
	color: var(--fw-text);
}

/* -------------------------------------------------------------------------
 * Statutory disclosures (PAngV, Detergents Regulation, GPSR, CLP)
 * See inc/legal.php and context/shop/AGB_plan.md § 7.
 * ---------------------------------------------------------------------- */

/* Unit price sits beside the price, clearly subordinate to it. */
.fw-unit-price {
	display: inline-block;
	font-size: 0.78em;
	font-weight: 400;
	color: var(--fw-ink-soft);
	white-space: nowrap;
}

.fw-price-note,
.fw-delivery-note {
	margin: 0.15rem 0 0;
	font-size: 0.85rem;
	color: var(--fw-ink-soft);
}

.fw-price-note a {
	color: inherit;
	text-decoration: underline;
}

.fw-delivery-note {
	margin-bottom: 0.9rem;
}

/* CLP labelling. Art. 48 requires it to be present in the offer; it does not
   prescribe position, colour or type size. So: quiet, small, below the buy
   area. A red warning panel above the price was a choice, not a duty. */
.fw-clp {
	margin: 1.2rem 0 0;
	padding-top: 0.7rem;
	border-top: 1px solid var(--fw-rule-soft);
	font-size: 0.78rem;
	line-height: 1.5;
	color: var(--fw-ink-soft);
}

.fw-clp p {
	margin: 0 0 0.3rem;
	font-size: inherit;
	color: inherit;
}

/* Full opacity (was 0.85, 4.11 : 1): the safety sentence is small text and
   needs 4.5 : 1 (owner, 2026-10-13); now 5.71 : 1. */
.fw-clp__safety {
	margin-bottom: 0;
}

.fw-clp__signal {
	font-weight: 600;
}

/* Ingredient list as the label prints it (2026-10-06): part on the left,
   origin on the right, the label's note small under the part. Ruled rows
   like the label's leader lines, no zebra, no box. */
.fw-label-ingredients {
	width: 100%;
	margin: 0 0 0.6rem;
	border-collapse: collapse;
	border: 0;
	font-size: 0.92rem;
}

.fw-label-ingredients th,
.fw-label-ingredients td {
	padding: 0.45rem 0;
	border: 0;
	border-bottom: 1px solid var(--fw-rule-soft);
	background: transparent;
	text-align: left;
	vertical-align: top;
}

.fw-label-ingredients th {
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fw-ink);
}

.fw-label-ingredients th:last-child,
.fw-label-ingredients td:last-child {
	padding-left: 1.5rem;
	text-align: right;
}

/* Phones: a right-aligned origin that wraps leaves "Öl" alone at the edge;
   a fixed, left-aligned column wraps into a tidy block instead. */
@media (max-width: 640px) {
	.fw-label-ingredients th:last-child,
	.fw-label-ingredients td:last-child {
		width: 38%;
		padding-left: 1rem;
		text-align: left;
	}
}

.fw-label-ingredients__note {
	display: block;
	font-size: 0.8rem;
	color: var(--fw-ink-soft);
}

.fw-label-ingredients__footnote {
	margin: 0 0 1rem;
	font-size: 0.8rem;
	color: var(--fw-ink-soft);
}

.fw-datasheet a {
	font-weight: 600;
}

.fw-operator {
	margin-top: 1.2rem;
	padding-top: 0.9rem;
	border-top: 1px solid var(--fw-rule-soft);
	font-size: 0.85rem;
	color: var(--fw-ink-soft);
}

.fw-operator p {
	margin: 0 0 0.4rem;
	font-size: inherit;
}

/* Withdrawal form: reads as a form to fill in, not as prose. */
.fw-withdrawal-form {
	margin: 1.2rem 0;
	padding: 1.4rem 1.6rem;
	border: 1px solid var(--fw-rule);
	border-radius: 6px;
}

/* -------------------------------------------------------------------------
 * Launch sets (inc/sets.php). Warm yellow is the sets' line colour: filter
 * fill, card stage and the accent rule under the image.
 * ---------------------------------------------------------------------- */
.fw-shop-filter--sets {
	--fw-filter-fill: var(--fw-set-wash);
	--fw-filter-ink: var(--fw-text);
}

.fw-shop-archive ul.products li.product.product_cat-sets {
	--fw-card-accent: var(--fw-yellow-500);
	--fw-card-wash: var(--fw-set-wash);
}

.fw-shop-archive .fw-card-shipping {
	order: 3;
	margin: -0.45rem 0 0.75rem;
	padding: 0.15rem 0.55rem;
	border-radius: 999px;
	background: var(--fw-set-wash);
	color: var(--fw-text);
	font-size: 0.78rem;
	font-weight: 700;
}

/* "Im Set" in the product summary: what is in the box, free items marked. */
.fw-set-contents {
	margin: 1.1rem 0 1.25rem;
	padding: 1rem 1.1rem;
	border-radius: var(--fw-radius-s);
	background: var(--fw-set-wash);
}

.fw-set-contents .fw-set-contents__title {
	margin: 0 0 0.6rem;
	color: var(--fw-text);
	font-size: 1rem;
	font-weight: 800;
}

.fw-set-contents__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fw-set-contents__item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.2rem 0.5rem;
	padding: 0.4rem 0;
	border-top: 1px solid var(--fw-rule-soft);
	font-size: 0.95rem;
}

.fw-set-contents__item:first-child {
	border-top: 0;
}

.fw-set-contents__qty {
	min-width: 1.8rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.fw-set-contents__item a {
	color: var(--fw-text);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.fw-set-contents__free {
	padding: 0.05rem 0.5rem;
	border-radius: 999px;
	background: var(--fw-green-800);
	color: var(--fw-on-dark);
	font-size: 0.75rem;
	font-weight: 700;
}

.fw-set-contents__single {
	margin: 0.6rem 0 0;
	color: var(--fw-ink-soft);
	font-size: 0.85rem;
}

/* A set names each classified product above its CLP lines. */
.fw-clp__product {
	font-weight: 700;
	color: var(--fw-text);
}

.fw-clp + .fw-clp {
	margin-top: 0.6rem;
}

.fw-set-disclosure__title {
	margin: 1.8rem 0 0.2rem;
	font-size: 1.15rem;
}

.fw-set-disclosure__title a {
	color: inherit;
}

/* Legal notice under the Apple Pay / Google Pay express buttons
   (inc/commerce.php, assets/js/checkout-express-notice.js). */
.fw-express-legal {
	margin: 0.75rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--fw-ink);
	text-align: left;
}

.fw-express-legal a {
	color: inherit;
	text-decoration: underline;
}

/* All express buttons appear at once (owner, 2026-10-11): PayPal rendered
   first at full width, then shrank when Apple Pay / Google Pay arrived.
   Until assets/js/checkout-express-reveal.js sets body.fw-express-ready the
   row is invisible over a quiet placeholder of the same height, and the
   wallet notice waits with it. The row is a ul of li with several methods
   but a div of divs while only one is registered, hence `> *`. */
/* 48px: the row's final height; PayPal alone renders 56px tall at first. */
body:not(.fw-express-ready) .wc-block-components-express-payment__event-buttons {
	height: 48px;
	overflow: hidden;
	border-radius: 5px;
	background: rgba(95, 70, 71, 0.08);
}

body:not(.fw-express-ready) .wc-block-components-express-payment__event-buttons > * {
	opacity: 0;
	pointer-events: none;
}

body:not(.fw-express-ready) .fw-express-legal {
	display: none;
}

.wc-block-components-express-payment__event-buttons > * {
	transition: opacity 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
	.wc-block-components-express-payment__event-buttons > * {
		transition: none;
	}
}

/* Error notices land below the fixed header, both when Woo scrolls to them
   and when assets/js/checkout-errors.js does (owner, 2026-10-09). */
.wc-block-components-notices,
.wc-block-components-notice-banner,
.wc-block-components-text-input,
.wc-block-components-combobox,
.wc-block-components-select,
.wc-block-components-checkbox {
	scroll-margin-top: calc(var(--fw-header-h) + 1rem);
}

/* Woo also scrolls the input itself before focusing it. Its label sits
   above it, so leave room for both the label and the returning header. */
.wc-block-components-text-input input,
.wc-block-components-combobox input,
.wc-block-components-select select {
	scroll-margin-top: calc(var(--fw-header-h) + 3rem);
}

/* == 06 Order received („Danke“, owner, 2026-10-11) =====================
   Template: woocommerce/checkout/thankyou.php, helpers in inc/order-received.php.
   A green thank-you band with the team photo, the next steps, the order as a
   card with invoice and addresses beside it, and a farewell. The page leaves
   Astra's boxed container only when the thank-you markup is really there, so
   the login and e-mail verification states of the same URL stay boxed. */

@font-face {
	font-family: 'Caveat';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/caveat-latin.woff2') format('woff2');
}

body.fw-order-received:has(.fw-thanks) #content .ast-container {
	display: block;
	max-width: none;
	margin: 0;
	padding: 0;
	border-radius: 0;
	background: var(--fw-paper);
}

body.fw-order-received:has(.fw-thanks) :is(#primary, .site-main, article.page, .entry-content, .entry-content > .woocommerce) {
	margin: 0;
	padding: 0;
	width: auto;
	max-width: none;
}

body.fw-order-received:has(.fw-thanks) .entry-header {
	display: none;
}

.fw-thanks {
	--fw-thanks-hand: 'Caveat', 'Segoe Script', cursive;
	--fw-thanks-line: rgba(95, 70, 71, 0.16);
	--fw-thanks-card: #fdf5de;
	color: var(--fw-ink);
}

/* -- Thank-you band ----------------------------------------------------- */
/* The team photo runs full width, cut to the people (owner, 2026-10-11);
   the caption sits in its lower right corner. Below it the green band with
   the thanks on the left and order number, date and total stacked on the
   right. On wide screens the photo's height is capped and the legs are
   trimmed, never the heads (object-position near the top). */

.fw-thanks__band {
	background: var(--fw-ground);
	color: var(--fw-on-dark);
}

.fw-thanks__figure {
	position: relative;
	margin: 0;
}

.fw-thanks__figure picture {
	display: block;
}

/* The heads start right under the header text on every width (owner,
   2026-10-11). The picture is drawn at full width, so its scale is 100vw
   over the crop width (5150 source px). --fw-thanks-head is the tallest
   head's top in that scale (wide crop: 661 of 5150 = 12.83vw; narrow crop:
   1161 of 5150 = 22.54vw); the image is shifted up so that head sits at
   --fw-thanks-top. The height leaves no gap below the shifted image (both
   crops end 51.81vw below that head) and is capped on tall screens, where
   the legs are trimmed. Change the numbers together with the crops in
   scripts/thats-us-media.php. Two classes: Astra's .entry-content img sets
   height: auto. */
.fw-thanks .fw-thanks__photo {
	--fw-thanks-top: 3.25rem;
	--fw-thanks-head: 12.83vw;
	display: block;
	width: 100%;
	height: min(72vh, 46rem, calc(51.81vw + var(--fw-thanks-top)));
	object-fit: cover;
	object-position: 50% calc(var(--fw-thanks-top) - var(--fw-thanks-head));
}

@media (max-width: 760px) {
	.fw-thanks .fw-thanks__photo {
		--fw-thanks-head: 22.54vw;
	}
}

/* A light black film like the other hero pictures (owner, 2026-10-11):
   darker under the transparent header and at the caption, light over the
   faces. */
.fw-thanks__figure::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.14) 28%, rgba(0, 0, 0, 0.14) 62%, rgba(0, 0, 0, 0.5) 100%);
	pointer-events: none;
}
.fw-thanks__figure figcaption {
	position: absolute;
	right: var(--fw-gutter);
	bottom: clamp(0.75rem, 2.5vw, 1.75rem);
	z-index: 1;
	font-family: var(--fw-thanks-hand);
	font-size: clamp(1.4rem, 3vw, 2.4rem);
	font-weight: 700;
	line-height: 1.1;
	color: var(--fw-on-dark);
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
	transform: rotate(-2deg);
	transform-origin: right bottom;
}

.fw-thanks__band-inner {
	max-width: var(--fw-container);
	margin: 0 auto;
	padding: clamp(2.5rem, 5vw, 4rem) var(--fw-gutter) clamp(3rem, 6vw, 4.5rem);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: clamp(2rem, 6vw, 6rem);
	align-items: center;
}

.fw-thanks__copy {
	min-width: 0;
}

.fw-thanks__copy p {
	margin: 0 0 1rem;
	max-width: 40rem;
	font-size: 1.075rem;
	line-height: 1.6;
	color: var(--fw-on-dark);
}

.fw-thanks__copy p:last-child {
	margin-bottom: 0;
}

.fw-thanks .fw-thanks__hand {
	margin: 0 0 0.9rem;
	max-width: none;
	font-family: var(--fw-thanks-hand);
	font-size: clamp(2.6rem, 5.4vw, 3.9rem);
	font-weight: 700;
	line-height: 1;
	color: var(--fw-accent);
	transform: rotate(-2deg);
	transform-origin: left center;
}

.fw-thanks .fw-thanks__title {
	margin: 0 0 1.25rem;
	font-family: var(--fw-font-display);
	font-size: clamp(1.9rem, 3.6vw, 2.85rem);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: var(--fw-on-dark);
	text-wrap: balance;
}

.fw-thanks .fw-thanks__gateway {
	padding: 0.75rem 1rem;
	border: 1px solid rgba(239, 237, 228, 0.35);
	border-radius: var(--fw-radius-s);
	background: transparent;
	font-size: 0.95rem;
}

/* Order number, date and total stacked beside the copy. */
.fw-thanks__facts {
	display: grid;
	gap: 1.4rem;
	margin: 0;
	padding: 0.25rem 0 0.25rem clamp(1.5rem, 3vw, 2.5rem);
	border-left: 1px solid rgba(239, 237, 228, 0.22);
	list-style: none;
}

/* WooCommerce styles .woocommerce-order-overview as a ruled list. */
.fw-thanks__facts > div {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	float: none;
	font-size: inherit;
	text-transform: none;
}

.fw-thanks__facts dt {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fw-on-dark);
	opacity: 0.75;
}

.fw-thanks__facts dd {
	margin: 0.2rem 0 0;
	font-size: 1.2rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--fw-on-dark);
}

@media (max-width: 760px) {
	.fw-thanks__band-inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.fw-thanks__facts {
		display: flex;
		flex-wrap: wrap;
		gap: 0.75rem 2rem;
		padding: 1.4rem 0 0;
		border-left: 0;
		border-top: 1px solid rgba(239, 237, 228, 0.22);
	}

	.fw-thanks__facts dd {
		font-size: 1.05rem;
	}
}
/* -- Steps, order, farewell ---------------------------------------------- */

.fw-thanks__body {
	max-width: var(--fw-container);
	margin: 0 auto;
	padding: clamp(2.5rem, 5vw, 3.75rem) var(--fw-gutter) 0;
	display: grid;
	gap: clamp(2.5rem, 5vw, 3.5rem);
}

/* Astra sizes .woocommerce-checkout .woocommerce-order h3 at (0-4-1). */
body.fw-order-received .fw-thanks.woocommerce-order :is(h2, h3).fw-thanks__label {
	margin: 0 0 1.1rem;
	font-family: var(--fw-font-body);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--fw-ink);
}

.fw-thanks .fw-thanks__steps ol {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: fw-step;
}

.fw-thanks__steps li {
	position: relative;
	min-width: 0;
	margin: 0;
	padding-left: 3.3rem;
	counter-increment: fw-step;
}

.fw-thanks__steps li::before {
	content: counter(fw-step);
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	background: var(--fw-ground);
	color: var(--fw-on-dark);
	font-family: var(--fw-font-display);
	font-weight: 700;
}

body.fw-order-received .fw-thanks.woocommerce-order .fw-thanks__steps h3 {
	margin: 0.2rem 0 0.25rem;
	font-family: var(--fw-font-display);
	font-size: 1.05rem;
	line-height: 1.3;
	color: var(--fw-heading);
}

.fw-thanks__steps p {
	margin: 0;
	font-size: 0.95rem;
	overflow-wrap: anywhere;
}

@media (max-width: 760px) {
	.fw-thanks .fw-thanks__steps ol {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.1rem;
	}
}

.fw-thanks__order {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: 1.5rem;
	align-items: start;
}

.fw-thanks__side {
	display: grid;
	gap: 1.5rem;
	min-width: 0;
}

@media (max-width: 860px) {
	.fw-thanks__order {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Tablets: invoice and addresses side by side under the order. */
@media (min-width: 600px) and (max-width: 860px) {
	.fw-thanks__side {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}
}

.fw-thanks__card {
	min-width: 0;
	padding: clamp(1.25rem, 3vw, 1.9rem);
	border: 1px solid var(--fw-thanks-line);
	border-radius: var(--fw-radius-m);
	background: var(--fw-thanks-card);
}

.fw-thanks .fw-thanks__card-title {
	margin: 0 0 1.1rem;
	font-family: var(--fw-font-display);
	font-size: 1.35rem;
	line-height: 1.25;
	color: var(--fw-heading);
}

.fw-thanks .fw-thanks__lines {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fw-thanks__line {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr) auto;
	gap: 1rem;
	align-items: center;
	margin: 0;
	padding: 0.9rem 0;
	border-bottom: 1px solid var(--fw-thanks-line);
}

.fw-thanks__line:first-child {
	padding-top: 0.45rem;
}

.fw-thanks__line-media {
	position: relative;
	display: grid;
	place-items: center;
	width: 4.5rem;
	height: 4.5rem;
	border-radius: var(--fw-radius-s);
	background: var(--fw-home-wash);
}

.fw-thanks__line-media img {
	width: 82%;
	height: 82%;
	object-fit: contain;
}

.fw-thanks__qty {
	position: absolute;
	top: -0.45rem;
	right: -0.45rem;
	min-width: 1.45rem;
	height: 1.45rem;
	padding: 0 0.35rem;
	border-radius: 999px;
	background: var(--fw-ground);
	color: var(--fw-on-dark);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.45rem;
	text-align: center;
}

.fw-thanks__line-text {
	min-width: 0;
}

.fw-thanks .fw-thanks__line-name {
	display: block;
	font-weight: 600;
	color: var(--fw-heading);
	text-decoration: none;
}

.fw-thanks a.fw-thanks__line-name:hover {
	text-decoration: underline;
}

.fw-thanks__line-unit {
	display: block;
	font-size: 0.85rem;
	font-variant-numeric: tabular-nums;
}

.fw-thanks__line .wc-item-meta {
	margin: 0.3rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.85rem;
}

.fw-thanks__line .wc-item-meta li {
	margin: 0;
}

.fw-thanks__line .wc-item-meta :is(strong, p) {
	display: inline;
	margin: 0;
	font-weight: 600;
}

.fw-thanks__line-total {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Very narrow phones: the line total moves under the name, so product names
   keep their full width instead of breaking inside a word. */
@media (max-width: 420px) {
	.fw-thanks__line {
		grid-template-columns: 3.75rem minmax(0, 1fr);
		gap: 0.25rem 0.9rem;
	}

	.fw-thanks__line-media {
		grid-row: span 2;
		width: 3.75rem;
		height: 3.75rem;
	}

	.fw-thanks__line-total {
		grid-column: 2;
	}
}

.fw-thanks__totals {
	display: grid;
	gap: 0.45rem;
	margin: 1rem 0 0;
}

.fw-thanks__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	font-variant-numeric: tabular-nums;
}

.fw-thanks__total dt,
.fw-thanks__total dd {
	margin: 0;
}

.fw-thanks__total dd {
	text-align: right;
}

.fw-thanks__total small,
.fw-thanks__total .shipped_via {
	font-size: 0.82rem;
}

.fw-thanks__total--order_total {
	margin-top: 0.5rem;
	padding-top: 0.9rem;
	border-top: 1px solid var(--fw-thanks-line);
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--fw-heading);
}

.fw-thanks__total--order_total small {
	display: block;
	font-weight: 400;
	color: var(--fw-ink);
}

.fw-thanks__invoice p {
	margin: 0 0 1.1rem;
	font-size: 0.95rem;
}

.fw-thanks .fw-thanks__invoice-btn {
	width: 100%;
}

.fw-thanks__invoice-btn svg {
	flex: none;
}

.fw-thanks__addresses {
	display: grid;
	gap: 1.25rem;
}

body.fw-order-received .fw-thanks.woocommerce-order .fw-thanks__addresses h3.fw-thanks__label {
	margin-bottom: 0.35rem;
}

.fw-thanks__addresses address,
.fw-thanks__addresses p {
	margin: 0;
	font-style: normal;
	line-height: 1.55;
	overflow-wrap: anywhere;
}

.fw-thanks .fw-thanks__payment {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.25rem 1rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--fw-thanks-line);
	font-size: 0.95rem;
}

/* The payment method opens the card when the addresses are not shown. */
.fw-thanks .fw-thanks__payment:first-child {
	padding-top: 0;
	border-top: 0;
}

.fw-thanks__bye {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.35rem 2rem;
	padding: clamp(2.5rem, 5vw, 3.5rem) 0 clamp(3rem, 6vw, 4.5rem);
	border-top: 1px solid var(--fw-thanks-line);
}

.fw-thanks .fw-thanks__bye-hand {
	margin: 0;
	font-family: var(--fw-thanks-hand);
	font-size: clamp(2rem, 4vw, 2.6rem);
	font-weight: 700;
	line-height: 1.1;
	color: var(--fw-heading);
}

.fw-thanks__bye-help {
	grid-column: 1;
	margin: 0;
}

.fw-thanks__bye-help a {
	color: inherit;
}

.fw-thanks__bye-actions {
	grid-column: 2;
	grid-row: 1 / span 2;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

@media (max-width: 760px) {
	.fw-thanks__bye {
		grid-template-columns: minmax(0, 1fr);
	}

	.fw-thanks__bye-actions {
		grid-column: 1;
		grid-row: auto;
		margin-top: 1rem;
	}
}
/* -- Verified reviews (inc/reviews.php, owner 2026-10-19) ---------------- */

/* Stars: yellow with a dark-gold outline. Yellow alone on the cream surface
   would miss the 3:1 contrast that graphics need (WCAG 1.4.11). The filled
   row lies over the empty one and is clipped to the rating's width. */
.fw-stars {
	--fw-star: 1.15rem;
	position: relative;
	display: inline-flex;
	flex: none;
	line-height: 0;
	vertical-align: middle;
}

.fw-stars--s { --fw-star: 1rem; }
.fw-stars--m { --fw-star: 1.4rem; }
.fw-stars--l { --fw-star: 2.25rem; }

.fw-stars__empty,
.fw-stars__fill {
	display: inline-flex;
	gap: calc(var(--fw-star) * 0.08);
}

.fw-stars__fill {
	position: absolute;
	inset: 0 auto 0 0;
	overflow: hidden;
	white-space: nowrap;
}

.fw-stars svg {
	flex: none;
	width: var(--fw-star);
	height: var(--fw-star);
	stroke-width: 1.5;
	stroke-linejoin: round;
}

.fw-stars__empty svg {
	fill: rgba(95, 70, 71, 0.1);
	stroke: rgba(95, 70, 71, 0.42);
}

.fw-stars__fill svg {
	fill: var(--fw-yellow-500);
	stroke: #8f6f00;
}

/* Summary line under the title: stars, average, count. */
.fw-rating-summary {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0 0 1rem;
}

.fw-rating-summary a {
	color: var(--fw-text);
	font-size: 0.95rem;
	text-decoration: none;
}

.fw-rating-summary a span {
	color: var(--fw-text-soft);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-color: var(--fw-rule);
}

.fw-rating-summary a:hover span,
.fw-rating-summary a:focus-visible span {
	color: var(--fw-text);
	text-decoration-color: currentColor;
}

/* The reviews tab: overview, notice, list. Astra gives every paragraph in
   the panel a 1.6em bottom margin; inside the reviews the spacing is set
   here (same specificity as Astra's rule, later in the cascade). */
.woocommerce div.product .fw-reviews p {
	margin: 0;
}

.woocommerce div.product .fw-reviews .fw-reviews__notice {
	margin: 1.25rem 0;
}

.woocommerce div.product .fw-reviews ol.fw-reviews__list,
.woocommerce div.product .fw-reviews ul.fw-reviews__spread {
	margin: 0;
	padding: 0;
}

.woocommerce div.product .fw-reviews .fw-review__text p + p {
	margin-top: 0.6rem;
}

.woocommerce div.product .fw-reviews .fw-review__author {
	margin-top: 1rem;
}

.woocommerce div.product .fw-reviews .fw-review__reply-label {
	margin-bottom: 0.35rem;
}
.woocommerce div.product .woocommerce-tabs .panel:has(> .fw-reviews) {
	max-width: 54rem;
}

.fw-reviews__overview {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: clamp(1.25rem, 4vw, 3rem);
	align-items: center;
	padding: clamp(1.25rem, 3vw, 1.75rem);
	border-radius: var(--fw-radius-l);
	background: rgba(255, 255, 255, 0.55);
	border: 1px solid var(--fw-rule-soft);
}

.fw-reviews__score {
	display: grid;
	justify-items: center;
	align-content: center;
	gap: 0.4rem;
	min-width: 8.5rem;
	text-align: center;
}

.fw-reviews__average {
	margin: 0;
	font-family: var(--fw-font-display);
	font-size: clamp(2.6rem, 6vw, 3.4rem);
	font-weight: 800;
	line-height: 1;
	color: var(--fw-heading);
}

.fw-reviews__count {
	margin: 0;
	font-size: 0.9rem;
	color: var(--fw-text-soft);
}

.fw-reviews__spread {
	display: grid;
	gap: 0.45rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fw-reviews__spread li {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr) 1.75rem;
	gap: 0.75rem;
	align-items: center;
	font-size: 0.88rem;
	color: var(--fw-text-soft);
}

.fw-reviews__spread-count {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.fw-reviews__bar {
	display: block;
	height: 0.55rem;
	border-radius: 999px;
	background: rgba(95, 70, 71, 0.12);
	overflow: hidden;
}

.fw-reviews__bar span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--fw-yellow-500);
	box-shadow: inset 0 0 0 1px #8f6f00;
}

/* § 5b Abs. 3 UWG: plainly visible, directly above the list. */
.fw-reviews__notice {
	display: flex;
	gap: 0.65rem;
	align-items: flex-start;
	margin: 1.25rem 0;
	padding: 0.9rem 1.1rem;
	border-radius: var(--fw-radius-m);
	background: rgba(62, 89, 40, 0.07);
	color: var(--fw-text);
	font-size: 0.9rem;
	line-height: 1.55;
}

.fw-reviews__notice svg {
	flex: none;
	margin-top: 0.1rem;
	color: var(--fw-green-600);
}

.fw-reviews__list {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fw-review {
	margin: 0;
	padding: clamp(1.1rem, 3vw, 1.5rem);
	border-radius: var(--fw-radius-l);
	background: rgba(255, 255, 255, 0.55);
	border: 1px solid var(--fw-rule-soft);
}

.fw-review__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
}

.fw-review__date {
	font-size: 0.85rem;
	color: var(--fw-text-soft);
}

.fw-review__text {
	margin-top: 0.75rem;
	color: var(--fw-text);
	overflow-wrap: anywhere;
}

.fw-review__text p {
	margin: 0 0 0.6rem;
}

.fw-review__text p:last-child {
	margin-bottom: 0;
}

.fw-review__author {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.65rem;
	margin: 1rem 0 0;
	font-size: 0.92rem;
}

.fw-review__avatar {
	display: inline-grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--fw-ground);
	color: var(--fw-on-dark);
	font-weight: 800;
	font-size: 0.85rem;
}

.fw-review__name {
	font-weight: 700;
	color: var(--fw-text);
}

.fw-review__verified {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	background: rgba(62, 89, 40, 0.1);
	color: var(--fw-green-700);
	font-size: 0.8rem;
	font-weight: 700;
}

.fw-review__reply {
	margin-top: 1rem;
	padding: 0.85rem 1rem;
	border-left: 3px solid var(--fw-yellow-500);
	border-radius: 0 var(--fw-radius-s) var(--fw-radius-s) 0;
	background: rgba(250, 237, 200, 0.7);
	font-size: 0.92rem;
}

.fw-review__reply-label {
	margin: 0 0 0.35rem;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fw-ink);
}

.fw-review__reply p {
	margin: 0;
}

@media (max-width: 560px) {
	.fw-reviews__overview {
		grid-template-columns: minmax(0, 1fr);
	}
}