/* =========================================================================
   NAILED — Design Tokens & Base Styles
   A booking marketplace for nail, lash & makeup pros.
   Tone: warm, credible, soft-edged, a little playful.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300..800&family=Instrument+Serif:ital@0;1&family=Manrope:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- COLOR — primitives -------------------------------------- */

  /* Rouge — primary brand pink */
  --rouge-50:  #FFF1F5;
  --rouge-100: #FFE0E9;
  --rouge-200: #FFC4D6;
  --rouge-300: #FF9CBC;
  --rouge-400: #FB6B9A;
  --rouge-500: #EE3F7E;
  --rouge-600: #D62469;
  --rouge-700: #B01753;
  --rouge-800: #82103D;
  --rouge-900: #520827;

  /* Berry — deep accent */
  --berry-500: #6E1A3A;
  --berry-700: #4A0F26;

  /* Cream — warm paper surfaces */
  --cream-50:  #FFFCF7;
  --cream-100: #FBF6EE;
  --cream-200: #F4ECDF;
  --cream-300: #ECDFCB;

  /* Champagne */
  --champagne-300: #E8DCC4;
  --champagne-500: #C9B79A;

  /* Stone — warm neutrals */
  --stone-50:  #F8F6F3;
  --stone-100: #ECE8E2;
  --stone-200: #DCD6CC;
  --stone-300: #BCB3A4;
  --stone-400: #968B7A;
  --stone-500: #6F6557;
  --stone-600: #4D4438;
  --stone-700: #322B22;
  --stone-800: #1F1A14;
  --stone-900: #14100B;

  /* Ink */
  --ink: #1B1218;

  /* Sage */
  --sage-200: #DDE3D2;
  --sage-500: #8DA079;
  --sage-700: #4F5C40;

  /* Semantic accents */
  --success-500: #4F8A5B;
  --success-50:  #E7F1E7;
  --warning-500: #C58A2E;
  --warning-50:  #FBEFD5;
  --danger-500:  #C8324A;
  --danger-50:   #FBE2E5;

  /* ---------- COLOR — semantic tokens -------------------------------- */

  --bg:           var(--cream-100);
  --bg-elevated:  var(--cream-50);
  --bg-deep:      var(--ink);
  --bg-tint:      var(--rouge-50);
  --surface-line: var(--stone-200);
  --surface-border: var(--stone-300);

  --fg:           var(--ink);
  --fg-muted:     var(--stone-500);
  --fg-subtle:    var(--stone-400);
  --fg-on-dark:   var(--cream-50);
  --fg-on-rouge:  #FFFFFF;

  --brand:        var(--rouge-500);
  --brand-hover:  var(--rouge-600);
  --brand-press:  var(--rouge-700);
  --brand-soft:   var(--rouge-100);

  --accent:       var(--berry-500);

  /* ---------- RADII -------------------------------------------------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 40px;
  --radius-pill: 999px;

  /* ---------- SHADOWS ------------------------------------------------ */
  --shadow-xs: 0 1px 2px rgba(31, 19, 24, 0.04);
  --shadow-sm: 0 2px 6px rgba(31, 19, 24, 0.05), 0 1px 2px rgba(31, 19, 24, 0.04);
  --shadow-md: 0 8px 20px -8px rgba(31, 19, 24, 0.10), 0 2px 4px rgba(31, 19, 24, 0.04);
  --shadow-lg: 0 24px 48px -16px rgba(31, 19, 24, 0.15), 0 6px 12px -6px rgba(31, 19, 24, 0.06);
  --shadow-rouge: 0 18px 40px -16px rgba(238, 63, 126, 0.45);

  /* ---------- SPACING — 4-pt base ------------------------------------ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---------- TYPE — families ---------------------------------------- */
  --font-display:   'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --font-editorial: 'Instrument Serif', 'Times New Roman', serif;
  --font-body:      'Manrope', ui-sans-serif, system-ui, sans-serif;
  --font-mono:      'JetBrains Mono', ui-monospace, monospace;

  /* ---------- TYPE — scale ------------------------------------------- */
  --fs-display: 88px;
  --fs-h1:      56px;
  --fs-h2:      40px;
  --fs-h3:      28px;
  --fs-h4:      22px;
  --fs-h5:      18px;
  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-body-sm: 14px;
  --fs-caption: 12px;
  --fs-overline: 11px;

  --lh-tight: 1.05;
  --lh-snug:  1.18;
  --lh-body:  1.55;
  --lh-loose: 1.7;

  --ls-tight: -0.02em;
  --ls-snug:  -0.01em;
  --ls-wide:  0.06em;
  --ls-overline: 0.14em;

  /* ---------- MOTION ------------------------------------------------- */
  --ease-out-soft: cubic-bezier(.2,.8,.2,1);
  --ease-in-out-soft: cubic-bezier(.45,.1,.2,1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
}

/* =========================================================================
   Reset & base
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
button { font: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; margin: 0; padding: 0; }
a { text-decoration: none; color: inherit; }

html, body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--rouge-200);
  color: var(--ink);
}

/* =========================================================================
   Typography
   ========================================================================= */

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
}

h1 {
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

h2 {
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
}

h3 {
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
}

h4 {
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: 1.25;
}

p { margin: 0 0 var(--space-4) 0; }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-overline);
  font-weight: 600;
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* =========================================================================
   Layout
   ========================================================================= */

.page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* =========================================================================
   Buttons
   ========================================================================= */

.btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all var(--dur-base) var(--ease-out-soft);
  white-space: nowrap;
  cursor: pointer;
}

.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-hover); box-shadow: var(--shadow-rouge); }

.btn-secondary { background: var(--ink); color: var(--cream-50); }
.btn-secondary:hover { background: #000; }

.btn-ghost { background: transparent; color: var(--fg); border: 1px solid var(--stone-300); }
.btn-ghost:hover { background: var(--stone-100); border-color: var(--stone-400); }

.btn-sm { padding: 8px 16px; font-size: 13px; }
.btn-lg { padding: 15px 28px; font-size: 15px; }

.btn-icon {
  width: 40px;
  height: 40px;
  padding: 0;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: transparent;
  border: 0;
  color: var(--fg);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.btn-icon:hover { background: var(--stone-100); }

/* =========================================================================
   Chips
   ========================================================================= */

.chip {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--stone-200);
  background: var(--cream-50);
  color: var(--fg);
  display: inline-flex;
  gap: 6px;
  align-items: center;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out-soft);
  white-space: nowrap;
}
.chip:hover { border-color: var(--stone-400); }
.chip.active { background: var(--ink); color: var(--cream-50); border-color: var(--ink); }

/* =========================================================================
   Cards
   ========================================================================= */

.card {
  background: var(--cream-50);
  border: 1px solid var(--stone-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out-soft),
              box-shadow var(--dur-base) var(--ease-out-soft),
              border-color var(--dur-base) var(--ease-out-soft);
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--stone-300);
}

/* =========================================================================
   Lucide icon defaults
   ========================================================================= */

[data-lucide] { stroke-width: 1.5; }

/* =========================================================================
   Top navigation
   ========================================================================= */

/* Cross-document View Transitions: gjør top-nav-en oppleves som persistent
   mellom sider på Chrome/Safari (Firefox faller tilbake til vanlig navigasjon).
   navigation: auto trigger overgangen på alle same-origin-navigasjoner; navnet
   `top-nav` matcher header på source- og destination-side så browseren morpher
   den isteden for å crossfade hele dokumentet. */
@view-transition { navigation: auto; }

.top-nav {
  position: sticky;
  top: 0;
  /* Leaflet's panes use z-index up to 400 and controls up to 1000, so the
     nav must sit above both — otherwise the map covers the brand/logo when
     the user scrolls past it. */
  z-index: 1100;
  transition: all var(--dur-base) var(--ease-out-soft);
  view-transition-name: top-nav;
}

/* Headeren skal ikke fade — den persistes som identitet på tvers av sider. */
::view-transition-old(top-nav),
::view-transition-new(top-nav) {
  animation: none;
  mix-blend-mode: normal;
}
.top-nav.scrolled {
  background: rgba(251, 246, 238, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--stone-200);
}
.top-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  max-width: 1200px;
  margin: 0 auto;
  gap: 24px;
  transition: padding 220ms ease;
}
.top-nav.scrolled .top-nav__inner { padding: 8px 24px; }
.top-nav__brand { cursor: pointer; }
.top-nav__brand img {
  height: 32px;
  transition: height 220ms ease;
  transform-origin: left center;
}
.top-nav.scrolled .top-nav__brand img { height: 22px; }
.top-nav__links { display: flex; gap: 28px; }
.top-nav__links a {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--fg);
  cursor: pointer;
  white-space: nowrap;
}
.top-nav__links a:hover { color: var(--brand); }
.top-nav__actions { display: flex; gap: 8px; align-items: center; }

/* =========================================================================
   Hero
   ========================================================================= */

.hero {
  position: relative;
  padding: 64px 0 96px;
  overflow: hidden;
}
.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
}
.hero__eyebrow { color: var(--rouge-700); }
.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(48px, 8vw, 96px);
  line-height: 1.08;
  letter-spacing: -0.035em;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}
.hero__title em {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 400;
  color: var(--rouge-500);
  letter-spacing: -0.01em;
}
.hero__sub {
  font-size: 18px;
  color: var(--fg-muted);
  max-width: 56ch;
  line-height: 1.55;
  margin: 0;
}
.hero__search-wrap {
  width: 100%;
  max-width: 760px;
  margin-top: 16px;
}
.hero__quick {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
}

