/* Add custom CSS styles below */ 
salla-maintenance-alert , #s-theme_edit_bar , #s-theme_preview_bar{
  display: none !important;
}

 
@font-face {
  font-family: 'A Jannat LT';
  src: url('https://strevya.com/ourfonts/ArbFONTS-JannaLT-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
html[lang="ar"] *:not(i):not([class*="sicon"]) {
    font-family: 'A Jannat LT', sans-serif !important;
}

.container {
    max-width: 100%;
      padding: 0 6% !important;
}


 /* =====================================================================
   THE OP — Header (Saji theme override)  ·  CSS box in Salla settings
   Figma: 75:1295 EN desktop · 142:3159 AR desktop
          142:1242 EN mobile  · 142:6 AR mobile
   Works with op-header.js (JS box). The JS builds .op-hdr inside #header.
   Everything stays Salla's: menu, logo, cart count, languages, currencies,
   search, login and the mobile side menu. Nothing of Saji is moved.
   ===================================================================== */

/* ---------- Saji header: hide its inner parts, keep #header itself ---------- */
#header > .store-header { display: none !important; }
#header.op-hdr-fail > .store-header { display: block !important; }   /* JS failed → Saji header back */

#header {
  --op-navy: #1e2042;
  --op-hdr-top: 36px;
  --op-hdr-bar: 80px;
  background: transparent !important;
}
/* space + colour before the JS runs (no jump, no white flash) */
#header:not(.op-ready):not(.op-hdr-fail) {
  min-height: calc(var(--op-hdr-top) + var(--op-hdr-bar));
  background: linear-gradient(var(--op-navy) 0 var(--op-hdr-top), var(--op-navy) 0) !important;
}

/* Home (desktop): header sits on top of the Hero, like the Figma */
@media (min-width: 1024px) {
  body.index #header:not(.op-hdr-solid):not(.is-saji-sticky) {
    position: absolute !important;
    top: 0; left: 0; right: 0;
    width: 100%;
  }
  body.index #header:not(.op-ready):not(.op-hdr-fail) {
    background: linear-gradient(var(--op-navy) 0 var(--op-hdr-top), transparent 0) !important;
  }
}
@media (max-width: 1023.98px) {
  #header { --op-hdr-bar: 65px; }
}

.op-hdr-spacer { display: block; height: 0; }

/* =====================================================================
   .op-hdr  (the new header)
   ===================================================================== */
.op-hdr {
  --op-white: #ffffff;
  --op-line: rgba(255, 255, 255, .1);
  --op-pad: var(--op-pad-d, 6%);
  position: relative;
  width: 100%;
  color: var(--op-white);
  font-family: 'DM Sans', sans-serif;
  font-variation-settings: 'opsz' 14;
  -webkit-font-smoothing: antialiased;
}
html:not([lang="ar"]) #header .op-hdr,
html:not([lang="ar"]) #header .op-hdr *:not(i):not([class*="sicon"]) {
  font-family: var(--op-hdr-font, 'DM Sans'), sans-serif !important;
}
.op-hdr *, .op-hdr *::before, .op-hdr *::after { box-sizing: border-box; }
.op-hdr a { text-decoration: none; }
.op-hdr button { font-family: inherit; -webkit-appearance: none; appearance: none; }
.op-hdr svg { display: block; flex: 0 0 auto; }

@media (min-width: 1024px) and (max-width: 1280px) { .op-hdr { --op-pad: var(--op-pad-l, 6%); } }
@media (max-width: 1023.98px) { .op-hdr { --op-pad: var(--op-pad-m, 16px); } }

.op-hdr__wrap {
  width: 100%;
  margin: 0 auto;
  padding-inline: var(--op-pad);
}

/* ---------- Top bar (navy, 36) ---------- */
.op-hdr__top { background: var(--op-navy); }
.op-hdr__top-in {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  height: 36px;
}
.op-hdr__announce,
.op-hdr__top-btn {
  margin: 0;
  font-size: 10.88px;
  line-height: 16.32px;
  font-weight: 400;
  letter-spacing: .14em;                     /* 1.5232px */
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--op-white);
}
.op-hdr__announce { grid-column: 2; text-align: center; overflow: hidden; text-overflow: ellipsis; }
.op-hdr__dd { position: relative; display: flex; }
.op-hdr__dd--lang { grid-column: 1; justify-self: start; }
.op-hdr__dd--cur  { grid-column: 3; justify-self: end; }

.op-hdr__top-btn {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.op-hdr__dd--cur .op-hdr__top-btn { padding-inline-start: 4px; }
.op-hdr__chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 15px;
  transition: transform .25s ease;
}
.op-hdr__dd.is-open .op-hdr__chev { transform: rotate(180deg); }
.op-hdr__dd.is-static .op-hdr__top-btn { cursor: default; opacity: 1; }
.op-hdr__dd.is-static .op-hdr__chev,
.op-hdr__dd.is-static .op-hdr__menu { display: none; }
.op-hdr__lang-short,
.op-hdr__chev--lang { display: none; }

/* dropdown panel */
.op-hdr__menu {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-start: 0;
  z-index: 400;
  min-width: 180px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: #fff;
  border: 1px solid #dce3ed;
  box-shadow: 0 16px 40px rgba(30, 32, 66, .14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.op-hdr__dd--cur .op-hdr__menu { inset-inline-start: auto; inset-inline-end: 0; }
.op-hdr__dd.is-open .op-hdr__menu { opacity: 1; visibility: visible; transform: none; }
.op-hdr__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 10px 16px;
  border: 0;
  background: none;
  color: var(--op-navy);
  font-size: 11.52px;
  line-height: 17.28px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: start;
  white-space: nowrap;
  cursor: pointer;
}
.op-hdr__opt small { font-size: 11px; letter-spacing: 0; text-transform: none; color: rgba(30, 32, 66, .55); }
.op-hdr__opt[aria-selected="true"] { color: #253e6f; font-weight: 500; }
.op-hdr__opt[aria-selected="true"]::after {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: #253e6f;
}
.op-hdr__opt.is-loading { opacity: .5; pointer-events: none; }

/* ---------- Main bar (80) ---------- */
.op-hdr__bar { position: relative; }
body:not(.index) .op-hdr__bar,
#header.op-hdr-solid .op-hdr__bar { background: var(--op-navy); box-shadow: inset 0 1px 0 var(--op-line); }

.op-hdr__bar-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  height: 80px;
}
.op-hdr__side { display: flex; align-items: center; min-width: 0; }
.op-hdr__side--start { justify-content: flex-start; gap: 24px; }
.op-hdr__side--end   { justify-content: flex-end; gap: 12px; }

/* nav */
.op-hdr__nav { display: flex; align-items: center; gap: 24px; min-width: 0; }
.op-hdr__nav--end { padding-inline-end: 12px; }
.op-hdr__item { position: relative; display: flex; }
.op-hdr__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
  color: var(--op-white) !important;
  font-size: 11.52px;
  line-height: 17.28px;
  font-weight: 400;
  letter-spacing: .14em;                     /* 1.6128px */
  text-transform: uppercase;
  white-space: nowrap;
}
.op-hdr__link::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: var(--op-origin, left);
  transition: transform .3s ease;
}
[dir="rtl"] .op-hdr__link::after { --op-origin: right; }
.op-hdr__link.is-current::after { transform: scaleX(1); }
.op-hdr__link .op-hdr__sub-chev { width: 13px; height: 13px; transition: transform .25s ease; }

