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

/* ==========================================================================
   Relief — Homepage (Figma: refel / frame "relef")
   Theme: Selia. Sections are targeted by the custom CSS class set on each
   component in the editor (rlf-*), so nothing here leaks into other pages.
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  --rlf-font: 'Alexandria', var(--font-main), sans-serif;
  --rlf-page: #ebebeb;          /* page background */
  --rlf-ink: #7a4b52;           /* dark mauve: hero title, primary buttons */
  --rlf-plum: #9b6b93;          /* section titles */
  --rlf-plum-dark: #6f4a68;     /* luxury banner title / button */
  --rlf-rose: #dbb2ae;          /* add-to-cart, accents */
  --rlf-rose-line: #e3c2be;     /* card borders */
  --rlf-blush: #efa3a0;         /* footer */
  --rlf-lilac: #e9d6e7;         /* top bar */
  --rlf-muted: #8c8c8c;         /* subtitles */
  --rlf-sale: #f25c5c;          /* discount badge */
  --rlf-price: #b0262e;         /* sale price */
  --rlf-radius-lg: 40px;
  --rlf-radius-md: 24px;
  --rlf-radius-sm: 16px;
  --rlf-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Base ---------- */
body.index { background: var(--rlf-page); }
/* Alexandria on every page of the store */
:root body { font-family: var(--rlf-font); }
:root body :is(h1, h2, h3, h4, h5, h6, p, a, span, button, li, label, input, select, textarea) { font-family: var(--rlf-font); }
body.index .app-inner,
body.index main { background: transparent; }

/* ---------- Top bar (injected by JS) ---------- */
.rlf-topbar {
  background: var(--rlf-lilac);
  color: #3d3d3d;
  font: 500 14px/1 var(--rlf-font);
}
.rlf-topbar__inner {
  display: flex;
  justify-content: center;
  gap: clamp(20px, 5vw, 72px);
  padding: 10px 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.rlf-topbar__inner::-webkit-scrollbar { display: none; }
.rlf-topbar__item { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.rlf-topbar__item svg { width: 16px; height: 16px; flex: none; }

/* ---------- Header: solid, sits above the hero (not over it) ---------- */
body.index.trans_header header.store-header { position: relative; }
body.index header.store-header .main-nav-container,
body.index header.store-header .inner {
  background: rgba(255, 255, 255, .72) !important;
  backdrop-filter: blur(10px);
  box-shadow: none;
}
body.index header.store-header :is(.main-menu > li > a, .main-menu > li > a span, .header-btn__icon, .sicon-search, .sicon-user, .sicon-shopping-bag) {
  color: #5b5b5b !important;
}
body.index header.store-header .main-menu > li > a { font-weight: 500; font-size: 15px; }
body.index header.store-header .main-menu > li:first-child > a,
body.index header.store-header .main-menu > li:first-child > a span { color: #d92d2d !important; }

/* ---------- Section heading (shared by every block title) ---------- */
body.index :is(.rlf-categories, .rlf-products, .s-block--testimonials) .home-block-title { margin-bottom: 40px; }
body.index :is(.square-links__title, .custom-products__title, .testimonials__title) {
  color: var(--rlf-plum) !important;
  font: 700 clamp(22px, 2vw, 29px)/1.4 var(--rlf-font) !important;
  letter-spacing: 0;
}
body.index :is(.square-links__subtitle, .custom-products__subtitle) {
  color: var(--rlf-muted) !important;
  font: 300 clamp(15px, 1.4vw, 21px)/1.6 var(--rlf-font) !important;
  margin-top: 2px !important;
}
body.index :is(.rlf-categories, .rlf-products, .s-block--testimonials) .enhanced-title-border {
  display: block;
  width: 68px;
  height: 3px;
  margin: 14px auto 0;
  border-radius: 3px;
  background: var(--rlf-rose);
}
body.index :is(.rlf-categories, .rlf-products, .s-block--testimonials) .enhanced-title-border::before,
body.index :is(.rlf-categories, .rlf-products, .s-block--testimonials) .enhanced-title-border::after { display: none; }

/* ---------- Hero ---------- */
body.index .rlf-hero {
  margin: 24px clamp(16px, 2.1vw, 40px) 0;
  border-radius: var(--rlf-radius-lg);
  overflow: hidden;
  isolation: isolate;
}
.rlf-hero .advanced-slider__slide::before,
.rlf-hero .advanced-slider__slide::after,
.rlf-hero .advanced-slider__caption::before { display: none !important; } /* theme overlay */
.rlf-hero .advanced-slider__caption__inner__content {
  max-width: 720px;
  text-align: right;
  margin-inline-start: 0;
}
.rlf-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  margin-bottom: 22px;
  border-radius: 999px;
  background: linear-gradient(270deg, rgba(220, 150, 150, .9), rgba(220, 150, 150, 0));
  color: #fff;
  font: 500 18px/1.2 var(--rlf-font);
}
.rlf-hero__badge::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #4cc35d;
  box-shadow: 0 0 0 3px rgba(76, 195, 93, .25);
}
.rlf-hero .advanced-slider__caption__inner__content__heading {
  color: var(--rlf-ink) !important;
  font: 900 clamp(34px, 3.7vw, 71px)/1.1 var(--rlf-font) !important;
  text-shadow: none !important;
}
.rlf-hero .rlf-hero__accent {
  display: block;
  color: #fff;
  font-weight: 800;
  font-size: .78em;
  margin-top: 6px;
}
.rlf-hero .advanced-slider__caption__inner__content__text {
  color: #fff !important;
  font: 400 clamp(13px, .9vw, 16px)/1.7 var(--rlf-font) !important;
  margin: 22px 0 28px !important;
  max-width: 460px;
}
.rlf-hero .advanced-slider__caption__inner__content__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 190px;
  height: 52px;
  padding: 0 28px;
  border-radius: 999px !important;
  font: 500 18px/1 var(--rlf-font) !important;
  transition: transform .3s var(--rlf-ease), box-shadow .3s var(--rlf-ease);
}
.rlf-hero .advanced-slider__caption__inner__content__button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(122, 75, 82, .28);
}
/* soft decorative arcs from the design */
.rlf-hero::before,
.rlf-hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  pointer-events: none;
}
.rlf-hero::before {
  width: 62%; aspect-ratio: 2.4;
  top: -22%; inset-inline-start: -6%;
  background: rgba(255, 255, 255, .08);
}
.rlf-hero::after {
  width: 34%; aspect-ratio: 1.6;
  bottom: -26%; inset-inline-start: -4%;
  background: rgba(190, 110, 105, .25);
}
.rlf-hero .advanced-slider__caption { z-index: 2; }

/* ---------- Features strip ---------- */
body.index .rlf-features { margin-top: 28px; padding-block: 0; }
.rlf-features .enhanced-features__grid { gap: 14px; }
.rlf-features .s-block--enhanced-features__item {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 86px;
  padding: 12px 24px !important;
  border: 2px solid var(--rlf-rose-line) !important;
  border-radius: var(--rlf-radius-md) !important;
  background: rgba(255, 255, 255, .35) !important;
  box-shadow: none !important;
}
.rlf-features .s-block--enhanced-features__item > .absolute { display: none; } /* theme hover lines */
.rlf-features .feature-icon { order: 2; margin: 0 !important; width: 48px; height: 48px; flex: none; background: none !important; }
.rlf-features .feature-icon img { width: 48px; height: 48px; max-height: none; object-fit: contain; }
.rlf-features .s-block--enhanced-features__item h2 {
  order: 1;
  margin: 0 !important;
  color: #4a4a4a !important;
  font: 500 16px/1.4 var(--rlf-font) !important;
}
.rlf-features .s-block--enhanced-features__item p:empty { display: none; }

/* Features marquee (built in JS; replaces the static grid) */
.rlf-features--marquee .enhanced-features__grid { display: none !important; }
.rlf-features--marquee .rlf-marquee ~ * { display: none !important; }
.rlf-features--marquee :has(> .rlf-marquee) { overflow: hidden !important; scrollbar-width: none; } /* theme scroll-progress bar */
.rlf-marquee {
  overflow: hidden;
  width: 100%; min-width: 0; max-width: 100%; flex: 1 1 100%;
  direction: ltr;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.rlf-marquee__track { display: flex; width: max-content; animation: rlf-marquee 45s linear infinite; }
.rlf-marquee:hover .rlf-marquee__track { animation-play-state: paused; }
.rlf-marquee__group { display: flex; gap: 20px; padding-inline-end: 20px; }
.rlf-marquee__item {
  direction: rtl;
  display: flex; align-items: center; justify-content: center; gap: 16px;
  flex: none; width: 330px; min-height: 100px; padding: 12px 24px;
  border: 2px solid var(--rlf-rose-line); border-radius: 30px;
  background: rgba(255, 255, 255, .35);
  color: #4a4a4a; font: 500 16px/1.4 var(--rlf-font);
}
.rlf-marquee__item img { width: 48px; height: 48px; object-fit: contain; flex: none; }
@keyframes rlf-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 767px) {
  .rlf-marquee__item { width: 240px; min-height: 72px; padding: 10px 14px; gap: 10px; border-radius: 20px; font-size: 13px; }
  .rlf-marquee__item img { width: 34px; height: 34px; }
  .rlf-marquee__track { animation-duration: 35s; }
}
/* The infinite loop is a design requirement, so it runs even when the OS asks for reduced motion (it is slow and pauses on hover). */

