/*
Theme Name: SMUT
Theme URI: https://smutathens.com
Author: isarcode
Author URI: https://isarcode.com
Description: Eigenständiges FSE-Block-Theme für SMUT Athens. Optik/Struktur portiert aus isarcode_smut_childtheme, self-contained (kein TT5-Parent).
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: smut
*/

/* ===== Portiertes Design-CSS aus isarcode_smut_childtheme ===== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    /* Theme-Tokens, Light = neuer Look (Default). Rot ist in beiden Modi konstant. */
    --smut-red: #ff0041;
    --smut-on-red: #ffffff; /* Icons/Text auf dem roten Overlay, in beiden Modi hell */
    --smut-bg: #ffffff;
    --smut-fg: #000000;

    /* Alt-Alias: bestehende Regeln nutzen weiter --isrcd--color--custom-red */
    --isrcd--color--custom-red: var(--smut-red);
    --isrcd--color--custom-grey: #333;

    --responsive--breakpoint--small: 768px;
}

/* Dark-Mode Token-Flip, Dark = alter SMUT-Look (schwarzer BG, weisser Vordergrund) */
html[data-theme="dark"] {
    --smut-bg: #000000;
    --smut-fg: #ffffff;
}

/* Body an die Tokens koppeln. html[data-theme] schlaegt die plain body-Regel aus theme.json.
   body (nicht html) ist auch die Fallback-Quelle fuer die iOS-26-Toolbar-Toenung. */
html[data-theme] body {
    background-color: var(--smut-bg);
    color: var(--smut-fg);
}

/* Link-Hover im Dark-Mode nicht auf Schwarz (theme.json-Default) laufen lassen */
html[data-theme="dark"] :where(a:hover) {
    color: var(--smut-fg);
}



@media (min-width: 769px) {
    .mobile-only {
        display: none !important;
    }
}


:where(.wp-site-blocks *:focus) {
    outline-width: 0 !important;
    outline-style: none !important;
}

body {
    font-family: 'Archivo', sans-serif;
}

/* Scroll-Anchoring aus: verhindert, dass das Kollabieren des Shrink-Headers
   scrollY nachzieht und dadurch an der Umschalt-Schwelle flickert (siehe smut-base.js). */
html {
    overflow-anchor: none;
}

header {
    position: sticky;
    top: 0px;
    min-height: 30vH;
    z-index: 50;            /* Header ueber dem Content: Content laeuft darunter durch (Desktop + Mobile) */
    pointer-events: none;   /* leere Header-Flaeche klick-durchlaessig, Content darunter bedienbar */
}
/* Nur die echten Interaktionselemente im Header fangen Klicks */
header a,
header button,
header [data-nav-open],
#isrcd-mobile-nav-close {
    pointer-events: auto;
}

/* Autarkes Mobile-Menue-Overlay (body-Kind, ausserhalb des sticky-Headers) standardmaessig
   ECHT aus dem Layout (display:none), auch Desktop. Nur bei offenem Menue (< 769px)
   eingeblendet. Nur so rechnet iOS 26 die Status-Bar-Farbe beim Schliessen neu. */
.smut-mobile-menu {
    display: none;
}

/* === Full-width Medien (Mobile) ===
   Ziel: Bild 1 + Stripes-Container (inkl. des darin verschachtelten Bild 2) + Stripes-SVG
   randlos bis zum Viewport-Rand; die Event-Gallery bleibt eingerueckt (Content-Margin).
   `!important` ist noetig, weil WPs Constrained-Layout `margin: auto !important` auf die
   Nicht-alignfull-Kinder setzt. `calc(50% - 50vw)` ist container-adaptiv (funktioniert auch
   fuer das im Stripes-Container verschachtelte Bild 2). Bild 2 haengt wegen invalidem HTML
   (`<div>` in einem `<p>`) im Stripes-Container. */
@media (max-width: 768px) {
    .entry-content > .wp-block-image,
    .entry-content > .home_logo_ani_stripes {
        width: auto !important;
        max-width: none !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
    }
    .home_logo_ani_stripes > .wp-block-image {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }
    .entry-content > .wp-block-image > img,
    .home_logo_ani_stripes > .wp-block-image > img {
        width: 100%;
        max-width: none;
    }
}


.isrcd-logo-main {
    width: 60vw;
    max-width: 885px;
}

body:not(.product-template-default) h1.wp-block-post-title,
body:not(.product-template-default) h1.wp-block-query-title {
    position: fixed;
    display: block;
    top: 50%;
    right: 20px;
    z-index: 5;
    margin:0;
    padding: 0;
    writing-mode: sideways-lr;
    text-orientation: mixed;
    transform: translateY(-50%);
    font-size: 25px;
    text-transform: uppercase;
    /* Reagiert auf den Hintergrund: ueber hell wird der Text schwarz, ueber dunkel weiss.
       difference invertiert gegen den Untergrund, weisser Text als Basis. */
    color: #fff;
    mix-blend-mode: difference;
}

/* MailPoet-Subscription-Seiten (Unsubscribe/Manage/Confirm: Slug 'subscriptions';
   Captcha: Slug 'captcha'): der kontextabhaengige MailPoet-Titel ist mehrzeilig und
   ragt als vertikales Label in den Content. Auf diesen Seiten ausblenden. */
body.page-subscriptions h1.wp-block-post-title,
body.page-subscriptions h1.wp-block-query-title,
body.page-captcha h1.wp-block-post-title,
body.page-captcha h1.wp-block-query-title {
    display: none;
}

/* Cart and checkout: the vertical "Cart"/"Checkout" label overlaps the price column on
   mobile, the page is self-explanatory without it. */
body.woocommerce-cart h1.wp-block-post-title,
body.woocommerce-checkout h1.wp-block-post-title {
    display: none;
}

h2.wp-block-heading {
    font-size: 5em;
    font-weight: 900;
    text-transform: uppercase;
}

.entry-content > p {
    text-transform: uppercase;
}

@media (max-width: 1200px) {
    .entry-content > p {
        max-width: 60vw;
        margin-left: 0px !important;
    }
}

ul.wp-block-list {
    list-style-type: circle;
}

.isrcd_logo {
	fill: var(--isrcd--color--custom-red);
}

.isrcd_cta_button {
    background-color: var(--smut-red);
    border: none;
    margin: 1em 0;
    padding: 12px 24px;
    border-radius: 4px;
    transition: all 0.3s ease;
    color: var(--smut-on-red);
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;

    &:hover {
        opacity: 0.8;
        transform: translateY(-2px);
    }
}

.isrcd_qoute {
    display: flex;
    height: 80vH;
    justify-content: center;
    align-items: center;
    font-family: fangsong;
    font-style: italic;
    font-size: 2em;
    text-wrap: unset;
}

svg[id^="icon_"] {
  fill: var(--smut-fg);
}

svg[id^="icon_"] .icon_frame {
    fill: none;
    stroke: var(--smut-fg);
    stroke-miterlimit: 10;
    stroke-width: 4px;
}

#isrcd-main-nav-wrapper {
    height: -webkit-fill-available;
    margin-right: 0;
}

.isrcd-header-nav-column {
    height: 21.5vw;
    max-height: 310px;
}

#isrcd-mobile-nav-wrapper,
nav.isrcd-main-nav {
    height:100%;
}

ul.isrcd-main-nav {
    height: 100%;
    justify-content: space-between;
}

