/**
 * =============================================================================
 * FILE: app-global.css
 * =============================================================================
 *
 * PURPOSE:
 * Global stylesheet for the entire JoyBuggy website. This file contains all
 * site-wide styles including layout, navigation, header, footer, cart, search,
 * product listings, and responsive design rules.
 *
 * MAIN SECTIONS:
 * - Full Page Styles: Global backgrounds, colors, scrollbar styling
 * - Header & Navigation: Logo, user icons, main menu, mobile menu, search
 * - Cart & User Account: Cart dropdown, user dropdown, logged-in states
 * - Breadcrumbs: Navigation breadcrumbs styling
 * - Product Lists: Grid/list layouts for products across site
 * - My Account Pages: Account navigation and page layouts
 * - Mobile Menu: Responsive mobile navigation
 * - Media Queries: Responsive breakpoints for all screen sizes
 *
 * DEPENDENCIES:
 * - FontAwesome (for icons)
 * - Bootstrap grid system
 * - Custom fonts: Poppins
 * - Image assets: preloader.gif, icon SVGs
 *
 * COLOR SCHEME:
 * - Primary Background: #090909 (dark)
 * - Secondary Background: #16162A (card/container bg)
 * - Accent Color: #38F2D3 (teal/mint green)
 * - Text Primary: #FFFFFF (white)
 * - Text Secondary: #797E8B (gray)
 * - Border Color: #272745, #4F4F68
 * - Hover/Active: #38F2D3 variations
 * - Error/Delete: #DE2372 (pink)
 * - Warning: #FFCC18 (yellow)
 *
 * SEARCH KEYWORDS:
 * For finding specific areas, please search for these keywords:
 * 'media-style', 'header-style', 'full-page-style', 'menu-items-style',
 * 'menu-style', 'cart-and-myaccount-styles', 'breadcrumbs-styles',
 * 'main-content-styles', 'footer-styles', 'product-list-style'
 *
 * =============================================================================
 */

/* full-page-style (global backgrounds and colors and styling) */
::-webkit-scrollbar {
    width: 3.5px;
}

::-webkit-scrollbar-track {
    border-radius: 100vh;
    background: linear-gradient(17.03deg,
            #5c5c77 -184.03%,
            rgba(92, 92, 119, 0) 131.31%);
}

::-webkit-scrollbar-thumb {
    background: #38f2d3;
    border-radius: 10px;
}

* {
    max-width: 100%;
}

body {
    overflow-x: hidden;
    position: relative;
}

.container {
    max-width: 1280px;
}

.d-none {
    display: none !important;
}

.loading-overlay::after {
    background: url(../../img/preloader.gif) center center no-repeat rgba(56, 56, 56, 0.5);
}

button {
    background: none;
    border: none;
}

.d-flex {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.mx-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/** HEADER CSS **/
body #columns {
    padding-left: 10px;
    padding-right: 10px;
}

#setLang {
    margin-bottom: 0;
}

.usp-bar-container {
    display: flex;
    justify-content: center;
    width: 100%;
    background-color: #ddd;
}

.usp-bar {
    color: #212121;
    max-width: 1280px;
    width: 100%;
}

.usp-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5em 2em;
    white-space: nowrap;
}

.usp-text {
    margin: 0;
    flex-grow: 0;
    flex-shrink: 0;
}

.trustpilot-section a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #212121;
    white-space: nowrap;
}

.trustpilot-img {
    height: 20px;
    width: auto;
    margin-right: 0.5em;
}

.trustpilot-section {
    flex: 0 1 auto;
}

.trustpilot-section a {
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 991px) {
    .usp-bar-container {
        display: none;
    }
}

header#header {
    width: 100%;
}

#header-blocks {
    margin: 15px min(15px, 33px);
}

#header-blocks>.row {
    align-items: center;
    gap: min(15px, 55px);
}

#shop-logo img {
    height: 25px;
    width: 112px;
    max-width: unset;
}

.user-icons {
    min-width: 108px;
    align-items: center;
}

.user-icons img {
    min-width: 25px;
    width: auto;
    height: auto;
    max-height: 30px;
}

#blockcart-wrap,
#header_user {
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

#blockcart-wrap,
#header_user,
.user-icons>button {
    padding: 5px 10px;
}

.user-icons> :first-child {
    padding-left: 0;
}

.user-icons> :last-child {
    padding-right: 0;
}

.main-menu,
#select-languages_top {
    display: none;
}

.main-menu li {
    font-size: 12px;
}

.main-menu a {
    display: flex;
    align-items: center;
}

/* 
.main-menu a:hover {
    color: #fff;
}
*/

.mask {
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
}

.main-menu a .mask {
    margin-right: 5px;
    background-color: #f0f0f0;
    height: 15px;
    width: 15px;
}

.main-menu a:hover .mask {
    background-color: #38f2d3;
}

p#header_user_info {
    margin-bottom: 0;
}

div#mobileMenuWrap {
    position: fixed;
    top: 7%;
    z-index: 99;
    background: #090909;
    width: 100%;
    left: 0;
    display: flex;
    justify-content: center;
    height: 0;
    overflow: hidden;
    transition: 0.3s;
}

div#mobileMenuWrap.active {
    height: 100%;
    transition: 0.3s;
}

div#mobileMenuWrap .main-menu {
    display: block;
    margin-top: 10%;
}

div#mobileMenuWrap .main-menu a {
    width: 100%;
    padding: 25px;
    text-align: center;
    justify-content: center;
    border-bottom: 0.762147px solid #272745;
    min-width: 190px;
    font-size: 14px;
    gap: 7px;
}

.redeem_country {
    max-width: 300px;
}

#search_block_top .btn.button-search {
    background: #333;
    border: none;
    color: #fff;
    width: 47px;
    height: 45px;
    text-align: center;
    padding: 10px 0 11px;
}

#search_block_top .btn.button-search span {
    display: none;
}

#search_block_top .btn.button-search:before {
    content: "\f002";
    display: block;
    font-family: fontawesome;
    font-size: 12px;
    width: 100%;
    text-align: center;
}

#search_block_top input#search_query_top {
    position: absolute;
    bottom: 5px;
    width: auto;

    padding: 5px 20px;
    height: 60px;
    top: -5px;
    left: 0;
    right: 0;
    z-index: 2;
}

#search_block_top #searchbox .btn.button-search {
    z-index: 2;
}

