/* =====================================================================
   [FIRMENNAME] — kleine Anpassungen für WordPress / WooCommerce.
   Verändert das Haupt-Design (lunel.css) nicht, sondern ergänzt nur.
   ===================================================================== */

/* Reveal-Elemente sicher sichtbar machen, auch ohne JavaScript/Animation. */
.reveal { opacity: 1 !important; transform: none !important; }

/* Lesbarer Fließtext für WordPress-Inhalte (Seiten/Beiträge). */
.beitrag-inhalt { max-width: 70ch; }
.beitrag-inhalt p { color: var(--sekundaer); line-height: 1.7; margin: 0 0 16px; }
.beitrag-inhalt h2,
.beitrag-inhalt h3 { font-family: var(--serif); color: var(--elfenbein); }
.beitrag-inhalt a { color: var(--elfenbein); }

/* WooCommerce in unsere Optik bringen (Grundlinien — Feinschliff folgt). */
.woocommerce .price,
.woocommerce span.amount,
.woocommerce-Price-amount { font-family: var(--serif); color: var(--elfenbein); }

.woocommerce a.button,
.woocommerce button.button,
.woocommerce button.button.alt,
.woocommerce #respond input#submit,
.woocommerce input.button,
.woocommerce .button {
	background: var(--elfenbein);
	color: #fff;
	border-radius: 0;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-family: var(--sans);
	font-weight: 500;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .button:hover { background: var(--gold); color: #fff; }

/* =====================================================================
   Header: durchgehend dunkel mit weißer Schrift — immer gut lesbar.
   ===================================================================== */
/* Größere Schrift im Header */
.header .wortmarke { font-size: clamp(1.45rem, 1.05rem + 1.1vw, 1.75rem) !important; }
.header .hauptnav a,
.header .megamenu-trigger { font-size: 13px !important; }

/* Grundzustand (auch oben auf Innenseiten): transparent, dunkle Schrift */
.header { background: transparent !important; border-bottom: 1px solid transparent !important; }
.header .wortmarke,
.header .hauptnav a,
.header .megamenu-trigger { color: var(--elfenbein) !important; }
.header .burger span { background: var(--elfenbein) !important; }
.header .wortmarke:hover,
.header .hauptnav a:hover { color: var(--gold) !important; }

/* Gescrollt / über hellem Hintergrund (Vitrine usw.): heller Header, SCHWARZE Schrift */
.header.ist-gescrollt { background: var(--grund) !important; border-bottom: 1px solid var(--haarlinie) !important; }
.header.ist-gescrollt .wortmarke,
.header.ist-gescrollt .hauptnav a,
.header.ist-gescrollt .megamenu-trigger { color: var(--elfenbein) !important; }
.header.ist-gescrollt .burger span { background: var(--elfenbein) !important; }

/* Startseite ganz oben über dem Video: WEISSE Schrift */
body.home .header:not(.ist-gescrollt) .wortmarke,
body.home .header:not(.ist-gescrollt) .hauptnav a,
body.home .header:not(.ist-gescrollt) .megamenu-trigger { color: #ffffff !important; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45); }
body.home .header:not(.ist-gescrollt) .burger span { background: #ffffff !important; }
body.home .header:not(.ist-gescrollt) .hauptnav a[aria-current="page"] { color: #CBA45A !important; }
/* Eigenes Logo-Bild in der Kopfzeile sauber einpassen */
.wortmarke--bild { display: inline-flex; align-items: center; }
.wortmarke--bild img.custom-logo { max-height: 46px; width: auto; display: block; }

/* =====================================================================
   WooCommerce-Produktkarten näher ans Original: gerahmte Fotos,
   Preise GROSS, FETT und gut sichtbar.
   ===================================================================== */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
	gap: clamp(20px, 2.5vw, 40px) !important;
	margin: 0 !important;
}
/* WooCommerce-Aufräum-Pseudoelemente NICHT als Rasterzellen rendern
   (sonst entsteht eine leere erste/letzte Kachel). */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
	content: none !important;
	display: none !important;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	display: flex !important;
	flex-direction: column;
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	text-align: left;
}

/* Vitrine/Shop: Uhr freigestellt auf WEISS, vollständig sichtbar (contain),
   etwas kleiner durch Innenabstand -> wirkt edler und nicht verpixelt. */
.woocommerce ul.products li.product a img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 4 / 5 !important;
	object-fit: contain !important;
	background: #ffffff !important;
	border: 1px solid rgba(26, 25, 22, 0.07) !important;
	box-shadow: none !important;
	padding: clamp(18px, 3vw, 38px) !important;
	margin: 0 0 18px !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--serif);
	font-weight: 500;
	font-size: clamp(1.1rem, 1.4vw, 1.4rem);
	line-height: 1.2;
	color: var(--elfenbein);
	padding: 0 0 6px;
	/* 2 Zeilen reservieren -> Preise stehen über alle Karten auf gleicher Höhe */
	min-height: 2.6em;
}

/* Preis: Cormorant 500 (wie Original) — sichtbar, aber nicht zu fett */
.woocommerce ul.products li.product .price,
.woocommerce .price {
	font-family: var(--serif) !important;
	font-size: 1.5rem !important;
	font-weight: 500 !important;
	color: var(--elfenbein) !important;
	margin-top: auto;
	padding-top: 12px;
	display: block;
}
.woocommerce ul.products li.product .price del { font-weight: 400; opacity: 0.5; font-size: 0.7em; }

/* =====================================================================
   Kollektions-Kacheln (Startseite) — echte Fotos pro Linie wie im
   Original (repräsentatives Produktbild je Kategorie).
   ===================================================================== */
.kol-kacheln {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
	gap: clamp(16px, 2vw, 32px);
}
.kol-kachel { display: block; }
.kol-kachel-bild {
	aspect-ratio: 1 / 1;
	background: #ffffff;
	border: 0;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.kol-kachel-bild img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: clamp(14px, 2vw, 26px);
	transition: transform var(--uebergang);
}
.kol-kachel:hover .kol-kachel-bild img { transform: scale(1.05); }
.kol-kachel-text { margin-top: 14px; display: flex; flex-direction: column; gap: 5px; }
.kol-kachel-name { font-family: var(--serif); font-size: 1.2rem; color: var(--elfenbein); }
.kol-kachel:hover .kol-kachel-name { color: var(--gold); }
.kol-kachel-zahl { font-family: var(--sans); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sekundaer); }
/* Mindestens 2 nebeneinander, auch sehr schmal */
@media (max-width: 340px) { .kol-kacheln { grid-template-columns: 1fr 1fr !important; } }

