/*
 * Sydkustens Gårdsbryggeri — Main Stylesheet v1.0.0
 */


:root {
  --navy:     #152B44;
  --navy-2:   #1C3858;
  --navy-3:   #264870;
  --cream:    #F2E8C8;
  --cream-2:  #E8D9A8;
  --cream-3:  #D4C080;
  --copper:   #C4922A;
  --copper-l: #E0B24A;
  --copper-d: #8A6015;
  --coral:    #C94B30;
  --teal:     #1E7A6A;
  --white:    #FEFAF0;
  --font-serif:   'Playfair Display', Georgia, serif;
  --font-elegant: 'Cormorant Garamond', Georgia, serif;
  --font-sans:    'Josefin Sans', 'Trebuchet MS', sans-serif;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  background: var(--theme-bg, var(--navy));
  color: var(--cream);
  font-family: var(--font-sans);
  font-weight: 300;
  overflow-x: clip;
  line-height: 1.7;
}

/* ═══════════ GRAIN TEXTURE OVERLAY ═══════════ */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
}

/* ═══════════ AGE GATE ═══════════ */
#age-gate {
  position: fixed;
  inset: 0;
  background: #142840;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}
#age-gate.hidden, #age-gate.gone { opacity:0; visibility:hidden; pointer-events:none; }

/* Full-bleed Art Deco border on the age gate page itself */
#age-gate::before {
  content:'';
  position: absolute;
  inset: 20px;
  border: 1px solid rgba(196,146,42,0.15);
  pointer-events: none;
}
#age-gate::after {
  content:'';
  position: absolute;
  inset: 28px;
  border: 1px solid rgba(196,146,42,0.07);
  pointer-events: none;
}

.age-gate-waves-bg {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  opacity: 0.08;
  pointer-events: none;
}

.age-gate-inner {
  text-align: center;
  max-width: 500px;
  width: 100%;
  position: relative;
  animation: fadeInUp 0.9s ease forwards;
}

/* ── Corner fix: one base SVG shape, positioned via class ── */
.age-gate-border {
  position: relative;
  border: 1px solid rgba(196,146,42,0.5);
  padding: 4rem 3rem 3rem;
}

/* Mobil: dölj ramen + fix logga — gäller alla mobilstorlekar */
@media (max-width: 768px) {
  .age-gate-logo img {
    width: auto !important;
    max-width: 100%;
  }
  .age-gate-border {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
  }
  .corner { display: none !important; }
  #age-gate::before, #age-gate::after { display: none !important; }
}

.corner {
  position: absolute;
  width: 32px;
  height: 32px;
  pointer-events: none;
}
/* Each corner uses the SAME svg but rotated via transform on the div */
.corner.tl { top: -1px;  left: -1px;  transform: none; }
.corner.tr { top: -1px;  right: -1px; transform: scaleX(-1); }
.corner.bl { bottom: -1px; left: -1px;  transform: scaleY(-1); }
.corner.br { bottom: -1px; right: -1px; transform: scale(-1); }
.corner svg { width: 100%; height: 100%; display: block; }

.age-gate-deco { width: 56px; margin: 0 auto 1.5rem; }
.age-gate-deco svg { width: 100%; }

.age-gate-logo {
  font-family: 'Big Shoulders Inline Display', var(--font-serif);
  font-size: 2.6rem;
  font-weight: 900;
  color: var(--cream);
  letter-spacing: 0.12em;
  line-height: 1;
  margin-bottom: 0.2rem;
  text-transform: uppercase;
}
.age-gate-logo span { color: var(--copper); }

.age-gate-sub {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.4em;
  color: var(--copper);
  text-transform: uppercase;
  margin-bottom: 2.5rem;
}

.rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin: 0 auto 2rem;
}
.rule .line { width: 50px; height: 1px; background: rgba(196,146,42,0.4); }
.rule .gem  { width:7px; height:7px; background:var(--copper); transform:rotate(45deg); opacity:0.8; }

.age-gate-question {
  font-family: var(--font-elegant);
  font-size: 1.7rem;
  font-weight: 300;
  font-style: italic;
  color: var(--cream);
  margin-bottom: 0.4rem;
}
.age-gate-desc {
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  color: rgba(242,232,200,0.75);
  text-transform: uppercase;
  margin-bottom: 2.5rem;
}

.age-btns { display:flex; gap:1rem; justify-content:center; margin-bottom:2rem; }

.btn-p {
  background: var(--copper);
  color: var(--navy);
  border: 1px solid var(--copper);
  padding: 0.9rem 2.2rem;
  font-family: var(--font-sans);
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s;
}
.btn-p:hover { background: var(--copper-l); border-color: var(--copper-l); }

.btn-s {
  background: transparent;
  color: rgba(242,232,200,0.5);
  border: 1px solid rgba(196,146,42,0.25);
  padding: 0.9rem 2.2rem;
  font-family: var(--font-sans);
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 300;
  cursor: pointer;
  transition: all 0.25s;
}
.btn-s:hover { border-color: var(--copper); color:var(--cream); }

.age-legal {
  font-size: 0.78rem;
  color: rgba(242,232,200,0.75);
  letter-spacing: 0.04em;
  line-height: 1.8;
  max-width: 380px;
  margin: 0 auto;
}

.age-lang {
  position: absolute;
  top: 1rem; right: 1.2rem;
  z-index: 10;
}
.lang-select {
  background: rgba(20,40,64,0.85);
  border: 1px solid rgba(196,146,42,0.4);
  color: var(--copper);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  padding: 0.3rem 0.5rem;
  cursor: pointer;
  border-radius: 2px;
  outline: none;
  font-family: var(--font-serif);
}
.lang-select:hover { border-color: var(--copper); }
.lang-select option { background: #142840; color: var(--cream); }

/* Nav lang dropdown */
.nav-lang-switch select {
  background: transparent;
  border: 1px solid rgba(196,146,42,0.35);
  color: rgba(242,232,200,0.7);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  padding: 0.2rem 0.4rem;
  cursor: pointer;
  border-radius: 2px;
  outline: none;
  font-family: var(--font-serif);
}
.nav-lang-switch select:hover { border-color: var(--copper); color: var(--cream); }
.nav-lang-switch select option { background: #152B44; color: var(--cream); }

/* ═══════════ NAV ═══════════ */
nav {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 500;
  padding: 1.8rem 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.4s ease;
}
nav.scrolled {
  background: rgba(21,43,68,0.97);
  padding: 1.1rem 3rem;
}

.nav-logo {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--cream);
  text-decoration: none;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.nav-logo span { color: var(--copper); }
.nav-logo .nav-logo-text-brand { color: var(--cream); }

/* Three-wave hamburger icon */
.nav-wave-btn {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  position: relative;
  z-index: 600;
}
.nav-wave-btn svg { display: block; }
.wave-line {
  transition: transform 0.35s ease, opacity 0.3s ease;
}
/* When menu open, transform waves to X */
.nav-wave-btn.open .w1 { transform: translateY(10px) rotate(45deg); }
.nav-wave-btn.open .w2 { opacity: 0; transform: scaleX(0); }
.nav-wave-btn.open .w3 { transform: translateY(-10px) rotate(-45deg); }

/* ═══════════ MENU OVERLAY ═══════════ */
#menu-overlay {
  position: fixed;
  inset: 0;
  background: var(--navy);
  z-index: 499;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
#menu-overlay.open { opacity:1; visibility:visible; }

/* Art Deco frame inside overlay */
#menu-overlay::before {
  content:'';
  position:absolute;
  inset:30px;
  border:1px solid rgba(196,146,42,0.12);
  pointer-events:none;
}
#menu-overlay::after {
  content:'';
  position:absolute;
  inset:40px;
  border:1px solid rgba(196,146,42,0.06);
  pointer-events:none;
}

/* Diagonal decorative lines in overlay */
.overlay-deco {
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  opacity:0.06;
}

.overlay-nav {
  text-align: center;
  position: relative;
  z-index: 1;
}

.overlay-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.55rem;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.overlay-eyebrow::before,
.overlay-eyebrow::after { content:''; width:40px; height:1px; background:rgba(196,146,42,0.4); }

.overlay-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 3.5rem;
}

.overlay-links li {
  overflow: hidden;
}

.overlay-links a {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 900;
  color: rgba(242,232,200,0.18);
  text-decoration: none;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.15;
  transition: color 0.3s ease, letter-spacing 0.3s ease;
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.76,0,0.24,1), color 0.3s;
}
#menu-overlay.open .overlay-links a { transform:translateY(0); }
.overlay-links li:nth-child(1) a { transition-delay:0.05s; }
.overlay-links li:nth-child(2) a { transition-delay:0.1s; }
.overlay-links li:nth-child(3) a { transition-delay:0.15s; }
.overlay-links li:nth-child(4) a { transition-delay:0.2s; }
.overlay-links li:nth-child(5) a { transition-delay:0.25s; }
.overlay-links li:nth-child(6) a { transition-delay:0.3s; }

.overlay-links a:hover { color:var(--cream); letter-spacing:0.1em; }
.overlay-links a em { font-style:italic; font-weight:400; color:var(--copper); }

.overlay-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  flex-wrap: wrap;
}

.overlay-social {
  display: flex;
  gap: 1.5rem;
}
.overlay-social a {
  font-family: var(--font-sans);
  font-size: 0.6rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(196,146,42,0.5);
  text-decoration: none;
  transition: color 0.3s;
}
.overlay-social a:hover { color: var(--copper-l); }

.overlay-lang {
  font-size: 0.6rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(196,146,42,0.5);
  display: flex;
  gap: 0.6rem;
  cursor: pointer;
}

/* ═══════════ HERO ═══════════ */
#hero {
  height: 100vh;
  min-height: 700px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Multi-layer Art Deco grid overlay */
.hero-adeco {
  position:absolute; inset:0; pointer-events:none; z-index:1;
}

.hero-ocean {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 50% 110%, rgba(30,122,106,0.32) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 0%, rgba(196,146,42,0.06) 0%, transparent 50%),
    linear-gradient(160deg, rgba(21,43,68,0.88) 0%, rgba(28,56,88,0.75) 50%, rgba(21,43,68,0.88) 100%);
}

.hero-waves { position:absolute; bottom:0; left:0; width:100%; height:160px; pointer-events:none; overflow:visible; }
.hero-wave-svg { position:absolute; bottom:0; left:0; width:200%; height:100%; }

.hero-content {
  position:relative; z-index:2;
  text-align:center;
  padding:2rem;
  max-width:980px;
}

.hero-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.58rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}
.hero-eyebrow::before,
.hero-eyebrow::after { content:''; flex:0 0 36px; height:1px; background:rgba(196,146,42,0.5); }

/* BOLD brewery title energy */
.hero-title {
  font-family: var(--font-serif);
  font-size: clamp(4rem, 10vw, 8.5rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--cream);
  margin-bottom: 0.8rem;
  text-transform: uppercase;
}
.hero-title .italic-line {
  display: block;
  font-style: italic;
  font-weight: 400;
  font-size: 0.55em;
  color: var(--copper-l);
  letter-spacing: 0.02em;
  text-transform: none;
  margin-top: 0.4rem;
}

/* Big Art Deco number stamp */

.hero-deco-row {
  display:flex; align-items:center; justify-content:center;
  gap:0.8rem; margin: 1.5rem 0 2rem;
}
.hero-deco-row .l { flex:0 0 70px; height:1px; background:rgba(196,146,42,0.4); }
.hero-deco-row .d { width:8px; height:8px; background:var(--copper); transform:rotate(45deg); }
.hero-deco-row .d2 { width:5px; height:5px; border:1px solid var(--copper); transform:rotate(45deg); opacity:0.5; }

.hero-desc {
  font-family: var(--font-elegant);
  font-size: 1.15rem;
  font-weight: 300;
  font-style: italic;
  color: rgba(242,232,200,0.6);
  max-width:680px;
  margin:0 auto 2.5rem;
  line-height:1.9;
}

.hero-btns { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

.hero-scroll {
  position:absolute; bottom:2.5rem; left:50%;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:0.4rem;
  opacity:0.4;
  animation: scrollBounce 2s infinite ease;
}
.hero-scroll span { font-size:0.5rem; letter-spacing:0.35em; text-transform:uppercase; }
@keyframes scrollBounce {
  0%,100%{ transform:translateX(-50%) translateY(0); }
  50%{ transform:translateX(-50%) translateY(7px); }
}

/* ═══════════ STORY BAND ═══════════ */
#story-band {
  background: #F5EDD8;
  padding: 5rem 4rem;
  position:relative; overflow:hidden;
  border-top: 1px solid rgba(196,146,42,0.12);
  border-bottom: 1px solid rgba(196,146,42,0.12);
}

/* Strong diagonal hatching — brewery feel */
.story-band::before {
  content:'';
  position:absolute; inset:0;
  background: repeating-linear-gradient(
    -52deg,
    transparent, transparent 32px,
    rgba(196,146,42,0.018) 32px, rgba(196,146,42,0.018) 33px
  );
}

.story-band-inner {
  position:relative; max-width:760px;
  margin:0 auto; text-align:center;
}

