/*
Theme Name:     TEXMA Shop
Theme URI:      https://texma-gmbh.de
Description:    Custom Child-Theme für den TEXMA 1shop, abgeleitet vom Kadence Theme. Übernimmt das CI von texma-gmbh.de (Dunkelgrün #386A4E, Marine #0E1C36, Neon #34FF67) im hellen, ruhigen Look der Hauptseite.
Author:         TEXMA Textilmarketing GmbH
Author URI:     https://texma-gmbh.de
Template:       kadence
Version:        1.9.9
Text Domain:    texma-shop
*/

/* ============================================================
   0. SCHRIFTEN — ABC Diatype + ABC Diatype Semi-Mono (Dinamo)
   Self-hosted aus /assets/fonts/, DSGVO-konform.
   Lizenz: dinamotype.com (EULA: assets/fonts/DINAMO EULA.pdf)
   ============================================================ */

@font-face {
    font-family: "ABC Diatype";
    src: url("assets/fonts/ABCDiatype-Regular.woff2") format("woff2"),
         url("assets/fonts/ABCDiatype-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "ABC Diatype Semi-Mono";
    src: url("assets/fonts/ABCDiatypeSemi-Mono-Regular.woff2") format("woff2"),
         url("assets/fonts/ABCDiatypeSemi-Mono-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ============================================================
   1. DESIGN TOKENS – TEXMA-CI
   Wenn das CI sich ändert, NUR HIER anpassen.
   ============================================================ */

:root {
    /* Hauptfarben (1:1 aus texma-gmbh.de übernommen) */
    --texma-green: #386A4E;            /* Logo + Akzente + Headlines mit <strong> */
    --texma-green-dark: #2a5039;       /* Hover-Zustand */
    --texma-neon: #34ff67;             /* Highlight: Pfeil-Icon, Kontakt-Flag */
    --texma-marine: #0E1C36;           /* Body-Text, Buttons, Borders */

    /* Hintergründe */
    --texma-bg: #d4faff;               /* Haupt-Hintergrund (helles Cyan) */
    --texma-bg-soft: #ffffff;          /* Sekundär-Hintergrund (Bilder, Cards) — Weiß */
    --texma-white: #ffffff;            /* Produkt-Sektion */

    /* Typografie
       Body + Navigation: Diatype
       Headlines: Diatype Semi-Mono */
    --texma-font: "ABC Diatype", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --texma-font-headline: "ABC Diatype Semi-Mono", "ABC Diatype", -apple-system, BlinkMacSystemFont, sans-serif;

    /* Buttons & Pillen-Style */
    --radius-pill: 100px;
    --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   2. BASIS
   Kadence-Defaults sanft überschreiben.
   ============================================================ */

body,
body.content-style-boxed,
body.content-style-unboxed {
    font-family: var(--texma-font);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--texma-marine);
    background-color: var(--texma-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.content-bg,
body.content-style-unboxed .site,
body.content-style-boxed .content-bg {
    background-color: var(--texma-bg);
}

/* Headlines — ABC Diatype Semi-Mono (nur Regular vorhanden) */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--texma-font-headline);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--texma-marine);
}

h1 { font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.125rem; }

/* CI-Pattern: Highlight-Worte in <strong> sind dunkelgrün */
h1 strong, h2 strong, h3 strong, h4 strong {
    color: var(--texma-green);
    font-weight: 400;
}

a {
    color: var(--texma-marine);
    text-decoration: none;
    transition: opacity var(--transition);
}

a:hover { opacity: 0.65; }

/* ============================================================
   3. BUTTONS – Pillen-Style aus texma-gmbh.de
   Default: Marine-Border, transparent, kein Hover-Schatten
   Hover: Marine-Background, weiß, Pfeil wird neon
   ============================================================ */

.button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button,
button:not(.kadence-svg-iconset):not(.menu-toggle-open):not(.menu-toggle-close):not(.drawer-sub-toggle):not(.dropdown-nav-special-toggle) {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    background-color: transparent;
    color: var(--texma-marine);
    border: 1.5px solid var(--texma-marine);
    border-radius: var(--radius-pill);
    font-family: var(--texma-font);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none !important;
    transition: all var(--transition);
}

.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
    background-color: var(--texma-marine);
    color: var(--texma-white);
    border-color: var(--texma-marine);
    opacity: 1;
    box-shadow: none !important;
}

/* Primary-Button – dunkelgrün gefüllt, mit Neon-Pfeil */
.button.dark-green,
.button-primary,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce-page #place_order,
.wc-block-cart__submit-button,
.woocommerce button.button.checkout,
.woocommerce a.checkout-button {
    background-color: var(--texma-green);
    color: var(--texma-white);
    border-color: var(--texma-green);
}

.button.dark-green:hover,
.button-primary:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce-page #place_order:hover,
.wc-block-cart__submit-button:hover {
    background-color: var(--texma-green-dark);
    border-color: var(--texma-green-dark);
    color: var(--texma-white);
}

/* In-cart-Button: Add-to-Cart in Produktlisten */
.woocommerce ul.products li.product .button {
    margin-top: 0.5rem;
}

/* ============================================================
   4. HEADER – durchgehende Neon-Pille (kompakt, scrollt mit)
   ============================================================ */

#masthead,
.site-header {
    background-color: transparent !important;
    padding: 0.75rem 1rem !important;
}

.site-main-header-wrap,
.site-main-header-wrap .site-header-row-container-inner {
    background-color: var(--texma-neon) !important;
    border-radius: 30px !important;
    border: none !important;
    box-shadow: none !important;
}

/* Header kompakter — Kadence setzt 80px min-height, wir gehen auf 56px */
.site-main-header-inner-wrap {
    min-height: 56px !important;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

.site-header-inner-wrap {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Mobile-Header (separater Wrap) auch als Pille */
.site-mobile-header-wrap .site-header-row-container-inner,
#mobile-header .site-main-header-wrap .site-header-row-container-inner {
    background-color: var(--texma-neon) !important;
    border-radius: 30px !important;
}

/* Logo */
.site-branding,
.site-branding .site-title,
.site-branding .site-title a {
    color: var(--texma-marine) !important;
    font-family: var(--texma-font);
    font-weight: 700;
    margin: 0;
}

.site-branding img,
.site-branding svg {
    max-height: 28px;
    width: auto;
    display: block;
}

/* Hauptnavigation – Marine-Text auf Neon-Hintergrund */
.main-navigation .primary-menu-container > ul > li.menu-item > a,
.header-navigation .header-menu-container > ul > li.menu-item > a {
    font-family: var(--texma-font);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--texma-marine) !important;
    padding: 0.6em 1em;
    background: transparent !important;
}

.main-navigation .primary-menu-container > ul > li.menu-item > a:hover,
.main-navigation .primary-menu-container > ul > li.menu-item.current-menu-item > a,
.main-navigation .primary-menu-container > ul > li.menu-item.current-menu-ancestor > a,
.main-navigation .primary-menu-container > ul > li.menu-item:hover > a {
    color: var(--texma-green-dark) !important;
    opacity: 1;
}

/* Dropdown-Toggle-Pfeile */
.main-navigation .dropdown-nav-toggle svg,
.header-navigation .dropdown-nav-toggle svg {
    fill: var(--texma-marine) !important;
}

/* Hamburger-Icon */
.mobile-toggle-open-container .menu-toggle-open {
    color: var(--texma-marine) !important;
}

.mobile-toggle-open-container .menu-toggle-open svg path {
    stroke: var(--texma-marine) !important;
}

/* ============================================================
   HEADER-BUTTONS RECHTS (Warenkorb, Suche) als separate Pillen
   ============================================================ */

.header-cart-button,
.header-search-button,
.search-toggle-open-container .search-toggle-open,
.header-account-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: transparent !important;
    color: var(--texma-marine) !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 8px 12px !important;
    transition: opacity var(--transition);
    box-shadow: none !important;
    min-height: 0 !important;
    line-height: 1 !important;
    gap: 0.4rem;
    text-decoration: none !important;
}

.header-cart-button:hover,
.header-search-button:hover,
.search-toggle-open-container .search-toggle-open:hover,
.header-account-button:hover {
    background-color: transparent !important;
    color: var(--texma-marine) !important;
    opacity: 0.7;
}

.header-cart-button svg,
.header-search-button svg,
.search-toggle-open-container .search-toggle-open svg {
    width: 22px !important;
    height: 22px !important;
    fill: var(--texma-marine) !important;
    color: var(--texma-marine) !important;
    stroke: var(--texma-marine) !important;
}

/* Warenkorb-Anzahl: kleine Marine-Kreis-Badge */
.header-cart-button .header-cart-total {
    background-color: var(--texma-marine) !important;
    color: var(--texma-neon) !important;
    border-radius: 50% !important;
    width: 18px;
    height: 18px;
    font-size: 0.7rem;
    font-weight: 600;
    margin-left: 0.25rem;
    line-height: 18px;
    text-align: center;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none !important;
}

/* ============================================================
   SUB-MENÜ — einzelne neon-grüne Pillen, vertikal angeordnet
   (wie auf der Hauptseite die "Geschäftskunden"/"Vereine"-Pillen)
   ============================================================ */

.header-navigation .header-menu-container ul ul.sub-menu,
.header-navigation .header-menu-container ul ul.submenu,
.main-navigation ul ul.sub-menu,
.main-navigation ul ul.submenu {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 21px 0 0 0 !important;
    min-width: 0 !important;
    width: auto !important;
    margin-left: -24px !important;
}

.header-navigation .header-menu-container ul ul li.menu-item,
.main-navigation ul ul li.menu-item {
    background: transparent !important;
    border: none !important;
    margin: 0.4rem 0 0 0 !important;
    width: auto !important;
}

.header-navigation .header-menu-container ul ul li.menu-item > a,
.main-navigation ul ul li.menu-item > a {
    display: inline-block !important;
    background-color: var(--texma-neon) !important;
    color: var(--texma-green-dark) !important;
    border: none !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    padding: 12px 24px !important;
    border-radius: 100px !important;
    width: auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    text-shadow: none !important;
    transition: background-color var(--transition);
    box-shadow: none !important;
}

.header-navigation .header-menu-container ul ul li.menu-item > a:hover,
.main-navigation ul ul li.menu-item > a:hover {
    background-color: var(--texma-green-dark) !important;
    color: var(--texma-neon) !important;
}

/* Mobile-Drawer */
#mobile-drawer .drawer-inner {
    background-color: var(--texma-bg) !important;
}

.mobile-navigation ul li > a {
    color: var(--texma-green-dark) !important;
    border-bottom-color: rgba(56, 106, 78, 0.1) !important;
    background: transparent !important;
}

/* Eltern-Items (Schulen, Vereine, Merchandising, Handbälle) im
   Mobile-Drawer auch als neon-grüne Pillen — gleicher Look wie Sub-Items.
   .drawer-nav-drop-wrap ist der Wrapper um Eltern-Link + Pfeil-Toggle. */
#mobile-drawer .mobile-navigation > div > ul > li.menu-item > a,
#mobile-drawer .mobile-navigation ul#mobile-menu > li.menu-item > a,
#mobile-drawer .mobile-navigation ul#mobile-menu > li.menu-item.menu-item-has-children > .drawer-nav-drop-wrap {
    background-color: var(--texma-neon) !important;
    color: var(--texma-green-dark) !important;
    border-radius: 100px !important;
    margin: 0.4rem 1rem !important;
    padding: 0 !important;
    border: none !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    overflow: hidden !important;
}

#mobile-drawer .mobile-navigation ul#mobile-menu > li.menu-item.menu-item-has-children > .drawer-nav-drop-wrap > a {
    color: var(--texma-green-dark) !important;
    background-color: transparent !important;
    padding: 12px 24px !important;
    flex: 1 !important;
    border: none !important;
    border-bottom: none !important;
    text-decoration: none !important;
}

/* Pfeil-Toggle der Eltern-Items in Marine, ohne Border */
#mobile-drawer .mobile-navigation ul#mobile-menu > li.menu-item.menu-item-has-children > .drawer-nav-drop-wrap > .drawer-sub-toggle,
#mobile-drawer .mobile-navigation ul#mobile-menu > li.menu-item.menu-item-has-children > .drawer-nav-drop-wrap > button {
    background-color: transparent !important;
    border: none !important;
    border-left: none !important;
    color: var(--texma-green-dark) !important;
    padding: 12px 20px !important;
}
#mobile-drawer .mobile-navigation ul#mobile-menu > li.menu-item.menu-item-has-children > .drawer-nav-drop-wrap > .drawer-sub-toggle svg,
#mobile-drawer .mobile-navigation ul#mobile-menu > li.menu-item.menu-item-has-children > .drawer-nav-drop-wrap > button svg {
    fill: var(--texma-green-dark) !important;
}

