/*
Theme Name: Betheme Child
Theme URI: https://themes.muffingroup.com/betheme
Author: Muffin group
Author URI: https://muffingroup.com
Description: Child Theme for Betheme
Template: betheme
Version: 2.0.2
*/


/* (Alte @font-face Lord Story, Overlad Kingdom, Royal Castle entfernt) */

/* ==========================================================================
   1. GLOBAL THEME FIXES & HELPER
   ========================================================================== */



html, body {
    background-color: #0d0905 !important;
}



/* 2. Haupt-Container transparent machen (BeTheme spezifisch) */
/* Damit der Hintergrund durchscheint und nicht von weißen Boxen verdeckt wird */
#Wrapper,
#Content {
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Optional: Falls du auf manchen Seiten noch weiße Sektionen hast */
/* Entferne die Kommentarsymbole, falls nötig: */
/* .section, .section_wrapper {
    background-color: transparent !important;
} 
*/




/* Wenn Age-Gate bestätigt: Alles ausblenden & Scrollen erlauben */
html.odin-age-ok #odin-age-gate,
html.odin-age-ok .mfn-popup-overlay,
html.odin-age-ok .mfn-popup-backdrop,
html.odin-age-ok .mfn-popup-mask,
html.odin-age-ok .mfn-popup-bg {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

html.odin-age-ok,
html.odin-age-ok body {
    overflow: auto !important;
    position: static !important;
}

/* Tabellen & Inputs Fixes */
.craftbeer3-customTable tr td {
    background: none !important;
    text-align: left;
    border: none;
}

.craftbeer3-customTable .progress_icons {
    margin-bottom: 0px;
}

.crafbeer3-breadcrumbs a {
    opacity: 0.5;
}

.column_cf7 input {
    min-height: 0px;
}

.header-cart-count {
    padding: 5px 10px 4px 10px !important;
    font-family: 'ITC Odin Con', serif !important;
    font-weight: 600 !important;
}

/* Sticky Header Background Fix */
.mfn-header-scrolled .mfn-header-tmpl section.mcb-section-unv97hu {
    background-color: rgba(0, 0, 0, 0.7) !important;
    opacity: 1 !important;
}

/* ==========================================================================
   2. MENU STYLING (GOLD GRADIENTS + ACTIVE DIMMING)
   Alle Items teilen den GLEICHEN hellen Gradient.
   Inaktive werden per filter gedimmt → Hover smooth zurück zum Aktiv-Look.
   ========================================================================== */

/* Menü-Items: Abstand zwischen den Einträgen */
#menu-main > li {
    padding-left: 18px !important;
    padding-right: 18px !important;
}

/* Alle Items: Heller Gold-Gradient (= Aktiv-Gradient als Basis) */
.mfn-menu-link span {
    background: linear-gradient(120deg, #fada89 0%, #ffe3a0 40%, #fff0c4 70%, #ffe3a0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: none;
    transition: filter 1.6s cubic-bezier(0.25, 0.1, 0.25, 1);
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    will-change: filter;
}

/* Hover (ohne aktives Item): leichter Glow — schneller rein */
.mfn-menu-link:hover span {
    filter: drop-shadow(0 0 4px rgba(255, 230, 160, .3)) drop-shadow(0 0 8px rgba(255, 215, 130, .2));
    transition: filter .4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Aktives Item: volle Helligkeit + starker Glow */
.menu-item.current-menu-item .mfn-menu-link span,
.menu-item.current_page_item .mfn-menu-link span {
    filter: drop-shadow(0 0 10px rgba(244, 192, 100, 0.45));
}

/* Inaktive Items: gleicher Gradient, aber per filter gedimmt */
#menu-main:has(.current-menu-item) .menu-item:not(.current-menu-item) .mfn-menu-link span,
#menu-main:has(.current_page_item) .menu-item:not(.current_page_item) .mfn-menu-link span {
    filter: brightness(0.83) saturate(1.1) drop-shadow(0 0 6px rgba(255, 230, 160, 0)) drop-shadow(0 0 12px rgba(255, 215, 130, 0)) drop-shadow(0 0 20px rgba(241, 198, 91, 0));
}

/* Hover auf inaktiven: schnell rein (.4s), langsam raus (1.6s Nachglow vom Basis) */
#menu-main:has(.current-menu-item) .menu-item:not(.current-menu-item):hover .mfn-menu-link span,
#menu-main:has(.current_page_item) .menu-item:not(.current_page_item):hover .mfn-menu-link span {
    filter: brightness(1) saturate(1) drop-shadow(0 0 10px rgba(244, 192, 100, 0.45));
    transition: filter .4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Seiten OHNE aktives Item (z.B. Cart/Checkout): alle Items gedimmt wie Inaktive */
#menu-main:not(:has(.current-menu-item)):not(:has(.current_page_item)) .mfn-menu-link span {
    filter: brightness(0.83) saturate(1.1) drop-shadow(0 0 6px rgba(255, 230, 160, 0)) drop-shadow(0 0 12px rgba(255, 215, 130, 0)) drop-shadow(0 0 20px rgba(241, 198, 91, 0));
}
/* Hover: aufhellen + Glow (identisch wie Hover auf inaktiven mit Aktivem) */
#menu-main:not(:has(.current-menu-item)):not(:has(.current_page_item)) .mfn-menu-link:hover span {
    filter: brightness(1) saturate(1) drop-shadow(0 0 10px rgba(244, 192, 100, 0.45));
    transition: filter .4s cubic-bezier(0.25, 0.1, 0.25, 1);
}








/* =========================================================
   VIKING PLAYER (Big Ear & Text Fade)
   ========================================================= */

/* Hauptcontainer */
a .viking-player-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 15px;
    z-index: 9999;
}

/* Welle */
.wave-icon {
    background: transparent !important;
    border: none !important;
    cursor: pointer;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    height: 35px;
    width: 40px;
    padding: 0 5px !important;
}

.wave-icon .bar {
    display: block;
    width: 4px;
    background-color: #c5a059;
    border-radius: 2px;
    height: 4px;
    transition: all 0.2s ease;
}

.wave-icon:hover .bar {
    background-color: #f9d77e;
    box-shadow: 0 0 5px rgba(197, 160, 89, 0.6);
}

.wave-icon.is-playing .bar {
    -webkit-animation: sound-wave 1s infinite ease-in-out;
    animation: sound-wave 1s infinite ease-in-out;
}

.wave-icon.is-playing .bar-1 {
    -webkit-animation-delay: 0.0s;
    animation-delay: 0.0s;
}

.wave-icon.is-playing .bar-2 {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

.wave-icon.is-playing .bar-3 {
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
}

.wave-icon.is-playing .bar-4 {
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
}

/* Safari/iPad: auch #viking-wave-trigger direkt ansprechen */
#viking-wave-trigger.is-playing .bar {
    -webkit-animation: sound-wave 1s infinite ease-in-out !important;
    animation: sound-wave 1s infinite ease-in-out !important;
}
#viking-wave-trigger.is-playing .bar-1 { -webkit-animation-delay: 0s !important; animation-delay: 0s !important; }
#viking-wave-trigger.is-playing .bar-2 { -webkit-animation-delay: 0.2s !important; animation-delay: 0.2s !important; }
#viking-wave-trigger.is-playing .bar-3 { -webkit-animation-delay: 0.4s !important; animation-delay: 0.4s !important; }
#viking-wave-trigger.is-playing .bar-4 { -webkit-animation-delay: 0.1s !important; animation-delay: 0.1s !important; }

@-webkit-keyframes sound-wave {
    0% {
        height: 4px;
    }

    50% {
        height: 25px;
    }

    100% {
        height: 4px;
    }
}

@keyframes sound-wave {
    0% {
        height: 4px;
    }

    50% {
        height: 25px;
    }

    100% {
        height: 4px;
    }
}






/* --- POP-UP CONTAINER --- */
/* =========================================================
   FIX: PLAYER KLICK-BUG (Pointer Events)
   ========================================================= */

.player-dropdown {
    position: absolute;
    top: 50px;
    right: -20px;
    display: flex;
    flex-direction: column;
    gap: 10px;

    /* Design Kram ... */
    background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, 0.45) 100%), url('/wp-content/uploads/2025/11/bg_odin_web_16.jpg');
    background-size: 400px;
    border: 1px solid #c5a059;
    border-radius: 8px;
    background-size: 150px !important;
    padding: 10px 20px;
    width: 400px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9);

    /* --- ANIMATION STATES --- */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 99999;

    /* WICHTIGSTER FIX: Klicks gehen durch, wenn unsichtbar! */
    pointer-events: none !important;
}

.player-dropdown.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);

    /* WICHTIGSTER FIX: Klicks wieder aktivieren, wenn offen! */
    pointer-events: auto !important;
}








/* --- OBERE REIHE (Info) --- */
.vp-top-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    border-bottom: 1px solid rgba(197, 160, 89, 0.2);
    padding-bottom: 15px;
}

.vp-track-box {
    display: flex;
    flex-direction: column;
    width: 48%;
    overflow: hidden;
}

.vp-track-box.left {
    text-align: left;
}

.vp-track-box.right {
    text-align: right;
}

.vp-track-box.clickable {
    cursor: pointer;
    transition: opacity 0.2s;
}

.vp-track-box.clickable:hover {
    opacity: 1;
}

.vp-track-box.clickable:hover .vp-song-title {
    color: #f9d77e;
    text-shadow: 0 0 8px rgba(197, 160, 89, 0.6);
}

.vp-track-box.right .vp-song-title {
    color: rgba(244, 231, 199, 0.6);
}



.vp-label {
    font-family: 'Odin Text Reg', serif !important;
    font-size: 0.85rem;
    color: #c5a059;
    letter-spacing: 1px;
    text-transform: none;
    margin-bottom: 4px;
    opacity: 0.8;
}

/* SONG TITEL (Mit Fade Transition) */
.vp-song-title {
    font-family: 'ITC Odin Con', serif !important;
    font-size: 1.6rem !important;
    color: #f3d895;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;

    letter-spacing: 0.01em;

    /* HIER IST DIE MAGIE FÜR DEN TEXT-FADE */
    transition: opacity 0.5s ease, transform 0.5s ease, filter 0.3s;
    opacity: 1;
    transform: translateY(0);
}


.vp-song-title:hover {
    color: rgb(244, 231, 199) !important;

}

 

/* Wenn diese Klasse per JS gesetzt wird, blendet der Text aus */
.vp-song-title.is-fading {
    opacity: 0;
    transform: translateY(3px);
    /* Leichte Bewegung nach unten beim Ausblenden */
}

/* --- UNTERE REIHE (Volume) --- */
.vp-vol-row {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    height: 40px;
    /* Etwas höher für das große Ohr */
}

/* Buttons */
.vp-btn {
    background: transparent !important;
    border: none !important;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.1s, opacity 0.3s;
    user-select: none;
}

.vp-icon-img {
    display: block;
    object-fit: contain;
    pointer-events: none;
    transition: filter 0.2s ease;
}

.vp-btn.vol-btn .vp-icon-img {
    width: 24px;
    height: 24px;
}

.vp-btn:hover .vp-icon-img {
    filter: brightness(1.2) drop-shadow(0 0 5px rgba(255, 215, 130, 0.6));
    transform: scale(1.1);
}

.vp-btn:active {
    transform: scale(0.95);
}

.vp-btn.disabled {
    opacity: 0.3;
    pointer-events: none;
    filter: grayscale(1);
}

/* --- CENTER DISPLAY (Zahl & Icons) --- */
.vp-vol-display {
    position: relative;
    margin-top: 2px;
    width: 80px;
    height: 40px;
    /* Höhe angepasst */
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Odin Text Reg', serif !important;
    font-size: 2rem !important;
    color: #c5a059;
    cursor: pointer !important;
    user-select: none !important;
}

#vp-vol-text {
    transition: opacity 0.2s ease, transform 0.2s ease;
    opacity: 1;
    transform: scale(1);
    text-shadow: 0 0 10px rgba(197, 160, 89, 0.3);
}

.vp-icon-group {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- DAS OHR (GRÖSSER GEMACHT) --- */
.vp-ear-img {
    margin-top: 5px;
    width: 32px !important;
    /* HIER: Von 20px auf 32px erhöht */
    height: 32px !important;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 0 5px rgba(255, 215, 130, 0.4));
}

/* Hover Logik */
.vp-vol-display:hover #vp-vol-text {
    opacity: 0;
    transform: scale(0.5);
}

.vp-vol-display:hover .vp-icon-group {
    opacity: 1;
}


/* Mute State Styles */
/* Mute State Styles - JETZT SICHTBAR BLEIBEN! */
.vp-vol-row.is-muted .vol-btn {
    opacity: 1;
    /* War 0 -> Jetzt sichtbar */
    pointer-events: auto;
    /* War none -> Jetzt klickbar */
    width: auto;
    /* War 0 -> Jetzt normale Breite */
    margin: 0;
    overflow: visible;
}

/* Text kann ausgeblendet bleiben, das ist ok */
.vp-vol-row.is-muted #vp-vol-text {
    display: none;
}

/* Icon Group sichtbar lassen */
.vp-vol-row.is-muted .vp-icon-group {
    opacity: 1;
}

/* Zeige das "Mute" Icon (durchgestrichen) */
.vp-vol-row.is-muted #icon-ear-on {
    display: none !important;
}

.vp-vol-row.is-muted #icon-ear-off {
    display: block !important;
    opacity: 1 !important;
}