#search_block_top #searchbox input#search_query_top:not(.d-none)+.btn.button-search {
    position: absolute;
    right: 10px;
    top: 2px;
    z-index: 3;
}

#header_user {
    position: relative;
}

#header-blocks nav.user-dropdown {
    display: inline-flex;
    flex-direction: column;

    position: absolute;
    top: calc(100% + 41px);
    left: -58px;

    width: 157px;
    padding: 21px 17px;
    max-width: unset;

    background: #16162a;
    border-radius: 10px;
    align-items: baseline;
    gap: 15px;
}

#header-blocks nav.user-dropdown:before {
    content: "";
    position: absolute;
    width: 36px;
    height: 36px;
    left: 60px;
    top: -18px;
    background: #16162a;
    transform: rotate(45deg);
}

#header-blocks nav.user-dropdown a {
    display: flex;
    align-items: center;
    gap: 10px;
}

#header-blocks nav.user-dropdown .support-button {
    background: #262642;
    border-radius: 5px;
    padding: 11px 18px;
    font-size: 12px;
    color: #38f2d3;
}

#header-blocks nav.user-dropdown .logout {
    color: #38f2d3;
}

#blockcart-dropdown img {
    max-width: 100%;
    height: auto;
}

.product_list.list .product-description-container,
.product_list.list .product-actions-container {
    padding: 0 15px;
}

div#savebtn-wrap .btn-danger {
    border-color: rgba(255, 0, 0, 0.2);
    background-color: rgba(255, 0, 0, 0.2);
}

#adBlockPopupContainer {
    user-select: text;
    visibility: visible;
    width: 100%;
    position: static;
}

#adBlockPopupContainer form {
    position: relative;
    z-index: 1;

    display: inline-block;
    vertical-align: top;
    width: calc(100% - 25px);
}

#adBlockPopupContainer h1,
#adBlockPopupContainer p {
    margin-block: 0;
    line-height: 1;
}

#adBlockPopupContainer h1 {
    color: black;
    margin-bottom: 5px;
    background-color: transparent !important;
    text-align: unset !important;
    padding: 0 !important;
}

#adBlockPopupContainer .backdrop {
    position: fixed;
    inset: 0px;
    background: rgba(0, 0, 0, 0.1);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    display: none;
}

#adBlockPopupContainer button {
    font-size: 15px;
    position: absolute;
    top: -10px;
    right: -7px;
    cursor: pointer;
    z-index: 1;
    padding: 0;
    color: red;
}

.ubisoftActivationPopup {
    background-color: #31b41a;
}

#searchbox .button-close {
    color: red;
    z-index: 9;
    position: relative;
}

@media screen and (max-width: 768px) {
    body:not(#index) .product_list.grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }

    body:not(#index) .product_list.grid.row:before,
    body:not(#index) .product_list.grid.row:after {
        display: none;
    }

    body:not(#index) ul.product_list.grid.list-grid li .product-container .product-image-container a.product_img_link img {
        min-height: unset;
        object-fit: scale-down;
    }

    body:not(#index) ul.product_list.grid.list-grid li .product-container .product-actions-container .product-price-button-wrapper .content_price {
        position: static;
    }

    .blockcartpopup_container #layer_cart .layer_cart_product .thumbnail {
        height: unset;
        width: unset;
    }

    #search_block_top #searchbox .btn.button-search {
        position: absolute;
        top: 3px;
        right: 10px;
    }

    #search_block_top:has(.d-none) #searchbox .btn.button-search {
        position: static;
    }

    body .ui-jolisearch {
        left: 15px !important;
    }
}
.jolisearch {
    padding-left: 1em;
}
@media (min-width: 768px) {
    #header-blocks {
        margin: 15px 33px;
        width: auto;
    }

    #header-blocks>.row:before,
    #header-blocks>.row:after {
        display: none;
    }

    #select-languages_top {
        display: block;
    }
}

@media (min-width: 1000px) {
    .d-flex {
        flex-direction: unset;
    }
}

@media (min-width: 1280px) {
    .d-flex {
        flex-direction: unset;
    }

    body #columns {
        padding-left: 0px;
        padding-right: 0px;
    }

    #header-blocks nav {
        display: inline-flex;
        align-items: center;

        background-color: #141420;
        border-radius: 0px 0px 8.64803px 8.64803px;
        margin-top: -15px;
        padding: 13px 35px;

        position: relative;
    }

    .menu-toggle {
        display: none;
    }
    /* Update to menu 15/6-24  */  
        /* Ensure the nav bar has relative positioning */
        nav .main-menu {
            position: relative;
            column-gap: 2em;
        }
        .user-img {
            margin-right: 5px;
            width: auto;
            height: auto;
            max-width: 18px;
        }

        /* Style the user-menu and its dropdown */
        nav .user-menu {
            position: relative;
        }
        nav .user-menu .user-dropdown {
            flex-direction: column;
            position: absolute;
            top: calc(100% + 20px); /* Position below the user-menu */
            left: 0; /* Adjust position as needed */
            width: 157px; /* Set width */
            padding: 21px 17px; /* Add padding */
            max-width: unset; /* Remove any max-width restrictions */
            background: #16162a; /* Set background color */
            border-radius: 10px; /* Add border-radius */
            align-items: baseline; /* Align items */
            gap: 10px; /* Set gap between items */
            z-index: 1000; /* Ensure it's above other elements */
        }
        nav .user-dropdown .main-menu li:first-child{
            padding: 0;
        }
        nav li.user-menu.active li a {
            padding-top: 1em;
        }
        
        /* Show the dropdown when the user-menu is active */
        nav .user-menu.active .user-dropdown {
            display: block;
        }
        .menu-break {
            border-right: 1px solid rgba(255, 255, 255, 0.1);
        }

   /* .main-menu li {
        padding: 6px 35px;
        border-right: 1px solid rgba(255, 255, 255, 0.1);
    }
    */         
    /* Update to menu 15/6-24  */
    .main-menu {
        display: flex;
    }

    .main-menu li:first-child {
        padding-left: 0;
    }

    .main-menu .mask {
        display: none;
    }

    div#mobileMenuWrap {
        display: none;
    }

    #search_block_top input#search_query_top {
        position: absolute;
        top: 5px;
        left: 25px;
        right: 25px;
        bottom: 5px;
        width: auto;
        height: auto;
    }

    #search_block_top #searchbox .btn.button-search {
        position: relative;
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
    }
}