#isrcd-mobile-nav-open {
    position: fixed;
    top: 0px;
    right: 20px;
    z-index: 3;
    width: 100px;
    fill: none;
    stroke: var(--smut-fg);
    stroke-width: 1.5;
    stroke-miterlimit: 10;
    cursor: pointer;

    &:hover {
        stroke: var(--isrcd--color--custom-grey);
    }
}

#isrcd-mobile-nav-wrapper .social-contacts-wrapper {
    display: flex;
    flex-direction: column;
    align-self: center;
    align-items: center;
    justify-content: space-between;
    width: 40vw;
    height: 77%;
}

#isrcd-mobile-nav-wrapper .social-contacts-wrapper .social-contacts {
    display: flex;
    flex-direction: column;
    align-items: center;
    a {
        display: block;
        width: 50px;
        margin-bottom: 1em;
    }

    svg {
        width: 100%;
        fill: var(--smut-on-red);

        &:hover {
            fill: var(--isrcd--color--custom-grey);
        }
    }
}

#isrcd-mobile-nav-wrapper #isrcd-mobile-nav-close {
    position: absolute;
    top: 40px;
    right: 40px;
    width: 50px;
    height: 50px;
    z-index: 10;
    cursor: pointer;
    fill: var(--smut-on-red);

    &:hover {
        fill: var(--isrcd--color--custom-grey);
    }
}

ul.isrcd-main-nav {
    flex-direction: column;

    .wp-block-navigation-item {
        align-self: self-start;
        text-transform: uppercase;

        &.current-menu-item {
            background-color: var(--isrcd--color--custom-red);
        }

        /* Aktiver Punkt: Text auf dem roten Grund weiss statt rot-auf-rot (theme.json-Linkfarbe) */
        &.current-menu-item a {
            color: var(--smut-on-red);
        }

        /* Hover: roter Grund wie beim aktiven Punkt, Schrift bleibt aber schwarz
           (kein Textfarb-Override -> erbt das Standard-Schwarz), besser lesbar
           als schwarz auf Dunkelgrau. */
        &:hover {
            background-color: var(--isrcd--color--custom-red);
        }

        a {
            text-decoration: none;
        }
    }
}


@media (max-width: 768px) {
    :root {
        --smut-m-icon: 28px;  /* Icon-Kantenlaenge im mobilen Header */
        --smut-m-gap: 16px;   /* Abstand zwischen den Header-Icons */
    }

    /* Header-ueber-Content (z-index/pointer-events) gilt global; hier nur das Notch-Padding,
       damit Logo/Icons bei viewport-fit=cover nicht unter die Notch rutschen. */
    header {
        padding-top: env(safe-area-inset-top);
    }

    /* Logo links mit gleichem Abstand zum Rand wie die Icons rechts (20px) */
    .isrcd-logo-main {
        margin-left: 20px;
    }

    /* Icon-Cluster (Account, Basket, Theme, Burger) als fixe Spalte oben rechts,
       vertikal gestapelt wie im Desktop-Header. Fixiert, damit die Icons nicht mit
       dem 60vw-Logo konkurrieren und beim Ueberscrollen oben bleiben. */
    #isrcd-main-nav-wrapper {
        position: fixed;
        top: calc(var(--wp--preset--spacing--30, 20px) + env(safe-area-inset-top));  /* Notch */
        right: 20px;
        z-index: 8;
        height: auto;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: var(--smut-m-gap);
    }

    /* Burger OBEN in der Spalte (Haupt-Nav-Trigger), bewusst gross.
       order:0 + erstes DOM-Element -> steht oben ueber den Shop-Icons. */
    #isrcd-mobile-nav-open {
        position: static;
        order: 0;
        width: 90px;
        height: auto;
        z-index: auto;
    }

    /* Basis-Ansicht: Account / Basket / Theme vertikal gestapelt; Nav + Overlay-Teile aus */
    #isrcd-mobile-nav-wrapper[data-state="hidden"] {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: var(--smut-m-gap);
        height: auto;

        .wp-block-woocommerce-customer-account { order: 1; }
        .wp-block-woocommerce-mini-cart { order: 2; }
        .theme-toggle-wrapper { order: 3; }

        nav.isrcd-main-nav,
        #isrcd-mobile-nav-close,
        .social-contacts-wrapper {
            display: none;
        }
    }

    /* Icon-Groessen im mobilen Header vereinheitlichen (analog Desktop-Cluster) */
    #isrcd-mobile-nav-wrapper .wp-block-woocommerce-customer-account,
    #isrcd-mobile-nav-wrapper .wp-block-woocommerce-mini-cart,
    #isrcd-mobile-nav-wrapper .theme-toggle-wrapper {
        display: flex;
        align-items: center;
        justify-content: flex-end;  /* Glyphen rechtsbuendig auf die Burger/HOME-Linie */
        margin: 0;
        width: var(--smut-m-icon);
    }
    #isrcd-mobile-nav-wrapper .wc-block-customer-account__account-icon,
    #isrcd-mobile-nav-wrapper .wc-block-mini-cart__icon {
        color: var(--smut-fg);
        fill: currentColor;
        width: var(--smut-m-icon);
        height: var(--smut-m-icon);
    }
    #isrcd-mobile-nav-wrapper .wc-block-mini-cart__button {
        color: var(--smut-fg);
        padding: 0;
        border: 0;
        background: transparent;
    }
    /* Link-/Button-Wrapper auf exakte Icon-Breite + flush rechts, sonst sitzen
       Account/Basket wegen Default-Padding links neben der Burger-/HOME-Linie. */
    #isrcd-mobile-nav-wrapper .wp-block-woocommerce-customer-account > a,
    #isrcd-mobile-nav-wrapper[data-state="hidden"] .wc-block-mini-cart__button {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: var(--smut-m-icon);
        min-width: 0;
        margin: 0;
        padding: 0;
    }
    #isrcd-mobile-nav-wrapper .theme-toggle {
        width: var(--smut-m-icon);
        height: var(--smut-m-icon);
        padding: 0;
    }
    /* Toggle-Glyph optisch an die Shop-Icons angleichen: etwas kleiner + duennerer
       Stroke (Mond/Sonne wirken bei gleicher Boxgroesse sonst schwerer als die
       gefuellten Account/Basket-Icons). */
    #isrcd-mobile-nav-wrapper .theme-toggle .theme-icon {
        width: 23px;
        height: 23px;
        stroke-width: 1.4;
    }
    /* Basket: Mengen-Badge ueberlagern statt die Kante zu schieben */
    #isrcd-mobile-nav-wrapper .wc-block-mini-cart__quantity-badge {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--smut-m-icon);
        height: var(--smut-m-icon);
    }
    #isrcd-mobile-nav-wrapper .wc-block-mini-cart__badge {
        position: absolute;
        top: -4px;
        right: -4px;
        margin: 0;
    }
    /* Theme-Popup oeffnet nach LINKS neben den Toggle (vertikale Spalte am rechten
       Rand; nach unten wuerde es den Burger ueberdecken). */
    #isrcd-mobile-nav-wrapper .theme-popup {
        top: 0;
        bottom: auto;
        right: calc(100% + 12px);
        left: auto;
    }

    /* Autarkes Mobile-Menue-Overlay (body-Kind): Vollbild-Rot, Nav linksbuendig mittig,
       Social-Reihe unten links, Close unten rechts. Geschlossen echt display:none. */
    .smut-mobile-menu[data-state="visible"] {
        --smut-overlay-pad: clamp(28px, 12vw, 96px);
        --smut-overlay-bottom: calc(56px + env(safe-area-inset-bottom, 0px));

        display: flex;
        position: fixed;
        inset: 0;
        box-sizing: border-box;
        z-index: 1000;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        padding-left: var(--smut-overlay-pad);
        background-color: var(--isrcd--color--custom-red);
    }

    .smut-mobile-menu__list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: clamp(18px, 4vh, 44px);
    }
    .smut-mobile-menu__list a {
        color: var(--smut-fg);
        text-decoration: none;
        text-transform: uppercase;
        font-size: 2em;
        line-height: 1.1;
    }
    .smut-mobile-menu__list a:hover {
        opacity: 0.7;
    }

    /* Social-Icons: eine Reihe unten links, buendig zum Menue */
    .smut-mobile-menu__social {
        position: absolute;
        left: var(--smut-overlay-pad);
        bottom: var(--smut-overlay-bottom);
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 20px;
    }
    .smut-mobile-menu__social a {
        display: block;
        width: 32px;
    }
    .smut-mobile-menu__social svg {
        width: 100%;
        fill: var(--smut-on-red);
    }

    /* Aktionen unten rechts: Home-Icon + Close nebeneinander, gleiche Hoehe wie Social */
    .smut-mobile-menu__actions {
        position: absolute;
        right: 36px;
        bottom: var(--smut-overlay-bottom);
        display: flex;
        align-items: center;
        gap: 22px;
    }
    .smut-mobile-menu__home {
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--smut-on-red);
    }
    .smut-mobile-menu__home svg {
        width: 55px;
        height: auto;
        fill: currentColor;
        transform-origin: center;
    }
    .smut-mobile-menu__close {
        width: 50px;
        height: 50px;
        padding: 0;
        border: 0;
        background: none;
        cursor: pointer;
        color: var(--smut-on-red);   /* currentColor fuer den Stroke von Kreis/Kreuz */
    }
    .smut-mobile-menu__close svg {
        width: 100%;
        height: 100%;
        display: block;
    }
    /* Kreis + Kreuz einzeln animierbar: Transform um die eigene Mitte (fill-box) */
    .smut-close__circle,
    .smut-close__cross {
        transform-box: fill-box;
        transform-origin: center;
    }

    /* Choreografie beim Oeffnen: 1) Home (rotate + scale + fade), 2) Close-Kreis (scale),
       3) Close-Kreuz (scale + rotate -720), jeweils nacheinander gestaffelt. */
    .smut-mobile-menu[data-state="visible"] .smut-mobile-menu__home svg {
        animation: smut-home-in 0.55s ease 0.3s both;
    }
    .smut-mobile-menu[data-state="visible"] .smut-close__circle {
        animation: smut-circle-in 0.35s ease 0.85s both;
    }
    .smut-mobile-menu[data-state="visible"] .smut-close__cross {
        animation: smut-cross-in 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) 1.2s both;
    }
}

