/*
Theme Name: Salient Child Theme
Description: This is a custom child theme for Salient
Theme URI:   https://themeforest.net/item/salient-responsive-multipurpose-theme/4363266
Author: ThemeNectar
Author URI:  https://themeforest.net/user/themenectar
Template: salient
Version: 1.0
*/

/* Highlight the active product category + its parent (bold, larger, #ea5f27) in the shop sidebar filter.
   Scoped with #sidebar to beat Salient's high-specificity ".material .widget li a" rule (14px !important). */
body #sidebar .widget_product_categories ul.product-categories li.current-cat > a,
body #sidebar .widget_product_categories ul.product-categories li.current-cat-parent > a,
body #sidebar .widget_product_categories ul.product-categories li.current-cat-ancestor > a {
	color: #ea5f27 !important;
	font-weight: 700 !important;
	background-color: #ebebeb !important;
	display: block !important;
	box-sizing: border-box !important;
	padding: 4px 10px !important;
	border-radius: 4px !important;
}

/* Mega-menu global sections (all except Footer): give the right-side category buttons a
   shared background image at 20% opacity instead of the solid orange overlay (#F54002 @ 0.3).
   The .column-bg-overlay is Salient's dedicated background layer, so opacity here only affects
   the image, not the button text. */
.nectar-global-section-megamenu .column-bg-overlay {
	background-image: url('https://competent-hamilton.85-215-114-100.plesk.page/wp-content/uploads/2026/06/6322400-1-scaled.jpg') !important;
	background-color: transparent !important;
	background-size: cover !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	opacity: 0.2 !important;
}

/* Mega-menu global sections (all except Footer): button text 14px, bold, uppercase. */
.nectar-global-section-megamenu .child_column .wpb_text_column,
.nectar-global-section-megamenu .child_column .wpb_text_column p,
.nectar-global-section-megamenu .child_column .wpb_text_column a,
.nectar-global-section-megamenu .child_column .wpb_text_column span {
	font-size: 14px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
}

/* Main menu: lay the 12 top-level items out in 2 centered rows (6 per row) instead of one line.
   Targets the desktop main nav by its aria-label inside #top .span_9 (works regardless of the
   header data-format, and excludes the mobile off-canvas menu + right-side utility nav).
   Top-level <li> only (> li), so sub-menus keep their normal float/absolute behaviour. */
#top .span_9 nav:not(.left-side):not(.right-side) {
	display: block !important;
	width: 100% !important;
}
#top .span_9 nav:not(.left-side):not(.right-side) > ul.sf-menu {
	display: grid !important;
	grid-template-columns: repeat(6, auto) !important;  /* 6 content-sized columns => 2 rows of 6 */
	justify-content: center !important;                  /* centre the whole block (tight cluster) */
	align-items: center !important;
	column-gap: 22px !important;                          /* even, controlled spacing between items */
	row-gap: 8px !important;                              /* sole vertical gap between the 2 rows (li margins zeroed below) */
	width: 100% !important;
	line-height: normal !important;
}
#top .span_9 nav:not(.left-side):not(.right-side) > ul.sf-menu > li {
	float: none !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: center !important;
}
#top .span_9 nav:not(.left-side):not(.right-side) > ul.sf-menu > li > a {
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 5px !important;
	white-space: nowrap !important;     /* never wrap a label onto 2 lines */
	font-size: 16px !important;         /* larger than the old 14px; columns size to content so it fits */
	letter-spacing: 0 !important;
	padding: 4px 6px !important;
	line-height: 1.2 !important;
	/* Salient gives nav links a 32px bottom margin which inflated each grid row
	   to 63px and forced the two rows ~36px apart. Zero it so the rows sit close
	   together and the grid row-gap above is the only vertical spacing. */
	margin: 0 !important;
}
#top .span_9 nav:not(.left-side):not(.right-side) > ul.sf-menu > li > a > .menu-title-text {
	white-space: nowrap !important;
}
/* Chevron always sits to the RIGHT of the name (it precedes the name in the
   markup, so reorder it visually). */
#top .span_9 nav:not(.left-side):not(.right-side) > ul.sf-menu > li.megamenu > a > .menu-title-text {
	order: 1 !important;
}
#top .span_9 nav:not(.left-side):not(.right-side) > ul.sf-menu > li.megamenu > a > i.nectar-menu-icon {
	order: 2 !important;
	float: none !important;
}

/* Desktop only: 5px of breathing room under the menu bar (below the last nav row).
   Scoped >= 1000px so it never affects the mobile off-canvas menu (Salient swaps
   to the burger nav below 1000px). */
@media only screen and (min-width: 1000px) {
	#top .span_9 nav:not(.left-side):not(.right-side) > ul.sf-menu {
		padding-bottom: 5px !important;
	}
}

/* ===== Click-to-open mega-menu (driven by megamenu-row-fix.js) =================
   Panels open when the chevron icon is clicked, not on hover, so there is no
   row-to-row hover gap. The item name still navigates as a normal link. */

/* The chevron is the toggle: clear hit target, separated from the word. */
#top .span_9 nav:not(.left-side):not(.right-side) > ul.sf-menu > li.megamenu > a > i.nectar-menu-icon {
	cursor: pointer !important;
	pointer-events: auto !important;
	padding: 2px 5px !important;
	margin-left: 3px !important;
	transition: transform 0.2s ease !important;
}
/* Rotate the chevron while its panel is open. */
#top .span_9 nav:not(.left-side):not(.right-side) > ul.sf-menu > li.megamenu.mmrf-open > a > i.nectar-menu-icon {
	transform: rotate(180deg) !important;
}

