/* Font Awesome base classes */
.fa, .fas, .far, .fab {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   display: inline-block;
   font-style: normal;
   font-variant: normal;
   line-height: 1;
   text-rendering: auto;
}

/* Solid icons */
.fa-solid, .fas {
   font-family: "Font Awesome 6 Free";
   font-weight: 900;
}

/* Regular icons */
.fa-regular, .far {
   font-family: "Font Awesome 6 Free";
   font-weight: 400;
}

/* Brand icons */
.fa-brands, .fab {
   font-family: "Font Awesome 6 Brands";
   font-weight: 400;
}
body
{
   background: linear-gradient(135deg, #FFF8DC 0%, #F4A460 50%, #DEB887 100%);
   min-height: 100vh;
   font-family: "Open Sans", Arial, sans-serif;
   position: relative;
   overflow-x: hidden;
   color: #000000;
   font-weight: normal;
   font-size: 13px;
   line-height: 1.1875;
   margin: 0;
   padding: 0;
}

/* Animated Background Elements - matching warenkorb.html */
body::before {
   content: '';
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: 
       radial-gradient(circle at 20% 30%, rgba(210, 105, 30, 0.1) 0%, transparent 50%),
       radial-gradient(circle at 80% 70%, rgba(222, 184, 135, 0.1) 0%, transparent 50%),
       radial-gradient(circle at 40% 80%, rgba(244, 164, 96, 0.1) 0%, transparent 50%);
   animation: gradientShift 15s ease-in-out infinite;
   z-index: -2;
}

body::after {
   content: '';
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-image: 
       radial-gradient(circle at 25% 25%, #D2691E 2px, transparent 2px),
       radial-gradient(circle at 75% 75%, #DEB887 1px, transparent 1px);
   background-size: 50px 50px, 30px 30px;
   opacity: 0.3;
   animation: particleFloat 20s linear infinite;
   z-index: -1;
}

/* Animated gradient background - matching warenkorb.html */
@keyframes gradientShift {
   0% {
      background-position: 0% 50%;
   }
   50% {
      background-position: 100% 50%;
   }
   100% {
      background-position: 0% 50%;
   }
}

@keyframes particleFloat {
   0% {
      transform: translateY(0px) rotate(0deg);
   }
   50% {
      transform: translateY(-20px) rotate(180deg);
   }
   100% {
      transform: translateY(0px) rotate(360deg);
   }
}

/* Unified Button Styles - matching warenkorb.html design */
.btn-primary,
.btn-secondary,
button.btn-primary,
button.btn-secondary,
.contact-btn,
.honey-btn,
.shopping-cart-btn {
   padding: 12px 25px;
   border: none;
   border-radius: 8px;
   font-size: 16px;
   font-weight: bold;
   cursor: pointer;
   transition: all 0.2s;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   text-decoration: none;
   background: linear-gradient(135deg, #D2691E, #DEB887);
   color: white;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-primary:hover,
.btn-secondary:hover,
button.btn-primary:hover,
button.btn-secondary:hover,
.contact-btn:hover,
.honey-btn:hover,
.shopping-cart-btn:hover {
   background: linear-gradient(135deg, #B8621E, #D2B48C);
   transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   color: white;
   text-decoration: none;
}

/* Secondary button variant */
.btn-secondary {
   background: rgba(255, 255, 255, 0.9) !important;
   color: #D2691E !important;
   border: 2px solid #D2691E !important;
}

.btn-secondary:hover {
   background: rgba(255, 255, 255, 1) !important;
   border-color: #B8621E !important;
   color: #B8621E !important;
}

/* Icon styles for buttons */
.btn-primary i,
.btn-secondary i,
.contact-btn i,
.honey-btn i,
.shopping-cart-btn i {
   font-size: 1.1em;
}

/* Cart button styling */
.cart-btn,
.add-to-cart {
   padding: 10px 20px;
   border: none;
   border-radius: 8px;
   font-size: 14px;
   font-weight: bold;
   cursor: pointer;
   transition: all 0.2s;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: linear-gradient(135deg, #D2691E, #DEB887);
   color: white;
   text-decoration: none;
}

.cart-btn:hover,
.add-to-cart:hover {
   background: linear-gradient(135deg, #B8621E, #D2B48C);
   transform: translateY(-1px);
   box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
   color: white;
   text-decoration: none;
}

/* Ensure content appears above background animations */
.container, #headerLayoutGrid, #welcomeLayoutGrid, #menuLayoutGrid, 
#aboutLayoutGrid1, #shopLayoutGrid1, #shopLayoutGrid2, #galleryLayoutGrid1, 
#galleryLayoutGrid2, #specialsLayoutGrid, #infoLayoutGrid, #contactLayoutGrid1, 
#contactLayoutGrid2, #socialsLayoutGrid, #footerLayoutGrid {
   position: relative;
   z-index: 10;
}

/* ===== MOBILE-FIRST ENHANCEMENTS ===== */
/* 1. Mobile Navigation with Hamburger Menu */
.mobile-nav-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    color: #8B4513;
    padding: 12px;
    cursor: pointer;
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 1003;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    min-width: 44px;
    min-height: 44px;
}

.mobile-nav-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100vh;
    background: linear-gradient(135deg, #F4E4BC, #E6D3A3);
    box-shadow: -5px 0 20px rgba(0, 0, 0, 0.2);
    transition: right 0.3s ease;
    z-index: 1002;
    padding: 80px 20px 20px;
    overflow-y: auto;
}

.mobile-nav-menu.active {
    right: 0;
}

.mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.mobile-nav-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-nav-item {
    display: block;
    padding: 15px 20px;
    margin: 8px 0;
    color: #8B4513;
    text-decoration: none;
    font-weight: 600;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.7);
    transition: all 0.3s ease;
    min-height: 44px;
    display: flex;
    align-items: center;
    font-size: 16px;
}

.mobile-nav-item:hover,
.mobile-nav-item:focus {
    background: rgba(139, 69, 19, 0.1);
    transform: translateX(5px);
    outline: none;
}

/* 2. Mobile-First Typography & Touch Targets */
@media (max-width: 768px) {
    .mobile-nav-toggle {
        display: block;
    }

    body {
        font-size: 16px;
        line-height: 1.6;
        -webkit-text-size-adjust: 100%;
    }
    
    h1 {
        font-size: 28px;
        line-height: 1.3;
        margin-bottom: 16px;
    }
    
    h2 {
        font-size: 24px;
        line-height: 1.4;
        margin-bottom: 12px;
    }
    
    h3 {
        font-size: 20px;
        line-height: 1.4;
        margin-bottom: 10px;
    }
    
    p {
        font-size: 16px;
        line-height: 1.6;
        margin-bottom: 16px;
    }

    /* Touch-friendly containers */
    .container {
        padding: 0 16px;
    }
    
    /* Hero section mobile optimization */
    .hero-content h1 {
        font-size: 32px;
        text-align: center;
        padding: 0 20px;
    }

    .hero-content p {
        font-size: 18px;
        text-align: center;
        padding: 0 20px;
    }

    /* Mobile-optimized grid layouts */
    #headerLayoutGrid > .col-1, #headerLayoutGrid > .col-2 {
        flex-basis: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        padding: 10px 15px;
    }

    #welcomeLayoutGrid > .col-1 {
        padding: 20px;
    }

    #menuLayoutGrid > .row > .col-1, 
    #menuLayoutGrid > .row > .col-2, 
    #menuLayoutGrid > .row > .col-3, 
    #menuLayoutGrid > .row > .col-4 {
        width: 100% !important;
        margin-bottom: 20px;
    }
}

/* 3. Touch-Optimized Product Cards */
@media (max-width: 768px) {
    .product-card {
        margin: 10px 5px;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        cursor: pointer;
    }
    
    .product-card:active {
        transform: scale(0.98);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    }
    
    .product-image img {
        height: 200px;
        object-fit: cover;
        width: 100%;
    }
    
    .product-info {
        padding: 16px;
    }
    
    .product-title {
        font-size: 18px;
        line-height: 1.3;
        margin-bottom: 8px;
        font-weight: 600;
    }
    
    .product-description {
        font-size: 14px;
        line-height: 1.5;
        color: #666;
        margin-bottom: 12px;
    }
    
    .product-price {
        font-size: 16px;
        font-weight: 700;
        color: #8B4513;
        margin-bottom: 12px;
    }
    
    .add-to-cart,
    .btn,
    button {
        min-height: 48px;
        min-width: 48px;
        font-size: 16px;
        border-radius: 12px;
        border: none;
        font-weight: 600;
        transition: all 0.2s ease;
        cursor: pointer;
        padding: 12px 20px;
    }
    
    .add-to-cart {
        width: 100%;
        background: linear-gradient(135deg, #D4A574, #B8956A);
        color: white;
    }
    
    .add-to-cart:active,
    .btn:active,
    button:active {
        transform: scale(0.95);
    }

    /* Contact form mobile optimization */
    .contact-form {
        padding: 20px;
        margin: 20px 10px;
        border-radius: 16px;
    }

    .contact-form input,
    .contact-form textarea,
    .contact-form select {
        min-height: 48px;
        font-size: 16px;
        padding: 12px 16px;
        border-radius: 12px;
        border: 2px solid #ddd;
        width: 100%;
        margin-bottom: 16px;
        transition: border-color 0.2s ease;
    }

    .contact-form input:focus,
    .contact-form textarea:focus,
    .contact-form select:focus {
        border-color: #D4A574;
        outline: none;
        box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.1);
    }

    .contact-form textarea {
        min-height: 120px;
        resize: vertical;
    }

    /* Floating cart optimization */
    #floating-cart-icon {
        width: 60px;
        height: 60px;
        bottom: 20px;
        right: 20px;
        border-radius: 50%;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        z-index: 900;
    }

    /* Touch enhancement */
    * {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    /* Prevent zoom on input focus (iOS) */
    input[type="email"],
    input[type="text"],
    input[type="tel"],
    input[type="number"],
    textarea,
    select {
        font-size: 16px !important;
    }

    /* Enhanced scrolling */
    .horizontal-scroll {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }

    /* Footer buttons mobile optimization - CRITICAL FIX */
    #footerLayoutGrid {
        padding-bottom: 120px !important;
        margin-bottom: 20px;
    }

    #Button2, #Button3 {
        display: flex !important;
        align-items: center;
        justify-content: center;
        min-height: 48px !important;
        margin: 12px auto !important;
        max-width: 300px;
        width: 90% !important;
        padding: 16px 20px !important;
        font-size: 16px !important;
        border-radius: 12px !important;
        text-decoration: none !important;
        background: rgba(255, 255, 255, 0.95) !important;
        border: 2px solid #8B4513 !important;
        color: #8B4513 !important;
        font-weight: 600 !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
        transition: all 0.2s ease !important;
        gap: 8px;
        z-index: 10 !important;
        position: relative;
    }

    #Button2:hover, #Button3:hover,
    #Button2:focus, #Button3:focus {
        background: #8B4513 !important;
        color: white !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
    }

    #Button2:active, #Button3:active {
        transform: scale(0.95) !important;
    }

    /* Footer text optimization */
    #footerText {
        margin-bottom: 30px !important;
        padding: 0 20px !important;
    }

    #footer-bank-info {
        margin: 20px 10px 30px 10px !important;
        padding: 16px !important;
        border-radius: 12px !important;
        background: rgba(255, 255, 255, 0.9) !important;
    }

    /* Ensure footer has enough space above floating cart */
    body {
        padding-bottom: 100px;
    }

    #wb_footerLayoutGrid {
        margin-bottom: 80px !important;
    }
}
*
{
   scrollbar-color: rgba(160, 198, 185, 1.00) rgba(0, 0, 0, 1.00);
}
*::-webkit-scrollbar
{
   width: 16px;
}
*::-webkit-scrollbar-track
{
   background: rgba(0, 0, 0, 1.00);
}
*::-webkit-scrollbar-thumb
{
   background-color: rgba(160, 198, 185, 1.00);
   border: 2px solid rgba(0, 0, 0, 1.00);
}
*::-webkit-scrollbar-corner
{
   background: rgba(0, 0, 0, 1.00);
}
a
{
   color: #000000;
   text-decoration: underline;
}
a:hover
{
   color: #696969;
   text-decoration: underline;
}