/* Minimalistiske hero-CTA-er for mobil. På desktop vises .hero__quick i stedet. */
.hero__cta-row {
  display: none;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 20px;
}
@media (max-width: 720px) {
  .hero__quick { display: none; }
  .hero__cta-row { display: flex; }
}
.hero__cta-pill {
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  background: transparent;
  border: 1px solid var(--stone-300);
  border-radius: var(--radius-pill);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
}
.hero__cta-pill:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--cream-50);
}
.hero__sticker {
  position: absolute;
  top: 60px;
  right: -50px;
  width: 220px;
  transform: rotate(8deg);
  animation: spin 30s linear infinite;
  opacity: 0.92;
  pointer-events: none;
}
/* Avoid overlapping the search bar on narrower viewports.
   The hero search is max-width 760px and centered, so the sticker starts
   to clip into it below ~1040px wide. We shrink + push it further off
   the edge, then hide it entirely on mobile. */
@media (max-width: 1040px) {
  .hero__sticker { width: 160px; top: 40px; right: -64px; opacity: 0.82; }
}
@media (max-width: 820px) {
  .hero__sticker { width: 120px; top: 28px; right: -52px; opacity: 0.75; }
}
@media (max-width: 640px) {
  .hero__sticker { display: none; }
}
@keyframes spin { to { transform: rotate(368deg); } }

/* =========================================================================
   Search bar
   ========================================================================= */

.search-bar {
  display: flex;
  align-items: stretch;
  background: var(--cream-50);
  border: 1px solid var(--stone-200);
  border-radius: var(--radius-pill);
  padding: 8px;
  box-shadow: var(--shadow-md);
  gap: 0;
  text-align: left;
}
.search-bar__field {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  padding: 10px 22px;
}
.search-bar__field-icon { width: 20px; height: 20px; color: var(--fg-muted); flex-shrink: 0; }
.search-bar__field-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  align-items: flex-start;
  min-width: 0;
}
.search-bar__label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
  text-align: left;
}
.search-bar__field input {
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  width: 100%;
  text-align: left;
}
.search-bar__field input::placeholder { color: var(--stone-400); }
.search-bar__divider { width: 1px; background: var(--stone-200); margin: 6px 0; }
.search-bar__cta {
  padding: 0;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
  align-self: center;
  justify-content: center;
}
.search-bar__cta i { width: 20px; height: 20px; }
.search-bar--compact { padding: 4px; box-shadow: var(--shadow-sm); }
.search-bar--compact .search-bar__field { padding: 6px 14px; gap: 10px; }
.search-bar--compact .search-bar__label { font-size: 12px; }
.search-bar--compact .search-bar__cta { width: 40px; height: 40px; }

/* =========================================================================
   Category rail
   ========================================================================= */

.cat-rail {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 24px;
  max-width: 1200px;
  margin: 0 auto;
  scrollbar-width: none;
}
.cat-rail::-webkit-scrollbar { display: none; }
.cat-rail .chip i { width: 14px; height: 14px; }

/* =========================================================================
   Section header
   ========================================================================= */

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 28px;
  gap: 20px;
}
.section-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 5vw, 48px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  padding-bottom: 0.12em;
}
.section-head h2 em {
  font-family: var(--font-editorial);
  font-style: italic;
  color: var(--rouge-500);
  font-weight: 400;
  display: inline-block;
  padding-bottom: 0.06em;
}
.section-head__link {
  font-weight: 600;
  font-size: 14px;
  color: var(--brand);
  border: 0;
  background: none;
  cursor: pointer;
  display: inline-flex;
  gap: 4px;
  align-items: center;
  white-space: nowrap;
}
.section-head__link i { width: 16px; height: 16px; }

/* =========================================================================
   Grids
   ========================================================================= */

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid-3 { grid-template-columns: 1fr; } }

/* =========================================================================
   Service card (salon listing)
   ========================================================================= */

.service-card {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  overflow: hidden;
}
.service-card__photo {
  aspect-ratio: 16/10;
  position: relative;
  overflow: hidden;
}
.service-card__cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.service-card--featured .service-card__photo {
  background: linear-gradient(135deg, #FFE0E9 0%, #EE3F7E 60%, #82103D 100%);
}
.service-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--ink);
  color: var(--cream-50);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
}
.service-card__heart {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  border: 0;
  background: rgba(251, 246, 238, 0.9);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.service-card__heart i { width: 16px; height: 16px; color: var(--ink); }
.service-card__heart:hover i { color: var(--rouge-500); }
.service-card__body {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.service-card__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.service-card__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  color: var(--ink);
  line-height: 1.2;
}
.service-card__meta {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 13px;
  color: var(--fg-muted);
}
.service-card__meta i { width: 14px; height: 14px; }
.service-card__price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  color: var(--ink);
  white-space: nowrap;
}
.service-card__from {
  font-size: 11px;
  color: var(--fg-muted);
  margin-right: 3px;
  font-weight: 500;
}
.service-card__kr {
  font-size: 11px;
  color: var(--fg-muted);
  font-weight: 500;
}
.service-card__tags { display: flex; gap: 4px; }
.service-card__tag {
  font-size: 11px;
  color: var(--fg-muted);
  padding: 3px 8px;
  background: var(--stone-100);
  border-radius: var(--radius-pill);
}

/* =========================================================================
   Editorial band
   ========================================================================= */

.editorial-band {
  background: var(--ink);
  color: var(--cream-50);
  padding: 96px 0;
  border-radius: var(--radius-2xl);
}
.editorial-band__inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 32px;
  text-align: center;
}
.editorial-band__quote {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--cream-50);
}
.editorial-band__quote em { color: var(--rouge-300); }
.editorial-band__attr {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone-300);
  margin-top: 28px;
}

/* =========================================================================
   Footer
   ========================================================================= */

.footer {
  background: var(--cream-200);
  color: var(--ink);
  margin-top: 64px;
  border-top: 1px solid var(--stone-200);
}
.footer__inner {
  padding: 40px 24px 28px;
  max-width: 1200px;
  margin: 0 auto;
}
.footer__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
}
.footer__brand { height: 28px; }
.footer__socials { display: flex; gap: 16px; }
.footer__social {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--stone-300);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink);
  transition: all var(--dur-fast);
}
.footer__social:hover { background: var(--ink); color: var(--cream-50); border-color: var(--ink); }
.footer__social i { width: 16px; height: 16px; }
.footer__links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--stone-300);
}
.footer__links a {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
}
.footer__links a:hover { color: var(--rouge-500); }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  color: var(--fg-muted);
  font-size: 12px;
  flex-wrap: wrap;
  gap: 12px;
}
.footer__badges { display: flex; gap: 8px; }
.footer__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--stone-300);
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  background: var(--cream-50);
}

/* Footer-justeringer på mobil: mindre topp-margin, strammere padding,
   kompakt links-rad. */
@media (max-width: 720px) {
  .footer { margin-top: 24px; }
  .footer__inner { padding: 24px 20px 18px; }
  .footer__top { margin-bottom: 18px; gap: 12px; }
  .footer__brand { height: 24px; }
  .footer__social { width: 36px; height: 36px; }
  .footer__links { gap: 12px 16px; padding-bottom: 16px; }
  .footer__links a { font-size: 13px; }
  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding-top: 16px;
    font-size: 11px;
  }
  .footer__badges { flex-wrap: wrap; gap: 6px; }
  .footer__badge { font-size: 10px; padding: 3px 8px; }
}

/* =========================================================================
   Salon detail page
   ========================================================================= */

.salon-detail { padding: 32px 0 96px; }
.salon-detail__hero {
  aspect-ratio: 21/9;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, #FFE0E9, #FFC4D6, #82103D);
  position: relative;
  margin-bottom: 32px;
  overflow: hidden;
}
.salon-detail__back { position: absolute; top: 20px; left: 20px; background: rgba(251, 246, 238, 0.9); }
.salon-detail__grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 48px;
  align-items: flex-start;
}
@media (max-width: 900px) {
  /* minmax(0, 1fr) i stedet for 1fr — uten dette lar grid-en barna utvide
     seg utover container-bredden hvis noe inni har min-content > tilgjengelig.
     Day-carousel-tracket pusher ellers hele grid-en til 1370 px. */
  .salon-detail__grid { grid-template-columns: minmax(0, 1fr); }
  .salon-detail__grid > * { min-width: 0; }
}
.salon-detail__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 6vw, 56px);
  letter-spacing: -0.025em;
  margin: 0 0 8px;
  line-height: 1.05;
}
.salon-detail__sub { color: var(--fg-muted); font-size: 16px; margin: 0 0 24px; }
.salon-detail__sub i { vertical-align: -3px; }
.salon-detail__about { font-size: 16px; line-height: 1.65; max-width: 60ch; }
/* Når bio består av flere avsnitt rendres .salon-detail__about som <div>
   med <p>-barn. Gi <p>-ene riktig vertikal avstand. */
div.salon-detail__about > p { margin: 0 0 12px; }
div.salon-detail__about > p:last-child { margin-bottom: 0; }
.salon-detail__chips { display: flex; gap: 8px; margin: 24px 0; flex-wrap: wrap; }
.salon-detail__photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 32px;
}
.salon-detail__photo {
  aspect-ratio: 1/1;
  border-radius: 18px;
}

