@font-face {
    font-family: "Amazon Ember";
    src: url("/assets/fonts/amazon-ember/Ember/AmazonEmber_Rg.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "sallaicons";
    src: url("/assets/fonts/salla-icons/sallaicons.ttf") format("truetype");
}
.sicon-sar::before {
    content: "\e9bc"; /* whatever your SAR icon is */
    font-family: "sallaicons";
    font-weight: 400 !important;
}

:root {
    --toastify-toast-width: 28rem;
    --toastify-z-index: 999 !important;

    /* colors */
    --green-primary-site: #3bb77e;
    --green-primaryLight-site: #c2f2dc;
    --yellow-secondary-site: #ffbe11;
    --yellow-secondaryFade-site: #e5b141;
    --white-hover-site: #eeeeee;
    --white-site: #ffffff;
    --blue-text-site: #253d4e;
    --gray-textSecondary-site: #8f8f8f;
}

.Toastify__close-button > svg {
    height: 1.5rem !important;
    width: 1.5rem !important;
}

html {
    height: --webkit-fill-available;
}
body {
    height: --webkit-fill-available;
    overflow-x: hidden !important;
}
body.rtl {
    direction: rtl;
    text-align: right;
    font-family: "Amazon Ember", sans-serif !important;
}

.custom-badge-outline-primary {
    background-color: white;
    color: #0d6efd;
    border: 1.5px solid #0d6efd !important;
    border-radius: 50rem;
    padding: 0.1rem 0.75rem !important;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.custom-badge-outline-warning {
    background-color: white;
    color: #ff9900;
    border: 1.5px solid #ff9900 !important;
    border-radius: 50rem;
    padding: 0.1rem 0.75rem !important;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.custom-badge-outline-danger {
    background-color: white;
    color: #fd6e6e;
    border: 1.5px solid #fd6e6e !important;
    border-radius: 50rem;
    padding: 0.1rem 0.75rem !important;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.custom-badge-outline-info {
    background-color: white;
    color: #5a97fa;
    border: 1.5px solid #5a97fa !important;
    border-radius: 50rem;
    padding: 0.1rem 0.75rem !important;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.custom-badge-outline-info:hover,
.custom-badge-outline-warning:hover,
.custom-badge-outline-danger:hover {
    transform: translateY(-2px) !important;
}

.bi::before {
    font-weight: 500 !important;
}

.bg-primary-site {
    background-color: var(--green-primary-site) !important;
}
.text-primary-site {
    color: var(--green-primary-site) !important;
}
.bg-primaryLight-site {
    background-color: var(--green-primaryLight-site) !important;
}
.border-primaryLight-site {
    border-color: var(--green-primaryLight-site) !important;
}
.bg-secondary-site {
    background-color: var(--yellow-secondary-site) !important;
}
.bg-gray-site {
    background-color: rgb(64, 69, 83) !important;
}

.btn.disabled,
.btn:disabled,
button:disabled,
button[disabled],
fieldset:disabled .btn {
    color: var(--white-site) !important;
    pointer-events: none !important;
    background-color: var(--gray-textSecondary-site) !important;
    border-color: var(--gray-textSecondary-site) !important;
}

@media (min-width: 62rem) {
    .col-lg-20 {
        flex: 0 0 auto !important;
        width: 20% !important;
    }
    .btn_lg-right {
        float: right;
    }
    .rtl .btn_lg-right {
        float: left;
    }
} /* Custom container widths */

.header_items-dropdown {
    font-family: "Amazon Ember", sans-serif !important;
    font-size: 0.875rem !important;
}
.ArabicFont {
    font-family: "Amazon Ember", sans-serif !important;
}

.rtl h6 {
    font-family: "Amazon Ember", sans-serif !important;
}

.rtl {
    direction: rtl !important;
    font-family: "Amazon Ember", sans-serif !important;
}
.ltr {
    direction: ltr !important;
}

.rtl .dateFormate {
    direction: ltr !important;
    text-align: end !important;
}

.rtl ol {
    list-style: persian !important;
}

ol {
    list-style: decimal !important;
}

a,
button,
img,
input,
span,
h4 {
    transition: all 0.1s ease 0s !important;
}

.rtl button,
.rtl input,
.rtl span,
.rtl div,
.rtl p,
.rtl table,
.rtl tr,
.rtl td,
.rtl h1,
.rtl h2,
.rtl h3,
.rtl h4,
.rtl h5,
.rtl h6 {
    font-family: "Amazon Ember", sans-serif !important;
}

::-webkit-scrollbar {
    width: 0.5rem;
    overflow-x: hidden;
}

::-webkit-scrollbar-thumb {
    background-color: var(--green-primary-site);
    border-radius: 0.375rem;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #58e8a5;
}

::-webkit-scrollbar-track {
    background-color: var(--white-hover-site);
    border-radius: 0.375rem;
}

.form-check-input:checked {
    background-color: var(--green-primary-site);
    border-color: var(--green-primary-site);
}
.form-check-input:focus,
.form-control:focus {
    border-color: var(--green-primaryLight-site);
    box-shadow: var(--green-primaryLight-site);
}

.rtl .form-check .form-check-input {
    margin-left: 0 !important;
}

.gap-1rem {
    gap: 0.8rem;
}

.gap-2rem {
    gap: 2rem;
}

.localeSwitchBtn {
    transition: none !important;
    margin-left: 3.2rem !important;
}

.rtl .mobile_Locale .localeSwitchBtn {
    margin-left: 0rem !important;
}

.localeSwitchBtn:hover span,
.localeSwitchBtn:hover i {
    color: var(--green-primary-site);
    transition: color 0.3s ease !important;
}
.localeSvgIcon {
    margin: 2.312rem;
}

.rtl .localeSvgIcon {
    margin: 0.188rem;
}

.localeSwitchBtn:hover .localeSvgIcon {
    fill: var(--green-primary-site);
    transition: fill 0.3s ease !important;
}

.rtl .localeSwitchBtn {
    padding-left: 0.625rem !important;
    margin-right: 1.8rem !important;
}

.fixed-header {
    /* fixed header on mobile */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    background-color: white;
}

@media (max-width: 48rem) {
    .Toastify__toast--stacked[data-pos="bot"] {
        bottom: 4.375rem !important;
    }

    /* body {
    padding-top: 4.625rem;
  } */
}

.product-cart-wrap .product-content-wrap h2 {
    font-size: 0.875rem !important;
}

.detail-info h2 {
    font-size: 1.25rem !important;
    margin-top: 1rem;
}
.detail-info .product-price .current-price {
    font-size: 1.6rem !important;
}
.font-lg {
    font-size: 0.7rem !important;
}

.brand-name {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: rgb(126, 133, 155);
    text-transform: capitalize;
}

.text-left {
    text-align: left !important;
}
.left-place::placeholder {
    text-align: left !important;
}
.right-place::placeholder {
    text-align: right !important;
}

input::placeholder {
    padding: 0 0.312rem;
}

.form-check-input[type="radio"],
.form-check-input {
    height: 1rem !important;
    background-image: var(--bs-form-check-bg-image) !important;
}

/*
input:dir(ltr)::placeholder {
  text-align: left;
  direction: ltr;
} */

/* ********************* */
/*RTL SUPPORT*/
.rtl .logo.logo-width-1 {
    margin-right: unset;
    margin-left: 4.375rem;
}
.rtl .main-menu > nav > ul > li.hot-deals img {
    margin-left: 0.5rem;
    margin-right: 0;
}
.rtl .main-menu > nav > ul > li ul.sub-menu {
    right: 0;
    left: unset;
}
.rtl .main-menu > nav > ul > li ul.sub-menu li ul.level-menu {
    right: calc(100% + 0.938rem);
}
.rtl .main-menu > nav > ul > li ul.sub-menu li a i {
    float: left;
    transform: rotate(180deg);
}
.rtl .header-info > ul > li {
    margin-left: 1.25rem;
    margin-right: 0;
}
.rtl .header-info > ul > li::before {
    left: -0.625rem;
    right: unset;
}
/* .rtl .header-logo {
  margin: 0 0 0 4.5rem !important;
} */
.rtl .header-action-2 .header-action-icon-2 {
    margin: 0 0.625rem 0 0 !important;
}
.rtl .cart-dropdown-wrap {
    left: 0 !important;
    right: auto !important;
}
.rtl .header-style-1 .search-style-2 form input {
    margin-left: 1.25rem;
    margin-right: 1.25rem;
}
.rtl
    .header-style-1
    .select2-container--default
    .select2-selection--single
    .select2-selection__rendered::after {
    left: 0;
    right: unset;
}
.rtl
    .header-style-1
    .select2-container--default
    .select2-selection--single
    .select2-selection__arrow {
    right: unset;
    left: 1.875rem;
}
.rtl
    .header-style-1
    .search-location
    .select2-container--default
    .select2-selection--single
    .select2-selection__rendered::before {
    margin-left: 0.438rem;
    margin-right: unset;
}
.rtl .header-style-1 .search-location .select2-container {
    margin-right: unset;
    margin-left: 1.875rem;
}
.rtl .header-style-1 .main-categori-wrap > a.categories-button-active i {
    margin-right: 0.75rem;
    margin-left: unset;
}
.rtl .search-style-2 form input {
    background-position: center left;
}
.rtl .select2-container--open .select2-dropdown {
    left: -3.875rem;
}
.rtl .hotline img {
    margin-right: unset;
    margin-left: 0.75rem;
}
.rtl .detail-extralink .detail-qty {
    margin: 0 0 0.938rem 0.375rem !important;
}
.rtl .detail-info .product_aditionals {
    display: flex;
}
.rtl .detail-info .product_aditional ul {
    float: right !important;
}
.rtl .categories-dropdown-active-large {
    right: 0;
    left: unset;
}
.rtl .slider-arrow.slider-arrow-2.flex-right {
    justify-content: flex-start;
    flex-direction: row-reverse;
}
.rtl .section-title h3 {
    margin-right: unset;
    margin-left: 1.875rem;
}
.rtl .section-title.style-1::after {
    left: unset;
    right: 0;
}
.rtl .product-rating {
    background-position: right top;
}
.rtl .product-cart-wrap .product-badges.product-badges-position {
    right: 0;
    left: unset;
}
.rtl .product-cart-wrap .product-badges span {
    border-radius: 0 0.938rem 0 1.25rem;
}
.rtl .newsletter .newsletter-inner img {
    left: 3.125rem;
    right: unset;
}
.rtl .banner-left-icon .banner-icon {
    margin-left: 1.25rem;
    margin-right: unset;
}
.rtl footer .mobile-social-icon h6 {
    margin-left: 0.625rem;
    margin-right: unset;
}
.rtl .mobile-social-icon a:last-child {
    margin-right: 0.312rem;
}
.rtl .hero-slider-1 .slider-content {
    right: 6%;
    left: unset;
}
.rtl .widget-category-2 ul li a img {
    margin-left: 0.938rem;
    margin-right: unset;
}
.rtl .custome-checkbox .form-check-label::before {
    margin: 0rem 0 0 0.5rem;
}
.rtl .custome-checkbox input[type="checkbox"] + .form-check-label::after {
    right: 0.188rem;
    left: unset;
}
.rtl .price_range {
    background: url(../imgs/banner/fillter-widget-bg.png) no-repeat left bottom;
}
.rtl .contact-infor li img {
    margin-left: 0.5rem;
    margin-right: unset;
}
.rtl .main-categori-wrap {
    margin: 0 0 0 1.25rem !important;
}
.rtl .main-categori-wrap > a span {
    margin: 0 0 0 0.438rem !important;
}
.rtl .categories-dropdown-wrap ul li a img {
    margin-right: unset;
    margin-left: 0.938rem;
}
.rtl .categories-dropdown-wrap.style-2 .more_categories {
    justify-content: start;
}

.rtl #scrollUp {
    left: 1.875rem;
    right: unset;
}
.rtl .page-item:last-child .page-link {
    border-top-left-radius: 2.5rem;
    border-bottom-left-radius: 2.5rem;
}
.rtl .page-item:first-child .page-link {
    border-top-right-radius: 2.5rem;
    border-bottom-right-radius: 2.5rem;
}
.rtl .shop-product-fillter .sort-by-product-area .sort-by-product-wrap .sort-by {
    margin-left: 0.312rem;
    margin-right: unset;
}
.rtl .shop-product-fillter .sort-by-product-area .sort-by-product-wrap .sort-by i {
    margin-left: 0.625rem;
    margin-right: unset;
}
.rtl
    .shop-product-fillter
    .sort-by-product-area
    .sort-by-product-wrap
    .sort-by-dropdown-wrap
    span
    i {
    margin-left: unset;
    margin-right: 0.625rem;
}
.rtl .product-more-infor {
    padding: 0 0.875rem 0rem 0rem;
}
.rtl .product-more-infor li ::before {
    right: -0.875rem;
    left: unset;
}
.rtl .shopping-summery table thead th.end {
    border-radius: 0;
}
.rtl .shopping-summery table thead th.start {
    border-radius: 0;
}
/* .rtl .shopping-summery table > :not(caption) > * > * {
  padding: 0.938rem;
} */
.rtl .breadcrumb {
    display: flex;
}
.rtl .breadcrumb span::before {
    content: "\f110";
}
.rtl .tags-list li a {
    display: flex;
    align-items: center;
}
.rtl .table .custome-checkbox .form-check-label {
    margin-right: 1.25rem;
}
/* .rtl input {
  padding-right: 1.250rem !important;
} */
.rtl #saveCard {
    padding-right: 0rem !important;
}
.rtl .termsCheckBox {
    display: flex;
    flex-direction: row;
    gap: 2rem;
}
.rtl .pr-32px {
    padding-right: 2rem !important;
}
.rtl .apply-coupon input {
    border-radius: 0 0.625rem 0.625rem 0;
}
.rtl .apply-coupon button {
    border-radius: 0.625rem 0 0 0.625rem;
}
.rtl .custome-radio .form-check-label::before {
    margin-left: 0.5rem;
    margin-right: unset;
}
.rtl .custome-radio input[type="radio"] + .form-check-label::after {
    right: 0.188rem;
    left: unset;
}
.rtl .search-form form button {
    left: 0;
    right: unset;
    border-radius: 6.25rem 0 0 6.25rem;
}
.rtl .mr-5 {
    margin-left: 0.312rem !important;
}
.rtl .mr-10 {
    margin-left: 0.625rem !important;
}
.rtl .mr-15 {
    margin-left: 0.938rem !important;
}
.rtl .ml-10 {
    margin-right: 0.625rem !important;
}
.rtl .ml-30 {
    margin-right: 1.875rem !important;
}
.rtl .mr-50 {
    margin-left: 3.125rem !important;
}
.rtl .categories-dropdown-wrap .more_categories span.icon {
    margin: 0 0 0 0.312rem !important;
}
.rtl .image.product-thumbnail {
    padding-right: 0 !important;
}
.rtl .image.product-thumbnail img {
    height: 100%;
    width: 100%;
}

.rtl .auth-submit-btn {
    /* width: 10rem !important; */
    float: left !important;
    padding: 0.875rem !important;
}

.rtl .proceedCheckout_btn i {
    margin-left: 0;
    margin-right: 0.938rem;
}

.rtl .categories-dropdown-wrap {
    left: auto !important;
    right: 0 !important;
}

.rtl .footer-link-widget:not(:last-child) {
    margin: 0 0 0 3.125rem !important;
}

/* RTL end */
/* ********************** */

.archive-header {
    padding: 1.5rem 1.25rem !important;
}

@media only screen and (max-width: 30rem) {
    /* .table td {
    display: inline-block !important;
    width: auto !important;
  } */
    .rtl table td::before {
        float: right;
    }
    .quantity-table {
        display: flex !important;
        justify-content: space-between !important;
        height: 4rem;
    }
    .quantity-table::before {
        padding-top: 1.25rem;
        width: 50%;
        text-align: start !important;
    }
    .quantity-table div:first-child {
        padding-top: 0.625rem;
        width: 50%;
        text-align: start !important;
    }
    .cart_total_label {
        text-align: start !important;
    }
    .cart_total_amount {
        text-align: end !important;
    }
}
.cart_total_label {
    text-align: start !important;
}
.cart_total_amount {
    text-align: end !important;
}

.product-des.product-name {
    text-align: start !important;
}

.header-wrap {
    height: 3.438rem !important;
}

.header-wrap .header-right {
    overflow: visible !important;
}

.product-cart-wrap .product-img-action-wrap {
    padding: 0.875rem 0.875rem 0 0.875rem !important;
    margin-bottom: 0 !important;
}

.product-cart-wrap .product-img-action-wrap .product-img a {
    display: block !important;
}

.product-img.product-img-zoom.img-height {
    height: 5rem;
}
.section-title.featureProduct h3:hover .view-more {
    color: var(--green-primary-site);
    transition: color 0.3s ease;
}
.dropdown-view-more {
    color: black !important;
}
.dropdown-view-more:hover {
    color: var(--green-primary-site) !important;
    transition: color 0.3s ease;
}
.view-more {
    color: var(--green-primary-site);
    font-size: 0.875rem !important;
    transition: color 0.3s ease;
    font-family: "Amazon Ember", sans-serif !important;
}

.featured_next_arrow {
    width: 100%;
    height: auto;
    max-width: 1.3rem;
    max-height: 1.3rem;
    display: flex;
    margin-top: 0.375rem;
    border-radius: 2rem;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transform: translateX(-100%);
    transition: all 0.5s ease;
}

.rtl .featured_next_arrow {
    transform: rotate(180deg) !important;
    margin-top: 0;
}

.view-more-container {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.view-more-container:hover .featured_next_arrow {
    opacity: 1;
    transform: translateX(0.625rem);
}

.featureProduct .title {
    transition: color 0.3s ease;
}

.featureProduct .title-content {
    display: flex;
    align-items: center;
}

.featureProduct .title-content h3 {
    margin-right: 0 !important;
}

.featureProduct .view-more {
    white-space: nowrap;
    font-size: medium;
    font-weight: 500;
    font-family: "Amazon Ember", sans-serif !important;
    margin-top: 0.375rem;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.section-title .title.h3 h3 {
    margin-bottom: 0.5rem !important;
}

.section-title .title h3 {
    font-size: 1.125rem !important;
}

.termsCheckBox {
    margin-bottom: 1rem !important;
}
.rtl .termsCheckBox {
    margin-bottom: 1rem !important;
}

.btn-link {
    color: var(--green-primary-site);
    font-family: "Amazon Ember", sans-serif !important;
    font-weight: 500;
    font-size: 1rem;
}

.btn-link:hover {
    color: var(--yellow-secondary-site);
}

.alert-bar {
    background-color: #f8d7da;
    color: #58151c;
    border: 0.062rem solid #f1aeb5;
}

.product-cart-wrap .product-action-1,
.product-cart-wrap .product-badges.product-badges-position,
.active > .page-link {
    z-index: 2 !important;
}

/* Custom container widths */
@media (min-width: 36rem) {
    .view-more {
        font-size: 1rem !important;
    }
    .fs_heading_primary {
        font-size: 1.7rem !important;
    }
    .fs_heading_secondary {
        font-size: 1.3rem !important;
    }
    .product-cart-wrap {
        height: 22rem !important; /* Fixed card height for consistency */
    }
    .container {
        max-width: 42.5rem;
    }
    .section-title .title h3 {
        font-size: 1.25rem !important;
    }
    .termsCheckBox {
        margin-bottom: 0 !important;
    }
    .rtl .termsCheckBox {
        margin-bottom: 0 !important;
    }
    .slider-caption p {
        font-size: 1.3rem !important;
    }
}

@media (min-width: 48rem) {
    .search_allProducts .product-cart-wrap {
        height: 20rem !important; /* Fixed card height for consistency */
    }
    .product-cart-wrap {
        height: 22rem !important; /* Fixed card height for consistency */
    }
    .bi_font_size {
        font-size: 1.25rem !important;
        margin: 0.25rem !important;
    }
    /* .swiper-slide.swiper-slide-visible.swiper-slide-fully-visible {
    width: 6.250rem !important;
  } */
    .swiper-button-prev,
    .swiper-button-next {
        height: 1.875rem;
        width: 1.875rem;
        color: white;
        background-color: var(--green-primary-site);
        border-radius: 2rem;
    }
    .swiper-button-prev::after,
    .swiper-button-next::after {
        font-size: 1rem;
    }

    .fs_heading_primary {
        font-size: 2rem !important;
    }
    .fs_heading_secondary {
        font-size: 1.4rem !important;
    }
    .container {
        max-width: 55rem;
    }
    .section-title .title h3 {
        font-size: 1.75rem !important;
    }
    .slider-caption p {
        font-size: 1.5rem !important;
    }
    .rtl .pageHeadingTitle {
        padding-right: 2.188rem;
    }
    .detail-info h2 {
        font-size: 1.5rem !important;
    }
    .detail-info .product-price .current-price {
        font-size: 2rem !important;
    }
    .font-lg {
        font-size: 1rem !important;
    }
    .search-dropdown {
        border: 0.062rem solid var(--green-primary-site);
        max-height: 12.5rem;
        overflow-y: auto;
        background-color: var(--white-site);
        position: absolute !important;
        width: 100%;
        z-index: 4;
        padding: 0.75rem;
        margin-top: 1rem;
        border-radius: 0.375rem;
        transition: transform 0.3s ease, border-color 0.3s ease;
    }
    .header-search {
        position: static !important;
    }
    .search-dropdown {
        width: 26.8rem !important;
    }

    .header-middle.header-middle-ptb-1 {
        padding: 0.375rem 0 0 0 !important;
    }

    .header-logo #nav_logo {
        height: 2.6rem !important;
    }

    .mobile-menu-active .body-overlay-1 {
        opacity: 0 !important;
    }
    #mobileProCount {
        background-color: var(--green-primary-site);
        position: absolute;
        right: 1rem;
        top: -0.25rem;
        color: var(--white-site);
        height: 1.25rem;
        width: 1.25rem;
        border-radius: 100%;
        font-weight: 500;
        font-size: 0.75rem;
        text-align: center;
        line-height: 1.25rem;
    }
    .slider-caption p {
        font-size: 2.2rem;
        font-weight: 700;
    }
    .hero-slider .slider-item {
        height: 30rem;
    }
    .slider-item .swiper-Image {
        height: 18rem !important;
    }
    .archive-header h1 {
        font-size: 1.75rem;
    }
    .category-label {
        font-size: 1rem !important;
    }
    .archive-header {
        padding: 2.25rem !important;
    }
    .archive-header h1 {
        font-size: 2.75rem !important;
    }
    form input,
    .orderFilterInput,
    select,
    textarea {
        height: 3rem !important;
        border: 0.062rem solid var(--green-primary-site) !important ;
        border-radius: 0.5rem !important;
    }
    .product-cart-wrap .product-action-1,
    .product-cart-wrap .product-badges.product-badges-position {
        z-index: 2 !important;
    }
    .header-action-right {
        display: flex !important;
        justify-content: flex-end !important;
        flex-shrink: 0 !important;
        align-items: center !important;
    }

    .hotline {
        display: flex !important;
        gap: 0.8rem;
        align-items: center;
    }
}

@media (min-width: 62rem) {
    .container {
        max-width: 68.75rem;
    }
    .swiper-button-prev,
    .swiper-button-next {
        height: 2.5rem;
        width: 2.5rem;
        color: white;
        background-color: var(--green-primary-site);
        border-radius: 2rem;
    }
    .swiper-button-prev::after,
    .swiper-button-next::after {
        font-size: 1.2rem;
    }
    .slider-caption p {
        font-size: 1.8rem !important;
    }
    .search_allProducts .product-cart-wrap {
        height: 23rem !important; /* Fixed card height for consistency */
    }
    .product-cart-wrap {
        height: 23rem !important; /* Fixed card height for consistency */
    }
    .search-dropdown {
        width: 32rem !important;
    }
    .header-search form {
        margin-left: 2rem !important;
    }
    .slider-caption p {
        font-size: 3rem;
        font-weight: 700;
    }
    .slider-item .swiper-Image {
        height: 23rem !important;
    }
    .header-search form {
        width: 32rem !important;
    }
    .header-search {
        display: block !important;
    }
    .main-menu.main-menu-padding-1 > nav > ul > li {
        padding: 0 1.5rem;
    }
    .card-logo {
        top: 2.75rem;
        right: 0.75rem;
    }
    .rtl .card-logo {
        top: 2.75rem;
        right: 32.5rem !important;
    }
}

@media (min-width: 75rem) {
    .container {
        max-width: 80rem;
    }
    .slider-caption p {
        font-size: 2.5rem !important;
    }

    .product-cart-wrap {
        height: 23rem !important; /* Fixed card height for consistency */
    }
}

@media (min-width: 87.5rem) {
    .container {
        width: 96%;
        max-width: 112.5rem;
    }
    .product-cart-wrap {
        height: 25rem !important; /* Fixed card height for consistency */
    }
}

.mobile-menu .dropdown {
    display: none;
    list-style: none;
    /* padding-left: 1.250rem; */
}

.mobile-menu .dropdown.active {
    display: block;
}

.mobile_Locale {
    padding: 1rem 0rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.mobile_Locale span {
    font-family: "Quicksand", sans-serif;
    color: var(--blue-text-site);
    font-weight: 700;
    line-height: 1.2;
    font-size: 1.25rem;
}

.hotline-mobile {
    display: flex;
    margin: 0.625rem 0;
}

.hotline-mobile img {
    min-width: 2.188rem;
    margin-right: 0.75rem;
}

.hotline-mobile p {
    color: var(--green-primary-site);
    font-size: 1.125rem;
    font-weight: 700;
    font-family: "Quicksand", sans-serif;
    display: block;
    line-height: 1;
}

.hotline-mobile p span {
    font-weight: 500;
    font-size: 1rem;
    font-family: "Lato", sans-serif;
    color: var(--gray-textSecondary-site);
    display: block;
    letter-spacing: 0.562rem;
}

.mobile-user-icon img {
    cursor: pointer;
    max-width: 1.375rem;
    margin-right: 1.562rem;
    margin-top: 0.312rem;
}

.mobile-menu-footer {
    padding: 0.625rem 0;
}

.menu-item-has-children > span {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.arrow {
    margin-left: 0.625rem;
}
.rtl .arrow {
    margin-left: 1.5rem;
}

.arrow.down::before {
    content: "▼";
}

.arrow.up::before {
    content: "▲";
}

.header-middle.header-middle-ptb-1 {
    /* border-bottom: 0.062rem solid #dee2e6; */
    padding: 0.312rem 0 0 0;
}

.shop-product-fillter {
    margin: 0 0 0.75rem !important;
}

/* .header-logo {
  margin-right: 4.5rem;
} */
.header-logo #nav_logo {
    max-width: 8rem !important;
    height: 2rem !important;
}

/* Product Search Input Styles */
.ltr .headerSearchBar {
    border-radius: 0 0.375rem 0.375rem 0 !important;
    border-left: none !important;
    padding: 0.188rem 1.25rem 0.188rem 1.25rem !important;
    transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
}
.rtl .headerSearchBar {
    border-radius: 0.375rem 0 0 0.375rem !important;
    border-right: none !important;
    padding: 0.188rem 1.25rem 0.188rem 1.25rem !important;
    transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
}
.headerSearchBar:dir(rtl)::placeholder {
    text-align: right !important;
    direction: rtl;
}

.header-search {
    margin-right: 0;
    position: relative !important;
}

.header-search form {
    width: 100%;
}
.ltr .header-search select {
    border-radius: 0.375rem 0 0 0.375rem !important;
    border-right: none !important;
}
.rtl .header-search select {
    border-radius: 0 0.375rem 0.375rem 0 !important;
    border-left: none !important;
}

.search-dropdown {
    border: 0.062rem solid var(--green-primary-site);
    max-height: 15rem;
    overflow-y: auto;
    background-color: var(--white-site);
    position: absolute !important;
    width: 95%;
    z-index: 4;
    padding: 0.75rem;
    margin-top: 0rem;
    border-radius: 0.375rem;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.search-item-dropdown {
    padding: 0.312rem 0.5rem;
    cursor: pointer;
    border-radius: 0.438rem;
    color: black;
}

.search-item-dropdown b {
    font-weight: 800 !important;
}

.search-item-dropdown:hover {
    background-color: var(--white-hover-site);
}

.header-account-dropdown .header-account-wellcome {
    font-size: 0.75rem;
}

.header-account-dropdown .header-account-name {
    color: var(--green-primary-site) !important;
}

.rtl .desktopUserIcon {
    margin-top: 0.125rem;
}

.header-action-2 {
    height: 3rem;
    margin: 0 0.312rem;
}

.svgInject {
    height: 1.875rem !important;
    max-width: 1.75rem !important;
    margin-top: 0.125rem;
}

.mobile-menu-headings {
    cursor: pointer !important;
}

.mobile-cart-icon {
    position: relative;
}

#mobileProCount {
    background-color: var(--green-primary-site);
    position: absolute;
    left: 0.562rem;
    left: 0.562rem;
    top: -0.312rem;
    color: var(--white-site);
    height: 1rem;
    width: 1rem;
    border-radius: 100%;
    font-weight: 500;
    font-size: 0.75rem;
    text-align: center;
    line-height: 0.938rem;
}

#cart-delete-button:hover {
    color: red !important;
}

.slider-caption {
    top: 50%;
    left: 35%;
    transform: translate(-50%, -50%);
}

.rtl .slider-caption {
    left: 68% !important;
    width: 50% !important;
}

.slider-caption p {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    color: var(--blue-text-site);
    cursor: default;
    font-family: "Quicksand", sans-serif;
}

/* / Category Style / */
.category-link {
    background-color: var(--white-hover-site);
    border: 0.062rem solid var(--green-primaryLight-site);
    border-radius: 0.625rem;
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.category-link:hover {
    background-color: var(--white-site);
    border: 0.125rem solid var(--green-primary-site);
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.category-link:hover #category-card {
    box-shadow: 0 1rem 3rem rgba(black, 0.175);
}

#category-card {
    width: 10rem;
    margin: 0.625rem;
}

@media (max-width: 48rem) {
    .pb_14rem {
        padding-bottom: 14rem !important;
    }
    .pb_4rem {
        padding-bottom: 2.5rem !important;
    }
    .rtl .pageHeadingTitle {
        padding-right: 1.562rem;
    }
    input.mobileFilterSearchInput {
        border: 0 !important;
    }

    input,
    select,
    textarea {
        height: 2.25rem !important;
        border: 0.062rem solid var(--green-primary-site) !important ;
        border-radius: 0.5rem !important;
    }

    input.mobileFilterSearchInput {
        border: 0 !important;
    }

    #category-card {
        width: 7.5rem;
        margin: 0.375rem;
    }
}
.category-image img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    transition: transform 0.6s ease;
}
.category-content {
    grid-area: content;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    overflow: hidden;
}
.category-label {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    /* font-weight: bold; */
    font-size: 0.875rem;
    color: #333333;
    text-decoration: none;
    transition: color 0.3s ease;
    line-height: 1.3;
    overflow: hidden;
    text-align: center;
    flex: 1;
}

.category-link:hover {
    border-color: var(--green-primary-site);
    box-shadow: 0 0.062rem 0.188rem 0 rgb(0 0 0 / 0.1),
        0 0.062rem 0.125rem -0.062rem rgb(0 0 0 / 0.1);
}

.category-link:hover .category-image img {
    transform: scale(1.1);
}

.category-link:hover .category-label {
    color: var(--green-primary-site);
}

.modal-header .closeModal {
    border: none;
    background: none;
    font-size: 1.5rem;
}

.signIn_upBtn {
    padding: 0;
    background: none;
    color: var(--green-primary-site);
    border: none;
}

.signIn_upBtn:hover {
    color: var(--yellow-secondary-site);
    background: none;
}

.loginBtn_Modal button {
    height: 2.5rem !important;
    /* max-width: 25.000rem !important; */
    width: 100% !important;
    text-align: center !important;
    padding: 0 !important;
}

.auth input:focus,
.contact-form-style input:focus,
.account_details_form input:focus,
.register_location select:focus,
.modal-body select:focus,
textarea:focus {
    border: 0.125rem solid var(--green-primary-site) !important ;
}

.input-group.focused {
    border: 0.125rem solid var(--green-primary-site) !important ;
    border-radius: 0.5rem !important;
    overflow: hidden !important;
}

.search-selectOption:focus {
    box-shadow: none !important;
}

.authBtn {
    padding: 0;
    background: none;
    color: var(--green-primary-site);
    border: none;
    font-size: 0.875rem;
}

.authBtn:hover {
    background-color: var(--green-primary-site);
    color: var(--white-site);
}

.auth-vl {
    border-left: 0.125rem solid var(--blue-text-site);
    height: 1.938rem;
}

.browseSupplies {
    background-color: var(--yellow-secondary-site) !important;
    cursor: pointer;
}

.browseSupplies:hover {
    background-color: var(--yellow-secondaryFade-site) !important;
}

.main-categori-wrap {
    position: relative;
}

.categories-button-active {
    user-select: none;
    cursor: pointer;
    -webkit-user-drag: none;
}

.categories-dropdown-wrap {
    position: absolute;
    top: 100%;
    left: 0;
    border-radius: 0.625rem;
    margin-top: 0.6rem;
    padding: 1rem 1rem 1rem 1rem;
    z-index: 12;
    font-size: 1rem;
    background-color: white;
    border: 0;
    transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
    /* box-shadow: 0.312rem 0.312rem 0.938rem rgba(0, 0, 0, 0.05); */
}

/* Custom Dropdown Item Styles */
.dropdown-item-custom {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem !important;
    margin: 0 0 0.25rem 0 !important;
    border: 1px solid transparent !important;
    border-radius: 0.5rem;
    background-color: #fafafa;
    transition: all 0.2s ease-in-out;
    gap: 0.75rem !important;
    cursor: pointer;
    text-decoration: none;
}

.dropdown-item-custom:hover {
    background-color: #f0f9ff !important;
    border-color: #3b82f6 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.dropdown-item-custom .menu-icon {
    border-radius: 0.375rem;
    flex-shrink: 0;
}

.dropdown-item-custom .menu-text {
    font-weight: 500;
    color: #374151;
    font-size: 0.875rem;
    transition: color 0.2s ease-in-out;
}

.dropdown-item-custom:hover .menu-text {
    color: #1f2937;
}

/* Custom Dropdown Item for Logout - Light Red Hover */
.dropdown-item-logout {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem !important;
    margin: 0 0 0.25rem 0 !important;
    border: 1px solid transparent !important;
    border-radius: 0.5rem;
    background-color: #fafafa;
    transition: all 0.2s ease-in-out;
    gap: 0.75rem !important;
    cursor: pointer;
    text-decoration: none;
}

.dropdown-item-logout:hover {
    background-color: #fef2f2 !important;
    border-color: #ef4444 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
}

.dropdown-item-logout .menu-icon {
    border-radius: 0.375rem;
    flex-shrink: 0;
}

.dropdown-item-logout .menu-text {
    font-weight: 500;
    color: #374151;
    font-size: 0.875rem;
    transition: color 0.2s ease-in-out;
}

.dropdown-item-logout:hover .menu-text {
    color: #dc2626;
}

/* Legacy styles for backward compatibility */
.categories-dropdown-wrap ul li {
    border: 0px !important;
    margin: 0 0 0.3rem 0 !important;
    padding: 0.3rem 0.5rem !important;
    gap: 0.8rem !important;
}
.categories-dropdown-wrap ul li:hover {
    border: 1px solid #bce3c9 !important;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
    border-width: 0.125rem !important;
    transition: 0.3s;
    -moz-transition: 0.3s;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
}
.categories-dropdown-wrap ul .view-more-container li {
    margin: 0 0 0 0 !important;
}

.categori-dropdown-inner {
    display: flex;
    justify-content: space-between;
    min-width: 13.75rem !important;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul.end {
    margin-left: auto;
}

.more_slide_open {
    display: none;
}

.more_categories {
    cursor: pointer;
}

.more_categories .icon.hide-after::after {
    display: none;
}

.font-heading {
    font-family: Arial, sans-serif; /* Adjust based on your theme */
}

.btn-cancel {
    background-color: #5f6870 !important;
}
.btn-cancel:hover {
    background-color: black !important;
}

.cartCancelBtn {
    line-height: 1 !important;
    font-size: small;
    padding: 0.375rem !important;
    min-width: unset !important;
    display: table !important;
    border-radius: 0.312rem !important;
}

button.btn:disabled.not-allowed {
    cursor: not-allowed !important;
    pointer-events: auto !important;
}

.delete-modal-content {
    text-align: center;
}

.delete-modal-content .btn-delete {
    background-color: red;
}

.dashboard-menu-li .nav-item:hover .nav-link {
    color: var(--green-primary-site);
}

.dashboard-menu-li .nav-item:hover .active {
    color: white;
}

.featured-card {
    border-radius: 0.625rem !important;
}
.featured-card .featured-DetailTitle {
    font-size: 1.2rem !important;
}

.badge-pill {
    height: 2rem !important;
    color: white !important;
    padding: 0.25rem 0.875rem;
    border-radius: 0.5rem;
}

.badge-pill_modal {
    height: 1.5rem !important;
    color: white !important;
    padding: 0.25rem 0.875rem;
    border-radius: 0.5rem;
}

.toggle-slider {
    display: flex;
    width: 12.5rem; /* Adjust width as needed */
    border: 0.062rem solid #ced4da;
    border-radius: 0.625rem;
    overflow: hidden;
}

.toggle-slider label {
    font-size: 1rem;
    font-weight: 700;
    font-family: "Quicksand", sans-serif;
}

.toggle-option {
    cursor: pointer;
    flex: 1;
    text-align: center;
    padding: 0.625rem;
    transition: background-color 0.3s ease, color 0.3s ease;
    position: relative;
    z-index: 1;
    margin: 0.312rem;
    border-radius: 0.438rem;
}

.toggle-option.active {
    background-color: var(--green-primary-site);
    color: #fff;
    z-index: 2;
}

.toggle-option input {
    display: none;
}

.auth-submit-btn {
    width: 9rem !important;
}

.w-10rem {
    width: 10rem !important;
}

.text_black a {
    color: black !important;
}
.text_black a:hover {
    color: var(--green-primary-site) !important ;
}

.cancel_order_btn {
    width: 7rem;
}

.placeOrder-btn {
    width: 15rem;
    height: 3rem;
}

.button-add-to-cart {
    width: 14rem;
}

.rtl .product-extra-link2 .button.button-add-to-cart i {
    margin-left: 0.625rem;
    margin-right: 0rem;
}
.rtl .product-extra-link2 .button.button-add-to-cart {
    padding: 0;
}

.shopping-summery table tbody tr img {
    max-width: 6.25rem !important;
    border: none !important;
}

@media only screen and (max-width: 36rem) {
    .product-cart-wrap .product-card-bottom {
        margin-top: 0.312rem !important;
    }
    .breadcrumb a {
        font-size: 0.75rem;
    }

    .dashboardCard_p,
    .totall-product p {
        font-size: 0.875rem !important;
    }

    .breadcrumb span {
        padding: 0;
    }
    .mobile-header-wrapper-style {
        width: 100%;
    }
    .shopping-summery tr {
        border: none !important;
    }
}

@media only screen and (max-width: 48rem) {
    .header-bottom {
        padding: 0.312rem 0;
    }
    .featured_next_arrow {
        opacity: 1 !important;
    }
}

@media only screen and (min-width: 62rem) and (max-width: 74.938rem) {
    .hotline p {
        font-size: 1.625rem !important;
    }
}

/* cart table */
.table-wishlist {
    table-layout: fixed;
    width: 100%;
}

.table-wishlist th.small-col,
.table-wishlist td.small-col {
    width: 8%;
}

.table-wishlist .product-thumbnail img {
    max-width: 3.125rem;
    height: auto;
}

/* checkout */
.page-header.breadcrumb-wrap {
    background-color: transparent !important;
}

.table.no-border tbody tr td {
    border: none;
}

.cart-totals {
    padding: 1rem;
    border-radius: 0.625rem;
}

.cart-totals h4 {
    margin-bottom: 1.25rem;
}

.order_table.checkout td {
    padding: 0;
}

.order_table table .product-thumbnail img {
    border: 0;
}

.total_summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.625rem;
}

.total_summary .tatal_title {
    font-family: "Quicksand", sans-serif;
}

.checkout-summary .card {
    border-radius: 0.625rem;
    box-shadow: 0.312rem 0.312rem 0.938rem rgba(0, 0, 0, 0.05);
}

.checkout-summary .card .checkout_contact_info {
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.312rem;
    color: #b6b6b6 !important;
}

.checkout_contact_info svg {
    width: 1rem;
    margin-bottom: 0.062rem;
    margin-right: 0.188rem;
    color: #b6b6b6 !important;
}
.rtl .checkout_contact_info svg {
    width: 1rem;
    margin-bottom: 0.062rem;
    margin-left: 0.188rem;
    color: #b6b6b6 !important;
}

.checkoutInfoEditBtn {
    right: 2rem;
    top: 2rem;
}
.rtl .checkoutInfoEditBtn {
    left: 2rem;
    top: 2rem;
}

.card-body.customer-section {
    gap: 1rem;
    display: flex;
    flex-direction: column;
}

/* Removed conflicting zoom-image styles */

.section-title.featureProductSlider {
    align-items: center !important;
}

.categori-dropdown-inner {
    gap: 1rem !important;
}
.categori-dropdown-inner .col {
    width: 18rem !important;
}
.categori-dropdown-inner.category-inner .col {
    width: 16rem !important;
}
.categori-dropdown-inner .col a {
    color: black;
    font-weight: bold;
}
.categori-dropdown-inner .col a:hover {
    color: var(--green-primary-site) !important ;
}

.fi-rs-trash {
    padding: 0.3rem !important;
}

.toggle-option-premium {
    display: flex;
    justify-content: center;
}

.premium-crown {
    margin-top: 0.2rem;
}

.rtl .premium-crown {
    margin-top: 0.4rem;
}

.ltr .invoice_download_btn {
    text-align: right !important;
}
.rtl .invoice_download_btn {
    text-align: left !important;
}
.invoice_download_btn img {
    width: 0.875rem !important;
    margin-bottom: 0rem !important;
}
.invoice_download_btn .invoiceSpan {
    margin-left: 0.5rem !important;
}
.rtl .invoice_download_btn .invoiceSpan {
    margin-right: 0.5rem !important;
}
.hasReceivedBtn {
    width: 5rem;
    margin-right: 1rem !important;
}

.search-dropdown .react-loading-skeleton {
    line-height: 1 !important;
}
.btn:hover {
    border-color: transparent !important;
}
.proceedCheckout_btn {
    padding: 0.75rem 0.5rem !important;
}

.ReactModal__Overlay {
    z-index: 4 !important;
}

.scroll.modal-body {
    max-height: 20rem; /* Control the height for scrolling */
    overflow-y: auto; /* Enable scrolling */
    padding: 0.625rem 0.625rem 0.625rem 1.5rem;
}

.rtl .scroll.modal-body {
    max-height: 20rem; /* Control the height for scrolling */
    overflow-y: auto; /* Enable scrolling */
    padding: 0.625rem 1.5rem 0.625rem 0.625rem;
}
.mobile-header-wrapper-style .mobile-header-wrapper-inner {
    padding: 0rem !important;
}
.list-inline-item:not(:last-child) {
    margin-right: 1.5rem !important;
}

.footer-link {
    text-decoration: none;
    font-weight: 500;
    color: inherit;
    display: inline-block; /* Ensure it works without `position: relative` */
}

.footer-link::after {
    content: "";
    display: block;
    height: 0.125rem;
    width: 0;
    background-color: var(--yellow-secondaryFade-site);
    transition: width 0.3s ease-in-out; /* Smooth animation */
}

.footer-link:hover::after {
    width: 100%; /* Full underline on hover */
}

.footer-link:hover {
    color: black; /* Optional: Change text color on hover */
}

.copyRight-Section {
    padding-bottom: 0rem !important;
}

.cart-desc {
    font-size: 0.8rem !important;
}
.fs_s {
    font-size: 0.875rem !important;
}
.fs_xs {
    font-size: 0.75rem !important;
}
.cart_card {
    padding-left: 0rem !important;
    padding-right: 1rem !important;
}
.rtl .cart_card {
    padding-right: 0rem !important;
    padding-left: 1rem !important;
}
.cart_image {
    padding-right: 0 !important;
}
.rtl .cart_image {
    padding-left: 0 !important;
}
.card-title,
.card-text {
    font-size: 0.875rem !important;
}
.quantity_spinner {
    margin-right: 2rem !important;
}
.rtl .quantity_spinner {
    margin-right: 1rem !important;
}
.rtl .fw-medium {
    font-weight: 400 !important;
}
.cart_cart_pricing {
    text-align: right;
}
.rtl .cart_cart_pricing {
    text-align: left;
}

.checkout-fixed {
    position: static;
    margin-top: 1.25rem;
}
.main-footer {
    margin-bottom: 0.625rem !important;
}

@media (max-width: 47.938rem) {
    .copyRight-Section {
        padding-bottom: 3rem !important;
    }
    .notifi-header {
        display: flex;
        justify-content: center;
        margin-top: 0.312rem;
        margin-bottom: 0.312rem;
    }
    .notifi-header h6 {
        font-size: 0.875rem !important;
    }
    /* .main-footer {
    margin-bottom: 4.375rem !important;
  } */
    .checkout-fixed {
        position: fixed;
        bottom: 4.125rem;
        left: 0;
        right: 0;
        z-index: 30 !important;
        padding: 0.625rem;
        background-color: var(--white-site);
        box-shadow: 0rem -0.125rem 0.625rem rgba(0, 0, 0, 0.1);
    }

    .proceedCheckout_btn {
        margin: 0;
    }
}

.checkout-item:not(:last-child) {
    border-bottom: 0.062rem solid var(--white-hover-site);
    padding-bottom: 0.938rem;
}

.cart-dropdown-wrap.cart-dropdown.cart-dropdown-hm2 {
    width: 22rem !important;
    padding: 1.875rem 0.875rem 1.562rem !important;
}
.shopping-cart-footer {
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 1rem;
    height: auto;
    max-height: 24rem;
}
.rtl .shopping-cart-footer {
    padding-left: 1rem;
}

.detail-qty.float_end,
.auth-submit-btn.float_end,
.cart_card_qty .quantity_btn-group.float-end,
.cancelOrder-btn.float-end {
    float: right !important;
}
.rtl .detail-qty.float_end,
.auth-submit-btn.float_end,
.rtl .cart_card_qty .quantity_btn-group.float-end,
.rtl .cancelOrder-btn.float-end {
    float: left !important;
}

.active-auth .authBtn {
    background-color: var(--green-primary-site) !important ;
    color: var(--white-site) !important;
}

/* Common card styling */
.product-cart-wrap {
    position: relative;
    background-color: var(--white-site);
    border: 0.062rem solid var(--green-primaryLight-site);
    border-radius: 0.938rem;
    overflow: hidden;
    transition: 0.2s;
    height: 24rem; /* Fixed card height for consistency */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* .allProducts_card .product-cart-wrap {
  height: 24rem !important;
} */

.product-content-wrap {
    padding: 0.938rem;
    flex-grow: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Title truncation for product names */
.truncate-2-lines {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limit to 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    line-clamp: 2;
}
.truncate {
    width: 12.5rem; /* Set the width of the container */
    white-space: nowrap; /* Prevents the text from wrapping */
    overflow: hidden; /* Hides any overflowing text */
    text-overflow: ellipsis; /* Adds ellipsis (...) at the end */
}

/* Image wrapper adjustments */
.product-img img {
    width: 100%;
    height: auto;
    object-fit: cover;
    max-height: 21.875rem; /* Ensure image doesn't overflow */
}

@media (max-width: 48rem) {
    /* Adjust image size for tablet and smaller screens */
    .product-img img {
        width: 100%;
        height: auto;
        object-fit: cover;
        max-height: 9.375rem; /* Slightly reduce image height on mobile */
    }
}

@media (max-width: 36rem) {
    /* Mobile-specific styles */
    .product-cart-wrap .product-img-action-wrap {
        padding: 0.5rem 0.5rem 0 0.5rem !important;
        margin-bottom: 0 !important;
    }
    .product-cart-wrap .product-content-wrap {
        padding: 0 0.5rem 0.75rem 0.5rem !important;
    }

    .breadcrumb a {
        margin-right: 0rem !important;
    }
    .pageHeadingTitle h3 {
        font-size: 1.375rem !important;
    }
    .product-cart-wrap {
        height: 20rem; /* Reduce card height on smaller screens */
        min-height: 20rem;
    }
    .card-logo {
        top: 2.188rem;
        right: 0.75rem;
    }

    .product-img img {
        max-height: 16.25rem; /* Smaller image on mobile */
    }
}

.rtl .pagination [aria-label="Next page"],
.rtl .pagination [aria-label="Previous page"] {
    transform: rotate(180deg) !important;
}

.pagination-area .disabled.page-item:hover [aria-label="Next page"],
.pagination-area .disabled.page-item:hover [aria-label="Previous page"] {
    background: lightgray !important;
}

.vendor-grid {
    display: flex;
    flex-wrap: wrap;
}

.vendor-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1rem;
    background: var(--white-site);
    border-radius: 0.625rem;
}

.same-height {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100%; /* Ensures all cards have the same height */
}

.vendor-content-wrap {
    flex-grow: 1;
}
.vendor-wrap .vendor-content-wrap {
    padding: 0rem;
}

.vendor-wrap .vendor-img-action-wrap {
    padding: 0.375rem 0.5rem 0 0.5rem !important;
}

.vendor-wrap .vendor-img {
    max-height: 9.375rem; /* Limit the image size */
    object-fit: cover;
}

.vendor-wrap .vendor-info {
    margin-bottom: auto;
}

@media (max-width: 48rem) {
    .vendor-grid {
        justify-content: center;
    }
}
.alert {
    --bs-alert-border-radius: 0 !important;
}

.steps .step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}

.steps .step .step-icon-wrap {
    position: relative;
    width: 5rem; /* Width of the circle */
    height: 5rem; /* Height of the circle */
    text-align: center;
}

/* Base LTR styles */
.steps .step .step-icon-wrap::before,
.steps .step .step-icon-wrap::after {
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* Center the line vertically */
    width: 80%;
    height: 0.188rem;
    background-color: var(--white-hover-site);
    content: "";
    z-index: 0;
}

.steps .step .step-icon-wrap::before {
    left: -80%; /* Connects to the previous step */
}

.steps .step .step-icon-wrap::after {
    right: -80%; /* Connects to the next step */
}

/* RTL-specific styles */
.rtl .steps .step .step-icon-wrap::before {
    right: -80%;
    left: auto;
}

.rtl .steps .step .step-icon-wrap::after {
    left: -80%;
    right: auto;
}

.steps .step .step-icon {
    display: inline-block;
    width: 5rem;
    height: 5rem;
    border: 0.062rem solid #e1e7ec;
    border-radius: 50%;
    background-color: var(--white-hover-site);
    color: var(--blue-text-site);
    font-size: 2.375rem;
    line-height: 5.062rem;
    z-index: 5;
}

.steps .step .step-title {
    margin-top: 1rem;
    color: var(--blue-text-site);
    font-size: 0.875rem;
    font-weight: 500;
}

.rtl .steps .step:first-child .step-icon-wrap::before,
.rtl .steps .step:last-child .step-icon-wrap::after {
    display: none;
}

.steps .step:first-child .step-icon-wrap::before,
.steps .step:last-child .step-icon-wrap::after {
    display: none;
}

/* Active and completed steps styling */
.steps .step.completed .step-icon-wrap::before,
.steps .step.completed .step-icon-wrap::after {
    background-color: var(--green-primary-site);
}

.steps .step.completed .step-icon {
    border-color: var(--yellow-secondary-site);
    background-color: var(--yellow-secondary-site);
    color: var(--white-site);
}

/* Additional adjustments for icon padding */
.step-icon {
    padding: 1rem !important;
}

.step-icon svg {
    margin-bottom: 2.375rem !important;
}

/* Responsive adjustments */
@media (max-width: 36rem) {
    .flex-sm-nowrap .step .step-icon-wrap::before,
    .flex-sm-nowrap .step .step-icon-wrap::after {
        display: none;
    }
    .title-detail {
        line-height: inherit;
    }
}

@media (max-width: 48rem) {
    .flex-md-nowrap .step .step-icon-wrap::before,
    .flex-md-nowrap .step .step-icon-wrap::after {
        display: none;
    }
}

@media (max-width: 61.938rem) {
    .flex-lg-nowrap .step .step-icon-wrap::before,
    .flex-lg-nowrap .step .step-icon-wrap::after {
        display: none;
    }
    .login_wrap.login_card {
        width: 100%;
        max-width: 32rem;
        place-self: center;
    }
    .heading_s1 {
        text-align: center;
    }
    .heading_s1 h2 {
        font-size: 2rem;
    }
}

@media (max-width: 75rem) {
    .flex-xl-nowrap .step .step-icon-wrap::before,
    .flex-xl-nowrap .step .step-icon-wrap::after {
        display: none;
    }
}

.dashboardOrderDetail_card .card,
.order-summary.card {
    border: 0.062rem solid var(--white-hover-site) !important;
    border-radius: 0.625rem !important;
}

.order-summary tr {
    border: 0 !important;
}

/*  */

.order-details-container {
    padding: 1.25rem;
    background-color: var(--white-hover-site);
    border-radius: 0.5rem;
}

.order-header-section {
    display: flex;
    flex-direction: column;
}

.order-number {
    font-weight: bold;
    font-size: 1.25rem;
}

.order-status-date {
    display: flex;
    flex-direction: column;
    gap: 0.312rem;
}

.order-summary-section {
    margin-top: 1.25rem;
}

.order-summary-section h5 {
    font-weight: bold;
    font-size: 1.15rem;
    margin-bottom: 0.625rem;
}

.order-summary-table {
    width: 100%;
    border-collapse: collapse;
}

.order-summary-table td {
    padding: 0.5rem;
    font-size: 1rem;
}

.order-summary-table td:first-child {
    font-weight: bold;
}

.invoice-download-btn {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-top: 1.25rem;
}
.bottomBar-icon {
    width: 2.7rem !important; /* Reduce icon width */
    padding: 0.062rem 0 !important; /* Reduce padding */
}

.bottomBar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 4rem; /* Reduced container width */
}

