/* =========================================================
   BIN SAMHUD - MALAK 
   Designed By: Mohamed Mostafa
   Contact Number: +201119399786
========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&display=swap");

:root,
body {
  --bs-red: #FE2E2D;
  --bs-red-dark: #B60F16;
  --bs-blue: #0269A6;
  --bs-blue-dark: #01496F;
  --bs-blue-light: #4DB6F2;

  --bs-page: #050910;
  --bs-page-2: #07101B;
  --bs-header: #070D17;
  --bs-card: #0D1726;
  --bs-card-2: #121F31;
  --bs-text: #FFFFFF;
  --bs-muted: #9EADBF;
  --bs-line: rgba(255,255,255,.14);

  --bg-color: #050910 !important;
  --header-bg: #070D17 !important;
  --color-primary: #FE2E2D !important;
  --color-primary-dark: #B60F16 !important;
  --color-primary-light: #FF5B5A !important;
  --color-primary-reverse: #FFFFFF !important;
  --primary-color: #FE2E2D !important;
  --main-color: #FE2E2D !important;
  --bg-primary: #050910 !important;
  --bg-secondary: #0D1726 !important;
  --store-text-primary: #FFFFFF !important;
  --store-text-secondary: #9EADBF !important;
  --text-primary: #FFFFFF !important;
  --text-secondary: #9EADBF !important;
}

/* =========================
   Base
========================= */

html {
  scroll-behavior: smooth;
  background: #050910 !important;
}

