:root{--makai-sage:#7c8b5e;--makai-sage-deep:#5c6b47;--makai-sage-soft:#a8b58e;--makai-forest:#3a4a33;--makai-lavender-mist:#f5edf7;--makai-lavender-soft:#ddd0e4;--makai-lavender:#a593b8;--makai-lavender-mid:#8a7aa0;--makai-lavender-deep:#5e4f73;--makai-terracotta:#d87a4a;--makai-terracotta-deep:#b85f33;--makai-coral:#d9786b;--makai-teal:#5c7a82;--makai-cream:#faf5e8;--makai-sand:#f2e9d2;--makai-shell:#fffaee;--makai-paper:#fdf7e6;--makai-paper-cool:#faf6fb;--makai-ink:#2a2a26;--makai-ink-soft:#4a4a42;--makai-ink-muted:#7a7a6e;--makai-line:#3a4a3324;--bg-primary:var(--makai-cream);--bg-card:var(--makai-paper);--fg1:var(--makai-ink);--fg2:var(--makai-ink-soft);--fg3:var(--makai-ink-muted);--fg-brand:var(--makai-sage-deep);--border-1:var(--makai-line);--border-2:#3a4a3347;--border-cool:#5e4f7329;--font-display:"Caveat Brush", cursive;--font-serif:"Fraunces", Georgia, serif;--font-sans:"Inter", -apple-system, sans-serif;--font-hand:"Kalam", cursive;--shadow-1:0 1px 2px #3a4a330f, 0 2px 6px #3a4a330a;--shadow-2:0 4px 10px #3a4a3314, 0 12px 28px #3a4a330f;--shadow-3:0 10px 24px #3a4a331f, 0 24px 60px #3a4a331a;--ease-flow:cubic-bezier(.32, .72, .24, 1);--radius-md:14px;--radius-lg:20px;--radius-xl:28px}*,:before,:after{box-sizing:border-box}body{overscroll-behavior-y:none;margin:0}body.menu-open{overflow:hidden}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}html,body{font-family:var(--font-sans);color:var(--fg1);background:var(--bg-primary);-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.5}img{max-width:100%;height:auto;display:block}input,textarea,button{font:inherit}a{-webkit-tap-highlight-color:transparent}h1,h2,h3,h4,h5,h6,p{margin:0}.eyebrow{font-family:var(--font-sans);letter-spacing:.18em;text-transform:uppercase;color:var(--fg-brand);font-size:.75rem;font-weight:600}.lede{font-family:var(--font-serif);color:var(--fg2);font-size:1.125rem;font-style:italic;line-height:1.55}::selection{background:var(--makai-terracotta);color:var(--makai-shell)}@keyframes makai-marquee{0%{transform:translate(0)}to{transform:translate(-33.333%)}}@keyframes pop{0%{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translate(-50%)}}.toast{background:var(--makai-sage);color:var(--makai-shell);box-shadow:var(--shadow-3);font-family:var(--font-sans);z-index:200;animation:pop .32s var(--ease-flow);text-align:center;border-radius:999px;max-width:calc(100% - 48px);padding:14px 22px;font-size:14px;font-weight:600;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}.container{max-width:1320px;margin:0 auto;padding:0 20px}@media (width>=768px){.container{padding:0 32px}}.section{padding:64px 0}@media (width>=768px){.section{padding:96px 0}}@media (width>=1024px){.section{padding:120px 0}}details summary{list-style:none}details summary::-webkit-details-marker{display:none}details summary:after{content:"+";float:right;font-family:var(--font-sans);color:var(--fg-brand);transition:transform .2s var(--ease-flow);font-size:20px;font-weight:700}details[open] summary:after{content:"−"}.fade-in{opacity:0;transition:opacity .9s var(--ease-flow), transform .9s var(--ease-flow);transform:translateY(32px)}.fade-in.visible{opacity:1;transform:translateY(0)}button,a[style*=background]{transition:opacity .2s var(--ease-flow), transform .2s var(--ease-flow)}button:hover,a[style*=background]:hover{opacity:.88}button:active,a[style*=background]:active{transform:scale(.97)}:focus-visible,button:focus-visible{outline:2px solid var(--makai-terracotta);outline-offset:3px}input:focus-visible,textarea:focus-visible{outline:2px solid var(--makai-sage);outline-offset:1px}.mosaic-a,.mosaic-b,.cafe-mosaic,.insta-mosaic{grid-template-rows:auto!important;grid-template-columns:1fr!important}.mosaic-a>div,.mosaic-b>div,.cafe-mosaic>div,.insta-mosaic>div{grid-area:auto/1!important;height:auto!important}@media (width>=640px){.mosaic-a{grid-template-rows:1fr 1fr!important;grid-template-columns:1fr 1fr!important}.mosaic-a>div:first-child{grid-area:1/1!important}.mosaic-a>div:nth-child(2){grid-area:1/2/3!important;height:100%!important}.mosaic-a>div:nth-child(3){grid-area:2/1!important}.mosaic-b{grid-template-rows:1fr 1fr!important;grid-template-columns:1.2fr 1fr!important}.mosaic-b>div:first-child{grid-area:1/1/3!important;height:100%!important}.mosaic-b>div:nth-child(2){grid-area:1/2!important}.mosaic-b>div:nth-child(3){grid-area:2/2!important}.cafe-mosaic{grid-template-rows:1fr 1fr!important;grid-template-columns:1fr 1fr!important}.cafe-mosaic>div:first-child{grid-area:1/1/3!important;height:100%!important}.cafe-mosaic>div:nth-child(2){grid-area:1/2!important}.cafe-mosaic>div:nth-child(3){grid-area:2/2!important}.insta-mosaic{grid-template-rows:1fr 1fr!important;grid-template-columns:1fr 1fr!important}.insta-mosaic>div:first-child{grid-area:1/1!important}.insta-mosaic>div:nth-child(2){grid-area:1/2/3!important;height:100%!important}.insta-mosaic>div:nth-child(3){grid-area:2/1!important}}.bleed-wide{aspect-ratio:16/9}@media (width>=640px){.bleed-wide{aspect-ratio:2.5}}@media (width>=880px){.nav-desktop{display:flex!important}.nav-burger{display:none!important}}@media (width>=768px){.visit-home{grid-template-columns:1.4fr 1fr!important}.meny-home{grid-template-columns:1.6fr 1fr!important}.om-home,.om-story{grid-template-columns:1fr 1.6fr!important}.om-plats-layout{grid-template-columns:1fr 1.2fr!important}}@media (width<=640px){.stats-grid{grid-template-columns:repeat(2,1fr)!important}.values-grid-2,.menu-grid-2,.bowls-trio{grid-template-columns:1fr!important}}@media (width>=768px){.meny-acai-layout{grid-template-columns:1fr 1fr!important}.cups-layout{grid-template-columns:.7fr 1fr!important}.matcha-layout{grid-template-columns:1fr .9fr!important}.smoothie-layout{grid-template-columns:1fr .8fr!important}.cafe-visit{grid-template-columns:1.4fr 1fr!important}.merch-layout{grid-template-columns:1fr 1fr!important}}@media (width<=768px){.info-cards{grid-template-columns:1fr!important}}@media (width>=960px){.catering-layout{grid-template-columns:1fr 1.2fr!important}}@media (width<=640px){.catering-form-grid,.catering-form-grid-3{grid-template-columns:1fr!important}}@media (width>=768px){.kontakt-grid{gap:48px!important}.kontakt-form-grid{grid-template-columns:1fr 1.2fr!important}}

.bleed-wide img,.hero img,[class*="hero"] > img{filter:brightness(.82) saturate(1.05);transition:filter .4s var(--ease-flow)}
.bleed-wide,.hero{position:relative}
.bleed-wide::after,.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(42,42,38,0) 40%,rgba(42,42,38,.35) 100%);pointer-events:none}

