/* The beauty look: everything here is scoped to .site[data-look="beauty"]. Appended after base.css (bun run --filter @platform/sections css).

   One material: the salon's own paper stock. The afsprakenkaartje, its back
   with the hours and the cards the reviews are written on are white laid
   stock cut with a deckle edge, lying flat (a hairline, no lift) on the
   salon's grey-green board; the behandelkaart lies open on the dark desk.
   Around them, hands and the nail table in photographs.
   Contrast (WCAG, checked with theme.ts contrast()): muted #55535b on card
   #fff 7.57:1, on paper #f8f7f4 7.06:1, on board #e4e7e1 6.06:1 (ink on board
   13.41:1); on the desk #232420: #f4f2ec 13.95:1, #bcbab2 8.04:1. The laid
   lines and deckle never sit under text darker than 4% ink. */

.site[data-look="beauty"] {
  --room: #e4e7e1;
  --desk: #232420;
  --on-desk: #f4f2ec;
  --desk-muted: #bcbab2;
  --hair: #d9d6cf;
  --card-edge: 0 0 0 1px rgb(30 29 34 / 0.07), 0 1px 1px rgb(30 29 34 / 0.08);
  --card-lie: var(--card-edge), 0 2px 4px -1px rgb(30 29 34 / 0.12), 0 22px 44px -22px rgb(30 29 34 / 0.45);
  /* The board: chain lines every 2.4rem and fine laid lines, as in laid paper. */
  --board: repeating-linear-gradient(90deg, rgb(30 29 34 / 0.035) 0 1px, transparent 1px 2.4rem), repeating-linear-gradient(0deg, rgb(255 255 255 / 0.32) 0 1px, transparent 1px 4px), var(--room);
  /* The card stock: white, its laid lines barely there. */
  --stock: repeating-linear-gradient(0deg, rgb(30 29 34 / 0.018) 0 1px, transparent 1px 3px), var(--card);
  --deckle: polygon(0.6px 0.4px, 2.5% 1.2px, 5.0% 1.5px, 7.5% 2.2px, 10.0% 1.3px, 12.5% 1.4px, 15.0% 1.5px, 17.5% 0.7px, 20.0% 1.4px, 22.5% 1.6px, 25.0% 2.0px, 27.5% 0.5px, 30.0% 0.9px, 32.5% 0.5px, 35.0% 2.0px, 37.5% 1.8px, 40.0% 0.4px, 42.5% 2.4px, 45.0% 2.3px, 47.5% 1.7px, 50.0% 1.6px, 52.5% 0.6px, 55.0% 0.3px, 57.5% 1.4px, 60.0% 0.4px, 62.5% 0.7px, 65.0% 0.8px, 67.5% 0.4px, 70.0% 1.3px, 72.5% 1.2px, 75.0% 2.1px, 77.5% 1.4px, 80.0% 1.6px, 82.5% 1.3px, 85.0% 1.7px, 87.5% 1.3px, 90.0% 0.9px, 92.5% 2.4px, 95.0% 2.4px, 97.5% 2.1px, calc(100% - 0.4px) 0.7px, calc(100% - 1.8px) 4.17%, calc(100% - 1.0px) 8.33%, calc(100% - 0.8px) 12.5%, calc(100% - 0.9px) 16.67%, calc(100% - 0.4px) 20.83%, calc(100% - 1.9px) 25.0%, calc(100% - 1.1px) 29.17%, calc(100% - 2.1px) 33.33%, calc(100% - 1.1px) 37.5%, calc(100% - 2.3px) 41.67%, calc(100% - 2.1px) 45.83%, calc(100% - 0.3px) 50.0%, calc(100% - 0.7px) 54.17%, calc(100% - 2.2px) 58.33%, calc(100% - 1.3px) 62.5%, calc(100% - 2.4px) 66.67%, calc(100% - 1.1px) 70.83%, calc(100% - 0.5px) 75.0%, calc(100% - 1.6px) 79.17%, calc(100% - 1.9px) 83.33%, calc(100% - 0.9px) 87.5%, calc(100% - 0.5px) 91.67%, calc(100% - 1.0px) 95.83%, calc(100% - 0.7px) calc(100% - 0.4px), 97.5% calc(100% - 2.3px), 95.0% calc(100% - 1.9px), 92.5% calc(100% - 0.5px), 90.0% calc(100% - 0.8px), 87.5% calc(100% - 0.5px), 85.0% calc(100% - 0.4px), 82.5% calc(100% - 2.0px), 80.0% calc(100% - 0.7px), 77.5% calc(100% - 1.5px), 75.0% calc(100% - 1.2px), 72.5% calc(100% - 0.7px), 70.0% calc(100% - 1.8px), 67.5% calc(100% - 0.6px), 65.0% calc(100% - 1.7px), 62.5% calc(100% - 0.5px), 60.0% calc(100% - 1.2px), 57.5% calc(100% - 0.7px), 55.0% calc(100% - 0.9px), 52.5% calc(100% - 2.3px), 50.0% calc(100% - 2.0px), 47.5% calc(100% - 0.9px), 45.0% calc(100% - 2.2px), 42.5% calc(100% - 0.7px), 40.0% calc(100% - 1.1px), 37.5% calc(100% - 2.1px), 35.0% calc(100% - 1.6px), 32.5% calc(100% - 0.5px), 30.0% calc(100% - 2.4px), 27.5% calc(100% - 0.7px), 25.0% calc(100% - 0.8px), 22.5% calc(100% - 1.9px), 20.0% calc(100% - 1.0px), 17.5% calc(100% - 0.9px), 15.0% calc(100% - 0.5px), 12.5% calc(100% - 0.5px), 10.0% calc(100% - 1.5px), 7.5% calc(100% - 0.8px), 5.0% calc(100% - 1.6px), 2.5% calc(100% - 1.1px), 0.4px calc(100% - 0.6px), 1.3px 95.83%, 2.3px 91.67%, 1.3px 87.5%, 1.5px 83.33%, 2.1px 79.17%, 0.7px 75.0%, 0.6px 70.83%, 2.2px 66.67%, 2.0px 62.5%, 0.8px 58.33%, 0.7px 54.17%, 1.9px 50.0%, 2.3px 45.83%, 0.7px 41.67%, 2.3px 37.5%, 2.2px 33.33%, 1.6px 29.17%, 1.2px 25.0%, 0.5px 20.83%, 0.4px 16.67%, 2.3px 12.5%, 0.8px 8.33%, 1.8px 4.17%);
  --fs-base: 1.0625rem;
  --fs-lead: clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem);
  --wrap: 76rem;
  font-size: var(--fs-base);
  line-height: 1.6;
  hyphens: manual;
}
@media (min-width: 52rem) { .site[data-look="beauty"] { --fs-base: 1.125rem; } }
.site[data-look="beauty"] main > .s + .s { border-top: 0; }
.site[data-look="beauty"] :is(h1, h2) { letter-spacing: -0.01em; line-height: 0.98; }
.site[data-look="beauty"] h2 { font-size: calc(clamp(2.4rem, 1.6rem + 3.2vw, 4.6rem) * var(--heading-scale)); }
.site[data-look="beauty"] .lead { color: var(--muted); }

