/* =========================================================
   NOURAVA — HAMAM ROSE V2
   Salla Theme Override
   Marble • Dusty Rose • Taupe • Antique Gold • Rose Ink
========================================================= */


/* =========================================================
   1. DESIGN TOKENS
========================================================= */

:root {
  --nv-rose: #C98A93;
  --nv-rose-dark: #B87480;

  --nv-marble: #F7F1EC;
  --nv-paper: #FFFDFC;

  --nv-taupe: #A79A93;
  --nv-gold: #C6A15B;

  --nv-ink: #4A2E33;
  --nv-muted: #756A66;

  --nv-soft-rose: #F4E4E6;
  --nv-soft-taupe: #EEE8E3;

  --nv-line: rgba(74, 46, 51, 0.12);
  --nv-line-gold: rgba(198, 161, 91, 0.45);

  --nv-shadow:
    0 18px 55px rgba(74, 46, 51, 0.08);

  --nv-shadow-hover:
    0 26px 70px rgba(74, 46, 51, 0.13);

  --nv-radius-sm: 14px;
  --nv-radius-md: 22px;
  --nv-radius-lg: 32px;
  --nv-radius-xl: 44px;

  --nv-serif:
    "Amiri",
    "Noto Naskh Arabic",
    "Geeza Pro",
    Georgia,
    serif;

  --nv-sans:
    "IBM Plex Sans Arabic",
    "Noto Sans Arabic",
    "Tajawal",
    Tahoma,
    Arial,
    sans-serif;

  --nv-max: 1320px;

  --nv-ease:
    cubic-bezier(.22, .8, .2, 1);
}


/* =========================================================
   2. GLOBAL
========================================================= */

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  background:
    radial-gradient(
      circle at 10% 8%,
      rgba(198, 161, 91, 0.08),
      transparent 28rem
    ),

    radial-gradient(
      circle at 90% 20%,
      rgba(201, 138, 147, 0.09),
      transparent 34rem
    ),

    var(--nv-marble) !important;

  color: var(--nv-ink) !important;

  font-family:
    var(--nv-sans) !important;

  -webkit-font-smoothing:
    antialiased;
}


::selection {
  background:
    var(--nv-rose);

  color: #ffffff;
}


main {
  overflow: clip;
}


.container {
  max-width:
    var(--nv-max);
}


h1,
h2,
h3,
h4,
h5,
h6 {
  color:
    var(--nv-ink);
}


h1,
h2,
.nv-display,
.nv-serif {
  font-family:
    var(--nv-serif) !important;

  font-weight:
    500;
}


p {
  color:
    var(--nv-muted);
}


a {
  transition:
    color .22s ease,
    opacity .22s ease,
    transform .22s ease;
}


img {
  transition:
    transform .6s var(--nv-ease),
    opacity .3s ease;
}


section,
.s-block {
  position: relative;
}


/* =========================================================
   3. HEADER
========================================================= */

header,
.store-header,
.main-header,
.navbar {
  background:
    rgba(255, 253, 252, 0.88) !important;

  backdrop-filter:
    blur(18px) saturate(125%);

  -webkit-backdrop-filter:
    blur(18px) saturate(125%);

  border-bottom:
    1px solid var(--nv-line) !important;

  transition:
    box-shadow .25s ease,
    background .25s ease;
}


body.nv-scrolled header,
body.nv-scrolled .store-header,
body.nv-scrolled .main-header {
  box-shadow:
    0 12px 42px rgba(74, 46, 51, 0.08);
}


header a,
.main-menu a,
.navbar a {
  color:
    var(--nv-ink) !important;
}


header a:hover,
.main-menu a:hover,
.navbar a:hover {
  color:
    var(--nv-rose) !important;
}


.navbar-brand img,
.store-logo img {
  max-height:
    58px;

  object-fit:
    contain;
}


/* =========================================================
   4. SEARCH
========================================================= */

header input,
.s-search-input,
.search-form input {
  min-height:
    46px;

  background:
    rgba(247, 241, 236, 0.85) !important;

  border:
    1px solid var(--nv-line) !important;

  border-radius:
    999px !important;

  transition:
    border-color .2s ease,
    box-shadow .2s ease;
}


header input:focus,
.s-search-input:focus,
.search-form input:focus {
  border-color:
    var(--nv-gold) !important;

  box-shadow:
    0 0 0 4px
    rgba(198, 161, 91, 0.12) !important;
}


/* =========================================================
   5. HERO
========================================================= */

.s-slider-block,
.main-slider,
.hero,
.banner-entry {
  overflow:
    hidden;
}


.s-slider-block__item,
.main-slider .swiper-slide,
.hero .swiper-slide {
  position:
    relative;

  isolation:
    isolate;

  min-height:
    clamp(520px, 62vw, 760px);

  text-align:
    center;
}


/* Dark cinematic overlay */

.s-slider-block__item::after,
.main-slider .swiper-slide::after,
.hero .swiper-slide::after {
  content: "";

  position:
    absolute;

  inset:
    0;

  background:
    linear-gradient(
      90deg,
      rgba(28, 18, 15, 0.66),
      rgba(46, 30, 26, 0.49),
      rgba(23, 15, 13, 0.58)
    );

  z-index:
    0;

  pointer-events:
    none;
}