/* Modern Contact Form Styles */
.contact-form-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
}

.contact-form-content {
    padding: 1rem;
}

.contact-form-title {
    font-size: 2rem;
    color: #D2691E;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.contact-form-subtitle {
    color: #666;
    margin-bottom: 2rem;
    font-size: 1.1rem;
    line-height: 1.5;
}

.modern-contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 12px 16px;
    border: 2px solid #e1e1e1;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.9);
    font-family: inherit;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #FFA500;
    box-shadow: 0 0 0 3px rgba(255, 165, 0, 0.1);
    background: white;
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.checkbox-group {
    margin: 1rem 0;
}

.checkbox-label {
    display: block;
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1.4;
    text-align: left;
    padding-left: 30px;
    position: relative;
}

.checkbox-label input[type="checkbox"] {
    position: absolute;
    left: 0;
    top: 2px;
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
}

.checkbox-label a {
    white-space: nowrap;
    word-break: keep-all;
}

.checkbox-label span {
    display: inline;
    word-break: keep-all;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
}

.contact-submit-btn {
    background: #2c5530;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    width: auto;
    max-width: 200px;
    margin: 0 auto;
}

.contact-submit-btn:hover {
    background: #1e3d22;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(44, 85, 48, 0.3);
}

.contact-submit-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-loading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.loading-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.form-status {
    margin-top: 1rem;
    padding: 12px;
    border-radius: 6px;
    font-weight: 500;
    text-align: center;
    display: none;
}

.form-status.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.form-status.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.contact-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 2rem;
}

.contact-image {
    width: 100%;
    max-width: 300px;
}

.contact-img {
    width: 100%;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.contact-details h4 {
    color: #D2691E;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

.contact-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
    font-size: 1rem;
    color: #555;
}

.contact-item i {
    color: #FFA500;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .contact-form-container {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 1.5rem;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .contact-form-title {
        font-size: 1.5rem;
    }
    
    .contact-info {
        order: -1;
    }
}

@media (max-width: 480px) {
    .contact-form-container {
        padding: 1rem;
    }
    
    .contact-form-title {
        font-size: 1.3rem;
    }
    
    .contact-submit-btn {
        padding: 12px 24px;
        font-size: 1rem;
    }
}
/* Font Awesome 6 - Custom font paths and icon definitions */
@font-face {
    font-family: "Font Awesome 6 Free";
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url("../fontawesome/fa-solid-900.woff2") format("woff2"),
         url("../fontawesome/fa-solid-900.ttf") format("truetype");
}
@font-face {
    font-family: "Font Awesome 6 Free";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("../fontawesome/fa-regular-400.woff2") format("woff2"),
         url("../fontawesome/fa-regular-400.ttf") format("truetype");
}
@font-face {
    font-family: "Font Awesome 6 Brands";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("../fontawesome/fa-brands-400.woff2") format("woff2"),
         url("../fontawesome/fa-brands-400.ttf") format("truetype");
}

/* Font Awesome base classes */
.fa, .fas, .far, .fab {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;
}

