/*
Theme Name: Scharrtheme
Theme URI: https://www.scharr-buero.de/
Author: Reza @ SCHARR Büro GmbH
Author URI: https://www.scharr-buero.de/
Description: Minimalistisches, performantes WooCommerce-Theme für SCHARR Büro GmbH
Version: 1.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: scharrtheme
Tags: woocommerce, responsive, minimal, clean, seo
*/

/* === Variablen & Reset === */
:root {
  --color-primary: #2E4F20;
  --color-hover: #64a244;
  --font-family-base: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-size-base: 16px;
  --max-width-container: 1200px;
  --color-text: #1a1a1a;
  --color-bg: #ffffff;
  --product-gap: 20px;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* === Layout Container === */
#page,
.container {
  max-width: var(--max-width-container);
  margin: 0 auto;
  padding: 0 1rem;
  width: 100%;
}

/* === Links === */
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}
a:hover {
  color: var(--color-hover);
}

/* === Überschriften === */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  color: #111;
  margin-bottom: 0.5em;
  line-height: 1.3;
}

/* === Bilder === */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* =============================
   === TOPBAR-BEREICH START ===
   ============================= */
.topbar .container {
    /* Sicherstellen, dass die Flexbox-Einstellungen für Desktop bestehen bleiben */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.topbar-links {
    /* Sicherstellen, dass diese Links immer als Flexbox mit Gap angezeigt werden */
    display: flex;
    gap: 1rem; /* Beibehaltung des Abstands */
}

/* === Responsive Topbar: Mobil (bis 992px) === */
@media (max-width: 992px) {
  .topbar-message {
    display: none; /* Text auf Mobilgeräten ausblenden */
  }

  /* Sicherstellen, dass die Links auf Mobil zentriert sind,
     wenn der andere Text ausgeblendet ist. */
  .topbar .container {
    justify-content: center; /* Links zentrieren, wenn nur sie sichtbar sind */
  }
}

/* === TOPBAR-BEREICH ENDE === */


/* =============================
   === HEADER-BEREICH START ===
   ============================= */

.site-header {
  background: #fff;
  border-bottom: 1px solid #eee;
  padding: 1rem 0;
}

.header-inner {
  display: flex;
  flex-direction: column; /* Standard: Spalte für Mobilgeräte */
  gap: 1rem; /* Abstand zwischen den Elementen im Header */
  max-width: var(--max-width-container);
  margin: 0 auto;
  padding: 0 1rem;
  width: 100%;
}

/* Neuer Wrapper für Hamburger, Logo und Icons auf Mobilgeräten */
.header-top-mobile-row {
    display: flex;
    justify-content: space-between; /* Elemente verteilen sich */
    align-items: center;
    width: 100%; /* Nimmt die volle Breite innerhalb von header-inner ein */
}

/* === Branding (Logo) === */
.site-branding {
    /* Standard-Reihenfolge für Mobil innerhalb von header-top-mobile-row */
    order: 2; /* Logo nach dem Hamburger-Menü */
}
.site-branding img {
  width: 115px;
  height: 55px;
  object-fit: contain;
  display: block;
}

/* Retina-Optimierung */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .site-branding img {
    image-rendering: auto;
  }
}

/* === Benutzer & Warenkorb Icons === */
.header-icons {
  display: flex;
  align-items: center;
  gap: 1rem; /* Abstand zwischen den Icons */
  order: 3; /* Icons nach dem Logo auf Mobil */
}

/* === Suchleiste === */
.header-search {
  width: 100%; /* Nimmt die volle Breite für Mobilgeräte ein */
  max-width: 500px; /* Begrenzung für Desktop */
}

/* === Hamburger-Menü === */
.menu-toggle {
    display: block; /* Hamburger-Menü auf Mobil anzeigen */
    font-size: 2rem;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    color: #000;
    order: 1; /* Ganz links auf Mobil */
    /* Zusätzlicher kleiner Rand für bessere Klickbarkeit */
    padding: 0.2rem;
    margin-right: 0.5rem; /* Abstand zum Logo */
}


