/* Rasa – a cosmetology studio set like a printed beauty journal (design-taste-frontend "The printed annual",
   seed 1544949253). One axis at 5/12 of the width (the start of column 6) carries every heading and text block on the
   home page and the shared pages; the margin to its left holds side notes, facts and single photographs.
   Type: Imbue (condensed high-contrast serif, only from 28px up – its Lithuanian accents are drawn for display) and
   Albert Sans for everything read. Colour: tokens only (theme.css + design.json). Square corners, flat fills, no
   rules or shadows at rest. Motion: transform / opacity only; everything is visible without it. */
.theme-kosmetologija {
  --k-bg: var(--chalk);
  --k-bg2: var(--paper);
  --k-tx: var(--text);
  --k-soft: var(--ink-2);
  --k-acc: var(--gold);
  --k-m: clamp(20px, 3.4vw, 56px);
  --k-gut: clamp(12px, 1.6vw, 24px);
  --k-sec: clamp(96px, 12vw, 200px);
  /* five sizes do the work */
  --k-small: 1rem;
  --k-body: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  --k-state: clamp(1.4375rem, 1.05rem + 1.25vw, 2.125rem);
  --k-sub: clamp(1.875rem, 1.4rem + 1.4vw, 2.625rem);
  --k-head: clamp(2.875rem, 1.6rem + 4.4vw, 5.5rem);
  --k-name: clamp(9rem, 2rem + 26vw, 27rem);
  --k-serif: "Imbue", Georgia, serif;
  --k-sans: "Albert Sans", system-ui, sans-serif;
  background: var(--k-bg); color: var(--k-tx);
  font-family: var(--k-sans);
}
.theme-kosmetologija main { font-family: var(--k-sans); font-size: var(--k-body); line-height: 1.55; }
.theme-kosmetologija ::selection { background: var(--k-sage); color: var(--k-sage-ink); }
.ks img { display: block; }
:where(.ks) figure { margin: 0; }

/* the grid every section shares: 12 columns, the axis is column 6 */
.k-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--k-gut); padding-inline: var(--k-m); }
.k-grid > * { grid-column: 1 / -1; min-width: 0; }
.k-h2 { margin: 0; font: 400 var(--k-head)/.98 var(--k-serif); letter-spacing: -.01em; text-wrap: balance; }

/* one button: rectangular, one flat fill */
.k-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 26px; border-radius: 0; background: var(--k-acc); color: var(--on-accent); font: 600 var(--k-small)/1.1 var(--k-sans); letter-spacing: .01em; text-decoration: none; transition: background-color .3s var(--k-ease), transform .25s var(--k-ease); }
.k-btn::after { content: ""; width: 18px; height: 1.5px; background: currentColor; transform-origin: left; transition: transform .45s var(--k-ease); }
.k-btn:hover { background: var(--gold-deep); }
.k-btn:hover::after { transform: scaleX(1.5); }
.k-btn:active { transform: scale(.98); }
.k-btn--paper { background: var(--k-card); color: var(--k-tx); }
.k-btn--paper:hover { background: var(--k-sage); }
.ks a:focus-visible, .ks button:focus-visible { outline: 3px solid var(--k-acc); outline-offset: 3px; }

/* ── cover ── */
.kc { position: relative; height: 100svh; min-height: 560px; overflow: hidden; color: var(--k-card); background: var(--k-night); }
.kc__img, .kc__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 38%; }
.kc__vid { opacity: 0; transition: opacity 1.4s ease; pointer-events: none; }
.kc__vid.is-on { opacity: 1; }
.kc::before { content: ""; position: absolute; inset: 0 0 auto; height: 180px; z-index: 1; background: linear-gradient(to bottom, var(--k-scrim-top), var(--k-clear)); } /* taste-skill-ignore: neutral scrim under the header on the cover photo */
.kc::after { content: ""; position: absolute; inset: 38% 0 0; z-index: 1; background: linear-gradient(to top, var(--k-scrim) 0%, var(--k-clear) 100%); } /* taste-skill-ignore: neutral scrim under the name on the cover photo */
.kc__in { position: absolute; inset: auto 0 0; z-index: 2; padding-bottom: clamp(28px, 5vh, 56px); row-gap: 22px; align-items: end; }
.kc__name { margin: 0; font: 400 var(--k-name)/.8 var(--k-serif); letter-spacing: -.01em; text-transform: uppercase; }
.kc__mask { display: block; overflow: hidden; padding: .22em 0; margin: -.22em 0; }
.kc__line { display: block; }
.kc__side { display: grid; gap: 22px; justify-items: start; }
.kc__lead { margin: 0; max-width: 30ch; font-size: clamp(1.1875rem, 1rem + .5vw, 1.4375rem); line-height: 1.35; }

