/* =========================================================
   ESHOP-SPA.EU - CUSTOM THEME
   PrestaShop Classic
   Brand colors:
   Purple: #4237a5
   Green:  #99cc00
   ========================================================= */


/* ---------------------------------------------------------
   1. FONT
   --------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');


/* ---------------------------------------------------------
   2. BRAND / GLOBAL VARIABLES
   --------------------------------------------------------- */

:root {
    --spa-primary: #615d84;
    --spa-primary-dark: #484565;
    --spa-primary-deep: #29283b;
    --spa-primary-light: #efedfb;

    --spa-accent: #99cc00;
    --spa-accent-dark: #769f00;
    --spa-accent-light: #f2f8df;

    --spa-dark: #272443;
    --spa-dark-soft: #3b3945;

    --spa-bg: #eff0ef;
    --spa-bg-soft: #fafafd;
    --spa-white: #ffffff;

    --spa-text: #2d2c35;
    --spa-text-light: #777681;
    --spa-text-muted: #97959e;

    --spa-border: rgba(66, 55, 165, 0.10);
    --spa-border-neutral: rgba(37, 36, 45, 0.10);

    --spa-shadow-sm: 0 3px 14px rgba(31, 27, 67, 0.06);
    --spa-shadow-md: 0 8px 28px rgba(31, 27, 67, 0.17);
    --spa-shadow-lg: 0 16px 45px rgba(31, 27, 67, 0.30);

    --spa-radius: 3px;
    --spa-radius-large: 7px;

    --header-height: 140px;
    --content-fade: clamp(50px, 7vw, 130px);
    --content-overlay-width: calc(1200px + 2 * var(--content-fade));
}


/* ---------------------------------------------------------
   3. GLOBAL TYPOGRAPHY
   --------------------------------------------------------- */

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 400;
    color: var(--spa-text);
    background: var(--spa-bg);
    padding-right: 0 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body,p,li,span,input,textarea,select,button {
    font-family: 'Montserrat', Arial, sans-serif;
}

p, .product-prices .tax-shipping-delivery-label {
    line-height: 1.85;
    color: var(--spa-text);
}

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
    font-family: 'Montserrat', Arial, sans-serif;
    color: var(--spa-dark) !important;
    font-weight: 400;
    letter-spacing: -0.025em;
    text-transform: none;
}

h1,.h1 {
    font-size: 32px;
    line-height: 1.2;
}

h2,.h2 {
    font-size: 25px;
    line-height: 1.25;
}

#content-wrapper :is(h1, h2):not(.product-title,.modal-title,.step-title)::before,
#left-column a.text-uppercase.h6::before{
    content: "";
    display: inline-block;
    width: 3px;
    height: 0.7em;
    margin-right: 0.50em;
    background: #9c0;
}

#left-column a.text-uppercase.h6::before{
    margin-right: 0.70em;
}

h3,.h3 {
    font-size: 19px;
    line-height: 1.3;
}

.h3.myaccount-title {
    color:#c8c7cf;
}

a {
    color: var(--spa-primary-dark);
    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        opacity 0.2s ease;
}

a:not(.btn-primary):hover,
a:focus,
#subcategories ul li a.subcategory-name:hover{
    color: var(--spa-primary-dark) !important;
    text-decoration: none;
}

*:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* ---------------------------------------------------------
   4. HEADER
   --------------------------------------------------------- */

#header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 4px 22px rgba(31, 27, 67, 0.09);
}

#header .header-nav {
    background: #262432;
    color: rgba(255,255,255,0.82);
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    font-size: 12px;
}

#header .header-nav a {
    color: rgba(255,255,255,0.86);
}

#header .header-nav a:hover {
    color: #ffffff;
}
#header .header-nav .dropdown-menu a {
    color: var(--spa-dark);
}

#header .header-nav .dropdown-menu a:hover {
    color: var(--spa-primary);
}

#header .dropdown .expand-more,
#header #currency-selector-label {
    color: rgba(255,255,255,0.82) !important;
}

#header .dropdown:hover .expand-more,
#header .dropdown .expand-more:hover,
#header .dropdown.show .expand-more {
    color: #ffffff !important;
}


