/*
Theme Name: UpStore Child
Theme URI: http://demo.theme-sky.com/upstore/
Author: Theme Sky Team
Author URI: http://theme-sky.com/
Description: A Premium and Responsive WordPress theme, designed for E-Commerce websites
Template: upstore
Version: 1.0.0
License: GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags: two-columns, left-sidebar, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
Text Domain: upstore-child
*/


/* ==========================================================================
   Schriftarten
   ========================================================================== */

@font-face {
    font-family: 'Archivo Black';
    src: url('/wp-content/schriften/ArchivoBlack-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('/wp-content/schriften/roboto-regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('/wp-content/schriften/roboto-italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto';
    src: url('/wp-content/schriften/roboto-italic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'Baloo Chettan 2';
    src: url('/wp-content/schriften/BalooChettan2-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 400 700; /* Sagt dem Browser: Diese Datei deckt Gewichte von 400 bis 700 ab */
    font-style: normal;
}

sr7-txt[style*="font-family: Baloo Chettan 2"] {
    font-family: 'Baloo Chettan 2', sans-serif !important;
}

sr7-txt[style*="font-family: Roboto"] {
    font-family: 'Roboto', sans-serif !important;
}

sr7-txt[style*="font-family: Roboto"][style*="font-style: italic"] {
    font-family: 'Roboto', sans-serif !important;
    font-style: italic !important;
}

h1 {
    font-family: "Archivo Black", sans-serif !important;
    font-size: 44px !important;
    font-weight: 600 !important; /* Archivo Black liegt als Regular (600) vor */
}

.wpb_text_column h2,
.wpb_text_column h2 *,
.vc_custom_heading h2,
.vc_custom_heading h2 *,
h2,
h2 span {
    font-family: "Archivo Black", sans-serif !important;
    font-size: 34px !important;
    font-weight: 400 !important; /* Archivo Black liegt als Regular (400) vor */
}

.wpb_text_column h5,
.wpb_text_column h5 *,
.vc_custom_heading h5,
.vc_custom_heading h5 *,
h5,
h5 span {
    font-family: "Baloo Chettan 2", sans-serif !important;
    font-size: 22px !important; /* Oder deine gewünschten 30px */
    font-weight: 700 !important;
    line-height: 1.3 !important; /* Verhindert riesige Lücken bei großer Schrift */
}

.wpb_text_column h6,
.wpb_text_column h6 *,
.vc_custom_heading h6,
.vc_custom_heading h6 *,
h6 {
    font-family: "Baloo Chettan 2", sans-serif !important;
    font-size: 15px !important;
	font-weight: 700 !important;
}

/* Der gesamte Rest der Seite bekommt Baloo Chettan 2 */
body, p, span, a, li, input, textarea, select, button {
    font-family: "Baloo Chettan 2", sans-serif !important;
	font-size: 18px !important;
}

/* WPBakery FAQ / Toggle Titel universell ansprechen */
body .vc_toggle .vc_toggle_title,
body .vc_toggle .vc_toggle_title h4,
body .vc_toggle .vc_toggle_title h3,
body .vc_toggle .vc_toggle_title a {
    font-size: 20px !important;
    color: #d5ff00 !important;
    font-family: 'Baloo Chettan 2', sans-serif !important;
    text-transform: uppercase !important;
}

/* Falls das Theme einen Hover-Effekt erzwingt */
body .vc_toggle .vc_toggle_title:hover,
body .vc_toggle .vc_toggle_title:hover h4,
body .vc_toggle .vc_toggle_title:hover h3,
body .vc_toggle .vc_toggle_title:hover a {
    color: #d5ff00 !important;
}

/* Schriftgröße vom Header Menü */
.ts-mega-menu-wrapper .menu > .menu-item > a .menu-label{
    font-weight:700;
    font-size:23px !important;
    
}



/* ==========================================================================
   Links & Button Design
   ========================================================================== */

/* Globale Links (Header, Footer und Buttons komplett ausgenommen) */
a:not(.menu-item a):not(.nav-link):not(.ast-link-item):not(#site-navigation a):not(footer a):not(.site-footer a):not(.mein-button a):not(.vc_btn3):not(.vc_general) {
    color: #d5ff00 !important;
    transition: color 0.3s ease !important;
}
a:not(.menu-item a):not(.nav-link):not(.ast-link-item):not(#site-navigation a):not(footer a):not(.site-footer a):not(.mein-button a):not(.vc_btn3):not(.vc_general):hover {
    color: #3ab9b8 !important;
}

/* Header-Menü: Standard WEISS, Hover #d5ff00 */
.menu-item a, 
.nav-link, 
#site-navigation a {
    color: #ffffff !important;
    transition: color 0.3s ease !important;
}
.menu-item a:hover, 
.nav-link:hover, 
#site-navigation a:hover {
    color: #d5ff00 !important; 
}

/* Standard-Button Design (WPBakery, Formulare etc.) */
.mein-button a,
.mein-button .vc_btn3,
.mein-button .vc_general,
input.wpcf7-submit,
.vc_btn3.vc_btn3-color-custom {
    display: inline-table !important;
    background-color: #d5ff00 !important;
    color: #000000 !important;
    padding: 14px 28px !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    font-weight: bold !important;
    text-align: center !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: background-color 0.3s ease !important;
}

.mein-button a:hover,
.mein-button .vc_btn3:hover,
.mein-button .vc_general:hover,
input.wpcf7-submit:hover,
.vc_btn3.vc_btn3-color-custom:hover {
    background-color: #3ab9b8 !important;
    color: #000000 !important;
}

/* SR7: Schriftart + Farbe für Slider-Buttons auf Baloo Chettan 2 zwingen */
sr7-btn,
.sr7-btn,
.sr7-layer[data-type="button"],
.sr7-layer[data-type="button"] span,
rs-layer[data-type="button"],
rs-layer[data-type="button"] span {
    font-family: "Baloo Chettan 2", sans-serif !important;
    font-weight: 700 !important;
    background-color: #d5ff00 !important;
    background: #d5ff00 !important;
    color: #000000 !important;
    border-radius: 6px !important;
}

sr7-btn:hover,
.sr7-btn:hover,
.sr7-layer[data-type="button"]:hover,
.sr7-layer[data-type="button"]:hover span,
rs-layer[data-type="button"]:hover,
rs-layer[data-type="button"]:hover span {
    font-family: "Baloo Chettan 2", sans-serif !important;
    font-weight: 700 !important;
    background-color: #3ab9b8 !important;
    background: #3ab9b8 !important;
    color: #000000 !important;
}

/* Ausrichtungen für .mein-button */
.mein-button.btn-center {
    display: block !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.mein-button.btn-center a,
.mein-button.btn-center .vc_btn3,
.mein-button.btn-center .vc_general,
.mein-button.btn-center input.wpcf7-submit {
    display: table !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.mein-button.btn-left {
    display: block !important;
    text-align: left !important;
}
.mein-button.btn-left a,
.mein-button.btn-left .vc_btn3,
.mein-button.btn-left .vc_general,
.mein-button.btn-left input.wpcf7-submit {
    display: table !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

.mein-button.btn-right {
    display: block !important;
    text-align: right !important;
}
.mein-button.btn-right a,
.mein-button.btn-right .vc_btn3,
.mein-button.btn-right .vc_general,
.mein-button.btn-right input.wpcf7-submit {
    display: table !important;
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* Kontaktformular-Button auf normale Größe zurücksetzen (nicht 100% breit) */
.wpcf7-form input.wpcf7-submit,
input.wpcf7-submit {
    display: inline-block !important;
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}



/* ==========================================================================
   Logo
   ========================================================================== */

/* Logogröße vom Header Menü*/
div[class*="logo"] img, 
div[class*="branding"] img, 
header img[class*="logo"],
.logo img,
.header-logo img {
    width: 320px !important; 
    max-width: 320px !important;
    height: auto !important;
    max-height: none !important;
    padding-top: 20px !important;  
    padding-bottom: 20px !important; 
}
div[class*="logo"], 
td[class*="logo"], 
.site-branding {
    width: auto !important;
    max-width: none !important;
    min-width: 320px !important;
}



/* ==========================================================================
   Hintergrund
   ========================================================================== */

/* HINTERGRUND-PNG AUF DEM BODY */
html, 
body {
    background-color: #3f3f44 !important;
    background-image: url('/wp-content/uploads/2026/07/web_bg_lines-4.png') !important;
    background-size: 100% auto !important;
    background-repeat: repeat-y !important;
    background-position: top center !important;
    background-attachment: scroll !important;
}

/* SEITEN-TEMPLATES & LAYOUTS TRANSPARENT MACHEN (Inkl. FAQ & Unterseiten) */
#page, #wrapper, .site, #main, main, #content, .site-content,
.main-page-wrapper, .page-wrapper, .content-area, .container,
.single-page-wrapper, .page-container, .wrapper, .layout-wrapper,
article, .entry-content, .page-content, .post-content, .page, .single, .type-page,
header, .site-header, .header-wrapper, .main-header, .navigation-bar, .ts-header, div[class*="header"],
footer, .site-footer, .footer-wrapper, div[class*="footer"] {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Vorhang-Effekte / Pseudo-Elemente entfernen */
#page::before, #page::after,
#wrapper::before, #wrapper::after,
.main-page-wrapper::before, .main-page-wrapper::after,
#content::before, #content::after,
.site-content::before, .site-content::after,
header::before, header::after {
    display: none !important;
    background: transparent !important;
}

/* THEMESKY (TS) ELEMENTE & PRODUCT TABS TRANSPARENT MACHEN */
/* Alle TS-Module, Tab-Header, Slider & Container */
[class*="ts-"],
.ts-products-in-product-type-tabs-wrapper,
.ts-product-in-product-type-tab,
.ts-products-wrapper,
.ts-product-slider,
.ts-banner,
.ts-tab-header,
.ts-tab-content,
.ts-shortcode,
.column-tabs,
ul.tabs,
ul.tabs-link,
.woocommerce-tabs,
.products,
.product {
    background: transparent !important;
    background-color: transparent !important;
}

/* Alle inneren Produkt-Karten, Grid-Items & Hover-Kästen freischalten */
[class*="ts-"] *,
.ts-products-in-product-type-tabs-wrapper *,
.ts-products-wrapper *,
.products .product,
.product-wrapper,
.product-cross,
.product-group,
.product-content,
.product-info,
.item-wrapper,
.thumbnail-wrapper {
    background-color: transparent !important;
}

/* WPBAKERY ERZWUNGEN TRANSPARENT MACHEN */
.vc_row, 
.vc_section,
.vc_column, 
.vc_column-inner, 
.vc_row-wrapper,
.wpb_column,
.wpb_wrapper,
.wpb_text_column,
.wpb_single_image,
div[class*="vc_"] {
    background-color: transparent !important;
}



/* ==========================================================================
   Footer
   ========================================================================== */

/* Footer-Verlauf Hintergrund */
.footer, footer, #colophon, .site-footer {
    background: linear-gradient(135deg, #d5ff00 0%, #3ab9b8 100%) !important;
}
/* Textfarbe für den gesamten Footer (normaler Text, Widgets) */
.footer, footer, #colophon, .site-footer, .footer p {
    color: #3f3f44 !important;
}
/* Farbe für Überschriften im Footer */
.footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6,
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 {
    color: #3f3f44 !important;
}
/* Farbe für Links (Menüs, Kategorien, etc.) */
.footer a, footer a {
    color: #3f3f44 !important;
}
/* Option: Farbe für Links, wenn man mit der Maus darüber fährt (Hover) */
.footer a:hover, footer a:hover {
    color: #3f3f44 !important;
    opacity: 0.8; 
}
/* Universeller Befehl für alle Rahmenlinien im gesamten Footer */
.footer *, footer *, #colophon * {
    border-color: #3f3f44 !important;
}



/* ==========================================================================
   Streifen im Header
   ========================================================================== */

/* OBERER BALKEN (Immer unter dem Header auf ALLEN Seiten) */
.site-header, header, #masthead { 
    border-bottom: 8px solid transparent !important; 
    border-image: linear-gradient(90deg, #d5ff00 0%, #3ab9b8 100%) 1 !important; 
}

/* UNTERER BALKEN (Standardmäßig auf allen Unterseiten deaktiviert) */
.main-content::before,  
#content::before,  
.site-content::before,  
.page-wrap::before {
    display: none !important;
}

/* UNTERER BALKEN (Wird AUTOMATISCH aktiviert, sobald ein Slider da ist) */
.home .main-content::before,  
.home #content::before,  
.home .site-content::before,  
.home .page-wrap::before,
body:has(.rev_slider_wrapper) #content::before,
body:has(.rev_slider_wrapper) .main-content::before,
body:has(.vc_revolution_slider) #content::before,
body:has([class*="slider"]) #content::before { 
    content: "" !important; 
    display: block !important; 
    
    /* 100% Bildschirmbreite */
    width: 100vw !important; 
    position: relative !important; 
    left: 50% !important; 
    margin-left: -50vw !important; 
    
    /* Linien-Styling */
    height: 9px !important; 
    background: linear-gradient(90deg, #3ab9b8 0%, #d5ff00 100%) !important; 
    
    /* Abstand zum Slider */
    margin-top: -50px !important; 
    margin-bottom: 20px !important; 
    z-index: 99 !important; 
}



/* ==========================================================================
   Slider Pfeile
   ========================================================================== */

/* Das Hesperiden-Pfeil-Design für die Kreise herstellen */
#page sr7-module .sr7-arrows,
#page rs-module-wrap .tparrows,
.tparrows {
    width: 45px !important;
    height: 45px !important;
    background: rgba(255, 255, 255, 0.2) !important;
      /* Transparenter Kreis */
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
}

.tparrows:hover {
    background: rgba(255, 255, 255, 0.4) !important;
}

/* Schriftart erzwingen & Pfeil dicker machen */
.tp-leftarrow:before,
.tp-rightarrow:before,
#page sr7-module .sr7-arrows:before {
    font-family: 'revicons' !important;
    font-size: 25px !important; /* Angenehme Pfeilgröße */
    color: #d5ff00 !important;  /* Deine gewählte Pfeilfarbe */
    display: block !important;
    
/* Der Trick für mehr Dicke: Ein minimaler Konturschatten */
    text-shadow: 0.9px 0 0 #d5ff00, -0.9px 0 0 #d5ff00, 0 0.9px 0 #d5ff00, 0 -0.9px 0 #d5ff00 !important;
}

/* LINKER PFEIL (Fängt den Code F104 ab) */
.tp-leftarrow:before,
#page sr7-module .sr7-leftarrow:before {
    content: "\e82c" !important; /* Das originale Hesperiden-Icon Links */
}

/* RECHTER PFEIL (Fängt den Code F105 ab) */
.tp-rightarrow:before,
#page sr7-module .sr7-rightarrow:before {
    content: "\e82d" !important; /* Das originale Hesperiden-Icon Rechts */
}



/* ==========================================================================
   Slider Navigation 
   ========================================================================== */

/* Betrifft die Pfeil-Container und deren Inhalte */
.tparrows,
.tparrows:before,
.tp-leftarrow:before,
.tp-rightarrow:before {
    font-family: 'revicons' !important; /* Zwingt die originale Slider-Schriftart */
    font-style: normal !important;
    font-variant: normal !important;
    font-weight: normal !important;
    text-transform: none !important;
    speak: never !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}



/* ==========================================================================
   FAQ - Styling
   ========================================================================== */

/* 1. DER BALKEN (Verlauf & Grundform) */
.vc_toggle .vc_toggle_title {
    /* 1background: linear-gradient(135deg, #d5ff00 0%, #3ab9b8 100%) !important; */
    background: #53565b !important;
	display: block !important;
    padding: 14px 20px !important;
    border-radius: 6px !important;
    border: none !important;
    margin-bottom: 10px !important;
}

/* 2. TEXT IM BALKEN (H5-Schrift + Großbuchstaben deaktivieren) */
.vc_toggle .vc_toggle_title h4,
.vc_toggle .vc_toggle_title h4 * {
    font-family: "Baloo Chettan 2", sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    
    /* WICHTIG: Erzwungene Großbuchstaben vom Theme/WPBakery aufheben */
    text-transform: none !important;
    
    /* Transparenz erzwingen, damit der Verlauf sichtbar ist */
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. PFEIL / ICON TRANSPARENT HALTEN */
.vc_toggle .vc_toggle_title .vc_toggle_icon {
    background: transparent !important;
}

/* 4. ANTWORT-TEXT (H6-Schrift) */
.vc_toggle .vc_toggle_content,
.vc_toggle .vc_toggle_content * {
    font-family: "Baloo Chettan 2", sans-serif !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
}



/* ==========================================================================
   FAQ - Rahmen & Schatten beim Aufklappen komplett entfernen
   ========================================================================== */

/* 1. Haupt-Container & Aktiver Zustand */
.vc_toggle,
.vc_toggle.vc_toggle_active,
.vc_toggle_title,
.vc_toggle_title:hover,
.vc_toggle_content {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* 2. Versteckte Pseudo-Elemente (WPBakery nutzt oft ::before / ::after für Linien) */
.vc_toggle::before,
.vc_toggle::after,
.vc_toggle_title::before,
.vc_toggle_title::after,
.vc_toggle_content::before,
.vc_toggle_content::after {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    display: none !important;
}



/* ==========================================================================
   Farbänderung für das Warenkorb Icon auf der Hauptseite
   ========================================================================== */

/* Cart number */
.shopping-cart-wrapper .cart-control
	.cart-number{
	background-color:#d5ff00 !important;
}



/* ==========================================================================
   Bilder mit Verlaufs-Rahmen
   ========================================================================== */

/* Spezieller Farbverlaufs-Rahmen für WPBakery Einzelbilder */
.verlauf-rahmen .vc_single_image-wrapper {
    position: relative !important;
    display: inline-block !important;
}

.verlauf-rahmen .vc_single_image-wrapper::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    border: 3px solid #d5ff00 !important; /* Fallback */
    border-image: linear-gradient(to bottom, #d5ff00, #3ab9b8) 1 !important;
    pointer-events: none !important;
    z-index: 10 !important;
}

/* Exakter Farbverlaufs-Rahmen für die Produkt-Thumbnails */
.single-product .product .owl-item .woocommerce-product-gallery__image {
    position: relative !important;
}

.single-product .product .owl-item .woocommerce-product-gallery__image::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    border: 3px solid #d5ff00 !important; /* Fallback */
    border-image: linear-gradient(to bottom, #d5ff00, #3ab9b8) 1 !important;
    pointer-events: none !important;
    z-index: 10 !important;
}


/* ==========================================================================
   Shop
   ========================================================================== */

/* 1. Hauptproduktbild in Originalgröße lassen und sauber halten */
.single-product .woocommerce-product-gallery__wrapper img,
.single-product .woocommerce-product-gallery__image--main img {
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
}

/* 2. Nur die kleinen Vorschaubilder (Owl-Carousel unten) in saubere Quadrate zwingen */
.single-product .owl-item img {
    width: 120px !important;
    height: 120px !important;
    object-fit: cover !important;
    aspect-ratio: 1 / 1 !important;
}

/* 3. Den Slider-Container für die Thumbnails kompakt halten */
.single-product .owl-stage {
    display: flex !important;
    align-items: center !important;
}

.single-product .owl-item {
    width: 120px !important;
    margin-right: 10px !important;
}

/* Erlaubt wieder das Klicken auf die Galerie-Bilder zum Umschalten */
.single-product .woocommerce-product-gallery__image a {
    pointer-events: auto !important;
}

/* Deaktiviert gezielt den Zoom-Effekt und die Lupe auf dem Hauptbild */
.single-product .woocommerce-product-gallery__image--main .zoomImg,
.single-product .zoomWindow,
.single-product .zoomContainer,
.single-product .cloud-zoom-lens {
    display: none !important;
    pointer-events: none !important;
}

/* Verhindert, dass sich der Mauszeiger in eine Lupe verwandelt */
.single-product .woocommerce-product-gallery__image--main a {
    cursor: default !important;
}

/* Platziert das SHOP-Bild zentriert, in exakt 310x140px mit 25px Abstand unten auf jeder Produktseite */
.single-product div.product::before {
    content: "" !important;
    display: block !important;
    width: 310px !important;
    height: 140px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 45px !important;
    background-image: url("/wp-content/uploads/2026/07/web_element_text_shop.png") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Platziert das SHOP-Bild zentriert über der Produkt-Übersicht auf der Shop-Seite */
.woocommerce-shop .before-loop-wrapper::before,
.archive.woocommerce .before-loop-wrapper::before {
    content: "" !important;
    display: block !important;
    width: 310px !important;
    height: 140px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 35px !important;
    background-image: url("/wp-content/uploads/2026/07/web_element_text_shop.png") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Preis & Euro-Zeichen */
.single-product .summary .price,
.single-product .summary .price * {
    font-size: 32px !important;
    font-weight: bold !important;
    color: #d5ff00 !important;
}

/* Container als quadratischer Block */
.products.grid .thumbnail-wrapper,
.products.grid figure.no-back-image {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    background-color: #ffffff !important;
    overflow: hidden !important;
    border: none !important;
}

/* Bild im Container zentriert */
.products.grid .thumbnail-wrapper img,
.products.grid figure.no-back-image img,
.single-product .woocommerce-product-gallery__image img,
.single-product .owl-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
    border: none !important;
    background: #ffffff !important;
}

/* Farbverlaufs-Rahmen über ein Pseudo-Element */
.products.grid .thumbnail-wrapper::after,
.products.grid figure.no-back-image::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    border: 3px solid #d5ff00 !important; /* Fallback */
    border-image: linear-gradient(to bottom, #d5ff00, #3ab9b8) 1 !important;
    pointer-events: none !important;
    z-index: 10 !important;
}

/* SHOP-ARCHIV: Layout zentrieren */
.products.grid .product-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

.products.grid .meta-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    padding: 15px 0 !important;
}

/* Unnötige Infos ausblenden */
.products.grid .small-business-info,
.products.grid .product-categories {
    display: none !important;
}

/* PRODUKTNAME */
.products.grid h3.product-name {
    order: 1 !important;
    margin: 12px 0 0 0 !important;
}

.products.grid h3.product-name a,
.products.grid h3.product-name {
    font-family: 'Archivo Black', sans-serif !important;
    font-size: 30px !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-transform: uppercase !important;
    font-weight: normal !important;
    text-decoration: none !important;
}

/* PREIS */
.products.grid .meta-wrapper .price,
.products.grid .meta-wrapper .price * {
    order: 2 !important;
    font-family: 'Baloo Chettan 2', cursive, sans-serif !important;
    font-size: 26px !important;
    color: #d5ff00 !important;
    font-weight: bold !important;
}

.products.grid .meta-wrapper .price {
    margin-top: 25px !important; /* Exakt 25px Abstand zum Namen */
    margin-bottom: 5px !important;
    display: block !important;
}

/* VERSANDKOSTEN */
.products.grid .shipping-costs-info,
.products.grid .shipping-costs-info * {
    order: 3 !important;
    font-size: 16px !important;
    color: #ffffff !important;
    margin-top: 0 !important;
    text-decoration: none !important;
}

.products.grid .shipping-costs-info a {
    text-decoration: underline !important;
    color: #ffffff !important;
}

/* Produktname Schrift */
.single-product .product .summary .product-name,
.single-product .product .summary .product-name a {
    font-family: 'Archivo Black', sans-serif !important;
}

/* Selbe Schrift verwenden */
.single-product .product .summary p,
.single-product .product .summary span,
.single-product .product .summary a:not(.product-name a),
.single-product .product .summary div,
.single-product .product .summary .price,
.single-product .product .summary .product_meta,
.single-product .product .summary .wc-gzd-additional-info {
    font-family: 'Baloo Chettan 2', sans-serif !important;
    font-weight: 700 !important;
}

/* Verfügbarkeits-Anzeige */
.single-product .product .summary .availability,
.single-product .product .summary .availability label,
.single-product .product .summary .availability span {
    font-family: 'Baloo Chettan 2', sans-serif !important;
    font-weight: 700 !important;
}

/* "Email to a friend"-Button auf der Produktseite ausblenden */
.single-product .product .summary .email,
.single-product .product .email {
    display: none !important;
}

/* Den Summary-Bereich als saubere Flexbox definieren */
.summary.entry-summary {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
}

/* Den Navigations-Pfeil absolut nach oben rechts setzen */
.summary.entry-summary > .single-navigation {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    order: 0 !important;
}

/* Exakte Reihenfolge der Elemente definieren */
.summary.entry-summary > h1.product_title {
    order: 1 !important;
}

.summary.entry-summary > div.sku-wrapper {
    order: 2 !important;
}

.summary.entry-summary > p.price {
    order: 3 !important;
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}

.summary.entry-summary > div.legal-price-info {
    order: 4 !important;
    margin-bottom: 10px !important;
}

.summary.entry-summary > p.availability {
    order: 5 !important;
    margin-bottom: 25px !important; /* Erzeugt die gewünschte Leerzeile vor der Beschreibung */
}

.summary.entry-summary > div.woocommerce-product-details__short-description {
    order: 6 !important;
}

/* Alle folgenden Elemente (Wishlist, Tabs etc.) danach einreihen */
.summary.entry-summary > *:not(.single-navigation):not(h1.product_title):not(div.sku-wrapper):not(p.price):not(div.legal-price-info):not(p.availability):not(div.woocommerce-product-details__short-description) {
    order: 7 !important;
}

/* Wishlist-Button bei ausverkauften Produkten verstecken */
.product.outofstock .button-in.wishlist,
.product.outofstock .ts-add-to-wishlist {
    display: none !important;
}

.summary.entry-summary .woocommerce-tabs ul.wc-tabs li {
    float: none !important;
    margin: 0 !important;
}

/* "Beschreibung"-Tab linksbündig */
.summary.entry-summary .woocommerce-tabs {
    text-align: left !important;
}
.summary.entry-summary .woocommerce-tabs ul.wc-tabs {
    display: flex !important;
    justify-content: flex-start !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    text-align: left !important;
}
.summary.entry-summary .woocommerce-tabs ul.wc-tabs li {
    float: none !important;
    display: inline-block !important;
    margin: 0 !important;
    text-align: left !important;
}
.summary.entry-summary .woocommerce-tabs ul.wc-tabs li a {
    text-align: left !important;
    display: inline-block !important;
    padding-left: 0 !important;
}

/* "Availability"  in Großbuchstaben */
.summary.entry-summary p.availability {
    text-transform: uppercase !important;
}

/* Exakter Abstand für die Artikelnummer */
.summary.entry-summary div.sku-wrapper,
.summary.entry-summary .sku_wrapper {
    display: block !important;
    clear: both !important;
    margin-top: 10x !important;   
    margin-bottom: 18px !important; 
}

/* "NEW" und "WISHLIST" Badges auf dem Produktbild komplett ausblenden */
.single-product .product-label,
.products .product-label {
    display: none !important;
}



/* ==========================================================================
   Shop-Vorschau
   ========================================================================== */

/* Kleinunternehmer-Hinweis ausblenden */
.small-business-info {
    display: none !important;
}

/* Den Meta-Wrapper auf Flexbox */
.meta-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* Produktname */
.meta-wrapper .product-name a,
.meta-wrapper .product-name {
    order: 1 !important;
    font-family: 'Archivo Black', sans-serif !important;
    font-size: 24px !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-transform: uppercase !important;
    margin-bottom: 12px !important; /* Schafft die gewünschte Leerzeile zum Preis */
}

/* Preis */
.meta-wrapper .price,
.meta-wrapper .price span,
.meta-wrapper .price bdi,
.meta-wrapper .price .amount {
    order: 2 !important;
    font-family: 'Baloo Chettan 2', sans-serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #d5ff00 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Versandkosteninfo */
.meta-wrapper .shipping-costs-info,
.meta-wrapper .shipping-costs-info a {
    order: 3 !important;
    font-family: 'Baloo Chettan 2', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    margin-top: 0 !important;
}

/* zzgl. */
.meta-wrapper .shipping-costs-info {
    color: #ffffff !important;
}

/* Versandkosten */
.meta-wrapper .shipping-costs-info a {
    color: #d5ff00 !important;
    font-size: 15px !important;
}

/* Buttons */
.meta-wrapper .product-group-button-meta {
    order: 4 !important;
    margin-top: 10px !important;
}

/* Den Warenkorb-Button in der Produktbox komplett ausblenden */
.product-group-button.three-button .loop-add-to-cart {
    display: none !important;
}

/* Die verbleibenden Icons (Lupe & Wishlist) permanent in #3ab9b8 (kein Farbwechsel bei Hover) */
.product-group-button.three-button a,
.product-group-button.three-button a i,
.product-group-button.three-button .ts-add-to-wishlist,
.product-group-button.three-button .ts-add-to-wishlist::before {
    color: #3ab9b8 !important;
    fill: #3ab9b8 !important;
}

/* Hover-Effekte für die verbleibenden Icons deaktivieren */
.product-group-button.three-button a:hover,
.product-group-button.three-button a:hover i,
.product-group-button.three-button .ts-add-to-wishlist:hover,
.product-group-button.three-button .ts-add-to-wishlist:hover::before {
    color: #3ab9b8 !important;
    fill: #3ab9b8 !important;
}

/* Exakter Verlaufsrahmen für alle Produkt-Thumbnail-Container im Shop-Grid */
.woocommerce ul.products li.product .thumbnail-wrapper,
.products .product .thumbnail-wrapper {
    position: relative !important;
}

.woocommerce ul.products li.product .thumbnail-wrapper::after,
.products .product .thumbnail-wrapper::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    border: 3px solid #d5ff00 !important; /* Fallback */
    border-image: linear-gradient(to bottom, #d5ff00, #3ab9b8) 1 !important;
    pointer-events: none !important;
    z-index: 10 !important;
}