/* =========================================================
   VIKING PLAYER V24: FINAL DESIGN & FIXES
   ========================================================= */

html body .player-dropdown {
    position: absolute;
    top: 70px;
    right: 0;

    /* 300px Breite */
    width: 265px !important;

    display: flex;
    flex-direction: column;
    gap: 15px;

    background-color: #0d0905 !important;
    background-image:
        radial-gradient(circle at center, rgba(0, 0, 0, 0.3) 0%, rgba(12, 8, 6, 0.95) 100%),
        url('/wp-content/themes/betheme-child/img/card_odin_game_bg_pattern_s.jpg') !important;
    background-size: 200px !important;
    background-repeat: repeat !important;

    border: 2px solid #c5a059 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.9) !important;

    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 99999;
    pointer-events: none !important;
    user-select: none !important;
}

html body .player-dropdown.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto !important;
}

/* TEXT */
.vp-info-stack {
    display: flex;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px;
    width: 100%;
    border-bottom: 1px solid rgba(197, 160, 89, 0.2);
    padding-bottom: 15px;
}

.vp-info-group {
    display: flex;
    flex-direction: column !important;
    width: 100%;
}

.vp-label {
    font-family: 'Odin Text Reg', serif !important;
    font-size: 0.9rem !important;
    font-weight: normal !important;
    color: #888 !important;
    letter-spacing: 1px;
    text-transform: none;
    margin-bottom: 2px !important;
    pointer-events: none;
}

#vp-current-name {
    font-family: 'ITC Odin Con', serif !important;
    font-size: 1.78rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.1 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    /* Gold Gradient wie Footer/Sechser */
    background: linear-gradient(120deg, #c5a059 0%, #ddc68a 40%, #c5a059 70%, #b8944e 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: #c5a059 !important;
    text-shadow: none;
    filter: none;
}

/* Aktuell läuft - nicht klickbar */
#vp-current-trigger,
#vp-current-trigger * {
    cursor: default !important;
}

#vp-current-trigger .vp-label {
    color: #eee !important;
}

/* Davor gespielt */
#vp-prev-trigger,
#vp-prev-trigger * {
    cursor: pointer;
}

#vp-prev-trigger {
    opacity: 0.7;
    transition: opacity 0.2s;
    margin-bottom: 3px;
}

#vp-prev-trigger:hover {
    opacity: 1;
}

#vp-prev-name {
    font-family: 'ITC Odin Con', serif !important;
    font-size: 1.2rem !important;
    color: #aaa !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s;
    cursor: pointer;
}

/* Als nächstes */
#vp-next-trigger,
#vp-next-trigger * {
    cursor: pointer;
}

#vp-next-trigger {
    opacity: 0.7;
    transition: opacity 0.2s;
    margin-top: 3px;
}

#vp-next-trigger:hover {
    opacity: 1;
}

#vp-next-name {
    font-family: 'ITC Odin Con', serif !important;
    font-size: 1.2rem !important;
    color: #aaa !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s;
}

/* VOLUMEN */
.vp-vol-section {
    display: flex;
    align-items: center !important;
    justify-content: space-between;
    gap: 2px;
    /* Mute Icon nah am Slider */
    height: 40px;
    width: 100%;
    margin-top: 4px;
}

#vp-mute-btn {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    cursor: pointer;
    padding: 0;
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box !important;
}

#vp-mute-btn img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
}

#vp-mute-btn:hover {
    background: transparent !important;
    border: none !important;
    box-shadow: none;
    transform: scale(1.1);
}

/* WAVE SLIDER - FESTE BREITE 220px */
.vp-slider-wrapper {
    position: relative;
    height: 40px;
    width: 220px !important;
    /* Passt perfekt in 300px Player */
    flex: none !important;
    display: block;
    cursor: pointer;
    overflow: hidden;
}

/* Hintere Welle */
.vp-wave-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: rgba(255, 255, 255, 0.15);
    z-index: 1;
}

/* Vordere Welle (Maske) */
.vp-wave-mask {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 50%;
    /* JS ändert dies */
    overflow: hidden;
    z-index: 2;
    pointer-events: none;
    will-change: width;
    transition: width 0.05s linear;
}

/* Innere Gold-Welle (Fix) */
.vp-wave-inner {
    width: 220px !important;
    /* Exakt gleiche Breite wie Wrapper */
    height: 100%;
    color: #c5a059;
}

/* Mute State */
.vp-vol-section.is-muted .vp-wave-inner {
    color: #555;
}

.vp-vol-section.is-muted #vp-mute-btn {
    border: none !important;
    opacity: 0.6;
    box-shadow: none;
}


/* --- BUGFIX: HORN CLICK --- */
/* Füge dies am Ende deiner style.css ein */
#odin-sticky-horn {
    pointer-events: none !important;
    /* Standard: Nicht klickbar */
}

#odin-sticky-horn.is-visible {
    pointer-events: auto !important;
    /* Wenn sichtbar, dann klickbar */
}



/* ==========================================================================
   6. UTILITIES (Fixes for Inputs/Theme)
   ========================================================================== */

/* Fix: Kill Browser Spinners */
.odin-qty-control input.odin-qty-input::-webkit-outer-spin-button,
.odin-qty-control input.odin-qty-input::-webkit-inner-spin-button,
.odin-item-qty input::-webkit-outer-spin-button,
.odin-item-qty input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
    display: none !important;
}

.odin-qty-control input[type=number],
.odin-item-qty input[type=number] {
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}

/* Fix: Kill Theme Buttons Injection */
.odin-qty-control .plus,
.odin-qty-control .minus,
.odin-qty-control label {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Pop Up Helper Fade */
.raw-popup-enabled #raw-popup-overlay,
.raw-popup-enabled #mfn-popup-template-382 {
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility 0s linear .35s;
}

.exit-mfn-popup,
.exit-mfn-popup-abs,
.mfn-popup-close {
    pointer-events: auto !important;
    position: relative;
    z-index: 2147483647;
}




/* =========================================================
   FIX: TEXT SELECTION LOCK (Verhindert ungewolltes Markieren)
   ========================================================= */

/* Alle interaktiven Elemente nicht markierbar */
#odin-age-gate,
.odin-wizard-container,
.player-dropdown.is-open,
.player-dropdown,
#odin-sticky-horn,
#mobile-custom-menu-trigger,
#viking-wave-trigger,
#viking-player-controls,
.vp-vol-section,
.vp-mute-btn,
.vp-slider-wrapper {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

/* Eingabefelder müssen weiterhin markierbar sein */
#odin-age-gate input,
.odin-wizard-container input {
    user-select: text;
    -webkit-user-select: text;
}


/* =========================================================
   FIX: WARENKORB SELEKTION BLOCKIEREN
   ========================================================= */

/* Verhindert Markierung auf dem Zähler und im gesamten Warenkorb-Bereich */
.header-cart-count,
.header-cart-count *,
.header-cart-container,
.header-cart-container * {
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}





/* =========================================================
   FIX: AGE GATE INPUT SELECTION BLOCKIEREN
   ========================================================= */

/* Annahme: Das Jahr-Eingabefeld ist ein Input vom Typ "number" oder "text" */
#odin-age-gate input[type="number"],
#odin-age-gate input[type="text"] {
    /* Verhindert Markierung/Selektion des Textes */
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;

    /* Optional: Entfernt die kleinen Pfeile (Spinner) in Chrome/Firefox/Edge */
    -moz-appearance: textfield;
    /* Firefox */
}

/* Chrome/Safari fix für die Pfeile */
#odin-age-gate input::-webkit-outer-spin-button,
#odin-age-gate input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}








/* =========================================================
   WIZARD DESIGN (Trunk Seite - Wie im Screenshot)
   ========================================================= */

.odin-wizard-container {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    padding: 60px 20px;
    color: #f4e7c7;
    font-family: 'Cinzel', serif;
}

/* --- 1. Das Bild oben --- */
.odin-step-image img {
    height: 220px;
    /* Großes Bild */
    width: auto;
    display: block;
    margin: 0 auto 30px auto;
    filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.6));
    /* Schöner Schatten */
}

/* --- 2. Die Headline --- */
.headline-big {
    font-family: 'Cinzel', serif !important;
    font-size: 2.2rem !important;
    line-height: 1.3 !important;
    text-transform: uppercase;
    color: #f4e7c7;
    margin-bottom: 40px;
    letter-spacing: 2px;
    font-weight: 400;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

/* --- 3. Der Zähler (Mitte) --- */
.minimal-qty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
    margin-bottom: 50px;
}

/* Die Plus/Minus Zeichen (frei schwebend, kein Kreis) */
.minimal-qty .odin-qty-btn {
    background: none !important;
    border: none !important;
    font-size: 3rem !important;
    /* Schön groß */
    color: #888 !important;
    /* Dunkelgrau wie im Bild */
    cursor: pointer;
    padding: 0 10px;
    line-height: 1;
    font-weight: 300;
    transition: color 0.3s;
    display: flex;
    align-items: center;
}

.minimal-qty .odin-qty-btn:hover {
    color: #c5a059 !important;
    /* Gold beim Hover */
    transform: scale(1.1);
}

/* Die Box mit der Zahl */
.odin-input-box {
    width: 100px;
    height: 70px;
    background: #080808;
    /* Fast Schwarz */
    border: 1px solid rgba(255, 255, 255, 0.2);
    /* Feiner Rand */
    border-radius: 12px;
    /* Abgerundet */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
}

.odin-input-box input {
    background: transparent !important;
    border: none !important;
    color: #fff !important;
    font-size: 2.5rem !important;
    text-align: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: 'Cinzel', serif;
}

/* --- 4. Button "SAMMELN" --- */
.odin-btn-text {
    background: none !important;
    border: none !important;
    color: #c5a059 !important;
    /* Gold */
    font-family: 'ITC Odin Con', serif !important;
    font-size: 1.8rem !important;
    text-transform: uppercase;
    letter-spacing: 3px;
    cursor: pointer;
    padding: 10px 40px;
    transition: all 0.3s ease;
    text-shadow: 0 0 15px rgba(197, 160, 89, 0.3);
}

.odin-btn-text:hover {
    color: #fff !important;
    text-shadow: 0 0 25px rgba(197, 160, 89, 0.8);
    transform: scale(1.05);
}

/* Zurück Link (klein drunter) */
.odin-back-link {
    display: block;
    margin-top: 20px;
    color: #444;
    font-size: 0.9rem;
    text-decoration: none;
    text-transform: uppercase;
    opacity: 0.6;
}

.odin-back-link:hover {
    opacity: 1;
    color: #888;
}




/* ==========================================================================
   2. TRUNK WIZARD (Die Auswahlseite) - VISUAL FIX FÜR HEADLINE
   ========================================================================== */

/* Hauptcontainer: Zwingend mittig */
.odin-wizard-wrapper {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: 100%;
    padding: 60px 20px;
    min-height: 70vh;
}

