/* Site-wide visual alignment: modern surfaces, with the existing marble,
   emerald and gold artwork left intact. Loaded after page-specific styles. */
:root {
  --cohesion-ink: #17352f;
  --cohesion-muted: #596963;
  --cohesion-emerald: #1f6b4f;
  --cohesion-emerald-deep: #18563f;
  --cohesion-gold: #aa8952;
  --cohesion-paper: rgba(255, 253, 248, .94);
  --cohesion-line: rgba(23, 53, 47, .12);
  --cohesion-shadow: 0 12px 34px rgba(23, 53, 47, .07);
  --cohesion-radius: 22px;
}

/* Final override: legacy guide CSS must not create a blank band above nav. */
body:has(.article-shell) > .article-header,
body:has(.guide-layout) > header,
body > .tools-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
}

/* The modern navigation is fixed to the viewport; legacy guide rules must not
   turn it back into a sticky block below the reserved page offset. */
body:has(.article-shell) > .article-header,
body:has(.guide-layout) > header,
body > .tools-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
}

html { scroll-padding-top: 92px; }
body { color: var(--cohesion-ink); }
body :is(h1, h2, h3, h4) {
  color: var(--cohesion-ink);
  font-family: var(--modern-font), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: -.045em !important;
  text-wrap: balance;
}
body :is(p, li) { line-height: 1.72; }
body :is(a, button, input, select, summary) { -webkit-tap-highlight-color: transparent; }
body :is(a, button, input, select):focus-visible, body summary:focus-visible {
  outline: 2px solid var(--cohesion-gold) !important;
  outline-offset: 3px;
}

/* The homepage hero has one copy column over the existing full-width artwork.
   A phantom second grid track used to push the title under the seal. */
body.luxury-home .luxury-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  min-height: 590px !important;
  isolation: isolate;
}
body.luxury-home .luxury-hero-copy {
  width: min(68%, 820px) !important;
  min-width: 0 !important;
  min-height: 590px;
  box-sizing: border-box !important;
  padding: 76px 34px 76px max(185px, calc((100vw - 1240px) / 2)) !important;
}
body.luxury-home .luxury-eyebrow {
  margin-bottom: 14px;
  font: 650 11px/1.3 var(--modern-font), sans-serif !important;
  letter-spacing: .3em;
}
body.luxury-home .luxury-hero h1 {
  max-width: 650px !important;
  font: 620 clamp(48px, 5.2vw, 70px)/1.02 var(--modern-font), sans-serif !important;
  letter-spacing: -.065em !important;
  text-transform: none;
  overflow-wrap: normal !important;
}
body.luxury-home .luxury-hero h1 em { display: block; font-style: normal; }
body.luxury-home .luxury-hero-copy > p {
  width: 100%;
  max-width: 570px !important;
  font: 400 16px/1.72 var(--modern-font), sans-serif !important;
}
body.luxury-home .luxury-hero-copy > .luxury-hero-note {
  margin-top: 14px;
  color: #58645e !important;
  font-size: 14px !important;
  font-style: italic;
}
body.luxury-home .luxury-hero-seal {
  left: clamp(56px, 8.8vw, 146px) !important;
  top: 25% !important;
  right: auto !important;
  bottom: auto !important;
  width: clamp(115px, 12vw, 165px) !important;
  height: clamp(115px, 12vw, 165px) !important;
}
body.luxury-home .luxury-hero .luxury-hero-quote {
  top: 24% !important;
  right: clamp(22px, 4.5vw, 64px) !important;
  width: clamp(128px, 13vw, 176px) !important;
}
body.luxury-home .luxury-navigation { gap: clamp(11px, 1.3vw, 19px) !important; }
body.luxury-home .luxury-navigation a {
  padding: 12px 0 !important;
  font-size: 11px !important;
  font-weight: 560 !important;
  letter-spacing: -.01em !important;
  line-height: 1.35 !important;
  text-transform: none !important;
}
body.luxury-home .luxury-navigation .nav-intro {
  padding: 11px 15px !important;
  border-radius: 999px !important;
}
body.luxury-home .luxury-navigation a:after { bottom: 4px !important; }
@media (max-width: 1100px) {
  body.luxury-home .luxury-hero { min-height: 520px !important; }
  body.luxury-home .luxury-hero-copy {
    width: min(78%, 780px) !important;
    min-height: 520px;
    padding: 60px 28px 60px clamp(138px, 17vw, 185px) !important;
  }
  body.luxury-home .luxury-hero h1 { font-size: clamp(46px, 6vw, 64px) !important; }
  body.luxury-home .luxury-hero .luxury-hero-quote { display: none !important; }
  body.luxury-home .luxury-hero-seal {
    left: auto !important;
    right: 14px !important;
    top: 14px !important;
    bottom: auto !important;
    width: 94px !important;
    height: 94px !important;
  }
}
@media (max-width: 700px) {
  body.luxury-home .luxury-hero { min-height: 0 !important; }
  body.luxury-home .luxury-hero-copy {
    width: 100% !important;
    min-height: 570px;
    padding: 150px 22px 34px !important;
    justify-content: flex-start;
  }
  body.luxury-home .luxury-hero h1 {
    max-width: calc(100% - 82px) !important;
    font-size: clamp(42px, 11vw, 58px) !important;
    line-height: 1.02 !important;
  }
  body.luxury-home .luxury-hero-copy > p { font-size: 16px !important; }
  body.luxury-home .luxury-hero-seal {
    top: 14px !important;
    right: 18px !important;
    bottom: auto !important;
    width: 94px !important;
    height: 94px !important;
    font-size: 8px !important;
  }
  body.luxury-home .luxury-hero-agate { top: 0; opacity: .25 !important; }
}

