/* Final art direction approved for collection covers and character cards. */
html body .collection-showcase .collection-tile.perfume-tile .collection-cover {
  object-position: 50% 52% !important;
  transform: scale(1.04) !important;
}

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

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

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

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

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

/* Center the illustrated For Her covers so their main subjects are not cropped high. */
html body .women-character-art img {
  object-position: center center !important;
}

/* Keep the approved For Him symbolic covers fully visible and centered. */
html body .men-character.charisma-card .men-character-art img,
html body .men-character.chic-card .men-character-art img {
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
}

/* Keep the For Him cards elegant and less oversized on desktop. */
@media (min-width: 801px) {
  html body .men-personas {
    max-width: 780px !important;
    margin-inline: auto !important;
    padding-inline: 20px !important;
    gap: 18px !important;
  }
}

/* A more compact story keeps the narrative present without dominating the page. */
html body .brand-story { padding: 76px 7vw 66px !important; }
html body .brand-story .story-mark {
  top: 12px !important;
  width: 82px !important;
  height: 50px !important;
  font-size: 28px !important;
  line-height: 1 !important;
  overflow: visible !important;
}
html body .brand-story .story-mark small,
html body .brand-story .story-mark span,
html body .brand-story .story-mark::before,
html body .brand-story .story-mark::after { display: none !important; }
html body .brand-story .story-copy { padding: 42px 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; }

/* A tactile flower-and-bubble burst when a hero bottle is tapped. */
html body .hero-products img { cursor: pointer; }
html body .hero-products img:focus-visible {
  outline: 3px solid #b88744;
  outline-offset: 5px;
}
.hero-bottle-burst {
  position: absolute;
  z-index: 12;
  left: var(--burst-x);
  top: var(--burst-y);
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.hero-burst-particle {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--size);
  height: var(--size);
  display: grid;
  place-items: center;
  color: #ef8eaf;
  font-size: var(--size);
  line-height: 1;
  opacity: 0;
  filter: drop-shadow(0 4px 5px rgba(93,13,26,.2));
  animation: heroBottleParticle 1.55s cubic-bezier(.18,.72,.2,1) var(--delay) forwards;
}
.hero-burst-particle.baby {
  color: #fff9ef;
  text-shadow: -5px 4px #f6bfd1, 5px 3px #ffd9e4, 0 -5px #fff;
}
.hero-burst-particle.rose {
  color: #f4a8c2;
  text-shadow: -7px 5px #f9c7d8,7px 4px #f7b7cc,0 -7px #ffd7e3;
}
.hero-burst-particle.bubble {
  border: 1.5px solid rgba(255,255,255,.92);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%,rgba(255,255,255,.82),rgba(244,181,208,.2) 42%,rgba(255,255,255,.06) 67%);
  box-shadow: inset 0 0 4px rgba(255,255,255,.9),0 0 8px rgba(238,137,183,.38);
}
.hero-burst-glow {
  position: absolute;
  left: -35px;
  top: -35px;
  width: 70px;
  height: 70px;
  border: 2px solid rgba(255,255,255,.88);
  border-radius: 50%;
  box-shadow: 0 0 28px rgba(255,200,221,.85),inset 0 0 24px rgba(255,255,255,.72);
  animation: heroBottleGlow .72s ease-out forwards;
}
html body .hero-products img.bottle-tapped { animation: heroBottleTap .62s ease-out !important; }
html body .shop-price,
html[dir="rtl"] body .shop-price {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  text-align: center !important;
}
html body .shop-price:hover {
  transform: translateX(-50%) translateY(-2px) !important;
}
@keyframes heroBottleParticle {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.2) rotate(0deg); }
  18% { opacity: 1; }
  72% { opacity: .95; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.08) rotate(var(--spin)); }
}
@keyframes heroBottleGlow {
  0% { opacity: .9; transform: scale(.35); }
  100% { opacity: 0; transform: scale(2.15); }
}
@keyframes heroBottleTap {
  0%,100% { scale: 1; }
  45% { scale: 1.06; }
}

