/* ============================================================
   AVELI — Luxury Wedding Marketplace
   Scandinavian luxury minimalism design system
   ============================================================ */

:root {
  /* Color palette — editorial ivory + near-black with a bronze-gold accent */
  --ivory: #fbfaf7;
  --ivory-deep: #f4f2ee;
  --champagne: #eee8dd;
  --champagne-soft: #f4efe6;
  --gold: #8a6f4a;
  --gold-soft: #cabfac;
  --gold-deep: #6f5738;
  --black: #1a1713;
  --black-soft: #2a251d;
  --text-muted: #8a857c;
  --text-faint: #797164; /* darkened from #a89d8a — original failed WCAG AA (2.5:1) for small text on ivory/white */
  --white: #ffffff;
  --line: rgba(26, 23, 19, 0.1);
  --line-soft: rgba(26, 23, 19, 0.06);
  --shadow-soft: 0 20px 60px rgba(26, 23, 19, 0.08);
  --shadow-lift: 0 30px 80px rgba(26, 23, 19, 0.16);
  --shadow-gold: 0 16px 34px rgba(138, 111, 74, 0.35);
  --sand: #eae1d1;

  /* Semantic status colors — reused by badges, alerts and destructive actions */
  --color-danger: #b14a4a;
  --color-success: #3f7a52;
  --color-info: #4a63a8;

  /* Type — Cormorant Garamond for display/wordmark, Jost for UI/body */
  --font-display: 'Cormorant Garamond', serif;
  --font-editorial: 'Cormorant Garamond', serif;
  --font-body: 'Jost', -apple-system, sans-serif;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Navigasjonen er `position: fixed` og dekker de øverste ~75 pikslene. Uten
     denne ville en overskrift man hopper til (vilkar.html#booking og resten av
     innholdsfortegnelsene) havnet under navigasjonsraden, og lesingen begynt
     midt i første avsnitt. scroll-padding-top holder av plassen ved hopp, og
     rører ikke vanlig rulling. */
  scroll-padding-top: 110px;
}

body {
  font-family: var(--font-body);
  background: var(--ivory);
  color: var(--black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* `clip`, ikke `hidden`. Begge skjuler det samme vannrett — men `hidden`
     gjør body til en rullebeholder, og da settes overflow-y til `auto` av seg
     selv. Body får dermed en egen rulling som ikke har noe å rulle
     (scrollHeight == clientHeight), og nettleseren gir opp å hoppe til et
     anker den finner der: å laste vilkar.html#booking landet på toppen av
     vilkårene istedenfor på «3. Bookingprosessen». Det rammet hele
     innholdsfortegnelsen på de juridiske sidene, og alle «Slik booker du»-
     lenkene i bunnteksten, som peker nettopp dit.

     `overflow-x: clip` klipper uten å lage en rullebeholder, så ankrene
     virker igjen og html blir stående som sidens eneste ruller. */
  overflow-x: clip;
}

img {
  display: block;
  max-width: 100%;
}

/* Warm editorial color grade applied to all photography so a mixed
   image source library still reads as one cohesive luxury palette */
.hero-media img,
.vendor-media img,
.category-card img,
.split-media img,
.masonry-item img,
.gallery-grid img,
.profile-hero img,
.profile-avatar img,
.review-avatar img {
  filter: saturate(1.06) sepia(0.08) contrast(1.02);
}

/* Skeleton shimmer while photography loads in, fading to the real image
   once painted. Prevents blank/flashing image boxes on slower connections. */
img[data-art] {
  background: linear-gradient(100deg, #efe9df 30%, #e6ddcd 45%, #efe9df 60%);
  background-size: 250% 100%;
  animation: img-shimmer 1.6s ease-in-out infinite;
  opacity: 0;
  transition: opacity 0.5s var(--ease-soft);
}

img[data-art].img-loaded {
  animation: none;
  background: none;
  opacity: 1;
}

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

a {
  text-decoration: none;
  color: inherit;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

ul {
  list-style: none;
}

::selection {
  background: var(--gold);
  color: var(--white);
}

.container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 48px;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--gold-deep);
}

/* ============================================================
   Scroll reveal
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Page-exit transition — a brief, subtle dim applied to the outgoing
   page right before following an internal link, so navigating between
   pages reads as continuous rather than an abrupt cut. Only the outgoing
   state is animated (see script.js); the incoming page loads normally to
   avoid any flash-of-invisible-content risk. */
body.is-navigating {
  opacity: 0.55;
  transition: opacity 0.15s var(--ease-soft);
}

/* ============================================================
   Navigation
   ============================================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 17px 0;
  background: rgba(251, 250, 247, 0.9);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid #ece6da;
  transition: background var(--ease-soft), padding var(--ease-soft), box-shadow var(--ease-soft);
}

.nav.is-scrolled {
  background: rgba(251, 250, 247, 0.95);
  box-shadow: 0 6px 24px -18px rgba(26, 23, 19, 0.5);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Centered logo lockup — links left, logo centre, actions right (mockup 2a).
   Achieved with flex order so no per-page markup change is needed. */
.nav-links {
  order: 1;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: nowrap;
}

.logo {
  order: 2;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-editorial);
  font-size: 30px;
  letter-spacing: 0.04em;
  font-weight: 500;
  color: var(--black);
  line-height: 1;
  white-space: nowrap;
}

.logo::before {
  content: 'A';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--black);
  color: #f3eee4;
  font-family: var(--font-editorial);
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  padding-bottom: 2px;
  box-sizing: border-box;
  flex: none;
}

.nav-actions {
  order: 3;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
}

.nav-links a {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--black);
  position: relative;
  padding: 4px 0;
  white-space: nowrap;
  transition: color 0.3s var(--ease-soft);
}

.nav-links a:hover {
  color: var(--gold);
}

.nav-links a.active {
  color: var(--gold-deep);
}

.nav-icon-btn {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--black);
}

/* Action links (For leverandører / Logg inn) mirrored into the mobile
   dropdown by script.js — hidden on desktop where the top-bar copies show. */
.nav-links-extra {
  display: none;
}

/* Homepage trust/stat strip under the hero (distinct from the .trust-strip
   testimonial component further down). */
.mkg-trust {
  padding: 82px 0 8px;
}


.nav-hamburger {
  display: none;
  background: none;
  border: none;
  padding: 6px;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: inherit;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.06em;
  padding: 14px 26px;
  border-radius: 2px;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), background 0.4s var(--ease-soft), color 0.4s var(--ease-soft);
  white-space: nowrap;
}

.btn-primary {
  background: var(--black);
  color: var(--ivory);
}

.btn-primary:hover {
  background: var(--gold-deep);
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-gold {
  background: var(--black);
  color: var(--ivory);
}

.btn-gold:hover {
  background: var(--gold-deep);
  transform: translateY(-1px);
}

.btn-gold:active {
  transform: translateY(0);
  filter: brightness(0.96);
}

/* Light button for use on dark backgrounds (hero, rental strip, final CTA) */
.btn-light {
  background: var(--ivory);
  color: var(--black);
}

.btn-light:hover {
  background: #fff;
  transform: translateY(-1px);
}

.btn-light:active {
  transform: translateY(0);
  filter: brightness(0.97);
}

.btn-outline {
  border: 1px solid var(--line);
  color: var(--black);
  background: transparent;
}

.btn-outline:hover {
  border-color: var(--black);
  background: var(--black);
  color: var(--ivory);
}

.btn-outline:active {
  background: var(--gold-deep);
  border-color: var(--gold-deep);
}

.btn-ghost-dark {
  border: 1px solid rgba(250, 247, 242, 0.4);
  color: var(--ivory);
}

.btn-ghost-dark:hover {
  background: var(--ivory);
  color: var(--black);
  border-color: var(--ivory);
}

.btn-ghost-dark:active {
  filter: brightness(0.92);
}

/* Vipps (Part 20). Vipps' own orange, not a palette colour: the whole point of
   the button is that it is recognised in a glance, and a tastefully muted Vipps
   button is a Vipps button nobody spots. It is the one element on the site
   allowed to break the palette. */
.btn-vipps {
  background: #ff5b24;
  color: #fff;
  font-weight: 500;
}

.btn-vipps:hover {
  background: #f04e18;
  transform: translateY(-1px);
}

.btn-vipps:active {
  transform: translateY(0);
  filter: brightness(0.96);
}

.btn-vipps .vipps-mark {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #fff;
  color: #ff5b24;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

/* "ELLER" rule between the Vipps button and the e-mail form below it. */
.auth-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
}

.auth-or::before,
.auth-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

.auth-or span {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

.btn-sm {
  padding: 11px 22px;
  font-size: 13px;
}

.btn-block {
  width: 100%;
}

/* Disabled — applies to any native button/input regardless of variant */
button:disabled,
button[disabled],
.btn:disabled,
.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: none;
  filter: none;
}

/* Loading — a button mid-submit. Kept at full opacity (unlike :disabled)
   so gold/dark buttons still read as active while the spinner reassures
   the person that their click registered. */
.btn.is-loading {
  cursor: default;
  pointer-events: none;
}

.btn-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  opacity: 0.85;
  animation: btn-spin 0.6s linear infinite;
  vertical-align: -2px;
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  height: min(82vh, 760px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: visible;
  background: var(--black);
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  animation: heroZoom 18s ease-out forwards;
}

@keyframes heroZoom {
  to { transform: scale(1); }
}

.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 18, 14, 0.34) 0%, rgba(20, 18, 14, 0.08) 42%, rgba(20, 18, 14, 0.48) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 48px;
  color: var(--ivory);
}

.hero-inner {
  max-width: 900px;
  margin: 0 auto;
}

.hero-eyebrow {
  font-size: 12px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: #f3eee4;
  font-weight: 400;
  margin-bottom: 22px;
  opacity: 0;
  animation: fadeUp 1s var(--ease) 0.2s forwards;
}

.hero-title {
  font-family: var(--font-editorial);
  font-weight: 500;
  font-size: clamp(42px, 6.4vw, 84px);
  line-height: 1.06;
  letter-spacing: 0.01em;
  color: var(--ivory);
  max-width: 900px;
  margin: 0 auto;
  opacity: 0;
  animation: fadeUp 1.1s var(--ease) 0.35s forwards;
}

.hero-title em {
  font-style: italic;
  color: var(--gold-soft);
}

.hero-sub {
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 300;
  color: rgba(250, 247, 242, 0.86);
  margin-top: 24px;
  max-width: 560px;
  line-height: 1.5;
  opacity: 0;
  animation: fadeUp 1.1s var(--ease) 0.5s forwards;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-scroll {
  position: absolute;
  bottom: 28px;
  right: 48px;
  z-index: 2;
  color: var(--ivory);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.75;
}

.hero-scroll .line {
  width: 1px;
  height: 40px;
  background: rgba(250, 247, 242, 0.5);
  position: relative;
  overflow: hidden;
}

.hero-scroll .line::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--gold-soft);
  animation: scrollLine 2.2s ease-in-out infinite;
}

@keyframes scrollLine {
  0% { top: -100%; }
  50% { top: 0; }
  100% { top: 100%; }
}

/* ============================================================
   Search bar
   ============================================================ */
/* Search card overlapping the hero bottom edge (mockup) */
.hero-search-overlap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translateY(50%);
  z-index: 5;
  display: flex;
  justify-content: center;
  padding: 0 24px;
}

.search-wrap {
  position: relative;
  z-index: 3;
  width: min(940px, 100%);
  opacity: 0;
  animation: fadeUp 1.1s var(--ease) 0.55s forwards;
}

