.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 {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    width: 100% !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) === */
header.is-checkout-header,
#jtl-nav-wrapper.is-checkout-header,
.is-checkout-header .navbar,
.is-checkout-header .navbar-brand,
.is-checkout-header #logo,
.is-checkout-header .toggler-logo-wrapper {
    height: auto !important;
    max-height: none !important;
    min-height: unset !important;
    overflow: visible !important;
}

#jtl-nav-wrapper.is-checkout-header {
    position: relative !important;
    min-height: 80px !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;
}

#jtl-nav-wrapper.is-checkout-header ~ #content-wrapper {
    margin-top: 0 !important;
    padding-top: 30px !important;
}

/* Ensure inner container aligns with page content at all screen widths */
#jtl-nav-wrapper.is-checkout-header .container,
#jtl-nav-wrapper.is-checkout-header .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;
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (min-width: 576px) {
    #jtl-nav-wrapper.is-checkout-header .container,
    #jtl-nav-wrapper.is-checkout-header .container-fluid {
        max-width: 97vw !important;
    }
}
@media (min-width: 768px) {
    #jtl-nav-wrapper.is-checkout-header .container,
    #jtl-nav-wrapper.is-checkout-header .container-fluid {
        max-width: 720px !important;
    }
}
@media (min-width: 992px) {
    #jtl-nav-wrapper.is-checkout-header .container,
    #jtl-nav-wrapper.is-checkout-header .container-fluid {
        max-width: 960px !important;
    }
}
@media (min-width: 1300px) {
    #jtl-nav-wrapper.is-checkout-header .container,
    #jtl-nav-wrapper.is-checkout-header .container-fluid {
        max-width: 1250px !important;
    }
}

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

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

.is-checkout-header #shop-logo {
    max-height: 40px !important; /* Larger, fits beautifully without clipping */
    height: auto !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
}

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

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

.is-checkout-header .secure-checkout-icon i,
.is-checkout-header .secure-checkout-icon span {
    line-height: 1 !important;
    margin: 0 !important;
    vertical-align: middle !important;
}

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

/* Mobile specific overrides to keep it compact */
@media (max-width: 991px) {
    #jtl-nav-wrapper.is-checkout-header {
        min-height: 65px !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }
    .is-checkout-header #shop-logo {
        max-height: 30px !important;
    }
    .is-checkout-header .secure-checkout-icon {
        font-size: 0.85rem !important;
    }
    .is-checkout-header .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;
    }
}

/* === VARIATION VALIDATION SHAKE & GLOW HIGHLIGHT === */
@keyframes shake-attention {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}

.glow-highlight {
    animation: shake-attention 0.3s ease-in-out 2;
    outline: 2px solid #dc3545 !important;
    outline-offset: 2px;
    border-radius: 6px;
    box-shadow: 0 0 15px rgba(220, 53, 69, 0.4) !important;
    transition: all 0.3s ease;
}

/* 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 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;
}

/* === PAYMENT METHODS VERTICAL ALIGNMENT === */
#checkout .checkout-payment-method .custom-control {
    display: flex !important;
    align-items: center !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
}

#checkout .checkout-payment-method .custom-control-label {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding-left: 28px !important;
    min-height: 40px !important;
}

#checkout .checkout-payment-method .custom-control-label img {
    max-height: 32px !important;
    width: auto !important;
    vertical-align: middle !important;
    display: inline-block !important;
    margin: 0 0 0 10px !important;
}

#checkout .checkout-payment-method .custom-control-label .title {
    vertical-align: middle !important;
    display: inline-block !important;
    line-height: 1 !important;
    margin: 0 0 0 10px !important;
    font-size: 1rem !important;
}

/* Vertically center the checkbox/radio indicator circles relative to label height */
#checkout .checkout-payment-method .custom-control-label::before,
#checkout .checkout-payment-method .custom-control-label::after {
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-top: 0 !important;
    left: 0 !important;
}

/* === SHIPPING OPTIONS VERTICAL ALIGNMENT === */
#checkout .checkout-shipping-form-options-radio .custom-control-label {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding-left: 28px !important;
    position: relative !important;
}

/* Center the radio buttons for shipping options */
#checkout .checkout-shipping-form-options-radio .custom-control-label::before,
#checkout .checkout-shipping-form-options-radio .custom-control-label::after {
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-top: 0 !important;
}

#checkout .checkout-shipping-form-options-radio .content.row,
#checkout .checkout-shipping-form-options-radio .content.form-row {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
}

#checkout .checkout-shipping-form-options-radio .title {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

#checkout .checkout-shipping-form-options-radio .price-col {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
}

#checkout .checkout-shipping-form-options-radio .shipping-free-text,
#checkout .checkout-shipping-form-options-radio .shipping-cost-text {
    margin: 0 !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

/* === PUSHED SUCCESS (ADDED TO CART) POPUP LAYOUT FIXES === */
#pushed-success .productbox-inner > .row {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
}

#pushed-success .pushed-success-buttons {
    margin-top: 25px !important;
    padding-top: 20px !important;
    border-top: 1px solid #eaeaea !important;
    width: 100% !important;
}