.odin-wizard-inner {
    width: 100%;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 1. Bild (Das Horn) */
.ow-image img {
    width: 280px;
    height: auto;
    margin-bottom: 30px;
    display: block;
    filter: drop-shadow(0 0 20px rgba(197, 160, 89, 0.2));
}

/* 2. TITEL: GOLD METALLIC FLOW (VON AGE GATE KOPIERT) */
@keyframes odinMetalFlow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.ow-title {
    font-family: 'ITC Odin Con', serif !important;
    font-size: clamp(1.8rem, 7vw, 4rem) !important;
    line-height: 4.2rem !important;
    margin-bottom: 40px !important;
    text-transform: uppercase;
    font-weight: normal !important;

    /* === METALLIC EFFECT ANWENDEN === */
    display: inline-block;
    color: #dab262 !important;
    /* Fallback Farbe */

}

/* 3. Counter Box (Muss NEBENEINANDER sein) */
.ow-counter-box {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 30px !important;
    margin-bottom: 50px !important;
    background: transparent !important;
    border: none !important;
}







/* Plus / Minus Buttons (Golden Menu Style Odin Text Reg) */
.ow-btn {
    background-color: transparent !important;
    border: none !important;
    cursor: pointer;
    padding: 0 10px !important;
    /* Etwas Abstand links/rechts */
    margin: 0 !important;

    /* SCHRIFTART: NORSE BOLD */
    font-family: 'ITC Odin Con', serif !important;
    font-size: 4.5rem !important;
    /* Schön groß */
    font-weight: 500 !important;
    line-height: 0.8 !important;
    /* Kompakt halten */

    /* DAS GOLDENE DESIGN (Exakt wie Menü & Button) */
    background: linear-gradient(120deg, #e0b75c 0%, #f3d895 40%, #ffd97b 70%, #f3d895 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    /* Fallback Farbe */
    color: #f3d895;

    /* Filter & Transition */
    filter: brightness(1) saturate(1) drop-shadow(0 0 0 rgba(0, 0, 0, 0));
    transition: filter .35s ease, transform 0.2s ease;

    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    will-change: filter;
}

/* HOVER EFFEKT */
.ow-btn:hover {
    /* Hellerer Verlauf */
    background: linear-gradient(120deg, #f3d895 0%, #ffe3a0 40%, #fff0c4 70%, #ffe3a0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    /* Das Leuchten (Glow) */
    filter: brightness(1.06) saturate(1.05) drop-shadow(0 0 6px rgba(255, 230, 160, .5)) drop-shadow(0 0 10px rgba(255, 215, 130, .35));

    /* Zoom */
    transform: scale(1.1);
}








#odin-wizard-qty {
    /* Basis-Styling */
    border: 1px solid #666 !important;
    border-radius: 8px !important;
    background: linear-gradient(120deg, #f5dca0 0%, #ffebb7 40%, #fffbe6 70%, #ffebb7 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    /* Fallback */
    color: #f3d895;
    font-family: 'ITC Odin Con', serif !important;
    font-size: 3rem !important;
    margin: 0 !important;
    font-weight: 400;

    /* GRÖSSE */
    width: 100px !important;
    height: 70px !important;

    /* RESET: Wichtig, damit Flexbox-ähnliches Verhalten durch Padding klappt */
    line-height: normal !important;
    display: inline-block !important;
    vertical-align: middle !important;

    /* DER TRICK: Padding oben/unten nutzen */
    /* Da die Box 70px hoch ist und die Schrift ca. 48px (3rem), */
    /* bleibt ein Rest. Wir verteilen ihn. */
    /* Spiel mit dem ersten Wert (Padding-Top), um es zu schieben! */
    padding: 0 !important;

    /* Horizontal zentrieren */
    text-align: center !important;
    transition: all 0.5s ease-out !important;
    /* Browser-Styles killen */
    -moz-appearance: textfield !important;
    -webkit-appearance: none !important;
    box-sizing: border-box !important;
    /* WICHTIG: Damit Padding in die Height eingerechnet wird */
}





/* 2. Der Fokus-Zustand (Wenn man reinklickt) */
#odin-wizard-qty:focus {
    border-color: #f3d895 !important;
    box-shadow: 0 0 20px rgba(241, 198, 91, 0.6) !important;
    /* Etwas stärkerer Glow */
    outline: none !important;

}






/* Spinner weg */
#odin-wizard-qty::-webkit-outer-spin-button,
#odin-wizard-qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}





/* Der "Sammeln" Button — Pill + Gold Ring Style */
.ow-submit {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 260px !important;
    height: 50px !important;
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
    border-radius: 999px !important;
    position: relative !important;
    overflow: visible !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    font-family: 'ITC Odin Con', serif !important;
    font-size: 1.15rem !important;
    letter-spacing: 0.02em;
    font-weight: 500 !important;
    text-transform: uppercase;
    text-decoration: none !important;
    text-shadow: none !important;
    cursor: pointer;
    transition: filter .35s ease;
    margin: 30px auto 0 auto !important;
}
.ow-submit::before {
    content: '' !important;
    position: absolute !important;
    
    inset: 0 !important;
    border-radius: 999px !important;
    padding: 2px !important;
    background: linear-gradient(120deg, #c5a059, #d4b06a, #f3d895, #ffe3a0, #f3d895, #d4b06a, #c5a059) !important;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
    mask-composite: exclude !important;
    pointer-events: none !important;
}
.ow-submit span,
.ow-submit .odin-btn-text {
    background: linear-gradient(90deg, #ffe298 0%, #fcdcb1 60%, #f7e8b0 100%, #fff6d0 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: none !important;
    filter: drop-shadow(0 1px 0px rgba(0,0,0,0.5)) !important;
}
.ow-submit:hover {
    filter: drop-shadow(0 0 12px rgba(244, 192, 100, 0.5));
}


/* ==========================================================================
   2. HERO CART (Der Warenkorb) - CLEAN LOOK
   ========================================================================== */

.odin-hero-cart {
    max-width: 1400px;
    margin: 0 auto;
    font-family: 'Cinzel', serif;
    color: #e0d0b0;
    padding: 40px 20px;
}

/* 1. ABSTAND ZWISCHEN BILD UND TEXT VERRINGERN */
.ohc-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px !important;
    /* War 80px -> Jetzt viel näher zusammen */
    flex-wrap: wrap;
}

/* LINKS: BILD */
/* 2. RECHTE SEITE BREITER MACHEN */
/* Das Bild bekommt etwas weniger Platz, der Text mehr */
.ohc-left {
    flex: 0.7;
    /* Nimmt nur noch ca. 40% des Platzes */
    text-align: center;
}

.ohc-left img {
    max-height: 650px;
    width: auto;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.8));

}

.ohc-right {
    flex: 1.3;
    /* Nimmt jetzt ca. 60% des Platzes ein -> Breiter! */
    min-width: 300px;
}

.ohc-title {
    font-family: 'ITC Odin Con', serif !important;
    font-weight: normal;
    font-size: 3.5rem;
    color: #f4e7c7;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1;
}

.ohc-subtitle {
    font-size: 1.2rem;
    color: #888;
    margin-bottom: 60px;
    font-style: italic;
    letter-spacing: 1px;
}

/* Tabelle */
.ohc-table {
    width: 100%;
    border-collapse: collapse;
}




/* 3. TABELLEN-SPALTEN ANPASSEN (DAMIT DER TEXT IN EINE ZEILE PASST) */
.ohc-row {
    display: grid;
    /* Wir ändern die Aufteilung:
       Vorher: 4fr 3fr 2fr
       Neu: 6fr (Name) 2fr (Anzahl) 1fr (Preis)
       -> Der Name bekommt den Löwenanteil des Platzes 
    */
    grid-template-columns: 6fr 2fr 1fr !important;
    align-items: center;
    margin-bottom: 20px;
}




/* Header Zeile */
.ohc-row.header span {
    color: #666;
    text-transform: capitalize;
    font-size: 1rem;
    font-family: 'Odin Text Reg', serif;
}




/* Optional: Umbruch hart verhindern */
.col-prod {
    text-align: left;
    white-space: nowrap;
    /* Erzwingt eine Zeile, solange Platz da ist */
}





.col-qty {
    text-align: center;
}

.col-price {
    text-align: right;
}

/* Produkt Zeile */
.ohc-row.item {
    color: #f4e7c7;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 20px;
    margin-bottom: 20px;
    font-weight: normal;
    gap: 60px;
}




/* Der Container für Minus, Zahl, Plus */
.ohc-qty-control {
    display: flex;
    align-items: center;
    justify-content: center;

}




.ohc-btn {
    background: transparent !important;
    border: 2px solid #cfa443 !important;
    /* Goldener Rahmen */
    color: #cfa443 !important;
    /* Goldene Schrift */
    font-family: 'ITC Odin Con', serif !important;
    /* Wikinger Font */
    font-size: 1.8rem !important;
    line-height: 1 !important;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    padding: 0 !important;
    border-radius: 50%;
    /* Rund (wie Münzen) oder lass es weg für eckig */
}





/* Hover Effekt für Buttons */
.ohc-btn:hover {
    background-color: #cfa443 !important;
    color: #000 !important;
    /* Text wird schwarz */
    box-shadow: 0 0 10px rgba(207, 164, 67, 0.6);
}



/* Entfernt die kleinen Standard-Pfeile in Chrome/Safari */
.ohc-input.qty::-webkit-outer-spin-button,
.ohc-input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}





/* Footer / Total */
.ohc-row.footer {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 40px;
    margin-top: 20px;
}

.col-total-label {
    text-align: right;
    color: #888;
    font-size: 1rem;
    line-height: 1.2;
}

.col-total-label small {
    display: block;
    font-size: 0.8rem;
    opacity: 0.6;
}

.col-total-price {
    font-size: 3.5rem;
    color: #fff;
    line-height: 1;
    font-family: 'Odin Text Reg', serif;
    font-weight: normal;
}

/* --- ZUR KASSE BUTTON IM NORSE STYLE --- */




/* Der "Handel Besiegeln" Button — Pill + Gold Ring */
.odin-hero-cart .ohc-checkout-btn {
    all: unset !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 260px !important;
    height: 50px !important;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 999px !important;
    position: relative !important;
    overflow: visible !important;
    font-family: 'ITC Odin Con', serif !important;
    font-size: 1.4rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    text-shadow: none !important;
    cursor: pointer !important;
    transition: filter 0.3s ease !important;
    margin-left: auto;
    margin-right: -40px;
    margin-top: 20px;
}
.odin-hero-cart .ohc-checkout-btn::before {
    content: '' !important;
    position: absolute !important;
    
    inset: 0 !important;
    border-radius: 999px !important;
    padding: 2px !important;
    background: linear-gradient(120deg, #c5a059, #d4b06a, #f3d895, #ffe3a0, #f3d895, #d4b06a, #c5a059) !important;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
    pointer-events: none !important;
}
.odin-hero-cart .ohc-checkout-btn {
    background: linear-gradient(90deg, #ffe298 0%, #fcdcb1 60%, #f7e8b0 100%, #fff6d0 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 1px 0px rgba(0,0,0,0.5)) !important;
}

/* Hover Effekt (Glow) */
.odin-hero-cart .ohc-checkout-btn:hover {
    filter: drop-shadow(0 0 12px rgba(244, 192, 100, 0.6)) drop-shadow(0 0 25px rgba(244, 192, 100, 0.3)) !important;

    /* Zoom */
}




/* --- HOVER EFFEKT (Maus drüber) --- */
.odin-hero-cart .ohc-checkout-btn:hover {
    /* Beim Hover wird der Button etwas größer und der Glow stärker */
    transform: scale(1.05);
    filter: drop-shadow(0 0 15px rgba(241, 198, 91, 0.6));

    /* Optional: Animation beschleunigen beim Drüberfahren */
    animation: goldShine 2s linear infinite;
}






/* Mobile Responsive */
@media (max-width: 900px) {
    .ohc-container {
        flex-direction: column;
        gap: 40px;
    }

    .ohc-title {
        font-size: 2.2rem;
        text-align: center;
    }

    .ohc-subtitle {
        text-align: center;
        margin-bottom: 30px;
    }

    .ohc-row.header {
        display: none;
    }

    .ohc-row.item {
        grid-template-columns: 1fr;
        gap: 15px;
        text-align: center;
        border: none;
    }

    .col-prod,
    .col-qty,
    .col-price {
        text-align: center;
    }

    .ohc-row.footer {
        justify-content: center;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
}


/* ==========================================================================
   3. UTILITIES (WICHTIG: Damit die Inputs sauber aussehen)
   ========================================================================== */

/* Browser Spinner entfernen (Pfeile im Input) */
#odin-wizard-qty::-webkit-outer-spin-button,
#odin-wizard-qty::-webkit-inner-spin-button,
.ohc-input::-webkit-outer-spin-button,
.ohc-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
    display: none !important;
}

#odin-wizard-qty,
.ohc-input {
    -moz-appearance: textfield !important;
    appearance: textfield !important;

}





/* =========================================================
   DYNAMISCHES HORN ICON (COUNTER UNTEN RECHTS IM BILD)
   ========================================================= */

/* 2. Style für das Horn Icon (GRÖSSER: 70px) */
#odin-horn-icon {
    display: inline-block;
    position: relative;

    /* HIER DIE ÄNDERUNG: Größe deutlich erhöht */
    height: 70px !important;
    width: 70px !important;

    margin-left: 20px;
    /* Etwas mehr Abstand zum Nachbarelement */
    text-decoration: none;
    vertical-align: middle;
    transition: transform 0.3s ease;
    /* Weicher Hover-Effekt */
}

/* Das Bild passt sich automatisch an die neue Größe an */
#odin-horn-icon img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    display: block;
}



/* 3. ZÄHLER (Unten Rechts, SEHR GROSS & FETT) - HÖHER GESCHOBEN */
#odin-horn-icon .header-cart-count {
    position: absolute;

    /* Mittig am Horn */
    bottom: -3px;
    right: -8px;
    top: auto;

    /* Größe & Form */
    min-width: 30px;
    height: 30px;
    padding: 0 !important;
    border-radius: 999px;

    /* Text Ausrichtung */
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;

    /* Design */
    background: #ffffff !important;
    color: #BF8139 !important;

    /* Schriftart */
    font-family: 'ITC Odin Con', serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    padding-bottom: 2px !important;
    line-height: 1 !important;

    /* Schatten */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
    z-index: 10;
}


/* =========================================================
   HINTERGRUND-PATTERN (ERZWUNGEN FÜR BE-THEME)
   ========================================================= */



/* 3. Speziell für den WooCommerce Content-Bereich */
body.woocommerce-cart .woocommerce,
body.single-product .product,
body.mcb-background-overlay {
    background: transparent !important;
}

/* Hintergrund auf Single-Posts zurücksetzen */
body.single #Wrapper,
body.single #Content {
    background-color: transparent !important;
    /* Oder die Farbe, die du willst, z.B. #ffffff */
}


#Wrapper,
#Content,
.mfn-popup .mfn-popup-content,
.mfn-off-canvas-sidebar .mfn-off-canvas-content-wrapper,
.mfn-cart-holder,
.mfn-header-login,
#Top_bar .search_wrapper,
#Top_bar .top_bar_right .mfn-live-search-box,
.column_livesearch .mfn-live-search-wrapper,
.column_livesearch .mfn-live-search-box {
    background-color: transparent !important;
}



/* =========================================================
   QUANTITY SELECTOR - NATIVE BETHEME STYLE (Clean & Groß)
   ========================================================= */

/* Container richten */
.ohc-qty-control .quantity {
    display: flex !important;
    align-items: center;
    justify-content: center;
    border: none !important;
    margin: 0 !important;
    background: transparent !important;
}

