/*
Theme Name: Elektro Heinemann – Restposten-Shop
Theme URI: https://www.elektro-heinemann.de
Description: WooCommerce Child-Theme fuer den Elektro Heinemann Restposten-, Auslaufartikel- und Ruecklaeufer-Shop. Basiert auf dem kostenlosen Storefront-Theme und nutzt das Corporate Design gemaess Style Guide (Farben, Raleway-Schrift, Logo) mit einem reduzierten, grosszuegigen "Apple Store"-inspirierten Layout.
Author: Elektro Heinemann
Template: storefront
Version: 2.0.0
Text Domain: eh-restposten
*/

/* =========================================================
   Elektro Heinemann Markenfarben (aus Style Guide) -
   unveraendert, nur das Layout/die Anmutung wurde ueberarbeitet.
   Dunkles Grau:  #485A5D
   Mittleres Grau:#5D6A70
   Hellgrau:      #8D9AA1
   Weissgrau:     #D6DADB
   Rot (Akzent):  #E30613
   Schrift: Raleway
   ========================================================= */

:root{
	--eh-dark-gray:#485A5D;
	--eh-mid-gray:#5D6A70;
	--eh-light-gray:#8D9AA1;
	--eh-white-gray:#D6DADB;
	--eh-red:#E30613;
	--eh-white:#FFFFFF;
	--eh-off-white:#FAFAFA;
	--eh-hairline: rgba(72,90,93,.12);
	--eh-font:'Raleway', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

	--eh-max-width: 1280px;
	--eh-radius: 18px;
	--eh-radius-sm: 10px;
	--eh-radius-pill: 980px;
	--eh-shadow: 0 1px 3px rgba(20,25,26,.06), 0 1px 2px rgba(20,25,26,.04);
	--eh-shadow-hover: 0 20px 40px rgba(20,25,26,.10), 0 4px 10px rgba(20,25,26,.06);
	--eh-ease: cubic-bezier(.28,.11,.32,1);
}

/* =========================================================
   Raleway – lokal eingebunden (DSGVO-konform, kein Google-CDN)
   Schriftdateien liegen in assets/fonts/
   ========================================================= */
@font-face{
	font-family:'Raleway';
	font-style:normal;
	font-weight:300;
	font-display:swap;
	src:url('assets/fonts/raleway-300.woff2') format('woff2');
}
@font-face{
	font-family:'Raleway';
	font-style:normal;
	font-weight:400;
	font-display:swap;
	src:url('assets/fonts/raleway-400.woff2') format('woff2');
}
@font-face{
	font-family:'Raleway';
	font-style:normal;
	font-weight:500;
	font-display:swap;
	src:url('assets/fonts/raleway-500.woff2') format('woff2');
}
@font-face{
	font-family:'Raleway';
	font-style:normal;
	font-weight:700;
	font-display:swap;
	src:url('assets/fonts/raleway-700.woff2') format('woff2');
}
@font-face{
	font-family:'Raleway';
	font-style:normal;
	font-weight:900;
	font-display:swap;
	src:url('assets/fonts/raleway-900.woff2') format('woff2');
}

/* =========================================================
   Grundlagen / Reset-Feinschliff
   ========================================================= */
*{ box-sizing:border-box; }

body{
	font-family:var(--eh-font);
	color:var(--eh-dark-gray);
	font-size:16px;
	line-height:1.6;
	-webkit-font-smoothing:antialiased;
	background:var(--eh-white);
}

button, input, select, textarea{ font-family:var(--eh-font); }

h1,h2,h3,h4,h5,h6{
	font-family:var(--eh-font);
	font-weight:700;
	color:var(--eh-dark-gray);
	letter-spacing:-.01em;
	line-height:1.15;
}

h1{ font-size:44px; font-weight:800; letter-spacing:-.02em; }
h2{ font-size:30px; font-weight:700; }
h3{ font-size:20px; font-weight:600; }

p, li{ font-size:16px; font-weight:400; }

a{ color:var(--eh-dark-gray); text-decoration:none; transition:color .2s var(--eh-ease); }
a:hover{ color:var(--eh-red); }

.col-full{ max-width:var(--eh-max-width); }

img{ max-width:100%; height:auto; }

/* =========================================================
   Header / Navigation - reduziert, "sticky" mit Blur
   ========================================================= */
