/* Hair Professional: page-local layout, no product catalogue downloads. */
.hair-page { padding-bottom: clamp(48px, 6vw, 80px); }
.hair-page [id], #panoramica { scroll-margin-top: 190px; }
.hair-hero { background: var(--ink); color: var(--white); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.hair-hero-copy { padding: clamp(40px, 6vw, 86px) clamp(24px, 5vw, 76px); align-self: center; min-width: 0; }
.hair-hero h1 { max-width: 820px; font-size: clamp(2.8rem, 4.8vw, 5.4rem); overflow-wrap: anywhere; }
.hair-hero-copy > p:not(.breadcrumb) { max-width: 650px; margin: 28px 0; color: rgba(255,255,255,.78); font-size: 1.06rem; }
.hair-hero-media { min-width: 0; overflow: hidden; }
.hair-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 25%; }
.hair-intro { border-bottom: 1px solid var(--line); }
.hair-categories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; padding: clamp(32px, 5vw, 72px) clamp(24px, 5vw, 76px); }
.hair-category { min-width: 0; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: 22px; }
.hair-category-media { aspect-ratio: 18/13; background: #f4f3f1; overflow: hidden; }
.hair-category-media img { width: 100%; height: 100%; object-fit: contain; }
.hair-category-ambient img { object-fit: cover; object-position: 50% 18%; }
.hair-category-copy { padding: clamp(25px, 3vw, 44px); }
.hair-category h2 { font-size: clamp(2rem, 3vw, 3.3rem); overflow-wrap: anywhere; }
.hair-category p { color: var(--muted); margin-bottom: 0; }
.hair-specific { background: var(--white); border-block: 1px solid var(--line); }
.hair-contact .contact-actions { flex-shrink: 0; }
.hair-contact .button { text-align: center; white-space: normal; }
@media (max-width: 1440px) { .hair-page [id], #panoramica { scroll-margin-top: 110px; } }
@media (max-width: 900px) { .hair-hero { grid-template-columns: minmax(0, 1fr); } .hair-hero-media { max-height: 440px; } .hair-hero-media img { height: auto; } .hair-categories { grid-template-columns: minmax(0, 1fr); gap: 24px; } }
@media (max-width: 600px) { .hair-hero h1 { font-size: clamp(2.5rem, 10vw, 3.6rem); } .hair-hero-media { max-height: 350px; } .hair-contact { align-items: stretch; } .hair-contact .contact-actions { width: 100%; } .hair-contact .button { width: 100%; } }