/* Items ohne Untermenü (z.B. "Handbälle") als einzelne Pille */
#mobile-drawer .mobile-navigation ul#mobile-menu > li.menu-item:not(.menu-item-has-children) > a {
    background-color: var(--texma-neon) !important;
    color: var(--texma-green-dark) !important;
    border-radius: 100px !important;
    margin: 0.4rem 1rem !important;
    padding: 12px 24px !important;
    border: none !important;
    border-bottom: none !important;
    display: inline-block !important;
    width: auto !important;
}

.mobile-navigation ul ul.sub-menu li.menu-item > a {
    background-color: var(--texma-neon) !important;
    color: var(--texma-green-dark) !important;
    border-radius: 100px !important;
    margin: 0.3rem 1rem !important;
    padding: 12px 24px !important;
    border: none !important;
    display: inline-block !important;
    width: auto !important;
}

/* Logo */
.site-branding,
.site-branding .site-title,
.site-branding .site-title a {
    color: var(--texma-marine);
    font-family: var(--texma-font);
    font-weight: 700;
}

.site-branding img {
    max-height: 28px;
    width: auto;
}

/* ============================================================
   SUCH-DRAWER (öffnet sich beim Klick auf die Lupe)
   Kadence rendert ein Vollbild-Modal (#search-drawer) — wir
   ziehen es ins TEXMA-CI: helles Cyan, Neon-Pille fürs Eingabe-
   feld, Marine-Schrift, Marine-Submit als Pille.
   ============================================================ */

#search-drawer .drawer-inner {
    background: var(--texma-bg) !important;
}

#search-drawer .drawer-overlay {
    background-color: rgba(14, 28, 54, 0.5) !important;
}

#search-drawer .drawer-header {
    padding: 1.5rem 2rem;
}

#search-drawer .search-toggle-close {
    color: var(--texma-marine) !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0.5rem !important;
    transition: opacity var(--transition);
}

#search-drawer .search-toggle-close:hover {
    opacity: 0.7;
}

#search-drawer .search-toggle-close svg {
    fill: var(--texma-marine) !important;
    width: 28px !important;
    height: 28px !important;
}

#search-drawer .drawer-content {
    padding: 2rem;
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
}

/* Suchformular: Eingabefeld + Submit als zusammenhängende Neon-Pille */
#search-drawer .search-form {
    background-color: var(--texma-neon) !important;
    border-radius: 999px !important;
    padding: 0.5rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem;
    box-shadow: 0 4px 20px rgba(14, 28, 54, 0.08);
    position: relative;
}

#search-drawer .search-form label {
    flex: 1;
    margin: 0;
    display: flex;
    align-items: center;
}

#search-drawer .search-field {
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    color: var(--texma-marine) !important;
    font-family: var(--texma-font) !important;
    font-size: 1.125rem !important;
    padding: 0.75rem 1.5rem !important;
    width: 100% !important;
    box-shadow: none !important;
    outline: none !important;
}

#search-drawer .search-field:focus {
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

#search-drawer .search-field::placeholder {
    color: var(--texma-marine) !important;
    opacity: 0.6;
}

/* Submit-Button als separate Marine-Pille innerhalb der Neon-Pille */
#search-drawer .search-submit,
.search-form .search-submit,
input[type="submit"].search-submit,
.wp-block-search__button {
    background-color: var(--texma-marine) !important;
    color: var(--texma-neon) !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 0.75rem 2rem !important;
    font-family: var(--texma-font) !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    cursor: pointer;
    transition: opacity var(--transition);
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-align: center !important;
    text-align-last: center !important;
    line-height: 1.2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#search-drawer .search-submit:hover {
    opacity: 0.85;
    background-color: var(--texma-marine) !important;
    color: var(--texma-neon) !important;
}

/* Lupen-Icon-Wrap (falls Kadence ein zusätzliches Icon im Form rendert) */
#search-drawer .kadence-search-icon-wrap {
    display: none !important;
}

@media (max-width: 600px) {
    #search-drawer .drawer-content {
        padding: 1rem;
    }
    #search-drawer .search-field {
        font-size: 1rem !important;
        padding: 0.6rem 1rem !important;
    }
    #search-drawer .search-submit {
        padding: 0.6rem 1.25rem !important;
        font-size: 0.875rem !important;
    }
}

/* ============================================================
   5. ENTRY-HERO (Seitentitel-Bereich) — DEZENT halten
   Kadence rendert oben einen Hero — wir machen ihn ruhig, ohne Box.
   ============================================================ */

.entry-hero.page-hero-section,
.entry-hero.product-hero-section {
    background-color: var(--texma-bg);
    border: none;
}

.entry-hero .entry-header {
    text-align: left;
}

.entry-hero .entry-title {
    font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
    font-weight: 700;
    color: var(--texma-marine);
    line-height: 1.15;
}

/* ============================================================
   6. CONTENT-AREA (Seiten-Inhalt)
   Kadence wrapped Inhalte in eine Card mit Schatten – wir entfernen das
   für die Startseite, weil texma-gmbh.de auch keine Karten verwendet.
   ============================================================ */

.entry.single-entry,
.entry.loop-entry {
    box-shadow: none;
    background-color: transparent;
}

.entry-content-wrap {
    padding: 0;
}

@media all and (max-width: 1024px) {
    .entry-content-wrap { padding: 0; }
}

/* ============================================================
   7. WOOCOMMERCE – PRODUKT-LOOP (Listen-Ansicht)
   Quadratische Bilder, ruhige Cards, Kategorie-Label oben in Grün
   ============================================================ */

.woocommerce ul.products,
.woocommerce-page ul.products {
    margin: 0;
    padding: 0;
    gap: 2rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
    width: auto;
    float: none;
    list-style: none;
}

/* Produktbild — quadratisch, abgerundet (30px), strikte Maße */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product .attachment-woocommerce_thumbnail,
.woocommerce ul.products li.product img.wp-post-image,
.products .product img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    background-color: var(--texma-bg-soft);
    margin: 0 0 1rem 0;
    border-radius: 30px;
    transition: transform 0.5s var(--transition);
    display: block !important;
}

.woocommerce ul.products li.product:hover a img {
    transform: scale(1.04);
}

/* Wrapping-Element für Bild (für overflow:hidden bei Hover-Zoom).
   WICHTIG: NUR der Bild-Link darf overflow:hidden + border-radius
   bekommen — sonst werden auch Titel-Links abgeschnitten.
   Wir targetieren explizit den .product-image-link / Link um das Bild. */
.woocommerce ul.products li.product .product-image-link,
.woocommerce ul.products li.product .post-thumbnail,
.woocommerce ul.products li.product a.attachment-woocommerce_thumbnail,
.woocommerce ul.products li.product a:has(> img.attachment-woocommerce_thumbnail) {
    display: block !important;
    overflow: hidden !important;
    border-radius: 30px !important;
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 1 / 1 !important;
}

/* Reset für alle anderen Links innerhalb der Produkt-Karte —
   z.B. Titel-Link, der sonst die Bild-Rundung erbt */
.woocommerce ul.products li.product .woocommerce-loop-product__title a,
.woocommerce ul.products li.product h2 a,
.woocommerce ul.products li.product h3 a {
    display: inline !important;
    overflow: visible !important;
    border-radius: 0 !important;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--texma-font);
    font-size: 1rem;
    font-weight: 500;
    color: var(--texma-marine);
    padding: 0;
    margin: 0 0 0.4rem 0;
    line-height: 1.3;
}

/* Kategorie-Label vor dem Titel — bewusst NICHT angezeigt im Loop,
   weil die Kategorie meistens schon aus dem URL-Pfad / Menü ersichtlich ist
   und die Listenansicht ruhiger wirkt. Bei Bedarf wieder einblenden.
   Deckt sowohl unseren eigenen Hook als auch Kadence-eigene Kategorien ab. */
.woocommerce ul.products li.product .product-loop-category,
.woocommerce ul.products li.product .product-cat-label,
.woocommerce ul.products li.product .product-details .product-categroy,
.woocommerce ul.products li.product .product-details .product-category,
.woocommerce ul.products li.product .product_meta .posted_in,
.woocommerce ul.products li.product .product-loop-categories {
    display: none !important;
}

.woocommerce ul.products li.product .price {
    font-family: var(--texma-font);
    font-size: 1rem;
    font-weight: 600;
    color: var(--texma-marine);
}

.woocommerce ul.products li.product .price del {
    color: rgba(14, 28, 54, 0.4);
    font-weight: 400;
}

.woocommerce ul.products li.product .price ins {
    background: transparent;
    text-decoration: none;
    font-weight: 600;
    color: var(--texma-green);
}

/* Sale-Badge — Marine-Pille statt Kadence-Default */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
    background-color: var(--texma-marine);
    color: var(--texma-white);
    border-radius: var(--radius-pill);
    padding: 0.3rem 0.85rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    top: 1rem;
    left: 1rem;
    right: auto;
    min-width: auto;
    min-height: auto;
    line-height: 1;
    border: none;
}

/* Result Count + Sortierung (über der Produktliste) */
.woocommerce .woocommerce-result-count {
    color: rgba(14, 28, 54, 0.7);
    font-size: 0.9rem;
}

.woocommerce .woocommerce-ordering select {
    border: 1.5px solid var(--texma-marine);
    border-radius: var(--radius-pill);
    padding: 0.5rem 1rem;
    background-color: transparent;
    font-family: var(--texma-font);
}

/* ============================================================
   8. WOOCOMMERCE – EINZELPRODUKT-SEITE
   ============================================================ */

.single-product div.product .product_title {
    font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--texma-marine);
}

.single-product div.product .price {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--texma-marine);
    margin-bottom: 2rem;
}

.single-product div.product .woocommerce-product-details__short-description,
.single-product div.product .woocommerce-product-details__short-description p {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--texma-marine);
    margin-bottom: 2rem;
}

/* Produkt-Galerie quadratisch */
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background-color: var(--texma-bg-soft);
    border-radius: 0;
}

/* ====== Single-Product Tabs als TEXMA-Pillen ======
   Aktiv: Marine-Pille mit Neon-Schrift
   Inaktiv: Weiße Pille mit Marine-Schrift, dezente Border
   Hover (inaktiv): leichte Marine-Tönung
   Mobil: Tabs scrollen horizontal, falls zu eng */

.single-product .woocommerce-tabs ul.tabs {
    list-style: none !important;
    border: none !important;
    border-bottom: none !important;
    padding: 0 !important;
    margin: 0 0 2rem 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
}

.single-product .woocommerce-tabs ul.tabs::before,
.single-product .woocommerce-tabs ul.tabs::after {
    display: none !important;
    content: none !important;
    border: none !important;
}

.single-product .woocommerce-tabs ul.tabs li {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    list-style: none !important;
    display: inline-flex !important;
}

.single-product .woocommerce-tabs ul.tabs li::before,
.single-product .woocommerce-tabs ul.tabs li::after {
    display: none !important;
    content: none !important;
    border: none !important;
}

/* Inaktive Tab-Pille: Weiß mit Marine-Border und Marine-Schrift */
.single-product .woocommerce-tabs ul.tabs li a {
    display: inline-block !important;
    background-color: #ffffff !important;
    color: var(--texma-marine) !important;
    border: 1.5px solid var(--texma-marine) !important;
    border-radius: 999px !important;
    padding: 0.6rem 1.25rem !important;
    font-family: var(--texma-font) !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}

.single-product .woocommerce-tabs ul.tabs li a:hover {
    background-color: var(--texma-marine) !important;
    color: var(--texma-neon) !important;
}

/* Aktive Tab-Pille: Marine mit Neon-Schrift */
.single-product .woocommerce-tabs ul.tabs li.active a,
.single-product .woocommerce-tabs ul.tabs li[aria-selected="true"] a {
    background-color: var(--texma-marine) !important;
    color: var(--texma-neon) !important;
    border-color: var(--texma-marine) !important;
}

/* Mobil: Tabs etwas kompakter, dürfen umbrechen */
@media (max-width: 768px) {
    .single-product .woocommerce-tabs ul.tabs {
        gap: 0.4rem !important;
        margin-bottom: 1.5rem !important;
    }

    .single-product .woocommerce-tabs ul.tabs li a {
        padding: 0.55rem 1rem !important;
        font-size: 0.85rem !important;
    }
}

/* Sehr kleine Screens: noch kompakter */
@media (max-width: 380px) {
    .single-product .woocommerce-tabs ul.tabs li a {
        padding: 0.5rem 0.85rem !important;
        font-size: 0.8rem !important;
    }
}

/* Variation-Swatches (Größen, Farben) */
.tawcvs-swatches .swatch {
    border: 1.5px solid rgba(14, 28, 54, 0.2);
    border-radius: 8px;
    transition: border-color var(--transition);
}

.tawcvs-swatches .swatch.selected,
.tawcvs-swatches .swatch:hover {
    border-color: var(--texma-green);
}

/* Quantity-Input */
.woocommerce .quantity input.qty {
    border: 1.5px solid rgba(14, 28, 54, 0.2);
    border-radius: 8px;
    padding: 0.6rem 0.5rem;
    font-family: var(--texma-font);
    background-color: var(--texma-white);
}