/* ── the opening statement ── */
.ki { padding-block: var(--k-sec) calc(var(--k-sec) * .8); row-gap: 40px; align-items: start; }
.ki__p { margin: 0; font-size: var(--k-state); line-height: 1.28; letter-spacing: -.01em; text-indent: 3em; max-width: 34ch; }
.ki__fig { width: 62%; justify-self: end; }
.ki__fig img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
.ki__room img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.ki__note { margin: 14px 0 0; max-width: 40ch; font-size: var(--k-small); line-height: 1.5; color: var(--k-soft); }

/* ── the live thing on the sage page ── */
.kp { background: var(--k-sage); color: var(--k-sage-ink); padding-block: clamp(80px, 10vw, 160px); }
.kp__in { row-gap: 40px; align-items: start; }
.kp__hint { margin: 20px 0 28px; max-width: 34ch; }
.kp__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.kp__opt { position: relative; display: flex; align-items: center; min-height: 48px; padding: 0 18px; border: 0; background: var(--k-sage-2); color: inherit; font: 600 1.0625rem/1.1 var(--k-sans); text-align: left; cursor: pointer; transition: background-color .3s var(--k-ease), color .3s, transform .2s var(--k-ease); }
.kp__opt:hover { background: var(--k-card); }
.kp__opt:active { transform: scale(.97); }
.kp__opt[aria-pressed="true"] { background: var(--k-acc); color: var(--on-accent); }
.kp__card { display: none; background: var(--k-card); color: var(--k-tx); }
.kp__card.is-on { display: grid; }
.ks:not(.ks-js) .kp__card { display: grid; margin-bottom: 12px; }
.ks:not(.ks-js) .kp__list { display: none; }
.kp__pic img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.kp__body { padding: 28px 24px 32px; display: grid; justify-items: start; align-content: start; }
.kp__name { margin: 0 0 14px; font: 400 var(--k-sub)/1 var(--k-serif); }
.kp__text { margin: 0 0 22px; }
.kp__svc { display: grid; gap: 2px; margin: 0 0 18px; padding: 16px 18px; width: 100%; background: var(--k-bg); }
.kp__svc span:first-child { font-size: var(--k-small); color: var(--k-soft); }
.kp__svc b { font-weight: 600; font-size: 1.1875rem; line-height: 1.3; }
.kp__meta { font-size: var(--k-small); font-variant-numeric: tabular-nums; }
.kp__home { margin: 0 0 26px; }
.kp__home b { font-weight: 600; }
.kp__note { margin: 18px 0 0; font-size: var(--k-small); }
@media (prefers-reduced-motion: no-preference) {
  .kp__card.is-new .kp__pic { animation: k-shutter .9s var(--k-ease) both; }
  .kp__card.is-new .kp__body > * { animation: k-rise .7s var(--k-ease) both; }
  .kp__card.is-new .kp__body > :nth-child(2) { animation-delay: .06s; }
  .kp__card.is-new .kp__body > :nth-child(3) { animation-delay: .12s; }
  .kp__card.is-new .kp__body > :nth-child(n+4) { animation-delay: .18s; }
}