.s-slider-block__item > *,
.main-slider .swiper-slide > *,
.hero .swiper-slide > * {
  position:
    relative;

  z-index:
    1;
}


.s-slider-block__item img,
.main-slider img,
.hero img {
  width:
    100%;

  height:
    100%;

  object-fit:
    cover;
}


.s-slider-block__item:hover img,
.main-slider .swiper-slide:hover img {
  transform:
    scale(1.018);
}


/* =========================================================
   6. HERO TITLE
   Applied by JS:
   class="nv-hero-highlight"
========================================================= */

.nv-hero-content {
  text-align:
    center !important;
}


.nv-hero-highlight {
  display:
    inline !important;

  width:
    auto !important;

  max-width:
    none !important;

  color:
    #ffffff !important;

  background:
    var(--nv-rose) !important;

  padding:
    0.10em 0.30em 0.14em !important;

  font-family:
    var(--nv-serif) !important;

  font-size:
    clamp(42px, 5vw, 70px) !important;

  font-weight:
    500 !important;

  line-height:
    1.55 !important;

  letter-spacing:
    0 !important;

  box-decoration-break:
    clone !important;

  -webkit-box-decoration-break:
    clone !important;

  border-radius:
    0 !important;

  box-shadow:
    0 10px 32px
    rgba(74, 46, 51, 0.16) !important;
}


/* Hero subtitle */

.nv-hero-content p {
  max-width:
    720px;

  margin:
    26px auto 0 !important;

  color:
    rgba(255, 255, 255, 0.88) !important;

  font-size:
    clamp(16px, 1.4vw, 21px) !important;

  line-height:
    1.9 !important;
}


/* =========================================================
   7. BUTTONS
========================================================= */

button,
.s-button-element,
.btn {
  border-radius:
    999px !important;

  transition:
    transform .22s ease,
    box-shadow .22s ease,
    background .22s ease,
    color .22s ease;
}


.s-button-primary,
button[type="submit"],
.btn-primary,
.nv-btn-primary {
  background:
    var(--nv-ink) !important;

  border-color:
    var(--nv-ink) !important;

  color:
    #ffffff !important;

  font-weight:
    700 !important;
}


.s-button-primary:hover,
button[type="submit"]:hover,
.btn-primary:hover,
.nv-btn-primary:hover {
  background:
    #5A3940 !important;

  transform:
    translateY(-2px);

  box-shadow:
    0 12px 30px
    rgba(74, 46, 51, 0.18) !important;
}


.nv-btn-outline {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    9px;

  min-height:
    48px;

  padding:
    0 24px;

  border:
    1px solid var(--nv-gold) !important;

  border-radius:
    999px;

  background:
    rgba(255, 253, 252, 0.78) !important;

  color:
    var(--nv-ink) !important;

  text-decoration:
    none !important;

  font-weight:
    700;

  transition:
    .25s ease;
}


.nv-btn-outline:hover {
  background:
    var(--nv-gold) !important;

  color:
    #ffffff !important;

  transform:
    translateY(-2px);
}


/* =========================================================
   8. SECTION SPACING
========================================================= */

.s-block,
main > section {
  margin-block:
    clamp(42px, 7vw, 96px);
}


.s-block__title {
  margin-bottom:
    30px;

  align-items:
    end;
}


.s-block__title h2,
.s-block__title h3 {
  font-family:
    var(--nv-serif) !important;

  font-size:
    clamp(30px, 4vw, 48px) !important;

  font-weight:
    500 !important;

  line-height:
    1.2 !important;

  color:
    var(--nv-ink) !important;
}


.s-block__title a {
  color:
    var(--nv-ink) !important;

  font-weight:
    700;

  border-bottom:
    1px solid var(--nv-gold);

  padding-bottom:
    4px;
}


.s-block__title a:hover {
  color:
    var(--nv-rose) !important;
}


/* =========================================================
   9. PRODUCT CARDS
========================================================= */

salla-products-list,
salla-products-slider,
salla-product-card,
custom-salla-product-card {
  display:
    block;
}


.s-product-card-entry {
  height:
    100%;

  overflow:
    hidden !important;

  background:
    rgba(255, 253, 252, 0.94) !important;

  border:
    1px solid var(--nv-line) !important;

  border-radius:
    var(--nv-radius-lg) !important;

  box-shadow:
    none !important;

  transition:
    transform .36s var(--nv-ease),
    box-shadow .36s var(--nv-ease),
    border-color .36s ease;
}


.s-product-card-entry:hover {
  transform:
    translateY(-8px);

  box-shadow:
    var(--nv-shadow-hover) !important;

  border-color:
    rgba(198, 161, 91, 0.35) !important;
}


.s-product-card-image {
  overflow:
    hidden !important;

  aspect-ratio:
    1 / 1.08;

  background:
    linear-gradient(
      145deg,
      #F6EEEA,
      #EEDFE1
    ) !important;
}


