/*
Theme Name:  PREWI Shop
Template:    oceanwp
Description: Child-Theme fuer shop.prewi.ch. Farben, Schriften, Knoepfe und
             Kacheln nach PREWI-Produkte-WP/design-system.html (verbindlich).
Version:     0.8.2
Text Domain: prewi-shop
*/

:root {
  --orange: #FF6502;
  --orange-deep: #C24C02;
  --ink: #1E1B18;
  --paper: #FAF8F5;
  --surface: #FFFFFF;
  --concrete: #857F78;
  --concrete-light: #E7E3DD;
  --rule: #D8D2C8;
  --rule-strong: #b9b2a5;
  --font-sans: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-slab: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;  /* Titel ebenfalls Inter (Nutzer 2026-09-24) */
  --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px;
  --tile-shadow: 0 1px 3px rgba(30, 27, 24, 0.09), 0 8px 20px rgba(30, 27, 24, 0.10);
  --tile-shadow-hover: 0 2px 4px rgba(30, 27, 24, 0.10), 0 14px 28px rgba(30, 27, 24, 0.15);
}

/* ---------- Grundlagen ---------- */

body, .site-content, #main {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
}

h1, h2, h3, h4, h5,
.product_title, .entry-title, .page-header-title,
.woocommerce-loop-product__title, .widget-title {
  font-family: var(--font-slab);
  color: var(--ink);
  letter-spacing: -0.01em;
}

a { color: var(--orange-deep); }
a:hover { color: var(--orange); }

/* ---------- Knoepfe (Design-System: .btn / .btn-primary) ---------- */

.woocommerce .button, .woocommerce button.button, .woocommerce a.button,
.woocommerce input.button, .woocommerce #respond input#submit,
.woocommerce .button.alt, .wc-block-components-button,
.theme-button, button[type="submit"] {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--space-3) var(--space-6);
  background: var(--orange);
  border: 1px solid var(--orange);
  border-radius: 2px;
  color: #1a0e00;
  transition: background .15s ease, transform .15s ease;
}

.woocommerce .button:hover, .woocommerce button.button:hover,
.woocommerce a.button:hover, .woocommerce .button.alt:hover,
.wc-block-components-button:hover, .theme-button:hover {
  background: var(--orange-deep);
  border-color: var(--orange-deep);
  color: #fff;
  transform: translateY(-1px);
}

/* Zweitrangige Aktionen bleiben ruhig (Design-System: .btn-secondary) */
.woocommerce a.button.wc-backward, .woocommerce button[name="update_cart"] {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.woocommerce a.button.wc-backward:hover, .woocommerce button[name="update_cart"]:hover {
  background: var(--ink);
  color: var(--paper);
}

/* ---------- Produktliste als Kacheln ---------- */

.woocommerce ul.products li.product {
  background: var(--surface);
  padding: var(--space-4);
  box-shadow: var(--tile-shadow);
  transition: box-shadow .15s ease, transform .15s ease;
}
.woocommerce ul.products li.product:hover {
  box-shadow: var(--tile-shadow-hover);
  transform: translateY(-2px);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 1.05rem;
  margin-bottom: var(--space-2);
}
.woocommerce ul.products li.product img { background: var(--concrete-light); }

/* ---------- Preise ---------- */

.woocommerce .price, .woocommerce-Price-amount {
  color: var(--ink);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.woocommerce .price del { color: var(--concrete); font-weight: 400; }
.woocommerce .price ins { text-decoration: none; }
.woocommerce-price-suffix, small.woocommerce-price-suffix {
  color: var(--concrete);
  font-size: 0.8rem;
  font-weight: 400;
}

/* ---------- Produktseite ---------- */

.single-product .product_title { font-size: 2rem; }
.single-product .summary .price { font-size: 1.5rem; }
.single-product .woocommerce-product-details__short-description { color: #3a342c; }

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--orange-deep); }
.woocommerce table.shop_attributes th { font-family: var(--font-sans); color: var(--concrete); font-weight: 500; }
.woocommerce table.shop_attributes td { color: var(--ink); }

/* Zeichen-Konfigurator (Plugin prewi-shop) */
.prewi-zeichen {
  background: var(--surface);
  border-left: 3px solid var(--orange);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
  box-shadow: var(--tile-shadow);
}
.prewi-zeichen label { font-weight: 500; display: block; margin-bottom: var(--space-2); }
.prewi-zeichen input[type="text"], .prewi-zeichen input[type="number"] {
  width: 100%;
  max-width: 320px;
  padding: var(--space-3);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  font-family: var(--font-sans);
}
.prewi-zeichen input:focus { outline: 2px solid var(--orange); outline-offset: 1px; }
.prewi-zeichen small { color: var(--concrete); display: block; margin-top: var(--space-2); }
.prewi-zeichen__summe {
  font-family: var(--font-slab);
  font-size: 1.25rem;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule);
}
.prewi-zeichen__summe:empty { display: none; }

