/*
 * premium.css — global visual refinement layer
 * Additive only. Does not override per-section padding or per-section typography clamp().
 * Uses project OKLCH tokens: --blue, --orange, --cream, --ink, --ink-light, --ink-muted.
 */

/* ─── Font rendering ──────────────────────────────────────────── */

*,
*::before,
*::after {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── Heading polish ──────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  text-rendering: optimizeLegibility;
  text-wrap: balance;
}

/* ─── Link underline refinement ───────────────────────────────── */

a {
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

/* ─── Reduced motion (global) ─────────────────────────────────── */

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

/* ─── Navigation ──────────────────────────────────────────────── */

.nav-links a {
  letter-spacing: 0.03em;
}

.nav-links a:hover {
  opacity: 0.72;
  transition: opacity 0.18s ease;
}

/* ─── Buttons — hero CTAs ─────────────────────────────────────── */

.fullscreen-hero-actions a,
.hero-actions a,
.error-btn {
  letter-spacing: 0.04em;
  font-weight: 600;
  transition: background-color 0.22s ease, color 0.22s ease, transform 0.16s ease, box-shadow 0.22s ease;
}

.fullscreen-hero-actions a:hover,
.hero-actions a:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px oklch(0 0 0 / 0.18);
}

/* ─── Buttons — newsletter / generic inline ───────────────────── */

.newsletter-action,
.cookie-btn,
[class*="-action"] {
  letter-spacing: 0.03em;
}

/* ─── Newsletter action — inverted hero style ─────────────────── */

.newsletter-action {
  background: var(--orange, oklch(0.72 0.16 58));
  color: var(--cream, oklch(0.97 0.026 84));
  transition: background 0.22s ease, transform 0.22s ease, color 0.22s ease;
}

.newsletter-action:hover {
  background: var(--himlen-blue, oklch(0.49 0.16 248));
  color: var(--cream, oklch(0.97 0.026 84));
  transform: translateY(-2px);
}

/* ─── Cards — feature / welcome / ecology / shop ─────────────── */

.feature-card,
.welcome-card,
.ecology-card,
.shop-item {
  transition: box-shadow 0.22s ease, transform 0.22s ease;
}

.feature-card:hover,
.welcome-card:hover,
.ecology-card:hover,
.shop-item:hover {

  transform: translateY(-3px);
}

/* ─── Gallery items (Home + KlubbTiden) ───────────────────────── */

.gallery-item img,
.kt-gallery-item img,
.mosaic-item img {
  transition: transform 0.38s ease, filter 0.38s ease;
}

.gallery-item:hover img,
.kt-gallery-item:hover img,
.mosaic-item:hover img {
  transform: scale(1.04);
  filter: brightness(1.05);
}

/* ─── Menu items ──────────────────────────────────────────────── */





/* ─── Editorial mosaic image quality ─────────────────────────── */

.mosaic-item img {
  image-rendering: auto;
  will-change: transform;
}

/* ─── Cookie banner ───────────────────────────────────────────── */

.cookie-consent {
  backdrop-filter: blur(4px);
}

/* ─── Footer ──────────────────────────────────────────────────── */

footer a {
  text-underline-offset: 0.25em;
  opacity: 0.82;
  transition: opacity 0.18s ease;
}

footer a:hover {
  opacity: 1;
}

/* ─── Focus visible — accessibility ──────────────────────────── */

:focus-visible {
  outline: 2px solid var(--orange, oklch(0.72 0.16 58));
  outline-offset: 3px;
  border-radius: 3px;
}

/* ─── Image sharpness global ──────────────────────────────────── */

img {
  image-rendering: auto;
}

/* ─── Scrollbar (Webkit) ──────────────────────────────────────── */

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--cream, oklch(0.97 0.026 84));
}

::-webkit-scrollbar-thumb {
  background: var(--ink-muted, oklch(0.45 0.02 248));
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--blue, oklch(0.49 0.16 248));
}

/* ─── Selection color ─────────────────────────────────────────── */

::selection {
  background: var(--orange, oklch(0.72 0.16 58));
  color: var(--cream, oklch(0.97 0.026 84));
}

/* ─── Cookie consent banner ───────────────────────────────────── */

.cookie-consent {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 9900;
  display: flex;
  justify-content: center;
  padding: clamp(1rem, 2.5vw, 1.5rem);
  pointer-events: none;
  backdrop-filter: blur(4px);
}

.cookie-consent.is-hidden { display: none; }

.cookie-consent__card {
  pointer-events: auto;
  background: var(--blue, oklch(0.49 0.16 248));
  color: var(--cream, oklch(0.97 0.026 84));
  border-radius: clamp(16px, 2vw, 28px);
  box-shadow: 0 16px 48px oklch(0 0 0 / 0.38);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  width: min(100%, 680px);
  display: grid;
  gap: 1.1rem;
}