.s-product-card-image img {
  width:
    100%;

  height:
    100%;

  object-fit:
    cover;
}


.s-product-card-entry:hover
.s-product-card-image img {
  transform:
    scale(1.035);
}


.s-product-card-content {
  padding:
    20px 19px 18px !important;
}


.s-product-card-content-title,
.s-product-card-content-title a,
.s-product-card-entry h3 {
  color:
    var(--nv-ink) !important;

  font-size:
    15px !important;

  font-weight:
    700 !important;

  line-height:
    1.65 !important;
}


.s-product-card-price {
  color:
    var(--nv-ink) !important;

  font-size:
    16px !important;

  font-weight:
    800 !important;
}


/* Wishlist / favorite icon
   Salla already renders the circular clickable button internally.
   Keep the outer wrapper transparent to avoid a duplicated circle.
*/

.s-product-card-wishlist-btn {
  width: auto !important;
  height: auto !important;

  padding: 0 !important;

  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;

  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* Actual clickable wishlist button */

.s-product-card-wishlist-btn .s-button-element,
.s-product-card-wishlist-btn button {
  width: 42px !important;
  height: 42px !important;

  min-width: 42px !important;
  min-height: 42px !important;

  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 50% !important;

  background: rgba(255, 253, 252, 0.94) !important;

  border:
    1px solid rgba(198, 161, 91, 0.42) !important;

  color: var(--nv-ink) !important;

  box-shadow:
    0 6px 18px rgba(74, 46, 51, 0.08) !important;

  transition:
    background .22s ease,
    border-color .22s ease,
    color .22s ease,
    transform .22s ease,
    box-shadow .22s ease;
}


/* Hover */

.s-product-card-wishlist-btn .s-button-element:hover,
.s-product-card-wishlist-btn button:hover {
  background: var(--nv-soft-rose) !important;

  border-color: var(--nv-rose) !important;

  color: var(--nv-rose-dark) !important;

  transform: translateY(-1px);

  box-shadow:
    0 8px 20px rgba(74, 46, 51, 0.10) !important;
}


/* Heart icon */

.s-product-card-wishlist-btn svg,
.s-product-card-wishlist-btn i {
  width: 20px !important;
  height: 20px !important;

  color: currentColor !important;
  stroke: currentColor !important;
}


/* Active / favorited state when exposed by Salla */

.s-product-card-wishlist-btn[aria-pressed="true"] .s-button-element,
.s-product-card-wishlist-btn button[aria-pressed="true"] {
  background: var(--nv-soft-rose) !important;
  border-color: var(--nv-rose) !important;
  color: var(--nv-rose-dark) !important;
}


/* Add to cart */

.s-product-card-content-footer
.s-button-element,

.s-product-card-entry
salla-button
.s-button-element {
  min-height:
    46px !important;

  border-radius:
    999px !important;

  background:
    transparent !important;

  color:
    var(--nv-ink) !important;

  border:
    1px solid
    var(--nv-gold) !important;

  font-weight:
    700 !important;
}


.s-product-card-content-footer
.s-button-element:hover,

.s-product-card-entry
salla-button
.s-button-element:hover {
  background:
    var(--nv-ink) !important;

  color:
    #ffffff !important;

  border-color:
    var(--nv-ink) !important;

  transform:
    translateY(-2px);
}


/* Product badges */

.s-product-card-promotion-title,
.s-product-card-sale-price {
  background:
    var(--nv-ink) !important;

  color:
    #ffffff !important;

  border-radius:
    999px !important;
}


/* =========================================================
   10. NOURAVA CATEGORY SECTION
========================================================= */

.nv-category-section {
  margin:
    clamp(46px, 7vw, 96px) auto;

  padding:
    0 20px;
}


.nv-category-wrap {
  max-width:
    var(--nv-max);

  margin:
    auto;
}


.nv-eyebrow {
  margin-bottom:
    8px;

  color:
    var(--nv-rose);

  font-size:
    13px;

  font-weight:
    800;

  letter-spacing:
    .08em;
}


.nv-category-head {
  display:
    flex;

  align-items:
    end;

  justify-content:
    space-between;

  gap:
    24px;

  margin-bottom:
    28px;
}


.nv-category-head h2 {
  margin:
    0;

  color:
    var(--nv-ink) !important;

  font-family:
    var(--nv-serif) !important;

  font-size:
    clamp(34px, 5vw, 56px) !important;

  font-weight:
    500 !important;
}


.nv-category-head p {
  max-width:
    520px;

  margin:
    0;

  line-height:
    1.9;
}


.nv-category-grid {
  display:
    grid;

  grid-template-columns:
    1.2fr .9fr .9fr;

  gap:
    18px;
}


.nv-category-card {
  position:
    relative;

  min-height:
    410px;

  overflow:
    hidden;

  isolation:
    isolate;

  border-radius:
    var(--nv-radius-lg);

  border:
    1px solid
    rgba(198, 161, 91, 0.33);

  text-decoration:
    none !important;

  box-shadow:
    0 8px 30px
    rgba(74, 46, 51, 0.04);

  transition:
    transform .4s var(--nv-ease),
    box-shadow .4s var(--nv-ease);
}


.nv-category-card:first-child {
  min-height:
    500px;
}


.nv-category-card:hover {
  transform:
    translateY(-7px);

  box-shadow:
    var(--nv-shadow-hover);
}


.nv-category-art {
  position:
    absolute;

  inset:
    0;

  background:

    radial-gradient(
      circle at 65% 25%,
      rgba(255,255,255,.72),
      transparent 26%
    ),

    radial-gradient(
      circle at 30% 76%,
      rgba(198,161,91,.20),
      transparent 24%
    ),

    linear-gradient(
      145deg,
      #EFE2DE 0%,
      #D7AEB4 55%,
      #B87985 100%
    );

  transform:
    scale(1.02);

  transition:
    transform .7s var(--nv-ease);
}


.nv-category-card:nth-child(2)
.nv-category-art {
  background:

    radial-gradient(
      circle at 74% 22%,
      rgba(255,255,255,.70),
      transparent 24%
    ),

    linear-gradient(
      145deg,
      #F5F0EA 0%,
      #C9BDB5 62%,
      #9C8E88 100%
    );
}


.nv-category-card:nth-child(3)
.nv-category-art {
  background:

    radial-gradient(
      circle at 64% 22%,
      rgba(255,255,255,.50),
      transparent 22%
    ),

    linear-gradient(
      145deg,
      #F2E9E6 0%,
      #C89299 52%,
      #4A2E33 120%
    );
}


.nv-category-card:hover
.nv-category-art {
  transform:
    scale(1.06);
}


.nv-category-card::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  z-index:
    1;

  background:
    linear-gradient(
      to top,
      rgba(74,46,51,.70),
      rgba(74,46,51,.06) 65%
    );
}