.search-bar {
  background: rgba(250, 247, 242, 0.98);
  backdrop-filter: blur(20px);
  border-radius: 4px;
  padding: 10px;
  display: grid;
  grid-template-columns: 1.4fr 1px 1fr 1px 1fr auto;
  align-items: stretch;
  gap: 0;
  width: 100%;
  box-shadow: var(--shadow-lift);
}

.search-field {
  padding: 12px 22px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  border-radius: 2px;
  transition: background 0.3s var(--ease-soft);
  position: relative;
}

.search-field:hover {
  background: rgba(23, 20, 15, 0.035);
}

/* `.search-field-label` er en <span>, ikke en <label>: feltet er en custom
   combobox (en <div role="combobox">), og et <label>-element kan bare navngi
   et ekte form-element. Den navngir nå comboboxen via aria-labelledby i
   stedet. Begge selektorene beholdes så andre sider som fortsatt bruker
   <label> her ikke mister stilen. */
.search-field label,
.search-field .search-field-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--black);
}

.search-field .value {
  font-size: 14px;
  color: var(--text-muted);
}

.search-divider {
  background: var(--line);
  align-self: center;
  height: 34px;
}

.search-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  background: var(--black);
  color: var(--ivory);
  border-radius: 3px;
  width: 56px;
  height: 56px;
  margin-right: 4px;
  font-size: 20px;
  transition: transform 0.4s var(--ease), background 0.4s var(--ease-soft);
}

.search-submit:hover {
  background: var(--gold-deep);
  transform: translateY(-1px);
}

.search-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.search-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 2px;
  background: rgba(250, 247, 242, 0.12);
  border: 1px solid rgba(250, 247, 242, 0.28);
  color: var(--ivory);
  font-size: 13px;
  font-weight: 500;
  backdrop-filter: blur(8px);
  transition: background 0.3s var(--ease-soft), border-color 0.3s var(--ease-soft), transform 0.3s var(--ease-soft);
}

.search-chip:hover {
  background: rgba(250, 247, 242, 0.22);
  border-color: rgba(250, 247, 242, 0.5);
  transform: translateY(-2px);
}

/* Search dropdown panel (simplified interactive demo) */
.search-panel {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  min-width: 320px;
  background: var(--white);
  border-radius: 4px;
  box-shadow: var(--shadow-lift);
  padding: 14px;
  z-index: 20;
  opacity: 0;
  transform: translateY(-6px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s var(--ease-soft), transform 0.2s var(--ease-soft), visibility 0s linear 0.2s;
}

.search-field.active .search-panel {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.2s var(--ease-soft), transform 0.2s var(--ease-soft), visibility 0s linear 0s;
}

.search-panel-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 14px;
  color: var(--black);
  transition: background 0.25s var(--ease-soft);
}

.search-panel-option:hover {
  background: var(--ivory-deep);
}

/* ============================================================
   Section layout
   ============================================================ */
section {
  position: relative;
}

.section {
  padding: 130px 0;
}

.section-tight {
  padding: 90px 0;
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 64px;
}

.section-head h2 {
  font-family: var(--font-editorial);
  font-weight: 500;
  font-size: clamp(32px, 3.6vw, 52px);
  line-height: 1.1;
  margin-top: 18px;
  max-width: 640px;
}

.section-head p {
  color: var(--text-muted);
  font-size: 16px;
  max-width: 420px;
  line-height: 1.6;
  font-weight: 300;
}

.section-cta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--black);
  transition: gap 0.3s var(--ease-soft), color 0.3s var(--ease-soft), border-color 0.3s var(--ease-soft);
}

.section-cta:hover {
  gap: 14px;
  color: var(--gold-deep);
  border-color: var(--gold-deep);
}

/* Shared page-level heading — use for the main H1/H2 on interior pages
   (booking steps, account, inspiration, legal) instead of one-off inline sizes */
.page-title {
  font-family: var(--font-editorial);
  font-weight: 500;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.1;
}

.bg-black { background: var(--black); color: var(--ivory); }
.bg-champagne { background: var(--champagne-soft); }
.bg-ivory-deep { background: var(--ivory-deep); }

.bg-black .section-head p { color: rgba(250, 247, 242, 0.6); }
.bg-black .eyebrow { color: var(--gold-soft); }

/* ============================================================
   Category grid
   ============================================================ */
.category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.category-grid.wide { grid-template-columns: repeat(7, 1fr); }

.category-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: pointer;
}

.category-card img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: 3px;
  display: block;
  transition: opacity 0.4s var(--ease);
}

.category-card:hover .cat-label {
  color: var(--gold-deep);
}

.category-card .cat-label {
  font-size: 14px;
  color: var(--black);
}

.category-card .cat-count {
  color: var(--text-muted);
}

/* Final CTA — bakgrunnsbilde med overlegg (mockupens siste seksjon) */
.cta-final {
  position: relative;
  overflow: hidden;
}

.cta-final > img {
  width: 100%;
  height: clamp(360px, 42vw, 460px);
  object-fit: cover;
  display: block;
}

.cta-final-overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 18, 14, 0.46);
}

.cta-final-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 26px;
  padding: 0 24px;
}

.cta-final-content h2 {
  font-family: var(--font-editorial);
  font-weight: 500;
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.05;
  color: var(--ivory);
  margin: 0;
  max-width: 700px;
}

.cta-final-btn {
  background: var(--ivory);
  color: var(--black);
  padding: 16px 34px;
}

.cta-final-btn:hover {
  background: var(--white);
}

/* Compact category pills (used across pages) */
.category-grid.compact {
  grid-template-columns: repeat(7, 1fr);
  gap: 14px;
}

.category-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 22px 12px;
  border-radius: 4px;
  background: var(--white);
  border: 1px solid var(--line-soft);
  text-align: center;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}

.category-pill:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-soft);
  border-color: var(--gold-soft);
}

.category-pill .icon {
  font-size: 26px;
}

.category-pill span:last-child {
  font-size: 13px;
  font-weight: 600;
}

/* ============================================================
   Product / vendor cards
   ============================================================ */
.card-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.card-row.four { grid-template-columns: repeat(4, 1fr); }

.vendor-card {
  background: var(--white);
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
  cursor: pointer;
  border: 1px solid var(--line-soft);
}

.vendor-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lift);
}

.vendor-media {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
}

.vendor-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}

.vendor-card:hover .vendor-media img {
  transform: scale(1.07);
}

.vendor-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(250, 247, 242, 0.94);
  backdrop-filter: blur(6px);
  padding: 6px 14px;
  border-radius: 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.vendor-fav {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(23, 20, 15, 0.28);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 16px;
  transition: background 0.3s var(--ease-soft), transform 0.3s var(--ease);
}

.vendor-fav:hover { transform: scale(1.12); }
.vendor-fav.active { color: var(--gold-soft); }

.vendor-body {
  padding: 22px 24px 26px;
}

.vendor-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.vendor-name {
  font-family: var(--font-editorial);
  font-size: 19px;
  font-weight: 600;
}

.vendor-rating {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--black);
  white-space: nowrap;
}

.vendor-rating .stars { color: var(--gold-deep); letter-spacing: 1px; }

.vendor-loc {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.vendor-desc {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: 16px;
  font-weight: 300;
}

.vendor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--line-soft);
  padding-top: 16px;
}

.vendor-price {
  font-size: 13px;
  color: var(--text-muted);
}

.vendor-price strong {
  font-family: var(--font-editorial);
  font-size: 19px;
  color: var(--black);
  font-weight: 600;
  margin-right: 3px;
}

.vendor-link {
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.3s var(--ease-soft), color 0.3s;
}

.vendor-link:hover { gap: 10px; color: var(--gold-deep); }

/* ============================================================
   Editorial split blocks
   ============================================================ */
@media (min-width: 1081px) {
  .split.split-booking { grid-template-columns: 1fr 380px; gap: 48px; align-items: flex-start; }
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px;
  align-items: center;
}

.split.reverse .split-media { order: 2; }

.split-media {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 5/6;
}

.split-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.split-media.stack {
  aspect-ratio: auto;
  height: 620px;
}

.split-media.stack .img-back,
.split-media.stack .img-front {
  position: absolute;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: var(--shadow-lift);
}

.split-media.stack .img-back {
  top: 0; left: 0; width: 78%; height: 78%;
}

.split-media.stack .img-front {
  bottom: 0; right: 0; width: 62%; height: 56%;
  border: 6px solid var(--ivory);
}

.split-media.stack img { width: 100%; height: 100%; object-fit: cover; }

.split-copy h2 {
  font-family: var(--font-editorial);
  font-weight: 500;
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.15;
  margin: 18px 0 22px;
}

.split-copy p {
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 300;
  max-width: 460px;
  margin-bottom: 30px;
}

.stat-row {
  display: flex;
  gap: 48px;
  margin-top: 40px;
}

.stat-row .stat b {
  display: block;
  font-family: var(--font-editorial);
  font-size: 34px;
  font-weight: 600;
  color: var(--black);
}

.bg-black .stat-row .stat b { color: var(--ivory); }

.stat-row .stat span {
  font-size: 12.5px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* ============================================================
   Testimonial / trust strip
   ============================================================ */
.trust-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin-top: 90px;
  padding: 42px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13.5px;
  color: var(--text-muted);
}

.trust-item .num {
  font-family: var(--font-editorial);
  font-size: 28px;
  font-weight: 600;
  color: var(--black);
}

/* ============================================================
   Masonry (inspiration / discovery)
   ============================================================ */
.masonry {
  columns: 4 260px;
  column-gap: 20px;
}

.masonry-item {
  break-inside: avoid;
  margin-bottom: 20px;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(23, 20, 15, 0.03);
}

.masonry-item img {
  width: 100%;
  display: block;
  transition: transform 0.9s var(--ease);
}

.masonry-item:hover img { transform: scale(1.06); }

.masonry-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23,20,15,0) 55%, rgba(23,20,15,0.75) 100%);
  opacity: 0;
  transition: opacity 0.4s var(--ease-soft);
  display: flex;
  align-items: flex-end;
  padding: 18px;
}

.masonry-item:hover .masonry-overlay { opacity: 1; }

.masonry-overlay span {
  color: var(--ivory);
  font-size: 13px;
  font-weight: 600;
}

.masonry-save {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(250,247,242,0.92);
  padding: 8px 16px;
  border: none;
  border-radius: 2px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--black);
  cursor: pointer;
  opacity: 0;
  transform: translateY(-6px);
  transition: all 0.3s var(--ease-soft);
}

.masonry-item:hover .masonry-save,
.masonry-item:focus-within .masonry-save,
.masonry-save:focus-visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   Collection chips (filter bar)
   ============================================================ */
.filter-bar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 46px;
}

.search-input-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.search-input-wrap {
  position: relative;
  flex: 1 1 340px;
  min-width: 240px;
}

.search-input-wrap .search-input-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  opacity: 0.55;
  pointer-events: none;
}

.search-input-wrap input[type="search"] {
  width: 100%;
  padding: 13px 18px 13px 42px;
  border-radius: 2px;
  border: 1px solid var(--line);
  font-family: var(--font-body);
  font-size: 14px;
  background: var(--white);
  transition: border-color 0.3s var(--ease-soft), box-shadow 0.3s var(--ease-soft);
}

.search-input-wrap input[type="search"]:focus {
  outline: none;
  border-color: var(--gold-deep);
  box-shadow: 0 0 0 3px rgba(168, 130, 63, 0.14);
}

.verified-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
}

.verified-toggle input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--gold-deep);
  cursor: pointer;
}

.filter-chip {
  padding: 11px 22px;
  border-radius: 2px;
  border: 1px solid var(--line);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
  transition: all 0.3s var(--ease-soft);
}

.filter-chip:hover {
  border-color: var(--black);
  color: var(--black);
}