/* The printed card: white stock. On its own (the price card on the desk)
   it casts a shadow; cut from the stock (.bh-stock) it lies flat with a
   deckle edge, the wrapper drawing the hairline that follows the edge. */
.site[data-look="beauty"] .bh-card {
  --text: var(--on-card); --muted: var(--card-muted);
  position: relative; color: var(--on-card); background: var(--stock);
  box-shadow: var(--card-lie); border-radius: 3px;
}
.site[data-look="beauty"] .bh-stock { filter: drop-shadow(0 0 0.5px rgb(30 29 34 / 0.55)) drop-shadow(0 1px 0.5px rgb(30 29 34 / 0.1)); }
.site[data-look="beauty"] .bh-stock > .bh-card { box-shadow: none; border-radius: 0; clip-path: var(--deckle); }
/* Picked up off the board a little on hover, as a card is. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .site[data-look="beauty"] :is(.bh-appt-stock, .bh-rev-stock, .bh-back-stock) > .bh-card { transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .site[data-look="beauty"] :is(.bh-appt-stock, .bh-rev-stock, .bh-back-stock):hover > .bh-card { transform: translateY(-3px) rotate(-0.25deg); }
}
.site[data-look="beauty"] .bh-card-name {
  margin: 0; font-family: var(--font-heading); font-weight: var(--heading-weight); letter-spacing: var(--heading-tracking);
  font-size: calc(1.45rem * var(--heading-scale)); line-height: 1.05; overflow-wrap: break-word; hyphens: auto;
}

/* Buttons: the customer's colour, set like a printed label. */
.site[data-look="beauty"] .btn { min-height: 52px; padding: 0.85rem 1.6rem; border-radius: 2px; letter-spacing: 0.02em; transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s; }
.site[data-look="beauty"] .btn-primary:hover { text-decoration: none; background: color-mix(in srgb, var(--primary) 86%, #000); border-color: color-mix(in srgb, var(--primary) 86%, #000); transform: translateY(-1px); box-shadow: 0 6px 14px -8px rgb(30 29 34 / 0.6); }

/* --- Header: the letterhead ------------------------------------------- */
.site[data-look="beauty"] .site-header { background: var(--bg); border-bottom: 1px solid var(--hair); }
.site[data-look="beauty"] .brand { font-size: calc(1.6rem * var(--heading-scale)); letter-spacing: -0.005em; }
.site[data-look="beauty"] .site-header nav a { font-size: 1rem; }
.site[data-look="beauty"] .site-header .btn { min-height: 44px; padding: 0.55rem 1.1rem; }

/* --- Hero: hands at the nail table; the appointment card on the board - */
.site[data-look="beauty"] .bh-hero { padding: 0; overflow: clip; display: grid; background: var(--board); }
.site[data-look="beauty"] .bh-hero-photo { position: relative; overflow: clip; background: var(--room); }
.site[data-look="beauty"] .bh-hero .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; max-height: none; object-fit: cover; }
.site[data-look="beauty"] .bh-hero-board { display: flex; flex-direction: column; justify-content: space-between; gap: clamp(1.5rem, 4vh, 3rem); min-width: 0; }
.site[data-look="beauty"] .bh-hero h1,
.site[data-look="beauty"] .bh-hero h2 {
  font-size: calc(clamp(2.75rem, 1.1rem + 4.2vw, 6.4rem) * var(--heading-scale));
  line-height: 0.92; letter-spacing: -0.02em; max-width: 10ch; margin: 0 0 0.3em;
  overflow-wrap: break-word; hyphens: auto; text-wrap: balance;
}
.site[data-look="beauty"] .bh-hero .lead { max-width: 34rem; margin: 0; color: var(--text); }

/* The appointment card: landscape, as printed, big enough to read. */
.site[data-look="beauty"] .bh-appt-stock { width: min(100%, 36rem); }
.site[data-look="beauty"] .bh-appt { padding: clamp(1.25rem, 2.6vw, 2rem) clamp(1.25rem, 3vw, 2.25rem) clamp(1.25rem, 2.4vw, 1.75rem); }
.site[data-look="beauty"] .bh-appt-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.25rem 1.5rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--on-card); }
.site[data-look="beauty"] .bh-appt .bh-card-name { font-size: calc(clamp(1.6rem, 1.3rem + 1vw, 2.1rem) * var(--heading-scale)); min-width: 0; }
.site[data-look="beauty"] .bh-appt-addr { display: flex; flex-direction: column; margin: 0; font-size: 0.85rem; line-height: 1.4; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.site[data-look="beauty"] .bh-appt-title { margin: 0.9rem 0 0; font-family: var(--font-heading); font-size: calc(1.3rem * var(--heading-scale)); line-height: 1.1; }
/* The card's lines: printed treatments, or (with the booking module) links to a time. */
.site[data-look="beauty"] .bh-appt-list { list-style: none; margin: 0.45rem 0 0; padding: 0; }
.site[data-look="beauty"] .bh-appt-list li { border-bottom: 1px dotted color-mix(in srgb, var(--on-card) 40%, transparent); }
.site[data-look="beauty"] .bh-appt-list li, .site[data-look="beauty"] .bh-appt-list a { display: flex; align-items: baseline; gap: 0.4rem 1rem; padding: 0.55rem 0; min-width: 0; }
.site[data-look="beauty"] .bh-appt-list a { padding: 0; min-height: 44px; align-items: center; flex: 1; color: inherit; text-decoration: none; }
.site[data-look="beauty"] .bh-appt-list a:hover .bh-appt-what { text-decoration: underline; text-underline-offset: 0.2em; }
.site[data-look="beauty"] .bh-appt-what { flex: 1; min-width: 0; font-size: 1.02rem; }
.site[data-look="beauty"] .bh-appt-len { font-size: 0.85rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.site[data-look="beauty"] .bh-appt-go { font-size: 0.85rem; font-weight: 600; white-space: nowrap; }
.site[data-look="beauty"] .bh-appt .actions { margin-top: 1.4rem; gap: 0.4rem 1.2rem; }
@media (max-height: 61rem), (max-width: 51.99rem) { .site[data-look="beauty"] .bh-appt-printed li:nth-child(n + 3) { display: none; } }
.site[data-look="beauty"] .bh-appt .cta-alt { font-size: 0.95rem; }
.site[data-look="beauty"] .bh-appt .cta-detail { white-space: nowrap; }

@media (min-width: 52rem) {
  .site[data-look="beauty"] .bh-hero { grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); min-height: max(40rem, min(calc(100svh - 4.6rem - var(--vb-bar, 0px)), 64rem)); }
  .site[data-look="beauty"] .bh-hero-board { padding: clamp(2rem, 5vh, 5rem) max(var(--gap), 50vw - var(--wrap) / 2) clamp(2rem, 5vh, 4rem) clamp(2.5rem, 4.5vw, 5rem); }
  .site[data-look="beauty"] .bh-hero-bare { grid-template-columns: minmax(0, 1fr); }
  .site[data-look="beauty"] .bh-hero-bare .bh-hero-board { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; column-gap: clamp(2rem, 5vw, 5rem); padding-inline: max(var(--gap), 50vw - var(--wrap) / 2); }
  .site[data-look="beauty"] .bh-hero-bare .bh-hero-text { align-self: center; }
  .site[data-look="beauty"] .bh-hero-bare :is(h1, h2) { max-width: 12ch; }
}
@media (max-width: 51.99rem) {
  .site[data-look="beauty"] .bh-hero-photo { height: clamp(9rem, calc(24svh - var(--vb-bar, 0px)), 20rem); }
  .site[data-look="beauty"] .bh-hero-board { padding: 1.25rem var(--gap) 2.5rem; gap: 1.25rem; }
  .site[data-look="beauty"] .bh-hero .lead { font-size: var(--fs-base); }
  .site[data-look="beauty"] .bh-appt-head { padding-bottom: 0.6rem; }
  .site[data-look="beauty"] .bh-hero-bare .bh-hero-board { padding-top: 3rem; }
  .site[data-look="beauty"] .bh-hero :is(h1, h2) { max-width: none; margin-bottom: 0.25em; }
  .site[data-look="beauty"] .bh-appt-title { margin-top: 0.7rem; }
  .site[data-look="beauty"] .bh-appt .actions { margin-top: 1.1rem; }
}
@media (max-width: 26rem) {
  .site[data-look="beauty"] .bh-appt-addr { text-align: left; flex-direction: row; flex-wrap: wrap; column-gap: 0.75rem; }
}

/* --- Services: the behandelkaart on the dark desk --------------------- */
.site[data-look="beauty"] .s-services { background: var(--desk); padding-block: clamp(3.5rem, 9vw, 8rem); }
.site[data-look="beauty"] .bh-menu { max-width: 44rem; margin-inline: auto; padding: clamp(1.75rem, 5vw, 4.25rem) clamp(1.25rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 3rem); }
.site[data-look="beauty"] .bh-menu.is-folded { max-width: 72rem; }
/* The fold down the middle of the opened card. */
@media (min-width: 60rem) {
  .site[data-look="beauty"] .bh-menu.is-folded { background-image: linear-gradient(90deg, transparent 0 44%, rgb(30 29 34 / 0.045) 49.85%, rgb(30 29 34 / 0.09) 50%, rgb(255 255 255 / 0) 50.15%, rgb(30 29 34 / 0.025) 52%, transparent 58%); }
  .site[data-look="beauty"] .bh-menu.is-folded .bh-menu-body { columns: 2; column-gap: clamp(5rem, 9vw, 9rem); }
  .site[data-look="beauty"] .bh-menu .service { break-inside: avoid; }
}
.site[data-look="beauty"] .bh-menu-head { break-inside: avoid; padding-bottom: clamp(1.5rem, 4vw, 3rem); }
.site[data-look="beauty"] .bh-menu-head .bh-card-name { margin-bottom: clamp(1.25rem, 3vw, 2.25rem); }
.site[data-look="beauty"] .bh-menu-head :is(h1, h2) { font-size: calc(clamp(2.4rem, 1.7rem + 2.6vw, 4.2rem) * var(--heading-scale)); margin: 0; text-wrap: wrap; overflow-wrap: break-word; hyphens: auto; }
.site[data-look="beauty"] .bh-menu-intro { margin: 1rem 0 0; color: var(--muted); max-width: 34rem; }
.site[data-look="beauty"] .bh-group { break-inside: avoid; padding-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.site[data-look="beauty"] .bh-group-name {
  display: flex; align-items: baseline; gap: 1rem; margin: 0 0 0.35rem;
  font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: calc(1.55rem * var(--heading-scale)); line-height: 1.1;
}
.site[data-look="beauty"] .bh-group-name::after { content: ''; flex: 1; border-bottom: 1px solid var(--on-card); transform: translateY(-0.3em); }
.site[data-look="beauty"] .bh-menu .service-list { margin: 0; border: 0; }
.site[data-look="beauty"] .bh-menu .service { border: 0; padding-block: 0.6rem; }
.site[data-look="beauty"] .bh-menu .price-row { flex-wrap: nowrap; gap: 0 0.75rem; }
.site[data-look="beauty"] .bh-menu .service :is(h2, h3, h4) { font-family: var(--font-body); font-weight: 600; font-size: 1.08rem; line-height: 1.35; letter-spacing: 0; text-transform: none; min-width: 0; overflow-wrap: break-word; hyphens: auto; }
.site[data-look="beauty"] .bh-menu .leader { flex: 1 1 1.5rem; min-width: 1.5rem; border-bottom: 1px dotted color-mix(in srgb, var(--on-card) 55%, transparent); transform: translateY(-0.3em); transition: border-color 0.2s; }
.site[data-look="beauty"] .bh-menu .price { font-family: var(--font-figures); font-weight: 600; font-size: 1.08rem; font-variant-numeric: tabular-nums lining-nums; }
.site[data-look="beauty"] .bh-menu .price-from { font-weight: 400; font-size: 0.85em; color: var(--muted); }
.site[data-look="beauty"] .bh-menu .service-note { margin: 0.15rem 0 0; font-size: 0.95rem; line-height: 1.45; color: var(--muted); max-width: 30rem; }
.site[data-look="beauty"] .bh-min { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--on-card); }
.site[data-look="beauty"] .bh-menu .service:hover .leader { border-bottom-style: solid; border-bottom-color: var(--on-card); }
@media (max-width: 30rem) { .site[data-look="beauty"] .bh-menu .leader { flex-basis: 0.75rem; min-width: 0.75rem; } }
.site[data-look="beauty"] .bh-menu-foot { display: flex; flex-wrap: wrap; gap: 0.4rem 1.75rem; align-items: baseline; margin-top: clamp(0.5rem, 2vw, 1.25rem); padding-top: 1.1rem; border-top: 1px solid var(--hair); font-size: 0.95rem; color: var(--muted); }
.site[data-look="beauty"] .bh-menu-foot a { color: var(--on-card); }
.site[data-look="beauty"] .bh-menu-book { margin-left: auto; font-weight: 600; text-decoration-thickness: 1.5px; }

/* --- About: the room, full bleed, beside the words -------------------- */
.site[data-look="beauty"] .s-about:has(.about-media) { padding: 0; background: var(--bg); }
.site[data-look="beauty"] .s-about:has(.about-media) .about-inner { width: 100%; max-width: none; gap: 0; align-items: stretch; }
.site[data-look="beauty"] .about-img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface); }
.site[data-look="beauty"] .about-text { max-width: none; }
.site[data-look="beauty"] .about-text :is(h1, h2) { margin-bottom: 0.45em; }
.site[data-look="beauty"] .about-text > p { max-width: 34rem; }
.site[data-look="beauty"] .about-text > p:first-of-type { font-family: var(--font-heading); font-size: calc(clamp(1.45rem, 1.2rem + 1vw, 2.05rem) * var(--heading-scale)); line-height: 1.25; letter-spacing: -0.005em; }
@media (min-width: 52rem) {
  .site[data-look="beauty"] .s-about:has(.about-media) .about-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: min(88svh, 52rem); }
  .site[data-look="beauty"] .s-about:has(.about-media) .about-img { aspect-ratio: auto; }
  .site[data-look="beauty"] .s-about:has(.about-media) .about-text { align-self: center; padding: clamp(3.5rem, 8vw, 7rem) max(var(--gap), 50vw - var(--wrap) / 2) clamp(3.5rem, 8vw, 7rem) clamp(2.5rem, 6vw, 6rem); }
  .site[data-look="beauty"] .about-image_right .about-text { padding: clamp(3.5rem, 8vw, 7rem) clamp(2.5rem, 6vw, 6rem) clamp(3.5rem, 8vw, 7rem) max(var(--gap), 50vw - var(--wrap) / 2); }
}
@media (max-width: 51.99rem) {
  .site[data-look="beauty"] .s-about:has(.about-media) .about-media { order: -1; }
  .site[data-look="beauty"] .s-about:has(.about-media) .about-img { max-height: 24rem; }
  .site[data-look="beauty"] .s-about:has(.about-media) .about-text { padding: 2.5rem var(--gap) 3rem; }
}