/* === DESKTOP & TABLET SLIDER KART TASARIMI UYUMLASTIRMA === */
@media (min-width: 768px) {
    /* Equal height wrapping for slider tracks and columns */
    body .product-slider-Bestseller .slick-slide,
    body .slick-slider-other .slick-slide {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
    }
    body .product-slider-Bestseller .slick-slide > div,
    body .slick-slider-other .slick-slide > div {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        height: 100% !important;
    }
    body .product-slider-Bestseller .product-wrapper,
    body .opc-ProductStream-gallery .product-wrapper,
    body .slick-slider-other .product-wrapper {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        height: 100% !important;
    }
    
    /* Standardize slider card styles to match category grid */
    body .product-slider-Bestseller .productbox,
    body .slick-slider-other .productbox {
        background-color: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 10px !important;
        box-shadow: 0 1px 4px rgba(0,0,0,0.05) !important;
        margin: 10px 6px !important;
        padding: 0 0 15px 0 !important;
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        height: 100% !important;
        transition: all 0.2s ease !important;
        overflow: hidden !important;
        -webkit-mask-image: -webkit-radial-gradient(white, black) !important;
    }

    /* Standardize Topseller grid card styles to match category grid perfectly */
    body .opc-ProductStream-gallery .product-wrapper .productbox {
        background-color: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 10px !important;
        box-shadow: 0 1px 4px rgba(0,0,0,0.05) !important;
        margin: 0 0 15px 0 !important;
        padding: 0 0 15px 0 !important;
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        height: 100% !important;
        transition: all 0.2s ease !important;
        overflow: hidden !important;
        -webkit-mask-image: -webkit-radial-gradient(white, black) !important;
    }
    
    /* Hover effects */
    body .product-slider-Bestseller .productbox:hover,
    body .opc-ProductStream-gallery .product-wrapper .productbox:hover,
    body .slick-slider-other .productbox:hover {
        box-shadow: 0 4px 14px rgba(0,0,0,0.10) !important;
        border-color: #cbd5e1 !important;
        transform: translateY(-2px) !important;
        text-decoration: none !important;
    }
    
    /* Stretch inner container */
    body .product-slider-Bestseller .productbox-inner,
    body .opc-ProductStream-gallery .product-wrapper .productbox-inner,
    body .slick-slider-other .productbox-inner {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        height: 100% !important;
    }
    
    /* Image container */
    body .product-slider-Bestseller .productbox-inner > .row > .col-12:first-child,
    body .opc-ProductStream-gallery .product-wrapper .productbox-inner > .row > .col-12:first-child,
    body .slick-slider-other .productbox-inner > .row > .col-12:first-child {
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    body .product-slider-Bestseller .productbox-image,
    body .opc-ProductStream-gallery .product-wrapper .productbox-image,
    body .slick-slider-other .productbox-image {
        border-top-left-radius: 8px !important;
        border-top-right-radius: 8px !important;
        overflow: hidden !important;
        width: 100% !important;
    }
    
    /* Content wrapper */
    body .product-slider-Bestseller .productbox-inner > .row > .col-12:last-child,
    body .opc-ProductStream-gallery .product-wrapper .productbox-inner > .row > .col-12:last-child,
    body .slick-slider-other .productbox-inner > .row > .col-12:last-child {
        display: flex !important;
        flex-direction: column !important;
        padding: 0 15px 10px 15px !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
    }
    
    /* Title clamp (2 lines) and details */
    body .product-slider-Bestseller .productbox-title a,
    body .opc-ProductStream-gallery .product-wrapper .productbox-title a,
    body .slick-slider-other .productbox-title a {
        min-height: 3.2rem !important;
        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;
        color: #222 !important;
        font-weight: 600 !important;
    }
    
    /* Swatches alignment */
    body .product-slider-Bestseller .productbox-swatches,
    body .opc-ProductStream-gallery .product-wrapper .productbox-swatches,
    body .slick-slider-other .productbox-swatches {
        margin: 6px 0 !important;
        gap: 6px !important;
    }
    
    /* Basket button width */
    body .product-slider-Bestseller .btn-basket-desktop,
    body .opc-ProductStream-gallery .product-wrapper .btn-basket-desktop,
    body .slick-slider-other .btn-basket-desktop {
        display: inline-flex !important;
        width: 100% !important;
        margin-top: 8px !important;
    }
    
    /* Slick slide height fix */
    body .slick-track {
        display: flex !important;
        align-items: stretch !important;
    }
}


/* === SEPET DROPDOWN SİYAH ARKA PLAN DÜZELTMESİ === */
header .cart-dropdown-menu,
header #cart-dropdown .dropdown-menu,
header .cart-dropdown .dropdown-menu {
    background-color: #ffffff !important;
    color: #525252 !important;
}
header .cart-dropdown-menu .dropdown-item,
header #cart-dropdown .dropdown-menu .dropdown-item,
header .cart-dropdown .dropdown-menu .dropdown-item {
    color: #525252 !important;
}
header .cart-dropdown-menu .dropdown-item:hover,
header #cart-dropdown .dropdown-menu .dropdown-item:hover,
header .cart-dropdown .dropdown-menu .dropdown-item:hover {
    background-color: #f5f7fa !important;
    color: #ebbc25 !important;
}

/* === SEPET DROPDOWN SİYAH ARKA PLAN DÜZELTMESİ === */
header .cart-dropdown-menu,
header #cart-dropdown .dropdown-menu,
header .cart-dropdown .dropdown-menu,
#cart-dropdown .dropdown-menu {
    background-color: #ffffff !important;
    color: #525252 !important;
}
header .cart-dropdown-menu .dropdown-item,
header #cart-dropdown .dropdown-menu .dropdown-item,
header .cart-dropdown .dropdown-menu .dropdown-item,
#cart-dropdown .dropdown-menu .dropdown-item {
    color: #525252 !important;
}
header .cart-dropdown-menu .dropdown-item:hover,
header #cart-dropdown .dropdown-menu .dropdown-item:hover,
header .cart-dropdown .dropdown-menu .dropdown-item:hover,
#cart-dropdown .dropdown-menu .dropdown-item:hover {
    background-color: #f5f7fa !important;
    color: #ebbc25 !important;
}

/* === SEPET DROPDOWN KESİN DÜZELTME === */
#cart-dropdown-container.dropdown-menu,
header .cart-dropdown.dropdown-menu,
.cart-dropdown.dropdown-menu {
    background-color: #ffffff !important;
    color: #525252 !important;
}

#cart-dropdown-container.dropdown-menu .dropdown-item,
header .cart-dropdown.dropdown-menu .dropdown-item,
.cart-dropdown.dropdown-menu .dropdown-item {
    color: #525252 !important;
}

#cart-dropdown-container.dropdown-menu .dropdown-item:hover,
header .cart-dropdown.dropdown-menu .dropdown-item:hover,
.cart-dropdown.dropdown-menu .dropdown-item:hover {
    background-color: #f5f7fa !important;
    color: #ebbc25 !important;
}

#cart-dropdown-container.dropdown-menu .cart-dropdown-item {
    background-color: transparent !important;
}

/* === SEPET DROPDOWN KESİN DÜZELTME (NUCLEAR) === */
#jtl-nav-wrapper #cart-dropdown-container.dropdown-menu,
#jtl-nav-wrapper header .cart-dropdown.dropdown-menu,
#jtl-nav-wrapper .cart-dropdown.dropdown-menu,
body #jtl-nav-wrapper .cart-dropdown.dropdown-menu {
    background-color: #ffffff !important;
    color: #525252 !important;
}

#jtl-nav-wrapper #cart-dropdown-container.dropdown-menu .dropdown-item,
#jtl-nav-wrapper .cart-dropdown.dropdown-menu .dropdown-item,
body #jtl-nav-wrapper .cart-dropdown.dropdown-menu .dropdown-item {
    color: #525252 !important;
    background-color: transparent !important;
}

#jtl-nav-wrapper #cart-dropdown-container.dropdown-menu .dropdown-item:hover,
#jtl-nav-wrapper .cart-dropdown.dropdown-menu .dropdown-item:hover,
body #jtl-nav-wrapper .cart-dropdown.dropdown-menu .dropdown-item:hover {
    background-color: #f5f7fa !important;
    color: #ebbc25 !important;
}

