#loader {

    position: fixed;

    inset: 0;

    background: #090B10;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 99999;

    transition: .5s;

}

.loader-spinner {

    width: 55px;

    height: 55px;

    border-radius: 50%;

    border: 4px solid rgba(255, 255, 255, .1);

    border-top-color: #6C5CE7;

    animation: spin .8s linear infinite;

}

#loader.hide {

    opacity: 0;

    visibility: hidden;

}

@keyframes spin {

    to {

        transform: rotate(360deg);

    }

}


/* ================= NAVBAR ================= */

.header {

    position: sticky;

    top: 0;

    z-index: 1000;

}

.navbar {

    background: rgba(9, 11, 16, .75);

    backdrop-filter: blur(18px);

    border-bottom: 1px solid rgba(255, 255, 255, .05);

    padding: 18px 0;

}

.logo {

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 23px;

    font-weight: 800;

    color: white;

}

.logo i {

    color: var(--primary);

    font-size: 28px;

}

.nav-wrapper {

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex: 1;

    margin-left: 60px;

}

.nav-menu {

    display: flex;

    align-items: center;

    gap: 32px;

    margin: 0;

}

.nav-menu>li {

    position: relative;

}

.nav-menu a {

    color: var(--text-light);

    transition: .3s;

    font-weight: 500;

}

.nav-menu a:hover {

    color: white;

}

.search-box {

    width: 270px;

    height: 48px;

    background: var(--surface);

    border-radius: 14px;

    display: flex;

    align-items: center;

    padding: 0 16px;

    gap: 10px;

}

.search-box input {

    background: none;

    border: none;

    width: 100%;

    color: white;

}

.search-box input:focus {

    outline: none;

}

.nav-actions {

    display: flex;

    align-items: center;

    gap: 15px;

}

.icon-btn {

    width: 48px;

    height: 48px;

    border-radius: 14px;

    background: var(--surface);

    color: white;

    position: relative;

    transition: .3s;

}

.icon-btn:hover {

    background: var(--primary);

}

.cart-badge {

    position: absolute;

    right: -4px;

    top: -4px;

    width: 18px;

    height: 18px;

    border-radius: 50%;

    background: #ff3d5d;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 11px;

}

.mega-menu {

    position: absolute;

    top: 60px;

    left: 0;

    width: 520px;

    display: flex;

    gap: 50px;

    background: var(--surface);

    border: 1px solid var(--border);

    padding: 28px;

    border-radius: 18px;

    opacity: 0;

    visibility: hidden;

    transform: translateY(20px);

    transition: .3s;

    box-shadow: var(--shadow);

}

.mega-parent:hover .mega-menu {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}

.mega-column {

    display: flex;

    flex-direction: column;

    gap: 12px;

}

.mega-column h5 {

    color: white;

    margin-bottom: 12px;

    font-size: 17px;

}

.mobile-toggle {

    display: none;

}


/* ================= HERO ================= */

.hero-section {

    margin-top: 35px;

}

.hero-slider {

    overflow: hidden;

    border-radius: 22px;

}

.hero-slider img {

    height: 520px;

    object-fit: cover;

}

.hero-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: flex-start;

    padding: 70px;

    background: linear-gradient(90deg,
            rgba(0, 0, 0, .82),
            rgba(0, 0, 0, .25));
    direction: ltr;

}

.hero-tag {

    background: var(--primary);

    padding: 8px 18px;

    border-radius: 50px;

    margin-bottom: 20px;

    font-size: 14px;

}

.hero-overlay h1 {

    font-size: 52px;

    font-weight: 800;

    margin-bottom: 15px;

}

.hero-overlay p {

    color: var(--text-light);

    margin-bottom: 30px;

    font-size: 18px;

}

.hero-btn {

    background: var(--primary);

    color: white;

    padding: 14px 34px;

    border-radius: 12px;

    transition: .3s;

}

.hero-btn:hover {

    background: var(--primary-hover);

}

.side-banner {

    position: relative;

    overflow: hidden;

    border-radius: 20px;

    margin-bottom: 24px;

}

.side-banner img {

    height: 248px;

    width: 100%;

    object-fit: cover;

}

.banner-content {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: flex-end;

    padding: 30px;

    background: linear-gradient(transparent,
            rgba(0, 0, 0, .75));

}

.banner-content h4 {

    font-weight: 700;

}

/*=======================
    SECTION HEADER
=======================*/

.section-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 30px;

}

.section-header h2 {

    font-size: 28px;

    font-weight: 800;

}

.section-header a {

    color: var(--primary);

    display: flex;

    align-items: center;

    gap: 8px;

}

/*=======================
    CATEGORY
=======================*/

.category-section {

    margin-top: 70px;

}

.category-card {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    background: var(--surface);

    border: 1px solid transparent;

    border-radius: 18px;

    padding: 35px 20px;

    transition: .3s;

    height: 100%;

}

.category-card:hover {

    border-color: var(--primary);

    transform: translateY(-8px);

}

.category-icon {

    width: 70px;

    height: 70px;

    border-radius: 18px;

    background: #1c2231;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 30px;

    color: var(--primary);

    margin-bottom: 18px;

}

.category-card h5 {

    margin-bottom: 8px;

    font-size: 17px;

    font-weight: 700;

}

.category-card span {

    color: var(--text-light);

    font-size: 14px;

}

/*=========================
    PRODUCT CARD
=========================*/

.featured-products {

    margin-top: 80px;

}

.products-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));

    gap: 20px;

}

.product-card {

    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    background: var(--surface);
    border-radius: 18px;
    overflow: hidden;
    transition: .35s;
    border: 1px solid rgba(255, 255, 255, .05);
    padding: 16px;
}

.product-card:hover {

    transform: translateY(-10px);

    border-color: var(--primary);

}

.product-image {

    width: 100%;

    height: 180px;

    object-fit: contain;

    background: #0d1018;
    padding: 10px;
}

.product-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 16px;

}

.product-category {

    color: var(--secondary);

    font-size: 13px;

}

.product-body h3 {
    margin: 10px 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 54px;
}

.product-rating {

    display: flex;

    align-items: center;

    gap: 4px;

    color: #FFD43B;

    margin-bottom: 18px;

}

.product-rating span {

    color: var(--text-light);

    margin-right: 8px;

    font-size: 13px;

}

.product-price {

    display: flex;

    flex-direction: column;

    gap: 8px;
    margin-top: auto;
    margin-bottom: 14px;

}

.product-price del {

    color: #7E879D;

    font-size: 13px;

}

.product-price strong {

    color: #fff;

    font-size: 18px;

}

.discount-badge {

    position: absolute;

    top: 16px;

    right: 16px;

    background: #ff4d6d;

    color: #fff;

    padding: 6px 12px;

    border-radius: 30px;

    font-size: 12px;

    z-index: 2;

}