.cookie-consent__logo {
  height: 36px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.88;
}

.cookie-consent__title {
  font-family: 'Berkshire Swash', cursive;
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  line-height: 1;
  color: var(--cream, oklch(0.97 0.026 84));
  margin: 0;
}

.cookie-consent__text {
  font-family: 'Alegreya Sans', sans-serif;
  font-size: clamp(0.92rem, 1.5vw, 1.05rem);
  line-height: 1.5;
  color: color-mix(in oklch, var(--cream, oklch(0.97 0.026 84)) 84%, transparent);
  margin: 0;
}

.cookie-consent__legal {
  font-size: 0.82rem;
  color: color-mix(in oklch, var(--cream, oklch(0.97 0.026 84)) 68%, transparent);
}

.cookie-consent__legal a {
  color: color-mix(in oklch, var(--cream, oklch(0.97 0.026 84)) 82%, transparent);
  text-underline-offset: 3px;
}

.cookie-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.cookie-consent__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.6rem;
  padding: 0.65rem 1.2rem;
  border-radius: 0.9rem;
  border: 1px solid color-mix(in oklch, var(--cream, oklch(0.97 0.026 84)) 30%, transparent);
  background: transparent;
  color: var(--cream, oklch(0.97 0.026 84));
  font-family: 'Bricolage Grotesque', 'Alegreya Sans', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.cookie-consent__btn--primary {
  background: var(--orange, oklch(0.72 0.16 58));
  border-color: var(--orange, oklch(0.72 0.16 58));
  color: var(--cream, oklch(0.97 0.026 84));
}

.cookie-consent__btn:hover {
  background: var(--orange, oklch(0.72 0.16 58));
  border-color: var(--orange, oklch(0.72 0.16 58));
  color: var(--cream, oklch(0.97 0.026 84));
}

/* ─── Cookie settings panel ───────────────────────────────────── */

.cookie-settings {
  position: fixed;
  inset: 0;
  z-index: 9950;
  background: oklch(0 0 0 / 0.55);
  display: grid;
  place-items: center;
  padding: 1.5rem;
}

.cookie-settings.is-hidden { display: none; }

.cookie-settings__panel {
  background: var(--blue, oklch(0.49 0.16 248));
  color: var(--cream, oklch(0.97 0.026 84));
  border-radius: 20px;
  box-shadow: 0 24px 60px oklch(0 0 0 / 0.42);
  padding: clamp(1.6rem, 4vw, 2.5rem);
  width: min(100%, 520px);
  display: grid;
  gap: 1.2rem;
}

.cookie-settings h3 {
  font-family: 'Berkshire Swash', cursive;
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  color: var(--cream, oklch(0.97 0.026 84));
}

.cookie-settings__option {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid color-mix(in oklch, var(--cream, oklch(0.97 0.026 84)) 16%, transparent);
}

.cookie-settings__option:last-of-type { border-bottom: 0; }

.cookie-settings__option-label { font-weight: 700; font-size: 0.95rem; }
.cookie-settings__option-desc { font-size: 0.82rem; opacity: 0.72; margin-top: 0.22rem; line-height: 1.4; }

.cookie-settings__toggle {
  flex: 0 0 auto;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklch, var(--cream, oklch(0.97 0.026 84)) 40%, transparent);
  background: color-mix(in oklch, var(--cream, oklch(0.97 0.026 84)) 20%, transparent);
  cursor: pointer;
  position: relative;
  transition: background 0.2s ease;
}

.cookie-settings__toggle::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--cream, oklch(0.97 0.026 84));
  transition: left 0.2s ease;
}

.cookie-settings__toggle.is-on { background: var(--orange, oklch(0.72 0.16 58)); border-color: var(--orange, oklch(0.72 0.16 58)); }
.cookie-settings__toggle.is-on::after { left: calc(100% - 19px); }
.cookie-settings__toggle[disabled] { opacity: 0.5; cursor: not-allowed; }

.cookie-settings__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* ─── Scroll-driven header visibility ───────────────────────────── */

/* Smooth transition on the whole navbar */
#navbar {
    transition: transform 0.28s ease, opacity 0.28s ease, height 0.35s ease, background-color 0.35s ease, border-color 0.35s ease;
}

/* Show full navbar at top / scrolling up */
body.is-at-top #navbar,
body.is-scrolled-up #navbar {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* Hide full navbar when scrolling down — no gap left behind */
body.is-scrolled-down #navbar {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

/* When menu is open, always show navbar regardless of scroll */
body.menu-is-open #navbar {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* When header is hidden, menu overlay covers full viewport */
body.is-scrolled-down .primary-nav {
    top: 0;
    height: 100vh;
}