/* 1. Die Buttons (Plus & Minus) vom Theme umstylen */
/* Wir sprechen die Klassen an, die BeTheme automatisch generiert */
.ohc-qty-control .quantity .minus,
.ohc-qty-control .quantity .plus {
    position: static !important;
    /* Löst sie aus festen Positionen */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    /* Typografie: Groß & Gold */
    font-family: 'ITC Odin Con', serif !important;
    font-size: 2.2rem !important;
    line-height: 0.8 !important;
    color: #cfa443 !important;

    width: auto !important;
    height: auto !important;
    padding: 0 10px !important;
    cursor: pointer;

    /* Text sichtbar machen, falls Theme Icons nutzt */
    text-indent: 0 !important;
    opacity: 1 !important;
}

/* Hover Effekt */
.ohc-qty-control .quantity .minus:hover,
.ohc-qty-control .quantity .plus:hover {
    color: #fff !important;
    transform: scale(1.1);
    background: transparent !important;
}

/* Falls BeTheme Icons (<i>) benutzt, blenden wir die aus */
.ohc-qty-control .quantity .minus i,
.ohc-qty-control .quantity .plus i {
    display: none !important;
}

/* Wir setzen den Text per CSS Content, falls er fehlt */
.ohc-qty-control .quantity .minus::after {
    content: '-' !important;
}

.ohc-qty-control .quantity .plus::after {
    content: '+' !important;
}


/* 2. Die Zahl (Input Feld) */
.ohc-qty-control .quantity input.qty {
    background: transparent !important;
    border: none !important;

    font-family: 'ITC Odin Con', serif !important;
    font-size: 2rem !important;
    color: #ffffff !important;
    font-weight: 400;

    width: 80px !important;
    text-align: center !important;
    padding: 0 !important;
    height: 50px !important;

    -moz-appearance: textfield;
}

/* Chrome Pfeile weg */
.ohc-qty-control .quantity input.qty::-webkit-outer-spin-button,
.ohc-qty-control .quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


/* =========================================================
   HOVER FIX: GOLDENER GLOW (STATT WEISS) & KEIN UNTERSTRICH
   ========================================================= */

/* 1. Basis-Hover für den Link-Container */
.ohc-qty-control .quantity a.quantity-change:hover {
    text-decoration: none !important;
    /* WICHTIG: Entfernt den Unterstrich */
    border: none !important;
    background: transparent !important;
}

/* 2. Der Effekt auf das Plus/Minus Zeichen (::after) */
.ohc-qty-control .quantity a.quantity-change:hover::after {
    /* FARBE BLEIBT GOLD (nicht weiß!) */
    color: #cfa443 !important;

    /* GOLDENER GLOW-EFFEKT (Wie beim Trunk-Style) */
    /* Wir nutzen einen doppelten Schatten für mehr Intensität */
    text-shadow: 0 0 10px rgba(207, 164, 67, 1),
        /* Kern-Glow */
        0 0 20px rgba(235, 208, 120, 0.6) !important;
    /* Weiter Schein */

    /* Sicherstellen, dass auch hier kein Unterstrich ist */
    text-decoration: none !important;

    /* Leichter Zoom für Interaktion */
    transform: scale(1.1);
    transition: all 0.2s ease;
}





/* --- 1. ANTI-BLINK (Verhindert grauen Schleier) --- */
.blockUI.blockOverlay,
.woocommerce-cart-form.processing .blockUI {
    display: none !important;
    opacity: 0 !important;
}

.woocommerce-cart-form,
.odin-hero-cart,
.col-total-price,
.header-cart-count {
    opacity: 1 !important;
    /* Bleibt immer voll sichtbar */
    transition: opacity 0.2s ease;
    /* Wenn überhaupt, nur sanft */
}

/* --- 2. STYLE FIXES (Gold & Font) --- */
/* Zähler Zahl */
.ohc-qty-control .qty {
    font-family: 'ITC Odin Con', serif !important;
    color: #c5a059 !important;
    /* Gold */
    font-size: 2rem !important;
    background: transparent !important;
    border: none !important;
    font-weight: 400;
    text-align: center;
    width: 60px;
    -moz-appearance: textfield;
}

/* Plus / Minus */
.ohc-qty-control .plus,
.ohc-qty-control .minus {
    font-family: 'ITC Odin Con', serif !important;
    color: #c5a059 !important;
    font-size: 2.5rem !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer;
    line-height: 1;
    padding: 0 10px;
}

/* Chrome Spinner weg */
.ohc-qty-control .qty::-webkit-outer-spin-button,
.ohc-qty-control .qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}




/* Container für die beiden Buttons */
.odin-cart-actions {
    display: flex;
    justify-content: flex-end;
    /* Rechtsbündig */
    align-items: center;
    gap: 30px;
    /* Platz dazwischen */
    margin-top: 40px;
}

/* Der neue "Lager entleeren" Button */
.odin-clear-btn {
    background: transparent !important;
    border: none !important;
    color: #888 !important;
    /* Dezentes Grau/Braun */
    font-family: 'ITC Odin Con', serif !important;
    /* Oder Odin Text Reg, wie du magst */
    font-size: 1.2rem !important;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.3s;
    text-decoration: underline;
    /* Damit man sieht, dass es klickbar ist */
    text-decoration-color: rgba(136, 136, 136, 0.3);
}

.odin-clear-btn:hover {
    color: #c0392b !important;
    /* Rot beim Hover (Warnung!) */
    text-decoration-color: #c0392b;
}

/* Anpassung für Mobile */
@media (max-width: 768px) {
    .odin-cart-actions {
        flex-direction: column-reverse;
        /* "Entleeren" unter "Besiegeln" */
        gap: 20px;
    }
}




/* Die Tabellen-Zelle für den Preis */
.odin-price-col {
    display: flex !important;
    align-items: center;
    /* Vertikal mittig */
    justify-content: flex-end;
    /* Rechtsbündig (oder center, wenn du willst) */
    height: 100%;
    /* Volle Höhe der Zeile nutzen */
    font-family: 'Odin Text Reg', serif !important;
    /* Oder Odin Text Reg, wie du magst */
    padding-top: 15px;


}









/* Der Preis-Stapel (Container) */
.price-stack {
    margin-top: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    /* Rechtsbündig */
}

/* --- ANGEBOTS-STYLING --- */
/* Der neue, rote Angebotspreis */
.odin-sale-price {
    color: #f4e7c7 !important;
    /* Wikinger-Rot */

    font-size: 1.2em;
    /* Groß */
    text-shadow: 0 0 5px rgba(192, 57, 43, 0.4);
    line-height: 1.1;
}

/* Der alte, durchgestrichene Preis */
.odin-regular-price {
    text-decoration: line-through !important;
    opacity: 0.6;
    font-size: 0.75em;
    /* Klein */
    color: #888;
    /* Grau */
    margin-top: 2px;
    line-height: 1;
}

/* --- STANDARD-STYLING (Wenn kein Angebot) --- */
/* Der ganz normale Preis */
.odin-std-price {
    color: #f4e7c7 !important;
    /* Dein Odin-Gold */
    font-size: 2rem;
    /* Genauso groß wie der Angebotspreis */
    line-height: 1.1;
    font-family: 'Odin Text Reg', serif !important;
    font-weight: normal;
}




/* 1. DIE ZEILE SELBST (Grid oder Flexbox) */
.ohc-row.item {
    display: flex !important;
    /* Flexbox für beste Kontrolle */
    align-items: center !important;
    /* Zwingt ALLES vertikal in die Mitte */
    justify-content: space-between;
    /* Verteilt den Platz */
    padding: 10px 0 0px 0;
    /* Luft oben/unten */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    height: auto;
    /* Höhe darf sich anpassen */
    min-height: 80px;
    /* Mindesthöhe für gute Optik */
}

/* 2. DIE SPALTEN (Container) */
/* Wir geben ihnen feste Breiten-Verhältnisse, damit nichts springt */
.col-prod {
    flex: 2;
    /* Nimmt den meisten Platz (doppelt so viel wie der Rest) */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Inhalt vertikal mittig im Container */
    align-items: flex-start;
    /* Text linksbündig */
    gap: 15px;
}

.col-qty {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Inhalt vertikal mittig */
    align-items: center;
    /* Zähler mittig */
    gap: 0px;
}

.col-price {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Inhalt vertikal mittig */
    align-items: flex-end;
    /* Preis rechtsbündig */
    gap: 10px;
}

/* 3. FEINJUSTIERUNG DER INHALTE */

/* Produktname: Muss vertikal sauber sitzen */
.prod-name-text {
    font-family: 'ITC Odin Con', serif !important;
    font-size: 2rem !important;
    margin-bottom: 8px;
    /* Kleiner Ausgleich zum Label */
    line-height: 1.2;
    font-weight: normal;
    letter-spacing: 0.03em;
    margin-top: 10px;
    text-transform: normal !important;
}

/* Zähler: Der Container muss mittig sein */
.ohc-qty-control {
    margin-top: 5px;
    /* Kleiner Ausgleich zum Label */
    display: flex;
    align-items: center;
}

/* Der unsichtbare Platzhalter */
.odin-price-placeholder {
    font-size: 0.75em;
    /* Exakt selbe Größe wie .odin-regular-price */
    margin-top: 2px;
    line-height: 1;
    opacity: 0;
    /* Komplett durchsichtig */
    visibility: hidden;
    /* Unsichtbar, aber nimmt Platz weg (falls display:block) */
    /* Alternative, falls visibility den Platz killt: */
    display: block;
    color: transparent;
    user-select: none;
}

/* Sicherstellen, dass .price-stack immer gleich ausgerichtet ist */
.price-stack {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Mittig im verfügbaren Platz */
    min-height: 45px;
    /* Mindesthöhe erzwingen, damit es nie springt */
}

/* 4. DIE MINI-LABELS (Fixierte Position) */
/* Damit die Labels nicht "im Weg" sind, positionieren wir sie absolut oder lassen sie im Flow, 
   aber stellen sicher, dass sie die Mitte nicht kaputt machen. */
.tiny-label {
    font-size: 10px;
    color: #666;
    margin-bottom: 0;
    /* Kein Margin nach unten, wir regeln das über den Inhalt */
    line-height: 1;
    height: 12px;
    /* Feste Höhe reservieren */
}







/* =========================================================
   TEXT SELECTION (Markierung sichtbar machen)
   ========================================================= */

/* Für alle Browser (Chrome, Safari, Edge, etc.) */
::selection {
    background: rgba(172, 127, 42, 0.1) !important;
    /* Dein Gold-Ton */
    color: rgba(172, 127, 42, 0.3) !important;
    /* Schwarzer Text (bester Kontrast zu Gold) */
    text-shadow: none !important;
    /* Schatten entfernen für bessere Lesbarkeit */

}

/* Speziell für Firefox */
::-moz-selection {
    background: rgba(172, 127, 42, 0.1) !important;
    /* Dein Gold-Ton */
    color: rgba(172, 127, 42, 0.3) !important;
    /* Schwarzer Text (bester Kontrast zu Gold) */
    text-shadow: none !important;

}

/* Optional: Falls Inputs sich anders verhalten sollen (meist reicht das obere) */
input::selection,
textarea::selection {
    color: rgba(255, 255, 255, 0.5) !important;
    /* Schwarzer Text (bester Kontrast zu Gold) */
    background: rgba(172, 127, 42, 0.1) !important;
    /* Dein Gold-Ton */

}




/* =========================================================
   HORN FILL TEXT EMPTY
   ========================================================= */



/* Wir wenden den Effekt auf die Klasse UND alle Kinder-Elemente (h1-h6, p, span) an */
.horn_fill_txt,
.horn_fill_txt h1,
.horn_fill_txt h2,
.horn_fill_txt h3,
.horn_fill_txt p,
.horn_fill_txt span {




    /* Die Fallback-Farbe (falls Bild nicht lädt) */
    color: #d49a48 !important;
    /* Fallback Farbe */
    background-image:
        linear-gradient(120deg,
            #f6d7a7 0%, #e6a85b 20%, #d98b3a 40%, #f6d7a7 60%, #e8a44d 80%, #f5c477 100%),
        url('/wp-content/uploads/2025/11/font_bg3.png');
    /* WICHTIG: Stelle sicher, dass die URL in deinem Theme existiert */
    background-size: 400% 400%, cover;
    background-blend-mode: overlay;
    background-position: 0% 50%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: odinMetalFlow 45s ease-in-out infinite;
    filter: brightness(1.1) saturate(1.1) drop-shadow(0 0 3px rgba(255, 200, 110, 0.15));
    /* ============================== */
}




/* =========================================================
   AGE GATE HINTERGRUND (Pattern Fix)
   ========================================================= */

.bg_age_over {
    /* 1. Dunkle Basis */
    background-color: #0d0905 !important;

    /* 2. Das Bild + Vignette (Schatten am Rand für Tiefe) */
    background-image:
        radial-gradient(circle at center, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.95) 100%),
        url('/wp-content/themes/betheme-child/img/card_odin_game_bg_pattern_s.jpg') !important;

    /* 3. WICHTIG: Die Größe */
    /* Hier stellen wir ein, wie groß das Muster ist. */
    /* 400px ist ein guter Wert. Wenn du es feiner willst, nimm 250px. */
    background-size: 400px auto !important;

    /* 4. Kacheln aktivieren (statt Strecken) */
    background-repeat: repeat !important;
    background-position: center top !important;

    /* Sicherstellen, dass keine weißen Ränder entstehen */
    border: none !important;
    box-shadow: none !important;
}

/* FIX ENTFERNT - Machte Age Gate transparent!
   Der äußere Rahmen braucht KEINEN transparenten Background!
#odin-age-gate {
    background: transparent !important;
}
*/