/* --- Reviews: one set large on the board, the rest on appointment cards */
.site[data-look="beauty"] .bh-reviews { background: var(--board); padding-block: clamp(4rem, 9vw, 7.5rem); }
.site[data-look="beauty"] .bh-rev { display: grid; gap: clamp(2.5rem, 5vw, 4rem) clamp(2.5rem, 6vw, 6rem); align-items: start; }
.site[data-look="beauty"] .bh-rev > :is(h1, h2) { margin: 0; }
@media (min-width: 60rem) {
  .site[data-look="beauty"] .bh-reviews:is(.bh-reviews-2, .bh-reviews-3) .bh-rev { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-rows: auto 1fr; row-gap: clamp(2rem, 4vw, 3.25rem); }
  .site[data-look="beauty"] .bh-reviews:is(.bh-reviews-2, .bh-reviews-3) .bh-rev-cards { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}
.site[data-look="beauty"] .bh-rev-lead { margin: 0; }
.site[data-look="beauty"] .bh-rev-lead blockquote { margin: 0; font-family: var(--font-heading); font-size: calc(clamp(1.9rem, 1.1rem + 2.7vw, 3.9rem) * var(--heading-scale)); line-height: 1.08; letter-spacing: -0.015em; max-width: 22ch; }
.site[data-look="beauty"] .bh-reviews-1 .bh-rev-lead blockquote { max-width: 26ch; }
.site[data-look="beauty"] .bh-rev blockquote p { margin: 0; text-wrap: pretty; }
.site[data-look="beauty"] .bh-q-open { margin-left: -0.3em; }
@media (max-width: 30rem) { .site[data-look="beauty"] .bh-q-open { margin-left: 0; } }
.site[data-look="beauty"] .bh-rev-lead figcaption { margin-top: 1.1rem; font-size: 1rem; color: var(--text); }
.site[data-look="beauty"] .bh-rev-lead figcaption::before { content: '– '; }
.site[data-look="beauty"] .bh-rev-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); }
@media (min-width: 46rem) { .site[data-look="beauty"] .bh-reviews-4 .bh-rev-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.site[data-look="beauty"] .bh-rev-card { margin: 0; padding: clamp(1.25rem, 2.6vw, 1.75rem) clamp(1.25rem, 3vw, 2rem); }
.site[data-look="beauty"] .bh-rev-card .bh-card-name { font-size: calc(1.15rem * var(--heading-scale)); padding-bottom: 0.6rem; border-bottom: 1px solid var(--on-card); }
.site[data-look="beauty"] .bh-rev-card blockquote { margin: 0.9rem 0 0; font-family: var(--font-heading); font-size: calc(clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem) * var(--heading-scale)); line-height: 1.22; }
.site[data-look="beauty"] .bh-rev-card figcaption { display: flex; align-items: baseline; gap: 0.75rem; margin-top: 1.1rem; }
.site[data-look="beauty"] .bh-rev-label { font-size: 0.8rem; color: var(--muted); }
.site[data-look="beauty"] .bh-rev-who { flex: 1; min-width: 0; padding: 0 0 0.2rem 0.25rem; border-bottom: 1px solid color-mix(in srgb, var(--on-card) 45%, transparent); font-weight: 600; overflow-wrap: anywhere; }

