/*
Theme Name: PMDeers Shop Child
Theme URI: https://pmdeers.ch
Description: PMDeers Child Theme for WooCommerce (based on Twenty Twenty-Four)
Author: PMDeers
Author URI: https://pmdeers.ch
Template: twentytwentyfour
Version: 1.0.1
Text Domain: pmdeers-shop-child
*/

/* ==========================================================================
   PMDeers Shop – Child Theme style.css (FULL FILE)
   Status:
   - Child Theme ist korrekt (Template Header vorhanden)
   - CSS greift
   Ziel jetzt:
   - WP Block-Theme Header/Footer (TT4) optisch auf PMDeers trimmen
   ========================================================================== */

/* =========================
   0) Font
   ========================= */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');

/* =========================
   1) Tokens (aus theme-new.css übernommen)
   ========================= */
:root{
  /* Corporate Blau */
  --pmd-darkblue: #003a78;
  --pmd-blue: #306bff;
  --pmd-blue-light: #1a4ea3;
  --pmd-white: #ffffff;
  --pmd-text-dark: #003a78;
  --pmd-text-light: #ffffff;

  /* Legacy-Variablen (PMDeers Digital Default) */
  --blue-main: #01325b;
  --blue-box: #0f4ca8;
  --blue-subbox: #185dc7;

  --white: #ffffff;
  --text-main: #ffffff;
  --text-dark: #143252;

  --accent: #306bff;
  --accent-magenta: #a855f7;
  --accent-green: #1fb366;

  --border-subtle: rgba(255, 255, 255, 0.16);

  /* Shop-Survival */
  --shop-bg: #5a4d37;
  --shop-text: #fff7ea;

  /* Panels */
  --shop-panel: rgba(255,255,255,0.07);
  --shop-panel-border: rgba(255,255,255,0.18);
  --shop-panel-border-soft: rgba(255,255,255,0.14);
  --shop-shadow: 0 8px 20px rgba(0,0,0,0.22);

  /* Buttons (PMDeers Digital) */
  --pmd-btn-bg: #01325b;
  --pmd-btn-bg-hover: #0f4ca8;
  --pmd-btn-bg-press: #0a3b82;
  --pmd-btn-text: #ffffff;
  --pmd-btn-border: rgba(255,255,255,0.18);
  --pmd-focus: rgba(15, 76, 168, 0.35);

  /* Header/Footer Shell */
  --hf-bg: #ffffff;
  --hf-border: #e2e6f0;
  --hf-shadow: rgba(0,0,0,0.04);
}

/* =========================
   2) Base Reset / Typography
   ========================= */