/* Solid icons */
.fa-solid, .fas {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

/* Regular icons */
.fa-regular, .far {
    font-family: "Font Awesome 6 Free";
    font-weight: 400;
}

/* Brand icons */
.fa-brands, .fab {
    font-family: "Font Awesome 6 Brands";
    font-weight: 400;
}

/* Common icons used in your site */
.fa-envelope:before { content: "\f0e0"; }
.fa-phone:before { content: "\f095"; }
.fa-map-marker:before, .fa-map-marker-alt:before { content: "\f3c5"; }
.fa-shopping-cart:before { content: "\f07a"; }
.fa-plus:before { content: "\f067"; }
.fa-minus:before { content: "\f068"; }
.fa-times:before { content: "\f00d"; }
.fa-check:before { content: "\f00c"; }
.fa-arrow-up:before { content: "\f062"; }
.fa-chevron-left:before { content: "\f053"; }
.fa-chevron-right:before { content: "\f054"; }
@keyframes slide-up-in
{
   0% { transform: translate(0px,100%) rotate(1deg) ; opacity: 0; transform-origin: 0 0;  }
   100% { opacity: 1; transform: translate(0px,0px) rotate(0deg) ; transform-origin: 0 0;  }
}
#wb_headerLayoutGrid
{
   clear: both;
   position: relative;
   table-layout: fixed;
   display: table;
   text-align: center;
   width: 100%;
   background-color: transparent;
   background-image: none;
   border: 0px dashed #CCCCCC;
   border-radius: 0px;
   box-sizing: border-box;
   margin: 0;
}
#headerLayoutGrid
{
   box-sizing: border-box;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   padding: 25px 0px 25px 0px;
   margin-right: auto;
   margin-left: auto;
   max-width: 1140px;
}
#headerLayoutGrid > .col-1, #headerLayoutGrid > .col-2
{
   box-sizing: border-box;
   font-size: 0;
   min-height: 1px;
   padding-right: 15px;
   padding-left: 15px;
   position: relative;
}
#headerLayoutGrid > .col-1, #headerLayoutGrid > .col-2
{
   flex: 0 0 auto;
}
#headerLayoutGrid > .col-1
{
   background-color: transparent;
   background-image: none;
   flex-basis: 58.33333333%;
   max-width: 58.33333333%;
   display: flex;
   flex-wrap: wrap;
   align-content: center;
   align-self: stretch;
   align-items: center;
   justify-content: flex-start;
   text-align: left;
}
#headerLayoutGrid > .col-2
{
   background-color: transparent;
   background-image: none;
   flex-basis: 41.66666667%;
   max-width: 41.66666667%;
   display: flex;
   flex-wrap: wrap;
   align-content: flex-start;
   align-self: stretch;
   align-items: flex-start;
   justify-content: flex-end;
   text-align: right;
}
@media (max-width: 480px)
{
#headerLayoutGrid > .col-1, #headerLayoutGrid > .col-2
{
   flex-basis: 100% !important;
   max-width: 100% !important;
}
}
#wb_welcomeLayoutGrid
{
   clear: both;
   position: relative;
   table-layout: fixed;
   display: table;
   text-align: center;
   width: 100%;
   background-color: transparent;
   background-image: url('../images/wallpaper/LueneburgerHeide.jpg');
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
   border: 0px dashed #CCCCCC;
   border-radius: 0px;
   box-sizing: border-box;
   margin: 0;
   min-height: 500px;
}
#welcomeLayoutGrid
{
   box-sizing: border-box;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   padding: 100px 0px 100px 0px;
   margin-right: auto;
   margin-left: auto;
   max-width: 1140px;
   align-items: center;
   justify-content: center;
   min-height: 500px;
}
#welcomeLayoutGrid > .col-1, #welcomeLayoutGrid > .col-2
{
   box-sizing: border-box;
   font-size: 0;
   min-height: 1px;
   padding-right: 15px;
   padding-left: 15px;
   position: relative;
}
#welcomeLayoutGrid > .col-1, #welcomeLayoutGrid > .col-2
{
   flex: 0 0 auto;
}
#welcomeLayoutGrid > .col-1
{
   background: transparent;
   background-image: none;
   flex-basis: 100%;
   max-width: 800px;
   display: flex;
   flex-wrap: wrap;
   align-content: center;
   align-self: center;
   align-items: center;
   justify-content: center;
   text-align: center;
   margin: 0 auto;
}
#welcomeLayoutGrid > .col-1 > .col-1-padding
{
   box-sizing: border-box;
   width: 100%;
   padding: 100px 0px 100px 0px;
}
#welcomeLayoutGrid > .col-2
{
   display: none;
}
@media (max-width: 768px)
{
#welcomeLayoutGrid > .col-1
{
   flex-basis: 100% !important;
   max-width: 100% !important;
   margin: 20px;
}
}
#wb_menuLayoutGrid
{
   clear: both;
   position: relative;
   table-layout: fixed;
   display: table;
   text-align: center;
   width: 100%;
   background-color: transparent;
   background-image: none;
   border: 0px dashed #CCCCCC;
   border-radius: 0px;
   box-sizing: border-box;
   margin: 0;
}
#menuLayoutGrid
{
   box-sizing: border-box;
   padding: 50px 15px 0px 15px;
   margin-right: auto;
   margin-left: auto;
   max-width: 1140px;
}
#menuLayoutGrid > .row
{
   margin-right: -15px;
   margin-left: -15px;
}
#menuLayoutGrid > .row > .col-1, #menuLayoutGrid > .row > .col-2, #menuLayoutGrid > .row > .col-3, #menuLayoutGrid > .row > .col-4
{
   box-sizing: border-box;
   font-size: 0;
   min-height: 1px;
   padding-right: 15px;
   padding-left: 15px;
   position: relative;
}
#menuLayoutGrid > .row > .col-1, #menuLayoutGrid > .row > .col-2, #menuLayoutGrid > .row > .col-3, #menuLayoutGrid > .row > .col-4
{
   float: left;
}
#menuLayoutGrid > .row > .col-1
{
   background-color: transparent;
   background-image: none;
   width: 25%;
   text-align: center;
}
#menuLayoutGrid > .row > .col-2
{
   background-color: transparent;
   background-image: none;
   width: 25%;
   text-align: center;
}
#menuLayoutGrid > .row > .col-3
{
   background-color: transparent;
   background-image: none;
   width: 25%;
   text-align: center;
}
#menuLayoutGrid > .row > .col-4
{
   background-color: transparent;
   background-image: none;
   width: 25%;
   text-align: center;
}
#menuLayoutGrid:before,
#menuLayoutGrid:after,
#menuLayoutGrid .row:before,
#menuLayoutGrid .row:after
{
   display: table;
   content: " ";
}
#menuLayoutGrid:after,
#menuLayoutGrid .row:after
{
   clear: both;
}
@media (max-width: 768px)
{
#menuLayoutGrid > .row > .col-1, #menuLayoutGrid > .row > .col-2, #menuLayoutGrid > .row > .col-3, #menuLayoutGrid > .row > .col-4
{
   float: none;
   width: 100% !important;
}
}
#wb_aboutLayoutGrid1
{
   clear: both;
   position: relative;
   table-layout: fixed;
   display: table;
   text-align: center;
   width: 100%;
   background-color: transparent;
   background-image: url('../images/wallpaper/Heidelandschaft.jpg');
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
   border: 0px dashed #CCCCCC;
   border-radius: 0px;
   box-sizing: border-box;
   margin: 0;
   min-height: 500px;
}
#aboutLayoutGrid1
{
   box-sizing: border-box;
   padding: 100px 15px 100px 15px;
   margin-right: auto;
   margin-left: auto;
   max-width: 1140px;
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 500px;
}
#aboutLayoutGrid1 > .row
{
   margin-right: -15px;
   margin-left: -15px;
}
#aboutLayoutGrid1 > .row > .col-1, #aboutLayoutGrid1 > .row > .col-2
{
   box-sizing: border-box;
   font-size: 0;
   min-height: 1px;
   padding-right: 15px;
   padding-left: 15px;
   position: relative;
}
#aboutLayoutGrid1 > .row > .col-1, #aboutLayoutGrid1 > .row > .col-2
{
   float: left;
}
#aboutLayoutGrid1 > .row > .col-1
{
   background-color: transparent;
   background-image: none;
   width: 50%;
   text-align: left;
}
#aboutLayoutGrid1 > .row > .col-1 > .col-1-padding
{
   box-sizing: border-box;
   width: 100%;
   padding: 50px 0px 50px 0px;
}
#aboutLayoutGrid1 > .row > .col-2
{
   background-color: transparent;
   background-image: none;
   width: 50%;
   text-align: left;
}
#aboutLayoutGrid1 > .row > .col-2 > .col-2-padding
{
   box-sizing: border-box;
   width: 100%;
   padding: 50px 0px 50px 0px;
}
#aboutLayoutGrid1:before,
#aboutLayoutGrid1:after,
#aboutLayoutGrid1 .row:before,
#aboutLayoutGrid1 .row:after
{
   display: table;
   content: " ";
}
#aboutLayoutGrid1:after,
#aboutLayoutGrid1 .row:after
{
   clear: both;
}
@media (max-width: 768px)
{
#aboutLayoutGrid1 > .row > .col-1, #aboutLayoutGrid1 > .row > .col-2
{
   float: none;
   width: 100% !important;
}
}
#wb_shopLayoutGrid1
{
   clear: both;
   position: relative;
   table-layout: fixed;
   display: table;
   text-align: center;
   width: 100%;
   background-color: transparent;
   background-image: none;
   border: 0px dashed #CCCCCC;
   border-radius: 0px;
   box-sizing: border-box;
   margin: 0;
}
#shopLayoutGrid1
{
   box-sizing: border-box;
   padding: 60px 15px 0px 15px;
   margin-right: auto;
   margin-left: auto;
   max-width: 1140px;
}
#shopLayoutGrid1 > .row
{
   margin-right: -15px;
   margin-left: -15px;
}
#shopLayoutGrid1 > .row > .col-1
{
   box-sizing: border-box;
   font-size: 0;
   min-height: 1px;
   padding-right: 15px;
   padding-left: 15px;
   position: relative;
}
#shopLayoutGrid1 > .row > .col-1
{
   float: left;
}
#shopLayoutGrid1 > .row > .col-1
{
   background-color: transparent;
   background-image: none;
   width: 100%;
   text-align: center;
}
#shopLayoutGrid1:before,
#shopLayoutGrid1:after,
#shopLayoutGrid1 .row:before,
#shopLayoutGrid1 .row:after
{
   display: table;
   content: " ";
}
#shopLayoutGrid1:after,
#shopLayoutGrid1 .row:after
{
   clear: both;
}
@media (max-width: 480px)
{
#shopLayoutGrid1 > .row > .col-1
{
   float: none;
   width: 100% !important;
}
}
#wb_shopLayoutGrid2
{
   clear: both;
   position: relative;
   table-layout: fixed;
   display: table;
   text-align: center;
   width: 100%;
   background-color: transparent;
   background-image: none;
   border: 0px dashed #CCCCCC;
   border-radius: 0px;
   box-sizing: border-box;
   margin: 0;
}
#shopLayoutGrid2
{
   box-sizing: border-box;
   padding: 50px 15px 50px 15px;
   margin-right: auto;
   margin-left: auto;
   max-width: 1140px;
}
#shopLayoutGrid2 > .row
{
   margin-right: -15px;
   margin-left: -15px;
}
#shopLayoutGrid2 > .row > .col-1, #shopLayoutGrid2 > .row > .col-2, #shopLayoutGrid2 > .row > .col-3
{
   box-sizing: border-box;
   font-size: 0;
   min-height: 1px;
   padding-right: 15px;
   padding-left: 15px;
   position: relative;
}
#shopLayoutGrid2 > .row > .col-1, #shopLayoutGrid2 > .row > .col-2, #shopLayoutGrid2 > .row > .col-3
{
   float: left;
}
#shopLayoutGrid2 > .row > .col-1
{
   background-color: transparent;
   background-image: none;
   width: 33.33333333%;
   text-align: left;
}
#shopLayoutGrid2 > .row > .col-2
{
   background-color: transparent;
   background-image: none;
   width: 33.33333333%;
   text-align: left;
}
#shopLayoutGrid2 > .row > .col-3
{
   background-color: transparent;
   background-image: none;
   width: 33.33333333%;
   text-align: left;
}
#shopLayoutGrid2:before,
#shopLayoutGrid2:after,
#shopLayoutGrid2 .row:before,
#shopLayoutGrid2 .row:after
{
   display: table;
   content: " ";
}
#shopLayoutGrid2:after,
#shopLayoutGrid2 .row:after
{
   clear: both;
}
@media (max-width: 768px)
{
#shopLayoutGrid2 > .row > .col-1, #shopLayoutGrid2 > .row > .col-2, #shopLayoutGrid2 > .row > .col-3
{
   float: none;
   width: 100% !important;
}
}
#wb_galleryLayoutGrid1
{
   clear: both;
   position: relative;
   table-layout: fixed;
   display: table;
   text-align: center;
   width: 100%;
   background-color: #FFFFFF;
   background-image: none;
   border: 0px dashed #CCCCCC;
   border-radius: 0px;
   box-sizing: border-box;
   margin: 0;
}
#galleryLayoutGrid1
{
   box-sizing: border-box;
   padding: 60px 15px 0px 15px;
   margin-right: auto;
   margin-left: auto;
   max-width: 1140px;
}
#galleryLayoutGrid1 > .row
{
   margin-right: -15px;
   margin-left: -15px;
}
#galleryLayoutGrid1 > .row > .col-1
{
   box-sizing: border-box;
   font-size: 0;
   min-height: 1px;
   padding-right: 15px;
   padding-left: 15px;
   position: relative;
}
#galleryLayoutGrid1 > .row > .col-1
{
   float: left;
}
#galleryLayoutGrid1 > .row > .col-1
{
   background-color: transparent;
   background-image: none;
   width: 100%;
   text-align: center;
}
#galleryLayoutGrid1:before,
#galleryLayoutGrid1:after,
#galleryLayoutGrid1 .row:before,
#galleryLayoutGrid1 .row:after
{
   display: table;
   content: " ";
}
#galleryLayoutGrid1:after,
#galleryLayoutGrid1 .row:after
{
   clear: both;
}
@media (max-width: 480px)
{
#galleryLayoutGrid1 > .row > .col-1
{
   float: none;
   width: 100% !important;
}
}
#wb_galleryLayoutGrid2
{
   clear: both;
   position: relative;
   table-layout: fixed;
   display: table;
   text-align: center;
   width: 100%;
   background-color: #FFFFFF;
   background-image: none;
   border: 0px dashed #CCCCCC;
   border-radius: 0px;
   box-sizing: border-box;
   margin: 0;
}
#galleryLayoutGrid2
{
   box-sizing: border-box;
   padding: 50px 15px 50px 15px;
   margin-right: auto;
   margin-left: auto;
   max-width: 1140px;
}
#galleryLayoutGrid2 > .row
{
   margin-right: -15px;
   margin-left: -15px;
}
#galleryLayoutGrid2 > .row > .col-1
{
   box-sizing: border-box;
   font-size: 0;
   min-height: 1px;
   padding-right: 15px;
   padding-left: 15px;
   position: relative;
}
#galleryLayoutGrid2 > .row > .col-1
{
   float: left;
}
#galleryLayoutGrid2 > .row > .col-1
{
   background-color: transparent;
   background-image: none;
   width: 100%;
   text-align: center;
}
#galleryLayoutGrid2:before,
#galleryLayoutGrid2:after,
#galleryLayoutGrid2 .row:before,
#galleryLayoutGrid2 .row:after
{
   display: table;
   content: " ";
}
#galleryLayoutGrid2:after,
#galleryLayoutGrid2 .row:after
{
   clear: both;
}
@media (max-width: 480px)
{
#galleryLayoutGrid2 > .row > .col-1
{
   float: none;
   width: 100% !important;
}
}
#wb_specialsLayoutGrid
{
   clear: both;
   position: relative;
   table-layout: fixed;
   display: table;
   text-align: center;
   width: 100%;
   background-color: transparent;
   background-image: url('../images/wallpaper/Rapsfeld.jpg');
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
   border: 0px dashed #CCCCCC;
   border-radius: 0px;
   box-sizing: border-box;
   margin: 0;
}
#specialsLayoutGrid
{
   box-sizing: border-box;
   padding: 100px 15px 100px 15px;
   margin-right: auto;
   margin-left: auto;
   max-width: 1140px;
}
#specialsLayoutGrid > .row
{
   margin-right: -15px;
   margin-left: -15px;
}
#specialsLayoutGrid > .row > .col-1, #specialsLayoutGrid > .row > .col-2
{
   box-sizing: border-box;
   font-size: 0;
   min-height: 1px;
   padding-right: 15px;
   padding-left: 15px;
   position: relative;
}
#specialsLayoutGrid > .row > .col-1, #specialsLayoutGrid > .row > .col-2
{
   float: left;
}
#specialsLayoutGrid > .row > .col-1
{
   background-color: transparent;
   background-image: none;
   width: 50%;
   text-align: center;
}
#specialsLayoutGrid > .row > .col-2
{
   background-color: transparent;
   background-image: none;
   width: 50%;
   text-align: left;
}
#specialsLayoutGrid:before,
#specialsLayoutGrid:after,
#specialsLayoutGrid .row:before,
#specialsLayoutGrid .row:after
{
   display: table;
   content: " ";
}
#specialsLayoutGrid:after,
#specialsLayoutGrid .row:after
{
   clear: both;
}
@media (max-width: 768px)
{
#specialsLayoutGrid > .row > .col-1, #specialsLayoutGrid > .row > .col-2
{
   float: none;
   width: 100% !important;
}
}
#wb_infoLayoutGrid
{
   clear: both;
   position: relative;
   table-layout: fixed;
   display: table;
   text-align: center;
   width: 100%;
   background-color: #FFFFFF;
   background-image: none;
   border: 0px none #FFFFFF;
   border-radius: 0px;
   box-sizing: border-box;
   margin: 0;
}
#infoLayoutGrid
{
   box-sizing: border-box;
   width: 100%;
   padding: 50px 15px 50px 15px;
   margin-right: auto;
   margin-left: auto;
   max-width: 1140px;
}
#infoLayoutGrid > .row
{
   display: grid;
   grid-template-columns: 5fr 20px 5fr ;
   margin-right: -15px;
   margin-left: -15px;
}
#infoLayoutGrid > .row > .col-1, #infoLayoutGrid > .row > .col-2, #infoLayoutGrid > .row > .col-3
{
   box-sizing: border-box;
   font-size: 0;
   min-height: 1px;
   padding-right: 15px;
   padding-left: 15px;
   position: relative;
   grid-column: span 12;
}
#infoLayoutGrid > .row > .col-1, #infoLayoutGrid > .row > .col-2, #infoLayoutGrid > .row > .col-3
{
}
#infoLayoutGrid > .row > .col-1
{
   background-color: transparent;
   background-image: none;
   grid-column: span 1;
   flex-wrap: wrap;
   align-content: flex-start;
   align-self: stretch;
   align-items: flex-start;
   text-align: center;
}
#infoLayoutGrid > .row > .col-2
{
   background-color: transparent;
   background-image: none;
   grid-column: span 1;
   flex-wrap: wrap;
   align-content: flex-start;
   align-self: stretch;
   align-items: flex-start;
   text-align: center;
}
#infoLayoutGrid > .row > .col-3
{
   background-color: transparent;
   background-image: none;
   grid-column: span 1;
   flex-wrap: wrap;
   align-content: flex-start;
   align-self: stretch;
   align-items: flex-start;
   text-align: left;
}
#infoLayoutGrid > .row > .col-3 > .col-3-padding
{
   box-sizing: border-box;
   width: 100%;
   padding: 20px 20px 20px 20px;
}
@media (max-width: 768px)
{
#infoLayoutGrid > .row > .col-1, #infoLayoutGrid > .row > .col-2, #infoLayoutGrid > .row > .col-3
{
   width: 100%;
   grid-column: span 12;
}
}
#wb_contactLayoutGrid1
{
   clear: both;
   position: relative;
   table-layout: fixed;
   display: table;
   text-align: center;
   width: 100%;
   background-color: transparent;
   background-image: none;
   border: 0px dashed #CCCCCC;
   border-radius: 0px;
   box-sizing: border-box;
   margin: 0;
}
#contactLayoutGrid1
{
   box-sizing: border-box;
   padding: 100px 15px 0px 15px;
   margin-right: auto;
   margin-left: auto;
   max-width: 1140px;
}
#contactLayoutGrid1 > .row
{
   margin-right: -15px;
   margin-left: -15px;
}
#contactLayoutGrid1 > .row > .col-1
{
   box-sizing: border-box;
   font-size: 0;
   min-height: 1px;
   padding-right: 15px;
   padding-left: 15px;
   position: relative;
}
#contactLayoutGrid1 > .row > .col-1
{
   float: left;
}
#contactLayoutGrid1 > .row > .col-1
{
   background-color: transparent;
   background-image: none;
   width: 100%;
   text-align: center;
}
#contactLayoutGrid1:before,
#contactLayoutGrid1:after,
#contactLayoutGrid1 .row:before,
#contactLayoutGrid1 .row:after
{
   display: table;
   content: " ";
}
#contactLayoutGrid1:after,
#contactLayoutGrid1 .row:after
{
   clear: both;
}
@media (max-width: 480px)
{
#contactLayoutGrid1 > .row > .col-1
{
   float: none;
   width: 100% !important;
}
}
#wb_contactLayoutGrid2
{
   clear: both;
   position: relative;
   table-layout: fixed;
   display: table;
   text-align: center;
   width: 100%;
   background: linear-gradient(135deg, #D2691E, #DEB887, #F4A460);
   background-image: none;
   border: 0px none #DDDDDD;
   border-radius: 0px;
   box-sizing: border-box;
   margin: 0;
}
#contactLayoutGrid2
{
   box-sizing: border-box;
   padding: 50px 15px 100px 15px;
   margin-right: auto;
   margin-left: auto;
   max-width: 1140px;
}
#contactLayoutGrid2 > .row
{
   margin-right: -15px;
   margin-left: -15px;
}
#contactLayoutGrid2 > .row > .col-1, #contactLayoutGrid2 > .row > .col-2
{
   box-sizing: border-box;
   font-size: 0;
   min-height: 1px;
   padding-right: 15px;
   padding-left: 15px;
   position: relative;
}
#contactLayoutGrid2 > .row > .col-1, #contactLayoutGrid2 > .row > .col-2
{
   float: left;
}
#contactLayoutGrid2 > .row > .col-1
{
   background-color: transparent;
   background-image: none;
   width: 50%;
   text-align: center;
}
#contactLayoutGrid2 > .row > .col-2
{
   background-color: transparent;
   background-image: none;
   width: 50%;
   text-align: center;
}
#contactLayoutGrid2:before,
#contactLayoutGrid2:after,
#contactLayoutGrid2 .row:before,
#contactLayoutGrid2 .row:after
{
   display: table;
   content: " ";
}
#contactLayoutGrid2:after,
#contactLayoutGrid2 .row:after
{
   clear: both;
}
@media (max-width: 480px)
{
#contactLayoutGrid2 > .row > .col-1, #contactLayoutGrid2 > .row > .col-2
{
   float: none;
   width: 100%;
}
}
#wb_socialsLayoutGrid
{
   clear: both;
   position: relative;
   table-layout: fixed;
   display: table;
   text-align: center;
   width: 100%;
   background: linear-gradient(135deg, rgba(210, 105, 30, 0.05), rgba(222, 184, 135, 0.05));
   background-image: none;
   border: 0px dashed #CCCCCC;
   border-radius: 0px;
   box-sizing: border-box;
   margin: 0;
}
#socialsLayoutGrid
{
   box-sizing: border-box;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   padding: 25px 0px 25px 0px;
   margin-right: auto;
   margin-left: auto;
   max-width: 1140px;
}
#socialsLayoutGrid > .col-1
{
   box-sizing: border-box;
   font-size: 0;
   min-height: 1px;
   padding-right: 15px;
   padding-left: 15px;
   position: relative;
}
#socialsLayoutGrid > .col-1
{
   flex: 0 0 auto;
}
#socialsLayoutGrid > .col-1
{
   background-color: transparent;
   background-image: none;
   flex-basis: 100%;
   max-width: 100%;
   display: flex;
   flex-wrap: wrap;
   align-content: center;
   align-self: stretch;
   align-items: center;
   justify-content: center;
   text-align: center;
}
@media (max-width: 480px)
{
#socialsLayoutGrid > .col-1
{
   flex-basis: 100% !important;
   max-width: 100% !important;
}
}
#wb_footerLayoutGrid
{
   clear: both;
   position: relative;
   table-layout: fixed;
   display: table;
   text-align: center;
   width: 100%;
   background: linear-gradient(135deg, rgba(210, 105, 30, 0.1), rgba(222, 184, 135, 0.1));
   background-image: none;
   border: 0px dashed #CCCCCC;
   border-radius: 0px;
   box-sizing: border-box;
   margin: 0;
}
#footerLayoutGrid
{
   box-sizing: border-box;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   padding: 25px 0px 25px 0px;
   margin-right: auto;
   margin-left: auto;
   max-width: 1140px;
}
#footerLayoutGrid > .col-1
{
   box-sizing: border-box;
   font-size: 0;
   min-height: 1px;
   padding-right: 15px;
   padding-left: 15px;
   position: relative;
}
#footerLayoutGrid > .col-1
{
   flex: 0 0 auto;
}
#footerLayoutGrid > .col-1
{
   background-color: transparent;
   background-image: none;
   flex-basis: 100%;
   max-width: 100%;
   display: flex;
   flex-wrap: wrap;
   align-content: center;
   align-self: stretch;
   align-items: center;
   justify-content: center;
   text-align: center;
}
@media (max-width: 480px)
{
#footerLayoutGrid > .col-1
{
   flex-basis: 100% !important;
   max-width: 100% !important;
}
}
#wb_footerText
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: left;
}
#wb_footerText div
{
   text-align: left;
}
#wb_footerText
{
   display: block;
   box-sizing: border-box;
   width: 100%;
}
#wb_welcomeCard
{
   position: relative;
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
   margin: 0;
   background-color: #000000;
   background-color: rgba(0, 0, 0, 0.49);
   background-image: none;
   border: 0px solid #A0C6B9;
   border-radius: 0px;
   text-align: left;
}
#welcomeCard-card-body
{
   padding: 20px 20px 20px 20px;
   flex: 1 1 auto;
   font-size: 0;
}
#welcomeCard-card-item0
{
   box-sizing: border-box;
   margin: 0;
   padding: 0px 0px 10px 0px;
   color: #FFFFFF;
   font-family: "Open Sans Bold";
   font-weight: bold;
   font-style: normal;
   font-size: 29px;
}
#welcomeCard-card-item1
{
   box-sizing: border-box;
   margin: 10px 0px 25px 0px;
   padding: 0px 0px 0px 0px;
   color: #FFFFFF;
   font-family: "Open Sans";
   font-weight: normal;
   font-style: normal;
   font-size: 16px;
}
#welcomeCard-card-item2
{
   display: inline-block;
   height: 51px;
   box-sizing: border-box;
   margin: 0px 0px 20px 0px;
   border: 2px solid #E73D0C;
   border-radius: 0px;
   background-color: transparent;
   background-image: none;
   color: #FFFFFF;
   font-family: "Open Sans";
   font-weight: normal;
   font-style: normal;
   font-size: 15px;
}
#welcomeCard-card-item2 a
{
   color: inherit;
   display: block;
   padding: 16px 32px 16px 32px;
   text-decoration: none;
}
#wb_specialsCard1
{
   position: relative;
   display: flex;
   flex-direction: column;
   min-height: 500px;
   box-sizing: border-box;
   margin: 0;
   background-color: #000000;
   background-color: rgba(0, 0, 0, 0.49);
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   text-align: left;
}
#specialsCard1-card-body
{
   padding: 20px 20px 20px 20px;
   flex: 1 1 auto;
   font-size: 0;
}
#specialsCard1-card-item0
{
   box-sizing: border-box;
   margin: 0;
   padding: 0px 0px 10px 0px;
}
#specialsCard1-card-item0 h1
{
   color: #FFFFFF;
   font-family: "Open Sans Bold";
   font-weight: bold;
   font-style: normal;
   font-size: 29px;
   margin: 0;
}
#specialsCard1-card-item1
{
   box-sizing: border-box;
   margin: 10px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
}
#specialsCard1-card-item1 h2
{
   color: #FFFFFF;
   font-family: "Open Sans Bold";
   font-weight: bold;
   font-style: normal;
   font-size: 16px;
   margin: 0;
}
#specialsCard1-card-item2
{
   box-sizing: border-box;
   margin: 0px 0px 20px 0px;
   padding: 0px 0px 0px 0px;
   color: #FFFFFF;
   font-family: "Open Sans";
   font-weight: normal;
   font-style: normal;
   font-size: 16px;
}
#specialsCard1-card-item3
{
   box-sizing: border-box;
   margin: 10px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
}
#specialsCard1-card-item3 h2
{
   color: #FFFFFF;
   font-family: "Open Sans Bold";
   font-weight: bold;
   font-style: normal;
   font-size: 16px;
   margin: 0;
}
#specialsCard1-card-item4
{
   box-sizing: border-box;
   margin: 0px 0px 20px 0px;
   padding: 0px 0px 0px 0px;
   color: #FFFFFF;
   font-family: "Open Sans";
   font-weight: normal;
   font-style: normal;
   font-size: 16px;
}
#specialsCard1-card-item5
{
   box-sizing: border-box;
   margin: 10px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
}
#specialsCard1-card-item5 h2
{
   color: #FFFFFF;
   font-family: "Open Sans Bold";
   font-weight: bold;
   font-style: normal;
   font-size: 16px;
   margin: 0;
}
#specialsCard1-card-item6
{
   box-sizing: border-box;
   margin: 0px 0px 20px 0px;
   padding: 0px 0px 0px 0px;
   color: #FFFFFF;
   font-family: "Open Sans";
   font-weight: normal;
   font-style: normal;
   font-size: 16px;
}

/* CSS for the second card - "Unsere Klassiker" */
#wb_specialsCard2
{
   position: relative;
   display: flex;
   flex-direction: column;
   min-height: 500px;
   box-sizing: border-box;
   margin: 0;
   background-color: #000000;
   background-color: rgba(0, 0, 0, 0.49);
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   text-align: left;
}
#specialsCard2-card-body
{
   padding: 20px 20px 20px 20px;
   flex: 1 1 auto;
   font-size: 0;
}
#specialsCard2-card-item0
{
   box-sizing: border-box;
   margin: 0;
   padding: 0px 0px 10px 0px;
}
#specialsCard2-card-item0 h1
{
   color: #FFFFFF;
   font-family: "Open Sans Bold";
   font-weight: bold;
   font-style: normal;
   font-size: 29px;
   margin: 0;
}
#specialsCard2-card-item1
{
   box-sizing: border-box;
   margin: 10px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
}
#specialsCard2-card-item1 h2
{
   color: #FFFFFF;
   font-family: "Open Sans Bold";
   font-weight: bold;
   font-style: normal;
   font-size: 16px;
   margin: 0;
}
#specialsCard2-card-item2
{
   box-sizing: border-box;
   margin: 0px 0px 20px 0px;
   padding: 0px 0px 0px 0px;
   color: #FFFFFF;
   font-family: "Open Sans";
   font-weight: normal;
   font-style: normal;
   font-size: 16px;
}
#specialsCard2-card-item3
{
   box-sizing: border-box;
   margin: 10px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
}
#specialsCard2-card-item3 h2
{
   color: #FFFFFF;
   font-family: "Open Sans Bold";
   font-weight: bold;
   font-style: normal;
   font-size: 16px;
   margin: 0;
}
#specialsCard2-card-item4
{
   box-sizing: border-box;
   margin: 0px 0px 20px 0px;
   padding: 0px 0px 0px 0px;
   color: #FFFFFF;
   font-family: "Open Sans";
   font-weight: normal;
   font-style: normal;
   font-size: 16px;
}
#wb_shopHeading
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   box-sizing: border-box;
   vertical-align: top;
   margin: 0px 0px 10px 0px;
   padding: 0px 0px 0px 0px;
   text-align: center;
}
#shopHeading
{
   color: #FFFFFF;
   font-family: "Open Sans Bold";
   font-weight: bold;
   font-style: normal;
   font-size: 48px;
   margin: 0;
   text-align: center;
   text-transform: none;
}
#wb_aboutImage
{
   margin: 0;
   vertical-align: top;
}
#aboutImage
{
   border: 0px solid #000000;
   box-sizing: border-box;
   padding: 0px 0px 0px 0px;
   display: block;
   width: 100%;
   height: auto;
   max-width: 512px;
   margin-left: auto;
   margin-right: auto;
   vertical-align: top;
}
.headerToolTip
{
   position: absolute;
   z-index: 1070;
   display: block;
   margin: 0;
   line-height: 1.5;
   text-align: left;
   text-decoration: none;
   opacity: 0;
}
.headerToolTip.show
{
   opacity: 0.9;
}
.headerToolTip .tooltip-arrow
{
   position: absolute;
   display: block;
   width: 20px;
   height: 10px;
}
.headerToolTip .tooltip-arrow::before
{
   position: absolute;
   content: "";
   border-color: transparent;
   border-style: solid;
}
.headerToolTip .tooltip-arrow:after
{
   content: "";
   position: absolute;
   width: 0;
   height: 0;
   border-color: transparent;
   border-style: solid;
   z-index: -1;
}
.headerToolTip.bs-tooltip-bottom, .headerToolTip.bs-tooltip-auto[x-placement^="bottom"]
{
   padding: 11px 0;
}
.headerToolTip.bs-tooltip-bottom .tooltip-arrow, .headerToolTip.bs-tooltip-auto[x-placement^="bottom"] .tooltip-arrow
{
   top: 2px;
}
.headerToolTip.bs-tooltip-bottom .tooltip-arrow::before, .headerToolTip.bs-tooltip-auto[x-placement^="bottom"] .tooltip-arrow::before
{
   bottom: 0;
   border-width: 0 10px 10px;
   border-bottom-color: rgba(231, 61, 12, 1.00);
}
.headerToolTip.bs-tooltip-bottom .tooltip-arrow::after, .headerToolTip.bs-tooltip-auto[x-placement^="bottom"] .tooltip-arrow::after
{
   top: -1px;
   left: 50%;
   margin-left: -11px;
   border-width: 0 11px 11px;
   border-bottom-color: #CCCCCC;
}
.headerToolTip .tooltip-inner 
{
   max-width: 150px;
   background-color: #E73D0C;
   background-image: none;
   border: 1px solid #CCCCCC;
   border-radius: 0px;
   font-family: Arial;
   font-weight: normal;
   font-size: 11px;
   font-style: normal;
   color: #FFFFFF;
   text-align: left;
   text-decoration: none;
   padding: 10px 10px 10px 10px;
}
.fade
{
   opacity: 0;
   transition: opacity .15s linear;
}
.fade.show
{
   opacity: 1;
}
.headerToolTip.animate-show
{
   animation-duration: 1000ms;
   animation-fill-mode: both;
   animation-name: slide-up-in;
}
#wb_menuCard1
{
   position: relative;
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
   margin: 0px 0px 50px 0px;
   background-color: #E73D0C;
   background-image: none;
   border: 0px solid #DDDDDD;
   border-radius: 0px;
   text-align: center;
}
#menuCard1-card-body
{
   padding: 50px 0px 50px 0px;
   flex: 1 1 auto;
   font-size: 0;
}
.stretched-link::after
{
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 1;
   pointer-events: auto;
   content: "";
   background-color: rgba(0,0,0,0);
}
#menuCard1-card-item0
{
   display: inline-block;
   height: 48px;
     box-sizing: border-box;
   margin: 0;
   border: 0px solid #000000;
   border-radius: 0px;
   background-color: transparent;
   background-image: none;
   color: #FFFFFF;
   font-family: "Open Sans Bold";
   font-weight: normal;
   font-style: normal;
   font-size: 48px;
}
#menuCard1-card-item0 a
{
   color: inherit;
   display: block;
   padding: 0px 0px 0px 0px;
   text-decoration: none;
}
#menuCard1-card-item0 i
{
   margin-right: 0px;
   text-align: center;
   vertical-align: top;
   font-size: 48px;
   width: 48px;
}
#menuCard1-card-item1
{
   box-sizing: border-box;
   margin: 20px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
   color: #FFFFFF;
   font-family: "Open Sans Bold";
   font-weight: bold;
   font-style: normal;
   font-size: 19px;
}
#wb_menuCard2
{
   position: relative;
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
   margin: 0px 0px 50px 0px;
   background-color: #E73D0C;
   background-image: none;
   border: 0px solid #DDDDDD;
   border-radius: 0px;
   text-align: center;
}
#menuCard2-card-body
{
   padding: 50px 0px 50px 0px;
   flex: 1 1 auto;
   font-size: 0;
}
.stretched-link::after
{
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 1;
   pointer-events: auto;
   content: "";
   background-color: rgba(0,0,0,0);
}
#menuCard2-card-item0
{
   display: inline-block;
   height: 48px;
   box-sizing: border-box;
   margin: 0;
   border: 0px solid #000000;
   border-radius: 0px;
   background-color: transparent;
   background-image: none;
   color: #FFFFFF;
   font-family: "Open Sans Bold";
   font-weight: normal;
   font-style: normal;
   font-size: 48px;
}
#menuCard2-card-item0 a
{
   color: inherit;
   display: block;
   padding: 0px 0px 0px 0px;
   text-decoration: none;
}
#menuCard2-card-item0 i
{
   margin-right: 0px;
   text-align: center;
   vertical-align: top;
   font-size: 48px;
   width: 48px;
}
#menuCard2-card-item1
{
   box-sizing: border-box;
   margin: 20px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
   color: #FFFFFF;
   font-family: "Open Sans Bold";
   font-weight: bold;
   font-style: normal;
   font-size: 19px;
}
#wb_menuCard3
{
   position: relative;
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
   margin: 0px 0px 50px 0px;
   background-color: #E73D0C;
   background-image: none;
   border: 0px solid #DDDDDD;
   border-radius: 0px;
   text-align: center;
}
#menuCard3-card-body
{
   padding: 50px 0px 50px 0px;
   flex: 1 1 auto;
   font-size: 0;
}
.stretched-link::after
{
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 1;
   pointer-events: auto;
   content: "";
   background-color: rgba(0,0,0,0);
}
#menuCard3-card-item0
{
   display: inline-block;
   height: 48px;
   box-sizing: border-box;
   margin: 0;
   border: 0px solid #000000;
   border-radius: 0px;
   background-color: transparent;
   background-image: none;
   color: #FFFFFF;
   font-family: "Open Sans Bold";
   font-weight: normal;
   font-style: normal;
   font-size: 48px;
}
#menuCard3-card-item0 a
{
   color: inherit;
   display: block;
   padding: 0px 0px 0px 0px;
   text-decoration: none;
}
#menuCard3-card-item0 i
{
   margin-right: 0px;
   text-align: center;
   vertical-align: top;
   font-size: 48px;
   width: 48px;
}
#menuCard3-card-item1
{
   box-sizing: border-box;
   margin: 20px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
   color: #FFFFFF;
   font-family: "Open Sans Bold";
   font-weight: bold;
   font-style: normal;
   font-size: 19px;
}
#wb_menuCard4
{
   position: relative;
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
   margin: 0px 0px 50px 0px;
   background-color: #E73D0C;
   background-image: none;
   border: 0px solid #DDDDDD;
   border-radius: 0px;
   text-align: center;
}
#menuCard4-card-body
{
   padding: 50px 0px 50px 0px;
   flex: 1 1 auto;
   font-size: 0;
}
.stretched-link::after
{
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 1;
   pointer-events: auto;
   content: "";
   background-color: rgba(0,0,0,0);
}
#menuCard4-card-item0
{
   display: inline-block;
   height: 48px;
   box-sizing: border-box;
   margin: 0;
   border: 0px solid #000000;
   border-radius: 0px;
   background-color: transparent;
   background-image: none;
   color: #FFFFFF;
   font-family: "Open Sans Bold";
   font-weight: normal;
   font-style: normal;
   font-size: 48px;
}
#menuCard4-card-item0 a
{
   color: inherit;
   display: block;
   padding: 0px 0px 0px 0px;
   text-decoration: none;
}
#menuCard4-card-item0 i
{
   margin-right: 0px;
   text-align: center;
   vertical-align: top;
   font-size: 48px;
   width: 48px;
}
#menuCard4-card-item1
{
   box-sizing: border-box;
   margin: 20px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
   color: #FFFFFF;
   font-family: "Open Sans Bold";
   font-weight: bold;
   font-style: normal;
   font-size: 19px;
}
/* Old shopping cart styles removed */

