/* ----------------------------------------------------
   KOSTKOLAND - CUSTOM THEME OVERRIDES (LESS/CSS COMPILATION)
   ---------------------------------------------------- */

/* Base resets & helper styles */
.box-sizing {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.btn.btn-red {
    border-radius: 1rem !important;
}


/* Clear floats for legacy grids and resets */
.products::before,
.products::after,
.productlist::before,
.productlist::after,
.innerbox::before,
.innerbox::after {
    display: none !important;
    content: none !important;
}

.products.viewphot .product .prodimage span {
    min-height: 180px;
    max-height: 180px;
}

.products.viewphot .product .buttons .quickview {
    display: none;
}

.menu .innermenu .menu-list > li > h3 > a span {
    font-weight: bold;
}

.shop-gallery .shop-gallery-skin .shop-gallery-title {
    display: none;
}


/* ----------------------------------------------------
   NEW CUSTOM STYLING (MATCHING MOCKUP DESIGN PRECISELY)
   ---------------------------------------------------- */

/* --- 1. HEADER CUSTOM STYLING --- */
header.header-custom,
.header-custom,
header.row {
    position: relative !important;
    z-index: 1000 !important;
    background: #ffffff !important;
    border-bottom: 1px solid #f0f0f0;
    padding: 15px 0;
    margin: 0;
}

.header-container {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.header-logo {
    display: block;
    max-width: 300px;
}
.header-logo img {
    max-height: 80px;
    width: auto;
    display: block;
}

.header-search {
    flex-grow: 1;
    max-width: 500px;
    margin: 0 30px;
    position: relative;
}
.header-search .search-form {
    display: flex;
    align-items: center;
    background: #f5f6f9;
    border-radius: 30px;
    padding: 5px 5px 5px 20px;
    border: 1px solid #e1e4e8;
    transition: all 0.3s ease;
}
.header-search .search-form:hover, 
.header-search .search-form:focus-within {
    border-color: #04BBFF;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(4, 187, 255, 0.15);
}

.header-search .search-input {
    flex-grow: 1;
    border: none !important;
    background: transparent !important;
    outline: none !important;
    font-size: 14px;
    color: #333333;
    padding: 8px 0;
    box-shadow: none !important;
}
.header-search .search-input::placeholder {
    color: #9e9e9e;
}

.header-search .search-btn {
    background: #000000;
    border: none;
    outline: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}
.header-search .search-btn:hover {
    background: #7b00ff;
    transform: scale(1.05);
}
.header-search .search-btn img {
    width: 18px;
    height: 18px;
    filter: invert(1); /* changes SVG to white icon */
}

.header-icons {
    display: flex !important;
    align-items: center !important;
    gap: 28px;
    margin: 0;
    padding: 0;
}

.header-icon-item {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    min-width: 50px !important;
    height: auto !important;
    float: none !important;
}

.header-icon-item > a,
.header-icon-item.basket > a.count {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    color: #1a1a1a !important;
    transition: color 0.3s ease, transform 0.3s ease !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: auto !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    line-height: normal !important;
}

.header-icon-item:hover > a,
.header-icon-item.basket:hover > a.count {
    color: #7b00ff !important;
}

.header-icon-item .icon-img {
    width: 24px !important;
    height: 24px !important;
    margin: 0 0 6px 0 !important;
    display: block !important;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    object-fit: contain;
}

.header-icon-item:hover .icon-img {
    transform: translateY(-3px) scale(1.05) !important;
}

.header-icon-item .icon-label {
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: inherit !important;
    text-align: left !important;
    white-space: nowrap !important;
    letter-spacing: 0.2px;
    margin: 0 !important;
    padding: 0 !important;
}

/* User dropdown submenu on hover with smooth transition */
.user-submenu {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    right: -10px !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
    padding: 8px 0 !important;
    min-width: 160px !important;
    z-index: 1000 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(10px) scale(0.96) !important;
    transform-origin: top right !important;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s !important;
    border: 1px solid #e8ecf1 !important;
}

.user-submenu::before {
    content: '' !important;
    position: absolute !important;
    top: -12px !important;
    left: 0 !important;
    width: 100% !important;
    height: 12px !important;
    background: transparent !important;
}

.user-item:hover .user-submenu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
}

.user-submenu a {
    display: block !important;
    padding: 10px 20px !important;
    color: #2c3e50 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.user-submenu a:hover {
    background: #f4f6fb !important;
    color: #7b00ff !important;
    padding-left: 24px !important;
}

/* Shopping Cart Badge & dropdown reset and alignment */
header .logo-bar .basket,
.header-icon-item.cart-item,
.header-icon-item.basket {
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: none !important;
    border: none !important;
    min-width: unset !important;
    width: auto !important;
    height: auto !important;
    line-height: normal !important;
    box-shadow: none !important;
}

.basket .count,
header .logo-bar .basket > a.count {
    background: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-width: unset !important;
    border: none !important;
    line-height: normal !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.basket .count::before,
.basket .count::after,
header .logo-bar .basket > a.count::before,
header .logo-bar .basket > a.count::after {
    display: none !important; /* Hide legacy icon font pseudo elements */
    content: none !important;
}

.basket .count img,
header .logo-bar .basket img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.cart-icon-wrapper {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    margin: 0 0 6px 0 !important;
}

.cart-icon-wrapper .icon-img {
    margin: 0 !important;
    width: 24px !important;
    height: 24px !important;
}

.cart-badge {
    position: absolute !important;
    top: -7px !important;
    right: -11px !important;
    background: linear-gradient(135deg, #04BBFF 0%, #0088cc 100%) !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    min-width: 18px !important;
    height: 18px !important;
    border-radius: 9px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 2px 5px rgba(4, 187, 255, 0.4) !important;
    z-index: 5 !important;
    line-height: 1 !important;
    padding: 0 3px !important;
    box-sizing: border-box !important;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.header-icon-item:hover .cart-badge {
    transform: scale(1.15) !important;
}

/* Cart dropdown with 0.5s smooth fade & slide transition */
.header-icons {
    position: relative !important;
    z-index: 1001 !important;
}

.header-icon-item.cart-item,
.header-icon-item.basket {
    position: relative !important;
    z-index: 1002 !important;
}

.cart-item .basket-contain,
.header-icon-item.basket .basket-contain,
.basket-contain {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
    max-width: calc(100vw - 20px) !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14), 0 0 1px rgba(0,0,0,0.1) !important;
    border: 1px solid #eef1f6 !important;
    width: 340px !important;
    padding: 18px !important;
    z-index: 1005 !important;
    display: block !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(10px) scale(0.97) !important;
    transform-origin: top right !important;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.5s, pointer-events 0.5s !important;
    box-sizing: border-box !important;
}

/* Wide invisible hover bridge padding on the wrapper so mouse hover is never broken */
.header-icon-item.cart-item::after,
.header-icon-item.basket::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -20px !important;
    right: -20px !important;
    bottom: -15px !important;
    background: transparent !important;
    z-index: 999 !important;
    pointer-events: auto !important;
}

.cart-item .basket-contain::before,
.header-icon-item.basket .basket-contain::before {
    content: '' !important;
    position: absolute !important;
    top: -20px !important;
    left: -20px !important;
    right: -20px !important;
    height: 20px !important;
    background: transparent !important;
    pointer-events: auto !important;
}

.cart-item:hover .basket-contain,
.cart-item:focus-within .basket-contain,
.header-icon-item.basket:hover .basket-contain,
.header-icon-item.basket:focus-within .basket-contain,
.cart-item.open .basket-contain,
.cart-item.active .basket-contain,
.header-icon-item.basket.open .basket-contain,
.header-icon-item.basket.active .basket-contain,
.basket-contain:hover {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
}

.cart-item .basket-contain .basket-products,
.header-icon-item.basket .basket-contain .basket-products {
    padding: 0 !important;
    border: none !important;
    background: none !important;
}

.cart-item .basket-contain .basket-product-list {
    max-height: 270px;
    overflow-y: auto;
    margin: 0;
    padding: 0 4px 0 0;
    list-style: none;
}

/* Custom scrollbar for cart products list */
.cart-item .basket-contain .basket-product-list::-webkit-scrollbar {
    width: 5px;
}
.cart-item .basket-contain .basket-product-list::-webkit-scrollbar-track {
    background: #f1f3f7;
    border-radius: 3px;
}
.cart-item .basket-contain .basket-product-list::-webkit-scrollbar-thumb {
    background: #c5cbd5;
    border-radius: 3px;
}
.cart-item .basket-contain .basket-product-list::-webkit-scrollbar-thumb:hover {
    background: #9aa2b1;
}

.cart-item .basket-contain .basket-product-list li {
    display: grid !important;
    grid-template-columns: 52px 1fr auto !important;
    grid-template-rows: auto auto !important;
    column-gap: 12px !important;
    row-gap: 6px !important;
    align-items: center !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid #f0f2f5 !important;
    position: relative !important;
    transition: background-color 0.2s ease !important;
}

.cart-item .basket-contain .basket-product-list li:last-child {
    border-bottom: none !important;
}

.cart-item .basket-contain .basket-product-list li img {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    display: block !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 8px !important;
    object-fit: cover !important;
    margin: 0 !important;
    visibility: visible !important;
    border: 1px solid #eef1f5 !important;
}

.cart-item .basket-contain .basket-product-list li .product-name {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
    margin: 0 !important;
    width: 100% !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    align-self: center !important;
    transition: color 0.2s ease !important;
}

.cart-item .basket-contain .basket-product-list li .product-name:hover {
    color: #7b00ff !important;
}

.cart-item .basket-contain .basket-product-list li .product-name .product-variant {
    display: block !important;
    font-size: 11px !important;
    color: #6b7280 !important;
    font-weight: normal !important;
    margin-top: 2px !important;
}

.cart-item .basket-contain .basket-product-list li .product-info {
    grid-column: 3 !important;
    grid-row: 1 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    display: block !important;
    text-align: right !important;
    white-space: nowrap !important;
    padding: 0 !important;
}

.cart-item .basket-contain .basket-product-list li .product-info span {
    display: inline !important;
}

.cart-item .basket-contain .basket-product-list li .remove-product {
    grid-column: 3 !important;
    grid-row: 2 !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    display: block !important;
    text-align: right !important;
    margin-top: 2px !important;
}

.cart-item .basket-contain .basket-product-list li .remove-product a {
    color: #ef4444 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    transition: color 0.2s ease, opacity 0.2s ease !important;
}

.cart-item .basket-contain .basket-product-list li .remove-product a:hover {
    color: #dc2626 !important;
    text-decoration: underline !important;
}

.cart-item .basket-contain .basket-summery {
    margin-top: 14px !important;
    padding-top: 14px !important;
    border-top: 1px solid #eef1f6 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-direction: row-reverse !important;
    background: none !important;
}

.cart-item .basket-contain .basket-summery a {
    background: linear-gradient(135deg, #7b00ff 0%, #04BBFF 100%) !important;
    color: #ffffff !important;
    padding: 9px 24px !important;
    border-radius: 22px !important;
    font-size: 0 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    float: none !important;
    border: none !important;
    width: auto !important;
    height: auto !important;
    line-height: normal !important;
    box-shadow: 0 4px 14px rgba(123, 0, 255, 0.35) !important;
    cursor: pointer !important;
}

.cart-item .basket-contain .basket-summery a::after {
    content: 'Kasa' !important;
    font-size: 13px !important;
    display: inline-block !important;
    letter-spacing: 0.5px !important;
}

.cart-item .basket-contain .basket-summery a:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(123, 0, 255, 0.5) !important;
    filter: brightness(1.05) !important;
}

.cart-item .basket-contain .basket-summery .basket-price {
    text-align: left !important;
    float: none !important;
    width: auto !important;
    background: none !important;
    padding: 0 !important;
    border: none !important;
}

.cart-item .basket-contain .basket-summery .basket-price .price-total {
    font-size: 13px !important;
    color: #4b5563 !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important;
}

.cart-item .basket-contain .basket-summery .basket-price .price-total strong {
    font-size: 16px !important;
    color: #04BBFF !important;
    font-weight: 800 !important;
}


/* --- 2. NAVIGATION MENU CUSTOM STYLING --- */
.menu,
.menu.row {
    background: #000000 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18) !important;
    width: 100% !important;
    position: relative !important;
    z-index: 99 !important;
}

.menu::before,
.menu::after,
.innermenu::before,
.innermenu::after {
    display: none !important;
}

.innermenu,
.innermenu.row.container {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 56px !important;
    float: none !important;
    box-sizing: border-box !important;
    position: relative !important;
}

.menu-list {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    list-style: none !important;
    width: auto !important;
    float: none !important;
    border: none !important;
    overflow: visible !important;
}

.menu-list li.home-link-menu-li {
    display: none !important; /* Hide legacy home icon button */
}

.menu-list > li {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.menu-list > li > h3 {
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: normal !important;
}

.menu-list > li > h3 > a {
    color: #f3f4f6 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 100% !important;
    position: relative !important;
    padding: 0 16px !important;
    transition: color 0.3s ease, background-color 0.3s ease !important;
    border-radius: 6px !important;
}

.menu-list > li > h3 > a span {
    position: relative !important;
    padding-bottom: 2px !important;
    transition: color 0.3s ease !important;
}

.menu-list > li > h3 > a span::after {
    content: '' !important;
    position: absolute !important;
    bottom: -4px !important;
    left: 50% !important;
    width: 0 !important;
    height: 2.5px !important;
    background: linear-gradient(90deg, #7b00ff, #04BBFF) !important;
    border-radius: 2px !important;
    transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1), left 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.menu-list > li > h3 > a:hover span::after,
.menu-list > li > h3 > a.fx-active span::after,
.menu-list > li.current > h3 > a span::after,
.menu-list > li.active-menu > h3 > a span::after {
    width: 100% !important;
    left: 0 !important;
}

.menu-list > li > h3 > a:hover, 
.menu-list > li > h3 > a.fx-active,
.menu-list > li.current > h3 > a,
.menu-list > li.active-menu > h3 > a {
    color: #04BBFF !important;
    text-decoration: none !important;
}

/* Category Submenu Styling with Smooth Transitions */
/* Reset wrapper div .submenu so it does not render background/border duplicate */
.menu-list > li .submenu,
.menu-list > li > div.submenu {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 1000 !important;
    display: block !important;
    pointer-events: none !important;
}

/* Reset default Shopper legacy ::after/::before on parent:hover */
.innermenu .parent:hover::after,
.innermenu .parent.opened::after,
.menu-list > li.parent::after {
    display: none !important;
    content: none !important;
}

/* Style the actual category list ul.level1 */
.menu-list > li .submenu > ul,
.menu-list > li > div > ul,
.innermenu .parent:hover > div > ul,
.innermenu .parent.opened > div > ul {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    transform: translateY(12px) scale(0.96) !important;
    transform-origin: top center !important;
    background: #ffffff !important;
    border-radius: 14px !important;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid #eef1f6 !important;
    min-width: 220px !important;
    width: max-content !important;
    max-width: 320px !important;
    padding: 10px 0 !important;
    margin: 8px 0 0 0 !important;
    list-style: none !important;
    display: block !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s !important;
}

/* Invisible bridge on the ul so mouse hover from menu link to submenu is seamless */
.menu-list > li .submenu > ul::before,
.menu-list > li > div > ul::before {
    content: '' !important;
    position: absolute !important;
    top: -16px !important;
    left: 0 !important;
    width: 100% !important;
    height: 16px !important;
    background: transparent !important;
    border: none !important;
    transform: none !important;
}

/* Open submenu on hover */
.menu-list > li.parent:hover > .submenu,
.menu-list > li:hover > .submenu,
.menu-list > li .submenu:hover {
    pointer-events: auto !important;
}

.menu-list > li.parent:hover > .submenu > ul,
.menu-list > li.parent:hover > div > ul,
.menu-list > li:hover > .submenu > ul,
.menu-list > li .submenu > ul:hover {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
}

.menu-list > li .submenu li {
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    position: relative !important;
}

.menu-list > li .submenu li h3 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    display: block !important;
}

.menu-list > li .submenu li h3 a,
.menu-list > li .submenu li a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: left !important;
    padding: 10px 22px !important;
    color: #374151 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0.2px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
    height: auto !important;
}

.menu-list > li .submenu li h3 a:hover,
.menu-list > li .submenu li a:hover {
    background: #f4f6fc !important;
    color: #7b00ff !important;
    padding-left: 22px !important;
}


/* --- 3. CUSTOM HERO BANNER --- */
.custom-hero-banner {
    background: radial-gradient(circle at 85% 50%, rgba(123, 0, 255, 0.28), transparent 45%), 
                radial-gradient(circle at 65% 50%, rgba(4, 187, 255, 0.22), transparent 45%), 
                #050c1e;
    position: relative;
    padding: 80px 0 120px 0;
    color: #ffffff;
    overflow: hidden;
}

.hero-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.hero-content {
    flex: 1;
    max-width: 600px;
    z-index: 5;
}

.hero-badge {
    background: linear-gradient(90deg, rgba(123, 0, 255, 0.15), rgba(4, 187, 255, 0.15));
    border: 1px solid rgba(4, 187, 255, 0.3);
    color: #04BBFF;
    display: inline-block;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.hero-title {
    font-size: 54px;
    line-height: 1.1;
    font-weight: 900;
    margin-bottom: 20px;
    color: #ffffff;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, #ffffff 60%, #04BBFF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-subtitle {
    font-size: 18px;
    line-height: 1.5;
    color: #a5b4fc;
    margin-bottom: 40px;
    font-weight: 400;
}

.hero-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(90deg, #7b00ff, #04BBFF);
    color: #ffffff !important;
    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 16px 35px;
    border-radius: 30px;
    text-decoration: none !important;
    box-shadow: 0 4px 20px rgba(123, 0, 255, 0.4);
    transition: all 0.3s ease;
}
.hero-cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 25px rgba(123, 0, 255, 0.6);
    background: linear-gradient(90deg, #8c1aff, #1ad1ff);
}
.hero-cta-btn:hover .arrow-icon {
    transform: translateX(4px);
}
.hero-cta-btn .arrow-icon {
    width: 18px;
    height: 18px;
    transition: transform 0.2s ease;
}

.hero-features {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-top: 50px;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 30px;
}

.hero-feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
}
.hero-feature-item .feature-icon {
    color: #04BBFF;
    font-size: 20px;
}
.hero-feature-item .feature-text {
    display: flex;
    flex-direction: column;
}
.hero-feature-item .feature-text strong {
    font-size: 12px;
    font-weight: bold;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.hero-feature-item .feature-text span {
    font-size: 11px;
    color: #a5b4fc;
}

.hero-visual {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 450px;
    max-width: 500px;
}

.neon-ring {
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    border: 3px solid rgba(4, 187, 255, 0.7);
    box-shadow: 0 0 25px rgba(4, 187, 255, 0.8), 
                inset 0 0 25px rgba(4, 187, 255, 0.8),
                0 0 50px rgba(123, 0, 255, 0.5),
                inset 0 0 50px rgba(123, 0, 255, 0.5);
    animation: rotateRing 15s linear infinite;
    z-index: 1;
}

.neon-ring-glow {
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 50%;
    background: radial-gradient(circle, transparent 60%, rgba(123, 0, 255, 0.2));
}

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

/* 3D Rubik's Cube representation */
.rubiks-cube-wrapper {
    position: absolute;
    perspective: 800px;
    z-index: 2;
}

.rubiks-cube {
    width: 150px;
    height: 150px;
    position: relative;
    z-index: 10;
    transform-style: preserve-3d;
    transform: rotateX(-25deg) rotateY(45deg);
    animation: floatCube 4s ease-in-out infinite;
}

@keyframes floatCube {
    0%, 100% { transform: rotateX(-25deg) rotateY(45deg) translateY(0); }
    50% { transform: rotateX(-25deg) rotateY(45deg) translateY(-15px); }
}

/* 3D JS Rubiks Cube */
.rubiks-cube {
    width: 150px;
    height: 150px;
    position: relative;
    z-index: 10;
    transform-style: preserve-3d;
    transform: rotateX(-25deg) rotateY(45deg);
    animation: floatCube 4s ease-in-out infinite;
}

#cube-shaker {
    position: absolute;
    top: 0;
    left: 0;
    width: 150px;
    height: 150px;
    transform-style: preserve-3d;
    transform-origin: 75px 75px 0;
}

.pivot {
    position: absolute;
    top: 0;
    left: 0;
    width: 150px;
    height: 150px;
    transform-style: preserve-3d;
    transform-origin: 50% 50% 0;
}

.cubie {
    position: absolute;
    width: 50px;
    height: 50px;
    top: 50px;
    left: 50px;
    transform-style: preserve-3d;
    /* Transition removed to prevent scattering; rotation is handled by the pivot */
}

.cubie-face {
    position: absolute;
    width: 50px;
    height: 50px;
    margin: 0;
    background-color: #050505;
    border-radius: 6px;
    border: 3px solid #050505;
    box-sizing: border-box;
    backface-visibility: visible;
}

.cubie-face::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 2px;
    background-color: var(--sticker-bg, transparent);
    backface-visibility: hidden;
}

.cubie-face-U { transform: rotateX(90deg) translateZ(25px); }
.cubie-face-D { transform: rotateX(-90deg) translateZ(25px); }
.cubie-face-F { transform: translateZ(25px); }
.cubie-face-B { transform: rotateY(180deg) translateZ(25px); }
.cubie-face-R { transform: rotateY(90deg) translateZ(25px); }
.cubie-face-L { transform: rotateY(-90deg) translateZ(25px); }

.cube-shadow {
    position: absolute;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 140px;
    height: 30px;
    background: radial-gradient(ellipse, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 70%);
    z-index: 1;
}

/* Curved cutoff path at the bottom of hero banner */
.hero-wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 60px;
    overflow: hidden;
    line-height: 0;
    z-index: 4;
}
.hero-wave svg {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}


/* --- 4. CUSTOM USPs BAR --- */
.custom-usps-bar {
    background: #ffffff;
    padding: 30px 0;
    border-bottom: 1px solid #f0f0f0;
    position: relative;
    z-index: 6;
    margin-top: -30px;
}

.usps-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}
@media (max-width: 980px) {
    .usps-container {
        flex-wrap: wrap;
        justify-content: center;
        gap: 30px;
    }
}

.usp-item {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
    min-width: 180px;
}
.usp-item .usp-icon {
    color: #7b00ff;
    font-size: 24px;
    background: #f5f0ff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.usp-item:hover .usp-icon {
    background: #7b00ff;
    color: #ffffff;
    transform: translateY(-3px);
}
.usp-item .usp-text {
    display: flex;
    flex-direction: column;
}
.usp-item .usp-text strong {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 2px;
}
.usp-item .usp-text span {
    font-size: 11px;
    color: #777777;
}


/* --- 5. PRODUCTS CARDS CUSTOM STYLE --- */
.main {
    background: #ffffff !important;
}

.box {
    margin-bottom: 50px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.boxhead,
.box .boxhead {
    margin-bottom: 25px;
    padding-bottom: 12px;
    border-bottom: 2px solid #f0f0f0;
    position: relative;
    width: 100%;
}
.boxhead span, .boxhead h1, .boxhead h2, .boxhead .category-name {
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
    border: none;
    padding: 0;
    margin: 0;
    background: none;
    display: inline-block;
}
.boxhead::after {
    display: none !important; /* Hide old background borders */
}

/* Home page module headers - CLEAN & BOLD (NO BORDER) */
body.shop_index .boxhead,
body.shop_index .box .boxhead,
.box-recommended-dark .boxhead {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: left !important;
    border: none !important;
    padding: 0 !important;
    margin: 36px auto 20px auto !important;
    background: transparent !important;
}

body.shop_index .boxhead span,
body.shop_index .boxhead h1,
body.shop_index .boxhead h2,
body.shop_index .boxhead h3,
body.shop_index .boxhead .category-name,
.box-recommended-dark .boxhead h1,
.box-recommended-dark .boxhead h2 {
    margin: 0 auto !important;
    display: inline-block !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    color: #0f172a !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: none !important;
}

body.shop_index .boxhead img.px1,
body.shop_index .boxhead img {
    display: none !important;
}

/* Hide all "Zobacz wszystkie" pseudo-elements and buttons from boxes */
body.shop_index #box_bestsellers .boxhead::before,
body.shop_index #box_lastadded .boxhead::before,
body.shop_index #box_mainproducts .boxhead::before,
body.shop_index [id^="box_recommendations"] .boxhead::before,
[id^="box_recommendations"] .boxhead::before,
.box-recommended-dark .boxhead::before,
.boxhead .see-all-btn,
.boxhead .see-all-link {
    display: none !important;
    content: none !important;
}

/* Center column boxhead header adjustments on list pages */
body.shop_product_list .s-grid-9 .boxhead,
body.shop_product_list #center .boxhead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
}
body.shop_product_list .s-grid-9 .boxhead h1,
body.shop_product_list #center .boxhead h1 {
    margin: 0;
}

/* Let's style the product grid and items */
div.products, ul.products, div.productlist, ul.productlist, .products:not(table), .productlist:not(table) {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.slider .products, .slider .productlist {
    display: block !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
}

/* Custom cards styling */
.product, .productlist .product, #box_mainproducts .products .product, #box_lastadded .product {
    background: #ffffff !important;
    border: 1px solid #f0f0f0 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02) !important;
    transition: all 0.3s ease !important;
    width: calc(20% - 16px); /* 5 cards in row */
    min-width: 190px;
    position: relative;
    overflow: hidden;
    margin: 0;
    float: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Fix for slider items to prevent wrapping and breaking script calculations */
.slider .product {
    width: 100%;
    min-width: 0 !important;
    margin: 0 !important;
    margin-right: 20px !important;
    display: inline-flex !important;
    vertical-align: top !important;
    box-sizing: border-box !important;
}

.leftcol .slider .product,
.rightcol .slider .product {
    margin-right: 0 !important;
}

/* Ukrycie rozpychających tekstów omnibus na kafelkach sliderów */
.slider .product .price__omnibus,
.box.slider .product .price__omnibus,
.slider-wrap .product .price__omnibus,
#box_bestsellers .product .price__omnibus,
#box_specialoffer .product .price__omnibus,
#box_newproducts .product .price__omnibus,
[id^="box_recommendations"] .product .price__omnibus,
#box_recent .product .price__omnibus,
#box_productoftheday .product .price__omnibus,
#kl-acc-slider .product .price__omnibus {
    display: none !important;
}

/* Wyrównanie cen promocyjnych w sliderach - cena przekreślona obok ceny promocyjnej, równa wysokość kart */
.slider .product .price,
.box.slider .product .price,
.slider-wrap .product .price,
#box_bestsellers .product .price,
#box_specialoffer .product .price,
#box_newproducts .product .price,
[id^="box_recommendations"] .product .price,
#box_recent .product .price,
#box_productoftheday .product .price,
#kl-acc-slider .product .price {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: baseline !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: auto !important;
    padding: 10px 0 0 0 !important;
    min-height: 34px !important;
    box-sizing: border-box !important;
    border-top: 1px solid #f1f5f9 !important;
}

.slider .product .price p,
.box.slider .product .price p,
.slider-wrap .product .price p,
#box_bestsellers .product .price p,
#box_specialoffer .product .price p,
#box_newproducts .product .price p,
[id^="box_recommendations"] .product .price p,
#box_recent .product .price p,
#box_productoftheday .product .price p,
#kl-acc-slider .product .price p {
    display: inline-flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    max-width: none !important;
    float: none !important;
}

.slider .product .price em,
.box.slider .product .price em,
#box_bestsellers .product .price em,
#box_specialoffer .product .price em,
#box_newproducts .product .price em,
[id^="box_recommendations"] .product .price em,
#box_recent .product .price em,
#box_productoftheday .product .price em,
#kl-acc-slider .product .price em {
    display: inline-block !important;
    margin: 0 !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    vertical-align: baseline !important;
}

.slider .product .price em.color,
.box.slider .product .price em.color,
#box_bestsellers .product .price em.color,
#box_specialoffer .product .price em.color,
#box_newproducts .product .price em.color,
[id^="box_recommendations"] .product .price em.color,
#box_recent .product .price em.color,
#box_productoftheday .product .price em.color,
#kl-acc-slider .product .price em.color {
    color: #ef4444 !important;
}

.slider .product .price del,
.slider .product .price .promo-old-price,
.slider .product .price span.promo-old-price,
.box.slider .product .price del,
.box.slider .product .price .promo-old-price,
.box.slider .product .price span.promo-old-price,
#box_bestsellers .product .price del,
#box_bestsellers .product .price .promo-old-price,
#box_bestsellers .product .price span.promo-old-price,
#box_specialoffer .product .price del,
#box_specialoffer .product .price .promo-old-price,
#box_specialoffer .product .price span.promo-old-price,
#box_newproducts .product .price del,
#box_newproducts .product .price .promo-old-price,
#box_newproducts .product .price span.promo-old-price,
[id^="box_recommendations"] .product .price del,
[id^="box_recommendations"] .product .price .promo-old-price,
[id^="box_recommendations"] .product .price span.promo-old-price,
#box_recent .product .price del,
#box_recent .product .price .promo-old-price,
#box_recent .product .price span.promo-old-price,
#box_productoftheday .product .price del,
#box_productoftheday .product .price .promo-old-price,
#box_productoftheday .product .price span.promo-old-price,
#kl-acc-slider .product .price del,
#kl-acc-slider .product .price .promo-old-price,
#kl-acc-slider .product .price span.promo-old-price {
    display: inline-block !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #94a3b8 !important;
    text-decoration: line-through !important;
    margin: 0 !important;
    vertical-align: baseline !important;
    line-height: 1.2 !important;
}

.owl-item .product {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
}

/* Stylizacja strzałek dla wszystkich sliderów na stronie głównej */
.slider {
    position: relative !important;
}
.slider .innerbox {
    overflow: hidden !important;
    position: relative !important;
}
.slider .slider-wrap {
    white-space: nowrap !important;
    font-size: 0 !important;
    position: relative !important;
}
.slider .slider-nav-left,
.slider .slider-nav-right,
.box.slider .slider-nav-left,
.box.slider .slider-nav-right {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 44px !important;
    height: 44px !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 50% !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12) !important;
    cursor: pointer !important;
    z-index: 50 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    margin: 0 !important;
    opacity: 0.95 !important;
    visibility: visible !important;
}
.slider .slider-nav-left[style*="display: none"],
.slider .slider-nav-right[style*="display: none"],
.box.slider .slider-nav-left[style*="display: none"],
.box.slider .slider-nav-right[style*="display: none"] {
    display: none !important;
}
.slider .slider-nav-left:hover,
.slider .slider-nav-right:hover,
.box.slider .slider-nav-left:hover,
.box.slider .slider-nav-right:hover {
    background: #04BBFF !important;
    border-color: #04BBFF !important;
    opacity: 1 !important;
    transform: translateY(-50%) scale(1.1) !important;
    box-shadow: 0 8px 24px rgba(4, 187, 255, 0.4) !important;
}
.slider .slider-nav-left,
.box.slider .slider-nav-left {
    left: -15px !important;
}
.slider .slider-nav-right,
.box.slider .slider-nav-right {
    right: -15px !important;
}
.slider .slider-nav-left::before,
.box.slider .slider-nav-left::before {
    content: '\f104' !important;
    font-family: FontAwesome !important;
    font-size: 20px !important;
    color: #1e293b !important;
    line-height: 1 !important;
    display: block !important;
}
.slider .slider-nav-right::before,
.box.slider .slider-nav-right::before {
    content: '\f105' !important;
    font-family: FontAwesome !important;
    font-size: 20px !important;
    color: #1e293b !important;
    line-height: 1 !important;
    display: block !important;
}
.slider .slider-nav-left:hover::before,
.slider .slider-nav-right:hover::before,
.box.slider .slider-nav-left:hover::before,
.box.slider .slider-nav-right:hover::before {
    color: #ffffff !important;
}

@media (max-width: 1200px) {
    .product:not(.slider .product), .productlist .product, #box_mainproducts .products .product, #box_lastadded:not(.slider) .product {
        width: calc(25% - 15px) !important;
    }
}
@media (max-width: 980px) {
    .product:not(.slider .product), .productlist .product, #box_mainproducts .products .product, #box_lastadded:not(.slider) .product {
        width: calc(33.33% - 14px) !important;
    }
}
@media (max-width: 768px) {
    .product:not(.slider .product), .productlist .product, #box_mainproducts .products .product, #box_lastadded:not(.slider) .product {
        width: calc(50% - 10px) !important;
    }
}
@media (max-width: 480px) {
    .product:not(.slider .product), .productlist .product, #box_mainproducts .products .product, #box_lastadded:not(.slider) .product {
        width: 100% !important;
    }
}

.product:hover, .productlist .product:hover, #box_mainproducts .products .product:hover, #box_lastadded .product:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.06) !important;
    border-color: #e1e4e8 !important;
    z-index: 10;
}

/* Center the image */
.product a {
    text-align: center;
    display: block;
    margin-bottom: 15px;
    text-decoration: none !important;
}

.product .boximgsize, .product .prodimage {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 180px !important;
    margin: 0 auto 15px auto !important;
    width: 100% !important;
}
.product .boximgsize span, .product .prodimage span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}
.product .boximgsize img, .product .prodimage img {
    max-height: 180px !important;
    max-width: 100% !important;
    height: auto !important;
    width: auto !important;
    object-fit: contain !important;
    transition: transform 0.3s ease;
}
.product:hover .boximgsize img, .product:hover .prodimage img {
    transform: scale(1.05);
}

/* Product title styling - max 2 full wrapping lines with ellipsis */
.product .productnamewrap,
.product a .productnamewrap {
    display: block !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    margin: 8px auto !important;
    padding: 0 !important;
    width: 100% !important;
    text-align: center !important;
    overflow: hidden !important;
}

.product .productname,
.product .prodname,
.product a .productname,
.product a.row .productnamewrap .productname,
[id^="box_recommendations"] .product .productname,
#box_mainproducts .product .productname {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    line-height: 1.35 !important;
    height: 36px !important;
    max-height: 36px !important;
    min-height: 36px !important;
    text-align: center !important;
    text-decoration: none !important;
    word-break: break-word !important;
    margin: 0 auto !important;
    padding: 0 !important;
    white-space: normal !important;
    width: 100% !important;
}

/* Price wrapper layout - wyśrodkowana cena w całym sklepie */
.product .price {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: baseline !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 8px !important;
    margin-top: auto !important;
    padding: 10px 0 0 0 !important;
    border-top: 1px solid #f1f5f9 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 34px !important;
}

.product .price::before,
.product .price::after {
    display: none !important;
}

.product .price > span:not(.promo-old-price),
.product .price > div > span:not(.promo-old-price) {
    display: none !important; /* Ukryj zbędny tekst "Cena:" */
}

.product .price p,
.product .price p.promo-price-row,
.product .price > div {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 8px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

.product .price .price__regular {
    display: none !important; /* Ukryj powieloną cenę regularną na kafelkach */
}

.product .price .price__omnibus {
    display: block !important;
    text-align: center !important;
    justify-content: center !important;
    margin: 4px auto 0 auto !important;
    font-size: 11.5px !important;
    color: #94a3b8 !important;
    width: 100% !important;
}

/* Regular Price - Cyan */
.product .price em {
    font-size: 17px !important;
    font-weight: 900 !important;
    color: #04bbff !important;
    font-style: normal !important;
    text-align: center !important;
    display: inline-block !important;
    margin: 0 !important;
    float: none !important;
}

/* Promotion Price - RED */
.product .price em.color,
.product.custom-promo-product .price em,
.product .price p em.color,
.product .price p.promo-price-row em,
.custom-promo-product .price em,
#box_specialoffer .product .price em,
.product .price .color {
    color: #ef4444 !important;
    font-weight: 900 !important;
}

.product .price del,
.product .price .promo-old-price,
.product .price span.promo-old-price {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #94a3b8 !important;
    text-decoration: line-through !important;
    margin: 0 !important;
    text-align: center !important;
    display: inline-block !important;
    float: none !important;
}

/* Shopping basket button inside card on center under price */
.product .basket-box, .product form.basket {
    margin: 10px auto 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    position: static !important;
}
.product button.addtobasket,
.product input[type="submit"].addtobasket,
.product .addtobasket,
.product a.btn.btn-red,
.product button.btn-red,
.slider .product .addtobasket,
.slider .product button.addtobasket,
.box.slider .product .addtobasket,
.box.slider .product button.addtobasket {
    width: 100% !important;
    max-width: 100% !important;
    height: 42px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #7b00ff 0%, #04BBFF 50%, #7b00ff 100%) !important;
    background-size: 200% 100% !important;
    background-position: 0% 0% !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(123, 0, 255, 0.28) !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    transition: background-position 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s ease, box-shadow 0.25s ease !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    position: static !important;
    line-height: 1 !important;
    text-decoration: none !important;
}

.product button.addtobasket::before,
.product input[type="submit"]::before,
.product .addtobasket::before,
.slider .product .addtobasket::before {
    content: '' !important;
    background: url('../images/user/cart.svg') no-repeat center !important;
    background-size: 15px !important;
    width: 15px !important;
    height: 15px !important;
    display: inline-block !important;
    filter: brightness(0) invert(1) !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}

.product button.addtobasket span,
.product .addtobasket span,
.product a.btn.btn-red span,
.slider .product .addtobasket span {
    display: inline-block !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    line-height: 1 !important;
    margin: 0 !important;
}

.product button.addtobasket img,
.product .addtobasket img {
    display: none !important;
}

.product button.addtobasket:hover,
.product input[type="submit"].addtobasket:hover,
.product .addtobasket:hover,
.product a.btn.btn-red:hover,
.slider .product .addtobasket:hover,
.slider .product button.addtobasket:hover,
.box.slider .product .addtobasket:hover,
.box.slider .product button.addtobasket:hover {
    background-position: 100% 0% !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 8px 24px rgba(4, 187, 255, 0.45) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

.product button.addtobasket:hover::before,
.product input[type="submit"]:hover::before,
.product .addtobasket:hover::before {
    filter: brightness(0) invert(1) !important;
}

.product button.addtobasket:active,
.product input[type="submit"].addtobasket:active,
.product .addtobasket:active,
.product a.btn.btn-red:active,
.slider .product .addtobasket:active,
.box.slider .product .addtobasket:active {
    transform: translateY(0) scale(0.98) !important;
    box-shadow: 0 2px 8px rgba(123, 0, 255, 0.3) !important;
}

/* Disable legacy pseudo-element badges (replaced by .custom-product-badges) */
.product::after,
#box_lastadded .product::after,
#box_bestsellers .product::after,
#box_specialoffer .product::after {
    display: none !important;
    content: none !important;
}


/* --- 6. "POLECANE PRODUKTY" SECTION STYLE --- */
[id^="box_recommendations"],
#box_mainproducts {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 40px 0 !important;
}

[id^="box_recommendations"] .product,
#box_mainproducts .product {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    text-align: center !important;
}

[id^="box_recommendations"] .product .productnamewrap,
#box_mainproducts .product .productnamewrap {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    margin: 8px auto !important;
}

[id^="box_recommendations"] .product .productname,
#box_mainproducts .product .productname {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: center !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    height: 38px !important;
    max-height: 38px !important;
    min-height: 38px !important;
    margin: 0 auto !important;
}

[id^="box_recommendations"] .product .price,
#box_mainproducts .product .price {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: baseline !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: auto !important;
    padding-top: 10px !important;
    border-top: 1px solid #f1f5f9 !important;
    min-height: 34px !important;
    box-sizing: border-box !important;
}

[id^="box_recommendations"] .product .price > div,
#box_mainproducts .product .price > div,
[id^="box_recommendations"] .product .price p,
#box_mainproducts .product .price p {
    display: inline-flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 8px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

[id^="box_recommendations"] .product .price em,
#box_mainproducts .product .price em {
    text-align: center !important;
    display: inline-block !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    color: #04bbff !important;
}

[id^="box_recommendations"] .product .price del,
#box_mainproducts .product .price del {
    text-align: center !important;
    display: inline-block !important;
    margin: 0 !important;
}


/* --- 7. NEWSLETTER SECTION STYLING --- */
#box_newsletter,
.box#box_newsletter,
.custom-newsletter-box {
    background: radial-gradient(circle at 10% 20%, rgba(4, 187, 255, 0.12), transparent 40%),
                radial-gradient(circle at 90% 80%, rgba(123, 0, 255, 0.15), transparent 40%),
                #0b0f24 !important; /* Deep stylish dark navy */
    border-radius: 18px !important;
    padding: 40px 45px !important;
    margin: 60px auto !important;
    max-width: 1160px !important;
    width: 100% !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
    box-sizing: border-box !important;
    position: relative !important;
}
#box_newsletter .boxhead, .custom-newsletter-box .boxhead {
    display: none !important; /* Hide old newsletter header */
}
#box_newsletter .innerbox, .custom-newsletter-box .innerbox {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 30px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
@media (max-width: 980px) {
    #box_newsletter .innerbox, .custom-newsletter-box .innerbox {
        flex-direction: column;
        text-align: center;
    }
}

#box_newsletter .boxintro, .custom-newsletter-box .boxintro {
    flex: 1;
    min-width: 300px;
    font-size: 16px !important;
    color: #ffffff !important;
    font-weight: 500;
    margin: 0 !important;
    line-height: 1.5;
    display: flex;
    align-items: center;
    gap: 20px;
}
#box_newsletter .boxintro::before, .custom-newsletter-box .boxintro::before {
    content: '\f0e0'; /* Mail icon */
    font-family: FontAwesome;
    font-size: 36px;
    color: #04BBFF;
    background: none !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: inline-block;
    flex-shrink: 0;
}
@media (max-width: 980px) {
    #box_newsletter .boxintro, .custom-newsletter-box .boxintro {
        flex-direction: column;
        gap: 10px;
    }
}

#box_newsletter form, .custom-newsletter-box form {
    flex: 1.2;
    max-width: 600px;
    width: 100%;
    margin: 0;
}

#box_newsletter .newsletter-input-container, .custom-newsletter-box .newsletter-input-container {
    display: flex !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    border-radius: 30px !important;
    padding: 6px 6px 6px 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
}
#box_newsletter .newsletter-input-container:focus-within, .custom-newsletter-box .newsletter-input-container:focus-within {
    border-color: #04BBFF !important;
    background: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 0 15px rgba(4, 187, 255, 0.3) !important;
}

#box_newsletter .newsletter-input, .custom-newsletter-box .newsletter-input {
    flex-grow: 1;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: #ffffff !important;
    font-size: 14px;
    padding: 10px 15px !important;
    width: 100%;
}
#box_newsletter .newsletter-input::placeholder, .custom-newsletter-box .newsletter-input::placeholder {
    color: rgba(255,255,255,0.4);
}

#box_newsletter .btn-red, #box_newsletter button[type="submit"],
.custom-newsletter-box .btn-red, .custom-newsletter-box button[type="submit"] {
    background: linear-gradient(135deg, #7b00ff, #04BBFF) !important;
    border: none !important;
    color: #ffffff !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
    box-shadow: 0 4px 15px rgba(123, 0, 255, 0.35) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}
#box_newsletter button[type="submit"] img,
#box_newsletter button[type="submit"] span,
.custom-newsletter-box button[type="submit"] img,
.custom-newsletter-box button[type="submit"] span {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    font-size: 0 !important;
}
#box_newsletter .btn-red::after, #box_newsletter button[type="submit"]::after,
.custom-newsletter-box .btn-red::after, .custom-newsletter-box button[type="submit"]::after {
    content: '' !important;
    display: block !important;
    width: 19px !important;
    height: 19px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='22' y1='2' x2='11' y2='13'%3E%3C/line%3E%3Cpolygon points='22 2 15 22 11 13 2 9 22 2'%3E%3C/polygon%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    margin: 0 !important;
    position: absolute !important;
    top: 50% !important;
    left: 48% !important;
    transform: translate(-50%, -50%) !important;
}
#box_newsletter .btn-red:hover, #box_newsletter button[type="submit"]:hover,
.custom-newsletter-box .btn-red:hover, .custom-newsletter-box button[type="submit"]:hover {
    opacity: 0.92 !important;
    transform: scale(1.05) !important;
}


/* --- 8. BOTTOM TRUST BAR --- */
.custom-trust-bar {
    background: #f8f9fa;
    padding: 35px 0;
    border-top: 1px solid #e1e4e8;
    border-bottom: 1px solid #e1e4e8;
}

.trust-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}
@media (max-width: 980px) {
    .trust-container {
        flex-wrap: wrap;
        justify-content: center;
        gap: 30px;
    }
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
    min-width: 220px;
}
.trust-item .trust-icon {
    color: #4a5568;
    width: 32px;
    height: 32px;
    display: block;
    flex-shrink: 0;
}
.trust-item .trust-text {
    display: flex;
    flex-direction: column;
}
.trust-item .trust-text strong {
    font-size: 13px;
    font-weight: bold;
    color: #1a1a1a;
    margin-bottom: 2px;
    text-transform: uppercase;
}
.trust-item .trust-text span {
    font-size: 11px;
    color: #718096;
}


/* --- 9. CUSTOM FOOTER DESIGN --- */
.footer-custom {
    background: #070913; /* Elegant deep black-blue footer background */
    color: #ffffff;
    padding: 60px 0 0 0;
    font-family: inherit;
    border-top: 3px solid #7b00ff;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px 40px 15px;
    flex-wrap: wrap;
}

.footer-col {
    flex: 1;
    min-width: 180px;
}

.brand-col {
    flex: 1.5;
    min-width: 250px;
}

.footer-logo {
    display: block;
    margin-bottom: 20px;
}
.footer-logo img {
    max-height: 40px;
    width: auto;
}

.brand-desc {
    font-size: 13px;
    line-height: 1.6;
    color: #94a3b8;
    margin-bottom: 25px;
}

.social-icons {
    display: flex;
    gap: 12px;
}

.social-icon {
    background: rgba(255,255,255,0.05);
    color: #ffffff !important;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.2s ease;
    text-decoration: none !important;
    border: 1px solid rgba(255,255,255,0.08);
}
.social-icon:hover {
    background: #7b00ff;
    color: #ffffff !important;
    transform: translateY(-3px);
    border-color: #7b00ff;
}

.footer-title {
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 8px;
}
.footer-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background: #04BBFF;
}

.footer-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-links-list li {
    margin-bottom: 12px;
}
.footer-links-list li a {
    color: #94a3b8 !important;
    font-size: 13px;
    text-decoration: none !important;
    transition: all 0.2s ease;
}
.footer-links-list li a:hover {
    color: #04BBFF !important;
    padding-left: 4px;
}

.footer-contact-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}
.footer-contact-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    font-size: 13px;
    color: #94a3b8;
}
.footer-contact-list li a {
    color: #94a3b8 !important;
    text-decoration: none !important;
    transition: color 0.2s;
}
.footer-contact-list li a:hover {
    color: #04BBFF !important;
}

.contact-icon {
    width: 16px;
    height: 16px;
    color: #04BBFF;
    flex-shrink: 0;
}

.footer-contact-btn {
    display: inline-block;
    background: #ffffff;
    color: #070913 !important;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 10px 25px;
    border-radius: 20px;
    text-decoration: none !important;
    transition: all 0.2s ease;
    border: 1px solid #ffffff;
    letter-spacing: 0.5px;
    text-align: center;
    width: 100%;
    max-width: 180px;
}
.footer-contact-btn:hover {
    background: transparent;
    color: #ffffff !important;
}

/* Footer Copyright Bottom Bar */
.footer-bottom {
    background: #04050a;
    padding: 25px 0;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.footer-bottom-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    flex-wrap: wrap;
    gap: 15px;
}
@media (max-width: 768px) {
    .footer-bottom-container {
        flex-direction: column;
        text-align: center;
    }
}

.copyright {
    font-size: 12px;
    color: #64748b;
}

.footer-bottom-links {
    display: flex;
    gap: 20px;
}
.footer-bottom-links a {
    color: #64748b !important;
    font-size: 12px;
    text-decoration: none !important;
    transition: color 0.2s;
}
.footer-bottom-links a:hover {
    color: #ffffff !important;
}

/* Back to top button styling */
.up {
    position: fixed !important;
    bottom: 30px !important;
    left: 30px !important;
    right: auto !important;
    width: 46px !important;
    height: 46px !important;
    z-index: 9999 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.up a {
    background: #7b00ff !important;
    color: #ffffff !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(123, 0, 255, 0.4) !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    text-decoration: none !important;
}
.up a::before {
    font-size: 18px !important;
    line-height: 1 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    width: auto !important;
}
.up a:hover {
    background: #04BBFF !important;
    transform: translateY(-3px) scale(1.05) !important;
    box-shadow: 0 6px 18px rgba(4, 187, 255, 0.5) !important;
}

/* ----------------------------------------------------
   RESPONSIVE DESIGN CORRECTIONS
   ---------------------------------------------------- */
@media (max-width: 980px) {
    .header-container {
        flex-direction: column;
        gap: 15px;
    }
    .header-search {
        margin: 10px 0;
        width: 100%;
        max-width: 100%;
    }
    .menu-list {
        justify-content: center;
        height: auto;
        padding: 10px 0;
        flex-wrap: wrap;
        gap: 15px;
    }
    .hero-container {
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }
    .hero-title {
        font-size: 38px;
    }
    .hero-features {
        justify-content: center;
    }
}

/* ==========================================================================
   ELEGANT & MODERN CATEGORY PAGE STYLING (PODSTRONA KATEGORII)
   ========================================================================== */

/* 1. Ścieżka nawigacyjna (Breadcrumbs) */
.breadcrumbs,
#breadcrumbs,
.breadcrumbs.large {
    background: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 12px 0 !important;
    margin-bottom: 25px !important;
}

.breadcrumbs .innerbreadcrumbs,
#breadcrumbs .innerbreadcrumbs {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.breadcrumbs .breadcrumb-home,
.breadcrumbs a,
.breadcrumbs .path a {
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    transition: color 0.2s ease !important;
}

.breadcrumbs a:hover,
.breadcrumbs .path a:hover {
    color: #04BBFF !important;
}

.breadcrumbs .path {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.breadcrumbs .path li {
    display: inline-flex !important;
    align-items: center !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #94a3b8 !important;
    font-size: 13px !important;
}

.breadcrumbs .path li .raq {
    margin-right: 8px !important;
    color: #cbd5e1 !important;
    font-size: 14px !important;
}

.breadcrumbs .path li.last span,
.breadcrumbs .path li:last-child span {
    color: #0f172a !important;
    font-weight: 700 !important;
}

/* 2. Filtry górne ("Opcje przeglądania" / #box_filter / #box_productfilter) */
#box_filter,
#box_productfilter,
.category-filters,
.filter.category-filters,
.sort-and-view {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    padding: 24px 28px !important;
    margin-bottom: 30px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
    position: relative !important;
    overflow: visible !important;
    z-index: 500 !important;
}

#box_filter .innerbox,
#box_productfilter .innerbox,
#box_filter .dropdown,
#box_productfilter .dropdown,
#box_filter .drop,
#box_productfilter .drop,
#box_filter .options,
#box_productfilter .options,
#box_filter .group,
#box_productfilter .group,
#box_filter .select-custom,
#box_productfilter .select-custom {
    z-index: 1000 !important;
}

#box_filter .boxhead,
#box_productfilter .boxhead,
.category-filters .boxhead {
    border-bottom: 2px solid #f8fafc !important;
    margin-bottom: 20px !important;
    padding-bottom: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: left !important;
}

#box_filter .boxhead span,
#box_productfilter .boxhead span,
.category-filters .boxhead span,
#box_filter .boxhead h3,
#box_productfilter .boxhead h3 {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.4px !important;
    margin: 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: left !important;
}

#box_filter .innerbox,
#box_productfilter .innerbox,
.category-filters .innerbox {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 101 !important;
}

/* Pola w opcjach przeglądania (1. Sortowanie, 2. Cena, 3. Producent) */
@media (min-width: 769px) {
    #box_filter .innerbox > .multiselect,
    #box_filter .innerbox > .group,
    #box_filter .innerbox > .group-filter,
    #box_filter .innerbox > div {
        flex: 1 1 200px !important;
        min-width: 180px !important;
        max-width: 32% !important;
        width: auto !important;
        margin: 0 !important;
        float: none !important;
        box-sizing: border-box !important;
        position: relative !important;
        overflow: visible !important;
        z-index: 105 !important;
    }
}

@media (max-width: 768px) {
    #box_filter .innerbox > .multiselect,
    #box_filter .innerbox > .group,
    #box_filter .innerbox > .group-filter,
    #box_filter .innerbox > div {
        max-width: 100% !important;
        flex: 1 1 100% !important;
        width: 100% !important;
    }
}

/* Kolejność: 1. Sortowanie (Domyślne) [lewa], 2. Cena [środek], 3. Producent [prawa] */
#box_filter .innerbox > *,
#box_productfilter .innerbox > * {
    order: 10 !important;
}

#box_filter #filter_custom_sort,
#box_filter .group-sort-custom,
#box_productfilter #filter_custom_sort,
#box_productfilter .group-sort-custom {
    order: 1 !important;
    z-index: 30 !important;
}

#box_filter [id*="price"],
#box_filter [data-provider*="Price"],
#box_filter #filter_price,
#box_filter .pricegroup,
#box_productfilter .pricegroup,
#box_productfilter [id*="price"] {
    order: 2 !important;
    z-index: 20 !important;
}

#box_filter [id*="producer"],
#box_filter [id*="producers"],
#box_filter [data-provider*="Producer"],
#box_filter #filter_producer,
#box_filter .producergroup,
#box_productfilter .producergroup,
#box_productfilter [id*="producer"] {
    order: 3 !important;
    z-index: 10 !important;
}

/* Podniesienie aktywnego/otwartego filtra ponad pozostałe przyciski */
#box_filter .innerbox > div:hover,
#box_filter .innerbox > .multiselect:hover,
#box_filter .innerbox > div:focus-within,
#box_filter .innerbox > .multiselect:focus-within,
#box_filter .innerbox > div.selected,
#box_filter .innerbox > .multiselect.selected,
#box_filter .innerbox > div.active-drop,
#box_filter .innerbox > .multiselect.active-drop,
#box_filter .innerbox > div:has(.selected),
#box_filter .innerbox > div:has(.active-drop),
#box_filter .innerbox > div:has([aria-expanded="true"]),
#box_filter .innerbox > .multiselect:has([aria-expanded="true"]),
#box_filter .innerbox > div:has(ul:not([style*="display: none"])),
#box_filter .innerbox > div:has(ul:not([style*="display:none"])),
#box_filter #filter_custom_sort.selected,
#box_filter #filter_custom_sort.active-drop,
#box_productfilter .innerbox > div:hover,
#box_productfilter .innerbox > .multiselect:hover,
#box_productfilter .innerbox > div:focus-within,
#box_productfilter .innerbox > .multiselect:focus-within,
#box_productfilter .innerbox > div.selected,
#box_productfilter .innerbox > .multiselect.selected,
#box_productfilter .innerbox > div.active-drop,
#box_productfilter .innerbox > .multiselect.active-drop {
    z-index: 1000 !important;
}

/* Ukrycie filtrów Nowość i Promocje */
#box_filter [id*="news"],
#box_filter [id*="new"],
#box_filter [data-provider*="New"],
#box_filter [id*="novelties"],
#box_filter [id*="promo"],
#box_filter [id*="promotion"],
#box_filter [data-provider*="Promo"] {
    display: none !important;
}

/* Pigułkowy styl nagłówków filtrów (.multiselect) */
#box_filter .multiselect {
    height: 48px !important;
    line-height: 46px !important;
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 24px !important;
    padding: 0 38px 0 20px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    cursor: pointer !important;
    margin: 0 !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-sizing: border-box !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2304BBFF' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 18px center !important;
    background-size: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

#box_filter .multiselect > span {
    padding: 0 !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    display: inline-block !important;
    width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#box_filter .multiselect:hover,
#box_filter .multiselect.selected {
    border-color: #04BBFF !important;
    background-color: #ffffff !important;
    color: #04BBFF !important;
    box-shadow: 0 4px 16px rgba(4, 187, 255, 0.18) !important;
    transform: translateY(-2px) !important;
}

#box_filter .multiselect:hover > span,
#box_filter .multiselect.selected > span {
    color: #04BBFF !important;
}

/* Rozwijana lista (dropdown) po kliknięciu na filtr */
#box_filter .multiselect ul {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-width: 250px !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 18px !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14) !important;
    padding: 16px !important;
    z-index: 99999 !important;
    max-height: 320px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

#box_filter .multiselect ul li {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 4px 0 !important;
    border-radius: 8px !important;
    line-height: normal !important;
    background: transparent !important;
}

#box_filter .multiselect ul li a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 9px 12px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #334155 !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

#box_filter .multiselect ul li a:hover,
#box_filter .multiselect ul li.selected a {
    background-color: rgba(4, 187, 255, 0.08) !important;
    color: #04BBFF !important;
}

/* Pola wprowadzania ceny (od - do) w dropdownie ceny - nowoczesny, czytelny układ */
#box_filter .multiselect ul li.priceinput,
.group-filter .multiselect ul li.priceinput,
li.priceinput {
    padding: 6px 4px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    float: none !important;
}

#box_filter .multiselect ul li.priceinput br,
li.priceinput br {
    display: none !important;
}

/* Wiersz z etykietą i polem input */
#box_filter .multiselect ul li.priceinput .price-row,
#box_filter .multiselect ul li.priceinput .fromto-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
}

#box_filter .multiselect ul li.priceinput .fromto,
li.priceinput .fromto {
    display: inline-block !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    min-width: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

#box_filter .multiselect ul li.priceinput input[type="text"],
#box_filter .multiselect ul li.priceinput #filterprice1,
#box_filter .multiselect ul li.priceinput #filterprice2,
li.priceinput input[type="text"],
#filterprice1,
#filterprice2 {
    display: inline-block !important;
    width: calc(100% - 44px) !important;
    height: 38px !important;
    line-height: 38px !important;
    border-radius: 10px !important;
    border: 1.5px solid #e2e8f0 !important;
    background: #f8fafc !important;
    padding: 0 12px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    box-sizing: border-box !important;
    outline: none !important;
    margin: 0 !important;
    float: right !important;
    transition: all 0.2s ease !important;
}

#box_filter .multiselect ul li.priceinput input[type="text"]:focus,
#box_filter .multiselect ul li.priceinput #filterprice1:focus,
#box_filter .multiselect ul li.priceinput #filterprice2:focus,
li.priceinput input:focus,
#filterprice1:focus,
#filterprice2:focus {
    border-color: #04BBFF !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(4, 187, 255, 0.15) !important;
}

#box_filter .multiselect ul li.priceinput .bottombuttons,
li.priceinput .bottombuttons {
    width: 100% !important;
    margin-top: 6px !important;
    padding: 0 !important;
    clear: both !important;
    float: none !important;
}

#box_filter .multiselect ul li.priceinput .btn,
#box_filter .multiselect ul li.priceinput button#filterprice {
    width: 100% !important;
    height: 38px !important;
    background: linear-gradient(135deg, #7b00ff 0%, #04BBFF 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    box-shadow: 0 4px 12px rgba(123, 0, 255, 0.25) !important;
    transition: all 0.25s ease !important;
}

#box_filter .multiselect ul li.priceinput .btn:hover,
#box_filter .multiselect ul li.priceinput button#filterprice:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(123, 0, 255, 0.4) !important;
    filter: brightness(1.06) !important;
}

#box_filter .multiselect ul li.priceinput .btn .px1,
#box_filter .multiselect ul li.priceinput .btn img {
    display: none !important;
}

/* Stylizacja selecta sortowania (Domyślne) wewnątrz Opcji Przeglądania */
#box_filter #filter_custom_sort,
#box_productfilter #filter_custom_sort {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
}

#box_filter #filter_custom_sort:hover,
#box_productfilter #filter_custom_sort:hover {
    transform: translateY(-2px) !important;
}

#box_filter .sort-and-view,
#box_filter .sortlinks,
#box_filter .form-sort,
#box_productfilter .sort-and-view,
#box_productfilter .sortlinks,
#box_productfilter .form-sort,
#filter_custom_sort .sort-and-view,
#filter_custom_sort .sortlinks,
#filter_custom_sort .form-sort {
    margin: 0 !important;
    width: 100% !important;
    display: block !important;
}

#box_filter .gotourl,
#box_filter select.gotourl,
#box_productfilter .gotourl,
#box_productfilter select.gotourl,
#filter_custom_sort select,
#filter_custom_sort select.gotourl {
    display: block !important;
    width: 100% !important;
    height: 48px !important;
    background-color: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 24px !important;
    padding: 0 38px 0 20px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2304BBFF' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 18px center !important;
    background-size: 14px !important;
    outline: none !important;
    box-sizing: border-box !important;
}

#box_filter .gotourl:hover,
#box_filter .gotourl:focus,
#box_productfilter .gotourl:hover,
#box_productfilter .gotourl:focus,
#filter_custom_sort select:hover,
#filter_custom_sort select:focus {
    background-color: #ffffff !important;
    border-color: #04BBFF !important;
    color: #04BBFF !important;
    box-shadow: 0 4px 16px rgba(4, 187, 255, 0.18) !important;
}

/* Ukrycie oryginalnego kontenera sortowania pod nagłówkiem kategorii, ale NIE gdy jest w #filter_custom_sort */
.centercol .boxhead .sort-and-view:not(#filter_custom_sort .sort-and-view) {
    display: none !important;
}

/* 3. Pasek nagłówka kategorii i sortowanie (.categoryhead / .sort-and-mode) */
.centercol .boxhead,
.categoryhead,
body.shop_product_list .s-grid-9 .boxhead,
body.shop_product_list #center .boxhead,
#box_mainproducts .boxhead {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    position: relative !important;
    z-index: 1 !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
    padding-bottom: 14px !important;
    border-bottom: 2px solid #f1f5f9 !important;
}

.centercol .boxhead h1,
.categoryhead h1,
.category-name,
body.shop_product_list .s-grid-9 .boxhead h1,
body.shop_product_list #center .boxhead h1,
#box_mainproducts .boxhead h1,
#box_mainproducts .category-name {
    font-size: 26px !important;
    font-weight: 900 !important;
    color: #0f172a !important;
    letter-spacing: -0.6px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: left !important;
    display: block !important;
    width: 100% !important;
}

/* Sortowanie po lewej stronie */
.sort-and-view,
.sort-and-mode,
.centercol .sort-and-mode,
.sortlinks {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 12px auto 0 0 !important; /* aligned to the left */
    position: relative !important;
    left: 0 !important;
    right: auto !important;
}

.sort-and-mode select,
.sortlinks select,
.form-sort select,
.sort-and-view select,
.gotourl {
    height: 42px !important;
    background-color: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 22px !important;
    padding: 0 36px 0 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2304BBFF' stroke-width='2.2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 14px !important;
}

.sort-and-mode select:hover,
.sort-and-mode select:focus,
.sortlinks select:hover,
.sortlinks select:focus,
.form-sort select:hover,
.gotourl:hover,
.gotourl:focus {
    border-color: #04BBFF !important;
    color: #04BBFF !important;
    outline: none !important;
    box-shadow: 0 3px 12px rgba(4, 187, 255, 0.15) !important;
    transform: translateY(-1px) !important;
}

/* 4. Główna siatka produktów w kategorii (Center column) */
.centercol .products.viewphot,
.centercol .products {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)) !important;
    gap: 24px !important;
    margin: 20px 0 40px 0 !important;
    width: 100% !important;
}

/* Pojedyncza nowoczesna karta produktu */
.centercol .products.viewphot .product,
.centercol .products .product {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    float: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    background: #ffffff !important;
    border: 1px solid #eaebf0 !important;
    border-radius: 18px !important;
    padding: 18px !important;
    box-sizing: border-box !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
    min-height: 380px !important;
}

.centercol .products.viewphot .product:hover,
.centercol .products .product:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 16px 36px rgba(4, 187, 255, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    border-color: #04BBFF !important;
}

/* Zdjęcie produktu */
.centercol .products.viewphot .product .prodimage,
.centercol .products .product .boximgsize {
    width: 100% !important;
    height: 190px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 14px !important;
    overflow: hidden !important;
    position: relative !important;
}

.centercol .products.viewphot .product .prodimage img,
.centercol .products .product .boximgsize img {
    max-width: 100% !important;
    max-height: 180px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.centercol .products.viewphot .product:hover .prodimage img,
.centercol .products .product:hover .boximgsize img {
    transform: scale(1.08) !important;
}

/* Tytuł produktu w kategoriach */
.centercol .products.viewphot .product .productnamewrap,
.centercol .products.viewphot .product .productname,
.centercol .products .product .productnamewrap,
.centercol .products .product .productname,
.centercol .products .product .prodname {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    color: #1e293b !important;
    text-decoration: none !important;
    margin: 0 auto 12px auto !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    height: 38px !important;
    max-height: 38px !important;
    width: 100% !important;
    text-align: center !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    word-wrap: normal !important;
    transition: color 0.2s ease !important;
}

.centercol .products.viewphot .product:hover .productname,
.centercol .products .product:hover .productname {
    color: #04BBFF !important;
}

/* Dolna linia ceny i koszyka - wyśrodkowana w kategoriach */
.centercol .products.viewphot .product .price,
.centercol .products .product .price,
.products.viewphot .product .price,
.products .product .price,
#box_mainproducts .product .price {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: baseline !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 8px !important;
    margin-top: auto !important;
    padding-top: 12px !important;
    border-top: 1px solid #f1f5f9 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 34px !important;
}

/* Ukrycie napisów "Cena:" oraz zdublowanej ceny regularnej */
.centercol .products.viewphot .product .price > span,
.centercol .products .product .price > span,
.products.viewphot .product .price > span,
.products .product .price > span,
.product .price > span:first-child,
.product .price .price__regular {
    display: none !important;
}

/* Wyśrodkowanie wiersza cen (zwykła oraz promocyjna) */
.centercol .products.viewphot .product .price p,
.centercol .products.viewphot .product .price p.promo-price-row,
.centercol .products .product .price p,
.centercol .products .product .price p.promo-price-row,
.products.viewphot .product .price p,
.products.viewphot .product .price p.promo-price-row,
.products .product .price p,
.products .product .price p.promo-price-row,
.centercol .products.viewphot .product .price > div,
.centercol .products .product .price > div,
.products .product .price > div {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 8px !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

.centercol .products.viewphot .product .price em,
.centercol .products .product .price em,
.products.viewphot .product .price em,
.products .product .price em,
.product .price em {
    font-size: 19px !important;
    font-weight: 900 !important;
    color: #04BBFF !important;
    font-style: normal !important;
    letter-spacing: -0.3px !important;
    text-align: center !important;
    display: inline-block !important;
    margin: 0 !important;
    float: none !important;
}

/* Category Listing - RED PROMO PRICE */
.centercol .products.viewphot .product .price em.color,
.centercol .products.viewphot .product .price em.promo-price,
.centercol .products .product .price em.color,
.centercol .products .product .price em.promo-price,
.products.viewphot .product .price em.color,
.products.viewphot .product .price em.promo-price,
.products .product .price em.color,
.products .product .price em.promo-price {
    color: #ef4444 !important;
    font-weight: 900 !important;
}

.centercol .products.viewphot .product .price del,
.centercol .products.viewphot .product .price .promo-old-price,
.centercol .products.viewphot .product .price span.promo-old-price,
.centercol .products .product .price del,
.centercol .products .product .price .promo-old-price,
.products.viewphot .product .price del,
.products.viewphot .product .price .promo-old-price,
.products .product .price del,
.products .product .price .promo-old-price {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #94a3b8 !important;
    text-decoration: line-through !important;
    margin: 0 !important;
    text-align: center !important;
    display: inline-block !important;
    float: none !important;
}

.centercol .products.viewphot .product .price .price__omnibus,
.products.viewphot .product .price .price__omnibus,
.products .product .price .price__omnibus {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    margin: 4px auto 0 auto !important;
    font-size: 11.5px !important;
    color: #94a3b8 !important;
    float: none !important;
}

/* Przycisk koszyka na karcie w kategoriach */
.centercol .products.viewphot .product form.basket,
.centercol .products .product form.basket {
    width: 100% !important;
    margin: 10px 0 0 0 !important;
}

.centercol .products.viewphot .product .addtobasket,
.centercol .products .product .addtobasket,
.centercol .products.viewphot .product button.addtobasket {
    width: 100% !important;
    max-width: 100% !important;
    height: 44px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #7b00ff 0%, #04BBFF 50%, #7b00ff 100%) !important;
    background-size: 200% 100% !important;
    background-position: 0% 0% !important;
    color: #ffffff !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(123, 0, 255, 0.28) !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    transition: background-position 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s ease, box-shadow 0.25s ease !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    position: static !important;
    line-height: 1 !important;
}

.centercol .products.viewphot .product .addtobasket:hover,
.centercol .products .product .addtobasket:hover,
.centercol .products.viewphot .product button.addtobasket:hover {
    background-position: 100% 0% !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 8px 24px rgba(4, 187, 255, 0.45) !important;
    border-color: transparent !important;
    color: #ffffff !important;
}

.centercol .products.viewphot .product .addtobasket:active,
.centercol .products .product .addtobasket:active,
.centercol .products.viewphot .product button.addtobasket:active {
    transform: translateY(0) scale(0.98) !important;
    box-shadow: 0 2px 8px rgba(123, 0, 255, 0.3) !important;
}

/* 5. Lewy sidebar (.leftcol / aside) */
.leftcol,
.leftcol.s-grid-3 {
    box-sizing: border-box !important;
}

/* Każdy boks w sidebarze jako nowoczesna biała karta */
.leftcol .box {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 18px 20px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
    overflow: hidden !important;
}

.leftcol .box .boxhead,
.leftcol .boxhead {
    font-size: 14px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    color: #0f172a !important;
    margin: 0 0 14px 0 !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid #f1f5f9 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.leftcol .box .boxhead span,
.leftcol .boxhead span,
.leftcol .box .boxhead h3,
.leftcol .boxhead h3 {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Drzewo kategorii w lewym sidebarze (#box_menu) */
.leftcol #box_menu .innerbox,
.leftcol #box_menu ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.leftcol #box_menu li {
    list-style: none !important;
    margin-bottom: 3px !important;
    padding: 0 !important;
    border: none !important;
}

.leftcol #box_menu li a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 9px 12px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    text-decoration: none !important;
    border-radius: 10px !important;
    transition: all 0.2s ease !important;
}

.leftcol #box_menu li a:hover {
    background-color: #f1f5f9 !important;
    color: #04BBFF !important;
    padding-left: 16px !important;
}

/* Aktywna kategoria */
.leftcol #box_menu li.current > a,
.leftcol #box_menu li.active > a {
    background: linear-gradient(90deg, rgba(4, 187, 255, 0.12), rgba(123, 0, 255, 0.04)) !important;
    color: #0284c7 !important;
    font-weight: 800 !important;
    border-left: 3px solid #04BBFF !important;
    border-radius: 0 10px 10px 0 !important;
}

/* Podkategorie (2x2x2, 3x3x3, 4x4x4...) */
.leftcol #box_menu li.has-submenu > a {
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important;
}

.leftcol #box_menu li .toggle-submenu {
    font-size: 12px !important;
    color: #64748b !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease !important;
    margin-left: 8px !important;
    padding: 4px 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}

.leftcol #box_menu li.expanded > a .toggle-submenu,
.leftcol #box_menu li.expanded > .toggle-submenu {
    transform: rotate(180deg) !important;
    color: #04BBFF !important;
}

.leftcol #box_menu li ul {
    padding-left: 12px !important;
    margin: 4px 0 6px 8px !important;
    border-left: 2px solid #e2e8f0 !important;
    transition: all 0.3s ease !important;
}

.leftcol #box_menu li ul li a {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    padding: 6px 10px !important;
}

.leftcol #box_menu li ul li a:hover {
    color: #04BBFF !important;
    background: #f8fafc !important;
}

/* Moduły produktowe i slidery w lewym sidebarze (Nowości, Bestsellery, Zestawy) */
.leftcol .products,
.leftcol .products.viewphot,
.leftcol .productlist,
.leftcol .slider-wrapper {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    height: auto !important;
}

.leftcol .box.slider {
    position: relative !important;
    overflow: visible !important;
}

.leftcol .box.slider .innerbox {
    overflow: hidden !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
}

.leftcol .box.slider .slider-wrap {
    display: block !important;
    position: relative !important;
    white-space: nowrap !important;
    font-size: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: height 0.3s ease;
}

.leftcol .product:not(.slider .product):not(.slider-wrap .product),
.leftcol .products .product:not(.slider .product):not(.slider-wrap .product),
.leftcol .products.viewphot .product:not(.slider .product):not(.slider-wrap .product) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    float: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-align: left !important;
    padding: 16px 12px !important;
    margin: 0 0 14px 0 !important;
    background: #ffffff !important;
    border: 1px solid #eef1f6 !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
    min-height: unset !important;
    height: auto !important;
    position: relative !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.25s ease !important;
}

.leftcol .slider .product,
.leftcol .box.slider .product,
.leftcol .slider .slider-wrap .product,
.leftcol .box.slider .slider-wrap .product,
.rightcol .slider .product,
.rightcol .box.slider .product,
.rightcol .slider .slider-wrap .product,
.rightcol .box.slider .slider-wrap .product,
.shop_basket .leftcol .slider .product,
.shop_basket .leftcol .box.slider .product {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;
    vertical-align: top !important;
    white-space: normal !important;
    font-size: 14px !important;
    margin: 0 !important;
    padding: 16px 12px !important;
    background: #ffffff !important;
    border: 1px solid #eef1f6 !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
    min-height: unset !important;
    position: relative !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
    width: 238px !important;
    max-width: 238px !important;
    min-width: 0 !important;
}

@media (max-width: 1200px) and (min-width: 981px) {
    .leftcol .slider .product,
    .leftcol .box.slider .product,
    .leftcol .slider .slider-wrap .product,
    .leftcol .box.slider .slider-wrap .product,
    .rightcol .slider .product,
    .rightcol .box.slider .product,
    .rightcol .slider .slider-wrap .product,
    .rightcol .box.slider .slider-wrap .product,
    .shop_basket .leftcol .slider .product,
    .shop_basket .leftcol .box.slider .product {
        width: 178px !important;
        max-width: 178px !important;
    }
}

.leftcol .product:hover {
    background: #ffffff !important;
    border-color: #04BBFF !important;
    box-shadow: 0 6px 18px rgba(4, 187, 255, 0.12) !important;
    transform: translateY(-2px) !important;
}

.leftcol .product .boximgsize,
.leftcol .product .prodimage {
    width: 100% !important;
    height: 140px !important;
    min-height: 140px !important;
    max-height: 140px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 10px auto !important;
    position: relative !important;
    overflow: hidden !important;
}

.leftcol .product .boximgsize img,
.leftcol .product .prodimage img {
    max-height: 130px !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    display: block !important;
}

.leftcol .product::after {
    display: none !important;
    content: none !important;
}

.leftcol .product .productname,
.leftcol .product .prodname,
.leftcol .product .productnamewrap {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    text-decoration: none !important;
    line-height: 1.35 !important;
    margin-bottom: 6px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    height: 34px !important;
    max-height: 34px !important;
    width: 100% !important;
    text-align: center !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    word-wrap: normal !important;
}

.leftcol .product .price {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #04BBFF !important;
    margin-bottom: 6px !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    border: none !important;
    padding: 0 !important;
}

.leftcol .product .price em {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #04BBFF !important;
    text-align: center !important;
}

.leftcol .product form.basket {
    width: 100% !important;
    margin: 8px auto 0 auto !important;
}

.leftcol .product .addtobasket,
.leftcol .product button.addtobasket {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 38px !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #7b00ff 0%, #04BBFF 50%, #7b00ff 100%) !important;
    background-size: 200% 100% !important;
    background-position: 0% 0% !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border: none !important;
    box-shadow: 0 3px 12px rgba(123, 0, 255, 0.25) !important;
    padding: 0 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    transition: background-position 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s ease, box-shadow 0.25s ease !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
}

.leftcol .product .addtobasket span,
.leftcol .product button.addtobasket span {
    display: inline-block !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.leftcol .product .addtobasket:hover,
.leftcol .product button.addtobasket:hover {
    background-position: 100% 0% !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 6px 18px rgba(4, 187, 255, 0.4) !important;
    border-color: transparent !important;
    color: #ffffff !important;
}

.leftcol .product .addtobasket:active,
.leftcol .product button.addtobasket:active {
    transform: translateY(0) scale(0.98) !important;
    box-shadow: 0 2px 6px rgba(123, 0, 255, 0.3) !important;
}

/* Strzałki nawigacji slidera w sidebarze */
.leftcol .slider .slider-nav-left,
.leftcol .slider .slider-nav-right,
.leftcol .box.slider .slider-nav-left,
.leftcol .box.slider .slider-nav-right {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 32px !important;
    height: 32px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12) !important;
    cursor: pointer !important;
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
    opacity: 0.9;
}

.leftcol .slider .slider-nav-left:hover,
.leftcol .slider .slider-nav-right:hover,
.leftcol .box.slider .slider-nav-left:hover,
.leftcol .box.slider .slider-nav-right:hover {
    background: #04BBFF !important;
    border-color: #04BBFF !important;
    color: #ffffff !important;
    opacity: 1 !important;
    transform: translateY(-50%) scale(1.1) !important;
}

.leftcol .slider .slider-nav-left,
.leftcol .box.slider .slider-nav-left {
    left: 6px !important;
}

.leftcol .slider .slider-nav-right,
.leftcol .box.slider .slider-nav-right {
    right: 6px !important;
}

.leftcol .slider .slider-nav-left::before,
.leftcol .box.slider .slider-nav-left::before {
    content: '\f104' !important;
    font-family: FontAwesome !important;
    font-size: 16px !important;
    color: #1e293b !important;
    line-height: 1 !important;
    display: block !important;
}

.leftcol .slider .slider-nav-right::before,
.leftcol .box.slider .slider-nav-right::before {
    content: '\f105' !important;
    font-family: FontAwesome !important;
    font-size: 16px !important;
    color: #1e293b !important;
    line-height: 1 !important;
    display: block !important;
}

.leftcol .slider .slider-nav-left:hover::before,
.leftcol .slider .slider-nav-right:hover::before,
.leftcol .box.slider .slider-nav-left:hover::before,
.leftcol .box.slider .slider-nav-right:hover::before {
    color: #ffffff !important;
}

/* Paczkomaty w sidebarze */
.leftcol #box_paczkomaty img,
.leftcol .box_paczkomaty img {
    border-radius: 12px !important;
    max-width: 100% !important;
    display: block !important;
    margin: 0 auto !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

/* Wyszukiwarka w sidebarze */
.leftcol #box_search input[type="text"],
.leftcol .box_search input[type="text"] {
    width: 100% !important;
    height: 40px !important;
    border-radius: 10px !important;
    border: 1.5px solid #e2e8f0 !important;
    background: #f8fafc !important;
    padding: 0 38px 0 14px !important;
    font-size: 13px !important;
    box-sizing: border-box !important;
}

.leftcol #box_search .btn,
.leftcol .box_search .btn {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    border: none !important;
    color: #64748b !important;
    cursor: pointer !important;
}

/* 5. Okno logowania / Panel użytkownika w sidebarze (#box_loginsmall) */
#box_loginsmall,
.leftcol #box_loginsmall {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    padding: 22px !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04) !important;
    margin-bottom: 25px !important;
}

#box_loginsmall .boxhead,
.leftcol #box_loginsmall .boxhead {
    border-bottom: 2px solid #f8fafc !important;
    margin-bottom: 16px !important;
    padding-bottom: 12px !important;
    text-align: left !important;
}

#box_loginsmall .boxhead span,
.leftcol #box_loginsmall .boxhead span {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
}

#box_loginsmall .innerbox,
.leftcol #box_loginsmall .innerbox {
    padding: 0 !important;
}

/* Stan zalogowany: Powitanie */
#box_loginsmall .hello,
.leftcol #box_loginsmall .hello {
    font-size: 14px !important;
    color: #64748b !important;
    margin: 0 0 16px 0 !important;
    text-align: left !important;
    line-height: 1.4 !important;
}

#box_loginsmall .hello b,
#box_loginsmall .hello strong,
.leftcol #box_loginsmall .hello b {
    color: #0f172a !important;
    font-weight: 800 !important;
    font-size: 15.5px !important;
}

/* Przycisk: Moje konto */
#box_loginsmall a.myaccount,
.leftcol #box_loginsmall a.myaccount {
    width: 100% !important;
    height: 44px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #04bbff, #009de0) !important;
    color: #ffffff !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(4, 187, 255, 0.3) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    margin-bottom: 10px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

#box_loginsmall a.myaccount:hover,
.leftcol #box_loginsmall a.myaccount:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(4, 187, 255, 0.45) !important;
    filter: brightness(1.05) !important;
}

#box_loginsmall a.myaccount span,
.leftcol #box_loginsmall a.myaccount span {
    color: #ffffff !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
}

/* Przycisk: Wyloguj */
#box_loginsmall a.logout,
.leftcol #box_loginsmall a.logout {
    width: 100% !important;
    height: 40px !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    color: #ef4444 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    margin-bottom: 0 !important;
    transition: all 0.25s ease !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

#box_loginsmall a.logout:hover,
.leftcol #box_loginsmall a.logout:hover {
    background: #fee2e2 !important;
    border-color: #fca5a5 !important;
    color: #dc2626 !important;
    transform: translateY(-1px) !important;
}

#box_loginsmall a.logout span,
.leftcol #box_loginsmall a.logout span {
    color: inherit !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

#box_loginsmall a.logout img,
#box_loginsmall a.myaccount img {
    display: none !important;
}

/* Stan niezalogowany: Pola formularza i przyciski */
#box_loginsmall label,
.leftcol #box_loginsmall label {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    margin-bottom: 4px !important;
    display: block !important;
}

#box_loginsmall input[type="text"],
#box_loginsmall input[type="email"],
#box_loginsmall input[type="password"],
.leftcol #box_loginsmall input[type="text"],
.leftcol #box_loginsmall input[type="email"],
.leftcol #box_loginsmall input[type="password"] {
    width: 100% !important;
    height: 42px !important;
    border-radius: 12px !important;
    border: 1.5px solid #e2e8f0 !important;
    background: #f8fafc !important;
    padding: 0 14px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    margin-bottom: 12px !important;
    box-sizing: border-box !important;
    outline: none !important;
    transition: all 0.2s ease !important;
}

#box_loginsmall input:focus,
.leftcol #box_loginsmall input:focus {
    border-color: #04bbff !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(4, 187, 255, 0.15) !important;
}

#box_loginsmall .btn.login,
#box_loginsmall button[type="submit"],
.leftcol #box_loginsmall .btn.login,
.leftcol #box_loginsmall button[type="submit"] {
    width: 100% !important;
    height: 44px !important;
    background: linear-gradient(135deg, #04bbff, #009de0) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 13.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-radius: 12px !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    margin-top: 4px !important;
    margin-bottom: 12px !important;
    box-shadow: 0 4px 14px rgba(4, 187, 255, 0.3) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#box_loginsmall .btn.login:hover,
#box_loginsmall button[type="submit"]:hover,
.leftcol #box_loginsmall .btn.login:hover,
.leftcol #box_loginsmall button[type="submit"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(4, 187, 255, 0.45) !important;
    filter: brightness(1.05) !important;
}

#box_loginsmall a.remind,
#box_loginsmall a.register,
.leftcol #box_loginsmall a.remind,
.leftcol #box_loginsmall a.register {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    text-decoration: none !important;
    display: block !important;
    margin-bottom: 6px !important;
    text-align: left !important;
    transition: color 0.2s ease !important;
}

#box_loginsmall a.remind:hover,
#box_loginsmall a.register:hover,
.leftcol #box_loginsmall a.remind:hover,
.leftcol #box_loginsmall a.register:hover {
    color: #04bbff !important;
    text-decoration: underline !important;
}

/* 6. Paginacja (.paginator) - idealnie okrągłe przyciski bez kresek */
.paginator,
.pagination,
.floatcenterwrap .paginator {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 45px auto 25px auto !important;
    padding: 0 !important;
    list-style: none !important;
}

.paginator li,
.pagination li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Ukrycie separatorów i kresek pionowych w paginacji */
.paginator .sep,
.pagination .sep,
.paginator .stick,
.pagination .stick,
.paginator li.stick,
.paginator li.has-stick,
.paginator li:empty,
.pagination li:empty {
    display: none !important;
    content: none !important;
}

.paginator li::before,
.paginator li::after,
.pagination li::before,
.pagination li::after {
    display: none !important;
    content: none !important;
}

.paginator a,
.paginator span,
.pagination a,
.pagination span,
.paginator .selected,
.paginator li a,
.paginator li span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 0 !important;
    margin: 0 3px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    color: #334155 !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03) !important;
    box-sizing: border-box !important;
    line-height: normal !important;
}

.paginator a:hover,
.pagination a:hover,
.paginator li a:hover {
    background: #f8fafc !important;
    border-color: #04BBFF !important;
    color: #04BBFF !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(4, 187, 255, 0.2) !important;
}

.paginator .selected span,
.paginator .selected,
.paginator .active a,
.pagination .active a,
.pagination .selected,
.paginator li.selected span,
.paginator li.selected a {
    background: linear-gradient(135deg, #7b00ff 0%, #04BBFF 100%) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 14px rgba(4, 187, 255, 0.35) !important;
}

/* ==========================================================================
   MODAL / POPUP DODANIA DO KOSZYKA NA ŚRODKU EKRANU
   ========================================================================== */
.modal,
.modal.modal-visible,
#box_productdeliveries.modal,
.modal.modal-shipping {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: 92% !important;
    max-width: 780px !important;
    min-width: 320px !important;
    min-height: auto !important;
    height: auto !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: #ffffff !important;
    border-radius: 24px !important;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.35), 0 0 1px rgba(0,0,0,0.15) !important;
    border: 1px solid #eef1f6 !important;
    padding: 32px 36px !important;
    z-index: 100005 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
}

.modal.modal-not-visible,
.modal.none,
.modal.modal-hidden {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Nagłówek modala */
.modal-header,
.modal .modal-header {
    background: transparent !important;
    padding: 0 0 18px 0 !important;
    border-bottom: 2px solid #f1f5f9 !important;
    margin-bottom: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    color: #0f172a !important;
    width: 100% !important;
    flex-shrink: 0 !important;
}

.modal-header h3,
.modal .modal-header h3,
.modal .modal-header > * {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.modal .modal-header .modal-close,
.modal-header .modal-close,
.modal-close {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    border-radius: 50% !important;
    background: #f1f5f9 !important;
    border: 1.5px solid #e2e8f0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: transparent !important;
    font-size: 0 !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-basis: auto !important;
    position: relative !important;
    box-sizing: border-box !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
}

.modal .modal-header .modal-close::before,
.modal-header .modal-close::before,
.modal-close::before,
.modal .modal-header .modal-close::after,
.modal-header .modal-close::after,
.modal-close::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 14px !important;
    height: 2px !important;
    background-color: #64748b !important;
    border-radius: 2px !important;
    text-indent: 0 !important;
    display: block !important;
    transition: background-color 0.2s ease !important;
}

.modal .modal-header .modal-close::before,
.modal-header .modal-close::before,
.modal-close::before {
    transform: translate(-50%, -50%) rotate(45deg) !important;
}

.modal .modal-header .modal-close::after,
.modal-header .modal-close::after,
.modal-close::after {
    transform: translate(-50%, -50%) rotate(-45deg) !important;
}

.modal-close:hover {
    background: #e2e8f0 !important;
    transform: scale(1.08) !important;
}

.modal-close:hover::before,
.modal-close:hover::after {
    background-color: #0f172a !important;
}

/* Ciało modala */
.modal-body,
.modal .modal-body {
    padding: 0 !important;
    margin: 0 0 24px 0 !important;
    width: 100% !important;
    overflow: visible !important;
    display: block !important;
}

/* Kontener produktu i podsumowania koszyka */
.ajax-basket-container,
.modal .ajax-basket-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
    align-items: stretch !important;
    width: 100% !important;
    position: static !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
}

@media (max-width: 680px) {
    .ajax-basket-container,
    .modal .ajax-basket-container {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

/* Blok dodanego produktu */
.modal .ajax-basket-container .ajax-product-block {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 18px !important;
    background: #f8fafc !important;
    border-radius: 18px !important;
    padding: 18px !important;
    border: 1.5px solid #eef1f6 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

.modal .ajax-basket-container .ajax-product-block img {
    max-height: 120px !important;
    min-height: 80px !important;
    max-width: 110px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    padding: 6px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid #f1f5f9 !important;
    flex-shrink: 0 !important;
    float: none !important;
    margin: 0 !important;
}

.modal .ajax-basket-container .ajax-product-block .ajax-product-block-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-grow: 1 !important;
    text-align: left !important;
}

.modal .ajax-basket-container .ajax-product-block .ajax-product-block-info h3 {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin: 0 !important;
    line-height: 1.35 !important;
    max-width: 100% !important;
}

.modal .ajax-basket-container .ajax-product-block .ajax-product-block-info span {
    font-size: 14px !important;
    color: #64748b !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

.modal .ajax-basket-container .ajax-product-block .ajax-product-block-info span strong {
    color: #04BBFF !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    margin-left: 4px !important;
}

/* Blok stanu koszyka (ilość + wartość) */
.ajax-cart-block,
.modal .ajax-basket-container .ajax-cart-block {
    position: static !important;
    background: #f8fafc !important;
    border-radius: 18px !important;
    padding: 22px 24px !important;
    border: 1.5px solid #eef1f6 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 12px !important;
    margin: 0 !important;
    transform: none !important;
    box-shadow: none !important;
    min-height: auto !important;
    max-height: none !important;
}

.modal .ajax-basket-container .ajax-cart-block span {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 14.5px !important;
    color: #475569 !important;
    font-weight: 600 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    border-bottom: 1px dashed #e2e8f0 !important;
    padding-bottom: 8px !important;
}

.modal .ajax-basket-container .ajax-cart-block span:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.modal .ajax-basket-container .ajax-cart-block span strong {
    font-size: 18px !important;
    color: #04BBFF !important;
    font-weight: 900 !important;
    margin-left: 8px !important;
}

/* Stopka modala z przyciskami */
.modal-footer,
.modal .modal-footer {
    padding: 20px 0 0 0 !important;
    margin: 0 !important;
    border-top: 2px solid #f1f5f9 !important;
    display: flex !important;
    width: 100% !important;
    flex-shrink: 0 !important;
}

.modal-footer .ajax-product-block,
.modal .modal-footer .ajax-product-block {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 16px !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

@media (max-width: 600px) {
    .modal-footer .ajax-product-block,
    .modal .modal-footer .ajax-product-block,
    .modal-footer,
    .modal .modal-footer {
        flex-direction: column-reverse !important;
        gap: 12px !important;
    }
}

/* Przycisk Kontynuuj zakupy w modalu */
.modal .btn,
.modal a.continue,
.modal button.continue,
.modal .modal-close-btn,
.modal-footer .ajax-product-block a.btn:not(.btn-red),
.modal .modal-footer .btn:not(.btn-red) {
    background: #f1f5f9 !important;
    border: 1.5px solid #e2e8f0 !important;
    color: #475569 !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 13px 28px !important;
    border-radius: 30px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-align: left !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
    width: auto !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    margin: 0 !important;
}

.modal .btn:hover,
.modal a.continue:hover,
.modal-footer .ajax-product-block a.btn:not(.btn-red):hover,
.modal .modal-footer .btn:not(.btn-red):hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

/* Przycisk Przejdź do koszyka / Do kasy w modalu */
.modal .btn-red,
.modal .btn.btn-red,
.modal a[href*="basket"],
.modal button.forward,
.modal .btn.forward,
.modal-footer .ajax-product-block a.btn.btn-red,
.modal .modal-footer .btn.btn-red {
    background: linear-gradient(135deg, #7b00ff 0%, #04BBFF 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    padding: 14px 32px !important;
    border-radius: 30px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(123, 0, 255, 0.35) !important;
    text-align: left !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1.2 !important;
    width: auto !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    margin: 0 !important;
}

.modal .btn-red:hover,
.modal a[href*="basket"]:hover,
.modal button.forward:hover,
.modal-footer .ajax-product-block a.btn.btn-red:hover,
.modal .modal-footer .btn.btn-red:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(123, 0, 255, 0.55) !important;
    filter: brightness(1.08) !important;
    color: #ffffff !important;
}

/* Przyciemniający overlay tła */
.mask,
.modal-overlay {
    background: rgba(5, 12, 30, 0.65) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: 10000 !important;
}

/* Responsywność strony kategorii */
@media (max-width: 980px) {
    .centercol .products.viewphot,
    .centercol .products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
}

@media (max-width: 600px) {
    .centercol .products.viewphot,
    .centercol .products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    
    .centercol .products.viewphot .product,
    .centercol .products .product {
        padding: 12px !important;
        min-height: 310px !important;
    }
    
    .centercol .products.viewphot .product .prodimage,
    .centercol .products .product .boximgsize {
        height: 135px !important;
    }
    
    .centercol .products.viewphot .product .price em,
    .centercol .products .product .price em {
        font-size: 16px !important;
    }
}
/* --- END OF CUSTOM SHOPER THEME STYLES --- */

/* =========================================
   LOGIN PAGE FIXES
========================================= */
#box_login {
    background: #ffffff !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08) !important;
    border: 1px solid #f1f5f9 !important;
    margin: 40px auto 80px auto !important;
}
#box_login .innerbox {
    padding: 40px !important;
}
#box_login .innerbox .f-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 40px !important;
}
#box_login .innerbox .f-grid-6 {
    flex: 1 1 0 !important;
    margin: 0 !important;
}
#box_login .login-inner,
#box_login .register-inner {
    position: relative !important;
    padding-bottom: 75px !important; /* Space for the button */
    display: block !important;
    height: 100% !important;
}
#box_login .login-inner fieldset,
#box_login .register-inner .register-form,
#box_login .register-inner .register-form fieldset {
    position: static !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}
#box_login .login-inner .btn.login,
#box_login .register-inner .btn.register {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    height: 52px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
}
#box_login .register-inner .btn.register {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 2px solid #e2e8f0 !important;
    box-shadow: none !important;
}
#box_login .register-inner .btn.register:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

/* =========================================
   REGISTER PAGE (SSO) FIXES
========================================= */
#box_register {
    background: #ffffff !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08) !important;
    border: 1px solid #f1f5f9 !important;
    margin: 40px auto 80px auto !important;
    max-width: 600px !important;
}
#box_register .innerbox {
    padding: 40px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}
#box_register h3 {
    text-align: left !important;
    margin-bottom: 30px !important;
    width: 100% !important;
}
#box_register .innerbox div[data-text-end] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
}
#box_register .login-form {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}
#box_register .login-form fieldset {
    width: 100% !important;
    max-width: 400px !important;
}
#box_register .login-form h4 {
    text-align: left !important;
    margin-top: 30px !important;
}
#box_register .login-form label.checkbox-wrap {
    display: flex !important;
    align-items: flex-start !important;
    text-align: left !important;
    margin-bottom: 20px !important;
    width: 100% !important;
}
#box_register .login-form label.checkbox-wrap span {
    display: block !important;
    margin-top: 2px !important;
    line-height: 1.5 !important;
    flex: 1 !important;
}

/* =========================================
   ALERTS
========================================= */
.alert {
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1) !important;
    border: none !important;
    padding: 16px 20px !important;
    font-weight: 600 !important;
    display: flex !important;
    flex-direction: row-reverse !important;
    justify-content: space-between !important;
    align-items: center !important;
}

/* =========================================
   CUSTOMER PANEL (#box_useredit, etc.)
========================================= */
#box_useredit, #box_passchange, #box_address, #box_addresses, #box_loyalty {
    background: #ffffff !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08) !important;
    border: 1px solid #f1f5f9 !important;
    margin: 40px auto 80px auto !important;
}
#box_useredit .innerbox, #box_passchange .innerbox, #box_address .innerbox, #box_addresses .innerbox, #box_loyalty .innerbox {
    padding: 40px !important;
}

/* Forms inside panel */
#box_useredit table.maindata, #box_passchange table.maindata, #box_address table.maindata, #box_addresses table.maindata,
#box_useredit table.address-handler, #box_passchange table.address-handler, #box_address table.address-handler, #box_addresses table.address-handler {
    width: 100% !important;
    border: none !important;
}
#box_useredit table tr, #box_passchange table tr, #box_address table tr, #box_addresses table tr {
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 20px !important;
}
#box_useredit table td, #box_passchange table td, #box_address table td, #box_addresses table td {
    display: block !important;
    padding: 0 !important;
    border: none !important;
    width: 100% !important;
}
#box_useredit input[type="text"], #box_passchange input[type="text"], #box_address input[type="text"], #box_addresses input[type="text"],
#box_useredit input[type="password"], #box_passchange input[type="password"],
#box_useredit select, #box_passchange select, #box_address select, #box_addresses select {
    width: 100% !important;
    height: 52px !important;
    border-radius: 12px !important;
    border: 2px solid #e2e8f0 !important;
    background: #f8fafc !important;
    padding: 0 16px !important;
    font-size: 16px !important;
}
#box_useredit .bottombuttons, #box_passchange .bottombuttons, #box_address .bottombuttons, #box_addresses .bottombuttons, #box_loyalty .bottombuttons {
    display: flex !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    margin-top: 24px !important;
}
#box_useredit .bottombuttons .btn, #box_passchange .bottombuttons .btn, #box_address .bottombuttons .btn, #box_addresses .bottombuttons .btn, #box_loyalty .bottombuttons .btn {
    height: 52px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    padding: 0 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
#box_useredit .bottombuttons .btn img, #box_passchange .bottombuttons .btn img, #box_address .bottombuttons .btn img, #box_addresses .bottombuttons .btn img, #box_loyalty .bottombuttons .btn img {
    display: none !important;
}

/* Loyalty Filter */
#box_loyalty .loyalty_filter input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
#box_loyalty .loyalty_filter label::before, #box_loyalty .loyalty_filter label::after {
    display: none !important;
}
#box_loyalty .loyalty_filter label {
    padding: 10px 24px !important;
    background: #ffffff !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 30px !important;
    cursor: pointer !important;
}
#box_loyalty .loyalty_filter input[type="radio"]:checked + label {
    background: #04bbff !important;
    border-color: #04bbff !important;
    color: #ffffff !important;
}

/* =========================================
   BASKET / CHECKOUT STEPS
========================================= */
#box_basketlist, #box_basketaddress, #box_basketstep2, #box_basketshipping, #box_basketsummary, #box_basketfinal {
    background: #ffffff !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08) !important;
    border: 1px solid #f1f5f9 !important;
    margin: 40px auto 80px auto !important;
}
#box_basketlist .innerbox, #box_basketaddress .innerbox, #box_basketstep2 .innerbox, #box_basketshipping .innerbox, #box_basketsummary .innerbox, #box_basketfinal .innerbox {
    padding: 40px !important;
}

#box_basketaddress h4.separator {
    text-align: left !important;
}

/* Basket forms side by side */
#box_basketaddress table.maindata tr, #box_basketaddress table.address-handler tr {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    margin-bottom: 24px !important;
}
#box_basketaddress table.maindata td.label, #box_basketaddress table.address-handler td.label {
    width: 30% !important;
    text-align: right !important;
    padding-right: 20px !important;
    margin-bottom: 0 !important;
}
#box_basketaddress table.maindata td.input, #box_basketaddress table.address-handler td.input {
    width: 70% !important;
}
#box_basketaddress input[type="text"], #box_basketaddress input[type="email"], #box_basketaddress select {
    width: 100% !important;
    height: 52px !important;
    border-radius: 12px !important;
    border: 2px solid #e2e8f0 !important;
    background: #f8fafc !important;
    padding: 0 16px !important;
}

/* Basket buttons */
#box_basketaddress .bottombuttons {
    display: flex !important;
    flex-direction: row-reverse !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 40px !important;
    border-top: 1px solid #f1f5f9 !important;
    padding-top: 30px !important;
}
#box_basketaddress .bottombuttons .btn {
    height: 54px !important;
    border-radius: 12px !important;
    padding: 0 40px !important;
    font-size: 18px !important;
    font-weight: 800 !important;
}
#box_basketaddress .bottombuttons .btn.summary {
    background: linear-gradient(135deg, #04bbff, #009de0) !important;
    color: #ffffff !important;
}
#box_basketaddress .bottombuttons .btn.back {
    background: #f1f5f9 !important;
    color: #475569 !important;
}

/* InPost Button */
/* Step Indicators (Moved and unified in modern checkout stepper section) */

@media (max-width: 800px) {
    #box_basketaddress table.maindata tr, #box_basketaddress table.address-handler tr { flex-direction: column !important; align-items: flex-start !important; }
    #box_basketaddress table.maindata td.label, #box_basketaddress table.address-handler td.label { width: 100% !important; text-align: left !important; }
    #box_basketaddress table.maindata td.input, #box_basketaddress table.address-handler td.input { width: 100% !important; }
    #box_basketaddress .f-row { flex-direction: column !important; }
    #box_login .innerbox .f-row { flex-direction: column !important; }
}
/* Colors assignment for solving animation */
/* Apply perfect 7-state scrambles to pieces */
.u1 { animation-name: u1-anim; }
.u2 { animation-name: u2-anim; }
.u3 { animation-name: u3-anim; }
.u4 { animation-name: u4-anim; }
.u5 { animation-name: u5-anim; }
.u6 { animation-name: u6-anim; }
.u7 { animation-name: u7-anim; }
.u8 { animation-name: u8-anim; }
.u9 { animation-name: u9-anim; }
.l1 { animation-name: l1-anim; }
.l2 { animation-name: l2-anim; }
.l3 { animation-name: l3-anim; }
.l4 { animation-name: l4-anim; }
.l5 { animation-name: l5-anim; }
.l6 { animation-name: l6-anim; }
.l7 { animation-name: l7-anim; }
.l8 { animation-name: l8-anim; }
.l9 { animation-name: l9-anim; }
.r1 { animation-name: r1-anim; }
.r2 { animation-name: r2-anim; }
.r3 { animation-name: r3-anim; }
.r4 { animation-name: r4-anim; }
.r5 { animation-name: r5-anim; }
.r6 { animation-name: r6-anim; }
.r7 { animation-name: r7-anim; }
.r8 { animation-name: r8-anim; }
.r9 { animation-name: r9-anim; }
/* Keyframes */
@keyframes u1-anim {
  0.0%, 12.0% { background: #0051BA; }
  16.7%, 28.7% { background: #0051BA; }
  33.3%, 45.3% { background: #FFFFFF; }
  50.0%, 62.0% { background: #FFFFFF; }
  66.7%, 78.7% { background: #FFFFFF; }
  83.3%, 95.3% { background: #FFFFFF; }
  100.0%, 100.0% { background: #FFFFFF; }
}
@keyframes u2-anim {
  0.0%, 12.0% { background: #0051BA; }
  16.7%, 28.7% { background: #0051BA; }
  33.3%, 45.3% { background: #FFFFFF; }
  50.0%, 62.0% { background: #FFFFFF; }
  66.7%, 78.7% { background: #FFFFFF; }
  83.3%, 95.3% { background: #FFFFFF; }
  100.0%, 100.0% { background: #FFFFFF; }
}
@keyframes u3-anim {
  0.0%, 12.0% { background: #FF5800; }
  16.7%, 28.7% { background: #FFD500; }
  33.3%, 45.3% { background: #0051BA; }
  50.0%, 62.0% { background: #C41E3A; }
  66.7%, 78.7% { background: #FFFFFF; }
  83.3%, 95.3% { background: #FFFFFF; }
  100.0%, 100.0% { background: #FFFFFF; }
}
@keyframes u4-anim {
  0.0%, 12.0% { background: #FFFFFF; }
  16.7%, 28.7% { background: #FFFFFF; }
  33.3%, 45.3% { background: #FFFFFF; }
  50.0%, 62.0% { background: #FFFFFF; }
  66.7%, 78.7% { background: #FFFFFF; }
  83.3%, 95.3% { background: #FFFFFF; }
  100.0%, 100.0% { background: #FFFFFF; }
}
@keyframes u5-anim {
  0.0%, 12.0% { background: #FFFFFF; }
  16.7%, 28.7% { background: #FFFFFF; }
  33.3%, 45.3% { background: #FFFFFF; }
  50.0%, 62.0% { background: #FFFFFF; }
  66.7%, 78.7% { background: #FFFFFF; }
  83.3%, 95.3% { background: #FFFFFF; }
  100.0%, 100.0% { background: #FFFFFF; }
}
@keyframes u6-anim {
  0.0%, 12.0% { background: #FFD500; }
  16.7%, 28.7% { background: #FFFFFF; }
  33.3%, 45.3% { background: #0051BA; }
  50.0%, 62.0% { background: #C41E3A; }
  66.7%, 78.7% { background: #FFFFFF; }
  83.3%, 95.3% { background: #FFFFFF; }
  100.0%, 100.0% { background: #FFFFFF; }
}
@keyframes u7-anim {
  0.0%, 12.0% { background: #FFFFFF; }
  16.7%, 28.7% { background: #FFFFFF; }
  33.3%, 45.3% { background: #FFFFFF; }
  50.0%, 62.0% { background: #FFFFFF; }
  66.7%, 78.7% { background: #009E60; }
  83.3%, 95.3% { background: #FFFFFF; }
  100.0%, 100.0% { background: #FFFFFF; }
}
@keyframes u8-anim {
  0.0%, 12.0% { background: #FFFFFF; }
  16.7%, 28.7% { background: #FFFFFF; }
  33.3%, 45.3% { background: #FFFFFF; }
  50.0%, 62.0% { background: #FFFFFF; }
  66.7%, 78.7% { background: #C41E3A; }
  83.3%, 95.3% { background: #FFFFFF; }
  100.0%, 100.0% { background: #FFFFFF; }
}
@keyframes u9-anim {
  0.0%, 12.0% { background: #009E60; }
  16.7%, 28.7% { background: #FFFFFF; }
  33.3%, 45.3% { background: #FFD500; }
  50.0%, 62.0% { background: #009E60; }
  66.7%, 78.7% { background: #C41E3A; }
  83.3%, 95.3% { background: #FFFFFF; }
  100.0%, 100.0% { background: #FFFFFF; }
}
@keyframes l1-anim {
  0.0%, 12.0% { background: #C41E3A; }
  16.7%, 28.7% { background: #C41E3A; }
  33.3%, 45.3% { background: #0051BA; }
  50.0%, 62.0% { background: #0051BA; }
  66.7%, 78.7% { background: #FF5800; }
  83.3%, 95.3% { background: #FF5800; }
  100.0%, 100.0% { background: #009E60; }
}
@keyframes l2-anim {
  0.0%, 12.0% { background: #C41E3A; }
  16.7%, 28.7% { background: #C41E3A; }
  33.3%, 45.3% { background: #0051BA; }
  50.0%, 62.0% { background: #0051BA; }
  66.7%, 78.7% { background: #009E60; }
  83.3%, 95.3% { background: #FF5800; }
  100.0%, 100.0% { background: #009E60; }
}
@keyframes l3-anim {
  0.0%, 12.0% { background: #FFD500; }
  16.7%, 28.7% { background: #C41E3A; }
  33.3%, 45.3% { background: #C41E3A; }
  50.0%, 62.0% { background: #FFFFFF; }
  66.7%, 78.7% { background: #009E60; }
  83.3%, 95.3% { background: #FF5800; }
  100.0%, 100.0% { background: #009E60; }
}
@keyframes l4-anim {
  0.0%, 12.0% { background: #FF5800; }
  16.7%, 28.7% { background: #FF5800; }
  33.3%, 45.3% { background: #FF5800; }
  50.0%, 62.0% { background: #FF5800; }
  66.7%, 78.7% { background: #FF5800; }
  83.3%, 95.3% { background: #009E60; }
  100.0%, 100.0% { background: #009E60; }
}
@keyframes l5-anim {
  0.0%, 12.0% { background: #009E60; }
  16.7%, 28.7% { background: #009E60; }
  33.3%, 45.3% { background: #009E60; }
  50.0%, 62.0% { background: #009E60; }
  66.7%, 78.7% { background: #009E60; }
  83.3%, 95.3% { background: #009E60; }
  100.0%, 100.0% { background: #009E60; }
}
@keyframes l6-anim {
  0.0%, 12.0% { background: #FFFFFF; }
  16.7%, 28.7% { background: #C41E3A; }
  33.3%, 45.3% { background: #C41E3A; }
  50.0%, 62.0% { background: #009E60; }
  66.7%, 78.7% { background: #009E60; }
  83.3%, 95.3% { background: #009E60; }
  100.0%, 100.0% { background: #009E60; }
}
@keyframes l7-anim {
  0.0%, 12.0% { background: #FF5800; }
  16.7%, 28.7% { background: #FF5800; }
  33.3%, 45.3% { background: #FF5800; }
  50.0%, 62.0% { background: #FF5800; }
  66.7%, 78.7% { background: #FF5800; }
  83.3%, 95.3% { background: #009E60; }
  100.0%, 100.0% { background: #009E60; }
}
@keyframes l8-anim {
  0.0%, 12.0% { background: #009E60; }
  16.7%, 28.7% { background: #009E60; }
  33.3%, 45.3% { background: #009E60; }
  50.0%, 62.0% { background: #009E60; }
  66.7%, 78.7% { background: #009E60; }
  83.3%, 95.3% { background: #009E60; }
  100.0%, 100.0% { background: #009E60; }
}
@keyframes l9-anim {
  0.0%, 12.0% { background: #FFFFFF; }
  16.7%, 28.7% { background: #009E60; }
  33.3%, 45.3% { background: #009E60; }
  50.0%, 62.0% { background: #009E60; }
  66.7%, 78.7% { background: #009E60; }
  83.3%, 95.3% { background: #009E60; }
  100.0%, 100.0% { background: #009E60; }
}
@keyframes r1-anim {
  0.0%, 12.0% { background: #C41E3A; }
  16.7%, 28.7% { background: #0051BA; }
  33.3%, 45.3% { background: #009E60; }
  50.0%, 62.0% { background: #FF5800; }
  66.7%, 78.7% { background: #FFD500; }
  83.3%, 95.3% { background: #009E60; }
  100.0%, 100.0% { background: #C41E3A; }
}
@keyframes r2-anim {
  0.0%, 12.0% { background: #C41E3A; }
  16.7%, 28.7% { background: #0051BA; }
  33.3%, 45.3% { background: #C41E3A; }
  50.0%, 62.0% { background: #009E60; }
  66.7%, 78.7% { background: #009E60; }
  83.3%, 95.3% { background: #009E60; }
  100.0%, 100.0% { background: #C41E3A; }
}
@keyframes r3-anim {
  0.0%, 12.0% { background: #FFD500; }
  16.7%, 28.7% { background: #C41E3A; }
  33.3%, 45.3% { background: #C41E3A; }
  50.0%, 62.0% { background: #009E60; }
  66.7%, 78.7% { background: #009E60; }
  83.3%, 95.3% { background: #009E60; }
  100.0%, 100.0% { background: #C41E3A; }
}
@keyframes r4-anim {
  0.0%, 12.0% { background: #0051BA; }
  16.7%, 28.7% { background: #009E60; }
  33.3%, 45.3% { background: #009E60; }
  50.0%, 62.0% { background: #FFD500; }
  66.7%, 78.7% { background: #FFD500; }
  83.3%, 95.3% { background: #C41E3A; }
  100.0%, 100.0% { background: #C41E3A; }
}
@keyframes r5-anim {
  0.0%, 12.0% { background: #C41E3A; }
  16.7%, 28.7% { background: #C41E3A; }
  33.3%, 45.3% { background: #C41E3A; }
  50.0%, 62.0% { background: #C41E3A; }
  66.7%, 78.7% { background: #C41E3A; }
  83.3%, 95.3% { background: #C41E3A; }
  100.0%, 100.0% { background: #C41E3A; }
}
@keyframes r6-anim {
  0.0%, 12.0% { background: #FFD500; }
  16.7%, 28.7% { background: #C41E3A; }
  33.3%, 45.3% { background: #C41E3A; }
  50.0%, 62.0% { background: #C41E3A; }
  66.7%, 78.7% { background: #C41E3A; }
  83.3%, 95.3% { background: #C41E3A; }
  100.0%, 100.0% { background: #C41E3A; }
}
@keyframes r7-anim {
  0.0%, 12.0% { background: #0051BA; }
  16.7%, 28.7% { background: #FF5800; }
  33.3%, 45.3% { background: #FF5800; }
  50.0%, 62.0% { background: #FFD500; }
  66.7%, 78.7% { background: #FFD500; }
  83.3%, 95.3% { background: #C41E3A; }
  100.0%, 100.0% { background: #C41E3A; }
}
@keyframes r8-anim {
  0.0%, 12.0% { background: #009E60; }
  16.7%, 28.7% { background: #FFD500; }
  33.3%, 45.3% { background: #FFD500; }
  50.0%, 62.0% { background: #C41E3A; }
  66.7%, 78.7% { background: #C41E3A; }
  83.3%, 95.3% { background: #C41E3A; }
  100.0%, 100.0% { background: #C41E3A; }
}
@keyframes r9-anim {
  0.0%, 12.0% { background: #FF5800; }
  16.7%, 28.7% { background: #FFD500; }
  33.3%, 45.3% { background: #FFD500; }
  50.0%, 62.0% { background: #C41E3A; }
  66.7%, 78.7% { background: #C41E3A; }
  83.3%, 95.3% { background: #C41E3A; }
  100.0%, 100.0% { background: #C41E3A; }
}

/* =========================================
   LOGIN PAGE FIXES
========================================= */
#box_login {
    background: #ffffff !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08) !important;
    border: 1px solid #f1f5f9 !important;
    margin: 40px auto 80px auto !important;
}
#box_login .innerbox {
    padding: 40px !important;
}
#box_login .innerbox .f-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 40px !important;
}
#box_login .innerbox .f-grid-6 {
    flex: 1 1 0 !important;
    margin: 0 !important;
}
#box_login .login-inner,
#box_login .register-inner {
    position: relative !important;
    padding-bottom: 75px !important; /* Space for the button */
    display: block !important;
    height: 100% !important;
}
#box_login .login-inner fieldset,
#box_login .register-inner .register-form,
#box_login .register-inner .register-form fieldset {
    position: static !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}
#box_login .login-inner .btn.login,
#box_login .register-inner .btn.register {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    height: 52px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
}
#box_login .register-inner .btn.register {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 2px solid #e2e8f0 !important;
    box-shadow: none !important;
}
#box_login .register-inner .btn.register:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

/* =========================================
   REGISTER PAGE (SSO) FIXES
========================================= */
#box_register {
    background: #ffffff !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08) !important;
    border: 1px solid #f1f5f9 !important;
    margin: 40px auto 80px auto !important;
    max-width: 600px !important;
}
#box_register .innerbox {
    padding: 40px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}
#box_register h3 {
    text-align: left !important;
    margin-bottom: 30px !important;
    width: 100% !important;
}
#box_register .innerbox div[data-text-end] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
}
#box_register .login-form {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}
#box_register .login-form fieldset {
    width: 100% !important;
    max-width: 400px !important;
}
#box_register .login-form h4 {
    text-align: left !important;
    margin-top: 30px !important;
}
#box_register .login-form label.checkbox-wrap {
    display: flex !important;
    align-items: flex-start !important;
    text-align: left !important;
    margin-bottom: 20px !important;
    width: 100% !important;
}
#box_register .login-form label.checkbox-wrap span {
    display: block !important;
    margin-top: 2px !important;
    line-height: 1.5 !important;
    flex: 1 !important;
}

/* =========================================
   ALERTS
========================================= */
.alert {
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1) !important;
    border: none !important;
    padding: 16px 20px !important;
    font-weight: 600 !important;
    display: flex !important;
    flex-direction: row-reverse !important;
    justify-content: space-between !important;
    align-items: center !important;
}

/* =========================================
   CUSTOMER PANEL (#box_useredit, etc.)
========================================= */
#box_useredit, #box_passchange, #box_address, #box_addresses, #box_loyalty {
    background: #ffffff !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08) !important;
    border: 1px solid #f1f5f9 !important;
    margin: 40px auto 80px auto !important;
}
#box_useredit .innerbox, #box_passchange .innerbox, #box_address .innerbox, #box_addresses .innerbox, #box_loyalty .innerbox {
    padding: 40px !important;
}

/* Forms inside panel */
#box_useredit table.maindata, #box_passchange table.maindata, #box_address table.maindata, #box_addresses table.maindata,
#box_useredit table.address-handler, #box_passchange table.address-handler, #box_address table.address-handler, #box_addresses table.address-handler {
    width: 100% !important;
    border: none !important;
}
#box_useredit table tr, #box_passchange table tr, #box_address table tr, #box_addresses table tr {
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 20px !important;
}
#box_useredit table td, #box_passchange table td, #box_address table td, #box_addresses table td {
    display: block !important;
    padding: 0 !important;
    border: none !important;
    width: 100% !important;
}
#box_useredit input[type="text"], #box_passchange input[type="text"], #box_address input[type="text"], #box_addresses input[type="text"],
#box_useredit input[type="password"], #box_passchange input[type="password"],
#box_useredit select, #box_passchange select, #box_address select, #box_addresses select {
    width: 100% !important;
    height: 52px !important;
    border-radius: 12px !important;
    border: 2px solid #e2e8f0 !important;
    background: #f8fafc !important;
    padding: 0 16px !important;
    font-size: 16px !important;
}
#box_useredit .bottombuttons, #box_passchange .bottombuttons, #box_address .bottombuttons, #box_addresses .bottombuttons, #box_loyalty .bottombuttons {
    display: flex !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    margin-top: 24px !important;
}
#box_useredit .bottombuttons .btn, #box_passchange .bottombuttons .btn, #box_address .bottombuttons .btn, #box_addresses .bottombuttons .btn, #box_loyalty .bottombuttons .btn {
    height: 52px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    padding: 0 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
#box_useredit .bottombuttons .btn img, #box_passchange .bottombuttons .btn img, #box_address .bottombuttons .btn img, #box_addresses .bottombuttons .btn img, #box_loyalty .bottombuttons .btn img {
    display: none !important;
}

/* Loyalty Filter */
#box_loyalty .loyalty_filter input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
#box_loyalty .loyalty_filter label::before, #box_loyalty .loyalty_filter label::after {
    display: none !important;
}
#box_loyalty .loyalty_filter label {
    padding: 10px 24px !important;
    background: #ffffff !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 30px !important;
    cursor: pointer !important;
}
#box_loyalty .loyalty_filter input[type="radio"]:checked + label {
    background: #04bbff !important;
    border-color: #04bbff !important;
    color: #ffffff !important;
}

/* =========================================
   BASKET / CHECKOUT STEPS
========================================= */
#box_basketlist, #box_basketaddress, #box_basketstep2, #box_basketshipping, #box_basketsummary, #box_basketfinal {
    background: #ffffff !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08) !important;
    border: 1px solid #f1f5f9 !important;
    margin: 40px auto 80px auto !important;
}
#box_basketlist .innerbox, #box_basketaddress .innerbox, #box_basketstep2 .innerbox, #box_basketshipping .innerbox, #box_basketsummary .innerbox, #box_basketfinal .innerbox {
    padding: 40px !important;
}

#box_basketaddress h4.separator {
    text-align: left !important;
}

/* Basket forms side by side */
#box_basketaddress table.maindata tr, #box_basketaddress table.address-handler tr {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    margin-bottom: 24px !important;
}
#box_basketaddress table.maindata td.label, #box_basketaddress table.address-handler td.label {
    width: 30% !important;
    text-align: right !important;
    padding-right: 20px !important;
    margin-bottom: 0 !important;
}
#box_basketaddress table.maindata td.input, #box_basketaddress table.address-handler td.input {
    width: 70% !important;
}
#box_basketaddress input[type="text"], #box_basketaddress input[type="email"], #box_basketaddress select {
    width: 100% !important;
    height: 52px !important;
    border-radius: 12px !important;
    border: 2px solid #e2e8f0 !important;
    background: #f8fafc !important;
    padding: 0 16px !important;
}

/* Basket buttons */
#box_basketaddress .bottombuttons {
    display: flex !important;
    flex-direction: row-reverse !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 40px !important;
    border-top: 1px solid #f1f5f9 !important;
    padding-top: 30px !important;
}
#box_basketaddress .bottombuttons .btn {
    height: 54px !important;
    border-radius: 12px !important;
    padding: 0 40px !important;
    font-size: 18px !important;
    font-weight: 800 !important;
}
#box_basketaddress .bottombuttons .btn.summary {
    background: linear-gradient(135deg, #04bbff, #009de0) !important;
    color: #ffffff !important;
}
#box_basketaddress .bottombuttons .btn.back {
    background: #f1f5f9 !important;
    color: #475569 !important;
}

/* Step Indicators (Moved and unified in modern checkout stepper section) */

@media (max-width: 800px) {
    #box_basketaddress table.maindata tr, #box_basketaddress table.address-handler tr { flex-direction: column !important; align-items: flex-start !important; }
    #box_basketaddress table.maindata td.label, #box_basketaddress table.address-handler td.label { width: 100% !important; text-align: left !important; }
    #box_basketaddress table.maindata td.input, #box_basketaddress table.address-handler td.input { width: 100% !important; }
    #box_basketaddress .f-row { flex-direction: column !important; }
    #box_login .innerbox .f-row { flex-direction: column !important; }
}

/* =========================================
   BASKET STEP 1 (CART OPTIONS) FIX
========================================= */
#cart-options {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 40px !important;
    align-items: flex-start !important;
    margin-top: 40px !important;
    clear: both !important;
}

#cart-options .delivery-container,
#cart-options .payment-container {
    flex: 1 1 30% !important;
    min-width: 250px !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
}

#cart-options .summary-container {
    flex: 1 1 35% !important;
    min-width: 300px !important;
    float: none !important;
    background: #ffffff !important;
    border: 2px solid #e2e8f0 !important;
    padding: 30px !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
}

/* Fix overlapping promo / recount / sum inside summary-container */
#box_basketlist .summary-container .promo-container,
#box_basketlist .summary-container .recount,
#box_basketlist .summary-container .deliveryhead,
#box_basketlist .summary-container .sum {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: left !important;
    margin-bottom: 20px !important;
    width: 100% !important;
    position: static !important;
    float: none !important;
    clear: both !important;
    transform: none !important;
}

#box_basketlist .summary-container .sum {
    margin-top: 20px !important;
    padding-top: 20px !important;
    border-top: 1px solid #e2e8f0 !important;
}

#box_basketlist .summary-container .sum .value em {
    font-size: 32px !important;
    color: #04bbff !important;
    font-weight: 900 !important;
}

/* Delivery / Payment items spacing */
#cart-options .delivery-container h5,
#cart-options .payment-container h5 {
    font-size: 18px !important;
    margin-bottom: 20px !important;
    color: #0f172a !important;
}

#cart-options .delivery,
#cart-options .payment {
    display: flex !important;
    align-items: center !important;
    padding: 12px 16px !important;
    margin-bottom: 12px !important;
    border-radius: 12px !important;
    border: 1px solid #f1f5f9 !important;
    background: #f8fafc !important;
    transition: all 0.2s ease !important;
}

#cart-options .delivery.selected,
#cart-options .payment.selected {
    border-color: #04bbff !important;
    background: #ffffff !important;
    box-shadow: 0 4px 12px rgba(4, 187, 255, 0.1) !important;
}

@media (max-width: 900px) {
    #cart-options {
        flex-direction: column !important;
    }
    #cart-options .delivery-container,
    #cart-options .payment-container,
    #cart-options .summary-container {
        width: 100% !important;
        flex: none !important;
    }
}

/* OBLITERATE GRID LAYOUT FROM SUMMARY */
#box_basketlist .summary-container {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    gap: 15px !important;
}

#box_basketlist .summary-container > * {
    grid-column: auto !important;
    grid-row: auto !important;
    justify-self: center !important;
    align-self: center !important;
    margin: 0 !important;
    width: 100% !important;
}

#box_basketlist .summary-container .promo-container {
    order: 4 !important; /* Put promo code at the bottom if desired, or leave at top */
    margin-top: 20px !important;
    border-top: 1px solid #e2e8f0 !important;
    padding-top: 20px !important;
}

#box_basketlist .summary-container .promocode {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    align-items: center !important;
}

#box_basketlist .summary-container .promocode .input .shaded_inputwrap input {
    height: 48px !important;
    border-radius: 12px !important;
    border: 2px solid #e2e8f0 !important;
    text-align: left !important;
}

#box_basketlist .summary-container .promocode .action button.btn {
    height: 48px !important;
    border-radius: 12px !important;
    background: #0f172a !important;
    color: #ffffff !important;
    width: 100% !important;
}


/* =======================================================
   BASKET STEP 2 (TWOJE DANE / DANE ADRESOWE) COMPLETE REDESIGN
   ======================================================= */

/* Hide any sidebar/sliders only on address checkout page */
body#shop_basket_address .leftcol,
body#shop_basket_address .rightcol,
.innermain:has(#box_basketaddress) .leftcol,
.innermain:has(#box_basketaddress) .rightcol {
    display: none !important;
}

body#shop_basket_address .centercol,
.innermain:has(#box_basketaddress) .centercol {
    width: 100% !important;
    float: none !important;
    margin: 0 auto !important;
    max-width: 1200px !important;
}

/* Outer Box Styling */
#box_basketaddress {
    background: #ffffff !important;
    border-radius: 24px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
    border: 1px solid #eaebf0 !important;
    margin: 30px auto 60px auto !important;
    max-width: 1200px !important;
    overflow: hidden !important;
}

#box_basketaddress .innerbox {
    padding: 36px 36px 44px 36px !important;
}

#box_basketaddress .basket-step-border {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Two-Column Grid */
#box_basketaddress .f-row {
    display: flex !important;
    flex-direction: row !important;
    gap: 32px !important;
    align-items: flex-start !important;
}

#box_basketaddress .f-grid-6 {
    flex: 1 1 0 !important;
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Modern Card Sections (.kl-basket-card) */
#box_basketaddress .kl-basket-card {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 20px !important;
    padding: 28px 26px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
    box-sizing: border-box !important;
    transition: all 0.25s ease !important;
}

#box_basketaddress .kl-basket-card:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 8px 24px rgba(4, 187, 255, 0.08) !important;
}

/* Hide different shipping address unless toggled */
#box_basketaddress .client-address-different.none,
#box_basketaddress .client-address-different.is-hidden {
    display: none !important;
}

/* Card Headings */
#box_basketaddress h4.separator,
#box_basketaddress .client-data h4.separator,
#box_basketaddress .client-address h4.separator,
#box_basketaddress .client-add-info h4.separator,
#box_basketaddress .client-address-different h4.separator,
#box_basketaddress .client-additional-info h4.separator {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #0b0f24 !important;
    text-align: left !important;
    margin: 0 0 22px 0 !important;
    padding-bottom: 14px !important;
    border-bottom: 1.5px solid #f1f5f9 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

#box_basketaddress h4.separator i {
    color: #04bbff !important;
    font-size: 17px !important;
}

#box_basketaddress h4.separator img {
    display: none !important;
}

/* Form Tables */
#box_basketaddress table,
#box_basketaddress table.maindata,
#box_basketaddress table.address-handler,
#box_basketaddress table.address-different {
    width: 100% !important;
    border-collapse: separate !important;
    border: none !important;
    margin-bottom: 0 !important;
}

#box_basketaddress table tbody {
    display: block !important;
    width: 100% !important;
}

/* Form Row - Stacked Label & Input */
#box_basketaddress table tr {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    margin-bottom: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#box_basketaddress table td {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

/* Labels placed cleanly above inputs */
#box_basketaddress table td.label {
    width: 100% !important;
    text-align: left !important;
    padding: 0 0 6px 0 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #334155 !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

#box_basketaddress table td.label label {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #334155 !important;
    cursor: pointer !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

#box_basketaddress table td.label em.color {
    color: #ef4444 !important;
    font-weight: 900 !important;
    font-size: 14px !important;
    margin-right: 2px !important;
}

/* Inputs container */
#box_basketaddress table td.input {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Text Inputs, Selects, and Textareas */
#box_basketaddress input[type="text"],
#box_basketaddress input[type="email"],
#box_basketaddress input[type="tel"],
#box_basketaddress input[type="password"],
#box_basketaddress select {
    width: 100% !important;
    height: 48px !important;
    border-radius: 12px !important;
    border: 1.5px solid #e2e8f0 !important;
    background: #f8fafc !important;
    padding: 0 16px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    transition: all 0.2s ease !important;
    outline: none !important;
    box-sizing: border-box !important;
}

#box_basketaddress input[type="text"]:focus,
#box_basketaddress input[type="email"]:focus,
#box_basketaddress input[type="tel"]:focus,
#box_basketaddress input[type="password"]:focus,
#box_basketaddress select:focus,
#box_basketaddress textarea:focus {
    border-color: #04bbff !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(4, 187, 255, 0.15) !important;
}

/* Phone Row - Hide Country Selector and +48 Prefix */
#box_basketaddress .select__phone-container,
#box_basketaddress .js__phone-country-select-container,
.select__phone-container,
.js__phone-country-select-container,
tr.phone .select__phone-container,
tr.phone2 .select__phone-container {
    display: none !important;
}

#box_basketaddress .shaded_inputwrap.input_prefix::before,
.shaded_inputwrap.input_prefix::before {
    display: none !important;
    content: none !important;
}

#box_basketaddress .shaded_inputwrap.input_prefix #input_phone,
#box_basketaddress .shaded_inputwrap.input_prefix #input_phone2,
#box_basketaddress #input_phone,
#box_basketaddress #input_phone2 {
    padding-left: 16px !important;
}

/* Address Type (Osoba prywatna / Firma) Pill Selector */
#box_basketaddress tr.address_type {
    display: flex !important;
    flex-direction: row !important;
    margin-bottom: 20px !important;
}

#box_basketaddress tr.address_type td.label {
    display: none !important;
}

#box_basketaddress tr.address_type td.input {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    align-items: center !important;
    width: 100% !important;
    background: #f8fafc !important;
    padding: 8px 12px !important;
    border-radius: 14px !important;
    border: 1.5px solid #e2e8f0 !important;
}

#box_basketaddress tr.address_type .radio-wrap {
    display: inline-flex !important;
    align-items: center !important;
    margin-right: 6px !important;
}

#box_basketaddress tr.address_type input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    accent-color: #04bbff !important;
    cursor: pointer !important;
    margin: 0 !important;
}

#box_basketaddress tr.address_type label {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #334155 !important;
    cursor: pointer !important;
    margin-right: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* Company fields hidden by default, shown only when Firma is selected */
#box_basketaddress:not(.is-company) tr.coname,
#box_basketaddress:not(.is-company) tr.nip,
#box_basketaddress:not(.is-company) tr.error_coname,
#box_basketaddress:not(.is-company) tr.error_nip {
    display: none !important;
}

#box_basketaddress.is-company tr.coname,
#box_basketaddress.is-company tr.nip {
    display: flex !important;
}

/* Inny adres wysyłki Toggle Box */
#box_basketaddress table tr.different_address {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    background: #f8fafc !important;
    border: 1.5px dashed #cbd5e1 !important;
    border-radius: 14px !important;
    padding: 14px 18px !important;
    margin-top: 14px !important;
    margin-bottom: 18px !important;
    cursor: pointer !important;
}

#box_basketaddress table tr.different_address td.label {
    display: none !important;
}

#box_basketaddress table tr.different_address td.input {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
}

#box_basketaddress table tr.different_address td.input label {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    cursor: pointer !important;
    margin: 0 !important;
}

/* InPost Paczkomat Selection Button */
#box_basketaddress td.input button.is-hidden,
#box_basketaddress td.input #kl_btn_select_inpost.is-hidden,
#box_basketaddress td.input #kl_btn_select_dpd.is-hidden,
#box_basketaddress td.input .kl-btn-pickup.is-hidden,
#box_basketaddress td.input button[style*="display: none"] {
    display: none !important;
}

#box_basketaddress td.input button:not(.address_submit):not(.is-hidden):not(.kl-btn-pickup):not(#kl_btn_select_inpost):not(#kl_btn_select_dpd):not(#fbiz_btn_select_point):not([style*="display: none"]),
#box_basketaddress td.input a.btn:not(.is-hidden):not(.kl-btn-pickup):not(#kl_btn_select_inpost):not(#kl_btn_select_dpd):not(#fbiz_btn_select_point):not([style*="display: none"]) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    height: 48px !important;
    padding: 0 24px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #04bbff 0%, #0ea5e9 100%) !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(4, 187, 255, 0.3) !important;
    transition: all 0.25s ease !important;
}

#box_basketaddress td.input button:not(.address_submit):hover,
#box_basketaddress td.input a.btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 22px rgba(4, 187, 255, 0.45) !important;
    color: #ffffff !important;
}

#box_basketaddress td.input button:not(.address_submit)::after,
#box_basketaddress td.input a.btn::after {
    display: none !important;
    content: none !important;
}

/* Comment / Notes Textarea */
#box_basketaddress textarea#comment {
    width: 100% !important;
    height: 110px !important;
    border-radius: 14px !important;
    border: 1.5px solid #e2e8f0 !important;
    background: #f8fafc !important;
    padding: 14px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #0f172a !important;
    font-family: inherit !important;
    outline: none !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
    resize: vertical !important;
}

/* Checkboxes in Additional Info */
#box_basketaddress table tr:has(.input_checkbox),
#box_basketaddress table tr.witherror_checkbox,
#box_basketaddress table tr.additional-fields:has(.input_checkbox) {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 14px 16px !important;
    transition: all 0.2s ease !important;
}

#box_basketaddress table tr:has(.input_checkbox):hover,
#box_basketaddress table tr.additional-fields:has(.input_checkbox):hover {
    border-color: #cbd5e1 !important;
    background: #ffffff !important;
}

#box_basketaddress table tr:has(.input_checkbox) td.label,
#box_basketaddress table tr.witherror_checkbox td.label,
#box_basketaddress table tr.additional-fields:has(.input_checkbox) td.label {
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

#box_basketaddress table tr:has(.input_checkbox) td.input,
#box_basketaddress table tr.witherror_checkbox td.input,
#box_basketaddress table tr.additional-fields:has(.input_checkbox) td.input {
    width: auto !important;
    flex: 1 !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
}

#box_basketaddress .checkbox-wrap {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
}

#box_basketaddress input[type="checkbox"] {
    width: 19px !important;
    height: 19px !important;
    border-radius: 6px !important;
    border: 2px solid #cbd5e1 !important;
    accent-color: #04bbff !important;
    cursor: pointer !important;
    margin: 0 !important;
}

#box_basketaddress td.input_checkbox label,
#box_basketaddress tr.additional-fields label {
    font-size: 13px !important;
    color: #334155 !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

#box_basketaddress a[href*="regulamin"],
#box_basketaddress a[href*="polityka"],
#box_basketaddress .legal_notes a {
    color: #04bbff !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
}

/* Mandatory Field Note */
#box_basketaddress .basket-step-border > div > span {
    display: inline-block !important;
    font-size: 13px !important;
    color: #94a3b8 !important;
    font-weight: 600 !important;
    margin-top: 16px !important;
}

/* Validation Errors */
#box_basketaddress ul.input_error {
    list-style: none !important;
    padding: 0 !important;
    margin: 6px 0 0 0 !important;
    color: #ef4444 !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
}

/* Bottom Action Buttons */
#box_basketaddress .bottombuttons {
    display: flex !important;
    flex-direction: row-reverse !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 40px !important;
    padding-top: 32px !important;
    border-top: 1px solid #f1f5f9 !important;
    gap: 20px !important;
}

#box_basketaddress .bottombuttons .btn {
    height: 52px !important;
    border-radius: 50px !important;
    font-size: 14.5px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 0 38px !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#box_basketaddress .bottombuttons .btn.summary {
    background: linear-gradient(135deg, #04bbff 0%, #0ea5e9 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 6px 20px rgba(4, 187, 255, 0.35) !important;
}

#box_basketaddress .bottombuttons .btn.summary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 25px rgba(4, 187, 255, 0.45) !important;
    color: #ffffff !important;
}

#box_basketaddress .bottombuttons .btn.back {
    background: #f8fafc !important;
    color: #475569 !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: none !important;
    padding: 0 32px !important;
}

#box_basketaddress .bottombuttons .btn.back:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
    transform: translateY(-2px) !important;
}

#box_basketaddress .bottombuttons .btn img {
    display: none !important;
}

/* Responsive adjustments for Basket Address */
@media (max-width: 991px) {
    #box_basketaddress .f-row {
        flex-direction: column !important;
        gap: 0 !important;
    }
    
    #box_basketaddress .f-grid-6 {
        flex: none !important;
        width: 100% !important;
    }
    
    #box_basketaddress .innerbox {
        padding: 24px 20px 30px 20px !important;
    }
    
    #box_basketaddress .bottombuttons {
        flex-direction: column !important;
        gap: 14px !important;
    }
    
    #box_basketaddress .bottombuttons .btn {
        width: 100% !important;
    }
}

/* =========================================================
   CHECKOUT STEP 2 GATEWAY (#box_basketstep2)
   ========================================================= */

#box_basketstep2 {
    background: #ffffff !important;
    border-radius: 24px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
    border: 1px solid #eaebf0 !important;
    margin: 30px auto 60px auto !important;
    max-width: 1200px !important;
    overflow: hidden !important;
    padding: 0 !important;
}

#box_basketstep2 .basket-step-border {
    border: none !important;
    padding: 36px 36px 44px 36px !important;
    background: transparent !important;
}

#box_basketstep2 .innerbox {
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* Social Login Header */
.kl-social-login-wrap {
    text-align: center !important;
    margin-bottom: 35px !important;
    padding-bottom: 25px !important;
}

.kl-social-title {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #475569 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    margin-bottom: 16px !important;
}

.kl-social-title i {
    color: #04bbff !important;
    font-size: 16px !important;
}

.kl-social-buttons {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.kl-social-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 44px !important;
    padding: 0 20px !important;
    border-radius: 12px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    color: #0f172a !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.kl-social-btn:hover {
    border-color: #cbd5e1 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08) !important;
    color: #0f172a !important;
}

.kl-sso-label {
    font-size: 13px !important;
    color: #64748b !important;
    font-weight: 600 !important;
}

.kl-social-legal {
    font-size: 12px !important;
    color: #94a3b8 !important;
    margin: 12px 0 0 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}

.kl-social-legal i {
    color: #10b981 !important;
}

.kl-step2-divider {
    position: relative !important;
    margin: 30px auto 0 auto !important;
    text-align: center !important;
    max-width: 600px !important;
}

.kl-step2-divider::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    height: 1px !important;
    background: #e2e8f0 !important;
    z-index: 1 !important;
}

.kl-step2-divider span {
    position: relative !important;
    background: #ffffff !important;
    padding: 0 18px !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    color: #94a3b8 !important;
    letter-spacing: 1px !important;
    z-index: 2 !important;
}

/* 3-Card Grid */
.kl-step2-cards-container {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
    padding: 0 !important;
    background: transparent !important;
}

.kl-step2-card {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 20px !important;
    padding: 28px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
}

.kl-step2-card:hover {
    border-color: #04bbff !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 30px rgba(4, 187, 255, 0.1) !important;
}

/* Card Header */
.kl-step2-card-head {
    display: flex !important;
    align-items: flex-start !important;
    gap: 16px !important;
    margin-bottom: 18px !important;
}

.kl-step2-icon {
    width: 50px !important;
    height: 50px !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    flex-shrink: 0 !important;
}

.kl-icon-bolt {
    background: linear-gradient(135deg, rgba(4, 187, 255, 0.15), rgba(14, 165, 233, 0.2)) !important;
    color: #0284c7 !important;
}

.kl-icon-user {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(99, 102, 241, 0.2)) !important;
    color: #2563eb !important;
}

.kl-icon-star {
    background: linear-gradient(135deg, rgba(123, 0, 255, 0.15), rgba(4, 187, 255, 0.15)) !important;
    color: #7b00ff !important;
}

.kl-step2-head-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.kl-card-badge {
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 2px 10px !important;
    border-radius: 50px !important;
    display: inline-block !important;
    width: fit-content !important;
}

.kl-badge-cyan {
    background: #e0f2fe !important;
    color: #0369a1 !important;
}

.kl-badge-blue {
    background: #dbeafe !important;
    color: #1d4ed8 !important;
}

.kl-badge-purple {
    background: #ede9fe !important;
    color: #6d28d9 !important;
}

.kl-step2-head-info h3 {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

/* Card Body */
.kl-step2-card-body {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    margin-bottom: 24px !important;
}

.kl-card-lead {
    font-size: 13.5px !important;
    color: #475569 !important;
    line-height: 1.55 !important;
    margin-bottom: 18px !important;
}

/* Perks list */
.kl-perks-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.kl-perks-list li {
    font-size: 13px !important;
    color: #334155 !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    line-height: 1.4 !important;
}

.kl-perks-list li i {
    color: #04bbff !important;
    font-size: 14px !important;
    margin-top: 2px !important;
    flex-shrink: 0 !important;
}

/* Login Form Inside Card */
.kl-login-form fieldset {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

.kl-form-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.kl-form-group label {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #334155 !important;
    margin: 0 !important;
}

.kl-label-split {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.kl-link-forgot {
    font-size: 12px !important;
    color: #04bbff !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

.kl-link-forgot:hover {
    text-decoration: underline !important;
    color: #0284c7 !important;
}

.kl-input-with-icon {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

.kl-input-with-icon i {
    position: absolute !important;
    left: 16px !important;
    color: #94a3b8 !important;
    font-size: 15px !important;
    pointer-events: none !important;
    transition: color 0.2s ease !important;
}

.kl-input-with-icon input {
    width: 100% !important;
    height: 46px !important;
    padding: 0 16px 0 44px !important;
    border-radius: 12px !important;
    border: 1.5px solid #e2e8f0 !important;
    background: #f8fafc !important;
    font-size: 14px !important;
    color: #0f172a !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
}

.kl-input-with-icon input:focus {
    background: #ffffff !important;
    border-color: #04bbff !important;
    box-shadow: 0 0 0 4px rgba(4, 187, 255, 0.15) !important;
    outline: none !important;
}

.kl-input-with-icon:focus-within i {
    color: #04bbff !important;
}

/* Card Buttons */
.kl-step2-card-foot {
    margin-top: auto !important;
}

.kl-btn-step2-primary {
    width: 100% !important;
    height: 48px !important;
    border-radius: 50px !important;
    background: linear-gradient(135deg, #04bbff 0%, #0ea5e9 100%) !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(4, 187, 255, 0.3) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.kl-btn-step2-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 22px rgba(4, 187, 255, 0.45) !important;
    color: #ffffff !important;
}

.kl-btn-step2-outline {
    width: 100% !important;
    height: 48px !important;
    border-radius: 50px !important;
    background: #ffffff !important;
    color: #04bbff !important;
    border: 1.5px solid #04bbff !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.kl-btn-step2-outline:hover {
    background: #04bbff !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(4, 187, 255, 0.3) !important;
}

#box_basketstep2 .btn img.px1 {
    display: none !important;
}

/* Responsive */
@media (max-width: 991px) {
    .kl-step2-cards-container {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    
    #box_basketstep2 .basket-step-border {
        padding: 24px 20px 30px 20px !important;
    }
}

/* ==========================================================================
   Checkout Step 3: Podsumowanie (Order Summary) Modernization
   ========================================================================== */
body#shop_basket_step3 .leftcol,
body#shop_basket_step3 .rightcol,
.innermain:has(#box_basketsummary) .leftcol,
.innermain:has(#box_basketsummary) .rightcol,
#box_basketsummary ~ .leftcol,
.leftcol:has(~ .centercol #box_basketsummary) {
    display: none !important;
}

body#shop_basket_step3 .centercol,
.innermain:has(#box_basketsummary) .centercol {
    width: 100% !important;
    max-width: 1200px !important;
    float: none !important;
    margin: 0 auto !important;
    padding: 0 15px !important;
}

#box_basketsummary {
    background: #ffffff !important;
    border-radius: 24px !important;
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.06) !important;
    border: 1px solid #eaebf0 !important;
    margin: 20px auto 60px auto !important;
    max-width: 1200px !important;
    overflow: hidden !important;
}

#box_basketsummary .innerbox {
    padding: 36px 40px 44px 40px !important;
}

/* Product list table */
#box_basketsummary .kl-summary-table-wrap {
    width: 100% !important;
    overflow-x: auto !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 20px !important;
    margin-bottom: 35px !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.02) !important;
}

@media (min-width: 769px) {
    #box_basketsummary table.productlist {
        display: table !important;
        width: 100% !important;
        table-layout: fixed !important;
        border-collapse: collapse !important;
        border-spacing: 0 !important;
        margin: 0 !important;
        background: #ffffff !important;
        border: none !important;
    }

    #box_basketsummary table.productlist thead {
        display: table-header-group !important;
        width: 100% !important;
    }

    #box_basketsummary table.productlist tbody {
        display: table-row-group !important;
        width: 100% !important;
        border-bottom: none !important;
    }

    #box_basketsummary table.productlist thead tr,
    #box_basketsummary table.productlist tbody tr {
        display: table-row !important;
        width: 100% !important;
    }

    #box_basketsummary table.productlist thead tr {
        background: #f8fafc !important;
        border-bottom: 1.5px solid #e2e8f0 !important;
    }

    #box_basketsummary table.productlist thead td,
    #box_basketsummary table.productlist thead th {
        display: table-cell !important;
        padding: 16px 20px !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        color: #64748b !important;
        text-transform: uppercase !important;
        letter-spacing: 0.6px !important;
        border: none !important;
        vertical-align: middle !important;
        box-sizing: border-box !important;
    }

    #box_basketsummary table.productlist tbody tr {
        border-bottom: 1px solid #f1f5f9 !important;
        transition: background 0.2s ease !important;
    }

    #box_basketsummary table.productlist tbody tr:last-child {
        border-bottom: none !important;
    }

    #box_basketsummary table.productlist tbody tr:hover {
        background: #fbfcfe !important;
    }

    #box_basketsummary table.productlist tbody td {
        display: table-cell !important;
        padding: 18px 20px !important;
        vertical-align: middle !important;
        border: none !important;
        font-size: 14px !important;
        box-sizing: border-box !important;
    }

    #box_basketsummary table.productlist td.img {
        width: 75px !important;
        text-align: center !important;
        padding-right: 10px !important;
    }

    #box_basketsummary table.productlist td.img img {
        width: 64px !important;
        height: 64px !important;
        object-fit: contain !important;
        border-radius: 12px !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        padding: 4px !important;
        display: block !important;
        margin: 0 auto !important;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
    }

    #box_basketsummary table.productlist td.name {
        width: auto !important;
        text-align: left !important;
    }

    #box_basketsummary table.productlist td.name a {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #0b0f24 !important;
        text-decoration: none !important;
        line-height: 1.4 !important;
        display: inline-block !important;
        transition: color 0.2s ease !important;
    }

    #box_basketsummary table.productlist td.name a:hover {
        color: #04bbff !important;
    }

    #box_basketsummary table.productlist td.name .variant {
        display: block !important;
        font-size: 12px !important;
        color: #64748b !important;
        margin-top: 4px !important;
        font-weight: 500 !important;
    }

    #box_basketsummary table.productlist td.time {
        width: 130px !important;
        text-align: center !important;
        font-size: 13px !important;
        color: #0284c7 !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
    }

    #box_basketsummary table.productlist td.quantity {
        width: 85px !important;
        text-align: center !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #1e293b !important;
        white-space: nowrap !important;
    }

    #box_basketsummary table.productlist td.price {
        width: 105px !important;
        text-align: right !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #64748b !important;
        white-space: nowrap !important;
    }

    #box_basketsummary table.productlist td.sum {
        width: 115px !important;
        text-align: right !important;
        font-size: 16px !important;
        font-weight: 800 !important;
        color: #0b0f24 !important;
        white-space: nowrap !important;
    }

    #box_basketsummary table.productlist td.sum em.color,
    #box_basketsummary table.productlist td.sum em {
        font-style: normal !important;
        color: #0b0f24 !important;
        font-weight: 800 !important;
        display: block !important;
        text-align: right !important;
    }

    #box_basketsummary table.productlist thead td.sum {
        text-align: right !important;
    }
}

@media (max-width: 768px) {
    #box_basketsummary .kl-summary-table-wrap {
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        margin-bottom: 20px !important;
    }
    #box_basketsummary table.productlist {
        display: block !important;
        width: 100% !important;
        background: transparent !important;
        border: none !important;
    }
    #box_basketsummary table.productlist thead {
        display: none !important;
    }
    #box_basketsummary table.productlist tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }
    #box_basketsummary table.productlist tbody tr {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 10px 14px !important;
        padding: 14px !important;
        background: #ffffff !important;
        border: 1.5px solid #e2e8f0 !important;
        border-radius: 16px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        position: static !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.02) !important;
    }
    #box_basketsummary table.productlist td.img {
        display: block !important;
        width: 64px !important;
        height: 64px !important;
        flex: 0 0 64px !important;
        padding: 0 !important;
        margin: 0 !important;
        position: static !important;
    }
    #box_basketsummary table.productlist td.img img {
        width: 64px !important;
        height: 64px !important;
        max-width: 64px !important;
        object-fit: contain !important;
        border-radius: 10px !important;
        background: #f8fafc !important;
        border: 1px solid #f1f5f9 !important;
    }
    #box_basketsummary table.productlist td.name {
        display: block !important;
        flex: 1 1 calc(100% - 85px) !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        position: static !important;
        text-align: left !important;
    }
    #box_basketsummary table.productlist td.name a {
        font-size: 13.5px !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        line-height: 1.35 !important;
        display: block !important;
        text-decoration: none !important;
    }
    #box_basketsummary table.productlist td.name .variant {
        font-size: 12px !important;
        color: #64748b !important;
        margin-top: 3px !important;
        display: block !important;
    }
    #box_basketsummary table.productlist td.time {
        display: none !important;
    }
    #box_basketsummary table.productlist td.quantity {
        display: inline-flex !important;
        align-items: center !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        color: #475569 !important;
        background: #f1f5f9 !important;
        padding: 4px 10px !important;
        border-radius: 8px !important;
        margin: 0 0 0 78px !important;
        position: static !important;
        width: auto !important;
    }
    #box_basketsummary table.productlist td.price {
        display: none !important;
    }
    #box_basketsummary table.productlist td.sum {
        display: inline-flex !important;
        align-items: center !important;
        margin: 0 0 0 16px !important;
        padding: 0 !important;
        font-size: 15px !important;
        font-weight: 800 !important;
        color: #0052ff !important;
        position: static !important;
        width: auto !important;
    }
    #box_basketsummary .kl-summary-cards-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        width: 100% !important;
        margin-bottom: 25px !important;
        box-sizing: border-box !important;
    }
    #box_basketsummary .kl-summary-card {
        background: #ffffff !important;
        border: 1.5px solid #e2e8f0 !important;
        border-radius: 20px !important;
        padding: 20px 18px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03) !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }
    #box_basketsummary .kl-card-header {
        width: 100% !important;
        margin-bottom: 14px !important;
        padding-bottom: 10px !important;
        border-bottom: 1.5px solid #f1f5f9 !important;
        display: flex !important;
        justify-content: center !important;
    }
    #box_basketsummary .kl-summary-card h4.separator {
        font-size: 14px !important;
        font-weight: 800 !important;
        color: #0f172a !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
    }
    #box_basketsummary .kl-summary-card h4.separator i {
        color: #04bbff !important;
        font-size: 16px !important;
    }
    #box_basketsummary .kl-card-body {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        margin-bottom: 14px !important;
    }
    #box_basketsummary .kl-card-body p {
        font-size: 14px !important;
        line-height: 1.55 !important;
        color: #475569 !important;
        margin: 0 0 4px 0 !important;
        text-align: center !important;
    }
    #box_basketsummary .kl-card-body p.kl-card-name {
        font-size: 15px !important;
        font-weight: 800 !important;
        color: #0b0f24 !important;
        margin-bottom: 6px !important;
    }
    #box_basketsummary .kl-card-footer {
        width: 100% !important;
        padding-top: 12px !important;
        border-top: 1px dashed #e2e8f0 !important;
        display: flex !important;
        justify-content: center !important;
    }
    #box_basketsummary .kl-summary-edit-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        padding: 8px 20px !important;
        background: #f0f9ff !important;
        color: #0284c7 !important;
        font-size: 12.5px !important;
        font-weight: 700 !important;
        border-radius: 30px !important;
        text-decoration: none !important;
        border: 1px solid #bae6fd !important;
        margin: 0 auto !important;
    }
    #box_basketsummary .kl-info-list {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
    }
    #box_basketsummary .kl-info-list li {
        width: 100% !important;
        box-sizing: border-box !important;
        align-items: center !important;
        text-align: center !important;
    }
    #box_basketsummary .kl-info-label {
        justify-content: center !important;
        text-align: center !important;
    }
    #box_basketsummary .kl-info-value {
        text-align: center !important;
    }
    #box_basketsummary .kl-summary-inline-edit {
        justify-content: center !important;
        text-align: center !important;
    }
}

/* 3-Card Summary Grid */
#box_basketsummary .kl-summary-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
    margin-bottom: 35px !important;
}

#box_basketsummary .kl-summary-card {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 20px !important;
    padding: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    float: none !important;
    width: auto !important;
    box-sizing: border-box !important;
}

#box_basketsummary .kl-summary-card:hover {
    border-color: #04bbff !important;
    box-shadow: 0 10px 30px rgba(4, 187, 255, 0.08) !important;
    transform: translateY(-2px) !important;
}

#box_basketsummary .kl-card-header {
    margin-bottom: 16px !important;
    padding-bottom: 12px !important;
    border-bottom: 1.5px solid #f1f5f9 !important;
}

#box_basketsummary .kl-summary-card h4.separator {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

#box_basketsummary .kl-summary-card h4.separator i {
    color: #04bbff !important;
    font-size: 17px !important;
}

#box_basketsummary .kl-card-body {
    flex: 1 1 auto !important;
    margin-bottom: 18px !important;
}

#box_basketsummary .kl-card-body p {
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: #475569 !important;
    margin: 0 0 6px 0 !important;
}

#box_basketsummary .kl-card-body p.kl-card-name {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #0b0f24 !important;
    margin-bottom: 6px !important;
}

#box_basketsummary .kl-card-body p.kl-card-company {
    font-weight: 700 !important;
    color: #1e293b !important;
}

#box_basketsummary .kl-card-body p.kl-card-street {
    color: #334155 !important;
    font-weight: 600 !important;
}

#box_basketsummary .kl-card-body p.kl-card-phone {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #64748b !important;
    margin-top: 4px !important;
    font-weight: 500 !important;
}

#box_basketsummary .kl-card-body p.kl-card-phone i {
    color: #04bbff !important;
}

/* Info list inside 3rd card */
#box_basketsummary .kl-info-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

#box_basketsummary .kl-info-list li {
    background: #f8fafc !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    border: 1px solid #f1f5f9 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

#box_basketsummary .kl-info-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #64748b !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

#box_basketsummary .kl-info-label i {
    color: #04bbff !important;
    font-size: 13px !important;
}

#box_basketsummary .kl-info-value strong {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #0b0f24 !important;
    display: block !important;
    line-height: 1.4 !important;
}

#box_basketsummary .kl-summary-inline-edit {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin-top: 4px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #0284c7 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

#box_basketsummary .kl-summary-inline-edit:hover {
    color: #04bbff !important;
    text-decoration: underline !important;
}

#box_basketsummary .kl-card-footer {
    padding-top: 14px !important;
    border-top: 1px dashed #e2e8f0 !important;
    display: flex !important;
    justify-content: flex-end !important;
}

#box_basketsummary .kl-summary-edit-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 7px 16px !important;
    background: #f0f9ff !important;
    color: #0284c7 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border-radius: 30px !important;
    text-decoration: none !important;
    border: 1px solid #bae6fd !important;
    transition: all 0.2s ease !important;
}

#box_basketsummary .kl-summary-edit-btn:hover {
    background: #04bbff !important;
    color: #ffffff !important;
    border-color: #04bbff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(4, 187, 255, 0.25) !important;
}

#box_basketsummary .kl-summary-edit-btn i {
    font-size: 11px !important;
}

/* Elevated Totals Card */
#box_basketsummary .kl-summary-totals-card {
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 20px !important;
    padding: 24px 32px !important;
    max-width: 440px !important;
    margin-left: auto !important;
    margin-bottom: 35px !important;
    box-shadow: 0 6px 24px rgba(15, 23, 42, 0.04) !important;
}

#box_basketsummary .kl-summary-totals-card .taxes {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

#box_basketsummary .kl-summary-totals-card .kl-tax-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 14px !important;
    color: #64748b !important;
    font-weight: 500 !important;
}

#box_basketsummary .kl-summary-totals-card .kl-tax-row .cost {
    font-weight: 700 !important;
    color: #1e293b !important;
}

#box_basketsummary .kl-summary-totals-card .kl-tax-discount .cost {
    color: #10b981 !important;
    font-weight: 800 !important;
}

#box_basketsummary .kl-summary-totals-card .kl-totals-divider {
    height: 1px !important;
    background: #e2e8f0 !important;
    margin: 18px 0 !important;
}

#box_basketsummary .kl-summary-final-sum {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    margin: 0 !important;
    padding: 0 !important;
}

#box_basketsummary .kl-summary-final-sum .label {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

#box_basketsummary .kl-summary-final-sum .sum {
    font-size: 30px !important;
    font-weight: 900 !important;
    color: #0b0f24 !important;
    letter-spacing: -0.5px !important;
}

/* Action Buttons */
#box_basketsummary .bottombuttons {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 20px !important;
    padding-top: 25px !important;
    border-top: 1px solid #f1f5f9 !important;
    margin-top: 20px !important;
}

#box_basketsummary .bottombuttons .btn.undo.back {
    height: 52px !important;
    padding: 0 28px !important;
    border-radius: 50px !important;
    background: #ffffff !important;
    color: #64748b !important;
    border: 1.5px solid #cbd5e1 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

#box_basketsummary .bottombuttons .btn.undo.back:hover {
    background: #f8fafc !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
    transform: translateY(-2px) !important;
}

#box_basketsummary .bottombuttons .btn.order,
#box_basketsummary .bottombuttons .btn.btn-red {
    height: 52px !important;
    padding: 0 36px !important;
    border-radius: 50px !important;
    background: linear-gradient(135deg, #04bbff 0%, #0ea5e9 100%) !important;
    color: #ffffff !important;
    border: none !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 8px 24px rgba(4, 187, 255, 0.35) !important;
}

#box_basketsummary .bottombuttons .btn.order:hover,
#box_basketsummary .bottombuttons .btn.btn-red:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 28px rgba(4, 187, 255, 0.48) !important;
    filter: brightness(1.04) !important;
}

/* Responsive */
@media (max-width: 991px) {
    #box_basketsummary .kl-summary-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    #box_basketsummary .kl-summary-totals-card {
        max-width: 100% !important;
        margin-left: 0 !important;
    }

    #box_basketsummary .innerbox {
        padding: 24px 20px 30px 20px !important;
    }

    #box_basketsummary .bottombuttons {
        flex-direction: column-reverse !important;
        width: 100% !important;
        gap: 14px !important;
    }

    #box_basketsummary .bottombuttons .btn {
        width: 100% !important;
    }
}

/* ==========================================================================
   Checkout Step 4: Potwierdzenie / Podsumowanie Zakupu (box_basketfinal)
   ========================================================================== */
body#shop_basket_done .leftcol,
body#shop_basket_done .rightcol,
body#shop_basket_finished .leftcol,
body#shop_basket_finished .rightcol,
.innermain:has(#box_basketfinal) .leftcol,
.innermain:has(#box_basketfinal) .rightcol,
#box_basketfinal ~ .leftcol,
.leftcol:has(~ .centercol #box_basketfinal) {
    display: none !important;
}

body#shop_basket_done .centercol,
body#shop_basket_finished .centercol,
.innermain:has(#box_basketfinal) .centercol {
    width: 100% !important;
    max-width: 920px !important;
    float: none !important;
    margin: 0 auto !important;
    padding: 0 15px !important;
}

#box_basketfinal {
    background: #ffffff !important;
    border-radius: 28px !important;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08) !important;
    border: 1px solid #eaebf0 !important;
    margin: 30px auto 70px auto !important;
    max-width: 920px !important;
    overflow: hidden !important;
}

#box_basketfinal .boxhead {
    display: none !important;
}

#box_basketfinal .innerbox.kl-done-wrapper {
    padding: 50px 48px 60px 48px !important;
    text-align: center !important;
}

/* Hero section */
.kl-done-hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin-bottom: 35px !important;
}

.kl-done-badge-wrap {
    position: relative !important;
    width: 96px !important;
    height: 96px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 24px !important;
}

.kl-done-badge-ring {
    position: absolute !important;
    inset: -6px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.25) 0%, rgba(4, 187, 255, 0) 70%) !important;
    animation: klPulseRing 2.4s infinite ease-in-out !important;
}

@keyframes klPulseRing {
    0% { transform: scale(0.9); opacity: 0.8; }
    50% { transform: scale(1.15); opacity: 0.3; }
    100% { transform: scale(0.9); opacity: 0.8; }
}

.kl-done-badge {
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
    font-size: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 12px 28px rgba(16, 185, 129, 0.4) !important;
    position: relative !important;
    z-index: 1 !important;
    animation: klBadgePop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

@keyframes klBadgePop {
    0% { transform: scale(0.3); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.kl-done-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #ecfdf5 !important;
    color: #059669 !important;
    border: 1px solid #a7f3d0 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    padding: 6px 16px !important;
    border-radius: 30px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    margin-bottom: 14px !important;
}

.kl-done-title {
    font-size: 30px !important;
    font-weight: 900 !important;
    color: #0b0f24 !important;
    margin: 0 0 12px 0 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.5px !important;
}

.kl-done-subtitle {
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: #64748b !important;
    max-width: 650px !important;
    margin: 0 auto !important;
}

.kl-done-email {
    color: #0b0f24 !important;
    font-weight: 700 !important;
}

/* Metrics Card */
.kl-done-metrics-card {
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 20px !important;
    padding: 24px 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    gap: 20px !important;
    margin-bottom: 35px !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03) !important;
}

.kl-metric-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
}

.kl-metric-label {
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    color: #64748b !important;
}

.kl-metric-val {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #0b0f24 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.kl-metric-divider {
    width: 1px !important;
    height: 48px !important;
    background: #e2e8f0 !important;
}

.kl-order-number {
    color: #04bbff !important;
    font-family: monospace, sans-serif !important;
    font-size: 24px !important;
}

.kl-order-total {
    font-size: 24px !important;
    font-weight: 900 !important;
    color: #0b0f24 !important;
}

.kl-order-status {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #059669 !important;
    background: #ecfdf5 !important;
    padding: 5px 14px !important;
    border-radius: 20px !important;
    border: 1px solid #a7f3d0 !important;
}

.kl-status-pulse {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #10b981 !important;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7) !important;
    animation: klPulseDot 1.8s infinite !important;
}

@keyframes klPulseDot {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* Payment Action Card */
.kl-payment-action-card {
    background: #ffffff !important;
    background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%) !important;
    border: 2px solid #86efac !important;
    border-radius: 24px !important;
    padding: 34px 30px !important;
    margin: 0 auto 35px auto !important;
    max-width: 680px !important;
    text-align: center !important;
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.08), 0 4px 14px rgba(0, 0, 0, 0.03) !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: hidden !important;
}

.kl-payment-action-header {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin: 0 auto 20px auto !important;
    padding: 8px 24px !important;
    background: #ecfdf5 !important;
    border: 1.5px solid #a7f3d0 !important;
    border-radius: 30px !important;
    text-align: center !important;
}

.kl-payment-action-header i {
    color: #059669 !important;
    font-size: 19px !important;
}

.kl-payment-action-header h4 {
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #065f46 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
}

/* Auto-redirect Notice */
.kl-redirect-notice {
    background: #f0f9ff !important;
    border: 1.5px solid #bae6fd !important;
    border-radius: 16px !important;
    padding: 14px 20px !important;
    margin: 0 auto 20px auto !important;
    max-width: 480px !important;
    box-shadow: 0 4px 14px rgba(14, 165, 233, 0.1) !important;
}

.kl-redirect-notice-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
}

.kl-redirect-spinner {
    width: 16px !important;
    height: 16px !important;
    border: 2.5px solid #bae6fd !important;
    border-top-color: #0284c7 !important;
    border-radius: 50% !important;
    animation: klRedirectSpin 0.7s linear infinite !important;
    flex-shrink: 0 !important;
}

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

.kl-redirect-text {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #0369a1 !important;
}

.kl-redirect-text strong {
    color: #0284c7 !important;
    font-size: 15px !important;
}

.kl-redirect-progress {
    width: 100% !important;
    height: 5px !important;
    background: #e0f2fe !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}

.kl-redirect-bar {
    width: 0%;
    height: 100% !important;
    background: linear-gradient(90deg, #04bbff, #0284c7) !important;
    border-radius: 10px !important;
}

/* Payment Action Body & Button */
.kl-payment-action-body {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
    color: #334155 !important;
}

.kl-payment-action-body * {
    text-align: center !important;
}

.kl-payment-action-body p,
.kl-payment-action-body div,
.kl-payment-action-body span {
    margin: 4px 0 !important;
}

.kl-payment-action-body strong {
    color: #0f172a !important;
    font-weight: 700 !important;
}

/* Enlarge and center Payment CTA Button */
.kl-payment-action-body a:not([href^="mailto"]):not([href^="tel"]),
.kl-payment-action-body button,
.kl-payment-action-body input[type="submit"],
.kl-payment-action-body .btn:not([href^="mailto"]):not([href^="tel"]),
.kl-payment-main-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin: 20px auto !important;
    padding: 16px 44px !important;
    min-height: 56px !important;
    min-width: 280px !important;
    max-width: 92% !important;
    background: linear-gradient(135deg, #04bbff 0%, #0099e6 50%, #0284c7 100%) !important;
    color: #ffffff !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    text-decoration: none !important;
    border: none !important;
    border-radius: 50px !important;
    box-shadow: 0 8px 24px rgba(4, 187, 255, 0.42), 0 2px 6px rgba(4, 187, 255, 0.2) !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    animation: klPaymentBtnPulse 2.2s infinite ease-in-out !important;
    position: relative !important;
    box-sizing: border-box !important;
}

.kl-payment-action-body a:not([href^="mailto"]):not([href^="tel"]):hover,
.kl-payment-action-body button:hover,
.kl-payment-action-body input[type="submit"]:hover,
.kl-payment-action-body .btn:not([href^="mailto"]):not([href^="tel"]):hover,
.kl-payment-main-cta:hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 12px 30px rgba(4, 187, 255, 0.65) !important;
    background: linear-gradient(135deg, #38bdf8 0%, #04bbff 50%, #0284c7 100%) !important;
    color: #ffffff !important;
}

@keyframes klPaymentBtnPulse {
    0% {
        box-shadow: 0 8px 24px rgba(4, 187, 255, 0.42);
    }
    50% {
        box-shadow: 0 10px 30px rgba(4, 187, 255, 0.65), 0 0 0 6px rgba(4, 187, 255, 0.15);
    }
    100% {
        box-shadow: 0 8px 24px rgba(4, 187, 255, 0.42);
    }
}

.kl-payment-action-body a[href^="mailto"],
.kl-payment-action-body a[href^="tel"] {
    color: #0284c7 !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
}

/* Timeline Steps */
.kl-done-timeline-box {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 20px !important;
    padding: 28px 30px !important;
    margin-bottom: 35px !important;
    text-align: left !important;
}

.kl-timeline-heading {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #0b0f24 !important;
    margin: 0 0 20px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.kl-timeline-heading i {
    color: #04bbff !important;
}

.kl-timeline-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    position: relative !important;
}

.kl-timeline-step {
    background: #f8fafc !important;
    border-radius: 16px !important;
    padding: 20px 18px !important;
    border: 1px solid #f1f5f9 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
}

.kl-timeline-step:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04) !important;
}

.kl-step-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    color: #64748b !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
}

.kl-step-done .kl-step-icon {
    background: #10b981 !important;
    border-color: #10b981 !important;
    color: #ffffff !important;
}

.kl-step-active .kl-step-icon {
    background: linear-gradient(135deg, #04bbff 0%, #0ea5e9 100%) !important;
    border-color: #04bbff !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(4, 187, 255, 0.35) !important;
}

.kl-step-icon svg {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    stroke: currentColor !important;
}

.kl-step-content h4 {
    margin: 0 0 6px 0 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #0b0f24 !important;
}

.kl-step-content p {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: #64748b !important;
}

/* Support Box */
.kl-done-support-box {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
    border: 1.5px solid #bae6fd !important;
    border-radius: 20px !important;
    padding: 24px 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    margin-bottom: 25px !important;
    text-align: left !important;
}

.kl-support-title {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #0369a1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 4px !important;
}

.kl-support-info p {
    margin: 0 !important;
    font-size: 13px !important;
    color: #0c4a6e !important;
}

.kl-support-actions {
    display: flex !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
}

.kl-support-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #ffffff !important;
    color: #0284c7 !important;
    border: 1.5px solid #7dd3fc !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    padding: 10px 18px !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.1) !important;
}

.kl-support-btn:hover {
    background: #0284c7 !important;
    color: #ffffff !important;
    border-color: #0284c7 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(14, 165, 233, 0.25) !important;
}

/* Signature & Action Buttons */
.kl-done-signature {
    margin-bottom: 35px !important;
    color: #64748b !important;
    font-size: 14px !important;
}

.kl-done-signature strong {
    color: #0b0f24 !important;
    font-weight: 800 !important;
    display: block !important;
    margin-top: 4px !important;
}

.kl-done-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
}

.kl-btn-home {
    height: 52px !important;
    padding: 0 32px !important;
    border-radius: 50px !important;
    background: linear-gradient(135deg, #04bbff 0%, #0ea5e9 100%) !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    text-decoration: none !important;
    box-shadow: 0 8px 24px rgba(4, 187, 255, 0.35) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.kl-btn-home:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 28px rgba(4, 187, 255, 0.48) !important;
    color: #ffffff !important;
}

.kl-btn-account {
    height: 52px !important;
    padding: 0 28px !important;
    border-radius: 50px !important;
    background: #ffffff !important;
    color: #334155 !important;
    border: 1.5px solid #cbd5e1 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.kl-btn-account:hover {
    background: #f8fafc !important;
    color: #0b0f24 !important;
    border-color: #94a3b8 !important;
    transform: translateY(-2px) !important;
}

.kl-btn-confetti {
    height: 52px !important;
    padding: 0 24px !important;
    border-radius: 50px !important;
    background: #fdf4ff !important;
    color: #a855f7 !important;
    border: 1.5px solid #f0abfc !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.kl-btn-confetti:hover {
    background: #a855f7 !important;
    color: #ffffff !important;
    border-color: #a855f7 !important;
    transform: translateY(-2px) scale(1.03) !important;
    box-shadow: 0 6px 18px rgba(168, 85, 247, 0.35) !important;
}

/* Finished.tpl specific adjustments */
.kl-finished-wrapper .paystatus {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #0b0f24 !important;
    margin: 15px 0 !important;
}

.kl-finished-wrapper .paystatus.payagain {
    color: #64748b !important;
    font-size: 15px !important;
    margin-top: 20px !important;
}

/* Responsive */
@media (max-width: 768px) {
    #box_basketfinal .innerbox.kl-done-wrapper {
        padding: 32px 20px 44px 20px !important;
    }

    .kl-done-title {
        font-size: 24px !important;
    }

    .kl-done-metrics-card {
        flex-direction: column !important;
        gap: 16px !important;
        padding: 20px !important;
    }

    .kl-metric-divider {
        width: 100% !important;
        height: 1px !important;
    }

    .kl-timeline-grid {
        grid-template-columns: 1fr !important;
    }

    .kl-done-support-box {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 20px 18px !important;
        gap: 14px !important;
    }

    .kl-support-actions {
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 10px !important;
    }

    .kl-support-btn {
        flex: 1 1 50% !important;
        min-width: 0 !important;
        width: 50% !important;
        padding: 11px 6px !important;
        font-size: 12.5px !important;
        border-radius: 12px !important;
        justify-content: center !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    .kl-done-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
        margin-bottom: 30px !important;
    }

    .kl-btn-home, .kl-btn-account, .kl-btn-confetti {
        width: 100% !important;
        box-sizing: border-box !important;
        border-radius: 12px !important;
    }
    .kl-btn-home {
        height: 48px !important;
        font-size: 14px !important;
        text-transform: none !important;
    }
    .kl-btn-account {
        height: 46px !important;
        font-size: 14px !important;
    }
    .kl-btn-confetti {
        height: 46px !important;
        font-size: 14px !important;
    }
    #box_basketfinal .innerbox.kl-done-wrapper {
        padding-bottom: 50px !important;
    }
}

/* =======================================================
   PREMIUM CHECKOUT STEPPER (KOSTKOLAND UI)
   ======================================================= */
.basket-steps {
    display: block !important;
    margin: 20px auto 36px auto !important;
    max-width: 780px !important;
    position: relative !important;
    padding: 0 16px !important;
}

.basket-steps ol {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    counter-reset: step !important;
    position: relative !important;
}

/* Background grey connector line */
.basket-steps ol::before {
    content: '' !important;
    position: absolute !important;
    top: 20px !important;
    left: 12.5% !important;
    right: 12.5% !important;
    height: 3px !important;
    background: #e2e8f0 !important;
    border-radius: 3px !important;
    z-index: 1 !important;
}

.basket-steps li {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    position: relative !important;
    z-index: 2 !important;
    background: transparent !important;
    padding: 0 4px !important;
    margin: 0 !important;
}

.basket-steps li a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    text-decoration: none !important;
    width: 100% !important;
    color: inherit !important;
}

/* Completed step cyan progress line */
.basket-steps li::after {
    content: '' !important;
    display: none !important;
    position: absolute !important;
    top: 20px !important;
    left: 50% !important;
    width: 100% !important;
    height: 3px !important;
    background: #04bbff !important;
    border-radius: 3px !important;
    z-index: 1 !important;
    transition: background 0.3s ease !important;
}

.basket-steps li.mark-green:not(.active-step)::after {
    display: block !important;
}

.basket-steps li:last-child::after {
    display: none !important;
}

/* Step Circle Badge (Default / Inactive) */
.basket-steps li::before {
    content: counter(step) !important;
    counter-increment: step !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 2px solid #e2e8f0 !important;
    color: #94a3b8 !important;
    font-family: inherit !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    line-height: 1 !important;
    position: relative !important;
    z-index: 3 !important;
    margin: 0 auto !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Completed Step: Solid Cyan Badge with White Checkmark */
.basket-steps li.mark-green:not(.active-step)::before {
    content: '✓' !important;
    background: #04bbff !important;
    border-color: #04bbff !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    box-shadow: 0 3px 10px rgba(4, 187, 255, 0.35) !important;
    cursor: pointer !important;
}

.basket-steps li.mark-green:not(.active-step):hover::before {
    background: #00a4e4 !important;
    border-color: #00a4e4 !important;
    transform: translateY(-1px) scale(1.05) !important;
    box-shadow: 0 5px 14px rgba(4, 187, 255, 0.45) !important;
}

/* Active Step: Radiant Cyan Gradient with Double Ring Halo */
.basket-steps li.active-step::before {
    background: linear-gradient(135deg, #04bbff 0%, #009be5 100%) !important;
    border: 2px solid #ffffff !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px rgba(4, 187, 255, 0.28), 0 4px 14px rgba(4, 187, 255, 0.35) !important;
}

/* Labels */
.basket-steps li span,
.basket-steps li a span {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    margin-top: 10px !important;
    line-height: 1.35 !important;
    color: #94a3b8 !important;
    transition: color 0.25s ease !important;
}

/* Active Label */
.basket-steps li.active-step span,
.basket-steps li.active-step a span {
    color: #0f172a !important;
    font-weight: 800 !important;
}

/* Completed Label */
.basket-steps li.mark-green:not(.active-step) span,
.basket-steps li.mark-green:not(.active-step) a span {
    color: #04bbff !important;
    font-weight: 700 !important;
}

.basket-steps li.mark-green:not(.active-step) a:hover span {
    color: #009be5 !important;
}

/* Responsive Stepper (Tablets & Mobile) */
@media (max-width: 768px) {
    .basket-steps {
        display: block !important;
        width: 100% !important;
        float: none !important;
        margin: 16px auto 24px auto !important;
        padding: 0 8px !important;
    }
    .basket-steps ol::before {
        top: 17px !important;
        left: 12.5% !important;
        right: 12.5% !important;
        height: 2.5px !important;
    }
    .basket-steps li::before {
        width: 34px !important;
        height: 34px !important;
        font-size: 13px !important;
    }
    .basket-steps li::after {
        top: 17px !important;
        height: 2.5px !important;
    }
    .basket-steps li.active-step::before {
        box-shadow: 0 0 0 2px #ffffff, 0 0 0 5px rgba(4, 187, 255, 0.25) !important;
    }
    .basket-steps li.mark-green:not(.active-step)::before {
        font-size: 14px !important;
    }
    .basket-steps li span,
    .basket-steps li a span {
        font-size: 9.5px !important;
        letter-spacing: 0.2px !important;
        margin-top: 6px !important;
    }
}

@media (max-width: 420px) {
    .basket-steps {
        padding: 0 4px !important;
        margin: 12px auto 20px auto !important;
    }
    .basket-steps ol::before {
        top: 15px !important;
        height: 2px !important;
    }
    .basket-steps li::before {
        width: 30px !important;
        height: 30px !important;
        font-size: 12px !important;
    }
    .basket-steps li::after {
        top: 15px !important;
        height: 2px !important;
    }
    .basket-steps li span,
    .basket-steps li a span {
        font-size: 8.5px !important;
        letter-spacing: 0px !important;
        margin-top: 5px !important;
    }
}

/* Mobile Responsiveness for Step 2 */
@media (max-width: 900px) {
    #box_basketaddress .innerbox,
    #box_basketstep2 .innerbox {
        padding: 28px 20px !important;
    }
    
    #box_basketaddress .f-row,
    #box_basketstep2 .f-row {
        flex-direction: column !important;
        gap: 36px !important;
    }
    
    #box_basketaddress table tr,
    #box_basketstep2 table tr {
        flex-direction: column !important;
        align-items: flex-start !important;
        margin-bottom: 18px !important;
    }
    
    #box_basketaddress table td.label,
    #box_basketstep2 table td.label {
        width: 100% !important;
        text-align: left !important;
        padding-right: 0 !important;
        margin-bottom: 8px !important;
    }
    
    #box_basketaddress table td.input,
    #box_basketstep2 table td.input {
        width: 100% !important;
    }
    
    #box_basketaddress .bottombuttons,
    #box_basketstep2 .bottombuttons {
        flex-direction: column !important;
        gap: 16px !important;
    }
    
    #box_basketaddress .bottombuttons .btn,
    #box_basketstep2 .bottombuttons .btn {
        width: 100% !important;
    }
}


/* =======================================================
   ALL SUBPAGES MODERN UI PACK (KOSTKOLAND)
   ======================================================= */

/* -------------------------------------------------------
   1. GLOBAL SUBPAGE CARD BASE
   ------------------------------------------------------- */
#box_contact,
#box_article,
.box_infopage,
#box_orders,
#box_order,
#box_favourites,
#box_404,
#box_passremind,
#box_basketshipping,
#box_basketsummary,
#box_basketfinal,
#box_articlelist,
#box_news {
    background: #ffffff !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08) !important;
    border: 1px solid #f1f5f9 !important;
    margin: 40px auto 80px auto !important;
    max-width: 1200px !important;
    overflow: hidden !important;
}

#box_contact .innerbox,
#box_article .innerbox,
.box_infopage .innerbox,
#box_orders .innerbox,
#box_order .innerbox,
#box_favourites .innerbox,
#box_404 .innerbox,
#box_passremind .innerbox,
#box_basketshipping .innerbox,
#box_basketsummary .innerbox,
#box_basketfinal .innerbox,
#box_articlelist .innerbox,
#box_news .innerbox {
    padding: 40px !important;
}

/* Common Headings on all Subpages */
#box_contact .boxhead,
#box_article .boxhead,
.box_infopage .boxhead,
#box_orders .boxhead,
#box_order .boxhead,
#box_404 .boxhead,
#box_passremind .boxhead,
#box_basketshipping .boxhead,
#box_basketsummary .boxhead,
#box_basketfinal .boxhead,
#box_articlelist .boxhead,
#box_news .boxhead {
    background: transparent !important;
    border-bottom: 2px solid #f1f5f9 !important;
    padding: 24px 40px 18px 40px !important;
    margin: 0 !important;
}

#box_contact .boxhead h3,
#box_contact .boxhead span,
#box_article .boxhead h3,
#box_article .boxhead span,
.box_infopage .boxhead span,
#box_orders .boxhead span,
#box_order .boxhead span,
#box_404 .boxhead h3,
#box_passremind .boxhead span,
#box_basketfinal .boxhead span {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
}

#box_contact .boxhead img,
#box_article .boxhead img,
.box_infopage .boxhead img,
#box_orders .boxhead img,
#box_favourites .boxhead img,
#box_404 .boxhead img,
#box_passremind .boxhead img,
#box_basketfinal .boxhead img {
    display: none !important;
}

/* -------------------------------------------------------
   2. CONTACT PAGE (#box_contact)
   ------------------------------------------------------- */
#box_contact form {
    max-width: 800px !important;
    margin: 0 auto !important;
}

#box_contact .f-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    margin-bottom: 20px !important;
    gap: 20px !important;
}

#box_contact .f-grid-3,
#box_contact .labe-name,
#box_contact .labe-address,
#box_contact .labe-message {
    width: 25% !important;
    min-width: 140px !important;
    text-align: right !important;
    padding: 0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #334155 !important;
}

#box_contact .f-grid-9 {
    width: 75% !important;
    flex: 1 !important;
    padding: 0 !important;
}

#box_contact input[type="text"],
#box_contact input[type="email"] {
    width: 100% !important;
    height: 50px !important;
    border-radius: 12px !important;
    border: 2px solid #e2e8f0 !important;
    background: #f8fafc !important;
    padding: 0 16px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    outline: none !important;
    transition: all 0.25s ease !important;
    box-sizing: border-box !important;
}

#box_contact textarea {
    width: 100% !important;
    height: 140px !important;
    border-radius: 14px !important;
    border: 2px solid #e2e8f0 !important;
    background: #f8fafc !important;
    padding: 14px 16px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #0f172a !important;
    font-family: inherit !important;
    outline: none !important;
    transition: all 0.25s ease !important;
    box-sizing: border-box !important;
    resize: vertical !important;
}

#box_contact input[type="text"]:focus,
#box_contact input[type="email"]:focus,
#box_contact textarea:focus {
    border-color: #04bbff !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(4, 187, 255, 0.15) !important;
}

#box_contact .bottombuttons {
    display: flex !important;
    justify-content: center !important;
    margin-top: 30px !important;
    padding-top: 20px !important;
}

#box_contact .bottombuttons button.btn,
#box_contact .bottombuttons button.send {
    height: 54px !important;
    border-radius: 12px !important;
    padding: 0 50px !important;
    background: linear-gradient(135deg, #04bbff, #009de0) !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border: none !important;
    box-shadow: 0 8px 25px rgba(4, 187, 255, 0.35) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

#box_contact .bottombuttons button.btn:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 30px rgba(4, 187, 255, 0.45) !important;
}

/* -------------------------------------------------------
   3. PASSWORD REMINDER (#box_passremind, #box_passchange)
   ------------------------------------------------------- */
#box_passremind,
#box_passchange {
    max-width: 600px !important;
}

#box_passremind .innerbox,
#box_passchange .innerbox {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

#box_passremind form,
#box_passchange form {
    width: 100% !important;
    max-width: 440px !important;
}

#box_passremind label,
#box_passchange label {
    display: block !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #334155 !important;
    margin-bottom: 10px !important;
    text-align: left !important;
}

#box_passremind input[type="text"],
#box_passremind input[type="email"],
#box_passchange input[type="password"] {
    width: 100% !important;
    height: 52px !important;
    border-radius: 12px !important;
    border: 2px solid #e2e8f0 !important;
    background: #f8fafc !important;
    padding: 0 16px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    outline: none !important;
    box-sizing: border-box !important;
    text-align: left !important;
    transition: all 0.25s ease !important;
}

#box_passremind input:focus,
#box_passchange input:focus {
    border-color: #04bbff !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(4, 187, 255, 0.15) !important;
}

#box_passremind .bottombuttons,
#box_passchange .bottombuttons {
    display: flex !important;
    justify-content: center !important;
    margin-top: 24px !important;
}

#box_passremind .bottombuttons .btn,
#box_passchange .bottombuttons .btn.passchange {
    width: 100% !important;
    height: 52px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #04bbff, #009de0) !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    border: none !important;
    box-shadow: 0 8px 25px rgba(4, 187, 255, 0.35) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

#box_passremind .bottombuttons .btn:hover,
#box_passchange .bottombuttons .btn.passchange:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 30px rgba(4, 187, 255, 0.45) !important;
}

/* -------------------------------------------------------
   4. ORDERS HISTORY & DETAILS (#box_orders, #box_order)
   ------------------------------------------------------- */
#box_orders table.table,
#box_order table.table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-top: 10px !important;
}

#box_orders table th,
#box_order table th {
    background: #f8fafc !important;
    color: #475569 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 16px 20px !important;
    border-bottom: 2px solid #e2e8f0 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    text-align: left !important;
}

#box_orders table td,
#box_order table td {
    padding: 18px 20px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    vertical-align: middle !important;
}

#box_orders table tr:hover td {
    background: #f8fafc !important;
}

/* Status Badges */
#box_orders td.status span,
#box_order td.status span {
    display: inline-block !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
}

#box_orders td.status span.confirmed,
#box_order td.status span.confirmed {
    background: #e6fffa !important;
    color: #0d9488 !important;
}

#box_orders td.status span.notconfirmed,
#box_order td.status span.notconfirmed {
    background: #fff1f2 !important;
    color: #e11d48 !important;
}

#box_orders td.actions a.btn {
    height: 38px !important;
    padding: 0 20px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 4px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

#box_orders td.actions a.btn.details {
    background: linear-gradient(135deg, #04bbff, #009de0) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(4, 187, 255, 0.25) !important;
}

#box_orders td.actions a.btn.details:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(4, 187, 255, 0.35) !important;
}

#box_orders td.actions a.btn.invoice {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
}

/* =========================================================
   WISHLIST / ULUBIONE PRODUKTY (#box_favourites)
   ========================================================= */

#box_favourites {
    background: #ffffff !important;
    border: 1px solid #eaebf0 !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
    padding: 0 !important;
    overflow: hidden !important;
    margin: 30px auto !important;
    max-width: 1160px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#box_favourites .boxhead {
    background: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 26px 30px !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#box_favourites .boxhead span,
#box_favourites .boxhead h1,
#box_favourites .boxhead .boxhead-title {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #0b0f24 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-align: center !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
}

#box_favourites .boxhead img.px1,
#box_favourites .boxhead img {
    display: none !important;
}

#box_favourites .innerbox {
    padding: 20px 30px 36px 30px !important;
    overflow-x: auto !important;
}

#box_favourites table.favourites,
#box_favourites table.table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin: 0 !important;
}

#box_favourites table th {
    background: #f8fafc !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    padding: 14px 20px !important;
    border-top: 1px solid #e2e8f0 !important;
    border-bottom: 2px solid #e2e8f0 !important;
    border-left: none !important;
    border-right: none !important;
    text-align: left !important;
}

#box_favourites table th.price,
#box_favourites table th.sum,
#box_favourites table th.actions {
    text-align: center !important;
}

#box_favourites table td {
    padding: 18px 20px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    vertical-align: middle !important;
    background: #ffffff !important;
    transition: background 0.2s ease !important;
}

#box_favourites table tr:hover td {
    background: #f8fafc !important;
}

/* Product cell with image and title */
#box_favourites .fav-product-cell {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

#box_favourites .fav-img-link {
    width: 75px !important;
    height: 75px !important;
    min-width: 75px !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    padding: 4px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

#box_favourites .fav-img-link:hover {
    transform: scale(1.05) !important;
    border-color: #04bbff !important;
    box-shadow: 0 4px 12px rgba(4, 187, 255, 0.15) !important;
}

#box_favourites .fav-product-img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
}

#box_favourites .fav-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

#box_favourites td.name a.name {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    transition: color 0.2s ease !important;
}

#box_favourites td.name a.name:hover {
    color: #04bbff !important;
}

#box_favourites td.name .variant {
    font-size: 12.5px !important;
    color: #64748b !important;
    font-weight: 500 !important;
}

/* Price column */
#box_favourites td.price {
    text-align: center !important;
    white-space: nowrap !important;
}

#box_favourites td.price em {
    font-size: 18px !important;
    font-weight: 900 !important;
    color: #04bbff !important;
    font-style: normal !important;
    display: block !important;
}

#box_favourites td.price em.promo-price {
    color: #ef4444 !important;
}

#box_favourites td.price del,
#box_favourites td.price .promo-old-price {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #94a3b8 !important;
    text-decoration: line-through !important;
    display: block !important;
    margin-top: 2px !important;
}

/* Availability column */
#box_favourites td.sum {
    text-align: center !important;
}

#box_favourites .fav-avail-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
    white-space: nowrap !important;
}

/* Actions column with modern buttons */
#box_favourites td.actions {
    text-align: center !important;
    white-space: nowrap !important;
}

#box_favourites td.actions a.btn,
#box_favourites td.actions a.addtobasket,
#box_favourites td.actions a.remove,
#box_favourites td.actions button.btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 42px !important;
    padding: 0 20px !important;
    border-radius: 12px !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    margin: 4px !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
}

#box_favourites td.actions a.addtobasket {
    background: linear-gradient(135deg, #7b00ff 0%, #04BBFF 50%, #7b00ff 100%) !important;
    background-size: 200% 100% !important;
    background-position: 0% 0% !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(123, 0, 255, 0.28) !important;
}

#box_favourites td.actions a.addtobasket:hover {
    background-position: 100% 0% !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(4, 187, 255, 0.4) !important;
    color: #ffffff !important;
}

#box_favourites td.actions a.remove {
    background: #fff1f2 !important;
    color: #e11d48 !important;
    border: 1px solid #ffe4e6 !important;
    box-shadow: none !important;
}

#box_favourites td.actions a.remove:hover {
    background: #e11d48 !important;
    color: #ffffff !important;
    border-color: #e11d48 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(225, 29, 72, 0.25) !important;
}

#box_favourites td.actions img.px1 {
    display: none !important;
}

/* =========================================================
   CUSTOMER PANEL / PANEL KLIENTA (#box_panel)
   ========================================================= */

#box_panel {
    background: #ffffff !important;
    border: 1px solid #eaebf0 !important;
    border-radius: 24px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
    max-width: 1160px !important;
    margin: 30px auto 60px auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#box_panel .boxhead {
    background: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 26px 30px !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#box_panel .boxhead span,
#box_panel .boxhead h1,
#box_panel .boxhead .boxhead-title {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #0b0f24 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-align: center !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
}

#box_panel .boxhead img.px1,
#box_panel .boxhead img {
    display: none !important;
}

#box_panel .innerbox {
    padding: 30px !important;
}

#box_panel .separator {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 24px 0 14px 0 !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

/* Grid Layout for Cards */
.kl-panel-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
}

@media (max-width: 820px) {
    .kl-panel-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Card Styling */
.kl-panel-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    padding: 26px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02) !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease !important;
    box-sizing: border-box !important;
}

.kl-panel-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 28px rgba(4, 187, 255, 0.1) !important;
    border-color: #04bbff !important;
}

.kl-panel-orders-card {
    grid-column: 1 / -1 !important;
    margin-bottom: 24px !important;
}

/* Orders Card Header */
.kl-orders-card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    margin-bottom: 24px !important;
    padding-bottom: 18px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.kl-orders-card-header .kl-card-title {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.kl-returns-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #f0fdf4 !important;
    border: 1.5px solid #bbf7d0 !important;
    border-radius: 50px !important;
    padding: 8px 18px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #16a34a !important;
}

.kl-returns-badge i {
    font-size: 14px !important;
    color: #16a34a !important;
}

.kl-returns-link {
    color: #15803d !important;
    text-decoration: underline !important;
    font-weight: 700 !important;
    margin-left: 4px !important;
}

.kl-returns-link:hover {
    color: #166534 !important;
}

/* Orders Top Bar (for orders.tpl) */
.kl-orders-top-bar {
    margin-bottom: 24px !important;
}

/* Orders List */
.kl-orders-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
}

/* Single Order Card */
.kl-order-card {
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    transition: all 0.25s ease !important;
}

.kl-order-card:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
}

/* Order Header */
.kl-order-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 16px 20px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.kl-order-meta {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
}

.kl-order-id {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.kl-order-id:hover {
    color: #04bbff !important;
}

.kl-order-id i {
    color: #04bbff !important;
    font-size: 14px !important;
}

.kl-order-date {
    font-size: 13px !important;
    color: #64748b !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.kl-order-date i {
    color: #94a3b8 !important;
    font-size: 12px !important;
}

.kl-order-status-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.kl-order-status {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 5px 14px !important;
    border-radius: 50px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
}

.kl-order-status i {
    font-size: 7px !important;
    color: #94a3b8 !important;
}

/* Status color variants */
.kl-order-status--2 { background: #fef3c7 !important; color: #92400e !important; }
.kl-order-status--2 i { color: #f59e0b !important; }
.kl-order-status--3 { background: #dbeafe !important; color: #1e40af !important; }
.kl-order-status--3 i { color: #3b82f6 !important; }
.kl-order-status--4,
.kl-order-status--5 { background: #dcfce7 !important; color: #166534 !important; }
.kl-order-status--4 i,
.kl-order-status--5 i { color: #22c55e !important; }
.kl-order-status--6 { background: #fee2e2 !important; color: #991b1b !important; }
.kl-order-status--6 i { color: #ef4444 !important; }

.kl-parcel-trace-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #04bbff !important;
    text-decoration: none !important;
    padding: 4px 12px !important;
    border: 1.5px solid #04bbff !important;
    border-radius: 50px !important;
    transition: all 0.2s ease !important;
}

.kl-parcel-trace-btn:hover {
    background: #04bbff !important;
    color: #ffffff !important;
}

/* Products Summary */
.kl-order-products-summary {
    padding: 14px 20px !important;
}

.kl-order-products-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

.kl-order-product-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid #eef2f7 !important;
}

.kl-order-product-row:last-child {
    border-bottom: none !important;
}

.kl-prod-main {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
    flex: 1 !important;
}

.kl-prod-icon {
    color: #94a3b8 !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
}

.kl-order-prod-thumb {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    object-fit: contain !important;
    padding: 2px !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04) !important;
    flex-shrink: 0 !important;
    display: block !important;
}

.kl-order-prod-thumb--fallback {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f8fafc !important;
    color: #94a3b8 !important;
    font-size: 16px !important;
}

.kl-prod-title {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.kl-prod-variant {
    font-size: 12px !important;
    color: #94a3b8 !important;
    font-weight: 500 !important;
}

.kl-prod-meta {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex-shrink: 0 !important;
}

.kl-prod-qty {
    font-size: 12.5px !important;
    color: #64748b !important;
    font-weight: 600 !important;
    background: #f1f5f9 !important;
    padding: 3px 10px !important;
    border-radius: 6px !important;
}

.kl-prod-price {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    white-space: nowrap !important;
}

/* Order Footer */
.kl-order-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    padding: 14px 20px !important;
    background: #ffffff !important;
    border-top: 1px solid #f1f5f9 !important;
}

.kl-order-total {
    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;
}

.kl-total-label {
    font-size: 13px !important;
    color: #64748b !important;
    font-weight: 600 !important;
}

.kl-total-val {
    font-size: 20px !important;
    font-weight: 900 !important;
    color: #0b0f24 !important;
}

.kl-order-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.kl-btn-details,
.kl-btn-pay,
.kl-btn-return {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 16px !important;
    border-radius: 50px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    cursor: pointer !important;
    border: 1.5px solid transparent !important;
}

.kl-btn-details {
    background: #f1f5f9 !important;
    color: #334155 !important;
    border-color: #e2e8f0 !important;
}

.kl-btn-details:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
    transform: translateY(-1px) !important;
}

.kl-btn-pay {
    background: linear-gradient(135deg, #04bbff 0%, #0ea5e9 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(4, 187, 255, 0.3) !important;
}

.kl-btn-pay:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(4, 187, 255, 0.4) !important;
    color: #ffffff !important;
}

.kl-btn-return {
    background: #fff7ed !important;
    color: #c2410c !important;
    border-color: #fed7aa !important;
}

.kl-btn-return:hover {
    background: #c2410c !important;
    color: #ffffff !important;
    border-color: #c2410c !important;
    transform: translateY(-1px) !important;
}

/* View All Orders Button */
.kl-orders-view-all {
    text-align: center !important;
    padding-top: 20px !important;
    border-top: 1px solid #f1f5f9 !important;
    margin-top: 6px !important;
}

/* Order Link ID (for orders.tpl table) */
.kl-order-link-id {
    font-weight: 800 !important;
    color: #04bbff !important;
    text-decoration: none !important;
}

.kl-order-link-id:hover {
    color: #0284c7 !important;
    text-decoration: underline !important;
}

/* Empty Orders State */
.kl-empty-orders-state {
    text-align: center !important;
    padding: 50px 30px !important;
}

.kl-empty-orders-state .kl-empty-icon {
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, rgba(4, 187, 255, 0.1), rgba(123, 0, 255, 0.08)) !important;
    color: #04bbff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 32px !important;
    margin: 0 auto 20px auto !important;
}

.kl-empty-orders-state h4 {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 0 10px 0 !important;
}

.kl-empty-orders-state p {
    font-size: 14px !important;
    color: #64748b !important;
    line-height: 1.6 !important;
    max-width: 500px !important;
    margin: 0 auto 24px auto !important;
}

.kl-empty-buttons {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.kl-btn-shop {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 28px !important;
    border-radius: 50px !important;
    background: linear-gradient(135deg, #04bbff 0%, #0ea5e9 100%) !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(4, 187, 255, 0.3) !important;
    transition: all 0.25s ease !important;
}

.kl-btn-shop:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 22px rgba(4, 187, 255, 0.4) !important;
    color: #ffffff !important;
}

.kl-btn-policy {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 24px !important;
    border-radius: 50px !important;
    background: #ffffff !important;
    color: #16a34a !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border: 1.5px solid #bbf7d0 !important;
    transition: all 0.25s ease !important;
}

.kl-btn-policy:hover {
    background: #f0fdf4 !important;
    color: #15803d !important;
    transform: translateY(-1px) !important;
}

/* Orders Table Styling (box_orders) */
#box_orders {
    background: #ffffff !important;
    border: 1px solid #eaebf0 !important;
    border-radius: 24px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
    max-width: 1160px !important;
    margin: 30px auto 35px auto !important;
}

#box_orders .boxhead {
    background: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 26px 30px !important;
    text-align: center !important;
}

#box_orders .boxhead span,
#box_orders .boxhead h1,
#box_orders .boxhead .boxhead-title {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #0b0f24 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
}

#box_orders .innerbox {
    padding: 30px !important;
}

#box_orders table.orders {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    border: 1px solid #e2e8f0 !important;
}

#box_orders table.orders thead tr {
    background: #f8fafc !important;
}

#box_orders table.orders thead th {
    padding: 14px 16px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-bottom: 2px solid #e2e8f0 !important;
    text-align: left !important;
}

#box_orders table.orders tbody td {
    padding: 14px 16px !important;
    font-size: 14px !important;
    color: #334155 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    vertical-align: middle !important;
}

#box_orders table.orders tbody tr:last-child td {
    border-bottom: none !important;
}

#box_orders table.orders tbody tr:hover {
    background: #f8fafc !important;
}

#box_orders table.orders .actions {
    white-space: nowrap !important;
}

#box_orders table.orders .actions .btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 6px 14px !important;
    border-radius: 50px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    margin-right: 4px !important;
}

#box_orders table.orders .actions .btn img.px1 {
    display: none !important;
}

#box_orders table.orders .actions .details {
    background: #f1f5f9 !important;
    color: #334155 !important;
    border: 1px solid #e2e8f0 !important;
}

#box_orders table.orders .actions .details:hover {
    background: #04bbff !important;
    color: #ffffff !important;
    border-color: #04bbff !important;
}

#box_orders table.orders .actions .payment {
    background: linear-gradient(135deg, #04bbff, #0ea5e9) !important;
    color: #ffffff !important;
}

#box_orders table.orders .actions .kl-btn-return {
    padding: 6px 14px !important;
    font-size: 12px !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .kl-order-header {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    .kl-order-footer {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    .kl-order-actions {
        width: 100% !important;
    }
    
    .kl-order-product-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
    }
    
    .kl-orders-card-header {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    .kl-returns-badge {
        flex-wrap: wrap !important;
    }
    
    .kl-empty-buttons {
        flex-direction: column !important;
    }
}

/* Single Order Return Box (#box_order) */
.kl-order-return-box {
    margin-top: 30px !important;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%) !important;
    border: 1.5px solid #bbf7d0 !important;
    border-radius: 18px !important;
    padding: 22px 26px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
}

.kl-return-info {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    flex: 1 !important;
    min-width: 260px !important;
}

.kl-return-icon {
    width: 52px !important;
    height: 52px !important;
    border-radius: 16px !important;
    background: #dcfce7 !important;
    color: #16a34a !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    flex-shrink: 0 !important;
}

.kl-return-text strong {
    display: block !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #14532d !important;
    margin-bottom: 4px !important;
}

.kl-return-text p {
    font-size: 13.5px !important;
    color: #166534 !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

.kl-btn-submit-return {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 24px !important;
    border-radius: 50px !important;
    background: #16a34a !important;
    color: #ffffff !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(22, 163, 74, 0.25) !important;
    transition: all 0.25s ease !important;
    white-space: nowrap !important;
}

.kl-btn-submit-return:hover {
    background: #15803d !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(22, 163, 74, 0.35) !important;
}

.kl-order-bottom-nav {
    margin-top: 24px !important;
    text-align: center !important;
}

.kl-btn-back {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 22px !important;
    border-radius: 50px !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.kl-btn-back:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
    transform: translateY(-1px) !important;
}

#box_order {
    background: #ffffff !important;
    border: 1px solid #eaebf0 !important;
    border-radius: 24px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
    max-width: 1160px !important;
    margin: 30px auto 35px auto !important;
}

#box_order .boxhead {
    background: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 26px 30px !important;
    text-align: center !important;
}

#box_order .boxhead span,
#box_order .boxhead h1,
#box_order .boxhead .boxhead-title {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #0b0f24 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
}

#box_order .innerbox {
    padding: 32px 30px !important;
}

/* Order details table with product thumbnails */
#box_order .kl-order-table-wrap {
    width: 100% !important;
    overflow-x: auto !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 20px !important;
    margin-top: 20px !important;
    margin-bottom: 25px !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.02) !important;
}

#box_order table.products {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    margin: 0 !important;
    background: #ffffff !important;
    border: none !important;
}

#box_order table.products thead tr {
    background: #f8fafc !important;
    border-bottom: 1.5px solid #e2e8f0 !important;
}

#box_order table.products thead td {
    padding: 16px 20px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    border: none !important;
}

#box_order table.products tbody tr {
    border-bottom: 1px solid #f1f5f9 !important;
    transition: background 0.2s ease !important;
}

#box_order table.products tbody tr:last-child {
    border-bottom: none !important;
}

#box_order table.products tbody tr:hover {
    background: #fbfcfe !important;
}

#box_order table.products tbody td {
    padding: 16px 20px !important;
    vertical-align: middle !important;
    border: none !important;
    font-size: 14px !important;
}

#box_order table.products td.img {
    width: 70px !important;
    padding-right: 8px !important;
}

#box_order table.products td.img .kl-order-detail-thumb {
    width: 54px !important;
    height: 54px !important;
    object-fit: contain !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    padding: 3px !important;
    display: block !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04) !important;
}

#box_order table.products td.img .kl-order-detail-thumb--fallback {
    width: 54px !important;
    height: 54px !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #94a3b8 !important;
    font-size: 20px !important;
}

#box_order table.products td.name {
    width: auto !important;
    font-weight: 700 !important;
    color: #0b0f24 !important;
}

#box_order table.products td.name a {
    color: #0b0f24 !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 14.5px !important;
    transition: color 0.2s ease !important;
}

#box_order table.products td.name a:hover {
    color: #04bbff !important;
}

#box_order table.products td.quantity {
    width: 90px !important;
    text-align: center !important;
    font-weight: 700 !important;
    color: #1e293b !important;
}

#box_order table.products thead td.quantity {
    text-align: center !important;
}

#box_order table.products td.price {
    width: 110px !important;
    text-align: right !important;
    font-weight: 600 !important;
    color: #64748b !important;
}

#box_order table.products thead td.price {
    text-align: right !important;
}

#box_order table.products td.sum {
    width: 110px !important;
    text-align: right !important;
    font-weight: 800 !important;
    color: #0b0f24 !important;
    font-size: 15px !important;
}

#box_order table.products thead td.sum {
    text-align: right !important;
}

/* Card Titles */
.kl-card-title {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 0 20px 0 !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.kl-card-title i {
    color: #04bbff !important;
    font-size: 18px !important;
}

/* User Profile Box */
.kl-user-profile-box {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    margin-bottom: 22px !important;
}

.kl-user-avatar {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, rgba(4, 187, 255, 0.15), rgba(123, 0, 255, 0.15)) !important;
    color: #04bbff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 26px !important;
    flex-shrink: 0 !important;
    border: 2px solid rgba(4, 187, 255, 0.2) !important;
}

.kl-user-details .name,
#box_panel p.name {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 0 6px 0 !important;
}

.kl-user-details .mail,
#box_panel p.mail {
    font-size: 14.5px !important;
    color: #64748b !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Addresses Container */
.kl-addresses-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    margin-bottom: 22px !important;
}

@media (max-width: 580px) {
    .kl-addresses-container {
        grid-template-columns: 1fr !important;
    }
}

.kl-address-item {
    background: #f8fafc !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 14px !important;
    padding: 16px !important;
}

.kl-address-item b.title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    color: #475569 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 10px !important;
}

.kl-address-content p {
    margin: 0 0 4px 0 !important;
    font-size: 13.5px !important;
    color: #1e293b !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}

.kl-empty-badge {
    display: inline-block !important;
    font-size: 13px !important;
    color: #94a3b8 !important;
    font-style: italic !important;
}

/* Loyalty Highlight */
.kl-loyalty-highlight {
    background: radial-gradient(circle at top right, rgba(4, 187, 255, 0.12), transparent 70%), #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 22px !important;
    text-align: center !important;
    margin-bottom: 22px !important;
}

.kl-points-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
}

.kl-points-num {
    font-size: 34px !important;
    font-weight: 900 !important;
    color: #04bbff !important;
    letter-spacing: -0.5px !important;
    line-height: 1 !important;
}

.kl-points-sub {
    font-size: 13px !important;
    color: #64748b !important;
    font-weight: 700 !important;
}

.kl-discount-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #ecfdf5 !important;
    color: #059669 !important;
    border: 1px solid #a7f3d0 !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    margin-top: 12px !important;
}

.kl-products-intro {
    font-size: 14px !important;
    color: #64748b !important;
    margin: 0 0 18px 0 !important;
}

/* Action Buttons Inside Cards */
.kl-card-actions {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-top: auto !important;
}

.kl-card-actions--vertical {
    flex-direction: column !important;
    align-items: stretch !important;
}

#box_panel .btn,
#box_panel a.btn,
#box_panel a.button,
#box_panel .editprofile,
#box_panel .changepass,
#box_panel .editaddresses,
#box_panel .loyaltylist,
#box_panel .prodstorage,
#box_panel .prodcomments,
#box_panel .allorders {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 44px !important;
    padding: 0 22px !important;
    border-radius: 12px !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
    border: none !important;
}

#box_panel .btn img.px1,
#box_panel a.btn img.px1 {
    display: none !important;
}

/* Specific Button Styles */
#box_panel .editprofile,
#box_panel .editaddresses {
    background: #f1f5f9 !important;
    color: #1e293b !important;
    border: 1px solid #e2e8f0 !important;
}

#box_panel .editprofile:hover,
#box_panel .editaddresses:hover {
    background: #04bbff !important;
    color: #ffffff !important;
    border-color: #04bbff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 14px rgba(4, 187, 255, 0.3) !important;
}

#box_panel .changepass {
    background: #f8fafc !important;
    color: #64748b !important;
    border: 1px solid #e2e8f0 !important;
}

#box_panel .changepass:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
    transform: translateY(-2px) !important;
}

#box_panel .loyaltylist,
#box_panel .allorders {
    background: linear-gradient(135deg, #7b00ff 0%, #04BBFF 50%, #7b00ff 100%) !important;
    background-size: 200% 100% !important;
    background-position: 0% 0% !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(123, 0, 255, 0.25) !important;
    width: 100% !important;
}

#box_panel .loyaltylist:hover,
#box_panel .allorders:hover {
    background-position: 100% 0% !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(4, 187, 255, 0.4) !important;
    color: #ffffff !important;
}

#box_panel .prodstorage {
    background: #fdf2f8 !important;
    color: #be185d !important;
    border: 1px solid #fce7f3 !important;
    width: 100% !important;
}

#box_panel .prodstorage:hover {
    background: #ec4899 !important;
    color: #ffffff !important;
    border-color: #ec4899 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 14px rgba(236, 72, 153, 0.3) !important;
}

#box_panel .prodcomments {
    background: #f0fdf4 !important;
    color: #15803d !important;
    border: 1px solid #dcfce7 !important;
    width: 100% !important;
}

#box_panel .prodcomments:hover {
    background: #22c55e !important;
    color: #ffffff !important;
    border-color: #22c55e !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.3) !important;
}

/* =========================================================
   ADDRESSES LIST & EDIT (#box_addresses, #box_address)
   ========================================================= */

#box_addresses,
#box_address {
    background: #ffffff !important;
    border: 1px solid #eaebf0 !important;
    border-radius: 24px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
    max-width: 1160px !important;
    margin: 30px auto 60px auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#box_addresses .boxhead,
#box_address .boxhead {
    background: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 26px 30px !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#box_addresses .boxhead span,
#box_addresses .boxhead h1,
#box_addresses .boxhead .boxhead-title,
#box_address .boxhead span,
#box_address .boxhead h1,
#box_address .boxhead .boxhead-title {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #0b0f24 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-align: center !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
}

#box_addresses .boxhead img.px1,
#box_addresses .boxhead img,
#box_address .boxhead img.px1,
#box_address .boxhead img {
    display: none !important;
}

#box_addresses .innerbox,
#box_address .innerbox {
    padding: 36px 30px !important;
}

/* Empty State on Address List */
.kl-empty-state {
    text-align: center !important;
    padding: 40px 20px 20px 20px !important;
    max-width: 540px !important;
    margin: 0 auto !important;
}

.kl-empty-icon {
    width: 76px !important;
    height: 76px !important;
    border-radius: 50% !important;
    background: rgba(4, 187, 255, 0.1) !important;
    color: #04bbff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 32px !important;
    margin: 0 auto 20px auto !important;
}

.kl-empty-state h3 {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 0 10px 0 !important;
}

.kl-empty-state p {
    font-size: 14.5px !important;
    color: #64748b !important;
    line-height: 1.6 !important;
    margin: 0 0 24px 0 !important;
}

/* Bottom Actions on Address List */
.kl-addresses-bottom-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    margin-top: 30px !important;
    flex-wrap: wrap !important;
}

/* Grid of Address Cards */
.kl-addresses-list-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
    gap: 24px !important;
    margin-bottom: 20px !important;
}

.kl-address-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    padding: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.kl-address-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 26px rgba(4, 187, 255, 0.1) !important;
    border-color: #04bbff !important;
}

.kl-address-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
}

.kl-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 5px 12px !important;
    border-radius: 20px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

.kl-badge--billing {
    background: #ecfeff !important;
    color: #0891b2 !important;
    border: 1px solid #cffafe !important;
}

.kl-badge--shipping {
    background: #f0fdf4 !important;
    color: #15803d !important;
    border: 1px solid #dcfce7 !important;
}

.kl-address-card-body p {
    margin: 0 0 6px 0 !important;
    font-size: 14px !important;
    color: #334155 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.kl-address-card-body p.name {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
}

.kl-address-card-body p i {
    color: #04bbff !important;
    font-size: 14px !important;
    width: 16px !important;
    text-align: center !important;
}

.kl-address-card-footer {
    margin-top: 18px !important;
    padding-top: 16px !important;
    border-top: 1px solid #f1f5f9 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.kl-default-triggers {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

/* Common button styles in addresses list & edit */
#box_addresses .btn,
#box_addresses a.btn,
#box_address .btn,
#box_address button.btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 44px !important;
    padding: 0 24px !important;
    border-radius: 12px !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
}

#box_addresses a.add,
#box_address .btn.save {
    background: linear-gradient(135deg, #7b00ff 0%, #04BBFF 50%, #7b00ff 100%) !important;
    background-size: 200% 100% !important;
    background-position: 0% 0% !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(123, 0, 255, 0.28) !important;
}

#box_addresses a.add:hover,
#box_address .btn.save:hover {
    background-position: 100% 0% !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(4, 187, 255, 0.4) !important;
    color: #ffffff !important;
}

#box_addresses a.undo,
#box_addresses a.default,
#box_addresses a.shipping,
#box_address .btn.undo {
    background: #f8fafc !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
}

#box_addresses a.undo:hover,
#box_addresses a.default:hover,
#box_addresses a.shipping:hover,
#box_address .btn.undo:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
    transform: translateY(-2px) !important;
}

#box_addresses a.edit {
    background: #eff6ff !important;
    color: #2563eb !important;
    border: 1px solid #dbeafe !important;
}

#box_addresses a.edit:hover {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25) !important;
}

#box_addresses a.remove {
    background: #fff1f2 !important;
    color: #e11d48 !important;
    border: 1px solid #ffe4e6 !important;
}

#box_addresses a.remove:hover {
    background: #e11d48 !important;
    color: #ffffff !important;
    border-color: #e11d48 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(225, 29, 72, 0.25) !important;
}

/* Edit Address Form Table */
#box_address table.address-handler {
    width: 100% !important;
    max-width: 680px !important;
    margin: 0 auto 30px auto !important;
    border-collapse: separate !important;
    border-spacing: 0 14px !important;
}

#box_address table.address-handler td.label {
    width: 220px !important;
    text-align: right !important;
    padding-right: 20px !important;
    vertical-align: middle !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #334155 !important;
}

#box_address table.address-handler td.input {
    vertical-align: middle !important;
}

#box_address input[type="text"],
#box_address select {
    width: 100% !important;
    max-width: 380px !important;
    height: 44px !important;
    padding: 0 16px !important;
    border-radius: 12px !important;
    border: 1.5px solid #e2e8f0 !important;
    font-size: 14px !important;
    color: #0f172a !important;
    background: #f8fafc !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
}

#box_address input[type="text"]:focus,
#box_address select:focus {
    border-color: #04bbff !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(4, 187, 255, 0.15) !important;
    outline: none !important;
}

#box_address .bottombuttons {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    margin-top: 30px !important;
}

/* =========================================================
   LOYALTY PROGRAM PAGE (#box_loyalty)
   ========================================================= */

#box_loyalty {
    background: #ffffff !important;
    border: 1px solid #eaebf0 !important;
    border-radius: 24px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
    max-width: 1160px !important;
    margin: 30px auto 35px auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#box_loyalty .boxhead {
    background: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 26px 30px !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#box_loyalty .boxhead span,
#box_loyalty .boxhead h1,
#box_loyalty .boxhead h3,
#box_loyalty .boxhead .boxhead-title {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #0b0f24 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-align: center !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
}

#box_loyalty .boxhead img.px1,
#box_loyalty .boxhead img {
    display: none !important;
}

#box_loyalty .innerbox {
    padding: 32px 30px !important;
}

/* Loyalty Hero Card */
.kl-loyalty-hero {
    background: linear-gradient(135deg, #f8fafc 0%, #f0f9ff 100%) !important;
    border: 1.5px solid #e0f2fe !important;
    border-radius: 20px !important;
    padding: 24px 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
    margin-bottom: 24px !important;
    box-shadow: 0 4px 16px rgba(4, 187, 255, 0.04) !important;
}

.kl-loyalty-hero-left {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
}

.kl-loyalty-icon {
    width: 60px !important;
    height: 60px !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, #7b00ff 0%, #04BBFF 100%) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 26px !important;
    box-shadow: 0 6px 18px rgba(4, 187, 255, 0.3) !important;
    flex-shrink: 0 !important;
}

.kl-loyalty-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.kl-loyalty-label {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
}

.kl-loyalty-points-val {
    font-size: 32px !important;
    font-weight: 900 !important;
    color: #0b0f24 !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important;
}

.kl-loyalty-points-val span {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #04bbff !important;
    text-transform: uppercase !important;
}

/* Tooltip button & guide */
.kl-loyalty-hero-right {
    position: relative !important;
}

.kl-btn-points-guide {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: 42px !important;
    padding: 0 20px !important;
    border-radius: 50px !important;
    background: #ffffff !important;
    border: 1.5px solid #04bbff !important;
    color: #04bbff !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: 0 2px 10px rgba(4, 187, 255, 0.12) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.kl-btn-points-guide:hover {
    background: #04bbff !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(4, 187, 255, 0.3) !important;
}

.kl-loyalty-tooltip {
    position: relative !important;
    display: inline-block !important;
}

.kl-loyalty-tooltip-box {
    position: absolute !important;
    right: 0 !important;
    top: calc(100% + 12px) !important;
    width: 340px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    padding: 20px !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12) !important;
    z-index: 100 !important;
    display: none !important;
}

.kl-loyalty-tooltip:hover .kl-loyalty-tooltip-box,
.kl-loyalty-tooltip:focus-within .kl-loyalty-tooltip-box {
    display: block !important;
}

.kl-tooltip-title {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 0 12px 0 !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    display: flex !important;
    align-items: center !important;
}

.kl-loyalty-tooltip-box ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.kl-loyalty-tooltip-box li strong {
    display: block !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-bottom: 2px !important;
}

.kl-loyalty-tooltip-box li p {
    font-size: 12.5px !important;
    color: #64748b !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

/* Notice Card */
.kl-loyalty-notice {
    background: #f0fdf4 !important;
    border: 1.5px solid #dcfce7 !important;
    border-radius: 16px !important;
    padding: 16px 20px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    margin-bottom: 24px !important;
}

.kl-notice-icon {
    font-size: 20px !important;
    color: #16a34a !important;
    line-height: 1.4 !important;
    flex-shrink: 0 !important;
}

.kl-notice-content p {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #166534 !important;
    line-height: 1.55 !important;
    margin: 0 !important;
}

/* Filter Controls */
#box_loyalty .loyalty_filter {
    margin: 0 !important;
}

.kl-loyalty-filter-fieldset {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    flex-wrap: wrap !important;
}

.kl-filter-label {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: inline-flex !important;
    align-items: center !important;
}

.kl-loyalty-pills {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: #f8fafc !important;
    padding: 5px !important;
    border-radius: 50px !important;
    border: 1.5px solid #e2e8f0 !important;
}

.kl-loyalty-pills input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
}

.kl-loyalty-pills label {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 38px !important;
    padding: 0 22px !important;
    border-radius: 50px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    user-select: none !important;
}

.kl-loyalty-pills label:hover {
    color: #0b0f24 !important;
    background: rgba(0, 0, 0, 0.03) !important;
}

.kl-loyalty-pills input[type="radio"]:checked + label {
    background: #04bbff !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(4, 187, 255, 0.35) !important;
}
.box_infopage .innerbox,
#box_article .innerbox {
    font-size: 16px !important;
    line-height: 1.8 !important;
    color: #334155 !important;
}

.box_infopage .fr-view h2,
#box_article .fr-view h2,
.box_infopage .resetcss h2 {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 32px 0 16px 0 !important;
}

.box_infopage .fr-view h3,
#box_article .fr-view h3,
.box_infopage .resetcss h3 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 24px 0 12px 0 !important;
}

.box_infopage .fr-view p,
#box_article .fr-view p,
.box_infopage .resetcss p {
    margin-bottom: 18px !important;
}

.box_infopage .fr-view a,
#box_article .fr-view a,
.box_infopage .resetcss a {
    color: #04bbff !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
}

.box_infopage .fr-view ul,
#box_article .fr-view ul,
.box_infopage .resetcss ul {
    margin: 16px 0 24px 24px !important;
}

.box_infopage .fr-view li,
#box_article .fr-view li,
.box_infopage .resetcss li {
    margin-bottom: 8px !important;
}

/* -------------------------------------------------------
   6. 404 NOT FOUND PAGE (#box_404)
   ------------------------------------------------------- */
#box_404 {
    max-width: 700px !important;
    text-align: left !important;
}

#box_404 .innerbox {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 60px 40px !important;
}

#box_404 .innerbox p {
    font-size: 16px !important;
    color: #475569 !important;
    line-height: 1.6 !important;
    margin-bottom: 24px !important;
}

#box_404 form {
    width: 100% !important;
    max-width: 460px !important;
    margin: 10px auto 30px auto !important;
}

#box_404 input.fadingtext {
    width: 100% !important;
    height: 52px !important;
    border-radius: 12px !important;
    border: 2px solid #e2e8f0 !important;
    background: #f8fafc !important;
    padding: 0 20px !important;
    font-size: 15px !important;
    text-align: left !important;
    margin-bottom: 14px !important;
    box-sizing: border-box !important;
}

#box_404 input.fadingtext:focus {
    border-color: #04bbff !important;
    background: #ffffff !important;
}

#box_404 button.btn {
    width: 100% !important;
    height: 52px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #04bbff, #009de0) !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    border: none !important;
    box-shadow: 0 8px 25px rgba(4, 187, 255, 0.35) !important;
    cursor: pointer !important;
}

#box_404 .innerbox a {
    color: #04bbff !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    text-decoration: underline !important;
}

/* -------------------------------------------------------
   7. BASKET FINAL / THANK YOU PAGE (#box_basketfinal)
   ------------------------------------------------------- */
#box_basketfinal {
    max-width: 800px !important;
    text-align: left !important;
}

#box_basketfinal .innerbox {
    padding: 60px 40px !important;
    font-size: 16px !important;
    color: #334155 !important;
    line-height: 1.7 !important;
}

/* Mobile adjustments for subpages */
@media (max-width: 768px) {
    #box_contact .f-row {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    #box_contact .f-grid-3,
    #box_contact .labe-name,
    #box_contact .labe-address,
    #box_contact .labe-message {
        width: 100% !important;
        text-align: left !important;
        margin-bottom: 6px !important;
    }
    #box_contact .f-grid-9 {
        width: 100% !important;
    }
    #box_contact .innerbox,
    #box_orders .innerbox,
    #box_favourites .innerbox,
    .box_infopage .innerbox {
        padding: 24px 16px !important;
    }
}


/* =======================================================
   PRODUCT BADGES & TAGS (NOWOŚĆ, PROMOCJA, BESTSELLER, ETC.)
   ======================================================= */

.product,
.products .product,
.products.viewphot .product,
.product-main-wrap {
    position: relative !important;
    z-index: 1 !important;
}

/* Badge Container on Product Cards - HORIZONTAL ROW */
.custom-product-badges {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    right: 10px !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 5px !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Base Badge Pill Style */
.custom-product-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px 9px !important;
    border-radius: 20px !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    line-height: 1.2 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
    border: none !important;
    white-space: nowrap !important;
}

/* Specific Badge Color Themes */
.custom-product-badge--new {
    background: #16a34a !important;
}

.custom-product-badge--magnetic {
    background: #0052ff !important;
}

.custom-product-badge--maglev {
    background: #7c3aed !important;
}

.custom-product-badge--promo {
    background: #ef4444 !important;
}

.custom-product-badge--bestseller {
    background: #f59e0b !important;
}

.custom-product-badge--potd {
    background: #ec4899 !important;
}

.custom-product-badge--smart {
    background: #0284c7 !important;
}

/* Legacy / Default Shoper .tags list fallback - HORIZONTAL ROW */
.tags {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    right: 10px !important;
    z-index: 2 !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    pointer-events: none !important;
}

.tags li {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px 9px !important;
    border-radius: 20px !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    line-height: 1.2 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
    border: none !important;
    white-space: nowrap !important;
}

.tags li.new,
.tags .new {
    background: #16a34a !important;
}

.tags li.promo,
.tags .promo {
    background: #ef4444 !important;
}

.tags li.bestseller,
.tags .bestseller {
    background: #f59e0b !important;
}


/* =======================================================
   PRODUCT DETAILS PAGE (#box_productfull) REDESIGN
   ======================================================= */

/* Main Product Card Container */
#box_productfull {
    background: #ffffff !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08) !important;
    border: 1px solid #f1f5f9 !important;
    margin: 30px auto 50px auto !important;
    max-width: 1240px !important;
    overflow: hidden !important;
}

#box_productfull .boxhead {
    display: none !important;
}

#box_productfull .boxhead h1.name {
    display: none !important;
}

#box_productfull .innerbox.product-main-box {
    padding: 36px 40px !important;
}

/* Two-column layout: Gallery (Left) & Buy Box (Right) */
#box_productfull .maininfo .f-row {
    display: flex !important;
    flex-direction: row !important;
    gap: 48px !important;
    align-items: flex-start !important;
}

#box_productfull .maininfo .f-row .f-grid-6 {
    flex: 1 1 0 !important;
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* 1. Gallery Styling */
#box_productfull .prodimage,
#box_productfull .mainimgsize {
    background: #f8fafc !important;
    border-radius: 20px !important;
    border: 1px solid #f1f5f9 !important;
    padding: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    position: relative !important;
}

#box_productfull .prodimage img,
#box_productfull .mainimgsize img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    transition: transform 0.3s ease !important;
}

#box_productfull .prodimage:hover img {
    transform: scale(1.03) !important;
}

/* Thumbnails (managed by modern carousel below) */

/* Force .addtofav to NOT be absolute at top left */
#box_productfull .addtofav,
#box_productfull a.addtofav,
#box_productfull .maininfo .addtofav,
#box_productfull .productimg .addtofav,
#box_productfull .favourite .addtofav,
#box_productfull ul.links-q li.favourite a,
.product_page #box_productfull .addtofav {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    float: none !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 22px !important;
    border-radius: 30px !important;
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    color: #475569 !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    z-index: 1 !important;
}

#box_productfull .addtofav:hover,
#box_productfull a.addtofav:hover,
#box_productfull ul.links-q li.favourite a:hover {
    background: #ffffff !important;
    border-color: #04bbff !important;
    color: #04bbff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(4, 187, 255, 0.18) !important;
}

/* Ensure text says "Dodaj do ulubionych" and has heart */
#box_productfull .addtofav::before,
#box_productfull a.addtofav::before,
#box_productfull ul.links-q li.favourite a::before {
    content: '♡' !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    color: #ff3366 !important;
    margin-right: 4px !important;
}

#box_productfull .addtofav span {
    font-size: 0 !important;
    display: inline !important;
}

#box_productfull .addtofav span::after {
    content: 'Dodaj do ulubionych' !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
}

/* 2. Grey Summary Info Bar (Dostępność, Dostawa, Producent) */
#box_productfull .product-details-summary,
#box_productfull .availability.row,
#box_productfull .maininfo .availability.row {
    background: #f8fafc !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 16px !important;
    padding: 16px 20px !important;
    margin: 0 0 24px 0 !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-around !important;
    align-items: center !important;
    gap: 12px !important;
    text-align: left !important;
    box-sizing: border-box !important;
    width: 100% !important;
    float: none !important;
}

#box_productfull .product-details-summary .pds-col,
#box_productfull .availability .pds-col {
    flex: 1 1 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: left !important;
    gap: 6px !important;
    padding: 0 10px !important;
    border-right: 1px solid #e2e8f0 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    float: none !important;
    width: auto !important;
}

#box_productfull .product-details-summary .pds-col:last-child,
#box_productfull .availability .pds-col:last-child {
    border-right: none !important;
}

#box_productfull .product-details-summary .pds-col .first,
#box_productfull .availability .pds-col .first {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: block !important;
}

#box_productfull .product-details-summary .pds-col .second,
#box_productfull .availability .pds-col .second {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
}

#box_productfull .product-details-summary .pds-stock .second,
#box_productfull .availability .pds-stock .second {
    background: #dcfce7 !important;
    color: #15803d !important;
    padding: 3px 10px !important;
    border-radius: 20px !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
}

#box_productfull .product-details-summary .pds-brand a.brand,
#box_productfull .availability .pds-brand a.brand {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    text-decoration: none !important;
}

#box_productfull .product-details-summary .pds-shipping,
#box_productfull .availability .pds-shipping {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

#box_productfull .product-details-summary .pds-shipping a,
#box_productfull .product-details-summary .pds-shipping a.showShippingCost,
#box_productfull .availability .showShippingCost,
#box_productfull a.showShippingCost {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: #04bbff !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    padding: 0 !important;
    margin: 2px 0 0 0 !important;
    border: none !important;
    box-shadow: none !important;
    height: auto !important;
    width: auto !important;
    display: inline !important;
    line-height: normal !important;
    border-radius: 0 !important;
}

#box_productfull a.showShippingCost:hover {
    color: #009de0 !important;
}

/* 3. Price & Loyalty Points Badge */
#box_productfull .basket .price {
    margin: 20px 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
}

#box_productfull .basket .price .price-name {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
}

#box_productfull .basket .price em.main-price {
    font-size: 38px !important;
    font-weight: 900 !important;
    color: #04bbff !important;
    line-height: 1 !important;
    font-style: normal !important;
    letter-spacing: -0.5px !important;
}

/* Product Details Page - RED PROMO PRICE */
#box_productfull .basket .price em.color,
#box_productfull .basket .price em.main-price.color,
#box_productfull.custom-promo-product .basket .price em,
.product_page #box_productfull .basket .price em.color {
    color: #ef4444 !important;
    font-weight: 900 !important;
}

#box_productfull .basket .price .price__regular {
    margin: 0 0 0 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    font-size: 14px !important;
    color: #94a3b8 !important;
}

#box_productfull .basket .price .price__regular del {
    font-size: 20px !important;
    color: #94a3b8 !important;
    text-decoration: line-through !important;
    font-weight: 600 !important;
    margin-left: 6px !important;
}

/* ENLARGED LOYALTY POINTS BADGE */
#box_productfull .loyalty_points,
#box_productfull span.loyalty_points,
#box_productfull .basket .loyalty_points {
    display: inline-flex !important;
    align-items: center !important;
    background: #ecfdf5 !important;
    border: 1.5px solid #a7f3d0 !important;
    border-radius: 30px !important;
    padding: 8px 18px !important;
    font-size: 14.5px !important;
    font-weight: 800 !important;
    color: #059669 !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.12) !important;
    margin: 6px 0 !important;
    gap: 4px !important;
    width: auto !important;
    float: none !important;
}

#box_productfull .loyalty_points .points,
#box_productfull span.loyalty_points .points {
    font-size: 16px !important;
    font-weight: 900 !important;
    color: #047857 !important;
    margin: 0 4px !important;
}

#box_productfull .loyalty_points .tooltip_pointer,
#box_productfull span.loyalty_points .tooltip_pointer {
    color: #10b981 !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    margin-left: 2px !important;
    font-size: 14px !important;
}

#box_productfull .js__omnibus-price-container {
    font-size: 13px !important;
    color: #94a3b8 !important;
    margin-top: 6px !important;
    line-height: 1.4 !important;
    width: 100% !important;
}

/* 4. Quantity Stepper & Add to Basket */
#box_productfull .basket .addtobasket-wrap,
#box_productfull .basket form {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
    margin-top: 24px !important;
    flex-wrap: wrap !important;
}

#box_productfull .quantity_wrap,
#box_productfull .quantity-stepper {
    display: inline-flex !important;
    align-items: center !important;
    border-radius: 14px !important;
    border: 2px solid #e2e8f0 !important;
    background: #f8fafc !important;
    overflow: hidden !important;
    height: 56px !important;
    box-sizing: border-box !important;
}

#box_productfull input.short,
#box_productfull .quantity_wrap input {
    width: 60px !important;
    height: 100% !important;
    border: none !important;
    background: transparent !important;
    text-align: left !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    outline: none !important;
    padding: 0 !important;
}

#box_productfull .quantity-stepper button,
#box_productfull .quantity_wrap .btn {
    width: 44px !important;
    height: 100% !important;
    background: #f1f5f9 !important;
    border: none !important;
    color: #475569 !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}

#box_productfull .quantity-stepper button:hover,
#box_productfull .quantity_wrap .btn:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}

/* Main Add To Cart Button */
#box_productfull button.addtobasket,
#box_productfull .btn.addtobasket,
#box_productfull .basket button[type="submit"] {
    height: 56px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #7b00ff 0%, #04BBFF 50%, #7b00ff 100%) !important;
    background-size: 200% 100% !important;
    background-position: 0% 0% !important;
    color: #ffffff !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border: none !important;
    box-shadow: 0 8px 25px rgba(123, 0, 255, 0.35) !important;
    padding: 0 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background-position 0.6s ease-in-out, transform 0.25s ease, box-shadow 0.25s ease !important;
    flex: 1 !important;
    min-width: 220px !important;
}

#box_productfull button.addtobasket:hover,
#box_productfull .btn.addtobasket:hover,
#box_productfull .basket button[type="submit"]:hover {
    transform: translateY(-2px) scale(1.01) !important;
    background-position: 100% 0% !important;
    box-shadow: 0 12px 28px rgba(4, 187, 255, 0.45) !important;
    transition: background-position 0.6s ease-in-out, transform 0.25s ease, box-shadow 0.25s ease !important;
}

#box_productfull button.addtobasket img {
    display: none !important;
}

/* 5. Center all 3 links together below the buy box */
#box_productfull .productdetails-more-details,
#box_productfull .links-q,
#box_productfull ul.links-q {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 0 !important;
    margin: 24px auto 0 auto !important;
    list-style: none !important;
    float: none !important;
    width: 100% !important;
    flex-wrap: wrap !important;
    clear: both !important;
    border: none !important;
}

#box_productfull ul.links-q li {
    display: inline-flex !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
}

#box_productfull ul.links-q li.question a,
#box_productfull ul.links-q li.comment a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 22px !important;
    border-radius: 30px !important;
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    color: #475569 !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

#box_productfull ul.links-q li.question a:hover,
#box_productfull ul.links-q li.comment a:hover {
    background: #ffffff !important;
    border-color: #04bbff !important;
    color: #04bbff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(4, 187, 255, 0.18) !important;
}

#box_productfull ul.links-q li.question a::before {
    content: '✉' !important;
    font-size: 15px !important;
    color: #04bbff !important;
    margin-right: 4px !important;
}

#box_productfull ul.links-q li.comment a::before {
    content: '💬' !important;
    font-size: 14px !important;
    color: #04bbff !important;
    margin-right: 4px !important;
}

#box_productfull ul.links-q img {
    display: none !important;
}

/* 6. Variant Selectors / Options */
#box_productfull .variant,
#box_productfull .option {
    margin-bottom: 20px !important;
}

#box_productfull .variant label,
#box_productfull .option label {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #334155 !important;
    margin-bottom: 8px !important;
    display: block !important;
}

#box_productfull .variant select,
#box_productfull .option select {
    width: 100% !important;
    height: 50px !important;
    border-radius: 12px !important;
    border: 2px solid #e2e8f0 !important;
    background: #f8fafc !important;
    padding: 0 16px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    outline: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

#box_productfull .variant select:focus,
#box_productfull .option select:focus {
    border-color: #04bbff !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(4, 187, 255, 0.15) !important;
}

/* 6. Tabs & Description Cards Below */
#box_description,
#box_productdata,
#box_productcomments,
#box_productdeliveries,
#box_productsafety,
#box_productgallery {
    background: #ffffff !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08) !important;
    border: 1px solid #f1f5f9 !important;
    margin: 30px auto !important;
    max-width: 1240px !important;
    overflow: hidden !important;
    padding: 40px !important;
}

#box_description h2,
#box_description h3,
#box_productdata h2,
#box_productdata h3,
#box_productcomments h2,
#box_productcomments h3 {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 20px !important;
    padding-bottom: 12px !important;
    border-bottom: 2px solid #f1f5f9 !important;
}

#box_description .resetcss,
#box_description .fr-view {
    font-size: 16px !important;
    line-height: 1.8 !important;
    color: #334155 !important;
}

#box_description .resetcss p,
#box_description .fr-view p {
    margin-bottom: 16px !important;
}

/* Product Specification Table in Tabs */
#box_productdata table {
    width: 100% !important;
    border-collapse: collapse !important;
}

#box_productdata table tr:nth-child(even) td {
    background: #f8fafc !important;
}

#box_productdata table td {
    padding: 14px 20px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #334155 !important;
}

#box_productdata table td:first-child {
    font-weight: 700 !important;
    color: #0f172a !important;
    width: 35% !important;
}

/* Mobile Responsiveness for Product Page */
@media (max-width: 900px) {
    #box_productfull .maininfo .f-row {
        flex-direction: column !important;
        gap: 32px !important;
    }
    
    #box_productfull .boxhead {
        padding: 24px 20px 16px 20px !important;
    }
    
    #box_productfull .boxhead h1.name {
        font-size: 22px !important;
    }
    
    #box_productfull .innerbox.product-main-box,
    #box_description,
    #box_productdata,
    #box_productcomments {
        padding: 24px 16px !important;
    }
    
    #box_productfull .basket .addtobasket-wrap,
    #box_productfull .basket form {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    #box_productfull button.addtobasket {
        width: 100% !important;
    }
}
/* RESTORED BASKET STYLES FROM SAVE BUILD 3 */
#box_basketlist {
    background: #ffffff !important;
    border: 1px solid #eef2f6 !important;
    border-radius: 20px !important;
    padding: 24px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03) !important;
    margin-bottom: 30px !important;
}

#box_basketlist .boxhead {
    margin-bottom: 20px !important;
    border-bottom: 2px solid #f8fafc !important;
    padding-bottom: 12px !important;
}
#box_basketlist .boxhead h3 {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
}

/* 2. Product Table (Tabela produktów) */
#box_basketlist table.productlist {
    display: table !important;
    border-collapse: separate !important;
    border-spacing: 0 10px !important;
    width: 100% !important;
    table-layout: fixed !important;
    border: none !important;
    margin: 0 0 24px 0 !important;
}

#box_basketlist table.productlist thead {
    display: table-header-group !important;
}
#box_basketlist table.productlist tbody {
    display: table-row-group !important;
    border-bottom: none !important;
}
#box_basketlist table.productlist thead tr,
#box_basketlist table.productlist tbody tr {
    display: table-row !important;
}

#box_basketlist table.productlist thead td {
    display: table-cell !important;
    background: transparent !important;
    border: none !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    color: #64748b !important;
    padding: 12px 8px !important;
    border-bottom: 2px solid #eef2f6 !important;
    white-space: nowrap !important;
    text-align: left !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
}
#box_basketlist table.productlist thead td.name {
    text-align: left !important;
    padding-left: 0 !important;
}

/* Explicit widths applied to BOTH thead and tbody */
#box_basketlist table.productlist .img {
    width: 75px !important;
    text-align: left !important;
    box-sizing: border-box !important;
}
#box_basketlist table.productlist .name {
    width: auto !important;
    text-align: left !important;
    box-sizing: border-box !important;
}
#box_basketlist table.productlist .time {
    width: 105px !important;
    text-align: left !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}
#box_basketlist table.productlist .quantity {
    width: 140px !important;
    text-align: left !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}
#box_basketlist table.productlist .price {
    width: 110px !important;
    text-align: left !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}
#box_basketlist table.productlist .sum {
    width: 115px !important;
    text-align: left !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}
#box_basketlist table.productlist .actions {
    width: 55px !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

/* Row styling */
#box_basketlist table.productlist tbody tr {
    background: #f8fafc !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
    border-radius: 12px !important;
    transition: background 0.2s ease !important;
}
#box_basketlist table.productlist tbody tr:hover {
    background: #f1f5f9 !important;
}
#box_basketlist table.productlist tbody tr td {
    display: table-cell !important;
    border: none !important;
    padding: 14px 8px !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
}
#box_basketlist table.productlist tbody tr td:first-child {
    border-radius: 12px 0 0 12px !important;
    padding-left: 12px !important;
}
#box_basketlist table.productlist tbody tr td:last-child {
    border-radius: 0 12px 12px 0 !important;
    padding-right: 12px !important;
}

#box_basketlist table.productlist tbody td.img img {
    border-radius: 8px !important;
    max-width: 60px !important;
    max-height: 60px !important;
    object-fit: contain !important;
    mix-blend-mode: multiply !important;
    display: block !important;
    margin: 0 auto !important;
}

#box_basketlist table.productlist tbody td.name a {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    text-decoration: none !important;
    display: block !important;
    margin-bottom: 4px !important;
    line-height: 1.35 !important;
    word-break: break-word !important;
}
#box_basketlist table.productlist tbody td.name a:hover {
    color: #04bbff !important;
}
#box_basketlist table.productlist tbody td.name .variant {
    font-size: 12px !important;
    color: #64748b !important;
    display: block !important;
}

#box_basketlist table.productlist tbody td.time {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    vertical-align: middle !important;
}

/* Quantity Stepper styling */
#box_basketlist table.productlist tbody td.quantity {
    vertical-align: middle !important;
    text-align: left !important;
}
#box_basketlist table.productlist .quantity-stepper {
    display: inline-flex !important;
    align-items: center !important;
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 10px !important;
    padding: 2px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    vertical-align: middle !important;
}
#box_basketlist table.productlist .quantity-stepper .btn-qty {
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
    user-select: none !important;
}
#box_basketlist table.productlist .quantity-stepper .btn-qty:hover {
    background: #04bbff !important;
    color: #ffffff !important;
}
#box_basketlist table.productlist .quantity-stepper input {
    width: 36px !important;
    height: 28px !important;
    border: none !important;
    background: transparent !important;
    text-align: left !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}
#box_basketlist table.productlist .quantity-stepper .shaded_inputwrap {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;
}
#box_basketlist table.productlist tbody td.quantity .unit-name {
    font-size: 12px !important;
    color: #64748b !important;
    margin-left: 6px !important;
    vertical-align: middle !important;
    display: inline-block !important;
    font-weight: 600 !important;
}

#box_basketlist table.productlist tbody td.price {
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #334155 !important;
    text-align: left !important;
    vertical-align: middle !important;
    line-height: 1.2 !important;
}
#box_basketlist table.productlist tbody td.price .color_dim.line-through {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #94a3b8 !important;
    display: block !important;
    margin-bottom: 2px !important;
}

#box_basketlist table.productlist tbody td.sum {
    font-size: 15.5px !important;
    font-weight: 800 !important;
    color: #04bbff !important;
    text-align: left !important;
    vertical-align: middle !important;
    line-height: 1.2 !important;
}
#box_basketlist table.productlist tbody td.sum em,
#box_basketlist table.productlist tbody td.sum em.color {
    font-style: normal !important;
    color: #04bbff !important;
    font-size: 15.5px !important;
    font-weight: 800 !important;
    display: inline-block !important;
    vertical-align: middle !important;
    line-height: 1.2 !important;
    position: static !important;
    top: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

#box_basketlist table.productlist tbody td.actions {
    text-align: left !important;
    vertical-align: middle !important;
}
#box_basketlist table.productlist tbody td.actions .prodremove {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 50% !important;
    color: #94a3b8 !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    float: none !important;
    margin: 0 auto !important;
    cursor: pointer !important;
}
#box_basketlist table.productlist tbody td.actions .prodremove:hover {
    background: #fee2e2 !important;
    border-color: #fca5a5 !important;
    color: #ef4444 !important;
    transform: scale(1.1) !important;
}
#box_basketlist table.productlist tbody td.actions .prodremove span {
    display: none !important;
}
#box_basketlist table.productlist tbody td.actions .prodremove i {
    font-size: 13px !important;
    border: none !important;
    padding: 0 !important;
    color: inherit !important;
}

/* 3. Cart Options Container (Layout dolny) */
#box_basketlist #cart-options {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 24px !important;
    margin-top: 24px !important;
}

/* Columns for Delivery and Payment */
#box_basketlist .delivery-container,
#box_basketlist .payment-container {
    flex: 1 1 300px !important;
    background: #f8fafc !important;
    border-radius: 16px !important;
    padding: 20px !important;
    border: 1px solid #eef2f6 !important;
}

#box_basketlist .delivery-container h5,
#box_basketlist .payment-container h5 {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin-bottom: 16px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-bottom: 1px solid #eef2f6 !important;
    padding-bottom: 8px !important;
}

/* Delivery/Payment Items (Radio Buttons as Cards) */
#box_basketlist .delivery,
#box_basketlist .payment {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #ffffff !important;
    border: 2px solid transparent !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    margin-bottom: 8px !important;
    cursor: pointer !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.02) !important;
    transition: all 0.2s ease !important;
}
#box_basketlist .delivery:hover,
#box_basketlist .payment:hover {
    border-color: #bae6fd !important;
}
#box_basketlist .delivery.selected,
#box_basketlist .payment.selected {
    border-color: #04bbff !important;
    background: #f0f9ff !important;
}

/* Inactive / Disabled cards */
#box_basketlist .delivery.disabled,
#box_basketlist .payment.disabled,
#box_basketlist .delivery.disabled-fallback,
#box_basketlist .payment.disabled-fallback {
    opacity: 0.35 !important;
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    box-shadow: none !important;
    filter: grayscale(1) !important;
}
#box_basketlist .delivery.disabled *,
#box_basketlist .payment.disabled *,
#box_basketlist .delivery.disabled-fallback *,
#box_basketlist .payment.disabled-fallback * {
    cursor: not-allowed !important;
    color: #94a3b8 !important;
}
#box_basketlist .delivery,
#box_basketlist .payment,
#box_basketlist .delivery *,
#box_basketlist .payment * {
    pointer-events: auto !important;
    cursor: pointer !important;
}

#box_basketlist .delivery .name,
#box_basketlist .payment .name {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #334155 !important;
}
#box_basketlist .delivery .value {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
}

/* Custom Radio button styling */
#box_basketlist .radio-wrap {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    margin: 0 !important;
}

#box_basketlist .radio-wrap input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 100% !important;
    height: 100% !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 2 !important;
}

#box_basketlist .radio-wrap label {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    border: 2px solid #cbd5e1 !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
}

#box_basketlist .delivery:hover:not(.disabled) .radio-wrap label,
#box_basketlist .payment:hover:not(.disabled) .radio-wrap label {
    border-color: #04bbff !important;
}

#box_basketlist .delivery.selected .radio-wrap label,
#box_basketlist .payment.selected .radio-wrap label,
#box_basketlist .radio-wrap input[type="radio"]:checked + label {
    border-color: #04bbff !important;
    background: #ffffff !important;
}

#box_basketlist .delivery.selected .radio-wrap label::after,
#box_basketlist .payment.selected .radio-wrap label::after,
#box_basketlist .radio-wrap input[type="radio"]:checked + label::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: #04bbff !important;
    display: block !important;
    box-shadow: 0 0 6px rgba(4, 187, 255, 0.4) !important;
}

/* 4. Summary Container */
#box_basketlist .summary-container {
    flex: 1 1 300px !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 24px !important;
    border: 2px solid #04bbff !important;
    box-shadow: 0 8px 24px rgba(4, 187, 255, 0.1) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    text-align: left !important;
}

/* Promocode */
#box_basketlist .promocode {
    background: #f8fafc !important;
    border-radius: 12px !important;
    padding: 14px !important;
    display: block !important;
}
#box_basketlist .promocode .checkbox-wrap {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
}
#box_basketlist .promocode .checkbox-wrap input[type="checkbox"] {
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 8px 0 0 !important;
    opacity: 1 !important;
    position: static !important;
    accent-color: #04bbff !important;
}
#box_basketlist .promocode .checkbox-wrap label {
    display: none !important; /* hide fake shoper checkbox */
}
#box_basketlist .promocode .desc {
    display: inline-block !important;
    vertical-align: middle !important;
}
#box_basketlist .promocode .desc label {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #334155 !important;
    cursor: pointer !important;
}
#box_basketlist .promocode .input {
    display: block !important;
    margin-top: 10px !important;
}
#box_basketlist .promocode .input input {
    width: 100% !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    font-size: 13px !important;
    box-sizing: border-box !important;
}
#box_basketlist .promocode .action {
    display: block !important;
}
#box_basketlist .promocode .action .btn {
    background: #0f172a !important;
    color: #fff !important;
    padding: 10px 16px !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    width: 100% !important;
    margin-top: 8px !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    border: none !important;
    transition: background 0.2s !important;
}
#box_basketlist .promocode .action .btn:hover {
    background: #1e293b !important;
}

/* Recount (Przelicz koszyk) */
#box_basketlist .recount {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 8px 0 !important;
    border-bottom: 1px dashed #eef2f6 !important;
}
#box_basketlist .recount > span {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
}
#box_basketlist .recount .desc {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #64748b !important;
}
#box_basketlist .recount .sum em {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    font-style: normal !important;
}
#box_basketlist .recount .button,
#box_basketlist .recount #recalc {
    display: block !important;
    width: 100% !important;
    margin: 0 0 6px 0 !important;
}
#box_basketlist .recount #recalc button,
#box_basketlist .recount .button .btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 10px 16px !important;
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}
#box_basketlist .recount #recalc button:hover,
#box_basketlist .recount .button .btn:hover {
    background: #04bbff !important;
    border-color: #04bbff !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(4, 187, 255, 0.25) !important;
}

/* Delivery cost line */
#box_basketlist .deliveryhead {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 8px 0 !important;
    border-bottom: 1px dashed #eef2f6 !important;
}
#box_basketlist .deliveryhead .cost {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #64748b !important;
}
#box_basketlist .deliveryhead .value em {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    font-style: normal !important;
}

/* To pay (Do zapłaty) */
#box_basketlist .sum {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: none !important;
    background: #f0f9ff !important;
    margin: 8px -24px -24px -24px !important;
    padding: 20px 24px !important;
    border-radius: 0 0 14px 14px !important;
}
#box_basketlist .sum .desc {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    text-transform: uppercase !important;
}
#box_basketlist .sum .value {
    font-size: 24px !important;
    font-weight: 900 !important;
    color: #04bbff !important;
}

/* 5. Buttons Row */
#box_basketlist .buttons {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 16px !important;
    gap: 16px !important;
}

/* Kontynuuj zakupy */
#box_basketlist .buttons .back .btn {
    background: transparent !important;
    border: 2px solid #e2e8f0 !important;
    color: #64748b !important;
    padding: 14px 24px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    transition: all 0.2s ease !important;
}
#box_basketlist .buttons .back .btn:hover {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

/* Zamawiam */
#box_basketlist .buttons .forward .btn {
    background: #04bbff !important;
    color: #ffffff !important;
    padding: 16px 40px !important;
    border-radius: 12px !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    border: none !important;
    box-shadow: 0 8px 20px rgba(4, 187, 255, 0.3) !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}
#box_basketlist .buttons .forward .btn:hover {
    transform: translateY(-2px) !important;
    background: #009de0 !important;
    box-shadow: 0 12px 24px rgba(4, 187, 255, 0.4) !important;
}

/* Quick Fixes from previous session */
.product .tags { display: none !important; }
.product::after { z-index: 3 !important; }
.product .basket-box, .product .product-options, .product .options { z-index: 10 !important; }
.product .price del + em, .product .price.promo em { color: #ef4444 !important; }
/* RESTORED BASKET STYLES FROM SAVE BUILD 3 */
#box_basketlist {
    background: #ffffff !important;
    border: 1px solid #eef2f6 !important;
    border-radius: 20px !important;
    padding: 24px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03) !important;
    margin-bottom: 30px !important;
}

#box_basketlist .boxhead {
    margin-bottom: 20px !important;
    border-bottom: 2px solid #f8fafc !important;
    padding-bottom: 12px !important;
}
#box_basketlist .boxhead h3 {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
}

/* 2. Product Table (Tabela produktów) */
#box_basketlist table.productlist {
    display: table !important;
    border-collapse: separate !important;
    border-spacing: 0 10px !important;
    width: 100% !important;
    table-layout: fixed !important;
    border: none !important;
    margin: 0 0 24px 0 !important;
}

#box_basketlist table.productlist thead {
    display: table-header-group !important;
}
#box_basketlist table.productlist tbody {
    display: table-row-group !important;
}
#box_basketlist table.productlist thead tr,
#box_basketlist table.productlist tbody tr {
    display: table-row !important;
}

#box_basketlist table.productlist thead td {
    display: table-cell !important;
    background: transparent !important;
    border: none !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    color: #64748b !important;
    padding: 12px 8px !important;
    border-bottom: 2px solid #eef2f6 !important;
    white-space: nowrap !important;
    text-align: left !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
}
#box_basketlist table.productlist thead td.name {
    text-align: left !important;
    padding-left: 0 !important;
}

/* Explicit widths applied to BOTH thead and tbody */
#box_basketlist table.productlist .img {
    width: 75px !important;
    text-align: left !important;
    box-sizing: border-box !important;
}
#box_basketlist table.productlist .name {
    width: auto !important;
    text-align: left !important;
    box-sizing: border-box !important;
}
#box_basketlist table.productlist .time {
    width: 105px !important;
    text-align: left !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}
#box_basketlist table.productlist .quantity {
    width: 140px !important;
    text-align: left !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}
#box_basketlist table.productlist .price {
    width: 110px !important;
    text-align: left !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}
#box_basketlist table.productlist .sum {
    width: 115px !important;
    text-align: left !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}
#box_basketlist table.productlist .actions {
    width: 55px !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

/* Row styling */
#box_basketlist table.productlist tbody tr {
    background: #f8fafc !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
    border-radius: 12px !important;
    transition: background 0.2s ease !important;
}
#box_basketlist table.productlist tbody tr:hover {
    background: #f1f5f9 !important;
}
#box_basketlist table.productlist tbody tr td {
    display: table-cell !important;
    border: none !important;
    padding: 14px 8px !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
}
#box_basketlist table.productlist tbody tr td:first-child {
    border-radius: 12px 0 0 12px !important;
    padding-left: 12px !important;
}
#box_basketlist table.productlist tbody tr td:last-child {
    border-radius: 0 12px 12px 0 !important;
    padding-right: 12px !important;
}

#box_basketlist table.productlist tbody td.img img {
    border-radius: 8px !important;
    max-width: 60px !important;
    max-height: 60px !important;
    object-fit: contain !important;
    mix-blend-mode: multiply !important;
    display: block !important;
    margin: 0 auto !important;
}

#box_basketlist table.productlist tbody td.name a {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    text-decoration: none !important;
    display: block !important;
    margin-bottom: 4px !important;
    line-height: 1.35 !important;
    word-break: break-word !important;
}
#box_basketlist table.productlist tbody td.name a:hover {
    color: #04bbff !important;
}
#box_basketlist table.productlist tbody td.name .variant {
    font-size: 12px !important;
    color: #64748b !important;
    display: block !important;
}

#box_basketlist table.productlist tbody td.time {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    vertical-align: middle !important;
}

/* Quantity Stepper styling */
#box_basketlist table.productlist tbody td.quantity {
    vertical-align: middle !important;
    text-align: left !important;
}
#box_basketlist table.productlist .quantity-stepper {
    display: inline-flex !important;
    align-items: center !important;
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 10px !important;
    padding: 2px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    vertical-align: middle !important;
}
#box_basketlist table.productlist .quantity-stepper .btn-qty {
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
    user-select: none !important;
}
#box_basketlist table.productlist .quantity-stepper .btn-qty:hover {
    background: #04bbff !important;
    color: #ffffff !important;
}
#box_basketlist table.productlist .quantity-stepper input {
    width: 36px !important;
    height: 28px !important;
    border: none !important;
    background: transparent !important;
    text-align: left !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}
#box_basketlist table.productlist .quantity-stepper .shaded_inputwrap {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;
}
#box_basketlist table.productlist tbody td.quantity .unit-name {
    font-size: 12px !important;
    color: #64748b !important;
    margin-left: 6px !important;
    vertical-align: middle !important;
    display: inline-block !important;
    font-weight: 600 !important;
}

#box_basketlist table.productlist tbody td.price {
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #334155 !important;
    text-align: left !important;
    vertical-align: middle !important;
    line-height: 1.2 !important;
}
#box_basketlist table.productlist tbody td.price .color_dim.line-through {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #94a3b8 !important;
    display: block !important;
    margin-bottom: 2px !important;
}

#box_basketlist table.productlist tbody td.sum {
    font-size: 15.5px !important;
    font-weight: 800 !important;
    color: #04bbff !important;
    text-align: left !important;
    vertical-align: middle !important;
    line-height: 1.2 !important;
}
#box_basketlist table.productlist tbody td.sum em,
#box_basketlist table.productlist tbody td.sum em.color {
    font-style: normal !important;
    color: #04bbff !important;
    font-size: 15.5px !important;
    font-weight: 800 !important;
    display: inline-block !important;
    vertical-align: middle !important;
    line-height: 1.2 !important;
    position: static !important;
    top: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

#box_basketlist table.productlist tbody td.actions {
    text-align: left !important;
    vertical-align: middle !important;
}
#box_basketlist table.productlist tbody td.actions .prodremove {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 50% !important;
    color: #94a3b8 !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    float: none !important;
    margin: 0 auto !important;
    cursor: pointer !important;
}
#box_basketlist table.productlist tbody td.actions .prodremove:hover {
    background: #fee2e2 !important;
    border-color: #fca5a5 !important;
    color: #ef4444 !important;
    transform: scale(1.1) !important;
}
#box_basketlist table.productlist tbody td.actions .prodremove span {
    display: none !important;
}
#box_basketlist table.productlist tbody td.actions .prodremove i {
    font-size: 13px !important;
    border: none !important;
    padding: 0 !important;
    color: inherit !important;
}

/* 3. Cart Options Container (Layout dolny) */
#box_basketlist #cart-options {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 24px !important;
    margin-top: 24px !important;
}

/* Columns for Delivery and Payment */
#box_basketlist .delivery-container,
#box_basketlist .payment-container {
    flex: 1 1 300px !important;
    background: #f8fafc !important;
    border-radius: 16px !important;
    padding: 20px !important;
    border: 1px solid #eef2f6 !important;
}

#box_basketlist .delivery-container h5,
#box_basketlist .payment-container h5 {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin-bottom: 16px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-bottom: 1px solid #eef2f6 !important;
    padding-bottom: 8px !important;
}

/* Delivery/Payment Items (Radio Buttons as Cards) */
#box_basketlist .delivery,
#box_basketlist .payment {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #ffffff !important;
    border: 2px solid transparent !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    margin-bottom: 8px !important;
    cursor: pointer !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.02) !important;
    transition: all 0.2s ease !important;
}
#box_basketlist .delivery:hover,
#box_basketlist .payment:hover {
    border-color: #bae6fd !important;
}
#box_basketlist .delivery.selected,
#box_basketlist .payment.selected {
    border-color: #04bbff !important;
    background: #f0f9ff !important;
}

/* Inactive / Disabled cards */
#box_basketlist .delivery.disabled,
#box_basketlist .payment.disabled,
#box_basketlist .delivery.disabled-fallback,
#box_basketlist .payment.disabled-fallback {
    opacity: 0.35 !important;
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    box-shadow: none !important;
    filter: grayscale(1) !important;
}
#box_basketlist .delivery.disabled *,
#box_basketlist .payment.disabled *,
#box_basketlist .delivery.disabled-fallback *,
#box_basketlist .payment.disabled-fallback * {
    cursor: not-allowed !important;
    color: #94a3b8 !important;
}
#box_basketlist .delivery,
#box_basketlist .payment,
#box_basketlist .delivery *,
#box_basketlist .payment * {
    pointer-events: auto !important;
    cursor: pointer !important;
}

#box_basketlist .delivery .name,
#box_basketlist .payment .name {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #334155 !important;
}
#box_basketlist .delivery .value {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
}

/* Custom Radio button styling */
#box_basketlist .radio-wrap {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    margin: 0 !important;
}

#box_basketlist .radio-wrap input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 100% !important;
    height: 100% !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 2 !important;
}

#box_basketlist .radio-wrap label {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    border: 2px solid #cbd5e1 !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
}

#box_basketlist .delivery:hover:not(.disabled) .radio-wrap label,
#box_basketlist .payment:hover:not(.disabled) .radio-wrap label {
    border-color: #04bbff !important;
}

#box_basketlist .delivery.selected .radio-wrap label,
#box_basketlist .payment.selected .radio-wrap label,
#box_basketlist .radio-wrap input[type="radio"]:checked + label {
    border-color: #04bbff !important;
    background: #ffffff !important;
}

#box_basketlist .delivery.selected .radio-wrap label::after,
#box_basketlist .payment.selected .radio-wrap label::after,
#box_basketlist .radio-wrap input[type="radio"]:checked + label::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: #04bbff !important;
    display: block !important;
    box-shadow: 0 0 6px rgba(4, 187, 255, 0.4) !important;
}

/* 4. Summary Container */
#box_basketlist .summary-container {
    flex: 1 1 300px !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 24px !important;
    border: 2px solid #04bbff !important;
    box-shadow: 0 8px 24px rgba(4, 187, 255, 0.1) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    text-align: left !important;
}

/* Promocode */
#box_basketlist .promocode {
    background: #f8fafc !important;
    border-radius: 12px !important;
    padding: 14px !important;
    display: block !important;
}
#box_basketlist .promocode .checkbox-wrap {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
}
#box_basketlist .promocode .checkbox-wrap input[type="checkbox"] {
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 8px 0 0 !important;
    opacity: 1 !important;
    position: static !important;
    accent-color: #04bbff !important;
}
#box_basketlist .promocode .checkbox-wrap label {
    display: none !important; /* hide fake shoper checkbox */
}
#box_basketlist .promocode .desc {
    display: inline-block !important;
    vertical-align: middle !important;
}
#box_basketlist .promocode .desc label {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #334155 !important;
    cursor: pointer !important;
}
#box_basketlist .promocode .input {
    display: block !important;
    margin-top: 10px !important;
}
#box_basketlist .promocode .input input {
    width: 100% !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    font-size: 13px !important;
    box-sizing: border-box !important;
}
#box_basketlist .promocode .action {
    display: block !important;
}
#box_basketlist .promocode .action .btn {
    background: #0f172a !important;
    color: #fff !important;
    padding: 10px 16px !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    width: 100% !important;
    margin-top: 8px !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    border: none !important;
    transition: background 0.2s !important;
}
#box_basketlist .promocode .action .btn:hover {
    background: #1e293b !important;
}

/* Recount (Przelicz koszyk) */
#box_basketlist .recount {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 8px 0 !important;
    border-bottom: 1px dashed #eef2f6 !important;
}
#box_basketlist .recount > span {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
}
#box_basketlist .recount .desc {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #64748b !important;
}
#box_basketlist .recount .sum em {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    font-style: normal !important;
}
#box_basketlist .recount .button,
#box_basketlist .recount #recalc {
    display: block !important;
    width: 100% !important;
    margin: 0 0 6px 0 !important;
}
#box_basketlist .recount #recalc button,
#box_basketlist .recount .button .btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 10px 16px !important;
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}
#box_basketlist .recount #recalc button:hover,
#box_basketlist .recount .button .btn:hover {
    background: #04bbff !important;
    border-color: #04bbff !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(4, 187, 255, 0.25) !important;
}

/* Delivery cost line */
#box_basketlist .deliveryhead {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 8px 0 !important;
    border-bottom: 1px dashed #eef2f6 !important;
}
#box_basketlist .deliveryhead .cost {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #64748b !important;
}
#box_basketlist .deliveryhead .value em {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    font-style: normal !important;
}

/* To pay (Do zapłaty) */
#box_basketlist .sum {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: none !important;
    background: #f0f9ff !important;
    margin: 8px -24px -24px -24px !important;
    padding: 20px 24px !important;
    border-radius: 0 0 14px 14px !important;
}
#box_basketlist .sum .desc {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    text-transform: uppercase !important;
}
#box_basketlist .sum .value {
    font-size: 24px !important;
    font-weight: 900 !important;
    color: #04bbff !important;
}

/* 5. Buttons Row */
#box_basketlist .buttons {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 16px !important;
    gap: 16px !important;
}

/* Kontynuuj zakupy */
#box_basketlist .buttons .back .btn {
    background: transparent !important;
    border: 2px solid #e2e8f0 !important;
    color: #64748b !important;
    padding: 14px 24px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    transition: all 0.2s ease !important;
}
#box_basketlist .buttons .back .btn:hover {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
}

/* Zamawiam */
#box_basketlist .buttons .forward .btn {
    background: #04bbff !important;
    color: #ffffff !important;
    padding: 16px 40px !important;
    border-radius: 12px !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    border: none !important;
    box-shadow: 0 8px 20px rgba(4, 187, 255, 0.3) !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}
#box_basketlist .buttons .forward .btn:hover {
    transform: translateY(-2px) !important;
    background: #009de0 !important;
    box-shadow: 0 12px 24px rgba(4, 187, 255, 0.4) !important;
}

/* =========================================
   PRODUCT PAGE FIXES (Antigravity v2)
========================================= */

/* 1. Tytuł produktu – owalna, delikatna ramka zgodna z UI sklepu */
body.shop_product h1.name,
#box_productfull h1.name {
    text-align: center !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1.35 !important;
    margin: 0 0 20px 0 !important;
    padding: 14px 24px !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 32px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
    letter-spacing: -0.2px !important;
}

/* 2. Dostępność / Dostawa / Producent */
#box_productfull .product-details-summary,
#box_productfull .availability {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    border: none !important;
    background: #f8fafc !important;
    padding: 20px !important;
    border-radius: 12px !important;
    margin-bottom: 30px !important;
}
#box_productfull .product-details-summary .pds-col,
#box_productfull .availability .pds-col {
    border: none !important; /* Usunięcie kresek */
    flex: 1 1 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}
/* Odpowiednia kolejność */
#box_productfull .pds-stock { order: 1 !important; }
#box_productfull .pds-shipping { order: 2 !important; }
#box_productfull .pds-brand { order: 3 !important; }


/* Kolejność linków akcji */
#box_productfull ul.links-q li.favourite { order: 1 !important; }
#box_productfull ul.links-q li.question { order: 2 !important; }
#box_productfull ul.links-q li.comment { order: 3 !important; }

/* Linki akcji – inline pills w jednym rzędzie */
#box_productfull ul.links-q li a {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 30px !important;
    padding: 10px 22px !important;
    height: auto !important;
    box-sizing: border-box !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    text-decoration: none !important;
    background: #f8fafc !important;
    transition: all 0.2s ease !important;
    gap: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}
#box_productfull ul.links-q li a:hover {
    background: #ffffff !important;
    border-color: #04bbff !important;
    color: #04bbff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(4, 187, 255, 0.18) !important;
}
#box_productfull ul.links-q li a img,
#box_productfull ul.links-q li a::before {
    margin-right: 4px !important;
    margin-bottom: 0 !important;
    font-size: 15px !important;
}

/* Ukrycie Ocena i Producent pod koszem – teraz w info-barze */
#box_productfull .productdetails-more .evaluation,
#box_productfull .productdetails-more .manufacturer,
#box_productfull .productdetails-more .code,
#box_productfull .productdetails-more-details > .productdetails-more {
    display: none !important;
}

/* "dodaj opinię" – nowy rząd, wyśrodkowany */
#box_productfull ul.links-q li.comment {
    flex-basis: 100% !important;
    display: flex !important;
    justify-content: center !important;
}

/* ============================================
   AKCESORIA SLIDER - Kostkoland
============================================ */
.kl-accessories-slider-wrap {
    margin: 40px 0;
    padding: 32px 0;
    border-top: 2px solid #f1f5f9;
    border-bottom: 2px solid #f1f5f9;
}
.shop_basket .kl-accessories-slider-wrap {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    padding: 28px 16px !important;
    margin: 32px 0 40px 0 !important;
}
.kl-accessories-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    margin-bottom: 24px !important;
    width: 100% !important;
}
.kl-accessories-title {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
}
.kl-accessories-viewall {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #04bbff !important;
    text-decoration: none !important;
    padding: 8px 18px !important;
    border: 1.5px solid #04bbff !important;
    border-radius: 20px !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}
.kl-accessories-viewall:hover {
    background: #04bbff !important;
    color: #fff !important;
}

/* Przycisk Kup teraz w sliderze */
.kl-acc-buy-btn {
    margin-top: 10px !important;
    width: 100% !important;
    padding: 9px 12px !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #7b00ff 0%, #04BBFF 100%) !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(123, 0, 255, 0.25) !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.kl-acc-buy-btn:hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 6px 18px rgba(4, 187, 255, 0.45) !important;
    filter: brightness(1.08) !important;
}

/* Slider container */
.kl-accessories-slider {
    position: relative;
    overflow: hidden;
}

/* Sliding track */
.kl-acc-track {
    display: flex;
    gap: 16px;
    transition: transform 0.35s cubic-bezier(.4,0,.2,1);
    will-change: transform;
}

/* Individual product card */
.kl-acc-item {
    flex: 0 0 calc(20% - 13px);
    min-width: 160px;
    max-width: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px 12px;
    text-decoration: none;
    color: inherit;
    transition: all 0.25s ease;
    box-sizing: border-box;
}
.kl-acc-item:hover {
    background: #fff;
    border-color: #04bbff;
    box-shadow: 0 4px 20px rgba(4,187,255,0.12);
    transform: translateY(-3px);
}
.kl-acc-img-wrap {
    width: 100%;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}
.kl-acc-img-wrap img {
    max-width: 100%;
    max-height: 110px;
    object-fit: contain;
    mix-blend-mode: multiply;
    border-radius: 8px;
}
.kl-acc-cat {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 5px;
    display: block;
}
.kl-acc-name {
    font-size: 12px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.4;
    margin-bottom: 8px;
    display: block;
    flex: 1;
}
.kl-acc-price {
    font-size: 15px;
    font-weight: 900;
    color: #04bbff;
    display: block;
}

/* Navigation buttons */
.kl-acc-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #e2e8f0;
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0f172a;
    transition: all 0.2s ease;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    padding: 0;
}
.kl-acc-nav:hover {
    background: #04bbff;
    border-color: #04bbff;
    color: #fff;
    box-shadow: 0 4px 14px rgba(4,187,255,0.25);
}
.kl-acc-prev { left: 0; }
.kl-acc-next { right: 0; }

/* Fade edge effect */
.kl-accessories-slider::before,
.kl-accessories-slider::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50px;
    z-index: 5;
    pointer-events: none;
}
.kl-accessories-slider::before {
    left: 0;
    background: linear-gradient(to right, #fff 0%, transparent 100%);
}
.kl-accessories-slider::after {
    right: 0;
    background: linear-gradient(to left, #fff 0%, transparent 100%);
}

/* Padding for nav buttons not to cover cards */
.kl-acc-track {
    padding: 8px 50px;
}
/* REWRITE PRICE LAYOUT */
#box_productfull .price,
#box_productfull .basket .price {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box !important;
    float: none !important;
    clear: both !important;
    margin: 16px 0 8px 0 !important;
    padding: 0 !important;
}
#box_productfull .price > span {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #475569 !important;
    text-transform: uppercase !important;
}
#box_productfull .price p {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}
#box_productfull .main-price {
    font-size: 38px !important;
    font-weight: 900 !important;
    color: #04bbff !important;
    line-height: 1 !important;
}
#box_productfull .loyalty_points {
    display: inline-flex !important;
    align-items: center !important;
    background: #ecfdf5 !important;
    border: 1.5px solid #a7f3d0 !important;
    color: #047857 !important;
    padding: 5px 14px !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.12) !important;
    box-sizing: border-box !important;
}
#box_productfull .loyalty_points label.tooltip { display: none !important; }

/* Force omnibus and regular price to next line if needed, or hide them if empty */
#box_productfull .price__regular, 
#box_productfull .js__omnibus-price-container {
    width: 100% !important;
    text-align: left !important;
    margin-top: 8px !important;
    color: #94a3b8 !important;
    font-size: 13px !important;
}

.kl-cell-badge {
    background: #dcfce7 !important;
    color: #15803d !important;
    padding: 3px 12px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    display: inline-block !important;
    margin-top: 2px !important;
}

.kl-cell-badge.kl-badge-oos {
    background: #fee2e2 !important;
    color: #dc2626 !important;
}

/* KOSZYK BUTTON & QUANTITY */
#box_productfull .basket form,
#box_productfull form.form-basket {
    width: 100% !important;
}

#box_productfull .addtobasket-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    margin: 24px auto !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    border: none !important;
    padding: 0 !important;
}

#box_productfull .addtobasket-container.none,
#box_productfull .addtobasket-container.is-hidden,
#box_productfull .addtobasket-container[style*="display: none"],
#box_productfull.product-out-of-stock .addtobasket-container,
.product-out-of-stock .addtobasket-container,
.bundle-fixed-cart-container.none,
.bundle-fixed-cart-container.is-hidden {
    display: none !important;
}

#box_productfull .quantity_wrap {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

#box_productfull .quantity_name,
#box_productfull .quantity_wrap .unit,
#box_productfull .quantity_wrap span.unit {
    display: none !important;
}

#box_productfull inpost-izi-button {
    display: none !important;
}

#box_productfull .button_wrap {
    display: inline-flex !important;
    flex: 1 1 auto !important;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    max-width: 340px !important;
}

#box_productfull .button_wrap button.addtobasket {
    width: 100% !important;
    flex: 1 !important;
}
#box_productfull .quantity_wrap input,
#box_productfull .kl-qty-stepper input,
#box_productfull input[name="quantity"] {
    width: 52px !important;
    height: 100% !important;
    border: none !important;
    background: transparent !important;
    text-align: center !important;
    font-size: 19px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
    -moz-appearance: textfield !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    display: block !important;
}
#box_productfull .quantity_wrap input::-webkit-outer-spin-button,
#box_productfull .quantity_wrap input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

#box_productfull .addtobasket,
#box_productfull button.addtobasket,
#box_productfull .btn.addtobasket,
#box_productfull .basket button[type="submit"] {
    height: 56px !important;
    background: linear-gradient(135deg, #7b00ff 0%, #04BBFF 50%, #7b00ff 100%) !important;
    background-size: 200% 100% !important;
    background-position: 0% 0% !important;
    color: white !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    padding: 0 40px !important;
    border-radius: 14px !important;
    border: none !important;
    box-shadow: 0 8px 25px rgba(123, 0, 255, 0.35) !important;
    transition: background-position 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s ease, box-shadow 0.25s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}
#box_productfull .addtobasket:hover,
#box_productfull button.addtobasket:hover,
#box_productfull .btn.addtobasket:hover,
#box_productfull .basket button[type="submit"]:hover {
    transform: translateY(-2px) scale(1.01) !important;
    background-position: 100% 0% !important;
    box-shadow: 0 12px 28px rgba(4, 187, 255, 0.45) !important;
    transition: background-position 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s ease, box-shadow 0.25s ease !important;
}
#box_productfull .addtobasket:active,
#box_productfull button.addtobasket:active,
#box_productfull .btn.addtobasket:active {
    transform: translateY(0) scale(0.98) !important;
    box-shadow: 0 4px 12px rgba(123, 0, 255, 0.3) !important;
    transition: background-position 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s ease, box-shadow 0.25s ease !important;
}

/* TABELKA 6 PÓL (INFO BOX) - PERFEKCYJNE, JEDNOLITE LINIE */
table.kl-info-table-6 {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    margin: 0 0 24px 0 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02) !important;
}

table.kl-info-table-6 td.kl-table-cell {
    width: 33.3333% !important;
    padding: 13px 8px !important;
    text-align: center !important;
    vertical-align: middle !important;
    border-right: 1px solid #e2e8f0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-sizing: border-box !important;
    background: transparent !important;
}

table.kl-info-table-6 tr td.kl-table-cell:last-child {
    border-right: none !important;
}

table.kl-info-table-6 tr:last-child td.kl-table-cell {
    border-bottom: none !important;
}

.kl-table-cell-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    width: 100% !important;
}

/* Podział kolumn na desktopie: zdjęcie po lewej (42%), dane produktu po prawej (58%) */
@media (min-width: 901px) {
    #box_productfull .maininfo .f-row {
        display: flex !important;
        flex-direction: row !important;
        gap: 32px !important;
        align-items: flex-start !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    #box_productfull .maininfo .f-row > .productimg {
        flex: 0 0 42% !important;
        max-width: 42% !important;
        width: 42% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    #box_productfull .maininfo .f-row > .f-grid-6 {
        flex: 1 1 0 !important;
        max-width: calc(58% - 32px) !important;
        width: calc(58% - 32px) !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
}

/* Obramówka zdjęcia głównego zaokrąglona i proporcjonalnie zmniejszona */
#box_productfull .productimg .mainimg {
    position: relative !important;
    max-width: 380px !important;
    margin: 0 auto 16px auto !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    border: 1.5px solid #e2e8f0 !important;
    background: #ffffff !important;
}

/* Tagi produktów w lewym górnym rogu zdjęcia – ułożone jeden pod drugim */
#box_productfull ul.tags,
#box_productfull .productimg .tags,
#box_productfull .productimg .mainimg .tags,
.productimg .mainimg .tags,
.productimg .tags {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 20 !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 6px !important;
    pointer-events: none !important;
    max-width: 160px !important;
}

#box_productfull ul.tags li,
#box_productfull .productimg .tags li,
.productimg .mainimg .tags li {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    line-height: 1.2 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14) !important;
    border: none !important;
    white-space: nowrap !important;
}

#box_productfull ul.tags li.potd,
#box_productfull ul.tags li.custom-category-tag--potd,
#box_productfull ul.tags li.custom-product-badge--potd,
#box_productfull .tags .potd,
#box_productfull .tags .custom-category-tag--potd {
    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%) !important;
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.35) !important;
}

#box_productfull ul.tags li.bestseller,
#box_productfull ul.tags li.custom-category-tag--bestseller,
#box_productfull ul.tags li.custom-product-badge--bestseller,
#box_productfull .tags .bestseller,
#box_productfull .tags .custom-category-tag--bestseller {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35) !important;
}

#box_productfull ul.tags li.promo,
#box_productfull ul.tags li.custom-category-tag--promo,
#box_productfull ul.tags li.custom-product-badge--promo,
#box_productfull .tags .promo,
#box_productfull .tags .custom-category-tag--promo {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35) !important;
}

#box_productfull ul.tags li.new,
#box_productfull ul.tags li.custom-category-tag--new,
#box_productfull ul.tags li.custom-product-badge--new,
#box_productfull .tags .new,
#box_productfull .tags .custom-category-tag--new {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35) !important;
}

#box_productfull ul.tags li.maglev,
#box_productfull ul.tags li.custom-category-tag--maglev,
#box_productfull ul.tags li.custom-product-badge--maglev,
#box_productfull .tags .maglev,
#box_productfull .tags .custom-category-tag--maglev {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%) !important;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.35) !important;
}

#box_productfull ul.tags li.magnetic,
#box_productfull ul.tags li.custom-category-tag--magnetic,
#box_productfull ul.tags li.custom-product-badge--magnetic,
#box_productfull .tags .magnetic,
#box_productfull .tags .custom-category-tag--magnetic {
    background: linear-gradient(135deg, #0052ff 0%, #0038b8 100%) !important;
    box-shadow: 0 4px 12px rgba(0, 82, 255, 0.35) !important;
}

#box_productfull ul.tags li.smart,
#box_productfull ul.tags li.custom-category-tag--smart,
#box_productfull ul.tags li.custom-product-badge--smart,
#box_productfull .tags .smart,
#box_productfull .tags .custom-category-tag--smart {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35) !important;
}

/* Galeria miniatur pod zdjęciem - Nowoczesny poziomy karuzelowy slider w stylu KOSTKOLAND UI */
#box_productfull .smallgallery {
    margin-top: 14px !important;
    width: 100% !important;
    display: block !important;
}

#box_productfull .smallgallery .innersmallgallery,
#box_productfull .smallgallery .kl-thumbnails-carousel-wrap {
    width: 100% !important;
    max-width: 100% !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 24px !important;
    padding: 7px 8px !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    gap: 6px !important;
}

#box_productfull .kl-thumb-btn {
    flex: 0 0 32px !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    color: #64748b !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06) !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 2 !important;
    outline: none !important;
}

#box_productfull .kl-thumb-btn:hover {
    background: #04bbff !important;
    border-color: #04bbff !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(4, 187, 255, 0.35) !important;
    transform: scale(1.08) !important;
}

#box_productfull .kl-thumb-btn:active {
    transform: scale(0.95) !important;
}

#box_productfull .smallgallery ul,
#box_productfull .kl-thumbnails-track {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 8px !important;
    margin: 0 4px !important;
    padding: 3px 2px !important;
    list-style: none !important;
    align-items: center !important;
    justify-content: flex-start !important;
    transform: none !important;
    width: auto !important;
}

#box_productfull .smallgallery ul::-webkit-scrollbar,
#box_productfull .kl-thumbnails-track::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

#box_productfull .smallgallery li,
#box_productfull .kl-thumb-item {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    width: 54px !important;
    height: 54px !important;
    margin: 0 !important;
    border-radius: 12px !important;
    border: 1.5px solid #e2e8f0 !important;
    background: #ffffff !important;
    overflow: hidden !important;
    cursor: pointer !important;
    padding: 3px !important;
    box-sizing: border-box !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    align-items: center !important;
    justify-content: center !important;
}

#box_productfull .smallgallery li a,
#box_productfull .kl-thumb-item a {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
}

#box_productfull .smallgallery li img,
#box_productfull .kl-thumb-item img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 8px !important;
    display: block !important;
    transition: transform 0.2s ease !important;
}

#box_productfull .smallgallery li:hover,
#box_productfull .kl-thumb-item:hover {
    border-color: #04bbff !important;
    box-shadow: 0 4px 12px rgba(4, 187, 255, 0.2) !important;
    transform: translateY(-2px) !important;
}

#box_productfull .smallgallery li:hover img,
#box_productfull .kl-thumb-item:hover img {
    transform: scale(1.05) !important;
}

#box_productfull .smallgallery li.current,
#box_productfull .smallgallery li:has(a.current),
#box_productfull .smallgallery li a.current,
#box_productfull .kl-thumb-item.current,
#box_productfull .kl-thumb-item:has(a.current) {
    border-color: #04bbff !important;
    box-shadow: 0 0 0 1.5px #04bbff, 0 4px 12px rgba(4, 187, 255, 0.25) !important;
    background: #f0f9ff !important;
}

#box_productfull .smallgallery nav,
#box_productfull .smallgallery .smallgallery-left,
#box_productfull .smallgallery .smallgallery-right {
    display: none !important;
}

/* Powiększone zdjęcie (modal galerii) - PEŁNY NOWOCZESNY REDESIGN W STYLU KOSTKOLAND UI */
.mask,
.modal-overlay {
    background: rgba(15, 23, 42, 0.75) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    cursor: pointer !important;
    z-index: 100004 !important;
}

.shop-gallery,
.shop-gallery.active,
div.shop-gallery {
    z-index: 100005 !important;
}

.shop-gallery .shop-gallery-skin {
    z-index: 100006 !important;
    background: #ffffff !important;
    border-radius: 24px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.35) !important;
    padding: 24px !important;
    position: relative !important;
    overflow: visible !important;
}

.shop-gallery .shop-gallery-skin .shop-gallery-inner {
    border: none !important;
    margin: 0 !important;
    position: relative !important;
}

.shop-gallery .shop-gallery-skin .shop-gallery-img-container {
    padding: 0 !important;
    margin: 0 auto !important;
    text-align: center !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
}

.shop-gallery .shop-gallery-skin .shop-gallery-img-container .shop-gallery-img {
    border-radius: 16px !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

/* Przycisk zamknięcia - nowoczesny okrągły przycisk X */
.shop-gallery .shop-gallery-close {
    position: absolute !important;
    right: 16px !important;
    top: 16px !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 50 !important;
}

.shop-gallery .shop-gallery-close::after {
    content: "✕" !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    line-height: 1 !important;
    margin: 0 !important;
    transition: color 0.2s ease !important;
}

.shop-gallery .shop-gallery-close:hover {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
    transform: rotate(90deg) scale(1.1) !important;
    box-shadow: 0 6px 18px rgba(239, 68, 68, 0.45) !important;
}

.shop-gallery .shop-gallery-close:hover::after {
    color: #ffffff !important;
}

/* Ukrycie przycisku powiększenia / resize (strzałek w lewym górnym rogu) */
.shop-gallery .shop-gallery-resize,
.shop-gallery-resize {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Główne strzałki nawigacji modalem (Lewo / Prawo) */
.shop-gallery .shop-gallery-inner .shop-gallery-nav {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
    border: 1.5px solid #e2e8f0 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 30 !important;
    bottom: auto !important;
}

.shop-gallery .shop-gallery-inner .shop-gallery-nav:hover {
    background: linear-gradient(135deg, #7b00ff 0%, #04bbff 100%) !important;
    border-color: transparent !important;
    transform: translateY(-50%) scale(1.1) !important;
    box-shadow: 0 8px 25px rgba(4, 187, 255, 0.45) !important;
}

.shop-gallery .shop-gallery-inner .shop-gallery-nav.shop-gallery-nav-prev {
    left: 16px !important;
    right: auto !important;
}

.shop-gallery .shop-gallery-inner .shop-gallery-nav.shop-gallery-nav-next {
    right: 16px !important;
    left: auto !important;
}

.shop-gallery .shop-gallery-inner .shop-gallery-nav::after {
    position: static !important;
    content: "" !important;
    display: block !important;
    width: 11px !important;
    height: 11px !important;
    margin: 0 !important;
    border: solid #0f172a !important;
    border-width: 2.5px 2.5px 0 0 !important;
    transition: border-color 0.2s ease !important;
}

.shop-gallery .shop-gallery-inner .shop-gallery-nav.shop-gallery-nav-prev::after {
    transform: rotate(-135deg) !important;
    margin-left: 3px !important;
}

.shop-gallery .shop-gallery-inner .shop-gallery-nav.shop-gallery-nav-next::after {
    transform: rotate(45deg) !important;
    margin-right: 3px !important;
}

.shop-gallery .shop-gallery-inner .shop-gallery-nav:hover::after {
    border-color: #ffffff !important;
}

/* Pasek miniatur na dole modalu - wyłącznie jeden poziomy rząd bez zawijania */
.shop-gallery-preview {
    background: #ffffff !important;
    border-radius: 18px !important;
    border: 1.5px solid #e2e8f0 !important;
    margin: 20px auto 0 auto !important;
    padding: 12px 44px !important;
    height: 84px !important;
    max-height: 84px !important;
    box-sizing: border-box !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
}

.shop-gallery-preview .shop-gallery-container {
    width: 100% !important;
    height: 60px !important;
    max-height: 60px !important;
    overflow: hidden !important;
    position: relative !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.shop-gallery-preview .shop-gallery-slider {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    width: max-content !important;
    min-width: 100% !important;
    height: 60px !important;
    align-items: center !important;
    position: relative !important;
    top: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: left 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.shop-gallery-preview .shop-gallery-item-preview {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    flex: 0 0 58px !important;
    flex-shrink: 0 !important;
    border-radius: 12px !important;
    border: 2px solid #e2e8f0 !important;
    background: #f8fafc !important;
    overflow: hidden !important;
    padding: 3px !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
    margin-right: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: top !important;
    cursor: pointer !important;
}

.shop-gallery-preview .shop-gallery-item-preview:last-child {
    margin-right: 0 !important;
}

.shop-gallery-preview .shop-gallery-item-preview img {
    border-radius: 8px !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

.shop-gallery-preview .shop-gallery-item-preview:hover,
.shop-gallery-preview .shop-gallery-item-preview.active {
    border-color: #04bbff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(4, 187, 255, 0.35) !important;
}

/* Mini strzałki paska miniatur */
.shop-gallery-preview .shop-gallery-mini-prev,
.shop-gallery-preview .shop-gallery-mini-next {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

.shop-gallery-preview .shop-gallery-mini-prev {
    left: 8px !important;
}

.shop-gallery-preview .shop-gallery-mini-next {
    right: 8px !important;
}

.shop-gallery-preview .shop-gallery-mini-prev::after,
.shop-gallery-preview .shop-gallery-mini-next::after {
    position: static !important;
    display: block !important;
    content: "" !important;
    width: 7px !important;
    height: 7px !important;
    border: solid #64748b !important;
    border-width: 2px 2px 0 0 !important;
    transition: border-color 0.2s ease !important;
    margin: 0 !important;
}

.shop-gallery-preview .shop-gallery-mini-prev::after {
    transform: rotate(-135deg) !important;
    margin-left: 2px !important;
}

.shop-gallery-preview .shop-gallery-mini-next::after {
    transform: rotate(45deg) !important;
    margin-right: 2px !important;
}

.shop-gallery-preview .shop-gallery-mini-prev:hover,
.shop-gallery-preview .shop-gallery-mini-next:hover {
    background: #04bbff !important;
    border-color: #04bbff !important;
}

.shop-gallery-preview .shop-gallery-mini-prev:hover::after,
.shop-gallery-preview .shop-gallery-mini-next:hover::after {
    border-color: #ffffff !important;
}

/* Responsive Gallery Lightbox for Mobile & Tablet */
@media screen and (max-width: 900px) {
    .mask {
        z-index: 100000 !important;
        background: rgba(15, 23, 42, 0.85) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
    }

    .shop-gallery,
    .shop-gallery.active,
    div.shop-gallery {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100% !important;
        max-height: 100% !important;
        transform: none !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 16px !important;
        box-sizing: border-box !important;
        z-index: 100005 !important;
        pointer-events: none !important;
    }

    .shop-gallery .shop-gallery-skin {
        pointer-events: auto !important;
        width: 100% !important;
        max-width: 380px !important;
        background: #ffffff !important;
        border-radius: 20px !important;
        border: 1px solid #e2e8f0 !important;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4) !important;
        padding: 16px 12px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        box-sizing: border-box !important;
        margin: 0 auto !important;
        overflow: visible !important;
    }

    .shop-gallery .shop-gallery-close {
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        background: #f1f5f9 !important;
        border: 1.5px solid #e2e8f0 !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        z-index: 100 !important;
    }

    .shop-gallery .shop-gallery-close::after {
        content: "✕" !important;
        font-size: 15px !important;
        font-weight: 800 !important;
        color: #0f172a !important;
        line-height: 1 !important;
    }

    .shop-gallery .shop-gallery-skin .shop-gallery-inner {
        width: 100% !important;
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .shop-gallery .shop-gallery-skin .shop-gallery-img-container {
        width: 100% !important;
        height: 300px !important;
        max-height: 48vh !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        background: #ffffff !important;
        border-radius: 12px !important;
    }

    .shop-gallery .shop-gallery-skin .shop-gallery-img-container .shop-gallery-img {
        max-width: 100% !important;
        max-height: 100% !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        border-radius: 10px !important;
    }

    .shop-gallery .shop-gallery-inner .shop-gallery-nav {
        width: 38px !important;
        height: 38px !important;
        background: rgba(255, 255, 255, 0.95) !important;
        border: 1.5px solid #e2e8f0 !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
        z-index: 60 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    .shop-gallery .shop-gallery-inner .shop-gallery-nav.shop-gallery-nav-prev {
        left: 2px !important;
    }

    .shop-gallery .shop-gallery-inner .shop-gallery-nav.shop-gallery-nav-next {
        right: 2px !important;
    }

    .shop-gallery .shop-gallery-inner .shop-gallery-nav::after {
        width: 8px !important;
        height: 8px !important;
        border-width: 2px 2px 0 0 !important;
    }

    /* Pasek miniatur na mobile/tablecie */
    .shop-gallery .shop-gallery-preview,
    .shop-gallery .shop-gallery-preview.none {
        pointer-events: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 380px !important;
        height: 60px !important;
        margin: 12px auto 0 auto !important;
        padding: 4px 32px !important;
        border-radius: 14px !important;
        background: rgba(255, 255, 255, 0.95) !important;
        border: 1px solid #e2e8f0 !important;
        box-sizing: border-box !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
        overflow: hidden !important;
        position: relative !important;
    }

    .shop-gallery-preview .shop-gallery-container {
        width: 100% !important;
        height: 48px !important;
        overflow: hidden !important;
        position: relative !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    .shop-gallery-preview .shop-gallery-slider {
        display: inline-flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
        width: max-content !important;
        min-width: 100% !important;
        height: 48px !important;
        align-items: center !important;
        position: relative !important;
        top: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        transition: left 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
    }

    .shop-gallery-preview .shop-gallery-item-preview {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        flex: 0 0 44px !important;
        flex-shrink: 0 !important;
        border-radius: 8px !important;
        margin: 0 6px 0 0 !important;
        padding: 2px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1.5px solid #e2e8f0 !important;
        background: #f8fafc !important;
        box-sizing: border-box !important;
    }

    .shop-gallery-preview .shop-gallery-item-preview:last-child {
        margin-right: 0 !important;
    }

    .shop-gallery-preview .shop-gallery-item-preview.active,
    .shop-gallery-preview .shop-gallery-item-preview:hover {
        border-color: #04bbff !important;
        box-shadow: 0 2px 8px rgba(4, 187, 255, 0.35) !important;
    }

    .shop-gallery-preview .shop-gallery-item-preview img {
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        border-radius: 6px !important;
    }

    .shop-gallery-preview .shop-gallery-mini-prev,
    .shop-gallery-preview .shop-gallery-mini-next {
        width: 26px !important;
        height: 26px !important;
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    .shop-gallery-preview .shop-gallery-mini-prev { left: 4px !important; }
    .shop-gallery-preview .shop-gallery-mini-next { right: 4px !important; }

    /* Ukrycie widżetu czatu gdy modal galerii jest otwarty */
    body.shop-gallery-open #smartsupp-widget-container,
    body.shop-gallery-open iframe[id*="chat"],
    body.shop-gallery-open [class*="chat-widget"],
    body.shop-gallery-open .chat-bubble,
    body.shop-gallery-open #chat-widget-container {
        display: none !important;
        visibility: hidden !important;
    }
}

@media screen and (min-width: 481px) and (max-width: 900px) {
    .shop-gallery .shop-gallery-skin {
        max-width: 500px !important;
    }
    .shop-gallery .shop-gallery-skin .shop-gallery-img-container {
        height: 420px !important;
    }
    .shop-gallery .shop-gallery-preview,
    .shop-gallery .shop-gallery-preview.none {
        max-width: 500px !important;
    }
}

@media screen and (max-width: 420px) {
    .shop-gallery .shop-gallery-skin {
        max-width: calc(100vw - 20px) !important;
        padding: 14px 10px !important;
    }
    .shop-gallery .shop-gallery-skin .shop-gallery-img-container {
        height: 270px !important;
    }
    .shop-gallery .shop-gallery-preview,
    .shop-gallery .shop-gallery-preview.none {
        max-width: calc(100vw - 20px) !important;
        height: 54px !important;
        padding: 3px 26px !important;
    }
    .shop-gallery-preview .shop-gallery-item-preview {
        width: 38px !important;
        height: 38px !important;
    }
}

/* Przycisk ulubionych na czerwono przy hover */
.kl-action-btn.kl-btn-fav:hover {
    background: #fef2f2 !important;
    border-color: #ef4444 !important;
    color: #ef4444 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.25) !important;
}
.kl-action-btn.kl-btn-fav:hover span {
    color: #ef4444 !important;
}

.kl-producer-link {
    color: #04bbff !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}
.kl-producer-link:hover {
    color: #008ecc !important;
    text-decoration: underline !important;
}
.kl-timer-line {
    font-size: 10.5px !important;
    white-space: normal !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1.25 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 4px !important;
    gap: 1px !important;
}
.kl-timer-label {
    color: #16a34a !important;
    font-weight: 700 !important;
    font-size: 10px !important;
    display: block !important;
    text-align: center !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}
.kl-timer-clock {
    color: #ef4444 !important;
    font-weight: 800 !important;
    font-size: 10.5px !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    display: block !important;
    text-align: center !important;
    line-height: 1.2 !important;
    word-break: break-word !important;
}

/* Hide empty prices & non-promo prices */
#box_productfull .price__regular.none,
#box_productfull .js__omnibus-price-container.none,
#box_productfull .price__regular.kl-hide,
#box_productfull .js__omnibus-price-container.kl-hide,
#box_productfull .price__regular:empty,
#box_productfull .js__omnibus-price-container:empty {
    display: none !important;
}
#box_productfull .price__regular .price__inactive:empty {
    display: none !important;
}

/* Hide standalone addtofav outside our custom action row */
#box_productfull a.addtofav:not(.kl-action-btn),
#box_productfull .basket > a.addtofav,
#box_productfull .maininfo > a.addtofav {
    display: none !important;
}

/* ==========================================================================
   NOWOCZESNY DESIGN ZAKŁADEK PRODUKTU (Opis, Koszty dostawy, Opinie)
   ========================================================================== */
.product-modules {
    clear: both !important;
    margin-top: 30px !important;
}

.tab-container {
    margin-top: 25px !important;
}

/* Wyśrodkowanie paska nawigacji zakładek */
.tab-container nav,
.product-modules nav {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 30px auto 25px auto !important;
    width: 100% !important;
    border: none !important;
}

/* Pasek zakładek w nowoczesnym stylu Segmented Control / Pills */
.tab-container nav ul,
.tab-container nav ul[role="tablist"],
.product-modules nav ul {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: #f1f5f9 !important;
    padding: 6px !important;
    border-radius: 50px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04) !important;
    list-style: none !important;
    margin: 0 auto !important;
}

/* Elementy listy */
.tab-container nav ul li,
.product-modules nav ul li {
    display: inline-flex !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    list-style: none !important;
    cursor: pointer !important;
    outline: none !important;
}

/* Wewnętrzny przycisk zakładki (.boxhead) */
.tab-container nav ul li .boxhead,
.product-modules nav ul li .boxhead {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 11px 26px !important;
    border-radius: 40px !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    margin: 0 !important;
}

/* Usunięcie reliktów Shopera (starych kresek, pseudo-elementów i przezroczystych gifów) */
.tab-container nav ul li .boxhead::after,
.tab-container nav ul li .boxhead::before,
.tab-container nav ul::after,
.tab-container nav ul::before,
.tab-container nav ul li .boxhead img.px1,
.product-modules nav ul li .boxhead img.px1 {
    display: none !important;
    content: none !important;
    border: none !important;
}

/* Tytuł wewnątrz zakładki (h3) */
.tab-container nav ul li .boxhead h3,
.product-modules nav ul li .boxhead h3 {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    line-height: 1.4 !important;
    letter-spacing: 0.2px !important;
    text-transform: none !important;
    transition: color 0.2s ease !important;
    white-space: nowrap !important;
}

/* Efekt najechania (hover) */
.tab-container nav ul li:hover .boxhead:not(.active) {
    background: rgba(255, 255, 255, 0.8) !important;
}
.tab-container nav ul li:hover .boxhead:not(.active) h3 {
    color: #0f172a !important;
}

/* Zakładka AKTYWNA (.active / aria-selected="true") */
.tab-container nav ul li.active .boxhead,
.tab-container nav ul li .boxhead.active,
.tab-container nav ul li[aria-selected="true"] .boxhead,
.product-modules nav ul li.active .boxhead,
.product-modules nav ul li .boxhead.active {
    background: #ffffff !important;
    box-shadow: 0 4px 14px rgba(0, 82, 255, 0.12), 0 2px 6px rgba(0, 0, 0, 0.05) !important;
}

.tab-container nav ul li.active .boxhead h3,
.tab-container nav ul li .boxhead.active h3,
.tab-container nav ul li[aria-selected="true"] .boxhead h3,
.product-modules nav ul li.active .boxhead h3,
.product-modules nav ul li .boxhead.active h3 {
    color: #0052ff !important;
    font-weight: 800 !important;
}

/* Ikony przed nazwami zakładek */
.tab-container nav ul li.box_description .boxhead h3::before,
.product-modules nav ul li.box_description .boxhead h3::before {
    content: '📄' !important;
    font-size: 14px !important;
}
.tab-container nav ul li.box_productdeliveries .boxhead h3::before,
.product-modules nav ul li.box_productdeliveries .boxhead h3::before {
    content: '🚚' !important;
    font-size: 14px !important;
}
.tab-container nav ul li.box_productcomments .boxhead h3::before,
.product-modules nav ul li.box_productcomments .boxhead h3::before {
    content: '💬' !important;
    font-size: 14px !important;
}

/* Licznik opinii (np. (0)) */
.tab-container nav ul li.box_productcomments .boxhead h3 span,
.product-modules nav ul li.box_productcomments .boxhead h3 span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #e2e8f0 !important;
    color: #475569 !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    padding: 2px 7px !important;
    border-radius: 12px !important;
    margin-left: 4px !important;
}
.tab-container nav ul li.box_productcomments .boxhead.active h3 span,
.tab-container nav ul li[aria-selected="true"].box_productcomments .boxhead h3 span,
.product-modules nav ul li.box_productcomments .boxhead.active h3 span {
    background: #dbeafe !important;
    color: #0052ff !important;
}

/* Hint / tooltip przy Kosztach dostawy */
.tab-container nav ul li .boxhead h3 .hint,
.product-modules nav ul li .boxhead h3 .hint {
    display: inline-flex !important;
    align-items: center !important;
    margin-left: 4px !important;
}

/* Ukrycie podwójnych nagłówków wewnątrz treści zakładek */
.tab-container .box.tab > .boxhead:first-child,
.product-modules .box.tab > .boxhead:first-child {
    display: none !important;
}

/* Nowoczesne karty z zawartością zakładek */
.tab-container .box.tab,
.product-modules .box.tab {
    background: #ffffff !important;
    border-radius: 20px !important;
    padding: 30px !important;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.03) !important;
    border: 1px solid #f1f5f9 !important;
    margin-top: 15px !important;
}

/* ==========================================================================
   NOWE ZADANIA (Kostkoland Enhancements)
   ========================================================================== */

/* === 1. TOP ANNOUNCEMENT BAR (Pasek odliczania do wysyłki na samej górze) === */
.kl-top-announcement-bar {
    background: linear-gradient(135deg, #0b132b 0%, #1c2541 50%, #0052ff 100%) !important;
    color: #ffffff !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    padding: 9px 15px !important;
    text-align: center !important;
    position: relative !important;
    z-index: 9999 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12) !important;
    letter-spacing: 0.2px !important;
}
.kl-top-bar-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}
.kl-top-bar-icon {
    font-size: 15px !important;
    animation: klPulse 1.8s infinite ease-in-out !important;
}
@keyframes klPulse {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.25); opacity: 1; }
}
.kl-top-bar-text {
    color: #f8fafc !important;
}
.kl-top-bar-timer {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(4px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    padding: 2px 9px !important;
    border-radius: 20px !important;
    color: #38bdf8 !important;
    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    display: inline-block !important;
    margin: 0 4px !important;
}

/* === 2. Niedostępne produkty na końcu listingów === */
.products.viewphot,
.products.viewfull,
.products.viewdesc,
.centercol .products {
    display: flex !important;
    flex-wrap: wrap !important;
}
.products .product.kl-product-out-of-stock,
.products .product_inactive {
    order: 9999 !important;
    opacity: 0.8 !important;
}
.products .product.kl-product-out-of-stock:hover {
    opacity: 1 !important;
}

/* === 3. Nowoczesny baner cookies (UI spójne ze sklepem) === */
#cookie.kl-cookie-modal {
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    left: auto !important;
    max-width: 460px !important;
    width: calc(100% - 48px) !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(12px) !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.18), 0 4px 12px rgba(0, 82, 255, 0.08) !important;
    border: 1px solid #e2e8f0 !important;
    padding: 22px 24px !important;
    z-index: 999999 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    animation: klSlideUp 0.4s ease-out !important;
}
@keyframes klSlideUp {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.kl-cookie-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    position: relative !important;
}
.kl-cookie-content {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
}
.kl-cookie-icon {
    font-size: 28px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}
.kl-cookie-text strong {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    display: block !important;
    margin-bottom: 4px !important;
}
.kl-cookie-text p {
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    color: #64748b !important;
    margin: 0 !important;
}
.kl-cookie-text a {
    color: #0052ff !important;
    text-decoration: underline !important;
    font-weight: 600 !important;
}
.kl-cookie-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
}
.kl-cookie-btn-accept {
    background: linear-gradient(135deg, #04BBFF 0%, #0052ff 100%) !important;
    color: #ffffff !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    padding: 10px 22px !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 4px 12px rgba(0, 82, 255, 0.25) !important;
}
.kl-cookie-btn-accept:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(0, 82, 255, 0.35) !important;
}
.kl-cookie-close-x {
    position: absolute !important;
    top: -10px !important;
    right: -10px !important;
    width: 26px !important;
    height: 26px !important;
    background: #f1f5f9 !important;
    color: #64748b !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    font-size: 12px !important;
    transition: all 0.2s ease !important;
}
.kl-cookie-close-x:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}
@media (max-width: 600px) {
    #cookie.kl-cookie-modal {
        bottom: 12px !important;
        right: 12px !important;
        left: 12px !important;
        width: auto !important;
    }
}

/* === 4. Pasek darmowej dostawy w koszyku === */
.kl-free-shipping-bar {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 18px 22px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
}
.kl-fs-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
}
.kl-fs-icon {
    font-size: 20px !important;
}
.kl-fs-text {
    font-size: 14.5px !important;
    color: #1e293b !important;
}
.kl-fs-highlight {
    color: #0052ff !important;
    font-weight: 800 !important;
}
.kl-fs-success {
    color: #15803d !important;
    font-weight: 800 !important;
}
.kl-fs-progress-bg {
    width: 100% !important;
    height: 12px !important;
    background: #f1f5f9 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    position: relative !important;
    border: 1px solid #e2e8f0 !important;
}
.kl-fs-progress-fill {
    height: 100% !important;
    background: linear-gradient(90deg, #04BBFF 0%, #0052ff 100%) !important;
    border-radius: 10px !important;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
}
.kl-fs-badge {
    position: absolute !important;
    right: 4px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    line-height: 1 !important;
}

/* === 5. Przycisk "Dodaj opinię" na pomarańczowo === */
.kl-btn-review:hover,
#box_productfull .kl-action-btns a[href*="comment"]:hover,
#box_productfull a.addcomment:hover {
    background: #fffbeb !important;
    border-color: #f59e0b !important;
    color: #f59e0b !important;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.25) !important;
    transform: translateY(-2px) !important;
}
.kl-btn-review:hover img,
.kl-btn-review:hover span,
#box_productfull .kl-action-btns a[href*="comment"]:hover span {
    color: #f59e0b !important;
    filter: drop-shadow(0 0 1px #f59e0b) !important;
}

/* === 6. Licznik ulubionych i czerwony hover na serduszku w nagłówku === */
.fav-item .fav-icon-wrapper {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.fav-item .fav-badge {
    position: absolute !important;
    top: -6px !important;
    right: -10px !important;
    background: #ef4444 !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    min-width: 18px !important;
    height: 18px !important;
    border-radius: 9px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 4px !important;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4) !important;
    line-height: 1 !important;
}
.fav-item:hover a img,
.fav-item a:hover img {
    filter: invert(32%) sepia(85%) saturate(2250%) hue-rotate(338deg) brightness(98%) contrast(92%) !important;
    transform: scale(1.15) !important;
    transition: all 0.2s ease !important;
}
.fav-item:hover .icon-label,
.fav-item a:hover .icon-label {
    color: #ef4444 !important;
    transition: color 0.2s ease !important;
}

/* === 7. Jasny, nowoczesny przycisk Zamknij w modalu dodania do koszyka === */
.ajaxbasket {
    border-radius: 20px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15) !important;
}
.ajaxbasket .bottombuttons button:not(.important),
.ajaxbasket .close,
.modal.modal-shipping .modal-close {
    background: #f1f5f9 !important;
    color: #334155 !important;
    border: 1px solid #cbd5e1 !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    padding: 10px 20px !important;
    transition: all 0.2s ease !important;
    text-shadow: none !important;
    box-shadow: none !important;
}
.ajaxbasket .bottombuttons button:not(.important):hover,
.ajaxbasket .close:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
}
.ajaxbasket .bottombuttons .important {
    background: linear-gradient(135deg, #04BBFF 0%, #0052ff 100%) !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 14px rgba(0, 82, 255, 0.25) !important;
    border: none !important;
}

/* === 8. Usunięcie pytajnika / tooltipa z kosztami płatności === */
.shipping-costs .hint,
.shipping-costs .hint__content,
.shipping-costs .icon-help,
#box_productfull .hint,
#box_productfull .icon-help {
    display: none !important;
}

/* === 9. Wyrównanie cen promocyjnych i zielone punkty lojalnościowe obok ceny === */
#box_productfull .price__container {
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}
#box_productfull .basket,
#box_productfull .basket form,
#box_productfull form.form-basket,
#box_productfull .price,
#box_productfull .basket .price,
#box_productfull .price__container {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

#box_productfull .kl-price-main-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

#box_productfull .kl-price-left {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
}

#box_productfull .price-name,
#box_productfull .price .price-name,
#box_productfull .price__container .price-name,
#box_productfull .kl-price-left .price-name,
#box_productfull .basket .price .price-name {
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #475569 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    display: inline !important;
    float: none !important;
}

#box_productfull em.main-price,
#box_productfull .kl-price-left em.main-price,
#box_productfull .main-price {
    font-size: 38px !important;
    font-weight: 900 !important;
    color: #04bbff !important;
    line-height: 1 !important;
    font-style: normal !important;
    letter-spacing: -0.5px !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    display: inline !important;
    float: none !important;
}

#box_productfull .loyalty_points.kl-points-inline,
#box_productfull .kl-price-main-wrap .loyalty_points,
#box_productfull .loyalty_points {
    display: inline-flex !important;
    align-items: center !important;
    background: #ecfdf5 !important;
    border: 1.5px solid #a7f3d0 !important;
    color: #047857 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 5px 14px !important;
    border-radius: 20px !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.12) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}
#box_productfull .loyalty_points.kl-points-inline .points,
#box_productfull .kl-price-main-wrap .loyalty_points .points {
    font-size: 14.5px !important;
    font-weight: 900 !important;
    color: #047857 !important;
    margin: 0 3px !important;
}
#box_productfull .loyalty_points.kl-points-inline .tooltip_pointer,
#box_productfull .kl-price-main-wrap .loyalty_points .tooltip_pointer {
    color: #10b981 !important;
    font-weight: 800 !important;
    margin-left: 2px !important;
}
#box_productfull .button_wrap .loyalty_points {
    display: none !important;
}

#box_productfull .price__regular,
#box_productfull .js__omnibus-price-container,
#box_productfull .price__omnibus {
    text-align: left !important;
    margin: 4px 0 0 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: baseline !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    font-size: 13px !important;
    color: #64748b !important;
    line-height: 1.4 !important;
    float: none !important;
    clear: both !important;
    box-sizing: border-box !important;
}

#box_productfull .price__regular del,
#box_productfull .price__regular .price__inactive {
    display: inline !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    text-decoration: line-through !important;
}

#box_productfull .js__omnibus-price-container strong,
#box_productfull .js__omnibus-price-container strong.js__omnibus-price-gross,
#box_productfull .js__omnibus-price-container strong.js__omnibus-price-net,
#box_productfull .js__omnibus-price-container .price__inactive,
#box_productfull .price__omnibus strong,
#box_productfull .price__omnibus .price__inactive {
    display: inline !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-decoration: line-through !important;
    white-space: nowrap !important;
}

#box_productfull .kl-promo-duration,
.kl-promo-duration {
    display: none !important;
}

/* === 10. Brak produktu - ukrycie ilości i koszyka, tylko powiadomienie === */
#box_productfull .addtobasket-container.none,
#box_productfull .addtobasket-container.is-hidden,
#box_productfull.product-out-of-stock .addtobasket-container,
.product-out-of-stock .addtobasket-container {
    display: none !important;
}

.availability-notifier-container.kl-always-visible,
.product-out-of-stock .availability-notifier-container {
    display: block !important;
    width: 100% !important;
    margin-top: 10px !important;
}
.availability-notifier-container.kl-always-visible .availability-notifier-btn,
.product-out-of-stock .availability-notifier-btn {
    width: 100% !important;
    min-height: 48px !important;
    background: #0f172a !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    letter-spacing: 0.3px !important;
    transition: all 0.25s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.availability-notifier-container.kl-always-visible .availability-notifier-btn:hover,
.product-out-of-stock .availability-notifier-btn:hover {
    background: #0052ff !important;
    box-shadow: 0 4px 16px rgba(0, 82, 255, 0.3) !important;
}

/* === 11. Okno Powiadom mnie o dostępności === */
.modal:has(.availability_notify_form),
.modal.availability-notifier-modal {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 100005 !important;
    width: 92vw !important;
    max-width: 680px !important;
    height: auto !important;
    background: #ffffff !important;
    border-radius: 28px !important;
    box-shadow: 0 25px 80px rgba(15, 23, 42, 0.28), 0 0 1px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid #eef1f6 !important;
    padding: 32px 36px !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
}

.modal:has(.availability_notify_form) .modal-header,
.modal.availability-notifier-modal .modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 0 20px 0 !important;
    margin-bottom: 24px !important;
    border-bottom: 2px solid #f1f5f9 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.modal:has(.availability_notify_form) .modal-header h3:empty,
.modal.availability-notifier-modal .modal-header h3:empty {
    display: none !important;
}

.modal:has(.availability_notify_form) .modal-header > h3,
.modal.availability-notifier-modal .modal-header > h3 {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 1 !important;
}

.modal:has(.availability_notify_form) .modal-header > h3::before,
.modal.availability-notifier-modal .modal-header > h3::before {
    content: '\f0f3' !important;
    font-family: 'Font Awesome 6 Free', 'FontAwesome' !important;
    font-weight: 900 !important;
    font-size: 16px !important;
    color: #04BBFF !important;
    background: rgba(4, 187, 255, 0.12) !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.modal:has(.availability_notify_form) .modal-header h3 h3,
.modal.availability-notifier-modal .modal-header h3 h3 {
    display: inline !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
}

.modal:has(.availability_notify_form) .modal-header h3 h3::before,
.modal.availability-notifier-modal .modal-header h3 h3::before {
    display: none !important;
    content: none !important;
}

.modal:has(.availability_notify_form) .modal-close,
.modal.availability-notifier-modal .modal-close {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: #f1f5f9 !important;
    border: 1.5px solid #e2e8f0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: transparent !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    overflow: hidden !important;
    text-indent: -9999px !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

.modal:has(.availability_notify_form) .modal-close::before,
.modal:has(.availability_notify_form) .modal-close::after,
.modal.availability-notifier-modal .modal-close::before,
.modal.availability-notifier-modal .modal-close::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 14px !important;
    height: 2px !important;
    background-color: #64748b !important;
    border-radius: 2px !important;
    display: block !important;
    transition: background-color 0.2s ease !important;
}

.modal:has(.availability_notify_form) .modal-close::before,
.modal.availability-notifier-modal .modal-close::before {
    transform: translate(-50%, -50%) rotate(45deg) !important;
}

.modal:has(.availability_notify_form) .modal-close::after,
.modal.availability-notifier-modal .modal-close::after {
    transform: translate(-50%, -50%) rotate(-45deg) !important;
}

.modal:has(.availability_notify_form) .modal-close:hover,
.modal.availability-notifier-modal .modal-close:hover {
    background: #e2e8f0 !important;
    transform: scale(1.08) !important;
}

.modal:has(.availability_notify_form) .modal-close:hover::before,
.modal:has(.availability_notify_form) .modal-close:hover::after,
.modal.availability-notifier-modal .modal-close:hover::before,
.modal.availability-notifier-modal .modal-close:hover::after {
    background-color: #0f172a !important;
}

.modal:has(.availability_notify_form) .modal-body,
.modal.availability-notifier-modal .modal-body {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.modal:has(.availability_notify_form) .modal-body .clearfix,
.modal.availability-notifier-modal .modal-body .clearfix {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 30px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.availability_notify_info {
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
    background: #f8fafc !important;
    border-radius: 20px !important;
    border: 1.5px solid #eef1f6 !important;
    padding: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02) !important;
    flex-shrink: 0 !important;
    transition: border-color 0.2s ease !important;
    box-sizing: border-box !important;
}

.availability_notify_info:hover {
    border-color: #cbd5e1 !important;
}

.availability_notify_info img {
    max-width: 100% !important;
    max-height: 180px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 12px !important;
    transition: transform 0.35s ease !important;
}

.availability_notify_info:hover img {
    transform: scale(1.06) !important;
}

.availability_notify_form {
    flex: 1 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.availability_notify_form h3 {
    font-size: 16.5px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1.35 !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    letter-spacing: -0.2px !important;
    word-break: break-word !important;
    white-space: normal !important;
}

.availability_notify_form p {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.availability_notify_form p:empty,
.availability_notify_form .availability-stocks:empty,
.availability_notify_form .notify-small-font:empty {
    display: none !important;
}

.availability_notify_form > p:not(:has(input)):not(:last-child):not(:empty),
.availability_notify_form p:first-of-type:not(:empty) {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
}

.availability_notify_form > p:not(:has(input)):not(:last-child):not(:empty)::before {
    content: '\f0e0' !important;
    font-family: 'Font Awesome 6 Free', 'FontAwesome' !important;
    font-weight: 900 !important;
    font-size: 13px !important;
    color: #04BBFF !important;
}

.availability_notify_form p:has(input) {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.availability_notify_form input[type="text"],
.availability_notify_form input[type="email"] {
    display: block !important;
    width: 100% !important;
    height: 50px !important;
    border-radius: 14px !important;
    border: 1.5px solid #cbd5e1 !important;
    background: #f8fafc !important;
    padding: 0 18px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    font-family: inherit !important;
    color: #0f172a !important;
    transition: all 0.25s ease !important;
    box-sizing: border-box !important;
}

.availability_notify_form input[type="text"]:focus,
.availability_notify_form input[type="email"]:focus {
    border-color: #04BBFF !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(4, 187, 255, 0.15) !important;
    outline: none !important;
}

.availability_notify_form input[type="text"]::placeholder,
.availability_notify_form input[type="email"]::placeholder {
    color: #94a3b8 !important;
    font-weight: 400 !important;
}

.availability_notify_form button[type="submit"],
.availability_notify_form .btn.btn-red {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 50px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #7b00ff 0%, #04BBFF 50%, #7b00ff 100%) !important;
    background-size: 200% 100% !important;
    background-position: 0% 0% !important;
    color: #ffffff !important;
    border: none !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    cursor: pointer !important;
    box-shadow: 0 8px 24px rgba(123, 0, 255, 0.3) !important;
    transition: background-position 0.5s ease-in-out, transform 0.2s ease, box-shadow 0.2s ease !important;
    margin: 0 !important;
    gap: 8px !important;
    box-sizing: border-box !important;
}

.availability_notify_form button[type="submit"]:hover,
.availability_notify_form .btn.btn-red:hover {
    background-position: 100% 0% !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 28px rgba(4, 187, 255, 0.45) !important;
}

.availability_notify_form button[type="submit"] span {
    color: #ffffff !important;
}

.availability_notify_form button[type="submit"]::after {
    content: '\f061' !important;
    font-family: 'Font Awesome 6 Free', 'FontAwesome' !important;
    font-weight: 900 !important;
    font-size: 13px !important;
    transition: transform 0.2s ease !important;
}

.availability_notify_form button[type="submit"]:hover::after {
    transform: translateX(3px) !important;
}

.availability_notify_form p:last-child {
    background: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
    border-radius: 14px !important;
    padding: 12px 16px !important;
    color: #166534 !important;
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    word-break: break-word !important;
    white-space: normal !important;
}

.availability_notify_form p:last-child::before {
    content: '\f058' !important;
    font-family: 'Font Awesome 6 Free', 'FontAwesome' !important;
    font-weight: 900 !important;
    font-size: 16px !important;
    color: #16a34a !important;
    flex-shrink: 0 !important;
}

@media (max-width: 640px) {
    .modal:has(.availability_notify_form),
    .modal.availability-notifier-modal {
        width: 92vw !important;
        max-width: 92vw !important;
        min-width: 0 !important;
        padding: 20px 16px !important;
        border-radius: 20px !important;
        max-height: 94vh !important;
        overflow-y: auto !important;
    }
    .modal:has(.availability_notify_form) .modal-header > h3,
    .modal.availability-notifier-modal .modal-header > h3,
    .modal:has(.availability_notify_form) .modal-header h3 h3,
    .modal.availability-notifier-modal .modal-header h3 h3 {
        font-size: 13.5px !important;
        white-space: normal !important;
        word-break: break-word !important;
        line-height: 1.25 !important;
        gap: 8px !important;
        letter-spacing: 0.2px !important;
    }
    .modal:has(.availability_notify_form) .modal-header > h3::before,
    .modal.availability-notifier-modal .modal-header > h3::before {
        width: 32px !important;
        height: 32px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
    }
    .modal:has(.availability_notify_form) .modal-close,
    .modal.availability-notifier-modal .modal-close {
        width: 32px !important;
        height: 32px !important;
    }
    .modal:has(.availability_notify_form) .modal-header,
    .modal.availability-notifier-modal .modal-header {
        padding-bottom: 12px !important;
        margin-bottom: 14px !important;
    }
    .modal:has(.availability_notify_form) .modal-body .clearfix,
    .modal.availability-notifier-modal .modal-body .clearfix {
        flex-direction: column !important;
        align-items: center !important;
        gap: 14px !important;
    }
    .availability_notify_info {
        width: 140px !important;
        min-width: 140px !important;
        max-width: 140px !important;
        height: 140px !important;
        min-height: 140px !important;
        padding: 10px !important;
    }
    .availability_notify_info img {
        max-height: 120px !important;
    }
    .availability_notify_form h3 {
        text-align: center !important;
        font-size: 14px !important;
        margin-bottom: 10px !important;
    }
    .availability_notify_form > p:not(:has(input)):not(:last-child):not(:empty) {
        justify-content: center !important;
    }
}

/* === 12. Wyśrodkowanie tytułów produktów na wszystkich listingach i sliderach === */
.product .productnamewrap,
.product .productnamewrap a {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    margin: 8px auto !important;
    padding: 0 !important;
}

.product .productname,
.product .prodname,
.product a.prodname,
.centercol .products .product .productname,
.centercol .products.viewphot .product .productname,
.slider .product .productname,
.box.slider .product .productname,
.kl-accessories-slider .kl-acc-name {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: center !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    height: 36px !important;
    max-height: 36px !important;
    min-height: 36px !important;
    color: #1e293b !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    word-break: break-word !important;
    white-space: normal !important;
}

/* === 13. Koszyk - wyśrodkowana ilość, wartość i spójna tabela === */
#box_basketlist .productlist td.quantity,
#box_basketlist .productlist th.quantity,
#box_basketlist .productlist thead td.quantity {
    text-align: center !important;
}
#box_basketlist .productlist td.quantity .shaded_inputwrap {
    display: inline-flex !important;
    justify-content: center !important;
    margin: 0 auto !important;
}
#box_basketlist .productlist td.quantity input {
    text-align: center !important;
}
#box_basketlist .productlist td.sum,
#box_basketlist .productlist th.sum,
#box_basketlist .productlist thead td.sum {
    text-align: center !important;
}
#box_basketlist table.productlist {
    border-collapse: collapse !important;
    width: 100% !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}
#box_basketlist table.productlist thead td,
#box_basketlist table.productlist thead th {
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 14px 16px !important;
    font-weight: 800 !important;
    color: #1e293b !important;
    font-size: 13.5px !important;
}
#box_basketlist table.productlist tbody tr {
    border-bottom: 1px solid #f1f5f9 !important;
}
#box_basketlist table.productlist tbody td {
    padding: 16px !important;
    vertical-align: middle !important;
}

/* ==========================================================================
   POPRAWKI KOSZYKA I BOCZNYCH SLIDERÓW (ZLECENIE)
   ========================================================================== */

/* 1. Jasny, czytelny przycisk Zamknij w powiadomieniach / alertach */
.alert .close,
.alert button.close,
.alert-info .close,
.alert-success .close,
.alert-warning .close,
.alert-error .close {
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    color: #ffffff !important;
    border-radius: 20px !important;
    padding: 6px 18px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    opacity: 1 !important;
    line-height: 1.2 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}
.alert .close span,
.alert button.close span {
    color: #ffffff !important;
    font-weight: 700 !important;
}
.alert .close:hover,
.alert button.close:hover {
    background: rgba(255, 255, 255, 0.35) !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

/* 2. Szerszy kontener na stronie koszyka i przestronne pole tabeli */
body.shop_basket .innermain.container,
body.shop_basket_index .innermain.container,
.main .innermain.container:has(#box_basketlist) {
    max-width: 1400px !important;
    width: 96% !important;
}
#box_basketlist {
    padding: 28px 32px !important;
    border-radius: 20px !important;
}
#box_basketlist table.productlist {
    table-layout: auto !important;
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 10px !important;
}
#box_basketlist table.productlist thead td {
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    color: #64748b !important;
    padding: 14px 12px !important;
    border-bottom: 2px solid #eef2f6 !important;
    vertical-align: middle !important;
}

/* 3. Ukrycie napisu Akcje w nagłówku tabeli */
#box_basketlist table.productlist thead td.actions {
    font-size: 0 !important;
    color: transparent !important;
    width: 44px !important;
    padding: 0 !important;
}

/* Kolumny tabeli koszyka */
#box_basketlist table.productlist .img {
    width: 65px !important;
    text-align: center !important;
}
#box_basketlist table.productlist .name {
    min-width: 200px !important;
    text-align: left !important;
}
#box_basketlist table.productlist tbody td.name a {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.4 !important;
}

/* 4. Wypośrodkowanie "24 godziny" (czas dostawy) */
#box_basketlist table.productlist thead td.time,
#box_basketlist table.productlist tbody td.time,
#box_basketlist table.productlist .time {
    width: 110px !important;
    text-align: center !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #64748b !important;
}

/* 5. Stepper ilości (+/-), wycentrowanie i dopasowanie "szt." */
#box_basketlist table.productlist thead td.quantity,
#box_basketlist table.productlist tbody td.quantity,
#box_basketlist table.productlist .quantity {
    width: 155px !important;
    text-align: center !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}
.kl-cart-qty-row {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    vertical-align: middle !important;
    margin: 0 auto !important;
}
#box_basketlist table.productlist .quantity-stepper {
    display: inline-flex !important;
    align-items: center !important;
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
    vertical-align: middle !important;
    height: 32px !important;
}
#box_basketlist table.productlist .quantity-stepper .btn-qty {
    width: 28px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border: none !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    padding: 0 !important;
    line-height: 1 !important;
    transition: all 0.15s ease !important;
}
#box_basketlist table.productlist .quantity-stepper .btn-qty:hover {
    background: #0052ff !important;
    color: #ffffff !important;
}
#box_basketlist table.productlist .quantity-stepper input.kl-cart-qty-field,
#box_basketlist table.productlist .quantity-stepper input {
    width: 36px !important;
    height: 32px !important;
    border: none !important;
    background: #ffffff !important;
    text-align: center !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}
#box_basketlist table.productlist tbody td.quantity .unit-name {
    font-size: 12px !important;
    color: #64748b !important;
    font-weight: 600 !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin-left: 2px !important;
}

/* 6. Wypośrodkowanie kwot w kolumnie "Wartość" oraz w kolumnie "Cena" */
#box_basketlist table.productlist thead td.price,
#box_basketlist table.productlist tbody td.price,
#box_basketlist table.productlist .price {
    width: 110px !important;
    text-align: center !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #334155 !important;
}
#box_basketlist table.productlist thead td.sum,
#box_basketlist table.productlist tbody td.sum,
#box_basketlist table.productlist .sum {
    width: 120px !important;
    text-align: center !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}
#box_basketlist table.productlist tbody td.sum em,
#box_basketlist table.productlist tbody td.sum em.color {
    display: inline-block !important;
    text-align: center !important;
    font-size: 15.5px !important;
    font-weight: 800 !important;
    color: #0052ff !important;
}
#box_basketlist table.productlist thead td.actions,
#box_basketlist table.productlist tbody td.actions,
#box_basketlist table.productlist .actions {
    width: 44px !important;
    text-align: center !important;
    vertical-align: middle !important;
}

/* 7. Podsumowanie na dole: Razem + cena obok siebie i wyśrodkowane */
#box_basketlist .summary-container .recount,
#box_basketlist .recount {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    padding: 8px 0 !important;
    border-bottom: 1px dashed #eef2f6 !important;
}
#box_basketlist .recount > span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 auto !important;
}
#box_basketlist .recount .button#recalc {
    display: none !important;
}
#box_basketlist .recount .kl-recount-total-wrap {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 0 auto !important;
}
#box_basketlist .recount .desc {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    display: inline-block !important;
    margin: 0 !important;
}
#box_basketlist .recount .desc em {
    font-style: normal !important;
}
#box_basketlist .recount .sum {
    display: inline-block !important;
    margin: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
}
#box_basketlist .recount .sum em {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    font-style: normal !important;
}

/* 8. Slidery po lewej stronie (Nowości, Zestawy prezentowe itp.) - ramka jak w Ostatnio oglądane */
.leftcol #box_recent,
.leftcol #box_newproducts,
.leftcol #box_specialoffer,
.leftcol #box_recommendations,
.leftcol .box.slider {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 18px 20px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
    overflow: hidden !important;
}
.leftcol #box_recent .boxhead,
.leftcol #box_newproducts .boxhead,
.leftcol #box_specialoffer .boxhead,
.leftcol #box_recommendations .boxhead,
.leftcol .box.slider .boxhead {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 12px !important;
}
.leftcol #box_recent .innerbox,
.leftcol #box_newproducts .innerbox,
.leftcol #box_specialoffer .innerbox,
.leftcol #box_recommendations .innerbox,
.leftcol .box.slider .innerbox {
    border: none !important;
    padding: 0 !important;
}

/* Wyśrodkowanie tytułów oraz cen produktów na sliderach w lewej kolumnie (w tym w koszyku) */
.shop_basket .leftcol .product .productname,
.shop_basket .leftcol .product .prodname,
.shop_basket .leftcol .product .productnamewrap,
.shop_basket .leftcol .product a.prodname,
.shop_basket .leftcol .slider .product .productname,
.shop_basket .leftcol .slider .product .prodname,
.shop_basket .leftcol .box.slider .product .productname,
.leftcol .box.slider .product .productname,
.leftcol .box.slider .product .prodname,
.leftcol .box.slider .product a.prodname,
.leftcol .slider .product .productname,
.leftcol .slider .product .prodname,
.leftcol .slider .product a.prodname,
.leftcol #box_recent .product .productname,
.leftcol #box_recent .product .prodname,
.leftcol #box_newproducts .product .productname,
.leftcol #box_newproducts .product .prodname,
.leftcol #box_specialoffer .product .productname,
.leftcol #box_specialoffer .product .prodname,
.leftcol #box_recommendations .product .productname,
.leftcol #box_recommendations .product .prodname {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
}

.shop_basket .leftcol .product .price,
.shop_basket .leftcol .product .price *,
.shop_basket .leftcol .slider .product .price,
.shop_basket .leftcol .box.slider .product .price,
.leftcol .box.slider .product .price,
.leftcol .box.slider .product .price *,
.leftcol .slider .product .price,
.leftcol .slider .product .price *,
.leftcol #box_recent .product .price,
.leftcol #box_newproducts .product .price,
.leftcol #box_specialoffer .product .price,
.leftcol #box_recommendations .product .price {
    text-align: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.shop_basket .leftcol .product .price,
.leftcol .box.slider .product .price,
.leftcol .slider .product .price,
.leftcol #box_recent .product .price,
.leftcol #box_newproducts .product .price,
.leftcol #box_specialoffer .product .price,
.leftcol #box_recommendations .product .price {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    width: 100% !important;
}

/* ==========================================================================
   NOWOCZESNY BANER COOKIES / RODO (.consents) DOPASOWANY DO UI STRONY
   ========================================================================== */
.consents__mask {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(15, 23, 42, 0.45) !important;
    backdrop-filter: blur(4px) !important;
    z-index: 999998 !important;
}

.consents__wrapper {
    position: fixed !important;
    bottom: 24px !important;
    left: 0 !important;
    right: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 999999 !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
}

.consents__modal {
    pointer-events: auto !important;
    background: #ffffff !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(226, 232, 240, 0.8) !important;
    padding: 26px 30px !important;
    width: 100% !important;
    max-width: 1060px !important;
    box-sizing: border-box !important;
    border: 1px solid #e2e8f0 !important;
    animation: klSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes klSlideUp {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.consents__basic-view {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.consents__heading {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 0 8px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    letter-spacing: -0.3px !important;
}

.consents__content {
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    color: #475569 !important;
}

.consents__content p {
    margin: 0 0 8px 0 !important;
}

.consents__link {
    color: #0052ff !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
}
.consents__link:hover {
    color: #04bbff !important;
}

.consents__buttons {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    margin-top: 6px !important;
    flex-wrap: wrap !important;
}

/* Przycisk akceptacji wszystkich – gradientowy brand blue */
.consents__buttons .btn.btn-red.js__accept-all-consents,
.consents__buttons .btn.js__accept-all-consents,
.consents__advanced-buttons .btn.btn-red.js__save-consents {
    background: linear-gradient(135deg, #0052ff 0%, #04bbff 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 12px 28px !important;
    font-weight: 800 !important;
    font-size: 13.5px !important;
    box-shadow: 0 4px 15px rgba(0, 82, 255, 0.3) !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    outline: none !important;
}
.consents__buttons .btn.btn-red.js__accept-all-consents:hover,
.consents__buttons .btn.js__accept-all-consents:hover,
.consents__advanced-buttons .btn.btn-red.js__save-consents:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 82, 255, 0.4) !important;
    filter: brightness(1.05) !important;
}

/* Przyciski poboczne – dostosuj, tylko niezbędne */
.consents__buttons .btn.js__accept-necessary,
.consents__buttons .btn.js__show-advanced-view,
.consents__advanced-buttons .btn.js__show-basic-view {
    background: #f8fafc !important;
    color: #475569 !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 50px !important;
    padding: 11px 22px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03) !important;
    outline: none !important;
}
.consents__buttons .btn.js__accept-necessary:hover,
.consents__buttons .btn.js__show-advanced-view:hover,
.consents__advanced-buttons .btn.js__show-basic-view:hover {
    background: #ffffff !important;
    border-color: #04bbff !important;
    color: #04bbff !important;
    box-shadow: 0 4px 12px rgba(4, 187, 255, 0.15) !important;
}

/* Widok zaawansowany ustawień zgód */
.consents__advanced-view {
    max-height: 75vh !important;
    overflow-y: auto !important;
    padding: 6px !important;
}
.consents__consent {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 14px 18px !important;
    margin-bottom: 12px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
    transition: all 0.2s ease !important;
}
.consents__consent:hover {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}
.consents__consent-description label {
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    cursor: pointer !important;
}
.consents__consent-description p {
    font-size: 12.5px !important;
    color: #64748b !important;
    line-height: 1.5 !important;
    margin: 4px 0 0 0 !important;
}
.consents__advanced-buttons {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    margin-top: 20px !important;
    padding-top: 15px !important;
    border-top: 1px solid #e2e8f0 !important;
}

/* Ukrycie pytajnika / podpowiedzi obok Kosztów dostawy na karcie produktu */
#box_productdeliveries .hint,
#box_productdeliveries .icon-help,
#box_productdeliveries .js__tooltip-trigger {
    display: none !important;
}

/* Podświetlenie przycisku Dodaj opinię na pomarańczowo bez rozmywania czcionki */
.kl-action-btn.kl-btn-review:hover {
    background: #fff7ed !important;
    border-color: #f97316 !important;
    color: #ea580c !important;
    transform: none !important;
    box-shadow: 0 4px 14px rgba(249, 115, 22, 0.22) !important;
}
.kl-action-btn.kl-btn-review:hover span,
.kl-action-btn.kl-btn-review:hover .kl-btn-icon-review {
    color: #ea580c !important;
}

/* ==========================================================================
   BARDZIEJ WIDOCZNA RAMKA KAFELKÓW (INFO BOX 6 PÓL)
   ========================================================================== */
table.kl-info-table-6 {
    border: 2px solid #cbd5e1 !important;
    border-radius: 18px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
    border-collapse: separate !important;
    overflow: hidden !important;
}

/* ==========================================================================
   NOWOCZESNE OPINIE O PRODUKCIE (Modern Comments & Review Form)
   ========================================================================== */

/* Komunikat moderacji */
.kl-comments-notice,
#box_productcomments .tab-comments > p.pb-3 {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-left: 4px solid #0052ff !important;
    border-radius: 12px !important;
    padding: 14px 20px !important;
    font-size: 13.5px !important;
    color: #475569 !important;
    line-height: 1.5 !important;
    margin-bottom: 24px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}
.kl-comments-notice p {
    margin: 0 !important;
    font-size: 13.5px !important;
    color: #475569 !important;
}
.kl-notice-icon {
    font-size: 18px !important;
    flex-shrink: 0 !important;
}

/* Brak opinii (Empty state) */
.kl-no-comments {
    text-align: center !important;
    padding: 36px 20px !important;
    background: #f8fafc !important;
    border: 1.5px dashed #cbd5e1 !important;
    border-radius: 16px !important;
    margin-bottom: 24px !important;
}
.kl-no-comments-icon {
    font-size: 32px !important;
    display: block !important;
    margin-bottom: 8px !important;
}
.kl-no-comments-title {
    display: block !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin-bottom: 4px !important;
}
.kl-no-comments-desc {
    font-size: 13.5px !important;
    color: #64748b !important;
    margin: 0 !important;
}

/* Karty opinii klientów */
.kl-comment-card,
.productcomment {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 20px 24px !important;
    margin-bottom: 16px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.2s ease !important;
}
.kl-comment-card:hover,
.productcomment:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
}
.kl-comment-header,
.productcomment .floatfix.row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 10px !important;
}
.kl-comment-author {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
.kl-author-avatar {
    font-size: 18px !important;
}
.productcomment .reviewer {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 !important;
}
.productcomment .date {
    font-size: 12.5px !important;
    color: #94a3b8 !important;
    font-weight: 500 !important;
}
.kl-comment-body,
.productcomment .description.row {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #334155 !important;
    margin: 0 !important;
}

/* Karta formularza opinii */
.kl-comment-form-card,
#box_productcomments form#commentform {
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 18px !important;
    padding: 28px 32px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02) !important;
    margin-top: 24px !important;
    box-sizing: border-box !important;
}

.kl-form-heading {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 0 20px 0 !important;
    letter-spacing: -0.2px !important;
}

.kl-form-group,
#commentform .f-row {
    margin-bottom: 18px !important;
    width: 100% !important;
}

#commentform label {
    display: block !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin-bottom: 8px !important;
}

#commentform input[type="text"],
#commentform input#commentuser,
#commentform textarea,
#commentform textarea#comment {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    color: #0f172a !important;
    font-family: inherit !important;
    transition: all 0.2s ease !important;
    outline: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

#commentform input[type="text"]:focus,
#commentform input#commentuser:focus,
#commentform textarea:focus,
#commentform textarea#comment:focus {
    background: #ffffff !important;
    border-color: #0052ff !important;
    box-shadow: 0 0 0 3.5px rgba(0, 82, 255, 0.12) !important;
}

#commentform textarea,
#commentform textarea#comment {
    min-height: 120px !important;
    resize: vertical !important;
}

.kl-form-actions {
    margin-top: 20px !important;
}

/* Nowoczesny przycisk wyślij opinię */
#commentform button[type="submit"],
#commentform button.kl-btn-submit-review,
#commentform button.btn {
    background: linear-gradient(135deg, #0052ff 0%, #04bbff 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 12px 36px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 4px 15px rgba(0, 82, 255, 0.3) !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    outline: none !important;
}

#commentform button[type="submit"]:hover,
#commentform button.kl-btn-submit-review:hover,
#commentform button.btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 82, 255, 0.42) !important;
    filter: brightness(1.05) !important;
}

#commentform button.btn img.px1,
#commentform button[type="submit"] img.px1 {
    display: none !important;
}

/* ==========================================================================
   STRONA ZWROTY I REKLAMACJE - NOWOCZESNY DESIGN W STYLU KOSTKOLAND UI
   ========================================================================== */

#infopage15,
.box_infopage#infopage15 {
    background: #ffffff !important;
    border-radius: 24px !important;
    border: 1.5px solid #e2e8f0 !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04) !important;
    overflow: hidden !important;
    padding: 0 !important;
}

#infopage15 .boxhead {
    display: none !important;
}

#infopage15 .innerbox {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

.kl-returns-page {
    padding: 28px 32px !important;
    color: #1e293b !important;
    font-family: inherit !important;
    line-height: 1.6 !important;
}

@media (max-width: 768px) {
    .kl-returns-page {
        padding: 16px !important;
    }
}

/* Hero Header */
.kl-returns-hero {
    text-align: center !important;
    padding: 32px 20px 24px !important;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%) !important;
    border-radius: 20px !important;
    border: 1px solid #edf2f7 !important;
    margin-bottom: 28px !important;
}

.kl-returns-hero-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #e0f2fe !important;
    color: #0284c7 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    margin-bottom: 12px !important;
}

.kl-returns-hero-title {
    font-size: 30px !important;
    font-weight: 900 !important;
    color: #0f172a !important;
    margin: 0 0 10px !important;
    letter-spacing: -0.5px !important;
}

.kl-returns-hero-subtitle {
    font-size: 15px !important;
    color: #64748b !important;
    max-width: 680px !important;
    margin: 0 auto !important;
    line-height: 1.5 !important;
}

/* 3 Główne Filary (Karty) */
.kl-returns-pillars {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
    margin-bottom: 28px !important;
}

@media (max-width: 768px) {
    .kl-returns-pillars {
        grid-template-columns: 1fr !important;
    }
}

.kl-pillar-card {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 18px !important;
    padding: 20px 18px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03) !important;
    transition: all 0.25s ease !important;
}

.kl-pillar-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
    border-color: #cbd5e1 !important;
}

.kl-pillar-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    margin-bottom: 14px !important;
}

.kl-pillar-tag {
    display: inline-block !important;
    background: #e0f2fe !important;
    color: #0284c7 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    margin-bottom: 8px !important;
}

.kl-pillar-content h3 {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 0 6px !important;
}

.kl-pillar-content p {
    font-size: 13.5px !important;
    color: #64748b !important;
    margin: 0 !important;
    line-height: 1.45 !important;
}

/* Pasek szybkiej nawigacji */
.kl-returns-nav {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-bottom: 32px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.kl-returns-nav-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 18px !important;
    border-radius: 12px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.kl-returns-nav-btn:hover {
    color: #008ecc !important;
    border-color: #04bbff !important;
    background: #f0f9ff !important;
}

.kl-returns-nav-btn.active {
    color: #ffffff !important;
    background: #04bbff !important;
    border-color: #04bbff !important;
    box-shadow: 0 4px 12px rgba(4, 187, 255, 0.3) !important;
}

/* Sekcje */
.kl-returns-section {
    margin-bottom: 32px !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 20px !important;
    padding: 24px 26px !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.02) !important;
}

.kl-section-header {
    display: flex !important;
    align-items: flex-start !important;
    gap: 16px !important;
    margin-bottom: 20px !important;
}

.kl-section-icon {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 14px !important;
    background: rgba(4, 187, 255, 0.12) !important;
    color: #008ecc !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
}

.kl-section-header h2 {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 0 6px !important;
}

.kl-section-header p {
    font-size: 14.5px !important;
    color: #64748b !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

/* Info banner */
.kl-info-banner {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    background: #f0f9ff !important;
    border: 1px solid #bae6fd !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    margin-bottom: 24px !important;
    color: #0369a1 !important;
    font-size: 13.5px !important;
}

.kl-info-banner i {
    font-size: 18px !important;
    margin-top: 2px !important;
    flex-shrink: 0 !important;
}

.kl-info-banner strong {
    display: block !important;
    font-size: 14px !important;
    color: #0284c7 !important;
    margin-bottom: 2px !important;
}

.kl-info-banner p {
    margin: 0 !important;
    line-height: 1.45 !important;
}

/* Subtitle */
.kl-subsection-title {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 24px 0 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Steps Grid (1-2-3) */
.kl-steps-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
}

@media (max-width: 768px) {
    .kl-steps-grid {
        grid-template-columns: 1fr !important;
    }
}

.kl-step-card {
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 18px 16px !important;
    position: relative !important;
}

.kl-step-number {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: #04bbff !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 12px !important;
    box-shadow: 0 3px 8px rgba(4, 187, 255, 0.35) !important;
}

.kl-step-card h4 {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 0 8px !important;
}

.kl-step-card p {
    font-size: 13.5px !important;
    color: #475569 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

.kl-step-card a {
    color: #008ecc !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
}

/* Notice box & checklist */
.kl-notice-box {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 18px 20px !important;
}

.kl-notice-box h4 {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 0 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.kl-check-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.kl-check-list li {
    position: relative !important;
    padding-left: 26px !important;
    font-size: 13.5px !important;
    color: #334155 !important;
    margin-bottom: 8px !important;
    line-height: 1.5 !important;
}

.kl-check-list li:last-child {
    margin-bottom: 0 !important;
}

.kl-check-list li > i {
    position: absolute !important;
    left: 0 !important;
    top: 3px !important;
    color: #10b981 !important;
    font-size: 14px !important;
}

/* Claims Grid */
.kl-claims-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
}

@media (max-width: 768px) {
    .kl-claims-grid {
        grid-template-columns: 1fr !important;
    }
}

.kl-claims-card {
    background: #f8fafc !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 18px 20px !important;
}

.kl-claims-card h4 {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 0 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.kl-bullet-list {
    margin: 0 !important;
    padding-left: 20px !important;
}

.kl-bullet-list li {
    font-size: 13.5px !important;
    color: #475569 !important;
    margin-bottom: 6px !important;
    line-height: 1.5 !important;
}

/* Claim Steps Row */
.kl-claim-steps {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 18px 20px !important;
}

.kl-claim-steps h4 {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 0 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.kl-steps-row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
}

@media (max-width: 768px) {
    .kl-steps-row {
        grid-template-columns: 1fr !important;
    }
}

.kl-mini-step {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

.kl-mini-num {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: #7c3aed !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 8px !important;
}

.kl-mini-step strong {
    font-size: 14.5px !important;
    color: #0f172a !important;
    margin-bottom: 4px !important;
}

.kl-mini-step span {
    font-size: 13px !important;
    color: #64748b !important;
    line-height: 1.45 !important;
}

.kl-mini-step a {
    color: #7c3aed !important;
    font-weight: 700 !important;
}

/* Shipping Card */
.kl-shipping-card {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%) !important;
    border: 1.5px solid #bae6fd !important;
    border-radius: 18px !important;
    padding: 24px 28px !important;
    gap: 24px !important;
}

@media (max-width: 768px) {
    .kl-shipping-card {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 20px !important;
    }
}

.kl-shipping-info {
    display: flex !important;
    align-items: flex-start !important;
    gap: 16px !important;
}

.kl-shipping-icon {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 14px !important;
    background: #04bbff !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    box-shadow: 0 4px 12px rgba(4, 187, 255, 0.35) !important;
}

.kl-shipping-info h3 {
    font-size: 19px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 6px 0 4px !important;
}

.kl-shipping-info p {
    font-size: 14px !important;
    color: #64748b !important;
    margin: 0 0 12px !important;
}

.kl-address-box {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 14px 18px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

.kl-address-line {
    color: #1e293b !important;
    margin-bottom: 2px !important;
}

.kl-shipping-action {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}

.kl-copy-address-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #04bbff !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(4, 187, 255, 0.3) !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}

.kl-copy-address-btn:hover {
    background: #008ecc !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(4, 187, 255, 0.4) !important;
}

.kl-copy-feedback {
    display: none;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #10b981 !important;
}

.kl-shipping-hint {
    font-size: 12px !important;
    color: #64748b !important;
    text-align: center !important;
}

/* Template form card */
.kl-form-template-card {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 18px !important;
    padding: 22px 24px !important;
}

.kl-form-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 16px !important;
    margin-bottom: 16px !important;
}

@media (max-width: 768px) {
    .kl-form-header {
        flex-direction: column !important;
    }
}

.kl-form-header h3 {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 0 6px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.kl-form-header p {
    font-size: 13.5px !important;
    color: #64748b !important;
    margin: 0 !important;
}

.kl-copy-template-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #f1f5f9 !important;
    color: #334155 !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 10px !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.kl-copy-template-btn:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}

.kl-template-content {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 16px !important;
    font-family: monospace, monospace !important;
    font-size: 12.5px !important;
    color: #334155 !important;
    line-height: 1.6 !important;
    white-space: pre-wrap !important;
    margin: 0 !important;
    user-select: all !important;
}

/* Footer Help Banner */
.kl-returns-help-banner {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
    border-radius: 20px !important;
    padding: 24px 28px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 20px !important;
    color: #ffffff !important;
    margin-top: 10px !important;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.15) !important;
}

@media (max-width: 768px) {
    .kl-returns-help-banner {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 20px !important;
    }
}

.kl-help-text h3 {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 0 6px !important;
}

.kl-help-text p {
    font-size: 14px !important;
    color: #94a3b8 !important;
    margin: 0 !important;
}

.kl-help-buttons {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.kl-help-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 18px !important;
    border-radius: 12px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}

.kl-help-btn--primary {
    background: #04bbff !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(4, 187, 255, 0.3) !important;
}

.kl-help-btn--primary:hover {
    background: #008ecc !important;
    transform: translateY(-2px) !important;
}

.kl-help-btn--secondary {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.kl-help-btn--secondary:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

.kl-help-btn--outline {
    background: transparent !important;
    color: #bae6fd !important;
    border: 1px solid rgba(186, 230, 253, 0.3) !important;
}

.kl-help-btn--outline:hover {
    background: rgba(186, 230, 253, 0.1) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   KOMPLEKSOWA RESPONSYWNOŚĆ MOBILNA (MOBILE RWD OPTIMIZATION)
   Dedykowane reguły dla smartfonów i tabletów (<= 900px, <= 768px, <= 640px, <= 480px)
   Gwarancja nienaruszalności układu desktopowego (> 900px).
   ========================================================================== */

/* 1. Globalne zapobieganie poziomemu rozjeżdżaniu się strony (Anti-Overflow & Viewport) */
@media (max-width: 900px) {
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
        -webkit-text-size-adjust: 100% !important;
    }
    .wrap, .wrap.rwd {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }
    .container, .innermain, .main.row {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    img, video, iframe {
        max-width: 100% !important;
        height: auto;
    }
    /* Zapobieganie auto-zoomowi na iOS Safari */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="search"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* 2. Nowoczesny nagłówek na telefonach (Header Mobile UX) */
@media (max-width: 768px) {
    /* Ukrycie starego, zdublowanego paska Shoper RWD */
    ul.menu-mobile,
    .rwd ul.menu-mobile,
    .rwd .menu-mobile,
    .rwd .rwd-show-medium.menu-mobile,
    ul.menu-mobile.rwd-show-medium,
    .wrap.rwd .menu-mobile {
        display: none !important;
    }

    /* Pasek odliczania do wysyłki (Top Announcement Bar) */
    .kl-top-announcement-bar {
        padding: 6px 10px !important;
        min-height: 32px !important;
    }
    .kl-top-bar-inner {
        font-size: 12px !important;
        line-height: 1.35 !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 6px !important;
    }
    .kl-top-bar-icon,
    .kl-top-announcement-bar .kl-top-bar-icon {
        display: none !important;
    }
    .kl-top-bar-timer {
        font-size: 12px !important;
        padding: 2px 7px !important;
    }

    /* Główny kontener nagłówka */
    .header-custom {
        padding: 8px 0 10px 0 !important;
        background: #ffffff !important;
        border-bottom: 1px solid #f1f5f9 !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
    }
    .header-container {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 12px !important;
        gap: 8px 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Logo po lewej stronie */
    .link-logo.header-logo {
        order: 1 !important;
        max-width: 140px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
    }
    .link-logo.header-logo img {
        max-height: 38px !important;
        width: auto !important;
        display: block !important;
    }

    /* Ikony po prawej stronie (Konto, Ulubione, Koszyk) */
    .header-icons {
        order: 2 !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        margin: 0 !important;
    }
    .header-icons .header-icon-item {
        margin: 0 !important;
    }
    .header-icons .header-icon-item a {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-decoration: none !important;
        position: relative !important;
    }
    .header-icons .icon-img {
        width: 24px !important;
        height: 24px !important;
    }
    .header-icons .icon-label {
        font-size: 10px !important;
        font-weight: 700 !important;
        color: #475569 !important;
        margin-top: 2px !important;
    }
    .header-icons .fav-badge,
    .header-icons .cart-badge {
        font-size: 10px !important;
        min-width: 16px !important;
        height: 16px !important;
        line-height: 16px !important;
        padding: 0 4px !important;
    }

    /* Wyszukiwarka na pełną szerokość pod logo i ikonami */
    .header-search {
        order: 3 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 6px 0 0 0 !important;
    }
    .header-search .search-form {
        display: flex !important;
        align-items: center !important;
        background: #f1f5f9 !important;
        border: 1.5px solid #e2e8f0 !important;
        border-radius: 24px !important;
        height: 42px !important;
        padding: 0 5px 0 16px !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }
    .header-search .search-input {
        flex: 1 1 auto !important;
        border: none !important;
        background: transparent !important;
        font-size: 14px !important;
        color: #1e293b !important;
        height: 38px !important;
        padding: 0 !important;
    }
    .header-search .search-btn {
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        background: #04bbff !important;
        border: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }
    .header-search .search-btn img {
        width: 15px !important;
        height: 15px !important;
        filter: brightness(0) invert(1) !important;
    }

    /* Pasek kategorii na mobile - nowoczesny poziomy pasek z przewijanymi pigułkami */
    .menu,
    .menu.row,
    .wrap .menu.row,
    .wrap.rwd .menu.row {
        background: #0b0f19 !important;
        padding: 8px 0 !important;
        margin: 0 !important;
        height: auto !important;
        min-height: 48px !important;
        line-height: normal !important;
        border: none !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
        overflow: visible !important;
        position: relative !important;
        z-index: 999 !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
    .innermenu,
    .innermenu.row.container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        line-height: normal !important;
        border: none !important;
        justify-content: flex-start !important;
        overflow: visible !important;
        position: relative !important;
        box-sizing: border-box !important;
    }
    .menu-list,
    .menu .menu-list,
    .wrap.rwd .menu-list {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 2px 14px 4px 14px !important;
        margin: 0 !important;
        height: auto !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-x: contain !important;
        scrollbar-width: none !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .menu-list::-webkit-scrollbar {
        display: none !important;
    }
    .menu-list > li {
        flex: 0 0 auto !important;
        display: inline-block !important;
        margin: 0 !important;
        position: static !important;
        float: none !important;
    }
    .menu-list > li > h3 {
        margin: 0 !important;
        padding: 0 !important;
        line-height: normal !important;
    }
    .menu-list > li > h3 > a {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 7px 14px !important;
        background: #162032 !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-radius: 20px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        color: #e2e8f0 !important;
        white-space: nowrap !important;
        text-decoration: none !important;
        transition: all 0.2s ease !important;
        box-sizing: border-box !important;
        user-select: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    .menu-list > li > h3 > a .kl-cat-chevron {
        display: inline-block !important;
        font-size: 9px !important;
        transition: transform 0.25s ease !important;
        opacity: 0.75 !important;
    }
    .menu-list > li.kl-active > h3 > a,
    .menu-list > li.current > h3 > a {
        background: #04bbff !important;
        border-color: #04bbff !important;
        color: #ffffff !important;
        box-shadow: 0 2px 10px rgba(4, 187, 255, 0.35) !important;
    }
    .menu-list > li.kl-active > h3 > a .kl-cat-chevron {
        transform: rotate(180deg) !important;
        opacity: 1 !important;
    }
    .menu-list li.home-link-menu-li {
        display: none !important;
    }

    /* Ukrycie surowych podkategorii wewnątrz menu-list, aby nie rozbijały flexboxa */
    .menu-list > li > .submenu,
    .menu-list > li > div.submenu,
    .menu-list > li ul.level1 {
        display: none !important;
    }

    /* Panel rozwijany w dół na telefonie (Mobile Dropdown) */
    .kl-mobile-dropdown-panel {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        background: #0f172a !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-bottom: 2px solid #04bbff !important;
        box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55) !important;
        padding: 16px !important;
        box-sizing: border-box !important;
        z-index: 1000 !important;
        display: none;
        animation: klSlideDown 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    .kl-mobile-dropdown-panel.kl-show {
        display: block !important;
    }
    @keyframes klSlideDown {
        from { opacity: 0; transform: translateY(-8px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .kl-m-drop-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding-bottom: 12px !important;
        margin-bottom: 12px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    .kl-m-drop-title {
        font-size: 13.5px !important;
        font-weight: 800 !important;
        color: #ffffff !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }
    .kl-m-drop-all {
        font-size: 12px !important;
        font-weight: 700 !important;
        color: #04bbff !important;
        text-decoration: none !important;
        padding: 4px 10px !important;
        border-radius: 12px !important;
        background: rgba(4, 187, 255, 0.12) !important;
        transition: all 0.2s ease !important;
    }
    .kl-m-drop-all:hover {
        background: #04bbff !important;
        color: #ffffff !important;
    }
    .kl-m-drop-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        max-height: 55vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-right: 4px !important;
    }
    .kl-m-drop-link {
        display: flex !important;
        align-items: center !important;
        padding: 10px 14px !important;
        background: #1e293b !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
        border-radius: 10px !important;
        color: #f1f5f9 !important;
        font-size: 12.5px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        transition: all 0.15s ease !important;
        box-sizing: border-box !important;
    }
    .kl-m-drop-link:hover, .kl-m-drop-link:active {
        background: #04bbff !important;
        color: #ffffff !important;
        border-color: #04bbff !important;
    }
    /* Backdrop when open */
    .kl-mobile-backdrop {
        display: none;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: rgba(0, 0, 0, 0.45) !important;
        backdrop-filter: blur(2px) !important;
        z-index: 998 !important;
    }
    .kl-mobile-backdrop.kl-show {
        display: block !important;
    }
}

/* 3. Karta produktu na telefonach (Product Page RWD) */
@media (max-width: 900px) {
    #box_productfull .maininfo .f-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    #box_productfull .maininfo .f-row > .productimg {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    #box_productfull .maininfo .f-row > .f-grid-6 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    #box_productfull .productimg .mainimg {
        max-width: 320px !important;
        width: 100% !important;
        margin: 0 auto 16px auto !important;
        border-radius: 18px !important;
        border: 1.5px solid #e2e8f0 !important;
    }
    #box_productfull .productimg .mainimg img {
        width: 100% !important;
        height: auto !important;
        max-height: 320px !important;
        object-fit: contain !important;
    }
    .kl-thumb-carousel {
        max-width: 340px !important;
        margin: 0 auto !important;
        padding: 4px 34px !important;
    }
    #box_productfull .boxhead {
        padding: 0 0 12px 0 !important;
        border-bottom: 1px solid #f1f5f9 !important;
    }
    #box_productfull .boxhead h1.name {
        font-size: 20px !important;
        line-height: 1.35 !important;
        font-weight: 800 !important;
        color: #0f172a !important;
        margin: 0 0 8px 0 !important;
        word-break: break-word !important;
    }
    #box_productfull .innerbox.product-main-box {
        padding: 16px 12px !important;
        border-radius: 16px !important;
    }
}

@media (max-width: 640px) {
    /* Tabela 6 pól (Info Box) na telefonach */
    table.kl-info-table-6 {
        margin: 10px 0 6px 0 !important;
        border-radius: 14px !important;
        border: 1.5px solid #cbd5e1 !important;
        width: 100% !important;
    }
    table.kl-info-table-6 td.kl-table-cell {
        padding: 8px 4px !important;
    }
    .kl-table-cell-content {
        gap: 2px !important;
    }
    .kl-cell-label {
        font-size: 9.5px !important;
        letter-spacing: 0.2px !important;
    }
    .kl-cell-value {
        font-size: 11.5px !important;
        line-height: 1.25 !important;
    }
    .kl-cell-value strong {
        font-size: 11.5px !important;
    }
    .kl-badge-availability {
        font-size: 10px !important;
        padding: 2px 6px !important;
    }
    .kl-timer-line {
        font-size: 9.5px !important;
        white-space: normal !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 3px !important;
        gap: 1px !important;
    }
    .kl-timer-label {
        font-size: 9.5px !important;
        display: block !important;
        text-align: center !important;
    }
    .kl-timer-clock {
        font-size: 9.5px !important;
        letter-spacing: 0 !important;
        white-space: normal !important;
        display: block !important;
        text-align: center !important;
        word-break: break-word !important;
        line-height: 1.15 !important;
    }

    /* Sekcja cenowa */
    #box_productfull .basket .price em {
        font-size: 26px !important;
    }
    .kl-price-regular-row,
    .kl-price-omnibus-row {
        font-size: 12.5px !important;
        flex-wrap: wrap !important;
    }

    /* Kontroler ilości i przycisk zakupu */
    #box_productfull .basket .addtobasket-wrap,
    #box_productfull .basket form,
    #box_productfull .button_wrap {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        margin-top: 8px !important;
        width: 100% !important;
    }
    #box_productfull .quantity_wrap,
    #box_productfull .quantity-stepper {
        width: 100% !important;
        height: 48px !important;
        justify-content: space-between !important;
        border-radius: 12px !important;
    }
    #box_productfull input.short,
    #box_productfull .quantity_wrap input {
        width: 70px !important;
        text-align: center !important;
        font-size: 18px !important;
        font-weight: 800 !important;
    }
    #box_productfull .quantity-stepper button,
    #box_productfull .quantity_wrap .btn {
        width: 48px !important;
        height: 100% !important;
        font-size: 20px !important;
    }
    #box_productfull button.addtobasket,
    #box_productfull .addtobasket {
        width: 100% !important;
        height: 52px !important;
        font-size: 16px !important;
        font-weight: 800 !important;
        border-radius: 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 6px 20px rgba(0, 82, 255, 0.3) !important;
    }

    /* Przyciski dodatkowe pod koszykiem */
    #box_productfull .additional-buttons,
    .f-row.product-buttons-row {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        width: 100% !important;
        margin-top: 12px !important;
    }
    #box_productfull .additional-buttons a,
    #box_productfull .additional-buttons button {
        flex: 1 1 50% !important;
        min-height: 42px !important;
        font-size: 12px !important;
        padding: 8px 10px !important;
        text-align: center !important;
        justify-content: center !important;
        border-radius: 10px !important;
    }

    /* Slider powiązanych akcesoriów - likwidacja nakładania się tytułu na przycisk */
    .kl-accessories-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
        position: static !important;
        margin-bottom: 16px !important;
    }
    .kl-accessories-title {
        font-size: 20px !important;
        text-align: center !important;
    }
    .kl-accessories-viewall {
        position: static !important;
        transform: none !important;
        margin: 4px auto 0 auto !important;
        display: inline-block !important;
        font-size: 12px !important;
        padding: 6px 14px !important;
    }
    .kl-acc-track {
        padding: 8px 36px !important;
        gap: 12px !important;
    }
    .kl-acc-item {
        flex: 0 0 160px !important;
        min-width: 150px !important;
        max-width: 170px !important;
        padding: 12px 8px !important;
    }
    .kl-acc-nav {
        width: 34px !important;
        height: 34px !important;
        font-size: 18px !important;
    }

    /* Zakładki produktu (Opis, Dostawa, Opinie) */
    #box_description,
    #box_productdata,
    #box_productcomments {
        padding: 18px 12px !important;
        border-radius: 16px !important;
    }
    #box_productdata table {
        display: block !important;
        overflow-x: auto !important;
        width: 100% !important;
    }
}

/* 4. Koszyk na telefonach – karty produktów zamiast 7-kolumnowej tabeli */
@media (max-width: 768px) {
    #box_basketlist {
        padding: 16px 10px !important;
        border-radius: 16px !important;
    }
    #box_basketlist .boxhead h3 {
        font-size: 18px !important;
    }

    /* Pasek darmowej dostawy w koszyku */
    .kl-free-shipping-bar {
        padding: 12px !important;
        border-radius: 12px !important;
        margin-bottom: 16px !important;
    }
    .kl-fs-header {
        font-size: 12.5px !important;
        gap: 8px !important;
    }
    .kl-fs-progress-bg {
        height: 8px !important;
        margin-top: 8px !important;
    }

    /* Tabela produktów jako pionowa lista kart */
    #box_basketlist table.productlist {
        display: block !important;
        width: 100% !important;
        border-spacing: 0 !important;
        border: none !important;
        margin: 0 0 16px 0 !important;
    }
    #box_basketlist table.productlist thead {
        display: none !important;
    }
    #box_basketlist table.productlist tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }
    #box_basketlist table.productlist tbody tr {
        display: flex !important;
        flex-wrap: wrap !important;
        position: relative !important;
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 16px !important;
        padding: 12px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
    }
    #box_basketlist table.productlist tbody tr td {
        display: block !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
    }
    #box_basketlist table.productlist tbody td.img {
        width: 60px !important;
        flex: 0 0 60px !important;
        height: 60px !important;
        margin-right: 12px !important;
    }
    #box_basketlist table.productlist tbody td.img img {
        width: 100% !important;
        height: 100% !important;
        max-width: 60px !important;
        max-height: 60px !important;
        object-fit: contain !important;
        border-radius: 10px !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        padding: 2px !important;
    }
    #box_basketlist table.productlist,
    #box_basketlist table.productlist tbody,
    #box_basketlist table.productlist tbody tr td,
    #box_basketlist table.productlist tfoot {
        border-bottom: none !important;
    }
    #box_basketlist table.productlist tbody td.name {
        flex: 1 1 calc(100% - 110px) !important;
        padding-right: 36px !important;
    }
    #box_basketlist table.productlist tbody td.name a {
        font-size: 13.5px !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        line-height: 1.3 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
    #box_basketlist table.productlist tbody td.name .variant {
        font-size: 11.5px !important;
        color: #64748b !important;
        margin-top: 4px !important;
    }
    #box_basketlist table.productlist tbody td.actions {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        right: 12px !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 2 !important;
    }
    #box_basketlist table.productlist tbody td.actions .prodremove {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 28px !important;
        height: 28px !important;
        border-radius: 50% !important;
        background: #fee2e2 !important;
        color: #ef4444 !important;
        font-size: 12px !important;
        text-decoration: none !important;
    }
    #box_basketlist table.productlist tbody td.actions .prodremove span {
        display: none !important;
    }
    #box_basketlist table.productlist tbody td.time,
    #box_basketlist table.productlist tbody td.price {
        display: none !important;
    }
    #box_basketlist table.productlist tbody td.quantity {
        width: auto !important;
        flex: 0 0 auto !important;
        margin-top: 10px !important;
        margin-left: 72px !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }
    #box_basketlist table.productlist tbody td.quantity .quantity-stepper {
        display: inline-flex !important;
        align-items: center !important;
        height: 32px !important;
        border-radius: 8px !important;
        background: #ffffff !important;
        border: 1px solid #cbd5e1 !important;
    }
    #box_basketlist table.productlist tbody td.quantity .btn-qty {
        width: 30px !important;
        height: 100% !important;
        font-size: 15px !important;
        font-weight: 800 !important;
        background: transparent !important;
        border: none !important;
        color: #334155 !important;
    }
    #box_basketlist table.productlist tbody td.quantity input {
        width: 32px !important;
        height: 100% !important;
        border: none !important;
        text-align: center !important;
        font-size: 13.5px !important;
        font-weight: 700 !important;
        background: transparent !important;
        color: #0f172a !important;
        padding: 0 !important;
    }
    #box_basketlist table.productlist tbody td.quantity .unit-name {
        font-size: 11px !important;
        color: #64748b !important;
    }
    #box_basketlist table.productlist tbody td.sum {
        flex: 1 1 auto !important;
        text-align: right !important;
        margin-top: 10px !important;
        margin-right: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        padding-right: 36px !important;
        box-sizing: border-box !important;
    }
    #box_basketlist table.productlist tbody td.sum em.color {
        font-size: 16px !important;
        font-weight: 800 !important;
        color: #0052ff !important;
    }

    /* Podsumowanie koszyka */
    .basket-summary,
    #box_basketsummary,
    body[class*="shop_basket"] #box_basketsummary {
        width: 100% !important;
        max-width: 100% !important;
        padding: 16px 12px !important;
        margin: 10px auto 24px auto !important;
        border-radius: 16px !important;
        box-sizing: border-box !important;
    }
    #box_basketsummary .innerbox {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    #box_basketsummary .kl-summary-table-wrap {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 20px 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        border: none !important;
        border-bottom: none !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    #box_basketsummary table.productlist,
    #box_basketsummary table.productlist tbody,
    #box_basketsummary table.productlist tbody tr td,
    #box_basketsummary table.productlist tfoot {
        border-bottom: none !important;
    }
    #box_basketsummary table.productlist tbody tr:last-child {
        border-bottom: 1.5px solid #e2e8f0 !important;
    }
    #box_basketsummary .kl-summary-cards-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 25px 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        align-items: center !important;
    }
    #box_basketsummary .kl-summary-card,
    #box_basketsummary div.delivery,
    #box_basketsummary div.invoice,
    #box_basketsummary div.information,
    #box_basketsummary div.address,
    .s-grid-12 #box_basketsummary div.delivery,
    .s-grid-12 #box_basketsummary div.invoice,
    .s-grid-12 #box_basketsummary div.information,
    .s-grid-12 #box_basketsummary div.address,
    .rwd #box_basketsummary div.address {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 20px 18px !important;
        border: 1.5px solid #e2e8f0 !important;
        border-radius: 20px !important;
        box-sizing: border-box !important;
        box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03) !important;
        background: #ffffff !important;
    }
    #box_basketsummary .kl-summary-totals-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 25px 0 !important;
        padding: 20px 18px !important;
        box-sizing: border-box !important;
    }
    #box_basketsummary .bottombuttons {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    #box_basketsummary .bottombuttons .btn {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .basket-summary button.important,
    .basket-summary a.important,
    #box_basketlist .bottombuttons button,
    #box_basketlist .bottombuttons a {
        width: 100% !important;
        height: 50px !important;
        font-size: 16px !important;
        font-weight: 800 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 12px !important;
    }
}

/* 5. Listingi kategorii i boczny pasek na telefonach */
@media (max-width: 900px) {
    /* Ukrycie pustego/rozsuwanego boksu menu z lewej kolumny */
    #box_menu {
        display: none !important;
    }
    .leftcol {
        width: 100% !important;
        float: none !important;
    }
    .centercol {
        width: 100% !important;
        float: none !important;
    }
    /* Tytuły produktów na listingach - czytelne 2 linie */
    .centercol .products .product .productnamewrap,
    .centercol .products .product .productname,
    .centercol .products .product .prodname {
        font-size: 13px !important;
        line-height: 1.35 !important;
        height: 42px !important;
        max-height: 42px !important;
    }
}

/* 6. Sekcja Hero i Belka zaufania (USP) na telefonach */
@media (max-width: 768px) {
    .hero-container {
        flex-direction: column !important;
        text-align: center !important;
        gap: 24px !important;
        padding: 24px 14px 40px 14px !important;
    }
    .hero-title {
        font-size: 28px !important;
        line-height: 1.25 !important;
    }
    .hero-subtitle {
        font-size: 14px !important;
        line-height: 1.5 !important;
        margin-bottom: 20px !important;
    }
    .hero-cta-btn {
        width: 100% !important;
        max-width: 280px !important;
        margin: 0 auto !important;
        justify-content: center !important;
        height: 48px !important;
        font-size: 14px !important;
    }
    .hero-features {
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
        margin-top: 24px !important;
        padding-top: 18px !important;
    }
    .hero-feature-item {
        width: auto !important;
        justify-content: center !important;
    }
    .hero-visual {
        height: 280px !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    .neon-ring {
        width: 240px !important;
        height: 240px !important;
    }
}

@media (max-width: 768px) {
    /* Belka zaufania (USP) – estetyczny układ 2x2 bez pustych komórek */
    .custom-trust-bar {
        padding: 24px 0 !important;
    }
    .custom-trust-bar .trust-container::before,
    .custom-trust-bar .trust-container::after,
    .trust-container::before,
    .trust-container::after {
        display: none !important;
        content: none !important;
    }
    .custom-trust-bar .trust-container {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 16px 14px !important;
        padding: 0 16px !important;
        align-items: start !important;
    }
    .custom-trust-bar .trust-item {
        min-width: 0 !important;
        width: 100% !important;
        flex: none !important;
        float: none !important;
        margin: 0 !important;
        gap: 10px !important;
        display: flex !important;
        align-items: flex-start !important;
        box-sizing: border-box !important;
    }
    .custom-trust-bar .trust-item .trust-icon {
        width: 24px !important;
        height: 24px !important;
        flex-shrink: 0 !important;
    }
    .custom-trust-bar .trust-item .trust-text strong {
        font-size: 11.5px !important;
        line-height: 1.25 !important;
        display: block !important;
    }
    .custom-trust-bar .trust-item .trust-text span {
        font-size: 10px !important;
        line-height: 1.3 !important;
        display: block !important;
    }

    /* Stopka sklepu na telefonie */
    .footer-container {
        flex-direction: column !important;
        gap: 24px !important;
        padding: 0 16px 30px 16px !important;
    }
    .footer-col, .brand-col {
        min-width: 100% !important;
        flex: 1 1 100% !important;
    }
    .footer-title {
        margin-bottom: 12px !important;
    }
}

/* Responsywne slidery na telefonach i tabletach */
@media (max-width: 768px) {
    .box.slider,
    .slider {
        overflow: hidden !important;
    }
    .slider .slider-nav-left,
    .box.slider .slider-nav-left {
        left: 4px !important;
    }
    .slider .slider-nav-right,
    .box.slider .slider-nav-right {
        right: 4px !important;
    }
}


/* ==========================================================================
   Globalny reset szerokości i eliminacja przesunięcia w prawo na telefonach
   ========================================================================== */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
    }
    .wrap, .wrap.rwd {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    .main, .main.row {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }
    .innermain, .innermain.container {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        box-sizing: border-box !important;
    }
    .centercol, .centercol.s-grid-12, .s-row {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    .box.slider, .box-slider, .slider, .pageslider {
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    .custom-hero-banner, .hero-wave {
        max-width: 100vw !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    .hero-visual {
        max-width: 100vw !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }
    .hero-wave svg {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
    }
    #box_productfull,
    #box_productfull .maininfo,
    #box_productfull .maininfo .f-row {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    #box_productfull .productimg,
    #box_productfull .f-grid-6 {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
}

/* Całkowite ukrycie mobilnych elementów na komputerach (Desktop) */
@media (min-width: 769px) {
    .kl-cat-chevron,
    .kl-mobile-dropdown-panel,
    .kl-mobile-backdrop {
        display: none !important;
    }
}


/* ==========================================================================
   DODATKOWE POPRAWKI MOBILNE (Kostkoland Mobile Polish)
   ========================================================================== */

/* 1. Pliki cookies - poprawka "Dostosuj zgody" */
.consents__basic-view.none,
.consents__advanced-view.none {
    display: none !important;
}
.consents__modal {
    max-height: 88vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}
.consents__advanced-content {
    max-height: 52vh !important;
    overflow-y: auto !important;
}
@media (max-width: 768px) {
    .consents__advanced-buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
        margin-top: 16px !important;
    }
    .consents__advanced-buttons .btn {
        width: 100% !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* 2. Kompaktowy nagłówek mobilny (Logo po lewej, konto na środku, ulubione i koszyk po prawej, lupa pod spodem) */
@media (max-width: 768px) {
    .header-custom {
        padding: 8px 0 !important;
        background: #ffffff !important;
        border-bottom: 1px solid #f1f5f9 !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
    }
    .header-container {
        position: relative !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        padding: 0 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .link-logo.header-logo {
        order: 1 !important;
        position: relative !important;
        left: auto !important;
        margin-left: 12% !important;
        margin-right: auto !important;
        max-width: 105px !important;
        display: flex !important;
        align-items: center !important;
        height: 38px !important;
        flex: 0 0 auto !important;
    }
    .link-logo.header-logo img {
        max-height: 32px !important;
        width: auto !important;
        display: block !important;
    }
    .header-icons {
        order: 2 !important;
        position: absolute !important;
        left: calc(50% - 22px) !important;
        top: 0px !important;
        height: 38px !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 10 !important;
        flex: 0 0 auto !important;
    }
    .header-icons .header-icon-item {
        position: static !important;
        transform: none !important;
        width: 44px !important;
        margin: 0 !important;
    }
    .header-icons .header-icon-item.user-item {
        position: static !important;
        transform: none !important;
        left: auto !important;
        top: auto !important;
        width: 44px !important;
        display: block !important;
    }
    .header-icons .header-icon-item.fav-item {
        margin: 0 !important;
    }
    .header-icons .header-icon-item.cart-item {
        margin: 0 !important;
    }
    .header-icons .header-icon-item a {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 2px !important;
        text-decoration: none !important;
        position: relative !important;
    }
    .header-icons .icon-img {
        width: 20px !important;
        height: 20px !important;
    }
    .header-icons .icon-label {
        font-size: 9.5px !important;
        font-weight: 600 !important;
        color: #475569 !important;
        margin-top: 1px !important;
    }
    .header-icons .fav-badge,
    .header-icons .cart-badge {
        font-size: 10px !important;
        min-width: 16px !important;
        height: 16px !important;
        line-height: 16px !important;
        padding: 0 4px !important;
    }
    .header-search {
        order: 3 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 4px 0 0 0 !important;
    }
    .header-search .search-form {
        display: flex !important;
        align-items: center !important;
        background: #f1f5f9 !important;
        border: 1.5px solid #e2e8f0 !important;
        border-radius: 24px !important;
        height: 38px !important;
        padding: 0 4px 0 14px !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }
    .header-search .search-input {
        flex: 1 1 auto !important;
        border: none !important;
        background: transparent !important;
        font-size: 13px !important;
        color: #1e293b !important;
        height: 34px !important;
        padding: 0 !important;
    }
    .header-search .search-btn {
        width: 30px !important;
        height: 30px !important;
        border-radius: 50% !important;
        background: #04bbff !important;
        border: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }
    .header-search .search-btn img {
        width: 14px !important;
        height: 14px !important;
        filter: brightness(0) invert(1) !important;
    }
}

/* 3. Sekcja Hero i Animacja Kostki Rubika na telefonach */
@media (max-width: 768px) {
    .custom-hero-banner {
        height: auto !important;
        min-height: auto !important;
        padding-top: 14px !important;
        padding-bottom: 40px !important;
    }
    .hero-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        height: auto !important;
        padding: 0 12px 10px 12px !important;
        gap: 0 !important;
    }
    .hero-content {
        display: contents !important;
    }
    .hero-badge {
        order: 1 !important;
        margin-top: 0 !important;
        margin-bottom: 8px !important;
        font-size: 11px !important;
        padding: 4px 14px !important;
    }
    .hero-title {
        order: 2 !important;
        font-size: 26px !important;
        line-height: 1.2 !important;
        text-align: center !important;
        margin: 0 0 6px 0 !important;
    }
    .hero-subtitle {
        order: 3 !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
        text-align: center !important;
        margin: 0 0 12px 0 !important;
    }
    .hero-visual {
        order: 4 !important;
        display: flex !important;
        flex: none !important;
        width: 100% !important;
        height: 180px !important;
        position: relative !important;
        margin: 5px auto 12px auto !important;
        overflow: visible !important;
        justify-content: center !important;
        align-items: center !important;
    }
    .neon-ring {
        position: absolute !important;
        width: 170px !important;
        height: 170px !important;
    }
    .rubiks-cube-wrapper {
        position: absolute !important;
        width: 110px !important;
        height: 110px !important;
        transform: translate(-10px, -24px) scale(0.75) !important;
    }
    .hero-cta-btn {
        order: 5 !important;
        width: 100% !important;
        max-width: 260px !important;
        margin: 0 auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        height: 44px !important;
        font-size: 13px !important;
        box-sizing: border-box !important;
        box-shadow: 0 4px 20px rgba(0, 82, 255, 0.4) !important;
    }
    .hero-features {
        order: 6 !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 12px 18px !important;
        margin-top: 16px !important;
        padding-top: 14px !important;
        width: 100% !important;
        border-top: 1px solid rgba(255,255,255,0.1) !important;
    }
    .hero-feature-item {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        width: auto !important;
        justify-content: center !important;
    }
    .hero-feature-item .feature-icon {
        font-size: 17px !important;
        color: #04bbff !important;
    }
    .hero-feature-item .feature-text strong {
        font-size: 12.5px !important;
        font-weight: 700 !important;
        display: block !important;
        color: #ffffff !important;
        letter-spacing: 0.2px !important;
    }
    .hero-feature-item .feature-text span {
        font-size: 11px !important;
        color: #cbd5e1 !important;
        display: block !important;
    }
}

/* 4. Belka zaufania (USP) - wyśrodkowany napis Premium jakość i siatka 2x2 */
@media (max-width: 768px) {
    .custom-usps-bar {
        padding: 24px 0 !important;
        margin-top: -20px !important;
        position: relative !important;
        z-index: 10 !important;
    }
    .usps-container {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 20px 16px !important;
        padding: 0 16px !important;
        justify-items: center !important;
        align-items: start !important;
    }
    .usps-container .usp-item {
        min-width: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 8px !important;
    }
    .usps-container .usp-item .usp-text {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
    .usps-container .usp-item:first-child {
        grid-column: 1 / -1 !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        margin: 0 auto 12px auto !important;
        width: auto !important;
    }
}

/* 5. Karta produktu - pełna szerokość i większe ramki przycisków Ulubione, Zapytaj, Opinia oraz odstępy ilości */
@media (max-width: 768px) {
    #box_productfull .price {
        margin-bottom: 16px !important;
    }
    #box_productfull .quantity_wrap {
        margin: 20px 0 18px 0 !important;
        padding: 6px 0 !important;
        display: flex !important;
        align-items: center !important;
    }
    #box_productfull .button_wrap {
        margin-top: 14px !important;
    }
    .kl-action-buttons-wrap,
    #box_productfull .kl-action-buttons-wrap {
        width: 100% !important;
        margin: 20px auto 0 auto !important;
    }
    .kl-action-row,
    #box_productfull .kl-action-row {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 10px !important;
        height: auto !important;
        max-height: none !important;
        box-sizing: border-box !important;
    }
    .kl-action-btn,
    #box_productfull .kl-action-btn,
    #box_productfull .kl-action-row .kl-action-btn {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        box-sizing: border-box !important;
        height: 46px !important;
        min-height: 46px !important;
        padding: 0 16px !important;
        font-size: 13.5px !important;
        font-weight: 600 !important;
        color: #334155 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        border-radius: 12px !important;
        border: 1.5px solid #cbd5e1 !important;
        background: #f8fafc !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
        transition: all 0.2s ease !important;
    }
    #box_productfull .price,
    #box_productfull .price__container,
    #box_productfull .kl-price-main-wrap {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
        margin: 2px auto 4px auto !important;
    }
    #box_productfull .kl-price-left {
        display: inline-flex !important;
        align-items: baseline !important;
        justify-content: center !important;
        gap: 6px !important;
        margin: 0 auto !important;
        text-align: center !important;
    }
    #box_productfull .kl-points-qty-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 14px !important;
        width: 100% !important;
        margin: 4px auto 8px auto !important;
    }
    #box_productfull .kl-points-qty-row .loyalty_points {
        display: inline-flex !important;
        align-items: center !important;
        margin: 0 !important;
        float: none !important;
        background: #ecfdf5 !important;
        border: 1px solid #a7f3d0 !important;
        color: #065f46 !important;
        padding: 6px 12px !important;
        border-radius: 20px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
    }
    #box_productfull .kl-points-qty-row .quantity_wrap {
        display: inline-flex !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
        float: none !important;
    }
    #box_productfull .kl-points-qty-row .quantity_wrap .quantity_name,
    #box_productfull .kl-points-qty-row .quantity_wrap .unit {
        display: none !important;
    }
    #box_productfull .kl-points-qty-row .kl-qty-stepper {
        margin: 0 !important;
    }

    /* Delikatne podświetlenie przycisków akcji */
    .kl-action-btn.kl-btn-fav:hover,
    .kl-action-btn.kl-btn-fav:active,
    #box_productfull .kl-action-btn.kl-btn-fav:hover,
    #box_productfull .kl-action-btn.kl-btn-fav:active {
        border-color: #ef4444 !important;
        color: #ef4444 !important;
        background: #fef2f2 !important;
        box-shadow: 0 0 12px rgba(239, 68, 68, 0.25) !important;
    }
    .kl-action-btn.kl-btn-fav:hover span,
    .kl-action-btn.kl-btn-fav:hover .kl-btn-icon-fav,
    .kl-action-btn.kl-btn-fav:active span,
    .kl-action-btn.kl-btn-fav:active .kl-btn-icon-fav,
    #box_productfull .kl-action-btn.kl-btn-fav:hover span,
    #box_productfull .kl-action-btn.kl-btn-fav:hover .kl-btn-icon-fav,
    #box_productfull .kl-action-btn.kl-btn-fav:active span,
    #box_productfull .kl-action-btn.kl-btn-fav:active .kl-btn-icon-fav {
        color: #ef4444 !important;
    }

    .kl-action-btn.kl-btn-ask:hover,
    .kl-action-btn.kl-btn-ask:active,
    #box_productfull .kl-action-btn.kl-btn-ask:hover,
    #box_productfull .kl-action-btn.kl-btn-ask:active {
        border-color: #0052ff !important;
        color: #0052ff !important;
        background: #eff6ff !important;
        box-shadow: 0 0 12px rgba(0, 82, 255, 0.25) !important;
    }
    .kl-action-btn.kl-btn-ask:hover span,
    .kl-action-btn.kl-btn-ask:active span,
    #box_productfull .kl-action-btn.kl-btn-ask:hover span,
    #box_productfull .kl-action-btn.kl-btn-ask:active span {
        color: #0052ff !important;
    }

    .kl-action-btn.kl-btn-review:hover,
    .kl-action-btn.kl-btn-review:active,
    #box_productfull .kl-action-btn.kl-btn-review:hover,
    #box_productfull .kl-action-btn.kl-btn-review:active {
        border-color: #f97316 !important;
        color: #f97316 !important;
        background: #fff7ed !important;
        box-shadow: 0 0 12px rgba(249, 115, 22, 0.25) !important;
    }
    .kl-action-btn.kl-btn-review:hover span,
    .kl-action-btn.kl-btn-review:hover .kl-btn-icon-review,
    .kl-action-btn.kl-btn-review:active span,
    .kl-action-btn.kl-btn-review:active .kl-btn-icon-review,
    #box_productfull .kl-action-btn.kl-btn-review:hover span,
    #box_productfull .kl-action-btn.kl-btn-review:hover .kl-btn-icon-review,
    #box_productfull .kl-action-btn.kl-btn-review:active span,
    #box_productfull .kl-action-btn.kl-btn-review:active .kl-btn-icon-review {
        color: #f97316 !important;
    }
}

/* 5b. Opcje przeglądania w kategoriach wycentrowane i dopasowane na telefonach */
@media (max-width: 768px) {
    #box_filter,
    #box_productfilter,
    .category-filters,
    .filter.category-filters,
    .sort-and-view {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 16px 14px !important;
        margin: 0 0 20px 0 !important;
        overflow: visible !important;
    }
    #box_filter .innerbox,
    #box_productfilter .innerbox,
    .category-filters .innerbox {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    #box_filter .innerbox > div,
    #box_filter .innerbox > .multiselect,
    #box_filter .innerbox > .group,
    #box_filter .innerbox > .group-filter,
    #box_productfilter .innerbox > div,
    #box_productfilter .innerbox > .multiselect {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        width: 100% !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
        display: flex !important;
        justify-content: center !important;
        position: relative !important;
        overflow: visible !important;
    }
    #box_filter .multiselect,
    #box_filter #filter_custom_sort,
    #box_productfilter .multiselect,
    #box_productfilter #filter_custom_sort {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 48px !important;
        min-height: 48px !important;
        line-height: 46px !important;
        border-radius: 24px !important;
        box-sizing: border-box !important;
        padding: 0 40px 0 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        text-align: left !important;
    }
    #box_filter .multiselect > span,
    #box_filter #filter_custom_sort > span,
    #box_productfilter .multiselect > span,
    #box_productfilter #filter_custom_sort > span {
        font-size: 13.5px !important;
        font-weight: 600 !important;
        display: block !important;
        width: auto !important;
        max-width: calc(100% - 20px) !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
    #box_filter .multiselect ul,
    #box_filter #filter_custom_sort ul,
    #box_productfilter .multiselect ul,
    #box_productfilter #filter_custom_sort ul {
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        box-sizing: border-box !important;
    }
}

/* 6. Formularz Logowania i Rejestracji (#box_login) na telefonach */
@media (max-width: 768px) {
    #box_login {
        padding: 16px 14px !important;
        margin: 25px auto 20px auto !important;
        box-shadow: none !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 16px !important;
        box-sizing: border-box !important;
    }
    #box_login .social-login-buttons {
        padding: 0 0 20px 0 !important;
        margin-bottom: 20px !important;
    }
    #box_login .social-login-buttons a.btn {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 6px 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 46px !important;
        border-radius: 12px !important;
        font-size: 13.5px !important;
    }
    #box_login .innerbox {
        padding: 0 !important;
    }
    #box_login .innerbox .f-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        margin: 0 !important;
    }
    #box_login .innerbox .f-grid-6 {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        float: none !important;
        margin: 0 !important;
        padding: 20px 16px !important;
        background: #f8fafc !important;
        border-radius: 16px !important;
        border: 1px solid #e2e8f0 !important;
        box-sizing: border-box !important;
    }
    #box_login .login-inner,
    #box_login .register-inner {
        position: static !important;
        height: auto !important;
        padding: 0 !important;
        display: block !important;
    }
    #box_login .login-head,
    #box_login .register-head {
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        margin-bottom: 16px !important;
    }
    #box_login .login-inner label {
        display: block !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #334155 !important;
        margin-bottom: 6px !important;
    }
    #box_login .login-inner input[type="text"],
    #box_login .login-inner input[type="password"] {
        width: 100% !important;
        box-sizing: border-box !important;
        height: 46px !important;
        margin-bottom: 14px !important;
        border-radius: 10px !important;
        border: 1px solid #cbd5e1 !important;
        padding: 0 12px !important;
        background: #ffffff !important;
        font-size: 14px !important;
    }
    #box_login .login-inner .forgot-pass-link {
        margin: 8px 0 16px 0 !important;
        text-align: right !important;
    }
    #box_login .login-inner .forgot-pass-link a {
        font-size: 12.5px !important;
        color: #0052ff !important;
    }
    #box_login .login-inner .btn.login,
    #box_login .register-inner .btn.register {
        position: static !important;
        width: 100% !important;
        margin-top: 14px !important;
        height: 48px !important;
        border-radius: 12px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        box-shadow: none !important;
        cursor: pointer !important;
    }
    #box_login .login-inner .btn.login {
        background: linear-gradient(135deg, #0052ff 0%, #04bbff 100%) !important;
        color: #ffffff !important;
        border: none !important;
        box-shadow: 0 4px 14px rgba(0, 82, 255, 0.25) !important;
    }
    #box_login .register-inner .btn.register {
        background: #0f172a !important;
        color: #ffffff !important;
        border: 1px solid #1e293b !important;
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.15) !important;
    }
    #box_login .register-addons {
        margin: 12px 0 16px 18px !important;
        padding: 0 !important;
    }
    #box_login .register-addons li {
        font-size: 12.5px !important;
        color: #475569 !important;
        margin-bottom: 6px !important;
        line-height: 1.4 !important;
    }
}

@media (min-width: 769px) {
    .kl-cat-chevron,
    .kl-mobile-dropdown-panel,
    .kl-mobile-backdrop {
        display: none !important;
    }
}

/* 7. Naprawa obramowania ilości na karcie produktu (górna i dolna kreska, kompaktowy stepper) */
.kl-qty-stepper,
#box_productfull .kl-qty-stepper {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-radius: 12px !important;
    border: 2px solid #cbd5e1 !important;
    background: #ffffff !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    transition: border-color 0.2s ease !important;
}
.kl-qty-stepper:hover,
.kl-qty-stepper:focus-within,
#box_productfull .kl-qty-stepper:hover,
#box_productfull .kl-qty-stepper:focus-within {
    border-color: #04bbff !important;
}
#box_productfull .number-wrap,
#box_productfull span.number-wrap {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
}
#box_productfull .kl-qty-stepper input,
.kl-qty-stepper input.short {
    width: 54px !important;
    height: 40px !important;
    line-height: 40px !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    background-color: transparent !important;
    text-align: center !important;
    font-size: 19px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    padding: 0 !important;
    margin: 0 auto !important;
    -moz-appearance: textfield !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    display: block !important;
    box-sizing: border-box !important;
}
.kl-qty-arrows {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    width: 32px !important;
    border-left: 1.5px solid #cbd5e1 !important;
    border-top: none !important;
    border-bottom: none !important;
    border-right: none !important;
    box-sizing: border-box !important;
}
.kl-qty-btn {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f8fafc !important;
    border: none !important;
    color: #475569 !important;
    font-size: 10px !important;
    cursor: pointer !important;
    padding: 0 !important;
    transition: all 0.15s ease !important;
    user-select: none !important;
    box-sizing: border-box !important;
}
.kl-qty-btn:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}

/* 8. Koszyk na telefonie (/pl/basket) - wycentrowana dostawa, płatność i podsumowanie */
@media (max-width: 768px) {
    body[class*="shop_basket"] .innermain,
    body[class*="shop_basket"] .centercol,
    .shop_basket .centercol,
    .shop_basket .main {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
        float: none !important;
    }

    body[class*="shop_basket"] #box_basketlist,
    #box_basketlist {
        padding: 16px 12px !important;
        margin: 10px auto 24px auto !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        border-radius: 16px !important;
    }

    #box_basketlist .innerbox {
        padding: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    #box_basketlist #cart-options,
    #cart-options {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 16px auto 0 auto !important;
        gap: 16px !important;
        box-sizing: border-box !important;
        padding: 0 !important;
    }

    #cart-options .delivery-container,
    #cart-options .payment-container,
    #box_basketlist .delivery-container,
    #box_basketlist .payment-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 16px !important;
        box-sizing: border-box !important;
        border-radius: 16px !important;
        flex: none !important;
        min-width: 0 !important;
    }

    #cart-options .delivery,
    #cart-options .payment,
    #box_basketlist .delivery,
    #box_basketlist .payment {
        width: 100% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #cart-options .summary-container,
    #box_basketlist .summary-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 16px auto !important;
        box-sizing: border-box !important;
        padding: 18px 16px !important;
        border: 2px solid #04bbff !important;
        border-radius: 18px !important;
        box-shadow: 0 8px 24px rgba(4, 187, 255, 0.1) !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        overflow: visible !important;
    }

    #box_basketlist .summary-container .recount {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        padding: 8px 0 !important;
        margin: 0 !important;
        border-bottom: 1px dashed #e2e8f0 !important;
    }
    #box_basketlist .summary-container .recount > span {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        gap: 10px !important;
    }
    #box_basketlist .summary-container .recount .desc {
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #475569 !important;
        white-space: normal !important;
        text-align: left !important;
    }
    #box_basketlist .summary-container .recount .desc em {
        font-style: normal !important;
    }
    #box_basketlist .summary-container .recount .sum {
        margin-left: auto !important;
        text-align: right !important;
    }
    #box_basketlist .summary-container .recount .sum em {
        font-size: 16px !important;
        font-weight: 800 !important;
        color: #0f172a !important;
        font-style: normal !important;
        white-space: nowrap !important;
    }

    #box_basketlist .summary-container .deliveryhead {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        padding: 8px 0 !important;
        margin: 0 !important;
        border-bottom: 1px dashed #e2e8f0 !important;
    }
    #box_basketlist .summary-container .deliveryhead .cost {
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #475569 !important;
        white-space: normal !important;
        text-align: left !important;
    }
    #box_basketlist .summary-container .deliveryhead .cost em {
        font-style: normal !important;
    }
    #box_basketlist .summary-container .deliveryhead .value {
        margin-left: auto !important;
        text-align: right !important;
    }
    #box_basketlist .summary-container .deliveryhead .value em {
        font-size: 16px !important;
        font-weight: 800 !important;
        color: #0f172a !important;
        font-style: normal !important;
        white-space: nowrap !important;
    }

    #box_basketlist .summary-container > .sum {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        background: #f0f9ff !important;
        border-radius: 12px !important;
        padding: 16px 18px !important;
        margin: 4px 0 !important;
        box-sizing: border-box !important;
    }
    #box_basketlist .summary-container > .sum .desc {
        font-size: 15px !important;
        font-weight: 800 !important;
        color: #0f172a !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        margin: 0 !important;
    }
    #box_basketlist .summary-container > .sum .value {
        font-size: 24px !important;
        font-weight: 900 !important;
        color: #04bbff !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }

    #box_basketlist .summary-container .promocode {
        width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    #box_basketlist .summary-container .loyalty_points {
        width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        padding: 12px 16px !important;
        background: #f0fdf4 !important;
        border: 1px solid #bbf7d0 !important;
        border-radius: 12px !important;
        color: #166534 !important;
        text-align: center !important;
    }
    #box_basketlist .summary-container .loyalty_points .points {
        font-weight: 900 !important;
        color: #16a34a !important;
    }

    #box_basketlist .buttons,
    #cart-options .buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
        margin: 18px auto 0 auto !important;
        padding: 0 !important;
    }
    #box_basketlist .buttons .forward,
    #box_basketlist .buttons .forward .btn,
    #cart-options .buttons .forward,
    #cart-options .buttons .forward .btn {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    #box_basketlist .buttons .back,
    #box_basketlist .buttons .back .btn,
    #cart-options .buttons .back,
    #cart-options .buttons .back .btn {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* Furgonetka Map Modal i Wybór punktu */
#furgonetka-modal-root,
div[id*="furgonetka"],
.modal-overlay,
.furgonetka-map,
div[class*="modal-overlay"],
#widget-modal__map,
.easypack-widget {
    z-index: 999999999 !important;
    position: fixed !important;
}

/* Ukrycie dublującego wiersza wtyczki Furgonetki */
tr:has(#fbiz_btn_select_point):not(#kl_pickup_row) {
    display: none !important;
}

#fbiz_btn_select_point,
.fbiz_btn_select_point,
#kl_btn_select_inpost,
#kl_btn_select_dpd,
.kl-btn-pickup {
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    height: auto !important;
    min-height: 42px !important;
    padding: 10px 16px !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    text-align: center !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    background: #ef4444 !important;
    background-color: #ef4444 !important;
    background-image: none !important;
    color: #ffffff !important;
    border: 1px solid #dc2626 !important;
}

#fbiz_btn_select_point:hover,
.fbiz_btn_select_point:hover,
#kl_btn_select_inpost:hover,
#kl_btn_select_dpd:hover,
.kl-btn-pickup:hover {
    background: #dc2626 !important;
    background-color: #dc2626 !important;
    background-image: none !important;
    color: #ffffff !important;
}

#kl_btn_select_inpost.is-hidden,
#kl_btn_select_dpd.is-hidden,
.kl-btn-pickup.is-hidden {
    display: none !important;
}

#fbiz_btn_select_point.point-selected,
.fbiz_btn_select_point.point-selected,
#kl_btn_select_inpost.point-selected,
#kl_btn_select_dpd.point-selected,
.kl-btn-pickup.point-selected {
    background: #10b981 !important;
    background-color: #10b981 !important;
    background-image: none !important;
    border: 1px solid #059669 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    height: auto !important;
    min-height: 44px !important;
    padding: 10px 16px !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.25) !important;
}

#fbiz_btn_select_point.point-selected:hover,
.fbiz_btn_select_point.point-selected:hover,
#kl_btn_select_inpost.point-selected:hover,
#kl_btn_select_dpd.point-selected:hover,
.kl-btn-pickup.point-selected:hover {
    background: #059669 !important;
    background-color: #059669 !important;
    background-image: none !important;
    color: #ffffff !important;
}

#fbiz_btn_select_point.point-selected::before,
#fbiz_btn_select_point.point-selected::after,
.fbiz_btn_select_point.point-selected::before,
.fbiz_btn_select_point.point-selected::after,
#kl_btn_select_inpost.point-selected::before,
#kl_btn_select_inpost.point-selected::after,
#kl_btn_select_dpd.point-selected::before,
#kl_btn_select_dpd.point-selected::after,
.kl-btn-pickup.point-selected::before,
.kl-btn-pickup.point-selected::after {
    display: none !important;
    content: none !important;
    background: none !important;
    background-image: none !important;
}

/* Always keep standard order button visible in basket action row */
#box_basketlist .buttons button[name="button2"].order,
#box_basketlist .buttons .forward .btn.order,
#box_basketlist .buttons .btn.order.hidden-by-autopay,
#box_basketlist .buttons .btn.order.none {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}




/* === Ukrycie pól Kraj i Województwo w formularzu adresu koszyka === */
/* Pole Kraj (country) - główny adres i adres dodatkowy */
#box_basketaddress tr.country,
#box_basketaddress tr.error_country,
#box_basketaddress tr.country2,
#box_basketaddress tr.error_country2 {
    display: none !important;
}
/* Pole Województwo (state / county) - w razie gdyby Shoper je renderował */
#box_basketaddress tr.state,
#box_basketaddress tr.error_state,
#box_basketaddress tr.state2,
#box_basketaddress tr.error_state2,
#box_basketaddress tr.county,
#box_basketaddress tr.error_county,
#box_basketaddress tr.county2,
#box_basketaddress tr.error_county2 {
    display: none !important;
}




/* Kostkoland: algorithms library v2, scoped styles. */
/* Kostkoland algorithms UI v2. Append after the existing Shoper CSS.
   Intentionally no site-wide resets, font imports or dark-mode selectors. */
#kl-algorithms-v2 {
  --kla-font: "Open Sans", OpenSans, Arial, sans-serif;
  --kla-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --kla-navy: #111b32;
  --kla-navy-soft: #172b3e;
  --kla-blue: #006a98;
  --kla-blue-hover: #00547b;
  --kla-cyan: #04bbff;
  --kla-blue-wash: #eaf6fc;
  --kla-text: #172b3e;
  --kla-muted: #526173;
  --kla-line: #dce3eb;
  --kla-control-line: #8595a6;
  --kla-white: #ffffff;
  --kla-bg: #f5f7fa;
  --kla-success: #1d6845;
  --kla-small: 12px;
  --kla-ui: 14px;
  --kla-body: 15px;
  --kla-heading: 22px;
  --kla-s1: 4px;
  --kla-s2: 8px;
  --kla-s3: 12px;
  --kla-s4: 16px;
  --kla-s5: 20px;
  --kla-s6: 24px;
  --kla-s8: 32px;
  --kla-radius: 14px;
  position: relative;
  box-sizing: border-box;
  display: block;
  isolation: isolate;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: var(--kla-s6);
  border: 0;
  border-radius: var(--kla-radius);
  background: var(--kla-bg);
  color: var(--kla-text);
  font-family: var(--kla-font);
  font-size: var(--kla-body);
  font-weight: 400;
  line-height: 1.65;
  text-align: left;
  letter-spacing: normal;
  text-transform: none;
  color-scheme: light;
  -webkit-font-smoothing: antialiased;
}

#kl-algorithms-v2 *,
#kl-algorithms-v2 *::before,
#kl-algorithms-v2 *::after {
  box-sizing: border-box;
}

#kl-algorithms-v2 [hidden] {
  display: none !important;
}

#kl-algorithms-v2 h1,
#kl-algorithms-v2 h2,
#kl-algorithms-v2 h3,
#kl-algorithms-v2 p,
#kl-algorithms-v2 ul,
#kl-algorithms-v2 ol,
#kl-algorithms-v2 li,
#kl-algorithms-v2 dl,
#kl-algorithms-v2 dt,
#kl-algorithms-v2 dd {
  width: auto;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
}

#kl-algorithms-v2 h1,
#kl-algorithms-v2 h2,
#kl-algorithms-v2 h3 {
  display: block;
  float: none;
  font-family: var(--kla-font) !important;
  font-weight: 700;
  font-style: normal;
  line-height: 1.3;
  color: var(--kla-navy) !important;
}

#kl-algorithms-v2 h1::before,
#kl-algorithms-v2 h1::after,
#kl-algorithms-v2 h2::before,
#kl-algorithms-v2 h2::after,
#kl-algorithms-v2 h3::before,
#kl-algorithms-v2 h3::after,
#kl-algorithms-v2 li::before,
#kl-algorithms-v2 li::after {
  content: none;
}

#kl-algorithms-v2 p,
#kl-algorithms-v2 li,
#kl-algorithms-v2 dd {
  font-family: var(--kla-font);
  font-size: var(--kla-body);
  line-height: 1.65;
}

#kl-algorithms-v2 ul,
#kl-algorithms-v2 ol {
  list-style: none;
}

#kl-algorithms-v2 .kla-prose {
  white-space: pre-line;
  overflow-wrap: anywhere;
}

#kl-algorithms-v2 .kla-button,
#kl-algorithms-v2 .kla-input,
#kl-algorithms-v2 .kla-select,
#kl-algorithms-v2 .kla-manual-text {
  position: relative;
  float: none;
  height: auto;
  min-height: 44px;
  max-height: none;
  margin: 0;
  border: 1px solid var(--kla-control-line);
  border-radius: 8px;
  background: var(--kla-white);
  color: var(--kla-text);
  box-shadow: none;
  font-family: var(--kla-font) !important;
  font-size: var(--kla-ui);
  font-weight: 400;
  font-style: normal;
  line-height: 1.45;
  text-align: left;
  text-indent: 0;
  text-transform: none;
  letter-spacing: normal;
  text-shadow: none;
  opacity: 1;
  vertical-align: middle;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

#kl-algorithms-v2 .kla-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: var(--kla-s2);
  width: auto;
  min-width: 44px;
  max-width: 100%;
  padding: 10px var(--kla-s4);
  appearance: none;
  -webkit-appearance: none;
  color: var(--kla-blue);
  font-weight: 600;
  white-space: normal;
  cursor: pointer;
  text-decoration: none;
}

#kl-algorithms-v2 .kla-button::before,
#kl-algorithms-v2 .kla-button::after {
  content: none;
}

#kl-algorithms-v2 .kla-button:hover:not(:disabled) {
  border-color: var(--kla-blue);
  background: var(--kla-blue-wash);
  color: var(--kla-blue-hover);
  box-shadow: none;
}

#kl-algorithms-v2 .kla-button:disabled {
  color: #657487;
  border-color: var(--kla-line);
  background: #eef1f5;
  cursor: default;
}

#kl-algorithms-v2 .kla-button-primary {
  border-color: var(--kla-blue);
  background: var(--kla-blue);
  color: var(--kla-white);
}

#kl-algorithms-v2 .kla-button-primary:hover:not(:disabled) {
  border-color: var(--kla-blue-hover);
  background: var(--kla-blue-hover);
  color: var(--kla-white);
}

#kl-algorithms-v2 a {
  color: var(--kla-blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

#kl-algorithms-v2 a:hover {
  color: var(--kla-blue-hover);
  text-decoration-thickness: 2px;
}

#kl-algorithms-v2 .kla-button:focus-visible,
#kl-algorithms-v2 .kla-input:focus-visible,
#kl-algorithms-v2 .kla-select:focus-visible,
#kl-algorithms-v2 .kla-manual-text:focus-visible,
#kl-algorithms-v2 summary:focus-visible,
#kl-algorithms-v2 a:focus-visible,
#kl-algorithms-v2 .kla-moves:focus-visible,
#kl-algorithms-v2 .kla-context-title:focus-visible {
  outline: 3px solid var(--kla-blue) !important;
  outline-offset: 3px;
  box-shadow: none;
}

#kl-algorithms-v2 ::selection {
  background: #b8e8fc;
  color: var(--kla-navy);
}

#kl-algorithms-v2 .kla-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

#kl-algorithms-v2 .kla-skip {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 5;
  width: 1px;
  min-width: 0;
  height: 1px;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

#kl-algorithms-v2 .kla-skip:focus {
  width: auto;
  height: auto;
  min-height: 44px;
  padding: var(--kla-s3) var(--kla-s4);
  clip-path: none;
}

#kl-algorithms-v2 .kla-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kla-s6);
  padding: var(--kla-s6) var(--kla-s8);
  margin: 0 0 var(--kla-s6);
  border: 0;
  border-radius: var(--kla-radius);
  background: var(--kla-navy);
  color: var(--kla-white);
}

#kl-algorithms-v2 .kla-hero-copy {
  min-width: 0;
}

#kl-algorithms-v2 .kla-eyebrow {
  margin: 0 0 var(--kla-s2);
  color: #c1d8e8;
  font-size: var(--kla-small);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

#kl-algorithms-v2 .kla-eyebrow span {
  margin: 0 var(--kla-s2);
  color: var(--kla-cyan);
}

#kl-algorithms-v2 .kla-hero .kla-title {
  margin: 0 0 var(--kla-s2) !important;
  color: var(--kla-white) !important;
  font-size: clamp(26px, 2.7vw, 32px) !important;
  line-height: 1.2;
}

#kl-algorithms-v2 .kla-hero-description {
  max-width: 650px;
  color: #d8e3ef;
  font-size: var(--kla-body);
}

#kl-algorithms-v2 .kla-library-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--kla-s4);
  margin-top: var(--kla-s4);
  color: #d8e3ef;
  font-size: var(--kla-small);
  line-height: 1.5;
}

#kl-algorithms-v2 .kla-library-meta span + span {
  padding-left: var(--kla-s4);
  border-left: 1px solid #516077;
}

#kl-algorithms-v2 .kla-cube-scene {
  display: grid;
  place-items: center;
  flex: 0 0 146px;
  height: 136px;
  perspective: 650px;
  pointer-events: none;
}

#kl-algorithms-v2 .kla-cube {
  position: relative;
  width: 78px;
  height: 78px;
  transform: rotateX(-24deg) rotateY(-35deg);
  transform-style: preserve-3d;
}

#kl-algorithms-v2 .kla-cube-face {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 3px;
  padding: 3px;
  border: 1px solid #172b3e;
  border-radius: 5px;
  background: #172b3e;
  backface-visibility: hidden;
}

#kl-algorithms-v2 .kla-cube-face span {
  border-radius: 3px;
}

#kl-algorithms-v2 .kla-cube-front {
  transform: translateZ(39px);
}

#kl-algorithms-v2 .kla-cube-front span {
  background: var(--kla-cyan);
}

#kl-algorithms-v2 .kla-cube-right {
  transform: rotateY(90deg) translateZ(39px);
}

#kl-algorithms-v2 .kla-cube-right span {
  background: #087fae;
}

#kl-algorithms-v2 .kla-cube-top {
  transform: rotateX(90deg) translateZ(39px);
}

#kl-algorithms-v2 .kla-cube-top span {
  background: #f4f8fc;
}

#kl-algorithms-v2 .kla-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  align-items: start;
  gap: var(--kla-s6);
}

#kl-algorithms-v2 .kla-sidebar {
  min-width: 0;
  padding: var(--kla-s5) var(--kla-s3);
  border: 1px solid var(--kla-line);
  border-radius: var(--kla-radius);
  background: var(--kla-white);
}

#kl-algorithms-v2 .kla-sidebar-title {
  padding: 0 var(--kla-s2);
  margin-bottom: var(--kla-s5);
  font-size: var(--kla-body);
}

#kl-algorithms-v2 .kla-nav-group + .kla-nav-group {
  margin-top: var(--kla-s5);
}

#kl-algorithms-v2 .kla-nav-label {
  margin: 0 var(--kla-s2) var(--kla-s2);
  color: var(--kla-muted);
  font-size: var(--kla-small);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#kl-algorithms-v2 .kla-nav-list {
  display: grid;
  gap: 2px;
}

#kl-algorithms-v2 .kla-nav-list li {
  display: block;
  list-style: none;
}

#kl-algorithms-v2 .kla-puzzle-button {
  display: flex;
  justify-content: space-between;
  width: 100%;
  min-height: 44px;
  padding: var(--kla-s2) var(--kla-s3);
  border-color: transparent;
  border-radius: 8px;
  color: var(--kla-text);
  text-align: left;
}

#kl-algorithms-v2 .kla-puzzle-button[aria-pressed="true"] {
  border-color: #aed8ed;
  background: var(--kla-blue-wash);
  color: #00577d;
  font-weight: 700;
}

#kl-algorithms-v2 .kla-puzzle-count {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 24px;
  min-height: 24px;
  padding: 0 var(--kla-s1);
  border-radius: 5px;
  color: var(--kla-muted);
  background: var(--kla-bg);
  font-size: var(--kla-small);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

#kl-algorithms-v2 .kla-puzzle-button[aria-pressed="true"] .kla-puzzle-count {
  background: #d4edf9;
  color: #00577d;
}

#kl-algorithms-v2 .kla-sidebar-note {
  margin: var(--kla-s5) var(--kla-s2) 0;
  padding-top: var(--kla-s4);
  border-top: 1px solid var(--kla-line);
  color: var(--kla-muted);
  font-size: var(--kla-small);
  line-height: 1.7;
}

#kl-algorithms-v2 .kla-mobile-nav {
  display: none;
}

#kl-algorithms-v2 .kla-workbench {
  min-width: 0;
}

#kl-algorithms-v2 .kla-context {
  padding: var(--kla-s6);
  border: 1px solid var(--kla-line);
  border-radius: var(--kla-radius);
  background: var(--kla-white);
}

#kl-algorithms-v2 .kla-section-label {
  margin-bottom: var(--kla-s2);
  color: var(--kla-muted);
  font-size: var(--kla-small);
  font-weight: 600;
  letter-spacing: 0.04em;
}

#kl-algorithms-v2 .kla-section-label span {
  margin: 0 var(--kla-s1);
  color: #6c7b8b;
}

#kl-algorithms-v2 .kla-context-title {
  font-size: var(--kla-heading);
  overflow-wrap: anywhere;
  scroll-margin-top: var(--kla-s6);
}

#kl-algorithms-v2 .kla-context-intro {
  margin-top: var(--kla-s3);
  color: var(--kla-muted);
}

#kl-algorithms-v2 .kla-guides {
  margin-top: var(--kla-s5);
  border-top: 1px solid var(--kla-line);
}

#kl-algorithms-v2 .kla-guide {
  display: block;
  border: 0;
  background: transparent;
}

#kl-algorithms-v2 .kla-guide + .kla-guide {
  border-top: 1px solid var(--kla-line);
}

#kl-algorithms-v2 summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: var(--kla-s3) var(--kla-s6) var(--kla-s3) 0;
  margin: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--kla-blue);
  font-family: var(--kla-font);
  font-size: var(--kla-ui);
  font-weight: 600;
  line-height: 1.5;
  list-style: none;
  cursor: pointer;
}

#kl-algorithms-v2 summary::-webkit-details-marker {
  display: none;
}

#kl-algorithms-v2 summary::marker {
  content: "";
}

#kl-algorithms-v2 summary::after {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -5px;
  right: 4px;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 150ms ease;
}

#kl-algorithms-v2 details[open] > summary::after {
  margin-top: -2px;
  transform: rotate(225deg);
}

#kl-algorithms-v2 summary:hover {
  color: var(--kla-blue-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

#kl-algorithms-v2 .kla-summary-meta {
  margin-left: auto;
  padding-left: var(--kla-s4);
  color: var(--kla-muted);
  font-size: var(--kla-small);
  font-weight: 400;
  text-align: right;
}

#kl-algorithms-v2 .kla-guide-body {
  padding: var(--kla-s2) 0 var(--kla-s5);
  color: var(--kla-muted);
}

#kl-algorithms-v2 .kla-steps {
  display: grid;
  gap: var(--kla-s5);
}

#kl-algorithms-v2 .kla-step {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: var(--kla-s3);
}

#kl-algorithms-v2 .kla-step-number {
  padding-top: 1px;
  color: var(--kla-blue);
  font-family: var(--kla-mono);
  font-size: var(--kla-ui);
  font-variant-numeric: tabular-nums;
}

#kl-algorithms-v2 .kla-step h3 {
  margin-bottom: var(--kla-s1);
  font-size: var(--kla-body);
}

#kl-algorithms-v2 .kla-notation-list {
  display: grid;
  gap: var(--kla-s3);
}

#kl-algorithms-v2 .kla-notation-entry {
  display: grid;
  grid-template-columns: minmax(60px, 0.22fr) minmax(0, 1fr);
  gap: var(--kla-s4);
  padding-bottom: var(--kla-s3);
  border-bottom: 1px solid var(--kla-line);
}

#kl-algorithms-v2 .kla-notation-entry:last-child {
  padding-bottom: 0;
  border: 0;
}

#kl-algorithms-v2 .kla-notation-entry code {
  color: var(--kla-navy);
  background: transparent;
  padding: 0;
  border: 0;
  font-family: var(--kla-mono);
  font-size: var(--kla-body);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

#kl-algorithms-v2 .kla-notation-entry dd {
  font-size: var(--kla-ui);
  overflow-wrap: anywhere;
}

#kl-algorithms-v2 .kla-notation-full {
  grid-column: 1 / -1;
}

#kl-algorithms-v2 .kla-filters {
  margin: var(--kla-s6) 0;
}

#kl-algorithms-v2 .kla-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 0.62fr);
  gap: var(--kla-s3);
}

#kl-algorithms-v2 .kla-filter-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--kla-s3);
  margin-top: var(--kla-s3);
}

#kl-algorithms-v2 .kla-search-field,
#kl-algorithms-v2 .kla-scope-field,
#kl-algorithms-v2 .kla-group-field,
#kl-algorithms-v2 .kla-level-field {
  min-width: 0;
}

#kl-algorithms-v2 .kla-field-label {
  display: block;
  width: auto;
  margin: 0 0 var(--kla-s2);
  padding: 0;
  color: var(--kla-text);
  font-size: var(--kla-ui);
  font-weight: 600;
  line-height: 1.4;
}

#kl-algorithms-v2 .kla-search-input-wrap {
  position: relative;
}

#kl-algorithms-v2 .kla-input,
#kl-algorithms-v2 .kla-select,
#kl-algorithms-v2 .kla-manual-text {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 10px var(--kla-s3);
}

#kl-algorithms-v2 .kla-input {
  min-height: 48px;
  padding-left: 42px;
  -webkit-appearance: none;
  appearance: none;
}

#kl-algorithms-v2 .kla-input::placeholder {
  color: #5b6b7d;
  opacity: 1;
}

#kl-algorithms-v2 .kla-search-row .kla-select {
  min-height: 48px;
}

#kl-algorithms-v2 .kla-select {
  padding-right: var(--kla-s8);
  appearance: auto;
  -webkit-appearance: menulist;
  background-image: none;
  cursor: pointer;
}

#kl-algorithms-v2 .kla-search-icon {
  position: absolute;
  z-index: 1;
  top: 16px;
  left: 16px;
  display: block;
  width: 13px;
  height: 13px;
  border: 1.7px solid #526173;
  border-radius: 50%;
  pointer-events: none;
}

#kl-algorithms-v2 .kla-search-icon::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 2px;
  right: -5px;
  bottom: -3px;
  background: #526173;
  transform: rotate(45deg);
  border-radius: 1px;
}

#kl-algorithms-v2 .kla-reset {
  padding-right: var(--kla-s3);
  padding-left: var(--kla-s3);
}

#kl-algorithms-v2 .kla-results-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--kla-s2) var(--kla-s4);
  margin-bottom: var(--kla-s4);
}

#kl-algorithms-v2 .kla-results-heading h2 {
  font-size: 18px;
}

#kl-algorithms-v2 .kla-result-count {
  color: var(--kla-muted);
  font-size: var(--kla-ui);
  font-variant-numeric: tabular-nums;
}

#kl-algorithms-v2 .kla-card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--kla-s4);
}

#kl-algorithms-v2 .kla-card {
  min-width: 0;
  padding: var(--kla-s5);
  border: 1px solid var(--kla-line);
  border-radius: 12px;
  background: var(--kla-white);
  box-shadow: 0 2px 4px rgba(17, 27, 50, 0.02);
}

#kl-algorithms-v2 .kla-card-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--kla-s2);
  margin-bottom: var(--kla-s2);
  line-height: 1.5;
}

#kl-algorithms-v2 .kla-card-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--kla-s2);
  min-width: 0;
  color: var(--kla-muted);
  font-size: var(--kla-small);
  font-weight: 600;
  overflow-wrap: anywhere;
}

#kl-algorithms-v2 .kla-category-tag {
  padding: 1px 6px;
  border: 1px solid #c9ddeb;
  border-radius: 4px;
  color: #00577d;
  background: var(--kla-blue-wash);
}

#kl-algorithms-v2 .kla-level {
  display: inline-block;
  padding: 2px var(--kla-s2);
  border: 1px solid var(--kla-line);
  border-radius: 4px;
  background: var(--kla-bg);
  color: var(--kla-muted);
  font-size: var(--kla-small);
  font-weight: 400;
  white-space: nowrap;
}

#kl-algorithms-v2 .kla-level-start {
  border-color: #cddfd5;
  color: #286145;
  background: #f0f7f3;
}

#kl-algorithms-v2 .kla-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kla-s3);
  min-height: 44px;
  margin-bottom: var(--kla-s3);
}

#kl-algorithms-v2 .kla-card-heading h3 {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 18px;
  overflow-wrap: anywhere;
}

#kl-algorithms-v2 .kla-copy {
  min-width: 90px;
  min-height: 44px;
  padding: var(--kla-s2) 10px;
  border-color: #bfd1df;
  border-radius: 7px;
  font-size: var(--kla-small);
}

#kl-algorithms-v2 .kla-copy-icon {
  position: relative;
  display: inline-block;
  flex: 0 0 12px;
  width: 12px;
  height: 13px;
  margin: 2px 1px 0 2px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
}

#kl-algorithms-v2 .kla-copy-icon::before {
  content: "";
  position: absolute;
  left: -4px;
  top: -4px;
  width: 9px;
  height: 10px;
  border-top: 1.5px solid currentColor;
  border-left: 1.5px solid currentColor;
  border-radius: 2px 0 0;
}

#kl-algorithms-v2 .kla-sequence {
  padding: var(--kla-s3) var(--kla-s4);
  border: 1px solid #e0e6ed;
  border-radius: 7px;
  background: var(--kla-bg);
}

#kl-algorithms-v2 .kla-moves {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--kla-navy);
  font-family: var(--kla-mono) !important;
  font-size: 16px;
  font-weight: 500;
  font-style: normal;
  font-variant-ligatures: none;
  line-height: 1.8;
  letter-spacing: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: normal;
  tab-size: 2;
  -webkit-user-select: text;
  user-select: text;
  cursor: text;
}

#kl-algorithms-v2 .kla-recognition {
  margin-top: var(--kla-s4);
}

#kl-algorithms-v2 .kla-small-label {
  margin-bottom: var(--kla-s1);
  color: var(--kla-muted);
  font-size: var(--kla-small);
  font-weight: 600;
}

#kl-algorithms-v2 .kla-recognition > .kla-prose {
  color: #3d4e61;
  font-size: var(--kla-ui);
  line-height: 1.65;
}

#kl-algorithms-v2 .kla-card-details {
  margin-top: var(--kla-s4);
  border-top: 1px solid var(--kla-line);
}

#kl-algorithms-v2 .kla-card-details > summary {
  min-height: 44px;
  padding-top: var(--kla-s3);
  padding-bottom: var(--kla-s2);
  font-size: var(--kla-small);
}

#kl-algorithms-v2 .kla-card-details-body {
  padding: var(--kla-s2) 0 0;
  color: var(--kla-muted);
}

#kl-algorithms-v2 .kla-card-details-body > p {
  font-size: var(--kla-ui);
}

#kl-algorithms-v2 .kla-algorithm-source {
  margin-top: var(--kla-s2);
}

#kl-algorithms-v2 .kla-source-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  max-width: 100%;
  padding: 6px 0;
  font-size: var(--kla-ui);
  overflow-wrap: anywhere;
}

#kl-algorithms-v2 .kla-external {
  flex: 0 0 auto;
  text-decoration: none;
}

#kl-algorithms-v2 .kla-text-button {
  justify-content: flex-start;
  border-color: transparent;
  margin-top: var(--kla-s2);
  padding: var(--kla-s2) 0;
  background: transparent;
  text-align: left;
  font-size: var(--kla-ui);
  text-decoration: underline;
  text-underline-offset: 3px;
}

#kl-algorithms-v2 .kla-copy-feedback {
  margin-top: var(--kla-s3);
  color: var(--kla-muted);
  font-size: var(--kla-small);
}

#kl-algorithms-v2 .kla-copy-success {
  color: var(--kla-success);
}

#kl-algorithms-v2 .kla-copy-manual {
  padding: var(--kla-s3);
  border: 1px solid #bed7e6;
  border-radius: 7px;
  background: #f1f8fc;
}

#kl-algorithms-v2 .kla-copy-manual p {
  margin-bottom: var(--kla-s3);
  font-size: var(--kla-ui);
}

#kl-algorithms-v2 .kla-manual-text {
  margin-bottom: var(--kla-s3);
  font-family: var(--kla-mono) !important;
  font-size: 16px;
  resize: vertical;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  -webkit-user-select: text;
  user-select: text;
}

#kl-algorithms-v2 .kla-empty {
  padding: var(--kla-s8) var(--kla-s6);
  border: 1px dashed #a9bbc9;
  border-radius: 12px;
  background: var(--kla-white);
}

#kl-algorithms-v2 .kla-empty h3,
#kl-algorithms-v2 .kla-empty h2 {
  margin-bottom: var(--kla-s2);
  font-size: 18px;
}

#kl-algorithms-v2 .kla-empty p {
  max-width: 55ch;
  color: var(--kla-muted);
}

#kl-algorithms-v2 .kla-empty-mark {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
  margin-bottom: var(--kla-s4);
}

#kl-algorithms-v2 .kla-empty-mark .kla-search-icon {
  top: 1px;
  left: 0;
  width: 18px;
  height: 18px;
}

#kl-algorithms-v2 .kla-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kla-s3);
  margin-top: var(--kla-s5);
}

#kl-algorithms-v2 .kla-category-sources {
  margin-top: var(--kla-s8);
  padding-top: var(--kla-s5);
  border-top: 1px solid var(--kla-line);
}

#kl-algorithms-v2 .kla-category-sources h2 {
  margin-bottom: var(--kla-s2);
  font-size: var(--kla-body);
}

#kl-algorithms-v2 .kla-category-sources p {
  color: var(--kla-muted);
  font-size: var(--kla-ui);
}

#kl-algorithms-v2 .kla-category-sources ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--kla-s6);
  margin-top: var(--kla-s2);
}

#kl-algorithms-v2[data-kla-preview] {
  max-width: 1280px;
  margin: 24px auto;
}

@media (min-width: 1150px) {
  #kl-algorithms-v2 .kla-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1000px) {
  #kl-algorithms-v2 {
    padding: var(--kla-s4);
  }

  #kl-algorithms-v2 .kla-layout {
    grid-template-columns: 190px minmax(0, 1fr);
    gap: var(--kla-s4);
  }

  #kl-algorithms-v2 .kla-context {
    padding: var(--kla-s5);
  }

  #kl-algorithms-v2 .kla-filter-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #kl-algorithms-v2 .kla-reset {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

@media (max-width: 760px) {
  #kl-algorithms-v2 {
    padding: var(--kla-s4);
    border-radius: 12px;
  }

  #kl-algorithms-v2 .kla-hero {
    padding: var(--kla-s6);
    margin-bottom: var(--kla-s4);
  }

  #kl-algorithms-v2 .kla-cube-scene {
    flex-basis: 100px;
    height: 112px;
    transform: scale(0.8);
  }

  #kl-algorithms-v2 .kla-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--kla-s4);
  }

  #kl-algorithms-v2 .kla-sidebar {
    padding: var(--kla-s4);
  }

  #kl-algorithms-v2 .kla-desktop-nav {
    display: none;
  }

  #kl-algorithms-v2 .kla-mobile-nav {
    display: block;
  }

  #kl-algorithms-v2 .kla-context {
    padding: var(--kla-s5);
  }

  #kl-algorithms-v2 .kla-search-row {
    grid-template-columns: minmax(0, 1fr) minmax(180px, 0.65fr);
  }

  #kl-algorithms-v2 .kla-card-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #kl-algorithms-v2 .kla-input,
  #kl-algorithms-v2 .kla-select {
    font-size: 16px;
  }
}

@media (max-width: 520px) {
  #kl-algorithms-v2 {
    --kla-heading: 21px;
    padding: var(--kla-s3);
  }

  #kl-algorithms-v2 .kla-hero {
    padding: var(--kla-s5);
  }

  #kl-algorithms-v2 .kla-cube-scene {
    display: none;
  }

  #kl-algorithms-v2 .kla-hero-description {
    max-width: 30ch;
  }

  #kl-algorithms-v2 .kla-eyebrow {
    font-size: var(--kla-small);
    letter-spacing: 0.04em;
  }

  #kl-algorithms-v2 .kla-eyebrow span {
    margin: 0 var(--kla-s1);
  }

  #kl-algorithms-v2 .kla-context {
    padding: var(--kla-s4);
  }

  #kl-algorithms-v2 .kla-context-intro {
    font-size: var(--kla-ui);
  }

  #kl-algorithms-v2 .kla-summary-meta {
    max-width: 112px;
    padding-left: var(--kla-s2);
  }

  #kl-algorithms-v2 .kla-search-row {
    grid-template-columns: minmax(0, 1fr);
  }

  #kl-algorithms-v2 .kla-filter-row {
    gap: var(--kla-s3) var(--kla-s2);
  }

  #kl-algorithms-v2 .kla-card {
    padding: var(--kla-s4);
  }

  #kl-algorithms-v2 .kla-card-heading {
    gap: var(--kla-s2);
  }

  #kl-algorithms-v2 .kla-card-heading h3 {
    font-size: 17px;
  }

  #kl-algorithms-v2 .kla-copy {
    min-width: 78px;
    padding-right: var(--kla-s2);
    padding-left: var(--kla-s2);
  }

  #kl-algorithms-v2 .kla-sequence {
    padding: var(--kla-s3);
  }

  #kl-algorithms-v2 .kla-empty {
    padding: var(--kla-s6) var(--kla-s4);
  }

  #kl-algorithms-v2 .kla-results-heading {
    display: block;
  }

  #kl-algorithms-v2 .kla-result-count {
    margin-top: var(--kla-s1);
    font-size: var(--kla-small);
  }

  #kl-algorithms-v2[data-kla-preview] {
    margin: 8px auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  #kl-algorithms-v2 *,
  #kl-algorithms-v2 *::before,
  #kl-algorithms-v2 *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  #kl-algorithms-v2 .kla-puzzle-button[aria-pressed="true"] {
    outline: 2px solid Highlight;
    outline-offset: -3px;
  }

  #kl-algorithms-v2 .kla-cube-scene {
    display: none;
  }
}

/* Only the algorithms route changes the content region, not the shop shell. */
body.kl-algorithms-view .custom-hero-banner,
body.kl-algorithms-view .custom-usps-bar,
body.kl-algorithms-view .breadcrumbs {
    display: none !important;
}
body.kl-algorithms-view .main .kl-algorithms-host > :not(#kl-algorithms-v2) {
    display: none !important;
}
body.kl-algorithms-view .main {
    margin-top: 0 !important;
    padding-top: 24px !important;
}
body.kl-algorithms-view #kl-algorithms-v2 {
    display: block !important;
    width: 100% !important;
    min-width: 0;
    float: none !important;
    margin: 0 0 32px !important;
}
@media (max-width: 767px) {
    body.kl-algorithms-view .main { padding-top: 16px !important; }
}