.wishlist-btn {

    position: absolute;

    left: 16px;

    top: 16px;

    width: 42px;

    height: 42px;

    border-radius: 50%;

    background: rgba(0, 0, 0, .45);

    color: #fff;

    backdrop-filter: blur(10px);

    transition: .3s;

}

.wishlist-btn:hover {

    background: var(--primary);

}

.add-cart-btn {

    width: 100%;
    height: 44px;
    background: var(--primary);
    color: #fff;
    border-radius: 12px;
    font-weight: 600;
    transition: .3s;
    margin-top: 0;

}

.add-cart-btn:hover {

    background: var(--primary-hover);

}

/*==========================
        FOOTER
==========================*/

.footer {

    margin-top: 100px;

    padding: 70px 0 25px;

    background: #0c0f16;

    border-top: 1px solid rgba(255, 255, 255, .06);

}

.footer-logo {

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 24px;

    font-weight: 800;

    margin-bottom: 20px;

}

.footer-logo i {

    color: var(--primary);

}

.footer-about p {

    color: var(--text-light);

    line-height: 2;

    margin-bottom: 25px;

}

.footer h5 {

    margin-bottom: 22px;

    font-weight: 700;

}

.footer ul {

    padding: 0;

    margin: 0;

}

.footer li {

    margin-bottom: 14px;

}

.footer li a {

    color: var(--text-light);

    transition: .3s;

}

.footer li a:hover {

    color: #fff;

    padding-right: 6px;

}

.social-links {

    display: flex;

    gap: 12px;

}

.social-links a {

    width: 42px;

    height: 42px;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--surface);

    transition: .3s;

}

.social-links a:hover {

    background: var(--primary);

}

.newsletter-text {

    color: var(--text-light);

    margin-bottom: 18px;

    line-height: 1.9;

}

.newsletter-form {

    display: flex;

    gap: 10px;

}

.newsletter-form input {

    flex: 1;

    height: 48px;

    border: none;

    border-radius: 12px;

    background: var(--surface);

    color: #fff;

    padding: 0 16px;

}

.newsletter-form input:focus {

    outline: none;

}

.newsletter-form button {

    padding: 0 20px;

    border-radius: 12px;

    background: var(--primary);

    color: #fff;

}

.footer-bottom {

    margin-top: 60px;

    border-top: 1px solid rgba(255, 255, 255, .06);

    padding-top: 25px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    color: var(--text-light);

    font-size: 14px;

}

/*==========================
      FEATURES
==========================*/

.features-section {

    margin-top: 90px;

}

.feature-card {

    background: var(--surface);

    border: 1px solid rgba(255, 255, 255, .05);

    border-radius: 20px;

    padding: 35px 28px;

    text-align: center;

    height: 100%;

    transition: .3s;

}

.feature-card:hover {

    transform: translateY(-8px);

    border-color: var(--primary);

}

.feature-icon {

    width: 70px;

    height: 70px;

    margin: 0 auto 20px;

    border-radius: 18px;

    background: rgba(108, 92, 231, .12);

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--primary);

    font-size: 28px;

}

.feature-card h4 {

    margin-bottom: 14px;

    font-size: 20px;

    font-weight: 700;

}

.feature-card p {

    color: var(--text-light);

    line-height: 1.9;

    margin: 0;

}


/*=========================
    PAGE HEADER
=========================*/

.products-page {

    padding: 40px 0 80px;

}

.page-header {

    margin-bottom: 40px;

}

.breadcrumb {

    display: flex;

    gap: 10px;

    color: var(--text-light);

    margin-bottom: 20px;

}

.breadcrumb a {

    color: var(--text-light);

}

.page-title {

    display: flex;

    justify-content: space-between;

    align-items: center;

}

.page-title h1 {

    font-size: 38px;

    font-weight: 800;

    margin-bottom: 10px;

}

.page-title p {

    color: var(--text-light);

    margin: 0;

}

/*=========================
    FILTER
=========================*/

.filter-sidebar {

    display: flex;

    flex-direction: column;

    gap: 20px;

}

.filter-box {

    background: var(--surface);

    border-radius: 18px;

    padding: 24px;

}

.filter-box input {
    background: var(--surface);
    border-color: var(--surface);
    color: white;
}

.filter-box input::placeholder {
    color: white;
}

.filter-box h5 {

    margin-bottom: 18px;

    font-weight: 700;

}

.filter-box ul {

    margin: 0;

    padding: 0;

}

.filter-box li {

    margin-bottom: 12px;

}

.filter-box label {

    display: flex;

    align-items: center;

    gap: 10px;

    cursor: pointer;

    color: var(--text-light);

}

/*=========================
    TOOLBAR
=========================*/

.products-toolbar {

    background: var(--surface);

    border-radius: 18px;

    padding: 18px 24px;

    margin-bottom: 30px;

    display: flex;

    justify-content: space-between;

    align-items: center;

}

.toolbar-actions {

    display: flex;

    gap: 15px;

}

.toolbar-actions select {

    background: #1b2130;

    border: none;

    color: #fff;

    padding: 10px 18px;

    border-radius: 10px;

}

.toolbar-actions select:focus {

    outline: none;

}

.product-card {

    background: var(--surface);

    border-radius: 18px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, .05);

    transition: .3s;

}

.product-card:hover {

    transform: translateY(-6px);

    border-color: var(--primary);

}

.product-image-wrapper {

    position: relative;

    overflow: hidden;

}

.product-image {

    width: 100%;

    height: 230px;

    object-fit: cover;

    transition: .4s;

}

.product-card:hover .product-image {

    transform: scale(1.06);

}

.product-body {

    padding: 20px;

}

.product-category {

    color: var(--secondary);

    font-size: 13px;

}

.product-body h3 {

    margin: 10px 0;

    font-size: 15px;

    font-weight: 700;

    line-height: 1.7;

    min-height: 62px;

}

.product-rating {

    color: #FFD43B;

    margin-bottom: 18px;

}

.product-rating span {

    color: var(--text-light);

    margin-right: 8px;

    font-size: 13px;

}

.product-price {

    display: flex;

    flex-direction: column;

    gap: 8px;

    margin-bottom: 18px;

}

.product-price del {

    color: #888;

    font-size: 14px;

}

.product-price strong {

    font-size: 20px;

}

.product-badge {

    position: absolute;

    top: 15px;

    right: 15px;

    background: #ff4d6d;

    color: #fff;

    padding: 5px 12px;

    border-radius: 30px;

    font-size: 12px;

    z-index: 5;

}

.add-cart-btn {

    width: 100%;

    height: 38px;

    border-radius: 12px;

    background: var(--primary);

    color: #fff;

    transition: .3s;

}

.add-cart-btn:hover {

    background: var(--primary-hover);

}

/*=========================
      QUICK FILTERS
=========================*/

.quick-filters {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 30px;

}

.filter-chip {

    padding: 11px 18px;

    border-radius: 50px;

    background: var(--surface);

    border: 1px solid rgba(255, 255, 255, .08);

    color: var(--text-light);

    transition: .3s;

    font-size: 14px;

    font-weight: 500;

}

