Hair Salon - defuss-shadcn

Juniper & Shear, hair studio
The Look select switches palette, typeface and how the pinned note, the circled word and the stamp are drawn: Salon (ivory and terracotta, Bodoni), Neon (night violet and hot pink, Syne) and Botanical (sage paper, Fraunces). Length and level radios reprice the whole menu; the booking form lists the free slots per day and stylist and ends in a confirmation dialog. The before and after is the Diff component, the look book opens the Media Gallery's viewer.
<style>
  @import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..700;1,6..96,400..700&family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..700&family=Manrope:wght@400;500;600;700&family=Syne:wght@600;700;800&display=swap');
  /* Juniper & Shear: a hair studio in Freiburg. One 78rem grid on full-width bands; the hero puts the promise beside
     an arched mirror with a note pinned to it (the next free slot); the price menu reprices by length and level; the
     colour band shows a balayage before and after and where its processing time goes. Manrope for the text, the
     display face per look: Bodoni Moda (Salon), Syne (Neon), Fraunces (Botanical). */
  #in-salon {
    --background: oklch(0.975 0.012 75);
    --foreground: oklch(0.22 0.03 20);
    --card: oklch(0.995 0.006 75);
    --card-foreground: var(--foreground);
    --popover: oklch(0.995 0.006 75);
    --popover-foreground: var(--foreground);
    --muted: oklch(0.94 0.015 60);
    --muted-foreground: oklch(0.45 0.03 25);
    --border: oklch(0.22 0.03 20 / 0.13);
    --input: oklch(0.22 0.03 20 / 0.24);
    --primary: oklch(0.5 0.13 25);
    --primary-foreground: oklch(0.985 0.01 75);
    --secondary: oklch(0.93 0.025 45);
    --secondary-foreground: oklch(0.3 0.05 25);
    --accent: oklch(0.93 0.02 55);
    --accent-foreground: oklch(0.22 0.03 20);
    --ring: var(--primary);
    --chart-1: oklch(0.55 0.13 25);
    --chart-2: oklch(0.72 0.1 75);
    --chart-3: oklch(0.45 0.08 340);
    --chart-4: oklch(0.6 0.06 150);
    --chart-5: oklch(0.78 0.05 60);
    --radius: 0.25rem;
    --radius-sm: max(0px, calc(var(--radius) - 4px));
    --radius-md: max(0px, calc(var(--radius) - 2px));
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) + 4px);
    --hs-band: oklch(0.945 0.02 55);
    --hs-display: 'Bodoni Moda', Didot, Georgia, serif;
    --hs-display-weight: 500;
    --hs-ink: var(--primary);
    --hs-stroke: 1.75px;
    --hs-glow: none;
    --hs-note: oklch(0.985 0.03 85);
    --hs-note-ink: oklch(0.25 0.03 30);
    --hs-gift: linear-gradient(135deg, oklch(0.5 0.13 25), oklch(0.36 0.1 15));
    --hs-gift-ink: oklch(0.97 0.02 75);
    --hs-gift-line: oklch(0.82 0.09 80);
    --hs-bottle: oklch(0.36 0.06 25);
    --hs-label: oklch(0.93 0.03 70);
    --hs-open: oklch(0.48 0.13 150);
    accent-color: var(--primary);
    color-scheme: light;
    container-type: inline-size;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow-x: clip;
    background: var(--background);
    color: var(--foreground);
    font:
      400 1rem/1.6 'Manrope',
      var(--font-sans);
  }
  #in-salon[data-look='neon'] {
    --background: oklch(0.97 0.012 320);
    --foreground: oklch(0.2 0.05 300);
    --card: oklch(0.995 0.005 320);
    --popover: oklch(0.995 0.005 320);
    --muted: oklch(0.93 0.02 320);
    --muted-foreground: oklch(0.45 0.06 305);
    --border: oklch(0.2 0.05 300 / 0.14);
    --input: oklch(0.2 0.05 300 / 0.26);
    --primary: oklch(0.52 0.24 350);
    --primary-foreground: oklch(0.99 0.005 320);
    --secondary: oklch(0.92 0.04 320);
    --secondary-foreground: oklch(0.3 0.12 330);
    --accent: oklch(0.92 0.03 320);
    --accent-foreground: oklch(0.2 0.05 300);
    --chart-1: oklch(0.6 0.24 350);
    --chart-2: oklch(0.7 0.14 210);
    --chart-3: oklch(0.55 0.2 300);
    --chart-4: oklch(0.8 0.16 90);
    --chart-5: oklch(0.75 0.1 320);
    --radius: 0.75rem;
    --hs-band: oklch(0.935 0.025 315);
    --hs-display: 'Syne', 'Arial Black', sans-serif;
    --hs-display-weight: 700;
    --hs-ink: oklch(0.6 0.25 350);
    --hs-stroke: 3px;
    --hs-glow: drop-shadow(0 0 4px oklch(0.7 0.25 350 / 0.9)) drop-shadow(0 0 10px oklch(0.7 0.25 350 / 0.6));
    --hs-note: oklch(0.17 0.04 295);
    --hs-note-ink: oklch(0.93 0.03 320);
    --hs-gift: linear-gradient(135deg, oklch(0.16 0.04 295), oklch(0.22 0.07 310));
    --hs-gift-ink: oklch(0.96 0.02 320);
    --hs-gift-line: oklch(0.72 0.2 350);
    --hs-bottle: oklch(0.24 0.08 300);
    --hs-label: oklch(0.72 0.2 350);
  }
  #in-salon[data-look='botanical'] {
    --background: oklch(0.96 0.02 120);
    --foreground: oklch(0.24 0.04 150);
    --card: oklch(0.985 0.01 110);
    --popover: oklch(0.985 0.01 110);
    --muted: oklch(0.92 0.03 125);
    --muted-foreground: oklch(0.43 0.04 145);
    --border: oklch(0.24 0.04 150 / 0.14);
    --input: oklch(0.24 0.04 150 / 0.26);
    --primary: oklch(0.42 0.08 150);
    --primary-foreground: oklch(0.98 0.01 110);
    --secondary: oklch(0.91 0.04 125);
    --secondary-foreground: oklch(0.3 0.06 150);
    --accent: oklch(0.91 0.035 125);
    --accent-foreground: oklch(0.24 0.04 150);
    --chart-1: oklch(0.5 0.09 150);
    --chart-2: oklch(0.75 0.1 95);
    --chart-3: oklch(0.6 0.08 40);
    --chart-4: oklch(0.7 0.07 180);
    --chart-5: oklch(0.82 0.05 120);
    --radius: 1.25rem;
    --hs-band: oklch(0.925 0.03 120);
    --hs-display: 'Fraunces', Georgia, serif;
    --hs-display-weight: 400;
    --hs-ink: oklch(0.5 0.1 145);
    --hs-stroke: 3.5px;
    --hs-glow: none;
    --hs-note: oklch(0.82 0.05 75);
    --hs-note-ink: oklch(0.26 0.04 60);
    --hs-gift: linear-gradient(135deg, oklch(0.8 0.05 75), oklch(0.72 0.06 70));
    --hs-gift-ink: oklch(0.24 0.04 60);
    --hs-gift-line: oklch(0.42 0.08 150);
    --hs-bottle: oklch(0.42 0.08 150);
    --hs-label: oklch(0.9 0.04 100);
  }
  #in-salon [hidden] {
    display: none !important;
  }
  /* one 78rem grid: every band runs full width, its content inside the computed padding */
  #in-salon > :is(header, section, footer) {
    box-sizing: border-box;
    width: 100%;
    padding-inline: max(clamp(1rem, 4vw, 2.5rem), calc((100% - 78rem) / 2));
  }
  #in-salon > section {
    padding-block: clamp(3.5rem, 8vw, 6rem);
    scroll-margin-top: 4.5rem;
  }
  #in-salon > .hs-band {
    background: var(--hs-band);
  }
  #in-salon :is(h1, h2, h3) {
    font-family: var(--hs-display);
    font-weight: var(--hs-display-weight);
    text-wrap: balance;
  }
  #in-salon a:not(.btn, .nav-menu-link, .mk-header-brand) {
    color: inherit;
    text-underline-offset: 0.25em;
  }
  #in-salon .hs-look-only {
    display: none;
  }
  #in-salon[data-look='salon'] .hs-look-only[data-for='salon'],
  #in-salon[data-look='neon'] .hs-look-only[data-for='neon'],
  #in-salon[data-look='botanical'] .hs-look-only[data-for='botanical'] {
    display: block;
  }
  #in-salon .hs-eyebrow {
    margin: 0 0 0.75rem;
    color: var(--primary);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  #in-salon .hs-head {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 1rem 3rem;
    margin-block-end: clamp(2rem, 4vw, 3rem);
  }
  #in-salon .hs-head h2 {
    margin: 0;
    font-size: clamp(2.1rem, 1.4rem + 2.6cqi, 3.4rem);
    line-height: 1.05;
    letter-spacing: -0.015em;
  }
  #in-salon .hs-head p:not(.hs-eyebrow) {
    max-width: 34rem;
    margin: 0;
    color: var(--muted-foreground);
    text-wrap: pretty;
  }
  /* the header: brand, the sections at reading size, the look and the mode together, Book */
  #in-salon .hs-bar {
    padding-inline: max(clamp(0.75rem, 3vw, 2.5rem), calc((100% - 78rem) / 2));
    border-block-end: 1px solid var(--border);
    background: color-mix(in oklch, var(--background) 90%, transparent);
    backdrop-filter: blur(12px);
  }
  #in-salon .hs-bar .mk-header-inner {
    max-width: none;
    padding-inline: 0;
    gap: 0.75rem 1.5rem;
  }
  #in-salon .hs-bar .mk-header-brand,
  #in-salon .hs-bar .mk-header-name {
    color: var(--foreground);
  }
  #in-salon .hs-bar .mk-header-name {
    font: var(--hs-display-weight) 1.35rem/1 var(--hs-display);
    letter-spacing: 0;
  }
  #in-salon .hs-bar .mk-header-brand svg {
    width: 1.6rem;
    height: 1.6rem;
    color: var(--primary);
  }
  #in-salon .hs-bar .mk-header-nav {
    margin-inline-end: auto;
  }
  #in-salon .hs-bar .nav-menu-link {
    font-size: 0.9375rem;
    color: var(--muted-foreground);
  }
  #in-salon .hs-bar .nav-menu-link:hover {
    color: var(--accent-foreground);
  }
  #in-salon .hs-bar .nav-menu-link[aria-current] {
    color: var(--foreground);
    box-shadow: inset 0 -2px 0 var(--primary);
    border-radius: 0;
  }
  #in-salon .hs-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  #in-salon .hs-controls .select {
    width: auto;
  }
  #in-salon .site-mode {
    flex: none;
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
    background: var(--background);
    color: var(--foreground);
  }
  #in-salon .site-mode:hover {
    background: var(--accent);
    color: var(--accent-foreground);
  }
  @container mk-header (max-width: 66rem) {
    #in-salon .hs-bar .mk-header-nav {
      display: none;
    }
    #in-salon .hs-bar .mk-header-menu {
      display: inline-flex;
    }
    #in-salon .hs-bar .mk-header-brand {
      margin-inline-end: auto;
    }
  }
  @container mk-header (max-width: 26rem) {
    #in-salon .hs-bar .mk-header-name {
      font-size: 1.1rem;
    }
    #in-salon .hs-bar .mk-header-brand svg {
      display: none;
    }
  }
  /* the hero: the promise beside an arched mirror; a note is pinned to the mirror (the next free slot) */
  #in-salon .hs-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(2.5rem, 6vw, 5rem);
    padding-block: clamp(3rem, 7vw, 5.5rem);
  }
  #in-salon .hs-hero h1 {
    margin: 0 0 1.5rem;
    font-size: clamp(2.9rem, 1.6rem + 5cqi, 5.6rem);
    line-height: 0.98;
    letter-spacing: -0.02em;
  }
  #in-salon .hs-hero-lede {
    max-width: 33rem;
    margin: 0 0 2rem;
    color: var(--muted-foreground);
    font-size: 1.125rem;
    text-wrap: pretty;
  }
  #in-salon .hs-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  #in-salon .hs-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.75rem;
    margin: 2.25rem 0 0;
    padding: 1.25rem 0 0;
    border-block-start: 1px solid var(--border);
    list-style: none;
    font-size: 0.9375rem;
  }
  #in-salon .hs-facts li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  #in-salon .hs-facts svg {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--primary);
  }
  /* the circled word, drawn per look */
  #in-salon .hs-circled {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    font-style: italic;
  }
  #in-salon .hs-circled svg {
    position: absolute;
    inset: -18% -14% -22% -12%;
    width: 126%;
    height: 140%;
    overflow: visible;
    pointer-events: none;
    filter: var(--hs-glow);
  }
  #in-salon .hs-circled path {
    fill: none;
    stroke: var(--hs-ink);
    stroke-width: var(--hs-stroke);
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
  }
  #in-salon[data-look='botanical'] .hs-circled path {
    stroke-dasharray: 14 5 2 5;
  }
  #in-salon .hs-mirror {
    position: relative;
    justify-self: center;
    width: min(100%, 30rem);
  }
  #in-salon .hs-mirror-glass {
    position: relative;
    aspect-ratio: 4 / 5;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 50% 50% var(--radius-lg) var(--radius-lg) / 38% 38% var(--radius-lg) var(--radius-lg);
    background: var(--card);
  }
  #in-salon .hs-mirror-glass img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50% 50% var(--radius-md) var(--radius-md) / 36% 36% var(--radius-md) var(--radius-md);
  }
  #in-salon[data-look='neon'] .hs-mirror-glass {
    border: 2px solid var(--hs-ink);
    box-shadow:
      0 0 12px oklch(0.7 0.25 350 / 0.55),
      inset 0 0 12px oklch(0.7 0.25 350 / 0.35);
  }
  #in-salon .hs-note {
    position: absolute;
    z-index: 2;
    inset: auto -1.25rem 2.5rem auto;
    display: grid;
    gap: 0.2rem;
    max-width: 14.5rem;
    padding: 1.1rem 1.2rem 1rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--hs-note);
    color: var(--hs-note-ink);
    font: inherit;
    font-size: 0.875rem;
    line-height: 1.35;
    text-align: start;
    box-shadow: 0 14px 30px -12px oklch(0.2 0.03 30 / 0.45);
    rotate: 3deg;
    cursor: pointer;
    transition:
      rotate 0.25s ease,
      translate 0.25s ease;
  }
  #in-salon .hs-note::before {
    content: '';
    position: absolute;
    top: -0.45rem;
    left: 50%;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 2px 3px oklch(0 0 0 / 0.35);
    translate: -50% 0;
  }
  #in-salon .hs-note:hover {
    rotate: 0deg;
    translate: 0 -2px;
  }
  #in-salon .hs-note:focus-visible {
    outline: 3px solid var(--ring);
    outline-offset: 3px;
  }
  #in-salon .hs-note small {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.75;
  }
  #in-salon .hs-note strong {
    font: var(--hs-display-weight) 1.2rem/1.15 var(--hs-display);
  }
  #in-salon .hs-note span {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
  #in-salon[data-look='neon'] .hs-note {
    border: 1.5px solid var(--hs-ink);
    box-shadow: 0 0 14px oklch(0.7 0.25 350 / 0.5);
  }
  #in-salon[data-look='neon'] .hs-note::before {
    display: none;
  }
  #in-salon[data-look='botanical'] .hs-note {
    border-radius: 0.4rem 0.4rem 0.4rem 1.6rem;
    rotate: -4deg;
  }
  #in-salon[data-look='botanical'] .hs-note::before {
    width: 0.55rem;
    height: 0.55rem;
    background: var(--hs-note);
    box-shadow: inset 0 0 0 2px var(--hs-note-ink);
    top: 0.5rem;
    left: 1rem;
  }
  /* the hero's look layers: a stamp, a neon sign, a pressed sprig - each says something */
  #in-salon .hs-stamp {
    position: absolute;
    z-index: 2;
    top: 1.5rem;
    left: -2.5rem;
    width: 7.5rem;
    aspect-ratio: 1;
    color: var(--primary);
    rotate: -14deg;
  }
  #in-salon .hs-stamp text {
    font:
      600 9.2px/1 'Manrope',
      sans-serif;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    fill: currentColor;
  }
  #in-salon .hs-stamp circle {
    fill: none;
    stroke: currentColor;
  }
  #in-salon .hs-stamp circle:first-of-type {
    fill: var(--background);
  }
  #in-salon .hs-stamp .hs-stamp-mid {
    font: 500 15px/1 var(--hs-display);
    letter-spacing: 0;
    text-transform: none;
  }
  #in-salon .hs-sign {
    position: absolute;
    z-index: 2;
    top: 1.25rem;
    left: -1.75rem;
    padding: 0.7rem 1rem 0.75rem;
    border-radius: 0.6rem;
    background: oklch(0.13 0.03 295);
    color: oklch(0.97 0.03 340);
    font:
      700 1.05rem/1.05 'Syne',
      sans-serif;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-shadow:
      0 0 3px oklch(0.75 0.25 350),
      0 0 10px oklch(0.7 0.25 350),
      0 0 22px oklch(0.65 0.25 350);
    box-shadow: 0 10px 24px -8px oklch(0.1 0.03 295 / 0.6);
    rotate: -6deg;
  }
  #in-salon .hs-sign small {
    display: block;
    margin-block-start: 0.3rem;
    color: oklch(0.92 0.08 200);
    font-size: 0.75rem;
    text-shadow:
      0 0 3px oklch(0.8 0.13 200),
      0 0 10px oklch(0.75 0.13 200);
  }
  #in-salon .hs-sprig {
    position: absolute;
    z-index: 2;
    top: 0.5rem;
    left: -2.75rem;
    width: 11rem;
  }
  #in-salon .hs-sprig svg {
    display: block;
    width: 5.5rem;
    color: var(--hs-ink);
    rotate: -20deg;
  }
  #in-salon .hs-sprig p {
    margin: -0.5rem 0 0 2.75rem;
    padding: 0.4rem 0.6rem;
    border-radius: 0.3rem;
    background: var(--hs-note);
    color: var(--hs-note-ink);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    rotate: 4deg;
  }
  /* prices: length and level are radio cards; the menu reprices from them */
  #in-salon .hs-pickers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: 1.5rem 2.5rem;
    margin-block-end: 2.5rem;
  }
  #in-salon .hs-pickers .radio-group {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
  }
  #in-salon .hs-pickers legend {
    grid-column: 1 / -1;
    margin-block-end: 0.6rem;
    padding: 0;
    font-weight: 600;
  }
  #in-salon .hs-pickers .radio-card {
    min-width: 0;
    background: var(--card);
  }
  #in-salon .hs-pickers .radio-card:has(:checked) {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
  }
  #in-salon .hs-menu {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
    gap: 2.5rem clamp(2rem, 5vw, 4rem);
  }
  #in-salon .hs-menu h3 {
    margin: 0 0 0.5rem;
    padding-block-end: 0.6rem;
    border-block-end: 1px solid var(--foreground);
    font-size: 1.6rem;
  }
  #in-salon .hs-menu ol {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  #in-salon .hs-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.15rem 1rem;
    padding-block: 1rem;
    border-block-end: 1px solid var(--border);
  }
  #in-salon .hs-item h4 {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
  }
  #in-salon .hs-item p {
    grid-column: 1;
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.9375rem;
  }
  #in-salon .hs-price {
    grid-column: 2;
    grid-row: 1;
    font: var(--hs-display-weight) 1.35rem/1.2 var(--hs-display);
    font-variant-numeric: tabular-nums;
    text-align: end;
  }
  #in-salon .hs-meta {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-block-start: 0.4rem;
  }
  #in-salon .hs-meta .badge svg {
    width: 0.8rem;
    height: 0.8rem;
  }
  #in-salon .hs-small {
    margin: 1.25rem 0 0;
    color: var(--muted-foreground);
    font-size: 0.875rem;
  }
  /* stylists */
  #in-salon .hs-team {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
    gap: 1.5rem;
  }
  #in-salon .mk-team-member-tag svg {
    width: 0.85rem;
    height: 0.85rem;
  }
  #in-salon .hs-team .mk-team-member-body {
    display: grid;
    gap: 0.35rem;
  }
  #in-salon .hs-team .mk-team-member-body .btn {
    justify-self: start;
    margin-block-start: 0.5rem;
  }
  /* booking */
  #in-salon .hs-book .mk-booking-form-option img {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    object-fit: cover;
  }
  #in-salon .hs-book .mk-booking-form-option > span {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.75rem;
    align-items: center;
  }
  #in-salon .hs-book .mk-booking-form-option > span > :not(img, .hs-anyone) {
    grid-column: 2;
  }
  #in-salon .hs-book .mk-booking-form-option > span > :is(img, .hs-anyone) {
    grid-row: span 2;
  }
  #in-salon .hs-anyone {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--secondary);
    color: var(--secondary-foreground);
  }
  #in-salon .hs-anyone svg {
    width: 1.1rem;
    height: 1.1rem;
  }
  #in-salon .hs-book .mk-booking-form-option {
    background: var(--card);
  }
  #in-salon .hs-book .mk-booking-form-option b {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--muted-foreground);
  }
  #in-salon .hs-pair {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: 1rem;
  }
  #in-salon .hs-days {
    grid-template-columns: repeat(auto-fill, minmax(4.25rem, 1fr));
  }
  #in-salon .hs-days .mk-booking-form-slot span {
    height: auto;
    padding-block: 0.45rem;
    line-height: 1.25;
    text-align: center;
  }
  #in-salon .hs-days .mk-booking-form-slot b {
    display: block;
    font-size: 1.15rem;
  }
  #in-salon .hs-book .mk-booking-form-slot span {
    background: var(--card);
  }
  #in-salon .hs-book .mk-booking-form-slot input:checked + span {
    background: var(--primary);
  }
  #in-salon .hs-book .mk-booking-form-summary {
    border: 1px solid var(--border);
    background: var(--card);
  }
  #in-salon .hs-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.4rem 1rem;
    margin: 0;
    font-size: 0.9375rem;
  }
  #in-salon .hs-summary dt {
    color: var(--muted-foreground);
  }
  #in-salon .hs-summary dd {
    margin: 0;
    font-weight: 600;
  }
  #in-salon .hs-summary .hs-total {
    font: var(--hs-display-weight) 1.5rem/1.1 var(--hs-display);
  }
  /* colour: the before and after, and where a balayage's time goes */
  #in-salon .hs-colour {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
  }
  #in-salon .hs-diff-wrap {
    position: relative;
  }
  #in-salon .hs-diff-wrap .diff {
    margin: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  #in-salon .hs-diff-wrap .diff-item-2 img {
    filter: saturate(0.5) brightness(0.55) contrast(1.12);
  }
  #in-salon .hs-diff-stamp {
    position: absolute;
    z-index: 3;
    right: -1.25rem;
    bottom: -1.5rem;
    display: grid;
    place-items: center;
    width: 9rem;
    aspect-ratio: 1;
    padding: 1.1rem;
    border: 2px solid var(--hs-ink);
    border-radius: 50%;
    background: var(--background);
    color: var(--hs-ink);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-align: center;
    text-transform: uppercase;
    rotate: 12deg;
    pointer-events: none;
    filter: var(--hs-glow);
  }
  #in-salon .hs-diff-stamp b {
    display: block;
    font: var(--hs-display-weight) 1.05rem/1.1 var(--hs-display);
    letter-spacing: 0;
    text-transform: none;
  }
  #in-salon .hs-diff-stamp::after {
    content: '';
    position: absolute;
    inset: 0.3rem;
    border: 1px dashed currentColor;
    border-radius: 50%;
  }
  #in-salon[data-look='botanical'] .hs-diff-stamp {
    border-radius: 46% 54% 52% 48% / 55% 45% 55% 45%;
  }
  #in-salon .hs-clock {
    display: flex;
    height: 3.25rem;
    margin: 1.5rem 0 0.75rem;
    border-radius: var(--radius-md);
    overflow: hidden;
  }
  #in-salon .hs-clock span {
    display: grid;
    place-items: center;
    min-width: 0;
    padding-inline: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
  }
  #in-salon .hs-clock b {
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: var(--background);
    color: var(--foreground);
    font-size: 0.75rem;
    font-weight: 700;
  }
  #in-salon .hs-clock span:nth-child(1) {
    flex: 10;
    background: var(--chart-5);
  }
  #in-salon .hs-clock span:nth-child(2) {
    flex: 75;
    background: var(--chart-1);
  }
  #in-salon .hs-clock span:nth-child(3),
  #in-salon .hs-clock span:nth-child(4) {
    background: repeating-linear-gradient(
      -45deg,
      var(--chart-2) 0 8px,
      color-mix(in oklch, var(--chart-2) 70%, var(--background)) 8px 16px
    );
  }
  #in-salon .hs-clock span:nth-child(3) {
    flex: 45;
  }
  #in-salon .hs-clock span:nth-child(4) {
    flex: 25;
  }
  #in-salon .hs-clock span:nth-child(5) {
    flex: 65;
    background: var(--chart-3);
  }
  #in-salon .hs-clock-legend {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: 0.5rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
  }
  #in-salon .hs-clock-legend li {
    display: flex;
    gap: 0.5rem;
  }
  #in-salon .hs-clock-legend i {
    flex: none;
    width: 0.8rem;
    height: 0.8rem;
    margin-block-start: 0.3rem;
    border-radius: 2px;
  }
  #in-salon .hs-processing {
    margin-block-start: 2rem;
    font-variant-numeric: tabular-nums;
  }
  /* look book */
  #in-salon .hs-looks {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  #in-salon .hs-looks .mk-gallery-item-open img {
    aspect-ratio: 4 / 5;
  }
  #in-salon .hs-looks li:nth-child(2) {
    translate: 0 1.5rem;
  }
  #in-salon .hs-looks li:nth-child(5) {
    translate: 0 1.5rem;
  }
  #in-salon .hs-viewer .mk-media-gallery-track p {
    max-width: 40rem;
    margin-inline: auto;
    line-height: 1.5;
  }
  #in-salon .hs-viewer .mk-media-gallery-track strong {
    color: #fff;
  }
  #in-salon .hs-viewer::backdrop {
    background: oklch(0.1 0.02 20 / 0.94);
    backdrop-filter: blur(8px);
  }
  #in-salon .hs-viewer-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
  }
  #in-salon .hs-viewer-step {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 999px;
    background: oklch(1 0 0 / 0.15);
    color: #fff;
    cursor: pointer;
  }
  #in-salon .hs-viewer-step:hover {
    background: oklch(1 0 0 / 0.28);
  }
  #in-salon .hs-viewer-step:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
  }
  /* products, drawn - each one can be put aside for the appointment */
  #in-salon .hs-products {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  #in-salon .hs-product {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 0.75rem;
    height: 100%;
  }
  #in-salon .hs-product .card-content {
    display: grid;
    gap: 0.35rem;
  }
  #in-salon .hs-product-art {
    display: grid;
    place-items: center;
    height: 10rem;
    margin: 0;
    border-radius: var(--radius-md);
    background: var(--hs-band);
  }
  #in-salon .hs-product-art svg {
    height: 8rem;
  }
  #in-salon .hs-product-art .hs-body {
    fill: var(--hs-bottle);
  }
  #in-salon .hs-product-art .hs-label {
    fill: var(--hs-label);
  }
  #in-salon .hs-product-art .hs-cap {
    fill: color-mix(in oklch, var(--hs-bottle) 60%, black);
  }
  #in-salon .hs-product h3 {
    margin: 0;
    font-size: 1.3rem;
  }
  #in-salon .hs-product p {
    margin: 0;
    color: var(--muted-foreground);
    font-size: 0.9375rem;
  }
  #in-salon .hs-product-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }
  #in-salon .hs-product-foot data {
    font: var(--hs-display-weight) 1.3rem/1 var(--hs-display);
  }
  #in-salon .hs-product-foot .btn[aria-pressed='true'] {
    background: var(--primary);
    color: var(--primary-foreground);
    border-color: var(--primary);
  }
  /* gift cards: the card as it will look, tilted on the band */
  #in-salon .hs-gift {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: center;
  }
  #in-salon .hs-giftcard {
    position: relative;
    display: grid;
    align-content: space-between;
    width: min(100%, 26rem);
    aspect-ratio: 1.6;
    justify-self: center;
    padding: clamp(1.25rem, 3cqi, 1.75rem);
    border-radius: calc(var(--radius) + 0.5rem);
    background: var(--hs-gift);
    color: var(--hs-gift-ink);
    box-shadow: 0 30px 50px -24px oklch(0.2 0.04 20 / 0.55);
    rotate: -5deg;
  }
  #in-salon .hs-giftcard::before {
    content: '';
    position: absolute;
    top: 1.1rem;
    right: 1.1rem;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 50%;
    background: var(--hs-band);
    box-shadow: inset 0 1px 2px oklch(0 0 0 / 0.35);
  }
  #in-salon .hs-giftcard::after {
    content: '';
    position: absolute;
    inset: 0.6rem;
    border: 1px solid var(--hs-gift-line);
    border-radius: calc(var(--radius) + 0.2rem);
    pointer-events: none;
  }
  #in-salon[data-look='neon'] .hs-giftcard {
    box-shadow:
      0 0 0 1.5px var(--hs-gift-line),
      0 0 24px oklch(0.7 0.25 350 / 0.45);
  }
  #in-salon .hs-giftcard p {
    margin: 0;
  }
  #in-salon .hs-giftcard-brand {
    font: var(--hs-display-weight) 1.35rem/1 var(--hs-display);
  }
  #in-salon .hs-giftcard-amount {
    font: var(--hs-display-weight) clamp(2.5rem, 1.5rem + 4cqi, 3.75rem) / 1 var(--hs-display);
  }
  #in-salon .hs-giftcard-for {
    font-size: 0.875rem;
    opacity: 0.9;
  }
  #in-salon .hs-gift form {
    display: grid;
    gap: 1.25rem;
  }
  #in-salon .hs-field {
    display: grid;
    gap: 0.375rem;
  }
  #in-salon .hs-amounts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  /* visit */
  #in-salon .hs-visit {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
  }
  #in-salon .hs-visit .mk-opening-hours {
    background: var(--card);
  }
  #in-salon .mk-opening-hours-status {
    color: var(--hs-open);
  }
  #in-salon .mk-opening-hours-status[data-closed] {
    color: var(--muted-foreground);
  }
  #in-salon .hs-visit address {
    margin: 0 0 1.5rem;
    font: var(--hs-display-weight) 1.6rem/1.25 var(--hs-display);
  }
  #in-salon .hs-visit > div > dl {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem 1.25rem;
    margin: 0 0 1.75rem;
  }
  #in-salon .hs-visit > div > dl > dt {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--muted-foreground);
    font-weight: 600;
  }
  #in-salon .hs-visit > div > dl > dt svg {
    width: 1rem;
    height: 1rem;
    color: var(--primary);
  }
  #in-salon .hs-visit > div > dl > dd {
    margin: 0;
  }
  /* footer */
  #in-salon .hs-foot {
    padding-block: 3rem 2rem;
    border-block-start: 1px solid var(--border);
    background: var(--hs-band);
  }
  #in-salon .hs-foot-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
    gap: 2rem;
  }
  #in-salon .hs-foot h2 {
    margin: 0 0 0.75rem;
    font-size: 1.6rem;
  }
  #in-salon .hs-foot h3 {
    margin: 0 0 0.75rem;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted-foreground);
  }
  #in-salon .hs-foot p,
  #in-salon .hs-foot ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.9375rem;
    line-height: 1.8;
  }
  #in-salon .hs-linkish {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 0.25em;
    cursor: pointer;
  }
  #in-salon .hs-linkish:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
    border-radius: 2px;
  }
  /* the Site Footer block in this site's look */
  #in-salon .hs-foot .mk-footer-inner {
    display: block;
    max-width: none;
    padding: 0;
  }
  #in-salon .hs-foot :is(.mk-footer-col, .mk-footer-list) {
    gap: 0;
  }
  #in-salon .hs-foot .mk-footer-heading {
    line-height: inherit;
  }
  #in-salon .hs-foot .mk-footer-list a {
    display: inline;
  }
  #in-salon .hs-foot-bottom {
    flex-direction: row;
  }
  #in-salon .hs-foot .mk-footer-copy {
    color: inherit;
    font-size: inherit;
    line-height: inherit;
  }
  #in-salon .hs-foot-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 2rem;
    margin-block-start: 2.5rem;
    padding-block-start: 1.25rem;
    border-block-start: 1px solid var(--border);
    color: var(--muted-foreground);
    font-size: 0.875rem;
  }
  /* the dialogs */
  #in-salon .hs-dialog .dialog-content {
    background: var(--card);
    color: var(--card-foreground);
  }
  #in-salon .hs-dialog .dialog-title {
    font: var(--hs-display-weight) 1.6rem/1.15 var(--hs-display);
  }
  #in-salon .hs-dialog .dialog-body {
    display: grid;
    gap: 0.75rem;
    font-size: 0.9375rem;
  }
  #in-salon .hs-dialog .dialog-body p {
    margin: 0;
  }
  #in-salon .hs-dialog .dialog-body h3 {
    margin: 0.5rem 0 0;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 700;
  }
  #in-salon .hs-dialog .hs-summary {
    padding: 1rem;
    border-radius: var(--radius-md);
    background: var(--muted);
  }
  #in-salon .hs-done-mark {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--primary);
    color: var(--primary-foreground);
  }
  #in-salon :is(.btn, .radio, .select, .input, .textarea):focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
  }
  @container (max-width: 56rem) {
    #in-salon :is(.hs-hero, .hs-colour, .hs-gift, .hs-visit) {
      grid-template-columns: minmax(0, 1fr);
    }
    #in-salon .hs-mirror {
      width: min(100% - 2rem, 26rem);
    }
    #in-salon .hs-looks {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    #in-salon .hs-looks li:nth-child(n) {
      translate: none;
    }
    #in-salon .hs-foot-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @container (max-width: 34rem) {
    #in-salon .hs-pickers .radio-card {
      padding: 0.75rem 0.6rem;
      font-size: 0.875rem;
    }
    #in-salon .hs-pickers .radio-description {
      font-size: 0.75rem;
    }
    #in-salon .mk-team-member-photo {
      aspect-ratio: 5 / 4;
    }
    #in-salon .hs-giftcard {
      width: calc(100% - 2.5rem);
    }
    #in-salon .hs-amounts {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    #in-salon .hs-looks {
      gap: 1rem;
    }
    #in-salon .hs-foot-grid {
      grid-template-columns: minmax(0, 1fr);
    }
    #in-salon :is(.hs-stamp, .hs-sign, .hs-sprig) {
      left: -0.5rem;
    }
    #in-salon .hs-note {
      right: -0.5rem;
    }
    #in-salon .hs-diff-stamp {
      right: 0.25rem;
      width: 7rem;
    }
    #in-salon .hs-clock b {
      display: none;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    #in-salon :is(.hs-note, .mk-gallery-item-open img) {
      transition: none;
    }
  }
  @media (forced-colors: active) {
    #in-salon .hs-clock span {
      border: 1px solid CanvasText;
    }
  }
  /* -- modes: each look in light and dark (the palettes above are the light ones) -- */
  .dark #in-salon[data-look='salon'] {
    color-scheme: dark;
    --hs-open: oklch(0.8 0.15 150);
    --background: oklch(0.18 0.02 20);
    --foreground: oklch(0.94 0.015 70);
    --card: oklch(0.22 0.022 20);
    --popover: oklch(0.22 0.022 20);
    --muted: oklch(0.25 0.022 20);
    --muted-foreground: oklch(0.75 0.03 50);
    --border: oklch(0.94 0.015 70 / 0.13);
    --input: oklch(0.94 0.015 70 / 0.24);
    --primary: oklch(0.74 0.11 32);
    --primary-foreground: oklch(0.18 0.02 20);
    --secondary: oklch(0.28 0.03 25);
    --secondary-foreground: oklch(0.92 0.02 60);
    --accent: oklch(0.27 0.025 30);
    --accent-foreground: oklch(0.94 0.015 70);
    --chart-1: oklch(0.66 0.12 30);
    --chart-2: oklch(0.78 0.1 75);
    --chart-3: oklch(0.52 0.09 340);
    --chart-5: oklch(0.82 0.04 60);
    --hs-band: oklch(0.155 0.018 20);
    --hs-note: oklch(0.9 0.04 85);
    --hs-note-ink: oklch(0.22 0.03 30);
    --hs-gift: linear-gradient(135deg, oklch(0.42 0.11 25), oklch(0.28 0.07 15));
    --hs-bottle: oklch(0.72 0.08 35);
    --hs-label: oklch(0.25 0.03 25);
  }
  .dark #in-salon[data-look='neon'] {
    color-scheme: dark;
    --hs-open: oklch(0.8 0.15 150);
    --background: oklch(0.15 0.03 295);
    --foreground: oklch(0.95 0.015 320);
    --card: oklch(0.19 0.04 295);
    --popover: oklch(0.19 0.04 295);
    --muted: oklch(0.22 0.04 295);
    --muted-foreground: oklch(0.76 0.05 320);
    --border: oklch(0.95 0.015 320 / 0.14);
    --input: oklch(0.95 0.015 320 / 0.26);
    --primary: oklch(0.72 0.2 350);
    --primary-foreground: oklch(0.15 0.03 295);
    --secondary: oklch(0.26 0.06 300);
    --secondary-foreground: oklch(0.92 0.05 330);
    --accent: oklch(0.26 0.05 300);
    --accent-foreground: oklch(0.95 0.015 320);
    --hs-band: oklch(0.12 0.03 295);
    --hs-ink: oklch(0.75 0.22 350);
    --hs-note: oklch(0.1 0.03 295);
    --hs-bottle: oklch(0.55 0.2 350);
    --hs-label: oklch(0.9 0.08 200);
  }
  .dark #in-salon[data-look='botanical'] {
    color-scheme: dark;
    --hs-open: oklch(0.8 0.15 150);
    --background: oklch(0.19 0.025 150);
    --foreground: oklch(0.93 0.02 110);
    --card: oklch(0.23 0.03 150);
    --popover: oklch(0.23 0.03 150);
    --muted: oklch(0.26 0.03 150);
    --muted-foreground: oklch(0.77 0.04 130);
    --border: oklch(0.93 0.02 110 / 0.13);
    --input: oklch(0.93 0.02 110 / 0.24);
    --primary: oklch(0.78 0.09 135);
    --primary-foreground: oklch(0.19 0.025 150);
    --secondary: oklch(0.28 0.04 150);
    --secondary-foreground: oklch(0.9 0.04 120);
    --accent: oklch(0.27 0.035 145);
    --accent-foreground: oklch(0.93 0.02 110);
    --chart-1: oklch(0.62 0.1 150);
    --chart-3: oklch(0.55 0.08 40);
    --hs-band: oklch(0.165 0.022 150);
    --hs-ink: oklch(0.75 0.1 140);
    --hs-note: oklch(0.78 0.05 75);
    --hs-bottle: oklch(0.7 0.09 140);
    --hs-label: oklch(0.25 0.03 150);
  }
  /* -- modes: end -- */
