/**
 * Vitalstoffversand — WoodMart child overrides.
 *
 * Keep selectors specific. Do not copy parent CSS here.
 */

/*
 * Language dropdown is taller (flag) than currency. Match height in header rows.
 * WoodMart 8.5.7: .whb-row / .whb-top-bar.
 */
.whb-row .phoenix-mc-switcher,
.whb-header .phoenix-mc-switcher {
	margin: 0;
	font-size: 0.875rem;
}

.whb-row .phoenix-lang-switcher--dropdown .phoenix-lang-switcher__summary,
.whb-row .phoenix-mc-switcher--dropdown .phoenix-mc-switcher__summary,
.whb-header .phoenix-lang-switcher--dropdown .phoenix-lang-switcher__summary,
.whb-header .phoenix-mc-switcher--dropdown .phoenix-mc-switcher__summary {
	box-sizing: border-box;
	min-height: 2.25rem;
	padding: 0.3rem 0.55rem;
	line-height: 1.2;
	align-items: center;
}

.whb-row .phoenix-lang-switcher__flag,
.whb-header .phoenix-lang-switcher__flag {
	width: 16px;
	height: 11px;
}

/*
 * Shop category grid — uniform square thumbs on all viewports.
 * Source files currently differ (150 / 200 / 225 px); display must not.
 * Phone landscape stays in WoodMart’s 2-col band (≤768.98px); keep a cap.
 */
.category-grid-item .wd-cat-thumb.category-image-wrapp,
.category-grid-item .category-image-wrapp,
.wd-cat .wd-cat-thumb,
.cat-design-alt .wd-cat-thumb {
	--vs-cat-thumb-size: 180px;
	box-sizing: border-box;
	position: relative;
	width: min(100%, var(--vs-cat-thumb-size));
	max-width: var(--vs-cat-thumb-size);
	aspect-ratio: 1 / 1;
	height: auto;
	max-height: none;
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.category-grid-item .wd-cat-thumb.category-image-wrapp img,
.category-grid-item .category-image-wrapp img,
.wd-cat .wd-cat-thumb img,
.category-grid-item img,
.woocommerce ul.products li.product-category img,
.wd-cat img {
	box-sizing: border-box;
	width: 100% !important;
	height: 100% !important;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	object-position: center;
	display: block;
	margin: 0;
}

@media (min-width: 1024px) {
	.category-grid-item .wd-cat-thumb.category-image-wrapp,
	.category-grid-item .category-image-wrapp,
	.wd-cat .wd-cat-thumb,
	.cat-design-alt .wd-cat-thumb {
		--vs-cat-thumb-size: 200px;
	}
}

/*
 * Brand overview lives on the CMS page + [product_brand_thumbnails],
 * not on the taxonomy archive (that URL is one brand’s products).
 * Theme CSS often forces one logo per row; columns="4" is then ignored.
 */
@media (min-width: 1024px) {
	.brand-thumbnails,
	ul.brand-thumbnails {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 1.25rem;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.brand-thumbnails li,
	ul.brand-thumbnails li {
		width: auto !important;
		max-width: none;
		float: none;
		margin: 0;
	}

	.brand-thumbnails img,
	ul.brand-thumbnails img {
		max-height: 9.35rem;
		width: auto;
		max-width: 100%;
		height: auto;
		object-fit: contain;
		display: block;
		margin-inline: auto;
	}
}

/*
 * Checkout payment method icons: Storefront floats them right; WoodMart does not.
 * Fixed height + object-fit reserves space before images load (CLS).
 */
body.woocommerce-checkout #payment ul.payment_methods > li > label {
	display: block;
	width: 100%;
	min-height: 1.8em;
}

body.woocommerce-checkout #payment ul.payment_methods > li img {
	float: right;
	border: 0;
	padding: 0;
	margin: 0 0 0 0.5rem;
	height: 1.618em;
	width: auto;
	max-width: 4.5rem;
	aspect-ratio: 3 / 1;
	object-fit: contain;
	contain: size layout;
}

/*
 * Amazon Pay express banner: neutral colors + reserved button box so the
 * async Amazon SDK does not push cart/checkout content down (mobile CLS).
 * WoodMart paints .woocommerce-info as amber — that must stay for PPWR only.
 */