/* ============================================================
   9. WOOCOMMERCE – CART & CHECKOUT
   ============================================================ */

.woocommerce-cart .cart-collaterals,
.woocommerce-checkout #order_review {
    background-color: var(--texma-white);
    padding: 2rem;
    border-radius: 16px;
    border: 1px solid rgba(56, 106, 78, 0.1);
}

.woocommerce table.shop_table {
    border: none;
    border-collapse: collapse;
    border-radius: 0;
    background: transparent;
}

.woocommerce table.shop_table th {
    background: transparent;
    border-bottom: 1px solid rgba(56, 106, 78, 0.15);
    padding: 1rem 0.5rem;
    font-family: var(--texma-font);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--texma-green);
}

.woocommerce table.shop_table td {
    border-bottom: 1px solid rgba(56, 106, 78, 0.08);
    padding: 1.5rem 0.5rem;
}

.woocommerce-cart table.cart img {
    width: 80px;
    height: 80px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
    background-color: var(--texma-bg-soft);
}

/* Form-Inputs auf Checkout */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea,
.woocommerce-page form .form-row select {
    padding: 0.85rem 1rem;
    border: 1.5px solid rgba(14, 28, 54, 0.2);
    border-radius: 8px;
    font-family: var(--texma-font);
    font-size: 0.95rem;
    background-color: var(--texma-white);
    color: var(--texma-marine);
    transition: border-color var(--transition);
    box-shadow: none;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
    outline: none;
    border-color: var(--texma-green);
    box-shadow: 0 0 0 3px rgba(56, 106, 78, 0.1);
}

.woocommerce form .form-row label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--texma-marine);
    margin-bottom: 0.4rem;
}

/* Notice/Message */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    border-top: none;
    background-color: var(--texma-white);
    border-left: 3px solid var(--texma-green);
    border-radius: 8px;
    padding: 1rem 1.5rem;
    color: var(--texma-marine);
    font-size: 0.95rem;
}

.woocommerce-message::before,
.woocommerce-info::before {
    color: var(--texma-green);
}

.woocommerce-error {
    border-left-color: #c0392b;
}

.woocommerce-error::before {
    color: #c0392b;
}

/* ============================================================
   10. KATEGORIE-GRID (Custom Shortcode auf Startseite)
   Quadratische Bilder + Titel darunter, exakt wie in der Vorschau.
   ============================================================ */

.texma-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 4rem auto;
    max-width: 1280px;
    padding: 0 2rem;
}

.texma-category-card {
    display: block;
    text-decoration: none;
    color: inherit;
}

.texma-category-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background-color: var(--texma-bg-soft);
    margin-bottom: 1.25rem;
    border-radius: 0;
    transition: transform 0.6s var(--transition);
}

.texma-category-card:hover img {
    transform: scale(1.04);
}

.texma-category-card__title {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--texma-marine);
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

/* ============================================================
   11. FOOTER – Marine-Hintergrund (#0e1c36) mit hellem Text
   ============================================================ */

#colophon,
.site-footer,
.site-bottom-footer-wrap,
.site-bottom-footer-wrap .site-footer-row-container-inner {
    background-color: var(--texma-marine) !important;
    color: var(--texma-bg) !important;
    border-top: none !important;
    border-top-left-radius: 32px !important;
    border-top-right-radius: 32px !important;
    margin-top: auto;
}

.site-footer-wrap {
    padding: 4rem 0 2rem;
}

.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer .widget-title {
    color: var(--texma-neon) !important;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 1rem;
}

.site-footer a {
    color: rgba(255, 255, 255, 0.85) !important;
    opacity: 1;
    font-size: 0.95rem;
}

.site-footer a:hover {
    color: var(--texma-neon) !important;
    opacity: 1;
}

.site-footer p,
.site-footer .footer-html-inner {
    color: rgba(255, 255, 255, 0.85) !important;
    line-height: 1.8;
}

.site-info,
.footer-html {
    color: rgba(255, 255, 255, 0.6) !important;
    opacity: 1;
    font-size: 0.85rem;
}

/* ============================================================
   FOOTER-NAVIGATION – Trennlinien entfernen, Rest unverändert
   Kadence rendert standardmäßig Border-Bottoms zwischen den
   Items (Tabellen-Look). Nur diese werden entfernt; Toggle-
   Pfeile und Schriftfarbe bleiben Kadence-Default.
   ============================================================ */

.site-footer .widget_nav_menu ul li,
.site-footer .widget_nav_menu ul li a,
.site-footer .widget_nav_menu .drawer-nav-drop-wrap,
.site-footer .widget_nav_menu .menu-item,
.site-footer .widget_nav_menu .menu-item-has-children .drawer-nav-drop-wrap,
.site-footer .collapse-sub-navigation ul li,
.site-footer .collapse-sub-navigation .drawer-nav-drop-wrap,
.site-footer .collapse-sub-navigation .menu-item-has-children .drawer-nav-drop-wrap,
.site-footer .widget_nav_menu .drawer-sub-toggle,
.site-footer .collapse-sub-navigation .drawer-sub-toggle {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
}

/* ============================================================
   12. SCHWEBENDE KONTAKT-PILLE (wie texma-gmbh.de)
   Optional via Custom HTML Widget oder Footer-Snippet einbauen.
   Markup-Vorschlag im README.
   ============================================================ */

.texma-contact-flag {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    background-color: var(--texma-marine);
    border-radius: var(--radius-pill);
    padding: 0.625rem 1.25rem 0.625rem 0.625rem;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: 0 8px 24px rgba(14, 28, 54, 0.2);
    z-index: 50;
    transition: transform var(--transition);
    text-decoration: none;
}

.texma-contact-flag:hover {
    transform: translateY(-2px);
    opacity: 1;
}

.texma-contact-flag__icon {
    width: 36px;
    height: 36px;
    background-color: var(--texma-green);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.texma-contact-flag__text {
    color: var(--texma-white);
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.3;
    display: block;
}

.texma-contact-flag__phone {
    color: var(--texma-neon);
    font-size: 0.95rem;
    font-weight: 600;
    display: block;
}

/* ============================================================
   13. DETAILS
   ============================================================ */

::selection {
    background-color: var(--texma-green);
    color: var(--texma-white);
}

img {
    max-width: 100%;
    height: auto;
}

input, textarea, select { font-size: 16px; }

/* ============================================================
   14. RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media (max-width: 640px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .texma-category-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 0 1rem;
    }

    .texma-contact-flag__text,
    .texma-contact-flag__phone {
        display: none;
    }
}
/* ============================================================
   LANDING PAGE STYLES
   Werden automatisch geladen, wenn die Startseite die
   Klasse .texma-landing trägt (Body-Class oder Page-Class).
   ============================================================ */

/* Container für vollbreite Sektionen, sprengt Kadence-Container */
.texma-landing {
    --landing-max: 1280px;
    --landing-pad: 2rem;
    width: 100%;
}

.texma-landing .texma-wrap {
    max-width: var(--landing-max);
    margin: 0 auto;
    padding: 0 var(--landing-pad);
}

/* Sektion-Spacing */
.texma-landing section {
    padding: 4rem 0;
}

@media (max-width: 768px) {
    .texma-landing section {
        padding: 2.5rem 0;
    }
}

/* ============================================================
   HERO
   ============================================================ */

.texma-hero {
    padding: 0;
    margin-top: 0;
}

.texma-hero__image {
    width: 100%;
    aspect-ratio: 16 / 5;
    object-fit: cover;
    display: block;
    border-radius: 0;
}

.texma-hero__intro {
    padding: 4rem 0 2rem;
}

.texma-hero__intro h1 {
    font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem) !important;
    font-weight: 700;
    line-height: 1.15;
    color: var(--texma-marine);
    margin-bottom: 1.5rem;
    max-width: 920px;
}

.texma-hero__intro h1 strong {
    color: var(--texma-green);
    font-weight: 700;
}

.texma-hero__intro p {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--texma-marine);
    max-width: 720px;
    margin-bottom: 2rem;
}

/* CTA-Button im Pillen-Stil mit Pfeil */
.texma-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 1.75rem;
    background-color: transparent;
    color: var(--texma-marine) !important;
    border: 1.5px solid var(--texma-marine);
    border-radius: var(--radius-pill);
    font-family: var(--texma-font);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    transition: all var(--transition);
    line-height: 1;
}

.texma-cta:hover {
    background-color: var(--texma-marine);
    color: var(--texma-white) !important;
    opacity: 1;
}

.texma-cta:hover .texma-cta__arrow path {
    stroke: var(--texma-neon);
}

.texma-cta--filled {
    background-color: var(--texma-green);
    color: var(--texma-white) !important;
    border-color: var(--texma-green);
}

.texma-cta--filled .texma-cta__arrow path {
    stroke: var(--texma-neon);
}

.texma-cta--filled:hover {
    background-color: var(--texma-green-dark);
    border-color: var(--texma-green-dark);
    color: var(--texma-white) !important;
}

.texma-cta__arrow {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

/* ============================================================
   SECTION HEAD (über Sektionen)
   ============================================================ */

.texma-section-head {
    margin-bottom: 3rem;
    max-width: 920px;
}

.texma-section-head h2 {
    font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem) !important;
    font-weight: 700;
    line-height: 1.2;
    color: var(--texma-marine);
    margin-bottom: 1rem;
}

.texma-section-head h2 strong {
    color: var(--texma-green);
    font-weight: 700;
}

.texma-section-head p {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--texma-marine);
    max-width: 720px;
    margin: 0;
}

/* ============================================================
   KATEGORIE-KARTEN
   ============================================================ */

.texma-cats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

@media (max-width: 1024px) {
    .texma-cats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .texma-cats { grid-template-columns: 1fr; }
}

.texma-cat {
    display: block;
    text-decoration: none !important;
    color: var(--texma-marine) !important;
}

.texma-cat__image {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: var(--texma-bg-soft);
    border-radius: 30px;
    margin-bottom: 1.25rem;
}

.texma-cat__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--transition);
}

.texma-cat:hover .texma-cat__image img {
    transform: scale(1.05);
}

.texma-cat h3 {
    font-size: 1.5rem !important;
    font-weight: 700;
    color: var(--texma-marine);
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
}

.texma-cat p {
    font-size: 0.95rem;
    color: var(--texma-marine);
    opacity: 0.75;
    margin: 0 0 1rem 0;
    line-height: 1.6;
}

/* ============================================================
   WORKFLOW
   ============================================================ */

.texma-workflow {
    background-color: var(--texma-white);
    margin: 4rem 0;
    border-radius: 30px;
    padding: 4rem 0 !important;
}

.texma-workflow .texma-section-head {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.texma-workflow .texma-section-head p {
    margin-left: auto;
    margin-right: auto;
}

.texma-workflow__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

@media (max-width: 1024px) {
    .texma-workflow__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .texma-workflow__grid { grid-template-columns: 1fr; }
}

.texma-step {
    border-top: 2px solid var(--texma-green);
    padding-top: 1.25rem;
}

.texma-step__num {
    font-size: 0.85rem;
    color: var(--texma-green);
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: 0.75rem;
    display: block;
}

.texma-step h4 {
    font-size: 1.125rem !important;
    color: var(--texma-marine);
    margin: 0 0 0.5rem 0;
    font-weight: 600;
}

.texma-step p {
    font-size: 0.95rem;
    color: var(--texma-marine);
    opacity: 0.75;
    line-height: 1.6;
    margin: 0;
}

/* ============================================================
   FAQ – als <details>/<summary> für Barrierefreiheit & ohne JS
   ============================================================ */

.texma-faq {
    max-width: 920px;
    margin: 0 auto;
}

.texma-faq details {
    background-color: var(--texma-white);
    border-radius: 16px;
    margin-bottom: 0.75rem;
    overflow: hidden;
    border: 1px solid rgba(56, 106, 78, 0.08);
}

.texma-faq summary {
    padding: 1.25rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--texma-marine);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: color var(--transition);
}

.texma-faq summary::-webkit-details-marker {
    display: none;
}

.texma-faq summary::after {
    content: "+";
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--texma-green);
    transition: transform var(--transition);
    line-height: 1;
}

.texma-faq details[open] summary::after {
    content: "−";
}

.texma-faq summary:hover {
    color: var(--texma-green);
}

.texma-faq details > div {
    padding: 0 1.5rem 1.5rem;
    color: var(--texma-marine);
    opacity: 0.8;
    line-height: 1.7;
    font-size: 0.95rem;
}

/* ============================================================
   PAGE-CONTAINER ÜBERSCHREIBEN
   Kadence wrapped Page-Inhalte standardmäßig in eine Card mit
   Padding. Auf der Landingpage wollen wir VOLLE BREITE.
   ============================================================ */

body.texma-landing-active .entry-hero.page-hero-section,
body.page-template-page-full-width .entry-hero.page-hero-section {
    display: none;
}

body.texma-landing-active .entry-content-wrap,
body.page-template-page-full-width .entry-content-wrap {
    padding: 0 !important;
    max-width: none !important;
}

