/* =========================================================================
   MIRA SALONG
   Designsystem: matt kull, børstet gull, art déco-linjer.
   Én bevisst mørk drakt – siden skal føles som å gå inn i salongen.
   ========================================================================= */

/* --------------------------------------------------------------- fonter */

@font-face {
  font-family: 'Instrument Serif';
  src: url('../fonts/instrument-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('../fonts/instrument-400-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-500-normal.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* --------------------------------------------------------------- tokens */

:root {
  --svart:        #08080a;
  --svart-2:      #0e0e11;
  --kort:         #141418;
  --kort-hev:     #1b1b21;
  --linje:        rgba(201, 162, 39, 0.16);
  --linje-sterk:  rgba(201, 162, 39, 0.42);

  --gull:         #c9a227;
  --gull-lys:     #ecd18a;
  --gull-dyp:     #8a6b14;
  --gull-flate:   linear-gradient(103deg, #f0dda6 0%, #c9a227 42%, #e5c877 78%, #b08c1c 100%);

  --tekst:        #ece8de;
  --tekst-2:      #a8a396;
  --tekst-3:      #6f6b61;

  --apen:         #5fd48a;
  --snart:        #f0b429;
  --stengt:       #ef6b6b;

  --bredde:       1180px;
  --radius:       14px;
  --radius-stor:  22px;

  --skygge:       0 18px 50px -18px rgba(0, 0, 0, 0.9);
  --skygge-gull:  0 14px 40px -14px rgba(201, 162, 39, 0.42);

  --overgang:     240ms cubic-bezier(0.22, 0.61, 0.36, 1);

  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;

  --topp:  68px;   /* høyde på fast topplinje  */
  --bunn:  0px;    /* høyde på mobil handlingslinje (settes i media query) */
}

/* --------------------------------------------------------------- basis */

*, *::before, *::after { box-sizing: border-box; }

/* Nettleserens egen [hidden]-regel taper mot en hvilken som helst display-regel
   vi setter selv. Uten denne blir skjulte bokser liggende synlige. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topp) + 18px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--svart);
  color: var(--tekst);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  padding-bottom: var(--bunn);
}

body.laast { overflow: hidden; }

img, svg, video { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

a { color: var(--gull-lys); text-decoration-color: rgba(201, 162, 39, 0.4); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--gull); }

:focus-visible {
  outline: 2px solid var(--gull-lys);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: rgba(201, 162, 39, 0.3); color: #fff; }

/* Fint filmkorn over hele siden – gir dybde uten å koste et bilde. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  opacity: 0.4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.09'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------- typografi */

h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.05; letter-spacing: -0.015em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.display {
  font-family: var(--serif);
  font-size: clamp(2.9rem, 8.5vw, 6.2rem);
  line-height: 0.96;
  letter-spacing: -0.025em;
}

.seksjonstittel {
  font-family: var(--serif);
  font-size: clamp(2.1rem, 5.2vw, 3.5rem);
  line-height: 1.02;
}

.gull-tekst {
  background: var(--gull-flate);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.kursiv { font-style: italic; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gull);
  margin: 0 0 1.1rem;
}
.eyebrow::before {
  content: '';
  width: 26px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gull));
}
.eyebrow.midt { justify-content: center; }
.eyebrow.midt::after {
  content: '';
  width: 26px; height: 1px;
  background: linear-gradient(90deg, var(--gull), transparent);
}

.ingress {
  font-size: clamp(1.02rem, 1.8vw, 1.18rem);
  color: var(--tekst-2);
  max-width: 56ch;
}

.smaatekst { font-size: 0.85rem; color: var(--tekst-3); }

/* --------------------------------------------------------------- layout */

.ramme {
  width: 100%;
  max-width: var(--bredde);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2.5rem);
}

section { position: relative; }

.seksjon { padding-block: clamp(4rem, 9vw, 7.5rem); }
.seksjon-topp { margin-bottom: clamp(2.4rem, 5vw, 3.8rem); }
.seksjon-topp.midt { text-align: center; }
.seksjon-topp.midt .ingress { margin-inline: auto; }

.delelinje {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--linje), transparent);
  border: 0; margin: 0;
}

/* --------------------------------------------------------------- knapper */

