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

:root {
    --primary-blue: #0066FF;
    --navy-blue: #1E293B;
    --light-bg: #F8FAFC;
    --indigo-bg: #6366F1;
    --purple-gradient: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
    --red-gradient: linear-gradient(135deg, #EF4444 0%, #B91C1C 100%);
    --teal-gradient: linear-gradient(135deg, #0D9488 0%, #0F766E 100%);
    --blue-gradient: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    --text-main: #0F172A;
    --text-muted: #64748B;
    --white: #ffffff;
    --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    --hover-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    --premium-radius: 12px;

    /* Kartify Theme Colors */
    --k-primary: #ff8000;
    --k-dark: #16212e;
    --k-dark-light: #1d2c3c;
    --k-white: #ffffff;
    --k-gray: #f8f9fa;
    --k-text: #222222;
    --k-text-muted: #777777;
}

/* Brand Section Styles */
.brand-section {
    background-color: var(--light-bg);
    border-top: 1px solid #f1f5f9;
}

.brand-card {
    background: transparent;
    border-radius: 12px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    transition: all 0.3s ease;
    border: none;
    margin: 10px 0;
}

/* --- Brand Section Redesign --- */
.brand-section {
    background: #ffffff;
    border-top: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
}

.brand-section .section-header-2 .title {
    font-size: 24px;
    font-weight: 800;
    color: #1e293b;
    letter-spacing: -0.5px;
}

.btn-view-all {
    font-size: 13px;
    font-weight: 700;
    color: #3b82f6 !important;
    background: #eff6ff;
    padding: 6px 16px;
    border-radius: 20px;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-view-all:hover {
    background: #dbeafe;
    color: #2563eb !important;
    transform: translateX(3px);
}

.brand-card {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
}

.brand-card:hover {
    transform: translateY(-4px);
    border-color: #cbd5e1;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.06) !important;
}

.brand-card .brand-logo {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-logo img {
    max-height: 100%;
    max-width: 100%;
    width: 100% !important;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.brand-card:hover .brand-logo img {
    transform: scale(1.08);
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--text-main);
}

.copyInput {
    display: inline-block;
    line-height: 50px;
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

.copied::after {
    position: absolute;
    top: 8px;
    right: 12%;
    width: 100px;
    display: block;
    content: "COPIED";
    font-size: 1em;
    padding: 5px 5px;
    color: #fff;
    background-color: #FF7000;
    border-radius: 3px;
    opacity: 0;
    will-change: opacity, transform;
    animation: showcopied 1.5s ease;
}

@keyframes showcopied {
    0% {
        opacity: 0;
        transform: translateX(100%);
    }

    50% {
        opacity: 0.7;
        transform: translateX(40%);
    }

    70% {
        opacity: 1;
        transform: translateX(0);
    }

    100% {
        opacity: 0;
    }
}

.hover-input-popup {
    position: relative;
}

.input-popup {
    display: none;
}

.hover-input-popup .input-popup {
    display: block;
    position: absolute;
    bottom: 130%;
    left: 50%;
    width: 280px;
    background-color: #1a1a1a;
    color: #fff;
    padding: 20px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.input-popup::after {
    position: absolute;
    content: '';
    bottom: -19px;
    left: 50%;
    margin-left: -5px;
    border-width: 10px 10px 10px 10px;
    border-style: solid;
    border-color: transparent transparent #1a1a1a transparent;
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.input-popup p {
    padding-left: 20px;
    position: relative;
}

.input-popup p::before {
    position: absolute;
    content: '';
    font-family: 'Line Awesome Free';
    font-weight: 900;
    left: 0;
    top: 4px;
    line-height: 1;
    font-size: 18px;
}

.input-popup p.error {
    text-decoration: line-through;
}

.input-popup p.error::before {
    content: "\f057";
    color: #ea5455;
}

.input-popup p.success::before {
    content: "\f058";
    color: #28c76f;
}

.contact-group .input-group-text {
    border: 1px solid rgb(229 233 238);
}

.gateway-card {
    padding: 15px;
}

.payment-card-title {
    padding: 13px 25px;
    text-align: center;
    background-color: #346dff;
    border-radius: 5px;
    border: 0;
    margin-bottom: 0px;
    color: #fff;
}

.payment-system-list {
    --thumb-width: 100px;
    --thumb-height: 40px;
    --radio-size: 12px;
    --border-color: #cccccf59;
    --hover-border-color: #346dff;
    background-color: #fff;
    border-radius: 5px;
    height: 100%;

}


.payment-system-list.is-scrollable {
    max-height: min(388px, 70vh);
    overflow-x: auto;
    padding-block: 4px;
}

.payment-system-list.is-scrollable::-webkit-scrollbar {
    width: 5px;
}

.payment-system-list.is-scrollable::-webkit-scrollbar {
    width: 5px;

}

.payment-system-list.is-scrollable::-webkit-scrollbar-thumb {
    background-color: #346dff;
    border-radius: 10px;
}

.payment-item {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px 18px;
    border: 1px solid #fff;
    border-top-color: var(--border-color);
    transition: all 0.3s;
    border-left: 3px solid transparent;
}

.payment-item:first-child {
    border-top-color: #fff;
    border-radius: 5px 5px 0 0;
}

.payment-item:has(.payment-item__radio:checked) {
    border-left: 3px solid var(--hover-border-color);
    border-radius: 0px;
}

.payment-item__check {
    border: 3px solid transparent;
}

.payment-item:has(.payment-item__radio:checked) .payment-item__check {
    border: 3px solid #346dff;
}

.payment-item__info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    max-width: calc(100% - var(--thumb-width))
}

.payment-item__check {
    width: var(--radio-size);
    height: var(--radio-size);
    border: 1px solid #346dff;
    display: inline-block;
    border-radius: 100%;

}

.payment-item__name {
    padding-left: 10px;
    width: calc(100% - var(--radio-size));
    transition: all 0.3s;
}

.payment-item__thumb {
    width: var(--thumb-width);
    height: var(--thumb-height);
    text-align: right;
    padding-left: 10px;

    &:has(.text) {
        width: fit-content;
    }
}

.payment-item__thumb img {
    max-width: var(--thumb-width);
    max-height: var(--thumb-height);
    object-fit: cover;
}


.deposit-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 20px;
}

.deposit-info__title {
    max-width: 50%;
    margin-bottom: 0px;
    text-align: left;
}

.deposit-info__input {
    max-width: 50%;
    text-align: right;
    width: 100%;
}

.deposit-info__input-select {
    border: 1px solid var(--border-color);
    width: 100%;
    border-radius: 5px;
    padding-block: 6px;
}

.deposit-info__input-group {
    border: 1px solid var(--border-color);
    border-radius: 5px;

    .deposit-info__input-group-text {
        align-self: center;
        padding-left: 5px;
    }

}

.deposit-info__input-group .form--control {
    padding: 5px;
    border: 0;
    height: 35px;
    text-align: right;
}

.deposit-info__input-group .form--control:focus {
    box-shadow: unset;
}

.info-text .text,
.deposit-info__input .text {
    font-size: 14px;

}

.deposit-info__title .text.has-icon {
    display: flex;
    align-items: center;
    gap: 5px
}

.total-amount {
    border-top: 1px solid var(--border-color);
}

.total-amount .deposit-info__title {
    font-weight: 600;
}

.payment-item__btn {
    border: 0;
    border-block: 1px solid var(--border-color);
    border-bottom: 0;
    background: #fff;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 15px;
    font-weight: 500;
}

.payment-item:hover+.payment-item__btn {
    border-top-color: #fff;
}

button .spinner-border {
    --bs-spinner-width: 1.5rem;
    --bs-spinner-height: 1.5rem;
}

/* ////////////////// select 2 css //////////////// */
.select2-dropdown {
    border: 0 !important;
    margin-top: 8px !important;
    border-radius: 5px !important;
    box-shadow: 0 3px 9px rgba(50, 50, 9, 0.05), 6px 4px 19px rgb(115 103 240 / 20%)
}

.select2-search--dropdown {
    padding: 10px 10px !important;
    border-color: #ced4da !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border-color: #ced4da !important;
    padding: 10px 20px;
}

.select2-results__option.select2-results__option--selected,
.select2-results__option--selectable,
.select2-container--default .select2-results__option--disabled {
    padding: 12px 14px !important;
    border-bottom: 1px solid #eee;
}

.select2-results__option.select2-results__message {
    text-align: center !important;
    padding: 12px 14px !important;
}

.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar {
    width: 8px;
    border-radius: 5px;
}

.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 5px;
}

.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-thumb {
    background: #ddd;
}

.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-thumb:hover {
    background: #ddd;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none;
}

.select2-container--default .select2-selection--single .select2-selection__arrow:after {
    position: absolute;
    right: 10px;
    top: 0;
    content: "\f107";
    font-family: "Line Awesome Free";
    font-weight: 900;
    transition: .3s;
}

.select2-container--default .select2-selection--single {
    border-color: #ced4da !important;
    border-width: 1px !important;
    border-radius: .375rem !important;
    padding: .375rem .75rem !important;
    height: 50px !important;
}

.select2-container--default .select2-selection--single:focus-visible,
.select2-container .select2-selection--single .select2-selection__rendered:focus-visible {
    border: 1px solid #ced4da !important;
    outline: none !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 38px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 11px !important;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow:after {
    transform: rotate(-180deg);
}

.select2-results__option:last-child {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.select2-results__option:first-child {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.select2-results__option.select2-results__option--selected,
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #f1f1f1 !important;
    color: #000 !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: rgb(var(--main)) !important;
    box-shadow: 0 0 25px rgba(115, 103, 240 0.071) !important;
    outline: 0 !important;
}

.select2-dropdown .country-flag {
    width: 25px;
    height: 25px;
    border-radius: 8px;
}

.select2-dropdown .gateway-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 0px !important;
}

.select2-dropdown .gateway-subtitle {
    font-size: 12px;
    margin-bottom: 0px !important;
}

.select2-container--open .select2-selection.select2-selection--single,
.select2-container--open .select2-selection.select2-selection--multiple {
    border-color: #346dff33 !important;
    border-radius: .375rem !important;
}

.single-product-item.no_data {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Header Redesign */
.header-middle {
    border-bottom: 1px solid #f1f5f9;
    padding: 1rem 0 !important;
}

.logo img {
    height: 32px;
}

.header-search-form {
    flex: 0 0 45%;
    position: relative;
}

.header-form-group {
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 2px 15px;
    display: flex;
    align-items: center;
}

.header-form-group input {
    border: none;
    background: transparent;
    width: 100%;
    padding: 8px;
    font-size: 14px;
    color: var(--text-main);
}

.header-form-group input::placeholder {
    color: #94A3B8;
}

.header-form-group button {
    background: transparent;
    border: none;
    color: #64748B;
    font-size: 18px;
}

.shortcut-icons {
    gap: 15px;
}

.shortcut-icons li a {
    color: var(--primary-blue);
    font-size: 20px;
}

.shortcut-icons li a:hover {
    color: var(--navy-blue);
}

.shortcut-icons .amount {
    background: var(--primary-blue);
    color: white;
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 50%;
    position: absolute;
    top: -5px;
    right: -10px;
}

/* --- Checkout Page Redesign --- */
.checkout-container.bg-light {
    background-color: #f8fafc !important;
}

.cart-item-compact {
    transition: all 0.2s;
    background: #fff;
    border-bottom: 1px solid #f1f5f9;
}

.cart-item-compact:hover {
    background-color: #fdfdfd;
}

.cart-item-compact .thumb img {
    border-radius: 12px !important;
    background: #fff;
    border: 1px solid #f1f5f9 !important;
    padding: 5px;
}

.qty-controls {
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    display: flex;
    align-items: center;
    border-radius: 8px;
}

.qty-controls .qty-btn {
    padding: 5px 10px;
    font-size: 1.1rem;
    color: #64748b !important;
    border: none;
    background: transparent;
}

.qty-controls .qty-btn:hover {
    color: #4f46e5 !important;
}

.qty-controls input {
    width: 40px;
    text-align: center;
    border: none;
    background: transparent;
    font-weight: 700;
    color: #1e293b;
    pointer-events: none;
}

.total-payment-card {
    position: sticky;
    top: 20px;
}

.cart-count-badge {
    font-size: 0.85rem;
    padding: 6px 15px !important;
    background: #4f46e5 !important;
}

.btn-primary.shadow {
    transition: all 0.3s ease;
}

.btn-primary.shadow:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 20px -5px rgba(79, 70, 229, 0.5) !important;
    opacity: 0.95;
}

/* --- Single Page Checkout --- */
.checkout-container {
    padding-top: 40px;
    padding-bottom: 80px;
    background: #f8fafc;
}

.checkout-card {
    border: none;
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    background: #fff;
    margin-bottom: 24px;
}

.checkout-card .card-header {
    background: transparent;
    border-bottom: 1px solid #f1f5f9;
    padding: 20px 24px;
}

.checkout-card .card-header .title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
}

.cart-item-compact {
    display: flex;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid #f1f5f9;
}

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

.cart-item-compact .thumb {
    width: 70px;
    height: 70px;
    border-radius: 12px;
    margin-right: 16px;
    flex-shrink: 0;
    overflow: hidden;
    background: #f1f5f9;
}

.cart-item-compact .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-item-compact .content {
    flex-grow: 1;
}

.cart-item-compact .content .name {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 4px;
    line-height: 1.4;
}

.cart-item-compact .content .price-row {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    color: #64748b;
}

.cart-item-compact .qty-controls {
    display: flex;
    align-items: center;
    background: #f1f5f9;
    padding: 2px;
    border-radius: 8px;
    margin: 0 16px;
}

.cart-item-compact .qty-controls input {
    width: 40px;
    text-align: center;
    border: none;
    background: transparent;
    font-weight: 700;
    color: #1e293b;
}

.cart-item-compact .qty-controls button {
    border: none;
    background: #fff;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.cart-item-compact .remove-btn {
    color: #ef4444;
    cursor: pointer;
    font-size: 1.25rem;
    padding: 5px;
}

/* Order Summary */
.order-summary-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    color: #64748b;
}

.order-summary-item.total {
    border-top: 1px dashed #cbd5e1;
    padding-top: 16px;
    margin-top: 16px;
    color: #1e293b;
    font-weight: 800;
    font-size: 1.2rem;
}

.btn-place-order {
    width: 100%;
    padding: 16px;
    font-weight: 700;
    border-radius: 12px;
    font-size: 1.1rem;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    border: none;
    color: white;
    margin-top: 20px;
    box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.4);
    transition: all 0.3s;
}

.btn-place-order:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 20px -5px rgba(79, 70, 229, 0.5);
    color: white;
}

/* Modal Form */
#checkoutModal .modal-content {
    border-radius: 20px;
    border: none;
}