.filter-chip.active {
  background: var(--black);
  color: var(--ivory);
  border-color: var(--black);
}

/* ============================================================
   Category cards (search page) — image-led filter grid,
   from the "Aveli Kategorier" design
   ============================================================ */
.cat-grid-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.cat-grid-eyebrow {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.cat-grid-all {
  font-size: 12px;
  color: var(--black);
  border-bottom: 1px solid var(--black);
  padding-bottom: 2px;
  transition: opacity 0.3s var(--ease-soft), color 0.3s var(--ease-soft);
}

.cat-grid-all:hover { opacity: 0.6; }

.cat-grid-all.active {
  color: var(--gold-deep);
  border-bottom-color: var(--gold-deep);
}

.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 46px;
}

.cat-card {
  position: relative;
  display: block;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  cursor: pointer;
}

.cat-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.03) brightness(0.92);
  transition: transform 0.6s var(--ease-soft);
}

.cat-card:hover .cat-card-img { transform: scale(1.05); }

.cat-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 18, 14, 0.15), rgba(20, 18, 14, 0.62));
  transition: background 0.4s var(--ease-soft);
}

/* An ::after, not an `outline`: .cat-card-img/-overlay are absolutely
   positioned and paint on top of the parent's outline, so an outline here is
   invisible and the active filter reads as unselected. Ivory for contrast
   against the darkened photo. */
.cat-card.active::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 2px solid var(--ivory);
  pointer-events: none;
}

.cat-card.active .cat-card-overlay {
  background: linear-gradient(180deg, rgba(20, 18, 14, 0.28), rgba(20, 18, 14, 0.72));
}

.cat-card-label {
  position: absolute;
  left: 16px;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cat-card-name {
  font-family: var(--font-editorial);
  font-weight: 500;
  font-size: 24px;
  line-height: 1;
  color: var(--ivory);
}

.cat-card-count {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(251, 250, 247, 0.78);
}

@media (max-width: 900px) {
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 680px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* ============================================================
   Footer
   ============================================================ */
.footer {
  background: var(--black);
  color: var(--ivory);
  padding: 100px 0 40px;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: 48px;
  padding-bottom: 70px;
  border-bottom: 1px solid rgba(250, 247, 242, 0.12);
}

.footer-brand .logo { color: #f3eee4; margin-bottom: 18px; }
.footer-brand .logo::before { display: none; }

.footer-brand p {
  color: rgba(250, 247, 242, 0.55);
  font-size: 14px;
  line-height: 1.6;
  max-width: 280px;
  font-weight: 300;
}

.footer-social {
  display: flex;
  gap: 12px;
  margin-top: 26px;
}

.footer-social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(250, 247, 242, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.3s var(--ease-soft);
}

.footer-social a:hover {
  background: var(--gold-soft);
  border-color: var(--gold-soft);
  color: var(--black);
}

.footer-col h4 {
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 22px;
  font-weight: 600;
}

.footer-col ul li {
  margin-bottom: 13px;
}

.footer-col ul li a {
  font-size: 14px;
  color: rgba(250, 247, 242, 0.65);
  transition: color 0.3s var(--ease-soft);
}

.footer-col ul li a:hover { color: var(--gold-soft); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 32px;
  font-size: 13px;
  color: rgba(250, 247, 242, 0.45);
  flex-wrap: wrap;
  gap: 16px;
}

.footer-bottom a { margin-left: 24px; color: rgba(250, 247, 242, 0.45); }
.footer-bottom a:hover { color: var(--gold-soft); }

/* ============================================================
   Buttons row / small utilities
   ============================================================ */
.flex-center { display: flex; align-items: center; }
.mt-64 { margin-top: 64px; }
.text-center { text-align: center; }

.pill-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 2px;
  background: var(--champagne-soft);
  font-size: 12px;
  font-weight: 600;
  color: var(--gold-deep);
}

/* ============================================================
   Vendor profile page
   ============================================================ */
.profile-hero {
  position: relative;
  height: 62vh;
  min-height: 480px;
  margin-top: 0;
}

.profile-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23,20,15,0.15) 0%, rgba(23,20,15,0.05) 40%, rgba(23,20,15,0.7) 100%);
}

.profile-header-card {
  position: relative;
  margin-top: -110px;
  z-index: 5;
  background: var(--white);
  border-radius: 4px;
  box-shadow: var(--shadow-lift);
  padding: 40px 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.profile-id {
  display: flex;
  align-items: center;
  gap: 22px;
}

.profile-avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--white);
  box-shadow: 0 4px 16px rgba(23, 20, 15, 0.14);
  flex-shrink: 0;
}

.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }

.profile-id h1 {
  font-family: var(--font-editorial);
  font-size: 32px;
  font-weight: 600;
}

.profile-meta {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 8px;
  font-size: 14px;
  color: var(--text-muted);
  flex-wrap: wrap;
}

.profile-meta .stars { color: var(--gold-deep); }

/* Stikkord på leverandørprofilen (#Skandinavisk, #Pakistansk …).
   Gjenbruker .pill-tag helt og holdent — de skal se ut som «✓ Verifisert
   leverandør» rett over, ikke som en ny slags brikke. Det eneste som legges
   til er raden de ligger på og at de oppfører seg som lenker. */
.profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

a.pill-tag {
  text-decoration: none;
  transition: background 0.3s var(--ease-soft), color 0.3s var(--ease-soft);
}

a.pill-tag:hover {
  background: var(--gold-deep);
  color: #fff;
}

.profile-actions { display: flex; gap: 12px; }

.icon-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: all 0.3s var(--ease-soft);
}

.icon-btn:hover { border-color: var(--black); background: var(--black); color: var(--ivory); }

.profile-layout {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 64px;
  margin-top: 70px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 180px);
  gap: 10px;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 70px;
}

.gallery-grid img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; transition: filter 0.3s var(--ease-soft); }
.gallery-grid img:hover { filter: brightness(0.85); }
.gallery-grid > *:first-child { grid-row: span 2; grid-column: span 2; }

.profile-section { margin-bottom: 62px; }

.profile-section h3 {
  font-family: var(--font-editorial);
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 18px;
}

.profile-section p {
  color: var(--text-muted);
  font-size: 15.5px;
  line-height: 1.75;
  font-weight: 300;
  max-width: 640px;
}

.package-list { display: flex; flex-direction: column; gap: 16px; }

.package-card {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 26px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  transition: all 0.3s var(--ease-soft);
  cursor: pointer;
  position: relative;
}

.package-card:hover { border-color: var(--gold-soft); box-shadow: var(--shadow-soft); }

.package-card.featured {
  border-color: var(--gold);
  background: linear-gradient(135deg, rgba(200,167,105,0.06), transparent);
}

.package-card.featured::before {
  content: 'Mest populær';
  position: absolute;
  top: -12px;
  left: 28px;
  background: var(--gold-deep);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 2px;
  letter-spacing: 0.03em;
}

/* Currently-selected package: distinct from the "featured/most popular"
   recommendation badge above — a package can be both at once. Selecting
   a package must always give clear, unmistakable visual feedback. */
.package-card.featured-selected {
  border-color: var(--gold-deep);
  box-shadow: 0 0 0 1px var(--gold-deep), var(--shadow-soft);
}

.package-card.featured-selected::after {
  content: '✓ Valgt';
  position: absolute;
  top: -12px;
  right: 28px;
  background: var(--black);
  color: var(--ivory);
  font-size: 11px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 2px;
  letter-spacing: 0.03em;
}

.package-name {
  font-family: var(--font-editorial);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 6px;
}

.package-desc { font-size: 13.5px; color: var(--text-muted); max-width: 380px; }

.package-price {
  text-align: right;
  flex-shrink: 0;
}

.package-price strong {
  font-family: var(--font-editorial);
  font-size: 24px;
  font-weight: 600;
}

.package-price span { display: block; font-size: 12px; color: var(--text-muted); }

.review-card {
  border-bottom: 1px solid var(--line-soft);
  padding: 24px 0;
}

.review-top { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }

.review-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
}

.review-avatar img { width: 100%; height: 100%; object-fit: cover; }

.review-name { font-size: 14.5px; font-weight: 600; }
.review-date { font-size: 12.5px; color: var(--text-faint); }
.review-stars { color: var(--gold-deep); font-size: 13px; margin-bottom: 8px; }
.review-text { font-size: 14.5px; color: var(--text-muted); line-height: 1.65; font-weight: 300; }

/* Booking sidebar (sticky) */
.booking-card {
  position: sticky;
  top: 110px;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 30px;
  box-shadow: var(--shadow-soft);
  height: fit-content;
}

.booking-card .price-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 22px;
}

.booking-card .price-line strong {
  font-family: var(--font-editorial);
  font-size: 30px;
  font-weight: 600;
}

.booking-card .price-line span { color: var(--text-muted); font-size: 14px; }

.booking-field {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: border-color 0.25s var(--ease-soft), box-shadow 0.25s var(--ease-soft);
}

.booking-field:focus-within {
  border-color: var(--gold-deep);
  box-shadow: 0 0 0 3px rgba(168, 130, 63, 0.12);
}

.booking-field.error {
  border-color: var(--color-danger);
}

.booking-field.error:focus-within {
  box-shadow: 0 0 0 3px rgba(177, 74, 74, 0.14);
}

/* Inline field error copy — hidden until a field is touched and left invalid */
.field-error-text {
  display: none;
  color: var(--color-danger);
  font-size: 12px;
  font-weight: 500;
  margin: -6px 0 10px;
}

.field-error-text.show { display: block; }

.step3-hint {
  display: none;
  color: var(--color-danger);
  font-size: 12.5px;
  margin-top: 8px;
  max-width: 220px;
  text-align: right;
}

.step3-hint.show { display: block; }

.booking-field label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.booking-field select,
.booking-field input,
.booking-field textarea {
  border: none;
  background: none;
  font-family: inherit;
  font-size: 14px;
  color: var(--black);
  outline: none;
  width: 100%;
  resize: vertical;
}

.booking-summary {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.booking-summary .row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--text-muted);
}

.booking-summary .row.total {
  font-weight: 700;
  color: var(--black);
  font-size: 16px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}

.booking-note {
  font-size: 12px;
  color: var(--text-faint);
  text-align: center;
  margin-top: 14px;
}

/* ============================================================
   Booking flow (multi-step)
   ============================================================ */
.steps-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 70px;
}

.step-item {
  display: flex;
  align-items: center;
}

.step-circle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-faint);
  background: var(--white);
  transition: all 0.4s var(--ease-soft);
  flex-shrink: 0;
}

.step-item.active .step-circle,
.step-item.done .step-circle {
  border-color: var(--gold);
  background: var(--black);
  color: var(--ivory);
}

.step-item.done .step-circle { background: var(--gold-deep); border-color: var(--gold-deep); }

.step-label {
  font-size: 13.5px;
  font-weight: 600;
  margin-left: 12px;
  color: var(--text-faint);
  white-space: nowrap;
}

.step-item.active .step-label,
.step-item.done .step-label { color: var(--black); }

.step-connector {
  width: 80px;
  height: 1.5px;
  background: var(--line);
  margin: 0 18px;
  position: relative;
}

.step-connector.filled { background: var(--gold-deep); }

.booking-panel {
  max-width: 880px;
  margin: 0 auto;
}

.option-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.option-card {
  border: 1.5px solid var(--line);
  border-radius: 4px;
  padding: 26px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  cursor: pointer;
  transition: all 0.3s var(--ease-soft);
}

.option-card:hover { border-color: var(--gold-soft); }

.option-card.selected {
  border-color: var(--gold-deep);
  background: linear-gradient(135deg, rgba(200,167,105,0.08), transparent);
}

