:root{
  --radius:.375rem;
  --font-brand:"Outfit",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --background:#fbfbfc;
  --foreground:#28272a;
  --surface:#f3f3f4;
  --primary:#E84F78;
  --primary-hover:#D13B5F;
  --primary-foreground:#fff;
  --pink-soft:#fbf0f1;
  --hairline:#ededee;
  --container:1440px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:7rem}
body{margin:0;background:var(--background);color:var(--foreground);font-family:var(--font-brand);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
svg.icon{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.container{width:min(calc(100% - 48px),var(--container));margin-inline:auto}
.heading-caps{text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.eyebrow{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.18em;color:var(--primary)}
.copy{max-width:58ch;font-size:15.5px;line-height:1.75;color:rgba(40,39,42,.85)}
.lead{max-width:54ch;font-size:17px;line-height:1.65}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:0;cursor:pointer}
.btn-primary{background:var(--primary);color:#fff;padding:14px 28px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;transition:.18s}
.btn-primary:hover{background:var(--primary-hover)}
.btn-ghost{border:1px solid var(--hairline);padding:14px 24px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;background:transparent}
.btn-pill{border-radius:999px}
.shadow-image{box-shadow:0 28px 56px -28px rgba(0,0,0,.4)}
.relative{position:relative}.isolate{isolation:isolate}.overflow-hidden{overflow:hidden}
.curve{position:absolute;left:0;right:0;width:100%;pointer-events:none;z-index:-1}
.curve svg{display:block;width:100%;height:100%}
.curve path{fill:var(--pink-soft)}
.curve.bg path{fill:var(--background)}
.curve.flipx svg{transform:scaleX(-1)}
.curve.flipy svg{transform:scaleY(-1)}
.curve.flipxy svg{transform:scale(-1,-1)}

.site-header{position:sticky;top:0;z-index:40;width:100%;background:var(--pink-soft)}
.header-inner{height:96px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.header-left{display:flex;min-width:0;align-items:center}
.desktop-nav ul{display:flex;align-items:center;gap:14px;margin:0;padding:0;list-style:none}
.desktop-nav a{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;transition:opacity .18s}
.desktop-nav a:hover{opacity:.6}
.site-logo{justify-self:center;flex:0 0 auto}
.site-logo img{height:64px;width:auto}
.header-right{display:flex;justify-content:flex-end;align-items:center}
.order-link{display:inline-flex;align-items:center;gap:6px;border-radius:999px;background:var(--primary);padding:8px 16px;color:#fff;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;transition:opacity .18s}
.order-link:hover{opacity:.85}
.order-link .icon{width:18px;height:18px}
.header-edge{position:absolute;left:0;right:0;top:100%;z-index:-1;height:40px;width:100%;pointer-events:none}
.header-edge path{fill:var(--pink-soft)}
.mobile-toggle{display:none;border:0;background:transparent;padding:8px;font-size:22px}
.mobile-nav{display:none}

.hero-shell{position:relative;isolation:isolate;overflow:hidden;background:var(--background)}
.hero-band{position:absolute;inset-inline:0;bottom:0;z-index:-1;height:72%;width:100%}
.hero-band svg{width:100%;height:100%;display:block}
.hero-band path{fill:var(--pink-soft)}
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:16px;min-height:min(76svh,820px);padding:64px 40px 56px}
.hero-left{position:relative;z-index:1;order:1}
.hero-wordmark{max-width:576px}
.hero-wordmark img{height:auto;width:100%}
.hero-kicker{margin:-8px 0 0;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.28em;color:rgba(40,39,42,.7)}
.hero-copy{margin:12px 0 0;max-width:448px;font-size:15px;line-height:1.65;color:rgba(40,39,42,.8)}
.hero-actions{margin-top:24px;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.hero-actions .contact{border-radius:999px;background:var(--primary);padding:16px 36px;color:#fff;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.14em}
.hero-actions .shop{border:1px solid rgba(40,39,42,.3);border-radius:999px;background:rgba(251,251,252,.7);padding:16px 36px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.14em}
.hero-right{position:relative;z-index:1;order:2;display:flex;justify-content:flex-end}
.hero-right img{width:min(44vw,640px);max-width:none;filter:drop-shadow(0 28px 40px rgba(0,0,0,.18))}

.quicklinks{position:relative;margin-top:56px;padding-bottom:96px}
.quick-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.quick-card{position:relative;display:block;overflow:hidden;border-radius:6px;box-shadow:0 24px 48px -24px rgba(0,0,0,.45);outline:1px solid rgba(251,251,252,.4);transition:transform .5s}
.quick-card:hover{transform:translateY(-4px)}
.quick-card img{aspect-ratio:4/3;width:100%;object-fit:cover;transition:transform .5s}
.quick-card:hover img{transform:scale(1.03)}
.quick-card::after{content:"";position:absolute;inset:0;background:rgba(40,39,42,.35)}
.quick-card h2{position:absolute;inset:0;z-index:1;margin:0;display:flex;align-items:center;justify-content:center;padding:16px;text-align:center;color:var(--background);font-size:30px;font-weight:600;text-transform:uppercase;letter-spacing:.06em}

.home-section{position:relative;isolation:isolate;overflow:hidden;padding:80px 0}
.home-section.pink{background:var(--pink-soft)}
.home-section .grid2{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.home-section .section-image{aspect-ratio:4/3;width:100%;border-radius:6px;object-fit:cover}
.home-section .section-copy{display:flex;flex-direction:column;justify-content:center}
.home-section h2{margin:12px 0 0;font-size:36px;line-height:1.1}
.home-section p.text{margin:20px 0 0;max-width:65ch;font-size:14.5px;line-height:1.7}
.home-section address{margin-top:24px;font-style:normal;font-size:14.5px;line-height:1.7}
.hours{margin-top:20px;max-width:320px;font-size:14.5px}
.hours>div{display:flex;justify-content:space-between;gap:24px;margin-top:6px}
.home-contact-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.home-contact-actions a{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--hairline);padding:12px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.home-contact-actions a.order-link{border:0;padding:8px 16px}

.page-intro{position:relative;isolation:isolate;overflow:hidden;background:var(--pink-soft);padding:64px 0 112px}
.page-intro h1{margin:16px 0 0;max-width:14ch;font-size:60px;line-height:1.05}
.page-intro .intro-copy{margin-top:24px;max-width:65ch;font-size:14.5px;line-height:1.7}
.page-intro .curve{bottom:0;height:52%}

.section{padding:64px 0}
.feature-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:center}
.feature-grid img{aspect-ratio:16/10;width:100%;object-fit:cover;border-radius:6px}
.category-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--primary-hover)}
.category-title{margin:12px 0 0;font-size:36px;line-height:1.1}
.category-text{margin:20px 0 0;max-width:65ch;font-size:14.5px;line-height:1.7}
.category-pair{display:grid;grid-template-columns:repeat(2,1fr);gap:56px}
.category-pair article:nth-child(2){margin-top:56px}
.category-pair img{aspect-ratio:4/3;width:100%;border-radius:6px;object-fit:cover}
.category-pair h2{margin:24px 0 0;font-size:30px;line-height:1.1}
.assort-rest{position:relative;isolation:isolate;overflow:hidden;background:var(--pink-soft);padding:112px 0}
.assort-rest .top-curve{top:0;height:34%}.assort-rest .bottom-curve{bottom:0;height:34%}
.assort-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px}
.assort-grid img{aspect-ratio:3/2;width:100%;border-radius:6px;object-fit:cover}
.assort-grid h2{margin:24px 0 0;font-size:24px;line-height:1.15}
.cta-section{position:relative;isolation:isolate;overflow:hidden;padding:112px 0}
.cta-section .curve{bottom:-80px;height:62%}
.cta-section h2{margin:0;font-size:36px;line-height:1.1}
.cta-section p{font-size:14.5px;line-height:1.7}

.about-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--pink-soft);padding:64px 0 0}
.about-hero-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:64px;align-items:end}
.about-hero-copy{padding-bottom:96px}
.about-hero h1{margin:20px 0 0;max-width:14ch;font-size:72px;line-height:.98}
.about-hero .lead{margin-top:28px}
.about-hero .copy{margin-top:20px}
.about-hero-image{position:relative;margin-bottom:-64px}
.about-hero-image img{aspect-ratio:5/4;width:100%;border-radius:6px;object-fit:cover}
.about-hero .curve{bottom:0;height:38%}
.about-spacer{height:112px}