body,
body *:not(i):not(svg):not(path) {
  font-family: "Tajawal", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body,
body#app,
body.index,
body.color-mode-light,
body.color-mode-dark,
.app-inner,
#main-content,
main {
  background:
    radial-gradient(circle at 82% 0%, rgba(2,105,166,.16), transparent 34rem),
    radial-gradient(circle at 8% 18%, rgba(254,46,45,.07), transparent 30rem),
    linear-gradient(180deg, #050910 0%, #07101B 48%, #050910 100%) !important;
  background-color: #050910 !important;
  color: #fff !important;
}

::selection {
  background: var(--bs-red);
  color: #fff;
}

.s-block,
.s-block.bg-white,
.s-block.bg-gray-50,
.s-block.bg-gray-100,
.s-block.bg-gray-200,
section.bg-white,
section.bg-gray-50,
section.bg-gray-100,
section.bg-gray-200,
.da-bgm,
.da-bgg,
.bg-white,
.bg-gray-50,
.bg-gray-100,
.bg-gray-200,
.has-custom-bg,
.s-block--full-bg,
.s-block--best-offers,
.s-products-slider-wrapper,
.s-products-list-wrapper,
.s-products-container {
  background: transparent !important;
  background-color: transparent !important;
}

.s-block {
  margin-top: 34px !important;
  margin-bottom: 34px !important;
}

.container,
.header-container {
  max-width: 1240px !important;
}

.text-black,
.da-tm {
  color: #fff !important;
}

.text-gray-400,
.text-gray-500,
.text-gray-600,
.da-ts {
  color: var(--bs-muted) !important;
}

/* =========================
   Header
========================= */

.store-header,
.store-header.fixed-sticky,
#mainnav,
.main-nav-container,
.header-inner,
.header-inner.bg-white,
.header-inner.has-custom-bg {
  background: var(--bs-header) !important;
  color: #fff !important;
}

.store-header,
.store-header.fixed-sticky {
  border-top: 3px solid var(--bs-red) !important;
  border-bottom: 1px solid rgba(2,105,166,.55) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.28) !important;
}

.navbar-brand {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.navbar-brand img {
  object-fit: contain !important;
  filter: drop-shadow(0 0 8px rgba(2,105,166,.35));
}

.mburger,
.search-btn,
.header-btn,
.lang.btn,
.s-cart-summary-wrapper,
.language-btn {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: #fff !important;
}

.mburger p,
.language-btn,
.language-btn span,
.s-cart-summary-content,
.s-cart-summary-total,
.header-buttons,
.header-buttons *,
.top-navbar,
.top-navbar * {
  color: #fff !important;
}

.header-btn i,
.search-btn i,
.mburger i,
.lang i,
.s-cart-summary-wrapper i,
.s-cart-summary-wrapper svg,
.s-cart-summary-wrapper path {
  color: #fff !important;
  fill: #fff !important;
}

.mburger:hover,
.search-btn:hover,
.header-btn:hover,
.lang.btn:hover,
.s-cart-summary-wrapper:hover {
  color: var(--bs-blue-light) !important;
}

.s-cart-summary-count,
.s-cart-count,
.cart-count,
.header-cart .s-cart-summary-count,
.bottom-header-cart .s-cart-summary-count,
salla-cart-summary .s-cart-summary-count {
  background: var(--bs-red) !important;
  color: #fff !important;
  border: 2px solid var(--bs-header) !important;
  font-weight: 900 !important;
  box-shadow: 0 6px 14px rgba(254,46,45,.35) !important;
}

/* =========================
   Announcement Bar
========================= */

.salla-advertisement,
.angel-ad,
salla-advertisement .s-advertisement {
  background: linear-gradient(90deg, var(--bs-red), var(--bs-blue)) !important;
  color: #fff !important;
  border: 0 !important;
}

.salla-advertisement *,
.angel-ad *,
.salla-advertisement a,
.angel-ad a,
salla-advertisement .s-advertisement * {
  color: #fff !important;
  font-weight: 800 !important;
}

/* =========================
   Inputs
========================= */

input,
textarea,
select,
.s-form-control,
.s-input {
  background: rgba(11,20,34,.94) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: #fff !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(255,255,255,.55) !important;
}

input:focus,
textarea:focus,
select:focus,
.s-form-control:focus,
.s-input:focus {
  border-color: var(--bs-blue-light) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(2,105,166,.18) !important;
}

select option,
select optgroup {
  background-color: #0B1422 !important;
  color: #fff !important;
}

select option:checked {
  background-color: #18365B !important;
  color: #fff !important;
}

/* =========================================================
   Main Hero Slider / Banners
========================================================= */

.home-slider.s-block--hero-slider,
.s-block--hero-slider.full-banner,
.s-block--main-slider,
.s-block--photos-slider {
  padding: 20px 0 22px !important;
  margin: 0 0 28px !important;
  background: transparent !important;
}

.home-slider .s-slider-container,
.main-slider .s-slider-container,
.s-block--hero-slider .s-slider-container,
.s-block--main-slider .s-slider-container {
  width: calc(100% - 44px) !important;
  max-width: 1380px !important;
  margin: 0 auto !important;
  border-radius: 11px !important;
  overflow: hidden !important;
  background: rgba(13,23,38,.96) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.28) !important;
}

.home-slider .swiper-wrapper,
.main-slider .swiper-wrapper,
.s-block--hero-slider .swiper-wrapper,
.s-block--main-slider .swiper-wrapper {
  align-items: stretch !important;
}

.home-slider .swiper-slide,
.main-slider .swiper-slide,
.s-block--hero-slider .swiper-slide,
.s-block--main-slider .swiper-slide {
  overflow: hidden !important;
  border-radius: 11px !important;
  background: transparent !important;
}

.home-slider .swiper-slide a,
.main-slider .swiper-slide a,
.s-block--hero-slider .swiper-slide a,
.s-block--main-slider .swiper-slide a {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 11px !important;
  overflow: hidden !important;
  background: transparent !important;
}

.home-slider .swiper-slide img,
.main-slider .swiper-slide img,
.s-block--hero-slider .swiper-slide img,
.s-block--main-slider .swiper-slide img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1440 / 618 !important;
  object-fit: contain !important;
  border-radius: 11px !important;
  background: transparent !important;
}

.home-slider .swiper-pagination,
.main-slider .swiper-pagination,
.s-block--hero-slider .swiper-pagination,
.s-block--main-slider .swiper-pagination {
  bottom: 14px !important;
}

.home-slider .swiper-pagination-bullet,
.main-slider .swiper-pagination-bullet,
.s-block--hero-slider .swiper-pagination-bullet,
.s-block--main-slider .swiper-pagination-bullet {
  width: 8px !important;
  height: 8px !important;
  background: rgba(255,255,255,.75) !important;
  opacity: 1 !important;
}