/* Round, quiet surfaces across editorial pages, cards and recommendations. */
body :is(.article-hero, .index-hero, .article-index-card, .article-section,
  .guide-summary, .guide-link, .guide-product, .hair-dryer-inline,
  .hair-product-pick, .skin-product, .facial-thirds-figure,
  .hair-style-comparison, .hair-style-columns > div, .calculator-shell,
  .calc-result, .bmi-live-panel, .start-grid > div, .popular-card,
  .roadmap-grid > a, .product, .product-article-card, .about-faq) {
  border-radius: var(--cohesion-radius) !important;
  box-shadow: var(--cohesion-shadow);
}
body :is(.article-hero, .index-hero, .article-section, .guide-summary,
  .guide-product, .hair-dryer-inline, .hair-product-pick, .skin-product,
  .hair-style-comparison, .calculator-shell, .calc-result,
  .start-grid > div, .product) {
  border-color: var(--cohesion-line) !important;
}
body :is(.article-section, .guide-product, .hair-dryer-inline,
  .hair-product-pick, .skin-product, .hair-style-comparison,
  .calculator-shell, .calc-result, .start-grid > div) {
  background-color: var(--cohesion-paper) !important;
}
body :is(.article-index-card, .popular-card, .roadmap-grid > a,
  .guide-link, .product, .product-article-card, .skin-product,
  .hair-product-pick) { overflow: hidden; }
