/* BASIT VISUAL SYSTEM v2 — paste into Wajha version "تنسيق وجهة رقم (1)".
   This replaces v1. Do not paste both files. */
:root{--basit-navy:#0B1026;--basit-pink:#FF2D6D;--basit-cyan:#00E5E5;--basit-cloud:#F6F7FB;--basit-line:#E6E8F0;--basit-shadow:0 18px 60px rgba(11,16,38,.18)}
html{scroll-behavior:smooth}
body{background:var(--basit-cloud)!important}

/* Real floating header */
#mainnav{background:transparent!important;padding:14px!important;box-sizing:border-box!important}
#mainnav>.inner{
  position:relative!important;top:0!important;width:100%!important;max-width:1320px!important;
  margin-inline:auto!important;border:1px solid rgba(255,255,255,.16)!important;
  border-radius:26px!important;background:rgba(11,16,38,.96)!important;
  box-shadow:var(--basit-shadow)!important;overflow:visible!important;
  transition:top .3s ease,background .3s ease,box-shadow .3s ease!important
}
#mainnav.fixed-header>.inner{
  position:fixed!important;top:14px!important;left:50%!important;right:auto!important;
  width:calc(100% - 28px)!important;transform:translateX(-50%)!important;
  background:rgba(11,16,38,.90)!important;box-shadow:0 16px 55px rgba(11,16,38,.28)!important
}
@supports(backdrop-filter:blur(18px)){#mainnav>.inner{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}}
#mainnav>.inner>.container{padding-inline:20px!important}
#mainnav .navbar-brand img{border-radius:16px!important}
#mainnav .header-btn__icon{
  width:42px!important;height:42px!important;min-width:42px!important;border-radius:999px!important;
  background:rgba(255,255,255,.09)!important;border:1px solid rgba(255,255,255,.14)!important;
  transition:transform .2s ease,background .2s ease!important
}
#mainnav a:focus-visible,#mainnav button:focus-visible{outline:3px solid var(--basit-cyan)!important;outline-offset:3px!important}

/* Hero becomes a premium framed campaign */
#main-slider-0{
  display:block!important;margin:10px auto 30px!important;width:calc(100% - 28px)!important;
  max-width:1480px!important;border-radius:30px!important;overflow:hidden!important;
  box-shadow:0 22px 70px rgba(11,16,38,.20)!important
}
#main-slider-0 .swiper-slide:after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(130deg,rgba(11,16,38,.16),transparent 48%,rgba(0,229,229,.08))
}
#main-slider-0 h2{text-shadow:0 5px 22px rgba(0,0,0,.35)}
#main-slider-0 a{border-radius:999px!important;box-shadow:0 10px 28px rgba(255,45,109,.30)!important}

