/* bm_pagebuilder — front office.
 * Most section-level styling lives in the theme. This file adds the new
 * v3.0 row/column/widget primitives + product grid + product slider.
 * The editorial section styles (v1.6.0) are appended at the bottom, all
 * scoped under .bm-pagebuilder. Their PALETTE + FONT are neutral defaults
 * (see the .bm-pagebuilder var block) — override them in your theme to
 * re-skin every section. */

.bm-pagebuilder { display: contents; }

/* ====== Rows (v3.0) ====== */
.bm-row { width: 100%; }
.bm-row__inner {
  display: flex; flex-wrap: wrap; gap: 16px;
  max-width: 1450px; margin: 0 auto; padding: 0 16px;
}
.bm-row--full .bm-row__inner { max-width: none; padding: 0; }
.bm-col { display: flex; flex-direction: column; gap: 12px; box-sizing: border-box; }

@media (max-width: 768px) {
  .bm-row__inner { flex-direction: column; }
  /* Column-direction flex: flex-basis maps to HEIGHT, so the desktop
     `flex:0 0 100%` (meant to set width) would force each column to 100% of an
     indefinite container height and collapse when its content is out of flow.
     Use auto basis + width:100% to stack columns full-width by content height. */
  .bm-col { flex: 0 0 auto !important; max-width: 100% !important; width: 100%; }
}