/* ── the treatment table ── */
.km { padding-block: var(--k-sec); row-gap: 0; align-items: end; }
.km__h { margin-bottom: 20px; }
.km__note { margin: 0 0 56px; max-width: 36ch; color: var(--k-soft); }
.km__fig { width: 64%; margin-top: 56px; order: 9; }
.km__fig img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.km__group + .km__group { margin-top: 48px; }
.km__gname { margin: 0 0 8px; font: 400 var(--k-sub)/1.05 var(--k-serif); color: var(--k-acc); }
.km__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.km__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: baseline; padding: 14px 0; color: var(--k-tx); text-decoration: none; transition: background-color .3s var(--k-ease), padding .4s var(--k-ease); }
.km__row:hover { background: var(--k-bg2); padding-inline: 14px; }
.km__name { font-weight: 600; line-height: 1.3; }
.km__name small { display: block; margin-top: 3px; font-weight: 400; font-size: var(--k-small); color: var(--k-soft); }
.km__min { grid-row: 2; font-size: var(--k-small); color: var(--k-soft); font-variant-numeric: tabular-nums; }
.km__price { grid-column: 2; grid-row: 1; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── the mosaic page: photographs and flat tiles, no gutters ── */
.kx { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--k-night); color: var(--k-night-on); }
.kx__tile--text { grid-column: 1 / -1; padding: 72px var(--k-m) 64px; display: grid; align-content: end; gap: 22px; }
.kx__p { margin: 0; max-width: 36ch; font-size: var(--k-body); color: var(--k-night-on); }
.kx__pic { position: relative; overflow: hidden; }
.kx__pic img { width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform 1.4s var(--k-ease); }
.kx__pic:hover img { transform: scale(1.04); }
.kx__pic figcaption { position: absolute; left: 0; top: 0; padding: 8px 12px; background: var(--k-card); color: var(--k-tx); font-size: var(--k-small); line-height: 1.3; }
.kx__tile--sage { grid-column: 1 / -1; background: var(--k-sage); color: var(--k-sage-ink); }
.kx__link { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 96px; padding: 0 var(--k-m); color: inherit; text-decoration: none; font: 400 var(--k-sub)/1 var(--k-serif); }
.kx__link i { flex: none; width: 48px; height: 2px; background: currentColor; transform-origin: right; transition: transform .5s var(--k-ease); }
.kx__link:hover i { transform: scaleX(1.6); }

/* ── the visit as a staircase ── */
.kh { padding-block: var(--k-sec); row-gap: 48px; align-items: start; }
.kh__fig { width: 70%; justify-self: end; }
.kh__fig img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 55% 40%; }
.kh__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 44px; }
.kh__line { margin: 0 0 12px; font: 400 var(--k-head)/1 var(--k-serif); letter-spacing: -.005em; }
.kh__step p { margin: 0; max-width: 36ch; }
.kh__step--2 { padding-left: 6vw; }
.kh__step--3 { padding-left: 12vw; }
.kh__step--4 { padding-left: 18vw; }
.kh__step--4 .kh__line { color: var(--k-acc); }

