* {
 box-sizing: border-box;
}

html {
 scroll-behavior: smooth;
}

body.digital-menu {
 margin: 0;
 min-height: 100vh;

 direction: rtl;

 color: #f5f5f5;

 font-family:
 "Vazirmatn",
 Tahoma,
 Arial,
 sans-serif;

 background: #0d0d0d;

 overflow-x: clip;

 position: relative;
}

body.digital-menu a {
 color: inherit;
}

/* =========================================================
 پس زمینه
 ========================================================= */

body.digital-menu::before {
 content: "";

 position: fixed;

 inset: -30px;

 background-image: var(--cafe-bg);

 background-size: cover;

 background-position: center;

 background-repeat: no-repeat;

 filter: blur(15px);

 transform: scale(1.06);

 opacity: 0.22;

 z-index: -2;
}

body.digital-menu::after {
 content: "";

 position: fixed;

 inset: 0;

 background:
 linear-gradient(180deg,
 rgba(10, 10, 10, 0.95),
 rgba(13, 13, 13, 0.98));

 z-index: -1;

 pointer-events: none;
}

/* =========================================================
 بدنه اصلی
 ========================================================= */

.menu {
 width: 100%;

 max-width: 1100px;

 margin: 0 auto;

 padding: 38px 25px 80px;
}

/* =========================================================
 لوگو
 ========================================================= */

.cafe-header .logo {
 width: 94px;
 height: 94px;

 margin: 0 auto 18px;

 display: flex;

 align-items: center;
 justify-content: center;

 overflow: hidden;

 border-radius: 27px;

 background: #181818;

 border: 1px solid #292929;

 box-shadow:
 0 18px 45px rgba(0, 0, 0, 0.35);
}

.cafe-header .logo img {
 width: 100%;
 height: 100%;

 display: block;

 object-fit: contain;

 padding: 9px;
}

.cafe-header .logo span {
 color: #666;

 font-size: 11px;

 letter-spacing: 1px;
}

/* =========================================================
 نام کافه
 ========================================================= */

.cafe-header h1 {
 margin: 0;

 text-align: center;

 color: #f47c20;

 font-size: 30px;

 line-height: 1.4;

 font-weight: 800;
}

.subtitle {
 max-width: 520px;

 margin: 8px auto 0;

 padding: 0 10px;

 text-align: center;

 color: #858585;

 font-size: 13px;

 line-height: 1.9;

 font-weight: 600;
}

/* =========================================================
 عنوان بخش
 ========================================================= */

.section-title {
 width: 100%;

 margin: 28px 0 14px;

 color: #fff;

 font-size: 20px;

 line-height: 1.6;

 font-weight: 800;

 text-align: right;
}

/* =========================================================
 دسته بندی دسکتاپ
 ========================================================= */

.categories {
 display: flex;

 align-items: center;

 justify-content: center;

 gap: 10px;

 width: 100%;

 margin-top: 25px;

 padding: 5px 0;

 overflow-x: auto;

 scrollbar-width: none;
}

.categories::-webkit-scrollbar {
 display: none;
}

/* حذف عنوان داخلی دسته بندی */

.categories-title {
 display: none !important;
}

/* دسته */

.categories a {
 position: relative;

 flex-shrink: 0;

 width: 90px;

 min-height: 82px;

 padding: 9px 6px;

 display: flex;

 flex-direction: column;

 align-items: center;

 justify-content: center;

 gap: 7px;

 border-radius: 17px;

 border: 1px solid #292929;

 background: #181818;

 color: #999;

 text-decoration: none;

 text-align: center;

 font-size: 12px;

 line-height: 1.5;

 font-weight: 800;

 transition:
 background 0.22s ease,
 border-color 0.22s ease,
 transform 0.22s ease,
 box-shadow 0.22s ease;
}

.categories a:hover {
 transform: translateY(-2px);

 border-color:
 rgba(244, 124, 32, 0.45);
}

/*
 خیلی مهم:
 آیکون پیش فرض CSS را حذف می‌کنیم.
 چون خود PHP آیکون واقعی را داخل
 .category-icon قرار می‌دهد.
*/

.categories a::before {
 display: none !important;
}

/* آیکون واقعی دسته */

.category-icon {
 width: 34px;
 height: 34px;

 display: flex;

 align-items: center;
 justify-content: center;

 flex-shrink: 0;

 border-radius: 11px;

 background: #242424;

 color: #f47c20;

 font-size: 18px;

 line-height: 1;
}

.categories a.active {
 background: #f47c20;

 color: #fff;

 border-color: #f47c20;

 box-shadow:
 0 10px 28px rgba(244, 124, 32, 0.25);
}

.categories a.active .category-icon {
 background:
 rgba(0, 0, 0, 0.16);

 color: #fff;
}

/* =========================================================
 SEARCH
 ========================================================= */

.menu-search {
 position: relative;

 width: 100%;

 margin: 0 0 18px;

 direction: rtl;
}

/* خود input */

.menu-search input {
 width: 100%;

 height: 52px;

 display: block;

 padding: 0 50px 0 48px;

 border: 1px solid #292929;

 border-radius: 16px;

 outline: none;

 background:
 rgba(24, 24, 24, 0.94);

 color: #fff;

 font-family:
 Tahoma,
 Arial,
 sans-serif;

 font-size: 13px;

 font-weight: 600;

 box-shadow:
 0 8px 25px rgba(0, 0, 0, 0.22);

 transition:
 border-color 0.22s ease,
 box-shadow 0.22s ease,
 background 0.22s ease;
}

