/* ==============================================================
   Ruxye - custom CSS
   1. Full-bleed hero
   2. Browse-all pill under every product row
   3. Arabic storefront serves Arabic banner artwork
   4. Shop-by-brand rail
   Brand: #1877F2 on white (hover #145DBD)
   ============================================================== */

/* --- 1. Hero: full-bleed first banner ----------------------- */
.s-block--photos-slider { margin-top: 0 !important; }

.s-block--photos-slider .swiper.s-slider-container {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.s-block--photos-slider .swiper-slide {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-radius: 0 !important;
}

.s-block--photos-slider .swiper-slide > a,
.s-block--photos-slider .swiper-slide > div {
  display: block;
  width: 100%;
  border-radius: 0 !important;
}

.s-block--photos-slider .swiper-slide img {
  display: block;
  width: 100% !important;
  max-height: 810px;
  object-fit: cover !important;
  border-radius: 0 !important;
}

/* --- 2. Browse-all pill under every product row ------------- */
salla-slider.s-slider-wrapper:has(a.s-slider-block__display-all) {
  padding-bottom: 76px;
}

salla-slider.s-slider-wrapper:has(a.s-slider-block__display-all) a.s-slider-block__display-all {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: inline-block;
  padding: 13px 34px;
  border-radius: 9999px;
  background-color: #1877F2;
  color: #ffffff !important;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .2s ease;
}

salla-slider.s-slider-wrapper:has(a.s-slider-block__display-all) a.s-slider-block__display-all:hover,
salla-slider.s-slider-wrapper:has(a.s-slider-block__display-all) a.s-slider-block__display-all:focus-visible {
  background-color: #145DBD;
  color: #ffffff !important;
}

salla-slider.s-slider-wrapper:has(a.s-slider-block__display-all) a.s-slider-block__display-all:focus-visible {
  outline: 2px solid #145DBD;
  outline-offset: 3px;
}

/* --- 3. Arabic storefront gets Arabic artwork ----------------
   Matched on the English file's own UUID so the rule survives
   blocks being reordered. Each pair is the same pixel size.
   ------------------------------------------------------------ */

/* hero slide 1 - brand */
html[lang="ar"] img[src*="8389e529-6834-4f5c"] {
  content: url("https://cdn.files.salla.network/homepage/967431446/03e3bef2-6abe-4488-88bb-50e66d479839-original.webp");
}

/* hero slide 2 - gaming */
html[lang="ar"] img[src*="4763079e-08e6-4d66"] {
  content: url("https://cdn.files.salla.network/homepage/967431446/71186a2c-7fd9-4c29-beae-3d07f60c76d7-original.webp");
}

/* hero slide 3 - security */
html[lang="ar"] img[src*="72cae0c9-cec0-4b60"] {
  content: url("https://cdn.files.salla.network/homepage/967431446/d7d8062a-5dfd-4506-85a3-8a17ee0a6464-original.webp");
}

/* shop by category */
html[lang="ar"] img[src*="6953b1bc-8447-420c"] {
  content: url("https://cdn.files.salla.network/homepage/967431446/2b20ba9f-ff32-4d9d-8779-7c9e45cb1134-original.webp");
}

/* 01 - power banks */
html[lang="ar"] img[src*="dbd25b19-c505-4bdb"] {
  content: url("https://cdn.files.salla.network/homepage/967431446/eda78e5e-2f37-4dc5-91c3-082a4d1f3bc1-original.webp");
}

/* 02 - audio */
html[lang="ar"] img[src*="e1478ffa-9599-4459"] {
  content: url("https://cdn.files.salla.network/homepage/967431446/54ddb958-70e5-43b5-ab7e-f8db46b2c5f1-original.webp");
}

/* 03 - wearables */
html[lang="ar"] img[src*="c7e80a40-2cc0-4d91"] {
  content: url("https://cdn.files.salla.network/homepage/967431446/fdb8a297-ef1f-4b58-ab05-9b4fb9d7bf21-original.webp");
}

/* trust strip */
html[lang="ar"] img[src*="ad93f1f8-df62-4e6e"] {
  content: url("https://cdn.files.salla.network/other/967431446/30295202-bf99-4784-b40b-6d703cc35d3e-original.webp");
}

/* --- 4. Shop-by-brand rail ----------------------------------
   The tile image is painted on an inner .lazy__bg div, not on
   the <a>, so the sizing has to go there or the logo collapses
   to nothing and only the text label shows.
   ------------------------------------------------------------ */
.s-block--banners .square-photos-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.s-block--banners .banner-entry.square-photos {
  position: relative;
  display: block;
  background-color: transparent !important;
  padding: 0 !important;
  height: auto !important;
  aspect-ratio: 1 / 1.16;
  border-radius: 0 !important;
  overflow: visible !important;
  transition: transform .2s ease;
}

.s-block--banners .banner-entry.square-photos .lazy__bg {
  position: absolute !important;
  top: 0; left: 0; right: 0;
  height: 86% !important;
  min-height: 0 !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

.s-block--banners .banner-entry.square-photos h3 {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #08111F;
  background: none !important;
  border: 0 !important;
}

.s-block--banners .banner-entry.square-photos:hover { transform: translateY(-4px); }

@media (max-width: 900px) {
  .s-block--banners .square-photos-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .s-block--banners .banner-entry.square-photos { transition: none; }
  .s-block--banners .banner-entry.square-photos:hover { transform: none; }
}

/* ==============================================================
   5. Product page - noon-style layout
      The theme puts the description inside the buy column, which
      pushes "add to cart" far below the gallery. The storefront JS
      relocates .product__description into #ruxye-details below the
      gallery; these rules style that section.
   ============================================================== */
.ruxye-details {
  width: 100%;
  align-self: stretch;
  box-sizing: border-box;
  max-width: 1280px;
  margin: 8px auto 40px;
  padding: 0 10px;
}
.ruxye-details__title {
  font-size: 22px;
  font-weight: 700;
  color: #08111F;
  margin: 0 0 14px;
}
.ruxye-details__body {
  background: #fff;
  border: 1px solid #E3EAF3;
  border-radius: 14px;
  padding: 24px 26px;
}
.ruxye-details .product__description {
  padding: 0 !important;
  margin: 0 !important;
  width: auto;
  max-width: none;
}
.ruxye-details .product__description h3 {
  font-size: 17px;
  font-weight: 700;
  color: #08111F;
  margin: 26px 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #1877F2;
  display: inline-block;
}
.ruxye-details .product__description h3:first-child { margin-top: 0; }
.ruxye-details .product__description p {
  line-height: 1.9;
  color: #33415C;
  margin: 0 0 12px;
}
.ruxye-details .product__description ul {
  margin: 0 0 18px;
  padding-inline-start: 22px;
  list-style: disc;
}
.ruxye-details .product__description li {
  line-height: 1.85;
  color: #33415C;
  margin: 0 0 8px;
}
.ruxye-details .product__description table {
  width: 100%;
  border-collapse: collapse;
  margin: 6px 0 10px;
  display: table;
}
.ruxye-details .product__description table tr:nth-child(odd) { background: #F7FAFF; }
.ruxye-details .product__description table td {
  padding: 11px 14px;
  border-bottom: 1px solid #EDF1F7;
  font-size: 14px;
  color: #33415C;
  vertical-align: top;
}
.ruxye-details .product__description table td:first-child {
  width: 38%;
  color: #08111F;
  font-weight: 600;
}

/* keep the buy column tight next to the gallery once the text moves out */
.container--product-details .product-form { margin-top: 12px; }

@media (max-width: 768px) {
  .ruxye-details__body { padding: 18px 16px; border-radius: 10px; }
  .ruxye-details__title { font-size: 19px; }
  .ruxye-details .product__description table td { padding: 9px 10px; font-size: 13px; }
  .ruxye-details .product__description table td:first-child { width: 45%; }
}

/* ==============================================================
   6. Header - bigger logo, prominent search  (ruxye-header)
   ============================================================== */
a.navbar-brand {
  height: auto !important;
  max-height: none !important;
}
img[src*="af432489-c475-425f-a058-a55c7f180e72"] {
  width: 74px !important;
  height: 74px !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
}

.header-search { flex: 1; }
.s-search-input-wrapper,
.s-search-placeholder-wrapper { height: 50px !important; }
.s-search-input {
  height: 50px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #08111F !important;
  background: #FFFFFF !important;
  border: 2px solid #D8E3F2 !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 12px rgba(8, 17, 31, .07) !important;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.s-search-input::placeholder {
  color: #66768C !important;
  font-weight: 500 !important;
  opacity: 1 !important;
}
.s-search-input:hover { border-color: #B9CFEA !important; }
.s-search-input:focus {
  border-color: #1877F2 !important;
  box-shadow: 0 0 0 4px rgba(24, 119, 242, .16) !important;
  outline: none !important;
}

@media (max-width: 768px) {
  img[src*="af432489-c475-425f-a058-a55c7f180e72"] { width: 83px !important; height: 83px !important; max-height: none !important; }
  .s-search-input-wrapper,
  .s-search-placeholder-wrapper { height: 44px !important; }
  .s-search-input { height: 44px !important; font-size: 14px !important; }
}

/* ==============================================================
   7. Flash sale rail (replaces the shop-by-category banner)
   ============================================================== */
.ruxye-flash {
  width: 100%;
  align-self: stretch;
  box-sizing: border-box;
  max-width: 1280px;
  margin: 24px auto 30px;
  padding: 22px 24px 18px;
  background: linear-gradient(135deg, #0B1B33 0%, #12294A 55%, #1877F2 160%);
  border-radius: 16px;
  color: #fff;
}
.ruxye-flash__head { display: flex; align-items: baseline; gap: 14px; margin: 0 0 16px; flex-wrap: wrap; }
.ruxye-flash__title { font-size: 21px; font-weight: 700; margin: 0; color: #fff; }
.ruxye-flash__sub { font-size: 13px; color: rgba(255,255,255,.72); }
.ruxye-flash__all { margin-inline-start: auto; font-size: 13px; font-weight: 600; color: #8FC0FF; text-decoration: none; }
.ruxye-flash__scroll { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; }
.ruxye-flash__card {
  flex: 0 0 auto; width: 190px; background: #fff; border-radius: 12px;
  padding: 10px; text-decoration: none; color: #08111F; position: relative;
  transition: transform .18s ease;
}
.ruxye-flash__card:hover { transform: translateY(-3px); }
.ruxye-flash__badge {
  position: absolute; top: 8px; inset-inline-start: 8px; z-index: 2;
  background: #E8313B; color: #fff; font-size: 12px; font-weight: 700;
  border-radius: 999px; padding: 3px 9px;
}
.ruxye-flash__thumb { width: 100%; height: 150px; object-fit: contain; display: block; margin-bottom: 8px; }
.ruxye-flash__name {
  font-size: 13px; line-height: 1.45; font-weight: 500; margin: 0 0 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ruxye-flash__price { font-size: 15px; font-weight: 700; color: #08111F; }
.ruxye-flash__was { font-size: 12px; color: #8A94A6; text-decoration: line-through; margin-inline-start: 6px; }
@media (max-width: 768px) {
  .ruxye-flash { padding: 16px 14px 12px; border-radius: 12px; }
  .ruxye-flash__card { width: 158px; }
  .ruxye-flash__thumb { height: 120px; }
}

/* ==============================================================
   8. ruxye-rail-centre - keep the brand & category chips centred
      whatever their count. "safe center" so a long rail that
      overflows still scrolls from the start instead of clipping.
   ============================================================== */
.ruxye-rail__scroll {
  justify-content: center;
  justify-content: safe center;
}
.ruxye-rail__head { justify-content: center; text-align: center; }
.ruxye-rail__head .ruxye-rail__clear { margin-inline-start: 10px; }


/* ==============================================================
   10. ruxye-ltr-header - the Arabic header keeps the same physical
       arrangement as English: logo on the left, account / cart /
       cart value on the right. Only the header row is flipped to
       LTR; Arabic label text still renders right-to-left by bidi.
   ============================================================== */
html[lang="ar"] header.store-header .container > .flex.items-stretch { direction: ltr; }
html[lang="ar"] header.store-header .main-menu { direction: ltr; }
html[lang="ar"] header.store-header .main-menu > li > a { text-align: center; }
html[lang="ar"] .ruxye-searchbar .header-search { direction: rtl; }

/* the theme forces menu items visible with !important, so an inline
   display:none is not enough to hide an empty category */
.ruxye-cat-empty { display: none !important; }

/* ==============================================================
   11. ruxye-cats - category bar: circular icon above the name,
       with a dropdown for parents that have sub-categories.
       Replaces the theme's text-only menu on desktop.
   ============================================================== */
@media (min-width: 993px) {
  header.store-header custom-main-menu { display: none !important; }
}
.ruxye-cats { width: 100%; background: #fff; border-top: 1px solid #EDF1F7; }
.ruxye-cats__inner {
  max-width: 1280px; margin: 0 auto; padding: 10px 20px 8px;
  display: flex; justify-content: center; justify-content: safe center;
  gap: 8px; flex-wrap: wrap; direction: ltr;
}
.ruxye-cats__item { position: relative; }
.ruxye-cats__link {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 8px 14px 10px; border-radius: 12px; text-decoration: none;
  min-width: 96px; transition: background .16s ease;
}
.ruxye-cats__link:hover { background: #F4F8FF; }
.ruxye-cats__disc {
  width: 52px; height: 52px; border-radius: 50%;
  background: #F4F8FF; border: 2px solid #E3EAF3;
  display: grid; place-items: center; overflow: hidden;
  transition: border-color .16s ease, transform .16s ease;
}
.ruxye-cats__item:hover .ruxye-cats__disc { border-color: #1877F2; transform: translateY(-2px); }
.ruxye-cats__disc svg { width: 26px; height: 26px; stroke: #1877F2; fill: none; stroke-width: 1.8; }
.ruxye-cats__disc img { width: 100%; height: 100%; object-fit: cover; }
.ruxye-cats__label {
  font-size: 12.5px; font-weight: 600; color: #08111F; text-align: center;
  line-height: 1.3; max-width: 112px;
}
.ruxye-cats__caret { font-size: 10px; color: #8A94A6; margin-inline-start: 3px; }
.ruxye-cats__drop {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  background: #fff; border: 1px solid #E3EAF3; border-radius: 12px;
  box-shadow: 0 12px 34px rgba(8,17,31,.13);
  padding: 8px; min-width: 210px; z-index: 60; display: none;
}
.ruxye-cats__item:hover .ruxye-cats__drop,
.ruxye-cats__item.is-open .ruxye-cats__drop { display: block; }
.ruxye-cats__drop a {
  display: block; padding: 9px 12px; border-radius: 8px;
  font-size: 13.5px; color: #33415C; text-decoration: none; white-space: nowrap;
}
.ruxye-cats__drop a:hover { background: #F4F8FF; color: #1877F2; }
html[lang="ar"] .ruxye-cats__drop a { text-align: right; }
@media (max-width: 992px) {
  /* keep the departments reachable on phones as a scrollable strip */
  .ruxye-cats__inner {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 2px;
    padding: 8px 10px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ruxye-cats__inner::-webkit-scrollbar { display: none; }
  .ruxye-cats__link { min-width: 74px; padding: 6px 6px 8px; }
  .ruxye-cats__disc { width: 44px; height: 44px; }
  .ruxye-cats__disc svg { width: 22px; height: 22px; }
  .ruxye-cats__label { font-size: 11px; max-width: 78px; }
  /* a dropdown inside a horizontal scroller gets clipped, so on touch the
     department link simply opens its own page, which lists everything in it */
  .ruxye-cats__drop { display: none !important; }
  .ruxye-cats__caret { display: none; }
}

/* ==============================================================
   12. no flash of out-of-stock brands: the chips stay invisible
       until the live brand list has been applied. Height is
       reserved so revealing them does not shift the page.
   ============================================================== */
.ruxye-rail:not(.ruxye-ready) .ruxye-rail__scroll { visibility: hidden; }
.ruxye-rail .ruxye-rail__scroll { min-height: 118px; }
@media (max-width: 768px) {
  .ruxye-rail .ruxye-rail__scroll { min-height: 104px; }
}

/* ==============================================================
   13. ruxye-promo - banner placed above the Mobiles row, matching
       the rhythm of the theme's other banner blocks. Built in CSS
       because there is no media-upload endpoint to host artwork.
   ============================================================== */
.ruxye-promo {
  width: 100%;
  box-sizing: border-box;
  max-width: 1280px;
  margin: 26px auto;
  padding: 34px 44px;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 28%, rgba(24,119,242,.42), transparent 58%),
    radial-gradient(circle at 96% 88%, rgba(105,167,247,.28), transparent 52%),
    linear-gradient(120deg, #060D18 0%, #0B1B33 52%, #12294A 100%);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}
.ruxye-promo__text { flex: 1 1 340px; }
.ruxye-promo__eyebrow {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13px; font-weight: 600; letter-spacing: .32em;
  color: #8FC0FF; margin: 0 0 12px; direction: ltr;
}
html[lang="ar"] .ruxye-promo__eyebrow { text-align: right; }
.ruxye-promo__rule { width: 56px; height: 4px; border-radius: 2px; background: #1877F2; margin: 0 0 16px; }
html[lang="ar"] .ruxye-promo__rule { margin-inline-start: 0; }
.ruxye-promo__title { font-size: 34px; font-weight: 700; line-height: 1.18; margin: 0 0 10px; color: #fff; }
.ruxye-promo__sub { font-size: 16px; font-weight: 300; color: rgba(255,255,255,.8); margin: 0 0 18px; line-height: 1.6; }
.ruxye-promo__chips { display: flex; flex-wrap: wrap; gap: 9px; }
.ruxye-promo__chip {
  border: 1px solid rgba(255,255,255,.26); border-radius: 999px;
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.88);
  font-size: 13px; padding: 7px 16px;
}
.ruxye-promo__cta {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: .5em;
  background: #1877F2; color: #fff; text-decoration: none;
  font-size: 16px; font-weight: 600; padding: 15px 34px; border-radius: 999px;
  box-shadow: 0 10px 30px rgba(24,119,242,.42);
  transition: transform .16s ease;
}
.ruxye-promo__cta:hover { transform: translateY(-2px); color: #fff; }
@media (max-width: 768px) {
  .ruxye-promo { padding: 24px 20px; margin: 18px auto; border-radius: 12px; }
  .ruxye-promo__title { font-size: 25px; }
  .ruxye-promo__sub { font-size: 14px; }
  .ruxye-promo__cta { width: 100%; justify-content: center; }
}

/* ==============================================================
   14. ruxye-badge - "% off" flag on discounted product cards, and
       15. ruxye-top - back-to-top button
   ============================================================== */
.s-product-card-image { position: relative; }
.ruxye-badge {
  position: absolute; top: 10px; inset-inline-start: 10px; z-index: 3;
  background: #E8313B; color: #fff;
  font-size: 12px; font-weight: 700; line-height: 1;
  padding: 6px 10px; border-radius: 999px;
  box-shadow: 0 4px 12px rgba(232,49,59,.34);
  pointer-events: none; direction: ltr;
}
.s-product-card-sale-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }

.ruxye-top {
  position: fixed; bottom: 22px; inset-inline-end: 22px; z-index: 90;
  width: 46px; height: 46px; border-radius: 50%;
  background: #08111F; color: #fff; border: none; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 8px 26px rgba(8,17,31,.3);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.ruxye-top.is-on { opacity: 1; visibility: visible; transform: translateY(0); }
.ruxye-top:hover { background: #1877F2; }
.ruxye-top svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 2.2; }
@media (max-width: 768px) {
  .ruxye-top { width: 42px; height: 42px; bottom: 16px; inset-inline-end: 16px; }
  .ruxye-badge { font-size: 11px; padding: 5px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .ruxye-top { transition: none; }
}

/* ==============================================================
   16. ruxye-card - product card polish.
       The theme sets the title at 20px and the price at 14px, which
       inverts the hierarchy, and leaves titles unclamped so rows end
       up ragged. This evens the grid and lets the price lead.
   ============================================================== */
custom-salla-product-card.s-product-card-entry {
  border: 1px solid #E9EFF7;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
custom-salla-product-card.s-product-card-entry:hover {
  border-color: #D3E2F6;
  box-shadow: 0 12px 30px rgba(8, 17, 31, .1);
  transform: translateY(-3px);
}
.s-product-card-image { background: #fff; }
.s-product-card-image img { mix-blend-mode: multiply; }

.s-product-card-content-title,
custom-salla-product-card h3 {
  font-size: 14.5px !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
  color: #26334D !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 43px;
  margin-bottom: 6px !important;
}
.s-product-card-price,
.s-product-card-sale-price {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #08111F !important;
}
.s-product-card-sale-price del,
.s-product-card-sale-price s,
.s-product-card-sale-price .before-price {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #94A1B5 !important;
}

@media (max-width: 768px) {
  .s-product-card-content-title,
  custom-salla-product-card h3 { font-size: 13px !important; min-height: 39px; }
  .s-product-card-price,
  .s-product-card-sale-price { font-size: 15px !important; }
  custom-salla-product-card.s-product-card-entry:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  custom-salla-product-card.s-product-card-entry { transition: none; }
  custom-salla-product-card.s-product-card-entry:hover { transform: none; }
}

/* ==============================================================
   17. ruxye-topbar - noon-style header: logo left, search in the
       middle, account / cart / language on the right, on brand blue.
   ============================================================== */
.main-nav-container { background: #1877F2 !important; box-shadow: none !important; }
.main-nav-container .container > .flex.items-stretch { align-items: center !important; gap: 22px; }

/* the wordmark is dark navy on an opaque white background, so inverting it
   turns the whole tile white. Sit it on a white pill instead, like noon does. */
a.navbar-brand {
  background: #fff;
  border-radius: 12px;
  padding: 7px 16px;
  margin: 12px 0;
  display: inline-flex !important;
  align-items: center;
  align-self: center;
  flex: 0 0 auto;
}
a.navbar-brand img { filter: none !important; }

/* search sits between logo and icons */
.main-nav-container .header-search {
  flex: 1 1 auto !important;
  max-width: 720px;
  margin: 0 auto;
}
.main-nav-container .s-search-input {
  height: 46px !important;
  border: none !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  background: #fff !important;
}
.main-nav-container .s-search-input:focus {
  box-shadow: 0 0 0 3px rgba(255,255,255,.45) !important;
}
.main-nav-container .s-search-input-wrapper,
.main-nav-container .s-search-placeholder-wrapper { height: 46px !important; }

/* icons + language on the right, in white */
.ruxye-headright { display: flex; align-items: center; gap: 14px; margin-inline-start: 10px; }
.main-nav-container .flex.items-center.justify-end { gap: 14px; }
.main-nav-container .s-user-menu-login-btn svg,
.main-nav-container [class*=cart] svg,
.main-nav-container svg { color: #fff; fill: currentColor; }
.main-nav-container a, .main-nav-container button, .main-nav-container span { color: #fff; }
.main-nav-container a.navbar-brand, .main-nav-container a.navbar-brand * { color: inherit; }
.main-nav-container .s-search-input { color: #08111F !important; }
.main-nav-container .s-search-input::placeholder { color: #66768C !important; }
.ruxye-headright .top-navbar__inner,
.ruxye-headright a, .ruxye-headright button, .ruxye-headright span { color: #fff !important; }
.ruxye-headright [class*=rounded] { background: rgba(255,255,255,.16) !important; border-color: rgba(255,255,255,.28) !important; }
.top-navbar { display: none !important; }

.ruxye-cats { border-top: none; }

@media (max-width: 992px) {
  .main-nav-container .container > .flex.items-stretch { gap: 10px; flex-wrap: wrap; }
  .main-nav-container .header-search { order: 3; flex: 1 0 100% !important; max-width: none; margin: 4px 0 10px; }
  .main-nav-container .s-search-input { height: 42px !important; }
}

/* ==============================================================
   18. ruxye-a11y + finishing touches
   ============================================================== */
/* a visible focus ring for keyboard users (the theme removes outlines) */
a:focus-visible, button:focus-visible, input:focus-visible,
.ruxye-chip:focus-visible, .ruxye-cats__link:focus-visible {
  outline: 3px solid #1877F2 !important;
  outline-offset: 2px;
  border-radius: 6px;
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* the product page prints the price twice - keep the prominent one, drop the
   duplicate label row inside the buy box */
.product-single .s-product-price-label { display: none; }

/* tidy the detail rows under the title */
.product-single [class*=sku] { font-size: 13px; color: #66768C; }

/* ==============================================================
   19. ruxye-headicons - the header action group.
       The theme colours the cart glyph slate and the cart total
       black, which both disappear on the blue bar, and the count
       bubble is a dark red that clips the icon.
   ============================================================== */
.main-nav-container .flex.items-center.justify-end {
  gap: 10px;
  align-items: center;
}

/* account + cart share one circular button treatment */
.main-nav-container .s-user-menu-login-btn,
.main-nav-container .header-btn__icon.sicon-shopping-bag {
  width: 42px !important;
  height: 42px !important;
  border: 1px solid rgba(255, 255, 255, .45) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .12) !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transition: background .16s ease, border-color .16s ease;
}
.main-nav-container .s-user-menu-login-btn:hover,
.main-nav-container .header-btn__icon.sicon-shopping-bag:hover {
  background: rgba(255, 255, 255, .24) !important;
  border-color: #fff !important;
}
.main-nav-container .s-user-menu-login-btn svg { width: 20px; height: 20px; color: #fff !important; }
.main-nav-container .header-btn__icon.sicon-shopping-bag::before { color: #fff !important; font-size: 19px; }

/* the cart total was black - make it read on blue */
.main-nav-container .s-cart-summary-wrapper { gap: 8px; }
.main-nav-container .s-cart-summary-content,
.main-nav-container .s-cart-summary-total,
.main-nav-container .s-cart-summary-total *,
.main-nav-container .sicon-sar {
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

/* the count bubble: brighter red, ringed so it reads as a badge not a smudge */
.main-nav-container .s-cart-summary-count {
  /* the header row is forced to LTR for this layout, but the theme still emits
     RTL-flipped offsets for the badge, which drop it on top of the cart total in
     Arabic. Pin it to the icon explicitly so both languages match. */
  /* anchored to the icon box by ruxye-cartbadge, so one offset works in both languages */
  left: auto !important;
  right: -5px !important;
  top: -5px !important;
  background: #E8313B !important;
  color: #fff !important;
  border: 2px solid #1877F2 !important;
  min-width: 20px; height: 20px;
  font-size: 11px !important;
  font-weight: 700 !important;
  display: grid; place-items: center;
  box-shadow: none !important;
}

/* language / currency: one pill, not a pill inside a pill, and nothing
   drawn around the empty helper elements the theme ships */
.ruxye-headright { margin-inline-start: 4px; display: flex; align-items: center; }
.ruxye-headright, .ruxye-headright * { color: #fff !important; font-size: 13.5px !important; font-weight: 600 !important; }
/* strip the theme's own pill so only ours shows */
.ruxye-headright * {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
/* the single pill lives on the element that actually holds the text */
.ruxye-headright > div {
  border: 1px solid rgba(255, 255, 255, .45) !important;
  border-radius: 999px !important;
  padding: 7px 14px !important;
  transition: background .16s ease, border-color .16s ease;
}
.ruxye-headright > div:hover { background: rgba(255, 255, 255, .18) !important; border-color: #fff !important; }
/* anything with no text gets no chrome */
.ruxye-headright > div:empty,
.ruxye-headright salla-menu { border: none !important; padding: 0 !important; }

@media (max-width: 992px) {
  .main-nav-container .s-cart-summary-content { display: none; }
  .ruxye-headright > * { padding: 6px 10px !important; }
  .main-nav-container .s-user-menu-login-btn,
  .main-nav-container .header-btn__icon.sicon-shopping-bag { width: 38px !important; height: 38px !important; }
}

/* ==============================================================
   20. ruxye-pagehead - category pages had no heading naming the
       category; the only h1 was the product count. 21. ruxye-foot -
       the footer's "useful links" column shipped empty.
   ============================================================== */
.ruxye-pagehead { margin: 4px 0 18px; }
.ruxye-pagehead__title {
  font-size: 28px; font-weight: 700; color: #08111F; margin: 0 0 6px; line-height: 1.25;
}
.ruxye-pagehead__count { font-size: 14px; color: #66768C; margin: 0; }
.ruxye-pagehead + * .s-block-title, .product-index main h1.ruxye-hidden-count { display: none !important; }
.ruxye-hidden-count { display: none !important; }
@media (max-width: 768px) { .ruxye-pagehead__title { font-size: 22px; } }

.ruxye-foot-links { display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }
.ruxye-foot-links a { font-size: 14px; opacity: .85; text-decoration: none; }
.ruxye-foot-links a:hover { opacity: 1; text-decoration: underline; }

/* ==============================================================
   22. ruxye-noflash - the theme renders the description inside the
       buy column and our script then moves it below the gallery,
       so the old layout painted for a moment first. Keep it out of
       the flow until it has been moved; the fallback class below
       guarantees it still shows if the script never runs.
   ============================================================== */
body.product-single .product__description { display: none !important; }
body.product-single #ruxye-details .product__description { display: block !important; }
html.ruxye-desc-fallback body.product-single .product__description { display: block !important; }

/* ==============================================================
   23. ruxye-promo accents - the homepage now carries a lead-in
       banner above each main row, so each takes its own accent
       instead of four identical blue panels down the page.
   ============================================================== */
.ruxye-promo--tv {
  background:
    radial-gradient(circle at 82% 28%, rgba(124,58,237,.42), transparent 58%),
    radial-gradient(circle at 96% 88%, rgba(167,139,250,.26), transparent 52%),
    linear-gradient(120deg, #0A0714 0%, #1A1033 52%, #2A1A52 100%);
}
.ruxye-promo--tv .ruxye-promo__eyebrow { color: #C4B5FD; }
.ruxye-promo--tv .ruxye-promo__rule { background: #7C3AED; }
.ruxye-promo--tv .ruxye-promo__cta { background: #7C3AED; box-shadow: 0 10px 30px rgba(124,58,237,.42); }

.ruxye-promo--cases {
  background:
    radial-gradient(circle at 82% 28%, rgba(13,148,136,.42), transparent 58%),
    radial-gradient(circle at 96% 88%, rgba(45,212,191,.24), transparent 52%),
    linear-gradient(120deg, #04100F 0%, #072A26 52%, #0B423B 100%);
}
.ruxye-promo--cases .ruxye-promo__eyebrow { color: #7FE3D4; }
.ruxye-promo--cases .ruxye-promo__rule { background: #0D9488; }
.ruxye-promo--cases .ruxye-promo__cta { background: #0D9488; box-shadow: 0 10px 30px rgba(13,148,136,.42); }

.ruxye-promo--tablets {
  background:
    radial-gradient(circle at 82% 28%, rgba(225,29,72,.40), transparent 58%),
    radial-gradient(circle at 96% 88%, rgba(251,113,133,.24), transparent 52%),
    linear-gradient(120deg, #120409 0%, #2C0A17 52%, #4A1128 100%);
}
.ruxye-promo--tablets .ruxye-promo__eyebrow { color: #FDA4AF; }
.ruxye-promo--tablets .ruxye-promo__rule { background: #E11D48; }
.ruxye-promo--tablets .ruxye-promo__cta { background: #E11D48; box-shadow: 0 10px 30px rgba(225,29,72,.42); }

.ruxye-promo--computers {
  background:
    radial-gradient(circle at 82% 28%, rgba(217,119,6,.40), transparent 58%),
    radial-gradient(circle at 96% 88%, rgba(251,191,36,.22), transparent 52%),
    linear-gradient(120deg, #140C02 0%, #2E1C05 52%, #4A2E08 100%);
}
.ruxye-promo--computers .ruxye-promo__eyebrow { color: #FCD34D; }
.ruxye-promo--computers .ruxye-promo__rule { background: #D97706; }
.ruxye-promo--computers .ruxye-promo__cta { background: #D97706; box-shadow: 0 10px 30px rgba(217,119,6,.42); }

/* ==============================================================
   24. ruxye-ticker - thin moving offers strip between the top bar
       and the category bar. Deliberately short so it reads as a
       notice rather than another banner.
   ============================================================== */
.ruxye-ticker {
  height: 34px;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: #0B1B33;
  color: #E7F0FF;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.ruxye-ticker__track {
  display: flex;
  align-items: center;
  width: max-content;
  white-space: nowrap;
  will-change: transform;
  animation: ruxye-ticker-run 38s linear infinite;
}
.ruxye-ticker__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0 30px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
}
.ruxye-ticker__item::after {
  content: "";
  position: absolute;
  inset-inline-end: -3px;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: #1877F2;
}
@keyframes ruxye-ticker-run {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Arabic reads right to left, so the strip travels the other way. */
html[lang="ar"] .ruxye-ticker__track { animation-name: ruxye-ticker-run-rtl; }
@keyframes ruxye-ticker-run-rtl {
  from { transform: translateX(0); }
  to   { transform: translateX(50%); }
}
.ruxye-ticker:hover .ruxye-ticker__track { animation-play-state: paused; }

@media (max-width: 768px) {
  .ruxye-ticker { height: 30px; }
  .ruxye-ticker__item { font-size: 12px; padding: 0 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .ruxye-ticker__track { animation: none; }
}