/* ====== Font ======= */
@import url("https://kit-pro.fontawesome.com/releases/latest/css/pro.min.css");
@import url("https://kit-free.fontawesome.com/releases/latest/css/free.min.css");

@font-face {
  font-family: "Montserrat-Arabic-Regular";
  src: url("https://cdn.salla.sa/Xovzq/J11VUonqHjtkLVqUU5d6kwKknqEbDkkACEFu7csQ");
}
body,
*:not(i) {
  font-family: "Montserrat-Arabic-Regular", "Almarai", sans-serif !important;
}
/* old url logo https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/XeRZKA/6OKFa4zuXxlHOeJRvjRpZAjpUipFShiRgFz9oc76.png */

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

body {
  background-color: #fff !important;
}
.s-cart-summary-content {
  display: none !important;
}
.header-btn__icon {
  border: none !important;
  width: 2rem !important;
}

.header-btn__icon.sicon-shopping-bag:before {
  content: "";
  background-image: url("https://media.zid.store/399c579a-bc98-4adb-a4d5-b61f34b927f3/593dde6e-fe25-42cd-aeb7-cdbb47c07239.svg");
  width: 26px !important;
  height: 26px !important;
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.header-btn__icon.sicon-user-circle:before {
  content: "";
  background-image: url("https://media.zid.store/399c579a-bc98-4adb-a4d5-b61f34b927f3/90b32bb0-f240-4028-a3e1-27f15aeadcd6.svg");
  width: 24px !important;
  height: 22px !important;
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
header .sicon-menu {
  color: #000;
}

/*   center logo   */
@media (max-width: 460px) {
  .store-header .container > .relative div.flex:first-child {
    width: 61vw !important;
    justify-content: space-between !important;
  }
  .store-header .container > .relative div.flex:first-child a {
    flex-basis: 100%;
  }
  .store-header .container > .relative div.flex:first-child img {
    margin: auto !important;
  }
}
@media (max-width: 370px) {
  .store-header .container > .relative div.flex:first-child {
    width: 53vw !important;
  }
}

/* ====== Banners ====== */
.s-block--fixed-banner {
  /* max-width: 1000px; */
  margin: auto;
  margin-top: 0 !important;
}
.s-block--fixed-banner .container {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.s-block--fixed-banner .banner--fixed img {
  border-radius: 0 !important;
}

@media (max-width: 767px) {
  /* first banner with header */
  .s-block--fixed-banner:first-of-type {
    margin-top: -68px !important;
  }
  .index .main-nav-container {
    min-height: 68px;
    background-color: transparent !important;
  }
}

/* ====== categories ======= */
.s-block--banners .grid {
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1em;
  max-width: 1000px !important;
  text-align: center;
  margin: 2rem auto 1rem;
}
.s-block--banners .grid .banner-entry {
  grid-column: unset !important;
  grid-row: unset !important;
  min-height: 300px;
  border-radius: 8px;
}

@media (max-width: 767px) {
  .s-block--banners .grid {
    grid-template-columns: 1fr 1fr;
  }
  .s-block--banners .grid .banner-entry {
    min-height: 142px;
    height: 180px;
  }
}

/* ====== Features ====== */
.s-block--photos-slider:nth-of-type(2) {
  margin-top: 0px !important;
  margin-bottom: 10px !important;
  border-bottom: 1px solid #d9d9d9;
}
.s-block--photos-slider:nth-of-type(2)
  salla-slider.photos-slider
  .swiper-slide {
  animation: slide 15s linear infinite;
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  width: 50% !important;
}
.s-block--photos-slider:nth-of-type(2) .swiper-wrapper {
  transform: none !important;
}
.s-block--photos-slider:nth-of-type(2) .swiper {
  padding-bottom: 0 !important;
}
.s-block--photos-slider:nth-of-type(2) .s-slider-nav-arrow,
.s-block--photos-slider:nth-of-type(2) .swiper-pagination {
  display: none !important;
}

@media (max-width: 767px) {
  .s-block--photos-slider:nth-of-type(2)
    salla-slider.photos-slider
    .swiper-slide {
    width: 100% !important;
  }
}

@keyframes slide {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(250%);
  }
}

/* ====== Product ====== */
.s-block__title {
  justify-content: center !important;
}
.s-block__title .right-side {
  padding: 0 !important;
}
.s-block__title .left-side {
  display: none !important;
}
.s-products-list-vertical-cards {
  grid-template-columns: 1fr !important;
}
.s-products-list-vertical-cards .s-product-card-entry {
  max-width: 300px;
  margin: auto;
  width: 100%;
}

section.s-block .s-block__title h2 {
  text-align: center;
}
/* إضافة وصف لعنوان المنتجات */
section[class="s-block container"] .s-block__title h2:after,
section.s-block--banners .s-block__title h2:after {
  content: "صُنِع زيت RayRay ليكون رفقيك المثالي في رحلة الترطيب العميق لبشرتك بلمسة فاخرة ورائحة الباودر الناعمة، تركيبة فاخرة غنية بالزيوت الطبيعية تمنح بشرتك نعومة وإشراقة  طوال اليوم, الاختيار الأمثل للعناية المتكاملة والجمال الدائم.";
  display: block;
  text-align: center;
  font-weight: 300 !important;
  font-size: 14px;
  line-height: 1.6;
  width: 100%;
  padding: 10px 25px;
  margin: 0 auto;
  max-width: 700px;
}
section[class="s-block container"] .s-block__title h2,
section[class="s-block container"] .s-block__title h2:after {
  display: none !important;
}

/* إضافة وصف لعنوان صور الانستا */
section.s-block--banners .s-block__title h2:after {
  content: "قوة الطبيعة وفن العناية بالبشرة.. لمسات من الطبيعة تجعل كل لحظة من روتينكِ الجمالي تجربة فريدة ومميزة.";
}

/* تحديث نص وصف المنتج */
.s-product-card-content-subtitle {
  font-size: 0 !important;
}
.s-product-card-content-subtitle:after {
  content: "RAYRAY OIL زيت الجسم برائحة البودرة، يجمع بين روعة العطر وفعالية الترطيب, صُنع بعناية ليكون رفيقكِ المثالي في رحلتك نحو بشرة ناعمة ومرطبة";
  font-weight: 300 !important;
  display: inline-block;
  padding-top: 5px;
  font-size: 13px;
  line-height: 1.5;
}
/* the shape */
.s-product-card-entry {
  background: transparent;
}
.s-product-card-content {
  border-radius: 22px;
  padding-top: 7rem !important;
  background: #e6e0dc;
  background: linear-gradient(204.38deg, #f7f5f6 1.45%, #d0c2b9 97.42%);
}
.s-product-card-image {
  background-color: transparent !important;
  margin-bottom: -7rem;
  z-index: 10;
  padding-left: 6px;
  padding-right: 6px;
}
.s-product-card-fit-height .s-product-card-image {
  height: 15rem;
  max-height: 15rem;
}
.s-product-card-content-sub {
  min-height: 30px !important;
}

/* texts */
.s-product-card-content-title a {
  font-size: 1.1rem;
  color: #000 !important;
}
.s-product-card-content-subtitle {
  color: #222 !important;
}
.s-product-card-content-footer .s-button-btn {
  background-color: #000 !important;
  color: #fff !important;
  fill: #fff !important;
  border-color: #000 !important;
  line-height: 1.4rem !important;
  border-radius: 8px !important;
}
/* update btn add to cart icon */
.s-product-card-content-footer .sicon-shopping-bag {
  display: none;
}
.s-product-card-content-footer .s-button-primary-outline:before {
  content: url("https://media.zid.store/eeebe6f0-dc0e-46e7-a4fb-56c7c4f3196f/ef74c11e-2ef9-4ef1-a83a-23e797c2e347.svg");
  display: block;
  margin-top: 3px;
  margin: 3px 3px 0;
}
/* Product Details */

.main-content div.mb-4.flex.justify-between.bg-white.px-4.py-2 {
  /* hide SKU code */
  display: none;
}

/*=== Product Comments ===== */
.s-comments-product {
  background-color: #fff !important;
}
.s-comments-count-label,
.s-comments-item-user-info-name {
  font-size: 0.9rem;
}
.s-comments-product .s-comments-item-inner {
  padding: 1rem;
  background-color: #fcf4f2;
  border-radius: 8px;
}
.s-comments-item {
  padding-bottom: 1rem;
}
.s-comments-item-user-info {
  justify-content: space-between;
  width: 100% !important;
}
.s-comments-item-user-wrapper {
  justify-content: flex-end;
}
.s-comments-item-admin-wrapper {
  margin-top: 8px;
}
.s-comments-item-admin-wrapper .s-comments-item-avatar-img {
  object-fit: contain !important;
}

/* reviews testimonial in category page  */
.s-reviews-testimonial {
  box-shadow: none !important;
  text-align: center;
  margin-bottom: 20px;
  background-color: #fcf4f2 !important;
  border-radius: 4px;
}
.s-reviews-testimonial__avatar {
  display: none;
}
.s-reviews-testimonial__icon svg {
  top: 8px;
  left: 15px !important;
}
.s-reviews-testimonial__rating {
  margin-left: 0 !important;
}

/* ====== Footer ====== */
.store-footer {
  background-color: #ffd0ca !important;
  color: #000 !important;
  max-width: 96% !important;
  margin: 1rem auto 0;
  padding-right: 1rem;
  padding-left: 1rem;
  padding-top: 1rem;
  border-radius: 32px 32px 0 0;
}
.store-footer .store-footer__inner {
  background-color: transparent !important;
  color: #000 !important;
}
.store-footer__inner {
  padding-top: 1rem !important;
  padding-bottom: 0 !important;
}
.store-footer .grid.container {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr;
}
.store-footer .grid.container > div {
  grid-column: unset;
}

.store-footer__inner a h3 {
  font-size: 0px !important;
  content: url("https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/XeRZKA/eePtLXk8se1bfV4QAtAtMtjmpRkxgUaDT3KRGley.png");
  height: 56px;
  margin: auto;
  margin-bottom: 10px;
}

.store-footer a {
  color: #000 !important;
  fill: #000 !important;
  border-color: transparent !important;
}
.store-footer a:hover {
  text-decoration: underline;
}

.store-footer .s-social-list {
  gap: 0.2rem;
  justify-content: center;
}
.s-social-link a svg {
  height: 1.4rem;
  width: 1.4rem;
}
.s-social-link a {
  height: 2.5rem;
  width: 2.5rem;
}
.s-social-link a:hover {
  border-color: #000 !important;
}

.store-footer .flex {
  justify-content: center;
}
.s-payments-list-item {
  border-radius: 6px !important;
}
@media (min-width: 1024px) {
  .rtl\:lg\:pl-20:where([dir="rtl"], [dir="rtl"] *) {
    padding-left: 1rem;
  }
}

@media (max-width: 767px) {
  body {
    font-size: 13px;
  }

  section[class="s-block container"] .s-block__title h2:after {
    font-size: 12px;
  }
  .store-footer .grid.container {
    display: block !important;
    text-align: center;
  }
  .footer-logo img {
    margin: auto;
  }
  .store-footer .flex,
  .s-contacts-item {
    justify-content: center;
  }
  .store-footer h3 {
    font-size: 1rem;
    margin-top: 1rem;
  }

  .s-reviews-testimonial {
    padding: 0.5rem;
  }

  .s-comments-count-label,
  .s-comments-item-user-info-name {
    font-size: 12px;
  }
  .s-comments-item-user-info span {
    font-size: 10px !important;
  }
  .s-comments-item-wrapper {
    font-size: 13px !important;
  }
}
/* ====== Home FAQs ====== */
.faqs-div {
  margin: 40px auto;
  width: 70%;
}
.faqs-div h3,
.faqs-div h5 {
  color: #000;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 10px;
}
.faqs-div h5 {
  font-size: 1rem;
  font-weight: 400;
  margin-bottom: 20px;
}
/* accordion */
button.accordion {
  padding-left: 2rem !important;
  margin-bottom: 0;
  width: 100%;
  background-color: #f7f5f6;
  color: #000;
  border: none;
  border-right: 1px solid #000;
  outline: none;
  text-align: start;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s linear;
  position: relative;
  margin-top: 15px;
  border-radius: 16px;
}
html[lang="en"] button.accordion {
  padding-left: 0rem !important;
  padding-right: 2rem !important;
}

button.accordion:after {
  font-family: "Font Awesome 5 Pro";
  content: "\2b" !important;
  font-size: 20px;
  float: left;
  position: absolute;
  left: 1rem;
  top: 0.8rem;
  color: #000;
}

html[lang="en"] button.accordion {
  text-align: left;
}
html[lang="en"] button.accordion:after {
  float: right;
  left: auto;
  right: 1rem;
}
button.accordion.is-open:after {
  content: "\f068" !important;
  font-size: 14px;
}

button.accordion.is-open {
  background-color: #f7f5f6;
  color: #000;
  border-right: 1px solid #000;
  border-radius: 16px 16px 0px 0px;
}
.accordion-content {
  border: 0px solid #000;
  background-color: #f7f5f6;
  color: #000;
  border-right: 1px solid #000;
  border-top: none;
  padding: 0 20px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-in-out;
  border-radius: 0px 0px 16px 16px;
  font-size: 14px;
  line-height: 2.5;
  text-align: start;
}

button.accordion.is-open + .accordion-content {
  padding-bottom: 1rem;
}

/* Pages .product__description + - */
.product__description button.accordion {
  background-color: #fff;
  border: none;
  border-bottom: 1px solid #f0f3fd;
  border-radius: 0;
}
.product__description button.accordion.active {
  background-color: #fff;
  color: #2b2b2b;
  border: 1px solid #f5f5f5;
  border-radius: 8px 8px 0px 0px;
}
.product__description .panel {
  padding: 0 10px;
  display: none;
  overflow: hidden;
  border: 1px solid #ccc;
  border-top: none;
}
.product__description button.accordion.active + .panel {
  background-color: #fff;
  border: 1px solid #f5f5f5;
  border-top: none;
  padding-bottom: 1rem;
}

button.accordion.active:after {
  content: "\f068" !important;
  font-size: 14px;
}
.product__description a {
  color: #b51a00;
}
.product__description {
  padding: 0 !important;
}

@media (max-width: 767px) {
  /* Home FAQs */
  .faqs-div {
    margin: 50px auto;
    width: 96%;
    padding: 0px 5px;
  }

  .faqs-div h3 {
    font-size: 1.2rem;
    margin-bottom: 0px;
  }
  .faqs-div h5 {
    font-size: 12px;
    margin-bottom: 10px;
  }
  button.accordion {
    padding: 10px 15px;
    font-size: 11px;
  }
  .accordion-content {
    font-size: 12px;
  }
  button.accordion:after {
    top: 0.55rem;
  }
  button.accordion:after {
    font-size: 18px;
  }
}
/* Home Our Story */
.story-div {
  margin: auto;
  padding: 40px 10%;
  background-color: #fff;
  max-width: 65% !important;
  text-align: center;
}
.story-div img {
  height: 85px;
  margin: auto;
}
.story-div h2 {
  font-size: 1.4rem;
  margin: 5px auto 20px !important;
  color: #000 !important;
  font-weight: bold;
  text-align: center;
  display: none;
}
.story-div p {
  color: #000;
  font-size: 15px !important;
  font-weight: 300;
  margin-bottom: 8px;
  line-height: 1.8;
  padding: 0 10px;
}

.story-div a.btn {
  background-color: #000;
  color: #fff !important;
  border-radius: 42px;
  display: inline-block;
  padding: 12px 45px 12px !important;
  margin: 15px 0;
  font-size: 20px;
  font-weight: normal;
  min-width: 50%;
  display: none;
}
@media (max-width: 767px) {
  /* Home Our Story */
  .story-div {
    padding: 30px 5%;
    max-width: 96% !important;
  }
  .story-div img {
    height: 75px;
  }
  .story-div h2 {
    font-size: 1.2rem;
    margin: 15px auto 10px !important;
  }
  .story-div p {
    font-size: 13px !important;
  }
}

/* End */