</style>
<div id="in-salon" data-look="salon">
  <header class="mk-header hs-bar" data-variant="sticky">
    <div class="mk-header-inner">
      <a class="mk-header-brand" href="#in-salon" aria-label="Juniper &amp; Shear - to the top">
        <svg
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="1.6"
          stroke-linecap="round"
          aria-hidden="true"
        >
          <circle cx="6" cy="6" r="3" />
          <circle cx="6" cy="18" r="3" />
          <path d="M8.1 8.1 20 20M8.1 15.9 20 4" />
        </svg>
        <span class="mk-header-name">Juniper &amp; Shear</span>
      </a>
      <nav class="mk-header-nav" aria-label="Main">
        <ul class="nav-menu-list">
          <li class="nav-menu-item"><a class="nav-menu-link" href="#hs-prices">Prices</a></li>
          <li class="nav-menu-item"><a class="nav-menu-link" href="#hs-team">Stylists</a></li>
          <li class="nav-menu-item"><a class="nav-menu-link" href="#hs-colour">Colour</a></li>
          <li class="nav-menu-item"><a class="nav-menu-link" href="#hs-lookbook">Look book</a></li>
          <li class="nav-menu-item"><a class="nav-menu-link" href="#hs-shop">Products</a></li>
          <li class="nav-menu-item"><a class="nav-menu-link" href="#hs-gift">Gift cards</a></li>
          <li class="nav-menu-item"><a class="nav-menu-link" href="#hs-visit">Visit</a></li>
        </ul>
      </nav>
      <div class="mk-header-actions">
        <div class="hs-controls">
          <select class="select" data-size="sm" data-site-look aria-label="Look">
            <option value="salon">Salon</option>
            <option value="neon">Neon</option>
            <option value="botanical">Botanical</option>
          </select>
          <label class="swap site-mode" data-variant="rotate" data-size="sm">
            <input type="checkbox" data-site-mode aria-label="Dark mode" />
            <span class="swap-on" aria-hidden="true"><i data-lucide="moon"></i></span>
            <span class="swap-off" aria-hidden="true"><i data-lucide="sun"></i></span>
          </label>
        </div>
        <a class="btn mk-header-wide" data-size="sm" href="#hs-book">Book</a>
        <button
          type="button"
          class="btn mk-header-menu"
          data-variant="ghost"
          data-size="icon"
          data-sheet-trigger="hs-menu"
          aria-haspopup="dialog"
          aria-label="Open menu"
          ><i data-lucide="menu"></i
        ></button>
      </div>
    </div>
    <dialog
      id="hs-menu"
      class="sheet"
      data-side="right"
      role="dialog"
      aria-modal="true"
      aria-labelledby="hs-menu-title"
    >
      <div class="sheet-content">
        <div class="sheet-header">
          <h2 class="sheet-title" id="hs-menu-title">Juniper &amp; Shear</h2>
          <p class="sheet-description">Gerberau 14, Freiburg · Tue-Sat</p>
        </div>
        <div class="sheet-body">
          <ul class="mk-header-sheet-nav">
            <li
              ><a href="#hs-prices" data-sheet-close>Prices <small>by length and level</small></a></li
            >
            <li><a href="#hs-team" data-sheet-close>Stylists</a></li>
            <li
              ><a href="#hs-colour" data-sheet-close>Colour <small>processing times</small></a></li
            >
            <li><a href="#hs-lookbook" data-sheet-close>Look book</a></li>
            <li><a href="#hs-shop" data-sheet-close>Products</a></li>
            <li><a href="#hs-gift" data-sheet-close>Gift cards</a></li>
            <li
              ><a href="#hs-visit" data-sheet-close>Visit <small>hours and address</small></a></li
            >
          </ul>
        </div>
        <div class="sheet-footer mk-header-sheet-actions">
          <a class="btn" href="#hs-book" data-sheet-close>Book an appointment</a>
        </div>
      </div>
      <button class="sheet-close-x" type="button" data-sheet-close aria-label="Close menu"
        ><i data-lucide="x"></i
      ></button>
    </dialog>
  </header>

  <section class="hs-hero" aria-labelledby="hs-title">
    <div>
      <p class="hs-eyebrow">Hair studio · Gerberau 14, Freiburg</p>
      <h1 id="hs-title"
        >Cuts that grow out
        <span class="hs-circled"
          >well.<svg viewBox="0 0 200 64" preserveAspectRatio="none" aria-hidden="true">
            <path
              d="M14 36 C 8 14, 70 4, 118 7 S 198 20, 192 38 S 128 62, 72 59 S 2 50, 10 28 C 14 18, 34 12, 52 10"
            /></svg
        ></span>
      </h1>
      <p class="hs-hero-lede"
        >We cut for how your hair falls on day 40, not only on the day you leave. Colour is mixed by weight for every
        appointment, and the price list says what your length costs before you sit down.</p
      >
      <div class="hs-actions">
        <a class="btn" data-size="lg" href="#hs-book">Book an appointment</a>
        <a class="btn" data-variant="outline" data-size="lg" href="#hs-prices">See prices</a>
      </div>
      <ul class="hs-facts">
        <li><i data-lucide="clock-3"></i> Tue-Sat · Thursdays until 21:00</li>
        <li><i data-lucide="message-circle"></i> Free 15-minute consultation</li>
        <li><i data-lucide="leaf"></i> Plant-based colour on request</li>
      </ul>
    </div>
    <div class="hs-mirror">
      <div class="hs-mirror-glass">
        <img
          src="https://picsum.photos/id/1027/720/900"
          alt="A woman with shoulder-length wavy auburn hair and red lipstick, looking past the camera"
        />
      </div>
      <svg class="hs-stamp hs-look-only" data-for="salon" viewBox="0 0 100 100" aria-hidden="true">
        <defs><path id="hs-stamp-path" d="M50 50m-37 0a37 37 0 1 1 74 0a37 37 0 1 1-74 0" /></defs>
        <circle cx="50" cy="50" r="46" stroke-width="1.4" />
        <circle cx="50" cy="50" r="27" stroke-width="0.8" />
        <text>
          <textPath href="#hs-stamp-path" textLength="228" lengthAdjust="spacingAndGlyphs">
            Juniper &amp; Shear · Freiburg · cut by hand ·
          </textPath>
        </text>
        <text class="hs-stamp-mid" x="50" y="55" text-anchor="middle">2011</text>
      </svg>
      <p class="hs-sign hs-look-only" data-for="neon">Late Thursdays<small>Open until 21:00</small></p>
      <div class="hs-sprig hs-look-only" data-for="botanical">
        <svg
          viewBox="0 0 80 120"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          aria-hidden="true"
        >
          <path d="M40 116 C 40 80, 38 50, 44 6" />
          <path d="M40 92 C 24 88, 14 76, 12 62 C 26 64, 36 74, 40 92 Z" fill="currentColor" fill-opacity="0.25" />
          <path d="M41 70 C 56 66, 66 54, 68 40 C 54 42, 44 54, 41 70 Z" fill="currentColor" fill-opacity="0.25" />
          <path d="M42 48 C 28 44, 22 32, 22 20 C 34 24, 40 34, 42 48 Z" fill="currentColor" fill-opacity="0.25" />
          <path d="M43 28 C 52 24, 58 16, 60 8 C 50 10, 45 18, 43 28 Z" fill="currentColor" fill-opacity="0.25" />
        </svg>
        <p>Plant-based colour - ask at booking</p>
      </div>
      <button class="hs-note" type="button" data-hs-next>
        <small>Next free appointment</small>
        <strong data-hs-next-when>Thursday, 10:30</strong>
        <em data-hs-next-who>Cut &amp; finish</em>
        <span>Book this time</span>
      </button>
    </div>
  </section>

  <section id="hs-prices" class="hs-band" aria-labelledby="hs-prices-title">
    <div class="hs-head">
      <div>
        <p class="hs-eyebrow">Prices</p>
        <h2 id="hs-prices-title">What your hair costs</h2>
      </div>
      <p
        >Long hair takes longer and more colour, and a director's hour costs more than a junior's. Pick both - every
        price on the menu changes with them. Wash and finish are always included.</p
      >
    </div>
    <div class="hs-pickers">
      <fieldset class="radio-group" data-hs-length>
        <legend>Your hair length</legend>
        <label class="radio-card" for="hs-len-short">
          <input class="radio" type="radio" name="hs-length" id="hs-len-short" value="0" />
          <label for="hs-len-short">Short</label>
          <span class="radio-description">Above the chin</span>
        </label>
        <label class="radio-card" for="hs-len-medium">
          <input class="radio" type="radio" name="hs-length" id="hs-len-medium" value="1" checked />
          <label for="hs-len-medium">Medium</label>
          <span class="radio-description">To the shoulders</span>
        </label>
        <label class="radio-card" for="hs-len-long">
          <input class="radio" type="radio" name="hs-length" id="hs-len-long" value="2" />
          <label for="hs-len-long">Long</label>
          <span class="radio-description">Below the shoulders</span>
        </label>
      </fieldset>
      <fieldset class="radio-group" data-hs-level>
        <legend>Stylist level</legend>
        <label class="radio-card" for="hs-lvl-junior">
          <input class="radio" type="radio" name="hs-level" id="hs-lvl-junior" value="junior" />
          <label for="hs-lvl-junior">Junior</label>
          <span class="radio-description">In training · 20% less</span>
        </label>
        <label class="radio-card" for="hs-lvl-senior">
          <input class="radio" type="radio" name="hs-level" id="hs-lvl-senior" value="senior" checked />
          <label for="hs-lvl-senior">Senior</label>
          <span class="radio-description">4+ years</span>
        </label>
        <label class="radio-card" for="hs-lvl-director">
          <input class="radio" type="radio" name="hs-level" id="hs-lvl-director" value="director" />
          <label for="hs-lvl-director">Director</label>
          <span class="radio-description">Mara · 30% more</span>
        </label>
      </fieldset>
    </div>
    <div class="hs-menu" aria-live="polite">
      <div>
        <h3>Cut &amp; style</h3>
        <ol>
          <li class="hs-item" data-prices="54 64 76" data-mins="45 60 75">
            <h4>Cut &amp; finish</h4>
            <data class="hs-price" value="64">€64</data>
            <p>Consultation, wash, cut and blow-dry.</p>
            <div class="hs-meta">
              <span class="badge" data-variant="outline"
                ><i data-lucide="clock-3"></i> <span data-hs-mins>1 h</span></span
              >
            </div>
          </li>
          <li class="hs-item" data-prices="72 84 98" data-mins="75 90 105">
            <h4>Restyle</h4>
            <data class="hs-price" value="84">€84</data>
            <p>A new shape: a longer consultation, then the cut and a styling lesson.</p>
            <div class="hs-meta">
              <span class="badge" data-variant="outline"
                ><i data-lucide="clock-3"></i> <span data-hs-mins>1 h 30 min</span></span
              >
            </div>
          </li>
          <li class="hs-item" data-prices="32 39 47" data-mins="30 40 50">
            <h4>Blow-dry &amp; style</h4>
            <data class="hs-price" value="39">€39</data>
            <p>Wash and blow-dry - straight, waves or volume.</p>
            <div class="hs-meta">
              <span class="badge" data-variant="outline"
                ><i data-lucide="clock-3"></i> <span data-hs-mins>40 min</span></span
              >
            </div>
          </li>
          <li class="hs-item" data-prices="58 68 82" data-mins="45 60 75">
            <h4>Up-do for an occasion</h4>
            <data class="hs-price" value="68">€68</data>
            <p>Weddings, a ball, a stage - bring a photo of the dress.</p>
            <div class="hs-meta">
              <span class="badge" data-variant="outline"
                ><i data-lucide="clock-3"></i> <span data-hs-mins>1 h</span></span
              >
            </div>
          </li>
          <li class="hs-item" data-prices="12 12 12" data-mins="15 15 15">
            <h4>Fringe trim</h4>
            <data class="hs-price" value="12">€12</data>
            <p>Between cuts, dry, no wash.</p>
            <div class="hs-meta">
              <span class="badge" data-variant="outline"
                ><i data-lucide="clock-3"></i> <span data-hs-mins>15 min</span></span
              >
            </div>
          </li>
        </ol>
      </div>
      <div>
        <h3>Colour</h3>
        <ol>
          <li class="hs-item" data-prices="66 72 78" data-mins="75 80 85">
            <h4>Root colour</h4>
            <data class="hs-price" value="72">€72</data>
            <p>Regrowth up to 2 cm in one shade, with a blow-dry.</p>
            <div class="hs-meta">
              <span class="badge" data-variant="outline"
                ><i data-lucide="clock-3"></i> <span data-hs-mins>1 h 20 min</span></span
              >
              <span class="badge" data-variant="secondary"><i data-lucide="hourglass"></i> 35 min processing</span>
            </div>
          </li>
          <li class="hs-item" data-prices="78 96 118" data-mins="90 105 120">
            <h4>Full colour</h4>
            <data class="hs-price" value="96">€96</data>
            <p>One shade from roots to ends, with a blow-dry.</p>
            <div class="hs-meta">
              <span class="badge" data-variant="outline"
                ><i data-lucide="clock-3"></i> <span data-hs-mins>1 h 45 min</span></span
              >
              <span class="badge" data-variant="secondary"><i data-lucide="hourglass"></i> 40 min processing</span>
            </div>
          </li>
          <li class="hs-item" data-prices="155 185 225" data-mins="165 190 220">
            <h4>Balayage</h4>
            <data class="hs-price" value="185">€185</data>
            <p>Hand-painted lightening, a toner and a cut.</p>
            <div class="hs-meta">
              <span class="badge" data-variant="outline"
                ><i data-lucide="clock-3"></i> <span data-hs-mins>3 h 10 min</span></span
              >
              <span class="badge" data-variant="secondary"><i data-lucide="hourglass"></i> 45 + 20 min processing</span>
            </div>
          </li>
          <li class="hs-item" data-prices="36 42 49" data-mins="45 45 50">
            <h4>Gloss &amp; toner</h4>
            <data class="hs-price" value="42">€42</data>
            <p>Refreshes a faded shade and adds shine.</p>
            <div class="hs-meta">
              <span class="badge" data-variant="outline"
                ><i data-lucide="clock-3"></i> <span data-hs-mins>45 min</span></span
              >
              <span class="badge" data-variant="secondary"><i data-lucide="hourglass"></i> 20 min processing</span>
            </div>
          </li>
          <li class="hs-item">
            <h4>Colour correction</h4>
            <data class="hs-price" value="0">Quote</data>
            <p>Fixing colour from elsewhere - we test a strand and quote at a free consultation.</p>
            <div class="hs-meta">
              <span class="badge" data-variant="secondary"><i data-lucide="hourglass"></i> Processing varies</span>
            </div>
          </li>
        </ol>
      </div>
    </div>
    <p class="hs-small"
      >Hair below the waist or very thick hair can need 20 minutes more - we tell you the price before we start, never
      after. Children under 12: €26 for a cut with any stylist.</p
    >
  </section>

  <section id="hs-team" aria-labelledby="hs-team-title">
    <div class="hs-head">
      <div>
        <p class="hs-eyebrow">Stylists</p>
        <h2 id="hs-team-title">Four chairs, four specialities</h2>
      </div>
      <p>Book the person or the time - the booking form shows who is free on each day.</p>
    </div>
    <div class="hs-team">
      <article class="mk-team-member" aria-labelledby="hs-tm-mara">
        <div class="mk-team-member-portrait">
          <img
            class="mk-team-member-photo"
            src="https://i.pravatar.cc/480?img=26"
            alt="Portrait of Mara Lindqvist, long straight brown hair"
          />
          <span class="mk-team-member-tag"><i data-lucide="crown"></i>Director</span>
        </div>
        <div class="mk-team-member-body">
          <h3 class="mk-team-member-name" id="hs-tm-mara">Mara Lindqvist</h3>
          <p class="mk-team-member-role">Precision cuts and restyles · 19 years</p>
          <p class="mk-team-member-bio"
            >Opened the studio in 2011. Cuts dry first, then wet, so the shape still sits on day 40.</p
          >
          <a class="btn" data-variant="outline" data-size="sm" href="#hs-book" data-hs-stylist="mara">Book with Mara</a>
        </div>
      </article>
      <article class="mk-team-member" aria-labelledby="hs-tm-noor">
        <div class="mk-team-member-portrait">
          <img
            class="mk-team-member-photo"
            src="https://i.pravatar.cc/480?img=21"
            alt="Portrait of Noor Haddad, long red hair"
          />
          <span class="mk-team-member-tag"><i data-lucide="palette"></i>Senior</span>
        </div>
        <div class="mk-team-member-body">
          <h3 class="mk-team-member-name" id="hs-tm-noor">Noor Haddad</h3>
          <p class="mk-team-member-role">Colour: balayage, copper, corrections</p>
          <p class="mk-team-member-bio"
            >Weighs every formula to the gram and writes it on your card, so it can be mixed again.</p
          >
          <a class="btn" data-variant="outline" data-size="sm" href="#hs-book" data-hs-stylist="noor">Book with Noor</a>
        </div>
      </article>
      <article class="mk-team-member" aria-labelledby="hs-tm-aylin">
        <div class="mk-team-member-portrait">
          <img
            class="mk-team-member-photo"
            src="https://i.pravatar.cc/480?img=38"
            alt="Portrait of Aylin Kaya, dark curly hair, in profile"
          />
          <span class="mk-team-member-tag"><i data-lucide="waves"></i>Senior</span>
        </div>
        <div class="mk-team-member-body">
          <h3 class="mk-team-member-name" id="hs-tm-aylin">Aylin Kaya</h3>
          <p class="mk-team-member-role">Curly and textured hair</p>
          <p class="mk-team-member-bio"
            >Cuts curls dry, one by one. Come with your hair as you wear it - no wash before.</p
          >
          <a class="btn" data-variant="outline" data-size="sm" href="#hs-book" data-hs-stylist="aylin"
            >Book with Aylin</a
          >
        </div>
      </article>
      <article class="mk-team-member" aria-labelledby="hs-tm-felix">
        <div class="mk-team-member-portrait">
          <img
            class="mk-team-member-photo"
            src="https://i.pravatar.cc/480?img=13"
            alt="Portrait of Felix Brandt, short swept-back hair and a full beard"
          />
          <span class="mk-team-member-tag"><i data-lucide="sprout"></i>Junior</span>
        </div>
        <div class="mk-team-member-body">
          <h3 class="mk-team-member-name" id="hs-tm-felix">Felix Brandt</h3>
          <p class="mk-team-member-role">Short cuts, fades, blow-dries · 3rd year</p>
          <p class="mk-team-member-bio"
            >Quick with clippers, patient with first-timers. Mara checks every cut before you go.</p
          >
          <a class="btn" data-variant="outline" data-size="sm" href="#hs-book" data-hs-stylist="felix"
            >Book with Felix</a
          >
        </div>
      </article>
    </div>
  </section>

  <section id="hs-book" class="hs-band hs-book" aria-labelledby="hs-book-title">
    <div class="hs-head">
      <div>
        <p class="hs-eyebrow">Book</p>
        <h2 id="hs-book-title">Book an appointment</h2>
      </div>
      <p>Pick a service, a stylist and a free time. Change or cancel up to 24 hours before - free.</p>
    </div>
    <div class="mk-booking-form">
      <form data-hs-booking>
        <div class="mk-booking-form-layout">
          <div style="display: grid; gap: 2rem">
            <fieldset class="mk-booking-form-group">
              <legend>1. Service</legend>
              <div class="hs-pair">
                <div class="mk-booking-form-field">
                  <label class="label" for="hs-bk-service">Service</label>
                  <select class="select" id="hs-bk-service" name="service" required>
                    <optgroup label="Cut &amp; style">
                      <option value="cut">Cut &amp; finish</option>
                      <option value="restyle">Restyle</option>
                      <option value="blowdry">Blow-dry &amp; style</option>
                      <option value="updo">Up-do for an occasion</option>
                    </optgroup>
                    <optgroup label="Colour">
                      <option value="roots">Root colour</option>
                      <option value="colour">Full colour</option>
                      <option value="balayage">Balayage</option>
                      <option value="gloss">Gloss &amp; toner</option>
                      <option value="consult">Free consultation (15 min)</option>
                    </optgroup>
                  </select>
                </div>
                <div class="mk-booking-form-field">
                  <label class="label" for="hs-bk-length">Hair length</label>
                  <select class="select" id="hs-bk-length" name="length">
                    <option value="0">Short - above the chin</option>
                    <option value="1" selected>Medium - to the shoulders</option>
                    <option value="2">Long - below the shoulders</option>
                  </select>
                </div>
              </div>
            </fieldset>
            <fieldset class="mk-booking-form-group">
              <legend>2. Stylist</legend>
              <div class="mk-booking-form-options" data-hs-stylists>
                <label class="mk-booking-form-option" for="hs-st-any"
                  ><input class="radio" type="radio" name="stylist" id="hs-st-any" value="any" checked /><span
                    ><span class="hs-anyone" aria-hidden="true"><i data-lucide="users"></i></span><strong>Anyone</strong
                    ><small>The first stylist free at your time</small></span
                  ><b>All levels</b></label
                >
                <label class="mk-booking-form-option" for="hs-st-mara"
                  ><input class="radio" type="radio" name="stylist" id="hs-st-mara" value="mara" /><span
                    ><img src="https://i.pravatar.cc/96?img=26" alt="" /><strong>Mara Lindqvist</strong
                    ><small>Precision cuts and restyles</small></span
                  ><b>Director</b></label
                >
                <label class="mk-booking-form-option" for="hs-st-noor"
                  ><input class="radio" type="radio" name="stylist" id="hs-st-noor" value="noor" /><span
                    ><img src="https://i.pravatar.cc/96?img=21" alt="" /><strong>Noor Haddad</strong
                    ><small>Colour</small></span
                  ><b>Senior</b></label
                >
                <label class="mk-booking-form-option" for="hs-st-aylin"
                  ><input class="radio" type="radio" name="stylist" id="hs-st-aylin" value="aylin" /><span
                    ><img src="https://i.pravatar.cc/96?img=38" alt="" /><strong>Aylin Kaya</strong
                    ><small>Curly and textured hair</small></span
                  ><b>Senior</b></label
                >
                <label class="mk-booking-form-option" for="hs-st-felix"
                  ><input class="radio" type="radio" name="stylist" id="hs-st-felix" value="felix" /><span
                    ><img src="https://i.pravatar.cc/96?img=13" alt="" /><strong>Felix Brandt</strong
                    ><small>Short cuts and blow-dries</small></span
                  ><b>Junior</b></label
                >
              </div>
            </fieldset>
            <fieldset class="mk-booking-form-group">
              <legend>3. Day and time</legend>
              <div class="mk-booking-form-slots hs-days" role="radiogroup" aria-label="Day" data-hs-days>
                <p class="mk-booking-form-tz">Loading the next open days...</p>
              </div>
              <div class="mk-booking-form-slots" role="radiogroup" aria-label="Free times" data-hs-slots></div>
              <span class="mk-booking-form-tz" data-hs-slot-note
                >Times in Freiburg time. Struck-through times are taken.</span
              >
            </fieldset>
          </div>
          <div style="display: grid; gap: 2rem; align-content: start">
            <fieldset class="mk-booking-form-group">
              <legend>4. Your details</legend>
              <div class="mk-booking-form-fields">
                <div class="mk-booking-form-field">
                  <label class="label" for="hs-bk-name">Name</label>
                  <input class="input" id="hs-bk-name" name="name" autocomplete="name" required />
                </div>
                <div class="mk-booking-form-field">
                  <label class="label" for="hs-bk-phone">Phone</label>
                  <input
                    class="input"
                    id="hs-bk-phone"
                    name="phone"
                    type="tel"
                    autocomplete="tel"
                    inputmode="tel"
                    required
                  />
                </div>
                <div class="mk-booking-form-field" data-span="full">
                  <label class="label" for="hs-bk-email">Email</label>
                  <input class="input" id="hs-bk-email" name="email" type="email" autocomplete="email" required />
                </div>
                <div class="mk-booking-form-field" data-span="full">
                  <label class="label" for="hs-bk-notes">Anything we should know?</label>
                  <textarea
                    class="textarea"
                    id="hs-bk-notes"
                    name="notes"
                    rows="3"
                    placeholder="Allergies, a photo you will bring, colour from elsewhere..."
                  ></textarea>
                </div>
              </div>
            </fieldset>
            <div class="mk-booking-form-summary" aria-live="polite">
              <dl class="hs-summary">
                <dt>Service</dt>
                <dd data-hs-sum-service>Cut &amp; finish · medium</dd>
                <dt>With</dt>
                <dd data-hs-sum-who>Anyone free</dd>
                <dt>When</dt>
                <dd data-hs-sum-when>Pick a day and a time</dd>
                <dt>Takes</dt>
                <dd data-hs-sum-mins>1 h</dd>
                <dt>Put aside</dt>
                <dd data-hs-sum-products>Nothing yet - see Products</dd>
                <dt>Price</dt>
                <dd class="hs-total" data-hs-sum-price>€51-€83</dd>
              </dl>
              <p>Pay at the studio, by card or cash. A no-show without a call costs half the price.</p>
              <button class="btn" type="submit" data-size="lg">Confirm booking</button>
            </div>
          </div>
        </div>
      </form>
    </div>
    <dialog class="dialog hs-dialog" id="hs-booked" aria-labelledby="hs-booked-title" data-size="lg">
      <div class="dialog-content">
        <div class="dialog-header">
          <span class="hs-done-mark" aria-hidden="true"><i data-lucide="check"></i></span>
          <h2 class="dialog-title" id="hs-booked-title" tabindex="-1"
            >See you on <span data-hs-done-day>Thursday</span></h2
          >
          <p class="dialog-description"
            >A confirmation is on its way to <strong data-hs-done-email>you</strong>. We text a reminder the day
            before.</p
          >
        </div>
        <div class="dialog-body">
          <dl class="hs-summary">
            <dt>When</dt>
            <dd data-hs-done-when></dd>
            <dt>With</dt>
            <dd data-hs-done-who></dd>
            <dt>Service</dt>
            <dd data-hs-done-service></dd>
            <dt>Takes</dt>
            <dd data-hs-done-mins></dd>
            <dt>Put aside</dt>
            <dd data-hs-done-products></dd>
            <dt>Price</dt>
            <dd data-hs-done-price></dd>
          </dl>
          <p>Gerberau 14, Freiburg - the door beside the bookshop, first floor.</p>
        </div>
        <div class="dialog-footer">
          <button class="btn" type="button" commandfor="hs-booked" command="close">Done</button>
        </div>
      </div>
    </dialog>
  </section>

  <section id="hs-colour" aria-labelledby="hs-colour-title">
    <div class="hs-head">
      <div>
        <p class="hs-eyebrow">Colour</p>
        <h2 id="hs-colour-title">Where a balayage's time goes</h2>
      </div>
      <p
        >Most of a colour appointment is waiting for chemistry. We tell you how long the processing takes before you
        book, so you can plan the rest of your day.</p
      >
    </div>
    <div class="hs-colour">
      <div class="hs-diff-wrap">
        <figure class="diff" data-ratio="4/3" data-variant="primary">
          <div class="diff-item-1">
            <img
              src="https://picsum.photos/id/65/1000/750"
              alt="After: long hair painted in warm honey tones, lit from behind by a low sun"
            />
            <span class="diff-label">After</span>
          </div>
          <div class="diff-item-2">
            <img src="https://picsum.photos/id/65/1000/750" alt="Before: the same long hair in one flat, dark brown" />
            <span class="diff-label">Before</span>
          </div>
          <input
            class="diff-range"
            type="range"
            min="0"
            max="100"
            value="55"
            step="0.1"
            aria-label="Before and after divider"
          />
        </figure>
        <p class="hs-diff-stamp">Balayage<b>3 h 40 min</b>long hair · Noor</p>
      </div>
      <div>
        <h3 style="margin: 0; font-size: 1.5rem">Balayage, long hair: 3 h 40 min</h3>
        <div
          class="hs-clock"
          role="img"
          aria-label="Consultation 10 minutes, painting 75, processing 45, toner 25, cut and finish 65"
        >
          <span><b>10</b></span
          ><span><b>Painting 75</b></span
          ><span><b>Lift 45</b></span
          ><span><b>Toner 25</b></span
          ><span><b>Cut 65</b></span>
        </div>
        <ul class="hs-clock-legend">
          <li><i style="background: var(--chart-5)"></i> Consultation and a strand test - 10 min</li>
          <li><i style="background: var(--chart-1)"></i> Sectioning and hand-painting - 75 min</li>
          <li
            ><i style="background: var(--chart-2)"></i> Processing: the lightener lifts (45 min), then the toner sets
            (20 of 25 min) - you read, we bring coffee</li
          >
          <li><i style="background: var(--chart-3)"></i> Rinse, cut and blow-dry - 65 min</li>
        </ul>
        <div class="table-container hs-processing">
          <table class="table">
            <caption class="table-caption"
              >Processing times for colour - the time the colour works while you wait.</caption
            >
            <thead>
              <tr class="table-row">
                <th class="table-head" scope="col">Colour service</th>
                <th class="table-head" scope="col" style="text-align: right">Processing</th>
              </tr>
            </thead>
            <tbody>
              <tr class="table-row">
                <td class="table-cell">Root colour</td>
                <td class="table-cell" style="text-align: right">35 min</td>
              </tr>
              <tr class="table-row">
                <td class="table-cell">Full colour</td>
                <td class="table-cell" style="text-align: right">40 min</td>
              </tr>
              <tr class="table-row">
                <td class="table-cell">Balayage</td>
                <td class="table-cell" style="text-align: right">45 + 20 min</td>
              </tr>
              <tr class="table-row">
                <td class="table-cell">Gloss &amp; toner</td>
                <td class="table-cell" style="text-align: right">20 min</td>
              </tr>
              <tr class="table-row">
                <td class="table-cell">Plant-based colour (henna, indigo)</td>
                <td class="table-cell" style="text-align: right">60-90 min</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </section>

  <section id="hs-lookbook" class="hs-band" aria-labelledby="hs-lookbook-title">
    <div class="hs-head">
      <div>
        <p class="hs-eyebrow">Look book</p>
        <h2 id="hs-lookbook-title">From this autumn's chairs</h2>
      </div>
      <p>Show us one of these at your consultation - each says who did it and what to book.</p>
    </div>
    <ul class="hs-looks">
      <li>
        <figure class="mk-gallery-item">
          <button
            class="mk-gallery-item-open"
            type="button"
            commandfor="hs-viewer"
            command="show-modal"
            data-slide="0"
            aria-label="Enlarge: Soft auburn waves"
          >
            <img
              src="https://picsum.photos/id/1027/600/750"
              alt="A woman with shoulder-length wavy auburn hair and red lipstick"
            />
            <span class="mk-gallery-item-zoom" aria-hidden="true"><i data-lucide="maximize-2"></i></span>
          </button>
          <figcaption class="mk-gallery-item-caption"
            >Soft auburn waves <span>Noor · Full colour and cut</span></figcaption
          >
        </figure>
      </li>
      <li>
        <figure class="mk-gallery-item">
          <button
            class="mk-gallery-item-open"
            type="button"
            commandfor="hs-viewer"
            command="show-modal"
            data-slide="1"
            aria-label="Enlarge: Sun-kissed lengths"
          >
            <img
              src="https://picsum.photos/id/646/600/750"
              alt="Long blonde hair in sunlight, seen from behind in a green field"
            />
            <span class="mk-gallery-item-zoom" aria-hidden="true"><i data-lucide="maximize-2"></i></span>
          </button>
          <figcaption class="mk-gallery-item-caption">Sun-kissed lengths <span>Noor · Balayage, long</span></figcaption>
        </figure>
      </li>
      <li>
        <figure class="mk-gallery-item">
          <button
            class="mk-gallery-item-open"
            type="button"
            commandfor="hs-viewer"
            command="show-modal"
            data-slide="2"
            aria-label="Enlarge: Curls, cut dry"
          >
            <img
              src="https://picsum.photos/id/838/600/750"
              alt="A woman with full dark curls hugging a child with curly hair on a cobbled street"
            />
            <span class="mk-gallery-item-zoom" aria-hidden="true"><i data-lucide="maximize-2"></i></span>
          </button>
          <figcaption class="mk-gallery-item-caption">Curls, cut dry <span>Aylin · Cut &amp; finish</span></figcaption>
        </figure>
      </li>
      <li>
        <figure class="mk-gallery-item">
          <button
            class="mk-gallery-item-open"
            type="button"
            commandfor="hs-viewer"
            command="show-modal"
            data-slide="3"
            aria-label="Enlarge: Short and textured"
          >
            <img
              src="https://picsum.photos/id/1005/600/750"
              alt="A man with a short textured cut and sunglasses, seen from behind by the sea"
            />
            <span class="mk-gallery-item-zoom" aria-hidden="true"><i data-lucide="maximize-2"></i></span>
          </button>
          <figcaption class="mk-gallery-item-caption"
            >Short and textured <span>Felix · Cut &amp; finish, short</span></figcaption
          >
        </figure>
      </li>
      <li>
        <figure class="mk-gallery-item">
          <button
            class="mk-gallery-item-open"
            type="button"
            commandfor="hs-viewer"
            command="show-modal"
            data-slide="4"
            aria-label="Enlarge: Copper gloss"
          >
            <img
              src="https://picsum.photos/id/996/600/750"
              alt="Long copper hair with a hand pushed through it, against a pink evening sky"
            />
            <span class="mk-gallery-item-zoom" aria-hidden="true"><i data-lucide="maximize-2"></i></span>
          </button>
          <figcaption class="mk-gallery-item-caption">Copper gloss <span>Noor · Gloss &amp; toner</span></figcaption>
        </figure>
      </li>
      <li>
        <figure class="mk-gallery-item">
          <button
            class="mk-gallery-item-open"
            type="button"
            commandfor="hs-viewer"
            command="show-modal"
            data-slide="5"
            aria-label="Enlarge: Low chignon"
          >
            <img
              src="https://picsum.photos/id/832/600/750"
              alt="A woman with dark hair in a low bun, reading, in a pale blue blouse"
            />
            <span class="mk-gallery-item-zoom" aria-hidden="true"><i data-lucide="maximize-2"></i></span>
          </button>
          <figcaption class="mk-gallery-item-caption">Low chignon <span>Mara · Up-do for an occasion</span></figcaption>
        </figure>
      </li>
    </ul>
    <dialog class="mk-media-gallery-viewer hs-viewer" id="hs-viewer" aria-label="Look book">
      <div class="mk-media-gallery-viewer-inner">
        <ul class="mk-media-gallery-track" tabindex="0" aria-label="Looks - scroll sideways">
          <li
            ><img
              src="https://picsum.photos/id/1027/1200/1500"
              alt="A woman with shoulder-length wavy auburn hair and red lipstick"
            /><p
              ><strong>Soft auburn waves</strong> · Noor · Full colour (40 min processing) and Cut &amp; finish, medium
              · 1 / 6</p
            ></li
          >
          <li
            ><img
              src="https://picsum.photos/id/646/1200/1500"
              alt="Long blonde hair in sunlight, seen from behind in a green field"
            /><p><strong>Sun-kissed lengths</strong> · Noor · Balayage, long hair - 3 h 40 min · 2 / 6</p></li
          >
          <li
            ><img
              src="https://picsum.photos/id/838/1200/1500"
              alt="A woman with full dark curls hugging a child with curly hair on a cobbled street"
            /><p
              ><strong>Curls, cut dry</strong> · Aylin · Cut &amp; finish - come unwashed, as you wear it · 3 / 6</p
            ></li
          >
          <li
            ><img
              src="https://picsum.photos/id/1005/1200/1500"
              alt="A man with a short textured cut and sunglasses, seen from behind by the sea"
            /><p><strong>Short and textured</strong> · Felix · Cut &amp; finish, short - 45 min · 4 / 6</p></li
          >
          <li
            ><img
              src="https://picsum.photos/id/996/1200/1500"
              alt="Long copper hair with a hand pushed through it, against a pink evening sky"
            /><p
              ><strong>Copper gloss</strong> · Noor · Gloss &amp; toner every 8 weeks keeps copper bright · 5 / 6</p
            ></li
          >
          <li
            ><img
              src="https://picsum.photos/id/832/1200/1500"
              alt="A woman with dark hair in a low bun, reading, in a pale blue blouse"
            /><p
              ><strong>Low chignon</strong> · Mara · Up-do for an occasion - pinned to last a dance floor · 6 / 6</p
            ></li
          >
        </ul>
        <div class="hs-viewer-steps">
          <button class="hs-viewer-step" type="button" data-viewer-step="-1" aria-label="Previous look"
            ><i data-lucide="arrow-left"></i
          ></button>
          <p class="mk-media-gallery-hint">Swipe, scroll or use ← → · Esc closes</p>
          <button class="hs-viewer-step" type="button" data-viewer-step="1" aria-label="Next look"
            ><i data-lucide="arrow-right"></i
          ></button>
        </div>
        <form method="dialog"
          ><button class="mk-media-gallery-close" aria-label="Close the look book"><i data-lucide="x"></i></button
        ></form>
      </div>
    </dialog>
  </section>

  <section id="hs-shop" aria-labelledby="hs-shop-title">
    <div class="hs-head">
      <div>
        <p class="hs-eyebrow">Products</p>
        <h2 id="hs-shop-title">What we use on you</h2>
      </div>
      <p>Four products, all used at the basins. Put one aside and it waits at reception with your booking.</p>
    </div>
    <ul class="hs-products">
      <li>
        <article class="card hs-product">
          <figure class="hs-product-art" aria-hidden="true">
            <svg viewBox="0 0 80 140">
              <rect class="hs-cap" x="28" y="6" width="24" height="16" rx="3" />
              <path class="hs-body" d="M22 22h36l6 14v92a8 8 0 0 1-8 8H24a8 8 0 0 1-8-8V36Z" />
              <rect class="hs-label" x="22" y="60" width="36" height="44" rx="2" />
            </svg>
          </figure>
          <div class="card-content">
            <h3>Oat wash</h3>
            <p>Mild shampoo for coloured hair. 250 ml.</p>
          </div>
          <div class="card-footer hs-product-foot">
            <data value="19">€19</data>
            <button
              class="btn"
              data-variant="outline"
              data-size="sm"
              type="button"
              aria-pressed="false"
              data-hs-product="Oat wash 250 ml (€19)"
              >Put aside</button
            >
          </div>
        </article>
      </li>
      <li>
        <article class="card hs-product">
          <figure class="hs-product-art" aria-hidden="true">
            <svg viewBox="0 0 80 140">
              <rect class="hs-cap" x="33" y="8" width="14" height="30" rx="5" />
              <rect class="hs-cap" x="29" y="36" width="22" height="12" rx="2" />
              <path
                class="hs-body"
                d="M26 48h28c8 0 14 8 14 18v54a12 12 0 0 1-12 12H24a12 12 0 0 1-12-12V66c0-10 6-18 14-18Z"
              />
              <rect class="hs-label" x="20" y="74" width="40" height="34" rx="2" />
            </svg>
          </figure>
          <div class="card-content">
            <h3>Camellia oil</h3>
            <p>Two drops on dry ends. 50 ml lasts three months.</p>
          </div>
          <div class="card-footer hs-product-foot">
            <data value="24">€24</data>
            <button
              class="btn"
              data-variant="outline"
              data-size="sm"
              type="button"
              aria-pressed="false"
              data-hs-product="Camellia oil 50 ml (€24)"
              >Put aside</button
            >
          </div>
        </article>
      </li>
      <li>
        <article class="card hs-product">
          <figure class="hs-product-art" aria-hidden="true">
            <svg viewBox="0 0 80 140">
              <path class="hs-body" d="M20 14h40l-4 100H24Z" />
              <rect class="hs-cap" x="26" y="112" width="28" height="20" rx="3" />
              <rect class="hs-label" x="26" y="40" width="28" height="40" rx="2" />
            </svg>
          </figure>
          <div class="card-content">
            <h3>Curl cream</h3>
            <p>Defines curls without a crunch. 150 ml tube.</p>
          </div>
          <div class="card-footer hs-product-foot">
            <data value="22">€22</data>
            <button
              class="btn"
              data-variant="outline"
              data-size="sm"
              type="button"
              aria-pressed="false"
              data-hs-product="Curl cream 150 ml (€22)"
              >Put aside</button
            >
          </div>
        </article>
      </li>
      <li>
        <article class="card hs-product">
          <figure class="hs-product-art" aria-hidden="true">
            <svg viewBox="0 0 80 140">
              <rect class="hs-cap" x="30" y="4" width="20" height="10" rx="2" />
              <rect class="hs-cap" x="26" y="14" width="28" height="14" rx="4" />
              <rect class="hs-body" x="22" y="28" width="36" height="106" rx="8" />
              <rect class="hs-label" x="22" y="58" width="36" height="50" />
            </svg>
          </figure>
          <div class="card-content">
            <h3>Dry texture spray</h3>
            <p>Grip for up-dos and fine hair. 200 ml.</p>
          </div>
          <div class="card-footer hs-product-foot">
            <data value="21">€21</data>
            <button
              class="btn"
              data-variant="outline"
              data-size="sm"
              type="button"
              aria-pressed="false"
              data-hs-product="Dry texture spray 200 ml (€21)"
              >Put aside</button
            >
          </div>
        </article>
      </li>
    </ul>
  </section>

  <section id="hs-gift" class="hs-band" aria-labelledby="hs-gift-title">
    <div class="hs-gift">
      <div>
        <div class="hs-head" style="margin-block-end: 2rem">
          <div>
            <p class="hs-eyebrow">Gift cards</p>
            <h2 id="hs-gift-title">Give someone an hour in the chair</h2>
          </div>
        </div>
        <form data-hs-gift-form>
          <fieldset class="mk-booking-form-group" style="gap: 0">
            <legend>Amount</legend>
            <div class="mk-booking-form-slots hs-amounts">
              <label class="mk-booking-form-slot"
                ><input type="radio" name="amount" value="40" required /><span>€40</span></label
              >
              <label class="mk-booking-form-slot"
                ><input type="radio" name="amount" value="80" checked required /><span>€80</span></label
              >
              <label class="mk-booking-form-slot"
                ><input type="radio" name="amount" value="120" required /><span>€120</span></label
              >
              <label class="mk-booking-form-slot"
                ><input type="radio" name="amount" value="200" required /><span>€200</span></label
              >
            </div>
          </fieldset>
          <div class="hs-pair">
            <div class="hs-field">
              <label class="label" for="hs-gift-to">For</label>
              <input class="input" id="hs-gift-to" name="to" required placeholder="Lena" />
            </div>
            <div class="hs-field">
              <label class="label" for="hs-gift-from">From</label>
              <input class="input" id="hs-gift-from" name="from" autocomplete="name" required placeholder="Jonas" />
            </div>
          </div>
          <div class="hs-pair">
            <div class="hs-field">
              <label class="label" for="hs-gift-email">Your email</label>
              <input class="input" id="hs-gift-email" name="email" type="email" autocomplete="email" required />
            </div>
            <div class="hs-field">
              <label class="label" for="hs-gift-how">Delivery</label>
              <select class="select" id="hs-gift-how" name="how">
                <option value="pdf">By email, as a PDF to print</option>
                <option value="card">Printed card, pick up at reception</option>
              </select>
            </div>
          </div>
          <p class="hs-small" style="margin: 0"
            >Valid for three years on any service or product. You pay by bank transfer - the card is sent when the money
            arrives.</p
          >
          <div><button class="btn" type="submit" data-size="lg">Order gift card</button></div>
        </form>
      </div>
      <figure class="hs-giftcard" aria-label="Preview of the gift card">
        <p class="hs-giftcard-brand">Juniper &amp; Shear</p>
        <div>
          <p class="hs-giftcard-amount" data-hs-gift-amount>€80</p>
          <p class="hs-giftcard-for" data-hs-gift-names>For you · from us</p>
        </div>
      </figure>
    </div>
    <dialog class="dialog hs-dialog" id="hs-gift-done" aria-labelledby="hs-gift-done-title">
      <div class="dialog-content">
        <div class="dialog-header">
          <span class="hs-done-mark" aria-hidden="true"><i data-lucide="gift"></i></span>
          <h2 class="dialog-title" id="hs-gift-done-title" tabindex="-1">Gift card ordered</h2>
          <p class="dialog-description" data-hs-gift-done-text>We email the bank details to you now.</p>
        </div>
        <div class="dialog-footer">
          <button class="btn" type="button" commandfor="hs-gift-done" command="close">Done</button>
        </div>
      </div>
    </dialog>
  </section>

  <section id="hs-visit" aria-labelledby="hs-visit-title">
    <div class="hs-visit">
      <div>
        <p class="hs-eyebrow">Visit</p>
        <h2
          id="hs-visit-title"
          style="margin: 0 0 1.5rem; font-size: clamp(2.1rem, 1.4rem + 2.6cqi, 3.4rem); line-height: 1.05"
          >First floor, beside the bookshop</h2
        >
        <address>Gerberau 14<br />79098 Freiburg</address>
        <dl>
          <dt><i data-lucide="tram-front"></i> Tram</dt>
          <dd>Lines 1, 3 and 5 to Bertoldsbrunnen, then four minutes along the stream</dd>
          <dt><i data-lucide="car"></i> Parking</dt>
          <dd>Schlossberg garage, six minutes on foot</dd>
          <dt><i data-lucide="accessibility"></i> Access</dt>
          <dd>A lift from the courtyard; one basin tilts for wheelchairs</dd>
          <dt><i data-lucide="phone"></i> Phone</dt>
          <dd><a href="tel:+497615550142">+49 761 555 0142</a></dd>
        </dl>
        <a class="btn" data-size="lg" href="#hs-book">Book an appointment</a>
      </div>
      <section class="mk-opening-hours" aria-labelledby="hs-oh-title" data-hs-hours>
        <h3 class="mk-opening-hours-title" id="hs-oh-title">Opening hours</h3>
        <p class="mk-opening-hours-status" data-hs-status>Tuesday to Saturday</p>
        <dl class="mk-opening-hours-days">
          <div data-day="1" data-closed><dt>Monday</dt><dd>Closed</dd></div>
          <div data-day="2" data-open="9" data-close="19"><dt>Tuesday</dt><dd>09:00 - 19:00</dd></div>
          <div data-day="3" data-open="9" data-close="19"><dt>Wednesday</dt><dd>09:00 - 19:00</dd></div>
          <div data-day="4" data-open="9" data-close="21"><dt>Thursday</dt><dd>09:00 - 21:00</dd></div>
          <div data-day="5" data-open="9" data-close="19"><dt>Friday</dt><dd>09:00 - 19:00</dd></div>
          <div data-day="6" data-open="9" data-close="15"><dt>Saturday</dt><dd>09:00 - 15:00</dd></div>
          <div data-day="0" data-closed><dt>Sunday</dt><dd>Closed</dd></div>
        </dl>
        <ul class="mk-opening-hours-exceptions" aria-label="Exceptions">
          <li><time datetime="2026-12-24">24 Dec</time><span>09:00 - 13:00</span></li>
          <li><time datetime="2026-12-25">25 - 26 Dec</time><span>Closed</span></li>
          <li><time datetime="2026-12-31">31 Dec</time><span>09:00 - 13:00</span></li>
        </ul>
      </section>
    </div>
  </section>

  <footer class="mk-footer hs-foot">
    <div class="mk-footer-inner">
      <nav class="mk-footer-nav hs-foot-grid" aria-label="Footer">
        <div class="mk-footer-col">
          <h2>Juniper &amp; Shear</h2>
          <p>Hair studio since 2011<br />Gerberau 14, 79098 Freiburg</p>
        </div>
        <div class="mk-footer-col">
          <h3 class="mk-footer-heading">Hours</h3>
          <p>Tue, Wed, Fri 09:00 - 19:00<br />Thu 09:00 - 21:00<br />Sat 09:00 - 15:00</p>
        </div>
        <div class="mk-footer-col">
          <h3 class="mk-footer-heading">Contact</h3>
          <ul class="mk-footer-list">
            <li><a href="tel:+497615550142">+49 761 555 0142</a></li>
            <li><a href="mailto:hello@juniper-shear.example">hello@juniper-shear.example</a></li>
            <li><a href="#hs-book">Book online</a></li>
          </ul>
        </div>
        <div class="mk-footer-col">
          <h3 class="mk-footer-heading">Legal</h3>
          <ul class="mk-footer-list">
            <li
              ><button class="hs-linkish" type="button" commandfor="hs-imprint" command="show-modal"
                >Imprint</button
              ></li
            >
            <li
              ><button class="hs-linkish" type="button" commandfor="hs-privacy" command="show-modal"
                >Privacy</button
              ></li
            >
            <li><a href="#hs-prices">Price list</a></li>
          </ul>
        </div>
      </nav>
      <div class="mk-footer-bottom hs-foot-bottom">
        <p class="mk-footer-copy">© 2026 Juniper &amp; Shear GmbH</p>
        <span>Prices in euros, VAT included</span>
      </div>
    </div>
    <dialog class="dialog hs-dialog" id="hs-imprint" aria-labelledby="hs-imprint-title" data-size="lg">
      <div class="dialog-content">
        <div class="dialog-header">
          <h2 class="dialog-title" id="hs-imprint-title">Imprint</h2>
          <p class="dialog-description">Juniper &amp; Shear is a fictional business - an example site.</p>
        </div>
        <div class="dialog-body">
          <p>Juniper &amp; Shear GmbH<br />Gerberau 14<br />79098 Freiburg im Breisgau, Germany</p>
          <p>Managing director: Mara Lindqvist</p>
          <p>Phone +49 761 555 0142 · hello@juniper-shear.example</p>
          <p>Commercial register: Amtsgericht Freiburg, HRB 000000 (example)</p>
          <p>Master hairdresser, licensed by the Handwerkskammer Freiburg.</p>
        </div>
        <div class="dialog-footer">
          <button class="btn" type="button" commandfor="hs-imprint" command="close">Close</button>
        </div>
      </div>
    </dialog>
    <dialog class="dialog hs-dialog" id="hs-privacy" aria-labelledby="hs-privacy-title" data-size="lg">
      <div class="dialog-content">
        <div class="dialog-header">
          <h2 class="dialog-title" id="hs-privacy-title">Privacy</h2>
          <p class="dialog-description">What we keep, and for how long.</p>
        </div>
        <div class="dialog-body">
          <h3>Bookings</h3>
          <p
            >Your name, phone and email are used for the appointment and one reminder. We delete them two years after
            your last visit.</p
          >
          <h3>Your colour card</h3>
          <p
            >The formula we mixed for you is kept so we can mix it again. Ask at reception and we print it for you or
            delete it.</p
          >
          <h3>Cookies</h3>
          <p>This site sets none. The look and light or dark mode you pick are not stored.</p>
          <h3>Your rights</h3>
          <p>Write to hello@juniper-shear.example to see, correct or delete what we hold about you.</p>
        </div>
        <div class="dialog-footer">
          <button class="btn" type="button" commandfor="hs-privacy" command="close">Close</button>
        </div>
      </div>
    </dialog>
  </footer>
