.bgs{
  --green-900:#21281A;--green-800:#323C27;--green-700:#566644;--green-600:#566644;
  --green-300:#A9B2A0;--green-200:#CBD1C6;--green-100:#EEF0EC;--green-50:#F5F7F2;
  --accent:#566644;--accent-hover:#465438;
  --paper:#FCFBF8;--paper-warm:#F7F5EF;--sand:#EFEBE2;
  --ink-heading:#3E3E37;--ink-body:#57564D;--ink-soft:#85847A;--ink-faint:#ABAA9F;--hairline:#E6E3D9;
  --font-serif:'Playfair Display','Times New Roman',Georgia,serif;
  --font-sans:'Nunito Sans','Segoe UI',system-ui,sans-serif;
  --container:1600px;--container-pad:3rem;--section-gap:9.5rem;--section-pad:clamp(48px,4.5vw,80px);--hero-h:min(94vh,960px);
  font-family:var(--font-sans);color:var(--ink-body);font-size:16px;line-height:1.65;font-weight:500;
}
/* paper background belongs on the PAGE wrapper, not on every section root (each section
   is a .bgs content type; putting it on .bgs painted paper over white/warm bands).
   Hardcoded hex: --paper is scoped to .bgs, and .page-cms is their parent so can't read it.
   overflow-x:clip trims the few-px overshoot of the 100vw full-bleed sections (100vw
   includes the scrollbar width) so desktop gets no stray horizontal scrollbar. `clip`
   (not hidden) creates no scroll container, so the sticky header is unaffected. */
.page-cms{background:#FCFBF8;overflow-x:clip;}
/* The warm paper background belongs to the branded full-width (1-column) pages.
   Multi-column CMS pages (404/no-route, account area, etc.) keep the page's own
   white background so the content box doesn't clash with it. */
.page-layout-2columns-left .page-cms,.page-layout-2columns-right .page-cms,.page-layout-3columns .page-cms{background:transparent;}
.bgs *,.bgs *::before,.bgs *::after{box-sizing:border-box;}
.bgs img{display:block;max-width:100%;margin:0;}
/* the CMS 'prose' class is stripped for this page (layout), so tile images are clean */
.bgs a{color:inherit;text-decoration:none;}
.bgs h1,.bgs h2,.bgs h3,.bgs h4,.bgs .serif{font-family:var(--font-serif);font-weight:500;color:var(--ink-heading);line-height:1.15;margin:0;text-wrap:balance;}
.bgs p{margin:0;}
.bgs .h-display{font-size:clamp(46px,4.4vw,82px);letter-spacing:-.018em;line-height:1.06;}
.bgs .h-1{font-size:clamp(36px,3vw,52px);height:auto;}
.bgs .h-2{font-size:clamp(28px,2.2vw,38px);height:auto;}
.bgs .lead{font-size:18px;line-height:1.75;max-width:62ch;}
.bgs .muted{color:var(--ink-soft);}

.bgs .container{max-width:var(--container);margin:0 auto;padding-left:var(--container-pad);padding-right:var(--container-pad);}
.bgs .section{margin-top:var(--section-gap);}
.bgs .bleed{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);}
.bgs .section-head{display:flex;flex-direction:column;gap:18px;margin-bottom:56px;}
.bgs .section-head.center{align-items:center;text-align:center;}
.bgs .section-head .between{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;width:100%;}

/* Buttons + link */
.bgs .btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;font-family:var(--font-sans);font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;padding:18px 38px;border:1px solid var(--accent);cursor:pointer;transition:background .2s,color .2s,border-color .2s;background:var(--accent);color:#FDFDFB;border-radius:0;}
.bgs .btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);}
.bgs .btn.btn-light{background:rgba(252,251,248,.94);border-color:rgba(252,251,248,.94);color:var(--green-800);}
.bgs .btn.btn-light:hover{background:#fff;border-color:#fff;}
.bgs .link-arrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-heading);border-bottom:1px solid var(--ink-faint);padding-bottom:6px;transition:color .2s,border-color .2s;}
.bgs .link-arrow::after{content:"→";font-size:15px;transition:transform .2s;}
.bgs .link-arrow:hover,.bgs a:hover .link-arrow{color:var(--accent);border-color:var(--accent);}
.bgs .link-arrow:hover::after,.bgs a:hover .link-arrow::after{transform:translateX(4px);}