.site[data-look="beauty"] .bh-rev-cards > li { display: flex; }
.site[data-look="beauty"] .bh-rev-stock { flex: 1; display: flex; }
.site[data-look="beauty"] .bh-rev-card { flex: 1; }

/* --- Opening hours: the back of the appointment card ------------------ */
.site[data-look="beauty"] .bh-hours { background: var(--board); padding-block: clamp(4rem, 8vw, 7rem); }
.site[data-look="beauty"] .bh-hours-inner { display: grid; gap: 2.5rem clamp(2rem, 6vw, 6rem); align-items: center; }
@media (min-width: 52rem) { .site[data-look="beauty"] .bh-hours-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
.site[data-look="beauty"] .bh-hours-intro .hours-place { font-size: var(--fs-lead); line-height: 1.5; color: var(--text); margin: 0 0 1.25rem; }
.site[data-look="beauty"] .bh-hours-intro .hours-place a { display: inline-block; margin-top: 0.25rem; font-size: var(--fs-base); }
.site[data-look="beauty"] .bh-late { margin: 0 0 1.5rem; padding: 0.9rem 0; border-block: 1px solid color-mix(in srgb, var(--text) 30%, transparent); font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: calc(clamp(1.35rem, 1.15rem + 0.8vw, 1.85rem) * var(--heading-scale)); line-height: 1.2; max-width: 26rem; }
.site[data-look="beauty"] .bh-hours-intro .hours-call a { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: calc(clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem) * var(--heading-scale)); text-decoration-thickness: 1px; }
.site[data-look="beauty"] .bh-back-stock { max-width: 36rem; width: 100%; justify-self: end; }
.site[data-look="beauty"] .bh-card-back { padding: clamp(1.4rem, 4vw, 2.6rem) clamp(1.25rem, 4vw, 2.8rem); }
.site[data-look="beauty"] .bh-card-back .bh-card-name { text-align: center; padding-bottom: 1rem; margin-bottom: 0.4rem; border-bottom: 1px solid var(--hair); }
.site[data-look="beauty"] .bh-card-back .hours-table { font-size: 1.08rem; }
.site[data-look="beauty"] .bh-card-back .hours-table :is(th, td) { padding: 0.62rem 0; border-bottom: 1px dotted color-mix(in srgb, var(--on-card) 35%, transparent); }
.site[data-look="beauty"] .bh-card-back .hours-table tr:last-child :is(th, td) { border-bottom: 0; }
.site[data-look="beauty"] .bh-card-back .hours-table th { font-weight: 600; padding-left: 1.1rem; }
.site[data-look="beauty"] .bh-card-back .hours-table th::before { left: 0 !important; top: 50% !important; bottom: auto !important; width: 0.5rem !important; height: 0.5rem; margin-top: -0.25rem; border-radius: 50%; background: var(--primary) !important; box-shadow: 0 0 0 1px var(--on-card); }
.site[data-look="beauty"] .bh-card-back .hours-table th::after { background: var(--on-card); color: var(--card); border-radius: 1px; }