</div>
<script type="module">
  // df$ comes with the component bundle - a full-screen page loads it after this module
  addEventListener('DOMContentLoaded', () => {
    // light or dark: the switch writes the page's dark class (every look has both palettes); it follows the class when
    // something else sets it (the docs card follows the site's mode)
    const siteMode = df$('#in-salon [data-site-mode]');
    const syncMode = () => siteMode.prop('checked', document.documentElement.classList.contains('dark'));
    siteMode.on('change', () => {
      document.documentElement.classList.toggle('dark', siteMode.prop('checked'));
      document.dispatchEvent(new CustomEvent('defuss-theme-change'));
    });
    new MutationObserver(syncMode).observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
    syncMode();

    // the look: one of the site's designs
    const root = df$('#in-salon').get(0);
    const look = df$('#in-salon [data-site-look]');
    look.val(root.dataset.look).on('change', () => {
      root.dataset.look = look.val();
      document.dispatchEvent(new CustomEvent('defuss-theme-change'));
    });

    // -- prices: length x level -------------------------------------------------------------------------------------
    const FACTOR = { junior: 0.8, senior: 1, director: 1.3 };
    const SERVICES = {
      cut: { name: 'Cut & finish', prices: [54, 64, 76], mins: [45, 60, 75] },
      restyle: { name: 'Restyle', prices: [72, 84, 98], mins: [75, 90, 105] },
      blowdry: { name: 'Blow-dry & style', prices: [32, 39, 47], mins: [30, 40, 50] },
      updo: { name: 'Up-do for an occasion', prices: [58, 68, 82], mins: [45, 60, 75] },
      roots: { name: 'Root colour', prices: [66, 72, 78], mins: [75, 80, 85] },
      colour: { name: 'Full colour', prices: [78, 96, 118], mins: [90, 105, 120] },
      balayage: { name: 'Balayage', prices: [155, 185, 225], mins: [165, 190, 220] },
      gloss: { name: 'Gloss & toner', prices: [36, 42, 49], mins: [45, 45, 50] },
      consult: { name: 'Free consultation', prices: [0, 0, 0], mins: [15, 15, 15] },
    };
    const LENGTHS = ['short', 'medium', 'long'];
    const price = (base, level) => Math.round(base * FACTOR[level]);
    const euro = (n) => (n ? '€' + n : 'Free');
    const duration = (m) => {
      const h = Math.floor(m / 60);
      const r = m % 60;
      return h ? `${h} h${r ? ` ${r} min` : ''}` : `${r} min`;
    };
    const reprice = () => {
      const len = Number(df$('#in-salon [name="hs-length"]:checked').val());
      const level = df$('#in-salon [name="hs-level"]:checked').val();
      df$('#in-salon .hs-item[data-prices]').each((_i, item) => {
        const base = Number(item.dataset.prices.split(' ')[len]);
        const mins = Number(item.dataset.mins.split(' ')[len]);
        const p = price(base, level);
        df$(item).find('.hs-price').attr('value', String(p)).text(euro(p));
        df$(item).find('[data-hs-mins]').text(duration(mins));
      });
    };
    df$('#in-salon [name="hs-length"], #in-salon [name="hs-level"]').on('change', reprice);
    reprice();

    // -- booking: stylists, open days, free slots (the same answer for the same day every time) ------------------------
    const STYLISTS = [
      { id: 'noor', name: 'Noor Haddad', first: 'Noor', level: 'senior' },
      { id: 'aylin', name: 'Aylin Kaya', first: 'Aylin', level: 'senior' },
      { id: 'felix', name: 'Felix Brandt', first: 'Felix', level: 'junior' },
      { id: 'mara', name: 'Mara Lindqvist', first: 'Mara', level: 'director' },
    ];
    const LEVEL = { junior: 'Junior', senior: 'Senior', director: 'Director' };
    const HOURS = { 2: [9, 19], 3: [9, 19], 4: [9, 21], 5: [9, 19], 6: [9, 15] };
    const hash = (s) => {
      let h = 2166136261;
      for (let i = 0; i < s.length; i++) h = Math.imul(h ^ s.charCodeAt(i), 16777619);
      return h >>> 0;
    };
    const iso = (d) => d.toISOString().slice(0, 10);
    // a stylist's day: appointments already booked, as [start, end) in minutes - the same for the same day every time
    const appointments = (d, stylist) => {
      let seed = hash(`${iso(d)}|${stylist}`);
      const rnd = () => {
        seed = (seed + 0x6d2b79f5) | 0;
        let t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
        t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
        return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
      };
      const [open, close] = HOURS[d.getDay()];
      const blocks = [];
      for (let t = open * 60; ;) {
        t += [0, 30, 60, 120, 180, 240][Math.floor(rnd() * 6)];
        if (t >= close * 60) return blocks;
        const len = [60, 60, 90, 120, 180][Math.floor(rnd() * 5)];
        blocks.push([t, Math.min(t + len, close * 60)]);
        t += len;
      }
    };
    const now = new Date();
    const days = [];
    for (let i = 0; days.length < 10 && i < 21; i++) {
      const d = new Date(now.getFullYear(), now.getMonth(), now.getDate() + i, 12);
      if (HOURS[d.getDay()]) days.push(d);
    }
    const dayName = new Intl.DateTimeFormat('en-GB', { weekday: 'short' });
    const dayLong = new Intl.DateTimeFormat('en-GB', { weekday: 'long', day: 'numeric', month: 'long' });
    const monthShort = new Intl.DateTimeFormat('en-GB', { month: 'short' });
    const weekday = new Intl.DateTimeFormat('en-GB', { weekday: 'long' });
    const hhmm = (m) => `${String(Math.floor(m / 60)).padStart(2, '0')}:${String(m % 60).padStart(2, '0')}`;
    // every half hour a stylist is free for the whole appointment, from opening until it ends at closing
    const free = (d, stylist, mins) => {
      const [open, close] = HOURS[d.getDay()];
      const out = [];
      const nowMins = iso(d) === iso(now) ? now.getHours() * 60 + now.getMinutes() + 60 : 0;
      const blocks = appointments(d, stylist);
      for (let t = open * 60; t + mins <= close * 60; t += 30)
        out.push({ t, ok: t >= nowMins && blocks.every(([a, b]) => t + mins <= a || t >= b) });
      return out;
    };
    const form = df$('#in-salon [data-hs-booking]');
    const state = () => {
      const data = new FormData(form.get(0));
      return {
        service: String(data.get('service')),
        len: Number(data.get('length')),
        stylist: String(data.get('stylist')),
        day: data.get('day') ? Number(data.get('day')) : null,
        slot: data.get('slot') ? Number(data.get('slot')) : null,
      };
    };
    const whoAt = (s, d, t) => {
      const service = SERVICES[s.service];
      const list = s.stylist === 'any' ? STYLISTS : STYLISTS.filter((x) => x.id === s.stylist);
      return list.find((x) => free(d, x.id, service.mins[s.len]).some((f) => f.t === t && f.ok));
    };
    const renderDays = () => {
      df$('#in-salon [data-hs-days]').html(
        days
          .map(
            (d, i) =>
              `<label class="mk-booking-form-slot"><input type="radio" name="day" value="${i}" required aria-label="${dayLong.format(d)}"${i === 0 ? ' checked' : ''}><span>${dayName.format(d)}<b>${d.getDate()}</b>${monthShort.format(d)}</span></label>`,
          )
          .join(''),
      );
    };
    const renderSlots = (keep) => {
      const s = state();
      if (s.day === null) return;
      const d = days[s.day];
      const mins = SERVICES[s.service].mins[s.len];
      const ids = s.stylist === 'any' ? STYLISTS.map((x) => x.id) : [s.stylist];
      const merged = free(d, ids[0], mins).map((f) => ({
        ...f,
        ok: ids.some((id) => free(d, id, mins).some((g) => g.t === f.t && g.ok)),
      }));
      const anyFree = merged.some((f) => f.ok);
      df$('#in-salon [data-hs-slots]').html(
        anyFree
          ? merged
              .map(
                (f) =>
                  `<label class="mk-booking-form-slot"><input type="radio" name="slot" value="${f.t}" required${f.ok ? '' : ' disabled'}${keep === f.t && f.ok ? ' checked' : ''}><span>${hhmm(f.t)}</span></label>`,
              )
              .join('')
          : '<p class="mk-booking-form-tz">Fully booked on this day - try the next one.</p>',
      );
    };
    const products = () =>
      df$('#in-salon [data-hs-product][aria-pressed="true"]')
        .toArray()
        .map((b) => b.dataset.hsProduct)
        .join(', ');
    const summary = () => {
      const s = state();
      const service = SERVICES[s.service];
      const mins = service.mins[s.len];
      df$('#in-salon [data-hs-sum-service]').text(`${service.name} · ${LENGTHS[s.len]} hair`);
      df$('#in-salon [data-hs-sum-mins]').text(duration(mins));
      df$('#in-salon [data-hs-sum-products]').text(products() || 'Nothing yet - see Products');
      const d = s.day === null ? null : days[s.day];
      const who = d && s.slot !== null ? whoAt(s, d, s.slot) : null;
      df$('#in-salon [data-hs-sum-when]').text(
        d && s.slot !== null ? `${dayLong.format(d)}, ${hhmm(s.slot)}` : 'Pick a day and a time',
      );
      if (who) {
        df$('#in-salon [data-hs-sum-who]').text(`${who.name} (${LEVEL[who.level]})`);
        df$('#in-salon [data-hs-sum-price]').text(euro(price(service.prices[s.len], who.level)));
      } else if (s.stylist === 'any') {
        df$('#in-salon [data-hs-sum-who]').text('Anyone free');
        const lo = price(service.prices[s.len], 'junior');
        const hi = price(service.prices[s.len], 'director');
        df$('#in-salon [data-hs-sum-price]').text(lo === hi ? euro(lo) : `€${lo}-€${hi}`);
      } else {
        const st = STYLISTS.find((x) => x.id === s.stylist);
        df$('#in-salon [data-hs-sum-who]').text(`${st.name} (${LEVEL[st.level]})`);
        df$('#in-salon [data-hs-sum-price]').text(euro(price(service.prices[s.len], st.level)));
      }
    };
    renderDays();
    renderSlots();
    summary();
    form.on('change', (event) => {
      const name = event.target.name;
      if (name === 'day' || name === 'service' || name === 'length' || name === 'stylist') renderSlots(state().slot);
      summary();
    });

    // the first free appointment for a cut, pinned to the mirror; a click puts it in the form
    const firstFree = () => {
      for (let i = 0; i < days.length; i++)
        for (const st of STYLISTS) {
          const f = free(days[i], st.id, SERVICES.cut.mins[1]).find((x) => x.ok);
          if (f) return { i, t: f.t, st };
        }
      return null;
    };
    const next = firstFree();
    if (next) {
      df$('#in-salon [data-hs-next-when]').text(`${weekday.format(days[next.i])}, ${hhmm(next.t)}`);
      df$('#in-salon [data-hs-next-who]').text(`Cut & finish with ${next.st.first}`);
    }
    const pick = (selector) => {
      const input = df$(selector).get(0);
      if (input && !input.disabled) input.checked = true;
    };
    const goToBooking = () => {
      const still = matchMedia('(prefers-reduced-motion: reduce)').matches;
      df$('#hs-book')
        .get(0)
        .scrollIntoView({ behavior: still ? 'instant' : 'smooth', block: 'start' });
      setTimeout(() => df$('#hs-bk-name').get(0).focus({ preventScroll: true }), still ? 0 : 600);
    };
    df$('#in-salon [data-hs-next]').on('click', () => {
      if (!next) return goToBooking();
      df$('#hs-bk-service').val('cut');
      df$('#hs-bk-length').val('1');
      pick(`#hs-st-${next.st.id}`);
      pick(`#in-salon [name="day"][value="${next.i}"]`);
      renderSlots(next.t);
      summary();
      goToBooking();
    });
    df$('#in-salon [data-hs-stylist]').on('click', (event) => {
      pick(`#hs-st-${event.currentTarget.dataset.hsStylist}`);
      renderSlots(state().slot);
      summary();
    });

    // confirming shows the appointment (a demo - nothing leaves the page); closing resets the form
    const booked = df$('#hs-booked');
    form.on('submit', (event) => {
      event.preventDefault();
      const s = state();
      const d = days[s.day];
      const service = SERVICES[s.service];
      const who = whoAt(s, d, s.slot) ?? STYLISTS[0];
      const data = new FormData(form.get(0));
      df$('#in-salon [data-hs-done-day]').text(`${weekday.format(d)}, ${hhmm(s.slot)}`);
      df$('#in-salon [data-hs-done-email]').text(String(data.get('email')));
      df$('#in-salon [data-hs-done-when]').text(`${dayLong.format(d)}, ${hhmm(s.slot)}`);
      df$('#in-salon [data-hs-done-who]').text(
        `${who.name} (${LEVEL[who.level]})${s.stylist === 'any' ? ' - the first free at your time' : ''}`,
      );
      df$('#in-salon [data-hs-done-service]').text(`${service.name} · ${LENGTHS[s.len]} hair`);
      df$('#in-salon [data-hs-done-mins]').text(duration(service.mins[s.len]));
      df$('#in-salon [data-hs-done-products]').text(products() || 'Nothing');
      df$('#in-salon [data-hs-done-price]').text(euro(price(service.prices[s.len], who.level)));
      booked.get(0).showModal();
      df$('#hs-booked-title').get(0).focus();
    });
    booked.on('close', () => {
      form.get(0).reset();
      df$('#in-salon [data-hs-product]').attr('aria-pressed', 'false').text('Put aside');
      renderDays();
      renderSlots();
      summary();
    });

    // products: put aside for the appointment
    df$('#in-salon [data-hs-product]').on('click', (event) => {
      const button = event.currentTarget;
      const on = button.getAttribute('aria-pressed') !== 'true';
      df$(button)
        .attr('aria-pressed', String(on))
        .text(on ? 'Put aside ✓' : 'Put aside');
      summary();
    });

    // the look book: the picture's command opens the viewer, the click scrolls it to that look
    const track = df$('#hs-viewer .mk-media-gallery-track');
    const still = () => matchMedia('(prefers-reduced-motion: reduce)').matches;
    df$('#in-salon [data-slide]').on('click', (event) => {
      const n = Number(event.currentTarget.dataset.slide);
      setTimeout(() => track.children().get(n)?.scrollIntoView({ block: 'nearest', inline: 'start' }));
    });
    df$('#hs-viewer [data-viewer-step]').on('click', (event) => {
      const el = track.get(0);
      el.scrollBy({
        left: Number(event.currentTarget.dataset.viewerStep) * el.clientWidth,
        behavior: still() ? 'instant' : 'smooth',
      });
    });

    // gift card: the preview follows the form; ordering shows the thank-you, closing resets
    const gift = df$('#in-salon [data-hs-gift-form]');
    const giftPreview = () => {
      const data = new FormData(gift.get(0));
      const to = String(data.get('to') ?? '').trim();
      const from = String(data.get('from') ?? '').trim();
      df$('#in-salon [data-hs-gift-amount]').text(`€${data.get('amount') ?? 80}`);
      df$('#in-salon [data-hs-gift-names]').text(`For ${to || 'you'} · from ${from || 'us'}`);
    };
    gift.on('input', giftPreview).on('change', giftPreview);
    const giftDone = df$('#hs-gift-done');
    gift.on('submit', (event) => {
      event.preventDefault();
      const data = new FormData(gift.get(0));
      const how =
        data.get('how') === 'card'
          ? 'The printed card waits at reception once it is paid.'
          : 'The PDF follows once it is paid.';
      df$('#in-salon [data-hs-gift-done-text]').text(
        `€${data.get('amount')} for ${String(data.get('to')).trim()}. The bank details are on their way to ${data.get('email')}. ${how}`,
      );
      giftDone.get(0).showModal();
      df$('#hs-gift-done-title').get(0).focus();
    });
    giftDone.on('close', () => {
      gift.get(0).reset();
      giftPreview();
    });

    // opening hours: today, and whether the door is open now
    const today = now.getDay();
    const row = df$(`#in-salon [data-hs-hours] [data-day="${today}"]`);
    row.attr('aria-current', 'date');
    const h = now.getHours() + now.getMinutes() / 60;
    const hours = HOURS[today];
    const isOpen = hours && h >= hours[0] && h < hours[1];
    let detail;
    if (isOpen) detail = `until ${hhmm(hours[1] * 60)}`;
    else if (hours && h < hours[0]) detail = `opens today at ${hhmm(hours[0] * 60)}`;
    else {
      let i = 1;
      while (!HOURS[(today + i) % 7]) i++;
      const when =
        i === 1 ? 'tomorrow' : weekday.format(new Date(now.getFullYear(), now.getMonth(), now.getDate() + i));
      detail = `opens ${when} at ${hhmm(HOURS[(today + i) % 7][0] * 60)}`;
    }
    df$('#in-salon [data-hs-status]')
      .attr('data-closed', isOpen ? null : '')
      .html(`${isOpen ? 'Open now' : 'Closed now'} <span>· ${detail}</span>`);
  });
</script>
Built from Site Header (its menu a Sheet on narrow screens), Radio cards, Badge, Team Member, Booking Form with Select, Input and Textarea, a Diff for the before and after, Gallery Items opening the Media Gallery's viewer, Cards, Opening Hours and Dialogs for the confirmations, the imprint and the privacy notes. The prices, the free slots and the next free appointment come from a few lines of page script; the palettes are tokens on the site's root, so every component inside follows the look.
Comments, ideas or improvements? Edit this page's source on GitHub