.productbox {
  position: relative;
  border-bottom: 1px solid #b3b3b3;
  padding-bottom: 2rem;
}  
.productbox-row .productbox-title {
  font-size: 1.25rem;
  font-weight: 600;
}
.productbox-price {
  font-size: 1.25rem;
}
.productbox.productbox-hover:not(:hover) .productbox-onhover {
    opacity: 1;
  }
 .productbox.productbox-hover:hover .productbox-inner::before {
    box-shadow: none;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }	
.productbox.productbox-hover:hover .productbox-ribbon.ribbon {
    top: 1rem;
    left: -.5rem;
  }
.productbox-variations .js-slider-wrapper .js-slider-items .js-slider-item:first-child {
  margin-left: 0;
}
.productbox-variations .js-slider-wrapper .js-slider-items .js-slider-item {
  width: calc(100%/7);
  min-width: calc(100%/7);
}
#product-list .fa-spinner {
  display: none;
}	
#product-list .alert.choose-variations {
  display: none;
}	
@media (max-width: 767px) {
/* Removed the 100% override for col-6 to restore 2-column mobile grid */
.productbox-row .productbox-details {
  display: block;
}	
.product-list .collapse:not(.show) {
    display: block;
}
#product-list .product-wrapper:not(:last-child) {
    height: auto !important;
}
#product-list .square-image .inner img {
    width: 100%;
}
.productbox-title {
   padding: 1rem 0 0 0;
}	
}

/* FIX: Carocase Mobile Menu Dark Theme Override */
#mmenu, .mm-menu, .mm-panels, .mm-panel, .mm-listview {
    background-color: #1b222c !important;
    color: #ffffff !important;
}

#mmenu .mm-listitem, .mm-listitem > a, .mm-listitem > span, .mm-listitem .nav-link, .mm-listitem .text-truncate, .nav-mobile-heading {
    color: #ffffff !important;
    text-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

#mmenu .mm-listitem a, #mmenu .mm-listitem span {
    color: #ffffff !important;
}

/* Subtle borders between items */
#mmenu .mm-listitem:after {
    border-bottom-color: rgba(255,255,255,0.1) !important;
}

/* Back button and header styles */
.mm-navbar {
    background-color: #151a22 !important;
    color: #ffffff !important;
    border-bottom-color: rgba(255,255,255,0.1) !important;
}
.mm-navbar a, .mm-navbar span {
    color: #ffffff !important;
}



/* TOP BAR TEXT COLOR FIX & FLAG STYLING */
.topbar-wrapper .nav-link,
.topbar-wrapper .dropdown-item,
.topbar-wrapper .topbar-main > li > a {
    color: #1b222c !important;
    font-weight: 500;
}
.language-dropdown img.flag-icon {
    width: 20px;
    height: auto;
    margin-right: 5px;
    vertical-align: middle;
    border-radius: 2px;
}

/* MOBILE NAV OVERRIDE SCOPING (only apply to mobile, not desktop topbar) */
@media (max-width: 991px) {
    .nav-mobile-body {
        background-color: #1b222c !important;
    }
}

/* Hide Bestellstatus */
.topbar-wrapper .nav-item a[href*='bestellstatus'], .topbar-wrapper .nav-item a[href*='Bestellstatus'] { display: none !important; }

/* NEW CUSTOM STYLES PORTED FROM TEST SITE */
.ribbon {
    border-radius: 6px !important;
    padding: 6px 12px !important;
    font-weight: 700 !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
    top: 12px !important;
    left: 12px !important;
    margin: 0 !important;
}
.ribbon::before, .ribbon::after {
    display: none !important; /* Removes the old 3D fold effect */
}
.ribbon-8 {
    background-color: #00b894 !important; /* Fresh green */
    color: #ffffff !important;
}
.ribbon-1 {
    background-color: #f8bf00 !important; /* Brand yellow */
    color: #ffffff !important;
}
.premium-payment-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 15px;
    align-items: center;
}
.premium-payment-grid img {
    height: 24px !important;
    width: auto !important;
    filter: invert(1) opacity(0.7) !important;
    transition: filter 0.3s ease, transform 0.3s ease !important;
    margin: 0 !important;
    mix-blend-mode: normal !important;
}
.premium-payment-grid img:hover {
    filter: invert(1) opacity(1) !important;
    transform: translateY(-3px) !important;
}
.premium-payment-grid .sepa-pill {
    font-size: 11px;
    font-weight: 800;
    font-family: 'Montserrat', sans-serif;
    color: #fff;
    border: 1.5px solid rgba(255,255,255,0.7);
    padding: 3px 8px;
    border-radius: 4px;
    opacity: 0.7;
    transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
    cursor: default;
}
.premium-payment-grid .sepa-pill:hover {
    opacity: 1;
    transform: translateY(-3px);
    background-color: rgba(255,255,255,0.1);
}


/* PRODUCT DETAIL MOBILE UI FIXES */
@media (max-width: 767px) {
    /* Ensure product image fits perfectly inside JTL aspect ratio container to prevent layout bleed */
    #image_wrapper .product-image img, 
    #image_wrapper .square-image .inner img,
    #image_wrapper .slick-slide img {
        max-width: 100% !important;
        max-height: 100% !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
    }
    #image_wrapper {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Fix invisible slick arrows in gallery */
#image_wrapper .slick-slider .slick-arrow {
    color: #1b222c !important;
    background-color: rgba(255, 255, 255, 0.8) !important;
    border-radius: 50%;
    width: 36px !important;
    height: 36px !important;
    z-index: 10;
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
#image_wrapper .slick-slider .slick-prev {
    left: 10px !important;
}
#image_wrapper .slick-slider .slick-next {
    right: 10px !important;
}
#image_wrapper .slick-slider .slick-arrow::before {
    color: #1b222c !important;
    font-size: 20px !important;
    opacity: 1 !important;
}

/* Hide broken empty ribbons (the blue pill issue) */
.ribbon:empty {
    display: none !important;
}
.ribbon {
    min-width: 40px;
    text-align: center;
}


/* Hide SKU, HAN, Variationen on ALL product cards */
.productbox .product-sku,
.productbox .productlist-item-detail,
.productbox .text-muted.small,
.productbox-variations,
.productbox dl.form-row.productlist-item-detail,
#product-list .productbox .product-sku,
#result-wrapper .productbox .product-sku,
#product-list .productbox-variations,
#result-wrapper .productbox-variations {
    display: none !important;
}




/* Modern Rounded Search Box (Desktop + Mobile) */
header#jtl-nav-wrapper .search-form .form-control,
body .search-wrapper .search-form .form-control,
body .search-form .form-control,
body #search-header .form-control {
    border-top-left-radius: 12px !important;
    border-bottom-left-radius: 12px !important;
    border-right: none !important;
    border: 1px solid #ccc !important;
    border-right: none !important;
    height: 44px !important;
    font-size: 0.95rem !important;
}
header#jtl-nav-wrapper .search-form .btn,
body .search-wrapper .search-form .btn,
body .search-form .btn-search,
body .search-form button,
body #search-header .btn {
    border-top-right-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    height: 44px !important;
}
/* Ince cizgi sorunu - header/content arasi border temizligi */
@media (max-width: 991px) {
    header#jtl-nav-wrapper,
    #jtl-nav-wrapper {
        border-bottom: none !important;
        box-shadow: none !important;
    }
    #content-wrapper,
    #content-wrapper.has-fluid {
        border-top: none !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    .search-wrapper,
    .search-form-wrapper,
    #search-header {
        border-top: none !important;
        border-bottom: none !important;
        box-shadow: none !important;
    }
    /* Header alt kenar temizligi */
    body .sticky-shadow,
    body .nav-scrollbar-wrapper,
    body #header {
        border-bottom: none !important;
        box-shadow: none !important;
    }
}

/* Ana sayfa OPC bolumler arasi bosluk azaltma (mobile) */
@media (max-width: 991px) {
    /* Bos OPC kolonlari sifirla */
    .opc-Container .col:empty,
    .opc-Container .col-4:empty,
    .opc-Container .col-6:empty {
        display: none !important;
    }
    /* OPC container'lar arasi gereksiz bosluk */
    #content .opc-Container {
        min-height: auto !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    #content .opc-Container .row {
        margin-bottom: 0 !important;
    }
    /* Clearfix'ler gereksiz yer kapliyor */
    #content .opc-Container .clearfix {
        margin: 0 !important;
        padding: 0 !important;
        height: 0 !important;
    }
    /* Topseller divider'i yukari cek */
    .opc-Divider.hr-sect {
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }
    /* Content genel padding azalt */
    #content {
        padding-bottom: 1rem !important;
    }
    #content-wrapper:not(.has-fluid) {
        padding-top: 0 !important;
    }
}