/* =====================================================================
   Einzel-Produktseite — angelehnt an unser Original-Detaillayout.
   Foto links, Infos rechts (WooCommerce-Standard), in unserer Optik.
   ===================================================================== */
.woocommerce div.product .woocommerce-product-gallery { max-width: 400px !important; margin: 0; }
.woocommerce div.product .woocommerce-product-gallery__image img,
.woocommerce div.product .woocommerce-product-gallery img {
	background: #ffffff;
	border: 1px solid rgba(26, 25, 22, 0.07);
	padding: clamp(14px, 2vw, 26px);
}
/* Galerie-Vorschau (Thumbnails) ausblenden -> pro Produkt nur EIN Bild sichtbar */
.woocommerce div.product .flex-control-thumbs { display: none !important; }
.woocommerce div.product .product_title,
.woocommerce div.product h1.product_title {
	font-family: var(--serif) !important;
	font-weight: 500 !important;
	font-size: clamp(1.9rem, 3.4vw, 2.8rem) !important;
	line-height: 1.1 !important;
	color: var(--elfenbein) !important;
	margin: 0 0 14px !important;
}
/* Preis auf der Detailseite extra groß */
.woocommerce div.product p.price,
.woocommerce div.product .summary .price,
.woocommerce div.product .entry-summary .price {
	font-family: var(--serif) !important;
	font-size: clamp(1.8rem, 3vw, 2.5rem) !important;
	font-weight: 500 !important;
	color: var(--elfenbein) !important;
	margin: 6px 0 26px !important;
}
.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--sekundaer);
	line-height: 1.7;
	max-width: 52ch;
	margin-bottom: 26px;
}
.woocommerce div.product form.cart { margin: 8px 0 0; }
.woocommerce div.product form.cart .button {
	padding: 16px 34px;
	font-size: 0.92rem;
}
.woocommerce div.product .product_meta { margin-top: 22px; font-size: 0.85rem; color: var(--sekundaer); }