#header .header-nav .blockcart {background: none;}
#header .header-nav .cart-preview.active {
    background: var(--spa-accent);
}
#header .header-nav .cart-preview .shopping-cart {color: rgba(255, 255, 255, 0.82);}

#header .header-top {
    background: rgba(255,255,255,0.98);
    padding-top: 14px;
    padding-bottom: 14px;
}

#header .material-icons,
#header i {
    transition: color 0.2s ease;
}

#header a:hover .material-icons,
#header a:hover i {
    color: white;
}
#_desktop_logo {
    min-width: 180px;
}

@media (min-width: 768px) {
    .col-md-2 a {
         min-width: 130px; 
    }
}

@media (max-width: 767px) {
    #header .header-top{
         padding-top: 0px;
    	 padding-bottom: 0px; 
    }
    #_mobile_logo .logo {
        content: url("/new/img/logo_white.png") !important;
    }
}


/* ---------------------------------------------------------
   5. PAGE BACKGROUND
   --------------------------------------------------------- */

html {
    background-color: var(--spa-bg);
}

body {
    min-height: 100vh;
    height: auto !important;
    background-color: var(--spa-bg);
    background-image: url("/new/img/bg.jpg");
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: center 100px;
    background-size: 100%;
    background-attachment: fixed;
}
#my-account{
    min-height: 100vh;

}

#wrapper {
    min-height: 100vh;
    padding-top: var(--header-height);
    background: transparent !important;
}



@media (max-width: 1672px) {
    body {
        background-size: 1672px 941px;
    }
}

@media (max-width: 767px) {
    body {
        background-position: center top;
    }
}

@media (max-width: 575px) {
    .col-xs-12 {
        padding-right: 0;
        padding-left: 0;
    }
}

#content-wrapper, #left-column {
    position: relative;
}

#content-wrapper::before, #left-column::before{
    content: "";
    position: absolute;
    top: -1000px;
    bottom: 0;
    left: 0;
    right: 0;
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    background: rgb(255 255 255 / 60%);
    border-left: 1px solid rgba(255, 255, 255, 0.55);
    border-right: 1px solid rgba(80, 100, 110, 0.18);
    pointer-events: none;
}
#left-column::before{
    border-right: 0px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.55);
}

#content-wrapper > :not(.modal) {
    position: relative;
}


/* Bootstrap modal */
#content-wrapper > .modal,
#product-modal {
    position: fixed;
}

.modal-backdrop {
    z-index: 1040;
}

.modal {
    z-index: 1050;
}


/* ---------------------------------------------------------
   6. MAIN MENU
   --------------------------------------------------------- */

#top-menu,
#top-menu a {
    font-family: 'Montserrat', Arial, sans-serif;
}

#top-menu > li > a {
    position: relative;
    color: var(--spa-dark) !important;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.035em;
    text-transform: uppercase;
    padding-left: 15px;
    padding-right: 15px;
}

#top-menu > li > a:hover,
#top-menu > li.current > a {
    color: var(--spa-primary);
}

#top-menu > li > a::after {
    content: "";
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 4px;
    height: 2px;
    background: var(--spa-accent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.22s ease;
}

#top-menu > li > a:hover::after,
#top-menu > li.current > a::after {
    transform: scaleX(1);
}


/* Dropdown */

#_desktop_top_menu .sub-menu {
    background: rgba(255,255,255,0.99);
    border: 0;
    border-top: 2px solid var(--spa-primary);
    border-radius: 0 0 var(--spa-radius-large) var(--spa-radius-large);
    padding: 24px 28px;
    box-shadow: var(--spa-shadow-lg);
}

#_desktop_top_menu .sub-menu a {
    color: var(--spa-dark-soft);
    font-size: 13px;
    font-weight: 500;

    line-height: 1.45;
}

#_desktop_top_menu .sub-menu a:hover {
    color: var(--spa-primary);
}

#_desktop_top_menu .top-menu[data-depth="2"] > li > .collapse {
    display: none !important;
}

#_desktop_top_menu a[data-depth="1"]{
    text-decoration: underline;
}