/* Booking panel */
.booking-panel {
  background: var(--cream-50);
  border: 1px solid var(--stone-200);
  border-radius: var(--radius-xl);
  padding: 28px;
  box-shadow: var(--shadow-md);
}
.booking-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.booking-panel__header h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
}

.service-list { display: flex; flex-direction: column; gap: 8px; }
.service-list__item {
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--stone-200);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all var(--dur-fast) var(--ease-out-soft);
}
.service-list__item:hover { border-color: var(--stone-400); }
.service-list__item.active { background: var(--rouge-50); border-color: var(--brand); }
.service-list__name { font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--ink); }
.service-list__meta { font-size: 12px; color: var(--fg-muted); margin-top: 2px; }
.service-list__price { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--ink); }

.day-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}
.day-carousel {
  display: flex;
  align-items: stretch;
  gap: 6px;
  margin-bottom: 12px;
}
.day-carousel__viewport {
  flex: 1;
  overflow: hidden;
  min-width: 0;
}
.day-carousel__track {
  display: flex;
  transition: transform 320ms var(--ease-out-soft, cubic-bezier(.22,.61,.36,1));
  will-change: transform;
}
.day-carousel__page {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.day-carousel__nav {
  flex: 0 0 36px;
  border: 1px solid var(--stone-200);
  border-radius: 10px;
  background: var(--cream-50);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-out-soft), opacity var(--dur-fast) var(--ease-out-soft);
}
.day-carousel__nav:hover { border-color: var(--stone-400); }
.day-carousel__nav:disabled { opacity: 0.35; cursor: not-allowed; }
.day-carousel__nav i { width: 16px; height: 16px; }
.day-pick {
  padding: 6px 4px;
  border: 1px solid var(--stone-200);
  border-radius: 10px;
  background: var(--cream-50);
  text-align: center;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out-soft);
}
.day-pick:hover { border-color: var(--stone-400); }
.day-pick.active { background: var(--ink); border-color: var(--ink); }
.day-pick.active .day-pick__dow,
.day-pick.active .day-pick__num { color: var(--cream-50); }
.day-pick__dow {
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.day-pick__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  margin-top: 1px;
}

.slots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 20px;
}
.slot {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  padding: 8px 0;
  border-radius: 12px;
  border: 1px solid var(--stone-200);
  background: var(--cream-50);
  cursor: pointer;
  text-align: center;
  transition: all var(--dur-fast) var(--ease-out-soft);
}
.slot:hover:not(.taken):not(.active) { border-color: var(--stone-400); }
.slot.active { background: var(--brand); color: #fff; border-color: var(--brand); box-shadow: var(--shadow-rouge); }
.slot.taken { color: var(--stone-400); text-decoration: line-through; cursor: not-allowed; background: transparent; }

.booking-panel__cta { width: 100%; justify-content: center; }
.booking-panel__fineprint {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--fg-muted);
  margin-top: 14px;
}
.booking-panel__fineprint i { width: 14px; height: 14px; }

/* =========================================================================
   Confirmation page
   ========================================================================= */

.confirm { padding: 96px 0; text-align: center; }
.confirm__sticker {
  width: 220px;
  margin: 0 auto 32px;
  animation: spin 12s linear infinite, confirm-pop 700ms cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes confirm-pop {
  0%   { opacity: 0; transform: scale(0.5) rotate(-90deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes confirm-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .confirm__sticker,
  .confirm__title,
  .confirm__sub,
  .confirm__layout { animation: none !important; }
}
.confirm__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 64px;
  letter-spacing: -0.025em;
  margin: 0;
  animation: confirm-fade-up 500ms cubic-bezier(.22,.61,.36,1) 200ms both;
}
.confirm__title em {
  font-family: var(--font-editorial);
  font-style: italic;
  color: var(--rouge-500);
  font-weight: 400;
}
.confirm__sub {
  font-size: 18px;
  color: var(--fg-muted);
  margin: 12px auto 32px;
  max-width: 50ch;
  animation: confirm-fade-up 500ms cubic-bezier(.22,.61,.36,1) 350ms both;
}
.confirm__card {
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
  padding: 44px 56px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--stone-200);
  background: var(--cream-50);
  text-align: left;
  line-height: 1.5;
}
.confirm__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
  border-bottom: 1px solid var(--stone-200);
}
.confirm__row:last-child { border: 0; }
.confirm__label {
  color: var(--fg-muted);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}
.confirm__val {
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}
.confirm__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 32px;
}

/* =========================================================================
   Utforsk (browse/search) page
   ========================================================================= */

.utforsk-head {
  background: var(--cream-50);
  border-bottom: 1px solid var(--stone-200);
  padding: 24px 0 0;
  position: sticky;
  top: 64px;
  z-index: 40;
}
.utforsk-head__title {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 16px;
}
.utforsk-head__title h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 40px;
  letter-spacing: -0.02em;
  margin: 0;
}
.utforsk-head__title h1 em {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 400;
  color: var(--rouge-500);
  padding: 0 0.04em;
}
.utforsk-head__count {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg-muted);
}
.utforsk-head__search { max-width: 720px; margin-bottom: 20px; }

.utforsk-filters {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding-bottom: 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.utforsk-filters::-webkit-scrollbar { display: none; }
.utforsk-filters__divider { width: 1px; height: 24px; background: var(--stone-200); margin: 0 4px; }

.filter-pill {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--stone-200);
  background: var(--cream-50);
  cursor: pointer;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  white-space: nowrap;
  transition: all var(--dur-fast) var(--ease-out-soft);
}
.filter-pill:hover { border-color: var(--stone-400); }
.filter-pill.active { background: var(--ink); color: var(--cream-50); border-color: var(--ink); }
.filter-pill i { width: 14px; height: 14px; }

.utforsk-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  gap: 16px;
  flex-wrap: wrap;
}
.utforsk-toolbar__active { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.active-pill {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  padding: 6px 8px 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--rouge-50);
  color: var(--rouge-700);
  border: 1px solid var(--rouge-100);
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.active-pill__remove {
  background: rgba(130, 16, 61, 0.15);
  border: 0;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--rouge-700);
  padding: 0;
}
.active-pill__remove i { width: 12px; height: 12px; }

.utforsk-toolbar__sort {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--fg-muted);
}
.utforsk-toolbar__sort select {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 4px 0;
}

.neighbourhood-rail {
  display: flex;
  gap: 10px;
  padding: 0 0 16px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--stone-100);
}
.neighbourhood-rail::-webkit-scrollbar { display: none; }
.nbh {
  flex-shrink: 0;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: var(--cream-50);
  border: 1px solid var(--stone-200);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out-soft);
}
.nbh.active { background: var(--rouge-500); color: white; border-color: var(--rouge-500); }
.nbh:hover:not(.active) { border-color: var(--stone-400); }

.utforsk-body { padding: 0 0 80px; }
.utforsk-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 32px;
  align-items: start;
}
@media (max-width: 1100px) {
  .utforsk-grid { grid-template-columns: 1fr; }
  .utforsk-map-wrap { display: none; }
}
.utforsk-results {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.utforsk-results-head {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--fg-muted);
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.utforsk-results-head strong { color: var(--ink); font-weight: 700; }
.utforsk-load {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  padding: 32px 0 8px;
}

/* Editorial tile */
.editorial-tile {
  grid-column: 1 / -1;
  background: var(--ink);
  color: var(--cream-50);
  border-radius: var(--radius-xl);
  padding: 36px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  border: 1px solid var(--ink);
}
.editorial-tile__txt { max-width: 540px; }
.editorial-tile__eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
  font-weight: 700;
  color: var(--cream-200);
  margin-bottom: 8px;
}
.editorial-tile__title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 8px;
}
.editorial-tile__title em {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 400;
  color: var(--rouge-200);
  padding: 0 0.04em;
}
.editorial-tile__sub {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--cream-200);
  margin: 0;
}
.editorial-tile__cta { background: var(--cream-50); color: var(--ink); }
.editorial-tile__cta:hover { background: white; }

/* Map */
.utforsk-map-wrap { position: sticky; top: 240px; }
.utforsk-map {
  position: relative;
  height: calc(100dvh - 280px);
  min-height: 540px;
  max-height: 760px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--stone-100);
  border: 1px solid var(--stone-200);
}
.utforsk-map svg { width: 100%; height: 100%; display: block; }
.utforsk-map__controls {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.utforsk-map__btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--stone-200);
  background: var(--cream-50);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.utforsk-map__btn:hover { background: var(--stone-100); }
.utforsk-map__btn i { width: 16px; height: 16px; }
.utforsk-map__legend {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: rgba(251, 246, 238, 0.95);
  backdrop-filter: blur(8px);
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--fg);
  display: inline-flex;
  gap: 10px;
  align-items: center;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--stone-200);
}
.utforsk-map__legend i { width: 14px; height: 14px; color: var(--rouge-500); }

/* =========================================================================
   Utforsk v2 — fylke/city filter-based layout
   ========================================================================= */

.utforsk-hero { padding: 56px 0 24px; }
.utforsk-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 6vw, 64px);
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 0 8px;
}
.utforsk-hero__title em {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 400;
  color: var(--rouge-500);
}

.filter-row {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 14px 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.filter-row::-webkit-scrollbar { display: none; }
.filter-row__label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  flex-shrink: 0;
  padding-right: 6px;
  min-width: 88px;
}