.knapp {
  --bg: transparent;
  --fg: var(--tekst);
  --kant: var(--linje-sterk);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.95rem 1.6rem;
  min-height: 52px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--kant);
  border-radius: 999px;
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--overgang), background var(--overgang),
              border-color var(--overgang), box-shadow var(--overgang), color var(--overgang);
}
.knapp:hover { transform: translateY(-2px); }
.knapp:active { transform: translateY(0); }

.knapp-gull {
  --bg: var(--gull-flate);
  --fg: #14100a;
  --kant: transparent;
  box-shadow: var(--skygge-gull);
  font-weight: 700;
}
.knapp-gull:hover { box-shadow: 0 18px 46px -12px rgba(201, 162, 39, 0.6); }

.knapp-linje:hover {
  border-color: var(--gull);
  background: rgba(201, 162, 39, 0.08);
  color: var(--gull-lys);
}

.knapp-stor { padding: 1.15rem 2.1rem; min-height: 60px; font-size: 1rem; }
.knapp-liten { padding: 0.55rem 1.05rem; min-height: 40px; font-size: 0.84rem; }

.knapp svg { width: 1.15em; height: 1.15em; flex: none; }

/* --------------------------------------------------------------- status */

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.42rem 0.95rem 0.42rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--linje);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--tekst-2);
  white-space: nowrap;
}
.status b { color: var(--tekst); font-weight: 600; }

.prikk {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--tekst-3);
  flex: none;
  position: relative;
}
.status[data-tilstand='apen'] .prikk { background: var(--apen); }
.status[data-tilstand='apen'] .prikk::after {
  content: '';
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--apen);
  animation: puls 2.4s ease-out infinite;
}
.status[data-tilstand='snart'] .prikk { background: var(--snart); }
.status[data-tilstand='stengt'] .prikk { background: var(--stengt); }

@keyframes puls {
  0%   { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* --------------------------------------------------------------- topplinje */

.topp {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 500;
  height: var(--topp);
  display: flex;
  align-items: center;
  background: rgba(8, 8, 10, 0.72);
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--overgang), background var(--overgang);
}
.topp[data-rullet='ja'] {
  border-bottom-color: var(--linje);
  background: rgba(8, 8, 10, 0.92);
}
.topp .ramme {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.merke {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: inherit;
  margin-right: auto;
}
.merke__emblem { width: 38px; height: 38px; flex: none; }
.merke__navn {
  font-family: var(--serif);
  font-size: 1.32rem;
  line-height: 1;
  letter-spacing: 0.01em;
}
.merke__sted {
  display: block;
  font-family: var(--sans);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gull);
  margin-top: 3px;
}

.topp__lenker { display: flex; align-items: center; gap: 1.7rem; }
.topp__lenker a {
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--tekst-2);
  text-decoration: none;
  transition: color var(--overgang);
}
.topp__lenker a:hover { color: var(--gull-lys); }

@media (max-width: 940px) {
  .topp__lenker { display: none; }
}
@media (max-width: 460px) {
  .topp .status { display: none; }
}

/* --------------------------------------------------------------- driftsmelding */

.melding {
  position: relative;
  z-index: 400;
  margin-top: var(--topp);
  border-bottom: 1px solid var(--linje);
  background: linear-gradient(180deg, rgba(201, 162, 39, 0.13), rgba(201, 162, 39, 0.05));
}
.melding[hidden] { display: none; }
.melding[data-type='viktig'] { background: linear-gradient(180deg, rgba(240, 180, 41, 0.16), rgba(240, 180, 41, 0.05)); }
.melding[data-type='stengt'] { background: linear-gradient(180deg, rgba(239, 107, 107, 0.16), rgba(239, 107, 107, 0.05)); }

.melding .ramme {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding-block: 0.95rem;
}
.melding__ikon { flex: none; width: 22px; height: 22px; color: var(--gull-lys); margin-top: 2px; }
.melding[data-type='stengt'] .melding__ikon { color: var(--stengt); }
.melding__tittel { font-weight: 600; font-size: 0.95rem; margin-bottom: 0.15rem; }
.melding__tekst { font-size: 0.92rem; color: var(--tekst-2); }

/* --------------------------------------------------------------- hero */

.hero {
  position: relative;
  padding-block: clamp(3.5rem, 9vw, 6.5rem) clamp(3rem, 7vw, 5rem);
  text-align: center;
  overflow: hidden;
}
.hero:not(.har-melding) { padding-top: calc(var(--topp) + clamp(3.5rem, 9vw, 6.5rem)); }