@media (min-width: 1400px) {
    .main-menu .mask {
        display: inline;
    }
}

/** END OF NEW DESIGN **/

/* blockcart hover */
#blockcart-dropdown {
    bottom: 0px;
    padding: 30px 15px !important;
    background: #16162a !important;
    border-radius: 10px;
    min-height: 550px;
    height: 100%;
}

#blockcart-dropdown .cart_block_list {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
}

#blockcart-dropdown .cart_block_list .cart_block_container .cart_block_title {
    font-size: 18px;
}

#blockcart-dropdown .cart_block_list .cart_block_container dl.products {
    margin-top: 20px;
    border-top: 1px solid #090909;
}

#blockcart-dropdown .cart_block_list .cart_block_container dl.products dt {
    border-bottom: 1px solid #090909 !important;
}

#blockcart-dropdown .cart_block_list span,
#blockcart-dropdown .cart_block_list .cart_block_container dl.products dt .cart-info .product-name a,
#blockcart-dropdown .cart_block_list .cart_block_container dl.products dt .cart-info .price {
    color: white;
}

#blockcart-dropdown .cart_block_list .cart_block_container dl.products dt .cart-info .price {
    position: unset !important;
}

#blockcart-dropdown .cart_block_list .cart-prices-container .cart-prices {
    border-top: 1px solid #090909 !important;
    padding: 15px 0;
}

#blockcart-dropdown .cart_block_list .cart-prices-container .cart-buttons #button_order_cart {
    background: #38f2d3;
    border: 1.38009px solid #38f2d3;
    box-shadow: 0px 4px 20px rgb(56 242 211 / 25%);
    border-radius: 6.90045px;
    font-weight: 600;
    font-size: 13.6008px;
    line-height: 12px;
    color: #090909;
    padding: 15px;
}

/* blockcart hover */ 
/* checkout popup */
#layer_cart {
    position: fixed !important;
    right: 0;
    left: 0;
    transform: translate(0, -50%);
    top: 50% !important;
    margin: auto !important;
    width: 100% !important;
    max-width: 919px;
    background: #16162a !important;
    border-radius: 10px;
}

.blockcartpopup_container .layer_cart_overlay {
    opacity: 0.9 !important;
}

#layer_cart .layer_cart_product {
    padding: 42px 77px 0 77px;
}

#layer_cart .layer_cart_product>.row {
    display: flex;
    padding: 0 15px;
    border-bottom: 1px solid #434360;
    padding-bottom: 27px;
    align-items: center;
}

#layer_cart .layer_cart_product button.close.cross {
    color: #666696;
    border-radius: 3px;
    text-shadow: unset;
}

#layer_cart .layer_cart_product span.cart-title::after {
    content: "";
    border-top: 1px solid #fff200;
    position: absolute;
    bottom: -27px;
    left: 0;
    width: 165px;
    height: 1px;
}

#layer_cart .layer_cart_product span.cart-title {
    font-weight: 600;
    font-size: 28px;
    color: white;
    width: 70%;
    margin-bottom: 47px;
    display: flex;
    position: relative;
}

#layer_cart .layer_cart_product .thumbnail {
    margin: 0;
    padding: 0;
    border: none;
    width: 185px;
    height: 106px;
    border-radius: 10px;
    background: transparent;
}

#layer_cart .layer_cart_product .thumbnail img {
    border-radius: 10px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#layer_cart .layer_cart_product .layer_cart_product_info {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
}

#layer_cart .layer_cart_product>.row>div.col-xs-10 {
    display: flex;
}

#layer_cart .layer_cart_product .layer_cart_product_info a {
    color: white;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
}

#layer_cart .layer_cart_product .layer_cart_product_info a:hover {
    color: #38f2d3;
}

#layer_cart .layer_cart_product .layer_cart_product_info p,
#layer_cart .layer_cart_product .layer_cart_product_info span {
    color: white;
    margin-bottom: 0;
}

#layer_cart .layer_cart_product .layer_cart_product_info p {
    font-size: 14px;
    color: #ccc;
}

#layer_cart .layer_cart_cart p.layer_cart_row,
#layer_cart .layer_cart_cart p.layer_cart_row strong {
    color: #fff !important;
}

#layer_cart .layer_cart_cart .layer_button_container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 15px;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

/* Two buttons side by side */
#layer_cart .layer_cart_cart .layer_button_container .btn-continue {
    grid-column: 1;
    grid-row: 1;
    background: transparent;
    color: #fff;
    font-weight: 600;
    border: 2px solid #666696;
    border-radius: 6.90045px;
    height: 53.82px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

#layer_cart .layer_cart_cart .layer_button_container .btn-continue:hover {
    border-color: #38f2d3;
    color: #38f2d3;
}

#layer_cart .layer_cart_cart .layer_button_container .btn-checkout {
    grid-column: 2;
    grid-row: 1;
    background: #38f2d3;
    color: #000;
    font-weight: 600;
    border: 1.38009px solid #38f2d3;
    box-shadow: 0px 4px 20px rgb(56 242 211 / 25%);
    border-radius: 6.90045px;
    height: 53.82px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

#layer_cart .layer_cart_cart .layer_button_container .btn-checkout:hover {
    background: #2dd4b8;
    border-color: #2dd4b8;
}

/* Total display below buttons */
#layer_cart .layer_cart_cart .layer_button_container .cart-total-display {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 20px;
    font-weight: 600;
    color: white;
    text-align: center;
    padding-top: 10px;
}

#layer_cart .layer_cart_cart .layer_button_container .cart-total-display .ajax_block_cart_total {
    color: #38f2d3;
    font-size: 24px;
    margin-left: 8px;
}

#layer_cart .layer_cart_cart {
    background: none;
    min-height: unset !important;
    border: 0;
    padding: 27px 77px 30px 77px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
}

/* Upsell/Cross-selling section */
#layer_cart .crossseling {
    padding: 0 77px 40px 77px;
    border-top: 1px solid #434360;
    margin-top: 20px;
}

#layer_cart .crossseling .grelated_products {
    margin-top: 20px;
}

#layer_cart .crossseling .grelated_products h3 {
    color: white;
    font-size: 18px;
    margin-bottom: 15px;
    text-align: center;
}

