/*
Theme Name: Kaffeewelt Organium
Theme URI:
Description: Kaffeewelt child theme for Organium
Author:
Author URI:
Template: organium
Version: 1.0.17
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kaffeewelt
*/

/* =========================================================================
   Kaffeewelt Corporate Identity 2026
   Source: /branding/Kaffeewelt manual.pdf

   The three declared brand colours are mirrored here as named tokens so
   templates never hardcode a hex.

   Contrast, measured against the WCAG 2.1 AA floor of 4.5:1:
     espresso on white ......... 13.8:1  ok
     espresso on cream ......... 12.5:1  ok
     gold on espresso ...........6.6:1   ok
     gold on white ..............2.1:1   FAILS — never gold text on light
     gold on cream ..............1.9:1   FAILS — never gold text on light
   Gold is a fill, a rule, or an underline on light surfaces. It is only a
   text colour on espresso. Use --kw-gold-deep when gold-ish text must sit
   on white (4.9:1).
   ====================================================================== */

:root {
	--kw-espresso: #3E2723;
	--kw-gold: #D4AF37;
	--kw-cream: #F5F5DC;

	/* Derived — not in the manual, needed for UI states. */
	--kw-gold-deep: #A8862A;
	--kw-gold-text-on-light: #8A6D1F;
	--kw-espresso-60: #4A342F;
	--kw-espresso-45: #6B534C;
	--kw-espresso-35: #7A655D;
	--kw-cream-tint: #FAFAF2;
	--kw-hairline: #5A423C;
}

/* Gold accent rule under section headings — the manual's main decorative
   device, and the safe way to use gold on a light background. */
.kw-accent-rule::after {
	content: "";
	display: block;
	width: 3.5rem;
	height: 3px;
	margin-top: 0.75rem;
	background: var(--kw-gold);
	border-radius: 2px;
}

/* Cream is the alternating section surface. */
.kw-section-cream {
	background: var(--kw-cream);
	color: var(--kw-espresso);
}

/* Product subtitle — the marketing line under the title in the hero section.
   Deliberately quieter than the title and heavier than body copy: it is read
   before the price and must not compete with either. --kw-espresso-45 is the
   lightest tint that still passes AA on the page background. */
.kw-product-subtitle {
	margin: -0.35em 0 0.9em;
	font-family: 'Urbanist', system-ui, sans-serif;
	font-size: 1.05rem;
	font-weight: 500;
	line-height: 1.45;
	color: var(--kw-espresso-45);
	max-width: 46ch;
}

/* Product downloads — manuals, data sheets, energy labels. Sits under the
   buying decision, so it is deliberately quiet: no boxes, no icons competing
   with the add-to-cart button. The file type is the affordance. */
.kw-documents {
	margin: 1.5em 0 0;
	padding-top: 1.1em;
	border-top: 1px solid rgba(62, 39, 35, 0.12);
}

.kw-documents-title {
	margin: 0 0 0.5em;
	font-family: 'Urbanist', system-ui, sans-serif;
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--kw-espresso-45);
}

.kw-documents ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kw-documents li + li {
	margin-top: 0.35em;
}

a.kw-document {
	color: var(--kw-espresso);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

a.kw-document:hover,
a.kw-document:focus {
	color: var(--kw-gold-text-on-light);
}

.kw-document-type {
	margin-left: 0.5em;
	padding: 0.05em 0.4em;
	border: 1px solid rgba(62, 39, 35, 0.25);
	border-radius: 2px;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	color: var(--kw-espresso-45);
	text-decoration: none;
	vertical-align: 0.08em;
}

/* =========================================================================
   Back-in-stock notification — wp-content/mu-plugins/kaffeewelt-back-in-stock
   Sits where the add-to-cart button would be on a sold-out product, so it is
   styled as the replacement for a buying decision rather than as a newsletter
   box: same weight, same width, no border shouting for attention.
   ====================================================================== */

.kw-bis {
	margin: 1.5em 0 0;
	padding: 1.2em 1.3em;
	background: var(--kw-cream-tint);
	border-left: 3px solid var(--kw-gold);
	border-radius: 3px;
}

.kw-bis-title {
	margin: 0 0 0.35em;
	font-family: 'Urbanist', system-ui, sans-serif;
	font-size: 1.02rem;
	font-weight: 600;
	color: var(--kw-espresso);
}

.kw-bis-intro {
	margin: 0 0 1em;
	font-size: 0.92rem;
	line-height: 1.5;
	color: var(--kw-espresso-45);
}

.kw-bis-label {
	display: block;
	margin-bottom: 0.35em;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--kw-espresso-45);
}