.menu-search input::placeholder {
 color: #777;

 font-weight: 500;
}

.menu-search input:focus {
 background: #1b1b1b;

 border-color:
 rgba(244, 124, 32, 0.65);

 box-shadow:
 0 0 0 3px rgba(244, 124, 32, 0.08),
 0 10px 30px rgba(0, 0, 0, 0.28);
}

/*
 =========================================================
 مهم:
 ذره بین قدیمی که با ::before ساخته شده بود حذف می‌شود.
 =========================================================
*/

.menu-search::before {
 content: none !important;
}

/*
 ذره بین واقعی سرچ
*/

.menu-search-icon {
 position: absolute;

 right: 17px;

 top: 50%;

 transform: translateY(-50%);

 width: 25px;
 height: 25px;

 display: flex;

 align-items: center;
 justify-content: center;

 color: #f47c20;

 font-size: 22px;

 line-height: 1;

 pointer-events: none;

 z-index: 5;
}

/*
 اگر آیکون‌های اضافی وجود داشته باشند
*/

.search-icon,
.search-button-icon,
.categories-search-icon {
 display: none !important;
}

/* =========================================================
 دکمه پاک کردن سرچ
 ========================================================= */

.search-clear {
 position: absolute;

 left: 14px;

 right: auto;

 top: 50%;

 transform: translateY(-50%);

 width: 28px;
 height: 28px;

 display: none;

 align-items: center;
 justify-content: center;

 padding: 0;

 border: 0;

 border-radius: 50%;

 background: #292929;

 color: #aaa;

 font-size: 17px;

 line-height: 1;

 cursor: pointer;

 z-index: 6;

 transition:
 background 0.2s ease,
 color 0.2s ease;
}

.menu-search.has-value .search-clear {
 display: flex;
}

.search-clear:hover {
 background: #f47c20;

 color: #fff;
}

/*
 جلوگیری از ضربدر خود مرورگر
*/

.menu-search input[type="search"] {
 -webkit-appearance: none;

 appearance: none;
}

.menu-search input[type="search"]::-webkit-search-cancel-button,
.menu-search input[type="search"]::-webkit-search-decoration,
.menu-search input[type="search"]::-webkit-search-results-button,
.menu-search input[type="search"]::-webkit-search-results-decoration {
 -webkit-appearance: none;

 appearance: none;

 display: none;
}

/* =========================================================
 نتیجه سرچ
 ========================================================= */

.search-result-info {
 display: none;

 margin: 0 0 14px;

 padding: 10px 13px;

 border-radius: 12px;

 background:
 rgba(244, 124, 32, 0.08);

 border:
 1px solid rgba(244, 124, 32, 0.16);

 color: #aaa;

 font-size: 11px;

 font-weight: 700;

 text-align: right;
}

/* =========================================================
 نتیجه‌ای پیدا نشد
 ========================================================= */

.search-empty {
 display: none;

 padding: 45px 20px;

 margin-top: 10px;

 text-align: center;

 background: #181818;

 border: 1px solid #292929;

 border-radius: 18px;

 color: #777;

 font-size: 13px;

 font-weight: 700;

 box-shadow:
 0 10px 30px rgba(0, 0, 0, 0.20);
}

.search-empty-icon {
 width: 52px;
 height: 52px;

 margin: 0 auto 13px;

 display: flex;

 align-items: center;
 justify-content: center;

 border-radius: 16px;

 background: #222;

 color: #f47c20;

 font-size: 25px;
}

/* =========================================================
 کارت محصولات
 ========================================================= */

.menu-items {
 width: 100%;

 margin-top: 30px;

 display: flex;

 flex-direction: column;

 gap: 12px;
}

/* =========================================================
 کارت محصول
 ========================================================= */

.menu-item {
 position: relative;

 display: flex;

 align-items: center;

 gap: 16px;

 width: 100%;

 min-height: 112px;

 padding: 12px;

 background: #181818;

 border: 1px solid #292929;

 border-radius: 20px;

 box-shadow:
 0 10px 30px rgba(0, 0, 0, 0.25);

 transition:
 0.22s ease;

 animation:
 menuItemAppear 0.45s ease both;

 cursor: pointer;
}

.menu-item:hover {
 transform: translateY(-2px);

 border-color:
 rgba(244, 124, 32, 0.30);

 box-shadow:
 0 15px 38px rgba(0, 0, 0, 0.35);
}

/* =========================================================
 تصویر محصول
 ========================================================= */

.item-image {
 width: 92px;
 height: 92px;

 flex-shrink: 0;

 overflow: hidden;

 border-radius: 16px;

 background: #222;

 border: 1px solid #303030;
}

.item-image img {
 width: 100%;
 height: 100%;

 display: block;

 object-fit: cover;

 transition:
 transform 0.35s ease;
}

.menu-item:hover .item-image img {
 transform: scale(1.05);
}

/* =========================================================
 اطلاعات محصول
 ========================================================= */

.item-info {
 flex: 1;

 min-width: 0;

 text-align: right;
}

.item-info h2 {
 margin: 0 0 7px;

 color: #fff;

 font-size: 17px;

 line-height: 1.5;

 font-weight: 800;
}