.filter-chip:hover {

    background: var(--primary);

    border-color: var(--primary);

    color: #fff;

}

.filter-chip.active {

    background: var(--primary);

    color: #fff;

    border-color: var(--primary);

}

/*==========================
        PAGINATION
==========================*/

.pagination-wrapper {

    display: flex;

    justify-content: center;

    margin-top: 50px;

}

.pagination {

    display: flex;

    gap: 10px;

    padding: 0;

    margin: 0;

    list-style: none;

}

.pagination li a {

    width: 46px;

    height: 46px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 12px;

    background: var(--surface);

    color: #fff;

    transition: .3s;

}

.pagination li a:hover {

    background: var(--primary);

}

.pagination li.active a {

    background: var(--primary);

}

.empty-products {

    background: var(--surface);

    border-radius: 20px;

    padding: 80px 20px;

    text-align: center;

}

.empty-products i {

    font-size: 65px;

    color: var(--primary);

    margin-bottom: 25px;

}

.empty-products h3 {

    margin-bottom: 12px;

}

.empty-products p {

    color: var(--text-light);

    max-width: 450px;

    margin: auto;

}

.mobile-filter-btn {

    display: none;

}

/*=========================
    PRODUCT DETAIL
=========================*/

.product-page {

    padding: 50px 0 80px;

}

.product-gallery {

    background: var(--surface);

    border-radius: 20px;

    padding: 25px;

}

.main-image {

    background: #0d1018;

    border-radius: 18px;

    overflow: hidden;

    margin-bottom: 18px;

}

.main-image img {

    width: 100%;

    height: 430px;

    object-fit: contain;

    transition: .3s;

}

.thumbnail-images {

    display: flex;

    gap: 12px;

}

.thumbnail-images img {

    width: 90px;

    height: 90px;

    object-fit: cover;

    background: #151b27;

    border-radius: 12px;

    cursor: pointer;

    border: 2px solid transparent;

    transition: .3s;

}

.thumbnail-images img:hover,

.thumbnail-images img.active {

    border-color: var(--primary);

}

.product-info h1 {

    margin: 15px 0;

    font-size: 34px;

    font-weight: 800;

    line-height: 1.6;

}

.stock-status {

    color: #2ecc71;

    margin: 20px 0;

}

.price-box {

    display: flex;

    flex-direction: column;

    gap: 10px;

    margin: 30px 0;

}

.price-box del {

    color: #888;

}

.price-box strong {

    font-size: 34px;

}

.quantity-box {

    display: inline-flex;

    align-items: center;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, .08);

    border-radius: 12px;

    background: #1b2130;

}

.quantity-box button {

    width: 42px;

    height: 42px;

    border: none;

    background: #252d3d;

    color: #fff;

    font-size: 22px;

    font-weight: 700;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition: .2s;

    line-height: 1;

}

.quantity-box button:hover {

    background: var(--primary);

    color: #fff;

}

.quantity-box input {

    width: 55px;

    height: 42px;

    border: none;

    outline: none;

    background: #1b2130;

    color: #fff;

    text-align: center;

    font-weight: 600;

    font-size: 16px;

    box-shadow: none;

}

.quantity-box input:focus {

    background: #1b2130;

    color: #fff;

}

.action-buttons {

    display: flex;

    gap: 15px;

}

.buy-btn {

    flex: 1;

    height: 55px;

    background: var(--primary);

    color: #fff;

    border-radius: 12px;

}

.wishlist-outline {

    width: 55px;

    border-radius: 12px;

    background: var(--surface);

    color: #fff;

}



/*===================================
            PRODUCT TABS
===================================*/

.product-tabs {

    margin-top: 80px;

}

.product-tab-nav {

    gap: 15px;

    margin-bottom: 35px;

}

.product-tab-nav .nav-link {

    background: var(--surface);

    color: var(--text-light);

    border-radius: 14px;

    padding: 14px 28px;

    border: none;

    transition: .3s;

}

.product-tab-nav .nav-link.active {

    background: var(--primary);

    color: #fff;

}

.tab-card {

    background: var(--surface);

    border-radius: 20px;

    padding: 35px;

}

.tab-card h3 {

    margin-bottom: 20px;

    font-size: 28px;

}

.tab-card p {

    color: var(--text-light);

    line-height: 2.2;

}

.product-spec-table {

    --bs-table-bg: transparent;
    --bs-table-color: #fff;
    --bs-table-border-color: rgba(255, 255, 255, .08);

    background: transparent !important;
    color: #fff;

}

.product-spec-table tbody,
.product-spec-table tr,
.product-spec-table th,
.product-spec-table td {

    background: transparent !important;
    color: #fff;

}

.product-spec-table th {

    width: 220px;
    color: var(--text-light);
    font-weight: 600;

}

.product-spec-table td {

    font-weight: 500;

}

.product-spec-table {

    color: #fff;
    margin: 0;

}

.product-spec-table tr {

    border-color: rgba(255, 255, 255, .08);

}

.product-spec-table th {

    width: 220px;

    color: #ddd;

    font-weight: 600;

}

.product-spec-table td {

    color: var(--text-light);

}

.review-box {

    background: #1a2030;

    border-radius: 16px;

    padding: 25px;

    margin-bottom: 20px;

}

.review-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 15px;

}

.review-header h5 {

    margin-bottom: 5px;

}

.review-header small {

    color: var(--text-light);

}

.review-rate {

    color: #FFC107;

    font-size: 18px;

}


/*===================================
        RELATED PRODUCTS
===================================*/

.related-products {

    margin-top: 90px;

}

.related-products .section-header {

    display: flex;

    justify-content: space-between;

    align-items: end;

    margin-bottom: 35px;

}

.related-products h2 {

    font-size: 34px;

    margin-bottom: 10px;

}

.related-products p {

    color: var(--text-light);

    margin: 0;

}

.relatedSwiper {

    padding-bottom: 10px;

}

.relatedSwiper .swiper-slide {

    height: auto;

}


/*==========================
      REVIEW
==========================*/

.review-summary {

    display: flex;

    align-items: center;

    gap: 30px;

    margin-bottom: 40px;

    padding-bottom: 30px;

    border-bottom: 1px solid rgba(255, 255, 255, .08);

}

.review-score {

    width: 120px;

    height: 120px;

    border-radius: 20px;

    background: var(--primary);

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

}

.review-score strong {

    font-size: 40px;

}

.review-score span {

    font-size: 14px;

}

.review-form {

    margin-bottom: 50px;

}

.review-form h4 {

    margin-bottom: 25px;

}

.review-form label {

    margin-bottom: 10px;

    display: block;

}

.review-form .form-control,
.review-form .form-select {

    background: #1b2130;

    border: 1px solid rgba(255, 255, 255, .08);

    color: #fff;

    min-height: 50px;

}

.review-form textarea.form-control {

    min-height: 150px;

    resize: vertical;

}