body.texma-landing-active .content-area,
body.page-template-page-full-width .content-area {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

body.texma-landing-active .content-container.site-container,
body.page-template-page-full-width .content-container.site-container {
    max-width: none !important;
    padding: 0 !important;
}

body.texma-landing-active .entry.single-entry {
    box-shadow: none !important;
    background: transparent !important;
}


/* ============================================================
   GUTENBERG-BLOCK-STYLES für die TEXMA-Patterns
   ------------------------------------------------------------
   Verbindet Core-Blöcke (Image, Columns, Button, Group, Details)
   mit den TEXMA-Klassen, sodass die Patterns im Editor und auf
   der Live-Seite identisch aussehen.
   ============================================================ */

/* HERO-BILD: volle Breite, keine Container-Begrenzung */
.wp-block-image.texma-hero-image {
    margin: 0 0 0 0;
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

.wp-block-image.texma-hero-image img {
    width: 100%;
    aspect-ratio: 16 / 5;
    object-fit: cover;
    display: block;
    border-radius: 0;
}

/* INTRO-BLOCK (unter Hero) */
.wp-block-group.texma-intro {
    padding: 4rem 2rem 2rem;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

.wp-block-group.texma-intro h1 {
    margin-bottom: 1.5rem;
    max-width: 920px;
}

.wp-block-group.texma-intro h1 strong {
    color: var(--texma-green);
    font-weight: 400;
}

.wp-block-group.texma-intro p {
    font-size: 1.0625rem;
    line-height: 1.75;
    max-width: 720px;
    margin-bottom: 2rem;
    color: var(--texma-marine);
}

/* CTA-BUTTON im Pillen-Stil (überschreibt Gutenberg-Default) */
.wp-block-button.texma-cta .wp-block-button__link {
    background-color: transparent !important;
    color: var(--texma-marine) !important;
    border: 1.5px solid var(--texma-marine) !important;
    border-radius: var(--radius-pill) !important;
    padding: 1rem 1.75rem !important;
    font-family: var(--texma-font) !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all var(--transition);
    line-height: 1 !important;
}

.wp-block-button.texma-cta .wp-block-button__link:hover {
    background-color: var(--texma-marine) !important;
    color: var(--texma-white) !important;
}

/* ALLGEMEINE SECTION (Kategorien + FAQ) */
.wp-block-group.texma-section {
    padding: 4rem 2rem;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

.texma-section-title {
    font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem) !important;
    margin-bottom: 1rem !important;
    color: var(--texma-marine);
}

.texma-section-title strong {
    color: var(--texma-green);
    font-weight: 400;
}

.texma-section-lead {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--texma-marine);
    max-width: 720px;
    margin: 0 0 3rem 0 !important;
}

/* KATEGORIE-KARTEN aus Columns + Image + Heading */
.wp-block-columns.texma-cats {
    gap: 1.5rem;
    margin-bottom: 0;
}

.wp-block-column.texma-cat {
    /* Reset Gutenberg-Padding */
}

.wp-block-image.texma-cat-image {
    margin: 0 0 1.25rem 0;
    overflow: hidden;
    border-radius: 30px;
    background-color: var(--texma-bg-soft);
}

.wp-block-image.texma-cat-image img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform 0.6s var(--transition);
    display: block;
}

.wp-block-column.texma-cat:hover .wp-block-image.texma-cat-image img {
    transform: scale(1.05);
}

.wp-block-column.texma-cat h3 {
    font-size: 1.5rem !important;
    margin: 0 0 0.5rem 0 !important;
    color: var(--texma-marine);
}

.wp-block-column.texma-cat h3 a {
    color: var(--texma-marine);
    text-decoration: none;
}

.wp-block-column.texma-cat h3 a:hover {
    color: var(--texma-green);
}

.wp-block-column.texma-cat p {
    font-size: 0.95rem;
    color: var(--texma-marine);
    opacity: 0.75;
    margin: 0;
    line-height: 1.6;
}

/* WORKFLOW-SEKTION: weiße Box mit abgerundeten Ecken */
.wp-block-group.texma-workflow {
    background-color: var(--texma-white);
    margin: 4rem auto !important;
    border-radius: 30px;
    padding: 4rem 2rem !important;
    max-width: 1280px;
}

.wp-block-columns.texma-steps {
    gap: 2rem;
    margin-top: 3rem !important;
    margin-bottom: 0;
}

.wp-block-column.texma-step {
    border-top: 2px solid var(--texma-green);
    padding-top: 1.25rem;
}

.texma-step-num {
    font-size: 0.85rem !important;
    color: var(--texma-green) !important;
    font-weight: 500 !important;
    letter-spacing: 0.1em !important;
    margin: 0 0 0.75rem 0 !important;
    font-family: var(--texma-font-headline) !important;
}

.wp-block-column.texma-step h4 {
    font-size: 1.125rem !important;
    margin: 0 0 0.5rem 0 !important;
    color: var(--texma-marine);
}

.wp-block-column.texma-step p:not(.texma-step-num) {
    font-size: 0.95rem;
    color: var(--texma-marine);
    opacity: 0.75;
    line-height: 1.6;
    margin: 0;
}

/* FAQ-SEKTION: native Details-Blöcke */
.wp-block-group.texma-faq {
    max-width: 920px;
    margin: 0 auto;
}

.wp-block-details.wp-block-details {
    background-color: var(--texma-white);
    border-radius: 16px;
    margin-bottom: 0.75rem;
    padding: 0;
    border: 1px solid rgba(56, 106, 78, 0.08);
}

.wp-block-details > summary {
    padding: 1.25rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--texma-marine);
    cursor: pointer;
    list-style: none;
    transition: color var(--transition);
    font-family: var(--texma-font);
}

.wp-block-details > summary::-webkit-details-marker {
    display: none;
}

.wp-block-details > summary::after {
    content: "+";
    float: right;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--texma-green);
    line-height: 1;
}

.wp-block-details[open] > summary::after {
    content: "−";
}

.wp-block-details > summary:hover {
    color: var(--texma-green);
}

.wp-block-details > p,
.wp-block-details .wp-block-paragraph {
    padding: 0 1.5rem 1.5rem !important;
    color: var(--texma-marine) !important;
    opacity: 0.8;
    line-height: 1.7 !important;
    font-size: 0.95rem !important;
    margin: 0 !important;
}

/* RESPONSIVE: Kategorien + Workflow auf Mobile in 1 Spalte */
@media (max-width: 1024px) {
    .wp-block-columns.texma-cats,
    .wp-block-columns.texma-steps {
        flex-wrap: wrap !important;
    }

    .wp-block-columns.texma-cats .wp-block-column.texma-cat {
        flex-basis: calc(50% - 0.75rem) !important;
    }

    .wp-block-columns.texma-steps .wp-block-column.texma-step {
        flex-basis: calc(50% - 1rem) !important;
    }
}

@media (max-width: 640px) {
    .wp-block-columns.texma-cats .wp-block-column.texma-cat,
    .wp-block-columns.texma-steps .wp-block-column.texma-step {
        flex-basis: 100% !important;
    }

    .wp-block-group.texma-section,
    .wp-block-group.texma-intro {
        padding: 2.5rem 1.5rem;
    }

    .wp-block-group.texma-workflow {
        padding: 2.5rem 1.5rem !important;
        border-radius: 20px;
    }
}

/* ============================================================
   15. CI-KONSISTENZ – Globale Vereinheitlichung
   Sorgt dafür, dass ALLE interaktiven Elemente überall im Shop
   den gleichen TEXMA-Look haben: 30px Radius, Marine-Border,
   Neon-Buttons, Diatype-Schrift, helle Hintergründe.
   ============================================================ */

/* ----- ALLE Eingabefelder, Selects, Textareas ----- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"],
input[type="week"],
input.input-text,
select,
textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea,
.select2-container .select2-selection--single,
.select2-container--default .select2-selection--single {
    background-color: var(--texma-white) !important;
    border: 1.5px solid rgba(14, 28, 54, 0.15) !important;
    border-radius: 30px !important;
    color: var(--texma-marine) !important;
    font-family: var(--texma-font) !important;
    font-size: 1rem !important;
    padding: 0.75rem 1.25rem !important;
    box-shadow: none !important;
    transition: border-color var(--transition);
    line-height: 1.4 !important;
    height: auto !important;
}

textarea,
.woocommerce form .form-row textarea {
    min-height: 100px !important;
    border-radius: 20px !important;
}

/* Focus-State: Marine-Border, kein outline */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input.input-text:focus,
select:focus,
textarea:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
    border-color: var(--texma-marine) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(14, 28, 54, 0.08) !important;
}

/* Select2 (Land-Dropdown im Checkout) */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--texma-marine) !important;
    line-height: 1.4 !important;
    padding: 0.75rem 1.25rem !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    right: 1rem !important;
}
.select2-dropdown {
    border: 1.5px solid var(--texma-marine) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
}
.select2-search--dropdown .select2-search__field {
    border-radius: 30px !important;
    border: 1.5px solid rgba(14, 28, 54, 0.15) !important;
    padding: 0.5rem 1rem !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--texma-marine) !important;
    color: var(--texma-neon) !important;
}

/* Labels einheitlich */
label,
.woocommerce form .form-row label {
    color: var(--texma-marine) !important;
    font-family: var(--texma-font) !important;
    font-weight: 500 !important;
    margin-bottom: 0.4rem !important;
}

/* Checkboxen / Radios: nicht stylen, würde zu komisch */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--texma-marine);
}

/* ----- ALLE Buttons konsistent: Marine-Pille mit Neon-Schrift ----- */
button,
.button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.wp-block-button__link,
.wc-block-components-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .button.alt,
.woocommerce button.button.alt,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button,
#place_order,
.checkout button[name="woocommerce_checkout_place_order"] {
    background-color: var(--texma-marine) !important;
    color: var(--texma-neon) !important;
    border: 1.5px solid var(--texma-marine) !important;
    border-radius: 30px !important;
    font-family: var(--texma-font) !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    padding: 0.85rem 1.75rem !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.2 !important;
    transition: all var(--transition);
    cursor: pointer;
    box-shadow: none !important;
    text-decoration: none !important;
    display: inline-block;
}

button:hover,
.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover,
.woocommerce-page input.button:hover,
#place_order:hover {
    background-color: var(--texma-neon) !important;
    color: var(--texma-marine) !important;
    border-color: var(--texma-marine) !important;
    box-shadow: 0 4px 12px rgba(14, 28, 54, 0.15) !important;
    transform: translateY(-1px);
}

/* Sekundäre Buttons (z.B. "Gutschein anwenden") als Outline-Pille */
.woocommerce button[name="apply_coupon"],
.woocommerce button.button:not(.alt):not(#place_order),
button[type="submit"]:not(#place_order):not(.search-submit):not([name="woocommerce_checkout_place_order"]).button:not(.alt) {
    background-color: transparent !important;
    color: var(--texma-marine) !important;
    border: 1.5px solid var(--texma-marine) !important;
}
.woocommerce button[name="apply_coupon"]:hover {
    background-color: var(--texma-marine) !important;
    color: var(--texma-neon) !important;
}

/* "Place Order" extra prominent */
#place_order,
.checkout button[name="woocommerce_checkout_place_order"] {
    background-color: var(--texma-neon) !important;
    color: var(--texma-marine) !important;
    border: 1.5px solid var(--texma-marine) !important;
    font-size: 1.1rem !important;
    padding: 1rem 2.5rem !important;
    font-weight: 700 !important;
}
#place_order:hover {
    background-color: var(--texma-marine) !important;
    color: var(--texma-neon) !important;
}

/* ----- Notices (Info-/Erfolg-/Fehler-Boxen) im CI ----- */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce-notice,
.woocommerce-noreviews,
p.no-comments {
    background-color: var(--texma-white) !important;
    color: var(--texma-marine) !important;
    border-radius: 20px !important;
    border: 1.5px solid var(--texma-marine) !important;
    padding: 1rem 1.5rem !important;
    font-family: var(--texma-font) !important;
    box-shadow: none !important;
    margin-bottom: 1.5rem !important;
}
.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before {
    color: var(--texma-marine) !important;
    top: 1rem !important;
    left: 1.5rem !important;
}
.woocommerce-info a,
.woocommerce-message a,
.woocommerce-error a {
    color: var(--texma-marine) !important;
    font-weight: 600;
    text-decoration: underline;
}

/* ----- Cart-/Checkout-Tabelle: Boxen mit 30px Radius ----- */
.woocommerce table.shop_table,
.woocommerce-checkout-review-order-table,
table.cart {
    border-radius: 30px !important;
    border: 1.5px solid rgba(14, 28, 54, 0.15) !important;
    overflow: hidden !important;
    background-color: var(--texma-white) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td,
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
    background-color: var(--texma-white) !important;
    color: var(--texma-marine) !important;
    border-bottom: 1px solid rgba(14, 28, 54, 0.08) !important;
}

.woocommerce table.shop_table thead th {
    background-color: var(--texma-bg) !important;
    font-family: var(--texma-font-headline) !important;
    color: var(--texma-marine) !important;
    font-weight: 600;
}