@keyframes smut-home-in {
    from { transform: rotate(-90deg) scale(0); opacity: 0; }
    to   { transform: rotate(0deg) scale(1);   opacity: 1; }
}
@keyframes smut-circle-in {
    from { transform: scale(0); }
    to   { transform: scale(1); }
}
@keyframes smut-cross-in {
    from { transform: scale(0) rotate(-720deg); }
    to   { transform: scale(1) rotate(0deg); }
}

form > .page-intro {
    margin-bottom: 5em;
}


/* form styles */
.isrcd_form_label {
    display: block;
    margin-bottom: 1em;
    font-size: 1.8em;
    font-weight: 400;
    text-transform: uppercase;
}

.isrcd_form_label.form-agree {
    padding: 0.5em;
    font-size: 1em;
    font-style: italic;
    text-transform: none;
    font-weight: 100;
}

/* Native checkbox is tiny next to the pixel font: scale it to the text. */
.isrcd_form_label.form-agree input[type=checkbox] {
    width: 1.5em;
    height: 1.5em;
    margin: 0 0.5em 0 0;
    vertical-align: middle;
}

.isrcd_form_label.is_invalid {
    color:red;
    border: 3px solid red;
    border-radius: 10px;
}

.isrcd_form_label i {
    font-style: italic;
}

.isrcd_form_input:not([type=checkbox]),
.isrcd_form_textarea,
.isrcd_form_select {
    width: 100%;
    margin-bottom: 2.5em;
    padding: 0.2em;
    color:aliceblue;
    font-size: 1.5em;
    border-radius: 5px;
    border: 1px solid #111;
    background: rgba(50, 50, 50, 0.7);
}

.isrcd_form_input::placeholder,
.isrcd_form_textarea::placeholder {
    font-weight: thinner;
    font-weight: 100;
    font-style: italic;
    color: #999;
}

.isrcd_form_input.is_invalid,
.isrcd_form_textarea.is_invalid,
.isrcd_form_select.is_invalid {
    border: 2px solid red;
}

.isrcd_form_input.is_invalid::placeholder,
.isrcd_form_textarea.is_invalid::placeholder,
.isrcd_form_select.is_invalid::placeholder {
    color: rgba(255, 0, 0, 0.3);
}

.isrcd_form_input.is_valid,
.isrcd_form_textarea.is_valid,
.isrcd_form_select.is_valid {
    border: 2px solid #2ecc71; /* grün */
}

.isrcd_form_section {
    max-width: 600px;
    margin: 100px auto;
    padding: 50px;
    background-color: #111;
    border-radius: 10px;
    text-align: center;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 890.43 291.21"><path d="M82.03,0c24.48,0,43.88,5.77,58.2,17.31,14.32,11.54,21.48,27.15,21.48,46.86v22.56h-55.27v-22.49c0-11.38-1.89-19.59-5.66-24.63-3.78-5.04-10.03-7.57-18.75-7.57s-14.39,2.57-18.16,7.71c-3.78,5.15-5.66,13.38-5.66,24.71v9.57c0,16.02,7.03,28.12,21.09,36.33l45.51,25.98c26.43,14.98,39.65,36.98,39.65,66.02v18.75c0,22.66-7.1,40.01-21.29,52.05-14.19,12.04-34.57,18.07-61.13,18.07s-46.39-6.52-60.64-19.56C7.13,258.61,0,240.03,0,215.9v-21.71h55.27v21.73c0,15.27,2.08,26.3,6.25,33.08,4.17,6.79,11,10.18,20.51,10.18,10.16,0,17.22-2.83,21.19-8.5,3.97-5.66,5.96-15.53,5.96-29.59v-12.7c0-14.19-6.77-25.13-20.31-32.81l-37.11-21.29c-15.5-8.85-27.51-19.59-36.04-32.23-8.53-12.63-12.79-26.04-12.79-40.23v-17.38c0-18.88,7.32-34.34,21.97-46.39C39.55,6.02,58.59,0,82.03,0Z"></path><path d="M215.23,283.2V8.01h81.25l38.87,213.28L374.02,8.01h81.25v275.2h-48.05V60.35l-40.82,222.85h-62.3l-40.82-222.85v222.85h-48.05Z"></path><path d="M511.72,8.01h55.27v194.34c0,17.58,2.15,30.24,6.45,37.99,4.3,7.75,11.46,11.62,21.48,11.62s17.19-3.87,21.48-11.62c4.3-7.75,6.45-20.41,6.45-37.99V8.01h55.27v194.34c0,59.25-27.73,88.87-83.2,88.87s-83.2-29.62-83.2-88.87V8.01Z"></path><path d="M778.71,47.27h-56.45V8.01h168.16v39.26h-56.45v235.94h-55.27V47.27Z"></path></svg>');
    background-repeat: repeat;
}