/* Mobile responsiveness */
@media (max-width: 600px) {
    #layer_cart .layer_cart_cart .layer_button_container {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }
    
    #layer_cart .layer_cart_cart .layer_button_container .btn-continue {
        grid-column: 1;
        grid-row: 1;
    }
    
    #layer_cart .layer_cart_cart .layer_button_container .btn-checkout {
        grid-column: 1;
        grid-row: 2;
    }
    
    #layer_cart .layer_cart_cart .layer_button_container .cart-total-display {
        grid-column: 1;
        grid-row: 3;
    }
    
    #layer_cart .layer_cart_product,
    #layer_cart .layer_cart_cart,
    #layer_cart .crossseling {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* end checkout popup */

/* !!! header-style !!! */
#header-toggle {
    display: none;
}

header#header {
    display: inline-block;
    position: sticky;
    top: 0 !important;
    z-index: 999;
}

header#header.sticky {
    position: sticky;
}

#header div#header-blocks {
    max-width: 100%;
    padding: 0;
}

#header div#header-blocks .row {
    margin: 0;
    display: flex;
    justify-content: space-between;
}

div#shop-logo {
    padding: 25px;
}

header#header.active div#shop-logo {
    max-width: 250px;
}

.mobile-header-active {
    display: none !important;
}

img.mobile {
    display: none !important;
}

body h1.page-heading {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 600;
    font-size: 36px;
    line-height: 34px;
    text-transform: none;
    color: white;
}

/* search styles */
#search_block_top input#search_query_top {
    background: #141420;
    border: 1px solid transparent;
    border-radius: 5px;
    font-size: 14px;
    line-height: 12px;
    color: #797e8b;
    padding: 0 25px;
}

#search_block_top #searchbox .btn.button-search {
    background: #38f2d3;
    color: #333;
    opacity: 1;
    border-radius: 10px;
}

/* search styles end */

/* menu-style */
#header .ets_mm_megamenu_content {
    background: transparent;
    border: none;
}

#header .ets_mm_megamenu_content .mm_menus_ul .mm_menus_li {
    border: none;
    position: relative;
    padding-left: 15px;
    border-bottom: 1px solid #272745;
    width: 100%;
}

#header .ets_mm_megamenu_content .mm_menus_ul .mm_menus_li:before {
    content: "";
    width: 8px;
    height: 40px;
    display: block;
    position: absolute;
    top: 10px;
    left: -40px;
    z-index: 9;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    transition: 0.1s;
}

#header .ets_mm_megamenu_content .mm_menus_ul .mm_menus_li:hover:before {
    left: -30px;
    background: #38f2d3;
    transition: 0.1s;
}

#header .ets_mm_megamenu_content .mm_menus_ul .mm_menus_li a {
    text-transform: capitalize;
    position: relative;
    padding-left: 25px;
    background: transparent !important;
    font-weight: 400;
}

#header .ets_mm_megamenu_content .mm_menus_ul .mm_menus_li a span {
    padding: 14px 20px;
    width: 100%;
}

#header .ets_mm_megamenu_content .mm_menus_ul .mm_menus_li a span.mm_arrow {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
}

#header .ets_mm_megamenu_content .mm_has_sub>a .mm_arrow:after,
.ets_mm_block_content .has-sub>a:after {
    border: none !important;
    content: "" !important;
    font-family: FontAwesome;
    font-size: 18px;
    font-weight: 400;
    color: #38f2d3;
    top: 0 !important;
    right: 0 !important;
}

#header .ets_mm_megamenu_content .mm_menus_ul .mm_menus_li a:hover span {
    color: #fff;
    font-weight: 400;
}

/* menu-items */
#header .ets_mm_megamenu_content .mm_menus_ul .mm_menus_li a:before {
    content: "";
    display: inline-block;
    width: 20px;
    /*25px;*/
    height: 20px;
    /*17px;*/
    position: absolute;
    left: 0;
    top: calc(50% - 9px);
}

#header .ets_mm_megamenu_content .mm_menus_ul .mm_menus_li.menu-games>a:before {
    background: url(../../img/icon/svg/games.svg) no-repeat;
    background-size: contain;
}

#header .ets_mm_megamenu_content .mm_menus_ul .mm_menus_li.menu-norton>a:before {
    background: url(../../img/icon/svg/norton.png) no-repeat;
    background-size: contain;
}

#header .ets_mm_megamenu_content .mm_menus_ul .mm_menus_li.menu-gift-card>a:before {
    background: url(../../img/icon/svg/gift.svg) no-repeat;
    background-size: contain;
}

#header .ets_mm_megamenu_content .mm_menus_ul .mm_menus_li.menu-new-games>a:before {
    background: url(../../img/icon/svg/new.svg) no-repeat;
    background-size: contain;
}

#header .ets_mm_megamenu_content .mm_menus_ul .mm_menus_li.menu-preoder>a:before {
    background: url(../../img/icon/svg/preorder.svg) no-repeat;
    background-size: contain;
}

#header .ets_mm_megamenu_content .mm_menus_ul .mm_menus_li.menu-community>a:before {
    background: url(../../img/icon/svg/comm.svg) no-repeat;
    background-size: contain;
}

#header .ets_mm_megamenu_content .mm_menus_ul .mm_menus_li.menu-deal>a:before {
    background: url(../../img/icon/svg/deal.svg) no-repeat;
    background-size: contain;
}

#header .ets_mm_megamenu_content .mm_menus_ul .mm_menus_li ul.mm_columns_ul {
    position: absolute;
    left: calc(100%);
    top: 0;
    background: #16162a;
    border: none;
}

#header .ets_mm_megamenu_content .mm_menus_ul .mm_menus_li ul.mm_columns_ul .mm_block_type_category span.h4 {
    display: none;
}

#header .ets_mm_megamenu_content .mm_menus_ul .mm_menus_li ul.mm_columns_ul ul.ets_mm_categories li.has-sub {
    width: 100%;
}

#header .ets_mm_megamenu_content .mm_menus_ul .mm_menus_li ul.mm_columns_ul ul.ets_mm_categories ul.ets_mm_categories {
    background: #16162a;
    left: 100%;
    position: absolute;
    top: 0;
    border: none;
    box-shadow: none;
    margin-left: 14px;
    width: 100%;
}

#header .ets_mm_megamenu_content .mm_menus_ul .mm_menus_li ul.mm_columns_ul .ets_mm_block_content li {
    float: none;
}

#header .ets_mm_megamenu_content .mm_menus_ul .mm_menus_li ul.mm_columns_ul .ets_mm_block_content li a {
    width: 100%;
    display: block;
    white-space: break-spaces;
}

