/* ============================================================
   JAFS LARVIK – style.css
   Fabelaktig Fastfood · Nansetgata 105, 3269 Larvik
   ------------------------------------------------------------
   Innhold:
   1. Variabler og grunnstiler
   2. Typografi og hjelpeklasser
   3. Knapper
   4. Toppbanner og navigasjon
   5. Hero og sidetopper
   6. Seksjoner og kort
   7. Meny-siden
   8. Skjema og FAQ
   9. Footer og flytende elementer
   10. Animasjoner og responsivitet
   ============================================================ */

/* ---------- 1. Variabler og grunnstiler ---------- */
:root {
  /* Farger */
  --white: #FFFFFF;
  --cream: #FFF6EE;          /* varm bakgrunn, hentet fra Jafs-plakaten */
  --orange: #F97316;
  --orange-dark: #EA580C;
  --black: #111111;
  --charcoal: #1C1C1C;
  --grey: #F3F3F3;
  --grey-text: #55524E;
  --green: #64A72F;          /* grønn ring fra Jafs-logoen */

  /* Fonter */
  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-body: 'Manrope', 'Segoe UI', sans-serif;
  --font-script: 'Pacifico', cursive;

  /* Layout */
  --max-width: 1180px;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 10px 30px rgba(17, 17, 17, 0.08);
  --shadow-lift: 0 16px 40px rgba(17, 17, 17, 0.14);

  /* Avstander */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--black);
  background: var(--white);
  overflow-x: hidden;
}

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

a { color: inherit; }

/* Synlig fokus for tastaturnavigasjon */
:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 2px;
}

.container {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

.container-narrow { max-width: 780px; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 2. Typografi og hjelpeklasser ---------- */
h1, h2, h3 { line-height: 1.15; margin: 0 0 var(--space-2); }
p { margin: 0 0 var(--space-2); }

.eyebrow {
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-dark);
  margin-bottom: var(--space-1);
}

.eyebrow-orange { color: var(--orange); }
.eyebrow-dark { color: var(--black); }

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-weight: 400;
}

.section-title-light { color: var(--white); }
.section-title-sm { font-size: clamp(1.6rem, 3vw, 2.1rem); }

/* Skråstilte plakat-overskrifter (signaturen fra Jafs-plakaten) */
.tilt-line {
  display: block;
  font-family: var(--font-display);
  text-transform: uppercase;
  transform: skewX(-8deg) rotate(-2deg);
  transform-origin: left bottom;
}

.tilt-highlight { color: var(--orange); }

.text-link {
  color: var(--orange-dark);
  font-weight: 700;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.text-link:hover { color: var(--orange); }
.text-link-light { color: var(--orange); }

.price {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.02em;
}

.price-light { color: var(--orange); font-size: 2rem; }

/* ---------- 3. Knapper ---------- */
.btn {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--orange);
  color: var(--white);
  box-shadow: 0 6px 18px rgba(249, 115, 22, 0.35);
}

.btn-primary:hover { background: var(--orange-dark); }

.btn-dark {
  background: var(--black);
  color: var(--white);
}

.btn-dark:hover { background: var(--charcoal); }

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

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

.btn-lg { padding: 1rem 2.1rem; font-size: 1.02rem; }
.btn-sm { padding: 0.5rem 1.1rem; font-size: 0.85rem; }

/* ---------- 4. Toppbanner og navigasjon ---------- */
.announcement {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  background: var(--black);
  color: var(--white);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.45rem var(--space-2);
  text-align: center;
}

.announcement p { margin: 0; }

.announcement-link {
  color: var(--orange);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--grey);
  transition: box-shadow 0.25s ease;
}

.site-header.is-scrolled { box-shadow: var(--shadow); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block: 0.7rem;
}

/* Logo: sort sirkel med grønn ring og oransje skrift, som originalen */
.logo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
}

.logo-mark {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--black);
  border: 3px solid var(--green);
  box-shadow: inset 0 0 0 2px var(--white);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.logo-script {
  font-family: var(--font-script);
  color: var(--orange);
  font-size: 1.05rem;
  transform: rotate(-8deg);
  line-height: 1;
  padding-bottom: 4px;
}

.logo-text {
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.04em;
  color: var(--black);
}

.logo-text em {
  font-style: normal;
  color: var(--orange);
}

.main-nav { display: flex; align-items: center; gap: var(--space-3); }

.main-nav ul {
  display: flex;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-link {
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--black);
  padding: 0.35rem 0;
  border-bottom: 3px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.nav-link:hover { color: var(--orange-dark); }

.nav-link.is-active {
  color: var(--orange-dark);
  border-bottom-color: var(--orange);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 10px;
  background: transparent;
  border: 2px solid var(--black);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: var(--black);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- 5. Hero og sidetopper ---------- */
.hero {
  background:
    radial-gradient(circle at 85% 15%, rgba(249, 115, 22, 0.10), transparent 40%),
    var(--cream);
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-5);
}

.hero-title {
  font-size: clamp(3rem, 8vw, 5.6rem);
  margin-bottom: var(--space-3);
}

.hero-title .tilt-highlight { font-size: 1.25em; }

.hero-lead {
  font-size: 1.12rem;
  color: var(--grey-text);
  max-width: 34rem;
  margin-bottom: var(--space-3);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.trust-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--grey-text);
}

.trust-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.trust-list li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
}

.hero-media { position: relative; }

.hero-image-wrap {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  aspect-ratio: 4 / 3.4;
}

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

.price-badge {
  position: absolute;
  left: var(--space-2);
  bottom: var(--space-2);
  background: var(--white);
  border-radius: var(--radius-sm);
  padding: 0.6rem 1rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.price-badge-label { font-size: 0.8rem; font-weight: 700; color: var(--grey-text); }
.price-badge-price {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--orange-dark);
}

/* Diskrete dekor-sirkler */
.deco-circle {
  position: absolute;
  border-radius: 50%;
  z-index: -1;
}

.deco-circle-1 {
  width: 130px;
  height: 130px;
  border: 3px solid var(--orange);
  opacity: 0.35;
  top: -35px;
  right: -30px;
}

.deco-circle-2 {
  width: 60px;
  height: 60px;
  background: var(--orange);
  opacity: 0.15;
  bottom: -18px;
  left: -18px;
}

/* Sidetopper for meny/om oss/kontakt */
.page-hero {
  background:
    radial-gradient(circle at 80% 0%, rgba(249, 115, 22, 0.15), transparent 45%),
    var(--charcoal);
  color: var(--white);
  padding-block: var(--space-5);
}

.page-title {
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  margin-bottom: var(--space-2);
}

.page-lead {
  color: rgba(255, 255, 255, 0.8);
  max-width: 38rem;
  font-size: 1.08rem;
  margin: 0;
}

/* ---------- 6. Seksjoner og kort ---------- */
.section { padding-block: var(--space-5); }

.section-cream { background: var(--cream); }

.section-dark {
  background: var(--charcoal);
  color: var(--white);
}

.section-head {
  max-width: 40rem;
  margin-bottom: var(--space-4);
}

.section-more {
  text-align: center;
  margin-top: var(--space-4);
}

/* Kategorikort */
.category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}

.category-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

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

.category-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.category-card:hover img { transform: scale(1.04); }

.category-card-body { padding: var(--space-2) var(--space-2) var(--space-3); }

.category-card-body h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}

.category-card-body p {
  font-size: 0.9rem;
  color: var(--grey-text);
  margin-bottom: 0.6rem;
}

.card-link {
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--orange-dark);
}

.category-card:hover .card-link { text-decoration: underline; }

/* Produktkort */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.product-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

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

.product-card-featured { border: 2px solid var(--orange); }

.product-media {
  position: relative;
  overflow: hidden;
}

.product-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.product-card:hover .product-media img { transform: scale(1.04); }

.tag {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.tag-orange { background: var(--orange); color: var(--white); }
.tag-dark { background: var(--black); color: var(--white); }
.tag-green { background: var(--green); color: var(--white); }

.product-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-2) var(--space-2) var(--space-3);
}

.product-body h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}

.product-body p {
  font-size: 0.9rem;
  color: var(--grey-text);
  flex: 1;
}

.product-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  margin-top: var(--space-1);
}

/* Delt seksjon (mørk premium) */
.split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  align-items: center;
}

.split-media img {
  width: 100%;
  aspect-ratio: 4 / 3.2;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
}

.split-text { color: rgba(255, 255, 255, 0.82); }

.section:not(.section-dark) .split-text,
.section:not(.section-dark) .split-content p { color: var(--grey-text); }

.feature-list {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.feature-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.feature-list li::before {
  content: "";
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--orange);
}

.split-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Fordeler */
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}

.benefit-grid-3 { grid-template-columns: repeat(3, 1fr); }

.benefit-card {
  background: var(--white);
  border: 1px solid var(--grey);
  border-radius: var(--radius);
  padding: var(--space-3);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.benefit-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--orange);
}

.benefit-icon {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--orange-dark);
  margin-bottom: var(--space-2);
}

.benefit-icon svg { width: 26px; height: 26px; }

.benefit-card h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  text-transform: uppercase;
}

.benefit-card p {
  font-size: 0.92rem;
  color: var(--grey-text);
  margin: 0;
}

/* Kampanjebanner */
.section-promo {
  background: linear-gradient(115deg, var(--orange) 0%, var(--orange-dark) 100%);
  color: var(--black);
}

.promo-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.promo-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  text-transform: uppercase;
  color: var(--white);
}

.promo-text {
  color: rgba(255, 255, 255, 0.92);
  max-width: 34rem;
  margin: 0;
  font-weight: 600;
}

/* Omtaler */
.review-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.review-card {
  margin: 0;
  background: var(--white);
  border: 1px solid var(--grey);
  border-radius: var(--radius);
  padding: var(--space-3);
  box-shadow: var(--shadow);
}

.stars {
  color: var(--orange);
  letter-spacing: 0.2em;
  font-size: 1.05rem;
  margin-bottom: var(--space-1);
}

.review-card blockquote {
  margin: 0 0 var(--space-2);
  font-size: 0.98rem;
  color: var(--charcoal);
}

.review-card figcaption {
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--grey-text);
}

/* Om oss-forhåndsvisning */
.about-preview {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-4);
  align-items: center;
}

.about-preview p { color: var(--grey-text); max-width: 34rem; }

.about-preview-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
}

/* Kontakt/kart */
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-4);
  align-items: start;
}

.contact-grid-page { grid-template-columns: 1.1fr 0.9fr; }

.contact-info {
  display: grid;
  gap: var(--space-3);
}

.info-block h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}

.info-block p { margin: 0 0 0.3rem; color: var(--grey-text); }

.map-wrap {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--grey);
}

.map-wrap iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
}

.map-wrap-tall iframe { height: 320px; }

/* Statistikk (om oss) */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  text-align: center;
}

.stat-number {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  color: var(--orange);
}

.stat-label {
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.95rem;
}

/* Galleri (om oss) */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.gallery-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-grid img:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-lift);
}

/* ---------- 7. Meny-siden ---------- */
.menu-section { padding-top: var(--space-4); }

.menu-controls {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.search-wrap input {
  width: 100%;
  padding: 0.9rem 1.2rem;
  font-family: var(--font-body);
  font-size: 1rem;
  border: 2px solid var(--grey);
  border-radius: 999px;
  background: var(--white);
  transition: border-color 0.2s ease;
}

.search-wrap input:focus {
  outline: none;
  border-color: var(--orange);
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.filter-btn {
  padding: 0.5rem 1.1rem;
  border: 2px solid var(--grey);
  border-radius: 999px;
  background: var(--white);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--charcoal);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.filter-btn:hover { border-color: var(--orange); color: var(--orange-dark); }

.filter-btn.is-active {
  background: var(--black);
  border-color: var(--black);
  color: var(--white);
}

/* Meny-grupper og rader */
.menu-group { margin-bottom: var(--space-4); }

.menu-group-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  text-transform: uppercase;
  color: var(--orange-dark);
  border-bottom: 3px solid var(--orange);
  display: inline-block;
  padding-bottom: 0.2rem;
  margin-bottom: 0.3rem;
}

.menu-group-note {
  font-size: 0.88rem;
  color: var(--grey-text);
  margin-bottom: var(--space-2);
}

.menu-price-head {
  display: none;
}

.menu-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--space-1) var(--space-3);
  align-items: center;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--grey);
}

.menu-item-info h3 {
  font-size: 1.02rem;
  font-weight: 800;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.menu-item-info .item-tag {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--orange);
  color: var(--white);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
}

.menu-item-info p {
  margin: 0.15rem 0 0;
  font-size: 0.88rem;
  color: var(--grey-text);
}

.menu-item-info .allergens {
  font-size: 0.75rem;
  color: #8a867f;
}

.menu-prices {
  display: flex;
  gap: var(--space-3);
  text-align: right;
}

.menu-price { min-width: 70px; }

.menu-price span {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8a867f;
}

.menu-price strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--black);
}

.menu-empty {
  text-align: center;
  padding: var(--space-4);
  font-weight: 600;
  color: var(--grey-text);
}

.allergen-box {
  margin-top: var(--space-4);
  background: var(--cream);
  border-radius: var(--radius);
  padding: var(--space-3);
}

.allergen-box h2 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  text-transform: uppercase;
}

.allergen-box p { font-size: 0.9rem; color: var(--grey-text); margin-bottom: 0.4rem; }

/* ---------- 8. Skjema og FAQ ---------- */
.form-wrap {
  background: var(--white);
  border: 1px solid var(--grey);
  border-radius: var(--radius);
  padding: var(--space-3);
  box-shadow: var(--shadow);
}

.form-field { margin-bottom: var(--space-2); }

.form-field label {
  display: block;
  font-weight: 700;
  font-size: 0.92rem;
  margin-bottom: 0.35rem;
}

