:where([data-etch-element="container"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  max-inline-size: var(--content-width, 1366px);
  align-self: center; margin-inline: auto;
}
:where([data-etch-element="flex-div"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
}
:where([data-etch-element="section"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
:where([data-etch-element="iframe"]) {
  inline-size: 100%;
  height: auto;
 aspect-ratio: 16/9;
}
.icon {
  inline-size: 1.25em; block-size: 1.25em; flex-shrink: 0;
}
.section-title {
  margin-block: 0 var(--space-l); text-align: center;
}
.site-header {
  padding: 0; position: relative; z-index: 10; container-type: inline-size; background: var(--white); box-shadow: var(--shadow-header);
}
.site-header__top {
  background: var(--primary); color: var(--white);
}
.site-header__top-inner {
  inline-size: var(--content-width-safe); margin-inline: auto; display: flex; justify-content: flex-end; padding-block: var(--space-xs);
@container (width < 48rem) { justify-content: flex-start; }
}
.top-contacts {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; column-gap: var(--space-l); row-gap: var(--space-xs);
@container (width < 48rem) { flex-direction: column; }
}
.top-contacts-link {
  display: inline-flex; align-items: center; gap: 0.6em; font-family: var(--font-ui); font-size: var(--text-m); font-weight: 400; color: var(--white); text-decoration: none; overflow-wrap: anywhere;
&:hover { text-decoration: underline; }
}
.top-contacts-icon {
  inline-size: 1.4em; block-size: 1.4em;
}
.site-header__bar {
  position: relative; inline-size: var(--content-width-safe); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-m); padding-block: var(--space-xs);
}
.site-header__logo {
  display: block; flex-shrink: 0;
}
.site-header__logo-img {
  display: block; inline-size: 11.5625rem; block-size: auto;
@container (width < 48rem) { inline-size: 10.875rem; }
}
.site-header__menu {
  list-style: none; margin: 0; padding: 0; display: flex;
}
.site-header__link {
  position: relative; display: block; padding: 0.8125rem 1.25rem; font-family: var(--font-ui); font-size: var(--text-m); font-weight: 600; color: var(--primary); text-decoration: none;
&::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 3px; background: var(--primary); opacity: 0; transition: opacity var(--transition); }
&:hover::after, &:focus-visible::after { opacity: 1; }
}
.site-header__link--current {
  color: var(--neutral);
&::after { opacity: 1; }
}
.site-header__nav {
  @container (width < 64rem) { display: none; }
}
.site-header__mobile {
  display: none;
@container (width < 64rem) { display: block; }
}
.site-header__toggle {
  display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; color: var(--neutral); cursor: pointer; list-style: none;
&::-webkit-details-marker { display: none; }
& .icon { inline-size: 1.5rem; block-size: 1.5rem; }
}
.site-header__icon-close {
  display: none;
.site-header__mobile[open] & { display: block; }
}
.site-header__icon-open {
  .site-header__mobile[open] & { display: none; }
}
.site-header__drawer {
  position: absolute; inset-inline: calc(var(--gutter) * -1); inset-block-start: 100%; z-index: 20; padding-block: var(--space-xs); background: var(--white); box-shadow: var(--shadow-card);
}
.site-header__drawer-menu {
  list-style: none; margin: 0; padding: 0;
}
.site-header__drawer-link {
  display: block; padding: var(--space-s) var(--gutter); font-family: var(--font-ui); font-size: var(--text-m); font-weight: 600; color: var(--primary); text-decoration: none;
&:hover { background: var(--base-ultra-light); }
}
.hero {
  container-type: inline-size; background: var(--white);
}
.hero__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center;
@container (width < 48rem) { grid-template-columns: minmax(0, 1fr); gap: var(--space-xxl); }
}
.hero__copy {
  display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--space-xxl) + var(--space-xl)); padding-inline-end: 20%;