/* Sliding Shopping Cart Styles */
#sliding-cart-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.5);
   z-index: 9998;
   opacity: 0;
   visibility: hidden;
   transition: all 0.3s ease;
}

#sliding-cart-overlay.active {
   opacity: 1;
   visibility: visible;
}

#sliding-cart {
   position: fixed;
   top: 0;
   right: -450px;
   width: 450px;
   height: 100%;
   background: linear-gradient(135deg, #FFF8DC, #F5DEB3);
   box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
   z-index: 9999;
   transition: right 0.3s ease;
   overflow-y: auto;
   font-family: "Open Sans", Arial, sans-serif;
}

#sliding-cart.active {
   right: 0;
}

/* Responsive cart width */
@media (max-width: 1200px) {
   #sliding-cart {
      width: 400px;
      right: -400px;
   }
}

.cart-header {
   background: linear-gradient(135deg, #D2691E, #DEB887);
   color: white;
   padding: 20px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   border-bottom: 1px solid #ddd;
}

.cart-header h2 {
   margin: 0;
   font-size: 24px;
   font-weight: bold;
}

.cart-close {
   background: none;
   border: none;
   color: white;
   font-size: 24px;
   cursor: pointer;
   padding: 5px;
   border-radius: 3px;
   transition: background 0.2s;
}

.cart-close:hover {
   background: rgba(255, 255, 255, 0.2);
}

.cart-content {
   padding: 20px;
}

/* Desktop cart content optimization */
@media (min-width: 769px) {
   .cart-content {
      padding: 25px;
   }
}

/* Mobile cart content optimization */
@media (max-width: 768px) {
   .cart-content {
      padding: 15px;
   }
}

@media (max-width: 480px) {
   .cart-content {
      padding: 12px;
   }
}

.cart-items {
   margin-bottom: 20px;
}

.cart-item {
   background: white;
   border-radius: 12px;
   padding: 15px;
   margin-bottom: 15px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   border: 1px solid #eee;
}

.cart-item:last-child {
   margin-bottom: 0;
}

/* Mobile-optimized cart layout */
@media (max-width: 768px) {
   .cart-item {
      display: block;
      text-align: left;
   }
   
   .cart-item-mobile-row {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
   }
   
   .cart-item-mobile-row:last-child {
      margin-bottom: 0;
   }
   
   .item-image {
      width: 50px;
      height: 50px;
      object-fit: cover;
      border-radius: 8px;
      margin-right: 12px;
      flex-shrink: 0;
   }
   
   .item-details {
      flex: 1;
      min-width: 0;
   }
   
   .item-name {
      font-weight: bold;
      color: #333;
      margin-bottom: 4px;
      font-size: 14px;
      line-height: 1.2;
   }
   
   .item-variant {
      color: #666;
      font-size: 12px;
      margin-bottom: 4px;
   }
   
   .item-price {
      color: #D2691E;
      font-weight: bold;
      font-size: 13px;
   }
   
   .cart-item-controls-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 10px;
      border-top: 1px solid #f0f0f0;
   }
   
   .item-quantity {
      display: flex;
      align-items: center;
      gap: 8px;
   }
   
   .item-total-price {
      font-weight: bold;
      color: #D2691E;
      font-size: 14px;
   }
}

