/*============================================

   Theme Name: Waterfall
   Author : Gene

==============================================*/
/* CSS Index
==============================================

    1. Theme Default CSS
    2. Typography
    3. Button
==============================================*/
/*============================================
/*  1. Theme Default CSS
==============================================*/
:root {
    /* Colors */
    --white: white;
    --primary: #005ab5;
    --primary-light: #0c6fd3;
    --primary-dark: #003264;
    --secondary: #0b65c0;
    --secondary-light: #0065cc;
    --secondary-dark: #004487;
    --container-background: #d7d7d7;
    --background-opacity: 0.4;
    --website-bg: #ffffff;
    --footer: #092b62;
    --footer-text: #404040;
    --text-button: #ffffff;
    --text-h1: #1a1d21;
    --text-h2: #1a1d21;
    --text-h3: #1a1d21;
    --text-paragraph: #495057;
    --border: #dee2e6;
    --border-width: 1px;
    --container-border-width: 2px;
    --border-style: none;
    --button-border-color: #ff72a0;
    --button-secondary-border-color: #4f1d8f;
    /* Typography */
    --font-family: Arial, Helvetica, sans-serif;
    --font-family-heading: 'Playwrite Magyarország', sans-serif;
    --font-size-small: 12px;
    --font-size-base: 16px;
    --font-size-h1: 32px;
    --font-size-h2: 24px;
    --font-size-h3: 20px;
    /* Spacing & Effects */
    --border-radius: 0px;
    --box-shadow: 2px 4px 12px #00000014;
    --box-shadow-hover: 2px 4px 16px #00000029;
    --box-shadow-button: 0 4px 8px rgba(0, 0, 0, 0.2);
    --transition: all 0.3s ease;
    --transition-time: 0.3s;
    /* Spacing System */
    --spacing-xs: 4px;
    --spacing-sm: 10px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-xxl: 48px;
    /* Animation & Micro-interactions */
    --animation-duration: 0.2s;
    --animation-timing: ease-in-out;
    --hover-lift: translateY(-2px);
    --hover-scale: scale3d(1.01,1.01,1.01);
    --pulse-animation: pulse 2s infinite;
    /* Hover Effects */
    --hover-primary: #1d4b95;
    --hover-secondary: #ba4721;
    --hover-bg: #e9ecef;
    /* Buttons */
    --button-border-radius: 0px;
    --button-border-width: 1px;
    --button-border-style: none;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/*=============================
	2. Typography
===============================*/

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: var(--fw-regular);
    color: var(--text-paragraph);
    line-height: var(--body-line-height);
    transition: background-color 0.3s ease;
    background-color: var(--website-bg);
}

img,
.img {
    max-width: 100%;
    transition: var(--transition);
}

a,
button {
    color: var(--primary);
    font-family: var(--font-family);
    outline: none;
    text-decoration: none;
    transition: var(--transition);
}

    a:focus,
    .btn:focus,
    .button:focus {
        text-decoration: none;
        outline: none;
        box-shadow: none;
    }

    a:hover,
    button:hover {
        text-decoration: none;
    }

    button:focus,
    input:focus,
    input:focus,
    textarea,
    textarea:focus {
        outline: 0;
    }

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-family-heading);
    color: var(--text-h1);
    margin-top: 0px;
    font-weight: var(--fw-bold);
    line-height: var(--heading-line-height);
    text-transform: unset;
}

    h1 a,
    h2 a,
    h3 a,
    h4 a,
    h5 a,
    h6 a {
        color: inherit;
    }

h1 {
    font-size: var(--font-size-h1);
}

h2 {
    font-size: var(--font-size-h2);
}

h3 {
    font-size: var(--font-size-h3);
}

h4 {
    font-size: 1.5rem;
}

h5 {
    font-size: 1.25rem;
}

h6 {
    font-size: 1rem;
}

.list-wrap {
    margin: 0px;
    padding: 0px;
}

    .list-wrap li {
        list-style: none;
    }

p {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--body-line-height);
    font-weight: var(--fw-regular);
    color: var(--text-paragraph);
    margin-bottom: 15px;
}

hr {
    border-bottom: 1px solid var(--border);
    border-top: 0 none;
    margin: 30px 0;
    padding: 0;
}

label {
    color: var(--text-h1);
    cursor: pointer;
    font-size: var(--font-size-base);
    font-weight: var(--fw-regular);
}

input[type=color] {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    cursor: pointer;
    height: 100%;
    width: 100%;
    padding: 0;
    border-radius: 50%;
}

*::-moz-selection {
    background: var(--primary);
    color: var(--white);
    text-shadow: none;
}

::-moz-selection {
    background: var(--primary);
    color: var(--white);
    text-shadow: none;
}

::selection {
    background: var(--primary);
    color: var(--white);
    text-shadow: none;
}

/*=============================
    - Bootstrap Custom
=============================*/
@media (min-width: 992px) {
    .container {
        width: 100%;
        max-width: 1420px;
    }
}

@media (min-width: 1200px) {
    .container {
        width: 100%;
        max-width: 1432px;
    }
}

/*=============================
	3. Button style
===============================*/
.tg-button-wrap {
    display: flex;
}

.btn-main {
    user-select: none;
    -moz-user-select: none;
    background: var(--primary) none repeat scroll 0 0;
    border: medium none;
    border-radius: var(--border-radius);
    color: var(--white);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    font-family: var(--font-family-heading);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    margin-bottom: 0;
    padding: 18px 24px;
    text-align: center;
    text-transform: uppercase;
    touch-action: manipulation;
    transition: var(--transition);
    vertical-align: middle;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

    .btn-main::before {
        content: "";
        position: absolute;
        transition-duration: 800ms;
        width: 200%;
        height: 200%;
        top: 110%;
        left: 50%;
        background: var(--secondary);
        transform: translateX(-50%);
        border-radius: 50%;
        z-index: -1;
    }

    .btn-main:hover,
    .btn-main:focus-visible {
        color: var(--white);
        background: var(--primary);
    }

        .btn-main:hover:before,
        .btn-main:focus-visible:before {
            top: -40%;
        }

.btn-primary, a.btn-primary {
    color: var(--white);
    background: var(--primary);
}

.sidebar a.btn-primary {
    display: flex;
    justify-content: center;
}

.btn-two {
    background: var(--secondary);
}

    .btn-two:hover {
        background: var(--secondary);
    }

    .btn-two::before {
        background: var(--primary);
    }

.btn.btn-login-social {
    background-color: var(--white);
    width: 100%;
    color: var(--text-paragraph);
    justify-content: center;
    font-size: 16px;
    line-height: 28px;
    text-transform: capitalize;
}

    .btn.btn-login-social img {
        margin-right: 15px;
    }

    .btn.btn-login-social:after {
        display: none;
    }

    .btn.btn-login-social:hover {
        color: var(--white);
    }

.btn.btn-login {
    width: 100%;
    border-radius: var(--border-radius);
    padding: 20px 26px;
    justify-content: center;
    font-size: 18px;
    line-height: 28px;
}

    .btn.btn-login:hover {
        background-color: var(--secondary);
    }

.btn.border-yellow-btn {
    border: 1px solid var(--primary);
    background: transparent;
    color: var(--primary);
    padding: 17px 24px;
}

    .btn.border-yellow-btn::before {
        background-color: var(--primary);
    }

    .btn.border-yellow-btn:hover {
        color: var(--white);
    }

.border-btn {
    border: 1px solid var(--secondary);
    background: transparent;
    color: var(--secondary);
    padding: 17px 24px;
}

    .border-btn::before {
        display: none;
    }

    .border-btn:hover {
        background: var(--secondary);
    }
/*==============================================
 			General Index
==============================================

    Login Dialog ✅
	Checkout Login or Register ✅
	Whats New Dialog ✅
	Contact Us Form ✅
	Header ✅
	Mobile Header ✅
    Scroll Top ✅
	Featured Products 
    Register Dialog ✅
	Sidebar Store Menu ✅
	Recently Viewed ✅
    Social Media Links Inline ✅
	Sidebar Product Finder ✅
	Account Profile ✅
	Account Sidebar ✅
	Theme Config On/Off ✅
	Custom Buttons ✅
	Basket Content ✅
	Shipping Estimate ✅
	Checkout Top Header ✅
	Checkout Page Billing ✅
	Shipping Address ✅
	Order Summary ✅
	Billing Address ✅
	Continue Checkout ✅
	Checkout Shopping-cart ✅
	Checkout Payment ✅
	Receipt Page ✅
	Product Page 
	Basket Notifier ✅
	Sidebar Recently Viewed ✅
==============================================*/

/*=============================
	Login Dialog
===============================*/
#loginDialogWidget {
    display: flex;
    justify-content: center;
    .login-form-wrapper

{
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
    max-width: max-content;
    background: var(--container-background);
}

.form-control.text-box.single-line,
.form-control {
    padding: 20px;
    border-radius: var(--button-border-radius);
}

.required-icon {
    border: transparent;
    .text

{
    color: #B80000;
    font-size: 30px;
    margin: 4px 0px 0px -5px;
}

}
}
/*=============================
	Checkout Login or Register
===============================*/
#checkout-page-container {
    .login-form-wrapper

{
    box-shadow: 2px 8px 14px 15px rgba(0, 0, 0, 0.1);
    border-radius: var(--border-radius);
    max-width: max-content;
    background: var(--container-background);
}

.btn.btn-block.btn-primary {
    padding: 15px;
    border-radius: var(--button-border-radius);
    &:hover

{
    color: black;
    border: 2px solid;
    background: transparent;
    border: 2px solid #3c3a3a;
    box-shadow: 2px 8px 14px 15px rgba(0, 0, 0, 0.1);
}

}
}

/*=============================
	Whats New Dialog
===============================*/
#widget-whats-new-collapse {
    #products

{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.col-md-12.col-sm-4.col-xs-6 {
    width: unset;
    float: none;
}

}

.widget.cms-widget.widget-whats-new {
    background: var(--container-background);
    transition: all .5s cubic-bezier(.42, 0, .58, 1);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1);
    h3

{
    transition: all .5s cubic-bezier(.42, 0, .58, 1);
    border-radius: 15px 15px 0px 0px;
    text-align: center;
    font-size: 27px;
    padding: 6px;
    margin-top: 34px;
}

}

.widget.cms-widget.widget-whats-new:has([aria-expanded="false"]) {
    border-radius: var(--button-border-radius);
    transition: all .5s cubic-bezier(.42, 0, .58, 1);
    h3

{
    transition: all .5s cubic-bezier(.42, 0, .58, 1);
    border-radius: var(--button-border-radius);
}

}

/*=============================
	Contact Us Form
===============================*/
.widget-wrapper.contact-us {
    .html-content-item.components-content

{
    margin-top: unset;
    margin-bottom: unset;
    background: transparent;
    box-shadow: none;
    h2

{
    color: #11688d;
    text-align: center;
    font-size: 50px;
    letter-spacing: 2px;
    margin-top: 10px;
    text-shadow: 0.1em 0.1em 0 hsl(0deg 0% 49.16% / 27%);
    &:before

{
    content: "";
    position: absolute;
    top: 395px;
    width: 240px;
    height: 6px;
    border-radius: var(--button-border-radius);
    background: #d61414;
}

}

#leftcol {
    padding-right: 35px;
    width: 460px;
}

}
}

#ContactUsContainer {
    display: flex;
    justify-content: center;
    .components-content

{
    background: var(--container-background);
    box-shadow: 1px 10px 14px 7px rgba(0, 0, 0, 0.1);
    border-radius: var(--border-radius);
}

textarea.form-control {
    height: 222px;
    border-radius: var(--border-radius);
}

.form-control {
    padding: 20px;
    border-radius: var(--button-border-radius);
}

.required-field-block .required-icon .text {
    color: #B80000;
    font-size: 30px;
    margin: 4px 0px 0px -5px;
}

.required-field-block .required-icon {
    border: transparent;
}

}

.contact-us-background {
    z-index: -99;
    position: absolute;
    border-radius: var(--border-radius);
    height: 1014px;
    width: 1440px;
    left: -5px;
    background: var(--white);
    box-shadow: 0px 7px 9px 5px rgba(0, 0, 0, 0.1);
}

/*=============================
	3. Scroll Store Header 
===============================*/

.store-logo-sm > a > img {
    width: 190px;
    height: auto;
}

header.navbar.navbar-small {
    height: 80px;
    box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.1);
    border-color: transparent;
}

.navbar-small.navbar-fixed-top {
    border-color: none;
    height: 180px;
    box-shadow: none;
    img

{
    width: 190px;
    height: auto;
}

}

#able-span {
    img

{
    margin-top: -4px;
    width: auto;
    height: 79px;
}

}

/*=============================
	Mobile Header
===============================*/
@media only screen and (min-width: 0) and (max-width: 479px) {
    #able-span {
        img

{
    margin-top: -4px;
    width: 60px;
    height: auto;
}

}
}


/*=============================
	Scroll top
===============================*/
#scrolltop {
    background: var(--primary);
    opacity: .7;
    border-radius: var(--border-radius);
    -webkit-animation: 1000ms ease-in-out 0s normal none 1 running fadeInDown;
    animation: 1000ms ease-in-out 0s normal none 1 running fadeInDown;
    -webkit-box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1);
    box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1);
    width: 40px;
    height: 40px;
    padding-top: 1px;
    font-size: 26px;
    &:hover