/* ====== Product widgets ====== */
.bm-w--products { width: 100%; margin: 32px 0; }
.bm-w--products .bm-w__heading { font-size: 22px; font-weight: 700; margin: 0 0 4px; }
.bm-w--products .bm-w__lede { color: #6b7280; margin: 0 0 16px; font-size: 14px; }

.bm-w__products {
  display: grid; gap: 16px;
  grid-template-columns: repeat(var(--bmw-cols, 4), minmax(0, 1fr));
}
.bm-w--cols-2 .bm-w__products { --bmw-cols: 2; }
.bm-w--cols-3 .bm-w__products { --bmw-cols: 3; }
.bm-w--cols-4 .bm-w__products { --bmw-cols: 4; }
.bm-w--cols-6 .bm-w__products { --bmw-cols: 6; }

/* Slider variant: horizontal scroll with snap */
.bm-w__products--slider {
  display: flex !important; grid-template-columns: none !important;
  overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px;
  scrollbar-width: thin; padding-bottom: 8px;
}
.bm-w__products--slider .bm-w__product {
  flex: 0 0 calc(100% / var(--bmw-cols, 4) - 12px);
  scroll-snap-align: start;
}

@media (max-width: 900px) {
  .bm-w--cols-3 .bm-w__products,
  .bm-w--cols-4 .bm-w__products,
  .bm-w--cols-6 .bm-w__products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bm-w__products--slider .bm-w__product { flex-basis: calc(50% - 12px); }
}
@media (max-width: 480px) {
  .bm-w__products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .bm-w__products--slider .bm-w__product { flex-basis: calc(80% - 12px); }
}

.bm-w__product {
  display: flex; flex-direction: column; gap: 8px;
  background: #fff; border: 1px solid #f0f1f7; border-radius: 10px;
  padding: 12px; text-decoration: none; color: #15171c;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.bm-w__product:hover {
  border-color: #0553FE;
  box-shadow: 0 6px 24px rgba(5, 83, 254, .12);
  transform: translateY(-2px); text-decoration: none;
}
.bm-w__product-img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: contain;
  background: #fafafa; border-radius: 6px;
}
.bm-w__product-body { display: flex; flex-direction: column; gap: 4px; }
.bm-w__product-name { font-weight: 600; font-size: 13px; line-height: 1.3; }
.bm-w__product-price { color: #0553FE; font-weight: 700; font-size: 14px; }
.bm-w__empty { padding: 32px; text-align: center; color: #9ca3af; font-style: italic; }
.bm-w__more { text-align: right; margin-top: 12px; }
.bm-w__more a { color: #0553FE; font-weight: 600; font-size: 13px; text-decoration: none; }
.bm-w__more a:hover { text-decoration: underline; }

/* ============================================================
   FREJA SKIND — editorial sections (v1.6.0)
   Ported from index-v2-hero-b.html, scoped under .bm-pagebuilder.
   ============================================================ */

.bm-pagebuilder {
  /* NEUTRAL DEFAULTS — override these custom properties in your theme to
     re-skin every section. (Freja Skind's warm-sand palette + Geist font
     live in the theme's assets/css/custom.css, not in this module.) */
  --bg:#ffffff; --bg-cream:#f5f5f4; --bg-stone:#ebebe9; --bg-ink:#1a1a1a; --bg-walnut:#262626;
  --ink:#1a1a1a; --ink-soft:#555555; --ink-muted:#888888; --line:#dddddd; --line-soft:#ececec;
  --tan:#8a8a8a; --tan-deep:#5f5f5f; --tan-soft:#cccccc; --cream:#fafafa; --white:#ffffff;
  --serif:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --gutter:clamp(1.25rem,4vw,3rem); --sx:.5rem; --sm:1rem; --md:1.5rem; --lg:2.5rem;
  --xl:4rem; --2xl:6rem; --3xl:9rem; --max:1480px; --narrow:920px;
  --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1); --t:.35s; --ts:.55s;
  font-family:var(--sans); color:var(--ink); line-height:1.55; letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.bm-pagebuilder *,.bm-pagebuilder *::before,.bm-pagebuilder *::after { box-sizing:border-box; }
.bm-pagebuilder img { max-width:100%; height:auto; display:block; }
.bm-pagebuilder a { color:inherit; text-decoration:none; }
.bm-pagebuilder ::selection { background:var(--tan-soft); color:var(--bg-walnut); }
@keyframes bmpb-scroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ---- Section helpers ---- */
.bm-pagebuilder .section     { padding:var(--3xl) var(--gutter); background:var(--bg); }
.bm-pagebuilder .section--md  { padding:var(--2xl) var(--gutter); background:var(--bg); }
.bm-pagebuilder .section--sm  { padding:var(--xl) var(--gutter); background:var(--bg); }
.bm-pagebuilder .section--cream{ background:var(--bg-cream); }
.bm-pagebuilder .section--stone{ background:var(--bg-stone); }
.bm-pagebuilder .section--ink { background:var(--bg-walnut); color:var(--cream); }
/* ---- Unified mobile section rhythm — single source of truth ----
   Every PADDED content section shares the same vertical padding so the gap
   between sections is consistent. !important so this rhythm wins over any
   per-block inline _style padding (e.g. the mosaic's inline padding-top).
   Full-bleed sections (hero/story/botr/duo) stay edge-to-edge at 0. */
@media (max-width:900px){
  .bm-pagebuilder .section,
  .bm-pagebuilder .section--md,
  .bm-pagebuilder .section--sm,
  .bm-pagebuilder .statement,
  .bm-pagebuilder .usp-row {
    padding-top:var(--xl) !important;
    padding-bottom:var(--xl) !important;
  }
  .bm-pagebuilder .duo-section { padding-top:0 !important; padding-bottom:0 !important; }
}
/* width:100% + padding:0 neutralise the theme's Bootstrap .container (which
   otherwise constrains width below var(--max) and adds a 15px inner gutter),
   so every .container-based section lines up exactly with the var(--max)
   sections (.duo/.usp-row/.hero-frame) instead of sitting narrower/indented. */
.bm-pagebuilder .container        { max-width:var(--max); width:100%; margin:0 auto; padding-left:0; padding-right:0; }
.bm-pagebuilder .container--narrow{ max-width:var(--narrow); margin:0 auto; }
.bm-pagebuilder .head { margin-bottom:var(--xl); display:flex; align-items:end; justify-content:space-between; gap:var(--lg); flex-wrap:wrap; }
.bm-pagebuilder .head--center { justify-content:center; text-align:center; flex-direction:column; align-items:center; }
/* Section heading size reduced from clamp(1.9rem,3.8vw,3rem) (was 48px on
   desktop — read as huge in heavy HansenGrotesque) to a calm ~24px desktop /
   ~20px small-desktop. Mobile (<=900px) is further reduced in the cleanup
   block below. */
.bm-pagebuilder .head h2 { font-family:var(--serif); font-weight:500; font-size:clamp(1.25rem,1.6vw,1.5rem); line-height:1.15; letter-spacing:-.02em; color:var(--bg-walnut); max-width:720px; }
.bm-pagebuilder .head h2 .accent { color:var(--tan-deep); }
.bm-pagebuilder .head--center > p { color:var(--ink-soft); font-size:.97rem; max-width:520px; margin-top:var(--sx); }
.bm-pagebuilder .head-end p { color:var(--ink-soft); max-width:340px; font-size:.95rem; }
.bm-pagebuilder .head-eyebrow { font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--tan-deep); font-weight:700; display:block; margin-bottom:var(--sx); }
@media (max-width:900px){ .bm-pagebuilder .head { gap:0; margin-bottom:var(--md); } }

/* ---- Buttons ---- */
.bm-pagebuilder .btn { display:inline-flex; align-items:center; gap:.7rem; padding:1.05rem 1.85rem; font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; transition:all var(--t) var(--ease-out); border-radius:0; }
.bm-pagebuilder .btn svg { width:14px; height:14px; transition:transform var(--t) var(--ease-out); }
.bm-pagebuilder .btn:hover svg { transform:translateX(4px); }
.bm-pagebuilder .btn-primary { background:var(--bg-walnut); color:var(--cream); }
.bm-pagebuilder .btn-primary:hover { background:var(--tan-deep); }
.bm-pagebuilder .btn-ghost { color:var(--bg-walnut); padding:1.05rem var(--gutter) 1.05rem 0; display:inline-flex; align-items:center; font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.bm-pagebuilder .btn-ghost:hover { color:var(--tan-deep); border-color:var(--tan-deep); }
.bm-pagebuilder .btn-outline { background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.bm-pagebuilder .btn-outline:hover { background:var(--ink); color:var(--cream); }

/* ---- Hero B ---- */
.bm-pagebuilder .hero { position:relative; min-height:min(85vh,760px); overflow:hidden; background:var(--bg-walnut); color:var(--cream); display:flex; align-items:center; }
.bm-pagebuilder .hero-bg { position:absolute; inset:0; z-index:1; background:var(--bg-stone); }
.bm-pagebuilder .hero-bg img { width:100%; height:100%; object-fit:cover; object-position:center center; transform:scaleX(-1); transition:transform 10s var(--ease-out); }
.bm-pagebuilder .hero:hover .hero-bg img { transform:scaleX(-1) scale(1.03); }
.bm-pagebuilder .hero-veil { position:absolute; inset:0; z-index:2; background:linear-gradient(90deg,rgba(28,24,20,.55) 0%,rgba(28,24,20,0) 60%,rgba(28,24,20,0) 100%); }
/* max-width widened by 2 gutters so the padded content lands on the var(--max)
   band (aligns with .container/.usp-row/.duo, whose gutter comes from the
   section wrapper); keeps the gutter inset at viewports below the band. */
.bm-pagebuilder .hero-frame { position:relative; z-index:3; width:100%; max-width:calc(var(--max) + 2 * var(--gutter)); margin:0 auto; padding:var(--xl) var(--gutter); display:flex; justify-content:flex-start; }
.bm-pagebuilder .hero-headline { max-width:560px; text-align:left; }
.bm-pagebuilder .hero-headline h1 { font-family:var(--serif); font-weight:500; font-size:clamp(2.6rem,7vw,5.4rem); line-height:.95; letter-spacing:-.05em; text-transform:uppercase; color:var(--cream); margin-bottom:var(--sm); }
.bm-pagebuilder .hero-tag { font-family:var(--serif); font-weight:400; font-size:clamp(1rem,1.4vw,1.25rem); color:rgba(251,247,240,.85); margin-bottom:var(--md); letter-spacing:-.01em; }
.bm-pagebuilder .hero-pricerow { display:flex; flex-direction:column; align-items:flex-start; gap:.4rem; margin-bottom:var(--lg); }
.bm-pagebuilder .hero-pricerow .old-line { display:inline-flex; align-items:center; gap:.85rem; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(251,247,240,.6); font-weight:600; }
.bm-pagebuilder .hero-pricerow .strike { text-decoration:line-through; text-decoration-thickness:1px; color:rgba(251,247,240,.45); font-family:var(--serif); font-size:.95rem; letter-spacing:-.01em; text-transform:none; font-weight:400; }
.bm-pagebuilder .hero-pricerow .now { font-family:var(--serif); font-size:clamp(2.2rem,3.4vw,3rem); color:var(--cream); font-weight:600; letter-spacing:-.035em; line-height:1; }
.bm-pagebuilder .hero-pricerow .save { display:inline-flex; align-items:center; gap:.4rem; background:var(--tan); color:var(--bg-walnut); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; padding:.4rem .7rem; }
.bm-pagebuilder .hero-cta { display:inline-flex; align-items:center; gap:.7rem; background:var(--cream); color:var(--bg-walnut); padding:1.15rem 2.1rem; font-size:.95rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; transition:all var(--t) var(--ease-out); }
.bm-pagebuilder .hero-cta:hover { background:var(--tan); color:var(--bg-walnut); }
.bm-pagebuilder .hero-cta svg { width:14px; height:14px; transition:transform var(--t) var(--ease-out); }
.bm-pagebuilder .hero-cta:hover svg { transform:translateX(4px); }
@media (max-width:900px){
  .bm-pagebuilder .hero { min-height:620px; }
  .bm-pagebuilder .hero-bg img { object-position:70% center; }
  .bm-pagebuilder .hero-veil { background:linear-gradient(180deg,rgba(28,24,20,.15) 0%,rgba(28,24,20,.7) 80%); }
  .bm-pagebuilder .hero-frame { align-items:flex-end; padding-bottom:var(--lg); }
  .bm-pagebuilder .hero-headline h1 { font-size:clamp(2.2rem,9vw,3.4rem); }
  .bm-pagebuilder .hero-pricerow .now { font-size:1.8rem; }
}

/* ---- USP strip ---- */
/* Borders live on .usp-row (the var(--max) band) so the divider lines align with
   the page band; .usps stays the full-width wrapper that supplies the side gutter
   at narrow viewports. Vertical padding moved onto .usp-row with the borders. */
.bm-pagebuilder .usps { padding:0 var(--gutter); background:var(--bg); }
.bm-pagebuilder .usp-row { max-width:var(--max); margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:var(--lg); border-top:1px solid var(--line); padding:var(--md) 0; }
.bm-pagebuilder .usp { display:flex; align-items:center; gap:1rem; font-size:.85rem; color:var(--ink-soft); font-weight:500; }
.bm-pagebuilder .usp svg { width:24px; height:24px; color:var(--tan-deep); flex-shrink:0; }
.bm-pagebuilder .usp strong { color:var(--bg-walnut); display:block; font-size:.95rem; font-weight:600; margin-bottom:.05rem; }
@media (max-width:900px){ .bm-pagebuilder .usp-row { grid-template-columns:1fr 1fr; gap:var(--md); } .bm-pagebuilder .usp { font-size:.78rem; } }
@media (max-width:520px){ .bm-pagebuilder .usp-row { grid-template-columns:1fr 1fr; gap:var(--sm); } }

/* ---- Dame/Herre duo ---- */
.bm-pagebuilder .duo-section { padding:var(--sm) var(--gutter) 0; background:var(--bg); }
.bm-pagebuilder .duo { display:grid; grid-template-columns:1fr 1fr; gap:var(--sm); max-width:var(--max); margin:0 auto; }
/* NB: block, not flex. Safari ignores aspect-ratio on a flex container and
   sizes it from content, collapsing the card so the next row overlaps it.
   Block + aspect-ratio is honored everywhere; the body is pinned to the
   bottom via absolute positioning (replaces the old align-items:flex-end). */
.bm-pagebuilder .duo-card { position:relative; aspect-ratio:7/5; overflow:hidden; display:block; color:var(--cream); }
.bm-pagebuilder .duo-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease-out); }
.bm-pagebuilder .duo-card::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(28,24,20,.05) 30%,rgba(28,24,20,.7) 100%); }
.bm-pagebuilder .duo-card:hover img { transform:scale(1.04); }
.bm-pagebuilder .duo-body { position:absolute; left:0; right:0; bottom:0; z-index:2; padding:clamp(1.5rem,3vw,2.5rem); }
.bm-pagebuilder .duo-body small { font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600; opacity:.9; display:block; margin-bottom:var(--sx); }
.bm-pagebuilder .duo-body h3 { font-family:var(--serif); font-weight:500; font-size:clamp(1.9rem,3.6vw,2.8rem); line-height:1; letter-spacing:-.035em; margin-bottom:var(--sx); }
.bm-pagebuilder .duo-body .link { display:inline-flex; align-items:center; gap:.6rem; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; padding-bottom:.3rem; }
.bm-pagebuilder .duo-body .link svg { width:14px; height:14px; transition:transform var(--t) var(--ease-out); }
.bm-pagebuilder .duo-card:hover .link svg { transform:translateX(4px); }
@media (max-width:768px){ .bm-pagebuilder .duo { grid-template-columns:1fr; } .bm-pagebuilder .duo-card { aspect-ratio:3/4; } }