/* ---------------------------------------------------------
   7. BREADCRUMB
   --------------------------------------------------------- */

#wrapper .breadcrumb {
    background: #ffffff00;
    padding: 0 0 18px 0;
    margin-bottom: 12px;
    font-size: 11px;
    color: var(--spa-text-light);
    position: relative;
    z-index: 2;
}

#wrapper .breadcrumb ol {
    width: fit-content;
    /* background: #ffffff; */
    border-radius: 7px;
    padding-left: 7px;
    font-size: 12px;
}

#wrapper .breadcrumb li a {
    color: var(--spa-text-light);
    font-weight: 400;
    color: #000000 !important;
}

#wrapper .breadcrumb a:hover {
    color: var(--spa-accent);
}

#wrapper .breadcrumb li:last-child {
    color: #414040;
}

/* ---------------------------------------------------------
   8. CONTENT CARDS
   --------------------------------------------------------- */

.card,
#search_filters,
#search_filters_suppliers,
#product .col-md-6:has(.product-information),
.tabs {
    background: rgb(255 255 255 / 78%);
    border: 1px solid rgba(66,55,165,0.06);
    border-radius: var(--spa-radius-large);
    box-shadow: var(--spa-shadow-sm);
}

#product .col-md-6:has(.product-information){
    padding: 25px 33px;
    margin-right: 30px;
    width: calc(50% - 30px);
}
#product .col-md-6 .tabs{
    background: none;
    border: none;
    box-shadow: none;
}

#left-column .block-categories,
#left-column #search_filters_brands{
    background: none;
}

@media (max-width: 767px) {
    .card{
         padding: 15px; 
    }
    #subcategories {
         margin-top: 25px;
    }
    #product .col-md-6:has(.product-information){
        padding: 30px;
        margin: 40px;
        width: calc(100% - 80px);
    }
    .col-md-6:has(.images-container){
        padding: 00px;
        margin: 40px;
        width: calc(100% - 80px);
    }
    #product #content {
        width: 100%;
    }
}

section#content, 
.card, .contact-rich, 
.pagination .page-list,
body#checkout section.checkout-step div.delivery-options{
         border-radius: 7px;
         background: linear-gradient(90deg,rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.6) 100%);
         overflow: hidden;
    }
body#checkout section.checkout-step,
body#my-account #content{
         background: none;
    }
.contact-rich {
         padding: 15px;
         position: relative;
    }
section#content:has(.checkout-step){
         background: none;
    }
section#content p, section#content-hook_payment_return p,
.products-selection .sort-by-row .sort-by,
.col-md-4,
.pagination .page-list a{
         color: #101421;
    }
section#content .row{
         margin: 0 !important;
    }
.block-categories, #search_filters_wrapper, #search_filters_brands{
         position: relative;
    }

/* ----- SPECIAL ----- */

#order-items table tr.total-value, .bootstrap-touchspin .btn-touchspin:hover, .definition-list dl dd, .definition-list dl dt {
    background-color: rgb(255 255 255) !important;
}
#order-items {
    border-right: none;
}
.contact-form {
    background: none;
}
#subcategories ul li .subcategory-image a {
    border: 1px solid #ffffff00;
}
#subcategories ul li:hover .subcategory-image a {
    border: 5px solid #99cc00;
}


/* ---------------------------------------------------------
   9. CATEGORY SIDEBAR
   --------------------------------------------------------- */

.block-categories {
    padding: 22px;
}

.block-categories .block-title,
#left-column a.text-uppercase.h6 {
    color: var(--spa-dark);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 14px;
    display: inline-block;
}

.block-categories .category-sub-menu li {
    border: 0;
}

#search_filters_brands .facet .facet-label a,
.block-categories .category-sub-menu li[data-depth="0"]>a{
    display: inline-block;
    margin-top: .5rem;
    padding-bottom: .1rem;
    font-size: .85rem;
    font-weight: 500 !important;
    color: var(--spa-dark);
}

#search_filters_brands .facet li.facet-label{
    margin: 0;
}

.block-categories .category-sub-menu li > a:hover,
#search_filters_brands .facet .facet-label a:hover{
    color: var(--spa-primary);
}