/* --- FAQ ---------------------------------------------------------------- */
.site[data-look="beauty"] .s-faq { padding-block: clamp(3.5rem, 7vw, 6rem); }
@media (min-width: 60rem) {
  .site[data-look="beauty"] .s-faq > .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
  .site[data-look="beauty"] .s-faq .faq-items { margin-top: 0.4rem; }
}
.site[data-look="beauty"] .faq-items { max-width: none; }
.site[data-look="beauty"] .faq-items details:first-child { border-top: 1px solid var(--text); }
.site[data-look="beauty"] .faq-items summary { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: calc(clamp(1.35rem, 1.15rem + 0.7vw, 1.8rem) * var(--heading-scale)); min-height: 4.5rem; padding-block: 0.85rem; line-height: 1.15; }
.site[data-look="beauty"] .faq-items summary::after { font-family: var(--font-body); font-weight: 300; font-size: 1.6rem; transition: transform 0.25s; }
.site[data-look="beauty"] .faq-items summary:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.site[data-look="beauty"] .faq-items details p { color: var(--text); font-size: var(--fs-base); max-width: 38rem; }
.site[data-look="beauty"] .faq-items dt { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: 1.5rem; }

/* --- Call to action: a card left on the nail table ------------------- */
.site[data-look="beauty"] .bh-cta { position: relative; overflow: clip; background: var(--room); padding-block: clamp(4rem, 10vw, 9rem); }
.site[data-look="beauty"] .bh-cta.has-photo { min-height: min(80svh, 46rem); display: grid; align-items: center; }
.site[data-look="beauty"] .bh-cta-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.site[data-look="beauty"] .bh-cta-inner { position: relative; }
.site[data-look="beauty"] .bh-cta-stock { width: min(100%, 34rem); }
@media (min-width: 52rem) { .site[data-look="beauty"] .bh-cta.has-photo .bh-cta-stock { margin-left: auto; } }
.site[data-look="beauty"] .bh-cta-card { padding: clamp(1.6rem, 4.5vw, 3.25rem); }
.site[data-look="beauty"] .bh-cta-card :is(h1, h2) { font-size: calc(clamp(2.3rem, 1.6rem + 2.6vw, 4rem) * var(--heading-scale)); margin-bottom: 0.35em; }
.site[data-look="beauty"] .bh-cta-body { color: var(--muted); font-size: var(--fs-lead); margin: 0 0 1.5rem; }