/* Offset colour block behind image */
.bgs .offset-block{position:relative;overflow:visible;}
.bgs .offset-block::before{content:"";position:absolute;background:var(--sand);z-index:0;}
.bgs .offset-block>*{position:relative;z-index:1;}
.bgs .offset-block.o-br::before{right:-26px;bottom:-26px;width:78%;height:78%;}
.bgs .offset-block.o-tl::before{left:-26px;top:-26px;width:78%;height:78%;}
.bgs .offset-block.o-green::before{background:var(--green-100);}

/* HERO - full-bleed image, copy overlaid left (transparent theme header) */
.bgs .page-hero{position:relative;width:100vw;margin-left:calc(50% - 50vw);min-height:var(--hero-h);background:var(--paper-warm);}
.bgs .ph-media{position:absolute;inset:0;z-index:0;overflow:hidden;}
.bgs .ph-media img{width:100%;height:100%;object-fit:cover;}
.bgs .ph-media::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(180deg,var(--paper-warm) 0%,rgba(247,245,239,.96) 130px,rgba(247,245,239,.66) 320px,rgba(247,245,239,.28) 520px,rgba(247,245,239,.08) 680px),
  linear-gradient(90deg,var(--paper-warm) 0%,var(--paper-warm) 18%,rgba(247,245,239,.9) 40%,rgba(247,245,239,.55) 58%,rgba(247,245,239,.2) 76%,rgba(247,245,239,0) 92%),
  linear-gradient(0deg,rgba(247,245,239,.22),rgba(247,245,239,.22));}
.bgs .ph-copy{position:relative;z-index:3;display:flex;flex-direction:column;gap:26px;padding:200px var(--container-pad) 84px;}
.bgs .ph-copy .h-display{max-width:15em;}
.bgs .ph-copy .lead{max-width:56ch;}
/* Hero copy must start on the same vertical line as the body content.
   The hero is full-bleed (100vw) but body content sits inside TWO nested
   containers - .row-full-width-inner (@apply container) and then .container -
   so each contributes its own 3rem. A single container inset therefore lands
   48px too far left at every width below 1920. These offsets reproduce where
   body text actually starts; measured against .bgs .section.container:
   1280/1440 -> 96, 1700 -> 146, 1920 -> 208, 2560 -> 528. */
@media (min-width:1025px){.bgs .ph-copy{padding-left:96px;}}
@media (min-width:1600px){.bgs .ph-copy{padding-left:calc(50vw - 704px);}}
@media (min-width:1920px){.bgs .ph-copy{padding-left:calc(50vw - 752px);}}
.bgs .hero-actions{display:flex;align-items:center;gap:36px;margin-top:10px;flex-wrap:wrap;}

/* Marquee */
.bgs .marquee{overflow:hidden;padding:17px 0;background:var(--paper);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);width:100vw;margin-left:calc(50% - 50vw);}
.bgs .marquee-track{display:flex;width:max-content;animation:bgfMarquee 90s linear infinite;}
/* Each copy is at least a full viewport wide, so the two-copy + translateX(-50%)
   loop is seamless on ANY screen (the old copies were ~800px, narrower than a
   desktop, so the right side emptied out before the loop reset). The side padding
   is half the gap, so the seam between copies matches the gaps. On screens wider
   than one copy (2560px iMacs), space-around spreads the leftover width over every
   gap instead of piling it up at the seam; narrower screens have no leftover width,
   so they look as before. */
.bgs .marquee-seg{display:flex;align-items:center;gap:clamp(42px,9vw,150px);padding:0 clamp(21px,4.5vw,75px);white-space:nowrap;min-width:100vw;justify-content:space-around;}
.bgs .marquee-seg span:not(.m-dot){font-size:11.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-soft);}
.bgs .marquee-seg .m-dot{color:var(--green-300);font-size:8px;}
@keyframes bgfMarquee{to{transform:translateX(-50%);}}
/* Computers with the OS "animation effects" setting off report reduced motion (phones rarely do),
   so animation:none made the strip stand still on desktop only. Run it at a third of the speed
   instead, and pause it on hover for everyone. */