body.woocommerce-checkout .woocommerce-info.wc-amazon-payments-advanced-info,
body.woocommerce-cart .woocommerce-info.wc-amazon-payments-advanced-info {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	box-sizing: border-box;
	min-height: 4.5rem;
	background: #f0f2f5 !important;
	border-color: #d0d5dd !important;
	color: #1d2939 !important;
}

body.woocommerce-checkout .woocommerce-info.wc-amazon-payments-advanced-info::before,
body.woocommerce-cart .woocommerce-info.wc-amazon-payments-advanced-info::before {
	color: #667085 !important;
}

body.woocommerce-checkout .woocommerce-info.wc-amazon-payments-advanced-info a,
body.woocommerce-cart .woocommerce-info.wc-amazon-payments-advanced-info a {
	color: #1d2939 !important;
}

body.woocommerce-checkout .woocommerce-info.wc-amazon-payments-advanced-info #pay_with_amazon,
body.woocommerce-cart .woocommerce-info.wc-amazon-payments-advanced-info #pay_with_amazon {
	float: none;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 150px;
	min-height: 45px;
	contain: layout;
	background: linear-gradient(180deg, #fafbfc 0%, #eef1f5 100%);
	border-radius: 4px;
}

@media (max-width: 768px) {
	body.woocommerce-checkout .woocommerce-info.wc-amazon-payments-advanced-info,
	body.woocommerce-cart .woocommerce-info.wc-amazon-payments-advanced-info {
		flex-wrap: wrap;
		min-height: 5.5rem;
	}

	body.woocommerce-checkout .woocommerce-info.wc-amazon-payments-advanced-info #pay_with_amazon,
	body.woocommerce-cart .woocommerce-info.wc-amazon-payments-advanced-info #pay_with_amazon {
		min-width: 100%;
	}
}

/*
 * Gutenberg Buttons in CMS content (Shop Intro, etc.).
 * WoodMart keeps default block CSS off (cart loads WC block CSS only).
 * Without these rules, wp-block-button__link color classes render as plain links.
 */
.wp-block-button .wp-block-button__link {
	display: inline-block;
	box-sizing: border-box;
	padding: 0.7em 1.25em;
	border: none;
	border-radius: 9999px;
	text-decoration: none;
	line-height: 1.25;
	font-weight: 600;
	cursor: pointer;
}

.wp-block-button .wp-block-button__link.has-white-color {
	color: #fff;
}

.wp-block-button .wp-block-button__link.has-vivid-green-cyan-background-color,
.wp-block-button .wp-block-button__link.has-vivid-green-cyan-background-color:hover,
.wp-block-button .wp-block-button__link.has-vivid-green-cyan-background-color:focus,
.wp-block-button .wp-block-button__link.has-vivid-green-cyan-background-color:visited {
	background-color: #00d084;
	color: #fff;
}

.wp-block-button .wp-block-button__link.has-vivid-green-cyan-background-color:hover,
.wp-block-button .wp-block-button__link.has-vivid-green-cyan-background-color:focus {
	background-color: #00b873;
}

/*
 * Footer: 4-column grid (Theme Settings HTML) + copyrights payment icons.
 * Homogeneous seal sizing; DIMDI overlay kept via .vs-footer-dimdi.
 * Higher specificity + !important: WoodMart footer CSS otherwise leaves the
 * grid as display:block (one column) when rules are missing or overridden.
 */
.wd-footer.footer-container,
footer.wd-footer {
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	padding-top: 2.5rem;
	margin-top: 2.5rem;
}

/*
 * Footer language strip (above .vs-footer-grid) — second switcher so users
 * need not scroll to the header. Injected by Footer_Language (Child 0.1.34+).
 */