/* sub-menu (only when the Salla menu item has children) */
.op-hdr__sub {
  position: absolute;
  top: 100%;
  inset-inline-start: -16px;
  z-index: 400;
  min-width: 220px;
  padding: 8px 0;
  background: #fff;
  border: 1px solid #dce3ed;
  box-shadow: 0 16px 40px rgba(30, 32, 66, .14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.op-hdr.is-measuring .op-hdr__sub { display: none; }
.op-hdr__item.is-open .op-hdr__sub,
.op-hdr__item:focus-within .op-hdr__sub { opacity: 1; visibility: visible; transform: none; }
.op-hdr__item.is-open .op-hdr__sub-chev { transform: rotate(180deg); }
.op-hdr__sub a {
  display: block;
  padding: 10px 16px;
  color: var(--op-navy) !important;
  font-size: 11.52px;
  line-height: 17.28px;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* logo 61 × 81 */
.op-hdr__logo { display: block; line-height: 0; }
.op-hdr__logo img {
  display: block;
  width: var(--op-logo-w, 61px);
  height: var(--op-logo-h, 81px);
  object-fit: contain;
}

/* icon buttons 44 / icon 19 */
.op-hdr__icon {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--op-white) !important;
  cursor: pointer;
  transition: background-color .25s ease;
}
.op-hdr__icon > svg { width: 19px; height: 19px; pointer-events: none; }
.op-hdr__icons { display: flex; align-items: center; gap: 12px; }
.op-hdr__m-only {  }
.op-hdr__side--end .op-hdr__d-only {
    display: none !important;
}
.op-hdr.is-compact .op-hdr__d-only { display: none !important; }
.op-hdr.is-compact .op-hdr__m-only { display: grid !important; }

/* cart count (copied from Salla's cart summary) */
.op-hdr__count {
  position: absolute;
  top: 5px;
  inset-inline-end: 4px;
  display: grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #fff;
  color: var(--op-navy);
  font-size: 9.6px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0;
  pointer-events: none;
}
.op-hdr__count:empty,
.op-hdr__count[data-count="0"] { display: none; }

/* burger: 3 lines 20 × 1.5, gap 5 */
.op-hdr__burger span {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 20px;
}
.op-hdr__burger i {
  display: block;
  width: 20px;
  height: 1.5px;
  background: currentColor;
}

@media (hover: hover) {
  .op-hdr__link:hover::after { transform: scaleX(1); }
  .op-hdr__icon:hover { background-color: rgba(255, 255, 255, .1); }
  .op-hdr__top-btn:hover { opacity: .75; }
  .op-hdr__opt:hover { background: #faf0e6; }
  .op-hdr__sub a:hover { background: #faf0e6; }
}
.op-hdr a:focus-visible,
.op-hdr button:focus-visible { outline: 1px solid rgba(255, 255, 255, .8); outline-offset: 2px; }
.op-hdr__menu button:focus-visible,
.op-hdr__sub a:focus-visible { outline-color: var(--op-navy); outline-offset: -2px; }

/* ---------- Arabic ---------- */
.op-hdr.is-ar .op-hdr__announce,
.op-hdr.is-ar .op-hdr__dd--cur .op-hdr__top-btn { font-size: 12px; letter-spacing: 0; }
.op-hdr.is-ar .op-hdr__dd--lang .op-hdr__top-btn { font-size: 12px; letter-spacing: .04em; }
.op-hdr.is-ar .op-hdr__link { font-size: 13.5px; letter-spacing: 0; }
.op-hdr.is-ar .op-hdr__opt,
.op-hdr.is-ar .op-hdr__sub a { font-size: 13px; letter-spacing: 0; }

/* ---------- Sticky (Saji adds .is-saji-sticky on scroll): glass bar, navy icons + menu ---------- */
#header.is-saji-sticky .op-hdr__top { display: none; }
#header.is-saji-sticky .op-hdr__bar,
#header.is-saji-sticky .op-hdr .op-hdr__bar {
  background: rgba(250, 240, 230, .72) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border-top: 0 !important;
  box-shadow: 0 1px 0 rgba(30, 32, 66, .08), 0 8px 24px rgba(30, 32, 66, .08) !important;
  animation: opHdrIn .35s ease both;
}
#header.is-saji-sticky .op-hdr__link,
#header.is-saji-sticky .op-hdr__icon { color: var(--op-navy) !important; }
#header.is-saji-sticky .op-hdr__count { background: var(--op-navy); color: #fff; }
#header.is-saji-sticky .op-hdr a:focus-visible,
#header.is-saji-sticky .op-hdr button:focus-visible { outline-color: var(--op-navy); }
@media (hover: hover) {
  #header.is-saji-sticky .op-hdr__icon:hover { background-color: rgba(30, 32, 66, .07); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #header.is-saji-sticky .op-hdr__bar { background: rgba(250, 240, 230, .96) !important; }
}
#header.is-saji-sticky .op-hdr__bar-in { height: 72px; }
#header.is-saji-sticky .op-hdr__logo img { --op-logo-h: 64px; --op-logo-w: 48px; }
@keyframes opHdrIn { from { transform: translateY(-100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { #header.is-saji-sticky .op-hdr__bar { animation: none; } }

/* ---------- Laptop 1024 – 1279 ---------- */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .op-hdr__nav,
  .op-hdr__side--start { gap: 16px; }
  .op-hdr__nav--end { padding-inline-end: 4px; }
  .op-hdr__side--end,
  .op-hdr__icons { gap: 2px; }
  .op-hdr__link { font-size: 10.5px; letter-spacing: .1em; }
  .op-hdr.is-ar .op-hdr__link { font-size: 12.5px; }
  .op-hdr__icon { width: 40px; height: 40px; }
}

/* ---------- Compact bar: mobile/tablet, or when the menu doesn't fit (JS adds .is-compact) ---------- */
.op-hdr.is-compact .op-hdr__bar-in { height: 64px; gap: 8px; }
#header.is-saji-sticky .op-hdr.is-compact .op-hdr__bar-in { height: 64px; }
.op-hdr.is-compact .op-hdr__side--start { gap: 0; margin-inline-start: -8px; }
.op-hdr.is-compact .op-hdr__side--end { gap: 0; margin-inline-end: -8px; }
.op-hdr.is-compact .op-hdr__icons { gap: 0; }
.op-hdr.is-compact .op-hdr__icon { width: 40px; height: 40px; }
.op-hdr.is-compact .op-hdr__count { top: 3px; inset-inline-end: 2px; }
.op-hdr.is-compact .op-hdr__logo img,
#header.is-saji-sticky .op-hdr.is-compact .op-hdr__logo img { --op-logo-w: 36px; --op-logo-h: 44px; }

/* ---------- Mobile / tablet (≤1023) — Figma 402 frame ---------- */
@media (max-width: 1023.98px) {
  .op-hdr__top-in {         grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 12px;
        height: 36px;
        min-height: 50px;
        padding: 10px;}
  .op-hdr__dd--lang { grid-column: 1; }
  .op-hdr__dd--cur { grid-column: 3; }
  .op-hdr__announce { grid-column: 2; font-size: 10px; line-height: 15px; letter-spacing: .14em; }
  .op-hdr.is-ar .op-hdr__announce { font-size: 11.5px; letter-spacing: 0; }
  .op-hdr__lang-full { display: none; }
  .op-hdr__lang-short { display: inline; }
  .op-hdr__chev--lang { display: inline-flex; }
  .op-hdr__top-btn,
  .op-hdr.is-ar .op-hdr__top-btn { gap: 0; font-size: 10px; letter-spacing: .1em; }
  .op-hdr.is-ar .op-hdr__dd--lang .op-hdr__top-btn { font-size: 12px; letter-spacing: 0; }
  .op-hdr__dd--cur .op-hdr__top-btn { padding-inline-start: 0; }
  .op-hdr__chev { width: 16px; }
  .op-hdr__menu { top: calc(100% + 6px); min-width: 168px; }
  .op-hdr__bar,
  body:not(.index) .op-hdr__bar { background: var(--op-navy); box-shadow: none; border-top: 1px solid var(--op-line); }
}
@media (max-width: 389.98px) {
  .op-hdr__top-in { gap: 8px; }
  .op-hdr__announce { font-size: 9px; letter-spacing: .08em; }
  .op-hdr.is-ar .op-hdr__announce { font-size: 10.5px; }
}
@media (max-width: 359.98px) {
  .op-hdr.is-compact .op-hdr__icon { width: 36px; height: 36px; }
  .op-hdr__announce { font-size: 8.5px; letter-spacing: .04em; }
}

/* Salla currency popup opened from the header: hide its language part */
html.op-cur-only .s-localization-modal-section:has([name="language"]) { display: none !important; }

/* =====================================================================
   Mobile side menu (Salla / Saji default) — readable colours
   It takes the header text colour (white) on a white panel, so we set
   its own colours here.
   ===================================================================== */
.mm-ocd__content,
.mm-ocd__content .mm-spn,
#big--menu,
#big--menu .mm-spn {
  --header-text: #1e2042;
  --header-bg: #ffffff;
  background: #ffffff !important;
  color: #1e2042 !important;
}
.mm-ocd__content a,
.mm-ocd__content span,
.mm-ocd__content li,
.mm-ocd__content i,
#big--menu a,
#big--menu span,
#big--menu li,
#big--menu i {
  color: #1e2042 !important;
}

.product-index .saji_titles_data{
  display: none;
}





/* =====================================================================
   THE OP — Newsletter on the banner (home) · CSS box in Salla settings
   Figma: 75:1055 EN desktop · 142:2978 AR desktop · 142:2127 mobile
   Works with op-newsletter.js. Data = the footer newsletter (title, text,
   form) + the banner with custom class "bannernewslettws" (images).
   ===================================================================== */

/* inner pages: no newsletter in the footer */
body:not(.index) .store-footer div:has(> .newsletter-block),
body:not(.index) .store-footer .newsletter-block { display: none !important; }

/* home: once it moved to the banner, hide the footer copy */
html.op-nl-moved .store-footer div:has(> .newsletter-block),
html.op-nl-moved .store-footer .newsletter-block { display: none !important; }

/* the banner section becomes the newsletter */
.op-nl-host { position: relative !important; overflow: hidden; padding: 0 !important; }
.op-nl-host > :not(.op-nl) { display: none !important; }

.op-nl {
  --op-navy: #1e2042;
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  display: flex;
  justify-content: center;
  width: 100%;
  padding: clamp(64px, 5.83vw, 112px) 24px;          /* 112 @1920 */
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-variation-settings: 'opsz' 14;
  -webkit-font-smoothing: antialiased;
}
html:not([lang="ar"]) .op-nl,
html:not([lang="ar"]) .op-nl *:not(i):not([class*="sicon"]) { font-family: 'DM Sans', sans-serif !important; }
.op-nl *, .op-nl *::before, .op-nl *::after { box-sizing: border-box; }

/* background image (from the banner) + navy 50% */
.op-nl__bg,
.op-nl__bg img { position: absolute; inset: 0; z-index: -2; display: block; width: 100%; height: 100%; }
.op-nl__bg img { object-fit: cover; object-position: center; }
.op-nl::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(30, 32, 66, .5); }

/* card 576, p 48, centered */
.op-nl__in {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 576px;
  padding: 48px;
  text-align: center;
}
.op-nl__eyebrow {
  margin: 0;
  font-size: 11.52px;
  line-height: 17.28px;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
}
.op-nl__title {
  margin: 16px 0 0;
  font-size: clamp(34px, 2.5vw, 48px);               /* 48 / 50.4 */
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -.01em;
  color: #fff;
  text-wrap: balance;
}
html:not([lang="ar"]) .op-nl h2.op-nl__title.op-nl__title:not(i) { font-family: 'CormorantGaramond', 'Cormorant Garamond', serif !important; }
.op-nl__text {
  max-width: 384px;
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 24px;
  color: rgba(255, 255, 255, .75);
  font-weight: bold;
}

/* form 448: input + button, gap 12, h 44 */
.op-nl__form {
  display: flex;
  gap: 12px;
  width: 100%;
  max-width: 448px;
  margin: 32px 0 0;
}
.op-nl__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: rgba(255, 255, 255, .1);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .2);
  color: #fff;
  font-size: 14px;
  text-align: start;
  -webkit-appearance: none;
  appearance: none;
  transition: box-shadow .2s ease, background-color .2s ease;
}
.op-nl__input::placeholder { color: rgba(255, 255, 255, .5); opacity: 1; }
.op-nl__input:focus { background: rgba(255, 255, 255, .14); box-shadow: 0 0 0 1px rgba(255, 255, 255, .6); }
.op-nl__btn {
  flex: 0 0 auto;
  height: 44px;
  margin: 0;
  padding: 0 28px;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: var(--op-navy);
  font-size: 12.48px;
  line-height: 18.72px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease;
}
@media (hover: hover) {
  .op-nl__btn:hover { background: #faf0e6; }
}
.op-nl__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Arabic */
.op-nl.is-ar .op-nl__eyebrow { font-size: 12.5px; letter-spacing: 0; }
.op-nl.is-ar .op-nl__title { font-weight: 700; line-height: 1.3; letter-spacing: 0; }
.op-nl.is-ar .op-nl__text { line-height: 1.7; }
.op-nl.is-ar .op-nl__btn { font-size: 13px; letter-spacing: 0; }

/* tablet */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .op-nl__title { font-size: 40px; }
}

/* mobile (≤767) — Figma 402: py 80, px 24, form stacked */
@media (max-width: 767.98px) {
  .op-nl { padding: 80px 24px; }
  .op-nl__in { max-width: 354px; padding: 0; }
  .op-nl__eyebrow { font-size: 11px; line-height: 16.5px; letter-spacing: .245em; }
  .op-nl__title { font-size: clamp(30px, 9.45vw, 38px); line-height: 1.05; letter-spacing: -.4px; }
  .op-nl.is-ar .op-nl__title { font-size: clamp(26px, 8vw, 34px); line-height: 1.35; letter-spacing: 0; }
  .op-nl__text { max-width: 354px; }
  .op-nl__form { flex-direction: column; gap: 12px; max-width: none; }
  .op-nl__input,
  .op-nl__btn { width: 100%; text-align: center; }
  .op-nl__btn { font-size: 12.5px; letter-spacing: .16em; }
}


/* =====================================================================
   THE OP — Footer · CSS only (Saji footer restyled, nothing added)
   Figma: 75:1131 desktop · 142:2141 mobile
   Same elements, same data — only colours, sizes and positions change:
   [logo + text + social] [footer menu] [contacts] [certificates]
   ─────────────────────────────────────────────────────────────
   [language · currency]                       [payment icons]
                       © copyright
   ===================================================================== */

/* safety: if the old op-footer.js is still installed, hide the extra footer it adds */
footer.store-footer > .op-ftr { display: none !important; }

/* ---------- colours (Saji's own footer variables) ---------- */
footer.store-footer {
  --footer-bg: #1e2042;
  --footer-color: #ffffff;
  --op-mist: #dce4ea;
  background: #1e2042 !important;
  color: #fff;
}
footer.store-footer .store-footer-content {
  display: flex !important;
  flex-direction: column !important;
  padding: 80px 0 0 !important;                       /* py 80 */
  max-width: 100% !important;
  background: #1e2042 !important;
}
html:not([lang="ar"]) footer.store-footer .store-footer-content,
html:not([lang="ar"]) footer.store-footer .store-footer-content *:not(i):not([class*="sicon"]) {
  font-family: 'DM Sans', sans-serif !important;
  font-variation-settings: 'opsz' 14;
}

/* ---------- the grid: one grid, the inner wrappers "melt" into it ---------- */
footer.store-footer .store-footer-content > .container { width: 100%; }
footer.store-footer .store-footer-content > .container > div:first-child {
  display: grid !important;
  grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2.667fr)) !important;
  grid-template-rows: auto auto auto 1fr auto;
  column-gap: 40px !important;
  row-gap: 16px !important;
  margin: 0 !important;
  text-align: start !important;
}
footer.store-footer .store-footer-content > .container > div:first-child > div:has(.footer-menu),
footer.store-footer .store-footer-content > .container > div:first-child > div:has(salla-payments) {
  display: contents !important;
}

