/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/

/* ================================================================
   PEPTHAUS — style.css

   REGOLA: ogni componente ha UNA sola sorgente di stile.
   · Top bar  → HTML Block „PEPTHAUS Topbar" (CSS nel blocco)
   · Footer   → HTML Block „PEPTHAUS Footer" (CSS nel blocco)
   · Checkout → Shoppe-Template (Elementor). Layout gehört Shoppe.
     Hier NUR die Farb-Angleichung im Block „SHOPPE CHECKOUT"
     ganz unten — kein Layout, nur Akzentfarben.
   · Qui vivono SOLO: width system, PDP, pagina charge, pulizie tema.
   Non aggiungere qui regole per topbar o footer: creerebbero
   conflitti con i blocchi.
   ================================================================ */


/* ================================================================
   WIDTH SYSTEM
   Commerce = wide · Proof = controlled · Reading = narrow
   ================================================================ */

.pep-w-commerce{
	max-width:1420px;
	margin-inline:auto;
	padding-inline:clamp(24px,3vw,40px);
}
.pep-w-compare{
	max-width:1320px;
	margin-inline:auto;
	padding-inline:clamp(24px,3.5vw,44px);
}
.pep-w-proof{
	max-width:1280px;
	margin-inline:auto;
	padding-inline:clamp(24px,3.5vw,44px);
}
.pep-w-read{
	max-width:1120px;
	margin-inline:auto;
	padding-inline:clamp(22px,3vw,36px);
}
.pep-measure{max-width:680px;}


/* ================================================================
   PDP — split gallery / buybox (tier COMMERCE 1420)
   Desktop: 45 / 55 nebeneinander.
   Mobile:  beide Spalten volle Breite, untereinander —
            Buybox darf NICHT auf halbe Breite fallen.
   ================================================================ */

.pep-pdp-split{
	display:flex !important;
	flex-direction:row !important;
	flex-wrap:nowrap !important;
	gap:clamp(28px,4vw,56px);
	width:100%;
	max-width:1420px;
	margin-left:auto !important;
	margin-right:auto !important;
	padding-inline:clamp(24px,3vw,40px);
	align-items:flex-start;
	box-sizing:border-box;
}
.pep-pdp-split > *{min-width:0;box-sizing:border-box;}
.pep-pdp-split > *:first-child{flex:0 0 45% !important;max-width:45% !important;}
.pep-pdp-split > *:last-child{flex:0 0 55% !important;max-width:55% !important;}
.pep-pdp-split img{max-width:100% !important;height:auto !important;}

/* Buybox: der PHP-Inline-Wert max-width:620px gilt nur auf Desktop */
.pep-buybox{width:100%;}

/* ---- MOBILE / TABLET: gestapelt, volle Breite ---- */
@media (max-width:1024px){
	.pep-pdp-split{
		flex-direction:column !important;
		flex-wrap:wrap !important;
		gap:24px;
		padding-inline:18px;
	}
	.pep-pdp-split > *,
	.pep-pdp-split > *:first-child,
	.pep-pdp-split > *:last-child{
		flex:0 0 100% !important;
		width:100% !important;
		max-width:100% !important;
	}
	/* Inline max-width:620px der Buybox aufheben → volle Breite */
	.pep-pdp-split .pep-buybox,
	body .pep-buybox{
		max-width:100% !important;
		width:100% !important;
	}
	/* Elementor-/Woodmart-Spalten in der PDP nicht auf 50 % halten */
	.pep-pdp-split .elementor-column,
	.pep-pdp-split .elementor-widget,
	.pep-pdp-split .elementor-widget-container,
	.pep-pdp-split .wd-col,
	.pep-pdp-split .col-lg-6,
	.pep-pdp-split .col-md-6{
		width:100% !important;
		max-width:100% !important;
		flex:0 0 100% !important;
	}
}

@media (max-width:400px){
	.pep-pdp-split{padding-inline:14px;gap:20px;}
}


/* ================================================================
   PDP — sezioni editoriali (tier READING 1120)
   Struttura: <section class="pep-sec">
                 <span class="pep-chip">…</span>
                 <h2>…</h2>  <p>…</p>  <ul>…</ul>
                 [<div class="pep-sec-split"> <div>…</div> <div class="pep-sec-fig">…</div> </div>]
              </section>
   ================================================================ */

.pep-sec{
	max-width:1120px;
	margin-inline:auto;
	padding:clamp(40px,5vw,64px) clamp(22px,3vw,36px);
	border-top:1px solid #DCE8E4;
	font-family:Archivo,sans-serif;
	color:#16191B;
}
.pep-sec:first-child{border-top:none;}