/* ── the founder ── */
.kf { padding-block: 0 var(--k-sec); row-gap: 48px; align-items: start; }
.kf__fig img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 22%; }
.kf__facts { margin: 28px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.kf__facts dt { font-size: var(--k-small); color: var(--k-soft); }
.kf__facts dd { margin: 2px 0 0; font-weight: 600; }
.kf__lead { margin: 0 0 36px; font-size: clamp(1.3125rem, 1rem + 1.25vw, 2.125rem); line-height: 1.28; letter-spacing: -.01em; max-width: 34ch; }
.kf__cols { display: grid; gap: 0 var(--k-gut); }
.kf__cols p { margin: 0 0 1.1em; max-width: 40ch; }
.kf__sign { margin: 24px 0 4px; font: 400 var(--k-head)/.9 var(--k-serif); }
.kf__role { margin: 0; color: var(--k-soft); font-size: var(--k-small); }
.kf__lists { margin-top: 64px; display: grid; gap: 40px var(--k-gut); }
.kf__list h3 { margin: 0 0 12px; font: 600 var(--k-small)/1.3 var(--k-sans); color: var(--k-acc); }
.kf__list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.kf__list li, .kf__list li a { display: flex; justify-content: space-between; gap: 16px; font-size: var(--k-small); font-variant-numeric: tabular-nums; }
.kf__list li a { flex: 1; color: var(--k-tx); text-decoration: none; padding: 10px 12px; margin: -10px -12px; transition: background-color .3s var(--k-ease); }
.kf__list li a:hover { background: var(--k-bg2); }
.kf__list li a span:last-child { text-align: right; }
.kf__list li a span:first-child { font-weight: 600; }

/* ── before you come: reading text ── */
.kq { padding-block: var(--k-sec); background: var(--k-bg2); row-gap: 36px; }
.kq__text p { margin: 0 0 20px; break-inside: avoid; max-width: 40ch; }
.kq__text b { font-weight: 600; }

/* ── the close on the night page ── */
.kz { background: var(--k-night); color: var(--k-night-on); padding-block: var(--k-sec) 24px; }
.kz__in { row-gap: 36px; align-items: start; }
.kz__s { margin: 0; font: 400 var(--k-head)/.98 var(--k-serif); max-width: 13ch; text-wrap: balance; }
.kz__p { margin: 24px 0 0; max-width: 34ch; color: var(--k-night-on); }
.kz__fig { width: 112px; }
.kz__fig img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.kz__q { margin: 0 0 18px; font: 600 1.1875rem/1.3 var(--k-sans); }
.kz__places { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 18px; }
.kz__places li { display: grid; gap: 2px; }
.kz__places b { font-weight: 600; color: var(--k-night-soft); font-size: var(--k-small); }
.kz__places a, .kz__links a { color: var(--k-night-on); text-underline-offset: 5px; text-decoration-thickness: 1px; }
.kz__links { display: grid; gap: 6px; margin: 0 0 28px; }
.theme-kosmetologija .kz .place__nav { margin: 6px 0 0; }
.theme-kosmetologija .kz .place__nav span { color: var(--k-night-soft); }
.theme-kosmetologija .kz .place__nav a { background: var(--k-night-2); color: var(--k-night-on); }
.theme-kosmetologija .kz .place__nav a:hover { background: var(--k-acc); }

/* ── desktop: the axis ── */
@media (min-width: 900px) {
  .kc__in { row-gap: 0; }
  .kc__side { grid-column: 1 / 6; grid-row: 1; align-self: end; padding-bottom: .4em; }
  .kc__name { grid-column: 6 / -1; grid-row: 1; }

  .ki__p { grid-column: 6 / -1; grid-row: 1; max-width: 40ch; }
  .ki__fig { grid-column: 1 / 5; grid-row: 2; width: 100%; justify-self: stretch; margin-top: -9rem; }
  .ki__room { grid-column: 6 / -1; grid-row: 2; margin-top: 7rem; }

  .kp__side { grid-column: 1 / 6; position: sticky; top: calc(var(--hd-h, 72px) + 32px); }
  .kp__list { display: grid; gap: 0; }
  .kp__opt { width: 100%; min-height: 64px; padding: 0 0 0 32px; background: none; font: 400 var(--k-sub)/1.05 var(--k-serif); opacity: .5; transition: opacity .35s var(--k-ease), transform .45s var(--k-ease); }
  .kp__opt::before { content: ""; position: absolute; left: 4px; top: 50%; width: 12px; height: 12px; margin-top: -6px; background: var(--k-acc); opacity: 0; transform: scale(.6); transition: transform .4s var(--k-ease), opacity .3s; }
  .kp__opt:hover { background: none; opacity: .85; transform: translateX(4px); }
  .kp__opt[aria-pressed="true"] { background: none; color: inherit; opacity: 1; }
  .kp__opt[aria-pressed="true"]::before { opacity: 1; transform: none; }
  .kp__cards { grid-column: 6 / -1; }
  .kp__card.is-on, .ks:not(.ks-js) .kp__card { grid-template-columns: 5fr 7fr; }
  .kp__pic img { aspect-ratio: auto; height: 100%; min-height: 460px; }
  .kp__body { padding: 40px 40px 44px; }

  .km { align-items: start; }
  .km__h { grid-column: 1 / -1; padding-left: 3vw; }
  .km__note { grid-column: 6 / 11; }
  .km__fig { grid-column: 1 / 5; grid-row: 3; width: 100%; margin: 0; align-self: start; order: 0; position: sticky; top: calc(var(--hd-h, 72px) + 32px); }
  .km__table { grid-column: 6 / -1; grid-row: 3; }
  .km__group { display: grid; grid-template-columns: 2fr 5fr; column-gap: var(--k-gut); }
  .km__gname { padding-top: 8px; }
  .km__row { grid-template-columns: minmax(0, 1fr) 7ch 6ch; }
  .km__min { grid-row: 1; grid-column: 2; text-align: right; font-size: var(--k-body); }
  .km__price { grid-column: 3; text-align: right; }

  .kx { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, clamp(340px, 46vh, 520px)); }
  .kx__pic img { position: absolute; inset: 0; }
  .kx__tile--text { grid-column: 2 / 4; grid-row: 1; padding: 48px clamp(28px, 3vw, 56px); }
  .kx__pic--mask { grid-column: 1; grid-row: 1 / 3; }
  .kx__pic--serum { grid-column: 4; grid-row: 1; }
  .kx__pic--peel { grid-column: 2; grid-row: 2; }
  .kx__pic--glow { grid-column: 3; grid-row: 2; }
  .kx__tile--sage { grid-column: 4; grid-row: 2; display: grid; }
  .kx__pic img { aspect-ratio: auto; }
  .kx__link { align-items: end; padding: 32px clamp(24px, 2.4vw, 40px); }

  /* the photograph sits in the corner the stepping lines leave free – bottom left */
  .kh__fig { grid-column: 1 / 4; grid-row: 1; align-self: end; width: 100%; }
  .kh__fig img { aspect-ratio: 4 / 3; }
  .kh__steps { grid-column: 1 / -1; grid-row: 1; gap: 56px; padding-top: 6vh; }
  .kh__step { width: 50%; }
  .kh__step--1 { padding-left: 0; }
  .kh__step--2 { margin-left: calc(100% / 6); padding-left: 0; }
  .kh__step--3 { margin-left: calc(100% / 3); padding-left: 0; }
  .kh__step--4 { margin-left: calc(100% / 2); padding-left: 0; }

  .kf__side { grid-column: 1 / 5; }
  .kf__main { grid-column: 6 / -1; padding-top: 8vh; }
  .kf__cols { grid-template-columns: 1fr 1fr; }
  .kf__lists { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .kq__h { grid-column: 1 / 5; }
  .kq__text { grid-column: 6 / -1; columns: 2; column-gap: clamp(32px, 4vw, 64px); }

  .kz__lead { grid-column: 1 / 6; }
  .kz__fig { grid-column: 6 / 9; width: 100%; }
  .kz__fig img { aspect-ratio: 4 / 5; }
  .kz__info { grid-column: 9 / -1; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .kh__step { width: 62%; }
  .kh__fig { grid-column: 1 / 4; }
  .kf__lists { grid-template-columns: 1fr 1fr; }
}

/* ── entrances (classes added by kosmetologija.js only below the first screen; visible without it) ── */
.ks-in { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--k-ease) var(--d, 0s), transform 1s var(--k-ease) var(--d, 0s); }
.ks-in.is-in { opacity: 1; transform: none; }
.ks-pic { overflow: hidden; }
.ks-pic img { transform: scale(1.12); transition: transform 1.6s var(--k-ease) var(--d, 0s); }
.ks-pic.is-in img { transform: none; }
@keyframes k-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes k-shutter { from { opacity: 0; transform: scale(1.06); } }
@keyframes k-line { from { transform: translateY(160%); } }
@keyframes k-fade { from { opacity: 0; transform: translateY(12px); } }
@keyframes k-settle { from { transform: scale(1.07); } }
@media (prefers-reduced-motion: no-preference) {
  .kc__img { animation: k-settle 2.8s var(--k-ease) both; }
  .kc__line { animation: k-line 1.1s .2s var(--k-ease) both; }
  .kc__side > * { animation: k-fade .9s .65s var(--k-ease) both; }
  .kc__side > * + * { animation-delay: .75s; }
}
@media (prefers-reduced-motion: reduce) {
  .kc__vid { display: none; }
  .ks-in, .ks-pic img { opacity: 1; transform: none; transition: none; }
  .kp__opt, .kp__opt::before, .km__row, .kx__pic img { transition: none; }
}

/* ══ shared parts of every page in this design ══ */

/* header: the wordmark is the masthead name, small; one rectangular button the same height */
.theme-kosmetologija .b-mark .b-gilt { font-family: var(--k-serif); font-weight: 400; text-transform: uppercase; letter-spacing: .02em; font-size: 1.875rem; line-height: 1; text-shadow: none; } /* taste-skill-ignore: removes the base shadow */
.theme-kosmetologija .b-book { height: 44px; padding: 0 20px; border-radius: 0; background: var(--k-acc); color: var(--on-accent); font: 600 1rem/1 var(--k-sans); }
.theme-kosmetologija .b-book:hover, .theme-kosmetologija .b-book[aria-current] { background: var(--gold-deep); }
.theme-kosmetologija .hd--over:not(.is-solid) .b-book { background: var(--k-card); color: var(--k-tx); }
.theme-kosmetologija .hd--over:not(.is-solid) .b-book:hover { background: var(--k-sage); }
.theme-kosmetologija .hd--over:not(.is-solid) .b-mark .b-gilt { color: var(--k-card); }
.theme-kosmetologija .b-nav__link { font-family: var(--k-sans); font-weight: 600; font-size: 1rem; }
.theme-kosmetologija .b-nav__link::after { background: currentColor; height: 2px; }
.theme-kosmetologija .b-nav__link[aria-current="page"] { color: inherit; }
@media (min-width: 900px) { .theme-kosmetologija .b-mark .b-gilt { font-size: 2rem; } }

/* base buttons (consent, booking, contact) – one flat fill, square corners, no gradient or glow */
.theme-kosmetologija .btn--gold, .theme-kosmetologija .b-btn--gilt, .theme-kosmetologija .btn--accent { background: var(--k-acc); background-image: none; color: var(--on-accent); box-shadow: none; border-radius: 0; } /* taste-skill-ignore: removes the base shadow */
.theme-kosmetologija .b-btn--gilt::after, .theme-kosmetologija .btn--accent::after { display: none; }
.theme-kosmetologija .btn--gold:hover, .theme-kosmetologija .b-btn--gilt:hover, .theme-kosmetologija .btn--accent:hover { background: var(--gold-deep); }
.theme-kosmetologija .btn--outline, .theme-kosmetologija .btn--line { border-radius: 0; }
.theme-kosmetologija .place__nav a, .theme-kosmetologija .b-menu__foot .lang, .theme-kosmetologija .consent .btn--line { box-shadow: none; background: var(--k-bg2); color: var(--k-tx); border-radius: 0; } /* taste-skill-ignore: removes the base ring */
.theme-kosmetologija .place__nav a:hover, .theme-kosmetologija .consent .btn--line:hover { background: var(--k-sage); }

/* page heads of the shared pages: the title on the axis, the line under it */
.theme-kosmetologija .pagehead .h1, .theme-kosmetologija .salon-h1 { font-family: var(--k-serif); font-weight: 400; letter-spacing: -.01em; line-height: .98; }
.theme-kosmetologija .pagehead__text { color: var(--k-soft); font-size: var(--k-body); }

/* footer: light type on the night page (the home page's close runs straight into it) */
.theme-kosmetologija .ft { background: var(--k-night); color: var(--k-night-on); border-top: 0; }
.theme-kosmetologija .b-ft__sign .b-gilt { color: var(--k-night-on); font-family: var(--k-serif); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; text-shadow: none; } /* taste-skill-ignore: removes the base shadow */
.theme-kosmetologija .b-ft__tagline { color: var(--k-night-on); }
.theme-kosmetologija .ft .b-ft__head, .theme-kosmetologija .ft .b-ft__legal { color: var(--k-night-soft); }
.theme-kosmetologija .b-contact__hours .b-ft__head { color: var(--k-acc); font-weight: 600; font-size: var(--k-small); }
.theme-kosmetologija .b-ft__intro a, .theme-kosmetologija .b-ft__col a { color: var(--k-night-on); }
.theme-kosmetologija .ft .place { color: var(--k-night-on); }
.theme-kosmetologija .ft .place__nav a { background: var(--k-night-2); color: var(--k-night-on); }
.page-home.theme-kosmetologija .b-ft__grid > .b-ft__col:has(.places) { display: none; }

/* ══ the shared pages, in the journal's manner ══ */

/* page head (team, treatments – the design's own templates): the title large, the line on the axis */
.kd-head { padding-top: calc(var(--hd-h, 72px) + clamp(48px, 8vw, 120px)); padding-bottom: clamp(48px, 6vw, 96px); row-gap: 20px; align-items: end; }
.kd-h1 { margin: 0; font: 400 clamp(3.5rem, 1.8rem + 5vw, 6.75rem)/.92 var(--k-serif); letter-spacing: -.01em; overflow-wrap: break-word; }
.kd-lead { margin: 0; max-width: 34ch; font-size: var(--k-state); line-height: 1.3; letter-spacing: -.01em; }
.kd-toc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.kd-toc a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; background: var(--k-bg2); color: var(--k-tx); font-weight: 600; font-size: var(--k-small); text-decoration: none; transition: background-color .3s var(--k-ease); }
.kd-toc a:hover { background: var(--k-sage); }