/* ---------- Warenkorb und Kasse ---------- */

.woocommerce table.shop_table { border-color: var(--rule); }
.woocommerce table.shop_table th {
  font-family: var(--font-sans);
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--concrete);
}
.woocommerce-cart .cart_totals h2, .woocommerce-checkout #order_review_heading { font-family: var(--font-slab); }
.woocommerce .cart_totals table.shop_table tr.order-total .amount { font-size: 1.2rem; }

/* Hinweise: Fehler orange-rot, Erfolg im PREWI-Orange */
.woocommerce-message, .wc-block-components-notice-banner.is-success {
  border-top-color: var(--orange);
}
.woocommerce-message::before { color: var(--orange); }
.woocommerce-info, .wc-block-components-notice-banner.is-info { border-top-color: var(--concrete); }

/* ---------- Fusszeile ---------- */

#footer-widgets, #footer-bottom { background: var(--ink); color: var(--concrete-light); }
#footer-bottom a, #footer-widgets a { color: var(--concrete-light); }
#footer-bottom a:hover, #footer-widgets a:hover { color: var(--orange); }

/* ---------- Kleine Bildschirme ---------- */

@media (max-width: 767px) {
  .single-product .product_title { font-size: 1.5rem; }
  .prewi-zeichen { padding: var(--space-4); }
  .prewi-zeichen input[type="text"], .prewi-zeichen input[type="number"] { max-width: 100%; }
}

/* ---------- Vorrang vor OceanWP ----------
   OceanWP setzt eigene Farben fuer Knoepfe und Preise (Standard: gruen) per
   Customizer-CSS, das nach dem Child-Theme geladen wird. Deshalb hier gezielt
   mit hoeherer Spezifitaet und !important nur fuer die Farben. */

body.woocommerce .button,
body.woocommerce button.button,
body.woocommerce a.button,
body.woocommerce input.button,
body.woocommerce #respond input#submit,
body.woocommerce .button.alt,
body .wc-block-components-button,
body.woocommerce ul.products li.product .button,
body.woocommerce div.product form.cart .button {
  background-color: var(--orange) !important;
  border-color: var(--orange) !important;
  color: #1a0e00 !important;
}

body.woocommerce .button:hover,
body.woocommerce button.button:hover,
body.woocommerce a.button:hover,
body.woocommerce .button.alt:hover,
body .wc-block-components-button:hover,
body.woocommerce ul.products li.product .button:hover,
body.woocommerce div.product form.cart .button:hover {
  background-color: var(--orange-deep) !important;
  border-color: var(--orange-deep) !important;
  color: #fff !important;
}

body.woocommerce a.button.wc-backward,
body.woocommerce button[name="update_cart"] {
  background-color: transparent !important;
  border-color: var(--ink) !important;
  color: var(--ink) !important;
}

body.woocommerce .price,
body.woocommerce .price .woocommerce-Price-amount,
body.woocommerce ul.products li.product .price,
body.woocommerce div.product p.price,
body.woocommerce div.product span.price,
body .wc-block-components-product-price {
  color: var(--ink) !important;
}

/* OceanWP faerbt den Betrag im inneren <bdi>, nicht am .price selbst. */
body.woocommerce .price bdi,
body.woocommerce .price bdi .woocommerce-Price-currencySymbol,
body.woocommerce ul.products li.product .price bdi,
body.woocommerce div.product p.price bdi,
body .wc-block-components-product-price bdi,
body.woocommerce .woocommerce-Price-amount bdi {
  color: var(--ink) !important;
}