.bgs .marquee:hover .marquee-track{animation-play-state:paused;}
@media (prefers-reduced-motion:reduce){.bgs .marquee-track{animation-duration:270s;}}

/* Tre løfter */
.bgs .promise-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,3vw,52px);}
.bgs .promise{display:flex;flex-direction:column;}
.bgs .promise .pr-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--sand);}
.bgs .promise .pr-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.bgs .promise h3{margin-top:24px;font-size:23px;}
.bgs .promise p{margin-top:10px;max-width:38ch;}
.bgs .promise .link-arrow{margin-top:16px;align-self:flex-start;border-bottom-color:transparent;}

/* Serier */
.bgs .series-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;}
.bgs .series-card{display:flex;flex-direction:column;}
.bgs .series-card:nth-child(2),.bgs .series-card:nth-child(4){margin-top:64px;}
.bgs .series-card .sc-media{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--sand);}
.bgs .series-card .sc-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.16,1,.3,1);}
.bgs .series-card:hover .sc-media img{transform:scale(1.05);}
.bgs .series-card .sc-num{font-family:var(--font-serif);font-size:15px;color:var(--accent);margin-top:20px;}
.bgs .series-card .sc-name{font-family:var(--font-serif);font-size:21px;color:var(--ink-heading);margin-top:5px;transition:color .2s;}
.bgs .series-card:hover .sc-name{color:var(--accent);}
.bgs .series-card .sc-count{font-size:13px;color:var(--ink-soft);margin-top:3px;}

/* Spejlede 50/50-rækker */
.bgs .collage-row{display:grid;grid-template-columns:6fr 5fr;gap:clamp(48px,6vw,110px);align-items:center;}
.bgs .collage-row+.collage-row{margin-top:calc(var(--section-gap)*.58);}
.bgs .collage-row.flip{grid-template-columns:5fr 6fr;}
.bgs .collage-row.flip .collage-media{margin-top:calc(var(--section-gap)*-.18);}
.bgs .collage-media{position:relative;aspect-ratio:5/4;overflow:visible;}
.bgs .collage-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;}
.bgs .collage-copy{display:flex;flex-direction:column;gap:20px;max-width:460px;}
.bgs .collage-copy .btn{align-self:flex-start;margin-top:6px;}
/* Meta is a plain-text PB field (HTML is escaped), so the whole line carries the emphasis. */
.bgs .collage-meta{display:flex;flex-wrap:wrap;gap:10px 26px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--green-700);font-weight:600;}
.bgs .collage-meta strong{color:var(--green-700);font-weight:600;}
.bgs .collage-row.flip .collage-copy{justify-self:end;}

/* Månedens krukke */
.bgs .motm{background:var(--paper-warm);}
.bgs .motm-inner{display:grid;grid-template-columns:1.08fr 1fr;gap:clamp(56px,6vw,120px);align-items:center;padding-top:calc(var(--section-gap)*.78);padding-bottom:calc(var(--section-gap)*.78);}
.bgs .motm-env{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--sand);}
.bgs .motm-env img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.bgs .motm-copy{display:flex;flex-direction:column;gap:16px;max-width:470px;}
.bgs .motm-copy .m-kicker{font-family:var(--font-serif);font-size:clamp(26px,2.3vw,36px);color:var(--ink-heading);}
.bgs .motm-copy .m-name{font-family:var(--font-serif);font-size:clamp(46px,4.6vw,78px);line-height:1;color:var(--accent);margin-top:-4px;}
.bgs .motm-copy .m-sku{font-size:11.5px;letter-spacing:.16em;color:var(--ink-faint);}
.bgs .motm-specs{display:grid;grid-template-columns:1fr 1fr;gap:16px 28px;margin-top:8px;border-top:1px solid var(--hairline);padding-top:22px;}
.bgs .motm-specs div{display:flex;flex-direction:column;gap:3px;}
.bgs .motm-specs dt{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);}
.bgs .motm-specs dd{margin:0;font-size:15px;color:var(--ink-heading);}
.bgs .motm-copy .btn{align-self:flex-start;margin-top:10px;}