#header .ets_mm_megamenu_content .mm_menus_ul .mm_menus_li ul.mm_columns_ul .ets_mm_block_content li a:after {
    right: 0;
    position: absolute;
}

/* !!! cart-and-myaccount-styles !!! */
#blockcart-wrap #blockcart {
    width: 90%;
}

#blockcart-dropdown {
    top: 155%;
    left: -125px;
    z-index: 9;
    width: 320px !important;
    max-width: unset;
}

.loggedInUser-wrap {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.loggedInUser-wrap>* {
    color: #797e8b;
    font-size: 14px;
    line-height: 1.3;
}

div#loggedInUser {
    text-align: center;
    font-size: 14px;
    line-height: 1;
    color: #ffffff;
    display: block;
    margin: 0px 0px 10px;
}

div#loggedInUser:before {
    content: "";
    background: url("../../img/icon/wave.png") no-repeat;
    background-size: contain;
    width: 20px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 15px;
}

.loggedInUser-wrap>a {
    border-top: 1px solid #272745;
    padding: 12px 20px;
}

.loggedInUser-wrap>a.account:before {
    content: "";
    background: url("../../img/icon/XMLID_273_.png") no-repeat;
    background-size: contain;
    width: 20px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
}

.loggedInUser-wrap>a span {
    display: inline-block;
    margin-left: 10px;
}

.loggedInUser-wrap>a.account-games:before {
    content: "";
    background: url("../../img/icon/XMLID_2599_.png") no-repeat;
    background-size: contain;
    width: 20px;
    height: 17px;
    display: inline-block;
    vertical-align: middle;
}

#blockcart-header {
    display: block;
    position: relative;
}

p#header_user_info,
#epicAccontDetail {
    display: inline-flex;
    justify-content: center;
    width: 100%;
    gap: 8px;
}

#epicAccontDetail a {
    color: #fff;
    border: 0.703928px solid #38f2d3;
    box-sizing: border-box;
    border-radius: 5px;
    display: inline-flex;
    padding: 14px 39px;
    font-weight: 400;
    font-size: 9.85499px;
    line-height: 8px;
    width: 82%;
    justify-content: center;
    margin: 0em auto 30px;
}

div#header_user #header_user_info a.login {
    margin: 0em;
}

/* !!! cart and myaccount end !!!*/

/* menu items */
/* menu end */
div#searchBox {
    width: 100%;
    max-width: 100%;
    background-color: #16162a;
}

/* !!! header end !!! */

/* !!! breadcrumbs start breadcrumbs-styles !!! */
ol.breadcrumb {
    background: transparent;
    margin-bottom: 10px;
}

ol.breadcrumb li a {
    color: white;
    font-size: 12px;
}

ol.breadcrumb>li+li:before {
    content: "/";
    padding: 0;
}

/* !!! breadcrumbs end !!! */

/* !!! main-content start main-content-styles !!! */
#columns {
    width: 100% !important;
    padding: 3.5em 0px 50px 20px;
}

#columns>.row {
    margin: 0;
}

main#center_column {
    padding: 0;
}

/* !!! main-content end !!! */

/* Product List product-list-style */
ul.product_list.grid.list-grid li .product-container {
    background-color: transparent;
    margin-bottom: 0px;
}

ul.product_list.grid.list-grid li .product-container .product-image-container {
    margin-bottom: 10px;
    position: relative;
}

.product_list.grid .button-container {
    visibility: hidden;
    opacity: 0;
    -webkit-transition: visibility 0s .3s, opacity .3s linear;
    transition: visibility 0s .3s, opacity .3s linear;
}

.product_list.grid .product-container .product-image-container:hover .button-container {
    visibility: visible;
    opacity: 1;
    -webkit-transition: opacity .5s linear;
    transition: opacity .5s linear;
}

ul.product_list.grid.list-grid li .product-container .product-image-container .button-container {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(0deg,
            rgba(22, 22, 42, 0.8),
            rgba(22, 22, 42, 0.8));
    z-index: 2;
}

ul.product_list.grid.list-grid li .product-container .product-image-container .button-container a {
    display: flex;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
    background: transparent;
    border: none;
}

ul.product_list.grid.list-grid li .product-container .product-image-container .button-container a span,
ul.product_list.grid.list-grid li .product-container .product-image-container .button-container span {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid #38f2d3;
    border-radius: 5px;
    min-height: 88px;
    min-width: 93px;
}

ul.product_list.grid.list-grid li .product-container .product-image-container .button-container a span img {
    height: 35px;
    width: 35px;
    justify-content: center;
    display: flex;
    margin: 10px 0;
}

ul.product_list.grid.list-grid li .product-container .product-image-container a.product_img_link img {
    border-radius: 10px;
    min-height: 200px;
    max-height: 353px;
    max-width: 616px !important;
    width: 100%;
    height: auto;
}

ul.product_list.grid.list-grid li .product-container .product-image-container .product-label-container {
    right: 0;
    left: unset;
    padding: 10px 10px 0 0;
    width: 100%;
    display: flex;
    /*justify-content: flex-end;*/
    z-index: 1;
}

ul.product_list.grid.list-grid li .product-container .product-image-container .product-label-container .product-label {
    margin: 0;
    min-width: 85px;
    height: 33px;
    border-radius: 150px;
    display: flex;
    align-items: center;
    text-transform: none;
    justify-content: center;
    font-size: 10px;
    font-weight: 500;
    font-size: 10px;
    line-height: 12px;
}

ul.product_list.grid.list-grid li .product-container .product-image-container .product-label-container .product-label.product-label-preorder {
    background: #6851f3;
    position: absolute;
    right: 0;
}

ul.product_list.grid.list-grid li .product-container .product-image-container .product-label-container .product-label.product-label-new {
    background: #ffcc18
        /*#DE2372*/
    ;
    margin-left: 10px;
}

ul.product_list.grid.list-grid li .product-container .product-image-container .product-label-container .price-percent-reduction {
    margin: 0;
    height: 33px;
    min-width: 85px;
    background: #de2372;
    /*#FFCC18;*/
    color: white;
    border-radius: 150px;
    display: flex;
    align-items: center;
    text-transform: none;
    justify-content: center;
    margin-left: 15px;
    font-weight: 500;
    font-size: 10px;
    line-height: 12px;
}