.pill {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--stone-200);
  background: var(--cream-50);
  cursor: pointer;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  white-space: nowrap;
  transition: all var(--dur-fast) var(--ease-out-soft);
  color: var(--ink);
}
.pill:hover { border-color: var(--stone-400); }
.pill.active { background: var(--ink); color: var(--cream-50); border-color: var(--ink); }
.pill i { width: 14px; height: 14px; }
.pill--accent { background: var(--rouge-50); border-color: var(--rouge-100); color: var(--rouge-700); }
.pill--accent:hover { border-color: var(--rouge-200); }
.pill--accent.active { background: var(--rouge-500); color: #fff; border-color: var(--rouge-500); }

.cities-row {
  background: var(--cream-50);
  border-radius: var(--radius-pill);
  padding: 6px 8px;
  margin-top: 4px;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  border: 1px solid var(--stone-100);
}
.cities-row::-webkit-scrollbar { display: none; }
.cities-row .pill { background: transparent; border-color: transparent; padding: 7px 14px; }
.cities-row .pill:hover { background: var(--stone-100); }
.cities-row .pill.active { background: var(--ink); color: var(--cream-50); }

.filter-divider { height: 1px; background: var(--stone-200); margin: 12px 0 0; }

.utforsk-results--3col {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 1100px) { .utforsk-results--3col { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .utforsk-results--3col { grid-template-columns: 1fr; } }

/* =========================================================================
   Salon gallery (Airbnb-style)
   ========================================================================= */

.salon-back-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.salon-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-muted);
  text-decoration: none;
  padding: 16px 0 12px;
  transition: color var(--dur-fast);
}
.salon-back-link:hover { color: var(--ink); }
.salon-back-link i { width: 16px; height: 16px; }

.salon-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--stone-200);
  background: var(--cream-50);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast);
  min-height: 36px;
}
.salon-share-btn:hover { border-color: var(--stone-400); background: var(--cream-100); }
.salon-share-btn i { width: 16px; height: 16px; }
@media (max-width: 720px) {
  .salon-share-btn { min-height: 40px; }
}

.salon-gallery {
  position: relative;
  display: grid;
  gap: 8px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: 32px;
  aspect-ratio: 16/9;
  background: var(--cream-100);
}
.salon-gallery[data-count="0"] { display: none; }
.salon-gallery[data-count="1"] { grid-template-columns: 1fr; }
.salon-gallery[data-count="2"] { grid-template-columns: 1fr 1fr; }
.salon-gallery[data-count="3"] {
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.salon-gallery[data-count="3"] .salon-gallery__tile:nth-child(1) { grid-row: 1 / 3; }
.salon-gallery[data-count="4"],
.salon-gallery[data-count="5"] {
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.salon-gallery[data-count="4"] .salon-gallery__tile:nth-child(1),
.salon-gallery[data-count="5"] .salon-gallery__tile:nth-child(1) { grid-row: 1 / 3; }

.salon-gallery__tile {
  border: 0;
  padding: 0;
  cursor: pointer;
  background-color: var(--cream-200, #ece4d8);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: filter var(--dur-fast);
  position: relative;
  overflow: hidden;
}
.salon-gallery__tile:hover { filter: brightness(0.94); }
.salon-gallery__tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.salon-gallery__show-all {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  background: var(--cream-50);
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(40, 30, 20, 0.18);
  transition: all var(--dur-fast);
}
.salon-gallery__show-all:hover { background: var(--ink); color: var(--cream-50); }
.salon-gallery__show-all i { width: 14px; height: 14px; }

@media (max-width: 720px) {
  .salon-gallery {
    aspect-ratio: 4/3;
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
  }
  .salon-gallery .salon-gallery__tile:nth-child(n+2) { display: none; }
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(20, 15, 10, 0.92);
  /* Above .top-nav (z-index 1100) so the nav links can't be reached behind
     the dimmed backdrop — otherwise the logout icon sits in the same area
     as the lightbox X-close button. */
  z-index: 2000;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 20px;
  gap: 12px;
}
.lightbox__topbar { display: flex; justify-content: space-between; align-items: center; color: var(--cream-50); font-family: var(--font-body); font-size: 14px; }
.lightbox__counter { font-weight: 600; }
.lightbox__close { width: 40px; height: 40px; border-radius: var(--radius-pill); border: 1px solid rgba(251, 246, 238, 0.25); background: transparent; color: var(--cream-50); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.lightbox__close:hover { background: rgba(251, 246, 238, 0.12); }
.lightbox__close i { width: 18px; height: 18px; }
.lightbox__stage { display: grid; place-items: center; gap: 14px; min-height: 0; }
.lightbox__photo { width: min(1100px, 92vw); aspect-ratio: 4/3; max-height: 70vh; border-radius: 18px; }
.lightbox__caption { color: var(--cream-50); font-family: var(--font-body); font-size: 14px; opacity: 0.85; }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: var(--radius-pill); border: 0; background: var(--cream-50); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); }
.lightbox__nav:hover { transform: translateY(-50%) scale(1.05); }
.lightbox__nav i { width: 22px; height: 22px; }
.lightbox__nav--prev { left: 24px; }
.lightbox__nav--next { right: 24px; }
.lightbox__thumbs { display: flex; gap: 8px; justify-content: center; padding: 4px; overflow-x: auto; }
.lightbox__thumb { width: 64px; height: 48px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; padding: 0; opacity: 0.55; transition: opacity var(--dur-fast); flex-shrink: 0; }
.lightbox__thumb:hover { opacity: 0.85; }
.lightbox__thumb.active { opacity: 1; border-color: var(--cream-50); }

/* =========================================================================
   All services list (categorized)
   ========================================================================= */

.salon-detail__addr {
  font-family: var(--font-body);
  color: var(--fg-muted);
  font-size: 14px;
  margin: 0 0 24px;
}
.salon-detail__addr a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.salon-detail__addr a:hover { color: var(--rouge-500); }

.svc-cat { margin-top: 16px; }
.svc-cat__head {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
  padding: 0 4px 8px;
}
.all-services { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--stone-200); }
.all-services__item {
  display: grid;
  grid-template-columns: 22px 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 14px 6px;
  border-bottom: 1px solid var(--stone-200);
  cursor: pointer;
  transition: background var(--dur-fast);
}
.all-services__item:hover { background: var(--stone-100); }
.all-services__radio {
  width: 18px;
  height: 18px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--stone-300);
  transition: all var(--dur-fast);
  position: relative;
}
.all-services__item.active { background: var(--rouge-50); }
.all-services__item.active .all-services__radio { border-color: var(--rouge-500); background: var(--rouge-500); }
.all-services__item.active .all-services__radio::after { content: ""; position: absolute; inset: 3px; border-radius: var(--radius-pill); background: white; }
.all-services__name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.all-services__badge {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: var(--radius-pill);
  background: var(--rouge-50);
  color: var(--rouge-700);
  border: 1px solid var(--rouge-100);
}
.all-services__meta { font-family: var(--font-body); font-size: 13px; color: var(--fg-muted); margin-top: 2px; }
.all-services__price { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--ink); white-space: nowrap; }
.all-services__cta { display: none; }

@keyframes svc-fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.service-list__item--added { animation: svc-fade-in 0.28s var(--ease-out-soft) both; }

/* =========================================================================
   Reviews
   ========================================================================= */