.form-field input,
.form-field textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  border: 2px solid var(--grey);
  border-radius: var(--radius-sm);
  background: var(--white);
  transition: border-color 0.2s ease;
  resize: vertical;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--orange);
}

.form-field.has-error input,
.form-field.has-error textarea { border-color: #D33; }

.form-error {
  display: none;
  font-size: 0.82rem;
  font-weight: 600;
  color: #C22;
  margin-top: 0.3rem;
}

.form-field.has-error .form-error { display: block; }

.form-success {
  background: var(--cream);
  border: 2px solid var(--green);
  border-radius: var(--radius);
  padding: var(--space-3);
  margin-top: var(--space-2);
}

.form-success h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.3rem;
}

.form-success p { margin: 0; color: var(--grey-text); }

/* FAQ (trekkspill) */
.faq { display: grid; gap: var(--space-1); }

.faq-item {
  background: var(--white);
  border: 1px solid var(--grey);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: var(--space-2) var(--space-3);
  font-weight: 800;
  position: relative;
  transition: color 0.2s ease;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--orange);
  transition: transform 0.2s ease;
}

.faq-item[open] summary { color: var(--orange-dark); }
.faq-item[open] summary::after { content: "–"; }

.faq-item p {
  padding: 0 var(--space-3) var(--space-2);
  margin: 0;
  color: var(--grey-text);
  font-size: 0.95rem;
}

/* ---------- 9. Footer og flytende elementer ---------- */
.site-footer {
  background: var(--black);
  color: rgba(255, 255, 255, 0.8);
  padding-top: var(--space-5);
  margin-top: var(--space-5);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
}

.logo-footer .logo-text { color: var(--white); }

.footer-brand p {
  margin-top: var(--space-2);
  font-size: 0.92rem;
  max-width: 24rem;
}

.social-links {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.social-links a {
  color: var(--white);
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
  border-bottom: 2px solid var(--orange);
  padding-bottom: 2px;
}

.social-links a:hover { color: var(--orange); }

.footer-col h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.05rem;
  color: var(--white);
  margin-bottom: var(--space-2);
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
  font-size: 0.92rem;
}

.footer-col a {
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-col a:hover { color: var(--orange); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-block: var(--space-3);
  font-size: 0.85rem;
}

.footer-bottom p { margin: 0; }

.footer-legal { display: flex; gap: var(--space-2); }

.footer-legal a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}

.footer-legal a:hover { color: var(--orange); }

/* Tilbake til toppen */
.back-to-top {
  position: fixed;
  right: var(--space-2);
  bottom: var(--space-2);
  z-index: 100;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: var(--black);
  color: var(--white);
  font-size: 1.2rem;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease, background-color 0.2s ease;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover { background: var(--orange-dark); }

/* Flytende handlekurv */
.cart-float {
  position: fixed;
  right: var(--space-2);
  bottom: calc(var(--space-2) + 60px);
  z-index: 100;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--white);
  display: grid;
  place-items: center;
  box-shadow: 0 8px 22px rgba(249, 115, 22, 0.4);
  text-decoration: none;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.cart-float:hover {
  background: var(--orange-dark);
  transform: translateY(-2px);
}

.cart-float svg { width: 24px; height: 24px; }

.cart-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 22px;
  height: 22px;
  padding-inline: 5px;
  border-radius: 999px;
  background: var(--black);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 800;
  display: grid;
  place-items: center;
}

.cart-count.bump { animation: bump 0.3s ease; }

@keyframes bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* Toast-varsel */
.toast {
  position: fixed;
  left: 50%;
  bottom: var(--space-3);
  transform: translate(-50%, 20px);
  z-index: 70;
  background: var(--black);
  color: var(--white);
  font-weight: 700;
  font-size: 0.92rem;
  padding: 0.8rem 1.4rem;
  border-radius: 999px;
  box-shadow: var(--shadow-lift);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}

.toast.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* ---------- 10. Animasjoner og responsivitet ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

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

/* Respekter redusert bevegelse */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* Nettbrett */
@media (max-width: 980px) {
  .hero-grid,
  .split-grid,
  .about-preview,
  .contact-grid,
  .contact-grid-page {
    grid-template-columns: 1fr;
  }

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

  .product-grid,
  .review-grid,
  .benefit-grid-3 { grid-template-columns: repeat(2, 1fr); }

  .gallery-grid { grid-template-columns: repeat(2, 1fr); }

  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4) var(--space-2); }

  .footer-grid { grid-template-columns: repeat(2, 1fr); }

  .split-media { order: -1; }
}

/* Mobil-navigasjon */
@media (max-width: 820px) {
  .nav-toggle { display: flex; }

  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--grey);
    box-shadow: var(--shadow);
    padding: var(--space-2) var(--space-3) var(--space-3);
    display: none;
  }

  .main-nav.is-open { display: flex; }

  .main-nav ul {
    flex-direction: column;
    gap: 0;
  }

  .main-nav .nav-link {
    display: block;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--grey);
    font-size: 1.05rem;
  }

  .main-nav .nav-link.is-active { border-bottom-color: var(--orange); }

  .nav-cta {
    margin-top: var(--space-2);
    text-align: center;
  }
}

/* Mobil */
@media (max-width: 620px) {
  .section { padding-block: var(--space-4); }

  .hero-grid { padding-block: var(--space-4); }

  .category-grid,
  .product-grid,
  .review-grid,
  .benefit-grid,
  .benefit-grid-3 { grid-template-columns: 1fr; }

  .hero-actions .btn { width: 100%; text-align: center; }

  .promo-inner { flex-direction: column; align-items: flex-start; }

  .promo-inner .btn { width: 100%; text-align: center; }

  .menu-item {
    grid-template-columns: 1fr;
  }

  .menu-prices {
    justify-content: flex-start;
    text-align: left;
  }

  .menu-item .btn { justify-self: start; }

  .footer-grid { grid-template-columns: 1fr; gap: var(--space-3); }

  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .map-wrap iframe { height: 300px; }
}

/* Små mobiler */
@media (max-width: 380px) {
  .logo-text { font-size: 1.1rem; }
  .logo-mark { width: 42px; height: 42px; }
  .announcement { font-size: 0.78rem; }
}

/* ============================================================
   11. GRILL SHACK
   ------------------------------------------------------------
   Egen seksjon inne i Jafs. Fargene under gjelder KUN der
   klassen .gs-theme er brukt (på <main> i grillshack.html).
   Resten av nettsiden beholder de vanlige Jafs-fargene.
   ============================================================ */

.gs-theme {
  /* Farger hentet fra Grill Shack-logoen */
  --orange: #D8261C;        /* Grill Shack rød – erstatter oransje her */
  --orange-dark: #A81A12;
  --cream: #F0EDE6;         /* off-white fra logoen */
  --green: #D8261C;
  --shadow: 0 10px 30px rgba(14, 14, 14, 0.10);
  --shadow-lift: 0 18px 44px rgba(216, 38, 28, 0.18);
  background: var(--cream);
}

/* ---------- Rutemønster (checkerboard) ---------- */
.gs-checker {
  height: 26px;
  background-color: var(--cream);
  background-image:
    linear-gradient(45deg, var(--orange) 25%, transparent 25%, transparent 75%, var(--orange) 75%),
    linear-gradient(45deg, var(--orange) 25%, transparent 25%, transparent 75%, var(--orange) 75%);
  background-size: 26px 26px;
  background-position: 0 0, 13px 13px;
}

.gs-checker-thin { height: 18px; background-size: 18px 18px; background-position: 0 0, 9px 9px; }

/* ---------- Logo ---------- */
.gs-logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  color: var(--orange);
}

.gs-logo svg { width: 46px; height: 46px; stroke: currentColor; }

.gs-logo-word {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1;
}

/* ---------- Hero ---------- */
.gs-hero {
  position: relative;
  background: var(--cream);
  padding-block: var(--space-5) var(--space-4);
  overflow: hidden;
}

.gs-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.gs-year {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 0.95;
  color: var(--orange);
}

.gs-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-5);
  align-items: center;
  margin-top: var(--space-4);
}

.gs-hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6.4vw, 4.6rem);
  line-height: 0.94;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 var(--space-2);
  letter-spacing: -0.01em;
}

.gs-hero-title .gs-sub {
  display: block;
  font-size: 0.4em;
  color: var(--black);
  letter-spacing: 0.02em;
  margin-top: 0.4rem;
}

.gs-tagline {
  font-family: var(--font-body);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--orange);
  font-size: 0.82rem;
  margin: 0 0 var(--space-2);
}

.gs-hero-lead {
  font-size: 1.05rem;
  color: var(--grey-text);
  max-width: 46ch;
  margin: 0 0 var(--space-3);
}

.gs-hero-media {
  position: relative;
  display: flex;
  justify-content: center;
}

.gs-hero-media img {
  width: 100%;
  max-width: 460px;
  border-radius: var(--radius);
  filter: drop-shadow(0 26px 40px rgba(14, 14, 14, 0.22));
  transition: transform 0.5s ease;
}

.gs-hero-media:hover img { transform: translateY(-6px) scale(1.02); }

.gs-hero-badge {
  position: absolute;
  right: 0;
  bottom: 6%;
  background: var(--orange);
  color: var(--white);
  font-family: var(--font-display);
  text-transform: uppercase;
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius-sm);
  line-height: 1.05;
  text-align: center;
  box-shadow: var(--shadow);
}

.gs-hero-badge span { display: block; font-size: 0.68rem; font-family: var(--font-body); font-weight: 700; letter-spacing: 0.1em; }

/* ---------- Kategorikort ---------- */
.gs-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-3);
}

.gs-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 2px solid transparent;
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.gs-card:hover {
  transform: translateY(-6px);
  border-color: var(--orange);
  box-shadow: var(--shadow-lift);
}

.gs-card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--cream);
}

.gs-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.gs-card:hover .gs-card-media img { transform: scale(1.06); }

.gs-card-body { padding: var(--space-2) var(--space-2) var(--space-3); }

.gs-card-body h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.2rem;
  margin: 0 0 0.35rem;
  letter-spacing: 0.01em;
}

.gs-card-body p {
  margin: 0 0 0.7rem;
  color: var(--grey-text);
  font-size: 0.92rem;
}

.gs-card-link {
  font-weight: 800;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--orange);
}

.gs-card:hover .gs-card-link { text-decoration: underline; }

/* ---------- Menyliste ---------- */
.gs-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px solid rgba(14, 14, 14, 0.10);
}

.gs-item:last-child { border-bottom: none; }

.gs-item h3 {
  font-size: 1.02rem;
  margin: 0 0 0.15rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.gs-item p { margin: 0; color: var(--grey-text); font-size: 0.9rem; }

.gs-item-tag {
  background: var(--orange);
  color: var(--white);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: 100px;
}

.gs-item-price { text-align: right; white-space: nowrap; }

.gs-item-price strong {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--orange);
  letter-spacing: 0.01em;
}

.gs-item-price .gs-from {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey-text);
}

.gs-item-price del { color: var(--grey-text); font-size: 0.85rem; margin-right: 0.4rem; }

.gs-group {
  background: var(--white);
  border-radius: var(--radius);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
  box-shadow: var(--shadow);
}

.gs-group-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.5rem;
  margin: 0 0 0.2rem;
  color: var(--black);
}

.gs-group-note {
  margin: 0 0 var(--space-2);
  color: var(--grey-text);
  font-size: 0.9rem;
  border-bottom: 3px solid var(--orange);
  padding-bottom: var(--space-2);
}

/* ---------- Mørkt bånd ---------- */
.gs-band {
  background: #0E0E0E;
  color: var(--white);
  padding-block: var(--space-5);
}

.gs-band .gs-hero-title { color: var(--white); }
.gs-band .gs-hero-title .gs-sub { color: var(--orange); }
.gs-band p { color: rgba(255, 255, 255, 0.78); }

/* ---------- Responsivt ---------- */
@media (max-width: 900px) {
  .gs-hero-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .gs-hero-media { order: -1; }
  .gs-hero-badge { right: 4%; }
}

@media (max-width: 620px) {
  .gs-item {
    grid-template-columns: 1fr auto;
    grid-template-areas: "info price" "btn btn";
  }
  .gs-item-info { grid-area: info; }
  .gs-item-price { grid-area: price; }
  .gs-item .add-btn { grid-area: btn; justify-self: start; }
  .gs-group { padding: var(--space-2); }
  .gs-hero-badge { position: static; margin-top: var(--space-2); display: inline-block; }
}

/* ---------- Grill Shack: plakat, miniatyrer og forsidebanner ---------- */
.gs-poster {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-bottom: var(--space-4);
}

.gs-poster img { width: 100%; height: auto; }

/* Miniatyrbilde i menylisten */
.gs-item { grid-template-columns: 92px 1fr auto auto; }

.gs-item-img {
  width: 92px;
  height: 70px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--cream);
  transition: transform 0.4s ease;
}

.gs-item:hover .gs-item-img { transform: scale(1.05); }
.gs-item-img-empty { display: block; }

/* Grill Shack-blokk på Jafs-forsiden (bruker Jafs' vanlige farger utenpå) */
.gs-promo {
  background: #0E0E0E;
  color: var(--white);
  padding-block: var(--space-5);
}

.gs-promo .gs-promo-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-4);
  align-items: center;
}

.gs-promo-media {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}

.gs-promo-media img {
  width: 100%;
  height: auto;
  transition: transform 0.6s ease;
}

.gs-promo-media:hover img { transform: scale(1.03); }

.gs-promo-eyebrow {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.78rem;
  color: #D8261C;
  margin: 0 0 var(--space-1);
}

.gs-promo-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  line-height: 0.98;
  margin: 0 0 var(--space-2);
  color: #D8261C;
}

.gs-promo-title span { display: block; color: var(--white); font-size: 0.42em; letter-spacing: 0.02em; }

.gs-promo p { color: rgba(255, 255, 255, 0.8); margin: 0 0 var(--space-3); }