.item-info p {
 margin: 0;

 color: #858585;

 font-size: 12px;

 line-height: 1.8;

 font-weight: 600;

 display: -webkit-box;

 -webkit-line-clamp: 2;

 -webkit-box-orient: vertical;

 overflow: hidden;
}

/* =========================================================
 قیمت
 ========================================================= */

.price {
 flex-shrink: 0;

 align-self: flex-end;

 margin-bottom: 3px;

 padding: 7px 10px;

 border-radius: 10px;

 background:
 rgba(244, 124, 32, 0.12);

 color: #ff8a35;

 font-size: 13px;

 font-weight: 800;

 white-space: nowrap;
}

/* =========================================================
 بدون محصول
 ========================================================= */

.menu-items>p {
 margin: 30px 0;

 padding: 35px 20px;

 text-align: center;

 color: #777;

 background: #181818;

 border: 1px solid #292929;

 border-radius: 18px;

 font-size: 13px;

 font-weight: 700;
}

/* =========================================================
 مودال
 ========================================================= */

.product-modal {
 position: fixed;

 inset: 0;

 z-index: 1000;

 display: none;

 align-items: flex-end;

 justify-content: center;

 padding: 18px;

 background:
 rgba(0, 0, 0, 0.75);

 backdrop-filter: blur(10px);

 -webkit-backdrop-filter: blur(10px);
}

.product-modal.active {
 display: flex;
}

.product-modal-content {
 position: relative;

 width: 100%;

 max-width: 520px;

 max-height: 90vh;

 overflow-y: auto;

 padding: 16px;

 background: #181818;

 border: 1px solid #303030;

 border-radius: 26px;

 box-shadow:
 0 25px 80px rgba(0, 0, 0, 0.60);

 animation:
 modalAppear 0.3s ease both;
}

.product-modal-image {
 width: 100%;

 aspect-ratio: 1 / 1;

 height: auto;

 max-height: min(72vw, 420px);

 overflow: hidden;

 border-radius: 20px;

 background: #222;
}

.product-modal-image img {
 width: 100%;
 height: 100%;

 display: block;

 object-fit: cover;
}

.product-modal-info {
 padding: 18px 5px 8px;

 text-align: right;
}

.product-modal-info h2 {
 margin: 0 0 8px;

 color: #fff;

 font-size: 23px;

 font-weight: 800;
}

.product-modal-info p {
 margin: 0 0 16px;

 color: #858585;

 font-size: 13px;

 line-height: 2;

 font-weight: 600;
}

.product-modal-price {
 display: inline-flex;

 padding: 8px 12px;

 border-radius: 11px;

 background:
 rgba(244, 124, 32, 0.12);

 color: #ff8a35;

 font-size: 14px;

 font-weight: 800;
}

.product-modal-close {
 position: absolute;

 top: 25px;

 left: 25px;

 width: 38px;
 height: 38px;

 display: flex;

 align-items: center;
 justify-content: center;

 border: 1px solid #333;

 border-radius: 50%;

 background:
 rgba(20, 20, 20, 0.90);

 color: #fff;

 font-size: 22px;

 cursor: pointer;

 z-index: 10;
}

/* =========================================================
 انیمیشن
 ========================================================= */

.menu-item:nth-child(2) {
 animation-delay: 0.04s;
}

.menu-item:nth-child(3) {
 animation-delay: 0.08s;
}

.menu-item:nth-child(4) {
 animation-delay: 0.12s;
}

.menu-item:nth-child(5) {
 animation-delay: 0.16s;
}

.menu-item:nth-child(6) {
 animation-delay: 0.20s;
}

@keyframes menuItemAppear {

 from {
 opacity: 0;

 transform:
 translateY(10px);
 }

 to {
 opacity: 1;

 transform:
 translateY(0);
 }
}

@keyframes modalAppear {

 from {
 opacity: 0;

 transform:
 translateY(25px) scale(0.98);
 }

 to {
 opacity: 1;

 transform:
 translateY(0) scale(1);
 }
}

/* =========================================================
 موبایل
 ========================================================= */