ul.product_list.grid.list-grid li .product-container .product-actions-container {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

ul.product_list.grid.list-grid li .product-container .product-actions-container .product-name {
    color: white;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
}

ul.product_list.grid.list-grid li .product-container .product-actions-container .product-information {
    display: flex;
    justify-content: space-between;
}

ul.product_list.grid.list-grid li .product-container .product-actions-container .product-information .content_price {
    color: white;
    font-size: 14px;
    font-weight: 600;
}

ul.product_list.grid.list-grid li .product-container .product-actions-container .product-information .product-name {
    font-size: 12px;
    font-weight: 600;
}

.product-container:hover .product-name {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    height: 15p;
}

ul.product_list.grid.list-grid li .product-container .product-actions-container .product-price-button-wrapper {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0;
}

ul.product_list.grid.list-grid li .product-container .product-actions-container .product-price-button-wrapper .countdown-wrap {
    margin: 0;
    height: 33px;
    min-width: 85px;
    max-width: 30%;
    background: #6851f3;
    color: white;
    border-radius: 150px;
    display: flex;
    align-items: center;
    text-transform: none;
    justify-content: center;
    font-weight: bolder;
    font-size: 10px;
    float: right;
}

ul.product_list.grid.list-grid li .product-container .product-actions-container .product-price-button-wrapper .countdown-wrap .countdown {
    font-weight: 400;
    font-size: 10px;
    line-height: 12px;
    color: #ffffff;
}

ul.product_list.grid.list-grid li .product-container .product-actions-container .product-price-button-wrapper .feature_float {
    color: #797e8b;
}

ul.product_list.grid.list-grid li .product-container .product-actions-container .product-price-button-wrapper .feature_float .feature_border {
    border: 1px solid #797e8b;
    margin: 0 13px;
}

ul.product_list.grid.list-grid li .product-container .product-actions-container .product-price-button-wrapper .content_price {
    font-size: 14px;
    font-weight: 600;
}

ul.product_list.grid.list-grid li .product-container .product-actions-container .product-price-button-wrapper .content_price .old-price {
    color: #797e8b;
    font-size: 12px;
}

@media only screen and (max-width: 1280px) {
    .iqitcontent-column-inner ul.product_list.grid.list-grid li .product-container .product-actions-container .product-price-button-wrapper .content_price .old-price {
        display: none;
    }

    ul.product_list.grid.list-grid li .product-container .product-actions-container .product-price-button-wrapper .content_price {
        font-size: 16px;
    }
}

/* all myaccounts pages */
div#myaccount-header {
    margin-bottom: 10px;
}

div#myaccount-header ul {
    display: flex;
    gap: 10px;
}

div#myaccount-header ul li {
    width: 140px;
    border-radius: 6.04843px;
    background: #16162a;
}

div#myaccount-header ul li.current {
    border: 1px solid #38f2d3;
}

div#myaccount-header ul li a {
    color: #fff;
    display: block;
    padding: 15px 0px;
    font-size: 12px;
    width: 100%;
    text-align: center;
}

/* all myaccounts pages end */

/*
* code: media-style
* MEDIA STYLES!!!!
* Please only put media and responsive styles under this line
* For readability purposes
*/
/* !! global styles responsive !! */
@media screen and (max-width: 1600px) {
    body {
        max-width: 100%;
    }
}

/*!! header styles responsive!!*/
@media screen and (max-width: 1000px) {
    #header div#header-blocks {
        padding: 0;
        /*height: 100%;*/
    }
}

@media screen and (max-width: 1280px) {
    div#content-wrap {
        grid-template-columns: 75px calc(100% - 75px);
    }

    header#header.active {
        max-width: 350px;
        width: 100%;
    }

    header#header.active div#header-blocks {
        position: absolute;
        width: 350px;
        max-width: unset;
        background: #16162a;
        height: 100%;
        box-shadow: 0px 0px 4px 6px #16162a;
        top: 48px;
        overflow-y: scroll;
    }

    #header-toggle {
        display: block;
        text-align: center;
        padding: 15px 0 10px;
    }

    header#header.active div#header-toggle {
        text-align: left;
        padding: 15px 30px 10px;
        position: absolute;
        width: 350px;
        max-width: unset;
        background: #16162a;
        box-shadow: 0px 0px 4px 6px #16162a;
    }

    #header-toggle img {
        transition: 0.2s;
    }

    header#header.active #header-toggle img {
        transform: rotateY(180deg);
    }

    div#shop-logo {
        float: none;
        max-width: 70px;
        padding: 0px 20px;
        margin: 0 auto 15px;
    }

    div#shop-logo img.desktop {
        display: none !important;
    }

    header#header.active div#shop-logo img.mobile-header-active {
        display: block !important;
    }

    div#shop-logo img.mobile {
        display: block !important;
    }

    header#header.active div#shop-logo img.mobile {
        display: none !important;
    }
}

/*!! header styles responsive end!!*/

/*!! body styles responsive!!*/
@media screen and (max-width: 1300px) {}

@media screen and (max-width: 1000px) {
    div#myaccount-header ul {
        display: grid;
        grid-template-columns: repeat(4, auto);
        gap: 10px;
    }

    div#myaccount-header ul li {
        width: 100%;
    }

    div#myaccount-header ul li a {
        font-size: 8px;
    }
}

@media screen and (max-width: 640px) {
    div#myaccount-header ul {
        display: grid;
        grid-template-columns: repeat(3, auto);
        gap: 10px;
    }
}

@media screen and (max-width: 575.98px) {}

#header .ets_mm_megamenu_content .mm_menus_ul .mm_menus_li.mobile {
    display: none;
}

#header .ets_mm_megamenu_content .mm_menus_ul .mm_menus_li.mobile.menu-account a:before {
    content: "";
    background: url("../../img/icon/XMLID_273_.png") no-repeat;
    background-size: contain;
    width: 20px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
}

#header .ets_mm_megamenu_content .mm_menus_ul .mm_menus_li.mobile.menu-keys a:before {
    content: "";
    background: url("../../img/icon/XMLID_2599_.png") no-repeat;
    background-size: contain;
    width: 20px;
    height: 17px;
    display: inline-block;
    vertical-align: middle;
}