.option-icon {
  width: 52px;
  height: 52px;
  border-radius: 4px;
  background: var(--champagne-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.option-title { font-weight: 600; font-size: 16px; margin-bottom: 6px; }
.option-desc { font-size: 13px; color: var(--text-muted); line-height: 1.5; }

.option-check {
  margin-left: auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  flex-shrink: 0;
  transition: all 0.3s var(--ease-soft);
}

.option-card.selected .option-check {
  background: var(--gold-deep);
  border-color: var(--gold-deep);
  position: relative;
}

.option-card.selected .option-check::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
}

.booking-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 56px;
}

/* Step 4's send button + reassurance note reuse .booking-actions for
   consistent spacing/sticky treatment, but stack instead of split. */
.booking-actions.single {
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.booking-actions.single .booking-note { margin: 0; }

.date-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
}

.date-nav #date-month-label {
  font-size: 14.5px;
  font-weight: 600;
  text-transform: capitalize;
}

.date-nav .btn-icon:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Datovelgeren — Airbnbs mobilstruktur, Avelis farger.
   Layouten er hentet rett fra Airbnb: måned og år sentrert øverst, tynne
   chevroner ytterst på samme linje, ukedagene som «Ma. Ti. On.» i grått, ett
   luftig 7-kolonners rutenett uten ramme rundt seg — bare en tynn skillelinje
   under — og en tekstlenke for å nullstille valget. Fargene er våre egne:
   valgt dag er en fylt --black-sirkel, opptatt dag står grå med
   gjennomstreking. Hvilke dager som er av eller på avgjøres i renderCalendar()
   i leverandor.html; her står ingenting om tilgjengelighet. */

.cal-air {
  background: #fff;
  border-bottom: 1px solid var(--line);
  margin-top: 12px;
  padding-bottom: 18px;
}

.cal-air-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 0 16px;
}

.cal-air-nav {
  width: 44px;
  height: 44px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  padding: 0;
  border-radius: 50%;
  font-size: 26px;
  line-height: 1;
  font-weight: 300;
  color: var(--black);
  cursor: pointer;
}

.cal-air-nav[disabled] { color: var(--line); cursor: default; }

.cal-air-title {
  flex: 1;
  text-align: center;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--black);
}

.cal-air-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 8px;
}

.cal-air-dow span {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
}

.cal-air-clear {
  display: block;
  width: fit-content;
  margin-top: 16px;
  border: none;
  background: none;
  padding: 6px 0;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--black);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.date-picker-mock {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-gap: 4px;
  border-radius: 12px;
  border: 1px solid transparent;
  transition: border-color 0.2s var(--ease-soft);
}

.date-picker-mock.error {
  border-color: var(--color-danger);
}

/* Sirkelen tegnes med ::before og ikke på knappen selv: kolonnene er bredere
   enn de er høye, så en border-radius på knappen hadde gitt en oval. Slik blir
   treffmålet hele ruten (52px) mens sirkelen er den perfekte sirkelen man ser. */
.date-cell {
  position: relative;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--black);
  cursor: pointer;
}

.date-cell > span { position: relative; z-index: 1; }

.date-cell::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(44px, 92%);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid transparent;
  transition: background 0.18s var(--ease-soft), border-color 0.18s var(--ease-soft);
}

.date-cell.disabled {
  color: var(--text-muted);
  font-weight: 400;
  text-decoration: line-through;
  cursor: not-allowed;
}

.date-cell.selected { color: #fff; }
.date-cell.selected::before { background: var(--black); border-color: var(--black); }

/* Ingen hover på telefon — der finnes ikke pekeren, og :hover ville hengt igjen
   på den sist trykte ruten. */
@media (hover: hover) {
  .date-cell:not(.disabled):not(.selected):hover::before { border-color: var(--black); }
}

.confirm-box {
  text-align: center;
  padding: 60px 20px;
}

.confirm-icon {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold-deep));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: var(--white);
  margin: 0 auto 30px;
}

/* ============================================================
   Responsive
   ============================================================ */

/* --- Desktop, smal ende (1200–1319px): sentrert logo vs. fem venstrelenker.
       `.nav-links` har flex: 1 1 0 + min-width: 0. Det er nettopp dét som gjør
       logoen *ekte* midtstilt — venstre- og høyregruppa får akkurat halvparten
       hver av den ledige plassen, uavhengig av hvor mye innhold de har. Men
       min-width: 0 lar også lenkelisten krympe under sitt eget innhold, og
       siden lenkene er white-space: nowrap renner innholdet da ut av boksen og
       legger seg OVER logoen i stedet for å skyve den.

       Målt på konto.html og leverandor.html — de to sidene som har fem lenker
       («For leverandører» i tillegg til de fire vanlige): ved 1200px endte
       «For leverandører» på x=558 mens logoen begynte på x=546, altså 12px ren
       overlapp, tekst oppå tekst.

       Her strammes gap og lenkestørrelse akkurat nok til at fem lenker faktisk
       får plass innenfor sin halvpart, så den ekte sentreringen kan beholdes.
       Under 1200px er det ikke nok plass uansett hvor tett man setter det —
       der tar hamburgermenyen over (se neste blokk, som derfor går opp til
       1199px og ikke 1080px). Over 1319px treffer .nav-inner max-width:1320px
       og standardstørrelsene har rikelig plass. --- */
@media (min-width: 1200px) and (max-width: 1319px) {
  .nav-links {
    gap: 18px;
  }
  .nav-links a {
    font-size: 12.5px;
  }
}

/* --- Navigasjon: hamburger opp til 1199px.
       Denne grensen er navigasjonens egen, og ligger høyere enn de øvrige
       tablet-tilpasningene lenger ned (1080px). Grunnen: 1080px var satt ut
       fra sider med fire venstrelenker. konto.html og leverandor.html har fem,
       og fem lenker får ikke plass innenfor sin halvpart av raden før ~1200px —
       under det rant lenketeksten ut av boksen og la seg oppå den sentrerte
       logoen (se målingene i blokken over). Søkefeltet og resten av
       tablet-reglene har ingen tilsvarende knekk mellom 1081 og 1199px, så de
       er bevisst latt stå på 1080px i stedet for å bli dratt med hit.

       Ingen lenker forsvinner i dette området: script.js speiler dem inn i
       nedtrekket, og .nav-links-extra gjør handlingslenkene synlige der. --- */
@media (max-width: 1199px) {
  .nav-hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
  }
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    background: var(--ivory);
    padding: 10px 22px 18px;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-soft);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: max-height 0.3s var(--ease-soft), opacity 0.25s var(--ease-soft);
  }
  .nav-links.mobile-open {
    max-height: 420px;
    opacity: 1;
    pointer-events: auto;
  }
  /* NB: `padding: 13px 0` her var en feilkilde, ikke en designvalg som virket.
     .nav-links a arver ingen `display` (se basisregelen ~l.272), så ankeret er
     fortsatt `display: inline`. På en inline-boks er både vertikal padding og
     `width: 100%` uten effekt på layout — radene ble derfor liggende 23px høye
     med 25px avstand, akkurat som uten padding. Men padding-boksen er fortsatt
     med i treffdeteksjonen: hvert anker fikk en 49px høy trefflate, og nabo-
     lenkene overlappet hverandre med 23px. Målt med elementFromPoint traff 5 av
     18 punkter feil lenke — nederste del av «Inspirasjon» åpnet «Kategorier»,
     osv. nedover hele menyen. Kun siste lenke (øverst i malingsrekkefølgen) var
     trygg.

     Vi setter derfor paddingen til 1px, slik at trefflaten blir nøyaktig like
     høy som radavstanden (23 + 1 + 1 = 25px). Da forsvinner overlappet, hver
     lenke får sin egen flate, og treffhøyden lander på 25px (over WCAG 2.5.8
     sitt minstemål på 24px). Fordi vertikal padding aldri påvirket layout på en
     inline-boks, er dette en ren treff-korreksjon: menyen ser nøyaktig ut som
     før — verifisert med 0 endrede elementbokser ved 320/375/768/1024px.

     Bevisst IKKE `display: block`, selv om det åpenbart var intensjonen bak
     `width: 100%` og `padding: 13px 0`: det ville gitt 49px høye radlenker og
     gjort dropdownen ~156px høyere. Det er en designendring, ikke en feilretting,
     og må eventuelt tas som et bevisst valg. */
  .nav-links a { color: var(--black) !important; padding: 1px 0; width: 100%; font-size: 15.5px; }
  .nav.on-dark .nav-links a { color: var(--black) !important; }
  .nav-actions { gap: 10px; }
  /* Free the centered logo from the two text links — they move into the
     hamburger dropdown (mirrored by script.js) so only the CTA + burger
     stay in the top bar. Scope to the top-bar copies so the dropdown
     clones (same class, nested in .nav-links) stay visible. */
  .nav-actions > .nav-icon-btn { display: none; }
  .nav-links-extra { display: block; }
}

/* --- Tablet (901–1080px): nav switches to hamburger a good bit
       earlier than mobile does, because five nav links + "Min konto"
       + a gold CTA button simply do not fit a tablet-width row —
       letting them stay inline here caused real horizontal overflow.
       The hero search bar collapses for the same reason: its 6-track
       grid needs more room than a tablet viewport gives it.
       C6 (post-fix audit re-verification): this comment claimed 901-1080px
       was covered, but the query below was still max-width:900px, leaving
       901-1080px on the exact same broken inline nav as desktop. Widened to
       max-width:1080px so the range this comment describes is what's
       actually applied.

       Merk at NAV-reglene som hørte til denne blokken er flyttet ut til en
       egen @media (max-width: 1199px) rett over, fordi navigasjonen må bytte
       til hamburger tidligere enn resten av tablet-tilpasningene her (fem
       venstrelenker får ikke plass før ~1200px). Resten — søkefeltet,
       trust-stripen osv. — beholder 1080px-grensen, siden det ikke er noe galt
       med dem mellom 1081 og 1199px. --- */
@media (max-width: 1080px) {
  .search-bar { grid-template-columns: 1fr; gap: 4px; padding: 8px; }
  .search-divider { display: none; }
  .search-submit { margin-top: 6px; padding: 16px; }
  /* The 320px min-width overflows the narrow stacked card even while
     hidden, forcing a horizontal scroll (which pushed the burger
     off-screen); pin the panel to the field width instead. */
  .search-panel { min-width: 0; left: 0; right: 0; }
  /* The stacked card overlaps the hero edge (desktop look, kept on mobile);
     push the trust strip down so its rating row clears the card overhang
     instead of hiding behind it. */
  .mkg-trust { padding-top: 178px; }
}