{
    background: var(--secondary);
    opacity: 1;
}

}


/*=============================
   4. Featured Products Clean & simple / Upsell page
===============================*/
.product-listing-container {
    h2

{
    font-weight: 300;
    font-size: 48px;
    line-height: 38px;
    color: #525252;
    text-align: center;
    margin-top: 24px;
    font-family: 'Source Sans Pro', Verdana, Geneva, sans-serif;
    margin-bottom: 36px;
    text-align: center;
    font-size: 54px;
}

#products {
    .product-item

{
    width: 100%;
}

}
}
/*=============================
	5. Stacked about us
===============================*/
.about-us-container {
    display: flex;
    align-items: center;
    img

{
    box-shadow: 0 6px 17px 0 rgba(0, 0, 0, 0.1);
    border-radius: var(--border-radius);
    width: 3300px;
    &:hover

{
    transform: rotate(2deg) translate(3px, 0px);
}

}

.about-us-text {
    padding: 35px;
}

}

/*=============================
	6. Home Page Product Categories
===============================*/
#categories {
    .category-item.category-item-display.p-t-md

{
    background-color: transparent;
    box-shadow: none;
    overflow: hidden !important;
    height: max-content !important;
    h3

{
    font-weight: 600;
    color: #202020;
    font-family: 'Source Sans Pro', Verdana, Geneva, sans-serif;
    text-align: center;
    font-size: 24px;
    height: unset;
    line-height: unset;
    letter-spacing: unset;
    a

{
    /* color: var(--text-h1); */
}

}
}

img,
.category-mask {
    left: 14px;
    width: 100%;
    max-width: 300px;
    aspect-ratio: 4 / 4;
    border-radius: 0px;
    overflow: hidden;
}

}

article.category-item .category-overlay .category-mask {
    background-color: transparent;
}

.subcategories-gird.m-t {
    h2

{
    font-weight: 600;
    font-size: 48px;
    line-height: 58px;
    color: #202020;
    text-align: center;
    margin-top: 54px;
    font-family: 'Source Sans Pro', Verdana, Geneva, sans-serif;
    margin-bottom: 36px;
    text-align: center;
    font-size: 54px;
}

}

/*=============================
	7. Products Clean & simple
===============================*/
.products-header {
    border-radius: var(--button-border-radius);
    padding-left: 25px;
    box-shadow: var(--box-shadow);
}

.row.breadcrumb-wrapper {
    background: var(--primary);
    h1

{
    font-weight: 700;
    letter-spacing: 2px;
    font-size: var(--font-size-h1);
    color: var(--white);
    margin-top: 15px
}

li > a {
    color: var(--white);
}

}

#products {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    img

{
    min-height: 200px;
    width: 100%;
    max-height: 220px;
    object-fit: cover;
}

.col-xs-6.col-sm-4.col-md-4 {
    width: min-content;
}

h2 {
    text-align: center;
    font-size: 44px;
    padding-bottom: 15px;
    padding-top: 25px;
}

.product-item {
    width: 324px;
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
    display: flex;
    height: 463px !important;
    align-items: flex-start;
    padding: 0px;
    overflow: hidden !important;
    &:hover

{
    z-index: 99;
    transform: var(--hover-scale);
    box-shadow: var(--box-shadow-hover);
}

.row > div {
    position: relative !important;
    top: 0px;
}

.buttons {
    padding: 15px 0;
}

.btn-add-to-cart, .btn.btn-primary.btn-sm {
    padding: var(--spacing-sm);
    display: inline-block;
    outline: 0;
    border: var(--button-border);
    margin: -1px;
    border-radius: var(--border-radius);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-button);
    cursor: pointer;
    width: 50%;
    .fa.fa-shopping-cart, .fa.fa-info-circle

{
    display: none;
}

}

#products > div > article > div > div.col-sm-9 > div > h3 > a {
    font-size: var(--font-size-h3);
}

.product-body {
    max-width: 313px;
    padding: 0px 0px 0px 0px !important;
    buttons

{
    font-weight: 600;
    var(--font-size-h3)
}

span:nth-child(1) {
    font-weight: 600;
    var(--font-size-h3) font-size: 31px;
}

.price {
    font-size: var(--font-size-h3);
}

span:nth-child(4) {
    font-weight: 400;
    font-size: var(--font-size-h3);
    color: var(--primary);
}

}

.product-body:has(.specialprice) {
    .product-rating

{
    padding: 0px 0 0px;
}

p, h3 {
    margin: 0px;
}

del {
    color: #f10a4f;
    font-size: var(--font-size-h2);
}

.price {
    color: #f10a4f;
    var(--font-size-h3)
}

.specialprice {
    font-size: 11px;
}

div:has(.specialprice) span {
    font-size: var(--font-size-h3);
    .specialprice

{
    font-size: var(--font-size-h2);
}

}
}

.col-sm-9 {
    top: 60px;
    display: flex;
    height: 243px !important;
    flex-direction: column;
    justify-content: space-around;
}

.row.row-no-padding {
    height: 463px !important;
    width: 100%;
}

}

.col-xs-6.col-sm-4.col-md-3 {
    min-width: 358px;
    max-width: min-content;
}

}

article.product-item .product-overlay {
    width: auto;
    height: 100%;
    justify-content: center;
    align-items: center;
}

#products.grid article.product-item p {
    color: #3f3f3f;
    text-align: center;
}

/*=============================
	8. Footer
===============================*/
    /* Modern Footer Styles */
        footer {
            background-color: var(--footer);
            color: var(--footer-text);
            padding: 60px 0 30px;
            margin-top: auto;
            position: relative;
            overflow: hidden;
        }
        footer h4 {
            color: var(--footer-text);
            font-size: 18px;
            margin-bottom: 25px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            position: relative;
            padding-bottom: 10px;
        }
        footer ul {
            padding-left: 0;
            list-style: none;
        }
        
        footer ul li {
            margin-bottom: 15px;
            line-height: 1.5;
            transition: transform 0.3s;
        }
        
        footer ul li:hover {
            transform: translateX(5px);
        }
        
        footer a {
            color: var(--footer-text);
            text-decoration: none;
            transition: color 0.3s;
        }
        
        footer a:hover {
            color: var(--primary);
        }
        
        footer .fa {
            margin-right: 10px;
            width: 20px;
            text-align: center;
        }
        
        footer .contact-info li {
                display: flex;
                align-items: center;
                gap: 5px;
        }
        
        footer .social {
            margin-top: 25px;
        }
        
        footer .social a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background-color: var(--primary-light);
            border-radius: 50%;
            margin-right: 12px;
            font-size: 18px;
            transition: all 0.3s ease;
            color: var(--footer-text);
        }
        
        footer .social a:hover {
            background-color: var(--primary);
            color: var(--footer);
            transform: translateY(-5px);
        }
        
        footer .footer-bottom {
            border-top: 1px solid var(--primary-light);
            padding-top: 25px;
            margin-top: 40px;
        }
        
        footer .payment-methods {
            text-align: right;
        }
        
        footer .payment-methods li {
            display: inline-block;
            margin-left: 12px;
            font-size: 28px;
            color: var(--footer-text);
            transition: color 0.3s;
        }
        
        footer .payment-methods li:hover {
            color: var(--footer-text);
        }
        
        footer .copyright {
            margin: 0;
            font-size: 15px;
        }
        
        footer .copyright a {
            color: var(--primary);
        }
        
        footer .copyright a:hover {
            color: var(--primary-dark);
        }
        
        .newsletter-form {
            margin-top: 20px;
        }
         .newsletter-form .form-control [placeholder] {
            color:var(--white);
        }
        .newsletter-form .form-control {
            border: 1px solid var(--primary-light);
            color: var(--footer-text);
            border-radius: 4px;
            padding: 10px 15px;
        }
        
        .newsletter-form .form-control:focus {
            box-shadow: 0 0 0 2px var(--primary-dark);
            border-color: var(--primary);
        }
        
        .newsletter-form .btn {
            background-color: var(--primary);
            color: var(--footer);
            border: none;
            border-radius: 4px;
            padding: 10px 20px;
            font-weight: 600;
            transition: all 0.3s;
            margin-top: 10px;
            width: 100%;
}
        
        .newsletter-form .btn:hover {
            background-color: var(--primary-dark);
            color: var(--white);
            transform: translateY(-2px);
            -webkit-transform: translateY(-2px);
            -moz-transform: translateY(-2px);
            -ms-transform: translateY(-2px);
            -o-transform: translateY(-2px);
}
        
        .footer-logo {
            font-size: 24px;
            font-weight: 700;
            color: var(--footer-text);
            margin-bottom: 15px;
            display: inline-block;
        }
        
        .footer-logo span {
            color: var(--primary);
        }
        
        .footer-description {
            margin-bottom: 20px;
            line-height: 1.6;
        }
        
        .payment-section {
            background-color: var(--primary-dark);
            padding: 20px;
            border-radius: 8px;
            margin-top: 20px;
        }
        
        .payment-title {
            color: var(--footer-text);
            font-size: 16px;
            margin-bottom: 15px;
            text-align: center;
        }
        
        .payment-icons {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 15px;
        }
        
        .payment-icon {
            font-size: 32px;
            color: var(--footer-text);
            transition: all 0.3s;
        }
        
        .payment-icon:hover {
            color: var(--primary);
            transform: translateY(-3px);
        }
        
        @media (max-width: 768px) {
            footer .payment-methods {
                text-align: center;
                margin-top: 15px;
            }
            
            footer .copyright {
                text-align: center;
                margin-bottom: 15px;
            }
            
            footer .col-md-4, 
            footer .col-lg-3 {
                margin-bottom: 30px;
            }
            
            footer h4::after {
                left: 50%;
                transform: translateX(-50%);
            }
            
            .payment-icons {
                gap: 10px;
            }
            
            .payment-icon {
                font-size: 28px;
            }
        }
/*=============================
	9. Banner
===============================
#slider {
    margin: 0px;
    box-shadow: none;
    border-radius: var(--border-radius);
    overflow: hidden;
    align-content: center;

   
    
    .carousel-inner .item img

{
    width: 100%;
    height: 425px;
    object-fit: cover;
    filter: brightness(90%);
}
    .item > div:nth-child(2) h2 {
        color:black!important;
        font-size: var(--font-size-h2);
        margin-bottom: 15px;
        font-weight: bold;
        text-shadow: none;
    }
     .item > div:nth-child(2) p {
        color:black!important;
        font-size: var(--font-size-base);
        margin-bottom: 0;
		text-shadow: none;
    }
.item > div:nth-child(2) {
    background: var(--website-bg);
    padding: var(--spacing-md);
    padding-left:45px;
    padding-right:45px;
    bottom: 0%;
    max-width: 500px;
}
.item > div:nth-child(2) {
    background: var(--website-bg);
    border-radius: var(--border-radius);
    color:black;
    max-width: 500px;
	padding-bottom:36px;
}
.item > div:nth-child(2)::before,
.item > div:nth-child(2)::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 50px;
  height: 40px;
  background: #fff;
  border-radius: 0;
  z-index: -1;
}

.item > div:nth-child(2)::before {
  left: -30px;
  bottom: -10px;
  mask: radial-gradient(30px at top left, #0000 98%, #000);
}

.item > div:nth-child(2)::after {
  right: -30px;
  bottom: -10px;
  mask: radial-gradient(30px at top right, #0000 98%, #000);
}
.carousel-caption-right{
	left:unset;
	right: 8%;
}
	.carousel-caption{
	 left:unset;
	 right: 26%;
}
	.carousel-caption-left{
	left:unset;
	right: 59%;
}	
.carousel-indicators {
    bottom: 10px;
}

    .carousel-indicators li {
        width: 12px;
        height: 12px;
        margin: 0 5px;
        border: 2px solid var(--white);
        border-radius: var(--border-radius);
        background: transparent;
    }

    .carousel-indicators .active {
        background: var(--white);
        width: 12px;
        height: 12px;
        margin: 0 5px;
    }

.carousel-control {
    background: transparent;
    width: 50px;
    height: 50px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
}

    .carousel-control.left {
        left: 20px;
    }

    .carousel-control.right {
        right: 20px;
    }

    .carousel-control .glyphicon {
        color: var(--white);
        font-size: var(--text-h2);
        margin-top: 3px;
    }

    .carousel-control:hover {
        background: rgba(255, 255, 255, 0.3);
    }

    .carousel-control span::before {
        content: none;
    }
*/
/* Responsive adjustments 
@media (max-width: 768px) {
    .carousel-inner .item img {
        height: 300px;
    }

    .carousel-caption-left,
    .carousel-caption-right {
        left: 5%;
        right: 5%;
        text-align: center;
        max-width: none;
    }
}

@media (max-width: 480px) {
    .carousel-inner .item img {
        height: 250px;
    }

    .carousel-caption,
    .carousel-caption-left,
    .carousel-caption-right {
        padding: 15px;
        bottom: 15%;
    }
}

}
*/
/*=============================
	10. Advenced Search
===============================*/
.components-content:has(.searchPanel) {
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
    background: var(--container-background);
}