/* =============================================
   UNIFIED MOBILE PRODUCT CARD STANDARD
   Topseller, Bestseller, Ahnliche Artikel:
   Ayni genislik, ayni format, yatay scroll slider.
   body prefix = specificity boost (inline style override)
   ============================================= */

@media (max-width: 991px) {

    /* === TOPSELLER (opc-ProductStream) === */
    body #content .opc-ProductStream-gallery.product-list.row,
    body .opc-ProductStream-gallery.product-list.row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: scroll !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x proximity;
        gap: 8px !important;
        padding: 4px 12px 12px 12px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    body .opc-ProductStream-gallery.product-list.row::-webkit-scrollbar {
        display: none;
    }

    /* Topseller kartlar: kategori sayfasi gibi genis */
    body #content .opc-ProductStream-gallery.product-list .product-wrapper,
    body .opc-ProductStream-gallery.product-list .col.product-wrapper {
        flex: 0 0 48% !important;
        width: 48% !important;
        min-width: 48% !important;
        max-width: 48% !important;
        scroll-snap-align: start;
        padding: 0 !important;
        margin-bottom: 0 !important;
        height: auto !important;
    }

    /* === BESTSELLER (slick-slider / product-slider-Bestseller) === */
    body .product-slider-Bestseller .carousel,
    body .product-slider-Bestseller .slick-track {
        display: flex !important;
        flex-wrap: nowrap !important;
        transform: none !important;
        width: auto !important;
    }
    body .product-slider-Bestseller .slick-list {
        overflow-x: scroll !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 0 8px !important;
        width: 100% !important;
        scrollbar-width: none;
    }
    body .product-slider-Bestseller .slick-list::-webkit-scrollbar {
        display: none;
    }
    body .product-slider-Bestseller .slick-slide {
        width: 48vw !important;
        min-width: 48vw !important;
        max-width: 48vw !important;
        float: none !important;
        flex: 0 0 48vw !important;
        height: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        padding: 0 4px !important;
        margin-right: 0 !important;
    }
    body .product-slider-Bestseller .slick-arrow,
    body .product-slider-Bestseller .slick-dots {
        display: none !important;
    }

    /* === KATEGORI SAYFASI BESTSELLER GRID -> YATAY SCROLL === */
    body #slider-bestseller-products .row.product-list,
    body .productlist-bestseller-grid .row.product-list {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none;
        padding: 0 8px !important;
        gap: 8px !important;
        margin: 0 !important;
    }
    body #slider-bestseller-products .row.product-list::-webkit-scrollbar,
    body .productlist-bestseller-grid .row.product-list::-webkit-scrollbar {
        display: none;
    }
    body #slider-bestseller-products .row.product-list > .col-6,
    body #slider-bestseller-products .row.product-list > .col,
    body #slider-bestseller-products .row.product-list > .product-wrapper,
    body .productlist-bestseller-grid .row.product-list > .col-6,
    body .productlist-bestseller-grid .row.product-list > .col,
    body .productlist-bestseller-grid .row.product-list > .product-wrapper {
        flex: 0 0 48vw !important;
        min-width: 48vw !important;
        max-width: 48vw !important;
        width: 48vw !important;
        padding: 0 4px !important;
        margin-bottom: 0 !important;
    }

    /* === MOBILE NATIVE SCROLL (x-sell, x-related, Top-Artikel vb.) === */
    /* Template renders native div on mobile for x-sell/x-related, no Slick. */
    body .mobile-product-scroll > div {
        border: none !important;
        padding: 0 !important;
        background: transparent !important;
        border-radius: 8px !important;
    }
    /* Tum parent'larda overflow/height kisitlamasini kaldir */
    body .mobile-product-scroll .productbox,
    body .mobile-product-scroll .productbox-inner,
    body .mobile-product-scroll .productbox-info,
    body .mobile-product-scroll .caption,
    body .mobile-product-scroll .productbox-title {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
    }
    /* Sadece <a> tag'inda line-clamp ile 3 satir + ... */
    body .mobile-product-scroll .productbox-title a {
        white-space: normal !important;
        font-size: 0.82rem !important;
        line-height: 1.3 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        color: #222 !important;
        font-weight: 600 !important;
        word-break: break-word !important;
    }

    /* === ORTAK KART STANDARDI === */
    body .opc-ProductStream-gallery .productbox,
    body .opc-ProductStream-gallery .productbox-inner,
    body .product-slider-Bestseller .productbox,
    body .product-slider-Bestseller .productbox-inner,
    body .slick-slider-other .productbox,
    body .slick-slider-other .productbox-inner {
        height: auto !important;
        border-radius: 8px !important;
    }

    /* Urun ismi: kategori sayfasi ile ayni format */
    body .opc-ProductStream-gallery .productbox-title a,
    body .product-slider-Bestseller .productbox-title a,
    body .slick-slider-other .productbox-title a {
        white-space: normal !important;
        font-size: 0.85rem !important;
        line-height: 1.3 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        color: #222 !important;
        font-weight: 600 !important;
        word-break: break-word !important;
    }

    /* Fiyat: kategori sayfasi ile ayni */
    body .opc-ProductStream-gallery .productbox-price,
    body .product-slider-Bestseller .productbox-price,
    body .slick-slider-other .productbox-price {
        font-size: 1.05rem !important;
        font-weight: 700 !important;
        color: #111 !important;
    }

    /* Buton: kategori sayfasi stili */
    body .opc-ProductStream-gallery .btn.basket-details-add-to-cart,
    body .product-slider-Bestseller .btn.basket-details-add-to-cart,
    body .slick-slider-other .btn.basket-details-add-to-cart {
        font-size: 0.82rem !important;
        padding: 8px 12px !important;
        border-radius: 8px !important;
    }

    /* Kart border + spacing */
    body .opc-ProductStream-gallery .productbox,
    body .product-slider-Bestseller .productbox,
    body .slick-slider-other .productbox {
        border: none !important;
        padding: 0 !important;
        margin-bottom: 4px !important;
        background: transparent !important;
    }

    /* SKU/HAN slider kartlarinda gizle */
    body .opc-ProductStream-gallery .productlist-item-detail,
    body .product-slider-Bestseller .productlist-item-detail,
    body .slick-slider-other .productlist-item-detail,
    body .opc-ProductStream-gallery .product-sku,
    body .product-slider-Bestseller .product-sku,
    body .slick-slider-other .product-sku {
        display: none !important;
    }
}

/* ---------------------------------------------------
   2026 UX/UI Standardization: App Store Blue CTAs
   Author: Antigravity AI
--------------------------------------------------- */
.btn-primary,
.badge-primary,
.checkout-steps .badge-primary,
.checkout-steps .step-check {
    background-color: #007AFF !important;
    border-color: #007AFF !important;
    color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #005bb5 !important;
    border-color: #005bb5 !important;
    color: #ffffff !important;
}

.btn {
    border-radius: 8px !important;
}

/* ---------------------------------------------------
   Checkout Clutter Reduction
--------------------------------------------------- */
.checkout-shipping-form-options-radio .title div > small,
.checkout-payment-method-note {
    display: none !important;
}

/* Force Red on Add to Cart button under all states including disabled and variation choose states */
.product-buy button[name='inWarenkorb'],
#add-to-cart button[type='submit'],
.btn-basket,
.btn-basket.js-choose-variations-btn,
button.btn-basket,
button.btn-basket:disabled,
button.btn-basket.disabled,
.js-choose-variations-btn,
button.js-choose-variations-btn,
button.js-choose-variations-btn:disabled,
button.js-choose-variations-btn.disabled,
#buy_form button.js-choose-variations-btn,
#buy_form button[name='inWarenkorb'],
#buy_form button[name='inWarenkorb']:disabled,
#buy_form button.btn-primary,
#buy_form button.btn-primary:disabled,
#buy_form button.btn-primary.disabled,
.product-details-buy .btn-primary,
button.btn-primary.btn-block[name='inWarenkorb'] {
    background-color: #d3081c !important;
    border-color: #d3081c !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    opacity: 1 !important;
}

/* Blanket Red override for ALL Add to Cart buttons & hover states */
button[name='inWarenkorb'],
button.basket-details-add-to-cart,
.btn-basket,
.product-buy button[name='inWarenkorb'],
#add-to-cart button {
    background-color: #d3081c !important;
    border-color: #d3081c !important;
    color: #ffffff !important;
    border-radius: 8px !important;
}