/* 2. MOBILE (Handys) - Alles unter 767px */
@media (max-width: 767px) {

    /* Umschalten auf Block-Layout (Untereinander) */
    .ohc-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
    }

    .ohc-left {
        width: 100% !important;
        text-align: center !important;
    }

    .ohc-left img {
        max-height: 270px !important;
        width: auto !important;
        object-fit: contain !important;
    }

    /* Tabelle Mobil */
    .ohc-row.item {

        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        text-align: center !important;
    }

    .col-prod,
    .col-qty,
    .col-price {
        width: 100% !important;
        align-items: center !important;
        text-align: center !important;
    }

    .ohc-row.footer {
        flex-direction: column !important;
        gap: 20px !important;
    }

    .odin-cart-actions {
        flex-direction: column-reverse !important;
    }

    .odin-hero-cart .ohc-checkout-btn {
        width: 100% !important;
        margin: 0 auto !important;
    }

    /* Wizard Mobile - jetzt in edits.css mit clamp */
}




/* 1. Grundeinstellung für den Menü-Container */
.mfn-header-tmpl section.mcb-section-f821ed58e {
    background: transparent !important;
    /* Hintergrund erst mal durchsichtig machen */
    position: relative !important;
    /* Wichtig für die Positionierung der Ebene */
    z-index: 200;
    /* Sicherstellen, dass das Menü oben liegt */
}

/* 2. Die "Hintergrund-Ebene" (Das Gradient) vorbereiten */
.mfn-header-tmpl section.mcb-section-f821ed58e::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* Dein Gradient: Oben Schwarz (Deckkraft 1) -> Unten Schwarz (Deckkraft 0) */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) -30%, rgba(26, 26, 26, 0) 100%);

    /* Startzustand: Unsichtbar */
    opacity: 0;

    /* Die Animation: Dauer 0.5s */
    transition: opacity 0.5s ease-in-out;

    /* Wichtig: Hinter den Text legen */
    z-index: -1;
    pointer-events: none;
    /* Klicks gehen durch */
}

/* 3. Wenn gescrollt wird: Hintergrund sichtbar machen */
.mfn-header-scrolled .mfn-header-tmpl section.mcb-section-f821ed58e::before {
    opacity: 1;
    /* Jetzt wird NUR der Gradient sichtbar */
}



/* =========================================================
   CURRENT MENU ICON NOT CLICKABLE / NOT SELECT TXT ITEMS
   ========================================================= */

/* =========================================================
   FIX: MENÜ MAUSZEIGER (HAND) ERZWINGEN
   ========================================================= */
.current-menu-item>a,
.current_page_item>a,
.menu-item>a {
    cursor: pointer !important;
    /* Erzwingt die Hand */
    pointer-events: auto !important;
    /* Erzwingt Klickbarkeit */
}

/* Verhindert das Markieren/Selektieren im gesamten Header */
#mfn-header-template {
    -webkit-user-select: none;
    /* Chrome, Safari, Opera */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Standard */
}

/* Verhindert zusätzlich das "Rausziehen" von Bildern (Geisterbilder) */
#mfn-header-template img {
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: none;
    /* Verhindert Rechtsklick/Speichern auf Deko-Icons */
}

/* Aber: Links auf dem Logo und Horn müssen klickbar bleiben! */
#mfn-header-template a,
#mfn-header-template button,
#viking-wave-trigger {
    pointer-events: auto !important;
}



/* =========================================
   ODIN DARK MODE FÜR STANDARD WOOCOMMERCE
   ========================================= */

/* 1. HINTERGRUND & TEXTFARBEN */
body,
.woocommerce-checkout {
    color: #FDD981 !important;
    font-family: 'ITC Odin Con', serif !important;
    /* Hintergrundbild fixieren, damit es nicht scrollt */
    background-attachment: fixed !important;
}
/* iOS: background-attachment:fixed ist komplett kaputt auf Safari/Chrome iPad
   Verursacht Layout-Bugs (Footer springt nach oben, Elemente verschieben sich)
   Doppelte Erkennung: @supports für Safari, @media für Chrome auf iPad */
@supports (-webkit-touch-callout: none) {
    body,
    .woocommerce-checkout {
        background-attachment: scroll !important;
    }
    #Side_slide {
        background-attachment: scroll !important;
    }
}
/* Fallback: Touch-Geräte generell (iPad Chrome matcht @supports nicht immer) */
@media (hover: none) and (pointer: coarse) {
    body,
    .woocommerce-checkout {
        background-attachment: scroll !important;
    }
    #Side_slide {
        background-attachment: scroll !important;
    }
    #odin-custom-footer {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        float: none !important;
    }
}



/* 2. EINGABEFELDER (Weiß entfernen!) */
.woocommerce input.input-text,
.woocommerce textarea,
.woocommerce select,
.select2-container .select2-selection--single {
    background-color: rgba(0, 0, 0, 0.6) !important;
    /* Dunkel transparent */
    border: 1px solid #FDD981 !important;
    /* Goldener Rand */
    color: #FDD981 !important;
    border-radius: 4px !important;
    padding: 12px !important;
}

/* Placeholder Text (das Grau heller machen oder gold) */
::placeholder {
    color: rgba(253, 217, 129, 0.5) !important;
    opacity: 1;
}

/* Dropdown-Menüs (Land auswählen) */
.select2-dropdown {
    background-color: #0d0905 !important;
    border: 1px solid #FDD981 !important;
    color: #FDD981 !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #FDD981 !important;
    color: #000 !important;
}

/* 3. BESTELLÜBERSICHT (Der "hässliche" Kasten rechts) */
.woocommerce-checkout-review-order {
    background: transparent !important;
}

/* Tabelle komplett transparent machen */
.woocommerce-checkout-review-order table,
.woocommerce-checkout-review-order th,
.woocommerce-checkout-review-order td,
.woocommerce-checkout-review-order tr {
    background-color: rgba(0, 0, 0, 0.4) !important;
    /* Leicht abgedunkelt, nicht weiß! */
    border: 1px solid rgba(253, 217, 129, 0.2) !important;
    color: #FDD981 !important;
}

/* Speziell für das Produktbild Zeile */
.woocommerce table.shop_table tbody th,
.woocommerce table.shop_table tfoot td,
.woocommerce table.shop_table tfoot th {
    border-top: 1px solid rgba(253, 217, 129, 0.2) !important;
}

/* Das Produktbild selbst */
.woocommerce-checkout-review-order img {
    background: transparent !important;
    border: none !important;
    width: 60px !important;
    /* Etwas größer */
}

/* 4. PAYMENT BOXEN (Zahlungsarten) */
#payment {
    background: transparent !important;
    border-radius: 0 !important;
}

#payment ul.payment_methods {
    border: none !important;
    padding: 0 !important;
}

#payment li.payment_method {
    background-color: rgba(20, 20, 20, 0.8) !important;
    /* Fast schwarz */
    border: 1px solid rgba(253, 217, 129, 0.4) !important;
    margin-bottom: 15px !important;
    border-radius: 5px !important;
    padding: 15px !important;
}

/* Text der Zahlungsarten */
#payment li.payment_method label {
    color: #FDD981 !important;
    font-size: 1.2rem !important;
    margin-left: 10px;
}

/* Info-Text (z.B. "Überweisung auf unser Konto...") */
#payment div.payment_box {
    background-color: transparent !important;
    color: #ccc !important;
}

#payment div.payment_box::before {
    display: none !important;
}

/* Das kleine Dreieck entfernen */

/* 5. BUTTONS */
/* Der "Jetzt Kaufen" Button — Pill + Gold Ring */
#place_order {
    all: unset !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 280px !important;
    height: 50px !important;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 999px !important;
    position: relative !important;
    overflow: visible !important;
    font-family: 'ITC Odin Con', serif !important;
    font-size: 1.6rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    text-shadow: none !important;
    cursor: pointer !important;
    transition: filter 0.3s ease !important;
    margin-top: 20px !important;
    background: linear-gradient(90deg, #ffe298 0%, #fcdcb1 60%, #f7e8b0 100%, #fff6d0 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 1px 0px rgba(0,0,0,0.5)) !important;
}
#place_order::before {
    content: '' !important;
    position: absolute !important;
    
    inset: 0 !important;
    border-radius: 999px !important;
    padding: 2px !important;
    background: linear-gradient(120deg, #c5a059, #d4b06a, #f3d895, #ffe3a0, #f3d895, #d4b06a, #c5a059) !important;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
    pointer-events: none !important;
}
#place_order:hover {
    filter: drop-shadow(0 0 12px rgba(244, 192, 100, 0.6)) drop-shadow(0 0 25px rgba(244, 192, 100, 0.3)) !important;
}

/* Gutschein Button anpassen */
button[name="apply_coupon"] {
    background: transparent !important;
    border: 1px solid #FDD981 !important;
    color: #FDD981 !important;
    font-family: 'ITC Odin Con', serif !important;
}

button[name="apply_coupon"]:hover {
    background: #FDD981 !important;
    color: #000 !important;
}

/* 6. LAYOUT FIXES (Breite anpassen) */
.col2-set {
    width: 100% !important;
    float: none !important;
    margin-bottom: 40px !important;
}

#order_review_heading,
#order_review {
    width: 100% !important;
    float: none !important;
}



/* =========================================
   ODIN AGE GATE FADE ANIMATION (Keyframes)
   ========================================= */

/* 1. Wir definieren die Animation: Von 100% Sichtbar zu 0% */
@keyframes odinFadeEffect {
    0% {
        opacity: 1;
        visibility: visible;
    }

    99% {
        opacity: 0;
        visibility: visible;
    }

    100% {
        opacity: 0;
        visibility: hidden;
    }
}

/* 2. Diese Klasse wird von deinem JS hinzugefügt (.odin-out) */
#odin-age-gate.odin-out,
.mfn-popup-overlay.odin-overlay-out {
    /* Spiele die Animation über 1.5 Sekunden ab */
    animation: odinFadeEffect 2.5s forwards !important;

    /* WICHTIG: Zwinge das Popup, während der Animation sichtbar zu bleiben */
    /* Das verhindert, dass es sofort "wegspringt" */
    display: block !important;
    visibility: visible !important;

    /* Verhindert, dass man während des Ausblendens nochmal klickt */
    pointer-events: none !important;
}

/* Optional: Scrollen verhindern, solange das Popup da ist */
html.age-locked,
body.age-locked {
    overflow: hidden !important;
}


/* =========================================
   FIX: VERHINDERT DAS SEITEN-SPRINGEN
   ========================================= */

html {
    /* Reserviert immer den Platz für den Scrollbalken rechts.
       Dadurch bewegt sich der Inhalt nicht, wenn der Balken erscheint. */
    scrollbar-gutter: stable;
}

/* Optional: Damit es auch während des Popups sicher greift */
html.age-locked,
body.age-locked {
    scrollbar-gutter: stable !important;
}






/* =========================================
   HINTERGRUND-PATTERN FÜR DIE KASSE (TRUHE)
   ========================================= */

/* NEU: Mobile Menu (Side Slide) auch anpassen */
#Side_slide {
    background-color: #0d0905 !important;
    background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.95) 100%), url('/wp-content/uploads/2025/11/bg_odin_web_16.jpg') !important;
    background-repeat: repeat !important;
    background-size: 400px !important;
    background-attachment: fixed !important;
    background-position: top left !important;
}



/* 2. WICHTIG: Weiße Container transparent machen */
/* Standard-Themes legen oft eine weiße Fläche über den Hintergrund. Das entfernen wir hiermit: */
.woocommerce-checkout #page,
.woocommerce-checkout #content,
.woocommerce-checkout .entry-content,
.woocommerce-checkout .site-content,
.woocommerce-checkout .wrapper,
.woocommerce-checkout .woocommerce {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}


/* =========================================
   FIX: BIER BILD GRÖSSE KONTROLLIEREN
   ========================================= */

/* Das Bild in der Tabelle ansprechen */
.woocommerce-checkout .product-thumbnail img,
.woocommerce-checkout td.product-thumbnail img {
    max-height: 120px !important;
    /* Maximale Höhe festlegen */
    width: auto !important;
    /* Breite passt sich automatisch an */
    object-fit: contain !important;
    /* Bild darf nicht verzerrt werden */
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
}

/* Optional: Spaltenbreite etwas anpassen, damit das hohe Bier Platz hat */
.woocommerce-checkout .product-thumbnail {
    width: 90px !important;
    text-align: center !important;
}





/* =========================================
   ODIN FLOATING LABELS (Formular Design)
   ========================================= */


/* 2. Das Label (Der Text) - Startposition: Mitten im Feld */
.woocommerce-checkout .form-row label {
    position: absolute !important;
    left: 15px !important;
    top: 18px !important;
    /* Mitte */
    font-family: 'ITC Odin Con', serif !important;
    font-size: 1.4rem !important;
    color: #888 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    pointer-events: none !important;
    /* Klicks gehen durch das Label durch ins Feld */
    transition: all 0.2s ease-out !important;
    z-index: 10 !important;
    line-height: 1 !important;
    cursor: text !important;
    width: auto !important;
}