.hero__glod {
  position: absolute;
  left: 50%; top: -18%;
  width: min(120vw, 1000px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(201, 162, 39, 0.14) 0%, rgba(201, 162, 39, 0.05) 38%, transparent 66%);
  pointer-events: none;
}

/* Art déco-ramme rundt heroen – nikk til emblemet hans. */
.hero__ramme {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin-inline: auto;
  padding: clamp(2.2rem, 5vw, 3.6rem) clamp(1.2rem, 4vw, 3rem);
  border-block: 1px solid var(--linje);
}
.hero__ramme::before,
.hero__ramme::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 6%, var(--linje) 22%, var(--linje) 78%, transparent 94%);
}
.hero__ramme::before { top: 7px; }
.hero__ramme::after  { bottom: 7px; }

.hero__emblem { width: clamp(78px, 13vw, 108px); height: auto; margin: 0 auto 1.6rem; }

/* H1-en holder både søkeordlinja og den store setningen, slik at
   overskriften sier hvor vi er uten at designet blir en reklameplakat. */
.hero__h1 { display: block; margin: 0 0 1.2rem; font-weight: 400; }
.hero__h1 .eyebrow { margin-bottom: 1.1rem; }
.hero__h1 .display { display: block; }
.hero .ingress { margin-inline: auto; margin-bottom: 2.2rem; }

.hero__knapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
}

/* Faktastripe: det folk faktisk leter etter, rett under folden. */
.fakta {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  max-width: 900px;
  margin: clamp(2.2rem, 5vw, 3.2rem) auto 0;
  background: var(--linje);
  border: 1px solid var(--linje);
  border-radius: var(--radius);
  overflow: hidden;
}
.fakta__punkt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 1.25rem 0.9rem;
  background: var(--svart-2);
  text-decoration: none;
  color: inherit;
  transition: background var(--overgang);
}
.fakta__punkt:hover { background: var(--kort-hev); }
.fakta__merkelapp {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gull);
}
.fakta__verdi {
  display: block;
  font-size: 1.02rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.35;
}
.fakta__under {
  display: block;
  font-size: 0.79rem;
  line-height: 1.4;
  color: var(--tekst-3);
  text-align: center;
  margin-top: 2px;
}

@media (max-width: 620px) {
  .fakta { grid-template-columns: 1fr; }
  .fakta__punkt { flex-direction: row; align-items: center; justify-content: space-between; gap: 1.2rem; text-align: left; padding: 1rem 1.2rem; }
  .fakta__merkelapp { flex: none; }
  .fakta__punkt > div { text-align: right; }
  .fakta__verdi, .fakta__under { text-align: right; }
}

/* --------------------------------------------------------------- priser */

.filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: 1.6rem;
}
.brikke {
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--linje);
  background: transparent;
  color: var(--tekst-2);
  font-size: 0.86rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--overgang);
}
.brikke:hover { border-color: var(--linje-sterk); color: var(--tekst); }
.brikke[aria-pressed='true'] {
  background: var(--gull-flate);
  border-color: transparent;
  color: #14100a;
  font-weight: 600;
}

.sokefelt { position: relative; margin-bottom: 2.2rem; }
.sokefelt input {
  width: 100%;
  padding: 0.95rem 1.1rem 0.95rem 3rem;
  background: var(--kort);
  border: 1px solid var(--linje);
  border-radius: var(--radius);
  color: var(--tekst);
  font-size: 0.98rem;
  transition: border-color var(--overgang), background var(--overgang);
}
.sokefelt input::placeholder { color: var(--tekst-3); }
.sokefelt input:focus { outline: none; border-color: var(--linje-sterk); background: var(--kort-hev); }
.sokefelt svg {
  position: absolute; left: 1.05rem; top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  color: var(--tekst-3);
  pointer-events: none;
}

.prisgruppe { margin-bottom: 3rem; }
.prisgruppe:last-child { margin-bottom: 0; }
.prisgruppe__tittel {
  font-family: var(--serif);
  font-size: 1.7rem;
  padding-bottom: 0.7rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--linje);
  display: flex; align-items: baseline; gap: 0.7rem;
}
.prisgruppe__antall { font-family: var(--sans); font-size: 0.72rem; color: var(--tekst-3); letter-spacing: 0.1em; }