/* column 1 — brand (logo, text, social) */
footer.store-footer .store-footer-content > .container > div:first-child > div:has(.saji-footer-logo) {
  grid-column: 1; grid-row: 1 / 5;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: start !important;
}
footer.store-footer .saji-footer-logo { display: inline-flex !important; justify-content: flex-start !important; }
footer.store-footer .saji-footer-logo img { height: 38px !important; width: auto !important; max-width: 220px; object-fit: contain; }
footer.store-footer .saji-footer-logo ~ p {
  max-width: 320px !important;
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 22.75px !important;
  color: rgba(255, 255, 255, .65) !important;
  text-align: start !important;
}
footer.store-footer .saji-footer-logo ~ p:not(:empty) { margin-top: 20px !important; }
footer.store-footer .saji-footer-logo ~ p:empty { display: none !important; }
footer.store-footer .saji-footer-logo ~ div { margin: 24px 0 0 !important; padding: 0 !important; }
footer.store-footer .s-social-list { display: flex !important; flex-wrap: wrap; gap: 12px !important; margin: 0 !important; padding: 0 !important; justify-content: flex-start !important; }
footer.store-footer .s-social-link { margin: 0 !important; }
footer.store-footer .s-social-link a {
  display: grid !important;
  place-items: center;
  width: 44px !important;
  height: 44px !important;
  border: 1.25px solid rgba(255, 255, 255, .2) !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #fff !important;
  transition: border-color .25s ease, background-color .25s ease;
}
footer.store-footer .s-social-icon,
footer.store-footer .s-social-icon svg { display: block; width: 17px !important; height: 17px !important; fill: currentColor !important; }

/* column titles (menu + contacts) */
footer.store-footer .footer-title,
footer.store-footer .s-contacts-title {
  display: block;
  margin: 0 0 16px !important;
  font-size: 11.52px !important;
  line-height: 17.28px !important;
  font-weight: 400 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase;
  color: var(--op-mist) !important;
  text-align: start !important;
}

/* column 2 — footer menu */
footer.store-footer .store-footer-content > .container > div:first-child > div > div:has(> .footer-menu) {
  grid-column: 2; grid-row: 1 / 5;
  display: block !important;
  text-align: start !important;
}
footer.store-footer .footer-menu { margin: 0 !important; text-align: start !important; }
footer.store-footer .s-menu-footer-list {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 10px !important;
  columns: auto !important;
  grid-template-columns: none !important;
}
footer.store-footer .s-menu-footer-item {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: rgba(255, 255, 255, .7) !important;
  text-decoration: none !important;
  transition: color .2s ease;
}

/* column 3 — contacts */
footer.store-footer .store-footer-content > .container > div:first-child > div > div:has(salla-contacts) {
  grid-column: 3; grid-row: 1 / 5;
  display: block !important;
}
footer.store-footer salla-contacts { display: block; text-align: start !important; }
footer.store-footer .s-contacts-list { display: flex !important; flex-direction: column; align-items: flex-start !important; gap: 10px; }
footer.store-footer .s-contacts-item {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: rgba(255, 255, 255, .7) !important;
  text-decoration: none !important;
}
footer.store-footer .s-contacts-icon { display: none !important; }
footer.store-footer .s-contacts-item .unicode { direction: ltr; unicode-bidi: isolate; }