/* Eyebrow-Chip mit Hairline: editoriales Signal */
.pep-chip{
	display:inline-flex;
	align-items:center;
	gap:10px;
	font-family:'IBM Plex Mono',monospace;
	font-weight:500;
	font-size:11px;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:#1F6B62 !important;
	margin-bottom:16px;
}
.pep-chip::before{
	content:"";
	width:22px;
	height:1px;
	background:#43A794;
	flex:0 0 22px;
}

.pep-sec h2{
	font-family:Archivo,sans-serif !important;
	font-weight:800 !important;
	font-size:clamp(24px,3vw,32px);
	line-height:1.15;
	color:#16191B !important;
	letter-spacing:-.015em;
	margin:0 0 18px;
	max-width:24ch;
}

.pep-sec p{
	font-family:Archivo,sans-serif;
	font-size:16px;
	line-height:1.72;
	color:#16191B !important;
	max-width:680px;
	margin:0 0 1em;
}
.pep-sec p:last-child{margin-bottom:0;}

.pep-sec p strong{font-weight:600;}

.pep-sec a{
	color:#1F6B62 !important;
	text-decoration:underline;
	text-underline-offset:3px;
	text-decoration-color:#43A794;
}

/* Liste mit Verderame-Strich */
.pep-sec ul{
	list-style:none;
	margin:20px 0 0;
	padding:0;
	max-width:680px;
}
.pep-sec ul li{
	font-family:Archivo,sans-serif;
	font-size:15px;
	line-height:1.6;
	color:#16191B !important;
	padding:11px 0 11px 26px;
	position:relative;
	border-bottom:1px solid #DCE8E4;
}
.pep-sec ul li:last-child{border-bottom:0;}
.pep-sec ul li::before{
	content:"";
	position:absolute;
	left:0;
	top:20px;
	width:12px;
	height:2px;
	background:#2E8A7E;
}

/* Zwei-Spalten-Variante mit Figur */
.pep-sec-split{
	display:flex;
	gap:48px;
	align-items:flex-start;
	flex-wrap:wrap;
}
.pep-sec-split > div{flex:1;min-width:300px;}

.pep-sec-fig{
	background:#F2F3F1;
	border:1px solid #DCE8E4;
	border-radius:12px;
	padding:28px;
}
.pep-sec-fig img{max-width:100%;height:auto;display:block;}

/* Kleine Kennzahlen-Zeile (optional): <div class="pep-sec-kv"><b>Wert</b><span>Label</span>…</div> */
.pep-sec-kv{
	display:flex;
	flex-wrap:wrap;
	gap:14px 32px;
	margin-top:22px;
	padding-top:20px;
	border-top:1px solid #DCE8E4;
}
.pep-sec-kv > div{min-width:0;}
.pep-sec-kv b{
	display:block;
	font-family:'IBM Plex Mono',monospace;
	font-weight:600;
	font-size:19px;
	letter-spacing:-.01em;
	color:#16191B !important;
	border-bottom:1.5px solid #43A794;
	padding-bottom:3px;
	margin-bottom:6px;
	width:max-content;
	max-width:100%;
}
.pep-sec-kv span{
	display:block;
	font-size:10.5px;
	font-weight:600;
	letter-spacing:.09em;
	text-transform:uppercase;
	color:#8A9094 !important;
}

/* ---- MOBILE ---- */
@media (max-width:620px){
	.pep-sec{padding:30px 18px;}
	.pep-chip{font-size:10px;letter-spacing:.12em;margin-bottom:12px;}
	.pep-chip::before{width:18px;flex-basis:18px;}
	.pep-sec h2{font-size:22px;margin-bottom:14px;max-width:none;}
	.pep-sec p{font-size:15px;line-height:1.66;}
	.pep-sec ul{margin-top:16px;}
	.pep-sec ul li{font-size:14.5px;padding:10px 0 10px 22px;}
	.pep-sec ul li::before{top:18px;width:10px;}
	.pep-sec-split{gap:20px;}
	.pep-sec-split > div{min-width:0;flex:1 1 100%;}
	.pep-sec-fig{padding:18px;border-radius:8px;}
	.pep-sec-kv{gap:12px 22px;margin-top:18px;padding-top:16px;}
	.pep-sec-kv b{font-size:17px;}
	.pep-sec-kv span{font-size:10px;}
}

@media (max-width:400px){
	.pep-sec{padding:26px 14px;}
	.pep-sec h2{font-size:20px;}
	.pep-sec p{font-size:14.5px;}
	.pep-sec ul li{font-size:14px;}
}


