/*
Theme Name: Storefront Fashion Demo
Template: storefront
Description: Storefront-Kindtheme fuer den Demo-Shop. Bildet die Optik der Headless-Demo (MAISON) nach, damit sich beide Varianten unmittelbar vergleichen lassen: gleiche Schriften, gleiche Farben, gleicher Hero.
Author: Markus Stöger
Version: 1.1
*/

:root {
  --fd-bg: #f7f5f2;
  --fd-paper: #ffffff;
  --fd-ink: #111111;
  --fd-accent: #b5856d;
  --fd-muted: #5c5c5c;
  --fd-line: #e5e0d8;
}

body,
body.woocommerce,
.site {
  background-color: var(--fd-paper);
  color: var(--fd-ink);
  font-family: "DM Sans", system-ui, -apple-system, sans-serif;
}

/* ── Demo-Leiste ganz oben ─────────────────────────────────────── */
.fd-demobar {
  background: #111;
  color: rgba(255, 255, 255, 0.75);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 11px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}
.fd-demobar a {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 5px 14px;
  text-decoration: none;
  transition: background-color 0.25s, color 0.25s;
}
.fd-demobar a:hover { background: #fff; color: #111; }

/* ── Kopf: zentrierte Serifen-Wortmarke statt Storefront-Standard ── */
.site-header {
  background: var(--fd-paper) !important;
  border-bottom: 1px solid var(--fd-line);
  padding-top: 2.2em !important;
  padding-bottom: 0 !important;
  text-align: center;
}
.site-header .site-branding,
.site-header .site-search,
.site-header .custom-logo-link { float: none; width: 100%; text-align: center; }
.site-header .site-search { display: none; }
.site-title {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2.1rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 0.6em;
}
.site-title a { color: var(--fd-ink); text-decoration: none; }
.site-description {
  /* Der Untertitel stoert die Wortmarke; die Aussage steht im Hero. */
  display: none;
}

/* Hauptnavigation mittig, gesperrt, klein */
.main-navigation, .storefront-primary-navigation { background: var(--fd-paper) !important; float: none; width: 100%; }
.main-navigation ul.menu, .main-navigation ul.nav-menu {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 2.4em; float: none;
}
.main-navigation ul li a {
  color: var(--fd-ink);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0 0 1.4em;
}
.main-navigation ul li a:hover { color: var(--fd-accent); }
.main-navigation ul li.current-menu-item > a { color: var(--fd-accent); }

/* ── Hero ──────────────────────────────────────────────────────── */
.fd-hero {
  background: var(--fd-bg);
  padding: clamp(3rem, 2rem + 4vw, 6rem) clamp(1.5rem, 1rem + 3vw, 4rem);
  margin-bottom: 3.5em;
}
.fd-hero-inner {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}
@media (max-width: 768px) { .fd-hero-inner { grid-template-columns: 1fr; } }
.fd-season {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--fd-muted); margin: 0 0 1.2em;
}
.fd-season::after {
  content: ""; display: block; width: 42px; height: 1px;
  background: var(--fd-accent); margin-top: 1.1em;
}
.fd-hero h1 {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400; line-height: 1.02;
  font-size: clamp(2.8rem, 1.8rem + 4.4vw, 5rem);
  margin: 0 0 0.5em; color: var(--fd-ink);
}
.fd-hero h1 em { display: block; font-style: italic; color: var(--fd-accent); }
.fd-hero p {
  color: var(--fd-muted); max-width: 26rem; line-height: 1.7; margin: 0 0 2.2em;
}
.fd-hero .fd-cta {
  display: inline-block; background: var(--fd-ink); color: #fff;
  padding: 1em 2.2em; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; transition: background-color 0.25s;
}
.fd-hero .fd-cta:hover { background: var(--fd-accent); }
.fd-hero-images { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2em; align-items: start; }
.fd-hero-images img { width: 100%; height: auto; display: block; }
.fd-hero-images img:last-child { margin-top: 2.5em; }

/* ── Produkte ──────────────────────────────────────────────────── */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 0.95em; font-weight: 400; letter-spacing: 0.02em; padding-top: 1em;
}
.woocommerce ul.products li.product .price { color: var(--fd-muted); font-size: 0.9em; }
.woocommerce ul.products li.product .button,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
  background: var(--fd-ink); color: #fff; border-radius: 0;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.9em 1.6em;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover { background: var(--fd-accent); color: #fff; }
.woocommerce a.button.alt, .woocommerce button.button.alt { background: var(--fd-accent); }
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { background: var(--fd-ink); }

h1, h2, h3, .storefront-product-section h2, .page-title {
  font-family: "Instrument Serif", Georgia, serif; font-weight: 400; letter-spacing: 0.01em;
}

/* Footer ruhig halten */
.site-footer { background: var(--fd-bg); color: var(--fd-muted); }
.site-footer a { color: var(--fd-ink); }