.bottomBar-nav {
    z-index: 4 !important;
}

.bottomBar-item small {
    font-size: 0.7rem; /* Smaller font size for labels */
}

@media (max-width: 20rem) {
    .navbar {
        padding: 0.3rem 0; /* Reduce navbar padding */
    }
    .bottomBar-item {
        width: 3.5rem; /* Further reduce width for very small screens */
    }
}
/* .radio-buttons-group {
  margin-bottom: 0.625rem;
} */
.radio-button-label {
    cursor: pointer;
    border: 0.062rem solid var(--white-hover-site);
    padding: 0.312rem 0.938rem;
    border-radius: 1.25rem;
    background-color: var(--white-hover-site);
    flex: 1;
    text-align: center;
    margin-right: 0.312rem;
}
.radio-button-label.selected {
    background-color: var(--green-primary-site);
    color: var(--white-site);
    border-color: var(--green-primary-site);
}
.radio-button-text {
    display: inline-block;
    width: 100%;
}
.radio-button-label:last-child {
    margin-right: 0;
}

.mobileSearchCancel-btn {
    /* border: 0.0.438rem solid rgb(56, 56, 56) !important;
  border-radius: 1rem !important; */
    margin-top: 0.5rem !important;
    margin-left: 0.75rem !important;
    margin-right: 0rem !important;
    width: 1.562rem;
}
.desktopSearchCancel-btn {
    margin-top: 1.25rem !important;
    margin-right: 0.5rem !important;
    width: 1.562rem;
    z-index: 5 !important;
}