/* Rhythm, titles and cards */
main>section,.s-block{scroll-margin-top:120px}
.s-block__title h2,h2{color:var(--basit-navy)}
.s-product-card-entry{
  border:1px solid var(--basit-line)!important;border-radius:24px!important;background:#fff!important;
  box-shadow:0 6px 24px rgba(11,16,38,.06)!important;overflow:hidden!important;
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease!important
}
.s-product-card-image{background:linear-gradient(145deg,#fff,#f4f7fb)!important}
.s-product-card-promotion-title{background:var(--basit-pink)!important;border-radius:999px!important}
.s-product-card-entry button{border-radius:16px!important}
.wajha-features-item{
  border-radius:24px!important;box-shadow:0 8px 28px rgba(11,16,38,.07)!important;
  transition:transform .28s ease,box-shadow .28s ease!important
}
.wajha-features-item>div{border-radius:inherit!important}
footer{border-radius:34px 34px 0 0!important;overflow:hidden!important}

/* Elegant interaction on devices that actually hover */
@media(hover:hover) and (pointer:fine){
  #mainnav .header-btn__icon:hover{transform:translateY(-3px)!important;background:rgba(0,229,229,.16)!important}
  .s-product-card-entry:hover{transform:translateY(-8px)!important;border-color:rgba(255,45,109,.38)!important;box-shadow:0 20px 45px rgba(11,16,38,.13)!important}
  .wajha-features-item:hover{transform:translateY(-7px)!important;box-shadow:0 18px 42px rgba(11,16,38,.12)!important}
}

/* Phone refinement */
@media(max-width:767px){
  #mainnav{padding:8px!important}
  #mainnav>.inner{border-radius:20px!important}
  #mainnav.fixed-header>.inner{top:8px!important;width:calc(100% - 16px)!important}
  #mainnav>.inner>.container{padding-inline:10px!important}
  #mainnav .header-btn__icon{width:38px!important;height:38px!important;min-width:38px!important}
  #main-slider-0{width:calc(100% - 16px)!important;margin-top:6px!important;border-radius:22px!important}
  .s-product-card-entry{border-radius:20px!important}
}

/* Keep accessibility: animation is optional */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .wajha-features-item,.wajha-features-item *{opacity:1!important;transform:none!important}
}

/* BASIT HEADER PATCH v3
   Append this AFTER the current custom CSS in Wajha version
   "تنسيق وجهة رقم (1)". Desktop only; the mobile menu stays native. */

@media (min-width: 1024px) {
  /* Collapse Wajha's built-in 104px + 50px header into one 104px row. */
  #mainnav,
  #mainnav > .inner,
  #mainnav > .inner > .container {
    height: 104px !important;
    min-height: 104px !important;
  }

  #mainnav > .inner > .container {
    position: relative !important;
  }

  /* Logo/right side and controls/left side remain at the two edges. */
  #mainnav > .inner > .container > div:first-of-type {
    height: 104px !important;
    min-height: 104px !important;
    padding-block: 8px !important;
  }

  /* Lift the navigation out of its second row and center it in the gap. */
  #mainnav > .inner > .container > div:nth-of-type(2) {
    position: absolute !important;
    inset-block: 0 !important;
    inset-inline: 160px !important;
    z-index: 3 !important;
    width: auto !important;
    height: 104px !important;
    min-height: 104px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: none;
  }

  #mainnav custom-main-menu,
  #mainnav custom-main-menu nav,
  #mainnav custom-main-menu .main-menu {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
  }

  #mainnav custom-main-menu .main-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 3px !important;
    padding: 0 !important;
    pointer-events: auto;
  }

  #mainnav custom-main-menu .main-menu > li.root-level {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  #mainnav custom-main-menu .main-menu > li.root-level > a {
    display: flex !important;
    align-items: center !important;
    min-height: 42px !important;
    padding: 9px 11px !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
    transition: color .2s ease, background-color .2s ease,
      border-color .2s ease, transform .2s ease !important;
  }

  #mainnav custom-main-menu .main-menu > li.root-level > a:hover,
  #mainnav custom-main-menu .main-menu > li.root-level > a:focus-visible {
    color: #00e5e5 !important;
    background: rgba(255, 255, 255, .08) !important;
    border-color: rgba(0, 229, 229, .22) !important;
    transform: translateY(-1px);
  }
}

/* Give the menu a little more breathing room on wide desktops. */
@media (min-width: 1280px) {
  #mainnav custom-main-menu .main-menu {
    gap: 6px !important;
  }

  #mainnav custom-main-menu .main-menu > li.root-level > a {
    padding-inline: 14px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #mainnav custom-main-menu .main-menu > li.root-level > a {
    transition: none !important;
  }
}
/* Balanced campaign slider */
section[component-id="1494614699"] {
  width: calc(100% - 32px) !important;
  max-width: 1100px !important;
  margin: 24px auto 32px !important;
}

#photos-1-slider .s-slider-container {
  padding: 0 0 36px !important;
  overflow: hidden !important;
}

#photos-1-slider .swiper-slide {
  width: 100% !important;
}

#photos-1-slider .swiper-slide img {
  display: block;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 24px !important;
}

@media (max-width: 767px) {
  section[component-id="1494614699"] {
    width: calc(100% - 24px) !important;
  }

  #photos-1-slider .swiper-slide img {
    border-radius: 16px !important;
  }
}

