/* Final navigation, collection showcase and motion refinements. */
html { scroll-padding-top: 92px; }

.quick-links-bar {
  min-height: 38px;
  padding: 0 6vw;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  color: #fff8ef;
  background: linear-gradient(90deg, #3e0711, #741426 52%, #3e0711);
  border-bottom: 1px solid rgba(255,255,255,.16);
  overflow: hidden;
}

/* Product-family covers: four equal visual covers, not icon-only tiles. */
html body .collection-showcase .collection-tile {
  min-height: 290px !important;
  padding: 0 !important;
  justify-content: flex-end !important;
  isolation: isolate;
  background: #2b1619 !important;
}

html body .collection-showcase .collection-tile .collection-cover {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform .55s ease, filter .55s ease;
}

html body .collection-showcase .collection-tile::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, transparent 26%, rgba(33,13,17,.22) 50%, rgba(33,13,17,.92) 100%) !important;
  box-shadow: none !important;
  animation: none !important;
}

html body .collection-showcase .collection-tile:hover .collection-cover {
  transform: scale(1.045);
  filter: saturate(1.08) contrast(1.04);
}

html body .collection-showcase .collection-tile > i,
html body .collection-showcase .collection-tile > b,
html body .collection-showcase .collection-tile > span,
html body .collection-showcase .collection-tile > small {
  position: relative;
  z-index: 2;
  margin-inline: 18px;
  color: #fff !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.58);
}