.site-header{
	background-color:rgba(255,255,255,.86);
	backdrop-filter:saturate(180%) blur(14px);
	-webkit-backdrop-filter:saturate(180%) blur(14px);
	border-bottom:1px solid var(--eh-hairline);
	position:sticky;
	top:0;
	z-index:100;
	padding-top:6px;
	padding-bottom:6px;
}

.site-branding img{
	max-height:44px;
	width:auto;
}

.main-navigation ul li a{
	font-weight:600;
	color:var(--eh-dark-gray);
	text-transform:none;
	font-size:14px;
	letter-spacing:0;
	padding-top:10px;
	padding-bottom:10px;
	transition:color .2s var(--eh-ease);
}

.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a{
	color:var(--eh-red);
}

.site-search input[type="search"]{
	border-radius:var(--eh-radius-pill);
	border:1px solid var(--eh-hairline);
	background:var(--eh-off-white);
}

.site-header-cart .cart-contents{
	font-weight:600;
	color:var(--eh-dark-gray);
}

/* =========================================================
   Buttons - Pill-Form, ruhige Uebergaenge
   ========================================================= */
.button,
button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce input.button{
	background-color:var(--eh-red);
	border:none;
	color:var(--eh-white);
	font-weight:600;
	font-size:15px;
	text-transform:none;
	letter-spacing:0;
	border-radius:var(--eh-radius-pill);
	padding:13px 28px;
	transition:transform .2s var(--eh-ease), background-color .2s var(--eh-ease), box-shadow .2s var(--eh-ease);
	box-shadow:none;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce input.button:hover{
	background-color:#c30410;
	transform:translateY(-1px);
	box-shadow:0 8px 16px rgba(227,6,19,.24);
}

.button.eh-secondary,
.woocommerce a.button.eh-secondary{
	background-color:var(--eh-off-white);
	color:var(--eh-dark-gray);
	border:1px solid var(--eh-hairline);
}

.woocommerce a.added_to_cart{
	color:var(--eh-red);
	font-weight:600;
	margin-left:12px;
}

/* =========================================================
   Layout: Sidebar entfernen (siehe functions.php), Inhalt volle Breite
   ========================================================= */
.content-area{
	width:100% !important;
	float:none !important;
}
.widget-area{ display:none !important; }

/* =========================================================
   Seiten-Header / Hero (Shop-, Kategorie-, Seitentitel)
   ========================================================= */
.woocommerce-products-header,
.page-header{
	padding:64px 0 40px;
	text-align:center;
	border-bottom:none;
}

.woocommerce-products-header__title.page-title,
.page-header .page-title{
	font-size:48px;
	font-weight:800;
	letter-spacing:-.02em;
	margin-bottom:8px;
}

.woocommerce-breadcrumb{
	color:var(--eh-light-gray);
	font-size:13px;
	padding:20px 0 0;
}
.woocommerce-breadcrumb a{ color:var(--eh-light-gray); }
.woocommerce-breadcrumb a:hover{ color:var(--eh-red); }

/* =========================================================
   Produktgrid - grosszuegig, ohne Kacheloptik
   ========================================================= */
ul.products{
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:48px 32px;
	margin:0 0 48px !important;
}

/* WooCommerce/Storefront fuegen fuer den alten Float-Clearfix
   ::before/::after-Pseudoelemente ein. Im Grid-Kontext wuerden diese
   als leere erste Zelle gezaehlt und alle Produkte um eine Spalte
   verschieben - deshalb hier deaktiviert. */
ul.products::before,
ul.products::after{
	content:none !important;
	display:none !important;
}

ul.products li.product{
	display:block !important;
	position:relative;
	width:100% !important;
	margin:0 !important;
	padding:0 !important;
	text-align:left;
	list-style:none;
}

ul.products li.product a img{
	border-radius:var(--eh-radius);
	background:var(--eh-off-white);
	aspect-ratio:1/1;
	object-fit:contain;
	padding:28px;
	transition:transform .4s var(--eh-ease), box-shadow .3s var(--eh-ease);
}

ul.products li.product:hover a img{
	transform:translateY(-4px);
	box-shadow:var(--eh-shadow-hover);
}

ul.products li.product .woocommerce-loop-product__title{
	font-weight:600;
	font-size:16px;
	color:var(--eh-dark-gray);
	margin-top:18px;
	margin-bottom:4px;
}

.woocommerce ul.products li.product .price{
	color:var(--eh-dark-gray);
	font-weight:600;
	font-size:16px;
}

.woocommerce ul.products li.product .price del{
	color:var(--eh-light-gray);
	opacity:1;
	font-weight:400;
	font-size:14px;
	margin-right:6px;
}

.woocommerce ul.products li.product .price ins{
	color:var(--eh-red);
	text-decoration:none;
}

ul.products li.product .button{
	margin-top:14px;
	font-size:13px;
	padding:10px 22px;
}

/* Sale-Badge: Prozent-Rabatt statt "Sale!" (siehe functions.php) */
.woocommerce span.onsale{
	background-color:var(--eh-dark-gray);
	color:var(--eh-white);
	font-weight:600;
	font-size:12px;
	min-height:auto;
	min-width:auto;
	line-height:1;
	padding:7px 12px;
	border-radius:var(--eh-radius-pill);
	top:16px;
	left:16px;
	right:auto;
	text-transform:none;
	box-shadow:0 2px 6px rgba(0,0,0,.15);
}

/* =========================================================
   Zustands-Badges: Restposten / Auslaufartikel / Rueckläufer
   ========================================================= */
.eh-badge{
	display:inline-block;
	font-size:11px;
	font-weight:600;
	text-transform:none;
	letter-spacing:.01em;
	color:var(--eh-white);
	padding:6px 12px;
	border-radius:var(--eh-radius-pill);
	margin:0 6px 8px 0;
	box-shadow:0 2px 6px rgba(0,0,0,.12);
}

.eh-badge--restposten{ background-color:var(--eh-red); }
.eh-badge--auslaufartikel{ background-color:var(--eh-dark-gray); }
.eh-badge--ruecklaeufer{ background-color:var(--eh-mid-gray); }
.eh-badge--vorfuehmodell{ background-color:var(--eh-light-gray); }

.eh-badges-loop{
	position:absolute;
	top:16px;
	left:16px;
	z-index:2;
	display:flex;
	flex-wrap:wrap;
	max-width:80%;
}

.eh-badges-single{ margin-bottom:16px; }

/* Zustandshinweis auf Produktseite - ruhige Karte statt Kastenlinie */
.eh-zustand-hinweis{
	background-color:var(--eh-off-white);
	border:1px solid var(--eh-hairline);
	border-radius:var(--eh-radius-sm);
	padding:16px 20px;
	margin:20px 0;
	font-size:14px;
	font-weight:400;
	color:var(--eh-mid-gray);
}

.eh-zustand-hinweis strong{
	display:block;
	margin-bottom:4px;
	font-weight:600;
	color:var(--eh-dark-gray);
	font-size:13px;
	text-transform:uppercase;
	letter-spacing:.04em;
}

/* =========================================================
   Einzelproduktseite
   ========================================================= */
.single-product div.product{
	padding-top:20px;
}

/* Storefronts "Vorheriges/naechstes Produkt"-Pfeile mit Mini-Vorschaubild
   ragen per Default leicht von links ins Bild hinein - passt nicht zur
   aufgeraeumten Optik und wird deshalb ausgeblendet. */
.storefront-product-pagination{
	display:none !important;
}

.single-product div.product .woocommerce-product-gallery img{
	border-radius:var(--eh-radius);
	background:var(--eh-off-white);
}

.single-product div.product .product_title{
	font-size:34px;
	font-weight:800;
	letter-spacing:-.01em;
	margin-bottom:12px;
}

.single-product div.product p.price,
.single-product div.product span.price{
	font-size:28px;
	font-weight:700;
	color:var(--eh-dark-gray);
}

.single-product div.product p.price del,
.single-product div.product span.price del{
	font-size:18px;
	color:var(--eh-light-gray);
	font-weight:400;
}

.single-product div.product p.price ins,
.single-product div.product span.price ins{
	color:var(--eh-red);
	text-decoration:none;
}

.single-product div.product .woocommerce-product-details__short-description{
	color:var(--eh-mid-gray);
	font-size:16px;
	line-height:1.7;
}

.single-product form.cart .quantity input{
	border-radius:var(--eh-radius-sm);
	border:1px solid var(--eh-hairline);
	height:48px;
}

.woocommerce-tabs ul.tabs li a{
	font-weight:600;
	text-transform:none;
	font-size:15px;
}

.woocommerce-tabs .panel{
	font-size:16px;
	line-height:1.75;
	color:var(--eh-mid-gray);
}

/* Sticky "In den Warenkorb"-Leiste (Storefront) - ruhige Blur-Bar */
.storefront-sticky-add-to-cart{
	background-color:rgba(255,255,255,.9);
	backdrop-filter:saturate(180%) blur(14px);
	-webkit-backdrop-filter:saturate(180%) blur(14px);
	border-top:1px solid var(--eh-hairline);
	box-shadow:0 -8px 24px rgba(20,25,26,.06);
}

.storefront-sticky-add-to-cart__content img{
	border-radius:var(--eh-radius-sm);
}

/* Verwandte Produkte */
.related.products{
	border-top:1px solid var(--eh-hairline);
	padding-top:48px;
	margin-top:48px;
}
.related.products h2{
	text-align:center;
	margin-bottom:32px;
}

/* =========================================================
   Warenkorb / Kasse
   ========================================================= */
.woocommerce-cart table.cart,
.woocommerce-checkout table.cart,
.wc-block-cart,
.wc-block-checkout{
	font-size:15px;
}

.wc-block-components-panel,
.wc-block-cart-item,
.wc-block-components-totals-wrapper{
	border-color:var(--eh-hairline) !important;
}

.wc-block-components-sidebar .wc-block-components-panel,
.cart-collaterals .cart_totals{
	background:var(--eh-off-white);
	border-radius:var(--eh-radius);
	padding:24px;
}

.woocommerce table.shop_table{
	border-radius:var(--eh-radius-sm);
	border:1px solid var(--eh-hairline);
}

.woocommerce table.shop_table th{
	border-bottom:1px solid var(--eh-hairline);
	font-weight:600;
}

.woocommerce #payment,
.woocommerce-checkout #payment{
	background:var(--eh-off-white);
	border-radius:var(--eh-radius);
}