body .article-hero { min-height: 280px !important; border-radius: 28px !important; }
body .article-hero h1, body .index-hero h1 {
  max-width: 760px !important;
  font-size: clamp(36px, 4.4vw, 58px) !important;
  line-height: 1.04 !important;
  letter-spacing: -.06em !important;
}
body .article-order, body .article-index-card small, body .index-hero > span {
  font-family: var(--modern-font), sans-serif !important;
  font-size: 12px !important;
  letter-spacing: .14em !important;
}
body .article-content :is(p, li) { font-size: 16px; }
body .article-section { padding: clamp(23px, 3.1vw, 36px) !important; }
body .article-section:nth-of-type(even) { border-left-width: 1px !important; }
body .section-index {
  width: 38px;
  height: 38px;
  border-radius: 50% !important;
  background: rgba(170, 137, 82, .08);
  font-family: var(--modern-font), sans-serif !important;
}
body .guide-summary { border: 1px solid rgba(170,137,82,.4) !important; }
body :is(.guide-link, .article-pagination a, .body-step) {
  border-radius: 16px !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
body .guide-link { margin-bottom: 9px; border: 1px solid var(--cohesion-line) !important; }
body .guide-link:hover, body .article-pagination a:hover { transform: translateY(-2px); box-shadow: var(--cohesion-shadow); }
body .guide-link.premium { border-color: rgba(170,137,82,.55) !important; }
body .article-index-card { min-height: 280px !important; padding: 26px !important; }
body .article-index-card h2 { font-size: clamp(21px, 2vw, 27px) !important; line-height: 1.16 !important; }
body .hair-product-pick, body .skin-product { border: 1px solid var(--cohesion-line) !important; }
body :is(.hair-product-copy, .skin-product > div) { padding: clamp(18px, 2.5vw, 28px) !important; }
body .hair-product-copy a, body .skin-product a, body .guide-product a,
body .hair-dryer-inline a { display: inline-flex; align-items: center; min-height: 42px; }

/* Generated guide artwork: coherent hero and rectangular navigation visuals. */
html[data-guide-visual="proportions-symetrie-visage"] .article-hero,html[data-guide-visual="facial-proportions"] .article-hero{background-image:linear-gradient(90deg,rgba(255,253,249,.94),rgba(255,253,249,.68) 48%,rgba(255,253,249,.12)),url('/proportions-guide-hero.webp')!important;background-size:cover!important;background-position:center!important}
html[data-guide-visual="maquillage-invisible-naturel"] .article-hero,html[data-guide-visual="natural-makeup"] .article-hero{background-image:linear-gradient(90deg,rgba(255,253,249,.94),rgba(255,253,249,.68) 48%,rgba(255,253,249,.12)),url('/makeup-guide-hero.webp')!important;background-size:cover!important;background-position:center!important}
html[data-guide-visual="fillers-visage-risques-limites"] .article-hero,html[data-guide-visual="facial-fillers"] .article-hero{background-image:linear-gradient(90deg,rgba(255,253,249,.94),rgba(255,253,249,.68) 48%,rgba(255,253,249,.12)),url('/fillers-guide-hero.webp')!important;background-size:cover!important;background-position:center!important}
html[data-guide-visual="dents-sourire-glow-up"] .article-hero,html[data-guide-visual="teeth-smile"] .article-hero{background-image:linear-gradient(90deg,rgba(255,253,249,.94),rgba(255,253,249,.68) 48%,rgba(255,253,249,.12)),url('/smile-guide-hero.webp')!important;background-size:cover!important;background-position:center!important}
html[data-guide-visual="cou-epaules-silhouette"] .article-hero,html[data-guide-visual="neck-shoulders"] .article-hero{background-image:linear-gradient(90deg,rgba(255,253,249,.94),rgba(255,253,249,.68) 48%,rgba(255,253,249,.12)),url('/neck-shoulders-guide-hero.webp')!important;background-size:cover!important;background-position:center!important}
.guide-inline-visual{margin:30px 0;padding:0;overflow:hidden;border:1px solid rgba(170,137,82,.35);border-radius:24px;background:#fffdf8;box-shadow:0 14px 36px rgba(22,52,45,.08)}
.guide-inline-visual img{display:block;width:100%;height:clamp(180px,28vw,320px);object-fit:cover;object-position:center}
.guide-inline-visual figcaption{padding:13px 18px;color:#5b625d;font:500 13px/1.45 var(--modern-font),-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.guide-link[href*="proportions-symetrie-visage"],.guide-link[href*="facial-proportions"]{background-image:linear-gradient(90deg,rgba(255,253,249,.95),rgba(255,253,249,.35)),url('/proportions-guide-card.webp')!important;background-size:cover!important;background-position:center!important}
.guide-link[href*="maquillage-invisible-naturel"],.guide-link[href*="natural-makeup"]{background-image:linear-gradient(90deg,rgba(255,253,249,.95),rgba(255,253,249,.35)),url('/makeup-guide-card.webp')!important;background-size:cover!important;background-position:center!important}
.guide-link[href*="fillers-visage-risques-limites"],.guide-link[href*="facial-fillers"]{background-image:linear-gradient(90deg,rgba(255,253,249,.95),rgba(255,253,249,.35)),url('/fillers-guide-card.webp')!important;background-size:cover!important;background-position:center!important}
.guide-link[href*="dents-sourire-glow-up"],.guide-link[href*="teeth-smile"]{background-image:linear-gradient(90deg,rgba(255,253,249,.95),rgba(255,253,249,.35)),url('/smile-guide-card.webp')!important;background-size:cover!important;background-position:center!important}
.guide-link[href*="cou-epaules-silhouette"],.guide-link[href*="neck-shoulders"]{background-image:linear-gradient(90deg,rgba(255,253,249,.95),rgba(255,253,249,.35)),url('/neck-shoulders-guide-card.webp')!important;background-size:cover!important;background-position:center!important}
.guide-link[href*="routine-peau-glow-up"],.guide-link[href*="skin-care"],.articles-index .article-index-card.skin-card{background-image:linear-gradient(90deg,rgba(255,253,249,.94),rgba(255,253,249,.42)),url('/skin-guide-card.webp')!important;background-size:cover!important;background-position:center!important}
.articles-index .article-index-card[href*="proportions-symetrie-visage"]{background-image:linear-gradient(135deg,rgba(255,253,249,.95),rgba(255,253,249,.48)),url('/proportions-guide-card.webp')!important;background-size:cover!important;background-position:center!important}
.articles-index .article-index-card[href*="maquillage-invisible-naturel"]{background-image:linear-gradient(135deg,rgba(255,253,249,.95),rgba(255,253,249,.48)),url('/makeup-guide-card.webp')!important;background-size:cover!important;background-position:center!important}
.articles-index .article-index-card[href*="fillers-visage-risques-limites"]{background-image:linear-gradient(135deg,rgba(255,253,249,.95),rgba(255,253,249,.48)),url('/fillers-guide-card.webp')!important;background-size:cover!important;background-position:center!important}
.articles-index .article-index-card[href*="dents-sourire-glow-up"]{background-image:linear-gradient(135deg,rgba(255,253,249,.95),rgba(255,253,249,.48)),url('/smile-guide-card.webp')!important;background-size:cover!important;background-position:center!important}
.articles-index .article-index-card[href*="cou-epaules-silhouette"]{background-image:linear-gradient(135deg,rgba(255,253,249,.95),rgba(255,253,249,.48)),url('/neck-shoulders-guide-card.webp')!important;background-size:cover!important;background-position:center!important}

/* Remove legacy button textures everywhere; keep the established green/gold. */
body :is(.luxury-cta, .summary-jump, .tips-jump, .btn, .pill,
  .calc-submit, .article-cta, .product-cta, .guide-cta,
  .hair-product-copy a, .hair-dryer-inline a, .skin-product a,
  .guide-product a, .privacy-preferences, .catalog-search-button,
  .article-index-card > b, button:not(.luxury-menu):not(.article-close)) {
  background-image: none !important;
  border-radius: 999px !important;
  box-shadow: 0 5px 16px rgba(16, 59, 53, .09) !important;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
body :is(.luxury-cta, .summary-jump, .tips-jump, .btn, .pill,
  .calc-submit, .article-cta, .product-cta, .guide-cta,
  .hair-product-copy a, .hair-dryer-inline a, .skin-product a,
  .guide-product a, .privacy-preferences, .catalog-search-button,
  .article-index-card > b) {
  background-color: var(--cohesion-emerald) !important;
  border: 1px solid rgba(170,137,82,.48) !important;
  color: #fffdf8 !important;
  font-family: var(--modern-font), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
body :is(.luxury-cta, .summary-jump, .tips-jump, .btn, .pill,
  .calc-submit, .article-cta, .product-cta, .guide-cta,
  .hair-product-copy a, .hair-dryer-inline a, .skin-product a,
  .guide-product a, .privacy-preferences, .catalog-search-button,
  .article-index-card > b, button:not(.luxury-menu):not(.article-close)):hover {
  transform: translateY(-1px);
  box-shadow: 0 9px 23px rgba(16,59,53,.15) !important;
}
body :is(input, select, textarea, .product-search, .filter, .sort-row select) {
  border-radius: 14px !important;
}
body :is(.product, .product-article-card, .guide-product, .hair-product-pick, .skin-product) img {
  border-radius: 0 !important;
}
body :is(.product-visual, .hair-product-pick > img, .skin-product > img) { overflow: hidden; }
body .product-visual { border-radius: 18px 18px 0 0 !important; }
body .product .buy { border-radius: 0 0 22px 22px !important; }
body .product .buy .btn, body .product .buy a { border-radius: 999px !important; }

body footer { color: var(--cohesion-muted); }
body footer a { text-underline-offset: 4px; text-decoration-color: rgba(170,137,82,.55); }
body .htgu-consent { border: 1px solid rgba(170,137,82,.36); }

/* Keep the live BMI result on its original deep-teal card. The same element
   also carries .calc-result, so explicitly protect it from generic card paint. */
body.calculator-body .bmi-live-panel {
  background: #203e45 !important;
  border: 1px solid rgba(114, 200, 179, .28) !important;
  border-radius: 22px !important;
  color: #f8fbfa !important;
  box-shadow: 0 12px 30px rgba(18, 55, 61, .16) !important;
}
body.calculator-body .bmi-live-panel > span,
body.calculator-body .bmi-live-panel p,
body.calculator-body .bmi-live-panel [data-bmi-note] { color: #d3e2df !important; }
body.calculator-body .bmi-live-panel .bmi-visual { background: none !important; }

/* Bring the homepage transformation section a little closer to the guide cards. */
body.luxury-home #guides.home-guides-modern { padding-bottom: 72px !important; }
body.luxury-home #qui-suis-je.home-evolution-modern {
  margin-top: 0 !important;
  padding-top: 22px !important;
  padding-bottom: 40px !important;
}
body.luxury-home .home-roadmap { padding-block: 60px !important; }
body.luxury-home #selection.portal-products { padding-top: 42px !important; }

/* Keep the homepage hero copy from collapsing into a narrow column at browser zoom. */
@media (min-width: 761px) {
  body.luxury-home .luxury-hero { grid-template-columns: minmax(0, 1fr) !important; }
  body.luxury-home .luxury-hero-copy {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding-left: clamp(160px, 14vw, 250px) !important;
    padding-right: clamp(28px, 4vw, 64px) !important;
  }
  body.luxury-home .luxury-hero h1 {
    width: 100% !important;
    max-width: min(760px, 100%) !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }
  body.luxury-home .luxury-hero-copy > p { width: 100% !important; max-width: min(600px, 100%) !important; }
}

@media (max-width: 760px) {
  body.luxury-home #guides.home-guides-modern { padding-bottom: 38px !important; }
  body.luxury-home #qui-suis-je.home-evolution-modern {
    margin-top: 0 !important;
    padding-top: 12px !important;
    padding-bottom: 36px !important;
  }
  body.luxury-home .home-roadmap { padding-block: 38px !important; }
  body.luxury-home #selection.portal-products { padding-top: 34px !important; }
  body .article-shell { padding: 28px 16px 56px; gap: 28px; }
  body .article-hero { min-height: 0 !important; padding: 28px 22px 92px !important; }
  body .article-hero h1, body .index-hero h1 { max-width: 100% !important; font-size: clamp(34px, 9vw, 46px) !important; }
  body .article-index-card { min-height: 250px !important; padding: 22px !important; }
  body :is(.article-section, .guide-summary) { padding: 23px 20px !important; }
  body .hair-product-grid, body .skin-product-grid { grid-template-columns: 1fr !important; }
  body .modern-header .modern-navigation { border: 1px solid var(--cohesion-line); }
  body .modern-header .modern-navigation a { min-height: 44px; }
  body footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  body *, body *::before, body *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Guide summaries: replace the dark-on-dark panel and decorative slab with a clear, calm card. */
body :is(.guide-summary, .summary-box) {
  position: relative !important;
  overflow: hidden !important;
  padding: clamp(24px, 3vw, 34px) !important;
  border: 1px solid rgba(23, 53, 47, .12) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, .88) !important;
  color: #17352f !important;
  box-shadow: 0 14px 34px rgba(23, 53, 47, .07) !important;
}
body :is(.guide-summary, .summary-box)::after { display: none !important; }
body :is(.guide-summary, .summary-box) > span {
  position: relative !important;
  z-index: 1;
  color: #957442 !important;
  font: 700 11px/1.3 var(--modern-font), sans-serif !important;
  letter-spacing: .13em !important;
}
body :is(.guide-summary, .summary-box) h2 {
  position: relative !important;
  z-index: 1;
  margin: 8px 0 18px !important;
  color: #17352f !important;
  font: 620 clamp(25px, 3vw, 32px)/1.15 var(--modern-font), sans-serif !important;
  letter-spacing: -.045em !important;
}
body :is(.guide-summary, .summary-box) :is(p, li) { color: #465851 !important; }
body :is(.guide-summary, .summary-box) ul { position: relative; z-index: 1; }

/* Add matching guide artwork to the previous/next navigation cards. */
body :is(nav.article-pagination, nav.guide-pagination) a[href*="introduction-glow-up"],
body :is(nav.article-pagination, nav.guide-pagination) a[href*="getting-started"] { --guide-thumb: url("/rail-intro.webp"); }
body :is(nav.article-pagination, nav.guide-pagination) a[href*="perte-de-poids"],
body :is(nav.article-pagination, nav.guide-pagination) a[href*="weight-loss"] { --guide-thumb: url("/rail-poids.webp"); }
body :is(nav.article-pagination, nav.guide-pagination) a[href*="perte-gras-visage"],
body :is(nav.article-pagination, nav.guide-pagination) a[href*="lose-face-fat"] { --guide-thumb: url("/face-fat-illustration.webp"); }
body :is(nav.article-pagination, nav.guide-pagination) a[href*="cheveux"],
body :is(nav.article-pagination, nav.guide-pagination) a[href*="hair-glow-up"],
body :is(nav.article-pagination, nav.guide-pagination) a[href*="prevent-hair-loss"],
body :is(nav.article-pagination, nav.guide-pagination) a[href*="calvitie"] { --guide-thumb: url("/rail-cheveux.webp"); }
body :is(nav.article-pagination, nav.guide-pagination) a[href*="barbe"],
body :is(nav.article-pagination, nav.guide-pagination) a[href*="beard-style"] { --guide-thumb: url("/rail-barbe.webp"); }
body :is(nav.article-pagination, nav.guide-pagination) a[href*="sourcils"],
body :is(nav.article-pagination, nav.guide-pagination) a[href*="eyebrows"] { --guide-thumb: url("/rail-regard.webp"); }
body :is(nav.article-pagination, nav.guide-pagination) a[href*="peau"],
body :is(nav.article-pagination, nav.guide-pagination) a[href*="skin-care"] { --guide-thumb: url("/rail-peau.webp"); }
body :is(nav.article-pagination, nav.guide-pagination) a[href*="nez"],
body :is(nav.article-pagination, nav.guide-pagination) a[href*=""],
body :is(nav.article-pagination, nav.guide-pagination) a[href*="proportions"],
body :is(nav.article-pagination, nav.guide-pagination) a[href*="facial-proportions"],
body :is(nav.article-pagination, nav.guide-pagination) a[href*="maquillage"],
body :is(nav.article-pagination, nav.guide-pagination) a[href*="natural-makeup"],
body :is(nav.article-pagination, nav.guide-pagination) a[href*="fillers"],
body :is(nav.article-pagination, nav.guide-pagination) a[href*="teeth-smile"],
body :is(nav.article-pagination, nav.guide-pagination) a[href*="dents"],
body :is(nav.article-pagination, nav.guide-pagination) a[href*="cou-epaules"],
body :is(nav.article-pagination, nav.guide-pagination) a[href*="neck-shoulders"] { --guide-thumb: url("/rail-peau.webp"); }
body :is(nav.article-pagination, nav.guide-pagination) a:is([href*="introduction-glow-up"], [href*="getting-started"], [href*="perte-de-poids"], [href*="weight-loss"], [href*="perte-gras-visage"], [href*="lose-face-fat"], [href*="cheveux"], [href*="hair-glow-up"], [href*="prevent-hair-loss"], [href*="calvitie"], [href*="barbe"], [href*="beard-style"], [href*="sourcils"], [href*="eyebrows"], [href*="peau"], [href*="skin-care"], [href*="nez"], [href*=""], [href*="proportions"], [href*="facial-proportions"], [href*="maquillage"], [href*="natural-makeup"], [href*="fillers"], [href*="teeth-smile"], [href*="dents"], [href*="cou-epaules"], [href*="neck-shoulders"]) {
  display: flex !important;
  align-items: center !important;
  gap: 13px !important;
  min-width: 0 !important;
  min-height: 82px !important;
  padding: 9px 13px !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, .9) !important;
  color: #17352f !important;
  text-align: left !important;
  font: 600 14px/1.35 var(--modern-font), sans-serif !important;
}
body :is(nav.article-pagination, nav.guide-pagination) a:is([href*="introduction-glow-up"], [href*="getting-started"], [href*="perte-de-poids"], [href*="weight-loss"], [href*="perte-gras-visage"], [href*="lose-face-fat"], [href*="cheveux"], [href*="hair-glow-up"], [href*="prevent-hair-loss"], [href*="calvitie"], [href*="barbe"], [href*="beard-style"], [href*="sourcils"], [href*="eyebrows"], [href*="peau"], [href*="skin-care"], [href*="nez"], [href*=""], [href*="proportions"], [href*="facial-proportions"], [href*="maquillage"], [href*="natural-makeup"], [href*="fillers"], [href*="teeth-smile"], [href*="dents"], [href*="cou-epaules"], [href*="neck-shoulders"])::before {
  content: "";
  display: block;
  flex: 0 0 76px;
  width: 76px;
  height: 56px;
  border-radius: 13px;
  background: var(--guide-thumb) center / cover no-repeat;
}
body :is(nav.article-pagination, nav.guide-pagination) a:last-child:is([href*="introduction-glow-up"], [href*="getting-started"], [href*="perte-de-poids"], [href*="weight-loss"], [href*="perte-gras-visage"], [href*="lose-face-fat"], [href*="cheveux"], [href*="hair-glow-up"], [href*="prevent-hair-loss"], [href*="calvitie"], [href*="barbe"], [href*="beard-style"], [href*="sourcils"], [href*="eyebrows"], [href*="peau"], [href*="skin-care"], [href*="nez"], [href*=""], [href*="proportions"], [href*="facial-proportions"], [href*="maquillage"], [href*="natural-makeup"], [href*="fillers"], [href*="teeth-smile"], [href*="dents"], [href*="cou-epaules"], [href*="neck-shoulders"]) { flex-direction: row-reverse !important; text-align: right !important; }

/* Make guide-end Amazon calls to action smaller while keeping their existing pill styling. */
body:not(.articles-index) .product-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  max-width: 100% !important;
  min-height: 34px !important;
  padding: 7px 11px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  white-space: normal !important;
}

/* Extend the guide artwork across the full previous/next navigation card. */
body :is(nav.article-pagination, nav.guide-pagination) a:is([href*="introduction-glow-up"], [href*="getting-started"], [href*="perte-de-poids"], [href*="weight-loss"], [href*="perte-gras-visage"], [href*="lose-face-fat"], [href*="cheveux"], [href*="hair-glow-up"], [href*="prevent-hair-loss"], [href*="calvitie"], [href*="barbe"], [href*="beard-style"], [href*="sourcils"], [href*="eyebrows"], [href*="peau"], [href*="skin-care"], [href*="nez"], [href*=""], [href*="proportions"], [href*="facial-proportions"], [href*="maquillage"], [href*="natural-makeup"], [href*="fillers"], [href*="teeth-smile"], [href*="dents"], [href*="cou-epaules"], [href*="neck-shoulders"]) {
  position:relative!important;isolation:isolate;background-color:#fff!important;
  background-image:linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.86) 42%,rgba(255,255,255,.58) 100%),var(--guide-thumb)!important;
  background-position:center,center!important;background-size:cover,cover!important;background-repeat:no-repeat!important;
}
body :is(nav.article-pagination, nav.guide-pagination) a:last-child:is([href*="introduction-glow-up"], [href*="getting-started"], [href*="perte-de-poids"], [href*="weight-loss"], [href*="perte-gras-visage"], [href*="lose-face-fat"], [href*="cheveux"], [href*="hair-glow-up"], [href*="prevent-hair-loss"], [href*="calvitie"], [href*="barbe"], [href*="beard-style"], [href*="sourcils"], [href*="eyebrows"], [href*="peau"], [href*="skin-care"], [href*="nez"], [href*=""], [href*="proportions"], [href*="facial-proportions"], [href*="maquillage"], [href*="natural-makeup"], [href*="fillers"], [href*="teeth-smile"], [href*="dents"], [href*="cou-epaules"], [href*="neck-shoulders"]) {
  background-image:linear-gradient(270deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.86) 42%,rgba(255,255,255,.58) 100%),var(--guide-thumb)!important;
}
body :is(nav.article-pagination, nav.guide-pagination) a:is([href*="introduction-glow-up"], [href*="getting-started"], [href*="perte-de-poids"], [href*="weight-loss"], [href*="perte-gras-visage"], [href*="lose-face-fat"], [href*="cheveux"], [href*="hair-glow-up"], [href*="prevent-hair-loss"], [href*="calvitie"], [href*="barbe"], [href*="beard-style"], [href*="sourcils"], [href*="eyebrows"], [href*="peau"], [href*="skin-care"], [href*="nez"], [href*=""], [href*="proportions"], [href*="facial-proportions"], [href*="maquillage"], [href*="natural-makeup"], [href*="fillers"], [href*="teeth-smile"], [href*="dents"], [href*="cou-epaules"], [href*="neck-shoulders"])::before {display:none!important}