/* Desktop cart layout */
@media (min-width: 769px) {
   .cart-item {
      display: block;
      padding: 20px;
      margin-bottom: 15px;
   }
   
   /* First row: Image, product details, and remove button */
   .cart-item-mobile-row {
      display: flex;
      align-items: flex-start;
      margin-bottom: 15px;
   }
   
   .item-image {
      width: 80px;
      height: 80px;
      object-fit: cover;
      border-radius: 8px;
      margin-right: 20px;
      flex-shrink: 0;
   }
   
   .item-details {
      flex: 1;
      margin-right: 20px;
   }
   
   .item-name {
      font-weight: bold;
      color: #333;
      margin-bottom: 6px;
      font-size: 16px;
   }
   
   .item-variant {
      color: #666;
      font-size: 14px;
      margin-bottom: 6px;
   }
   
   .item-price {
      color: #D2691E;
      font-weight: bold;
      font-size: 15px;
   }
   
   /* Desktop remove button - larger and more prominent */
   .remove-item {
      width: 40px;
      height: 40px;
      flex-shrink: 0;
   }
   
   .remove-item i {
      font-size: 14px;
   }
   
   /* Second row: Quantity controls and total price */
   .cart-item-controls-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 15px;
      border-top: 1px solid #f0f0f0;
   }
   
   .item-quantity {
      display: flex;
      align-items: center;
      gap: 12px;
   }
   
   .item-total-price {
      font-weight: bold;
      color: #D2691E;
      font-size: 18px;
   }
   
   /* Desktop quantity controls - larger and more usable */
   .quantity-btn {
      width: 40px;
      height: 40px;
      font-size: 16px;
      font-weight: bold;
   }
   
   .quantity-input {
      width: 60px;
      height: 40px;
      font-size: 16px;
      text-align: center;
      border: 2px solid #ddd;
      border-radius: 6px;
   }
}