/* Suppress the theme's hover/superfish reveal unless the item is click-opened. */
#top .span_9 nav:not(.left-side):not(.right-side) > ul.sf-menu > li.megamenu:not(.mmrf-open):hover > .nectar-global-section-megamenu,
#top .span_9 nav:not(.left-side):not(.right-side) > ul.sf-menu > li.megamenu:not(.mmrf-open).sfHover > .nectar-global-section-megamenu {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/* Open state: show the panel and make it (and its contents) interactive,
   independent of hover. */
#top .span_9 nav:not(.left-side):not(.right-side) > ul.sf-menu > li.megamenu.mmrf-open > .nectar-global-section-megamenu {
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
}
#top .span_9 nav:not(.left-side):not(.right-side) > ul.sf-menu > li.megamenu.mmrf-open > .nectar-global-section-megamenu > .inner {
	opacity: 1 !important;
	transform: none !important;
}
#top .span_9 nav:not(.left-side):not(.right-side) > ul.sf-menu > li.megamenu.mmrf-open .nectar-global-section-megamenu * {
	pointer-events: auto !important;
}

/* ===== Language selector (GTranslate flags) in the right-side header nav ===== */
#top .gt-lang-item {
	display: flex !important;
	align-items: center !important;
	float: none !important;
}
/* lay the flags out in a tidy row next to each other */
#top .gt-lang-item .gtranslate_wrapper {
	display: inline-flex !important;
	align-items: center !important;
	gap: 7px !important;
	margin: 0 !important;
	line-height: 0 !important;
}
#top .gt-lang-item .gtranslate_wrapper a,
#top .gt-lang-item .gtranslate_wrapper span {
	display: inline-flex !important;
	align-items: center !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 0 !important;
	box-shadow: none !important;
}
#top .gt-lang-item .gtranslate_wrapper a,
#top .gt-lang-item .gtranslate_wrapper .gflag {
	overflow: hidden !important;
	border-radius: 5px !important;
}
#top .gt-lang-item .gtranslate_wrapper img,
#top .gt-lang-item .gtranslate_wrapper .gflag {
	width: 22px !important;
	height: 22px !important;
	margin: 0 !important;
	border-radius: 5px !important;
	box-shadow: none !important;
	opacity: 0.85 !important;
	transition: opacity 0.15s ease !important;
}
#top .gt-lang-item .gtranslate_wrapper a:hover img,
#top .gt-lang-item .gtranslate_wrapper a:hover .gflag {
	opacity: 1 !important;
}
/* The 4 flags stay on one row on mobile too — they now have a full-width row of
   their own below the logo, so the old 2x2 grid (which existed only because the
   icons were crammed into an overlay on top of the logo) is no longer needed.
   See "Mobile header — icon row below the logo" at the end of this file. */

/* Mobile: show the home-page "Shop Now" (Jetzt Einkaufen → /shop) button immediately,
   with no entrance animation. Its column has Salient's fade-in-from-bottom animation
   (opacity:0 + translateY(75px) until JS reveals it); on mobile that reveal can lag.
   :has() targets exactly the column that contains the Shop button. */
@media (max-width: 690px) {
	.wpb_column.has-animation:has(a.nectar-button[href="/shop"]),
	.wpb_column.has-animation:has(a.nectar-button[href="/shop"]) .column-inner {
		opacity: 1 !important;
		transform: none !important;
		-webkit-transform: none !important;
		transition: none !important;
		animation: none !important;
	}
}

/* ============================================================================
   EMBELLISH WOO PRODUCT INFO — single-product tabs as buttons + red headers
   (2026-06-12). Brand colour #F54002.
   Notes on the cascade (verified w/ headless Chrome):
   - `.woocommerce` is on <body> (ANCESTOR of #ajax-content-wrap) — never prefix a
     selector with `#ajax-content-wrap .woocommerce …`, it can't match.
   - salient-dynamic-styles.css (theme options) sets tab font-size:14px!important and
     padding:0!important at specificity (0,6,4); use the #ajax-content-wrap ID so our
     !important rules win the tie.
   ========================================================================== */

/* --- Gap above the tab row (default 40px block + 70px ul ≈ 110px) --- */
body.single-product .woocommerce-tabs[data-tab-style=fullwidth] {
	margin-top: 10px !important;
}

/* --- Tab row: centred flex of pill buttons --- */
#ajax-content-wrap .woocommerce-tabs .full-width-content[data-tab-style*=fullwidth] ul.tabs {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	gap: 12px !important;
	margin: 18px 0 34px 0 !important;
	padding: 0 !important;
}
body.single-product.mobile .woocommerce-tabs .full-width-content[data-tab-style*=fullwidth] ul.tabs {
	margin: 14px 0 24px 0 !important;
}
#ajax-content-wrap .woocommerce-tabs .full-width-content[data-tab-style*=fullwidth] ul.tabs li {
	background: transparent !important;
	border: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}