/* Large decorative quotation marks */
.story-band-inner::before {
  content:'\201C';
  font-family:var(--font-serif);
  font-size:8rem;
  font-weight:900;
  color:rgba(196,146,42,0.08);
  position:absolute;
  top:-2rem; left:-1rem;
  line-height:1;
}

.story-rule {
  display:flex; align-items:center; justify-content:center;
  gap:1.2rem; margin-bottom:2rem;
}
.story-rule .l { width:50px; height:1px; background:rgba(196,146,42,0.3); }
.story-rule .gem { width:7px; height:7px; background:var(--copper); transform:rotate(45deg); opacity:0.7; }
.story-rule .gem-outline { width:5px; height:5px; border:1px solid var(--copper); transform:rotate(45deg); opacity:0.4; }

.story-quote {
  font-family: var(--font-elegant);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-style: italic;
  font-weight: 300;
  color: var(--cream);
  line-height: 1.5;
  margin-bottom: 1.8rem;
}
.story-quote strong { color:var(--copper-l); font-weight:600; font-style:normal; }

.story-attr {
  font-size:0.6rem;
  letter-spacing:0.4em;
  text-transform:uppercase;
  color:rgba(196,146,42,0.6);
}

/* ═══════════ SECTIONS COMMON ═══════════ */
.eyebrow {
  font-family:var(--font-sans);
  font-size:0.58rem;
  letter-spacing:0.48em;
  text-transform:uppercase;
  color:var(--copper);
  margin-bottom:1.2rem;
  display:flex; align-items:center; gap:1rem;
}
.eyebrow::before { content:''; width:28px; height:1px; background:var(--copper); opacity:0.7; }

.sec-title {
  font-family:var(--font-serif);
  font-size: clamp(2.4rem, 4.5vw, 4.2rem);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-0.01em;
  line-height:0.95;
  color:var(--cream);
  margin-bottom:1.2rem;
}
.sec-title em { font-style:italic; font-weight:400; color:var(--copper-l); text-transform:none; font-size:0.9em; display:block; margin-top:0.2rem; }

.deco-div {
  display:flex; align-items:center; gap:0.8rem;
  margin: 1.5rem 0 2rem;
}
.deco-div .l { flex:1; height:1px; background:rgba(196,146,42,0.2); }
.deco-div .motif { font-size:0.55rem; letter-spacing:0.3em; color:rgba(196,146,42,0.5); white-space:nowrap; }

/* ═══════════ ABOUT ═══════════ */
#about {
  padding: 9rem 0;
  display:grid;
  grid-template-columns:1fr 1fr;
  background:#F5EDD8;
}

.about-visual {
  position:relative;
  overflow:hidden;
}

/* Full-bleed dark image pane with Art Deco copper overlay */
.about-img-pane {
  width:100%; height:100%;
  min-height:600px;
  background:var(--navy-3);
  position:relative;
  display:flex; align-items:center; justify-content:center;
}

/* Art Deco geometric illustration filling the pane */
.about-img-pane svg { width:70%; max-width:340px; opacity:0.2; }

.about-img-pane::after {
  content:'EST.\A 2017';
  white-space:pre;
  position:absolute;
  bottom:3rem; right:3rem;
  font-family:var(--font-sans);
  font-size:0.55rem;
  letter-spacing:0.35em;
  text-transform:uppercase;
  color:var(--copper);
  text-align:right;
  border-right:2px solid var(--copper);
  padding-right:1rem;
  line-height:2;
}

/* Offset border frame on the visual */
.about-frame {
  position:absolute;
  top:2rem; left:2rem;
  right:-2rem; bottom:-2rem;
  border:1px solid rgba(196,146,42,0.2);
  pointer-events:none;
}

.about-text {
  padding: 5rem 5rem 5rem 6rem;
  display:flex; flex-direction:column; justify-content:center;
}

.about-body {
  font-family:var(--font-elegant);
  font-size:1.1rem;
  font-weight:300;
  color:rgba(242,232,200,0.65);
  line-height:2;
  margin-bottom:1.5rem;
}

/* Brewery-style stats bar */
.stats-bar {
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid rgba(196,146,42,0.18);
  border-bottom:1px solid rgba(196,146,42,0.18);
  margin:2.5rem 0;
}
.stat {
  padding:1.8rem 1.5rem;
  border-right:1px solid rgba(196,146,42,0.1);
}
.stat:last-child { border-right:none; }

.stat-n {
  font-family:var(--font-serif);
  font-size:3rem;
  font-weight:900;
  color:var(--copper);
  line-height:1; margin-bottom:0.2rem;
}
.stat-l {
  font-size:0.58rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:rgba(242,232,200,0.35);
}

/* ═══════════ PRODUCTS ═══════════ */
#products {
  background:#EEE4CC;
  padding:9rem 4rem;
  text-align:center;
  position:relative;
}

/* Strong Art Deco geometric border top/bottom */
#products::before,
#products::after {
  content:'';
  position:absolute;
  left:4rem; right:4rem;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(196,146,42,0.4) 20%, rgba(196,146,42,0.4) 80%, transparent);
}
#products::before { top:0; }
#products::after { bottom:0; }

.products-intro { max-width:580px; margin:0 auto 5rem; }

.products-intro .body-text {
  font-family:var(--font-elegant);
  font-style:italic;
  font-size:1.05rem;
  color:rgba(242,232,200,0.55);
  margin-top:1rem;
  line-height:1.9;
}

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

.product-card {
  position:relative;
  overflow:hidden;
  cursor:pointer;
  aspect-ratio:3/4;
  transition:transform 0.4s ease;
}
.product-card:hover { transform:scale(1.02); z-index:1; }

.product-card.beer  { background:linear-gradient(165deg,#243A18 0%,#1C3858 100%); }
.product-card.must  { background:linear-gradient(165deg,#3A2210 0%,#1C3858 100%); }
.product-card.cider { background:linear-gradient(165deg,#163040 0%,#1C3858 100%); }

/* Geometric pattern overlay per card */
.card-pattern {
  position:absolute; inset:0; opacity:0.06;
}

/* Heavy Art Deco border on hover */
.card-border {
  position:absolute; inset:0;
  border:1px solid rgba(196,146,42,0);
  transition:border-color 0.4s;
}
.product-card:hover .card-border { border-color:rgba(196,146,42,0.4); }

.card-tag {
  position:absolute;
  top:2rem; left:0;
  font-size:0.55rem;
  letter-spacing:0.35em;
  text-transform:uppercase;
  color:var(--navy);
  background:var(--copper);
  padding:0.35rem 1rem 0.35rem 1.5rem;
  font-weight:600;
}

.card-icon {
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-65%);
}
.card-icon svg { width:90px; opacity:0.18; }

.card-content {
  position:absolute;
  bottom:0; left:0; right:0;
  padding:2rem;
  background:linear-gradient(transparent, rgba(21,43,68,0.97) 35%);
}

.card-name {
  font-family:var(--font-serif);
  font-size:1.8rem;
  font-weight:900;
  text-transform:uppercase;
  color:var(--cream);
  letter-spacing:0.02em;
  line-height:1;
  margin-bottom:0.3rem;
}
.card-style {
  font-family:var(--font-elegant);
  font-style:italic;
  font-size:0.9rem;
  color:var(--copper-l);
  margin-bottom:0.8rem;
}
.card-desc {
  font-size:0.72rem;
  color:rgba(242,232,200,0.45);
  letter-spacing:0.04em;
  line-height:1.7;
  margin-bottom:1.2rem;
}
.card-link {
  display:inline-flex; align-items:center; gap:0.7rem;
  font-size:0.58rem;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--copper);
  cursor:pointer;
  border-bottom:1px solid rgba(196,146,42,0.25);
  padding-bottom:0.2rem;
  transition:gap 0.3s;
}
.product-card:hover .card-link { gap:1.2rem; }
.card-link::after { content:'→'; }

/* ═══════════ SEASONAL ═══════════ */
#seasonal {
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:620px;
}

.seasonal-visual {
  background:var(--navy-3);
  position:relative; overflow:hidden;
}

.seasonal-art {
  width:100%; height:100%;
  position:absolute; inset:0;
}

/* Rotating badge — brewery stamp */
.seasonal-stamp {
  position:absolute;
  top:3rem; left:3rem;
  width:100px; height:100px;
  background:var(--copper);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  font-family:var(--font-sans);
  font-size:0.5rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--navy);
  transform:rotate(12deg);
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.seasonal-stamp .num {
  font-family:var(--font-serif);
  font-size:1.6rem;
  font-weight:900;
  line-height:1;
  color:var(--navy);
}

.seasonal-content {
  padding:6rem 5rem;
  background:#0C3838;
  display:flex; flex-direction:column; justify-content:center;
  border-left:1px solid rgba(0,180,166,0.15);
}
.seasonal-content .sec-title { font-size:clamp(1.8rem,3vw,3rem); }

.seasonal-desc {
  font-family:var(--font-elegant);
  font-size:1rem; font-style:italic;
  color:rgba(242,232,200,0.6);
  line-height:2;
  margin-bottom:2rem;
}

.specs {
  border:1px solid rgba(196,146,42,0.12);
  margin-bottom:2.5rem;
}
.spec-row {
  display:flex; justify-content:space-between;
  align-items:center;
  padding:0.9rem 1.2rem;
  border-bottom:1px solid rgba(196,146,42,0.08);
}
.spec-row:last-child { border-bottom:none; }
.spec-label {
  font-size:0.58rem; letter-spacing:0.22em;
  text-transform:uppercase;
  color:rgba(242,232,200,0.3);
}
.spec-val {
  font-family:var(--font-serif);
  font-size:0.85rem;
  color:var(--cream-2);
}

/* ═══════════ VISIT ═══════════ */
#visit {
  background:#EEE4CC;
  padding:9rem 4rem;
  text-align:center;
  position:relative; overflow:hidden;
}

/* Full Art Deco geometric grid overlay */
.visit-deco { position:absolute; inset:0; pointer-events:none; }

.visit-intro { max-width:560px; margin:0 auto 5rem; position:relative; }

.visit-body {
  font-family:var(--font-elegant);
  font-style:italic;
  font-size:1.1rem;
  color:rgba(242,232,200,0.55);
  line-height:2;
  margin-top:0.5rem;
}

.visit-cards {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:0; max-width:1000px;
  margin:0 auto 4rem;
  border:1px solid rgba(196,146,42,0.15);
  position:relative;
}

.visit-card {
  padding:3.5rem 2.5rem;
  text-align:center;
  border-right:1px solid rgba(196,146,42,0.1);
  transition:background 0.3s;
  position:relative;
}
.visit-card:last-child { border-right:none; }
.visit-card:hover { background:rgba(196,146,42,0.04); }

/* Art Deco corner accents on visit cards */
.visit-card::before,
.visit-card::after {
  content:'';
  position:absolute;
  width:12px; height:12px;
  border-color:rgba(196,146,42,0); border-style:solid;
  transition:border-color 0.3s;
}
.visit-card::before { top:8px; left:8px; border-width:1px 0 0 1px; }
.visit-card::after  { bottom:8px; right:8px; border-width:0 1px 1px 0; }
.visit-card:hover::before,
.visit-card:hover::after { border-color:rgba(196,146,42,0.4); }

.visit-icon {
  width:48px; height:48px;
  margin:0 auto 1.5rem;
  color:var(--copper);
}

.visit-card-title {
  font-family:var(--font-serif);
  font-size:1.15rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--cream);
  margin-bottom:0.8rem;
}
.visit-card-text {
  font-size:0.72rem;
  color:rgba(242,232,200,0.4);
  letter-spacing:0.04em;
  line-height:1.8;
}
.visit-card-detail {
  margin-top:1.2rem;
  font-family:var(--font-elegant);
  font-style:italic;
  font-size:0.85rem;
  color:var(--copper-l);
}

/* ═══════════ SOCIAL ═══════════ */
#social {
  background:#F5EDD8;
  padding:7rem 0;
  text-align:center;
}
.social-header { padding:0 4rem 4rem; }

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

.social-tile {
  aspect-ratio:1;
  background:var(--navy-3);
  position:relative; overflow:hidden;
  cursor:pointer;
}
.social-tile:hover .social-overlay { opacity:1; }

.social-tile-inner {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
}

.social-overlay {
  position:absolute; inset:0;
  background:rgba(196,146,42,0.8);
  display:flex; align-items:center; justify-content:center;
  opacity:0;
  transition:opacity 0.3s;
}
.social-overlay svg { width:24px; color:var(--navy); }

.social-handle {
  display:inline-block;
  margin-top:2.5rem;
  font-size:0.62rem;
  letter-spacing:0.35em;
  text-transform:uppercase;
  color:var(--copper);
  text-decoration:none;
  transition:color 0.3s;
}
.social-handle:hover { color:var(--cream); }

/* ═══════════ NEWSLETTER ═══════════ */
#newsletter {
  background: var(--copper-d);
  padding:7rem 4rem;
  text-align:center;
  position:relative; overflow:hidden;
}
#newsletter::before {
  content:'';
  position:absolute; inset:0;
  background:repeating-linear-gradient(
    90deg,
    transparent,transparent 70px,
    rgba(0,0,0,0.06) 70px, rgba(0,0,0,0.06) 71px
  );
}
#newsletter::after {
  content:'';
  position:absolute; inset:0;
  background:repeating-linear-gradient(
    0deg,
    transparent,transparent 70px,
    rgba(0,0,0,0.04) 70px, rgba(0,0,0,0.04) 71px
  );
}