.vs-prefooter-lang {
	display: flex;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 1.5rem;
	padding: 0 0 1.15rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.vs-prefooter-lang .phoenix-lang-switcher {
	width: 100%;
}

.vs-prefooter-lang .phoenix-lang-switcher__list {
	justify-content: center;
	gap: 0.55rem 1rem;
}

.vs-prefooter-lang .phoenix-lang-switcher__link {
	font-size: 0.8125rem;
}

.vs-prefooter-lang .phoenix-lang-switcher__flag {
	width: 18px;
	height: 12px;
}

.wd-footer .vs-footer-grid,
.main-footer .vs-footer-grid,
.vs-footer-grid {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 2rem 1.5rem;
	align-items: start;
	width: 100%;
	box-sizing: border-box;
}

.vs-footer-col {
	min-width: 0;
}

.vs-footer-address {
	font-style: normal;
	line-height: 1.5;
	margin: 0 0 1rem;
}

.vs-footer-social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

.vs-footer-social a {
	display: inline-flex;
	line-height: 0;
}

.vs-footer-social img {
	width: 32px;
	height: 32px;
	object-fit: contain;
}

.vs-footer-links {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
}

.vs-footer-links li {
	margin: 0 0 0.35rem;
	padding: 0;
}

.vs-footer-links__rule {
	height: 0;
	margin: 0.65rem 0 !important;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.vs-footer-withdrawal,
.wd-footer a.german-market-withdrawal-button.vs-footer-withdrawal,
.main-footer a.german-market-withdrawal-button.vs-footer-withdrawal {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin-top: 0.25rem;
	line-height: 1.2 !important;
	padding: 0.65em 1.25em !important;
	box-sizing: border-box;
	vertical-align: middle;
}

.vs-footer-seals {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	text-align: center;
}

.vs-footer-seals__title {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.2;
	width: 100%;
	text-align: center;
}

.vs-footer-climate {
	display: inline-flex;
	line-height: 0;
	margin-bottom: 0.75rem;
}

.vs-footer-seal--fairness,
.vs-footer-seals .vs-footer-seal--fairness {
	margin-top: 0.75rem;
}

.vs-footer-seal,
.vs-footer-seals > a > img,
.vs-footer-seals > img.vs-footer-seal {
	display: block;
	max-width: 112px;
	width: auto;
	height: auto;
	max-height: 102px;
	object-fit: contain;
	margin-inline: auto;
}

/*
 * Carrier 2x2. WP/theme often injects <br> between imgs — hide those so
 * they do not become extra grid cells (looked like a left 1x4 stack).
 */
.wd-footer .vs-footer-carriers,
.main-footer .vs-footer-carriers,
.vs-footer-carriers {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 0.65rem 0.85rem;
	align-items: center;
	justify-items: center;
	justify-content: center;
	width: 100%;
	max-width: 15rem;
	margin: 0.35rem auto 0;
	text-align: center;
}

.vs-footer-carriers > br,
.vs-footer-carriers br {
	display: none !important;
}

.vs-footer-carriers__item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 0;
	padding: 0;
	line-height: 0;
}

.vs-footer-carriers img,
.vs-footer-carriers__item img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 2.75rem;
	object-fit: contain;
	margin: 0 auto;
}

.vs-footer-dimdi {
	display: inline-block;
	line-height: 0;
}

.vs-footer-dimdi__wrap {
	position: relative;
	display: inline-block;
}

.vs-footer-dimdi__wrap > img {
	display: block;
	max-width: 112px;
	width: 112px;
	height: auto;
	max-height: none;
}

.vs-footer-dimdi__gif {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	width: 112px;
}

/* Hide WoodMart default payments sprite when custom icons are used. */
.wd-copyrights img[src*="payments.png"] {
	display: none !important;
}

/*
 * Copyrights: stack text + payment icons, full footer width, centered,
 * so ~30 icons fit in 1–2 rows instead of a narrow 3-row column.
 */
.wd-copyrights .container.wd-grid-g {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	width: 100%;
}

.wd-copyrights .wd-col-start,
.wd-copyrights .wd-col-end {
	width: 100%;
	max-width: none;
	text-align: center;
	float: none;
}

.vs-footer-payments {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.3rem 0.4rem;
	width: 100%;
	max-width: none;
	margin-inline: auto;
}

.vs-footer-payments img {
	display: block;
	height: 22px;
	width: auto;
	max-width: 40px;
	object-fit: contain;
}

.wd-copyrights.wd-layout-centered .container,
.wd-copyrights .container.wd-grid-g {
	align-items: center;
}