.about-story{position:relative;isolation:isolate;overflow:hidden;padding:128px 0 96px}
.story-grid{display:grid;grid-template-columns:1fr .92fr;gap:80px;align-items:center}
.story-grid h2,.craft-grid h2,.oven-copy h2,.visit h2{margin:16px 0 0;max-width:16ch;font-size:52px;line-height:1.05}
.story-grid .lead,.craft-grid .lead,.visit .lead{margin-top:24px}
.rule{margin-top:32px;width:64px;border:0;border-top:1px solid rgba(232,79,120,.6)}
.paragraph-stack{margin-top:32px;display:grid;gap:20px}
.story-image-wrap{position:relative}
.story-image-wrap::before{content:"";position:absolute;right:-24px;top:-32px;z-index:-1;height:70%;width:70%;border-radius:45% 55% 50% 50% / 55% 45% 55% 45%;background:var(--pink-soft)}
.story-image-wrap img{aspect-ratio:4/5;width:100%;border-radius:6px;object-fit:cover}

.craft{position:relative;isolation:isolate;overflow:hidden;background:var(--pink-soft);padding:112px 0}
.craft .curve.top{top:0;height:24%}.craft .curve.bottom{bottom:0;height:26%}
.craft-grid{display:grid;grid-template-columns:.92fr 1fr;gap:80px;align-items:center}
.craft-grid img{aspect-ratio:4/5;width:100%;border-radius:6px;object-fit:cover}