/* Das Formular hat immer einen dunklen Grund (SMUT-Wasserzeichen auf #111),
   unabhaengig vom Theme-Toggle. Labels und Intro-Texte haben sonst keine eigene
   Farbe und erben die Body-Farbe, die im Light-Mode schwarz wird -> unsichtbar.
   Deshalb hier Text im Formular immer weiss. Validierungs-Rot (.is_invalid)
   bleibt ausgenommen. */
.isrcd_form_section .page-intro h2,
.isrcd_form_section .page-intro p,
.isrcd_form_section .isrcd_form_label:not(.is_invalid),
.isrcd_form_section .isrcd_form_label:not(.is_invalid) i {
    color: #fff;
}

.isrcd_form_msg {
    display: none;
}

.isrcd_button {
    display: block;
    width: 150px;
    padding: 10px 20px;
    background-color: #10e40d;
    color: #fff;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: 5px;
    margin: 5em auto;
    cursor: pointer;
}

p.isrcd_punchline {
    display: block;
    margin-top: 4em;
    margin-right: 0px !important;
    margin-left: auto !important;
    font-size: 1.2em;
    font-weight: 800;
    text-transform: uppercase;
}


/* Woocommerce styles ------------------------------ */
.woocommerce.woocommerce-shop .wc-block-breadcrumbs .woocommerce-breadcrumb,
.woocommerce.wc-block-product-results-count .woocommerce-result-count {
    display:none;
}

/* Woocommerce CTA styles */
/* .woocommerce button, */
.woocommerce input[type="submit"],
/* .woocommerce .button, */
/* .woocommerce-page button, */
.woocommerce-page input[type="submit"],
.woocommerce-page .button,

 /* cart buttons */
.woocommerce .single_add_to_cart_button,
/* .woocommerce .cart .button, */
.woocommerce .checkout-button,
.wc-block-components-button,
.wp-element-button,
.wp-block-button__link,
.wc-block-cart__submit-button,
/* MailPoet-Subscription-Formulare (Manage/Unsubscribe-Grund): Submit-Buttons ins Theme-Design */
body.page-subscriptions input[type="submit"],
body.page-subscriptions button[type="submit"],
body.page-subscriptions .mailpoet_submit input {
    background-color: var(--smut-red);
    color: var(--smut-on-red);
    border: none;
    padding: 12px 24px;
    border-radius: 4px;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Hovers, inkl. der Block-Buttons (product-collection "Add to cart", Checkout).
   Rot/Weiss ist in beiden Modi konstant, daher kein Dark/Light-Flip noetig. */
.woocommerce button:hover,
.woocommerce .button:hover,
.wc-block-components-button:hover,
.wp-element-button:hover,
.wp-block-button__link:hover,
.wc-block-cart__submit-button:hover,
body.page-subscriptions input[type="submit"]:hover,
body.page-subscriptions button[type="submit"]:hover,
body.page-subscriptions .mailpoet_submit input:hover {
    opacity: 0.8;
    transform: translateY(-2px);
    color: var(--smut-on-red);
}

.woocommerce .woocommerce-breadcrumb,
.woocommerce-product-gallery__trigger,
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper .zoomImg {
    display: none !important;
}

/* Checkout-Block: Feld-Labels im Dark-Mode sichtbar halten.
   Die Eingabefelder haben einen fest weißen Background (WC-Core), die
   Floating-Labels erben aber die Theme-Vordergrundfarbe: im Dark-Mode
   ist die weiß, also weiß auf weiß = unsichtbar. Feste neutrale Graufarbe,
   damit sie in beiden Modi auf dem weißen Feld lesbar bleiben. Der
   .wc-block-checkout-Prefix hebt die Spezifität über die WC-Core-Regel.
   Trifft nur Feld-Labels, nicht die Payment-/Checkbox-Labels (die stehen
   auf Theme-Grund und sollen der Theme-Farbe folgen). */
.wc-block-checkout .wc-block-components-text-input label,
.wc-block-checkout .wc-block-components-combobox label,
.wc-block-checkout .wc-blocks-components-select__label {
    color: #868686;
}



/* ===== Ticket-Card-Layout (Shop-Grid + Home-Teaser) =====
   Linksbuendig, gestuft: Datum (klein) -> Headline (Titel, fett, gross, mehrzeilig)
   -> Subline (Line-up) -> Fusszeile (Preis links + Add-to-cart rechts).
   Datum/Subline im Grid via Bloecke (.smut-event-*-block), im Teaser via Loop-Hooks
   (nackte Spans) -> die Span-Regeln greifen in beiden Kontexten. Alle Farben ueber
   Tokens (Rot modus-konstant, Preis folgt --smut-fg). */

/* Karte als Spalte, Inhalt linksbuendig, Fusszeile unten angedockt */
.wc-block-product-template .wc-block-product,
.smut-home-teaser ul.products li.product {
    display: flex;
    flex-direction: column;
    text-align: left;
    align-items: stretch;
    margin-bottom: 60px;
}

/* Datum (oben, rot, klein) */
.smut-event-date {
    display: block;
    margin: 0.7em 0 0.15rem;
    font-size: 0.9em;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--smut-red);
}

/* Headline = Produkttitel (Eventname): rot, fett, mehrzeilig, linksbuendig.
   Groesse + Line-Height bewusst hier im CSS, nicht inline im Block. */
.wc-block-product-template .wp-block-post-title,
.smut-home-teaser ul.products li.product .woocommerce-loop-product__title {
    text-align: left;
    text-transform: uppercase;
    font-size: 23px;
    font-weight: 900;
    line-height: 1.15;
    margin: 0 0 0.2em;
}
.wc-block-product-template .wp-block-post-title a,
.smut-home-teaser ul.products li.product .woocommerce-loop-product__title {
    color: var(--smut-red);
    text-decoration: none;
}

/* Subline (Artistline): rot, kleiner, leichter, linksbuendig */
.smut-event-subline {
    display: block;
    margin: 0 0 1.1em;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.25;
    color: var(--smut-red);
}
/* "w/" steht allein auf einer Zeile, die Artists folgen darunter */
.smut-event-subline__prefix {
    display: block;
}

/* Fusszeile: Preis links (gross, Vordergrundfarbe), Button rechts.
   Flex-Row explizit, damit Grid (Block-Group) und Teaser (eigener Loop) gleich sind. */
.smut-card-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    gap: 12px 16px;
}
.smut-card-footer .wp-block-woocommerce-product-price,
.smut-card-footer .price {
    font-size: 1.7em;
    font-weight: 800;
    color: var(--smut-fg);
    margin: 0;
    text-align: left;
}
/* Teaser: Bild- und Titel-Link ohne Deko (verlinken auf die PDP) */
.smut-home-teaser .smut-card-media,
.smut-home-teaser .smut-card-title-link {
    display: block;
    text-decoration: none;
}
/* Bild auf Spaltenbreite begrenzen (WC-Thumbnail kommt mit max-width:none rein und
   quillt sonst mit 600px aus der Spalte). Quadratisch wie im Shop-Grid.
   aspect-ratio+cover erzwingt das Quadrat auch fuer Querformat-Poster, fuer die
   WC keinen 1:1-Crop generieren kann (Quelle niedriger als 600px, z.B. Coma 640x397). */