@media (max-width: 600px) {

 body.digital-menu {
 overflow-x: hidden;
 }

 .menu {
 width: 100%;

 max-width: 100%;

 padding:
 25px 7px 50px;
 }

 .cafe-header .logo {
 width: 78px;
 height: 78px;

 margin-bottom: 14px;

 border-radius: 22px;
 }

 .cafe-header h1 {
 font-size: 24px;
 }

 .subtitle {
 font-size: 11px;

 margin-top: 5px;
 }

 /* =====================================================
 عنوان بخش
 ===================================================== */

 .section-title {
 width: calc(100% - 84px);

 margin-top: 10px;

 margin-left: 84px;

 margin-right: 0;

 margin-bottom: 12px;

 color: #fff;

 font-size: 18px;

 line-height: 1.6;

 font-weight: 800;

 text-align: right;
 }

 /* =====================================================
 پنل دسته بندی سمت چپ
 ===================================================== */

 .categories {
 position: fixed;

 top: 50%;
 left: 0;

 transform: translateY(-50%);

 z-index: 100;

 width: 76px;

 height: auto;

 max-height: 72vh;

 margin: 0;

 padding: 7px;

 display: flex;

 flex-direction: column;

 align-items: stretch;

 justify-content: flex-start;

 gap: 7px;

 overflow-x: hidden;

 overflow-y: auto;

 background:
 rgba(24, 24, 24, 0.96);

 border: 1px solid #303030;

 border-left: none;

 border-radius:
 0 20px 20px 0;

 box-shadow:
 8px 0 30px rgba(0, 0, 0, 0.35);

 backdrop-filter: blur(16px);

 -webkit-backdrop-filter: blur(16px);

 scrollbar-width: none;
 }

 .categories::-webkit-scrollbar {
 display: none;
 }

 /* =====================================================
 هر دسته کاملاً یک اندازه
 ===================================================== */

 .categories a {
 width: 100%;

 min-width: 100%;

 height: 105px;

 min-height: 105px;

 padding: 8px 4px;

 display: flex;

 flex-direction: column;

 align-items: center;

 justify-content: center;

 gap: 7px;

 border-radius: 14px;

 border: 1px solid #303030;

 background: #181818;

 color: #bdbdbd;

 font-size: 10px;

 line-height: 1.4;

 font-weight: 800;

 transition:
 background 0.2s ease,
 border-color 0.2s ease,
 transform 0.2s ease;
 }

 /*
 حذف آیکون ساختگی CSS
 */

 .categories a::before {
 display: none !important;
 }

 /* آیکون واقعی */

 .category-icon {
 width: 36px;
 height: 36px;

 display: flex;

 align-items: center;
 justify-content: center;

 flex-shrink: 0;

 border-radius: 10px;

 background: #242424;

 color: #f47c20;

 font-size: 18px;

 line-height: 1;
 }

 .categories a.active {
 background: #f47c20;

 border-color: #f47c20;

 color: #fff;

 box-shadow:
 0 8px 22px rgba(244, 124, 32, 0.22);
 }

 .categories a.active .category-icon {
 background:
 rgba(0, 0, 0, 0.16);

 color: #fff;
 }

 .category-text {
 display: block;

 width: 100%;

 overflow: hidden;

 text-overflow: ellipsis;

 white-space: normal;

 word-break: normal;
 }

 /* =====================================================
 سرچ موبایل
 ===================================================== */

 .menu-search {
 position: relative;

 width: calc(100% - 84px);

 margin-top: 18px;

 margin-left: 84px;

 margin-right: 0;

 margin-bottom: 18px;
 }

 .menu-search input {
 width: 100%;

 height: 52px;

 padding:
 0 47px 0 45px;

 border: 1px solid #303030;

 border-radius: 16px;

 background: #181818;

 color: #fff;

 font-size: 12px;

 font-weight: 600;

 box-shadow:
 0 8px 25px rgba(0, 0, 0, 0.20);
 }

 .menu-search input:focus {
 border-color:
 rgba(244, 124, 32, 0.65);

 box-shadow:
 0 0 0 3px rgba(244, 124, 32, 0.08);
 }

 .menu-search input::placeholder {
 color: #777;

 font-weight: 500;
 }

 /* فقط یک ذره بین */

 .menu-search-icon {
 position: absolute;

 right: 15px;

 top: 50%;

 transform: translateY(-50%);

 width: 24px;
 height: 24px;

 display: flex;

 align-items: center;
 justify-content: center;

 color: #f47c20;

 font-size: 21px;

 pointer-events: none;

 z-index: 5;
 }

 /* دکمه ضربدر سرچ */

 .search-clear {
 left: 11px;

 right: auto;

 width: 26px;
 height: 26px;

 font-size: 16px;
 }

 /* =====================================================
 محصولات
 ===================================================== */

 .menu-items {
 width: calc(100% - 84px);

 margin-top: 18px;

 margin-left: 84px;

 margin-right: 0;

 gap: 10px;
 }

 .menu-item {
 width: 100%;

 min-height: 94px;

 gap: 10px;

 padding: 9px;

 border-radius: 16px;
 }

 .item-image {
 width: 70px;
 height: 70px;

 border-radius: 12px;
 }

 .item-info h2 {
 margin-bottom: 4px;

 font-size: 14px;

 font-weight: 800;
 }

 .item-info p {
 font-size: 10px;

 line-height: 1.7;

 font-weight: 600;
 }

 .price {
 font-size: 10px;

 padding: 5px 6px;

 border-radius: 8px;
 }

 /* =====================================================
 نتیجه سرچ
 ===================================================== */

 .search-result-info {
 width: calc(100% - 84px);

 margin-left: 84px;

 margin-right: 0;

 padding: 9px 11px;

 margin-bottom: 11px;

 font-size: 10px;
 }

 .search-empty {
 width: calc(100% - 84px);

 margin-left: 84px;

 margin-right: 0;

 padding: 38px 15px;

 border-radius: 16px;

 font-size: 12px;
 }

 /* =====================================================
 مودال
 ===================================================== */

 .product-modal {
 padding: 10px;
 }

 .product-modal-content {
 max-height: 92vh;

 padding: 10px;

 border-radius: 23px;
 }

 .product-modal-image {
 aspect-ratio: 1 / 1;

 height: auto;

 max-height: min(78vw, 360px);

 border-radius: 17px;
 }

 .product-modal-info {
 padding: 15px 4px 5px;
 }

 .product-modal-info h2 {
 font-size: 20px;
 }

 .product-modal-info p {
 font-size: 12px;
 }

 .product-modal-close {
 top: 18px;

 left: 18px;

 width: 35px;
 height: 35px;

 font-size: 20px;
 }
}