@media (max-width: 1023px) {
	.wd-footer .vs-footer-grid,
	.main-footer .vs-footer-grid,
	.vs-footer-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 575px) {
	.wd-footer .vs-footer-grid,
	.main-footer .vs-footer-grid,
	.vs-footer-grid {
		grid-template-columns: 1fr !important;
	}

	.vs-footer-carriers {
		max-width: 16rem;
	}

	.vs-footer-payments img {
		height: 20px;
		max-width: 36px;
	}
}

/*
 * Checkout: coupon sits between order total and legal consent (GM checkbox).
 * Legal link labels (AGB / privacy / withdrawal) — underline in every language.
 */
body.woocommerce-checkout .vs-checkout-coupon {
	margin: 1rem 0 1.25rem;
}

body.woocommerce-checkout .vs-checkout-coupon .woocommerce-info {
	margin-bottom: 0.75rem;
}

body.woocommerce-checkout .vs-checkout-coupon__form {
	margin: 0 0 0.5rem;
}

body.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text a.wgm-terms,
body.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text a.wgm-privacy,
body.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text a.wgm-widerruf {
	text-decoration: underline;
	text-underline-offset: 0.12em;
}

/*
 * Out of stock: informative muted red (not alarming Pharmacy #cc0000).
 * Loop “Aktuell nicht verfügbar” + PDP availability + checkout notice.
 */
:root {
	--vs-oos-bg: #f7eceb;
	--vs-oos-border: #d4a09a;
	--vs-oos-text: #8f4a44;
	--vs-oos-btn: #b65c55;
	--vs-oos-btn-hover: #9e4f49;
}

.products a.button.product_type_simple:not(.add_to_cart_button),
.wd-products a.button.product_type_simple:not(.add_to_cart_button),
.wd-product a.button.product_type_simple:not(.add_to_cart_button) {
	background-color: var(--vs-oos-btn) !important;
	border-color: var(--vs-oos-btn) !important;
	color: #fff !important;
}

.products a.button.product_type_simple:not(.add_to_cart_button):hover,
.wd-products a.button.product_type_simple:not(.add_to_cart_button):hover,
.wd-product a.button.product_type_simple:not(.add_to_cart_button):hover {
	background-color: var(--vs-oos-btn-hover) !important;
	border-color: var(--vs-oos-btn-hover) !important;
	color: #fff !important;
}

/*
 * Shop loop ATC on mobile/tablet (≤1024).
 * WoodMart Base+fade puts ATC inside .wd-product-card-hover (hidden until hover
 * or .state-hover). With base_hover_mobile_click=yes, state-hover is never set
 * on touch → buttons invisible. Mirror .wd-fade-off below that breakpoint only.
 */
@media (max-width: 1024px) {
	.wd-product.wd-hover-with-fade .wd-product-card-bg,
	.wd-product.wd-hover-with-fade .hover-content {
		display: none !important;
	}

	.wd-product.wd-hover-with-fade .product-element-bottom {
		position: static;
	}

	.wd-product.wd-hover-with-fade .wd-product-card-hover {
		position: static;
		display: flex;
		flex-direction: column;
		gap: 0;
		margin-top: 0;
		padding: 0 10px var(--wd-prod-gap, 12px) !important;
		border: none;
		opacity: 1 !important;
		visibility: visible !important;
	}

	.wd-product.wd-hover-with-fade .wd-product-wrapper {
		transform: none !important;
	}

	/*
	 * Icon ATC before WoodMart productHover.js mutates classes (it only runs on
	 * mouseenter/mousemove → flash text→icon while scrolling). Same glyph as
	 * .wd-add-cart-icon; loop-atc-icon.js then applies wd-add-small-btn markup.
	 * Scoped to .add_to_cart_button so OOS “Aktuell nicht verfügbar” stays text.
	 */
	.wd-products .wd-product .wd-bottom-actions .wd-add-btn.wd-add-btn-replace:has(> a.add_to_cart_button) {
		flex: 1 0 0;
	}

	.wd-products .wd-product .wd-bottom-actions .wd-add-btn-replace > a.add_to_cart_button {
		--wd-btn-icon: "\f123";
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: 35px;
		padding: 0 !important;
		overflow: hidden;
		background-color: transparent !important;
		box-shadow: none !important;
		color: inherit !important;
		text-transform: none !important;
		font-weight: inherit !important;
	}

	.wd-products .wd-product .wd-bottom-actions .wd-add-btn-replace > a.add_to_cart_button .wd-action-text,
	.wd-products .wd-product .wd-bottom-actions .wd-add-btn-replace > a.add_to_cart_button > span:not(.wd-action-icon) {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		padding: 0 !important;
		margin: -1px !important;
		overflow: hidden !important;
		clip: rect(0, 0, 0, 0) !important;
		white-space: nowrap !important;
		border: 0 !important;
	}

	.wd-products .wd-product .wd-bottom-actions .wd-add-btn-replace > a.add_to_cart_button::before {
		content: var(--wd-btn-icon, "\f123") !important;
		position: absolute;
		inset: 0;
		display: flex !important;
		align-items: center;
		justify-content: center;
		font-family: "woodmart-font", sans-serif;
		font-size: 20px;
		font-weight: 400;
		transform: none !important;
		opacity: 1 !important;
	}

	.wd-products .wd-product .wd-bottom-actions .wd-add-btn-replace > a.add_to_cart_button.added {
		--wd-btn-icon: "\f107";
	}
}