.review-form .form-control:focus,
.review-form .form-select:focus {

    background: #1b2130;

    color: #fff;

    border-color: var(--primary);

    box-shadow: none;

}

.submit-review {

    background: var(--primary);

    color: #fff;

    height: 50px;

    padding: 0 28px;

    border-radius: 12px;

}

.review-list h4 {

    margin-bottom: 25px;

}


/*==========================
        AUTH
==========================*/

.auth-page {

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 60px 0;

}

.auth-card {

    width: 100%;

    max-width: 480px;

    margin: auto;

    background: var(--surface);

    border-radius: 24px;

    padding: 40px;

    border: 1px solid rgba(255, 255, 255, .06);

}

.auth-logo {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    font-size: 28px;

    font-weight: 700;

    margin-bottom: 35px;

}

.auth-logo i {

    color: var(--primary);

}

.auth-card h1 {

    text-align: center;

    margin-bottom: 12px;

}

.auth-card p {

    text-align: center;

    color: var(--text-light);

    margin-bottom: 35px;

}

.auth-card label {

    margin-bottom: 10px;

    display: block;

}

.auth-card .form-control {

    height: 54px;

    background: #1a2030;

    border: 1px solid rgba(255, 255, 255, .08);

    color: #fff;

}

.auth-card .form-control:focus {

    background: #1a2030;

    color: #fff;

    border-color: var(--primary);

    box-shadow: none;

}

.auth-btn {

    width: 100%;

    height: 54px;

    border-radius: 14px;

    background: var(--primary);

    color: #fff;

    font-weight: 600;

}

.auth-footer {

    margin-top: 25px;

    text-align: center;

    color: var(--text-light);

    font-size: 14px;

}


/*==========================
            OTP
==========================*/

.otp-inputs {

    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 35px 0;
    direction: ltr;

}

.otp-input {

    width: 58px;

    height: 62px;

    border-radius: 14px;

    border: 1px solid rgba(255, 255, 255, .08);

    background: #1b2130;

    color: #fff;

    text-align: center;

    font-size: 24px;

    font-weight: 700;

}

.otp-input:focus {

    outline: none;

    border-color: var(--primary);

}

.otp-timer {

    text-align: center;

    margin-bottom: 30px;

    color: var(--text-light);

}

.otp-timer span {

    color: var(--primary);

    font-weight: 700;

}

.resend-btn {

    width: 100%;

    margin-top: 18px;

    background: none;

    color: var(--primary);

}

.change-mobile {

    display: block;

    margin-top: 20px;

    text-align: center;

    color: var(--text-light);

}


/*==========================
        PROFILE
==========================*/

.profile-page {

    padding: 50px 0 80px;

}

.profile-sidebar {

    background: var(--surface);

    border-radius: 20px;

    padding: 25px;

    position: sticky;

    top: 100px;

}

.profile-user {

    text-align: center;

    padding-bottom: 25px;

    border-bottom: 1px solid rgba(255, 255, 255, .08);

}

.profile-avatar {

    width: 90px;

    height: 90px;

    border-radius: 50%;

    margin: auto;

    margin-bottom: 18px;

    background: var(--primary);

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 34px;

}

.profile-user span {

    color: var(--text-light);

}

.profile-menu {

    margin: 25px 0 0;

    padding: 0;

}

.profile-menu li {

    list-style: none;

    margin-bottom: 10px;

}

.profile-menu a {

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 15px 18px;

    border-radius: 12px;

    color: var(--text-light);

    transition: .3s;

}

.profile-menu a:hover,
.profile-menu .active a {

    background: var(--primary);

    color: #fff;

}

.profile-content {

    background: var(--surface);

    border-radius: 20px;

    padding: 35px;

}

.dashboard-header {

    margin-bottom: 35px;

}

.dashboard-header p {

    color: var(--text-light);

}

.dashboard-card {

    background: #1b2130;

    border-radius: 18px;

    padding: 30px;

    text-align: center;

}

.dashboard-card i {

    font-size: 28px;

    color: var(--primary);

    margin-bottom: 18px;

}

.dashboard-card strong {

    display: block;

    font-size: 34px;

}

.dashboard-card span {

    color: var(--text-light);

}


/*==========================
        ORDERS
==========================*/

.content-header {

    margin-bottom: 35px;

}

.content-header h2 {

    margin-bottom: 8px;

}

.content-header p {

    color: var(--text-light);

    margin: 0;

}

.orders-list {

    display: flex;

    flex-direction: column;

    gap: 25px;

}

.order-card {

    background: #1b2130;

    border-radius: 18px;

    padding: 24px;

}

.order-top {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding-bottom: 18px;

    border-bottom: 1px solid rgba(255, 255, 255, .08);

}

.order-number {

    display: block;

    font-size: 18px;

    font-weight: 700;

    margin-bottom: 6px;

}

.order-top small {

    color: var(--text-light);

}

.status {

    padding: 8px 16px;

    border-radius: 30px;

    font-size: 13px;

    font-weight: 600;

}

.status.delivered {

    background: #27ae60;

    color: #fff;

}

.status.processing {

    background: #f39c12;

    color: #fff;

}

.status.cancelled {

    background: #e74c3c;

    color: #fff;

}

.order-products {

    display: flex;

    flex-direction: column;

    gap: 18px;

    padding: 24px 0;

}

.mini-product {

    display: flex;

    align-items: center;

    gap: 16px;

}

.mini-product img {

    width: 70px;

    height: 70px;

    object-fit: cover;

    border-radius: 12px;

    background: #111;

}

.mini-product h6 {

    margin-bottom: 6px;

}

.mini-product span {

    color: var(--text-light);

    font-size: 14px;

}

.order-bottom {

    display: flex;

    justify-content: space-between;

    align-items: center;

    border-top: 1px solid rgba(255, 255, 255, .08);

    padding-top: 20px;

}

.primary-btn {

    height: 46px;

    padding: 0 22px;

    border-radius: 12px;

    background: var(--primary);

    color: #fff;

    transition: .3s;

}

.primary-btn:hover {

    background: var(--primary-hover);

}


/*==========================
        ORDER MODAL
==========================*/

.order-modal {

    background: #161b26;

    border-radius: 22px;

    border: none;

}

.order-modal .modal-header {

    border-bottom: 1px solid rgba(255, 255, 255, .08);
    display: inline !important;
    padding: 25px 30px;

}

.order-modal .modal-body {

    padding: 30px;

}

.order-products-list {

    display: flex;

    flex-direction: column;

    gap: 20px;

}

.order-item {

    display: flex;

    align-items: center;

    gap: 18px;

    padding: 18px;

    background: #1b2130;

    border-radius: 16px;

}

.order-item img {

    width: 90px;

    height: 90px;

    object-fit: cover;

    border-radius: 14px;

}

.order-summary-card {

    background: #1b2130;

    border-radius: 18px;

    padding: 24px;

}

.order-summary-card ul {

    padding: 0;

    margin: 25px 0;

}