#jtl-nav-wrapper #cart-dropdown-container.dropdown-menu .table,
#jtl-nav-wrapper .cart-dropdown.dropdown-menu .table {
    color: #525252 !important;
}

#jtl-nav-wrapper #cart-dropdown-container.dropdown-menu td,
#jtl-nav-wrapper .cart-dropdown.dropdown-menu td,
#jtl-nav-wrapper #cart-dropdown-container.dropdown-menu th,
#jtl-nav-wrapper .cart-dropdown.dropdown-menu th {
    color: #525252 !important;
    border-color: #e9ecef !important;
}

#jtl-nav-wrapper #cart-dropdown-container.dropdown-menu .cart-dropdown-item {
    background-color: transparent !important;
}

/* === SEPET DROPDOWN ZUM WARENKORB BUTTON KIRMIZI === */
#jtl-nav-wrapper #cart-dropdown-container.dropdown-menu .btn-primary,
#jtl-nav-wrapper .cart-dropdown.dropdown-menu .btn-primary,
#cart-dropdown-container.dropdown-menu a[href*="warenkorb"].btn,
.cart-dropdown.dropdown-menu a[href*="warenkorb"].btn {
    background-color: #df0000 !important;
    border-color: #df0000 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

#jtl-nav-wrapper #cart-dropdown-container.dropdown-menu .btn-primary:hover,
#jtl-nav-wrapper .cart-dropdown.dropdown-menu .btn-primary:hover,
#cart-dropdown-container.dropdown-menu a[href*="warenkorb"].btn:hover,
.cart-dropdown.dropdown-menu a[href*="warenkorb"].btn:hover {
    background-color: #b30000 !important;
    border-color: #b30000 !important;
    color: #ffffff !important;
}

/* === ZUR KASSE BUTONU RESET (Eğer yanlışlıkla kırmızı olduysa) === */
#jtl-nav-wrapper #cart-dropdown-container.dropdown-menu a[href*="bestellvorgang"],
#jtl-nav-wrapper .cart-dropdown.dropdown-menu a[href*="bestellvorgang"] {
    background-color: #ffffff !important;
    border-color: #525252 !important;
    color: #525252 !important;
}

#jtl-nav-wrapper #cart-dropdown-container.dropdown-menu a[href*="bestellvorgang"]:hover,
#jtl-nav-wrapper .cart-dropdown.dropdown-menu a[href*="bestellvorgang"]:hover {
    background-color: #f5f7fa !important;
    border-color: #525252 !important;
    color: #000000 !important;
}

/* === ZUM WARENKORB BUTTON KIRMIZI GÜÇLENDİRİCİ === */
#jtl-nav-wrapper #cart-dropdown-container.dropdown-menu a[href*="warenkorb"],
#jtl-nav-wrapper .cart-dropdown.dropdown-menu a[href*="warenkorb"] {
    background-color: #df0000 !important;
    border-color: #df0000 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

#jtl-nav-wrapper #cart-dropdown-container.dropdown-menu a[href*="warenkorb"]:hover,
#jtl-nav-wrapper .cart-dropdown.dropdown-menu a[href*="warenkorb"]:hover {
    background-color: #b30000 !important;
    border-color: #b30000 !important;
    color: #ffffff !important;
}

/* === ZUM WARENKORB BUTTON KIRMIZI (ULTIMATE FIX) === */
#jtl-nav-wrapper #cart-dropdown-container .cart-dropdown-buttons .btn-primary,
#cart-dropdown-container .cart-dropdown-buttons .btn-primary,
#cart-dropdown-container .cart-dropdown-buttons a.btn-primary {
    background-color: #df0000 !important;
    border-color: #df0000 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

#jtl-nav-wrapper #cart-dropdown-container .cart-dropdown-buttons .btn-primary:hover,
#cart-dropdown-container .cart-dropdown-buttons .btn-primary:hover,
#cart-dropdown-container .cart-dropdown-buttons a.btn-primary:hover {
    background-color: #b30000 !important;
    border-color: #b30000 !important;
    color: #ffffff !important;
}

/* Ensure 'Zur Kasse' doesn't turn red */
#jtl-nav-wrapper #cart-dropdown-container .cart-dropdown-buttons .btn-outline-primary,
#cart-dropdown-container .cart-dropdown-buttons .btn-outline-primary,
#cart-dropdown-container .cart-dropdown-next {
    background-color: #ffffff !important;
    border-color: #525252 !important;
    color: #525252 !important;
}


/* === EMERGENCY FIX FOR CART TEXT COLORS === */
body #cart-dropdown-container .cart-dropdown-buttons a[href*="warenkorb"],
body #cart-dropdown-container .cart-dropdown-buttons a.btn-primary,
body .btn-goto-basket-red {
    background-color: #df0000 !important;
    border-color: #df0000 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

body #cart-dropdown-container .cart-dropdown-buttons a[href*="warenkorb"] *,
body #cart-dropdown-container .cart-dropdown-buttons a.btn-primary * {
    color: #ffffff !important;
}

body #cart-dropdown-container .tax-info,
body #cart-dropdown-container .shipping-tax-info,
body #cart-dropdown-container .text-muted,
body #cart-dropdown-container p.text-muted,
body #cart-dropdown-container small,
body #cart-dropdown-container span.tax-info,
body #cart-dropdown-container .text-danger {
    color: #6c757d !important;
    background-color: transparent !important;
}

body #cart-dropdown-container strong,
body #cart-dropdown-container .price_overall {
    color: #1b222c !important;
}


/* === SEPET DROPDOWN AESTHETICS & ALIGNMENT FIX === */

/* 1. Arka planı hafif gri yapıyoruz ve kenarlık/gölge ekleyerek sayfadan ayrıştırıyoruz */
body #jtl-nav-wrapper #cart-dropdown-container.dropdown-menu,
body #jtl-nav-wrapper header .cart-dropdown.dropdown-menu,
body #jtl-nav-wrapper .cart-dropdown.dropdown-menu,
body #cart-dropdown-container {
    background-color: #fafafa !important; /* Çok hafif gri / kırık beyaz */
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
}

/* Tablo elemanlarının arka planlarını şeffaf yapıyoruz ki gri arka plan homojen görünsün */
body #cart-dropdown-container table,
body #cart-dropdown-container td,
body #cart-dropdown-container th,
body #cart-dropdown-container tr,
body #cart-dropdown-container .table,
body #cart-dropdown-container .cart-dropdown-item {
    background-color: transparent !important;
    background: transparent !important;
}