.rtl .mobileSearchCancel-btn {
    /* border: 0.0.438rem solid rgb(56, 56, 56) !important;
  border-radius: 1rem !important; */
    margin-top: 0.5rem !important;
    margin-right: 0.75rem !important;
    margin-left: 0rem !important;
    width: 1.562rem;
}

.breadcrumb {
    display: flex; /* Keeps all items in one line */
    flex-wrap: nowrap; /* Prevents wrapping to the next line */
    overflow: hidden; /* Hides the overflowing text */
    white-space: nowrap; /* Prevents text wrapping */
    text-overflow: ellipsis; /* Displays the "..." for overflow */
}

.breadcrumb a {
    text-decoration: none; /* Optional: Customize links */
    color: #000; /* Adjust the color of the links */
    margin-right: 0.312rem; /* Add space between breadcrumbs */
    max-width: 100%; /* Ensures links stay within the container */
}

.breadcrumb span {
    margin: 0 0.312rem; /* Add spacing for separators (>) */
}
.list-group-item {
    border: none;
}
.list-group-item.active {
    background-color: var(--green-primary-site);
    border-radius: 0.625rem !important;
    border-color: transparent;
}
.list-group-item.active a,
.list-group-item.active p {
    color: var(--white-site) !important;
}
.selectedBorder {
    border: 0.062rem solid var(--green-primary-site) !important ;
}
.product-cart-wrap .product-content-wrap {
    padding: 0 0.75rem 0.875rem 0.75rem;
}