#LowPrice {
    border-radius: var(--border-radius);
    width: 100px;
    margin-right: 25px;
    text-align: center;
}

    #LowPrice::after {
        content: "\f002";
        font: normal normal normal 14px / 1 FontAwesome;
        font-weight: 100;
        font-size: var(--font-size-h3);
        color: var(--text-h2);
        z-index: 99;
        margin-left: -29px;
        bottom: -5px;
        position: relative;
        line-height: 0;
    }

#HighPrice {
    border-radius: var(--border-radius);
    width: 100px;
    text-align: center;
}

.searchPanel {
    .input-group-addon:first-child, .input-group-addon:nth-child(3)

{
    display: none;
}

#Keywords,
#CategoryId,
#ManufacturerId {
    border-radius: var(--border-radius);
}

}

/*=============================
	11. Product Page
===============================*/
.product-quantity .btn-default {
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
    color: var(--text-h1);
    font-size: 30px;
    width: 40px !important;
    height: 40px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--button-border-radius);
    font-weight: bold;
    transition: background-color 0.3s;
}

article.product-item.product-single .product-quantity .btn:hover {
    background: #6e6e6e5e;
}

.product-quantity .form-control {
    border: none;
    border-radius: 0;
    text-align: center;
    margin: 0;
    background: none;
}

article.product-item.product-single .product-links a {
    flex: 1;
    padding: 4px 16px;
    border-radius: var(--button-border-radius);
    border: 1px solid #ddd;
    background-color: var(--white);
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s;
    font-weight: 500;
    i

{
    color: var(--primary);
}

}

article.product-item.product-single .product-links a:hover {
    background-color: var(--primary-light);
    border-color: none;
    color: var(--white);
    i

{
    color: var(--white);
}

}

article.product-item.product-single .product-links a.active {
    border-color: var(--secondary);
    color: var(--secondary);
}

.product-carousel img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.product-carousel {
    width: 100%;
    height: 400px;
    border-radius: var(--border-radius);
    background-color: var(--container-background);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    overflow: hidden;
}

.additional-images {
    display: flex;
    justify-content: flex-start;
}

    .additional-images img {
        width: 80px;
        height: 80px;
        border-radius: var(--border-radius);
        background-color: var(--primary-light);
        margin-right: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s;
        overflow: hidden;
    }

        .additional-images img:hover, .additional-images img.active {
            border: 2px solid var(--border);
        }

article.product-item.product-single {
    background: var(--container-background);
    border-radius: var(--border-radius);
    padding: 15px;
    padding-top: 55px;
    padding-bottom: 55px;
    box-shadow: var(--box-shadow);
    .form-control

{
    width: 100%;
    padding: var(--spacing-md);
    border-radius: var(--button-border-radius);
    appearance: none;
    cursor: pointer;
    font-size: var(--font-size-base);
    height: min-content;
    transition: all 0.3s;
}

.row:has(.form-control) {
    div: first-child:has(.form-control)

{
    width: 100%;
}

}

.product-rating i {
    font-size: 22px;
    padding: 0 2px;
}

.price {
    var(--font-size-h3)
}

h3 {
    font-size: var(--font-size-h1);
    font-weight: 700;
}

label {
    cursor: default;
}

.btn.btn-primary.btn-block {
    border: 1px solid #8f8f8f;
    background-color: var(--primary-dark);
    font-weight: 400;
    font-size: var(--font-size-h2);
    line-height: 22px;
    text-transform: none;
    border-radius: var(--button-border-radius);
    padding: var(--spacing-sm);
    line-height: 125%;
    color: white;
    &:hover

{
    background-color: var(--hover-primary);
}

}

#buy-product-dialog-form .btn-addtocart button {
    border: unset;
    color: white;
}

}

article.product-item.product-single .product-info li span {
    margin-right: 5px;
    width: auto;
    color: var(--text-h1);
}

/*=============================
	12. HTMl Content
===============================*/
.html-content-item.components-content h1 > span:nth-child(1) {
    font-size: 46px !important;
    text-transform: uppercase;
    letter-spacing: 3px;
    transition: 700ms ease;
    margin-bottom: 0.8rem;
    color: #9b1313 !important;
    outline: none;
    text-align: center;
    &:hover

{
    letter-spacing: 4px;
    color: #760a0a !important;
}

}

.html-content-item.components-content {
    margin-top: 26px;
    margin-bottom: 75px;
}

/*=============================
	13. Pagination
===============================*/
.pagination-wrapper {
    background: transparent;
    box-shadow: none;
}

.pagination {
    box-shadow: var(--box-shadow);
    display: inline-block;
    height: 70px;
    margin-top: 70px;
    padding: 0 45px 0px 45px;
    border: none;
    border-radius: var(--button-border-radius);
    background-color: var(--container-background);
    transition: all 1s cubic-bezier(.42, 0, .58, 1);
}

@media only screen and (max-width: 990px) {
    .pagination {
        width: 580px;
        height: 140px;
        padding: 0 0px 0px 35px;
        transition: all 1s cubic-bezier(.42, 0, .58, 1);
    }
}

@media only screen and (max-width: 740px) {
    .pagination {
        width: 580px;
        height: 140px;
        transition: all 1s cubic-bezier(.42, 0, .58, 1);
    }
}

@media only screen and (max-width: 740px) {
    .pagination {
        width: 580px;
        height: 140px;
        transition: all 1s cubic-bezier(.42, 0, .58, 1);
    }
}

@media only screen and (max-width: 640px) {
    .pagination {
        width: 330px;
        height: 210px;
        transition: all 1s cubic-bezier(.42, 0, .58, 1);
    }
}

.pagination > li > a {
    background-color: transparent;
    border: none;
    display: flex;
    padding: 0px 26px 0px 25px;
    /* float: left;
     */
    text-align: center;
    transition: 400ms ease;
    color: var(--text-h1);
    font-size: var(--font-size-h3);
    letter-spacing: 0.1em;
    line-height: 70px;
    height: unset;
    margin: unset;
    justify-content: center;
    align-items: center;
}

.pagination > li.active > a, .pagination > li.active > a:hover, .pagination > li.active > a:focus {
    background-color: var(--primary);
    color: #fff;
}

.pagination > li > a:hover, .pagination > li > a:hover {
    background-color: var(--primary);
    color: #fff;
}

/*=============================
	Search Page
===============================*/
.components-content {
    padding: 20px;
    border-radius: var(--button-border-radius);
    background: var(--container-background);
    box-shadow: none;
}

.widget-post-categories ul li a .badge {
    float: right;
    border-radius: var(--button-border-radius);
    width: 55px;
    padding-top: 5px;
    padding-bottom: 4px;
    background: var(--secondary);
}


#widget-product-finder-collapse > div > div:nth-child(8) > ul > form > li > div > span > button {
    background: transparent;
    border: none;
    i

{
    color: #808080;
    font-size: 25px;
    left: -47px;
    position: relative;
}

#Keywords {
    height: 46px;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
    border-radius: var(--button-border-radius);
    z-index: 2;
}

}

/*=============================
	Register Dialog
===============================*/
#registerDialogWidget {
    .login-form-wrapper

{
    background: var(--container-background);
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
}

textarea.form-control {
    height: 222px;
    border-radius: var(--border-radius);
}

.form-control {
    padding: 20px;
    border-radius: var(--button-border-radius);
}

.required-field-block .required-icon .text {
    color: #B80000;
    font-size: 30px;
    margin: 4px 0px 0px -5px;
}

.required-field-block .required-icon {
    border: transparent;
}

.well {
    border-radius: var(--button-border-radius);
}

}


/*=============================
	16.Sidebar Store Menu/Rroduct Finder
===============================*/
aside.sidebar {
    .widget.widget-post-categories

{
    .col-md-12.col-sm-4.col-xs-6

{
    width: unset;
    float: none;
}

}

.widget.widget-post-categories {
    transition: all .5s cubic-bezier(.42, 0, .58, 1);
    border-radius: var(--border-radius);
    h3

{
    transition: all .5s cubic-bezier(.42, 0, .58, 1);
    text-align: center;
    font-size: var(--font-size-base);
    padding: var(--spacing-sm);
    margin-top: 34px;
    background: var(--secondary);
    border-top-right-radius: var(--border-radius);
    border-top-left-radius: var(--border-radius);
}

}

.widget.widget-post-categories:has([aria-expanded="false"]) {
    border-radius: var(--button-border-radius);
    transition: all .5s cubic-bezier(.42, 0, .58, 1);
    h3

{
    transition: all .5s cubic-bezier(.42, 0, .58, 1);
    border-radius: var(--button-border-radius);
}

}
}

#search-results {
    box-shadow: 1px 10px 14px 7px rgba(0, 0, 0, 0.1);
    border-radius: var(--border-radius);
    #keywords

{
    margin-top: 15px;
    height: 56px;
    padding: 10px 16px;
    font-size: var(--font-size-base);
    line-height: 1.3333333;
    border-radius: var(--button-border-radius);
    z-index: 2;
}

button {
    background: transparent;
    border: none;
    color: transparent;
    i

{
    color: #808080;
    font-size: 25px;
    left: -47px;
    position: relative;
}

&:after {
    content: "\f002";
    font: normal normal normal 14px / 1 FontAwesome;
    font-weight: 100;
    font-size: 24px;
    color: gray;
    z-index: 99;
    margin-left: -149px;
    bottom: -7px;
    position: relative;
}

}

.no-results {
    text-align: center;
    font-size: 19px;
    color: #b80000;
}

}

/*=============================
	Recently Viewed Not Sidebar
===============================*/
.recently-viewed.product-listing-container {
    #products

{
    display: flex;
    justify-content: space-between;
    .col-xs-6.col-sm-4.col-md-4

{
    width: 33%;
}

}
}


/*=============================
	Recently Viewed Not Sidebar
===============================*/
.recently-viewed.product-listing-container {
    #products

{
    display: flex;
    justify-content: space-between;
    .col-xs-6.col-sm-4.col-md-4

{
    width: 33%;
}

}
}

/*=============================
	Social Media Links
===============================*/
.widget-social-media-links {
    display: flex;
    align-items: flex-start;
    padding: unset;
    justify-content: flex-start;
    flex-wrap: nowrap;
    div: nth-child(1)>iframe

{ /* Facebook*/
    width: 68px !important;
    border-radius: var(--button-border-radius) !important;
    display: flex;
    height: 20px !important;
}

div:nth-child(2) > iframe { /* Twitter */
    width: 68px !important;
    border-radius: var(--button-border-radius) !important;
    display: flex !important;
    height: 20px !important;
}

div:nth-child(4) > a { /*Pinterest*/
    display: flex;
    border-radius: var(--button-border-radius) !important;
    width: 55px !important;
    height: 20px !important;
}

}
/*=============================
	Sidebar Product Finder
===============================*/
.sidebar {
    #widget-product-finder-collapse

{
    #Keywords

{
    margin-top: 15px;
    height: 56px;
    width: 117%;
    padding: 10px 16px;
    font-size: 18px;
    line-height: 1.3333333;
    border-radius: var(--button-border-radius);
    z-index: 2;
}

button {
    background: transparent;
    border: none;
    color: transparent;
    i

{
    color: #808080;
    font-size: 23px;
    left: -25px;
    top: 9px;
    position: relative;
}

&:.after {
    content: "\f002";
    font: normal normal normal 14px / 1 FontAwesome;
    font-weight: 100;
    font-size: 24px;
    color: gray;
    z-index: 99;
    margin-left: -149px;
    bottom: -7px;
    position: relative;
}

}
}
}

/*=============================
	Account Profile
===============================*/
.account-content {
    .login-form-wrapper

{
    box-shadow: 1px 10px 14px 7px rgba(0, 0, 0, 0.1);
    border-radius: var(--border-radius);
}

textarea.form-control {
    height: 222px;
    border-radius: var(--border-radius);
}

.form-control {
    border-radius: var(--button-border-radius);
}

.required-field-block .required-icon .text {
    color: #B80000;
    font-size: 30px;
    margin: 0px 0px 0px -5px;
}

.required-field-block .required-icon {
    border: transparent;
}

.account-profile-top h3 small {
    display: block;
    padding: 5px 0 0 2px;
    color: #7b7b7b;
    font-size: 100%;
}

}

/*=============================
	Account Sidebar
===============================*/
/*=============================
	Account Sidebar
===============================*/
.sidebar {
    .widget.widget-navigation

{
    background: transparent;
    box-shadow: none;
}

.nav-pills > li > a {
    padding: 15px;
    border-radius: 85px;
    background: white;
    margin: 25px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
    margin: 15px;
    font-weight: 600;
    color: #464646;
    /* border-bottom: 2px solid #EBEBEB; */
    font-size: 14px;
    text-align: center;
}

}