.order-summary-card li {

    display: flex;

    justify-content: space-between;

    margin-bottom: 18px;

    list-style: none;

}

.address-box {

    margin: 20px 0;

}

.address-box p {

    color: var(--text-light);

    line-height: 2;

}

.price-summary>div {

    display: flex;

    justify-content: space-between;

    margin-bottom: 18px;

}

.total-price {

    margin-top: 25px;

    padding-top: 20px;

    border-top: 1px solid rgba(255, 255, 255, .08);

}

.total-price strong {

    color: var(--primary);

    font-size: 20px;

}

.order-modal {

    background: #161b26;

    color: #fff;

}

.order-modal h1,
.order-modal h2,
.order-modal h3,
.order-modal h4,
.order-modal h5,
.order-modal h6 {

    color: #fff;

}

.order-modal strong {

    color: #fff;

}

.order-modal hr {

    border-color: rgba(255, 255, 255, .08);

    opacity: 1;

}

.order-modal .form-control,
.order-modal .form-select {

    background: #1b2130;

    color: #fff;

}


/*==========================
        CART
==========================*/

.cart-page {

    padding: 50px 0 80px;

}

.page-title {

    margin-bottom: 35px;

}

.page-title p {

    color: var(--text-light);

}

.cart-items {

    display: flex;

    flex-direction: column;

    gap: 20px;

}

.cart-item {

    display: flex;

    align-items: center;

    gap: 20px;

    background: var(--surface);

    border-radius: 18px;

    padding: 22px;

}

.cart-item img {

    width: 110px;

    height: 110px;

    object-fit: cover;

    border-radius: 16px;

}

.cart-info {

    flex: 1;

}

.cart-info h5 {

    margin-bottom: 8px;

}

.cart-info span {

    color: var(--text-light);

}

.cart-quantity {

    display: flex;

    overflow: hidden;

    border-radius: 12px;

}

.cart-quantity button {

    width: 42px;

    background: #1b2130;

    color: #fff;

}

.cart-quantity input {

    width: 55px;

    text-align: center;

    background: #151a26;

    border: none;

    color: #fff;

}

.cart-price {

    min-width: 150px;

    text-align: center;

}

.remove-item {

    width: 45px;

    height: 45px;

    border-radius: 12px;

    background: #2b1b1b;

    color: #ff5c5c;

}

/*==========================
      CART SUMMARY
==========================*/

.cart-summary {

    position: sticky;

    top: 110px;

    background: var(--surface);

    border-radius: 20px;

    padding: 28px;

    border: 1px solid rgba(255, 255, 255, .06);

}

.cart-summary h4 {

    margin-bottom: 30px;

}

.summary-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 18px;

}

.summary-row span {

    color: var(--text-light);

}

.discount-box {

    margin: 25px 0;

}

.discount-box label {

    display: block;

    margin-bottom: 12px;

}

.transfer-input select,
.transfer-input option {
    background: #1b2130;
    color: #fff;
}

.discount-input {

    display: flex;

    gap: 10px;

}

.discount-input input {

    background: #1b2130;

    border: 1px solid rgba(255, 255, 255, .08);

    color: #fff;

}

.discount-input input:focus {

    background: #1b2130;

    color: #fff;

    border-color: var(--primary);

    box-shadow: none;

}

.discount-input button {

    min-width: 90px;

    border-radius: 12px;

    background: var(--primary);

    color: #fff;

}

.summary-total {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin: 30px 0;

}

.summary-total strong {

    font-size: 24px;

    color: var(--primary);

}

.checkout-btn {

    width: 100%;

    height: 55px;

    border-radius: 14px;

    background: var(--primary);

    color: #fff;

    font-weight: 700;

    margin-bottom: 15px;

}

.continue-shopping {

    display: block;

    text-align: center;

    color: var(--text-light);

    transition: .3s;

}

.continue-shopping:hover {

    color: #fff;

}


/*==========================
        ADDRESS
==========================*/

.address-list {

    display: flex;

    flex-direction: column;

    gap: 25px;

}

.address-card {

    background: #1b2130;

    border-radius: 18px;

    padding: 25px;

}

.address-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 20px;

}

.address-header h5 {

    display: inline-block;

    margin-left: 10px;

}

.default-badge {

    background: rgba(22, 163, 74, .15);

    color: #22c55e;

    padding: 6px 12px;

    border-radius: 20px;

    font-size: 13px;

}

.address-actions {

    display: flex;

    gap: 10px;

}

.icon-btn {

    width: 42px;

    height: 42px;

    border-radius: 12px;

    background: #232c3d;

    color: #fff;

}

.icon-btn.danger {

    background: #391b1b;

    color: #ff6969;

}

.address-card ul {

    padding: 0;

    margin: 0 0 18px;

}

.address-card li {

    list-style: none;

    margin-bottom: 12px;

    color: var(--text-light);

}

.address-text {

    line-height: 2;

    color: #fff;

    margin: 0;

}

.order-modal label {

    display: block;

    margin-bottom: 8px;

    color: #fff;

}

.order-modal .form-control,
.order-modal .form-select {

    background: #1b2130;

    border: 1px solid rgba(255, 255, 255, .08);

    color: #fff;

    min-height: 48px;

}

.order-modal .form-control:focus,
.order-modal .form-select:focus {

    background: #1b2130;

    color: #fff;

    border-color: var(--primary);

    box-shadow: none;

}

.order-modal textarea.form-control {

    min-height: 120px;

    resize: vertical;

}

.order-modal .modal-footer {

    border-top: 1px solid rgba(255, 255, 255, .08);

    padding: 20px 24px;

}

.order-modal .form-check-label {

    color: #fff;

}

.order-modal .form-check-input {

    background-color: #2b3344;

    border-color: #4b5563;

}

.order-modal .form-check-input:checked {

    background-color: var(--primary);

    border-color: var(--primary);

}


/*==========================
      ACCOUNT
==========================*/

.account-form {

    max-width: 800px;

}

.account-form label {

    display: block;

    margin-bottom: 10px;

    color: #fff;

    font-weight: 500;

}

.account-form .form-control {

    height: 52px;

    background: #1b2130;

    border: 1px solid rgba(255, 255, 255, .08);

    color: #fff;

    border-radius: 12px;

}

.account-form .form-control:focus {

    background: #1b2130;

    color: #fff;

    border-color: var(--primary);

    box-shadow: none;

}

.account-form .form-control[readonly] {

    background: #252d3d;

    color: #b8bcc7;

    cursor: not-allowed;

}

.account-form small {

    display: block;

    margin-top: 8px;

    color: var(--text-light);

}

.account-form .primary-btn {

    min-width: 180px;

}

/*==========================
        ERROR PAGE
==========================*/

.error-page {

    min-height: 80vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 80px 0;

}

.error-box {

    max-width: 700px;

    margin: auto;

    text-align: center;

}