/* Append after existing Basit CSS. Does not reposition the header or slider. */
#mainnav > .inner {
  background: linear-gradient(115deg,#0b1026 0%,#161b37 48%,#102638 100%) !important;
  background-size: 180% 180% !important;
  border-color: rgba(0,229,229,.18) !important;
  animation: basit-header-light 16s ease-in-out infinite alternate;
}
@keyframes basit-header-light {from {background-position:0% 50%} to {background-position:100% 50%}}
section[component-id="459646340"] {--carrier-accent:#753bbd}
section[component-id="709799308"] {--carrier-accent:#007bbd}
section[component-id="1334265993"] {--carrier-accent:#399d29}
:is(section[component-id="459646340"],section[component-id="709799308"],section[component-id="1334265993"]) .s-product-card-entry {
  border-top:3px solid var(--carrier-accent) !important;
}
.s-product-card-entry .s-product-card-image {aspect-ratio:1; height:auto !important; overflow:hidden}
.s-product-card-entry .s-product-card-image img {width:100%;height:100%;object-fit:contain !important}
.s-product-card-entry .s-product-card-content {padding:16px !important;gap:10px}
.s-product-card-content-title a {color:#0b1026 !important;line-height:1.65 !important;font-weight:700 !important}
.s-product-card-content-subtitle {line-height:1.7 !important}
.s-product-card-content-footer {margin-top:auto !important}
.s-product-card-content-footer button {min-height:44px;border-radius:14px !important}
.s-product-card-sale-price h4 {color:#d81756 !important}
.wajha-features-item .sf-bk {background:#fff !important;border:1px solid #e6e8f0 !important}
.wajha-features-item .wajha-features-icon {background:linear-gradient(135deg,#fff,#eafafb) !important;box-shadow:0 8px 24px #0b10260a !important}
.wajha-features-item .sf-content {padding-top:12px !important}
/* Fail open: never leave benefits invisible when the theme animation crashes. */
.wajha-features-item,.wajha-features-item .fade-up {opacity:1 !important;visibility:visible !important;transform:none !important}
.basit-revealed {animation:basit-reveal .6s ease-out both !important}
@keyframes basit-reveal {from{translate:0 16px}to{translate:0 0}}
.basit-carrier-notice {margin:12px;padding:16px;border:1px solid #e6e8f0;border-radius:16px;background:#fff;color:#0b1026;line-height:1.7}
.basit-carrier-notice a {color:#bd1249;text-decoration:underline;font-weight:700}
@media(prefers-reduced-motion:reduce){#mainnav > .inner,.basit-revealed{animation:none !important}}

/* Fix Basit benefits: icon above text */
.wajha-features-item {
  height: auto !important;
  min-width: 0 !important;
}

.wajha-features-item > div {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 16px !important;
  padding: 24px 16px !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

.wajha-features-item .wajha-features-icon {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  translate: none !important;
  margin: 0 !important;
  width: 64px !important;
  height: 64px !important;
  min-height: 64px !important;
  flex: 0 0 64px !important;
  border-radius: 20px !important;
}

.wajha-features-item .sf-content {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  text-align: center !important;
}

.wajha-features-item .sf-content h3 {
  margin: 0 0 8px !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}

.wajha-features-item .sf-content p {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.8 !important;
}
/* BASIT SIZE RESET v1
   Append this at the very end of the current Custom CSS. */

/* Restore the four-image campaign slider to the theme's normal content width. */
section[component-id="1494614699"] {
  width: calc(100% - 32px) !important;
  max-width: 1280px !important;
  margin: 32px auto 40px !important;
}

#photos-1-slider,
#photos-1-slider .s-slider-container,
#photos-1-slider .swiper,
#photos-1-slider .swiper-wrapper,
#photos-1-slider .swiper-slide {
  width: 100% !important;
  max-width: none !important;
}

#photos-1-slider .swiper-slide img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 3 / 2 !important;
  object-fit: contain !important;
}

@media (max-width: 767px) {
  section[component-id="1494614699"] {
    width: calc(100% - 16px) !important;
    margin: 20px auto 28px !important;
  }
}

/* BASIT SIZE RESET v1
   Append this at the very end of the current Custom CSS. */

/* Restore the four-image campaign slider to the theme's normal content width. */
section[component-id="1494614699"] {
  width: calc(100% - 32px) !important;
  max-width: 1280px !important;
  margin: 32px auto 40px !important;
}

#photos-1-slider,
#photos-1-slider .s-slider-container,
#photos-1-slider .swiper,
#photos-1-slider .swiper-wrapper,
#photos-1-slider .swiper-slide {
  width: 100% !important;
  max-width: none !important;
}

#photos-1-slider .swiper-slide img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 3 / 2 !important;
  object-fit: contain !important;
}

@media (max-width: 767px) {
  section[component-id="1494614699"] {
    width: calc(100% - 16px) !important;
    margin: 20px auto 28px !important;
  }
}


/* BASIT DARK MODE v1
   Append at the very end of the current Custom CSS. */

:root {
  --basit-page-bg: #f6f7fb;
  --basit-surface: rgba(255, 255, 255, .92);
  --basit-surface-solid: #ffffff;
  --basit-text: #0b1026;
  --basit-muted: #5e6780;
  --basit-border: rgba(11, 16, 38, .10);
}

html.basit-dark-mode {
  color-scheme: dark;
  --basit-page-bg: #070b1c;
  --basit-surface: rgba(17, 23, 48, .90);
  --basit-surface-solid: #111730;
  --basit-text: #f6f7fb;
  --basit-muted: #b9c2d8;
  --basit-border: rgba(0, 229, 229, .15);
}

body {
  color: var(--basit-text) !important;
  background-color: var(--basit-page-bg) !important;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(0, 229, 229, .12), transparent 30%),
    radial-gradient(circle at 88% 12%, rgba(255, 45, 109, .10), transparent 32%),
    radial-gradient(circle at 55% 92%, rgba(106, 72, 194, .08), transparent 34%) !important;
  background-size: 150% 150%, 145% 145%, 155% 155% !important;
  background-attachment: fixed !important;
  animation: basit-page-gradient 24s ease-in-out infinite alternate !important;
  transition: color .35s ease, background-color .35s ease !important;
}

html.basit-dark-mode body {
  background-image:
    radial-gradient(circle at 10% 20%, rgba(0, 229, 229, .13), transparent 31%),
    radial-gradient(circle at 90% 8%, rgba(255, 45, 109, .15), transparent 32%),
    radial-gradient(circle at 52% 90%, rgba(87, 56, 166, .22), transparent 38%),
    linear-gradient(145deg, #070b1c 0%, #0b1026 48%, #101733 100%) !important;
}

@keyframes basit-page-gradient {
  0% { background-position: 0% 15%, 100% 0%, 45% 100%, 0 0; }
  50% { background-position: 18% 35%, 82% 18%, 62% 82%, 0 0; }
  100% { background-position: 34% 12%, 68% 34%, 42% 68%, 0 0; }
}

/* Theme toggle — visually matches the existing circular header controls. */
#mainnav .basit-theme-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  color: #f6f7fb !important;
  cursor: pointer !important;
  position: relative !important;
}

#mainnav .basit-theme-toggle::before {
  content: "☾";
  font-family: Arial, sans-serif;
  font-size: 22px;
  line-height: 1;
  transform: translateY(-1px);
}

html.basit-dark-mode #mainnav .basit-theme-toggle::before {
  content: "☀";
  color: #ffd76a;
  font-size: 20px;
}

#mainnav .basit-theme-toggle:hover {
  color: #00e5e5 !important;
  background: rgba(0, 229, 229, .16) !important;
}

/* Dark surfaces: cards and important content remain readable. */
html.basit-dark-mode :is(
  .s-product-card-entry,
  .wajha-features-item > div,
  .wajha-features-item .sf-bk,
  .basit-carrier-notice,
  .s-comments-product,
  .product-entry,
  .product-form,
  .s-cart-summary,
  .cart-item,
  .s-modal-body
) {
  background: var(--basit-surface) !important;
  border-color: var(--basit-border) !important;
  color: var(--basit-text) !important;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .24) !important;
}

html.basit-dark-mode :is(
  .s-block__title h2,
  .s-block__title h3,
  .s-product-card-content-title a,
  .wajha-features-item h3,
  .product-entry h1,
  .product-entry h2,
  .product-entry h3,
  .breadcrumb a,
  .breadcrumb span
) {
  color: var(--basit-text) !important;
}

html.basit-dark-mode :is(
  .s-block__title p,
  .s-product-card-content-subtitle,
  .wajha-features-item p,
  .product-entry p,
  .product-entry li
) {
  color: var(--basit-muted) !important;
}

html.basit-dark-mode .s-product-card-image {
  background: linear-gradient(145deg, #0b1026, #171e3c) !important;
}

html.basit-dark-mode .wajha-features-item .wajha-features-icon {
  background: linear-gradient(145deg, rgba(0,229,229,.12), rgba(255,45,109,.10)) !important;
  border: 1px solid rgba(0,229,229,.16) !important;
}

/* Purchase controls become prominent in both modes. */
.s-product-card-content-footer button,
.s-product-card-entry button[type="button"],
.s-product-card-entry salla-add-product-button::part(button),
.product-form salla-add-product-button::part(button) {
  min-height: 46px !important;
  border-radius: 15px !important;
  font-weight: 800 !important;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease !important;
}

.s-product-card-content-footer button,
.s-product-card-entry salla-add-product-button::part(button) {
  background: linear-gradient(110deg, #ff2d6d, #ee1759) !important;
  color: #fff !important;
  box-shadow: 0 9px 22px rgba(255,45,109,.24) !important;
}

@media (hover:hover) and (pointer:fine) {
  .s-product-card-content-footer button:hover,
  .s-product-card-entry salla-add-product-button::part(button):hover,
  .product-form salla-add-product-button::part(button):hover {
    transform: translateY(-2px) !important;
    filter: brightness(1.06) !important;
    box-shadow: 0 13px 28px rgba(255,45,109,.32) !important;
  }
}

@media (max-width: 767px) {
  body {
    background-size: 220% 220%, 210% 210%, 230% 230% !important;
    background-attachment: scroll !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body { animation: none !important; }
  #mainnav .basit-theme-toggle,
  .s-product-card-content-footer button,
  .s-product-card-entry salla-add-product-button::part(button),
  .product-form salla-add-product-button::part(button) {
    transition: none !important;
  }
}


/* BASIT COMMERCE POLISH v1
   Append AFTER basit-dark-mode-v1.css. */

/* Header basket: branded glass control instead of the plain Salla icon. */
#mainnav .basit-header-cart {
  min-width: 48px !important;
  min-height: 44px !important;
  padding: 4px 12px !important;
  gap: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(0, 229, 229, .28) !important;
  border-radius: 999px !important;
  color: #fff !important;
  background:
    linear-gradient(110deg, rgba(255,45,109,.18), rgba(0,229,229,.13)),
    rgba(255,255,255,.07) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.08) !important;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease !important;
}

#mainnav .basit-header-cart::after {
  content: "السلة";
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

#mainnav .basit-header-cart :is(svg, .header-btn__icon) {
  color: #00e5e5 !important;
}

#mainnav .basit-header-cart svg path {
  fill: currentColor !important;
  stroke: currentColor;
}

/* Product purchase button system. Carrier is detected by the companion JS. */
.s-product-card-entry {
  --basit-buy-a: #ff2d6d;
  --basit-buy-b: #d81756;
  --basit-buy-glow: rgba(255,45,109,.30);
}

.s-product-card-entry.basit-carrier-stc {
  --basit-buy-a: #8b45c6;
  --basit-buy-b: #5e2499;
  --basit-buy-glow: rgba(117,59,189,.34);
}

.s-product-card-entry.basit-carrier-mobily {
  --basit-buy-a: #09a9e6;
  --basit-buy-b: #0877be;
  --basit-buy-glow: rgba(0,123,189,.32);
}

.s-product-card-entry.basit-carrier-zain {
  --basit-buy-a: #67bd34;
  --basit-buy-b: #318f2d;
  --basit-buy-glow: rgba(57,157,41,.30);
}

.s-product-card-entry .basit-buy-button {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  width: 100% !important;
  min-width: 128px !important;
  min-height: 48px !important;
  padding: 10px 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 16px !important;
  color: #fff !important;
  background: linear-gradient(112deg, var(--basit-buy-a), var(--basit-buy-b)) !important;
  box-shadow: 0 10px 25px var(--basit-buy-glow), inset 0 1px rgba(255,255,255,.24) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease !important;
}

.s-product-card-entry .basit-buy-button::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.22) 48%, transparent 76%);
  transform: translateX(-115%);
  transition: transform .55s ease;
}