.gs-promo .btn-outline { border-color: #D8261C; color: #D8261C; }
.gs-promo .btn-outline:hover { background: #D8261C; color: var(--white); }
.gs-promo .btn-primary { background: #D8261C; }
.gs-promo .btn-primary:hover { background: #A81A12; }

@media (max-width: 900px) {
  .gs-promo .gs-promo-grid { grid-template-columns: 1fr; }
  .gs-promo-media { order: -1; }
}

@media (max-width: 620px) {
  .gs-item {
    grid-template-columns: 72px 1fr auto;
    grid-template-areas: "img info price" "btn btn btn";
    column-gap: var(--space-2);
  }
  .gs-item-img { grid-area: img; width: 72px; height: 72px; }
  .gs-item-info { grid-area: info; }
  .gs-item-price { grid-area: price; }
  .gs-item .add-btn { grid-area: btn; justify-self: start; margin-top: 0.4rem; }
}

/* ============================================================
   12. KURV, ÅPENT-STATUS OG EKSTRAFUNKSJONER
   ============================================================ */

.no-scroll { overflow: hidden; }

/* ---------- Åpent / stengt ---------- */
.open-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.6rem 0.15rem 0.5rem;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.12);
}

.open-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.open-badge.is-open { color: #7BD44F; }
.open-badge.is-open::before { animation: pulse 2s infinite; }
.open-badge.is-closed { color: #FF8C7A; }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.8); }
}

/* ---------- Pris-bryter ---------- */
.price-toggle {
  display: inline-flex;
  background: var(--grey);
  border-radius: 100px;
  padding: 4px;
  gap: 4px;
}

.price-toggle-btn {
  border: none;
  background: none;
  font: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.45rem 1.1rem;
  border-radius: 100px;
  cursor: pointer;
  color: var(--grey-text);
  transition: background 0.2s ease, color 0.2s ease;
}

.price-toggle-btn.is-active {
  background: var(--black);
  color: var(--white);
}

/* Demper prisen som ikke er valgt */
.menu-prices .menu-price { transition: opacity 0.2s ease; }
body:not(.mode-spisher) .menu-prices .menu-price:last-child:not(:only-child) { opacity: 0.4; }
body.mode-spisher .menu-prices .menu-price:first-child:not(:only-child) { opacity: 0.4; }

/* ---------- Kurv-knapp ---------- */
.cart-count.has-items { background: var(--orange); color: var(--white); }

/* ---------- Kurv-skuff ---------- */
.cart-drawer { position: fixed; inset: 0; z-index: 120; }

.cart-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cart-drawer.is-open .cart-backdrop { opacity: 1; }

.cart-panel {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: min(420px, 100%);
  height: 100%;
  background: var(--white);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.2);
}

.cart-drawer.is-open .cart-panel { transform: translateX(0); }

.cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3);
  border-bottom: 1px solid rgba(17, 17, 17, 0.1);
}

.cart-head h2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.4rem;
  margin: 0;
}

.cart-close {
  border: none;
  background: var(--grey);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.cart-close:hover { background: var(--black); color: var(--white); }

.cart-body { flex: 1; overflow-y: auto; padding: var(--space-2) var(--space-3); }

.cart-empty { color: var(--grey-text); padding-block: var(--space-4); text-align: center; }

.cart-row {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  gap: 0.7rem;
  align-items: center;
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}

/* Bilde eller ikon til venstre – gjør varen lett å kjenne igjen */
.cart-row-bilde {
  width: 46px;
  height: 46px;
  object-fit: contain;
  border-radius: 8px;
  background: var(--cream);
  padding: 3px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.1));
}
.cart-row-ikon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  background: var(--cream);
  border-radius: 8px;
  color: var(--orange);
}
.cart-row-ikon svg { width: 26px; height: 26px; }

.cart-row-info { min-width: 0; }
.cart-row-info strong {
  display: block;
  font-size: 0.92rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.cart-row-info span { font-size: 0.78rem; color: var(--grey-text); }

/* Sum og antall stablet til høyre – tydelig og kompakt */
.cart-row-hoyre {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
}
.cart-row-sum { font-weight: 800; white-space: nowrap; font-size: 0.95rem; }

.cart-qty { display: flex; align-items: center; gap: 0.35rem; }

.qty-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid rgba(17, 17, 17, 0.15);
  background: var(--white);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.qty-btn:hover { background: var(--orange); border-color: var(--orange); color: var(--white); }

.qty-num { min-width: 1.4rem; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }

.cart-foot { border-top: 1px solid rgba(17, 17, 17, 0.1); padding: var(--space-3); }

.cart-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-1);
}

.cart-total strong { font-family: var(--font-display); font-size: 1.8rem; color: var(--orange); }

.cart-note { font-size: 0.78rem; color: var(--grey-text); margin: 0 0 var(--space-2); }

.cart-actions { display: grid; gap: 0.6rem; }

.btn-text {
  border: none;
  background: none;
  font: inherit;
  font-size: 0.85rem;
  color: var(--grey-text);
  text-decoration: underline;
  cursor: pointer;
  padding: 0.3rem;
}

.btn-text:hover { color: var(--orange); }

/* ---------- Lyskasse ---------- */
.zoomable { cursor: zoom-in; }

/* VIKTIG: display:flex under overstyrer nettleserens hidden-regel,
   så vi må slå av visningen eksplisitt når lyskassen er lukket. */
.lightbox[hidden],
.cart-drawer[hidden] { display: none !important; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 130;
  background: rgba(10, 10, 10, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  cursor: zoom-out;
}

.lightbox img {
  max-width: min(1100px, 100%);
  max-height: 90vh;
  width: auto;
  border-radius: var(--radius);
  object-fit: contain;
}

.lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 1.6rem;
  cursor: pointer;
}

/* ---------- Overrask meg ---------- */
.gs-item.is-picked {
  background: rgba(216, 38, 28, 0.07);
  box-shadow: inset 3px 0 0 var(--orange);
  border-radius: var(--radius-sm);
  animation: picked 0.6s ease;
}

@keyframes picked {
  0% { transform: scale(1); }
  40% { transform: scale(1.015); }
  100% { transform: scale(1); }
}

/* ---------- Klebrig filterrad ---------- */
.filter-bar {
  position: sticky;
  top: 72px;
  z-index: 20;
  background: inherit;
  padding-block: 0.5rem;
}

