/**
 * public-menu.css — v0.16 «Premium Café» بازطراحی کامل منوی دیجیتال
 *  - سیستم دیزاین یکپارچه: پالت اسپرسو/کارامل/کرم، شیشه‌گرایی (Glassmorphism)،
 *    سایه‌های چندلایه، انیمیشن‌های سبک، Mobile-First و RTL
 *  - ۴ تم (کرم/تیره/مینیمال/گرم) + حالت خودکار سیستم — رنگ اکسنت هر کافه از تنظیمات
 * طراحی مستقل از قالب سایت تا روی هر پوسته‌ای ثابت باشد.
 */

@font-face {
        font-family: 'Vazirmatn';
        src: url('admin/fonts/Vazirmatn-Regular.woff2') format('woff2');
        font-weight: 400;
        font-display: swap;
}
@font-face {
        font-family: 'Vazirmatn';
        src: url('admin/fonts/Vazirmatn-Medium.woff2') format('woff2');
        font-weight: 500;
        font-display: swap;
}
@font-face {
        font-family: 'Vazirmatn';
        src: url('admin/fonts/Vazirmatn-SemiBold.woff2') format('woff2');
        font-weight: 600;
        font-display: swap;
}
@font-face {
        font-family: 'Vazirmatn';
        src: url('admin/fonts/Vazirmatn-Bold.woff2') format('woff2');
        font-weight: 700;
        font-display: swap;
}

/* ═══════════ توکن‌های دیزاین ═══════════ */
:root {
        /* پالت پایه هویت کافه */
        --ocm-espresso: #291A16;
        --ocm-brown: #39251F;
        --ocm-cream: #F7F0E5;
        --ocm-caramel: #C58B52;
        --ocm-gold: #E2B878;
        --ocm-warm-white: #FFFCF7;

        /* توکن‌های معنایی — تم کرم (پیش‌فرض) */
        --ocm-accent: #C58B52;
        --ocm-accent-deep: #9A6437;
        --ocm-on-accent: #FFFFFF;
        --ocm-ink: #291A16;
        --ocm-muted: #93826F;
        --ocm-bg: #FFFCF7;
        --ocm-bg-2: #F7F0E5;
        --ocm-card: #FFFFFF;
        --ocm-line: #EFE2D2;

        --ocm-radius: 20px;
        --ocm-top-h: 56px;
        --ocm-tool-h: 52px;
        --ocm-cats-h: 50px;
        --ocm-shadow-1: 0 1px 2px rgba(64, 40, 18, 0.06), 0 3px 10px rgba(64, 40, 18, 0.05);
        --ocm-shadow-2: 0 4px 14px rgba(64, 40, 18, 0.10), 0 14px 34px rgba(64, 40, 18, 0.08);
        --ocm-shadow-3: 0 10px 24px rgba(64, 40, 18, 0.16), 0 24px 48px rgba(64, 40, 18, 0.12);
        --ocm-glass: rgba(255, 252, 247, 0.82);
        --ocm-ring: rgba(197, 139, 82, 0.22);
        color-scheme: light;
}

body.oc-public-menu.ocm-theme-cream {
        --ocm-bg: #FFFCF7; --ocm-bg-2: #F7F0E5; --ocm-card: #FFFFFF; --ocm-ink: #291A16;
        --ocm-muted: #93826F; --ocm-line: #EFE2D2; --ocm-accent: #C58B52; --ocm-accent-deep: #9A6437;
        --ocm-shadow-1: 0 1px 2px rgba(64, 40, 18, 0.06), 0 3px 10px rgba(64, 40, 18, 0.05);
        --ocm-shadow-2: 0 4px 14px rgba(64, 40, 18, 0.10), 0 14px 34px rgba(64, 40, 18, 0.08);
        --ocm-shadow-3: 0 10px 24px rgba(64, 40, 18, 0.16), 0 24px 48px rgba(64, 40, 18, 0.12);
        --ocm-glass: rgba(255, 252, 247, 0.82);
        --ocm-ring: rgba(197, 139, 82, 0.22);
        color-scheme: light;
}

/* تم تیرهٔ اسپرسویی — لوکس و آرام */
body.oc-public-menu.ocm-theme-dark {
        --ocm-bg: #211712; --ocm-bg-2: #2A1D16; --ocm-card: #2E2018; --ocm-ink: #F7F0E5;
        --ocm-muted: #B3A08D; --ocm-line: #45332A; --ocm-accent: #E2B878; --ocm-accent-deep: #C58B52;
        --ocm-on-accent: #2B1A10;
        --ocm-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35), 0 3px 10px rgba(0, 0, 0, 0.3);
        --ocm-shadow-2: 0 6px 18px rgba(0, 0, 0, 0.45), 0 16px 40px rgba(0, 0, 0, 0.4);
        --ocm-shadow-3: 0 12px 28px rgba(0, 0, 0, 0.55), 0 28px 56px rgba(0, 0, 0, 0.5);
        --ocm-glass: rgba(33, 23, 18, 0.82);
        --ocm-ring: rgba(226, 184, 120, 0.28);
        color-scheme: dark;
}

body.oc-public-menu.ocm-theme-minimal {
        --ocm-bg: #FFFFFF; --ocm-bg-2: #F6F5F3; --ocm-card: #FFFFFF; --ocm-ink: #1C1712;
        --ocm-muted: #8B857D; --ocm-line: #ECEAE6; --ocm-accent: #A96F3B; --ocm-accent-deep: #7C4E24;
        --ocm-shadow-1: 0 1px 2px rgba(28, 23, 18, 0.05), 0 3px 10px rgba(28, 23, 18, 0.04);
        --ocm-shadow-2: 0 4px 14px rgba(28, 23, 18, 0.09), 0 14px 34px rgba(28, 23, 18, 0.07);
        --ocm-shadow-3: 0 10px 24px rgba(28, 23, 18, 0.14), 0 24px 48px rgba(28, 23, 18, 0.1);
        --ocm-glass: rgba(255, 255, 255, 0.85);
        --ocm-ring: rgba(169, 111, 59, 0.2);
}

body.oc-public-menu.ocm-theme-warm {
        --ocm-bg: #F7F0E5; --ocm-bg-2: #F1E6D4; --ocm-card: #FFFCF7; --ocm-ink: #39251F;
        --ocm-muted: #9A8471; --ocm-line: #E9D8C2; --ocm-accent: #B9793F; --ocm-accent-deep: #8F5728;
        --ocm-shadow-1: 0 1px 2px rgba(120, 72, 20, 0.07), 0 3px 10px rgba(120, 72, 20, 0.06);
        --ocm-shadow-2: 0 4px 14px rgba(120, 72, 20, 0.12), 0 14px 34px rgba(120, 72, 20, 0.09);
        --ocm-shadow-3: 0 10px 24px rgba(120, 72, 20, 0.18), 0 24px 48px rgba(120, 72, 20, 0.13);
        --ocm-glass: rgba(247, 240, 229, 0.85);
        --ocm-ring: rgba(185, 121, 63, 0.22);
}