.woocommerce #payment div.payment_box,
.woocommerce-checkout #payment div.payment_box{
	background:var(--eh-white);
	border-radius:var(--eh-radius-sm);
}

/* =========================================================
   Formularfelder generell
   ========================================================= */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-page form .form-row select{
	border-radius:var(--eh-radius-sm);
	border:1px solid var(--eh-hairline);
	padding:12px 14px;
}

/* =========================================================
   Footer - reduziert, dunkel, viel Weissraum
   ========================================================= */
.site-footer,
.site-footer .widget-title,
.site-footer a{
	background-color:var(--eh-dark-gray);
	color:var(--eh-white-gray);
}

.site-footer{
	padding-top:56px;
}

.site-footer a:hover{ color:var(--eh-red); }

.site-footer .widget-title{
	color:var(--eh-white);
	font-weight:600;
	font-size:13px;
	letter-spacing:.04em;
	text-transform:uppercase;
	margin-bottom:16px;
}

.site-footer .site-info{
	border-top:1px solid rgba(255,255,255,.1);
	color:var(--eh-light-gray);
	font-size:13px;
	padding-top:20px;
	margin-top:20px;
}

/* =========================================================
   Kategorie-Header (Restposten-Landingpage) - optionaler Hero-Block
   ========================================================= */
.eh-hero{
	background-color:var(--eh-off-white);
	color:var(--eh-dark-gray);
	padding:72px 32px;
	margin-bottom:40px;
	border-radius:var(--eh-radius);
	text-align:center;
}

.eh-hero h1,
.eh-hero p{ color:var(--eh-dark-gray); }

.eh-hero p{ color:var(--eh-mid-gray); font-size:18px; max-width:640px; margin:12px auto 0; }

/* =========================================================
   Responsive Anpassungen
   ========================================================= */
@media (max-width:768px){
	h1{ font-size:32px; }
	.woocommerce-products-header__title.page-title,
	.page-header .page-title{ font-size:32px; }
	.eh-hero{ padding:48px 20px; }

	ul.products{
		grid-template-columns:repeat(2, 1fr) !important;
		gap:32px 16px;
	}

	.single-product div.product .product_title{ font-size:26px; }
	.single-product div.product p.price,
	.single-product div.product span.price{ font-size:22px; }
}

@media (max-width:480px){
	ul.products{
		grid-template-columns:1fr !important;
	}
}