/* The button itself */
#ajax-content-wrap .woocommerce-tabs .full-width-content[data-tab-style*=fullwidth] ul.tabs li a {
	display: inline-block !important;
	font-size: 17px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	color: #F54002 !important;
	background: #fff !important;
	border: 2px solid #F54002 !important;
	border-radius: 8px !important;
	padding: 11px 28px !important;
	margin: 0 !important;
	transition: background-color .15s ease, color .15s ease, box-shadow .15s ease !important;
}
/* Hover + active (selected) tab = filled brand colour */
#ajax-content-wrap .woocommerce-tabs .full-width-content[data-tab-style*=fullwidth] ul.tabs li a:hover,
#ajax-content-wrap .woocommerce-tabs .full-width-content[data-tab-style*=fullwidth] ul.tabs li.active a {
	color: #fff !important;
	background: #F54002 !important;
	box-shadow: 0 4px 12px rgba(245,64,2,.28) !important;
}
/* Kill Salient's animated underline + active-li background tint */
#ajax-content-wrap .woocommerce-tabs .full-width-content[data-tab-style*=fullwidth] ul.tabs li a:after {
	display: none !important;
}
#ajax-content-wrap .woocommerce-tabs .full-width-content[data-tab-style*=fullwidth] ul.tabs li.active {
	background: transparent !important;
}

/* --- Content lead-in headers in brand red + bold (Agua de Florida:, Ingredients:,
   Warn- und Sicherheitshinweise, Angaben zum Verantwortlichen…) --- */
#ajax-content-wrap .woocommerce-tabs .panel#tab-description p > strong,
#ajax-content-wrap .woocommerce-tabs .panel#tab-description h2,
#ajax-content-wrap .woocommerce-tabs .panel#tab-description h3,
#ajax-content-wrap .woocommerce-tabs .panel#tab-description h4 {
	color: #F54002 !important;
	font-weight: 700 !important;
}

/* Standalone heading paragraphs (only a <strong> inside). Salient gives them a 27px
   padding-bottom, which is right ABOVE a list-label's gap but too tight/loose elsewhere.
   - heading that labels a list (e.g. "Warn- und Sicherheitshinweise" + <ul>): hug the
     list so its gap matches the inline titles (Ingredients:, Angaben… ≈ 4px).
   - heading that introduces a paragraph (the intro title, e.g. "Raumduft für
     schamanische Rituale" + <p>): keep clear space after the title. */
#ajax-content-wrap .woocommerce-tabs .panel#tab-description p:has(> strong:only-child):has(+ ul) {
	padding-bottom: 0 !important;
}
#ajax-content-wrap .woocommerce-tabs .panel#tab-description p:has(> strong:only-child):has(+ p) {
	padding-bottom: 18px !important;
}

/* Checkout order-review summary (#order_review): the grey box (#eee) rendered its
   text — line item plus the Zwischensumme / Sendung / Gesamtsumme / MwSt. rows and
   their amounts — flush against both edges. Inset the content so it has left/right
   breathing room. Salient template: .woocommerce-checkout-review-order-table holds a
   .product-container (line items) + table.order-review (th=label / td=amount). */
#order_review .woocommerce-checkout-review-order-table .product-container {
	padding-left: 24px !important;
	padding-right: 24px !important;
}
#order_review .woocommerce-checkout-review-order-table table.order-review th {
	padding-left: 24px !important;
}
#order_review .woocommerce-checkout-review-order-table table.order-review td {
	padding-right: 24px !important;
}

/* ===================== Checkout: harmonise font sizes =====================
   The page was a mashup of 26 / 22 / 18 / 16 / 14px (the same amount even showed
   at 14px in a line item but 16px in the subtotal). Collapse to a clean scale:
   section headings 20px, all form + order-summary body text 15px. The legal
   consent sentence is the deliberate exception below (made prominent).
   #ajax-content-wrap prefix = specificity to beat Salient's !important rules
   (.woocommerce-checkout lives on <body>, so it can't be used as an ancestor). */

/* Section headings: Rechnungsdaten / Zahlungsart auswählen / Ihre Bestellung */
#ajax-content-wrap form.checkout h3,
#ajax-content-wrap #order_payment_heading,
#ajax-content-wrap #order_review_heading {
	font-size: 20px !important;
	line-height: 1.3 !important;
	font-weight: 600 !important;
}
/* space above "Ihre Bestellung" so it isn't stuck under the PayPal line */
#ajax-content-wrap #order_review_heading {
	margin-top: 34px !important;
	padding-top: 0 !important;
}

/* Form fields, labels, selects, the Stripe "— ODER —" divider */
#ajax-content-wrap form.checkout .form-row label,
#ajax-content-wrap form.checkout label.woocommerce-form__label,
#ajax-content-wrap form.checkout input.input-text,
#ajax-content-wrap form.checkout select,
#ajax-content-wrap form.checkout textarea,
#ajax-content-wrap form.checkout .select2-selection__rendered,
#ajax-content-wrap #wc-stripe-express-checkout-button-separator {
	font-size: 15px !important;
}

/* Order summary: line item, quantity, totals labels + amounts — one size */
#ajax-content-wrap #order_review .woocommerce-checkout-review-order-table,
#ajax-content-wrap #order_review .product-info,
#ajax-content-wrap #order_review .product-quantity,
#ajax-content-wrap #order_review .product-container .product-total,
#ajax-content-wrap #order_review table.order-review th,
#ajax-content-wrap #order_review table.order-review td {
	font-size: 15px !important;
}
/* product name in the summary was 22px — distinguish by weight, not size */
#ajax-content-wrap #order_review .product-info a,
#ajax-content-wrap #order_review .cart_item a {
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
}
/* every monetary amount in the summary at the same size (the line-item and
   shipping amounts carried their own 14px on the inner .woocommerce-Price-amount) */