/* When menu is open, restore normal primary-nav position (below visible navbar) */
body.menu-is-open .primary-nav {
    top: var(--main-nav-height, 3.85rem);
    height: calc(100vh - var(--main-nav-height, 3.85rem));
}

/* ─── Floating logo toggle ──────────────────────────────────────── */

.compact-logo-toggle {
    position: fixed;
    top: clamp(1.4rem, 3vw, 2rem);
    right: clamp(1.4rem, 3vw, 2rem);
    left: auto;
    width: clamp(3.6rem, 6vw, 4.8rem);
    height: clamp(3.6rem, 6vw, 4.8rem);
    border-radius: 999px;
    border: 0;
    background: var(--himlen-blue);
    display: grid;
    place-items: center;
    padding: 0.6rem;
    cursor: pointer;
    z-index: 1200;
    opacity: 0;
    transform: translateY(-0.7rem) scale(0.96);
    pointer-events: none;
    transition:
        opacity 0.24s ease,
        transform 0.24s ease,
        background 0.22s ease,
        box-shadow 0.22s ease;
    box-shadow: 0 10px 28px rgba(0,0,0,0.18);
}

.compact-logo-toggle img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: none;
}

.compact-logo-toggle:hover,
.compact-logo-toggle:focus-visible {
    background: var(--orange);
}

.compact-logo-toggle:hover img,
.compact-logo-toggle:focus-visible img {
    filter: brightness(0) invert(1);
}

/* Visible only when scrolled down */
body.is-scrolled-down .compact-logo-toggle {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Hidden when menu is open */
body.menu-is-open .compact-logo-toggle {
    opacity: 0 !important;
    transform: translateY(-0.7rem) scale(0.96) !important;
    pointer-events: none !important;
}

.compact-logo-toggle:focus-visible {
    outline: 2px solid var(--cream);
    outline-offset: 4px;
}

/* ─── Sticky elements: adjust top when header hidden ── */
body.is-scrolled-down .menu-nav {
    top: 0;
}

body.is-scrolled-down .feature-showcase-shell {
    top: 1rem;
}

/* ─── Navigation (Global Header) ───────────────────────────────── */

nav#navbar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1000;
    width: 100%;
    max-width: 100%;
    overflow: visible;
    box-sizing: border-box;
    background: color-mix(in oklch, var(--cream) 90%, transparent);
    backdrop-filter: blur(16px);
    transition:
        transform 0.28s ease,
        opacity 0.28s ease,
        height 0.35s ease,
        background-color 0.35s ease;
}

.main-nav {
    background: color-mix(in oklch, var(--cream) 92%, transparent);
    border-bottom: 0;
    padding: 0.32rem 0;
    width: 100%;
    box-sizing: border-box;
}

.main-nav .container {
    width: var(--page-width);
    max-width: 100%;
    margin: 0 auto;
    padding-inline: clamp(1rem, 5vw, 72px);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(0.5rem, 1.4vw, 1rem);
}

.main-nav .logo {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.logo-link {
    min-width: 0;
    max-width: 100%;
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    gap: clamp(0.55rem, 1.4vw, 1rem);
    color: inherit;
    text-decoration: none;
}

.main-nav .logo img {
    flex: 0 0 auto;
    height: clamp(28px, 4vw, 42px);
    width: auto;
    border-radius: 5px;
    transition: transform 0.3s ease;
}

.logo-link:hover img,
.logo-link:focus-visible img {
    transform: rotate(3deg) scale(1.03);
}

.main-nav .logo h1 {
    min-width: 0;
    max-width: 100%;
    font-family: 'Berkshire Swash', cursive;
    font-weight: 400;
    font-size: clamp(0.82rem, 2.4vw, 1.55rem);
    color: var(--himlen-blue);
    letter-spacing: 0;
    line-height: 1;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background: transparent;
}

.brand-short,
.brand-full {
    display: inline;
    background: transparent;
    color: inherit;
}

.brand-full {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    background: transparent;
    color: inherit;
}

.brand-word {
    display: inline;
    background: transparent;
    color: inherit;
}

.brand-word + .brand-word { margin-left: 0.18em; }

.nav-menu-wrap {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(0.5rem, 1.2vw, 24px);
}

.menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3px;
    flex: 0 0 auto;
    border: 0;
    background: var(--himlen-blue);
    color: var(--cream);
    border-radius: 999px;
    padding: 0;
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease;
}

.menu-toggle:hover,
.menu-toggle:focus-visible,
body.nav-menu-open .menu-toggle {
    background: var(--orange);
    transform: scale(1.04);
}

.menu-line {
    width: 1rem;
    height: 2px;
    background: var(--cream);
    border-radius: 999px;
    transition: transform 0.2s ease, opacity 0.16s ease;
    margin: 0;
    display: block;
    flex-shrink: 0;
}

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