.oven{position:relative;isolation:isolate;overflow:hidden;padding:128px 0}
.oven-grid{position:relative;display:grid;grid-template-columns:repeat(12,1fr);gap:0;align-items:center}
.oven-image{grid-column:span 7}
.oven-image img{aspect-ratio:16/11;width:100%;border-radius:6px;object-fit:cover}
.oven-copy{grid-column:span 5;margin-left:-96px;background:var(--background);padding:40px 0 40px 40px}
.oven-copy .lead{margin-top:24px}
.product-moment{padding:0 0 96px}
.product-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:56px;align-items:end}
.product-grid img{aspect-ratio:21/9;width:100%;border-radius:6px;object-fit:cover}
.product-grid h2{margin:12px 0 0;max-width:12ch;font-size:30px;line-height:1.08}
.product-grid .copy{margin-top:20px}
.text-link{margin-top:24px;display:inline-flex;border-bottom:1px solid var(--primary);padding-bottom:4px;color:var(--primary);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.12em}
.visit{position:relative;isolation:isolate;overflow:hidden;background:var(--pink-soft);padding:112px 0}
.visit .curve{top:0;height:26%}
.visit-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:80px;align-items:center}
.visit img{aspect-ratio:4/3;width:100%;border-radius:6px;object-fit:cover}
.visit .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px}

.contact-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--pink-soft);padding:64px 0 128px}
.contact-hero .curve{bottom:0;height:40%}
.contact-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:64px;align-items:center}
.contact-grid h1{margin:16px 0 0;max-width:14ch;font-size:60px;line-height:1.05}
.contact-grid .intro{margin-top:24px;max-width:65ch;font-size:15px;line-height:1.7}
.contact-grid address{margin-top:32px;font-style:normal;font-size:14.5px;line-height:1.7}
.contact-grid .actions{margin-top:32px;display:flex;gap:12px;flex-wrap:wrap}
.contact-photo{aspect-ratio:4/3;width:100%;border-radius:6px;object-fit:cover}
.contact-hours{margin-top:32px}
.contact-hours dl{margin-top:16px;max-width:384px;font-size:14.5px}
.contact-hours dl div{display:flex;justify-content:space-between;gap:24px;margin-top:6px}
.map-section{position:relative;isolation:isolate;overflow:hidden;padding:96px 0}
.map-section .curve{bottom:-96px;height:50%}
.map-section h2{margin:0;font-size:36px;line-height:1.1}
.map{margin-top:32px;aspect-ratio:21/9;width:100%;overflow:hidden;border-radius:6px}
.map iframe{width:100%;height:100%;border:0}

.site-footer{background:var(--pink-soft)}
.footer-wrap{padding:55px 0}
.footer-grid{display:grid;grid-template-columns:1.35fr .8fr .8fr 1.15fr;gap:60px}
.footer-brand img{height:64px;width:auto}
.footer-list{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:12px;font-size:13.5px;line-height:1.65;color:rgba(40,39,42,.8)}
.footer-list li.icon-row{display:flex;gap:12px;align-items:flex-start}
.footer-list .icon{margin-top:2px;color:var(--primary)}
.footer-heading{margin:0;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.footer-links{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:12px;font-size:14px;color:rgba(40,39,42,.8)}
.footer-facebook{margin-top:12px;display:inline-flex;align-items:center;gap:10px;font-size:14px;color:rgba(40,39,42,.8)}
.footer-facebook .icon{width:20px;height:20px;color:var(--primary)}
.bagerlaug{height:260px;width:auto}
.footer-divider{margin-top:36px;border-top:1px solid var(--hairline)}
.footer-row{padding:20px 0;display:flex;align-items:center;justify-content:space-between;gap:16px}
.payment-list{display:flex;flex-wrap:wrap;gap:10px}
.payment{height:24px;min-width:40px;display:flex;align-items:center;justify-content:center;border:1px solid var(--hairline);border-radius:4px;background:rgba(251,251,252,.8);padding:0 8px;font-size:10px;color:rgba(40,39,42,.55);font-weight:700}
.legal-links{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:13px;color:rgba(40,39,42,.7)}
.copyright{padding-top:20px;font-size:12px;color:rgba(40,39,42,.55)}

.legal{width:min(calc(100% - 48px),900px);margin:auto;padding:80px 0 100px}
.legal h1{font-size:52px;line-height:1.05}
.legal h2{margin-top:42px;font-size:26px;line-height:1.2;text-transform:uppercase;letter-spacing:.06em}
.legal h3{margin-top:28px;font-size:16px}
.legal p,.legal address{font-size:15px;line-height:1.75;color:rgba(40,39,42,.85)}
.legal table{border-collapse:collapse;width:100%;margin-top:20px;font-size:14px}
.legal th,.legal td{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--hairline);vertical-align:top}

