/* =========================================================================
   Oudora — homepage sections
   ========================================================================= */

/* ----------------------------------------------------------------- Hero  */
.o-hero { position: relative; height: clamp(440px, 64vh, 720px); overflow: hidden; background: var(--o-surface-2); touch-action: pan-y pinch-zoom; }
.o-hero-slide {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility .9s ease; display: flex; align-items: center;
}
.o-hero-slide.is-active { opacity: 1; visibility: visible; }
.o-hero .o-hero-slide.is-drag-visible { opacity: 1; visibility: visible; will-change: transform; }
.o-hero.is-dragging .o-hero-slide { transition: none; }
.o-hero.is-settling .o-hero-slide.is-drag-visible { transition: transform .32s cubic-bezier(.22, .61, .36, 1); }
.o-hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(22,19,17,.62) 0%, rgba(22,19,17,.32) 45%, rgba(22,19,17,0) 75%); }
.o-hero-slide:not([style]) , .o-hero-slide[style=""] { background: radial-gradient(120% 120% at 0% 0%, #2a2420 0%, #161311 60%); }
.o-hero-inner { position: relative; z-index: 2; width: 100%; }
.o-hero-content { max-width: 560px; color: #fff; }
.o-hero-eyebrow { display: block; font-family: var(--o-sans); font-size: 13px; letter-spacing: 4px; text-transform: uppercase; color: var(--o-gold-soft); margin-bottom: 18px; }
.o-hero-title { font-family: var(--o-serif); font-weight: 600; font-size: clamp(40px, 6vw, 76px); color: #fff; line-height: 1.04; margin: 0 0 20px; }
.o-hero-text { font-size: clamp(15px, 1.6vw, 19px); color: rgba(255,255,255,.85); margin-bottom: 30px; max-width: 46ch; }
.o-hero-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 52px; height: 52px; border-radius: 999px;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.4); color: #fff; backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; transition: all var(--o-transition);
}
.o-hero-nav:hover { background: #fff; color: var(--o-ink); }
.o-hero-nav.prev { left: 24px; }
.o-hero-nav.prev .o-icon { transform: rotate(180deg); }
.o-hero-nav.next { right: 24px; }
.o-hero-dots { position: absolute; bottom: 26px; left: 0; right: 0; z-index: 3; display: flex; gap: 10px; justify-content: center; }
.o-hero-dot { width: 10px; height: 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.7); background: transparent; padding: 0; }
.o-hero-dot.is-active { background: var(--o-gold); border-color: var(--o-gold); width: 28px; }

/* Lifestyle-banner hero: full-bleed photography with a single "Buy Now" CTA
   anchored bottom-centre (banner artwork already carries its own headline). */
.o-hero--banners .o-hero-slide { display: block; }
.o-hero--banners .o-hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22,19,17,0) 55%, rgba(22,19,17,.28)); pointer-events: none; }
.o-hero--banners .o-hero-cta { position: absolute; left: 50%; bottom: 60px; transform: translateX(-50%); z-index: 3; box-shadow: var(--o-shadow); }
.o-hero--banners .o-hero-slide:hover .o-hero-cta { background: var(--o-gold-dark); }

/* ------------------------------------------------------ Category showcase */
.o-showcase-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.o-showcase-card { position: relative; display: block; aspect-ratio: 16/9; overflow: hidden; border-radius: var(--o-radius); }
.o-showcase-media { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .8s ease; }
.o-showcase-card:hover .o-showcase-media { transform: scale(1.06); }
.o-showcase-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22,19,17,.05), rgba(22,19,17,.5)); }
.o-showcase-frame { position: absolute; inset: 18px; border: 1px solid rgba(231,214,173,.7); z-index: 2; pointer-events: none; }
.o-showcase-body { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; gap: 14px; padding: 20px; }
.o-showcase-eyebrow { font-family: var(--o-sans); font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--o-gold-soft); }
.o-showcase-title { font-family: var(--o-serif); font-size: clamp(26px, 3.4vw, 40px); }
.o-showcase-cta { background: rgba(255,255,255,.92); color: var(--o-ink); border-color: transparent; }
.o-showcase-card:hover .o-showcase-cta { background: var(--o-gold); color: #fff; }

/* ------------------------------------------------------ People (everyone) */
.o-people-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.o-people-grid.cols-1 { grid-template-columns: 1fr; }
.o-people-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.o-people-card { position: relative; display: block; aspect-ratio: 3/4; overflow: hidden; border-radius: var(--o-radius); }
.o-people-media { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .8s ease; }
.o-people-card:hover .o-people-media { transform: scale(1.05); }
.o-people-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22,19,17,0) 40%, rgba(22,19,17,.7)); }
.o-people-label { position: absolute; left: 0; right: 0; bottom: 26px; z-index: 2; text-align: center; color: #fff; }
.o-people-title { display: block; font-family: var(--o-serif); font-size: 26px; margin-bottom: 6px; }
.o-people-cta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--o-sans); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--o-gold-soft); }

