/* ============================================================== BELARA CATEGORY CORE ============================================================== ONE category presentation system. Uses ORIGINAL cards from front-page.php. No cloned cards. No duplicate mobile track. ============================================================== */ /* ============================================================== MOBILE <= 767px ============================================================== */ @media (max-width:767px) { body.home.belara2-site #belara2-categories { position:relative !important; overflow:hidden !important; } body.home.belara2-site #belara2-categories > .belara2-container { width:100% !important; max-width:none !important; padding-inline:16px !important; box-sizing:border-box !important; } body.home.belara2-site #belara2-categories .belara2-category-slider-shell { position:relative !important; width:100% !important; max-width:100% !important; margin:0 !important; padding:0 !important; overflow:visible !important; } /* * Original navigation buttons stay hidden * until the canonical JS moves those SAME buttons * into the bottom control bar. */ body.home.belara2-site #belara2-categories .belara2-category-slider-nav { display:none !important; } /* ---------------------------------------------------------- ORIGINAL TRACK ---------------------------------------------------------- */ body.home.belara2-site #belara2-categories .belara2-category-grid, body.home.belara2-site #belara2-categories .belara2-category-slider { display:flex !important; flex-wrap:nowrap !important; align-items:flex-start !important; gap:10px !important; width:100% !important; max-width:100% !important; margin:0 !important; padding:2px 0 4px !important; overflow-x:auto !important; overflow-y:hidden !important; direction:rtl !important; scroll-snap-type:x mandatory !important; scroll-behavior:smooth !important; overscroll-behavior-inline:contain !important; -webkit-overflow-scrolling:touch !important; scrollbar-width:none !important; touch-action:pan-x pan-y !important; } body.home.belara2-site #belara2-categories .belara2-category-grid::-webkit-scrollbar, body.home.belara2-site #belara2-categories .belara2-category-slider::-webkit-scrollbar { display:none !important; width:0 !important; height:0 !important; } /* ---------------------------------------------------------- ORIGINAL CARDS 2 full cards + visible part of third ---------------------------------------------------------- */ body.home.belara2-site #belara2-categories .belara2-category-card { flex: 0 0 42% !important; width:42% !important; max-width:42% !important; min-width:0 !important; margin:0 !important; padding:0 !important; display:block !important; background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; text-align:center !important; text-decoration:none !important; scroll-snap-align:start !important; overflow:visible !important; } body.home.belara2-site #belara2-categories .belara2-category-media { display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; aspect-ratio: 4 / 5 !important; margin:0 !important; padding:6px !important; overflow:hidden !important; box-sizing:border-box !important; border: 1px solid rgba(201,163,91,.27) !important; border-radius:14px !important; background: linear-gradient( 180deg, #FFF9F5 0%, #F8F0EA 100% ) !important; box-shadow: 0 5px 18px rgba(42,18,16,.055) !important; } body.home.belara2-site #belara2-categories .belara2-category-media img { display:block !important; width:100% !important; height:100% !important; max-width:100% !important; margin:0 auto !important; object-fit:contain !important; object-position:center !important; border-radius:10px !important; } body.home.belara2-site #belara2-categories .belara2-category-card strong { display:block !important; margin: 9px 2px 0 !important; color:#2A1210 !important; font-family: "Almarai", sans-serif !important; font-size:13px !important; font-weight:600 !important; line-height:1.55 !important; text-align:center !important; white-space:normal !important; } body.home.belara2-site #belara2-categories .belara2-category-card small { display:none !important; } /* ---------------------------------------------------------- CANONICAL BOTTOM CONTROLS ---------------------------------------------------------- */ body.home.belara2-site #belara2-categories .belara-category-core-controls { width:100% !important; margin: 17px 0 0 !important; padding:0 !important; display:grid !important; gap:9px !important; box-sizing:border-box !important; } body.home.belara2-site #belara2-categories .belara-category-core-row { width:100% !important; display:grid !important; grid-template-columns: 39px minmax(0,1fr) 39px !important; align-items:center !important; gap:10px !important; direction:ltr !important; } /* * These are the ORIGINAL two buttons, * not newly-created navigation buttons. */ body.home.belara2-site #belara2-categories .belara-category-core-controls .belara2-category-slider-nav { position:static !important; inset:auto !important; display:flex !important; visibility:visible !important; opacity:1 !important; align-items:center !important; justify-content:center !important; width:39px !important; height:39px !important; min-width:39px !important; min-height:39px !important; margin:0 !important; padding:0 !important; border: 1px solid rgba(201,163,91,.52) !important; border-radius:50% !important; background:#FFF9F4 !important; color:#2A1210 !important; box-shadow: 0 5px 16px rgba(42,18,16,.075) !important; font-family: Arial, sans-serif !important; font-size:23px !important; font-weight:400 !important; line-height:1 !important; transform:none !important; cursor:pointer !important; z-index:2 !important; } body.home.belara2-site #belara2-categories .belara-category-core-controls .belara2-category-slider-nav:disabled { opacity:.30 !important; cursor:default !important; box-shadow:none !important; } body.home.belara2-site #belara2-categories .belara-category-core-hint { min-width:0 !important; color:#806863 !important; font-family: "Almarai", sans-serif !important; font-size:11.5px !important; font-weight:500 !important; line-height:1.6 !important; text-align:center !important; direction:rtl !important; } body.home.belara2-site #belara2-categories .belara-category-core-dots { min-height:5px !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:6px !important; direction:ltr !important; } body.home.belara2-site #belara2-categories .belara-category-core-dot { display:block !important; width:5px !important; height:5px !important; border-radius:999px !important; background: rgba(42,18,16,.20) !important; transition: width .2s ease, background .2s ease !important; } body.home.belara2-site #belara2-categories .belara-category-core-dot.is-active { width:18px !important; background:#C9A35B !important; } /* * Absolute protection against historical * generated UI if stale browser HTML existed. */ body.home.belara2-site #belara2-categories .belara-mobile-v16-wrapper, body.home.belara2-site #belara2-categories .belara-mobile-v15-track, body.home.belara2-site #belara2-categories .belara-mobile-v15-controls, body.home.belara2-site #belara2-categories .swiper-button-next, body.home.belara2-site #belara2-categories .swiper-button-prev, body.home.belara2-site #belara2-categories .slick-arrow, body.home.belara2-site #belara2-categories .owl-nav { display:none !important; } } /* ============================================================== DESKTOP >= 1024px Preserve the elegant original side arrows. No JavaScript forcing visibility on mobile. ============================================================== */ @media (min-width:1024px) { body.home.belara2-site #belara2-categories .belara2-category-slider-shell { position:relative !important; overflow:visible !important; padding-left:54px !important; padding-right:54px !important; } body.home.belara2-site #belara2-categories .belara2-category-slider-nav { position:absolute !important; top:50% !important; bottom:auto !important; display:flex !important; visibility:visible !important; opacity:1 !important; align-items:center !important; justify-content:center !important; width:42px !important; height:42px !important; min-width:42px !important; margin:0 !important; padding:0 !important; border: 1px solid rgba(201,163,91,.62) !important; border-radius:50% !important; background:#FFF9F4 !important; color:#2A1210 !important; box-shadow: 0 6px 18px rgba(42,18,16,.10) !important; font-family: Arial, sans-serif !important; font-size:24px !important; font-weight:400 !important; line-height:1 !important; transform: translateY(-50%) !important; z-index:999 !important; } body.home.belara2-site #belara2-categories .belara2-category-slider-prev { right:4px !important; left:auto !important; } body.home.belara2-site #belara2-categories .belara2-category-slider-next { left:4px !important; right:auto !important; } } /* BELARA CATEGORY MOBILE FINAL POLISH START */ @media (max-width:767px) { body.home.belara2-site #belara2-categories { padding-bottom: 28px !important; } body.home.belara2-site #belara2-categories .belara-category-core-controls { margin-top: 13px !important; } body.home.belara2-site #belara2-categories + .belara2-section { padding-top: 32px !important; } body.home.belara2-site #belara2-categories .belara-category-core-hint { color:#8A7771 !important; font-size: 11px !important; } } /* BELARA CATEGORY MOBILE FINAL POLISH END */ /* BELARA CATEGORY IMAGE FILL FIX START */ @media (max-width:767px) { body.home.belara2-site #belara2-categories .belara2-category-media { aspect-ratio: 4 / 5 !important; padding: 0 !important; overflow: hidden !important; border-radius: 14px !important; } body.home.belara2-site #belara2-categories .belara2-category-media img { display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover !important; object-position: center center !important; border-radius: 14px !important; } } /* BELARA CATEGORY IMAGE FILL FIX END */