.reviews { display: grid; gap: 12px; }
.review { border: 1px solid var(--stone-200); border-radius: 18px; padding: 18px 20px; background: var(--cream-50); }
.review__head { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; }
.review__avatar { width: 36px; height: 36px; border-radius: var(--radius-pill); background: var(--rouge-100); color: var(--rouge-500); font-family: var(--font-display); font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.review__name { font-family: var(--font-body); font-weight: 700; font-size: 14px; color: var(--ink); }
.review__meta { font-family: var(--font-body); font-size: 12px; color: var(--fg-muted); }
.review__stars { display: inline-flex; gap: 1px; }
.review__text { font-family: var(--font-body); font-size: 14.5px; line-height: 1.55; color: var(--ink); margin: 10px 0 0; }

/* =========================================================================
   Vipps auth
   ========================================================================= */

.vipps-auth { min-height: 100dvh; padding: 48px 20px; display: grid; place-items: start center; background: linear-gradient(180deg, var(--cream-100) 0%, var(--cream-50) 100%); }
.vipps-auth__shell { width: 100%; max-width: 460px; background: var(--cream-50); border: 1px solid var(--stone-200); border-radius: var(--radius-xl); padding: 32px; position: relative; box-shadow: 0 24px 60px rgba(40, 30, 20, 0.08); }
.vipps-auth__close { position: absolute; top: 18px; right: 18px; width: 36px; height: 36px; border-radius: var(--radius-pill); border: 1px solid var(--stone-200); background: var(--cream-50); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.vipps-auth__close i { width: 16px; height: 16px; }
.vipps-auth__brand { display: flex; align-items: baseline; gap: 14px; margin-bottom: 24px; }
.vipps-auth__logo { font-family: var(--font-display); font-weight: 900; font-size: 28px; color: #FF5B24; letter-spacing: -0.02em; }
.vipps-auth__tag { font-family: var(--font-body); color: var(--fg-muted); font-size: 14px; }
.vipps-auth__order { background: var(--cream-100); border-radius: 16px; padding: 14px 18px; margin-bottom: 24px; font-family: var(--font-body); }
.vipps-auth__order-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; color: var(--fg-muted); }
.vipps-auth__order-row strong { color: var(--ink); font-weight: 600; }
.vipps-auth__order-row--total { border-top: 1px solid var(--stone-200); margin-top: 6px; padding-top: 10px; }
.vipps-auth__order-row--total strong { font-size: 17px; }
.vipps-auth__label { display: block; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 8px; }
.vipps-auth__field { display: flex; align-items: center; border: 1.5px solid var(--stone-300); border-radius: var(--radius-md); padding: 0 16px; background: var(--cream-50); transition: all var(--dur-fast); }
.vipps-auth__field:focus-within { border-color: #FF5B24; box-shadow: 0 0 0 4px rgba(255, 91, 36, 0.12); }
.vipps-auth__prefix { font-family: var(--font-body); font-weight: 600; color: var(--fg-muted); font-size: 16px; padding-right: 10px; border-right: 1px solid var(--stone-200); margin-right: 10px; }
.vipps-auth__input { flex: 1; border: 0; background: transparent; padding: 16px 0; font-family: var(--font-body); font-size: 18px; font-weight: 600; letter-spacing: 0.04em; outline: none; color: var(--ink); }
.vipps-auth__cta { width: 100%; margin-top: 16px; padding: 16px; border: 0; border-radius: var(--radius-md); background: #FF5B24; color: white; font-family: var(--font-body); font-weight: 700; font-size: 16px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background var(--dur-fast); }
.vipps-auth__cta:hover { background: #E64C18; }
.vipps-auth__cta i { width: 16px; height: 16px; }
.vipps-auth__fineprint { font-family: var(--font-body); font-size: 12px; color: var(--fg-muted); margin: 14px 0 0; line-height: 1.5; }
.vipps-auth__waiting { text-align: center; padding: 8px 0; }
.vipps-auth__phone { width: 160px; height: 220px; margin: 0 auto 20px; border-radius: 22px; background: #1a1a1a; padding: 8px; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18); position: relative; }
.vipps-auth__phone::before { content: ""; position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 40px; height: 5px; background: #444; border-radius: var(--radius-pill); }
.vipps-auth__phone-screen { width: 100%; height: 100%; border-radius: 16px; background: #FF5B24; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 12px 14px; gap: 6px; color: white; font-family: var(--font-body); }
.vipps-auth__phone-logo { font-family: var(--font-display); font-weight: 900; font-size: 14px; letter-spacing: -0.02em; opacity: 0.85; }
.vipps-auth__phone-prompt { font-size: 11px; opacity: 0.9; margin-top: 4px; }
.vipps-auth__phone-amount { font-family: var(--font-display); font-weight: 700; font-size: 26px; }
.vipps-auth__phone-merchant { font-size: 10px; opacity: 0.85; }
.vipps-auth__phone-slider { margin-top: 14px; width: 100%; height: 28px; background: rgba(255, 255, 255, 0.18); border-radius: var(--radius-pill); position: relative; }
.vipps-auth__phone-slider-thumb { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: var(--radius-pill); background: white; animation: vipps-slide 1.6s ease-in-out infinite; }
@keyframes vipps-slide { 0%, 100% { left: 3px; } 50% { left: calc(100% - 25px); } }
.vipps-auth__waiting-title { font-family: var(--font-display); font-size: 22px; margin: 0 0 4px; }
.vipps-auth__waiting-sub { font-family: var(--font-body); color: var(--fg-muted); font-size: 14px; margin: 0; }
.vipps-auth__pulse { display: inline-flex; gap: 6px; margin-top: 16px; }
.vipps-auth__pulse span { width: 8px; height: 8px; border-radius: var(--radius-pill); background: #FF5B24; animation: vipps-pulse 1.2s ease-in-out infinite; }
.vipps-auth__pulse span:nth-child(2) { animation-delay: 0.15s; }
.vipps-auth__pulse span:nth-child(3) { animation-delay: 0.3s; }
@keyframes vipps-pulse { 0%, 100% { opacity: 0.25; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1); } }

/* =========================================================================
   Confirmation v2 — two-column with user info + map
   ========================================================================= */

.confirm__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 920px;
  margin: 0 auto;
  text-align: left;
  animation: confirm-fade-up 600ms cubic-bezier(.22,.61,.36,1) 500ms both;
}
@media (max-width: 820px) { .confirm__layout { grid-template-columns: 1fr; } }
.confirm__card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.confirm__card-eyebrow { font-family: var(--font-body); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-muted); }
.confirm__paid { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-body); font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: var(--radius-pill); background: rgba(255, 91, 36, 0.1); color: #FF5B24; }
.confirm__paid i { width: 12px; height: 12px; }
/* Each row already has its own bottom border, so an extra hairline here
   shows up as a double line. Keep the spacing, drop the second line. */
.confirm__divider { height: 0; margin: 16px 0; }
.confirm__user { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; margin-top: 12px; }
.confirm__avatar { width: 44px; height: 44px; border-radius: var(--radius-pill); background: var(--rouge-100); color: var(--rouge-500); font-family: var(--font-display); font-weight: 700; font-size: 18px; display: flex; align-items: center; justify-content: center; }
.confirm__user-name { font-family: var(--font-body); font-weight: 700; font-size: 15px; }
.confirm__user-meta { font-family: var(--font-body); font-size: 12px; color: var(--fg-muted); margin-top: 2px; }
.confirm__badge { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-body); font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: var(--radius-pill); background: var(--cream-100); color: var(--ink); }
.confirm__badge i { width: 11px; height: 11px; color: var(--rouge-500); }
.confirm__location { background: var(--cream-50); border: 1px solid var(--stone-200); border-radius: var(--radius-lg); padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.confirm__location-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.confirm__location-name { font-family: var(--font-display); font-weight: 700; font-size: 22px; margin-top: 6px; }
.confirm__location-addr { font-family: var(--font-body); color: var(--fg-muted); font-size: 14px; margin-top: 2px; }
.confirm__location-foot { display: flex; gap: 18px; flex-wrap: wrap; font-family: var(--font-body); font-size: 13px; color: var(--fg-muted); }
.confirm__location-foot span { display: inline-flex; align-items: center; gap: 6px; }
.confirm__location-foot i { width: 14px; height: 14px; color: var(--rouge-500); }

/* Studio map */
.studio-map { border-radius: 16px; overflow: hidden; }
.studio-map__viewport { position: relative; aspect-ratio: 16/10; background: var(--stone-100); overflow: hidden; }
.studio-map__svg { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 50% 50%; transition: transform 0.3s var(--ease-out-soft); }
.studio-map__pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%); border: 0; background: transparent; cursor: pointer; padding: 0; color: var(--rouge-500); width: 36px; height: 44px; }
.studio-map__pin-halo { position: absolute; inset: -16px; border-radius: var(--radius-pill); background: var(--rouge-500); opacity: 0.14; animation: pin-pulse 2s ease-out infinite; }
@keyframes pin-pulse { 0% { opacity: 0.25; transform: scale(0.7); } 100% { opacity: 0; transform: scale(1.4); } }
.studio-map__pin-mark { position: relative; display: inline-flex; filter: drop-shadow(0 4px 8px rgba(130, 16, 61, 0.35)); transition: transform var(--dur-fast); }
.studio-map__pin:hover .studio-map__pin-mark { transform: scale(1.15); }
.studio-map__callout { position: absolute; left: 50%; top: 50%; transform: translate(-50%, calc(-100% - 56px)); background: var(--cream-50); border: 1px solid var(--stone-200); border-radius: var(--radius-md); padding: 12px 14px; min-width: 220px; box-shadow: 0 12px 32px rgba(40, 30, 20, 0.18); z-index: 3; }
.studio-map__callout-name { font-family: var(--font-display); font-weight: 700; font-size: 16px; }
.studio-map__callout-addr { font-family: var(--font-body); font-size: 13px; color: var(--fg-muted); margin: 2px 0 8px; }
.studio-map__callout-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-weight: 600; font-size: 13px; color: var(--ink); padding: 6px 10px; border-radius: var(--radius-pill); background: var(--cream-100); }
.studio-map__callout-link:hover { background: var(--ink); color: var(--cream-50); }
.studio-map__callout-link i { width: 13px; height: 13px; }
.studio-map__callout-arrow { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%) rotate(45deg); width: 14px; height: 14px; background: var(--cream-50); border-right: 1px solid var(--stone-200); border-bottom: 1px solid var(--stone-200); }
.studio-map__zoom { position: absolute; right: 12px; top: 12px; display: flex; flex-direction: column; gap: 4px; background: var(--cream-50); border: 1px solid var(--stone-200); border-radius: var(--radius-sm); overflow: hidden; box-shadow: 0 4px 12px rgba(40, 30, 20, 0.1); z-index: 2; }
.studio-map__zoom button { width: 32px; height: 32px; border: 0; background: transparent; cursor: pointer; font-family: var(--font-body); font-weight: 700; font-size: 18px; color: var(--ink); }
.studio-map__zoom button:hover { background: var(--cream-100); }
.studio-map__zoom button:first-child { border-bottom: 1px solid var(--stone-200); }

/* =========================================================================
   Homepage-only sections (index.html)
   Prefix: .home-*   — keep scoped to avoid bleed into other pages.
   ========================================================================= */

.home-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding: 8px 0; }
@media (max-width: 760px) { .home-steps { grid-template-columns: 1fr; gap: 28px; } }
.home-step { display: flex; flex-direction: column; gap: 12px; }
.home-step__num {
  width: 44px; height: 44px; border-radius: 999px;
  background: var(--rouge-50); color: var(--rouge-600);
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--rouge-100);
}
.home-step__icon { color: var(--rouge-500); }
.home-step__icon i { width: 22px; height: 22px; }
.home-step__title { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.01em; color: var(--ink); }
.home-step__body { font-family: var(--font-body); font-size: 15px; color: var(--fg-muted); line-height: 1.55; max-width: 36ch; }