.nv-category-content {
  position:
    absolute;

  z-index:
    2;

  inset-inline:
    26px;

  bottom:
    26px;

  color:
    #ffffff;
}


.nv-category-kicker {
  display:
    block;

  margin-bottom:
    5px;

  font-size:
    12px;

  opacity:
    .82;
}


.nv-category-content h3 {
  margin:
    0 0 10px;

  color:
    #ffffff !important;

  font-family:
    var(--nv-serif) !important;

  font-size:
    clamp(27px, 3vw, 39px) !important;

  font-weight:
    500 !important;
}


.nv-category-cta {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    8px;

  color:
    #ffffff;

  font-size:
    13px;

  font-weight:
    800;

  transition:
    transform .25s ease;
}


.nv-category-card:hover
.nv-category-cta {
  transform:
    translateX(-4px);
}


/* =========================================================
   11. NOURAVA RITUAL
========================================================= */

.nv-editorial {
  max-width:
    var(--nv-max);

  margin:
    clamp(58px, 8vw, 110px) auto;

  padding:
    0 20px;
}


.nv-editorial-inner {
  position:
    relative;

  display:
    grid;

  grid-template-columns:
    1fr .9fr;

  align-items:
    center;

  gap:
    50px;

  min-height:
    360px;

  padding:
    clamp(38px, 7vw, 82px);

  overflow:
    hidden;

  border:
    1px solid
    var(--nv-line-gold);

  border-radius:
    var(--nv-radius-xl);

  background:

    linear-gradient(
      110deg,
      rgba(247,241,236,.96),
      rgba(244,228,230,.92)
    ),

    var(--nv-paper);
}


.nv-editorial-inner::before {
  content:
    "";

  position:
    absolute;

  width:
    360px;

  height:
    360px;

  top:
    -90px;

  inset-inline-end:
    -80px;

  border:
    1px solid
    rgba(198,161,91,.45);

  border-radius:
    50%;

  box-shadow:

    0 0 0 42px
    rgba(198,161,91,.06),

    0 0 0 86px
    rgba(201,138,147,.05);
}


.nv-editorial-copy {
  position:
    relative;

  z-index:
    2;
}


.nv-editorial h2 {
  margin:
    .1em 0 .25em;

  color:
    var(--nv-ink) !important;

  font-family:
    var(--nv-serif) !important;

  font-size:
    clamp(38px, 5vw, 62px) !important;

  font-weight:
    500 !important;

  line-height:
    1.25 !important;
}


.nv-editorial p {
  max-width:
    620px;

  font-size:
    17px;

  line-height:
    2;
}


.nv-editorial-mark {
  position:
    relative;

  z-index:
    2;

  aspect-ratio:
    1 / 1;

  border-radius:
    50% 50% 14% 50%;

  background:

    radial-gradient(
      circle at 35% 30%,
      rgba(255,255,255,.78),
      transparent 23%
    ),

    linear-gradient(
      145deg,
      #D9BBB9,
      #C98A93 60%,
      #A66770
    );

  border:
    1px solid
    rgba(198,161,91,.45);

  box-shadow:
    0 20px 60px
    rgba(74,46,51,.12);
}


/* =========================================================
   12. STORE FEATURES
========================================================= */

.store-features,
.s-block--features {
  padding-block:
    18px;
}