/* =========================================================
 موبایل خیلی کوچک
 ========================================================= */

@media (max-width: 380px) {

 .categories {
 width: 70px;

 padding: 6px;

 gap: 6px;
 }

 .categories a {
 height: 98px;

 min-height: 98px;

 border-radius: 13px;

 font-size: 9px;
 }

 .category-icon {
 width: 33px;
 height: 33px;

 font-size: 16px;
 }

 .menu-search {
 width: calc(100% - 77px);

 margin-left: 77px;
 }

 .menu-search input {
 height: 48px;

 font-size: 11px;
 }

 .menu-search-icon {
 right: 13px;

 font-size: 20px;
 }

 .menu-items {
 width: calc(100% - 77px);

 margin-left: 77px;
 }

 .section-title {
 width: calc(100% - 77px);

 margin-left: 77px;

 font-size: 17px;
 }

 .search-result-info,
 .search-empty {
 width: calc(100% - 77px);

 margin-left: 77px;
 }

 .item-image {
 width: 62px;
 height: 62px;
 }

 .item-info h2 {
 font-size: 13px;
 }

 .item-info p {
 font-size: 9px;
 }

 .price {
 font-size: 9px;

 padding: 4px 5px;
 }
}
/* =========================================================
 FINAL FIX
 سرچ + پنل دسته بندی موبایل
 ========================================================= */

/* =========================================================
 1. ذره بین داخل باکس سرچ
 ========================================================= */

@media (max-width: 600px) {

 .menu-search {
 position: relative;
 }

 /* ذره بین اصلی */

 .menu-search::before {
 content: "⌕";

 position: absolute;

 right: 16px;

 top: 50%;

 transform: translateY(-54%);

 width: 26px;
 height: 26px;

 display: flex;

 align-items: center;
 justify-content: center;

 color: #f47c20;

 font-size: 25px;

 font-weight: 700;

 line-height: 1;

 pointer-events: none;

 z-index: 20;
 }

 /*
 اگر در HTML آیکون جداگانه هم وجود دارد،
 مخفی‌اش می‌کنیم تا دو ذره‌بین نمایش داده نشود.
 */

 .menu-search-icon {
 display: none !important;
 }

 /* =====================================================
 2. حذف کامل ضربدر سفید
 ===================================================== */

 .search-clear {
 display: none !important;

 visibility: hidden !important;

 opacity: 0 !important;

 pointer-events: none !important;
 }

 /*
 حذف ضربدر داخلی خود مرورگر
 */

 .menu-search input[type="search"]::-webkit-search-cancel-button,
 .menu-search input[type="search"]::-webkit-search-decoration,
 .menu-search input[type="search"]::-webkit-search-results-button,
 .menu-search input[type="search"]::-webkit-search-results-decoration {

 -webkit-appearance: none !important;

 appearance: none !important;

 display: none !important;

 width: 0 !important;

 height: 0 !important;
 }

 .menu-search input[type="search"] {

 -webkit-appearance: none !important;

 appearance: none !important;
 }

 /* =====================================================
 3. پنل دسته بندی تمام قد
 ===================================================== */

 .categories {

 position: fixed;

 top: 0;

 bottom: 0;

 left: 0;

 transform: none;

 z-index: 100;

 width: 82px;

 height: 100vh;

 max-height: none;

 margin: 0;

 padding: 18px 7px;

 display: flex;

 flex-direction: column;

 align-items: stretch;

 justify-content: flex-start;

 gap: 8px;

 overflow-x: hidden;

 overflow-y: auto;

 background:
 rgba(24, 24, 24, 0.97);

 border-top: none;

 border-bottom: none;

 border-left: none;

 border-right: 1px solid #303030;

 border-radius: 0 18px 18px 0;

 box-shadow:
 8px 0 30px rgba(0, 0, 0, 0.35);

 backdrop-filter: blur(16px);

 -webkit-backdrop-filter: blur(16px);

 scrollbar-width: none;
 }

 .categories::-webkit-scrollbar {
 display: none;
 }

 /* =====================================================
 دسته های داخل پنل
 ===================================================== */

 .categories a {

 width: 100%;

 min-width: 100%;

 height: 92px;

 min-height: 92px;

 flex-shrink: 0;

 padding: 8px 4px;

 display: flex;

 flex-direction: column;

 align-items: center;

 justify-content: center;

 gap: 7px;

 border-radius: 14px;

 border: 1px solid #303030;

 background: #181818;

 color: #bdbdbd;

 font-size: 10px;

 line-height: 1.4;

 font-weight: 800;

 text-decoration: none;

 text-align: center;

 transition:
 background 0.2s ease,
 border-color 0.2s ease,
 transform 0.2s ease,
 box-shadow 0.2s ease;
 }

 /* حذف آیکون ساختگی */

 .categories a::before {
 display: none !important;
 }

 /* آیکون واقعی */

 .category-icon {

 width: 36px;

 height: 36px;

 display: flex;

 align-items: center;

 justify-content: center;

 flex-shrink: 0;

 border-radius: 10px;

 background: #242424;

 color: #f47c20;

 font-size: 18px;

 line-height: 1;
 }

 /* دسته فعال */

 .categories a.active {

 background: #f47c20;

 border-color: #f47c20;

 color: #fff;

 box-shadow:
 0 8px 22px rgba(244, 124, 32, 0.25);
 }

 .categories a.active .category-icon {

 background:
 rgba(0, 0, 0, 0.16);

 color: #fff;
 }

 .category-text {

 display: block;

 width: 100%;

 overflow: hidden;

 text-overflow: ellipsis;

 white-space: normal;

 word-break: normal;
 }

 /* =====================================================
 هماهنگ کردن فضای سمت راست
 ===================================================== */

 .menu-search {

 width: calc(100% - 90px);

 margin-left: 90px;

 margin-right: 0;
 }

 .section-title {

 width: calc(100% - 90px);

 margin-left: 90px;

 margin-right: 0;
 }

 .menu-items {

 width: calc(100% - 90px);

 margin-left: 90px;

 margin-right: 0;
 }

 .search-result-info,
 .search-empty {

 width: calc(100% - 90px);

 margin-left: 90px;

 margin-right: 0;
 }
}