@media (max-width: 1080px) {
  .card-row, .card-row.four { grid-template-columns: repeat(2, 1fr); }
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .category-grid.wide, .category-grid.compact { grid-template-columns: repeat(4, 1fr); }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split.reverse .split-media { order: 0; }
  .profile-layout { grid-template-columns: 1fr; }
  .booking-card { position: static; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .masonry { columns: 2 200px; }
}

@media (max-width: 680px) {
  .container { padding: 0 22px; }
  .hero-content { padding: 0 22px 56px; }
  .category-grid, .category-grid.wide, .category-grid.compact { grid-template-columns: repeat(2, 1fr); }
  .card-row, .card-row.four { grid-template-columns: 1fr; }
  .section { padding: 80px 0; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .profile-header-card { flex-direction: column; align-items: flex-start; text-align: left; padding: 28px; margin-top: -60px; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 140px); }
  .gallery-grid > *:first-child { grid-column: span 2; grid-row: span 1; }
  .option-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 40px; }
  .step-label { display: none; }
  .step-item.active .step-label {
    display: block;
    position: absolute;
    top: 38px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    white-space: nowrap;
    color: var(--black);
    font-weight: 600;
  }
  .step-item { position: relative; }
  .step-connector { width: 30px; }
  .masonry { columns: 2 160px; }
  .steps-header { transform: scale(0.9); }

  /* Comfortable touch targets on mobile — several controls read fine
     with a mouse cursor but sit under the ~44px minimum a thumb needs.
     (.wizard-close is sized in the wizard's own media block further
     down, since it must come after .wizard-close's base rule.) */
  .vendor-fav { width: 44px; height: 44px; top: 10px; right: 10px; }
  /* Tidy the ragged, content-sized location chips into an even 2-column grid;
     the "Alle byer" reset chip spans the full width as a clear header row. */
  .filter-bar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 32px; }
  .filter-chip { padding: 13px 10px; text-align: center; font-size: 13px; }
  .filter-chip[data-loc="alle"] { grid-column: 1 / -1; }
  .masonry-save { padding: 10px 16px; }
  .nav-actions .btn { padding: 12px 20px; }
  /* BOT9 (post-fix audit re-verification): these were still under the
     ~44px minimum on mobile — notif-bell was 40px, footer-social a and
     .btn-icon (date-nav prev/next, message-composer attach button) were
     38px. */
  .notif-bell { width: 44px; height: 44px; }
  .footer-social a { width: 44px; height: 44px; }
  .btn-icon { width: 44px; height: 44px; }

  /* Prevent iOS Safari's auto-zoom-on-focus, which happens on any text
     input under 16px — it made every form on the site jump/re-layout
     the instant a couple tapped into a field. */
  .booking-field input,
  .booking-field select,
  .booking-field textarea,
  .search-input-wrap input[type="search"],
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  textarea,
  select {
    font-size: 16px;
  }

  /* Sticky step actions — "Neste steg" / "Send forespørsel" stay
     reachable with one thumb no matter how long the step's content
     runs, instead of requiring a scroll-hunt to find the button. */
  .booking-actions {
    position: sticky;
    bottom: 0;
    margin: 32px -22px -1px;
    padding: 14px 22px calc(14px + env(safe-area-inset-bottom, 0px));
    background: rgba(250, 247, 242, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 -6px 20px rgba(23, 20, 15, 0.07);
    z-index: 30;
  }
  .booking-actions.single {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 10px;
  }
  .booking-actions.single .booking-note { text-align: center; margin: 0; }
}

/* --- Small mobile (≤480px) --- */
@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .hero-content { padding: 0 16px 44px; }
  .section { padding: 60px 0; }
  .section-tight { padding: 48px 0; }
  .nav-actions { gap: 8px; }
  .nav-actions .btn { padding: 10px 16px; font-size: 12.5px; }
  .steps-header { transform: scale(0.8); margin-bottom: 54px; }
  .step-connector { width: 18px; margin: 0 8px; }
  .booking-actions { margin: 28px -16px -1px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
}

/* --- Large screens (≥1601px): the fixed 1320px container starts to
       feel lost on very wide displays, so give it a little more room
       to breathe. (Widest result-grid tier lives next to .results-grid's
       own base rule further down, so its override wins the cascade.) */
@media (min-width: 1601px) {
  .container { max-width: 1520px; }
}

/* ============================================================
   Verified badge (vendor cards / profile)
   ============================================================ */
.vendor-verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--gold-deep);
  letter-spacing: 0.02em;
}

.vendor-cat {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.vendor-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 8px 0 10px;
  gap: 10px;
}

.vendor-meta .vendor-loc {
  margin-bottom: 0;
}

/* ============================================================
   Search results page (sok.html)
   ============================================================ */
.results-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 30px;
}

.results-count {
  font-size: 14px;
  color: var(--text-muted);
}

.results-count strong { color: var(--black); }

.results-sort {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-muted);
}

.results-sort select {
  font-family: var(--font-body);
  font-size: 13px;
  padding: 9px 14px;
  border-radius: 2px;
  border: 1px solid var(--line-soft);
  background: var(--white);
  color: var(--black);
  cursor: pointer;
}

.results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.results-empty {
  text-align: center;
  padding: 80px 20px;
}

.results-empty .icon {
  font-size: 42px;
  margin-bottom: 18px;
}

/* Tomtilstands-ikonene er inline SVG, ikke emoji (🔍 / ⚠️). Emoji tegnes i OS-ets
   egen fargepalett — en gul varseltrekant midt i en dempet champagne/ivory-palett
   ser useriøs ut. SVG-en arver currentColor og dempes derfor til samme grå som
   resten av teksten i tomtilstanden. */
.results-empty .icon svg {
  color: var(--text-muted);
  opacity: 0.8;
}

.results-empty h3 {
  font-family: var(--font-editorial);
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 10px;
}

.results-empty p {
  color: var(--text-muted);
  font-size: 14.5px;
  margin-bottom: 26px;
}

.location-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 1080px) {
  .results-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
  .results-grid { grid-template-columns: 1fr; }
  .results-toolbar { flex-direction: column; align-items: flex-start; }
}

@media (min-width: 1601px) {
  .results-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
   Status badges (bookings, dashboards)
   ============================================================ */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 2px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.status-badge.requested { background: rgba(200,167,105,0.16); color: var(--gold-deep); }
.status-badge.accepted { background: rgba(74,99,168,0.14); color: var(--color-info); }
.status-badge.confirmed { background: rgba(63,122,82,0.16); color: var(--color-success); }
.status-badge.declined,
.status-badge.cancelled { background: rgba(177,74,74,0.14); color: var(--color-danger); }

/* ============================================================
   Toast notifications
   ============================================================ */
.toast-wrap {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

body.cookie-visible .toast-wrap { bottom: 120px; }

@media (max-width: 680px) {
  body.cookie-visible .toast-wrap { bottom: 150px; }
}

.toast {
  background: var(--black);
  color: var(--ivory);
  padding: 14px 26px;
  border-radius: 2px;
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: var(--shadow-lift);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s var(--ease-soft), transform 0.3s var(--ease-soft);
  white-space: nowrap;
  max-width: calc(100vw - 48px);
}

.toast.show { opacity: 1; transform: translateY(0); }

/* BOT9 (post-fix audit re-verification): .toast-wrap is centered with
   left:50% + translateX(-50%) and had no width limit, and .toast used
   white-space:nowrap with no max-width — a longer message (e.g. an
   error string) could run past both viewport edges on a narrow phone
   instead of wrapping. Below ~480px, let it wrap and fill the
   available width instead of overflowing. */
@media (max-width: 480px) {
  .toast-wrap { left: 16px; right: 16px; transform: none; align-items: stretch; }
  .toast { white-space: normal; max-width: none; text-align: center; }
}

/* ============================================================
   Cookie consent banner
   ============================================================ */
.cookie-banner {
  position: fixed;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 3500;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: var(--shadow-lift);
  padding: 22px 26px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s var(--ease-soft), transform 0.4s var(--ease-soft);
}

.cookie-banner.show { opacity: 1; transform: translateY(0); }

.cookie-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  max-width: 1100px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.cookie-banner-inner p {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 640px;
}

.cookie-banner-inner a { color: var(--gold-deep); font-weight: 600; text-decoration: underline; }

.cookie-banner-actions { display: flex; gap: 12px; flex-shrink: 0; }

/* ============================================================
   Wizard overlay ("Bryllupsassistent")
   ============================================================ */
.wizard-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  background: rgba(23, 20, 15, 0.6);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease-soft);
}

.wizard-overlay.open { opacity: 1; pointer-events: auto; }

.wizard-panel {
  background: var(--ivory);
  border-radius: 28px;
  max-width: 880px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  padding: 52px 56px 44px;
  position: relative;
  box-shadow: var(--shadow-lift);
  transform: translateY(24px) scale(0.98);
  transition: transform 0.4s var(--ease);
}

.wizard-overlay.open .wizard-panel { transform: translateY(0) scale(1); }

.wizard-close {
  position: absolute;
  top: 22px;
  right: 26px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--text-muted);
  background: var(--white);
  border: 1px solid var(--line-soft);
  transition: all 0.3s var(--ease-soft);
}

.wizard-close:hover { background: var(--black); color: var(--ivory); border-color: var(--black); }

.wizard-progress {
  display: flex;
  gap: 8px;
  margin-bottom: 30px;
}

.wizard-dot {
  width: 32px;
  height: 4px;
  border-radius: 4px;
  background: var(--line);
  transition: background 0.3s var(--ease-soft);
}

.wizard-dot.active { background: var(--gold-deep); }

.wizard-title {
  font-family: var(--font-editorial);
  font-weight: 500;
  font-size: clamp(26px, 3vw, 36px);
  margin-top: 12px;
  line-height: 1.15;
}

.wizard-sub {
  color: var(--text-muted);
  font-size: 15px;
  font-weight: 300;
  margin-top: 12px;
  margin-bottom: 32px;
  line-height: 1.6;
}

.wizard-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

/* Wizard step 1 category tiles — same grayscale image-card language as the
   .cat-card grid on sok.html (photo + editorial label instead of an emoji),
   but multi-select, so a selected tile also gets a checkmark badge. */
.wizard-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 5 / 4;
  cursor: pointer;
}

.wizard-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.03) brightness(0.92);
  transition: transform 0.6s var(--ease-soft);
}

.wizard-card:hover .wizard-card-img { transform: scale(1.05); }

.wizard-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 18, 14, 0.15), rgba(20, 18, 14, 0.62));
  transition: background 0.4s var(--ease-soft);
}

/* Drawn as an ::after rather than an `outline`, because the absolutely
   positioned image + overlay paint on top of the parent's outline and hide it
   completely. Ivory rather than black: these tiles are multi-select and sit on
   a darkened photo, so a black edge disappears and the checkmark badge alone
   is too quiet a signal when picking several. */
.wizard-card.selected::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 2px solid var(--ivory);
  pointer-events: none;
}

.wizard-card.selected .wizard-card-overlay {
  background: linear-gradient(180deg, rgba(20, 18, 14, 0.3), rgba(20, 18, 14, 0.74));
}

.wizard-card-label {
  position: absolute;
  left: 14px;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  font-family: var(--font-editorial);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.1;
  color: var(--ivory);
  text-align: left;
}

.wizard-card-check {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  background: var(--ivory);
  color: var(--black);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.3s var(--ease-soft), transform 0.3s var(--ease-soft);
}

.wizard-card.selected .wizard-card-check { opacity: 1; transform: scale(1); }

.wizard-crosssell {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.crosssell-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border: 1.5px solid var(--line);
  border-radius: 4px;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s var(--ease-soft);
}

.crosssell-chip:hover { border-color: var(--gold-soft); }

.crosssell-chip.added {
  border-color: var(--gold-deep);
  background: linear-gradient(135deg, rgba(200,167,105,0.08), transparent);
}

.crosssell-add { font-size: 13px; color: var(--gold-deep); font-weight: 700; }

.wizard-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 420px;
}

.wizard-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
}