button[name='inWarenkorb']:hover,
button.basket-details-add-to-cart:hover,
.btn-basket:hover,
.btn-basket.js-choose-variations-btn:hover,
button.btn-basket:hover,
button.btn-basket:disabled:hover,
button.js-choose-variations-btn:hover,
button.js-choose-variations-btn:disabled:hover,
#buy_form button.js-choose-variations-btn:hover,
#buy_form button[name='inWarenkorb']:hover,
#buy_form button.btn-primary:hover,
.product-buy button[name='inWarenkorb']:hover,
#add-to-cart button:hover {
    background-color: #b80616 !important;
    border-color: #b80616 !important;
    color: #ffffff !important;
}

/* Fix PDP Buy Button added / loading animation alignment and text hiding */
body .btn-basket,
body #buy_form button {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body .btn-basket .btn-basket-check,
body #buy_form button .btn-basket-check {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
}

body .btn-basket.is-added .btn-basket-check,
body .btn-basket.io-loading .btn-basket-check,
body #buy_form button.is-added .btn-basket-check,
body #buy_form button.io-loading .btn-basket-check {
    display: none !important; /* Hide text & default icon when added/loading */
}

body .btn-basket svg,
body #buy_form button svg {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 32px !important;
    height: 32px !important;
    max-width: none !important;
    max-height: none !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    display: none !important;
}

body .btn-basket svg path,
body #buy_form button svg path {
    stroke-dasharray: 19.79 19.79 !important;
    stroke-dashoffset: 19.79 !important;
    transition: stroke-dashoffset 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body .btn-basket.is-added svg,
body #buy_form button.is-added svg {
    display: block !important; /* Centered checkmark icon on success */
}

body .btn-basket.is-added svg path,
body #buy_form button.is-added svg path {
    stroke-dashoffset: 0 !important;
}

/* ---------------------------------------------------
   User's Dark Blue / Slate Theme Corrections
   Primary Color (Header): rgb(44, 62, 80) / #2c3e50
--------------------------------------------------- */
/* Wishlist / Favorite button should be dark blue */
/* Wishlist / Favorite button should be dark blue */
button.wishlist, 
.btn-wishlist,
.wishlist-button {
    background-color: rgb(44, 62, 80) !important;
    border-color: rgb(44, 62, 80) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
}
button.wishlist:hover, 
.btn-wishlist:hover,
.wishlist-button:hover {
    background-color: #1a252f !important;
    border-color: #1a252f !important;
}

/* Fix Wishlist Button overflowing the product card on Desktop */
.productbox-image .product-actions.actions-small,
.productbox .product-actions {
    right: 8px !important;
    top: 8px !important;
}


/* Product Tabs (Beschreibung / Bewertungen) hover & active state */
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: rgb(44, 62, 80) !important;
    border-bottom-color: rgb(44, 62, 80) !important;
}

/* ---------------------------------------------------
   Kill Default Theme Yellow Borders (SASS Compile Bypass)
--------------------------------------------------- */
.productbox:hover,
.productbox-hover:hover .productbox-inner,
.slick-slide .productbox:hover,
.productbox.hover .productbox-inner {
    border-color: rgb(44, 62, 80) !important;
    box-shadow: none !important;
}
/* Any primary text or border that leaks yellow/orange */
.text-primary {
    color: rgb(44, 62, 80) !important;
}
.border-primary {
    border-color: rgb(44, 62, 80) !important;
}





/* --- UI Fixes for Checkout Steps & Search Button --- */
header .search-form .form-control {
    border-radius: 8px 0 0 8px !important;
    border: none !important;
}
header .search-form .btn,
header .search-form .btn-primary {
    background-color: #495057 !important;
    border-color: #495057 !important; 
    color: #ffffff !important;
    border-radius: 0 8px 8px 0 !important;
}

.checkout-steps .nav-link.active {
    border-bottom-color: #007AFF !important;
    color: #007AFF !important;
}
.checkout-steps .step-number {
    border-color: #007AFF !important;
}

.stepper .step-active .step-content::after,
.stepper .step-current .step-content::after {
    background: #007AFF !important;
}


/* Sichere Bezahlung text white on dark header */
header .secure-payment-text,
header .top-bar .secure-text,
.header-top-bar .text-muted,
header .nav-top .text-muted,
header .secure-checkout-text,
#header .text-muted {
    color: #ffffff !important;
}

/* --- Checkout: Hide search bar on checkout pages --- */
.search-form-wrapper-fixed,
.main-search-wrapper {
    /* Only hide on checkout - done via header.tpl JS below */
}

/* Sichere Bezahlung text - make it white */
.secure-checkout-icon {
    color: #ffffff !important;
}
.secure-checkout-icon .fas.fa-lock {
    color: #ffffff !important;
}

/* Cart Badge - Yellow to App Store Blue */
.fa-sup {
    background-color: #007AFF !important;
    color: #ffffff !important;
}



/* Search Form Rounded Corners - Desktop & Mobile */
input#search-header.form-control,
input#search-header-mobile-top.form-control,
.search-form-wrapper-fixed .form-control,
.search-wrapper .form-control {
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.search-wrapper .input-group-append .btn,
.search-form-wrapper-fixed .input-group-append .btn {
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    background-color: #495057 !important;
    border-color: #495057 !important;
    color: #ffffff !important;
}

/* Ensure the wrapper doesn't clip */
.search-wrapper .input-group,
.search-form-wrapper-fixed .input-group {
    border-radius: 8px !important;
}

form.main-search .twitter-typeahead,
.search-form-wrapper-fixed .twitter-typeahead {
    flex: 1 1 auto !important;
    width: 1% !important;
}

/* Aggressive border radius for desktop search */
body form.main-search input.form-control,
body header form.main-search input[type="search"],
body header form.main-search input[type="text"],
body input#search-header,
body form.main-search span.twitter-typeahead input.tt-input,
body form.main-search span.twitter-typeahead input.tt-hint,
body .search-form-wrapper-fixed span.twitter-typeahead input.tt-input,
body .search-form-wrapper-fixed span.twitter-typeahead input.tt-hint {
    border-radius: 8px 0 0 20px !important;
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}



body .main-search .input-group-append .btn {
    border-radius: 0 20px 20px 0 !important;
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

/* === DELIVERY STATUS MODERNIZATION === */
.delivery-status .delivery-status-top {
    color: #6c757d !important;
    font-size: 1rem !important; /* normal text size instead of large */
    font-weight: 500 !important;
}

.delivery-status .delivery-status-top i.fa-check-circle {
    color: #28a745 !important; /* keep icon green */
    font-size: 1.1rem !important; /* slightly larger icon */
    margin-right: 5px;
}

/* === DELIVERY STATUS TEXT FIX === */
body .delivery-status.status-1,
body .delivery-status.text-success,
body .delivery-status .delivery-status-top,
body .delivery-status .status-1 {
    color: #6c757d !important;
    font-size: 1rem !important;
    font-weight: normal !important;
}

body .delivery-status-top .fa-check-circle,
body .delivery-status-top .fas {
    color: #28a745 !important;
    font-size: 1.1rem !important;
    margin-right: 5px;
}

/* Modernize Global Form Inputs (Checkout, Account, etc.) */
body input[type="text"],
body input[type="email"],
body input[type="password"],
body input[type="tel"],
body input[type="number"],
body textarea,
body select,
body .form-control,
body .custom-select,
body .float-label-control .form-control,
body .bootstrap-select .dropdown-toggle {
    border-radius: 8px !important;
    border: 1px solid #d1d5db !important; /* Lighter, modern gray */
    background-color: #ffffff !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

body input:focus,
body textarea:focus,
body select:focus,
body .form-control:focus,
body .custom-select:focus,
body .bootstrap-select .dropdown-toggle:focus {
    border-color: #007AFF !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 122, 255, 0.25) !important;
}

/* Blue Checkboxes and Radio Buttons */
body .custom-control-input:checked ~ .custom-control-label::before,
body .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before,
body .custom-radio .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #007AFF !important;
    border-color: #007AFF !important;
}

body .custom-control-input:focus ~ .custom-control-label::before,
body .custom-control-input:active ~ .custom-control-label::before {
    box-shadow: 0 0 0 0.2rem rgba(0, 122, 255, 0.25) !important;
}

/* Eliminate remaining yellow (e.g. Ändern / Edit links in checkout) */
body #checkout-shipping-address a,
body #checkout-billing-address a,
body #checkout a.text-primary,
body #checkout a[href*="edit"],
body #checkout a i.fa-pencil-alt {
    color: #007AFF !important;
}
body #checkout a:hover {
    color: #005bb5 !important;
}