.s-product-card-entry .basit-buy-button :is(svg, .s-button-text) {
  position: relative;
  z-index: 1;
  color: #fff !important;
}

.s-product-card-entry .basit-buy-button svg {
  width: 22px !important;
  height: 22px !important;
}

.s-product-card-entry .basit-buy-button svg path {
  fill: currentColor !important;
  stroke: currentColor;
}

.basit-buy-label {
  position: relative;
  z-index: 1;
  display: inline-block;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

@media (hover:hover) and (pointer:fine) {
  #mainnav .basit-header-cart:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(0,229,229,.58) !important;
    box-shadow: 0 12px 30px rgba(0,229,229,.16), 0 8px 26px rgba(255,45,109,.13) !important;
  }

  .s-product-card-entry .basit-buy-button:hover {
    transform: translateY(-2px) scale(1.01) !important;
    filter: saturate(1.08) brightness(1.05) !important;
    box-shadow: 0 14px 32px var(--basit-buy-glow), inset 0 1px rgba(255,255,255,.28) !important;
  }

  .s-product-card-entry .basit-buy-button:hover::before {
    transform: translateX(115%);
  }
}

/* Phone catalog: one substantial vertical card per row, large readable artwork. */
@media (max-width: 767px) {
  section[component-id="865362287"] .s-products-list-wrapper {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px !important;
  }

  section[component-id="865362287"] custom-salla-product-card.s-product-card-horizontal {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    flex-direction: column !important;
    border-radius: 24px !important;
  }

  section[component-id="865362287"] .s-product-card-image {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 22px 22px 0 0 !important;
  }

  section[component-id="865362287"] .s-product-card-image > a,
  section[component-id="865362287"] .s-product-card-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }

  section[component-id="865362287"] .s-product-card-image img {
    object-fit: cover !important;
  }

  section[component-id="865362287"] .s-product-card-content {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 18px !important;
    gap: 11px !important;
  }

  section[component-id="865362287"] .s-product-card-content-title a {
    font-size: 16px !important;
    line-height: 1.65 !important;
  }

  section[component-id="865362287"] .s-product-card-content-footer,
  section[component-id="865362287"] .s-product-card-content-footer salla-add-product-button,
  section[component-id="865362287"] .s-product-card-content-footer salla-button {
    width: 100% !important;
  }

  #mainnav .basit-header-cart {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
  }

  #mainnav .basit-header-cart::after {
    content: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #mainnav .basit-header-cart,
  .s-product-card-entry .basit-buy-button,
  .s-product-card-entry .basit-buy-button::before {
    transition: none !important;
  }
}