/* ----------------------------------------------- Brands We Love (marquee) */
/* Mirrors the source storefront: free-floating full-colour brand logos on a
   WHITE band, continuously scrolling and pausing on hover. Two identical lanes
   translate left in lockstep so the loop is seamless (each lane is wider than
   the container, so there is never a gap). The slider lives inside .o-container
   so it inherits the page's left/right gutters. NOTE: no `filter` on the logos
   — a non-none filter creates an isolation context that disables `mix-blend-mode`,
   which would reintroduce the white logo backgrounds as visible boxes. */
.o-brandm { background: var(--o-surface); }
.o-brandm-head { justify-content: center; text-align: center; margin-bottom: 8px; }
.o-brandm-slider { position: relative; display: flex; width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
/* White backdrop on the track (the marquee's isolation root, via `transform`):
   gives the logos' `mix-blend-mode: multiply` a matching colour to blend into,
   so their baked-in white backgrounds vanish instead of showing as boxes. */
.o-brandm-track { display: flex; flex: 0 0 auto; align-items: center; background: var(--o-surface); will-change: transform; animation: o-brandm-marquee 55s linear infinite; }
.o-brandm-slider:hover .o-brandm-track,
.o-brandm-slider:focus-within .o-brandm-track { animation-play-state: paused; }
.o-brandm-item { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 16px; min-width: 130px; padding: 0 2vw; text-decoration: none; color: var(--o-ink); }
.o-brandm-logo { display: block; height: 90px; width: auto; max-width: 160px; object-fit: contain; mix-blend-mode: multiply; transition: transform var(--o-transition); }
.o-brandm-item:hover .o-brandm-logo { transform: scale(1.06); }
.o-brandm-name { font-family: var(--o-sans); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--o-ink-soft); transition: color var(--o-transition); }
.o-brandm-item:hover .o-brandm-name { color: var(--o-gold-dark); }
/* translate3d keeps the marquee on the GPU compositor for jank-free scrolling. */
@keyframes o-brandm-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-100%, 0, 0); } }
/* The continuous scroll is an explicitly-requested feature, so keep it running
   at a gentle pace even when the global reduced-motion reset
   (`* { animation-duration: .01ms !important }`) would otherwise freeze it into
   a hyper-fast flicker. The scoped `!important` is the minimum needed to beat
   that universal-selector reset. */
@media (prefers-reduced-motion: reduce) { .o-brandm-track { animation-duration: 55s !important; } }

/* ------------------------------------------------------------- Promos     */
.o-promos { display: block; }
.o-promo { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; gap: 0; margin-bottom: 40px; border-radius: var(--o-radius); overflow: hidden; background: var(--o-surface); border: 1px solid var(--o-line); }
.o-promo:last-child { margin-bottom: 0; }
/* Reversed layout via explicit grid placement (not direction:rtl, which let the
   media bleed past the clipped card). Media on the right, body on the left —
   both pinned to row 1 so the media stretches to the full card height. */
.o-promo-right .o-promo-body { grid-column: 1; grid-row: 1; }
.o-promo-right .o-promo-media { grid-column: 2; grid-row: 1; }
.o-promo-media { min-height: 360px; overflow: hidden; background-size: cover; background-position: center; background-color: var(--o-surface-2); }
.o-promo-body { padding: clamp(28px, 5vw, 64px); display: flex; flex-direction: column; justify-content: center; }
.o-promo-eyebrow { font-family: var(--o-sans); font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--o-gold-dark); margin-bottom: 14px; }
.o-promo-title { font-size: clamp(28px, 3.6vw, 44px); margin-bottom: 16px; }
.o-promo-text { color: var(--o-ink-soft); margin-bottom: 26px; max-width: 46ch; }
.o-promo-body .o-btn { align-self: flex-start; }

/* ------------------------------------------------------------- Scents     */
/* Round photographic fragrance-family tiles in a side-scrollable row (mirrors
   the source storefront's draggable scent carousel). Native drag/swipe/trackpad
   scrolls it; the shared .o-carousel-nav arrows step it via initCarousels(). */
