/* ==========================================
   Menu Templates v4 - RADICALLY Different Layouts
   Mobile-First | Professional Quality
   ========================================== */

/* ============ BASE ============ */
.menu-template { min-height:100vh; min-height:100dvh; overflow-x:hidden; -webkit-text-size-adjust:100%; }
.menu-template .menu-header { text-align:center; padding:30px 16px 20px; position:relative; background-size:cover; background-position:center; }
.menu-template .header-overlay { position:absolute; inset:0; background:rgba(0,0,0,.55); }
.menu-template .header-content { position:relative; z-index:2; }
.menu-template .menu-header .logo-img { width:72px; height:72px; border-radius:50%; object-fit:cover; margin:0 auto 10px; display:block; }
.menu-template .menu-header .logo-placeholder { width:72px; height:72px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 10px; font-size:26px; }
.menu-template .menu-header h1 { font-size:22px; font-weight:800; margin-bottom:4px; line-height:1.3; }
.menu-template .menu-header .header-desc { font-size:13px; line-height:1.5; max-width:340px; margin:4px auto 0; opacity:.75; }
.menu-template .menu-header .divider { margin:10px auto; }
.menu-template .search-trigger { display:inline-flex; align-items:center; gap:6px; margin-top:10px; padding:7px 18px; border-radius:25px; border:1px solid rgba(128,128,128,.3); background:rgba(255,255,255,.12); color:inherit; font-family:'Tajawal'; font-size:12px; cursor:pointer; }
.menu-template .categories-nav { overflow-x:auto; white-space:nowrap; position:sticky; top:0; z-index:10; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:10px 12px; }
.menu-template .categories-nav::-webkit-scrollbar { display:none; }
.menu-template .cat-btn { display:inline-block; font-family:'Tajawal'; cursor:pointer; text-decoration:none; transition:all .2s; padding:7px 16px; font-size:13px; font-weight:600; margin-left:6px; -webkit-tap-highlight-color:transparent; border:none; outline:none; }
.menu-template .products-container { padding:12px; max-width:960px; margin:0 auto; }
.menu-template .menu-footer { text-align:center; padding:20px 16px; font-size:11px; opacity:.4; }
/* Visual Categories (image-based like Bella Smash style) */
.categories-visual { position:sticky; top:0; z-index:10; background:inherit; padding:12px 0 8px; }
.cat-visual-scroll { display:flex; gap:12px; overflow-x:auto; padding:0 12px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.cat-visual-scroll::-webkit-scrollbar { display:none; }
.cat-visual-item { display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; flex-shrink:0; -webkit-tap-highlight-color:transparent; opacity:.6; transition:all .2s; }
.cat-visual-item.active { opacity:1; }
.cat-visual-img { width:64px; height:64px; border-radius:16px; background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; border:2px solid transparent; transition:all .2s; overflow:hidden; }
.cat-visual-item.active .cat-visual-img { border-color:var(--accent,#1565c0); box-shadow:0 4px 12px rgba(0,0,0,.15); transform:scale(1.05); }
.cat-visual-item span { font-size:11px; font-weight:600; color:inherit; white-space:nowrap; max-width:70px; overflow:hidden; text-overflow:ellipsis; }
@media(min-width:480px) { .cat-visual-img { width:72px; height:72px; border-radius:18px; } .cat-visual-item span { font-size:12px; } }

/* Template-specific visual category colors */
.template-classic .categories-visual { background:#f4f6f9; }
.template-classic .cat-visual-item.active .cat-visual-img { border-color:#1565c0; }
.template-modern .categories-visual { background:#0c0c0c; }
.template-modern .cat-visual-item { color:#aaa; }
.template-modern .cat-visual-item.active { color:#c9a84c; }
.template-modern .cat-visual-item.active .cat-visual-img { border-color:#c9a84c; }
.template-elegant .categories-visual { background:#faf7f2; }
.template-elegant .cat-visual-item.active .cat-visual-img { border-color:#8d6e63; }
.template-fresh .categories-visual { background:#f0f7ed; }
.template-fresh .cat-visual-item.active .cat-visual-img { border-color:#43a047; }
.template-vibrant .categories-visual { background:#fff8f0; }
.template-vibrant .cat-visual-item.active .cat-visual-img { border-color:#e65100; }
.template-minimal .categories-visual { background:#fafafa; }
.template-minimal .cat-visual-item.active .cat-visual-img { border-color:#333; }
.template-arabian .categories-visual { background:#1a0a2e; }
.template-arabian .cat-visual-item { color:rgba(240,230,211,.5); }
.template-arabian .cat-visual-item.active { color:#d4af37; }
.template-arabian .cat-visual-item.active .cat-visual-img { border-color:#d4af37; }
.template-ocean .categories-visual { background:#e4f3f7; }
.template-ocean .cat-visual-item.active .cat-visual-img { border-color:#00897b; }
.template-sweet .categories-visual { background:#fef0f5; }
.template-sweet .cat-visual-item.active .cat-visual-img { border-color:#e91e63; }
.template-sweet .cat-visual-img { border-radius:50%; }
.template-rustic .categories-visual { background:#f5f0eb; }
.template-rustic .cat-visual-item.active .cat-visual-img { border-color:#bf360c; }
.template-rustic .cat-visual-img { border-radius:10px; }
.template-noir .categories-visual { background:#0a0a0f; }
.template-noir .cat-visual-item { color:#888; }
.template-noir .cat-visual-item.active { color:#ffd54f; }
.template-noir .cat-visual-item.active .cat-visual-img { border-color:#ffd54f; }
.template-noir .cat-visual-img { border-radius:14px; }
.template-bistro .categories-visual { background:#fbfaf7; }
.template-bistro .cat-visual-item.active .cat-visual-img { border-color:#5d4037; }
.template-bistro .cat-visual-img { border-radius:50%; }
.template-chef .categories-visual { background:#1c1410; }
.template-chef .cat-visual-item { color:#aaa; }
.template-chef .cat-visual-item.active { color:#e8c468; }
.template-chef .cat-visual-item.active .cat-visual-img { border-color:#e8c468; }
.template-amber .categories-visual { background:#1a1407; }
.template-amber .cat-visual-item { color:#a89668; }
.template-amber .cat-visual-item.active { color:#ffc107; }
.template-amber .cat-visual-item.active .cat-visual-img { border-color:#ffc107; }
.template-tiles .categories-visual { background:#fef7f1; }
.template-tiles .cat-visual-item.active .cat-visual-img { border-color:#ff8a65; }
.template-tiles .cat-visual-img { border-radius:18px; }
.template-soho .categories-visual { background:#1f1209; }
.template-soho .cat-visual-item { color:#bfa18a; }
.template-soho .cat-visual-item.active { color:#ff7043; }
.template-soho .cat-visual-item.active .cat-visual-img { border-color:#ff7043; }
.template-soho .cat-visual-img { border-radius:12px; }

.no-img { display:flex!important; align-items:center; justify-content:center; opacity:.15; font-size:32px; }

/* Product Badges */
.product-badge { display:inline-block; padding:2px 8px; border-radius:10px; font-size:10px; font-weight:700; margin-bottom:4px; }
.badge-new { background:#e3f2fd; color:#1565c0; }
.badge-popular { background:#fff3e0; color:#e65100; }
.badge-spicy { background:#fce4ec; color:#c62828; }
.badge-vegetarian { background:#e8f5e9; color:#2e7d32; }
.badge-gluten-free { background:#f3e5f5; color:#7b1fa2; }
.badge-chef-pick { background:#fff8e1; color:#f57f17; }

/* Discount Price */
.original-price { text-decoration:line-through; color:#aaa; font-size:12px; font-weight:400; margin-left:6px; }

/* Call Waiter */
.call-waiter-btn { position:fixed; bottom:20px; right:86px; z-index:800; width:50px; height:50px; border-radius:50%; background:#ff5722; color:#fff; border:none; font-size:20px; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 15px rgba(255,87,34,.4); cursor:pointer; }
.call-waiter-btn:active { transform:scale(.9); }

/* Table Number */
.table-number-bar { background:rgba(0,0,0,.04); padding:8px 12px; text-align:center; font-size:13px; color:#666; }
.table-number-bar input { width:60px; padding:4px 8px; border:2px solid #ddd; border-radius:8px; text-align:center; font-weight:700; font-size:15px; font-family:'Tajawal'; margin:0 6px; }

/* Order Notes */
.order-notes-area { padding:0 20px 10px; }
.order-notes-area textarea { width:100%; padding:10px 14px; border:2px solid #eee; border-radius:12px; font-family:'Tajawal'; font-size:13px; resize:none; outline:none; }
.order-notes-area textarea:focus { border-color:#1565c0; }
.no-img i { opacity:.5; }
@media(min-width:480px) { .menu-template .menu-header { padding:36px 20px 24px; } .menu-template .menu-header .logo-img,.menu-template .menu-header .logo-placeholder { width:84px; height:84px; } .menu-template .menu-header h1 { font-size:26px; } .menu-template .products-container { padding:16px; } }
@media(min-width:768px) { .menu-template .menu-header { padding:44px 20px 28px; } .menu-template .menu-header .logo-img,.menu-template .menu-header .logo-placeholder { width:94px; height:94px; font-size:34px; } .menu-template .menu-header h1 { font-size:30px; } .menu-template .products-container { padding:20px; } }
@supports(padding:max(0px)) { .menu-template .menu-header { padding-top:max(30px,env(safe-area-inset-top)); } .menu-template .menu-footer { padding-bottom:max(20px,env(safe-area-inset-bottom)); } }

/* ================================================================
   1. CLASSIC - بطاقات أفقية كلاسيكية
   Cards: Horizontal (image left + info right)
   ================================================================ */
.template-classic { background:#f4f6f9; }
.template-classic .menu-header { background-color:#0d47a1; color:#fff; padding:34px 16px 28px; }
.template-classic .header-overlay { background:linear-gradient(135deg,rgba(21,101,192,.85),rgba(13,71,161,.9)); }
.template-classic .logo-img { border:3px solid rgba(255,255,255,.35); }
.template-classic .logo-placeholder { background:rgba(255,255,255,.12); color:#fff; }
.template-classic .categories-nav { background:#fff; box-shadow:0 2px 12px rgba(0,0,0,.06); }
.template-classic .cat-btn { border-radius:25px; border:2px solid #1565c0; color:#1565c0; background:#fff; }
.template-classic .cat-btn.active { background:#1565c0; color:#fff; }
.template-classic .products-list .product-card { display:flex; background:#fff; border-radius:16px; margin-bottom:12px; box-shadow:0 1px 8px rgba(0,0,0,.06); overflow:hidden; }
.template-classic .product-card:active { transform:scale(.98); }
.template-classic .product-img { width:105px; min-height:105px; background-size:cover; background-position:center; background-color:#e3f2fd; flex-shrink:0; }
.template-classic .product-info { padding:12px; flex:1; display:flex; flex-direction:column; justify-content:center; }
.template-classic .product-name { font-size:15px; font-weight:700; color:#1a237e; margin-bottom:2px; }
.template-classic .product-desc { font-size:11px; color:#9e9e9e; margin-bottom:5px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.5; }
.template-classic .product-price { font-size:17px; font-weight:800; color:#1565c0; }
.template-classic .product-price span { font-size:10px; font-weight:400; color:#9e9e9e; }
@media(min-width:480px) { .template-classic .product-img { width:130px; min-height:130px; } .template-classic .product-name { font-size:16px; } }

/* ================================================================
   2. MODERN - شبكة بطاقات عمودية فاخرة
   Cards: Vertical grid (2-3 cols) with price badge on image
   ================================================================ */
.template-modern { background:#0c0c0c; color:#eee; }
.template-modern .menu-header { background-color:#0c0c0c; border-bottom:1px solid rgba(201,168,76,.5); padding:38px 16px 28px; }
.template-modern .header-overlay { background:rgba(12,12,12,.8); }
.template-modern .menu-header h1 { color:#c9a84c; font-weight:300; letter-spacing:1px; }
.template-modern .menu-header .header-desc { color:rgba(255,255,255,.3); }
.template-modern .logo-img { border:2px solid #c9a84c; }
.template-modern .logo-placeholder { background:rgba(201,168,76,.08); color:#c9a84c; }
.template-modern .search-trigger { border-color:rgba(201,168,76,.3); color:#c9a84c; }
.template-modern .categories-nav { background:#0c0c0c; border-bottom:1px solid #1a1a1a; }
.template-modern .cat-btn { border-radius:4px; border:1px solid rgba(201,168,76,.2); color:rgba(201,168,76,.7); background:transparent; }
.template-modern .cat-btn.active { background:#c9a84c; color:#0c0c0c; border-color:#c9a84c; }
.template-modern .products-grid-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.template-modern .product-card { background:#151515; border-radius:14px; overflow:hidden; border:1px solid #1c1c1c; transition:border .2s; }
.template-modern .product-card:active { border-color:rgba(201,168,76,.3); }
.template-modern .card-img-wrap { position:relative; }
.template-modern .card-img-wrap .product-img { width:100%; height:140px; background-size:cover; background-position:center; background-color:#1a1a1a; }
.template-modern .price-badge { position:absolute; bottom:8px; left:8px; background:#c9a84c; color:#0c0c0c; padding:3px 10px; border-radius:6px; font-size:12px; font-weight:800; }
.template-modern .product-info { padding:10px 12px 12px; }
.template-modern .product-name { font-size:13px; font-weight:700; color:#e8e8e8; margin-bottom:3px; }
.template-modern .product-desc { font-size:10px; color:rgba(255,255,255,.25); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
@media(min-width:480px) { .template-modern .products-grid-cards { gap:14px; } .template-modern .card-img-wrap .product-img { height:170px; } .template-modern .product-name { font-size:14px; } }
@media(min-width:768px) { .template-modern .products-grid-cards { grid-template-columns:repeat(3,1fr); gap:16px; } .template-modern .card-img-wrap .product-img { height:200px; } }

/* ================================================================
   3. ELEGANT - قائمة نصية فاخرة بخطوط منقطة
   Cards: Text-only fine dining style with dotted price lines
   ================================================================ */
.template-elegant { background:#faf7f2; color:#3e2723; font-family:'Amiri','Tajawal',serif; }
.template-elegant .menu-header { background-color:#3e2723; color:#f5ebe0; padding:40px 16px 28px; }
.template-elegant .header-overlay { background:linear-gradient(135deg,rgba(62,39,35,.85),rgba(93,64,55,.85)); }
.template-elegant .menu-header h1 { font-weight:400; letter-spacing:2px; color:#d4a574; font-family:'Amiri',serif; }
.template-elegant .divider { width:50px; height:1px; background:#d4a574; }
.template-elegant .logo-img { border:2px solid #d4a574; }
.template-elegant .logo-placeholder { background:rgba(212,165,116,.12); color:#d4a574; }
.template-elegant .search-trigger { border-color:rgba(212,165,116,.4); color:#d4a574; }
.template-elegant .categories-nav { background:#f5ebe0; border-bottom:1px solid #d7ccc8; }
.template-elegant .cat-btn { border:1px solid #a1887f; color:#5d4037; background:transparent; font-family:'Amiri',serif; border-radius:0; }
.template-elegant .cat-btn.active { background:#5d4037; color:#faf7f2; }
.template-elegant .menu-section { margin-bottom:30px; }
.template-elegant .section-title { text-align:center; margin-bottom:18px; position:relative; }
.template-elegant .section-title span { background:#faf7f2; padding:0 16px; position:relative; z-index:1; font-size:20px; font-weight:700; color:#5d4037; font-family:'Amiri',serif; }
.template-elegant .section-title::before { content:''; position:absolute; top:50%; left:0; right:0; height:1px; background:#d7ccc8; }
.template-elegant .menu-item-row { display:flex; align-items:baseline; padding:14px 4px; gap:8px; border-bottom:1px solid rgba(215,204,200,.25); }
.template-elegant .menu-item-row:last-child { border-bottom:none; }
.template-elegant .item-right { flex-shrink:0; max-width:55%; }
.template-elegant .product-name { font-size:17px; font-weight:700; color:#3e2723; font-family:'Amiri',serif; }
.template-elegant .product-desc { font-size:12px; color:#a1887f; margin-top:3px; line-height:1.5; }
.template-elegant .dots-line { flex:1; border-bottom:2px dotted #d7ccc8; margin-bottom:5px; min-width:20px; }
.template-elegant .product-price { font-size:18px; font-weight:700; color:#5d4037; white-space:nowrap; flex-shrink:0; font-family:'Tajawal'; }
.template-elegant .product-price span { font-size:11px; color:#a1887f; }

/* ================================================================
   4. FRESH - بطاقات Hero كاملة العرض بصورة كبيرة
   Cards: Full-width hero image with gradient overlay
   ================================================================ */
.template-fresh { background:#edf7ea; }
.template-fresh .menu-header { background-color:#2e7d32; color:#fff; padding:34px 16px 28px; }
.template-fresh .header-overlay { background:linear-gradient(135deg,rgba(46,125,50,.85),rgba(67,160,71,.85)); }
.template-fresh .logo-img { border:3px solid rgba(255,255,255,.3); }
.template-fresh .logo-placeholder { background:rgba(255,255,255,.12); color:#fff; }
.template-fresh .categories-nav { background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.04); }
.template-fresh .cat-btn { border-radius:25px; border:2px solid #43a047; color:#2e7d32; background:#fff; }
.template-fresh .cat-btn.active { background:#43a047; color:#fff; }
.template-fresh .products-full-cards .product-card { background:#fff; border-radius:20px; overflow:hidden; margin-bottom:14px; box-shadow:0 2px 12px rgba(0,0,0,.05); }
.template-fresh .card-hero { width:100%; height:180px; background-size:cover; background-position:center; background-color:#c8e6c9; position:relative; }
.template-fresh .hero-overlay { position:absolute; bottom:0; left:0; right:0; padding:14px 16px; background:linear-gradient(transparent,rgba(0,0,0,.7)); }
.template-fresh .hero-overlay .product-price { color:#fff; font-size:20px; font-weight:800; }
.template-fresh .hero-overlay .product-price span { color:rgba(255,255,255,.7); font-size:12px; }
.template-fresh .product-info { padding:14px 16px; }
.template-fresh .product-name { font-size:17px; font-weight:700; color:#2e7d32; margin-bottom:4px; }
.template-fresh .product-desc { font-size:12px; color:#9e9e9e; line-height:1.5; }
.template-fresh .product-info .product-price { font-size:18px; font-weight:800; color:#2e7d32; margin-top:8px; }
.template-fresh .product-info .product-price span { color:#9e9e9e; font-size:11px; }
@media(min-width:480px) { .template-fresh .card-hero { height:220px; } }
@media(min-width:768px) { .template-fresh .card-hero { height:260px; } }

/* ================================================================
   5. VIBRANT - شبكة مربعة ملونة وجريئة
   Cards: Bold 2-3 column square grid
   ================================================================ */
.template-vibrant { background:#fff8f0; }
.template-vibrant .menu-header { background-color:#e65100; color:#fff; padding:34px 16px 28px; }
.template-vibrant .header-overlay { background:linear-gradient(135deg,rgba(230,81,0,.85),rgba(255,109,0,.85)); }
.template-vibrant .menu-header h1 { text-shadow:0 2px 4px rgba(0,0,0,.15); }
.template-vibrant .logo-img { border:3px solid rgba(255,255,255,.5); }
.template-vibrant .logo-placeholder { background:rgba(255,255,255,.2); color:#fff; }
.template-vibrant .categories-nav { background:#e65100; }
.template-vibrant .cat-btn { border-radius:25px; border:2px solid rgba(255,255,255,.4); color:#fff; background:transparent; }
.template-vibrant .cat-btn.active { background:#fff; color:#e65100; border-color:#fff; }
.template-vibrant .products-duo-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.template-vibrant .product-card { background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 3px 12px rgba(230,81,0,.06); }
.template-vibrant .product-card:active { transform:scale(.97); }
.template-vibrant .product-img { width:100%; height:135px; background-size:cover; background-position:center; background-color:#ffe0b2; }
.template-vibrant .product-info { padding:10px 12px 14px; }
.template-vibrant .product-name { font-size:14px; font-weight:700; color:#333; margin-bottom:4px; }
.template-vibrant .product-price { font-size:17px; font-weight:800; color:#e65100; }
.template-vibrant .product-price span { font-size:10px; color:#999; }
@media(min-width:480px) { .template-vibrant .product-img { height:160px; } .template-vibrant .products-duo-grid { gap:14px; } }
@media(min-width:768px) { .template-vibrant .products-duo-grid { grid-template-columns:repeat(3,1fr); gap:18px; } .template-vibrant .product-img { height:190px; } }

/* ================================================================
   6. MINIMAL - قائمة نصية نظيفة بدون صور
   Cards: Pure text list, no images at all
   ================================================================ */
.template-minimal { background:#fafafa; }
.template-minimal .menu-header { border-bottom:1px solid #eee; background-color:#fff; padding:38px 16px 24px; }
.template-minimal .header-overlay { background:rgba(255,255,255,.75); }
.template-minimal .menu-header .logo-img { width:54px; height:54px; }
.template-minimal .menu-header .logo-placeholder { width:54px; height:54px; background:#f5f5f5; color:#bbb; font-size:20px; }
.template-minimal .menu-header h1 { font-weight:300; color:#333; letter-spacing:3px; font-size:19px; }
.template-minimal .divider { width:28px; height:1px; background:#333; }
.template-minimal .menu-header .header-desc { color:#bbb; font-size:11px; }
.template-minimal .search-trigger { border-color:#ddd; color:#999; background:#f5f5f5; }
.template-minimal .categories-nav { background:#fff; border-bottom:1px solid #eee; }
.template-minimal .cat-btn { color:#bbb; background:transparent; border-bottom:2px solid transparent; border-radius:0; padding:8px 14px; }
.template-minimal .cat-btn.active { color:#333; border-bottom-color:#333; }
.template-minimal .products-container { max-width:600px; }
.template-minimal .products-text-list .product-card { display:flex; align-items:center; justify-content:space-between; padding:14px 0; border-bottom:1px solid #f0f0f0; }
.template-minimal .products-text-list .product-card:last-child { border-bottom:none; }
.template-minimal .product-info { flex:1; min-width:0; }
.template-minimal .product-name { font-size:14px; font-weight:600; color:#333; }
.template-minimal .product-desc { font-size:11px; color:#ccc; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.template-minimal .product-price { font-size:15px; font-weight:700; color:#333; white-space:nowrap; margin-right:16px; flex-shrink:0; }
.template-minimal .product-price span { font-size:10px; color:#ccc; }

/* ================================================================
   7. ARABIAN - بطاقات مزخرفة شرقية بنص مركزي
   Cards: Ornamental centered with decorative borders
   ================================================================ */
.template-arabian { background:#1a0a2e; color:#f0e6d3; }
.template-arabian .menu-header { background-color:#1a0a2e; position:relative; padding:40px 16px 28px; }
.template-arabian .header-overlay { background:linear-gradient(180deg,rgba(26,10,46,.85),rgba(45,27,78,.8),rgba(26,10,46,.85)); }
.template-arabian .menu-header::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:linear-gradient(90deg,transparent,#d4af37,transparent); }
.template-arabian .menu-header h1 { color:#d4af37; font-family:'Amiri',serif; }
.template-arabian .menu-header .header-desc { color:rgba(240,230,211,.35); }
.template-arabian .divider { width:50px; height:1px; background:linear-gradient(90deg,transparent,#d4af37,transparent); }
.template-arabian .logo-img { border:2px solid #d4af37; }
.template-arabian .logo-placeholder { background:rgba(212,175,55,.06); color:#d4af37; }
.template-arabian .search-trigger { border-color:rgba(212,175,55,.25); color:#d4af37; }
.template-arabian .categories-nav { background:#2d1b4e; border-bottom:1px solid rgba(212,175,55,.08); }
.template-arabian .cat-btn { border-radius:4px; border:1px solid rgba(212,175,55,.2); color:#d4af37; background:transparent; }
.template-arabian .cat-btn.active { background:#d4af37; color:#1a0a2e; }
.template-arabian .products-ornate .product-card { margin-bottom:14px; }
.template-arabian .ornate-border { background:rgba(45,27,78,.35); border:1px solid rgba(212,175,55,.1); border-radius:14px; overflow:hidden; text-align:center; position:relative; }
.template-arabian .ornate-border::before { content:'\2726'; position:absolute; top:-1px; left:50%; transform:translateX(-50%); background:#1a0a2e; padding:0 10px; color:#d4af37; font-size:12px; z-index:1; }
.template-arabian .ornate-border .product-img { width:100%; height:155px; background-size:cover; background-position:center; background-color:#2d1b4e; }
.template-arabian .ornate-border .product-info { padding:14px; }
.template-arabian .product-name { font-size:16px; font-weight:700; color:#f0e6d3; font-family:'Amiri',serif; margin-bottom:3px; }
.template-arabian .product-desc { font-size:11px; color:rgba(240,230,211,.3); margin-bottom:6px; }
.template-arabian .ornate-divider { width:36px; height:1px; background:linear-gradient(90deg,transparent,#d4af37,transparent); margin:6px auto; }
.template-arabian .product-price { font-size:19px; font-weight:800; color:#d4af37; }
.template-arabian .product-price span { font-size:10px; color:rgba(240,230,211,.25); }
@media(min-width:480px) { .template-arabian .products-ornate { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; } }
@media(min-width:768px) { .template-arabian .products-ornate { grid-template-columns:repeat(3,1fr); gap:16px; } }

/* ================================================================
   8. OCEAN - بطاقات بصور دائرية ناعمة
   Cards: Horizontal with circular product image
   ================================================================ */
.template-ocean { background:#e4f3f7; }
.template-ocean .menu-header { background-color:#00695c; color:#fff; padding:34px 16px 28px; }
.template-ocean .header-overlay { background:linear-gradient(135deg,rgba(0,105,92,.85),rgba(0,137,123,.85)); }
.template-ocean .logo-img { border:3px solid rgba(255,255,255,.35); }
.template-ocean .logo-placeholder { background:rgba(255,255,255,.12); color:#fff; }
.template-ocean .categories-nav { background:#fff; box-shadow:0 2px 8px rgba(0,96,100,.06); }
.template-ocean .cat-btn { border-radius:25px; border:2px solid #00897b; color:#00695c; background:#fff; }
.template-ocean .cat-btn.active { background:#00897b; color:#fff; }
.template-ocean .products-wave-list .product-card { display:flex; align-items:center; gap:12px; background:#fff; border-radius:60px 14px 14px 60px; padding:6px 14px 6px 6px; margin-bottom:10px; box-shadow:0 1px 6px rgba(0,96,100,.04); }
.template-ocean .product-card:active { transform:scale(.98); }
.template-ocean .product-img-circle { width:62px; height:62px; border-radius:50%; flex-shrink:0; background-size:cover; background-position:center; background-color:#b2dfdb; border:3px solid #e0f2f1; }
.template-ocean .product-info { flex:1; min-width:0; }
.template-ocean .product-name { font-size:14px; font-weight:700; color:#00695c; }
.template-ocean .product-desc { font-size:10px; color:#90a4ae; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.template-ocean .products-wave-list > .product-card > .product-price { font-size:16px; font-weight:800; color:#00897b; white-space:nowrap; flex-shrink:0; }
.template-ocean .product-price span { font-size:9px; color:#90a4ae; display:block; text-align:center; }
@media(min-width:480px) { .template-ocean .product-img-circle { width:72px; height:72px; } .template-ocean .product-name { font-size:15px; } }

/* ================================================================
   9. SWEET - بطاقات Pinterest/Masonry متدرجة
   Cards: Masonry/Pinterest staggered grid
   ================================================================ */
.template-sweet { background:#fef0f5; }
.template-sweet .menu-header { background-color:#e91e63; color:#fff; padding:34px 16px 28px; }
.template-sweet .header-overlay { background:linear-gradient(135deg,rgba(233,30,99,.85),rgba(240,98,146,.85)); }
.template-sweet .logo-img { border:3px solid rgba(255,255,255,.45); border-radius:18px; }
.template-sweet .logo-placeholder { background:rgba(255,255,255,.15); border-radius:18px; color:#fff; }
.template-sweet .categories-nav { background:#fff; box-shadow:0 2px 8px rgba(233,30,99,.04); }
.template-sweet .cat-btn { border-radius:25px; border:2px solid #e91e63; color:#e91e63; background:#fff; }
.template-sweet .cat-btn.active { background:#e91e63; color:#fff; }
.template-sweet .products-masonry { columns:2; column-gap:10px; }
.template-sweet .products-masonry .product-card { break-inside:avoid; margin-bottom:10px; display:inline-block; width:100%; background:#fff; border-radius:18px; overflow:hidden; box-shadow:0 2px 8px rgba(233,30,99,.04); }
.template-sweet .product-img { width:100%; min-height:130px; background-size:cover; background-position:center; background-color:#fce4ec; }
.template-sweet .product-img.short { min-height:80px; }
.template-sweet .product-info { padding:10px 12px 14px; }
.template-sweet .product-name { font-size:13px; font-weight:700; color:#880e4f; margin-bottom:3px; }
.template-sweet .product-desc { font-size:10px; color:#e0a0b0; margin-bottom:5px; }
.template-sweet .product-price { font-size:15px; font-weight:800; color:#e91e63; }
.template-sweet .product-price span { font-size:9px; color:#e0a0b0; }
@media(min-width:480px) { .template-sweet .products-masonry { column-gap:14px; } .template-sweet .product-img { min-height:150px; } }
@media(min-width:768px) { .template-sweet .products-masonry { columns:3; column-gap:16px; } }

/* ================================================================
   10. RUSTIC - بانر صورة كاملة مع overlay نص
   Cards: Full-width image banners with dark text overlay
   ================================================================ */
.template-rustic { background:#f5f0eb; }
.template-rustic .menu-header { background-color:#3e2723; color:#f5f0eb; border-bottom:4px solid #bf360c; padding:36px 16px 28px; }
.template-rustic .header-overlay { background:linear-gradient(135deg,rgba(62,39,35,.85),rgba(78,52,46,.85)); }
.template-rustic .menu-header h1 { color:#ffab91; }
.template-rustic .logo-img { border:3px solid #bf360c; border-radius:10px; }
.template-rustic .logo-placeholder { background:rgba(191,54,12,.1); color:#bf360c; border-radius:10px; }
.template-rustic .search-trigger { border-color:rgba(255,171,145,.3); color:#ffab91; }
.template-rustic .categories-nav { background:#4e342e; }
.template-rustic .cat-btn { border-radius:8px; border:1px solid rgba(255,171,145,.25); color:#ffab91; background:transparent; }
.template-rustic .cat-btn.active { background:#bf360c; color:#fff; border-color:#bf360c; }
.template-rustic .products-banner .product-card { margin-bottom:12px; }
.template-rustic .banner-bg { width:100%; min-height:155px; border-radius:14px; overflow:hidden; background-size:cover; background-position:center; background-color:#4e342e; position:relative; display:flex; align-items:flex-end; }
.template-rustic .banner-content { width:100%; padding:16px; background:linear-gradient(transparent 0%,rgba(25,10,5,.9) 100%); color:#fff; border-radius:0 0 14px 14px; }
.template-rustic .banner-content .product-name { font-size:17px; font-weight:800; margin-bottom:3px; }
.template-rustic .banner-content .product-desc { font-size:11px; color:rgba(255,255,255,.5); margin-bottom:4px; }
.template-rustic .banner-content .product-price { font-size:20px; font-weight:800; color:#ffab91; }
.template-rustic .banner-content .product-price span { color:rgba(255,255,255,.4); font-size:11px; }
@media(min-width:480px) { .template-rustic .banner-bg { min-height:195px; } }
@media(min-width:768px) { .template-rustic .banner-bg { min-height:240px; } .template-rustic .banner-content { padding:22px; } .template-rustic .banner-content .product-name { font-size:22px; } }

/* ================================================================
   11. NOIR - شبكة فاخرة داكنة مع صور مربعة
   Cards: Premium dark 2-col grid with rounded square images
   ================================================================ */
.template-noir { background:#0a0a0f; color:#ececec; }
.template-noir .menu-header { background-color:#0a0a0f; padding:38px 16px 26px; border-bottom:1px solid rgba(255,213,79,.12); }
.template-noir .header-overlay { background:linear-gradient(180deg,rgba(10,10,15,.78),rgba(10,10,15,.92)); }
.template-noir .menu-header h1 { color:#ffd54f; font-weight:800; letter-spacing:.5px; }
.template-noir .menu-header .header-desc { color:rgba(255,255,255,.45); }
.template-noir .logo-img { border:2px solid #ffd54f; }
.template-noir .logo-placeholder { background:rgba(255,213,79,.08); color:#ffd54f; }
.template-noir .search-trigger { border-color:rgba(255,213,79,.3); color:#ffd54f; background:rgba(255,213,79,.05); }
.template-noir .categories-nav { background:#0a0a0f; padding:12px; }
.template-noir .cat-btn { border-radius:30px; border:1px solid rgba(255,213,79,.18); color:#ddc06a; background:rgba(255,213,79,.04); padding:8px 18px; }
.template-noir .cat-btn.active { background:#ffd54f; color:#0a0a0f; border-color:#ffd54f; box-shadow:0 4px 14px rgba(255,213,79,.25); }
.template-noir .products-noir-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.template-noir .product-card { background:#15151c; border-radius:18px; overflow:hidden; border:1px solid #1e1e28; transition:all .25s; position:relative; }
.template-noir .product-card:active { transform:scale(.97); border-color:rgba(255,213,79,.35); }
.template-noir .noir-img-wrap { position:relative; padding:10px 10px 0; }
.template-noir .noir-img-wrap .product-img { width:100%; height:135px; border-radius:14px; background-size:cover; background-position:center; background-color:#1c1c25; }
.template-noir .noir-fav { position:absolute; top:18px; right:18px; width:30px; height:30px; border-radius:50%; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; color:#ffd54f; font-size:13px; }
.template-noir .product-info { padding:10px 14px 14px; }
.template-noir .product-name { font-size:14px; font-weight:700; color:#fff; margin-bottom:3px; line-height:1.3; }
.template-noir .product-desc { font-size:10px; color:rgba(255,255,255,.32); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:6px; }
.template-noir .product-price { font-size:16px; font-weight:800; color:#ffd54f; }
.template-noir .product-price span { font-size:10px; color:rgba(255,213,79,.55); font-weight:500; }
@media(min-width:480px) { .template-noir .products-noir-grid { gap:16px; } .template-noir .noir-img-wrap .product-img { height:165px; } .template-noir .product-name { font-size:15px; } }
@media(min-width:768px) { .template-noir .products-noir-grid { grid-template-columns:repeat(3,1fr); gap:18px; } .template-noir .noir-img-wrap .product-img { height:190px; } }

/* ================================================================
   12. BISTRO - بيسترو راقي بطاقات بيضاء بصور كبيرة
   Cards: Clean white 2-col cards with bold prices, premium feel
   ================================================================ */
.template-bistro { background:#fbfaf7; color:#2c2118; }
.template-bistro .menu-header { background-color:#fff; color:#3e2723; padding:34px 16px 22px; border-bottom:1px solid #ece5da; }
.template-bistro .header-overlay { background:rgba(255,255,255,.92); }
.template-bistro .menu-header h1 { color:#3e2723; font-weight:800; letter-spacing:1px; }
.template-bistro .menu-header .header-desc { color:#a89687; }
.template-bistro .logo-img { border:2px solid #d7b894; }
.template-bistro .logo-placeholder { background:#f5ece0; color:#a07a4d; }
.template-bistro .search-trigger { border:1px solid #e0d4c2; background:#f9f4ec; color:#a07a4d; }
.template-bistro .categories-nav { background:#fff; border-bottom:1px solid #ece5da; padding:14px 12px; }
.template-bistro .cat-btn { border-radius:30px; border:1px solid #e0d4c2; color:#5d4037; background:#fff; font-weight:600; padding:8px 18px; transition:all .2s; }
.template-bistro .cat-btn.active { background:#3e2723; color:#fff; border-color:#3e2723; box-shadow:0 4px 14px rgba(62,39,35,.18); }
.template-bistro .products-bistro-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.template-bistro .product-card { background:#fff; border-radius:22px; overflow:hidden; box-shadow:0 4px 18px rgba(62,39,35,.06); transition:all .25s; }
.template-bistro .product-card:active { transform:scale(.97); box-shadow:0 6px 22px rgba(62,39,35,.12); }
.template-bistro .bistro-img { width:100%; height:150px; background-size:cover; background-position:center; background-color:#f5ece0; position:relative; }
.template-bistro .bistro-tag { position:absolute; top:10px; right:10px; background:rgba(255,255,255,.95); color:#3e2723; padding:4px 10px; border-radius:14px; font-size:10px; font-weight:700; backdrop-filter:blur(6px); }
.template-bistro .product-info { padding:14px 14px 16px; }
.template-bistro .product-name { font-size:15px; font-weight:700; color:#3e2723; margin-bottom:4px; line-height:1.3; }
.template-bistro .product-desc { font-size:11px; color:#a89687; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:8px; }
.template-bistro .bistro-bottom { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.template-bistro .product-price { font-size:18px; font-weight:800; color:#3e2723; }
.template-bistro .product-price span { font-size:10px; color:#a89687; font-weight:500; }
.template-bistro .bistro-add { width:30px; height:30px; border-radius:50%; background:#3e2723; color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; border:none; cursor:pointer; }
@media(min-width:480px) { .template-bistro .bistro-img { height:175px; } .template-bistro .product-name { font-size:16px; } }
@media(min-width:768px) { .template-bistro .products-bistro-grid { grid-template-columns:repeat(3,1fr); gap:18px; } .template-bistro .bistro-img { height:200px; } }

/* ================================================================
   13. CHEF - تجربة الشيف ببانر هيرو وأزرار CTA
   Cards: Hero header takes top, then horizontal card list with chef vibe
   ================================================================ */
.template-chef { background:#1c1410; color:#f3e9d6; }
.template-chef .menu-header { background-color:#1c1410; padding:0; min-height:280px; display:flex; flex-direction:column; justify-content:flex-end; position:relative; overflow:hidden; }
.template-chef .menu-header::before { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(28,20,16,.35) 0%,rgba(28,20,16,.5) 50%,rgba(28,20,16,.95) 100%); z-index:1; }
.template-chef .header-overlay { background:transparent; }
.template-chef .header-content { padding:28px 18px 22px; z-index:2; text-align:center; }
.template-chef .menu-header h1 { color:#e8c468; font-weight:800; font-size:24px; letter-spacing:.5px; text-shadow:0 2px 14px rgba(0,0,0,.6); }
.template-chef .menu-header .header-desc { color:rgba(255,255,255,.7); text-shadow:0 1px 8px rgba(0,0,0,.5); }
.template-chef .logo-img { border:2px solid #e8c468; box-shadow:0 4px 20px rgba(0,0,0,.5); }
.template-chef .logo-placeholder { background:rgba(232,196,104,.15); color:#e8c468; backdrop-filter:blur(8px); }
.template-chef .search-trigger { border-color:rgba(232,196,104,.4); color:#e8c468; background:rgba(0,0,0,.3); backdrop-filter:blur(8px); }
.template-chef .chef-divider { width:60px; height:2px; background:linear-gradient(90deg,transparent,#e8c468,transparent); margin:8px auto; }
.template-chef .categories-nav { background:#1c1410; border-bottom:1px solid rgba(232,196,104,.12); padding:14px 12px; }
.template-chef .cat-btn { border-radius:8px; border:1px solid rgba(232,196,104,.25); color:#e8c468; background:transparent; padding:8px 18px; font-weight:600; }
.template-chef .cat-btn.active { background:#e8c468; color:#1c1410; border-color:#e8c468; }
.template-chef .products-chef-list .product-card { display:flex; gap:12px; background:rgba(232,196,104,.04); border:1px solid rgba(232,196,104,.1); border-radius:16px; margin-bottom:12px; padding:10px; transition:all .25s; }
.template-chef .product-card:active { transform:scale(.98); border-color:rgba(232,196,104,.3); }
.template-chef .chef-img { width:90px; height:90px; flex-shrink:0; border-radius:12px; background-size:cover; background-position:center; background-color:#2d2017; border:1px solid rgba(232,196,104,.2); }
.template-chef .product-info { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; }
.template-chef .chef-tag { display:inline-block; font-size:9px; font-weight:700; color:#e8c468; background:rgba(232,196,104,.12); padding:2px 8px; border-radius:8px; margin-bottom:4px; align-self:flex-start; letter-spacing:.5px; text-transform:uppercase; }
.template-chef .product-name { font-size:15px; font-weight:700; color:#f3e9d6; margin-bottom:3px; }
.template-chef .product-desc { font-size:11px; color:rgba(243,233,214,.45); line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:6px; }
.template-chef .product-price { font-size:17px; font-weight:800; color:#e8c468; }
.template-chef .product-price span { font-size:10px; color:rgba(232,196,104,.55); font-weight:500; }
@media(min-width:480px) { .template-chef .menu-header { min-height:320px; } .template-chef .chef-img { width:110px; height:110px; } .template-chef .product-name { font-size:16px; } }
@media(min-width:768px) { .template-chef .menu-header { min-height:380px; } .template-chef .menu-header h1 { font-size:32px; } .template-chef .chef-img { width:130px; height:130px; } }

/* ================================================================
   14. AMBER - كهرماني دافئ بنجمات تقييم
   Cards: Warm dark amber theme, horizontal cards with star ratings
   ================================================================ */
.template-amber { background:#1a1407; color:#fff8e1; }
.template-amber .menu-header { background-color:#1a1407; padding:36px 16px 26px; border-bottom:2px solid #ffc107; }
.template-amber .header-overlay { background:linear-gradient(135deg,rgba(26,20,7,.85),rgba(56,40,12,.9)); }
.template-amber .menu-header h1 { color:#ffc107; font-weight:800; letter-spacing:.5px; text-transform:uppercase; }
.template-amber .menu-header .header-desc { color:rgba(255,248,225,.55); }
.template-amber .logo-img { border:3px solid #ffc107; }
.template-amber .logo-placeholder { background:rgba(255,193,7,.12); color:#ffc107; }
.template-amber .search-trigger { border-color:rgba(255,193,7,.3); color:#ffc107; background:rgba(255,193,7,.05); }
.template-amber .categories-nav { background:#1a1407; padding:14px 12px; }
.template-amber .cat-btn { border-radius:0; border:none; border-bottom:2px solid transparent; color:rgba(255,248,225,.45); background:transparent; font-weight:700; padding:8px 14px; text-transform:uppercase; font-size:12px; letter-spacing:.5px; }
.template-amber .cat-btn.active { color:#ffc107; border-bottom-color:#ffc107; }
.template-amber .products-amber-list .product-card { display:flex; gap:14px; background:linear-gradient(135deg,#241a08,#2c1f0a); border-radius:14px; margin-bottom:12px; padding:12px; border:1px solid rgba(255,193,7,.1); transition:all .25s; }
.template-amber .product-card:active { transform:scale(.98); border-color:rgba(255,193,7,.4); }
.template-amber .amber-img { width:95px; height:95px; flex-shrink:0; border-radius:12px; background-size:cover; background-position:center; background-color:#2c1f0a; }
.template-amber .product-info { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; }
.template-amber .product-name { font-size:15px; font-weight:800; color:#fff8e1; margin-bottom:3px; }
.template-amber .amber-stars { color:#ffc107; font-size:11px; margin-bottom:4px; letter-spacing:1px; }
.template-amber .amber-stars .star-empty { color:rgba(255,193,7,.25); }
.template-amber .product-desc { font-size:11px; color:rgba(255,248,225,.4); line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:6px; }
.template-amber .product-price { font-size:18px; font-weight:800; color:#ffc107; }
.template-amber .product-price span { font-size:10px; color:rgba(255,193,7,.5); font-weight:500; }
@media(min-width:480px) { .template-amber .amber-img { width:115px; height:115px; } .template-amber .product-name { font-size:16px; } }
@media(min-width:768px) { .template-amber .amber-img { width:135px; height:135px; } }

/* ================================================================
   15. TILES - بلاطات ملونة باستيل لكل تصنيف
   Cards: Pastel colored 2-col tile grid like ice cream parlour
   ================================================================ */
.template-tiles { background:#fef7f1; color:#3a2418; }
.template-tiles .menu-header { background-color:#ff8a65; color:#fff; padding:34px 16px 28px; border-bottom-left-radius:30px; border-bottom-right-radius:30px; }
.template-tiles .header-overlay { background:linear-gradient(135deg,rgba(255,138,101,.92),rgba(255,112,67,.92)); border-bottom-left-radius:30px; border-bottom-right-radius:30px; }
.template-tiles .menu-header h1 { color:#fff; font-weight:800; }
.template-tiles .menu-header .header-desc { color:rgba(255,255,255,.8); }
.template-tiles .logo-img { border:3px solid rgba(255,255,255,.5); border-radius:18px; }
.template-tiles .logo-placeholder { background:rgba(255,255,255,.18); color:#fff; border-radius:18px; }
.template-tiles .search-trigger { border-color:rgba(255,255,255,.4); color:#fff; background:rgba(255,255,255,.18); }
.template-tiles .categories-nav { background:#fef7f1; padding:16px 12px 8px; }
.template-tiles .cat-btn { border-radius:14px; border:1.5px solid #ffccbc; color:#bf360c; background:#fff; font-weight:700; padding:9px 16px; }
.template-tiles .cat-btn.active { background:#ff7043; color:#fff; border-color:#ff7043; box-shadow:0 4px 12px rgba(255,112,67,.3); }
.template-tiles .products-tiles-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.template-tiles .product-card { background:#fff; border-radius:24px; overflow:hidden; box-shadow:0 6px 18px rgba(255,112,67,.08); transition:all .25s; padding:14px 12px 16px; text-align:center; }
.template-tiles .product-card:nth-child(4n+1) { background:#fff3e0; }
.template-tiles .product-card:nth-child(4n+2) { background:#e8f5e9; }
.template-tiles .product-card:nth-child(4n+3) { background:#fce4ec; }
.template-tiles .product-card:nth-child(4n) { background:#e3f2fd; }
.template-tiles .product-card:active { transform:scale(.96); }
.template-tiles .tiles-img { width:96px; height:96px; margin:0 auto 10px; border-radius:50%; background-size:cover; background-position:center; background-color:rgba(255,255,255,.6); border:4px solid #fff; box-shadow:0 6px 16px rgba(0,0,0,.08); display:flex; align-items:center; justify-content:center; font-size:32px; color:rgba(0,0,0,.2); }
.template-tiles .product-name { font-size:14px; font-weight:800; color:#3a2418; margin-bottom:4px; }
.template-tiles .product-desc { font-size:10px; color:#8a6757; margin-bottom:8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.4; }
.template-tiles .product-price { font-size:16px; font-weight:800; color:#bf360c; }
.template-tiles .product-price span { font-size:10px; color:#a87766; font-weight:500; }
@media(min-width:480px) { .template-tiles .tiles-img { width:110px; height:110px; } .template-tiles .product-name { font-size:15px; } }
@media(min-width:768px) { .template-tiles .products-tiles-grid { grid-template-columns:repeat(3,1fr); gap:18px; } .template-tiles .tiles-img { width:130px; height:130px; } }

/* ================================================================
   16. SOHO - شبكة برجر داكنة بأحجام متنوعة (Asymmetric)
   Cards: Asymmetric tile grid: 1 large + small tiles, fast-food vibes
   ================================================================ */
.template-soho { background:#1f1209; color:#fff; }
.template-soho .menu-header { background-color:#1f1209; padding:36px 16px 28px; border-bottom:2px solid #ff7043; }
.template-soho .header-overlay { background:linear-gradient(135deg,rgba(31,18,9,.78),rgba(60,30,12,.9)); }
.template-soho .menu-header h1 { color:#ff7043; font-weight:900; letter-spacing:1px; text-transform:uppercase; text-shadow:0 2px 8px rgba(0,0,0,.4); }
.template-soho .menu-header .header-desc { color:rgba(255,255,255,.55); }
.template-soho .logo-img { border:3px solid #ff7043; border-radius:14px; }
.template-soho .logo-placeholder { background:rgba(255,112,67,.15); color:#ff7043; border-radius:14px; }
.template-soho .search-trigger { border-color:rgba(255,112,67,.4); color:#ffab91; background:rgba(255,112,67,.06); }
.template-soho .categories-nav { background:#1f1209; padding:14px 12px; }
.template-soho .cat-btn { border-radius:10px; border:1px solid rgba(255,112,67,.25); color:#ffab91; background:transparent; padding:9px 18px; font-weight:700; }
.template-soho .cat-btn.active { background:#ff7043; color:#fff; border-color:#ff7043; box-shadow:0 4px 14px rgba(255,112,67,.35); }
.template-soho .products-soho-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; grid-auto-flow:dense; }
.template-soho .product-card { background:#2a1a0e; border-radius:18px; overflow:hidden; border:1px solid #3a2415; position:relative; transition:all .25s; }
.template-soho .product-card:active { transform:scale(.97); border-color:rgba(255,112,67,.4); }
.template-soho .product-card:nth-child(5n+1) { grid-column:span 2; }
.template-soho .product-card:nth-child(5n+1) .soho-img { height:170px; }
.template-soho .product-card:nth-child(5n+1) .product-name { font-size:18px; }
.template-soho .product-card:nth-child(5n+1) .product-price { font-size:20px; }
.template-soho .soho-img { width:100%; height:130px; background-size:cover; background-position:center; background-color:#3a2415; position:relative; }
.template-soho .soho-overlay { position:absolute; top:8px; left:8px; background:#ff7043; color:#fff; padding:3px 10px; border-radius:8px; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; }
.template-soho .product-info { padding:12px 14px 14px; }
.template-soho .product-name { font-size:14px; font-weight:800; color:#fff; margin-bottom:3px; line-height:1.3; }
.template-soho .product-desc { font-size:10px; color:rgba(255,255,255,.4); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:6px; }
.template-soho .soho-bottom { display:flex; align-items:center; justify-content:space-between; }
.template-soho .product-price { font-size:16px; font-weight:800; color:#ff7043; }
.template-soho .product-price span { font-size:10px; color:rgba(255,112,67,.6); font-weight:500; }
.template-soho .soho-add { width:28px; height:28px; border-radius:50%; background:#ff7043; color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; border:none; cursor:pointer; flex-shrink:0; }
@media(min-width:480px) { .template-soho .products-soho-grid { gap:14px; } .template-soho .soho-img { height:155px; } .template-soho .product-card:nth-child(5n+1) .soho-img { height:200px; } }
@media(min-width:768px) { .template-soho .products-soho-grid { grid-template-columns:repeat(3,1fr); gap:16px; } .template-soho .soho-img { height:180px; } .template-soho .product-card:nth-child(5n+1) { grid-column:span 2; } .template-soho .product-card:nth-child(5n+1) .soho-img { height:240px; } }

/* ================================================================
   COLOR SCHEMES - تخصيص ألوان القوالب
   Override accent/primary color of any template using data-scheme
   Schemes: default | royal | emerald | wine | ocean | amber
   ================================================================ */

/* === ROYAL (deep blue + gold) === */
.menu-template[data-scheme="royal"] .menu-header { background-color:#0d2657 !important; }
.menu-template[data-scheme="royal"] .header-overlay { background:linear-gradient(135deg,rgba(13,38,87,.88),rgba(26,65,148,.92)) !important; }
.menu-template[data-scheme="royal"] .menu-header h1,
.menu-template[data-scheme="royal"] .logo-img { border-color:#f4c95d !important; }
.menu-template[data-scheme="royal"] .menu-header h1 { color:#f4c95d !important; }
.menu-template[data-scheme="royal"] .cat-btn.active { background:#f4c95d !important; color:#0d2657 !important; border-color:#f4c95d !important; }
.menu-template[data-scheme="royal"] .product-price { color:#0d2657 !important; }
.menu-template[data-scheme="royal"] .product-card { border-color:rgba(13,38,87,.15); }

/* === EMERALD (deep green + gold) === */
.menu-template[data-scheme="emerald"] .menu-header { background-color:#0a3d2e !important; }
.menu-template[data-scheme="emerald"] .header-overlay { background:linear-gradient(135deg,rgba(10,61,46,.88),rgba(20,99,79,.92)) !important; }
.menu-template[data-scheme="emerald"] .menu-header h1 { color:#d4af37 !important; }
.menu-template[data-scheme="emerald"] .logo-img { border-color:#d4af37 !important; }
.menu-template[data-scheme="emerald"] .cat-btn.active { background:#0a3d2e !important; color:#d4af37 !important; border-color:#0a3d2e !important; }
.menu-template[data-scheme="emerald"] .product-price { color:#0a3d2e !important; }

/* === WINE (deep red + cream) === */
.menu-template[data-scheme="wine"] .menu-header { background-color:#5b0e2d !important; }
.menu-template[data-scheme="wine"] .header-overlay { background:linear-gradient(135deg,rgba(91,14,45,.88),rgba(141,30,68,.92)) !important; }
.menu-template[data-scheme="wine"] .menu-header h1 { color:#f5e6c8 !important; }
.menu-template[data-scheme="wine"] .logo-img { border-color:#f5e6c8 !important; }
.menu-template[data-scheme="wine"] .cat-btn.active { background:#5b0e2d !important; color:#f5e6c8 !important; border-color:#5b0e2d !important; }
.menu-template[data-scheme="wine"] .product-price { color:#5b0e2d !important; }

/* === OCEAN (teal + light blue) === */
.menu-template[data-scheme="ocean"] .menu-header { background-color:#006064 !important; }
.menu-template[data-scheme="ocean"] .header-overlay { background:linear-gradient(135deg,rgba(0,96,100,.88),rgba(0,151,167,.92)) !important; }
.menu-template[data-scheme="ocean"] .menu-header h1 { color:#80deea !important; }
.menu-template[data-scheme="ocean"] .logo-img { border-color:#80deea !important; }
.menu-template[data-scheme="ocean"] .cat-btn.active { background:#006064 !important; color:#fff !important; border-color:#006064 !important; }
.menu-template[data-scheme="ocean"] .product-price { color:#006064 !important; }

/* === AMBER (warm orange/yellow) === */
.menu-template[data-scheme="amber"] .menu-header { background-color:#bf360c !important; }
.menu-template[data-scheme="amber"] .header-overlay { background:linear-gradient(135deg,rgba(191,54,12,.88),rgba(244,81,30,.92)) !important; }
.menu-template[data-scheme="amber"] .menu-header h1 { color:#ffd180 !important; }
.menu-template[data-scheme="amber"] .logo-img { border-color:#ffd180 !important; }
.menu-template[data-scheme="amber"] .cat-btn.active { background:#bf360c !important; color:#fff !important; border-color:#bf360c !important; }
.menu-template[data-scheme="amber"] .product-price { color:#bf360c !important; }

/* === MIDNIGHT (dark purple + neon) === */
.menu-template[data-scheme="midnight"] .menu-header { background-color:#1a0a3e !important; }
.menu-template[data-scheme="midnight"] .header-overlay { background:linear-gradient(135deg,rgba(26,10,62,.92),rgba(56,30,108,.95)) !important; }
.menu-template[data-scheme="midnight"] .menu-header h1 { color:#bb86fc !important; }
.menu-template[data-scheme="midnight"] .logo-img { border-color:#bb86fc !important; }
.menu-template[data-scheme="midnight"] .cat-btn.active { background:#bb86fc !important; color:#1a0a3e !important; border-color:#bb86fc !important; }
.menu-template[data-scheme="midnight"] .product-price { color:#bb86fc !important; }

/* Dark text color for category nav adjustment under royal/emerald/wine/ocean/amber for light templates */
.menu-template[data-scheme="royal"] .menu-header,
.menu-template[data-scheme="emerald"] .menu-header,
.menu-template[data-scheme="wine"] .menu-header,
.menu-template[data-scheme="ocean"] .menu-header,
.menu-template[data-scheme="amber"] .menu-header,
.menu-template[data-scheme="midnight"] .menu-header { color:#fff !important; }
.menu-template[data-scheme="royal"] .menu-header .header-desc,
.menu-template[data-scheme="emerald"] .menu-header .header-desc,
.menu-template[data-scheme="wine"] .menu-header .header-desc,
.menu-template[data-scheme="ocean"] .menu-header .header-desc,
.menu-template[data-scheme="amber"] .menu-header .header-desc,
.menu-template[data-scheme="midnight"] .menu-header .header-desc { color:rgba(255,255,255,.7) !important; }