/* 2. Vergi ve kargo yazılarının (inkl. 19% MwSt. ve Kargo bilgisi) kırmızı/pembe rengini düzeltip hizalıyoruz */
body #cart-dropdown-container .cart-dropdown-total-item {
    color: #525252 !important; /* Kırmızı/pembe yerine normal koyu gri yazı rengi */
    font-size: 0.875rem !important; /* Diğer yazılarla aynı boyutta (0.75rem yerine 0.875rem) */
    font-weight: 400 !important;
    margin-bottom: 0.625rem !important;
    line-height: 1.5 !important;
    display: block !important; /* Düzgün blok hizalaması */
    width: 100% !important;
}

/* Vergi fiyatı sağa dayalı ve normal yazı renginde */
body #cart-dropdown-container .cart-dropdown-total-item-price {
    float: right !important;
    color: #525252 !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
}

/* Kargo bilgisi yazısı normal yazı renginde ve linkleri de düzgün renkli */
body #cart-dropdown-container .cart-dropdown-total-item a,
body #cart-dropdown-container .cart-dropdown-total-item a *,
body #cart-dropdown-container .cart-dropdown-shipping-notice,
body #cart-dropdown-container .cart-dropdown-shipping-notice * {
    color: #525252 !important;
    text-decoration: none !important;
}

body #cart-dropdown-container .cart-dropdown-total-item a:hover {
    color: #ebbc25 !important;
    text-decoration: underline !important;
}

/* Ara toplam satırı (Zwischensumme) stil uyumu ve üst çizgisi */
body #cart-dropdown-container .font-weight-bold-util {
    font-size: 0.875rem !important;
    color: #1b222c !important;
    border-top: 1px solid #ebebeb !important;
    padding-top: 0.625rem !important;
    margin-top: 0.625rem !important;
    font-weight: 700 !important;
    display: block !important;
    width: 100% !important;
}

body #cart-dropdown-container .font-weight-bold-util .cart-dropdown-total-item-price {
    float: right !important;
    color: #1b222c !important;
    font-weight: 700 !important;
}


/* === HOVER VARYASYON RESİM ÖNİZLEMESİNİ KALDIRMA === */
#image_wrapper .variation-image-preview,
body .variation-image-preview,
.variation-image-preview {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}


/* === PUSHED SUCCESS INLINE LAYOUT FIXES === */
#pushed-success-inline.card.alert {
    background-color: #ffffff !important;
    border: 1px solid #eaeaea !important;
    border-left: 4px solid #10b981 !important; /* Premium emerald green left accent border */
    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-inline .pushed-success-image-wrapper img {
    max-height: 160px !important;
    width: auto !important;
    object-fit: contain !important;
}

#pushed-success-inline .card-header.alert-success {
    background-color: #f0fdf4 !important; /* Soft, elegant mint background */
    border: none !important;
    color: #166534 !important; /* Forest green text */
    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-inline .card-header.alert-success::before {
    content: "✓" !important;
    font-weight: 900 !important;
    display: inline-block !important;
    font-size: 1.2rem !important;
}

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

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

#pushed-success-inline .pushed-success-buttons .btn {
    border-radius: 4px !important;
    font-weight: 600 !important;
    padding: 12px 20px !important;
}

#pushed-success-inline .pushed-success-buttons .continue-shopping {
    background-color: #ffffff !important;
    border: 1px solid #ddd !important;
    color: #333 !important;
}

#pushed-success-inline .pushed-success-buttons .continue-shopping:hover {
    background-color: #f5f5f5 !important;
    border-color: #ccc !important;
}

#pushed-success-inline .pushed-success-buttons .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-inline .pushed-success-buttons .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;
}

#pushed-success-inline .productbox-inner > .row {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
}

#pushed-success-inline .pushed-success-buttons {
    margin-top: 25px !important;
    padding-top: 20px !important;
    border-top: 1px solid #eaeaea !important;
    width: 100% !important;
}

/* === PUSHED SUCCESS INNER CONTAINER FLEX/HEIGHT RESET === */
#pushed-success .productbox-inner,
#pushed-success-inline .productbox-inner {
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
    padding-bottom: 0 !important;
}

/* Force block flow and layout wrapper styling for pushed-success-inline to prevent button overlap */
#pushed-success-inline.card.alert {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    margin-bottom: 45px !important;
    overflow: hidden !important; /* Contain float/flex items inside card borders */
}

#pushed-success-inline .card-body {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

#pushed-success-inline .card-body > .row {
    display: block !important; /* Force block flow instead of flex row */
    height: auto !important;
    min-height: 0 !important;
}

#pushed-success-inline .pushed-success-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-top: 25px !important;
    padding-top: 20px !important;
    border-top: 1px solid #eaeaea !important;
    width: 100% !important;
    float: none !important;
    clear: both !important;
    position: relative !important;
}

/* === PRODUCT GRID HOVER STABILIZATION === */
/* Disable JTL's absolute positioning expansion on productbox hover to prevent grid collapse */
#product-list.layout-gallery .productbox-hover.productbox-show-variations.transition, 
#product-list.layout-gallery .productbox-hover.productbox-show-variations:hover,
body #product-list .productbox-hover:hover,
body #result-wrapper .productbox-hover:hover {
    position: relative !important;
    z-index: 10 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Fix second hover image positioning to render on top of the first image instead of below it */
.productbox-images.list-gallery {
    position: relative !important;
}

.productbox-images.list-gallery > a {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}

.productbox-images.list-gallery .second-wrapper {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
}

/* === MEGA MENU DESKTOP BACKGROUND & TEXT COLOR FIX === */
@media (min-width: 992px) {
    body header#jtl-nav-wrapper #mainNavigation .dropdown-menu,
    body header#jtl-nav-wrapper .nav-scrollbar-item.dropdown-full .dropdown-menu,
    body header#jtl-nav-wrapper .nav-scrollbar-item .dropdown-menu {
        background-color: #26303F !important;
        background: #26303F !important;
        border: none !important;
        opacity: 1 !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
    }
    
    body header#jtl-nav-wrapper #mainNavigation .dropdown-menu a,
    body header#jtl-nav-wrapper #mainNavigation .dropdown-menu a span,
    body header#jtl-nav-wrapper #mainNavigation .dropdown-menu .categories-recursive-link,
    body header#jtl-nav-wrapper #mainNavigation .dropdown-menu .categories-recursive-link span,
    body header#jtl-nav-wrapper #mainNavigation .dropdown-menu .nav-link,
    body header#jtl-nav-wrapper #mainNavigation .dropdown-menu .nav-link span {
        color: #ffffff !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    body header#jtl-nav-wrapper #mainNavigation .dropdown-menu a:hover,
    body header#jtl-nav-wrapper #mainNavigation .dropdown-menu a:hover span,
    body header#jtl-nav-wrapper #mainNavigation .dropdown-menu .categories-recursive-link:hover,
    body header#jtl-nav-wrapper #mainNavigation .dropdown-menu .categories-recursive-link:hover span,
    body header#jtl-nav-wrapper #mainNavigation .dropdown-menu .nav-link:hover,
    body header#jtl-nav-wrapper #mainNavigation .dropdown-menu .nav-link:hover span {
        color: #ffffff !important;
        text-decoration: underline !important;
        opacity: 0.95 !important;
    }
    
    body header#jtl-nav-wrapper #mainNavigation .dropdown-menu .submenu-headline,
    body header#jtl-nav-wrapper #mainNavigation .dropdown-menu .submenu-headline-toplevel {
        border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    }
}

