:root {
  --elx-wine: #761a32;
  --elx-wine-deep: #3d0b1b;
  --elx-wine-soft: #a63e5b;
  --elx-gold: #d6b36a;
  --elx-gold-light: #f2d99d;
  --elx-ink: #21161a;
  --elx-muted: #6f6267;
  --elx-ivory: #fbf7ef;
  --elx-white: #fff;
  --elx-line: rgba(74, 37, 49, .13);
  --elx-shadow: 0 22px 55px rgba(65, 19, 34, .12);
}

.elx-page { padding-top: 84px; background: var(--elx-white); color: var(--elx-ink); }
.elx-page *, .elx-page *::before, .elx-page *::after { box-sizing: border-box; }
.elx-shell { width: min(1220px, calc(100% - 40px)); margin-inline: auto; }
.elx-section { padding: clamp(70px, 8vw, 116px) 0; }
.elx-section--ivory { background: var(--elx-ivory); }
.elx-section--white { background: var(--elx-white); }
.elx-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.elx-kicker {
  display: inline-flex; align-items: center; gap: 10px; color: var(--elx-gold-light);
  font: 800 .72rem/1.2 'Manrope', sans-serif; text-transform: uppercase; letter-spacing: .18em;
}
.elx-kicker::before { content: ''; width: 30px; height: 1px; background: currentColor; }
.elx-kicker--wine { color: var(--elx-wine); }