@media (max-width: 620px) {
  .cart-panel { width: 100%; }
  .filter-bar { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  .cart-panel, .cart-backdrop { transition: none; }
  .open-badge.is-open::before { animation: none; }
}

/* ---------- Utskrift: pen meny på papir ---------- */
@media print {
  .announcement, .site-header, .site-footer, .cart-float, .back-to-top,
  .menu-controls, .cart-drawer, .toast, .hero-actions, .btn, .add-btn,
  .gs-item-img, .section-promo, .gs-promo { display: none !important; }

  body { background: #fff; color: #000; font-size: 11pt; }
  .section { padding-block: 0.5rem; }
  .menu-item, .gs-item { break-inside: avoid; page-break-inside: avoid; }
  .menu-group, .gs-group { box-shadow: none; padding: 0; margin-bottom: 1rem; }
  a[href^="tel:"]::after { content: " (" attr(href) ")"; }
}

/* ============================================================
   13. SALG OG KONVERTERING
   ============================================================ */

/* ---------- 1. Fast bestill-linje (kun mobil) ---------- */
.sticky-order {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: none;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem calc(0.7rem + env(safe-area-inset-bottom));
  background: rgba(17, 17, 17, 0.96);
  backdrop-filter: blur(8px);
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.sticky-order.is-visible { transform: translateY(0); }

.sticky-call,
.sticky-cart {
  flex: 1;
  text-align: center;
  padding: 0.85rem 1rem;
  border-radius: 100px;
  font-weight: 800;
  font-size: 0.95rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.sticky-call { background: var(--orange); color: #fff; }
.sticky-cart { background: rgba(255, 255, 255, 0.14); color: #fff; }

/* Mobil: bestill-linja nederst, så kurven, så tilbake-til-toppen.
   env(safe-area-inset-bottom) er "home"-stripa på iPhone – uten den
   havner kurven bak bestill-linja og blir umulig å trykke på.
   De tre knappene MÅ ikke overlappe: hver av dem stjeler trykket
   fra den under hvis de gjør det. */
@media (max-width: 820px) {
  .sticky-order { display: flex; }
  .cart-float { bottom: calc(5.6rem + env(safe-area-inset-bottom)); }
  .back-to-top { bottom: calc(5.6rem + 66px + env(safe-area-inset-bottom)); }
}

/* ---------- 2. Kombo-knapp ---------- */
.combo-btn {
  margin-top: 0.5rem;
  border: 1.5px dashed var(--orange);
  background: transparent;
  color: var(--orange-dark);
  font: inherit;
  font-weight: 800;
  font-size: 0.78rem;
  padding: 0.3rem 0.8rem;
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.combo-btn:hover { background: var(--orange); color: #fff; border-style: solid; }

/* ---------- 6. Mest populær ---------- */
.tag-pop {
  background: var(--green) !important;
  color: #fff !important;
}

.gs-theme .tag-pop { background: #0E0E0E !important; }

/* ---------- 8. Pris per 100 g ---------- */
.per-100 {
  font-size: 0.76rem !important;
  font-weight: 700;
  color: var(--grey-text);
  margin: 0.15rem 0 0 !important;
}

/* ---------- 5. Terskel: gratis dip ---------- */
.threshold { margin-bottom: var(--space-2); }

.threshold p { margin: 0.4rem 0 0; font-size: 0.82rem; color: var(--grey-text); }

.threshold-bar {
  height: 8px;
  border-radius: 100px;
  background: var(--grey);
  overflow: hidden;
}

.threshold-bar span {
  display: block;
  height: 100%;
  background: var(--orange);
  border-radius: 100px;
  transition: width 0.4s ease;
}

.threshold.is-reached p { color: var(--green); font-weight: 700; }

/* ---------- 3 + 4. Familiepakke og gjenbestilling ---------- */
.reorder-box,
.bundle-box {
  background: var(--cream);
  border-radius: var(--radius);
  padding: var(--space-2);
  margin-top: var(--space-2);
}

.reorder-box p,
.bundle-box p { font-size: 0.85rem; margin: 0 0 0.7rem; color: var(--grey-text); }

.bundle-box strong { display: block; margin-bottom: 0.3rem; }

/* ---------- 15. Anmeldelse ---------- */
.review-nudge {
  font-size: 0.82rem;
  text-align: center;
  color: var(--grey-text);
  margin: 0.4rem 0 0;
}

.review-nudge a { color: var(--orange); font-weight: 700; }

/* ---------- 7 + 16. Kampanje og kveldstilbud ---------- */
.campaign {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
  background: var(--black);
  color: #fff;
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
  border-left: 6px solid var(--orange);
}

.campaign strong { display: block; font-family: var(--font-display); text-transform: uppercase; font-size: 1.1rem; letter-spacing: 0.02em; }
.campaign span { font-size: 0.88rem; color: rgba(255, 255, 255, 0.75); }

.campaign-clock { text-align: right; }
.campaign-label { display: block; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.campaign-clock strong { color: var(--orange); font-size: 1.3rem; }

.late-night {
  background: var(--cream);
  border: 2px dashed var(--orange);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
  font-size: 0.92rem;
}

.late-night strong { color: var(--orange-dark); }

/* ---------- 14. Del med venn ---------- */
.share-btn { cursor: pointer; }

@media print {
  .sticky-order, .campaign, .late-night, .combo-btn { display: none !important; }
}

/* ---------- 10. Studentkode ---------- */
.code-card {
  background: var(--black);
  color: #fff;
  border-radius: var(--radius);
  padding: var(--space-4);
  text-align: center;
  border: 3px dashed var(--orange);
}

.code-label { text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.75rem; color: rgba(255,255,255,0.6); margin: 0; }

.code-value {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 8vw, 3.4rem);
  color: var(--orange);
  margin: 0.4rem 0 1rem;
  letter-spacing: 0.06em;
}

.code-note { font-size: 0.8rem; color: rgba(255,255,255,0.6); margin: 1rem 0 0; }

/* ---------- 13. SMS-liste ---------- */
.sms-signup {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3);
  align-items: center;
}

.sms-signup p { color: var(--grey-text); margin: 0.4rem 0 0; }

.sms-form { display: flex; gap: 0.6rem; }

.sms-form input {
  border: 2px solid rgba(17,17,17,0.12);
  border-radius: 100px;
  padding: 0.8rem 1.2rem;
  font: inherit;
  min-width: 190px;
}

.sms-form input:focus { border-color: var(--orange); outline: none; }

@media (max-width: 820px) {
  .sms-signup { grid-template-columns: 1fr; }
  .sms-form { flex-direction: column; }
  .sms-form input { min-width: 0; }
}

/* ============================================================
   14. BESTILLING: LEVERING OG BETALING
   ============================================================ */

.checkout { padding-bottom: var(--space-2); }

/* ---------- Hent selv / levering ---------- */
.delivery-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-bottom: var(--space-3);
}

.delivery-opt {
  border: 2px solid rgba(17, 17, 17, 0.12);
  background: var(--white);
  border-radius: var(--radius);
  padding: 0.8rem 0.7rem;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.delivery-opt strong { display: block; font-size: 0.95rem; }
.delivery-opt span { font-size: 0.78rem; color: var(--grey-text); }

.delivery-opt.is-active {
  border-color: var(--orange);
  background: var(--cream);
}

.delivery-opt.is-active strong { color: var(--orange-dark); }

/* ---------- Skjemafelt ---------- */
#orderForm label {
  display: block;
  font-weight: 700;
  font-size: 0.82rem;
  margin: 0.9rem 0 0.3rem;
}

#orderForm input,
#orderForm textarea {
  width: 100%;
  border: 2px solid rgba(17, 17, 17, 0.12);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
  font: inherit;
  font-size: 0.95rem;
  background: var(--white);
}

#orderForm input:focus,
#orderForm textarea:focus { border-color: var(--orange); outline: none; }

#orderForm textarea { resize: vertical; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }

.field-error {
  display: block;
  color: #C81E1E;
  font-size: 0.78rem;
  font-weight: 600;
  margin-top: 0.25rem;
  min-height: 1em;
}

/* ---------- Betaling ---------- */
.pay-group {
  border: none;
  padding: 0;
  margin: var(--space-3) 0 0;
}

.pay-group legend {
  font-weight: 700;
  font-size: 0.82rem;
  padding: 0;
  margin-bottom: 0.5rem;
}

.pay-opt {
  display: flex !important;
  align-items: center;
  gap: 0.7rem;
  border: 2px solid rgba(17, 17, 17, 0.12);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem !important;
  margin: 0 0 0.5rem !important;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.pay-opt:has(input:checked) { border-color: var(--orange); background: var(--cream); }

.pay-opt input { width: auto !important; accent-color: var(--orange); }

.pay-opt span { font-size: 0.82rem; color: var(--grey-text); }
.pay-opt strong { display: block; font-size: 0.95rem; color: var(--black); }

/* ---------- Sum ---------- */
.sum-rows { font-size: 0.88rem; margin-bottom: 0.5rem; }

.sum-rows div {
  display: flex;
  justify-content: space-between;
  padding: 0.15rem 0;
  color: var(--grey-text);
}

.cart-note.warn {
  color: #C81E1E;
  font-weight: 600;
  background: rgba(200, 30, 30, 0.07);
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-sm);
}

#sendOrder:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ---------- Kvittering ---------- */
.receipt { text-align: center; padding: var(--space-3) 0; }

.receipt h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.6rem;
  margin: var(--space-2) 0 0.5rem;
}

.receipt > p { color: var(--grey-text); font-size: 0.9rem; }

.receipt-check svg {
  width: 68px;
  height: 68px;
  fill: none;
  stroke: var(--green);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.receipt-check circle {
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  animation: draw 0.5s ease forwards;
}

.receipt-check path {
  stroke-dasharray: 36;
  stroke-dashoffset: 36;
  animation: draw 0.3s 0.4s ease forwards;
}

@keyframes draw { to { stroke-dashoffset: 0; } }

.receipt-box {
  background: var(--cream);
  border-radius: var(--radius);
  padding: var(--space-2);
  margin: var(--space-3) 0;
  text-align: left;
}

.receipt-box p { margin: 0.3rem 0; font-size: 0.88rem; }

.receipt-note { font-size: 0.8rem; color: var(--grey-text); }
.receipt-note a { color: var(--orange); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .receipt-check circle, .receipt-check path { animation: none; stroke-dashoffset: 0; }
}

/* ---------- Vipps ---------- */
/* Ekte Vipps-logo. Vipps' retningslinjer: logoen skal ha luft rundt seg,
   ikke strekkes, og ikke endre farge. */
.pay-logo {
  margin-left: auto;
  width: 62px;
  height: auto;
  flex-shrink: 0;
}

.vipps-inline {
  width: 48px;
  height: auto;
  display: inline-block;
  vertical-align: -0.15em;
}

.paid-with { display: flex; align-items: center; justify-content: center; gap: 0.35rem; }

/* Vipps-knapp i offisiell oransje */
.btn-vipps {
  background: #FF5B24;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-vipps:hover { background: #E64A15; }

.btn-vipps img {
  width: 58px;
  height: auto;
  margin-top: 1px;
}

.btn-vipps span { font-weight: 700; }
.btn-vipps:disabled { opacity: 0.5; }

.pay-info {
  font-size: 0.8rem;
  color: var(--grey-text);
  background: var(--cream);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.8rem;
  margin: 0;
}

.receipt-ref {
  font-size: 0.75rem !important;
  color: var(--grey-text);
  font-variant-numeric: tabular-nums;
}

.spinner {
  width: 44px;
  height: 44px;
  margin: 0 auto;
  border: 4px solid var(--grey);
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
}

/* ---------- Hurtigbetaling med Vipps ---------- */
.btn-express {
  background: #FF5B24;
  border: none;
}

.btn-express:hover { background: #E64A15; }

.express-note {
  text-align: center;
  font-size: 0.75rem;
  color: var(--grey-text);
  margin: -0.2rem 0 0.4rem;
  line-height: 1.5;
}

.express-note .btn-text { font-size: 0.75rem; padding: 0; }

/* Vipps-knappen i kurven er hovedhandlingen */
.cart-actions .btn-vipps { box-shadow: 0 8px 24px rgba(255, 91, 36, 0.3); }
.cart-actions .btn-vipps:hover { box-shadow: 0 12px 28px rgba(255, 91, 36, 0.4); }

/* ============================================================
   15. FORSIDEN – ROLIGERE OPPBYGNING
   ============================================================ */

/* Liten merkelapp, f.eks. "Nyhet" på et kategorikort */
.chip {
  display: inline-block;
  background: var(--green);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.15rem 0.45rem;
  border-radius: 100px;
  vertical-align: 0.2em;
  margin-left: 0.3rem;
}

/* Tre løfter på én linje – erstatter fire tunge kort */
.value-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0 0 var(--space-4);
  border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}

.value-strip li {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.value-strip svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  color: var(--orange);
}

.value-strip strong { display: block; font-size: 0.95rem; }
.value-strip div { font-size: 0.82rem; color: var(--grey-text); line-height: 1.45; }

/* Sitater uten kortramme – lettere enn før */
.quote-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.quote {
  margin: 0;
  padding-left: var(--space-2);
  border-left: 3px solid var(--orange);
}

.quote p {
  margin: 0 0 0.6rem;
  font-size: 1rem;
  line-height: 1.6;
}

.quote cite {
  font-style: normal;
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grey-text);
}

/* Finn oss */
.visit-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--space-5);
  align-items: center;
}

.visit-facts {
  margin: var(--space-3) 0;
  display: grid;
  gap: 0.6rem;
}

.visit-facts > div {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--space-2);
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}

.visit-facts dt {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey-text);
  align-self: center;
}

.visit-facts dd { margin: 0; font-weight: 600; }

.map-wrap {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 4 / 3;
}

.map-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }

/* SMS-påmelding inne i "Finn oss" */
.sms-inline {
  display: block;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(17, 17, 17, 0.08);
}

.sms-label {
  display: block;
  font-weight: 800;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

.sms-row { display: flex; gap: 0.6rem; }
.sms-row input { flex: 1; }

@media (max-width: 900px) {
  .value-strip { grid-template-columns: 1fr; gap: var(--space-2); }
  .quote-row { grid-template-columns: 1fr; gap: var(--space-3); }
  .visit-grid { grid-template-columns: 1fr; gap: var(--space-3); }
  .map-wrap { aspect-ratio: 16 / 11; }
}

@media (max-width: 620px) {
  .sms-row { flex-direction: column; }
  .visit-facts > div { grid-template-columns: 90px 1fr; }
}

/* Kurven er en knapp, ikke en lenke – nullstill nettleserens knappestil */
button.cart-float {
  border: none;
  font: inherit;
  cursor: pointer;
  padding: 0;
}

/* ============================================================
   16. FORSIDE: PLAKAT, KATEGORIER OG PAKKER
   ============================================================ */

/* ---------- Hero med plakat ---------- */





.trust-center {
  justify-content: center;
  margin: var(--space-3) 0 0;
  color: rgba(255, 255, 255, 0.75);
}

.trust-center li::before { background: var(--orange); }

@media (max-width: 620px) {
      .trust-center { flex-direction: column; gap: 0.4rem; align-items: center; }
}

/* ---------- Kategorikort med utklipte bilder ---------- */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.cat-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-2) var(--space-2);
  text-align: center;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

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

.cat-card img {
  width: 100%;
  max-width: 190px;
  height: 130px;
  object-fit: contain;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.18));
  transition: transform 0.35s ease;
}

/* (erstattet av 3D-snurringen lenger ned) */

.cat-card h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.05rem;
  margin: var(--space-2) 0 0.2rem;
  letter-spacing: 0.01em;
}

.cat-card span { font-size: 0.85rem; font-weight: 700; color: var(--orange); }

@media (max-width: 820px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
  .cat-card img { height: 100px; }
}

/* ---------- Pakker ---------- */
.section-deals { background: var(--cream); }

.section-lead {
  color: var(--grey-text);
  margin: 0.5rem 0 0;
  max-width: 46ch;
}

.deal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.deal-card {
  position: relative;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.deal-tag {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  z-index: 2;
  background: var(--green);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 100px;
}

.deal-media {
  height: 165px;
  overflow: hidden;
  background: var(--cream);
}

.deal-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }

/* Utklipte produktbilder skal vises hele, ikke beskjæres */
.deal-media-cut { display: grid; place-items: center; padding: 0.8rem; }
.deal-media-cut img { object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0,0,0,0.18)); }

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

.deal-body { padding: var(--space-2) var(--space-2) var(--space-3); display: flex; flex-direction: column; flex: 1; }

.deal-for {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey-text);
  margin: 0 0 0.2rem;
}

.deal-body h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.25rem;
  margin: 0 0 0.4rem;
}

.deal-innhold {
  font-size: 0.85rem;
  color: var(--grey-text);
  margin: 0 0 var(--space-2);
  flex: 1;
  line-height: 1.5;
}

.deal-pris {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}

.deal-pris strong {
  font-family: var(--font-display);
  font-size: 1.7rem;
  color: var(--orange);
}

.deal-pris del { color: var(--grey-text); font-size: 0.85rem; }

.deal-spar {
  background: rgba(100, 167, 47, 0.14);
  color: #4B7F1F;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 0.2rem 0.5rem;
  border-radius: 100px;
}

.deal-body .btn { align-self: flex-start; }

@media (max-width: 900px) { .deal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) {
  .deal-grid { grid-template-columns: 1fr; }
  .deal-media { height: 190px; }
}

/* ---------- Bilder i menylisten ---------- */
.menu-item { grid-template-columns: 84px 1fr auto auto; }

.menu-item-img {
  width: 84px;
  height: 68px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--cream);
  transition: transform 0.4s ease;
}

.menu-item-cut {
  object-fit: contain;
  background: transparent;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.16));
}

.menu-item:hover .menu-item-img { transform: scale(1.06); }
.menu-item-tom { display: block; }

@media (max-width: 620px) {
  .menu-item {
    grid-template-columns: 68px 1fr;
    grid-template-areas: "img info" "price price" "btn btn";
    column-gap: var(--space-2);
  }
  .menu-item-img { grid-area: img; width: 68px; height: 68px; }
  .menu-item-info { grid-area: info; }
  .menu-prices { grid-area: price; }
  .menu-item .add-btn { grid-area: btn; justify-self: start; }
}

/* ---------- Faste tilbud (plakater) ---------- */
.tilbud-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-top: 2rem;
  max-width: 760px;
}
.tilbud-kort {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 14px 34px -16px rgba(20, 16, 12, .35);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s;
}
.tilbud-kort:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -18px rgba(20, 16, 12, .45);
}
.tilbud-kort img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 900px) {
  .tilbud-grid { grid-template-columns: 1fr 1fr; gap: 0.9rem; }
}
@media (max-width: 480px) {
  .tilbud-grid { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
}

/* ============================================================
   EKSTRA-MODUL – stiler for nye funksjoner (2026)
   ============================================================ */

/* ---------- Dagens deal ---------- */
.daydeal {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--black);
  color: var(--white);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  margin: 0.8rem 0;
  box-shadow: var(--shadow);
}
.daydeal-tag {
  flex-shrink: 0;
  background: var(--orange);
  color: var(--white);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
}
.daydeal-info { flex: 1; min-width: 0; }
.daydeal-info strong { display: block; font-size: 1.02rem; }
.daydeal-info span { font-size: 0.85rem; opacity: 0.75; }
.daydeal .add-btn { flex-shrink: 0; }
@media (max-width: 560px) {
  .daydeal { flex-wrap: wrap; }
  .daydeal .add-btn { width: 100%; }
}

/* ---------- Størrelsesvalg ---------- */
.size-pills { display: flex; gap: 0.4rem; margin: 0.5rem 0 0.2rem; flex-wrap: wrap; }
.size-pill {
  border: 1.5px solid rgba(17,17,17,0.18);
  background: var(--white);
  border-radius: 999px;
  padding: 0.28rem 0.85rem;
  font: 600 0.8rem var(--font-body);
  color: var(--black);
  cursor: pointer;
  transition: border-color .18s, background .18s, color .18s, transform .18s;
}
.size-pill:hover { border-color: var(--orange); }
.size-pill.is-active {
  background: var(--black);
  border-color: var(--black);
  color: var(--white);
}
.size-pill:active { transform: scale(0.95); }

/* ---------- Duo-merke og rabattlinje ---------- */
.tag-duo { background: var(--green); color: var(--white); }
.cart-duo { color: var(--green); font-weight: 700; }
.cart-duo strong { color: var(--green); }

