/*
Theme Name:   Shoptimizer Child – Viva Il Gusto
Theme URI:    https://vivailgusto.de
Description:  Child-Theme für Viva Il Gusto. Markenfundament: Farben, Typografie, Buttons, Badges und WooCommerce-Styling für den Onlineshop für italienische Spezialitäten direkt vom Produzenten.
Author:       Viva Il Gusto
Template:     shoptimizer
Version:      1.3.0
Text Domain:  shoptimizer-child
*/

/* =====================================================================
   VIVA IL GUSTO – BRAND TOKENS
   ===================================================================== */
:root {
	/* Farben */
	--vig-olive:        #6A8F4E;  /* Primärfarbe – Aktionen, Links, Akzente */
	--vig-olive-dark:   #587A40;  /* Hover-Zustand Primär */
	--vig-gold:         #C6A24B;  /* Akzent – Eyebrows, Sterne, CTAs auf dunklem Grund */
	--vig-gold-light:   #D9BE7A;
	--vig-cream:        #F7F4EC;  /* Haupt-Hintergrund */
	--vig-sand:         #E7DDC6;  /* Sekundär-Hintergrund, Karten, Linien */
	--vig-ink:          #2E342A;  /* Headlines, dunkle Flächen */
	--vig-body:         #4B5246;  /* Fließtext */
	--vig-terracotta:   #B0613F;  /* Angebote / Sale */
	--vig-white:        #FFFFFF;

	/* Typografie */
	--vig-font-display: "Playfair Display", Georgia, serif;
	--vig-font-sans:    "Montserrat", "Helvetica Neue", Arial, sans-serif;

	/* Form */
	--vig-radius:       8px;
	--vig-radius-card:  10px;
}

/* =====================================================================
   SEITEN-KARTE – gesamte Website als zentrierte, abgerundete Karte
   Beim Verbreitern des Browsers wächst nur der Hintergrund,
   nicht das Layout. Oben UND unten Abstand (Rundung bleibt sichtbar).
   ===================================================================== */
:root { --vig-page-max: 1480px; }   /* Maximalbreite der Karte */

html { background-color: #ECE6DA; }
body {
	background-color: #ECE6DA;
	padding: 0 16px;
}
body #page.site,
body #page {
	max-width: var(--vig-page-max);
	margin: 22px auto;
	background-color: var(--vig-cream);
	border-radius: 22px;
	overflow: hidden;
	box-shadow: 0 24px 60px -36px rgba(46, 52, 42, 0.35);
}
@media (max-width: 880px) {
	body { padding: 0; }
	body #page.site, body #page { margin: 0; border-radius: 0; box-shadow: none; }
}

/* Footer ist letztes Element der Karte – kein Außenabstand darunter */
#page .elementor-location-footer,
#page #colophon { margin-bottom: 0 !important; }

/* Einheitliche Innenbreite aller Boxed-Sektionen (Header, Inhalt, Footer)
   – sorgt für den Guss aus einem Stück */
.elementor-section.elementor-section-boxed > .elementor-container {
	max-width: 1200px;
}

/* ---- Shoptimizer-Reste entfernen, wenn Elementor-Header/-Footer aktiv ----
   WICHTIG: Der Elementor-Header ist ein <header>-Element, daher tag-agnostische
   Geschwister-Selektoren. Entfernt #masthead (weißer Balken), Theme-Nav-Leiste
   und Overlays vollständig. */
.elementor-location-header ~ #masthead,
.elementor-location-header ~ .col-full-nav,
.elementor-location-header ~ .mobile-overlay,
#masthead:empty,
.col-full-nav:empty { display: none !important; }

body.elementor-page .archive-header,
body.home .archive-header { display: none !important; }

/* Elementor-Inhalt randlos in der Karte */
body.home #content .col-full,
body.elementor-page #content .col-full {
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
	margin-top: 0;
}
#content { background: transparent; }

/* =====================================================================
   BASIS-TYPOGRAFIE
   ===================================================================== */
body,
button, input, select, textarea {
	font-family: var(--vig-font-sans);
	color: var(--vig-body);
}

body {
	font-size: 16px;
	line-height: 1.7;
}

h1, h2, h3, h4,
.woocommerce-products-header__title,
.product_title,
.cross-sells > h2,
.related.products > h2,
.up-sells > h2 {
	font-family: var(--vig-font-display);
	font-weight: 600;
	color: var(--vig-ink);
	letter-spacing: 0;
}

h5, h6 { font-family: var(--vig-font-sans); color: var(--vig-ink); }

a { color: var(--vig-olive); }
a:hover { color: var(--vig-olive-dark); }

::selection { background: var(--vig-gold); color: var(--vig-ink); }

/* Eyebrow-Utility (auch in Elementor als CSS-Klasse "vig-eyebrow" nutzbar) */
.vig-eyebrow {
	font-family: var(--vig-font-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--vig-gold);
}

/* =====================================================================
   BUTTONS – global (Shoptimizer / WooCommerce / Gutenberg)
   Primär: Olivgrün, helle Schrift. Hover: dunkleres Oliv.
   ===================================================================== */
.button,
button.button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button,
.added_to_cart,
.single_add_to_cart_button,
.checkout-button,
.wp-block-button__link {
	background-color: var(--vig-olive) !important;
	color: var(--vig-white) !important;
	font-family: var(--vig-font-sans);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.01em;
	border: 0;
	border-radius: var(--vig-radius);
	box-shadow: none;
	transition: background-color .2s ease, transform .15s ease;
}