.smut-home-teaser .smut-card-media img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* Single-Product: Datum + Subline praesenter unter dem Titel */
.product-template-default .smut-event-date {
    font-size: 1.1em;
    margin-bottom: 0.4em;
}
.product-template-default .smut-event-subline {
    font-size: 1.1em;
    margin-bottom: 1.2em;
}

/* ===== PDP / Event-Detailseite (single-product.html) =====
   Zwei Spalten: Bild links, Summary rechts. Typo der Karte, groesser. */
.smut-pdp {
    margin-top: 2rem;
}
.smut-pdp .wc-block-breadcrumbs {
    margin-bottom: 1.5rem;
    font-size: 0.85em;
    opacity: 0.8;
}
.smut-pdp__cols {
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: flex-start;
}
.smut-pdp__media img {
    width: 100%;
    height: auto;
}
/* Datum oben (rot, wie Karte, aber praesenter) */
.smut-pdp__summary .smut-event-date {
    display: block;
    font-size: 1.05em;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--smut-red);
    margin: 0 0 0.3em;
}
/* Headline = Eventname: rot, fett, uppercase, mehrzeilig */
.smut-pdp__title {
    text-transform: uppercase;
    font-size: clamp(28px, 3.5vw, 44px);
    font-weight: 900;
    line-height: 1.1;
    color: var(--smut-red);
    margin: 0 0 0.2em;
}
.smut-pdp__summary .smut-event-subline {
    display: block;
    font-size: 1.05em;
    font-weight: 400;
    line-height: 1.3;
    color: var(--smut-red);
    margin: 0 0 1.2em;
}
.smut-pdp__price {
    font-size: 1.9em;
    font-weight: 800;
    color: var(--smut-fg);
    margin: 0 0 1.2em;
}
.smut-pdp .wp-block-woocommerce-product-details {
    margin-top: 3rem;
}
/* Tab-Reiter ausblenden (nur eine Description-Tab): der Panel-Inhalt bleibt sichtbar,
   Aj setzt seine eigene Headline im Content. */
.smut-pdp .woocommerce-tabs > ul.tabs {
    display: none;
}
/* Abstand zwischen Description und MORE EVENTS verdoppelt (3rem -> 6rem).
   Related-Products laeuft jetzt als product-collection (related). */
.smut-pdp .wp-block-woocommerce-product-collection {
    margin-top: 6rem;
}

/* ===== Sortier-Leiste (Shop) ===== */
.smut-shop-toolbar {
    align-items: center;
    gap: 12px 20px;
    margin-bottom: 1.5em;
}
.smut-sort-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-left: auto; /* rechtsbuendig in der Toolbar */
}
.smut-sort-bar__label {
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.7;
    color: var(--smut-fg);
}
.smut-sort-bar__opt {
    font-size: 0.85em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-decoration: none;
    color: var(--smut-fg);
    padding: 4px 10px;
    border: 1px solid color-mix(in srgb, var(--smut-fg) 25%, transparent);
    border-radius: 4px;
    transition: all 0.2s ease;
}
.smut-sort-bar__opt:hover {
    border-color: var(--smut-red);
    color: var(--smut-red);
}
.smut-sort-bar__opt.is-active {
    background-color: var(--smut-red);
    border-color: var(--smut-red);
    color: var(--smut-on-red);
}
.smut-sort-bar__arrow {
    display: inline-block;
    min-width: 0.7em;
    font-weight: 900;
}

/* Desktop: Sort-Leiste kompakter (Font + Padding + Gap je 50% kleiner) */
@media (min-width: 769px) {
    .smut-sort-bar {
        gap: 4px 7px;
    }
    .smut-sort-bar__label {
        font-size: 0.4em;
    }
    .smut-sort-bar__opt {
        font-size: 0.425em;
        padding: 2px 5px;
        border-radius: 3px;
    }
}

/* ===== Home-Teaser (handverlesene Events) ===== */
.smut-home-teaser {
    width: 100%;
    margin: 3rem auto;
}
/* 3-spaltiges Grid wie das Shop-Grid (Desktop), 1 Spalte mobil. Der Teaser nutzt
   klassisches ul.products-Markup (kein Block-Template), deshalb hier ein eigenes
   Grid statt der WC-Block-Grid-Regeln. */
.smut-home-teaser ul.products.smut-home-teaser-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}
/* WC-Float-Grid neutralisieren (columns-3 setzt width/float/margin an li.product) */
.smut-home-teaser ul.products.smut-home-teaser-grid li.product {
    width: auto !important;
    max-width: none !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    clear: none !important;
}
@media (max-width: 768px) {
    .smut-home-teaser ul.products.smut-home-teaser-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* product image bigger */
@media (max-width: 1024px) {
    .product-template-default .wp-block-columns {
        flex-wrap: wrap !important;
    }

    .product-template-default .wp-block-columns .wp-block-column {
        width: 100%;
        min-width: 100%;
    }

    .woocommerce .wp-block-woocommerce-product-image-gallery {
        max-width: unset;
    }
}


/* product list 1 column below 768px */
@media (max-width: 768px) {
    .woocommerce ul.columns-3.wc-block-product-template__responsive {
        display: block !important;
    }
    
    .woocommerce ul.columns-3.wc-block-product-template__responsive li.product {
        width: 100% !important;
        float: none !important;
        display: block !important;
        margin-bottom: 20px;
    }
}

.is-layout-constrained > .alignwide {
    align-items: center !important;
}

/* page styles AWERENESS */
body.page-awareness {
    /* The animated background (smut-base.js) uses a dark blue palette in both theme
       modes, so text stays white regardless of light/dark. --smut-bg covers the
       surfaces that follow the token (theme popup, mobile bottom bar). */
    --smut-bg: #21295c;
    --smut-fg: #ffffff;

    /* Nummerierung: eigener Counter statt nativem Marker. Der native OL-Marker
       lief bisher als custom ::marker (list-style-position: outside) und wurde
       beim Scrollen + durch die Content-Fade-Maske weggeclippt (Zahl fehlte
       teils/ganz). list-style:none nimmt den Outside-Marker raus, gezaehlt wird
       ueber counter-reset/-increment und ausgegeben ueber li::before, ein
       In-Flow-Pseudo-Element, das nicht clippt und mit dem Text mitfaded. */
    .wp-block-list {
        padding-inline-start: 20px;
        list-style: none;
        counter-reset: awareness-item;

        li {
            position: relative;
            counter-increment: awareness-item;
            min-height: 50vH;
            padding-top: 200px;
            margin-bottom: 80px;

            strong {
                text-transform: uppercase;
                font-weight: 900;
            }

            /* Punkt-Label (SAFE SPACE etc.): Pixel-Font wie die Headings.
               !important noetig: der Editor-Content traegt ein Inline-
               font-weight:900, das wuerde den Ein-Gewicht-Font faux-bolden. */
            strong:first-child {
                font-size: 30px;
                font-family: var(--wp--preset--font-family--press-start);
                font-weight: 400 !important;
            }

            /* Nummer: Pixel-Font, gleiche Groesse wie das Punkt-Label, direkt
               vor dem Label in der ersten Zeile. margin-right statt Suffix-Space,
               da ein Space im Pixel-Font ~1em breit ist. */
            &::before {
                content: counter(awareness-item) ".";
                font-size: 30px;
                font-family: var(--wp--preset--font-family--press-start);
                font-weight: 400;
                margin-right: 0.4em;
            }

            svg {
                position: absolute;
                top:60px;
                width: 100px;
                left: 50%;
                transform: translateX(calc(-50% - 20px));
            }
        }

        li:last-child {
           min-height: unset;
        }
    }
}

.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
    width: calc(100% - var(--wp--style--unstable-gallery-gap, 16px) / 2);
}