/* Produkt-rail */
.bgs .rail-wrap{position:relative;}
.bgs .rail{display:flex;gap:clamp(20px,2vw,34px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:4px;}
.bgs .rail::-webkit-scrollbar{display:none;}
.bgs .rail>.product-card{flex:0 0 clamp(240px,20vw,330px);scroll-snap-align:start;}
.bgs .rail-nav{display:flex;gap:10px;}
.bgs .rail-nav button{width:46px;height:46px;display:grid;place-items:center;background:none;border:1px solid var(--hairline);color:var(--ink-heading);font-size:17px;cursor:pointer;transition:border-color .2s,color .2s;}
.bgs .rail-nav button:hover{border-color:var(--accent);color:var(--accent);}
.bgs .product-card{display:flex;flex-direction:column;}
.bgs .product-card .pc-media{position:relative;aspect-ratio:4/5;background:var(--paper-warm);overflow:hidden;}
.bgs .product-card .pc-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:22px;mix-blend-mode:multiply;}
.bgs .product-card .pc-fav{position:absolute;top:10px;right:10px;z-index:2;width:38px;height:38px;display:grid;place-items:center;background:rgba(252,251,248,.92);color:var(--green-700);cursor:pointer;opacity:0;transition:opacity .2s;font-size:16px;}
.bgs .product-card:hover .pc-fav{opacity:1;}
.bgs .product-card .pc-body{padding-top:18px;display:flex;flex-direction:column;gap:5px;}
.bgs .product-card .pc-sku{font-size:11px;letter-spacing:.14em;color:var(--ink-faint);}
.bgs .product-card .pc-name{font-family:var(--font-serif);font-size:19px;color:var(--ink-heading);}
.bgs .product-card .pc-price{font-size:14px;font-weight:600;color:var(--green-700);margin-top:4px;}

/* Mosaik */
.bgs .mosaic{display:flex;align-items:center;justify-content:center;gap:12px;height:clamp(420px,56vh,600px);padding:0 12px;}
.bgs .mosaic a{position:relative;overflow:hidden;height:var(--mh,100%);flex:var(--mf,1);min-width:0;}
.bgs .mosaic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.16,1,.3,1);}
.bgs .mosaic a:hover img{transform:scale(1.05);}

/* Together we grow */
.bgs .tw{position:relative;overflow:hidden;background:var(--paper-warm);padding-bottom:clamp(300px,34vw,560px);}
.bgs .tw-bg{position:absolute;inset:0;z-index:0;}
.bgs .tw-bg img{width:100%;height:100%;object-fit:cover;object-position:center 62%;}
.bgs .tw-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--paper-warm) 0%,var(--paper-warm) 40%,rgba(247,245,239,.95) 54%,rgba(247,245,239,.78) 68%,rgba(247,245,239,.42) 84%,rgba(247,245,239,.12) 100%);}
.bgs .tw-content{position:relative;z-index:2;max-width:760px;margin:0 auto;padding:calc(var(--section-gap)*.8) var(--container-pad) 0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:32px;}
.bgs .tw-content h2{font-size:clamp(36px,3.6vw,62px);}
.bgs .tw-content p{max-width:56ch;}
.bgs .tw-stats{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:32px;max-width:1180px;margin:clamp(48px,5vw,80px) auto 0;padding:0 var(--container-pad);}
.bgs .stat{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;}
.bgs .stat .num{font-family:var(--font-serif);font-size:clamp(40px,3.4vw,56px);color:var(--accent);line-height:1;}
.bgs .stat .num sup{font-size:.45em;}
.bgs .stat .lbl{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#566644;}

/* Universer */
.bgs .edit-grid{display:grid;grid-template-columns:1.32fr 1fr;gap:clamp(26px,2.6vw,48px);}
.bgs .edit-card{display:flex;flex-direction:column;}
.bgs .edit-card:first-child{grid-row:1 / span 2;}
.bgs .edit-card:first-child .ec-media{aspect-ratio:4/5;}
.bgs .edit-card:first-child .ec-title{font-size:32px;}
.bgs .edit-card .ec-media{position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--sand);}
.bgs .edit-card .ec-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.16,1,.3,1);}
.bgs .edit-card:hover .ec-media img{transform:scale(1.06);}
.bgs .edit-card .ec-num{font-family:var(--font-serif);font-size:16px;color:var(--accent);margin-top:24px;}
.bgs .edit-card .ec-title{font-family:var(--font-serif);font-size:26px;color:var(--ink-heading);margin-top:6px;}
.bgs .edit-card .ec-text{font-size:15px;color:var(--ink-body);margin-top:10px;max-width:34ch;}
.bgs .edit-card .link-arrow{margin-top:18px;align-self:flex-start;border-bottom-color:transparent;}