/* ── Demo-Leiste: Umschalter rechts, Rest mittig ───────────────── */
.fd-demobar { position: relative; }
.fd-demobar-inner { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center; }
.fd-lang {
  position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 8px;
}
.fd-lang-link { border: 0 !important; padding: 0 !important; color: rgba(255,255,255,0.55) !important; }
.fd-lang-link:hover { background: transparent !important; color: #fff !important; }
.fd-lang-link.fd-lang-aktiv { color: #fff !important; }
.fd-lang-sep { color: rgba(255,255,255,0.3); }

/* ── Mobil ─────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .fd-demobar { padding: 9px 12px 34px; }
  .fd-demobar-inner { gap: 10px; font-size: 10px; }
  .fd-demobar-label { width: 100%; text-align: center; }
  .fd-lang { position: static; transform: none; justify-content: center; width: 100%; margin-top: 8px; }

  .site-header { padding-top: 1.4em !important; }
  .site-title { font-size: 1.15rem; letter-spacing: 0.12em; }

  /* Storefront-Menueschalter sichtbar lassen und mittig setzen */
  .main-navigation ul.menu, .main-navigation ul.nav-menu { display: block; }
  .main-navigation .menu-toggle {
    display: block; margin: 0 auto 1em; background: transparent; color: var(--fd-ink);
    border: 1px solid var(--fd-line); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  }
  .main-navigation ul li { text-align: center; }
  .main-navigation ul li a { padding: 0.85em 0; display: block; }

  .fd-hero { padding: 2.2rem 1.2rem; }
  .fd-hero-inner { gap: 2rem; }
  .fd-hero h1 { font-size: clamp(2.4rem, 1.6rem + 6vw, 3.4rem); }
  .fd-hero p { max-width: none; }
  .fd-hero-images { gap: 0.8em; }
  .fd-hero-images img:last-child { margin-top: 1.2em; }
}

/* Auf grossen Schirmen den Hero nicht ausufern lassen */
@media (min-width: 1400px) { .fd-hero-inner { max-width: 1180px; } }

/* Produktraster etwas luftiger, naeher an der Headless-Demo */
.woocommerce ul.products { gap: 2.2em 1.6em; }
.woocommerce ul.products li.product { margin-bottom: 0; }
.woocommerce ul.products li.product img { background: var(--fd-bg); }

/* Hinweisbox auf der Kasse ruhig gestalten */
.woocommerce-info, .woocommerce-message {
  background: var(--fd-bg); border-top-color: var(--fd-accent); color: var(--fd-ink);
}
.woocommerce-info::before, .woocommerce-message::before { color: var(--fd-accent); }

/* ── Feinschliff ───────────────────────────────────────────────── */

/* Storefront gibt dem Inhaltsbereich viel Luft nach oben. Der Hero soll
   direkt unter der Navigation ansetzen wie im Vorbild. */
.home .site-content { padding-top: 0; }
.home .content-area, .home .site-main { margin-top: 0; padding-top: 0; }
.home .fd-hero { margin-top: 0; }

/* Menue mittig, auch der Umschalter auf kleinen Schirmen */
.main-navigation, .storefront-primary-navigation { text-align: center; }
.main-navigation .menu-toggle { float: none !important; }

@media (max-width: 767px) {
  .site-title { font-size: 1.05rem; letter-spacing: 0.1em; padding: 0 0.6em; }
  .site-header { padding-bottom: 0.4em !important; }

  /* Der Menue-Knopf sitzt bei Storefront rechts; hier gehoert er in die Mitte. */
  .main-navigation .menu-toggle {
    display: inline-block !important;
    float: none !important;
    margin: 0.2em auto 1em !important;
    width: auto; padding: 0.6em 1.4em;
  }
  .storefront-primary-navigation { text-align: center; }

  /* Aufgeklapptes Menue mittig und ruhig */
  .main-navigation ul.menu li a, .main-navigation ul.nav-menu li a {
    text-align: center; border-bottom: 1px solid var(--fd-line);
  }
  .main-navigation ul.menu li:last-child a { border-bottom: 0; }
}

/* Auf mittleren Schirmen die Wortmarke nicht zu gross werden lassen */
@media (min-width: 768px) and (max-width: 1024px) {
  .site-title { font-size: 1.5rem; }
}

/* ── Spezifitaet gegen Storefront ──────────────────────────────────
   Storefront setzt .site-branding .site-title (zwei Klassen) und schlaegt
   damit ein einfaches .site-title. Deshalb hier mit gleicher Struktur. */
.site-branding .site-title {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: clamp(1.4rem, 1rem + 1.5vw, 2.05rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 0.6em;
}
.site-branding .site-title a { color: var(--fd-ink); }

/* Storefront gibt dem Inhalt viel Abstand nach oben; auf der Startseite
   soll der Hero direkt anschliessen. */
.home .site-content,
.home .content-area,
.home .site-main { padding-top: 0 !important; margin-top: 0 !important; }
.home .fd-hero { margin-top: -1px; }

@media (max-width: 767px) {
  .site-branding .site-title { font-size: 1.02rem; letter-spacing: 0.09em; padding: 0 0.5em; }
  .fd-demobar { padding-bottom: 10px; }
  .fd-lang { margin-top: 6px; }
}