/* ---- Category mosaic ---- */
.bm-pagebuilder .cat-mosaic { display:grid; grid-template-columns:repeat(5,1fr); gap:var(--sm); max-width:var(--max); margin:0 auto; }
.bm-pagebuilder .cat-tile { position:relative; overflow:hidden; aspect-ratio:1/1; background:var(--bg-stone); display:block; color:var(--cream); transition:transform var(--ts) var(--ease-out); }
.bm-pagebuilder .cat-tile img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease-out),filter var(--t) var(--ease); }
.bm-pagebuilder .cat-tile::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(28,24,20,0) 30%,rgba(28,24,20,.7) 100%); transition:opacity var(--t) var(--ease); }
.bm-pagebuilder .cat-tile:hover img { transform:scale(1.06); }
.bm-pagebuilder .cat-tile-body { position:absolute; left:0; right:0; bottom:0; z-index:2; padding:1.4rem; display:flex; align-items:end; justify-content:space-between; gap:.6rem; }
.bm-pagebuilder .cat-tile-title { font-family:var(--serif); font-weight:500; font-size:clamp(1rem,1.5vw,1.3rem); line-height:1.05; letter-spacing:-.02em; }
.bm-pagebuilder .cat-tile-meta { font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; opacity:.85; margin-bottom:var(--sx); display:block; }
.bm-pagebuilder .cat-tile-arrow { width:40px; height:40px; border-radius:50%; background:rgba(251,247,240,.15); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); display:inline-flex; align-items:center; justify-content:center; transition:background var(--t) var(--ease),transform var(--t) var(--ease); flex-shrink:0; }
.bm-pagebuilder .cat-tile-arrow svg { width:18px; height:18px; stroke-width:1.6; }
.bm-pagebuilder .cat-tile:hover .cat-tile-arrow { background:var(--tan); color:var(--bg-walnut); transform:rotate(-45deg); }
@media (max-width:900px){ .bm-pagebuilder .cat-mosaic { grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){ .bm-pagebuilder .cat-mosaic { grid-template-columns:repeat(2,1fr); } }

/* ---- Product grid (editorial card) ---- */
.bm-pagebuilder .bm-w--products { margin:0; }
@media (max-width:900px){ .bm-pagebuilder .bm-w--products { padding-right:0; } }
.bm-pagebuilder .product-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--md) var(--sm); }
.bm-pagebuilder .product { position:relative; display:block; color:var(--ink); }
.bm-pagebuilder .product-media { position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--bg-cream); margin-bottom:var(--sm); max-height:540px; }
.bm-pagebuilder .product-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out); }
.bm-pagebuilder .product:hover .product-media img { transform:scale(1.04); }
.bm-pagebuilder .product-badge { position:absolute; top:.85rem; left:.85rem; background:var(--bg-walnut); color:var(--cream); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; padding:.4rem .65rem; font-weight:700; z-index:2; }
.bm-pagebuilder .product-badge--tan { background:var(--tan-deep); }
.bm-pagebuilder .product-badge--sale { background:#8B2F2F; color:var(--cream); font-size:.7rem; }
.bm-pagebuilder .product-wishlist { position:absolute; top:.85rem; right:.85rem; z-index:2; width:38px; height:38px; border-radius:50%; background:rgba(251,247,240,.92); display:inline-flex; align-items:center; justify-content:center; opacity:0; transform:translateY(-4px); transition:all var(--t) var(--ease-out); border:none; cursor:pointer; }
.bm-pagebuilder .product-wishlist svg { width:16px; height:16px; stroke-width:1.6; color:var(--ink); }
.bm-pagebuilder .product-wishlist:hover { background:var(--bg-walnut); }
.bm-pagebuilder .product-wishlist:hover svg { color:var(--cream); }
.bm-pagebuilder .product:hover .product-wishlist { opacity:1; transform:translateY(0); }
.bm-pagebuilder .product-quick { position:absolute; left:.85rem; right:.85rem; bottom:.85rem; background:var(--bg-walnut); color:var(--cream); text-align:center; padding:.85rem 1rem; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; opacity:0; transform:translateY(8px); transition:all var(--t) var(--ease-out); z-index:2; }
.bm-pagebuilder .product:hover .product-quick { opacity:1; transform:translateY(0); }
.bm-pagebuilder .product-brand { margin:0 0 .3rem; padding:0; text-align:start; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-muted); font-weight:600; }
.bm-pagebuilder .product-name { margin:0 0 .4rem; padding:0; text-align:start; font-family:var(--sans); font-size:.92rem; font-weight:500; color:var(--ink); line-height:1.35; }
.bm-pagebuilder .product-price { margin:0; padding:0; text-align:start; font-family:var(--serif); font-size:1.05rem; font-weight:600; color:var(--bg-walnut); letter-spacing:-.015em; display:flex; align-items:baseline; gap:.6rem; }
.bm-pagebuilder .product-price .old { font-size:.85rem; color:var(--ink-muted); text-decoration:line-through; font-family:var(--sans); font-weight:400; }
/* Slider variant (product_slider) — horizontal scroll-snap carousel + arrows. */
.bm-pagebuilder .bm-slider { position:relative; }
.bm-pagebuilder .product-grid--slider {
  display:flex; grid-template-columns:none;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  gap:var(--sm); padding-bottom:.25rem;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.bm-pagebuilder .product-grid--slider::-webkit-scrollbar { display:none; }
.bm-pagebuilder .product-grid--slider > .product { flex:0 0 clamp(220px,23%,300px); scroll-snap-align:start; scroll-snap-stop:always; }
/* Prev/next arrows — shown only when the track overflows (JS toggles .is-scrollable). */
.bm-pagebuilder .bm-slider__nav {
  position:absolute; top:40%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:50%; border:none;
  background:var(--bg-walnut); color:var(--cream);
  display:none; align-items:center; justify-content:center;
  z-index:5; cursor:pointer; box-shadow:0 8px 24px -8px rgba(28,24,20,.5);
  transition:background var(--t) var(--ease), color var(--t) var(--ease), opacity var(--t) var(--ease);
}
.bm-pagebuilder .bm-slider__nav svg { width:20px; height:20px; }
.bm-pagebuilder .bm-slider__nav--prev { left:-12px; }
.bm-pagebuilder .bm-slider__nav--next { right:-12px; }
.bm-pagebuilder .bm-slider.is-scrollable .bm-slider__nav { display:inline-flex; }
.bm-pagebuilder .bm-slider__nav:hover { background:var(--tan); color:var(--bg-walnut); }
.bm-pagebuilder .bm-slider__nav:disabled { opacity:0; pointer-events:none; }
@media (max-width:900px){ .bm-pagebuilder .product-grid--slider > .product { flex-basis:46%; } }
@media (max-width:520px){ .bm-pagebuilder .product-grid--slider > .product { flex-basis:78%; } }
@media (hover:none){ .bm-pagebuilder .bm-slider__nav { display:none !important; } }
@media (max-width:520px){ .bm-pagebuilder .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ---- Story ---- */
.bm-pagebuilder .story { display:grid; grid-template-columns:1.1fr 1fr; gap:0; background:var(--bg-walnut); min-height:560px; container-type:inline-size; }
.bm-pagebuilder .story-media { position:relative; overflow:hidden; background:var(--bg-stone); }
.bm-pagebuilder .story-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%; }
.bm-pagebuilder .story-content { padding:clamp(2.5rem,6vw,5rem); display:flex; flex-direction:column; justify-content:center; color:rgba(251,247,240,.85); }
/* Full-bleed split sections: image + background bleed to the screen edge,
   but the text content aligns to the same var(--max) grid as every other
   section. The text sits against the grid edge on its own side — story text
   is the right column (align right), botr--reverse text is the left column. */
.bm-pagebuilder .story-content { padding-right:max(var(--gutter),calc((100cqw - var(--max)) / 2)); }
.bm-pagebuilder .story-content h2 { font-family:var(--serif); font-weight:500; font-size:clamp(1.9rem,3.4vw,2.8rem); line-height:1.05; letter-spacing:-.035em; color:var(--cream); margin-bottom:var(--md); max-width:520px; }
.bm-pagebuilder .story-content h2 .accent { color:var(--tan); }
.bm-pagebuilder .story-content .lede { font-family:var(--serif); font-weight:500; font-size:1.2rem; line-height:1.5; color:var(--cream); margin-bottom:var(--md); max-width:520px; letter-spacing:-.02em; }
.bm-pagebuilder .story-content p { color:rgba(251,247,240,.7); max-width:520px; margin-bottom:var(--sm); font-size:.97rem; }
.bm-pagebuilder .story-sign { display:flex; align-items:center; gap:1rem; margin-top:var(--md); padding-top:1.5rem; border-top:1px solid rgba(216,192,160,.18); max-width:520px; }
.bm-pagebuilder .story-sign-name { font-family:var(--serif); font-size:1.3rem; color:var(--cream); font-weight:500; letter-spacing:-.025em; }
.bm-pagebuilder .story-sign-role { font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--tan-soft); font-weight:600; margin-top:.2rem; }
.bm-pagebuilder .story-actions { margin-top:var(--md); display:flex; gap:1.25rem; flex-wrap:wrap; align-items:center; }
.bm-pagebuilder .story-content .btn-outline { color:var(--cream); box-shadow:inset 0 0 0 1px var(--cream); }
.bm-pagebuilder .story-content .btn-outline:hover { background:var(--cream); color:var(--bg-walnut); }
.bm-pagebuilder .story-content .btn-ghost { color:var(--cream); border-color:var(--cream); }
.bm-pagebuilder .story-content .btn-ghost:hover { color:var(--tan); border-color:var(--tan); }
@media (max-width:900px){ .bm-pagebuilder .story { grid-template-columns:1fr; } .bm-pagebuilder .story-media { height:70vh; min-height:420px; } .bm-pagebuilder .story-content { padding:clamp(2.5rem,6vw,5rem) var(--gutter); } }