/* Field and button share a line on a desktop and stack on a phone. The wrap
   is driven by the field's own min-width rather than a media query, so it
   also does the right thing inside a narrow sidebar layout. */
.kw-bis-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}

.kw-bis-email {
	flex: 1 1 14rem;
	min-width: 0;
	padding: 0.6em 0.75em;
	border: 1px solid rgba(62, 39, 35, 0.25);
	border-radius: 3px;
	background: #fff;
	color: var(--kw-espresso);
	font-size: 0.95rem;
}

.kw-bis-email:focus {
	outline: 2px solid var(--kw-gold-deep);
	outline-offset: 1px;
	border-color: var(--kw-gold-deep);
}

/* Gold fill, espresso label — the one gold pairing that passes AA (6.6:1).
   Gold as a text colour on this light panel would fail at 1.9:1. */
.kw-bis-submit,
.kw-bis .button.kw-bis-submit {
	flex: 0 0 auto;
	background: var(--kw-gold);
	color: var(--kw-espresso);
	font-weight: 600;
	border: 0;
	border-radius: 3px;
	padding: 0.6em 1.3em;
}

.kw-bis-submit:hover,
.kw-bis .button.kw-bis-submit:hover {
	background: var(--kw-gold-deep);
	color: #fff;
}

.kw-bis-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.55em;
	margin-top: 0.9em;
	font-size: 0.82rem;
	line-height: 1.45;
	color: var(--kw-espresso-45);
}

.kw-bis-consent input {
	margin-top: 0.2em;
	flex: 0 0 auto;
}