.woocommerce table.shop_table tfoot tr:last-child th,
.woocommerce table.shop_table tfoot tr:last-child td {
    border-bottom: none !important;
}

.woocommerce table.shop_table .order-total {
    background-color: var(--texma-bg) !important;
}
.woocommerce table.shop_table .order-total th,
.woocommerce table.shop_table .order-total td {
    background-color: var(--texma-bg) !important;
    font-size: 1.15rem;
    font-weight: 700;
}

/* Checkout-Spalten-Boxen (Rechnungsdaten, Lieferung, Bestellung) */
.col2-set .col-1,
.col2-set .col-2,
#order_review,
.woocommerce-additional-fields,
form.checkout > .woocommerce-billing-fields,
form.checkout > .woocommerce-shipping-fields,
form.checkout #order_review,
.cart-collaterals .cart_totals {
    background-color: var(--texma-white);
    border-radius: 30px;
    padding: 2rem;
    border: 1.5px solid rgba(14, 28, 54, 0.08);
    margin-bottom: 1.5rem;
}

#payment {
    background-color: var(--texma-white) !important;
    border-radius: 30px !important;
    padding: 1.5rem !important;
    border: 1.5px solid rgba(14, 28, 54, 0.08) !important;
}
#payment .payment_box {
    background-color: var(--texma-bg) !important;
    border-radius: 20px !important;
    margin-top: 1rem !important;
}
#payment ul.payment_methods {
    border-bottom: 1px solid rgba(14, 28, 54, 0.08) !important;
    padding-bottom: 1rem !important;
}
#payment ul.payment_methods li {
    background-color: transparent !important;
    margin-bottom: 0.5rem;
}
#payment ul.payment_methods li label {
    color: var(--texma-marine) !important;
    font-weight: 600;
}

/* Versand-Optionen */
.woocommerce-shipping-totals ul#shipping_method li {
    margin-bottom: 0.4rem;
}
.woocommerce-shipping-totals ul#shipping_method li label {
    color: var(--texma-marine) !important;
    font-weight: 500;
}

/* Mini-Cart im Header */
.woocommerce-mini-cart {
    background-color: var(--texma-white) !important;
    border-radius: 20px !important;
    padding: 1rem !important;
}
.woocommerce-mini-cart-item {
    border-bottom: 1px solid rgba(14, 28, 54, 0.08) !important;
    padding: 0.75rem 0 !important;
}
.woocommerce-mini-cart__buttons .button {
    margin-top: 0.5rem !important;
    width: 100%;
    text-align: center;
}

/* Cart-Drawer */
#cart-drawer .drawer-inner {
    background-color: var(--texma-bg) !important;
}
#cart-drawer .drawer-header {
    border-bottom: 1.5px solid rgba(14, 28, 54, 0.15) !important;
}
#cart-drawer .side-cart-header {
    color: var(--texma-marine) !important;
    font-family: var(--texma-font-headline) !important;
}
#cart-drawer .cart-toggle-close svg {
    fill: var(--texma-marine) !important;
}

/* Mobile-Drawer */
#mobile-drawer .drawer-inner,
#mobile-drawer .drawer-content {
    background-color: var(--texma-bg) !important;
}
#mobile-drawer .menu-toggle-close .toggle-close-bar {
    background-color: var(--texma-marine) !important;
}
#mobile-drawer .mobile-navigation ul li > a,
#mobile-drawer .mobile-navigation ul li.menu-item-has-children > .drawer-nav-drop-wrap a {
    color: var(--texma-marine) !important;
    font-family: var(--texma-font) !important;
    font-weight: 500;
}
#mobile-drawer .mobile-navigation ul li.menu-item-has-children .drawer-nav-drop-wrap,
#mobile-drawer .mobile-navigation ul li:not(.menu-item-has-children) a {
    border-bottom: 1px solid rgba(14, 28, 54, 0.1) !important;
}
#mobile-drawer .drawer-sub-toggle svg {
    fill: var(--texma-marine) !important;
}

/* ----- "Lieferung an andere Adresse" Checkbox ----- */
#ship-to-different-address {
    color: var(--texma-marine) !important;
    font-family: var(--texma-font-headline) !important;
}
#ship-to-different-address label {
    cursor: pointer;
}

/* ----- Geschenkkarte / Coupon Boxen ----- */
#pwgc-redeem-gift-card-form,
.woocommerce-form-coupon {
    background-color: var(--texma-bg) !important;
    border-radius: 20px !important;
    padding: 1.25rem !important;
    margin-bottom: 1rem !important;
    border: 1px solid rgba(14, 28, 54, 0.1) !important;
}

/* ----- Headlines im Checkout ----- */
.woocommerce h3,
#order_review_heading,
#order_payment_heading,
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3 {
    font-family: var(--texma-font-headline) !important;
    color: var(--texma-marine) !important;
    margin-top: 0;
    margin-bottom: 1.25rem !important;
}

/* Pflichtfeld-Sterne dezent in Marine */
.required,
abbr.required {
    color: var(--texma-marine) !important;
    text-decoration: none !important;
    border: none !important;
}

/* ----- Shop-Kategorien-Filter / Sidebar ----- */
.woocommerce-ordering select,
.woocommerce ul.products li.product .price,
.woocommerce-result-count {
    color: var(--texma-marine) !important;
}
.woocommerce-result-count {
    font-family: var(--texma-font);
}

/* ----- Variation Swatches (Größen-Buttons) ----- */
.tawcvs-swatches .swatch,
.swatch-item-wrapper .swatch {
    border-radius: 30px !important;
    border: 1.5px solid rgba(14, 28, 54, 0.2) !important;
    color: var(--texma-marine) !important;
    background-color: var(--texma-white) !important;
    transition: all var(--transition);
}
.tawcvs-swatches .swatch.selected,
.tawcvs-swatches .swatch:hover {
    background-color: var(--texma-marine) !important;
    color: var(--texma-neon) !important;
    border-color: var(--texma-marine) !important;
}

/* ----- Quantity-Input ----- */
.woocommerce .quantity input.qty,
.quantity input[type="number"] {
    border-radius: 30px !important;
    border: 1.5px solid rgba(14, 28, 54, 0.15) !important;
    text-align: center !important;
    padding: 0.5rem 0.75rem !important;
    width: 80px !important;
}

/* ----- Kommentare / Reviews ----- */
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    border-radius: 30px !important;
}
.comment-form textarea {
    border-radius: 20px !important;
}

/* ----- Modal-Boxen (Pickup-Stationen, Login-Popup) ----- */
.wc-stc-modal-content {
    background-color: var(--texma-white) !important;
    border-radius: 30px !important;
    padding: 2rem !important;
    border: none !important;
    box-shadow: 0 20px 60px rgba(14, 28, 54, 0.2) !important;
}
.wc-stc-modal-background {
    background-color: rgba(14, 28, 54, 0.5) !important;
}
.wc-stc-modal-content header h4 {
    font-family: var(--texma-font-headline) !important;
    color: var(--texma-marine) !important;
}
.wc-stc-modal-close {
    color: var(--texma-marine) !important;
}

/* ----- Login-/Account-Forms ----- */
.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.checkout_coupon,
.woocommerce form.lost_reset_password {
    background-color: var(--texma-white) !important;
    border-radius: 30px !important;
    border: 1.5px solid rgba(14, 28, 54, 0.08) !important;
    padding: 2rem !important;
}

/* ----- Tabs auf Single-Product-Seite — gestylt im Pillen-Block oben ----- */
/* (Alter Look mit Border-Bottom war ersetzt durch TEXMA-Pillen weiter oben) */

/* ----- Price-Anzeige ----- */
.woocommerce-Price-amount,
.woocommerce ul.products li.product .price,
.product .price {
    color: var(--texma-marine) !important;
    font-weight: 600 !important;
    font-family: var(--texma-font-headline) !important;
}

/* Sale-Preis (durchgestrichen) */
del .woocommerce-Price-amount {
    opacity: 0.5;
    font-weight: 400 !important;
}

/* ----- Pagination ----- */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    border-radius: 30px !important;
    background-color: var(--texma-white) !important;
    color: var(--texma-marine) !important;
    border: 1.5px solid rgba(14, 28, 54, 0.15) !important;
    padding: 0.5rem 1rem !important;
    font-family: var(--texma-font);
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
    background-color: var(--texma-marine) !important;
    color: var(--texma-neon) !important;
    border-color: var(--texma-marine) !important;
}

/* ----- Inline Tax / Delivery-Time-Notes ----- */
.wc-gzd-cart-info,
.delivery-time-info,
.wc-gzd-additional-info,
.includes_tax,
.tax_label,
small.includes_tax {
    color: var(--texma-marine) !important;
    opacity: 0.75;
    font-size: 0.875rem !important;
    font-family: var(--texma-font);
}

/* ----- Skip-Link ----- */
.skip-link:focus {
    background-color: var(--texma-marine) !important;
    color: var(--texma-neon) !important;
    border-radius: 30px !important;
}

/* ----- Allgemeine Cards / Boxen im Content ----- */
.entry.single-entry,
.entry.loop-entry,
article.entry {
    border-radius: 30px !important;
}

/* Container-Boxen weichen vom Kadence-Default ab */
.entry-content-wrap,
.kadence-loop-entry-inner {
    border-radius: 30px !important;
}

/* ----- Kadence-Brand-Farben überschreiben (Buttons aus Block-Editor) ----- */
.has-theme-palette-1-background-color { background-color: var(--texma-marine) !important; }
.has-theme-palette-1-color { color: var(--texma-marine) !important; }
.has-theme-palette-2-background-color { background-color: var(--texma-green) !important; }
.has-theme-palette-2-color { color: var(--texma-green) !important; }

/* ----- Globaler Body-Hintergrund auf allen Seiten ----- */
body,
.wp-site-blocks,
.content-bg,
body.content-style-unboxed .site,
body.archive,
body.post-type-archive-product,
body.woocommerce-checkout,
body.woocommerce-cart {
    background-color: var(--texma-bg) !important;
}

/* ============================================================
   16. RESETS für Buttons, die NICHT zur Pillen-Logik gehören
   Globaler Button-Selektor (Sektion 15) erfasst sonst auch
   Hamburger-Toggle, Schließen-Buttons, Drawer-Sub-Toggles.
   ============================================================ */

