/*
Theme Name: Alexa Märchenland Shop
Theme URI: https://alexa-maerchenland.com/shop/
Description: Helles Shop-Design für Alexa Märchenland – Child-Theme von Storefront. Markenblau als Akzent, kursive Fraunces-Headlines, Manrope-Body. Passend zum hellen Prototyp.
Author: meehs digital
Template: storefront
Version: 1.0.0
Text Domain: alexa-maerchenland-shop
*/

/* ==========================================================================
   Design-Tokens (heller Shop-Zwilling der dunklen Hauptseite)
   Fonts werden über functions.php geladen (Fraunces + Manrope)
   ========================================================================== */
:root{
  --bg:#faf8f4;--bg-2:#ffffff;--ink:#141821;--ink-soft:#5a616e;--ink-faint:#8b909b;
  --line:#e7e3da;--line-2:#ded9cd;--blue:#0d9fa9;--blue-deep:#0a7c84;--blue-tint:#eaf6f6;
  --gold:#b9925a;--ok:#2f9e6b;--radius:8px;--radius-l:14px;
}

/* ---------- Grundgerüst ---------- */
body,
.site{ background:var(--bg); color:var(--ink);
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
body{ font-size:16px; line-height:1.65; }
h1,h2,h3,h4,
.entry-title,.product_title,.page-title{
  font-family:'Fraunces',Georgia,serif; font-style:italic; font-weight:500; color:var(--ink); line-height:1.15;
}
a{ color:var(--blue-deep); }
a:hover{ color:var(--ink); }

/* ---------- Ankündigungsleiste (Storefront-Header oben) ---------- */
.storefront-handheld-footer-bar,
.site-header{ background:var(--bg-2); border-bottom:1px solid var(--line); box-shadow:none; }
.site-header{ padding-top:1em; padding-bottom:1em; }
.site-branding .site-title,
.site-title a{ font-family:'Fraunces',serif; font-style:italic; color:var(--ink)!important; }
.main-navigation ul li a{ color:var(--ink-soft); font-weight:500; }
.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a{ color:var(--ink); }

/* ---------- Buttons (Markenblau, rechteckig) ---------- */
button,
input[type="button"],
input[type="submit"],
.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .button.alt,
.woocommerce #respond input#submit{
  background:var(--ink); color:#fff; border-radius:var(--radius);
  font-weight:600; letter-spacing:.01em; text-transform:none; border:1px solid transparent;
  transition:background .2s ease, transform .15s ease;
}
.woocommerce .button.alt,
.woocommerce #respond input#submit.alt,
.single_add_to_cart_button,
.checkout-button{ background:var(--blue)!important; }
button:hover,
.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .button.alt:hover,
.single_add_to_cart_button:hover,
.checkout-button:hover{ background:var(--blue-deep)!important; transform:translateY(-1px); }

/* ---------- Produktgitter ---------- */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-l);
  padding:14px; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.woocommerce ul.products li.product:hover{
  transform:translateY(-5px); box-shadow:0 18px 44px rgba(20,24,33,.10); border-color:var(--line-2);
}
.woocommerce ul.products li.product img{ border-radius:var(--radius); margin-bottom:.8em; }
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:'Fraunces',serif; font-style:italic; font-size:1.2rem; padding:0; color:var(--ink);
}
.woocommerce ul.products li.product .price{ color:var(--ink); font-weight:700; }
.woocommerce ul.products li.product .price del{ color:var(--ink-faint); font-weight:400; }

/* Badges (Sale / Neu) */
.woocommerce span.onsale{
  background:var(--gold); color:#fff; border-radius:40px; font-weight:700; font-size:.72rem;
  min-height:auto; min-width:auto; padding:.35em .8em; line-height:1;
}

/* ---------- Preise & Hinweise ---------- */
.woocommerce div.product p.price,
.woocommerce div.product span.price{ color:var(--blue-deep); font-weight:700; }
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message{ border-top-color:var(--blue); }
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before{ color:var(--blue); }

/* ---------- Warenkorb / Kasse ---------- */
.woocommerce table.shop_table{ border-radius:var(--radius-l); border-color:var(--line); }
.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce .cart_totals{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-l); padding:8px 20px; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--bg-2); color:var(--ink-soft); border-top:1px solid var(--line); }
.site-footer a{ color:var(--ink-soft); }
.site-footer a:hover{ color:var(--blue-deep); }

/* ---------- Feinschliff ---------- */
.storefront-breadcrumb{ color:var(--ink-faint); }
.woocommerce-store-notice,
p.demo_store{ background:var(--ink); color:#fff; }