.tjeneste {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.9rem 1.4rem;
  padding: 1.15rem 1.1rem;
  margin-inline: -1.1rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: background var(--overgang), border-color var(--overgang);
}
.tjeneste:hover { background: var(--kort); border-color: var(--linje); }

.tjeneste__navn {
  font-size: 1.04rem;
  font-weight: 600;
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
}
.tjeneste__meta { font-size: 0.85rem; color: var(--tekst-3); margin-top: 0.15rem; }
.tjeneste__beskrivelse { font-size: 0.88rem; color: var(--tekst-2); margin-top: 0.35rem; max-width: 62ch; }

.merkelapp {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.22em 0.6em;
  border-radius: 999px;
  color: var(--gull-lys);
  border: 1px solid var(--linje-sterk);
  background: rgba(201, 162, 39, 0.09);
}

.tjeneste__pris {
  font-family: var(--serif);
  font-size: 1.6rem;
  line-height: 1;
  white-space: nowrap;
  color: var(--gull-lys);
}
.tjeneste__pris small { font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.1em; color: var(--tekst-3); display: block; margin-top: 4px; text-align: right; }

@media (max-width: 700px) {
  .tjeneste { grid-template-columns: 1fr auto; }
  .tjeneste__handling { grid-column: 1 / -1; justify-self: stretch; }
  .tjeneste__handling .knapp { width: 100%; }
}

.tomt {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--tekst-3);
  border: 1px dashed var(--linje);
  border-radius: var(--radius);
}

/* --------------------------------------------------------------- galleri */

.galleri {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
  gap: 12px;
}
.galleri__bilde {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--linje);
  background: var(--kort);
  cursor: zoom-in;
  padding: 0;
}
.galleri__bilde img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1), filter var(--overgang);
  filter: saturate(0.92);
}
.galleri__bilde:hover img { transform: scale(1.06); filter: saturate(1.05); }
.galleri__bilde:nth-child(6n + 1) { grid-row: span 2; aspect-ratio: 3 / 5; }

@media (max-width: 620px) {
  .galleri { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .galleri__bilde:nth-child(6n + 1) { grid-row: auto; aspect-ratio: 3 / 4; }
}

/* --------------------------------------------------------------- om */

.om {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 860px) { .om { grid-template-columns: 1fr; } }

.om__punkter { list-style: none; padding: 0; margin: 1.8rem 0 0; display: grid; gap: 0.75rem; }
.om__punkter li {
  display: flex; align-items: center; gap: 0.8rem;
  font-size: 0.96rem;
  color: var(--tekst-2);
}
.om__punkter li::before {
  content: '';
  width: 18px; height: 1px;
  background: var(--gull);
  flex: none;
}

.om__bilde {
  position: relative;
  border-radius: var(--radius-stor);
  overflow: hidden;
  border: 1px solid var(--linje);
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(circle at 50% 38%, rgba(201, 162, 39, 0.12), transparent 62%),
    var(--svart-2);
  display: grid;
  place-items: center;
}
.om__bilde img { width: 100%; height: 100%; object-fit: cover; }
.om__bilde .merke__emblem { width: 44%; height: auto; opacity: 0.55; }

/* --------------------------------------------------------------- produkter */

.produkter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 1rem;
}
.produkt {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--linje);
  background: linear-gradient(165deg, var(--kort), var(--svart-2));
  transition: border-color var(--overgang), transform var(--overgang);
}
.produkt:hover { border-color: var(--linje-sterk); transform: translateY(-3px); }
.produkt__bilde {
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 1.1rem;
  background: var(--svart);
  display: grid; place-items: center;
}
.produkt__bilde img { width: 100%; height: 100%; object-fit: cover; }
.produkt__navn { font-size: 1.02rem; font-weight: 600; margin-bottom: 0.3rem; }
.produkt__tekst { font-size: 0.87rem; color: var(--tekst-2); flex: 1; }
.produkt__pris {
  font-family: var(--serif);
  font-size: 1.45rem;
  color: var(--gull-lys);
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--linje);
}

/* --------------------------------------------------------------- instagram */

.instagram {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2rem;
  padding: clamp(1.8rem, 4vw, 2.8rem);
  border-radius: var(--radius-stor);
  border: 1px solid var(--linje);
  background:
    radial-gradient(120% 140% at 8% 0%, rgba(201, 162, 39, 0.11), transparent 58%),
    var(--svart-2);
}
@media (max-width: 720px) { .instagram { grid-template-columns: 1fr; } }