/* Kataloger */
.bgs .cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:36px 32px;align-items:start;}
.bgs .cat-card{display:flex;flex-direction:column;gap:16px;}
.bgs .cat-cover{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;background:var(--sand);}
.bgs .cat-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:transform .8s cubic-bezier(.16,1,.3,1);}
.bgs .cat-card:hover .cat-cover img{transform:scale(1.05);}
.bgs .cat-cover .cc-badge{position:absolute;left:0;top:16px;z-index:2;background:var(--green-700);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:7px 14px;}
.bgs .cat-card .cc-title{font-family:var(--font-serif);font-size:20px;color:var(--ink-heading);transition:color .2s;}
.bgs .cat-card:hover .cc-title{color:var(--accent);}

/* Genveje */
.bgs .tp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2vw,34px);}
.bgs .tp-card{display:flex;flex-direction:column;}
.bgs .tp-media{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--sand);}
.bgs .tp-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.16,1,.3,1);}
.bgs .tp-card:hover .tp-media img{transform:scale(1.05);}
.bgs .tp-title{font-family:var(--font-serif);font-size:22px;color:var(--ink-heading);margin-top:18px;transition:color .2s;}
.bgs .tp-card:hover .tp-title{color:var(--accent);}
.bgs .tp-card p{font-size:14px;color:var(--ink-soft);margin-top:7px;max-width:32ch;}
.bgs .tp-card .link-arrow{margin-top:14px;align-self:flex-start;border-bottom-color:transparent;}