.o-scent-track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 4px 2px 10px; }
.o-scent-track::-webkit-scrollbar { display: none; }
.o-scent-carousel .o-scent-tile { flex: 0 0 auto; width: clamp(118px, 13.5vw, 150px); scroll-snap-align: start; }
.o-scent-tile { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.o-scent-img {
  width: 100%; max-width: 150px; aspect-ratio: 1 / 1; border-radius: 50%; background-size: cover;
  background-position: center; box-shadow: 0 0 0 1px var(--o-line) inset; transition: transform .5s ease, box-shadow var(--o-transition);
}
.o-scent-tile:hover .o-scent-img { transform: scale(1.05); box-shadow: 0 0 0 2px var(--o-gold), 0 10px 26px rgba(22,19,17,.18); }
.o-scent-name { font-family: var(--o-serif); font-size: 17px; color: var(--o-ink); line-height: 1.2; }
.o-scent-tile:hover .o-scent-name { color: var(--o-gold-dark); }

/* ------------------------------------------------------------- Reviews    */
.o-reviews-score { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 6px; }
.o-stars { display: inline-flex; gap: 2px; color: var(--o-gold); }
.o-reviews-count { font-size: 14px; color: var(--o-ink-soft); letter-spacing: .5px; }
.o-reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 8px; }
.o-review-card { margin: 0; padding: 30px; background: var(--o-surface); border: 1px solid var(--o-line); border-radius: var(--o-radius); display: flex; flex-direction: column; gap: 16px; }
.o-review-text { margin: 0; font-family: var(--o-serif); font-size: 19px; line-height: 1.5; color: var(--o-ink); font-style: italic; }
.o-review-name { font-family: var(--o-sans); font-size: 14px; font-weight: 500; color: var(--o-ink); }
.o-review-verified { color: var(--o-muted); font-size: 12px; font-weight: 400; margin-left: 8px; letter-spacing: .5px; }