/* رنگ اکسنت اختصاصی کافه: سایه‌های مشتق با color-mix (با فالبک امن) */
body.oc-public-menu.ocm-has-brand {
        --ocm-accent-deep: #7c4e24;
}
@supports (color: color-mix(in srgb, red 50%, black)) {
        body.oc-public-menu.ocm-has-brand {
                --ocm-accent-deep: color-mix(in srgb, var(--ocm-accent) 62%, #1c0f08);
        }
}

[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; }

body.oc-public-menu {
        background:
                radial-gradient(120% 46% at 82% -6%, rgba(197, 139, 82, 0.07), transparent 58%),
                radial-gradient(90% 40% at 8% 0%, rgba(226, 184, 120, 0.06), transparent 55%),
                var(--ocm-bg);
        color: var(--ocm-ink);
        font-family: Vazirmatn, 'Vazirmatn FD', Tahoma, 'Segoe UI', sans-serif;
        line-height: 1.9;
        -webkit-font-smoothing: antialiased;
        -webkit-text-size-adjust: 100%;
        transition: background-color 0.25s ease, color 0.25s ease;
}

#oc-menu-root { min-height: 100vh; }

button { font-family: inherit; }

:focus-visible { outline: 2.5px solid var(--ocm-accent); outline-offset: 2px; border-radius: 6px; }

::selection { background: var(--ocm-accent); color: #fff; }

/* اسکرول‌بار باریک مرتب */
.ocm-cats::-webkit-scrollbar, .ocm-sheet__scroll::-webkit-scrollbar,
.ocm-drawer__scroll::-webkit-scrollbar { width: 5px; height: 0; }
.ocm-cats::-webkit-scrollbar-thumb, .ocm-sheet__scroll::-webkit-scrollbar-thumb,
.ocm-drawer__scroll::-webkit-scrollbar-thumb { background: var(--ocm-line); border-radius: 99px; }

/* ═══════════ Hero — معرفی کافه ═══════════ */

.ocm-hero {
        position: relative;
        min-height: clamp(296px, 44vh, 420px);
        display: flex;
        align-items: flex-end;
        overflow: hidden;
        isolation: isolate;
        background:
                radial-gradient(120% 90% at 85% -10%, rgba(226, 184, 120, 0.16), transparent 52%),
                radial-gradient(100% 80% at 10% 110%, rgba(197, 139, 82, 0.22), transparent 55%),
                linear-gradient(165deg, #39251F 0%, #291A16 58%, #1F130E 100%);
}

.ocm-hero__bg {
        position: absolute;
        inset: 0;
        z-index: -2;
        background-size: cover;
        background-position: center;
        opacity: 0;
        transform: scale(1.05);
        transition: opacity 0.8s ease, transform 1.2s ease;
}
.ocm-hero__bg.is-loaded { opacity: 1; transform: scale(1); }

.ocm-hero__veil {
        position: absolute;
        inset: 0;
        z-index: -1;
        background:
                linear-gradient(to top, rgba(24, 14, 9, 0.88) 0%, rgba(24, 14, 9, 0.42) 44%, rgba(24, 14, 9, 0.18) 100%);
}

.ocm-hero__glow {
        position: absolute;
        inset: 0;
        z-index: -1;
        background: radial-gradient(46% 34% at 50% 108%, rgba(226, 184, 120, 0.28), transparent 70%);
        pointer-events: none;
}

.ocm-hero__inner {
        position: relative;
        width: 100%;
        max-width: 1210px;
        margin: 0 auto;
        padding: 26px 20px calc(24px + env(safe-area-inset-bottom));
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 7px;
        animation: ocm-hero-in 0.7s cubic-bezier(0.2, 0.75, 0.3, 1) both;
}

@keyframes ocm-hero-in {
        from { opacity: 0; transform: translateY(18px); }
        to { opacity: 1; transform: none; }
}

.ocm-hero__logo {
        width: 62px;
        height: 62px;
        border-radius: 20px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        color: #FFFCF7;
        background: rgba(255, 252, 247, 0.13);
        border: 1.5px solid rgba(255, 252, 247, 0.35);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
        margin-bottom: 5px;
}

.ocm-hero__logo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ocm-hero__name {
        margin: 0;
        font-size: clamp(25px, 6.4vw, 38px);
        font-weight: 700;
        letter-spacing: -0.2px;
        color: #FFFCF7;
        line-height: 1.5;
        text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

.ocm-hero__en {
        font-size: 12px;
        letter-spacing: 2.6px;
        text-transform: uppercase;
        color: rgba(226, 184, 120, 0.92);
        margin-top: -4px;
}

.ocm-hero__greet {
        margin: 6px 0 0;
        font-size: 13px;
        color: rgba(255, 252, 247, 0.88);
        max-width: 520px;
        line-height: 1.9;
        text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

.ocm-hero__chips {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        margin-top: 9px;
}

.ocm-hchip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 11.5px;
        font-weight: 600;
        color: rgba(255, 252, 247, 0.95);
        background: rgba(255, 252, 247, 0.13);
        border: 1px solid rgba(255, 252, 247, 0.24);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        border-radius: 99px;
        padding: 5px 12px;
        line-height: 1.7;
        white-space: nowrap;
}

.ocm-hchip .dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #4ADE80;
        box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.25);
        animation: ocm-breath 2.4s ease-in-out infinite;
        flex: none;
}

.ocm-hchip.is-closed .dot { background: #FBBF24; box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.22); }

@keyframes ocm-breath { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

.ocm-hchip--table { background: rgba(197, 139, 82, 0.32); border-color: rgba(226, 184, 120, 0.5); font-weight: 700; }
.ocm-hchip--off { background: rgba(251, 191, 36, 0.16); border-color: rgba(251, 191, 36, 0.4); color: #FDE9C0; }

.ocm-hero__meta {
        display: flex;
        flex-wrap: wrap;
        gap: 5px 16px;
        margin-top: 7px;
        font-size: 11.5px;
        color: rgba(255, 252, 247, 0.78);
}

.ocm-hero__meta span { display: inline-flex; align-items: center; gap: 5px; }

.ocm-hero__cta {
        margin-top: 15px;
        display: inline-flex;
        align-items: center;
        gap: 9px;
        border: none;
        cursor: pointer;
        border-radius: 99px;
        padding: 11px 24px;
        font-size: 13.5px;
        font-weight: 700;
        color: #2B1A10;
        background: linear-gradient(135deg, var(--ocm-gold), var(--ocm-caramel));
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35);
        transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.ocm-hero__cta:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45); }
.ocm-hero__cta:active { transform: translateY(0) scale(0.97); }

.ocm-hero__cta .ar { transition: transform 0.2s ease; }
.ocm-hero__cta:hover .ar { transform: translateY(2px); }

/* ═══════════ نوار ابزار چسبان ═══════════ */

.ocm-top {
        position: sticky;
        top: 0;
        z-index: 50;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 8px 16px;
        min-height: var(--ocm-top-h);
        background: var(--ocm-glass);
        -webkit-backdrop-filter: blur(16px) saturate(1.3);
        backdrop-filter: blur(16px) saturate(1.3);
        border-bottom: 1px solid var(--ocm-line);
        padding-top: max(8px, env(safe-area-inset-top));
}

.ocm-brand { display: flex; align-items: center; gap: 9px; min-width: 0; }

.ocm-logo {
        width: 38px;
        height: 38px;
        border-radius: 12px;
        overflow: hidden;
        background: linear-gradient(145deg, var(--ocm-accent), var(--ocm-accent-deep));
        color: var(--ocm-on-accent);
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(64, 40, 18, 0.3);
        flex: 0 0 auto;
}

.ocm-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ocm-brand-txt { display: flex; flex-direction: column; line-height: 1.45; min-width: 0; }

.ocm-name {
        font-weight: 700;
        font-size: 14.5px;
        color: var(--ocm-ink);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 38vw;
}

.ocm-name-en { font-size: 9.5px; color: var(--ocm-muted); letter-spacing: 0.5px; }

.ocm-side { display: flex; align-items: center; gap: 8px; }

.ocm-table-chip {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        background: linear-gradient(135deg, var(--ocm-accent), var(--ocm-accent-deep));
        color: var(--ocm-on-accent);
        font-size: 11px;
        font-weight: 700;
        border-radius: 99px;
        padding: 4px 12px;
        white-space: nowrap;
        box-shadow: 0 3px 10px rgba(64, 40, 18, 0.25);
}

.ocm-table-chip svg, .ocm-hchip svg, .ocm-track-open svg { flex: none; }
.ocm-count-chip { display: inline-flex; align-items: center; }

/* سفارش آنلاین غیرفعال — حتی اگر سوییچ دیر برسد، افزودن به سبد قفل می‌شود */
body.ocm-ordering-off .ocm-add { display: none !important; }
body.ocm-ordering-off .ocm-cartbar { display: none !important; }
body.ocm-ordering-off .ocm-hasopts { display: none; }

/* دکمهٔ سبد در نوار بالا */
.ocm-cart-btn {
        position: relative;
        width: 40px;
        height: 40px;
        border: 1.5px solid var(--ocm-line);
        border-radius: 13px;
        background: var(--ocm-card);
        color: var(--ocm-ink);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: var(--ocm-shadow-1);
        transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.ocm-cart-btn:hover { border-color: var(--ocm-accent); transform: translateY(-1px); box-shadow: var(--ocm-shadow-2); }
.ocm-cart-btn:active { transform: scale(0.93); }

.ocm-cart-badge {
        position: absolute;
        top: -6px;
        inset-inline-end: -6px;
        min-width: 19px;
        height: 19px;
        border-radius: 99px;
        background: linear-gradient(135deg, var(--ocm-accent), var(--ocm-accent-deep));
        color: var(--ocm-on-accent);
        font-size: 10.5px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 5px;
        box-shadow: 0 3px 8px rgba(64, 40, 18, 0.35);
        border: 1.5px solid var(--ocm-bg);
}

.ocm-cart-badge.is-pop { animation: ocm-pop-badge 0.35s cubic-bezier(0.2, 1.6, 0.4, 1); }

@keyframes ocm-pop-badge {
        0% { transform: scale(0.5); }
        60% { transform: scale(1.28); }
        100% { transform: scale(1); }
}

/* دکمهٔ پیگیری */
.ocm-track-open {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 11.5px;
        font-weight: 700;
        color: var(--ocm-ink);
        background: var(--ocm-card);
        border: 1.5px solid var(--ocm-line);
        border-radius: 99px;
        padding: 8px 14px;
        cursor: pointer;
        white-space: nowrap;
        box-shadow: var(--ocm-shadow-1);
        transition: transform 0.15s ease, border-color 0.15s ease;
}

.ocm-track-open:active { transform: scale(0.95); }
.ocm-track-open.has-order { border-color: var(--ocm-accent); color: var(--ocm-accent-deep); }

@media (max-width: 480px) {
        .ocm-track-open span { display: none; }
        .ocm-track-open { padding: 8px 11px; font-size: 14px; }
}

/* ═══════════ جستجو ═══════════ */

.ocm-toolrow {
        position: sticky;
        top: var(--ocm-top-h);
        z-index: 49;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 16px;
        min-height: var(--ocm-tool-h);
        background: var(--ocm-glass);
        -webkit-backdrop-filter: blur(14px) saturate(1.2);
        backdrop-filter: blur(14px) saturate(1.2);
        border-bottom: 1px solid var(--ocm-line);
}

.ocm-search {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 1;
        background: var(--ocm-card);
        border: 1.5px solid var(--ocm-line);
        border-radius: 99px;
        padding: 9px 15px;
        color: var(--ocm-muted);
        box-shadow: var(--ocm-shadow-1);
        transition: border-color 0.2s, box-shadow 0.2s;
}

.ocm-search:focus-within {
        border-color: var(--ocm-accent);
        box-shadow: 0 0 0 4px var(--ocm-ring);
}

.ocm-search svg { flex: 0 0 auto; }

.ocm-search input {
        border: 0;
        outline: 0;
        background: transparent;
        font: inherit;
        font-size: 13px;
        color: var(--ocm-ink);
        width: 100%;
}

.ocm-search input::placeholder { color: var(--ocm-muted); opacity: 0.75; }
.ocm-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

.ocm-count-chip {
        font-size: 11px;
        font-weight: 700;
        color: var(--ocm-accent-deep);
        background: var(--ocm-card);
        border: 1.5px solid var(--ocm-line);
        border-radius: 99px;
        padding: 6px 12px;
        white-space: nowrap;
        box-shadow: var(--ocm-shadow-1);
}

@media (max-width: 560px) { .ocm-count-chip { display: none; } }

/* ═══════════ دسته‌بندی‌ها ═══════════ */

.ocm-cats {
        position: sticky;
        top: calc(var(--ocm-top-h) + var(--ocm-tool-h));
        z-index: 48;
        display: flex;
        gap: 8px;
        padding: 9px 16px 11px;
        overflow-x: auto;
        background: linear-gradient(to bottom, var(--ocm-glass) 78%, transparent);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        scrollbar-width: none;
}

.ocm-cats::-webkit-scrollbar { display: none; }

.ocm-chip {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        flex: 0 0 auto;
        font: inherit;
        font-size: 12.5px;
        font-weight: 600;
        color: var(--ocm-ink);
        background: var(--ocm-card);
        border: 1.5px solid var(--ocm-line);
        border-radius: 99px;
        padding: 6px 14px 6px 8px;
        min-height: 40px;
        cursor: pointer;
        box-shadow: var(--ocm-shadow-1);
        transition: transform 0.16s, background 0.16s, color 0.16s, border-color 0.16s, box-shadow 0.16s;
        scroll-margin-top: calc(var(--ocm-top-h) + var(--ocm-tool-h) + 62px);
}

.ocm-chip:hover { transform: translateY(-1.5px); border-color: var(--ocm-accent); }

.ocm-chip.is-active {
        background: linear-gradient(140deg, var(--ocm-accent), var(--ocm-accent-deep));
        color: var(--ocm-on-accent);
        border-color: transparent;
        box-shadow: 0 6px 18px rgba(64, 40, 18, 0.35);
}

.ocm-chip-img {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        object-fit: cover;
        flex: none;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.ocm-chip-ico {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        background: var(--ocm-bg-2);
        flex: none;
}

.ocm-chip.is-active .ocm-chip-ico { background: rgba(255, 255, 255, 0.2); }

.ocm-chip .ocm-chip-cnt {
        font-size: 10px;
        font-weight: 700;
        color: var(--ocm-muted);
        background: var(--ocm-bg-2);
        border-radius: 99px;
        padding: 0 8px;
        line-height: 1.9;
}

.ocm-chip.is-active .ocm-chip-cnt { color: var(--ocm-on-accent); background: rgba(255, 255, 255, 0.22); }

.ocm-chip--sub { font-size: 11.5px; font-weight: 500; padding-inline-start: 6px; }
.ocm-chip--sub .ocm-chip-ico { width: 22px; height: 22px; font-size: 11px; }
.ocm-chip--sub.is-active { background: linear-gradient(140deg, var(--ocm-accent-deep), color-mix(in srgb, var(--ocm-accent-deep) 70%, #1c0f08)); }

/* بلاک برند و تبلیغ سایدبار (فقط دسکتاپ) */
.ocm-side-brand, .ocm-side-promo { display: none; }

/* ═══════════ بخش‌ها و بنرها ═══════════ */

.ocm-main {
        max-width: 1210px;
        margin: 0 auto;
        padding: 10px 16px 64px;
        scroll-behavior: smooth;
}

.ocm-sec { margin: 30px 0 0; scroll-margin-top: calc(var(--ocm-top-h) + var(--ocm-tool-h) + var(--ocm-cats-h) + 10px); }

.ocm-sec-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
        padding: 0 2px 4px;
}

.ocm-sec-head h2 {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
        color: var(--ocm-ink);
        display: flex;
        align-items: center;
        gap: 9px;
}

.ocm-sec-head h2::before {
        content: '';
        width: 4.5px;
        height: 22px;
        border-radius: 99px;
        background: linear-gradient(to bottom, var(--ocm-accent), var(--ocm-accent-deep));
        box-shadow: 0 2px 6px rgba(64, 40, 18, 0.25);
}

.ocm-sec-count {
        font-size: 11px;
        color: var(--ocm-muted);
        background: var(--ocm-card);
        border: 1px solid var(--ocm-line);
        border-radius: 99px;
        padding: 2px 11px;
        white-space: nowrap;
}

.ocm-sec-banner {
        position: relative;
        height: 110px;
        border-radius: 18px;
        overflow: hidden;
        margin: 10px 0 6px;
        box-shadow: var(--ocm-shadow-1);
}

.ocm-sec-banner img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
}

.ocm-sec-banner-grad {
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(41, 26, 22, 0.35), transparent 62%);
}

/* ═══════════ شبکهٔ کارت‌ها ═══════════ */

.ocm-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 11px;
}

@media (min-width: 640px) {
        .ocm-grid { grid-template-columns: repeat(3, 1fr); gap: 15px; }
        .ocm-sec-head h2 { font-size: 22px; }
}

.ocm-card {
        background: var(--ocm-card);
        border: 1px solid var(--ocm-line);
        border-radius: var(--ocm-radius);
        overflow: hidden;
        cursor: pointer;
        box-shadow: var(--ocm-shadow-1);
        transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.22s ease, border-color 0.22s;
        display: flex;
        flex-direction: column;
        -webkit-tap-highlight-color: transparent;
        animation: ocm-card-in 0.5s cubic-bezier(0.2, 0.75, 0.3, 1) both;
        animation-delay: var(--d, 0ms);
}

@keyframes ocm-card-in {
        from { opacity: 0; transform: translateY(14px) scale(0.985); }
        to { opacity: 1; transform: none; }
}

.ocm-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--ocm-shadow-3);
        border-color: color-mix(in srgb, var(--ocm-accent) 38%, var(--ocm-line));
}

@supports not (color: color-mix(in srgb, red 50%, black)) {
        .ocm-card:hover { border-color: #e3c9a4; }
}

.ocm-card:active { transform: translateY(-1px) scale(0.99); }

.ocm-card__media {
        position: relative;
        aspect-ratio: 4 / 3;
        background:
                radial-gradient(90% 90% at 30% 20%, rgba(197, 139, 82, 0.12), transparent 62%),
                linear-gradient(160deg, var(--ocm-bg-2) 30%, var(--ocm-bg));
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
}

.ocm-card__media::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(41, 26, 22, 0.16), transparent 42%);
        pointer-events: none;
}

.ocm-card__emoji {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 42px;
        color: var(--ocm-muted);
        opacity: 0.85;
}

.ocm-card__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        opacity: 0;
        transform: scale(1.05);
        transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.ocm-card__media img.is-loaded { opacity: 1; transform: scale(1); }

.ocm-card__media.is-broken img { display: none; }

.ocm-card:hover .ocm-card__media img.is-loaded { transform: scale(1.07); }

.ocm-badge {
        position: absolute;
        top: 9px;
        inset-inline-start: 9px;
        z-index: 3;
        background: linear-gradient(135deg, var(--ocm-gold), var(--ocm-caramel));
        color: #2B1A10;
        font-size: 10px;
        font-weight: 700;
        border-radius: 99px;
        padding: 3px 10px;
        box-shadow: 0 4px 10px rgba(64, 40, 18, 0.35);
        max-width: calc(100% - 60px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
}

.ocm-disc-badge {
        position: absolute;
        top: 9px;
        inset-inline-end: 9px;
        z-index: 3;
        background: linear-gradient(135deg, #F43F5E, #BE123C);
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        border-radius: 99px;
        padding: 3px 9px;
        box-shadow: 0 4px 10px rgba(190, 18, 60, 0.4);
}

.ocm-out-tag {
        position: absolute;
        inset-inline-end: 9px;
        bottom: 9px;
        z-index: 3;
        background: rgba(24, 14, 9, 0.72);
        color: #FECACA;
        font-size: 10.5px;
        font-weight: 600;
        border-radius: 99px;
        padding: 3px 11px;
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
}

.ocm-card__body {
        padding: 11px 13px 13px;
        display: flex;
        flex-direction: column;
        gap: 2px;
        flex: 1;
        position: relative;
}

.ocm-card__name {
        margin: 0;
        font-size: 14px;
        font-weight: 700;
        color: var(--ocm-ink);
        line-height: 1.6;
}

.ocm-card__en { font-size: 10px; color: var(--ocm-muted); letter-spacing: 0.3px; }

.ocm-card__desc {
        margin: 3px 0 0;
        font-size: 11.5px;
        color: var(--ocm-muted);
        line-height: 1.85;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
}

.ocm-card__foot {
        margin-top: auto;
        padding-top: 9px;
        display: flex;
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 1px;
}

.ocm-price-old {
        font-size: 10.5px;
        color: var(--ocm-muted);
        text-decoration: line-through;
        order: 2;
}

.ocm-price {
        font-size: 15.5px;
        font-weight: 700;
        color: var(--ocm-accent-deep);
        display: inline-flex;
        align-items: baseline;
        gap: 4px;
        font-variant-numeric: tabular-nums;
}

.ocm-price small { font-size: 10px; font-weight: 500; color: var(--ocm-muted); }

.ocm-hasopts {
        position: absolute;
        top: 11px;
        inset-inline-end: 12px;
        font-size: 9.5px;
        font-weight: 700;
        color: var(--ocm-accent-deep);
        background: color-mix(in srgb, var(--ocm-accent) 12%, transparent);
        border: 1px solid color-mix(in srgb, var(--ocm-accent) 32%, transparent);
        border-radius: 99px;
        padding: 1px 8px;
}

@supports not (color: color-mix(in srgb, red 50%, black)) {
        .ocm-hasopts { background: rgba(197, 139, 82, 0.12); border-color: rgba(197, 139, 82, 0.32); }
}

/* دکمهٔ افزودن سریع */
.ocm-add {
        position: absolute;
        bottom: 10px;
        inset-inline-end: 10px;
        z-index: 4;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        border: none;
        cursor: pointer;
        background: linear-gradient(140deg, var(--ocm-accent), var(--ocm-accent-deep));
        color: var(--ocm-on-accent);
        font-size: 22px;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 8px 18px rgba(64, 40, 18, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.28);
        transition: transform 0.16s ease, filter 0.16s ease;
}

.ocm-add:hover { transform: scale(1.1); filter: brightness(1.06); }
.ocm-add:active { transform: scale(0.88); }
.ocm-card--out .ocm-add { display: none; }

/* قلب علاقه‌مندی */
.ocm-fav {
        position: absolute;
        top: 9px;
        inset-inline-start: 9px;
        z-index: 4;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: none;
        cursor: pointer;
        background: rgba(255, 252, 247, 0.9);
        color: #B9AFA3;
        font-size: 15px;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        transition: transform 0.15s ease, color 0.15s ease;
}

.ocm-fav:active { transform: scale(0.84); }
.ocm-fav.is-on { color: #E11D48; background: #FFF1F2; }

.ocm-card--out .ocm-card__media img,
.ocm-card--out .ocm-card__emoji { filter: grayscale(0.9); opacity: 0.5; }
.ocm-card--out .ocm-card__name { color: var(--ocm-muted); }

/* دکمهٔ نمایش بیشتر */
.ocm-more {
        display: block;
        width: 100%;
        margin-top: 13px;
        font-size: 12.5px;
        font-weight: 700;
        cursor: pointer;
        background: var(--ocm-card);
        color: var(--ocm-accent-deep);
        border: 1.5px dashed var(--ocm-accent);
        border-radius: 15px;
        padding: 11px;
        transition: background 0.15s ease, transform 0.15s ease;
}

.ocm-more:hover { background: color-mix(in srgb, var(--ocm-accent) 7%, var(--ocm-card)); }
.ocm-more:active { transform: scale(0.99); }

/* ═══════════ اسکلت بارگذاری ═══════════ */

.ocm-status { padding-top: 8px; }

.ocm-skl-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 11px;
}

@media (min-width: 640px) { .ocm-skl-grid { grid-template-columns: repeat(3, 1fr); gap: 15px; } }

.ocm-skeleton {
        height: 218px;
        border-radius: var(--ocm-radius);
        background:
                linear-gradient(100deg, color-mix(in srgb, var(--ocm-bg-2) 88%, transparent) 40%, color-mix(in srgb, var(--ocm-card) 92%, transparent) 50%, color-mix(in srgb, var(--ocm-bg-2) 88%, transparent) 60%);
        background-size: 200% 100%;
        animation: ocm-shimmer 1.3s infinite linear;
        border: 1px solid var(--ocm-line);
}

@supports not (color: color-mix(in srgb, red 50%, black)) {
        .ocm-skeleton { background: linear-gradient(100deg, #f1e9dc 40%, #faf4ea 50%, #f1e9dc 60%); background-size: 200% 100%; }
}

@keyframes ocm-shimmer { to { background-position: -200% 0; } }

/* ═══════════ خطا و خالی ═══════════ */

.ocm-error { text-align: center; padding: 56px 20px; color: var(--ocm-muted); }

.ocm-error-icon { font-size: 44px; margin-bottom: 8px; }

.ocm-empty-search {
        text-align: center;
        color: var(--ocm-muted);
        font-size: 13px;
        padding: 30px 0 10px;
}

/* بنر «فعلاً بسته‌ایم» / پیام وضعیت — زیر نوار جستجو */
.ocm-closed {
        margin: 12px 2px 0;
        padding: 11px 15px;
        border-radius: 16px;
        background: linear-gradient(135deg, #2E2018, #39251F);
        color: #F7F0E5;
        font-size: 12.5px;
        line-height: 1.9;
        text-align: center;
        box-shadow: var(--ocm-shadow-2);
        border: 1px solid rgba(226, 184, 120, 0.22);
}

.ocm-closed b { color: #E2B878; }

/* ═══════════ لایت‌باکس ═══════════ */

/* لایت‌باکس همیشه بالاتر از شیت/کشو است (از شیت محصول باز می‌شود) */
.ocm-lightbox { position: fixed; inset: 0; z-index: 110; display: flex; align-items: center; justify-content: center; padding: 20px; }

.ocm-lightbox__backdrop {
        position: absolute;
        inset: 0;
        background: rgba(20, 12, 7, 0.74);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
}

.ocm-lightbox__body {
        position: relative;
        margin: 0;
        background: var(--ocm-card);
        border-radius: 24px;
        overflow: hidden;
        max-width: 390px;
        width: 100%;
        box-shadow: 0 28px 70px rgba(15, 8, 4, 0.5);
        animation: ocm-zoom-in 0.24s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

@keyframes ocm-zoom-in { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.ocm-lightbox__body img {
        width: 100%;
        max-height: 300px;
        object-fit: cover;
        display: block;
}

.ocm-lightbox__close {
        position: absolute;
        top: 10px;
        inset-inline-start: 10px;
        z-index: 2;
        width: 34px;
        height: 34px;
        border: 0;
        border-radius: 50%;
        background: rgba(255, 252, 247, 0.92);
        color: #291A16;
        font-size: 14px;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.ocm-lightbox__cap { padding: 15px 18px 18px; display: flex; flex-direction: column; gap: 4px; }

.ocm-lightbox__cap b { font-size: 16px; color: var(--ocm-ink); }

.ocm-lightbox__cap span { font-size: 12.5px; color: var(--ocm-muted); line-height: 1.9; }

.ocm-lightbox__price { padding-top: 6px; }

/* ═══════════ لایه‌های رویه‌ای: شیت و کشو ═══════════ */

.ocm-sheet, .ocm-drawer {
        position: fixed;
        inset: 0;
        z-index: 100;
        display: flex;
        align-items: flex-end;
        justify-content: center;
}

.ocm-sheet__backdrop, .ocm-drawer__backdrop {
        position: absolute;
        inset: 0;
        background: rgba(24, 14, 9, 0.58);
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
        animation: ocm-fade-in 0.25s ease;
}

@keyframes ocm-fade-in { from { opacity: 0; } to { opacity: 1; } }

.ocm-sheet__body, .ocm-drawer__body {
        position: relative;
        width: 100%;
        max-width: 560px;
        max-height: 92vh;
        max-height: 92dvh;
        background: var(--ocm-card);
        border-radius: 26px 26px 0 0;
        box-shadow: var(--ocm-shadow-3);
        display: flex;
        flex-direction: column;
        animation: ocm-slide-up 0.34s cubic-bezier(0.2, 0.85, 0.3, 1);
        overflow: hidden;
        border: 1px solid var(--ocm-line);
        border-bottom: none;
}

@keyframes ocm-slide-up { from { transform: translateY(56px); opacity: 0.3; } to { transform: none; opacity: 1; } }

.ocm-sheet__grab, .ocm-drawer__grab {
        display: block;
        width: 44px;
        height: 4.5px;
        border-radius: 99px;
        background: var(--ocm-line);
        margin: 9px auto 2px;
        flex: none;
}

.ocm-sheet__close, .ocm-drawer__close {
        position: absolute;
        top: 14px;
        inset-inline-start: 13px;
        z-index: 5;
        width: 34px;
        height: 34px;
        border: none;
        border-radius: 50%;
        background: var(--ocm-bg-2);
        color: var(--ocm-ink);
        font-size: 14px;
        cursor: pointer;
        box-shadow: var(--ocm-shadow-1);
        transition: transform 0.15s ease;
}

.ocm-sheet__close:active, .ocm-drawer__close:active { transform: scale(0.88); }

.ocm-sheet__scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ═══════════ شیت جزئیات محصول ═══════════ */

.ocm-sh-media {
        position: relative;
        aspect-ratio: 16 / 10;
        background:
                radial-gradient(90% 90% at 30% 20%, rgba(197, 139, 82, 0.12), transparent 62%),
                linear-gradient(160deg, var(--ocm-bg-2) 30%, var(--ocm-bg));
        cursor: zoom-in;
}

.ocm-sh-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ocm-sh-media::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(41, 26, 22, 0.22), transparent 40%);
        pointer-events: none;
}

.ocm-sh-emoji {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 58px;
        color: var(--ocm-muted);
}

.ocm-sh-body { padding: 16px 20px 6px; }

.ocm-sh-name { margin: 0; font-size: 18.5px; font-weight: 700; color: var(--ocm-ink); }

.ocm-sh-en { font-size: 11.5px; color: var(--ocm-muted); direction: ltr; display: block; letter-spacing: 0.4px; }

.ocm-sh-desc { margin: 7px 0 0; font-size: 12.5px; color: var(--ocm-muted); line-height: 1.95; }

.ocm-sh-meta { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

.ocm-sh-eta {
        font-size: 11px;
        background: color-mix(in srgb, #047857 10%, var(--ocm-card));
        color: #047857;
        border: 1px solid color-mix(in srgb, #047857 26%, transparent);
        border-radius: 99px;
        padding: 2px 11px;
        font-weight: 700;
}

@supports not (color: color-mix(in srgb, red 50%, black)) {
        .ocm-sh-eta { background: #ecfdf5; border-color: #a7f3d0; }
}

.ocm-sh-price { margin-inline-start: auto; font-size: 16px; font-weight: 700; color: var(--ocm-accent-deep); }

.ocm-sh-price del { font-weight: 500; font-size: 11.5px; color: var(--ocm-muted); margin-inline-end: 7px; }

.ocm-sh-arrow { color: var(--ocm-muted); font-size: 11px; }

/* گروه‌های افزودنی */
.ocm-opts { padding: 6px 20px 8px; }

.ocm-opt-g { margin-top: 14px; }

.ocm-opt-g h4 {
        margin: 0 0 8px;
        font-size: 13px;
        font-weight: 700;
        color: var(--ocm-ink);
        display: flex;
        align-items: center;
        gap: 7px;
        flex-wrap: wrap;
}

.ocm-opt-kind {
        font-size: 9.5px;
        font-weight: 700;
        color: var(--ocm-muted);
        background: var(--ocm-bg-2);
        border: 1px solid var(--ocm-line);
        border-radius: 99px;
        padding: 1px 9px;
}

.ocm-soft-req { color: var(--ocm-accent-deep); }

.ocm-soft-hint {
        margin: 0 0 9px;
        font-size: 11px;
        color: var(--ocm-accent-deep);
        background: color-mix(in srgb, var(--ocm-accent) 9%, transparent);
        border: 1px dashed color-mix(in srgb, var(--ocm-accent) 40%, transparent);
        border-radius: 12px;
        padding: 7px 11px;
        line-height: 1.85;
}

@supports not (color: color-mix(in srgb, red 50%, black)) {
        .ocm-soft-hint { background: rgba(197, 139, 82, 0.09); border-color: rgba(197, 139, 82, 0.4); }
}

.ocm-opt-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.ocm-opt-chip {
        border: 1.5px solid var(--ocm-line);
        background: var(--ocm-card);
        border-radius: 13px;
        padding: 7px 13px;
        font: inherit;
        font-size: 12px;
        font-weight: 500;
        color: var(--ocm-ink);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        transition: all 0.16s ease;
        min-height: 38px;
}

.ocm-opt-chip .p { font-size: 10.5px; color: var(--ocm-muted); }

.ocm-opt-chip:hover { border-color: var(--ocm-accent); transform: translateY(-1px); }

.ocm-opt-chip.is-on {
        border-color: var(--ocm-accent);
        background: color-mix(in srgb, var(--ocm-accent) 13%, var(--ocm-card));
        color: var(--ocm-accent-deep);
        font-weight: 700;
        box-shadow: 0 3px 10px rgba(64, 40, 18, 0.14);
}

@supports not (color: color-mix(in srgb, red 50%, black)) {
        .ocm-opt-chip.is-on { background: #faf0e2; }
}

.ocm-opt-chip.is-on .p { color: var(--ocm-accent-deep); font-weight: 700; }

.ocm-opt-chips.is-missing { animation: ocm-shake 0.5s ease; border: 1.5px dashed #E11D48; border-radius: 13px; padding: 6px; }

@keyframes ocm-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

.ocm-sh-req { color: #E11D48; font-size: 12px; font-weight: 700; text-align: center; padding: 6px 0 2px; }

/* یادداشت آیتم */
.ocm-sh-note { padding: 8px 20px 4px; }

.ocm-sh-note textarea {
        width: 100%;
        box-sizing: border-box;
        border: 1.5px solid var(--ocm-line);
        border-radius: 14px;
        padding: 9px 13px;
        font: inherit;
        font-size: 12.5px;
        resize: none;
        background: var(--ocm-bg);
        color: var(--ocm-ink);
}

.ocm-sh-note textarea:focus { outline: none; border-color: var(--ocm-accent); box-shadow: 0 0 0 4px var(--ocm-ring); }

/* فوتر شیت: تعداد + جمع + دکمه‌ها */
.ocm-sh-foot {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 20px calc(14px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--ocm-line);
        background: var(--ocm-card);
}

.ocm-stepper {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        border: 1.5px solid var(--ocm-line);
        border-radius: 14px;
        overflow: hidden;
        background: var(--ocm-card);
        flex: none;
}

.ocm-stepper button {
        width: 38px;
        height: 42px;
        border: none;
        background: transparent;
        font-size: 19px;
        font-weight: 700;
        color: var(--ocm-accent-deep);
        cursor: pointer;
        transition: background 0.15s ease;
}

.ocm-stepper button:hover:not(:disabled) { background: var(--ocm-bg-2); }
.ocm-stepper button:disabled { color: var(--ocm-line); cursor: default; }
.ocm-stepper .q { min-width: 26px; text-align: center; font-weight: 700; font-size: 14px; color: var(--ocm-ink); }

.ocm-sh-foot-btns { display: flex; flex-direction: column; gap: 7px; flex: 1; }

.ocm-sh-add {
        flex: 1;
        border: none;
        border-radius: 15px;
        padding: 12px;
        font-size: 13.5px;
        font-weight: 700;
        color: var(--ocm-on-accent);
        background: linear-gradient(135deg, var(--ocm-accent), var(--ocm-accent-deep));
        cursor: pointer;
        box-shadow: 0 8px 20px rgba(64, 40, 18, 0.3);
        transition: transform 0.15s ease, filter 0.15s ease;
}

.ocm-sh-add:hover { filter: brightness(1.05); }
.ocm-sh-add:active { transform: scale(0.98); }
.ocm-sh-add:disabled { opacity: 0.55; cursor: default; }

.ocm-sh-more {
        font-weight: 700;
        font-size: 12px;
        cursor: pointer;
        background: none;
        border: 1.5px solid var(--ocm-accent);
        color: var(--ocm-accent-deep);
        border-radius: 13px;
        padding: 8px 12px;
        transition: background 0.15s ease;
}

.ocm-sh-more:hover { background: color-mix(in srgb, var(--ocm-accent) 8%, transparent); }
.ocm-sh-more:active { transform: scale(0.98); }

@supports not (color: color-mix(in srgb, red 50%, black)) {
        .ocm-sh-more:hover { background: rgba(197, 139, 82, 0.08); }
}

/* ═══════════ کشوی سبد / تسویه ═══════════ */

.ocm-drawer__head { padding: 13px 20px 9px; border-bottom: 1px solid var(--ocm-line); flex: none; }

.ocm-drawer__head h3 { margin: 0; font-size: 15.5px; font-weight: 700; color: var(--ocm-ink); display: flex; align-items: center; gap: 8px; }

.ocm-drawer__body .ocm-drawer__scroll { overflow-y: auto; padding: 10px 20px; flex: 1; -webkit-overflow-scrolling: touch; }

.ocm-line {
        display: flex;
        gap: 11px;
        padding: 11px 0;
        border-bottom: 1px dashed var(--ocm-line);
        animation: ocm-line-in 0.3s ease both;
}

@keyframes ocm-line-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.ocm-line__thumb {
        width: 56px;
        height: 56px;
        border-radius: 15px;
        object-fit: cover;
        flex: none;
        background: var(--ocm-bg-2);
        box-shadow: var(--ocm-shadow-1);
}

.ocm-line__thumb-ph {
        width: 56px;
        height: 56px;
        border-radius: 15px;
        flex: none;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        background: var(--ocm-bg-2);
        color: var(--ocm-muted);
}

.ocm-line__info { flex: 1; min-width: 0; }

.ocm-line__nm { font-size: 13px; font-weight: 700; color: var(--ocm-ink); }

.ocm-line__ops { font-size: 10.5px; color: var(--ocm-muted); line-height: 1.8; }

.ocm-line__nt { font-size: 10.5px; color: var(--ocm-accent-deep); }

.ocm-line__pr { font-size: 12.5px; font-weight: 700; color: var(--ocm-accent-deep); white-space: nowrap; text-align: left; }

.ocm-line__pr small { color: var(--ocm-muted); font-weight: 500; }

.ocm-line__row { display: flex; align-items: center; gap: 7px; margin-top: 6px; }

.ocm-line .ocm-stepper button { width: 30px; height: 30px; font-size: 15px; }
.ocm-line .ocm-stepper { border-radius: 11px; }
.ocm-line .ocm-stepper .q { min-width: 20px; font-size: 12.5px; }

.ocm-line__nt-btn, .ocm-line__rm {
        border: none;
        background: var(--ocm-bg-2);
        color: var(--ocm-muted);
        width: 30px;
        height: 30px;
        border-radius: 10px;
        font-size: 13px;
        cursor: pointer;
        padding: 0;
        line-height: 1;
        transition: background 0.15s ease, color 0.15s ease;
}

.ocm-line__nt-btn:hover { color: var(--ocm-accent-deep); }
.ocm-line__rm:hover { color: #B91C1C; background: #FEE2E2; }

.ocm-line__nt-ed { margin-top: 6px; }

.ocm-line__nt-ed textarea {
        width: 100%;
        box-sizing: border-box;
        border: 1.5px solid var(--ocm-line);
        border-radius: 12px;
        padding: 8px 11px;
        font: inherit;
        font-size: 12px;
        resize: vertical;
        background: var(--ocm-bg);
        color: var(--ocm-ink);
}

.ocm-lnote-save {
        border: none;
        background: var(--ocm-accent);
        color: var(--ocm-on-accent);
        font-size: 11.5px;
        font-weight: 700;
        border-radius: 99px;
        padding: 6px 13px;
        cursor: pointer;
}

.ocm-lnote-cancel {
        border: 1.5px solid var(--ocm-line);
        background: none;
        color: var(--ocm-muted);
        font-size: 11.5px;
        border-radius: 99px;
        padding: 6px 13px;
        cursor: pointer;
}

.ocm-sum { padding: 12px 0 6px; font-size: 12.5px; color: var(--ocm-ink); }

.ocm-sum .row { display: flex; justify-content: space-between; padding: 3px 0; }

.ocm-sum .row.grand {
        font-size: 15px;
        font-weight: 700;
        color: var(--ocm-accent-deep);
        border-top: 1.5px solid var(--ocm-line);
        margin-top: 7px;
        padding-top: 9px;
}

.ocm-sum .hint { font-size: 10.5px; color: var(--ocm-muted); margin-top: 4px; line-height: 1.8; }

/* فیلدهای فرم */
.ocm-fld { margin-top: 12px; }

.ocm-fld label {
        display: block;
        font-size: 11.5px;
        font-weight: 700;
        color: var(--ocm-ink);
        margin-bottom: 5px;
}

.ocm-fld label small { color: var(--ocm-muted); font-weight: 500; }

.ocm-fld input, .ocm-fld select, .ocm-fld textarea {
        width: 100%;
        box-sizing: border-box;
        border: 1.5px solid var(--ocm-line);
        border-radius: 14px;
        padding: 11px 13px;
        font: inherit;
        font-size: 13px;
        background: var(--ocm-bg);
        color: var(--ocm-ink);
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ocm-fld input:focus, .ocm-fld select:focus, .ocm-fld textarea:focus {
        outline: none;
        border-color: var(--ocm-accent);
        box-shadow: 0 0 0 4px var(--ocm-ring);
}

.ocm-fld input[dir="ltr"] { text-align: left; }

.ocm-in-soft { border-color: #F59E0B !important; box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18) !important; }

/* تب نوع سفارش */
.ocm-type-tabs {
        display: flex;
        gap: 8px;
        margin-top: 10px;
        background: var(--ocm-bg-2);
        border-radius: 16px;
        padding: 4px;
}

.ocm-type-tabs button {
        flex: 1;
        border: none;
        background: transparent;
        border-radius: 12px;
        padding: 10px;
        font-size: 12.5px;
        font-weight: 700;
        color: var(--ocm-muted);
        cursor: pointer;
        transition: all 0.18s ease;
}

.ocm-type-tabs button.is-on {
        background: var(--ocm-card);
        color: var(--ocm-accent-deep);
        box-shadow: var(--ocm-shadow-1);
}

/* روش‌های پرداخت */
.ocm-pays { display: grid; gap: 8px; margin-top: 6px; }

.ocm-pay {
        display: flex;
        align-items: center;
        gap: 11px;
        border: 1.5px solid var(--ocm-line);
        border-radius: 16px;
        background: var(--ocm-card);
        padding: 11px 13px;
        font: inherit;
        font-size: 12.5px;
        color: var(--ocm-ink);
        cursor: pointer;
        text-align: right;
        transition: all 0.16s ease;
}

.ocm-pay:hover { border-color: var(--ocm-accent); }

.ocm-pay .ic {
        width: 38px;
        height: 38px;
        border-radius: 12px;
        background: var(--ocm-bg-2);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 17px;
        flex: none;
}

.ocm-pay b { font-size: 12.5px; display: block; }

.ocm-pay small { color: var(--ocm-muted); font-size: 10.5px; display: block; }

.ocm-pay .tick {
        margin-inline-start: auto;
        width: 19px;
        height: 19px;
        border-radius: 50%;
        border: 2px solid var(--ocm-line);
        display: inline-block;
        flex: none;
        transition: all 0.16s ease;
}

.ocm-pay.is-on {
        border-color: var(--ocm-accent);
        background: color-mix(in srgb, var(--ocm-accent) 8%, var(--ocm-card));
}

@supports not (color: color-mix(in srgb, red 50%, black)) {
        .ocm-pay.is-on { background: #fdf6ec; }
}

.ocm-pay.is-on .tick { border-color: var(--ocm-accent); background: radial-gradient(circle, var(--ocm-accent) 44%, transparent 50%); }

.ocm-c2c {
        margin-top: 10px;
        border: 1.5px dashed var(--ocm-accent);
        background: color-mix(in srgb, var(--ocm-accent) 6%, var(--ocm-card));
        border-radius: 16px;
        padding: 13px;
        font-size: 12px;
        color: var(--ocm-ink);
}

@supports not (color: color-mix(in srgb, red 50%, black)) {
        .ocm-c2c { background: #fdf7ee; }
}

.ocm-c2c .num { direction: ltr; text-align: center; font-size: 17px; font-weight: 700; letter-spacing: 1.5px; margin: 4px 0; color: var(--ocm-ink); font-variant-numeric: tabular-nums; }

.ocm-c2c .holder { text-align: center; color: var(--ocm-muted); font-size: 11.5px; }

.ocm-copy {
        display: block;
        margin: 9px auto 0;
        border: none;
        background: var(--ocm-accent);
        color: var(--ocm-on-accent);
        border-radius: 11px;
        padding: 7px 19px;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
        transition: transform 0.15s ease, filter 0.15s ease;
}

.ocm-copy:active { transform: scale(0.96); }

.ocm-err {
        background: #FEE2E2;
        color: #B91C1C;
        border: 1px solid #FECACA;
        border-radius: 14px;
        padding: 9px 13px;
        font-size: 12px;
        margin-top: 10px;
        line-height: 1.9;
        animation: ocm-line-in 0.25s ease;
}

.ocm-drawer__foot {
        padding: 12px 20px calc(14px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--ocm-line);
        background: var(--ocm-card);
        flex: none;
}

.ocm-go {
        width: 100%;
        border: none;
        border-radius: 16px;
        padding: 14px;
        font-size: 14px;
        font-weight: 700;
        color: var(--ocm-on-accent);
        background: linear-gradient(135deg, var(--ocm-accent), var(--ocm-accent-deep));
        cursor: pointer;
        box-shadow: 0 10px 24px rgba(64, 40, 18, 0.32);
        transition: transform 0.15s ease, filter 0.15s ease, opacity 0.15s ease;
}

.ocm-go:hover:not(:disabled) { filter: brightness(1.05); }
.ocm-go:active:not(:disabled) { transform: scale(0.985); }
.ocm-go:disabled { opacity: 0.6; cursor: default; }

.ocm-back {
        width: 100%;
        border: none;
        background: none;
        color: var(--ocm-muted);
        font: inherit;
        font-size: 12px;
        margin-top: 9px;
        cursor: pointer;
}

.ocm-back:hover { color: var(--ocm-ink); }

/* ═══════════ موفقیت ثبت سفارش ═══════════ */

.ocm-done { text-align: center; padding: 30px 20px 34px; }

.ocm-done__badge {
        width: 84px;
        height: 84px;
        margin: 0 auto 6px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 40px;
        color: #fff;
        background: linear-gradient(140deg, #34D399, #059669);
        box-shadow: 0 14px 34px rgba(5, 150, 105, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35);
        animation: ocm-done-pop 0.55s cubic-bezier(0.2, 1.4, 0.35, 1) both;
}

@keyframes ocm-done-pop {
        0% { transform: scale(0.2); opacity: 0; }
        70% { transform: scale(1.12); }
        100% { transform: scale(1); opacity: 1; }
}

.ocm-done h3 { margin: 8px 0 2px; font-size: 17px; color: var(--ocm-ink); }

.ocm-code {
        font-size: 24px;
        font-weight: 700;
        letter-spacing: 2.5px;
        color: var(--ocm-accent-deep);
        direction: ltr;
        display: inline-block;
        background: color-mix(in srgb, var(--ocm-accent) 9%, var(--ocm-card));
        border: 1.5px dashed var(--ocm-accent);
        border-radius: 14px;
        padding: 7px 20px;
        margin: 9px 0;
        font-variant-numeric: tabular-nums;
}

@supports not (color: color-mix(in srgb, red 50%, black)) {
        .ocm-code { background: #fdf6ec; }
}

.ocm-done .sum { color: var(--ocm-muted); font-size: 12.5px; line-height: 2; }

.ocm-done__btns {
        margin-top: 16px;
        display: flex;
        gap: 8px;
        justify-content: center;
        flex-wrap: wrap;
}

.ocm-done__btns .ocm-go { width: auto; padding: 11px 24px; }
.ocm-done__btns .ocm-back { width: auto; margin-top: 0; padding: 11px 18px; border: 1.5px solid var(--ocm-line); border-radius: 14px; }

/* ═══════════ پیگیری سفارش ═══════════ */

.ocm-track-steps { display: flex; flex-direction: column; margin: 16px 4px 8px; text-align: right; }

.ocm-tstep {
        display: flex;
        gap: 12px;
        align-items: flex-start;
        padding: 7px 0;
        color: var(--ocm-muted);
        font-size: 12.5px;
        position: relative;
}

.ocm-tstep::before {
        content: '';
        position: absolute;
        inset-inline-start: 10.5px;
        top: 30px;
        bottom: -8px;
        width: 2px;
        background: var(--ocm-line);
}

.ocm-tstep:last-child::before { display: none; }

.ocm-tstep .dot {
        width: 23px;
        height: 23px;
        border-radius: 50%;
        border: 2px solid var(--ocm-line);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        background: var(--ocm-card);
        flex: none;
        position: relative;
        z-index: 1;
        box-sizing: border-box;
}

.ocm-tstep.is-done { color: var(--ocm-ink); font-weight: 700; }

.ocm-tstep.is-done .dot { border-color: #059669; background: #059669; color: #fff; }

.ocm-tstep.is-now .dot {
        border-color: var(--ocm-accent);
        background: var(--ocm-card);
        color: var(--ocm-accent-deep);
        font-weight: 700;
        animation: ocm-pulse 1.5s infinite;
}

@keyframes ocm-pulse {
        0%, 100% { box-shadow: 0 0 0 0 var(--ocm-ring); }
        50% { box-shadow: 0 0 0 8px rgba(197, 139, 82, 0); }
}

.ocm-eta {
        display: inline-block;
        background: color-mix(in srgb, #047857 10%, var(--ocm-card));
        color: #047857;
        border: 1px solid color-mix(in srgb, #047857 26%, transparent);
        border-radius: 99px;
        padding: 3px 13px;
        font-size: 11.5px;
        font-weight: 700;
}

@supports not (color: color-mix(in srgb, red 50%, black)) {
        .ocm-eta { background: #ecfdf5; border-color: #a7f3d0; }
}

.ocm-track-info { text-align: center; padding: 4px 0 12px; font-size: 12.5px; color: var(--ocm-muted); }
.ocm-track-info b { color: var(--ocm-ink); }

.ocm-reorder {
        display: inline-block;
        margin-top: 12px;
        font-size: 12.5px;
        font-weight: 700;
        cursor: pointer;
        background: linear-gradient(135deg, var(--ocm-accent), var(--ocm-accent-deep));
        color: var(--ocm-on-accent);
        border: 0;
        border-radius: 99px;
        padding: 10px 22px;
        box-shadow: var(--ocm-shadow-2);
        transition: transform 0.15s ease;
}

.ocm-reorder:active { transform: scale(0.96); }

.ocm-man-track p { font-size: 12.5px; color: var(--ocm-muted); margin: 0 0 10px; line-height: 1.9; }

/* ═══════════ نوار سبد شناور (موبایل) ═══════════ */

.ocm-cartbar {
        position: fixed;
        z-index: 90;
        bottom: calc(14px + env(safe-area-inset-bottom));
        inset-inline: 14px;
        max-width: 480px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        border: none;
        border-radius: 19px;
        padding: 13px 18px;
        background: linear-gradient(135deg, var(--ocm-accent), var(--ocm-accent-deep));
        color: var(--ocm-on-accent);
        font: inherit;
        font-weight: 700;
        font-size: 13.5px;
        cursor: pointer;
        box-shadow: 0 16px 38px rgba(64, 40, 18, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
        animation: ocm-bar-up 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

@keyframes ocm-bar-up { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }

.ocm-cartbar__info { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.7; }

.ocm-cartbar__info b { font-size: 15px; }

.ocm-cartbar small { font-weight: 500; font-size: 11px; opacity: 0.92; }

.ocm-cartbar .go {
        font-size: 12.5px;
        display: flex;
        align-items: center;
        gap: 6px;
        background: rgba(255, 255, 255, 0.16);
        border-radius: 12px;
        padding: 7px 13px;
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
}

/* ═══════════ دکمهٔ تم ═══════════ */

.ocm-theme-btn {
        position: fixed;
        bottom: calc(16px + env(safe-area-inset-bottom));
        inset-inline-start: 14px;
        z-index: 60;
        width: 46px;
        height: 46px;
        border-radius: 50%;
        border: 1.5px solid var(--ocm-line);
        background: var(--ocm-glass);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        font-size: 19px;
        cursor: pointer;
        box-shadow: var(--ocm-shadow-2);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.15s ease;
}

.ocm-theme-btn:active { transform: scale(0.9); }

.ocm-theme-pick {
        position: fixed;
        bottom: 74px;
        inset-inline-start: 14px;
        z-index: 61;
        background: var(--ocm-glass);
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
        border: 1.5px solid var(--ocm-line);
        border-radius: 18px;
        box-shadow: var(--ocm-shadow-3);
        padding: 8px;
        min-width: 218px;
}

.ocm-theme-pick[hidden] { display: none; }

.ocm-tp-head {
        font-size: 11.5px;
        font-weight: 700;
        color: var(--ocm-muted);
        padding: 4px 9px 8px;
        border-bottom: 1px dashed var(--ocm-line);
        margin-bottom: 6px;
}

.ocm-theme-pick button {
        display: flex;
        align-items: center;
        gap: 9px;
        width: 100%;
        background: none;
        border: 0;
        border-radius: 12px;
        padding: 9px 10px;
        font-size: 12.5px;
        font-weight: 700;
        color: var(--ocm-ink);
        cursor: pointer;
        text-align: start;
        transition: background 0.15s ease;
}

.ocm-theme-pick button:hover { background: var(--ocm-bg-2); }
.ocm-theme-pick button.is-on { background: var(--ocm-bg-2); outline: 1.5px solid var(--ocm-accent); }

.ocm-theme-pick .sw {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        border: 1.5px solid var(--ocm-line);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none;
}

.ocm-theme-pick .sw i { width: 8px; height: 8px; border-radius: 50%; display: block; }

.ocm-theme-pick .sw.auto { background: conic-gradient(#FFFCF7 0 25%, #211712 0 50%, #F1E6D4 0 75%, #F7F0E5 0); }

/* ═══════════ توست ═══════════ */

.ocm-toasts {
        position: fixed;
        top: calc(var(--ocm-top-h) + 8px);
        left: 0;
        right: 0;
        z-index: 95;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        pointer-events: none !important;
}

.ocm-toast {
        pointer-events: none !important;
        background: rgba(24, 14, 9, 0.92);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        color: #FFFCF7;
        font-size: 12.5px;
        font-weight: 700;
        border-radius: 99px;
        padding: 10px 21px;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
        border: 1px solid rgba(255, 252, 247, 0.14);
        opacity: 0;
        transform: translateY(-10px);
        transition: opacity 0.25s ease, transform 0.25s ease;
        max-width: 88vw;
        text-align: center;
}

.ocm-toast.is-in { opacity: 1; transform: translateY(0); }
.ocm-toast.ok { background: rgba(4, 120, 87, 0.94); }
.ocm-toast.err { background: rgba(185, 28, 28, 0.94); }

/* ═══════════ مقیاس فونت ادمین ═══════════ */

body.oc-public-menu.ocm-font-big { font-size: 17px; }
body.oc-public-menu.ocm-font-big .ocm-card__name { font-size: 15.5px; }
body.oc-public-menu.ocm-font-big .ocm-card__desc { font-size: 13px; }
body.oc-public-menu.ocm-font-small { font-size: 13.5px; }

/* ═══════════ احترام به حساسیت حرکتی ═══════════ */

@media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
        }
        .ocm-skeleton { animation: none; }
}

/* ═══════════ چیدمان دسکتاپ: سایدبار + گرید ۳ستونه ═══════════ */

@media (min-width: 1024px) {
        .ocm-hero { min-height: 430px; }
        .ocm-hero__inner { padding: 44px 24px 48px; align-items: center; text-align: center; }
        .ocm-hero__greet { text-align: center; }
        .ocm-hero__chips, .ocm-hero__meta { justify-content: center; }

        #oc-menu-root {
                display: grid;
                grid-template-columns: 272px minmax(0, 1fr);
                grid-template-areas:
                        "hero hero"
                        "top top"
                        "tools tools"
                        "side main";
                column-gap: 28px;
                align-items: start;
                max-width: 1240px;
                margin-inline: auto;
                padding-inline: 18px;
        }

        #oc-menu-root .ocm-hero { grid-area: hero; border-radius: 0 0 30px 30px; }
        #oc-menu-root .ocm-hero__inner { max-width: none; }
        #oc-menu-root .ocm-top { grid-area: top; border-radius: 0; }
        #oc-menu-root .ocm-toolrow { grid-area: tools; }

        #oc-menu-root .ocm-cats {
                grid-area: side;
                position: sticky;
                top: calc(var(--ocm-top-h) + var(--ocm-tool-h) + 14px);
                display: flex !important;
                flex-direction: column;
                gap: 5px;
                background: var(--ocm-card);
                border: 1px solid var(--ocm-line);
                border-radius: 22px;
                padding: 14px 12px;
                margin: 16px 0 26px;
                box-shadow: var(--ocm-shadow-1);
                max-height: calc(100vh - var(--ocm-top-h) - var(--ocm-tool-h) - 44px);
                overflow-y: auto;
                overscroll-behavior: contain;
                background-clip: padding-box;
        }

        #oc-menu-root .ocm-main { grid-area: main; padding: 6px 4px 70px; min-width: 0; }

        /* سایدبار: برند + فهرست + تبلیغ */
        .ocm-side-brand {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 7px;
                padding: 8px 6px 15px;
                border-bottom: 1px dashed var(--ocm-line);
                margin-bottom: 11px;
        }

        .ocm-side-brand .ocm-sb-logo {
                width: 56px;
                height: 56px;
                border-radius: 18px;
                overflow: hidden;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 25px;
                background: var(--ocm-bg-2);
                border: 1.5px solid var(--ocm-line);
        }

        .ocm-side-brand .ocm-sb-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .ocm-side-brand .ocm-sb-name { font-weight: 700; font-size: 14px; text-align: center; color: var(--ocm-ink); }
        .ocm-side-brand .ocm-sb-en { font-size: 10px; color: var(--ocm-muted); letter-spacing: 0.6px; }

        body.oc-public-menu .ocm-chip {
                display: flex;
                align-items: center;
                gap: 8px;
                width: 100%;
                border-radius: 14px;
                padding: 8px 11px;
                font-size: 12.5px;
                text-align: start;
                min-height: 44px;
        }

        body.oc-public-menu .ocm-chip--sub { margin-inline-start: 14px; width: calc(100% - 14px); font-size: 12px; opacity: 0.94; }

        body.oc-public-menu .ocm-chip .ocm-chip-cnt { margin-inline-start: auto; }

        .ocm-side-promo {
                display: block;
                margin-top: 13px;
                padding: 13px 15px;
                border-radius: 17px;
                background: linear-gradient(135deg, color-mix(in srgb, var(--ocm-accent) 14%, transparent), color-mix(in srgb, var(--ocm-accent) 4%, transparent));
                border: 1px dashed var(--ocm-accent);
                font-size: 11.5px;
                line-height: 1.9;
                color: var(--ocm-ink);
        }

        @supports not (color: color-mix(in srgb, red 50%, black)) {
                .ocm-side-promo { background: linear-gradient(135deg, rgba(197, 139, 82, 0.14), rgba(197, 139, 82, 0.04)); }
        }

        .ocm-side-promo b { color: var(--ocm-accent-deep); }

        /* در دسکتاپ نوار شناور سبد مخفی — دکمهٔ سبد بالای صفحه هست */
        .ocm-cartbar { display: none !important; }

        /* کشوی سبد در دسکتاپ: پنل کناری زیبا */
        .ocm-drawer { justify-content: flex-start; }
        .ocm-drawer__body {
                max-width: 460px;
                height: 100%;
                max-height: 100%;
                border-radius: 0;
                border: none;
                border-inline-end: 1px solid var(--ocm-line);
                animation: ocm-slide-side 0.32s cubic-bezier(0.2, 0.85, 0.3, 1);
        }

        @keyframes ocm-slide-side { from { transform: translateX(40px); opacity: 0.4; } to { transform: none; opacity: 1; } }

        .ocm-drawer__grab { display: none; }

        /* شیت محصول در دسکتاپ: پنجرهٔ وسط */
        .ocm-sheet { align-items: center; }
        .ocm-sheet__body {
                max-width: 600px;
                max-height: 88vh;
                border-radius: 26px;
                border: 1px solid var(--ocm-line);
                border-bottom: 1px solid var(--ocm-line);
        }

        .ocm-sheet__grab { display: none; }
        .ocm-sheet__close { top: 12px; }
}

@media (max-width: 1023px) {
        .ocm-side-brand, .ocm-side-promo { display: none !important; }
}