.sidebar a:hover, .sidebar ul li a:hover {
    color: var(--text-h1);
}
/*=============================
	Theme Config On/Off
===============================*/
.theme-config-box {
    .spin-icon

{
    padding: 7px 10px 97px 13px;
}

.spin-icon > div.btn-group-vertical.btn-toggle-editing {
    border-radius: 100px;
    width: 90%;
    height: 90px;
    transition: 0.3s ease all;
    z-index: 1;
    position: absolute;
    top: 15;
    right: 0;
    bottom: 5;
    left: 5;
    background: #707070;
}

.btn.btn-xs.btn-on {
    position: relative;
    top: 45%;
    left: 3px;
    width: 47px;
    font-size: 11px;
    /* padding: 17px 8px; */
    height: 45px;
    /* margin: 0px 0px -20px 0px; */
    overflow: hidden;
    border-radius: 100px;
    display: none;
    &.btn:: before

{
    background: transparent;
}

&.btn:: after {
    background: #da2e2e;
}

border: none;
}

.btn.btn-xs.btn-off {
    top: 0%;
    left: 4px;
    width: 47px;
    font-size: 11px;
    padding: 15px 8px;
    display: none;
    &.btn::before

{
    background: transparent;
}

&.btn::after {
    background: transparent;
    display: none
}

}

.btn-info.active {
    border-color: none;
}

.btn.btn-xs.btn-on.btn-info.active {
    transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
    display: block;
    top: 5%;
    background: var(--primary);
    position: relative;
    hidden;
    border-radius: 100px;
    &.btn:: before

{
    background: transparent;
}

&.btn:: after {
    display: none;
}

&: hover {
    background: #bfbfbf;
    content: "off"
}

border: n;
}

.btn.btn-xs.btn-off.btn-info.active {
    transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
    display: block;
    top: 45%;
    background: #aeaeae;
    position: relative;
    hidden;
    border-radius: 100px;
    &.btn::before

{
    background: transparent;
}

&.btn::after {
    display: none;
}

&:hover {
    background: var(--primary);
    content: "On"
}

border: none;
}

.skin-setttings {
    background: #ffffff !important;
    border-radius: var(--border-radius) !important;
    border: none;
    &>div

{
    border-bottom: 1px solid #d4d9e5;
    &.title

{
    background: #ebebeb;
    color: var(--text-h1);
    font-size: 16px;
    margin: 0px;
    border-bottom: none;
    text-transform: capitalize;
}

}

& > div:last-child {
    border: none;
}

& > span {
    color: var(--text-h1);
    font-weight: 600;
}

.form-control.valid {
    border-radius: var(--border-radius);
    color: var(--text-h1);
}

}

.skin-setttings span {
    color: var(--text-h1) !important;
    font-weight: 600;
}

.setings-item {
    border-bottom: 1px solid #d4d9e5;
    & > div > a

{
    border-radius: var(--border-radius) !important;
}

}

.skin-setttings > div:nth-child(5) > div > a {
    border-radius: var(--border-radius) !important;
}

.spin-icon {
    border-radius: 12px 0px 0px 12px;
    background: var(--primary);
    border: none;
}

    .spin-icon > div.toggle-btn.text-center > label {
        color: WHITE;
        FONT-SIZE: 15px;
    }

.setings-item a {
    color: #f70000;
}

}


/*=============================
	Basket Content
===============================*/
.account-content {
    background: transparent;
    box-shadow: none;
    .products-order

{
    border: 2px solid #ffffff00;
    padding: 15px;
}

}

.account-content #basketContent {
    .cart-head .cart-row

{
    display: none;
}

.cart-row {
    display: flex;
    background: white;
    border-radius: var(--border-radius);
    margin: 10px 0;
    padding: 10px 0;
    border-bottom: none;
    box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.1);
    align-items: center;
    flex-wrap: wrap;
}

#basket-form > div.box > div > div.col-sm-4.col-sm-offset-2 > ul > li {
    text-align: center;
    padding: 15px;
    border-radius: var(--border-radius);
    font-size: 25px;
    background: white;
    box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.1);
}

.box {
    border: none;
}

.btn.btn-default {
    border: none;
}

#modal-qty {
    border: none;
}

.table-products.cart-row .cart-col:nth-child(4) {
    flex: 0 0 150px;
    text-align: center;
    padding-top: 0px;
    padding-bottom: 0px;
}

.quantity {
    padding-top: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.product-quantity {
    display: flex;
    align-items: center;
    border-radius: var(--border-radius);
    overflow: hidden;
}

    .product-quantity .btn-default {
        border: none;
        background: #ececec;
        padding: 5px 11px;
        cursor: pointer;
        transition: background-color 0.2s;
        color: #9e9e9e;
        font-size: 20px;
    }

        .product-quantity .btn-default:hover {
            background: #e9ecef;
        }

    .product-quantity .form-control {
        border: none;
        border-radius: 0;
        text-align: center;
        width: 60px;
        margin: 0;
        padding: 8px 5px;
    }

a.btn.btn-inverse, .btn-warning.btn.ajax-delete-confirm-dialog {
    display: none;
}

}


/*=============================
	Shipping Estimate
===============================*/
#shipping-estimate-container {
    .sidebar .widget

{
    margin-bottom: 20px;
    border-radius: 26px;
}

transition: all .5s cubic-bezier(.42, 0, .58, 1);
border-radius: var(--border-radius);

h3 {
    transition: all .5s cubic-bezier(.42, 0, .58, 1);
    border-radius: 15px 15px 0px 0px;
    text-align: center;
    font-size: 17px;
    padding: 6px;
    margin-top: 34px;
}

}

#shipping-estimate-container:has([aria-expanded="false"]) {
    border-radius: var(--button-border-radius);
    transition: all .5s cubic-bezier(.42, 0, .58, 1);
    h3

{
    transition: all .5s cubic-bezier(.42, 0, .58, 1);
    border-radius: var(--button-border-radius);
}

}

.login-form-wrapper {
    box-shadow: 1px 10px 14px 7px rgba(0, 0, 0, 0.1);
    border-radius: var(--border-radius);
}

textarea.form-control {
    height: 222px;
    border-radius: 7px;
}

.form-control {
    border-radius: var(--button-border-radius);
}

.required-field-block .required-icon .text {
    color: #B80000;
    font-size: 40px;
    margin: -2px 0px 0px -45px;
}

.required-field-block .required-icon {
    border: transparent;
}

.account-profile-top h3 small {
    display: block;
    padding: 5px 0 0 2px;
    color: #7b7b7b;
    font-size: 100%;
}


/*=============================
	Checkout Top Header
===============================*/
.checkout-top-header {
    height: 97px;
    #storeLogo a img

{
    max-width: 330px;
}

.column.hidden-sm.hidden-xs.col-md-4 {
    height: 80px;
    display: flex;
    align-items: center;
}

}

.column.text-right.col-xs-6.col-md-4 {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/*=============================
	Checkout Page Billing
===============================*/
#checkout-page-container > article {
    background-color: #FFFFFF;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
}

/*=============================
	Shipping Address
===============================*/
.widget-shipping-options {
    .sidebar .widget

{
    margin-bottom: 20px;
    border-radius: 26px;
}

transition: all .5s cubic-bezier(.42, 0, .58, 1);
border-radius: var(--border-radius);

h3 {
    transition: all .5s cubic-bezier(.42, 0, .58, 1);
    border-radius: 15px 15px 0px 0px;
    text-align: center;
    font-size: 17px;
    padding: 6px;
    margin-top: 34px;
}

}

.widget-shipping-options:has([aria-expanded="false"]) {
    border-radius: var(--button-border-radius);
    transition: all .5s cubic-bezier(.42, 0, .58, 1);
    h3

{
    transition: all .5s cubic-bezier(.42, 0, .58, 1);
    border-radius: var(--button-border-radius);
}

}

.account-content.box-display {
    background: var(--white);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    height: unset !important;
}
/*=============================
	Order Summary
===============================*/
.widget-basket-summary {
    .sidebar .widget

{
    margin-bottom: 20px;
    border-radius: 26px;
}

transition: all .5s cubic-bezier(.42, 0, .58, 1);
border-radius: var(--border-radius);

h3 {
    transition: all .5s cubic-bezier(.42, 0, .58, 1);
    border-radius: 15px 15px 0px 0px;
    text-align: center;
    font-size: 17px;
    padding: 6px;
    margin-top: 34px;
}

}

.widget-basket-summary:has([aria-expanded="false"]) {
    border-radius: var(--button-border-radius);
    transition: all .5s cubic-bezier(.42, 0, .58, 1);
    h3

{
    transition: all .5s cubic-bezier(.42, 0, .58, 1);
    border-radius: var(--button-border-radius);
}

}
/*=============================
	Sidebar Widget
===============================*/
aside.sidebar {
    .widget.col-md-12.col-sm-4.col-xs-6

{
    width: unset;
    float: none;
}

.widget {
    transition: all .5s cubic-bezier(.42, 0, .58, 1);
    border-radius: var(--border-radius);
    h3

{
    transition: all .5s cubic-bezier(.42, 0, .58, 1);
    text-align: center;
    font-size: var(--font-size-base);
    padding: var(--spacing-sm);
    margin-top: 34px;
    border-top-right-radius: var(--border-radius);
    border-top-left-radius: var(--border-radius);
}

}

.widget:has([aria-expanded="false"]) {
    border-radius: var(--button-border-radius);
    transition: all .5s cubic-bezier(.42, 0, .58, 1);
    h3

{
    transition: all .5s cubic-bezier(.42, 0, .58, 1);
    border-radius: var(--button-border-radius);
}

}
}

/*=============================
	Billing Address
===============================*/
.widget-billing-address {
    .sidebar .widget

{
    margin-bottom: 20px;
    border-radius: 26px;
}

transition: all .5s cubic-bezier(.42, 0, .58, 1);
border-radius: var(--border-radius);

h3 {
    transition: all .5s cubic-bezier(.42, 0, .58, 1);
    border-radius: 15px 15px 0px 0px;
    text-align: center;
    font-size: 17px;
    padding: 6px;
    margin-top: 34px;
}

}

.widget-billing-address:has([aria-expanded="false"]) {
    border-radius: var(--button-border-radius);
    transition: all .5s cubic-bezier(.42, 0, .58, 1);
    h3

{
    transition: all .5s cubic-bezier(.42, 0, .58, 1);
    border-radius: var(--button-border-radius);
}

}

/*=============================
	Continue Checkout
===============================*/
.widget-continue-checkout {
    .widget-body

{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sidebar .widget {
    margin-bottom: 20px;
    border-radius: 26px;
}

transition: all .5s cubic-bezier(.42, 0, .58, 1);
border-radius: var(--border-radius);

h3 {
    transition: all .5s cubic-bezier(.42, 0, .58, 1);
    border-radius: 15px 15px 0px 0px;
    text-align: center;
    font-size: 17px;
    padding: 6px;
    margin-top: 34px;
}

}

.widget-continue-checkout:has([aria-expanded="false"]) {
    border-radius: var(--button-border-radius);
    transition: all .5s cubic-bezier(.42, 0, .58, 1);
    h3

{
    transition: all .5s cubic-bezier(.42, 0, .58, 1);
    border-radius: var(--button-border-radius);
}

}

/*=============================
	Checkout Shopping-cart
===============================*/
/*=============================
	Checkout Shopping-cart
===============================*/
.checkout {
    .able-grid-head.container-fluid

{
    border-top-right-radius: var(--border-radius);
    border-top-left-radius: var(--border-radius);
}

.able-grid-bordered {
    border: none;
}

.able-grid-body.container-fluid {
    background: #ffffff;
    border-radius: 0px 0px 15px 15px;
    box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.1);
}

.able-grid > .able-grid-body > .able-grid-row > .able-grid-col {
    border: none;
}

.able-grid > .able-grid-body > .able-grid-row {
    border-bottom: var(--border) var(--border-style) var(--border-width);
}

    .able-grid > .able-grid-body > .able-grid-row:last-of-type {
        border: none;
    }

.able-grid-col {
    align-content: center;
}

div.col-sm-8.col-sm-pull-4 > div > div.able-grid-body.container-fluid > div > div.col-xs-4.col-sm-3.able-grid-col {
    padding: 0px;
    margin: 0px;
    display: flex;
    justify-content: center;
}

.able-grid-content {
    padding: 0px;
    margin: 0px;
}

img {
    width: auto;
    height: 80px;
    border-radius: var(--border-radius);
}

div > div.col-sm-8.col-sm-pull-4 > div > div.able-grid-body.container-fluid > div > div.col-xs-6.col-sm-2.able-grid-col {
    text-align: center;
    align-content: center;
}

}

/*=============================
	Checkout Payment
===============================*/
.account-content :is(#paymentWidget) {
    background-color: #FFFFFF;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
    padding: 25px;
    border-radius: var(--border-radius);
    margin-top: -18px;
}

.column.col-md-12.main-content :has(#paymentWidget) {
    .able-grid-head.container-fluid.hidden-xs

{
    display: none;
}

.row.able-grid-row {
    /* display: flex; */
    background: var(--white);
    border-radius: var(--border-radius);
    margin: 10px 0;
    padding: 10px 0;
    border-bottom: none;
    box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.1);
    align-items: center;
}

#basket-form > div.box > div > div.col-sm-4.col-sm-offset-2 > ul > li {
    text-align: center;
    padding: 15px;
    border-radius: var(--border-radius);
    font-size: 25px;
    background: var(--white);
    box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.1);
}

.box {
    border: none;
}