.menu-toggle-open,
.menu-toggle-close,
.search-toggle-open,
.search-toggle-close,
.cart-toggle-close,
.drawer-toggle,
.drawer-sub-toggle,
.mobile-toggle-open-container .menu-toggle-open,
.mobile-toggle-open-container .menu-toggle-open:hover,
.search-toggle-open-container .search-toggle-open,
.header-cart-button,
.header-search-button,
button.menu-toggle-open,
button.menu-toggle-close,
button.drawer-sub-toggle,
button.cart-toggle-close,
button.search-toggle-close {
    background-color: transparent !important;
    color: inherit !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0.5rem !important;
    font-weight: normal !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Hamburger-Icon: nur Farbe setzen, keine Pille */
.mobile-toggle-open-container .menu-toggle-open {
    color: var(--texma-marine) !important;
    padding: 0.4em 0.6em !important;
}
.mobile-toggle-open-container .menu-toggle-open svg,
.mobile-toggle-open-container .menu-toggle-open svg path {
    fill: var(--texma-marine) !important;
    stroke: var(--texma-marine) !important;
}

/* Hover-States dieser Toggle-Buttons NICHT mit Pillen-Hover */
.menu-toggle-open:hover,
.menu-toggle-close:hover,
.search-toggle-open:hover,
.cart-toggle-close:hover,
.drawer-toggle:hover,
.drawer-sub-toggle:hover {
    background-color: transparent !important;
    color: inherit !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Cart und Suche im Header — Marine-Icons ohne Pille (wie v1.5.4) */
.header-cart-button {
    color: var(--texma-marine) !important;
}
.header-cart-button svg {
    fill: var(--texma-marine) !important;
    color: var(--texma-marine) !important;
}
.header-cart-button .header-cart-total {
    background-color: var(--texma-marine) !important;
    color: var(--texma-neon) !important;
    border-radius: 50% !important;
    width: 18px;
    height: 18px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.search-toggle-open-container .search-toggle-open {
    color: var(--texma-marine) !important;
}
.search-toggle-open-container .search-toggle-open svg {
    fill: var(--texma-marine) !important;
}

/* "remove from cart" × — bleibt klein und unauffällig */
.woocommerce a.remove,
.woocommerce-mini-cart-item a.remove {
    background-color: transparent !important;
    color: var(--texma-marine) !important;
    border: none !important;
    border-radius: 50% !important;
    padding: 0 !important;
    font-size: 1.2rem !important;
    width: 24px !important;
    height: 24px !important;
    line-height: 24px !important;
    text-align: center !important;
    font-weight: 700 !important;
}
.woocommerce a.remove:hover {
    background-color: var(--texma-marine) !important;
    color: var(--texma-neon) !important;
}


/* ============================================================
   17. MOBILE-HEADER – Eine durchgehende Bar (wie Desktop)
   Logo links, Tools (Suche, Cart, Hamburger) rechts, alles in
   einer einzigen Neon-Pille. Konsistent mit Desktop-Header.
   ============================================================ */

@media (max-width: 1024px) {

    /* Outer Wrapper: transparent, normales Padding */
    .site-mobile-header-wrap,
    #mobile-header {
        background-color: transparent !important;
        padding: 0.75rem 1rem !important;
    }

    /* Die eine durchgehende Pille — wie der Desktop-Header */
    #mobile-header .site-main-header-wrap,
    #mobile-header .site-main-header-wrap .site-header-row-container-inner {
        background-color: var(--texma-neon) !important;
        border-radius: 999px !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        min-height: 0 !important;
    }

    #mobile-header .site-main-header-inner-wrap {
        background-color: transparent !important;
        padding: 8px 16px !important;
        min-height: 0 !important;
    }

    /* Header-Row als Flex: Logo links, Tools rechts */
    #mobile-header .site-header-row,
    #mobile-header .site-main-header-inner-wrap > .site-header-row,
    #mobile-header .site-header-row-container-inner > .site-header-row {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        padding: 0 !important;
        gap: 0.5rem !important;
        background-color: transparent !important;
    }

    /* Linke Sektion: Logo, klebt links */
    #mobile-header .site-header-main-section-left {
        background-color: transparent !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 auto 0 0 !important;
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    #mobile-header .site-branding,
    #mobile-header .site-header-main-section-left .site-branding {
        text-align: left !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    #mobile-header .site-branding img {
        max-height: 26px !important;
        width: auto !important;
        margin: 0 !important;
    }

    /* Rechte Sektion: Suche, Cart, Hamburger nebeneinander */
    #mobile-header .site-header-main-section-right {
        background-color: transparent !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 0 0 auto !important;
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.25rem !important;
    }

    /* Native Kadence-Items: Cart, Search, Account, Hamburger */
    #mobile-header .header-cart-button,
    #mobile-header .search-toggle-open-container .search-toggle-open,
    #mobile-header .header-button-wrap a,
    #mobile-header .header-html a,
    #mobile-header .mobile-toggle-open-container .menu-toggle-open {
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        border-radius: 50% !important;
        color: var(--texma-marine) !important;
        padding: 8px !important;
        margin: 0 !important;
        box-shadow: none !important;
        min-height: 0 !important;
        line-height: 1 !important;
        font-weight: normal !important;
        text-decoration: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: opacity var(--transition);
    }

    #mobile-header .header-cart-button:hover,
    #mobile-header .search-toggle-open-container .search-toggle-open:hover,
    #mobile-header .header-button-wrap a:hover,
    #mobile-header .header-html a:hover,
    #mobile-header .mobile-toggle-open-container .menu-toggle-open:hover {
        background: transparent !important;
        background-color: transparent !important;
        opacity: 0.7;
        color: var(--texma-marine) !important;
        transform: none !important;
    }

    /* SVGs Marine */
    #mobile-header .header-cart-button svg,
    #mobile-header .search-toggle-open-container .search-toggle-open svg,
    #mobile-header .header-button-wrap a svg,
    #mobile-header .header-html a svg,
    #mobile-header .mobile-toggle-open-container .menu-toggle-open svg {
        fill: var(--texma-marine) !important;
        color: var(--texma-marine) !important;
        stroke: var(--texma-marine) !important;
        width: 22px !important;
        height: 22px !important;
    }

    /* Cart-Badge */
    #mobile-header .header-cart-button .header-cart-total {
        background-color: var(--texma-marine) !important;
        color: var(--texma-neon) !important;
        border-radius: 50% !important;
        width: 16px !important;
        height: 16px !important;
        font-size: 0.65rem !important;
        font-weight: 700 !important;
        line-height: 16px !important;
        text-align: center !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: absolute !important;
        top: 2px !important;
        right: 2px !important;
        margin-left: 0 !important;
    }

    #mobile-header .header-cart-wrap,
    #mobile-header .header-cart-inner-wrap,
    #mobile-header .header-cart-button {
        position: relative !important;
    }

    /* ----- Mobile-Drawer (geöffnet): neon-grüner Vollbild ----- */

    #mobile-drawer .drawer-inner,
    #mobile-drawer .drawer-content {
        background-color: var(--texma-neon) !important;
    }

    #mobile-drawer .drawer-overlay {
        background-color: rgba(52, 255, 103, 0.95) !important;
    }

    #mobile-drawer .drawer-header {
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        padding: 1rem !important;
        border-bottom: none !important;
    }

    #mobile-drawer .menu-toggle-close,
    #mobile-drawer .drawer-toggle {
        background-color: var(--texma-white) !important;
        border-radius: 999px !important;
        padding: 14px 18px !important;
        border: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        height: auto !important;
        gap: 4px !important;
    }

    #mobile-drawer .menu-toggle-close .toggle-close-bar {
        background-color: var(--texma-marine) !important;
        width: 18px !important;
        height: 2px !important;
    }

    /* Menü-Items im Drawer */
    #mobile-drawer .mobile-navigation,
    #mobile-drawer .mobile-menu-container,
    #mobile-drawer .mobile-navigation ul {
        background-color: transparent !important;
    }

    #mobile-drawer .mobile-navigation ul#mobile-menu > li.menu-item > a,
    #mobile-drawer .mobile-navigation ul#mobile-menu > li.menu-item.menu-item-has-children > .drawer-nav-drop-wrap,
    #mobile-drawer .mobile-navigation ul#mobile-menu > li.menu-item.menu-item-has-children > .drawer-nav-drop-wrap > a,
    #mobile-drawer .mobile-navigation ul#mobile-menu > li.menu-item:not(.menu-item-has-children) > a {
        background-color: transparent !important;
        color: var(--texma-marine) !important;
        font-family: var(--texma-font-headline) !important;
        font-size: 1.5rem !important;
        font-weight: 500 !important;
        padding: 1rem 2rem !important;
        margin: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        text-align: center !important;
        text-decoration: none !important;
        display: block !important;
        width: 100% !important;
    }

    #mobile-drawer .mobile-navigation ul#mobile-menu > li.menu-item.menu-item-has-children > .drawer-nav-drop-wrap {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        padding: 0 !important;
    }

    #mobile-drawer .mobile-navigation ul#mobile-menu > li.menu-item.menu-item-has-children > .drawer-nav-drop-wrap > a {
        flex: initial !important;
        width: auto !important;
        padding: 1rem 0 !important;
    }

    #mobile-drawer .mobile-navigation ul#mobile-menu > li.menu-item.menu-item-has-children > .drawer-nav-drop-wrap > .drawer-sub-toggle,
    #mobile-drawer .mobile-navigation ul#mobile-menu > li.menu-item.menu-item-has-children > .drawer-nav-drop-wrap > button {
        background-color: transparent !important;
        border: none !important;
        padding: 0.5rem !important;
        color: var(--texma-marine) !important;
    }

    #mobile-drawer .mobile-navigation ul#mobile-menu > li.menu-item.menu-item-has-children > .drawer-nav-drop-wrap > .drawer-sub-toggle svg,
    #mobile-drawer .mobile-navigation ul#mobile-menu > li.menu-item.menu-item-has-children > .drawer-nav-drop-wrap > button svg {
        fill: var(--texma-marine) !important;
        width: 20px;
        height: 20px;
    }

    #mobile-drawer .mobile-navigation ul ul.sub-menu li.menu-item > a {
        background-color: transparent !important;
        color: var(--texma-marine) !important;
        font-family: var(--texma-font) !important;
        font-size: 1rem !important;
        font-weight: 400 !important;
        padding: 0.5rem 2rem !important;
        margin: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        text-align: center !important;
        opacity: 0.8;
        display: block !important;
        width: 100% !important;
    }

    #mobile-drawer .mobile-navigation ul ul.sub-menu li.menu-item > a:hover {
        opacity: 1;
    }
}


/* ============================================================
   18. PRODUKT-LAYOUT FIXES (mobil + Größen-Swatches + Spacing)
   - Einzelproduktbilder mit Eckenrundung
   - Mehr Abstand zwischen Bildergalerie und Produktinfos auf mobil
   - Größen-Swatches als echte Kreise (perfekt rund)
   - Loop-Karten: oben abgerundete Bilder, unten unbeschnittene Texte
   ============================================================ */

/* ----- 1. EINZELPRODUKT: Bilder mit Eckenrundung ----- */
.single-product .woocommerce-product-gallery,
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper,
.single-product .woocommerce-product-gallery__image {
    border-radius: 24px !important;
    overflow: hidden !important;
}

.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image img,
.single-product .woocommerce-product-gallery .flex-control-thumbs li img {
    border-radius: 24px !important;
}