.block-categories .collapse-icons {
    color: var(--spa-dark);
    top: 2px;
    right: -25px;
}

.block-categories .category-sub-menu,
#search_filters_brands div{
    margin-top: 0.3rem;
    margin-left: 1rem;
}

.material-icons:not(.shopping-cart):hover{
    color: var(--spa-accent) !important;
}

/* ---------------------------------------------------------
   10. FILTERS
   --------------------------------------------------------- */

#search_filters {
    padding: 22px;
}

#search_filters .facet .facet-title {
    color: var(--spa-dark);
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    margin-bottom: 10px;
}

#search_filters .facet .facet-label a {
    color: var(--spa-text-light);
    font-size: 12px;
}

#search_filters .facet .facet-label a:hover {
    color: var(--spa-primary);
}


/* Filter checkbox accent */

.custom-checkbox input[type="checkbox"] + span {
    border-color: rgba(66,55,165,0.25);
}

.custom-checkbox input[type="checkbox"]:checked + span {
    background: #c0bde0;
    border-color: var(--spa-primary);
}


/* ---------------------------------------------------------
   11. PRODUCT LIST
   --------------------------------------------------------- */

.products {
    margin-top: 10px;
}

.product-miniature {
    margin-bottom: 28px;
}

.product-miniature .thumbnail-container {
    background: #ffffff;
    border: 1px solid rgb(182 194 194 / 64%);
    border-radius: var(--spa-radius-large);
    overflow: hidden;
    box-shadow: var(--spa-shadow-sm);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.product-miniature .thumbnail-container:hover {
    transform: translateY(-4px);
    border: 1px solid rgb(182 194 194 / 100%);
    box-shadow: var(--spa-shadow-lg);
}


/* Product image */

.product-miniature .product-thumbnail {
    background: #ffffff;
}

.product-miniature .product-thumbnail img {
    transition: transform 0.35s ease;
}

.product-miniature .thumbnail-container:hover .product-thumbnail img {
    transform: scale(1.025);
}


/* Product description */

.product-miniature .product-description {
    background: #ffffff;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 16px;
}

.product-miniature .product-title {
    margin-top: 12px;
}

.product-miniature .product-title a {
    color: var(--spa-dark);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    text-transform: none;
}

.product-miniature .product-title a:hover {
    color: var(--spa-primary);
}

/* Product price */

.product-price-and-shipping,
.product-price,
.product-prices .current-price {
    color: var(--spa-primary-deep);
    font-weight: 600;
}

div.product-price.h5{
    margin:0;
}

.product-price-and-shipping {
    font-size: 16px;
    margin-top: 8px;
}


/* Old price */

.regular-price {
    color: #9b99a2;
    font-weight: 400;
}


/* Quick view */

.product-miniature .quick-view {
    color: var(--spa-primary);
}

.product-miniature .quick-view:hover {
    color: var(--spa-primary-dark);
}

/* Featured */

.featured-products[data-type="popularproducts"] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 2rem;
}

.featured-products[data-type="popularproducts"]
.products-section-title {
    grid-column: 1;
    grid-row: 1;
    margin: 0 0 10px 30px;
    padding: 0 0 0 16px;
    position: relative;
    text-align: left;
    font-size: 1.35rem;
    font-weight: 500;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #272836;
}

.featured-products[data-type="popularproducts"]
.products-section-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 18px;
    transform: translateY(-50%);
    background: #9c0;
    border-radius: 2px;
}

.featured-products[data-type="popularproducts"]
.all-product-link {
    grid-column: 2;
    grid-row: 1;
    float: none !important;
    margin: 0 30px 10px 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: .15rem;
    font-size: .95rem;
    font-weight: 400;
    text-transform: none;
    color: #343541;
    text-decoration: none;
}

.featured-products[data-type="popularproducts"]
.all-product-link .material-icons {
    font-size: 20px;
    transition: transform .2s ease;
}

.featured-products[data-type="popularproducts"]
.all-product-link:hover .material-icons {
    transform: translateX(3px);
}

.featured-products[data-type="popularproducts"] .products {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 16px;
    padding-top: 20px;
    border-top: 1px solid rgba(39, 40, 54, 0.09);
}