/* Reiter (Beschreibung / Spezifikation) */
.woocommerce div.product .woocommerce-tabs {
	margin-top: clamp(40px, 5vw, 64px);
	border-top: 1px solid var(--haarlinie);
	padding-top: clamp(28px, 4vw, 48px);
}
.woocommerce div.product .woocommerce-tabs ul.tabs { border: 0; padding: 0; margin: 0 0 20px; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	margin: 0 28px 0 0 !important;
	padding: 0 !important;
}
.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 a {
	font-family: var(--sans);
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sekundaer);
	padding: 0 0 8px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--elfenbein);
	box-shadow: inset 0 -1px 0 0 var(--gold);
}
.woocommerce div.product .woocommerce-tabs .panel h2,
.woocommerce div.product .woocommerce-Tabs-panel h2 { font-family: var(--serif); font-weight: 500; }

/* Spezifikations-/Attributtabelle wie im Original (Haarlinien) */
.woocommerce table.shop_attributes { width: 100%; border-collapse: collapse; }
.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
	border: 0 !important;
	border-bottom: 1px solid var(--haarlinie) !important;
	padding: 14px 0 !important;
	text-align: left !important;
	background: transparent !important;
}
.woocommerce table.shop_attributes th {
	font-family: var(--sans);
	font-weight: 400;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sekundaer);
	width: 38%;
}
.woocommerce table.shop_attributes td {
	font-family: var(--serif);
	font-size: 1.05rem;
	font-style: normal;
	color: var(--elfenbein);
}

/* =====================================================================
   Blog / Journal — Übersicht und Einzelartikel
   ===================================================================== */
.blog-liste {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: clamp(28px, 3vw, 48px);
	margin-top: clamp(36px, 4vw, 56px);
}
.blog-eintrag-link { display: block; }
.blog-bild {
	aspect-ratio: 3 / 2;
	background: var(--flaeche);
	border: 1px solid var(--haarlinie);
	overflow: hidden;
	margin-bottom: 18px;
}
.blog-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--uebergang); }
.blog-eintrag-link:hover .blog-bild img { transform: scale(1.03); }
.blog-datum { font-family: var(--sans); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sekundaer); }
.blog-titel { font-family: var(--serif); font-weight: 500; font-size: clamp(1.3rem, 1.8vw, 1.65rem); line-height: 1.2; color: var(--elfenbein); margin: 8px 0 10px; }
.blog-eintrag-link:hover .blog-titel { color: var(--gold); }
.blog-auszug { color: var(--sekundaer); line-height: 1.7; }
.blog-mehr { display: inline-block; margin-top: 14px; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--elfenbein); border-bottom: 1px solid var(--gold); padding-bottom: 3px; }

.blog-single-kopf { max-width: 70ch; margin-inline: auto; text-align: center; }
.blog-single-datum { margin-top: 16px; }
.blog-single-bild { max-width: 860px; margin: clamp(28px, 4vw, 44px) auto 0; aspect-ratio: 16 / 9; background: var(--flaeche); border: 1px solid var(--haarlinie); overflow: hidden; }
.blog-single-bild img { width: 100%; height: 100%; object-fit: cover; }
.blog-single-inhalt { max-width: 70ch; margin-inline: auto; margin-top: clamp(28px, 4vw, 40px); }
.blog-single-inhalt h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.4rem, 2vw, 1.9rem); margin: 36px 0 14px; color: var(--elfenbein); }
.blog-single-zurueck { text-align: center; margin-top: clamp(40px, 5vw, 64px); }