html body .collection-showcase .collection-tile > i { display: none !important; }
html body .collection-showcase .collection-tile > b { top: 15px; margin: 0; color: #f4d294 !important; border-color: rgba(255,255,255,.55) !important; }
html body .collection-showcase .collection-tile > span { margin-top: auto; font-size: 29px !important; }
html body .collection-showcase .collection-tile > small { margin-bottom: 22px; color: #f9e9dc !important; }

/* Male illustrations share one exact frame and scale. */
html body .men-character-art {
  width: 100%;
  aspect-ratio: 4 / 5;
  height: auto !important;
  display: grid;
  place-items: center;
}

html body .men-character-art img {
  width: 100%;
  height: 100%;
  padding: 8px;
  object-fit: contain !important;
  object-position: center !important;
}

/* Separate product sliders for her and for him. */
.splash-section { overflow: hidden; }
.splash-slider-block { max-width: 1260px; margin: 0 auto 72px; }
.splash-slider-block:last-child { margin-bottom: 0; }
.splash-slider-heading { max-width: 760px; margin: 0 auto 26px; text-align: center; }
.splash-slider-heading small { color: #9a7658; font-size: 10px; letter-spacing: 3px; }
.splash-slider-heading h3 { margin: 8px 0 10px; color: #5d0d1a; font-family: 'Cormorant Garamond','Aref Ruqaa',serif; font-size: clamp(45px,6vw,70px); line-height: .9; }
.splash-slider-heading p { margin: 0; color: #725c58; font-size: 14px; line-height: 1.7; }
.splash-slider-him { padding-top: 62px; border-top: 1px solid rgba(93,13,26,.14); }

.splash-slider-shell { position: relative; }
.splash-slider-viewport { overflow: hidden; padding: 12px 5px 34px; }
.splash-slider-track { display: flex; gap: 18px; transition: transform .65s cubic-bezier(.22,.61,.36,1); will-change: transform; }
.splash-card { position: relative; flex: 0 0 calc((100% - 36px) / 3); min-width: 0; overflow: hidden; background: #fffaf5; border: 1px solid rgba(93,13,26,.12); box-shadow: 0 20px 45px rgba(93,13,26,.1); }
.splash-slider-him .splash-slider-track { justify-content: center; }
.splash-slider-him .splash-card { flex-basis: calc((100% - 18px) / 2); max-width: 480px; }
.splash-card > img { width: 100%; height: 410px; display: block; object-fit: contain; object-position: center; background: linear-gradient(145deg,#fffaf5,#f0dfd5); }
.splash-card-copy { min-height: 205px; padding: 20px 21px 24px; border-top: 1px solid rgba(93,13,26,.08); }
.splash-card-copy > small { color: #a47b55; font-size: 9px; letter-spacing: 2px; }
.splash-card-copy h4 { margin: 5px 0 10px; color: #5d0d1a; font-family: 'Cormorant Garamond','Aref Ruqaa',serif; font-size: 30px; line-height: 1; }
.splash-card-copy p { margin: 0; color: #715b57; font-size: 13px; line-height: 1.75; }

.splash-slider-arrow { position: absolute; top: 44%; z-index: 5; width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.62); border-radius: 50%; background: #5d0d1a; color: #fff; box-shadow: 0 12px 30px rgba(93,13,26,.28); font-size: 30px; line-height: 1; cursor: pointer; transition: .25s; }
.splash-slider-arrow:hover { background: #b88744; transform: scale(1.06); }
.splash-slider-arrow:disabled { opacity: .22; pointer-events: none; }
.splash-slider-prev { left: -22px; }
.splash-slider-next { right: -22px; }
html[dir="rtl"] .splash-slider-prev { left: auto; right: -22px; }
html[dir="rtl"] .splash-slider-next { right: auto; left: -22px; }
.splash-slider-dots { display: flex; justify-content: center; gap: 7px; margin-top: -11px; }
.splash-slider-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 99px; background: #caa7a2; cursor: pointer; transition: width .25s, background .25s; }
.splash-slider-dots button.active { width: 25px; background: #5d0d1a; }

@media (max-width: 800px) {
  html body .collection-showcase .collection-nav { gap: 5px !important; }
  html body .collection-showcase .collection-tile { min-height: 142px !important; }
  html body .collection-showcase .collection-tile > span { margin-inline: 5px; font-size: clamp(12px,3.55vw,15px) !important; text-align: center; }
  html body .collection-showcase .collection-tile > b,
  html body .collection-showcase .collection-tile > small { display: none !important; }
  html body .collection-showcase .collection-tile::before { background: linear-gradient(180deg,transparent 28%,rgba(33,13,17,.18) 55%,rgba(33,13,17,.9)) !important; }

  html body .men-character-art { aspect-ratio: 4 / 5; margin: -6px -6px 9px; width: calc(100% + 12px); }
  html body .men-character-art img { padding: 3px; }

  .splash-section { padding-inline: 14px !important; }
  .splash-slider-block { margin-bottom: 54px; }
  .splash-slider-him { padding-top: 48px; }
  .splash-slider-heading { margin-bottom: 17px; padding: 0 12px; }
  .splash-slider-heading h3 { font-size: 43px; }
  .splash-slider-heading p { font-size: 12px; line-height: 1.55; }
  .splash-slider-viewport { margin-inline: -14px; padding-inline: 14px; overflow: hidden; }
  .splash-slider-track { gap: 10px; }
  .splash-card { flex-basis: 84%; }
  .splash-slider-him .splash-slider-track { justify-content: flex-start; }
  .splash-slider-him .splash-card { flex-basis: 84%; max-width: none; }
  .splash-card > img { height: 330px; }
  .splash-card-copy { min-height: 185px; padding: 17px 17px 21px; }
  .splash-card-copy h4 { font-size: 27px; }
  .splash-card-copy p { font-size: 12px; line-height: 1.65; }
  .splash-slider-arrow { top: 41%; width: 38px; height: 38px; font-size: 25px; }
  .splash-slider-prev { left: -4px; }
  .splash-slider-next { right: -4px; }
  html[dir="rtl"] .splash-slider-prev { left: auto; right: -4px; }
  html[dir="rtl"] .splash-slider-next { right: auto; left: -4px; }
}

/* Final visual balance for the four collection covers. */
html body .collection-showcase .perfume-tile .collection-cover {
  object-position: 42% 63% !important;
  transform: scale(1.08) !important;
}

html body .collection-showcase .musk-tile .collection-cover {
  object-position: 69% 60% !important;
  transform: scale(1.06) !important;
}

html body .collection-showcase .body-tile .collection-cover {
  object-position: 50% 72% !important;
  transform: scale(1.1) translateY(-4%) !important;
}

html body .collection-showcase .splash-tile .collection-cover {
  object-position: 79% 58% !important;
  transform: scale(1.18) !important;
  transform-origin: 79% 58% !important;
}

html body .collection-showcase .perfume-tile:hover .collection-cover { transform: scale(1.12) !important; }
html body .collection-showcase .musk-tile:hover .collection-cover { transform: scale(1.1) !important; }
html body .collection-showcase .body-tile:hover .collection-cover { transform: scale(1.14) translateY(-4%) !important; }
html body .collection-showcase .splash-tile:hover .collection-cover { transform: scale(1.22) !important; }

/* The two approved male illustrations share the same perceived scale. */
html body .charisma-card .men-character-art img { padding: 16px !important; }
html body .chic-card .men-character-art img { padding: 5px !important; }

/* A tighter story block keeps the narrative elegant without taking over the page. */
html body .brand-story { padding: 76px 7vw 66px !important; }
html body .brand-story .story-mark {
  top: 18px !important;
  width: 92px !important;
  height: 92px !important;
  font-size: 63px !important;
}
html body .brand-story .story-copy { padding: 58px clamp(28px, 6vw, 78px) 35px !important; }
html body .brand-story .story-copy h2 { margin-bottom: 17px !important; }
html body .brand-story .story-copy p { line-height: 1.75 !important; }
html body .brand-story .story-proof { margin-top: 21px !important; padding: 17px 0 2px !important; }
html body .brand-story .story-copy > i { margin-top: 14px !important; }

@media (max-width: 800px) {
  html body .collection-showcase .perfume-tile .collection-cover { object-position: 42% 64% !important; transform: scale(1.12) !important; }
  html body .collection-showcase .musk-tile .collection-cover { object-position: 70% 61% !important; transform: scale(1.1) !important; }
  html body .collection-showcase .body-tile .collection-cover { object-position: 50% 74% !important; transform: scale(1.14) translateY(-5%) !important; }
  html body .collection-showcase .splash-tile .collection-cover { object-position: 83% 59% !important; transform: scale(1.24) !important; transform-origin: 83% 59% !important; }

  html body .charisma-card .men-character-art img { padding: 11px !important; }
  html body .chic-card .men-character-art img { padding: 2px !important; }

  html body .brand-story { padding: 56px 12px 32px !important; }
  html body .brand-story::after { inset: 10px !important; }
  html body .brand-story .story-mark {
    top: 10px !important;
    width: 72px !important;
    height: 72px !important;
    border-width: 4px !important;
    font-size: 48px !important;
  }
  html body .brand-story .story-copy { padding: 43px 15px 20px !important; }
  html body .brand-story .story-copy small { margin-bottom: 8px !important; }
  html body .brand-story .story-copy h2 { font-size: 32px !important; margin-bottom: 10px !important; }
  html[dir="rtl"] body .brand-story .story-copy h2 { font-size: 34px !important; }
  html body .brand-story .story-copy p { font-size: 12px !important; line-height: 1.55 !important; }
  html[dir="rtl"] body .brand-story .story-copy p { font-size: 13px !important; line-height: 1.65 !important; }
  html body .brand-story .story-proof { gap: 24px !important; margin-top: 13px !important; padding-top: 12px !important; }
  html body .brand-story .story-proof b { font-size: 25px !important; }
  html body .brand-story .story-copy > i { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .splash-slider-track,
  .collection-cover { transition: none !important; }
}

.quick-links-bar > strong {
  flex: 0 0 auto;
  color: #efc98f;
  font-size: 9px;
  letter-spacing: 2.2px;
}

.quick-links-bar > nav {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
}

.quick-links-bar a {
  position: relative;
  color: #fff8ef;
  text-decoration: none;
  padding: 8px 12px;
  font-size: 11px;
  transition: color .25s ease, background .25s ease;
}

.quick-links-bar a::after {
  content: '';
  position: absolute;
  right: 12px;
  bottom: 4px;
  left: 12px;
  height: 1px;
  background: #e8bc78;
  transform: scaleX(0);
  transition: transform .25s ease;
}

.quick-links-bar a:hover {
  color: #f4cf97;
  background: rgba(255,255,255,.06);
}

.quick-links-bar a:hover::after { transform: scaleX(1); }

.collection-showcase {
  position: relative;
  overflow: hidden;
  padding: 86px 6vw 78px;
  color: #fff;
  background:
    radial-gradient(circle at 15% 20%, rgba(232,188,120,.22), transparent 28%),
    radial-gradient(circle at 85% 80%, rgba(234,201,193,.18), transparent 26%),
    linear-gradient(140deg, #3b0912, #6c1424 55%, #4b0b17);
}

.collection-showcase::before,
.collection-showcase::after {
  content: '✦';
  position: absolute;
  color: rgba(238,196,132,.16);
  font-size: 240px;
  line-height: 1;
  animation: collectionStar 8s ease-in-out infinite;
}

.collection-showcase::before { top: -80px; left: -45px; }
.collection-showcase::after { right: -50px; bottom: -100px; animation-delay: -4s; }

.collection-showcase-heading {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto 42px;
  text-align: center;
}

.collection-showcase-heading small {
  color: #e9bd7d;
  font-size: 10px;
  letter-spacing: 3px;
}

.collection-showcase-heading h2 {
  margin: 10px 0 14px;
  color: #fff8ef;
  font-family: 'Cormorant Garamond', Tajawal, serif;
  font-size: clamp(50px, 6vw, 78px);
  line-height: .88;
}

.collection-showcase-heading p {
  margin: 0;
  color: #ead5ce;
  font-size: 14px;
}

html body .collection-showcase .collection-nav {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  background: transparent !important;
}

html body .collection-showcase .collection-nav::before,
html body .collection-showcase .collection-tile::after {
  display: none !important;
}

html body .collection-showcase .collection-tile {
  position: relative;
  isolation: isolate;
  min-height: 230px !important;
  padding: 26px 18px !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px !important;
  color: #5d0d1a !important;
  text-align: center;
  text-transform: none;
  letter-spacing: 0;
  border: 1px solid rgba(255,255,255,.42) !important;
  border-radius: 2px;
  background: linear-gradient(155deg, rgba(255,250,244,.98), rgba(238,218,204,.91));
  box-shadow: 0 24px 60px rgba(24,3,8,.28);
  overflow: hidden;
  transform: translateY(0);
  transition: transform .35s ease, box-shadow .35s ease;
}

html body .collection-showcase .collection-tile::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -80%;
  left: -60%;
  width: 70%;
  height: 260%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.78), transparent);
  transform: rotate(24deg);
  animation: tileShine 5.8s ease-in-out infinite;
}

html body .collection-showcase .collection-tile:nth-child(2)::before { animation-delay: -1.4s; }
html body .collection-showcase .collection-tile:nth-child(3)::before { animation-delay: -2.8s; }
html body .collection-showcase .collection-tile:nth-child(4)::before { animation-delay: -4.2s; }

html body .collection-showcase .collection-tile:hover {
  transform: translateY(-10px) scale(1.015);
  box-shadow: 0 32px 70px rgba(24,3,8,.42), 0 0 0 2px #d8a764;
}

.collection-tile > i {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  color: #fff;
  background: #5d0d1a;
  border-radius: 50%;
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  font-style: normal;
  box-shadow: 0 10px 25px rgba(93,13,26,.25);
}

html body .collection-showcase .collection-tile > b {
  margin-top: 10px;
  color: #b88744;
  font-size: 12px;
}

html body .collection-showcase .collection-tile > span {
  color: #5d0d1a;
  font-family: 'Cormorant Garamond', Tajawal, serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
}

html body .collection-showcase .collection-tile > small {
  color: #836660;
  font-size: 11px;
  letter-spacing: .4px;
}

/* Automatic product strips: headings stay still while the products glide. */
.auto-strip {
  display: flex !important;
  align-items: stretch !important;
  gap: 10px !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  direction: ltr;
  scrollbar-width: none;
}

.auto-strip::-webkit-scrollbar { display: none; }
.auto-strip > * { flex: 0 0 auto !important; scroll-snap-align: start; }

.women-products.auto-strip > figure,
.men-products.auto-strip > figure {
  width: calc((100% - 10px) / 2) !important;
}

.women-products.two.auto-strip > figure,
.men-products.two.auto-strip > figure,
.splash-products.auto-strip > figure,
.splash-him-products.auto-strip > figure,
#musk .catalog-grid.auto-strip > article {
  width: 100% !important;
}

.catalog-grid.auto-strip > article {
  width: calc((100% - 22px) / 2) !important;
}

.auto-strip-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  margin: 16px 0 2px;
}

.auto-strip-dots button {
  width: 7px;
  height: 7px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50%;
  background: rgba(93,13,26,.26) !important;
  cursor: pointer;
  transition: width .25s ease, background .25s ease;
}

.auto-strip-dots button.active {
  width: 24px;
  border-radius: 99px;
  background: #8a1428 !important;
}

.women-character .auto-strip-dots button,
.men-character .auto-strip-dots button { background: rgba(232,188,120,.3) !important; }
.women-character .auto-strip-dots button.active,
.men-character .auto-strip-dots button.active { background: #e8bc78 !important; }

/* Every main chapter enters with a gentle editorial motion. */
.motion-ready main > section,
.motion-ready .collection-showcase {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1);
}

.motion-ready main > section.section-in-view,
.motion-ready .collection-showcase.section-in-view {
  opacity: 1;
  transform: translateY(0);
}

.closing {
  padding-top: 68px !important;
  padding-bottom: 72px !important;
}

@keyframes tileShine {
  0%, 55% { left: -80%; opacity: 0; }
  66% { opacity: .9; }
  88%, 100% { left: 135%; opacity: 0; }
}

@keyframes collectionStar {
  0%, 100% { transform: rotate(0) scale(.92); opacity: .45; }
  50% { transform: rotate(16deg) scale(1.06); opacity: .85; }
}

@media (max-width: 900px) {
  .quick-links-bar { justify-content: flex-start; gap: 10px; padding: 0 16px; }
  .quick-links-bar > nav { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .quick-links-bar > nav::-webkit-scrollbar { display: none; }
  html body .collection-showcase .collection-nav { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .catalog-grid.auto-strip > article { width: 86% !important; }
}

@media (max-width: 560px) {
  .quick-links-bar > strong { display: none; }
  .quick-links-bar a { padding: 8px 10px; }
  .collection-showcase { padding: 68px 16px 58px; }
  .collection-showcase-heading { margin-bottom: 30px; }
  html body .collection-showcase .collection-nav { gap: 10px !important; }
  html body .collection-showcase .collection-tile { min-height: 174px !important; padding: 18px 8px !important; }
  .collection-tile > i { width: 45px; height: 45px; font-size: 22px; }
  html body .collection-showcase .collection-tile > span { font-size: 21px !important; }
  html body .collection-showcase .collection-tile > small { font-size: 10px; line-height: 1.35; }
  .women-products.auto-strip > figure,
  .men-products.auto-strip > figure,
  .catalog-grid.auto-strip > article { width: 100% !important; }

  .customer-reviews {
    padding: 34px 10px 20px !important;
  }

  .reviews-heading {
    margin-bottom: 10px !important;
  }

  .reviews-heading > p,
  .reviews-heading > span {
    display: none !important;
  }

  .reviews-heading h2 {
    margin: 0 !important;
    font-size: 38px !important;
  }

  .reviews-viewport {
    max-width: 250px !important;
    padding: 5px 9px !important;
  }

  .review-slide {
    padding: 5px !important;
  }

  .review-slide img {
    width: 100% !important;
    height: 320px !important;
    max-height: 320px !important;
    object-fit: contain !important;
  }

  .reviews-dots {
    margin-top: 9px !important;
    gap: 6px !important;
  }

  .reviews-dots button {
    width: 6px !important;
    height: 6px !important;
  }

  .closing {
    padding: 24px 14px 30px !important;
  }

  .closing p {
    margin: 0 0 8px !important;
    font-size: 13px !important;
    letter-spacing: 4px !important;
  }

  .closing h2 {
    font-size: 34px !important;
    line-height: .95 !important;
  }
}

/* Approved illustrated men: one formal charismatic look and one smart-casual chic look. */
.men-character-art {
  position: relative;
  height: 255px;
  margin: -30px -30px 24px;
  overflow: hidden;
  border-bottom: 1px solid rgba(232, 188, 120, .3);
  background: #2b171a;
}

.men-character-art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  transition: transform .6s ease;
}

.men-character:hover .men-character-art img { transform: scale(1.025); }
.charisma-card .men-character-art { background: #5d0d1a; }
.chic-card .men-character-art { background: #eee6dc; }

.men-character-art > span {
  position: absolute;
  right: 16px;
  bottom: 14px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 50%;
  color: #fff8ef;
  background: rgba(48,20,22,.86);
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px;
}

.personality-clickable { cursor: pointer; }
.personality-clickable:focus-visible { outline: 3px solid #e8bc78; outline-offset: 4px; }

.splash-character-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 18px !important;
  color: #5d0d1a !important;
}

/* For Him splash personalities continue the same character story as perfumes. */
.men-splash-personas {
  padding: 86px 6vw 96px;
  color: #fff;
  background: radial-gradient(circle at 82% 15%, rgba(218,166,91,.18), transparent 28%), linear-gradient(145deg,#170f10,#3b211e 55%,#5d0d1a);
}

.men-splash-heading {
  max-width: 760px;
  margin: 0 auto 38px;
  text-align: center;
}

.men-splash-heading > small { color: #e8bc78; font-size: 10px; letter-spacing: 4px; }
.men-splash-heading > h3 { margin: 10px 0 12px; font-family: 'Cormorant Garamond','Aref Ruqaa',serif; font-size: clamp(48px,6vw,76px); line-height: .9; }
.men-splash-heading > p { margin: 0; color: #e8d8d1; font-size: 14px; }

.men-splash-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 18px;
  max-width: 1240px;
  margin: auto;
}

.men-splash-character {
  position: relative;
  overflow: hidden;
  padding: 20px;
  color: #28191b;
  background: linear-gradient(145deg,#fffaf3,#eadacc);
  border: 1px solid rgba(232,188,120,.35);
  box-shadow: 0 26px 60px rgba(0,0,0,.22);
}

.men-splash-art { height: 310px; margin: -20px -20px 22px; overflow: hidden; background: #eee4d9; }
.men-splash-art img { width: 100%; height: 100%; display: block; object-fit: contain; object-position: center; transition: transform .6s ease; }
.men-splash-character:hover .men-splash-art img { transform: scale(1.025); }
.charisma-splash-card .men-splash-art { background: #5d0d1a; }

.men-splash-copy > small { color: #9b7045; font-size: 9px; letter-spacing: 2px; }
.men-splash-copy h3 { margin: 7px 0 8px; color: #5d0d1a; font-family: 'Cormorant Garamond','Aref Ruqaa',serif; font-size: 45px; line-height: .9; }
.men-splash-copy p { margin: 0 0 18px; color: #715b57; font-size: 13px; line-height: 1.6; }
.men-splash-cta { display: inline-flex; gap: 5px; color: #5d0d1a; font-size: 12px; font-weight: 700; text-decoration: none; }
.men-splash-cta i { font-style: normal; }

.men-splash-character .splash-him-products {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
  margin-top: 18px;
}

.men-splash-character .splash-him-product { padding: 9px 9px 0; background: #fff9f2; box-shadow: 0 16px 35px rgba(93,13,26,.1); }
.men-splash-character .splash-him-product img { width: 100%; height: 330px; object-fit: contain; object-position: center; background: #fff9f2; }
.men-splash-character .splash-him-product figcaption { padding: 12px 4px 15px; }
.men-splash-character .splash-him-product figcaption b { font-size: 22px; }

@media (max-width: 800px) {
  /* Four brand crafts stay on one line in a single mobile screen. */
  html body .collection-showcase .collection-nav {
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    gap: 4px !important;
  }

  html body .collection-showcase .collection-tile {
    min-height: 92px !important;
    padding: 8px 2px !important;
    border-top-width: 2px !important;
  }

  html body .collection-showcase .collection-tile > i {
    width: 27px !important;
    height: 27px !important;
    font-size: 14px !important;
  }

  html body .collection-showcase .collection-tile > b,
  html body .collection-showcase .collection-tile > small { display: none !important; }
  html body .collection-showcase .collection-tile > span { font-size: clamp(12px,3.8vw,16px) !important; line-height: 1 !important; }

  /* Four splash characters stay side by side; tapping one opens its product gallery. */
  html body .splash-section .splash-personas {
    display: grid !important;
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
    gap: 5px !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  html body .splash-section .splash-persona {
    min-width: 0 !important;
    padding: 4px !important;
    display: flex !important;
    flex-direction: column;
    border-top: 2px solid #b88744;
  }

  html body .splash-section .splash-persona-art {
    order: 1;
    height: 94px !important;
    margin: 0 0 7px !important;
  }

  html body .splash-section .splash-persona header {
    order: 2;
    padding: 0 !important;
    text-align: center;
  }

  html body .splash-section .splash-persona header small,
  html body .splash-section .splash-persona header p,
  html body .splash-section .splash-products,
  html body .splash-section .splash-persona > .auto-strip-dots { display: none !important; }
  html body .splash-section .splash-persona header h3 { margin: 0 !important; min-height: 31px; display: grid; place-items: center; font-size: clamp(13px,3.6vw,17px) !important; line-height: .95; }

  html body .splash-section .splash-character-link {
    order: 3;
    width: 100%;
    min-height: 25px;
    margin: 3px 0 0 !important;
    padding: 0 !important;
    justify-content: center;
    font-size: 0 !important;
  }

  html body .splash-section .splash-character-link::before { content: 'EXPLORE'; font-size: 7px; letter-spacing: .7px; }
}

/* Final cover and male-illustration sizing overrides. */
html body .collection-showcase .collection-tile {
  min-height: 290px !important;
  padding: 0 !important;
  justify-content: flex-end !important;
  background: #2b1619 !important;
}
html body .collection-showcase .collection-tile .collection-cover {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}
html body .collection-showcase .collection-tile::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg,transparent 26%,rgba(33,13,17,.2) 52%,rgba(33,13,17,.94)) !important;
  box-shadow: none !important;
  animation: none !important;
}
html body .collection-showcase .collection-tile > i { display: none !important; }
html body .collection-showcase .collection-tile > b,
html body .collection-showcase .collection-tile > span,
html body .collection-showcase .collection-tile > small { position: relative !important; z-index: 2 !important; color: #fff !important; }
html body .collection-showcase .collection-tile > b { display: grid !important; top: 15px !important; margin: 0 !important; color: #f4d294 !important; border-color: rgba(255,255,255,.55) !important; }
html body .collection-showcase .collection-tile > span { margin-top: auto !important; margin-inline: 18px !important; font-size: 29px !important; text-shadow: 0 2px 12px rgba(0,0,0,.65); }
html body .collection-showcase .collection-tile > small { display: block !important; margin: 0 18px 22px !important; color: #f9e9dc !important; text-shadow: 0 2px 12px rgba(0,0,0,.65); }

html body .men-character-art {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 5 !important;
  display: grid !important;
  place-items: center !important;
}
html body .men-character-art img {
  width: 100% !important;
  height: 100% !important;
  padding: 8px !important;
  object-fit: contain !important;
  object-position: center !important;
}

@media (max-width: 800px) {
  html body .collection-showcase .collection-nav { grid-template-columns: repeat(4,minmax(0,1fr)) !important; gap: 5px !important; }
  html body .collection-showcase .collection-tile { min-height: 142px !important; padding: 0 !important; }
  html body .collection-showcase .collection-tile > b,
  html body .collection-showcase .collection-tile > small { display: none !important; }
  html body .collection-showcase .collection-tile > span { margin: auto 4px 12px !important; font-size: clamp(11px,3.45vw,15px) !important; line-height: 1 !important; text-align: center; }
  html body .men-character-art { width: calc(100% + 12px) !important; margin: -6px -6px 9px !important; aspect-ratio: 4 / 5 !important; }
  html body .men-character-art img { padding: 3px !important; }
}

@media (max-width: 800px) {
  html[dir="rtl"] body .splash-section .splash-character-link::before { content: 'اكتشفي'; font-size: 9px; letter-spacing: 0; }
  html body .splash-section .splash-character-link > span { display: none !important; }
  html body .splash-section .splash-character-link i { font-size: 11px; }

  /* The two approved male personalities also stay together on mobile. */
  html body .men-personas { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 7px !important; padding: 0 8px 45px !important; }
  html body .men-character { min-width: 0; padding: 6px !important; }
  html body .men-character-art { height: 150px; margin: -6px -6px 9px; }
  html body .men-character-art > span,
  html body .men-character-copy > span,
  html body .men-character-copy > p,
  html body .men-products,
  html body .men-character > .auto-strip-dots { display: none !important; }
  html body .men-character-copy { min-height: 48px; margin: 0; display: grid; place-items: center; text-align: center; }
  html body .men-character-copy h2 { margin: 0; font-size: clamp(22px,6.2vw,30px); line-height: .95; }
  html body .men-character > .character-link { width: 100%; min-height: 28px; margin: 3px 0 0 !important; font-size: 9px; text-align: center; }

  .men-splash-personas { padding: 52px 8px 60px; }
  .men-splash-heading { margin-bottom: 20px; }
  .men-splash-heading > h3 { font-size: 42px; }
  .men-splash-heading > p { font-size: 11px; }
  .men-splash-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
  .men-splash-character { min-width: 0; padding: 6px; }
  .men-splash-art { height: 150px; margin: -6px -6px 9px; }
  .men-splash-copy { text-align: center; }
  .men-splash-copy > small,
  .men-splash-copy > p,
  .men-splash-character .splash-him-products,
  .men-splash-character > .auto-strip-dots { display: none !important; }
  .men-splash-copy h3 { min-height: 43px; margin: 0; display: grid; place-items: center; font-size: clamp(22px,6vw,30px); }
  .men-splash-cta,
  .men-splash-character > .splash-character-link { width: 100%; min-height: 29px; margin: 4px 0 0 !important; justify-content: center; align-items: center; text-align: center; font-size: 8px !important; }
}

/* The whole personality card is an invitation, not only its small link. */
.personality-clickable {
  cursor: pointer;
  transition: transform .28s ease, box-shadow .28s ease;
}

.personality-clickable:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 55px rgba(69, 16, 29, .18);
}

.personality-clickable:focus-visible {
  outline: 3px solid #b88744;
  outline-offset: 4px;
}

/* Product picker opens immediately over the current screen with bottles and prices. */
.result[hidden] { display: none !important; }

body.result-open { overflow: hidden; }

body.result-open::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(31, 8, 14, .72);
  backdrop-filter: blur(7px);
}

html body .result:not([hidden]) {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  z-index: 1000 !important;
  width: min(820px, calc(100vw - 28px));
  max-width: 820px !important;
  max-height: 90vh;
  margin: 0 !important;
  padding: 48px 30px 34px !important;
  overflow-y: auto;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(240, 199, 131, .55);
  box-shadow: 0 35px 100px rgba(20, 2, 7, .58);
  animation: resultReveal .32s ease both;
}

.result-products {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px !important;
  align-items: stretch;
}

.result-products .result-product {
  min-width: 0 !important;
  padding: 9px 9px 14px !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 9px !important;
  color: #fff;
  background: rgba(255, 255, 255, .11) !important;
  border: 1px solid rgba(255, 255, 255, .17);
}

.result-product img {
  width: 100%;
  height: 190px;
  display: block;
  object-fit: contain;
  object-position: center;
  padding: 7px;
  background: #fbf3e9;
}

.result-product b {
  font-family: 'Cormorant Garamond', Tajawal, serif;
  font-size: 21px;
  line-height: 1;
}

.result .close {
  top: 12px;
  right: 14px;
  left: auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .13);
}

html[dir="rtl"] .result .close { right: auto; left: 14px; }

@keyframes resultReveal {
  from { opacity: 0; transform: translate(-50%, -46%) scale(.97); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Four splash identities, each with an illustrated face. */
.splash-choose-heading {
  max-width: 900px;
  margin: -8px auto 36px;
  padding: 24px 20px;
  text-align: center;
  color: #5d0d1a;
  border-block: 1px solid rgba(93, 13, 26, .16);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.58), transparent);
}

.splash-choose-heading small {
  color: #9b6c43;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
}

.splash-choose-heading h3 {
  margin: 8px 0 4px;
  font-family: 'Cormorant Garamond', 'Aref Ruqaa', Tajawal, serif;
  font-size: clamp(36px, 4.8vw, 64px);
  line-height: .95;
}

.splash-choose-heading p {
  margin: 10px 0 0;
  color: #745a55;
  font-size: 13px;
}

.splash-personas {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: stretch;
  gap: 12px !important;
}

.splash-persona {
  min-width: 0;
}

.splash-persona-art {
  height: 235px;
  margin: 0 0 18px;
  overflow: hidden;
  border: 1px solid rgba(93, 13, 26, .12);
  background: #fbf3e9;
}

.splash-persona-art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 18%;
  transition: transform .6s ease;
}

.splash-persona:hover .splash-persona-art img { transform: scale(1.035); }

.splash-sweet .splash-persona-art { background: #f6d8dc; }
.splash-elegant .splash-persona-art { background: #6e1324; }
.splash-delicate .splash-persona-art { background: #fff8f4; }
.splash-clean .splash-persona-art { background: #eef5f7; }

/* Keep For Her / For Him together and keep the four crafts inside one mobile view. */
@media (max-width: 800px) {
  html body .gender-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 34px 10px 42px !important;
  }

  html body .gender-row::before {
    font-size: 34px;
    margin-bottom: 8px;
  }

  html body .gender-row a {
    min-height: 155px !important;
    padding: 22px 13px 18px !important;
  }

  html body .gender-row strong {
    max-width: 100%;
    font-size: clamp(22px, 6vw, 29px) !important;
  }

  html body .gender-row a::after {
    display: none;
  }

  .collection-showcase {
    min-height: auto !important;
    padding: 38px 10px 34px !important;
  }

  .collection-showcase-heading {
    margin-bottom: 18px !important;
  }

  .collection-showcase-heading h2 {
    font-size: 43px !important;
  }

  html body .collection-showcase .collection-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  html body .collection-showcase .collection-tile {
    min-height: 112px !important;
    padding: 11px 6px !important;
  }

  .collection-tile > i {
    width: 34px !important;
    height: 34px !important;
    font-size: 17px !important;
  }

  html body .collection-showcase .collection-tile > b { margin-top: 2px; }
  html body .collection-showcase .collection-tile > span { font-size: 18px !important; }
  html body .collection-showcase .collection-tile > small { font-size: 8px !important; }

  .splash-personas {
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 10px !important;
    padding-bottom: 10px;
  }

  .splash-persona {
    flex: 0 0 min(78vw, 330px);
    scroll-snap-align: center;
  }
}

@media (max-width: 560px) {
  html body .result:not([hidden]) { padding: 44px 14px 24px !important; }
  .result h2 { font-size: 46px !important; }
  .result-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px !important; }
  .result-product img { height: 135px; }
  .result-product b { font-size: 17px; }
  .splash-persona-art { height: 210px; }
}

@media (prefers-reduced-motion: reduce) {
  .collection-showcase::before,
  .collection-showcase::after,
  .collection-tile::before { animation: none !important; }
  .motion-ready main > section,
  .motion-ready .collection-showcase { opacity: 1; transform: none; transition: none; }
  .auto-strip { scroll-behavior: auto; }
}

/* Illustrated personalities are built into the card like a fashion campaign. */
.women-character-art {
  position: relative;
  height: 330px;
  margin: -22px -18px 22px;
  overflow: hidden;
  border-bottom: 1px solid rgba(93, 13, 26, .14);
  background: #f8eee5;
  isolation: isolate;
}

.women-character-art::before,
.women-character-art::after {
  content: '';
  position: absolute;
  z-index: 1;
  border: 1px solid rgba(184, 135, 68, .38);
  border-radius: 50%;
  pointer-events: none;
}

.women-character-art::before {
  width: 170px;
  height: 170px;
  top: -62px;
  right: -45px;
}

.women-character-art::after {
  width: 70px;
  height: 70px;
  left: 18px;
  bottom: 18px;
}

.women-character-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .7s ease;
}

.women-character:hover .women-character-art img {
  transform: scale(1.035);
  filter: saturate(1.05);
}

.women-character-art > span {
  position: absolute;
  z-index: 2;
  right: 16px;
  bottom: 14px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #fff9f1;
  background: rgba(93, 13, 26, .9);
  border: 1px solid rgba(255, 255, 255, .45);
  box-shadow: 0 10px 22px rgba(93, 13, 26, .2);
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px;
  letter-spacing: 1px;
}

.bold-card .women-character-art { background: #6e1324; }
.delicate-card .women-character-art { background: #fff8f4; }
.sweet-card .women-character-art { background: #f6d8dc; }

@media (max-width: 800px) {
  .women-character-art {
    height: 285px;
    margin-bottom: 18px;
  }
}

/* Keep the three women personalities visible together. */
.women-personas {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  overflow: visible !important;
}

.women-character-art {
  height: 225px;
}

@media (max-width: 1050px) {
  .women-personas {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding-inline: 14px !important;
  }

  .women-character-art {
    height: 185px;
  }
}

@media (max-width: 560px) {
  .women-personas {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 12px 7px 24px !important;
  }

  .women-character {
    min-width: 0 !important;
    padding: 6px !important;
    border-top-width: 2px !important;
  }

  .women-character-art {
    height: 118px;
    margin: -6px -6px 9px !important;
  }

  .women-character-art::before {
    width: 72px;
    height: 72px;
    top: -30px;
    right: -24px;
  }

  .women-character-art::after,
  .women-character-art > span,
  .women-character-copy > span,
  .women-character-copy > p,
  .women-products,
  .women-character > .auto-strip-dots {
    display: none !important;
  }

  .women-character-copy {
    min-height: 50px !important;
    display: grid;
    place-items: center;
    text-align: center;
  }

  .women-character-copy h2 {
    margin: 0 !important;
    font-size: clamp(18px, 5.2vw, 23px) !important;
    line-height: .95 !important;
  }

  html[dir="rtl"] .women-character-copy h2 {
    font-size: clamp(16px, 4.8vw, 21px) !important;
  }

  .women-character > .character-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 2px 0 0 !important;
    min-height: 28px;
    font-size: 0 !important;
  }

  .women-character > .character-link::before {
    content: 'EXPLORE';
    font-size: 8px;
    letter-spacing: 1px;
  }

  html[dir="rtl"] .women-character > .character-link::before {
    content: 'اكتشفي';
    font-size: 10px;
  }

  .women-character > .character-link i {
    margin-inline-start: 4px;
    font-size: 13px;
  }
}

/* Final mobile layout: all four crafts and all four splash characters share one row. */
@media (max-width: 800px) {
  html body .collection-showcase .collection-nav {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  html body .collection-showcase .collection-tile {
    min-height: 142px !important;
    padding: 0 !important;
  }

  html body .collection-showcase .collection-tile > i {
    width: 27px !important;
    height: 27px !important;
    font-size: 14px !important;
  }

  html body .collection-showcase .collection-tile > b,
  html body .collection-showcase .collection-tile > small { display: none !important; }
  html body .collection-showcase .collection-tile > span { font-size: clamp(12px, 3.8vw, 16px) !important; line-height: 1 !important; }

  html body .splash-section .splash-personas {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  html body .splash-section .splash-persona {
    min-width: 0 !important;
    padding: 4px !important;
    display: flex !important;
    flex: initial !important;
    flex-direction: column !important;
  }

  html body .splash-section .splash-persona-art { order: 1; height: 94px !important; margin: 0 0 7px !important; }
  html body .splash-section .splash-persona header { order: 2; padding: 0 !important; text-align: center; }
  html body .splash-section .splash-persona header small,
  html body .splash-section .splash-persona header p,
  html body .splash-section .splash-products,
  html body .splash-section .splash-persona > .auto-strip-dots { display: none !important; }
  html body .splash-section .splash-persona header h3 { margin: 0 !important; min-height: 31px; display: grid; place-items: center; font-size: clamp(13px,3.6vw,17px) !important; line-height: .95; }
  html body .splash-section .splash-character-link { order: 3; width: 100%; min-height: 25px; margin: 3px 0 0 !important; padding: 0 !important; justify-content: center; font-size: 0 !important; }
  html body .splash-section .splash-character-link > span { display: none !important; }
  html body .splash-section .splash-character-link::before { content: 'EXPLORE'; font-size: 7px; letter-spacing: .7px; }
  html[dir="rtl"] body .splash-section .splash-character-link::before { content: 'اكتشفي'; font-size: 9px; letter-spacing: 0; }
}