.wizard-results {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 1080px) {
  .wizard-grid { grid-template-columns: repeat(2, 1fr); }
  .wizard-results { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
  .wizard-panel { padding: 40px 22px 32px; border-radius: 4px; max-height: 92vh; }
  .wizard-grid { grid-template-columns: repeat(2, 1fr); }
  .wizard-results { grid-template-columns: 1fr; }
  .wizard-close { width: 44px; height: 44px; top: 14px; right: 14px; }
  .cookie-banner { left: 12px; right: 12px; bottom: 12px; padding: 18px; }
  .cookie-banner-actions { width: 100%; }
  .cookie-banner-actions .btn { flex: 1; }
}

@media (max-width: 480px) {
  .wizard-panel { padding: 30px 16px 24px; }
  .wizard-card-label { left: 11px; right: 10px; bottom: 10px; font-size: 16px; }
}

/* ============================================================
   Trust cards / process explainer / social proof
   ============================================================ */
.trust-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.trust-card {
  padding: 32px 26px;
  border-radius: 4px;
  background: var(--white);
  border: 1px solid var(--line-soft);
  text-align: left;
}

.trust-card .trust-icon { font-size: 26px; margin-bottom: 16px; }

.trust-card h3 {
  font-family: var(--font-editorial);
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}

.trust-card p { font-size: 13.5px; color: var(--text-muted); line-height: 1.6; font-weight: 300; }

.process-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 60px;
  position: relative;
}

.process-step { text-align: center; }

.process-step .process-num {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--black);
  color: var(--ivory);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-editorial);
  font-size: 22px;
  margin: 0 auto 22px;
}

.process-step h3 {
  font-family: var(--font-editorial);
  font-size: 19px;
  font-weight: 600;
  margin-bottom: 8px;
}

.process-step p { font-size: 13.5px; color: var(--text-muted); line-height: 1.6; font-weight: 300; max-width: 260px; margin: 0 auto; }

.social-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.social-proof-card {
  background: var(--white);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
}

.social-proof-media { aspect-ratio: 4/3; overflow: hidden; }
.social-proof-media img { width: 100%; height: 100%; object-fit: cover; }

.social-proof-body { padding: 22px 24px 26px; }
.social-proof-stars { color: var(--gold-deep); font-size: 13px; margin-bottom: 10px; }
.social-proof-text { font-size: 14px; color: var(--text-muted); line-height: 1.6; font-weight: 300; margin-bottom: 16px; }

.social-proof-author { display: flex; align-items: center; gap: 12px; }
.social-proof-avatar { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.social-proof-avatar img { width: 100%; height: 100%; object-fit: cover; }
.social-proof-name { font-size: 13px; font-weight: 700; }
.social-proof-role { font-size: 12px; color: var(--text-faint); }

@media (max-width: 1080px) {
  .trust-cards { grid-template-columns: repeat(2, 1fr); }
  .process-steps { grid-template-columns: 1fr; gap: 44px; }
  .social-proof-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Dashboards (konto.html / leverandor-dashboard.html)
   ============================================================ */
.dash-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 48px;
  align-items: flex-start;
}

.dash-nav {
  position: sticky;
  top: 110px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dash-nav a {
  padding: 13px 18px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  transition: all 0.25s var(--ease-soft);
}

.dash-nav a:hover { background: var(--white); color: var(--black); }
.dash-nav a.active { background: var(--black); color: var(--ivory); }

.dash-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 40px;
}

.dash-stat-card {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  padding: 24px 22px;
}

.dash-stat-card .num {
  font-family: var(--font-editorial);
  font-size: 30px;
  font-weight: 600;
}

.dash-stat-card .label { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; }

.dash-card {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  padding: 24px 26px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.dash-card-main { display: flex; align-items: center; gap: 16px; }

.dash-card-avatar {
  width: 52px;
  height: 52px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}

.dash-card-avatar img { width: 100%; height: 100%; object-fit: cover; }

.dash-card-title { font-weight: 700; font-size: 15px; }
.dash-card-sub { font-size: 13px; color: var(--text-muted); margin-top: 3px; }
.dash-card-actions { display: flex; gap: 10px; }

.dash-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}

@media (max-width: 1080px) {
  .dash-layout { grid-template-columns: 1fr; }
  .dash-nav { position: static; flex-direction: row; overflow-x: auto; }
  .dash-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .dash-stat-card { padding: 18px 16px; }
  .dash-stat-card .num { font-size: 24px; }
}

/* ============================================================
   Generic modal (contact provider, confirmations)
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  background: rgba(23, 20, 15, 0.6);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease-soft);
}

.modal-overlay.open { opacity: 1; pointer-events: auto; }

.modal-panel {
  background: var(--ivory);
  border-radius: 4px;
  max-width: 480px;
  width: 100%;
  padding: 40px 40px 34px;
  position: relative;
  box-shadow: var(--shadow-lift);
  transform: translateY(20px) scale(0.98);
  transition: transform 0.4s var(--ease);
}

.modal-overlay.open .modal-panel { transform: translateY(0) scale(1); }

.modal-close {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--text-muted);
  background: var(--white);
  border: 1px solid var(--line-soft);
  transition: all 0.3s var(--ease-soft);
}

.modal-close:hover { background: var(--black); color: var(--ivory); border-color: var(--black); }

.modal-title {
  font-family: var(--font-editorial);
  font-size: 24px;
  font-weight: 600;
  margin: 4px 0 22px;
}

/* Mandatory contract gate (vendor dashboard) — a non-dismissible modal that
   forces a freshly-registered vendor to accept the supplier agreement before
   using their account. */
.contract-gate-panel { max-width: 560px; }
.contract-gate-lead {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 18px;
}
.contract-gate-text {
  max-height: 40vh;
  overflow-y: auto;
  white-space: pre-wrap;
  font-size: 13px;
  line-height: 1.7;
  color: var(--black);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 18px 20px;
}

/* Consent checkboxes (legal gates before booking / payment) */
.consent-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.consent-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--gold-deep);
  flex-shrink: 0;
}

.consent-row label { font-size: 13.5px; color: var(--text-muted); line-height: 1.55; }
.consent-row a { color: var(--gold-deep); font-weight: 600; text-decoration: underline; }

.policy-box {
  background: var(--champagne-soft);
  border-radius: 4px;
  padding: 20px 22px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.7;
  margin: 20px 0;
}

.policy-box strong { color: var(--black); }

/* ============================================================
   Notification bell + dropdown panel (Part 10)
   ============================================================ */
.notif-bell {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  background: none;
  border: 1px solid var(--line-soft);
  cursor: pointer;
  transition: all 0.3s var(--ease-soft);
}

.notif-bell:hover { border-color: var(--gold-soft); }

.notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 100px;
  background: var(--color-danger);
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.notif-badge[hidden] { display: none; }

.notif-panel {
  position: fixed;
  top: 78px;
  right: 24px;
  width: 360px;
  max-width: calc(100vw - 48px);
  max-height: 70vh;
  overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  box-shadow: var(--shadow-lift);
  z-index: 4500;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.25s var(--ease-soft), transform 0.25s var(--ease-soft);
}

.notif-panel.show { opacity: 1; transform: translateY(0); }

.notif-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line-soft);
}

.notif-panel-head h3 { font-family: var(--font-editorial); font-size: 17px; font-weight: 600; }

.notif-panel-actions { display: flex; gap: 12px; }

.notif-panel-list { padding: 8px; }

.notif-item {
  padding: 12px 14px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s var(--ease-soft);
}

.notif-item:hover { background: var(--champagne-soft); }
.notif-item.unread { background: rgba(200, 167, 105, 0.1); }

.notif-item-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 3px; }
.notif-item-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--gold-deep); font-weight: 700; }
.notif-item-time { font-size: 11.5px; color: var(--text-faint); flex-shrink: 0; }
.notif-item-title { font-size: 13.5px; font-weight: 600; color: var(--black); }
.notif-item-body { font-size: 13px; color: var(--text-muted); margin-top: 2px; }

/* Notification preference toggles — rendered inside the pre-existing
   .modal-overlay/.modal-panel component (defined below, first used here). */
.pref-list { display: flex; flex-direction: column; gap: 14px; max-height: 50vh; overflow-y: auto; }
.pref-row { border: 1px solid var(--line-soft); border-radius: 4px; padding: 14px 16px; }
.pref-row-label { font-size: 13.5px; font-weight: 600; margin-bottom: 8px; }
.pref-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); margin-right: 18px; }
.pref-toggle input { accent-color: var(--gold-deep); }

/* ============================================================
   Messaging panel — conversation list + thread view (Part 10)
   ============================================================ */
.msg-panel { position: relative; min-height: 400px; }

.msg-conv-card { cursor: pointer; }
.msg-unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 100px;
  background: var(--gold-deep);
  color: var(--white);
  font-size: 10.5px;
  font-weight: 700;
  margin-left: 8px;
  vertical-align: middle;
}

.msg-thread { display: flex; flex-direction: column; height: 560px; }
.msg-thread[hidden] { display: none; }

.msg-thread-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 14px;
}

.msg-thread-title { font-weight: 700; font-size: 14.5px; }

.msg-thread-messages {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 4px 14px;
}

.msg-bubble {
  max-width: 72%;
  background: var(--champagne-soft);
  border-radius: 16px 16px 16px 4px;
  padding: 12px 16px;
  align-self: flex-start;
}

.msg-bubble.own {
  align-self: flex-end;
  background: var(--gold-deep);
  color: var(--ivory);
  border-radius: 16px 16px 4px 16px;
}

.msg-bubble-body { font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; }
.msg-bubble-time { font-size: 10.5px; opacity: 0.6; margin-top: 6px; }

.msg-attachment {
  display: block;
  margin-top: 8px;
  font-size: 12.5px;
  background: none;
  border: none;
  text-decoration: underline;
  cursor: pointer;
  color: inherit;
  padding: 0;
}

.msg-composer {
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--line-soft);
  padding-top: 14px;
}

.msg-composer input[type="text"] {
  flex: 1;
  padding: 12px 16px;
  border-radius: 2px;
  border: 1px solid var(--line-soft);
  font-size: 13.5px;
  font-family: var(--font-body);
}

.btn-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line-soft);
  background: none;
  font-size: 15px;
  cursor: pointer;
  flex-shrink: 0;
}

.btn-link {
  background: none;
  border: none;
  color: var(--gold-deep);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.btn-link:hover { text-decoration: underline; }

@media (max-width: 680px) {
  .notif-panel { right: 12px; left: 12px; width: auto; }
  .msg-thread { height: 480px; }
  .msg-bubble { max-width: 88%; }
}

/* ============================================================
   Legal / policy document pages (personvern, vilkår, DPA)
   ============================================================ */
.legal-disclaimer {
  background: var(--champagne-soft);
  border-radius: 4px;
  padding: 18px 22px;
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.7;
  margin: 24px 0 48px;
  max-width: 720px;
}

.legal-disclaimer strong { color: var(--black); }

.legal-meta {
  color: var(--text-muted);
  font-size: 13px;
  margin-bottom: 6px;
}

.legal-toc {
  max-width: 720px;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  padding: 22px 26px;
  margin-bottom: 44px;
}

.legal-toc h4 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.legal-toc ol {
  margin: 0;
  padding-left: 18px;
  columns: 2;
  column-gap: 24px;
}

.legal-toc li { margin-bottom: 6px; font-size: 13.5px; }
.legal-toc a { color: var(--black); font-weight: 500; }
.legal-toc a:hover { color: var(--gold-deep); }

.legal-content { max-width: 720px; }

.legal-content h3 {
  font-family: var(--font-editorial);
  font-weight: 600;
  font-size: 21px;
  margin: 44px 0 14px;
  /* Her sto det `scroll-margin-top: 120px` for å holde overskriften unna den
     faste navigasjonsraden. Jobben gjøres nå av `scroll-padding-top` på html,
     som gjelder ALLE ankere på hele nettstedet og ikke bare disse. Sto begge,
     la de seg oppå hverandre: 110 + 120 = 230 piksler tomrom over
     «3. Bookingprosessen», som ser ut som at hoppet traff feil. Én kilde til
     tallet, i html. */
}

.legal-content h3:first-child { margin-top: 0; }

/* Underoverskrift inne i en paragraf («Sletting av konto», «Kundens
   avbestilling»). Mindre og tettere enn h3, så leseren ser at den hører til
   avsnittet over og ikke starter et nytt nummerert punkt. */
.legal-content h4 {
  font-family: var(--font-editorial);
  font-weight: 600;
  font-size: 16px;
  color: var(--black);
  margin: 26px 0 10px;
}

.legal-content p {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.8;
  font-weight: 300;
  margin-bottom: 14px;
}

.legal-content ul {
  margin: 0 0 14px 22px;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.8;
  font-weight: 300;
}

.legal-content li { margin-bottom: 6px; }
.legal-content strong { color: var(--black); font-weight: 600; }
.legal-content a { color: var(--gold-deep); font-weight: 600; }

/* ==========================================================================
   Booking flow — Part 5: conversion & trust
   Vendor strip, step progress text, live summary sidebar, review rows,
   focus-visible states and reduced-motion support.
   ========================================================================== */

.booking-vendor-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--white);
  margin-bottom: 28px;
}