.able-grid-bordered {
    border: 1px solid #ffffff00;
    margin-bottom: 10px;
}

    .able-grid-bordered .able-grid-head > .able-grid-row > .able-grid-col,
    .able-grid-bordered > .able-grid-body > .able-grid-row > .able-grid-col {
        border: 1px solid #dddddd00;
    }

.input-group:has(#CouponCode) {
    button

{
    border-radius: 0px 25px 25px 0px;
}

}
}

/*=============================
	Receipt Page
===============================*/
.column.col-md-12:has(.print-center) {
    .widget.boxed-widget

{
    .sidebar .widget

{
    margin-bottom: 20px;
    border-radius: var(--border-radius);
}

transition: all .5s cubic-bezier(.42, 0, .58, 1);
border-radius: var(--border-radius);

h3 {
    transition: all .5s cubic-bezier(.42, 0, .58, 1);
    border-radius: 15px 15px 0px 0px;
    text-align: center;
    font-size: 17px;
    padding: 6px;
    margin-top: 34px;
}

}

.widget.boxed-widget:has([aria-expanded="false"]) {
    border-radius: var(--button-border-radius);
    transition: all .5s cubic-bezier(.42, 0, .58, 1);
    h3

{
    transition: all .5s cubic-bezier(.42, 0, .58, 1);
    border-radius: var(--button-border-radius);
}

}

.able-grid-head.container-fluid.hidden-xs {
    border-radius: var(--border-radius);
    .row.able-grid-row

{
    /* display: flex; */
    background: #a76d6d00;
    border-radius: 0px;
    margin: 0px 0;
    padding: 0px 0;
    border-bottom: none;
    box-shadow: none;
    align-items: center;
}

#basket
}

.row.able-grid-row {
    /* display: flex; */
    background: var(--white);
    border-radius: var(--border-radius);
    margin: 10px 0;
    padding: 10px 0;
    border-bottom: none;
    box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.1);
    align-items: center;
}

#basket-form > div.box > div > div.col-sm-4.col-sm-offset-2 > ul > li {
    text-align: center;
    padding: 15px;
    border-radius: var(--border-radius);
    font-size: 25px;
    background: var(--white);
    box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.1);
}

.able-grid-bordered {
    border: 1px solid #ffffff00;
    margin-bottom: 10px;
}

    .able-grid-bordered .able-grid-head > .able-grid-row > .able-grid-col,
    .able-grid-bordered > .able-grid-body > .able-grid-row > .able-grid-col {
        border: 1px solid #dddddd00;
    }

}


/*=============================
	 Basket Notifier
  ===============================*/
#basket-notifier.hide {
    position: fixed;
    top: 0 !important;
    left: 0;
    right: 0;
    background-color: var(--white);
    border-radius: 0 0 15px 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    padding: 15px 20px;
    display: flex;
    gap: 15px;
    transform: translateY(-100%);
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 1002;
    margin: 0 auto;
    align-content: center;
}

#basket-notifier {
    transform: translateY(0);
    .col-xs-4.pull-left

{
    width: 100px;
    height: 100px;
    border-radius: var(--border-radius);
    background-color: #f0f4ff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    img

{
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

}

.col-sm-12 {
    display: flex;
    gap: 5px;
}

.row.p-lg {
    display: flex;
    align-items: center;
}

}
/*=============================
	Sidebar MiniBasketPanel
  ===============================*/
/*=============================
	 MiniBasketPanel
  ===============================*/
#MiniBasketPanel {
    .ajax-delete-confirm-dialog

{
    /* position: static; */
    font-size: 0 !important;
    /* Hide text */
    padding: 6px !important;
    /* Adjust for icon sizing */
    background: transparent;
    border: none;
    /* margin-top: 106%; */
    /* margin-left: -1806%; */
    order: 1;
}

/* Font Awesome trash can icon */
.ajax-delete-confirm-dialog::after {
    font-family: "Font Awesome 5 Free";
    content: "\f057";
    color: #d60000;
    font-weight: 900;
    font-size: 24px;
    order: 1;
}

.btn.btn-xs.btn-block.btn-inverse {
    position: relative;
    font-size: 0 !important;
    padding: 6px !important;
    background: transparent;
    border: none;
}

    .btn.btn-xs.btn-block.btn-inverse::after {
        font-family: "Font Awesome 5 Free";
        content: "\f01e";
        color: #535353;
        font-weight: 900;
        font-size: 24px;
        transition: all .4s cubic-bezier(0.79, 0.33, 0.14, 0.53);
    }

    .btn.btn-xs.btn-block.btn-inverse:hover::after {
        transform: rotate(360deg);
        transition: all .4s cubic-bezier(0.79, 0.33, 0.14, 0.53);
    }

.quantity-controls {
    display: flex;
    align-items: center;
}

.quantity-btn {
    width: 24px;
    height: 24px;
    background: #e6e9ff;
    border: none;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.8rem;
    color: #4a6cf7;
}

.quantity-display {
    margin: 0 8px;
    font-weight: 600;
    font-size: 15px;
}

.basket-item {
    display: flex;
    padding: 12px 0;
    border-bottom: 1px solid #e6e9ff;
    align-items: center;
    align-content: center;
}

.item-price {
    color: #4a6cf7;
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 15px;
}

.title {
    font-weight: 600;
    margin-bottom: 5px;
    font-size: 18px;
}

.item-details {
    flex: 1;
}

.item-icon {
    img

{
    width: 60px;
    height: 70px;
    display: flex;
    justify-content: center;
    border-radius: var(--border-radius);
    margin-right: 12px;
    object-fit: cover;
    align-items: center;
}

}

.remove-item {
    display: flex;
    align-content: center;
    align-items: center;
}

}

/*=============================
	Sidebar Recently Viewed
===============================*/
.sidebar > .widget-recently-viewed {
    #products

{
    width: 100%;
    margin: 0px;
    padding: 0px;
    .col-xs-6.col-sm-4.col-md-12

{
    width: 100%;
    padding: 0px;
    display: flex;
    justify-content: center;
    .product-item

{
    width: fit-content;
    .btn-add-to-cart, .btn.btn-primary.btn-sm

{
    width: max-content;
}

}
}
}
}

/*=============================================
 			Custom Html
==============================================
	Expanding Panels 
 ✅
==============================================*/
/*=============================
	Expanding Panels 
  ===============================*/
#expanding-panels {
    height: 100vh;
    display: flex;
    margin: 0;
    padding: 0;
    *

{
    display: flex;
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
}

.container {
    height: 100vh;
}

.section {
    flex: 1;
    justify-content: center;
    align-items: center;
    height: 100%;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    color: #fff;
    transition: flex .4s ease;
    position: relative;
}

    .section:hover {
        flex: 2;
    }

@media (max-width: 1000px) {
    .section {
        transition: flex .7s ease;
    }

    #panel-1 {
        flex: 12;
    }

    &:hover {
        #panel-1

{
    flex: 1;
}

#panel-1:hover {
    flex: 12;
}

#panel-2:hover {
    flex: 12;
}

#panel-3:hover {
    flex: 12;
}

#panel-4:hover {
    flex: 12;
}

}
}

.section .overlay {
    background-color: rgb(0 0 0 / 55%);
    width: 100%;
    height: 100%;
    position: absolute;
    transition: background-color .8s ease;
}

.section .content {
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px;
}

.section {
    &:hover .overlay

{
    background-color: rgb(0 0 0 / 63%);
}

p {
    color: #ffffffc7;
}

.btn {
    opacity: 50%;
    scale: 120%;
    margin-top: 15px;
    sup

{
    top: 3.5px;
}

}

&:hover {
    p

{
    color: var(--white);
}

.btn {
    opacity: 100%;
}

}
}

#panel-1 {
    width: 463px;
    height: 695px;
    background-image: url(/Assets/ContentImages/panel-1.jpg);
}


#panel-2 {
    width: 463px;
    height: 695px;
    background-image: url(/Assets/ContentImages/panel-2.jpg);
}

#panel-3 {
    width: 463px;
    height: 695px;
    background-image: url(/Assets/ContentImages/panel-3.jpg);
}

#panel-4 {
    width: 463px;
    height: 695px;
    background-image: url(/Assets/ContentImages/panel-4.jpg);
}

}


/* ===== CUSTOM HEADER ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

/* ===== BODY STYLES ===== */
body {
    padding-top: 0px !important;
}

/* ===== LAYOUT CONTAINERS ===== */


/* Content overlay for modals/mobile menu */
/* ===== HEADER & NAVIGATION STYLES ===== */

/* Top Header with Account Info */
.top-header {
    background: var(--footer);
    color: var(--white);
    padding: var(--spacing-xs);
    padding-bottom: var(--spacing-xs);
    font-size: var(--font-size-small);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 1002;
    .contacts li

{
    color: #ffffff;
    i

{
    color: var(--white);
    border: none;
}

}
}

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

.account-info {
    display: flex;
    align-items: center;
    gap: 20px;
}

.account-links {
    display: flex;
    gap: 15px;
}

    .account-links a {
        color: rgba(255, 255, 255, 0.85);
        text-decoration: none;
        transition: color 0.3s;
        display: flex;
        align-items: center;
        gap: 5px;
    }

        .account-links a:hover {
            color: var(--white);
        }

/* Account Dropdown Styles */
.account-dropdown {
    position: relative;
    display: inline-block;
}

.account-dropdown-btn {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: var(--white);
    padding: 6px 12px;
    border-radius: var(--border-radius);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.3s;
}

    .account-dropdown-btn:hover {
        background: rgba(255, 255, 255, 0.25);
    }

.account-dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background: var(--white);
    min-width: 180px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    border-radius: var(--border-radius);
    z-index: 1005;
    overflow: hidden;
}

    .account-dropdown-content a {
        color: #4b5563;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        border-bottom: 1px solid #f1f5f9;
        transition: background 0.2s;
        text-align: left;
    }

        .account-dropdown-content a i {
            padding-right: 5px;
        }

        .account-dropdown-content a:last-child {
            border-bottom: none;
        }

        .account-dropdown-content a:hover {
            background: #f8fafc;
            color: var(--primary-dark);
        }

.account-dropdown:hover .account-dropdown-content {
    display: block;
}

/* Main Header Styles */

.header {
    position: sticky;
    top: 0;
    z-index: 999;
    height: 100%;
}
header.navbar > .container {
    height: 100%;
    align-content: center;
}
.header-container {
    max-width: 1200px;
    display: flex;
    justify-content: space-around;
}

/* Row layout for header */
.row:has(.header) {
    margin-right: 0px;
    margin-left: 0px;
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

    .row:has(.header) .column.col-sm-6.col-xs-6.col-md-12 > div:nth-child(1) {
        display: flex;
        align-content: center;
        align-items: center;
        justify-content: center;
        flex-wrap: nowrap;
    }

/* ===== LOGO STYLES ===== */
.logo {
    font-size: 26px;
    font-weight: 700;
    color: var(--primary-dark);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-icon {
    font-size: 30px;
}
.store-logo-sm .able-span {
    display: block;
}

.store-logo-sm .navbar-toggle {
    display: none;
}

.store-logo-sm .visible-xs.pull-right.navbar-brand {
    display: none !important;
}

#store-logo-container {
    z-index: 1003;
    position: sticky;
    /* float: none; */
    /* width: 150px; */
}

#store-header-compact .storeLogo {
    margin-top: 0px;
    
    
    
    
	img{
	width: auto;
	height: 65px;
	}
}
#store-menu{
	height:100%;
}
/* ===== NAVIGATION MENU STYLES ===== */
.nav-menu {
    display: flex;
    list-style: none;
    align-items: flex-end;
}

.nav-item {
    margin: 0 12px;
    position: relative;
}

.nav-link {
    text-decoration: none;
    color: #4b5563;
    font-weight: 500;
    padding: 10px 0;
    transition: color 0.3s;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .nav-link:hover {
        color: var(--primary-dark);
    }

#AdminMobile > div > ul > a {
    text-decoration: none;
    color: #4b5563;
    font-weight: 500;
    padding: 10px 0;
    transition: color 0.3s;
    display: flex;
    align-items: center;
    gap: 6px;
}

    #AdminMobile > div > ul > a:hover {
        color: var(--primary-dark);
    }

/* Dropdown Menu Styles */
.dropdown {
    position: relative;
}

.dropdown-content {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    min-width: 220px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    border-radius: var(--border-radius);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 100;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

    .dropdown-content .col-md-2 {
        width: unset;
        float: unset;
        position: unset;
        min-height: 1px;
        padding-right: unset;
        padding-left: unset;
    }

.dropdown:hover .dropdown-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-content li {
    display: block;
    padding: 7px 18px;
    text-decoration: none;
    color: #4b5563;
    border-bottom: 1px solid #f1f5f9;
    transition: background-color 0.2s;
    width: 100%;
}

    .dropdown-content li a {
        color: #4b5563;
    }

    .dropdown-content li:last-child {
        border-bottom: none;
    }

    .dropdown-content li:hover {
        background-color: #f8fafc;
        color: var(--primary-dark);
    }

.search-phrase.search-phrase-url
/* ===== SEARCH BAR STYLES ===== */
.search-container {
    display: flex;
    align-items: center;
}

.field-validation-error {
    position: absolute;
    background: var(--white);
    padding: 15px;
    border: #cc5965 3px solid;
    margin-top: 6px;
    border-radius: var(--border-radius);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

#search-form {
    background: #f1f5f9;
    border-radius: var(--button-border-radius);
    overflow: hidden;
    transition: all 0.3s;
    border: 1px solid transparent;
    border: none;
    width: 100%;
    margin-bottom: -25px;
}

    #search-form:focus-within {
        box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
        border-color: var(--primary-dark);
        border: none;
    }