/* column 4 — certificates (trust badge, SBC, apps) */
footer.store-footer salla-trust-badges {
  grid-column: 4; grid-row: 1;
  display: flex !important;
  align-items: center;
  justify-content: flex-start !important;
  gap: 12px;
  margin: 0 !important;
  text-align: start !important;
}
footer.store-footer .s-trust-badges-image { width: 44px !important; height: 44px !important; object-fit: contain; border-radius: 6px; background: #fff; padding: 4px; }
footer.store-footer .s-trust-badges-label { margin: 0 !important; font-size: 12px !important; line-height: 16px !important; color: rgba(255, 255, 255, .55) !important; }
footer.store-footer .s-trust-badges-number { font-size: 13px !important; line-height: 18px !important; font-weight: 500 !important; color: rgba(255, 255, 255, .85) !important; }
footer.store-footer .store-footer-content > .container > div:first-child div:has(> .footer-certificate-data) {
  grid-column: 4; grid-row: 2;
  display: flex !important;
  justify-content: flex-start !important;
  margin: 0 !important;
}
footer.store-footer .footer-certificate-data {
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
}
footer.store-footer .footer-certificate-data .lazy__bg,
footer.store-footer .footer-certificate-data > div {
  width: 44px !important;
  height: 44px !important;
  border-radius: 6px;
  background-color: #fff !important;
  background-size: 80% !important;
  background-position: center !important;
}
footer.store-footer .footer-certificate-data strong { font-size: 12px !important; font-weight: 400 !important; color: rgba(255, 255, 255, .55) !important; }
footer.store-footer salla-apps-icons { grid-column: 4; grid-row: 3; margin: 0 !important; justify-content: flex-start !important; text-align: start !important; }
footer.store-footer salla-apps-icons:empty { display: none !important; }

/* ---------- bottom bar: border line + language/currency + payment icons ---------- */
footer.store-footer .store-footer-content > .container > div:first-child::before {
  content: '';
  grid-column: 1 / -1;
  grid-row: 5;
  align-self: start;
  margin-top: 64px;
  margin-inline: calc(var(--op-bleed, 0px) * -1);
  border-top: 1.25px solid rgba(255, 255, 255, .1);
}
footer.store-footer .store-footer-content > .container > div:first-child div:has(> .btn-currency) {
  grid-column: 1 / 3; grid-row: 5;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 16px !important;
  margin: 64px 0 0 !important;
  padding: 20px 0 !important;
}
footer.store-footer .btn-currency {
  display: inline-flex !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  font-size: 12px !important;
  line-height: 16px !important;
  color: rgba(255, 255, 255, .55) !important;
  transition: color .2s ease;
}
footer.store-footer .btn-currency i { display: none !important; }
footer.store-footer .btn-currency + .btn-currency::before { content: '·'; margin-inline-end: 16px; color: rgba(255, 255, 255, .55); }

footer.store-footer .store-footer-content > .container > div:first-child div:has(> salla-payments) {
  grid-column: 3 / 5; grid-row: 5;
  display: flex !important;
  align-items: center;
  justify-content: flex-end !important;
  margin: 64px 0 0 !important;
  padding: 20px 0 !important;
}
footer.store-footer .s-payments-list {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}
footer.store-footer .s-payments-list-item {
  display: grid !important;
  place-items: center;
  width: auto !important;
  min-width: 40px;
  height: 26px !important;
  margin: 0 !important;
  padding: 3px 6px !important;
  border: 1.25px solid rgba(255, 255, 255, .15) !important;
  border-radius: 4px !important;
  background: #fff !important;
}
footer.store-footer .s-payments-list-item img { display: block; width: auto !important; height: 18px !important; max-width: 48px; object-fit: contain; }

/* ---------- copyright ---------- */
footer.store-footer .footer-bottom { background: #1e2042 !important; }
footer.store-footer .footer-bottom .container::after { display: none !important; }
footer.store-footer .footer-bottom .container > div { padding: 0 0 24px !important; justify-content: center !important; }
footer.store-footer .saji-copyright-theme,
footer.store-footer .saji-copyright-theme p,
footer.store-footer .saji-copyright-theme a {
  margin: 0 !important;
  font-size: 10.88px !important;
  line-height: 16.32px !important;
  color: rgba(255, 255, 255, .4) !important;
  text-align: center !important;
}

@media (hover: hover) {
  footer.store-footer .s-menu-footer-item:hover,
  footer.store-footer .s-contacts-item:hover,
  footer.store-footer .btn-currency:hover { color: #fff !important; }
  footer.store-footer .s-social-link a:hover { border-color: rgba(255, 255, 255, .6) !important; background: rgba(255, 255, 255, .06) !important; }
}

/* ---------- Arabic ---------- */
html[lang="ar"] footer.store-footer .footer-title,
html[lang="ar"] footer.store-footer .s-contacts-title { font-size: 13px !important; letter-spacing: 0 !important; }
html[lang="ar"] footer.store-footer .s-menu-footer-item,
html[lang="ar"] footer.store-footer .s-contacts-item { line-height: 1.6 !important; }

/* ---------- tablet (768 – 1023): brand on top, 3 columns below ---------- */
@media (max-width: 1023.98px) {
  footer.store-footer .store-footer-content { padding-top: 64px !important; }
  footer.store-footer .store-footer-content > .container > div:first-child {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: auto auto auto auto 1fr auto auto;
    column-gap: 32px !important;
  }
  footer.store-footer .store-footer-content > .container > div:first-child > div:has(.saji-footer-logo) { grid-column: 1 / -1; grid-row: 1; margin-bottom: 32px; }
  footer.store-footer .store-footer-content > .container > div:first-child > div > div:has(> .footer-menu) { grid-column: 1; grid-row: 2 / 6; }
  footer.store-footer .store-footer-content > .container > div:first-child > div > div:has(salla-contacts) { grid-column: 2; grid-row: 2 / 6; }
  footer.store-footer salla-trust-badges { grid-column: 3; grid-row: 2; }
  footer.store-footer .store-footer-content > .container > div:first-child div:has(> .footer-certificate-data) { grid-column: 3; grid-row: 3; }
  footer.store-footer salla-apps-icons { grid-column: 3; grid-row: 4; }
  footer.store-footer .store-footer-content > .container > div:first-child::before { grid-row: 6; margin-top: 48px; }
  footer.store-footer .store-footer-content > .container > div:first-child div:has(> .btn-currency) { grid-column: 1 / -1; grid-row: 6; margin-top: 48px !important; padding-bottom: 0 !important; }
  footer.store-footer .store-footer-content > .container > div:first-child div:has(> salla-payments) { grid-column: 1 / -1; grid-row: 7; justify-content: flex-start !important; margin: 0 !important; padding: 0 0 24px !important; }
  footer.store-footer .s-payments-list { justify-content: flex-start !important; }
}

/* ---------- mobile (≤767) — Figma 402 ---------- */
@media (max-width: 767.98px) {
  footer.store-footer .store-footer-content { padding-top: 56px !important; }
  footer.store-footer .store-footer-content > .container > div:first-child {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: none;
    row-gap: 16px !important;
  }
  footer.store-footer .store-footer-content > .container > div:first-child > div:has(.saji-footer-logo) { grid-column: 1 / -1; grid-row: 1; margin-bottom: 32px; }
  footer.store-footer .store-footer-content > .container > div:first-child > div > div:has(> .footer-menu) { grid-column: 1 / -1; grid-row: 2; }
  footer.store-footer .store-footer-content > .container > div:first-child > div > div:has(salla-contacts) { grid-column: 1 / -1; grid-row: 3; margin-top: 24px; }
  footer.store-footer salla-trust-badges { grid-column: 1 / -1; grid-row: 4; margin-top: 24px !important; }
  footer.store-footer .store-footer-content > .container > div:first-child div:has(> .footer-certificate-data) { grid-column: 1 / -1; grid-row: 5; }
  footer.store-footer salla-apps-icons { grid-column: 1 / -1; grid-row: 6; }
  footer.store-footer .store-footer-content > .container > div:first-child::before { grid-row: 7; margin-top: 32px; }
  footer.store-footer .store-footer-content > .container > div:first-child div:has(> .btn-currency) { grid-column: 1 / -1; grid-row: 7; margin-top: 32px !important; padding: 24px 0 0 !important; gap: 12px !important; }
  footer.store-footer .btn-currency + .btn-currency::before { margin-inline-end: 12px; }
  footer.store-footer .store-footer-content > .container > div:first-child div:has(> salla-payments) { grid-column: 1 / -1; grid-row: 8; padding: 0 0 32px !important; }
  footer.store-footer .footer-title,
  footer.store-footer .s-contacts-title { font-size: 11.5px !important; letter-spacing: .174em !important; }
  footer.store-footer .s-menu-footer-item,
  footer.store-footer .s-contacts-item { line-height: 21px !important; }
  footer.store-footer .saji-copyright-theme p { font-size: 10.5px !important; }
}


/* زراير اللغة والعملة في الفوتر: كل زرار يظهر جزءه بس في بوب اب سلة */
html.op-ftr-lang .s-localization-modal-section:has([name="currency"]),
html.op-ftr-cur .s-localization-modal-section:has([name="language"]) {
  display: none !important;
}






/* =====================================================================
   THE OP — Products: section + product card (CSS only)
   Figma: 75:1125 New Check-Ins (desktop) · mobile = horizontal scroll
   - CARD: every Salla product card in the store (home, categories, search…)
   - SECTION: Saji "products with background" sections (.stationary-products-background)
   Same elements and data as Saji — only look and positions change.
   ===================================================================== */

/* =========================== PRODUCT CARD =========================== */
:is(custom-salla-product-card, salla-product-card).product-entry {
  --op-navy: #1e2042;
  --op-royal: #253e6f;
  --op-cocoa: #483a2f;
  --op-bluemist: #dce3ed;
  --product-background: transparent;
  --product-color: #1e2042;
  --product-subtitle-color: #483a2f;
  --product-price-color: #1e2042;
  --product-btns-color: #1e2042;
  --product-btns-bg: transparent;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  min-width: 0 !important;
}
html:not([lang="ar"]) :is(custom-salla-product-card, salla-product-card).product-entry *:not(i):not([class*="sicon"]) {
  font-family: 'DM Sans', sans-serif !important;
  font-variation-settings: 'opsz' 14;
}

/* image: full width, height auto (no fixed ratio) */
:is(custom-salla-product-card, salla-product-card).product-entry .product-entry__image {
  aspect-ratio: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  background: var(--op-bluemist) !important;
}
:is(custom-salla-product-card, salla-product-card).product-entry .card-slide-data,
:is(custom-salla-product-card, salla-product-card).product-entry .card-slide-images {
  height: auto !important;
}
:is(custom-salla-product-card, salla-product-card).product-entry .card-slide-images img,
:is(custom-salla-product-card, salla-product-card).product-entry img.card-slide-first {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  background: var(--op-bluemist) !important;
}

/* badge — top 16 / start 12, white 90% + blur */
:is(custom-salla-product-card, salla-product-card).product-entry .promotion-badge {
  top: 16px !important;
  left: auto !important;
  right: auto !important;
  inset-inline-start: 12px !important;
  max-width: calc(100% - 80px) !important;
  height: auto !important;
  padding: 4px 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, .9) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--op-navy) !important;
  font-size: 9.92px !important;
  line-height: 14.88px !important;
  font-weight: 500 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: none !important;
}

/* wishlist — 44 circle, top 12 / end 12 */
:is(custom-salla-product-card, salla-product-card).product-entry .product-entry__image .product_buttons {
  position: absolute !important;
  top: 12px !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  inset-inline-end: 12px !important;
  width: auto !important;
  padding: 0 !important;
  opacity: 1 !important;
  transform: none !important;
  z-index: 10;
}
:is(custom-salla-product-card, salla-product-card).product-entry .btn--wishlist,
:is(custom-salla-product-card, salla-product-card).product-entry .btn--wishlist button {
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
}
:is(custom-salla-product-card, salla-product-card).product-entry .btn--wishlist button {
  display: grid !important;
  place-items: center;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, .85) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--op-navy) !important;
  box-shadow: none !important;
  transform: none !important;
  opacity: 1 !important;
}
:is(custom-salla-product-card, salla-product-card).product-entry .btn--wishlist i { font-size: 17px !important; line-height: 1 !important; }