/* team: a portrait page per cosmetologist */
.kt { list-style: none; margin: 0; padding: 0 0 var(--k-sec); }
.kt-person { row-gap: 32px; align-items: start; }
.kt-person + .kt-person { margin-top: var(--k-sec); }
.kt-photo img, .kt-photo picture img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; }
.kt-name { margin: 0; font: 400 clamp(4.5rem, 2rem + 9vw, 10rem)/.85 var(--k-serif); letter-spacing: -.01em; text-transform: uppercase; }
.kt-role { margin: 16px 0 0; font-weight: 600; color: var(--k-acc); }
.kt-bio { margin: 24px 0 0; max-width: 36ch; font-size: var(--k-state); line-height: 1.3; letter-spacing: -.01em; }
.kt-quote { margin: 40px 0 0; padding: 28px 28px 30px; background: var(--k-sage); color: var(--k-sage-ink); max-width: 34rem; }
.kt-quote p { margin: 0; font: 400 var(--k-sub)/1.08 var(--k-serif); }
.kt-facts { margin: 44px 0 0; display: grid; gap: 28px; }
.kt-facts dt { margin-bottom: 8px; font-weight: 600; font-size: var(--k-small); color: var(--k-acc); }
.kt-facts dd { margin: 0; }
.kt-next dd { font-size: var(--k-state); line-height: 1.2; }
.kt-next dd b { font-weight: 600; }
.kt-days, .kt-svc { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.kt-days li { display: grid; grid-template-columns: 3ch 11ch minmax(0, 1fr); gap: 12px; font-variant-numeric: tabular-nums; }
.kt-days li span:first-child { font-weight: 600; }
.kt-svc { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); column-gap: 24px; }
.kt-actions { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-top: 40px; }
.kt-social { color: var(--k-tx); font-weight: 600; text-underline-offset: 5px; }