#ajax-content-wrap #order_review .woocommerce-Price-amount,
#ajax-content-wrap #order_review .woocommerce-Price-amount bdi,
#ajax-content-wrap #order_review .woocommerce-Price-currencySymbol,
#ajax-content-wrap #order_review .includes_tax,
#ajax-content-wrap #order_review .wc-gzd-shipping-tax-info {
	font-size: 15px !important;
}
/* payment-method radio labels (Kredit-/Debitkarte, PayPal, Klarna …) */
#ajax-content-wrap form.checkout ul.payment_methods label,
#ajax-content-wrap form.checkout .wc_payment_methods label {
	font-size: 15px !important;
}

/* ---- Prominent legal consent (Terms & Conditions / Cancellation Policy) ----
   Pulled into a highlighted callout box with the brand accent so customers
   clearly see and read it before ordering. */
#ajax-content-wrap #order_review p.legal.checkbox-legal {
	background: #fff4ef !important;
	border: none !important;
	border-radius: 6px !important;
	padding: 14px 16px !important;
	margin: 0 0 20px !important;
}
#ajax-content-wrap #order_review .woocommerce-gzd-legal-checkbox-text {
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1.5 !important;
	color: #1a1a1a !important;
}
#ajax-content-wrap #order_review .woocommerce-gzd-legal-checkbox-text a {
	font-weight: 700 !important;
	text-decoration: underline !important;
}

/* ---- Order summary box: one uniform grey, no divider lines ----
   The line-item area carried a rgba(0,0,0,.02) overlay (a 2nd, darker grey) and
   the totals table had top+bottom 1px rgba(0,0,0,.1) borders (the two darker
   horizontal lines between the items↔Zwischensumme and under the totals). */
#ajax-content-wrap #order_review .woocommerce-checkout-review-order-table .product-container {
	background: transparent !important;
}
#ajax-content-wrap #order_review .woocommerce-checkout-review-order-table table.order-review {
	border-top: none !important;
	border-bottom: none !important;
}

/* ---- Coupon ("Gutscheincode eingeben"): compact button, not the red info banner.
   Relocated above "Ihre Bestellung" by checkout-tweaks.js. ---- */
#ajax-content-wrap .woocommerce-form-coupon-toggle {
	margin: 16px 0 !important;
}
#ajax-content-wrap .woocommerce-form-coupon-toggle .woocommerce-info {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	min-height: 0 !important;
	font-size: 0 !important;          /* swallow any leftover prefix text node */
	line-height: 1 !important;
	color: inherit !important;
}
#ajax-content-wrap .woocommerce-form-coupon-toggle .woocommerce-info::before {
	display: none !important;          /* drop the info icon */
}
#ajax-content-wrap .woocommerce-form-coupon-toggle a.showcoupon {
	display: inline-block !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #1f7a34 !important;
	background: #e4f3e6 !important;
	border: 1px solid #a8d5ab !important;
	border-radius: 5px !important;
	padding: 11px 16px !important;
	line-height: 1.2 !important;
	text-decoration: none !important;
}
#ajax-content-wrap .woocommerce-form-coupon-toggle a.showcoupon:hover {
	background: #d4ecd7 !important;
	border-color: #8cc591 !important;
}

/* ---- "Jetzt kaufen" order button: brand red, right-aligned ---- */
#ajax-content-wrap #order_review .form-row.place-order {
	text-align: right !important;
}
#ajax-content-wrap #order_review #place_order,
#ajax-content-wrap #order_review button#place_order.button.alt {
	background: #F54003 !important;
	background-color: #F54003 !important;
	border-color: #F54003 !important;
	color: #fff !important;
}
#ajax-content-wrap #order_review #place_order:hover {
	background: #d8380a !important;
	background-color: #d8380a !important;
	border-color: #d8380a !important;
	color: #fff !important;
}

/* ============================================================================
   MOBILE OFF-CANVAS SUB-MENUS (2026-07-06)
   Show each top-level item's 2nd-level links (the desktop mega-menu contents)
   as a tap-to-expand sub-menu in the mobile off-canvas menu. Built by
   mobile-submenu.js, which clones the desktop global-section panels. Everything
   here is scoped to .off-canvas-menu-container.mobile-only so it never touches
   the desktop header nav.
   ========================================================================== */

/* Left-justify the whole mobile menu (Salient centres it by default). */
#slide-out-widget-area .off-canvas-menu-container.mobile-only,
#slide-out-widget-area .off-canvas-menu-container.mobile-only .menu,
#slide-out-widget-area .off-canvas-menu-container.mobile-only .menu > li,
#slide-out-widget-area .off-canvas-menu-container.mobile-only .menu > li > a {
	text-align: left !important;
}
/* Pull the menu hard to the left and reclaim width so sub-item buttons can sit
   several per line (Salient pads the container 39px each side + centres it). */
#slide-out-widget-area .off-canvas-menu-container.mobile-only {
	padding-left: 16px !important;
	padding-right: 10px !important;
}
#slide-out-widget-area .off-canvas-menu-container.mobile-only .menu {
	padding-left: 0;
	padding-right: 0;
}
/* The label text sits in a centring flex by default — align it to the start. */
#slide-out-widget-area .off-canvas-menu-container.mobile-only .menu > li > a {
	justify-content: flex-start !important;
}

/* Make room on the right of an expandable item for the toggle tap target. */
.off-canvas-menu-container.mobile-only li.mtm-has-children {
	position: relative;
}

/* Hide the decorative in-link chevron on expandable items — the dedicated
   toggle (below) replaces it so tapping the label navigates, chevron expands. */