.ig-rutenett {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
  gap: 12px;
  margin-top: 1.5rem;
}
.ig-kort {
  display: block;
  aspect-ratio: 1;
  border-radius: var(--radius);
  border: 1px solid var(--linje);
  background: linear-gradient(150deg, var(--kort), var(--svart-2));
  text-decoration: none;
  color: var(--tekst-2);
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: border-color var(--overgang), transform var(--overgang);
  overflow: hidden;
}
.ig-kort:hover { border-color: var(--linje-sterk); transform: translateY(-3px); }
.ig-kort img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }

/* --------------------------------------------------------------- åpningstider + kart */

.besok {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: start;
}
@media (max-width: 860px) { .besok { grid-template-columns: 1fr; } }

.tider { list-style: none; padding: 0; margin: 0; }
.tider li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 0.96rem;
}
.tider li + li { border-top: 1px solid var(--linje); border-radius: 0; }
.tider li[data-idag='ja'] {
  background: rgba(201, 162, 39, 0.08);
  border: 1px solid var(--linje-sterk);
  border-radius: 10px;
  font-weight: 600;
}
.tider__dag { display: flex; align-items: center; gap: 0.6rem; }
.tider__klokke { color: var(--tekst-2); font-variant-numeric: tabular-nums; }
.tider li[data-idag='ja'] .tider__klokke { color: var(--gull-lys); }
.tider li[data-apen='nei'] .tider__klokke { color: var(--tekst-3); }

.unntak {
  margin-top: 1.4rem;
  padding: 1.1rem 1.2rem;
  border-radius: var(--radius);
  border: 1px solid var(--linje);
  background: var(--kort);
}
.unntak h4 { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gull); margin-bottom: 0.8rem; font-weight: 600; font-family: var(--sans); }
.unntak ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.unntak li { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.9rem; }
.unntak li span:last-child { color: var(--tekst-2); }

.kart {
  border-radius: var(--radius-stor);
  overflow: hidden;
  border: 1px solid var(--linje);
  background: var(--kort);
}
.kart iframe { width: 100%; height: 340px; border: 0; display: block; filter: grayscale(1) invert(0.92) contrast(0.86) hue-rotate(180deg); }
.kart__bunn { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; justify-content: space-between; padding: 1.1rem 1.2rem; }
.kart__adresse { font-size: 0.95rem; }
.kart__adresse span { display: block; color: var(--tekst-3); font-size: 0.85rem; }

/* --------------------------------------------------------------- lokal tekst */

.lokalt {
  margin-top: clamp(2.4rem, 5vw, 3.6rem);
  padding-top: clamp(2rem, 4vw, 2.8rem);
  border-top: 1px solid var(--linje);
  max-width: 68ch;
}
.lokalt h3 {
  font-family: var(--serif);
  font-size: 1.45rem;
  margin-bottom: 0.9rem;
}
.lokalt p {
  font-size: 0.97rem;
  color: var(--tekst-2);
  margin-bottom: 0.9rem;
}

/* --------------------------------------------------------------- gavekort */

.gavekort {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-stor);
  border: 1px solid var(--linje-sterk);
  padding: clamp(2.2rem, 5vw, 3.6rem);
  text-align: center;
  background:
    radial-gradient(90% 130% at 50% 0%, rgba(201, 162, 39, 0.16), transparent 62%),
    var(--svart-2);
}
.gavekort .seksjonstittel { margin-bottom: 0.9rem; }
.gavekort .ingress { margin: 0 auto 1.9rem; }

/* --------------------------------------------------------------- bunn */

.bunn {
  border-top: 1px solid var(--linje);
  padding-block: clamp(2.5rem, 5vw, 3.8rem) 2rem;
  background: var(--svart-2);
}
.bunn__rutenett {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.4rem;
  margin-bottom: 2.6rem;
}
@media (max-width: 760px) { .bunn__rutenett { grid-template-columns: 1fr; gap: 1.8rem; } }

