/*
Theme Name: Müller Food
Theme URI: https://mueller-food.ch
Author: Hostaro
Author URI: https://hostaro.ch
Description: Nachbau des Müller-Food-Auftritts (matzes ravioli) als klassisches WordPress-Theme mit WooCommerce-Unterstützung. Testaufbau auf der Dev-Instanz, um WordPress und WooCommerce mit der bestehenden Eigenbau-Lösung zu vergleichen.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.0
License: proprietär
Text Domain: muellerfood
Tags: custom-theme, woocommerce

Das eigentliche Design liegt unverändert in assets/css/style.css (aus der Live-Site
uebernommen). Diese Datei traegt nur den Theme-Kopf, den WordPress verlangt.
*/

/* --------------------------------------------------------------------------
   Ergaenzungen fuer den WordPress-Aufbau. Das uebernommene Design bleibt in
   assets/css/style.css unveraendert; hier steht nur, was WordPress zusaetzlich
   braucht (Karten sind jetzt verlinkt, Rechtstexte haben einen flacheren Kopf,
   WooCommerce-Seiten brauchen einen Rahmen).
   -------------------------------------------------------------------------- */

.page-hero--sm{ min-height:38vh; }

/* Sorten-Karten verlinken aufs Produkt */
.card-link{ display:block; color:inherit; text-decoration:none; }
.card-img--empty{ aspect-ratio:1/1; background:var(--cream-2); }

/* Allgemeine Inhaltssektion (Rechtstexte, Ueber uns) */
.sec{ padding:clamp(70px,10vh,120px) 0; }
.sec--legal{ padding-top:clamp(48px,7vh,80px); }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }
.legal{ max-width:760px; }
.legal h2{ font-family:var(--serif); font-weight:500; font-size:1.5rem; margin:2em 0 .5em; }
.legal p, .legal li{ margin-bottom:.9em; }
.legal ul{ margin-left:1.2em; }
.contact-list{ list-style:none; padding:0; margin:1.2em 0 0; line-height:2; }

/* WooCommerce im Müller-Food-Rahmen */
.wc-sec{ padding-top:calc(84px + clamp(40px,7vh,90px)); }
.woocommerce ul.products li.product a img{ border-radius:var(--r); }
.woocommerce .button, .woocommerce a.button, .woocommerce button.button,
.woocommerce #respond input#submit{
  border-radius:100px; background:var(--gold); color:#241d0e;
  font-family:var(--sans); font-weight:600; letter-spacing:.02em; padding:.85em 1.6em;
}
.woocommerce .button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover{
  background:var(--gold-soft); color:#241d0e;
}
.woocommerce div.product .product_title{ font-family:var(--serif); font-weight:500; }
.woocommerce div.product p.price, .woocommerce ul.products li.product .price{ color:var(--text); }
.woocommerce-message, .woocommerce-info{ border-top-color:var(--gold); }
.woocommerce-message::before, .woocommerce-info::before{ color:var(--gold); }

/* Warenkorb-Link im Kopfbereich (gibt es in der statischen Vorlage nicht) */
.nav-cart{ position:relative; margin-left:.4em; }
.nav-cart-n{
  display:inline-block; min-width:1.5em; margin-left:.35em; padding:.05em .35em;
  border-radius:100px; background:var(--gold); color:#241d0e;
  font-size:.78em; font-weight:700; text-align:center; line-height:1.5;
}
@media (max-width:760px){ .nav-cart{ margin-left:0; } }

/* Seiten ohne Bildkopf (Shop, Warenkorb, Kasse, Konto, Produktseiten):
   Der Kopfbereich ist dort von Anfang an dunkel, sonst steht weisse Schrift
   auf cremefarbenem Grund und ist unlesbar. Entspricht dem .scrolled-Zustand. */
.mf-no-hero .site-header{
  background:rgba(34,38,30,.94);
  backdrop-filter:blur(12px);
  box-shadow:0 1px 0 rgba(198,161,91,.18);
}
/* Inhalt nicht unter den festen Kopf schieben */
.mf-no-hero .wc-sec{ padding-top:calc(84px + clamp(30px,5vh,60px)); }
.mf-no-hero main > .sec:first-child{ padding-top:calc(84px + clamp(30px,5vh,60px)); }

/* WooCommerce liefert `.woocommerce-page img{height:auto}` mit — das ist
   spezifischer als `.brand-logo{height:48px}` und blaeht das Logo im Shop auf
   seine SVG-Originalgroesse (150px) auf. Deshalb hier mit hoeherer Spezifitaet. */
.site-header .brand-logo{ height:48px; width:auto; }
.site-header.scrolled .brand-logo{ height:40px; }
.mf-no-hero .site-header .brand-logo{ height:40px; }

/* WooCommerce faerbt Hauptaktionen ueber `.button.alt` in seinem eigenen Violett.
   Das ist spezifischer als die Regel oben, deshalb hier nochmals gezielt. */
.woocommerce .button.alt, .woocommerce a.button.alt, .woocommerce button.button.alt,
.woocommerce input.button.alt, .woocommerce #respond input#submit.alt,
.woocommerce .checkout-button, .woocommerce #place_order{
  background:var(--gold); color:#241d0e; border-radius:100px;
  font-family:var(--sans); font-weight:600; letter-spacing:.02em;
}
.woocommerce .button.alt:hover, .woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover,
.woocommerce .checkout-button:hover, .woocommerce #place_order:hover{
  background:var(--gold-soft); color:#241d0e;
}
/* Mengenfeld und Formularfelder an die Marke angleichen */
.woocommerce .quantity .qty, .woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea, .woocommerce form .form-row select{
  border:1px solid rgba(35,39,31,.24); border-radius:8px; padding:.6em .7em;
  font-family:var(--sans); background:#fff;
}