.newsletter-inner { position:relative; max-width:600px; margin:0 auto; }

.nl-title {
  font-family:var(--font-serif);
  font-size:clamp(2rem,4vw,3.4rem);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:0.02em;
  color:var(--cream);
  margin-bottom:0.4rem;
}
.nl-sub {
  font-family:var(--font-elegant);
  font-style:italic;
  font-size:1rem;
  color:rgba(242,232,200,0.6);
  margin-bottom:2.5rem;
}

.nl-form {
  display:flex; max-width:460px; margin:0 auto;
}
.nl-form input {
  flex:1;
  padding:1rem 1.5rem;
  background:rgba(21,43,68,0.5);
  border:1px solid rgba(242,232,200,0.25);
  border-right:none;
  color:var(--cream);
  font-family:var(--font-sans);
  font-size:0.72rem;
  letter-spacing:0.08em;
  outline:none;
}
.nl-form input::placeholder { color:rgba(242,232,200,0.3); }
.nl-form button {
  padding:1rem 1.8rem;
  background:var(--navy);
  border:1px solid var(--navy);
  color:var(--cream);
  font-family:var(--font-sans);
  font-size:0.58rem;
  letter-spacing:0.28em;
  text-transform:uppercase;
  cursor:pointer;
  white-space:nowrap;
  transition:background 0.3s;
  font-weight:600;
}
.nl-form button:hover { background:var(--navy-3); }
.nl-gdpr {
  margin-top:1.2rem;
  font-size:0.6rem;
  color:rgba(242,232,200,0.35);
  letter-spacing:0.07em;
}
.nl-gdpr a { color:rgba(242,232,200,0.55); }

/* ═══════════ FOOTER ═══════════ */
footer {
  background:#1C1208;
  border-top:1px solid rgba(196,146,42,0.2);
  padding:7rem 4rem 3rem;
}

.footer-grid {
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:4rem;
  margin-bottom:5rem;
  padding-bottom:4rem;
  border-bottom:1px solid rgba(196,146,42,0.08);
}

.footer-logo {
  font-family:var(--font-serif);
  font-size:1.8rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--cream);
  margin-bottom:0.2rem;
}
.footer-logo span { color:var(--copper); }
.footer-tagline {
  font-family:var(--font-elegant);
  font-style:italic;
  font-size:0.85rem;
  color:rgba(242,232,200,0.3);
  margin-bottom:1.5rem;
}
.footer-about {
  font-size:0.72rem;
  color:rgba(242,232,200,0.3);
  letter-spacing:0.04em;
  line-height:1.9;
  max-width:280px;
}

.footer-socials {
  display:flex; gap:0.8rem; margin-top:2rem;
}
.footer-socials a {
  width:34px; height:34px;
  border:1px solid rgba(196,146,42,0.2);
  display:flex; align-items:center; justify-content:center;
  color:rgba(242,232,200,0.3);
  text-decoration:none;
  font-size:0.6rem; letter-spacing:0;
  font-weight:600;
  transition:all 0.3s;
}
.footer-socials a:hover { border-color:var(--copper); color:var(--copper); }

.footer-col-title {
  font-family:var(--font-sans);
  font-size:0.57rem;
  letter-spacing:0.4em;
  text-transform:uppercase;
  color:var(--copper);
  margin-bottom:1.5rem;
}
.footer-links { list-style:none; display:flex; flex-direction:column; gap:0.75rem; }
.footer-links a {
  color:rgba(242,232,200,0.35);
  text-decoration:none;
  font-size:0.72rem;
  letter-spacing:0.04em;
  transition:color 0.3s;
}
.footer-links a:hover { color:var(--copper-l); }

/* Art Deco footer ornament */
.footer-ornament {
  display:flex; align-items:center;
  justify-content:center; gap:2rem;
  margin-bottom:3rem;
}
.footer-ornament .l { flex:1; height:1px; background:rgba(196,146,42,0.08); }

.footer-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:1rem;
}
.footer-copy {
  font-size:0.58rem;
  color:rgba(242,232,200,0.2);
  letter-spacing:0.1em;
}
.footer-legal { display:flex; gap:2rem; }
.footer-legal a {
  font-size:0.58rem;
  color:rgba(242,232,200,0.2);
  text-decoration:none;
  letter-spacing:0.1em;
  transition:color 0.3s;
}
.footer-legal a:hover { color:var(--copper); }

/* ═══════════ COOKIE BANNER ═══════════ */
#cookie-banner {
  position:fixed;
  bottom:0; left:0; right:0;
  background:rgba(21,43,68,0.98);
  border-top:1px solid rgba(196,146,42,0.25);
  padding:1.5rem 3rem;
  z-index:490;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  transform:translateY(100%);
  transition:transform 0.5s ease 1.2s;
}
#cookie-banner.visible { transform:translateY(0); }
#cookie-banner.hide { transform:translateY(100%); transition-delay:0s; }

.cookie-text {
  font-size:0.68rem;
  color:rgba(242,232,200,0.45);
  letter-spacing:0.04em;
  line-height:1.7;
  max-width:600px;
}
.cookie-text a { color:var(--copper); text-decoration:none; }

.cookie-btns { display:flex; gap:0.8rem; flex-shrink:0; }

/* ═══════════ BUTTONS GLOBAL ═══════════ */
.btn-p {
  background:var(--copper);
  color:var(--navy);
  border:1px solid var(--copper);
  padding:0.9rem 2.2rem;
  font-family:var(--font-sans);
  font-size:0.63rem;
  letter-spacing:0.3em;
  text-transform:uppercase;
  font-weight:600;
  cursor:pointer;
  transition:all 0.25s;
}
.btn-p:hover { background:var(--copper-l); border-color:var(--copper-l); }

.btn-s {
  background:transparent;
  color:rgba(242,232,200,0.5);
  border:1px solid rgba(196,146,42,0.25);
  padding:0.9rem 2.2rem;
  font-family:var(--font-sans);
  font-size:0.63rem;
  letter-spacing:0.3em;
  text-transform:uppercase;
  font-weight:300;
  cursor:pointer;
  transition:all 0.25s;
}
.btn-s:hover { border-color:var(--copper); color:var(--cream); }

/* ═══════════ ANIMATIONS ═══════════ */
@keyframes fadeInUp {
  from { opacity:0; transform:translateY(28px); }
  to   { opacity:1; transform:translateY(0); }
}
.anim { opacity:0; }
.anim.visible { animation: fadeInUp 0.75s ease forwards; }
.d1 { animation-delay:0.1s; }
.d2 { animation-delay:0.2s; }
.d3 { animation-delay:0.35s; }
.d4 { animation-delay:0.5s; }
.d5 { animation-delay:0.65s; }