/* ---------- Pakkebyggeren ---------- */
.bygger {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.4rem;
  max-width: 620px;
}
.bygger-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0;
  border-bottom: 1px dashed rgba(17,17,17,0.12);
}
.bygger-name strong { display: block; font-size: 0.95rem; }
.bygger-name span { font-size: 0.85rem; color: var(--grey-text); }
.bygger-foot { padding-top: 1.1rem; }
.bygger-linje {
  display: flex;
  justify-content: space-between;
  font-size: 0.95rem;
  padding: 0.18rem 0;
}
.bygger-rabatt { color: var(--green); font-weight: 700; }
.bygger-hint { color: var(--grey-text); font-size: 0.85rem; }
.bygger-total { font-size: 1.15rem; border-top: 2px solid var(--black); margin-top: 0.5rem; padding-top: 0.6rem; }
.bygger-foot .btn { width: 100%; margin-top: 0.9rem; }
.bygger-foot .btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------- Feed the Squad ---------- */
.squad-wrap { margin-bottom: 2.2rem; }
.mini-title { font: 700 1.05rem var(--font-body); margin-bottom: 0.8rem; }
.squad {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.4rem;
}
.squad-controls {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  padding-bottom: 1rem;
  border-bottom: 1px dashed rgba(17,17,17,0.12);
}
.squad-label { display: block; font-size: 0.82rem; font-weight: 700; margin-bottom: 0.45rem; color: var(--grey-text); }
.squad-nivaer { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.squad-nivaa {
  border: 1.5px solid rgba(17,17,17,0.18);
  background: var(--white);
  border-radius: 999px;
  padding: 0.45rem 0.95rem;
  font: 600 0.85rem var(--font-body);
  cursor: pointer;
  transition: border-color .18s, background .18s, color .18s;
}
.squad-nivaa.is-active { background: var(--orange); border-color: var(--orange); color: var(--white); }
.squad-intro { font-weight: 700; margin: 1rem 0 0.5rem; }
.squad-pakke {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.55rem 0;
}
.squad-pakke span { display: block; font-size: 0.82rem; color: var(--grey-text); }
.squad-pakke em { font-style: normal; font-weight: 800; }
.squad-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 2px solid var(--black);
  flex-wrap: wrap;
}
.squad-total { font: 800 1.15rem var(--font-body); }

/* ---------- Anmeldelseskort ---------- */
.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.1rem;
}
.review-card {
  margin: 0;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
}
.review-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.review-stars { color: var(--orange); letter-spacing: 2px; font-size: 1.05rem; }
.review-card blockquote { margin: 0; font-size: 0.93rem; line-height: 1.55; flex: 1; }
.review-card figcaption { font-size: 0.8rem; font-weight: 700; color: var(--grey-text); }

/* ---------- Sulten-modus ---------- */
.hunger-btn {
  border: 2px solid var(--black);
  background: var(--black);
  color: var(--white);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  font: 700 0.85rem var(--font-body);
  cursor: pointer;
  transition: background .18s, color .18s, transform .18s;
}
.hunger-btn:hover { background: var(--orange); border-color: var(--orange); }
.hunger-btn:active { transform: scale(0.96); }
body.hunger-mode .announcement,
body.hunger-mode .page-hero,
body.hunger-mode #campaignSlot,
body.hunger-mode #ukedealSlot,
body.hunger-mode #lateSlot,
body.hunger-mode .allergen-box,
body.hunger-mode .site-footer { display: none; }
body.hunger-mode .menu-section { padding-top: 1.2rem; }

/* ---------- Konfetti ---------- */
.confetti-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
}

/* ---------- Skjelett-lasting ---------- */
.skeleton-group { padding: 1rem 0; }
.skeleton {
  background: linear-gradient(100deg, #ECE7E1 40%, #F7F3EE 50%, #ECE7E1 60%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.3s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
.skeleton-title { width: 220px; height: 30px; margin-bottom: 1.1rem; }
.skeleton-item {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 0.8rem 0;
}
.skeleton-img { width: 68px; height: 68px; border-radius: 12px; flex-shrink: 0; }
.skeleton-lines { flex: 1; display: flex; flex-direction: column; gap: 0.55rem; }
.skeleton-line { height: 14px; width: 70%; }
.skeleton-line.short { width: 40%; }
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
}

/* ---------- Mikroanimasjoner ---------- */
.btn, .add-btn, .qty-btn, .filter-btn, .price-toggle-btn {
  transition: transform .15s ease, background-color .18s, color .18s, border-color .18s, box-shadow .18s;
}
.btn:active, .add-btn:active, .filter-btn:active, .price-toggle-btn:active { transform: scale(0.96); }
.qty-btn:active { transform: scale(0.88); }
.btn-primary:hover { box-shadow: 0 8px 22px -8px rgba(249, 115, 22, 0.55); }
#stickyCart.bump { animation: bump 0.3s ease; }
@media (prefers-reduced-motion: reduce) {
  .btn, .add-btn, .qty-btn, .filter-btn, .price-toggle-btn { transition: none; }
}

/* ---------- Skjema-detaljer (bedrift) ---------- */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1rem;
}
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.form-note { font-size: 0.82rem; color: var(--grey-text); margin-top: 0.7rem; }

/* ============================================================
   ADRESSESØK OG LEVERING
   ============================================================ */
.adr-sok { position: relative; }
.adr-liste {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  z-index: 20;
  margin: 0; padding: 0;
  list-style: none;
  background: var(--white);
  border-radius: var(--radius-sm);
  box-shadow: 0 14px 40px -8px rgba(17,17,17,.28);
  border: 1px solid rgba(17,17,17,.08);
  overflow: hidden;
  max-height: 260px;
  overflow-y: auto;
}
.adr-liste li {
  padding: .7rem .9rem;
  cursor: pointer;
  border-bottom: 1px solid rgba(17,17,17,.06);
  transition: background .15s;
}
.adr-liste li:last-child { border-bottom: none; }
.adr-liste li:hover,
.adr-liste li:focus { background: var(--cream); outline: none; }
.adr-liste li:focus { box-shadow: inset 3px 0 0 var(--orange); }
.adr-liste strong { display: block; font-size: .92rem; }
.adr-liste span { display: block; font-size: .78rem; color: var(--grey-text); }

/* Status: laster / godkjent / avvist */
.adr-status:empty { display: none; }
.adr-status { margin: .5rem 0 .2rem; }

.adr-skeleton {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .85rem;
  color: var(--grey-text);
  background: var(--grey);
  border-radius: var(--radius-sm);
  padding: .7rem .9rem;
}
.adr-skeleton span {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(17,17,17,.15);
  border-top-color: var(--orange);
  animation: adr-spinn .7s linear infinite;
  flex-shrink: 0;
}
@keyframes adr-spinn { to { transform: rotate(360deg); } }