.button:hover,
button.button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.wc-block-components-button:hover,
.added_to_cart:hover,
.single_add_to_cart_button:hover,
.checkout-button:hover,
.wp-block-button__link:hover {
	background-color: var(--vig-olive-dark) !important;
	color: var(--vig-white) !important;
}

/* Sekundär-Button: hell, dezent umrandet */
.vig-button--secondary,
.button.vig-button--secondary {
	background: transparent !important;
	color: var(--vig-ink) !important;
	border: 1px solid var(--vig-ink) !important;
}
.vig-button--secondary:hover {
	background: var(--vig-ink) !important;
	color: var(--vig-cream) !important;
}

/* Gold-CTA – nur auf dunklen Flächen (Hero, Newsletter, Footer) */
.vig-button--gold,
.button.vig-button--gold {
	background: var(--vig-gold) !important;
	color: var(--vig-ink) !important;
}
.vig-button--gold:hover { background: var(--vig-gold-light) !important; }

/* =====================================================================
   BADGES
   .vig-badge--bio | --neu | --bestseller | --angebot
   ===================================================================== */
.vig-badge {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	font-family: var(--vig-font-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.4;
}
.vig-badge--bio        { background: #EDF2E6; color: var(--vig-olive-dark); }
.vig-badge--neu        { background: #F4E9CE; color: #8A6E2B; }
.vig-badge--bestseller { background: var(--vig-ink); color: var(--vig-gold-light); }
.vig-badge--angebot    { background: var(--vig-terracotta); color: var(--vig-white); }

/* WooCommerce Sale-Flash im Markenstil */
.woocommerce span.onsale,
span.onsale {
	background-color: var(--vig-terracotta) !important;
	color: var(--vig-white) !important;
	font-family: var(--vig-font-sans);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 999px;
	padding: 5px 12px;
	min-width: 0;
	min-height: 0;
	line-height: 1.4;
}

/* =====================================================================
   WOOCOMMERCE – Produktkarten, Preise, Bewertungen
   (greift automatisch, sobald Produkte importiert werden)
   ===================================================================== */
ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--vig-font-sans);
	font-weight: 600;
	font-size: 15px;
	color: var(--vig-ink);
}

.price,
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price {
	color: var(--vig-ink);
	font-weight: 600;
}
.price del { color: #9AA08F; font-weight: 400; }
.price ins { color: var(--vig-terracotta); text-decoration: none; }

.star-rating span::before,
.star-rating::before { color: var(--vig-gold); }

ul.products li.product img {
	border-radius: var(--vig-radius-card);
	background: var(--vig-white);
}

/* Eingabefelder */
input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="search"], select, textarea {
	border: 1px solid var(--vig-sand);
	border-radius: var(--vig-radius);
	background: var(--vig-white);
	font-family: var(--vig-font-sans);
}
input:focus, select:focus, textarea:focus {
	border-color: var(--vig-olive);
	outline: none;
	box-shadow: 0 0 0 3px rgba(106, 143, 78, 0.15);
}

/* Breadcrumbs & Meta dezent */
.woocommerce-breadcrumb { color: #8B907F; font-size: 13px; }
.woocommerce-breadcrumb a { color: var(--vig-olive); }

/* Benachrichtigungen / Notices */
.woocommerce-message,
.woocommerce-info {
	border-top-color: var(--vig-olive);
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--vig-olive); }

/* =====================================================================
   ELEMENTOR-HILFSKLASSEN (in den Templates referenziert)
   ===================================================================== */
/* Kategoriekacheln: sanfter Zoom + Schattenkante */
.vig-tile { overflow: hidden; border-radius: var(--vig-radius-card); transition: transform .25s ease, box-shadow .25s ease; }
.vig-tile:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -20px rgba(46, 52, 42, 0.45); }

/* Karten (Kundenstimmen) */
.vig-card {
	background: var(--vig-white);
	border: 1px solid var(--vig-sand);
	border-radius: var(--vig-radius-card);
}

/* Goldene Hairline unter Eyebrows */
.vig-rule { width: 56px; height: 2px; background: var(--vig-gold); }

@media (prefers-reduced-motion: reduce) {
	.vig-tile, .button, .wp-block-button__link { transition: none; }
	.vig-tile:hover { transform: none; }
}

/* =====================================================================
   CONTACT FORM 7 – Markenstyling (Kontaktseite)
   ===================================================================== */
.wpcf7 form { display: flex; flex-direction: column; gap: 14px; }
.wpcf7 form p { margin: 0; }
.wpcf7 label {
	font-family: var(--vig-font-sans);
	font-size: 13px; font-weight: 600; color: var(--vig-ink);
	display: block; margin-bottom: 6px;
}
.wpcf7 input[type="text"], .wpcf7 input[type="email"],
.wpcf7 input[type="tel"], .wpcf7 textarea, .wpcf7 select {
	width: 100%;
	padding: 12px 14px;
	font-size: 14px;
}
.wpcf7 textarea { min-height: 140px; resize: vertical; }
.wpcf7 input[type="submit"] { width: 100%; cursor: pointer; }
.wpcf7 .wpcf7-spinner { margin: 8px auto 0; }
.wpcf7 form .wpcf7-response-output {
	margin: 4px 0 0; padding: 12px 14px;
	border: 1px solid var(--vig-olive);
	border-radius: var(--vig-radius);
	font-size: 13px; color: var(--vig-ink);
	background: #EDF2E6;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
	border-color: var(--vig-terracotta);
	background: #F6E8E1;
}
.wpcf7-not-valid-tip { font-size: 12px; color: var(--vig-terracotta); margin-top: 4px; }