/* For mobile view (max-width: 30.000rem) */
@media (max-width: 36rem) {
    /* Hide table layout on mobile */
    .table-responsive {
        display: none;
    }

    .fs_heading_primary {
        font-size: 1.5rem !important;
    }
    .fs_heading_secondary {
        font-size: 1.3rem !important;
    }

    /* Style for each order card */
    .order-card {
        margin-bottom: 0.938rem;
        border: 0.062rem solid var(--green-primaryLight-site);
        border-radius: 0.5rem;
        padding: 0.938rem;
        background-color: #fff;
        box-shadow: 0 0.125rem 0.312rem rgba(0, 0, 0, 0.1);
    }

    .order-card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.625rem;
        font-size: 1rem;
    }

    .order-card-body {
        display: flex;
        flex-direction: column;
    }

    .order-card-body .card-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 0.5rem;
    }

    .order-card-body .card-row .label {
        font-weight: bold;
    }

    .order-card-body .card-row .value {
        color: #555;
    }

    .order-card-footer {
        text-align: center;
        margin-top: 0.938rem;
    }

    /* Buttons styling for mobile */
    .order-card-footer button {
        padding: 0.5rem 0.938rem;
        font-size: 0.875rem;
        border-radius: 0.312rem;
        color: white;
        border: none;
    }
    .footer-contacts p {
        font-size: 0.75rem;
    }
}