.home_logo_ani_stripes {
    display:flex;
    justify-content:flex-end;
    width:100%;
    margin: 5rem auto
}

#logo-smut-ani-stripes {
    width: 80vw;
}

/* Stripes-Farbe an das Theme koppeln (wie der Text). Nur die sichtbaren Pattern-Linien;
   die schwarz/weissen Werte in den <mask>-Elementen sind Mask-Luminanz, nicht anfassen.
   id+class schlaegt das interne <style>.logo_stripes_lines{fill:#fff}. */
#logo-smut-ani-stripes .logo_stripes_lines {
    fill: var(--smut-fg);
}

/* ===== Home-Hero: Stripes-Animation links, Portrait rechts =====
   Der Shortcode [smut_logo_stripes] (.home_logo_ani_stripes) und das Portrait-
   Bild liegen zusammen in einer Flex-Group (.smut-home-hero, Block-Layout liefert
   display:flex + flex-wrap). Desktop nebeneinander, mobil gestapelt. */
.smut-home-hero {
    align-items: center;
    gap: clamp(1.5rem, 4vw, 4rem);
    width: 100%;
    margin: 5rem auto;
}
.smut-home-hero .home_logo_ani_stripes {
    flex: 1 1 55%;
    justify-content: flex-start;
    width: auto;
    margin: 0;
}
.smut-home-hero .home_logo_ani_stripes #logo-smut-ani-stripes {
    width: 100%;
}
.smut-home-hero > figure.wp-block-image {
    flex: 0 1 35%;
    margin: 0;
}
.smut-home-hero > figure.wp-block-image img {
    width: 100%;
    height: auto;
}
@media (max-width: 768px) {
    .smut-home-hero {
        flex-direction: column;
        margin: 3rem auto;
    }
    .smut-home-hero .home_logo_ani_stripes,
    .smut-home-hero > figure.wp-block-image {
        flex-basis: auto;
        width: 100%;
    }
}


@media (max-width: 500px) {
    h2.wp-block-heading {
        font-size: 3em;
    }
}

@media (max-width: 768px) {
    main {
        margin-top: 40px !important;
    }

    .home_logo_ani_stripes {
        flex-wrap: wrap;
    }

    #logo-smut-ani-stripes {
        width: 100%;
        margin:4em auto;
    }
}

@media (min-width: 768px) {
    p.isrcd_punchline {
        font-size: 2.1em;
    }

    .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
        width: calc(33% - var(--wp--style--unstable-gallery-gap, 16px) / 2);
    }
}

@media (min-width: 1024px) {
    #isrcd-main-nav-wrapper {
        margin-right: 5vw;
    }
}

@media (min-width: 1200px) {
    p.isrcd_punchline {
        max-width: 65vw;
        font-size: 3.3em;
    }
}


/* ===== Theme-Toggle (Light/Dark/System), adaptiert aus isario ===== */
/* Fixe Platzierung unten rechts, kollidiert nicht mit Logo (oben links) oder Burger (oben rechts). */
.theme-toggle-wrapper {
    position: relative; /* Anker fuer das Popup; sitzt jetzt im Header-Flow, nicht mehr fixed */
    display: flex;
    align-items: center;
}

.theme-toggle {
    background: transparent;
    border: none;
    border-radius: 10px;
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 44px;
    height: 44px;
    color: var(--smut-fg);
    transition: opacity 0.3s ease;
}

.theme-toggle:hover {
    opacity: 0.7;
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--smut-red);
    outline-offset: 2px;
}

.theme-toggle .theme-icon {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    position: absolute;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Nur das zur aufgeloesten Erscheinung passende Icon zeigen (Sonne=Light, Mond=Dark) */
.theme-toggle .theme-icon-light,
.theme-toggle .theme-icon-dark {
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
}

html[data-theme="light"] .theme-toggle .theme-icon-light,
html[data-theme="dark"] .theme-toggle .theme-icon-dark {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* Popup oeffnet nach unten (Toggle sitzt jetzt oben im Header) */
.theme-popup {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background: var(--smut-bg);
    color: var(--smut-fg);
    border: 1px solid var(--smut-fg);
    border-radius: 12px;
    padding: 8px;
    min-width: 180px;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.theme-toggle-wrapper[data-popup-open="true"] .theme-popup {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.theme-option {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: var(--smut-fg);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    transition: background 0.2s ease;
    box-sizing: border-box;
    margin: 0;
    text-align: left;
}

.theme-option:hover {
    background: color-mix(in srgb, var(--smut-fg) 10%, transparent);
}

.theme-option-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

.theme-option-icon svg {
    width: 18px;
    height: 18px;
    display: block;
    stroke: currentColor;
    fill: none;
}

.theme-option-text {
    flex: 1;
    text-align: left;
    white-space: nowrap;
}

.theme-option-check {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    opacity: 0;
    transition: opacity 0.2s ease;
    color: var(--smut-red);
}

.theme-option-check svg {
    width: 16px;
    height: 16px;
    display: block;
    stroke: currentColor;
    fill: none;
}

.theme-option[data-selected="true"] .theme-option-check {
    opacity: 1;
}

/* ===== Desktop-Header (>=769px) =====
   Volle Breite. Logo links, dann flexibler Restplatz, dann Menue,
   40px, dann Icon-Spalte (User/Basket/Theme) rechtsbuendig auf HOME-X (20px). */
@media (min-width: 769px) {
    :root {
        --smut-icon-size: clamp(20px, 2vw, 28px); /* Icons skalieren mit der Breite */
        --smut-icon-gap: calc(var(--smut-icon-size) * 2 / 3); /* Zeilenabstand = 2/3 Icon-Hoehe */
        /* Logo-Hoehe = 60vw * (291.21/890.43), gedeckelt bei max-width 885px */
        --smut-logo-h: min(19.62vw, 289px);
    }

    /* Menue-Items: feste Schrift, kompakte Zeilenhoehe. Die ABSTAENDE sind dynamisch
       (space-between ueber die Logo-Hoehe), nicht die Schrift. */
    #isrcd-mobile-nav-wrapper nav.isrcd-main-nav .wp-block-navigation-item {
        line-height: 1.15;
    }
    #isrcd-mobile-nav-wrapper nav.isrcd-main-nav ul.isrcd-main-nav {
        gap: 0; /* kein Block-Gap; space-between kontrolliert die Abstaende allein */
    }

    /* Header ueber die volle Breite; Block-Constraint (theme.json, :where -> 0 Spezifitaet)
       wird durch die ID/Klassen-Regel ueberschrieben, kein !important noetig.
       Rechter Content-Rand = 20px = X vom fixierten HOME-Label. */
    .isrcd-header-nav-column {
        max-width: none;
        height: auto;      /* Zeilenhoehe = Logo-Hoehe (hoechstes Kind), nicht mehr fix 21.5vw */
        max-height: none;
        padding-left: clamp(24px, 4vw, 80px);
        padding-right: 20px;
    }

    #isrcd-main-nav-wrapper {
        margin-right: 0;   /* frueheres 5vw entfernen, sonst kein Bündig auf HOME-X */
        height: auto;      /* per stretch auf Logo-Hoehe, definite Hoehe fuer die %-Kette */
    }

    /* Menue (Spalte 1) + Icon-Stapel (Spalte 2) via column-wrap:
       das 100% hohe Menue fuellt Spalte 1, die Icons wrappen in Spalte 2. */
    #isrcd-mobile-nav-wrapper {
        display: flex;
        flex-flow: column wrap;
        justify-content: flex-start; /* Items oben (Y von TICKETS) */
        align-items: flex-end;       /* rechtsbuendig in der jeweiligen Spalte */
        align-content: flex-end;     /* Spalten nach rechts (HOME-X) */
        gap: var(--smut-icon-gap) 40px; /* row-gap (Icons) | column-gap (Menue<->Icons) */
        height: var(--smut-logo-h); /* exakt Logo-Hoehe -> Menue endet buendig, begrenzt column-wrap */
    }

    /* Reihenfolge: Menue fuellt Spalte 1, dann User, Basket, Theme in Spalte 2 */
    #isrcd-mobile-nav-wrapper nav.isrcd-main-nav { order: 1; height: 100%; }
    #isrcd-mobile-nav-wrapper .wp-block-woocommerce-customer-account { order: 2; }
    #isrcd-mobile-nav-wrapper .wp-block-woocommerce-mini-cart { order: 3; }
    #isrcd-mobile-nav-wrapper .theme-toggle-wrapper { order: 4; }

    /* Icons einheitlich quadratisch, rechtsbuendig */
    #isrcd-mobile-nav-wrapper .wp-block-woocommerce-customer-account,
    #isrcd-mobile-nav-wrapper .wp-block-woocommerce-mini-cart,
    #isrcd-mobile-nav-wrapper .theme-toggle-wrapper {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: var(--smut-icon-size);
        height: var(--smut-icon-size);
        margin: 0;
    }

    #isrcd-mobile-nav-wrapper .theme-toggle {
        width: var(--smut-icon-size);
        height: var(--smut-icon-size);
        padding: 0;
    }
    #isrcd-mobile-nav-wrapper .theme-toggle .theme-icon {
        width: var(--smut-icon-size);
        height: var(--smut-icon-size);
    }

    /* WooCommerce-Icons an --smut-fg koppeln + einheitliche Groesse */
    #isrcd-mobile-nav-wrapper .wc-block-customer-account__account-icon,
    #isrcd-mobile-nav-wrapper .wc-block-mini-cart__icon {
        color: var(--smut-fg);
        fill: currentColor;
        width: var(--smut-icon-size);
        height: var(--smut-icon-size);
    }
    #isrcd-mobile-nav-wrapper .wc-block-mini-cart__button {
        color: var(--smut-fg);
        padding: 0;
        border: 0;
        background: transparent;
    }

    /* WC-Block-Innereien flush rechts: Button/Link ohne Eigen-Padding, exakt icon-breit,
       damit User/Basket/Theme auf EINER vertikalen Linie mit HOME sitzen. */
    #isrcd-mobile-nav-wrapper .wp-block-woocommerce-customer-account > a,
    #isrcd-mobile-nav-wrapper .wc-block-mini-cart__button {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: var(--smut-icon-size);
        height: var(--smut-icon-size);
        min-width: 0;
        margin: 0;
        padding: 0;
    }

    /* Warenkorb: Icon flush rechts, Mengen-Badge ueberlagern statt die Kante zu schieben */
    #isrcd-mobile-nav-wrapper .wc-block-mini-cart__quantity-badge {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: var(--smut-icon-size);
        height: var(--smut-icon-size);
    }
    #isrcd-mobile-nav-wrapper .wc-block-mini-cart__badge {
        position: absolute;
        top: -4px;
        right: 0;
        margin: 0;
    }

    /* Popup rechtsbuendig unter dem Toggle */
    #isrcd-mobile-nav-wrapper .theme-popup { right: 0; left: auto; }
}