/* === 2026 ANTIGRAVITY AI: UNIFY AND FIX BESTSELLER & TOPSELLER SLIDER COLLAPSE === */
/* 1. Prevent CSS Grid collapse and reset negative margins in all card rows */
body .product-slider-Bestseller .productbox-inner > .row,
body .slick-slider-other .productbox-inner > .row,
body .opc-ProductStream-gallery .productbox-inner > .row,
body #slider-bestseller-products .productbox-inner > .row,
body .mobile-product-scroll .productbox-inner > .row,
body .productlist-bestseller-grid .productbox-inner > .row {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 2. Ensure details section stretches to fill card height and has premium 19px padding */
body .product-slider-Bestseller .productbox-details,
body .slick-slider-other .productbox-details,
body .opc-ProductStream-gallery .productbox-details,
body #slider-bestseller-products .productbox-details,
body .mobile-product-scroll .productbox-details,
body .productlist-bestseller-grid .productbox-details,
body .product-slider-Bestseller .productbox-inner > .row > .col-12:last-child,
body .slick-slider-other .productbox-inner > .row > .col-12:last-child,
body .opc-ProductStream-gallery .productbox-inner > .row > .col-12:last-child,
body #slider-bestseller-products .productbox-inner > .row > .col-12:last-child,
body .mobile-product-scroll .productbox-inner > .row > .col-12:last-child,
body .productlist-bestseller-grid .productbox-inner > .row > .col-12:last-child {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: auto !important; /* Overrides matchHeight JS inline height collapse */
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 19px 15px 19px !important; /* Premium 19px left/right padding to prevent touching card borders */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* 3. Nuke matchHeight JS inline style heights on product boxes and titles to allow natural flex stretching */
body .product-slider-Bestseller .productbox,
body .slick-slider-other .productbox,
body .opc-ProductStream-gallery .productbox,
body #slider-bestseller-products .productbox,
body .mobile-product-scroll .productbox,
body .productlist-bestseller-grid .productbox,
body .product-slider-Bestseller .productbox-title,
body .slick-slider-other .productbox-title,
body .opc-ProductStream-gallery .productbox-title,
body #slider-bestseller-products .productbox-title,
body .mobile-product-scroll .productbox-title,
body .productlist-bestseller-grid .productbox-title {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

/* 4. Ensure equal height stretching of slide containers inside Slick sliders */
body .product-slider-Bestseller .slick-track,
body .slick-slider-other .slick-track {
    display: flex !important;
    align-items: stretch !important;
}

body .product-slider-Bestseller .slick-slide,
body .slick-slider-other .slick-slide {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important; /* Slick track handles heights via flex stretch */
}

body .product-slider-Bestseller .slick-slide > div,
body .slick-slider-other .slick-slide > div {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: 100% !important;
}

/* 5. Force wrappers, boxes, and inner boxes to flex-grow and fill 100% height */
body .product-slider-Bestseller .product-wrapper,
body .slick-slider-other .product-wrapper,
body .opc-ProductStream-gallery .product-wrapper,
body #slider-bestseller-products .product-wrapper,
body .mobile-product-scroll .product-wrapper,
body .productlist-bestseller-grid .product-wrapper {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: 100% !important;
}

body .product-slider-Bestseller .productbox,
body .slick-slider-other .productbox,
body .opc-ProductStream-gallery .productbox,
body #slider-bestseller-products .productbox,
body .mobile-product-scroll .productbox,
body .productlist-bestseller-grid .productbox {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: 100% !important;
}

body .product-slider-Bestseller .productbox-inner,
body .slick-slider-other .productbox-inner,
body .opc-ProductStream-gallery .productbox-inner,
body #slider-bestseller-products .productbox-inner,
body .mobile-product-scroll .productbox-inner,
body .productlist-bestseller-grid .productbox-inner {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: 100% !important;
}

/* 6. Push bottom sections to the absolute bottom of the stretched cards */
body .product-slider-Bestseller .productbox-bottom-section,
body .slick-slider-other .productbox-bottom-section,
body .opc-ProductStream-gallery .productbox-bottom-section,
body #slider-bestseller-products .productbox-bottom-section,
body .mobile-product-scroll .productbox-bottom-section,
body .productlist-bestseller-grid .productbox-bottom-section {
    margin-top: auto !important;
    width: 100% !important;
}

/* === MOBILE BRAND SELECTOR CTA === */
.mobile-brand-selector-cta {
    padding: 15px 10px;
    margin-bottom: 5px;
    box-sizing: border-box;
    width: 100%;
}

.mobile-brand-selector-cta .cta-container {
    max-width: 100%;
    margin: 0 auto;
}

.mobile-brand-selector-cta .cta-card-premium {
    position: relative;
    background: linear-gradient(135deg, #1b222c 0%, #11151c 100%);
    border: 1px solid rgba(248, 191, 0, 0.25);
    border-radius: 12px;
    padding: 20px;
    color: #ffffff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.mobile-brand-selector-cta .cta-card-premium:active {
    transform: scale(0.98);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: rgba(248, 191, 0, 0.5);
}

.mobile-brand-selector-cta .cta-bg-glow {
    position: absolute;
    top: -50%;
    right: -20%;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(248, 191, 0, 0.15) 0%, rgba(248, 191, 0, 0) 70%);
    pointer-events: none;
}

.mobile-brand-selector-cta .cta-inner-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.mobile-brand-selector-cta .cta-text-side {
    flex: 1;
}

.mobile-brand-selector-cta .cta-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(248, 191, 0, 0.12);
    color: #F8BF00;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 8px;
    border-radius: 30px;
    margin-bottom: 8px;
}

.mobile-brand-selector-cta .cta-main-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff !important;
    margin: 0 0 6px 0 !important;
    line-height: 1.2;
}

.mobile-brand-selector-cta .cta-sub-title {
    font-size: 0.8rem;
    color: #94a3b8;
    margin: 0 !important;
    line-height: 1.4;
}

.mobile-brand-selector-cta .cta-button-side {
    flex-shrink: 0;
}

.mobile-brand-selector-cta .cta-action-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, #F8BF00 0%, #d49e00 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #11151c;
    font-size: 1.15rem;
    box-shadow: 0 4px 10px rgba(248, 191, 0, 0.3);
    animation: cta-pulse 2s infinite ease-in-out;
}