/* "Hälsosamt ska vara gott" section — image takeover, white text */
section:has(> .om-home){
  background:linear-gradient(rgba(20,24,18,.55),rgba(20,24,18,.55)),url('/assets/bowls-cinematic.png') center/cover no-repeat !important;
}
/* Hide the standalone full-bleed bowls-cinematic image section */
section > img.bleed-wide[src*="bowls-cinematic"]{display:none !important}
section:has(> img.bleed-wide[src*="bowls-cinematic"]){display:none !important}
section:has(> .om-home) *{color:#fff !important}
section:has(> .om-home) .om-home > div:last-child{display:none !important}
section:has(> .om-home) > img{display:none !important}
section:has(> .om-home) a[href="/om"]{
  background:rgba(255,255,255,.18) !important;
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.5);
}

/* ============================================
   PREMIUM COHESION PASS
   ============================================ */

/* 1. Palette consolidation — fewer, warmer tones.
   Lavender-mist & paper-cool both pull toward the cream family
   so sections no longer feel like separate pages. */
:root{
  --makai-lavender-mist:#f1ebe0;   /* was lilac → warm sand-cream */
  --makai-paper-cool:#f5eee0;       /* match paper */
  --makai-paper:#f7f0e0;
  --makai-sand:#ebe1c7;
  --makai-cream:#faf3e3;
  --makai-shell:#fffaee;
  /* Forest deepened slightly for premium feel */
  --makai-forest:#2f3d29;
  --makai-sage-deep:#4d5a3b;
}

