@charset "UTF-8";
/* =========================================================
   0. GOOGLE-FONTS
   ========================================================= */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Poppins:wght@600;700&display=swap");
/* =========================================================
   GRUNDEINSTELLUNGEN & FARBPALETTE
   ========================================================= */
:root {
  --accent:      #6b4f36;
  /* Coffee-Brown   */
  --accent-dark: #543c27;
  /* dunkler Braun  */
  --accent-2:    #6d8c7d;
  /* Salbei-Grün    */
  --text-body:   #2a2a2a;
}

/* Grundtypografie */
body {
  font-family: 'Inter',sans-serif;
  color: var(--text-body);
  font-size: 17px;
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: 'Poppins',sans-serif;
  font-weight: 600;
  letter-spacing: -.4px;
  color: #1e1e1e;
}

h1 {
  font-size: 3.5rem;
}

h2 {
  font-size: 2.5rem;
}

/* =========================================================
   HEADER – schlanker Beigestreifen über 100 vw
   ========================================================= */
.site-header {
  position: relative;
  padding: 0.6rem 0;
  /* Streifenhöhe Desktop  */
  min-height: 64px;
  background: #efe9e5;
  z-index: 10;
}

.site-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  margin-left: -50vw;
  background: #efe9e5;
  z-index: -1;
}

/* Header-Inhalt: Logo + Titel + Menü + Warenkorb */
.site-header .site-header-inner,
.site-header .wp-block-group,
.site-branding-container,
.site-branding {
  display: flex;
  align-items: center;
  gap: .9rem;
}

/* ====================  LOGO (Home-Button)  ==================== */
.site-title {
  margin: 0;
}

/* überschreibt Theme-Margin */
.site-title a {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: var(--accent);
  text-decoration: none;
  font-family: 'Poppins',sans-serif;
  font-weight: 700;
  /* Titel selbst */
}

/* Logo-Bild vor dem Text */
.site-title a::before {
  content: "";
  flex: 0 0 120px;
  height: 90px;
  /* Desktop-Größe */
  background: url("https://fgkaffee.de/wp-content/uploads/2025/11/Logo-FG-efe9e5-e1763240042440.webp") center/contain no-repeat;
}

/* Mobile kleiner */
@media (max-width: 767px) {
  .site-header {
    padding: 0.45rem 0;
    min-height: 56px;
  }
  .site-title a::before {
    flex-basis: 70px;
    height: 70px;
  }
}

/* ====================  MENÜ  ==================== */
.site-navigation .menu > li > a {
  position: relative;
  font-size: 1.05rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .15rem .55rem;
  color: var(--accent);
  box-shadow: inset 0 -2px 0 transparent;
  transition: color .25s,box-shadow .25s;
}

.site-navigation .menu > li > a:hover,
.site-navigation .menu > li.current-menu-item > a {
  color: var(--accent-dark);
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* Desktop etwas Abstand rechts, damit Warenkorb nicht klebt */
@media (min-width: 768px) {
  .site-navigation {
    margin-right: 1.5rem;
  }
}

/* ====================  WARENKORB RECHTS FEST  ==================== */
.header-cart, #ecwid-minicart {
  margin-left: auto;
  display: flex !important;
  align-items: center;
  gap: .4rem;
  font-weight: 500;
}

.header-cart svg, #ecwid-minicart svg,
.header-cart img, #ecwid-minicart img {
  width: 24px;
  height: 24px;
}

@media (min-width: 768px) {
  #ecwid-minicart .ec-cart-widget__message--empty {
    display: none;
  }
}

@media (max-width: 767px) {
  #ecwid-minicart {
    font-size: .9rem;
    white-space: nowrap;
  }
}

/* =========================================================
   ECWID-KATEGORIEN – kompakte Outline-Pills
   ========================================================= */
.ecwid-shopping-cart-categories {
  gap: .75rem;
}

.ecwid-shopping-cart-categories a,
.ecwid-shopping-cart-categories .ec-category-navigation__link {
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: var(--accent) !important;
  background: transparent !important;
  padding: 0.35em 0.85em !important;
  border: 1px solid var(--accent) !important;
  border-radius: 2rem !important;
  transition: background .2s,color .2s,transform .15s;
}

.ecwid-shopping-cart-categories a:hover {
  background: var(--accent) !important;
  color: #fff !important;
  transform: translateY(-2px);
}

/* =========================================================
   SUCHFELDER – abgerundet
   ========================================================= */
input[type="search"], .ec-search__input {
  border-radius: .5rem;
  border: 1px solid var(--accent);
  padding: .45rem .9rem;
}

input[type="search"]::placeholder {
  color: #888;
}

/* =========================================================
   PRODUKTRASTER – Shadow-Lift
   ========================================================= */
.ec-grid .grid-category__image:hover,
.ec-grid .grid-product__image:hover,
.ec-store .ec-product-card__image:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform .25s,box-shadow .25s;
}