/* ================================================================
   Chargen-Seite — ledger
   ================================================================ */

.pep-charge-wrap .pep-ledger{max-width:1320px;margin-inline:auto;}


/* ================================================================
   THEME — Aufräumen
   ================================================================ */

/* kein horizontaler Scroll */
html,body{max-width:100%;overflow-x:hidden;}

/* Woodmart Copyright-Leiste ausblenden */
.copyrights-wrapper,
.wd-footer .copyrights-wrapper{display:none !important;}

/* Mobile Bottom-Navigation ausblenden */
@media (max-width:1024px){
	.wd-toolbar,
	.mobile-nav-wrapper,
	.wd-sticky-nav{display:none !important;}
	body{padding-bottom:0 !important;}
}


/* ================================================================
   SHOPPE CHECKOUT — nur Farb-Angleichung, KEIN Layout

   Das Shopify-artige Layout des Shoppe-Templates bleibt unberührt:
   keine Regeln für Breiten, Abstände, Felder, Spalten oder Reihen-
   folge. Hier werden ausschließlich die Shoppe-Standardfarben (Blau)
   auf die Markenfarben gezogen. Alles über body.woocommerce-checkout
   gescoped — wirkt also nur auf der Checkout-Seite.

   Falls Shoppe eigene Utility-Klassen für Buttons nutzt und der
   Bestell-Button unten nicht grün wird: im Inspector die Klasse des
   Buttons ablesen und dem ersten Selektor-Block hinzufügen.
   Wieder Shoppe-Blau? Diesen ganzen Block löschen — fertig.
   ================================================================ */

/* Bestell-Button + primäre Aktions-Buttons */
body.woocommerce-checkout #place_order,
body.woocommerce-checkout button[type="submit"].button,
body.woocommerce-checkout .wc-block-components-checkout-place-order-button{
	background:#1F6B62 !important;
	border-color:#1F6B62 !important;
	color:#F2F3F1 !important;
}
body.woocommerce-checkout #place_order:hover,
body.woocommerce-checkout button[type="submit"].button:hover,
body.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover{
	background:#14453F !important;
	border-color:#14453F !important;
}

/* Links (AGB, Widerruf, Datenschutz, „Continue shopping") */
body.woocommerce-checkout a:not(.button):not([class*="pep-"]){
	color:#1F6B62;
}

/* Radios & Checkboxen: native accent-color statt Shoppe-Blau.
   Nicht-destruktiv — ändert nur die Farbe des nativen Controls. */
body.woocommerce-checkout input[type="radio"],
body.woocommerce-checkout input[type="checkbox"]{
	accent-color:#1F6B62;
}

/* Fokus-Ring der Eingabefelder */
body.woocommerce-checkout input:focus,
body.woocommerce-checkout select:focus,
body.woocommerce-checkout textarea:focus{
	border-color:#1F6B62 !important;
	box-shadow:0 0 0 1px #1F6B62 !important;
	outline:none;
}

/* PEPTHAUS-Widgets im Shoppe-Layout ([pepthaus_payments] etc.):
   sicherstellen, dass Shoppe ihnen keine fremden Button-/Card-
   Styles vererbt. */
body.woocommerce-checkout .pep-pay__card{
	all:revert;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:78px;
	height:48px;
	padding:0 16px;
	background:#FFFFFF;
	border:1px solid #DCE8E4;
	border-radius:10px;
	box-shadow:0 1px 2px rgba(22,25,27,.04);
}

/* ---- MOBILE: Kacheln nicht bis an die Viewport-Kante ----
   Modul 24 (PDP-Mobile) setzt .pep-pay__card auf flex:1 1 0 und
   die Reihe auf nowrap — auf der PDP richtig, im Shoppe-Checkout
   drückt es die Kacheln an die Ränder. Der Checkout-Scope hier ist
   spezifischer (0-2-1 vs 0-1-1) und gewinnt deshalb trotz beider
   !important. */
@media (max-width:700px){
	body.woocommerce-checkout .pep-pay{
		padding-inline:18px !important;
		box-sizing:border-box;
		max-width:100%;
	}
	body.woocommerce-checkout .pep-pay__row{
		flex-wrap:wrap !important;
		justify-content:flex-start !important;
		gap:8px !important;
	}
	body.woocommerce-checkout .pep-pay__card{
		flex:0 1 auto !important;
		min-width:70px !important;
		height:42px !important;
		padding:0 12px !important;
	}
	body.woocommerce-checkout .pep-pay__card img.pep-pay__img{
		height:16px !important;
		max-height:16px !important;
	}
}