.store-features .feature-item,
.s-block--features .feature-item,
.feature-item {
  padding:
    30px 22px !important;

  background:
    rgba(255,253,252,.86) !important;

  border:
    1px solid
    var(--nv-line) !important;

  border-radius:
    var(--nv-radius-md) !important;

  box-shadow:
    none !important;

  transition:
    transform .32s var(--nv-ease),
    box-shadow .32s ease,
    border-color .32s ease;
}


.store-features .feature-item:hover,
.s-block--features .feature-item:hover,
.feature-item:hover {
  transform:
    translateY(-5px);

  border-color:
    rgba(198,161,91,.38) !important;

  box-shadow:
    var(--nv-shadow) !important;
}


.feature-item i,
.feature-item svg {
  color:
    var(--nv-ink) !important;
}


.feature-item h3 {
  color:
    var(--nv-ink) !important;

  font-family:
    var(--nv-serif) !important;

  font-size:
    24px !important;

  font-weight:
    500 !important;
}


/* =========================================================
   13. TESTIMONIALS
========================================================= */

.s-block--testimonials,
.testimonials {
  overflow:
    visible !important;
}


.testimonials-item,
.testimonial,
.s-block--testimonials
.swiper-slide > div {
  padding:
    30px !important;

  background:
    rgba(255,253,252,.94) !important;

  border:
    1px solid
    var(--nv-line) !important;

  border-radius:
    var(--nv-radius-lg) !important;

  box-shadow:
    0 14px 45px
    rgba(74,46,51,.06) !important;
}


.testimonials-item::before,
.testimonial::before {
  content:
    "“";

  display:
    block;

  color:
    var(--nv-rose);

  font-family:
    Georgia,
    serif;

  font-size:
    58px;

  line-height:
    .8;

  opacity:
    .65;
}


.testimonials-item p,
.testimonial p {
  line-height:
    2 !important;
}


.testimonials-item h3,
.testimonial h3 {
  color:
    var(--nv-ink) !important;

  font-family:
    var(--nv-serif) !important;

  font-weight:
    500 !important;
}


/* =========================================================
   14. PRODUCT PAGE
========================================================= */

.product-single h1,
.product-details h1,
.product-entry h1 {
  color:
    var(--nv-ink) !important;

  font-family:
    var(--nv-serif) !important;

  font-size:
    clamp(34px, 4.8vw, 56px) !important;

  line-height:
    1.2 !important;
}


.product-details .price,
.product-single .price {
  color:
    var(--nv-ink) !important;

  font-weight:
    800 !important;
}


salla-add-product-button
.s-button-element {
  min-height:
    54px !important;

  background:
    var(--nv-ink) !important;

  color:
    #ffffff !important;

  border-color:
    var(--nv-ink) !important;

  border-radius:
    999px !important;
}


salla-slider[type="thumbs"] img,
.product-gallery img {
  border-radius:
    var(--nv-radius-md) !important;
}


/* =========================================================
   15. INPUTS
========================================================= */

input,
textarea,
select {
  background:
    rgba(255,253,252,.88) !important;

  border-color:
    var(--nv-line) !important;

  border-radius:
    var(--nv-radius-sm) !important;
}


input:focus,
textarea:focus,
select:focus {
  border-color:
    var(--nv-gold) !important;

  box-shadow:
    0 0 0 4px
    rgba(198,161,91,.12) !important;
}


/* =========================================================
   16. CART
========================================================= */

salla-cart-summary,
.cart-item {
  border-radius:
    var(--nv-radius-md) !important;
}


/* =========================================================
   17. FOOTER
========================================================= */

footer,
.store-footer {
  margin-top:
    clamp(60px, 8vw, 110px);

  background:
    #EDE5E0 !important;

  color:
    var(--nv-ink) !important;

  border-top:
    1px solid
    rgba(198,161,91,.28) !important;
}


footer h3,
footer h4,
.store-footer h3,
.store-footer h4 {
  color:
    var(--nv-ink) !important;

  font-family:
    var(--nv-serif) !important;

  font-weight:
    500 !important;
}


footer p,
.store-footer p {
  color:
    #70625E !important;
}


footer a,
.store-footer a {
  color:
    #655652 !important;
}


footer a:hover,
.store-footer a:hover {
  color:
    var(--nv-rose) !important;
}


/* =========================================================
   18. SCROLL REVEAL
========================================================= */

.nv-reveal {
  opacity:
    0;

  transform:
    translateY(18px);

  transition:
    opacity .7s var(--nv-ease),
    transform .7s var(--nv-ease);
}


.nv-reveal.nv-in {
  opacity:
    1;

  transform:
    none;
}


/* =========================================================
   19. BACK TO TOP
========================================================= */

.nv-top {
  position:
    fixed;

  inset-inline-end:
    20px;

  bottom:
    20px;

  z-index:
    80;

  display:
    grid;

  place-items:
    center;

  width:
    46px;

  height:
    46px;

  background:
    rgba(255,253,252,.92) !important;

  color:
    var(--nv-ink) !important;

  border:
    1px solid
    rgba(198,161,91,.55) !important;

  border-radius:
    50% !important;

  backdrop-filter:
    blur(10px);

  box-shadow:
    0 12px 30px
    rgba(74,46,51,.11);

  opacity:
    0;

  pointer-events:
    none;

  transform:
    translateY(10px);

  transition:
    .25s ease;
}