.off-canvas-menu-container.mobile-only li.mtm-has-children > a .nectar-menu-icon {
	display: none !important;
}

/* Section-title treatment for expandable items: bold uppercase heading with a
   full-width underline rule, so each category clearly reads as the title of the
   button group beneath it (distinct from both the plain links and the sub-buttons).
   ID prefix needed so the font rules beat Salient's ID-scoped !important. */
#slide-out-widget-area .off-canvas-menu-container.mobile-only li.mtm-has-children {
	margin-top: 20px !important;
}
#slide-out-widget-area .off-canvas-menu-container.mobile-only li.mtm-has-children > a {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 30px !important;
	opacity: 1 !important;
}
/* Slight breathing room under the title once its buttons are showing. */
#slide-out-widget-area .off-canvas-menu-container.mobile-only li.mtm-has-children.mtm-open > a {
	padding-bottom: 8px !important;
}
#slide-out-widget-area .off-canvas-menu-container.mobile-only li.mtm-has-children > a .menu-title-text {
	font-size: 20px !important;
	font-weight: 800 !important;
	letter-spacing: 0.6px !important;
	text-transform: uppercase !important;
	color: #fff !important;
	opacity: 1 !important;
}

/* Plain (non-expandable) top-level items — Traumfänger, Angebote, Neue Artikel,
   Wissen & Tradition, Alpakas in Not — get the same bold uppercase title look as
   the category headings (no sub-buttons, so no toggle circle). Their label sits
   directly in the <a> (no .menu-title-text span), so style the <a> itself. */
#slide-out-widget-area .off-canvas-menu-container.mobile-only .menu > li:not(.mtm-has-children):not(.gt-lang-item) {
	margin-top: 20px !important;
}
#slide-out-widget-area .off-canvas-menu-container.mobile-only .menu > li:not(.mtm-has-children):not(.gt-lang-item) > a {
	display: block !important;
	text-align: left !important;
	justify-content: flex-start !important;
	padding: 0 !important;
	margin: 0 !important;
	font-size: 20px !important;
	font-weight: 800 !important;
	letter-spacing: 0.6px !important;
	text-transform: uppercase !important;
	color: #fff !important;
	opacity: 1 !important;
	line-height: 30px !important;
}

/* Language flags: a single inline row (the header CSS lays them out 2x2). */
#slide-out-widget-area .off-canvas-menu-container.mobile-only .gt-lang-item .gtranslate_wrapper {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	justify-content: flex-start !important;
	gap: 10px !important;
	width: auto !important;
	margin-top: 16px !important;
}
/* White rounded chip behind each flag so it stands out against the orange. */
#slide-out-widget-area .off-canvas-menu-container.mobile-only .gt-lang-item .gtranslate_wrapper a.glink {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: auto !important;
	padding: 5px !important;
	background: #fff !important;
	border-radius: 6px !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	line-height: 0 !important;
	opacity: 1 !important;
}
#slide-out-widget-area .off-canvas-menu-container.mobile-only .gt-lang-item .gtranslate_wrapper a.glink img {
	display: block !important;
	opacity: 1 !important;
	margin: 0 !important;
}

/* Expand / collapse toggle: a red arrow inside a small white circle, pinned to
   the right and vertically centred on the title line. The title line-height is
   30px, so a 26px circle at top:2px sits exactly on the title's centre. */
.off-canvas-menu-container.mobile-only .mtm-toggle {
	position: absolute;
	top: -3px;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	cursor: pointer;
	z-index: 2;
	opacity: 1;
}
.off-canvas-menu-container.mobile-only .mtm-toggle i {
	font-size: 13px;
	line-height: 1;
	color: #F54002;
	transition: transform 0.25s ease;
}
.off-canvas-menu-container.mobile-only li.mtm-open > .mtm-toggle i {
	transform: rotate(180deg);
}

/* The sub-menu: hidden until the item is open, then a wrapping row of small
   white "button" pills (black text), several per line where they fit. */
.off-canvas-menu-container.mobile-only ul.mtm-submenu {
	display: none;
	list-style: none;
	margin: 6px 0 14px;
	padding: 0 0 0 6px;
}
.off-canvas-menu-container.mobile-only li.mtm-open > ul.mtm-submenu {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: flex-start;
}
.off-canvas-menu-container.mobile-only ul.mtm-submenu li {
	margin: 0;
	padding: 0;
	border: none;
	width: auto;
}
/* ID prefix (#slide-out-widget-area) is REQUIRED: Salient sets the off-canvas
   menu font-size with an ID-scoped !important rule, so a class-only selector
   loses the font-size even with !important. The ID here makes these buttons
   (12px) smaller than the top-level items (17px). */
#slide-out-widget-area .off-canvas-menu-container.mobile-only ul.mtm-submenu li a {
	display: inline-block !important;
	width: auto !important;
	padding: 5px 10px !important;
	margin: 0 !important;
	font-size: 12px !important;
	line-height: 1.25 !important;
	font-weight: 500 !important;
	color: #222 !important;
	background: #fff !important;
	border: 1px solid rgba(0, 0, 0, 0.12) !important;
	border-radius: 6px !important;
	opacity: 1 !important;
	text-transform: none !important;
	white-space: normal;
}
#slide-out-widget-area .off-canvas-menu-container.mobile-only ul.mtm-submenu li a:hover {
	background: #f2f2f2 !important;
	color: #000 !important;
}