/* treatments: each group a page – name, words and a photograph in the margin, the rows on the axis */
.kv { padding-bottom: var(--k-sec); }
.kv-group { row-gap: 28px; align-items: start; padding-block: clamp(56px, 7vw, 112px); }
.kv-group:nth-child(even) { background: var(--k-bg2); }
.kv-name { margin: 0 0 12px; font: 400 var(--k-head)/.95 var(--k-serif); }
.kv-text { margin: 0 0 28px; max-width: 32ch; color: var(--k-soft); }
.kd-fig img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.kv-row { grid-template-columns: minmax(0, 1fr) auto; }
.kv-book { grid-column: 1 / -1; grid-row: 3; margin-top: 6px; font-weight: 600; font-size: var(--k-small); color: var(--k-acc); }
.kv-group:nth-child(even) .km__row:hover { background: var(--k-bg); }

@media (min-width: 900px) {
  .kd-h1 { grid-column: 1 / -1; }
  .kd-lead { grid-column: 6 / 12; margin-top: 12px; }
  .kd-toc { grid-column: 6 / -1; }
  .kt-photo { grid-column: 1 / 6; position: sticky; top: calc(var(--hd-h, 72px) + 24px); }
  .kt-body { grid-column: 7 / -1; padding-top: 2vh; }
  .kv-side { grid-column: 1 / 5; position: sticky; top: calc(var(--hd-h, 72px) + 24px); }
  .kv-rows { grid-column: 6 / -1; }
  .kv-row { grid-template-columns: minmax(0, 1fr) 8ch 6ch 11ch; }
  .kv-book { grid-column: 4; grid-row: 1; margin: 0; text-align: right; opacity: 0; transform: translateX(-8px); transition: opacity .35s var(--k-ease), transform .45s var(--k-ease); }
  .kv-row:hover .kv-book, .kv-row:focus-visible .kv-book { opacity: 1; transform: none; }
}
@media (hover: none) and (min-width: 900px) { .kv-book { opacity: 1; transform: none; } }