/* ---- Statement ---- */
.bm-pagebuilder .statement { text-align:center; padding:var(--3xl) var(--gutter); background:var(--bg-stone); color:var(--bg-walnut); position:relative; overflow:hidden; }
.bm-pagebuilder .statement::before { content:""; position:absolute; inset:auto 0 0 0; height:1px; background:linear-gradient(90deg,transparent,rgba(138,106,71,.35),transparent); }
.bm-pagebuilder .statement .container--narrow { position:relative; z-index:2; }
.bm-pagebuilder .statement-mark { font-family:var(--serif); font-size:4rem; color:var(--tan-deep); line-height:.5; display:inline-block; margin-bottom:var(--md); font-weight:400; }
.bm-pagebuilder .statement h2 { font-family:var(--serif); font-weight:500; font-size:clamp(1.7rem,3.6vw,2.6rem); line-height:1.25; letter-spacing:-.03em; margin-bottom:var(--md); color:var(--bg-walnut); }
.bm-pagebuilder .statement h2 .accent { color:var(--tan-deep); }
.bm-pagebuilder .statement-cite { font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--tan-deep); font-weight:600; }

/* ---- Best of the rest ---- */
.bm-pagebuilder .botr { display:grid; grid-template-columns:1.1fr 1fr; background:var(--bg-cream); min-height:580px; }
.bm-pagebuilder .botr--reverse { grid-template-columns:1fr 1.1fr; }
.bm-pagebuilder .botr--reverse .botr-media { order:2; }
.bm-pagebuilder .botr-media { position:relative; overflow:hidden; background:var(--bg-stone); }
.bm-pagebuilder .botr-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease-out); }
.bm-pagebuilder .botr-media:hover img { transform:scale(1.04); }
.bm-pagebuilder .botr-badge { position:absolute; top:var(--md); left:var(--md); z-index:2; background:var(--bg-walnut); color:var(--cream); padding:.65rem .95rem; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; font-weight:700; }
.bm-pagebuilder .botr-content { padding:clamp(2.5rem,6vw,5rem); display:flex; flex-direction:column; justify-content:center; }
/* botr (non-reverse) text is the right column → align to grid right;
   botr--reverse text is the left column → align to grid left. */
/* Edge inset goes on .botr (a full-width grid container) using 100% — which
   resolves against the scrollbar-excluded content width — so the text lands
   exactly on the var(--max) band. (100vw included the scrollbar, leaving the
   text ~half a scrollbar past the band at wide widths.) Cell padding on that
   side is zeroed so it isn't added on top. */
.bm-pagebuilder .botr:not(.botr--reverse) { padding-right:max(var(--gutter),calc((100% - var(--max)) / 2)); }
.bm-pagebuilder .botr--reverse { padding-left:max(var(--gutter),calc((100% - var(--max)) / 2)); }
.bm-pagebuilder .botr:not(.botr--reverse) .botr-content { padding-right:0; }
.bm-pagebuilder .botr--reverse .botr-content { padding-left:0; }
.bm-pagebuilder .botr-content h2 { font-family:var(--serif); font-weight:500; font-size:clamp(1.9rem,3.6vw,3rem); line-height:1.05; letter-spacing:-.035em; color:var(--bg-walnut); margin-bottom:var(--md); max-width:480px; }
.bm-pagebuilder .botr-content p { color:var(--ink-soft); max-width:480px; margin-bottom:var(--sm); font-size:1rem; line-height:1.65; }
.bm-pagebuilder .botr-actions { display:flex; gap:1rem; flex-wrap:wrap; margin-top:var(--md); }
@media (max-width:900px){ .bm-pagebuilder .botr,.bm-pagebuilder .botr--reverse { grid-template-columns:1fr; } .bm-pagebuilder .botr--reverse .botr-media { order:0; } .bm-pagebuilder .botr-media { min-height:380px; height:60vh; } .bm-pagebuilder .botr-content { padding:clamp(2.5rem,6vw,5rem) var(--gutter); } }

