/* NexaStore Storefront — CSS v3 — RTL mobile fixes */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* RTL on Android Chrome behaves badly with overflow-x:clip — revert to hidden. To preserve position:sticky for the header (which `overflow-x:hidden` on html would break), we keep the rule on body only and ensure html stays default. */ html { width: 100%; overflow-x: hidden; } body { width: 100%; overflow-x: hidden; -webkit-overflow-scrolling: touch; } /* When the off-canvas mobile menu is open, lock the page underneath so RTL transforms can't push content out of the viewport. */ body.menu-open { overflow: hidden; touch-action: none; } :root { --primary: #E53935; --primary-hover: #C62828; --primary-light: #FFF0F0; --secondary: #1A1A2E; --accent: #FF6F00; --text: #212121; --text-muted: #757575; --text-light: #9E9E9E; --bg: #FFFFFF; --bg-gray: #F7F7F9; --border: #EEEEEE; --border-dark: #E0E0E0; /* Scheme tokens (Site Color Scheme engine feeds these on ) */ --surface: #FFFFFF; --surface-2: #F2F2F5; --heading: #212121; --header-bg: #FFFFFF; --header-text: #212121; --footer-bg: #1A1A2E; --footer-text: #FFFFFF; --footer-text-dim: rgba(255,255,255,0.7); --success: #43A047; --warning: #FB8C00; --info: #4285F4; --radius: 8px; --shadow-sm: 0 1px 3px rgba(0,0,0,0.06); --shadow: 0 2px 12px rgba(0,0,0,0.08); --shadow-lg: 0 8px 30px rgba(0,0,0,0.12); --transition: 0.25s ease; --header-h: 64px; --header-row-h: 64px; } body { font-family: 'Inter', 'Noto Kufi Arabic', -apple-system, sans-serif; background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.6; } body[dir="rtl"] { font-family: 'Noto Kufi Arabic', 'Inter', sans-serif; } a { color: inherit; text-decoration: none; } img { max-width: 100%; height: auto; } button { font-family: inherit; } /* ── Announcement ──────────────────────────────────────── */ .announcement-bar { background: var(--primary); color: #fff; text-align: center; padding: 8px 16px; font-size: 12px; font-weight: 500; } /* Moving (marquee) announcement bar — two copies of the text scroll seamlessly */ .announcement-bar.announcement-moving { overflow: hidden; padding-left: 0; padding-right: 0; white-space: nowrap; } /* The track is built by JS into two identical halves, each wider than the viewport, so a copy always covers the whole bar (never empties). It scrolls exactly one half-width (translateX -50%) and loops seamlessly. Duration is set by JS from the width so the speed is constant and calm regardless of how long the message is. Until JS runs, --ann-duration keeps a sane default. The track is forced to LTR layout (predictable left origin) so the SAME gap-free keyframe works in RTL too; the Arabic text still renders RTL inside each unit, and physical padding-right keeps spacing uniform either way. */ .announcement-moving .announcement-track { direction: ltr; display: inline-flex; flex-wrap: nowrap; white-space: nowrap; will-change: transform; animation: announcementScroll var(--ann-duration, 22s) linear infinite; } .announcement-moving .announcement-track .announcement-unit { flex: 0 0 auto; padding-right: 3rem; } body[dir="rtl"] .announcement-moving .announcement-track .announcement-unit { direction: rtl; } .announcement-moving:hover .announcement-track { animation-play-state: paused; } @keyframes announcementScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* In an RTL bar the track is right-anchored (its right edge sits at the bar's right edge, extending left off-screen). Moving it left would expose the right side, so it must scroll right instead. The track keeps direction:ltr, so its two halves are still identical and the +50% loop is seamless and gap-free. */ body[dir="rtl"] .announcement-moving .announcement-track { animation-name: announcementScrollRtl; } @keyframes announcementScrollRtl { from { transform: translateX(0); } to { transform: translateX(50%); } } @media (prefers-reduced-motion: reduce) { .announcement-moving .announcement-track { animation: none; } } /* ── Header ────────────────────────────────────────────── */ .store-header { background: var(--header-bg, #fff); position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: box-shadow 0.3s; margin: 0; padding: 0; border: none; display: flex; flex-direction: column; } .store-header.scrolled { box-shadow: 0 2px 14px rgba(0,0,0,.08); border-bottom: 1px solid var(--border); } /* Reserve space at top of body so content doesn't slip under fixed header. --header-h is set by JS once the header has rendered (see store.js). */ body { padding-top: var(--header-h, 64px); } /* Header inner — 3-column: left | center | right */ .header-inner { max-width: 1280px; width: 100%; margin: 0 auto; padding: 0 20px; height: var(--header-row-h); display: flex; align-items: center; gap: 16px; } .header-left { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .header-logo { flex-shrink: 0; } .header-logo img { height: 36px; width: auto; } .header-logo .logo-text { font-size: 22px; font-weight: 700; color: var(--header-text, var(--secondary)); white-space: nowrap; } .header-search { display: flex; width: 100%; border: 2px solid var(--border-dark); border-radius: 25px; overflow: hidden; transition: border-color 0.2s; } .header-search:focus-within { border-color: var(--primary); } .header-search input { flex: 1; padding: 9px 18px; border: none; outline: none; font-size: 14px; font-family: inherit; min-width: 0; background: transparent; } .header-search button { padding: 9px 16px; background: var(--primary); color: #fff; border: none; cursor: pointer; border-radius: 0 22px 22px 0; display: flex; align-items: center; } body[dir="rtl"] .header-search button { border-radius: 22px 0 0 22px; } .header-right { display: flex; align-items: center; gap: 16px; flex-shrink: 0; margin-left: auto; } body[dir="rtl"] .header-right { margin-left: 0; margin-right: auto; } .header-nav { display: flex; align-items: center; gap: 20px; } .header-nav a { font-size: 13px; font-weight: 500; color: var(--header-nav-text, var(--header-text, var(--text))); transition: color var(--transition); white-space: nowrap; } .header-nav a:hover, .header-nav a.active { color: var(--primary); } .header-actions { display: flex; align-items: center; gap: 4px; } .header-action-btn { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: var(--header-nav-text, var(--header-text, var(--text))); position: relative; transition: all var(--transition); } .header-action-btn:hover { background: var(--bg-gray); color: var(--primary); } .header-action-btn svg { width: 20px; height: 20px; } .header-action-btn .badge-count { position: absolute; top: 2px; right: 2px; background: var(--primary); color: #fff; width: 16px; height: 16px; border-radius: 50%; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; } body[dir="rtl"] .header-action-btn .badge-count { right: auto; left: 2px; } .header-lang { font-size: 12px; padding: 5px 12px; border: 1px solid var(--border-dark); border-radius: 20px; color: var(--text); font-weight: 500; transition: all var(--transition); white-space: nowrap; } .header-lang:hover { border-color: var(--primary); color: var(--primary); } .mobile-menu-btn { display: none; background: none; border: none; cursor: pointer; color: var(--header-nav-text, var(--header-text, var(--text))); padding: 6px; flex-shrink: 0; } .mobile-menu-btn svg { width: 24px; height: 24px; } .desktop-only { display: flex; } /* ── Mobile Slide Menu (WoodMart style) ────────────────── */ .mobile-menu-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; opacity: 0; visibility: hidden; transition: all 0.3s; } .mobile-menu-overlay.show { opacity: 1; visibility: visible; } .mobile-slide-menu { position: fixed; top: 0; width: 300px; max-width: 85vw; height: 100vh; background: var(--surface, #fff); z-index: 201; overflow-y: auto; box-shadow: var(--shadow-lg); transition: transform 0.3s ease; left: 0; right: auto; transform: translateX(-100%); } body[dir="rtl"] .mobile-slide-menu { left: auto; right: 0; transform: translateX(100%); } .mobile-slide-menu.open { transform: translateX(0) !important; } /* Sidebar search */ .mm-search { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); } .mm-search form { display: flex; flex: 1; border: 1px solid var(--border-dark); border-radius: 20px; overflow: hidden; } .mm-search input { flex: 1; padding: 9px 14px; border: none; outline: none; font-size: 13px; font-family: inherit; min-width: 0; } .mm-search button[type="submit"] { padding: 9px 12px; background: none; border: none; cursor: pointer; color: var(--text-muted); display: flex; align-items: center; } .mm-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 4px; flex-shrink: 0; } /* Tabs */ .mm-tabs { display: flex; border-bottom: 2px solid var(--border); } .mm-tab { flex: 1; padding: 14px 12px; font-size: 12px; font-weight: 700; text-align: center; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; cursor: pointer; font-family: inherit; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.2s; } .mm-tab.active { color: var(--text); border-bottom-color: var(--text); } /* Panels */ .mobile-menu-panel { display: none; } .mobile-menu-panel.active { display: block; } /* Category links */ /* Mobile menu — categories with optional subcategory accordion */ .mm-cat-item { border-bottom: 1px solid var(--bg-gray); } .mm-cat-row { display: flex; align-items: stretch; } .mm-cat-link { flex: 1; display: flex; align-items: center; gap: 10px; padding: 14px 20px; font-size: 14px; font-weight: 500; color: var(--text); text-decoration: none; transition: background 0.15s, color 0.15s; min-width: 0; } .mm-cat-link:hover, .mm-cat-link:focus { background: var(--bg-gray); color: var(--primary); } .mm-cat-icon { font-size: 18px; flex-shrink: 0; } .mm-cat-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .mm-cat-toggle { flex-shrink: 0; width: 48px; background: transparent; border: none; border-inline-start: 1px solid var(--bg-gray); cursor: pointer; color: var(--text-muted); display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; } .mm-cat-toggle:hover { background: var(--bg-gray); color: var(--primary); } .mm-cat-toggle svg { transition: transform 0.25s ease; } .mm-cat-item.expanded .mm-cat-toggle svg { transform: rotate(180deg); color: var(--primary); } .mm-subcat-wrap { background: linear-gradient(to bottom, rgba(0,0,0,0.025), transparent); max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .mm-cat-item.expanded .mm-subcat-wrap { max-height: 600px; } .mm-subcat-link { display: flex; align-items: center; gap: 10px; padding: 10px 20px 10px 38px; font-size: 13px; color: var(--text-muted); text-decoration: none; transition: color 0.15s, background 0.15s; } [dir="rtl"] .mm-subcat-link { padding: 10px 38px 10px 20px; } .mm-subcat-link:hover { color: var(--primary); background: var(--bg-gray); } .mm-subcat-bullet { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.4; flex-shrink: 0; } /* Menu links */ .mm-menu-link { display: block; padding: 14px 20px; font-size: 14px; font-weight: 500; color: var(--text); border-bottom: 1px solid var(--bg-gray); transition: background 0.15s; } .mm-menu-link:hover { background: var(--bg-gray); color: var(--primary); } .mm-divider { height: 1px; background: var(--border); margin: 4px 0; } /* ── Shop Banner ───────────────────────────────────────── */ .shop-banner { background: var(--secondary); color: #fff; text-align: center; padding: 36px 20px 28px; margin-top: -6px; } .shop-banner h1 { font-size: 28px; font-weight: 700; margin-bottom: 6px; } /* Shop categories — native horizontal scroll strip (finger-drag + arrows) */ .shop-cat-carousel { position: relative; margin-top: 22px; padding: 0 56px; /* room for prev/next arrows */ } .shop-cat-strip { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; padding: 2px 0; scrollbar-width: none; -ms-overflow-style: none; cursor: grab; } .shop-cat-strip::-webkit-scrollbar { display: none; } .shop-cat-strip.dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; user-select: none; } .shop-cat-strip a { flex: 0 0 auto; scroll-snap-align: start; max-width: 220px; overflow: hidden; text-overflow: ellipsis; color: rgba(255,255,255,0.85); font-size: 13px; font-weight: 500; padding: 8px 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.04); transition: background var(--transition), color var(--transition), border-color var(--transition); white-space: nowrap; text-decoration: none; line-height: 1.2; } .shop-cat-strip a:hover, .shop-cat-strip a.active { background: var(--surface, #fff); color: var(--secondary, #1a1d2e); border-color: #fff; } .shop-cat-strip a .count { font-size: 11px; opacity: 0.55; margin-inline-start: 4px; } .shop-cat-strip a:hover .count, .shop-cat-strip a.active .count { opacity: 0.5; } /* Prev / Next arrows */ .shop-cat-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; backdrop-filter: blur(6px); z-index: 2; } .shop-cat-arrow:hover { background: #fff; color: var(--secondary, #1a1d2e); border-color: #fff; } .shop-cat-arrow.prev { left: 6px; } .shop-cat-arrow.next { right: 6px; } [dir="rtl"] .shop-cat-arrow.prev { left: auto; right: 6px; } [dir="rtl"] .shop-cat-arrow.next { right: auto; left: 6px; } [dir="rtl"] .shop-cat-arrow svg { transform: scaleX(-1); } .shop-cat-arrow:disabled { opacity: 0; pointer-events: none; } @media (max-width: 768px) { .shop-cat-carousel { padding: 0 44px; margin-top: 16px; } .shop-cat-arrow { width: 32px; height: 32px; } .shop-cat-strip { gap: 6px; } .shop-cat-strip a { font-size: 12.5px; padding: 7px 14px; max-width: 70vw; } } /* Legacy fallback if JS doesn't initialize */ .shop-categories { display: flex; gap: 8px; margin-top: 18px; justify-content: center; flex-wrap: wrap; scrollbar-width: none; } .shop-categories::-webkit-scrollbar { display: none; } .shop-categories a { color: rgba(255,255,255,0.78); font-size: 13px; font-weight: 500; padding: 7px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.04); transition: all var(--transition); white-space: nowrap; flex-shrink: 0; text-decoration: none; } .shop-categories a:hover, .shop-categories a.active { background: var(--surface, #fff); color: var(--secondary, #1a1d2e); border-color: #fff; } .shop-categories a .count { font-size: 11px; opacity: 0.6; margin-inline-start: 3px; } .shop-container { max-width: 1280px; margin: 0 auto; padding: 24px 16px; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; } /* The content column is a grid item; without min-width:0 it defaults to min-width:auto and a wide child (long product name, the sort