.booking-vendor-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--sand);
}

.booking-vendor-id { flex: 1; min-width: 0; }

.booking-vendor-name {
  font-weight: 600;
  font-size: 15px;
  color: var(--black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.booking-vendor-meta {
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.booking-vendor-reassure {
  font-size: 12.5px;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.step-progress-text {
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  margin: 10px 0 32px;
  font-weight: 500;
}

/* Same "Mest populær" concept as .package-card.featured::before — aligned
   to the same badge weight/tracking so the label reads identically
   wherever it appears, just inline instead of absolutely positioned. */
.option-tag {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--gold-deep);
  background: rgba(200,167,105,0.1);
  border-radius: 2px;
  padding: 5px 12px;
  margin-left: 8px;
}

.prefill-note {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 8px;
}

.prefill-note a { color: var(--gold-deep); font-weight: 600; }

/* Live summary sidebar — persistent across steps 1-4 */

.live-summary { position: sticky; top: 100px; align-self: flex-start; }

.live-summary .price-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

/* .booking-summary / .row / .row.total already styled at line ~1557 —
   the live-summary aside reuses that exact same component markup, so no
   override is needed here beyond the price-line tweak above. */

.live-summary .booking-note {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-top: 14px;
}

.live-summary .booking-note a { color: var(--gold-deep); font-weight: 600; }

/* Step 4 — review & send */

.review-list { display: flex; flex-direction: column; gap: 0; }

.review-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.review-row:last-child { border-bottom: none; }

.review-row-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 600;
  flex-shrink: 0;
  width: 120px;
}

.review-row-value { flex: 1; font-size: 15px; color: var(--black); font-weight: 500; }
.review-row-sub { font-size: 13px; color: var(--text-muted); margin-top: 4px; }

.review-row-edit {
  background: none;
  border: none;
  color: var(--gold-deep);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
  flex-shrink: 0;
  transition: color 0.2s var(--ease-soft);
}

.review-row-edit:hover { color: var(--black); text-decoration: underline; }

/* Confirmation step — hide the running summary once the request is sent */

.split-booking.confirm-mode { display: block; }
.confirm-mode .live-summary { display: none; }

@media (max-width: 1080px) {
  .live-summary { position: static; }
}

@media (max-width: 480px) {
  /* A fixed 120px label + 16px gap leaves too little room for the value on
     very narrow phones (320-360px) — stack label above value instead. */
  .review-row { flex-direction: column; gap: 4px; }
  .review-row-label { width: auto; }
}

/* Focus-visible — keyboard navigation must always be clearly indicated */

.option-card:focus-visible,
.date-cell:focus-visible,
.package-card:focus-visible,
.review-row-edit:focus-visible,
/* Hero-søket er custom comboboxer/listbox-valg bygget av <div>-er, ikke
   <button>/<a>, så de treffes ikke av selektorene under og trenger egne
   oppføringer for at tastaturfokus skal være synlig. */
.search-field:focus-visible,
.search-panel-option:focus-visible,
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
}

/* Skip link — first focusable element on every page, lets keyboard and
   screen-reader users jump straight past the nav to the main content. */
.skip-link {
  position: absolute;
  top: -60px;
  left: 16px;
  z-index: 1000;
  background: var(--black);
  color: var(--white) !important;
  padding: 14px 22px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s var(--ease-soft);
}
.skip-link:focus {
  top: 16px;
}

/* Visually hidden — keep content available to screen readers without
   showing it visually (used for page h1s on pages where a visible
   duplicate title would be redundant with the design). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   Admin console (Part 11)
   ============================================================ */
.admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: flex-end;
  margin-bottom: 24px;
}

.admin-toolbar .booking-field { margin-bottom: 0; min-width: 170px; }

.admin-table-wrap {
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 20px;
}

.admin-table-scroll { overflow-x: auto; }

.admin-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }

.admin-table th,
.admin-table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
  white-space: nowrap;
}

.admin-table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  background: var(--champagne-soft);
}

.admin-table tr:last-child td { border-bottom: none; }
.admin-table td.admin-cell-actions { display: flex; gap: 8px; flex-wrap: wrap; white-space: normal; }
.admin-table td.admin-cell-wrap { white-space: normal; }

.admin-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 20px 0 40px;
  font-size: 13px;
  color: var(--text-muted);
}

.admin-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--champagne-soft);
  color: var(--black-soft);
  white-space: nowrap;
}

.admin-badge.good { background: rgba(63,122,82,0.16); color: var(--color-success); }
.admin-badge.bad { background: rgba(177,74,74,0.14); color: var(--color-danger); }
.admin-badge.warn { background: rgba(200,167,105,0.16); color: var(--gold-deep); }
.admin-badge.info { background: rgba(74,99,168,0.14); color: var(--color-info); }

.admin-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

.admin-stat-note {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: -6px;
  margin-bottom: 28px;
}

.admin-access-denied {
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
  padding: 60px 20px;
}

.admin-modal-wide .modal-panel { max-width: 620px; }

.admin-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.admin-section-head h2 {
  font-family: var(--font-editorial);
  font-size: 21px;
  font-weight: 600;
}

@media (max-width: 1080px) {
  .admin-table { font-size: 12.5px; }
  .admin-table th, .admin-table td { padding: 10px 12px; }
}

@media (max-width: 640px) {
  .admin-form-grid { grid-template-columns: 1fr; }
}

/* Reduced motion — respect user preference across the whole site */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Mockup-forsiden: grid-oppsett flyttet ut av inline-stil slik at det
   kan kollapse responsivt. Desktop-verdiene her = mockupen 1:1. */
.mkg-cat { grid-template-columns: repeat(4, 1fr); }
.mkg-vendors { grid-template-columns: repeat(3, 1fr); }
.mkg-rental { grid-template-columns: 1fr 1.1fr; }
.mkg-insp { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; height: 560px; }
.mkg-insp-big { grid-row: 1 / 3; }

/* De små inspirasjonsrutene hadde bare text-shadow bak den hvite labelen. Det
   holder mot et mørkt motiv, men forsvinner mot lyse — gullkandelabre, hvite
   stoler og gullringer på hvit tekstil vasket teksten helt bort. Den store ruta
   har alltid hatt en egen gradient-span; dette er samme løsning i CSS, så de fire
   små rutene tåler hvilket som helst bilde uten at labelen må sjekkes manuelt. */
.mkg-insp > a:not(.mkg-insp-big)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 48%, rgba(20, 18, 14, 0.62));
  pointer-events: none;
}
/* Labelen er søsken til ::after, så den trenger eksplisitt stacking for å ligge
   over gradienten. */
.mkg-insp > a:not(.mkg-insp-big) > span { position: relative; z-index: 2; }
.mkg-how { grid-template-columns: repeat(3, 1fr); }
/* 1.5fr brand + four equal link columns (Utforsk / For par / For leverandører /
   Juridisk). The Juridisk column carries the legally required links (personvern,
   vilkår, databehandleravtale) that every other page's footer already has, so
   this column count must stay in sync with index.html's footer markup. */
.mkg-footer { grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; }
/* Denne sto som gap:12px inline på hver av de fire lenkekolonnene. Den måtte
   hit ut for å kunne overstyres: treffmålsregelen lenger ned setter gap: 0 på
   berøringsbredder, og en inline-stil vinner over et stilark uansett hvor
   spesifikk selektoren er. Verdien er den samme som før på desktop. */
.mkg-footer > div { gap: 12px; }

@media (max-width: 1080px) {
  .mkg-cat { grid-template-columns: repeat(2, 1fr); }
  .mkg-vendors { grid-template-columns: repeat(2, 1fr); }
  .mkg-rental { grid-template-columns: 1fr; gap: 40px; }
  .mkg-footer { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
  .mkg-vendors { grid-template-columns: 1fr; }
  .mkg-how { grid-template-columns: 1fr; gap: 32px; }
  .mkg-footer { grid-template-columns: 1fr; }
  .mkg-insp { grid-template-columns: 1fr; grid-template-rows: none; height: auto; }
  .mkg-insp > a { height: 220px; }
  .mkg-insp-big { grid-row: auto; height: 300px; }
}

/* ------------------------------------------------------------------
   Treffmål på berøringsskjerm (forsiden)
   ------------------------------------------------------------------
   Målt på 375px: bunntekstlenkene var 20,5px høye, den nederste
   juridiske stripa 17,5px, og «Se alle …» 23px. Anbefalt minstemål er
   44×44px, og forskjellen merkes ikke som «litt vanskelig» — den
   merkes som at man treffer nabolenka. I bunnteksten sto lenkene 12px
   fra hverandre, altså er det bomsonen som er problemet, ikke lenka.

   Breddegrensen er 1080px og ikke 680px med vilje: den følger
   .mkg-footer over, og nettbrett i den bredden er berøringsskjermer.
   (pointer: coarse hadde vært det semantisk riktige, men da ville
   fiksen være usynlig for enhver som ettermåler i en vanlig nettleser
   — det er verdt mer at målingen kan gjentas.)

   To forskjellige grep, fordi de to stedene har ulikt problem:
   bunnteksten får ekte 44px-rader, mens «Se alle …» får et usynlig
   ::after som strekker treffområdet uten å flytte noe. Det siste går
   bare an der ingenting klikkbart ligger inntil — i bunnteksten ville
   overlappende felt ha gitt nettopp de bomtrykkene fiksen skal fjerne. */
@media (max-width: 1080px) {
  /* gap: 0 er ikke en innstramming — radene er 44px, så avstanden
     mellom to lenketekster går fra 32,5px (20,5 + 12) til 44px. Rammen
     rundt vokser, teksten står like luftig. */
  .mkg-footer > div { gap: 0; }
  .mkg-footer > div > a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  /* Kolonneoverskriftene ("Utforsk", "For par", …) er <span> og ikke
     lenker, så de mister avstanden når gap forsvinner. Den legges
     tilbake her — ellers klistrer overskriften seg til første lenke. */
  .mkg-footer > div > span { margin-bottom: 4px; }

  .mkg-footer-legal a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    /* «Vilkår» er ~38px bred ved 12px skrift. min-width tar seg av
       breddekravet uten å endre skriftstørrelsen. */
    min-width: 44px;
  }

  /* Streken under «Se alle …» ER designet — den er en understreking av
     teksten, ikke en ramme. Derfor kan boksen ikke vokse: vokser den
     nedover flytter streken seg vekk fra teksten, vokser den oppover
     (raden er align-items: flex-end) åpner det et hull ned fra
     overskriften når raden brekker på mobil. ::after ligger utenfor
     layouten og løser begge deler. */
  .mkg-more { position: relative; }
  .mkg-more::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 44px;
  }

  /* Toppraden var også under mål: logoen 30px, «Start planleggingen»
     38px. Begge sitter i en rad som allerede ER 44px høy (.nav har
     padding: 17px 0 rundt en 44px container), så de to reglene under
     fyller høyden som finnes fra før — navigasjonen blir ikke én piksel
     høyere, bare klikkbar i hele sin egen rad. Verifisert på 375, 480,
     680 og 1024px.

     Disse to selektorene er felles for alle sidene og ikke bare
     forsiden. Det er med vilje: en logo er 30px høy overalt, og en
     regel som bare gjaldt index.html ville etterlate nøyaktig samme
     feil på de tolv andre. */
  .nav .logo { display: flex; align-items: center; min-height: 44px; }
  .nav-actions .btn { min-height: 44px; }
}

