section.s-block.s-block--bundle-about-us {
    margin-top: 0 !important;
}
section.s-block.s-block--bundle-feature-split {
    margin-top: 0 !important;
}
section.s-block.s-block--bundle-vision-mission-values .pillar-card .image-wrapper {
    aspect-ratio: 4 / 3 !important;
}
@media (min-width: 640px) {
  section.s-block.s-block--bundle-feature-split {
    margin-top: 0 !important;
  }
}
.copyright-text p {
    color: #1d1a19; !important
}
:root {
  --sazera-peach-bg: #fcf1ea;
  --sazera-peach-bg-2: #fbe7de;
  --sazera-teal: #2f6f5e;
  --sazera-text: #1d1a19;
  --sazera-muted: #7a7570;
}
.home_component_title,
.home_component_title *,
section h1,
section h2,
.banner h1,
.banner h2,
[class*="banner"] h1,
[class*="banner"] h2 {
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

.home_component_title + p,
.home_component_subtitle {
  letter-spacing: .03em;
}
header.store-header .main-menu a,
.main-menu a {
  text-transform: uppercase;
  font-size: 12.5px !important;
  letter-spacing: .08em !important;
  font-weight: 600 !important;
}

.header-logo,
[class*="logo"] a,
.navbar-logo {
  letter-spacing: .12em;
}
.s-button-btn,
.s-button-solid,
button.s-button-element,
a.btn,
.btn,
[class*="banner"] a.block {
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  border-radius: 2px !important;
}

.s-button-outline,
.s-button-light-outline {
  border-radius: 2px !important;
  border-width: 1px !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
}
.store-footer h3 {
  color: rgb(48, 116, 115) !important;
}
.store_categories_section a p,
.store_categories_section .category-name,
.store_categories_section span {
  text-transform: uppercase;
  font-size: 11px !important;
  letter-spacing: .06em;
  color: var(--sazera-text);
}
.store_categories_section img {
  border-radius: 50% !important;
  border: 1px solid #f1e4dc;
}
.store_categories_section {
  display: flex !important;
  flex-direction: column !important;
}
.store_categories_section > .home_component_subtitle {
  order: -1 !important;
}
.home_component_subtitle {
  margin-bottom: unset !important;
}
.store_category_item_wrapper {
  width: 100% !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  justify-content: flex-start !important;
  gap: 20px !important;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}
.store_category_item {
  flex: 0 0 auto !important;
}
@media (min-width: 900px) {
  .store_category_item_wrapper {
    justify-content: center !important;
    overflow-x: visible !important;
  }
}
.products_tabs_section .home_component_title {
  position: relative;
}
.products_tabs_section .home_component_title::before {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #2f6f5e; 
  margin-bottom: 8px;
}
html[lang="ar"] .products_tabs_section .home_component_title::before {
  content: "الأكثر مبيعًا في سازيرا";
}
html[lang="en"] .products_tabs_section .home_component_title::before {
  content: "TRUSTED FORMULAS FOR YOUR ROUTINE";
}

.products_tabs_section_tab {
  color: #7a7570 !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 12.5px !important;
}
.products_tabs_section .s-tabs-header-item {
  padding-bottom: 8px !important;
  border-bottom: 2px solid transparent !important;
}
.products_tabs_section .s-tabs-header-item.s-tabs-active {
  border-bottom: 2px solid var(--color-primary, #ff967a) !important;
}
.products_tabs_section .s-tabs-header-item.s-tabs-active .products_tabs_section_tab {
  color: #1d1a19 !important;
  font-weight: 700 !important;
}
.grid:has(img[alt="Dermatologically Approved"]) {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0 !important;
  max-width: 900px;
  margin: 0 auto !important;
}
.grid:has(img[alt="Dermatologically Approved"]) > div {
  border-inline-end: 1px solid #e5e0dc !important;
  padding: 0 32px !important;
}
.grid:has(img[alt="Dermatologically Approved"]) > div:last-child {
  border-inline-end: none !important;
}
.grid:has(img[alt="Dermatologically Approved"]) img {
  width: 64px !important;
  height: 64px !important;
  margin-bottom: 14px !important;
}
.grid:has(img[alt="Dermatologically Approved"]) h3 {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #3a3532 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.grid:has(img[alt="Dermatologically Approved"]) p {
  display: none !important;
}
.accordion-gallery-container {
  position: relative;
}
.accordion-gallery-container .home_component_subtitle {
  text-align: center;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  color: #2f6f5e;
  margin: 0 0 6px;
}
.accordion-gallery-container .home_component_title {
  text-align: center;
  margin: 0 0 24px;
}

.accordion-gallery-container .accordion-button-wrapper {
  position: absolute !important;
  top: auto !important;
  bottom: 16px !important;
  left: 16px !important;
  right: auto !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
}
.accordion-gallery-container .accordion_gallery_btn {
  transform: none !important;
  writing-mode: horizontal-tb !important;
  display: inline-block;
  white-space: nowrap;
}
.who-we-are-kicker {
  display: block;
  text-align: inherit;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  color: #2f6f5e;
  margin: 0 0 8px;
}
.who-we-are-btn {
  color: rgb(43, 30, 22) !important;
}

.results-driven-kicker {
  display: block;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  color: rgb(48, 116, 115) !important;
  margin: 0 0 4px;
}
section.s-block.s-block--bundle-brand-showcase {
  background: #fff9f2;
}
.brand-card {
  border-radius: 0 !important;
  aspect-ratio: 4 / 3 !important;
}

.athena_customer_reviews {
  height: auto !important;
  background-image: none !important;
}
.athena_customer_reviews > div:first-child h3 {
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: #2f6f5e !important;
  margin-bottom: 6px !important;
}
.athena_customer_reviews h1.home_component_subtitle {
  font-size: 26px !important;
  font-weight: 500 !important;
  color: #1d1a19 !important;
}

.athena_customer_reviews [class*="w-\\[80"] {
  width: 100% !important;
  max-width: 1200px !important;
}
.athena_customer_reviews .swiper-wrapper {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  transform: none !important;
  width: 100% !important;
}
.athena_customer_reviews .swiper-slide {
  width: 100% !important;
  height: auto !important;
  min-height: 220px !important;
  margin: 0 !important;
  box-shadow: none !important;
  border: 1px solid #eee2da !important;
  padding: 24px 16px !important;
}
@media (max-width: 900px) {
  .athena_customer_reviews .swiper-wrapper {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 560px) {
  .athena_customer_reviews .swiper-wrapper {
    grid-template-columns: 1fr !important;
  }
}

.athena_customer_reviews .swiper-slide p {
  color: #4a4541 !important;
  font-size: 13px !important;
}
.athena_customer_reviews .swiper-slide h3 {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1d1a19 !important;
  margin-bottom: 4px !important;
}

.athena_customer_reviews p,
.athena_customer_reviews h3 {
  unicode-bidi: plaintext !important;
}

.athena_customer_reviews .swiper-slide .flex.flex-col.gap-3.items-center {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
}
.athena_customer_reviews .swiper-slide .flex.flex-col.gap-3.items-center > div:last-child {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

.athena_customer_reviews .default-avatar {
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: #ff967a;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
}
.blog_articles_title,
.blog_articles_subtitle {
  text-align: center;
}
h3.blog_articles_title {
  order: 2;
}
p.blog_articles_subtitle {
  order: 1;
}
div:has(> h3.blog_articles_title) {
  display: flex !important;
  flex-direction: column !important;
}
.blog_articles_subtitle {
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  color: #2f6f5e !important;
  margin-bottom: 6px;
}
.blog_articles_title {
  font-size: 26px !important;
  font-weight: 500 !important;
  color: #1d1a19 !important;
}

.post-entry .post-entry__icons,
.post-entry > .flex-1 > div:first-child {
  display: none !important;
}
.post-entry > .flex-1 {
  display: flex !important;
  flex-direction: column !important;
}
.post-entry__title {
  order: 2;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1d1a19 !important;
}
.post-entry > .flex-1 > p {
  order: 1;
  text-transform: uppercase !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .06em;
  color: #2f6f5e !important;
  margin-bottom: 6px !important;
}
.post-entry__image img {
  opacity: 1 !important;
}

.journal-read-link {
  order: 3;
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  text-decoration: underline;
  color: #1d1a19;
}
.faq_title {
  font-size: 26px !important;
  font-weight: 500 !important;
  color: #1d1a19 !important;
  text-align: start !important;
  width: 100%;
}
section:has(.faq_title) {
  align-items: flex-start !important;
}
section:has(.faq_title) > div:has(.faq_title) {
  width: 100%;
  max-width: 768px;
}
section:has(.faq_title) .max-w-4xl {
  max-width: 100% !important;
}
.faq_item {
  padding: 20px 0 !important;
  border-bottom: 1px solid #eee2da !important;
}
.faq_question {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #1d1a19 !important;
  cursor: pointer;
}
.faq_question svg {
  width: 14px !important;
  height: 14px !important;
}
.faq_answer {
  font-size: 13px !important;
  color: #8a8580 !important;
  margin-top: 10px !important;
  line-height: 1.6;
}
.grid.grid-cols-2.lg\:grid-cols-3.xl\:grid-cols-4:has(> div:nth-child(4):last-child) p {
  color: #6b6560 !important;
}

section:has(> div.grid.grid-cols-2.lg\:grid-cols-3.xl\:grid-cols-4 > div:nth-child(4):last-child) {
  position: relative !important;
  background-color: transparent !important;
  padding-top: 24px !important;
  margin-top: 0 !important;
}
section:has(> div.grid.grid-cols-2.lg\:grid-cols-3.xl\:grid-cols-4 > div:nth-child(4):last-child)::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  background-color: #fff9f2;
  z-index: -1;
}
.athena-card {
  border: 1px solid #f0e9e4 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}
.athena-product-title {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--sazera-text) !important;
  line-height: 1.4;
}
custom-salla-product-card h4 {
  font-weight: 700 !important;
  font-size: 14px !important;
  color: var(--sazera-text) !important;
}
.athena-card [class*="badge"],
.athena-card [class*="sale-badge"] {
  border-radius: 2px !important;
  text-transform: uppercase;
  font-size: 10px !important;
  letter-spacing: .05em;
}
.store-footer {
  background-color: var(--sazera-peach-bg-2) !important;
}
.store-footer h3,
.store-footer h4,
.store-footer [class*="title"] {
  text-transform: uppercase;
  font-size: 12px !important;
  letter-spacing: .08em !important;
  font-weight: 700 !important;
  color: var(--sazera-text) !important;
}
.store-footer a {
  font-size: 13px !important;
  color: var(--sazera-muted) !important;
}
.store-footer a:hover {
  color: var(--color-primary, #ff967a) !important;
}
.store-footer button[type="submit"],
.store-footer .newsletter button {
  text-transform: uppercase;
  letter-spacing: .08em;
  border-radius: 2px !important;
}
header.store-header .inner.bg-inherit > .container > .hidden.lg\:block > div:first-child,
header.store-header .inner.bg-inherit > .container > .hidden.lg\:block > div:last-child {
  position: relative !important;
}
header.store-header .inner.bg-inherit > .container > .hidden.lg\:block > div:first-child::after,
header.store-header .inner.bg-inherit > .container > .hidden.lg\:block > div:last-child::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
  pointer-events: none;
}
header.store-header.navbar-overlay-transparent .inner.bg-inherit > .container > .hidden.lg\:block > div:first-child::after,
header.store-header.navbar-overlay-transparent .inner.bg-inherit > .container > .hidden.lg\:block > div:last-child::after {
  border-bottom: 1px solid rgba(255, 255, 255, .35);
}
.custom-advanced-slider .slide-content-overlay {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: flex-end !important;
  text-align: center !important;
  padding-bottom: 64px !important;
}
.custom-advanced-slider .slide-text-wrapper {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.custom-advanced-slider .slide-text-wrapper * {
  text-align: center !important;
}
.custom-advanced-slider .slide-text-wrapper a,
.custom-advanced-slider .slide-text-wrapper button {
  margin-left: auto !important;
  margin-right: auto !important;
  display: inline-flex !important;
}
.faq_item {
  min-height: 42px;
    padding: 10px 0 !important;
}
.faq_question {
    padding: 8px 0 !important;
}
.faq_answer.expanded {
    padding: 8px 0 !important;
}

.grid.grid-cols-2.lg\:grid-cols-3.xl\:grid-cols-4:has(> div:nth-child(3):last-child) {
  grid-template-columns: repeat(3, 1fr) !important;
  max-width: 1600px !important;
  margin: 0 auto !important;
  gap: 0 !important;
}
.grid.grid-cols-2.lg\:grid-cols-3.xl\:grid-cols-4:has(> div:nth-child(3):last-child) > div {
  border-inline-end: 1px solid #e5e0dc !important;
  padding: 0 32px !important;
}
.grid.grid-cols-2.lg\:grid-cols-3.xl\:grid-cols-4:has(> div:nth-child(3):last-child) > div:last-child {
  border-inline-end: none !important;
}
.grid.grid-cols-2.lg\:grid-cols-3.xl\:grid-cols-4:has(> div:nth-child(3):last-child) img {
  width: 64px !important;
  height: 64px !important;
  margin-bottom: 14px !important;
}
.grid.grid-cols-2.lg\:grid-cols-3.xl\:grid-cols-4:has(> div:nth-child(3):last-child) h3 {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #1d1a19 !important;
  letter-spacing: 0 !important;
}
.grid.grid-cols-2.lg\:grid-cols-3.xl\:grid-cols-4:has(> div:nth-child(3):last-child) p {
  display: none !important;
}

@media (max-width: 640px) {
  .grid.grid-cols-2.lg\:grid-cols-3.xl\:grid-cols-4:has(> div:nth-child(3):last-child) > div {
    padding: 0 10px !important;
  }
  .grid.grid-cols-2.lg\:grid-cols-3.xl\:grid-cols-4:has(> div:nth-child(3):last-child) img {
    width: 44px !important;
    height: 44px !important;
    margin-bottom: 8px !important;
  }
  .grid.grid-cols-2.lg\:grid-cols-3.xl\:grid-cols-4:has(> div:nth-child(3):last-child) h3 {
    font-size: 11px !important;
  }
}
a.navbar-brand {
  position: relative;
}
.sazera-scroll-logo {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

header.store-header.navbar-sticky a.navbar-brand > img:not(.sazera-scroll-logo) {
  visibility: hidden !important;
}
header.store-header.navbar-sticky a.navbar-brand .sazera-scroll-logo {
  display: block !important;
}
.sazera-shipping-bar{
  padding: 16px 20px 14px;
  border-bottom: 1px solid #eee2da;
}
.sazera-shipping-bar__msg{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #2f6f5e;
  margin-bottom: 10px;
}
.sazera-shipping-bar__msg svg{ width: 18px; height: 18px; flex-shrink: 0; }
.sazera-shipping-bar__track{
  height: 6px;
  border-radius: 999px;
  background: #eee2da;
  overflow: hidden;
}
.sazera-shipping-bar__fill{
  height: 100%;
  border-radius: 999px;
  background: #2f6f5e;
  transition: width .3s ease;
}

aside.side-panel--cart mini-product-card .mini-product-card{
  height: auto !important;
  align-items: center !important;
  position: relative !important;
  border: 1px solid #eee2da !important;
  border-radius: 0 !important;
  padding: 10px !important;
  padding-inline-end: 44px !important;
}
section.cart-item.bg-white.p-2\.5.mb-2\.5.md\:mb-5.relative.border-2.border-gray-200 .space-y-1 {
    width: 50% !important;
}
.mini-product-card.flex.items-center.gap-3.p-3.bg-white.border-2.border-gray-200.hover\:shadow-md.transition-shadow.h-\[130px\] {
    min-height: 103px !important;
}
.side-panel__bottom.flex.flex-col.gap-5 .flex.gap-2{
  flex-direction: column !important;
}
.s-slider-block__title {
    text-align: start !important;
}
aside.side-panel--cart mini-product-card .mini-product-card > div:first-child{
  height: 48px !important;
  width: 48px !important;
  flex-shrink: 0 !important;
}
aside.side-panel--cart mini-product-card .mini-product-card img{
  width: 48px !important;
  height: 48px !important;
  object-fit: cover !important;
  border-radius: 4px !important;
}
aside.side-panel--cart mini-product-card h3{
  font-size: 12.5px !important;
  font-weight: 400 !important;
  white-space: normal !important;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
aside.side-panel--cart mini-product-card .mb-2{ margin-bottom: 0 !important; }
aside.side-panel--cart mini-product-card .mb-2 h4{
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #1d1a19 !important;
}
aside.side-panel--cart mini-product-card .mini-product-card .w-full:has(> salla-add-product-button){
  position: absolute !important;
  top: 50% !important;
  inset-inline-end: 8px !important;
  transform: translateY(-50%) !important;
  width: auto !important;
}
aside.side-panel--cart mini-product-card salla-add-product-button,
aside.side-panel--cart mini-product-card salla-add-product-button .w-full,
aside.side-panel--cart mini-product-card .s-button-wrap,
aside.side-panel--cart mini-product-card .s-button-element{
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  flex-shrink: 0;
}
aside.side-panel--cart mini-product-card .s-button-text i,
aside.side-panel--cart mini-product-card .s-button-text span{
  display: none !important;
}
aside.side-panel--cart mini-product-card .s-button-element::after{
  content: "+";
  font-size: 18px;
  line-height: 1;
}
.main-content:has(> #free-shipping){
  background: #fff;
  border: 1px solid #eee2da;
  border-radius: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  padding: 20px 24px;
}

.main-content:has(> #free-shipping) #free-shipping{
  box-shadow: none !important;
  margin: 0 -24px 16px -24px !important;
  padding: 0 24px 16px 24px !important;
  border-bottom: 1px solid #eee2da !important;
  border-radius: 0 !important;
}
#free-shipping-bar{
  display: block !important;
  margin-top: 12px !important;
  background: #eee2da !important;
  height: 6px !important;
}
#free-shipping-bar .progress-bg{
  background: #2f6f5e !important;
  height: 6px !important;
}
#free-shipping-bar i{ display: none !important; }
#free-shipping .flex.items-center{ gap: 8px; }
#free-shipping i.bg-primary{
  background: transparent !important;
  color: #2f6f5e !important;
  width: 20px !important;
  height: 20px !important;
  font-size: 20px !important;
  border-radius: 0 !important;
}
#free-shipping .shipping-item.font-bold{
  color: #2f6f5e !important;
  font-size: 14px !important;
}
.main-content:has(> #free-shipping) > form .cart-item{
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 0 -24px !important;
  padding: 18px 24px !important;
  border-bottom: 1px solid #eee2da !important;
}
.main-content:has(> #free-shipping) > form:last-of-type .cart-item{
  border-bottom: none !important;
}

.main-content:has(> #free-shipping) .cart-item > div{
  display: grid !important;
  grid-template-columns: 60px minmax(0,1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 10px;
  align-items: start;
  margin-bottom: 0 !important;
}
.main-content:has(> #free-shipping) .cart-item > div > div{
  display: contents !important;
}

.main-content:has(> #free-shipping) .cart-item > div > div:first-child > a{
  grid-column: 1;
  grid-row: 1 / span 2;
  margin: 0 !important;
}
.main-content:has(> #free-shipping) .cart-item img{
  width: 60px !important;
  height: 60px !important;
  object-fit: contain !important;
  padding: 4px !important;
  border: none !important;
  background: #f6f2ee !important;
  border-radius: 3px !important;
  margin: 0 !important;
}

.main-content:has(> #free-shipping) .cart-item > div > div:first-child > div{
  grid-column: 2;
  grid-row: 1;
  margin: 0 !important;
}
.main-content:has(> #free-shipping) .cart-item h1{
  font-size: 14px !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}
.main-content:has(> #free-shipping) .cart-item h1 a{
  font-size: 14px !important;
  color: #1d1a19 !important;
}
.main-content:has(> #free-shipping) .cart-item .item-price,
.main-content:has(> #free-shipping) .cart-item .item-original-price,
.main-content:has(> #free-shipping) .cart-item #has_discount,
.main-content:has(> #free-shipping) .cart-item #original_price{
  display: none !important;
}

.main-content:has(> #free-shipping) .cart-item salla-quantity-input{
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
  margin: 0 !important;
}
.main-content:has(> #free-shipping) .cart-item .s-quantity-input-container{
  border-radius: 0 !important;
  border-color: #e2e2e2 !important;
  height: 30px !important;
  width: 92px !important;
}
.main-content:has(> #free-shipping) .cart-item .s-quantity-input-button{
  width: 28px !important;
  height: 28px !important;
}
.main-content:has(> #free-shipping) .cart-item .s-quantity-input-input{
  height: 28px !important;
  width: 34px !important;
  font-size: 13px !important;
  border-inline-start: none !important;
  border-inline-end: none !important;
  border-left: none !important;
  border-right: none !important;
}
html[dir="ltr"] .main-content:has(> #free-shipping) .cart-item .s-quantity-input-container{
  flex-direction: row-reverse !important;
}

.main-content:has(> #free-shipping) .cart-item p.text-primary{
  grid-column: 3;
  grid-row: 2;
  align-self: center;
  justify-self: end;
  color: #1d1a19 !important;
  font-size: 14px !important;
  padding: 0 !important;
  margin: 0 !important;
}
.main-content:has(> #free-shipping) .cart-item p.text-primary > span:first-child{
  display: none !important;
}
.main-content:has(> #free-shipping) .cart-item .item-total{
  color: #1d1a19 !important;
  font-weight: 600 !important;
}
.main-content:has(> #free-shipping) .cart-item .item-total i,
.main-content:has(> #free-shipping) .cart-item p.text-primary i{
  color: #1d1a19 !important;
}

.main-content:has(> #free-shipping) .cart-item > span{
  top: 16px !important;
  inset-inline-end: 0 !important;
  inset-inline-start: auto !important;
}
.main-content:has(> #free-shipping) .cart-item button.btn--delete{
  background: transparent !important;
  color: #9b9b9b !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 0 !important;
  font-size: 14px !important;
}

#cart-gifting{ display: none !important; }
.sticky.top-24:has(salla-cart-coupons){
  display: flex !important;
  flex-direction: column;
  background: #fff;
  border: 1px solid #eee2da;
  border-radius: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  overflow: hidden;
}
.sticky.top-24:has(salla-cart-coupons) > .shadow-default{
  order: 2;
  box-shadow: none !important;
  border-radius: 0 !important;
  border-bottom: none !important;
  margin: 0 !important;
  padding: 4px 24px 18px 24px !important;
}
.sticky.top-24:has(> salla-cart-summary-card.s-cart-summary-card--desktop) > salla-cart-summary-card{
  display: contents !important;
}
.s-cart-summary-card--desktop .s-cart-summary-card-sheet-wrap{
  order: 1;
  padding: 20px 24px 0 !important;
}
.s-cart-summary-card--desktop .s-cart-summary-card-bar{
  order: 3;
  padding: 16px 24px 0 !important;
  border-top: 1px solid #eee2da !important;
}
.s-cart-summary-card--desktop .s-cart-summary-card-action{
  order: 4;
  padding: 14px 24px 20px !important;
}

.s-cart-summary-card-action .s-button-element,
.s-cart-coupons-coupon-button.s-button-element{
  background: #2b2622 !important;
  color: #fff7ee !important;
  border-color: #2b2622 !important;
  border-radius: 0 !important;
}
.s-cart-summary-card-action .s-button-element{
  height: 48px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .8px;
}
.s-cart-coupons-coupon-input-container .form-input{
  border-radius: 0 !important;
  border-color: #e2e2e2 !important;
  height: 42px !important;
}
.s-cart-coupons-coupon-button.s-button-element{ height: 42px !important; }
.s-cart-coupons-coupon-label{ font-size: 13px !important; }

.sazera-shipping-line{ margin-top: 8px; }
.sazera-shipping-line .sazera-shipping-free{ color: #2f6f5e !important; }

.sazera-summary-extras{
  order: 5;
  border-top: 1px solid #eee2da;
  padding: 16px 24px 18px;
}
.sazera-trust{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  text-align: center;
}
.sazera-trust__item{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  line-height: 1.35;
  color: #6b6560;
}
.sazera-trust__item svg{ width: 30px; height: 30px; color: #307473; }

.sazera-paylogos{
  margin-top: 14px;
  overflow: hidden;
}
.sazera-paylogos__track{
  display: flex;
  width: max-content;
  gap: 0;
  animation: sazera-paylogos-scroll 22s linear infinite;
}
@media (prefers-reduced-motion: reduce){
  .sazera-paylogos__track{ animation: none; }
}
.sazera-paylist{
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin: 0;
  padding: 0 8px 0 0;
  list-style: none;
}
.sazera-paylist li{
  flex: 0 0 auto;
  margin: 0;
}
.sazera-paylist img{ width: 100%; height: auto; display: block; }
@keyframes sazera-paylogos-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(calc(-100% / var(--sazera-copies, 3))); }
}

@media (max-width: 480px){
  .main-content:has(> #free-shipping){ padding: 16px; }
  .main-content:has(> #free-shipping) #free-shipping{
    margin: 0 -16px 14px -16px !important;
    padding: 0 16px 14px 16px !important;
  }
  .main-content:has(> #free-shipping) > form .cart-item{
    margin: 0 -16px !important;
    padding: 16px !important;
  }
  .main-content:has(> #free-shipping) .cart-item > div{
    grid-template-columns: 56px minmax(0,1fr) auto;
    column-gap: 12px;
  }
  .main-content:has(> #free-shipping) .cart-item img{ width: 56px !important; height: 56px !important; }
  .main-content:has(> #free-shipping) .cart-item h1 a{ font-size: 13px !important; }
  .main-content:has(> #free-shipping) .cart-item p.text-primary{ font-size: 13px !important; }

  .sticky.top-24:has(salla-cart-coupons) > .shadow-default{ padding: 4px 16px 16px 16px !important; }
  .sazera-summary-extras{ padding: 14px 16px 16px; }
  .sazera-trust{ gap: 8px; }
  .sazera-trust__item{ font-size: 10px; }
  .sazera-trust__item svg{ width: 26px; height: 26px; }
}
.s-add-product-button-main{ gap: 12px !important; }

.s-add-product-button-main salla-button .s-button-element{
  background: #2b2622 !important;
  border-color: #2b2622 !important;
  color: #fff7ee !important;
  border-radius: 0 !important;
  height: 48px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .6px;
}
salla-mini-checkout-widget.s-add-product-button-mini-checkout{
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  height: 48px !important;
  color: #2b2622 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.s-add-product-button-mini-checkout-content{
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .6px;
  color: #2b2622 !important;
}

salla-multiple-bundle-product.s-multiple-bundle-product-wrapper{
  display: block !important;
  background: #fdf8f1 !important;
  border: none !important;
  padding: 14px 18px !important;
  margin-top: 16px !important;
}
salla-multiple-bundle-product [slot="progress"]{
  display: inline-flex !important;
  flex: 0 0 auto !important;
  width: auto !important;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  background: #efe6da;
  color: #6b5f52;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
  border-radius: 0;
}
salla-multiple-bundle-product .s-accordion-wrapper{
  background: transparent !important;
  border-radius: 0 !important;
}
salla-multiple-bundle-product .s-accordion-head-wrapper{
  padding: 0 0 10px !important;
  border-radius: 0 !important;
  border-bottom: none !important;
}
salla-multiple-bundle-product .s-accordion-head-wrapper h2{
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .4px;
}
salla-multiple-bundle-product .s-accordion-head-wrapper-toggle{ display: none !important; }
salla-multiple-bundle-product .s-accordion-body-wrapper{
  padding: 0 0 12px !important;
  border-radius: 0 !important;
}

salla-multiple-bundle-product .swiper-wrapper{
  display: block !important;
  transform: none !important;
  height: auto !important;
}
salla-multiple-bundle-product .swiper-slide{
  width: 100% !important;
  margin: 0 !important;
  height: auto !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.product__description.p-2.px-5.sm\:p-1.leading-7.mb-2\.5 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.mb-2\.5.flex.justify-between.sm\:grid.sm\:grid-cols-3.bg-white.rounded-md.px-4.py-2 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
salla-multiple-bundle-product .swiper-pagination{ display: none !important; }

salla-multiple-bundle-product .s-multiple-bundle-product-card{
  display: grid !important;
  grid-template-columns: auto 44px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  height: auto !important;
  padding: 10px 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
salla-multiple-bundle-product .s-multiple-bundle-product-image-wrapper,
salla-multiple-bundle-product .s-multiple-bundle-product-content-wrapper,
salla-multiple-bundle-product .s-multiple-bundle-product-content,
salla-multiple-bundle-product .s-multiple-bundle-product-details{
  display: contents !important;
}
salla-multiple-bundle-product .s-multiple-bundle-product-image{
  width: 44px !important;
  height: 44px !important;
  object-fit: contain !important;
  position: static !important;
}
salla-multiple-bundle-product .s-multiple-bundle-product-checkbox{
  position: static !important;
  width: 16px !important;
  height: 16px !important;
}
salla-multiple-bundle-product .s-multiple-bundle-product-badge{ display: none !important; }
salla-multiple-bundle-product .s-multiple-bundle-product-title-wrapper{
  height: auto !important;
  font-size: 13px !important;
  text-align: start;
}
salla-multiple-bundle-product .s-multiple-bundle-product-title a{
  color: #1d1a19 !important;
  text-decoration: none !important;
  font-weight: 400 !important;
}
salla-multiple-bundle-product .s-multiple-bundle-product-price-wrapper{
  height: auto !important;
  white-space: nowrap;
  font-size: 13px !important;
  font-weight: 600;
  color: #1d1a19 !important;
}

form.product-form .s-payments-list{
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}
form.product-form .s-payments-list-item{
  width: 46px !important;
  height: 30px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border: 1px solid #ece7e2;
  border-radius: 3px;
  padding: 4px !important;
  margin: 0 !important;
  background: #fff;
}
form.product-form .s-payments-list-item img{
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

salla-multiple-bundle-product .s-multiple-bundle-product-checkbox{
  width: 18px !important;
  height: 18px !important;
  accent-color: #2b2622;
  border-radius: 0 !important;
  cursor: pointer;
}
salla-multiple-bundle-product .s-multiple-bundle-product-checkbox:checked{
  background-color: #2b2622 !important;
  border-color: #2b2622 !important;
}

.sazera-bundle-total{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
  padding: 12px 0 6px;
  border-top: 1px solid #e6ddd2;
}
.sazera-bundle-total__start{ display: flex; align-items: center; gap: 10px; }
.sazera-bundle-total__end{ display: flex; align-items: baseline; gap: 10px; }
.sazera-bundle-total__label{
  font-size: 13px;
  font-weight: 600;
  color: #1d1a19;
}
.sazera-bundle-total__badge{
  background: #e4694f;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  letter-spacing: .4px;
  white-space: nowrap;
}
.sazera-bundle-total__old{
  color: #9b9b9b;
  font-size: 13px;
  text-decoration: line-through;
}
.sazera-bundle-total__value{
  font-size: 15px;
  font-weight: 700;
  color: #1d1a19;
  white-space: nowrap;
}

.sazera-paymarquee{ overflow: hidden; margin: 10px 0; }
.sazera-paymarquee__track{
  display: flex;
  width: max-content;
  gap: 0;
  animation: sazera-paylogos-scroll 22s linear infinite;
}
@media (prefers-reduced-motion: reduce){
  .sazera-paymarquee__track{ animation: none; }
}
.sazera-paymarquee .sazera-paylist{
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin: 0;
  padding: 0 8px 0 0;
  list-style: none;
}
.sazera-paymarquee .sazera-paylist li{
  width: 46px;
  height: 30px;
  flex: 0 0 auto;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ece7e2;
  border-radius: 3px;
  padding: 4px;
  background: #fff;
}
.sazera-paymarquee .sazera-paylist img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
@keyframes sazera-paylogos-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(calc(-100% / var(--sazera-copies, 4))); }
}

form.product-form .s-quantity-input-container{
  border-radius: 0 !important;
  border-color: #e2e2e2 !important;
  height: 40px !important;
}
form.product-form .s-quantity-input-input{
  border-left: none !important;
  border-right: none !important;
}
.sticky-product-bar__quantity{ margin-bottom: 14px !important; }
.article--main [data-sazera-acc] > p:first-child{
  font-size: 14px;
  line-height: 1.8;
  color: #4a4441;
  margin-bottom: 8px;
}

salla-slider.details-slider{
  display: flex !important;
  gap: 12px;
  align-items: flex-start;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
salla-slider.details-slider .s-slider-container{
  flex: 1 1 0%;
  min-width: 0;
  max-width: 100%;
}
salla-slider.details-slider .s-slider-container img,
salla-slider.details-slider .s-slider-container .swiper-slide{
  max-width: 100% !important;
}
salla-slider.details-slider .s-slider-thumbs{
  order: -1;              
  width: 84px !important;
  max-width: 84px !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  margin: 0 !important;
  flex: 0 0 84px;
}
salla-slider.details-slider .s-slider-thumbs-container{
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  inset: auto !important;
  transform: none !important;
  translate: none !important;
  width: 84px !important;
  max-width: 84px !important;
  height: auto !important;
  max-height: none !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}
salla-slider.details-slider .s-slider-thumbs *{
  overflow: visible !important;
}
salla-slider.details-slider .s-slider-thumbs .swiper-wrapper{
  display: flex !important;
  flex-direction: column !important;
  transform: none !important;
  translate: none !important;
  position: static !important;
  height: auto !important;
  gap: 10px;
}
salla-slider.details-slider .s-slider-thumbs .swiper-slide{
  width: 84px !important;
  height: auto !important;
  margin: 0 !important;
}
@media (max-width: 767px){
  salla-slider.details-slider{ display: block !important; }
  salla-slider.details-slider .s-slider-thumbs,
  salla-slider.details-slider .s-slider-thumbs-container{ width: 100% !important; max-width: none !important; }
  salla-slider.details-slider .s-slider-thumbs .swiper-wrapper{ flex-direction: row !important; flex-wrap: wrap; }
  salla-slider.details-slider .s-slider-thumbs .swiper-slide{ width: 72px !important; }
}

.sazera-acc__item{ border-bottom: 1px solid #eee2da; }
.sazera-acc__head{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0;
  background: none;
  border: 0;
  font-size: 14px;
  font-weight: 500;
  color: #1d1a19;
  text-align: start;
  cursor: pointer;
}
.sazera-acc__icon{ width: 14px; height: 14px; position: relative; flex: 0 0 auto; }
.sazera-acc__icon::before,
.sazera-acc__icon::after{
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-start: 0;
  width: 14px;
  height: 1px;
  background: #1d1a19;
  transform: translateY(-50%);
  transition: transform .2s ease;
}
@media (min-width:768px){
  section.sticky-product-bar.bg-white.p-5.rounded-md.rounded-b-none {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
.sazera-acc__icon::after{ transform: translateY(-50%) rotate(90deg); }
.sazera-acc__item.is-open .sazera-acc__icon::after{ transform: translateY(-50%) rotate(0deg); }
.sazera-acc__panel{ display: none; padding-bottom: 16px; }
.sazera-acc__item.is-open .sazera-acc__panel{ display: block; }
body.product-single .app-inner > .container:has(salla-products-slider),
body.product-single .app-inner > .s-blocks-wrapper:has(salla-products-slider){ order: 1; }
body.product-single .app-inner > .s-blocks-wrapper:has(.faq_title, .faq_item){ order: 2; }
body.product-single .app-inner > salla-comments{ order: 3; }
body.product-single .app-inner > footer{ order: 4; }
@media (max-width: 480px){
  salla-multiple-bundle-product.s-multiple-bundle-product-wrapper{ padding: 4px 12px !important; }
  salla-multiple-bundle-product .s-multiple-bundle-product-card{ gap: 8px; }
  .s-add-product-button-main salla-button .s-button-element,
  .sazera-acc__head{ padding: 14px 0; font-size: 13.5px; }
}
@media (max-width: 767px) {
  salla-slider.details-slider .s-slider-thumbs, salla-slider.details-slider .s-slider-thumbs-container {
      padding-top: 10px !important;
  }
}
section.flex.bg-white.p-5.sm\:pb-0.rounded-md.rounded-b-none {
  padding-right: 0 !important;
  padding-left: 0 !important;
}
.sazera-card-brand{
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .6px;
  color: #9a8f86;
  margin-bottom: 3px;
}
custom-salla-product-card .s-button-primary-outline.s-button-element:not(:hover){
  background: #fff !important;
  color: #2b2622 !important;
  border-color: #2b2622 !important;
  box-shadow: none !important;
  outline: none !important;
}
/* أيقونة العربة معمولة بـ stroke مش fill */
custom-salla-product-card .s-button-primary-outline.s-button-element:not(:hover) svg path{
  stroke: #2b2622 !important;
}
a.filters-trigger{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px !important;
  height: 44px !important;
  border: 1px solid #2b2622 !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: #2b2622 !important;
}
a.filters-trigger i.sicon-filter{
  color: #2b2622 !important;
  margin: 0 !important;
}
button.s-button-element.s-button-btn.s-button-outline.s-button-wide.s-button-primary-outline.s-button-loader-center
 {
    border: 1px solid #e9e9e9 !important;
}
.athena-card .athena-desktop-add-btn .s-button-text span{
  color: black !important;
}
@media (max-width: 768px) {
  .athena-card .athena-desktop-add-btn .s-button-text .cart-svg path {
      stroke: black !important;
  }
}
.flex.items-center.space-x-2.rtl\:space-x-reverse {
    width: 100% !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
}
a.filters-trigger.bg-border-color.text-primary.lg\:hidden.mt-2{
  border: 1px solid rgba(229, 231, 235, var(--tw-border-opacity, 1)) !important;
  height: 40px !important;
}
.flex.items-center.space-x-2.rtl\:space-x-reverse {
    align-items: flex-end !important;
}
.flex.items-center.space-x-2.rtl\:space-x-reverse {
    width: 100% !important;
    justify-content: space-between !important;
}
select#product-filter {
    border-radius: 0px !important;
}

.sazera-fbt{ background:#fdf8f1; padding:14px 18px; margin-top:16px; }
.sazera-fbt__head{ padding:0 0 10px; }
.sazera-fbt__title{ font-size:13px; font-weight:600; letter-spacing:.4px; color:#1d1a19; }
.sazera-fbt__item{
  display:grid;
  grid-template-columns:auto 44px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:10px 0;
  cursor:pointer;
}
.sazera-fbt__cb{ width:18px; height:18px; accent-color:#2b2622; border-radius:0; cursor:pointer; }
.sazera-fbt__cb:checked{ background-color:#2b2622; border-color:#2b2622; }
.sazera-fbt__img{ width:44px; height:44px; object-fit:contain; display:block; }
.sazera-fbt__name{ font-size:13px; min-width:0; }
.sazera-fbt__name a{ color:#1d1a19; text-decoration:none; font-weight:400; }
.sazera-fbt__price{ white-space:nowrap; font-size:13px; font-weight:600; color:#1d1a19; }
.sazera-fbt__total{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:4px;
  padding:12px 0 6px;
  border-top:1px solid #e6ddd2;
}
.sazera-fbt__total-label{ font-size:13px; font-weight:600; color:#1d1a19; }
.sazera-fbt__total-value{ font-size:15px; font-weight:700; color:#1d1a19; white-space:nowrap; }
.sazera-lang-switcher{ position:relative; display:flex; align-items:center; margin-inline-end:14px; }
.sazera-lang-btn{
  display:flex; align-items:center; justify-content:center;
  width:22px; height:22px; padding:0; background:none; border:none;
  cursor:pointer; flex:0 0 auto;
  color: var(--menu-links-color-final) !important;
}
.sazera-lang-menu{
  position:absolute; top:calc(100% + 12px); inset-inline-start:0;
  min-width:130px; background:#fff; border:1px solid #e6ddd2;
  box-shadow:0 8px 24px rgba(0,0,0,.10); z-index:60; padding:4px 0;
}
.sazera-lang-menu a{
  display:block; padding:10px 16px; font-size:13px; color:#2b2622;
  text-decoration:none; white-space:nowrap;
}
.sazera-lang-menu a.is-active{ background:#fdf8f1; font-weight:600; }
.sazera-lang-menu a:hover{ background:#f5efe6; }

/* -------------------- سوتشر اللغة (أيقونة الكرة الأرضية في الهيدر) -------------------- */
.sazera-lang-switcher{ position:relative; display:flex; align-items:center; margin-inline-end:14px; }
.sazera-lang-btn{
  display:flex; align-items:center; justify-content:center;
  width:22px; height:22px; padding:0; background:none; border:none;
  cursor:pointer; flex:0 0 auto;
  color: var(--menu-links-color-final) !important;
}
.sazera-lang-menu{
  position:absolute; top:calc(100% + 12px); inset-inline-start:0;
  min-width:130px; background:#fff; border:1px solid #eee2da;
  box-shadow:0 8px 24px rgba(0,0,0,.10); z-index:60; padding:4px 0;
}
.sazera-lang-menu a{
  display:block; padding:10px 16px; font-size:13px; color:#fff;
  text-decoration:none; white-space:nowrap;
}
.sazera-lang-menu a.is-active{ background:#fdf8f1; font-weight:600; }
.sazera-lang-menu a:hover{ background:#f6f2ee; }
li:has(a[href*="/ar/offers"]),
li:has(a[href*="/ar/brands"]),
li:has(a[href$="/offers"]),
li:has(a[href$="/brands"]) {
  display: none !important;
}
/* الخط البينك جنب الأحجام */
.s-product-options-option-content { overflow: visible !important; }

/* زرار اللغة */
.sazera-lang-menu a { color: #111827 !important; }
.sazera-lang-menu a.is-active { color: #ad4d36 !important; font-weight: 700; }
/* الخط البينك على شمال قائمة المنتجات في صفحات التصنيف */
salla-products-list.overflow-auto { overflow-x: clip !important; overflow-y: visible !important; }
/* النافذة السريعة (موبايل): خانة الكمية بنفس شكل زرار السلة */
.athena-drawer-content form.product-form .s-quantity-input-container { height: 40px !important; border: 1px solid var(--color-primary-light, #ffbca0) !important; border-radius: 2px !important; overflow: hidden; }
.athena-drawer-content form.product-form .s-quantity-input-button { width: 28px !important; min-width: 28px !important; }
.athena-drawer-content form.product-form .s-quantity-input-input { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; font-size: 15px !important; }
/* بطاقة المنتج: زرار "أضف إلى السلة" تحت الصورة — أصغر، والأيقونة ظاهرة، ومن غير hover غامق */
.athena-card .athena-image-container { display: flex !important; flex-direction: column !important; aspect-ratio: auto !important; height: auto !important; overflow: visible !important; }
.athena-card .athena-image-container > a { aspect-ratio: 3 / 4; height: auto !important; flex: none; overflow: hidden; }
.athena-card .athena-desktop-add-btn { position: static !important; left: auto !important; right: auto !important; bottom: auto !important; top: auto !important; width: auto !important; margin: 10px 10px 0 !important; }
.athena-card .athena-desktop-add-btn .s-button-primary-outline,
.athena-card .athena-desktop-add-btn salla-add-product-button salla-button button { height: 34px !important; line-height: 34px !important; padding: 0 12px !important; border-radius: 2px !important; }
/* الكلام والأيقونة جنب بعض وبلون غامق — عادي ووقت الـ hover، ديسكتوب وموبايل */
:is(#sz, .athena-card) .athena-desktop-add-btn .s-button-text { gap: 8px !important; }
:is(#sz, .athena-card) .athena-desktop-add-btn .s-button-text span,
:is(#sz, .athena-card) .athena-desktop-add-btn:hover .s-button-text span { font-size: 12px !important; font-weight: 500 !important; letter-spacing: .04em; color: #2b2622 !important; opacity: 1 !important; transform: none !important; }
:is(#sz, .athena-card) .athena-desktop-add-btn .s-button-text svg.cart-svg,
:is(#sz, .athena-card) .athena-desktop-add-btn:hover .s-button-text svg.cart-svg { position: static !important; left: auto !important; top: auto !important; transform: none !important; opacity: 1 !important; visibility: visible !important; width: 16px !important; height: 16px !important; transition: none !important; }
:is(#sz, .athena-card) .athena-desktop-add-btn .s-button-text svg.cart-svg path,
:is(#sz, .athena-card) .athena-desktop-add-btn:hover .s-button-text svg.cart-svg path { stroke: #2b2622 !important; }
/* الـ hover: الخلفية تفضل بيضا — الإطار بس بيغمق */
:is(#sz, .athena-card) .athena-desktop-add-btn:hover .s-button-element { background: #fff !important; border-color: #2b2622 !important; }
/* ===== Sazera — شريط الإعلان أبطأ + أيقونات البطاقة على الموبايل + مسافات عنوان التصنيف ===== */

/* 1) الشريط العلوي: نص السرعة (لو عايزه أبطأ كمان: 180s و -90s) */
.marqueeText .marquee-content { animation-duration: 140s !important; }
.marqueeText .marquee-content-2 { animation-delay: -70s !important; }

/* 2) موبايل: أيقونة المفضلة والعرض السريع أصغر وجنب بعض في ركن الصورة */
@media (max-width: 768px) {
  :is(#sz, .athena-card) .athena-action-buttons { flex-direction: row !important; gap: 6px !important; top: 6px !important; right: 6px !important; }
  :is(#sz, .athena-card) .athena-action-buttons .athena-action-btn,
  :is(#sz, .athena-card) .athena-action-buttons .s-button-outline,
  :is(#sz, .athena-card) .athena-action-buttons .s-product-card-wishlist-btn { width: 28px !important; height: 28px !important; min-width: 28px !important; border-radius: 50% !important; background: rgba(255,255,255,.85) !important; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
  :is(#sz, .athena-card) .athena-action-buttons svg { width: 14px !important; height: 14px !important; }
  :is(#sz, .athena-card) .athena-action-buttons i { font-size: 14px !important; }
}

/* 3) صفحات التصنيف: مسافة أقل فوق وتحت العنوان */
.s-before-products-list .s-block--bundle-simple-text { margin-top: 0 !important; }
.s-before-products-list .s-block--bundle-simple-text > * { margin: -28px 0 -36px !important; clip-path: inset(28px 0 36px 0); }
@media (max-width: 768px) {
  .s-before-products-list .s-block--bundle-simple-text > * { margin: -20px 0 -24px !important; clip-path: inset(20px 0 24px 0); }
}
/* ===== Sazera — موبايل: القلب تحت الصورة جنب زرار "أضف إلى السلة" (مفيش حاجة فوق المنتج) ===== */
@media (max-width: 768px) {
  /* زرار السلة بيسيب مكان للقلب جنبه */
  :is(#sz, .athena-card) .athena-image-container .athena-desktop-add-btn { margin-inline-end: 50px !important; }
  :is(#sz, .athena-card) .athena-image-container .athena-desktop-add-btn .s-button-primary-outline,
  :is(#sz, .athena-card) .athena-image-container .athena-desktop-add-btn salla-add-product-button salla-button button { padding: 0 6px !important; }
  :is(#sz, .athena-card) .athena-image-container .athena-desktop-add-btn .s-button-text { gap: 6px !important; }
  :is(#sz, .athena-card) .athena-image-container .athena-desktop-add-btn .s-button-text span { letter-spacing: 0 !important; }
  /* القلب ينزل في نفس صف الزرار وبنفس الشكل */
  :is(#sz, .athena-card) .athena-image-container .athena-action-buttons { top: auto !important; bottom: 0 !important; left: auto !important; right: auto !important; inset-inline-end: 10px !important; gap: 0 !important; }
  :is(#sz, .athena-card) .athena-image-container .athena-action-buttons .s-product-card-wishlist-btn { width: 34px !important; height: 34px !important; min-width: 34px !important; border-radius: 2px !important; background: #fff !important; box-shadow: none !important; }
  :is(#sz, .athena-card) .athena-image-container .athena-action-buttons button.s-button-outline { border: 1px solid #e9e9e9 !important; margin: 0 !important; }
  :is(#sz, .athena-card) .athena-image-container .athena-action-buttons .not-added i { color: #2b2622 !important; font-size: 16px !important; }
  /* العين (العرض السريع) بتستخبى على الموبايل بس — الديسكتوب زي ما هو */
  :is(#sz, .athena-card) .athena-image-container .athena-action-buttons .athena-action-btn { display: none !important; }
}
/* ===== Sazera — موبايل: العين فوق على اليمين على الصورة، والقلب جنب "أضف إلى السلة" ===== */
@media (max-width: 768px) {
  /* بنفك حاوية الأيقونتين عشان كل واحدة تاخد مكانها لوحدها */
  :is(#sz, .athena-card) .athena-image-container div.athena-action-buttons { display: contents !important; }
  /* القلب: تحت الصورة جنب زرار السلة */
  :is(#sz, .athena-card) .athena-image-container .athena-action-buttons salla-button.s-product-card-wishlist-btn { position: absolute !important; bottom: 0 !important; top: auto !important; inset-inline-end: 10px !important; z-index: 10; }
  /* العين: صغيرة فوق على اليمين على الصورة */
  :is(#sz, .athena-card) .athena-image-container .athena-action-buttons button.athena-action-btn { display: flex !important; position: absolute !important; top: 8px !important; right: 8px !important; left: auto !important; z-index: 10; width: 30px !important; height: 30px !important; min-width: 30px !important; margin: 0 !important; border: none !important; border-radius: 2px !important; background: rgba(255,255,255,.9) !important; box-shadow: 0 1px 4px rgba(0,0,0,.08) !important; opacity: 1 !important; transform: none !important; }
  :is(#sz, .athena-card) .athena-image-container .athena-action-buttons button.athena-action-btn svg { width: 15px !important; height: 15px !important; }
  :is(#sz, .athena-card) .athena-image-container .athena-action-buttons button.athena-action-btn svg path { fill: #2b2622 !important; }
}
/* ===== Sazera — بوب الخصم على الموبايل: الصورة فوق كاملة والكلام تحت على أبيض (الديسكتوب زي ما هو) ===== */
@media (max-width: 768px) {
  #coupon-stage:not(.no-image) { display: flex !important; flex-direction: column !important; width: 88vw !important; max-width: 400px !important; height: auto !important; max-height: 88vh !important; }
  #coupon-stage:not(.no-image) .c-half { position: static !important; width: 100% !important; height: auto !important; transform: none !important; }
  #coupon-stage:not(.no-image) .c-half-image { order: -1; flex: none; aspect-ratio: 5 / 4; max-height: 40vh; opacity: 1 !important; background-position: center 30% !important; }
  #coupon-stage:not(.no-image) .c-half-content { background: #fff !important; padding: 22px 20px 26px !important; }
  #coupon-stage .c-title { margin-bottom: 10px !important; }
  #coupon-stage .c-subtitle { margin-bottom: 18px !important; }
  #coupon-stage .c-code-box { margin-bottom: 18px !important; }
  /* زرار الإغلاق: دايرة بيضا فوق الصورة عشان يبان */
  #coupon-stage .c-close-icon { top: 10px !important; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; line-height: 1; border-radius: 50%; background: rgba(255,255,255,.9) !important; font-size: 20px !important; }
}
/* ===== Sazera — موبايل: العين من غير خلفية بيضا ===== */
@media (max-width: 768px) {
  :is(#sz, .athena-card) .athena-image-container div.athena-action-buttons button.athena-action-btn,
  :is(#sz, .athena-card) .athena-image-container div.athena-action-buttons button.athena-action-btn:hover { background: transparent !important; box-shadow: none !important; }
  :is(#sz, .athena-card) .athena-image-container div.athena-action-buttons button.athena-action-btn svg { width: 18px !important; height: 18px !important; filter: drop-shadow(0 0 2px rgba(255,255,255,.9)); }
  :is(#sz, .athena-card) .athena-image-container div.athena-action-buttons button.athena-action-btn svg path,
  :is(#sz, .athena-card) .athena-image-container div.athena-action-buttons button.athena-action-btn:hover svg path { fill: #2b2622 !important; }
}
/* ===== Sazera — النسخة الإنجليزي: عناصر التصميم الإضافية (About / Brands / Testimonials ...) تبدأ من الشمال ===== */
html[dir="ltr"] [bundle-id] { direction: ltr; }
/* ===== Sazera — السلة الجانبية: إخفاء سطر "مجموع المنتجات" المكرر مع "الإجمالي" ===== */
aside.side-panel--cart .side-panel__bottom > div.flex.justify-between.text-sm:first-child { display: none !important; }
aside.side-panel--cart .side-panel__bottom > .cart-subtotal { border-top: 0 !important; padding-top: 0 !important; }
/* =====================================================================
   Sazera — إخفاء اسم التصنيف (العنوان الكبير فوق المنتجات) في 3 تصنيفات بس:
   KV-1 (174927089) — Sublime Cosmetics (1682590706) — Green Mood (907504371)
   بيشتغل في العربي والإنجليزي، وباقي التصنيفات زي ما هي.
   لإضافة تصنيف جديد: انسخ سطرين وغيّر رقم التصنيف (الرقم اللي بعد c في اللينك).
   ===================================================================== */
html:has(link[rel="canonical"][href$="/c174927089"])  .s-before-products-list .s-block--bundle-simple-text,
html:has(link[rel="canonical"][href$="/c1682590706"]) .s-before-products-list .s-block--bundle-simple-text,
html:has(link[rel="canonical"][href$="/c907504371"])  .s-before-products-list .s-block--bundle-simple-text,
body:has(salla-products-list[source-value="174927089"])  .s-before-products-list .s-block--bundle-simple-text,
body:has(salla-products-list[source-value="1682590706"]) .s-before-products-list .s-block--bundle-simple-text,
body:has(salla-products-list[source-value="907504371"])  .s-before-products-list .s-block--bundle-simple-text {
  display: none !important;
}
/* =====================================================================
   Sazera — تنسيق الجداول والنصوص في الصفحات التعريفية (سياسة الشحن وغيرها)
   محرر سلة بيشيل التنسيق المكتوب جوه الكود، فبنحطه هنا مرة واحدة
   ===================================================================== */
body.page-single .content-entry table {
  width: 100% !important;
  table-layout: fixed;              /* الأعمدة ثابتة والكلام بيلتف جواها */
  border-collapse: collapse;
  border: 1px solid #e5e5e5 !important;  /* بدل الإطار الأسود اللي بيحطه المحرر */
  margin: 16px 0 24px;
  font-size: 15px;
}
body.page-single .content-entry table td {
  padding: 12px 14px;
  border: 1px solid #e5e5e5;
  vertical-align: middle;
  white-space: normal;              /* الكلام يلتف بدل ما يتقص */
  word-break: break-word;
}
/* عرض الأعمدة: قيمة الطلب أوسع من الرسوم */
body.page-single .content-entry table td:first-child  { width: 60%; }
body.page-single .content-entry table td:last-child   { width: 40%; }

/* أول صف = رأس الجدول، وآخر صف = الشحن المجاني */
body.page-single .content-entry table tr:first-child td { background: #f6f6f6; font-weight: 700; }
body.page-single .content-entry table tr:last-child  td { background: #fafafa; }

/* مسافات العناوين والفقرات */
body.page-single .content-entry h2 { margin: 0 0 12px; font-size: 24px; font-weight: 700; }
body.page-single .content-entry h3 { margin: 24px 0 8px; font-size: 19px; font-weight: 700; }
body.page-single .content-entry p  { margin: 0 0 14px; line-height: 1.9; }

@media (max-width: 640px) {
  body.page-single .content-entry table    { font-size: 14px; }
  body.page-single .content-entry table td { padding: 10px 8px; }
}
/* =====================================================================
   Sazera — توحيد خطوط القائمة الجانبية (الموبايل)
   المشكلة: الصفوف اللي بتفتح قائمة فرعية كانت 14px ووزن 400،
   والصفوف اللي روابط كانت 12.5px ووزن 600 ومكتوبة uppercase،
   علشان كده أسماء الماركات كانت بادية كابيتال وغامقة وأصغر.
   ===================================================================== */
#mobile-menu li > a,
#mobile-menu li > span,
#mobile-menu li > a > span,
#mobile-menu li > span > span {
  font-size: 14px !important;
  font-weight: 500 !important;
  text-transform: none !important;   /* Sublime Cosmetics بدل SUBLIME COSMETICS */
  letter-spacing: 0 !important;
}
/* =====================================================================
   Sazera — صورة ثابتة تحت فيديو الهيدر (بديل الـ poster)
   ---------------------------------------------------------------------
   المشكلة: الفيديو في السلايدر مالوش poster، فأول ما الصفحة تفتح
   أعلى الصفحة بيفضل فاضي لحد ما الفيديو يبدأ يشتغل.
   الحل: نحط أول لقطة من نفس الفيديو كخلفية للعنصر — صورة ٢٠ كيلو بس،
   بتظهر فورًا، والفيديو بيشتغل فوقها من غير ما الزائر يشوف فراغ.
   الصور بتتولد من نفس ملف الفيديو على Cloudinary (so_0 = الثانية صفر)،
   يعني لو الفيديو اتغير الصورة بتتغير معاه لوحدها.
   يتلصق في آخر خانة CSS.
   ===================================================================== */
.custom-advanced-slider video {
  background-color: #f6efe9;          /* لون الخلفية لو الصورة نفسها لسه بتحمّل */
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* الديسكتوب — الفيديو اللي كلاسه md:block */
@media (min-width: 768px) {
  .custom-advanced-slider video[class*="md:block"] {
    background-image: url("https://res.cloudinary.com/juxqb2wr/video/upload/so_0,q_auto,w_1400,c_limit/v1790236247/sazera/hero-desktop-kv1.jpg");
  }
}

/* الموبايل — الفيديو اللي كلاسه md:hidden */
@media (max-width: 767px) {
  .custom-advanced-slider video[class*="md:hidden"] {
    background-image: url("https://res.cloudinary.com/juxqb2wr/video/upload/so_0,q_auto,w_900,c_limit/v1790236368/sazera/hero-mobile-kv1");
  }
}
/* =====================================================================
   Sazera — أنيميشن ظهور السيكشنات بالسكرول من غير انتظار الجافاسكربت
   ---------------------------------------------------------------------
   المشكلة: الثيم بيخفي كل سيكشن (opacity:0) ومستني جافاسكربت يضيف كلاس
   .athena-animate أول ما السيكشن يدخل الشاشة. الجافاسكربت ده مؤجَّل
   (Rocket Loader)، فالسيكشنات اللي في أول شاشة بتفضل مخفية زيادة
   حوالي ثانية — والزائر بيشوف صفحة ناقصة.

   الحل: نعمل نفس الأنيميشن بالظبط بـ CSS مربوط بالسكرول نفسه
   (animation-timeline: view) — من غير أي جافاسكربت:
     • السيكشن اللي في أول شاشة يظهر فورًا مع رسم الصفحة.
     • السيكشن اللي تحت يطلع من تحت وانت بتنزل، زي ما هو دلوقتي.
   نفس المسافات ونفس المدة اللي في الثيم (٥٠px لتحت، ٨٠px للجنب).

   المتصفحات اللي مش بتدعم الخاصية (سفاري قديم مثلًا) بتاخد النسخة
   التانية: المحتوى ظاهر على طول من غير حركة — وده أأمن من إنه يختفي.

   بلوك مستقل، مش بيلغي حاجة. يتلصق في آخر خانة CSS.
   ===================================================================== */

/* متصفح مش بيدعم الأنيميشن بالسكرول ← المحتوى ظاهر على طول */
@supports not (animation-timeline: view()) {
  .athena-slide-down-top > *,
  [dir] .athena-slide-right-left > *,
  [dir] .athena-slide-left-right > * {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* متصفح بيدعمها ← نفس أنيميشن الثيم بس بالـ CSS */
@supports (animation-timeline: view()) {
  .athena-slide-down-top > *,
  [dir] .athena-slide-right-left > *,
  [dir] .athena-slide-left-right > * {
    animation: sazera-reveal-up linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 45%;
  }

  /* اتجاه الحركة حسب لغة الصفحة — زي ما الثيم عاملها */
  [dir="rtl"] .athena-slide-right-left > * { animation-name: sazera-reveal-from-right; }
  [dir="ltr"] .athena-slide-right-left > * { animation-name: sazera-reveal-from-left; }
  [dir="rtl"] .athena-slide-left-right > * { animation-name: sazera-reveal-from-left; }
  [dir="ltr"] .athena-slide-left-right > * { animation-name: sazera-reveal-from-right; }

  /* لو الزائر مفعّل "تقليل الحركة" في جهازه */
  @media (prefers-reduced-motion: reduce) {
    .athena-slide-down-top > *,
    [dir] .athena-slide-right-left > *,
    [dir] .athena-slide-left-right > * {
      animation: none;
      opacity: 1;
      transform: none;
    }
  }
}

@keyframes sazera-reveal-up {
  from { opacity: 0; transform: translateY(50px); }
  to   { opacity: 1; transform: none; }
}
@keyframes sazera-reveal-from-right {
  from { opacity: 0; transform: translateX(80px); }
  to   { opacity: 1; transform: none; }
}
@keyframes sazera-reveal-from-left {
  from { opacity: 0; transform: translateX(-80px); }
  to   { opacity: 1; transform: none; }
}
/* =====================================================================
   Sazera — مربعات تحميل مكان المنتجات في صفحات التصنيفات
   ---------------------------------------------------------------------
   ليه؟ صفحة التصنيف بتوصل من السيرفر من غير أي منتجات فيها خالص
   (اتأكدت: عدد كروت المنتجات في الـ HTML = صفر). المنتجات بتتجاب بعدين
   من api.salla.dev من متصفح الزائر. يعني في فترة المكان بيفضل أبيض فاضي.

   ده تصميم سلة نفسها ومش بنقدر نغيّره، بس نقدر نملا الفراغ بمربعات
   رمادية بتنبض — الزائر يحس إن الصفحة بتحمّل بدل ما يحس إنها بايظة.
   أول ما المنتجات توصل المربعات بتختفي لوحدها.

   بيشتغل على صفحات التصنيفات والبحث بس (body.product-index)،
   ومش بيقرب من الصفحة الرئيسية.
   يتلصق في آخر خانة CSS.
   ===================================================================== */
body.product-index salla-products-list:not(:has(*)) {
  display: block !important;
  min-height: 560px;
  background-image: linear-gradient(#f1eeea 0 92%, transparent 92%);
  background-size: calc(25% - 12px) 340px;   /* ٤ أعمدة على الديسكتوب */
  background-repeat: space repeat;
  animation: sazera-skeleton 1.5s ease-in-out infinite;
}

@keyframes sazera-skeleton {
  0%, 100% { opacity: 1; }
  50%      { opacity: .5; }
}

/* تابلت وموبايل: عمودين */
@media (max-width: 1023px) {
  body.product-index salla-products-list:not(:has(*)) {
    background-size: calc(50% - 8px) 300px;
    min-height: 500px;
  }
}

/* لو المتصفح قديم ومش فاهم :has() مش هيحصل حاجة — الصفحة تفضل زي ما هي */
@media (prefers-reduced-motion: reduce) {
  body.product-index salla-products-list:not(:has(*)) { animation: none; }
}
/* =====================================================================
   Sazera — البانر والهيدر وبلوكات المنتجات في الصفحة الرئيسية
   ---------------------------------------------------------------------
   ⚠️ قبل ما تلصق ده: امسح بلوك صورة البانر القديم من خانة CSS
      (اللي فيه `.custom-advanced-slider video` وروابط Cloudinary).
      لو سيبت الاتنين الصورة هتتكرر بمقاسين ومكانين مختلفين.

   سبب الشكل الوحش أول ما الموقع يفتح (اتقاس بالظبط على الموبايل):
   قبل ما سلايدر سلة يشتغل، الحاوية بتاخد padding-left = 48px
   و margin سالب من ستايل سلة، فالشريحة بتطلع 332×413 جوه سيكشن 375×476.
   يعني شريط 43px مكشوف على الشمال و 63px تحت، والطبقة الغامقة بتغطي
   جزء بس — فالنتيجة بانر مقصوص وغامق نصه.

   البلوك ده بيصلّح:
   ١) بيلغي الـ padding والـ margin دول قبل ما السلايدر يشتغل،
      فالشريحة تاخد عرض وارتفاع السيكشن كامل من أول رسمة.
   ٢) بيحط أول لقطة من الفيديو كخلفية للسيكشن (٢٠ كيلو) فالبانر
      يبان كامل فورًا والفيديو يشتغل فوقها.
   ٣) بيحجز ارتفاع البانر فالصفحة ما تنطّش.
   ٤) بيخلي كلام البانر ظاهر من غير ما يستنى الجافاسكربت.
   ٥) بيحجز مكان قائمة الهيدر وبلوكات المنتجات لحد ما توصل من السيرفر.

   كل القواعد اللي على [slot="items"] بتشتغل قبل ما السلايدر يشتغل بس —
   سلة بتشيل الـ slot ده بعد ما تبني السلايدر، فبتتوقف لوحدها.

   يتلصق في آخر خانة CSS.
   ===================================================================== */

/* ===== ١) الشريحة تاخد السيكشن كامل قبل ما السلايدر يشتغل ===== */
.custom-advanced-slider [slot="items"] {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}
.custom-advanced-slider [slot="items"] > div {
  width: 100% !important;
  padding: 0 !important;
}

/* ===== ٢+٣) خلفية البانر + حجز الارتفاع ===== */
.custom-advanced-slider {
  background-color: #f6efe9;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* الموبايل — نسبة فيديو الموبايل (1398×1737) */
@media (max-width: 767px) {
  .custom-advanced-slider {
    background-image: url("https://res.cloudinary.com/juxqb2wr/video/upload/so_0,q_auto,w_900,c_limit/v1788958942/sazera/hero-mobile.jpg");
    min-height: calc(100vw * 1.27);
  }
  .custom-advanced-slider salla-slider,
  .custom-advanced-slider [slot="items"],
  .custom-advanced-slider [slot="items"] > div,
  .custom-advanced-slider [slot="items"] video { min-height: calc(100vw * 1.27); }
}

/* الديسكتوب — نسبة فيديو الديسكتوب (1400×594) */
@media (min-width: 768px) {
  .custom-advanced-slider {
    background-image: url("https://res.cloudinary.com/juxqb2wr/video/upload/so_0,q_auto,w_1400,c_limit/v1788958599/sazera/hero-desktop.jpg");
    min-height: calc(100vw * 0.424);
  }
  .custom-advanced-slider salla-slider,
  .custom-advanced-slider [slot="items"],
  .custom-advanced-slider [slot="items"] > div,
  .custom-advanced-slider [slot="items"] video { min-height: calc(100vw * 0.424); }
}

/* ===== ٤) كلام البانر يظهر من غير ما يستنى الجافاسكربت =====
   السطور الأولانية قبل ما السلايدر يشتغل، والباقي بعده.
   الاتنين مشروطين بشريحة واحدة — لو ضفت شرايح تانية بيتوقفوا لوحدهم. */
.custom-advanced-slider [slot="items"] > div:only-child .advanced_slider_title,
.custom-advanced-slider [slot="items"] > div:only-child .advanced_slider_subtitle,
.custom-advanced-slider [slot="items"] > div:only-child .advanced_slider_btn,
.custom-advanced-slider .swiper-slide:only-child .advanced_slider_title,
.custom-advanced-slider .swiper-slide:only-child .advanced_slider_subtitle,
.custom-advanced-slider .swiper-slide:only-child .advanced_slider_btn {
  opacity: 1 !important;
  transform: none !important;
  transition-delay: 0s !important;
}

/* ===== ٥أ) قائمة الهيدر: نحجز ارتفاعها لحد ما توصل ===== */
@media (min-width: 1024px) {
  nav.desktop-menu:not(:has(li)) { min-height: 84px; }
}

/* ===== ٥ب) بلوكات المنتجات في الصفحة الرئيسية ===== */
body.index salla-products-slider:not(:has(custom-salla-product-card)):not([data-products-empty]),
body.index salla-products-list:not(:has(custom-salla-product-card)):not([data-products-empty]) {
  display: block;
  min-height: 500px;
  background-image: linear-gradient(#f1eeea 0 92%, transparent 92%);
  background-size: calc(25% - 12px) 330px;   /* ٤ أعمدة */
  background-repeat: space repeat;
  animation: sazera-skeleton 1.5s ease-in-out infinite;
}

@media (max-width: 1023px) {
  body.index salla-products-slider:not(:has(custom-salla-product-card)):not([data-products-empty]),
  body.index salla-products-list:not(:has(custom-salla-product-card)):not([data-products-empty]) {
    min-height: 600px;
    background-size: calc(50% - 8px) 300px;  /* عمودين */
  }
}

@media (prefers-reduced-motion: reduce) {
  body.index salla-products-slider:not(:has(custom-salla-product-card)),
  body.index salla-products-list:not(:has(custom-salla-product-card)) { animation: none; }
}

/* ملحوظة: الأنيميشن sazera-skeleton معرّف في بلوك صفحات التصنيفات
   (sazera-products-skeleton.css). سيبه موجود. */
/* =====================================================================
   Sazera — بطاقات المنتجات النافدة
   محتاج معاه بلوك sazera-out-of-stock-cards.js
   يتلصق في آخر خانة CSS.
   ===================================================================== */

/* ١) ختم "نفدت الكمية" الأحمر كان ماسك الضغطة فوق الصورة
      (اتأكدت: الضغط على نص الصورة كان بيقع على الختم مش على لينك المنتج،
      عشان كده المنتج مكانش بيفتح على الموبايل). بنخلي الضغطة تعدّي منه. */
.athena-sold-out-container,
.athena-sold-out-container * {
  pointer-events: none !important;
}

/* ٢) نخفي زرار "نفدت الكمية" المعطّل لما يبقى في بديله لينك "أعلمني" */
.athena-desktop-add-btn:has(.sazera-notify-btn) salla-add-product-button {
  display: none !important;
}

/* ٣) شكل لينك "أعلمني عند التوفر" — نفس شكل زرار السلة العادي */
.sazera-notify-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 8px;
  border: 1px solid #2b2622;
  border-radius: 2px;
  background: #fff;
  color: #2b2622 !important;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background .2s, color .2s;
}
.sazera-notify-btn:hover {
  background: #2b2622;
  color: #fff !important;
}
/* =====================================================================
   Sazera — السلة الجانبية: نص "الكمية غير متوفرة" كان بيطلع بره الإطار
   ---------------------------------------------------------------------
   لما منتج في السلة ينفد من المخزون، سلة بتكتب مكان السعر في سطر
   "المجموع:" نص "الكمية غير متوفرة". السطر ده معمول
   white-space: nowrap و flex-wrap: nowrap، فمش بيلتف.

   القياس على الموبايل (بانل عرضه 300px):
     - السطر محتاج 159px والمتاح ليه 116px
     - النص كان بيبدأ عند x = -3، يعني بره البانل خالص

   بعد التعديل:
     - السطر بيلتف على سطرين ويقعد جوه البانل (x = 57)
     - الحالة العادية (سعر عادي) مبتتغيرش خالص — اتأكدت: نفس المقاس
       ونفس الارتفاع بالظبط قبل وبعد

   يتلصق في آخر خانة CSS.
   ===================================================================== */
aside.side-panel--cart .item-total {
  white-space: normal !important;
}

aside.side-panel--cart p:has(> .item-total) {
  flex: 1 1 100% !important;
  flex-wrap: wrap !important;
  min-width: 0 !important;
  padding-inline: 0 !important;
}

aside.side-panel--cart .space-y-1 {
  min-width: 0 !important;
}
/* =====================================================================
   Sazera — إيقاف مربعات التحميل جوه السلة الجانبية
   ---------------------------------------------------------------------
   ده تصليح لغلطة في بلوك مربعات التحميل اللي حطيته للصفحة الرئيسية.

   القاعدة كانت مكتوبة كده:
     body.index salla-products-slider:not(:has(custom-salla-product-card))
   و "body.index" دي بتنطبق على الصفحة كلها — والسلة الجانبية نفسها
   موجودة جوه الـ body (مش جوه محتوى الصفحة). فبلوك "منتجات مقترحة"
   اللي جوه السلة كان بياخد المربعات الرمادية، وكل ما المنتجات تتحدّث
   كانت بتظهر وتختفي — ده اللي شايفه بينور ويطفي.

   اتأكدت منه على الموقع: البلوك اللي جوه السلة كان عليه
   animation: sazera-skeleton و min-height: 500px فعلًا.

   القاعدة دي بتلغيها جوه أي بانل جانبي وتسيب الصفحة زي ما هي.
   يتلصق في آخر خانة CSS (بعد البلوكات التانية).
   ===================================================================== */
aside.side-panel salla-products-slider,
aside.side-panel salla-products-list {
  min-height: 0 !important;
  background-image: none !important;
  animation: none !important;
}
/* =====================================================================
   Sazera — ختم "نفدت الكمية" وبادج "يتوفر قريباً" بلون البراند
   (نسخة معدّلة: الكتابة بيضا على درجة البراند الغامقة بدل الغامق على الفاتح)
   ---------------------------------------------------------------------
   الألوان اللي كانت مستخدمة (اتقاست من الموقع):
     - الختم: ٢٦ شكل داخل SVG كلهم fill="#E70000" (أحمر صريح)
     - البادج: كلاس bg-red-500 = rgb(239,68,68) (أحمر تايلويند)

   دلوقتي:
     - الختم على --color-primary (البيتشي #ff967a) — شكل كبير فالوضوح مش مشكلة
     - البادج على --color-primary-dark (#d97054) بكتابة بيضا — نسبة الوضوح
       ٣.٣ : ١ بدل ٢.١ لو كانت بيضا على الفاتح

   الاتنين بيستخدموا متغيرات الثيم، فلو غيّرت لون البراند من إعدادات
   المتجر بيتغيروا معاه لوحدهم.

   يتلصق في آخر خانة CSS (لو لصقت النسخة القديمة، امسحها الأول).
   ===================================================================== */

/* ختم "نفدت الكمية" على صورة المنتج */
.athena-sold-out-container svg path {
  fill: var(--color-primary, #ff967a) !important;
}

/* بادج "يتوفر قريباً" وأي بادج أحمر مشابه على الكروت وصفحة المنتج
   (زرار إغلاق القايمة الأحمر مش متأثر — اتأكدت منه) */
custom-salla-product-card .bg-red-500,
salla-product-card .bg-red-500,
.inline-block.bg-red-500 {
  background-color: var(--color-primary-dark, #d97054) !important;
  color: #fff !important;
}
/* =====================================================================
   Sazera — زرار الـ + في مقترحات السلة الجانبية
   ---------------------------------------------------------------------
   ليه مش شغال؟ مش عطل — المنتجات المقترحة نفسها نافدة من المخزون.

   اللي اتقاس على الموقع دلوقتي: البانل كان فيه منتجين مقترحين،
   الاتنين product-status="out" وزرارهم <button disabled>
   وكتابته "نفدت الكمية".

   والسبب إنه باين كـ "+": الكود القديم بتاعنا بيخفي كتابة الزرار
   ويحط مكانها علامة + لكل الأزرار من غير ما يفرّق بين المتوفر والنافد.
   فالزرار المعطّل بقى شكله زرار إضافة — والعميلة بتدوس ومفيش حاجة بتحصل.

   الحل: نخفي المنتجات النافدة من المقترحات أصلًا — مفيش فايدة من
   اقتراح حاجة مش ممكن تتشترى. ولو كل المقترحات نافدة، نخفي البلوك كله.
   بيعتمد على خاصية product-status اللي سلة نفسها بتحطها، فبيشتغل
   لوحده ويرجع طبيعي أول ما المنتجات ترجع للمخزون.

   يتلصق في آخر خانة CSS.
   ===================================================================== */

/* منتج مقترح نافد ← ما يظهرش */
aside.side-panel--cart mini-product-card:has(salla-add-product-button[product-status="out"]) {
  display: none !important;
}

/* كل المقترحات نافدة ← البلوك كله ما يظهرش */
aside.side-panel--cart salla-products-slider:not(:has(salla-add-product-button:not([product-status="out"]))) {
  display: none !important;
}
/* =====================================================================
   Sazera — إخفاء ختم "نفدت الكمية" + بادج "يتوفر قريباً" بلون البراند
   ---------------------------------------------------------------------
   ⚠️ لو لصقت نسخة أقدم من الملف ده قبل كده، امسحها والصق دي مكانها.

   ١) ختم "نفدت الكمية" الأحمر الكبير اللي على الصورة → اتخفى بالكامل.
      (كان SVG فيه ٢٦ شكل بلون #E70000 مالوش علاقة بالبراند)
      الختم كان position: absolute، فإخفاؤه مش بيغيّر مقاس الكارت ولا
      بيحرّك حاجة — اتأكدت: ارتفاع الكارت ٥٨٠ قبل وبعد.

      حالة "نفد" لسه واضحة للعميلة من حاجتين:
        - بادج "يتوفر قريباً" فوق على الشمال
        - زرار "أعلمني عند التوفر" تحت الصورة

   ٢) بادج "يتوفر قريباً" → درجة البراند الغامقة (#d97054) بكتابة بيضا.
      (كان bg-red-500 أحمر تايلويند)

   بيستخدم متغيرات الثيم، فلو غيّرت لون البراند من إعدادات المتجر
   البادج بيتغيّر معاه لوحده.

   يتلصق في آخر خانة CSS.
   ===================================================================== */

/* ١) إخفاء ختم "نفدت الكمية" */
.athena-sold-out-container {
  display: none !important;
}

/* ٢) بادج "يتوفر قريباً" وأي بادج أحمر مشابه على الكروت وصفحة المنتج
      (زرار إغلاق القايمة الأحمر مش متأثر — اتأكدت منه) */
custom-salla-product-card .bg-red-500,
salla-product-card .bg-red-500,
.inline-block.bg-red-500 {
  background-color: var(--color-primary-dark, #d97054) !important;
  color: #fff !important;
}
/* ============================================================
   Sazera — Upsell حسب الروتين (.sz-up)
   يتحط في صندوق CSS بعد الأكواد الموجودة.
   أول سطر بيخفي البلوك القديم اللي كان بيعرض نفس المنتج في كل الصفحات.
   ============================================================ */
form.product-form .sazera-fbt { display: none !important; }

/* نفس مقاسات البلوك القديم: خلفية كريمي، عنوان 13px، صورة 44px */
.sz-up {
  background: #fdf8f1;
  padding: 14px 18px;
  margin-top: 16px;
  color: #1d1a19;
}
.sz-up[hidden] { display: none; }
.sz-up__head { padding: 0 0 10px; }
.sz-up__title { font-size: 13px; font-weight: 600; letter-spacing: .4px; }
.sz-up__sub { font-size: 12px; color: #6b625c; margin-top: 2px; }

.sz-up__item {
  display: grid;
  grid-template-columns: auto 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid #efe6d9;
  cursor: pointer;
  margin: 0;
}
.sz-up__item:first-child { border-top: 0; padding-top: 4px; }
.sz-up__cb {
  width: 18px; height: 18px; margin: 0;
  accent-color: #2b2622; border-radius: 0; cursor: pointer; flex: none;
}
/* الثيم بيلوّن الـ checkbox المتعلّم بالأزرق، نرجّعه للون البلوك */
form.product-form .sz-up .sz-up__cb:checked {
  background-color: #2b2622 !important; border-color: #2b2622 !important; color: #2b2622 !important;
}
/* صف المنتج الحالي: متعلّم ومقفول */
.sz-up__item--main { cursor: default; }
.sz-up__item--main .sz-up__cb { opacity: .55; cursor: default; }
.sz-up__item--main .sz-up__name { font-weight: 600; }
.sz-up__img { width: 44px; height: 44px; object-fit: contain; display: block; }
.sz-up__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sz-up__role {
  align-self: flex-start;
  font-size: 10.5px; font-weight: 600; letter-spacing: .3px;
  color: #6b625c; background: #f1e9dd; border-radius: 4px; padding: 1px 6px;
}
.sz-up__name {
  font-size: 13px; line-height: 1.45; color: #1d1a19; text-decoration: none; font-weight: 400;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sz-up__name:hover { text-decoration: underline; }
.sz-up__price { display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; font-size: 13px; }
.sz-up__price b { font-weight: 700; }
.sz-up__price s { font-size: 11px; color: #9a8f86; }

.sz-up__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid #e8dcc9; margin-top: 4px; padding-top: 12px;
}
.sz-up__total { display: flex; align-items: baseline; gap: 8px; }
.sz-up__total-label { font-size: 13px; font-weight: 600; }
.sz-up__total-value { font-size: 15px; font-weight: 700; white-space: nowrap; }
.sz-up__btn {
  appearance: none; border: 0; cursor: pointer;
  background: #2b2622; color: #fff;
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 10px 18px; border-radius: 4px; min-height: 40px;
  transition: opacity .15s, background .15s;
}
.sz-up__btn:hover { opacity: .9; }
.sz-up__btn:disabled { background: #d9d1c7; color: #7a716a; cursor: default; opacity: 1; }
.sz-up__btn.is-done { background: #4f8a1f; color: #fff; }

@media (max-width: 640px) {
  .sz-up { padding: 14px 14px 12px; }
  .sz-up__item { grid-template-columns: auto 44px minmax(0, 1fr) auto; gap: 10px; }
  .sz-up__img { width: 44px; height: 44px; }
  .sz-up__name { font-size: 12.5px; }
  .sz-up__foot { flex-direction: column; align-items: stretch; }
  .sz-up__total { justify-content: space-between; }
  .sz-up__btn { width: 100%; }
}

/* الوضع الإنجليزي */
html[lang="en"] .sz-up__price { align-items: flex-start; }
.sz-up__size { color: #9a8f86; font-weight: 400; white-space: nowrap; }

/* الوضع الإنجليزي */
html[lang="en"] .sz-up__price { align-items: flex-start; }
/* ============================================================
   Sazera — إخفاء صف «السعر» المكرر في فورم المنتج
   السعر ظاهر فوق تحت اسم المنتج، فالصف اللي فوق «الكمية» مكرر.
   الصف ده هو أول <section> جوه form.product-form وفيه كمان رسالة
   «نفدت الكمية»، فبنخفي القسم كله لما الرسالة مخفية، وبنسيب الرسالة
   ظاهرة لوحدها لما المنتج يكون منفد.
   ============================================================ */
form.product-form > section:first-of-type:has(.out-of-stock.hidden) { display: none !important; }
form.product-form > section:first-of-type .form-label,
/* ============================================================
   Sazera — فلاتر التصنيفات (.sz-flt) بنفس شكل درج فلاتر سلة
   يتحط في صندوق CSS بعد الأكواد الموجودة.
   أول سطر بيخفي ويدجت «فئات المنتجات» بس من فلتر سلة؛ الماركة والسعر والتقييم بيفضلوا.
   ============================================================ */
#filters-menu salla-filters-widget:has(input[name="category_id"]) { display: none !important; }

.sz-flt { color: #231f1e; }

/* سطر العدد + إلغاء: بيظهر أثناء التفعيل بس */
.sz-flt__head { display: none; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 16px; font-size: 14px; }
.sz-flt.is-active .sz-flt__head { display: flex; }
.sz-flt__count { font-weight: 600; }
.sz-flt__reset { appearance: none; background: none; border: 0; cursor: pointer; font: inherit; font-size: 13px; color: #817f7f; text-decoration: underline; padding: 0; }

/* الويدجت: نفس كارت سلة */
.sz-fw { background: #fff; border-radius: 12px; padding: 20px; margin: 0 0 20px; }
.sz-fw__title { display: flex; align-items: center; justify-content: space-between; margin: 0; font-size: 16px; font-weight: 700; line-height: 24px; cursor: pointer; }
.sz-fw__pm { position: relative; width: 12px; height: 12px; flex: none; }
.sz-fw__pm::before, .sz-fw__pm::after { content: ""; position: absolute; left: 0; top: 5px; width: 12px; height: 2px; background: #999; transition: transform .2s; }
.sz-fw__pm::after { background: #ff967a; transform: rotate(0deg); }
.sz-fw.is-closed .sz-fw__pm::after { transform: rotate(90deg); }
.sz-fw__values { padding-top: 16px; }
.sz-fw.is-closed .sz-fw__values { display: none; }
.sz-fw__label { display: flex; align-items: center; margin: 0 0 12px; cursor: pointer; font-size: 14px; font-weight: 500; line-height: 20px; }
.sz-fw__label:last-child { margin-bottom: 0; }
.sz-fw__label.is-off { opacity: .45; cursor: default; }
.sz-fw__cb {
  appearance: none; -webkit-appearance: none; flex: none;
  width: 20px; height: 20px; margin: 0;
  border: 1px solid #e5e7eb; border-radius: 6px; background: #fff;
  cursor: pointer; display: grid; place-content: center;
}
.sz-fw__cb:checked { background: #ff967a; border-color: #ff967a; }
.sz-fw__cb:checked::before { content: ""; width: 10px; height: 10px; background: #fff; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
.sz-fw__cb:disabled { cursor: default; }
.sz-fw__cb:focus-visible { outline: 2px solid #ff967a; outline-offset: 2px; }
.sz-fw__name { margin: 0 8px; color: #817f7f; }
.sz-fw__cb:checked + .sz-fw__name { color: #231f1e; }

/* عدّاد على زرار «فلاتر» */
.sz-flt__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-inline-start: 6px; border-radius: 999px; background: #2b2622; color: #fff; font-size: 11px; font-weight: 600; line-height: 1; }

/* التصفية نفسها */
.sz-flt-hidden { display: none !important; }
salla-products-list.sz-flt-on .s-infinite-scroll-wrapper,
salla-products-list.sz-flt-on .s-infinite-scroll-status { display: none !important; }
.sz-flt__empty { padding: 28px 0; text-align: center; color: #817f7f; font-size: 14px; }
/* Sazera — إخفاء زرار «فلاتر» على الديسكتوب (يشتغل مع sazera-filter-btn-desktop.js) */
.sz-trig--off { display: none !important; }