.home-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 760px) { .home-values { grid-template-columns: 1fr; } }
.home-value {
  background: var(--cream-50);
  border: 1px solid var(--stone-200);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex; flex-direction: column; gap: 10px;
}
.home-value__icon {
  width: 40px; height: 40px; border-radius: 999px;
  background: var(--rouge-50); color: var(--rouge-600);
  display: inline-flex; align-items: center; justify-content: center;
}
.home-value__icon i { width: 18px; height: 18px; }
.home-value__title { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--ink); }
.home-value__body { font-family: var(--font-body); font-size: 14px; color: var(--fg-muted); line-height: 1.5; }

.home-owner-cta {
  background: linear-gradient(135deg, var(--rouge-50) 0%, var(--rouge-100) 100%);
  border: 1px solid var(--rouge-100);
  border-radius: var(--radius-2xl);
  padding: 64px 40px;
  display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center;
}
@media (max-width: 760px) {
  .home-owner-cta { padding: 40px 24px; }
}
.home-owner-cta__text { max-width: 820px; }
.home-owner-cta__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.015em; color: var(--ink); line-height: 1.15; }
.home-owner-cta__title em { font-style: italic; color: var(--rouge-700); }
.home-owner-cta__sub { font-family: var(--font-body); font-size: 15px; color: var(--fg-muted); margin-top: 24px; line-height: 1.5; }
.home-owner-cta__cta { display: inline-flex; }

.home-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--stone-200); border-bottom: 1px solid var(--stone-200); padding: 28px 0; }
@media (max-width: 560px) { .home-stats { grid-template-columns: 1fr; gap: 16px; padding: 20px 0; } }
.home-stat { text-align: center; padding: 4px 12px; }
.home-stat + .home-stat { border-left: 1px solid var(--stone-200); }
@media (max-width: 560px) { .home-stat + .home-stat { border-left: 0; } }
.home-stat__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 3vw, 36px); color: var(--ink); letter-spacing: -0.02em; }
.home-stat__label { font-family: var(--font-body); font-size: 13px; color: var(--fg-muted); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 4px; }

/* =========================================================================
   Top-nav user pill — compact "K Role v" chip with a dropdown menu.
   Rendered by assets/nav.js on every public page when the user is signed in.
   ========================================================================= */
.user-pill__wrap { position: relative; }
.user-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 5px;
  background: var(--cream-50);
  border: 1px solid var(--stone-200);
  border-radius: var(--radius-pill);
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out-soft);
}
.user-pill:hover { border-color: var(--stone-400); }
.user-pill[aria-expanded="true"] { border-color: var(--stone-400); }
.user-pill__avatar {
  width: 22px; height: 22px;
  border-radius: var(--radius-pill);
  background: var(--rouge-500); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 11px;
}
.user-pill__text {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.user-pill__name { display: none; }
.user-pill__role { font-size: 13px; color: var(--ink); display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.user-pill__role i { width: 14px; height: 14px; }
.user-pill__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  background: var(--cream-50);
  border: 1px solid var(--stone-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 6px;
  z-index: 50;
  display: none;
}
.user-pill__menu.is-open { display: block; }
.user-pill__menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  text-align: left;
}
.user-pill__menu-item:hover,
.user-pill__menu-item:focus-visible { background: var(--cream-100); outline: none; }
.user-pill__menu-item i { width: 16px; height: 16px; color: var(--fg-muted); }
.user-pill__menu-divider { height: 1px; background: var(--stone-200); margin: 6px 4px; }
.user-pill__menu-badge {
  margin-left: auto;
  min-width: 22px;
  padding: 0 8px;
  height: 20px;
  border-radius: 999px;
  background: var(--rouge-500);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* [hidden] overrider display:inline-flex via attributtselektor — uten
   denne ble badge'n vist som en rød prikk selv om JS satte hidden=true. */
.user-pill__menu-badge[hidden] { display: none; }
.user-pill__alertDot {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--rouge-500);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px var(--cream-50);
}
.user-pill { position: relative; }

/* =========================================================================
   Homepage: "Hvorfor nailed" — editorial promise row
   Replaces the older .home-values card grid on index.html.
   Layout: two columns on desktop (lede + list), single column on mobile.
   ========================================================================= */

/* Ny full-bredde feature-grid. Erstatter den tidligere to-kolonne-
   layouten med editorial title + liste. */
.home-why {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.home-why__head { text-align: center; max-width: 640px; margin: 0 auto; }
.home-why__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 14px 0 0;
}
.home-why__title em {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 400;
  color: var(--rouge-700);
}
.home-why__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 880px) {
  .home-why__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .home-why__grid { grid-template-columns: 1fr; }
}
.home-why__card {
  background: var(--cream-50);
  border: 1px solid var(--stone-200);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
  transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.home-why__card:hover {
  border-color: var(--rouge-200);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(238, 63, 126, 0.08);
}
.home-why__icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: var(--rouge-50);
  color: var(--rouge-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.home-why__icon i { width: 22px; height: 22px; }
.home-why__h {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 8px;
}
.home-why__p {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-muted);
  margin: 0;
}

.home-promise {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  padding: 16px 0 8px;
}
@media (max-width: 880px) {
  .home-promise { grid-template-columns: 1fr; gap: 32px; }
}
.home-promise__lede { max-width: none; }
.home-promise__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(56px, 7.5vw, 104px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0;
  white-space: nowrap;
}
.home-promise__title em {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 400;
  color: var(--rouge-700);
}
/* Tre-linjes-skulptur: «Bygget for» er medium, «norske salonger»
   (italic rouge) er hovedfokus i full størrelse, «og kundene deres»
   er minst — gir en descending visuell hierarki. Margin mellom hver
   linje gir pusterom så skalaen blir tydelig. */
.home-promise__line { display: block; }
.home-promise__title .home-promise__line + .home-promise__line { margin-top: 0.22em; }
.home-promise__title .home-promise__line:first-child { font-size: 0.7em; }
.home-promise__title .home-promise__line:last-child { font-size: 0.55em; }
.home-promise__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.home-promise__item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  align-items: start;
  padding: 22px 0;
  border-top: 1px solid var(--stone-200);
}
.home-promise__item:last-child { border-bottom: 1px solid var(--stone-200); }
.home-promise__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: var(--rouge-50);
  color: var(--rouge-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.home-promise__icon i { width: 20px; height: 20px; }
.home-promise__h {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.home-promise__p {
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--fg-muted);
  line-height: 1.55;
  margin: 4px 0 0;
  max-width: 52ch;
}

/* =========================================================================
   Homepage: "Salonger i din by" — city quick-filter chips
   Each chip links to /utforsk.html?city=<canonical city name>.
   No counts shown — we don't want to invent numbers we can't verify.
   ========================================================================= */

.home-cities {
  background: var(--cream-50);
  border: 1px solid var(--stone-200);
  border-radius: var(--radius-2xl);
  padding: 40px;
}
@media (max-width: 760px) {
  .home-cities { padding: 28px 22px; border-radius: var(--radius-xl); }
}
.home-cities__head { margin-bottom: 22px; }
.home-cities__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 2.8vw, 34px);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
  margin: 8px 0 0;
}
.home-cities__title em {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 400;
  color: var(--rouge-700);
}
.home-cities__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.home-city-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: var(--radius-pill);
  background: var(--cream-100);
  border: 1px solid var(--stone-200);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: transform var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.home-city-chip:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream-50);
  transform: translateY(-1px);
}
.home-city-chip i { width: 14px; height: 14px; opacity: 0.7; }
.home-city-chip:hover i { opacity: 1; }
.home-city-chip--all {
  background: var(--rouge-500);
  border-color: var(--rouge-500);
  color: var(--cream-50);
}
.home-city-chip--all:hover {
  background: var(--rouge-600);
  border-color: var(--rouge-600);
  color: var(--cream-50);
}

/* =========================================================================
   Homepage: pre-footer mini-CTA
   Sits right above the footer to give a final push to /utforsk.html.
   ========================================================================= */

.home-prefooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 44px 48px;
  background: var(--ink);
  color: var(--cream-50);
  border-radius: var(--radius-2xl);
  flex-wrap: wrap;
}
@media (max-width: 760px) {
  .home-prefooter { padding: 32px 24px; gap: 20px; text-align: center; justify-content: center; }
}
.home-prefooter__kicker {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rouge-200);
  margin-bottom: 10px;
}
.home-prefooter__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--cream-50);
  max-width: 44ch;
}
.home-prefooter__title em {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 400;
  color: var(--rouge-300);
}
.home-prefooter__cta { flex-shrink: 0; }

/* =========================================================================
   Bottom navigation (mobil < 720px)
   Auto-injisert av /assets/bottom-nav.js på offentlige sider.
   Sider med .has-bottom-nav skjuler top-nav-lenker så kun logoen vises på mobil.
   ========================================================================= */

.bottom-nav {
  display: none;
}

