        border-image: repeating-linear-gradient(to right, var(--gray-800) 0, var(--gray-800) 10px, transparent 0, transparent 22px);
        border-image-slice: 1 !important;
        border-width: 0 0 6px 0 !important;
    }

    .slider-container {
        width: 80%;
        max-width: 500px;
        margin: 0;
        position: relative;
        padding: 20px 20px;
        margin-top: 8px;
    }
}

.coffee-item .plus-price-name>span {
    transition: all 0.5s ease-in-out;
    white-space: nowrap;
    margin-left: -24px !important;
    text-align: center;
}


}

/* =========================================================
   DARK MODE OVERRIDES - Caffito
   این بخش برای تیره‌کردن ظاهر سایت اضافه شده است.
   ========================================================= */
:root {
    --gray-100: #0b0b0b;
    --gray-150: #121212;
    --gray-200: #1c1c1c;
    --gray-300: #2b2b2b;
    --gray-400: #454545;
    --gray-500: #777777;
    --gray-600: #bdbdbd;
    --gray-700: #eeeeee;
    --gray-800: #f3f3f3;
    --gray-900: #f8f8f8;
    --gray-1000: #ffffff;
}

html {
    background: #080808 !important;
    color-scheme: dark;
}

body,
#page,
.site,
.site-content,
#content,
main,
.elementor,
.elementor-page,
.elementor-section,
.elementor-container,
.e-con,
.e-con-inner,
section,
article,
header,
footer,
.nav-menu,
.search-section,
.search-section form,
.search-section input,
.filter-menu,
.product-card,
.popup-container,
.hero-section,
.hero-section-logo,
.footer-section,
.footer-logo,
.products-section,
.products-section .sort-dropdown,
.products-section .sort-dropdown .sort-opt,
.bestseller-section-container,
.menu-section,
.category-section,
.product-section,
.widget,
.widget-area,
.woocommerce,
.woocommerce-page,
.woocommerce div.product,
.woocommerce ul.products li.product,
.woocommerce-cart,
.woocommerce-checkout,
.woocommerce form,
.woocommerce input,
.woocommerce select,
.woocommerce textarea,
.elementor-widget-container {
    background-color: #0b0b0b !important;
    color: #eeeeee !important;
}

/* سطوح کارت‌ها و کادرهای داخلی */
.product-card,
.filter-menu,
.popup-container,
.search-section form,
.search-section input,
.nav-menu,
.products-section .sort-dropdown,
.products-section .sort-dropdown .sort-opt,
.woocommerce ul.products li.product,
.woocommerce div.product .summary,
.woocommerce-cart .cart-collaterals,
.woocommerce-checkout #payment,
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
    background-color: #171717 !important;
    color: #f2f2f2 !important;
    border-color: #383838 !important;
}

/* متن‌ها، عنوان‌ها و لینک‌ها */
body,
body p,
body span,
body li,
body label,
body small,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body .elementor-heading-title,
body .elementor-widget-text-editor,
body .woocommerce-breadcrumb,
body .price,
body .amount {
    color: #eeeeee;
}

a {
    color: #f0f0f0;
}

a:hover {
    color: #ffffff;
}

button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.elementor-button {
    background-color: #242424 !important;
    color: #ffffff !important;
    border-color: #444444 !important;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.elementor-button:hover {
    background-color: #333333 !important;
    color: #ffffff !important;
}

input::placeholder,
textarea::placeholder {
    color: #a8a8a8 !important;
    opacity: 1;
}

hr,
.product-card,
.filter-menu,
.popup-container,
input,
textarea,
select,
table,
th,
td {
    border-color: #333333 !important;
}

table,