.nv-top.is-visible {
  opacity:
    1;

  pointer-events:
    auto;

  transform:
    none;
}


.nv-top:hover {
  background:
    var(--nv-ink) !important;

  color:
    #ffffff !important;
}


/* =========================================================
   20. ACCESSIBILITY
========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline:
    3px solid
    rgba(201,138,147,.42) !important;

  outline-offset:
    3px !important;
}


/* =========================================================
   21. TABLET
========================================================= */

@media (max-width: 1024px) {

  .nv-category-grid {
    grid-template-columns:
      1fr 1fr;
  }


  .nv-category-card:first-child {
    grid-column:
      1 / -1;

    min-height:
      430px;
  }


  .nv-editorial-inner {
    grid-template-columns:
      1fr .65fr;
  }

}


/* =========================================================
   22. MOBILE
========================================================= */

@media (max-width: 768px) {

  body {
    background:
      var(--nv-marble) !important;
  }


  .s-block,
  main > section {
    margin-block:
      38px;
  }


  /* HERO */

  .s-slider-block__item,
  .main-slider .swiper-slide,
  .hero .swiper-slide {
    min-height:
      520px;
  }


  .nv-hero-highlight {
    font-size:
      34px !important;

    line-height:
      1.65 !important;

    padding:
      .08em .24em .11em !important;
  }


  .nv-hero-content p {
    margin-top:
      18px !important;

    padding:
      0 20px;

    font-size:
      15px !important;
  }


  /* SECTION TITLES */

  .s-block__title {
    margin-bottom:
      20px;
  }


  .s-block__title h2,
  .s-block__title h3 {
    font-size:
      31px !important;
  }


  /* PRODUCT CARDS */

  .s-product-card-entry {
    border-radius:
      20px !important;
  }


  .s-product-card-content {
    padding:
      14px !important;
  }


  .s-product-card-content-title,
  .s-product-card-content-title a,
  .s-product-card-entry h3 {
    font-size:
      13px !important;
  }


  .s-product-card-content-footer
  .s-button-element {
    min-height:
      41px !important;

    font-size:
      12px !important;
  }


  /* CATEGORIES */

  .nv-category-section {
    padding:
      0 14px;
  }


  .nv-category-head {
    display:
      block;
  }


  .nv-category-head p {
    margin-top:
      10px;
  }


  .nv-category-grid {
    grid-template-columns:
      1fr;

    gap:
      14px;
  }


  .nv-category-card,
  .nv-category-card:first-child {
    grid-column:
      auto;

    min-height:
      310px;
  }


  .nv-category-content {
    inset-inline:
      20px;

    bottom:
      20px;
  }


  /* EDITORIAL */

  .nv-editorial {
    padding:
      0 14px;
  }


  .nv-editorial-inner {
    grid-template-columns:
      1fr;

    min-height:
      auto;

    padding:
      38px 24px;

    border-radius:
      28px;
  }


  .nv-editorial-mark {
    width:
      78%;

    max-width:
      300px;

    margin:
      auto;
  }


  /* FEATURES */

  .feature-item {
    padding:
      24px 18px !important;
  }


  /* FOOTER */

  footer,
  .store-footer {
    margin-top:
      58px;
  }

}


/* =========================================================
   23. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior:
      auto;
  }


  *,
  *::before,
  *::after {
    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;
  }


  .nv-reveal {
    opacity:
      1;

    transform:
      none;
  }

}
/* =========================================================
   24. NOURAVA V3 — HOMEPAGE POLISH
   Normalized rhythm, native product carousels, videos,
   cleaner alignment and mixed Salla/JS section support.
========================================================= */

:root {
  --nv-section-space: clamp(52px, 5.5vw, 78px);
  --nv-section-space-mobile: 38px;
  --nv-content-pad: clamp(16px, 3vw, 28px);
}

/* Prevent the old generic spacing rule from stacking huge gaps. */
main > section:not(.s-slider-block),
.s-block {
  margin-top: var(--nv-section-space) !important;
  margin-bottom: var(--nv-section-space) !important;
}

/* JS brand sections use the same centered content width. */
.nv-category-section,
.nv-editorial,
.nv-video-section {
  width: 100%;
  padding-inline: var(--nv-content-pad) !important;
  box-sizing: border-box;
}

.nv-category-wrap,
.nv-editorial,
.nv-video-wrap {
  width: 100%;
  max-width: var(--nv-max);
  margin-inline: auto !important;
  box-sizing: border-box;
}

/* Unified editorial headers */
.nv-category-head,
.nv-section-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 460px);
  align-items: end !important;
  gap: clamp(24px, 3vw, 42px) !important;
  margin-bottom: 26px !important;
}

.nv-category-head > div,
.nv-section-head > div {
  min-width: 0;
}