.bunn h4 {
  font-family: var(--sans);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gull);
  font-weight: 600;
  margin-bottom: 1rem;
}
.bunn ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.bunn a { color: var(--tekst-2); text-decoration: none; font-size: 0.93rem; transition: color var(--overgang); }
.bunn a:hover { color: var(--gull-lys); }
.bunn__slutt {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.6rem;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.8rem;
  border-top: 1px solid var(--linje);
  font-size: 0.82rem;
  color: var(--tekst-3);
}
.bunn__slutt a { font-size: 0.82rem; }

.sosial { display: flex; gap: 0.6rem; margin-top: 1.2rem; }
.sosial a {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--linje);
  color: var(--tekst-2);
  transition: all var(--overgang);
}
.sosial a:hover { border-color: var(--gull); color: var(--gull-lys); transform: translateY(-2px); }
.sosial svg { width: 19px; height: 19px; }

/* --------------------------------------------------------------- mobil handlingslinje */

.mobillinje {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 480;
  display: none;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom));
  background: rgba(8, 8, 10, 0.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid var(--linje);
}
.mobillinje .knapp { flex: 1; min-height: 50px; padding-inline: 0.8rem; font-size: 0.88rem; }
.mobillinje .knapp-gull { flex: 1.5; }
.mobillinje .ikonknapp { flex: 0 0 54px; }
.mobillinje .ikonknapp span { display: none; }

@media (max-width: 780px) {
  :root { --bunn: 74px; }
  .mobillinje { display: flex; }
}

/* --------------------------------------------------------------- bookingpanel */

.panel {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--svart);
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease, visibility 220ms;
}
.panel[data-apen='ja'] { opacity: 1; visibility: visible; }

.panel__topp {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem clamp(1rem, 4vw, 1.6rem);
  border-bottom: 1px solid var(--linje);
  background: var(--svart-2);
}
.panel__tittel { font-family: var(--serif); font-size: 1.3rem; margin-right: auto; }
.panel__lukk {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--linje);
  background: transparent;
  color: var(--tekst);
  display: grid; place-items: center;
  cursor: pointer;
  transition: all var(--overgang);
}
.panel__lukk:hover { border-color: var(--gull); color: var(--gull-lys); }
.panel iframe { width: 100%; height: 100%; border: 0; background: #fff; }

.panel__laster {
  position: absolute;
  inset: auto 0 0 0;
  top: 61px;
  display: grid;
  place-items: center;
  gap: 1rem;
  background: var(--svart);
  color: var(--tekst-3);
  font-size: 0.9rem;
}
.panel__laster[hidden] { display: none; }

.spinner {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 2px solid var(--linje);
  border-top-color: var(--gull);
  animation: snurr 800ms linear infinite;
}
@keyframes snurr { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------- lysbord */

.lysbord {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(4, 4, 6, 0.95);
  backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden;
  transition: opacity 200ms ease, visibility 200ms;
}
.lysbord[data-apen='ja'] { opacity: 1; visibility: visible; }
.lysbord img {
  max-width: 100%;
  max-height: 82vh;
  border-radius: var(--radius);
  border: 1px solid var(--linje);
  object-fit: contain;
}
.lysbord__knapp {
  position: absolute;
  width: 50px; height: 50px;
  border-radius: 50%;
  border: 1px solid var(--linje);
  background: rgba(20, 20, 24, 0.85);
  color: var(--tekst);
  display: grid; place-items: center;
  cursor: pointer;
  transition: all var(--overgang);
}
.lysbord__knapp:hover { border-color: var(--gull); color: var(--gull-lys); }
.lysbord__lukk { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lysbord__forrige { left: clamp(0.6rem, 3vw, 2rem); top: 50%; transform: translateY(-50%); }
.lysbord__neste   { right: clamp(0.6rem, 3vw, 2rem); top: 50%; transform: translateY(-50%); }
.lysbord__teller { position: absolute; bottom: clamp(1rem, 3vw, 2rem); font-size: 0.85rem; color: var(--tekst-3); }

/* --------------------------------------------------------------- animasjon inn */

.inn {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 700ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.inn.synlig { opacity: 1; transform: none; }

@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;
  }
  .inn { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------- utskrift */

@media print {
  .topp, .mobillinje, .hero__knapper, .filter, .sokefelt, .kart iframe,
  .tjeneste__handling, .panel, .lysbord, .gavekort { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
  body::after { display: none; }
  .gull-tekst { color: #8a6b14; -webkit-text-fill-color: #8a6b14; }
  .tjeneste__pris { color: #000; }
  a { color: #000; }
}