/* --- Gallery: the room and its products, edge to edge ----------------- */
.site[data-look="beauty"] .s-gallery { padding-block: clamp(3rem, 6vw, 5rem) 0; }
.site[data-look="beauty"] .s-gallery > .wrap { width: 100%; max-width: none; }
.site[data-look="beauty"] .s-gallery > .wrap > :is(h1, h2) { padding-inline: max(var(--gap), (100% - var(--wrap)) / 2); }
.site[data-look="beauty"] .s-gallery .gallery-items { margin-top: clamp(1.5rem, 4vw, 3rem); gap: 4px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; }
.site[data-look="beauty"] .s-gallery .gallery-items li { background: var(--room); overflow: clip; grid-column: auto; grid-row: auto; }
.site[data-look="beauty"] .s-gallery .gallery-items li img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.site[data-look="beauty"] .s-gallery .gallery-items li:hover img { transform: scale(1.03); }
@media (min-width: 52rem) {
  .site[data-look="beauty"] .s-gallery .gallery-items { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .site[data-look="beauty"] .s-gallery .gallery-items li:nth-child(5n + 1) { grid-column: span 2; grid-row: span 2; }
  .site[data-look="beauty"] .s-gallery .gallery-items li:nth-child(5n + 1) img { aspect-ratio: auto; }
  .site[data-look="beauty"] .s-gallery .gallery-items li:last-child:nth-child(5n + 1) { grid-column: 1 / -1; grid-row: auto; }
  .site[data-look="beauty"] .s-gallery .gallery-items li:last-child:nth-child(5n + 1) img { aspect-ratio: 3 / 1; }
}
@media (max-width: 51.99rem) { .site[data-look="beauty"] .s-gallery .gallery-items li:first-child:nth-last-child(odd) { grid-column: 1 / -1; } }
/* Two or three photos (hands, the table): tall crops edge to edge, the middle one wider. */
@media (min-width: 52rem) {
  .site[data-look="beauty"] .gallery-grid .gallery-items:has(> li:nth-child(3):last-child) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr); }
  .site[data-look="beauty"] .gallery-grid .gallery-items:has(> li:nth-child(2):last-child) { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .site[data-look="beauty"] .gallery-grid .gallery-items:is(:has(> li:nth-child(3):last-child), :has(> li:nth-child(2):last-child)) li { grid-column: auto; grid-row: auto; }
  .site[data-look="beauty"] .gallery-grid .gallery-items:is(:has(> li:nth-child(3):last-child), :has(> li:nth-child(2):last-child)) img { aspect-ratio: auto; height: clamp(24rem, 68svh, 44rem); }
}
@media (max-width: 51.99rem) {
  .site[data-look="beauty"] .gallery-grid .gallery-items:has(> li:nth-child(3):last-child) li:first-child { grid-column: 1 / -1; }
  .site[data-look="beauty"] .gallery-grid .gallery-items:has(> li:nth-child(3):last-child) li:first-child img { aspect-ratio: 4 / 3; }
  .site[data-look="beauty"] .gallery-grid .gallery-items:has(> li:nth-child(3):last-child) li:not(:first-child) img { aspect-ratio: 3 / 4; }
}
.site[data-look="beauty"] .gallery-masonry .gallery-items { display: block; columns: 3 16rem; column-gap: 4px; }
.site[data-look="beauty"] .gallery-masonry .gallery-items li { margin-bottom: 4px; }
.site[data-look="beauty"] .gallery-masonry .gallery-items img { aspect-ratio: auto; }