/* BASIT DARK MODE FIXES v2
   Append after basit-dark-mode-v1.css. */

/* The whole benefits block now belongs to the dark canvas, rather than
   leaving a white island around dark cards. */
html.basit-dark-mode section[component-id="1575725792"] {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  color: var(--basit-text) !important;
  background:
    radial-gradient(circle at 14% 18%, rgba(0, 229, 229, .10), transparent 32%),
    radial-gradient(circle at 88% 78%, rgba(255, 45, 109, .09), transparent 34%),
    linear-gradient(145deg, #080d21 0%, #0b1026 48%, #111731 100%) !important;
  border-block: 1px solid rgba(0, 229, 229, .08) !important;
}

html.basit-dark-mode section[component-id="1575725792"] :is(
  .container,
  .s-block__title,
  .wajha-features,
  .wajha-features-wrapper
) {
  background: transparent !important;
}

html.basit-dark-mode section[component-id="1575725792"] .s-block__title :is(h2, h3) {
  color: #f7f8ff !important;
  text-shadow: 0 0 24px rgba(0, 229, 229, .08) !important;
}

html.basit-dark-mode section[component-id="1575725792"] .s-block__title p {
  color: #bac4dc !important;
}

html.basit-dark-mode section[component-id="1575725792"] .wajha-features-item > div,
html.basit-dark-mode section[component-id="1575725792"] .wajha-features-item .sf-bk {
  background: linear-gradient(145deg, rgba(18, 25, 53, .96), rgba(13, 19, 43, .94)) !important;
  border: 1px solid rgba(0, 229, 229, .13) !important;
  box-shadow:
    0 18px 46px rgba(0, 0, 0, .30),
    inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

html.basit-dark-mode section[component-id="1575725792"] .wajha-features-item :is(h2, h3, h4) {
  color: #f7f8ff !important;
}

html.basit-dark-mode section[component-id="1575725792"] .wajha-features-item p {
  color: #c1c9dc !important;
}

/* Keep the toggle above adjacent header controls and prevent overlap. */
#mainnav .basit-theme-toggle {
  z-index: 2 !important;
  flex: 0 0 auto !important;
  pointer-events: auto !important;
}

/* BASIT HERO — NO CROP v1
   Append at the very bottom of Custom CSS. */

/* Keep the chosen native desktop/mobile hero heights. The dark backing makes
   any tiny letterbox area blend into the artwork instead of looking blank. */
#main-slider-0 .swiper-slide {
  background: #03081f !important;
}