body.nav-menu-open .menu-line:nth-of-type(1) { transform: translateY(5px) rotate(22deg); }
body.nav-menu-open .menu-line:nth-of-type(2) { opacity: 0; }
body.nav-menu-open .menu-line:nth-of-type(3) { transform: translateY(-5px) rotate(-22deg); }

.primary-nav {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--main-nav-height, 3.85rem);
    height: calc(100vh - var(--main-nav-height, 3.85rem));
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(3rem, 10vh, 5.2rem) 0 clamp(2.5rem, 4vw, 3.5rem);
    background: var(--himlen-blue);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-0.8rem);
    transition: opacity 0.22s ease, transform 0.26s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.22s step-end;
    z-index: 1001;
    text-align: center;
}

.primary-nav-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 0;
    margin: 0;
    width: 100%;
}

body.nav-menu-open .primary-nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 0.2s ease, transform 0.26s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
}

body.nav-menu-open { overflow: hidden; }

/* ─── Menu language selector (inside flex column) ── */
.menu-language-selector {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(0.9rem, 2vw, 1.35rem);
    flex-wrap: wrap;
    margin-top: clamp(1.4rem, 3vw, 2.2rem);
    margin-bottom: clamp(2rem, 4vw, 3rem);
    width: 100%;
    z-index: 2;
}

.menu-language-btn {
    width: clamp(3.4rem, 5vw, 4.4rem);
    height: clamp(3.4rem, 5vw, 4.4rem);
    border-radius: 999px;
    border: 0;
    background: var(--cream);
    display: grid;
    place-items: center;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    padding: 0;
    line-height: 1;
    transition:
        background 0.22s ease,
        transform 0.22s ease,
        box-shadow 0.22s ease;
}

.menu-language-btn:hover,
.menu-language-btn:focus-visible {
    background: var(--orange);
    transform: translateY(-2px);
}

/* ── Flag images inside each button ── */
.menu-language-flag {
    width: 54%;
    height: 54%;
    object-fit: contain;
    display: block;
    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        filter 0.2s ease;
    filter:
        grayscale(1)
        sepia(1)
        hue-rotate(170deg)
        saturate(4)
        brightness(0.72);
}

.menu-language-btn:hover .menu-language-flag,
.menu-language-btn:focus-visible .menu-language-flag {
    filter: none;
    transform: scale(1.04);
}

/* ─── Menu footer text (inside flex column) ── */
.menu-footer-text {
    flex: 0 0 auto;
    display: grid;
    gap: 0.25rem;
    justify-items: center;
    text-align: center;
    margin-top: auto;
    padding-top: clamp(1.5rem, 4vw, 2.5rem);
    width: 100%;
}

.menu-footer-subtitle {
    font-family: 'Bricolage Grotesque', 'Alegreya Sans', sans-serif;
    font-size: clamp(0.72rem, 1.2vw, 0.92rem);
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    color: color-mix(in oklch, var(--cream) 82%, transparent);
}

.menu-footer-location {
    font-family: 'Bricolage Grotesque', 'Alegreya Sans', sans-serif;
    font-size: clamp(0.78rem, 1.25vw, 1rem);
    font-style: italic;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1;
    color: color-mix(in oklch, var(--cream) 82%, transparent);
}

.primary-nav-links li { width: 100%; }
.primary-nav-links li:last-child { border-bottom: 0; }

.primary-nav a {
    text-decoration: none;
    color: var(--cream);
    font-family: 'Berkshire Swash', cursive;
    font-weight: 400;
    font-size: clamp(1.85rem, 4.8vw, 4.15rem);
    letter-spacing: 0;
    text-transform: none;
    line-height: 0.84;
    position: relative;
    display: block;
    width: 100%;
    padding: clamp(0.46rem, 1.2vw, 0.82rem) max(1rem, calc((100vw - var(--page-width)) / 2));
    z-index: 0;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, font-size 0.18s ease;
}

.primary-nav a::before { display: none; }
.primary-nav a:hover {
    background: var(--orange);
    color: var(--cream);
    font-size: clamp(2.1rem, 5.55vw, 4.9rem);
    transform: none;
}

.lang-switcher {
    flex: 0 0 auto;
    position: relative;
}

.lang-current,
.lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--himlen-blue);
    cursor: pointer;
    font-family: 'Alegreya Sans', sans-serif;
    font-weight: 800;
}

.lang-current {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    padding: 0;
    font-size: 20px;
    border-radius: 50%;
    background: transparent;
    border-color: transparent;
    color: var(--himlen-blue);
    box-shadow: none;
    justify-content: center;
    transition: background 0.25s ease, transform 0.25s ease, filter 0.25s ease;
}

.lang-current .lang-code { display: none; }

.lang-current:hover {
    background: var(--orange);
    color: var(--cream);
    transform: scale(1.04);
}

.lang-flag {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
}