/* Thumbnail-Reihe der Bildergalerie auch mit Rundung */
.single-product .woocommerce-product-gallery .flex-control-thumbs {
    margin-top: 0.75rem !important;
    gap: 0.5rem !important;
    display: flex !important;
    flex-wrap: wrap !important;
    padding: 0 !important;
    list-style: none !important;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs li {
    margin: 0 !important;
    width: calc(25% - 0.4rem) !important;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs li img {
    border-radius: 16px !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
}

/* ----- 2. MOBILE: Single-Product-Layout auf 1 Spalte zwingen ----- */
@media (max-width: 768px) {

    /* Container: keine Floats, normales Block-Layout */
    .single-product .product,
    .single-product div.product {
        display: block !important;
        width: 100% !important;
        clear: both !important;
    }

    /* Galerie nimmt volle Breite */
    .single-product .product .woocommerce-product-gallery,
    .single-product div.product .woocommerce-product-gallery {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 1rem 0 !important;
        clear: both !important;
        display: block !important;
    }

    /* Info-Spalte direkt darunter, ohne Leerraum */
    .single-product .product .summary,
    .single-product div.product .summary,
    .single-product .product .entry-summary,
    .single-product div.product .entry-summary {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding-top: 0 !important;
        clear: both !important;
        display: block !important;
    }

    /* Tabs darunter auch volle Breite */
    .single-product .product .woocommerce-tabs,
    .single-product div.product .woocommerce-tabs {
        float: none !important;
        width: 100% !important;
        clear: both !important;
        margin-top: 2rem !important;
    }

    /* "Ähnliche Produkte"-Block */
    .single-product .related,
    .single-product .upsells {
        float: none !important;
        width: 100% !important;
        clear: both !important;
    }

    /* Breadcrumbs nicht aus dem Bild rausragen lassen */
    .woocommerce-breadcrumb {
        margin-bottom: 1rem !important;
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
    }
}

/* ----- 3. GRÖSSEN-SWATCHES als perfekte Kreise ----- */
/* WooCommerce Variation Swatches Plugin rendert
   .tawcvs-swatches > .swatch.swatch-label
   Default: padding macht aus Kreisen Eier — wir setzen feste
   Maße und perfekte Rundung. */

.tawcvs-swatches .swatch.swatch-label,
.tawcvs-swatches .swatch,
.swatch-item-wrapper .swatch,
.variations .swatch {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.9rem !important;
    line-height: 1 !important;
    border: 1.5px solid rgba(14, 28, 54, 0.2) !important;
    background-color: var(--texma-white) !important;
    color: var(--texma-marine) !important;
    text-align: center !important;
    margin: 0 0.4rem 0.4rem 0 !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    cursor: pointer;
    transition: all var(--transition);
}

.tawcvs-swatches .swatch.selected,
.tawcvs-swatches .swatch:hover,
.swatch-item-wrapper .swatch.selected,
.swatch-item-wrapper .swatch:hover {
    background-color: var(--texma-marine) !important;
    color: var(--texma-neon) !important;
    border-color: var(--texma-marine) !important;
}

/* Größen-Swatch-Container */
.tawcvs-swatches {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    align-items: center !important;
    margin-bottom: 1rem !important;
}

/* ----- 4. PRODUKT-LOOP-KARTEN: Bilder oben abgerundet, unten nicht ----- */
/* Kadence rendert die ganze Karte (entry-content-wrap) mit border-radius
   und overflow:hidden. Das schneidet zweizeilige Titel ab.
   Lösung: NUR das Bild oben abrunden, nicht die ganze Karte. */

.woocommerce ul.products li.product,
.products .product,
.kadence-woo-archive-grid li.product {
    border-radius: 0 !important;
    overflow: visible !important;
}

.woocommerce ul.products li.product .kadence-loop-entry-inner,
.woocommerce ul.products li.product .entry-content-wrap,
.kadence-loop-entry-inner {
    border-radius: 0 !important;
    overflow: visible !important;
    background-color: transparent !important;
    padding: 0 !important;
}

/* Nur das Bild bekommt Rundung — alle vier Ecken */
.woocommerce ul.products li.product .product-image-link,
.woocommerce ul.products li.product .post-thumbnail,
.woocommerce ul.products li.product a img.attachment-woocommerce_thumbnail,
.woocommerce ul.products li.product .product-thumbnail,
.kadence-loop-entry-inner .post-thumbnail {
    border-radius: 24px !important;
    overflow: hidden !important;
    display: block !important;
}

.woocommerce ul.products li.product img.attachment-woocommerce_thumbnail,
.woocommerce ul.products li.product img:not(.swatch img) {
    border-radius: 24px !important;
}

/* Titel + Preis + Button: keine Rundung mehr nötig, da Container nicht mehr abschneidet */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .product-details {
    border-radius: 0 !important;
    overflow: visible !important;
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
}

/* Mehr Abstand zwischen Bild und Titel */
.woocommerce ul.products li.product .product-details,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    margin-top: 1rem !important;
}

/* ============================================================
   19. KATALOG: MwSt + Lieferzeit ausblenden
   Germanized rendert auf Loop-Karten:
   - "inkl. MwSt." (.wc-gzd-additional-info, .price_label)
   - "Lieferzeit bis zu X Werktage" (.delivery-time-info)
   Auf Einzelproduktseiten bleibt alles sichtbar.
   ============================================================ */

/* Nur in Produkt-Loops (Archiv, Kategorie, Shop, Suche, Related) */
.woocommerce ul.products li.product .wc-gzd-additional-info,
.woocommerce ul.products li.product .delivery-time-info,
.woocommerce ul.products li.product .wc-gzd-additional-info-loop,
.woocommerce ul.products li.product .price_label,
.woocommerce ul.products li.product .wc-gzd-item-desc,
.woocommerce ul.products li.product small.includes_tax,
.woocommerce ul.products li.product .tax_label,
.woocommerce-page ul.products li.product .wc-gzd-additional-info,
.woocommerce-page ul.products li.product .delivery-time-info,
.kadence-woo-archive-grid li.product .wc-gzd-additional-info,
.kadence-woo-archive-grid li.product .delivery-time-info,
.kadence-woo-archive-grid li.product small.includes_tax {
    display: none !important;
}

/* ============================================================
   20. RESPONSIVE: Produkt-Loop auf Mobil
   - 2 Spalten auf Smartphone
   - Bilder bekommen klare max-Höhe
   - Spaltenabstand reduziert auf engen Screens
   ============================================================ */

@media (max-width: 768px) {

    /* 2 Spalten auf Mobil — wie Desktop, nur enger */
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 1rem !important;
        margin: 0 0 2rem 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .woocommerce ul.products li.product,
    .woocommerce-page ul.products li.product {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        float: none !important;
        clear: none !important;
    }

    /* Bilder strikt auf Spaltenbreite begrenzen + 1:1 */
    .woocommerce ul.products li.product a img,
    .woocommerce ul.products li.product .attachment-woocommerce_thumbnail,
    .woocommerce ul.products li.product img.wp-post-image {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
        margin-bottom: 0.75rem !important;
    }

    /* Bild-Container ebenfalls strikt begrenzen */
    .woocommerce ul.products li.product .product-image-link,
    .woocommerce ul.products li.product .post-thumbnail {
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: 1 / 1 !important;
        display: block !important;
    }

    /* Titel kleiner auf Mobil, damit zwei Zeilen Platz haben */
    .woocommerce ul.products li.product .woocommerce-loop-product__title,
    .woocommerce ul.products li.product h2,
    .woocommerce ul.products li.product h3 {
        font-size: 0.95rem !important;
        line-height: 1.3 !important;
        margin: 0 0 0.4rem 0 !important;
        padding: 0 !important;
    }

    /* Preis kompakter */
    .woocommerce ul.products li.product .price {
        font-size: 1rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* "Ausführung wählen" / "In den Warenkorb" Button auf Mobil
       schmaler, damit er nicht über die Karte hinausragt */
    .woocommerce ul.products li.product .button {
        width: 100% !important;
        font-size: 0.85rem !important;
        padding: 0.7rem 1rem !important;
        text-align: center !important;
        white-space: normal !important;
        line-height: 1.2 !important;
    }

    /* Kategorien-Label oberhalb des Titels (z.B. "SG H2KU HERRENBERG") */
    .woocommerce ul.products li.product .product-loop-category,
    .woocommerce ul.products li.product .product-cat-label {
        font-size: 0.7rem !important;
        margin-bottom: 0.25rem !important;
        letter-spacing: 0.05em !important;
    }

    /* "Angebot!" Sale-Badge kleiner */
    .woocommerce ul.products li.product .onsale,
    .woocommerce span.onsale {
        font-size: 0.7rem !important;
        padding: 0.25rem 0.6rem !important;
        top: 0.5rem !important;
        right: 0.5rem !important;
    }
}

/* ----- Sehr kleine Screens (alte iPhones, < 380px) ----- */
@media (max-width: 380px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products {
        gap: 0.75rem !important;
    }

    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 0.85rem !important;
    }

    .woocommerce ul.products li.product .button {
        font-size: 0.8rem !important;
        padding: 0.6rem 0.75rem !important;
    }
}

/* ============================================================
   21. LIVE-MARKUP-FIXES für Produkt-Loop
   Beobachtetes Markup auf shop.texma-gmbh.de/1shop:
   <ul.products>
     <li.product>
       <a href="..."><img class="..."></a>  ← Bild
       <h2>...</h2>                          ← Titel
       <span class="price">...</span>        ← Preis
       <a class="button add_to_cart_button">  ← Button
     </li>
   </ul>
   Keine .kadence-loop-entry-inner, kein .product-image-link.
   Wir targetieren direkt auf li.product > a:first-of-type für Bild.
   ============================================================ */

/* Bild-Links — robuster Selektor mit :has() für moderne Browser
   plus Fallback über direkte img-Selektoren.
   Greift auch bei Sale-Produkten, wo evtl. .onsale-Span vorne steht. */

/* Variante 1: Modern mit :has() — der <a> hat ein <img> als Kind */
.woocommerce ul.products li.product:not(.product-category) > a:has(> img),
.woocommerce-page ul.products li.product:not(.product-category) > a:has(> img) {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    background-color: var(--texma-white) !important;
    position: relative !important;
}

/* Variante 2: Fallback — das Bild selbst direkt stylen
   Greift auch in Browsern ohne :has() Support */
.woocommerce ul.products li.product:not(.product-category) img.attachment-woocommerce_thumbnail,
.woocommerce ul.products li.product:not(.product-category) img.wp-post-image,
.woocommerce ul.products li.product:not(.product-category) > a > img,
.woocommerce-page ul.products li.product:not(.product-category) img.attachment-woocommerce_thumbnail {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    margin: 0 !important;
    border-radius: 24px !important;
    display: block !important;
    background-color: var(--texma-white) !important;
}

/* Wenn das Bild in einem <a> sitzt, dann den <a> auch ohne :has() korrekt
   styling: alle direkten <a>-Kinder im li.product, die nicht die typischen
   Action-Links sind (Cart-Button, Variation-Selektoren etc.) */
.woocommerce ul.products li.product:not(.product-category) > a:not(.button):not(.add_to_cart_button) {
    display: block !important;
    border-radius: 24px !important;
    overflow: hidden !important;
}

/* Zweites Bild (Hover-Effekt) ausblenden auf Mobil */
@media (max-width: 768px) {
    .woocommerce ul.products li.product:not(.product-category) > a > img:nth-child(n+2),
    .woocommerce ul.products li.product:not(.product-category) > a img.secondary-image {
        display: none !important;
    }
}

/* ===== KATEGORIE-KARTEN (Produktkategorien-Übersicht) ===== */
/* li.product-category enthält genau einen <a>-Tag mit Bild + h2 (Titel) */

.woocommerce ul.products li.product-category {
    list-style: none !important;
}

.woocommerce ul.products li.product-category > a {
    display: block !important;
    text-decoration: none !important;
    color: var(--texma-marine) !important;
}

/* Bild der Kategorie-Karte: oben, quadratisch, abgerundet */
.woocommerce ul.products li.product-category > a > img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
    background-color: var(--texma-white) !important;
    border-radius: 24px !important;
    margin: 0 0 0.75rem 0 !important;
    padding: 1rem !important;
    box-sizing: border-box !important;
}

/* Titel der Kategorie-Karte */
.woocommerce ul.products li.product-category > a > h2,
.woocommerce ul.products li.product-category > a > h3,
.woocommerce ul.products li.product-category > a .woocommerce-loop-category__title {
    display: block !important;
    overflow: visible !important;
    color: var(--texma-marine) !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    margin: 0.5rem 0 !important;
    padding: 0 0.25rem !important;
    text-align: center !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    background: transparent !important;
    border-radius: 0 !important;
}

/* Counter-Klammer (z.B. "(16)") dezenter */
.woocommerce ul.products li.product-category .count {
    font-weight: 400;
    opacity: 0.6;
    font-size: 0.85rem;
}

/* Titel-h2/h3 — niemals durch Bild-Rundung beschneiden */
.woocommerce ul.products li.product > h2,
.woocommerce ul.products li.product > h3,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    display: block !important;
    width: 100% !important;
    overflow: visible !important;
    border-radius: 0 !important;
    margin: 0.75rem 0 0.4rem 0 !important;
    padding: 0 !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    color: var(--texma-marine) !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    background: transparent !important;
}

/* Titel-Link drinnen */
.woocommerce ul.products li.product > h2 > a,
.woocommerce ul.products li.product > h3 > a,
.woocommerce ul.products li.product .woocommerce-loop-product__title a {
    display: inline !important;
    overflow: visible !important;
    border-radius: 0 !important;
    color: inherit !important;
    text-decoration: none !important;
    background: transparent !important;
}

/* Preis */
.woocommerce ul.products li.product > .price,
.woocommerce ul.products li.product .price {
    display: block !important;
    color: var(--texma-marine) !important;
    font-weight: 600 !important;
    margin: 0 0 0.75rem 0 !important;
    font-size: 1rem !important;
}

/* Add-to-Cart-Button — volle Spaltenbreite */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product a.button {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    line-height: 1.2 !important;
    margin-top: 0 !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.9rem !important;
}

/* "Angebot!" Badge — wenn vorhanden, oben rechts in Bild-Container */
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
    position: absolute !important;
    top: 0.5rem !important;
    right: 0.5rem !important;
    left: auto !important;
    background-color: var(--texma-marine) !important;
    color: var(--texma-white) !important;
    border-radius: 999px !important;
    padding: 0.25rem 0.7rem !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    z-index: 5 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    min-height: 0 !important;
    min-width: 0 !important;
}

/* Hover-Variation-Hinweis ("Dieses Produkt weist mehrere Varianten auf...") */
.woocommerce ul.products li.product .has-variations__hint,
.woocommerce ul.products li.product small {
    font-size: 0.75rem !important;
    opacity: 0.7 !important;
    margin-top: 0.5rem !important;
    display: block !important;
}

/* ============================================================
   22. MOBILE BUTTON-TEXT KOMPAKTER
   "Ausführung wählen" / "In den Warenkorb" sprengen sonst
   die schmale Spalte. Auf Desktop unverändert.
   ============================================================ */