.mobile-brand-selector-cta .cta-footer-bar {
    margin-top: 15px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.mobile-brand-selector-cta .cta-footer-link {
    font-size: 0.85rem;
    font-weight: 600;
    color: #F8BF00;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mobile-brand-selector-cta .arrow-anim {
    animation: cta-arrow 1.2s infinite ease-in-out;
}

/* === DESKTOP LOGO RELOCATION TO TOP BAR === */
@media (min-width: 992px) {
    /* 1. Reset flex direction of top bar container and ensure correct height */
    #header-top-bar {
        height: auto !important;
        min-height: 60px !important;
    }

    #header-top-bar .container,
    #header-top-bar .container-fluid,
    #header-top-bar .container-fluid-xl {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        height: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    #header-top-bar .topbar-logo {
        margin-right: auto !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    #header-top-bar .topbar-main {
        margin-left: auto !important;
        margin-right: 0 !important;
        padding-right: 0 !important;
    }

    #header-top-bar .topbar-note {
        display: none !important;
    }

    /* 2. Topbar logo positioning, sizing and forced visibility */
    .topbar-logo {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        padding: 5px 0 !important;
        max-width: 260px !important;
    }

    .topbar-logo .toggler-logo-wrapper,
    .topbar-logo #logo {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .topbar-logo img#shop-logo {
        display: block !important;
        visibility: visible !important;
        max-height: 40px !important;
        height: 40px !important;
        width: auto !important;
    }

    /* 3. Hide original logo block inside the main header on desktop */
    #jtl-nav-wrapper .toggler-logo-wrapper {
        display: none !important;
    }
}


/* Animations */
@keyframes cta-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 10px rgba(248, 191, 0, 0.3);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 6px 16px rgba(248, 191, 0, 0.5);
    }
}

@keyframes cta-arrow {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(4px);
    }
}

/* === DESKTOP HEADER SHOP NAV RELOCATION STYLES === */
@media (min-width: 992px) {
    /* 1. Hide Account, Wishlist, Compare, and Cart in the main navigation bar */
    #jtl-nav-wrapper .hide-navbar .account-icon-dropdown,
    #jtl-nav-wrapper .hide-navbar .cart-icon-dropdown,
    #jtl-nav-wrapper .hide-navbar .nav-item-wishlist,
    #jtl-nav-wrapper .hide-navbar .nav-item-compare,
    #jtl-nav-wrapper #shop-nav .account-icon-dropdown,
    #jtl-nav-wrapper #shop-nav .cart-icon-dropdown,
    #jtl-nav-wrapper #shop-nav .nav-item-wishlist,
    #jtl-nav-wrapper #shop-nav .nav-item-compare {
        display: none !important;
    }

    /* 2. Configure top bar flex layout for desktop logo/settings */
    #header-top-bar .container {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        height: 100% !important;
    }

    /* 3. Style Cart & Account dropdowns inside the top bar */
    #header-top-bar .account-icon-dropdown,
    #header-top-bar .cart-icon-dropdown {
        display: inline-block !important;
    }

    #header-top-bar .account-icon-dropdown > a,
    #header-top-bar .cart-icon-dropdown > a {
        color: #ffffff !important;
        font-size: 0.85rem !important;
        font-weight: 500 !important;
        padding: 0 10px !important;
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
    }

    /* Adjust cart icon inside top bar */
    #header-top-bar .cart-icon-dropdown-icon {
        font-size: 1rem !important;
        color: #ffffff !important;
        margin-right: 5px !important;
        position: relative !important;
    }

    /* Adjust user badge/icon color inside top bar */
    #header-top-bar .account-icon-dropdown span.fas {
        color: #ffffff !important;
        font-size: 1rem !important;
    }

    /* Fix dropdown menus position and styling inside top bar */
    #header-top-bar .dropdown-menu {
        background-color: #1b222c !important;
        border: 1px solid #34495e !important;
        border-radius: 8px !important;
        margin-top: 8px !important;
    }

    #header-top-bar .dropdown-menu a {
        color: #ffffff !important;
    }

    #header-top-bar .dropdown-menu a:hover,
    #header-top-bar .dropdown-menu .active,
    #header-top-bar .dropdown-menu .active > a,
    #header-top-bar .dropdown-menu .dropdown-item.active,
    #header-top-bar .dropdown-menu li.active > a,
    #header-top-bar .dropdown-menu li:hover > a {
        background-color: #34495e !important;
        color: #f8bf00 !important;
        text-decoration: none !important;
    }

    /* 4. Desktop navigation row layout optimization (prevent wrapping & center vertically) */
    #jtl-nav-wrapper #mainNavigation {
        flex-basis: auto !important;
        width: auto !important;
        flex-grow: 1 !important;
        align-self: center !important;
    }

    #jtl-nav-wrapper .navbar {
        flex-wrap: nowrap !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        align-items: center !important;
    }

    #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link {
        padding-left: 0.8rem !important;
        padding-right: 0.8rem !important;
    }

    #jtl-nav-wrapper #shop-nav {
        margin-left: auto !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        align-self: center !important;
    }

    #jtl-nav-wrapper #shop-nav #search {
        max-width: 260px !important;
        width: 260px !important;
        margin-left: auto !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        display: flex !important;
        align-items: center !important;
        align-self: center !important;
    }

    #jtl-nav-wrapper #shop-nav #search .search-wrapper,
    #jtl-nav-wrapper #shop-nav #search form,
    #jtl-nav-wrapper #shop-nav #search .form-icon,
    #jtl-nav-wrapper #shop-nav #search .input-group {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        align-self: center !important;
    }
    
    #jtl-nav-wrapper .main-search-wrapper {
        align-self: center !important;
        margin-top: auto !important;
        margin-bottom: auto !important;
        margin-right: 0 !important;
        padding-right: 0 !important;
        display: flex !important;
        align-items: center !important;
        max-width: 260px !important;
    }

    /* --- High-Specificity Legibility Overrides for Search Input & Autocomplete --- */
    body #jtl-nav-wrapper #search-header.form-control,
    body #jtl-nav-wrapper #search-header.form-control:focus,
    body #jtl-nav-wrapper .search-wrapper input.form-control,
    body #jtl-nav-wrapper .search-wrapper input.form-control:focus {
        color: #212529 !important;
        background-color: #ffffff !important;
    }

    body .autocomplete-suggestions,
    body .autocomplete-suggestion,
    body .typeahead,
    body .dropdown-menu.autocomplete-suggestions,
    body #jtl-nav-wrapper .dropdown-menu.show {
        background-color: #ffffff !important;
        border: 1px solid #d1d5db !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
        color: #212529 !important;
    }

    body .autocomplete-suggestions a,
    body .autocomplete-suggestion a,
    body .typeahead a,
    body #jtl-nav-wrapper .dropdown-menu.show a,
    body #jtl-nav-wrapper .dropdown-menu.show .dropdown-item {
        color: #212529 !important;
        background-color: transparent !important;
        padding: 8px 12px !important;
        display: block !important;
        font-size: 0.9rem !important;
        transition: background-color 0.15s ease !important;
    }

    body .autocomplete-suggestions a:hover,
    body .autocomplete-suggestions .active a,
    body .autocomplete-suggestion:hover,
    body .typeahead a:hover,
    body .typeahead .active a,
    body #jtl-nav-wrapper .dropdown-menu.show a:hover,
    body #jtl-nav-wrapper .dropdown-menu.show .dropdown-item:hover,
    body #jtl-nav-wrapper .dropdown-menu.show .dropdown-item.active {
        background-color: #f8f9fa !important;
        color: #007aff !important;
        text-decoration: none !important;
    }

    /* --- Premium Currency Dropdown Pill Styling --- */
    .currency-dropdown .currency-symbol-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 20px !important;
        height: 20px !important;
        border-radius: 50% !important;
        background-color: rgba(255, 255, 255, 0.15) !important;
        color: #ffffff !important;
        font-size: 0.75rem !important;
        font-weight: 700 !important;
        margin-right: 6px !important;
        line-height: 1 !important;
        border: 1px solid rgba(255, 255, 255, 0.25) !important;
        transition: background-color 0.15s ease !important;
    }

    .currency-dropdown:hover .currency-symbol-icon {
        background-color: rgba(255, 255, 255, 0.3) !important;
    }

    @media (min-width: 992px) {
        .currency-dropdown .dropdown-menu {
            background-color: #1b222c !important;
            border: 1px solid #34495e !important;
            border-radius: 8px !important;
            margin-top: 8px !important;
            padding: 6px 0 !important;
        }

        .currency-dropdown .dropdown-menu a {
            color: #ffffff !important;
            padding: 8px 16px !important;
            display: flex !important;
            align-items: center !important;
            text-decoration: none !important;
            font-size: 0.85rem !important;
        }

        .currency-dropdown .dropdown-menu a:hover {
            background-color: #34495e !important;
            color: #f8bf00 !important;
        }

        .currency-dropdown .currency-symbol-icon-dropdown {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 18px !important;
            height: 18px !important;
            border-radius: 50% !important;
            background-color: rgba(255, 255, 255, 0.1) !important;
            color: #ffffff !important;
            font-size: 0.7rem !important;
            font-weight: 600 !important;
            margin-right: 8px !important;
            line-height: 1 !important;
            border: 1px solid rgba(255, 255, 255, 0.2) !important;
        }
    }
}