#checkoutModal .modal-header {
    border-bottom: 1px solid #f1f5f9;
    padding: 24px;
}

#checkoutModal .form-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: #475569;
}

#checkoutModal .form-control {
    border-radius: 10px;
    padding: 12px 16px;
    border: 1px solid #e2e8f0;
}

#checkoutModal .form-control:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Category Ribbon */
.category-ribbon {
    background: var(--white);
    padding: 15px 0;
    border-bottom: 1px solid #f1f5f9;
}

.category-swiper {
    padding: 20px 0;
    /* Increased padding to prevent top-clipping of hover glows/rings */
    position: relative;
    overflow: visible !important;
    /* Allow the glow/transform to bleed out slightly */
}

.category-nav-list::-webkit-scrollbar {
    height: 0;
}

.category-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: #475569;
    font-weight: 700;
    font-size: 14px;
    min-width: 110px;
    transition: all 0.3s ease;
    text-decoration: none;
}

/* Header Compaction */
.header-middle {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

.header-form-group input,
.header-form-group button {
    height: 40px !important;
}

.header-form-group button {
    width: 45px !important;
}

.header-wrapper .logo img {
    max-height: 45px !important;
    width: auto !important;
}

.shortcut-icons li a {
    padding: 5px !important;
}

.shortcut-icons li a i {
    font-size: 20px !important;
}

.shortcut-icons li a .amount {
    width: 18px !important;
    height: 18px !important;
    line-height: 18px !important;
    font-size: 10px !important;
}

.category-image-wrapper {
    width: 95px;
    height: 95px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    margin-bottom: 5px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid #f1f5f9;
    overflow: hidden;
    /* Clips the square image corners */
}

.category-nav-item:hover .category-image-wrapper {
    background: #ffffff;
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.1);
    border-color: var(--primary-blue);
}

.category-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Ensures image fills the circle */
}

.category-nav-item.active {
    color: var(--primary-blue) !important;
}

.category-nav-item.active .category-image-wrapper {
    background: #ffffff;
    box-shadow: 0 0 0 2px var(--primary-blue);
    border-color: var(--primary-blue);
}

/* Hero Section */
.hero-grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 10px;
    /* Reduced gap */
    margin-top: 15px;
}

.side-banners {
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Reduced gap */
}

.mini-banner-card {
    border-radius: 24px;
    /* More rounded */
    padding: 12px 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    color: white;
    height: 115px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.mini-banner-card:hover {
    transform: translateY(-5px);
    /* Lift instead of slide */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.mini-banner-card .content {
    flex: 1;
}

.mini-banner-card .content h6 {
    font-size: 16px;
    margin-bottom: 2px;
    font-weight: 800;
    color: white;
}

.mini-banner-card .content p {
    font-size: 12px;
    margin-bottom: 8px;
    opacity: 0.8;
}

.mini-price-pill {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
    padding: 4px 12px;
    border-radius: 8px;
    display: inline-block;
    font-weight: 800;
    font-size: 14px;
}

.mini-banner-card .content p {
    font-size: 11px;
    margin-bottom: 10px;
    opacity: 0.9;
}

.mini-banner-card .content .btn-mini {
    background: rgba(255, 255, 255, 0.3);
    border: none;
    color: white;
    font-size: 11px;
    padding: 6px 15px;
    border-radius: 6px;
    font-weight: 600;
    display: inline-block;
}

.mini-banner-card .img-box {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    flex-shrink: 0;
}

.mini-banner-card .img-box img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.main-hero-banner {
    border-radius: 24px;
    background: #0F172A;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px;
    color: white;
    position: relative;
    overflow: hidden;
    height: 375px;
}

.main-hero-banner .hero-content {
    z-index: 2;
    padding-right: 20px;
}

.main-hero-banner .hero-content span {
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
    margin-bottom: 8px;
    display: block;
    opacity: 0.7;
}

.main-hero-banner h1 {
    font-size: 42px;
    /* Larger */
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 15px;
    color: var(--white);
    letter-spacing: -1px;
}

.main-hero-banner p {
    opacity: 0.7;
    margin-bottom: 20px;
    font-size: 14px;
}

.hero-promo-card {
    background: rgba(255, 255, 255, 0.05);
    /* Glassmorphism start */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 280px;
    height: 100%;
    position: relative;
    overflow: hidden;
    color: #1e293b;
    z-index: 3;
}

.promo-card-content {
    padding: 20px;
    text-align: left;
    width: 100%;
}

.promo-card-content h3 {
    font-size: 24px;
    font-weight: 800;
    color: var(--primary-blue);
    margin-bottom: 0;
    line-height: 1;
}

.promo-card-content h2 {
    font-size: 42px;
    font-weight: 900;
    margin-bottom: 15px;
    line-height: 1;
}

.promo-badge {
    position: absolute;
    bottom: 60px;
    right: 20px;
    width: 70px;
    height: 70px;
    background: white;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    z-index: 4;
}

.promo-badge span {
    color: var(--primary-blue);
    font-weight: 800;
    line-height: 1;
}

.promo-badge .off {
    font-size: 10px;
    color: #64748b;
}

.promo-img-wrapper {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.promo-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.promo-btn-overlay {
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 5;
}

.featured-product-hero {
    border-radius: var(--premium-radius);
    background: #6366F1;
    padding: 20px;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    height: 375px;
}

.featured-product-hero .badge-top {
    background: rgba(255, 255, 255, 0.2);
    align-self: flex-start;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11px;
}

.featured-product-hero .hero-prod-img {
    margin: 20px 0;
}

.featured-product-hero h4 {
    font-weight: 700;
    margin-bottom: 5px;
}

.featured-product-hero .btn-buy-hero {
    background: white;
    color: var(--primary-blue);
    font-weight: 700;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    margin-top: 15px;
}

/* Exclusive Deals */
.exclusive-deals-section {
    margin-top: 50px;
}

.section-title {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 25px;
}

.section-title span {
    color: var(--primary-blue);
}

.deal-card {
    border-radius: 24px;
    background: white;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
    border: 1px solid #f1f5f9;
}

.deal-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    border-color: var(--primary-blue);
}

.deal-card .img-box {
    background: #f8fafc;
    height: 240px;
    margin: 12px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    overflow: hidden;
}

.deal-card .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.deal-card:hover .img-box img {
    transform: scale(1.1);
}

.deal-card .content {
    padding: 10px 24px 24px 24px;
    text-align: left;
    /* Premium left alignment */
}

.deal-card .content h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #1e293b;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.deal-card .price {
    font-size: 22px;
    font-weight: 900;
    color: var(--primary-blue);
    margin-bottom: 15px;
}

.deal-card .price del {
    font-size: 14px;
    color: #94a3b8;
    font-weight: 400;
    margin-left: 8px;
}

.deal-card .badge-hot {
    background: #ef4444;
    color: white;
    padding: 4px 12px;
    border-radius: 30px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.deal-card .action-btn {
    width: 36px;
    height: 36px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    color: #64748b;
    transition: all 0.3s ease;
    border: none;
}

.deal-card .action-btn:hover {
    background: var(--primary-blue);
    color: white;
    transform: scale(1.1);
}

.deal-card .btn-buy {
    background: var(--primary-blue);
    color: white !important;
    border-radius: 12px;
    padding: 10px 20px;
    font-weight: 700;
    text-align: center;
    display: block;
    width: 100%;
    transition: all 0.3s ease;
    border: none;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

.deal-card .btn-buy:hover {
    background: #1d4ed8;
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(37, 99, 235, 0.3);
}

.newsletter-box {
    background: var(--primary-blue);
    border-radius: var(--premium-radius);
    padding: 40px;
    color: white;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-image: linear-gradient(rgba(0, 102, 255, 0.9), rgba(0, 102, 255, 0.9)), url('https://images.unsplash.com/photo-1557683316-973673baf926?auto=format&fit=crop&q=80');
    background-size: cover;
}

.newsletter-box h2 {
    font-weight: 800;
    margin-bottom: 15px;
}

.newsletter-box p {
    font-size: 14px;
    opacity: 0.9;
    margin-bottom: 30px;
}

.news-input-group {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    display: flex;
    width: 100%;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.news-input-group input {
    background: transparent;
    border: none;
    color: white;
    padding: 12px 15px;
    flex: 1;
    outline: none !important;
    box-shadow: none !important;
}

.news-input-group input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.news-input-group button {
    background: var(--primary-blue);
    color: var(--white);
    border: none;
    padding: 0 25px;
    border-radius: 0 7px 7px 0;
    font-weight: 700;
    transition: all 0.3s ease;
}

.news-input-group button:hover {
    background: #1d4ed8;
    padding: 0 30px;
}

/* Tabbed Products */
/* Section Filter Tabs (Ref 1103) */
.product-tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 0px;
    align-items: center;
}

.tab-btn {
    padding: 8px 16px;
    border-radius: 30px;
    background: transparent;
    color: #475569;
    font-weight: 500;
    font-size: 13.5px;
    border: 1px solid transparent;
    white-space: nowrap;
    transition: all 0.3s ease;
    cursor: pointer;
}

.tab-btn.active {
    background: var(--primary-blue) !important;
    color: white !important;
    box-shadow: 0 4px 10px rgba(0, 102, 255, 0.25);
    border-color: var(--primary-blue) !important;
}

.tab-btn:hover:not(.active) {
    color: var(--primary-blue);
    background: rgba(0, 102, 255, 0.05);
}

.section-header-3 {
    margin-bottom: 25px !important;
    align-items: center !important;
}

.section-header-3 .section-title {
    margin-bottom: 0 !important;
}

.shopnix-product-card {
    border-radius: var(--premium-radius);
    background: white;
    box-shadow: var(--card-shadow);
    padding: 15px;
    transition: all 0.3s ease;
    height: 100%;
    position: relative;
    border: 1px solid transparent;
}

.shopnix-product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-blue);
}

.shopnix-product-card:hover .img-box img {
    transform: scale(1.05);
}

.stretched-link::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    content: "";
}