@media (min-width:640px){
  .header-inner{height:112px}
  .site-logo img{height:96px}
}
@media (max-width:1023px){
  .container{width:min(calc(100% - 48px),var(--container))}
  .desktop-nav{display:none}
  .mobile-toggle{display:inline-flex}
  .mobile-nav{position:absolute;top:88px;left:24px;z-index:60;min-width:220px;border:1px solid var(--hairline);border-radius:6px;background:var(--pink-soft);padding:18px;box-shadow:0 16px 40px rgba(0,0,0,.12)}
  .mobile-nav[hidden]{display:none}
  .mobile-nav:not([hidden]){display:grid;gap:14px}
  .mobile-nav a{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em}
  .hero{grid-template-columns:1fr;min-height:auto;padding:56px 24px 40px}
  .hero-right{order:1;justify-content:center}.hero-left{order:2}
  .hero-right img{width:min(100%,608px)}
  .hero-kicker{margin-top:4px}
  .quicklinks{margin-top:40px}
  .home-section .grid2,.feature-grid,.about-hero-grid,.story-grid,.craft-grid,.visit-grid,.contact-grid,.product-grid{grid-template-columns:1fr}
  .about-hero-copy{padding-bottom:40px}.about-hero-image{margin-bottom:-16px}
  .story-image-wrap::before{display:none}
  .oven-grid{grid-template-columns:1fr}.oven-image,.oven-copy{grid-column:auto}.oven-copy{margin-left:0;padding:40px 0 0}
  .category-pair{gap:40px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:40px}
}
@media (max-width:639px){
  .container,.legal{width:min(calc(100% - 32px),var(--container))}
  .header-inner{height:96px}
  .site-logo img{height:64px}
  .header-right .order-link{
    display:inline-flex;
    padding:7px 11px;
    gap:5px;
    font-size:9px;
    letter-spacing:.06em;
    white-space:nowrap;
  }
  .header-right .order-link .icon{width:15px;height:15px}
  .hero{padding-inline:16px}
  .hero-wordmark{max-width:100%}
  .hero-actions>a{width:100%}
  .quick-grid,.category-pair,.assort-grid{grid-template-columns:1fr}
  .quick-card h2{font-size:24px}
  .category-pair article:nth-child(2){margin-top:0}
  .page-intro h1,.contact-grid h1{font-size:42px}
  .about-hero h1{font-size:42px}
  .story-grid h2,.craft-grid h2,.oven-copy h2,.visit h2{font-size:34px}
  .footer-grid{grid-template-columns:1fr}
  .footer-row{align-items:flex-start;flex-direction:column}
  .bagerlaug{height:220px}
}


/* === FINAL HOMEPAGE CONTINUITY FIX ===
   The approved prototype uses connected pale-pink surfaces. The lower
   homepage sections must not look like separate pieces with white bands
   between them or before the footer. */
.home-about,
.home-visit{
  background:var(--pink-soft);
  margin:0;
  overflow:hidden;
}

/* The original React version relied on stacked curve layers. In the static
   build the curve SVGs could fall behind the isolated section and expose the
   page background. Keep them in the section's own stacking context. */
.home-about > .curve,
.home-visit > .curve{
  z-index:0;
}
.home-about > .container,
.home-visit > .container{
  position:relative;
  z-index:1;
}

/* Make the two sections physically overlap a little so no sub-pixel or
   stacking-context seam can appear between the pink surfaces. */
.home-visit{
  margin-top:-2px;
}

/* The footer is the same approved pink and joins the final homepage section
   directly - no white separator strip. */
.home-visit + .site-footer{
  margin-top:-2px;
  border-top:0;
}

/* On the homepage, the decorative lower curve must stay pink and merge into
   the footer rather than reveal a white band. */
.home-visit > .curve.bottom{
  bottom:-1px;
}

/* Mobile header: keep the Bestil online CTA visible, like the approved
   prototype, with hamburger left, logo centered and CTA right. */
@media (max-width:639px){
  .header-inner{
    grid-template-columns:1fr auto 1fr;
    gap:8px;
  }
  .header-left{justify-content:flex-start}
  .site-logo{justify-self:center}
  .header-right{justify-content:flex-end;min-width:0}
  .header-right .order-link{
    display:inline-flex !important;
    padding:7px 10px;
    font-size:8.5px;
    letter-spacing:.05em;
    gap:4px;
  }
  .header-right .order-link .icon{
    width:14px;
    height:14px;
  }
}