.featured-products[data-type="popularproducts"]::after {
    display: none;
}

@media (max-width: 767px) {

    .featured-products[data-type="popularproducts"] {
        column-gap: 12px;
    }

    .featured-products[data-type="popularproducts"]
    .products-section-title {
        padding-left: 12px;
        font-size: 1.1rem;
    }

    .featured-products[data-type="popularproducts"]
    .products-section-title::before {
        height: 18px;
    }

    .featured-products[data-type="popularproducts"]
    .all-product-link {
        font-size: .8rem;
        white-space: nowrap;
    }

    .featured-products[data-type="popularproducts"]
    .products {
        margin-top: 20px;
    }
}

/* ---------------------------------------------------------
   12. PRODUCT FLAGS
   --------------------------------------------------------- */

.product-flags li.product-flag {
    background: var(--spa-primary);
    color: #ffffff;
    border-radius: 4px;
    box-shadow: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.product-flags li.product-flag.discount,
.product-flags li.product-flag.discount-amount,
.product-flags li.product-flag.discount-percentage {
    background: var(--spa-accent);
    color: #232323;
}


/* ---------------------------------------------------------
   13. PRODUCT DETAIL
   --------------------------------------------------------- */

.product-information {
    color: #000000;
}

.product-information p {
    line-height: 1.65;
}

.product-detail-name {
    color: var(--spa-dark);
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.product-prices .current-price {
    font-size: 25px;
    font-weight: 600;
    margin: 0;
}

.modal, .modal-open {
    overflow: auto !important;
}

.product-add-to-cart .qty .form-control {
    border-color: rgba(66,55,165,0.16);
}

.product-additional-info.js-product-additional-info{
    display: none;
}
.product-images>li.thumb-container .thumb.selected, .product-images>li.thumb-container .thumb:hover {
    border: var(--spa-accent-dark) 3px solid;
}

.radio-label {
    display: inline-block;
    padding: .125rem .625rem;
    font-weight: 600;
    background: white;
    border: none;
    box-shadow: 0 2px 6px rgba(20, 25, 40, 0.12);
}
.input-color:checked+span, .input-radio:checked+span {
    border: none;
    background: var(--spa-primary-deep);;
    color: white;
}
.input-color:hover+span, .input-radio:hover+span {
    border: none;
    background: var(--spa-primary-dark);;
    color: white;
}
div.images-container{
    padding: 20px;
}
div.product-cover{
    border-radius: 8px;
    overflow: hidden;
}

/* ---------------------------------------------------------
   14. PRODUCT TABS
   --------------------------------------------------------- */


.tabs {
    margin-top: 32px;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

#product .tabs .nav-tabs {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    border-bottom: 1px solid rgba(39, 40, 54, 0.12);
}

#product .tabs .nav-tabs .nav-link {
    position: relative;
    margin: 0;
    padding: 12px 18px 14px;
    border: 0 !important;
    background: transparent !important;
    color: rgba(39, 40, 54, 0.62);
    font-size: 15px;
    font-weight: 400;
    transition:
        color .2s ease,
        background-color .2s ease;
}

#product .tabs .nav-tabs .nav-link:hover {
    color: #29283b;
}

#product .tabs .nav-tabs .nav-link.active {
    color: #29283b;
    font-weight: 500;
}

#product .tabs .nav-tabs .nav-link.active::after {
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: -1px;
    height: 2px;
    background: #9c0;
}

#product .tabs .tab-content {
    padding: 20px 0 0;
}

#product .tabs .tab-pane dt,
#product .tabs .tab-pane dd{
    background: white;
}

/* ---------------------------------------------------------
   15. BUTTONS
   --------------------------------------------------------- */