@media (max-width: 991px) {
    /* Hide duplicate user and cart icons in the mobile header navigation row */
    .hdr-nav a[data-target="#login-popup"],
    .hdr-nav .cart-menu {
        display: none !important;
    }
    .hdr-nav .dropdown:has(a[data-target="#login-popup"]) {
        display: none !important;
    }
    
    /* Mobile spacing and high contrast style for currency next to language flag */
    .currency-dropdown {
        margin-left: 10px !important;
        padding-left: 14px !important;
        border-left: 1px solid rgba(255, 255, 255, 0.2) !important;
    }
    
    .currency-dropdown .currency-symbol-icon-dropdown {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 22px !important;
        height: 22px !important;
        border-radius: 50% !important;
        background-color: #2c3e50 !important;
        color: #ffffff !important;
        font-size: 0.8rem !important;
        font-weight: 700 !important;
        margin-right: 10px !important;
        line-height: 1 !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
    }
}

/* --- Mobile Offcanvas Bottom Utilities Styling --- */
.mobile-menu-utilities {
    padding: 20px 24px 40px 24px !important;
    background: transparent !important;
}

.mobile-menu-utilities .menu-divider {
    height: 1px !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
    margin-bottom: 20px !important;
}

.mobile-menu-utilities .utility-section-title {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: rgba(255, 255, 255, 0.4) !important;
    margin-bottom: 12px !important;
}

.mobile-menu-utilities .utility-nav-list {
    margin: 0 !important;
    padding: 0 !important;
}

.mobile-menu-utilities .utility-nav-list li {
    margin-bottom: 10px !important;
}