/* body */
:is(custom-salla-product-card, salla-product-card).product-entry form.product-form {
  background: transparent !important;
  padding: 0 !important;
}
:is(custom-salla-product-card, salla-product-card).product-entry form.product-form .product-form__body {
  padding: 16px 0 0 !important;
  text-align: start !important;
  background: transparent !important;
}
:is(custom-salla-product-card, salla-product-card).product-entry form.product-form .product-entry__content {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}
:is(custom-salla-product-card, salla-product-card).product-entry form.product-form .text-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
/* subtitle → small label above the title (Figma "Room 01") */
:is(custom-salla-product-card, salla-product-card).product-entry form.product-form .product-entry__subtitle {
  order: -1;
  margin: 0 !important;
  font-size: 11.52px !important;
  line-height: 17.28px !important;
  font-weight: 500 !important;
  letter-spacing: .24em !important;
  text-transform: uppercase;
  color: var(--op-cocoa) !important;
}
/* title — Cormorant 24 */
:is(custom-salla-product-card, salla-product-card).product-entry form.product-form .product-entry__title {
  margin: 0 !important;
  font-size: 24px !important;
  line-height: 25.2px !important;
  font-weight: 500 !important;
  letter-spacing: -.01em !important;
  color: var(--op-navy) !important;
}
html:not([lang="ar"]) :is(custom-salla-product-card, salla-product-card).product-entry form.product-form a.product-entry__title.product-entry__title {
  font-family: 'CormorantGaramond', 'Cormorant Garamond', serif !important;
}

/* options — label + chips side by side */
:is(custom-salla-product-card, salla-product-card).product-entry .product-options { margin-top: 12px !important; }
:is(custom-salla-product-card, salla-product-card).product-entry .s-product-options-option-container { margin: 0 0 10px !important; padding: 0 !important; border: 0 !important; }
:is(custom-salla-product-card, salla-product-card).product-entry .s-product-options-option { margin: 0 !important; padding: 0 !important; }
:is(custom-salla-product-card, salla-product-card).product-entry .s-product-options-option-label {
  display: flex !important;
  align-items: baseline;
  gap: 6px;
  margin: 0 0 8px !important;
  padding: 0 !important;
}
:is(custom-salla-product-card, salla-product-card).product-entry .s-product-options-option-label b {
  font-size: 11px !important;
  line-height: 16px !important;
  font-weight: 500 !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(30, 32, 66, .7) !important;
}
:is(custom-salla-product-card, salla-product-card).product-entry .s-product-options-option-label b span { color: var(--op-cocoa); }
:is(custom-salla-product-card, salla-product-card).product-entry .s-product-options-option-label small { display: none !important; }
:is(custom-salla-product-card, salla-product-card).product-entry .s-product-options-grid-mode {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
}
:is(custom-salla-product-card, salla-product-card).product-entry .s-product-options-grid-mode > label {
  position: relative;
  display: inline-flex !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  cursor: pointer;
}
:is(custom-salla-product-card, salla-product-card).product-entry .s-product-options-grid-mode > label > input {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  opacity: 0 !important;
  cursor: pointer;
}
:is(custom-salla-product-card, salla-product-card).product-entry .product-options .s-product-options-grid-mode .s-product-options-grid-mode-span {
  display: inline-flex !important;
  align-items: center;
  min-height: 28px;
  margin: 0 !important;
  padding: 4px 10px !important;
  border: 1px solid rgba(30, 32, 66, .2) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--op-navy) !important;
  font-size: 12px !important;
  line-height: 16px !important;
  font-weight: 400 !important;
  white-space: normal !important;
  text-align: start !important;
  max-width: 100%;
  overflow-wrap: anywhere;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
:is(custom-salla-product-card, salla-product-card).product-entry .product-options .s-product-options-grid-mode > label > input[type="radio"]:checked + .s-product-options-grid-mode-span,
:is(custom-salla-product-card, salla-product-card).product-entry .product-options .s-product-options-grid-mode > label > input[type="radio"]:checked + div {
  background: var(--op-navy) !important;
  border-color: var(--op-navy) !important;
  color: #fff !important;
}
:is(custom-salla-product-card, salla-product-card).product-entry .s-product-options-grid-mode > label > input:focus-visible + .s-product-options-grid-mode-span {
  outline: 2px solid var(--op-royal);
  outline-offset: 2px;
}

/* price — 14 medium navy */
:is(custom-salla-product-card, salla-product-card).product-entry form.product-form .price-wrapper { margin-top: 12px !important; }
:is(custom-salla-product-card, salla-product-card).product-entry form.product-form .product-entry__price {
  align-items: flex-start !important;
  margin: 0 !important;
}
:is(custom-salla-product-card, salla-product-card).product-entry form.product-form .product-entry__price .total-price,
:is(custom-salla-product-card, salla-product-card).product-entry form.product-form .product-entry__price .sale-price {
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 500 !important;
  color: var(--op-navy) !important;
}
:is(custom-salla-product-card, salla-product-card).product-entry form.product-form .product-entry__price .before-price,
:is(custom-salla-product-card, salla-product-card).product-entry form.product-form .product-entry__price .regular-price {
  font-size: 12px !important;
  color: rgba(30, 32, 66, .5) !important;
}

/* add to cart / notify me — hidden on the card (not in the design) */
:is(custom-salla-product-card, salla-product-card).product-entry form.product-form > div:has(salla-add-product-button, .btn--add-to-cart, salla-product-availability),
:is(custom-salla-product-card, salla-product-card).product-entry salla-add-product-button,
:is(custom-salla-product-card, salla-product-card).product-entry salla-product-availability {
  display: none !important;
}
:is(custom-salla-product-card, salla-product-card).product-entry .btn--add-to-cart.saji-pc-btn-theme button.s-button-element,
:is(custom-salla-product-card, salla-product-card).product-entry .btn--add-to-cart button.s-button-element,
:is(custom-salla-product-card, salla-product-card).product-entry form.product-form salla-product-availability button.s-button-element {
  width: 100% !important;
  min-height: 44px !important;
  height: auto !important;
  padding: 8px 16px !important;
  border: 1.25px solid var(--op-royal) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--op-royal) !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  transition: background-color .25s ease, color .25s ease !important;
}
:is(custom-salla-product-card, salla-product-card).product-entry .btn--add-to-cart .s-button-text,
:is(custom-salla-product-card, salla-product-card).product-entry .btn--add-to-cart .s-button-text > span,
:is(custom-salla-product-card, salla-product-card).product-entry form.product-form salla-product-availability button.s-button-element,
:is(custom-salla-product-card, salla-product-card).product-entry form.product-form salla-product-availability .s-button-text {
  display: inline-flex !important;
  align-items: center;
  justify-content: center !important;
  gap: 8px !important;
  font-size: 12.48px !important;
  line-height: 18.72px !important;
  font-weight: 500 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase;
  color: inherit !important;
}
:is(custom-salla-product-card, salla-product-card).product-entry .btn--add-to-cart .s-button-text i { font-size: 14px !important; }