.btn {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.025em;
    border-radius: 6px;
    box-shadow: none;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.btn-primary {
    background: var(--spa-primary-deep);
    color: #ffffff;
    padding: 11px 22px;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: var(--spa-primary-dark);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(66,55,165,0.25);
}

.btn-secondary {
    background: #ffffff;
    color: var(--spa-dark);
    border: 1px solid rgba(66,55,165,0.14);
}

.btn-secondary:hover {
    background: var(--spa-primary-light);
    border-color: rgba(66,55,165,0.20);
    color: var(--spa-primary);
}

.btn-success {
    background: var(--spa-accent);
    border-color: var(--spa-accent);
    color: #232323;
}

.btn-success:hover,
.btn-success:focus {
    background: var(--spa-accent-dark);
    border-color: var(--spa-accent-dark);
    color: #ffffff;
}


/* ---------------------------------------------------------
   16. FORMS
   --------------------------------------------------------- */

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
select,
textarea {
    font-family: 'Montserrat', sans-serif;

    color: var(--spa-dark);

    background: #ffffff;

    border: 1px solid rgba(66,55,165,0.14);

    border-radius: 6px;

    box-shadow: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--spa-primary);

    box-shadow:
        0 0 0 3px rgba(66,55,165,0.10);

    outline: none;
}


/* ---------------------------------------------------------
   17. PAGINATION
   --------------------------------------------------------- */

.pagination .page-list {
    box-shadow: none;
}

.pagination a {
    color: var(--spa-text-light);

    font-weight: 500;
}

.pagination .current a {
    color: var(--spa-primary);
    font-weight: 600;
}

.pagination a:hover {
    color: var(--spa-primary);
}


/* ---------------------------------------------------------
   18. CART
   --------------------------------------------------------- */

.cart-summary,
.card.cart-container {
    border: 1px solid rgba(66,55,165,0.06);

    border-radius: var(--spa-radius-large);

    box-shadow: var(--spa-shadow-sm);
}

.cart-summary-line .value {
    color: var(--spa-dark);

    font-weight: 600;
}

/* ---------------------------------------------------------
   19. SEARCH BAR
   --------------------------------------------------------- */

#search_widget form input {
    font-family: 'Montserrat', sans-serif;

    border-radius: 6px;

    border: 1px solid rgba(66,55,165,0.12);

    background: #f7f7fa;

    color: var(--spa-dark);
}

#search_widget form input:focus {
    background: #ffffff;

    border-color: var(--spa-primary);

    box-shadow: 0 0 0 3px rgba(66,55,165,0.08);
}

#search_widget form button {
    color: var(--spa-primary);
}


/* ---------------------------------------------------------
   20. FOOTER
   --------------------------------------------------------- */

#footer,body#checkout #footer {
    background: #161422e6;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(3px);
    border-top: 1px solid rgba(255, 255, 255, 0.55);
}

#footer .footer-container {
    background: transparent;
    box-shadow: none;
}

#footer h3,
#footer h4,
#footer .h3,
#footer .h4 {
    color: #ffffff;

    font-size: 14px;
    font-weight: 600;

    letter-spacing: 0.02em;
}

#footer a, #block-newsletter-label, .block-contact, #footer p {
    color: #c8c7cf;
    font-size: 12px;
}

#footer .block_newsletter #block-newsletter-label{
    color: #c8c7cf !important;
}


#footer a:hover {
    color: var(--spa-accent);
}

.block_newsletter { 
    background:none
}

#footer .h3, #footer .h4, #footer a {
    color:#c8c7cf !important;
}
#footer .text-sm-center  {
    font-size: 0;
}
#footer .text-sm-center a  {
    display: none;
}
#footer .text-sm-center::after {
    content: "@ 2026 - by ayatec";
    font-size: 12px;
    text-align: center !important;
    color: #c8c7cf;
    display: block;
}

/* ---------------------------------------------------------
   21. ALERTS / MESSAGES
   --------------------------------------------------------- */

.alert-success {
    background: var(--spa-accent-light);
    border-color: rgba(153,204,0,0.30);
    color: #4c6500;
}

article.alert {
    z-index: 10000;
    display: block;
    position: relative;
}
.alert-warning, .alert-info {
    background-color: rgba(153, 204, 0, 0.04);;
    border-color: var(--spa-accent-dark);
    color: var(--spa-accent-dark);
    margin-top: 15px;
    padding: 5px;
}
svg path {
    fill: var(--spa-accent-dark);
}
.alert-warning > div div div {
    margin: auto auto auto 0;
}
.alert-warning > div div {
    height: fit-content;
}
.alert-warning .material-icons {
    color: var(--spa-accent-dark);
}