.nv-category-head h2,
.nv-section-head h2 {
  margin: 4px 0 0 !important;
  font-family: var(--nv-serif) !important;
  font-size: clamp(34px, 4vw, 52px) !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
  color: var(--nv-ink) !important;
}

.nv-category-head p,
.nv-section-head p {
  max-width: 460px !important;
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.9 !important;
  color: var(--nv-muted) !important;
}

/* Two real categories only: العناية + المكياج */
.nv-category-grid,
.nv-category-section.nv-two-categories .nv-category-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 20px !important;
}

.nv-category-card,
.nv-category-card:first-child,
.nv-category-section.nv-two-categories .nv-category-card,
.nv-category-section.nv-two-categories .nv-category-card:first-child {
  min-height: clamp(330px, 34vw, 430px) !important;
  border-radius: 28px !important;
}

.nv-category-content {
  inset-inline: 24px !important;
  bottom: 24px !important;
}

.nv-category-content h3 {
  font-size: clamp(30px, 3vw, 40px) !important;
  line-height: 1.2 !important;
}

/* Product section headings */
.s-block__title {
  margin-bottom: 22px !important;
  gap: 16px !important;
}

.s-block__title h2,
.s-block__title h3 {
  margin: 0 !important;
  font-size: clamp(30px, 3.2vw, 44px) !important;
  line-height: 1.25 !important;
}

.s-block__title a {
  white-space: nowrap;
}

/* Product card text rhythm */
.s-product-card-content {
  padding: 17px 17px 16px !important;
}

.s-product-card-content-title,
.s-product-card-content-title a,
.s-product-card-entry h3 {
  line-height: 1.55 !important;
}

.s-product-card-content-footer {
  margin-top: 13px !important;
}

/* =========================================================
   NATIVE SALLA PRODUCT CAROUSEL
   JS adds .nv-native-carousel and .nv-carousel-track.
========================================================= */

.nv-native-carousel {
  overflow: hidden;
}

.nv-native-carousel .nv-carousel-shell {
  position: relative;
}

.nv-native-carousel .nv-carousel-track {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 18px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
  padding: 4px 2px 18px !important;
}

.nv-native-carousel .nv-carousel-track::-webkit-scrollbar {
  display: none;
}

.nv-native-carousel .nv-carousel-item {
  flex: 0 0 clamp(230px, 24vw, 310px) !important;
  width: clamp(230px, 24vw, 310px) !important;
  min-width: 0 !important;
  scroll-snap-align: start;
}

.nv-native-carousel .nv-carousel-hidden {
  display: none !important;
}

.nv-carousel-controls {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 6px;
}

[dir="rtl"] .nv-carousel-controls {
  justify-content: flex-start;
}

.nv-carousel-arrow {
  width: 43px !important;
  height: 43px !important;
  min-width: 43px !important;
  min-height: 43px !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center;
  border-radius: 50% !important;
  border: 1px solid var(--nv-line-gold) !important;
  background: rgba(255, 253, 252, .92) !important;
  color: var(--nv-ink) !important;
  box-shadow: 0 8px 24px rgba(74, 46, 51, .07) !important;
  cursor: pointer;
}

.nv-carousel-arrow:hover {
  background: var(--nv-ink) !important;
  color: #fff !important;
  border-color: var(--nv-ink) !important;
}

/* =========================================================
   NOURAVA STORIES — VIDEO / REELS
========================================================= */

.nv-video-section {
  margin-block: var(--nv-section-space) !important;
}

.nv-video-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.nv-video-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 9 / 14;
  border: 1px solid rgba(198, 161, 91, .28);
  border-radius: 28px;
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.55), transparent 28%),
    linear-gradient(145deg, #F0DEDC, #C98A93 65%, #70454C);
  box-shadow: 0 12px 38px rgba(74, 46, 51, .07);
  isolation: isolate;
}

.nv-video-card video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: #eadbd8;
}

.nv-video-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(74, 46, 51, .48), transparent 45%);
}

.nv-video-label {
  position: absolute;
  z-index: 2;
  inset-inline: 20px;
  bottom: 20px;
  color: #fff;
  pointer-events: none;
}

.nv-video-label strong {
  display: block;
  margin-bottom: 4px;
  color: #fff;
  font-size: 18px;
  line-height: 1.5;
}

.nv-video-label span {
  display: block;
  color: rgba(255,255,255,.88);
  font-size: 13px;
  line-height: 1.7;
}

/* =========================================================
   EDITORIAL / RITUAL
========================================================= */

.nv-editorial {
  margin-block: var(--nv-section-space) !important;
}

.nv-editorial-inner {
  min-height: 330px !important;
  padding: clamp(32px, 5vw, 62px) !important;
  gap: clamp(28px, 4vw, 52px) !important;
}

.nv-editorial h2 {
  margin: 4px 0 14px !important;
  font-size: clamp(36px, 4.2vw, 56px) !important;
  line-height: 1.35 !important;
}

.nv-editorial p {
  margin: 0 0 22px !important;
  font-size: 16px !important;
  line-height: 1.9 !important;
}