/* === Desktop Layout (ab 993px) === */
@media (min-width: 993px) {
  .header-inner {
    flex-direction: row; /* Desktop: Zeile */
    justify-content: space-between; /* Elemente verteilen */
    align-items: center;
    flex-wrap: nowrap; /* Kein Umbruch auf Desktop */
    gap: 1.5rem; /* Angepasster Abstand für Desktop */
  }

  /* Hamburger-Menü auf Desktop ausblenden */
  .menu-toggle {
      display: none;
  }

  /*
   * `display: contents` macht das Element selbst unsichtbar
   * und seine Kinder zu direkten Flex-Items des Elterncontainers (`.header-inner`).
   * Dadurch können wir `order` direkt auf `.site-branding` und `.header-icons` anwenden,
   * obwohl sie in `header-top-mobile-row` verschachtelt sind.
   */
  .header-top-mobile-row {
      display: contents;
  }

  /* Reihenfolge der Elemente für Desktop: [1] Logo → [2] Suchfeld → [3] Icons */
  .site-branding {
      order: 1; /* Logo ganz links */
  }

  .header-search {
      order: 2; /* Suchfeld in der Mitte */
      flex-grow: 1; /* Suchfeld nimmt den verfügbaren Platz in der Mitte ein */
  }

  .header-icons {
      order: 3; /* Icons ganz rechts */
  }
}


/* =============================
   === HEADER-BEREICH ENDE ===
   ============================= */


/* === NAVIGATION === */
/* Alte Regeln für .menu-toggle aus diesem Bereich entfernt,
   da der Button nun im Header-Inner ist. */
.main-navigation {
  position: relative;
}

.menu {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  align-items: center;
}

.menu li a {
  color: #222;
  font-weight: 500;
}


/* === CTA Buttons im Header === */
.header-cta {
  display: flex;
  gap: 1rem;
}

.header-cta a.btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-weight: 500;
  white-space: nowrap;
}

/* === Responsive Navigation: Desktop === */
@media (min-width: 993px) {
  .main-navigation .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 1rem;
  }

  .main-navigation .menu {
    flex-grow: 1;
    justify-content: center;
  }

  /* .menu-toggle { display: none; } - Diese Regel wurde in den Header-Bereich verschoben */
}

/* === Responsive Navigation: Mobil === */
@media (max-width: 992px) {
  .main-navigation .container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }

  /* .menu-toggle { display: block; order: 1; align-self: flex-start; margin: 0.5rem 1rem; }
     Diese Regeln wurden in den Header-Bereich für .menu-toggle verschoben und angepasst */

  .main-navigation .header-cta {
    display: flex;
    order: 0; /* Die CTA-Buttons können auf Mobil oben platziert werden, falls gewünscht */
    justify-content: center;
    width: 100%;
    margin: 1rem 0;
  }

  .main-navigation .menu {
    display: none;
    flex-direction: column;
    gap: 1rem;
    background: #fff;
    padding: 1rem;
    width: 100%;
    order: 2;
  }

  .main-navigation.active .menu {
    display: flex;
  }
}

/* === FOOTER === */
.site-footer {
  background: #f8f8f8;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  font-size: 0.95rem;
  color: #222;
  margin-top: 100px;
}