.lang-current .lang-flag {
    width: 18px;
    height: 18px;
    object-fit: contain;
    display: block;
    border-radius: 2px;
}



.lang-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 0.4rem);
    min-width: 12.2rem;
    display: grid;
    gap: 0.25rem;
    padding: 0.5rem;
    border-radius: 1rem;
    background: var(--himlen-blue);
    box-shadow: 0 16px 30px rgba(13, 16, 28, 0.28);
    opacity: 0;
    transform: translateY(-0.35rem);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.22s ease;
    z-index: 1002;
}

.lang-switcher.open .lang-menu,
.lang-switcher:focus-within .lang-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.lang-btn {
    width: 100%;
    justify-content: flex-start;
    padding: 0.78rem 0.9rem;
    font-size: 0.88rem;
    text-align: left;
    border-radius: 0.6rem;
    color: color-mix(in oklch, var(--cream) 88%, transparent);
    font-family: 'Berkshire Swash', cursive;
}

@media (max-width: 720px) {
    .main-nav .container {
        padding-inline: clamp(0.75rem, 4vw, 1.2rem);
    }
}

@media (max-width: 600px) {
    .main-nav {
        padding: 0.32rem 0;
    }

    .main-nav .container {
        padding-inline: 0.85rem;
        gap: 0.55rem;
    }

    .logo-link {
        gap: 0.45rem;
    }

    .main-nav .logo img {
        height: 28px;
    }

    .main-nav .logo h1 {
        font-size: clamp(0.72rem, 3.6vw, 0.95rem);
        max-width: 48vw;
    }

    .nav-menu-wrap {
        gap: 0.5rem;
    }

    .menu-toggle {
        width: 34px;
        height: 34px;
        min-width: 34px;
        min-height: 34px;
    }

    .menu-line {
        width: 1rem;
        height: 2px;
    }

    .lang-current {
        width: 34px;
        height: 34px;
        min-width: 34px;
        min-height: 34px;
    }

    .lang-current .lang-flag {
        width: 16px;
        height: 16px;
    }
}

@media (max-width: 430px) {
    .main-nav .container {
        padding-inline: 0.7rem;
        gap: 0.45rem;
    }

    .main-nav .logo img {
        height: 26px;
    }

    .main-nav .logo h1 {
        font-size: clamp(0.68rem, 3.4vw, 0.85rem);
        max-width: 44vw;
    }

    .brand-full {
        display: none;
    }

    .nav-menu-wrap {
        gap: 0.45rem;
    }

    .menu-toggle {
        width: 34px;
        height: 34px;
        min-width: 34px;
        min-height: 34px;
    }

    .menu-line {
        width: 1rem;
    }

    .lang-current {
        width: 34px;
        height: 34px;
        min-width: 34px;
        min-height: 34px;
    }

    .lang-current .lang-flag {
        width: 17px;
        height: 17px;
    }
}

@media (max-width: 360px) {
    .main-nav .container {
        padding-inline: 0.55rem;
    }

    .main-nav .logo img {
        height: 24px;
    }

    .main-nav .logo h1 {
        font-size: 0.68rem;
        max-width: 38vw;
    }

    .menu-toggle {
        width: 30px;
        height: 30px;
        min-width: 30px;
        min-height: 30px;
    }

    .menu-line {
        width: 0.95rem;
        height: 1.9px;
    }

    .lang-current {
        width: 30px;
        height: 30px;
        min-width: 30px;
        min-height: 30px;
    }

    .lang-current .lang-flag {
        width: 16px;
        height: 16px;
    }

    .primary-nav a {
        font-size: clamp(1.4rem, 9vw, 2.2rem);
        padding-block: clamp(0.35rem, 2vw, 0.6rem);
    }

    .primary-nav a:hover {
        font-size: clamp(1.6rem, 10vw, 2.5rem);
    }
}

/* ─── Allergen Navigation bar (categories + allergens) ──────────────── */
.allergen-nav {
  position: sticky;
  top: var(--main-nav-height, 3.85rem);
  z-index: 15;
  width: 100%;
  background: var(--cream);
  padding: 0.5rem 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.allergen-nav.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.allergen-nav-inner {
  width: var(--page-width);
  margin: 0 auto;
}

.allergen-nav-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem 1.2rem;
}

.allergen-nav-categories {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.55rem;
}

.allergen-nav-cat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: var(--himlen-blue);
  color: var(--cream);
  font-family: 'Bricolage Grotesque', 'Alegreya Sans', sans-serif;
  font-size: clamp(0.75rem, 1vw, 0.88rem);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.02em;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.allergen-nav-cat:hover,
.allergen-nav-cat:focus-visible {
  background: var(--orange);
  color: var(--cream);
  transform: translateY(-1px);
}

.allergen-nav-allergens {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.85rem;
}

