{"id":10,"date":"2026-05-30T21:48:05","date_gmt":"2026-05-30T21:48:05","guid":{"rendered":"https:\/\/crownstoneinternational.website\/?page_id=10"},"modified":"2026-06-18T16:35:59","modified_gmt":"2026-06-18T16:35:59","slug":"crownstone-header","status":"publish","type":"page","link":"https:\/\/crownstoneinternational.website\/ar\/","title":{"rendered":"Crowstone Header"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n \t\t
\n\t\t\t\t\t\n\n\n\n\nCrownstone International \u2013 Header<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:wght@300;400;500;600&family=Noto+Naskh+Arabic:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n<style>\n\/* =========================================================\n CSS CUSTOM PROPERTIES\n========================================================= *\/\n:root {\n --c-bg-header: #F9F9F9;\n --c-bg-ticker: #C25100;\n --c-navy: #0F172A;\n --c-orange: #C25100;\n --c-orange-hover: #E06000;\n --c-whatsapp: #0D6E3C;\n --c-border: rgba(15,23,42,0.10);\n --c-badge: #C25100;\n --c-badge-text: #fff;\n --h-ticker: 46px;\n --h-header: 70px;\n --font-en: 'DM Sans', sans-serif;\n --font-ar: 'Noto Naskh Arabic', serif;\n --radius-sm: 6px;\n --radius-md: 10px;\n --shadow-soft: 0 2px 18px rgba(15,23,42,0.07);\n --transition: 0.22s cubic-bezier(.4,0,.2,1);\n}\n\n\/* =========================================================\n RESET & BASE\n========================================================= *\/\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\nbody { font-family: var(--font-en); background: #fff; }\na { text-decoration: none; color: inherit; }\nbutton { border: none; cursor: pointer; background: none; }\nul { list-style: none; }\n\n\/* =========================================================\n 1. TOP ANNOUNCEMENT TICKER BAR\n========================================================= *\/\n.ticker-bar {\n background: var(--c-bg-ticker);\n height: var(--h-ticker);\n overflow: hidden;\n border-bottom: 1px solid rgba(0,0,0,0.15);\n position: relative;\n}\n\n.ticker-inner {\n display: flex;\n align-items: center;\n height: 100%;\n white-space: nowrap;\n}\n\n.ticker-track {\n display: inline-flex;\n align-items: center;\n animation: ticker-scroll 52s linear infinite;\n gap: 0;\n}\n.ticker-track:hover { animation-play-state: paused; }\n\n@keyframes ticker-scroll {\n 0% { transform: translateX(0); }\n 100% { transform: translateX(-50%); }\n}\n\n.ticker-segment {\n display: inline-flex;\n align-items: center;\n gap: 0;\n padding: 0 28px;\n}\n\n.ticker-en {\n font-family: var(--font-en);\n font-size: 13.5px;\n font-weight: 600;\n color: #FFFFFF;\n letter-spacing: 0.01em;\n}\n\n.ticker-sep {\n display: inline-block;\n width: 1px;\n height: 14px;\n background: rgba(255,255,255,0.35);\n margin: 0 20px;\n vertical-align: middle;\n}\n\n.ticker-ar {\n font-family: var(--font-ar);\n font-size: 14.5px;\n font-weight: 600;\n color: #FFFFFF;\n direction: rtl;\n letter-spacing: 0;\n}\n\n\/* =========================================================\n 2. MAIN HEADER BAR (Same simplified layout on ALL screen sizes)\n Logo on left, Cart + Hamburger on right. Everything else lives\n inside the slide-out drawer.\n========================================================= *\/\n.site-header {\n background: var(--c-bg-header);\n height: var(--h-header);\n border-bottom: 1px solid var(--c-border);\n box-shadow: var(--shadow-soft);\n position: sticky;\n top: 0;\n z-index: 900;\n width: 100%;\n}\n\n.header-inner {\n display: flex;\n align-items: center;\n justify-content: space-between;\n height: 100%;\n padding: 0 24px;\n max-width: 1400px;\n margin: 0 auto;\n}\n\n\/* Logo *\/\n.header-logo {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n}\n.header-logo img {\n height: 50px;\n max-height: 56px;\n width: auto;\n display: block;\n object-fit: contain;\n}\n\n\/* Right group: cart + hamburger *\/\n.header-right-group {\n display: flex;\n align-items: center;\n gap: 14px;\n}\n\n\/* Cart *\/\n.cart-btn {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 38px;\n height: 38px;\n border-radius: var(--radius-sm);\n transition: background var(--transition);\n color: var(--c-navy);\n}\n.cart-btn:hover { background: rgba(15,23,42,0.06); }\n.cart-btn svg { width: 22px; height: 22px; }\n.cart-badge {\n position: absolute;\n top: 0px;\n right: 0px;\n background: var(--c-badge);\n color: var(--c-badge-text);\n font-family: var(--font-en);\n font-size: 10px;\n font-weight: 700;\n min-width: 17px;\n height: 17px;\n border-radius: 9px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 4px;\n line-height: 1;\n}\n\n\/* Hamburger *\/\n.hamburger {\n width: 38px;\n height: 38px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: 5px;\n border-radius: var(--radius-sm);\n cursor: pointer;\n transition: background var(--transition);\n}\n.hamburger:hover { background: rgba(15,23,42,0.06); }\n.ham-line {\n width: 22px;\n height: 2px;\n background: var(--c-navy);\n border-radius: 2px;\n transition: transform var(--transition), opacity var(--transition);\n transform-origin: center;\n}\n.hamburger.open .ham-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }\n.hamburger.open .ham-line:nth-child(2) { opacity: 0; transform: scaleX(0); }\n.hamburger.open .ham-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }\n\n\/* =========================================================\n 3. DRAWER OVERLAY + PANEL (used on ALL screen sizes)\n========================================================= *\/\n.drawer-overlay {\n display: none;\n position: fixed;\n inset: 0;\n background: rgba(15,23,42,0.40);\n z-index: 990;\n opacity: 0;\n transition: opacity var(--transition);\n}\n.drawer-overlay.active {\n display: block;\n opacity: 1;\n}\n\n.drawer-panel {\n position: fixed;\n top: 0;\n right: 0;\n width: min(92vw, 400px);\n height: 100dvh;\n background: #fff;\n z-index: 995;\n display: flex;\n flex-direction: column;\n transform: translateX(100%);\n transition: transform 0.30s cubic-bezier(.4,0,.2,1);\n box-shadow: -4px 0 32px rgba(15,23,42,0.13);\n overflow-y: auto;\n}\n.drawer-panel.open { transform: translateX(0); }\n\n.drawer-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 18px;\n border-bottom: 1px solid var(--c-border);\n background: var(--c-bg-ticker);\n flex-shrink: 0;\n}\n.drawer-logo img { height: 38px; object-fit: contain; filter: brightness(0) invert(1); }\n.drawer-close {\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n cursor: pointer;\n transition: background var(--transition);\n color: #fff;\n}\n.drawer-close:hover { background: rgba(255,255,255,0.18); }\n\n.drawer-body {\n flex: 1;\n padding: 20px;\n display: flex;\n flex-direction: column;\n gap: 22px;\n overflow-y: auto;\n}\n\n\/* Drawer Search *\/\n.drawer-search { position: relative; }\n.drawer-search input {\n width: 100%;\n height: 42px;\n padding: 0 42px 0 16px;\n border: 1.5px solid var(--c-border);\n border-radius: 22px;\n background: #fff;\n font-family: var(--font-en);\n font-size: 13.5px;\n color: var(--c-navy);\n outline: none;\n transition: border-color var(--transition);\n}\n.drawer-search input:focus { border-color: var(--c-orange); }\n.drawer-search input::placeholder { color: rgba(15,23,42,0.38); }\n.drawer-search .search-icon {\n position: absolute;\n right: 14px;\n top: 50%;\n transform: translateY(-50%);\n color: var(--c-navy);\n opacity: 0.4;\n pointer-events: none;\n display: flex;\n}\n\n\/* Section titles *\/\n.drawer-section-title {\n font-family: var(--font-en);\n font-size: 10.5px;\n font-weight: 700;\n color: var(--c-navy);\n opacity: 0.42;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n margin-bottom: -10px;\n}\n\n\/* Drawer Nav (Main categories) *\/\n.drawer-nav { display: flex; flex-direction: column; gap: 2px; }\n.drawer-nav a {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px 14px;\n border-radius: var(--radius-md);\n transition: background var(--transition);\n}\n.drawer-nav a:hover { background: rgba(194,81,0,0.06); }\n.drawer-nav .nav-en { font-size: 14.5px; font-weight: 600; color: var(--c-navy); }\n.drawer-nav .nav-ar { font-size: 14.5px; color: var(--c-orange); }\n.drawer-nav .nav-sep { color: rgba(15,23,42,0.22); font-size: 11px; }\n\n\/* Drawer utility rows (Account\/Checkout) *\/\n.drawer-utils { display: flex; flex-direction: column; gap: 4px; }\n.drawer-util-row {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 11px 14px;\n border-radius: var(--radius-md);\n transition: background var(--transition);\n}\n.drawer-util-row:hover { background: rgba(15,23,42,0.04); }\n.drawer-util-icon { color: var(--c-navy); opacity: 0.55; width: 18px; height: 18px; flex-shrink: 0; }\n.d-util-en { font-family: var(--font-en); font-size: 13.5px; font-weight: 500; color: var(--c-navy); }\n.d-util-sep { color: rgba(15,23,42,0.22); font-size: 11px; }\n.d-util-ar { font-family: var(--font-ar); font-size: 13.5px; color: var(--c-orange); }\n\n\/* Drawer language row *\/\n.drawer-lang-row {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 11px 14px;\n border-radius: var(--radius-md);\n transition: background var(--transition);\n cursor: pointer;\n}\n.drawer-lang-row:hover { background: rgba(15,23,42,0.04); }\n.drawer-lang-row .lang-en-label { font-family: var(--font-en); font-size: 13.5px; font-weight: 700; color: var(--c-navy); }\n.drawer-lang-row .lang-vline { width: 1px; height: 14px; background: var(--c-border); margin: 0 4px; }\n.drawer-lang-row .lang-ar-label { font-family: var(--font-ar); font-size: 14px; font-weight: 700; color: var(--c-orange); }\n\n\/* Drawer currency *\/\n.drawer-currency-wrap { position: relative; }\n.drawer-currency-wrap select {\n width: 100%;\n appearance: none;\n -webkit-appearance: none;\n border: 1.5px solid var(--c-border);\n border-radius: var(--radius-md);\n background: #fff;\n padding: 12px 38px 12px 16px;\n font-family: var(--font-en);\n font-size: 13.5px;\n font-weight: 500;\n color: var(--c-navy);\n cursor: pointer;\n outline: none;\n transition: border-color var(--transition);\n}\n.drawer-currency-wrap select:focus { border-color: var(--c-orange); }\n.drawer-currency-wrap::after {\n content: '';\n position: absolute;\n right: 16px;\n top: 50%;\n transform: translateY(-50%);\n width: 0; height: 0;\n border-left: 4px solid transparent;\n border-right: 4px solid transparent;\n border-top: 5px solid var(--c-navy);\n pointer-events: none;\n}\n\n\/* Drawer footer WhatsApp *\/\n.drawer-footer {\n flex-shrink: 0;\n padding: 18px 20px;\n border-top: 1px solid var(--c-border);\n background: #fff;\n}\n.wa-btn-wide {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 9px;\n width: 100%;\n padding: 14px 16px;\n background: var(--c-whatsapp);\n border: none;\n border-radius: 28px;\n cursor: pointer;\n transition: background var(--transition), transform var(--transition);\n}\n.wa-btn-wide:hover {\n background: #094f2b;\n}\n.wa-btn-wide .wa-icon { width: 20px; height: 20px; color: #fff; flex-shrink: 0; }\n.wa-btn-wide .wa-text-en { font-size: 14.5px; font-weight: 700; color: #fff; font-family: var(--font-en); }\n.wa-btn-wide .wa-sep { color: rgba(255,255,255,0.55); font-size: 12px; }\n.wa-btn-wide .wa-text-ar { font-size: 14.5px; color: #fff; font-family: var(--font-ar); }\n\n\/* =========================================================\n 4. RESPONSIVE TWEAKS (logo\/header sizing only \u2014 layout\n itself stays identical across all breakpoints)\n========================================================= *\/\n@media (max-width: 480px) {\n .header-logo img { height: 42px; }\n .header-inner { padding: 0 16px; }\n .drawer-panel { width: 92vw; }\n}\n<\/style>\n<\/head>\n<body>\n\n<!-- =============================================\n TOP ANNOUNCEMENT TICKER BAR\n============================================== -->\n<div class=\"ticker-bar\" aria-label=\"Announcements\">\n <div class=\"ticker-inner\">\n <div class=\"ticker-track\" id=\"tickerTrack\">\n <!-- Segment A (English) -->\n <div class=\"ticker-segment\">\n <span class=\"ticker-en\">MINIMUM 50% TO 75% OFF \u2014 GRAND OPENING SALE<\/span>\n <span class=\"ticker-sep\"><\/span>\n <span class=\"ticker-en\">Free Gift on Every Order<\/span>\n <span class=\"ticker-sep\"><\/span>\n <span class=\"ticker-en\">Free Delivery Across Oman<\/span>\n <span class=\"ticker-sep\"><\/span>\n <span class=\"ticker-en\">Minimum Order: 20 OMR<\/span>\n <span class=\"ticker-sep\"><\/span>\n <span class=\"ticker-ar\">\u062e\u0635\u0645 \u0645\u0646 50% \u0625\u0644\u0649 75% \u2014 \u0639\u0631\u0636 \u0627\u0644\u0627\u0641\u062a\u062a\u0627\u062d \u0627\u0644\u0643\u0628\u064a\u0631<\/span>\n <span class=\"ticker-sep\"><\/span>\n <span class=\"ticker-ar\">\u0647\u062f\u064a\u0629 \u0645\u062c\u0627\u0646\u064a\u0629 \u0645\u0639 \u0643\u0644 \u0637\u0644\u0628<\/span>\n <span class=\"ticker-sep\"><\/span>\n <span class=\"ticker-ar\">\u062a\u0648\u0635\u064a\u0644 \u0645\u062c\u0627\u0646\u064a \u0644\u062c\u0645\u064a\u0639 \u0645\u0646\u0627\u0637\u0642 \u0639\u0645\u0627\u0646<\/span>\n <span class=\"ticker-sep\"><\/span>\n <span class=\"ticker-ar\">\u0627\u0644\u062d\u062f \u0627\u0644\u0623\u062f\u0646\u0649 \u0644\u0644\u0637\u0644\u0628: \u0662\u0660 \u0631\u064a\u0627\u0644 \u0639\u0645\u0627\u0646\u064a<\/span>\n <span class=\"ticker-sep\"><\/span>\n <\/div>\n <!-- Segment B (duplicate for seamless loop) -->\n <div class=\"ticker-segment\" aria-hidden=\"true\">\n <span class=\"ticker-en\">MINIMUM 50% TO 75% OFF \u2014 GRAND OPENING SALE<\/span>\n <span class=\"ticker-sep\"><\/span>\n <span class=\"ticker-en\">Free Gift on Every Order<\/span>\n <span class=\"ticker-sep\"><\/span>\n <span class=\"ticker-en\">Free Delivery Across Oman<\/span>\n <span class=\"ticker-sep\"><\/span>\n <span class=\"ticker-en\">Minimum Order: 20 OMR<\/span>\n <span class=\"ticker-sep\"><\/span>\n <span class=\"ticker-ar\">\u062e\u0635\u0645 \u0645\u0646 50% \u0625\u0644\u0649 75% \u2014 \u0639\u0631\u0636 \u0627\u0644\u0627\u0641\u062a\u062a\u0627\u062d \u0627\u0644\u0643\u0628\u064a\u0631<\/span>\n <span class=\"ticker-sep\"><\/span>\n <span class=\"ticker-ar\">\u0647\u062f\u064a\u0629 \u0645\u062c\u0627\u0646\u064a\u0629 \u0645\u0639 \u0643\u0644 \u0637\u0644\u0628<\/span>\n <span class=\"ticker-sep\"><\/span>\n <span class=\"ticker-ar\">\u062a\u0648\u0635\u064a\u0644 \u0645\u062c\u0627\u0646\u064a \u0644\u062c\u0645\u064a\u0639 \u0645\u0646\u0627\u0637\u0642 \u0639\u0645\u0627\u0646<\/span>\n <span class=\"ticker-sep\"><\/span>\n <span class=\"ticker-ar\">\u0627\u0644\u062d\u062f \u0627\u0644\u0623\u062f\u0646\u0649 \u0644\u0644\u0637\u0644\u0628: \u0662\u0660 \u0631\u064a\u0627\u0644 \u0639\u0645\u0627\u0646\u064a<\/span>\n <span class=\"ticker-sep\"><\/span>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<!-- =============================================\n MAIN HEADER BAR \u2014 same on desktop and mobile\n============================================== -->\n<header class=\"site-header\" role=\"banner\">\n <div class=\"header-inner\">\n\n <!-- LEFT: Logo -->\n <div class=\"header-logo\">\n <a href=\"\/\" aria-label=\"Crownstone International Home\">\n <img decoding=\"async\" src=\"https:\/\/crownstoneinternational.website\/wp-content\/uploads\/2026\/05\/1000202148.png\"\n alt=\"Crownstone International\"\n onerror=\"this.style.display='none'; this.nextElementSibling.style.display='flex';\">\n <span style=\"display:none; font-family:'DM Sans',sans-serif; font-size:14px; font-weight:700; color:#0F172A; letter-spacing:-0.01em;\">\n Crownstone <span style=\"color:#C25100;\">International<\/span>\n <\/span>\n <\/a>\n <\/div>\n\n <!-- RIGHT: Cart + Hamburger -->\n <div class=\"header-right-group\">\n <a href=\"\/cart\/\" class=\"cart-btn\" aria-label=\"Shopping cart, 3 items\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <circle cx=\"9\" cy=\"21\" r=\"1\"\/><circle cx=\"20\" cy=\"21\" r=\"1\"\/>\n <path d=\"M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6\"\/>\n <\/svg>\n <span class=\"cart-badge\" id=\"cartCount\">3<\/span>\n <\/a>\n\n <button class=\"hamburger\" id=\"hamburgerBtn\" aria-label=\"Open menu\" aria-expanded=\"false\">\n <span class=\"ham-line\"><\/span>\n <span class=\"ham-line\"><\/span>\n <span class=\"ham-line\"><\/span>\n <\/button>\n <\/div>\n\n <\/div>\n<\/header>\n\n<!-- Drawer Overlay -->\n<div class=\"drawer-overlay\" id=\"drawerOverlay\" aria-hidden=\"true\"><\/div>\n\n<!-- Drawer Panel -->\n<aside class=\"drawer-panel\" id=\"drawerPanel\" aria-label=\"Site navigation\" aria-hidden=\"true\">\n\n <!-- Drawer Header -->\n <div class=\"drawer-header\">\n <div class=\"drawer-logo\">\n <img decoding=\"async\" src=\"https:\/\/crownstoneinternational.website\/wp-content\/uploads\/2026\/05\/1000202148.png\"\n alt=\"Crownstone International\"\n onerror=\"this.style.display='none';\">\n <\/div>\n <button class=\"drawer-close\" id=\"drawerClose\" aria-label=\"Close menu\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M18 6 6 18M6 6l12 12\"\/>\n <\/svg>\n <\/button>\n <\/div>\n\n <!-- Drawer Body -->\n <div class=\"drawer-body\">\n\n <!-- Search -->\n <div class=\"drawer-search\">\n <input type=\"search\" placeholder=\"Search products... \/ \u0627\u0628\u062d\u062b \u0639\u0646 \u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a...\" aria-label=\"Search products\">\n <span class=\"search-icon\" aria-hidden=\"true\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"\/><path d=\"m21 21-4.35-4.35\"\/>\n <\/svg>\n <\/span>\n <\/div>\n\n <!-- Navigation -->\n <div>\n <p class=\"drawer-section-title\">Categories<\/p>\n <nav class=\"drawer-nav\" aria-label=\"Main navigation\">\n <a href=\"\/\"><span class=\"nav-en\">Home<\/span><span class=\"nav-sep\">\/<\/span><span class=\"nav-ar\">\u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629<\/span><\/a>\n <a href=\"\/product-category\/kids-wear\/\"><span class=\"nav-en\">Kids Wear<\/span><span class=\"nav-sep\">\/<\/span><span class=\"nav-ar\">\u0645\u0644\u0627\u0628\u0633 \u0623\u0637\u0641\u0627\u0644<\/span><\/a>\n <a href=\"\/product-category\/mens-wear\/\"><span class=\"nav-en\">Men's Wear<\/span><span class=\"nav-sep\">\/<\/span><span class=\"nav-ar\">\u0645\u0644\u0627\u0628\u0633 \u0631\u062c\u0627\u0644\u064a\u0629<\/span><\/a>\n <a href=\"\/product-category\/gym-wear\/\"><span class=\"nav-en\">Gym Wear<\/span><span class=\"nav-sep\">\/<\/span><span class=\"nav-ar\">\u0645\u0644\u0627\u0628\u0633 \u0631\u064a\u0627\u0636\u064a\u0629<\/span><\/a>\n <a href=\"\/product-category\/womens-wear\/\"><span class=\"nav-en\">Women's Wear<\/span><span class=\"nav-sep\">\/<\/span><span class=\"nav-ar\">\u0645\u0644\u0627\u0628\u0633 \u0646\u0633\u0627\u0626\u064a\u0629<\/span><\/a>\n <a href=\"\/product-category\/newborn-0-1y\/\"><span class=\"nav-en\">New Born (0-1Y)<\/span><span class=\"nav-sep\">\/<\/span><span class=\"nav-ar\">\u0645\u0644\u0627\u0628\u0633 \u0645\u0648\u0627\u0644\u064a\u062f<\/span><\/a>\n <a href=\"\/product-category\/teens-wear\/\"><span class=\"nav-en\">Teens Wear<\/span><span class=\"nav-sep\">\/<\/span><span class=\"nav-ar\">\u0645\u0644\u0627\u0628\u0633 \u0645\u0631\u0627\u0647\u0642\u064a\u0646<\/span><\/a>\n <\/nav>\n <\/div>\n\n <!-- Account & Checkout -->\n <div>\n <p class=\"drawer-section-title\">Account<\/p>\n <div class=\"drawer-utils\">\n <a href=\"\/my-account\/\" class=\"drawer-util-row\">\n <svg class=\"drawer-util-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"\/>\n <circle cx=\"12\" cy=\"7\" r=\"4\"\/>\n <\/svg>\n <span class=\"d-util-en\">My Account<\/span>\n <span class=\"d-util-sep\">\/<\/span>\n <span class=\"d-util-ar\">\u062d\u0633\u0627\u0628\u064a<\/span>\n <\/a>\n <a href=\"\/checkout\/\" class=\"drawer-util-row\">\n <svg class=\"drawer-util-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <rect width=\"20\" height=\"14\" x=\"2\" y=\"5\" rx=\"2\"\/>\n <path d=\"M2 10h20\"\/>\n <\/svg>\n <span class=\"d-util-en\">Checkout<\/span>\n <span class=\"d-util-sep\">\/<\/span>\n <span class=\"d-util-ar\">\u0625\u062a\u0645\u0627\u0645 \u0627\u0644\u0637\u0644\u0628<\/span>\n <\/a>\n <\/div>\n <\/div>\n\n <!-- Language & Currency -->\n <div>\n <p class=\"drawer-section-title\">Language & Currency<\/p>\n <div class=\"drawer-utils\">\n <div class=\"drawer-lang-row\" onclick=\"alert('Language toggle')\">\n <svg class=\"drawer-util-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\n <path d=\"M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z\"\/>\n <\/svg>\n <span class=\"lang-en-label\">EN<\/span>\n <span class=\"lang-vline\" aria-hidden=\"true\"><\/span>\n <span class=\"lang-ar-label\">\u0639\u0631\u0628\u064a<\/span>\n <\/div>\n <div style=\"padding:4px 14px;\">\n <div class=\"drawer-currency-wrap\">\n <select aria-label=\"Select currency\">\n <option value=\"OMR\">OMR \u2013 Omani Rial \/ \u0631\u064a\u0627\u0644 \u0639\u0645\u0627\u0646\u064a<\/option>\n <option value=\"SAR\">SAR \u2013 Saudi Riyal \/ \u0631\u064a\u0627\u0644 \u0633\u0639\u0648\u062f\u064a<\/option>\n <option value=\"AED\">AED \u2013 UAE Dirham \/ \u062f\u0631\u0647\u0645 \u0625\u0645\u0627\u0631\u0627\u062a\u064a<\/option>\n <option value=\"KWD\">KWD \u2013 Kuwaiti Dinar \/ \u062f\u064a\u0646\u0627\u0631 \u0643\u0648\u064a\u062a\u064a<\/option>\n <option value=\"BHD\">BHD \u2013 Bahraini Dinar \/ \u062f\u064a\u0646\u0627\u0631 \u0628\u062d\u0631\u064a\u0646\u064a<\/option>\n <option value=\"QAR\">QAR \u2013 Qatari Riyal \/ \u0631\u064a\u0627\u0644 \u0642\u0637\u0631\u064a<\/option>\n <\/select>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div><!-- \/.drawer-body -->\n\n <!-- Drawer Footer: WhatsApp -->\n <div class=\"drawer-footer\">\n <a href=\"https:\/\/wa.me\/96891234567\" class=\"wa-btn-wide\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"WhatsApp Chat\">\n <svg class=\"wa-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n <path d=\"M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z\"\/>\n <\/svg>\n <span class=\"wa-text-en\">WhatsApp Chat<\/span>\n <span class=\"wa-sep\">\/<\/span>\n <span class=\"wa-text-ar\">\u062a\u0648\u0627\u0635\u0644 \u0639\u0628\u0631 \u0627\u0644\u0648\u0627\u062a\u0633\u0627\u0628<\/span>\n <\/a>\n <\/div>\n\n<\/aside>\n\n<!-- =============================================\n JAVASCRIPT \u2013 DRAWER TOGGLE\n============================================== -->\n<script>\n(function() {\n var btn = document.getElementById('hamburgerBtn');\n var overlay = document.getElementById('drawerOverlay');\n var panel = document.getElementById('drawerPanel');\n var closeBtn = document.getElementById('drawerClose');\n\n function openDrawer() {\n panel.classList.add('open');\n overlay.classList.add('active');\n btn.classList.add('open');\n btn.setAttribute('aria-expanded', 'true');\n panel.setAttribute('aria-hidden', 'false');\n overlay.setAttribute('aria-hidden', 'false');\n document.body.style.overflow = 'hidden';\n }\n\n function closeDrawer() {\n panel.classList.remove('open');\n overlay.classList.remove('active');\n btn.classList.remove('open');\n btn.setAttribute('aria-expanded', 'false');\n panel.setAttribute('aria-hidden', 'true');\n overlay.setAttribute('aria-hidden', 'true');\n document.body.style.overflow = '';\n }\n\n btn.addEventListener('click', function() {\n panel.classList.contains('open') ? closeDrawer() : openDrawer();\n });\n\n closeBtn.addEventListener('click', closeDrawer);\n overlay.addEventListener('click', closeDrawer);\n\n document.addEventListener('keydown', function(e) {\n if (e.key === 'Escape' && panel.classList.contains('open')) closeDrawer();\n });\n})();\n<\/script>\n\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-cd035e2 e-con e-atomic-element e-flexbox-base e-da4f6ca \" data-id=\"cd035e2\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"cd035e2\">\n \t\t<div class=\"elementor-element elementor-element-d3718b7 elementor-widget elementor-widget-html\" data-id=\"d3718b7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =============================================\n CROWNSTONE INTERNATIONAL \u2014 BANNER SLIDER\n Elementor HTML Widget mein paste karein\n ============================================= -->\n\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,400&family=Poppins:wght@300;400;500;600;700&display=swap');\n\n* { box-sizing: border-box; margin: 0; padding: 0; }\n\n#cs-slider-wrap {\n width: 100vw;\n position: relative;\n left: 50%;\n transform: translateX(-50%);\n overflow: hidden;\n background: #f5a623;\n}\n\n.cs-slider {\n display: flex;\n transition: transform 0.7s cubic-bezier(0.77, 0, 0.175, 1);\n will-change: transform;\n}\n\n.cs-slide {\n min-width: 100%;\n width: 100%;\n position: relative;\n height: 520px;\n overflow: hidden;\n display: flex;\n align-items: center;\n}\n\n@media (max-width: 768px) {\n .cs-slide { height: 420px; }\n}\n@media (max-width: 480px) {\n .cs-slide { height: 360px; }\n}\n\n\/* ---- Background Image ---- *\/\n.cs-slide-bg {\n position: absolute;\n inset: 0;\n background-size: cover;\n background-position: center center;\n background-repeat: no-repeat;\n z-index: 0;\n}\n\n\/* ---- Overlay for text readability ---- *\/\n.cs-slide-overlay {\n position: absolute;\n inset: 0;\n z-index: 1;\n}\n\n\/* ---- Text Content ---- *\/\n.cs-slide-content {\n position: relative;\n z-index: 2;\n padding: 40px 60px;\n max-width: 55%;\n}\n\n@media (max-width: 768px) {\n .cs-slide-content {\n padding: 30px 24px;\n max-width: 70%;\n }\n}\n@media (max-width: 480px) {\n .cs-slide-content {\n padding: 20px 18px;\n max-width: 85%;\n }\n}\n\n\/* ============ SLIDE 1 \u2014 FAMILY ============ *\/\n.slide-family .cs-slide-overlay {\n background: linear-gradient(to right, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0) 70%);\n}\n\n.slide-family .cs-tag {\n font-family: 'Playfair Display', serif;\n font-style: italic;\n font-size: 28px;\n color: #fff;\n display: block;\n margin-bottom: 2px;\n text-shadow: 1px 2px 6px rgba(0,0,0,0.25);\n}\n\n.slide-family .cs-main-title {\n font-family: 'Playfair Display', serif;\n font-weight: 900;\n font-size: 72px;\n color: #1a3c2e;\n line-height: 1;\n display: block;\n text-shadow: 2px 2px 0 rgba(255,255,255,0.15);\n}\n\n.slide-family .cs-discount-box {\n display: inline-flex;\n align-items: center;\n background: #1a3c2e;\n border-radius: 6px;\n padding: 8px 18px;\n margin: 12px 0 16px;\n position: relative;\n}\n\n.slide-family .cs-discount-box::before {\n content: 'MINIMUM';\n position: absolute;\n top: -18px;\n left: 50%;\n transform: translateX(-50%);\n font-family: 'Poppins', sans-serif;\n font-size: 11px;\n font-weight: 600;\n letter-spacing: 3px;\n color: #1a3c2e;\n white-space: nowrap;\n}\n\n.slide-family .cs-discount-text {\n font-family: 'Poppins', sans-serif;\n font-weight: 700;\n font-size: 36px;\n color: #f5a623;\n line-height: 1;\n}\n\n.slide-family .cs-discount-to {\n font-family: 'Poppins', sans-serif;\n font-weight: 600;\n font-size: 13px;\n color: #fff;\n background: #fff2;\n border-radius: 50%;\n width: 28px; height: 28px;\n display: flex; align-items: center; justify-content: center;\n margin: 0 6px;\n}\n\n.slide-family .cs-discount-off {\n font-family: 'Poppins', sans-serif;\n font-size: 11px;\n color: #fff;\n letter-spacing: 2px;\n position: absolute;\n bottom: -16px;\n left: 50%;\n transform: translateX(-50%);\n white-space: nowrap;\n}\n\n.cs-cat-list {\n list-style: none;\n margin-top: 22px;\n display: flex;\n flex-direction: column;\n gap: 6px;\n}\n\n.cs-cat-list li a {\n font-family: 'Poppins', sans-serif;\n font-size: 15px;\n font-weight: 500;\n color: #1a3c2e;\n text-decoration: none;\n display: flex;\n align-items: center;\n gap: 10px;\n transition: color 0.2s;\n}\n\n.cs-cat-list li a:hover { color: #fff; }\n\n.cs-cat-list li a .cs-cat-icon {\n width: 32px; height: 32px;\n background: #1a3c2e;\n border-radius: 50%;\n display: flex; align-items: center; justify-content: center;\n font-size: 14px;\n flex-shrink: 0;\n}\n\n.cs-cat-list li a .cs-cat-dot {\n flex: 1;\n height: 1px;\n border-bottom: 1px dashed #1a3c2e88;\n}\n\n@media (max-width: 480px) {\n .slide-family .cs-main-title { font-size: 48px; }\n .slide-family .cs-tag { font-size: 20px; }\n .slide-family .cs-discount-text { font-size: 26px; }\n .cs-cat-list li a { font-size: 12px; }\n .cs-cat-list { gap: 4px; margin-top: 14px; }\n}\n\n\/* ============ SLIDE 2 \u2014 WOMEN'S ============ *\/\n.slide-women .cs-slide-overlay {\n background: linear-gradient(to right, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 65%);\n}\n\n.slide-women .cs-category-label {\n font-family: 'Poppins', sans-serif;\n font-weight: 700;\n font-size: 13px;\n letter-spacing: 4px;\n color: #1a3c2e;\n text-transform: uppercase;\n margin-bottom: 8px;\n display: block;\n}\n\n.slide-women .cs-women-title {\n font-family: 'Playfair Display', serif;\n font-weight: 900;\n font-size: 52px;\n color: #fff;\n line-height: 1.05;\n text-shadow: 2px 3px 10px rgba(0,0,0,0.2);\n margin-bottom: 4px;\n}\n\n.slide-women .cs-women-title span {\n font-style: italic;\n font-weight: 400;\n font-size: 42px;\n color: #1a3c2e;\n}\n\n.slide-women .cs-discount-badge {\n display: inline-block;\n background: #1a3c2e;\n color: #f5a623;\n font-family: 'Poppins', sans-serif;\n font-weight: 800;\n font-size: 28px;\n padding: 6px 20px;\n border-radius: 6px;\n margin: 14px 0 6px;\n}\n\n.slide-women .cs-subtitle {\n font-family: 'Poppins', sans-serif;\n font-size: 13px;\n font-weight: 600;\n color: #1a3c2e;\n letter-spacing: 2px;\n text-transform: uppercase;\n margin-bottom: 20px;\n}\n\n.slide-women .cs-features {\n display: flex;\n gap: 16px;\n flex-wrap: wrap;\n margin-bottom: 22px;\n}\n\n.slide-women .cs-feat {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 4px;\n font-family: 'Poppins', sans-serif;\n font-size: 11px;\n font-weight: 500;\n color: #1a3c2e;\n text-align: center;\n max-width: 70px;\n}\n\n.slide-women .cs-feat-icon {\n width: 44px; height: 44px;\n border: 2px solid #1a3c2e;\n border-radius: 50%;\n display: flex; align-items: center; justify-content: center;\n font-size: 18px;\n background: rgba(255,255,255,0.3);\n}\n\n.cs-shop-btn {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n background: #1a3c2e;\n color: #fff;\n font-family: 'Poppins', sans-serif;\n font-weight: 600;\n font-size: 15px;\n padding: 14px 28px;\n border-radius: 40px;\n text-decoration: none;\n transition: background 0.25s, transform 0.2s;\n border: none;\n cursor: pointer;\n}\n\n.cs-shop-btn:hover {\n background: #0f2519;\n transform: translateY(-2px);\n}\n\n.cs-shop-btn svg {\n width: 18px; height: 18px;\n}\n\n@media (max-width: 480px) {\n .slide-women .cs-women-title { font-size: 34px; }\n .slide-women .cs-women-title span { font-size: 28px; }\n .slide-women .cs-discount-badge { font-size: 20px; }\n .slide-women .cs-features { gap: 10px; }\n .slide-women .cs-feat-icon { width: 36px; height: 36px; font-size: 14px; }\n .slide-women .cs-feat { font-size: 10px; max-width: 60px; }\n}\n\n\/* ============ ARROWS ============ *\/\n.cs-arrow {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n z-index: 10;\n width: 44px; height: 44px;\n background: rgba(26,60,46,0.75);\n border: none;\n border-radius: 50%;\n cursor: pointer;\n display: flex; align-items: center; justify-content: center;\n transition: background 0.2s;\n}\n.cs-arrow:hover { background: #1a3c2e; }\n.cs-arrow svg { width: 20px; height: 20px; fill: #fff; }\n.cs-arrow-prev { left: 16px; }\n.cs-arrow-next { right: 16px; }\n\n@media (max-width: 480px) {\n .cs-arrow { width: 34px; height: 34px; }\n .cs-arrow svg { width: 16px; height: 16px; }\n}\n\n\/* ============ DOTS ============ *\/\n.cs-dots {\n position: absolute;\n bottom: 16px;\n left: 50%;\n transform: translateX(-50%);\n z-index: 10;\n display: flex;\n gap: 8px;\n}\n\n.cs-dot {\n width: 10px; height: 10px;\n border-radius: 50%;\n background: rgba(255,255,255,0.5);\n border: none;\n cursor: pointer;\n transition: background 0.3s, transform 0.3s;\n padding: 0;\n}\n\n.cs-dot.active {\n background: #1a3c2e;\n transform: scale(1.3);\n}\n<\/style>\n\n<!-- SLIDER WRAPPER -->\n<div id=\"cs-slider-wrap\">\n <div class=\"cs-slider\" id=\"csSlider\">\n\n <!-- ===== SLIDE 1: FAMILY \u2014 GRAND KHAREEF SALE ===== -->\n <div class=\"cs-slide slide-family\">\n <div class=\"cs-slide-bg\" style=\"background-image: url('https:\/\/crownstoneinternational.website\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-Jun-18-2026-02_52_58-PM-1.png');\"><\/div>\n <div class=\"cs-slide-overlay\"><\/div>\n <div class=\"cs-slide-content\">\n <span class=\"cs-tag\">Grand<\/span>\n <span class=\"cs-main-title\">khareef<br>sale<\/span>\n <div class=\"cs-discount-box\">\n <span class=\"cs-discount-text\">50%<sup style=\"font-size:18px;color:#fff\">+<\/sup><\/span>\n <span class=\"cs-discount-to\">TO<\/span>\n <span class=\"cs-discount-text\">75%<\/span>\n <span class=\"cs-discount-off\">\u2014 OFF \u2014<\/span>\n <\/div>\n <ul class=\"cs-cat-list\">\n <li>\n <a href=\"https:\/\/crownstoneinternational.website\/product-category\/mens-wear\/\">\n <span class=\"cs-cat-icon\">\ud83d\udc54<\/span>\n Men's wear\n <span class=\"cs-cat-dot\"><\/span>\n <\/a>\n <\/li>\n <li>\n <a href=\"https:\/\/crownstoneinternational.website\/product-category\/womens-wear\/\">\n <span class=\"cs-cat-icon\">\ud83d\udc57<\/span>\n Women's wear\n <span class=\"cs-cat-dot\"><\/span>\n <\/a>\n <\/li>\n <li>\n <a href=\"https:\/\/crownstoneinternational.website\/product-category\/teens-wear\/\">\n <span class=\"cs-cat-icon\">\ud83d\udc55<\/span>\n Teens wear\n <span class=\"cs-cat-dot\"><\/span>\n <\/a>\n <\/li>\n <li>\n <a href=\"https:\/\/crownstoneinternational.website\/product-category\/kids-wear\/\">\n <span class=\"cs-cat-icon\">\ud83e\uddd2<\/span>\n Kids wear\n <span class=\"cs-cat-dot\"><\/span>\n <\/a>\n <\/li>\n <li>\n <a href=\"https:\/\/crownstoneinternational.website\/product-category\/gym-wear\/\">\n <span class=\"cs-cat-icon\">\ud83d\udcaa<\/span>\n Gym wear\n <span class=\"cs-cat-dot\"><\/span>\n <\/a>\n <\/li>\n <li>\n <a href=\"https:\/\/crownstoneinternational.website\/product-category\/newborn-0-1y\/\">\n <span class=\"cs-cat-icon\">\ud83d\udc76<\/span>\n New born 0 to 01 year\n <span class=\"cs-cat-dot\"><\/span>\n <\/a>\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n <!-- ===== SLIDE 2: WOMEN'S WEAR ===== -->\n <div class=\"cs-slide slide-women\">\n <div class=\"cs-slide-bg\" style=\"background-image: url('https:\/\/crownstoneinternational.website\/wp-content\/uploads\/2026\/06\/ChatGPT-Image-Jun-18-2026-02_26_49-PM.png');\"><\/div>\n <div class=\"cs-slide-overlay\"><\/div>\n <div class=\"cs-slide-content\">\n <span class=\"cs-category-label\">\u2726 Collection 2026<\/span>\n <div class=\"cs-women-title\">\n Women's<br>\n <span>Wear<\/span>\n <\/div>\n <div class=\"cs-discount-badge\">50% to 75% Off<\/div>\n <div class=\"cs-subtitle\">\u2014 Grand Khareef Sale \u2014<\/div>\n <div class=\"cs-features\">\n <div class=\"cs-feat\">\n <div class=\"cs-feat-icon\">\ud83c\udf81<\/div>\n Free Gift on Every Order\n <\/div>\n <div class=\"cs-feat\">\n <div class=\"cs-feat-icon\">\ud83d\ude9a<\/div>\n Free Delivery Across Oman\n <\/div>\n <div class=\"cs-feat\">\n <div class=\"cs-feat-icon\">\ud83d\udce6<\/div>\n Easy Return Policy\n <\/div>\n <div class=\"cs-feat\">\n <div class=\"cs-feat-icon\">\ud83d\udecd\ufe0f<\/div>\n Min Order: 20 OMR\n <\/div>\n <\/div>\n <a href=\"https:\/\/crownstoneinternational.website\/product-category\/womens-wear\/\" class=\"cs-shop-btn\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z\"\/><line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"\/><path d=\"M16 10a4 4 0 01-8 0\"\/><\/svg>\n Shop Now  \u203a\n <\/a>\n <\/div>\n <\/div>\n\n <\/div><!-- end .cs-slider -->\n\n <!-- Arrows -->\n <button class=\"cs-arrow cs-arrow-prev\" onclick=\"csPrev()\" aria-label=\"Previous\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M15 18l-6-6 6-6\"\/><\/svg>\n <\/button>\n <button class=\"cs-arrow cs-arrow-next\" onclick=\"csNext()\" aria-label=\"Next\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M9 18l6-6-6-6\"\/><\/svg>\n <\/button>\n\n <!-- Dots -->\n <div class=\"cs-dots\" id=\"csDots\"><\/div>\n\n<\/div><!-- end #cs-slider-wrap -->\n\n<script>\n(function(){\n var slider = document.getElementById('csSlider');\n var dotsWrap = document.getElementById('csDots');\n var slides = slider.querySelectorAll('.cs-slide');\n var total = slides.length;\n var current = 0;\n var autoTimer;\n\n \/\/ Build dots\n slides.forEach(function(_, i){\n var d = document.createElement('button');\n d.className = 'cs-dot' + (i===0?' active':'');\n d.setAttribute('aria-label','Slide '+(i+1));\n d.onclick = function(){ goTo(i); };\n dotsWrap.appendChild(d);\n });\n\n function goTo(n){\n current = (n + total) % total;\n slider.style.transform = 'translateX(-' + (current * 100) + '%)';\n dotsWrap.querySelectorAll('.cs-dot').forEach(function(d,i){\n d.classList.toggle('active', i===current);\n });\n resetAuto();\n }\n\n function resetAuto(){\n clearInterval(autoTimer);\n autoTimer = setInterval(function(){ goTo(current+1); }, 5000);\n }\n\n window.csPrev = function(){ goTo(current-1); };\n window.csNext = function(){ goTo(current+1); };\n\n \/\/ Touch swipe\n var startX = 0;\n slider.addEventListener('touchstart', function(e){ startX = e.touches[0].clientX; });\n slider.addEventListener('touchend', function(e){\n var diff = startX - e.changedTouches[0].clientX;\n if(Math.abs(diff) > 50){ diff > 0 ? goTo(current+1) : goTo(current-1); }\n });\n\n resetAuto();\n})();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Crownstone International \u2013 Header MINIMUM 50% TO 75% OFF \u2014 GRAND OPENING SALE Free Gift on Every Order Free Delivery Across Oman Minimum Order: 20 OMR \u062e\u0635\u0645 \u0645\u0646 50% \u0625\u0644\u0649 75% \u2014 \u0639\u0631\u0636 \u0627\u0644\u0627\u0641\u062a\u062a\u0627\u062d \u0627\u0644\u0643\u0628\u064a\u0631 \u0647\u062f\u064a\u0629 \u0645\u062c\u0627\u0646\u064a\u0629 \u0645\u0639 \u0643\u0644 \u0637\u0644\u0628 \u062a\u0648\u0635\u064a\u0644 \u0645\u062c\u0627\u0646\u064a \u0644\u062c\u0645\u064a\u0639 \u0645\u0646\u0627\u0637\u0642 \u0639\u0645\u0627\u0646 \u0627\u0644\u062d\u062f \u0627\u0644\u0623\u062f\u0646\u0649 \u0644\u0644\u0637\u0644\u0628: \u0662\u0660 \u0631\u064a\u0627\u0644 \u0639\u0645\u0627\u0646\u064a MINIMUM 50% TO 75% […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-10","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/crownstoneinternational.website\/ar\/wp-json\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/crownstoneinternational.website\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/crownstoneinternational.website\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/crownstoneinternational.website\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/crownstoneinternational.website\/ar\/wp-json\/wp\/v2\/comments?post=10"}],"version-history":[{"count":95,"href":"https:\/\/crownstoneinternational.website\/ar\/wp-json\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":213,"href":"https:\/\/crownstoneinternational.website\/ar\/wp-json\/wp\/v2\/pages\/10\/revisions\/213"}],"wp:attachment":[{"href":"https:\/\/crownstoneinternational.website\/ar\/wp-json\/wp\/v2\/media?parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}