/* === CHECKOUT STEP 2: Versandkosten Badge Fix === */
/* Remove the blue background from the shipping cost badge, show as clean text */
.checkout-shipping-form-options .price-col .badge {
    background-color: transparent !important;
    background: none !important;
    color: #1b222c !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    display: inline !important;
}
/* Clean up the "Versandkosten" sub-label */
.checkout-shipping-form-options .price-col .small.text-muted {
    font-size: 0.75rem !important;
    margin-top: 0.15rem !important;
}

/* === CHECKOUT STEP 2: Zahlungsart Alignment Fix === */
/* Vertically center radio button + logo + text on same horizontal line */
.checkout-payment-method .custom-control {
    display: flex !important;
    align-items: center !important;
    min-height: auto !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}
.checkout-payment-method .custom-control-label {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
}
.checkout-payment-method .custom-control-label::before,
.checkout-payment-method .custom-control-label::after {
    top: 50% !important;
    transform: translateY(-50%) !important;
}
.checkout-payment-method .custom-control-label img.img-sm {
    max-height: 32px !important;
    width: auto !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
}
.checkout-payment-method .custom-control-label .title {
    display: inline-flex !important;
    align-items: center !important;
}


/* === FIX: PRODUCT CARD BOTTOM ALIGNMENT (GRID ONLY) === */
/* Removed dangerous flex-grow rules causing infinite stretch */
/* Enforce fixed title height instead for stable alignment */
body #product-list .productbox-title a,
body #result-wrapper .productbox-title a,
body .product-slider-Bestseller .productbox-title a,
body .opc-ProductStream-gallery .productbox-title a,
body .slick-slider-other .productbox-title a,
.productbox-title a {
    min-height: 3.2rem !important; /* Safely accommodates exactly 2 lines */
    height: 3.2rem !important;
    line-height: 1.6rem !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    margin-bottom: 0 !important;
}

/* Ensure the button never sticks to the very edge of the card */
.productbox-options {
    margin-top: auto !important;
    margin-bottom: 0 !important;
    position: relative !important;
}

/* Force productbox to protect its content from JS matchHeight clipping */
body #product-list .productbox-inner,
body #result-wrapper .productbox-inner,
.productbox-inner {
    display: flex !important;
    flex-direction: column !important;
    min-height: max-content !important; /* Prevents button cutoff */
    height: 100% !important;
    padding-bottom: 10px !important; /* Safe padding at the bottom */
}

/* === APPLE/ZALANDO MOBILE UX OVERHAUL === */
@media (max-width: 767px) {
    /* Hide the chunky "Zum Artikel" button completely on mobile */
    body #product-list .productbox-options,
    body #result-wrapper .productbox-options,
    .mobile-product-scroll .productbox-options {
        display: none !important;
    }
    
    /* Make the entire card clickable by stretching the title link */
    body #product-list .product-wrapper,
    body #result-wrapper .product-wrapper,
    .product-wrapper,
    body #product-list .productbox,
    body #result-wrapper .productbox,
    .productbox,
    body #product-list .productbox-inner,
    body #result-wrapper .productbox-inner,
    .productbox-inner {
        position: relative !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 !important; /* Make it wider by removing margin */
        background: transparent !important;
        height: auto !important; /* KILL matchHeight.js stretching! */
    }
    
    .productbox-title a::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 5;
    }
    
    /* Keep variation badge above the click overlay just in case */
    .custom-variation-badge-wrapper {
        position: relative;
        z-index: 10;
        pointer-events: none; /* Let clicks pass through to the overlay */
        height: auto !important; /* Remove fixed height for compactness */
        min-height: 24px !important; 
        margin-bottom: 4px !important;
        margin-left: 2.03px !important; /* Pulled to the right to avoid sticking to the border */
    }
    
    /* Remove forced heights on mobile to make cards much more compact and slightly increase font size */
    body #product-list .productbox-title a,
    body #result-wrapper .productbox-title a,
    .productbox-title a {
        min-height: 0 !important;
        height: auto !important;
        margin-bottom: 6px !important;
        font-size: 0.95rem !important;
        line-height: 1.35 !important;
    }
    
    /* KILL all matchHeight.js inline styles to prevent massive empty spaces */
    body #product-list .productbox-title,
    body #result-wrapper .productbox-title,
    .productbox-title,
    body #product-list .productbox-details,
    body #result-wrapper .productbox-details,
    .productbox-details,
    .productbox {
        height: auto !important;
        min-height: 0 !important;
    }
    
    /* Push price to bottom gracefully if matchHeight stretches the card */
    .mobile-price-wrapper {
        margin-top: auto !important;
        margin-bottom: 2px !important;
        margin-left: 2.03px !important; /* Pulled to the right to avoid sticking to the border */
    }
}

/* Mobile Breadcrumb (Back Link & Parent Category Link) UX Refinements */
@media (max-width: 767.98px) {
    .breadcrumb-wrapper {
        margin-bottom: 14px !important; /* Total gap 30px: 8px item margin + 8px list padding + 14px wrapper margin */
    }
    body #breadcrumb .breadcrumb {
        flex-wrap: wrap !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        overflow: visible !important;
        width: 100% !important;
        background: transparent !important;
        border: none !important;
        padding-left: 15px !important;
        gap: 8px !important;
    }
    body #breadcrumb .breadcrumb-item.breadcrumb-arrow,
    body #breadcrumb .breadcrumb-item.breadcrumb-backtolist {
        background-color: #26303F !important; /* Softer slate blue background */
        border: 1px solid #26303F !important;   /* Softer slate blue border */
        border-radius: 20px !important;         /* Rounded pill shape */
        padding: 6px 16px !important;           /* Identical padding to JTL Startseite button */
        font-weight: 700 !important;  /* Bold font */
        margin: 0 !important;
        white-space: normal !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
        width: auto !important;
        max-width: 95% !important;
    }
    body #breadcrumb .breadcrumb-item.breadcrumb-arrow a,
    body #breadcrumb .breadcrumb-item.breadcrumb-backtolist a,
    body #breadcrumb .breadcrumb-item.breadcrumb-arrow a span,
    body #breadcrumb .breadcrumb-item.breadcrumb-backtolist a span {
        color: #ffffff !important;    /* Sleek white color */
        font-weight: 700 !important;
        text-decoration: none !important;
        display: inline-block !important;
        max-width: 100% !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
        vertical-align: middle !important;
    }
    body #breadcrumb .breadcrumb-item.breadcrumb-backtolist::before {
        content: "\f060" !important; /* FontAwesome arrow-left */
        font-family: "Font Awesome 5 Free" !important;
        color: #ffffff !important;
        margin-right: 8px !important;
        font-weight: 900 !important;
        display: inline-block !important;
    }
    body #breadcrumb .breadcrumb-item.breadcrumb-arrow::before {
        content: "\f015" !important; /* FontAwesome home icon instead of folder */
        font-family: "Font Awesome 5 Free" !important;
        color: #ffffff !important;
        margin-right: 8px !important;
        font-weight: 900 !important;
        display: inline-block !important;
    }
}

/* Premium added-to-cart alert box styling */
#pushed-success.card.alert,
#pushed-success-inline.card.alert {
    background-color: #ffffff !important;
    border: 1px solid #eaeaea !important;
    border-left: 4px solid #1f2937 !important; /* Premium dark navy left accent border instead of green */
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    margin-top: 15px !important;
    margin-bottom: 25px !important;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

#pushed-success .pushed-success-image-wrapper img,
#pushed-success-inline .pushed-success-image-wrapper img {
    max-height: 160px !important;
    width: auto !important;
    object-fit: contain !important;
}

#pushed-success .card-header.alert-success,
#pushed-success-inline .card-header.alert-success {
    background-color: #f3f4f6 !important; /* Very soft light gray/blue tint instead of green */
    border: none !important;
    color: #1f2937 !important; /* Dark navy text instead of green */
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    padding: 16px 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

#pushed-success .card-header.alert-success::before,
#pushed-success-inline .card-header.alert-success::before {
    content: "✓" !important;
    font-weight: 900 !important;
    display: inline-block !important;
    font-size: 1.2rem !important;
    color: #1f2937 !important;
}

#pushed-success .card-body,
#pushed-success-inline .card-body {
    padding: 20px !important;
    background-color: #ffffff !important;
}

#pushed-success .productbox-title.subheadline,
#pushed-success-inline .productbox-title.subheadline {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #111111 !important;
    margin-bottom: 12px !important;
}