.quantity-btn {
   background: #D2691E;
   color: white;
   border: none;
   width: 32px;
   height: 32px;
   border-radius: 6px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background 0.2s;
   font-size: 14px;
   font-weight: bold;
}

.quantity-btn:hover {
   background: #B8621E;
}

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

.quantity-input {
   width: 50px;
   text-align: center;
   border: 1px solid #ddd;
   padding: 6px;
   border-radius: 6px;
   font-size: 14px;
}

.remove-item {
   background: #dc3545;
   color: white;
   border: none;
   padding: 8px;
   border-radius: 6px;
   cursor: pointer;
   transition: background 0.2s;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 32px;
   height: 32px;
   flex-shrink: 0;
}

.remove-item:hover {
   background: #c82333;
}

.remove-item:active {
   transform: scale(0.95);
}

.remove-item i {
   font-size: 12px;
}

.cart-total {
   border-top: 2px solid #D2691E;
   padding-top: 15px;
   margin-bottom: 20px;
}

.total-row {
   display: flex;
   justify-content: space-between;
   margin-bottom: 10px;
}

.total-label {
   font-weight: bold;
   font-size: 16px;
}

.total-amount {
   font-weight: bold;
   color: #D2691E;
   font-size: 18px;
}

/* Desktop total styling */
@media (min-width: 769px) {
   .cart-total {
      padding-top: 20px;
      margin-bottom: 25px;
   }
   
   .total-row {
      margin-bottom: 12px;
   }
   
   .total-label {
      font-size: 18px;
   }
   
   .total-amount {
      font-size: 20px;
   }
}