/* ---- Collections ---- */
.bm-pagebuilder .colls { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--md); }
.bm-pagebuilder .coll { display:flex; flex-direction:column; align-items:center; gap:1.1rem; text-align:center; }
.bm-pagebuilder .coll-img { width:100%; aspect-ratio:1; background:var(--bg-cream); overflow:hidden; position:relative; }
.bm-pagebuilder .coll-img img { width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease-out); }
.bm-pagebuilder .coll:hover .coll-img img { transform:scale(1.05); }
.bm-pagebuilder .coll-name { font-family:var(--serif); font-weight:500; font-size:1.5rem; color:var(--bg-walnut); letter-spacing:-.03em; }
.bm-pagebuilder .coll-meta { font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-muted); font-weight:600; margin-top:-.45rem; }
.bm-pagebuilder .coll-link { font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--bg-walnut); border-bottom:1px solid var(--bg-walnut); padding-bottom:.25rem; transition:all var(--t) var(--ease); }
.bm-pagebuilder .coll:hover .coll-link { color:var(--tan-deep); border-color:var(--tan-deep); }
@media (max-width:900px){ .bm-pagebuilder .colls { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .bm-pagebuilder .colls { grid-template-columns:repeat(2,1fr); } }

/* ---- Brand marquee ---- */
.bm-pagebuilder .brand-bar { background:var(--bg); padding:var(--lg) 0; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); overflow:hidden; }
.bm-pagebuilder .brand-track { display:flex; gap:5rem; animation:bmpb-scroll 38s linear infinite; white-space:nowrap; align-items:center; }
.bm-pagebuilder .brand-item { font-family:var(--serif); font-weight:500; font-size:1.25rem; color:var(--ink-soft); letter-spacing:-.025em; display:inline-flex; align-items:center; gap:1.5rem; padding-right:5rem; }
.bm-pagebuilder .brand-item .b-dot { width:5px; height:5px; border-radius:50%; background:var(--tan); display:inline-block; }

/* ---- Value / care cards ---- */
.bm-pagebuilder .value-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sm); }
.bm-pagebuilder .value { background:var(--bg-cream); padding:2.25rem; display:flex; flex-direction:column; min-height:280px; transition:transform var(--t) var(--ease),background var(--t) var(--ease); }
.bm-pagebuilder .value:hover { transform:translateY(-4px); background:var(--bg-stone); }
.bm-pagebuilder .value-num { font-family:var(--serif); font-size:1rem; color:var(--tan-deep); font-weight:400; letter-spacing:.04em; }
.bm-pagebuilder .value h3 { font-family:var(--serif); font-weight:500; font-size:1.4rem; line-height:1.2; color:var(--bg-walnut); margin:var(--md) 0 var(--sm); letter-spacing:-.025em; min-height:2.4em; }
.bm-pagebuilder .value p { font-size:.92rem; color:var(--ink-soft); line-height:1.55; }
.bm-pagebuilder .value-link { margin-top:auto; padding-top:1.25rem; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--bg-walnut); display:inline-flex; align-items:center; gap:.5rem; }
@media (max-width:900px){ .bm-pagebuilder .value-grid { grid-template-columns:1fr; } .bm-pagebuilder .value h3 { min-height:0; } }

/* ---- Reviews ---- */
.bm-pagebuilder .reviews { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sm); }
.bm-pagebuilder .review { background:var(--cream); padding:2rem; display:flex; flex-direction:column; gap:1rem; border:1px solid var(--line-soft); }
.bm-pagebuilder .review-stars { display:flex; gap:.15rem; }
.bm-pagebuilder .review-stars svg { width:18px; height:18px; color:#00B67A; fill:#00B67A; }
.bm-pagebuilder .review-quote { font-family:var(--serif); font-size:1.05rem; line-height:1.5; color:var(--bg-walnut); font-weight:500; flex:1; letter-spacing:-.015em; }
.bm-pagebuilder .review-meta { font-size:.78rem; color:var(--ink-muted); font-weight:500; }
.bm-pagebuilder .review-meta strong { color:var(--bg-walnut); display:block; font-weight:600; }
@media (max-width:900px){ .bm-pagebuilder .reviews { grid-template-columns:1fr; } }

/* ---- Theme wrapper override: full-bleed .bm-pagebuilder on mobile ----
   The home hook renders inside #wrapper > .container.hed (theme .container,
   15px gutter) > #content-wrapper (a Bootstrap .col-* with ANOTHER 15px
   gutter). Both layers must lose their inline padding or the section stays
   inset by 15px. The :has() rules also catch any container/column wrapping
   .bm-pagebuilder regardless of nesting. ---- */
@media (max-width:992px){
  /* Plain selectors — parse-safe in EVERY browser. Kept in their own rule so
     Safari versions without :has() still strip the two real gutters. A
     comma-list mixing :has() with these would drop the whole rule in Safari. */
  #index #wrapper > .container.hed,
  #index #content-wrapper,
  .bm-pagebuilder .container{
    padding-left:0 !important;
    padding-right:0 !important;
  }
}
@media (max-width:992px){
  /* :has() fallback for any other container/column wrapping the builder.
     Isolated so non-supporting browsers ignore only this rule, not the one
     above. Supported in Safari 15.4+, all current Chrome/Firefox. */
  #index .container:has(.bm-pagebuilder),
  #index [class*="col-"]:has(.bm-pagebuilder){
    padding-left:0 !important;
    padding-right:0 !important;
  }
}

/* ============================================================
   FREJA CLEANUP — 2026-06-16  ·  mobile-first refinement pass
   Goal: compact the (oversized) mobile homepage, kill generic
   "bought-theme" cues (card borders, blue glow, heavy gradients)
   and unify section padding. Overrides are grouped here so the
   originals above stay intact during testing — once signed off,
   fold them into the base rules and delete this block.
   ============================================================ */

/* 1 ·  Quick view ("Hurtig visning") — markup commented out in
   _widget.tpl; hide the rule too in case any cached markup lingers. */
.bm-pagebuilder .product-quick { display: none !important; }

/* 2 ·  De-genericise the v3.0 product widget card.
   The 1px border + blue (#0553FE) glow-on-hover is the classic
   themeforest tell. Drop the box; lean on image + whitespace. */