@media (max-width: 800px) {
  html body .collection-showcase .collection-tile.perfume-tile .collection-cover { object-position: 50% 52% !important; transform: scale(1.08) !important; }
  html body .collection-showcase .collection-tile.musk-tile .collection-cover { object-position: 50% 54% !important; transform: scale(1.06) translateY(5%) !important; }
  html body .collection-showcase .collection-tile.body-tile .collection-cover { object-position: 50% 50% !important; transform: scale(1.09) translateY(-4%) !important; }
  html body .collection-showcase .collection-tile.splash-tile .collection-cover { object-position: 83% 59% !important; transform: scale(1.24) !important; transform-origin: 83% 59% !important; }

  html body .men-personas { align-items: stretch !important; padding: 0 8px 28px !important; }
  html body .men-character { padding: 6px !important; }
  html body .men-character .men-character-art {
    width: calc(100% + 12px) !important;
    height: 168px !important;
    min-height: 168px !important;
    aspect-ratio: auto !important;
    margin: -6px -6px 9px !important;
  }
  html body .men-character .men-character-art img {
    width: 100% !important;
    height: 100% !important;
    padding: 4px !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: scale(1.12) !important;
    transform-origin: center center !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: 7px !important;
    width: 78px !important;
    height: 46px !important;
    border-width: 3px !important;
    font-size: 26px !important;
    line-height: 1 !important;
    overflow: visible !important;
  }
  html body .brand-story .story-copy { padding: 31px 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; }

  .hero-burst-particle { --mobile-burst: .84; }
  .hero-burst-glow { transform-origin: center; }

  /* Compact collection chapters: the heading and product photography share one phone screen. */
  html body #musk.catalog-section,
  html body #skin-care.catalog-section {
    min-height: 0 !important;
    padding: 30px 7px 32px !important;
  }

  html body #musk .catalog-heading,
  html body #skin-care .catalog-heading {
    margin-bottom: 15px !important;
  }

  html body #musk .catalog-heading p,
  html body #skin-care .catalog-heading p {
    margin: 0 0 3px !important;
    font-size: 8px !important;
  }

  html body #musk .catalog-heading h2,
  html body #skin-care .catalog-heading h2 {
    margin: 2px 0 6px !important;
    font-size: 43px !important;
  }

  html body #musk .catalog-heading span,
  html body #skin-care .catalog-heading span {
    display: block !important;
    padding-inline: 8px !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
  }

  html body #musk .catalog-grid,
  html body #skin-care .catalog-grid.three {
    display: grid !important;
    align-items: stretch !important;
    gap: 6px !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
  }

  html body #musk .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html body #skin-care .catalog-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

  html body #musk .catalog-grid > article,
  html body #skin-care .catalog-grid > article {
    width: 100% !important;
    min-width: 0 !important;
  }

  html body #musk .catalog-grid img {
    height: 245px !important;
    padding: 5px !important;
    object-fit: contain !important;
  }

  html body #skin-care .catalog-grid img {
    height: 225px !important;
    padding: 4px !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  html body #musk .catalog-grid article > div,
  html body #skin-care .catalog-grid article > div {
    min-height: 48px !important;
    padding: 8px 4px 10px !important;
    display: grid !important;
    place-items: center !important;
  }

  html body #musk .catalog-grid article > div > small,
  html body #skin-care .catalog-grid article > div > small,
  html body #musk .catalog-grid article > div > button,
  html body #skin-care .catalog-grid article > div > button,
  html body #skin-care .product-benefit,
  html body #musk .auto-strip-dots,
  html body #skin-care .auto-strip-dots {
    display: none !important;
  }

  html body #musk .catalog-grid h3,
  html body #skin-care .catalog-grid h3 {
    margin: 0 !important;
    font-size: clamp(13px, 4vw, 19px) !important;
    line-height: 1.05 !important;
    text-align: center !important;
  }

  html body #musk .shop-price,
  html body #skin-care .shop-price {
    top: 7px !important;
    right: 7px !important;
    padding: 6px 7px !important;
    font-size: 7px !important;
  }

  html[dir="rtl"] body #musk .shop-price,
  html[dir="rtl"] body #skin-care .shop-price {
    right: auto !important;
    left: 7px !important;
  }

  /* Each splash chapter behaves like a compact full-screen visual slide on phones. */
  html body #splash.catalog-section { padding: 30px 10px 32px !important; }
  html body #splash > .catalog-heading { margin-bottom: 18px !important; }
  html body #splash > .catalog-heading p { margin: 0 0 3px !important; font-size: 8px !important; }
  html body #splash > .catalog-heading h2 { margin: 2px 0 6px !important; font-size: 43px !important; }
  html body #splash > .catalog-heading > span { font-size: 10px !important; line-height: 1.35 !important; }
  html body #splash .splash-slider-block {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 18px 0 24px !important;
  }
  html body #splash .splash-slider-him {
    margin-top: 8px !important;
    padding-top: 25px !important;
  }
  html body #splash .splash-slider-heading {
    margin-bottom: 10px !important;
    padding: 0 10px !important;
  }
  html body #splash .splash-slider-heading small { font-size: 8px !important; letter-spacing: 2px !important; }
  html body #splash .splash-slider-heading h3 { margin: 5px 0 5px !important; font-size: 34px !important; }
  html body #splash .splash-slider-heading p {
    max-width: 330px !important;
    margin-inline: auto !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
  }
  html body #splash .splash-slider-viewport {
    margin-inline: -10px !important;
    padding: 6px 10px 19px !important;
  }
  html body #splash .splash-slider-track { gap: 8px !important; }
  html body #splash .splash-card,
  html body #splash .splash-slider-him .splash-card {
    flex-basis: 88% !important;
    max-width: none !important;
  }
  html body #splash .splash-card > img {
    height: 345px !important;
    padding: 4px !important;
    object-fit: contain !important;
  }
  html body #splash .splash-card-copy {
    min-height: 94px !important;
    padding: 10px 13px 12px !important;
  }
  html body #splash .splash-card-copy > small { font-size: 7px !important; }
  html body #splash .splash-card-copy h4 { margin: 3px 0 5px !important; font-size: 23px !important; }
  html body #splash .splash-card-copy p {
    display: -webkit-box !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
  }
  html body #splash .splash-slider-arrow {
    top: 43% !important;
    width: 34px !important;
    height: 34px !important;
    font-size: 22px !important;
  }
  html body #splash .splash-slider-dots { margin-top: -4px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bottle-burst { display: none !important; }
}