/* ===== Shrinked Header (Desktop, >=769px) =====
   JS setzt `header.is-shrunk` ab ~80px Scroll (smut-base.js). Aus dem grossen
   Hero-Header (Logo Logo-hoch, Menue vertikal) wird eine kompakte, horizontale
   Kopfzeile: kleines Logo links, Menue + Shop-Icons als Zeile rechts.
   Tokens sind modus-neutral -> Light/Dark automatisch korrekt. */
@media (min-width: 769px) {
    header {
        transition: min-height 0.25s ease;
    }
    .isrcd-logo-main {
        transition: width 0.25s ease;
    }

    header.is-shrunk {
        min-height: 0;
    }
    /* Verlaufs-Blur statt Flaeche/Schatten: backdrop-filter kann selbst
       keinen Verlauf, deshalb ein Pseudo-Layer, dessen Blur-Wirkung per
       mask-image von unten (0) nach oben (voll 3px) eingeblendet wird.
       z-index -1 haelt ihn unter den Nav-Elementen, die bleiben scharf. */
    header.is-shrunk::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
        -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 100%);
        mask-image: linear-gradient(to top, transparent 0%, #000 100%);
    }
    header.is-shrunk .isrcd-header-nav-column {
        padding-top: 10px;
        padding-bottom: 10px;
        align-items: center;
    }
    header.is-shrunk .isrcd-logo-main {
        width: clamp(150px, 16vw, 230px);
    }

    /* Menue-/Icon-Cluster: aus der Logo-hohen Spalte in eine kompakte Zeile */
    header.is-shrunk #isrcd-mobile-nav-wrapper {
        height: auto;
        flex-flow: row nowrap;
        align-items: center;
        align-content: center;
        gap: clamp(16px, 2vw, 32px);
    }
    header.is-shrunk #isrcd-mobile-nav-wrapper nav.isrcd-main-nav {
        height: auto;
        order: 0;
    }
    /* Hohe Specificity, um das Desktop-`gap: 0` und `flex-direction: column` zu schlagen */
    header.is-shrunk #isrcd-mobile-nav-wrapper nav.isrcd-main-nav ul.isrcd-main-nav {
        flex-direction: row;
        height: auto;
        align-items: center;
        gap: clamp(12px, 1.6vw, 28px);
    }
    header.is-shrunk ul.isrcd-main-nav .wp-block-navigation-item {
        align-self: center;
    }
    header.is-shrunk #isrcd-mobile-nav-wrapper .wp-block-woocommerce-customer-account { order: 1; }
    header.is-shrunk #isrcd-mobile-nav-wrapper .wp-block-woocommerce-mini-cart { order: 2; }
    header.is-shrunk #isrcd-mobile-nav-wrapper .theme-toggle-wrapper { order: 3; }
}


/* ===== Mobile Bottom-Bar (Daumen-Schnellzugriff) =====
   Fixe Leiste unten, faedet beim Runterscrollen ein (JS: .is-visible ab 120px).
   Nur < 769px; Desktop und Ausgangszustand ausgeblendet. Markup: inc/bottom-bar.php. */
.smut-bottombar {
    display: none;
}