.cart-actions {
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.cart-btn {
   padding: 12px 20px;
   border: none;
   border-radius: 5px;
   cursor: pointer;
   font-weight: bold;
   transition: all 0.2s;
   text-decoration: none;
   text-align: center;
   display: block;
   font-size: 14px;
   width: 100%;
}

/* Desktop cart buttons */
@media (min-width: 769px) {
   .cart-actions {
      gap: 12px;
   }
   
   .cart-btn {
      padding: 16px 24px;
      font-size: 17px;
      border-radius: 8px;
      font-weight: 600;
   }
}

/* Single button optimization */
.btn-checkout {
   background: linear-gradient(135deg, #D2691E, #DEB887);
   color: white;
   box-shadow: 0 4px 12px rgba(210, 105, 30, 0.3);
}

.btn-checkout:hover {
   background: linear-gradient(135deg, #B8621E, #D2B48C);
   color: white;
   transform: translateY(-2px);
   box-shadow: 0 6px 16px rgba(210, 105, 30, 0.4);
}

/* Back to shop buttons */
.cart-back-top, .cart-back-bottom {
   padding: 15px 20px;
   margin: 0;
}

.cart-back-top {
   border-bottom: 2px solid #eee;
   background: #f8f9fa;
}

.btn-back {
   background: linear-gradient(135deg, #8B4513, #A0522D);
   color: white;
   border: 2px solid #6B3410;
   box-shadow: 0 3px 8px rgba(139, 69, 19, 0.3);
}

.btn-back:hover {
   background: linear-gradient(135deg, #6B3410, #8B4513);
   color: white;
   transform: translateY(-1px);
   box-shadow: 0 4px 12px rgba(139, 69, 19, 0.4);
   border-color: #5A2D0C;
}

/* Mobile optimization for back buttons */
@media (max-width: 768px) {
   .cart-back-top {
      padding: 15px 15px;
      border-bottom: 2px solid #ddd;
      background: #f5f6f7;
   }
   
   .cart-back-bottom {
      padding: 15px 15px 20px;
      border-top: 1px solid #eee;
      margin-top: 10px;
      background: #fafbfc;
   }
   
   .btn-back {
      font-size: 14px;
      padding: 14px 18px;
      font-weight: 600;
   }
}

.empty-cart {
   text-align: center;
   color: #666;
   padding: 40px 20px;
}

.empty-cart i {
   font-size: 48px;
   color: #ddd;
   margin-bottom: 15px;
}

/* Mobile empty cart optimization */
@media (max-width: 480px) {
   .empty-cart {
      padding: 30px 15px;
   }
   
   .empty-cart i {
      font-size: 36px;
      margin-bottom: 10px;
   }
   
   .empty-cart p {
      font-size: 14px;
   }
}

@media (max-width: 480px) {
   #sliding-cart {
      width: 100%;
      right: -100%;
   }
   
   .cart-item {
      padding: 12px;
      margin-bottom: 12px;
   }
   
   .cart-item-mobile-row {
      margin-bottom: 8px;
   }
   
   .item-image {
      width: 45px;
      height: 45px;
   }
   
   .item-name {
      font-size: 13px;
   }
   
   .item-variant {
      font-size: 11px;
   }
   
   .item-price {
      font-size: 12px;
   }
   
   .item-total-price {
      font-size: 13px;
   }
   
   .quantity-btn {
      width: 28px;
      height: 28px;
      font-size: 12px;
   }
   
   .quantity-input {
      width: 45px;
      font-size: 13px;
   }
   
   .remove-item {
      width: 28px;
      height: 28px;
   }
   
   .remove-item i {
      font-size: 11px;
   }
}

/* Floating Cart Icon */
#floating-cart-icon {
   position: fixed;
   bottom: 20px;
   right: 20px;
   background: linear-gradient(135deg, #D2691E, #DEB887);
   color: white;
   border: none;
   border-radius: 50%;
   width: 60px;
   height: 60px;
   cursor: pointer;
   box-shadow: 0 4px 15px rgba(0,0,0,0.2);
   z-index: 900;
   transition: all 0.3s ease;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 20px;
}

#floating-cart-icon:hover {
   background: linear-gradient(135deg, #B8621E, #D2B48C);
   transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

#floating-cart-icon .cart-count {
   position: absolute;
   top: -5px;
   right: -5px;
   background: #dc3545;
   color: white;
   border-radius: 50%;
   width: 25px;
   height: 25px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 12px;
   font-weight: bold;
   min-width: 25px;
}

#floating-cart-icon .cart-count.hidden {
   display: none;
}

@media (max-width: 768px) {
   #floating-cart-icon {
      width: 50px;
      height: 50px;
      font-size: 18px;
   }
   
   #floating-cart-icon .cart-count {
      width: 20px;
      height: 20px;
      font-size: 10px;
      top: -3px;
      right: -3px;
   }
}

#wb_Card9
{
   position: relative;
   display: flex;
   flex-direction: column;
   min-height: 400px;
   box-sizing: border-box;
   margin: 0;
   background-color: #000000;
   background-color: rgba(0, 0, 0, 0.49);
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   text-align: left;
}
#Card9-card-body
{
   padding: 20px 20px 20px 20px;
   flex: 1 1 auto;
   font-size: 0;
}
#Card9-card-item0
{
   box-sizing: border-box;
   margin: 0px 0px 10px 0px;
   padding: 0px 0px 0px 0px;
   color: #FFFFFF;
   font-family: "Open Sans Bold";
   font-weight: bold;
   font-style: normal;
   font-size: 29px;
}
#Card9-card-item1
{
   box-sizing: border-box;
   margin: 10px 0px 25px 0px;
   padding: 0px 0px 0px 0px;
   color: #FFFFFF;
   font-family: "Open Sans";
   font-weight: normal;
   font-style: normal;
   font-size: 16px;
}
#Card9-card-item2
{
   display: inline-block;
   height: 51px;
   box-sizing: border-box;
   margin: 0px 0px 20px 0px;
   border: 2px solid #FFFFFF;
   border-radius: 8px;
   background: linear-gradient(135deg, #D2691E, #DEB887);
   background-image: none;
   color: #FFFFFF;
   font-family: "Open Sans";
   font-weight: bold;
   font-style: normal;
   font-size: 16px;
   text-align: center;
   transition: all 0.2s;
}
#Card9-card-item2:hover
{
   background: linear-gradient(135deg, #B8621E, #D2B48C);
   transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
#Card9-card-item2 a
{
   color: #FFFFFF !important;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 12px 25px 12px 25px;
   text-decoration: none;
   height: 100%;
   box-sizing: border-box;
   background-color: transparent;
}
#wb_Image1
{
   margin: 0;
   vertical-align: top;
}
#Image1
{
   border: 0px solid #000000;
   box-sizing: border-box;
   padding: 0px 0px 0px 0px;
   display: inline-block;
   width: 337px;
   height: 43px;
   vertical-align: top;
}
#wb_Card10
{
   position: relative;
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
   margin: 0;
   background: linear-gradient(135deg, #D2691E, #DEB887);
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   text-align: right;
}
#Card10-card-body
{
   padding: 0px 0px 0px 0px;
   flex: 1 1 auto;
   font-size: 0;
}
#Card10-card-item0
{
   display: inline-block;
   height: 35px;
   box-sizing: border-box;
   margin: 0px 0px 10px 0px;
   border: 1px solid #E73D0C;
   border-radius: 4px;
   background-color: #E73D0C;
   background-image: none;
   color: #FFFFFF;
   font-family: Arial;
   font-weight: normal;
   font-style: normal;
   font-size: 13px;
}
#Card10-card-item0 a
{
   color: inherit;
   display: block;
   padding: 10px 10px 10px 10px;
   text-decoration: none;
}
#Button1
{
   border: 1px solid #E73D0C;
   border-radius: 4px;
   background-color: #E73D0C;
   background-image: none;
   color: #FFFFFF;
   font-family: "Open Sans Bold";
   font-weight: normal;
   font-style: normal;
   font-size: 13px;
   padding: 0px 0px 0px 0px;
   text-align: center;
   text-decoration: none;
   -webkit-appearance: none;
   margin: 0;
}
#Button1:focus
{
   outline: 0;
}
#Layer1
{
   background-color: #E73D0C;
   background-image: none;
   border-radius: 0px;
   box-sizing: border-box;
}
#wb_Card11
{
   margin: 0;
   background-color: #E73D0C;
   background-image: none;
   border: 1px solid #E73D0C;
   border-radius: 3px;
   text-align: center;
}
#Card11-card-body
{
   padding: 0px 0px 0px 0px;
   font-size: 0;
}
#Card11-card-item0
{
   display: inline-block;
   height: 41px;
   box-sizing: border-box;
   margin: 0;
   border: 1px solid #E73D0C;
   border-radius: 4px;
   background-color: #E73D0C;
   background-image: none;
   color: #FFFFFF;
   font-family: Arial;
   font-weight: normal;
   font-style: normal;
   font-size: 19px;
}
#Card11-card-item0 a
{
   color: inherit;
   display: block;
   padding: 10px 10px 10px 10px;
   text-decoration: none;
}
#Card11-card-item0 i
{
   margin-right: 0px;
   text-align: center;
   vertical-align: top;
   font-size: 19px;
   width: 19px;
}
#Button3
{
   box-sizing: border-box;
   line-height: 1.2;
   text-decoration: none;
   vertical-align: top;
   border: none;
   border-radius: 4px;
   background: #2c5530;
   color: #FFFFFF;
   font-family: "Open Sans Bold";
   font-weight: normal;
   font-style: normal;
   font-size: 0.9rem;
   padding: 10px 20px;
   text-align: center;
   text-decoration: none;
   margin: 5px;
   transition: background 0.2s;
   cursor: pointer;
   display: inline-block;
}
#Button3:hover
{
   background: #1e3d22;
}
#Button3:focus
{
   outline: 0;
}
#Button2
{
   box-sizing: border-box;
   line-height: 1.2;
   text-decoration: none;
   vertical-align: top;
   border: none;
   border-radius: 4px;
   background: #2c5530;
   color: #FFFFFF;
   font-family: "Open Sans Bold";
   font-weight: normal;
   font-style: normal;
   font-size: 0.9rem;
   padding: 10px 20px;
   text-align: center;
   text-decoration: none;
   margin: 5px;
   transition: background 0.2s;
   cursor: pointer;
   display: inline-block;
}
#Button2:hover
{
   background: #1e3d22;
}
#Button2:focus
{
   outline: 0;
}
#wb_LayoutGrid3
{
   clear: both;
   position: relative;
   table-layout: fixed;
   display: table;
   text-align: center;
   width: 100%;
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   box-sizing: border-box;
   margin: 0;
}
#LayoutGrid3
{
   box-sizing: border-box;
   padding: 0px 15px 0px 15px;
   margin-right: auto;
   margin-left: auto;
}
#LayoutGrid3 > .row
{
   margin-right: -15px;
   margin-left: -15px;
}
#LayoutGrid3 > .row > .col-1
{
   box-sizing: border-box;
   font-size: 0;
   min-height: 1px;
   padding-right: 15px;
   padding-left: 15px;
   position: relative;
}
#LayoutGrid3 > .row > .col-1
{
   float: left;
}
#LayoutGrid3 > .row > .col-1
{
   background-color: transparent;
   background-image: none;
   width: 100%;
   text-align: right;
}
#LayoutGrid3:before,
#LayoutGrid3:after,
#LayoutGrid3 .row:before,
#LayoutGrid3 .row:after
{
   display: table;
   content: " ";
}
#LayoutGrid3:after,
#LayoutGrid3 .row:after
{
   clear: both;
}
@media (max-width: 480px)
{
#LayoutGrid3 > .row > .col-1
{
   float: none;
   width: 100% !important;
}
}
#wb_LayoutGrid4
{
   clear: both;
   position: relative;
   table-layout: fixed;
   display: table;
   text-align: center;
   width: 100%;
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   box-sizing: border-box;
   margin: 0;
}
#LayoutGrid4
{
   box-sizing: border-box;
   padding: 20px 15px 0px 15px;
   margin-right: auto;
   margin-left: auto;
}
#LayoutGrid4 > .row
{
   margin-right: -15px;
   margin-left: -15px;
}
#LayoutGrid4 > .row > .col-1
{
   box-sizing: border-box;
   font-size: 0;
   min-height: 1px;
   padding-right: 15px;
   padding-left: 15px;
   position: relative;
}
#LayoutGrid4 > .row > .col-1
{
   float: left;
}
#LayoutGrid4 > .row > .col-1
{
   background-color: transparent;
   background-image: none;
   width: 100%;
   text-align: right;
}
#LayoutGrid4:before,
#LayoutGrid4:after,
#LayoutGrid4 .row:before,
#LayoutGrid4 .row:after
{
   display: table;
   content: " ";
}
#LayoutGrid4:after,
#LayoutGrid4 .row:after
{
   clear: both;
}
@media (max-width: 480px)
{
#LayoutGrid4 > .row > .col-1
{
   float: none;
   width: 100% !important;
}
}
#wb_LayoutGrid5
{
   clear: both;
   position: relative;
   table-layout: fixed;
   display: table;
   text-align: center;
   width: 100%;
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   box-sizing: border-box;
   margin: 0;
}
#LayoutGrid5
{
   box-sizing: border-box;
   padding: 0px 15px 0px 15px;
   margin-right: auto;
   margin-left: auto;
}
#LayoutGrid5 > .row
{
   margin-right: -15px;
   margin-left: -15px;
}
#LayoutGrid5 > .row > .col-1
{
   box-sizing: border-box;
   font-size: 0;
   min-height: 1px;
   padding-right: 15px;
   padding-left: 15px;
   position: relative;
}
#LayoutGrid5 > .row > .col-1
{
   float: left;
}
#LayoutGrid5 > .row > .col-1
{
   background-color: transparent;
   background-image: none;
   width: 100%;
   text-align: right;
}
#LayoutGrid5:before,
#LayoutGrid5:after,
#LayoutGrid5 .row:before,
#LayoutGrid5 .row:after
{
   display: table;
   content: " ";
}
#LayoutGrid5:after,
#LayoutGrid5 .row:after
{
   clear: both;
}
@media (max-width: 480px)
{
#LayoutGrid5 > .row > .col-1
{
   float: none;
   width: 100% !important;
}
}
#wb_shopLayoutGrid3
{
   clear: both;
   position: relative;
   table-layout: fixed;
   display: table;
   text-align: center;
   width: 100%;
   background-color: transparent;
   background-image: none;
   border: 0px dashed #CCCCCC;
   border-radius: 0px;
   box-sizing: border-box;
   margin: 0;
}
#shopLayoutGrid3
{
   box-sizing: border-box;
   padding: 50px 15px 50px 15px;
   margin-right: auto;
   margin-left: auto;
   max-width: 1140px;
}
#shopLayoutGrid3 > .row
{
   margin-right: -15px;
   margin-left: -15px;
}
#shopLayoutGrid3 > .row > .col-1, #shopLayoutGrid3 > .row > .col-2, #shopLayoutGrid3 > .row > .col-3
{
   box-sizing: border-box;
   font-size: 0;
   min-height: 1px;
   padding-right: 15px;
   padding-left: 15px;
   position: relative;
}
#shopLayoutGrid3 > .row > .col-1, #shopLayoutGrid3 > .row > .col-2, #shopLayoutGrid3 > .row > .col-3
{
   float: left;
}
#shopLayoutGrid3 > .row > .col-1
{
   background-color: transparent;
   background-image: none;
   width: 33.33333333%;
   text-align: left;
}
#shopLayoutGrid3 > .row > .col-2
{
   background-color: transparent;
   background-image: none;
   width: 33.33333333%;
   text-align: left;
}
#shopLayoutGrid3 > .row > .col-3
{
   background-color: transparent;
   background-image: none;
   width: 33.33333333%;
   text-align: left;
}
#shopLayoutGrid3:before,
#shopLayoutGrid3:after,
#shopLayoutGrid3 .row:before,
#shopLayoutGrid3 .row:after
{
   display: table;
   content: " ";
}
#shopLayoutGrid3:after,
#shopLayoutGrid3 .row:after
{
   clear: both;
}
@media (max-width: 768px)
{
#shopLayoutGrid3 > .row > .col-1, #shopLayoutGrid3 > .row > .col-2, #shopLayoutGrid3 > .row > .col-3
{
   float: none;
   width: 100% !important;
}
}
#wb_LayoutGrid1
{
   clear: both;
   position: relative;
   table-layout: fixed;
   display: table;
   text-align: center;
   width: 100%;
   background-color: transparent;
   background-image: none;
   border: 0px dashed #CCCCCC;
   border-radius: 0px;
   box-sizing: border-box;
   margin: 0;
}
#LayoutGrid1
{
   box-sizing: border-box;
   padding: 50px 15px 50px 15px;
   margin-right: auto;
   margin-left: auto;
   max-width: 1140px;
}
#LayoutGrid1 > .row
{
   margin-right: -15px;
   margin-left: -15px;
}
#LayoutGrid1 > .row > .col-1, #LayoutGrid1 > .row > .col-2, #LayoutGrid1 > .row > .col-3
{
   box-sizing: border-box;
   font-size: 0;
   min-height: 1px;
   padding-right: 15px;
   padding-left: 15px;
   position: relative;
}
#LayoutGrid1 > .row > .col-1, #LayoutGrid1 > .row > .col-2, #LayoutGrid1 > .row > .col-3
{
   float: left;
}
#LayoutGrid1 > .row > .col-1
{
   background-color: transparent;
   background-image: none;
   width: 33.33333333%;
   text-align: left;
}
#LayoutGrid1 > .row > .col-2
{
   background-color: transparent;
   background-image: none;
   width: 33.33333333%;
   text-align: left;
}
#LayoutGrid1 > .row > .col-3
{
   background-color: transparent;
   background-image: none;
   width: 33.33333333%;
   text-align: left;
}
#LayoutGrid1:before,
#LayoutGrid1:after,
#LayoutGrid1 .row:before,
#LayoutGrid1 .row:after
{
   display: table;
   content: " ";
}
#LayoutGrid1:after,
#LayoutGrid1 .row:after
{
   clear: both;
}
@media (max-width: 768px)
{
#LayoutGrid1 > .row > .col-1, #LayoutGrid1 > .row > .col-2, #LayoutGrid1 > .row > .col-3
{
   float: none;
   width: 100% !important;
}
}
#SlideShow2 li 
{
    perspective: 1800px;
}

/* Gallery Slideshow Styles - Modern Gallery Container */
#gallerySlideShow {
    max-width: 100%;
    margin: 0 auto;
    border-radius: 12px;
    overflow: visible; /* Allow modern gallery to manage overflow */
}

/* Dynamic Product Cards Styles */
#dynamic-product-container .card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    margin: 10px;
    width: 300px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease-in-out;
}

#dynamic-product-container .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

#dynamic-product-container .card img {
    max-width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 10px;
}

#dynamic-product-container .card a {
    color: #2c5530;
    text-decoration: none;
    font-weight: bold;
}

#dynamic-product-container .card a:hover {
    text-decoration: underline;
}