/* =====================================================================
   Warenkorb-Symbol im Header (mit Live-Zähler)
   ===================================================================== */
.kopf-warenkorb {
	position: relative;
	display: inline-flex;
	align-items: center;
	margin-left: clamp(16px, 2vw, 26px);
	color: var(--elfenbein);
}
.kopf-warenkorb svg { width: 22px; height: 22px; display: block; }
.kopf-warenkorb-zahl {
	position: absolute;
	top: -7px;
	right: -9px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--gold);
	color: #fff;
	border-radius: 999px;
	font-family: var(--sans);
	font-size: 10px;
	font-weight: 500;
	line-height: 1;
}
/* Farbe folgt dem adaptiven Header */
.header.ist-gescrollt .kopf-warenkorb { color: var(--elfenbein) !important; }
body.home .header:not(.ist-gescrollt) .kopf-warenkorb { color: #ffffff !important; }

/* =====================================================================
   Warenkorb-Seite — aufgeräumt in unserer Optik
   ===================================================================== */
.woocommerce table.cart,
.woocommerce table.shop_table { border: 0 !important; border-collapse: collapse !important; }
.woocommerce table.cart th,
.woocommerce table.shop_table th {
	font-family: var(--sans); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--sekundaer); background: transparent !important;
	border: 0 !important; border-bottom: 1px solid var(--haarlinie) !important; padding: 16px 12px !important;
}
.woocommerce table.cart td {
	border: 0 !important; border-bottom: 1px solid var(--haarlinie) !important;
	padding: 18px 12px !important; vertical-align: middle; background: transparent !important;
}
.woocommerce table.cart .product-name a { font-family: var(--serif); font-size: 1.15rem; color: var(--elfenbein); }
.woocommerce table.cart .product-name a:hover { color: var(--gold); }
.woocommerce table.cart img { width: 72px !important; height: auto; border: 1px solid var(--haarlinie); background: var(--flaeche); }
.woocommerce .product-price, .woocommerce .product-subtotal { font-family: var(--serif); font-size: 1.1rem; color: var(--elfenbein); }
.woocommerce .quantity .qty {
	border: 1px solid var(--haarlinie); border-radius: 0; padding: 10px; width: 74px; text-align: center; font-family: var(--sans);
}
.woocommerce .coupon .input-text { border: 1px solid var(--haarlinie) !important; border-radius: 0 !important; padding: 12px 14px !important; }

.woocommerce .cart-collaterals .cart_totals {
	float: none; width: 100%; max-width: 460px; margin-left: auto;
	border: 1px solid var(--haarlinie); padding: clamp(24px, 3vw, 36px);
}
.woocommerce .cart_totals h2 { font-family: var(--serif); font-weight: 500; margin-bottom: 18px; }
.woocommerce .cart_totals table th,
.woocommerce .cart_totals table td { border: 0 !important; border-bottom: 1px solid var(--haarlinie) !important; padding: 14px 0 !important; }
.woocommerce .cart_totals .order-total .amount { font-family: var(--serif); font-size: 1.6rem; font-weight: 500; color: var(--elfenbein); }
.woocommerce .wc-proceed-to-checkout a.checkout-button { display: block; text-align: center; margin-top: 18px; padding: 16px 24px; }

/* =====================================================================
   Kasse — aufgeräumte Felder, klare Bestellübersicht
   ===================================================================== */