/* 3. Das Input-Feld selbst */
.woocommerce-checkout input.input-text,
.woocommerce-checkout textarea {
    background-color: rgba(0, 0, 0, 0.6) !important;
    border: 1px solid #555 !important;
    border-radius: 8px !important;
    color: #FDD981 !important;
    font-family: 'ITC Odin Con', serif !important;
    font-size: 1.4rem !important;
    padding: 25px 15px 8px 15px !important;
    /* Viel Platz oben für das Label */
    height: 60px !important;
    /* Feste Höhe */
    width: 100% !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Textarea (Nachricht) höher machen */
.woocommerce-checkout textarea {
    height: 150px !important;
    padding-top: 25px !important;
}

/* 4. DER EFFEKT: Wenn Fokus oder Text drin ist (gesteuert durch JS Klasse 'odin-focused') */
.woocommerce-checkout .form-row.odin-focused label,
.woocommerce-checkout .form-row.woocommerce-validated label {
    top: 8px !important;
    /* Nach oben rutschen */
    font-size: 0.9rem !important;
    /* Kleiner werden */
    color: #c5a059 !important;
    /* Golden werden */
}

/* Input Rahmen leuchtet golden bei Fokus */
.woocommerce-checkout .form-row.odin-focused input.input-text,
.woocommerce-checkout .form-row.odin-focused textarea {
    border-color: #FDD981 !important;
    background: rgba(253, 217, 129, 0.05) !important;
}

/* 5. Dropdown (Land) Sonderanpassung */
.select2-container .select2-selection--single {
    height: 60px !important;
    padding-top: 20px !important;
    background-color: rgba(0, 0, 0, 0.6) !important;
    border: 1px solid #555 !important;
    border-radius: 8px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #FDD981 !important;
    line-height: normal !important;
    padding-left: 15px !important;
}

/* Label beim Dropdown immer oben fixieren */
.woocommerce-checkout .form-row#billing_country_field label {
    top: 8px !important;
    font-size: 0.9rem !important;
    color: #c5a059 !important;
}

/* Optional: Pflichtfeld-Sternchen verstecken oder anpassen */
.required {
    display: none !important;
}

/* Oder: .required { color: #b22; } */


















/* =========================================
   ODIN CHECKOUT: FINAL CLEAN & FIX
   ========================================= */

/* -----------------------------------------
   1. HINTERGRUND & BASIS
   ----------------------------------------- */
body,
.woocommerce-checkout {
    color: #FDD981 !important;
    font-family: 'ITC Odin Con', serif !important;
    background-color: transparent !important;
    background-image: none !important;
}



/* -----------------------------------------
   2. EINGABEFELDER (Der "Doppelter Text" Fix)
   ----------------------------------------- */



/* WICHTIG: Die Standard-Platzhalter (z.B. "Straßenname...") UNSICHTBAR machen */
.woocommerce-checkout input::placeholder,
.woocommerce-checkout textarea::placeholder {
    color: transparent !important;
    opacity: 0 !important;
}

/* Das Feld selbst */
.woocommerce input.input-text,
.woocommerce textarea,
.woocommerce select,
.select2-container .select2-selection--single {
    appearance: none !important;
    background-color: rgba(0, 0, 0, 0.6) !important;
    /* Dunkel */
    border: 1px solid #555 !important;
    border-radius: 8px !important;
    color: #FDD981 !important;
    /* Dein Gold */
    font-family: 'ITC Odin Con', serif !important;
    font-size: 1.3rem !important;
    padding: 25px 15px 8px 15px !important;
    /* Platz oben für Label */
    height: 60px !important;
    width: 100% !important;
    box-shadow: none !important;
    transition: all 0.2s ease;
    outline: none !important;
}

/* Fokus-Effekt (Goldener Rahmen) */
.woocommerce input.input-text:focus,
.woocommerce textarea:focus,
.select2-container--open .select2-selection--single,
.form-row.odin-focused input.input-text {
    border-color: #FDD981 !important;
    background: rgba(253, 217, 129, 0.05) !important;
}

/* Das Label (Der Text "VORNAME" etc.) */
.woocommerce-checkout .form-row label {
    position: absolute !important;
    left: 15px !important;
    top: 20px !important;
    /* Startet in der Mitte */
    font-family: 'ITC Odin Con', serif !important;
    font-size: 1.3rem !important;
    color: #888 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    pointer-events: none !important;
    transition: all 0.2s ease-out !important;
    z-index: 10 !important;
    line-height: 1 !important;
}

/* Wenn Fokus oder Text drin ist: Nach oben schieben & klein machen */
.woocommerce-checkout .form-row.odin-focused label,
.woocommerce-checkout .form-row.woocommerce-validated label {
    top: 8px !important;
    font-size: 0.8rem !important;
    color: #c5a059 !important;
}

/* Dropdown Fixes */
.select2-container .select2-selection--single {
    padding-top: 22px !important;
    /* Text tiefer setzen */
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #FDD981 !important;
    padding-left: 0 !important;
    padding-top: 0;
}

/* Label bei Dropdowns immer oben */
.woocommerce-checkout .form-row#billing_country_field label {
    top: 8px !important;
    font-size: 0.8rem !important;
    color: #c5a059 !important;
}

/* =========================================
   ODIN CHECKOUT: REPARATUR (Floating Labels + Clean AGB)
   ========================================= */



/* -----------------------------------------
   2. EINGABEFELDER (NUR TEXTFELDER!)
   ----------------------------------------- */

/* Container für Floating Label */
.woocommerce-checkout .form-row {
    position: relative !important;
    margin-bottom: 17px !important;
    padding-top: 0 !important;
    /* Reset */
}

/* WICHTIG: Platzhalter im Feld unsichtbar machen (damit sich nix überlappt) */
.woocommerce-checkout input::placeholder,
.woocommerce-checkout textarea::placeholder {
    color: transparent !important;
    opacity: 0 !important;
}

/* WICHTIG: Wir zielen jetzt NUR auf Text-Inputs, nicht auf alles! */
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="password"],
.woocommerce-checkout textarea,
.select2-container .select2-selection--single {
    appearance: none !important;
    background-color: rgba(0, 0, 0, 0.6) !important;
    border: 1px solid #555 !important;
    border-radius: 8px !important;
    color: #FDD981 !important;
    font-family: 'ITC Odin Con', serif !important;
    font-size: 1.3rem !important;
    padding: 25px 15px 8px 15px !important;
    /* Platz oben für Label */
    height: 60px !important;
    width: 100% !important;
    box-shadow: none !important;
    outline: none !important;
    transition: all 0.2s ease;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border-top: 1px solid #555 !important;
    border-left: 1px solid #555 !important;
    border-right: 1px solid #555 !important;
    border-bottom: 0 !important;

    border-top-right-radius: 8px !important;
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.select2-results {
    background-color: black;
    border-top: 0 !important;
    border-left: 1px solid #555 !important;
    border-right: 1px solid #555 !important;
    border-bottom: 1px solid #555 !important;

    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}

.select2-results__option {
    padding: 6px 12px !important;
}

.mcb-section .mcb-wrap .mcb-item-e4a351da form .woocommerce-checkout-review-order h4 {
    color: #bf8139 !important;
    font-size: 36px !important;
    font-family: 'ITC Odin Con', serif !important;
    text-align: left !important;

}

/* width */
.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar {
    width: 7px;
}

/* Track */
.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-track {
    /* box-shadow: inset 0 0 5px grey; */
    border-radius: 10px;
}

/* Handle */
.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-thumb {
    background: #FDD981;
    border-radius: 10px;
}

.woocommerce-additional-fields #order_comments_field textarea.input-text::-webkit-scrollbar {
    width: 7px;
}

.woocommerce-additional-fields #order_comments_field textarea.input-text::-webkit-scrollbar-track {
    border-radius: 10px;
}

.woocommerce-additional-fields #order_comments_field textarea.input-text::-webkit-scrollbar-thumb {
    background: #fdda8100;
    border-radius: 10px;
}

.required_field::after {
    content: "*";
    width: 3px;
    height: 3px;
    font-size: 8px;
    position: absolute;
    background-color: rgb(152, 75, 75);
    ;
    border-radius: 50p;
}

.woocommerce .woocommerce-checkout-review-order {
    padding: 0 !important;
}

.woocommerce-checkout #payment ul.payment_methods li.active-payment {
    border-color: #FDD981 !important;
    background: rgba(253, 217, 129, 0.05) !important;
}

/* Fokus-Effekt nur für diese Felder */
.woocommerce-checkout input:focus,
.woocommerce-checkout textarea:focus,
.form-row.odin-focused input {
    border-color: #FDD981 !important;
    background: rgba(253, 217, 129, 0.05) !important;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method .mfn-payment-check {
    background-color: #FDD981 !important;
}

.wc_payment_method {
    border: 1px solid #555 !important;
    background-color: rgba(0, 0, 0, 0.6) !important;
    padding: 15px !important;
}

.woocommerce-checkout #payment ul.payment_methods li label {
    font-size: 24px;
    font-family: 'ITC Odin Con', serif !important;
    line-height: 30px;
}

.woocommerce-checkout #payment ul.payment_methods li label img {
    display: none;
}

.payment_box #wc-ppcp-credit-card-gateway-cc-form p label {
    font-size: 0.8rem !important;
    font-family: 'ITC Odin Con', serif !important;
    line-height: 10px !important;
}

ul.wc_payment_methods.payment_methods.methods {
    display: grid;
    grid-template-columns: 1fr;
    /* default = single column */
    gap: 8px;
    /* optional */
}

/* 1st li full width */
ul.wc_payment_methods.payment_methods.methods>li:first-child {
    grid-column: 1 / -1;
}

/* Last li full width */
ul.wc_payment_methods.payment_methods.methods>li:last-child {
    grid-column: 1 / -1;
}

/* Middle 3 li items (2nd, 3rd, 4th) → 3 columns */
ul.wc_payment_methods.payment_methods.methods>li:nth-child(2),
ul.wc_payment_methods.payment_methods.methods>li:nth-child(3),
ul.wc_payment_methods.payment_methods.methods>li:nth-child(4) {
    grid-column: auto;
    /* allow them to follow the grid */
}

/* Switch grid to 3 columns for the middle area */
@media (min-width: 0px) {
    ul.wc_payment_methods.payment_methods.methods {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Keep 1st and last full width even in 3-col grid */
    ul.wc_payment_methods.payment_methods.methods>li:first-child,
    ul.wc_payment_methods.payment_methods.methods>li:last-child {
        grid-column: 1 / -1;
    }
}


/* -----------------------------------------
   3. FLOATING LABELS (Der schwebende Text)
   ----------------------------------------- */

/* Standard Position (Mitte) */
.woocommerce-checkout .form-row label {
    position: absolute !important;
    left: 15px !important;
    top: 20px !important;
    font-family: 'ITC Odin Con', serif !important;
    font-size: 1.3rem !important;
    color: #888 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    pointer-events: none !important;
    transition: all 0.2s ease-out !important;
    z-index: 10 !important;
    line-height: 1 !important;
    width: auto !important;
}

/* Wenn Fokus oder Text drin ist: Nach oben schieben */
.woocommerce-checkout .form-row.odin-focused label,
.woocommerce-checkout .form-row.woocommerce-validated label {
    top: 8px !important;
    font-size: 0.8rem !important;
    color: #c5a059 !important;
}

/* Dropdown (Land) Label immer oben */
.woocommerce-checkout .form-row#billing_country_field label {
    top: 8px !important;
    font-size: 0.8rem !important;
    color: #c5a059 !important;
}
















/* =========================================
   ODIN CHECKOUT: FINAL COLOR MATCH
   ========================================= */
.woocommerce-checkout h3 {
    font-family: 'ITC Odin Con', serif !important;
}

.woocommerce-form-coupon-toggle .woocommerce-info {
    border: none !important;
}

#coupon_code {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.woocommerce form.checkout_coupon {
    width: 50% !important;
    margin: 0 auto !important;
}

.checkout_coupon .button {
    padding: 15px;
    border-radius: 8px;
}

.select2-container {
    width: auto;
}

.select2-container .select2-dropdown {
    border: none !important;
}

.select2-search--dropdown {
    padding: 0 !important;
    margin-top: 10px !important;
    border-bottom: 1px solid #555;
}

.select2-dropdown {
    background-color: transparent !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: black !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    background-color: black !important;
}

.select2-container--default .select2-results>.select2-results__options {
    max-height: 265px !important;
    padding-right: 5px;

}



/* Scrollbalken */
::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
    background: transparent !important;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3) !important;
    border-radius: 3px !important;
}

::-webkit-scrollbar-thumb {
    background: rgba(197, 160, 89, 0.3) !important;
    border-radius: 3px !important;
}

* {
    scrollbar-color: rgba(197, 160, 89, 0.3) rgba(0, 0, 0, 0.3) !important;
    scrollbar-width: thin !important;
}





/* -----------------------------------------
   2. EINGABEFELDER (Links)
   ----------------------------------------- */
.woocommerce-checkout .col2-set .form-row {
    position: relative !important;
    margin-bottom: 25px !important;
}

/* Platzhalter verstecken */
.woocommerce-checkout input::placeholder,
.woocommerce-checkout textarea::placeholder {
    color: transparent !important;
    opacity: 0 !important;
}

/* Input Design */
.woocommerce-checkout .col2-set input[type="text"],
.woocommerce-checkout .col2-set input[type="email"],
.woocommerce-checkout .col2-set input[type="tel"],
.woocommerce-checkout .col2-set input[type="password"],
.select2-container .select2-selection--single,
#billing_address_2 {
    appearance: none !important;
    background-color: rgba(0, 0, 0, 0.6) !important;
    border: 1px solid #555 !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    /* TEXT WEISS */
    font-family: 'ITC Odin Con', serif !important;
    font-size: 1.3rem !important;
    padding: 28px 15px 8px 15px !important;
    height: 65px !important;
    width: 100% !important;
    box-shadow: none !important;
    outline: none !important;
    transition: all 0.2s ease;
}