.shopnix-product-card .img-box {
    background: #F8FAFC;
    border-radius: 8px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    position: relative;
    overflow: hidden;
}

.shopnix-product-card .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.shopnix-product-card:hover .img-box img {
    transform: scale(1.1);
}

.shopnix-product-card .wishlist-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    color: var(--text-muted);
    border: none;
    z-index: 3;
    transition: all 0.3s ease;
}

.shopnix-product-card .cart-btn {
    position: absolute;
    top: 50px;
    right: 10px;
    width: 32px;
    height: 32px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    color: var(--text-muted);
    border: none;
    z-index: 3;
    transition: all 0.3s ease;
}

.shopnix-product-card .cart-btn:hover {
    color: var(--primary-blue);
    transform: scale(1.1);
}

.shopnix-product-card .wishlist-btn:hover {
    color: var(--primary-blue);
    transform: scale(1.1);
}

.shopnix-product-card .wishlist-btn.active,
.add-to-wish-list.active,
.add-to-compare.active {
    background-color: #ff0000 !important;
    border: 1px solid #ff0000 !important;
    color: #ffffff !important;
}

.shopnix-product-card .wishlist-btn.active i,
.add-to-wish-list.active i,
.add-to-compare.active i {
    color: #ffffff !important;
}

.shopnix-product-card h5 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 5px;
    color: var(--text-main);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.shopnix-product-card .card-text-muted {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

/* Gateway Selection Styles */
.gateway-item:hover {
    border-color: #6366f1 !important;
    background-color: #f8faff;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.payment-method-card {
    cursor: pointer;
    transition: all 0.2s;
}

.payment-method-card:hover {
    border-color: #6366f1 !important;
}

.payment-method-card.active {
    background-color: #f8faff;
    border-color: #4f46e5 !important;
    border-width: 2px !important;
}

/* Compact Modal Styles */
.order-summary-compact {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 10px;
}

.order-summary-compact .small {
    font-size: 11px;
}

.form-label.tiny {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.checkout-modal .modal-title {
    font-size: 1.1rem;
}

.shopnix-product-card .price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.shopnix-product-card .price {
    font-weight: 800;
    color: var(--text-main);
    font-size: 16px;
}

.shopnix-product-card .buy-btn {
    background: var(--primary-blue);
    color: white !important;
    border: none;
    padding: 6px 15px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    z-index: 3;
    position: relative;
    display: inline-block;
}

@media (max-width: 991px) {
    .hero-grid {
        grid-template-columns: 1fr;
    }

    .side-banners {
        flex-direction: row;
        overflow-x: auto;
    }

    .mini-banner-card {
        min-width: 250px;
    }

    .main-hero-banner {
        padding: 30px;
    }

    .main-hero-banner h1 {
        font-size: 32px;
    }
}

.header-search-form {
    flex: 0 0 45%;
    position: relative;
}

.header-form-group {
    background: var(--light-bg);
    border: 1px solid #E2E8F0;
    border-radius: 30px;
    padding: 2px 20px;
}

.header-form-group input {
    border: none;
    background: transparent;
    width: 100%;
    padding: 10px;
}

.header-form-group button {
    background: transparent;
    border: none;
    color: var(--text-muted);
}

.shortcut-icons {
    gap: 20px;
}

.shortcut-icons li a {
    color: var(--primary-blue);
    font-size: 20px;
}

.shortcut-icons li a:hover {
    color: var(--navy-blue);
}

.shortcut-icons .amount {
    background: var(--primary-blue);
    color: white;
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 50%;
    position: absolute;
    top: -5px;
    right: -10px;
}

/* ===================================================================
   RESPONSIVE DESIGN — Tablet (≤991px)
   =================================================================== */
@media (max-width: 991px) {

    /* Hero Section */
    .hero-grid {
        grid-template-columns: 1fr;
    }

    .side-banners,
    .product-tabs,
    .category-swiper {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: 10px;
        padding-bottom: 8px;
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE/Edge */
    }

    .side-banners::-webkit-scrollbar,
    .product-tabs::-webkit-scrollbar,
    .category-swiper::-webkit-scrollbar {
        display: none;
        /* Chrome/Safari/Webkit */
    }

    .mini-banner-card {
        min-width: 240px;
        scroll-snap-align: start;
        height: 105px;
    }

    .main-hero-banner {
        padding: 25px;
        height: 280px;
    }

    .main-hero-banner h1 {
        font-size: 30px;
    }

    .main-hero-banner p {
        font-size: 13px;
    }

    .hero-promo-card {
        width: 220px;
    }

    /* Featured Product Hero */
    .featured-product-hero {
        height: 280px;
    }

    /* Section Spacing */
    .padding-top-half {
        padding-top: 35px;
    }

    .padding-bottom-half {
        padding-bottom: 35px;
    }

    .exclusive-deals-section {
        margin-top: 30px;
    }

    /* Footer */
    footer .padding-top,
    footer .padding-bottom {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    /* Category Ribbon */
    .category-image-wrapper {
        width: 75px;
        height: 75px;
    }

    .category-nav-item {
        font-size: 12px;
        min-width: 90px;
        gap: 8px;
    }
}

/* ===================================================================
   RESPONSIVE DESIGN — Small Tablet (≤767px)
   =================================================================== */
@media (max-width: 767px) {

    /* Hero Section */
    .main-hero-banner {
        height: 240px;
        padding: 20px;
        flex-direction: column;
        text-align: center;
    }

    .main-hero-banner h1 {
        font-size: 26px;
        margin-bottom: 10px;
    }

    .main-hero-banner .hero-content {
        padding-right: 0;
    }

    .hero-promo-card {
        display: none;
    }

    .featured-product-hero {
        height: 240px;
        padding: 15px;
    }

    .featured-product-hero h4 {
        font-size: 18px;
    }

    /* Deal Cards */
    .deal-card .img-box {
        height: 180px;
        margin: 8px;
        border-radius: 14px;
    }

    .deal-card .content {
        padding: 8px 16px 16px;
    }

    .deal-card .content h4 {
        font-size: 15px;
        margin-bottom: 5px;
    }

    .deal-card .price {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .deal-card .btn-buy {
        padding: 8px 16px;
        font-size: 13px;
        border-radius: 10px;
    }

    .deal-card:hover {
        transform: translateY(-4px);
    }

    /* Shopnix Product Cards */
    .shopnix-product-card {
        padding: 12px;
    }

    .shopnix-product-card .img-box {
        height: 150px;
        margin-bottom: 10px;
    }

    .shopnix-product-card h5 {
        font-size: 13px;
        margin-bottom: 3px;
    }

    .shopnix-product-card .price {
        font-size: 14px;
    }

    .shopnix-product-card .buy-btn {
        padding: 5px 12px;
        font-size: 11px;
    }

    .shopnix-product-card:hover {
        transform: translateY(-4px);
    }

    /* Section Titles */
    .section-title {
        font-size: 20px;
        margin-bottom: 20px;
    }

    /* Product Tabs */
    .product-tabs {
        gap: 6px;
        margin-bottom: 20px;
    }

    .tab-btn {
        padding: 9px 18px;
        font-size: 12px;
    }

    /* Newsletter */
    .newsletter-box {
        padding: 25px 20px;
    }

    .newsletter-box h2 {
        font-size: 22px;
    }

    .newsletter-box p {
        font-size: 13px;
        margin-bottom: 20px;
    }

    /* Footer */
    .footer__widget {
        margin-bottom: 10px;
    }

    .widget--title {
        font-size: 16px;
    }

    .footer__links li a {
        font-size: 13px;
    }

    /* Section Spacing */
    .padding-top-half {
        padding-top: 30px;
    }

    .padding-bottom-half {
        padding-bottom: 30px;
    }

    .section-header {
        margin-bottom: 25px;
    }

    /* Top Selling Cards */
    .top-selling-card {
        padding: 12px !important;
    }

    .top-selling-card .product-image {
        width: 80px !important;
        height: 80px !important;
        margin-right: 12px !important;
    }

    .top-selling-card .product-details h6 {
        font-size: 13px !important;
    }

    /* Checkout */
    .checkout-card .card-header {
        padding: 15px 18px;
    }

    .checkout-card .card-header .title {
        font-size: 1.1rem;
    }

    .cart-item-compact {
        padding: 12px 16px;
    }

    .cart-item-compact .thumb {
        width: 55px;
        height: 55px;
        margin-right: 12px;
    }

    .cart-item-compact .content .name {
        font-size: 0.85rem;
    }

    /* Brand Cards */
    .brand-card {
        height: 80px;
        padding: 15px;
    }

    .brand-logo img {
        max-height: 40px;
    }
}

/* ===================================================================
   RESPONSIVE DESIGN — Mobile (≤575px)
   =================================================================== */
@media (max-width: 575px) {

    /* Force consistent 2-column gap */
    .row.g-4 {
        --bs-gutter-x: 10px;
        --bs-gutter-y: 10px;
    }

    /* Hero Section */
    .main-hero-banner {
        height: auto;
        min-height: 220px;
        padding: 18px;
        border-radius: 16px;
        background-image: url('../../../images/custom/mobile_hero_bg.png');
        background-size: cover;
        background-position: center;
        position: relative;
        overflow: hidden;
    }

    .main-hero-banner::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
        z-index: 1;
    }

    .main-hero-banner .hero-content {
        position: relative;
        z-index: 2;
    }

    .main-hero-banner h1 {
        font-size: 22px;
        letter-spacing: -0.5px;
        margin-bottom: 8px;
        color: #FACC15;
        /* Vibrant Yellow */
    }

    .main-hero-banner .hero-content span {
        font-size: 10px;
        margin-bottom: 5px;
        color: #FEF08A;
        /* Light Yellow */
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .main-hero-banner p {
        font-size: 12px;
        margin-bottom: 12px;
    }

    .mini-banner-card {
        min-width: 200px;
        height: 90px;
        border-radius: 16px;
        padding: 10px 12px;
        gap: 10px;
    }

    .mini-banner-card .content h6 {
        font-size: 13px !important;
    }

    .mini-banner-card .content p {
        font-size: 10px !important;
    }

    .mini-banner-card .img-box {
        width: 60px;
        height: 60px;
        border-radius: 14px;
        padding: 5px;
    }

    .mini-price-pill {
        font-size: 12px;
        padding: 3px 8px;
    }

    .featured-product-hero {
        height: auto;
        min-height: 280px;
        padding: 18px;
        border-radius: 16px;
        display: flex;
        flex-direction: column;
    }

    .featured-product-hero h4 {
        font-size: 15px;
        color: white;
    }

    .featured-product-hero .badge-top {
        font-size: 10px;
        padding: 3px 10px;
        align-self: flex-start;
        margin-bottom: 15px;
    }

    .featured-product-hero .hero-prod-img {
        max-width: 100%;
        margin: 15px 0 !important;
    }

    .featured-product-hero .hero-prod-img img {
        max-height: 180px !important;
        width: auto;
        object-fit: contain;
    }

    .featured-product-hero .hero-prod-info {
        margin-top: auto;
    }

    .featured-product-hero .btn-buy-hero {
        padding: 6px 12px;
        font-size: 12px;
        border-radius: 6px;
        margin-top: 8px;
    }

    /* Category Ribbon */
    .category-ribbon {
        padding: 10px 0;
    }

    .category-swiper {
        padding: 10px 0;
    }

    .category-image-wrapper {
        width: 58px;
        height: 58px;
        margin-bottom: 3px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

    .category-nav-item {
        font-size: 10px;
        min-width: 60px;
        gap: 4px;
        font-weight: 600;
    }

    .category-nav-item:hover .category-image-wrapper {
        transform: translateY(-3px);
    }

    /* Deal Cards — 2 per row */
    .deal-card {
        border-radius: 16px;
    }

    .deal-card .img-box {
        height: 120px;
        margin: 5px;
        border-radius: 11px;
    }

    .deal-card .img-box img {
        object-fit: cover;
    }

    .deal-card .content {
        padding: 5px 10px 10px;
    }

    .deal-card .content h4 {
        font-size: 13px;
        margin-bottom: 6px;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .deal-card .content p {
        font-size: 11px !important;
        margin-bottom: 6px !important;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .deal-card .price {
        font-size: 15px;
        margin-bottom: 6px;
    }

    .deal-card .price del {
        font-size: 10px;
        margin-left: 3px;
    }

    .deal-card .badge-hot {
        font-size: 8px;
        padding: 3px 8px;
    }

    .deal-card .action-btn {
        width: 26px;
        height: 26px;
    }

    .deal-card .action-btn i {
        font-size: 13px;
    }

    .deal-card .btn-buy {
        padding: 4px 12px;
        font-size: 11px;
        border-radius: 7px;
    }

    .deal-card .ratings-area {
        margin-bottom: 3px !important;
    }

    .deal-card .ratings-area .ratings {
        font-size: 11px !important;
    }

    .deal-card .ratings-area span {
        font-size: 9px !important;
    }

    .deal-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.05);
    }

    /* Shopnix Product Cards — 2 per row */
    .shopnix-product-card {
        padding: 6px;
        border-radius: 10px;
    }

    .shopnix-product-card .img-box {
        height: 110px;
        margin-bottom: 6px;
        border-radius: 6px;
    }

    .shopnix-product-card h5 {
        font-size: 13px;
        margin-bottom: 5px;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .shopnix-product-card .card-text-muted {
        font-size: 10px;
        margin-bottom: 6px;
        line-height: 1.4;
    }

    .shopnix-product-card .ratings-area {
        margin-bottom: 3px !important;
    }

    .shopnix-product-card .ratings-area .ratings {
        font-size: 10px !important;
    }

    .shopnix-product-card .ratings-area span {
        font-size: 8px !important;
    }

    .shopnix-product-card .price-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .shopnix-product-card .price {
        font-size: 13px;
    }

    .shopnix-product-card .buy-btn {
        padding: 3px 10px;
        font-size: 10px;
        border-radius: 5px;
        width: 100%;
        text-align: center;
    }

    .shopnix-product-card .wishlist-btn,
    .shopnix-product-card .cart-btn {
        width: 26px;
        height: 26px;
    }

    .shopnix-product-card .wishlist-btn i,
    .shopnix-product-card .cart-btn i {
        font-size: 14px;
    }

    .shopnix-product-card .cart-btn {
        top: 40px;
    }

    .shopnix-product-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.08);
    }

    .shopnix-product-card:hover .img-box img {
        transform: scale(1.05);
    }

    /* Top Selling Cards */
    .top-selling-card {
        padding: 10px !important;
        border-radius: 8px !important;
    }

    .top-selling-card .product-image {
        width: 70px !important;
        height: 70px !important;
        margin-right: 10px !important;
    }

    .top-selling-card .product-details h6 {
        font-size: 12px !important;
        line-height: 1.3 !important;
        margin-bottom: 4px !important;
    }

    .top-selling-card .product-details .rating {
        font-size: 12px !important;
    }

    .top-selling-card .product-details .review-count {
        font-size: 10px !important;
    }

    .top-selling-card .product-details .action a {
        font-size: 11px !important;
    }

    .top-selling-section h4 {
        font-size: 16px !important;
        margin-bottom: 12px !important;
    }

    /* Product Tabs */
    .product-tabs {
        gap: 5px;
        margin-bottom: 16px;
        padding-bottom: 4px;
    }

    .tab-btn {
        padding: 8px 14px;
        font-size: 11px;
        border-radius: 8px;
    }

    .tab-btn.active {
        box-shadow: 0 6px 12px -3px rgba(37, 99, 235, 0.3);
    }

    /* Section Titles */
    .section-title {
        font-size: 18px;
        margin-bottom: 15px;
    }

    h2.section-title {
        margin-top: 0;
        line-height: 1.3;
    }

    /* Newsletter */
    .newsletter-box {
        padding: 20px 16px;
        border-radius: 16px;
    }

    .newsletter-box h2 {
        font-size: 20px;
        margin-bottom: 10px;
        line-height: 1.3;
    }

    .newsletter-box p {
        font-size: 12px;
        margin-bottom: 16px;
    }

    .news-input-group input {
        padding: 10px 12px;
        font-size: 13px;
    }

    .news-input-group button {
        padding: 0 16px;
        font-size: 13px;
    }

    /* Section Spacing */
    .padding-top-half {
        padding-top: 22px;
    }

    .padding-bottom-half {
        padding-bottom: 22px;
    }

    .exclusive-deals-section {
        margin-top: 20px;
    }

    .exclusive-deals-section.mb-5 {
        margin-bottom: 1.5rem !important;
    }

    .section-header {
        margin-bottom: 20px;
    }

    /* Header */
    .header-middle {
        padding-top: 3px !important;
        padding-bottom: 3px !important;
    }

    .header-wrapper .logo img {
        max-height: 32px !important;
    }

    .shortcut-icons {
        gap: 10px !important;
    }

    .shortcut-icons li a i {
        font-size: 18px !important;
    }

    .shortcut-icons li a .amount {
        width: 16px !important;
        height: 16px !important;
        line-height: 16px !important;
        font-size: 9px !important;
    }

    .header-bottom .header-search-form {
        flex: 1;
    }

    .header-form-group {
        border-radius: 20px;
        padding: 1px 12px;
    }

    .header-form-group input {
        height: 36px !important;
        padding: 6px 8px;
        font-size: 13px;
    }

    .header-form-group button {
        height: 36px !important;
        width: 36px !important;
        font-size: 16px;
    }

    /* Mobile Menu */
    .mobile-menu .menu li a {
        padding: 8px 0;
        font-size: 14px;
    }

    /* Checkout & Cart Refresh */
    .checkout-container {
        padding-top: 15px;
        padding-bottom: 30px;
    }

    .checkout-card {
        border-radius: 12px;
        margin-bottom: 12px;
    }

    .checkout-card .card-header {
        padding: 10px 14px !important;
    }

    .checkout-card .card-header .title,
    .checkout-card .card-header h4 {
        font-size: 0.95rem !important;
    }

    .checkout-card .badge {
        font-size: 0.75rem !important;
        padding: 4px 10px !important;
    }

    .cart-item-compact {
        padding: 8px 12px !important;
    }

    .cart-item-compact .thumb {
        width: 55px !important;
        height: 55px !important;
        margin-right: 10px !important;
        border-radius: 8px;
    }

    .cart-item-compact .content {
        margin-left: 0 !important;
    }

    .cart-item-compact .content h6 {
        font-size: 0.8rem !important;
        margin-bottom: 2px !important;
        font-weight: 800 !important;
    }

    .cart-item-compact .content .text-primary {
        font-size: 0.85rem !important;
        font-weight: 800 !important;
    }

    .cart-item-compact .qty-controls {
        margin: 0 5px !important;
        padding: 1px 2px !important;
    }

    .cart-item-compact .qty-controls button {
        padding: 0 5px !important;
    }

    .cart-item-compact .qty-controls input {
        width: 28px !important;
        font-size: 0.85rem !important;
    }

    .cart-item-compact .item-total-price {
        font-size: 0.95rem !important;
        min-width: 70px !important;
    }

    .cart-item-compact .remove-item i {
        font-size: 1.1rem !important;
    }

    /* Total Payment Section */
    .checkout-card .card-body {
        padding: 12px 14px !important;
    }

    .order-summary-item {
        font-size: 0.85rem !important;
        margin-bottom: 5px !important;
    }

    .order-summary-item.total,
    .checkout-card h3 {
        font-size: 1.2rem !important;
    }

    .btn-place-order,
    .checkout-container .btn-primary {
        padding: 10px !important;
        font-size: 1rem !important;
        border-radius: 8px !important;
    }

    .checkout-card .h6,
    .checkout-card span,
    .checkout-card h4 {
        font-size: 0.85rem !important;
        font-weight: 700 !important;
    }

    #subtotal-val,
    #total-val,
    .val {
        font-weight: 800 !important;
    }

    .cart-item-compact .qty-controls {
        margin: 0 8px;
    }

    .cart-item-compact .qty-controls input {
        width: 30px;
        font-size: 13px;
    }

    .order-summary-item {
        font-size: 13px;
        margin-bottom: 8px;
    }

    .order-summary-item.total {
        font-size: 1rem;
    }

    .btn-place-order {
        padding: 12px;
        font-size: 1rem;
        border-radius: 10px;
    }

    /* Footer */
    footer .padding-top,
    footer .padding-bottom {
        padding-top: 35px;
        padding-bottom: 35px;
    }

    .footer__widget-about .logo img {
        max-height: 30px;
    }

    .footer__widget-about .addr {
        font-size: 13px;
    }

    .widget--title {
        font-size: 15px;
        margin-bottom: 10px;
    }

    .footer__links li {
        padding: 3px 0;
    }

    .footer__links li a {
        font-size: 12px;
    }

    .contact__info-title a {
        font-size: 13px;
    }

    .contact__info .info {
        font-size: 12px;
    }

    .footer-bottom {
        font-size: 12px;
    }

    .footer-bottom .left {
        font-size: 12px;
    }

    .footer-bottom img {
        max-height: 22px;
    }

    .social__icons li a {
        font-size: 18px;
        width: 36px;
        height: 36px;
        line-height: 36px;
    }

    /* Brand Cards */
    .brand-card {
        height: 65px;
        padding: 10px;
        border-radius: 8px;
    }

    .brand-logo img {
        max-height: 30px;
    }

    /* Old Product Cards (product-item-2) */
    .product-item-2 .product-thumb img {
        max-height: 130px;
    }

    .product-item-2 .product-content .title a {
        font-size: 13px;
    }

    .product-item-2 .product-content .price {
        font-size: 14px;
    }

    .product-item-2 .product-after-content .cmn-btn {
        min-width: 60px !important;
        font-size: 11px;
        padding: 6px 10px;
    }

    /* Reviews Section */
    .review-item .content .entry-meta {
        font-size: 13px;
    }

    /* Breadcrumb */
    .hero-section.bg--base {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    .breadcrumb {
        font-size: 13px;
    }

    /* Modals */
    #checkoutModal .modal-content {
        border-radius: 16px;
    }

    #checkoutModal .modal-header {
        padding: 16px;
    }

    #checkoutModal .form-label {
        font-size: 0.8rem;
    }

    #checkoutModal .form-control {
        padding: 10px 12px;
        font-size: 13px;
    }

    .checkout-modal .modal-title {
        font-size: 1rem;
    }

    /* General Typography */
    h2 {
        font-size: 22px;
    }

    h3 {
        font-size: 18px;
    }

    h4 {
        font-size: 16px;
    }

    h5 {
        font-size: 14px;
    }

    h6 {
        font-size: 13px;
    }

    /* Product detail page */
    .product-details-content .title {
        font-size: 20px;
    }

    /* Prevent horizontal overflow on mobile only for specific elements if needed */
}

/* Global Prevent Horizontal Overflow (Layout Shift Fix) */
html,
body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100%;
}