html, body{
  margin:0;
  padding:0;
  font-family:'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

body, .wp-site-blocks, .wp-block, .woocommerce *{
  font-family:'Montserrat', sans-serif !important;
}

/* Wichtig: Default-Linkfarbe im Shop (braun) */
.woocommerce a,
.woocommerce-page a{
  color:#ffe2b8;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.woocommerce a:hover,
.woocommerce-page a:hover{
  color:#ffd59e;
}

/* =========================
   3) Shop Hintergrund + Lesbarkeit
   ========================= */
body.woocommerce,
body.woocommerce-page{
  background: var(--shop-bg);
  color: var(--shop-text);
}

/* WP Container transparent lassen (damit Hintergrund wirkt) */
.woocommerce .woocommerce,
.woocommerce-page .woocommerce,
.woocommerce-page main,
.woocommerce-page .wp-site-blocks{
  background: transparent !important;
}

/* Panels */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-cart .cart-collaterals,
.woocommerce-checkout .woocommerce-checkout-review-order,
.woocommerce-checkout .woocommerce-checkout-payment,
.woocommerce-checkout form.checkout,
.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.woocommerce-form,
.woocommerce .woocommerce-notices-wrapper,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error,
.woocommerce table.shop_table,
.woocommerce .woocommerce-order-overview,
.woocommerce .woocommerce-customer-details,
.woocommerce .woocommerce-order-details{
  background: var(--shop-panel);
  border: 1px solid var(--shop-panel-border);
  border-radius:16px;
  padding:16px;
}

/* Headings */
.woocommerce h1,.woocommerce h2,.woocommerce h3,
.woocommerce-page h1,.woocommerce-page h2,.woocommerce-page h3{
  color:#ffffff;
  letter-spacing:0.2px;
}

/* Inputs */
.woocommerce input,
.woocommerce textarea,
.woocommerce select{
  background: rgba(255,255,255,0.10);
  color: var(--shop-text);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius:12px;
}
.woocommerce input::placeholder,
.woocommerce textarea::placeholder{
  color: rgba(255,247,234,0.75);
}
.woocommerce input:focus,
.woocommerce textarea:focus,
.woocommerce select:focus{
  outline:none;
  border-color: rgba(255,226,184,0.75);
  box-shadow: 0 0 0 3px rgba(255,226,184,0.18);
}

/* Tables */
.woocommerce table.shop_table th,
.woocommerce table.shop_table td{
  padding:14px 12px;
  border-color: var(--shop-panel-border-soft);
}

/* =========================
   4) Buttons – PMDeers Digital Blau
   ========================= */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button,
.wp-block-button__link,
a.wp-element-button,
button.wp-element-button{
  background: var(--pmd-btn-bg) !important;
  color: var(--pmd-btn-text) !important;
  border: 1px solid var(--pmd-btn-border) !important;
  border-radius: 999px !important;
  padding: 12px 20px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px;
  text-decoration: none !important;
  box-shadow: 0 10px 22px rgba(0,0,0,0.22);
  transition: transform 120ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .button:hover,
.wp-block-button__link:hover,
a.wp-element-button:hover,
button.wp-element-button:hover{
  background: var(--pmd-btn-bg-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(0,0,0,0.26);
}

/* =========================
   5) Produktkarten – gleiche Höhe + Buttons gleiche Höhe
   ========================= */
.woocommerce ul.products{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:stretch !important;
  gap:22px;
}
.woocommerce ul.products li.product{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius:18px;
  padding:16px;
  box-shadow: var(--shop-shadow);
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  margin:0 !important;
}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link{
  display:flex !important;
  flex-direction:column !important;
  flex: 1 1 auto !important;
  text-decoration:none !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  min-height: 2.8em;
  line-height: 1.4;
}
.woocommerce ul.products li.product .price{
  min-height: 1.6em;
}
.woocommerce ul.products li.product .button{
  margin-top:auto !important;
  align-self:flex-start !important;
  min-width:210px;
  text-align:center;
}

/* ==========================================================================
   6) FIX: WordPress Block-Theme HEADER (TT4) ? PMDeers Look
   Du siehst aktuell den Standard-TT4 Header. Wir stylen ihn jetzt korrekt.
   ========================================================================== */

/* Header-Container (Template Part) */
header.wp-block-template-part,
.wp-site-blocks > header,
.wp-site-blocks header{
  background: var(--hf-bg) !important;
  border-bottom: 1px solid var(--hf-border) !important;
  box-shadow: 0 4px 12px var(--hf-shadow) !important;
}

/* Sticky Header (falls TT4 nicht sticky ist, machen wir ihn sticky) */
.wp-site-blocks > header{
  position: sticky;
  top: 0;
  z-index: 9999;
}

/* Header-Innenabstände / max width */
.wp-site-blocks > header .wp-block-group,
header.wp-block-template-part .wp-block-group{
  max-width: 1400px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* Site Title/Logo im Header: dunkle Farbe + besser lesbar */
.wp-site-blocks > header .wp-block-site-title,
.wp-site-blocks > header .wp-block-site-title a{
  color: var(--text-dark) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  opacity: 1 !important;
}

/* Navigation Links im Header: FIX für “zu hell/unsichtbar” */
.wp-site-blocks > header nav a,
header.wp-block-template-part nav a{
  color: var(--text-dark) !important;
  text-decoration: none !important;
  opacity: 1 !important;
  position: relative;
  padding-bottom: 4px;
}

/* Unterstreichungs-Effekt wie PMDeers */
.wp-site-blocks > header nav a::after,
header.wp-block-template-part nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  height:2px;
  width:0;
  background: linear-gradient(135deg, var(--blue-main), var(--accent-magenta));
  transition: width 0.16s ease;
}
.wp-site-blocks > header nav a:hover::after,
header.wp-block-template-part nav a:hover::after{
  width:100%;
}
.wp-site-blocks > header nav a:hover,
header.wp-block-template-part nav a:hover{
  color: #000000 !important;
}

/* ==========================================================================
   7) FIX: WordPress Block-Theme FOOTER (TT4) ? PMDeers Look
   Aktuell hast du den Standard Footer mit “Gestaltet mit WordPress”.
   ========================================================================== */

footer.wp-block-template-part,
.wp-site-blocks > footer,
.wp-site-blocks footer{
  background: var(--hf-bg) !important;
  border-top: 1px solid var(--hf-border) !important;
  box-shadow: 0 -4px 12px var(--hf-shadow) !important;
  margin-top: 40px !important;
}

/* Footer Innen max width + padding */
.wp-site-blocks > footer .wp-block-group,
footer.wp-block-template-part .wp-block-group{
  max-width: 1400px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* Footer Typo: dunkelblau statt “random” */
.wp-site-blocks > footer,
footer.wp-block-template-part{
  color: var(--blue-main) !important;
  font-size: 0.9rem !important;
}

/* Footer Links: PMDeers dunkelblau */
.wp-site-blocks > footer a,
footer.wp-block-template-part a{
  color: var(--blue-main) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

/* Entfernt “Gestaltet mit WordPress” (Site Generator Block) */
.wp-block-site-generator,
.wp-site-blocks .wp-block-site-generator{
  display: none !important;
}