/* ============================================================================
   OCM SCROLLING HEADER (2026-07-06)
   While the off-canvas menu is open, the logo is dropped into the top of the
   scrolling menu (by ocm-header-scroll.js) so it scrolls up with the content
   instead of staying in the fixed header. The fixed bar is made transparent so
   only the X close button remains; the sticky logo + header flag widget are
   hidden (language flags are still available at the bottom of the menu).
   ========================================================================== */
html.mtm-ocm-scroll-header #header-outer {
	background: transparent !important;
	box-shadow: none !important;
	border: none !important;
}
html.mtm-ocm-scroll-header #header-outer #logo,
html.mtm-ocm-scroll-header #header-outer .nectar-mobile-only.mobile-header,
html.mtm-ocm-scroll-header #header-outer .mobile-header {
	visibility: hidden !important;
}
/* Reclaim the top padding the fixed header bar used to need (keep a little room
   below the X close button). */
html.mtm-ocm-scroll-header #slide-out-widget-area .inner {
	padding-top: 26px !important;
}

/* The logo, now scrolling at the top of the menu. */
#slide-out-widget-area .mtm-ocm-topbar {
	margin: 0 0 10px 0;
	padding: 0;
}
#slide-out-widget-area .mtm-ocm-topbar a.mtm-ocm-logo {
	display: inline-block !important;
	line-height: 0 !important;
	opacity: 1 !important;
}
#slide-out-widget-area .mtm-ocm-topbar img {
	height: 42px !important;
	width: auto !important;
	max-width: 220px !important;
	opacity: 1 !important;
}


/* ==========================================================================
   Shop "Kategorien" filter toggle button
   Salient renders this as "Show Filters" / "Hide Filters". The Show/Hide word
   (.dynamic) is hidden here, and the "Filters" word is renamed to "Kategorien"
   via a gettext filter in functions.php — so the button reads "Kategorien" in
   both the open and closed state. Styled with the brand red + white text.
   ========================================================================== */
.nectar-shop-filters .nectar-shop-filter-trigger .text-wrap .dynamic {
	display: none !important;
}
.nectar-shop-filters .nectar-shop-filter-trigger {
	background-color: #F54002 !important;
	color: #fff !important;
	padding: 10px 20px !important;
	border-radius: 4px !important;
	height: auto !important;
	font-weight: 600;
	transition: background-color .2s ease;
}
.nectar-shop-filters .nectar-shop-filter-trigger:hover {
	background-color: #d63700 !important;
	color: #fff !important;
}
.nectar-shop-filters .nectar-shop-filter-trigger,
.nectar-shop-filters .nectar-shop-filter-trigger .text-wrap {
	color: #fff !important;
}
/* Hamburger toggle icon lines → white so they read on the red button. */
.nectar-shop-filters .nectar-shop-filter-trigger .toggle-icon .top-line,
.nectar-shop-filters .nectar-shop-filter-trigger .toggle-icon .bottom-line {
	background-color: #fff !important;
}

/* ==========================================================================
   Shop / product-category header — compact the top area
   Salient leaves ~180px of vertical space above the product grid: container
   padding-top 20px + the H1 title (line-height 56px) + the breadcrumb block
   (13px padding + 40px line-height + 40px margin-bottom). Tighten each a
   little so the title + breadcrumbs take noticeably less room, without
   shrinking the title text itself. Scoped to shop & category archives.
   ========================================================================== */
.post-type-archive-product .container-wrap,
.tax-product_cat .container-wrap,
.tax-product_tag .container-wrap {
	padding-top: 0 !important;
}
/* Title: keep 36px size, tighten the oversized line box, 20px space on top. */
.nectar-shop-header h1.page-title {
	line-height: 1.15 !important;
	padding-top: 20px !important;
	margin-bottom: 4px !important;
}
/* Breadcrumbs: trim padding, line-height and the big bottom gap. */
.nectar-shop-header .woocommerce-breadcrumb {
	padding: 2px 0 !important;
	line-height: 22px !important;
	margin-bottom: 16px !important;
}

/* ==========================================================================
   Permanent header search bar (header-search-bar.js)
   Relocates the top-right magnifier (#search-btn) into an always-visible
   search field that forms its own full-width row below the main menu.
   ========================================================================== */

/* Hide Salient's magnifying-glass toggle — search now lives in the bar. */
#header-outer #search-btn { display: none !important; }

/* The injected row inside header#top > .container, below the menu row. */
#header-outer header#top .container .mt-header-search-row {
	width: 100%;
	margin: 4px 0 14px !important;
	clear: both;
	float: none;
	display: block;
}

/* The pill. */
#header-outer .mt-header-search {
	display: flex;
	align-items: center;
	width: 60%;
	max-width: 60%;
	margin: 0 auto;
	background: #ffffff;
	border: 1px solid #e2e2e2;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	padding: 2px 6px 2px 2px;
	box-sizing: border-box;
	transition: border-color .18s ease, box-shadow .18s ease;
}
#header-outer .mt-header-search:focus-within {
	border-color: #F54002;
	box-shadow: 0 2px 14px rgba(245, 64, 2, 0.18);
}

/* Magnifier submit button on the left. */
#header-outer .mt-header-search__submit {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 38px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: #333;
	cursor: pointer;
	line-height: 1;
	box-shadow: none;
}
#header-outer .mt-header-search__submit:hover { color: #F54002; }
#header-outer .mt-header-search__submit .icon-salient-search {
	font-size: 19px;
	line-height: 1;
}