#main-slider-0 .swiper-slide > [style*="background-image"],
#main-slider-0 .swiper-slide .bg-cover {
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* BASIT MOBILE HEADER FIX v1
   Append at the very bottom of Custom CSS. */

@media (max-width: 767px) {
  /* Keep logo/menu and account controls on one stable row. */
  #mainnav > .inner > .container > div:first-of-type {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    padding-block: 8px !important;
  }

  #mainnav > .inner > .container > div:first-of-type > div {
    min-width: 0 !important;
  }

  /* Logo and hamburger group. */
  #mainnav .navbar-brand {
    flex: 0 0 auto !important;
  }

  #mainnav .navbar-brand img {
    width: 78px !important;
    max-width: 78px !important;
    height: auto !important;
  }

  #mainnav .mburger {
    flex: 0 0 32px !important;
    width: 32px !important;
    margin-inline-start: 8px !important;
    margin-inline-end: 0 !important;
  }

  /* Search, account, cart, and colour-mode controls. */
  #mainnav > .inner > .container > div:first-of-type > div:nth-child(2),
  #mainnav > .inner > .container > div:first-of-type > div:nth-child(2) > div {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
  }

  #mainnav button,
  #mainnav .basit-theme-toggle,
  #mainnav .header-btn,
  #mainnav .header-btn__icon,
  #mainnav .basit-header-cart {
    flex: 0 0 36px !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #mainnav button,
  #mainnav .header-btn,
  #mainnav .basit-header-cart {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #mainnav salla-cart-summary {
    position: relative !important;
    flex: 0 0 36px !important;
    width: 36px !important;
    min-width: 36px !important;
    margin: 0 !important;
  }

  /* The hidden total was leaking a currency glyph outside the cart circle. */
  #mainnav .s-cart-summary-content,
  #mainnav .s-cart-summary-total,
  #mainnav .basit-header-cart::after {
    display: none !important;
    content: none !important;
  }

  #mainnav .s-cart-summary-count {
    position: absolute !important;
    inset-block-start: -5px !important;
    inset-inline-end: -4px !important;
    z-index: 5 !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid #111730 !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    line-height: 1 !important;
  }
}

/* Extra compression for narrow phones without allowing overlap. */
@media (max-width: 390px) {
  #mainnav > .inner > .container {
    padding-inline: 7px !important;
  }

  #mainnav .navbar-brand img {
    width: 70px !important;
    max-width: 70px !important;
  }

  #mainnav .mburger {
    flex-basis: 28px !important;
    width: 28px !important;
    margin-inline-start: 5px !important;
  }

  #mainnav button,
  #mainnav .basit-theme-toggle,
  #mainnav .header-btn,
  #mainnav .header-btn__icon,
  #mainnav .basit-header-cart,
  #mainnav salla-cart-summary {
    flex-basis: 34px !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
  }
}