/* Final price alignment across every product family and breakpoint. */
html body .women-products .shop-price,
html body .men-products .shop-price,
html body #musk .shop-price,
html body #skin-care .shop-price,
html body #splash .shop-price {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  text-align: center !important;
}
html body .women-products .shop-price:hover,
html body .men-products .shop-price:hover,
html body #musk .shop-price:hover,
html body #skin-care .shop-price:hover,
html body #splash .shop-price:hover {
  transform: translateX(-50%) translateY(-2px) !important;
}

/* Clean, properly scaled hero musk cutout with a soft pink aura. */
html body .hero .hero-products .musk-float {
  width: 53% !important;
  height: 92% !important;
  left: -9% !important;
  right: auto !important;
  bottom: 0 !important;
  top: auto !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  filter:
    drop-shadow(0 24px 20px rgba(69, 25, 26, .18))
    drop-shadow(0 0 13px rgba(255, 255, 255, .92))
    drop-shadow(0 0 30px rgba(242, 121, 172, .72)) !important;
}

@media (max-width: 800px) {
  html body .hero .hero-products .musk-float {
    width: 55% !important;
    height: 96% !important;
    left: -11% !important;
    bottom: -2% !important;
  }
}

/* Keep both For Him character covers geometrically centered in their frames. */
html body .men-character .men-character-art {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html body .men-character .men-character-art img {
  display: block !important;
  margin: 0 auto !important;
  object-position: 50% 50% !important;
  transform-origin: 50% 50% !important;
}

@media (max-width: 800px) {
  html body .men-character.charisma-card .men-character-art img,
  html body .men-character.chic-card .men-character-art img {
    width: 100% !important;
    height: 168px !important;
    padding: 0 !important;
    object-fit: cover !important;
    object-position: 50% 50% !important;
    transform: none !important;
  }
}