
.themed-hero{position:relative;display:block;overflow:hidden;min-height:520px;padding:70px clamp(24px,8vw,120px);color:white;background:radial-gradient(circle at 78% 50%,rgba(225,44,95,.38),transparent 26%),linear-gradient(125deg,#0d0e12 0%,#20232a 100%)}
.themed-hero>div:first-child{position:relative;z-index:2;max-width:850px;min-width:0;padding:0}
.themed-hero h1{font-size:clamp(2.8rem,5.4vw,5.2rem);max-width:850px;line-height:1.08}
.themed-hero>div:first-child>p:not(.breadcrumb){max-width:720px;color:rgba(255,255,255,.76)}
.themed-relocated-media{margin-top:28px;border-radius:22px;overflow:hidden;min-width:0;background:#f3f3f5}
.themed-relocated-media.hair-hero-media{max-height:none}
.themed-relocated-media img{display:block;width:100%;height:auto;object-fit:contain}
.themed-relocated-media.rewax-hero-video{width:100%;aspect-ratio:16/9}
.themed-relocated-media.rewax-hero-video iframe{display:block;width:100%;height:100%;min-height:0;border:0}
.themed-media-intro{align-items:start;gap:24px clamp(30px,5vw,70px);grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.themed-media-intro .guide-title{display:contents}
.themed-media-intro .guide-title>span{grid-column:1/-1}
.themed-media-intro .guide-title>h2{grid-column:1/-1;max-width:1000px;margin:0;font-size:clamp(2.4rem,4vw,3.6rem);line-height:1.1}
.themed-media-intro .themed-relocated-media{margin-top:0}
.themed-media-intro>div:last-child{min-width:0}
@media(max-width:900px){.themed-hero{min-height:0;padding:48px 24px}.themed-hero h1{font-size:clamp(2.5rem,9vw,3.6rem)}.themed-relocated-media{max-width:620px;margin-top:24px}.themed-media-intro{gap:24px;grid-template-columns:minmax(0,1fr)}}

.themed-media-intro .family-hero-image,.themed-media-intro .nails-editorial-visual{aspect-ratio:auto;height:auto;max-height:none;min-height:0;margin:0}
.themed-media-intro .family-hero-image img,.themed-media-intro .nails-editorial-visual img{height:auto;width:100%;object-fit:contain}

/* Approved abstract motifs: decorative only, no text or raster assets. */
.hero-design{position:absolute;inset:-6% -10% -8% auto;width:66%;height:114%;z-index:0;pointer-events:none;user-select:none;background-position:center;background-size:cover;background-repeat:no-repeat;mask-image:linear-gradient(90deg,transparent 0%,#000 27%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 27%)}
.hero-design--hair{background-image:url('/assets/hero/motif-hair.svg')}
.hero-design--mechanical{background-image:url('/assets/hero/motif-mechanical.svg')}
.hero-design--beauty{background-image:url('/assets/hero/motif-beauty.svg')}
.hero-design--uv{background-image:url('/assets/hero/motif-uv.svg')}
/* Local grid shrink constraint: retain readable content without body overflow. */
.hero-layout-fix .selection-guide>*{min-width:0}
.hero-layout-fix .selection-guide h2{overflow-wrap:anywhere}
@media(max-width:1100px),(forced-colors:active){.hero-design{display:none}}

/* Sector-specific refinements: short UV lettering is decorative CSS only. */
.hero-design--dialogue{background-image:url('/assets/hero/motif-dialogue.svg')}
.hero-design--wax{background-image:url('/assets/hero/motif-wax.svg')}
.hero-design--uvbulb{background-image:url('/assets/hero/motif-uvbulb.svg')}
.hero-design--uvhybrid{background-image:url('/assets/hero/motif-uvhybrid.svg')}
.hero-design--uvmixed{background-image:url('/assets/hero/motif-uvmixed.svg')}
.hero-design[data-short-word]::after{content:attr(data-short-word);position:absolute;right:23%;top:26%;font:700 clamp(160px,22vw,360px)/1 "Oswald",sans-serif;color:rgba(255,255,255,.06);letter-spacing:-.035em}

/* Approved cosmetics and dermocosmetics: distinct identities, unchanged media assets. */
.hero-design--cosmetic{background-image:url('/assets/hero/motif-cosmetic.svg')}
.hero-design--skin{background-image:url('/assets/hero/motif-skin.svg');opacity:.7}
.dermo-hero.themed-dermo-hero{position:relative;overflow:hidden;display:block}
.dermo-hero.themed-dermo-hero .dermo-hero-copy{position:relative;z-index:1;max-width:850px}
.themed-dermo-intro{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:26px clamp(30px,5vw,70px);align-items:start}
.themed-dermo-intro>div:first-child{display:contents}
.themed-dermo-intro>div:first-child>span,.themed-dermo-intro>div:first-child>h2{grid-column:1/-1}
.themed-dermo-intro h2{max-width:1050px;font-size:clamp(2.4rem,4vw,3.6rem);line-height:1.1;margin:0}
.themed-dermo-intro .dermo-visual{min-height:0;gap:16px;align-items:start}
.themed-dermo-intro .dermo-visual figure{transform:none;border-color:var(--line);min-width:0}
.themed-dermo-intro .dermo-visual img{display:block;height:auto;object-fit:contain}
.themed-dermo-intro .dermo-intro-copy{min-width:0}
@media(max-width:900px){.themed-dermo-intro{grid-template-columns:minmax(0,1fr);gap:24px}.themed-dermo-intro .dermo-visual{max-width:620px}.dermo-hero.themed-dermo-hero{min-height:0}}

/* Natural Hair Care: contain only the styling section's intrinsic grid width. */
#styling-finitura.hair-intro > *{min-width:0}
#styling-finitura.hair-intro h2{overflow-wrap:anywhere}

/* Dermocosmetics breadcrumb: keep ancestor links together on narrow phones. */
@media(max-width:400px){
  .themed-dermo-hero .breadcrumb{flex-wrap:wrap;gap:4px 8px;align-items:baseline}
  .themed-dermo-hero .breadcrumb a{white-space:nowrap}
}

/* Scoped next-phase proposals: existing hero typography and media stay intact. */
.hero-design--filters{background-image:url('/assets/hero/motif-filters.svg')}
.hero-design--controls{background-image:url('/assets/hero/motif-controls.svg')}
.hero-design--chipcard{background-image:url('/assets/hero/motif-chipcard.svg')}
.hero-design--solarium{background-image:url('/assets/hero/motif-solarium.svg')}
.hero-design--skincare{background-image:url('/assets/hero/motif-skincare.svg')}
.hero-design--consumables{background-image:url('/assets/hero/motif-consumables.svg')}
.hero-design--technology{background-image:url('/assets/hero/motif-technology.svg')}
.hero-design--rental{background-image:url('/assets/hero/motif-rental.svg')}
.hero-layout-fix .ricambi-intro-title{font-size:clamp(2.4rem,4.6vw,4.45rem)}

/* Only the two equipment enquiry headings may wrap an overlong word on narrow screens. */
@media(max-width:600px){.contact-panel.contact-title-wrap h2{overflow-wrap:anywhere}}

/* Apparecchiature only: constrain the original introductory grid at compact widths. */
@media(max-width:900px){.equipment-intro-wrap>div{min-width:0}.equipment-intro-wrap .guide-title h2{overflow-wrap:anywhere}}