#pushed-success .pushed-success-buttons .btn,
#pushed-success-inline .pushed-success-buttons .btn {
    border-radius: 8px !important;            /* Modern rounded corners */
    font-family: Outfit, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-weight: 700 !important;                /* Match PDP button font style */
    padding: 12px 20px !important;
    font-size: 0.95rem !important;
    text-transform: none !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

#pushed-success .pushed-success-buttons .continue-shopping,
#pushed-success-inline .pushed-success-buttons .continue-shopping {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;        /* Softer border */
    color: #1f2937 !important;                   /* Dark text */
}

#pushed-success .pushed-success-buttons .continue-shopping:hover,
#pushed-success-inline .pushed-success-buttons .continue-shopping:hover {
    background-color: #f8fafc !important;
    border-color: #94a3b8 !important;
}

#pushed-success .pushed-success-buttons .btn-basket,
#pushed-success-inline .pushed-success-buttons .btn-basket,
#pushed-success .pushed-success-buttons a.btn-primary.btn-basket,
#pushed-success-inline .pushed-success-buttons a.btn-primary.btn-basket {
    background-color: #d3081c !important;
    border-color: #d3081c !important;
    color: #ffffff !important;
    transition: all 0.2s ease !important;
}

#pushed-success .pushed-success-buttons .btn-basket:hover,
#pushed-success-inline .pushed-success-buttons .btn-basket:hover,
#pushed-success .pushed-success-buttons a.btn-primary.btn-basket:hover,
#pushed-success-inline .pushed-success-buttons a.btn-primary.btn-basket:hover {
    background-color: #b80616 !important;
    border-color: #b80616 !important;
    color: #ffffff !important;
}

/* Hide massive product details on mobile to make it compact */
@media (max-width: 767.98px) {
    #pushed-success.card.alert,
    #pushed-success-inline.card.alert {
        border-left: none !important; /* Remove left accent border on mobile */
    }
    
    #pushed-success dl.form-row,
    #pushed-success-inline dl.form-row {
        display: none !important; /* Hide SKU and characteristics on mobile */
    }
    
    #pushed-success .pushed-success-image-wrapper,
    #pushed-success-inline .pushed-success-image-wrapper {
        text-align: center !important;
        margin-bottom: 8px !important;
    }
    
    #pushed-success .pushed-success-image-wrapper img,
    #pushed-success-inline .pushed-success-image-wrapper img {
        max-height: 120px !important;
        width: auto !important;
        object-fit: contain !important;
    }
    
    #pushed-success .card-body,
    #pushed-success-inline .card-body {
        padding: 12px !important;
    }
    
    #pushed-success .pushed-success-buttons,
    #pushed-success-inline .pushed-success-buttons {
        margin-top: 10px !important;
    }
    
    #pushed-success .pushed-success-buttons .btn,
    #pushed-success-inline .pushed-success-buttons .btn {
        padding: 10px 15px !important;
        font-size: 0.95rem !important;
    }
}

/* Brand Red Action Buttons in Basket & Checkout (Zur Kasse, Weiter, Zahlungspflichtig bestellen, etc.) */
#cart-checkout-btn,
#complete-order-button,
#checkout button[type="submit"],
#checkout .btn-primary,
#checkout input[type="submit"].btn-primary {
    background-color: #d3081c !important;
    border-color: #d3081c !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

#cart-checkout-btn:hover,
#cart-checkout-btn:focus,
#cart-checkout-btn:active,
#complete-order-button:hover,
#complete-order-button:focus,
#complete-order-button:active,
#checkout button[type="submit"]:hover,
#checkout button[type="submit"]:focus,
#checkout button[type="submit"]:active,
#checkout .btn-primary:hover,
#checkout .btn-primary:focus,
#checkout .btn-primary:active,
#checkout input[type="submit"].btn-primary:hover,
#checkout input[type="submit"].btn-primary:focus,
#checkout input[type="submit"].btn-primary:active {
    background-color: #b80616 !important;
    border-color: #b80616 !important;
    color: #ffffff !important;
}

/* Slider & Recommendations Sizing & Alignment Refinements on Desktop */
@media (min-width: 992px) {
    /* Only apply max-width and flex centering if the slider is NOT slick-initialized (i.e. rendering static grid columns) */
    .recommendations .row:not(.slick-initialized) .product-wrapper,
    .slick-slider-other:not(.slick-initialized) .product-wrapper,
    .recommendations .row:not(.slick-initialized) .productbox,
    .slick-slider-other:not(.slick-initialized) .productbox {
        max-width: 285px !important;
        flex: 0 0 285px !important;
        width: 285px !important;
        min-width: 285px !important;
    }
    
    .recommendations .row:not(.slick-initialized),
    .slick-slider-other:not(.slick-initialized) .row {
        display: flex !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
    }
}

/* Hide accessibility skip-to links unless focused */
.btn-skip-to:not(:focus) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Style when focused */
.btn-skip-to:focus {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 99999 !important;
    width: auto !important;
    height: auto !important;
    padding: 10px 20px !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
    background-color: #007AFF !important;
    color: #ffffff !important;
    border: 1px solid #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
}

/* === CHECKOUT: GLOBAL UX & HEADER FIX (DESKTOP & MOBILE) === */
body.is-checkout #jtl-nav-wrapper {
    position: relative !important;
    height: auto !important;
    min-height: 70px !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    display: flex !important;
    align-items: center !important;
    background-color: #1b222c !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    top: 0 !important;
    overflow: visible !important;
}

body.is-checkout #content-wrapper {
    margin-top: 0 !important;
    padding-top: 30px !important;
}

/* Ensure inner container has full width and centers vertically */
body.is-checkout #jtl-nav-wrapper .container,
body.is-checkout #jtl-nav-wrapper .container-fluid {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: auto !important;
    min-height: unset !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* Vertically center logo and prevent clipping */
body.is-checkout .toggler-logo-wrapper {
    display: flex !important;
    align-items: center !important;
    height: auto !important;
}

body.is-checkout #logo {
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
}

body.is-checkout #shop-logo {
    max-height: 36px !important; /* Slightly larger on desktop, fits beautifully */
    height: auto !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
}

/* Vertically center secure checkout elements */
body.is-checkout .navbar {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    height: auto !important;
    background: transparent !important;
}

body.is-checkout .secure-checkout-icon {
    color: #ffffff !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
}

body.is-checkout .secure-checkout-icon i {
    font-size: 1.1rem !important;
    color: #ffffff !important;
}

/* Mobile specific overrides to keep it compact */
@media (max-width: 991px) {
    body.is-checkout #jtl-nav-wrapper {
        min-height: 60px !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }
    body.is-checkout #shop-logo {
        max-height: 28px !important;
    }
    body.is-checkout .secure-checkout-icon {
        font-size: 0.85rem !important;
    }
    body.is-checkout .secure-checkout-icon i {
        font-size: 0.9rem !important;
    }
    /* Shipping Options Mobile Pricing Alignment fixes */
    #checkout .checkout-shipping-form-options-radio .content.row,
    #checkout .checkout-shipping-form-options-radio .content.form-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
    }
    .checkout-shipping-form-options .title {
        flex: 0 0 60% !important;
        max-width: 60% !important;
        display: inline-flex !important;
        align-items: center !important;
        align-self: center !important;
    }
    .checkout-shipping-form-options .price-col {
        flex: 0 0 40% !important;
        max-width: 40% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        align-self: center !important;
    }
    .checkout-shipping-form-options .order-3 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-top: 4px !important;
    }
    /* Checkout Header Mobile Flex Alignment to prevent logo and secure checkout overlapping */
    body.is-checkout #jtl-nav-wrapper > [class*="container"] {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        height: auto !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    body.is-checkout .toggler-logo-wrapper {
        position: static !important;
        transform: none !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
    }
    body.is-checkout #logo {
        position: static !important;
        transform: none !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
    }
    body.is-checkout .navbar {
        position: static !important;
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    body.is-checkout .secure-checkout-icon {
        margin-left: auto !important;
    }
}

/* === PREMIUM SHIPPING BADGES === */
.badge-shipping-free {
    background-color: rgba(16, 185, 129, 0.1) !important; /* Soft emerald green */
    color: #10b981 !important; /* Emerald green text */
    border-radius: 6px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    padding: 6px 10px !important;
    display: inline-block !important;
    white-space: nowrap !important;
}

.badge-shipping-cost {
    background-color: rgba(0, 122, 255, 0.1) !important; /* Soft app-store blue */
    color: #007AFF !important; /* Blue text */
    border-radius: 6px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    padding: 6px 10px !important;
    display: inline-block !important;
    white-space: nowrap !important;
}