/* =========================================================
 موبایل خیلی کوچک
 ========================================================= */

@media (max-width: 380px) {

 .categories {

 width: 76px;

 padding-left: 6px;

 padding-right: 6px;
 }

 .categories a {

 height: 88px;

 min-height: 88px;

 font-size: 9px;
 }

 .category-icon {

 width: 33px;

 height: 33px;

 font-size: 16px;
 }

 .menu-search {

 width: calc(100% - 84px);

 margin-left: 84px;
 }

 .section-title {

 width: calc(100% - 84px);

 margin-left: 84px;
 }

 .menu-items {

 width: calc(100% - 84px);

 margin-left: 84px;
 }

 .search-result-info,
 .search-empty {

 width: calc(100% - 84px);

 margin-left: 84px;
 }
}
/* =========================================================
 اصلاح نهایی سرچ موبایل
 ========================================================= */

@media (max-width: 600px) {

 /* -----------------------------------------------------
 باکس سرچ
 ----------------------------------------------------- */

 .menu-search {
 position: relative;
 }

 .menu-search input {
 padding-right: 48px !important;
 padding-left: 18px !important;
 }

 /* -----------------------------------------------------
 ذره بین داخل باکس
 ----------------------------------------------------- */

 .menu-search::before {
 content: "🔍" !important;

 position: absolute;

 right: 16px;
 top: 50%;

 transform: translateY(-50%);

 width: 24px;
 height: 24px;

 display: flex;

 align-items: center;
 justify-content: center;

 color: #f47c20;

 font-size: 19px;

 line-height: 1;

 pointer-events: none;

 z-index: 5;
 }

 /* -----------------------------------------------------
 حذف کامل ضربدر سفید
 ----------------------------------------------------- */

 .search-clear {
 display: none !important;
 }

 .menu-search input[type="search"]::-webkit-search-cancel-button,
 .menu-search input[type="search"]::-webkit-search-decoration {
 display: none !important;

 -webkit-appearance: none !important;
 appearance: none !important;
 }

 .menu-search input[type="search"] {
 -webkit-appearance: none !important;
 appearance: none !important;
 }

 /* -----------------------------------------------------
 حذف هر آیکون سرچ اضافی
 ----------------------------------------------------- */

 .menu-search-icon,
 .search-icon,
 .search-button-icon,
 .categories-search-icon {
 display: none !important;
 }

}

/* =========================================================
 موبایل خیلی کوچک
 ========================================================= */

@media (max-width: 380px) {

 .menu-search input {
 padding-right: 44px !important;
 }

 .menu-search::before {
 right: 14px;

 font-size: 18px;
 }

}
/* =========================================================
 حذف قطعی تمام دکمه‌های ضربدر داخل سرچ
 ========================================================= */

.menu-search button,
.menu-search .search-clear,
.menu-search .clear-search,
.menu-search .search-reset,
.menu-search [class*="clear"],
.menu-search [class*="close"] {
 display: none !important;
 visibility: hidden !important;
 opacity: 0 !important;
 width: 0 !important;
 height: 0 !important;
 min-width: 0 !important;
 min-height: 0 !important;
 padding: 0 !important;
 margin: 0 !important;
 border: 0 !important;
 pointer-events: none !important;
}

/* =========================================================
 حذف ضربدر خود مرورگر
 ========================================================= */

.menu-search input::-webkit-search-cancel-button,
.menu-search input::-webkit-search-decoration,
.menu-search input::-webkit-search-results-button,
.menu-search input::-webkit-search-results-decoration {
 display: none !important;
 -webkit-appearance: none !important;
 appearance: none !important;
}

/* =========================================================
 ذره بین داخل سرچ
 ========================================================= */

.menu-search {
 position: relative !important;
}

.menu-search::before {
 content: "🔍" !important;

 position: absolute !important;

 right: 16px !important;
 top: 50% !important;

 transform: translateY(-50%) !important;

 width: 24px !important;
 height: 24px !important;

 display: flex !important;

 align-items: center !important;
 justify-content: center !important;

 font-size: 18px !important;

 color: #f47c20 !important;

 pointer-events: none !important;

 z-index: 999 !important;
}

.menu-search input {
 padding-right: 48px !important;
}
/* =========================================================
 CENTER HEADER WITH MAIN CONTENT - MOBILE
 ========================================================= */