@container (width < 48rem) { padding-inline-end: 0; gap: calc(var(--space-xxl) * 2 + var(--space-l)); }
}
.hero__title {
  margin: 0;
@container (width < 48rem) { text-align: center; }
}
.hero__cta {
  @container (width < 48rem) { align-self: center; --btn-padding-inline: 2.2em; }
}
.hero__media {
  margin: 0; padding: var(--space-xs);
@container (width < 48rem) { order: -1; }
}
.hero__img {
  display: block; inline-size: 100%; block-size: auto; aspect-ratio: 1; object-fit: cover;
}
.treatments {
  container-type: inline-size; background: var(--base-ultra-light);
}
.treatments__intro {
  max-inline-size: 35.625rem; margin: 0 auto var(--space-l); text-align: center; font-size: var(--text-l); font-weight: 500; line-height: 1.5;
}
.treatments__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-l);
@container (width < 48rem) { grid-template-columns: minmax(0, 1fr); }
}
.treatment {
  display: flex; flex-direction: column; align-items: center; padding: var(--space-xl) var(--space-m); box-shadow: var(--shadow-card); text-align: center;
}
.treatment__icon {
  display: block; inline-size: 11.25rem; block-size: 11.25rem;
}
.treatment__title {
  margin-block: 0.5rem 0.75rem; font-size: var(--h3); line-height: 2rem;
}
.treatment__text {
  margin: 0; font-size: var(--text-m); font-weight: 400; line-height: 1.625;
}
.about {
  background: var(--white); padding-block-start: calc(var(--section-space-m) + var(--space-m));
}
.about__text {
  max-inline-size: 43.75rem; margin-inline: auto;
}
.about__p {
  margin-block: 0 0.8em; font-size: var(--text-l); font-weight: 500; line-height: 1.556;
}
.booking {
  container-type: inline-size; background: var(--primary); color: var(--white);
}
.contact {
  container-type: inline-size; background: var(--white); padding-block: var(--space-m);
}
.contact__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: var(--space-l);
@container (width < 48rem) { grid-template-columns: minmax(0, 1fr); }
}
.contact-list {
  list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs);
}
.contact-list-link {
  display: inline-flex; align-items: center; gap: 0.6em; font-family: var(--font-ui); font-size: var(--text-l); font-weight: 500; color: var(--neutral); text-decoration: none; overflow-wrap: anywhere;
&:hover { color: var(--primary); }
}
.contact-list-icon {
  color: var(--primary);
}
.contact__map {
  display: block; inline-size: 100%; block-size: 18.75rem; border: 0;
}
.site-footer {
  padding: 0; background: var(--base-ultra-light);
}
.site-footer__inner {
  inline-size: var(--content-width-safe); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-m); padding-block: var(--space-xl);
}
.site-footer__logo {
  display: block;
}
.site-footer__logo-img {
  display: block; inline-size: 9.375rem; block-size: auto;
}
.site-footer__social {
  display: grid; place-items: center; inline-size: 3.125rem; block-size: 3.125rem; border-radius: 10%; background: var(--facebook); color: var(--white);
&:hover { opacity: 0.9; }
}
.site-footer__social-icon {
  inline-size: 1.5625rem; block-size: 1.5625rem;
}
.booking__inner {
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.skip-link {
  position: absolute; inset-block-start: var(--space-xs); inset-inline-start: var(--space-xs); z-index: 100; padding: var(--space-xs) var(--space-s); background: var(--white); color: var(--primary); transform: translateY(-200%);
&:focus { transform: none; }
}
.booking__title {
  margin-block: 0 var(--space-m); color: var(--white);
}
.booking__text {
  max-inline-size: 35.625rem; margin-block: 0 var(--space-l); font-size: var(--text-l); font-weight: 500; line-height: 1.5; color: var(--white);
}
.booking__cta {
  &.btn--primary { --btn-background: var(--white); --btn-background-hover: var(--base-ultra-light); --btn-text-color: var(--primary); --btn-text-color-hover: var(--primary-hover); --btn-border-color: var(--white); --btn-border-color-hover: var(--base-ultra-light); }
@container (width < 48rem) { --btn-padding-inline: 2.2em; }
}