@media screen and (max-width: 767.98px) {

    #layer_cart .layer_cart_cart,
    #layer_cart .layer_cart_product {
        padding: 15px;
    }

    #layer_cart .layer_cart_cart .layer_button_container {
        flex-direction: column-reverse;
    }

    #layer_cart .layer_cart_cart .layer_button_container a {
        width: 100%;
        margin-top: 10px;
    }

    #layer_cart .layer_cart_cart .layer_button_container>div {
        width: 100%;
        justify-content: space-between;
        display: flex;
    }

    #layer_cart .layer_cart_product .layer_cart_product_info #layer_cart_product_title {
        width: 100%;
        margin-bottom: 10px;
    }

    #layer_cart .layer_cart_product span.cart-title {
        font-size: 20px;
        width: 100%;
    }

    #layer_cart .layer_cart_product>.row {
        flex-direction: column;
        margin: 0;
    }

    #layer_cart .layer_cart_product>.row>.col-xs-10 {
        margin-top: 20px;
        width: 100% !important;
    }

    .blockcartpopup_container #layer_cart {
        width: 80% !important;
        transform: none;
        max-height: calc(100vh - 130px);
        overflow-x: hidden;
        overflow-y: scroll;
        width: calc(100% - 75px) !important;
        top: 100px !important;
    }

    #layer_cart .layer_cart_product button.close.cross {
        color: #38f2d3;
        opacity: 1;
    }

    .product_list.grid .button-container {
        opacity: 0 !important;
        visibility: hidden !important;
    }

    #header .ets_mm_megamenu_content .mm_menus_ul .mm_menus_li.mobile {
        display: block;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {}

@media (min-width: 768px) and (max-width: 991.98px) {}

@media (min-width: 992px) and (max-width: 1199.98px) {}

@media (min-width: 1200px) {}

/*!! body styles responsive end!!*/

.crossseling .grelated_products .bx-viewport,
.crossseling .grelated_products .bx-viewport * {
    max-width: unset;
}

.crossseling .grelated_products .page-product-heading {
    display: none;
}

.crossseling .grelated_products .bx-viewport {
    max-height: unset;
}

.crossseling .grelated_products .bx-viewport .product_grid.products>div {
    padding: 5px;
}

.crossseling .grelated_products .bx-viewport .product_grid.products>div * {
    max-width: 100%;
}

.crossseling .grelated_products .product_grid>div {
    margin-bottom: 30px;
    max-height: 250px;
}

.crossseling .grelated_products h3.product-name a {
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    line-height: 12px;
}

.crossseling .grelated_products .product_grid>div .product-sides {
    display: grid;
    grid-template-columns: 70% 30%;
    align-items: start;
    margin: 10px 0 0;
}

.crossseling .grelated_products h3.product-name {
    margin: 3px 0 0;
    line-height: unset;
    text-transform: none;
}

.crossseling .grelated_products .product_grid>div .product-sides .left-side {
    text-align: left;
}

.crossseling .grelated_products .product_grid>div .product-sides .right-side {
    text-align: right;
    height: 100%;
}

.crossseling .grelated_products .product_grid>div .product-sides .feature_float span.feature_name {
    font-weight: 400;
    font-size: 12px;
    line-height: 12px;
    color: #797e8b;
}

.crossseling .grelated_products .product_grid>div .product-sides .feature_float span.feature_border {
    border-right: 1px solid #797e8b;
    margin: 0px 5px 0 0;
}

.crossseling .grelated_products .product_grid>div .product-sides .right-side .content_price span.price {
    font-weight: 600;
    font-size: 14px;
    line-height: 12px;
    color: #ffffff;
}

.crossseling .grelated_products .related_slider {
    max-width: unset;
}

.crossseling .grelated_products .bx-viewport {
    max-height: unset !important;
    height: auto !important;
}

.crossseling .grelated_products .bx-viewport .product_grid.products>div span.price-percent-reduction {
    display: none;
}

.crossseling .grelated_products .bx-viewport .product_grid.products span.old-price.product-price {
    margin-top: 19px;
    display: block;
    font-weight: 400;
    font-size: 12px;
    line-height: 12px;
    color: #797e8b;
}

.crossseling .grelated_products .bx-viewport .product_grid.products>div h3.product-name {
    height: 19px;
    overflow: hidden;
}

/* mobile menu */

@media screen and (max-width: 1000px) {
    #header .ets_mm_megamenu_content .mm_menus_ul .mm_menus_li ul.mm_columns_ul {
        position: static;
        top: 0;
        float: left;
        opacity: 1;
        visibility: visible;
        height: 0px;
        overflow: hidden;
        padding: 0px;
        margin: 0;
        transition: 0.2s;
    }

    #header .ets_mm_megamenu_content .mm_menus_ul .mm_menus_li ul.mm_columns_ul.active {
        height: auto;
        transition: 0.2s;
    }

    #header .ets_mm_megamenu_content .mm_menus_ul .mm_menus_li ul.mm_columns_ul.active>li a {
        font-size: 13px;
        color: #fff;
        text-align: left;
    }

    #header .ets_mm_megamenu_content .mm_menus_ul .mm_menus_li ul.mm_columns_ul ul.ets_mm_categories ul.ets_mm_categories {
        position: static;
    }
}

.product-container img,
#image-block img {
    /*background: #090909;*/
    width: 100%;
}

#module-advancedcms-adcms .show_all_container {
    text-align: center;
    padding-top: 2em;
}

.crossseling .ets_solo_social_wrapper {
    display: none;
}

.crossseling .grelated_products .bx-wrapper {
    max-width: unset !important;
}

.crossseling .grelated_products .slick-track {
    max-width: unset;
}

.slick-prev:before,
.slick-next:before {
    color: #38f2d3;
    opacity: 1;
    font-size: 24px;
    font-weight: 600;
}

.slick-prev,
.slick-next {
    display: none !important;
}

#columns .grelated_products .slick-track {
    max-width: unset;
}

.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
    height: auto%;
    max-height: 520px;
}

.crossseling .grelated_products .product_grid.products .item.slick-slide {
    float: left !important;
    display: block;
    padding: 0 15px;
    width: 307px !important;
    margin: 0px -5px;
}

.crossseling .grelated_products .product_grid.products .item.slick-slide * {
    max-width: 100% !important;
}

.crossseling .grelated_products .product_grid.products .item.slick-slide a.lnk_img.product-image {
    display: block;
}

div#select-languages_top {
    position: relative;
    z-index: 999;
    background: linear-gradient(17.03deg,
            #5c5c77 -184.03%,
            rgba(92, 92, 119, 0) 131.31%);
    border-radius: 10px;
}

