/* Melatone primary navigation, shared across every page. Self contained so the
   canonical header renders identically regardless of a page's inline styles. */

.mlt-nav { display: none; align-items: center; gap: 28px; }
@media (min-width: 1024px) { .mlt-nav { display: flex; } }

.mlt-nav-link {
  font-family: inherit; font-size: 13px; color: #2B2723; text-decoration: none;
  letter-spacing: 0.01em; background: none; border: 0; padding: 0 0 2px;
  border-bottom: 1px solid transparent; cursor: pointer; line-height: 1.2;
  transition: color .18s ease, border-color .18s ease;
}
.mlt-nav-link:hover, .mlt-nav-link:focus-visible { color: #1A1A1A; border-bottom-color: rgba(184,153,104,0.6); }

/* Treatments dropdown */
.mlt-nav-dd { position: relative; }
.mlt-nav-dd-btn { display: inline-flex; align-items: center; gap: 5px; }
.mlt-nav-dd-btn svg { transition: transform .18s ease; }
.mlt-nav-dd[data-open="true"] .mlt-nav-dd-btn svg { transform: rotate(180deg); }
.mlt-nav-dd-panel {
  position: absolute; top: calc(100% + 16px); left: -14px; width: 256px;
  background: #FDFBF5; border: 1px solid #E4CFA6; border-radius: 10px; padding: 8px;
  z-index: 60; opacity: 0; visibility: hidden; transform: translateY(-6px);
  box-shadow: 0 14px 34px rgba(26,26,26,0.10);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.mlt-nav-dd:hover .mlt-nav-dd-panel,
.mlt-nav-dd[data-open="true"] .mlt-nav-dd-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.mlt-nav-dd-panel a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 13px; color: #2B2723; text-decoration: none; padding: 9px 11px; border-radius: 6px;
}
.mlt-nav-dd-panel a:hover, .mlt-nav-dd-panel a:focus-visible { background: #F1E6CF; color: #1A1A1A; }
.mlt-nav-dd-all { border-top: 1px solid #E4CFA6; margin-top: 4px; padding-top: 11px !important; color: #7A6138; font-weight: 500; }
.mlt-nav-pill { font-size: 9px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #7A6138; background: #F1E6CF; border-radius: 20px; padding: 2px 8px; white-space: nowrap; }

/* Right cluster: WhatsApp utility icon + Book CTA */
.mlt-nav-actions { display: none; align-items: center; gap: 14px; }
@media (min-width: 1024px) { .mlt-nav-actions { display: flex; } }
.mlt-nav-ico {
  width: 36px; height: 36px; border: 1px solid #C9B58D; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; color: #7A6138; flex-shrink: 0;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.mlt-nav-ico:hover, .mlt-nav-ico:focus-visible { background: #1A1A1A; color: #F9F1E3; border-color: #1A1A1A; }
.mlt-nav-cta {
  display: inline-flex; align-items: center; gap: 7px; background: #1A1A1A; color: #F9F1E3;
  font-size: 12px; font-weight: 500; letter-spacing: 0.03em; padding: 10px 18px; text-decoration: none;
  transition: background .18s ease;
}
.mlt-nav-cta:hover { background: #2B2723; }

/* Mobile toggle button */
.mlt-nav-toggle { display: flex; flex-direction: column; gap: 5px; padding: 8px; margin-right: -8px; background: none; border: 0; cursor: pointer; }
@media (min-width: 1024px) { .mlt-nav-toggle { display: none; } }
.mlt-nav-toggle span { width: 20px; height: 1px; background: #1A1A1A; display: block; transition: transform .2s ease, opacity .2s ease; }

/* Mobile drawer */
.mlt-mobile { display: none; flex-direction: column; gap: 18px; background: #F9F1E3; border-top: 1px solid #E4CFA6; padding: 24px 20px; }
.mlt-mobile.open { display: flex; }
@media (min-width: 1024px) { .mlt-mobile, .mlt-mobile.open { display: none; } }
.mlt-m-link { font-size: 14px; color: #6B6258; text-decoration: none; }
.mlt-m-link:hover { color: #1A1A1A; }
.mlt-m-acc-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; font-family: inherit; font-size: 14px; color: #6B6258; background: none; border: 0; padding: 0; cursor: pointer; }
.mlt-m-acc-btn svg { transition: transform .18s ease; }
.mlt-m-acc[data-open="true"] .mlt-m-acc-btn { color: #1A1A1A; }
.mlt-m-acc[data-open="true"] .mlt-m-acc-btn svg { transform: rotate(180deg); }
.mlt-m-sub { display: none; flex-direction: column; gap: 13px; padding: 14px 0 4px 16px; border-left: 1px solid #E4CFA6; margin: 4px 0 2px 1px; }
.mlt-m-acc[data-open="true"] .mlt-m-sub { display: flex; }
.mlt-m-actions { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; border-top: 1px solid #E4CFA6; }
.mlt-m-cta { display: inline-flex; justify-content: center; align-items: center; gap: 7px; background: #1A1A1A; color: #F9F1E3; padding: 14px; font-size: 13px; font-weight: 500; text-decoration: none; }
.mlt-m-cta-ghost { display: inline-flex; justify-content: center; align-items: center; gap: 7px; border: 1px solid rgba(26,26,26,0.4); color: #1A1A1A; padding: 13px; font-size: 13px; font-weight: 500; text-decoration: none; }