.kw-bis-consent a {
	color: var(--kw-espresso);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* Honeypot: off-screen rather than display:none, because a bot that reads CSS
   skips hidden fields and this one is meant to be filled in. */
.kw-bis-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.kw-bis-notice {
	margin: 1.2em 0;
	padding: 0.85em 1em;
	border-radius: 3px;
	font-size: 0.92rem;
	line-height: 1.5;
}

.kw-bis-notice--ok {
	background: var(--kw-cream);
	border-left: 3px solid var(--kw-gold);
	color: var(--kw-espresso);
}

.kw-bis-notice--error {
	background: #FBEDEA;
	border-left: 3px solid #A33A26;
	color: #6E2417;
}

/* Organium draws the logo as a background sized from the file's own width,
   500x97 for this SVG, which pushes the menu out of the header. */
body .organium_header-logo__link {
	width: 190px;
	height: 37px;
	background-size: contain;
}

body .header_mobile .organium_header-logo__link {
	width: 170px;
	height: 33px;
}

/* Organium leaves no gap after the logo: its own logo is narrower. */
body .organium_header-logo__link {
	margin-right: 28px;
}

@media (min-width: 1200px) {
	.organium_header .organium_main-menu > li > a {
		font-size: 15px;
	}
}

/* Same oversized background logo in the footer. */
body .organium_footer-logo__link {
	width: 190px;
	height: 37px;
	background-size: contain;
}

/* The footer has three blocks per language: the two shops and the benefits.
   Organium stacks widgets, which runs to a full screen of centred text. */
.organium_footer.organium_footer_style_1 .footer_widgets {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	text-align: left;
}

.organium_footer.organium_footer_style_1 .widget.footer_widget:not(:first-child) {
	margin: 0;
}

@media (max-width: 767px) {
	.organium_footer.organium_footer_style_1 .footer_widgets {
		grid-template-columns: 1fr;
	}
}

/* Organium only ever opens the mini-cart on hover. After an add it opens on
   its own, as a fixed panel so that it stays in view wherever the page is
   scrolled to and on phones, where there is no hover. */
.mini_cart .mini_cart_panel.active {
	position: fixed;
	top: 100px;
	right: 16px;
	left: auto;
	z-index: 100000;
	display: block;
	max-height: calc(100vh - 120px);
	max-width: calc(100vw - 32px);
	overflow-y: auto;
	visibility: visible;
	opacity: 1 !important; /* Organium's closed state is !important too. */
	transform: none;
	pointer-events: auto;
}

/* "Warenkorb anzeigen" is longer than Organium's "View cart" and was cut off. */
.mini_cart .mini_cart_panel .woocommerce-mini-cart__buttons .button {
	padding-left: 8px;
	padding-right: 8px;
	font-size: 12px;
	white-space: normal;
}

/* Home page: one content width, 1400px, for everything below the hero. Banner
   edges are flush because Elementor's row already offsets the column gap. */
@media (min-width: 1025px) {
	.kw-category-banners.elementor-section {
		padding-left: 0 !important;
		padding-right: 0 !important;
		overflow: hidden;
	}

	/* 30px: the 15px the boxed sections below keep on each side when the
	   screen is narrower than the content width. */
	.kw-category-banners > .elementor-container {
		max-width: min(1400px, 100% - 30px);
		margin-left: auto;
		margin-right: auto;
	}

	.home .organium_page_content_wrapper > .container {
		max-width: min(1430px, 100%);
	}

	.home .organium_content_wrapper .elementor-section-boxed > .elementor-container {
		max-width: 1400px;
	}
}

/* The two large photos fill their column instead of Organium's fixed width,
   which is narrower on wide screens and spills out of the page on small ones. */
@media (min-width: 1025px) {
	.home .elementor-widget-organium_image .elementor-widget-container,
	.home .elementor-widget-organium_image .organium_image_widget,
	.home .elementor-widget-organium_image .organium_image_container {
		width: 100%;
		max-width: 100%;
		float: none;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0;
		padding-right: 0;
		left: 0;
	}

	.home .elementor-widget-organium_image img {
		display: block;
		width: 100% !important;
		max-width: 100% !important;
		height: auto;
		margin-left: 0 !important;
		margin-right: 0 !important;
		left: 0;
		float: none !important;
	}
}

/* Hero edge to edge. To go back to the 1900px hero, delete this one rule. */
.home .organium_content_slide {
	background-size: cover !important;
}

/* Product cards all the same size. Organium's li is inline-block, so the
   wrapper's height: 100% has nothing to fill. The picture box is square and the
   title reserves three lines, so a short name lines up with a long one across
   rows too, not just within a row. */
body .shop_mode_grid ul.products li.product,
body .organium_products_widget.view_type_standard ul.products li.product {
	display: flex;
}

body .organium_products_widget.view_type_standard ul.products {
	display: flex;
	flex-wrap: wrap;
}

body .shop_mode_grid .woocommerce-loop-product__wrapper,
body .organium_products_widget.view_type_standard .woocommerce-loop-product__wrapper {
	width: 100%;
	height: auto;
}

body .shop_mode_grid .woocommerce-loop-product__wrapper .attachment-woocommerce_wrapper,
body .organium_products_widget.view_type_standard .woocommerce-loop-product__wrapper .attachment-woocommerce_wrapper {
	aspect-ratio: 1;
}

body .shop_mode_grid .woocommerce-loop-product__wrapper .attachment-woocommerce_wrapper img,
body .organium_products_widget.view_type_standard .woocommerce-loop-product__wrapper .attachment-woocommerce_wrapper img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

body .shop_mode_grid .woocommerce-loop-product__wrapper .content-woocommerce_wrapper .woocommerce-loop-product__title,
body .organium_products_widget.view_type_standard .woocommerce-loop-product__wrapper .content-woocommerce_wrapper .woocommerce-loop-product__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	height: 3.6em;
	line-height: 1.2;
	margin: 8px 0;
	padding: 0;
}

/* Banner labels sit directly on photographs, some of them light. */
.organium_banner_subtitle {
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.75);
}