.allergen-nav-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: 'Alegreya Sans', sans-serif;
  font-size: clamp(0.72rem, 1vw, 0.85rem);
  font-weight: 600;
  color: var(--green);
  line-height: 1;
}

.allergen-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2rem;
  height: 1.2rem;
  border: 1.3px solid color-mix(in oklch, var(--green) 50%, transparent);
  border-radius: 999px;
  color: var(--green);
  background: transparent;
}

.allergen-nav-icon svg {
  width: 0.62rem;
  height: 0.62rem;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 650px) {
  .allergen-nav-row {
    flex-direction: column;
    gap: 0.4rem;
  }

  .allergen-nav-categories {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.3rem;
  }

  .allergen-nav-cat {
    width: auto;
    font-size: clamp(0.65rem, 2.2vw, 0.78rem);
    padding: 0.25rem 0.55rem;
    text-align: center;
  }

  .allergen-nav-allergens {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.3rem 0.6rem;
  }

  .allergen-nav-item {
    font-size: clamp(0.6rem, 2vw, 0.72rem);
  }

  .allergen-nav-icon {
    width: 0.9rem;
    height: 0.9rem;
  }
}


/* ─── Language Hiding ──────────────────────────────────────────────── */
html[data-lang="sv"] [lang="en"],
html[data-lang="sv"] [lang="es"],
html[data-lang="en"] [lang="sv"],
html[data-lang="en"] [lang="es"],
html[data-lang="es"] [lang="sv"],
html[data-lang="es"] [lang="en"] {
  display: none !important;
}

/* ─── Newsletter section (global via partials/newsletter.html) ───── */
.newsletter-hero {
  width: 100%;
  min-height: clamp(22rem, 40vw, 34rem);
  position: relative;
  overflow: hidden;
  border-top: none;
  border-bottom: none;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-size: cover;
  background-position: center;
}

.newsletter-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at center,
      rgba(0, 0, 0, 0.38) 0%,
      rgba(0, 0, 0, 0.25) 34%,
      rgba(0, 0, 0, 0.08) 65%,
      rgba(0, 0, 0, 0.02) 100%
    );
  z-index: 1;
  pointer-events: none;
}

.newsletter-inner {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  text-align: center;
  max-width: 900px;
  width: min(90%, 900px);
  margin-inline: auto;
}

.newsletter-copy {
  display: grid;
  gap: 1rem;
  justify-items: center;
  text-align: center;
  max-width: 720px;
  width: 100%;
}

.newsletter-hero h2 {
  font-family: 'Berkshire Swash', cursive;
  font-weight: 400;
  font-size: clamp(1.95rem, 4.15vw, 3.8rem);
  line-height: 1.18;
  color: var(--cream);
  margin-bottom: 0.9rem;
  text-align: center;
}

.newsletter-hero p {
  color: var(--cream);
  font-size: clamp(0.95rem, 1.5vw, 1.12rem);
  line-height: 1.35;
  white-space: nowrap;
  text-align: center;
}

@media (max-width: 640px) {
  .newsletter-hero p {
    white-space: normal;
  }
}

.newsletter-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.8rem;
  padding: 0.7rem 1.4rem;
  border-radius: 1.2rem;
  background: var(--orange);
  color: var(--cream);
  font-family: 'Berkshire Swash', cursive;
  font-weight: 400;
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  line-height: 1;
  text-decoration: none;
  letter-spacing: 0;
  transition: background 0.22s ease, transform 0.22s ease, color 0.22s ease;
  border: none;
  cursor: pointer;
  width: fit-content;
}

.newsletter-action:hover {
  background: var(--himlen-blue);
  color: var(--cream);
  transform: translateY(-2px);
}

/* ─── Paper texture for Home scroll story panels ───────────── */

/* Base panel setup */
.scroll-story-panel {
  position: absolute;
  overflow: hidden;
  isolation: isolate;
}

/* Texture layer */
.scroll-story-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

/* Content always above texture */
.scroll-story-panel > * {
  position: relative;
  z-index: 1;
}

/* Make sure inactive story panels do not capture pointer events */
.scroll-story-panel:not(.is-active) {
  pointer-events: none;
}

/* Mobile: panels become normal scroll cards, texture must still cover all */
@media (max-width: 768px) {
  .scroll-story-panel {
    position: relative;
    min-height: 100dvh;
    background-size: cover;
    background-position: center center;
  }

  .scroll-story-panel::before {
    background-size: cover;
    background-position: center center;
  }
}

/* ─── Himlen Paper Texture — Home Story ───────────────────────── */

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

.scroll-story-panel {
  position: absolute;
  overflow: hidden;
  isolation: isolate;
}

.scroll-story-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.scroll-story-panel > * {
  position: relative;
  z-index: 1;
}

/* Cream paper panels */
.scroll-story-panel.light-panel {
  background-color: var(--cream);
  color: var(--himlen-blue);
}