.error-icon {

    width: 120px;

    height: 120px;

    margin: auto;

    margin-bottom: 30px;

    border-radius: 50%;

    background: rgba(99, 102, 241, .12);

    display: flex;

    justify-content: center;

    align-items: center;

}

.error-icon i {

    font-size: 48px;

    color: var(--primary);

}

.error-code {

    display: block;

    font-size: 96px;

    font-weight: 800;

    color: var(--primary);

    line-height: 1;

    margin-bottom: 20px;

}

.error-box h1 {

    margin-bottom: 18px;

}

.error-box p {

    max-width: 520px;

    margin: 0 auto 40px;

    color: var(--text-light);

    line-height: 2;

}

.error-actions {

    display: flex;

    justify-content: center;

    gap: 15px;

    flex-wrap: wrap;

}

.secondary-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    height: 52px;

    padding: 0 24px;

    border-radius: 14px;

    border: 1px solid rgba(255, 255, 255, .12);

    color: #fff;

    transition: .3s;

}

.secondary-btn:hover {

    background: #232c3d;

    color: #fff;

}


/*==========================
      PRODUCT COLORS
==========================*/

.product-colors {

    margin: 28px 0;

}

.product-colors label {

    display: block;

    margin-bottom: 14px;

    font-weight: 600;

}

.color-list {

    display: flex;
    flex-wrap: wrap;
    gap: 18px;

}

.color-item {

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    margin: 0 !important;

}

.color-item input {

    display: none;

}

.color-circle {

    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, .15);
    transition: .25s;
    display: block;
    position: relative;

}

.color-item small {

    color: var(--text-light);
    font-size: 13px;

}

.color-item:hover .color-circle {

    transform: scale(1.08);

}

.color-item input:checked+.color-circle {

    border-color: var(--primary);
    transform: scale(1.12);
    box-shadow:
        0 0 0 4px rgba(99, 102, 241, .18);

}

/*==========================
      PROFILE CARD
==========================*/

.profile-card {

    background: var(--surface);

    border: 1px solid rgba(255, 255, 255, .08);

    border-radius: 20px;

    padding: 30px;

    margin-bottom: 35px;

    display: flex;

    align-items: center;

    gap: 20px;

}

.profile-avatar {

    width: 80px;

    height: 80px;

    border-radius: 50%;

    background: linear-gradient(135deg, var(--primary), #4f46e5);

    display: flex;

    justify-content: center;

    align-items: center;

    flex-shrink: 0;

}

.profile-avatar i {

    font-size: 32px;

    color: #fff;

}

.profile-info {

    display: flex;

    flex-direction: column;

    gap: 6px;

}

.profile-info h3 {

    margin: 0;

    color: #fff;

}

.profile-info span {

    color: var(--text-light);

}



.desktop-menu {

    flex: 1;

    margin: 0 35px;

}

.mobile-toggle {

    display: none;

}

.mobile-search {

    display: none;

}

.offcanvas {

    width: 320px;

    background: #161b26;

    color: #fff;

}

.mobile-menu {

    padding: 0;

    margin: 0;

}

.mobile-menu li {

    list-style: none;

}

.mobile-menu a {

    display: block;

    padding: 16px 0;

    color: #fff;

    border-bottom: 1px solid rgba(255, 255, 255, .08);

}

/*==========================
        CONTACT
==========================*/

.contact-page {

    padding: 60px 0 80px;

}

.contact-card,
.contact-info {

    background: var(--surface);

    border-radius: 20px;

    padding: 30px;

    border: 1px solid rgba(255, 255, 255, .08);

}

.contact-card label {

    display: block;

    margin-bottom: 10px;

    color: #fff;

    font-weight: 500;

}

.contact-card .form-control {

    min-height: 52px;

    background: #1b2130;

    border: 1px solid rgba(255, 255, 255, .08);

    color: #fff;

    border-radius: 12px;

}

.contact-card textarea.form-control {

    min-height: 180px;

    resize: vertical;

}

.contact-card .form-control:focus {

    background: #1b2130;

    color: #fff;

    border-color: var(--primary);

    box-shadow: none;

}

.contact-info h3 {

    margin-bottom: 30px;

}

.info-item {

    display: flex;

    gap: 18px;

    align-items: flex-start;

    margin-bottom: 28px;

}

.info-item:last-child {

    margin-bottom: 0;

}

.info-item i {

    width: 48px;

    height: 48px;

    border-radius: 12px;

    background: rgba(99, 102, 241, .15);

    color: var(--primary);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 18px;

    flex-shrink: 0;

}

.info-item strong {

    display: block;

    margin-bottom: 6px;

    color: #fff;

}

.info-item span {

    color: var(--text-light);

    line-height: 1.8;

}

/*==========================
        BRANDS
==========================*/

.brands-section {

    padding: 80px 0;

}

.brand-card {

    background: var(--surface);

    border: 1px solid rgba(255, 255, 255, .08);

    border-radius: 18px;

    height: 130px;

    display: flex;

    justify-content: center;

    align-items: center;

    transition: .3s;

}

.brand-card img {

    max-width: 110px;

    max-height: 60px;

    object-fit: contain;

    opacity: .8;

    transition: .3s;

}

.brand-card:hover {

    border-color: var(--primary);

    transform: translateY(-6px);

    box-shadow: 0 12px 30px rgba(0, 0, 0, .25);

}

.brand-card:hover img {

    opacity: 1;

    transform: scale(1.08);

}



/*==========================
        ABOUT PAGE
==========================*/

.about-page {

    padding: 60px 0 80px;

}

.about-hero {

    text-align: center;

    max-width: 900px;

    margin: 0 auto 70px;

}

.about-hero h1 {

    margin-bottom: 20px;

}

.about-hero p {

    color: var(--text-light);

    line-height: 2;

}

.about-card {

    background: var(--surface);

    border: 1px solid rgba(255, 255, 255, .08);

    border-radius: 22px;

    padding: 40px;

    margin-bottom: 70px;

}

.about-card h2 {

    margin-bottom: 20px;

}

.about-card p {

    color: var(--text-light);

    line-height: 2.1;

}

.about-big-icon {

    font-size: 140px;

    color: var(--primary);

    opacity: .15;

}

.about-features {

    margin-bottom: 70px;

}

.about-feature-card {

    background: var(--surface);

    border-radius: 18px;

    border: 1px solid rgba(255, 255, 255, .08);

    padding: 30px 24px;

    text-align: center;

    height: 100%;

    transition: .3s;

}

.about-feature-card:hover {

    transform: translateY(-6px);

    border-color: var(--primary);

}

.about-feature-card i {

    font-size: 34px;

    color: var(--primary);

    margin-bottom: 18px;

}

.about-feature-card h4 {

    margin-bottom: 12px;

}

.about-feature-card p {

    color: var(--text-light);

    line-height: 1.9;

}

.about-stats {

    margin-bottom: 70px;

}

.stat-card {

    background: var(--surface);

    border: 1px solid rgba(255, 255, 255, .08);

    border-radius: 18px;

    padding: 30px;

    text-align: center;

}

.stat-card h3 {

    color: var(--primary);

    font-size: 34px;

    margin-bottom: 10px;

}

.stat-card span {

    color: var(--text-light);

}

.about-cta {

    background: linear-gradient(135deg, #242c42, #1a2030);

    border-radius: 24px;

    padding: 60px 30px;

    text-align: center;

}

.about-cta h2 {

    margin-bottom: 15px;

}

.about-cta p {

    color: var(--text-light);

    margin-bottom: 30px;

}

/*==========================
      PRODUCT VIDEO
==========================*/

.product-video {

    border-radius: 18px;

    overflow: hidden;

    background: #111827;

    border: 1px solid rgba(255, 255, 255, .08);

}

.product-video video {

    width: 100%;

    display: block;

    aspect-ratio: 16/9;

    background: #000;

}



/*==========================
        BLOG PAGE
==========================*/

.blog-page {

    padding: 60px 0 80px;

}

.blog-hero {

    text-align: center;

    max-width: 750px;

    margin: 0 auto 50px;

}

.blog-hero p {

    color: var(--text-light);

    line-height: 2;

}

.blog-toolbar {

    margin-bottom: 40px;

}

.search-form {

    display: flex;

    max-width: 500px;

    margin: 0 auto 30px;

    background: var(--surface);

    border: 1px solid rgba(255, 255, 255, .08);

    border-radius: 14px;

    overflow: hidden;

}

.search-form input {

    flex: 1;

    border: none;

    background: transparent;

    color: #fff;

    padding: 14px 18px;

}

.search-form input:focus {

    outline: none;

}

.search-form button {

    width: 60px;

    border: none;

    background: var(--primary);

    color: #fff;

}

.blog-categories {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;

}

.blog-categories a {

    padding: 10px 18px;

    border-radius: 999px;

    background: var(--surface);

    color: #fff;

    transition: .25s;

}

.blog-categories a.active,
.blog-categories a:hover {

    background: var(--primary);

}

.blog-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));

    gap: 24px;

}