.home-slider .swiper-pagination-bullet-active,
.main-slider .swiper-pagination-bullet-active,
.s-block--hero-slider .swiper-pagination-bullet-active,
.s-block--main-slider .swiper-pagination-bullet-active {
  background: var(--bs-red) !important;
}

/* =========================================================
   Quick Access Category Squares
   For section: s-block--banners / salla-slider id="squares-9"
========================================================= */

.s-block--banners:has(.banner-square) {
  padding-top: 12px !important;
  padding-bottom: 18px !important;
  margin-top: 24px !important;
  margin-bottom: 28px !important;
  background: transparent !important;
}

.s-block--banners:has(.banner-square) .container {
  max-width: 1240px !important;
  padding-inline: 14px !important;
}

.s-block--banners:has(.banner-square) .s-slider-block__title {
  display: none !important;
}

.s-block--banners:has(.banner-square) .swiper,
.s-block--banners:has(.banner-square) .s-slider-container {
  width: 100% !important;
  overflow: hidden !important;
  padding: 4px 0 8px !important;
}

.s-block--banners:has(.banner-square) .swiper-wrapper,
.s-block--banners:has(.banner-square) .s-slider-swiper-wrapper {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0 !important;
}

.s-block--banners:has(.banner-square) .swiper-slide,
.s-block--banners:has(.banner-square) .swiper-width-control,
.s-block--banners .banner-square {
  height: auto !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

.s-block--banners .banner-square > div {
  width: calc(100% - 10px) !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.s-block--banners .banner-square a,
.s-block--banners .banner-square a.\!opacity-100 {
  display: block !important;
  width: 100% !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  overflow: visible !important;
}

.s-block--banners .banner-square .box-img {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(77,182,242,.16), transparent 55%),
    linear-gradient(135deg, rgba(13,23,38,.98), rgba(7,16,27,.98)) !important;
  border: 1px solid rgba(77,182,242,.20) !important;
  box-shadow: 0 12px 26px rgba(0,0,0,.25) !important;
  display: block !important;
  position: relative !important;
}

.s-block--banners .banner-square .box-img::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), transparent 45%),
    linear-gradient(0deg, rgba(254,46,45,.10), transparent 38%) !important;
  z-index: 2 !important;
}

.s-block--banners .banner-square .box-img img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  display: block !important;
  object-fit: cover !important;
  border-radius: 18px !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  transform: scale(1) !important;
  transition: transform .25s ease, filter .25s ease !important;
}

.s-block--banners .banner-square:hover .box-img {
  border-color: rgba(254,46,45,.65) !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.34) !important;
}

.s-block--banners .banner-square:hover .box-img img {
  transform: scale(1.045) !important;
}

.s-block--banners .banner-square .relative {
  padding: 8px 2px 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.s-block--banners .banner-square h3 {
  margin: 0 !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  text-align: center !important;
  min-height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.s-block--banners .banner-square p {
  display: none !important;
}

.s-block--banners .banner-square.grayscaled-img img,
.s-block--banners .banner-square.zoomed-img img {
  filter: none !important;
}

/* Normal non-square banners */
.s-block--banners:not(:has(.banner-square)),
.s-block--fixed-banner {
  padding-top: 10px !important;
  padding-bottom: 18px !important;
}

.s-block--banners:not(:has(.banner-square)) .container,
.s-block--fixed-banner .container {
  max-width: 1240px !important;
  padding-inline: 16px !important;
}

.s-block--banners:not(:has(.banner-square)) a,
.s-block--fixed-banner a,
.banner-entry,
.banner-entry a {
  display: block !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: rgba(13,23,38,.96) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.24) !important;
}

.s-block--banners:not(:has(.banner-square)) img,
.s-block--fixed-banner img,
.banner-entry img {
  width: 100% !important;
  display: block !important;
  border-radius: 18px !important;
  object-fit: cover !important;
}

/* =========================================================
   Compact Mobile-Friendly HTML Finder Widget
========================================================= */

.s-block--bundle-html-content,
.s-block-html-content {
  background: transparent !important;
}

.s-block--bundle-html-content:has(.bs-hero-finder),
.s-block-html-content:has(.bs-hero-finder) {
  margin-top: 0 !important;
  margin-bottom: 28px !important;
  padding: 0 !important;
}

.s-block-html-content > div[style*="dashed"],
[class*="salla-html-content"] > div[style*="dashed"] {
  display: none !important;
}

.bs-hero-finder {
  position: relative !important;
  width: calc(100% - 32px) !important;
  max-width: 1240px !important;
  min-height: 315px !important;
  margin: 0 auto 28px !important;
  padding: 34px 18px 24px !important;
  overflow: hidden !important;
  border-radius: 22px !important;
  background: #07101B !important;
  border: 1px solid rgba(77,182,242,.18) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.26) !important;
  isolation: isolate !important;
}