.scroll-story-panel.light-panel::before {
  background-image: url("assets/himlen-paper-cream-texture.webp");
  opacity: 0.72;
  mix-blend-mode: multiply;
  filter: contrast(1.08) saturate(1.02);
}

/* Blue paper panels */
.scroll-story-panel.blue-panel {
  background-color: var(--himlen-blue);
  color: var(--cream);
}

.scroll-story-panel.blue-panel::before {
  background-image: url("assets/himlen-paper-blue-texture.webp");
  opacity: 0.82;
  mix-blend-mode: normal;
  filter: contrast(1.05) saturate(1.02);
}

/* Keep text, images and inner content above the texture */
.scroll-story-panel p,
.scroll-story-triptych,
.scroll-story-triptych-item,
.scroll-story-triptych-item img {
  position: relative;
  z-index: 1;
}

/* Mobile safety */
@media (max-width: 768px) {
  .scroll-story-panel::before {
    background-size: cover;
    background-position: center center;
  }
}

/* ─── Menu Paper Texture + sticky fix ─── */

/* Sticky needs visible overflow on parent sections */
#frukost,
#matiga,
#kalla,
#varma,
.menu-split-section {
  overflow: visible !important;
}

/* Texture lives on right content area only */
#frukost .menu-split-content,
#matiga .menu-split-content,
#kalla .menu-split-content,
#varma .menu-split-content {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Light menu sections: cream paper */
#frukost .menu-split-content,
#matiga .menu-split-content {
  background: var(--cream) !important;
  background-color: var(--cream) !important;
}

/* Blue menu sections: blue paper */
#kalla .menu-split-content,
#varma .menu-split-content {
  background: var(--himlen-blue) !important;
  background-color: var(--himlen-blue) !important;
}

/* Remove section-level texture layers that interfere with sticky */
#matiga::before,
#kalla::before,
#varma::before {
  display: none !important;
}

/* Texture layers inside right content column */
#frukost .menu-split-content::before,
#matiga .menu-split-content::before,
#kalla .menu-split-content::before,
#varma .menu-split-content::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

/* Cream paper texture */
#frukost .menu-split-content::before,
#matiga .menu-split-content::before {
  background-image: url("assets/himlen-paper-cream-texture.webp");
  opacity: 0.68;
  mix-blend-mode: multiply;
  filter: contrast(1.08) saturate(1.02);
}

/* Blue paper texture */
#kalla .menu-split-content::before,
#varma .menu-split-content::before {
  background-image: url("assets/himlen-paper-blue-texture.webp");
  opacity: 0.72;
  mix-blend-mode: normal;
  filter: contrast(1.05) saturate(1.02);
}

/* Content above texture */
#frukost .menu-split-content > *,
#matiga .menu-split-content > *,
#kalla .menu-split-content > *,
#varma .menu-split-content > * {
  position: relative;
  z-index: 1;
}

/* Decorative icons behind text but above texture */
#frukost .menu-bg-icon,
#matiga .menu-bg-icon,
#kalla .menu-bg-icon,
#varma .menu-bg-icon {
  z-index: 0;
}

/* Ensure sticky panel works */
.menu-split-panel {
  position: sticky !important;
  top: var(--main-nav-height, 4.5rem) !important;
  height: calc(100vh - var(--main-nav-height, 4.5rem)) !important;
  min-height: 34rem;
  overflow: hidden !important;
  align-self: start;
  z-index: 2;
}

.menu-split-panel img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block;
}

/* Mobile: disable sticky */
@media (max-width: 768px) {
  .menu-split-section {
    overflow: hidden !important;
  }

  .menu-split-panel {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    min-height: 60vh !important;
  }

  .menu-split-content {
    overflow: hidden !important;
  }
}

/* ─── Cream paper texture for feature-showcase ──────────────────── */

.feature-showcase::before,
.visit::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("assets/himlen-paper-cream-texture.webp");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  opacity: 0.42;
  mix-blend-mode: multiply;
  filter: contrast(1.06) saturate(1.02);
}

/* ─── FINAL: visible full-width torn divider above #frukost ─── */

/* Keep sticky safe */
#frukost,
.menu-split-section {
  overflow: visible !important;
}

/* Anchor section */
#frukost {
  position: relative !important;
}

/* Disable old allergen pseudo divider if it exists */
.inline-allergen-note-section::before,
.inline-allergen-note-section::after {
  display: none !important;
  content: none !important;
}