/* Order Summary Container */
.order-summary {
    padding: 1.25rem;
    border-radius: 0.5rem;
    border: 0.125rem solid var(--green-primaryLight-site) !important;
}

.order-summary-header {
    text-align: center;
    margin-bottom: 1.875rem;
}

.joy-icon-container {
    display: inline-block;
    border-radius: 50%;
    padding: 0.938rem;
    margin-bottom: 0.625rem;
}

.joy-icon {
    font-size: 2.5rem;
}

.thank-you-text {
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
}

.thank-you-text span {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--green-primary-site);
}

/* Order Summary Body */
.order-summary-body {
    margin-bottom: 1.25rem;
}

.order-summary-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.625rem;
}

.order-summary-item span {
    font-size: 1rem;
    color: #333;
}

.order-summary-item.total {
    font-weight: 600;
    font-size: 1.25rem;
}

.order-summary-footer {
    text-align: center;
}

.view-order-status {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    cursor: pointer;
}

/* Mobile Specific */
@media (max-width: 48rem) {
    .order-summary {
        padding: 0.938rem;
        border: 0.125rem solid var(--green-primaryLight-site) !important;
    }

    .order-summary-header {
        flex-direction: column;
        align-items: center;
    }

    .joy-icon-container {
        padding: 0.625rem;
    }

    .thank-you-text {
        font-size: 1.25rem;
        margin-top: 0.625rem;
    }

    .order-summary-item span {
        font-size: 0.9rem;
    }

    .view-order-status {
        width: 100%;
        padding: 0.938rem;
    }
    .detail-info .detail-extralink .detail-qty {
        max-width: 5.625rem !important;
    }
    .detail_addToCart {
        width: 100%;
    }
    .swiper-button-prev,
    .swiper-button-next {
        height: 1.625rem;
        width: 1.625rem;
        color: white;
        background-color: var(--green-primary-site);
        border-radius: 2rem;
        top: 55% !important;
    }
    .swiper-button-prev::after,
    .swiper-button-next::after {
        font-size: 0.6rem;
    }
}

.swiper {
    /* border-radius: 1rem; */
    padding: 0.2rem;
}

.image-container {
    position: relative;
    width: 100%; /* Full width */
    height: 0;
    padding-bottom: 34%;
    overflow: hidden;
    border-radius: 1rem;
}

/* Apply the cover effect to the image */
.image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* This ensures the image covers the container without distortion */
}
.rtl .image-container img {
    transform: scaleX(-1);
}

.featured_swiper {
    position: relative;
}

.featured_swiper_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.625rem;
}

.featured_swiper_container {
    padding-top: 0.25rem;
    /* margin-bottom: 0.750rem; */
}

.featured_swiper_slide {
    /* display: flex;
  justify-content: center; */
    padding: 0.25rem;
}

.rtl .featured_swiper_buttons button svg {
    transform: rotate(180deg);
}

/* Responsive Design for Swiper */

.responsive-svg {
    width: 100%; /* Set to 100% to take full width of parent container */
    height: auto; /* Maintain aspect ratio */
    max-width: 1.3rem; /* Maximum width */
    max-height: 1.3rem; /* Maximum height */
}
.swiper-pagination-bullet-active {
    background: var(--green-primary-site) !important;
}

.payment-card {
    border: 0.125rem solid var(--green-primaryLight-site);
    border-radius: 0.75rem;
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: white;
}

.payment-card:hover {
    transform: translateY(-0.312rem);
    box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.1);
}

.payment-card.selected {
    border-color: var(--green-primary-site);
    background-color: var(--green-primaryLight-site);
}

.payment-card-radio {
    display: none;
}

.payment-card input:checked + .d-flex {
    background-color: transparent;
}

.payment-card img {
    max-width: 60%;
    max-height: 3.125rem;
    object-fit: contain;
}

.payment-card h5 {
    margin-top: 0.625rem;
    font-size: 1.1rem;
    color: #333;
}

/* .swiper.swiper-watch-progress .swiper-wrapper {
  margin-top: 1rem;
  place-content: center !important;
} */
.swiper.swiper-initialized.swiper-horizontal.swiper-watch-progress.thumbnail-slider {
    margin-top: 1rem !important;
}
.swiper-wrapper .swiper-slide-thumb-active img {
    /* border: 0.062rem solid var(--green-primary-site) !important; */
    border-radius: 1rem !important;
    overflow: hidden;
}

.gallery-slider {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 25rem; /* Set a consistent height */
}

.gallery-slider .gallery-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.featured_swiper_viewport .swiper-wrapper {
    width: 100rem !important;
}

@media (max-width: 48rem) {
    .button-add-to-cart {
        width: 100% !important;
    }
    .swiper-free-mode .swiper-wrapper {
        margin-top: 0.7rem !important;
    }
    .mobile-header-Logo {
        width: 18% !important;
    }
    .mobile-header-Search {
        width: 82% !important;
    }
}
.swiper-slide.swiper-slide-visible {
    width: 5rem !important;
}
@media (max-width: 75rem) {
    .featured_swiper_buttons {
        display: block;
    }
}
@media (min-width: 28.125rem) {
    .gallery-slider {
        height: 28.125rem !important;
    }
}
@media (min-width: 32.5rem) {
    .gallery-slider {
        height: 34.375rem !important;
    }
}
@media (min-width: 48rem) {
    .header-searchbar-desktop select {
        height: 2.5rem !important;
        width: 30% !important;
    }

    .header-searchbar-desktop input {
        height: 2.5rem !important;
        width: 70% !important;
    }
}
@media (min-width: 62rem) {
    .swiper.swiper-initialized.swiper-horizontal.swiper-watch-progress.thumbnail-slider {
        width: 85% !important;
    }
    .header-searchbar-desktop select {
        height: 2.5rem !important;
        width: 25% !important;
    }

    .header-searchbar-desktop input {
        height: 2.5rem !important;
        width: 75% !important;
    }

    .swiper-wrapper .thumbnail-slide img {
        /* height: 5rem !important;
        width: 5rem !important; */
        border-radius: 0.75rem !important;
    }
    .swiper-slide.swiper-slide-visible {
        width: 5.312rem !important;
        margin: 0.2rem !important;
    }
    .gallery-slider {
        height: 28.125rem !important;
    }
}
@media (min-width: 75rem) {
    .gallery-slider {
        height: 31.25rem !important;
    }
}
@media (min-width: 90rem) {
    .gallery-slider {
        height: 34.375rem !important;
    }
}
@media (max-width: 64rem) {
    .header-style-1 .main-categori-wrap > a.categories-button-active {
        font-size: 0.875rem;
        width: 12rem;
        justify-content: space-evenly;
    }
}
.header-style-1 .main-categori-wrap > a.categories-button-active {
    line-height: 2.25rem;
    border-radius: 0.312rem;
    font-family: "Quicksand", sans-serif;
}
.main-menu > nav > ul > li > a {
    font-size: 0.875rem !important;
}
.cart-count-bottom {
    height: 1.125rem;
    width: 1.125rem;
    line-height: 0.625rem;
    right: 0.875rem;
    font-size: 0.55rem;
    /* border: 0.12rem solid var(--green-primaryLight-site); */
}
.qty-btn {
    width: 2rem;
}
.bottomBar-Link:hover {
    color: var(--green-primary-site) !important;
}
.invoiceDropdown.dropdown-menu {
    z-index: 3;
    margin-top: 0;
}
.bg-teal {
  background-color: #43a047 !important;
  color: #fff; /* ensures text stays readable */
}
.bg-violet {
  background-color: #7e57c2 !important;
  color: #fff; /* for contrast and readability */
}
.bg-delivered {
  background-color: #2563eb !important; /* Royal Blue */
  color: #fff;
}
.bg-processing {
  background-color: #055160 !important; /* Teal */
  color: #fff;
}


