@layer theme {
    @font-face {
        font-family: 'Asty-Cf-Regular';
        src: url('../fonts/asty-cf/AstyCFStd-Book.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family: 'Asty-Cf-Medium';
        src: url('../fonts/asty-cf/AstyCFStd-Medium.otf') format('opentype');
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family: 'Asty-Cf-Bold';
        src: url('../fonts/asty-cf/AstyCFStd-Bold.otf') format('opentype');
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family: 'Tektur-Regular';
        src: url('../fonts/tektur/Tektur-Regular.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family: 'Tektur-Bold';
        src: url('../fonts/tektur/Tektur-Bold.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }
  
    :root {
        --color-primary: #0e0e0e;
        --color-secondary: #ffffff;
        --color-secondary-hover: #ffffff;
        --color-text: #111111;
        --color-success: #388e3c;
        --color-danger: #ff6161;
        --color-border: #e7e7e7;
        --color-light-gray: #fafafa;
        --font-size-page-title: 37px;
        --font-size-module-title: 37px;
        --font-size-text: 16px;
        --font-size-text-small: 15px;
        --font-size-dropdown: 14px;
        --font-size-tab: 22px;
        --border-radius-default: 0px;
        --border-radius-button: 0px;
        --gap-row: 120px;
        --gap-page-title: 60px;
        --gap-module-title: 60px;
        --gap-item-spacing: 20px;
        --gap-row-padding: 80px;
        --breakpoint-content-width: 1300px;
  
        --font-asty-cf-regular: 'Asty-Cf-Regular', sans-serif;
        --font-asty-cf-bold: 'Asty-Cf-Bold', sans-serif;
        --font-asty-cf-medium: 'Asty-Cf-Medium', sans-serif;
        --font-tektur-regular: 'Tektur-Regular', 'Asty-Cf-Regular';
        --font-tektur-bold: 'Tektur-Bold', 'Asty-Cf-Medium';
    }
  
    body,
    .option-value {
        font-family: var(--font-asty-cf-regular);
    }

    .top-bar .menu-item .links-text,
    .td-name .option-name {
        font-family: var(--font-asty-cf-medium);
    }

    .grid-row .c--top-slider {
        font-family: var(--font-tektur-regular);
    }

    .c--has-title .title,
    .c--banner-grid span,
    .c--custom-title,
    .page-title-text,
    .page-title {
        font-family: var(--font-tektur-bold);
    }

    /* SOF General */

    .btn {
        transform: skewX(-10deg) !important;
    }

    .stepper {
        border-bottom: 2px solid var(--color-text);
    }

    .c--normal-btn .btn {
        transform: none !important;
    }

    .popup-wrapper .popup-close {
        margin: 0;
    }

    html.mobile:not(.route-common-home) header #logo img {
        filter: invert(1);
    }

    /* EOF General */

    /* SOF Header */

    .c--main-menu .main-menu-item a::before {
        border-bottom: 2px solid var(--color-border);
        bottom: 30px;
        content: "";
        display: block;
        left: 0;
        position: absolute;
        right: 100%;
        transition: right .3s ease;
        z-index: 6;
        font-size: 0;
    }

    .header-sticky .c--main-menu .main-menu-item a::before {
        border-bottom-color: var(--color-text);
    }

    .c--main-menu .main-menu-item a:hover::before {
        left: 5px;
        right: 5px;
        font-size: 15px;
    }

    header .header-cart-group {
        margin: 0;
    }

    .mobile-header .mobile-bar-group .menu-trigger,
    .mobile-header .mobile-cart-wrapper #cart .dropdown-toggle.cart-heading {
        visibility: hidden;
    }

    .dropdown-menu .j-menu {
        background-color: #fff;

        & .language-select {
            justify-content: center;
            padding: 10px;
        }
    }

    #main-menu .menu-item .dropdown-menu .j-menu {
        background-color: #fff;
    }
    
    #main-menu .menu-item .dropdown-menu .j-menu li a::before {
        display: none;
    }

    /* EOF Header */

    /* SOF Homepage */

    .c--squad-gallery .gallery-image img {
        height: 400px;
        object-fit: cover;
        display: block;
        margin: 0;
    }

    .c--category-grid {
        & .name a::before {
            border-bottom: 2px solid var(--color-border);
            bottom: 0;
            content: "";
            display: block;
            left: 0;
            position: absolute;
            right: 100%;
            transition: right .3s ease;
            z-index: 6;
            font-size: 0;
        }

        & .name a:hover::before {
            left: 5px;
            right: 5px;
            font-size: 15px;
        }

        & .caption {
            position: absolute;
            bottom: 45%;
        }
    }

    .mobile .c--video-container .overlay-content :is(h2, h4) {
        background-color: transparent !important;
        color: #fff;
        text-transform: uppercase
    }

    /* EOF Homepage */

    /* SOF Cart Off Canvas */

    .mobile-cart-content-container {
        & .td-name .option-value::before {
            display: none;
        }

        & .td-remove {
            display: none;
        }
        
        & .stepper-total {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        & .cart-totals {
            & tr:last-child {
                display: none;
            }

            & tr:not(:last-child) {
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

            & .cart-message {
                font-size: var(--font-size-text-small);
                padding: 10px 40px;
                background-color: #fff;
                text-align: center;
            }
        }
    }
    
    /* EOF Cart Off Canvas */

    /* SOF Cart Page */

    #checkout-cart {
        max-width: 1000px;
    }

    .cart-page {
        & table thead td:not(:is(.td-qty, .td-total)) {
            color: transparent;
        }

        & .btn-update {
            display: none;
        }

        & .cart-total {
            & tr:last-child {
                display: none;
            }

            & tr:not(:last-child) {
                display: flex;
                align-items: center;
                justify-content: center;
                font-family: var(--font-tektur-bold);
            }

            & .cart-message {
                font-size: var(--font-size-text-small);
                padding: 10px 40px;
                background-color: #fff;
                text-align: center;
            }
        }

        & .cart-bottom {
            display: flex;
            flex-direction: column;
            align-items: center;

            & .buttons {
                max-width: 460px;
            }
        }
    }

    /* EOF Cart Page */

    /* SOF Checkout Page */

    .quick-checkout-wrapper {
        & .cart-section {
            & table {
                & thead {
                    display: none;
                }

                & tbody td:is(.td-qty, .td-price) {
                    display: none;
                }

                & .td-image {
                    width: 80px;

                    & img {
                        border-radius: 10px;
                        border: 1px solid var(--color-border);
                    }

                    & a {
                        position: relative;
                    }

                    & .product-qty {
                        position: absolute;
                        right: -5px;
                        top: -20px;
                        font-size: 15px;
                        width: 20px;
                        height: 20px;
                        border-radius: 100px;
                        background-color: rgb(0, 0, 0, 0.5);
                        color: #fff;
                    }
                }

                & .td-product {
                    font-size: var(--font-size-text-small);
                }

                & tfoot strong {
                    font-size: var(--font-size-text-small);
                    text-transform: capitalize;
                }
            }
        }

        & .form-grid:has(.form-group) {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;

            & .form-group {
                margin: 0 !important;
            }
        }

        & .shipping-payment .radio {
            margin-top: 14px !important;
        }

        & .left {
            border-right: 1px solid var(--color-border);
            padding-right: 40px;
        }

        & .confirm-section {
            order: 4;
        }
    }

    /* EOF Checkout Page */

    /* SOF Bottom Menu */

    .c--bottom-bar {
        max-width: 90%;
        padding: 0 20px;

        & ul {
            transform: skewX(-10deg) !important;
        }

        & .c--bottom-menu {
            width: 70%;

            & a {
                flex-direction: row;
                gap: 10px;
            }

            & a::before {
                width: auto;
            }
        }
    }

    /* EOF Bottom Menu */

    @media only screen and (max-width: 768px) {
        .c--banner-grid .banners-wrapper {
            grid-template-columns: auto;
        }

        .quick-checkout-wrapper .left {
            border: none;
            padding: 0;
        }
    }
}