.footer-container {
  max-width: var(--max-width-container, 1200px);
  margin: 0 auto;
  padding: 2rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.footer-row {
  display: grid;
  gap: 2rem;
}

.footer-row.row-1 {
  grid-template-columns: repeat(3, 1fr);
}

.footer-row.row-2 {
  grid-template-columns: repeat(4, 1fr);
}

.footer-row.row-3 {
  grid-template-columns: 2fr 1fr;
  border-top: 1px solid #ddd;
  padding-top: 1rem;
  font-size: 0.85rem;
  align-items: center;
}

.footer-box {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-box strong {
  color: var(--color-primary);
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.footer-box p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
}

.footer-box a {
  color: #333;
  text-decoration: none;
  font-weight: 400;
  font-size: 0.95rem;
}

.footer-box a:hover {
  color: var(--color-hover);
  text-decoration: underline;
}

.footer-logo {
  max-width: 150px;
  margin-bottom: 0.5rem;
}

.footer-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.footer-icons img {
  height: 32px;
  object-fit: contain;
  display: inline-block;
}

.footer-box.footer-links {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 1.5rem;
  flex-wrap: wrap;
  align-items: center;
}

.footer-box.footer-links a {
  white-space: nowrap;
  display: inline-block;
  font-size: 0.85rem;
}

/* === Footer Responsive === */
@media (max-width: 992px) {
  .footer-row.row-1 {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-row.row-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-row.row-3 {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }
  .footer-links {
    justify-content: center;
  }
}

@media (max-width: 600px) {
  .footer-row.row-1,
  .footer-row.row-2 {
    grid-template-columns: 1fr;
  }
}

/* ========================================= */
/* === WooCommerce Produktlisten Anpassungen === */
/* Diese Regeln stellen ein responsives Flexbox-Layout für Produktlisten sicher, */
/* überschreiben Standard-WooCommerce-Styles und andere Theme/Plugin-Styles. */
/* ========================================= */

/* Definition der CSS-Variable für den Produkt-Abstand, falls nicht bereits global definiert */
:root {
    --product-gap: 20px; /* Standard-Abstand zwischen Produktboxen */
}

/* Der Haupt-UL-Container der Produkte (gilt für Shortcodes, Archivseiten und Shops) */
.woocommerce ul.products,
.woocommerce-page ul.products {
    display: flex !important; /* Erzwinge Flexbox, überschreibt display:grid oder float */
    flex-wrap: wrap !important; /* Erlaubt den li-Elementen, in die nächste Zeile umzubrechen */
    margin: 0 !important; /* Entfernt alle externen Margen */
    padding: 0 !important; /* Entfernt alle internen Paddings */
    list-style: none !important; /* Entfernt Listenpunkte */
    align-items: stretch !important; /* Wichtig: Alle Produktboxen dehnen sich auf die gleiche Höhe aus */
    gap: var(--product-gap) !important; /* Abstand zwischen den Spalten und Reihen mit CSS-Variable */
    
    /* Zusätzliche Absicherungen gegen ungewollte Grid-Styles oder Margen/Paddings von anderen Dateien */
    grid-template-columns: unset !important; /* Deaktiviert potentielle Grid-Definitionen */
    width: 100% !important; /* Stellt sicher, dass der Container die volle volle Breite nutzt */
    transform: none !important; /* Neutralisiert potentielle CSS-Transformationen */
}

/* Die einzelnen Produktboxen (LI-Elemente) */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    /* Deaktiviere WooCommerces Float-Layout und jede feste "width" zugunsten von Flexbox */
    float: none !important;
    width: auto !important; /* Wichtig: Überschreibe jede feste "width" Regel (z.B. aus product-style.css oder homepage.css) */
    margin: 0 !important; /* Entferne alle externen Margen, da 'gap' verwendet wird */
    
    box-sizing: border-box !important; /* Stelle sicher, dass Padding und Border in die Breite einfließen */
    background-color: #fff;
    border: 1px solid #eee;
    padding: 20px; /* Innenabstand der Produktbox */
    text-align: center; /* Zentriert Inhalt wie Bild, Titel, Preis */

    /* Für die gleiche Höhe des "In den Warenkorb" Buttons am unteren Rand */
    display: flex !important; /* Erzwinge Flexbox für interne Anordnung */
    flex-direction: column !important; /* Ordnet Elemente vertikal an */
    justify-content: space-between !important; /* Schiebt Inhalt und Button an die Enden */

    transition: box-shadow 0.2s; /* Für sanften Übergang des Schattens */

    /* Standardbreite für 4 Spalten auf sehr großen Bildschirmen (> 1200px) */
    /* Dies muss hier stehen, damit es eine Standardflex-Basis gibt. */
    flex: 0 0 calc((100% - (var(--product-gap) * 3)) / 4) !important;
}

/* Hover-Effekt für Produktboxen */
.woocommerce ul.products li.product:hover {
    box-shadow: 0 6px 18px rgba(0,0,0,0.07);
    z-index: 2; /* Kann nützlich sein, um den Schatten über anderen Elementen anzuzeigen */
}

/* Stellt sicher, dass der "In den Warenkorb" Button an das Ende der Produktbox gedrückt wird */
.products li.product .button {
    margin-top: auto !important; /* Dies ist der Schlüssel, um den Button nach unten zu schieben */
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ========================================= */
/* === Anpassung des Produkttitels für einheitliche Höhe === */
/* ========================================= */
.product-title-wrapper {
    min-height: 5em; /* Beispiel: Passe diese Mindesthöhe an deine längsten Titel an */
    display: flex;
    align-items: flex-start !important; /* Zentriert den Text vertikal im Wrapper */
    justify-content: center; /* Zentriert den Text horizontal im Wrapper */
    text-align: center; /* Textausrichtung innerhalb des Wrappers */
    margin-bottom: 10px; /* Abstand des Titels zum Preis/Element darunter */
}

.product-title-wrapper h2.woocommerce-loop-product__title {
    margin: 0; /* Entferne Standard-Margins des H2-Tags */
    line-height: 1.3; /* Optimiere den Zeilenabstand für bessere Lesbarkeit */
    font-size: 1.1rem; /* Anpassung der Schriftgröße */
    font-weight: 600;
    color: #222;
    flex-grow: 1; /* Lässt den Titel den verfügbaren Raum im Wrapper einnehmen */
}

/* Preis-Style */
.price {
    color: var(--color-primary, #2E4F20);
    font-weight: bold;
}

/* Allgemeine Button-Stile für den Warenkorb-Button */
.archive .add_to_cart_button {
    background-color: var(--color-primary);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s;
}

.archive .add_to_cart_button:hover {
    background-color: var(--color-hover, #64a244);
}

/* ========================================= */
/* === Responsiveness für WooCommerce Produktlisten (Flexbox-Breakpoints) === */
/* ========================================= */

/* Für Bildschirme von 901px bis 1200px (Laptops/große Tablets): 3 Spalten */
@media (max-width: 1200px) and (min-width: 901px) {
    .woocommerce ul.products li.product,
    .woocommerce-page ul.products li.product {
        flex: 0 0 calc((100% - (var(--product-gap) * 2)) / 3) !important; /* 3 Spalten, 2 Gaps */
        width: auto !important; /* Absicherung für diese Breakpoint-Gruppe */
    }
}

/* Für Bildschirme von 601px bis 900px (kleinere Tablets): 2 Spalten */
@media (max-width: 900px) and (min-width: 601px) {
    .woocommerce ul.products li.product,
    .woocommerce-page ul.products li.product {
        flex: 0 0 calc((100% - var(--product-gap)) / 2) !important; /* 2 Spalten, 1 Gap */
        width: auto !important; /* Absicherung für diese Breakpoint-Gruppe */
    }
}

/* Für Bildschirme bis 600px (Handys): 1 Spalte */
@media (max-width: 600px) {
    .woocommerce ul.products li.product,
    .woocommerce-page ul.products li.product {
        flex: 0 0 100% !important; /* Volle Breite */
        width: auto !important; /* Absicherung für diese Breakpoint-Gruppe */
        padding: 0.5rem !important; /* Weniger Padding auf kleinen Bildschirmen */
    }
    .woocommerce ul.products {
        margin: 1rem 0 !important; /* Angepasste Margen für das UL auf kleinen Handys */
    }
}

/* =========================================================
   Styles für den "Weiter zum Bezahlen" Button (Warenkorbseite)
   Aus cart-style.css integriert für Konsistenz
   ========================================================= */
.wc-block-cart__submit-button {
    background-color: var(--color-primary, #2E4F20) !important;
    color: #ffffff !important;
    padding: 0.8rem 1.5rem;
    border-radius: 5px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s ease;
}

.wc-block-cart__submit-button:hover {
    background-color: var(--color-hover, #64a244) !important;
}
/* ========================================= */
/* === WooCommerce Produktlisten Anpassungen === */
/* Diese Regeln stellen ein responsives Flexbox-Layout für Produktlisten sicher, */
/* überschreiben Standard-WooCommerce-Styles und andere Theme/Plugin-Styles. */
/* ========================================= */

/* Definition der CSS-Variable für den Produkt-Abstand, falls nicht bereits global definiert */
:root {
    --product-gap: 20px; /* Standard-Abstand zwischen Produktboxen */
}

/* Der Haupt-UL-Container der Produkte (gilt für Shortcodes, Archivseiten und Shops) */
.woocommerce ul.products,
.woocommerce-page ul.products {
    display: flex !important; /* Erzwinge Flexbox, überschreibt display:grid oder float */
    flex-wrap: wrap !important; /* Erlaubt den li-Elementen, in die nächste Zeile umzubrechen */
    margin: 0 !important; /* Entfernt alle externen Margen */
    padding: 0 !important; /* Entfernt alle internen Paddings */
    list-style: none !important; /* Entfernt Listenpunkte */
    align-items: stretch !important; /* Wichtig: Alle Produktboxen dehnen sich auf die gleiche Höhe aus */
    gap: var(--product-gap) !important; /* Abstand zwischen den Spalten und Reihen mit CSS-Variable */
    
    /* Zusätzliche Absicherungen gegen ungewollte Grid-Styles oder Margen/Paddings von anderen Dateien */
    grid-template-columns: unset !important; /* Deaktiviert potentielle Grid-Definitionen */
    width: 100% !important; /* Stellt sicher, dass der Container die volle volle Breite nutzt */
    transform: none !important; /* Neutralisiert potentielle CSS-Transformationen */
}

/* Sicherstellen, dass keine ::before oder ::after Elemente das Layout stören */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
    content: none !important;
    display: none !important;
    width: auto !important; /* Absicherung */
    margin: 0 !important;   /* Absicherung */
    padding: 0 !important;  /* Absicherung */
}

/* Die einzelnen Produktboxen (LI-Elemente) */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    /* Deaktiviere WooCommerces Float-Layout und jede feste "width" zugunsten von Flexbox */
    float: none !important;
    width: auto !important; /* Wichtig: Überschreibe jede feste "width" Regel (z.B. aus product-style.css oder homepage.css) */
    margin: 0 !important; /* Entferne alle externen Margen, da 'gap' verwendet wird */
    
    box-sizing: border-box !important; /* Stelle sicher, dass Padding und Border in die Breite einfließen */
    background-color: #fff;
    border: 1px solid #eee;
    padding: 20px; /* Innenabstand der Produktbox */
    text-align: center; /* Zentriert Inhalt wie Bild, Titel, Preis */

    /* Für die gleiche Höhe des "In den Warenkorb" Buttons am unteren Rand */
    display: flex !important; /* Erzwinge Flexbox für interne Anordnung */
    flex-direction: column !important; /* Ordnet Elemente vertikal an */
    justify-content: space-between !important; /* Schiebt Inhalt und Button an die Enden */

    transition: box-shadow 0.2s; /* Für sanften Übergang des Schattens */

    /* Standardbreite für 4 Spalten auf sehr großen Bildschirmen (> 1200px) */
    /* Dies muss hier stehen, damit es eine Standardflex-Basis gibt. */
    flex: 0 0 calc((100% - (var(--product-gap) * 3)) / 4) !important;
}

/* Hover-Effekt für Produktboxen */
.woocommerce ul.products li.product:hover {
    box-shadow: 0 6px 18px rgba(0,0,0,0.07);
    z-index: 2; /* Kann nützlich sein, um den Schatten über anderen Elementen anzuzeigen */
}

/* Stellt sicher, dass der "In den Warenkorb" Button an das Ende der Produktbox gedrückt wird */
.products li.product .button {
    margin-top: auto !important; /* Dies ist der Schlüssel, um den Button nach unten zu schieben */
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ========================================= */
/* === Anpassung des Produkttitels für einheitliche Höhe === */
/* ========================================= */
.product-title-wrapper {
    min-height: 5em; /* Beispiel: Passe diese Mindesthöhe an deine längsten Titel an */
    display: flex;
    align-items: center; /* Zentriert den Text vertikal im Wrapper */
    justify-content: center; /* Zentriert den Text horizontal im Wrapper */
    text-align: center; /* Textausrichtung innerhalb des Wrappers */
    margin-bottom: 10px; /* Abstand des Titels zum Preis/Element darunter */
}

.product-title-wrapper h2.woocommerce-loop-product__title {
    margin: 0; /* Entferne Standard-Margins des H2-Tags */
    line-height: 1.3; /* Optimiere den Zeilenabstand für bessere Lesbarkeit */
    font-size: 1.1rem; /* Anpassung der Schriftgröße */
    font-weight: 600;
    color: #222;
    flex-grow: 1; /* Lässt den Titel den verfügbaren Raum im Wrapper einnehmen */
}

/* Preis-Style */
.price {
    color: var(--color-primary, #2E4F20);
    font-weight: bold;
}

/* Allgemeine Button-Stile für den Warenkorb-Button */
.archive .add_to_cart_button {
    background-color: var(--color-primary);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s;
}

.archive .add_to_cart_button:hover {
    background-color: var(--color-hover, #64a244);
}

/* ========================================= */
/* === Responsiveness für WooCommerce Produktlisten (Flexbox-Breakpoints) === */
/* ========================================= */

/* Für Bildschirme von 901px bis 1200px (Laptops/große Tablets): 3 Spalten */
@media (max-width: 1200px) and (min-width: 901px) {
    .woocommerce ul.products li.product,
    .woocommerce-page ul.products li.product {
        flex: 0 0 calc((100% - (var(--product-gap) * 2)) / 3) !important; /* 3 Spalten, 2 Gaps */
        width: auto !important; /* Absicherung für diese Breakpoint-Gruppe */
    }
}

/* Für Bildschirme von 601px bis 900px (kleinere Tablets): 2 Spalten */
@media (max-width: 900px) and (min-width: 601px) {
    .woocommerce ul.products li.product,
    .woocommerce-page ul.products li.product {
        flex: 0 0 calc((100% - var(--product-gap)) / 2) !important; /* 2 Spalten, 1 Gap */
        width: auto !important; /* Absicherung für diese Breakpoint-Gruppe */
    }
}

/* Für Bildschirme bis 600px (Handys): 1 Spalte */
@media (max-width: 600px) {
    .woocommerce ul.products li.product,
    .woocommerce-page ul.products li.product {
        flex: 0 0 100% !important; /* Volle Breite */
        width: auto !important; /* Absicherung für diese Breakpoint-Gruppe */
        padding: 0.5rem !important; /* Weniger Padding auf kleinen Bildschirmen */
    }
    .woocommerce ul.products {
        margin: 1rem 0 !important; /* Angepasste Margen für das UL auf kleinen Handys */
    }
}

/* =========================================================
   Styles für den "Weiter zum Bezahlen" Button (Warenkorbseite)
   Aus cart-style.css integriert für Konsistenz
   ========================================================= */
.wc-block-cart__submit-button {
    background-color: var(--color-primary, #2E4F20) !important;
    color: #ffffff !important;
    padding: 0.8rem 1.5rem;
    border-radius: 5px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s ease;
}

.wc-block-cart__submit-button:hover {
    background-color: var(--color-hover, #64a244) !important;
}