/* The text input fills the rest. */
#header-outer .mt-header-search__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 38px;
	margin: 0;
	padding: 0 16px 0 4px;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-size: 15px;
	color: #333;
	line-height: 38px;
	-webkit-appearance: none;
	appearance: none;
}
#header-outer .mt-header-search__input:focus {
	border: 0 !important;
	box-shadow: none !important;
	outline: none;
}
#header-outer .mt-header-search__input::placeholder {
	color: #9a9a9a;
	opacity: 1;
}
/* Kill the native search-cancel "x" that WebKit adds. */
#header-outer .mt-header-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

/* Mobile: the off-canvas menu already carries its own search, and the header
   collapses — keep the bar to desktop where the menu row exists. */
@media only screen and (max-width: 999px) {
	#header-outer header#top .container .mt-header-search-row { display: none; }
}


/* ==========================================================================
   Mobile header — icon row below the logo
   Salient pins .col.span_9 (flags, search, account, cart, hamburger) as an
   absolutely-positioned overlay at right:0/top:0 of the logo row, so on a phone
   the flag widget and the search icon land on top of the logo artwork.
   Un-pin it into a normal full-width row that follows the logo: flags at the
   far left (margin-right:auto), then search / account / cart / hamburger to the
   right. Source order already matches that, so no reordering is needed.
   Scoped to the phone/tablet-portrait range; the desktop menu row is untouched.
   ========================================================================== */
@media only screen and (max-width: 999px) {
	/* The logo keeps its own row, left-justified as before. */
	body #header-outer #top .col.span_3 {
		width: 100%;
		text-align: left;
	}

	/* From absolute overlay → static row under the logo. */
	body #header-outer #top .col.span_9 {
		position: relative !important;
		right: auto !important;
		top: auto !important;
		left: auto !important;
		width: 100% !important;
		height: auto !important;
		min-height: 0;
		float: none;
		clear: both;
		display: flex !important;
		flex-direction: row !important;
		align-items: center;
		justify-content: flex-end;
		margin: 8px 0 0 0;
		padding: 0;
	}

	/* Language flags hard left; everything after them is pushed right. */
	body #header-outer #top .span_9 > .nectar-mobile-only {
		order: 0;
		margin-right: auto;
		display: flex !important;
		align-items: center;
		/* Never let the flex row squeeze the flags out of aspect ratio on a
		   narrow phone — the icons keep their size, so the flags must too. */
		flex-shrink: 0;
	}
	body #header-outer #top .span_9 .gt-lang-item,
	body #header-outer #top .span_9 .gt-lang-item .gtranslate_wrapper a.glink,
	body #header-outer #top .span_9 .gt-lang-item .gtranslate_wrapper img {
		flex-shrink: 0 !important;
	}

	/* Even breathing room for search / account / cart / hamburger, each one
	   centred on the same line as the flags. Each link is a flex item of the row
	   above, so align-items:center lines the boxes up; the glyph inside each one
	   centres itself with Salient's own `top:50%; transform:translateY(-50%)`,
	   which needs the link to have a resolvable height — hence the explicit 34px
	   (the links are height:100% by default, and the row is auto-height now).
	   Do NOT make these links flex containers: that pre-centres the glyph, and
	   Salient's translate then double-shifts it by (34 - glyphHeight)/2. The cart
	   glyph has a 20px line-height where search/account have 34px, so it alone
	   dropped 7px below the others. */
	body #header-outer #top .span_9 > .mobile-search,
	body #header-outer #top .span_9 > .mobile-user-account,
	body #header-outer #top .span_9 > #mobile-cart-link,
	body #header-outer #top .span_9 > .slide-out-widget-area-toggle {
		position: relative;
		height: 34px;
		margin: 0 0 0 22px;
		top: auto;
		transform: none;
		flex-shrink: 0;
	}
	/* Narrow phones (≤400px): flags + 4 icons + 22px gaps overflow the row, so
	   tighten the gaps rather than let anything shrink or wrap. */
	@media only screen and (max-width: 400px) {
		body #header-outer #top .span_9 > .mobile-search,
		body #header-outer #top .span_9 > .mobile-user-account,
		body #header-outer #top .span_9 > #mobile-cart-link,
		body #header-outer #top .span_9 > .slide-out-widget-area-toggle {
			margin-left: 10px;
		}
	}
}


/* ==========================================================================
   Blog posts — clear the text off the page-header image
   Salient prints the post title + an author/category line over #page-header-bg's
   featured image. Every post already opens with its own <h1> in the body content
   (checked: all 7 posts have exactly one), so the overlay title was a duplicate
   <h1> that also ran into the menu and the search bar on a wide screen. The
   meta line ("By admin" / "Uncategorized") goes with it, leaving a clean image.
   The featured image and the in-content title are untouched.
   ========================================================================== */
body.single-post #page-header-bg h1,
body.single-post #page-header-bg #single-below-header {
	display: none !important;
}

/* ==========================================================================
   Category description "Mehr Lesen" collapse (category-readmore.js)
   Collapses a long product-category description to ~2 sentences with a red
   toggle. Generic — applies to any category with a long description.
   ========================================================================== */
.term-description.tdc {
	position: relative;
}
.term-description.tdc-collapsed {
	max-height: 6em;        /* ~2-3 sentences of the intro (one line more) */
	overflow: hidden;
}
.term-description.tdc-open {
	max-height: none;
}
button.tdc-toggle {
	display: inline-block;
	margin: 8px 0 44px;
	padding: 0;
	border: 0;
	background: none;
	color: #F54002;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.3;
	cursor: pointer;
	transition: opacity .15s ease;
}
button.tdc-toggle:hover,
button.tdc-toggle:focus {
	color: #F54002;
	text-decoration: underline;
	opacity: .85;
	outline: none;
}