/* The decorative shape should support the copy, not dominate it. */
.nv-editorial-mark {
  width: min(100%, 360px);
  justify-self: center;
}

/* =========================================================
   FEATURES / TESTIMONIALS
========================================================= */

.store-features,
.s-block--features {
  padding-block: 0 !important;
}

.feature-item {
  padding: 24px 20px !important;
}

.feature-item h3 {
  margin: 12px 0 5px !important;
  font-size: 21px !important;
}

.feature-item p {
  margin: 0 !important;
  line-height: 1.7 !important;
}

.testimonials-item,
.testimonial,
.s-block--testimonials .swiper-slide > div {
  padding: 25px !important;
}

.testimonials-item p,
.testimonial p {
  line-height: 1.8 !important;
}

/* Footer should not feel detached by a huge blank gap. */
footer,
.store-footer {
  margin-top: clamp(44px, 5vw, 70px) !important;
}

/* Header logo: keep square logo crisp and compact. */
.navbar-brand img,
.store-logo img {
  width: auto !important;
  max-width: 76px !important;
  max-height: 68px !important;
  object-fit: contain !important;
}

/* =========================================================
   V3 MOBILE
========================================================= */

@media (max-width: 768px) {
  main > section:not(.s-slider-block),
  .s-block {
    margin-top: var(--nv-section-space-mobile) !important;
    margin-bottom: var(--nv-section-space-mobile) !important;
  }

  .nv-category-section,
  .nv-editorial,
  .nv-video-section {
    padding-inline: 14px !important;
  }

  .nv-category-head,
  .nv-section-head {
    display: block !important;
    margin-bottom: 18px !important;
  }

  .nv-category-head p,
  .nv-section-head p {
    margin-top: 9px !important;
  }

  .nv-category-grid,
  .nv-category-section.nv-two-categories .nv-category-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .nv-category-card,
  .nv-category-card:first-child,
  .nv-category-section.nv-two-categories .nv-category-card,
  .nv-category-section.nv-two-categories .nv-category-card:first-child {
    min-height: 290px !important;
  }

  .nv-native-carousel .nv-carousel-item {
    flex-basis: min(78vw, 280px) !important;
    width: min(78vw, 280px) !important;
  }

  .nv-carousel-controls {
    display: none;
  }

  .nv-video-grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 8px;
  }

  .nv-video-grid::-webkit-scrollbar {
    display: none;
  }

  .nv-video-card {
    flex: 0 0 78%;
    max-width: 310px;
    scroll-snap-align: center;
    border-radius: 22px;
  }

  .nv-editorial-inner {
    grid-template-columns: 1fr !important;
    padding: 30px 22px !important;
  }

  .nv-editorial-mark {
    width: min(75%, 260px) !important;
  }
}
/* =========================================================
   CATEGORY IMAGE FIX
   Preserve the full 3:2 composition
========================================================= */

.nv-category-grid {
  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;

  gap: 20px !important;
}


/* Make cards match the source images: 3:2 */
.nv-category-card,
.nv-category-card:first-child,
.nv-category-section.nv-two-categories .nv-category-card,
.nv-category-section.nv-two-categories .nv-category-card:first-child {
  min-height: 0 !important;

  aspect-ratio: 3 / 2 !important;

  overflow: hidden !important;

  border-radius: 28px !important;

  background: #eadbd8 !important;
}


/* Show the image without zooming/cropping */
.nv-category-art,
.nv-category-card:nth-child(1) .nv-category-art,
.nv-category-card:nth-child(2) .nv-category-art {
  position: absolute !important;

  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  background-size: 100% 100% !important;

  background-position: center !important;

  background-repeat: no-repeat !important;

  transform: none !important;

  transition:
    transform .5s ease !important;
}


/* Very small hover zoom only */
.nv-category-card:hover .nv-category-art {
  transform:
    scale(1.015) !important;
}


/* Darkening only near the text */
.nv-category-card::after {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;

  background:
    linear-gradient(
      to top,
      rgba(74, 46, 51, 0.68) 0%,
      rgba(74, 46, 51, 0.24) 30%,
      rgba(74, 46, 51, 0.04) 58%,
      transparent 78%
    ) !important;
}


/* Category text */
.nv-category-content {
  position: absolute !important;

  z-index: 2 !important;

  inset-inline: 26px !important;

  bottom: 24px !important;
}


.nv-category-kicker,
.nv-category-content h3,
.nv-category-cta {
  color: #ffffff !important;

  text-shadow:
    0 2px 12px rgba(74, 46, 51, 0.35);
}


/* MOBILE */
@media (max-width: 768px) {

  .nv-category-grid {
    grid-template-columns:
      1fr !important;
  }


  .nv-category-card,
  .nv-category-card:first-child,
  .nv-category-section.nv-two-categories .nv-category-card,
  .nv-category-section.nv-two-categories .nv-category-card:first-child {
    aspect-ratio:
      3 / 2 !important;

    min-height:
      0 !important;
  }


  .nv-category-content {
    inset-inline:
      20px !important;

    bottom:
      18px !important;
  }

}