@media (max-width: 768px) {
    .smut-bottombar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 90;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 20px calc(10px + env(safe-area-inset-bottom, 0px));
        background: var(--smut-bg);
        border-top: 1px solid color-mix(in srgb, var(--smut-fg) 14%, transparent);
        /* Ausgangszustand: unter dem Viewport, unsichtbar, nicht klickbar */
        transform: translateY(110%);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.28s ease, opacity 0.28s ease;
    }
    .smut-bottombar.is-visible {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    .smut-bottombar__home {
        color: var(--smut-fg);
        font-weight: 900;
        font-size: 1.05rem;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        text-decoration: none;
    }

    .smut-bottombar__icons {
        display: flex;
        align-items: center;
        gap: var(--smut-m-gap, 16px);
    }

    .smut-bottombar__link,
    .smut-bottombar__menu {
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--smut-fg);
        background: none;
        border: 0;
        padding: 0;
        cursor: pointer;
    }
    .smut-bottombar__link svg,
    .smut-bottombar__menu svg {
        width: var(--smut-m-icon, 28px);
        height: var(--smut-m-icon, 28px);
        display: block;
    }
    .smut-bottombar__link:hover,
    .smut-bottombar__menu:hover {
        color: var(--isrcd--color--custom-grey);
    }

    /* Theme-Toggle in der Bottom-Bar: Popup oeffnet nach OBEN, rechtsbuendig */
    .smut-bottombar .theme-toggle {
        width: var(--smut-m-icon, 28px);
        height: var(--smut-m-icon, 28px);
        padding: 0;
    }
    .smut-bottombar .theme-toggle .theme-icon {
        width: var(--smut-m-icon, 28px);
        height: var(--smut-m-icon, 28px);
    }
    .smut-bottombar .theme-popup {
        top: auto;
        bottom: calc(100% + 12px);
        right: 0;
        left: auto;
    }
}


/* Footer: mehr Luft zum Content. Gezielt statt ueber WPs globale
   :where(.wp-site-blocks) > *-Gap-Regel, die auch main treffen wuerde. */
.wp-site-blocks > footer.wp-block-template-part {
    margin-block-start: 100px;
}

/* ===== FONT-TRIAL: Press Start 2P (Pixel-Font) fuer Headlines + Labels =====
   Aj-Wunsch 2026-09-22, erstmal als Probe auf STAGE. Headings laufen ueber
   theme.json (elements.heading + h1-h6). Der Font hat nur Gewicht 400,
   fettere Werte wuerden als Faux-Bold verwischen, deshalb ueberall 400.
   Der Pixel-Font laeuft optisch deutlich groesser/breiter als Archivo,
   deshalb die Groessen-Reduktionen hier. Revert: diesen Block loeschen +
   theme.json zuruecksetzen (fontFamilies-Eintrag + elements-Heading-Styles). */

/* Grosse Content-Headlines: 900 -> 400, 5em waere im Pixel-Font riesig */
h2.wp-block-heading {
    font-weight: 400;
    font-size: 3em;
}
@media (max-width: 500px) {
    h2.wp-block-heading {
        font-size: 1.6em;
    }
}

/* Karten-Headlines (Eventname, PLP/Teaser): 900 -> 400, kompakter + mehr Luft */
.wc-block-product-template .wp-block-post-title,
.smut-home-teaser ul.products li.product .woocommerce-loop-product__title {
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
}

/* Labels: Formular-Labels, Sort-Bar, Buttons/CTAs */
.isrcd_form_label,
.smut-sort-bar__label,
.smut-sort-bar__opt,
.isrcd_button,
.isrcd_cta_button,
.woocommerce input[type="submit"],
.woocommerce-page input[type="submit"],
.woocommerce-page .button,
.woocommerce .single_add_to_cart_button,
.woocommerce .checkout-button,
.wc-block-components-button,
.wp-element-button,
.wp-block-button__link,
.wc-block-cart__submit-button {
    font-family: var(--wp--preset--font-family--press-start);
    font-weight: 400;
}

/* ===== Product page: ticket phase (inc/ticket-phases.php) =====
   One active phase renders as plain text next to the "Ticket" label instead of a dropdown. */
.variations_form table.variations th,
.variations_form table.variations td {
    vertical-align: middle;
    padding: 0 1em 0 0;
}

.variations_form .smut-ticket-label {
    font-weight: 700;
    white-space: nowrap;
}

/* "Ticket:" with colon, also in front of the dropdown when several phases are on sale */
.variations_form table.variations th.label label::after {
    content: ":";
}

/* ===== Checkout block: single payment method as a plain Viva banner ===== */
/* With only one payment method (Viva) there is nothing to choose: hide radio, title and
   description and show the Viva logo banner full width as a hint. Scoped to :only-child,
   so a second payment method brings the normal radio selection back. */
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control:has(> .wc-block-components-radio-control-accordion-option:only-child)::after {
	display: none;
}
.wp-block-woocommerce-checkout-payment-block .wc-block-components-radio-control-accordion-option:only-child {
	box-shadow: none;
	border: 0;

	.wc-block-components-radio-control__input,
	.wc-block-components-radio-control__label > div > span,
	.wc-block-components-radio-control-accordion-content {
		display: none;
	}
	.wc-block-components-radio-control__option {
		padding: 0;
		cursor: default;
	}
	.wc-block-components-radio-control__label > div {
		flex: 1 1 auto;
		width: 100%;
	}
	.wc-block-components-radio-control__option-layout img {
		display: block;
		width: 100%;
		max-width: 420px;
		max-height: none;
		height: auto;
		margin: 0;
	}
}

/* ===== Order confirmation: put the "Log in here" CTA on its own line ===== */
/* The returning-customer login button sits inline inside the status paragraph and wraps
   awkwardly. Make it a block on its own line with vertical spacing. */
.wc-block-order-confirmation-status-description p a.button {
	display: block;
	width: -moz-fit-content;
	width: fit-content;
	margin-block: 1.4em;
}

/* ===== Checkout order summary: readable quantity badge ===== */
/* Woo paints the badge in currentColor with digits in the base color (#fff); in dark mode that is
   white on white (looked like a plain white dot on the event image). Brand red, white digits. */
.wc-block-components-order-summary .wc-block-components-order-summary-item__quantity {
	background: #ff0041;

	span {
		color: #ffffff;
	}
}

/* ===== Terms and Conditions page ===== */
/* Section headings at the size of the Awareness point labels, triple paragraph spacing. */
body.page-terms-and-conditions main {
	h2 {
		font-size: 30px;
		line-height: 1.6;
	}

	p + * {
		margin-block-start: calc(3 * var(--wp--style--block-gap, 24px));
	}
}

/* ===== Mini cart drawer: title on two lines ===== */
/* Line 1 "Your Cart" in the heading font, line 2 "items: 2" in the copy font. */
h2.wc-block-mini-cart__title {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.3em;

	.wp-block-woocommerce-mini-cart-title-label-block {
		margin-right: 0;
		font-family: var(--wp--preset--font-family--press-start);
	}

	.wp-block-woocommerce-mini-cart-title-items-counter-block {
		font-family: var(--wp--preset--font-family--archivo);
		font-size: var(--wp--preset--font-size--normal);
		font-weight: 400;
		text-transform: none;
	}
}

/* ===== Add-to-cart notice (success): green banner, white check, white CTA ===== */
/* Text markup (bold name + line break) comes from inc/woocommerce.php. Woo's store-notices.css
   pins the forward link with !important (transparent background, grey color, no padding),
   so the CTA overrides need !important as well. */
.wc-block-components-notice-banner.is-success {
	background-color: #4ab866;
	border-color: #4ab866;
	color: #ffffff;

	> svg {
		background-color: transparent;
		fill: #ffffff;
		align-self: center;
		height: auto;
	}

	> .wc-block-components-notice-banner__content .wc-forward {
		display: block;
		float: none;
		width: -moz-fit-content;
		width: fit-content;
		margin: 12px 0 0 auto;
		padding: 10px 16px !important;
		background: #ffffff !important;
		color: #000000 !important;
		border-radius: 4px;
		opacity: 1;
		text-decoration: none;
	}
}