@media (max-width: 768px) {

    /* Button-Text in Loop-Karten kleiner und kompakter */
    .woocommerce ul.products li.product .button,
    .woocommerce ul.products li.product .add_to_cart_button,
    .woocommerce ul.products li.product a.button,
    body .woocommerce ul.products li.product .button {
        font-size: 0.78rem !important;
        padding: 0.6rem 0.5rem !important;
        line-height: 1.15 !important;
        letter-spacing: 0 !important;
        word-spacing: -0.05em !important;
        font-weight: 600 !important;
        min-height: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* Sehr kleine Screens — noch kompakter */
@media (max-width: 380px) {
    .woocommerce ul.products li.product .button,
    .woocommerce ul.products li.product .add_to_cart_button {
        font-size: 0.72rem !important;
        padding: 0.55rem 0.4rem !important;
    }
}

/* ============================================================
   23. SINGLE-PRODUCT: Mengenauswahl + Cart-Button Layout
   - Mengenauswahl-Wrapper transparent (weißer Kasten weg)
   - Cart-Button unter Mengenauswahl statt daneben
   ============================================================ */

/* Wrapper der Mengenauswahl: kein weißer Hintergrund, kein Border */
.single-product .quantity,
.single-product form.cart .quantity,
.single-product .product .quantity,
form.cart .quantity {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important;
}

/* Auch der äußere Form-Wrapper transparent */
.single-product form.cart,
.single-product .product form.cart {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Cart-Form: Spalten-Layout mit `inline-flex`, damit der Container nur
   so breit ist wie sein größter Inhalt (= die Mengenauswahl).
   `align-items: stretch` zwingt den Button auf dieselbe Breite. */
.single-product form.cart {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1.75rem !important;
    margin-bottom: 1.5rem !important;
    width: auto !important;
    max-width: 100% !important;
}

/* Auf Mobil: volle Spaltenbreite, damit der Button gut antippbar bleibt */
@media (max-width: 768px) {
    .single-product form.cart {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* "In den Warenkorb"-Button — Breite kommt vom Flex-Container (stretch).
   Auf Desktop: so breit wie Mengenauswahl. Auf Mobil: volle Spalte. */
.single-product form.cart .single_add_to_cart_button,
.single-product form.cart button.single_add_to_cart_button,
.single-product .product form.cart .single_add_to_cart_button {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0.5rem 0 0 0 !important;
    text-align: center !important;
    box-sizing: border-box !important;
    align-self: stretch !important;
}

/* Plus/Minus-Buttons der Mengenauswahl in CI-Optik */
.single-product .quantity input.minus,
.single-product .quantity input.plus,
.quantity input.minus,
.quantity input.plus {
    background-color: var(--texma-marine) !important;
    color: var(--texma-neon) !important;
    border: 1.5px solid var(--texma-marine) !important;
    border-radius: 999px !important;
    width: 44px !important;
    height: 44px !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    cursor: pointer;
    padding: 0 !important;
    line-height: 1 !important;
    transition: all var(--transition);
}

.single-product .quantity input.minus:hover,
.single-product .quantity input.plus:hover {
    background-color: var(--texma-neon) !important;
    color: var(--texma-marine) !important;
}

/* Zahlenfeld zwischen Plus/Minus */
.single-product .quantity input.qty,
.quantity input.qty {
    background-color: var(--texma-white) !important;
    border: 1.5px solid rgba(14, 28, 54, 0.15) !important;
    border-radius: 999px !important;
    text-align: center !important;
    width: 70px !important;
    height: 44px !important;
    margin: 0 0.5rem !important;
    padding: 0 !important;
    font-size: 1rem !important;
    color: var(--texma-marine) !important;
    -moz-appearance: textfield !important;
}

/* Spinner-Pfeile von type="number" verstecken */
.single-product .quantity input.qty::-webkit-outer-spin-button,
.single-product .quantity input.qty::-webkit-inner-spin-button,
.quantity input.qty::-webkit-outer-spin-button,
.quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* ============================================================
   24. KATEGORIE-KARTEN: Titel sichtbar und gestylt
   Markup: <li class="product-category"> mit
           <div class="product-details entry-content-wrap">
             <h2 class="woocommerce-loop-category__title">...</h2>
           </div>
   Titel sitzt außerhalb des <a>-Tags, deshalb müssen wir
   die Sichtbarkeit explizit erzwingen — andere Regeln im
   Theme (z.B. "entry-content-wrap" Reset) versteckten ihn sonst.
   ============================================================ */

.woocommerce ul.products li.product-category .product-details,
.woocommerce ul.products li.product-category .entry-content-wrap,
.woocommerce-page ul.products li.product-category .product-details {
    display: block !important;
    background: transparent !important;
    padding: 0 !important;
    margin-top: 0.75rem !important;
    border-radius: 0 !important;
    overflow: visible !important;
    text-align: center !important;
}

.woocommerce ul.products li.product-category h2.woocommerce-loop-category__title,
.woocommerce ul.products li.product-category .woocommerce-loop-category__title,
.woocommerce-page ul.products li.product-category h2.woocommerce-loop-category__title {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: var(--texma-marine) !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    padding: 0 0.25rem !important;
    text-align: center !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    background: transparent !important;
    border-radius: 0 !important;
}

/* Counter-Klammer "(14)" dezenter */
.woocommerce ul.products li.product-category .count,
.woocommerce ul.products li.product-category mark.count {
    background: transparent !important;
    color: var(--texma-marine) !important;
    font-weight: 400 !important;
    opacity: 0.6 !important;
    font-size: 0.85rem !important;
    margin-left: 0.25rem !important;
}

/* ============================================================
   25. PRODUKT-GALERIE & CARDS Hintergrund konsistent WEISS
   Weiß ist der bessere Kompromiss, weil viele Produktbilder
   selbst einen weißen Hintergrund haben — sonst entstehen
   harte Kanten zwischen Bild und Card-Background.
   Greift Desktop und Mobil.
   ============================================================ */

.single-product .woocommerce-product-gallery,
.single-product .woocommerce-product-gallery__wrapper,
.single-product .woocommerce-product-gallery__image,
.single-product .woocommerce-product-gallery__image a,
.single-product .woocommerce-product-gallery__image img,
.single-product .woocommerce-product-gallery .flex-control-thumbs li,
.single-product .woocommerce-product-gallery .flex-control-thumbs li img,
.single-product .flex-viewport,
.single-product .flex-viewport .woocommerce-product-gallery__image {
    background-color: #ffffff !important;
}

/* Lightbox/Zoom-Hintergrund auch weiß */
.pswp__bg,
.woocommerce-product-gallery .zoomImg {
    background-color: #ffffff !important;
}

/* ============================================================
   26. SINGLE-PRODUCT TABS — finaler Override mit hoher Spezifität
   Falls Kadence-Spezifität oder Cache die Tab-Pillen-Styles aus
   Sektion 5 überschreibt, greift hier eine zweite Schicht.
   Body-Class + WooCommerce-Wrapper sorgen für höhere Spezifität.
   ============================================================ */

body.woocommerce.single-product div.product .woocommerce-tabs ul.tabs,
body.woocommerce-page.single-product div.product .woocommerce-tabs ul.tabs,
.single-product div.product .woocommerce-tabs ul.tabs {
    list-style: none !important;
    border: none !important;
    border-bottom: none !important;
    padding: 0 !important;
    margin: 0 0 2rem 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    background: transparent !important;
}

body.woocommerce.single-product div.product .woocommerce-tabs ul.tabs::before,
body.woocommerce.single-product div.product .woocommerce-tabs ul.tabs::after,
body.woocommerce-page.single-product div.product .woocommerce-tabs ul.tabs::before,
body.woocommerce-page.single-product div.product .woocommerce-tabs ul.tabs::after,
.single-product div.product .woocommerce-tabs ul.tabs::before,
.single-product div.product .woocommerce-tabs ul.tabs::after {
    display: none !important;
    content: none !important;
    border: none !important;
}

body.woocommerce.single-product div.product .woocommerce-tabs ul.tabs li,
body.woocommerce-page.single-product div.product .woocommerce-tabs ul.tabs li,
.single-product div.product .woocommerce-tabs ul.tabs li {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    list-style: none !important;
    display: inline-flex !important;
}

body.woocommerce.single-product div.product .woocommerce-tabs ul.tabs li::before,
body.woocommerce.single-product div.product .woocommerce-tabs ul.tabs li::after,
body.woocommerce-page.single-product div.product .woocommerce-tabs ul.tabs li::before,
body.woocommerce-page.single-product div.product .woocommerce-tabs ul.tabs li::after,
.single-product div.product .woocommerce-tabs ul.tabs li::before,
.single-product div.product .woocommerce-tabs ul.tabs li::after {
    display: none !important;
    content: none !important;
    border: none !important;
}

/* INAKTIVE Tab-Pille */
body.woocommerce.single-product div.product .woocommerce-tabs ul.tabs li a,
body.woocommerce-page.single-product div.product .woocommerce-tabs ul.tabs li a,
.single-product div.product .woocommerce-tabs ul.tabs li a {
    display: inline-block !important;
    background-color: #ffffff !important;
    color: #0E1C36 !important;
    border: 1.5px solid #0E1C36 !important;
    border-radius: 999px !important;
    padding: 0.6rem 1.25rem !important;
    font-family: var(--texma-font, sans-serif) !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}

body.woocommerce.single-product div.product .woocommerce-tabs ul.tabs li a:hover,
body.woocommerce-page.single-product div.product .woocommerce-tabs ul.tabs li a:hover,
.single-product div.product .woocommerce-tabs ul.tabs li a:hover {
    background-color: #0E1C36 !important;
    color: #34FF67 !important;
}

/* AKTIVE Tab-Pille — höchste Spezifität */
body.woocommerce.single-product div.product .woocommerce-tabs ul.tabs li.active a,
body.woocommerce-page.single-product div.product .woocommerce-tabs ul.tabs li.active a,
.single-product div.product .woocommerce-tabs ul.tabs li.active a,
.single-product .woocommerce-tabs ul.tabs li[aria-selected="true"] a {
    background-color: #0E1C36 !important;
    color: #34FF67 !important;
    border-color: #0E1C36 !important;
}

/* Mobile Anpassung */
@media (max-width: 768px) {
    body.woocommerce.single-product div.product .woocommerce-tabs ul.tabs,
    .single-product div.product .woocommerce-tabs ul.tabs {
        gap: 0.4rem !important;
        margin-bottom: 1.5rem !important;
    }

    body.woocommerce.single-product div.product .woocommerce-tabs ul.tabs li a,
    .single-product div.product .woocommerce-tabs ul.tabs li a {
        padding: 0.55rem 1rem !important;
        font-size: 0.85rem !important;
    }
}

@media (max-width: 380px) {
    body.woocommerce.single-product div.product .woocommerce-tabs ul.tabs li a,
    .single-product div.product .woocommerce-tabs ul.tabs li a {
        padding: 0.5rem 0.85rem !important;
        font-size: 0.8rem !important;
    }
}

/* ============================================================
   27. PRODUKT-GALERIE Höhen-Fix
   WooCommerce Flexslider berechnet die Container-Höhe falsch
   und setzt einen Inline-Style wie height: 1501px;
   Wir überschreiben das per CSS und zwingen den Container,
   sich an die tatsächliche Bildhöhe (1:1) anzupassen.
   ============================================================ */

.single-product .woocommerce-product-gallery {
    height: auto !important;
    max-height: none !important;
    position: relative !important;
}

.single-product .woocommerce-product-gallery .flex-viewport {
    height: auto !important;
    max-height: none !important;
}

.single-product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
    height: auto !important;
}

/* Container der einzelnen Slides — keine fixe Höhe */
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image {
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
}

/* Bilder nicht über das 1:1 Format hinaus */
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image img {
    height: auto !important;
    max-height: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
}

/* Mobile: gleicher Fix, Galerie nimmt nur die nötige Höhe ein */
@media (max-width: 768px) {
    .single-product .woocommerce-product-gallery {
        height: auto !important;
        margin-bottom: 1rem !important;
    }

    .single-product .woocommerce-product-gallery .flex-viewport {
        height: auto !important;
    }
}

/* ============================================================
   28. VARIABLE PRODUKTE: Mengenauswahl + Cart-Button Layout
   Bei variablen Produkten umschließt .woocommerce-variation-add-to-cart
   die Mengenauswahl + den Cart-Button. Das Layout muss konsistent
   sein mit einfachen Produkten:
   Desktop: Mengenauswahl und Button auf derselben Höhe (Reihe)
   Mobil:   Mengenauswahl oben, Button drunter (Spalte)
   ============================================================ */

.single-product .woocommerce-variation-add-to-cart,
.single-product form.cart .woocommerce-variation-add-to-cart {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 1rem !important;
    margin: 0.5rem 0 1.5rem 0 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* Mengenauswahl: keine zusätzliche Breite */
.single-product .woocommerce-variation-add-to-cart .quantity {
    flex: 0 0 auto !important;
    margin: 0 !important;
}

/* Cart-Button: bleibt neben der Mengenauswahl */
.single-product .woocommerce-variation-add-to-cart .single_add_to_cart_button {
    flex: 0 0 auto !important;
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 174px !important;
    align-self: stretch !important;
    padding: 0.6rem 1.5rem !important;
}

/* Disabled-State (wenn noch keine Variation gewählt ist) */
.single-product .woocommerce-variation-add-to-cart .single_add_to_cart_button.disabled,
.single-product .woocommerce-variation-add-to-cart .single_add_to_cart_button.wc-variation-selection-needed {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

.single-product .woocommerce-variation-add-to-cart .single_add_to_cart_button.disabled:hover {
    background-color: var(--texma-marine) !important;
    color: var(--texma-neon) !important;
    transform: none !important;
}

/* Hidden Inputs (variation_id, product_id, add-to-cart) — flex layout schützen */
.single-product .woocommerce-variation-add-to-cart input[type="hidden"] {
    display: none !important;
}

/* Mobile: Mengenauswahl und Button in einer Spalte stapeln */
@media (max-width: 768px) {
    .single-product .woocommerce-variation-add-to-cart,
    .single-product form.cart .woocommerce-variation-add-to-cart {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 1.25rem !important;
    }

    .single-product .woocommerce-variation-add-to-cart .quantity {
        align-self: flex-start !important;
    }

    .single-product .woocommerce-variation-add-to-cart .single_add_to_cart_button {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}

/* ============================================================
   Auch einfache Produkte (form.cart): konsistente Reihe auf Desktop
   ============================================================ */

@media (min-width: 769px) {
    .single-product form.cart {
        flex-direction: row !important;
        align-items: center !important;
        gap: 1rem !important;
        flex-wrap: wrap !important;
    }

    .single-product form.cart .single_add_to_cart_button {
        align-self: stretch !important;
        width: auto !important;
        min-width: 174px !important;
        margin: 0 !important;
        padding: 0.6rem 1.5rem !important;
    }
}