@media (max-width: 720px) {
  .bottom-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1200;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: saturate(150%) blur(12px);
    -webkit-backdrop-filter: saturate(150%) blur(12px);
    border-top: 1px solid var(--stone-200);
    padding-bottom: env(safe-area-inset-bottom);
    justify-content: space-around;
  }
  .bottom-nav__item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 4px 10px;
    color: var(--stone-500);
    text-decoration: none;
    font-family: var(--font-body);
    min-height: 56px;
    transition: color var(--dur-fast);
    -webkit-tap-highlight-color: transparent;
  }
  .bottom-nav__item--active { color: var(--rouge-500); }
  .bottom-nav__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
  }
  .bottom-nav__icon svg { width: 22px; height: 22px; }
  .bottom-nav__label {
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1;
  }
  .bottom-nav__badge {
    position: absolute;
    top: -3px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--rouge-500);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
  .bottom-nav__badge[hidden] { display: none; }
  /* Dot-variant uten tall — for "noe krever oppmerksomhet" på profil-item */
  .bottom-nav__badge--dot {
    min-width: 9px;
    width: 9px;
    height: 9px;
    padding: 0;
    border-radius: 50%;
    top: 0;
    right: -2px;
    font-size: 0;
  }

  /* Skjul top-nav-lenker og høyresidens actions på mobil — kun logoen synlig.
     Footer-knappen «Logg inn» og hjerte-favoritter flytter inn i bottom-nav. */
  /* Skjul top-nav-lenker og høyresidens actions globalt på mobil — kun
     logoen synlig. Bottom-nav (når den finnes) tar over navigasjonen, og på
     fokuserte sider (login, confirmation, etc) er det også OK å bare ha logo. */
  .top-nav__links,
  .top-nav__actions { display: none; }

  /* Plass for bottom-nav-en så footer/innhold ikke ligger under den.
     56px nav + safe-area bunn. */
  .has-bottom-nav { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
}

/* =========================================================================
   Bottom-nav profil-sheet (bottom sheet som glir opp ved trykk på Min profil)
   Injiseres av /assets/bottom-nav.js. Animasjon via transform + opacity.
   ========================================================================= */
.bn-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
  z-index: 1300;
}
.bn-sheet-backdrop--open { opacity: 1; pointer-events: auto; }
.bn-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--cream-50, #FBF6EE);
  border-radius: 18px 18px 0 0;
  padding: 8px 20px calc(24px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.12);
  transform: translateY(110%);
  transition: transform 260ms cubic-bezier(.2, .8, .2, 1);
  z-index: 1301;
  max-width: 520px;
  margin: 0 auto;
}
.bn-sheet--open { transform: translateY(0); }
.bn-sheet__grabber {
  width: 40px;
  height: 4px;
  background: var(--stone-200);
  border-radius: 999px;
  margin: 0 auto 14px;
}
.bn-sheet__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 4px 16px;
  border-bottom: 1px solid var(--stone-200);
  margin-bottom: 12px;
}
.bn-sheet__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--rouge-50);
  color: var(--rouge-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  flex-shrink: 0;
}
.bn-sheet__info { min-width: 0; flex: 1; }
.bn-sheet__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bn-sheet__email {
  font-size: 13px;
  color: var(--fg-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bn-sheet__actions { display: flex; flex-direction: column; gap: 4px; }
.bn-sheet__action {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 8px;
  border: none;
  background: transparent;
  text-align: left;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  border-radius: 10px;
  cursor: pointer;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
}
.bn-sheet__action:hover,
.bn-sheet__action:focus-visible { background: var(--stone-100); outline: none; }
.bn-sheet__action i { width: 20px; height: 20px; color: var(--stone-500); flex-shrink: 0; }
.bn-sheet__action--danger { color: var(--danger-500); }
.bn-sheet__action--danger i { color: var(--danger-500); }
.bn-sheet[hidden] { display: block; visibility: hidden; pointer-events: none; }

/* =========================================================================
   Mobil-fix: iOS-input-zoom + touch-targets
   - font-size 16 px på alle inputs/textarea/select forhindrer auto-zoom på iOS Safari
   - touch-targets min 44×44 px iht. Apple/WCAG-anbefaling
   ========================================================================= */

@media (max-width: 720px) {
  /* Inputs: 16 px minimum. Spesifikke overrider (som hero-search) tar fra denne. */
  input,
  textarea,
  select {
    font-size: 16px;
  }
  /* Overrid kjente undermål-inputs eksplisitt (samme spesifisitet) */
  .search-bar__field input { font-size: 16px; }

  /* Touch-targets — bumpes til 44×44 */
  .btn-icon { width: 44px; height: 44px; }
  .footer__social { width: 44px; height: 44px; }
  .service-card__heart { width: 44px; height: 44px; }
  .service-card__heart i { width: 18px; height: 18px; }

  /* Chips og filter-piller: høyere taphøyde uten å brekke layout */
  .chip,
  .filter-pill {
    min-height: 40px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* Bottom-nav-items har allerede min-height 56 — sjekket */
}

/* =========================================================================
   Mobil booking-flow (salon.html)
   Bumper tap-targets og rydder padding for tomme-vennlig booking.
   ========================================================================= */

@media (max-width: 720px) {
  .booking-panel {
    padding: 20px;
    border-radius: var(--radius-lg);
  }
  .booking-panel__header h3 { font-size: 18px; }

  /* Service-kort: full bredde, romslig */
  .service-list__item { padding: 14px 16px; min-height: 56px; }
  .service-list__name { font-size: 15px; }

  /* Dag-velger: flat ut sidene til én lang scrollbar rad så bruker ser ~5
     dager med en «peek» av neste. Skjul nav-arrows. */
  .day-carousel { gap: 0; }
  .day-carousel__nav { display: none; }
  .day-carousel__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    /* Fade-out på høyre kant så det er tydelig at det er mer å scrolle til */
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  }
  .day-carousel__viewport::-webkit-scrollbar { display: none; }
  .day-carousel__track {
    transform: none !important;
    transition: none;
    display: flex;
    gap: 8px;
  }
  /* Hver side blir en bred grid; gi pages auto-bredde så de flyter i scroll. */
  .day-carousel__page {
    flex: 0 0 auto;
    width: max-content;
    scroll-snap-align: start;
  }
  .day-carousel__page > .day-pick { width: 60px; }
  .day-pick {
    padding: 10px 6px;
    min-height: 60px;
    border-radius: 12px;
    scroll-snap-align: start;
  }
  .day-pick__num { font-size: 18px; }
  .day-pick__dow { font-size: 11px; }

  /* Slot-velger som horisontal carousel — én rad slots, swipe for å se mer.
     Fade-out på høyre kant så det er tydelig at den scroller. */
  .slots {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding-bottom: 4px;
    grid-template-columns: none;
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  }
  .slots::-webkit-scrollbar { display: none; }
  .slot {
    flex: 0 0 auto;
    min-width: 78px;
    min-height: 44px;
    font-size: 14px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink); /* match desktop */
  }

  /* Velg behandler — også carousel på mobil. */
  .stylist-picker {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    margin-top: 12px;
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  }
  .stylist-picker::-webkit-scrollbar { display: none; }
  .stylist-chip { flex-shrink: 0; min-height: 36px; }
}

/* =========================================================================
   Mobil-tastatur: skjul bottom-nav når tastatur er åpent, så sticky UI
   ikke dekker input. CSS-variabel --kb-inset settes av /assets/keyboard-inset.js
   ========================================================================= */

@media (max-width: 720px) {
  body.has-kb .bottom-nav { display: none; }
  /* Når tastaturet er åpent skal ikke body-padding kompensere for bottom-nav. */
  body.has-kb.has-bottom-nav { padding-bottom: 0; }
}

/* =========================================================================
   Skeleton loading placeholder for salongkort.
   Aktiveres ved å sette .service-card--skeleton på .service-card.
   ========================================================================= */

.service-card--skeleton {
  pointer-events: none;
}
.service-card--skeleton .service-card__photo {
  background: linear-gradient(110deg, var(--stone-100) 8%, var(--cream-100) 18%, var(--stone-100) 33%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.6s ease-in-out infinite;
}
.service-card--skeleton .sk-bar {
  background: linear-gradient(110deg, var(--stone-100) 8%, var(--cream-100) 18%, var(--stone-100) 33%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.6s ease-in-out infinite;
  border-radius: 6px;
  height: 12px;
}
.service-card--skeleton .sk-bar--pill { width: 60px; height: 22px; border-radius: 999px; margin-bottom: 8px; }
.service-card--skeleton .sk-bar--title { width: 70%; height: 18px; margin-bottom: 10px; }
.service-card--skeleton .sk-bar--meta  { width: 55%; height: 12px; }

@keyframes sk-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* =========================================================================
   Hero-search mobil: stack feltene vertikalt og full-bredde CTA.
   Desktop beholder horisontal pill-form. Standard pill med horisontal layout
   er for trang på iPhone — feltene blir 130 px hver med teksten kuttet.
   ========================================================================= */

@media (max-width: 720px) {
  /* Stacked + kompakt: én linje per felt (ikon + input), full-bredde Søk-knapp under.
     Tar ~140 px totalt i stedet for 209 px. Ingen «Hva»/«Hvor»-labels — placeholder
     fungerer som label. */
  .search-bar {
    flex-direction: column;
    border-radius: var(--radius-xl);
    padding: 5px;
    align-items: stretch;
    gap: 2px;
  }
  .search-bar__field {
    padding: 10px 16px;
    border-radius: var(--radius-lg);
    gap: 12px;
    min-height: 44px;
  }
  /* Skjul label-tekst på mobil — placeholderen i input er nok */
  .search-bar__label { display: none; }
  /* Større input-font så placeholder leses godt */
  .search-bar__field input { font-size: 16px; font-weight: 500; }
  .search-bar__divider {
    width: auto;
    height: 1px;
    margin: 0 14px;
  }
  .search-bar__cta {
    width: 100%;
    height: 48px;
    border-radius: var(--radius-lg);
    margin-top: 3px;
    gap: 8px;
  }
  /* Vis «Søk»-label ved siden av ikonet på mobil */
  .search-bar__cta::after {
    content: "Søk";
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 16px;
    color: inherit;
  }
}

/* =========================================================================
   Install-banner (PWA «Legg til på startskjerm»-prompt på Android Chrome)
   ========================================================================= */

.install-banner {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(56px + env(safe-area-inset-bottom) + 12px); /* over bottom-nav */
  z-index: 1300;
  background: var(--ink);
  color: var(--cream-50);
  border-radius: var(--radius-lg);
  padding: 14px 14px 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 12px 32px rgba(27, 18, 24, 0.28);
  animation: install-up .35s cubic-bezier(.22,.61,.36,1);
}
.install-banner__text { flex: 1; min-width: 0; }
.install-banner__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 2px;
}
.install-banner__desc {
  font-size: 12px;
  color: var(--stone-300);
  line-height: 1.35;
}
.install-banner__actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.install-banner__btn {
  background: var(--rouge-500);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  padding: 9px 14px;
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  min-height: 36px;
}
.install-banner__btn:hover { background: var(--rouge-600, #d63273); }
.install-banner__close {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--stone-300);
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.install-banner__close:hover { color: var(--cream-50); background: rgba(255,255,255,0.08); }

@keyframes install-up {
  from { transform: translateY(120%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* iOS-variant: ingen Installer-knapp, bare instruks med Share-ikon inline */
.install-banner--ios .install-banner__close { margin-left: 8px; }
.install-banner__share {
  vertical-align: -2px;
  margin: 0 2px;
  color: var(--rouge-300);
}

/* Når tastatur er åpent, gjem install-banner. */
body.has-kb .install-banner { display: none; }

/* =========================================================================
   Global fokus-ring i brand-farger. Erstatter default-blå nettleser-outline
   for keyboard-navigasjon. :focus-visible matcher kun ved tastatur (ikke
   musklikk), så musbrukere ser ingen ring.
   ========================================================================= */

:focus-visible {
  outline: 2px solid var(--rouge-400, #EC5A92);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Inputs har egne border-styles ved focus — fjern outline-offset for å unngå
   doble ringer på små elementer. */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline-offset: 0;
}
/* Knapper med pill-form trenger større border-radius på ringen. */
.btn:focus-visible,
.btn-icon:focus-visible,
.bottom-nav__item:focus-visible {
  border-radius: 999px;
}

/* =========================================================================
   Smooth scroll på # anchor-hopp + slanke brand-farget scrollbar i lange
   scrollable områder (chat-tråder, lister, tab-rails).
   ========================================================================= */

html {
  scroll-behavior: smooth;
}
/* Brukerens reduced-motion-preferanse vinner over smooth scroll. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Slank rosa scrollbar — opt-in via .nailed-scrollbar-klassen så vi ikke
   bryter med plattform-defaults der det er bedre å la dem være. */
.nailed-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: var(--rouge-200) transparent;
}
.nailed-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.nailed-scrollbar::-webkit-scrollbar-track { background: transparent; }
.nailed-scrollbar::-webkit-scrollbar-thumb {
  background: var(--rouge-200);
  border-radius: 3px;
}
.nailed-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--rouge-300); }

/* Standard scrollbar-styling for spesifikke kjente scrollable kontekster.
   Brukes uten .nailed-scrollbar-klassen så eksisterende markup ikke må
   oppdateres. */
.nc-list,
.nc-body,
.kp-list,
.utforsk-filters,
.day-carousel__viewport,
.kp-tabs {
  scrollbar-width: thin;
  scrollbar-color: var(--rouge-200) transparent;
}
.nc-list::-webkit-scrollbar,
.nc-body::-webkit-scrollbar,
.kp-list::-webkit-scrollbar,
.utforsk-filters::-webkit-scrollbar,
.day-carousel__viewport::-webkit-scrollbar,
.kp-tabs::-webkit-scrollbar { width: 6px; height: 6px; }
.nc-list::-webkit-scrollbar-thumb,
.nc-body::-webkit-scrollbar-thumb,
.kp-list::-webkit-scrollbar-thumb,
.utforsk-filters::-webkit-scrollbar-thumb,
.day-carousel__viewport::-webkit-scrollbar-thumb,
.kp-tabs::-webkit-scrollbar-thumb {
  background: var(--rouge-200);
  border-radius: 3px;
}

/* =========================================================================
   Heart-pulse: subtil scale-bounce når bruker legger til favoritt.
   Klassen .is-pulsing settes på JS, fjernes etter animasjonen.
   ========================================================================= */

@keyframes heart-pulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.28); }
  70%  { transform: scale(0.94); }
  100% { transform: scale(1); }
}
.service-card__heart.is-pulsing,
.favorite-btn.is-pulsing {
  animation: heart-pulse 420ms cubic-bezier(.22,.61,.36,1);
}


/* =========================================================================
   Accordion for salongside (Åpningstider, Team) — default lukket på mobil,
   alltid åpen på desktop. Klikkbar header med chevron som roterer.
   ========================================================================= */

.acc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  text-align: left;
}
.acc__head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
}
.acc__chev {
  width: 18px;
  height: 18px;
  color: var(--fg-muted);
  transition: transform 220ms cubic-bezier(.22,.61,.36,1);
  flex-shrink: 0;
}
.acc.is-open .acc__chev { transform: rotate(180deg); }
/* Tittel-wrap (ikon + h3) i accordion-header */
.acc__title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.acc__icon {
  width: 18px;
  height: 18px;
  color: var(--rouge-500);
  flex-shrink: 0;
}