/* Ensure PDP "Add to Cart" button text is always displayed on mobile/tablet viewports */
body #add-to-cart .btn-basket-check > span,
body .btn-basket .btn-basket-check > span,
body #buy_form button .btn-basket-check > span,
body .product-buy .btn-basket-check > span {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* === PREMIUM CHECKOUT STEPPER REDESIGN (MOBILE & DESKTOP) === */
body .stepper,
body .checkout-steps {
    border: none !important;
    background-color: #ffffff !important;
    background: #ffffff !important;
    box-shadow: none !important;
    padding: 24px 0 !important;
    margin: 0 auto 30px auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    position: relative !important;
    width: 100% !important;
    min-height: auto !important;
}

@media (min-width: 576px) {
    body .stepper,
    body .checkout-steps {
        max-width: 540px !important;
    }
}
@media (min-width: 768px) {
    body .stepper,
    body .checkout-steps {
        max-width: 720px !important;
    }
}
@media (min-width: 992px) {
    body .stepper,
    body .checkout-steps {
        max-width: 960px !important;
    }
}
@media (min-width: 1200px) {
    body .stepper,
    body .checkout-steps {
        max-width: 1140px !important;
    }
}

/* Hide JTL chevrons, triangles, and extra pseudo-elements */
body .stepper .step::after, 
body .stepper .step::before, 
body .stepper .step-content::after,
body .stepper .step-content::before,
body .checkout-steps .step::after,
body .checkout-steps .step::before,
body .checkout-steps .step-content::after,
body .checkout-steps .step-content::before {
    display: none !important;
    content: none !important;
}

/* Thin horizontal line connecting all steps in the background */
body .checkout-steps::before {
    content: "" !important;
    position: absolute !important;
    top: 38px !important; /* Vertically centered behind the 28px circles */
    left: 16.666% !important; /* Spans between the center of step 1 and step 3 */
    right: 16.666% !important;
    height: 3px !important; /* Prominent 3px thickness */
    background-color: #cbd5e1 !important; /* Prominent gray */
    z-index: 1 !important;
    display: block !important;
}

/* Individual Step columns and inner components normalization to align circles perfectly */
body .checkout-steps .step,
body .checkout-steps .step *,
body .checkout-steps .step-content {
    margin: 0 !important;
    padding: 0 !important;
}

body .checkout-steps .step {
    position: relative !important;
    z-index: 2 !important;
    background: transparent !important;
    background-color: transparent !important;
    flex: 1 1 33.333% !important;
    max-width: 33.333% !important;
    min-width: 33.333% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    border: none !important;
}

body .checkout-steps a,
body .checkout-steps span {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    text-decoration: none !important;
}

/* Step content wrapping circle + text */
body .checkout-steps .step-content {
    display: flex !important;
    flex-direction: column !important; /* Circle on top, Text below */
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    background-color: transparent !important; /* Transparent background to prevent blocking/cutting the line */
    border-radius: 0 !important;
    border: none !important;
    width: auto !important;
    max-width: 100% !important;
}

/* Default state of the step circle badges */
body .checkout-steps .badge-pill {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 2px solid #cbd5e1 !important;
    background-color: #ffffff !important;
    color: #94a3b8 !important;
    box-shadow: none !important;
    transition: all 0.25s ease !important;
    z-index: 3 !important;
}

/* Active & current step circles (Header's dark navy) */
body .checkout-steps .step-current .badge-pill {
    background-color: #1b222c !important;
    border-color: #1b222c !important;
    color: #ffffff !important;
}

/* Completed step circles */
body .checkout-steps .step-active:not(.step-current) .badge-pill {
    background-color: #1b222c !important;
    border-color: #1b222c !important;
    color: #ffffff !important;
}

/* Completed steps: hide the number, show white checkmark */
body .checkout-steps .step-active:not(.step-current) .badge-count {
    display: none !important;
}

body .checkout-steps .step-active:not(.step-current) .badge-pill::before {
    content: "\f00c" !important; /* FontAwesome check icon */
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    font-size: 0.8rem !important;
    color: #ffffff !important;
}

/* Hide original JTL side checkmark completely */
body .checkout-steps .step-check {
    display: none !important;
}

/* Step Text labels below circles */
body .checkout-steps .step-text {
    display: block !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: #94a3b8 !important; /* Muted for inactive */
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-top: 4px !important;
    text-align: center !important;
    white-space: normal !important;
}

body .checkout-steps .step-current .step-text {
    color: #1b222c !important; /* Active text color */
}

body .checkout-steps .step-active:not(.step-current) .step-text {
    color: #475569 !important; /* Completed text color */
}

/* Mobile adjustments */
@media (max-width: 991px) {
    /* Hide the step text on mobile to stay super clean and fit easily */
    body .checkout-steps .step-text {
        display: none !important;
    }
    
    body .checkout-steps {
        padding: 15px 0 !important;
        margin: 0 0 15px 0 !important;
    }
    
    body .checkout-steps::before {
        top: 29px !important; /* Adjusted top for mobile padding */
    }
    
    body .checkout-steps .step-content {
        padding: 0 8px !important;
    }
}

/* Desktop Alignment & Width Optimization for Checkout Page */
@media (min-width: 992px) {
    /* Align topbar utilities to the far right on desktop without squishing the logo */
    body.is-checkout .navbar,
    .is-checkout-header .navbar {
        flex-grow: 1 !important;
        display: flex !important;
        justify-content: space-between !important;
        margin-left: 40px !important;
    }
    
    /* Force checkout form columns to take standard shop container width */
    body.is-checkout #checkout.col-lg-10,
    body.is-checkout #checkout.col-xl-8,
    body.is-checkout #checkout.col-lg-12 {
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
}

/* Impressum Compact Spacing Adjustment */
.impressum-wrapper .impressum-list-item {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    margin-bottom: 0 !important;
    line-height: 1.3 !important;
}
.impressum-wrapper .impressum-card .card-body {
    padding: 16px !important;
}

/* Collapsible Legal Menu Styles in Mobile Menu */
.mobile-menu-utilities .utility-nav-link[aria-expanded="true"] .toggle-arrow {
    transform: rotate(90deg);
}
.mobile-menu-utilities .utility-nav-link .toggle-arrow {
    transition: transform 0.2s ease-in-out;
}
.mobile-menu-utilities .legal-sub-list {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    margin: 6px 0 10px 0;
    padding: 4px 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.mobile-menu-utilities .legal-sub-link {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    color: rgba(255, 255, 255, 0.75) !important;
    text-decoration: none !important;
    font-size: 0.94rem;
    transition: all 0.2s ease-in-out;
}
.mobile-menu-utilities .legal-sub-link:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
}
.mobile-menu-utilities .legal-icon-wrap {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    margin-right: 12px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    flex-shrink: 0;
}
.mobile-menu-utilities .legal-sub-link:hover .legal-icon-wrap {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

/* Premium Bootstrap Select & Variation Dropdown Custom Styling */
body .bootstrap-select {
    width: 100% !important;
}

body .bootstrap-select > .dropdown-toggle {
    height: 48px !important;
    padding: 10px 16px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #1b222c !important;
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

body .bootstrap-select > .dropdown-toggle:focus,
body .bootstrap-select > .dropdown-toggle:active {
    border-color: #1b222c !important;
    box-shadow: 0 0 0 3px rgba(27, 34, 44, 0.15) !important;
    outline: none !important;
}

/* Dropdown Menu Container styling */
body .bootstrap-select .dropdown-menu {
    border-radius: 12px !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
    padding: 6px 0 !important;
    margin-top: 4px !important;
    background-color: #ffffff !important;
    z-index: 1050 !important;
}

/* Dropdown List Items styling */
body .bootstrap-select .dropdown-menu .dropdown-item,
body #product-offers .bootstrap-select .dropdown-menu .dropdown-item,
body .bootstrap-select .dropdown-menu ul li a {
    min-height: 46px !important;
    padding: 12px 20px !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    color: #1b222c !important;
    display: flex !important;
    align-items: center !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
    border-bottom: 1px solid #f3f4f6 !important; /* Elegant divider line */
}

/* Remove border on the last item */
body .bootstrap-select .dropdown-menu ul li:last-child a,
body .bootstrap-select .dropdown-menu .dropdown-item:last-child {
    border-bottom: none !important;
}

/* Option item text span */
body .bootstrap-select .dropdown-menu .dropdown-item span.text,
body .bootstrap-select .dropdown-menu ul li a span.text {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #1b222c !important;
    opacity: 1 !important;
}

/* Hover and Focus States */
body .bootstrap-select .dropdown-menu .dropdown-item:hover,
body .bootstrap-select .dropdown-menu .dropdown-item:focus,
body .bootstrap-select .dropdown-menu ul li a:hover,
body .bootstrap-select .dropdown-menu ul li a:focus {
    background-color: #f3f4f6 !important;
    color: #1b222c !important;
    text-decoration: none !important;
    outline: none !important;
}

/* Selected Active State */
body .bootstrap-select .dropdown-menu .dropdown-item.selected,
body .bootstrap-select .dropdown-menu .dropdown-item.active,
body .bootstrap-select .dropdown-menu ul li.selected a,
body .bootstrap-select .dropdown-menu ul li.active a {
    background-color: #1b222c !important;
    color: #ffffff !important;
}

body .bootstrap-select .dropdown-menu .dropdown-item.selected span.text,
body .bootstrap-select .dropdown-menu .dropdown-item.active span.text,
body .bootstrap-select .dropdown-menu ul li.selected a span.text,
body .bootstrap-select .dropdown-menu ul li.active a span.text {
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* Variation Labels Red Styling */
body .variations dt,
body .variations .js-btn-slider-wrapper {
    color: #d3081c !important; /* Brand red color */
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

body .variations dt span.swatches-selected {
    color: #1b222c !important; /* Dark gray for the selected value to contrast nicely */
    font-weight: 700 !important;
}

/* Selected Swatch (Image & Text) Red Border Override */
body .swatches .variation.active,
body .swatches .swatches-image.active,
body .swatches .swatches-text.active,
body label.variation.active,
body label.swatches.active {
    border-color: #d3081c !important; /* Brand red border */
    border-width: 2px !important;      /* Thicker border */
    box-shadow: 0 0 0 1px #d3081c !important;
}

body .swatches .variation:hover,
body .swatches .swatches-image:hover,
body .swatches .swatches-text:hover,
body label.variation:hover,
body label.swatches:hover {
    border-color: #d3081c !important;
}

/* ==========================================================================
   PREMIUM CART PAGE (WARENKORB) MODERNIZATION (v218+)
   ========================================================================== */

/* Cart Header Style (Clean and Modern) */
body h1.basket-heading {
    font-family: Outfit, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-weight: 600 !important;
    color: #111827 !important;
    font-size: 1.75rem !important;
    margin-bottom: 24px !important;
    letter-spacing: -0.02em !important;
}

/* Row wrapper for each cart position */
body .cart-items-body {
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 20px 0 !important;
    margin: 0 !important;
}

/* Style the product title (No longer thin/ciliz!) */
body .cart-items-name {
    font-family: Outfit, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-weight: 700 !important;              /* Strong, readable bold font weight */
    font-size: 1.1rem !important;              /* Increased readability */
    color: #1f2937 !important;                 /* Slate-dark premium text */
    line-height: 1.4 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
    display: inline-block !important;
    margin-bottom: 6px !important;
}

body .cart-items-name:hover {
    color: #d3081c !important;                 /* Carocase Red accent on hover */
    text-decoration: none !important;
}

/* Variations/Attributes/SKU details styling */
body .cart-items-body .list-unstyled {
    margin-top: 4px !important;
    margin-bottom: 0 !important;
    padding-left: 0 !important;
}

body .cart-items-body .list-unstyled li {
    font-size: 0.85rem !important;
    color: #6b7280 !important;                 /* Muted neutral gray */
    margin-bottom: 3px !important;
    line-height: 1.4 !important;
}

body .cart-items-body .list-unstyled li strong {
    font-weight: 600 !important;
    color: #4b5563 !important;
}

/* Hide original bottom row delete button to prevent duplicate controls */
body .cart-items-delete .cart-items-delete-button {
    display: none !important;
}

/* Keep wishlist button aligned nicely if present */
body .cart-items-delete {
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    max-width: none !important;
    flex: none !important;
}

/* Pill-shaped Quantity counter (like Apple / Shopify) */
body .choose_quantity.form-counter {
    border: 1px solid #cbd5e1 !important;
    border-radius: 24px !important;            /* Modern pill/rounded shape */
    padding: 2px !important;
    background-color: #f8fafc !important;      /* Subtle cool gray background */
    display: inline-flex !important;
    align-items: center !important;
    max-width: 110px !important;
    height: 36px !important;
    overflow: hidden !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.02) !important;
}

body .choose_quantity.form-counter .btn-decrement,
body .choose_quantity.form-counter .btn-increment {
    background: none !important;
    border: none !important;
    color: #64748b !important;
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.75rem !important;
    transition: all 0.2s ease !important;
    border-radius: 50% !important;
}

body .choose_quantity.form-counter .btn-decrement:hover,
body .choose_quantity.form-counter .btn-increment:hover {
    color: #0f172a !important;
    background-color: #e2e8f0 !important;
}

body .choose_quantity.form-counter input.quantity {
    background: none !important;
    border: none !important;
    font-family: Outfit, sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    color: #0f172a !important;
    text-align: center !important;
    width: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* Premium Inline Delete Button next to Quantity */
body .qty-wrapper .inline-delete-btn {
    color: #94a3b8 !important;                 /* Clean gray trash icon by default */
    padding: 6px 12px !important;
    font-size: 0.95rem !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    background: none !important;
    margin-left: 8px !important;
}

body .qty-wrapper .inline-delete-btn:hover {
    color: #ef4444 !important;                 /* Warm warning red on hover */
    background-color: rgba(239, 68, 68, 0.05) !important;
    border-radius: 6px !important;
    text-decoration: none !important;
}

/* Overall Position Price Style */
body .cart-items-price .price_overall {
    font-family: Outfit, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: #111827 !important;                 /* Premium charcoal black */
}

/* Unit Price (Single Price) block */
body .cart-items-single-price {
    font-size: 0.9rem !important;
    color: #4b5563 !important;
}

/* Order summary box (sticky right column) */
body .sticky-top.cart-summary {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;            /* Extra smooth rounded corners */
    padding: 24px !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.02) !important; /* Soft premium shadow */
}

body .cart-summary .basket-heading {
    font-family: Outfit, sans-serif !important;
    font-size: 1.4rem !important;
    font-weight: 600 !important;
    color: #111827 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding-bottom: 16px !important;
    margin-bottom: 20px !important;
    letter-spacing: -0.01em !important;
}

/* Coupon container customization */
body .cart-summary .card-gray {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    margin-bottom: 16px !important;
    overflow: hidden !important;
}

body .cart-summary .card-gray .card-header {
    background-color: #f8fafc !important;
    border-bottom: none !important;
    padding: 0 !important;
}

body .cart-summary .card-gray .card-header button {
    font-family: Outfit, sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    color: #475569 !important;
    text-decoration: none !important;
    padding: 14px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

body .cart-summary .card-gray .card-header button::after {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    content: "\f078" !important;                /* chevron down */
    font-size: 0.8rem !important;
    color: #94a3b8 !important;
    transition: transform 0.2s ease !important;
    margin-left: auto !important;
}

body .cart-summary .card-gray .card-header button[aria-expanded="true"]::after {
    transform: rotate(180deg) !important;
}

/* Summary pricing rows */
body .basket-summary {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}

body .basket-summary .total-net,
body .basket-summary .tax,
body .basket-summary .customer-credit,
body .basket-summary .basket-summary-total {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

body .basket-summary .total-net > [class*="col-"],
body .basket-summary .tax > [class*="col-"],
body .basket-summary .customer-credit > [class*="col-"],
body .basket-summary .basket-summary-total > [class*="col-"] {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
}

/* General labels styling in Summary */
body .basket-summary .price_label,
body .basket-summary .tax_label {
    font-family: Outfit, sans-serif !important;
    font-weight: 500 !important;
    color: #4b5563 !important;
    font-size: 0.95rem !important;
    white-space: nowrap !important;             /* Prevent colon wrapping */
}

/* General prices styling in Summary */
body .basket-summary .price.total-sum,
body .basket-summary .tax_label:not(span) {
    font-family: Outfit, sans-serif !important;
    font-weight: 700 !important;
    color: #111827 !important;
    font-size: 1.05rem !important;
}

/* Subtotal Row Highlight (Zwischensumme) */
body .basket-summary .basket-summary-total {
    border-top: 1px solid #e2e8f0 !important;
    padding-top: 16px !important;
    margin-top: 16px !important;
    margin-bottom: 16px !important;
}

body .basket-summary .basket-summary-total .price_label {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: #111827 !important;
    white-space: nowrap !important;             /* Prevent colon wrapping! */
}

body .basket-summary .basket-summary-total .total-sum {
    font-family: Outfit, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: #111827 !important;                 /* Premium charcoal black */
}

/* Shipping info badge styling */
body .basket-summary .shipping-costs-row {
    margin-bottom: 16px !important;
}

body .basket-summary .free-shipping-badge,
body .basket-summary .standard-shipping-badge {
    background-color: #eff6ff !important;      /* Soft blue background */
    border: 1px solid #bfdbfe !important;      /* Subtle border */
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-family: Outfit, sans-serif !important;
    font-size: 0.9rem !important;
    color: #1d4ed8 !important;                 /* Deep premium blue */
    display: flex !important;                  /* Standard flex layout */
    align-items: flex-start !important;        /* Align truck icon to top-left when wrapped */
    width: 100% !important;
    line-height: 1.4 !important;
    white-space: normal !important;            /* Override any inherited nowrap */
}

body .basket-summary .free-shipping-badge i,
body .basket-summary .standard-shipping-badge i {
    font-size: 1rem !important;
    margin-right: 10px !important;
    margin-top: 2px !important;                /* Align icon vertically with first line */
    color: #3b82f6 !important;
    flex-shrink: 0 !important;                  /* Prevent icon from squeezing */
}

body .basket-summary .free-shipping-badge span,
body .basket-summary .standard-shipping-badge span,
body .basket-summary .free-shipping-badge a,
body .basket-summary .standard-shipping-badge a {
    white-space: normal !important;            /* Ensure text wrapping is allowed */
    display: inline !important;
    color: #1d4ed8 !important;
}

body .basket-summary .free-shipping-badge a,
body .basket-summary .standard-shipping-badge a {
    text-decoration: underline !important;
    font-weight: 600 !important;
}

/* Proceed to checkout CTA button in Summary */
body #cart-checkout-btn {
    display: block !important;
    width: 100% !important;
    background-color: #d3081c !important;
    border-color: #d3081c !important;
    color: #ffffff !important;
    font-family: Outfit, sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    padding: 14px 20px !important;
    border-radius: 8px !important;
    text-align: center !important;
    transition: all 0.2s ease !important;
    margin-top: 16px !important;
    box-shadow: 0 4px 6px -1px rgba(211, 8, 28, 0.15) !important;
}

body #cart-checkout-btn:hover {
    background-color: #b80616 !important;
    border-color: #b80616 !important;
    box-shadow: 0 6px 12px -1px rgba(211, 8, 28, 0.25) !important;
}

/* ==========================================================================
   MOBILE VIEWPORT OPTIMIZATIONS (max-width: 991.98px)
   ========================================================================== */
@media (max-width: 991.98px) {
    /* Make each item row a horizontal card layout */
    body .cart-items-body {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        padding: 16px 0 !important;
    }

    /* Left Side: Thumbnail Image */
    body .cart-items-body .cart-items-image {
        width: 80px !important;
        max-width: 80px !important;
        flex: 0 0 80px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    body .cart-items-body .cart-items-image img {
        border-radius: 8px !important;
        border: 1px solid #f1f5f9 !important;
    }

    /* Right Side: Main content area */
    body .cart-items-body > .col {
        flex: 1 1 auto !important;
        padding: 0 0 0 20px !important; /* Elegant 20px spacing between image and text */
        margin: 0 !important;
        width: calc(100% - 80px) !important;
        display: block !important;
    }

    /* Override Bootstrap columns into clean Grid structure */
    body .cart-items-body .row.align-items-baseline {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        grid-template-rows: auto auto !important;
        grid-template-areas: 
            "title title"
            "qty price" !important;
        width: 100% !important;
        gap: 8px 8px !important;
        margin: 0 !important;
    }

    /* Area placement mapping */
    body .cart-items-body .row.align-items-baseline > div:nth-child(1) {
        grid-area: title !important;
        padding: 0 !important;
    }

    /* Hide JTL default unit labels on mobile */
    body .cart-items-body .cart-items-price-text {
        display: none !important;
    }

    /* Hide single unit price column on mobile to save space */
    body .cart-items-body .cart-items-single-price {
        display: none !important;
    }

    /* Quantity Picker Grid placement */
    body .cart-items-body .cart-items-quantity {
        grid-area: qty !important;
        display: flex !important;
        align-items: center !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: none !important;
        flex: none !important;
    }

    /* Overall Price Grid placement */
    body .cart-items-body .cart-items-price.price-col {
        grid-area: price !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: none !important;
        flex: none !important;
        text-align: right !important;
    }

    /* Style for variation details wrapper on mobile */
    body .cart-items-body .ml-auto-util {
        margin: 4px 0 8px 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    body .cart-items-body .list-unstyled li {
        font-size: 0.8rem !important;
    }
}

/* ==========================================================================
   Header Cart Dropdown Menu Readability & Styling (Dark Background)
   ========================================================================== */
/* The main dropdown menu container */
body #cart-dropdown-container,
body .cart-dropdown {
    background-color: #1b222c !important;
    border: 1px solid #2e3947 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
}

/* General text, labels, paragraphs, spans in the cart dropdown */
body #cart-dropdown-container,
body #cart-dropdown-container p,
body #cart-dropdown-container span,
body #cart-dropdown-container td,
body #cart-dropdown-container li,
body .cart-dropdown,
body .cart-dropdown p,
body .cart-dropdown span,
body .cart-dropdown td,
body .cart-dropdown li {
    color: #cbd5e1 !important; /* Premium light readable gray */
}

/* Product names/links in the cart dropdown */
body #cart-dropdown-container a,
body .cart-dropdown a {
    color: #ffffff !important;
    transition: color 0.2s ease !important;
}
body #cart-dropdown-container a:hover,
body .cart-dropdown a:hover {
    color: #ebbc25 !important;
}

/* Quantity indicators (e.g. 8x, 5x) */
body #cart-dropdown-container .dropdown-cart-items td,
body #cart-dropdown-container .dropdown-cart-items .col-auto,
body .cart-dropdown .dropdown-cart-items td,
body .cart-dropdown .dropdown-cart-items .col-auto {
    color: #e2e8f0 !important; /* Bright premium light gray */
    font-weight: 500 !important;
}

/* Individual item prices and total prices */
body #cart-dropdown-container .dropdown-cart-items td.text-right-util,
body #cart-dropdown-container .price_overall,
body #cart-dropdown-container .cart-dropdown-total-item-price,
body #cart-dropdown-container .cart-dropdown-summary strong,
body #cart-dropdown-container strong,
body .cart-dropdown .dropdown-cart-items td.text-right-util,
body .cart-dropdown .price_overall,
body .cart-dropdown .cart-dropdown-total-item-price,
body .cart-dropdown .cart-dropdown-summary strong,
body .cart-dropdown strong {
    color: #ffffff !important; /* Pure white for high contrast */
    font-weight: 600 !important;
}

/* MwSt (VAT) and Shipping Info */
body #cart-dropdown-container .tax-info,
body #cart-dropdown-container .shipping-tax-info,
body #cart-dropdown-container .cart-dropdown-total-item,
body .cart-dropdown .tax-info,
body .cart-dropdown .shipping-tax-info,
body .cart-dropdown .cart-dropdown-total-item {
    color: #94a3b8 !important; /* Muted premium light gray */
    font-size: 0.85rem !important;
}

/* Link color inside the cart dropdown total items and shipping/tax info */
body #cart-dropdown-container .cart-dropdown-total-item a,
body #cart-dropdown-container .shipping-tax-info a,
body .cart-dropdown .cart-dropdown-total-item a,
body .cart-dropdown .shipping-tax-info a {
    color: #60a5fa !important;                 /* Premium light blue link color */
    text-decoration: underline !important;
}
body #cart-dropdown-container .cart-dropdown-total-item a:hover,
body #cart-dropdown-container .shipping-tax-info a:hover,
body .cart-dropdown .cart-dropdown-total-item a:hover,
body .cart-dropdown .shipping-tax-info a:hover {
    color: #93c5fd !important;
}

/* Checkout and Go to Cart buttons styling */
body #cart-dropdown-container .cart-dropdown-buttons a[href*="warenkorb"],
body .cart-dropdown .cart-dropdown-buttons a[href*="warenkorb"] {
    background-color: #df0000 !important;
    border-color: #df0000 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}
body #cart-dropdown-container .cart-dropdown-buttons a[href*="warenkorb"]:hover,
body .cart-dropdown .cart-dropdown-buttons a[href*="warenkorb"]:hover {
    background-color: #b30000 !important;
    border-color: #b30000 !important;
    color: #ffffff !important;
}