.search-phrase.search-phrase-url {
    border: none;
    background: transparent;
    padding: 12px 16px;
    outline: none;
    color: #4b5563;
    font-size: 15px;
    max-width: 250px;
}

header.input-group-btn {
    background: var(--primary-dark);
    border: none;
    color: var(--white);
    cursor: pointer;
    transition: background-color 0.3s;
    border: none;
}

header.search-button:hover {
    background: #1d4ed8;
    border: none;
}

/* ===== SHOPPING CART STYLES ===== */

/* Cart Container & Button */
.cart-container,
.cart-button {
    position: relative;
    margin-left: 20px;
}

.cart-link,
.cart-button {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #4b5563;
    padding: 8px;
    border-radius: var(--border-radius);
    transition: all 0.3s;
    position: relative;
    border: none;
    z-index: 999;
}

    .cart-link:hover {
        background: #f1f5f9;
        color: var(--primary-dark);
    }

.cart-icon {
    font-size: 22px;
}

.cart-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #ef4444;
    color: var(--white);
    font-size: 12px;
    font-weight: 600;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
}

/* Cart Dropdown */
.cart-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--white);
    width: 320px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-radius: var(--border-radius);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    padding: 20px;
    height: auto;
    max-height: 50vw;
    overflow: scroll;
}

.cart-container:hover .cart-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.cart-dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e7eb;
}

.cart-dropdown-title {
    font-weight: 600;
    color: #1f2937;
    font-size: 16px;
}

.cart-dropdown-count {
    background: var(--primary-dark);
    color: var(--white);
    padding: 2px 8px;
    border-radius: var(--border-radius);
    font-size: 12px;
}

.cart-items {
    max-height: 250px;
    overflow-y: auto;
    margin-bottom: 15px;
}

.cart-item {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f3f4f6;
}

    .cart-item:last-child {
        border-bottom: none;
    }

.cart-item-image {
    width: 50px;
    height: 50px;
    background: #f1f5f9;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
}

.cart-item-details {
    flex: 1;
}

.cart-item-name {
    font-weight: 500;
    color: #374151;
    margin-bottom: 4px;
    font-size: 14px;
}

.cart-item-price {
    color: var(--primary-dark);
    font-weight: 600;
    font-size: 14px;
}

.cart-dropdown-footer {
    border-top: 1px solid #e5e7eb;
    padding-top: 15px;
}

.cart-total {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    font-weight: 600;
    color: #1f2937;
}

.cart-actions {
    display: flex;
    gap: 10px;
}

/* ===== BUTTON STYLES ===== */
.btn {
    padding: 10px 16px;
    border-radius: var(--button-border-radius);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
    flex: 1;
    text-decoration: none;
    display: block;
}

.btn-outline {
    border: 1px solid #d1d5db;
    background: var(--white);
    color: #374151;
}

    .btn-outline:hover {
        background: #f9fafb;
    }

.btn-primary {
    background: var(--primary-dark);
    color: var(--white);
    border: none;
}

    .btn-primary:hover {
        background: var(--hover-primary);
        border: none;
    }

/* ===== MOBILE STYLES ===== */

/* Mobile Menu Toggle */
.mobile-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #4b5563;
    padding: var(--spacing-sm);
    padding-bottom: 0px;
    margin-bottom: 8px;
    border-radius: var(--border-radius);
    transition: background 0.3s;
    z-index: 1000;
}

    .mobile-toggle:hover {
        background: #f1f5f9;
    }

/* Mobile Menu Header - Hidden by default */
.mobile-menu-header,
.nav-item.mobile-only {
    display: none;
}

/* Mobile Responsive Styles */
@media screen and (max-width: 768px) {
    #AdminMobile {
        display: none;
    }

    .hidden-xs {
        display: none !important;
    }
}

@media screen and (max-width: 969px) {
    .header-container {
        flex-wrap: wrap;
        padding: 10px 20px;
    }

    .logo {
        font-size: 22px;
        flex: 1;
    }

    #able-span {
        position: absolute;
        top: -9px;
        left: 24px;
        display: block !important;
    }

    .row:has(.header) {
        margin-right: 0px;
        margin-left: -15px;
        background-color: #fff;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

        .row:has(.header) .column.col-sm-6.col-xs-6.col-md-12 > div:nth-child(1) {
            display: flex;
            align-content: center;
            justify-content: flex-start;
            flex-wrap: wrap;
        }

    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 85%;
        max-width: 350px;
        height: 110vh;
        background: var(--white);
        flex-direction: column;
        align-items: flex-start;
        padding: 80px 25px 25px;
        box-shadow: -5px 0 25px rgba(0, 0, 0, 0.1);
        transition: right 0.4s ease;
        z-index: 1000;
        overflow-y: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

        /* Hide scrollbar for Chrome, Safari and Opera */
        .nav-menu::-webkit-scrollbar {
            display: none;
        }

        .nav-menu.active {
            right: 0;
        }

    .nav-item {
        margin: 0;
        width: 100%;
        text-align: left;
        border-bottom: 1px solid #f1f5f9;
    }

        .nav-item:last-child {
            border-bottom: none;
        }

    .nav-link {
        padding: 15px 0;
        width: 100%;
        justify-content: space-between;
        font-size: 16px;
    }

    .dropdown-content {
        position: static;
        box-shadow: none;
        background: #f8fafc;
        width: 100%;
        display: block;
        opacity: 1;
        visibility: visible;
        transform: none;
        border-radius: 0;
        margin-top: 0;
        padding-left: 15px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out, opacity 0.4s ease-out;
    }

    /* Enhanced mobile dropdown display with smooth transitions */
    .dropdown.active .dropdown-content {
        max-height: 500px;
        opacity: 1;
        transition: max-height 0.3s ease-in, opacity 0.3s ease-in;
    }

    .dropdown:not(.active) .dropdown-content {
        max-height: 0;
        opacity: 0;
        transition: max-height 0.8s ease-out, opacity 0.6s ease-out;
    }

    .dropdown.active .nav-link i.fa-chevron-down {
        transform: rotate(180deg);
        transition: transform 0.4s ease;
    }

    .dropdown:not(.active) .nav-link i.fa-chevron-down {
        transform: rotate(0deg);
        transition: transform 0.4s ease;
    }

    .dropdown-item {
        padding: 14px 0;
        border-bottom: 1px solid #e2e8f0;
        font-size: 15px;
        opacity: 0;
        transform: translateY(-10px);
        transition: opacity 0.4s ease, transform 0.4s ease;
    }

    .dropdown.active .dropdown-item {
        opacity: 1;
        transform: translateY(0);
        transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s;
    }

    .dropdown:not(.active) .dropdown-item {
        opacity: 0;
        transform: translateY(-10px);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .dropdown-item:last-child {
        border-bottom: none;
    }

    /* Mobile header layout */
    .mobile-header-top {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        width: 90vw;
        padding-right: 2%;
        padding-left: 2%;
        padding-bottom: 15px;
        align-items: center;
    }

    .mobile-cart-container {
        margin: 0 15px;
    }

    .mobile-toggle {
        display: block;
    }

    .mobile-search-container {
        width: 100%;
        margin-top: -20px;
    }

    .mobile-search-box {
        width: 100%;
    }

        .mobile-search-box .search-input {
            width: 100%;
        }

    .search-container.desktop-only {
        display: none;
    }

    .cart-container.desktop-only {
        display: none;
    }

    .top-header {
        display: none;
    }

    /* Mobile menu header - Only visible on mobile when active */
    .mobile-menu-header {
        position: fixed;
        display: flex;
        top: -100%;
        background: var(--white);
        box-shadow: -5px 0 25px rgba(0, 0, 0, 0.1);
        transition: top 0.3s ease-in-out;
        width: 100%;
        background: var(--white);
        padding: 15px 20px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        z-index: 1003;
        align-items: center;
        justify-content: space-between;
    }

        .mobile-menu-header.active {
            display: flex;
            justify-content: flex-end;
            top: 0;
            transition: top 0.6s ease-in-out;
        }

    .mobile-logo {
        font-size: 20px;
        font-weight: 700;
        color: var(--primary-dark);
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .mobile-close {
        background: none;
        border: none;
        font-size: 22px;
        color: #4b5563;
        cursor: pointer;
        padding: 5px;
        border-radius: var(--border-radius);
        transition: background 0.3s;
    }

        .mobile-close:hover {
            background: #f1f5f9;
        }
}

/* Desktop only elements */
@media screen and (min-width: 969px) {
    .mobile-search-container {
        display: none;
    }

    .mobile-cart-container {
        display: none;
    }
}

/* ===== CONTENT STYLES ===== */
.content {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    position: relative;
    z-index: 1;
    transition: filter 0.3s ease;
}

    .content.dimmed {
        filter: brightness(0.7);
    }

h1 {
    font-size: 36px;
    margin-bottom: 20px;
    color: #1e293b;
    font-weight: 700;
}

p {
    margin-bottom: 20px;
    color: #64748b;
    font-size: 18px;
}

/* ===== FEATURE CARDS STYLES ===== */
.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin-top: 40px;
}

.feature-card {
    background: var(--white);
    border-radius: var(--border-radius);
    padding: 25px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s, box-shadow 0.3s;
}

    .feature-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    }

    .feature-card h3 {
        color: var(--primary-dark);
        margin-bottom: 15px;
        font-size: 20px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .feature-card p {
        color: #64748b;
        font-size: 16px;
    }

/* ===== SHOPPING CART BASKET STYLES ===== */

/* Cart Dropdown Body */
.cart-dropdown-body {
    /* Basket Simplified Styles */
    #basketContent .table-products.cart-row

{
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #dadada;
    position: relative;
    align-items: center;
}

/* Image column - improved sizing */
#basketContent .table-products.cart-row .cart-col:first-child {
    width: 100%;
    text-align: center;
}

    #basketContent .table-products.cart-row .cart-col:first-child img {
        width: 100%;
        object-fit: cover;
        border-radius: var(--border-radius);
        border: 1px solid #f0f0f0;
    }

    #basketContent .table-products.cart-row .cart-col:first-child .noThumbnail {
        width: 100px;
        height: 100px;
        background: #f8f9fa;
        border: 1px dashed #ddd;
        border-radius: var(--border-radius);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #999;
    }

/* Product name column */
#basketContent .table-products.cart-row .cart-col:nth-child(2) {
    min-width: 190px;
    padding-right: 15px;
}

    #basketContent .table-products.cart-row .cart-col:nth-child(2) h4 {
        margin: 0 0 5px 0;
        font-size: 16px;
        line-height: 1.3;
    }

/* Price column - removed "each" label */
#basketContent .table-products.cart-row .cart-col:nth-child(3) {
    text-align: center;
    padding-right: 5px;
}

    #basketContent .table-products.cart-row .cart-col:nth-child(3) h4 {
        margin: 0;
        font-size: 16px;
        font-weight: bold;
    }

        /* Hide "each" label */
        #basketContent .table-products.cart-row .cart-col:nth-child(3) h4 small.visible-xs {
            display: none !important;
        }

/* Quantity column */
#basketContent .table-products.cart-row .cart-col:nth-child(4) {
    flex: 0 0 150px;
    text-align: center;
}

#basketContent .quantity {
    display: flex;
    justify-content: center;
    align-items: center;
}

#basketContent .product-quantity {
    display: flex;
    align-items: center;
    border-radius: var(--border-radius);
    overflow: hidden;
}

    #basketContent .product-quantity .btn-default {
        border: none;
        background: #ececec;
        padding: 5px 12px;
        cursor: pointer;
        transition: background-color 0.2s;
        color: #9e9e9e;
        font-size: 20px;
    }

        #basketContent .product-quantity .btn-default:hover {
            background: #e9ecef;
        }

    #basketContent .product-quantity .form-control {
        border: none;
        border-radius: 0;
        text-align: center;
        width: 60px;
        margin: 0;
        padding: 8px 5px;
    }

/* Total column */
#basketContent .table-products.cart-row .cart-col:nth-child(5) {
    flex: 0 0 70px;
    margin-top: -15px;
}

    #basketContent .table-products.cart-row .cart-col:nth-child(5) h4 {
        margin: 0;
        font-size: 16px;
        font-weight: bold;
        color: #2c3e50;
    }

/* Delete button as X */
#basketContent .delete-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border: none;
    background: #dc3545;
    color: var(--white);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    transition: all 0.2s ease;
    text-decoration: none;
    z-index: 10;
}

    #basketContent .delete-btn:hover {
        background: #c82333;
        transform: scale(1.1);
        color: var(--white);
        text-decoration: none;
    }

/* Dropdown menu styles */
#basketContent .cart-item-dropdown {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
}

#basketContent .dropdown-toggle {
    width: 30px;
    height: 30px;
    border: none;
    background: #6c757d;
    color: var(--white);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.2s ease;
}

    #basketContent .dropdown-toggle:hover {
        background: #5a6268;
        transform: scale(1.1);
    }