/* ===================================================================
   RESPONSIVE DESIGN — Extra small (≤400px)
   =================================================================== */
@media (max-width: 400px) {
    .deal-card .img-box {
        height: 115px;
    }

    .deal-card .content h4 {
        font-size: 12px;
    }

    .deal-card .price {
        font-size: 14px;
    }

    .deal-card .btn-buy {
        padding: 7px 10px;
        font-size: 11px;
    }

    .shopnix-product-card .img-box {
        height: 100px;
    }

    .shopnix-product-card h5 {
        font-size: 11px;
    }

    .shopnix-product-card .price {
        font-size: 13px;
    }

    .shopnix-product-card .buy-btn {
        padding: 4px 10px;
        font-size: 10px;
    }

    .main-hero-banner h1 {
        font-size: 20px;
    }

    .category-image-wrapper {
        width: 50px;
        height: 50px;
    }

    .category-nav-item {
        font-size: 10px;
        min-width: 60px;
    }

    .mini-banner-card {
        min-width: 180px;
        height: 80px;
    }

    .newsletter-box h2 {
        font-size: 18px;
    }

    .section-title {
        font-size: 16px;
    }
}

/* Minimalist Product Card UI (Kartify Shop Style) */
.minimal-product-card {
    transition: all 0.3s ease;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
}