/* 2. Unified vertical rhythm — every section breathes the same.
   Override inline padding via attribute selector on style. */
section[style*="padding"]{
  padding-top:clamp(80px,10vw,120px) !important;
  padding-bottom:clamp(80px,10vw,120px) !important;
}
/* Keep full-bleed image sections tight */
section:has(> img.bleed-wide){padding:0 !important}

/* 3. Eyebrow consistency — all caps labels share weight & spacing */
[style*="letterSpacing"][style*="uppercase"]{
  font-size:11px !important;
  letter-spacing:.24em !important;
  font-weight:700 !important;
  opacity:.75;
}

/* 4. Headlines — soften display weight, tighten leading */
h2[style*="font-display"],h2[style*="var(--font-display)"]{
  line-height:.95 !important;
  letter-spacing:-.005em;
}

/* 5. Body copy — unified measure & comfort */
p[style*="lineHeight"]{line-height:1.75 !important}

/* 6. Buttons / pill links — single visual language.
   All anchor pills inherit elevation + smooth hover. */
a[style*="borderRadius:50"],a[style*="borderRadius: 50"],
a[style*="borderRadius:999"],a[style*="border-radius:999"]{
  box-shadow:0 1px 2px rgba(47,61,41,.08),0 6px 18px rgba(47,61,41,.06);
  transition:transform .25s var(--ease-flow),box-shadow .25s var(--ease-flow),background .25s var(--ease-flow) !important;
  font-size:12px !important;
  letter-spacing:.16em !important;
  padding:14px 32px !important;
}
a[style*="borderRadius:50"]:hover,a[style*="borderRadius: 50"]:hover,
a[style*="borderRadius:999"]:hover,a[style*="border-radius:999"]:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 10px rgba(47,61,41,.14),0 14px 32px rgba(47,61,41,.12);
}

/* 7. Cards — unified radius + subtle layered shadow */
[style*="borderRadius:20"],[style*="borderRadius:24"],[style*="borderRadius:28"]{
  box-shadow:0 1px 2px rgba(47,61,41,.05),0 8px 24px rgba(47,61,41,.06);
}

/* 8. Full-bleed images — consistent cinematic treatment */
img.bleed-wide{
  filter:brightness(.86) contrast(1.05) saturate(1.06);
}