@media (hover: hover) {
  :is(custom-salla-product-card, salla-product-card).product-entry .btn--add-to-cart button.s-button-element:hover,
  :is(custom-salla-product-card, salla-product-card).product-entry form.product-form salla-product-availability button.s-button-element:hover {
    background: var(--op-navy) !important;
    border-color: var(--op-navy) !important;
    color: #fff !important;
  }
  :is(custom-salla-product-card, salla-product-card).product-entry .s-product-options-grid-mode > label:hover .s-product-options-grid-mode-span { border-color: var(--op-navy) !important; }
  :is(custom-salla-product-card, salla-product-card).product-entry .btn--wishlist button:hover { background: #fff !important; }
}

/* Arabic */
html[lang="ar"] :is(custom-salla-product-card, salla-product-card).product-entry .promotion-badge,
html[lang="ar"] :is(custom-salla-product-card, salla-product-card).product-entry form.product-form .product-entry__subtitle,
html[lang="ar"] :is(custom-salla-product-card, salla-product-card).product-entry .s-product-options-option-label b,
html[lang="ar"] :is(custom-salla-product-card, salla-product-card).product-entry .btn--add-to-cart .s-button-text > span {
  letter-spacing: 0 !important;
  text-transform: none;
}
html[lang="ar"] :is(custom-salla-product-card, salla-product-card).product-entry form.product-form .product-entry__title {
  font-size: 18px !important;
  line-height: 1.5 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}
html[lang="ar"] :is(custom-salla-product-card, salla-product-card).product-entry .promotion-badge { font-size: 11px !important; }
html[lang="ar"] :is(custom-salla-product-card, salla-product-card).product-entry form.product-form .product-entry__subtitle { font-size: 12.5px !important; }
html[lang="ar"] :is(custom-salla-product-card, salla-product-card).product-entry .btn--add-to-cart .s-button-text > span { font-size: 13.5px !important; }

/* mobile card */
@media (max-width: 767.98px) {
  :is(custom-salla-product-card, salla-product-card).product-entry .product-entry__image .product_buttons { top: 8px !important; inset-inline-end: 8px !important; }
  :is(custom-salla-product-card, salla-product-card).product-entry .btn--wishlist,
  :is(custom-salla-product-card, salla-product-card).product-entry .btn--wishlist button { width: 36px !important; height: 36px !important; }
  :is(custom-salla-product-card, salla-product-card).product-entry .btn--wishlist i { font-size: 15px !important; }
  :is(custom-salla-product-card, salla-product-card).product-entry .promotion-badge { top: 10px !important; inset-inline-start: 8px !important; max-width: calc(100% - 56px) !important; }
  :is(custom-salla-product-card, salla-product-card).product-entry form.product-form .product-form__body { padding-top: 12px !important; }
  :is(custom-salla-product-card, salla-product-card).product-entry form.product-form .product-entry__title { font-size: 20px !important; line-height: 22px !important; }
  html[lang="ar"] :is(custom-salla-product-card, salla-product-card).product-entry form.product-form .product-entry__title { font-size: 16px !important; line-height: 1.5 !important; }
  :is(custom-salla-product-card, salla-product-card).product-entry form.product-form .product-entry__subtitle { font-size: 10.5px !important; letter-spacing: .2em !important; }
  :is(custom-salla-product-card, salla-product-card).product-entry .btn--add-to-cart button.s-button-element { min-height: 40px !important; padding: 6px 10px !important; }
  :is(custom-salla-product-card, salla-product-card).product-entry .btn--add-to-cart .s-button-text > span { font-size: 11.5px !important; letter-spacing: .12em !important; }
}

/* ============================== SECTION ============================== */
section.stationary-products-background {
  padding-top: clamp(36px, 2.81vw, 54px) !important;        /* 54 @1920 */
  padding-bottom: clamp(48px, 4.64vw, 89px) !important;     /* 89 @1920 */
}
section.stationary-products-background > .container {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: 24px;
}
/* title block: eyebrow (subtitle) above the H2, start-aligned */
section.stationary-products-background .saji-block-titles {
  grid-column: 1; grid-row: 1;
  align-items: flex-start !important;
  margin: 0 !important;
  text-align: start !important;
}
section.stationary-products-background .saji-block-titles .s-block__title {
  flex-direction: column-reverse !important;
  align-items: flex-start !important;
  text-align: start !important;
}
section.stationary-products-background .saji-block-titles .s-block__title > p {
  margin: 0 0 12px !important;
  font-size: 11.52px !important;
  line-height: 17.28px !important;
  font-weight: 500 !important;
  letter-spacing: .24em !important;
  text-transform: uppercase;
  color: #483a2f !important;
  text-align: start !important;
}
section.stationary-products-background .saji-block-titles .s-block__title > h2 {
  margin: 0 !important;
  font-size: clamp(34px, 3.125vw, 60px) !important;          /* 60 / 63 */
  line-height: 1.05 !important;
  font-weight: 500 !important;
  letter-spacing: -.01em !important;
  color: #1e2042 !important;
  text-align: start !important;
}
html:not([lang="ar"]) section.stationary-products-background .saji-block-titles .s-block__title > h2.saji-default-title {
  font-family: 'CormorantGaramond', 'Cormorant Garamond', serif !important;
}
html:not([lang="ar"]) section.stationary-products-background .saji-block-titles .s-block__title > p { font-family: 'DM Sans', sans-serif !important; }
section.stationary-products-background .saji-block-titles .s-block__title > h2::before,
section.stationary-products-background .saji-block-titles .s-block__title > h2::after { display: none !important; }
html[lang="ar"] section.stationary-products-background .saji-block-titles .s-block__title > p { letter-spacing: 0 !important; font-size: 13px !important; }
html[lang="ar"] section.stationary-products-background .saji-block-titles .s-block__title > h2 { font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: 0 !important; }

/* "View all" → top end, thin underline link */
section.stationary-products-background > .container > div:has(> .s-block__display-all) {
  grid-column: 2; grid-row: 1;
  align-self: end;
  padding: 0 !important;
  text-align: end;
}
section.stationary-products-background .s-block__display-all.btn-epic,
section.stationary-products-background .s-block__display-all {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  padding: 0 0 4px !important;
  border: 0 !important;
  border-bottom: 1.25px solid #253e6f !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #253e6f !important;
  font-size: 12px !important;
  line-height: 16px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase;
  box-shadow: none !important;
  animation: none !important;
  overflow: visible !important;
}
section.stationary-products-background .s-block__display-all::after { display: none !important; }
section.stationary-products-background .s-block__display-all i { margin: 0 !important; font-size: 13px; }
html:not([lang="ar"]) section.stationary-products-background .s-block__display-all { font-family: 'DM Sans', sans-serif !important; }
html[lang="ar"] section.stationary-products-background .s-block__display-all { letter-spacing: 0 !important; font-size: 13px !important; }
@media (hover: hover) {
  section.stationary-products-background .s-block__display-all:hover { color: #1e2042 !important; border-color: #1e2042 !important; }
}

/* products: 4 columns, gap 20 */
section.stationary-products-background salla-products-list {
  grid-column: 1 / -1; grid-row: 2;
  display: block;
  margin-top: 36px;
}
section.stationary-products-background .s-products-list-wrapper {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 20px !important;
}
section.stationary-products-background .s-infinite-scroll-status { display: none !important; }

/* tablet + mobile: horizontal scroll (Figma mobile), View all centered under the list */
@media (max-width: 1023.98px) {
  section.stationary-products-background > .container { overflow: visible !important; }
  section.stationary-products-background .s-products-list-wrapper {
    display: flex !important;
    gap: 16px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  section.stationary-products-background .s-products-list-wrapper::-webkit-scrollbar { display: none; }
  section.stationary-products-background .s-products-list-wrapper > * {
    flex: 0 0 min(273px, 70vw) !important;
    max-width: 280px;
    scroll-snap-align: start;
  }
  section.stationary-products-background salla-products-list { margin-top: 28px; }
  section.stationary-products-background > .container > div:has(> .s-block__display-all) {
    grid-column: 1 / -1; grid-row: 3;
    justify-self: center;
    margin-top: 28px;
  }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  section.stationary-products-background .s-products-list-wrapper > * { flex-basis: 300px !important; max-width: 300px; }
}
@media (max-width: 767.98px) {
  section.stationary-products-background .saji-block-titles .s-block__title > p { font-size: 11px !important; line-height: 16.5px !important; margin-bottom: 8px !important; }
  section.stationary-products-background .saji-block-titles .s-block__title > h2 { font-size: clamp(28px, 8.46vw, 34px) !important; line-height: 1.05 !important; }
}

/* out of stock: "Notify me" message after subscribing */
:is(custom-salla-product-card, salla-product-card).product-entry .s-product-availability-subscribed {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 8px 12px;
  border: 1.25px solid rgba(37, 62, 111, .25);
  color: var(--op-royal); font-size: 12.5px; text-align: center;
}
:is(custom-salla-product-card, salla-product-card).product-entry .s-product-availability-subs-icon svg { width: 16px; height: 16px; fill: currentColor; }



/* =====================================================================
   THE OP — Products: section + product card (CSS only)
   Figma: 75:1125 New Check-Ins (desktop) · mobile = horizontal scroll
   - CARD: every Salla product card in the store (home, categories, search…)
   - SECTION: Saji "products with background" sections (.stationary-products-background)
   Same elements and data as Saji — only look and positions change.
   ===================================================================== */

/* =========================== PRODUCT CARD =========================== */
:is(custom-salla-product-card, salla-product-card).product-entry {
  --op-navy: #1e2042;
  --op-royal: #253e6f;
  --op-cocoa: #483a2f;
  --op-bluemist: #dce3ed;
  --product-background: transparent;
  --product-color: #1e2042;
  --product-subtitle-color: #483a2f;
  --product-price-color: #1e2042;
  --product-btns-color: #1e2042;
  --product-btns-bg: transparent;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  min-width: 0 !important;
}
html:not([lang="ar"]) :is(custom-salla-product-card, salla-product-card).product-entry *:not(i):not([class*="sicon"]) {
  font-family: 'DM Sans', sans-serif !important;
  font-variation-settings: 'opsz' 14;
}

/* image: full width, height auto (no fixed ratio) */
:is(custom-salla-product-card, salla-product-card).product-entry .product-entry__image {
  aspect-ratio: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  background: var(--op-bluemist) !important;
}
:is(custom-salla-product-card, salla-product-card).product-entry .card-slide-data,
:is(custom-salla-product-card, salla-product-card).product-entry .card-slide-images {
  height: auto !important;
}
:is(custom-salla-product-card, salla-product-card).product-entry .card-slide-images img,
:is(custom-salla-product-card, salla-product-card).product-entry img.card-slide-first {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  background: var(--op-bluemist) !important;
}

/* badge — top 16 / start 12, white 90% + blur */
:is(custom-salla-product-card, salla-product-card).product-entry .promotion-badge {
  top: 16px !important;
  left: auto !important;
  right: auto !important;
  inset-inline-start: 12px !important;
  max-width: calc(100% - 80px) !important;
  height: auto !important;
  padding: 4px 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, .9) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--op-navy) !important;
  font-size: 9.92px !important;
  line-height: 14.88px !important;
  font-weight: 500 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: none !important;
}

/* wishlist — 44 circle, top 12 / end 12 */
:is(custom-salla-product-card, salla-product-card).product-entry .product-entry__image .product_buttons {
  position: absolute !important;
  top: 12px !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  inset-inline-end: 12px !important;
  width: auto !important;
  padding: 0 !important;
  opacity: 1 !important;
  transform: none !important;
  z-index: 10;
}
:is(custom-salla-product-card, salla-product-card).product-entry .btn--wishlist,
:is(custom-salla-product-card, salla-product-card).product-entry .btn--wishlist button {
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
}
:is(custom-salla-product-card, salla-product-card).product-entry .btn--wishlist button {
  display: grid !important;
  place-items: center;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, .85) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--op-navy) !important;
  box-shadow: none !important;
  transform: none !important;
  opacity: 1 !important;
}
:is(custom-salla-product-card, salla-product-card).product-entry .btn--wishlist i { font-size: 17px !important; line-height: 1 !important; }

/* body */
:is(custom-salla-product-card, salla-product-card).product-entry form.product-form {
  background: transparent !important;
  padding: 0 !important;
}
:is(custom-salla-product-card, salla-product-card).product-entry form.product-form .product-form__body {
  padding: 16px 0 0 !important;
  text-align: start !important;
  background: transparent !important;
}
:is(custom-salla-product-card, salla-product-card).product-entry form.product-form .product-entry__content {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}
:is(custom-salla-product-card, salla-product-card).product-entry form.product-form .text-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
/* subtitle → small label above the title (Figma "Room 01") */
:is(custom-salla-product-card, salla-product-card).product-entry form.product-form .product-entry__subtitle {
  order: -1;
  margin: 0 !important;
  font-size: 11.52px !important;
  line-height: 17.28px !important;
  font-weight: 500 !important;
  letter-spacing: .24em !important;
  text-transform: uppercase;
  color: var(--op-cocoa) !important;
}
/* title — Cormorant 24 */
:is(custom-salla-product-card, salla-product-card).product-entry form.product-form .product-entry__title {
  margin: 0 !important;
  font-size: 24px !important;
  line-height: 25.2px !important;
  font-weight: 500 !important;
  letter-spacing: -.01em !important;
  color: var(--op-navy) !important;
}
html:not([lang="ar"]) :is(custom-salla-product-card, salla-product-card).product-entry form.product-form a.product-entry__title.product-entry__title {
  font-family: 'CormorantGaramond', 'Cormorant Garamond', serif !important;
}