/* Visible full-width torn paper edge */
#frukost::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;

  left: 50% !important;
  top: -1px !important;
  transform: translateX(-50%) !important;

  width: 100vw !important;
  height: 72px !important;

  z-index: 20 !important;
  pointer-events: none !important;

  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: 100% 100% !important;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath fill='%23fbf3e3' d='M0 0 H1440 V50 C1392 61 1351 47 1308 55 C1266 63 1228 46 1186 55 C1144 64 1105 46 1063 56 C1020 66 981 46 938 55 C895 64 856 47 813 56 C770 65 732 46 690 55 C648 64 610 47 567 56 C524 65 486 46 444 55 C402 64 364 47 322 56 C280 65 242 46 201 55 C160 64 122 48 82 56 C45 63 23 53 0 58 Z'/%3E%3C/svg%3E") !important;
}

/* Keep sticky image and content working */
#frukost .menu-split-panel {
  position: sticky !important;
  z-index: 3 !important;
}

#frukost .menu-split-content {
  position: relative !important;
  z-index: 4 !important;
}

/* Content above paper textures, but below nothing important */
#frukost .menu-split-content > * {
  position: relative !important;
  z-index: 5 !important;
}

/* Give the title a little breathing room */
#frukost .menu-split-content > .section-header {
  margin-top: 1.2rem !important;
}

/* Mobile */
@media (max-width: 768px) {
  #frukost::before {
    height: 46px !important;
  }

  #frukost .menu-split-content > .section-header {
    margin-top: 0.7rem !important;
  }
}

/* ─── Compact allergen note vertical spacing ─── */

.inline-allergen-note-section {
  min-height: clamp(320px, 38vh, 480px) !important;
  display: grid;
  align-items: center;
  justify-items: center;
  padding-top: clamp(2.2rem, 4vw, 3.5rem) !important;
  padding-bottom: clamp(2.2rem, 4vw, 3.5rem) !important;
}

.inline-allergen-note {
  margin: 0 auto !important;
}

/* ─── Keep all other menu decorative icons hidden ─── */

.menu-bg-icon {
  display: none !important;
}

/* ─── Reduced top spacing for menu sections ─── */

#frukost .menu-split-content {
  padding-top: 150px !important;
}

#matiga .menu-split-content,
#kalla .menu-split-content {
  padding-top: 100px !important;
}

/* ─── Frukost coffee icon right of text block ─── */

#frukost .menu-split-content > .section-header {
  position: relative !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Icon at the right edge of the text block, below the title */
#frukost .section-header::after {
  content: "" !important;
  position: absolute !important;
  right: -10px !important;
  top: 60% !important;
  width: 64px !important;
  height: 64px !important;
  background-image: url("assets/11_prensa_francesa.png") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  opacity: 0.3 !important;
  pointer-events: none !important;
  transform: translateY(-50%) !important;
}

#frukost .menu-split-content > .menu-grid {
  position: relative !important;
  z-index: 5 !important;
}

/* ─── Home Story Mobile Definitive Fix — same behaviour as desktop ─── */
@media (max-width: 640px) {
  .scroll-story-section {
    position: relative !important;
    height: calc(var(--story-panel-count, 5) * 100svh) !important;
    min-height: calc(var(--story-panel-count, 5) * 100svh) !important;
    overflow: visible !important;
    background: var(--cream) !important;
  }

  .scroll-story-sticky {
    position: sticky !important;
    top: 0 !important;
    width: 100% !important;
    height: 100svh !important;
    min-height: 100svh !important;
    overflow: hidden !important;
    display: grid !important;
    place-items: center !important;
    scroll-snap-type: none !important;
    -webkit-overflow-scrolling: auto !important;
  }

  .scroll-story-panel {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100svh !important;
    min-height: 100svh !important;
    opacity: 0 !important;
    transform: translateY(1.25rem) scale(0.985) !important;
    pointer-events: none !important;
    overflow: hidden !important;
    isolation: isolate !important;

    display: grid !important;
    grid-template-rows: auto auto !important;
    align-content: center !important;
    justify-items: center !important;
    gap: clamp(1rem, 4vw, 1.6rem) !important;

    padding:
      clamp(4.2rem, 13vw, 5.4rem)
      clamp(1.1rem, 5vw, 1.5rem)
      clamp(2.2rem, 8vw, 3.2rem) !important;

    transition:
      opacity 0.45s ease,
      transform 0.45s ease !important;
  }

  .scroll-story-panel.is-active {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
  }

  .scroll-story-panel > * {
    position: relative !important;
    z-index: 1 !important;
  }

  .scroll-story-triptych {
    width: 100% !important;
    max-width: 21rem !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
    margin: 0 auto !important;
  }

  .scroll-story-triptych-item {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 12px !important;
  }

  .scroll-story-triptych-item:nth-child(4) {
    display: block !important;
  }

  .scroll-story-triptych-item img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: inherit !important;
  }

  .scroll-story-panel p {
    max-width: 21rem !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    font-size: clamp(1.35rem, 6.4vw, 1.95rem) !important;
    line-height: 1.14 !important;
    text-align: center !important;
    display: block !important;
  }
}