.mobile-menu-utilities .utility-nav-link {
    display: flex !important;
    align-items: center !important;
    background-color: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    color: #ffffff !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.mobile-menu-utilities .utility-nav-link:hover,
.mobile-menu-utilities .utility-nav-link:active {
    background-color: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #f8bf00 !important;
}

.mobile-menu-utilities .utility-icon-wrap {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    font-size: 1.1rem !important;
    color: rgba(255, 255, 255, 0.6) !important;
    margin-right: 12px !important;
}

.mobile-menu-utilities .utility-nav-link:hover .utility-icon-wrap,
.mobile-menu-utilities .utility-nav-link:active .utility-icon-wrap {
    color: #f8bf00 !important;
}

.mobile-menu-utilities .utility-link-text {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 500 !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.02em !important;
}

.mobile-menu-utilities .utility-chevron {
    margin-left: auto !important;
    font-size: 0.75rem !important;
    color: rgba(255, 255, 255, 0.3) !important;
    transition: transform 0.2s ease !important;
}

.mobile-menu-utilities .utility-nav-link:hover .utility-chevron,
.mobile-menu-utilities .utility-nav-link:active .utility-chevron {
    color: #f8bf00 !important;
    transform: translateX(3px) !important;
}

/* --- PREMIUM MOBILE GRID (BOTTOM SHEET) FOR BOTH LANGUAGE & CURRENCY --- */
@media (max-width: 991px) {
    /* Base wrapper for animation */
    .language-dropdown.dropdown,
    .currency-dropdown.dropdown {
        position: static !important; /* Allow absolute positioning to relative to body */
    }
    
    .language-dropdown .dropdown-menu,
    .currency-dropdown .dropdown-menu {
        display: none !important;
    }
    
    /* Active State: Transform into a 2-column Bottom Sheet Grid */
    .language-dropdown.show .dropdown-menu,
    .currency-dropdown.show .dropdown-menu {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
        margin: 0 !important;
        border-radius: 24px 24px 0 0 !important;
        padding: 40px 20px 30px !important; /* Extra top padding for title/handle */
        box-shadow: 0 -10px 50px rgba(0,0,0,0.2) !important;
        background: #ffffff !important;
        z-index: 10000 !important;
        animation: slideUpBottomSheet 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    
    /* Style the buttons */
    .language-dropdown .dropdown-item,
    .currency-dropdown .dropdown-item {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 14px 16px !important;
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px !important;
        font-weight: 700 !important;
        font-size: 1.05rem !important;
        color: #1b222c !important;
        transition: background 0.2s, border-color 0.2s !important;
        width: 100% !important;
        white-space: nowrap;
    }
    
    .language-dropdown .dropdown-item:active,
    .currency-dropdown .dropdown-item:active {
        background: #e2e8f0 !important;
        transform: scale(0.98);
    }
    
    /* Make flags larger */
    .language-dropdown .dropdown-item img.flag-icon {
        width: 28px !important;
        height: auto !important;
        margin-right: 12px !important;
        border-radius: 4px !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    }
    
    /* Bottom Sheet Handle (Drag Pill) */
    .language-dropdown.show .dropdown-menu::before,
    .currency-dropdown.show .dropdown-menu::before {
        content: "";
        position: absolute;
        top: 12px;
        left: 50%;
        transform: translateX(-50%);
        width: 44px;
        height: 5px;
        background: #cbd5e1;
        border-radius: 5px;
    }
    
    /* Bottom Sheet Titles */
    .language-dropdown.show .dropdown-menu::after {
        content: attr(data-lang-title);
        position: absolute;
        top: 30px;
        left: 0;
        right: 0;
        text-align: center;
        font-size: 1.15rem;
        font-weight: 800;
        color: #1b222c;
        display: block;
        margin-bottom: 20px;
    }

    .currency-dropdown.show .dropdown-menu::after {
        content: attr(data-curr-title);
        position: absolute;
        top: 30px;
        left: 0;
        right: 0;
        text-align: center;
        font-size: 1.15rem;
        font-weight: 800;
        color: #1b222c;
        display: block;
        margin-bottom: 20px;
    }
    
    /* Add extra margin to the first items to clear the absolutely positioned title */
    .language-dropdown.show .dropdown-menu > *:nth-child(1),
    .language-dropdown.show .dropdown-menu > *:nth-child(2),
    .currency-dropdown.show .dropdown-menu > *:nth-child(1),
    .currency-dropdown.show .dropdown-menu > *:nth-child(2) {
        margin-top: 35px;
    }

    /* Style inside the bottom sheet dropdown */
    .currency-dropdown .currency-flag-icon-dropdown {
        width: 28px !important; /* Matches language flags size */
        height: auto !important;
        margin-right: 12px !important;
        border-radius: 4px !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
        border: 1px solid #e2e8f0 !important;
    }

    /* --- HAMBURGER MENU ALIGNMENT & THICKNESS OPTIMIZATIONS --- */
    /* Align hamburger button vertically with the logo */
    header#jtl-nav-wrapper .toggler-logo-wrapper {
        display: flex !important;
        align-items: center !important;
        height: 48px !important;
    }
    
    header#jtl-nav-wrapper #burger-menu {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 48px !important;
        margin: 0 12px 0 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
    }
    
    /* Make the FontAwesome icon prominent, white, and bold */
    header#jtl-nav-wrapper .burger-icon-fa {
        font-size: 1.55rem !important;
        color: #ffffff !important;
        display: inline-block !important;
        line-height: 1 !important;
        font-weight: 900 !important;
    }

    /* Mobile Search Input Text Visibility Fix */
    header#jtl-nav-wrapper .search-form .form-control,
    header#jtl-nav-wrapper .search-form-wrapper-fixed .form-control,
    .search-form-wrapper-fixed .form-control {
        background-color: #ffffff !important;
        color: #1b222c !important; /* Dark text for readability on mobile white input! */
        border: 1px solid #ced4da !important;
    }
    
    header#jtl-nav-wrapper .search-form .form-control::placeholder,
    header#jtl-nav-wrapper .search-form-wrapper-fixed .form-control::placeholder,
    .search-form-wrapper-fixed .form-control::placeholder {
        color: #7f8c8d !important;
    }
}

/* Global flags alignment and sizing (both mobile and desktop) */
header#jtl-nav-wrapper .language-dropdown > a,
header#jtl-nav-wrapper .currency-dropdown > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
}

header#jtl-nav-wrapper .language-dropdown img,
header#jtl-nav-wrapper .currency-dropdown img,
img.flag-icon,
img.currency-flag-icon,
img.currency-flag-icon-dropdown {
    width: 20px !important;
    height: 14px !important; /* Exact same height! */
    object-fit: cover !important; /* Prevent distortion */
    margin-right: 5px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    position: static !important;
    border-radius: 2px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
    display: inline-block !important;
}

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

/* FIX: Cookie / Consent Banner Layout Overlap */
#consent-manager #consent-banner {
    padding: 1.5rem 1.5rem 1.5rem 4.5rem !important; /* Extra padding on left for the fingerprint icon */
    max-width: 80rem !important;
    width: auto !important;
}

#consent-manager .consent-banner-body {
    display: grid !important;
    grid-template-columns: 18rem 1fr !important; /* Buttons on the left (18rem), text on the right (1fr) */
    align-items: center !important;
    gap: 2rem !important;
}

#consent-manager .consent-banner-actions {
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 18rem !important;
}

#consent-manager .consent-banner-description {
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    width: 100% !important;
}

/* Make sure fingerprint icon is aligned cleanly on the left border */
#consent-manager .consent-banner-icon {
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
}

/* Mobile responsive fallback */
@media (max-width: 991.98px) {
    #consent-manager .consent-banner-body {
        grid-template-columns: 1fr !important; /* Stack vertically on mobile */
        gap: 1.5rem !important;
    }
    #consent-manager .consent-banner-actions {
        grid-column: 1 !important;
        grid-row: 2 !important; /* Buttons below text on mobile */
        max-width: 100% !important;
    }
    #consent-manager .consent-banner-description {
        grid-column: 1 !important;
        grid-row: 1 !important; /* Text above buttons on mobile */
    }
    #consent-manager #consent-banner {
        padding: 2.5rem 1.5rem 1.5rem 1.5rem !important;
    }
    #consent-manager .consent-banner-icon {
        left: 50% !important;
        top: 0 !important;
        transform: translate(-50%, -50%) !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;
}









/* ========================================= */
/* --- USER REQUEST 07.07 (Breadcrumb, Image radius, Modal size) --- */