@media (max-width: 600px) {

 /*
 هدر دقیقاً هم‌عرض فضای اصلی محتوا شود
 */

 .cafe-header {

 width: calc(100% - 84px) !important;

 margin-left: 84px !important;
 margin-right: 0 !important;

 padding: 0 !important;

 text-align: center !important;

 position: relative !important;

 left: auto !important;
 right: auto !important;
 }

 /*
 لوگو
 */

 .cafe-header .logo {

 margin-left: auto !important;
 margin-right: auto !important;

 left: auto !important;
 right: auto !important;
 }

 /*
 نام کافه
 */

 .cafe-header h1 {

 width: 100% !important;

 margin-left: 0 !important;
 margin-right: 0 !important;

 text-align: center !important;
 }

 /*
 توضیحات
 */

 .cafe-header .subtitle {

 width: 100% !important;

 margin-left: auto !important;
 margin-right: auto !important;

 text-align: center !important;
 }

}

/* =========================================================
 MOBILE SMALL
 ========================================================= */

@media (max-width: 380px) {

 .cafe-header {

 width: calc(100% - 77px) !important;

 margin-left: 77px !important;

 }

}
/* =========================================================
 کارت محصول - نسخه حرفه‌ای
 ========================================================= */

.menu-item {
 position: relative;

 display: flex;
 align-items: center;

 gap: 15px;

 width: 100%;

 min-height: 116px;

 padding: 10px;

 background:
 linear-gradient(135deg,
 rgba(30, 30, 30, 0.98),
 rgba(22, 22, 22, 0.98));

 border: 1px solid #303030;

 border-radius: 20px;

 box-shadow:
 0 8px 25px rgba(0, 0, 0, 0.22);

 overflow: hidden;

 cursor: pointer;

 transition:
 transform 0.22s ease,
 border-color 0.22s ease,
 box-shadow 0.22s ease;
}

/* خط ظریف نارنجی */

.menu-item::before {
 content: "";

 position: absolute;

 top: 0;
 bottom: 0;
 right: 0;

 width: 3px;

 background:
 linear-gradient(180deg,
 #f47c20,
 rgba(244, 124, 32, 0.15));

 opacity: 0;

 transition:
 opacity 0.22s ease;
}

/* هاور */

.menu-item:hover {

 transform:
 translateY(-2px);

 border-color:
 rgba(244, 124, 32, 0.38);

 box-shadow:
 0 14px 35px rgba(0, 0, 0, 0.32);
}

.menu-item:hover::before {
 opacity: 1;
}

/* =========================================================
 تصویر محصول
 ========================================================= */

.item-image {

 width: 96px;
 height: 96px;

 flex-shrink: 0;

 overflow: hidden;

 border-radius: 17px;

 background:
 #222;

 border:
 1px solid #353535;

 box-shadow:
 0 5px 15px rgba(0, 0, 0, 0.25);

 position: relative;
}

.item-image img {

 width: 100%;
 height: 100%;

 display: block;

 object-fit: cover;

 transition:
 transform 0.35s ease;
}

.menu-item:hover .item-image img {

 transform:
 scale(1.06);
}

/* =========================================================
 اطلاعات محصول
 ========================================================= */

.item-info {

 flex: 1;

 min-width: 0;

 text-align: right;

 padding:
 2px 0;
}

.item-info h2 {

 margin:
 0 0 6px;

 color:
 #ffffff;

 font-size:
 17px;

 line-height:
 1.5;

 font-weight:
 800;
}

.item-info p {

 margin:
 0;

 color:
 #858585;

 font-size:
 12px;

 line-height:
 1.8;

 font-weight:
 500;

 display:
 -webkit-box;

 -webkit-line-clamp:
 2;

 -webkit-box-orient:
 vertical;

 overflow:
 hidden;
}

/* =========================================================
 قیمت
 ========================================================= */

.price {

 flex-shrink: 0;

 align-self:
 flex-end;

 margin:
 0 2px 2px 0;

 padding:
 8px 11px;

 border-radius:
 11px;

 background:
 rgba(244, 124, 32, 0.13);

 border:
 1px solid rgba(244, 124, 32, 0.12);

 color:
 #ff913f;

 font-size:
 12px;

 font-weight:
 800;

 white-space:
 nowrap;

 box-shadow:
 inset 0 0 15px rgba(244, 124, 32, 0.04);
}

/* =========================================================
 لمس موبایل
 ========================================================= */

.menu-item:active {

 transform:
 scale(0.985);

 border-color:
 rgba(244, 124, 32, 0.5);

 box-shadow:
 0 5px 18px rgba(0, 0, 0, 0.3);
}

/* =========================================================
 موبایل
 ========================================================= */

@media (max-width: 600px) {

 .menu-item {

 min-height:
 100px;

 padding:
 8px;

 gap:
 10px;

 border-radius:
 17px;
 }

 .item-image {

 width:
 74px;

 height:
 74px;

 border-radius:
 13px;
 }

 .item-info h2 {

 margin-bottom:
 4px;

 font-size:
 14px;
 }

 .item-info p {

 font-size:
 10px;

 line-height:
 1.7;
 }

 .price {

 padding:
 6px 7px;

 border-radius:
 9px;

 font-size:
 10px;
 }

}

/* =========================================================
 موبایل خیلی کوچک
 ========================================================= */