.minimal-product-card .product-image-box {
    background: #f7f7f7;
    padding: 0 !important;
    margin-bottom: 0 !important;
    transition: all 0.3s ease;
}

.minimal-product-card .image-wrapper {
    aspect-ratio: 1 / 1.1;
    /* More compact height */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.minimal-product-card .image-wrapper img {
    max-height: 100%;
    transition: transform 0.5s ease;
}

.minimal-product-card:hover .image-wrapper img {
    transform: scale(1.05);
}

.minimal-product-card .product-category {
    font-size: 11px;
    letter-spacing: 0.5px;
}

.minimal-product-card .product-title a {
    font-size: 13px !important;
    /* Smaller title */
    font-weight: 600;
    color: #333 !important;
}

.minimal-product-card .product-actions-overlay {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(2px);
}

.minimal-product-card:hover .product-actions-overlay {
    transform: translateY(0);
    opacity: 1;
}

.minimal-product-card .action-btn {
    width: 38px;
    height: 38px;
    background: #fff;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s;
    border: none;
}

.minimal-product-card .action-btn:hover {
    background: var(--k-primary);
    color: #fff;
    transform: scale(1.1);
}

.minimal-product-card .action-btn.active {
    color: #ef4444;
}

/* Persistent Wishlist Button - Top Right */
.minimal-product-card .wishlist-top-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    z-index: 10;
    transition: all 0.3s ease;
    text-decoration: none;
}

.minimal-product-card .wishlist-top-btn:hover,
.minimal-product-card .wishlist-top-btn.active {
    background: #ff8000;
    color: #fff;
    transform: scale(1.1);
}

/* Color for current price */
.minimal-product-card .current-price {
    color: #222;
    font-size: 14px !important;
}

.minimal-product-card .old-price {
    margin-left: 5px;
}

/* Card-actions: wishlist heart + buy button row */
.minimal-product-card .card-actions {
    margin-top: 4px;
}

.minimal-product-card .card-bottom {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    flex-wrap: nowrap;
}

.minimal-product-card .card-icon-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    font-size: 18px;
    transition: all 0.25s ease;
    background: #fff;
    text-decoration: none;
}

.minimal-product-card .card-icon-btn:hover,
.minimal-product-card .card-icon-btn.active {
    border-color: #ef4444;
    color: #ef4444;
    background: #fff5f5;
}

.minimal-product-card .buy-now-btn {
    border-radius: 8px;
    font-size: 12px;
    /* Slightly smaller for fit */
    font-weight: 700;
    transition: all 0.25s ease;
    height: 32px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

/* Action Button - Small Cart Icon Box */
.minimal-product-card .cart-mini-btn,
.minimal-product-card .share-mini-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border: 1.2px solid #e2e8f0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 16px;
    transition: all 0.25s ease;
    background: #fff;
    text-decoration: none;
}

.minimal-product-card .cart-mini-btn:hover {
    border-color: #3b82f6;
    color: #3b82f6;
    background: #eff6ff;
}

.minimal-product-card .share-mini-btn:hover {
    border-color: var(--k-primary);
    color: var(--k-primary);
    background: #fffaf5;
}

/* Card image hover overlay – fade in from bottom */
.minimal-product-card .product-actions-overlay {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(2px);
    transform: translateY(100%);
    transition: all 0.3s ease;
}

.minimal-product-card:hover .product-actions-overlay {
    transform: translateY(0);
    opacity: 1 !important;
}

/* Backwards compatibility for older classes */
.premium-product-card {
    border: none !important;
}

/* x-small font helper */
.x-small {
    font-size: 0.75rem;
}

/* Mobile Adjustments */
@media (max-width: 575px) {
    .premium-product-card .card-content {
        padding: 10px !important;
    }

    .premium-product-card .product-title a {
        font-size: 13px !important;
        height: 36px !important;
    }

    .premium-product-card .current-price {
        font-size: 14px !important;
    }

    .premium-product-card .buy-now-btn {
        padding: 6px 4px !important;
        font-size: 9px !important;
    }

    .premium-product-card .action-icons a {
        font-size: 16px !important;
    }

    .premium-product-card .image-box {
        padding: 10px !important;
    }
}

.header-main {
    transition: all 0.3s ease;
    z-index: 1000;
}

.sticky-header.fixed-top {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    animation: slideDown 0.35s ease-out;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

.search-input-group {
    background: #fff;
    max-width: 700px;
    margin: 0 auto;
}

.search-input-group .form-control:focus {
    box-shadow: none;
}

.btn--search {
    background-color: var(--primary);
    color: #fff;
    transition: all 0.3s;
}

.btn--search:hover {
    background-color: #e68a00;
}

.shortcut-icons li a {
    position: relative;
    display: block;
    padding: 5px;
    transition: all 0.3s ease;
}

.shortcut-icons li a:hover {
    color: var(--primary) !important;
}

.shortcut-icons .badge {
    background-color: var(--primary);
    font-size: 10px;
    min-width: 18px;
    height: 18px;
    padding: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
}

/* --- Footer Styles --- */
.footer-section {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-social-icon {
    width: 35px;
    height: 35px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    transition: all 0.3s;
}

.footer-social-icon:hover {
    background: var(--primary);
    color: #fff;
    transform: translateY(-3px);
}

.footer-links li a {
    transition: all 0.3s;
}

.footer-links li a:hover {
    padding-left: 5px;
    color: var(--primary) !important;
}

.newsletter-form {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.newsletter-form .form-control::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.newsletter-form .btn--primary {
    background: var(--primary);
    color: #fff;
}

.border-white-10 {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.pt-60 {
    padding-top: 60px;
}

.pb-60 {
    padding-bottom: 60px;
}

.text-white-50 {
    color: rgba(255, 255, 255, 0.5) !important;
}


/* --- Hero Section Styles --- */
.rounded-8 {
    border-radius: 8px !important;
}

.category-sidebar-list li {
    border-bottom: 1px solid #f1f5f9;
    transition: all 0.3s;
}

.category-sidebar-list li:last-child {
    border-bottom: none;
}

.category-sidebar-list li:hover {
    background-color: #f8fafc;
}

.hero-slider .slider-content h1 {
    font-size: 42px;
    line-height: 1.2;
    max-width: 450px;
}

.promo-banner-card img {
    transition: transform 0.5s ease;
}

.promo-banner-card:hover img {
    transform: scale(1.05);
}

.btn--white-outline {
    border: 1px solid #fff;
    color: #fff;
    background: transparent;
    transition: all 0.3s;
}

.btn--white-outline:hover {
    background: #fff;
    color: var(--primary);
}

/* --- Horizontal Card Styles --- */
.premium-horizontal-card {
    border: 1px solid #f1f5f9;
    background: #fff;
    border-radius: 8px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all 0.3s ease;
    height: 100%;
}

.premium-horizontal-card:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-3px);
    border-color: var(--k-primary);
}

.premium-horizontal-card .product-thumb {
    width: 90px;
    height: 90px;
    flex-shrink: 0;
}

.premium-horizontal-card .product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #f8f9fa;
    padding: 5px;
    border-radius: 4px;
}

.premium-horizontal-card .product-info {
    flex-grow: 1;
}

.premium-horizontal-card .product-info .product-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 5px;
    line-height: 1.4;
}

.premium-horizontal-card .product-info .ratings {
    font-size: 11px;
    margin-bottom: 5px;
}

.premium-horizontal-card .product-info .price {
    font-size: 16px;
    font-weight: 700;
    color: #4b5563;
}

.cart-action-box {
    width: 38px;
    height: 38px;
    border: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: #4b5563;
    transition: all 0.2s;
    flex-shrink: 0;
}

.cart-action-box:hover {
    background: var(--k-primary);
    color: #fff;
    border-color: var(--k-primary);
}

.btn--dark-outline {
    border: 1px solid #1c2733;
    color: #1c2733;
    background: transparent;
    transition: all 0.3s;
}

.btn--dark-outline:hover {
    background: #1c2733;
    color: #fff;
}

.hover-shadow-md:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
}

.fs-10 {
    font-size: 10px !important;
}

.uppercase {
    text-transform: uppercase !important;
}

.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Hero Redesign V2 (Purple / Dark) --- */
.hero-area {
    padding-top: 20px !important;
}

/* Left Stacked Cards */
.hero-left-card {
    border-radius: 12px;
    padding: 0;
    display: flex;
    align-items: stretch;
    gap: 0;
    color: white;
    text-decoration: none;
    margin-bottom: 10px;
    transition: 0.3s;
    height: calc((100% - 20px) / 3);
    max-height: 100px;
    overflow: hidden;
}

.hero-left-card:last-child {
    margin-bottom: 0;
}