/* options — label + chips side by side */
:is(custom-salla-product-card, salla-product-card).product-entry .product-options { margin-top: 12px !important; }
:is(custom-salla-product-card, salla-product-card).product-entry .s-product-options-option-container { margin: 0 0 10px !important; padding: 0 !important; border: 0 !important; }
:is(custom-salla-product-card, salla-product-card).product-entry .s-product-options-option { margin: 0 !important; padding: 0 !important; }
:is(custom-salla-product-card, salla-product-card).product-entry .s-product-options-option-label {
  display: flex !important;
  align-items: baseline;
  gap: 6px;
  margin: 0 0 8px !important;
  padding: 0 !important;
}
:is(custom-salla-product-card, salla-product-card).product-entry .s-product-options-option-label b {
  font-size: 11px !important;
  line-height: 16px !important;
  font-weight: 500 !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(30, 32, 66, .7) !important;
}
:is(custom-salla-product-card, salla-product-card).product-entry .s-product-options-option-label b span { color: var(--op-cocoa); }
:is(custom-salla-product-card, salla-product-card).product-entry .s-product-options-option-label small { display: none !important; }
:is(custom-salla-product-card, salla-product-card).product-entry .s-product-options-grid-mode {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
}
:is(custom-salla-product-card, salla-product-card).product-entry .s-product-options-grid-mode > label {
  position: relative;
  display: inline-flex !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  cursor: pointer;
}
:is(custom-salla-product-card, salla-product-card).product-entry .s-product-options-grid-mode > label > input {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  opacity: 0 !important;
  cursor: pointer;
}
:is(custom-salla-product-card, salla-product-card).product-entry .product-options .s-product-options-grid-mode .s-product-options-grid-mode-span {
  display: inline-flex !important;
  align-items: center;
  min-height: 28px;
  margin: 0 !important;
  padding: 4px 10px !important;
  border: 1px solid rgba(30, 32, 66, .2) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--op-navy) !important;
  font-size: 12px !important;
  line-height: 16px !important;
  font-weight: 400 !important;
  white-space: normal !important;
  text-align: start !important;
  max-width: 100%;
  overflow-wrap: anywhere;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
:is(custom-salla-product-card, salla-product-card).product-entry .product-options .s-product-options-grid-mode > label > input[type="radio"]:checked + .s-product-options-grid-mode-span,
:is(custom-salla-product-card, salla-product-card).product-entry .product-options .s-product-options-grid-mode > label > input[type="radio"]:checked + div {
  background: var(--op-navy) !important;
  border-color: var(--op-navy) !important;
  color: #fff !important;
}
:is(custom-salla-product-card, salla-product-card).product-entry .s-product-options-grid-mode > label > input:focus-visible + .s-product-options-grid-mode-span {
  outline: 2px solid var(--op-royal);
  outline-offset: 2px;
}

/* price — 14 medium navy */
:is(custom-salla-product-card, salla-product-card).product-entry form.product-form .price-wrapper { margin-top: 12px !important; }
:is(custom-salla-product-card, salla-product-card).product-entry form.product-form .product-entry__price {
  align-items: flex-start !important;
  margin: 0 !important;
}
:is(custom-salla-product-card, salla-product-card).product-entry form.product-form .product-entry__price .total-price,
:is(custom-salla-product-card, salla-product-card).product-entry form.product-form .product-entry__price .sale-price {
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 500 !important;
  color: var(--op-navy) !important;
}
:is(custom-salla-product-card, salla-product-card).product-entry form.product-form .product-entry__price .before-price,
:is(custom-salla-product-card, salla-product-card).product-entry form.product-form .product-entry__price .regular-price {
  font-size: 12px !important;
  color: rgba(30, 32, 66, .5) !important;
}

/* add to cart / notify me — hidden on the card (not in the design) */
:is(custom-salla-product-card, salla-product-card).product-entry form.product-form > div:has(salla-add-product-button, .btn--add-to-cart, salla-product-availability),
:is(custom-salla-product-card, salla-product-card).product-entry salla-add-product-button,
:is(custom-salla-product-card, salla-product-card).product-entry salla-product-availability {
  display: none !important;
}
:is(custom-salla-product-card, salla-product-card).product-entry .btn--add-to-cart.saji-pc-btn-theme button.s-button-element,
:is(custom-salla-product-card, salla-product-card).product-entry .btn--add-to-cart button.s-button-element,
:is(custom-salla-product-card, salla-product-card).product-entry form.product-form salla-product-availability button.s-button-element {
  width: 100% !important;
  min-height: 44px !important;
  height: auto !important;
  padding: 8px 16px !important;
  border: 1.25px solid var(--op-royal) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--op-royal) !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  transition: background-color .25s ease, color .25s ease !important;
}
:is(custom-salla-product-card, salla-product-card).product-entry .btn--add-to-cart .s-button-text,
:is(custom-salla-product-card, salla-product-card).product-entry .btn--add-to-cart .s-button-text > span,
:is(custom-salla-product-card, salla-product-card).product-entry form.product-form salla-product-availability button.s-button-element,
:is(custom-salla-product-card, salla-product-card).product-entry form.product-form salla-product-availability .s-button-text {
  display: inline-flex !important;
  align-items: center;
  justify-content: center !important;
  gap: 8px !important;
  font-size: 12.48px !important;
  line-height: 18.72px !important;
  font-weight: 500 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase;
  color: inherit !important;
}
:is(custom-salla-product-card, salla-product-card).product-entry .btn--add-to-cart .s-button-text i { font-size: 14px !important; }

