/* Redesigned homepage (website/theme/theme22). Everything lives under .rx-root so it cannot leak into other pages.
   Breakpoints follow the design: 1100 / 860 / 640 (400 for the very smallest phones). */

@font-face { font-family: 'IBM Plex Sans'; font-weight: 400 700; font-style: normal; font-display: swap; src: url('../fonts/home-v2/plex-sans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 400 700; font-style: normal; font-display: swap; src: url('../fonts/home-v2/plex-sans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/home-v2/plex-arabic-400.woff2') format('woff2'); unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 500; font-style: normal; font-display: swap; src: url('../fonts/home-v2/plex-arabic-500.woff2') format('woff2'); unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 600; font-style: normal; font-display: swap; src: url('../fonts/home-v2/plex-arabic-600.woff2') format('woff2'); unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC; }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/home-v2/plex-arabic-700.woff2') format('woff2'); unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC; }

@keyframes xmqLtr { from { transform: translateX(0) } to { transform: translateX(calc(-50% - 6px)) } }
@keyframes xmqRtl { from { transform: translateX(0) } to { transform: translateX(calc(50% + 6px)) } }

body.rx-body { margin: 0; padding: 0; background: #fff; overflow-x: hidden; }
body.rx-body.rx-lock { overflow: hidden; }

.rx-root {
	--rx-red: #D81324; --rx-red-hi: #F8353E; --rx-ink: #191919; --rx-mute: #555; --rx-soft: #6b6b6b;
	--rx-line: #E9E7E7; --rx-bg: #F7F8FA; --rx-green: #1FA855;
	background: #fff; color: var(--rx-ink); min-height: 100vh;
	font-family: 'IBM Plex Sans', 'IBM Plex Sans Arabic', system-ui, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.5; letter-spacing: normal; text-transform: none;
}
[dir="rtl"] .rx-root { line-height: 1.7; }
.rx-root *, .rx-root *::before, .rx-root *::after { box-sizing: border-box; }
.rx-root a, .rx-root button, .rx-root input, .rx-root span, .rx-root s, .rx-root strong, .rx-root small, .rx-root address { font-family: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: none; }
.rx-root strong { font-weight: 600; }
.rx-root a { color: var(--rx-ink); text-decoration: none; }
.rx-root a:hover { color: var(--rx-red); text-decoration: none; }
.rx-root button, .rx-root input { font: inherit; }
.rx-root button { margin: 0; text-transform: none; letter-spacing: 0; }
.rx-root h1, .rx-root h2, .rx-root h3, .rx-root h4, .rx-root p, .rx-root ul { margin: 0; padding: 0; font-family: inherit; letter-spacing: normal; text-transform: none; }
.rx-root ul { list-style: none; }
.rx-root img { max-width: 100%; border: 0; }
.rx-root :focus-visible { outline: 2px solid var(--rx-red); outline-offset: 2px; }
.rx-root svg { flex: none; }
.rx-root [hidden] { display: none !important; }
.rx-root .rx-flip { transform: scaleX(1); }
[dir="rtl"] .rx-root .rx-flip { transform: scaleX(-1); }
.rx-root .rx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rx-root .rx-skip { position: absolute; top: -48px; inset-inline-start: 8px; background: var(--rx-red); color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 400; }
.rx-root .rx-skip:focus { top: 8px; color: #fff; }

.rx-wrap { max-width: 1320px; margin: 0 auto; padding: 0 24px; }

/* ---------- top bar ---------- */
.rx-root .rx-tbar { position: relative; z-index: 56; background: var(--rx-bg); border-bottom: 1px solid var(--rx-line); font-size: 13px; color: var(--rx-mute); }
.rx-root .rx-tb { display: flex; align-items: center; gap: 24px; height: 40px; }
.rx-root .rx-tb-call { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.rx-root .rx-tb-ex { display: flex; align-items: center; gap: 8px; }
.rx-root .rx-tb-r { margin-inline-start: auto; display: flex; align-items: center; gap: 16px; }
.rx-root .rx-sep { width: 1px; height: 16px; background: var(--rx-line); }
.rx-root .rx-tb-auth { display: flex; gap: 6px; }
.rx-root .rx-dd { position: relative; }
.rx-root .rx-dd-btn { display: flex; align-items: center; gap: 8px; border: 0; background: none; cursor: pointer; color: var(--rx-ink); font-size: 13px; padding: 4px 0; }
.rx-root .rx-dd-btn img { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; }
.rx-root .rx-dd-menu { display: none; position: absolute; top: 100%; inset-inline-end: 0; min-width: 220px; z-index: 90; background: #fff; border: 1px solid var(--rx-line); border-radius: 12px; box-shadow: 0 16px 40px rgba(25, 25, 25, .12); padding: 8px; margin-top: 4px; max-height: 70vh; overflow-y: auto; }
.rx-root .rx-dd.is-open > .rx-dd-menu, .rx-root .rx-dd:hover > .rx-dd-menu { display: block; }
.rx-root .rx-dd-menu a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: 14px; color: var(--rx-ink); white-space: nowrap; }
.rx-root .rx-dd-menu a:hover, .rx-root .rx-dd-menu a.is-active { background: var(--rx-bg); color: var(--rx-red); }
.rx-root .rx-dd-menu a img { width: 22px; height: 15px; object-fit: cover; border-radius: 2px; }

/* ---------- header ---------- */
.rx-root .rx-sticky { position: sticky; top: 0; z-index: 60; background: #fff; }
.rx-root .rx-hd { border-bottom: 1px solid var(--rx-line); background: #fff; }
.rx-root .rx-hd-in { display: flex; align-items: center; gap: 24px; height: 88px; }
.rx-root .rx-logo { flex-shrink: 0; display: block; }
.rx-root .rx-logo img { height: 52px; width: auto; display: block; max-width: 220px; object-fit: contain; }
.rx-root .rx-search { flex: 1; display: flex; align-items: center; gap: 16px; min-width: 0; position: relative; }
.rx-root .rx-search-form { flex: 1; position: relative; min-width: 0; margin: 0; }
.rx-root .rx-search-box { display: flex; height: 48px; border: 1.5px solid var(--rx-ink); border-radius: 10px; background: #fff; min-width: 0; position: relative; }
.rx-root .rx-search-ico { display: flex; align-items: center; padding-inline-start: 16px; color: var(--rx-soft); }
.rx-root .rx-search-box .tt-search-input { flex: 1; min-width: 0; border: 0; outline: 0; box-shadow: none; padding: 0 12px; height: auto; font-size: 15px; background: transparent; color: var(--rx-ink); }
.rx-root .rx-search-go { border: 0; background: var(--rx-red); color: #fff; padding: 0 28px; font-weight: 600; font-size: 14px; cursor: pointer; border-radius: 0 8px 8px 0; }
[dir="rtl"] .rx-root .rx-search-go { border-radius: 8px 0 0 8px; }
.rx-root .rx-search-go:hover { background: var(--rx-red-hi); }
.rx-root .rx-root-results .search-results, .rx-root .rx-search-form .search-results { display: none; position: absolute; top: 100%; inset-inline: 0; margin-top: 6px; z-index: 85; background: #fff; border: 1px solid var(--rx-line); border-radius: 12px; box-shadow: 0 16px 40px rgba(25, 25, 25, .12); padding: 12px; max-height: 70vh; overflow-y: auto; }
.rx-root .rx-search-form:focus-within .search-results:has(#search_child_results:not(:empty)), .rx-root .rx-search-form.is-active .search-results:has(#search_child_results:not(:empty)) { display: block; }
.rx-root .rx-search-form .search-results p { margin: 0; }
.rx-root .rx-search-form .search-results ul { list-style: none; margin: 0; padding: 0; }
.rx-root .rx-search-form .search-results .tt-price .old-price:not(#_) { text-decoration: line-through; font-weight: 400; color: var(--rx-mute); }
.rx-root .rx-search-form .search-results li { padding: 6px 4px; }
.rx-root .rx-search-form .search-results .tt-view-all { display: none; width: 100%; margin-top: 8px; height: 40px; border: 1.5px solid var(--rx-ink); border-radius: 8px; background: #fff; font-weight: 600; font-size: 13px; cursor: pointer; }
.rx-root .rx-search-form .search-results .tt-view-all.tt-view-all-visible { display: block; }
/* Mobile / tablet results: gulfweb.css stacks a boxed card with a fixed 2-line title and a full-width button, which leaves
   dead gaps. Here each hit is a row: image left, title + price + a compact button on the right, hairline between rows. */
@media (max-width: 860px) {
	.rx-root .rx-search-form .search-results { padding: 4px 12px; }
	.rx-root .rx-search-form .search-results .tt-quicksearch-list { grid-template-columns: 1fr; gap: 0 24px; }
	.rx-root .rx-search-form .search-results .tt-quicksearch-list li { display: grid !important; grid-template-columns: 92px minmax(0, 1fr); column-gap: 12px; row-gap: 6px; align-items: start; height: auto; padding: 12px 0; border: 0; border-bottom: 1px solid var(--rx-line); border-radius: 0; text-align: start; }
	.rx-root .rx-search-form .search-results .tt-quicksearch-list li:last-child { border-bottom: 0; padding-bottom: 4px; }
	.rx-root .rx-search-form .search-results .tt-view-all:not(#_) { margin-top: 8px !important; margin-bottom: 8px; }
	.rx-root .rx-search-form .search-results .tt-quicksearch-list li > a { display: contents !important; }
	.rx-root .rx-search-form .search-results .tt-quicksearch-list .thumbnail { grid-column: 1; grid-row: 1 / span 2; align-self: stretch; width: 92px; height: auto; min-height: 92px; padding: 6px; box-sizing: border-box; background: #fff; border: 1px solid var(--rx-line); border-radius: 10px; }
	.rx-root .rx-search-form .search-results .tt-quicksearch-list .tt-description { grid-column: 2; grid-row: 1; min-width: 0; }
	.rx-root .rx-search-form .search-results .tt-quicksearch-list .tt-title { min-height: 0; font-size: 14px; line-height: 1.35; text-align: start !important; }
	.rx-root .rx-search-form .search-results .tt-quicksearch-list .tt-price { margin-top: 4px; font-size: 15px; text-align: start !important; }
	.rx-root .rx-search-form .search-results .tt-quicksearch-list .tt-price .old-price:not(#_) { margin-inline-start: 6px; font-size: 12px; }
	.rx-root .rx-search-form .search-results .tt-quicksearch-action { grid-column: 2; grid-row: 2; width: 100%; margin: 0; padding: 0; flex-direction: row; flex-wrap: wrap; align-items: stretch; }
	.rx-root .rx-search-form .search-results .tt-quicksearch-action .tt-quicksearch-addtocart { flex: 1 1 0; width: auto; height: 34px; padding: 0 8px; border-radius: 8px; }
	.rx-root .rx-search-form .search-results .tt-quicksearch-action .tt-quicksearch-details { display: flex; margin-inline-start: 8px; background: #fff; color: var(--rx-ink); border: 1.5px solid var(--rx-ink); font-size: 11px; font-weight: 700; text-transform: uppercase; }
}
@media (min-width: 481px) and (max-width: 860px) {
	.rx-root .rx-search-form .search-results .tt-quicksearch-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rx-root .rx-search-form .search-results .tt-quicksearch-list li:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
}
.rx-root .rx-acts { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.rx-root .rx-act { height: 44px; padding: 0 12px; border: 0; background: none; border-radius: 8px; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--rx-ink); white-space: nowrap; }
.rx-root .rx-act:hover { background: var(--rx-bg); color: var(--rx-ink); }
.rx-root .rx-cartwrap { position: relative; }
.rx-root .rx-cart-ico { position: relative; display: flex; }
.rx-root .rx-badge { position: absolute; top: -6px; inset-inline-end: -8px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--rx-red); color: #fff; font-size: 11px; font-weight: 600; display: grid; place-items: center; padding: 0 4px; }
.rx-root .rx-cartdd { display: none; position: absolute; top: 100%; inset-inline-end: 0; width: 340px; padding-top: 8px; z-index: 80; }
.rx-root .rx-cartwrap:hover .rx-cartdd { display: block; }
.rx-root .rx-cartdd-in { background: #fff; border: 1px solid var(--rx-line); border-radius: 12px; box-shadow: 0 16px 40px rgba(25, 25, 25, .12); padding: 16px; }
.rx-root .rx-cart-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 16px 8px; font-weight: 600; font-size: 15px; }
.rx-root .rx-cart-empty .rx-ring { width: 56px; height: 56px; border-radius: 50%; background: var(--rx-bg); display: grid; place-items: center; color: var(--rx-soft); }
.rx-root .rx-cartdd .tt-item { display: block; position: relative; padding: 10px 28px 10px 0; border-bottom: 1px solid var(--rx-line); }
[dir="rtl"] .rx-root .rx-cartdd .tt-item { padding: 10px 0 10px 28px; }
.rx-root .rx-cartdd .tt-item > a { display: flex; gap: 10px; align-items: flex-start; }
.rx-root .rx-cartdd .tt-item-img { width: 56px; flex: none; }
.rx-root .rx-cartdd .tt-item-img img { width: 56px; height: 56px; object-fit: contain; }
.rx-root .rx-cartdd .tt-title { font-size: 13px; font-weight: 500; line-height: 1.4; }
.rx-root .rx-cartdd .tt-add-info { font-size: 12px; color: var(--rx-mute); }
.rx-root .rx-cartdd .tt-price, .rx-root .rx-cartdd .tt-quantity { font-size: 13px; }
.rx-root .rx-cartdd .tt-item-close { position: absolute; top: 10px; inset-inline-end: 0; }
.rx-root .rx-cartdd .tt-item-close a { display: block; width: 20px; height: 20px; font-size: 0; position: relative; }
.rx-root .rx-cartdd .tt-item-close a::before { content: '\00d7'; font-size: 20px; line-height: 20px; color: var(--rx-soft); position: absolute; inset: 0; text-align: center; }
.rx-root .rx-cartdd .tt-cart-list { max-height: 280px; overflow-y: auto; }
.rx-root .rx-cartdd .tt-cart-total-row { display: flex; justify-content: space-between; padding: 12px 0 4px; font-weight: 600; }
.rx-root .rx-cartdd .tt-cart-btn { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.rx-root .rx-cartdd .tt-cart-btn .tt-item { padding: 0; border: 0; }
.rx-root .rx-cartdd .tt-cart-btn a { display: flex; align-items: center; justify-content: center; height: 40px; border-radius: 8px; font-weight: 600; font-size: 13px; border: 1.5px solid var(--rx-ink); color: var(--rx-ink); }
.rx-root .rx-cartdd .tt-cart-btn .btn:first-child, .rx-root .rx-cartdd .tt-cart-btn .tt-item:first-child a { background: var(--rx-red); border-color: var(--rx-red); color: #fff; }
.rx-root .rx-cartdd .tt-hidden-desctope { display: none; }

.rx-root .rx-burger { display: none; place-items: center; width: 44px; height: 44px; flex-shrink: 0; margin-inline-start: -8px; border: 0; background: none; border-radius: 8px; color: var(--rx-ink); cursor: pointer; padding: 0; }
.rx-root .rx-burger:hover { background: var(--rx-bg); }

/* link row */
.rx-root .rx-navrow { border-bottom: 1px solid var(--rx-line); }
.rx-root .rx-nav1 { display: flex; align-items: center; gap: 32px; height: 48px; font-size: 14px; font-weight: 500; }
.rx-root .rx-nav1 .rx-hot { color: var(--rx-red); font-weight: 600; }
.rx-root .rx-nav1 .rx-dd { height: 100%; display: flex; align-items: center; }
.rx-root .rx-nav1 .rx-dd-btn { font-size: 14px; font-weight: 500; padding: 0; gap: 6px; }
.rx-root .rx-bdd { display: none; position: absolute; top: 100%; inset-inline-start: -24px; width: 680px; max-width: calc(100vw - 48px); z-index: 80; background: #fff; border: 1px solid var(--rx-line); border-radius: 0 0 12px 12px; box-shadow: 0 16px 40px rgba(25, 25, 25, .12); padding: 24px; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; max-height: 70vh; overflow-y: auto; }
.rx-root .rx-dd.is-open > .rx-bdd, .rx-root .rx-dd:hover > .rx-bdd { display: grid; }
.rx-root .rx-bdd a { height: 64px; border: 1px solid var(--rx-line); border-radius: 8px; display: grid; place-items: center; padding: 10px; font-size: 13px; text-align: center; }
.rx-root .rx-bdd a:hover { border-color: var(--rx-ink); }
.rx-root .rx-bdd img { max-width: 100%; max-height: 40px; object-fit: contain; }
.rx-root .rx-pay { margin-inline-start: auto; display: flex; align-items: center; gap: 12px; color: var(--rx-mute); font-weight: 400; font-size: 13px; }
.rx-root .rx-pay img { height: 22px; width: auto; }

/* ---------- hero ---------- */
.rx-root .rx-v1g { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; align-items: stretch; margin-top: 24px; }
.rx-root .rx-v1s { position: relative; z-index: 40; }
.rx-root .rx-v1n { height: 100%; border: 1px solid var(--rx-line); border-radius: 12px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.rx-root .rx-v1t { height: 48px; flex: none; background: var(--rx-ink); color: #fff; display: flex; align-items: center; gap: 10px; padding: 0 16px; font-weight: 600; font-size: 15px; }
.rx-root .rx-v1l { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 6px 0 0; }
.rx-root .rx-chip { border: 0; background: transparent; color: var(--rx-ink); font-weight: 400; display: flex; align-items: center; gap: 12px; height: 36px; flex: 0 0 36px; padding: 0 16px; font-size: 14px; cursor: pointer; text-align: start; width: 100%; }
.rx-root .rx-chip.is-open { background: var(--rx-bg); color: var(--rx-red); font-weight: 600; }
.rx-root .rx-chip:hover { color: var(--rx-ink); }
.rx-root .rx-chip.is-open:hover { color: var(--rx-red); }
.rx-root .rx-chip img { width: 20px; height: 20px; object-fit: contain; }
.rx-root .rx-chip .rx-noicon { width: 20px; flex: none; }
.rx-root .rx-chip .rx-nm { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rx-root .rx-chip .rx-arr { opacity: .55; }
.rx-root .rx-chip.rx-more { flex: 0 0 48px; border-top: 1px solid var(--rx-line); height: 48px; margin-top: 4px; font-weight: 600; }

.rx-root .rx-fly { display: none; position: absolute; top: 0; inset-inline-start: calc(100% - 1px); width: calc(min(100vw, 1320px) - 328px); min-height: 100%; background: #fff; border: 1px solid var(--rx-line); border-radius: 12px; box-shadow: 0 24px 56px rgba(25, 25, 25, .16); padding: 32px; gap: 32px; }
.rx-root .rx-fly.is-open { display: grid; grid-template-columns: minmax(0, 1fr) 260px; }
.rx-root .rx-fly.rx-fly-more.is-open { display: flex; flex-direction: column; gap: 24px; }
.rx-root .rx-fly-main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.rx-root .rx-fly-h { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.rx-root .rx-fly h3:not(#_) { font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: normal; }
.rx-root .rx-fly-all { font-size: 14px; font-weight: 600; color: var(--rx-red); display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.rx-root .rx-g3b { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rx-root .rx-sub { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 12px; border: 1px solid var(--rx-line); min-width: 0; }
.rx-root .rx-sub img { width: 64px; height: 64px; object-fit: contain; background: var(--rx-bg); border-radius: 8px; flex: none; }
.rx-root .rx-sub div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rx-root .rx-sub .rx-sub-t { font-size: 15px; font-weight: 600; line-height: 1.35; }
.rx-root .rx-sub .rx-kid { font-size: 13px; color: var(--rx-mute); }
.rx-root .rx-pp { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; border: 1px solid var(--rx-line); min-width: 0; }
.rx-root .rx-pp:hover { border-color: var(--rx-ink); }
.rx-root .rx-pp img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; }
.rx-root .rx-pp .rx-pp-n, .rx-root .rx-feat .rx-pp-n { font-size: 13px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rx-root .rx-pp strong { font-size: 15px; }
.rx-root .rx-notile { display: flex; align-items: center; gap: 24px; padding: 24px; background: var(--rx-bg); border-radius: 12px; }
.rx-root .rx-notile img { width: 140px; height: 140px; object-fit: contain; }
.rx-root .rx-notile span { font-size: 18px; font-weight: 600; }
.rx-root .rx-fly-brands { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--rx-line); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rx-root .rx-fly-brands > span { font-size: 13px; font-weight: 600; }
.rx-root .rx-fly-brands a { height: 40px; padding: 0 16px; border: 1px solid var(--rx-line); border-radius: 999px; display: flex; align-items: center; font-size: 13px; }
.rx-root .rx-fly-brands a:hover { border-color: var(--rx-ink); }
.rx-root .rx-fly-brands img { height: 22px; max-width: 80px; object-fit: contain; }
.rx-root .rx-feat { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--rx-bg); border-radius: 12px; align-self: start; min-width: 0; }
.rx-root .rx-feat > span { font-size: 12px; font-weight: 600; color: var(--rx-mute); }
.rx-root .rx-feat img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #fff; border-radius: 8px; }
.rx-root .rx-feat .rx-pr { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.rx-root .rx-feat .rx-pr strong { font-size: 17px; }
.rx-root .rx-feat .rx-btn { height: 40px; border-radius: 8px; border: 0; background: var(--rx-red); color: #fff; font-weight: 600; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.rx-root .rx-feat .rx-btn:hover { background: var(--rx-red-hi); color: #fff; }
.rx-root .rx-g4b { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.rx-root .rx-more-tile { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 16px; border-radius: 12px; background: var(--rx-bg); text-align: center; font-size: 15px; font-weight: 500; line-height: 1.35; }
.rx-root .rx-more-tile:hover { background: var(--rx-line); color: var(--rx-ink); }
.rx-root .rx-more-tile img { width: 96px; height: 96px; object-fit: contain; }
.rx-root .rx-more-tile span { display: flex; align-items: center; gap: 8px; }
.rx-root .rx-more-tile span img { width: 18px; height: 18px; }

/* slider: admin W x H sets the ratio; beside the category menu (desktop) the slider is exactly as tall as the menu instead, as in the design */
.rx-root .rx-hero { position: relative; border-radius: 12px; overflow: hidden; background: var(--rx-bg); aspect-ratio: var(--hero-slider-ratio, 1180 / 775); min-width: 0; }
@media (min-width: 861px) {
	.rx-root .rx-v1g:has(.rx-v1s) .rx-hero { aspect-ratio: auto; min-height: 400px; }
}
.rx-root .rx-hero-track { display: flex; height: 100%; width: 100%; transition: transform .5s ease; }
.rx-root .rx-slide { flex: 0 0 100%; min-width: 0; height: 100%; display: block; position: relative; }
.rx-root .rx-slide img, .rx-root .rx-slide video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.rx-root .rx-hero-btn { position: absolute; top: 50%; margin-top: -20px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #fff; box-shadow: 0 4px 12px rgba(25, 25, 25, .15); display: grid; place-items: center; cursor: pointer; color: var(--rx-ink); padding: 0; z-index: 2; }
.rx-root .rx-hero-btn:hover { color: var(--rx-red); }
.rx-root .rx-hero-prev { inset-inline-start: 16px; }
.rx-root .rx-hero-next { inset-inline-end: 16px; }
.rx-root .rx-dots { position: absolute; bottom: 16px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; z-index: 2; }
.rx-root .rx-dots button { width: 8px; height: 8px; border-radius: 4px; border: 0; padding: 0; background: rgba(25, 25, 25, .25); cursor: pointer; transition: width .3s; }
.rx-root .rx-dots button.is-on { width: 24px; background: var(--rx-red); }
.rx-root .rx-hero-solo .rx-hero-btn, .rx-root .rx-hero-solo .rx-dots { display: none; }

/* ---------- sections ---------- */
.rx-root .rx-sec { margin-top: 48px; }
.rx-root .rx-sec-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.rx-root .rx-h2:not(#_) { font-size: 28px; font-weight: 600; line-height: 1.5; letter-spacing: normal; }
.rx-root .rx-h2 a { color: inherit; }
.rx-root .rx-sec-tools { display: flex; align-items: center; gap: 16px; }
.rx-root .rx-sec-link { font-size: 14px; font-weight: 600; }
.rx-root .rx-arrows { display: flex; gap: 8px; }
.rx-root .rx-arrow { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--rx-line); background: #fff; display: grid; place-items: center; cursor: pointer; color: var(--rx-ink); padding: 0; }
.rx-root .rx-arrow:hover { border-color: var(--rx-ink); }

.rx-root .rx-sec { --cols: var(--cols-d, 5); }
.rx-root .rx-row { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 16px; -webkit-overflow-scrolling: touch; }
.rx-root .rx-row::-webkit-scrollbar { display: none; }
.rx-root .rx-row > * { flex: 0 0 calc((100% - (var(--cols) - 1) * 16px) / var(--cols)); scroll-snap-align: start; min-width: 0; }
.rx-root .rx-row.rx-row-grid { flex-wrap: wrap; overflow: visible; scroll-snap-type: none; }

/* product card */
.rx-root .rx-card { background: #fff; border: 1px solid var(--rx-line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s ease, transform .2s ease; position: relative; }
.rx-root .rx-card:hover { box-shadow: 0 12px 32px rgba(25, 25, 25, .10); transform: translateY(-2px); }
.rx-root .rx-card-img { position: relative; aspect-ratio: 1 / 1; padding: 20px; display: block; }
.rx-root .rx-card-img > a { display: block; width: 100%; height: 100%; position: relative; }
.rx-root .rx-card-img img { width: 100%; height: 100%; object-fit: contain; display: block; transition: opacity .25s; }
.rx-root .rx-card-img .rx-roll { position: absolute; inset: 0; opacity: 0; }
.rx-root .rx-card:hover .rx-card-img.has-roll .rx-roll { opacity: 1; }
.rx-root .rx-card.is-oos .rx-card-img img { opacity: .45; }
.rx-root .rx-badges { position: absolute; top: 12px; inset-inline-start: 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; z-index: 2; pointer-events: none; max-width: calc(100% - 64px); }
.rx-root .rx-badge-t { background: var(--rx-red); color: #fff; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 6px; line-height: 1.4; }
.rx-root .rx-badge-t.is-oos { background: var(--rx-ink); font-weight: 500; }
.rx-root .rx-badges .offer-badge { font-size: 11px; line-height: 1.5; }
.rx-root .rx-quick { position: absolute; top: 12px; inset-inline-end: 12px; display: flex; flex-direction: column; gap: 8px; z-index: 3; }
.rx-root .rx-quick a { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--rx-line); background: #fff; display: grid; place-items: center; cursor: pointer; color: var(--rx-ink); }
.rx-root .rx-quick a:hover { color: var(--rx-red); border-color: var(--rx-red); }
.rx-root .rx-card .tt-countdown_box { padding: 0 12px 8px; }
.rx-root .rx-card .tt-countdown { display: flex; justify-content: center; font-size: 12px; }
.rx-root .rx-card .countdown-row { display: flex; gap: 6px; }
.rx-root .rx-card .countdown-section { display: flex; flex-direction: column; align-items: center; background: var(--rx-bg); border-radius: 6px; padding: 2px 6px; min-width: 38px; }
.rx-root .rx-card .countdown-amount { font-weight: 700; }
.rx-root .rx-card .countdown-period { font-size: 10px; color: var(--rx-mute); }
.rx-root .rx-card-body { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.rx-root .rx-card-t { font-size: 14px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 41px; }
.rx-root .rx-card-tags img { height: 20px; width: auto; margin-inline-end: 4px; }
.rx-root .rx-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.rx-root .rx-price .rx-now { font-size: 17px; font-weight: 700; color: var(--rx-ink); }
.rx-root .rx-price .rx-now.is-sale { color: var(--rx-red); }
.rx-root .rx-price s { font-size: 13px; color: var(--rx-soft); }
.rx-root .rx-card-msg:empty { display: none; }
.rx-root .rx-card-msg { font-size: 12px; }
.rx-root .rx-add { margin-top: auto; height: 40px; border-radius: 8px; border: 1.5px solid var(--rx-ink); background: #fff; color: var(--rx-ink); font-weight: 600; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 0 8px; }
.rx-root .rx-add:hover { background: var(--rx-red); border-color: var(--rx-red); color: #fff; }
.rx-root .rx-add.is-disabled { border-color: var(--rx-line); background: var(--rx-bg); color: var(--rx-soft); font-weight: 500; cursor: not-allowed; pointer-events: none; }

/* brand marquee */
.rx-root .rx-mq-wrap { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
.rx-root .rx-mq { display: flex; gap: 12px; width: max-content; padding: 4px 0 6px; animation: xmqLtr 50s linear infinite; }
[dir="rtl"] .rx-root .rx-mq { animation-name: xmqRtl; }
.rx-root .rx-mq.is-rev { animation-direction: reverse; padding: 6px 0 12px; }
.rx-root .rx-mq:hover { animation-play-state: paused; }
.rx-root .rx-brand { flex: 0 0 148px; height: 88px; border: 1px solid var(--rx-line); border-radius: 12px; display: grid; place-items: center; padding: 14px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.rx-root .rx-brand:hover { border-color: var(--rx-ink); box-shadow: 0 8px 20px rgba(25, 25, 25, .08); }
.rx-root .rx-brand img { max-width: 100%; max-height: 52px; object-fit: contain; }

/* category tiles */
.rx-root .rx-tile { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 12px; border-radius: 12px; background: var(--rx-bg); text-align: center; transition: background .2s; }
.rx-root .rx-tile:hover { background: var(--rx-line); color: var(--rx-ink); }
.rx-root .rx-tile img { width: 100%; max-width: 112px; aspect-ratio: 1 / 1; object-fit: contain; }
.rx-root .rx-tile span { font-size: 13px; font-weight: 500; line-height: 1.35; min-height: 35px; }
.rx-root .rx-row.rx-row-tiles { padding-bottom: 4px; }
.rx-root .rx-seller { align-items: center; justify-content: center; background: #fff; border: 1px solid var(--rx-line); }
.rx-root .rx-seller img { max-width: 160px; }

/* best sellers by brand: tabs */
.rx-root .rx-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.rx-root .rx-tab { height: 40px; padding: 0 18px; border: 1px solid var(--rx-line); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 500; cursor: pointer; color: var(--rx-ink); }
.rx-root .rx-tab.is-on { background: var(--rx-ink); border-color: var(--rx-ink); color: #fff; }
.rx-root .rx-tabpane { display: none; }
.rx-root .rx-tabpane.is-on { display: block; }

/* banners */
.rx-root .rx-bnw { margin-top: 16px; }
.rx-root .rx-sec + .rx-bnw, .rx-root .rx-svc + .rx-bnw { margin-top: 48px; }
.rx-root .rx-bn { display: grid; grid-template-columns: repeat(var(--cols-d, 4), minmax(0, 1fr)); gap: 16px; }
.rx-root .rx-bn-i { display: block; border-radius: 12px; overflow: hidden; background: var(--rx-bg); transition: transform .2s ease, box-shadow .2s ease; position: relative; }
.rx-root .rx-bn-i:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(25, 25, 25, .10); }
.rx-root .rx-bn-i img { width: 100%; height: auto; display: block; }
.rx-root .rx-bn-cap { position: absolute; inset-inline: 0; bottom: 0; padding: 10px 12px; background: linear-gradient(transparent, rgba(25, 25, 25, .7)); color: #fff; font-size: 14px; font-weight: 600; }
.rx-root .rx-bn-cap * { color: inherit; }

/* service blocks, newsletter */
.rx-root .rx-svc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 64px; }
.rx-root .rx-svc-i { display: flex; gap: 16px; align-items: flex-start; padding: 24px; border: 1px solid var(--rx-line); border-radius: 12px; min-width: 0; }
.rx-root .rx-svc-ico { width: 52px; height: 52px; border-radius: 50%; background: var(--rx-bg); display: grid; place-items: center; flex: none; }
.rx-root .rx-svc-i div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rx-root .rx-svc-i strong { font-size: 16px; font-weight: 600; }
.rx-root .rx-svc-i span.rx-svc-d, .rx-root .rx-svc-i .rx-svc-d { font-size: 14px; color: var(--rx-mute); }
.rx-root .rx-nl { background: var(--rx-bg); border-radius: 12px; padding: 40px 48px; display: flex; align-items: center; gap: 48px; flex-wrap: wrap; margin-top: 32px; }
.rx-root .rx-nlt { flex: 1; min-width: 280px; display: flex; flex-direction: column; gap: 6px; }
.rx-root .rx-nlt h2:not(#_) { font-size: 24px; font-weight: 600; line-height: 1.5; letter-spacing: normal; }
.rx-root .rx-nlt p { font-size: 15px; color: var(--rx-mute); }
.rx-root .rx-nlf { flex: 1; min-width: 320px; display: flex; gap: 8px; position: relative; flex-wrap: wrap; margin: 0; }
.rx-root .rx-nlf input { flex: 1; min-width: 0; height: 48px; border: 1.5px solid var(--rx-line); border-radius: 10px; padding: 0 16px; font-size: 15px; background: #fff; outline: 0; box-shadow: none; }
.rx-root .rx-nlf input:focus { border-color: var(--rx-ink); }
.rx-root .rx-nlf button { height: 48px; padding: 0 28px; border: 0; border-radius: 10px; background: var(--rx-red); color: #fff; font-weight: 600; font-size: 15px; cursor: pointer; }
.rx-root .rx-nlf button:hover { background: var(--rx-red-hi); }
.rx-root #newslettermsg { flex: 1 1 100%; font-size: 13px; }
.rx-root #newslettermsg:empty { display: none; }

/* ---------- footer ---------- */
.rx-root .rx-footer { margin: 64px 0 0; padding: 0; background: var(--rx-ink); color: #C9C9C9; font-size: 14px; }
.rx-root .rx-footer a { color: #C9C9C9; }
.rx-root .rx-footer a:hover { color: #fff; }
.rx-root .rx-fg { display: grid; grid-template-columns: 1.1fr 1.8fr 1fr 1.2fr; gap: 40px; padding-top: 56px; padding-bottom: 40px; }
.rx-root .rx-fcol { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.rx-root .rx-fcol h3:not(#_) { color: #fff; font-size: 16px; font-weight: 600; line-height: 1.5; letter-spacing: normal; }
.rx-root .rx-fbrand { display: flex; flex-direction: column; gap: 20px; }
.rx-root .rx-fbrand > a img { height: 56px; width: auto; max-width: 100%; align-self: flex-start; display: block; object-fit: contain; }
.rx-root .rx-social { display: flex; gap: 10px; flex-wrap: wrap; }
.rx-root .rx-social a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #3a3a3a; display: grid; place-items: center; color: #fff; }
.rx-root .rx-social a:hover { border-color: #fff; }
.rx-root .rx-fpay { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rx-root .rx-fpay img { height: 28px; width: auto; background: #fff; border-radius: 4px; padding: 2px; }
.rx-root .rx-fcats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; }
.rx-root .rx-flinks { display: flex; flex-direction: column; gap: 10px; }
.rx-root .rx-fcontact { display: flex; flex-direction: column; gap: 14px; }
.rx-root .rx-fcontact > * { display: flex; gap: 10px; }
.rx-root .rx-fcontact svg { margin-top: 2px; }
.rx-root .rx-fb-wrap { border-top: 1px solid #2e2e2e; }
.rx-root .rx-fb { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 20px; padding-bottom: 20px; font-size: 13px; }
.rx-root .rx-fb p { margin: 0; }
.rx-root .rx-top { border: 1px solid #3a3a3a; background: none; color: #fff; border-radius: 8px; height: 36px; padding: 0 14px; display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; }
.rx-root .rx-top:hover { border-color: #fff; }

/* floating: WhatsApp / location / app link share the .float column from the shared stylesheet; the cart bubble comes from the footer script */
.rx-ck { font-family: 'IBM Plex Sans', 'IBM Plex Sans Arabic', system-ui, sans-serif; position: fixed; bottom: 24px; inset-inline-start: 24px; width: 420px; max-width: calc(100vw - 24px); background: #fff; border: 1px solid var(--rx-line); border-radius: 12px; box-shadow: 0 16px 40px rgba(25, 25, 25, .16); padding: 20px; z-index: 200; display: none; flex-direction: column; gap: 14px; }
.rx-ck p { margin: 0; font-size: 14px; color: #333; }
.rx-ck-b { display: flex; gap: 8px; justify-content: flex-end; }
.rx-ck-b button { height: 40px; padding: 0 16px; border-radius: 8px; border: 1.5px solid var(--rx-ink); background: #fff; color: var(--rx-ink); font-weight: 600; font-size: 13px; cursor: pointer; }
.rx-ck-b button.is-primary { border-color: var(--rx-red); background: var(--rx-red); color: #fff; }
.rx-ck-b button.is-primary:hover { background: var(--rx-red-hi); }

/* ---------- mobile drawer ---------- */
.rx-root .rx-drawer, .rx-root .rx-mscrim { display: none; }
.rx-root .rx-mscrim { position: fixed; inset: 0; background: rgba(25, 25, 25, .5); z-index: 290; }
.rx-root .rx-drawer { position: fixed; top: 0; bottom: 0; inset-inline-start: 0; width: min(88vw, 380px); background: #fff; z-index: 300; flex-direction: column; box-shadow: 0 0 60px rgba(25, 25, 25, .25); transform: translateX(-100%); visibility: hidden; transition: transform .25s ease, visibility .25s; }
[dir="rtl"] .rx-root .rx-drawer { transform: translateX(100%); }
.rx-root .rx-drawer.is-open, [dir="rtl"] .rx-root .rx-drawer.is-open { transform: none; visibility: visible; }
.rx-root .rx-dr-h { height: 64px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid var(--rx-line); }
.rx-root .rx-dr-h img { height: 34px; width: auto; max-width: 200px; object-fit: contain; }
.rx-root .rx-dr-x { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rx-line); background: #fff; display: grid; place-items: center; cursor: pointer; color: var(--rx-ink); padding: 0; }
.rx-root .rx-dr-nav { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 16px; }
.rx-root .rx-dr-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 16px; }
.rx-root .rx-dr-quick a { height: 44px; border: 1px solid var(--rx-line); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 500; text-align: center; padding: 0 6px; }
.rx-root .rx-dr-quick a.is-hot { border-color: var(--rx-red); color: var(--rx-red); font-weight: 600; }
.rx-root .rx-dr-lbl { padding: 4px 16px 10px; font-size: 14px; font-weight: 600; color: var(--rx-mute); }
.rx-root .rx-acc { border-top: 1px solid #F0EFEF; }
.rx-root .rx-acc-b, .rx-root .rx-acc-a { width: 100%; min-height: 52px; padding: 0 16px; border: 0; display: flex; align-items: center; gap: 14px; font-size: 15px; font-weight: 500; text-align: start; background: #fff; color: var(--rx-ink); cursor: pointer; }
.rx-root .rx-acc-b.is-open { background: var(--rx-bg); color: var(--rx-red); }
.rx-root .rx-acc-b img, .rx-root .rx-acc-a img { width: 24px; height: 24px; object-fit: contain; }
.rx-root .rx-acc-b .rx-nm, .rx-root .rx-acc-a .rx-nm { flex: 1; }
.rx-root .rx-acc-b .rx-chev { transition: transform .2s; }
.rx-root .rx-acc-b.is-open .rx-chev { transform: rotate(180deg); }
.rx-root .rx-acc-p { display: none; padding: 2px 16px 16px; padding-inline-start: 54px; flex-direction: column; gap: 4px; }
.rx-root .rx-acc-p.is-open { display: flex; }
.rx-root .rx-acc-p > a, .rx-root .rx-acc-p .rx-sb > a { min-height: 40px; display: flex; align-items: center; font-size: 14px; }
.rx-root .rx-acc-p .rx-all { font-weight: 600; color: var(--rx-red); }
.rx-root .rx-sb { display: flex; flex-direction: column; gap: 6px; }
.rx-root .rx-kids { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 6px; }
.rx-root .rx-kids a { height: 32px; padding: 0 12px; border: 1px solid var(--rx-line); border-radius: 999px; display: flex; align-items: center; font-size: 13px; color: var(--rx-mute); }
.rx-root .rx-dr-brands { display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 4px 16px 16px; }
.rx-root .rx-dr-brands.is-open { display: grid; }
.rx-root .rx-dr-brands a { min-height: 56px; border: 1px solid var(--rx-line); border-radius: 8px; display: grid; place-items: center; padding: 8px; font-size: 12px; text-align: center; }
.rx-root .rx-dr-brands img { max-width: 100%; max-height: 32px; object-fit: contain; }
.rx-root .rx-dr-f { flex: none; border-top: 1px solid var(--rx-line); padding: 8px 16px; display: flex; flex-direction: column; }
.rx-root .rx-dr-f a, .rx-root .rx-dr-f button { min-height: 48px; border: 0; background: none; display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; cursor: pointer; color: var(--rx-ink); text-align: start; padding: 0; }

/* ---------- responsive ---------- */
@media (min-width: 861px) {
	.rx-root .rx-burger, .rx-root .rx-drawer, .rx-root .rx-mscrim { display: none !important; }
}

@media (max-width: 1100px) {
	.rx-root .rx-sec { --cols: min(var(--cols-d, 5), 4); }
	.rx-root .rx-sec.rx-sec-tiles { --cols: min(var(--cols-d, 8), 6); }
	.rx-root .rx-fg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rx-root .rx-svc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rx-root .rx-pay { display: none; }
	.rx-root .rx-act { font-size: 0; padding: 0 10px; }
	.rx-root .rx-act svg { margin: 0; }
	.rx-root .rx-nav1 { overflow-x: auto; scrollbar-width: none; }
	.rx-root .rx-nav1 > * { flex: 0 0 auto; }
}

@media (max-width: 860px) {
	.rx-root .rx-wrap { padding-inline: 16px; }
	.rx-root .rx-sec { --cols: min(var(--cols-d, 5), 3); }
	.rx-root .rx-sec.rx-sec-tiles { --cols: min(var(--cols-d, 8), 4); }
	.rx-root .rx-tb { height: auto; min-height: 36px; padding-block: 6px; }
	.rx-root .rx-tb > *, .rx-root .rx-tb-r > * { white-space: nowrap; }
	.rx-root .rx-tb-ex, .rx-root .rx-tb-contact, .rx-root .rx-tb-r .rx-sep { display: none; }
	.rx-root .rx-sticky { display: contents; }
	.rx-root .rx-hd { position: sticky; top: 0; z-index: 60; background: #fff; }
	.rx-root .rx-navrow, .rx-root .rx-v1s { display: none; }
	.rx-root .rx-v1g { grid-template-columns: minmax(0, 1fr); margin-top: 16px; }
	.rx-root .rx-burger { display: grid; }
	.rx-root .rx-mscrim.is-open { display: block; }
	.rx-root .rx-drawer { display: flex; }
}

@media (max-width: 640px) {
	.rx-root .rx-tb { font-size: 11px; gap: 4px 8px; flex-wrap: wrap; }
	.rx-root .rx-tb-r { gap: 8px; }
	.rx-root .rx-tb-r .rx-dd-btn svg { display: none; }
	.rx-root .rx-tb-r .rx-dd-btn { gap: 6px; }
	.rx-root .rx-act { gap: 0; padding: 0 8px; }
	.rx-root .rx-hd-in { height: auto; flex-wrap: wrap; padding-block: 10px; gap: 10px 8px; }
	.rx-root .rx-logo img { height: 36px; }
	.rx-root .rx-acts { margin-inline-start: auto; gap: 0; }
	.rx-root .rx-search { order: 3; flex: 1 1 100%; }
	.rx-root .rx-search-box { height: 44px; }
	.rx-root .rx-search-go { padding: 0 16px; }
	.rx-root .rx-sec { --cols: calc(var(--cols-m, 2) + .15); }
	.rx-root .rx-sec.rx-sec-tiles { --cols: calc(var(--cols-m, 2) + .2); }
	.rx-root .rx-bn { grid-template-columns: repeat(var(--cols-m, 2), minmax(0, 1fr)); gap: 10px; }
	.rx-root .rx-row.rx-row-grid { --cols: var(--cols-m, 2); }
	.rx-root .rx-h2:not(#_) { font-size: 22px; }
	.rx-root .rx-arrows { display: none; }
	.rx-root .rx-svc { grid-template-columns: minmax(0, 1fr); }
	.rx-root .rx-nl { padding: 24px 20px; gap: 20px; }
	.rx-root .rx-nlf, .rx-root .rx-nlt { min-width: 0; flex: 1 1 100%; }
	.rx-root .rx-fg { grid-template-columns: minmax(0, 1fr); padding-block: 40px 24px; gap: 28px; }
	.rx-root .rx-fb { flex-direction: column; align-items: flex-start; }
	.rx-ck { inset-inline: 12px; width: auto; bottom: 12px; }
	.rx-root .rx-hero-btn { width: 34px; height: 34px; margin-top: -17px; }
	.rx-root .rx-hero-prev { inset-inline-start: 8px; }
	.rx-root .rx-hero-next { inset-inline-end: 8px; }
	.rx-root .rx-dots { bottom: 10px; }
}

@media (max-width: 400px) {
	.rx-root .rx-wrap { padding-inline: 12px; }
	.rx-root .rx-tb-call svg { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.rx-root .rx-mq { animation: none; }
	.rx-root .rx-hero-track, .rx-root .rx-drawer { transition: none; }
}

.rx-root .rx-v1g.rx-v1g-nohero { grid-template-columns: 280px; }
.rx-root .rx-fly.rx-fly-nofeat.is-open { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 860px) { .rx-root .rx-cartdd { display: none !important; } }

.rx-root .rx-search-box input.tt-search-input:not(#_) { font-weight: 400; }

.rx-root h1:not(#_), .rx-root h2:not(#_), .rx-root h3:not(#_), .rx-root h4:not(#_) { margin: 0; padding: 0; border: 0; background: none; text-transform: none; }
.rx-root h2.rx-h2:not(#_)::after, .rx-root h2.rx-h2:not(#_)::before { content: none; }

/* gulfweb.css forces border and width on the search input with !important */
.rx-root .rx-search-box #search_keyname.tt-search-input:not(#_) { border: 0 !important; width: auto !important; flex: 1; min-width: 0; font-weight: 400; }
.rx-root .rx-add:not(#_), .rx-root .rx-feat .rx-btn:not(#_), .rx-root .rx-badge-t:not(#_), .rx-root .rx-search-go:not(#_) { text-transform: none; letter-spacing: normal; }
.rx-root .rx-add:not(#_) { font-size: 13px; font-weight: 600; line-height: 1.5; }
.rx-root .rx-badge-t.is-oos::first-letter { text-transform: uppercase; }
.rx-root .rx-add.is-disabled::first-letter { text-transform: uppercase; }

.rx-root .rx-bnw + .rx-sec, .rx-root .rx-v1g + .rx-sec { margin-top: 64px; }
.rx-root .rx-sec.rx-sec-tiles { margin-top: 64px; }

/* ---------- quick view ---------- */
.rx-root .rx-qv { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 24px; }
.rx-root .rx-qv[hidden] { display: none; }
.rx-root .rx-qv-scrim { position: absolute; inset: 0; background: rgba(25, 25, 25, .55); opacity: 0; transition: opacity .2s; }
.rx-root .rx-qv.is-open .rx-qv-scrim { opacity: 1; }
.rx-root .rx-qv-panel { position: relative; width: min(940px, 100%); max-height: calc(100dvh - 48px); display: flex; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 32px 80px rgba(25, 25, 25, .28); outline: 0; opacity: 0; transform: translateY(14px) scale(.985); transition: opacity .2s, transform .2s; }
.rx-root .rx-qv.is-open .rx-qv-panel { opacity: 1; transform: none; }
.rx-root .rx-qv-x { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 3; width: 36px; height: 36px; border-radius: 50%; border: 0; background: #fff; color: var(--rx-ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 8px rgba(25, 25, 25, .14); padding: 0; }
.rx-root .rx-qv-x:hover { color: var(--rx-red); }
.rx-root #rx-qv-body { display: flex; width: 100%; min-height: 0; }
.rx-root .rx-qv-g { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); width: 100%; min-height: 0; }

.rx-root .rx-qv-media { background: var(--rx-bg); padding: 28px; display: flex; flex-direction: column; gap: 16px; justify-content: center; min-width: 0; }
.rx-root .rx-qv-stage { position: relative; aspect-ratio: 1 / 1; border-radius: 12px; background: #fff; display: grid; place-items: center; overflow: hidden; }
.rx-root .rx-qv-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 16px; display: block; }
.rx-root .rx-qv-badge { position: absolute; top: 12px; inset-inline-start: 12px; background: var(--rx-red); color: #fff; font-size: 12px; font-weight: 600; line-height: 1; padding: 6px 8px; border-radius: 6px; }
.rx-root .rx-qv-thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 2px; }
.rx-root .rx-qv-thumb { flex: 0 0 56px; height: 56px; padding: 4px; border: 1.5px solid transparent; border-radius: 8px; background: #fff; cursor: pointer; }
.rx-root .rx-qv-thumb.is-on { border-color: var(--rx-ink); }
.rx-root .rx-qv-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }

.rx-root .rx-qv-info { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.rx-root .rx-qv-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 32px 32px 20px; display: flex; flex-direction: column; gap: 12px; }
.rx-root .rx-qv-brand { font-size: 14px; font-weight: 500; color: var(--rx-soft); align-self: flex-start; padding-inline-end: 44px; }
.rx-root h2.rx-qv-t:not(#_) { font-size: 22px; font-weight: 600; line-height: 1.35; letter-spacing: normal; padding-inline-end: 44px; }
.rx-root .rx-qv-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.rx-root .rx-qv-now { font-size: 28px; font-weight: 600; line-height: 1.2; }
.rx-root .rx-qv-now.is-sale { color: var(--rx-red); }
.rx-root .rx-qv-price s { font-size: 16px; color: var(--rx-soft); }
.rx-root .rx-qv-stock { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; }
.rx-root .rx-qv-stock::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--rx-green); }
.rx-root .rx-qv-stock.is-out::before { background: var(--rx-red); }
.rx-root .rx-qv-specs { margin: 0; padding: 12px 0; border-block: 1px solid var(--rx-line); display: grid; gap: 6px; font-size: 13px; }
.rx-root .rx-qv-specs div { display: flex; gap: 12px; }
.rx-root .rx-qv-specs dt { flex: 0 0 96px; color: var(--rx-soft); font-weight: 400; }
.rx-root .rx-qv-specs dd { margin: 0; font-weight: 500; }
.rx-root .rx-qv-desc { font-size: 14px; line-height: 1.65; color: #333; overflow-wrap: anywhere; }
[dir="rtl"] .rx-root .rx-qv-desc { line-height: 1.85; }
.rx-root .rx-qv-desc p { margin: 0 0 10px; }
.rx-root .rx-qv-desc ul, .rx-root .rx-qv-desc ol { margin: 0 0 10px; padding-inline-start: 20px; }
.rx-root .rx-qv-desc ul { list-style: disc; }
.rx-root .rx-qv-desc ol { list-style: decimal; }
.rx-root .rx-qv-desc img { height: auto; }

.rx-root .rx-qv-act { flex: none; display: flex; align-items: center; gap: 20px; padding: 16px 32px 24px; border-top: 1px solid var(--rx-line); background: #fff; }
.rx-root .rx-qv-btn:not(#_) { flex: 1; height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 10px; background: var(--rx-red); color: #fff; font-size: 15px; font-weight: 600; letter-spacing: normal; text-transform: none; cursor: pointer; transition: background .2s; }
.rx-root .rx-qv-btn:not(#_):hover { background: var(--rx-red-hi); color: #fff; }
.rx-root .rx-qv-btn.is-disabled:not(#_) { background: var(--rx-line); color: var(--rx-soft); cursor: not-allowed; }
.rx-root .rx-qv-more { font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.rx-root .rx-qv-empty { padding: 56px 32px; text-align: center; color: var(--rx-mute); width: 100%; }

.rx-root .rx-qv-skel i { display: block; height: 16px; border-radius: 6px; background: var(--rx-bg); animation: rxQvPulse 1.1s ease-in-out infinite alternate; }
.rx-root .rx-qv-skel i:nth-child(1) { width: 40%; }
.rx-root .rx-qv-skel i:nth-child(2) { width: 90%; height: 28px; }
.rx-root .rx-qv-skel i:nth-child(3) { width: 30%; height: 24px; }
.rx-root .rx-qv-skel i:nth-child(4) { width: 100%; height: 96px; }
.rx-root .rx-qv-skel .rx-qv-stage { background: var(--rx-line); animation: rxQvPulse 1.1s ease-in-out infinite alternate; }
@keyframes rxQvPulse { from { opacity: .55 } to { opacity: 1 } }

@media (max-width: 640px) {
	.rx-root .rx-qv { padding: 0; place-items: end stretch; }
	.rx-root .rx-qv-panel { width: 100%; max-height: 92dvh; border-radius: 16px 16px 0 0; transform: translateY(100%); }
	.rx-root .rx-qv-g { display: flex; flex-direction: column; overflow-y: auto; }
	.rx-root .rx-qv-media { padding: 16px; flex: none; }
	.rx-root .rx-qv-stage { aspect-ratio: 4 / 3; }
	.rx-root .rx-qv-info { flex: none; overflow: visible; }
	.rx-root .rx-qv-scroll { padding: 20px 16px 12px; overflow: visible; }
	.rx-root .rx-qv-act { position: sticky; bottom: 0; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
	.rx-root .rx-qv-scrim, .rx-root .rx-qv-panel { transition: none; }
	.rx-root .rx-qv-skel i, .rx-root .rx-qv-skel .rx-qv-stage { animation: none; }
}
.rx-root .rx-qv-g, .rx-root .rx-qv-scroll, .rx-root .rx-qv-thumbs { scrollbar-width: thin; scrollbar-color: #c9c9c9 transparent; }

/* ---------- inner-page shell (header + footer around a page body that is not styled by this file) ---------- */
body.rx-lock { overflow: hidden; }
.rx-root.rx-shell { display: contents; }
/* All Categories bar (v3): red button + links, dropdown panel below the row */
.rx-root .rx-navrow-bar { position: relative; background: #fff; }
.rx-root .rx-nav3 { height: 60px; gap: 28px; }
.rx-root .rx-cmb { background: var(--rx-red); color: #fff; border: 0; border-radius: 8px; height: 44px; padding: 0 20px; display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; cursor: pointer; flex-shrink: 0; }
.rx-root .rx-cmb:hover { background: var(--rx-red-hi); }
.rx-root .rx-cmb svg:last-child { transition: transform .15s; }
.rx-root .rx-cmb.is-open svg:last-child { transform: rotate(180deg); }
.rx-root .rx-cm { position: absolute; top: 100%; inset-inline: 0; z-index: 70; pointer-events: none; }
.rx-root .rx-cm-p { pointer-events: auto; width: 100%; background: #fff; border: 1px solid var(--rx-line); border-top: 0; border-radius: 0 0 12px 12px; box-shadow: 0 24px 48px rgba(25, 25, 25, .16); display: grid; grid-template-columns: 280px minmax(0, 1fr); overflow: hidden; }
.rx-root .rx-cm-l { border-inline-end: 1px solid var(--rx-line); padding: 8px 0; display: flex; flex-direction: column; max-height: calc(100vh - 200px); overflow-y: auto; }
.rx-root .rx-cm-l .rx-chip { height: 38px; flex-basis: 38px; padding: 0 20px; }
.rx-root .rx-cm-r { min-width: 0; max-height: calc(100vh - 200px); overflow-y: auto; }
.rx-root .rx-cm .rx-fly { position: static; width: auto; min-height: 0; border: 0; border-radius: 0; box-shadow: none; padding: 28px 32px; }
.rx-root .rx-cm-scrim { position: fixed; inset: 0; background: rgba(25, 25, 25, .35); z-index: -1; }
.rx-dir { display: contents; }
/* the inner pages' mobile bottom bar (z-index 1000) would sit on top of the open drawer / quick view */
body.rx-lock .mobile-bottom-nav { display: none; }
/* keep the footer's last row (copyright, back to top) clear of the fixed mobile bottom bar */
@media (max-width: 480px) { body:has(.mobile-bottom-nav) .rx-root .rx-fb-wrap { padding-bottom: 72px; } }
/* page bodies: the theme's .container (1200px) is narrower than the header/footer .rx-wrap; give it the same content width */
/* the container keeps its own 10px padding, so its box is 10px wider per side than the header wrap: the content then lands on the same edge */
body:has(.rx-shell) .container { width: calc(100% - 28px); max-width: 1292px; margin-inline: auto; padding-inline: 10px; }
@media (max-width: 860px) { body:has(.rx-shell) .container { width: calc(100% - 12px); } }
@media (max-width: 400px) { body:has(.rx-shell) .container { width: calc(100% - 4px); } }
/* a container inside a container (cart related products, ...) must not narrow twice */
body:has(.rx-shell) .container .container { width: auto; max-width: none; margin-inline: 0; padding-inline: 0; }
/* the theme pads these wrappers on phones, which would push the container in a second time */
@media (max-width: 860px) { body:has(.rx-shell) .tt-breadcrumb, body:has(.rx-shell) .container-indent, body:has(.rx-shell) #tt-pageContent { padding-inline: 0; } }
body:has(.rx-shell) .container.container-fluid-custom-mobile-padding:not(.container .container) { padding-inline: 10px !important; }

/* inner-page bar: highlight the current page; Offers keeps its red only when nothing else is active */
.rx-root .rx-nav3 a.is-active { color: var(--rx-red); font-weight: 600; }
.rx-root .rx-nav3:has(a.is-active) a.rx-hot:not(.is-active) { color: inherit; font-weight: 500; }

/* inner pages: price gap mirrors in RTL (theme only sets margin-right); toast stays readable over the header */
body:has(.rx-dir[dir="rtl"]) .tt-product .tt-price .new-price { margin: 0 0 0 7px; }
body:has(.rx-shell) #toast-container > .toast { opacity: 1; }

/* top-bar dropdowns (account, currency) open over the sticky header instead of sliding under it */
.rx-root .rx-tbar:has(.is-open) { z-index: 61; }

/* RTL: a product carousel with fewer slides than fit starts at the right edge, like the heading (slick lays the track out LTR) */
body:has(.rx-dir[dir="rtl"]) .tt-carousel-products .slick-track { margin-left: auto !important; margin-right: 0 !important; }

/* narrow product cards (phones): price and Add to cart stay on one line instead of wrapping inside the card */
.rx-root .rx-price .rx-now { white-space: nowrap; }
.rx-root .rx-add { white-space: nowrap; }
@media (max-width: 575px) {
	.rx-root .rx-card-body { padding: 0 10px 12px; }
	.rx-root .rx-price .rx-now { font-size: 15px; }
	.rx-root .rx-add:not(#_) { gap: 5px; padding: 0 4px; font-size: 12px; }
	.rx-root .rx-add svg { width: 14px; height: 14px; flex: none; }
}

/* phones: product rows show two cards at a time whatever the admin's mobile column count (three is too tight for the card) */
@media (max-width: 640px) {
	.rx-root .rx-sec:not(.rx-sec-tiles) { --cols: calc(min(var(--cols-m, 2), 2) + .15); }
	.rx-root .rx-sec:not(.rx-sec-tiles) .rx-row.rx-row-grid { --cols: min(var(--cols-m, 2), 2); }
}

/* mobile sticky header: on touch devices the theme sets `overflow-x: hidden` on <html> (html.touch-device) as well as on
   <body>, so the viewport takes html's value and body is left as its own scroll box, which stops position: sticky from
   sticking. `clip` hides the same overflow without creating a scroll box. */
@supports (overflow: clip) {
	html.touch-device:has(.rx-root), body:has(.rx-root):not(.rx-lock) { overflow-x: clip; overflow-y: visible; }
}

/* phones: bigger logo, kept at the start of the row next to the menu button */
@media (max-width: 640px) {
	.rx-root .rx-logo img { height: 48px; max-width: 130px; }
}