.bs-hero-finder__bg,
.bs-hero-finder__overlay {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
}

.bs-hero-finder__bg {
  z-index: 0 !important;
  background:
    radial-gradient(circle at 50% 20%, rgba(2,105,166,.26), transparent 24rem),
    linear-gradient(135deg, #08172B, #02050A) !important;
}

.bs-hero-finder__video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  filter: brightness(.58) contrast(1.08) saturate(1.08) !important;
  transform: scale(1.01) !important;
}

.bs-hero-finder__overlay {
  z-index: 1 !important;
  background:
    linear-gradient(180deg, rgba(5,9,16,.58) 0%, rgba(5,9,16,.36) 45%, rgba(5,9,16,.78) 100%),
    radial-gradient(circle at 50% 0%, rgba(2,105,166,.20), transparent 30rem) !important;
}

.bs-hero-finder__content {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 1050px !important;
  margin: 0 auto !important;
}

.bs-hero-finder__head {
  text-align: center !important;
  margin-bottom: 13px !important;
}

.bs-hero-finder__head h2 {
  margin: 0 0 4px !important;
  color: #fff !important;
  font-size: clamp(24px, 3.2vw, 34px) !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  text-shadow: 0 4px 20px rgba(0,0,0,.40) !important;
}

.bs-hero-finder__head h2 span {
  color: var(--bs-red) !important;
}

.bs-hero-finder__head p {
  margin: 0 !important;
  color: rgba(255,255,255,.82) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.bs-hero-finder__form {
  width: 100% !important;
  padding: 16px !important;
  border-radius: 16px !important;
  background: rgba(8,22,45,.72) !important;
  border: 1px solid rgba(77,182,242,.28) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.28) !important;
  backdrop-filter: blur(10px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.12) !important;
}

.bs-hero-finder__top,
.bs-hero-finder__bottom {
  display: grid !important;
  gap: 10px !important;
}