/* =========================================================
   ECWID-DROPDOWNS (Verfeinern/Ordnen) – schwarz
   ========================================================= */
.ec-store .ec-filters__toggle.ec-link,
.ec-store .ec-sort__toggle.ec-link,
.ec-store .ec-filters__title.ec-link,
.ec-store .ec-sort__caption.ec-link {
  color: #000 !important;
  font-weight: 600 !important;
}

/* =========================================================
   FOOTER – Beigestreifen über 100 vw
   ========================================================= */
footer.site-footer {
  position: relative;
  background: #efe9e5;
  color: #543c27;
  padding: 2rem 0;
}

footer.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  margin-left: -50vw;
  background: #efe9e5;
  z-index: -1;
}

footer.site-footer a {
  color: var(--accent);
}

footer.site-footer a:hover {
  color: var(--accent-dark);
}

/* =========================================================
   FILTER & TAGS – Sekundärfarbe
   ========================================================= */
.widget_tag_cloud a, .ec-filter__attribute a {
  color: var(--accent-2);
}

.widget_tag_cloud a:hover, .ec-filter__attribute a:hover {
  color: #fff;
  background: var(--accent-2);
}

/* =========================================================
   MICRO-UX – Fokus-Indikator
   ========================================================= */
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* =========================================================
   SHOP-SEITENTITEL
   ========================================================= */
.woocommerce-products-header__title,
.post-type-archive-product .page-title,
.wp-block-post-title,
main h1:first-of-type {
  font-family: "Poppins", sans-serif !important;
  font-weight: 600 !important;
  font-size: 2.75rem !important;
  color: var(--accent) !important;
  letter-spacing: -.4px;
  margin-bottom: 2rem;
}

/* =========================================================
   MOBILE-FEINJUSTIERUNG  ≤ 767 px
   ========================================================= */
@media (max-width: 767px) {
  h1 {
    font-size: 2.5rem;
  }
  .site-navigation .menu > li > a {
    font-size: .9rem;
    padding: .15rem .4rem;
  }
  .ecwid-shopping-cart-categories a {
    font-size: 1.05rem !important;
  }
  main h2, h2.store-block-title {
    font-size: 1.8rem;
    line-height: 1.2;
  }
  .site-navigation {
    max-height: 90vh;
    overflow-y: auto;
  }
  .menu-toggle {
    padding: .6rem 1rem;
    font-size: 1.25rem;
  }
}

/* =========================================================
   MOBILE-FEINABSTIMMUNG  (≤ 767 px)
   ========================================================= */
@media (max-width: 767px) {
  /* ---------- Header noch kompakter ---------- */
  .site-header {
    padding: 0.35rem 0;
    min-height: 48px;
  }
  /* Logo kleiner + weniger Abstand zum Text */
  .site-title a::before {
    flex-basis: 54px;
    /* vorher 70 px  */
    height: 54px;
  }
  .site-branding {
    gap: .55rem;
  }
  /* Abstand Logo ↔ Text */
  /* Seitentitel „FG Kaffee Shop“ verkleinern */
  .site-title a {
    font-size: 1.5rem;
    /* vorher Browser-Standard (~2rem) */
    line-height: 1.1;
  }
  /* Tagline darunter ebenfalls schrumpfen */
  .site-description {
    font-size: .9rem;
    /* ≈ 14-15 px   */
    line-height: 1.3;
  }
  /* Menü-Links (erste Zeile) unaufdringlicher */
  .site-navigation .menu > li > a {
    font-size: .85rem;
    /* vorher .9-1.0rem   */
    padding: .1rem .35rem;
    letter-spacing: .03em;
  }
  /* ---------- Inhalts-Headlines ---------- */
  /* Überschrift „Empfohlene Produkte“ & alle H2 kleiner */
  main h2,
h2.store-block-title {
    font-size: 1.55rem;
    /* vorher 1.8-2.5 rem */
    line-height: 1.25;
    margin-bottom: 1.25rem;
  }
  /* ---------- Kategorie-Pills minimal schmaler ---------- */
  .ecwid-shopping-cart-categories a {
    font-size: 0.95rem !important;
    padding: 0.3em 0.75em !important;
  }
}

/* =========================================================
   TABLET-FEINTUNING  (768 – 991 px)
   ========================================================= */
@media (min-width: 768px) and (max-width: 991px) {
  /* Header etwas flacher als Desktop, aber höher als Mobile */
  .site-header {
    padding: 0.5rem 0;
    min-height: 60px;
  }
  /* Titelzeilen (WordPress-Blocks, Woo etc.) kleiner */
  main h2,
.wp-block-heading,
.store-block-title {
    font-size: 1.9rem !important;
    /* ≈ 30 px */
    line-height: 1.25 !important;
  }
}