/* Textarea (Anmerkungen) */
.woocommerce-checkout textarea {
    appearance: none !important;
    background-color: rgba(0, 0, 0, 0.6) !important;
    border: 1px solid #555 !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-family: 'ITC Odin Con', serif !important;
    font-size: 1.3rem !important;
    padding: 20px 15px !important;
    height: 180px !important;
    width: 100% !important;
    line-height: 1.5 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* FOKUS: Goldener Rahmen */
.woocommerce-checkout input:focus,
.woocommerce-checkout textarea:focus,
.col2-set .form-row.odin-focused input,
.col2-set .form-row.odin-focused textarea,
.select2-container--open .select2-selection--single {
    border-color: #FDD981 !important;
    background: rgba(253, 217, 129, 0.05) !important;
}

/* -----------------------------------------
   3. SPEZIAL-FIX: ADRESSE 2 LABEL (Farb-Korrektur)
   ----------------------------------------- */
#billing_address_2_field>label {
    display: none !important;
}

#billing_address_2_field::before {
    content: "WOHNUNG / SUITE (OPTIONAL)";
    position: absolute;
    left: 15px !important;
    top: 22px !important;

    /* WICHTIG: Identische Schrift-Settings wie normale Labels */
    font-family: 'ITC Odin Con', serif !important;
    font-weight: 400 !important;
    /* Sicherstellen dass es nicht bold/dünn ist */
    -webkit-font-smoothing: antialiased !important;
    /* Gleiche Glättung */
    font-size: 1.3rem !important;

    /* FARBE: Exakt #888888 erzwingen */
    color: #888888 !important;
    opacity: 1 !important;
    /* WICHTIG: Keine Transparenz! */
    text-shadow: none !important;

    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    line-height: 1 !important;
    pointer-events: none !important;
    transition: all 0.2s ease-out !important;
    z-index: 10 !important;
}

/* Wenn Fokus: Farbe #c5a059 */
#billing_address_2_field.odin-focused::before {
    top: 8px !important;
    font-size: 0.8rem !important;
    color: #c5a059 !important;
    /* Identisches Gold */
    opacity: 1 !important;
}

/* -----------------------------------------
   4. NORMALE LABELS (Synchronisiert)
   ----------------------------------------- */
.woocommerce-checkout .col2-set .form-row:not(#order_comments_field):not(#billing_address_2_field) label {
    position: absolute !important;
    left: 15px !important;
    top: 22px !important;

    font-family: 'ITC Odin Con', serif !important;
    font-weight: 400 !important;
    -webkit-font-smoothing: antialiased !important;
    font-size: 1.3rem !important;

    color: #888888 !important;
    /* Identisches Grau */
    opacity: 1 !important;
    text-shadow: none !important;

    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    line-height: 1 !important;
    pointer-events: none !important;
    transition: all 0.2s ease-out !important;
    z-index: 10 !important;
    background: transparent !important;
    width: auto !important;
    margin: 0 !important;
}

/* Aktiv Zustand */
.woocommerce-checkout .col2-set .form-row.odin-focused:not(#order_comments_field):not(#billing_address_2_field) label,
.woocommerce-checkout .col2-set .form-row.woocommerce-validated:not(#order_comments_field):not(#billing_address_2_field) label {
    top: 8px !important;
    font-size: 0.8rem !important;
    color: #c5a059 !important;
    /* Identisches Gold */
    opacity: 1 !important;
}

/* Dropdown Label */
.select2-container .select2-selection--single {
    padding-top: 28px !important;
}

.woocommerce-checkout .col2-set .form-row#billing_country_field label {
    top: 8px !important;
    font-size: 0.8rem !important;
    color: #c5a059 !important;
}

/* TEXTAREA BADGE (Anmerkungen) */
.woocommerce-checkout .form-row#order_comments_field label {
    position: absolute !important;
    top: -12px !important;
    left: 15px !important;
    background-color: #0d0905 !important;
    border: 1px solid #555 !important;
    border-radius: 4px !important;
    padding: 2px 10px !important;
    font-family: 'ITC Odin Con', serif !important;
    font-size: 1rem !important;
    color: #c5a059 !important;
    text-transform: uppercase !important;
    z-index: 20 !important;
    display: block !important;
    width: auto !important;
}

.woocommerce-checkout .form-row.odin-focused#order_comments_field label {
    border-color: #FDD981 !important;
    color: #FDD981 !important;
}

/* -----------------------------------------
   5. DROPDOWN LISTE
   ----------------------------------------- */
.select2-dropdown {
    background-color: #0d0905 !important;
    border: 1px solid #FDD981 !important;
    border-top: none !important;
    margin-top: -2px !important;
    z-index: 9999 !important;
}

.select2-container--open .select2-selection--single {
    border-bottom: none !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.select2-results__option {
    color: #ffffff !important;
    font-family: 'ITC Odin Con', serif !important;
    padding: 10px 15px !important;
    background-color: #0d0905 !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #FDD981 !important;
    color: #000000 !important;
}

/* -----------------------------------------
   6. ZAHLUNGSARTEN (Rechts)
   ----------------------------------------- */
#order_review table.shop_table {
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid #444 !important;
    border-radius: 8px;
    margin-bottom: 30px !important;
}

#order_review table th,
#order_review table td {
    border-color: #444 !important;
    color: #FDD981 !important;
}

#payment {
    background: transparent !important;
    margin-top: 30px !important;
}

#payment ul.payment_methods {
    border: none !important;
}

/* Inaktiv: Grau */
#payment li.payment_method {
    background: rgba(20, 20, 20, 0.8) !important;
    border: 1px solid #555 !important;
    border-radius: 8px !important;
    margin-bottom: 10px !important;
    padding: 15px !important;
    transition: all 0.2s ease;
}

#payment li.payment_method:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: #666 !important;
}

/* AKTIV: Gold */
#payment li.payment_method:has(input[type="radio"]:checked) {
    border-color: #FDD981 !important;
    background: rgba(253, 217, 129, 0.05) !important;
    box-shadow: none !important;
}

#payment input[type="radio"] {
    accent-color: #FDD981 !important;
}

#payment li.payment_method::before {
    color: #FDD981 !important;
}

#payment div.payment_box {
    background: transparent !important;
    color: #aaa !important;
    padding-left: 0 !important;
    margin-top: 10px !important;
}

#payment div.payment_box::before {
    display: none !important;
}

/* Stripe Integration */
#payment .wc-stripe-elements-field,
.wc-stripe-elements-field {
    background-color: rgba(0, 0, 0, 0.6) !important;
    border: 1px solid #555 !important;
    border-radius: 8px !important;
    padding: 15px !important;
    margin-bottom: 15px !important;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
}

.StripeElement--focus,
.wc-stripe-elements-field.focused {
    border-color: #FDD981 !important;
    background: rgba(253, 217, 129, 0.05) !important;
}

#payment label[for*="stripe-"] {
    font-family: 'ITC Odin Con', serif !important;
    color: #888 !important;
    font-size: 1.1rem !important;
    margin-bottom: 5px !important;
    display: block !important;
}

/* -----------------------------------------
   7. AGB & BUTTON
   ----------------------------------------- */
/* #order_review label, .wc-gzd-checkbox-placeholder label, .woocommerce-terms-and-conditions-wrapper label {
    position: static !important; display: inline-block !important;
    font-family: 'ITC Odin Con', serif !important; font-size: 1.1rem !important;
    color: #ccc !important; text-transform: none !important; margin-left: 10px !important;
}
.wc-gzd-checkbox-placeholder, .woocommerce-terms-and-conditions-wrapper {
    background: rgba(20, 20, 20, 0.6) !important; border: 1px solid #444 !important;
    border-radius: 8px !important; padding: 15px 20px !important; margin-top: 20px !important;
    display: flex !important; align-items: flex-start !important;
}
.wc-gzd-checkbox-placeholder:empty { display: none !important; }
.woocommerce-checkout input[type="checkbox"] {
    appearance: none !important; min-width: 20px !important; height: 20px !important;
    border: 2px solid #666 !important; border-radius: 4px !important; background: transparent !important;
    margin-top: 2px !important; cursor: pointer; flex-shrink: 0 !important;
}
.woocommerce-checkout input[type="checkbox"]:checked {
    background-color: #FDD981 !important; border-color: #FDD981 !important;
}
.woocommerce-checkout input[type="checkbox"]:checked::after {
    content: '✓'; color: #000; font-weight: bold; font-size: 14px;
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
} */
.woocommerce-terms-and-conditions-wrapper a {
    color: #FDD981 !important;
    text-decoration: underline !important;
}

/* Duplicate #place_order — Pill + Gold Ring (same as above) */
#place_order {
    all: unset !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 320px !important;
    height: 50px !important;
    background: linear-gradient(90deg, #ffe298 0%, #fcdcb1 60%, #f7e8b0 100%, #fff6d0 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 999px !important;
    position: relative !important;
    overflow: visible !important;
    font-family: 'ITC Odin Con', serif !important;
    font-size: 1.6rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    text-shadow: none !important;
    cursor: pointer !important;
    transition: filter 0.3s ease !important;
    margin-top: 30px !important;
    filter: drop-shadow(0 1px 0px rgba(0,0,0,0.5)) !important;
}
#place_order:hover {
    filter: drop-shadow(0 0 12px rgba(244, 192, 100, 0.6)) drop-shadow(0 0 25px rgba(244, 192, 100, 0.3)) !important;
}



@media only screen and (min-width: 960px) and (max-width: 1239px) {

    .section_wrapper,
    .container,
    .with_aside .content_wrapper {
        max-width: 1080px;
    }
}

@media only screen and (min-width: 1240px) {

    .section_wrapper,
    .container {
        max-width: 1160px;
    }
}





/* BeTheme spezifische Overlays killen */
.image_wrapper a:hover,
.image_wrapper a:active,
.image_wrapper:hover,
.image_wrapper:active,
.column_image .image_wrapper .mask,
.hover-effect-active {
    opacity: 1 !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* -----------------------------------------
  FOOTER SAGE
   ----------------------------------------- */

/* --- FOOTER REPARATUR (BeTheme) --- */

/* 1. Haupt-Container und alle Unter-Elemente dunkel färben */
#Footer,
#Footer .widgets_wrapper,
#Footer .footer_copy,
#Footer .section_wrapper,
.footer-holder {
    background-color: #0d0905 !important;
    /* Deine Farbe */
    background-image: none !important;
    /* Falls ein Hintergrundbild stört */
    border: none !important;
}

/* Footer Logo - einheitliche Größe auf ALLEN Seiten */
#Footer img,
.footer-holder img,
#Footer .widget img,
body#ecwid_body #Footer img,
html#ecwid_html #Footer img {
    max-width: 180px !important;
    height: auto !important;
    width: auto !important;
}

/* Footer Schrift - einheitlich auf ALLEN Seiten */
#Footer,
#Footer *,
#Footer a,
#Footer p,
#Footer li,
#Footer .widget,
body#ecwid_body #Footer,
body#ecwid_body #Footer *,
html#ecwid_html #Footer * {
    font-family: 'Odin Text Reg', serif !important;
    font-size: inherit;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#Footer h1, #Footer h2, #Footer h3, #Footer h4, #Footer h5, #Footer h6,
#Footer .widget-title,
body#ecwid_body #Footer h1, body#ecwid_body #Footer h2, body#ecwid_body #Footer h3 {
    font-family: 'Odin Text Reg', serif !important;
    color: #c5a059 !important;
    font-size: 1.2rem !important;
}

/* 2. Zwingt den Footer über ALLES andere (inkl. Saga-Button) */
#Footer {
    position: relative !important;
    z-index: 2147483647 !important;
    /* Der höchstmögliche Wert im Browser */
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.8);
    /* Wirft einen Schatten nach oben, sieht besser aus */
}

/* 3. Speziell für Mobile: Padding unten entfernen, damit keine Lücke entsteht */
@media only screen and (max-width: 767px) {
    #Footer {
        margin-top: 0 !important;
        padding-top: 20px !important;
    }
}


/* -----------------------------------------
  ecwid shop
   ----------------------------------------- */

/* =========================================
   DER TOTALE FILTER
   Versteckt alles, was "related" (verwandt) im Namen hat
   ========================================= */

div[class*="related"],
div[class*="similiar"],
section[class*="related"] {
    display: none !important;
}

/* Speziell für Ecwid Titel-Container */
.ec-header-h2 {
    display: none !important;
}





/* =========================================
   GLOBAL: ODIN HEADLINES (H1-H3) - GOLD GRADIENT + MINIMAL GLOW + ANIMATION
   ========================================= */