@media (min-width: 48rem) {
    .header-action-2 .header-action-icon-2 > a {
        color: #000000 !important;
        fill: #000000 !important;
    }
    .qty-btn {
        width: 3rem;
    }
    .invoiceDropdown.dropdown-menu {
        /* margin-top: 2.500rem; */
        z-index: 3;
        right: 0;
        left: auto;
    }
    .rtl .invoiceDropdown.dropdown-menu {
        /* margin-top: 2.500rem; */
        z-index: 3 !important;
        left: 0;
        right: auto;
        max-width: 10rem !important;
    }
}

@media (min-width: 61.938rem) {
    .invoiceDropdown.dropdown-menu {
        margin-top: 2.5rem !important;
    }
    .rtl .invoiceDropdown.dropdown-menu {
        margin-top: 2.5rem !important;
    }
}
.swiper_buttons button:disabled,
.swiper_buttons button[disabled] {
    display: none !important;
}
.rtl .stepper-line {
    position: absolute !important;
    top: 1.875rem !important;
    left: 60% !important;
    z-index: 1 !important;
    transition: all 0.3s ease !important;
}
.rtl .dropdown-toggle::after {
    margin-right: 0.625rem !important;
    margin-left: 0 !important;
}

.sticky-container {
    margin-bottom: 1.5rem !important;
    position: sticky;
    top: 1.25rem; /* Adjust as needed to prevent overlap with other elements */
}
.form-label {
    font-weight: 500 !important;
}

.rtl .invoiceDropdown li {
    text-align: right !important;
}

.cart_dropdown_trash {
    color: red !important;
    margin-left: 2rem;
}
.rtl .cart_dropdown_trash {
    margin-right: 1rem;
    margin-left: 0;
}
input[type="checkbox"] {
    appearance: checkbox !important;
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
}
.tracking-timeline .tracking-event {
    padding-left: 1.5rem;
}

.timeline-dot {
    position: absolute;
    left: 0;
    top: 10px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.status-icon {
    width: 40px;
    text-align: center;
}

.product-tracking-container {
    max-width: 1200px;
    margin: 0 auto;
}

.stepper-container {
    padding: 20px 0;
}

.stepper-item {
    position: relative;
    padding: 0 10px;
}

.stepper-circle {
    width: 60px;
    height: 60px;
    background: #f8f9fa;
    border-radius: 50%;
    border: 2px solid #dee2e6;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
    overflow: hidden;
}

.stepper-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.stepper-line {
    position: absolute;
    top: 30px;
    left: -50%;
    width: 100%;
    height: 2px;
    background: #dee2e6;
    z-index: 1;
    transition: all 0.3s ease;
}

.stepper-title {
    margin: 10px 0 5px;
    font-size: 0.9rem;
    font-weight: 700;
    color: #495057;
}

.stepper-description {
    font-size: 0.8rem;
    color: #6c757d;
    margin: 0;
}

/* Completed states */
.stepper-item.completed .stepper-circle {
    border-color: #3bb77e;
    background: #3bb77e;
    color: #fff;
}

.stepper-line.completed {
    background: #ffbe11;
    color: #fff;
}
.stepper-item.active .stepper-circle {
    background: #3bb77e;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.stepper-circle .rounded-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 1.5rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .stepper-item {
        margin-bottom: 30px;
    }

    .stepper-line {
        display: none;
    }
}

/* ==================== */
/* CUSTOM BUTTON STYLES */
/* ==================== */

/* Base Button Styles */
.btn {
    font-family: "Amazon Ember", sans-serif !important;
    font-weight: 500 !important;
    border-radius: 0.5rem !important;
    padding: 0.625rem 1.25rem !important;
    transition: all 0.3s ease !important;
    text-transform: capitalize !important;
    box-shadow: none !important;
    border: none !important;
    cursor: pointer !important;
    letter-spacing: 0.01em !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.5 !important;
}

.btn:focus,
.btn.focus {
    outline: 0 !important;
    box-shadow: 0 0 0 0.2rem rgba(59, 183, 126, 0.25) !important;
}

.btn i,
.btn svg {
    margin-right: 0.5rem !important;
}

.rtl .btn i,
.rtl .btn svg {
    margin-right: 0 !important;
    margin-left: 0.5rem !important;
}

/* Button Sizes */
.btn-sm {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.875rem !important;
    border-radius: 0.4rem !important;
}

.btn-lg {
    padding: 0.875rem 1.75rem !important;
    font-size: 1.125rem !important;
    border-radius: 0.625rem !important;
}

/* Primary Button - Green for main actions */
.btn-primary {
    background-color: var(--green-primary-site) !important;
    color: var(--white-site) !important;
    border: 2px solid var(--green-primary-site) !important;
    box-shadow: 0 4px 6px rgba(59, 183, 126, 0.2) !important;
}

.btn-primary:hover {
    background-color: #2a9d68 !important;
    border-color: #2a9d68 !important;
    color: var(--white-site) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 10px rgba(59, 183, 126, 0.3) !important;
}

.btn-primary:focus,
.btn-primary:active {
    background-color: #238b59 !important;
    border-color: #238b59 !important;
    box-shadow: 0 0 0 0.25rem rgba(59, 183, 126, 0.4) !important;
    transform: translateY(0) !important;
}