.blog-card {

    background: var(--surface);

    border-radius: 18px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, .08);

    transition: .3s;

    display: flex;

    flex-direction: column;

}

.blog-card:hover {

    transform: translateY(-6px);

    border-color: var(--primary);

}

.blog-card img {

    width: 100%;

    height: 220px;

    object-fit: cover;

}

.blog-body {

    padding: 22px;

    display: flex;

    flex-direction: column;

    flex: 1;

}

.blog-category {

    color: var(--primary);

    font-size: 13px;

    margin-bottom: 10px;

}

.blog-body h3 {

    font-size: 20px;

    line-height: 1.8;

    margin-bottom: 14px;

}

.blog-body p {

    color: var(--text-light);

    line-height: 2;

    flex: 1;

}

.blog-footer {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 20px;

    padding-top: 16px;

    border-top: 1px solid rgba(255, 255, 255, .08);

}

.blog-footer span {

    color: var(--text-light);

    font-size: 14px;

}

.pagination-wrapper {

    margin-top: 50px;

    display: flex;

    justify-content: center;

}

.pagination .page-link {

    background: var(--surface);

    border: 1px solid rgba(255, 255, 255, .08);

    color: #fff;

}

.pagination .active .page-link {

    background: var(--primary);

    border-color: var(--primary);

}


/*==========================
      ARTICLE DETAIL
==========================*/

.article-page {

    padding: 60px 0 80px;

}

.article-card {

    background: var(--surface);

    border-radius: 24px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, .08);

}

.article-cover {

    width: 100%;

    height: 480px;

    object-fit: cover;

}

.article-content {

    padding: 45px;

}

.article-category {

    color: var(--primary);

    font-size: 14px;

    display: inline-block;

    margin-bottom: 15px;

}

.article-content h1 {

    line-height: 1.8;

    margin-bottom: 25px;

}

.article-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 25px;

    color: var(--text-light);

    margin-bottom: 35px;

    padding-bottom: 25px;

    border-bottom: 1px solid rgba(255, 255, 255, .08);

}

.article-meta span {

    display: flex;

    align-items: center;

    gap: 8px;

}

.article-body {

    line-height: 2.3;

}

.article-body h2 {

    margin: 35px 0 18px;

}

.article-body p {

    color: var(--text-light);

    margin-bottom: 20px;

}

.article-body img {

    width: 100%;

    border-radius: 18px;

    margin: 25px 0;

}

.article-body blockquote {

    border-right: 4px solid var(--primary);

    background: #1b2130;

    padding: 20px;

    border-radius: 12px;

    margin: 30px 0;

    color: #fff;

}

.article-tags {

    display: flex;

    gap: 12px;

    flex-wrap: wrap;

    margin-top: 40px;

}

.article-tags a {

    padding: 8px 16px;

    background: #1b2130;

    border-radius: 999px;

}

.article-share {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-top: 35px;

    padding-top: 25px;

    border-top: 1px solid rgba(255, 255, 255, .08);

}

.article-share a {

    width: 42px;

    height: 42px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 50%;

    background: #1b2130;

}



/*==========================
        ERROR 404
==========================*/

.error-page {

    min-height: 80vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 80px 0;

}

.error-card {

    max-width: 700px;

    margin: auto;

    padding: 60px 40px;

    text-align: center;

    background: var(--surface);

    border: 1px solid rgba(255, 255, 255, .08);

    border-radius: 28px;

}

.error-icon {

    width: 110px;

    height: 110px;

    margin: 0 auto 30px;

    border-radius: 50%;

    background: rgba(99, 102, 241, .15);

    display: flex;

    justify-content: center;

    align-items: center;

}

.error-icon i {

    font-size: 48px;

    color: var(--primary);

}

.error-code {

    display: block;

    font-size: 90px;

    font-weight: 800;

    color: var(--primary);

    line-height: 1;

    margin-bottom: 20px;

}

.error-card h1 {

    margin-bottom: 20px;

    color: #fff;

}

.error-card p {

    color: var(--text-light);

    max-width: 520px;

    margin: 0 auto;

    line-height: 2;

}

.error-actions {

    margin-top: 40px;

    display: flex;

    justify-content: center;

    gap: 15px;

    flex-wrap: wrap;

}

.error-actions .primary-btn,
.error-actions .secondary-btn {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    min-width: 180px;

}


.price-slider-wrapper {
    margin-top: 20px;
    direction: ltr;
}

.price-values {

    display: flex;
    justify-content: space-between;
    margin-bottom: 18px;
    font-size: 14px;
    color: var(--text-light);
    direction: ltr;
}

.range-group {

    position: relative;

    height: 36px;

}

.range-group input[type=range] {

    position: absolute;

    width: 100%;

    pointer-events: none;

    background: none;

    appearance: none;

}

.range-group input[type=range]::-webkit-slider-thumb {

    appearance: none;

    pointer-events: auto;

    width: 18px;

    height: 18px;

    border-radius: 50%;

    background: var(--primary);

    border: 3px solid #fff;

    cursor: pointer;

}