/* ---------------------------------------------------------
   22. CLASSIC THEME CLEANUP
   --------------------------------------------------------- */

#wrapper .container {
    position: relative;
}

hr {
    border-color: var(--spa-border-neutral);
}

.separator {
    border-color: var(--spa-border-neutral);
}

.block,
.card,
.thumbnail-container {
    border-color: transparent;
}

button:focus,
a:focus {
    outline-color: rgba(66,55,165,0.35);
}

.forgotten-password .form-fields label.required {
    width: 230px;
}


/* ---------------------------------------------------------
   23. SCROLLBAR - CHROME / EDGE
   --------------------------------------------------------- */

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #eeeef3;
}

::-webkit-scrollbar-thumb {
    background: #aaa7bd;

    border-radius: 10px;

    border: 2px solid #eeeef3;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--spa-primary);
}


/* ---------------------------------------------------------
   24. MOBILE
   --------------------------------------------------------- */

@media (max-width: 767px) {
    #header {
        position: sticky;
        top: 0;
    }

    #wrapper {
        padding-top: 20px;

        background-attachment: scroll;
        background-size: auto 100vh;
    }

    h1,
    .h1 {
        font-size: 26px;
    }

    h2,
    .h2 {
        font-size: 21px;
    }

    .product-detail-name {
        font-size: 25px;
    }

    .product-miniature {
        margin-bottom: 18px;
    }

    .block-categories,
    #search_filters,
    .tabs {
        border-radius: 8px;
    }

}



/* ---------------------------------------------------------
   25. TABLET
   --------------------------------------------------------- */

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

    :root {
        --header-height: 130px;
    }

    #top-menu > li > a {
        padding-left: 10px;
        padding-right: 10px;

        font-size: 12px;
    }

}

/* ---------------------------------------------------------
   26. CASOUSEL
   --------------------------------------------------------- */



.carousel .carousel-item .caption {
    position: absolute;
    max-width: 700px;
    top: 100px;
    left: 30px;
    color: #fff;
}

.carousel .carousel-item .caption h2 {
    font-size: 2.5rem !important;
    font-weight: 400 !important;
    color: white !important;
}

.carousel .carousel-item .caption .caption-description p {
    margin-top: 20px;
    font-weight: 700;
    color: #fff !important;
}

.carousel .carousel-item .caption .caption-description ul {
    list-style-type: circle;
}

.carousel .carousel-item .caption .caption-description li {
    margin-left: 50px;
}


/* 992px - 1199px */
@media (min-width: 992px) and (max-width: 1199px) {
    .carousel .carousel-item .caption {
        max-width: 560px;
        top: 70px;
        left: 25px;
    }

    .carousel .carousel-item .caption h2 {
        font-size: 1.8rem !important;
    }

    .carousel .carousel-item .caption .caption-description {
        font-size: 0.85rem;
    }

    .carousel .carousel-item .caption .caption-description p {
        margin-top: 12px;
    }

    .carousel .carousel-item .caption .caption-description li {
        margin-left: 35px;
    }
}


/* 768px - 991px */
@media (max-width: 991px) {
    #search_widget {display: none;}
    .carousel .carousel-item .caption {
        margin-top: 0;
        top: 50px;
        text-align: left !important;
        color: #fff;
    }

    .carousel .carousel-item .caption h2 {
        font-size: 1.4rem !important;
    }

    .carousel .carousel-item .caption .caption-description p {
        margin: 4px 0 !important;
        font-size: 12px !important;
    }

    .carousel .carousel-item .caption .caption-description ul {
        padding-left: 20px !important;
    }

    .carousel .carousel-item .caption .caption-description li {
        margin-left: 0 !important;
        font-size: 12px !important;
        padding-left: 0 !important;
        line-height: 1.15 !important;
    }
    .carousel {
        display: contents;
    }
}