.btn-primary:disabled,
.btn-primary.disabled {
    background-color: #8ad8b3 !important;
    border-color: #8ad8b3 !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Secondary Button - Yellow for secondary actions */
.btn-secondary {
    background-color: var(--yellow-secondary-site) !important;
    color: var(--white-site) !important;
    font-weight: 500 !important;
    border: 2px solid var(--yellow-secondary-site) !important;
    /* box-shadow: 0 4px 6px rgba(255, 190, 17, 0.2) !important; */
}

.btn-secondary:hover {
    background-color: var(--yellow-secondaryFade-site) !important;
    border-color: var(--yellow-secondaryFade-site) !important;
    color: var(--white-site) !important;
    font-weight: 500 !important;
    transform: translateY(-2px) !important;
    /* box-shadow: 0 6px 10px rgba(255, 190, 17, 0.3) !important; */
}

.btn-secondary:focus,
.btn-secondary:active {
    background-color: #d9a00f !important;
    border-color: #d9a00f !important;
    /* box-shadow: 0 0 0 0.25rem rgba(255, 190, 17, 0.4) !important; */
    transform: translateY(0) !important;
}

.btn-secondary:disabled,
.btn-secondary.disabled {
    background-color: #ffde80 !important;
    border-color: #ffde80 !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Danger Button - Red for delete/danger actions */
.btn-danger {
    background-color: #eb2546 !important;
    color: var(--white-site) !important;
    border: 2px solid #eb2546 !important;
    box-shadow: 0 4px 6px rgba(235, 37, 70, 0.2) !important;
}

.btn-danger:hover {
    background-color: #d63852 !important;
    border-color: #d63852 !important;
    color: var(--white-site) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 10px rgba(233, 69, 96, 0.3) !important;
}

.btn-danger:focus,
.btn-danger:active {
    background-color: #c02c45 !important;
    border-color: #c02c45 !important;
    box-shadow: 0 0 0 0.25rem rgba(233, 69, 96, 0.4) !important;
    transform: translateY(0) !important;
}

.btn-danger:disabled,
.btn-danger.disabled {
    background-color: #f39aaa !important;
    border-color: #f39aaa !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Info Button - Blue for view/info actions */
.btn-info {
    background-color: #4d96ff !important;
    color: var(--white-site) !important;
    border: 2px solid #4d96ff !important;
    box-shadow: 0 4px 6px rgba(77, 150, 255, 0.2) !important;
}

.btn-info:hover {
    background-color: #3a82e5 !important;
    border-color: #3a82e5 !important;
    color: var(--white-site) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 10px rgba(77, 150, 255, 0.3) !important;
}

.btn-info:focus,
.btn-info:active {
    background-color: #2d6ec9 !important;
    border-color: #2d6ec9 !important;
    box-shadow: 0 0 0 0.25rem rgba(77, 150, 255, 0.4) !important;
    transform: translateY(0) !important;
}

.btn-info:disabled,
.btn-info.disabled {
    background-color: #a6c9ff !important;
    border-color: #a6c9ff !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Success Button - Alternative green shade */
.btn-success {
    background-color: #00c853 !important;
    color: var(--white-site) !important;
    border: 2px solid #00c853 !important;
    box-shadow: 0 4px 6px rgba(0, 200, 83, 0.2) !important;
}

.btn-success:hover {
    background-color: #00a844 !important;
    border-color: #00a844 !important;
    color: var(--white-site) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 10px rgba(0, 200, 83, 0.3) !important;
}

.btn-success:focus,
.btn-success:active {
    background-color: #008f38 !important;
    border-color: #008f38 !important;
    box-shadow: 0 0 0 0.25rem rgba(0, 200, 83, 0.4) !important;
    transform: translateY(0) !important;
}

.btn-success:disabled,
.btn-success.disabled {
    background-color: #7de9a6 !important;
    border-color: #7de9a6 !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Light Button - Light background */
.btn-light {
    background-color: var(--white-hover-site) !important;
    color: var(--blue-text-site) !important;
    border: 2px solid #e0e0e0 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

.btn-light:hover {
    background-color: #e0e0e0 !important;
    border-color: #d5d5d5 !important;
    color: var(--blue-text-site) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

.btn-light:focus,
.btn-light:active {
    background-color: #d5d5d5 !important;
    border-color: #c8c8c8 !important;
    box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.1) !important;
    transform: translateY(0) !important;
}

.btn-light:disabled,
.btn-light.disabled {
    background-color: #f5f5f5 !important;
    border-color: #f0f0f0 !important;
    color: #a0a0a0 !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Dark Button */
.btn-dark {
    background-color: var(--blue-text-site) !important;
    color: var(--white-site) !important;
    border: 2px solid var(--blue-text-site) !important;
    box-shadow: 0 4px 6px rgba(37, 61, 78, 0.2) !important;
}

.btn-dark:hover {
    background-color: #1a2e3c !important;
    border-color: #1a2e3c !important;
    color: var(--white-site) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 10px rgba(37, 61, 78, 0.3) !important;
}

.btn-dark:focus,
.btn-dark:active {
    background-color: #142331 !important;
    border-color: #142331 !important;
    box-shadow: 0 0 0 0.25rem rgba(37, 61, 78, 0.4) !important;
    transform: translateY(0) !important;
}

.btn-dark:disabled,
.btn-dark.disabled {
    background-color: #6b8194 !important;
    border-color: #6b8194 !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Outline Buttons */
.btn-outline-primary {
    color: var(--green-primary-site) !important;
    border: 2px solid var(--green-primary-site) !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover {
    background-color: var(--green-primary-site) !important;
    color: var(--white-site) !important;
    border-color: var(--green-primary-site) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 10px rgba(59, 183, 126, 0.2) !important;
}

.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: var(--green-primary-site) !important;
    color: var(--white-site) !important;
    border-color: var(--green-primary-site) !important;
    box-shadow: 0 0 0 0.25rem rgba(59, 183, 126, 0.25) !important;
    transform: translateY(0) !important;
}

.btn-outline-secondary {
    color: var(--yellow-secondary-site) !important;
    border: 2px solid var(--yellow-secondary-site) !important;
    background-color: transparent !important;
}

.btn-outline-secondary:hover {
    background-color: var(--yellow-secondary-site) !important;
    color: var(--blue-text-site) !important;
    border-color: var(--yellow-secondary-site) !important;
    transform: translateY(-2px) !important;
    /* box-shadow: 0 6px 10px rgba(163, 120, 1, 0.2) !important; */
}

.btn-outline-secondary:focus,
.btn-outline-secondary:active {
    background-color: var(--yellow-secondary-site) !important;
    color: var(--blue-text-site) !important;
    border-color: var(--yellow-secondary-site) !important;
    /* box-shadow: 0 0 0 0.25rem rgba(163, 120, 1, 0.25) !important; */
    transform: translateY(0) !important;
}

.btn-outline-danger {
    color: #e94560 !important;
    border: 2px solid #e94560 !important;
    background-color: transparent !important;
}

.btn-outline-danger:hover {
    background-color: #e94560 !important;
    color: var(--white-site) !important;
    border-color: #e94560 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 10px rgba(233, 69, 96, 0.2) !important;
}

.btn-outline-danger:focus,
.btn-outline-danger:active {
    background-color: #e94560 !important;
    color: var(--white-site) !important;
    border-color: #e94560 !important;
    box-shadow: 0 0 0 0.25rem rgba(233, 69, 96, 0.25) !important;
    transform: translateY(0) !important;
}

.btn-outline-info {
    color: #4d96ff !important;
    border: 2px solid #4d96ff !important;
    background-color: transparent !important;
}

.btn-outline-info:hover {
    background-color: #4d96ff !important;
    color: var(--white-site) !important;
    border-color: #4d96ff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 10px rgba(77, 150, 255, 0.2) !important;
}

.btn-outline-info:focus,
.btn-outline-info:active {
    background-color: #4d96ff !important;
    color: var(--white-site) !important;
    border-color: #4d96ff !important;
    box-shadow: 0 0 0 0.25rem rgba(77, 150, 255, 0.25) !important;
    transform: translateY(0) !important;
}

.btn-outline-success {
    color: #00c853 !important;
    border: 2px solid #00c853 !important;
    background-color: transparent !important;
}

.btn-outline-success:hover {
    background-color: #00c853 !important;
    color: var(--white-site) !important;
    border-color: #00c853 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 10px rgba(0, 200, 83, 0.2) !important;
}

.btn-outline-success:focus,
.btn-outline-success:active {
    background-color: #00c853 !important;
    color: var(--white-site) !important;
    border-color: #00c853 !important;
    box-shadow: 0 0 0 0.25rem rgba(0, 200, 83, 0.25) !important;
    transform: translateY(0) !important;
}

.btn-outline-dark {
    color: var(--blue-text-site) !important;
    border: 2px solid var(--blue-text-site) !important;
    background-color: transparent !important;
}

.btn-outline-dark:hover {
    background-color: var(--blue-text-site) !important;
    color: var(--white-site) !important;
    border-color: var(--blue-text-site) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 10px rgba(37, 61, 78, 0.2) !important;
}

.btn-outline-dark:focus,
.btn-outline-dark:active {
    background-color: var(--blue-text-site) !important;
    color: var(--white-site) !important;
    border-color: var(--blue-text-site) !important;
    box-shadow: 0 0 0 0.25rem rgba(37, 61, 78, 0.25) !important;
    transform: translateY(0) !important;
}

.btn-outline-light {
    color: #777777 !important;
    border: 2px solid #e0e0e0 !important;
    background-color: transparent !important;
}

.btn-outline-light:hover {
    background-color: var(--white-hover-site) !important;
    color: var(--blue-text-site) !important;
    border-color: #d5d5d5 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08) !important;
}

.btn-outline-light:focus,
.btn-outline-light:active {
    background-color: var(--white-hover-site) !important;
    color: var(--blue-text-site) !important;
    border-color: #d5d5d5 !important;
    box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.1) !important;
    transform: translateY(0) !important;
}

/* Block Button */
.btn-block {
    display: block !important;
    width: 100% !important;
}

/* Icon only buttons */
.btn-icon {
    width: 2.5rem !important;
    height: 2.5rem !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
}

.btn-icon.btn-sm {
    width: 2rem !important;
    height: 2rem !important;
}

.btn-icon.btn-lg {
    width: 3rem !important;
    height: 3rem !important;
}

.btn-icon i,
.btn-icon svg {
    margin: 0 !important;
}

/* Special buttons */
.btn-add-to-cart {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    font-weight: 700 !important;
}

.btn-checkout {
    padding: 0.75rem 2rem !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, var(--green-primary-site), #2d9e6b) !important;
}

.btn-checkout:hover {
    background: linear-gradient(135deg, #2d9e6b, var(--green-primary-site)) !important;
}

.btn-cancel-order {
    background-color: #777777 !important;
    color: var(--white-site) !important;
    border: 2px solid #777777 !important;
}

.btn-cancel-order:hover {
    background-color: #5a5a5a !important;
    border-color: #5a5a5a !important;
}

.btn-view-details {
    background-color: #6c757d !important;
    color: var(--white-site) !important;
    border: 2px solid #6c757d !important;
}

.btn-view-details:hover {
    background-color: #5a6268 !important;
    border-color: #5a6268 !important;
}

/* Button with elevated look */
.btn-elevated {
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.15s ease !important;
}

.btn-elevated:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08) !important;
}

.btn-elevated:active {
    transform: translateY(1px) !important;
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

/* RTL specific adjustments */
.rtl .btn {
    letter-spacing: 0 !important;
}

/* Animation for loading state */
.btn-loading {
    position: relative !important;
    pointer-events: none !important;
}

.btn-loading:before {
    content: "" !important;
    position: absolute !important;
    top: calc(50% - 0.625rem) !important;
    left: calc(50% - 0.625rem) !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 50% !important;
    border-top-color: white !important;
    animation: spin 0.6s linear infinite !important;
}

.btn-loading > * {
    opacity: 0 !important;
}

@keyframes spin {
    to {
        transform: rotate(360deg) !important;
    }
}

.stepper-datetime {
    margin-top: 0.5rem;
    line-height: 1;
    min-height: 50px;
}

.stepper-date {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--blue-text-site) !important;
    line-height: normal;
}

.stepper-time {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--blue-text-site) !important;
    line-height: normal;
}

textarea {
    resize: vertical !important;
    min-height: 5em !important;
}

/* Responsive Product Card Styles */
.responsive-product-card {
    /* Themable card */
    --product-card-content-h: 7.25rem; /* fixed content height */
    display: grid;
    grid-template-rows: auto var(--product-card-content-h) auto;
    grid-template-areas:
        "media"
        "content"
        "footer";
    width: 100%;
    background: var(--white-site);
    border-radius: 0.75rem;
    overflow: hidden;
    border: 0.062rem solid var(--green-primaryLight-site);
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    position: relative;
    text-decoration: none;
    color: inherit;
}

.responsive-product-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
    text-decoration: none;
    color: inherit;
}

.responsive-product-image-area {
    grid-area: media;
    position: relative;
    aspect-ratio: 1 / 1;
    width: 100%;
    background-color: #f8f8f8;
    overflow: hidden;
}

.responsive-product-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: all 0.3s ease;
}

.responsive-product-image-primary {
    opacity: 1;
    z-index: 1;
}

.responsive-product-image-hover {
    opacity: 0;
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
}

.responsive-product-card:hover .responsive-product-image-primary {
    opacity: 0;
}

.responsive-product-card:hover .responsive-product-image-hover {
    opacity: 1;
    transform: scale(1.05);
}

.responsive-product-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: linear-gradient(135deg, #ff6b6b, #ee5a52);
    color: white;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    z-index: 4;
    box-shadow: 0 2px 4px rgba(255, 107, 107, 0.3);
}

.rtl .responsive-product-badge {
    right: auto;
    left: 8px;
}

.responsive-product-content {
    grid-area: content;
    height: var(--product-card-content-h);
    display: flex;
    flex-direction: column;
    padding: 12px;
    gap: 6px;
    overflow: hidden; /* lock content height */
}

.responsive-product-category {
    font-size: 0.75rem;
    color: #6c757d;
    text-transform: uppercase;
    font-weight: 500;
    margin: 0;
    text-decoration: none;
}

.responsive-product-category:hover {
    color: #495057;
    text-decoration: underline;
}

.responsive-product-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #212529;
    margin: 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-decoration: none;
    flex: 1;
}

.responsive-product-title:hover {
    color: var(--green-primary-site);
    text-decoration: none;
}

.responsive-product-supplier {
    font-size: 0.75rem;
    color: #6c757d;
    margin: 0;
}

.responsive-product-supplier a {
    color: inherit;
    text-decoration: none;
}

.responsive-product-supplier a:hover {
    color: #495057;
    text-decoration: underline;
}

.responsive-product-footer {
    grid-area: footer;
}
.responsive-product-price {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--green-primary-site);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 2px;
}

.responsive-product-action {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.96);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
    color: var(--green-primary-site);
    font-size: 1.2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

.responsive-product-card:hover .responsive-product-action {
    opacity: 1;
}

.responsive-product-action:hover {
    background: var(--green-primary-site);
    color: var(--white-site);
    transform: translate(-50%, -50%) scale(1.1);
}

/* Responsive breakpoints for product cards */
@media (max-width: 576px) {
    .responsive-product-card {
        --product-card-content-h: 6.25rem;
    }
    .responsive-product-content {
        padding: 8px;
        gap: 4px;
    }

    .responsive-product-title {
        font-size: 0.85rem;
    }

    .responsive-product-price {
        font-size: 1rem;
    }

    .responsive-product-badge {
        top: 6px;
        right: 6px;
        font-size: 0.7rem;
        padding: 3px 6px;
    }

    .rtl .responsive-product-badge {
        right: auto;
        left: 6px;
    }
    .responsive-product-supplier,
    .responsive-product-category {
        font-size: 0.7rem;
    }
}

@media (min-width: 768px) {
    .responsive-product-card {
        --product-card-content-h: 7.5rem;
    }
    .responsive-product-content {
        padding: 16px;
        gap: 8px;
    }

    .responsive-product-title {
        font-size: 0.9rem;
    }

    .responsive-product-price {
        font-size: 1rem;
    }
}

@media (min-width: 1200px) {
    .responsive-product-card {
        --product-card-content-h: 8rem;
    }
    .responsive-product-content {
        padding: 18px;
    }

    .responsive-product-title {
        font-size: 1rem;
    }

    .responsive-product-price {
        font-size: 1.4rem;
    }
    .rtl .gallery-container {
        flex-direction: row !important;
    }
}
/* Product Gallery - Improved Layout */
.product-gallery {
    position: relative;
    width: 100%;
    /* min-height: 600px; */
}

.gallery-container {
    display: flex;
    gap: 20px;
    flex-direction: row-reverse;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    /* min-height: 600px; */
}

.rtl .gallery-container {
    flex-direction: column-reverse;
}

.main-image-container {
    flex: 1;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    /* background: #f8f9fa; */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    min-height: 100%;
    width: 100%;
}

.main-gallery-slider {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
}

.main-gallery-slider .swiper-wrapper {
    height: 100%;
}

.main-gallery-slider .swiper-slide {
    height: 100%;
    width: 100%;
}

.main-gallery-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

.main-image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Removed overflow: hidden to allow zoom image to be visible */
}

.zoom-image-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Remove conflicting styles for react-inner-image-zoom */
.zoom-image-container .iiz__img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    border-radius: 8px;
}

/* Main product image styles handled by react-inner-image-zoom */

/* Product Hot Badge */
.product-hot-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
}

.hot-badge-text {
    background: linear-gradient(135deg, #ff6b6b, #ee5a52);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
}

/* Side Thumbnails - Desktop */
.side-thumbnails {
    width: 100px;
    position: relative;
}

.thumbnail-vertical-slider {
    height: 500px;
}

.thumbnail-slide {
    height: 80px !important;
    margin-bottom: 12px;
}

.thumbnail-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    /* border: 2px solid transparent; */
}

.thumbnail-wrapper:hover {
    transform: scale(1.05);
    border-color: var(--green-primary-site);
}

.thumbnail-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.thumbnail-active-indicator {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* border: 2px solid var(--green-primary-site); */
    border-radius: 6px;
    background: rgba(0, 123, 255, 0.1);
}

.thumbnail-slide.active .thumbnail-wrapper {
    border-color: var(--green-primary-site);
    box-shadow: 0 0 0 2px rgba(39, 130, 0, 0.2);
}

/* Scroll Indicator */
.scroll-indicator {
    text-align: center;
    margin-top: 8px;
    color: #6c757d;
    font-size: 0.875rem;
}

.scroll-indicator i {
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-5px);
    }
    60% {
        transform: translateY(-3px);
    }
}

/* Bottom Thumbnails - Mobile */
.bottom-thumbnails {
    margin-top: 16px;
}

.thumbnail-horizontal-slider {
    height: 80px;
}

.mobile-thumbnail {
    height: 80px !important;
    width: 80px !important;
}

.mobile-thumbnail-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.mobile-thumbnail-wrapper:hover {
    transform: scale(1.05);
    border-color: var(--green-primary-site);
}

.mobile-thumbnail-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.mobile-thumbnail-active-indicator {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid var(--green-primary-site);
    border-radius: 6px;
    background: rgba(0, 123, 255, 0.1);
}

.mobile-thumbnail.active .mobile-thumbnail-wrapper {
    border-color: var(--green-primary-site);
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
}

/* Gallery Loading State */
.gallery-loading {
    width: 100%;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border-radius: 12px;
}

.gallery-loading__placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    border-radius: 8px;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* React Inner Image Zoom Styles */
.iiz {
    border-radius: 8px;
    overflow: hidden;
}