/* === v4: match approved homepage lower transition === */
.home-visit{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--background) !important;
  margin-top:-1px;
  padding-top:150px;
  padding-bottom:150px;
}
.home-visit::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:-3%;
  right:-3%;
  top:-84px;
  height:185px;
  background:var(--pink-soft);
  border-radius:0 0 52% 48% / 0 0 42% 38%;
  transform:rotate(-1.2deg) scaleX(1.03);
  transform-origin:center;
}
.home-visit::after{
  content:"";
  position:absolute;
  z-index:-1;
  left:-5%;
  right:-5%;
  bottom:-106px;
  height:230px;
  background:var(--pink-soft);
  border-radius:48% 52% 0 0 / 44% 38% 0 0;
  transform:rotate(2.6deg) scaleX(1.04);
  transform-origin:center;
}
.home-visit > .container{
  position:relative;
  z-index:1;
}
.home-visit .section-image{
  object-position:center 58%;
}
.home-visit + .site-footer{
  margin-top:-1px;
  background:var(--pink-soft);
}

@media (max-width:1023px){
  .home-visit{padding-top:125px;padding-bottom:130px}
  .home-visit::before{top:-70px;height:155px}
  .home-visit::after{bottom:-92px;height:195px}
}
@media (max-width:639px){
  .home-visit{padding-top:105px;padding-bottom:115px}
  .home-visit::before{top:-60px;height:130px;transform:rotate(-2deg) scaleX(1.06)}
  .home-visit::after{bottom:-76px;height:160px;transform:rotate(3.4deg) scaleX(1.08)}
}


/* v5 mobile header collision fix */
@media (max-width:639px){
  .header-inner{grid-template-columns:44px minmax(0,1fr) auto;gap:6px;padding-left:8px;padding-right:8px}
  .header-left{width:44px}
  .mobile-toggle{padding:6px;font-size:21px}
  .site-logo{min-width:0;justify-self:center}
  .site-logo img{display:block;height:auto;width:min(210px,100%);max-height:58px;object-fit:contain}
  .header-right{min-width:max-content}
  .header-right .order-link{padding:7px 9px;font-size:8px;letter-spacing:.045em;gap:3px}
  .header-right .order-link .icon{width:13px;height:13px}
}
@media (max-width:420px){
  .site-logo img{width:min(175px,100%);max-height:52px}
  .header-right .order-link{padding:7px 8px;font-size:7.5px}
}