.bs-hero-finder__top {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.bs-hero-finder__bottom {
  grid-template-columns: 1fr 1fr 1.35fr 128px !important;
  align-items: end !important;
}

.bs-hero-finder__divider {
  height: 1px !important;
  margin: 10px 0 12px !important;
  background: rgba(255,255,255,.13) !important;
}

.bs-hero-finder__field {
  min-width: 0 !important;
}

.bs-hero-finder__field label {
  display: block !important;
  margin: 0 0 6px !important;
  color: rgba(255,255,255,.95) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

.bs-hero-finder__field select,
.bs-hero-finder__field input {
  width: 100% !important;
  height: 40px !important;
  padding: 0 11px !important;
  border-radius: 9px !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  outline: none !important;
  box-shadow: none !important;
}

.bs-hero-finder__field select {
  appearance: auto !important;
}

.bs-hero-finder__field select:focus,
.bs-hero-finder__field input:focus {
  border-color: rgba(77,182,242,.72) !important;
  box-shadow: 0 0 0 3px rgba(77,182,242,.14) !important;
}

.bs-hero-finder__field input::placeholder {
  color: rgba(255,255,255,.48) !important;
}

.bs-hero-finder__btn {
  height: 40px !important;
  width: 100% !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: linear-gradient(135deg, var(--bs-red), var(--bs-red-dark)) !important;
  color: #fff !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  box-shadow: 0 10px 20px rgba(254,46,45,.22) !important;
  white-space: nowrap !important;
}

.bs-hero-finder__btn:hover {
  background: linear-gradient(135deg, #ff4b4a, var(--bs-red-dark)) !important;
}

.bs-hero-finder__btn i {
  color: #fff !important;
  font-size: 15px !important;
}

.bs-hero-finder__badges {
  margin: 12px auto 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 6px !important;
}

.bs-hero-finder__badges span {
  min-height: 23px !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  background: rgba(13,38,88,.58) !important;
  border: 1px solid rgba(77,182,242,.22) !important;
  color: rgba(255,255,255,.86) !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
}

/* =========================================================
   Brand Logos - Stable CSS Only
========================================================= */

.s-block--logos-slider {
  background: transparent !important;
  background-color: transparent !important;
  padding-top: 34px !important;
  padding-bottom: 38px !important;
  margin-top: 36px !important;
  margin-bottom: 36px !important;
}

.s-block--logos-slider .container {
  max-width: 1240px !important;
  padding-inline: 16px !important;
}

.s-block--logos-slider .swiper,
.s-block--logos-slider .s-slider-container {
  overflow: hidden !important;
  width: 100% !important;
  padding: 6px 8px 14px !important;
}

.s-block--logos-slider .swiper-wrapper,
.s-block--logos-slider .s-slider-swiper-wrapper {
  display: flex !important;
  grid-template-columns: unset !important;
  gap: 0 !important;
  align-items: center !important;
}

.s-block--logos-slider .swiper-slide,
.s-block--logos-slider .swiper-width-control {
  flex-shrink: 0 !important;
  height: auto !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.s-block--logos-slider .swiper-scrollbar {
  display: none !important;
}

.s-block--logos-slider .s-slider-block__title {
  margin-bottom: 18px !important;
}

.s-block--logos-slider .s-slider-block__display-all {
  color: #fff !important;
  background: var(--bs-red) !important;
  border: 1px solid var(--bs-red) !important;
  padding: 8px 15px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  box-shadow: 0 10px 22px rgba(254,46,45,.24) !important;
}

.s-block--logos-slider .s-slider-nav-arrow {
  width: 36px !important;
  height: 36px !important;
  border-radius: 999px !important;
  background: rgba(13,23,38,.95) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: #fff !important;
}

.s-block--logos-slider .s-slider-nav-arrow svg,
.s-block--logos-slider .s-slider-nav-arrow path {
  fill: #fff !important;
}

.s-block--logos-slider a[aria-label],
.s-block--logos-slider a.relative,
.s-block--logos-slider a.bg-white,
.s-block--logos-slider a.rounded-md,
.s-block--logos-slider a.h-20,
.s-block--logos-slider a.w-full {
  width: calc(100% - 10px) !important;
  height: 102px !important;
  min-height: 102px !important;
  margin-inline: auto !important;
  border-radius: 18px !important;
  padding: 13px !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid rgba(2,105,166,.20) !important;
  box-shadow: 0 12px 26px rgba(0,0,0,.24) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  opacity: 1 !important;
  visibility: visible !important;
  box-sizing: border-box !important;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease !important;
}

.s-block--logos-slider a[aria-label] img,
.s-block--logos-slider img.h-full,
.s-block--logos-slider img.w-auto,
.s-block--logos-slider img.object-contain {
  display: block !important;
  width: 100% !important;
  height: 66px !important;
  max-width: 112px !important;
  max-height: 66px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: contain !important;
  padding: 0 !important;
  margin: 0 auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
}

.s-block--logos-slider a[aria-label]:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(254,46,45,.70) !important;
  box-shadow: 0 18px 36px rgba(0,0,0,.32) !important;
}

.s-block--logos-slider a[aria-label]:hover img {
  transform: scale(1.04) !important;
}

/* =========================================================
   Brands Page Cards
========================================================= */

.brand-section {
  padding-top: 42px !important;
}

.brand-section .flex.items-center.mb-10 {
  margin-bottom: 24px !important;
}

.brands-nav__item {
  background: var(--bs-red) !important;
  color: #fff !important;
  border: 1px solid rgba(254,46,45,.65) !important;
  box-shadow: 0 10px 22px rgba(254,46,45,.20) !important;
}

.brands-nav__item span,
.brands-nav__item .fix-align {
  color: #fff !important;
  font-weight: 900 !important;
}

.brands-nav__item.is-selected {
  background: linear-gradient(135deg, var(--bs-red), var(--bs-red-dark)) !important;
  color: #fff !important;
}

.brand-section .bg-gray-200,
.brand-section .da-bgg {
  background: rgba(255,255,255,.12) !important;
}

.brand-section .brand-item {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  max-width: 132px !important;
  min-height: 0 !important;
  height: auto !important;
  border-radius: 22px !important;
  padding: 18px !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid rgba(2,105,166,.20) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.24) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease !important;
}

.brand-section .brand-item:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(254,46,45,.72) !important;
  box-shadow: 0 18px 38px rgba(0,0,0,.32) !important;
}

.brand-section .brand-item img {
  width: 100% !important;
  height: 76px !important;
  max-width: 100px !important;
  max-height: 76px !important;
  object-fit: contain !important;
  padding: 0 !important;
  margin: 0 auto !important;
  filter: none !important;
  transition: transform .22s ease !important;
}

.brand-section .brand-item:hover img {
  transform: scale(1.05) !important;
}

.brand-section .brand-item + p,
.brand-section p.text-gray-500,
.brand-section p.da-ts {
  margin-top: 8px !important;
  color: rgba(255,255,255,.82) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-align: center !important;
}

/* =========================================================
   Product Cards - Colors Only
========================================================= */

.s-product-card-entry,
custom-salla-product-card,
.product-card {
  background-color: var(--bs-card) !important;
  border-color: rgba(255,255,255,.10) !important;
  color: #fff !important;
}

.s-product-card-content-title,
.s-product-card-content-title a,
.product-card__title,
.product-card__title a {
  color: #fff !important;
}

.s-product-card-content-title a:hover,
.product-card__title a:hover {
  color: var(--bs-blue-light) !important;
}

.s-product-card-content-subtitle,
.s-product-card-regular-price,
.s-product-card-price-before,
.s-product-card-sale-price span,
.product-card__subtitle {
  color: #8FA0B5 !important;
}

.s-product-card-price,
.s-product-card-sale-price h4,
.product-card__price {
  color: #fff !important;
  font-weight: 900 !important;
}

.s-product-card-price i,
.s-product-card-sale-price i,
.product-card__price i {
  color: var(--bs-red) !important;
}

.s-product-card-content-footer .s-button-element,
.s-product-card-content-footer .s-button-primary,
.s-product-card-content-footer .s-add-product-button-main {
  background: linear-gradient(135deg, var(--bs-red), var(--bs-red-dark)) !important;
  border-color: var(--bs-red) !important;
  color: #fff !important;
  font-weight: 900 !important;
}

.s-product-card-content-footer .s-button-element *,
.s-product-card-content-footer .s-button-primary *,
.s-product-card-content-footer .s-add-product-button-main * {
  color: #fff !important;
}

.s-product-card-promotion-title,
.promotion-title {
  background: var(--bs-red) !important;
  color: #fff !important;
}

.s-product-card-brand {
  background: var(--bs-blue) !important;
  color: #fff !important;
}

.s-product-card-category {
  background: rgba(5,9,16,.88) !important;
  color: #fff !important;
}

.bs-auto-badges,
.bs-trust-badge,
.bs-discount-badge {
  display: none !important;
}

/* =========================================================
   Cart Page - Colors Only
========================================================= */

salla-conditional-offer,
.s-conditional-offer-container {
  background:
    radial-gradient(circle at 12% 20%, rgba(2,105,166,.20), transparent 24rem),
    radial-gradient(circle at 92% 70%, rgba(254,46,45,.14), transparent 22rem),
    linear-gradient(135deg, rgba(13,23,38,.98), rgba(7,13,23,.98)) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #fff !important;
}

salla-conditional-offer *,
.s-conditional-offer-container * {
  color: #fff !important;
}

.s-conditional-offer-title {
  background: rgba(254,46,45,.16) !important;
  border-color: rgba(254,46,45,.42) !important;
  color: #fff !important;
  font-weight: 900 !important;
}

.s-conditional-offer-progress-container {
  background: rgba(5,9,16,.48) !important;
  border-color: rgba(255,255,255,.10) !important;
}

.s-conditional-offer-progress-line-inactive {
  background: rgba(255,255,255,.14) !important;
}

.s-conditional-offer-progress-line-active {
  background: linear-gradient(90deg, var(--bs-red), var(--bs-blue-light)) !important;
}

.cart-item,
[id^="item-"] {
  background: rgba(13,23,38,.96) !important;
  border-color: rgba(255,255,255,.11) !important;
  color: #fff !important;
}

[id^="item-"] h3,
[id^="item-"] h4,
[id^="item-"] a,
.cart-item h3,
.cart-item h4,
.cart-item a {
  color: #fff !important;
}

[id^="item-"] .text-gray-400,
[id^="item-"] .text-gray-500,
.cart-item .text-gray-400,
.cart-item .text-gray-500 {
  color: #8FA0B5 !important;
}

.cart-summary,
.cart-total-box,
.checkout-summary,
.sticky-summary {
  background: rgba(13,23,38,.96) !important;
  border-color: rgba(255,255,255,.10) !important;
  color: #fff !important;
}

.cart-summary *,
.cart-total-box *,
.checkout-summary *,
.sticky-summary * {
  color: #fff !important;
}

.checkout-btn,
.cart-summary button,
.cart-total-box button,
.checkout-summary button {
  background: linear-gradient(135deg, var(--bs-red), var(--bs-red-dark)) !important;
  border-color: var(--bs-red) !important;
  color: #fff !important;
  font-weight: 900 !important;
}

/* =========================
   Tablet
========================= */

@media (max-width: 991px) {
  .s-cart-summary-content {
    display: none !important;
  }

  .home-slider .s-slider-container,
  .main-slider .s-slider-container,
  .s-block--hero-slider .s-slider-container,
  .s-block--main-slider .s-slider-container {
    width: calc(100% - 16px) !important;
    border-radius: 10px !important;
  }

  .home-slider .swiper-slide,
  .main-slider .swiper-slide,
  .s-block--hero-slider .swiper-slide,
  .s-block--main-slider .swiper-slide,
  .home-slider .swiper-slide a,
  .main-slider .swiper-slide a,
  .s-block--hero-slider .swiper-slide a,
  .s-block--main-slider .swiper-slide a,
  .home-slider .swiper-slide img,
  .main-slider .swiper-slide img,
  .s-block--hero-slider .swiper-slide img,
  .s-block--main-slider .swiper-slide img {
    border-radius: 10px !important;
  }

  .bs-hero-finder {
    width: calc(100% - 20px) !important;
    min-height: auto !important;
    margin-bottom: 24px !important;
    padding: 26px 12px 20px !important;
    border-radius: 18px !important;
  }

  .bs-hero-finder__content {
    max-width: 760px !important;
  }

  .bs-hero-finder__head {
    margin-bottom: 11px !important;
  }

  .bs-hero-finder__head h2 {
    font-size: 25px !important;
  }

  .bs-hero-finder__head p {
    font-size: 12px !important;
    max-width: 92% !important;
    margin-inline: auto !important;
  }

  .bs-hero-finder__form {
    padding: 13px !important;
    border-radius: 15px !important;
  }

  .bs-hero-finder__top,
  .bs-hero-finder__bottom {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  .bs-hero-finder__top .bs-hero-finder__field:nth-child(3) {
    grid-column: span 2 !important;
  }

  .bs-hero-finder__field--wide {
    grid-column: span 2 !important;
  }

  .bs-hero-finder__btn {
    grid-column: span 2 !important;
  }

  .bs-hero-finder__divider {
    margin: 9px 0 11px !important;
  }

  .bs-hero-finder__field label {
    font-size: 10.5px !important;
    margin-bottom: 5px !important;
  }

  .bs-hero-finder__field select,
  .bs-hero-finder__field input,
  .bs-hero-finder__btn {
    height: 38px !important;
    font-size: 12.5px !important;
    border-radius: 8px !important;
  }

  .bs-hero-finder__badges {
    margin-top: 10px !important;
    gap: 5px !important;
  }

  .bs-hero-finder__badges span {
    font-size: 10px !important;
    padding: 4px 8px !important;
    min-height: 21px !important;
  }
}

/* =========================
   Mobile
========================= */

@media (max-width: 767px) {
  .home-slider.s-block--hero-slider,
  .s-block--hero-slider.full-banner,
  .s-block--main-slider,
  .s-block--photos-slider {
    padding-top: 12px !important;
    padding-bottom: 14px !important;
  }

  .home-slider .s-slider-container,
  .main-slider .s-slider-container,
  .s-block--hero-slider .s-slider-container,
  .s-block--main-slider .s-slider-container {
    width: calc(100% - 12px) !important;
    border-radius: 9px !important;
  }

  .home-slider .swiper-slide,
  .main-slider .swiper-slide,
  .s-block--hero-slider .swiper-slide,
  .s-block--main-slider .swiper-slide,
  .home-slider .swiper-slide a,
  .main-slider .swiper-slide a,
  .s-block--hero-slider .swiper-slide a,
  .s-block--main-slider .swiper-slide a,
  .home-slider .swiper-slide img,
  .main-slider .swiper-slide img,
  .s-block--hero-slider .swiper-slide img,
  .s-block--main-slider .swiper-slide img {
    border-radius: 9px !important;
  }

  .bs-hero-finder {
    width: calc(100% - 14px) !important;
    padding: 22px 10px 17px !important;
    margin-bottom: 22px !important;
    border-radius: 16px !important;
  }

  .bs-hero-finder__head h2 {
    font-size: 23px !important;
  }

  .bs-hero-finder__head p {
    font-size: 11.5px !important;
    line-height: 1.45 !important;
  }

  .bs-hero-finder__form {
    padding: 11px !important;
    border-radius: 14px !important;
  }

  .bs-hero-finder__top,
  .bs-hero-finder__bottom {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .bs-hero-finder__top .bs-hero-finder__field:nth-child(3),
  .bs-hero-finder__field--wide,
  .bs-hero-finder__btn {
    grid-column: span 2 !important;
  }

  .bs-hero-finder__field label {
    font-size: 10px !important;
  }

  .bs-hero-finder__field select,
  .bs-hero-finder__field input,
  .bs-hero-finder__btn {
    height: 37px !important;
    font-size: 12px !important;
    padding-inline: 9px !important;
  }

  .bs-hero-finder__btn {
    margin-top: 1px !important;
  }

  .bs-hero-finder__badges span {
    font-size: 9.5px !important;
  }

  .s-block--banners .banner-square > div {
    width: calc(100% - 7px) !important;
  }

  .s-block--banners .banner-square .box-img {
    border-radius: 14px !important;
  }

  .s-block--banners .banner-square .box-img img {
    border-radius: 14px !important;
  }

  .s-block--banners .banner-square h3 {
    font-size: 11px !important;
    min-height: 30px !important;
  }

  .s-block--logos-slider a[aria-label],
  .s-block--logos-slider a.relative,
  .s-block--logos-slider a.bg-white,
  .s-block--logos-slider a.rounded-md,
  .s-block--logos-slider a.h-20,
  .s-block--logos-slider a.w-full {
    height: 108px !important;
    min-height: 108px !important;
    border-radius: 18px !important;
    padding: 14px !important;
  }

  .s-block--logos-slider a[aria-label] img,
  .s-block--logos-slider img.h-full,
  .s-block--logos-slider img.w-auto,
  .s-block--logos-slider img.object-contain {
    height: 66px !important;
    max-width: 112px !important;
    max-height: 66px !important;
  }

  .brand-section .brand-item {
    max-width: 112px !important;
    border-radius: 18px !important;
    padding: 14px !important;
  }

  .brand-section .brand-item img {
    max-width: 86px !important;
    max-height: 62px !important;
  }
}

/* Very small phones */
@media (max-width: 420px) {
  .bs-hero-finder {
    width: calc(100% - 10px) !important;
    padding: 20px 8px 15px !important;
  }

  .bs-hero-finder__head h2 {
    font-size: 21px !important;
  }

  .bs-hero-finder__top,
  .bs-hero-finder__bottom {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .bs-hero-finder__field label {
    font-size: 9.5px !important;
  }

  .bs-hero-finder__field select,
  .bs-hero-finder__field input,
  .bs-hero-finder__btn {
    height: 36px !important;
    font-size: 11.5px !important;
  }

  .bs-hero-finder__badges {
    display: none !important;
  }

  .s-block--banners:has(.banner-square) .container {
    padding-inline: 8px !important;
  }

  .s-block--banners .banner-square > div {
    width: calc(100% - 6px) !important;
  }

  .s-block--banners .banner-square h3 {
    font-size: 10px !important;
    min-height: 28px !important;
  }
}