@keyframes waveAnim {
  0%   { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}

@media(max-width:900px){
  nav { padding:1.2rem 1.5rem; }
  nav.scrolled { padding:0.9rem 1.5rem; }
  #about { grid-template-columns:1fr; }
  .about-text { padding:3rem 2rem; }
  .products-grid { grid-template-columns:1fr; }
  #seasonal { grid-template-columns:1fr; }
  .seasonal-visual { min-height:300px; }
  .footer-grid { grid-template-columns:1fr; gap:2rem; }
  .visit-cards { grid-template-columns:1fr; }
  .social-grid { grid-template-columns:repeat(3,1fr); }
  .stats-bar { grid-template-columns:repeat(3,1fr); }
  section { padding:5rem 1.5rem; }
}

/* Light sections */
#story-band .story-quote{color:#1A1208!important}
#story-band .story-attr{color:var(--copper)}
#about .sec-title{color:#1A1208!important}
#about .sec-title em{color:var(--coral)!important}
#about .about-body{color:#5A4838!important}
#about .stat-n{color:var(--copper)!important}
#about .stat-l{color:#6A5848!important}
#about .eyebrow{color:#7A5010!important}
#about .eyebrow::before{background:#7A5010!important}
#products .sec-title{color:#1A1208!important}
#products .eyebrow{color:#7A5010!important}
#products .eyebrow::before{background:#7A5010!important}
#visit .sec-title{color:#1A1208!important}
#visit .eyebrow{color:#7A5010!important}
#visit .eyebrow::before{background:#7A5010!important}
.visit-card{background:#EEE4CC}
.visit-card:hover{background:#E4D8BC}
.visit-card-title{color:#1A1208!important}
.visit-card-text{color:#5A4838!important}
.visit-card-detail{color:var(--copper)!important}
.visit-body{color:#5A4838!important}
#social .sec-title{color:#1A1208!important}
#social .eyebrow{color:#7A5010!important}
#social .eyebrow::before{background:#7A5010!important}
footer .footer-tagline{color:rgba(242,232,200,0.62)!important}
footer .footer-about{color:rgba(242,232,200,0.58)!important}
footer .footer-copy,footer .f-copy{color:rgba(242,232,200,0.52)!important}
footer .footer-legal a{color:rgba(242,232,200,0.52)!important}
footer .f-links a{color:rgba(242,232,200,0.65)!important}

/* Burger X fix */
.wave-line{transform-box:fill-box;transform-origin:center}
.nav-wave-btn.open .w1{transform:translateY(8px) rotate(45deg)}
.nav-wave-btn.open .w3{transform:translateY(-8px) rotate(-45deg)}

/* Accessibility */
:focus{outline:none}
:focus-visible{outline:2px solid var(--copper);outline-offset:3px}
.btn-p:active,.btn-s:active{transform:scale(0.97)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ━━━ HERO THEME CSS ━━━ */
#hero,#hero .hero-ocean{transition:background 0.8s ease}

/* Vinter */
#hero[data-hero="vinter"]{background:#010810}
#hero[data-hero="vinter"] .hero-ocean{background:radial-gradient(ellipse at 50% 110%,rgba(100,160,220,0.18) 0%,transparent 65%),linear-gradient(180deg,#010810,#040E1E)}
#hero[data-hero="vinter"] .hero-eyebrow{color:#8CC4F0}
#hero[data-hero="vinter"] .hero-eyebrow::before,#hero[data-hero="vinter"] .hero-eyebrow::after{background:#8CC4F0}
.snowflakes{display:none;position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2}
#hero[data-hero="vinter"] .snowflakes{display:block}
.snowflake{position:absolute;top:-20px;animation:snowFall linear infinite;user-select:none}
@keyframes snowFall{0%{transform:translateY(-20px) rotate(0deg);opacity:0}10%{opacity:1}90%{opacity:.6}100%{transform:translateY(110vh) rotate(360deg);opacity:0}}

/* Turkos */
#hero[data-hero="turkos"]{background:#061C20}
#hero[data-hero="turkos"] .hero-ocean{background:radial-gradient(ellipse at 50% 105%,rgba(0,180,166,0.55) 0%,transparent 65%),linear-gradient(180deg,#061C20,#0A2830)}
#hero[data-hero="turkos"] .hero-eyebrow{color:#3DD4C8}
#hero[data-hero="turkos"] .hero-eyebrow::before,#hero[data-hero="turkos"] .hero-eyebrow::after{background:#3DD4C8}

/* Höst */
#hero[data-hero="host"]{background:#110C04}
#hero[data-hero="host"] .hero-ocean{background:radial-gradient(ellipse at 50% 110%,rgba(180,80,20,0.30) 0%,transparent 65%),linear-gradient(180deg,#110C04,#1A1006)}
#hero[data-hero="host"] .hero-eyebrow{color:#C87828}
#hero[data-hero="host"] .hero-eyebrow::before,#hero[data-hero="host"] .hero-eyebrow::after{background:#C87828}
#hero[data-hero="host"] .hero-title .volt-word{color:#E09840}

/* Äpple */
#hero[data-hero="apple"]{background:#F5EDDA}
#hero[data-hero="apple"] .hero-ocean{background:radial-gradient(ellipse at 30% 70%,rgba(160,40,20,0.12) 0%,transparent 50%),radial-gradient(ellipse at 70% 60%,rgba(60,110,40,0.10) 0%,transparent 45%),linear-gradient(180deg,#F5EDDA,#EDE0C4)}
#hero[data-hero="apple"] .hero-title{color:#1A1208}
#hero[data-hero="apple"] .hero-title .volt-word{color:#C03020}
#hero[data-hero="apple"] .hero-eyebrow{color:#7A3E00}
#hero[data-hero="apple"] .hero-eyebrow::before,#hero[data-hero="apple"] .hero-eyebrow::after{background:#7A3E00}
#hero[data-hero="apple"] .hero-desc{color:rgba(40,25,8,0.6)}
#hero[data-hero="apple"] .btn-p{background:#C03020!important;border-color:#C03020!important;color:#FFF5EC!important}

/* VM */
#hero[data-hero="vm"] .hero-adeco{display:none}
#hero[data-hero="vm"] .hero-waves{display:none}
#hero[data-hero="vm"] .hero-year{display:none}
#hero[data-hero="vm"] .hero-ocean{background:radial-gradient(ellipse at 50% 110%,rgba(0,106,167,0.25) 0%,transparent 55%),linear-gradient(180deg,rgba(21,43,68,0.92),rgba(0,40,80,0.88))}
#hero[data-hero="vm"] .hero-title{font-family:'Anton','Big Shoulders Display',Impact,sans-serif;font-weight:900;font-style:normal;letter-spacing:0.04em;text-transform:uppercase;line-height:.9}
#hero[data-hero="vm"] .hero-title .volt-word{color:#FECC02;text-shadow:0 0 30px rgba(254,204,2,0.4)}
#hero[data-hero="vm"] .hero-title .outline-word{color:transparent;-webkit-text-stroke:1.5px #FECC02;text-shadow:none}
#hero[data-hero="vm"] .hero-eyebrow{font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:.5em;color:#FECC02}
#hero[data-hero="vm"] .hero-eyebrow::before,#hero[data-hero="vm"] .hero-eyebrow::after{background:#FECC02}
#hero[data-hero="vm"] .btn-p{background:#FECC02!important;border-color:#FECC02!important;color:#0C1421!important;font-weight:600!important}
#hero[data-hero="vm"] .btn-s{border-color:rgba(254,204,2,0.3)!important;color:rgba(254,204,2,0.7)!important}

/* VM Flag */
.vm-flag-wrap{display:none;position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
#hero[data-hero="vm"] .vm-flag-wrap{display:block}
@keyframes vmFlagWave{0%{transform:translateY(0) skewX(0deg)}20%{transform:translateY(-9px) scaleY(1.025) skewX(.5deg)}50%{transform:translateY(7px) scaleY(.975) skewX(-.4deg)}80%{transform:translateY(-4px) scaleY(1.01)}100%{transform:translateY(0) skewX(0deg)}}
.vm-flag-anim{animation:vmFlagWave 6s ease-in-out infinite}
@keyframes vmShimmer{0%{transform:translateX(0)}100%{transform:translateX(1440px)}}
.vm-shimmer{animation:vmShimmer 12s linear infinite}

/* VM Balls */
.vm-balls-wrap{display:none;position:fixed;inset:0;overflow:visible;pointer-events:none;z-index:100}
#hero[data-hero="vm"] .vm-balls-wrap{display:none}/* controlled by JS */
.vm-ball{position:absolute;font-size:1.8rem;opacity:0;filter:drop-shadow(0 4px 12px rgba(0,0,0,0.5))}
@keyframes arc1LR{0%{transform:translateX(-80px) translateY(0);opacity:0}6%{opacity:.8}30%{transform:translateX(28vw) translateY(-18vh)}55%{transform:translateX(55vw) translateY(-22vh)}80%{transform:translateX(80vw) translateY(-6vh)}94%{opacity:.65}100%{transform:translateX(calc(100vw + 80px)) translateY(4vh);opacity:0}}
@keyframes arc2LR{0%{transform:translateX(-80px) translateY(0);opacity:0}6%{opacity:.8}40%{transform:translateX(40vw) translateY(-28vh)}70%{transform:translateX(70vw) translateY(-14vh)}94%{opacity:.65}100%{transform:translateX(calc(100vw + 80px)) translateY(2vh);opacity:0}}
@keyframes arc3LR{0%{transform:translateX(-80px) translateY(0);opacity:0}6%{opacity:.8}25%{transform:translateX(22vw) translateY(-10vh)}50%{transform:translateX(50vw) translateY(-15vh)}75%{transform:translateX(75vw) translateY(-5vh)}94%{opacity:.65}100%{transform:translateX(calc(100vw + 80px)) translateY(0);opacity:0}}
@keyframes arc4LR{0%{transform:translateX(-80px) translateY(0);opacity:0}6%{opacity:.8}50%{transform:translateX(50vw) translateY(-32vh)}94%{opacity:.65}100%{transform:translateX(calc(100vw + 80px)) translateY(-5vh);opacity:0}}
@keyframes arc1RL{0%{transform:translateX(calc(100vw + 80px)) translateY(0);opacity:0}6%{opacity:.8}30%{transform:translateX(72vw) translateY(-20vh)}55%{transform:translateX(45vw) translateY(-25vh)}80%{transform:translateX(20vw) translateY(-8vh)}94%{opacity:.65}100%{transform:translateX(-80px) translateY(3vh);opacity:0}}
@keyframes arc2RL{0%{transform:translateX(calc(100vw + 80px)) translateY(0);opacity:0}6%{opacity:.8}40%{transform:translateX(60vw) translateY(-12vh)}70%{transform:translateX(30vw) translateY(-22vh)}94%{opacity:.65}100%{transform:translateX(-80px) translateY(-4vh);opacity:0}}
@keyframes arc3RL{0%{transform:translateX(calc(100vw + 80px)) translateY(0);opacity:0}6%{opacity:.8}25%{transform:translateX(75vw) translateY(-16vh)}50%{transform:translateX(50vw) translateY(-30vh)}75%{transform:translateX(25vw) translateY(-16vh)}94%{opacity:.65}100%{transform:translateX(-80px) translateY(-2vh);opacity:0}}

/* VM Flag */
.vm-flag-wrap{display:none;position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
#hero[data-hero="vm"] .vm-flag-wrap{display:block}








20%{transform:translateY(-9px) scaleY(1.025) skewX(.5deg)}50%{transform:translateY(7px) scaleY(.975) skewX(-.4deg)}80%{transform:translateY(-4px) scaleY(1.01)}}
25%{transform:translateY(-11px) scaleY(1.04)}65%{transform:translateY(8px) scaleY(.96)}}
35%{transform:scaleX(1.03) translateX(-4px)}70%{transform:scaleX(.97) translateX(5px)}}



/* VM Balls */
.vm-balls-wrap{display:none;position:fixed;inset:0;overflow:visible;pointer-events:none;z-index:100}
/* vmBalls visas via JS setHeroTheme — se nedan */
.vm-ball{position:absolute;font-size:1.8rem;opacity:0;filter:drop-shadow(0 4px 12px rgba(0,0,0,0.5))}
@keyframes arc1LR{0%{transform:translateX(-80px) translateY(0);opacity:0}6%{opacity:.8}30%{transform:translateX(28vw) translateY(-18vh)}55%{transform:translateX(55vw) translateY(-22vh)}80%{transform:translateX(80vw) translateY(-6vh)}94%{opacity:.65}100%{transform:translateX(calc(100vw + 80px)) translateY(4vh);opacity:0}}
@keyframes arc2LR{0%{transform:translateX(-80px) translateY(0);opacity:0}6%{opacity:.8}40%{transform:translateX(40vw) translateY(-28vh)}70%{transform:translateX(70vw) translateY(-14vh)}94%{opacity:.65}100%{transform:translateX(calc(100vw + 80px)) translateY(2vh);opacity:0}}
@keyframes arc3LR{0%{transform:translateX(-80px) translateY(0);opacity:0}6%{opacity:.8}25%{transform:translateX(22vw) translateY(-10vh)}50%{transform:translateX(50vw) translateY(-15vh)}75%{transform:translateX(75vw) translateY(-5vh)}94%{opacity:.65}100%{transform:translateX(calc(100vw + 80px)) translateY(0);opacity:0}}
@keyframes arc4LR{0%{transform:translateX(-80px) translateY(0);opacity:0}6%{opacity:.8}50%{transform:translateX(50vw) translateY(-32vh)}94%{opacity:.65}100%{transform:translateX(calc(100vw + 80px)) translateY(-5vh);opacity:0}}
@keyframes arc1RL{0%{transform:translateX(calc(100vw + 80px)) translateY(0);opacity:0}6%{opacity:.8}30%{transform:translateX(72vw) translateY(-20vh)}55%{transform:translateX(45vw) translateY(-25vh)}80%{transform:translateX(20vw) translateY(-8vh)}94%{opacity:.65}100%{transform:translateX(-80px) translateY(3vh);opacity:0}}
@keyframes arc2RL{0%{transform:translateX(calc(100vw + 80px)) translateY(0);opacity:0}6%{opacity:.8}40%{transform:translateX(60vw) translateY(-12vh)}70%{transform:translateX(30vw) translateY(-22vh)}94%{opacity:.65}100%{transform:translateX(-80px) translateY(-4vh);opacity:0}}
@keyframes arc3RL{0%{transform:translateX(calc(100vw + 80px)) translateY(0);opacity:0}6%{opacity:.8}25%{transform:translateX(75vw) translateY(-16vh)}50%{transform:translateX(50vw) translateY(-30vh)}75%{transform:translateX(25vw) translateY(-16vh)}94%{opacity:.65}100%{transform:translateX(-80px) translateY(-2vh);opacity:0}}

/* Art Deco */
#hero[data-hero="artdeco"] .hero-adeco{display:none}
#hero[data-hero="artdeco"] .hero-waves{display:none}
#hero[data-hero="artdeco"] .hero-year{display:none}
#hero[data-hero="artdeco"]{background:#060D1E}
#hero[data-hero="artdeco"] .hero-ocean{background:#060D1E}
#hero[data-hero="artdeco"] .hero-content{position:relative!important;text-align:center!important;z-index:25!important;max-width:760px!important;padding:0 2rem!important;width:100%!important}
#hero[data-hero="artdeco"] .hero-eyebrow{font-family:'Poiret One',sans-serif!important;letter-spacing:.55em!important;color:#C89020!important;justify-content:center!important}
#hero[data-hero="artdeco"] .hero-eyebrow::before{background:#C89020!important;width:40px!important}
#hero[data-hero="artdeco"] .hero-eyebrow::after{background:#C89020!important;width:40px!important}
#hero[data-hero="artdeco"] .hero-title{font-family:'Poiret One',sans-serif!important;font-size:clamp(2.8rem,6.5vw,7rem)!important;font-weight:400!important;letter-spacing:.14em!important;text-transform:uppercase!important;line-height:1.1!important;color:#E8C840!important;text-shadow:0 0 60px rgba(232,200,64,0.8),0 0 120px rgba(200,144,32,0.4),0 3px 6px rgba(0,0,0,0.95)!important}
#hero[data-hero="artdeco"] .hero-title .volt-word{display:block!important;font-size:.35em!important;letter-spacing:.8em!important;background:linear-gradient(180deg,#E8C840,#A87818)!important;-webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important;background-clip:text!important}
#hero[data-hero="artdeco"] .hero-title .outline-word{display:none!important}
#hero[data-hero="artdeco"] .hero-deco-row{justify-content:center!important;display:none!important}
#hero[data-hero="artdeco"] .hero-desc{font-family:'Poiret One',sans-serif!important;letter-spacing:.20em!important;color:rgba(242,228,180,.85)!important;font-style:normal!important;font-size:0.95rem!important}
#hero[data-hero="artdeco"] .hero-btns{justify-content:center!important}
#hero[data-hero="artdeco"] .btn-p{background:#D4A820!important;border-color:#D4A820!important;color:#06101A!important;font-family:'Poiret One',sans-serif!important;letter-spacing:.3em!important}
#hero[data-hero="artdeco"] .btn-s{border-color:rgba(212,168,32,.35)!important;color:rgba(212,168,32,.7)!important;font-family:'Poiret One',sans-serif!important;letter-spacing:.3em!important}
#hero[data-hero="artdeco"]::before{content:'';position:absolute;inset:14px;border:3px solid rgba(212,168,32,.45);pointer-events:none;z-index:6;animation:adPulse 4s ease-in-out infinite}
#hero[data-hero="artdeco"]::after{content:'';position:absolute;inset:24px;border:1px solid rgba(212,168,32,.22);pointer-events:none;z-index:6}
@keyframes adPulse{0%,100%{border-color:rgba(212,168,32,.35);box-shadow:inset 0 0 60px rgba(212,168,32,.04)}50%{border-color:rgba(212,168,32,.75);box-shadow:inset 0 0 120px rgba(212,168,32,.12)}}
.adeco-fan-wrap{display:none;position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
/* artdeco removed */
.adeco-outer-ring{display:none!important}
@keyframes adRingRot{from{transform:translateY(-50%) rotate(0deg)}to{transform:translateY(-50%) rotate(360deg)}}
/* adeco outer ring hidden */

/* Switcher */
#hero-switcher{position:fixed;bottom:2rem;right:2rem;z-index:9000;display:flex;flex-direction:column;gap:0}
#switcher-toggle{width:44px;height:44px;background:rgba(10,10,10,.85);border:1px solid rgba(196,146,42,.4);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;margin-left:auto;backdrop-filter:blur(8px)}
#switcher-panel{background:rgba(10,10,10,.92);border:1px solid rgba(196,146,42,.25);padding:1rem;margin-bottom:.5rem;display:none;flex-direction:column;gap:.5rem;min-width:188px;backdrop-filter:blur(12px)}
#switcher-panel.open{display:flex}
.switcher-label{font-family:var(--font-sans);font-size:.5rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(196,146,42,.6);margin-bottom:.3rem;padding-bottom:.5rem;border-bottom:1px solid rgba(196,146,42,.12)}
.theme-btn{display:flex;align-items:center;gap:.8rem;background:none;border:1px solid transparent;padding:.5rem .7rem;cursor:pointer;border-radius:2px;transition:all .2s;text-align:left;width:100%}
.theme-btn:hover{border-color:rgba(196,146,42,.25);background:rgba(196,146,42,.05)}
.theme-btn.active{border-color:rgba(196,146,42,.5);background:rgba(196,146,42,.08)}
.theme-swatch{width:20px;height:20px;border-radius:50%;flex-shrink:0;border:1px solid rgba(255,255,255,.1)}
.theme-name{font-family:var(--font-sans);font-size:.62rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(242,232,200,.7)}
.theme-btn.active .theme-name{color:var(--copper)}
.sw-standard{background:linear-gradient(135deg,#152B44,#1C3858)}
.sw-vinter{background:linear-gradient(135deg,#010810,#040E24)}
.sw-turkos{background:linear-gradient(135deg,#00A878,#061C20)}
.sw-host{background:linear-gradient(135deg,#C87828,#110C04)}
.sw-apple{background:linear-gradient(135deg,#C03020,#507830,#F5EDDA)}
.sw-vm{background:linear-gradient(135deg,#152B44,#006AA7,#FECC02)}
.sw-artdeco{background:linear-gradient(135deg,#0C1E38,#1A2E50,#D4A820)}
.sw-sydkust{background:linear-gradient(180deg,#7AAEC4 0%,#EAD018 55%,#5498B8 100%)}


/* ── VM Flag: SVG trapets — perspektivgeometri direkt i koordinaterna ── */
.vm-flag-svg { position:absolute; inset:0; width:100%; height:100%; }


/* ── VM Flag: waving background ── */
.vm-shimmer {
  animation: vmShimmer 9s ease-in-out infinite;
}
@keyframes vmShimmer {
  0%   { transform: translateX(-600px); }
  100% { transform: translateX(1800px); }
}
.vm-flag-anim {
  /* 9s = långsam, majestätisk rörelse */
  animation: vmFlagWave 9s ease-in-out infinite;
  transform-origin: 30% 50%;
}
@keyframes vmFlagWave {
  0%   { transform: translateX(0px)   skewX(0deg)    skewY(0deg)    scaleX(1.000) scaleY(1.000); }
  18%  { transform: translateX(18px)  skewX(3.5deg)  skewY(0.6deg)  scaleX(1.012) scaleY(1.002); }
  36%  { transform: translateX(-12px) skewX(-2.5deg) skewY(-0.4deg) scaleX(0.992) scaleY(0.999); }
  54%  { transform: translateX(15px)  skewX(3deg)    skewY(0.5deg)  scaleX(1.009) scaleY(1.001); }
  72%  { transform: translateX(-9px)  skewX(-1.8deg) skewY(-0.3deg) scaleX(0.995) scaleY(0.999); }
  88%  { transform: translateX(8px)   skewX(1.5deg)  skewY(0.2deg)  scaleX(1.004) scaleY(1.000); }
  100% { transform: translateX(0px)   skewX(0deg)    skewY(0deg)    scaleX(1.000) scaleY(1.000); }
}
.vm-flag-glow {
  filter:
    drop-shadow(0 0 30px rgba(254,204,2,0.45))
    drop-shadow(0 0 60px rgba(254,204,2,0.20))
    drop-shadow(0 0 100px rgba(0,106,167,0.25));
}


/* VM-tema: bollar hanteras av position:fixed — hero overflow behålls */


/* ══ SYDKUST THEME ══ */
.sydkust-bg{display:none;position:absolute;inset:0;z-index:1;pointer-events:none}
/* sydkust removed */
#hero[data-hero="sydkust"]{background:#4A7898}
#hero[data-hero="sydkust"] .hero-ocean{background:transparent}
#hero[data-hero="sydkust"] .hero-adeco{display:none}
#hero[data-hero="sydkust"] .hero-waves{display:none}
#hero[data-hero="sydkust"] .hero-year{display:none}
#hero[data-hero="sydkust"] .hero-title{
  color:#F5EDD8!important;
  text-shadow:0 2px 20px rgba(0,0,0,0.7),0 0 60px rgba(0,0,0,0.4)!important;
  font-family:var(--font-serif)!important;
  font-size:clamp(2.8rem,6vw,6.5rem)!important;
  line-height:1.05!important;
  letter-spacing:.04em!important;
}
#hero[data-hero="sydkust"] .hero-title .volt-word{color:#E8D024!important;display:block!important;font-size:.38em!important;letter-spacing:.35em!important}
#hero[data-hero="sydkust"] .hero-title .outline-word{display:none!important}
#hero[data-hero="sydkust"] .hero-eyebrow{color:rgba(232,208,36,0.9)!important;letter-spacing:.4em!important}
#hero[data-hero="sydkust"] .hero-eyebrow::before,
#hero[data-hero="sydkust"] .hero-eyebrow::after{background:rgba(232,208,36,0.7)!important}
#hero[data-hero="sydkust"] .hero-desc{color:rgba(245,237,216,0.82)!important}
#hero[data-hero="sydkust"] .btn-p{background:#E8D024!important;border-color:#E8D024!important;color:#1A1208!important}
#hero[data-hero="sydkust"] .btn-s{border-color:rgba(232,208,36,0.4)!important;color:rgba(232,208,36,0.8)!important}


/* Logo image */

.age-logo-img { display:block; margin:0 auto 0.5rem; max-width:340px; width:90%; height:auto; }


/* Standard: show logo image */


/* All other themes: hide logo image, show text */
#hero:not([data-hero="standard"]) ~ #navbar .nav-logo { font-size: inherit; }


/* ── Text logo (replaces image) ── */
.nav-logo-text-brand {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream);
  display: block;
  line-height: 1;
}


/* Logo text color per theme */







.nav-logo-svg {
  height: 30px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1) sepia(0.35) saturate(1.2) hue-rotate(5deg) brightness(0.95);
}


/* ══ Öppettider-sektion ══ */
#oppettider {
  background: #F5EDD8;
  padding: 5rem 2rem 6rem;
}
.opp-inner {
  max-width: 860px;
  margin: 0 auto;
}
.opp-eyebrow {
  font-family: var(--font-serif);
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--copper);
  text-align: center;
  margin-bottom: 0.5rem;
}
.opp-h1 {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700;
  color: #1C1208;
  text-align: center;
  letter-spacing: 0.06em;
  margin-bottom: 3.5rem;
}
.opp-rule {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 auto 3.5rem;
  max-width: 320px;
}
.opp-rule .line { flex: 1; height: 1px; background: rgba(196,146,42,0.35); }
.opp-rule .gem  { width: 7px; height: 7px; background: var(--copper); transform: rotate(45deg); opacity: 0.8; }

.opp-card {
  background: #fff;
  border-radius: 4px;
  border: 1px solid rgba(196,146,42,0.18);
  padding: 2.2rem 2.5rem;
  margin-bottom: 2rem;
}
.opp-card:last-child { margin-bottom: 0; }
.opp-card-title {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1C1208;
  margin-bottom: 0.3rem;
}
.opp-card-sub {
  font-size: 0.82rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--copper);
  font-weight: 600;
  margin-bottom: 1.2rem;
}
.opp-card p {
  font-size: 0.97rem;
  line-height: 1.75;
  color: #3a2c1a;
  margin-bottom: 1rem;
}
.opp-card p:last-child { margin-bottom: 0; }
.opp-card ul {
  margin: 0.4rem 0 1rem 0;
  padding-left: 1.2rem;
}
.opp-card ul li {
  font-size: 0.97rem;
  line-height: 1.75;
  color: #3a2c1a;
  margin-bottom: 0.2rem;
}
.opp-card ul li::marker { color: var(--copper); }
.opp-card .opp-tid {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #F5EDD8;
  border-radius: 3px;
  padding: 0.3rem 0.8rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: #1C1208;
  margin: 0.5rem 0 0.8rem;
}
.opp-card .opp-stangd {
  background: rgba(160,56,32,0.08);
  color: #A03820;
  border-radius: 3px;
  padding: 0.3rem 0.8rem;
  font-size: 0.88rem;
  font-style: italic;
  display: inline-block;
  margin: 0.5rem 0 0.8rem;
}
.opp-card .opp-adress {
  font-size: 0.88rem;
  color: #5a4030;
  margin-top: 0.8rem;
}
.opp-card em, .opp-card li em {
  color: #5a4030;
}
.opp-card .opp-kontakt {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(196,146,42,0.15);
  font-size: 0.92rem;
  color: #3a2c1a;
  line-height: 1.7;
}
.opp-card .opp-kontakt a {
  color: var(--copper);
  font-weight: 600;
  text-decoration: none;
}
.opp-card .opp-kontakt a:hover { text-decoration: underline; color: var(--copper-l); }

/* Vårrundan-länk och andra länkar i kortets innehåll */
.opp-card-content a {
  color: var(--copper);
  font-weight: 600;
  text-decoration: none;
}
.opp-card-content a:hover { color: var(--copper-l); text-decoration: underline; }

/* Minimal footer för temp-version */
.footer-temp {
  background: #1C1208;
  padding: 1.5rem 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.footer-temp .footer-copy {
  font-size: 0.78rem;
  color: rgba(242,232,200,0.45);
  letter-spacing: 0.06em;
}
.footer-temp .footer-legal {
  display: flex;
  gap: 1.25rem;
}
.footer-temp .footer-legal a {
  font-size: 0.78rem;
  color: rgba(242,232,200,0.45);
  text-decoration: none;
  letter-spacing: 0.06em;
}
.footer-temp .footer-legal a:hover { color: var(--cream); }


/* ── Policy modals ── */
.policy-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(12,20,33,0.85);
  z-index: 9000;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.policy-modal-overlay.open { display: flex; }
.policy-modal {
  background: #F5EDD8;
  border-radius: 4px;
  max-width: 640px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 2.5rem;
  position: relative;
}
.policy-modal h2 {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #1C1208;
  margin-bottom: 1.2rem;
}
.policy-modal h3 {
  font-size: 0.9rem;
  font-weight: 700;
  color: #1C1208;
  margin: 1.2rem 0 0.3rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.policy-modal p, .policy-modal li {
  font-size: 0.88rem;
  line-height: 1.75;
  color: #3a2c1a;
}
.policy-modal ul { padding-left: 1.2rem; margin: 0.3rem 0 0.8rem; }
.policy-modal-close {
  position: absolute;
  top: 1rem;
  right: 1.2rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #7a6040;
  line-height: 1;
}
.policy-modal-close:hover { color: #1C1208; }


.nav-lang-switch {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  margin-right: 1rem;
}
.nav-lang {
  cursor: pointer;
  color: rgba(242,232,200,0.45);
  transition: color 0.2s;
}
.nav-lang.active,
.nav-lang:hover { color: var(--cream); }



/* ═══════════ HERO THEME VARIATIONS ═══════════ */
#hero[data-hero="vinter"]{background:#010810}
#hero[data-hero="vinter"] .hero-ocean{background:radial-gradient(ellipse at 50% 110%,rgba(100,160,220,0.18) 0%,transparent 65%),linear-gradient(180deg,#010810,#040E1E)}
#hero[data-hero="vinter"] .hero-eyebrow{color:#8CC4F0}
#hero[data-hero="vinter"] .hero-eyebrow::before,#hero[data-hero="vinter"] .hero-eyebrow::after{background:#8CC4F0}
.snowflakes{display:none;position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2}
#hero[data-hero="vinter"] .snowflakes{display:block}
.snowflake{position:absolute;top:-20px;animation:snowFall linear infinite;user-select:none}
@keyframes snowFall{0%{transform:translateY(-20px) rotate(0deg);opacity:0}10%{opacity:1}90%{opacity:.6}100%{transform:translateY(110vh) rotate(360deg);opacity:0}}

/* Turkos */
#hero[data-hero="turkos"]{background:#061C20}
#hero[data-hero="turkos"] .hero-ocean{background:radial-gradient(ellipse at 50% 105%,rgba(0,180,166,0.55) 0%,transparent 65%),linear-gradient(180deg,#061C20,#0A2830)}
#hero[data-hero="turkos"] .hero-eyebrow{color:#3DD4C8}
#hero[data-hero="turkos"] .hero-eyebrow::before,#hero[data-hero="turkos"] .hero-eyebrow::after{background:#3DD4C8}

/* Höst */
#hero[data-hero="host"]{background:#110C04}
#hero[data-hero="host"] .hero-ocean{background:radial-gradient(ellipse at 50% 110%,rgba(180,80,20,0.30) 0%,transparent 65%),linear-gradient(180deg,#110C04,#1A1006)}
#hero[data-hero="host"] .hero-eyebrow{color:#C87828}
#hero[data-hero="host"] .hero-eyebrow::before,#hero[data-hero="host"] .hero-eyebrow::after{background:#C87828}
#hero[data-hero="host"] .hero-title .volt-word{color:#E09840}

/* Äpple */
#hero[data-hero="apple"]{background:#F5EDDA}
#hero[data-hero="apple"] .hero-ocean{background:radial-gradient(ellipse at 30% 70%,rgba(160,40,20,0.12) 0%,transparent 50%),radial-gradient(ellipse at 70% 60%,rgba(60,110,40,0.10) 0%,transparent 45%),linear-gradient(180deg,#F5EDDA,#EDE0C4)}
#hero[data-hero="apple"] .hero-title{color:#1A1208}
#hero[data-hero="apple"] .hero-title .volt-word{color:#C03020}
#hero[data-hero="apple"] .hero-eyebrow{color:#7A3E00}
#hero[data-hero="apple"] .hero-eyebrow::before,#hero[data-hero="apple"] .hero-eyebrow::after{background:#7A3E00}
#hero[data-hero="apple"] .hero-desc{color:rgba(40,25,8,0.6)}
#hero[data-hero="apple"] .btn-p{background:#C03020!important;border-color:#C03020!important;color:#FFF5EC!important}

/* VM */
#hero[data-hero="vm"] .hero-adeco{display:none}
#hero[data-hero="vm"] .hero-waves{display:none}
#hero[data-hero="vm"] .hero-year{display:none}
#hero[data-hero="vm"] .hero-ocean{background:radial-gradient(ellipse at 50% 110%,rgba(0,106,167,0.25) 0%,transparent 55%),linear-gradient(180deg,rgba(21,43,68,0.92),rgba(0,40,80,0.88))}
#hero[data-hero="vm"] .hero-title{font-family:'Anton','Big Shoulders Display',Impact,sans-serif;font-weight:900;font-style:normal;letter-spacing:0.04em;text-transform:uppercase;line-height:.9}
#hero[data-hero="vm"] .hero-title .volt-word{color:#FECC02;text-shadow:0 0 30px rgba(254,204,2,0.4)}
#hero[data-hero="vm"] .hero-title .outline-word{color:transparent;-webkit-text-stroke:1.5px #FECC02;text-shadow:none}
#hero[data-hero="vm"] .hero-eyebrow{font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:.5em;color:#FECC02}
#hero[data-hero="vm"] .hero-eyebrow::before,#hero[data-hero="vm"] .hero-eyebrow::after{background:#FECC02}
#hero[data-hero="vm"] .btn-p{background:#FECC02!important;border-color:#FECC02!important;color:#0C1421!important;font-weight:600!important}
#hero[data-hero="vm"] .btn-s{border-color:rgba(254,204,2,0.3)!important;color:rgba(254,204,2,0.7)!important}

/* VM Flag */
.vm-flag-wrap{display:none;position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
#hero[data-hero="vm"] .vm-flag-wrap{display:block}
@keyframes vmFlagWave{0%{transform:translateY(0) skewX(0deg)}20%{transform:translateY(-9px) scaleY(1.025) skewX(.5deg)}50%{transform:translateY(7px) scaleY(.975) skewX(-.4deg)}80%{transform:translateY(-4px) scaleY(1.01)}100%{transform:translateY(0) skewX(0deg)}}
.vm-flag-anim{animation:vmFlagWave 6s ease-in-out infinite}
@keyframes vmShimmer{0%{transform:translateX(0)}100%{transform:translateX(1440px)}}
.vm-shimmer{animation:vmShimmer 12s linear infinite}

/* VM Balls */
.vm-balls-wrap{display:none;position:fixed;inset:0;overflow:visible;pointer-events:none;z-index:100}
#hero[data-hero="vm"] .vm-balls-wrap{display:none}/* controlled by JS */
.vm-ball{position:absolute;font-size:1.8rem;opacity:0;filter:drop-shadow(0 4px 12px rgba(0,0,0,0.5))}
@keyframes arc1LR{0%{transform:translateX(-80px) translateY(0);opacity:0}6%{opacity:.8}30%{transform:translateX(28vw) translateY(-18vh)}55%{transform:translateX(55vw) translateY(-22vh)}80%{transform:translateX(80vw) translateY(-6vh)}94%{opacity:.65}100%{transform:translateX(calc(100vw + 80px)) translateY(4vh);opacity:0}}
@keyframes arc2LR{0%{transform:translateX(-80px) translateY(0);opacity:0}6%{opacity:.8}40%{transform:translateX(40vw) translateY(-28vh)}70%{transform:translateX(70vw) translateY(-14vh)}94%{opacity:.65}100%{transform:translateX(calc(100vw + 80px)) translateY(2vh);opacity:0}}
@keyframes arc3LR{0%{transform:translateX(-80px) translateY(0);opacity:0}6%{opacity:.8}25%{transform:translateX(22vw) translateY(-10vh)}50%{transform:translateX(50vw) translateY(-15vh)}75%{transform:translateX(75vw) translateY(-5vh)}94%{opacity:.65}100%{transform:translateX(calc(100vw + 80px)) translateY(0);opacity:0}}
@keyframes arc4LR{0%{transform:translateX(-80px) translateY(0);opacity:0}6%{opacity:.8}50%{transform:translateX(50vw) translateY(-32vh)}94%{opacity:.65}100%{transform:translateX(calc(100vw + 80px)) translateY(-5vh);opacity:0}}
@keyframes arc1RL{0%{transform:translateX(calc(100vw + 80px)) translateY(0);opacity:0}6%{opacity:.8}30%{transform:translateX(72vw) translateY(-20vh)}55%{transform:translateX(45vw) translateY(-25vh)}80%{transform:translateX(20vw) translateY(-8vh)}94%{opacity:.65}100%{transform:translateX(-80px) translateY(3vh);opacity:0}}
@keyframes arc2RL{0%{transform:translateX(calc(100vw + 80px)) translateY(0);opacity:0}6%{opacity:.8}40%{transform:translateX(60vw) translateY(-12vh)}70%{transform:translateX(30vw) translateY(-22vh)}94%{opacity:.65}100%{transform:translateX(-80px) translateY(-4vh);opacity:0}}
@keyframes arc3RL{0%{transform:translateX(calc(100vw + 80px)) translateY(0);opacity:0}6%{opacity:.8}25%{transform:translateX(75vw) translateY(-16vh)}50%{transform:translateX(50vw) translateY(-30vh)}75%{transform:translateX(25vw) translateY(-16vh)}94%{opacity:.65}100%{transform:translateX(-80px) translateY(-2vh);opacity:0}}

/* VM Flag */
.vm-flag-wrap{display:none;position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
#hero[data-hero="vm"] .vm-flag-wrap{display:block}








20%{transform:translateY(-9px) scaleY(1.025) skewX(.5deg)}50%{transform:translateY(7px) scaleY(.975) skewX(-.4deg)}80%{transform:translateY(-4px) scaleY(1.01)}}
25%{transform:translateY(-11px) scaleY(1.04)}65%{transform:translateY(8px) scaleY(.96)}}
35%{transform:scaleX(1.03) translateX(-4px)}70%{transform:scaleX(.97) translateX(5px)}}



/* VM Balls */
.vm-balls-wrap{display:none;position:fixed;inset:0;overflow:visible;pointer-events:none;z-index:100}
/* vmBalls visas via JS setHeroTheme — se nedan */
.vm-ball{position:absolute;font-size:1.8rem;opacity:0;filter:drop-shadow(0 4px 12px rgba(0,0,0,0.5))}
@keyframes arc1LR{0%{transform:translateX(-80px) translateY(0);opacity:0}6%{opacity:.8}30%{transform:translateX(28vw) translateY(-18vh)}55%{transform:translateX(55vw) translateY(-22vh)}80%{transform:translateX(80vw) translateY(-6vh)}94%{opacity:.65}100%{transform:translateX(calc(100vw + 80px)) translateY(4vh);opacity:0}}
@keyframes arc2LR{0%{transform:translateX(-80px) translateY(0);opacity:0}6%{opacity:.8}40%{transform:translateX(40vw) translateY(-28vh)}70%{transform:translateX(70vw) translateY(-14vh)}94%{opacity:.65}100%{transform:translateX(calc(100vw + 80px)) translateY(2vh);opacity:0}}
@keyframes arc3LR{0%{transform:translateX(-80px) translateY(0);opacity:0}6%{opacity:.8}25%{transform:translateX(22vw) translateY(-10vh)}50%{transform:translateX(50vw) translateY(-15vh)}75%{transform:translateX(75vw) translateY(-5vh)}94%{opacity:.65}100%{transform:translateX(calc(100vw + 80px)) translateY(0);opacity:0}}
@keyframes arc4LR{0%{transform:translateX(-80px) translateY(0);opacity:0}6%{opacity:.8}50%{transform:translateX(50vw) translateY(-32vh)}94%{opacity:.65}100%{transform:translateX(calc(100vw + 80px)) translateY(-5vh);opacity:0}}
@keyframes arc1RL{0%{transform:translateX(calc(100vw + 80px)) translateY(0);opacity:0}6%{opacity:.8}30%{transform:translateX(72vw) translateY(-20vh)}55%{transform:translateX(45vw) translateY(-25vh)}80%{transform:translateX(20vw) translateY(-8vh)}94%{opacity:.65}100%{transform:translateX(-80px) translateY(3vh);opacity:0}}
@keyframes arc2RL{0%{transform:translateX(calc(100vw + 80px)) translateY(0);opacity:0}6%{opacity:.8}40%{transform:translateX(60vw) translateY(-12vh)}70%{transform:translateX(30vw) translateY(-22vh)}94%{opacity:.65}100%{transform:translateX(-80px) translateY(-4vh);opacity:0}}
@keyframes arc3RL{0%{transform:translateX(calc(100vw + 80px)) translateY(0);opacity:0}6%{opacity:.8}25%{transform:translateX(75vw) translateY(-16vh)}50%{transform:translateX(50vw) translateY(-30vh)}75%{transform:translateX(25vw) translateY(-16vh)}94%{opacity:.65}100%{transform:translateX(-80px) translateY(-2vh);opacity:0}}

/* Art Deco */
#hero[data-hero="artdeco"] .hero-adeco{display:none}
#hero[data-hero="artdeco"] .hero-waves{display:none}
#hero[data-hero="artdeco"] .hero-year{display:none}
#hero[data-hero="artdeco"]{background:#060D1E}
#hero[data-hero="artdeco"] .hero-ocean{background:#060D1E}
#hero[data-hero="artdeco"] .hero-content{position:relative!important;text-align:center!important;z-index:25!important;max-width:760px!important;padding:0 2rem!important;width:100%!important}
#hero[data-hero="artdeco"] .hero-eyebrow{font-family:'Poiret One',sans-serif!important;letter-spacing:.55em!important;color:#C89020!important;justify-content:center!important}
#hero[data-hero="artdeco"] .hero-eyebrow::before{background:#C89020!important;width:40px!important}
#hero[data-hero="artdeco"] .hero-eyebrow::after{background:#C89020!important;width:40px!important}
#hero[data-hero="artdeco"] .hero-title{font-family:'Poiret One',sans-serif!important;font-size:clamp(2.8rem,6.5vw,7rem)!important;font-weight:400!important;letter-spacing:.14em!important;text-transform:uppercase!important;line-height:1.1!important;color:#E8C840!important;text-shadow:0 0 60px rgba(232,200,64,0.8),0 0 120px rgba(200,144,32,0.4),0 3px 6px rgba(0,0,0,0.95)!important}
#hero[data-hero="artdeco"] .hero-title .volt-word{display:block!important;font-size:.35em!important;letter-spacing:.8em!important;background:linear-gradient(180deg,#E8C840,#A87818)!important;-webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important;background-clip:text!important}
#hero[data-hero="artdeco"] .hero-title .outline-word{display:none!important}
#hero[data-hero="artdeco"] .hero-deco-row{justify-content:center!important;display:none!important}
#hero[data-hero="artdeco"] .hero-desc{font-family:'Poiret One',sans-serif!important;letter-spacing:.20em!important;color:rgba(242,228,180,.85)!important;font-style:normal!important;font-size:0.95rem!important}
#hero[data-hero="artdeco"] .hero-btns{justify-content:center!important}
#hero[data-hero="artdeco"] .btn-p{background:#D4A820!important;border-color:#D4A820!important;color:#06101A!important;font-family:'Poiret One',sans-serif!important;letter-spacing:.3em!important}
#hero[data-hero="artdeco"] .btn-s{border-color:rgba(212,168,32,.35)!important;color:rgba(212,168,32,.7)!important;font-family:'Poiret One',sans-serif!important;letter-spacing:.3em!important}
#hero[data-hero="artdeco"]::before{content:'';position:absolute;inset:14px;border:3px solid rgba(212,168,32,.45);pointer-events:none;z-index:6;animation:adPulse 4s ease-in-out infinite}
#hero[data-hero="artdeco"]::after{content:'';position:absolute;inset:24px;border:1px solid rgba(212,168,32,.22);pointer-events:none;z-index:6}
@keyframes adPulse{0%,100%{border-color:rgba(212,168,32,.35);box-shadow:inset 0 0 60px rgba(212,168,32,.04)}50%{border-color:rgba(212,168,32,.75);box-shadow:inset 0 0 120px rgba(212,168,32,.12)}}
.adeco-fan-wrap{display:none;position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
/* artdeco removed */
.adeco-outer-ring{display:none!important}
@keyframes adRingRot{from{transform:translateY(-50%) rotate(0deg)}to{transform:translateY(-50%) rotate(360deg)}}
/* adeco outer ring hidden */

/* Switcher */
#hero-switcher{position:fixed;bottom:2rem;right:2rem;z-index:9000;display:flex;flex-direction:column;gap:0}
#switcher-toggle{width:44px;height:44px;background:rgba(10,10,10,.85);border:1px solid rgba(196,146,42,.4);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;margin-left:auto;backdrop-filter:blur(8px)}
#switcher-panel{background:rgba(10,10,10,.92);border:1px solid rgba(196,146,42,.25);padding:1rem;margin-bottom:.5rem;display:none;flex-direction:column;gap:.5rem;min-width:188px;backdrop-filter:blur(12px)}
#switcher-panel.open{display:flex}
.switcher-label{font-family:var(--font-sans);font-size:.5rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(196,146,42,.6);margin-bottom:.3rem;padding-bottom:.5rem;border-bottom:1px solid rgba(196,146,42,.12)}
.theme-btn{display:flex;align-items:center;gap:.8rem;background:none;border:1px solid transparent;padding:.5rem .7rem;cursor:pointer;border-radius:2px;transition:all .2s;text-align:left;width:100%}
.theme-btn:hover{border-color:rgba(196,146,42,.25);background:rgba(196,146,42,.05)}
.theme-btn.active{border-color:rgba(196,146,42,.5);background:rgba(196,146,42,.08)}
.theme-swatch{width:20px;height:20px;border-radius:50%;flex-shrink:0;border:1px solid rgba(255,255,255,.1)}
.theme-name{font-family:var(--font-sans);font-size:.62rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(242,232,200,.7)}
.theme-btn.active .theme-name{color:var(--copper)}


/* ═══════════ THEME SWITCHER ═══════════ */
/* Switcher */
#hero-switcher{position:fixed;bottom:2rem;right:2rem;z-index:9000;display:flex;flex-direction:column;gap:0}
#switcher-toggle{width:44px;height:44px;background:rgba(10,10,10,.85);border:1px solid rgba(196,146,42,.4);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;margin-left:auto;backdrop-filter:blur(8px)}
#switcher-panel{background:rgba(10,10,10,.92);border:1px solid rgba(196,146,42,.25);padding:1rem;margin-bottom:.5rem;display:none;flex-direction:column;gap:.5rem;min-width:188px;backdrop-filter:blur(12px)}
#switcher-panel.open{display:flex}
.switcher-label{font-family:var(--font-sans);font-size:.5rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(196,146,42,.6);margin-bottom:.3rem;padding-bottom:.5rem;border-bottom:1px solid rgba(196,146,42,.12)}
.theme-btn{display:flex;align-items:center;gap:.8rem;background:none;border:1px solid transparent;padding:.5rem .7rem;cursor:pointer;border-radius:2px;transition:all .2s;text-align:left;width:100%}
.theme-btn:hover{border-color:rgba(196,146,42,.25);background:rgba(196,146,42,.05)}
.theme-btn.active{border-color:rgba(196,146,42,.5);background:rgba(196,146,42,.08)}
.theme-swatch{width:20px;height:20px;border-radius:50%;flex-shrink:0;border:1px solid rgba(255,255,255,.1)}
.theme-name{font-family:var(--font-sans);font-size:.62rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(242,232,200,.7)}
.theme-btn.active .theme-name{color:var(--copper)}
.sw-standard{background:linear-gradient(135deg,#152B44,#1C3858)}
.sw-vinter{background:linear-gradient(135deg,#010810,#040E24)}
.sw-turkos{background:linear-gradient(135deg,#00A878,#061C20)}
.sw-host{background:linear-gradient(135deg,#C87828,#110C04)}
.sw-apple{background:linear-gradient(135deg,#C03020,#507830,#F5EDDA)}
.sw-vm{background:linear-gradient(135deg,#152B44,#006AA7,#FECC02)}
.sw-artdeco{background:linear-gradient(135deg,#0C1E38,#1A2E50,#D4A820)}
.sw-sydkust{background:linear-gradient(180deg,#7AAEC4 0%,#EAD018 55%,#5498B8 100%)}


/* ══════════════════════════════════════════════════
   NAVBAR GRADIENT + iOS FIXES
   ══════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════
   DYNAMIC ISLAND + MOBIL — FINAL FIX
   
   ROOT CAUSE: JS laddas i footer (för sent).
   LÖSNING: Ren CSS med max specificitet, placerad sist.
   viewport-fit=cover: nav[top:0] täcker Dynamic Island.
   ══════════════════════════════════════════════════ */

/* iOS overscroll */
html { background: var(--theme-bg, #152B44); overscroll-behavior-y: none; }
body { overscroll-behavior-y: none; }

/* dvh för desktop/tablet/liggande — fungerar bra där */
@supports (height: 100dvh) {
  @media not ((max-width: 480px) and (orientation: portrait)) {
    #hero { height: 100dvh; min-height: 100dvh; }
  }
}

/* Nav gradient — desktop / tablet / liggande */
nav {
  background: linear-gradient(
    180deg,
    rgba(12, 22, 40, 0.80) 0%,
    rgba(12, 22, 40, 0.25) 65%,
    transparent 100%
  );
}
nav.scrolled {
  background: rgba(21,43,68,0.97);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
}

/* ── Mobil generellt ── */
@media (max-width: 480px) {
  nav > div:last-child { gap: 0.5rem !important; }
  #navLangSelect { font-size: 0.65rem; padding: 0.2rem 0.3rem; }
  #oppettider { padding: 4rem 1.2rem 5rem; }
  .opp-card { padding: 1.5rem 1.2rem; }
  .opp-card p, .opp-card ul li { font-size: 0.95rem; line-height: 1.7; }
  .footer-temp {
    flex-direction: column; align-items: center;
    text-align: center; gap: 0.6rem;
  }
}

/* ── Mobil porträttläge — hero layout ── */
@media (max-width: 480px) and (orientation: portrait) {
  .hero-content {
    padding-top: 5rem;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }
  .hero-eyebrow {
    font-size: 0.5rem; letter-spacing: 0.25em;
    gap: 0.7rem; margin-bottom: 1.4rem;
  }
  .hero-eyebrow::before,
  .hero-eyebrow::after { flex: 0 0 16px; }
  /* hero-title hanteras i det radikala mobil-blocket längre ned */
  .hero-desc {
    font-size: 0.95rem; line-height: 1.75;
    text-align: center; padding: 0 0.2rem;
  }
}

/* ══════════════════════════════════════════════════
   KRITISK: MOBIL PORTRÄTT — NAV SOLID BAKGRUND
   
   .mob-portrait sätts av inline <head>-script INNAN
   första rendering — ingen flash, inga timingproblem.
   
   Med viewport-fit=cover och position:fixed;top:0 
   täcker nav-elementet Dynamic Island-zonen.
   Solid background-color täcker zonen helt.
   ══════════════════════════════════════════════════ */

/* Targeting via class satt av head-script (ingen media query nödvändig) */
.mob-portrait nav#navbar {
  background-color: #152B44 !important;
  background-image: none !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  box-shadow: none !important;
  height: auto !important;
}
.mob-portrait nav#navbar.scrolled {
  background-color: #152B44 !important;
  background-image: none !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Behåll även media query som backup */
@media (max-width: 480px) and (orientation: portrait) {
  html nav#navbar {
    background-color: #152B44 !important;
    background-image: none !important;
    padding-left: 1.1rem !important;
    padding-right: 1.1rem !important;
  }
  html nav#navbar.scrolled {
    background-color: #152B44 !important;
    background-image: none !important;
  }
}

/* ── Logga på mobil porträtt ── */
.mob-portrait nav > div:last-child {
  gap: 0.2rem !important;
}

/* ══════════════════════════════════════════════════
   MOBIL LIGGANDE (max-height: 480px, landscape)
   Samma filosofi som stående: rent, fokuserat.
   Men anpassat för det korta formatet.
   ══════════════════════════════════════════════════ */
@media (max-height: 480px) and (orientation: landscape) {

  /* ── HERO: skyltfönster — rubrik + knapp ── */
  .hero-content {
    padding-top: 1.2rem !important;
    padding-bottom: 1rem !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }

  /* ── Eyebrow: dold ── */
  .hero-eyebrow {
    display: none !important;
  }

  /* ── Rubrik: kompakt men läsbar ── */
  .hero-title {
    font-size: clamp(2rem, 8vh, 3.2rem);
    line-height: 0.92;
    margin-bottom: 0.4rem;
  }
  .hero-title .italic-line {
    font-size: 0.5em;
    margin-top: 0.25rem;
  }

  /* ── Dekorationsrad: dold ── */
  .hero-deco-row {
    display: none;
  }

  /* ── Beskrivning: dold ── */
  .hero-desc {
    display: none;
  }

  /* ── Knapp: bred CTA ── */
  .hero-btns {
    margin-top: 1.2rem;
  }
  .hero-btns .btn-p {
    padding: 0.85rem 2rem;
    font-size: 0.7rem;
    letter-spacing: 0.25em;
  }
  .hero-btns .btn-s {
    display: none;
  }

  /* ── Scroll-indikator: dold ── */
  .hero-scroll {
    display: none;
  }

  /* ── ÖPPETTIDER: läsbar, bra hierarki ── */
  /* Vågor: mobil liggande — båda vågorna */
  .hero-waves { height: 80px; }

  #oppettider {
    padding: 2rem 1.5rem 3rem;
  }
  .opp-h1 {
    font-size: 1.8rem;
    margin-bottom: 1.2rem;
  }
  .opp-rule {
    margin-bottom: 1.2rem;
  }
  .opp-eyebrow {
    font-size: 0.75rem;
  }
  .opp-card {
    padding: 1.2rem 1.4rem;
    margin-bottom: 1rem;
  }
  .opp-card-title {
    font-size: 1rem;
  }
  .opp-card-sub {
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    margin-bottom: 0.8rem;
  }
  .opp-card p,
  .opp-card ul li {
    font-size: 0.70rem !important;
    line-height: 1.6 !important;
  }
  .opp-card ul li strong {
    color: var(--copper-d);
    font-weight: 700;
  }
  .opp-card ul li em {
    display: block;
    font-size: 0.75rem !important;
    color: #8a7055 !important;
    margin-top: 0.25rem;
    padding: 0.35rem 0.6rem;
    background: rgba(196,146,42,0.06);
    border-left: 2px solid rgba(196,146,42,0.25);
    border-radius: 0 3px 3px 0;
    font-style: italic;
    line-height: 1.45;
  }
  .opp-card ul li:has(a) {
    list-style: none;
    margin-left: -0.3rem;
    padding: 0.45rem 0.6rem;
    background: rgba(196,146,42,0.09);
    border-left: 3px solid var(--copper);
    border-radius: 0 4px 4px 0;
    margin-bottom: 0.4rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #1C1208;
  }
  .opp-card .opp-adress {
    font-size: 0.82rem;
    margin-top: 0.6rem;
    color: #4a3020;
  }
  .opp-card .opp-kontakt {
    font-size: 0.88rem;
    margin-top: 1rem;
    padding-top: 0.8rem;
  }

  /* ── ÅLDERSKONTROLL ── */
  .age-gate-inner {
    max-width: 100vw;
    width: 100%;
  }
  .age-gate-border {
    padding: 1.4rem 2rem 1.4rem;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: transparent !important;
  }
  .age-lang {
    position: absolute;
    top: 0.9rem;
    right: 1rem;
    z-index: 10001;
  }
  .age-gate-deco {
    display: none;
  }
  .corner {
    display: none;
  }
  .age-gate-logo img {
    height: auto !important;
    width: 100% !important;
    max-width: 280px;
  }
  .age-gate-sub {
    font-size: 0.55rem;
    letter-spacing: 0.2em;
    margin-bottom: 0.8rem;
  }
  .rule {
    margin: 0 auto 0.8rem;
  }
  .age-gate-question {
    font-size: 1.3rem;
    margin-bottom: 0.2rem;
  }
  .age-gate-desc {
    font-size: 0.68rem;
    margin-bottom: 1rem;
  }
  .age-btns {
    flex-direction: row;
    gap: 0.75rem;
    margin-bottom: 1rem;
  }
  .age-btns .btn-p,
  .age-btns .btn-s {
    padding: 0.8rem 1.5rem;
    font-size: 0.65rem;
  }
  .age-legal {
    font-size: 0.68rem;
    line-height: 1.6;
  }

  /* ── MENY ── */
  #menu-overlay::before,
  #menu-overlay::after {
    display: none;
  }
  .overlay-eyebrow {
    display: none;
  }
  .overlay-nav {
    text-align: center;
    width: 100%;
  }
  .overlay-links {
    gap: 0.1rem;
    margin-bottom: 1.5rem;
    width: 100%;
  }
  .overlay-links li {
    text-align: center;
    width: 100%;
  }
  .overlay-links a {
    font-size: clamp(2.4rem, 10vh, 3.8rem) !important;
    color: rgba(242,232,200,0.75) !important;
    padding: 0.2rem 0;
    text-align: center !important;
    width: 100%;
  }
  .overlay-links a:active {
    color: var(--cream);
  }
}

/* ══════════════════════════════════════════════════
   IPAD LIGGANDE
   ══════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1200px) and (orientation: landscape) {
  .hero-content {
    padding-top: 7rem;
  }
}

/* ══════════════════════════════════════════════════
   IPAD STÅENDE
   ══════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .hero-title {
    font-size: clamp(5rem, 13vw, 9rem); /* inget !important — fitTitle() justerar per språk */
  }
}

/* ══ ÅLDERSKONTROLL — MOBIL STÅENDE ══
   Filosofi: som hero — rent, fokuserat.
   Logga → Fråga → Knappar. Inget plock.  */
@media (max-width: 480px) and (orientation: portrait) {

  /* ── Wrapper: full skärm ── */
  .age-gate-inner {
    max-width: 100vw;
    width: 100%;
  }

  /* ── Border: helt borttagen ── */
  .age-gate-border {
    padding: 2rem 1.6rem 1.8rem;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: transparent !important;
  }
  /* ── Språkväljare: flytta upp ovanför loggan ── */
  .age-lang {
    position: fixed;
    top: 0.8rem;
    right: 1rem;
  }

  /* ── Dekorationer: dolda — app-stil ── */
  .age-gate-deco {
    display: none;
  }
  .corner {
    display: none;
  }

  /* ── Logga: lite större, mer närvaro ── */
  .age-gate-logo img {
    height: auto !important;
    width: 100% !important;
    max-width: 320px;
    margin-bottom: 0.6rem;
  }

  /* ── Undertext: kompakt ── */
  .age-gate-sub {
    font-size: 0.55rem;
    letter-spacing: 0.25em;
    margin-bottom: 1rem;
  }

  /* ── Regel: minimal ── */
  .rule {
    margin: 0 auto 1rem;
  }
  .rule .line { width: 30px; }

  /* ── Frågan: dominant ── */
  .age-gate-question {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
  }

  /* ── Beskrivning ── */
  .age-gate-desc {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    margin-bottom: 1.4rem;
  }

  /* ── Knappar: full bredd, lätta att trycka ── */
  .age-btns {
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1.2rem;
    width: 100%;
  }
  .age-btns .btn-p,
  .age-btns .btn-s {
    width: 100%;
    padding: 1rem 1rem;
    font-size: 0.68rem;
    letter-spacing: 0.25em;
  }

  /* ── Juridisk text: läsbar, diskret ── */
  .age-legal {
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    line-height: 1.65;
  }
}

/* Kursiv text i öppettider-korten — mer kontrast */
.opp-card p em, .opp-card li em, .opp-card ul em {
  color: #5a4030 !important;
}

/* ══════════════════════════════════════════════════
   ÖPPETTIDER — MOBIL STÅENDE
   Filosofi: tydlig, skanningsbar, mobilanpassad.
   Viktigaste info (öppettider) syns direkt.
   ══════════════════════════════════════════════════ */
@media (max-width: 480px) and (orientation: portrait) {

  /* ── Sektion ── */
  #oppettider {
    padding: 2.5rem 0.9rem 3.5rem;
  }

  /* ── Eyebrow ── */
  .opp-eyebrow {
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    margin-bottom: 0.4rem;
  }

  /* ── Rubrik ── */
  .opp-h1 {
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
  }
  .opp-rule {
    margin-bottom: 1.8rem;
  }

  /* ── Kort: mer luft, tydliga gränser ── */
  .opp-card {
    padding: 1.6rem 1.2rem;
    margin-bottom: 1.2rem;
    border-radius: 6px;
    border-width: 1px;
  }

  /* ── Kortets rubrik: stor, skanningsbar ── */
  .opp-card-title {
    font-size: 1.2rem;
    letter-spacing: 0.08em;
    margin-bottom: 0.25rem;
  }

  /* ── Underrubrik: tydlig kopparfärg ── */
  .opp-card-sub {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    margin-bottom: 1.1rem;
  }

  /* ── Brödtext: läsbar storlek ── */
  .opp-card p {
    font-size: 1rem;
    line-height: 1.65;
    margin-bottom: 0.9rem;
  }

  /* ── Listpunkter ── */
  .opp-card ul {
    margin: 0.4rem 0 0.9rem;
    padding-left: 1.1rem;
  }
  .opp-card ul li {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 0.4rem;
  }

  /* ── Öppettid (strong): stor, koppar ── */
  .opp-card ul li strong {
    color: var(--copper-d);
    font-weight: 700;
    font-size: 1.05rem;
  }

  /* ── Betalningsparentes: dold not-stil ── */
  .opp-card ul li em {
    display: block;
    font-size: 0.78rem !important;
    color: #8a7055 !important;
    font-style: italic;
    line-height: 1.5;
    margin-top: 0.3rem;
    padding: 0.5rem 0.7rem;
    background: rgba(196,146,42,0.06);
    border-left: 2px solid rgba(196,146,42,0.25);
    border-radius: 0 3px 3px 0;
  }

  /* ── Öppettidsrader (Lördag/Söndag): framhävda chippar ── */
  .opp-card ul li:has(a) {
    list-style: none;
    margin-left: -0.3rem;
    padding: 0.55rem 0.7rem;
    background: rgba(196,146,42,0.09);
    border-left: 3px solid var(--copper);
    border-radius: 0 4px 4px 0;
    margin-bottom: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #1C1208;
  }

  /* ── Adress ── */
  .opp-card .opp-adress {
    font-size: 0.9rem;
    margin-top: 0.8rem;
    line-height: 1.55;
  }

  /* ── Kontakt ── */
  .opp-card .opp-kontakt {
    margin-top: 1.2rem;
    padding-top: 1rem;
    font-size: 0.95rem;
    line-height: 1.65;
  }

  /* ── Reservationstext ── */
  .opp-card p em {
    font-size: 0.88rem;
    color: #4a3020;
  }

  /* ── Kursiv text generellt: mer svärta ── */
  .opp-card em,
  .opp-card li em,
  .opp-card .opp-adress em {
    color: #4a3020 !important;
  }
}

/* ══════════════════════════════════════════════════
   HERO — MOBIL STÅENDE — RADIKAL MOBILANPASSNING
   
   Filosofi: skyltfönster, inte broschyr.
   Rubrik + knapp. Detaljer finns nedanför.
   ══════════════════════════════════════════════════ */
@media (max-width: 480px) and (orientation: portrait) {

  /* ── Hero: 100vh + safe area bottom ── */
  #hero {
    align-items: center;
    justify-content: center;
    height: calc(100vh + 62px) !important;
    min-height: calc(100vh + 62px) !important;
  }

  /* ── Hero: exakt synlig skärmhöjd via --vh variabel ── */
  #hero {
    align-items: center;
    justify-content: center;
    /* höjd: 100vh med viewport-fit=cover fyller hela skärmen korrekt */
  }

  /* ── Hero-content: minimal padding, centrerat ── */
  .hero-content {
    padding-top: 3.5rem;
    padding-bottom: 2rem;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* ── Eyebrow: DOLD — tar plats utan att tillföra på liten skärm ── */
  .hero-eyebrow {
    display: none;
  }

  /* ── Rubrik: FYL SKÄRMEN — detta är budskapet ── */
  .hero-title {
    font-size: clamp(2.8rem, 13vw, 5rem); /* inget !important — fitTitle() justerar per språk */
    line-height: 0.9;
    margin-bottom: 0.5rem;
    padding: 0 1rem;
    letter-spacing: -0.01em;
  }

  .hero-title .italic-line {
    font-size: 0.5em;
    margin-top: 0.4rem;
    letter-spacing: 0.01em;
  }

  /* ── Dekorationsrad: DOLD ── */
  .hero-deco-row {
    display: none;
  }

  /* ── Beskrivning: DOLD — detaljerna finns i öppettider-sektionen ── */
  .hero-desc {
    display: none;
  }

  /* ── Knapp: HEL BREDD, STOR, OMÖJLIG ATT MISSA ── */
  .hero-btns {
    width: 100%;
    margin-top: 2rem;
  }
  .hero-btns .btn-p {
    width: 100%;
    max-width: 320px;
    padding: 1.1rem 1.5rem;
    font-size: 0.72rem;
    letter-spacing: 0.3em;
  }
  .hero-btns .btn-s {
    display: none;  /* ev. sekundär knapp bort på mobil */
  }

  /* ── Scroll-indikator: dölj ── */
  .hero-scroll {
    display: none;
  }

  /* ── Vågor: mobil stående — naturlig höjd ── */
  .hero-waves {
    height: 120px;
  }
}

/* ══════════════════════════════════════════════════
   MENY-OVERLAY — MOBIL STÅENDE
   Filosofi: rent, luftigt, lätt att navigera.
   Stor text, tydliga tryckytor, inga distraktioner.
   ══════════════════════════════════════════════════ */
@media (max-width: 480px) and (orientation: portrait) {

  /* ── Art deco-ramar: dolda — tar utrymme på liten skärm ── */
  #menu-overlay::before,
  #menu-overlay::after {
    display: none;
  }

  /* ── Eyebrow: dold ── */
  .overlay-eyebrow {
    display: none;
  }

  /* ── Navigationen: centrerad, med luft ── */
  .overlay-nav {
    padding: 0 1.5rem;
    width: 100%;
  }

  /* ── Länklista: mer gap ── */
  .overlay-links {
    gap: 0.15rem;
    margin-bottom: 2.5rem;
  }

  /* ── Länkarna: SYNLIGA, stora tryckytor ──
     Originalet 18% opacity är osynligt på pekskärm.   */
  .overlay-links a {
    font-size: clamp(2.4rem, 13vw, 4rem);
    color: rgba(242,232,200,0.75);   /* tydlig, inte bländande */
    letter-spacing: 0.04em;
    padding: 0.3rem 0;               /* större tryckyta */
  }
  .overlay-links a:active {
    color: var(--cream);
  }

  /* ── Social/bottom: mer kompakt ── */
  .overlay-bottom {
    gap: 1.5rem;
  }
  .overlay-social a {
    font-size: 0.65rem;
    color: rgba(196,146,42,0.7);
  }
}

/* ══ COOKIEBANNER ══ */
#cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9000;
  background: var(--navy);
  border-top: 1px solid rgba(196,146,42,0.25);
  padding: 1rem 1.5rem;
  animation: fadeInUp 0.4s ease forwards;
}
.cookie-inner {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.cookie-text {
  flex: 1;
  font-size: 0.82rem;
  color: rgba(242,232,200,0.75);
  line-height: 1.6;
  margin: 0;
}
.cookie-text a {
  color: var(--copper);
  text-decoration: underline;
}
.cookie-btns {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}
.cookie-btn-accept {
  background: var(--copper);
  color: var(--navy);
  border: none;
  padding: 0.6rem 1.4rem;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.cookie-btn-accept:hover { background: var(--copper-l); }
.cookie-btn-decline {
  background: transparent;
  color: rgba(242,232,200,0.5);
  border: 1px solid rgba(196,146,42,0.25);
  padding: 0.6rem 1.4rem;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
}
.cookie-btn-decline:hover { color: var(--cream); border-color: var(--copper); }

@media (max-width: 480px) {
  .cookie-inner {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }
  .cookie-btns {
    width: 100%;
  }
  .cookie-btn-accept,
  .cookie-btn-decline {
    flex: 1;
    text-align: center;
    padding: 0.8rem 1rem;
  }
}

/* ── Vågfärger per tema — CSS-kontrollerat ── */
/* Våg 1 (huvudvåg) */
#hero[data-hero="standard"] .wave-path-1 { fill: rgba(21,43,68,1) !important; }
#hero[data-hero="vinter"]   .wave-path-1 { fill: #010810 !important; }
#hero[data-hero="turkos"]   .wave-path-1 { fill: #061C20 !important; }
#hero[data-hero="host"]     .wave-path-1 { fill: #110C04 !important; }
#hero[data-hero="apple"]    .wave-path-1 { fill: #F5EDDA !important; }
/* Våg 2 (sekundärvåg) */
#hero[data-hero="standard"] .wave-path-2 { fill: rgba(0,168,120,0.2) !important; }
#hero[data-hero="vinter"]   .wave-path-2 { fill: rgba(80,140,200,0.15) !important; }
#hero[data-hero="turkos"]   .wave-path-2 { fill: rgba(61,212,200,0.14) !important; }
#hero[data-hero="host"]     .wave-path-2 { fill: rgba(180,80,20,0.2) !important; }
#hero[data-hero="apple"]    .wave-path-2 { fill: rgba(60,110,40,0.10) !important; }

/* Mobile portrait ::after matches theme wave color */
@media (max-width: 480px) and (orientation: portrait) {
  /* Ingen ::after — SVG-vågen fyller naturligt */
}

/* ── Navbar: temafärg via CSS-variabel --theme-bg (sätts i <html> från PHP) ── */
/* Desktop/tablet: gradient ovanpå hero */
nav#navbar { background: linear-gradient(180deg, color-mix(in srgb, var(--theme-bg) 85%, transparent) 0%, color-mix(in srgb, var(--theme-bg) 30%, transparent) 65%, transparent 100%) !important; }

/* Scrollad: solid temafärg */
nav#navbar.scrolled { background: color-mix(in srgb, var(--theme-bg) 97%, transparent) !important; }

/* Mobil stående: solid temafärg alltid */
.mob-portrait nav#navbar,
.mob-portrait nav#navbar.scrolled { background: var(--theme-bg) !important; background-image: none !important; }

/* Cookie-banner: temafärg */
#cookie-banner { background: color-mix(in srgb, var(--theme-bg) 98%, transparent) !important; }