/* v5 payment marks - compact brand-like marks instead of generic grey pills */
.payment-list{align-items:center;gap:12px}
.payment-logo{height:30px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;background:#fff;border:1px solid rgba(40,39,42,.12);border-radius:5px;padding:4px 9px;line-height:1;color:#222}
.payment-logo.dankort{font-weight:900;font-style:italic;letter-spacing:-.06em;font-size:15px;text-transform:lowercase}
.payment-logo.visa{font-family:Arial,sans-serif;font-weight:900;font-style:italic;font-size:17px;letter-spacing:-.04em}
.payment-logo.electron{font-family:Arial,sans-serif;font-weight:800;font-size:10px;letter-spacing:-.02em}
.payment-logo.mastercard{gap:0;padding-inline:8px}
.payment-logo.mastercard i{display:block;width:15px;height:15px;border-radius:50%;background:#555}
.payment-logo.mastercard i+i{margin-left:-5px;background:#999;mix-blend-mode:multiply}
.payment-logo.maestro{gap:0;padding-inline:8px}
.payment-logo.maestro i{display:block;width:15px;height:15px;border-radius:50%;border:2px solid #555;background:transparent}
.payment-logo.maestro i+i{margin-left:-5px;border-color:#999}
.payment-logo.mobilepay{font-family:Arial,sans-serif;font-weight:700;font-size:13px;letter-spacing:-.02em}
.payment-logo.mobilepay::before{content:'✓';display:inline-grid;place-items:center;width:17px;height:17px;margin-right:5px;border-radius:4px;background:#4a90e2;color:white;font-size:12px;font-weight:900;transform:skew(-8deg)}


/* Official payment brand assets */
.payment.payment-logo{
  min-width:92px;
  height:34px;
  padding:4px 10px;
}
.payment.payment-logo img{
  display:block;
  width:auto;
  max-width:100%;
  height:22px;
  object-fit:contain;
}

/* v7 - use supplied official MobilePay artwork, no generated icon/text */
.payment-logo.mobilepay::before{content:none!important;display:none!important}
.payment-logo.mobilepay{padding:3px 8px;min-width:94px}
.payment-logo.mobilepay img{display:block;width:88px;height:24px;max-width:none;object-fit:contain}

/* v8 - MobilePay visual sizing */
.payment-logo.mobilepay{min-width:118px;padding:2px 8px;overflow:hidden}
.payment-logo.mobilepay img{width:112px;height:30px;max-width:none;object-fit:contain;transform:scale(2.15);transform-origin:center}


/* FINAL QA - stronger header navigation */
.site-header nav a, .desktop-nav a, .header-nav a, .main-nav a { font-weight: 700; }

/* FINAL mobile QA from 22-08 */
@media (max-width: 640px){
  /* Keep all payment brands on one horizontal row on mobile. */
  .payment-list{
    flex-wrap:nowrap;
    gap:6px;
    width:100%;
    overflow:visible;
  }
  .payment.payment-logo,
  .payment-logo{
    flex:0 1 auto;
    min-width:0;
    height:27px;
    padding:3px 6px;
  }
  .payment-logo.dankort{font-size:13px}
  .payment-logo.visa{font-size:15px}
  .payment-logo.electron{font-size:9px}
  .payment-logo.mastercard,
  .payment-logo.maestro{padding-inline:6px}
  .payment-logo.mastercard i,
  .payment-logo.maestro i{width:13px;height:13px}
  .payment-logo.mobilepay{min-width:88px;padding:2px 5px}
  .payment-logo.mobilepay img{width:82px;height:23px;transform:scale(2.15)}

  /* Phone numbers must never split between lines. */
  a[href^="tel:"]{white-space:nowrap;display:inline-block}

  /* Keep Graphiva credit together on the second line of the copyright. */
  .copyright a{white-space:nowrap;display:inline-block}
}


/* Cookie consent */
.cookie-banner[hidden],.cookie-modal[hidden],.cookie-overlay[hidden]{display:none!important}
.cookie-banner{
  position:fixed;z-index:1000;left:20px;right:20px;bottom:20px;max-width:760px;margin:auto;
  border:1px solid rgba(40,39,42,.12);border-radius:14px;background:rgba(251,240,241,.98);
  box-shadow:0 24px 70px rgba(0,0,0,.18);padding:22px;opacity:0;transform:translateY(14px);
  transition:opacity .18s ease,transform .18s ease;
}
.cookie-banner.is-visible{opacity:1;transform:none}
.cookie-banner h2{margin:0;font-size:20px;text-transform:uppercase;letter-spacing:.04em}
.cookie-banner p{margin:9px 0 0;font-size:13.5px;line-height:1.55;color:rgba(40,39,42,.78)}
.cookie-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.cookie-action{min-height:42px;border-radius:999px;padding:0 18px;border:1px solid rgba(40,39,42,.25);background:transparent;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;cursor:pointer}
.cookie-action.primary{background:var(--primary);border-color:var(--primary);color:#fff}
.cookie-action.reject{background:var(--background)}
.cookie-action.settings{border-color:transparent;text-decoration:underline;text-underline-offset:4px;padding-inline:8px}
.cookie-policy-link{display:inline-block;margin-top:12px;font-size:12px;text-decoration:underline;text-underline-offset:3px;color:rgba(40,39,42,.7)}
.cookie-overlay{position:fixed;z-index:1001;inset:0;background:rgba(24,23,25,.42)}
.cookie-modal{position:fixed;z-index:1002;left:50%;top:50%;transform:translate(-50%,-50%);width:min(calc(100% - 32px),620px);max-height:min(82vh,720px);overflow:auto;background:var(--background);border-radius:14px;border:1px solid var(--hairline);box-shadow:0 30px 90px rgba(0,0,0,.24);padding:28px}
.cookie-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.cookie-modal h2{margin:0;font-size:26px;text-transform:uppercase;letter-spacing:.05em}
.cookie-close{border:0;background:transparent;font-size:26px;line-height:1;cursor:pointer;padding:0 4px}
.cookie-modal>p{font-size:13.5px;line-height:1.6;color:rgba(40,39,42,.75)}
.consent-category{margin-top:20px;padding-top:20px;border-top:1px solid var(--hairline)}
.consent-row{display:flex;justify-content:space-between;align-items:center;gap:24px}
.consent-row h3{margin:0;font-size:16px}
.consent-category p{margin:7px 0 0;font-size:13px;line-height:1.55;color:rgba(40,39,42,.72)}
.consent-state{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--primary-hover)}
.consent-toggle{position:relative;width:48px;height:26px;flex:none}
.consent-toggle input{position:absolute;opacity:0;pointer-events:none}
.consent-toggle span{position:absolute;inset:0;border-radius:999px;background:#d7d4d6;cursor:pointer;transition:.18s}
.consent-toggle span::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 5px rgba(0,0,0,.22);transition:.18s}
.consent-toggle input:checked+span{background:var(--primary)}
.consent-toggle input:checked+span::after{transform:translateX(22px)}
.cookie-modal-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
body.cookie-modal-open{overflow:hidden}
.map-consent-placeholder{width:100%;height:100%;min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:28px;text-align:center;background:var(--pink-soft);border:1px solid var(--hairline)}
.map-consent-placeholder strong{text-transform:uppercase;letter-spacing:.06em}
.map-consent-placeholder p{margin:0;max-width:44ch;font-size:13px;line-height:1.55;color:rgba(40,39,42,.72)}
.map-consent-placeholder a,.cookie-inline-settings{font-size:12px;text-decoration:underline;text-underline-offset:3px}
.cookie-inline-settings{border:0;background:transparent;cursor:pointer;color:var(--primary-hover)}
.footer-cookie-settings{border:0;background:transparent;padding:0;font:inherit;color:inherit;cursor:pointer}
@media(max-width:639px){
  .cookie-banner{left:10px;right:10px;bottom:10px;padding:18px}
  .cookie-actions{display:grid;grid-template-columns:1fr 1fr}
  .cookie-action{padding-inline:10px}
  .cookie-action.settings{grid-column:1/-1}
  .cookie-modal{padding:22px}
}

/* Official Fødevarestyrelsen control-report mark */
.control-report-item{margin-top:6px}
.control-report-link{display:inline-block;line-height:0}
.control-report-link img{display:block;width:82px;height:auto;max-width:100%}
.control-report-link:focus-visible{outline:2px solid var(--primary);outline-offset:4px;border-radius:2px}
@media (max-width:700px){.control-report-link img{width:76px}}


/* Keep payment-logo row visually consistent: MobilePay displayed monochrome */
img[src*="mobilepay" i],
img[alt*="mobilepay" i],
.mobilepay img,
.payment-logo.mobilepay {
  filter: grayscale(1) saturate(0);
}


/* === FINAL CTA ENHANCEMENT: BESTIL ONLINE === */
.site-header .order-link{
  padding:10px 20px;
  gap:9px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.09em;
  min-height:44px;
}
.site-header .order-link .icon{
  width:21px;
  height:21px;
  stroke-width:2;
}

@media (max-width:639px){
  .site-header .order-link{
    display:inline-flex !important;
    padding:8px 11px;
    gap:6px;
    min-height:38px;
    font-size:9px;
    font-weight:800;
    letter-spacing:.055em;
    white-space:nowrap;
    max-width:100%;
  }
  .site-header .order-link .icon{
    width:17px;
    height:17px;
    flex:0 0 auto;
  }
  .header-inner{
    grid-template-columns:minmax(38px,1fr) minmax(0,auto) minmax(118px,1fr);
    gap:6px;
  }
  .site-logo{
    max-width:min(44vw,230px);
  }
  .site-logo img{
    max-width:100%;
    height:auto;
  }
}



/* === FINAL BUTTON FINISH ===
   Wiuff: square/rectangular CTA language inspired by the previous site.
   Keep a very small radius so the buttons feel sharp without looking broken. */
:root{
  --button-radius:4px;
}

/* Shared button geometry */
.btn,
.btn-primary,
.btn-ghost,
.order-link,
.hero-actions .contact,
.hero-actions .shop,
.home-contact-actions a,
.cookie-action,
.cookie-inline-settings{
  border-radius:var(--button-radius) !important;
}

/* Do not let old pill utility override final direction */
.btn-pill{
  border-radius:var(--button-radius) !important;
}

/* Text + icon polish */
.btn,
.btn-primary,
.btn-ghost,
.order-link,
.hero-actions .contact,
.hero-actions .shop,
.home-contact-actions a,
.cookie-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  line-height:1;
  vertical-align:middle;
}

.btn .icon,
.btn-primary .icon,
.btn-ghost .icon,
.order-link .icon,
.hero-actions .contact .icon,
.hero-actions .shop .icon,
.home-contact-actions a .icon,
.cookie-action .icon{
  display:block;
  flex:0 0 auto;
  margin:0;
  vertical-align:middle;
}

/* Keep CTA labels optically centered */
.order-link,
.hero-actions .contact,
.hero-actions .shop,
.btn-primary,
.btn-ghost,
.home-contact-actions a{
  min-height:44px;
}

/* Header CTA remains stronger, but now square */
.site-header .order-link{
  border-radius:var(--button-radius) !important;
  padding:11px 20px;
  gap:10px;
}
.site-header .order-link .icon{
  width:22px;
  height:22px;
}

/* Hero buttons */
.hero-actions .contact,
.hero-actions .shop{
  padding:16px 30px;
}

/* Lower-page action buttons */
.home-contact-actions a{
  padding:13px 20px;
}

/* Cookie controls use same visual language */
.cookie-action{
  min-height:42px;
  padding:0 18px;
}

/* Mobile: preserve spacing and prevent logo/CTA overlap */
@media (max-width:639px){
  .site-header .order-link{
    border-radius:var(--button-radius) !important;
    min-height:36px;
    padding:8px 10px;
    gap:6px;
    font-size:8.5px;
    white-space:nowrap;
  }
  .site-header .order-link .icon{
    width:16px;
    height:16px;
  }

  .hero-actions .contact,
  .hero-actions .shop,
  .btn-primary,
  .btn-ghost,
  .home-contact-actions a{
    border-radius:var(--button-radius) !important;
  }
}



/* === FINAL CTA HIERARCHY FIX ===
   Bestil online is the primary action in the hero.
   Kontakt is intentionally secondary/outlined. */
.hero-actions .shop{
  background:var(--primary) !important;
  border:1px solid var(--primary) !important;
  color:#fff !important;
  padding:16px 34px !important;
  min-width:205px;
  font-weight:800 !important;
  gap:10px !important;
}

.hero-actions .shop:hover{
  opacity:.88;
}

.hero-actions .shop .icon{
  width:21px !important;
  height:21px !important;
  flex:0 0 auto;
}

.hero-actions .contact{
  background:transparent !important;
  color:var(--foreground) !important;
  border:1px solid rgba(40,39,42,.28) !important;
  padding:16px 26px !important;
  min-width:138px;
  font-weight:700 !important;
}

.hero-actions .contact:hover{
  background:rgba(251,240,241,.58) !important;
}

@media (max-width:639px){
  .hero-actions .shop{
    min-width:0;
    padding:13px 18px !important;
    gap:7px !important;
  }
  .hero-actions .shop .icon{
    width:18px !important;
    height:18px !important;
  }
  .hero-actions .contact{
    min-width:0;
    padding:13px 16px !important;
  }
}



/* === HEADER MENU SIZE INCREASE === */
.site-header nav a,
.desktop-nav a,
.header-nav a,
.main-nav a{
  font-size:14px;
  font-weight:800;
  letter-spacing:.06em;
}

@media (min-width:900px){
  .site-header nav,
  .desktop-nav,
  .header-nav,
  .main-nav{
    gap:24px;
  }
}

@media (max-width:639px){
  .mobile-menu a,
  .mobile-nav a{
    font-size:16px;
    font-weight:800;
  }
}



/* === MOBILE HERO ORDER FIX - actual Wiuff markup === */
@media (max-width:639px){
  section.container.hero{
    display:flex !important;
    flex-direction:column !important;
  }

  /* Put the left/text block first */
  section.container.hero > .hero-left{
    order:1 !important;
    width:100% !important;
  }

  /* Put the product visual after the CTA/text block */
  section.container.hero > .hero-right{
    order:2 !important;
    width:100% !important;
    margin-top:24px !important;
  }

  /* Inside the left block: brand/wordmark, then copy, then buttons */
  .hero-left{
    display:flex !important;
    flex-direction:column !important;
  }

  .hero-left .hero-wordmark{
    order:1 !important;
    margin:18px auto 10px !important;
    max-width:78% !important;
  }

  .hero-left .hero-kicker,
  .hero-left .eyebrow{
    order:2 !important;
    margin-top:8px !important;
  }

  .hero-left .hero-text,
  .hero-left .hero-subtitle,
  .hero-left p{
    order:3 !important;
  }

  .hero-left .hero-actions{
    order:4 !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    width:100% !important;
    margin-top:18px !important;
  }

  .hero-left .hero-actions .shop{
    order:1 !important;
    width:100% !important;
    min-height:50px !important;
  }

  .hero-left .hero-actions .contact{
    order:2 !important;
    width:100% !important;
    min-height:48px !important;
  }

  /* Product collage should no longer dominate the first screen */
  .hero-right{
    padding-top:0 !important;
  }

  .hero-right img{
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    object-fit:contain !important;
  }
}



/* === MOBILE HERO FINAL ORDER: PRODUCTS -> BUTTONS -> WIUFF LOGO/COPY === */
.hero-actions-mobile{
  display:none;
}

@media (max-width:639px){
  section.container.hero{
    display:flex !important;
    flex-direction:column !important;
  }

  /* 1. Products first */
  section.container.hero > .hero-right{
    order:1 !important;
    width:100% !important;
    margin:22px 0 14px !important;
    padding:0 !important;
  }

  section.container.hero > .hero-right img{
    display:block;
    width:100% !important;
    height:auto !important;
    object-fit:contain !important;
  }

  /* 2. Buttons second */
  section.container.hero > .hero-actions-mobile{
    order:2 !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    width:100% !important;
    margin:0 0 26px !important;
  }

  .hero-actions-mobile .shop{
    order:1 !important;
    width:100% !important;
    min-height:50px !important;
  }

  .hero-actions-mobile .contact{
    order:2 !important;
    width:100% !important;
    min-height:48px !important;
  }

  /* 3. Wiuff logo + supporting copy third */
  section.container.hero > .hero-left{
    order:3 !important;
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    padding-top:0 !important;
  }

  .hero-left .hero-wordmark{
    order:1 !important;
    margin:0 auto 18px !important;
    max-width:82% !important;
  }

  .hero-left .hero-kicker{
    order:2 !important;
  }

  .hero-left .hero-copy{
    order:3 !important;
  }

  /* Hide the original CTA block inside hero-left on mobile */
  .hero-left .hero-actions-desktop{
    display:none !important;
  }
}

@media (min-width:640px){
  .hero-actions-mobile{
    display:none !important;
  }
}



/* === DESKTOP HEADER MENU POSITION FINISH ===
   Pull the navigation slightly inward toward the visual center. */
@media (min-width:900px){
  .desktop-nav,
  .header-nav,
  .main-nav,
  .site-header nav{
    transform:translateX(22px);
  }
}