@media (max-width: 380px) {

 .menu-item {

 min-height:
 92px;

 padding:
 7px;

 gap:
 8px;
 }

 .item-image {

 width:
 66px;

 height:
 66px;
 }

 .item-info h2 {

 font-size:
 13px;
 }

 .item-info p {

 font-size:
 9px;
 }

 .price {

 font-size:
 9px;

 padding:
 5px 6px;
 }

}
/* Chitgar extras */
.search-result-text {
 margin: 0 0 12px;
 color: #aaa;
 font-size: 12px;
 font-weight: 700;
 text-align: right;
}

.product-modal-call {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 margin-top: 16px;
 padding: 12px 18px;
 border-radius: 14px;
 background: #f47c20;
 color: #fff !important;
 text-decoration: none;
 font-size: 14px;
 font-weight: 800;
}

.product-modal-call:hover {
 filter: brightness(1.05);
}

body.digital-menu .cafe-header h1 {
 color: #f47c20;
}

/* جلوگیری از شکستن sticky به‌خاطر overflow-x:hidden روی body */
body.digital-menu {
 overflow-x: clip;
}

body.digital-menu main {
 background: #0d0d0d;
}

/* هدر سایت ثابت بماند */
body.digital-menu .header.site-header {
 position: sticky;
 top: 0;
 z-index: 1100;
}

body.digital-menu .menu {
 max-width: 1100px;
 width: 100%;
 box-sizing: border-box;
}

/*
 style.css روی .menu-item فلکس ستونی دارد؛
 اینجا دوباره افقی و کوتاه می‌شود (مثل ناس‌باکس).
*/
body.digital-menu .menu-item {
 display: flex !important;
 flex-direction: row !important;
 align-items: center !important;
 gap: 12px !important;
 width: 100% !important;
 min-height: 0 !important;
 height: auto !important;
 padding: 10px !important;
 box-sizing: border-box;
}

body.digital-menu .item-image {
 width: 84px !important;
 height: 84px !important;
 flex: 0 0 84px !important;
 max-width: 84px !important;
 max-height: 84px !important;
 border-radius: 14px !important;
 overflow: hidden;
}

body.digital-menu .item-image img {
 width: 100% !important;
 height: 100% !important;
 object-fit: cover !important;
 display: block;
}

body.digital-menu .item-image--placeholder {
 background: #1a1a1a !important;
 border: 1px solid #2a2a2a;
}

body.digital-menu .item-image--placeholder img {
 object-fit: contain !important;
 padding: 14px;
 opacity: 0.55;
}

body.digital-menu .item-info {
 flex: 1 1 auto !important;
 min-width: 0 !important;
}

body.digital-menu .item-info h2 {
 margin: 0 0 4px !important;
 font-size: 15px !important;
 line-height: 1.35 !important;
}

body.digital-menu .item-info p {
 margin: 0 !important;
 font-size: 11px !important;
 line-height: 1.5 !important;
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
 overflow: hidden;
}

body.digital-menu .price {
 flex-shrink: 0 !important;
 align-self: center !important;
}

@media (max-width: 600px) {
 body.digital-menu .menu {
  max-width: 100%;
  width: 100%;
  padding: 14px 8px 70px 0;
  box-sizing: border-box;
 }

 body.digital-menu .cafe-header {
  width: auto !important;
  max-width: none !important;
  margin-left: 88px !important;
  margin-right: 8px !important;
  padding: 0 !important;
  box-sizing: border-box;
 }

 body.digital-menu .menu-content {
  width: auto;
  max-width: none;
  margin-left: 88px;
  margin-right: 8px;
  box-sizing: border-box;
 }

 body.digital-menu .menu-search,
 body.digital-menu .menu-items,
 body.digital-menu .section-title,
 body.digital-menu .search-result-text,
 body.digital-menu .search-empty {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box;
 }

 body.digital-menu .menu-search input,
 body.digital-menu .menu-item,
 body.digital-menu .menu-item-wrapper {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
 }

 body.digital-menu .menu-item {
  min-height: 0 !important;
  padding: 8px !important;
  gap: 8px !important;
  border-radius: 14px !important;
 }

 body.digital-menu .item-image {
  width: 68px !important;
  height: 68px !important;
  flex: 0 0 68px !important;
  max-width: 68px !important;
  max-height: 68px !important;
  border-radius: 12px !important;
 }

 body.digital-menu .item-info h2 {
  font-size: 13px !important;
 }

 body.digital-menu .item-info p {
  font-size: 10px !important;
  -webkit-line-clamp: 2;
 }

 body.digital-menu .price {
  font-size: 10px !important;
  padding: 5px 6px !important;
 }

 /* سایدبار دسته‌ها ثابت، زیر هدر */
 body.digital-menu .categories {
  position: fixed !important;
  top: 58px !important;
  bottom: 0 !important;
  left: 0 !important;
  height: auto !important;
  max-height: none !important;
  transform: none !important;
  z-index: 50 !important;
 }
}

@media (max-width: 380px) {
 body.digital-menu .cafe-header,
 body.digital-menu .menu-content {
  margin-left: 80px !important;
  margin-right: 6px !important;
 }

 body.digital-menu .menu {
  padding: 12px 6px 60px 0;
 }

 body.digital-menu .item-image {
  width: 60px !important;
  height: 60px !important;
  flex: 0 0 60px !important;
  max-width: 60px !important;
  max-height: 60px !important;
 }

 body.digital-menu .categories {
  top: 54px !important;
 }
}

@media (max-width: 768px) {
 body.digital-menu .site-footer,
 body.digital-menu footer.footer,
 body.digital-menu .footer {
  display: none !important;
 }
}