.adr-svar {
  border-radius: var(--radius-sm);
  padding: .8rem .9rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.adr-svar strong { font-size: .92rem; }
.adr-svar span { font-size: .82rem; opacity: .85; }

.adr-ja {
  background: rgba(100,167,47,.12);
  border-left: 4px solid var(--green);
  color: #3D6B14;
}
.adr-ja strong::before { content: '✓ '; font-weight: 900; }

.adr-nei {
  background: rgba(249,115,22,.12);
  border-left: 4px solid var(--orange);
  color: #9A3A0A;
}
.adr-nei .btn { align-self: flex-start; margin-top: .4rem; }

/* "Du sparer" når henting er valgt */
.sum-spar { color: var(--green); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .adr-skeleton span { animation: none; }
}

/* ============================================================
   BEDRIFTSAVTALE – kompakt og mobil først
   ------------------------------------------------------------
   Prinsipp: mest mulig innhold på skjermen, store trykkflater,
   ingen unødvendig luft. Radhøyde 44px = Apples minstemål for
   det en tommel treffer trygt.
   ============================================================ */

.bedrift-hero .hero-actions { margin-top: 1.2rem; }

/* ---------- Delt: antall-teller ---------- */
.brad-antall {
  display: inline-flex;
  align-items: center;
  gap: .15rem;
  flex-shrink: 0;
}
.brad-antall b {
  min-width: 26px;
  text-align: center;
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
}
.brad-antall .qty-btn {
  width: 34px; height: 34px;
  font-size: 1.05rem;
  flex-shrink: 0;
}
.qty-btn-sm { width: 30px !important; height: 30px !important; }

/* ---------- Vårt forslag ---------- */
.bsq {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem;
}
.bsq-topp {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem 1.4rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid rgba(17,17,17,.1);
}
.bsq-felt { display: flex; flex-direction: column; gap: .35rem; }
.bsq-felt-bred { flex: 1; min-width: 100%; }
.bsq-lab {
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--grey-text);
}
.bsq-sult { display: flex; gap: .25rem; }
.bsq-s {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(17,17,17,.16);
  background: var(--white);
  font: 700 .9rem var(--font-body);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .12s;
}
.bsq-s.is-active { background: var(--orange); border-color: var(--orange); color: #fff; }
.bsq-s:active { transform: scale(.9); }

.bsq-typer { display: flex; gap: .3rem; flex-wrap: wrap; }
.bsq-t {
  border: 1.5px solid rgba(17,17,17,.16);
  background: var(--white);
  border-radius: 100px;
  padding: .4rem .8rem;
  font: 700 .8rem var(--font-body);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.bsq-t.is-active { background: var(--black); border-color: var(--black); color: #fff; }

.bsq-hint {
  font-size: .74rem;
  color: var(--grey-text);
  margin: .7rem 0 .3rem;
}

/* Redigerbar rad: ikon | nedtrekk | pris | antall */
.brad {
  display: grid;
  grid-template-columns: 22px 1fr auto auto;
  align-items: center;
  gap: .5rem;
  padding: .35rem 0;
  border-bottom: 1px solid rgba(17,17,17,.06);
}
.brad:last-of-type { border-bottom: none; }
.brad-ikon { font-size: 1.05rem; line-height: 1; }

/* Nedtrekket ser ut som tekst til man trykker – da åpner mobilen
   sin egen hjulvelger, som er raskere enn noe vi kan bygge selv */
.brad-velg {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  font: 700 .92rem var(--font-body);
  color: var(--black);
  padding: .35rem 1.1rem .35rem .3rem;
  border-radius: 6px;
  cursor: pointer;
  width: 100%;
  min-width: 0;
  text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23F97316' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .2rem center;
  background-size: 10px;
  transition: background-color .15s;
}
.brad-velg:hover { background-color: var(--cream); }
.brad-velg:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }
.brad-pris {
  font-weight: 800;
  font-size: .88rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- Sum-blokk (brukes tre steder) ---------- */
.bsum {
  margin-top: .8rem;
  padding-top: .7rem;
  border-top: 1px dashed rgba(17,17,17,.15);
}
.bsum-l {
  display: flex;
  justify-content: space-between;
  font-size: .9rem;
  padding: .15rem 0;
}
.bsum-rab { color: var(--green); font-weight: 700; }
.bsum-tot {
  font-size: 1.1rem;
  border-top: 2px solid var(--black);
  margin-top: .4rem;
  padding-top: .5rem;
}
.bsq-legg { width: 100%; margin-top: .9rem; }
.bsq-legg:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Bygg egen: kompakt, alt synlig ---------- */
.bbygg {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem;
}
.bbygg-kat + .bbygg-kat { margin-top: 1.1rem; }
.bbygg-kat h3 {
  font: 800 .74rem var(--font-body);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--grey-text);
  padding-bottom: .3rem;
  margin-bottom: .1rem;
  border-bottom: 2px solid rgba(17,17,17,.1);
}
.bbygg-rad {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: .6rem;
  padding: .3rem 0;
  border-bottom: 1px solid rgba(17,17,17,.05);
}
.bbygg-rad:last-child { border-bottom: none; }
.bbygg-navn {
  font-size: .88rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bbygg-pris {
  font-size: .82rem;
  color: var(--grey-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bbygg-foot { margin-top: 1rem; }
.bbygg-foot .btn { width: 100%; margin-top: .8rem; }
.bbygg-tom { font-size: .85rem; color: var(--grey-text); }

/* ---------- Oppsummering som kort ---------- */
.bo-tittel {
  font: 800 .74rem var(--font-body);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--grey-text);
  margin: 1.4rem 0 .5rem;
}
.bo-tittel:first-child { margin-top: 0; }
.bo-kort { display: flex; flex-direction: column; gap: .4rem; }
.bo-k {
  display: grid;
  grid-template-columns: 24px 1fr auto auto;
  align-items: center;
  gap: .5rem;
  background: var(--cream);
  border-radius: var(--radius-sm);
  padding: .5rem .7rem;
}
.bo-k-ikon { font-size: 1.05rem; }
.bo-k-navn {
  font-size: .87rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bo-k-navn b { color: var(--orange); }
.bo-k-pris {
  font-weight: 800;
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bo-tom { color: var(--grey-text); font-size: .88rem; }

/* ---------- Fordeler ---------- */
.konto-grid {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: .6rem;
}
.konto-grid li {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-sm);
  padding: .75rem .9rem;
  color: rgba(255,255,255,.72);
  font-size: .8rem;
  transition: background .25s;
}
.konto-grid li:hover { background: rgba(255,255,255,.1); }
.konto-grid li strong {
  display: block;
  color: var(--white);
  font-size: .92rem;
  margin-bottom: .1rem;
}
.konto-grid li strong::before {
  content: '✓';
  color: var(--green);
  font-weight: 800;
  margin-right: .4rem;
}

/* ---------- Betaling ---------- */
.betaling-valg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: .5rem;
  margin-bottom: 1.1rem;
}
.betaling-kort { position: relative; display: block; cursor: pointer; }
.betaling-kort input { position: absolute; opacity: 0; pointer-events: none; }
.betaling-kort span {
  display: block;
  text-align: center;
  padding: .7rem .5rem;
  border: 2px solid rgba(17,17,17,.14);
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: .85rem;
  background: var(--white);
  transition: border-color .15s, background .15s, color .15s;
}
.betaling-kort:hover span { border-color: var(--orange); }
.betaling-kort input:checked + span { border-color: var(--orange); background: var(--orange); color: #fff; }
.betaling-kort input:focus-visible + span { outline: 3px solid rgba(249,115,22,.4); }

/* ---------- Gjenbestilling ---------- */
.gjen-kort {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: .8rem 1rem;
  margin-bottom: .6rem;
  flex-wrap: wrap;
}
.gjen-kort span { display: block; font-size: .78rem; color: var(--grey-text); }

/* ---------- Mobil: enda tettere ---------- */
@media (max-width: 560px) {
  .bsq, .bbygg { padding: .8rem; border-radius: var(--radius-sm); }
  .bsq-topp { gap: .7rem 1rem; }
  .brad { grid-template-columns: 20px 1fr auto; gap: .4rem; row-gap: 0; }
  .brad-pris { grid-column: 3; }
  .brad-antall { grid-column: 2 / 4; justify-self: end; margin-top: -.2rem; }
  .brad-velg { font-size: .88rem; }
  .bbygg-rad { grid-template-columns: 1fr auto auto; gap: .4rem; }
  .bbygg-navn { font-size: .85rem; }
  .bo-k { grid-template-columns: 20px 1fr auto; row-gap: .2rem; }
  .bo-k-pris { grid-column: 3; }
  .bo-k .brad-antall { grid-column: 2 / 4; justify-self: end; }
  .betaling-valg { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .bsq-s, .bsq-t, .brad-velg, .betaling-kort span, .konto-grid li { transition: none; }
}

/* ============================================================
   PAKKEVELGER – kunden velger pizza, brus og dipp
   ============================================================ */
.pvalg {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: grid;
  place-items: end center;
  opacity: 0;
  transition: opacity .25s ease;
}
.pvalg.is-open { opacity: 1; }
.pvalg-bak {
  position: absolute;
  inset: 0;
  background: rgba(17,17,17,.55);
  backdrop-filter: blur(3px);
}
.pvalg-panel {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: 86vh;
  overflow-y: auto;
  background: var(--white);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 1.2rem 1.2rem calc(1.2rem + env(safe-area-inset-bottom));
  transform: translateY(16px);
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.pvalg.is-open .pvalg-panel { transform: translateY(0); }

.pvalg-topp {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.pvalg-topp h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: .01em;
}
.pvalg-x {
  border: none;
  background: var(--grey);
  width: 34px; height: 34px;
  border-radius: 50%;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s;
}
.pvalg-x:hover { background: rgba(17,17,17,.12); }
.pvalg-inn {
  font-size: .82rem;
  color: var(--grey-text);
  margin: .2rem 0 1rem;
}

.pvalg-rader { display: flex; flex-direction: column; gap: .5rem; }
.pvalg-rad {
  display: grid;
  grid-template-columns: 78px 1fr;
  align-items: center;
  gap: .6rem;
}
.pvalg-rad label {
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--grey-text);
}
/* Stor trykkflate – mobilen åpner sin egen hjulvelger */
.pvalg-velg {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 46px;
  border: 2px solid rgba(17,17,17,.14);
  border-radius: var(--radius-sm);
  background: var(--white);
  font: 700 .92rem var(--font-body);
  color: var(--black);
  padding: .6rem 2rem .6rem .8rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23F97316' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8rem center;
  background-size: 11px;
  transition: border-color .15s;
}
.pvalg-velg:hover { border-color: var(--orange); }
.pvalg-velg:focus-visible { outline: 3px solid rgba(249,115,22,.4); outline-offset: 1px; }

#pvalgOk { width: 100%; margin-top: 1.1rem; }

@media (min-width: 640px) {
  .pvalg { place-items: center; }
  .pvalg-panel { border-radius: var(--radius); }
}
@media (prefers-reduced-motion: reduce) {
  .pvalg, .pvalg-panel { transition: none; }
}

/* ============================================================
   KATEGORIKORT I 3D
   ------------------------------------------------------------
   Maten svever over kortet og snurrer sakte, som på en
   utstillingsplate. Bevisst en myk vugging (±16°) og ikke en
   hel runde: bildene er flate utklipp, så en full 360° ville
   vist baksiden speilvendt og ødelagt illusjonen.
   ============================================================ */

.cat-card {
  perspective: 800px;
  transform-style: preserve-3d;
  position: relative;
  /* IKKE overflow:hidden her – det ville klippet maten når den
     løftes mot kameraet, og flater ut 3D-en i enkelte nettlesere.
     Gløden under holder seg innenfor kortet av seg selv. */
}

/* Varm glød bak maten – gir den noe å sveve mot */
.cat-card::before {
  content: '';
  position: absolute;
  top: 8%; left: 50%;
  width: 74%; height: 42%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(249,115,22,.16), transparent);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.cat-card:hover::before { opacity: 1; }

.cat-card img {
  width: 100%;
  max-width: 190px;
  height: 130px;
  object-fit: contain;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.22));
  transform-style: preserve-3d;
  animation: cat-snurr 7s ease-in-out infinite;
  transition: filter .35s ease;
  will-change: transform;
}

/* Vuggingen: sakte rundt Y, med et lite vipp i X – ser ut som
   den står på en dreieskive */
@keyframes cat-snurr {
  0%   { transform: rotateY(-16deg) rotateX(4deg) translateZ(24px) translateY(0); }
  50%  { transform: rotateY(16deg)  rotateX(-3deg) translateZ(24px) translateY(-7px); }
  100% { transform: rotateY(-16deg) rotateX(4deg) translateZ(24px) translateY(0); }
}

/* Hver rett starter et litt ulikt sted i vuggingen – da snurrer
   de ikke i takt som et karusell */
.cat-grid .cat-card:nth-child(1) img { animation-delay: 0s; }
.cat-grid .cat-card:nth-child(2) img { animation-delay: -1.7s; }
.cat-grid .cat-card:nth-child(3) img { animation-delay: -3.4s; }
.cat-grid .cat-card:nth-child(4) img { animation-delay: -5.1s; }
.cat-grid .cat-card:nth-child(5) img { animation-delay: -2.6s; }
.cat-grid .cat-card:nth-child(6) img { animation-delay: -4.3s; }

/* Peker musa på kortet, stopper snurringen og maten løftes mot deg */
.cat-card:hover img {
  animation-play-state: paused;
  filter: drop-shadow(0 22px 30px rgba(0,0,0,.3));
}
.cat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }

@media (prefers-reduced-motion: reduce) {
  .cat-card img { animation: none; transform: translateZ(0); }
  .cat-card::before { transition: none; }
}

/* ============================================================
   SELSKAP & BURSDAG
   ------------------------------------------------------------
   Fem steg i rekkefølge. Steg 2–5 er skjult til kunden har
   valgt anledning – da vet vi hvilken mat og hvilket ord vi
   skal bruke ("per spiller", ikke "per barn").
   ============================================================ */

body[data-fest] { background: var(--cream); }

/* ---------- Steg 1: hero + typevalg ---------- */
.fest-hero {
  position: relative;
  background: var(--black);
  color: var(--white);
  padding: 2.2rem 0 2.4rem;
  overflow: hidden;
}
.fest-hero-glo {
  position: absolute;
  top: -35%; left: 50%;
  width: 130%; height: 130%;
  transform: translateX(-50%);
  background: radial-gradient(45% 40% at 50% 40%, rgba(249,115,22,.28), transparent 70%);
  pointer-events: none;
}
.fest-hero .container { position: relative; z-index: 1; }
.fest-kicker {
  font: 800 .7rem var(--font-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: .4rem;
}
.fest-tittel {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 10vw, 3.4rem);
  line-height: .93;
  text-transform: uppercase;
}
.fest-ingress {
  color: rgba(255,255,255,.62);
  font-size: .9rem;
  margin: .6rem 0 1.4rem;
  max-width: 34ch;
}

.fest-typer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .55rem;
}
.ftype {
  position: relative;
  border: 2px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  border-radius: var(--radius-sm);
  padding: .8rem .4rem .7rem;
  color: var(--white);
  cursor: pointer;
  text-align: center;
  transition: border-color .18s, background .18s, transform .14s;
}
.ftype:hover { border-color: rgba(249,115,22,.6); background: rgba(255,255,255,.09); }
.ftype:active { transform: scale(.96); }
.ftype.is-on {
  border-color: var(--orange);
  background: var(--orange);
}
.ftype-merke {
  position: absolute;
  top: -7px; left: 50%;
  transform: translateX(-50%);
  background: var(--green);
  color: #fff;
  font: 800 .54rem var(--font-body);
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .14rem .4rem;
  border-radius: 100px;
  white-space: nowrap;
}
.ftype-bilde {
  display: block;
  height: 46px;
  margin-bottom: .35rem;
  perspective: 500px;
}
.ftype-bilde img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.5));
  animation: cat-snurr 8s ease-in-out infinite;
}
.fest-typer .ftype:nth-child(2) img { animation-delay: -1.3s; }
.fest-typer .ftype:nth-child(3) img { animation-delay: -2.6s; }
.fest-typer .ftype:nth-child(4) img { animation-delay: -3.9s; }
.fest-typer .ftype:nth-child(5) img { animation-delay: -5.2s; }
.fest-typer .ftype:nth-child(6) img { animation-delay: -6.5s; }
.ftype strong { display: block; font-size: .8rem; line-height: 1.15; }
.ftype-under {
  display: block;
  font-size: .62rem;
  opacity: .55;
  margin-top: .1rem;
  line-height: 1.2;
}
.ftype.is-on .ftype-under { opacity: .8; }