/* --- Claims and places: one printed line ------------------------------ */
.site[data-look="beauty"] .s-trust { background: var(--room); padding-block: 1.3rem; }
.site[data-look="beauty"] .trust-list { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: calc(1.35rem * var(--heading-scale)); }
.site[data-look="beauty"] .trust-list li:not(:last-child)::after { content: '·'; margin-inline: 0.8rem; }
.site[data-look="beauty"] .s-area { padding-block: clamp(3.5rem, 8vw, 6rem); }
.site[data-look="beauty"] ul.area-list, .site[data-look="beauty"] .area-places { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: calc(clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem) * var(--heading-scale)); line-height: 1.2; max-width: none; }

/* --- Contact: big plain lines ----------------------------------------- */
.site[data-look="beauty"] .s-contact { padding-block: clamp(4rem, 9vw, 8rem); }
.site[data-look="beauty"] .contact-list { border-top: 1px solid var(--text); }
.site[data-look="beauty"] .contact-list li { border-bottom: 1px solid var(--hair); }
.site[data-look="beauty"] .contact-link { padding-block: 1.1rem; grid-template-columns: minmax(0, 1fr); }
.site[data-look="beauty"] .contact-label { font-size: 0.95rem; }
.site[data-look="beauty"] .contact-value { font-weight: var(--heading-weight); font-size: calc(clamp(1.7rem, 1.3rem + 1.8vw, 3rem) * var(--heading-scale)); letter-spacing: -0.01em; line-height: 1.05; transition: transform 0.25s; }
.site[data-look="beauty"] .contact-link:hover .contact-value { text-decoration-thickness: 1px; }
.site[data-look="beauty"] .contact-list li:first-child .contact-value { font-size: calc(clamp(2.1rem, 1.5rem + 2.6vw, 4rem) * var(--heading-scale)); }
.site[data-look="beauty"] .contact-also { margin-top: -0.5rem; }
.site[data-look="beauty"] .contact-form { border-top: 1px solid var(--text); }