.hero-left-card.bg-purple {
    background: linear-gradient(135deg, #6b46c1, #5a67d8);
}

.hero-left-card.bg-blue {
    background: linear-gradient(135deg, #4299e1, #3182ce);
}

.hero-left-card.bg-teal {
    background: linear-gradient(135deg, #0bc5ea, #00b5d8);
}

.hero-left-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.hero-left-card .img-wrap {
    width: 50%;
    height: 100%;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.hero-left-card .img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: normal;
}

.hero-left-card .content {
    flex: 1;
    width: 50%;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.hero-left-card .content h4 {
    color: #fff;
    font-size: 12.5px;
    font-weight: 800;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hero-left-card .content p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 9.5px;
    margin: 0 0 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.hero-left-card .price-view-box {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.28);
    padding: 6px 12px;
    border-radius: 12px;
    color: #fff;
    transition: 0.3s;
    width: fit-content;
}

.hero-left-card .price-view-box .price {
    font-size: 13px;
    font-weight: 800;
}

.hero-left-card .price-view-box .sep {
    opacity: 0.6;
    font-weight: 300;
}

.hero-left-card .price-view-box .view {
    font-size: 11.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
}

.hero-left-card:hover .price-view-box {
    background: rgba(255, 255, 255, 0.4);
    transform: translateX(3px);
}




/* Middle Main Dark Card */
.hero-main-slider {
    border-radius: 16px;
    overflow: hidden;
    background: transparent !important;
    height: 290px;
}

.hero-middle-card {
    background: #111827;
    border-radius: 16px;
    display: flex;
    overflow: hidden;
    position: relative;
    padding: 0;
    height: 100%;
}

.hero-middle-card .content-area {
    width: 50%;
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-middle-card .tagline {
    color: #9ca3af;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 2px;
    font-weight: 600;
    font-family: 'Outfit', sans-serif;
}

.hero-middle-card h1 {
    color: #1dd8df;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 8px;
    font-family: 'Outfit', sans-serif;
}

.hero-middle-card p {
    color: #d1d5db;
    font-size: 10.5px;
    margin-bottom: 12px;
    line-height: 1.4;
    max-width: 250px;
}

.btn-blue {
    background: #3b82f6;
    color: #fff;
    border-radius: 6px;
    padding: 6px 16px;
    font-weight: 600;
    font-size: 11.5px;
    text-decoration: none;
    display: inline-block;
    transition: 0.3s;
    border: none;
}

.btn-blue:hover {
    background: #2563eb;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.hero-middle-card .image-area {
    width: 50%;
    position: relative;
    padding: 10px;
    display: flex;
    align-items: stretch;
}

.hero-middle-card .image-area .img-inner {
    width: 100%;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-middle-card .image-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

.hero-middle-card .overlay-btn {
    bottom: 10px;
    left: 10px;
    z-index: 10;
    font-size: 11px;
    padding: 6px 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.circle-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    background: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    z-index: 12;
}

.circle-badge .pct {
    color: #3b82f6;
    font-weight: 900;
    font-size: 15px;
    line-height: 1;
}

.circle-badge .txt {
    color: #3b82f6;
    font-weight: 800;
    font-size: 9px;
    line-height: 1;
}

/* Right Column: Tall Purple Card */
.hero-right-card {
    border-radius: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    height: 100%;
}

.hero-right-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.hero-right-card .card-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: transform 0.6s ease;
}

.hero-right-card:hover .card-bg-img {
    transform: scale(1.08);
}

.hero-right-card .card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 15%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0) 100%);
    z-index: 2;
}

.hero-right-card .badge-top {
    position: absolute;
    top: 15px;
    left: 15px;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    font-size: 11px;
    padding: 5px 14px;
    border-radius: 20px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 3;
}

.hero-right-card .title-area {
    position: relative;
    padding: 25px 20px;
    z-index: 3;
    pointer-events: none;
}

.hero-right-card .title-area h3 {
    color: #fff;
    font-size: 22px;
    font-weight: 900;
    margin-bottom: 5px;
    line-height: 1.1;
    letter-spacing: -0.5px;
}

.hero-right-card .title-area p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 500;
    margin: 0;
}


/* ==========================================================================
   KARTIFY THEME REDESIGN STYLES
   ========================================================================== */

/* --- Header Redesign --- */
.kartify-header {
    font-family: 'Inter', sans-serif;
}

.k-top-header {
    background-color: var(--k-dark);
    color: var(--k-white);
    padding: 8px 0;
    font-size: 13px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.k-top-header a {
    color: var(--k-white);
    text-decoration: none;
    transition: 0.3s;
}

.k-top-header a:hover {
    color: var(--k-primary);
}

.promo-ticker {
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.k-middle-header {
    background-color: var(--k-dark);
    padding: 15px 0;
    /* Reduced from 20px */
    color: var(--k-white);
}

.k-search-bar {
    max-width: 650px;
    width: 100%;
}

.k-search-group {
    display: flex;
    background: var(--k-white);
    border-radius: 4px;
    overflow: hidden;
}

.k-search-cat {
    border: none;
    border-right: 1px solid #eee;
    padding: 0 15px;
    font-size: 14px;
    color: #444;
    outline: none;
    background: #fdfdfd;
}

.k-search-input {
    border: none;
    padding: 10px 20px;
    width: 100%;
    outline: none;
    font-size: 14px;
}

.k-search-btn {
    background-color: var(--k-primary);
    color: var(--k-white);
    border: none;
    padding: 0 25px;
    font-size: 18px;
    transition: 0.3s;
}

.k-search-btn:hover {
    background-color: #e67300;
}

.k-contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.k-contact-item i {
    font-size: 28px;
    color: var(--k-primary);
}

.k-contact-item .label {
    display: block;
    font-size: 11px;
    color: #999;
}

.k-contact-item .val {
    display: block;
    font-weight: 700;
    font-size: 14px;
}

.k-nav-icons {
    display: flex;
    gap: 20px;
    font-size: 22px;
}

.k-icon-link {
    position: relative;
    color: var(--k-white);
}

.k-badge {
    position: absolute;
    top: -5px;
    right: -10px;
    background: var(--k-primary);
    color: white;
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 50%;
    font-weight: 700;
}

.k-bottom-header {
    background-color: var(--k-white);
    border-bottom: 1px solid #eee;
    padding: 0;
}

.k-cat-btn {
    background-color: var(--k-primary);
    color: white;
    padding: 10px 25px;
    /* Reduced from 12px */
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 14px;
}

.k-nav-links {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 30px;
}

.k-nav-links li a {
    color: #333;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    padding: 12px 0;
    /* Reduced from 15px */
    display: block;
    text-transform: uppercase;
    transition: 0.3s;
}

.k-nav-links li a:hover {
    color: var(--k-primary);
}

/* Sticky Header */
.sticky-header.k-middle-header,
.sticky-header.k-bottom-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Mobile Adjustments */
@media (max-width: 991px) {
    .k-middle-header {
        padding: 15px 0;
    }

    .k-search-bar {
        max-width: 100%;
        margin-top: 15px;
    }
}

/* --- Hero Section Refinement --- */
.hero-area {
    background: #f9f9f9;
}

.category-sidebar-header {
    background-color: var(--k-dark-light) !important;
    text-transform: uppercase;
    font-size: 14px;
}

.category-sidebar-list li {
    border-bottom: 1px solid #f1f1f1 !important;
    transition: 0.3s;
}

.category-sidebar-list li:hover {
    padding-left: 30px !important;
    background: #fbfbfb;
}

.category-sidebar-list li a {
    color: #444 !important;
    font-weight: 500;
}

.main-slider .btn--base {
    background-color: var(--k-primary) !important;
    border-color: var(--k-primary) !important;
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
}

.promo-banner-card {
    transition: 0.3s;
}

.promo-banner-card:hover {
    transform: translateY(-5px);
}

.promo-content h3 {
    font-weight: 800 !important;
    text-transform: uppercase;
}

.btn--white-outline {
    border: 2px solid white !important;
    color: white !important;
    font-weight: 700 !important;
    border-radius: 4px !important;
}

.btn--white-outline:hover {
    background: white !important;
    color: var(--k-primary) !important;
}

/* --- Category Ribbon Redesign (Ref 1084) --- */
.category-ribbon {
    padding: 12px 0 !important;
    background: #fff;
    margin-top: 5px !important;
    margin-bottom: 15px !important;
    position: relative;
    z-index: 10;
    border-bottom: 1px solid #f1f5f9;
}

.category-ribbon {
    padding: 15px 0 5px;
    /* Reduced vertical padding */
    background: #fff;
    border-bottom: 1px solid #f1f5f9;
}

.category-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    /* Reduced gap */
    text-decoration: none !important;
    padding: 4px;
    transition: all 0.3s ease;
}

.category-image-wrapper {
    width: 60px;
    /* Sized down slightly for a tighter look */
    height: 60px;
    border-radius: 50% !important;
    background: #f8fafc !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid #e2e8f0 !important;
    padding: 10px;
}

/* Active solid pill design */
.category-nav-item.active .category-image-wrapper {
    background: var(--k-primary) !important;
    border-color: var(--k-primary) !important;
    box-shadow: 0 5px 15px rgba(255, 122, 0, 0.3) !important;
    /* Glow matching primary */
    transform: translateY(-2px);
}

.category-nav-item.active .category-icon {
    filter: brightness(0) invert(1);
    /* Make icon white */
}

.category-nav-item.active span {
    color: var(--k-primary) !important;
    font-weight: 700 !important;
}

.category-nav-item:hover .category-image-wrapper {
    transform: translateY(-3px);
    border-color: var(--k-primary) !important;
    background: #fff !important;
    box-shadow: 0 8px 20px rgba(255, 122, 0, 0.12);
}

.category-image-wrapper img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    transition: 0.3s;
}

.category-nav-item span {
    color: #475569 !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    /* Slightly smaller for premium feel */
    text-align: center;
    white-space: nowrap;
    transition: 0.3s;
}

.category-nav-item:hover span {
    color: var(--k-primary) !important;
}

/* --- Sticky Header Fixes --- */
.k-middle-header.sticky-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1001 !important;
}

.k-bottom-header.sticky-header {
    position: sticky !important;
    top: 84px !important;
    /* Height of middle header */
    z-index: 1000 !important;
}

@media (max-width: 991px) {
    .k-bottom-header.sticky-header {
        top: 0 !important;
        /* On mobile, only middle header or navbar might be sticky */
    }
}


/* Ensure header is not absolutely positioned */
.kartify-header {
    position: relative;
    z-index: 100;
}

/* --- Direct Sticky Fixes (Removing .sticky-header requirement) --- */
.k-middle-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1100 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.k-bottom-header {
    position: sticky !important;
    top: 84px !important;
    /* Fixed height of middle header */
    z-index: 1090 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

@media (max-width: 991px) {
    .k-bottom-header {
        position: relative !important;
        top: 0 !important;
    }
}

/* --- New Header Redesign --- */
.k-top-promo-banner {
    background: #ffffff;
    border-bottom: 1px solid #f1f5f9;
    padding: 8px 0;
    position: relative;
    overflow: hidden;
}

.k-promo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.k-promo-title {
    font-size: 24px;
    font-weight: 900;
    color: #ff3e3e;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.k-promo-offer {
    background: #ff3e3e;
    color: #fff;
    padding: 4px 15px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
}

.k-promo-discount {
    font-size: 18px;
    font-weight: 800;
    color: #1e293b;
}

.k-promo-close {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 18px;
    color: #64748b;
}

.k-middle-header {
    background-color: #0066FF !important;
    padding: 15px 0 !important;
    color: #ffffff !important;
}

.k-middle-header .logo img {
    filter: brightness(0) invert(1);
    /* Make logo white if it's dark */
    max-height: 40px;
}

/* Specific for Kartify Logo in image */
.kartify-logo-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none !important;
}

.kartify-logo-text {
    font-size: 28px;
    font-weight: 800;
    color: #ffffff !important;
    letter-spacing: -0.5px;
}

.kartify-logo-icon {
    background: #FFD700;
    padding: 5px;
    border-radius: 5px;
    color: #000;
}

.k-search-group {
    background: #ffffff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    overflow: hidden;
    text-decoration: none !important;
    padding: 4px;
    transition: all 0.3s ease;
}

.category-image-wrapper {
    width: 60px;
    /* Sized down slightly for a tighter look */
    height: 60px;
    border-radius: 50% !important;
    background: #f8fafc !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid #e2e8f0 !important;
    padding: 10px;
}

/* Active solid pill design */
.category-nav-item.active .category-image-wrapper {
    background: var(--k-primary) !important;
    border-color: var(--k-primary) !important;
    box-shadow: 0 5px 15px rgba(255, 122, 0, 0.3) !important;
    /* Glow matching primary */
    transform: translateY(-2px);
}

.category-nav-item.active .category-icon {
    filter: brightness(0) invert(1);
    /* Make icon white */
}

.category-nav-item.active span {
    color: var(--k-primary) !important;
    font-weight: 700 !important;
}

.category-nav-item:hover .category-image-wrapper {
    transform: translateY(-3px);
    border-color: var(--k-primary) !important;
    background: #fff !important;
    box-shadow: 0 8px 20px rgba(255, 122, 0, 0.12);
}

.category-image-wrapper img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    transition: 0.3s;
}

.category-nav-item span {
    color: #475569 !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    /* Slightly smaller for premium feel */
    text-align: center;
    white-space: nowrap;
    transition: 0.3s;
}

.category-nav-item:hover span {
    color: var(--k-primary) !important;
}

/* --- Sticky Header Fixes --- */
.k-middle-header.sticky-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1001 !important;
}

.k-bottom-header.sticky-header {
    position: sticky !important;
    top: 84px !important;
    /* Height of middle header */
    z-index: 1000 !important;
}

@media (max-width: 991px) {
    .k-bottom-header.sticky-header {
        top: 0 !important;
        /* On mobile, only middle header or navbar might be sticky */
    }
}


/* Ensure header is not absolutely positioned */
.kartify-header {
    position: relative;
    z-index: 100;
}

/* --- Direct Sticky Fixes (Removing .sticky-header requirement) --- */
.k-middle-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1100 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.k-bottom-header {
    position: sticky !important;
    top: 84px !important;
    /* Fixed height of middle header */
    z-index: 1090 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

@media (max-width: 991px) {
    .k-bottom-header {
        position: relative !important;
        top: 0 !important;
    }
}

/* --- Compact Grid for Product Cards --- */
@media (min-width: 992px) {
    .col-lg-2-4 {
        flex: 0 0 20% !important;
        max-width: 20% !important;
    }
}

@media (min-width: 1400px) {
    .col-xl-2 {
        flex: 0 0 16.666% !important;
        max-width: 16.666% !important;
    }
}

/* --- New Header Redesign --- */
.kartify-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 10000 !important;
    transition: all 0.3s ease-in-out !important;
    width: 100% !important;
}