/* ----------------------------------------------------------- Newsletter   */
.o-newsletter-band { background: var(--o-ink); color: #fff; }
.o-newsletter-inner { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 40px; }
.o-newsletter-copy .section-eyebrow { color: var(--o-gold-soft); }
.o-newsletter-copy .section-title { color: #fff; }
.o-newsletter-copy p { color: rgba(255,255,255,.8); max-width: 46ch; margin: 0; }
.o-newsletter-form { display: flex; gap: 12px; }
.o-newsletter-form input { flex: 1; padding: 16px 20px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.06); color: #fff; border-radius: var(--o-radius); font-family: var(--o-sans); }
.o-newsletter-form input::placeholder { color: #9b948a; }
.o-newsletter-form input:focus { outline: none; border-color: var(--o-gold); }

/* Gold editorial promo variant (Never Sleep / Ahmed Al Maghribi). */
.o-promo--gold { border-color: var(--o-gold-dark); }
/* Deeper gold so white body copy clears WCAG AA (lightest stop ~4.6:1). */
.o-promo--gold .o-promo-body { background: linear-gradient(140deg, #8a6a26 0%, var(--o-gold-darker) 100%); }
.o-promo--gold .o-promo-eyebrow { color: rgba(255,255,255,.92); }
.o-promo--gold .o-promo-title { color: #fff; text-shadow: 0 1px 1px rgba(122,93,35,.35); }
.o-promo--gold .o-promo-text { color: rgba(255,255,255,.96); }
.o-btn.ghost-light { background: transparent; border-color: rgba(255,255,255,.85); color: #fff; }
.o-btn.ghost-light:hover { background: #fff; border-color: #fff; color: var(--o-gold-dark); }

/* ----------------------------------------------------- Product spotlight */
.o-spotlight-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.o-spotlight-media { display: block; aspect-ratio: 4 / 3; border-radius: var(--o-radius); background-size: cover; background-position: center; box-shadow: var(--o-shadow); }
.o-spotlight-eyebrow { display: block; font-family: var(--o-sans); font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--o-gold-dark); margin-bottom: 14px; }
.o-spotlight-title { font-size: clamp(30px, 4vw, 48px); margin: 0 0 12px; }
.o-spotlight-price { font-family: var(--o-sans); font-size: 20px; font-weight: 500; color: var(--o-gold-darker); margin-bottom: 18px; font-variant-numeric: tabular-nums; }
.o-spotlight-text { color: var(--o-ink-soft); margin-bottom: 26px; max-width: 46ch; }

/* ---------------------------------------------------- Royal three-images */
.o-royal-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: clamp(20px, 3vw, 36px); align-items: center; }
.o-royal-img { aspect-ratio: 3 / 4; border-radius: var(--o-radius); background-size: cover; background-position: center; }
.o-royal-body { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; }
.o-royal-eyebrow { font-family: var(--o-sans); font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--o-gold-dark); }
.o-royal-title { font-size: clamp(30px, 4vw, 46px); margin: 0; }
.o-royal-sub { font-family: var(--o-sans); font-size: 13px; letter-spacing: 4px; text-transform: uppercase; color: var(--o-ink-soft); }
.o-royal-price { font-family: var(--o-serif); font-size: clamp(28px, 4vw, 42px); color: var(--o-gold-dark); margin: 8px 0 16px; font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------- Street banner */
.o-streetbanner { position: relative; display: block; height: clamp(260px, 38vw, 460px); border-radius: var(--o-radius); overflow: hidden; background-size: cover; background-position: center; }
.o-streetbanner-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(22,19,17,.55), rgba(22,19,17,0) 62%); }
.o-streetbanner-body { position: absolute; left: clamp(24px, 5vw, 64px); top: 50%; transform: translateY(-50%); z-index: 2; color: #fff; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.o-streetbanner-eyebrow { font-family: var(--o-sans); font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--o-gold-soft); }
.o-streetbanner-title { font-family: var(--o-serif); font-size: clamp(30px, 5vw, 56px); line-height: 1.05; }

/* ------------------------------------------------------------ Shop the look */
.o-look-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(20px, 3vw, 40px); align-items: stretch; }
.o-look-media { border-radius: var(--o-radius); background-size: cover; background-position: center; min-height: 340px; }
.o-look-list { display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.o-look-item { display: flex; align-items: center; gap: 16px; padding: 14px; background: var(--o-surface); border: 1px solid var(--o-line); border-radius: var(--o-radius); transition: all var(--o-transition); }
.o-look-item:hover { border-color: var(--o-gold-soft); box-shadow: var(--o-shadow); }
.o-look-thumb { width: 72px; height: 72px; flex: 0 0 72px; border-radius: calc(var(--o-radius) - 2px); background-size: cover; background-position: center; background-color: #fff; }
.o-look-info { flex: 1; min-width: 0; }
.o-look-name { display: block; font-family: var(--o-serif); font-size: 18px; color: var(--o-ink); line-height: 1.25; }
.o-look-name:hover { color: var(--o-gold-dark); }
.o-look-price { font-size: 14px; color: var(--o-gold-darker); font-variant-numeric: tabular-nums; margin-top: 2px; }
.o-look-cta { flex: 0 0 auto; }

/* --------------------------------------------------------------- Why buy   */
.o-whybuy-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.o-whybuy-card { text-align: center; padding: 30px 22px; background: var(--o-surface); border: 1px solid var(--o-line); border-radius: var(--o-radius); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.o-whybuy-icon { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; color: var(--o-gold-dark); border: 1px solid var(--o-gold-soft); }
.o-whybuy-title { font-family: var(--o-serif); font-size: 20px; margin: 0; }
.o-whybuy-text { font-size: 14px; color: var(--o-ink-soft); margin: 0; line-height: 1.5; }

/* ------------------------------------------------------------- Responsive */
@media (max-width: 1024px) {
  .o-reviews-grid { grid-template-columns: 1fr; }
  .o-newsletter-inner { grid-template-columns: 1fr; }
  .o-whybuy-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .o-showcase-grid { grid-template-columns: 1fr; }
  .o-people-grid, .o-people-grid.cols-2, .o-people-grid.cols-3 { grid-template-columns: 1fr 1fr; }
  .o-promo, .o-promo-right { grid-template-columns: 1fr; }
  .o-promo-right .o-promo-body, .o-promo-right .o-promo-media { grid-column: 1; grid-row: auto; }
  .o-promo-media { min-height: 240px; order: -1; }
  .o-hero { user-select: none; -webkit-user-select: none; }
  .o-hero-nav { display: none; }
  .o-spotlight-grid { grid-template-columns: 1fr; }
  .o-royal-grid { grid-template-columns: 1fr; }
  .o-royal-img { aspect-ratio: 16 / 10; }
  .o-look-grid { grid-template-columns: 1fr; }
  .o-look-media { min-height: 220px; }
}
@media (max-width: 480px) {
  .o-people-grid, .o-people-grid.cols-2, .o-people-grid.cols-3 { grid-template-columns: 1fr; }
  .o-newsletter-form { flex-direction: column; }
  .o-whybuy-grid { grid-template-columns: 1fr; }
  .o-hero--banners .o-hero-cta { bottom: 52px; }
}