/* ---------- Steg-seksjoner ---------- */
.fest-steg { padding: 1.8rem 0 .4rem; }
.fest-steg-nr {
  font: 800 .64rem var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: .2rem;
}
.fest-h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  text-transform: uppercase;
}
.fest-h2-rad {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.fest-nullstill {
  border: none; background: none;
  color: var(--orange);
  font: 700 .78rem var(--font-body);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.fest-hint {
  font-size: .78rem;
  color: var(--grey-text);
  margin: .25rem 0 .8rem;
  line-height: 1.45;
}

/* ---------- Steg 2: telleren ---------- */
.fest-teller { position: relative; perspective: 900px; margin-top: .6rem; }
.fest-stabel {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
  pointer-events: none;
  opacity: .5;
}
.fest-lag {
  position: absolute;
  width: 108px;
  filter: drop-shadow(0 14px 20px rgba(0,0,0,.28));
  transform:
    translateZ(calc(var(--i) * -44px))
    translateX(calc((var(--i) - 2) * 32px))
    translateY(calc(var(--i) * -6px))
    rotate(calc((var(--i) - 2) * 6deg));
  opacity: calc(1 - var(--i) * .13);
  animation: fest-inn .4s cubic-bezier(.2,.9,.3,1.4) backwards;
  animation-delay: calc(var(--i) * .05s);
}
@keyframes fest-inn {
  from { opacity: 0; transform: translateZ(-150px) scale(.6); }
}
.fest-dial {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  padding: 1rem 0 .4rem;
}
.fest-knapp {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 2px solid rgba(17,17,17,.14);
  background: var(--white);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: var(--shadow);
  transition: background .15s, border-color .15s, color .15s, transform .12s;
}
.fest-knapp:hover { background: var(--orange); border-color: var(--orange); color: #fff; }
.fest-knapp:active { transform: scale(.88); }
.fest-num { text-align: center; min-width: 110px; }
.fest-num span {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(4rem, 19vw, 5.6rem);
  line-height: .85;
  font-variant-numeric: tabular-nums;
}
.fest-num em {
  display: block;
  font-style: normal;
  font: 800 .66rem var(--font-body);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--grey-text);
  margin-top: .4rem;
}

/* Hurtigvalg – de fleste selskap er 10, 20, 30 eller 50 */
.fest-hopp {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: .35rem;
  margin-top: .3rem;
}
.fest-hopp button {
  border: 1.5px solid rgba(17,17,17,.14);
  background: var(--white);
  border-radius: 100px;
  padding: .3rem .8rem;
  font: 700 .78rem var(--font-body);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.fest-hopp button:hover { border-color: var(--orange); color: var(--orange); }

/* ---------- Rabattstigen ---------- */
.fstige-boks {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: .9rem;
  margin-top: 1.2rem;
}
.fstige {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .35rem;
}
.fstige-t {
  text-align: center;
  padding: .5rem .2rem;
  border-radius: var(--radius-sm);
  background: var(--grey);
  border: 2px solid transparent;
  transition: background .25s, border-color .25s, color .25s;
}
.fstige-t b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--grey-text);
}
.fstige-t span { font-size: .62rem; color: var(--grey-text); }
.fstige-t.er-pa {
  background: var(--green);
  border-color: var(--green);
}
.fstige-t.er-pa b, .fstige-t.er-pa span { color: #fff; }
.fstige-t.er-neste {
  border-color: var(--orange);
  border-style: dashed;
  background: rgba(249,115,22,.07);
}
.fstige-t.er-neste b { color: var(--orange); }
.fstige-tekst {
  font-size: .78rem;
  color: var(--grey-text);
  margin-top: .6rem;
  text-align: center;
  line-height: 1.4;
}

/* ---------- Steg 3: nivå + linjer ---------- */
.fest-nivaer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .4rem;
  margin-bottom: .8rem;
}
.fnivaa {
  border: 2px solid rgba(17,17,17,.12);
  background: var(--white);
  border-radius: var(--radius-sm);
  padding: .6rem .3rem;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s, background .15s, color .15s, transform .12s;
}
.fnivaa strong { display: block; font-size: .84rem; }
.fnivaa span { display: block; font-size: .64rem; color: var(--grey-text); margin-top: .1rem; }
.fnivaa:active { transform: scale(.96); }
.fnivaa.is-on { background: var(--black); border-color: var(--black); color: var(--white); }
.fnivaa.is-on span { color: rgba(255,255,255,.55); }

.fest-liste {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: .3rem .8rem;
}
.flinje {
  display: grid;
  grid-template-columns: 42px 1fr auto auto;
  align-items: center;
  gap: .6rem;
  padding: .5rem 0;
  border-bottom: 1px solid rgba(17,17,17,.06);
}
.flinje:last-child { border-bottom: none; }
.flinje-bilde {
  width: 42px; height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.14));
}
.flinje-midt { min-width: 0; }
.flinje-velg {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  font: 700 .89rem var(--font-body);
  color: var(--black);
  padding: .15rem 1rem .15rem .2rem;
  border-radius: 5px;
  cursor: pointer;
  width: 100%;
  text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23F97316' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .15rem center;
  background-size: 9px;
}
.flinje-velg:hover { background-color: var(--cream); }
.flinje-velg:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }
.flinje-kat {
  display: block;
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--grey-text);
  font-weight: 800;
  padding-left: .2rem;
}
.flinje-sum {
  font-weight: 800;
  font-size: .84rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fest-tom { padding: 1rem 0; color: var(--grey-text); font-size: .85rem; }

.ftall { display: inline-flex; align-items: center; gap: .1rem; flex-shrink: 0; }
.ftall b { min-width: 24px; text-align: center; font-size: .9rem; font-variant-numeric: tabular-nums; }
.ftall-b, .fbygg-b {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1.5px solid rgba(17,17,17,.16);
  background: var(--white);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, border-color .15s, transform .1s;
}
.ftall-b:hover, .fbygg-b:hover { border-color: var(--orange); color: var(--orange); }
.ftall-b:active, .fbygg-b:active { transform: scale(.85); }

/* ---------- Steg 4: legg til selv (sammenleggbar) ---------- */
.fest-bygg {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: .3rem .9rem;
}
.fbygg-kat { border-bottom: 1px solid rgba(17,17,17,.07); }
.fbygg-kat:last-child { border-bottom: none; }
.fbygg-kat summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .75rem .2rem;
  cursor: pointer;
  font: 800 .82rem var(--font-body);
  list-style: none;
}
.fbygg-kat summary::-webkit-details-marker { display: none; }
.fbygg-kat summary::after {
  content: '';
  width: 8px; height: 8px;
  border-right: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: rotate(45deg);
  margin-left: auto;
  transition: transform .2s;
}
.fbygg-kat[open] summary::after { transform: rotate(-135deg); }
.fbygg-teller {
  font-style: normal;
  background: var(--orange);
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  min-width: 20px;
  text-align: center;
  padding: .1rem .35rem;
  border-radius: 100px;
}
.fbygg-teller:empty { display: none; }
.fbygg-rad {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: .55rem;
  padding: .28rem 0;
  border-bottom: 1px solid rgba(17,17,17,.04);
}
.fbygg-rad:last-child { border-bottom: none; padding-bottom: .7rem; }
.fbygg-rad.is-valgt {
  background: rgba(249,115,22,.06);
  box-shadow: inset 3px 0 0 var(--orange);
  padding-left: .5rem;
  margin-left: -.5rem;
  border-radius: 3px;
}
.fbygg-navn {
  font-size: .84rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fbygg-pris {
  font-size: .76rem;
  color: var(--grey-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- Steg 5: kvitteringen ---------- */
.fkvitt {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem;
}
.fkvitt-topp {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .6rem;
  margin-bottom: .5rem;
  border-bottom: 2px solid var(--black);
}
.fkvitt-topp strong { font-family: var(--font-display); font-size: 1.15rem; text-transform: uppercase; }
.fkvitt-topp span { font-size: .8rem; color: var(--grey-text); font-weight: 700; }
.fkvitt-l {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: .85rem;
  padding: .16rem 0;
}
.fkvitt-l span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fkvitt-sum { margin-top: .6rem; padding-top: .6rem; border-top: 1px dashed rgba(17,17,17,.15); }
.fkvitt-rab { color: var(--green); font-weight: 700; }
.fkvitt-tot {
  font-size: 1.1rem;
  font-weight: 800;
  margin-top: .3rem;
  padding-top: .4rem;
  border-top: 2px solid var(--black);
}
.fkvitt-pp { color: var(--orange); font-weight: 800; }

/* ---------- Alltid synlig sum ---------- */
.fest-luft { height: 6.5rem; }
.fest-sum {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 95;
  background: rgba(17,17,17,.97);
  backdrop-filter: blur(12px);
  color: var(--white);
  padding: .7rem .9rem calc(.7rem + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 34px rgba(0,0,0,.28);
}
.fest-sum.is-tom { opacity: .55; }
.fsum-inn {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .9rem;
}
.fsum-tall { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; min-width: 0; }
.fsum-total span {
  display: block;
  font-size: .64rem;
  color: rgba(255,255,255,.5);
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 800;
}
.fsum-total strong { font-family: var(--font-display); font-size: 1.55rem; line-height: 1; }
.fsum-spar {
  background: var(--green);
  color: #fff;
  font: 800 .66rem var(--font-body);
  padding: .2rem .5rem;
  border-radius: 100px;
  white-space: nowrap;
}
.fsum-pp { font-weight: 800; font-size: .88rem; color: var(--orange); white-space: nowrap; }
.fsum-pp em { font-style: normal; font-weight: 600; font-size: .66rem; color: rgba(255,255,255,.5); }
.fsum-inn .btn { flex-shrink: 0; }
.fsum-inn .btn:disabled { opacity: .4; cursor: not-allowed; }

body[data-fest] .sticky-order { display: none !important; }
body[data-fest] .cart-float { bottom: calc(6rem + env(safe-area-inset-bottom)); }
body[data-fest] .back-to-top { display: none; }

/* ---------- Mobil ---------- */
@media (max-width: 560px) {
  .fest-hero { padding: 1.6rem 0 2rem; }
  .fest-typer { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
  .fest-lag { width: 88px; }
  .fest-knapp { width: 50px; height: 50px; }
  .flinje { grid-template-columns: 36px 1fr auto; row-gap: 0; }
  .flinje-bilde { width: 36px; height: 36px; }
  .flinje-sum { grid-column: 3; }
  .flinje .ftall { grid-column: 2 / 4; justify-self: end; margin-top: -.15rem; }
  .fsum-inn { flex-direction: column; align-items: stretch; gap: .5rem; }
  .fsum-tall { justify-content: space-between; }
  .fsum-inn .btn { width: 100%; }
  .fest-luft { height: 9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .fest-lag, .ftype-bilde img { animation: none; }
  .fnivaa, .fest-knapp, .ftall-b, .fbygg-b, .ftype { transition: none; }
}

/* ============================================================
   FORSIDE-HERO: TEKSTEN STÅR I ROMMET
   ------------------------------------------------------------
   Bildet er et ekte rom med dybde – veggen løper innover til
   venstre, panelet står nært til høyre. Teksten legges ikke
   OPPÅ bildet, den plasseres I det: støpt med dybde, vendt mot
   lyset fra panelet, og den vipper når du beveger musa.

   Hvorfor ekte tekst og ikke innbrent: den blir skarp på alle
   skjermer, kan leses av skjermlesere, og endres uten Photoshop.
   ============================================================ */

.hero-rom {
  position: relative;
  min-height: min(88vh, 720px);
  display: grid;
  align-items: end;
  overflow: hidden;
  background: #0b0b0b;
  isolation: isolate;
}
.hero-rom-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;   /* holder trepanelet og benkene i bildet */
  z-index: -2;
  animation: rom-inn 1.4s cubic-bezier(.2,.7,.3,1) backwards;
}
@keyframes rom-inn {
  from { transform: scale(1.08); opacity: .4; }
}

/* Mørkner nedre halvdel så teksten får noe å stå mot */
.hero-rom-tone {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(8,8,8,.92) 8%, rgba(8,8,8,.55) 42%, transparent 72%),
    radial-gradient(70% 50% at 78% 40%, rgba(249,115,22,.16), transparent 70%);
}

.hero-rom-inn { position: relative; z-index: 1; }
.hero-rom-scene {
  perspective: 1000px;
  perspective-origin: 30% 50%;
  padding: 3.5rem 0 2.2rem;
}

/* ---------- Ordene: støpt i 3D ---------- */
.hero-ord {
  margin: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 8deg)) rotateY(var(--ry, -6deg));
  transition: transform .4s cubic-bezier(.2,.8,.3,1);
}
.ord {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 11.5vw, 6rem);
  line-height: .86;
  letter-spacing: -.01em;
  text-transform: uppercase;
  position: relative;
  transform-style: preserve-3d;
  animation: ord-inn .8s cubic-bezier(.2,.9,.3,1.1) backwards;
}
.ord-1 {
  color: #fff;
  /* Dybden: lag på lag bakover, mørkere jo lenger inn.
     Siste skygge er slagskyggen mot rommet bak. */
  text-shadow:
    1px 1px 0 #c9c4bd, 2px 2px 0 #b5b0a9, 3px 3px 0 #a29d96,
    4px 4px 0 #8e8a83, 5px 5px 0 #7a7770, 6px 6px 0 #66635d,
    7px 7px 0 #52504b, 8px 8px 0 #3e3c38,
    10px 12px 22px rgba(0,0,0,.7);
  animation-delay: .25s;
  transform: translateZ(30px);
}
.ord-2 {
  color: var(--orange);
  margin-left: .5em;
  text-shadow:
    1px 1px 0 #d9600f, 2px 2px 0 #c5570e, 3px 3px 0 #b14e0c,
    4px 4px 0 #9d450b, 5px 5px 0 #893c09, 6px 6px 0 #753308,
    7px 7px 0 #612a06, 8px 8px 0 #4d2105,
    10px 12px 22px rgba(0,0,0,.7);
  animation-delay: .4s;
  transform: translateZ(52px);   /* nærmere kameraet enn FERSKT */
}
@keyframes ord-inn {
  from { opacity: 0; transform: translateZ(-90px) translateY(24px); }
}

/* ---------- Strøket under ---------- */
.hero-strek {
  position: relative;
  display: inline-block;
  margin: .9rem 0 0 .5em;
  transform: translateZ(60px) rotate(-1.6deg);
  animation: strek-inn .6s ease-out .65s backwards;
}
.hero-strek span {
  position: relative;
  z-index: 1;
  display: block;
  font: 800 clamp(.8rem, 2.6vw, 1.05rem) var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  padding: .5rem 1.1rem;
}
/* Malingsstrøket bak teksten – uregelmessig, ikke en boks */
.hero-strek::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #141414;
  border-radius: 40% 60% 55% 45% / 60% 45% 55% 40%;
  transform: rotate(.6deg) scaleX(1.02);
}
/* Oransje understrek som stikker litt ut */
.hero-strek::after {
  content: '';
  position: absolute;
  left: 12%; right: 6%;
  bottom: -3px;
  height: 4px;
  background: var(--orange);
  border-radius: 100px;
  transform: rotate(-.8deg);
}
@keyframes strek-inn {
  from { opacity: 0; transform: translateZ(60px) rotate(-1.6deg) translateY(14px); }
}