#basketContent .dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--white);
    border: 1px solid #ddd;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    min-width: 120px;
    padding: 5px 0;
    margin-top: 5px;
    display: none;
}

    #basketContent .dropdown-menu.show {
        display: block;
    }

#basketContent .dropdown-item {
    display: block;
    width: 100%;
    padding: 8px 15px;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    transition: background-color 0.2s;
}

    #basketContent .dropdown-item:hover {
        background: #f8f9fa;
        text-decoration: none;
        color: #333;
    }

    #basketContent .dropdown-item.delete {
        color: #dc3545;
    }

        #basketContent .dropdown-item.delete:hover {
            background: #dc3545;
            color: var(--white);
        }

/* Remove borders and background from all cart columns */
#basketContent .cart-col {
    border: none !important;
    background: none !important;
}

/* Hide cart header */
#basketContent .cart-head {
    display: none !important;
}

/* Remove top margin from product details */
#basketContent .table-products.cart-row .cart-col.text-left h4:first-child {
    margin-top: 0;
}

/* Style for product name links */
#basketContent .table-products.cart-row .cart-col.text-left a {
    color: #2c3e50;
    text-decoration: none;
}

    #basketContent .table-products.cart-row .cart-col.text-left a:hover {
        color: #3498db;
        text-decoration: underline;
    }

/* Hide elements that were removed */
#basketContent .table-products.cart-row .cart-col.text-left h4 small:first-child,
#basketContent .table-products.cart-row .cart-col.text-left h4 small:nth-child(2) {
    display: none;
}

/* Ensure SKU is styled appropriately if shown */
#basketContent .table-products.cart-row .cart-col.text-left h4:nth-child(3) {
    font-size: 14px;
    color: #666;
    font-weight: normal;
    margin-top: 5px;
}

/* Mobile responsiveness for basket */
@media screen and(max-width: 768px) {
    #basketContent .table-products.cart-row {
        flex-direction: column;
        text-align: center;
        padding: 20px 0;
        position: relative;
    }

        #basketContent .table-products.cart-row .cart-col {
            flex: 1 1 100% !important;
            padding: 5px 0;
            text-align: center !important;
        }

            #basketContent .table-products.cart-row .cart-col:first-child {
                padding-right: 0;
                margin-bottom: 10px;
            }

            #basketContent .table-products.cart-row .cart-col:nth-child(2) {
                order: -1;
                margin-bottom: 10px;
            }

    #basketContent .quantity {
        justify-content: center;
    }

    #basketContent .delete-btn,
    #basketContent .cart-item-dropdown {
        position: absolute;
        top: 15px;
        right: 15px;
    }

    /* Stack quantity controls vertically on very small screens */
    @media screen and (max-width: 480px) {
        #basketContent .product-quantity {
            flex-direction: column;
            border: none;
        }

            #basketContent .product-quantity .btn-default {
                border: 1px solid #ddd;
                margin: 2px 0;
            }

            #basketContent .product-quantity .form-control {
                border: 1px solid #ddd;
                margin: 2px 0;
            }
    }
}

/* Button styles for remaining actions */
#basketContent .btn-inverse,
#basketContent .btn-warning {
    margin: 5px;
    padding: 10px 20px;
}

/* Order total section */
#basketContent .order-total {
    background: #f8f9fa;
    padding: 20px;
    border-radius: var(--border-radius);
    margin: 20px 0;
}

    #basketContent .order-total li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;
        font-size: 18px;
        font-weight: bold;
    }

    #basketContent .order-total .total {
        color: #e74c3c;
        font-size: 20px;
    }

/* Checkout button */
#basketContent .btn-primary.btn-lg {
    padding: 12px 30px;
    font-size: 18px;
    margin-top: 20px;
}

#basketContent .btn-warning.btn.ajax-delete-confirm-dialog,
#basketContent .btn.btn-inverse,
#basketContent .clearfix {
    display: none;
}

#basketContent .col-sm-4.col-sm-offset-2 {
    width: 100%;
    float: right;
}

#basketContent #basket-form > div.row > div:nth-child(2) {
    display: none;
}

#basketContent #basket-form > div.row > div:nth-child(1) {
    width: 100%;
}

}

/* Cart dropdown scrollbar styling */
.cart-dropdown-body {
    /* overflow-y: auto; */
    /* height: 40vw; */
    /* overflow: auto; */
}

.cart-dropdown::-webkit-scrollbar {
    width: 5px;
    height: 95%;
}

.cart-dropdown::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius);
}

.cart-dropdown::-webkit-scrollbar-thumb {
    background: #9f9f9f;
    border-radius: var(--border-radius);
}

    .cart-dropdown::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.5);
    }

/* ===== MOBILE CART STYLES ===== */

/* Mobile Cart Container */
.mobile-cart-container {
    position: relative;
    margin-left: 20px;
}

/* Hide the checkbox */
.mobile-cart-toggle {
    display: none;
}

/* Cart Button */
.mobile-cart-button {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #4b5563;
    padding: 8px;
    border-radius: var(--border-radius);
    transition: all 0.3s;
    position: relative;
    cursor: pointer;
}

    .mobile-cart-button:hover {
        background: #f1f5f9;
        color: var(--primary-dark);
    }

    .mobile-cart-button .fa-shopping-cart {
        font-size: 22px;
    }

/* Cart Overlay */
.mobile-cart-content {
    position: fixed;
    top: 0;
    right: -100%;
    width: 85%;
    max-width: 400px;
    height: 100vh;
    background: var(--white);
    box-shadow: -5px 0 25px rgba(0, 0, 0, 0.1);
    transition: right 0.4s ease;
    z-index: 1003;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

    /* Show cart when checkbox is checked */

    .mobile-cart-content.active {
        right: 0px;
    }

/* Prevent body scrolling when cart is open */
.mobile-cart-toggle:checked ~ .mobile-cart-backdrop {
    pointer-events: auto;
}

/* Cart Header */
.mobile-cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #e5e7eb;
    background: var(--white);
    position: sticky;
    top: 0;
    z-index: 1;
}

.mobile-cart-title {
    font-size: 20px;
    font-weight: 700;
    color: #1f2937;
}

.mobile-cart-close {
    background: none;
    border: none;
    font-size: 22px;
    color: #4b5563;
    cursor: pointer;
    padding: 5px;
    border-radius: var(--border-radius);
    transition: background 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .mobile-cart-close:hover {
        background: #f1f5f9;
    }

/* Hide scrollbar for mobile cart */
.mobile-cart-items {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

    .mobile-cart-items::-webkit-scrollbar {
        display: none;
    }

/* Hide on desktop */
@media screen and (min-width: 969px) {
    .mobile-cart-container {
        display: none;
    }
}

/* Mobile-specific styles */
@media screen and (max-width: 968px) {
    .mobile-cart-container {
        margin: 0 15px;
    }

    /* Prevent body scroll when cart is open */
    body:has(.mobile-cart-toggle:checked) {
        overflow: hidden;
    }
}

.mobile-cart-content {
    padding: 20px;
    padding-top: 0px;
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    top: 0px;
    border-radius: 0px 0px 0px 10px;
    width: 70vw;
    height: 210vw;
    z-index: 1005;
}

.mobile-cart-items {
    flex: 1;
    overflow-y: scroll;
    margin-bottom: 20px;
    height: 115vw;
}

.mobile-cart-footer {
    border-top: 1px solid #e5e7eb;
    padding-top: 20px;
}

/* Mobile cart basket content styles */
.mobile-cart-items #basketContent .table-products.cart-row {
    display: flex;
    border-bottom: 1px solid #dadada;
    position: relative;
    align-items: center;
    flex-wrap: wrap;
}

    .mobile-cart-items #basketContent .table-products.cart-row .cart-col:first-child {
        width: 100%;
        text-align: center;
    }

        .mobile-cart-items #basketContent .table-products.cart-row .cart-col:first-child img {
            width: 100%;
            object-fit: cover;
            border-radius: var(--border-radius);
            border: 1px solid #f0f0f0;
        }

        .mobile-cart-items #basketContent .table-products.cart-row .cart-col:first-child .noThumbnail {
            width: 100px;
            height: 100px;
            background: #f8f9fa;
            border: 1px dashed #ddd;
            border-radius: var(--border-radius);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
        }

    /* Product name column */
    .mobile-cart-items #basketContent .table-products.cart-row .cart-col:nth-child(2) {
        width: 150px;
        padding-right: 15px;
    }

        .mobile-cart-items #basketContent .table-products.cart-row .cart-col:nth-child(2) h4 {
            margin: 0 0 5px 0;
            font-size: 16px;
            line-height: 1.3;
        }

    /* Price column - removed "each" label */
    .mobile-cart-items #basketContent .table-products.cart-row .cart-col:nth-child(3) {
        text-align: right;
    }

        .mobile-cart-items #basketContent .table-products.cart-row .cart-col:nth-child(3) h4 {
            margin: 0;
            font-size: 16px;
            font-weight: bold;
        }

            .mobile-cart-items #basketContent .table-products.cart-row .cart-col:nth-child(3) h4 span {
                color: #4771c0;
            }

            /* Hide "each" label */
            .mobile-cart-items #basketContent .table-products.cart-row .cart-col:nth-child(3) h4 small.visible-xs {
                display: none !important;
            }

    /* Quantity column */
    .mobile-cart-items #basketContent .table-products.cart-row .cart-col:nth-child(4) {
        margin-bottom: -50px;
    }

.mobile-cart-items #basketContent .product-quantity {
    display: flex;
    align-items: center;
    border-radius: var(--border-radius);
    overflow: hidden;
}

    .mobile-cart-items #basketContent .product-quantity .btn-default {
        border: none;
        background: #ececec;
        padding: 5px 12px;
        cursor: pointer;
        transition: background-color 0.2s;
        color: #9e9e9e;
        font-size: 20px;
    }

        .mobile-cart-items #basketContent .product-quantity .btn-default:hover {
            background: #bfc3c8;
        }

    .mobile-cart-items #basketContent .product-quantity .form-control {
        border: none;
        border-radius: 0;
        text-align: center;
        width: 40px;
        margin: 0;
        padding: 8px 5px;
    }

/* Total column */
.mobile-cart-items #basketContent .table-products.cart-row .cart-col:nth-child(5) {
    flex: 0 0 70px;
    margin-top: -15px;
}

    .mobile-cart-items #basketContent .table-products.cart-row .cart-col:nth-child(5) h4 {
        margin: 0;
        font-size: 16px;
        font-weight: bold;
        color: #2c3e50;
    }

/* Dropdown menu styles */
.mobile-cart-items #basketContent .cart-item-dropdown {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
}

.mobile-cart-items #basketContent .dropdown-toggle {
    width: 30px;
    height: 30px;
    border: none;
    background: #6c757d;
    color: var(--white);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.2s ease;
}

    .mobile-cart-items #basketContent .dropdown-toggle:hover {
        background: #5a6268;
        transform: scale(1.1);
    }

.mobile-cart-items #basketContent .dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--white);
    border: 1px solid #ddd;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    min-width: 120px;
    padding: 5px 0;
    margin-top: 5px;
    display: none;
}

    .mobile-cart-items #basketContent .dropdown-menu.show {
        display: block;
    }

.mobile-cart-items #basketContent .dropdown-item {
    display: block;
    width: 100%;
    padding: 8px 15px;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    transition: background-color 0.2s;
}

    .mobile-cart-items #basketContent .dropdown-item:hover {
        background: #f8f9fa;
        text-decoration: none;
        color: #333;
    }

    .mobile-cart-items #basketContent .dropdown-item.delete {
        color: #dc3545;
    }

        .mobile-cart-items #basketContent .dropdown-item.delete:hover {
            background: #dc3545;
            color: var(--white);
        }

/* Remove borders and background from all cart columns */
.mobile-cart-items #basketContent .cart-col {
    border: none !important;
    background: none !important;
}

/* Hide cart header */
.mobile-cart-items #basketContent .cart-head {
    display: none !important;
}

/* Remove top margin from product details */
.mobile-cart-items #basketContent .table-products.cart-row .cart-col.text-left h4:first-child {
    margin-top: 0;
}

/* Style for product name links */
.mobile-cart-items #basketContent .table-products.cart-row .cart-col.text-left a {
    color: #2c3e50;
    text-decoration: none;
}

    .mobile-cart-items #basketContent .table-products.cart-row .cart-col.text-left a:hover {
        color: #3498db;
        text-decoration: underline;
    }

/* Hide elements that were removed */
.mobile-cart-items #basketContent .table-products.cart-row .cart-col.text-left h4 small:first-child,
.mobile-cart-items #basketContent .table-products.cart-row .cart-col.text-left h4 small:nth-child(2) {
    display: none;
}

/* Ensure SKU is styled appropriately if shown */
.mobile-cart-items #basketContent .table-products.cart-row .cart-col.text-left h4:nth-child(3) {
    font-size: 14px;
    color: #666;
    font-weight: normal;
    margin-top: 5px;
}

#AdminMobile {
    display: none;
}

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

    .mobile-cart-items #basketContent .visible-xs {
        display: none !important;
    }
}