/* Contemporary Apple-inspired green for primary actions. Gold accents, pale
   secondary controls and the established marble artwork remain unchanged. */
body :is(.luxury-cta, .summary-jump, .tips-jump, .btn, .pill,
  .calc-submit, .article-cta, .product-cta, .guide-cta,
  .hair-product-copy a, .hair-dryer-inline a, .skin-product a,
  .guide-product a, .privacy-preferences, .catalog-search-button,
  .article-index-card > b, .hero-action.primary,
  button.filter.active, .filter.active, .mega-score,
  .tools-hero-cta, .button-primary, .htgu-consent button.htgu-accept) {
  background-color: #1f6b4f !important;
  border-color: rgba(170,137,82,.48) !important;
  color: #fff !important;
}
body :is(.luxury-cta, .summary-jump, .tips-jump, .btn, .pill,
  .calc-submit, .article-cta, .product-cta, .guide-cta,
  .hair-product-copy a, .hair-dryer-inline a, .skin-product a,
  .guide-product a, .privacy-preferences, .catalog-search-button,
  .article-index-card > b, .hero-action.primary,
  button.filter.active, .filter.active, .mega-score,
  .tools-hero-cta, .button-primary, .htgu-consent button.htgu-accept):hover {
  background-color: #18563f !important;
}
body .home-score-cta > span:first-child { background-color: #1f6b4f !important; }
body :is(.luxury-cta, .summary-jump, .tips-jump, .btn, .pill,
  .calc-submit, .article-cta, .product-cta, .guide-cta,
  .hair-product-copy a, .hair-dryer-inline a, .skin-product a,
  .guide-product a, .privacy-preferences, .catalog-search-button,
  .article-index-card > b, .hero-action.primary, .mega-score,
  .tools-hero-cta, .button-primary, .htgu-consent button.htgu-accept) {
  box-shadow: 0 6px 20px rgba(31,107,79,.14) !important;
}

/* Keep homepage copy clear of the decorative seal at every desktop width. */
@media (min-width: 1101px) {
  body.luxury-home .luxury-hero-copy {
    width: min(82%, 1100px) !important;
    padding-left: clamp(300px, 24vw, 380px) !important;
    padding-right: clamp(72px, 7vw, 112px) !important;
  }
}
@media (min-width: 701px) and (max-width: 1100px) {
  body.luxury-home .luxury-hero-copy {
    width: 100% !important;
    padding-left: clamp(220px, 23vw, 255px) !important;
    padding-right: clamp(120px, 15vw, 170px) !important;
  }
}

/* Match the introduction link in the home navigation to the site's primary green actions. */
body.luxury-home .luxury-navigation .nav-intro {
  background-color: #1f6b4f !important;
  border-color: rgba(170,137,82,.48) !important;
  color: #fff !important;
}
body.luxury-home .luxury-navigation .nav-intro:hover {
  background-color: #18563f !important;
}

/* One calm editorial system for every guide template, including the original
   introduction and weight-loss pages. Preserve each guide's own artwork. */
body:has(.article-shell), body:has(.guide-layout) {
  background-color: #f5f7f5 !important;
}
body:has(.article-shell) > .article-header,
body:has(.guide-layout) > header {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 72px !important;
  box-sizing: border-box !important;
  padding: 12px max(20px, calc((100vw - 1440px) / 2)) !important;
  background: rgba(255,255,255,.82) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(16,47,41,.09) !important;
  box-shadow: 0 5px 24px rgba(16,47,41,.035) !important;
  backdrop-filter: blur(22px) saturate(1.35) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.35) !important;
}
body:has(.article-shell) > .article-header .article-brand,
body:has(.guide-layout) > header .brand {
  color: #102f29 !important;
  font: 650 14px/1 var(--modern-font) !important;
  letter-spacing: .1em !important;
}
body:has(.article-shell) > .article-header nav,
body:has(.guide-layout) > header nav {
  align-items: center !important;
  gap: clamp(12px, 2vw, 28px) !important;
  font: 550 12px/1.35 var(--modern-font) !important;
}
body:has(.article-shell) > .article-header nav a,
body:has(.guide-layout) > header nav a {
  color: #254d42 !important;
  text-decoration: none !important;
}
body:has(.article-shell) > .article-header nav a:hover,
body:has(.guide-layout) > header nav a:hover { color: #1f6b4f !important; }
body :is(.article-shell, .guide-layout) {
  width: min(1500px, calc(100% - 48px)) !important;
  margin-inline: auto !important;
  padding-top: clamp(28px, 4vw, 56px) !important;
  gap: clamp(16px, 2vw, 30px) !important;
}
body :is(.article-hero, .guide-layout .hero) {
  min-height: 280px !important;
  padding: clamp(28px, 4vw, 46px) !important;
  border: 1px solid rgba(16,47,41,.1) !important;
  border-radius: 28px !important;
  box-shadow: 0 18px 48px rgba(16,47,41,.075) !important;
}
body .article-hero :is(h1, .article-order),
body .guide-layout .hero > :is(h1, .kicker, p, .hero-actions) {
  position: relative !important;
  z-index: 2 !important;
}
body .guide-layout .hero > h1 {
  max-width: min(760px, 76%) !important;
  font: 620 clamp(38px, 5vw, 62px)/1.03 var(--modern-font) !important;
  letter-spacing: -.06em !important;
}
body .guide-layout .hero > p {
  max-width: 720px !important;
  font: 400 16px/1.7 var(--modern-font) !important;
}
body :is(.article-section, .guide-layout .chapter, .guide-layout .part-heading,
  .guide-summary, .guide-layout .summary-box, .guide-layout .next-guide,
  .guide-layout .intro-tool-promo) {
  border: 1px solid rgba(16,47,41,.09) !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,.88) !important;
  box-shadow: 0 12px 36px rgba(16,47,41,.055) !important;
}
body :is(.article-section, .guide-layout .chapter) {
  padding: clamp(23px, 3vw, 36px) !important;
}
body .guide-layout .part-heading {
  margin-top: 36px !important;
  padding: clamp(20px, 2.7vw, 30px) !important;
}
body :is(.article-section h2, .guide-layout .chapter h2,
  .guide-layout .part-heading h2, .guide-summary h2, .guide-layout .summary-box h2) {
  color: #102f29 !important;
  font: 620 clamp(25px, 3vw, 36px)/1.12 var(--modern-font) !important;
  letter-spacing: -.045em !important;
}
body :is(.article-section p, .article-section li, .guide-layout .chapter p,
  .guide-layout .part-heading p, .guide-summary p, .guide-layout .summary-box li) {
  color: #44564f !important;
  font: 400 16px/1.75 var(--modern-font) !important;
}
body :is(.article-shell .guide-rail, .guide-layout .guide-rail,
  .article-shell .premium-rail, .guide-layout .premium-rail) {
  padding: 18px !important;
  border: 1px solid rgba(16,47,41,.08) !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,.76) !important;
  box-shadow: 0 12px 34px rgba(16,47,41,.05) !important;
  backdrop-filter: blur(16px) !important;
}
body :is(.article-shell .guide-rail > h2, .guide-layout .guide-rail > h2,
  .article-shell .premium-rail > h2, .guide-layout .premium-rail > h2) {
  margin: 2px 0 14px !important;
  color: #102f29 !important;
  font: 620 20px/1.2 var(--modern-font) !important;
  letter-spacing: -.035em !important;
}
body :is(.guide-link, .premium-rail-list a, .article-pagination a, .guide-pagination a) {
  border-radius: 16px !important;
  font-family: var(--modern-font) !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}