div#select-languages_top .form-group {
    margin: 0;
}

.fancybox-outer .select-languages_top #setLangContinue .form-group .dropdown button {
    border: 1px solid #38F2D3 !important;
}

.select-languages_top .dropdown-toggle {
    background: transparent !important;
    color: #fff;
    border: none !important;
    font-weight: 400;
    font-size: 14px;
    line-height: 12px;
    padding: 13px 15px;
}

span#currentCountry_separator {
    display: inline-block;
    height: 24px;
    width: 1px;
    background: #4b4b60;
    margin: 0px 11px;
}

#select-languages_top.select-languages_top .dropdown-toggle img {
    margin-right: 10px !important;
}

span#currentLanguage {
    text-transform: uppercase;
}

span#currentLanguage:after {
    content: "\f107";
    font: normal normal normal 14px/1 FontAwesome;
    color: #38f2d3;
    font-size: 14px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    line-height: 1px;
}

body .ui-autocomplete-input.ui-autocomplete-loading {
    background-image: url(https://www.joybuggy.com/themes/niara/css/app/../../img/loading.gif) !important;
    background-size: 25px !important;
}

body .ui-menu.ui-jolisearch {
    transform: none;
    background: #090909;
    border: none !important;
    box-shadow: 0px 5px 10px -1px #e9e9e985;
    border-bottom: 4px solid #38f2d3 !important;
}

body section.jolisearch-content *,
.jolisearch-body aside * {
    background-color: transparent !important;
    color: #fff !important;
}

.cart-info .product-name {
    display: grid;
    grid-template-columns: 40% 50% 10%;
}

.cart-info .product-name a.cart_block_product_name {
    padding: 0 10px 0;
}

.crossseling .grelated_products .related_slider .content_price,
.crossseling .grelated_products .content_price {
    display: grid;
    height: 100%;
    align-items: center;
}

.crossseling .grelated_products .related_slider .content_price span.old-price.product-price,
.crossseling .grelated_products .content_price span.old-price.product-price {
    align-self: end;
    font-size: 12px;
}

.crossseling .grelated_products .related_slider .content_price span.old-price.product-price,
.crossseling .grelated_products .content_price span.old-price.product-price {
    align-self: end;
    font-size: 12px;
    color: #797e8b;
}

.crossseling .grelated_products .related_slider img,
.crossseling .grelated_products img {
    min-height: 183px;
    border-radius: 10px;
}

.crossseling .grelated_products .content_price span.price-percent-reduction {
    display: none;
}

.show_code_container,
.show_code_container * {
    color: #fff;
    text-align: center;
}

.cart_block_container {
    overflow-y: scroll;
    max-height: 400px;
}

.cart-info .product-name {
    display: grid;
    grid-template-columns: 40% 50% 10%;
}

div#preorder-notice {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9991;
    background: #00000030;
    display: grid;
    justify-content: center;
    align-items: center;
    width: 100%;
}

div#preorder-notice>div {
    background: #000;
    padding: 30px;
    border-radius: 7px;
    box-shadow: 0 4px 20px rgb(56 242 211 / 58%);
    font-size: 16px;
    text-align: center;
    color: #fff;
}

div#preorder-notice>div a {
    display: inline-block;
    padding: 5px 15px;
    font-size: 18px;
    margin: 15px 10px 0;
    color: #fff;
}

ul.product_list.grid.list-grid li .product-container .product-image-container .button-container span.ajax_add_to_cart_button,
ul.product_list.grid.list-grid li .product-container .product-image-container .button-container span.ajax_add_to_cart_button_epic {
    cursor: pointer;
    position: absolute;
    display: flex;
    flex-direction: column;
    color: #fff;
}

ul.product_list.grid.list-grid li .product-container .product-image-container .button-container span.ajax_add_to_cart_button img,
ul.product_list.grid.list-grid li .product-container .product-image-container .button-container span.ajax_add_to_cart_button_epic img {
    background: transparent;
    height: 35px;
    width: 35px;
    justify-content: center;
    display: flex;
    margin: 10px 0;
}

ul.product_list.grid.list-grid li .product-container:hover .product-actions-container {
    position: relative;
    z-index: 9;
}

/*
 * ===================================================================
 * USP Section Styling (Desktop First)
 * ===================================================================
 */

/* Hovedcontainer for hele sektionen */
#ups_section ul {
    background: #16162A;
    border-radius: 10px;
    display: flex; /* Sørger for at det er et flex-grid */
    padding: 0;
    margin: 20px 0;
    list-style: none;
}

/* Hvert enkelt listeelement (USP) */
#ups_section li {
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.4; /* Brug en relativ enhed for bedre skalerbarhed */
    
    /* Flexbox til at justere indholdet (ikon og tekst) */
    display: flex;
    align-items: center;
    gap: 15px; /* Mellemrum mellem ikon og tekst */
    
    /* Layout for hver kolonne */
    flex: 1; /* Hver kolonne tager lige meget plads */
    padding: 25px 20px; /* Justeret padding for lidt mere luft */
    
    /* Kolonne-adskiller til desktop */
    border-right: 1px solid #2B2B49;
}

/* Fjern border på det sidste element */
#ups_section li:last-child {
    border-right: none;
}

/* Specifik justering for Trustpilot-elementet, så det er centreret */
#ups_section li.trustpilot-ups {
    justify-content: center;
    text-align: center; /* Centrerer også small-teksten */
}

/* Ikon-containeren (det første span-element) */
#ups_section li > span:first-of-type {
    background: #2E2E45;
    border-radius: 9px;
    
    /* Gør containeren til en flexbox for perfekt centrering af ikonet */
    display: grid;
    align-items: center;
    justify-content: center;
    align-content: center;
    justify-items: center;
    grid-template-columns: max-content;
    
    /* Fast størrelse for et ensartet look */
    width: 52px;
    height: 52px;
    flex-shrink: 0; /* Forhindrer ikonet i at skrumpe */
}

/* Selve billedet inde i ikonet, hvis det er nødvendigt */
#ups_section li > span:first-of-type img {
    max-width: 70%;
    height: auto;
}


/* Den lille undertekst */
#ups_section li small {
    font-weight: 400; /* Lidt lettere end 'normal' */
    font-size: 13px;
    color: #a0aec0; /* En lidt lysere grå for bedre kontrast */
    line-height: 1.2;
    display: block; /* Sørger for den er på sin egen linje */
}