/* booking, contact and the visit page: square corners, tone steps instead of rings, the display face on titles */
.theme-kosmetologija { --line: #D8D4CA; --line-strong: var(--k-tx); }
.theme-kosmetologija .bk-step, .theme-kosmetologija .bk-sum__box, .theme-kosmetologija .place, .theme-kosmetologija .panel { border-radius: 0; box-shadow: none; background: var(--k-card); } /* taste-skill-ignore: removes the base ring / shadow / blur */
.theme-kosmetologija .bk-step.is-open { box-shadow: none; } /* taste-skill-ignore: removes the base ring / shadow / blur */
.theme-kosmetologija .bk-step__title, .theme-kosmetologija .bk-sum__title { font-family: var(--k-serif); font-weight: 400; font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); line-height: 1.05; letter-spacing: 0; }
.theme-kosmetologija .bk-step__n { border-radius: 0; }
.theme-kosmetologija .bk-svc__box, .theme-kosmetologija .bk-person__box, .theme-kosmetologija .bk-place__box { border-radius: 0; box-shadow: none; background: var(--k-bg); } /* taste-skill-ignore: removes the base ring / shadow / blur */
.theme-kosmetologija .bk-svc:hover .bk-svc__box, .theme-kosmetologija .bk-person:hover .bk-person__box, .theme-kosmetologija .bk-place:hover .bk-place__box { box-shadow: none; background: var(--k-bg2); } /* taste-skill-ignore: removes the base ring / shadow / blur */
.theme-kosmetologija .bk-svc input:checked + .bk-svc__box, .theme-kosmetologija .bk-person input:checked + .bk-person__box, .theme-kosmetologija .bk-place input:checked + .bk-place__box { background: var(--k-sage); box-shadow: inset 0 0 0 2px var(--k-acc); } /* taste-skill-ignore: the selected state of a form choice (inset ring) */
.theme-kosmetologija .bk-svc__name { font-weight: 600; }
.theme-kosmetologija .bk-person__face { border-radius: 0; }
.theme-kosmetologija .bk-step__change { border-radius: 0; }
.theme-kosmetologija .cal__day, .theme-kosmetologija .cal__nav, .theme-kosmetologija .slot { border-radius: 0; }
.theme-kosmetologija .slot { background: var(--k-bg); }
.theme-kosmetologija .bk-step .field input, .theme-kosmetologija .bk-step .field textarea, .theme-kosmetologija .field input, .theme-kosmetologija .field textarea { border-radius: 0; }
.theme-kosmetologija .bk-svc-bar { border-radius: 0; }
.theme-kosmetologija .contact__cards li { border-radius: 0; box-shadow: none; background: var(--k-card); } /* taste-skill-ignore: removes the base ring / shadow / blur */
.theme-kosmetologija .contact__icon { border-radius: 0; }