.iiz__img {
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.iiz__zoom-img {
    border-radius: 8px;
    background-color: #fff;
}

.iiz__zoom-img img {
    border-radius: 8px;
}

/* Ensure proper zoom container sizing */
.zoom-image-container .iiz {
    width: 100%;
    height: 100%;
}

.zoom-image-container .iiz__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Mobile zoom adjustments */
@media (max-width: 767.98px) {
    .iiz__zoom-img {
        max-width: 90vw;
        max-height: 90vh;
    }

    .zoom-image-container .iiz {
        height: 350px;
    }
}

/* Ensure zoom container doesn't interfere with swiper */
.main-image-wrapper .zoom-image-container {
    height: 100%;
    /* max-height: 550px; */
}

.main-image-wrapper .zoom-image-container .iiz {
    height: 100%;
    /* max-height: 550px; */
}
@media (min-width: 1200px) {
    .main-image-wrapper .zoom-image-container {
        max-height: 550px;
    }
    .main-image-wrapper .zoom-image-container .iiz {
        max-height: 550px;
    }
}

/* Zoom image positioning and behavior */
.iiz__zoom-img {
    z-index: 1000;
    pointer-events: none;
}

.iiz__zoom-img img {
    max-width: none;
    max-height: none;
}

/* Ensure proper zoom behavior */
.iiz__img:hover {
    cursor: zoom-in;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .gallery-container {
        flex-direction: column;
        gap: 16px;
    }

    .side-thumbnails {
        width: 100%;
        order: 2;
    }

    .thumbnail-vertical-slider {
        height: auto;
    }

    .thumbnail-vertical-slider .swiper-wrapper {
        flex-direction: row !important;
        /* gap: 10px; */
    }

    .thumbnail-slide {
        height: 80px !important;
        width: 80px !important;
        margin-bottom: 0;
        margin-right: 12px;
    }
}

@media (max-width: 767.98px) {
    /* .main-gallery-slider {
        height: 350px;
    } */

    .gallery-container {
        gap: 12px;
    }

    .main-image-container {
        border-radius: 8px;
    }

    .product-hot-badge {
        top: 12px;
        right: 12px;
    }

    .hot-badge-text {
        padding: 4px 8px;
        font-size: 0.7rem;
    }

    .bottom-thumbnails {
        margin-top: 12px;
    }

    .mobile-thumbnail {
        height: 60px !important;
        width: 60px !important;
    }

    .thumbnail-horizontal-slider {
        height: 60px;
    }
}

@media (max-width: 575.98px) {
    /* .main-gallery-slider {
        height: 300px;
    }

    .gallery-loading {
        height: 300px;
    } */

    .mobile-thumbnail {
        height: 50px !important;
        width: 50px !important;
    }

    .thumbnail-horizontal-slider {
        height: 50px;
    }
}

/* RTL Support */
.rtl .product-hot-badge {
    right: auto;
    left: 16px;
}

.rtl .side-thumbnails {
    order: -1;
}

.rtl .thumbnail-slide {
    margin-right: 0;
    margin-left: 12px;
}

@media (max-width: 991.98px) {
    .rtl .thumbnail-slide {
        margin-left: 0;
        margin-right: 12px;
    }
}

/* Swiper Navigation Customization */
.main-gallery-slider .swiper-button-next,
.main-gallery-slider .swiper-button-prev {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    color: var(--green-primary-site);
    transition: all 0.3s ease;
}

.main-gallery-slider .swiper-button-next:hover,
.main-gallery-slider .swiper-button-prev:hover {
    background: var(--green-primary-site);
    color: white;
    transform: scale(1.1);
}

.main-gallery-slider .swiper-button-next::after,
.main-gallery-slider .swiper-button-prev::after {
    font-size: 16px;
    font-weight: bold;
}

/* Pagination Customization */
.main-gallery-slider .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: rgba(0, 0, 0, 0.3);
    opacity: 1;
    transition: all 0.3s ease;
}

.main-gallery-slider .swiper-pagination-bullet-active {
    background: var(--green-primary-site);
    transform: scale(1.2);
}

/* Focus States for Accessibility */
.thumbnail-wrapper:focus,
.mobile-thumbnail-wrapper:focus {
    outline: 2px solid var(--green-primary-site);
    outline-offset: 2px;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .thumbnail-wrapper,
    .mobile-thumbnail-wrapper {
        border: 2px solid #000;
    }

    .thumbnail-active-indicator,
    .mobile-thumbnail-active-indicator {
        border-color: #000;
        background: rgba(0, 0, 0, 0.2);
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .thumbnail-wrapper,
    .mobile-thumbnail-wrapper,
    .main-gallery-slider .swiper-button-next,
    .main-gallery-slider .swiper-button-prev {
        transition: none;
    }

    .scroll-indicator i {
        animation: none;
    }

    .gallery-loading__placeholder {
        animation: none;
    }
}

/* Product Detail Page - Improved Layout */
.product-detail-page {
    padding-bottom: 2rem;
    background: #ffffff;
}

.product-detail-content {
    margin-top: 2rem;
}

/* Product Info Section */
.product-info {
    padding: 1.5rem;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    height: fit-content;
}

/* Product Title */
.product-title-mobile,
.product-title-desktop {
    font-size: 1.75rem;
    font-weight: 700;
    color: #212529;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.product-title-mobile {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

/* Product Description */
.product-description {
    margin-bottom: 1.5rem;
}

.description-text {
    font-size: 1rem;
    line-height: 1.6;
    color: #6c757d;
    margin: 0;
}

/* Product Price Section */
.product-price-section {
    margin-bottom: 2rem;
    padding: 1rem;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-radius: 8px;
    border-left: 4px solid var(--green-primary-site);
}

.price-display {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.price-amount {
    font-size: 2rem;
    font-weight: 700;
    color: var(--green-primary-site);
}

.price-currency {
    font-size: 1.25rem;
    color: var(--green-primary-site);
}

/* Product Attributes */
.product-attributes {
    margin-bottom: 2rem;
}

.attribute-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid #e9ecef;
    gap: 0.5rem;
}

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

.attribute-label {
    font-weight: 600;
    color: #495057;
    min-width: 100px;
    font-size: 0.9rem;
}

.attribute-value {
    color: #212529;
    font-weight: 500;
}

.attribute-link {
    color: var(--green-primary-site);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.attribute-link:hover {
    color: var(--green-primary-site);
    text-decoration: underline;
    transform: translateX(2px);
}

/* Add to Cart Section */
.add-to-cart-section {
    /* margin-top: 2rem; */
    padding-top: 1.5rem;
    border-top: 1px solid #e9ecef;
}

/* Skeleton Loading States */
.product-detail-skeleton {
    padding: 2rem 0;
}

.gallery-skeleton {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 1rem;
}

.thumbnail-skeleton {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.content-skeleton {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 1.5rem;
}

.attributes-skeleton {
    margin: 1.5rem 0;
}

.attribute-skeleton {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.action-skeleton {
    margin-top: 2rem;
}

/* Responsive Design */
@media (max-width: 1199.98px) {
    .product-info {
        padding: 1.25rem;
    }

    .product-title-desktop {
        font-size: 1.5rem;
    }

    .price-amount {
        font-size: 1.75rem;
    }
}

@media (max-width: 991.98px) {
    .product-detail-page {
        padding: 1.5rem 0;
    }

    .product-detail-content {
        margin-top: 1.5rem;
    }

    .product-info {
        /* margin-top: 1.5rem; */
        padding: 1rem;
    }

    .product-title-mobile {
        font-size: 1.25rem;
        margin-bottom: 0.75rem;
    }

    .description-text {
        font-size: 0.9rem;
    }

    .price-amount {
        font-size: 1.5rem;
    }

    .attribute-label {
        min-width: 80px;
        font-size: 0.85rem;
    }
}

@media (max-width: 767.98px) {
    .product-detail-page {
        padding: 1rem 0;
    }

    .product-detail-content {
        margin-top: 1rem;
    }

    .product-info {
        padding: 0.75rem;
        border-radius: 8px;
    }

    .product-title-mobile {
        font-size: 1.125rem;
        margin-bottom: 0.5rem;
    }

    .description-text {
        font-size: 0.85rem;
        line-height: 1.5;
    }

    .product-price-section {
        margin-bottom: 1.5rem;
        padding: 0.75rem;
    }

    .price-amount {
        font-size: 1.25rem;
    }

    .price-currency {
        font-size: 1rem;
    }

    .product-attributes {
        margin-bottom: 1.5rem;
    }

    .attribute-item {
        padding: 0.5rem 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .attribute-label {
        min-width: auto;
        font-size: 0.8rem;
    }

    .attribute-value,
    .attribute-link {
        font-size: 0.85rem;
    }

    .add-to-cart-section {
        margin-top: 1.5rem;
        padding-top: 1rem;
    }
}

@media (max-width: 575.98px) {
    .product-detail-page {
        padding: 0.5rem 0;
    }

    .product-info {
        padding: 0.5rem;
        border-radius: 6px;
    }

    .product-title-mobile {
        font-size: 1.2rem;
    }

    .description-text {
        font-size: 0.8rem;
    }

    .product-price-section {
        padding: 0.5rem;
        margin-bottom: 1rem;
    }

    .price-amount {
        font-size: 1.5rem;
    }

    .attribute-item {
        padding: 0.375rem 0;
    }

    .attribute-label {
        font-size: 0.75rem;
    }

    .attribute-value,
    .attribute-link {
        font-size: 0.8rem;
    }
}

/* RTL Support */
.rtl .product-price-section {
    border-left: none;
    border-right: 4px solid var(--green-primary-site);
}

.rtl .attribute-link:hover {
    transform: translateX(-2px);
}

.rtl .attribute-item {
    flex-direction: row;
}

@media (max-width: 767.98px) {
    .rtl .attribute-item {
        flex-direction: column;
        align-items: flex-end;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .product-info {
        border: 2px solid #000;
    }

    .product-price-section {
        border: 2px solid #000;
        border-left: 4px solid #000;
    }

    .attribute-item {
        border-bottom: 2px solid #000;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .attribute-link {
        transition: none;
    }

    .attribute-link:hover {
        transform: none;
    }
}

/* Focus States for Accessibility */
.product-title-mobile:focus,
.product-title-desktop:focus,
.attribute-link:focus {
    outline: 2px solid var(--green-primary-site);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Print Styles */
@media print {
    .product-detail-page {
        padding: 0;
        background: white;
    }

    .product-info {
        box-shadow: none;
        border: 1px solid #000;
    }

    .add-to-cart-section {
        display: none;
    }
}

.categories-dropdown-wrap.popover {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0.25rem;
    opacity: 0;
    transform: translateY(8px) scale(0.98);
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.18s ease-out, transform 0.18s ease-out,
        visibility 0s linear 0.18s;
}
.categories-dropdown-wrap.popover.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    visibility: visible;
    transition: opacity 0.22s ease-out, transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
        visibility 0s;
}
.menu-card {
    position: relative;
    min-width: 14rem;
    background: #ffffff;
    /* border: 1px solid #ffffff; */
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
    padding: 10px;
}
.menu-card::after {
    content: "";
    position: absolute;
    top: -7px;
    left: 18px;
    width: 14px;
    height: 14px;
    background: #ffffff;
    border-left: 1px solid #ffffff;
    border-top: 1px solid #ffffff;
    transform: rotate(45deg);
    box-shadow: -2px -2px 6px rgba(0, 0, 0, 0.04);
}
.rtl .menu-card::after {
    left: auto;
    right: 18px;
}
@keyframes menuItemIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    transition: background-color 0.15s ease border-color 0.15s ease;
    cursor: pointer;
    color: #0f172a;
    font-weight: 600;
    opacity: 0;
    box-sizing: border-box;
    border: 1px solid transparent;
}
.popover.open .menu-item {
    animation: menuItemIn 0.22s ease-out both;
    animation-delay: calc((var(--i, 0)) * 40ms);
}
.menu-item:hover,
.menu-item:focus-within {
    background-color: #def9ec !important;
    border-color: var(--green-primary-site) !important;
    color: #3bb77e !important;
}
.menu-icon {
    border-radius: 8px;
    object-fit: cover;
    flex: 0 0 28px;
}
.menu-text,
.header_items-dropdown {
    font-family: "Amazon Ember", sans-serif !important;
    font-size: 0.9rem !important;
    line-height: 1.25rem;
}
.menu-text {
    font-weight: normal !important;
}
.menu-item.view-more {
    justify-content: center;
    margin-top: 4px;
    font-weight: 700;
    color: #1e293b;
    border-top: 1px dashed #cbd5e1;
}
.menu-item.view-more:hover {
    background: #fff;
}
@media (max-width: 64rem) {
    .header-style-1 .main-categori-wrap > a.categories-button-active {
        font-size: 0.875rem;
        width: 12rem;
        justify-content: space-evenly;
    }
}
.menu-item:hover .menu-text,
.menu-item:hover .header_items-dropdown {
    color: #3bb77e !important;
}
.menu-text,
.menu-item i {
    transition: color 0.15s ease-in-out;
}
.header-account-dropdown {
    position: relative;
}
.account-popover {
    left: auto !important;
    right: 0 !important;
    width: auto;
    max-width: 17rem;
    min-width: 14rem;
    z-index: 1000;
}
.account-popover .menu-card {
    width: 100%;
}
.account-popover .menu-item {
    padding: 10px 14px;
}
.account-popover .menu-card::after {
    left: auto;
    right: 24px;
}
.rtl .account-popover {
    right: auto !important;
    left: 0 !important;
}
.rtl .account-popover .menu-card::after {
    right: auto;
    left: 24px;
}
@media (max-width: 768px) {
    .account-popover {
        max-width: 88vw;
        min-width: 12rem;
        margin-inline: 8px;
    }
}
.account-popover {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.2s ease-out, transform 0.2s ease-out, visibility 0s linear 0.2s;
}
.header-account-dropdown:hover .account-popover {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    visibility: visible;
    transition: opacity 0.22s ease-out, transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
        visibility 0s;
}
.header-account-dropdown:hover .menu-item {
    animation: menuItemIn 0.22s ease-out both;
}
.account-popover .menu-item a,
.account-popover .menu-item a:hover {
    color: inherit;
}
.account-popover .menu-item:hover,
.account-popover .menu-item:hover i,
.account-popover .menu-item a:hover,
.account-popover .menu-item a:hover i {
    color: var(--green-primary-site) !important;
}
.account-popover .menu-item i,
.account-popover .menu-item .menu-text {
    transition: color 0.15s ease-in-out;
}