.range-group input[type=range]::-webkit-slider-runnable-track {

    height: 6px;

    border-radius: 30px;

    background: #343b52;

}

.range-group input[type=range]::-moz-range-thumb {

    pointer-events: auto;

}

/* ==========================
   SHIPPING METHODS
========================== */

.shipping-box {

    margin-top: 20px;

}

.shipping-title {

    display: block;

    margin-bottom: 16px;

    font-weight: 600;

}

.shipping-methods {

    display: flex;

    flex-direction: column;

    gap: 12px;

}

.shipping-method {

    display: block;

    margin: 0;

    cursor: pointer;

}

.shipping-method input {

    display: none;

}

.shipping-method-content {

    display: flex;

    align-items: center;

    gap: 16px;

    padding: 18px;

    background: var(--surface);

    border: 1px solid rgba(255, 255, 255, .08);

    border-radius: 16px;

    transition: .25s ease;

}

.shipping-method:hover .shipping-method-content {

    border-color: rgba(255, 255, 255, .2);

    transform: translateY(-1px);

}

.shipping-method input:checked+.shipping-method-content {

    border-color: var(--primary);

    background: rgba(99, 102, 241, .08);

    box-shadow: 0 0 0 1px var(--primary);

}

.shipping-method-icon {

    width: 48px;

    height: 48px;

    min-width: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    background: rgba(99, 102, 241, .12);

    color: var(--primary);

    font-size: 20px;

}

.shipping-method-info {

    flex: 1;

    min-width: 0;

}

.shipping-method-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 8px;

}

.shipping-method-header strong {

    color: #fff;

    font-size: 15px;

}

.shipping-price {

    color: var(--primary);

    font-weight: 600;

    white-space: nowrap;

}

.shipping-method-meta {

    color: var(--text-light);

    font-size: 13px;

}

.shipping-method-meta span {

    display: flex;

    align-items: center;

    gap: 7px;

}

.shipping-method-meta i {

    color: var(--primary);

}

.shipping-radio {

    width: 22px;

    height: 22px;

    min-width: 22px;

    border: 2px solid #596176;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: .2s;

}

.shipping-radio span {

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: transparent;

    transition: .2s;

}

.shipping-method input:checked+.shipping-method-content .shipping-radio {

    border-color: var(--primary);

}

.shipping-method input:checked+.shipping-method-content .shipping-radio span {

    background: var(--primary);

}


/* ==========================
   SWEET ALERT DARK THEME
========================== */

.swal2-popup {

    background: #181d2a !important;

    color: #ffffff !important;

    border: 1px solid rgba(255, 255, 255, .08);

    border-radius: 18px;

}

.swal2-title {

    color: #ffffff !important;

}

.swal2-html-container {

    color: #b8becb !important;

}

.swal2-content {

    color: #b8becb !important;

}

.swal2-icon.swal2-success {

    border-color: #22c55e !important;

    color: #22c55e !important;

}

.swal2-icon.swal2-error {

    border-color: #ef4444 !important;

    color: #ef4444 !important;

}

.swal2-icon.swal2-warning {

    border-color: #f59e0b !important;

    color: #f59e0b !important;

}

.swal2-icon.swal2-info {

    border-color: #3b82f6 !important;

    color: #3b82f6 !important;

}

.swal2-confirm {

    background: var(--primary) !important;

    border-radius: 10px !important;

}

.swal2-cancel {

    background: #343b52 !important;

    border-radius: 10px !important;

}

.swal2-close {

    color: #ffffff !important;

}

.swal2-close:hover {

    color: var(--primary) !important;

}


.payment-info{

    margin-top:35px;

    padding:20px;

    background:rgba(255,255,255,.025);

    border:1px solid rgba(255,255,255,.07);

    border-radius:16px;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:0;

}

.payment-info-item{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:7px;

    padding:16px;

    text-align:right;

}

.payment-info-item:nth-child(odd){

    border-left:1px solid rgba(255,255,255,.07);

}

.payment-info-item:nth-child(-n+2){

    border-bottom:1px solid rgba(255,255,255,.07);

}

.payment-info-item span{

    color:var(--text-light);

    font-size:13px;

}

.payment-info-item strong{

    color:#fff;

    font-size:15px;

}

.payment-info{

    margin-top:35px;

    padding:20px;

    background:rgba(255,255,255,.025);

    border:1px solid rgba(255,255,255,.07);

    border-radius:16px;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:0;

}

.payment-info-item{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:7px;

    padding:16px;

    text-align:right;

}

.payment-info-item:nth-child(odd){

    border-left:1px solid rgba(255,255,255,.07);

}

.payment-info-item:nth-child(-n+2){

    border-bottom:1px solid rgba(255,255,255,.07);

}

.payment-info-item span{

    color:var(--text-light);

    font-size:13px;

}

.payment-info-item strong{

    color:#fff;

    font-size:15px;

}

.payment-result-actions{

    display:flex;

    justify-content:center;

    gap:12px;

    margin-top:35px;

    flex-wrap:wrap;

}

.payment-result-actions .primary-btn,
.payment-result-actions .secondary-btn{

    min-width:190px;

    min-height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    border-radius:12px;

}

.payment-result-actions .secondary-btn{

    background:#2b3245;

    color:#fff;

    border:1px solid rgba(255,255,255,.08);

}

.payment-result-actions .secondary-btn:hover{

    background:#343d54;

    color:#fff;

}

.payment-result-icon.error{

    background:rgba(239,68,68,.12);

    color:#ef4444;

    border:1px solid rgba(239,68,68,.25);

}

.payment-result-status.error{

    color:#ef4444;

}

/* ==========================
   CAROUSEL CONTROLS (DARK THEME)
========================== */

.carousel-control-prev,
.carousel-control-next {
    width: 48px;
    height: 48px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, .6);
    border-radius: 50%;
    opacity: 0;
    transition: .3s;
}

.hero-slider:hover .carousel-control-prev,
.hero-slider:hover .carousel-control-next {
    opacity: 1;
}

.carousel-control-prev {
    left: 16px;
}

.carousel-control-next {
    right: 16px;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 20px;
    height: 20px;
}

/* Indicators */
.carousel-indicators {
    bottom: 20px;
    gap: 8px;
}

.carousel-indicators button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .6);
    background: transparent;
    opacity: .7;
    transition: .3s;
}

.carousel-indicators button.active {
    background: var(--primary);
    border-color: var(--primary);
    opacity: 1;
    transform: scale(1.2);
}

.carousel-indicators button:hover {
    opacity: 1;
}

/* Side banner link */
.side-banner-link {
    display: block;
    text-decoration: none;
    margin-bottom: 24px;
}

.side-banner-link:last-child {
    margin-bottom: 0;
}

.side-banner-link:hover .side-banner {
    transform: scale(1.02);
    transition: .3s;
}