body :is(.guide-link, .premium-rail-list a) { min-height: 68px !important; }
body :is(.guide-link, .premium-rail-list a):hover { transform: translateY(-2px) !important; }
body :is(.summary-jump, .tips-jump, .guide-pagination a, .article-pagination a,
  .guide-layout .next-guide a) {
  border-radius: 999px !important;
  font-family: var(--modern-font) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
body:has(>.premium-shell) > .premium-shell { width: min(1200px, calc(100% - 48px)) !important; max-width: none !important; }
body:has(>.premium-shell) .premium-hero {
  min-height: 320px !important;
  padding: clamp(30px, 5vw, 58px) !important;
  border: 1px solid rgba(16,47,41,.1) !important;
  border-radius: 28px !important;
  box-shadow: 0 18px 48px rgba(16,47,41,.1) !important;
}
body:has(>.premium-shell) .premium-hero h1 {
  max-width: 760px !important;
  font: 620 clamp(38px, 5vw, 62px)/1.03 var(--modern-font) !important;
  letter-spacing: -.06em !important;
}
body:has(>.premium-shell) .premium-hero p { font: 400 16px/1.7 var(--modern-font) !important; }
body:has(>.premium-shell) .premium-shell .topics article {
  border: 1px solid rgba(16,47,41,.09) !important;
  border-radius: 22px !important;
  box-shadow: 0 12px 36px rgba(16,47,41,.055) !important;
}
body:has(>.premium-shell) .premium-shell .topics h2 {
  font: 620 clamp(23px, 2.5vw, 30px)/1.12 var(--modern-font) !important;
  letter-spacing: -.045em !important;
}
@media(max-width:700px) {
  body :is(.article-shell, .guide-layout) { width: calc(100% - 28px) !important; padding-top: 20px !important; }
  body:has(.article-shell) > .article-header,
  body:has(.guide-layout) > header { min-height: 64px !important; padding: 10px 16px !important; }
  body:has(.article-shell) > .article-header nav,
  body:has(.guide-layout) > header nav { gap: 12px !important; flex-wrap: wrap !important; }
  body :is(.article-hero, .guide-layout .hero) { min-height: 0 !important; padding: 25px 21px !important; }
  body .guide-layout .hero > h1 { max-width: 100% !important; font-size: clamp(34px, 9vw, 46px) !important; }
  body :is(.article-section, .guide-layout .chapter) { padding: 22px 19px !important; }
  body .guide-layout .part-heading { grid-template-columns: 42px minmax(0,1fr) !important; gap: 12px !important; padding: 18px !important; }
  body :is(.article-section p, .article-section li, .guide-layout .chapter p,
    .guide-layout .part-heading p, .guide-summary p, .guide-layout .summary-box li) { font-size: 15px !important; }
  body:has(>.premium-shell) > .premium-shell { width: calc(100% - 28px) !important; }
  body:has(>.premium-shell) .premium-hero { min-height: 0 !important; padding: 25px 21px !important; }
  body:has(>.premium-shell) .premium-hero h1 { font-size: clamp(34px, 9vw, 46px) !important; }
}

/* Final override: legacy guide CSS must not create a blank band above nav. */
body:has(.article-shell) > .article-header,
body:has(.guide-layout) > header,
body > .tools-header { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; }

/* Unified premium top banner: one restrained surface across home, guides and tools. */
body > header,
body > .article-header,
body > .tools-header {
  height: 76px !important;
  min-height: 76px !important;
  padding: 0 clamp(18px, 4vw, 56px) !important;
  display: flex !important;
  align-items: center !important;
  gap: 28px !important;
  background: rgba(255, 254, 250, .88) !important;
  border-bottom: 1px solid rgba(16, 47, 41, .10) !important;
  box-shadow: 0 8px 28px rgba(16, 47, 41, .055) !important;
  backdrop-filter: blur(22px) saturate(1.35) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.35) !important;
}
body > header > :is(.brand, .luxury-brand, .article-brand, .tools-brand),
body > .article-header > .article-brand,
body > .tools-header > .tools-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: #102f29 !important;
  font: 700 14px/1 var(--modern-font) !important;
  letter-spacing: .14em !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}