p.stock.out-of-stock,
.woocommerce-variation-availability p.stock.out-of-stock,
.single-product p.stock.out-of-stock {
	color: var(--vs-oos-text);
	background: var(--vs-oos-bg);
	border: 1px solid var(--vs-oos-border);
	border-radius: 4px;
	padding: 0.55em 0.75em;
	display: inline-block;
}

body.woocommerce-checkout .vs-checkout-oos-notice {
	margin: 0 0 1rem;
	padding: 0.85rem 1rem;
	background: var(--vs-oos-bg);
	border: 1px solid var(--vs-oos-border);
	border-radius: 4px;
	color: var(--vs-oos-text);
}

body.woocommerce-checkout .vs-checkout-oos-notice__intro {
	margin: 0 0 0.4rem;
	font-weight: 600;
}

body.woocommerce-checkout .vs-checkout-oos-notice__list {
	margin: 0;
	padding-left: 1.2rem;
}

/*
 * Cart block + checkout review: reserve space before late CSS / update_checkout
 * fragments (mobile CLS / wobble).
 */
body.woocommerce-cart .wp-block-woocommerce-cart,
body.woocommerce-cart .wc-block-cart {
	min-height: 12rem;
}

body.woocommerce-cart .wc-block-cart-items__row,
body.woocommerce-cart .wc-block-cart-items .wc-block-cart-items__row {
	min-height: 5.5rem;
}

body.woocommerce-cart .wp-block-woocommerce-cart-order-summary-block,
body.woocommerce-cart .wc-block-components-totals-wrapper {
	min-height: 8rem;
}

body.woocommerce-checkout #order_review {
	min-height: 14rem;
}

body.woocommerce-checkout #payment {
	min-height: 10rem;
	contain: layout;
}

body.woocommerce-checkout .vs-checkout-oos-notice {
	min-height: 3.25rem;
	box-sizing: border-box;
}

body.woocommerce-checkout .vs-checkout-coupon__form {
	min-height: 0;
}

body.woocommerce-checkout .vs-checkout-coupon__form[aria-hidden="false"] {
	min-height: 3.25rem;
}

/*
 * Delivery regions (Option A) — shop intro only.
 * Light overview row; not a language switcher and not the Live dark flag bar.
 */
.vs-delivery-regions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.65rem 1.15rem;
	margin: 1rem 0 1.25rem;
	padding: 0.85rem 1.1rem;
	background: #f5f7f8;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 4px;
	box-sizing: border-box;
}

.vs-delivery-regions__label {
	margin: 0;
	font-weight: 600;
	line-height: 1.35;
	color: #243447;
}

.vs-delivery-regions__more {
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 0.15em;
	white-space: nowrap;
}

.vs-delivery-regions__flags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem;
}

.vs-delivery-regions__flag {
	display: inline-flex;
	line-height: 0;
	border-radius: 2px;
	overflow: hidden;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
	transition: opacity 0.15s ease;
}

a.vs-delivery-regions__flag:hover,
a.vs-delivery-regions__flag:focus {
	opacity: 0.85;
}

.vs-delivery-regions__flag img {
	display: block;
	width: 36px;
	height: auto;
}