/* ---------- Categories (3 × 2 image cards) ---------- */
body.index .rlf-categories { padding-top: 64px; }
.rlf-categories .square-links__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
}
.rlf-categories .square-links__item a { position: relative; display: block; }
.rlf-categories .square-links__image-wrap,
.rlf-categories .square-links__image-wrap img {
  border-radius: var(--rlf-radius-md) !important;
  aspect-ratio: 1 / 1 !important;
}
.rlf-categories .square-links__image-wrap img { transition: transform .6s var(--rlf-ease) !important; }
.rlf-categories .square-links__item:hover img { transform: scale(1.05); }
.rlf-categories .square-links__item-title {
  position: absolute;
  top: clamp(14px, 2vw, 28px);
  right: clamp(14px, 2vw, 32px);
  left: auto;
  width: auto;
  text-align: right;
  margin: 0 !important;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff !important;
  font: 500 clamp(16px, 1.5vw, 26px)/1.2 var(--rlf-font) !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .12);
}
.rlf-categories .square-links__item-title::before {
  content: "";
  width: 1em; height: 1em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Ccircle cx='12' cy='6.5' r='4.2'/%3E%3Ccircle cx='12' cy='17.5' r='4.2'/%3E%3Ccircle cx='6.5' cy='12' r='4.2'/%3E%3Ccircle cx='17.5' cy='12' r='4.2'/%3E%3Ccircle cx='12' cy='12' r='2.2' fill='%23e8b7b2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.rlf-categories .square-links__item a::after {
  content: "→";
  position: absolute;
  bottom: clamp(14px, 2vw, 26px);
  inset-inline-start: clamp(14px, 2vw, 26px);
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 1.5px solid rgba(232, 160, 155, .9);
  border-radius: 50%;
  background: rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  color: #e8a09b;
  font-size: 22px;
  transition: background .3s var(--rlf-ease), color .3s var(--rlf-ease);
}
.rlf-categories .square-links__item:hover a::after { background: #e8a09b; color: #fff; }
.rlf-categories .square-links__item-subtitle:empty { display: none; }

/* ---------- Product sections + card (card rules apply site-wide: home, categories, search, related products) ---------- */
body.index .rlf-products { padding-top: 64px; }
custom-salla-product-card.product-card {
  background: #fafafa !important;
  border: 1px solid var(--rlf-rose-line) !important;
  border-radius: var(--rlf-radius-sm) !important;
  padding: 8px 8px 14px;
  overflow: hidden;
  transition: transform .35s var(--rlf-ease), box-shadow .35s var(--rlf-ease);
}
custom-salla-product-card.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(122, 75, 82, .10);
}
custom-salla-product-card.product-card .product-card__image {
  background: #fff;
  border-radius: 12px !important;
  overflow: hidden;
}
custom-salla-product-card.product-card .product-card__promotion {
  inset-inline-start: 10px !important;
  inset-inline-end: auto !important;
  top: auto !important;
  bottom: 10px;
  border-radius: 999px !important;
  background: #fde8e6 !important;
  color: #2b2b2b !important;
  font: 600 12px/1 var(--rlf-font) !important;
  padding: 7px 12px !important;
}
custom-salla-product-card.product-card .product-card__promotion::before { content: "🔥 "; }
custom-salla-product-card.product-card .product-card__content { padding: 14px 6px 0 !important; text-align: right; }
custom-salla-product-card.product-card .product-card__title,
custom-salla-product-card.product-card .product-card__title a {
  color: #222 !important;
  font: 600 17px/1.5 var(--rlf-font) !important;
}
custom-salla-product-card.product-card .product-card__subtitle { font-size: 12px; color: var(--rlf-muted) !important; }
custom-salla-product-card.product-card .product-card__price { justify-content: flex-start; gap: 10px; margin-top: 8px; }
custom-salla-product-card.product-card .total-price { font: 700 17px/1 var(--rlf-font) !important; }
custom-salla-product-card.product-card .price_is_on_sale .total-price { color: var(--rlf-price) !important; }
custom-salla-product-card.product-card .before-price { font: 600 15px/1 var(--rlf-font) !important; color: #8a8a8a !important; }
custom-salla-product-card.product-card .product-card__enhanced-mini-cart-divider { display: none; }
custom-salla-product-card.product-card .product-card__enhanced-mini-cart { margin-top: 14px; }
custom-salla-product-card.product-card .product-card__enhanced-mini-cart .s-button-element,
custom-salla-product-card.product-card .product-card__addToCart .s-button-element {
  height: 42px;
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--rlf-rose) !important;
  color: #fff !important;
  font: 600 15px/1 var(--rlf-font) !important;
  transition: background .25s var(--rlf-ease);
}
custom-salla-product-card.product-card .product-card__enhanced-mini-cart .s-button-element:hover,
custom-salla-product-card.product-card .product-card__addToCart .s-button-element:hover { background: #c99a95 !important; }
custom-salla-product-card.product-card .product-card__enhanced-mini-cart__btn--inner { justify-content: center; gap: 8px; color: #fff; }
custom-salla-product-card.product-card .product-card__enhanced-mini-cart__btn--inner .enhanced-label { margin: 0 !important; color: #fff; }

/* ---------- Swim offer with countdown ---------- */
body.index .rlf-swim-offer { padding-top: 56px; }
.rlf-swim-offer .promo-countdown__panel {
  border-radius: var(--rlf-radius-sm) !important;
  border: 1px solid var(--rlf-rose-line);
  background: #f3ebe4;
}
.rlf-swim-offer .promo-countdown__bg-image { object-position: left center; }
.rlf-swim-offer .promo-countdown__overlay {
  background: transparent !important;
  padding: clamp(48px, 7vw, 120px) clamp(20px, 5vw, 60px) !important;
}
.rlf-swim-offer .promo-countdown__content {
  margin-inline-start: 0 !important;
  margin-inline-end: auto !important;
  max-width: 480px !important;
  align-items: flex-start !important;
  text-align: right !important;
}
.rlf-swim-offer .promo-countdown__description {
  order: -1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px !important;
  padding: 6px 16px;
  border-radius: 999px;
  background: linear-gradient(270deg, rgba(240, 170, 170, .85), rgba(240, 170, 170, 0));
  color: #5a3a3e !important;
  font: 500 15px/1.2 var(--rlf-font) !important;
}
.rlf-swim-offer .promo-countdown__description::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #4cc35d;
}
.rlf-swim-offer .promo-countdown__title,
.rlf-swim-offer .promo-countdown__title span {
  color: var(--rlf-ink) !important;
  font: 600 clamp(26px, 2.4vw, 40px)/1.35 var(--rlf-font) !important;
  text-align: right;
}
.rlf-swim-offer .s-count-down-list { flex-direction: row-reverse; justify-content: flex-end !important; gap: 10px; margin-top: 18px; }
.rlf-swim-offer .s-count-down-item {
  width: 78px !important; height: 78px !important;
  border-radius: 50% !important;
  border: 0 !important;
  background: rgba(233, 214, 206, .85) !important;
  color: var(--rlf-ink) !important;
}
.rlf-swim-offer .s-count-down-item * { color: var(--rlf-ink) !important; font-family: var(--rlf-font) !important; }
.rlf-swim-offer .s-count-down-item-value { font-weight: 700 !important; font-size: 30px !important; }
.rlf-swim-offer .promo-countdown__button {
  width: auto !important;
  min-width: 190px;
  margin-top: 22px !important;
  padding: 12px 34px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--rlf-ink) !important;
  color: #fff !important;
  font: 500 18px/1.2 var(--rlf-font) !important;
  text-align: center;
}

/* ---------- Wide banners (luxury / kids) ---------- */
body.index .rlf-banner {
  width: min(1420px, calc(100% - 32px)); /* same inner width as the product rows (1440 container − 2×10px padding) */
  margin: 56px auto 0 !important;
  padding: 0 !important;
}
.rlf-banner .advanced-slider__slide { border-radius: var(--rlf-radius-sm); overflow: hidden; }
.rlf-banner .advanced-slider__slide::before,
.rlf-banner .advanced-slider__slide::after,
.rlf-banner .advanced-slider__caption::before { display: none !important; }
.rlf-banner .advanced-slider__caption__inner__content { text-align: right; max-width: 640px; margin-inline-start: 0; }
.rlf-banner .advanced-slider__caption__inner__content__heading {
  font: 500 clamp(26px, 2.6vw, 44px)/1.3 var(--rlf-font) !important;
  text-shadow: none !important;
}
.rlf-banner--luxury .advanced-slider__caption__inner__content__heading { color: var(--rlf-plum-dark) !important; }
.rlf-banner--kids .advanced-slider__caption__inner__content__heading { color: #fff !important; }
.rlf-banner .advanced-slider__caption__inner__content__text { color: #fff !important; font: 400 16px/1.7 var(--rlf-font) !important; }
.rlf-banner .advanced-slider__caption__inner__content__button {
  min-width: 190px;
  height: 46px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px !important;
  font: 500 18px/1 var(--rlf-font) !important;
}

/* ---------- Testimonials ---------- */
body.index .s-block--testimonials { padding-top: 64px; }
body.index .s-block--testimonials .testimonials__review-card {
  background: #e6e6e6 !important;
  border: 1px solid #ececec;
  border-radius: var(--rlf-radius-sm) !important;
  box-shadow: none !important;
}

/* ---------- Footer: blush with top arc ---------- */
:root body footer.store-footer {
  position: relative;
  margin-top: 120px;
  background: var(--rlf-blush) !important;
  color: #4a3a3a;
}
:root body footer.store-footer::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: -90px;
  height: 180px;
  background: var(--rlf-blush);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  z-index: 0;
}
:root body footer.store-footer > * { position: relative; z-index: 1; }
:root body footer.store-footer :is(h3, h4, .footer-title) { color: #3d3d3d !important; font-weight: 700; }
:root body footer.store-footer :is(a, p, li, span) { color: #4a3a3a !important; }
:root body footer.store-footer :is(.store-footer__inner, [class*="bg-"]:not(img)) { background-color: transparent !important; }

/* ==========================================================================
   v2 — closer match to Figma
   ========================================================================== */

/* ---------- Header: links either side of the logo (desktop) ---------- */
.rlf-nav, .rlf-nav-tools { display: none; }
@media (min-width: 1024px) {
  header.store-header .main-menu-row { display: none !important; }
  header.store-header .header__main-start > :not(.rlf-nav) { display: none !important; }
  header.store-header .header__main-end .header__user-menu { display: none !important; }
  header.store-header .header__main-row { min-height: 84px; }
  header.store-header .header__main-start,
  header.store-header .header__main-end { width: auto; flex: 1; }
  .rlf-nav { display: flex; align-items: center; gap: clamp(24px, 2.6vw, 48px); }
  .rlf-nav__link {
    color: #6b6157;
    font: 500 16px/1 var(--rlf-font);
    transition: color .2s var(--rlf-ease);
  }
  .rlf-nav__link:hover { color: var(--rlf-ink); }
  .rlf-nav__link--hot { color: #e0342f; font-weight: 700; }
  .rlf-nav-tools { display: flex; align-items: center; gap: 22px; margin-inline-end: 22px; }
  .rlf-nav-divider { width: 1px; height: 30px; background: #cfc6be; }
  .rlf-icon-btn { display: grid; place-items: center; color: #6b6157; font-size: 19px; background: none; }
  .rlf-icon-btn .header-btn__icon { color: inherit !important; }
  header.store-header .s-cart-summary-wrapper { color: #6b6157; }
  /* theme forces white links on the transparent header */
  header.store-header .rlf-nav .rlf-nav__link,
  header.store-header .rlf-icon-btn,
  header.store-header .rlf-icon-btn i,
  header.store-header .s-cart-summary-wrapper i { color: #6b6157 !important; }
  header.store-header .rlf-nav .rlf-nav__link--hot { color: #e0342f !important; }
}

/* ---------- Brand mark (store logo tinted white) ---------- */
.rlf-logo-mark {
  display: inline-block;
  background: #fff;
  -webkit-mask: var(--rlf-logo) center / contain no-repeat;
  mask: var(--rlf-logo) center / contain no-repeat;
}
.rlf-hero__mark {
  position: absolute;
  z-index: 2;
  bottom: 7%;
  inset-inline-start: 9%;
  width: 17%;
  aspect-ratio: 2 / 1;
  opacity: .95;
  pointer-events: none;
}
.rlf-hero::after { width: 40%; bottom: -34%; inset-inline-start: 1%; background: rgba(205, 128, 120, .35); }
.rlf-banner__mark { display: block; width: 190px; height: 92px; margin: 0 0 14px auto; }
.rlf-logo-mark--inline { width: 3.4em; height: 1.4em; vertical-align: middle; }
.rlf-banner__sub { display: block; font-size: .82em; margin-top: 6px; }
.rlf-banner--luxury strong { font-weight: 800; }

/* ---------- Hero actions ---------- */
/* Both buttons share one size/rhythm; the theme adds a 32px top margin to the primary one. */
.rlf-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 4px; }
/* the theme lays a full-size slide link over the banner; keep both buttons above it so they get the click */
.rlf-hero .rlf-hero__actions { position: relative; z-index: 5; }
.rlf-hero__actions > a { margin: 0 !important; gap: 10px; min-width: 200px; height: 54px; padding: 0 30px; box-sizing: border-box; }
.rlf-hero__actions > a span { display: inline-block; font-size: 1.2em; line-height: 1; transform: translateY(-1px); transition: transform .3s var(--rlf-ease); }
.rlf-hero__actions > a:hover span { transform: translate(-4px, -1px); }
.rlf-hero__ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 190px;
  height: 52px;
  padding: 0 28px;
  border: 1.5px solid var(--rlf-ink);
  border-radius: 999px;
  color: #fff;
  font: 500 18px/1 var(--rlf-font);
  transition: background .3s var(--rlf-ease);
}
.rlf-hero__ghost:hover { background: rgba(122, 75, 82, .12); }

/* Hero sparkles (twinkling 4-point stars) */
.rlf-sparkles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.rlf-sparkles i {
  position: absolute; width: 18px; height: 18px; opacity: 0;
  background: #fff;
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
  animation: rlf-twinkle 3.2s ease-in-out infinite;
}
@keyframes rlf-twinkle { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 50% { opacity: .85; transform: scale(1) rotate(45deg); } }
@media (prefers-reduced-motion: reduce) { .rlf-sparkles i { animation: none; opacity: .6; } }

/* ---------- Swim offer heading ---------- */
.rlf-swim__brand { color: #e2aeb0; }

/* ---------- Product card details ---------- */
.rlf-card__discount {
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  left: auto;
  padding: 6px 10px;
  border-radius: 0 0 0 12px;
  background: var(--rlf-sale);
  color: #fff;
  font: 600 12px/1 var(--rlf-font);
  direction: ltr;
}
custom-salla-product-card.product-card .product-card__image { position: relative; }
.rlf-card__rating { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: #8c8c8c; font: 400 11px/1 var(--rlf-font); }
.rlf-stars-wrap { position: relative; display: inline-block; font-size: 12px; letter-spacing: 1px; line-height: 1; }
.rlf-stars { color: #ddd; }
.rlf-stars__fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--rlf-rate);
  overflow: hidden;
  white-space: nowrap;
  color: #f5b301;
}
.rlf-card__pay { display: flex; align-items: center; gap: 6px; margin-top: 10px; color: #777; font: 400 11px/1 var(--rlf-font); }
.rlf-card__pay-logos { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: #ededed; }
.rlf-card__pay-logos img { height: 14px; width: auto; }
.rlf-card__buy { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.rlf-card__buy > .product-card__enhanced-mini-cart,
.rlf-card__buy > .product-card__addToCart { flex: 1; margin: 0 !important; position: static !important; opacity: 1 !important; visibility: visible !important; transform: none !important; inset: auto !important; }
.rlf-card__buy salla-add-product-button, .rlf-card__buy .s-button-wrap, .rlf-card__buy .s-button-element { display: block; width: 100%; }
/* Theme gives the button wrapper a dark backdrop with square corners; it shows behind the rounded button. */
custom-salla-product-card.product-card .s-button-wrap { background: transparent !important; border-radius: 12px; }
.rlf-qty {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  background: #ececec;
  color: #8a7a6a;
  font: 600 16px/1 var(--rlf-font);
  user-select: none;
}
.rlf-qty__btn { font-size: 18px; line-height: 1; color: inherit; background: none; }

/* ---------- Reviews ---------- */
body.index .s-block--testimonials .swiper { padding-top: 46px; }
body.index .s-block--testimonials .testimonials__review-card {
  position: relative;
  flex-direction: column-reverse !important;
  justify-content: flex-end !important;
  align-items: center;
  padding: 0 22px 24px !important;
  text-align: center;
  overflow: visible;
}
body.index .s-block--testimonials .testimonials__review-author { flex-direction: column; margin: -38px 0 0 !important; gap: 6px; }
body.index .s-block--testimonials .testimonials__review-author img { width: 76px !important; height: 76px !important; margin: 0 !important; border: 3px solid #fff; }
body.index .s-block--testimonials .testimonials__review-author-info { text-align: center; margin: 0 !important; }
body.index .s-block--testimonials .testimonials__review-author-name { color: #222 !important; font: 600 17px/1.4 var(--rlf-font) !important; }
body.index .s-block--testimonials .comment__rating { justify-content: center; display: flex; }
body.index .s-block--testimonials .testimonials__text { color: #333 !important; font: 400 13px/1.8 var(--rlf-font) !important; }
.rlf-review__badge {
  position: absolute;
  top: 12px;
  inset-inline-end: 0;
  padding: 5px 12px;
  border-radius: 0 6px 6px 0;
  background: #2fbf5f;
  color: #fff;
  font: 600 12px/1 var(--rlf-font);
}

/* ---------- Final polish ---------- */
/* copy sits on the right in every banner, like the design */
.rlf-banner .advanced-slider__caption__inner { justify-content: flex-start !important; }
body.index .s-block--testimonials::before { display: none; }
/* .rlf-footer__mark: see "Footer (design)" at the end of the file */
:root body footer.store-footer .store-footer__inner { padding-top: 0; }

/* ---------- Category card: flower + name, product count underneath ---------- */
.rlf-categories .square-links__item-title { flex-wrap: wrap; justify-content: flex-start; row-gap: 2px; max-width: 70%; }
.rlf-cat__count {
  flex-basis: 100%;
  padding-inline-start: 1.35em;
  color: rgba(255, 255, 255, .85);
  font: 400 clamp(11px, .8vw, 14px)/1.3 var(--rlf-font);
}

/* ---------- Product review videos ---------- */
body.index .rlf-videos { padding-top: 64px; }
body.index .rlf-videos .videos-gallery__title {
  color: var(--rlf-plum) !important;
  font: 700 clamp(22px, 2vw, 29px)/1.4 var(--rlf-font) !important;
}
body.index .rlf-videos .enhanced-title-border { display: block; width: 68px; height: 3px; margin: 14px auto 0; border-radius: 3px; background: var(--rlf-rose); }
body.index .rlf-videos .enhanced-title-border::before,
body.index .rlf-videos .enhanced-title-border::after { display: none; }
body.index .rlf-videos .home-block-title { margin-bottom: 40px; }
/* 3 per row; spacing via slide padding (not gap) so the slider still scrolls correctly when more videos are added.
   Order follows the editor list — no CSS reordering, so "Video #1" in the editor is always the first card. */
.rlf-videos .swiper-slide { width: calc(100% / 3) !important; margin: 0 !important; padding-inline: 8px !important; box-sizing: border-box; }
.rlf-videos .video-wrapper {
  aspect-ratio: 352 / 486;
  border: 2px solid var(--rlf-rose-line);
  border-radius: var(--rlf-radius-sm);
  overflow: hidden;
}
.rlf-videos .video-overlay { background: transparent !important; }
.rlf-videos .video-overlay-content,
.rlf-videos .expand-button { display: none !important; }
.rlf-videos .play-button {
  width: 76px; height: 64px;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .92) !important;
  color: #111 !important;
  font-size: 26px;
}
.rlf-videos .swiper-pagination, .rlf-videos .swiper-scrollbar { display: none; }
@media (max-width: 767px) {
  .rlf-videos .swiper-slide { width: 72vw !important; }
  .rlf-videos .play-button { width: 56px; height: 48px; font-size: 20px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  body.index .rlf-hero { margin: 12px 12px 0; border-radius: 24px; }
  .rlf-hero::before, .rlf-hero::after { display: none; }
  .rlf-hero .advanced-slider__caption__inner__content { text-align: center; margin-inline: auto; }
  .rlf-hero__badge { font-size: 14px; margin-bottom: 14px; }
  .rlf-features .enhanced-features__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
  .rlf-features .s-block--enhanced-features__item { min-height: 64px; padding: 10px 12px !important; gap: 10px; border-radius: 18px !important; }
  .rlf-features .feature-icon, .rlf-features .feature-icon img { width: 34px; height: 34px; }
  .rlf-features .s-block--enhanced-features__item h2 { font-size: 13px !important; }
  .rlf-categories .square-links__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  .rlf-categories .square-links__item a::after { width: 34px; height: 34px; font-size: 16px; }
  body.index :is(.rlf-categories, .rlf-products, .s-block--testimonials) .home-block-title { margin-bottom: 24px; }
  body.index :is(.rlf-categories, .rlf-products, .rlf-swim-offer, .s-block--testimonials) { padding-top: 40px; }
  body.index .rlf-banner { margin-top: 40px !important; width: calc(100% - 24px); }
  .rlf-swim-offer .promo-countdown__content { margin-inline: auto !important; align-items: center !important; text-align: center !important; }
  .rlf-swim-offer .promo-countdown__overlay { background: linear-gradient(0deg, rgba(243, 235, 228, .95) 35%, rgba(243, 235, 228, 0) 75%) !important; padding-top: 220px !important; }
  .rlf-swim-offer .s-count-down-list { justify-content: center !important; }
  .rlf-swim-offer .s-count-down-item { width: 62px !important; height: 62px !important; }
  .rlf-swim-offer .s-count-down-item-value { font-size: 22px !important; }
  :root body footer.store-footer::before { top: -40px; height: 80px; }
  :root body footer.store-footer { margin-top: 70px; }
}

/* ---------- Mobile hero: taller frame, copy anchored at the bottom ---------- */
@media (max-width: 767px) {
  .rlf-hero .advanced-slider__slide { height: 560px !important; }
  .rlf-hero .advanced-slider__image { height: 100% !important; object-position: 22% center; }
  .rlf-hero .advanced-slider__caption {
    display: flex;
    align-items: flex-end;
    background: linear-gradient(0deg, rgba(122, 75, 82, .78) 0%, rgba(122, 75, 82, .35) 38%, rgba(122, 75, 82, 0) 62%);
  }
  .rlf-hero .advanced-slider__caption > .container { width: 100%; padding-bottom: 28px; }
  .rlf-hero .advanced-slider__caption__inner { justify-content: center !important; align-items: flex-end !important; }
  .rlf-hero .advanced-slider__caption__inner__content__heading { color: #fff !important; font-size: 30px !important; }
  .rlf-hero .rlf-hero__accent { font-size: .82em; }
  .rlf-hero .advanced-slider__caption__inner__content__text { font-size: 13px !important; margin: 12px auto 18px !important; }
  .rlf-hero__actions { gap: 10px; }
  .rlf-hero__actions > a { height: 46px; min-width: 0; flex: 1 1 0; padding: 0 18px; font-size: 15px !important; }
  .rlf-features .s-block--enhanced-features__item { grid-column: auto !important; }
}


@media (prefers-reduced-motion: reduce) {
  custom-salla-product-card.product-card,
  .rlf-categories .square-links__image-wrap img,
  .rlf-hero .advanced-slider__caption__inner__content__button { transition: none !important; }
}

/* ---------- Layout polish ---------- */
/* Product rows: the theme caps cards at 320px, leaving 4½ cards and a clipped one; fill the row exactly. */
@media (min-width: 768px) { .rlf-products .swiper-slide { width: calc(100% / 3) !important; max-width: none !important; } }
@media (min-width: 1024px) { .rlf-products .swiper-slide { width: 25% !important; } }
/* Cards: title at the top, price/pay/buy rows pinned to the bottom so every card lines up. */
custom-salla-product-card.product-card .product-card__content { display: flex !important; flex-direction: column; justify-content: flex-start !important; flex: 1 1 auto; }
custom-salla-product-card.product-card .product-card__content-wrapper { display: flex; flex-direction: column; flex: 1 1 auto; margin: 0 !important; }
custom-salla-product-card.product-card .product-card__content-wrapper > .product-options { margin-top: auto; }
/* Video row: theme swiper has -10px side margins, so it overhung the product rows. */
body.index .rlf-videos .swiper { margin-inline: -8px !important; }

/* =====================================================================
   Banners (luxury / kids / swim offer) — one proportional layout.
   ≥768px: the banner keeps the photo's own ratio (1920×1072), so nothing is cropped,
           and every size inside is in cqw (% of the banner width), so tablet is an
           exact scaled-down copy of desktop. Copy lives in the right ~40%, models on the left.
   <768px: photo on top (full, uncropped) and the copy underneath on a matching colour,
           so text never sits on a model.
   ===================================================================== */
.rlf-banner--luxury { --rlf-banner-bg: #e6d3e1; }
.rlf-banner--kids   { --rlf-banner-bg: #df978c; }

@media (min-width: 768px) {
  .rlf-banner .advanced-slider__slide,
  .rlf-swim-offer .promo-countdown__panel {
    aspect-ratio: 1920 / 1072;
    height: auto !important;
    container-type: inline-size;
  }
  .rlf-banner .advanced-slider__image { height: 100% !important; }

  /* copy block: vertically centred, 6% in from the right edge */
  .rlf-banner .advanced-slider__caption { inset: 0; }
  .rlf-banner .advanced-slider__caption > .container {
    width: 100% !important; max-width: none !important; height: 100%;
    padding-inline: 6cqw !important;
    display: flex; align-items: center;
  }
  .rlf-banner .advanced-slider__caption__inner { width: 100%; align-items: center; }
  .rlf-banner .advanced-slider__caption__inner__content { max-width: 40cqw !important; }
  .rlf-banner .advanced-slider__caption__inner__content__heading { font-size: clamp(18px, 2.9cqw, 44px) !important; }
  .rlf-banner .advanced-slider__caption__inner__content__text { font-size: clamp(12px, 1.15cqw, 17px) !important; margin-top: 1cqw !important; }
  .rlf-banner .advanced-slider__caption__inner__content__button {
    height: clamp(36px, 3.4cqw, 52px); min-width: clamp(120px, 13cqw, 200px);
    padding-inline: 2cqw; margin-top: 2.2cqw !important;
    font-size: clamp(13px, 1.25cqw, 18px) !important;
  }
  .rlf-banner__mark { width: clamp(80px, 13cqw, 190px); height: auto; aspect-ratio: 190 / 92; margin-bottom: 1cqw; }

  /* swim offer: same frame and proportions */
  .rlf-swim-offer .promo-countdown__bg-image { width: 100% !important; height: 100% !important; object-fit: cover; object-position: center; transform: none !important; }
  .rlf-swim-offer .promo-countdown__overlay {
    position: absolute !important; inset: 0;
    display: flex; align-items: center;
    padding: 0 6cqw !important;
  }
  .rlf-swim-offer .promo-countdown__content { max-width: 40cqw !important; }
  .rlf-swim-offer .promo-countdown__description { font-size: clamp(11px, 1.05cqw, 15px) !important; padding: .45cqw 1.2cqw; margin-bottom: 1.4cqw !important; }
  .rlf-swim-offer .promo-countdown__title,
  .rlf-swim-offer .promo-countdown__title span { font-size: clamp(18px, 2.9cqw, 44px) !important; }
  .rlf-swim-offer .s-count-down-list { gap: .8cqw; margin-top: 1.6cqw; }
  .rlf-swim-offer .s-count-down-item { width: clamp(44px, 5.4cqw, 80px) !important; height: clamp(44px, 5.4cqw, 80px) !important; }
  .rlf-swim-offer .s-count-down-item-value { font-size: clamp(15px, 2cqw, 30px) !important; }
  .rlf-swim-offer .s-count-down-item-label { font-size: clamp(9px, .85cqw, 13px) !important; }
  .rlf-swim-offer .promo-countdown__button {
    min-width: clamp(120px, 13cqw, 200px); margin-top: 2cqw !important;
    padding: clamp(8px, .9cqw, 13px) 2.4cqw !important;
    font-size: clamp(13px, 1.25cqw, 18px) !important;
  }
}

@media (max-width: 767px) {
  /* luxury / kids: stacked */
  .rlf-banner .advanced-slider__slide {
    display: flex !important; flex-direction: column;
    height: auto !important; aspect-ratio: auto;
    background: var(--rlf-banner-bg);
  }
  .rlf-banner .advanced-slider__image { display: none !important; }
  .rlf-banner .advanced-slider__image:last-of-type {
    display: block !important; width: 100%; height: auto !important; aspect-ratio: 1920 / 1072;
  }
  .rlf-banner .advanced-slider__caption { position: static !important; inset: auto; height: auto; }
  .rlf-banner .advanced-slider__caption > .container { padding: 22px 20px 26px !important; }
  .rlf-banner .advanced-slider__caption__inner { justify-content: center !important; }
  .rlf-banner .advanced-slider__caption__inner__content {
    max-width: none !important; margin: 0 !important;
    display: flex; flex-direction: column; align-items: center; text-align: center;
  }
  .rlf-banner .advanced-slider__caption__inner__content__heading { font-size: 22px !important; text-align: center; }
  .rlf-banner .advanced-slider__caption__inner__content__text { font-size: 14px !important; text-align: center; }
  .rlf-banner .advanced-slider__caption__inner__content__button { height: 44px; min-width: 160px; font-size: 16px !important; margin-top: 16px !important; }
  .rlf-banner__mark { width: 120px; height: 58px; margin: 0 auto 10px; }

  /* swim offer: stacked */
  .rlf-swim-offer .promo-countdown__panel { display: flex; flex-direction: column; height: auto !important; }
  .rlf-swim-offer .promo-countdown__bg { position: static !important; }
  .rlf-swim-offer .promo-countdown__bg-image { width: 100% !important; height: auto !important; aspect-ratio: 1920 / 1072; object-fit: cover; transform: none !important; }
  .rlf-swim-offer .promo-countdown__overlay { position: static !important; background: transparent !important; padding: 22px 20px 26px !important; }
  .rlf-swim-offer .promo-countdown__title,
  .rlf-swim-offer .promo-countdown__title span { text-align: center !important; font-size: 24px !important; }
}

/* Reviews: rating line between the title and the pink divider */
.rlf-reviews__meta {
  margin: 10px 0 0; text-align: center;
  color: #8a6f62; font: 500 15px/1.4 var(--rlf-font);
}
.rlf-reviews__star { color: #f5b301; margin-inline-end: 6px; }

/* =====================================================================
   Footer (design): stacked logo, then 4 columns —
   ريليف (about) · روابط تهمك · تواصل معنا · تطبيق ريليف (+ CR / VAT badges)
   ===================================================================== */
.rlf-hide { display: none !important; }
/* wide, shallow arc: an ellipse 150% of the screen width, so only its gentle top shows and it meets the screen edges exactly at the footer's top */
:root body footer.store-footer::before { top: -140px; height: 550px; border-radius: 0; clip-path: ellipse(75% 100% at 50% 100%); }
:root body footer.store-footer { margin-top: 160px; background: var(--rlf-blush) !important; }

/* stacked logo: dove from the design, wordmark cut from the store logo */
.rlf-footer__mark { display: flex; flex-direction: column; align-items: center; width: max-content; margin: -110px auto 56px; }
.rlf-footer__dove { display: block; width: 112px; height: 108px; background: #fff; -webkit-mask: var(--rlf-dove) center / contain no-repeat; mask: var(--rlf-dove) center / contain no-repeat; }
/* wordmark: cropped from the store logo by JS (cutWordmark) and tinted olive */
.rlf-footer__word { display: none; width: 118px; margin-top: -40px; background: #8a8468; -webkit-mask: var(--rlf-word) center / contain no-repeat; mask: var(--rlf-word) center / contain no-repeat; }
.rlf-footer__word.is-ready { display: block; }

:root body footer.store-footer .footer-title,
:root body footer.store-footer .store-footer__apps-inner h3 {
  margin: 0 0 22px !important;
  color: #3a3333 !important;
  font: 700 28px/1.2 var(--rlf-font) !important;
  text-align: right;
}
:root body footer.store-footer :is(.rlf-footer__desc, .store-footer__menu-link, .rlf-footer__contact-list a, .rlf-footer__contact-list span) {
  color: #5a4a47 !important;
  font: 400 18px/1.75 var(--rlf-font) !important;
}
.rlf-footer__desc { margin: 0; max-width: 340px; }
:root body footer.store-footer .store-footer__menu-link:hover,
.rlf-footer__contact-list a:hover { color: #3a3333 !important; }

/* links: one plain column (the list itself is the store's footer menu) */
:root body .store-footer__links-column ul { columns: 1 !important; column-count: 1 !important; display: block !important; }
:root body .store-footer__links-column li { margin: 0 !important; white-space: nowrap; }

/* contacts */
.rlf-footer__contact-list { list-style: none; margin: 0; padding: 0; text-align: right; }
.rlf-footer__contact-list [dir="ltr"] { unicode-bidi: isolate; }
.rlf-footer__contact-icons { display: flex; gap: 16px; margin-top: 18px; }
.rlf-footer__icon {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .3);
  transition: background .3s var(--rlf-ease);
}
.rlf-footer__icon:hover { background: rgba(255, 255, 255, .55); }
:root body footer.store-footer .rlf-footer__icon i { margin: 0 !important; color: #fff !important; font-size: 22px; }

/* app column: bigger store badges, then CR / VAT badges */
:root body .store-footer__apps-inner { text-align: right !important; }
:root body .store-footer__apps-list { justify-content: flex-start !important; gap: 12px; margin: 0 0 30px !important; }
:root body .store-footer__app-badge { margin: 0 !important; }
:root body .store-footer__app-badge img { height: 44px; width: auto; }
:root body .store-footer__apps-inner .footer-badges { justify-content: flex-start !important; gap: 22px; margin: 0 !important; }
:root body .store-footer__apps-inner .footer-badges :is(p, b) { white-space: nowrap; }
/* VAT certificate link collapsed to 0px once the labels stopped wrapping */
:root body .footer-tax__certificate { flex: none !important; display: block; }
:root body .footer-tax__certificate img { width: 40px !important; height: auto !important; }

@media (min-width: 1024px) {
  :root body .store-footer__grid { grid-template-columns: 1fr 1fr 1fr 1.05fr 1.25fr !important; column-gap: 40px !important; }
}
@media (max-width: 1023px) {
  :root body footer.store-footer .footer-title,
  :root body footer.store-footer .store-footer__apps-inner h3 { font-size: 22px !important; margin-bottom: 14px !important; }
  :root body footer.store-footer :is(.rlf-footer__desc, .store-footer__menu-link, .rlf-footer__contact-list a, .rlf-footer__contact-list span) { font-size: 15px !important; }
  .rlf-footer__mark { margin: -80px auto 36px; transform: scale(.8); }
  :root body .store-footer__grid > * { margin-bottom: 28px !important; }
}

/* =====================================================================
   Product card (design) — one layout at every screen size.
   Sizes are in cqi (% of the card's own width), so a phone card is a
   scaled-down copy of the desktop card instead of a different layout.
   ===================================================================== */
custom-salla-product-card.product-card {
  container-type: inline-size;
  display: flex !important; flex-direction: column;
  padding: 10px 10px 16px !important; /* cqi can't size the container itself */
  border-radius: 22px !important;
  background: #f7f6f6 !important;
}
/* image: tall white box, whole product visible (no cropping) */
custom-salla-product-card.product-card .product-card__image {
  width: 100% !important; height: auto !important;
  aspect-ratio: 360 / 410;
  border-radius: clamp(10px, 4cqi, 16px) !important;
  background: #fff !important;
}
custom-salla-product-card.product-card .product-card__image > a { display: block; width: 100%; height: 100%; }
/* photo fills the whole frame (no white bands above/below); square photos lose a sliver at the sides only */
custom-salla-product-card.product-card .product-card__image img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center; }
.rlf-card__discount { display: none !important; }

/* "الأكثر مبيعاً"-style badge: bottom-left */
custom-salla-product-card.product-card .product-card__promotion {
  inset-inline-start: auto !important; inset-inline-end: 3cqi !important;
  bottom: 3cqi !important;
  padding: 1.8cqi 3.4cqi !important;
  font-size: clamp(10px, 3.6cqi, 14px) !important;
}

/* heart: pink circle, top-left; quick-view hidden */
custom-salla-product-card.product-card .product-card__buttons {
  position: absolute !important; z-index: 3;
  top: 3cqi !important; bottom: auto !important;
  inset-inline-end: 3cqi !important; inset-inline-start: auto !important;
  width: auto !important; padding: 0 !important; gap: 0 !important;
  display: flex !important; /* theme hides it below desktop */
  opacity: 1 !important; visibility: visible !important; transform: none !important;
  background: none !important;
}
custom-salla-product-card.product-card .product-card__buttons .quickview-btn,
custom-salla-product-card.product-card .product-card__actions { display: none !important; }
custom-salla-product-card.product-card .product-card__buttons .wishlist { width: auto !important; opacity: 1 !important; visibility: visible !important; transform: none !important; } /* theme only reveals it on hover */
custom-salla-product-card.product-card .product-card__buttons button.btn--wishlist {
  width: clamp(26px, 8.5cqi, 34px) !important; height: clamp(26px, 8.5cqi, 34px) !important;
  min-width: 0 !important; padding: 0 !important;
  border: 0 !important; border-radius: 50% !important;
  background: var(--rlf-rose) !important; color: #fff !important; box-shadow: none !important;
}
custom-salla-product-card.product-card .product-card__buttons button.btn--wishlist i { color: #fff !important; font-size: clamp(13px, 4.4cqi, 17px) !important; }

/* text */
custom-salla-product-card.product-card .product-card__content { padding: 4cqi 1cqi 0 !important; }
custom-salla-product-card.product-card .product-card__title, custom-salla-product-card.product-card .product-card__title a {
  font: 500 clamp(13px, 5.4cqi, 20px)/1.45 var(--rlf-font) !important; color: #2b2b2b !important;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rlf-card__rating { margin-top: 3.4cqi; gap: 1.6cqi; font-size: clamp(10px, 3.4cqi, 13px); }
.rlf-stars-wrap { font-size: clamp(11px, 3.8cqi, 15px); letter-spacing: .5px; }
.rlf-stars { color: #f5d77a; }
custom-salla-product-card.product-card .product-card__subtitle { font-size: clamp(10px, 3.2cqi, 13px) !important; }
custom-salla-product-card.product-card .product-card__price { gap: 3cqi !important; margin-top: 3.6cqi !important; }
custom-salla-product-card.product-card .total-price { font-size: clamp(14px, 5.4cqi, 21px) !important; }
custom-salla-product-card.product-card .before-price { font-size: clamp(13px, 5cqi, 20px) !important; }

/* "ادفع بـ:" + logos pill */
.rlf-card__pay { margin-top: 3.6cqi; gap: 2cqi; font-size: clamp(9px, 3.2cqi, 13px); }
/* pill stretches to the card's left edge; logos grow and spread evenly (as in the design) */
.rlf-card__pay-logos { flex: 1 1 auto; min-width: 0; justify-content: space-between; gap: 2cqi; padding: 1.8cqi 3.4cqi; overflow: hidden; }
.rlf-card__pay-logos img { height: clamp(12px, 5.6cqi, 22px) !important; width: auto; flex: 0 1 auto; min-width: 0; object-fit: contain; }
/* these three files have wide transparent margins around a small logo — enlarge them visually */
.rlf-card__pay-logos img:is([alt="mada"], [alt="apple_pay"], [alt="credit_card"]) { transform: scale(1.55); }

/* buy row: pink pill button + grey stepper */
.rlf-card__buy { gap: 2.6cqi; margin-top: 4.4cqi; }
custom-salla-product-card.product-card .rlf-card__buy .s-button-element {
  height: clamp(36px, 11.6cqi, 46px) !important;
  border-radius: 999px !important;
  font-size: clamp(13px, 5cqi, 19px) !important; font-weight: 500 !important;
}
custom-salla-product-card.product-card .s-button-wrap { border-radius: 999px; }
.rlf-card__buy .s-button-text > i { display: none !important; }
custom-salla-product-card.product-card .rlf-card__buy .s-button-element { justify-content: center !important; text-align: center; }
custom-salla-product-card.product-card .rlf-card__buy .s-button-text { flex: 1 1 auto; justify-content: center !important; text-align: center; margin: 0 !important; }
.rlf-qty {
  flex: none;
  height: clamp(36px, 11.6cqi, 46px);
  gap: 4cqi; padding: 0 4cqi;
  font-size: clamp(14px, 5.4cqi, 21px);
}
.rlf-qty__btn { font-size: clamp(16px, 6cqi, 22px); }

/* narrow cards (phones): stepper on its own row under the button */
@container (max-width: 200px) {
  .rlf-card__buy { flex-direction: column; align-items: stretch; }
  .rlf-qty { justify-content: space-between; }
  .rlf-card__pay { flex-wrap: wrap; }
}
@media (max-width: 767px) { custom-salla-product-card.product-card { padding: 8px 8px 12px !important; border-radius: 16px !important; } }

/* phones: one big card + a peek of the next (the theme squeezed ~2.5 tiny cards in) */
@media (max-width: 767px) { .rlf-products .swiper-slide { width: 72% !important; max-width: none !important; } }
/* phone hero: both buttons on one line without wrapping */
@media (max-width: 767px) {
  .rlf-hero__actions > a { white-space: nowrap; padding: 0 12px !important; font-size: 14px !important; gap: 6px; }
  .rlf-hero__mark { display: none; } /* sat behind the buttons on small screens */
}

/* The theme swaps in a second, phone-only add-to-cart ("أضف إلى السلة +") and hides the main one.
   Keep the main button (the one in our buy row) at every size so the card matches the design. */
custom-salla-product-card.product-card:has(.rlf-card__buy .product-card__addToCart) .product-card__enhanced-mini-cart { display: none !important; }
custom-salla-product-card.product-card .rlf-card__buy > .product-card__addToCart { display: block !important; }
/* phone footer: low arc instead of a tall dome */
@media (max-width: 767px) {
  :root body footer.store-footer::before { top: -56px; height: 220px; }
  :root body footer.store-footer { margin-top: 80px; }
  .rlf-footer__mark { margin: -40px auto 24px; }
}
/* phone categories: the name sat on the models' faces — move name + count under the photo */
@media (max-width: 767px) {
  .rlf-categories .square-links__item-title {
    position: static !important;
    max-width: none;
    margin: 10px 4px 0 !important;
    color: #3a3333 !important;
    font-size: 15px !important;
    text-shadow: none;
  }
  .rlf-categories .square-links__item-title::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e8a09b'%3E%3Ccircle cx='12' cy='6.5' r='4.2'/%3E%3Ccircle cx='12' cy='17.5' r='4.2'/%3E%3Ccircle cx='6.5' cy='12' r='4.2'/%3E%3Ccircle cx='17.5' cy='12' r='4.2'/%3E%3Ccircle cx='12' cy='12' r='2.2' fill='%23fff'/%3E%3C/svg%3E");
  }
  .rlf-cat__count { color: #8c7f7a; font-size: 12px; }
  .rlf-categories .square-links__item a::after { bottom: 58px; inset-inline-start: 10px; } /* keep the arrow on the photo, above the name */
}

/* Hero "شاهدي الفيديو" popup */
.rlf-vmodal {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center; padding: 20px;
  background: rgba(30, 20, 22, .78);
}
.rlf-vmodal__box { position: relative; width: min(420px, 100%); }
.rlf-vmodal__media { display: block; width: 100%; aspect-ratio: 9 / 16; max-height: 82vh; border: 0; border-radius: 18px; background: #000; object-fit: contain; }
.rlf-vmodal__close {
  position: absolute; top: -14px; inset-inline-start: -14px; z-index: 1;
  width: 38px; height: 38px; border-radius: 50%;
  background: #fff; color: var(--rlf-ink); font: 600 24px/1 var(--rlf-font);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
}

/* Hero (≥768px): copy stays in the right ~38% so it never runs onto the family photo.
   Sizes are % of the hero's width (cqw), so every screen gets the same proportions. */
@media (min-width: 768px) {
  .rlf-hero .advanced-slider__slide { container-type: inline-size; }
  .rlf-hero .advanced-slider__caption > .container {
    width: 100% !important; max-width: none !important;
    padding-inline: 4.5cqw !important;
  }
  .rlf-hero .advanced-slider__caption__inner__content { max-width: 38cqw !important; }
  .rlf-hero__badge { font-size: clamp(12px, 1cqw, 18px); padding: .45cqw 1.1cqw; margin-bottom: 1.4cqw; }
  .rlf-hero .advanced-slider__caption__inner__content__heading { font-size: clamp(24px, 3.3cqw, 66px) !important; }
  .rlf-hero .advanced-slider__caption__inner__content__text { font-size: clamp(12px, .95cqw, 17px) !important; margin: 1.3cqw 0 1.8cqw !important; max-width: 30cqw; }
  .rlf-hero__actions { gap: clamp(6px, .8cqw, 14px); flex-wrap: nowrap; }
  /* same size for both buttons (the theme gives the primary one a fixed 52px/18px), shrinking with the hero */
  .rlf-hero .rlf-hero__actions > a {
    flex: 0 1 auto; min-width: 0; height: clamp(30px, 2.9cqw, 54px) !important;
    padding: 0 clamp(10px, 1.6cqw, 30px) !important;
    font-size: clamp(11px, 1cqw, 18px) !important; white-space: nowrap; gap: 6px;
  }
  .rlf-hero .rlf-hero__actions > a:first-child { min-width: clamp(0px, 10.5cqw, 200px); }
  .rlf-hero .rlf-hero__actions > .rlf-hero__ghost { min-width: clamp(0px, 9.5cqw, 190px); }
}

/* phone footer: comfortable side padding, one section per row, justified about text */
@media (max-width: 767px) {
  :root body .store-footer__container { padding-inline: 24px !important; }
  :root body .store-footer__grid { grid-template-columns: 1fr !important; row-gap: 30px !important; }
  :root body .store-footer__grid > * { grid-column: auto !important; margin: 0 !important; width: 100%; }
  :root body .store-footer__grid > :empty, :root body .store-footer__account-column { display: none !important; }
  .rlf-footer__desc { max-width: none; text-align: justify; text-align-last: right; }
  :root body .store-footer__links-column li { white-space: normal; }
  :root body .store-footer__apps-list { margin-bottom: 20px !important; }
}

/* ---------- Pre-launch review fixes ---------- */
/* quantity +/−: the glyphs were 8×16px tap targets; give each a 32px hit area without changing the look */
.rlf-qty { padding: 0 2cqi; gap: 1cqi; }
.rlf-qty__btn { min-width: 32px; min-height: 32px; display: inline-grid; place-items: center; padding: 0; }
/* small card text was 9–11px: keep it readable (≥11–12px) and darker grey for contrast */
.rlf-card__rating { font-size: clamp(12px, 3.4cqi, 13px); color: #6f6f6f; }
.rlf-card__pay { font-size: clamp(11px, 3.2cqi, 13px); }
custom-salla-product-card.product-card .product-card__subtitle { font-size: clamp(11px, 3.2cqi, 13px) !important; color: #6f6f6f !important; }
custom-salla-product-card.product-card .product-card__promotion { font-size: clamp(11px, 3.6cqi, 14px) !important; }
/* header links/icons: bigger click area, same look */
.rlf-nav__link { padding-block: 12px; }
.rlf-icon-btn { min-width: 40px; min-height: 40px; }

/* hide the extra round WhatsApp button (#wa-float); the "وش في خاطرك؟ تواصل معنا" pill stays */
#wa-float { display: none !important; }
/* ---------- Phone hero: own square photo (set in the slider's "صورة الجوال"), copy on the bottom fade ---------- */
@media (max-width: 767px) {
  /* frame follows the phone photo: people on top, empty fade at the bottom for the text */
  .rlf-hero .advanced-slider__slide { height: auto !important; aspect-ratio: 4 / 5; }
  .rlf-hero .advanced-slider__image { height: 100% !important; object-fit: cover; object-position: center top; }
  /* soft shade only behind the text so the white copy stays readable */
  .rlf-hero .advanced-slider__caption {
    background: linear-gradient(0deg, rgba(122, 75, 82, .62) 0%, rgba(122, 75, 82, .28) 24%, rgba(122, 75, 82, 0) 40%);
  }
  .rlf-hero .advanced-slider__caption > .container { padding-bottom: 14px; }
  .rlf-hero__badge { font-size: 10px; padding: 4px 10px; margin-bottom: 6px; gap: 6px; }
  .rlf-hero__badge::before { width: 6px; height: 6px; }
  .rlf-hero .advanced-slider__caption__inner__content__heading { font-size: 19px !important; line-height: 1.3 !important; }
  .rlf-hero .advanced-slider__caption__inner__content__text { font-size: 10.5px !important; line-height: 1.55 !important; margin: 4px auto 10px !important; max-width: 270px; }
  .rlf-hero__actions { gap: 8px; justify-content: center; }
  .rlf-hero .rlf-hero__actions > a { height: 34px !important; flex: 0 1 auto; padding: 0 14px !important; font-size: 12px !important; gap: 4px; }
  .rlf-hero__actions > a span { font-size: 1em; }
  .rlf-sparkles i { width: 10px; height: 10px; }
}
/* ---------- Phone hero: title on one line ---------- */
@media (max-width: 767px) {
  /* nowrap keeps it on one line; the size follows the screen width (vw) so it never overflows */
  .rlf-hero .advanced-slider__caption__inner__content__heading { white-space: nowrap; font-size: clamp(12px, 3.8vw, 17px) !important; }
  /* "بلمسة من الفخامة" sits beside the first part instead of under it */
  .rlf-hero .rlf-hero__accent { display: inline; font-size: 1em; margin: 0; margin-inline-start: .25em; }
}
/* ---------- Phone hero: both buttons always on one row ---------- */
@media (max-width: 767px) {
  .rlf-hero__actions { flex-wrap: nowrap; }
  .rlf-hero .rlf-hero__actions > a { flex: 1 1 0; min-width: 0; max-width: 170px; padding: 0 10px !important; }
}
/* ---------- Phone hero: no sparkles over the photo ---------- */
@media (max-width: 767px) {
  .rlf-hero .rlf-sparkles { display: none !important; }
}
/* ---------- Phone hero: one even gap (12px) between badge, title, text and buttons ---------- */
@media (max-width: 767px) {
  .rlf-hero .advanced-slider__caption > .container { padding-bottom: 16px !important; }
  /* clear every old margin first, then add the gaps back from one value */
  .rlf-hero .advanced-slider__caption__inner__content > * { margin-top: 0 !important; margin-bottom: 0 !important; }
  .rlf-hero .rlf-hero__badge { margin: 0 0 12px !important; }
  .rlf-hero .advanced-slider__caption__inner__content__heading { line-height: 1.25 !important; padding: 0 !important; }
  /* 10px / 9px + the text's own line spacing = 12px on screen */
  .rlf-hero .advanced-slider__caption__inner__content__text { margin: 10px auto 0 !important; padding: 0 !important; line-height: 1.6 !important; }
  .rlf-hero .rlf-hero__actions { margin: 9px 0 0 !important; padding: 0 !important; }
}
/* ---------- Category card: count starts exactly under the name (flower width + gap) ---------- */
/* the indent is written in the title's own size, not the count's smaller size */
.rlf-cat__count { padding-inline-start: calc(clamp(16px, 1.5vw, 26px) + 8px) !important; }
@media (max-width: 767px) {
  .rlf-cat__count { padding-inline-start: calc(15px + 8px) !important; }
}
/* ---------- Phone hero: bigger badge, copy lifted a little ---------- */
@media (max-width: 767px) {
  .rlf-hero .advanced-slider__caption > .container { padding-bottom: 28px !important; }
  .rlf-hero .rlf-hero__badge { font-size: 12.5px; padding: 6px 14px; gap: 7px; }
  .rlf-hero .rlf-hero__badge::before { width: 8px; height: 8px; }
}

/* ===== Product page (Figma design) — start ===== */
body.product-single { background: var(--rlf-page, #ebebeb); }
body.product-single .app-inner { background: var(--rlf-page, #ebebeb) !important; }

/* ---------- Two columns: gallery (right) + info (left) ---------- */
body.product-single .product-single__columns { position: relative; }

/* ---------- Gallery: framed main photo, thumbnails underneath ---------- */
body.product-single .product-single__main-media {
  height: auto !important;
  overflow: visible !important;
}
body.product-single salla-slider.details-slider {
  height: auto !important;
  flex-direction: column !important;   /* thumbnails go under the photo */
  gap: 14px;
}
body.product-single salla-slider.details-slider > .s-slider-container {
  width: 100% !important;
  aspect-ratio: 1.08 / 1;
  background: #fff;
  border: 1.5px solid #f0b9b5;          /* pink frame from the design */
  border-radius: 22px;
  overflow: hidden;
}
body.product-single .product-single__slide-image { object-fit: contain !important; background: #fff; }
body.product-single salla-slider.details-slider > .s-slider-thumbs {
  width: 100% !important;
  height: auto !important;
}
body.product-single .s-slider-thumbs .s-slider-thumbs-container { width: 100% !important; height: auto !important; transform: none !important; top: auto !important; } /* the theme centred the vertical strip with a -50% shift */
body.product-single .s-slider-thumbs .swiper-slide {
  height: 104px !important;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1.5px solid transparent;
  cursor: pointer;
}
body.product-single .s-slider-thumbs .swiper-slide-thumb-active { border-color: #f0b9b5; }
body.product-single .product-single__thumb-image { object-fit: cover; }

/* heart + share sit on the photo's top-left corner */
body.product-single .product-single__brand-row { margin: 0 !important; height: 0; padding: 0 !important; }
body.product-single .product-single__brand-row .product-brand { display: none !important; }
body.product-single .product-single__share-row {
  position: absolute;
  z-index: 5;
  top: 16px;
  left: 28px;                    /* phones/tablets: gallery is on top, full width */
  flex-direction: column;
  gap: 10px;
  margin: 0 !important;
}
body.product-single .product-single__share-row > * { margin: 0 !important; }
body.product-single .product-single__share-row :is(.s-button-element, button) {
  width: 36px !important; height: 36px !important;
  border-radius: 50% !important;
  background: #fff !important;
  border: 1px solid #f0d4d1 !important;
  color: #b0565c !important;
}
@media (min-width: 1024px) {
  body.product-single .product-single__share-row { left: calc(50% + 32px); } /* gallery is the right half */
}

/* ---------- Info column: design order ---------- */
body.product-single .product-single__info { display: flex !important; flex-direction: column; }
body.product-single .product-single__info form.product-form { display: contents; } /* lets its parts take part in the order below */
body.product-single .product-single__info > * { margin-top: 0 !important; }

body.product-single .product-single__brand-row          { order: 0; }
body.product-single .product-single__title              { order: 1; }
body.product-single .product-single__stock-info         { order: 2; }
body.product-single .product-single__info salla-rating-stars { order: 3; }
body.product-single .rlf-pd-short                       { order: 4; }
body.product-single .product-single__info > div.flex.whitespace-nowrap { order: 5; }  /* top price */
body.product-single .product-single__tax-note           { order: 6; }
body.product-single .rlf-pd-cat                         { order: 7; }
body.product-single salla-product-options               { order: 10; }
body.product-single .product-form > section:not(.sticky-product-bar) { order: 11; } /* size guide */
body.product-single .product-single__info salla-installment { order: 12; }
body.product-single .product-form > div.bg-storeBG      { order: 13; }  /* price row */
body.product-single .sticky-product-bar                 { order: 14; }
body.product-single .product-single__info salla-bought-together { order: 20; }

body.product-single .product-single__title {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  font: 700 clamp(20px, 1.7vw, 26px)/1.4 var(--rlf-font) !important;
  color: #222 !important;
  margin-bottom: 8px !important;
}

/* stock: green dot + green text */
body.product-single .product-single__stock-info { margin-bottom: 8px !important; }
body.product-single .product-single__stock-info .inventory-content > div { color: #2f9e55 !important; font-weight: 600; font-size: 14px; }
body.product-single .product-single__stock-info i { color: #2f9e55 !important; }

body.product-single .product-single__info salla-rating-stars { margin-bottom: 12px !important; }

/* short description + "اقرأ المزيد" (added by JS) */
.rlf-pd-short { margin: 0 0 14px; color: #3a3a3a; font: 400 14px/1.9 var(--rlf-font); }
.rlf-pd-short a { white-space: nowrap; color: #c9636a; text-decoration: underline; text-underline-offset: 3px; margin-inline-start: 4px; cursor: pointer; }

/* top price */
body.product-single .product-single__info > div.flex.whitespace-nowrap h4 { font-size: 24px !important; color: var(--rlf-price, #b0262e) !important; }
body.product-single .product-single__tax-note { margin-bottom: 6px !important; }

/* category line (added by JS) */
.rlf-pd-cat { margin: 0 0 20px; color: #3a3a3a; font: 600 14px/1.6 var(--rlf-font); }
.rlf-pd-cat a { color: #c9636a; font-weight: 400; margin-inline-start: 6px; }

/* ---------- Size select + size guide in one white box ---------- */
body.product-single salla-product-options {
  background: #fff;
  border: 1px solid #ecdedb;
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  padding: 18px 20px 12px !important;
  margin-bottom: 0 !important;
}
body.product-single .product-form > section:not(.sticky-product-bar) {
  background: #fff !important;
  border: 1px solid #ecdedb;
  border-top: 1px dashed #ecdedb;
  border-radius: 0 0 16px 16px !important;
  padding: 12px 20px !important;
  margin-bottom: 18px !important;
}
body.product-single salla-product-options :is(select, .s-form-control) { border-radius: 999px !important; }

/* ---------- Installment boxes: all four the same ---------- */
body.product-single salla-installment { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
body.product-single salla-installment > * { margin: 0 !important; }
body.product-single salla-installment mispay-widget,
body.product-single salla-installment .s-installment-madfu-wrapper {
  display: block;
  background: #fff !important;
  border: 1px solid #e3e3e3 !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
}

/* ---------- Price + quantity on one row, buttons (desktop only: on phones the theme pins this bar to the bottom of the screen) ---------- */
@media (min-width: 1024px) {
body.product-single .product-form > div.bg-storeBG {
  background: transparent !important;
  padding: 0 !important;
  display: flex; align-items: center;
  border-top: 1px solid #e2d8d6;
  padding-top: 18px !important;
  height: auto;
}
body.product-single .product-single__price-label { display: none !important; }
body.product-single .product-form > div.bg-storeBG .center-between { justify-content: flex-start !important; }
body.product-single .product-single__price-values h2 { font-size: 30px !important; color: var(--rlf-price, #b0262e) !important; }

body.product-single .sticky-product-bar { background: transparent !important; padding: 0 !important; }
body.product-single .sticky-product-bar__quantity {
  margin: -44px 0 18px !important;   /* sits on the same line as the price */
  height: 44px;
  justify-content: flex-end !important;
  pointer-events: none;
}
body.product-single .sticky-product-bar__quantity > :not(salla-quantity-input) { visibility: hidden; } /* the "الكمية" label */
body.product-single .sticky-product-bar__quantity salla-quantity-input { pointer-events: auto; border: 0 !important; }

/* ---------- Buttons ---------- */
body.product-single .sticky-product-bar__btn { margin-top: 0 !important; }
body.product-single .sticky-product-bar__btn .s-button-element {
  height: 50px !important;
  border-radius: 14px !important;
  font-size: 15px !important;
}
body.product-single .sticky-product-bar__btn .s-add-product-button-main { gap: 12px; }
body.product-single .sticky-product-bar__btn salla-mini-checkout-widget :is(button, .s-button-element) {
  height: 50px !important; border-radius: 14px !important;
}
body.product-single .sticky-product-bar apple-pay-button {
  --apple-pay-button-height: 52px;
  --apple-pay-button-border-radius: 999px;
  height: 52px !important;
  border-radius: 999px !important;
  overflow: hidden;
}
body.product-single .sticky-product-bar salla-quick-buy { display: block; margin-top: 14px; padding-bottom: 22px; border-bottom: 1px solid #e2d8d6; }
}

/* ---------- "كمّل طلبك" card ---------- */
body.product-single salla-bought-together {
  display: block;
  margin-top: 26px !important;
  background: #f6f4f3;
  border: 1px solid #ece6e4;
  border-radius: 20px;
  padding: 22px 20px !important;
}
body.product-single salla-bought-together .s-bought-together-btn,
body.product-single salla-bought-together .s-bought-together-btn .s-button-element { border-radius: 999px !important; }

/* ---------- Details / Reviews: pill tabs on top, content under ---------- */
@media (min-width: 768px) {
  body.product-single .product-more-info__inner { display: flex; flex-direction: column !important; gap: 18px; }
  body.product-single .product-more-info__inner > .content-ul-tab { width: 100% !important; position: static !important; }
  body.product-single .product-more-info__inner > .conttainer { width: 100% !important; }
}
@media (min-width: 1024px) {
  body.product-single .product-more-info__inner { width: 50% !important; max-width: none !important; margin: 0 auto 0 0 !important; } /* left half = under the info column */
}
body.product-single .more-info-tabs__nav-item { flex: 0 0 auto !important; width: auto !important; }
body.product-single .more-info-tabs__content { padding-top: 0 !important; margin-top: 0 !important; }
body.product-single .product-more-info__inner > .content-ul-tab { flex: none !important; height: auto !important; min-height: 0 !important; } /* the theme gave the side menu a 240px basis */
body.product-single .more-info-tabs__nav {
  display: flex !important; flex-direction: row !important; gap: 10px;
  border: 0 !important; padding: 0 !important;
}
body.product-single .more-info-tabs__nav::before,
body.product-single .more-info-tabs__nav::after { display: none !important; }
body.product-single .more-info-tabs__nav-item { margin: 0 !important; border: 0 !important; }
body.product-single .more-info-tabs__nav-link {
  padding: 10px 22px !important;
  border-radius: 12px !important;
  background: #f6e1df !important;
  color: #b0444c !important;
  font: 600 15px/1.2 var(--rlf-font) !important;
  border: 0 !important;
  cursor: pointer;
}
body.product-single .more-info-tabs__nav-link::before,
body.product-single .more-info-tabs__nav-link::after { display: none !important; }
body.product-single .more-info-tabs__nav-link.active { background: #e3a19d !important; color: #fff !important; }
body.product-single .more-tab-container { width: 100% !important; max-width: none !important; border-radius: 20px; overflow: hidden; }
body.product-single .more-tab-container .tab-pane img:not([class*="s-comments"]):not([class*="avatar"]) { width: 100%; height: auto; display: block; } /* description images fill the column (not the review avatars) */

/* ---------- Reviews: compact cards ---------- */
body.product-single salla-comments textarea { border-radius: 16px !important; border: 1px solid #ecdedb !important; background: #fff !important; }
body.product-single salla-comments :is(.s-button-element, select) { border-radius: 12px !important; }
body.product-single salla-comment-item.s-comments-item {
  display: block;
  background: #fff;
  border: 1px solid #ecdedb;
  border-radius: 16px;
  padding: 16px 18px !important;
  margin-bottom: 12px !important;
}
body.product-single .s-comments-item-wrapper { border: 0 !important; padding: 0 !important; margin: 0 !important; }
body.product-single .s-comments-item-inner { gap: 12px; align-items: flex-start; }
body.product-single .s-comments-item-avatar { flex: none !important; width: 44px !important; height: 44px !important; }
body.product-single .s-comments-item-avatar-img { width: 44px !important; height: 44px !important; border-radius: 50%; object-fit: cover; }
body.product-single .s-comments-item-user-wrapper { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
body.product-single .s-comments-item-user-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; height: auto !important; }
body.product-single .s-comments-item-user-info h3 { margin: 0 !important; font: 700 15px/1.4 var(--rlf-font) !important; white-space: nowrap; }
body.product-single .s-comments-item-user-info .s-comments-flex { align-items: center; gap: 4px; }
body.product-single .s-comments-item-has-order-check-text { font-size: 12px !important; color: #2f9e55 !important; white-space: nowrap; line-height: 1.4 !important; }
body.product-single .s-comments-item-has-order-check-text + .s-comments-item-has-order-check-text { display: none; } /* "تم التقييم" repeats what the stars already say */
body.product-single .s-comments-item-inner .flex.mt-2 { margin: 6px 0 0 !important; } /* stars row */
body.product-single .s-comments-item-timestamp { margin: 0 !important; font-size: 12px !important; color: #9a9a9a !important; }
body.product-single .s-comments-item-inner salla-rating-stars { transform: scale(.8); transform-origin: right center; }
body.product-single .s-comments-item-inner p:not(.s-comments-item-timestamp) { margin-top: 6px !important; font-size: 14px !important; line-height: 1.8 !important; color: #3a3a3a; }
body.product-single .more-info-tabs__content { padding-inline: 0 !important; } /* the theme left 90px empty beside the description */

/* ---------- Product sliders under the page (similar / you may like) ---------- */
body.product-single :is(.s-slider-block__title, .s-block__title) { position: relative; justify-content: center !important; margin-bottom: 28px !important; border: 0 !important; }
body.product-single :is(.s-block__title .right-side, .s-slider-block__title-right) { border: 0 !important; margin-inline: auto; } /* the theme's own underline — ours is under the title */
body.product-single :is(.s-slider-block__title h2, .s-block__title h2) {
  text-align: center;
  color: var(--rlf-plum, #9b6b93) !important;
  font: 700 clamp(20px, 1.6vw, 26px)/1.4 var(--rlf-font) !important;
}
body.product-single :is(.s-slider-block__title h2, .s-block__title h2)::after {
  content: "";
  display: block;
  width: 80px; height: 3px;
  margin: 10px auto 0;
  border-radius: 3px;
  background: #e3a19d;
}
/* cards in one row get the same height */
body.product-single salla-products-slider .swiper-slide { height: auto !important; }
body.product-single salla-products-slider custom-salla-product-card { height: 100%; }

/* ---------- Phones ---------- */
@media (max-width: 767px) {
  /* the theme lets the gallery touch the screen edges — keep it inside the page padding so the frame shows */
  body.product-single .product-single__slider { padding-inline: 16px !important; box-sizing: border-box; }
  body.product-single :is(.product-single__slider__inner, .product-single__media-col, .product-single__main-media, salla-slider.details-slider) { width: 100% !important; margin: 0 !important; padding: 0 !important; }
  body.product-single .s-slider-thumbs { margin: 0 !important; padding: 0 !important; overflow: hidden; }
  /* "السعر للروب الواحد" label on the photo: smaller on phones */
  body.product-single .details-slider .promotion-title {
    top: 12px !important; right: 12px !important;
    padding: 4px 10px !important;
    font-size: 11px !important; line-height: 1.5 !important;
    border-radius: 8px !important;
  }
  /* product sliders under the page: one card and a half, so it's clear you can swipe */
  body.product-single main .swiper-slide:has(custom-salla-product-card) { width: calc((100vw - 32px) / 1.5) !important; max-width: none !important; }
  /* the theme's bar pinned to the bottom of the screen: same rounded buttons as the design */
  body.product-single .sticky-product-bar { border-radius: 20px 20px 0 0 !important; box-shadow: 0 -6px 24px rgba(0, 0, 0, .08); }
  body.product-single .sticky-product-bar .s-button-element { border-radius: 12px !important; }
  body.product-single .sticky-product-bar apple-pay-button { --apple-pay-button-border-radius: 999px; border-radius: 999px !important; overflow: hidden; }
  body.product-single .product-single__title { font-size: 19px !important; }
  body.product-single .s-slider-thumbs .swiper-slide { height: 78px !important; border-radius: 10px; }
  body.product-single salla-slider.details-slider > .s-slider-container { border-radius: 18px; }
  body.product-single .more-info-tabs__nav-link { padding: 9px 18px !important; font-size: 14px !important; }
}

/* ---------- "أصلي 100%" card next to the product name (exact values from Figma, same on phone and desktop) ---------- */
.rlf-genuine {
  position: relative;
  flex: none;
  display: block;
  width: 136px; height: 40px;
  box-sizing: border-box;
  padding: 0 4px;
  border: 1px solid transparent;
  border-radius: 9px;
  /* fill #FFD4D2 at 38% over the page (#EBEBEB) = #F3E2E2, then the 1px gradient border #845150 → #D8B1AA */
  background: linear-gradient(#f3e2e2, #f3e2e2) padding-box,
              linear-gradient(to right, #845150, #d8b1aa) border-box;
  text-decoration: none !important;
}
.rlf-genuine::before {                       /* the dove + flower artwork from the design */
  content: "";
  position: absolute;
  top: 4.5px; right: 3px;
  width: 31px; height: 30px;
  background: url("data:image/webp;base64,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") center / contain no-repeat;
}
.rlf-genuine__title,
.rlf-genuine__sub { position: absolute; left: 4px; width: 104px; text-align: center; white-space: nowrap; }
.rlf-genuine__title { top: -1px; color: #a83638; font: 600 15px/26px var(--rlf-font); }
.rlf-genuine__sub { top: 25px; color: #222; font: 300 5.84px/10.12px var(--rlf-font); }
.rlf-genuine__sub b { color: #a83638; font-weight: 400; text-decoration: underline; }
body.product-single .product-single__title { align-items: center !important; flex-wrap: nowrap !important; }

/* ---------- Quantity: [+ | 1 | −] exact values from Figma, same on phone and desktop ---------- */
body.product-single .sticky-product-bar salla-quantity-input { width: auto !important; border: 0 !important; background: transparent !important; }
body.product-single .sticky-product-bar .s-quantity-input-container {
  display: inline-flex !important;
  flex-direction: row-reverse;              /* + on the left, − on the right */
  align-items: stretch;
  width: auto !important; height: 44px !important;
  padding: 0 !important; gap: 0 !important;
  background: transparent !important;
  border: 0 !important; border-radius: 0 !important;
  overflow: visible;
}
body.product-single .sticky-product-bar .s-quantity-input-button {
  width: 44px !important; height: 44px !important;
  display: flex; align-items: center; justify-content: center;
  background: #a83638 !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .10);
}
body.product-single .sticky-product-bar .s-quantity-input-increase-button { border-radius: 20px 0 0 20px !important; } /* left end */
body.product-single .sticky-product-bar .s-quantity-input-decrease-button { border-radius: 0 20px 20px 0 !important; } /* right end */
body.product-single .sticky-product-bar .s-quantity-input-button :is(i, span, path) { color: #fff !important; fill: #fff !important; background: transparent !important; }
body.product-single .sticky-product-bar .s-quantity-input-button svg { width: 15px !important; height: 15px !important; fill: #fff !important; background: transparent !important; }
body.product-single .sticky-product-bar .s-quantity-input-input {
  width: 48px !important; height: 44px !important;
  background: #fff !important;
  color: #000 !important;
  border: 0 !important; border-radius: 0 !important;
  font: 500 20px/28px var(--rlf-font) !important;
  text-align: center;
}
@media (max-width: 1023px) {
  body.product-single .sticky-product-bar__quantity { justify-content: center !important; }
}

/* ---------- Product description text: calmer sizes (headings were huge on phones) ---------- */
body.product-single .more-tab-container .tab-pane :is(p, li, span, div):not(salla-comments *) {
  font-size: 15px !important;
  line-height: 1.9 !important;
  color: #3a3a3a;
}
body.product-single .more-tab-container .tab-pane :is(h1, h2, h3, h4, h5, h6):not(salla-comments *) {
  margin: 22px 0 10px !important;
  color: var(--rlf-ink, #7a4b52) !important;
  font: 700 19px/1.5 var(--rlf-font) !important;
}
body.product-single .more-tab-container .tab-pane :is(h1, h2, h3, h4) :is(span, strong):not(salla-comments *) { font: inherit !important; color: inherit !important; }
body.product-single .more-tab-container .tab-pane strong:not(salla-comments *) { font-weight: 700; color: #222; }
body.product-single .more-tab-container .tab-pane :is(ul, ol):not(salla-comments *) { margin: 0 0 12px !important; padding-inline-start: 20px !important; }
body.product-single .more-tab-container .tab-pane li:not(salla-comments *) { margin-bottom: 6px; }
body.product-single .more-tab-container .tab-pane li::marker { color: #e3a19d; }
body.product-single .more-tab-container .tab-pane a:not(salla-comments *) { color: #c9636a !important; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px) {
  body.product-single .more-tab-container .tab-pane :is(p, li, span, div):not(salla-comments *) { font-size: 14px !important; line-height: 1.85 !important; }
  body.product-single .more-tab-container .tab-pane :is(h1, h2, h3, h4, h5, h6):not(salla-comments *) { font-size: 16.5px !important; margin: 18px 0 8px !important; }
}
/* ===== Product page (Figma design) — end ===== */