/* Instagram + nyhedsbrev */
.bgs .social{background:var(--paper-warm);display:flex;flex-direction:column;}
.bgs .section.social{margin-top:calc(var(--section-gap)*.5);}
.bgs .social-head{display:flex;flex-direction:column;align-items:center;gap:10px;padding:130px var(--container-pad) 34px;text-align:center;}
.bgs .insta-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;line-height:0;font-size:0;}
.bgs .insta-grid a{position:relative;aspect-ratio:1;overflow:hidden;}
.bgs .insta-grid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.16,1,.3,1),opacity .3s;}
.bgs .insta-grid a:hover img{transform:scale(1.06);opacity:.9;}
.bgs .newsletter{background:var(--paper-warm);}
.bgs .newsletter-inner{max-width:760px;margin:0 auto;padding:clamp(56px,5vw,84px) var(--container-pad) calc(var(--section-gap)*.66);display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;line-height:1.65;font-size:16px;}
.bgs .newsletter-form{display:flex;width:100%;max-width:560px;margin-top:14px;}
.bgs .input{font-family:var(--font-sans);font-size:15px;color:var(--ink-heading);background:#fff;border:1px solid var(--hairline);border-radius:0;padding:14px 16px;outline:none;transition:border-color .2s;}
.bgs .input:focus{border-color:var(--green-500,#758367);}
.bgs .newsletter-form .input{flex:1;min-width:0;border-right:none;}
.bgs .newsletter-choices{display:flex;gap:28px;font-size:14px;color:var(--ink-soft);}
.bgs .newsletter-choices label{display:flex;align-items:center;gap:8px;cursor:pointer;}
.bgs .newsletter-choices input{accent-color:var(--accent);width:15px;height:15px;border-radius:0;}

@media (max-width:1100px){
  .bgs .series-grid,.bgs .cat-grid,.bgs .tp-grid{grid-template-columns:1fr 1fr;}
  .bgs .edit-grid{grid-template-columns:1fr;}
  .bgs .edit-card:first-child{grid-row:auto;}
  .bgs .edit-card:first-child .ec-media,.bgs .edit-card .ec-media{aspect-ratio:16/10;}
  .bgs .series-card:nth-child(2),.bgs .series-card:nth-child(4){margin-top:0;}
  .bgs .collage-row,.bgs .collage-row.flip,.bgs .motm-inner{grid-template-columns:1fr;}
  .bgs .collage-row.flip .collage-media{margin-top:0;}
  .bgs .collage-row+.collage-row{margin-top:calc(var(--section-gap)*.5);}
  .bgs .collage-row.flip .collage-copy{justify-self:start;}
  .bgs .tw-stats{grid-template-columns:1fr 1fr;gap:40px 24px;}
  .bgs .tw{padding-bottom:clamp(220px,44vw,360px);}
  .bgs .mosaic{height:auto;flex-wrap:wrap;}
  .bgs .mosaic a{height:220px;flex:1 1 40%;}
  .bgs .insta-grid{grid-template-columns:repeat(3,1fr);}
}
/* 3-card "Kvalitet hele vejen" grid: go 3-col -> 1-col, skipping the 2-col stage
   that left the 3rd card ("Pålidelig levering") alone with a void (audit 12.7). */
@media (max-width:900px){
  .bgs .promise-grid{grid-template-columns:1fr;}
}
@media (max-width:1000px){
  .bgs .page-hero{min-height:auto;}
  .bgs .ph-copy{padding:150px var(--container-pad) 60px;max-width:none;}
}
@media (max-width:640px){
  .bgs .promise-grid,.bgs .series-grid,.bgs .cat-grid,.bgs .tp-grid{grid-template-columns:1fr;}
  .bgs .newsletter-form{flex-direction:column;gap:12px;}
  .bgs .newsletter-form .input{border-right:1px solid var(--hairline);}
  .bgs .newsletter-form .btn{width:100%;}
  .bgs .motm-specs{grid-template-columns:1fr;}
  /* section heading + "see all" link stack (link below heading, not squeezed beside it) */
  .bgs .section-head .between{flex-direction:column;align-items:flex-start;gap:14px;}
}

/* genveje: white full-bleed band (client: not the paper page colour) */
.bgs .tp-section{position:relative;isolation:isolate;}
.bgs .tp-section::before{content:"";position:absolute;top:calc(var(--section-gap) * -0.5);bottom:calc(var(--section-gap) * -0.5);left:50%;transform:translateX(-50%);width:100vw;background:#fff;z-index:-1;}

/* native product widget rail — a single row of 5 clean tiles */
.bgs .bg-rail-native .block-products-list .block-title{display:none;}
/* Product rail = a real horizontal SLIDER (swipe / scroll-snap) instead of a
   rigid grid — restores the "carousel" the content type asks for and fixes the
   cramped 2-col grid on mobile. */
.bgs .bg-rail-native .block-content > div.grid{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;gap:24px!important;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:12px;scrollbar-width:thin;scroll-padding-left:2px;}
.bgs .bg-rail-native .product-item{margin:0!important;flex:0 0 auto!important;width:calc((100% - 96px) / 5)!important;scroll-snap-align:start;}
.bgs .bg-rail-native .product-item-photo{display:block;background:#fff;border:1px solid var(--hairline);overflow:hidden;}
.bgs .bg-rail-native .product-item-photo img{display:block;width:100%;height:auto;}
@media (max-width:1100px){.bgs .bg-rail-native .product-item{width:calc((100% - 48px) / 3)!important;}}
/* Phones: exactly 2 products in view (same as the old grid) — the slider still
   scrolls for the rest, no half-product peek. */
@media (max-width:768px){.bgs .bg-rail-native .product-item{width:calc((100% - 24px) / 2)!important;}}


/* ============ custom content type variant hooks (configurable via form selects) ============ */
/* feature (collage 50/50): image side + offset colour driven by data-attributes */
.bgs-feature .section{margin-top:0;}
.bgs-feature .collage-row[data-side="right"]{grid-template-columns:5fr 6fr;}
.bgs-feature .collage-row[data-side="right"] .collage-media{order:2;}
.bgs-feature .collage-row[data-side="right"] .collage-copy{order:1;justify-self:end;}
.bgs-feature .collage-media[data-offset="sand"],.bgs-feature .collage-media[data-offset="green"]{position:relative;overflow:visible;}
.bgs-feature .collage-media[data-offset="sand"]::before,.bgs-feature .collage-media[data-offset="green"]::before{content:"";position:absolute;z-index:0;width:78%;height:78%;}
.bgs-feature .collage-media[data-offset="sand"]::before{right:-26px;bottom:-26px;background:var(--sand);}
.bgs-feature .collage-media[data-offset="green"]::before{left:-26px;top:-26px;background:var(--green-100);}
.bgs-feature .collage-media img{position:relative;z-index:1;}
.bgs-feature .collage-meta:empty{display:none;}
/* section shells reset margin-top since each is its own content type inside a row */
.bgs-cards .section,.bgs-statband .section,.bgs-mosaic .section,.bgs-series .section,.bgs-catalogs .section,.bgs-blog .section{margin-top:0;}
/* dynamic-section preview placeholder (stage only) */
.bgs .bgs-dyn-ph{padding:40px;border:1px dashed var(--green-300);background:var(--green-50);text-align:center;color:var(--ink-soft);font-size:14px;letter-spacing:.04em;}

/* ============ fixes 2026-07-29 ============ */
/* mosaic: staggered heights (master has no inline --mh/--mf) + contained */
.bgs-mosaic .mosaic{max-width:var(--container);margin:0 auto;}
.bgs-mosaic .mosaic a:nth-child(1){--mh:72%;--mf:2;}
.bgs-mosaic .mosaic a:nth-child(2){--mh:100%;--mf:2.4;}
.bgs-mosaic .mosaic a:nth-child(3){--mh:58%;--mf:1.5;}
.bgs-mosaic .mosaic a:nth-child(4){--mh:86%;--mf:2;}
.bgs-mosaic .mosaic a:nth-child(5){--mh:66%;--mf:1.5;}
/* gap between the last feature (Håndlavet) and Together we grow */
.bgs-statband{display:block;margin-top:var(--section-gap);}
/* marquee: hide empty term slots + their trailing dot */
.bgs-marquee .marquee-seg span:empty{display:none;}
.bgs-marquee .marquee-seg span:empty + .m-dot{display:none;}
/* cards: hide the section-head when the heading is empty, and hide an empty "see all" arrow */
.bgs-cards .link-arrow:empty{display:none;}
.bgs-cards .section-head:has(.h-1:empty){display:none;}
/* cards white-band variant (e.g. Genveje) */
.bgs-cards section[data-variant="white"]{position:relative;isolation:isolate;}
.bgs-cards section[data-variant="white"]::before{content:"";position:absolute;top:calc(var(--section-pad)*-1);bottom:calc(var(--section-pad)*-1);left:50%;transform:translateX(-50%);width:100vw;background:#fff;z-index:-1;}
/* mobile: mirrored (image-right) feature must stack 100% like the normal one */
@media (max-width:1100px){
  .bgs-feature .collage-row[data-side="right"]{grid-template-columns:1fr;}
  .bgs-feature .collage-row[data-side="right"] .collage-media,
  .bgs-feature .collage-row[data-side="right"] .collage-copy{order:0;justify-self:start;}
}
/* native Products rail: heading was rendering at the tiny default h2 size — give it
   the design section-heading size + align the whole rail to the container */
.bgs.bg-rail-native{max-width:var(--container);margin:0 auto;padding:var(--section-pad) var(--container-pad);}
.bgs.bg-rail-native h2{font-size:clamp(36px,3vw,52px);line-height:1.1;margin:0 0 36px;}

/* ============ default section padding 2026-07-29 ============ */
/* Every section (content-type root) gets baked-in top/bottom padding so the client
   never has to add margins/padding per-section in PageBuilder. Full-bleed bands and
   sections that already pad themselves are reset below. */
.page-cms .bgs{padding-top:var(--section-pad);padding-bottom:var(--section-pad);}
/* hero sits full-bleed under the transparent header; marquee is a thin strip that hugs
   the hero; motm + statband(tw) are self-padded warm bands — keep their existing rhythm */
.page-cms .bgs-hero,
.page-cms .bgs-marquee,
.page-cms .bgs-motm,
.page-cms .bgs-statband{padding-top:0;padding-bottom:0;}