/* Accordion-styling: kuratert med brand-paletten. Subtil rouge-tint og
   venstre-aksent gir card-en en distinkt klikkbar feel. */
@media (max-width: 900px) {
  .acc:not(.is-open) {
    background: linear-gradient(135deg, var(--cream-50) 0%, var(--rouge-50) 100%);
    padding: 14px 18px;
    border: 1px solid var(--rouge-100, #FBE3EC);
    border-left: 3px solid var(--rouge-500);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 3px rgba(238, 63, 126, 0.06);
    transition: background 220ms ease, border-color 220ms ease;
  }
  .acc:not(.is-open):active {
    background: linear-gradient(135deg, var(--rouge-50) 0%, var(--cream-100) 100%);
  }
  .acc:not(.is-open) .acc__head h3 {
    font-size: 16px;
    color: var(--ink);
  }
  .acc:not(.is-open) .acc__chev {
    width: 16px;
    height: 16px;
    color: var(--rouge-500);
  }
  .acc.is-open { padding: 18px 18px 4px; }
  .acc.is-open .acc__icon { width: 16px; height: 16px; }
}

@media (max-width: 900px) {
  /* Default lukket — bare header synlig */
  .acc__body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 280ms cubic-bezier(.22,.61,.36,1);
    overflow: hidden;
  }
  .acc__body > * { min-height: 0; }
  .acc.is-open .acc__body { grid-template-rows: 1fr; }
  /* Litt mer luft mellom header og body når åpnet */
  .acc.is-open .acc__body > * { padding-top: 12px; }
}

@media (min-width: 901px) {
  /* På desktop er accordion alltid åpen; header er ikke klikkbar */
  .acc__head { cursor: default; }
  .acc__head h3 { font-size: 20px; }
  .acc__chev { display: none; }
  .acc__body > * { padding-top: 12px; }
}

/* =========================================================================
   Salongside mobil-justeringer:
   - Mindre topp-padding så «Tilbake til utforsk» sitter nært logoen
   - Kompakte amenity-chips for å spare plass
   ========================================================================= */

@media (max-width: 720px) {
  .salon-detail { padding: 2px 0 64px; }
  /* Symmetrisk padding på back-link så den senterstilles likt som Del-knappen
     i flex-row. Gap ned til galleri legges på selve raden istedet. */
  .salon-back-link { padding: 4px 0; font-size: 13px; }
  .salon-share-btn { min-height: 32px; padding: 6px 12px; font-size: 13px; }
  .salon-back-row { margin-bottom: 16px; }
  /* Luft mellom bio og bookingpanelet som plasseres rett under på mobil */
  .salon-detail__about { margin-bottom: 24px; }
  div.salon-detail__about { margin-bottom: 24px; }

  /* Amenity-chips: horisontal carousel på mobil — full-bleed til viewport-
     kantene så scroll-følelsen er naturlig. Skjul scrollbar. */
  .salon-detail__chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    margin: 16px -24px 0;
    padding: 0 24px 4px;
  }
  .salon-detail__chips::-webkit-scrollbar { display: none; }
  .salon-detail__chips .chip {
    flex-shrink: 0;
    padding: 6px 12px;
    font-size: 12px;
    min-height: 30px;
    gap: 6px;
  }
  .salon-detail__chips .chip i { width: 14px; height: 14px; }
}