@media screen and (max-width: 969px) {
    #AdminMobile {
        display: block;
    }
}

/* Mobile responsiveness */
@media screen and (min-width: 900px) and (max-width: 969px) {
    .row:has(.header) .column.col-sm-6.col-xs-6.col-md-12 {
        width: unset;
    }
}

@media screen and (min-width: 968px) and (max-width: 969px) {
    #able-span {
        position: absolute;
        top: -59px;
        left: 24px;
        display: block !important;
    }
}

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

    .mobile-cart-items #basketContent .delete-btn,
    .mobile-cart-items #basketContent .cart-item-dropdown {
        position: absolute;
        top: 15px;
        right: 15px;
    }
}

/* Button styles for remaining actions */
.mobile-cart-items #basketContent .btn-inverse,
.mobile-cart-items #basketContent .btn-warning {
    margin: 5px;
    padding: 10px 20px;
}

/* Order total section */
.mobile-cart-items #basketContent .order-total {
    background: #f8f9fa;
    padding: 9px;
    border-radius: var(--border-radius);
    margin: 0px 0;
}

    .mobile-cart-items #basketContent .order-total li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;
        font-size: 18px;
        font-weight: bold;
    }

    .mobile-cart-items #basketContent .order-total .total {
        color: #e74c3c;
        font-size: 20px;
    }

/* Checkout button */
.mobile-cart-items #basketContent .btn-primary.btn-lg {
    padding: 12px 30px;
    font-size: 18px;
    margin-top: 20px;
}

.mobile-cart-items #basketContent .btn-warning.btn.ajax-delete-confirm-dialog,
.mobile-cart-items #basketContent .btn.btn-inverse,
.mobile-cart-items #basketContent .clearfix {
    display: none;
}

.mobile-cart-items #basketContent .col-sm-4.col-sm-offset-2 {
    width: 100%;
    float: right;
}

.mobile-cart-items #basketContent #basket-form > div.row > div:nth-child(2) {
    display: none;
}

.mobile-cart-items #basketContent #basket-form > div.row > div:nth-child(1) {
    width: 100%;
    display: none;
}

.widget-preview-overlay {
    position: fixed;
    z-index: 10000;
    background: var(--white);
    border: 1px solid #ccc;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    max-width: 400px;
}

    .widget-preview-overlay .preview-header {
        background: #2c3e50;
        color: var(--white);
        padding: 8px 12px;
        border-bottom: 1px solid #34495e;
        font-weight: bold;
        font-size: 12px;
    }

    .widget-preview-overlay .preview-content {
        padding: 15px;
        background: var(--white);
    }

/* Ensure the preview doesn't interfere with other elements */
.widget-config-toolbar {
    position: relative;
}

.widget-img {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    transition: all 0.3s ease;
}

    .widget-img.active {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        transform: scale(1.05);
        border: 2px solid #4a6ee0;
    }

.widget-img-container {
    opacity: 0;
    display: none;
}

    .widget-img-container:has(.widget-img.active) {
        position: fixed;
        left: 250px;
        z-index: 1111;
        opacity: 1;
        display: block;
        top: 115px;
        background: var(--white);
        padding: 5px;
        border-radius: var(--border-radius);
        box-shadow: 0 4px 12px rgb(0 0 0 / 30%);
    }
/*=============================
   Checkbox
=============================*/
.checkbox input[type=checkbox],
.radio input[type=radio] {
    display: none;
}

.checkbox > label,
.radio > label {
    padding-left: 28px;
    font-weight: 600;
    color: #777777;
    font-size: 15px;
    cursor: pointer;
    position: relative;
    display: inline-block;
    line-height: 1.4;
}

    .checkbox > label:before,
    .radio > label:before {
        content: "";
        width: 20px;
        height: 20px;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        background-color: #FFFFFF;
        border: 2px solid #D0D0D0;
        border-radius: var(--button-border-radius);
        transition: all 0.2s ease-in-out;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    .checkbox > label:hover:before {
        border-color: #a0a0a0;
        box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    }

.checkbox > input[type=checkbox]:checked + label:before,
.checkbox > input[type=checkbox]:checked + input[type=hidden] + label:before,
.radio > input[type=radio]:checked + label:before {
    background-color: #4CAF50;
    border-color: #4CAF50;
    content: "✓";
    color: var(--white);
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    line-height: 20px;
    box-shadow: 0 2px 5px rgba(76, 175, 80, 0.3);
}

.checkbox > input[type=checkbox]:checked + label:after {
    content: "";
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 6px;
    height: 10px;
    border: solid var(--white);
    border-width: 0 2px 2px 0;
    border-radius: var(--button-border-radius);
}

.checkbox.disabled > input[type=checkbox]:disabled + label:before,
.radio.disabled > input[type=radio]:disabled + label:before {
    background-color: #F5F5F5;
    border-color: #E0E0E0;
    cursor: not-allowed;
    box-shadow: none;
}

.checkbox.disabled > input[type=checkbox]:disabled + label {
    color: #B0B0B0;
    cursor: not-allowed;
}
/*=============================
    Coupon Panel
=============================*/
#applyCouponPanel {
    #CouponCode

{
    height: 43px;
}

.btn.btn-primary {
    height: 43px;
}

}
/*=============================
    Payment page
=============================*/
.account-content:has(p.pull-left.m-r-md) {
    .row p

{
    max-width: 145px;
}

}
/*=============================
Billing Shipping Payment Timeline
=============================*/
.account-content:has(.progress) {
    background: var(--white);
    border-radius: var(--button-border-radius);
    padding: 0px;
    padding-top: 15px;
}
/*=============================
    My Orders
=============================*/
.row.content:has(.view-button) {
    max-width: none;
    padding: unset;
}

.account-content:has(.view-button) {
    background: var(--white);
    border-radius: var(--border-radius);
    box-shadow: -1px 4px 30px 7px rgba(0, 0, 0, 0.05);
    padding: 0;
    h3

{
    padding: 20px;
    border-bottom: 3px solid #40434766;
    margin-bottom: 0;
    font-size: 23px;
    border-radius: 15px 14px 0px 0px;
}

.message {
    background-color: #e6e6ea;
    padding: 20px;
    /* border-bottom: 1px solid #eaeef5; */
    margin-bottom: 0;
}

.able-grid.able-grid-bordered {
    border-radius: var(--border-radius);
    border: none;
}

.able-grid-head.container-fluid.hidden-xs {
    display: none;
}

.row.able-grid-row {
    border-bottom: 2px solid #eaeef5;
    transition: background-color 0.3s;
}

.col-xs-6.col-sm-2.able-grid-col:first-child {
    border-right: var(--secondary) 4px solid;
    border: none;
    text-align: center;
    width: min-content;
    align-content: center;
    background: #f2f2f2;
}

.col-xs-12.col-sm-3.able-grid-col:nth-child(5) {
    font-size: 14px;
    height: 100px;
    overflow-y: scroll;
}

.col-xs-6.col-sm-2.able-grid-col {
    align-content: center;
}

.view-button {
    align-content: center;
}

.able-grid > .able-grid-body > .able-grid-row > .able-grid-col {
    border: none;
}

}
/*=============================
	Subscriptions
=============================*/
.row.content:has(#subscriptionPageContents) {
    max-width: none;
    padding: unset;
}

#subscriptionPageContents > .account-content {
    background: var(--white);
    border-radius: var(--button-border-radius);
    box-shadow: -1px 4px 30px 7px rgba(0, 0, 0, 0.05);
    padding: 0;
    h3

{
    padding: 20px;
    border-bottom: 3px solid #40434766;
    margin-bottom: 0;
    font-size: 23px;
    background-color: #e6e6ea;
    border-radius: 15px 14px 0px 0px;
}

p {
    display: none;
}

.able-grid.able-grid-bordered {
    border-radius: var(--border-radius);
    border: none;
}

.able-grid-head.container-fluid.hidden-xs {
    background: transparent;
}


.able-grid .able-grid-head a {
    color: #555555;
}

.able-grid > .able-grid-head > .able-grid-row > .able-grid-col {
    border: none;
}

.row.able-grid-row {
    border: none;
    border-bottom: 2px solid #eaeef5;
    transition: background-color 0.3s;
    justify-content: space-evenly;
}

.col-xs-12.col-sm-1.able-grid-col.item:first-child {
    text-align: center;
    width: min-content;
    align-content: center;
    margin-left: 15px;
}

.col-xs-12.col-sm-1.able-grid-col:first-child {
    text-align: center;
    width: min-content;
    align-content: center;
    /* background: #f2f2f2; */
}

.able-grid-col:nth-child(3) {
    font-size: 14px;
}

.col-xs-6.col-sm-2.able-grid-col {
    width: max-content;
    align-content: center;
}

.able-grid > .able-grid-body > .able-grid-row > .able-grid-col {
    border: none;
    align-content: center;
    font-size: 15px;
}

}
/*=============================
	Wishlist page
=============================*/
.row.content:has(#wishlistSettings-container) {
    max-width: none;
    padding: unset;
}

.account-content:has(.wishlist-actions) {
    background: var(--white);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: 0;
    h3

{
    padding: 20px;
    border-bottom: 3px solid #40434766;
    margin-bottom: 0;
    font-size: 23px;
}

textarea.form-control {
    height: 115px;
    border-radius: var(--border-radius);
}

p {
    display: none;
}

.able-grid.able-grid-bordered {
    border-radius: var(--border-radius);
    border: none;
}

.able-grid-head.container-fluid.hidden-xs {
    background: transparent;
}

.col-xs-5.col-sm-2.able-grid-col:nth-child(2) {
    margin-right: 97px;
}

.able-grid .able-grid-head a {
    color: #555555;
}

.able-grid > .able-grid-head > .able-grid-row > .able-grid-col {
    border: none;
    color: gray;
}

.row.able-grid-row {
    border: none;
    border-bottom: 2px solid #eaeef5;
    transition: background-color 0.3s;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

    .row.able-grid-row:last-child {
        border: none;
    }

.col-xs-12.col-sm-1.able-grid-col.item:first-child {
    text-align: center;
    width: min-content;
    align-content: center;
    margin-left: 15px;
}

.col-xs-12.col-sm-1.able-grid-col:first-child {
    text-align: center;
    width: min-content;
    align-content: center;
    /* background: #f2f2f2; */
}

.able-grid-col:nth-child(3) {
    font-size: 14px;
}

.col-xs-6.col-sm-2.able-grid-col {
    width: max-content;
    align-content: center;
}

.able-grid > .able-grid-body > .able-grid-row > .able-grid-col {
    border: none;
    align-content: center;
    font-size: 15px;
}

.form-control {
    border-radius: var(--button-border-radius);
}

.col-xs-6.col-sm-2.able-grid-col:nth-child(4) {
    border-radius: var(--button-border-radius);
    width: min-content;
}

    .col-xs-6.col-sm-2.able-grid-col:nth-child(4) > div > .form-control {
        text-align: center;
        width: 63px;
    }

.btn {
    margin-top: 15px;
    width: max-content;
    float: right;
    margin-right: 15px;
}

}
/*=============================
	Address Book
=============================*/
#shipAddressBook {
    .btn

{
    margin-top: 15px;
    width: max-content;
    float: right;
    margin-right: 15px;
}

.box.box-display {
    width: max-content;
    height: fit-content !important;
    background: var(--white);
    border-radius: var(--border-radius);
}

}
/*=============================
	Product Reviews
=============================*/
.row.content:has(.product-rating) {
    max-width: none;
    padding: unset;
}

.account-content:has(.product-rating) {
    background: var(--white);
    border-radius: var(--border-radius);
    box-shadow: -1px 4px 30px 7px rgba(0, 0, 0, 0.05);
    padding: 0;
    h3

{
    padding: 20px;
    border-bottom: 3px solid #40434766;
    margin-bottom: 0;
    font-size: 20px;
    background-color: #e6e6ea;
    border-radius: 15px 14px 0px 0px;
}

.able-grid-col {
    align-content: center;
    text-align: center;
}

p {
    display: none;
}

.able-grid-head.container-fluid.hidden-xs {
    background: transparent;
}

.able-grid > .able-grid-head > .able-grid-row > .able-grid-col {
    color: gray;
}

.row.able-grid-row {
    border-bottom: 2px solid #eaeef5;
    transition: background-color 0.3s;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.btn {
    margin-bottom: 5px;
}

* {
    border: none !important;
}

}
/*=============================
	Tabs
=============================*/
#tabs {
    .nav.nav-tabs

{
    border: none;
    >li

{
    border-radius: var(--border-radius);
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    box-shadow: inset 0px -3px 9px rgba(0, 0, 0, 0.15);
    background: var(--white);
    a

{
    color: var(--text-h1);
    background: none;
    opacity: 1;
    border: none;
}

}

> li.active, > li.active:focus, > li.active:hover {
    background: var(--primary);
    border-radius: var(--border-radius);
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    box-shadow: none;
}

    > li.active > a, > li.active > a:focus, > li.active > a:hover {
        color: var(--white);
        background: unset;
    }

}

.tab-content {
    background: var(--primary);
    border-radius: var(--border-radius);
    border-top-left-radius: 0px;
    box-shadow: var(--box-shadow);
}
}