/* 9. Section-to-section visual seams — hairline divider on cream bands */
section[style*="bg-primary"]+section[style*="bg-primary"],
section[style*="paper"]+section[style*="paper"]{
  border-top:1px solid rgba(58,74,51,.06);
}

/* 10. Terracotta restraint — only accents on prices/links, not large headings */
h1 span[style*="terracotta"],h2 span[style*="terracotta"]{
  color:var(--makai-forest) !important;
  font-style:italic;
}

/* 11. The dark "Besök oss" band sets the premium tone — borrow it
    for the FAQ + about-image sections so the page reads as one piece */
section[style*="lavender-mist"]:not(:has(.om-home)){
  background:var(--makai-cream) !important;
}

/* 12. Footer & dark sections — richer green, gold-toned text accents */
section[style*="sage-deep"],footer[style*="sage-deep"],
section[style*="forest"],footer[style*="forest"]{
  background:var(--makai-forest) !important;
}
section[style*="sage-deep"] [style*="terracotta"],
footer[style*="sage-deep"] [style*="terracotta"]{
  color:#e6c98a !important;  /* warm gold accent instead of orange on green */
}

/* 13. Mosaic gaps — tighten + uniform radius */
.mosaic-a,.mosaic-b,.cafe-mosaic,.insta-mosaic{gap:16px !important}
.mosaic-a img,.mosaic-b img,.cafe-mosaic img,.insta-mosaic img,
.mosaic-a >div,.mosaic-b >div,.cafe-mosaic >div,.insta-mosaic >div{
  border-radius:16px;
  overflow:hidden;
}

/* 14. Marquee strip — premium serif feel, less playful */
[class*="marquee"] *{font-family:var(--font-serif) !important;font-style:italic;font-weight:500}

/* Hide juice section on meny page (no longer sold) */
section:has([style*="letterSpacing"][style*="uppercase"]):has(*:is(span,h2,h3,p)):has(*:is(span):not(:empty)) { /* noop guard */ }

/* Hide juice section on /meny — no longer sold */
/meny only: hide juice section (8th)

/* ============================================
   MENY + CATERING — dark image sections, light text
   ============================================ */
/* Every other content section on these pages gets a dark image band */
body section.dark-band,
section:has(> .meny-acai-layout),
section:has(> .smoothie-layout),
section:has(> .catering-layout){
  background:linear-gradient(rgba(20,24,18,.62),rgba(20,24,18,.62)),
             url('/assets/bowls-cinematic.png') center/cover no-repeat !important;
  position:relative;
}
section:has(> .smoothie-layout){
  background-image:linear-gradient(rgba(20,24,18,.55),rgba(20,24,18,.55)),
                   url('/assets/smoothies-lineup.png') !important;
}
section:has(> .catering-layout){
  background-image:linear-gradient(rgba(20,24,18,.58),rgba(20,24,18,.58)),
                   url('/assets/spread-overhead.png') !important;
}
section:has(> .meny-acai-layout) *,
section:has(> .smoothie-layout) *,
section:has(> .catering-layout) *{color:var(--makai-shell) !important}
section:has(> .meny-acai-layout) [style*="terracotta"],
section:has(> .smoothie-layout) [style*="terracotta"],
section:has(> .catering-layout) [style*="terracotta"]{color:#f0c98a !important}
/* Pills on dark bands */
section:has(> .meny-acai-layout) a[style*="borderRadius"],
section:has(> .smoothie-layout) a[style*="borderRadius"],
section:has(> .catering-layout) a[style*="borderRadius"]{
  background:rgba(255,255,255,.16) !important;
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.4);
}
/* Hide the now-redundant inline images inside those sections */
section:has(> .meny-acai-layout) img:not([alt=""]),
section:has(> .smoothie-layout) img:not([alt=""]),
section:has(> .catering-layout) img:not([alt=""]){opacity:.0;height:0;width:0}
body:has(main) /* placeholder */{}
/* Hide juice section on /meny */
