.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;max-width:1080px;display:flex;flex-direction:column;gap:26px;padding:200px var(--container-pad) 84px max(var(--container-pad),calc((100vw - var(--container))/2 + var(--container-pad)));}
.bgs .ph-copy .h-display{max-width:15em;}
.bgs .ph-copy .lead{max-width:56ch;}
.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). On screens
   wider than the terms, space-around spreads them evenly; the 21px side padding
   keeps the gap identical across the seam between copies. */
.bgs .marquee-seg{display:flex;align-items:center;gap:42px;padding:0 21px;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%);}}
@media (prefers-reduced-motion:reduce){.bgs .marquee-track{animation:none;}}

/* 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;}
.bgs .collage-meta{display:flex;flex-wrap:wrap;gap:10px 26px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);}
.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:3/4;overflow:hidden;background:var(--sand);}
.bgs .cat-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;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;}