/* 1. Die Animation definieren (der Schimmer-Effekt) */
@keyframes odinShimmer {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* 2. Der Style für die Überschriften */
h1,
h2,
h3,
.mcb-section h1,
.mcb-section h2,
.mcb-section h3,
.column_attr h1,
.column_attr h2,
.column_attr h3,
.title h1,
.title h2,
.title h3 {

    /* --- DEIN BASIS-CODE --- */
    color: #F4C064 !important;
    /* Der Gradient (Dein Gold zu Hellgold) */
    background: linear-gradient(135deg, #F4C064 0%, #ffeeb0 50%, #F4C064 100%) !important;

    /* --- NEU: ANIMATION SETUP --- */
    /* Hintergrund größer machen, damit er sich bewegen kann */
    background-size: 100% auto !important;
    /* Animation deaktiviert – Gradient soll direkt sichtbar sein */
    animation: none !important;

    /* --- DEIN BASIS-CODE (Text Maskierung) --- */
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;

    /* --- NEU: MINIMALER GLOW (statt filter: none) --- */
    /* Ein feiner Schlagschatten, der bei transparentem Text wie ein Glow wirkt */
    filter: drop-shadow(0 0 6px rgba(244, 192, 100, 0.4)) !important;
    text-shadow: none !important;

}




/* =========================================
   UNIVERSAL FIX: ODIN GOLD TEXT
   Klasse: "odin-gold-text"
   ========================================= */

/* 1. Animation definieren */
@keyframes odinShimmer {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* =========================================
   ODIN HEADLINES: SCREENSHOT MATCH
   ========================================= */

/* 1. HAUPT-ÜBERSCHRIFT (WÄHLE DEINEN TRUNK) - GOLD */
/* Wir zielen auf die große Überschrift im Header-Bereich */
.mcb-item-xoc8g3df .title,
.head_choose .title,
h1.entry-title {
    /* Typografie */
    font-family: 'ITC Odin Con', serif !important;
    text-transform: uppercase !important;
    text-align: center !important;
    line-height: 1.1em !important;
    display: block !important;
    margin-top: 10px !important;

    /* GRÖSSE: Exakt wie Screenshot */
    font-size: clamp(40px, 6vw, 90px) !important;

    /* FARBE & STYLE: Massives Gold (kein transparenter Verlauf im Text) */
    color: #e0b75c !important;

    /* Der Verlauf liegt AUF dem Text (background-clip) */
    background: linear-gradient(180deg, #ffeeb0 0%, #e0b75c 40%, #c5a059 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;

    /* Kein Glow für die Hauptschrift, damit sie scharf und massiv wirkt */
    filter: drop-shadow(0 2px 0px #000) !important;
    /* Leichter schwarzer Schatten für Kontrast */
}

/* 2. SUB-ÜBERSCHRIFT (Spüre die Erkenntnis...) - WEISS MIT GLOW */
/* Wir zielen auf die Text-Sektion direkt darunter */
.mcb-item-nlg2ghqn .column_attr,
.mcb-item-nlg2ghqn p,
.intro-text-odin {
    /* Typografie */
    font-family: 'Odin Text Reg', serif !important;
    font-size: clamp(1.2rem, 2vw, 2.2rem) !important;
    text-align: center !important;
    line-height: 1.4em !important;

    /* FARBE: Weiß/Hellgrau */
    color: #e0e0e0 !important;

    /* GLOW: Weißer Schein */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.4), 0 0 20px rgba(255, 255, 255, 0.2) !important;

    /* Sicherstellen, dass kein Hintergrund stört */
    background: none !important;
    -webkit-text-fill-color: initial !important;
}




/* =========================================================
   FIX: STICKY DOCK & PLAYER SICHTBAR MACHEN (IMMER)
   ========================================================= */

/* 1. Dock über das Spiel-Overlay heben */
/* Wir nutzen den maximalen sicheren Z-Index Wert (2147483647) */
body.game-open #odin-sticky-dock {
    z-index: 2147483647 !important;
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 2. Player-Elemente im Dock erzwingen */
/* Das überschreibt das "display: none", falls du auf der Saga-Seite bist */
#odin-sticky-dock #viking-wave-trigger,
#odin-sticky-dock .viking-player-wrapper,
#odin-sticky-dock .odin-sticky-player {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* 3. Sicherstellen, dass die Icons im Player sichtbar sind */
#odin-sticky-dock svg,
#odin-sticky-dock img {
    opacity: 1;
    visibility: visible;
}



/* =========================================================
   FIX: SAGA MOBILE DOCK VISIBILITY
   ========================================================= */

/* Erzwingt Sichtbarkeit und korrekte Stapelung auf Mobile */
@media (max-width: 900px) {
    #odin-sticky-dock {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 2147483655 !important;
        /* Höher als Mobile Blocker */
        bottom: 20px !important;
        right: 20px !important;
    }

    /* Stellt sicher, dass der Button darin nicht versteckt ist */
    #odin-sticky-dock .odin-sticky-player.is-visible {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}

/* =========================================================
   FIX: SAGA BUTTON MOBILE UNCLICKABLE FIX
   ========================================================= */

/* Zwinge den Start-Screen über ALLES */
.odin-start-screen {
    z-index: 2147483647 !important;
    /* Maximum Browser Value */
    pointer-events: auto !important;
}

/* Stelle sicher, dass der Saga Container nicht 0px hoch ist */
.odin-saga-wrapper {
    position: relative;
    z-index: 2147483640 !important;
}

/* Verstecke den alten Player komplett auf der Saga Seite */
.page-template-default .viking-player-wrapper,
.post-template-default .viking-player-wrapper {
    /* Dies wird durch das Script oben geregelt, aber sicher ist sicher */
}

/* Wenn das Sticky Dock da ist, muss es UNTER dem Startscreen sein, aber ÜBER dem Text */
#odin-sticky-dock {
    z-index: 2147483600 !important;
}


/* =========================================================
   PERFORMANCE FIX: IPAD/MOBILE AKKU RETTER
   ========================================================= */

/* Erkennt Touch-Geräte (iPad, iPhone, Android) */
@media (hover: none) and (pointer: coarse) {

    /* 1. Hintergrund fixierung aufheben -> Spart massive GPU Leistung */
    body,
    html,
    #Wrapper,
    #Content,
    .bg_age_over,
    body.woocommerce-checkout {
        background-attachment: scroll !important;
        background-position: center top !important;
    }

    /* 2. Schwere Animationen auf Mobile deaktivieren/vereinfachen */
    .headline-wikinger .desc,
    .horn_fill_txt,
    h1,
    h2,
    h3 {
        animation: none !important;
        /* Stoppt den permanenten Render-Loop */
        background-attachment: scroll !important;
    }

    /* 3. Text-Shadows vereinfachen (Blur frisst Akku) */
    * {
        text-shadow: none !important;
        box-shadow: none !important;
    }

    /* Wichtige Elemente behalten ihren Schatten, aber einfacher */
    .odin-big-btn,
    .header-cart-count,
    .mode-title {
        text-shadow: 0 1px 2px #000 !important;
    }
}


/* =========================================================
   PERFORMANCE BOOSTER (iPad & Mobile Fixes)
   ========================================================= */

/* Erkennt Touch-Geräte (iPad, Tablets, Handys) */
@media (hover: none) and (pointer: coarse) {

    /* 1. HINTERGRUND FIXIERUNG AUFHEBEN (Der größte Bremsklotz!) */
    /* Auf iOS verursacht 'fixed' extremes Ruckeln. Wir schalten auf 'scroll'. */
    body,
    html,
    #Wrapper,
    body.woocommerce-checkout,
    .bg_age_over {
        background-attachment: scroll !important;
        background-position: center top !important;
    }

    /* 2. TEURE ANIMATIONEN KILLEN */
    /* Glitzernde Texte fressen auf Retina-Displays extrem viel GPU */
    .headline-wikinger .desc,
    .horn_fill_txt,
    h1,
    h2,
    h3,
    .mcb-section h1,
    .mcb-section h2,
    .mcb-section h3 {
        animation: none !important;
        /* Stoppt die Bewegung */
        background-attachment: scroll !important;

        /* Fallback: Einfaches Gold statt komplexer Gradient */
        background: none !important;
        color: #e0b75c !important;
        -webkit-text-fill-color: #e0b75c !important;
        background-clip: border-box !important;
        filter: none !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    }

    /* 3. SCHATTEN VEREINFACHEN */
    * {
        box-shadow: none !important;
    }

    /* Ausnahme für wichtige Buttons */
    .ow-submit,
    .odin-hero-cart .ohc-checkout-btn,
    #place_order {
        filter: none !important;
        /* Kein teurer Drop-Shadow Filter */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5) !important;
    }

    /* ===== MOBILE: KEINE ANIMATIONEN AUF BUTTONS — NUR GRADIENT ===== */

    /* Hero-Cart Buttons: Keine Hover-Animation */
    .ohc-btn,
    .ohc-btn:hover,
    .ohc-btn:active {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }

    /* Checkout Button: Kein goldShine, kein Scale, kein filter-Glow */
    .odin-hero-cart .ohc-checkout-btn,
    .odin-hero-cart .ohc-checkout-btn:hover,
    .odin-hero-cart .ohc-checkout-btn:active {
        transition: none !important;
        animation: none !important;
        transform: none !important;
        filter: none !important;
    }

    /* Age Gate Button: Kein box-shadow Glow */
    .mcb-section .mcb-wrap [class*="mcb-item"] .button,
    .mcb-section .mcb-wrap [class*="mcb-item"] .button:hover,
    .mcb-section .mcb-wrap [class*="mcb-item"] .button:active {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }

    /* Ecwid Add-to-Cart Buttons: Kein filter Hover */
    .form-control__button--add-to-bag,
    .form-control__button--add-to-bag:hover,
    .form-control--button .form-control__button,
    .form-control--button .form-control__button:hover {
        transition: none !important;
        animation: none !important;
        transform: none !important;
        filter: none !important;
    }
}

/* ODIN PRODUCT TILES GRID removed - handled in shortcode function */



/* =========================================
   PERFORMANCE: GPU-Beschleunigung
   ========================================= */
@media (hover: none) and (pointer: coarse) {
    /* Auf Touch-Geräten: Weniger Animationen */
    *, *::before, *::after {
        animation-duration: 0.1s !important;
        transition-duration: 0.1s !important;
    }
    
    /* Wichtige Elemente behalten Animation */
    .odin-age-overlay,
    .odin-age-overlay *,
    .odin-welcome-overlay,
    .odin-welcome-overlay *,
    #odin-sticky-dock,
    #odin-sticky-dock * {
        animation-duration: unset !important;
        transition-duration: unset !important;
    }
    
    /* Deaktiviere teure Filter auf Mobile */
    .odin-card:not(.is-active),
    .odin-grid-container {
        filter: none !important;
    }
}

@media (hover: none) and (pointer: coarse) {
    *, *::before, *::after {
        animation-duration: 0.1s !important;
        transition-duration: 0.1s !important;
    }

    /* Bubble Animation behalten */
    .odin-added-bubble,
    .odin-added-bubble.animate {
        animation-duration: 3s !important;
    }
}

/* ── iPad Air + iPad Mini: Komplette Navigation ausblenden (sticky Footer-Nav reicht) ── */
@media screen and (max-width: 1199px) {
    /* Desktop-Menü */
    #menu-main,
    .mfn-header-menu,
    /* Nav-Section im Header-Template */
    .mfn-header-tmpl section.mcb-section-unv97hu,
    /* Hamburger / Popup Trigger */
    .mfn-header-tmpl .mfn-popup-open,
    .mfn-header-tmpl .header-icon,
    .mfn-header-tmpl [data-popup],
    .mfn-header-tmpl .action_button,
    /* BeTheme Nav */
    #Top_bar nav,
    #Top_bar .menu-wrapper,
    /* Header Action Icons (Burger, Search etc.) */
    .mfn-header-tmpl .mcb-column-inner a[href="#"],
    .mfn-header-tmpl .mcb-column-inner .mcb-icon-wrapper,
    .mfn-header-tmpl nav {
        display: none !important;
        visibility: hidden !important;
    }
}

/* ── Touch-Geräte (iPad Pro etc.): Haupt-Nav im HEADER ausblenden ── */
@media (pointer: coarse) and (hover: none) {
    /* Nur Header-Menü — NICHT #odin-custom-menu-container */
    #Top_bar nav,
    #Top_bar .menu-wrapper,
    #Top_bar .menu_wrapper,
    #Top_bar #menu,
    #Top_bar .menu-main-container,
    #Top_bar #menu-main,
    .mfn-header-tmpl section.mcb-section-unv97hu,
    .mfn-header-tmpl .mfn-popup-open,
    .mfn-header-tmpl .header-icon,
    .mfn-header-tmpl [data-popup],
    .mfn-header-tmpl .action_button,
    .mfn-header-tmpl .mcb-column-inner a[href="#"],
    .mfn-header-tmpl .mcb-column-inner .mcb-icon-wrapper,
    .mfn-header-menu,
    .responsive-menu-toggle {
        display: none !important;
        visibility: hidden !important;
    }
}

/* ── iPad Pro: Menü 20% größer + weniger Abstand (nur Desktop mit Maus) ── */
@media screen and (min-width: 1200px) and (max-width: 1440px) and (hover: hover) and (pointer: fine) {
    #menu-main.mfn-header-menu .menu-label,
    .mfn-header-menu .mfn-menu-link,
    .mfn-header-menu .mfn-menu-link .menu-label,
    #menu-main li a,
    #menu-main li a span {
        font-size: clamp(2.3rem, 2.6vw, 3.1rem) !important;
    }
    #menu-main > li {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}

/* ── Tablet + kleine Screens: margin-top Override für Hero-Element ── */
@media screen and (max-width: 1366px) {
    .mcb-section .mcb-wrap .mcb-item-7ofuwsl .mcb-column-inner-7ofuwsl {
        margin-top: 100px !important;
    }
}
@media screen and (max-width: 1280px) {
    .mcb-section .mcb-wrap .mcb-item-7ofuwsl .mcb-column-inner-7ofuwsl {
        margin-top: 120px !important;
    }
}