/* ---------- De tre merkene ---------- */
.hero-merker {
  list-style: none;
  padding: 0;
  margin: 1.6rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  transform: translateZ(20px);
}
.hero-merker li {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
  border-radius: 100px;
  padding: .45rem .9rem;
  color: rgba(255,255,255,.9);
  font: 800 .72rem var(--font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  animation: merke-inn .5s ease-out backwards;
  animation-delay: calc(.85s + var(--m) * .12s);
}
.hero-merker svg { width: 17px; height: 17px; color: var(--orange); flex-shrink: 0; }
@keyframes merke-inn {
  from { opacity: 0; transform: translateY(10px); }
}

.hero-rom-knapper {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.6rem;
  transform: translateZ(20px);
  animation: merke-inn .5s ease-out 1.25s backwards;
}
/* Hvit knapp mot det mørke rommet */
.btn-hvit {
  background: rgba(255,255,255,.1);
  border: 2px solid rgba(255,255,255,.45);
  color: #fff;
  backdrop-filter: blur(8px);
}
.btn-hvit:hover { background: #fff; color: var(--black); border-color: #fff; }

/* ---------- Mobil ---------- */
@media (max-width: 640px) {
  .hero-rom { min-height: 78vh; align-items: end; }
  .hero-rom-foto { object-position: 68% center; }
  .hero-rom-scene { padding: 2.5rem 0 1.4rem; }
  .ord-2 { margin-left: .25em; }
  .hero-strek { margin-left: .25em; }
  .hero-merker li { font-size: .64rem; padding: .38rem .7rem; }
  .hero-merker svg { width: 14px; height: 14px; }
  .hero-rom-knapper .btn { flex: 1; min-width: 140px; }
  /* Færre lag i støpingen – skarpere på liten skjerm */
  .ord-1 { text-shadow: 1px 1px 0 #b5b0a9, 2px 2px 0 #8e8a83, 3px 3px 0 #66635d, 4px 4px 0 #3e3c38, 6px 8px 16px rgba(0,0,0,.7); }
  .ord-2 { text-shadow: 1px 1px 0 #c5570e, 2px 2px 0 #9d450b, 3px 3px 0 #753308, 4px 4px 0 #4d2105, 6px 8px 16px rgba(0,0,0,.7); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-rom-foto, .ord, .hero-strek, .hero-merker li, .hero-rom-knapper { animation: none; }
  .hero-ord { transition: none; transform: none; }
}

/* ============================================================
   BESTILL ONLINE-BANNER
   (ble slettet ved et uhell i en opprydning – gjenopprettet)
   ============================================================ */
.order-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0 0;
  padding: .85rem 1.1rem;
  border-radius: var(--radius);
  background: linear-gradient(100deg, #171717, #0d0d0d 60%);
  color: var(--white);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.08);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s;
}
.order-banner:hover {
  transform: translateY(-2px);
  border-color: rgba(249,115,22,.4);
  box-shadow: 0 16px 36px -14px rgba(249,115,22,.55);
}
.order-banner:active { transform: translateY(0) scale(.995); }

/* Lysstripe som sveiper over – trekker øyet uten å rope */
.order-banner-skinn {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, transparent 30%, rgba(249,115,22,.22) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: skinn 4.5s ease-in-out infinite;
}
@keyframes skinn {
  0%, 60%, 100% { transform: translateX(-100%); }
  80%           { transform: translateX(100%); }
}

.order-banner-mat {
  width: 58px;
  flex-shrink: 0;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.55));
  transform: rotate(-8deg) scale(1.12);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.order-banner:hover .order-banner-mat { transform: rotate(-4deg) scale(1.22); }

.order-banner-tekst { flex: 1; min-width: 0; }
.order-banner-tekst strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1.05;
}
.order-banner-tekst > span:last-child {
  display: block;
  font-size: .78rem;
  color: rgba(255,255,255,.6);
  margin-top: .1rem;
}

/* Grønt punkt = vi er åpne og tar imot */
.order-banner-puls {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  margin-right: .4rem;
  vertical-align: middle;
  animation: puls 2.2s ease-out infinite;
}
@keyframes puls {
  0%   { box-shadow: 0 0 0 0 rgba(100,167,47,.7); }
  70%  { box-shadow: 0 0 0 7px rgba(100,167,47,0); }
  100% { box-shadow: 0 0 0 0 rgba(100,167,47,0); }
}

.order-banner-cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  flex-shrink: 0;
  background: var(--orange);
  color: var(--white);
  font-weight: 800;
  font-size: .85rem;
  padding: .55rem 1rem;
  border-radius: 100px;
  white-space: nowrap;
}
.order-banner-cta svg { transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.order-banner:hover .order-banner-cta svg { transform: translateX(3px); }

@media (max-width: 520px) {
  .order-banner { padding: .75rem .8rem; gap: .7rem; }
  .order-banner-mat { width: 46px; }
  .order-banner-tekst strong { font-size: 1.05rem; }
  .order-banner-cta span { display: none; }
  .order-banner-cta { padding: .55rem .7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .order-banner-skinn, .order-banner-puls { animation: none; }
  .order-banner, .order-banner-mat, .order-banner-cta svg { transition: none; }
}

/* ============================================================
   TILLEGGSVELGER
   ------------------------------------------------------------
   Glir opp fra bunnen. Ett trykk merker et tillegg (grønn hake),
   knappen nederst viser total live. Kunden kan hoppe over.
   ============================================================ */
.tvelger {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: end center;
  opacity: 0;
  transition: opacity .25s ease;
}
.tvelger.is-open { opacity: 1; }
.tv-bak {
  position: absolute;
  inset: 0;
  background: rgba(17,17,17,.55);
  backdrop-filter: blur(3px);
}
.tv-panel {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: 88vh;
  overflow-y: auto;
  background: linear-gradient(180deg, #fff 0%, #fffdf9 100%);
  border-radius: 28px 28px 0 0;
  padding: 1.35rem 1.2rem calc(1.2rem + env(safe-area-inset-bottom));
  box-shadow: 0 -20px 50px rgba(17,17,17,.18);
  transform: translateY(18px);
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.tvelger.is-open .tv-panel { transform: translateY(0); }

.tv-topp {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.tv-topp h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  text-transform: uppercase;
  line-height: 1;
}
.tv-under { font-size: .92rem; color: var(--grey-text); margin-top: .35rem; line-height: 1.4; }
.tv-hjelp { margin: 0 0 .85rem; font-size: .82rem; color: var(--grey-text); line-height: 1.45; }
.tv-x {
  border: none;
  background: #f2ede4;
  width: 44px; height: 44px;
  border-radius: 50%;
  font-size: 2rem;
  color: #3b82f6;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, transform .15s;
}
.tv-x:hover { transform: scale(1.03); }
.tv-x:hover { background: #ebe4d7; }

.tv-rader { display: flex; flex-direction: column; gap: .65rem; }
.tv-rad {
  display: flex;
  align-items: center;
  gap: .9rem;
  width: 100%;
  min-height: 72px;
  padding: 1rem 1rem;
  border: 2px solid rgba(17,17,17,.1);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 2px 0 rgba(17,17,17,.03);
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, background .15s, transform .15s, box-shadow .15s;
}
.tv-rad:hover { border-color: rgba(249,115,22,.4); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(17,17,17,.08); }
.tv-rad.is-valgt { border-color: var(--orange); background: rgba(249,115,22,.07); box-shadow: 0 12px 28px rgba(249,115,22,.12); }
.tv-navn { flex: 1; font-weight: 800; font-size: 1.05rem; line-height: 1.2; color: var(--black); }
.tv-pris { font-weight: 900; font-size: 1rem; color: #6e655e; white-space: nowrap; }
.tv-gratis { color: var(--green); font-weight: 800; }

/* Haken – tom sirkel som fylles når valgt */
.tv-hake {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 3px solid rgba(17,17,17,.18);
  flex-shrink: 0;
  position: relative;
  transition: background .15s, border-color .15s, transform .15s;
}
.tv-rad.is-valgt .tv-hake { background: var(--orange); border-color: var(--orange); }
.tv-rad.is-valgt .tv-hake::after {
  content: '';
  position: absolute;
  left: 8px; top: 4px;
  width: 5px; height: 10px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

.tv-actions { position: sticky; bottom: calc(env(safe-area-inset-bottom) * -1); background: linear-gradient(180deg, rgba(255,253,249,0) 0%, rgba(255,253,249,.95) 14%, rgba(255,253,249,1) 34%); padding-top: 1rem; margin-top: 1rem; }
.tv-ok { width: 100%; margin-top: 0; }
.tv-hopp {
  display: block;
  width: 100%;
  margin-top: .65rem;
  border: none;
  background: none;
  color: var(--grey-text);
  font: 600 .95rem var(--font-body);
  cursor: pointer;
  padding: .65rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tv-hopp:hover { color: var(--black); }

@media (min-width: 640px) {
  .tvelger { place-items: center; }
  .tv-panel { border-radius: var(--radius); }
}
@media (prefers-reduced-motion: reduce) {
  .tvelger, .tv-panel { transition: none; }
}

/* ============================================================
   VARIANTVELGER – brus og milkshake
   ============================================================ */

.vvalg {
  position: fixed;
  inset: 0;
  z-index: 155;
  display: grid;
  place-items: end center;
}
.vvalg-bak {
  position: absolute;
  inset: 0;
  background: rgba(17,17,17,.55);
  backdrop-filter: blur(3px);
}
.vvalg-panel {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: 88vh;
  overflow-y: auto;
  background: linear-gradient(180deg, #fff 0%, #fffdf9 100%);
  border-radius: 28px 28px 0 0;
  padding: 1.35rem 1.2rem calc(1.2rem + env(safe-area-inset-bottom));
  box-shadow: 0 -20px 50px rgba(17,17,17,.18);
}
.vvalg-topp {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.vvalg-topp h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  text-transform: uppercase;
  line-height: 1;
}
.vvalg-under { margin: .35rem 0 0; font-size: .92rem; color: var(--grey-text); line-height: 1.4; }
.vvalg-x {
  border: none;
  background: #f2ede4;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 2rem;
  color: #3b82f6;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.vvalg-accent {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin: .95rem 0 .8rem;
  padding: .4rem .7rem;
  border-radius: 999px;
  background: rgba(249,115,22,.1);
  color: var(--orange-dark);
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.vvalg-rader { display: flex; flex-direction: column; gap: .65rem; }
.vvalg-opt {
  display: flex;
  align-items: center;
  gap: .9rem;
  width: 100%;
  min-height: 68px;
  padding: 1rem;
  border: 2px solid rgba(17,17,17,.1);
  border-radius: 20px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, background .15s, transform .15s, box-shadow .15s;
}
.vvalg-opt:hover { border-color: rgba(249,115,22,.4); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(17,17,17,.08); }
.vvalg-opt.is-valgt { border-color: var(--orange); background: rgba(249,115,22,.07); box-shadow: 0 12px 28px rgba(249,115,22,.12); }
.vvalg-opt-navn { flex: 1; font-weight: 800; font-size: 1rem; }
.vvalg-opt-hake { width: 28px; height: 28px; border-radius: 50%; border: 3px solid rgba(17,17,17,.18); position: relative; flex-shrink: 0; }
.vvalg-opt.is-valgt .vvalg-opt-hake { background: var(--orange); border-color: var(--orange); }
.vvalg-opt.is-valgt .vvalg-opt-hake::after { content: ''; position: absolute; left: 8px; top: 4px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.vvalg-promo { margin: .95rem 0 0; padding: .8rem .9rem; border-radius: 18px; background: rgba(249,115,22,.08); color: var(--orange-dark); font-size: .88rem; font-weight: 700; line-height: 1.45; }
.vvalg-actions { position: sticky; bottom: calc(env(safe-area-inset-bottom) * -1); background: linear-gradient(180deg, rgba(255,253,249,0) 0%, rgba(255,253,249,.95) 14%, rgba(255,253,249,1) 34%); padding-top: 1rem; margin-top: 1rem; }
.vvalg-ok { width: 100%; }
.vvalg-avbryt { display: block; width: 100%; margin-top: .65rem; border: none; background: none; color: var(--grey-text); font: 600 .95rem var(--font-body); cursor: pointer; padding: .65rem; text-decoration: underline; text-underline-offset: 3px; }
.vvalg-avbryt:hover { color: var(--black); }

@media (min-width: 640px) {
  .vvalg { place-items: center; }
  .vvalg-panel { border-radius: 28px; }
}

/* ============================================================
   SMART MERSALG I KURVEN
   ------------------------------------------------------------
   Diskret stripe over totalen. Skal friste, ikke mase – derfor
   dempet bakgrunn, tydelig lukk-kryss, og ett trykk legger til.
   ============================================================ */
.mersalg {
  position: relative;
  background: linear-gradient(135deg, rgba(249,115,22,.09), rgba(100,167,47,.07));
  border: 1px solid rgba(249,115,22,.2);
  border-radius: var(--radius-sm);
  padding: .8rem .9rem;
  margin-bottom: .9rem;
  animation: ms-inn .35s cubic-bezier(.2,.8,.3,1.1);
}
@keyframes ms-inn {
  from { opacity: 0; transform: translateY(8px); }
}
.ms-lukk {
  position: absolute;
  top: .4rem; right: .5rem;
  border: none;
  background: none;
  color: var(--grey-text);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: .2rem;
  opacity: .6;
}
.ms-lukk:hover { opacity: 1; }
.ms-tittel {
  font-family: var(--font-display);
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: .01em;
  padding-right: 1.5rem;
}
.ms-under {
  font-size: .74rem;
  color: var(--grey-text);
  margin-bottom: .6rem;
}
.ms-varer { display: flex; flex-wrap: wrap; gap: .4rem; }
.ms-vare {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--white);
  border: 1.5px solid rgba(17,17,17,.12);
  border-radius: 100px;
  padding: .4rem .5rem .4rem .9rem;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s, transform .1s, box-shadow .15s;
}
.ms-vare:hover {
  border-color: var(--orange);
  box-shadow: 0 4px 12px -4px rgba(249,115,22,.4);
}
.ms-vare:active { transform: scale(.96); }
.ms-vare-navn { font-weight: 700; font-size: .82rem; }
.ms-vare-pris { font-size: .76rem; color: var(--grey-text); font-weight: 700; }
.ms-vare-pluss {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .mersalg { animation: none; }
  .ms-vare { transition: none; }
}

/* ============================================================
   MEST POPULÆRE (kun forsiden – rører ikke Grill Shack)
   ------------------------------------------------------------
   Storselgerne tidlig på siden med bilde, pris og ett-klikks
   bestilling. Konsistent korthøyde, appetittvekkende bilder,
   ett tydelig bestill-punkt per kort.
   ============================================================ */
.pop-seksjon { padding-top: 2.4rem; }
.pop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .9rem;
  margin-top: 1.4rem;
}
.pop-kort {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
}
.pop-kort:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }

.pop-merke {
  position: absolute;
  top: .6rem; left: .6rem;
  z-index: 2;
  background: var(--black);
  color: #fff;
  font: 800 .6rem var(--font-body);
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: .28rem .55rem;
  border-radius: 100px;
}

.pop-bilde {
  aspect-ratio: 4 / 3;
  background: var(--cream);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.pop-bilde img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: .6rem;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.16));
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.pop-kort:hover .pop-bilde img { transform: scale(1.06) rotate(-1.5deg); }

.pop-info {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .7rem .8rem .8rem;
  flex: 1;
}
.pop-info h3 {
  font-size: .92rem;
  line-height: 1.2;
  font-weight: 800;
  flex: 1;
}
.pop-bunn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.pop-pris {
  font-weight: 800;
  font-size: .9rem;
  white-space: nowrap;
}
.pop-add { flex-shrink: 0; }

@media (max-width: 560px) {
  .pop-grid { grid-template-columns: 1fr 1fr; gap: .7rem; }
  .pop-info h3 { font-size: .84rem; }
  .pop-pris { font-size: .82rem; }
}
@media (max-width: 340px) {
  .pop-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .pop-kort, .pop-bilde img { transition: none; }
}

/* ============================================================
   CHECKOUT – tydeligere notat-felt og skjemastruktur
   ============================================================ */

/* "Beskjed til kjøkkenet" skal ikke forsvinne – gjør den synlig */
.notat-label {
  display: flex !important;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  margin-top: 0.3rem;
}
.notat-ikon { font-size: 1.1rem; }
.notat-valgfri {
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--grey-text);
  margin-left: auto;
}

/* Notat-feltet tydeligere så det inviterer til bruk */
#okNotat {
  border: 2px dashed rgba(249, 115, 22, 0.35);
  background: rgba(249, 115, 22, 0.03);
  transition: border-color 0.2s, background 0.2s;
}
#okNotat:focus {
  border-style: solid;
  border-color: var(--orange);
  background: var(--white);
}

/* Bla-ned-hint: subtil skygge nederst i skuffen når det er mer innhold */
.cart-body {
  position: relative;
}
.cart-body::after {
  content: '';
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  height: 24px;
  background: linear-gradient(transparent, rgba(255,255,255,0.9));
  pointer-events: none;
  display: block;
  margin-top: -24px;
}