.woocommerce-checkout h3 { font-family: var(--serif); font-weight: 500; }
.woocommerce form .form-row label { font-size: 0.9rem; color: var(--sekundaer); }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-checkout select,
.woocommerce form .form-row .select2-selection {
	border: 1px solid var(--haarlinie) !important; border-radius: 0 !important;
	padding: 12px 14px !important; font-family: var(--sans); min-height: 48px;
}
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order {
	border: 1px solid var(--haarlinie); padding: clamp(20px, 3vw, 32px);
}
.woocommerce-checkout #order_review table.shop_table tfoot .order-total .amount {
	font-family: var(--serif); font-size: 1.4rem; font-weight: 500; color: var(--elfenbein);
}
.woocommerce-checkout #payment { background: transparent !important; }
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--haarlinie); }
.woocommerce-checkout #place_order { width: 100%; padding: 16px; font-size: 0.95rem; margin-top: 8px; }

/* =====================================================================
   Warenkorb-Drawer (Slide-in von rechts) + Mini-Warenkorb
   ===================================================================== */
.wk-overlay {
	position: fixed; inset: 0; z-index: 200;
	background: rgba(11, 11, 13, 0.5);
	opacity: 0; pointer-events: none;
	transition: opacity 0.32s ease;
}
.wk-overlay.offen { opacity: 1; pointer-events: auto; }
.wk-drawer {
	position: fixed; top: 0; right: 0; height: 100%;
	width: min(420px, 92vw); z-index: 201;
	background: var(--grund);
	transform: translateX(100%);
	transition: transform 0.36s cubic-bezier(0.4, 0, 0.2, 1);
	display: flex; flex-direction: column;
	box-shadow: -12px 0 44px rgba(11, 11, 13, 0.18);
}
.wk-drawer.offen { transform: none; }
.wk-drawer-kopf {
	display: flex; align-items: center; justify-content: space-between;
	padding: 22px 26px; border-bottom: 1px solid var(--haarlinie);
}
.wk-drawer-titel { font-family: var(--serif); font-weight: 500; font-size: 1.35rem; color: var(--elfenbein); }
.wk-drawer-schliessen {
	background: none; border: 0; cursor: pointer; line-height: 1;
	font-size: 30px; color: var(--elfenbein); padding: 0 4px;
	transition: color var(--uebergang);
}
.wk-drawer-schliessen:hover { color: var(--gold); }
.wk-drawer-inhalt { flex: 1; overflow-y: auto; padding: 22px 26px; }
body.wk-offen { overflow: hidden; }

/* Mini-Warenkorb in unserer Optik */
.wk-drawer .cart_list { margin: 0; padding: 0; list-style: none; }
.wk-drawer .cart_list li { position: relative; padding: 16px 0 16px 72px; border-bottom: 1px solid var(--haarlinie); min-height: 72px; }
.wk-drawer .cart_list li a:not(.remove) { font-family: var(--serif); font-size: 1.02rem; color: var(--elfenbein); display: block; }
.wk-drawer .cart_list li img { position: absolute; left: 0; top: 16px; width: 56px !important; height: auto; border: 1px solid var(--haarlinie); background: var(--flaeche); }
.wk-drawer .cart_list li .quantity { color: var(--sekundaer); font-size: 0.9rem; }
.wk-drawer .cart_list li a.remove { position: absolute; right: 0; top: 16px; color: var(--sekundaer) !important; font-size: 18px; }
.wk-drawer .woocommerce-mini-cart__total { display: flex; justify-content: space-between; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--haarlinie); font-family: var(--serif); }
.wk-drawer .woocommerce-mini-cart__total .amount { font-size: 1.4rem; font-weight: 500; color: var(--elfenbein); }
.wk-drawer .woocommerce-mini-cart__buttons { display: grid; gap: 10px; margin: 20px 0 0; padding: 0; }
.wk-drawer .woocommerce-mini-cart__buttons .button { width: 100%; text-align: center; margin: 0; }
.wk-drawer .woocommerce-mini-cart__empty-message { color: var(--sekundaer); text-align: center; padding: 24px 0; }