#dynamic-product-container .product-price {
    font-size: 18px;
    font-weight: bold;
    color: #2c5530;
    margin: 10px 0;
}

#dynamic-product-container .input-group {
    display: flex;
    align-items: center;
    margin: 10px 0;
}

#dynamic-product-container .input-group input {
    text-align: center;
    width: 60px;
    margin: 0 5px;
}

#dynamic-product-container .btn-add-to-cart {
    background: #2c5530;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    margin-top: 10px;
    transition: background 0.2s;
}

#dynamic-product-container .btn-add-to-cart:hover {
    background: #1e3d22;
}

#dynamic-product-container .btn-add-to-cart.disabled {
    background: #ccc;
    cursor: not-allowed;
}

#dynamic-product-container label {
    display: block;
    margin: 5px 0;
    cursor: pointer;
}

#dynamic-product-container label input[type="radio"] {
    margin-right: 8px;
}

/* Responsive Grid System for Product Cards */
#dynamic-product-container {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 25px !important;
    padding: 20px !important;
    width: 100% !important;
}

@media (min-width: 768px) {
    #dynamic-product-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 30px !important;
    }
}

@media (min-width: 1200px) {
    #dynamic-product-container {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 25px !important;
    }
}

.product-card-wrapper {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

#dynamic-product-container .card {
    height: 100%;
    min-height: 600px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#dynamic-product-container .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

#dynamic-product-container .card > div {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px;
    justify-content: space-between;
}

.card-content-top {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.card-content-middle {
    flex: 0 0 auto;
    margin: 15px 0;
}

.card-content-bottom {
    flex: 0 0 auto;
    margin-top: auto;
    padding-top: 15px;
}

/* Ensure descriptions have consistent height */
#dynamic-product-container .card .product-description {
    min-height: 60px;
    display: flex;
    align-items: flex-start;
}