/* Hero: l'immagine resta completa su smartphone, senza ritagli. */
.elx-hero { position: relative; min-height: 590px; overflow: hidden; isolation: isolate; background: #13070b; }
.elx-hero__media, .elx-hero__media img { display: block; width: 100%; }
.elx-hero__media img { min-height: 590px; object-fit: cover; object-position: center; }
.elx-hero__shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(15,5,9,.84) 0%, rgba(26,8,15,.58) 35%, rgba(25,8,14,.10) 67%, rgba(10,3,6,.12) 100%);
}
.elx-hero__copy {
  position: absolute; z-index: 2; left: max(28px, calc((100vw - 1220px)/2)); top: 50%; transform: translateY(-50%);
  width: min(610px, 46vw); color: var(--elx-white);
}
.elx-hero h1 {
  max-width: 600px; margin: 17px 0 20px; color: var(--elx-white);
  font: 600 clamp(3rem, 5.4vw, 5.75rem)/.94 'Cormorant Garamond', serif; letter-spacing: -.035em;
  text-wrap: balance;
}
.elx-hero__copy > p { max-width: 570px; margin: 0 0 30px; color: rgba(255,255,255,.83); font: 500 clamp(.98rem, 1.25vw, 1.12rem)/1.75 'Manrope', sans-serif; }
.elx-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.elx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 49px;
  border: 1px solid transparent; border-radius: 999px; padding: 13px 22px;
  font: 800 .82rem/1.2 'Manrope', sans-serif; text-decoration: none; cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s;
}
.elx-btn:hover { transform: translateY(-2px); }
.elx-btn--gold { color: #281707; background: linear-gradient(135deg, #efd99d, #c79d4f); box-shadow: 0 12px 28px rgba(207,166,86,.24); }
.elx-btn--gold:hover { color: #281707; box-shadow: 0 16px 34px rgba(207,166,86,.34); }
.elx-btn--glass { color: #fff; border-color: rgba(255,255,255,.34); background: rgba(255,255,255,.09); backdrop-filter: blur(8px); }
.elx-btn--glass:hover { color: #fff; background: rgba(255,255,255,.16); }
.elx-btn--wine { color: #fff; background: var(--elx-wine); box-shadow: 0 12px 25px rgba(118,26,50,.18); }
.elx-btn--wine:hover { color: #fff; background: var(--elx-wine-deep); }

.elx-benefits { background: var(--elx-wine-deep); color: #fff; border-top: 1px solid rgba(255,255,255,.08); }
.elx-benefits__grid { display: grid; grid-template-columns: repeat(4,1fr); }
.elx-benefit { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 84px; padding: 18px; text-align: center; font: 700 .82rem/1.4 'Manrope', sans-serif; letter-spacing: .03em; }
.elx-benefit + .elx-benefit { border-left: 1px solid rgba(255,255,255,.14); }
.elx-benefit span { color: var(--elx-gold-light); }

.elx-story { position: relative; overflow: hidden; padding: clamp(76px, 8vw, 120px) 0; background: #fff; }
.elx-story::before {
  content: ''; position: absolute; width: 430px; height: 430px; right: -170px; top: -190px; border-radius: 50%;
  background: radial-gradient(circle,rgba(214,179,106,.18),rgba(214,179,106,0) 70%); pointer-events: none;
}
.elx-story__grid { position: relative; display: grid; grid-template-columns: minmax(0,1.35fr) minmax(260px,.65fr); gap: clamp(48px,8vw,110px); align-items: center; }
.elx-story__copy { max-width: 780px; }
.elx-story h2 {
  max-width: 760px; margin: 14px 0 24px; color: var(--elx-ink);
  font: 650 clamp(2.55rem,4.7vw,4.8rem)/.98 'Cormorant Garamond',serif; letter-spacing: -.03em; text-wrap: balance;
}
.elx-story__copy p { margin: 0; color: var(--elx-muted); font: 500 clamp(.96rem,1.25vw,1.08rem)/1.82 'Manrope',sans-serif; }
.elx-story__copy p + p { margin-top: 16px; }
.elx-story__metric {
  position: relative; display: flex; min-height: 330px; flex-direction: column; align-items: center; justify-content: center;
  padding: 38px 30px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 50% 50% 24px 24px;
  color: #fff; text-align: center; background: radial-gradient(circle at 50% 20%,rgba(214,179,106,.25),transparent 45%),linear-gradient(145deg,#781d39,#350a18);
  box-shadow: 0 28px 55px rgba(70,13,32,.2);
}
.elx-story__metric::after { content: ''; position: absolute; inset: 13px; border: 1px solid rgba(239,217,157,.34); border-radius: inherit; pointer-events: none; }
.elx-story__metric > * { position: relative; z-index: 1; }
.elx-story__metric > span { color: var(--elx-gold-light); font: 850 .72rem/1 'Manrope',sans-serif; letter-spacing: .18em; text-transform: uppercase; }
.elx-story__metric strong { margin: 8px 0 2px; color: #fff; font: 650 clamp(5rem,9vw,7.5rem)/.8 'Cormorant Garamond',serif; letter-spacing: -.06em; }
.elx-story__metric sup { top: -.45em; position: relative; color: var(--elx-gold-light); font-size: .34em; letter-spacing: 0; }
.elx-story__metric p { max-width: 225px; margin: 15px 0 0; color: rgba(255,255,255,.74); font: 650 .75rem/1.55 'Manrope',sans-serif; }

.elx-heading { max-width: 760px; margin: 0 auto 44px; text-align: center; }
.elx-heading--left { margin-left: 0; text-align: left; }
.elx-heading h2, .elx-consult h2 {
  margin: 12px 0 14px; color: var(--elx-ink); font: 650 clamp(2.25rem, 4vw, 4.2rem)/1 'Cormorant Garamond', serif; letter-spacing: -.025em; text-wrap: balance;
}
.elx-heading p { margin: 0; color: var(--elx-muted); font: 500 1rem/1.75 'Manrope', sans-serif; }

.elx-range-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 19px; }
.elx-range-card { overflow: hidden; border: 1px solid var(--elx-line); border-radius: 20px; background: #fff; box-shadow: 0 8px 28px rgba(65,19,34,.055); transition: transform .25s, box-shadow .25s; }
.elx-range-card:hover { transform: translateY(-5px); box-shadow: var(--elx-shadow); }
.elx-range-card__image { aspect-ratio: 1 / 1; overflow: hidden; background: linear-gradient(145deg,#fff,#f7f1e8); }
.elx-range-card__image img { width: 100%; height: 100%; display: block; object-fit: contain; padding: 8px; transition: transform .35s; }
.elx-range-card:hover img { transform: scale(1.025); }
.elx-range-card__copy { padding: 18px 18px 20px; border-top: 1px solid var(--elx-line); }
.elx-range-card h3 { margin: 0 0 7px; color: var(--elx-ink); font: 700 1.35rem/1.15 'Cormorant Garamond', serif; }
.elx-range-card p { margin: 0; color: var(--elx-wine); font: 800 .76rem/1.45 'Manrope', sans-serif; }
.elx-filter-panel {
  position: sticky; top: 94px; z-index: 20; display: grid; grid-template-columns: minmax(250px,1.5fr) repeat(3,minmax(150px,.65fr)); gap: 10px;
  margin-bottom: 22px; padding: 13px; border: 1px solid var(--elx-line); border-radius: 18px; background: rgba(255,255,255,.95); box-shadow: 0 14px 36px rgba(44,20,29,.08); backdrop-filter: blur(12px);
}
.elx-filter-panel label { min-width: 0; }
.elx-filter-panel input, .elx-filter-panel select {
  width: 100%; height: 49px; border: 1px solid var(--elx-line); border-radius: 12px; background: #fff; color: var(--elx-ink); padding: 0 14px;
  font: 650 .82rem/1.2 'Manrope', sans-serif; outline: none;
}
.elx-filter-panel input:focus, .elx-filter-panel select:focus { border-color: var(--elx-wine-soft); box-shadow: 0 0 0 3px rgba(166,62,91,.12); }
.elx-search { position: relative; display: block; }
.elx-search svg { position: absolute; left: 15px; top: 14px; color: var(--elx-wine); }
.elx-search input { padding-left: 45px; }
.elx-results-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 3px 22px; color: var(--elx-muted); font: 650 .8rem/1.4 'Manrope', sans-serif; }
.elx-results-bar a { color: var(--elx-wine); font-weight: 800; text-decoration: none; }

.elx-fragrance-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.elx-fragrance-card {
  display: flex; flex-direction: column; min-width: 0; padding: 21px; border: 1px solid var(--elx-line); border-radius: 18px;
  background: linear-gradient(155deg,#fff 0%,#fff 72%,#fbf6ee 100%); box-shadow: 0 7px 22px rgba(54,25,35,.045);
}
.elx-fragrance-card.is-page-hidden, .elx-fragrance-card.is-filter-hidden { display: none; }
.elx-fragrance-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 13px; }
.elx-fragrance-card__number { color: var(--elx-wine); font: 850 .69rem/1 'Manrope', sans-serif; letter-spacing: .13em; }
.elx-fragrance-card__gender { padding: 6px 10px; border-radius: 999px; color: #6d4c21; background: #f8edcf; font: 800 .64rem/1 'Manrope', sans-serif; text-transform: uppercase; letter-spacing: .05em; }
.elx-fragrance-card h3 { margin: 0 0 9px; color: var(--elx-ink); font: 700 1.55rem/1.1 'Cormorant Garamond', serif; overflow-wrap: anywhere; }
.elx-family { margin: 0 0 16px; color: var(--elx-muted); font: 550 .76rem/1.45 'Manrope', sans-serif; }
.elx-family > span { color: var(--elx-gold); }
.elx-family strong { color: var(--elx-wine); }
.elx-formats { display: grid; gap: 6px; margin-bottom: 18px; }
.elx-format-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px; min-height: 31px; padding: 7px 9px; border-radius: 9px; background: #f8f3ea; font: 650 .69rem/1.25 'Manrope', sans-serif; }
.elx-format-row span { min-width: 0; color: #66585d; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.elx-format-row code { color: var(--elx-wine); font: 800 .68rem/1.2 'Manrope', sans-serif; }
.elx-card-wa { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: auto; min-height: 42px; border: 1px solid rgba(20,143,80,.22); border-radius: 11px; color: #08763d; background: #ecfbf3; font: 800 .73rem/1.2 'Manrope', sans-serif; text-decoration: none; }
.elx-card-wa:hover { color: #fff; background: #128c4f; }
.elx-more-wrap { display: flex; justify-content: center; margin-top: 34px; }
.elx-no-results { padding: 45px 20px; border: 1px dashed var(--elx-line); border-radius: 16px; color: var(--elx-muted); text-align: center; font: 650 .92rem/1.6 'Manrope', sans-serif; }

.elx-consult { padding: clamp(62px, 7vw, 95px) 0; color: #fff; background: radial-gradient(circle at 85% 10%,rgba(214,179,106,.2),transparent 24rem),linear-gradient(125deg,#310916,#741a32); }
.elx-consult__inner { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 42px; align-items: center; }
.elx-consult h2 { max-width: 720px; color: #fff; }
.elx-consult p { max-width: 720px; margin: 0; color: rgba(255,255,255,.76); font: 500 1rem/1.7 'Manrope', sans-serif; }

.elx-faq { max-width: 950px; }
.elx-faq__list { display: grid; gap: 10px; }
.elx-faq details { border: 1px solid var(--elx-line); border-radius: 14px; background: #fff; }
.elx-faq summary { position: relative; padding: 20px 52px 20px 21px; cursor: pointer; color: var(--elx-ink); font: 800 .9rem/1.5 'Manrope', sans-serif; list-style: none; }
.elx-faq summary::-webkit-details-marker { display: none; }
.elx-faq summary::after { content: '+'; position: absolute; right: 20px; top: 16px; color: var(--elx-wine); font: 500 1.5rem/1 'Manrope', sans-serif; }
.elx-faq details[open] summary::after { content: '−'; }
.elx-faq details p { margin: 0; padding: 0 21px 20px; color: var(--elx-muted); font: 500 .9rem/1.7 'Manrope', sans-serif; }
.elx-legal { margin: 28px 0 0; padding-top: 22px; border-top: 1px solid var(--elx-line); color: #85777c; font: 500 .72rem/1.65 'Manrope', sans-serif; }

@media (max-width: 1050px) {
  .elx-range-grid { grid-template-columns: repeat(2,1fr); }
  .elx-fragrance-grid { grid-template-columns: repeat(2,1fr); }
  .elx-filter-panel { grid-template-columns: 1fr 1fr; top: 83px; }
}

@media (max-width: 900px) {
  .elx-page { padding-top: 72px; }
  .elx-hero { min-height: 0; display: flex; flex-direction: column; background: linear-gradient(150deg,#17070c,#4d1024); }
  .elx-hero__media { order: 1; position: relative; background: #12070b; }
  .elx-hero__media img { width: 100%; height: auto; min-height: 0; object-fit: contain; object-position: center; }
  .elx-hero__shade { display: none; }
  .elx-hero__copy { order: 2; position: static; width: 100%; transform: none; padding: 38px 24px 46px; text-align: center; }
  .elx-hero h1 { margin-inline: auto; font-size: clamp(2.7rem,11vw,4.4rem); }
  .elx-hero__copy > p { margin-inline: auto; }
  .elx-actions { justify-content: center; }
  .elx-benefits__grid { grid-template-columns: repeat(2,1fr); }
  .elx-benefit:nth-child(3) { border-left: 0; border-top: 1px solid rgba(255,255,255,.14); }
  .elx-benefit:nth-child(4) { border-top: 1px solid rgba(255,255,255,.14); }
  .elx-story__grid { grid-template-columns: 1fr; }
  .elx-story__copy { max-width: 820px; }
  .elx-story__metric { width: min(100%,390px); min-height: 310px; margin-inline: auto; }
  .elx-filter-panel { position: relative; top: auto; }
}

@media (max-width: 640px) {
  .elx-shell { width: min(100% - 28px, 1220px); }
  .elx-section { padding: 64px 0; }
  .elx-hero__copy { padding: 32px 18px 40px; }
  .elx-hero h1 { font-size: clamp(2.45rem,12.2vw,3.65rem); }
  .elx-hero__copy > p { font-size: .92rem; line-height: 1.65; }
  .elx-actions { display: grid; }
  .elx-btn { width: 100%; }
  .elx-benefit { min-height: 74px; padding: 13px 8px; font-size: .69rem; }
  .elx-story { padding: 64px 0; }
  .elx-story h2 { font-size: clamp(2.35rem,11vw,3.35rem); }
  .elx-story__copy p { font-size: .9rem; line-height: 1.72; }
  .elx-story__metric { min-height: 280px; border-radius: 46% 46% 20px 20px; }
  .elx-heading { margin-bottom: 32px; }
  .elx-heading h2, .elx-consult h2 { font-size: clamp(2.15rem,10vw,3rem); }
  .elx-range-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .elx-range-card { border-radius: 14px; }
  .elx-range-card__image img { padding: 4px; }
  .elx-range-card__copy { min-height: 91px; padding: 13px 11px 15px; }
  .elx-range-card h3 { font-size: 1.04rem; }
  .elx-range-card p { font-size: .62rem; }
  .elx-filter-panel { grid-template-columns: 1fr; padding: 10px; border-radius: 14px; }
  .elx-results-bar { align-items: flex-start; flex-direction: column; }
  .elx-fragrance-grid { grid-template-columns: 1fr; gap: 12px; }
  .elx-fragrance-card { padding: 18px; }
  .elx-fragrance-card h3 { font-size: 1.45rem; }
  .elx-format-row { grid-template-columns: minmax(0,1fr) auto; font-size: .66rem; }
  .elx-consult__inner { grid-template-columns: 1fr; gap: 28px; text-align: center; }
  .elx-consult .elx-kicker { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .elx-page *, .elx-page *::before, .elx-page *::after { scroll-behavior: auto !important; transition: none !important; }
}