/* Jahresauswahl (Plugin prewi-shop) — gleiche Anmutung wie der Zeichen-Block */
.prewi-jahr {
  background: var(--surface);
  border-left: 3px solid var(--orange);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
  box-shadow: var(--tile-shadow);
}
.prewi-jahr label { font-weight: 500; display: block; margin-bottom: var(--space-2); }
.prewi-jahr select {
  padding: var(--space-3);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  font-family: var(--font-sans);
  min-width: 160px;
}
.prewi-jahr select:focus { outline: 2px solid var(--orange); outline-offset: 1px; }
.prewi-jahr small { color: var(--concrete); display: block; margin-top: var(--space-2); }

/* Inter statt Slab: Titel brauchen mehr Gewicht und engere Laufweite,
   sonst wirken sie neben dem Lesetext beliebig. */
h1, h2, h3, h4, h5,
.product_title, .entry-title, .page-header-title,
.woocommerce-loop-product__title, .widget-title {
  font-weight: 600;
  letter-spacing: -0.02em;
}
.single-product .product_title { font-weight: 650; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-weight: 600; }

/* ---------- Hauptaktion auf der Produktseite ----------
   Der Bestellknopf stand neben dem grossen PayPal-Balken und wirkte dadurch
   zweitrangig. PayPal ist auf der Produktseite entfernt; der Knopf traegt
   jetzt die Hauptaktion und ist entsprechend gross. */

.single-product .summary form.cart .single_add_to_cart_button,
.single-product .elementor-widget-woocommerce-product-add-to-cart .single_add_to_cart_button {
  padding: var(--space-4) var(--space-7);
  font-size: 1rem;
  min-width: 260px;
  text-align: center;
}
.single-product .summary form.cart .quantity input.qty,
.single-product .elementor-widget-woocommerce-product-add-to-cart .quantity input.qty {
  height: 100%;
  min-height: 52px;
  font-size: 1rem;
}
.single-product .summary form.cart .quantity .minus,
.single-product .summary form.cart .quantity .plus {
  min-height: 52px;
  border-color: var(--rule);
}

/* Preisblock: die Zusatzzeile ruhig halten, sie steht direkt unter dem Preis */
.single-product .elementor-widget-text-editor p {
  color: var(--concrete);
  font-size: 0.85rem;
  margin: 0;
}

/* ---------- Produktkacheln: gleiche Bildflaeche ----------
   Die Bilder sind sehr unterschiedlich: Fotos im Hochformat, technische
   Grafiken mit wenigen hundert Pixeln. Ohne festes Verhaeltnis springen die
   Kachelhoehen und kleine Grafiken wirken verloren. Deshalb eine feste
   Bildflaeche 4:3, Bild vollstaendig darin (contain) auf ruhigem Grund. */

.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product .woocommerce-loop-product__link img {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
  object-fit: contain;
  background: var(--concrete-light);
  padding: var(--space-3);
  box-sizing: border-box;
}

/* Kacheln gleich hoch, Preis unten ausgerichtet */
.woocommerce ul.products li.product {
  display: flex;
  flex-direction: column;
}
.woocommerce ul.products li.product .price { margin-top: auto; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  min-height: 2.6em;
}

/* ---------- Produktraster: Abstand und gleiche Groesse ----------
   OceanWP setzt die Kacheln ohne Luecke aneinander und laesst sie in der
   Hoehe springen (Nutzer 2026-09-24). Deshalb ein echtes Raster mit Abstand;
   die Breiten und Raender des Themes werden dafuer ueberschrieben. */

.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--space-5);
  margin: 0 0 var(--space-6) !important;
  padding: 0;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none !important; display: none !important; }

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: var(--space-4);
  clear: none !important;
  float: none !important;
  height: 100%;
  border: 1px solid var(--rule);
  background: var(--surface);
}

/* Alles im gleichen Abstand untereinander, Preis unten auf einer Linie */
.woocommerce ul.products li.product > * { margin-left: 0; margin-right: 0; }
.woocommerce ul.products li.product .woocommerce-loop-product__link { display: block; }
.woocommerce ul.products li.product .price { margin-top: auto; padding-top: var(--space-3); }

/* Alle Kacheln gleich hoch, auch ueber Zeilen hinweg: gleiche Zeilenhoehe
   im Raster, und Platz fuer zweizeilige Produktnamen. */
.woocommerce ul.products,
.woocommerce-page ul.products { grid-auto-rows: 1fr; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { min-height: 3.2em; }

/* OceanWP gibt den Kacheltitel als <h2> ohne WooCommerce-Klasse aus —
   deshalb beide Schreibweisen ansprechen. */
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  min-height: 3.2em;
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: var(--space-2);
}