.kartify-header.is-sticky {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
}

.kartify-header.is-sticky .k-middle-header {
    padding: 8px 0 !important;
    /* Slightly more compact on scroll */
}

.k-top-promo-banner {
    background: #ffffff;
    border-bottom: 1px solid #f1f5f9;
    padding: 8px 0;
    position: relative;
    overflow: hidden;
}

.k-promo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.k-promo-title {
    font-size: 24px;
    font-weight: 900;
    color: #ff3e3e;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.k-promo-offer {
    background: #ff3e3e;
    color: #fff;
    padding: 4px 15px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
}

.k-promo-discount {
    font-size: 18px;
    font-weight: 800;
    color: #1e293b;
}

.k-promo-close {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 18px;
    color: #64748b;
}

.k-middle-header {
    background-color: #0066FF !important;
    padding: 15px 0 !important;
    color: #ffffff !important;
    font-weight: 500 !important;
}

.k-middle-header .logo img {
    filter: brightness(0) invert(1);
    /* Make logo white if it's dark */
    max-height: 40px;
}

/* Specific for Kartify Logo in image */
.kartify-logo-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none !important;
}

.kartify-logo-text {
    font-size: 28px;
    font-weight: 800;
    color: #ffffff !important;
    letter-spacing: -0.5px;
}

.kartify-logo-icon {
    background: #FFD700;
    padding: 5px;
    border-radius: 5px;
    color: #000;
}

/* --- Consolidated Search Bar Redesign --- */
.k-search-group {
    background: #ffffff !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    height: 46px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
    position: relative;
    width: 100% !important;
}

/* Native select should be hidden but present for nice-select init */
.k-search-cat {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Styled Dropdown (nice-select) */
.k-search-group .nice-select {
    flex: 0 0 115px !important;
    /* Narrow fixed width for category */
    max-width: 115px !important;
    height: 100% !important;
    background-color: #f1f3f4 !important;
    border: none !important;
    border-right: 1px solid #e0e0e0 !important;
    border-radius: 8px 0 0 8px !important;
    line-height: 46px !important;
    padding-left: 12px !important;
    padding-right: 25px !important;
}

.k-search-group .nice-select:after {
    border-bottom: 2px solid #5f6368 !important;
    border-right: 2px solid #5f6368 !important;
    width: 6px !important;
    height: 6px !important;
    margin-top: -4px !important;
    right: 12px !important;
}

.k-search-group .nice-select .current {
    color: #5f6368 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
}

/* Search Input field */
.k-search-input {
    flex: 1 !important;
    /* Occupy remaining space */
    border: none !important;
    padding: 0 15px !important;
    font-size: 14px !important;
    color: #202124 !important;
    background: transparent !important;
    height: 100% !important;
    min-width: 0 !important;
}

.k-search-input::placeholder {
    color: #5f6368 !important;
    opacity: 0.8 !important;
}

/* Search Button */
.k-search-btn {
    background-color: #4e8eff !important;
    color: #ffffff !important;
    border-radius: 0 8px 8px 0 !important;
    width: 55px !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    border: none !important;
    transition: background 0.2s ease !important;
}

.k-search-btn:hover {
    background-color: #3b7ef1 !important;
}

/* Responsive adjustment */
@media (max-width: 767px) {
    .k-search-group .nice-select {
        flex: 0 0 100px !important;
        max-width: 100px !important;
        padding-left: 8px !important;
        padding-right: 20px !important;
    }
}

.k-contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.k-contact-item i {
    font-size: 28px !important;
    color: #ffffff !important;
}

.k-contact-item .label {
    display: block;
    font-size: 13px !important;
    color: #ffffff !important;
    font-weight: 200 !important;
    opacity: 1 !important;
}

.k-contact-item .val {
    display: block;
    font-weight: 400 !important;
    font-size: 16px !important;
    color: #ffffff !important;
    white-space: nowrap !important;
}

.k-nav-icons {
    display: flex;
    align-items: center;
    gap: 20px;
}

.k-icon-link {
    color: #ffffff !important;
    font-size: 28px !important;
    position: relative;
    font-weight: 700 !important;
}

.k-icon-link .k-badge {
    position: absolute;
    top: -5px;
    right: -10px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 700;
}

.k-bottom-header {
    background-color: #ffffff !important;
    padding: 10px 0 !important;
    border-bottom: 2px solid #f1f5f9 !important;
}

.k-cat-btn {
    background-color: #0066FF !important;
    color: #ffffff !important;
    border-radius: 5px !important;
    font-weight: 600 !important;
    height: 45px;
    display: flex;
    align-items: center;
    padding: 0 25px !important;
    gap: 10px;
    text-transform: none !important;
    white-space: nowrap;
}

.k-nav-links {
    display: flex;
    gap: 25px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.k-nav-links li a {
    color: #1e293b !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    display: flex;
    align-items: center;
    gap: 5px;
}

.k-nav-links li a i {
    font-size: 12px;
    opacity: 0.5;
}

/* Mobile Adjustments */
@media (max-width: 991px) {
    .k-middle-header {
        padding: 10px 0 !important;
    }

    .k-nav-icons {
        gap: 15px;
    }
}

/* --- Category Sidebar --- */
#category-sidebar-area {
    left: 0 !important;
    right: auto !important;
    transform: translateX(-350px) !important;
    background-color: #ffffff !important;
    padding: 0 !important;
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.1) !important;
    z-index: 100000 !important;
}

#category-sidebar-area.active {
    transform: translateX(0) !important;
}

.category-sidebar-links {
    display: flex;
    flex-direction: column;
}

.cat-link-item {
    padding: 12px 20px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
    transition: all 0.2s ease;
}

.cat-link-item:hover {
    background-color: #f8fafc;
    padding-left: 25px !important;
}

.cat-link-item .icon {
    font-size: 20px;
    width: 30px;
    display: inline-flex;
}

.cat-link-item .text {
    font-size: 15px;
    color: #1e293b;
}

.badge-hot {
    background: #FFE4E6 !important;
    color: #E11D48 !important;
    font-weight: 700 !important;
}

.badge-new {
    background: #DCFCE7 !important;
    color: #16A34A !important;
    font-weight: 700 !important;
}

.cat-link-item i.la-angle-right {
    font-size: 12px;
    color: #64748b;
}

#category-sidebar-area .top-content {
    background-color: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 0 !important;
    padding: 20px !important;
}

#category-sidebar-area .side-sidebar-close-btn {
    color: #1e293b !important;
    background: transparent !important;
    border: none !important;
}

/* --- Top Promo Banner Styles --- */
.k-top-promo-banner {
    background: linear-gradient(90deg, #f0f9ff 0%, #ffffff 30%, #ffffff 70%, #f0f9ff 100%),
        radial-gradient(at 0% 0%, rgba(59, 130, 246, 0.08) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(99, 102, 241, 0.08) 0px, transparent 50%) !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    position: relative;
    z-index: 1000;
}

.k-top-promo-banner .container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.k-promo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: nowrap;
}