/* ============================================================
   PART 18 — LEVERANDØR-ONBOARDING (bli-leverandor.html)
   ============================================================
   Veiviseren gjenbruker booking-veiviserens komponenter uendret
   (.steps-header, .step-item, .booking-panel, .booking-field,
   .option-grid/.option-card, .booking-actions, .review-list,
   .consent-row, .confirm-box). Blokken under legger BARE til det
   som ikke finnes fra før — ingen nye farger, skygger eller
   typografiskalaer, alt henter fra de samme variablene. */

/* Elleve steg, ikke fire. Samme sirkler, samme gull-fyll, samme
   active/done-tilstander — men en full .step-label per steg ville
   blitt ~1600px bred. Etikettene bæres i stedet av
   .step-progress-text under raden ("Steg 3 av 11 · Legitimasjon"),
   som allerede navngir gjeldende steg. Raden scroller horisontalt
   framfor å brekke i to linjer: en progresjonslinje som wrapper
   leses som to separate rader og mister betydningen. */
.steps-header.steps-compact {
  margin-bottom: 18px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 0;
}
.steps-header.steps-compact::-webkit-scrollbar { display: none; }
.steps-header.steps-compact .step-circle {
  width: 32px;
  height: 32px;
  font-size: 12.5px;
}
.steps-header.steps-compact .step-label { display: none; }
.steps-header.steps-compact .step-connector {
  width: 18px;
  margin: 0 7px;
}

@media (max-width: 900px) {
  .steps-header.steps-compact { justify-content: flex-start; }
  .steps-header.steps-compact .step-circle { width: 26px; height: 26px; font-size: 11px; }
  .steps-header.steps-compact .step-connector { width: 10px; margin: 0 4px; }
  /* Nullstiller mobilregelen for booking-veiviseren (transform: scale)
     — den krymper en rad som allerede er kompakt, og gjør sifrene
     uleselige. */
  .steps-header.steps-compact { transform: none; }
}

/* Autolagring per steg. Rolig og lavmælt — dette er en bekreftelse,
   ikke en handling, og skal aldri konkurrere med «Neste steg». */
.onboard-save-state {
  text-align: center;
  font-size: 12.5px;
  color: var(--text-faint);
  min-height: 18px;
  margin: 0 0 26px;
  font-weight: 500;
  transition: color 0.3s var(--ease-soft);
}
.onboard-save-state.saved { color: var(--color-success); }
.onboard-save-state.failed { color: var(--color-danger); }

/* Filopplasting (legitimasjon steg 3, portefølje steg 6). */
.onboard-upload {
  border: 1.5px dashed var(--gold-soft);
  border-radius: 4px;
  background: var(--ivory);
  padding: 34px 24px;
  text-align: center;
  transition: all 0.3s var(--ease-soft);
  cursor: pointer;
}
.onboard-upload:hover,
.onboard-upload.dragover {
  border-color: var(--gold);
  background: var(--champagne-soft);
}
.onboard-upload-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--black);
  margin-bottom: 6px;
}
.onboard-upload-hint {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 300;
  line-height: 1.6;
}

/* Filen som ligger inne nå (steg 3). Ingen forhåndsvisning av selve
   bildet: dette er et pass eller førerkort, og det skal ikke ligge
   og lyse på skjermen i et åpent kontorlandskap. */
.onboard-file-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--white);
  margin-top: 18px;
}
.onboard-file-name {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--black);
  word-break: break-all;
}
.onboard-file-meta {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 3px;
  font-weight: 300;
}

/* Porteføljebilder (steg 6). Samme 4:5-format som leverandørkortene
   og galleriet på leverandor.html, så leverandøren ser bildene i
   nøyaktig den beskjæringen de får offentlig. */
.onboard-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
  margin-top: 22px;
}
.onboard-thumb {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  background: var(--ivory-deep);
}
.onboard-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.onboard-thumb-bar {
  padding: 10px 12px;
  border-top: 1px solid var(--line-soft);
  background: var(--white);
}
.onboard-thumb-bar input {
  width: 100%;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--black);
  padding: 0;
}
.onboard-thumb-bar input:focus { outline: none; }
.onboard-thumb-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.onboard-thumb-btn {
  border: none;
  background: none;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint);
  cursor: pointer;
  padding: 0;
}
.onboard-thumb-btn:hover { color: var(--black); text-decoration: underline; }
.onboard-thumb-btn.danger:hover { color: var(--color-danger); }
.onboard-thumb.is-primary { border-color: var(--gold); }
.onboard-thumb-primary-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--black);
  color: var(--ivory);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 2px;
}

/* Sjekkliste på oppsummeringssteget (steg 11). `missing`-nøklene fra
   VendorApplicationService.missingForSubmit oversettes til disse
   radene — grønn hake for det som er på plass, rød for det som
   mangler, og hver mangel er en snarvei tilbake til sitt eget steg. */
.onboard-checklist {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 30px;
}
.onboard-check {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
}
.onboard-check:last-child { border-bottom: none; }
.onboard-check-mark {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  background: var(--color-success);
  color: var(--white);
}
.onboard-check.missing .onboard-check-mark { background: var(--color-danger); }
.onboard-check-label { flex: 1; font-size: 14.5px; color: var(--black); font-weight: 400; }
.onboard-check.missing .onboard-check-label { color: var(--text-muted); }

/* Statusbanner øverst når søknaden er sendt inn, avvist eller har
   fått endringsforespørsel. Gjenbruker .policy-box' ramme. */
.onboard-status-banner {
  border: 1px solid var(--gold-soft);
  border-left: 3px solid var(--gold);
  background: var(--champagne-soft);
  border-radius: 4px;
  padding: 18px 22px;
  margin-bottom: 34px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--black);
  font-weight: 300;
}
.onboard-status-banner strong { font-weight: 600; }
.onboard-status-banner.rejected {
  border-left-color: var(--color-danger);
  border-color: rgba(177, 74, 74, 0.3);
  background: rgba(177, 74, 74, 0.06);
}

@media (max-width: 680px) {
  .onboard-thumbs { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------------------------
   Smaltelefon-korreksjon (≤360px): siste CTA-knapp i champagne-seksjonen

   Knappen i "FINAL CTA"-seksjonen på sok.html har en lang norsk etikett
   ("Start planleggingen — det er gratis") og en inline `padding:18px 40px`.
   Sammen med `.btn { white-space: nowrap }` blir knappen 317px bred, mens
   .container bare gir 288px innhold på en 320px skjerm. Resultatet var at
   dokumentet fikk scrollWidth 332 mot en clientWidth på 320 — altså 12px
   horisontal overflow, og teksten ble klippet av `body { overflow-x: clip }`.

   Her lar vi kun DENNE knappen bryte teksten over to linjer under 360px.
   Regelen er bevisst smal:
     - `.section.bg-champagne > .container > .btn` treffer ikke `.nav-actions
       .btn` (en global `.btn { white-space: normal }` gjorde navigasjonen
       12px høyere på alle sider) og heller ikke `.cookie-banner-actions .btn`
       (som har `flex: 1` og da ville brutt over to linjer).
     - Media-spørringen stopper på 360px, så 375px og oppover er urørt.
   Målt: sok.html scrollWidth 332 → 320 ved 320px; 0 endrede elementbokser på
   alle andre sider og på 360/375/414px.
   --------------------------------------------------------------------------- */
@media (max-width: 360px) {
  .section.bg-champagne > .container > .btn {
    max-width: 100%;
    white-space: normal;
  }
}

/* ---------------------------------------------------------------------------
   Smaltelefon-korreksjon (≤360px): trykkflaten på menyknappen

   `@media (max-width: 1199px)` over setter .nav-hamburger til 44×44 — den
   størrelsen er riktig og skal stå. Men knappen er et flex-barn i
   .nav-actions med `flex-shrink: 1` (standardverdien), og under ~367px er det
   ikke plass til den erklærte bredden ved siden av gullknappen. Da krymper
   flex-en den ned mot min-content, altså bredden på selve ☰-tegnet:

     målt på index.html, .nav-actions = 155px innvendig
       320px skjerm → knappen 17,6 × 44   (☰-tegnet alene)
       360px skjerm → knappen 37,8 × 44
       367px skjerm → knappen 44   × 44   (erklært bredde nådd)

   Høyden holder 44px hele veien, så feilen er lett å overse i et skjermbilde;
   det er bredden som forsvinner. Og dette er ikke en hvilken som helst knapp:
   under 1200px er den eneste veien til Inspirasjon, Kategorier, Utleie, Om
   Aveli, For leverandører og Logg inn. På 320px er den 17,6px bred, godt under
   minstemålet på 24×24 CSS-piksler i WCAG 2.2 SC 2.5.8 Target Size (Minimum) —
   som er rettslig bindende i Norge via forskrift om universell utforming av IKT.

   RETTINGEN ENDRER IKKE ÉN PIKSEL AV DESIGNET. Å slippe `flex-shrink: 0` løs
   var det nærliggende, men da må gullknappen gi fra seg 26px, og den har
   `white-space: nowrap`: den ville rent utover .nav-actions og lagt seg oppå
   logoen (målt: gullknappen starter på x=129,2 og logoen slutter på x=125 —
   4px klaring i dag, altså 22px overlapp etterpå). Layouten under 367px har
   rett og slett ikke rommet.

   Derfor utvides bare TRYKKFLATEN, ikke boksen: et gjennomsiktig ::before uten
   bakgrunn, absolutt plassert, som strekker seg inn i de 8px luft mot
   gullknappen og de 16px container-padding mot skjermkanten. Tegnet, boksen og
   alle naboer står nøyaktig der de sto.

     320px: trykkflate x 280,4 → 318   (37,6 × 44) — 2px klaring til
            gullknappen (som slutter på 278,4) og 2px inn fra skjermkanten
     360px: trykkflate x 300,2 → 358   (57,8 × 44)

   Media-spørringen stopper på 360px, så 375px og oppover er urørt — der er
   knappen allerede 44px bred av seg selv.
   --------------------------------------------------------------------------- */
@media (max-width: 360px) {
  .nav-hamburger {
    position: relative;
  }
  /* Ingen bakgrunn, ingen kant, ingen farge: dette er en trykkflate, ikke noe
     man skal kunne se. `right`/`left` er negative for å nå ut i luften rundt —
     318 < 320 og 358 < 360, så den utløser ingen horisontal overflyt. */
  .nav-hamburger::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -6px;
    right: -14px;
  }
}

/* Tilbaketrekking av samtykke (personvern.html punkt 8, art. 7 nr. 3).
   Knappen og statusteksten står i et vanlig avsnitt midt i løpende tekst;
   flex her er kun for å holde dem på linje og la statusteksten brekke ned
   på smal skjerm i stedet for å presse knappen ut av spalten. Ingen ny
   komponent, ingen endring i eksisterende regler. */
.consent-withdraw {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.consent-withdraw-status {
  font-size: 0.9rem;
  color: var(--text-muted);
}