/* 576px - 767px */
@media (max-width: 767px) {
    #search_widget {display: none;}
    .carousel .carousel-item .caption {
        margin-top: 0;
        top: 35px;
        left: 15px;
        width: 50%;
        text-align: left !important;
        color: #fff;
    }

    .carousel .carousel-item .caption h2 {
        font-size: 1.1rem !important;
    }

    .carousel .carousel-item .caption .caption-description p {
        margin: 4px 0 !important;
        font-size: 8px !important;
    }

    .carousel .carousel-item .caption .caption-description ul {
        padding-left: 20px !important;
    }

    .carousel .carousel-item .caption .caption-description li {
        margin-left: 0 !important;
        font-size: 9px !important;
        padding-left: 0 !important;
        line-height: 1.15 !important;
    }
    .carousel {
        display: contents;
    }
}

/* 0px - 575px */
@media (max-width: 575px) {
    #search_widget {display: none;}

    .carousel .carousel-item .caption {
        margin-top: 0;
        top: 8.5cqw;
        left: 3.5cqw;
        right: auto;
        width: 50%;
        max-width: none;
        transform: none;
        text-align: left !important;
        color: #fff;
    }

    .carousel .carousel-item .caption h2 {
        font-size: 3.2vw !important;
        line-height: 1.05 !important;
        margin: 0 0 6px 0 !important;
        white-space: normal;
    }

    .carousel .carousel-item .caption .caption-description {
        font-size: 2vw !important;
        line-height: 1.15 !important;
        text-align: left !important;
    }

    .carousel .carousel-item .caption .caption-description p {
        margin: 4px 0 !important;
        font-size: 1.5vw !important;
        line-height: 1.1;
    }

    .carousel .carousel-item .caption .caption-description ul {
        margin: 3px 0 0 0 !important;
        padding-left: 6vw !important;
        text-align: left !important;
    }

    .carousel .carousel-item .caption .caption-description li {
        margin-left: 0 !important;
        font-size: 1.5vw !important;
        padding-left: 0 !important;
        line-height: 1.15 !important;
    }
    .carousel {
        background: none;
        width: 100%;
        display: contents;
    }
}

/* ---------------------------------------------------------
   27. CHECKOUT
   --------------------------------------------------------- */
body#checkout section.checkout-step.-reachable.-current .step-number {
    background-color: var(--spa-accent);
}
body#checkout #header .header-nav .logo {
    content: url("/new/img/logo_white.png");
    max-height:30px;
}

.custom-radio input[type=radio]:checked+span {
    background-color: var(--spa-primary-dark);
}

#content-hook-order-confirmation-footer{
    margin-top: 100px;
}
body#checkout section.checkout-step div.delivery-options div.row.delivery-option.js-delivery-option {
    background: none;
    border: none;
}


/* ---------------------------------------------------------
   28. ACCOUNT
   --------------------------------------------------------- */

.ps-alert-success .item, .ps-alert-success .item i svg {
    background-color: var(--spa-accent);
}

.ps-alert-success .item, .ps-alert-success .item i svg path {
    fill: white;
}

.ps-alert-success .item, .ps-alert-success .item i {
    border-color: var(--spa-accent);
}

.password-requirements .material-icons{
    color: var(--spa-accent) !important;
}

.bg-success {
    background-color: var(--spa-accent) !important;
}

.page-my-account #content .links a i {
    color: #29283b;
    transition: color .2s ease;
}

.page-my-account #content .links a:hover i {
    color: var(--spa-accent);
}

.page-my-account #content .links a {
    color: var(--spa-primary-deep);
}

.page-my-account #content .links a span.link-item {
    background: linear-gradient(90deg,rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.3) 100%);
    border: 1px solid rgba(40,40,55,.05);
    border-radius: 8px;
    box-shadow: 0 5px 18px rgba(20,25,40,.04);
    font-weight: 300;
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background-color .2s ease;
}

.page-my-account #content .links a:hover span.link-item {
    background: linear-gradient(90deg,rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.6) 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(20,25,40,.07);
}

.page-my-account .text-sm-center {
    text-align: right !important;
    position: relative;
    right: 20px;
    margin-top: 18px;
}

.page-my-account .text-sm-center a {
    color: rgb(0 0 0 / 88%);
    font-size: .9rem;
}

.page-my-account .text-sm-center a:hover {
    color: #29283b;
}