.k-promo-deco {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.k-promo-deco:hover {
    transform: scale(1.1);
}

.k-promo-title {
    color: #ef4444 !important;
    font-weight: 800 !important;
    font-size: 18px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.k-promo-offer {
    background: #ef4444 !important;
    color: #ffffff !important;
    padding: 6px 15px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    display: flex;
    align-items: center;
}

.k-promo-offer span {
    opacity: 0.9;
    font-weight: 400;
}

.k-promo-discount {
    color: #1e293b !important;
    font-weight: 800 !important;
    font-size: 18px !important;
    text-transform: uppercase;
}

.k-promo-close {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #64748b;
    font-size: 20px;
    transition: all 0.2s ease;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.k-promo-close:hover {
    color: #ef4444;
    transform: translateY(-50%) rotate(90deg);
}

@media (max-width: 1199px) {
    .k-promo-container {
        gap: 15px;
    }

    .k-promo-title,
    .k-promo-discount {
        font-size: 16px !important;
    }
}

/* --- Top Promo Banner --- */
.k-top-promo-banner {
    background-color: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    overflow: hidden;
    position: relative;
    z-index: 10001;
    text-align: center;
}

/* --- Luxury Structured Promo Banner --- */
.k-top-promo-banner {
    background: linear-gradient(90deg, #f0f9ff 0%, #ffffff 30%, #ffffff 70%, #f0f9ff 100%),
        radial-gradient(at 0% 0%, rgba(59, 130, 246, 0.08) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(99, 102, 241, 0.08) 0px, transparent 50%) !important;
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid #e2e8f0 !important;
    overflow: hidden;
    position: relative;
    z-index: 10001;
    height: 65px;
    /* Compact, high-end height */
}

.promo-wrapper {
    display: flex;
    justify-content: center;
    /* Centered layout for cohesion */
    align-items: center;
    width: 100%;
    height: 65px;
    text-decoration: none !important;
    gap: 30px;
    /* Refined gap for shorter height */
}

.promo-left,
.promo-center,
.promo-right {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 15px;
}

.promo-img {
    height: 65px;
    /* Scaled to new height */
    width: auto;
    object-fit: contain;
}

.promo-fruit-img {
    height: 50px;
    width: auto;
    object-fit: contain;
}

.promo-sale-text {
    font-family: 'Outfit', sans-serif;
    font-size: 26px;
    /* Slightly more compact */
    font-weight: 900;
    color: #1a73e8;
    /* High-end Brand Blue */
    letter-spacing: -0.5px;
    text-transform: uppercase;
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 1);
}

.promo-time-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    /* Semi-transparent for bg visibility */
    border: 1px solid #e2e8f0;
    padding: 4px 12px;
    border-radius: 5px;
    line-height: 1.1;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.promo-time-box .lbl {
    font-size: 9px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.promo-time-box .exp {
    font-size: 13px;
    font-weight: 800;
    color: #ef4444;
}

.promo-discount-tag {
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
    white-space: nowrap;
}

.promo-discount-tag .highlight {
    color: #ef4444;
}

@media (max-width: 1400px) {
    .promo-wrapper {
        gap: 15px;
    }

    .promo-sale-text {
        font-size: 22px;
    }
}

@media (max-width: 1100px) {

    .promo-left,
    .promo-right img {
        display: none !important;
    }

    /* Hide heavy assets for tablets */
}

@media (max-width: 768px) {
    .k-top-promo-banner {
        display: none;
    }

    /* Focus on mobile viewport clarity */
}

.promo-close-btn {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.1);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1e293b;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

.promo-close-btn:hover {
    background: rgba(0, 0, 0, 0.2);
    color: #000;
}

@media (max-width: 767px) {
    .k-top-promo-banner .banner-img {
        max-height: 45px;
        object-fit: cover;
    }

    .promo-close-btn {
        right: 10px;
        width: 24px;
        height: 24px;
        font-size: 14px;
    }
}

.promo-close-btn {
    right: 10px;
    width: 24px;
    height: 24px;
    font-size: 14px;
}

/* --- Promo Grid Section --- */
.promo-grid-section {
    padding-bottom: 20px !important;
}

.promo-card {
    border-radius: 16px;
    overflow: hidden;
    height: 100%;
    position: relative;
    padding: 12px;
    transition: all 0.4s ease;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.promo-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
}

.promo-card-teal {
    background: linear-gradient(135deg, #e0faff 0%, #ffffff 50%, #f0f9ff 100%);
}

.promo-card-green {
    background: linear-gradient(135deg, #f0fff4 0%, #ffffff 50%, #f0fdf4 100%);
}

.promo-card-orange {
    background: linear-gradient(135deg, #fffaf0 0%, #ffffff 50%, #fff7ed 100%);
}

.promo-card-blue {
    background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 50%, #eff6ff 100%);
}

.promo-card .brand-name {
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
    display: block;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.promo-card .product-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 5px;
    line-height: 1.3;
}

.promo-card .tagline {
    font-size: 14px;
    color: #ff7a00;
    font-weight: 600;
    margin-bottom: 20px;
}

.promo-image-main {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
    min-height: 220px;
}

.promo-image-main .main-img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    z-index: 2;
}

.promo-secondary-img {
    position: absolute;
    right: -10px;
    top: 20px;
    width: 60%;
    z-index: 1;
    opacity: 0.8;
}

.promo-secondary-img img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.promo-content-bottom {
    margin-top: auto;
}

.promo-desc {
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.promo-price-wrap {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 15px;
}

.promo-price-wrap .price {
    font-size: 18px;
    font-weight: 800;
    color: #16a34a;
}

.promo-price-wrap .old-price {
    font-size: 14px;
    color: #94a3b8;
    text-decoration: line-through;
}

.promo-link {
    font-size: 14px;
    font-weight: 700;
    color: #0066ff;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: gap 0.3s ease;
}

.promo-link:hover {
    gap: 10px;
}

@media (max-width: 991px) {
    .promo-card {
        padding: 8px;
    }

    .promo-image-main {
        min-height: 180px;
    }
}

/* --- Home Grid Section --- */
.home-grid-section {
    padding: 30px 0;
    background-color: #f8fafc;
}

.home-grid-card {
    background: #ffffff;
    border-radius: 4px;
    padding: 24px;
    height: 100%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
}

.home-grid-card .grid-card-title {
    font-size: 19px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 20px;
    line-height: 1.3;
    min-height: 50px;
}

/* Column 1: List View */
.card-list-view {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.thumb-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 0 0 50px;
}

.thumb-item {
    width: 48px;
    height: 48px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
    padding: 4px;
}

.thumb-item.active {
    border-color: #0066ff;
    box-shadow: 0 0 0 1px #0066ff;
}

.thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.main-img-wrap {
    flex: 1;
    text-align: center;
    padding: 10px;
}

.main-img-wrap img {
    max-width: 100%;
    height: auto;
    max-height: 180px;
    object-fit: contain;
}

/* Column 2: Slider View */
.card-slider-view {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background: #f1f5f9;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #64748b;
    cursor: pointer;
    z-index: 2;
    transition: all 0.2s;
}

.slider-nav:hover {
    background: #e2e8f0;
    color: #1e293b;
}

.slider-prev {
    left: -5px;
}

.slider-next {
    right: -5px;
}

.slider-img-wrap {
    text-align: center;
}

.slider-img-wrap img {
    max-width: 100%;
    height: auto;
    max-height: 220px;
    object-fit: contain;
}

/* Column 3 & 4: Grid View */
.card-grid-view {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.grid-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-decoration: none;
}

.grid-img-wrap {
    background: #f8fafc;
    border-radius: 4px;
    padding: 15px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.grid-item:hover .grid-img-wrap {
    background: #f1f5f9;
    transform: translateY(-2px);
}

.grid-img-wrap img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.grid-item span {
    font-size: 13px;
    font-weight: 500;
    color: #475569;
}

/* Info Section (at the bottom of cards) */
.card-info-footer {
    margin-top: auto;
    padding-top: 15px;
}

.card-info-footer .p-title {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 8px;
    display: block;
    line-height: 1.4;
}

.card-info-footer .p-price {
    font-size: 19px;
    font-weight: 800;
    color: #059669;
}

.card-info-footer .p-old-price {
    font-size: 14px;
    color: #94a3b8;
    text-decoration: line-through;
    margin-left: 8px;
}

/* Premium Cart Sidebar Redesign */
#cart-sidebar-area {
    background-color: #ffffff !important;
    color: #1e293b !important;
    width: 400px;
    max-width: 90%;
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
}

#cart-sidebar-area .cart-sidebar-header {
    padding: 24px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#cart-sidebar-area .cart-sidebar-header h4 {
    margin: 0;
    font-weight: 800;
    font-size: 1.25rem;
    color: #1e293b;
}

#cart-sidebar-area .side-sidebar-close-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f1f5f9;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s;
}

#cart-sidebar-area .side-sidebar-close-btn:hover {
    background: #e2e8f0;
    color: #1e293b;
    transform: rotate(90deg);
}

#cart-sidebar-area .cart--products {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}


/* Cart Item Card */
.cart-item-card {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    position: relative;
    padding-bottom: 24px;
    border-bottom: 1px solid #f8fafc;
}

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

.cart-item-card .img-wrap {
    width: 80px;
    height: 80px;
    background: #f8fafc;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    flex-shrink: 0;
}

.cart-item-card .img-wrap img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.cart-item-card .item-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cart-item-card .item-details .item-title {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 4px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
}

.cart-item-card .item-details .item-rating {
    display: flex;
    gap: 2px;
    margin-bottom: 6px;
}

.cart-item-card .item-details .item-rating i {
    font-size: 12px;
    color: #fbbf24;
}

.cart-item-card .item-details .item-rating i.inactive {
    color: #e2e8f0;
}

.cart-item-card .item-details .item-price {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.cart-item-card .item-details .item-price .new-price {
    font-weight: 700;
    color: #10b981;
    font-size: 15px;
}

.cart-item-card .item-details .item-price .old-price {
    font-size: 13px;
    color: #94a3b8;
    text-decoration: line-through;
}

/* Sidebar Quantity Switcher */
.sidebar-qty-controls {
    display: flex;
    align-items: center;
    background: #f8fafc;
    border-radius: 8px;
    width: fit-content;
}

.sidebar-qty-controls .qty-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 14px;
    transition: all 0.2s;
    cursor: pointer;
}

.sidebar-qty-controls .qty-btn:hover {
    color: #1e293b;
    background: #f1f5f9;
}

.sidebar-qty-controls .qty-input {
    width: 30px;
    text-align: center;
    border: none;
    background: transparent;
    font-weight: 700;
    font-size: 13px;
    color: #1e293b;
}

.sidebar-qty-controls .trash-btn {
    border-right: 1px solid #e2e8f0;
    color: #94a3b8;
}

.sidebar-qty-controls .trash-btn:hover {
    color: #ef4444;
}

/* Shipping Progress Bar */
.shipping-progress-area {
    background: #ffffff;
    padding: 20px 24px;
    border-top: 1px solid #f1f5f9;
}

.shipping-progress-area .progress-msg {
    font-size: 13px;
    color: #475569;
    margin-bottom: 12px;
}

.shipping-progress-area .progress-msg b {
    color: #1e293b;
    font-weight: 700;
}

.shipping-progress-bar-wrap {
    height: 8px;
    background: #f1f5f9;
    border-radius: 10px;
    position: relative;
    margin-bottom: 8px;
}

.shipping-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%);
    border-radius: 10px;
    position: relative;
}

.shipping-progress-bar-fill .truck-icon {
    position: absolute;
    right: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background: #f59e0b;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
    z-index: 2;
}

/* Premium Sidebar Components */
.cart-item-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.qty-control-box {
    display: flex;
    align-items: center;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 6px;
    margin-left: auto;
    /* Push to right */
}

.qty-control-box .btn {
    border: none;
    background: transparent;
    padding: 6px 10px;
    color: #64748b;
    transition: all 0.2s;
}

.qty-control-box .btn:hover {
    color: #111827;
}

.qty-control-box .qty-text {
    font-size: 13px;
    font-weight: 700;
    color: #111827;
    min-width: 24px;
    text-align: center;
}

/* Shipping Tracker Style */
.shipping-tracker {
    padding: 24px;
}

.progress-wrap {
    background: #f1f5f9;
    overflow: visible;
}

.truck-btn {
    border: 2px solid #fff;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Footer & Buttons */
.cart-footer .label {
    text-transform: capitalize;
    letter-spacing: -0.5px;
}

.footer-btns {
    width: 100%;
}

.footer-btns .btn {
    flex: 1;
    border-radius: 8px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.footer-btns .btn-dark {
    background: #111827 !important;
}

.footer-btns .btn-outline-dark {
    background: #f8fafc !important;
    border: 1px solid #111827 !important;
}

.footer-btns .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}


/* Premium Header Styles */
.k-middle-header {
    background-color: #006aff !important;
    /* Premium Blue from screenshot */
    padding: 15px 0 !important;
}

.k-nav-icons {
    display: flex;
    align-items: center;
    gap: 20px;
}

.k-icon-link {
    color: #ffffff !important;
    font-size: 24px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.k-icon-link:hover {
    transform: scale(1.1);
    opacity: 0.9;
}

.k-badge {
    background-color: #ff3e3e !important;
    color: white !important;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 50%;
    position: absolute;
    top: -5px;
    right: -8px;
    font-weight: 700;
    border: 2px solid #006aff;
}

.k-contact-item .label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    display: block;
}

.k-contact-item .val {
    color: #ffffff;
    font-weight: 700;
    font-size: 16px;
}

.k-contact-item i {
    font-size: 28px;
    color: #ffffff;
}

/* Sidebar Refinement & Fix for Cut UI */
#cart-sidebar-area,
#wish-sidebar-area,
#category-sidebar-area {
    width: 420px !important;
    max-width: 90% !important;
    position: fixed !important;
    right: 0 !important;
    top: 0 !important;
    height: 100vh !important;
    z-index: 999999 !important;
    /* Extremely high to over-layer everything */
    transform: translateX(100%) !important;
    /* Move fully off-screen regardless of width */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    visibility: hidden;
    opacity: 0;
}

#cart-sidebar-area.active,
#wish-sidebar-area.active,
#category-sidebar-area.active {
    transform: translateX(0) !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Fix for horizontal scroll/cut issue */
html,
body {
    overflow-x: hidden !important;
    width: 100%;
    position: relative;
}

#cart-sidebar-area .cart-sidebar-header h4 {

    letter-spacing: -0.5px;
}

.cart-item-card .img-wrap {
    border: 1px solid #f1f5f9;
}

.cart-item-card .item-details .item-title {
    transition: color 0.2s;
}

.cart-item-card .item-details .item-title:hover {
    color: #006aff;
}

/* Progress Bar Refinement */
.shipping-progress-bar-wrap {
    background: #f1f5f9;
    overflow: visible;
}

.shipping-progress-bar-fill {
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.shipping-progress-bar-fill .truck-icon {
    border: 2px solid #ffffff;
    transform: translateY(-50%) scale(1.1);
}

/* Shopnix Brand Section Styles */
.brand-section {
    background: #ffffff;
    padding: 60px 0;
}

.brand-section .section-header-2 {
    margin-bottom: 35px;
}

.brand-section .title {
    font-size: 26px;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.5px;
}

.btn-view-all-pill {
    background: #f0f4ff !important;
    color: #3b82f6 !important;
    padding: 8px 24px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 13px;
    border: none;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-view-all-pill:hover {
    background: #3b82f6 !important;
    color: #ffffff !important;
    transform: translateY(-2px);
}

.brand-promo-card {
    display: block;
    border-radius: 15px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #f1f5f9;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.brand-promo-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.brand-promo-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.brand-slider .owl-stage-outer {
    padding: 15px 0;
}

/* -------------------------------------------------------------------------
   DARK THEME FOOTER
-------------------------------------------------------------------------- */
.footer-dark {
    background-color: #0c0e12 !important;
    color: #ffffff;
}

/* Feature Top Bar Styles */
.footer-features-bar {
    background-color: #1a1a1a;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.feature-item .icon {
    font-size: 32px;
    color: #ffb400;
    /* Vibrant Gold/Yellow */
    line-height: 1;
}

.feature-item .content .title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 2px;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.feature-item .content .desc {
    font-size: 12px;
    color: #94A3B8;
    margin-bottom: 0;
}

.footer-dark .widget--title {
    color: #ffffff !important;
    font-weight: 700;
    margin-bottom: 25px;
}

.footer-dark .footer__links li a,
.footer-dark .addr {
    color: #cbd5e1 !important;
}

.footer-dark .footer__links li a:hover {
    color: #ffffff !important;
}

.footer-dark .contact__info-title a {
    color: #ffffff !important;
}

.footer-dark .footer-bottom {
    background-color: #06080a !important;
}