/* ============================================================
   Checkout: "Bereits Kunde?" returning-customer prompt
   (see checkout-returning-customer.js). Body classes:
   brk-active  = prompt is running (logged-out checkout)
   brk-prompt  = no choice yet | brk-login = "Ja" | brk-guest = "Nein"
   ============================================================ */

/* Hide WooCommerce's original "Besitzen Sie bereits ein Kundenkonto?" notice. */
body.brk-active .woocommerce-form-login-toggle { display: none !important; }

/* Before a choice: hide both the login form and the whole checkout form.
   "Ja" (brk-login): hide checkout fields, show the login form.
   "Nein" (brk-new) / "als Gast bestellen" (brk-guest): hide the login form,
   show the (empty) checkout fields. */
body.brk-active.brk-prompt form.checkout,
body.brk-active.brk-prompt form.woocommerce-form-login,
body.brk-active.brk-login  form.checkout,
body.brk-active.brk-new    form.woocommerce-form-login,
body.brk-active.brk-guest  form.woocommerce-form-login { display: none !important; }

body.brk-active.brk-login form.woocommerce-form-login { display: block !important; }

/* Guest order: hide the "Ein Konto erstellen?" checkbox (JS also unchecks it). */
body.brk-active.brk-guest .woocommerce-account-fields { display: none !important; }

.brk-returning-customer {
	margin: 0 0 24px;
	text-align: left;
}
.brk-returning-customer .brk-rc-question {
	margin: 0 0 10px;
	font-size: 20px;   /* match the "Rechnungsdaten" <h3> */
	line-height: 26px;
	font-weight: 600;
	color: #000;
}
.brk-returning-customer .brk-rc-buttons {
	display: flex;
	gap: 8px;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.brk-returning-customer .brk-rc-btn {
	padding: 6px 14px;
	border: 1px solid #F54002;
	border-radius: 4px;
	background: #fff;
	color: #F54002;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.brk-returning-customer .brk-rc-btn:hover,
.brk-returning-customer .brk-rc-btn:focus,
.brk-returning-customer .brk-rc-btn.brk-active {
	background: #F54002;
	color: #fff;
	outline: none;
}

/* ============================================================
   "Rechnung" (invoice) bank-transfer details box. Shown on the
   checkout payment box AND on the order-confirmation (thank-you)
   page, via functions.php (salient_child_bank_details_html).
   Grey to match the order-review product box.
   ============================================================ */
.woocommerce .brk-bank-details {
	margin: 12px 0 4px;
	padding: 14px 16px;
	background: #eee;   /* grey, matching the order-review product box */
	border-radius: 6px;
	color: #000;
	line-height: 1.55;
}
.woocommerce .brk-bank-details .brk-bank-row {
	display: block;
}
.woocommerce .brk-bank-details .brk-bank-label {
	display: inline-block;
	min-width: 92px;
	font-weight: 700;
}
.woocommerce .brk-bank-details .brk-bank-value {
	padding-left: 14px;
	font-variant-numeric: tabular-nums;
}
.woocommerce .brk-bank-details .brk-bank-note {
	display: block;
	margin-top: 1.55em;   /* a blank line's worth of space before the note */
}
/* Thank-you page wrapper + heading. */
.woocommerce .brk-bank-transfer {
	margin: 0 0 30px;
}
.woocommerce .brk-bank-transfer > h2 {
	margin: 0 0 12px;
}
.woocommerce .brk-bank-transfer .brk-bank-details {
	max-width: 460px;
}

/* ============================================================
   Checkout: 50/50 columns — address entries (Rechnungsdaten +
   Lieferdaten) left, order details (Ihre Bestellung + payment)
   right. Salient defaults are ~58% / ~39%; even them out.
   Desktop only (>=1000px); mobile keeps Salient's stacked layout.
   #ajax-content-wrap adds ID specificity to beat Salient's rules.
   ============================================================ */
@media only screen and (min-width: 1000px) {
	body.woocommerce-checkout #ajax-content-wrap #customer_details.col2-set > .col-1,
	body.woocommerce-checkout #ajax-content-wrap #customer_details.col2-set > .col-2 {
		width: 48.5% !important;
	}
}

/* Checkout: let the order-review product list grow to fit all items instead of
   scrolling inside a fixed 456px box (Salient sets max-height + overflow:auto). */
body.woocommerce-checkout #ajax-content-wrap #order_review .product-container {
	max-height: none !important;
	overflow: visible !important;
}

/* ============================================================
   Checkout totals box: "Gesamtsumme" is now the very last row
   (the "inkl. X % MwSt." line was moved above it via the
   Germanized option woocommerce_gzd_tax_totals_display=before).
   Make that final row bold so it reads as the sum-up line.
   #ajax-content-wrap adds ID specificity to beat Salient.
   ============================================================ */
body.woocommerce-checkout #ajax-content-wrap #order_review table.order-review tr.order-total th,
body.woocommerce-checkout #ajax-content-wrap #order_review table.order-review tr.order-total td,
body.woocommerce-checkout #ajax-content-wrap #order_review table.order-review tr.order-total td .woocommerce-Price-amount,
body.woocommerce-checkout #ajax-content-wrap #order_review table.order-review tr.order-total td .amount {
	font-weight: 700 !important;
}