/* --- Request form (module): filled in on the card stock, on the board -- */
.site[data-look="beauty"] .s-request { background: var(--board); }
.site[data-look="beauty"] .request-form { --text: var(--on-card); --muted: var(--card-muted); color: var(--on-card); background: var(--stock); border: 0; padding: clamp(1.25rem, 4vw, 2.75rem); filter: drop-shadow(0 0 0.5px rgb(30 29 34 / 0.55)); clip-path: var(--deckle); }
.site[data-look="beauty"] .request-form :is(input, select, textarea) { border: 0; border-bottom: 1px solid color-mix(in srgb, var(--on-card) 55%, transparent); border-radius: 0; background: transparent; }
.site[data-look="beauty"] .request-form :is(input, select, textarea):focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.site[data-look="beauty"] .request-form textarea { border: 1px solid color-mix(in srgb, var(--on-card) 35%, transparent); }

/* --- Booking (module): on the appointment card's stock ----------------- */
.site[data-look="beauty"] .booking-inner { --bg: var(--card); --text: var(--on-card); --muted: var(--card-muted); color: var(--on-card); background: var(--card); box-shadow: var(--card-lie); border-radius: 3px; padding: clamp(1.25rem, 4vw, 2.75rem); }
.site[data-look="beauty"] .s-booking { background: var(--room); }
.site[data-look="beauty"] .booking-services { border-top: 1px solid var(--on-card); }
.site[data-look="beauty"] .booking-name { font-weight: 600; }

/* --- Footer: the name as the shop sign -------------------------------- */
.site[data-look="beauty"] .site-footer { --deep: var(--desk); --on-deep: var(--on-desk); --deep-muted: var(--desk-muted); background: var(--desk); padding-top: clamp(3.5rem, 8vw, 6rem); }
@media (min-width: 52rem) {
  .site[data-look="beauty"] .footer-inner { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row dense; row-gap: 0.35rem; }
  .site[data-look="beauty"] .footer-brand { display: contents; }
  .site[data-look="beauty"] .footer-brand .footer-name { grid-column: 1 / -1; }
  .site[data-look="beauty"] .footer-brand > p:not(.footer-name) { grid-column: 1; }
  .site[data-look="beauty"] .footer-col { grid-row: 2 / span 3; }
  .site[data-look="beauty"] .footer-col:nth-child(2) { grid-column: 2; }
  .site[data-look="beauty"] .footer-col:nth-child(3) { grid-column: 3; }
  .site[data-look="beauty"] .footer-col:nth-child(4) { grid-column: 4; }
}
.site[data-look="beauty"] .footer-brand .footer-name { font-size: calc(clamp(3rem, 1.5rem + 7vw, 9rem) * var(--heading-scale)); line-height: 0.9; letter-spacing: -0.02em; margin-bottom: 1.5rem; overflow-wrap: break-word; hyphens: auto; }
.site[data-look="beauty"] .bh-foot[data-name="mid"] .footer-name { font-size: calc(clamp(2.6rem, 1.4rem + 5vw, 7rem) * var(--heading-scale)); }
.site[data-look="beauty"] .bh-foot[data-name="long"] .footer-name { font-size: calc(clamp(2rem, 1.2rem + 3.2vw, 4.6rem) * var(--heading-scale)); line-height: 1; hyphens: manual; max-width: 22ch; }
.site[data-look="beauty"] .footer-title { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: calc(1.3rem * var(--heading-scale)); }

/* --- Phones: the quick bar on card stock ------------------------------ */
@media (max-width: 51.99rem) {
  .site[data-look="beauty"] .quickbar { --on-deep: var(--on-card); background: var(--card); border-top: 1px solid var(--hair); }
  .site[data-look="beauty"] .quick { font-family: var(--font-heading); font-weight: 400; font-size: 1.25rem; }
}

/* --- Motion: cards settle onto the desk as they come into view. Movement
   only, never hidden: a full-page capture or preview frame shows every card. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes bh-settle { from { transform: translateY(2.5rem); box-shadow: var(--card-edge), 0 40px 60px -30px rgb(30 29 34 / 0.5); } }
  @keyframes bh-lay { from { transform: translateY(0.75rem); } }
  @supports (animation-timeline: view()) {
    .site[data-look="beauty"] :is(.bh-menu) { animation: bh-settle linear forwards; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  }
  @supports (animation-timeline: view()) {
    .site[data-look="beauty"] :is(.bh-back-stock, .bh-cta-stock, .bh-rev-stock) { animation: bh-lay linear forwards; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  }
  .site[data-look="beauty"] .bh-appt-stock { animation: bh-lay 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both; }
}