.bm-pagebuilder .bm-w__product,
.bm-w__product {
  border: 0; border-radius: 0; background: transparent; padding: 0;
}
.bm-pagebuilder .bm-w__product:hover,
.bm-w__product:hover { border-color: transparent; box-shadow: none; transform: none; }
.bm-w__product-img { background: var(--bg-cream, #EFE8DC); border-radius: 0; }
.bm-w__product-price { color: var(--bg-walnut, #2A1F18); }   /* was brand blue */

/* 3 ·  Trustpilot / review cards — no bordered boxes.
   Separate with the section background + spacing, not a 1px frame. */
.bm-pagebuilder .review { border: 0; background: transparent; }

/* 4 ·  Image-tile gradients REMOVED entirely (per request).
   No scrim on the category mosaic / dame-herre tiles and no veil on
   the hero — legibility comes from a text-shadow only, so the photos
   stay vivid and the "themeforest" gradient wash is gone. */
.bm-pagebuilder .cat-tile::after,
.bm-pagebuilder .duo-card::after { background: none; }
.bm-pagebuilder .cat-tile-body,
.bm-pagebuilder .duo-body {
  text-shadow: 0 1px 3px rgba(20,16,12,.6), 0 2px 16px rgba(20,16,12,.55);
}

/* Center the duo-card text overlay (Til hende / Til ham) both horizontally and
   vertically over the image, instead of anchoring it to the bottom-left. */
.bm-pagebuilder .duo-card .duo-body {
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.bm-pagebuilder .hero-veil { background: none !important; }
.bm-pagebuilder .hero-headline h1,
.bm-pagebuilder .hero-tag,
.bm-pagebuilder .hero-pricerow .now,
.bm-pagebuilder .hero-pricerow .old-line {
  text-shadow: 0 2px 18px rgba(20,16,12,.55), 0 1px 4px rgba(20,16,12,.5);
}

/* 5 ·  Mobile: compact the editorial product cards (reference = sleek
   2-up grid). Smaller type, tighter gaps, square media. */
@media (max-width: 600px) {
  .bm-pagebuilder .product-grid { gap: 1.4rem .7rem; }
  .bm-pagebuilder .product-media { margin-bottom: .5rem; }
  .bm-pagebuilder .product-brand { font-size: .58rem; margin-bottom: .12rem; }
  .bm-pagebuilder .product-name  { font-size: .8rem; line-height: 1.3; margin-bottom: .18rem; }
  .bm-pagebuilder .product-price { font-size: .92rem; }
  .bm-pagebuilder .product-badge,
  .bm-pagebuilder .product-badge--sale { font-size: .56rem; padding: .28rem .48rem; }
}

/* 6 ·  Unified, tighter section rhythm on mobile.
   The shared rhythm pinned padded sections to --xl (4rem) top+bottom
   — too airy, and product rows weren't included, so gaps looked
   random. One smaller value for every padded section. */
@media (max-width: 900px) {
  .bm-pagebuilder .section,
  .bm-pagebuilder .section--md,
  .bm-pagebuilder .section--sm,
  .bm-pagebuilder .statement,
  .bm-pagebuilder .usp-row,
  .bm-pagebuilder .bm-w--products {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }
  .bm-pagebuilder .head { margin-bottom: 1.1rem; }
}

/* 7 ·  "Tre løfter til dit læder" (value cards) — compress on mobile.
   Were min-height:280px cream boxes stacked tall. Turn into a clean
   divided list (hairline separators = hierarchy, not boxed cards). */
@media (max-width: 900px) {
  .bm-pagebuilder .value-grid { gap: 0; }
  .bm-pagebuilder .value { min-height: 0; padding: 1.2rem .2rem; background: transparent; }
  .bm-pagebuilder .value + .value { border-top: 1px solid var(--line-soft); }
  .bm-pagebuilder .value h3 { font-size: 1.15rem; margin: .45rem 0 .3rem; min-height: 0; }
  .bm-pagebuilder .value p { font-size: .86rem; }
  .bm-pagebuilder .value-link { padding-top: .8rem; }
}

/* 8 ·  Trustpilot reviews — compress on mobile (already 1-col). */
@media (max-width: 900px) {
  .bm-pagebuilder .reviews { gap: 0; }
  .bm-pagebuilder .review { padding: 1.1rem .2rem; gap: .6rem; }
  .bm-pagebuilder .review + .review { border-top: 1px solid var(--line-soft); }
  .bm-pagebuilder .review-quote { font-size: .95rem; }
}

/* 9 ·  Section titles too big on mobile (e.g. "Shop efter kategori").
   The base .head h2 clamp bottoms out at 1.9rem (~30px) — too loud on
   phones. Bring section headings down to a calmer size. */
@media (max-width: 900px) {
  /* HansenGrotesque renders heavy, so 18px still read as huge — drop section
     headings to ~15px with tight tracking for a calm, compact look. */
  .bm-pagebuilder .head h2          { font-size: .95rem !important; font-weight: 500; letter-spacing: -.005em; line-height: 1.2; }
  .bm-pagebuilder .bm-w__heading    { font-size: .95rem; }
  .bm-pagebuilder .head--center > p { font-size: .82rem; }
  .bm-pagebuilder .head-eyebrow     { font-size: .62rem; }
  .bm-pagebuilder .statement h2     { font-size: 1.15rem; }
  .bm-pagebuilder .story-content h2,
  .bm-pagebuilder .botr-content h2  { font-size: 1.2rem; }
  /* the dame/herre overlay titles were 30px — bring them down too */
  .bm-pagebuilder .duo-body h3      { font-size: 1.3rem; }
}

/* 10 ·  Circle categories block (mh-circles) — ported to this theme.
   The `circle` widget markup shipped in _widget.tpl / _widget_group.tpl
   but its styling never landed in frejaskind (Myhair has it). Round,
   warm-sand category chips: centered row on desktop, edge-to-edge
   horizontal scroll on mobile (reference parity). */
.bm-pagebuilder .mh-circles { width: 100%; }
.bm-pagebuilder .mh-circles__inner {
  display: flex; gap: 1.5rem; justify-content: safe center; flex-wrap: nowrap;
  overflow-x: auto; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.bm-pagebuilder .mh-circles__inner::-webkit-scrollbar { display: none; }
.bm-pagebuilder .mh-circles__item {
  display: flex; flex-direction: column; align-items: center; gap: .65rem;
  width: 92px; text-align: center; color: var(--ink); flex: 0 0 auto;
}
.bm-pagebuilder .mh-circles__bubble {
  width: 74px; height: 74px; border-radius: 50%; overflow: hidden;
  background: var(--bg-cream); display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(28,24,20,.04);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.bm-pagebuilder .mh-circles__item:hover .mh-circles__bubble {
  transform: translateY(-3px); box-shadow: 0 12px 22px -12px rgba(28,24,20,.45);
}
.bm-pagebuilder .mh-circles__bubble img { width: 100%; height: 100%; object-fit: cover; }
.bm-pagebuilder .mh-circles__bubble .ph { font-size: 30px; color: var(--tan-deep); }
.bm-pagebuilder .mh-circles__label {
  font-size: .76rem; font-weight: 600; line-height: 1.25; letter-spacing: .005em;
}
.bm-pagebuilder .mh-circles__item:hover .mh-circles__label { color: var(--tan-deep); }
@media (max-width: 900px) {
  /* Single line; scrolls horizontally (slider) when the circles don't all fit. */
  .bm-pagebuilder .mh-circles__inner { gap: 1rem; justify-content: flex-start; padding: 0 16px; }
  .bm-pagebuilder .mh-circles__item { width: 76px; }
  .bm-pagebuilder .mh-circles__bubble { width: 62px; height: 62px; }
  .bm-pagebuilder .mh-circles__label { font-size: .69rem; }
}

/* ============================================================
   FREJA — mobile product cards too big / images too tall (2026-06-16).
   The editorial card used a 4/5 portrait image (very tall) and the
   slider showed ~1.3 huge cards. Square the image (shorter) + show
   ~2 narrower cards.
   ============================================================ */
@media (max-width: 600px) {
  .bm-pagebuilder .product-media { aspect-ratio: 1 / 1 !important; max-height: 46vw !important; margin-bottom: .45rem !important; }
  .bm-pagebuilder .product-grid--slider > .product { flex-basis: 54% !important; }
  .bm-pagebuilder .product-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 1.1rem .6rem !important; }
  .bm-pagebuilder .product-brand { font-size: .55rem !important; }
  .bm-pagebuilder .product-name  { font-size: .76rem !important; line-height: 1.25 !important; }
  .bm-pagebuilder .product-price { font-size: .85rem !important; }
}

/* ============================================================
   COMPRESS ALL ON MOBILE (2026-06-16) — aggressive global spacing
   + section-height reduction so the whole homepage reads tight.
   ============================================================ */
@media (max-width: 900px) {
  .bm-pagebuilder .section,
  .bm-pagebuilder .section--md,
  .bm-pagebuilder .section--sm,
  .bm-pagebuilder .statement,
  .bm-pagebuilder .usp-row,
  .bm-pagebuilder .bm-w--products,
  .bm-pagebuilder .colls,
  .bm-pagebuilder .value-grid { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
  .bm-pagebuilder .head        { margin-bottom: .7rem !important; }
  .bm-pagebuilder .statement   { padding: 1.7rem var(--gutter) !important; }
  /* hero shorter */
  .bm-pagebuilder .hero        { min-height: 440px !important; }
  /* full-bleed split sections (story / best-of-the-rest): much shorter */
  .bm-pagebuilder .story, .bm-pagebuilder .botr,
  .bm-pagebuilder .botr--reverse { min-height: 0 !important; }
  .bm-pagebuilder .story-media, .bm-pagebuilder .botr-media { height: 52vw !important; min-height: 0 !important; }
  .bm-pagebuilder .story-content, .bm-pagebuilder .botr-content { padding: 1.6rem var(--gutter) !important; }
  /* dame/herre duo: landscape (was tall 3/4 portrait) */
  .bm-pagebuilder .duo-card    { aspect-ratio: 4 / 3 !important; }
  .bm-pagebuilder .duo-section { padding: .5rem 0 !important; }
  /* category mosaic + collections tighter */
  .bm-pagebuilder .cat-mosaic  { gap: .5rem !important; }
  .bm-pagebuilder .colls       { gap: .9rem !important; }
}

/* "Til hende / Til ham" duo — keep TWO columns on mobile (was stacking to 1). */
@media (max-width: 768px) {
  .bm-pagebuilder .duo      { grid-template-columns: 1fr 1fr !important; gap: .5rem !important; }
  .bm-pagebuilder .duo-card { aspect-ratio: 3 / 4 !important; }
  .bm-pagebuilder .duo-body { padding: .9rem !important; }
  .bm-pagebuilder .duo-body h3 { font-size: 1.05rem !important; }
  .bm-pagebuilder .duo-body small { font-size: .58rem !important; }
}

/* ============================================================
   FREJA — batch tweaks 2026-06-16
   ============================================================ */
/* 1) desktop section title a touch bigger (~24px -> ~28px) */
@media (min-width: 901px) {
  .bm-pagebuilder .head h2 { font-size: clamp(1.4rem, 1.9vw, 1.8rem) !important; }
}
/* 2) section heading + "Se alle ..." link aligned on one row */
.bm-pagebuilder .head { align-items: center !important; }
@media (max-width: 900px) {
  .bm-pagebuilder .head { flex-wrap: nowrap !important; gap: .75rem !important; }
  .bm-pagebuilder .head > div:first-child { min-width: 0 !important; }
  .bm-pagebuilder .head-end { flex: 0 0 auto !important; }
  .bm-pagebuilder .head-end .btn-ghost { white-space: nowrap !important; font-size: .6rem !important; padding: 0 !important; }
}
/* 3) Tilbud (sale) badge black, not red */
.bm-pagebuilder .product-badge--sale { background: var(--bg-walnut, #1a1a1a) !important; color: var(--cream, #fff) !important; }
/* 4) remove the divider line under the statement/quote section */
.bm-pagebuilder .statement::before { display: none !important; }
.bm-pagebuilder .statement { border-bottom: 0 !important; }

/* compress spacing on the product sections (Bestsellere / Nye ankomster / Tilbud) */
.bm-pagebuilder .bm-w--products      { padding-top: 1.2rem !important; padding-bottom: 1.2rem !important; }
.bm-pagebuilder .bm-w--products .head{ margin-bottom: .6rem !important; }
@media (max-width: 900px) {
  .bm-pagebuilder .bm-w--products      { padding-top: .85rem !important; padding-bottom: .85rem !important; }
  .bm-pagebuilder .bm-w--products .head{ margin-bottom: .45rem !important; }
}

/* top hero/slider ~50px shorter */
.bm-pagebuilder .hero { min-height: min(85vh, 710px) !important; }
@media (max-width: 900px) { .bm-pagebuilder .hero { min-height: 390px !important; } }

/* reduce space below section headings (e.g. Shop efter kategori) */
.bm-pagebuilder .head { margin-bottom: .55rem !important; }
@media (max-width: 900px) { .bm-pagebuilder .head { margin-bottom: .4rem !important; } }

/* center the hero content (Fargo Crossbody / price / CTA) */
.bm-pagebuilder .hero       { align-items: center !important; }
.bm-pagebuilder .hero-frame { justify-content: center !important; align-items: center !important; }
.bm-pagebuilder .hero-headline { text-align: center !important; max-width: 660px !important; }
.bm-pagebuilder .hero-headline h1, .bm-pagebuilder .hero-tag { margin-left: auto !important; margin-right: auto !important; }
.bm-pagebuilder .hero-pricerow { align-items: center !important; }

/* a bit more space above the product sections again (Nye ankomster etc.) */
.bm-pagebuilder .bm-w--products { padding-top: 1.7rem !important; }
@media (max-width: 900px) { .bm-pagebuilder .bm-w--products { padding-top: 1.35rem !important; } }

/* ============================================================
   FREJA — section refinements 2026-06-16
   ============================================================ */
/* "Shop kollektion" links: no underline/line-below */
.bm-pagebuilder .coll-link { border-bottom: 0 !important; padding-bottom: 0 !important; letter-spacing: .12em; }
.bm-pagebuilder .coll-link:hover { border-color: transparent !important; }

/* "Vores egne kollektioner" — compress */
.bm-pagebuilder .colls { gap: 1rem !important; }
.bm-pagebuilder .coll  { gap: .55rem !important; }
.bm-pagebuilder .coll-name { font-size: 1.25rem !important; }
.bm-pagebuilder .coll-meta { margin-top: -.25rem !important; }
@media (max-width: 900px) { .bm-pagebuilder .colls { gap: .8rem !important; } }

/* "Tre løfter til dit læder" — cleaner/tighter */
.bm-pagebuilder .value      { padding: 1.15rem 0 !important; }
.bm-pagebuilder .value h3    { margin: .35rem 0 .3rem !important; }
.bm-pagebuilder .value-num   { font-size: .8rem !important; letter-spacing: .12em !important; }

/* "Det siger vores kunder" (Trustpilot) — compress, clean testimonial list */
.bm-pagebuilder .reviews { gap: 0 !important; }
.bm-pagebuilder .review  { padding: 1.05rem 0 !important; gap: .55rem !important; }
.bm-pagebuilder .review + .review { border-top: 1px solid var(--line-soft) !important; }
.bm-pagebuilder .review-quote { font-size: .98rem !important; line-height: 1.45 !important; }
.bm-pagebuilder .review-stars svg { width: 16px !important; height: 16px !important; }

/* force-remove the line under the "Vi går aldrig på kompromis" statement */
.bm-pagebuilder .statement::before,
.bm-pagebuilder .statement::after {
  content: none !important; display: none !important; background: none !important; height: 0 !important; border: 0 !important;
}
.bm-pagebuilder .statement { border: 0 !important; box-shadow: none !important; }

/* remove the divider line above the Suzan & Lasse signature (story) */
.bm-pagebuilder .story-sign { border-top: 0 !important; padding-top: 0 !important; }

/* no divider line between brand name and product name in the cards */
.bm-pagebuilder .product-brand { border-bottom: 0 !important; padding-bottom: 0 !important; }

/* ============================================================
   FREJA — breathing room 2026-06-17
   ============================================================ */
/* 30px above the title + below the section on the product blocks
   (Nye ankomster / Tilbud / Bestsellere lige nu) — a bit more air */
.bm-pagebuilder .bm-w--products {
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}
@media (max-width: 900px) {
  .bm-pagebuilder .bm-w--products {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }
}

/* ============================================================
   FREJA — centred-head spacing + values + Trustpilot 2026-06-17
   ============================================================ */
/* Centred section heads (Vores egne kollektioner etc.): the base .head
   has gap:var(--lg)=2.5rem which, in a column layout, became a huge gap
   between the H2 and its subtitle. Pull the subtitle up close. */
.bm-pagebuilder .head--center      { gap: .5rem !important; }
.bm-pagebuilder .head--center > p  { margin-top: 0 !important; }

/* "Tre løfter til dit læder" — more compressed (kill the tall min-heights) */
.bm-pagebuilder .value-grid { gap: .5rem !important; }
.bm-pagebuilder .value      { min-height: 0 !important; padding: 1rem 1.15rem !important; }
.bm-pagebuilder .value h3   { min-height: 0 !important; font-size: 1.15rem !important; margin: .3rem 0 .25rem !important; }
.bm-pagebuilder .value p    { font-size: .88rem !important; line-height: 1.45 !important; }
.bm-pagebuilder .value-link { padding-top: .7rem !important; }
@media (max-width: 900px) {
  .bm-pagebuilder .value    { padding: .75rem 0 !important; }
  .bm-pagebuilder .value h3 { font-size: 1.05rem !important; }
}

/* ---- Trustpilot reviews — ported 1:1 from MyHair (.mh-reviews-*),
        mapped to the Freja warm-sand palette. Outer .section--stone
        provides the background + padding; these style head + cards. ---- */
.bm-pagebuilder .bm-w--reviews-wrap {
  --mh-plum: var(--bg-walnut, #1a1a1a);
  --mh-muted: var(--ink-muted, #6b6b6b);
  --mh-line: var(--line-soft, #e7ddd0);
  --mh-tp-green: #00B67A;
  --mh-font-heading: var(--serif, Georgia, serif);
}
.bm-pagebuilder .mh-reviews-section__head {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: .85rem; padding-bottom: 2.25rem; margin-bottom: 2.25rem;
  border-bottom: 1px solid var(--mh-line);
}
.bm-pagebuilder .mh-reviews-section__score { text-align: center; }
.bm-pagebuilder .mh-reviews-section__big {
  font-family: var(--mh-font-heading); font-weight: 700; font-size: 4rem;
  line-height: 1; letter-spacing: -.03em; color: var(--mh-plum); display: block;
}
.bm-pagebuilder .mh-reviews-section__stars {
  color: var(--mh-tp-green); font-size: 22px; letter-spacing: .06em; margin: .35rem 0 .25rem;
}
.bm-pagebuilder .mh-reviews-section__count { font-size: 12.5px; color: var(--mh-muted); }
.bm-pagebuilder .mh-reviews-section__title-block {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
.bm-pagebuilder .mh-reviews-section__brand {
  font-size: 12.5px; font-weight: 700; color: var(--mh-tp-green);
  letter-spacing: .08em; text-transform: uppercase;
}
.bm-pagebuilder .mh-reviews-section__title {
  font-family: var(--mh-font-heading); font-weight: 600;
  font-size: clamp(1.75rem, 2.6vw, 2.2rem); letter-spacing: -.025em;
  margin: 0; color: var(--mh-plum); line-height: 1.1; max-width: none;
}
.bm-pagebuilder .mh-reviews-section__more {
  font-size: 13.5px; font-weight: 700; color: var(--mh-plum);
  text-decoration: underline; text-underline-offset: 4px; align-self: center;
}
.bm-pagebuilder .mh-reviews-cards {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
}
.bm-pagebuilder .mh-reviews-card {
  background: var(--cream, #fff); border-radius: 4px;
  padding: 1.5rem 1.35rem 1.4rem; display: flex; flex-direction: column; gap: .85rem;
}
.bm-pagebuilder .mh-reviews-card__head {
  display: grid; grid-template-columns: auto 1fr auto; gap: .75rem; align-items: center;
}
.bm-pagebuilder .mh-reviews-card__avatar {
  width: 38px; height: 38px; border-radius: 999px; display: inline-flex;
  align-items: center; justify-content: center; font-weight: 700; font-size: 13px;
  letter-spacing: .02em; color: var(--bg-walnut, #1a1a1a);
}
/* varied warm-sand avatar tints, like MyHair's pastel set */
.bm-pagebuilder .mh-reviews-card:nth-child(4n+1) .mh-reviews-card__avatar { background: #EFE3D2; }
.bm-pagebuilder .mh-reviews-card:nth-child(4n+2) .mh-reviews-card__avatar { background: #E7D8C4; }
.bm-pagebuilder .mh-reviews-card:nth-child(4n+3) .mh-reviews-card__avatar { background: #F0E7DA; }
.bm-pagebuilder .mh-reviews-card:nth-child(4n)   .mh-reviews-card__avatar { background: #E4D3BE; }
.bm-pagebuilder .mh-reviews-card__name  { font-weight: 700; font-size: 13.5px; color: var(--mh-plum); }
.bm-pagebuilder .mh-reviews-card__meta  { font-size: 11.5px; color: var(--mh-muted); }
.bm-pagebuilder .mh-reviews-card__stars { color: var(--mh-tp-green); font-size: 14px; letter-spacing: .04em; }
.bm-pagebuilder .mh-reviews-card__quote {
  font-size: 14px; line-height: 1.5; color: var(--mh-plum); margin: 0;
  font-family: inherit; font-weight: 400; letter-spacing: 0;
}
.bm-pagebuilder .mh-reviews-card__chip {
  font-size: 11.5px; font-weight: 600; color: var(--mh-plum); background: var(--bg-stone, #f4f4f2);
  padding: .35rem .6rem; border-radius: 2px; align-self: flex-start; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bm-pagebuilder .mh-reviews-card__verified {
  font-size: 11px; color: var(--mh-tp-green); font-weight: 600; letter-spacing: .01em; margin-top: auto;
}
@media (max-width: 1100px) {
  .bm-pagebuilder .mh-reviews-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .bm-pagebuilder .mh-reviews-cards { grid-template-columns: 1fr; }
}

/* ============================================================
   FREJA — "Vores egne kollektioner" heading (collections row)
   2026-06-17 — mobile only: title 5px bigger + 30px above it.
   ============================================================ */
@media (max-width: 900px) {
  /* base mobile .head h2 is .95rem (~15px) — bump this section +5px */
  .bm-pagebuilder .bm-row--collections .head h2 { font-size: calc(.95rem + 5px) !important; }
  /* 30px breathing room above the title */
  .bm-pagebuilder .bm-row--collections .head { margin-top: 30px !important; }
}

/* ============================================================
   FREJA — "Familien bag Freja Skind" (story row)
   2026-06-17 — mobile only: heading 5px smaller + 30px more
   brown above the heading and below the content (extend the
   walnut .story-content block, NOT transparent page space).
   ============================================================ */
@media (max-width: 900px) {
  /* base mobile .story-content h2 is 1.2rem (~19px) — shrink this section -5px */
  .bm-pagebuilder .bm-row--story .story-content h2 { font-size: calc(1.2rem - 5px) !important; }
  /* +30px brown above the heading and +30px brown at the section bottom
     (mobile base content padding is 1.6rem top/bottom) */
  .bm-pagebuilder .bm-row--story .story-content {
    padding-top: calc(1.6rem + 30px) !important;
    padding-bottom: calc(1.6rem + 30px) !important;
  }
}

/* ============================================================
   FREJA — "Nye ankomster" + "Tilbud" product rows
   2026-06-17 — +30px above + below the section, in the SECTION'S
   OWN colour (Tilbud = stone, via skin.css). The colour lives on
   the inner .bm-w--products block, so the 30px is PADDING inside
   that block (not page-bg margin around it = the white gap before).
   Base block padding: desktop 1.7/1.2rem, mobile 1.35/.85rem.
   ============================================================ */
.bm-pagebuilder .bm-row--new-arrivals .bm-w--products,
.bm-pagebuilder .bm-row--tilbud .bm-w--products {
  padding-top: calc(1.7rem + 30px) !important;
  padding-bottom: calc(1.2rem + 30px) !important;
}
@media (max-width: 900px) {
  .bm-pagebuilder .bm-row--new-arrivals .bm-w--products,
  .bm-pagebuilder .bm-row--tilbud .bm-w--products {
    padding-top: calc(1.35rem + 30px) !important;
    padding-bottom: calc(.85rem + 30px) !important;
  }
}

/* ============================================================
   FREJA — frontpage product sliders: tighten gap between cards.
   Base was var(--sm) = 16px — too airy. Drop to 6px.
   ============================================================ */
.bm-pagebuilder .product-grid--slider { gap: 6px !important; }

/* ============================================================
   FREJA — product-section header on the grid (mobile).
   .bm-w--products has padding-right:0 on mobile (line 246) so the
   SLIDER can bleed off the right edge — but that also let the header
   row (heading + "Shop alle …" / "Se alle" button) bleed to the
   screen edge. Restore the right gutter on the .head only, so the
   buttons sit on the site grid while the slider stays full-bleed.
   ============================================================ */
@media (max-width: 900px) {
  .bm-pagebuilder .bm-w--products .head { padding-right: var(--gutter) !important; }
}