@media (hover: hover) {
  :is(custom-salla-product-card, salla-product-card).product-entry .btn--add-to-cart button.s-button-element:hover,
  :is(custom-salla-product-card, salla-product-card).product-entry form.product-form salla-product-availability button.s-button-element:hover {
    background: var(--op-navy) !important;
    border-color: var(--op-navy) !important;
    color: #fff !important;
  }
  :is(custom-salla-product-card, salla-product-card).product-entry .s-product-options-grid-mode > label:hover .s-product-options-grid-mode-span { border-color: var(--op-navy) !important; }
  :is(custom-salla-product-card, salla-product-card).product-entry .btn--wishlist button:hover { background: #fff !important; }
}

/* Arabic */
html[lang="ar"] :is(custom-salla-product-card, salla-product-card).product-entry .promotion-badge,
html[lang="ar"] :is(custom-salla-product-card, salla-product-card).product-entry form.product-form .product-entry__subtitle,
html[lang="ar"] :is(custom-salla-product-card, salla-product-card).product-entry .s-product-options-option-label b,
html[lang="ar"] :is(custom-salla-product-card, salla-product-card).product-entry .btn--add-to-cart .s-button-text > span {
  letter-spacing: 0 !important;
  text-transform: none;
}
html[lang="ar"] :is(custom-salla-product-card, salla-product-card).product-entry form.product-form .product-entry__title {
  font-size: 18px !important;
  line-height: 1.5 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}
html[lang="ar"] :is(custom-salla-product-card, salla-product-card).product-entry .promotion-badge { font-size: 11px !important; }
html[lang="ar"] :is(custom-salla-product-card, salla-product-card).product-entry form.product-form .product-entry__subtitle { font-size: 12.5px !important; }
html[lang="ar"] :is(custom-salla-product-card, salla-product-card).product-entry .btn--add-to-cart .s-button-text > span { font-size: 13.5px !important; }

/* mobile card */
@media (max-width: 767.98px) {
  :is(custom-salla-product-card, salla-product-card).product-entry .product-entry__image .product_buttons { top: 8px !important; inset-inline-end: 8px !important; }
  :is(custom-salla-product-card, salla-product-card).product-entry .btn--wishlist,
  :is(custom-salla-product-card, salla-product-card).product-entry .btn--wishlist button { width: 36px !important; height: 36px !important; }
  :is(custom-salla-product-card, salla-product-card).product-entry .btn--wishlist i { font-size: 15px !important; }
  :is(custom-salla-product-card, salla-product-card).product-entry .promotion-badge { top: 10px !important; inset-inline-start: 8px !important; max-width: calc(100% - 56px) !important; }
  :is(custom-salla-product-card, salla-product-card).product-entry form.product-form .product-form__body { padding-top: 12px !important; }
  :is(custom-salla-product-card, salla-product-card).product-entry form.product-form .product-entry__title { font-size: 20px !important; line-height: 22px !important; }
  html[lang="ar"] :is(custom-salla-product-card, salla-product-card).product-entry form.product-form .product-entry__title { font-size: 16px !important; line-height: 1.5 !important; }
  :is(custom-salla-product-card, salla-product-card).product-entry form.product-form .product-entry__subtitle { font-size: 10.5px !important; letter-spacing: .2em !important; }
  :is(custom-salla-product-card, salla-product-card).product-entry .btn--add-to-cart button.s-button-element { min-height: 40px !important; padding: 6px 10px !important; }
  :is(custom-salla-product-card, salla-product-card).product-entry .btn--add-to-cart .s-button-text > span { font-size: 11.5px !important; letter-spacing: .12em !important; }
}

/* ============================== SECTION ============================== */
section.stationary-products-background {
  padding-top: clamp(36px, 2.81vw, 54px) !important;        /* 54 @1920 */
  padding-bottom: clamp(48px, 4.64vw, 89px) !important;     /* 89 @1920 */
}
section.stationary-products-background > .container {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: 24px;
}
/* title block: eyebrow (subtitle) above the H2, start-aligned */
section.stationary-products-background .saji-block-titles {
  grid-column: 1; grid-row: 1;
  align-items: flex-start !important;
  margin: 0 !important;
  text-align: start !important;
}
section.stationary-products-background .saji-block-titles .s-block__title {
  flex-direction: column-reverse !important;
  align-items: flex-start !important;
  text-align: start !important;
}
section.stationary-products-background .saji-block-titles .s-block__title > p {
  margin: 0 0 12px !important;
  font-size: 11.52px !important;
  line-height: 17.28px !important;
  font-weight: 500 !important;
  letter-spacing: .24em !important;
  text-transform: uppercase;
  color: #483a2f !important;
  text-align: start !important;
}
section.stationary-products-background .saji-block-titles .s-block__title > h2 {
  margin: 0 !important;
  font-size: clamp(34px, 3.125vw, 60px) !important;          /* 60 / 63 */
  line-height: 1.05 !important;
  font-weight: 500 !important;
  letter-spacing: -.01em !important;
  color: #1e2042 !important;
  text-align: start !important;
}
html:not([lang="ar"]) section.stationary-products-background .saji-block-titles .s-block__title > h2.saji-default-title {
  font-family: 'CormorantGaramond', 'Cormorant Garamond', serif !important;
}
html:not([lang="ar"]) section.stationary-products-background .saji-block-titles .s-block__title > p { font-family: 'DM Sans', sans-serif !important; }
section.stationary-products-background .saji-block-titles .s-block__title > h2::before,
section.stationary-products-background .saji-block-titles .s-block__title > h2::after { display: none !important; }
html[lang="ar"] section.stationary-products-background .saji-block-titles .s-block__title > p { letter-spacing: 0 !important; font-size: 13px !important; }
html[lang="ar"] section.stationary-products-background .saji-block-titles .s-block__title > h2 { font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: 0 !important; }

/* "View all" → top end, thin underline link */
section.stationary-products-background > .container > div:has(> .s-block__display-all) {
  grid-column: 2; grid-row: 1;
  align-self: end;
  padding: 0 !important;
  text-align: end;
}
section.stationary-products-background .s-block__display-all.btn-epic,
section.stationary-products-background .s-block__display-all {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  padding: 0 0 4px !important;
  border: 0 !important;
  border-bottom: 1.25px solid #253e6f !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #253e6f !important;
  font-size: 12px !important;
  line-height: 16px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase;
  box-shadow: none !important;
  animation: none !important;
  overflow: visible !important;
}
section.stationary-products-background .s-block__display-all::after { display: none !important; }
section.stationary-products-background .s-block__display-all i { margin: 0 !important; font-size: 13px; }
html:not([lang="ar"]) section.stationary-products-background .s-block__display-all { font-family: 'DM Sans', sans-serif !important; }
html[lang="ar"] section.stationary-products-background .s-block__display-all { letter-spacing: 0 !important; font-size: 13px !important; }
@media (hover: hover) {
  section.stationary-products-background .s-block__display-all:hover { color: #1e2042 !important; border-color: #1e2042 !important; }
}

/* products: 4 columns, gap 20 */
section.stationary-products-background salla-products-list {
  grid-column: 1 / -1; grid-row: 2;
  display: block;
  margin-top: 36px;
}
section.stationary-products-background .s-products-list-wrapper {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 20px !important;
}
section.stationary-products-background .s-infinite-scroll-status { display: none !important; }

/* tablet + mobile: horizontal scroll (Figma mobile), View all centered under the list */
@media (max-width: 1023.98px) {
  section.stationary-products-background > .container { overflow: visible !important; }
  section.stationary-products-background .s-products-list-wrapper {
    display: flex !important;
    gap: 16px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  section.stationary-products-background .s-products-list-wrapper::-webkit-scrollbar { display: none; }
  section.stationary-products-background .s-products-list-wrapper > * {
    flex: 0 0 min(273px, 70vw) !important;
    max-width: 280px;
    scroll-snap-align: start;
  }
  section.stationary-products-background salla-products-list { margin-top: 28px; }
  section.stationary-products-background > .container > div:has(> .s-block__display-all) {
    grid-column: 1 / -1; grid-row: 3;
    justify-self: center;
    margin-top: 28px;
  }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  section.stationary-products-background .s-products-list-wrapper > * { flex-basis: 300px !important; max-width: 300px; }
}
@media (max-width: 767.98px) {
  section.stationary-products-background .saji-block-titles .s-block__title > p { font-size: 11px !important; line-height: 16.5px !important; margin-bottom: 8px !important; }
  section.stationary-products-background .saji-block-titles .s-block__title > h2 { font-size: clamp(28px, 7.46vw, 34px) !important; line-height: 1.05 !important; }
}

/* out of stock: "Notify me" message after subscribing */
:is(custom-salla-product-card, salla-product-card).product-entry .s-product-availability-subscribed {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 8px 12px;
  border: 1.25px solid rgba(37, 62, 111, .25);
  color: var(--op-royal); font-size: 12.5px; text-align: center;
}
:is(custom-salla-product-card, salla-product-card).product-entry .s-product-availability-subs-icon svg { width: 16px; height: 16px; fill: currentColor; }

/* ===================== SLIDER SECTION (Guest Favorites) =====================
   Same Saji section, but with <salla-products-slider> instead of a list.
   Figma 75:532 — linen bg, title start / arrows end, 3 cards (gap 24),
   mobile: swipe, ~1.2 cards, no arrows. Slider + data stay Salla's.        */
section.stationary-products-background:has(salla-products-slider) {
  background: #f2efe9 !important;
  padding-top: clamp(56px, 5.83vw, 112px) !important;
  padding-bottom: clamp(56px, 5.83vw, 112px) !important;
}
/* let the slider's own parts (arrows / track) sit in the section grid */
section.stationary-products-background:has(salla-products-slider) > .container > salla-products-slider,
section.stationary-products-background:has(salla-products-slider) salla-products-slider > salla-slider {
  display: contents !important;
}

/* arrows row → top end, next to the title */
section.stationary-products-background:has(salla-products-slider) .s-slider-block__title {
  grid-column: 2; grid-row: 1;
  align-self: end;
  display: flex !important;
  justify-content: flex-end;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
section.stationary-products-background:has(salla-products-slider) .s-slider-block__display-all { display: none !important; }
section.stationary-products-background:has(salla-products-slider) .s-slider-block__title-left { margin: 0 !important; }
section.stationary-products-background:has(salla-products-slider) .s-slider-block__title-left::before,
section.stationary-products-background:has(salla-products-slider) .s-slider-block__title-left::after { display: none !important; }
section.stationary-products-background:has(salla-products-slider) .s-slider-block__title-nav {
  position: static !important;
  transform: none !important;
  width: auto !important;
  margin: 0 !important;
  gap: 8px;
  pointer-events: auto !important;
}
section.stationary-products-background:has(salla-products-slider) .s-slider-block__title-nav > * { margin: 0 !important; }
section.stationary-products-background:has(salla-products-slider) .s-slider-nav-arrow:not(.swiper-button-lock) {
  position: static !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  border: 1.25px solid rgba(37, 62, 111, .25) !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #1e2042 !important;
  opacity: 1 !important;
  cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease, opacity .25s ease;
}
/* thin line arrow (Figma) instead of the chevron */
section.stationary-products-background:has(salla-products-slider) .s-slider-nav-arrow .s-slider-button-icon { display: none !important; }
section.stationary-products-background:has(salla-products-slider) .s-slider-nav-arrow::before {
  content: "";
  width: 17px; height: 17px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
section.stationary-products-background:has(salla-products-slider) .s-slider-next::before,
html[dir="rtl"] section.stationary-products-background:has(salla-products-slider) .s-slider-prev::before { transform: scaleX(-1); }
html[dir="rtl"] section.stationary-products-background:has(salla-products-slider) .s-slider-next::before { transform: none; }
section.stationary-products-background:has(salla-products-slider) .s-slider-nav-arrow.swiper-button-disabled { opacity: .35 !important; cursor: default; }
@media (hover: hover) {
  section.stationary-products-background:has(salla-products-slider) .s-slider-nav-arrow:not(.swiper-button-disabled):hover {
    background: #1e2042 !important;
    border-color: #1e2042 !important;
    color: #fff !important;
  }
}

/* track: full width under the title */
section.stationary-products-background:has(salla-products-slider) .s-slider-container {
  grid-column: 1 / -1; grid-row: 2;
  width: 100%;
  margin-top: clamp(28px, 1.95vw, 40px) !important;
}
/* 3 cards, gap 24 (the gap is padding on each slide, so Swiper's math stays right) */
section.stationary-products-background:has(salla-products-slider) .swiper-slide.s-products-slider-card {
  width: calc((100% + 24px) / 3) !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  padding-inline-end: 24px !important;
  box-sizing: border-box !important;
}

/* tablet: ~2.2 cards, swipe */
@media (max-width: 1023.98px) {
  section.stationary-products-background:has(salla-products-slider) .s-slider-block__title { display: none !important; }
  section.stationary-products-background:has(salla-products-slider) .swiper-slide.s-products-slider-card {
    width: calc((100% + 20px) / 2.2) !important;
    padding-inline-end: 20px !important;
  }
}
/* mobile: ~1.2 cards (Figma 313 / 354), swipe, no arrows */
@media (max-width: 767.98px) {
  section.stationary-products-background:has(salla-products-slider) .saji-block-titles .s-block__title > h2 { font-size: clamp(28px, 8.95vw, 36px) !important; }
  section.stationary-products-background:has(salla-products-slider) .swiper-slide.s-products-slider-card {
    width: calc(min(340px, 88.5%) + 20px) !important;
  }
}