body > header :is(.brand, .luxury-brand, .article-brand, .tools-brand) img,
body > .article-header .article-brand img,
body > .tools-header .tools-brand img { width: 32px !important; height: 32px !important; object-fit: contain !important; }
body > header > nav,
body > .article-header > nav,
body > .tools-header > nav { margin-left: auto !important; display: flex !important; align-items: center !important; gap: clamp(14px, 2.2vw, 30px) !important; }
body > header > nav a,
body > .article-header > nav a,
body > .tools-header > nav a { color: #294e44 !important; font: 600 12px/1.2 var(--modern-font) !important; text-decoration: none !important; transition: color .2s, opacity .2s !important; }
body > header > nav a:hover,
body > .article-header > nav a:hover,
body > .tools-header > nav a:hover { color: #0d755d !important; opacity: 1 !important; }
body > header > nav,
body > .article-header > nav,
body > .tools-header > nav { min-width: 0 !important; }
body > header > nav a,
body > .article-header > nav a,
body > .tools-header > nav a { white-space: nowrap !important; }
body > header .mega-menu-trigger,
body > .article-header .mega-menu-trigger,
body > .tools-header .mega-menu-trigger { white-space: nowrap !important; }
body > header .mega-menu-trigger svg,
body > .article-header .mega-menu-trigger svg,
body > .tools-header .mega-menu-trigger svg { width: 12px !important; height: 12px !important; }
@media (max-width: 800px) {
  body > header, body > .article-header, body > .tools-header { height: 68px !important; min-height: 68px !important; padding-inline: 16px !important; gap: 12px !important; }
  body > header > nav, body > .article-header > nav, body > .tools-header > nav { gap: 10px !important; }
  body > header > nav a, body > .article-header > nav a, body > .tools-header > nav a { font-size: 11px !important; }
}