/* header bar: solid page colour once it leaves the cover – no blur over the photographs, no rule */
.theme-kosmetologija .hd::before { background: var(--k-bg); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; } /* taste-skill-ignore: removes the base ring / shadow / blur */

/* places (footer, contact page): the name in the text face, map links as small flat buttons */
.theme-kosmetologija .place__name { font-family: var(--k-sans); font-weight: 600; font-size: 1.0625rem; text-transform: none; letter-spacing: 0; }
.theme-kosmetologija .place__nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; }
.theme-kosmetologija .ft .place { background: var(--k-night-2); color: var(--k-night-on); }
.theme-kosmetologija .ft .place a, .theme-kosmetologija .ft .place__name, .theme-kosmetologija .ft .place * { color: var(--k-night-on); }
.theme-kosmetologija .ft .place__nav a { background: var(--k-night); }
.theme-kosmetologija .ft .place__nav a:hover { background: var(--k-acc); }

/* the privacy question: square, flat, the title in the text face */
.theme-kosmetologija .consent { border-radius: 0; background: var(--k-card); box-shadow: 0 18px 48px -24px var(--k-scrim); } /* taste-skill-ignore: a real floating dialog */
.theme-kosmetologija .consent__title { font-family: var(--k-sans); font-weight: 700; }
.theme-kosmetologija .consent .btn { border-radius: 0; }
/* phones: the cover's button stays clear of the demo's design switcher at the bottom centre */
@media (max-width: 899px) { .kc__in { padding-bottom: calc(80px + env(safe-area-inset-bottom)); } }
.theme-kosmetologija .ft .b-ft__head { font-size: 1rem; }

/* the menu is dark (theme --menu-*): its language pills keep the menu look, not the light page buttons */
.theme-kosmetologija .b-menu .b-menu__foot .lang { background: none; color: var(--menu-tx); }