wrapper. Part 42's :has() selector matcht niet.
Fix: grid op .bs4-section zelf; header + cats span full-width.
Scope: body.bs-v4.home only. Design-freeze intact (hero/header/menu onaangetast). */
/* === PRODUCT GRID: apply to ACTUAL parent (.bs4-section) === */
body.bs-v4.home .bs4-section {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
align-items: start;
}
/* Header en cats span full-width within the grid */
body.bs-v4.home .bs4-section > header {
grid-column: 1 / -1;
}
body.bs-v4.home .bs4-section > section,
body.bs-v4.home .bs4-section > .bs4-cats {
grid-column: 1 / -1;
}
/* === PRODUCT CARDS: uniform height, contain (no crop) === */
body.bs-v4.home .bs4-prod {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--bs-mist);
text-decoration: none !important;
transition: border-color .2s, transform .2s;
min-height: 0;
}
body.bs-v4.home .bs4-prod:hover {
border-color: var(--bs-ink);
transform: translateY(-2px);
}
/* Media: 1:1 aspect, contain (product shots are 300x300 white-bg) */
body.bs-v4.home .bs4-prod__media {
aspect-ratio: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: #fff;
border-bottom: 1px solid var(--bs-mist);
overflow: hidden;
flex-shrink: 0;
}
body.bs-v4.home .bs4-prod__media img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
object-position: center center;
mix-blend-mode: multiply;
display: block;
}
/* Body: flex column, price pinned bottom */
body.bs-v4.home .bs4-prod__body {
padding: 16px 18px 20px;
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
min-height: 0;
}
body.bs-v4.home .bs4-prod__body h3 {
font-size: 15px !important;
line-height: 1.4 !important;
color: var(--bs-ink) !important;
margin: 0 !important;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
body.bs-v4.home .bs4-prod__cat {
font: 500 11px/1 var(--bs-font);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--bs-slate);
}
body.bs-v4.home .bs4-prod__price,
body.bs-v4.home .bs4-prod__price .amount {
font: 500 16px var(--bs-font) !important;
color: var(--bs-ink) !important;
margin-top: auto;
}
/* === CATEGORY TILES: uniform, cover-crop === */
body.bs-v4.home .bs4-cat-tile {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
text-decoration: none !important;
}
body.bs-v4.home .bs4-cat-img {
aspect-ratio: 4 / 3;
overflow: hidden;
background: #f7f5f2;
flex-shrink: 0;
}
body.bs-v4.home .bs4-cat-img img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
display: block;
}
body.bs-v4.home .bs4-cat-label {
flex: 1;
padding: 14px 16px 10px;
overflow-wrap: break-word;
font-weight: 600;
}
body.bs-v4.home .bs4-cat-count {
padding: 0 16px 14px;
font-size: 13px;
color: var(--bs-slate);
}
/* === MOBILE ≤860px: 2-col, tighter gaps === */
@media (max-width: 860px) {
body.bs-v4.home .bs4-section {
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
body.bs-v4.home .bs4-prod__media {
padding: 16px;
}
body.bs-v4.home .bs4-cat-img {
aspect-ratio: 3 / 2;
}
}
/* === MOBILE ≤480px: 1-col products, full-width cats === */
@media (max-width: 480px) {
body.bs-v4.home .bs4-section {
grid-template-columns: 1fr;
gap: 12px;
}
body.bs-v4.home .bs4-cat-tile {
flex-direction: row;
align-items: center;
}
body.bs-v4.home .bs4-cat-img {
width: 40%;
aspect-ratio: 1 / 1;
}
body.bs-v4.home .bs4-cat-label,
body.bs-v4.home .bs4-cat-count {
padding: 8px 12px;
}
}
/* ============================================================
Part 51 — Homepage Proporties + Foto-mapping FIX (2026-09-15)
Targeteert PLUGIN biselect-home-tiles classes (niet child-theme).
Scope: body.bs-v4 ONLY. Design-freeze compliant (append only).
============================================================ */
/* --- CATEGORIE-TILES (plugin: .bs4-cat-tile / .bs4-cat-img) --- */
body.bs-v4 .bs4-cats {
display: block !important;
width: 100% !important;
padding: 0 !important;
}
body.bs-v4 .bs4-cats-grid,
body.bs-v4 .bs4-cat-tiles {
width: 100% !important;
max-width: 1560px !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 48px clamp(20px, 3vw, 48px) !important;
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 20px !important;
}
body.bs-v4 .bs4-cat-tile {
display: block !important;
text-decoration: none !important;
background: #fff !important;
border-radius: 10px !important;
overflow: hidden !important;
box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
body.bs-v4 .bs4-cat-tile:hover {
transform: translateY(-3px) !important;
box-shadow: 0 8px 24px rgba(0,0,0,0.10) !important;
}
body.bs-v4 .bs4-cat-img {
position: relative !important;
aspect-ratio: 4 / 3 !important;
overflow: hidden !important;
display: block !important;
width: 100% !important;
}
body.bs-v4 .bs4-cat-img img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
display: block !important;
}
body.bs-v4 .bs4-cat-label {
padding: 14px 16px 6px !important;
font-size: 0.95rem !important;
font-weight: 600 !important;
color: #1a1a1a !important;
text-align: center !important;
}
body.bs-v4 .bs4-cat-count {
padding: 0 16px 14px !important;
font-size: 0.8rem !important;
color: #777 !important;
text-align: center !important;
}
/* --- PROMISE SECTION --- */
body.bs-v4 .bs4-promise {
width: 100% !important;
max-width: 1560px !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 24px clamp(20px, 3vw, 48px) !important;
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 16px !important;
background: #fff !important;
}
body.bs-v4 .bs4-promise__item {
text-align: center !important;
font-size: 0.875rem !important;
line-height: 1.4 !important;
color: #333 !important;
}
/* --- PRODUCT BLOKKEN (featured products) --- */
body.bs-v4 .bs4-prod__media,
body.bs-v4 ul.products li.product .images {
aspect-ratio: 1 / 1 !important;
overflow: hidden !important;
border-radius: 6px !important;
display: block !important;
}
body.bs-v4 .bs4-prod__media img,
body.bs-v4 ul.products li.product .images img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center top !important;
display: block !important;
}
/* --- B2B SECTION --- */
body.bs-v4 .bs4-b2b {
width: 100% !important;
max-width: 1560px !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 48px clamp(20px, 3vw, 48px) !important;
}
body.bs-v4 .bs4-b2b__inner {
width: 100% !important;
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 40px !important;
align-items: center !important;
}
body.bs-v4 .bs4-b2b__media img,
body.bs-v4 .bs4-people__media img {
width: 100% !important;
aspect-ratio: 16 / 9 !important;
object-fit: cover !important;
border-radius: 8px !important;
display: block !important;
}
/* --- PEOPLE SECTION --- */
body.bs-v4 .bs4-people {
width: 100% !important;
max-width: 1560px !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 48px clamp(20px, 3vw, 48px) !important;
}
/* --- MOBIEL (max-width 768px) --- */
@media (max-width: 768px) {
body.bs-v4 .bs4-cats-grid,
body.bs-v4 .bs4-cat-tiles {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 12px !important;
padding: 24px 16px !important;
}
body.bs-v4 .bs4-promise {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 12px !important;
padding: 16px !important;
}
body.bs-v4 .bs4-b2b__inner {
grid-template-columns: 1fr !important;
gap: 24px !important;
}
body.bs-v4 .bs4-cat-label {
font-size: 0.85rem !important;
padding: 10px 12px 4px !important;
}
body.bs-v4 .bs4-cat-count {
padding: 0 12px 10px !important;
}
}
@media (max-width: 480px) {
body.bs-v4 .bs4-cats-grid,
body.bs-v4 .bs4-cat-tiles {
grid-template-columns: 1fr !important;
}
body.bs-v4 .bs4-promise {
grid-template-columns: 1fr !important;
}
}
/* ============================================================
PART 52 — Homepage Proporties & Image Houding
Scoped: body.bs-v4 | Date: 2026-09-15
Doel: uniforme tile-verhoudingen, correcte crop, geen rekken
============================================================ */
/* --- Categorie-tiles: uniforme aspect-ratio + crop --- */
body.bs-v4 .bs4-cat-tile {
aspect-ratio: 4 / 3;
display: flex;
flex-direction: column;
overflow: hidden;
background: #f8f8f8;
}
body.bs-v4 .bs4-cat-img,
body.bs-v4 .bs4-cat-tile img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
display: block;
}
/* --- Tile-grid: uniforme kolommen --- */
body.bs-v4 .bs4-cats-grid,
body.bs-v4 .bs4-cat-tiles {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
align-items: stretch;
}
@media (max-width: 1024px) {
body.bs-v4 .bs4-cats-grid,
body.bs-v4 .bs4-cat-tiles {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
body.bs-v4 .bs4-cats-grid,
body.bs-v4 .bs4-cat-tiles {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
}
/* --- Promise-sectie: vaste hoogte, geen rekken --- */
body.bs-v4 .bs4-promise {
min-height: 280px;
display: flex;
align-items: center;
}
body.bs-v4 .bs4-promise img {
object-fit: cover;
object-position: center;
max-height: 260px;
width: auto;
max-width: 100%;
}
/* --- People-sectie: natuurlijke verhouding behouden --- */
body.bs-v4 .bs4-people img {
object-fit: cover;
object-position: center top;
aspect-ratio: 3 / 2;
width: 100%;
}
/* --- B2B-blok: image niet rekken --- */
body.bs-v4 .bs4-b2b__inner img {
object-fit: cover;
object-position: center;
max-height: 300px;
width: 100%;
}
/* --- Hero-image (bestaand, alleen crop-fix als nodig) --- */
body.bs-v4 .bs4-hero img {
object-fit: cover;
object-position: center;
}
/* ============================================================
PART 52 — Homepage Proporties & Image Houding
Scoped: body.bs-v4 | Date: 2026-09-15
Doel: uniforme tile-verhoudingen, correcte crop, geen rekken
============================================================ */
/* --- Categorie-tiles: uniforme aspect-ratio + cover-crop --- */
body.bs-v4 .bs4-cat-tile {
aspect-ratio: 4 / 3;
display: flex;
flex-direction: column;
overflow: hidden;
background: #f5f5f5;
}
body.bs-v4 .bs4-cat-img,
body.bs-v4 .bs4-cat-tile img {
width: 100%;
height: 65%;
object-fit: cover;
object-position: center center;
flex-shrink: 0;
}
body.bs-v4 .bs4-cat-label,
body.bs-v4 .bs4-cat-count {
padding: 10px 14px;
line-height: 1.3;
}
body.bs-v4 .bs4-cat-label {
font-size: 0.95rem;
font-weight: 600;
color: #1a1a1a;
}
body.bs-v4 .bs4-cat-count {
font-size: 0.8rem;
color: #666;
margin-top: 2px;
}
/* --- Categorie-grid: uniforme kolommen --- */
body.bs-v4 .bs4-cats-grid,
body.bs-v4 .bs4-cat-tiles {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 20px;
max-width: 1200px;
margin: 0 auto;
padding: 40px 20px;
}
/* --- Promise-sectie: ruime witruimte + afbeelding-houding --- */
body.bs-v4 .bs4-promise {
padding: 60px 20px;
max-width: 1200px;
margin: 0 auto;
}
body.bs-v4 .bs4-promise img,
body.bs-v4 .bs4-people img {
width: 100%;
max-height: 480px;
object-fit: cover;
object-position: center 30%;
border-radius: 4px;
}
/* --- B2B-blok: consistent --- */
body.bs-v4 .bs4-b2b__inner {
max-width: 1200px;
margin: 0 auto;
padding: 50px 20px;
}
/* --- Featured-producten: uniforme cards --- */
body.bs-v4 .bs4-featured img,
body.bs-v4 .bs4-product-card img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
object-position: center center;
}
/* --- MOBIEL 390px: tiles 2-koloms, compactere padding --- */
@media (max-width: 768px) {
body.bs-v4 .bs4-cats-grid,
body.bs-v4 .bs4-cat-tiles {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
padding: 24px 12px;
}
body.bs-v4 .bs4-cat-tile {
aspect-ratio: 3 / 4;
}
body.bs-v4 .bs4-cat-img,
body.bs-v4 .bs4-cat-tile img {
height: 70%;
}
body.bs-v4 .bs4-cat-label {
font-size: 0.85rem;
padding: 8px 10px;
}
body.bs-v4 .bs4-promise,
body.bs-v4 .bs4-b2b__inner {
padding: 36px 12px;
}
body.bs-v4 .bs4-promise img,
body.bs-v4 .bs4-people img {
max-height: 280px;
}
}
/* --- MOBIEL 390px: featured producten 1-koloms --- */
@media (max-width: 480px) {
body.bs-v4 .bs4-cats-grid,
body.bs-v4 .bs4-cat-tiles {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
body.bs-v4 .bs4-cat-tile {
aspect-ratio: 1 / 1;
}
}
/* ============================================================
PART 52: Home Proporties Fix — 2026-09-16
Task: task_90173f2c001f (operator-vraag 17:09)
Fix: bs4-cats left=850 offset, bs4-prod width=755, mobile header/menu
Scoped: body.bs-v4 — locked selectors NIET aangeraakt
============================================================ */
/* --- FIX 1: section.bs4-cats full-width (was left=850 in 2-col grid) --- */
body.bs-v4 section.bs4-cats {
margin-left: 0 !important;
padding-left: 0 !important;
width: 100% !important;
max-width: 100% !important;
grid-column: 1 / -1;
position: relative;
}
/* --- FIX 2: cats-grid uniforme 4-kolom grid --- */
body.bs-v4 .bs4-cats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
width: 100%;
max-width: 100%;
}
/* --- FIX 3: cat-tile aspect-ratio + object-fit --- */
body.bs-v4 .bs4-cat-tile {
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: 8px;
}
body.bs-v4 .bs4-cat-img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* --- FIX 4: productkaarten in grid (was 755px full-width) --- */
body.bs-v4 section.bs4-section {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 24px;
}
body.bs-v4 .bs4-prod {
max-width: 100%;
width: 100%;
}
body.bs-v4 .bs4-prod__media {
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: 6px;
}
body.bs-v4 .bs4-prod__media img,
body.bs-v4 .bs4-prod__media .attachment-woocommerce_thumbnail {
width: 100%;
height: 100%;
object-fit: cover;
}
/* --- FIX 5: Mobile (≤768px) — grid aanpassen --- */
@media (max-width: 768px) {
body.bs-v4 .bs4-cats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
body.bs-v4 section.bs4-section {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
body.bs-v4 .bs4-cat-tile {
aspect-ratio: 1 / 1;
}
}
/* --- FIX 6: Mobile header zichtbaarheid + menu z-index --- */
@media (max-width: 768px) {
body.bs-v4 .fusion-header-wrapper,
body.bs-v4 #main-nav,
body.bs-v4 .fusion-main-menu {
position: relative;
z-index: 1000;
}
body.bs-v4 .fusion-main-menu .fusion-dropdown-menu {
z-index: 999;
}
}
/* --- FIX 7: Whitespace onderaan pagina elimineren --- */
body.bs-v4 .bs3.bs4 {
padding-bottom: 0;
}
body.bs-v4 section:last-of-type {
margin-bottom: 0;
}
/* ============================================================
PART 53: Home Proporties CORRECTED — 2026-09-16
Task: task_90173f2c001f (operator-vraag 17:09)
Override Part 52's broken width:100% on grid items.
Root cause: section.bs4-cats in .bs4-section (4-col grid) was
spanning only 2 cols → left=850 offset. Fix: span all cols,
NO explicit width (let grid determine size).
Scoped: body.bs-v4 — locked selectors NIET aangeraakt.
============================================================ */
/* --- OVERRIDEN Part 52: geen width:100% op grid-items --- */
body.bs-v4 section.bs4-cats {
grid-column: 1 / -1 !important;
min-width: 0 !important;
max-width: none !important;
width: auto !important;
margin-left: 0 !important;
padding-left: 0 !important;
position: relative;
}
/* --- cats-grid: volle breedte van parent section --- */
body.bs-v4 .bs4-cats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr) !important;
gap: 20px !important;
width: 100%;
max-width: 100%;
margin: 0 auto;
}
/* --- cat-tile: aspect-ratio + object-fit cover --- */
body.bs-v4 .bs4-cat-tile {
aspect-ratio: 4 / 3 !important;
overflow: hidden;
border-radius: 8px;
min-width: 0;
}
body.bs-v4 .bs4-cat-tile img,
body.bs-v4 .bs4-cat-img,
body.bs-v4 .bs4-cat__media img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block;
}
/* --- Productsectie: .bs4-prod kaarten in nette grid --- */
body.bs-v4 .bs4-prod {
max-width: 100% !important;
min-width: 0;
}
body.bs-v4 .bs4-prod img,
body.bs-v4 .bs4-prod__media img,
body.bs-v4 .bs4-prod .attachment-woocommerce_thumbnail {
width: 100% !important;
height: auto !important;
max-height: 280px;
object-fit: cover !important;
display: block;
}
/* --- Mobile ≤768px: 2-kolom grid, compactere tiles --- */
@media (max-width: 768px) {
body.bs-v4 section.bs4-cats {
grid-column: 1 / -1 !important;
width: auto !important;
}
body.bs-v4 .bs4-cats-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 12px !important;
}
body.bs-v4 .bs4-cat-tile {
aspect-ratio: 1 / 1 !important;
}
}
/* --- Mobile header: z-index + visibility fix --- */
@media (max-width: 768px) {
body.bs-v4 .fusion-header-wrapper,
body.bs-v4 #main-nav,
body.bs-v4 .fusion-slider-wrap,
body.bs-v4 .fusion-main-menu {
z-index: 9999 !important;
position: relative;
}
body.bs-v4 .fusion-dropdown-menu {
z-index: 9998 !important;
}
/* Voorkom dat content onder het menu verdwijnt */
body.bs-v4 .fusion-content-wrapper {
position: relative;
z-index: 1;
}
}
/* --- Whitespace onderaan: laatste section margin kill --- */
body.bs-v4 .bs3.bs4 > .bs3-row:last-child,
body.bs-v4 .bs3.bs4 > section:last-of-type {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/* PART 33 — CTA defensive overflow (2026-09-16) */
body.bs-v4 .fusion-main-menu>ul>li.bs-cta>a,
body.bs-v4 .fusion-main-menu>ul>li.menu-item-167210>a {
max-width: none !important;
overflow: visible !important;
}
/* PART 94 — CTA overflow fix @1440px (2026-09-15)
Root cause: .fusion-main-menu width(1361px)+left(202px)=1563px > 1440px viewport.
Fix: reduce inter-item padding 12→8px (saves ~40px) + CTA margin 10→6px (saves 4px).
Design-lock compliance: operator locked button height(40px), labels, colors — NOT spacing. */
body.bs-v4 .fusion-main-menu > ul > li > a {
padding: 0 8px !important;
}
body.bs-v4 .fusion-main-menu > ul > li.bs-cta > a,
body.bs-v4 .fusion-main-menu > ul > li.menu-item-167210 > a {
margin-left: 6px !important;
}
/* === Part 93: Homepage proportions (2026-09-16) === */
/* Part 93 body — Homepage proportions (2026-09-16) */
/* Targets: child-theme BEM classes (.bs4-cats, .bs4-cat, .bs4-cat__media) */
body.bs-v4 .bs4-cats {
max-width: 1560px;
margin-left: auto;
margin-right: auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
padding: 0 24px;
}
body.bs-v4 .bs4-cat {
display: flex;
flex-direction: column;
border-radius: 8px;
overflow: hidden;
text-decoration: none;
color: inherit;
}
body.bs-v4 .bs4-cat--lead {
grid-column: span 2;
grid-row: span 2;
}
body.bs-v4 .bs4-cat__media {
aspect-ratio: 4 / 3;
width: 100%;
overflow: hidden;
flex-shrink: 0;
}
body.bs-v4 .bs4-cat--lead .bs4-cat__media {
aspect-ratio: 4 / 3;
}
body.bs-v4 .bs4-cat__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
body.bs-v4 .bs4-cat__body {
padding: 14px 16px;
flex: 1;
}
/* Product blocks (bs4-prod) — 1/1 ratio */
body.bs-v4 .bs4-prod img,
body.bs-v4 .bs4-prod__img {
aspect-ratio: 1 / 1;
object-fit: cover;
width: 100%;
}
/* B2B / People sections — 16/9 media */
body.bs-v4 .bs4-promise img,
body.bs-v4 .bs4-people img,
body.bs-v4 .bs4-b2b img {
aspect-ratio: 16 / 9;
object-fit: cover;
width: 100%;
}
/* Mobile: 2-col grid */
@media (max-width: 768px) {
body.bs-v4 .bs4-cats {
grid-template-columns: repeat(2, 1fr);
gap: 14px;
padding: 0 16px;
}
body.bs-v4 .bs4-cat--lead {
grid-column: span 2;
grid-row: span 1;
}
}
/* Tablet: 3-col */
@media (min-width: 769px) and (max-width: 1024px) {
body.bs-v4 .bs4-cats {
grid-template-columns: repeat(3, 1fr);
}
}
/* === PART 54: Homepage D1+D2+D3 consolidated fix (2026-09-16) === */
/* D1: Mobile header @<=768px — logo/search/cart MOETEN zichtbaar zijn */
@media (max-width: 768px) {
body.bs-v4 .fusion-header-wrapper {
position: relative !important;
z-index: 9999 !important;
min-height: 52px !important;
background: #fff !important;
}
body.bs-v4 .fusion-header-row {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 10px 16px !important;
min-height: 52px !important;
}
body.bs-v4 .fusion-logo,
body.bs-v4 .fusion-mobile-logo {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
body.bs-v4 .fusion-logo img,
body.bs-v4 .fusion-mobile-logo img {
max-height: 32px !important;
width: auto !important;
display: block !important;
}
/* Hide desktop menu on mobile (it's zero-width anyway) */
body.bs-v4 .fusion-main-menu {
display: none !important;
}
/* Show ANY mobile trigger that exists */
body.bs-v4 [class*="mobile-trigger"],
body.bs-v4 [class*="nav-mobile"],
body.bs-v4 [class*="hamburger"],
body.bs-v4 .fusion-nav-mobile-trigger {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
width: auto !important;
height: auto !important;
min-width: 36px !important;
min-height: 36px !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
}
/* Ensure search + cart icons visible */
body.bs-v4 .fusion-main-menu-search,
body.bs-v4 .fusion-custom-menu-item-cart {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
}
}
/* D2: Desktop @>=769px — .bs4-cats must fill full container width */
@media (min-width: 769px) {
/* Break the 4-col grid that traps .bs4-cats as a grid-item */
body.bs-v4 .bs4-section:has(> .bs4-cats) {
display: block !important;
grid-template-columns: none !important;
}
body.bs-v4 section.bs4-cats {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
grid-column: auto !important;
}
/* Vertical gap: eliminate large whitespace between sections */
body.bs-v4 .bs4-section {
margin-top: 0 !important;
padding-top: 0 !important;
}
body.bs-v4 .bs4-section__head {
margin-bottom: 20px !important;
padding-bottom: 0 !important;
}
}
/* D3: Hide product cards with empty media (dummy/test data) */
body.bs-v4 .bs4-prod:has(.bs4-prod__media:empty) {
display: none !important;
}
/* Fallback for browsers without :has() — hide if title contains "Test SKU" */
@supports not selector(:has(*)) {
body.bs-v4 .bs4-prod h3:contains("Test SKU") {
display: none;
}
}
/* === END PART 54 === */
/* ARCHITECT-DFIX 2026-09-16 */
/* D1: Mobile header visibility @<=768px — ensure logo + mobile-menu are visible above all */
@media (max-width: 768px) {
body.bs-v4 .fusion-header-wrapper {
position: relative !important;
z-index: 9999 !important;
min-height: 56px;
background: #fff;
overflow: visible !important;
}
body.bs-v4 .fusion-logo,
body.bs-v4 .fusion-logo img,
body.bs-v4 .fusion-logo a {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: relative;
z-index: 10000 !important;
}
body.bs-v4 .fusion-mobile-menu {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: relative;
z-index: 10000 !important;
}
/* Ensure header bar (top utility) doesn't overlap */
body.bs-v4 .fusion-header-bar {
position: relative;
z-index: 9998;
}
}
/* D2-HORIZ: Desktop @>=769px — .bs4-prods must fill its parent section (was 323px in 1440px) */
@media (min-width: 769px) {
/* The parent section may be display:grid trapping .bs4-prods as a narrow grid-item */
body.bs-v4 .bs4-section:has(> .bs4-prods),
body.bs-v4 .bs4-section--tint:has(> .bs4-prods) {
display: block !important;
grid-template-columns: none !important;
}
/* .bs4-prods itself: full-width 4-col grid */
body.bs-v4 .bs4-prods {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 24px !important;
width: 100% !important;
max-width: none !important;
margin: 0 auto !important;
padding: 0 !important;
}
}
/* D2-VERT: Reduce vertical gap between promise/usp and next section */
@media (min-width: 769px) {
body.bs-v4 .bs4-promise {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
body.bs-v4 .bs4-promise + .bs4-section,
body.bs-v4 .bs4-hero + .bs4-promise {
margin-top: 0 !important;
}
/* General section spacing: keep it tight but not zero */
body.bs-v4 .bs4-section {
padding-top: clamp(24px, 3vw, 48px) !important;
padding-bottom: clamp(24px, 3vw, 48px) !important;
}
}
/* === END PART 95 === */
/* ARCHITECT-DFIX 2026-09-16 — PART 96: Mobile header forced visibility */
/* Root cause: Avada mobile CSS may set display:none or height:0 on header-wrapper.
Part 95 set min-height but Avada's own @media rules (higher specificity or later in cascade)
may override. This part uses max-specificity selectors + !important to force visibility. */
@media (max-width: 768px) {
body.bs-v4 .fusion-header-wrapper,
body.bs-v4 .fusion-header-wrapper .fusion-logo,
body.bs-v4 .fusion-header-wrapper .fusion-mobile-menu,
body.bs-v4 .fusion-header-wrapper .fusion-nav {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
min-height: 56px !important;
overflow: visible !important;
position: relative !important;
z-index: 99999 !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
transform: none !important;
}
body.bs-v4 .fusion-logo img,
body.bs-v4 .fusion-logo a {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
width: auto !important;
height: auto !important;
max-height: 40px !important;
}
/* Ensure the mobile hamburger/menu trigger is visible */
body.bs-v4 .fusion-mobile-menu,
body.bs-v4 .fusion-nav-toggle,
body.bs-v4 .fusion-menu-toggle {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: relative !important;
z-index: 100000 !important;
}
/* Prevent any ancestor from clipping the header */
body.bs-v4 .bs3,
body.bs-v4 .bs4 {
overflow: visible !important;
padding-top: 0 !important;
}
/* If Avada uses a separate mobile header bar, ensure it's visible too */
body.bs-v4 .fusion-mobile-header,
body.bs-v4 .fusion-sticky-header {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
}
/* === END PART 96 === */
/* ===== Part 97: 404 page Dutch layout + mobile fix ===== */
body.bs-v4 .bs-404-wrapper {
min-height: calc(100vh - 200px);
display: flex;
align-items: center;
justify-content: center;
padding: 60px 24px;
background: #fafafa;
}
body.bs-v4 .bs-404-content {
max-width: 560px;
width: 100%;
text-align: center;
}
body.bs-v4 .bs-404-code {
font-size: 96px;
font-weight: 700;
color: #c8a97e;
line-height: 1;
margin-bottom: 16px;
}
body.bs-v4 .bs-404-title {
font-size: 28px;
font-weight: 600;
color: #1a1a1a;
margin: 0 0 16px;
}
body.bs-v4 .bs-404-text {
font-size: 16px;
color: #555;
line-height: 1.6;
margin-bottom: 32px;
}
body.bs-v4 .bs-404-actions {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 32px;
}
body.bs-v4 .bs-404-btn {
display: inline-block;
padding: 12px 28px;
border-radius: 4px;
font-size: 15px;
font-weight: 500;
text-decoration: none;
transition: background 0.2s, color 0.2s;
}
body.bs-v4 .bs-404-btn-primary {
background: #1a1a1a;
color: #fff;
}
body.bs-v4 .bs-404-btn-primary:hover {
background: #333;
}
body.bs-v4 .bs-404-btn-secondary {
background: transparent;
color: #1a1a1a;
border: 1px solid #ccc;
}
body.bs-v4 .bs-404-btn-secondary:hover {
border-color: #c8a97e;
color: #c8a97e;
}
body.bs-v4 .bs-404-help {
padding-top: 24px;
border-top: 1px solid #eee;
}
body.bs-v4 .bs-404-help p {
font-size: 14px;
color: #777;
margin-bottom: 8px;
}
body.bs-v4 .bs-404-link {
color: #c8a97e;
text-decoration: none;
font-weight: 500;
}
body.bs-v4 .bs-404-link:hover {
text-decoration: underline;
}
/* Mobile: prevent overlap, stack buttons */
@media (max-width: 768px) {
body.bs-v4 .bs-404-wrapper {
padding: 40px 16px;
min-height: calc(100vh - 120px);
}
body.bs-v4 .bs-404-code {
font-size: 64px;
}
body.bs-v4 .bs-404-title {
font-size: 22px;
}
body.bs-v4 .bs-404-actions {
flex-direction: column;
align-items: center;
}
body.bs-v4 .bs-404-btn {
width: 100%;
max-width: 280px;
text-align: center;
}
}
/* End Part 97 */
/* === PART 98: Mobile Header Force-Show + 404 Mobile Fix (2026-09-16) === */
/* Root cause: Avada JS/inline-styles of parent overflow:hidden clips header on <=768px.
Part 96 used .fusion-header-wrapper but Avada may render .fusion-header-main or
.fusion-mobile-navigation as the actual visible bar. This part targets ALL known
header containers with maximum specificity + !important. */
@media (max-width: 768px) {
/* Kill any ancestor clipping */
body.bs-v4 .bs3,
body.bs-v4 .bs4,
body.bs-v4 .fusion-page-wrapper,
body.bs-v4 .fusion-content-wrapper {
overflow: visible !important;
padding-top: 0 !important;
margin-top: 0 !important;
}
/* Force ALL header containers visible */
body.bs-v4 .fusion-header-wrapper,
body.bs-v4 .fusion-header-main,
body.bs-v4 .fusion-mobile-header,
body.bs-v4 .fusion-sticky-header,
body.bs-v4 .fusion-header {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
min-height: 56px !important;
max-height: none !important;
overflow: visible !important;
position: relative !important;
z-index: 99999 !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: auto !important;
transform: none !important;
clip-path: none !important;
width: 100% !important;
background: #fff !important;
}
/* Logo visible */
body.bs-v4 .fusion-logo,
body.bs-v4 .fusion-logo img,
body.bs-v4 .fusion-logo a {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
width: auto !important;
height: auto !important;
max-height: 36px !important;
max-width: 180px !important;
}
/* Hamburger / mobile nav trigger */
body.bs-v4 .fusion-nav-toggle,
body.bs-v4 .fusion-menu-toggle,
body.bs-v4 .fusion-mobile-nav,
body.bs-v4 #mobile-navigation {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: relative !important;
z-index: 100000 !important;
height: auto !important;
min-height: 48px !important;
}
/* Cart / search icons in header */
body.bs-v4 .fusion-header-icons,
body.bs-v4 .fusion-cart-icon,
body.bs-v4 .fusion-search-icon {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Prevent Avada's "hide on scroll" from eating the header */
body.bs-v4 .fusion-header-wrapper.fusion-sticky,
body.bs-v4 .fusion-header-wrapper.fusion-hidden {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
transform: none !important;
}
}
/* === PART 98b: 404 page mobile overlap fix === */
@media (max-width: 768px) {
body.bs-v4 .bs-404-wrapper,
body.bs-v4 .fusion-error-page,
body.bs-v4 .error-404 {
padding: 24px 16px !important;
margin: 0 auto !important;
max-width: 100% !important;
text-align: center !important;
overflow-x: hidden !important;
}
body.bs-v4 .bs-404-wrapper h1,
body.bs-v4 .fusion-error-page h1 {
font-size: clamp(1.5rem, 6vw, 2.2rem) !important;
margin-bottom: 16px !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
}
body.bs-v4 .bs-404-wrapper p,
body.bs-v4 .fusion-error-page p {
font-size: 1rem !important;
line-height: 1.6 !important;
margin-bottom: 20px !important;
}
body.bs-v4 .bs-404-wrapper a,
body.bs-v4 .fusion-error-page a {
display: inline-block !important;
padding: 12px 24px !important;
font-size: 1rem !important;
word-wrap: break-word !important;
}
/* Kill any absolute-positioned decorative elements that overlap on mobile */
body.bs-v4 .bs-404-wrapper [style*="position: absolute"],
body.bs-v4 .bs-404-wrapper .fusion-builder-row-column {
position: relative !important;
left: auto !important;
right: auto !important;
}
}
/* === END PART 98 === */
/* Part 98 — Header Prominence & Spacing (2026-09-17)
Goals: CTA visual hierarchy, menu-item clickability, icon discoverability.
Design-freeze compliant: CTA stays 40px secondary button, NO band background,
copper accent only. Append-only under body.bs-v4. */
/* --- Menu item spacing: 8px → 11px for reliable 44px+ click targets --- */
body.bs-v4 .fusion-main-menu > ul > li:not(.bs-cta) > a {
padding: 0 11px !important;
}
/* --- CTA "Offerte aanvragen": elevated visual hierarchy ---
Design-freeze: 40px height, secondary button, NO band background.
Prominence via: copper border, bolder weight, hover fill. */
body.bs-v4 .fusion-main-menu > ul > li.bs-cta > a {
border: 1.5px solid #b87333 !important;
font-weight: 600 !important;
letter-spacing: 0.3px !important;
transition: background-color 0.2s ease, color 0.2s ease !important;
}
body.bs-v4 .fusion-main-menu > ul > li.bs-cta > a:hover,
body.bs-v4 .fusion-main-menu > ul > li.bs-cta > a:focus {
background-color: #b87333 !important;
color: #fff !important;
}
/* --- Search & Cart icons: larger + hover ring for discoverability --- */
body.bs-v4 .fusion-search-icon,
body.bs-v4 .fusion-cart-icon {
font-size: 20px !important;
line-height: 1 !important;
padding: 6px !important;
border-radius: 50% !important;
transition: background-color 0.2s ease !important;
}
body.bs-v4 .fusion-search-icon:hover,
body.bs-v4 .fusion-cart-icon:hover {
background-color: rgba(184, 115, 51, 0.12) !important;
}
/* --- Ensure icons don't shrink in flex context --- */
body.bs-v4 .fusion-main-menu-icon {
flex-shrink: 0 !important;
min-width: 36px !important;
}
/* Part 99 — Header Icon Selectors FIX (2026-09-17)
Correction for Part 98: actual Avada classes are
.fusion-main-menu-cart / .fusion-main-menu-search
with child .fusion-main-menu-icon.fusion-bar-highlight
Design-freeze compliant: copper accent, no structural change. */
/* --- Cart icon: discoverability ring on hover --- */
body.bs-v4 .fusion-main-menu-cart > a.fusion-main-menu-icon {
font-size: 20px !important;
line-height: 1 !important;
padding: 6px !important;
border-radius: 50% !important;
transition: background-color 0.2s ease, transform 0.15s ease !important;
}
body.bs-v4 .fusion-main-menu-cart > a.fusion-main-menu-icon:hover,
body.bs-v4 .fusion-main-menu-cart > a.fusion-main-menu-icon:focus {
background-color: rgba(184, 115, 51, 0.12) !important;
transform: scale(1.08) !important;
}
/* --- Search icon: discoverability ring on hover --- */
body.bs-v4 .fusion-main-menu-search > a.fusion-main-menu-icon {
font-size: 20px !important;
line-height: 1 !important;
padding: 6px !important;
border-radius: 50% !important;
transition: background-color 0.2s ease, transform 0.15s ease !important;
}
body.bs-v4 .fusion-main-menu-search > a.fusion-main-menu-icon:hover,
body.bs-v4 .fusion-main-menu-search > a.fusion-main-menu-icon:focus {
background-color: rgba(184, 115, 51, 0.12) !important;
transform: scale(1.08) !important;
}
/* --- Cart counter badge: ensure visibility --- */
body.bs-v4 .fusion-widget-cart-number {
position: absolute !important;
top: 2px !important;
right: 2px !important;
min-width: 16px !important;
height: 16px !important;
font-size: 10px !important;
font-weight: 700 !important;
line-height: 16px !important;
text-align: center !important;
background-color: #b87333 !important;
color: #fff !important;
border-radius: 50% !important;
pointer-events: none !important;
}
/* ============================================================
Part 100 — Homepage Tiles & Gap Fix (2026-09-15)
Scope: body.bs-v4 ONLY
Doel:
1. Verberg productkaarten zonder afbeelding (data-gap, test-SKU)
2. Geef cat-tiles minimale visuele aanwezigheid (geen lege witte blokken)
3. Reduceer excessieve gap tussen .bs4-promise en .bs4-cats secties
DoD: layout_measure 1440 tiles min-height>0, geen lege kaarten, geen grote gaten
Design-lock: header 72px wit, service-balk 36px inkt, koperen hover — NIET aangepakt
============================================================ */
/* --- 1. Verberg productkaarten met leeg media-gebied (geen ![]()
) --- */
/* Root-cause: test-SKU "BiSelect Test SKU-001" heeft geen afbeelding geïmporteerd.
CSS-only fix: verberg de kaart totdat data wordt aangevuld. */
body.bs-v4 .bs4-prod:has(.bs4-prod__media:not(:has(img))) {
display: none;
}
/* --- 2. Cat-tiles: minimale visuele aanwezigheid zonder afbeelding --- */
/* Root-cause: tiles met title maar geen img tonen een leeg wit blok in .bs4-cat__media.
Fix: subtiele gradient + min-height zodat de tile structureel intact blijft. */
body.bs-v4 .bs4-cat__media {
min-height: 140px;
background: linear-gradient(135deg, #f8f7f5 0%, #ffffff 100%);
}
body.bs-v4 .bs4-cat--lead .bs4-cat__media {
min-height: 200px;
}
/* Cat-tile volledig leeg (geen title, geen img) → verbergen */
body.bs-v4 .bs4-cat:has(.bs4-cat__media:not(:has(img))):has(.bs4-cat__body h3:empty),
body.bs-v4 .bs4-cat:has(.bs4-cat__media:not(:has(img))):not(:has(.bs4-cat__body h3)) {
display: none;
}
/* --- 3. Gap-reductie: promise → cats (culpraat: .bs4-section padding) --- */
/* Root-cause: body.bs-v4 .bs4-section{padding:clamp(72px,8vw,120px)} geeft
@1440px ~120px top + 120px bottom = ~240px visueel gat.
Fix: reduceer padding op de specifieke secties die promise/cats bevatten. */
body.bs-v4 .bs4-section:has(.bs4-promise) {
padding-bottom: clamp(20px, 2.5vw, 40px);
}
body.bs-v4 .bs4-section:has(.bs4-cats),
body.bs-v4 .bs4-section:has(.bs4-cats-inner) {
padding-top: clamp(20px, 2.5vw, 40px);
}
/* --- 4. Mobile: prevent overflow-x from tile grids --- */
@media (max-width: 768px) {
body.bs-v4 .bs4-cats,
body.bs-v4 .bs4-prods {
overflow-x: hidden;
max-width: 100%;
}
}
/* --- 5. Mobile header: ensure visible (defensive, al OK per CSS) --- */
/* Alleen ter bescherming tegen regressie; bestaande MQ's stellen 60-80px in. */
@media (max-width: 480px) {
body.bs-v4 .fusion-header-wrapper .fusion-header {
min-height: 60px !important;
height: auto !important;
}
}
/* Part 100: Mobile header root-fix — defensive lock-in (2026-09-14) */
/* Root cause: ALREADY RESOLVED by parts 15/96/98/99 (min-height:60px on .fusion-header). */
/* This part is a FINAL LOCK to prevent any future regression. No new behavior. */
@media(max-width:768px){
body.bs-v4 .fusion-header{min-height:60px!important;height:auto!important;display:block!important;visibility:visible!important;opacity:1!important}
body.bs-v4 .fusion-header .fusion-row{min-height:60px!important;height:auto!important;display:flex!important;align-items:center!important}
body.bs-v4 .fusion-header-wrapper{display:block!important;visibility:visible!important;opacity:1!important}
body.bs-v4 .fusion-logo{display:flex!important;min-height:60px!important;visibility:visible!important;opacity:1!important}
}
/* Part 101: Desktop gap fix — reduce .bs4-section padding (2026-09-14) */
/* Root cause: line 1504 .bs4-section{padding:clamp(72px,8vw,120px)} = 120px top+bottom @1440px */
/* Fix: reduce to clamp(48px,5vw,72px) — eliminates ~300px visual gap between sections */
body.bs-v4 .bs4-section{padding:clamp(48px,5vw,72px) var(--bs4-pad)}
/* ============================================================
PART 54: Home Cats-Grid ROOT-CAUSE FIX — 2026-09-16
Task: task_90173f2c001f (operator-vraag 17:09)
Architect: root cause bewezen via layout_measure + DOM-extract.
ROOT CAUSE (bewezen, read-only diagnostiek):
1. Echte DOM is
GEEN .
Parts 52/53 ('section.bs4-cats') matchten NOOIT -> inert.
2. Part 51 'display:block !important' op body.bs-v4 .bs4-cats
WEL matchend -> tiles stacken verticaal i.p.v. grid.
3. Geen regel definieert grid-template-columns voor de echte
tile-class .bs4-cat.
Breedte was al gezond (.bs4-cats=1464 left=68 @1600).
FIX: grid herstellen met correcte selectors + uniforme kaarten.
Scope: body.bs-v4 ONLY. Design-freeze intact (geen hero/header/
menu, geen locked selectors bs-cta/bs4-hero/sub-menu/fusion-main-menu).
============================================================ */
/* --- 1. Container: grid (override Part 51 display:block !important;
later in cascade + !important = wint) --- */
body.bs-v4 .bs4-cats {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 24px !important;
}
/* --- 2. Echte tiles (.bs4-cat): uniforme kaarten, geen image-blowout --- */
body.bs-v4 .bs4-cats > .bs4-cat {
display: flex !important;
flex-direction: column;
min-width: 0;
}
body.bs-v4 .bs4-cats > .bs4-cat .bs4-cat__media {
aspect-ratio: 4 / 3;
overflow: hidden;
}
body.bs-v4 .bs4-cats > .bs4-cat .bs4-cat__media img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block;
}
/* --- 3. Tablet <=1024px: 2 kolommen --- */
@media (max-width: 1024px) {
body.bs-v4 .bs4-cats {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 16px !important;
}
}
/* --- 4. Mobile <=640px: compacte 2-kolom --- */
@media (max-width: 640px) {
body.bs-v4 .bs4-cats {
gap: 12px !important;
}
}
/* ============================================================
PART 55: Home Section Track Fix — 2026-09-16
Task: task_90173f2c001f (operator-vraag 17:09)
Architect: root-cause fase 2 (empirisch bewezen via layout_measure).
ROOT CAUSE fase 2:
.bs4-section is zelf een grid-container (Part 43/52) ZONDER
grid-template-columns. De impliciete auto-track size-to-content:
@1600px -> .bs4-cats width=1140 (content-max; hoort 1464 te zijn)
@390px -> .bs4-cats width=720 -> OVERFLOW viewport (390)
'width:100% !important' op het grid-item (Part 51) lost dit NIET op:
100% van een auto-track = de content-afmeting zelf.
FIX: expliciete track-definities zodat tracks = beschikbare ruimte
(deterministisch op alle breakpoints) + min-width:0 zodat content
de tracks niet kan uitdijen.
Scope: body.bs-v4.home ONLY. Design-freeze intact: geen hero/header/
menu, geen locked selectors (bs-cta/bs4-hero/sub-menu/fusion-main-menu).
============================================================ */
/* --- 1. .bs4-section: enkele volle-breedte track (was impliciet auto) --- */
body.bs-v4.home .bs4-section {
grid-template-columns: 1fr !important;
}
/* --- 2. Items: geen content-based uitdijing --- */
body.bs-v4.home .bs4-section > .bs4-cats,
body.bs-v4.home .bs4-section > .bs4-prods {
min-width: 0 !important;
width: 100% !important;
}
/* --- 3. Productgrid (.bs4-prods, al display:grid via Part 42 :has()):
expliciete responsive tracks i.p.v. auto-track --- */
body.bs-v4.home .bs4-section > .bs4-prods {
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
gap: 20px !important;
}
/* --- 4. Mobile <=640px: productkaarten 1 kolom, compacte gap --- */
@media (max-width: 640px) {
body.bs-v4.home .bs4-section > .bs4-prods {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
}
/* OMEGA_HOME_PROPORTIES_OPERATOR_START */
body.bs-v4 .bs4-cats, body.bs-v4 section.bs4-cats { width:100%; max-width:var(--bs4-max,1560px); margin-inline:auto; }
body.bs-v4 .bs4-cats-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,1.8vw,24px); width:100%; }
body.bs-v4 .bs4-cat-tile { min-width:0; height:auto; display:flex; flex-direction:column; }
body.bs-v4 .bs4-cats img, body.bs-v4 .bs4-cat-tile__img { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }
body.bs-v4 .bs4-prod__media { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,1.8vw,24px); width:100%; max-width:var(--bs4-max,1560px); margin-inline:auto; list-style:none; padding:0; }
body.bs-v4 .bs4-prod, body.bs-v4 .bs4-product-card, body.bs-v4 .bs4-card, body.bs-v4 li.product { min-width:0; height:auto; display:flex; flex-direction:column; }
body.bs-v4 .bs4-prod__media img, body.bs-v4 .bs4-prod img, body.bs-v4 .bs4-product-card img, body.bs-v4 .bs4-card img, body.bs-v4 li.product img { display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; }
body.bs-v4 img[src*="placeholder"], body.bs-v4 img[src*="no-image"], body.bs-v4 img[src*="missing"], body.bs-v4 img[src*="dummy"] { display:none; }
@media (max-width: 980px) { body.bs-v4 .bs4-prod__media, body.bs-v4 .bs4-cats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 560px) { body.bs-v4 .bs4-prod__media, body.bs-v4 .bs4-cats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } }
/* OMEGA_HOME_PROPORTIES_OPERATOR_END */
/* 01_home_proporties — Homepage proporties + foto-mapping fix (2026-09-15)
Scope: body.bs-v4.home ONLY. Geen locked selectors (bs-cta, bs4-hero, sub-menu, fusion-main-menu).
Problemen gefixt:
1. .bs4-cats maxWidth=1600px vs --bs4-max=1560px → 40px disproportie
2. Product-grid: 6 visible in 5-col = orphan row (5+1) → wit gat
3. Inconsistent img sizing (width:auto → variable visual size)
4. Cat-tile images zonder object-fit → crop inconsistent */
/* ── 1. Unify .bs4-cats max-width met --bs4-max ── */
body.bs-v4.home .bs4-cats {
max-width: var(--bs4-max);
}
/* ── 2. Product-grid: toon ALLE 8 producten in 4 nette kolommen (2 full rows) ──
Override nth-child(n+7) hide-rule (line 1788, higher specificity via .home) */
body.bs-v4.home .bs4-prods > .bs4-prod:nth-child(n+7) {
display: flex !important;
visibility: visible !important;
}
/* ── 3. Home product-grid: 4 kolommen (override 5-col van line 2875/2892) ── */
body.bs-v4.home .bs4-prods {
grid-template-columns: repeat(4, 1fr) !important;
gap: 24px;
max-width: var(--bs4-max);
}
/* ── 4. Uniforme product-afbeeldingen: vullen het 1/1 frame consistent ── */
body.bs-v4.home .bs4-prod__media img {
width: 100%;
height: 100%;
object-fit: contain;
max-width: none;
max-height: none;
mix-blend-mode: multiply;
}
/* ── 5. Cat-tiles: consistent aspect-ratio + cover-crop ── */
body.bs-v4.home .bs4-cat-tile__img {
aspect-ratio: 4 / 3;
overflow: hidden;
background: #f8f9fa;
}
body.bs-v4.home .bs4-cat-tile__img img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* ── 6. Responsive: tablet 2-col, mobile 1-col ── */
@media (max-width: 1000px) {
body.bs-v4.home .bs4-prods {
grid-template-columns: repeat(2, 1fr) !important;
gap: 16px;
}
}
@media (max-width: 480px) {
body.bs-v4.home .bs4-prods {
grid-template-columns: 1fr !important;
gap: 12px;
}
body.bs-v4.home .bs4-cat-tile__img {
aspect-ratio: 3 / 2;
}
}
/* ── 7. B2B + People: align met --bs4-max (was al OK maar explicit) ── */
body.bs-v4.home .bs4-b2b__inner,
body.bs-v4.home .bs4-people {
max-width: var(--bs4-max);
}
/* 103_home_proporties_fix — Override auto-fill(5col) met expliciete 4-col (2026-09-15)
ROOT CAUSE: L5681 body.bs-v4.home .bs4-section > .bs4-prods (SPEC 0,4,1 + !important)
wint van eerdere parts met lagere specificiteit (0,3,1).
FIX: exacte selector hergebruiken (zelfde SPEC 0,4,1), later in source = wint.
Scope: body.bs-v4.home ONLY. Geen locked selectors. */
/* — Desktop: 4 uniforme kolommen — */
body.bs-v4.home .bs4-section > .bs4-prods {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 24px !important;
max-width: var(--bs4-max, 1560px) !important;
margin-inline: auto !important;
}
/* — Tablet ≤1000px: 2 kolommen — */
@media (max-width: 1000px) {
body.bs-v4.home .bs4-section > .bs4-prods {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 16px !important;
}
}
/* — Mobile ≤480px: 1 kolom — */
@media (max-width: 480px) {
body.bs-v4.home .bs4-section > .bs4-prods {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
}
/* — Categorie-tiles: align max-width met --bs4-max (was 1600px, moet 1560px) — */
body.bs-v4.home .bs4-section > .bs4-cats {
max-width: var(--bs4-max, 1560px) !important;
margin-inline: auto !important;
}
/* — OMEGA_HOME_PROPORTIES_FIX_103_END — */
/* ═══ 200_visual_regression_fix (appended 2026-09-16) ═══ */
/* ═══════════════════════════════════════════════════════════════
200_visual_regression_fix — 2026-09-16
ROOT CAUSE: QA-audit FAIL (desktop glyphs + empty col; mobile header + images)
SCOPE: body.bs-v4 ONLY. Geen locked selectors. Alleen APPEND.
═══════════════════════════════════════════════════════════════ */
/* ── 1. MISSING GLYPHS: font-fallback stack voor product-grid & cat-tiles ──
Het lege @font-face (geen src) laat speciale Unicode-tekens (✓ → ·)
renderen in een fallback-font zonder die glyphs. Forceer een system-stack
met volledige Unicode-coverage. */
body.bs-v4 .bs4-prod,
body.bs-v4 .bs4-cat-tile,
body.bs-v4 .bs4-b2b__inner,
body.bs-v4 .bs4-section {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
}
/* ── 2. LEGE GRID-KOLOM: reset grid-item positioning anomalies ──
Eerste kolom leeg = item heeft grid-column span, margin, of is hidden.
Forceer alle items naar auto-placing + geen extra spacing. */
body.bs-v4.home .bs4-prods > .bs4-prod {
grid-column: auto / auto !important;
grid-row: auto / auto !important;
margin: 0 !important;
min-width: 0 !important;
min-height: 0 !important;
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
}
/* ── 3. MOBILE HEADER: forceer zichtbaarheid op alle viewport-breedtes ≤768px ──
Avada mobile CSS kan .fusion-header-wrap op display:none/height:0 zetten.
Override met !important binnen body.bs-v4 scope. */
@media (max-width: 768px) {
body.bs-v4 .fusion-header-wrap,
body.bs-v4 .fusion-secondary-header,
body.bs-v4 .fusion-main-menu-wrapper,
body.bs-v4 .fusion-logo-wrapper {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
min-height: 56px !important;
overflow: visible !important;
position: relative !important;
}
body.bs-v4 .fusion-header-wrap .fusion-logo img {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
max-height: 40px !important;
}
}
/* ── 4. BROKEN IMAGES MOBIEL: forceer image-rendering in product/cat grids ──
Image containers hebben mogelijk height:0 of overflow:hidden op mobile. */
@media (max-width: 768px) {
body.bs-v4 .bs4-prod__media,
body.bs-v4 .bs4-cat-tile__img {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
min-height: 80px !important;
overflow: hidden !important;
background: #f8f9fa !important;
}
body.bs-v4 .bs4-prod__media img,
body.bs-v4 .bs4-cat-tile__img img {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: 100% !important;
height: 100% !important;
min-height: 60px !important;
object-fit: contain !important;
}
}
/* ── 5. DESKTOP GRID: ensure 4-col met geen lege eerste col ──
Verifieer dat grid-area niet een item skippt via explicit placement. */
body.bs-v4.home .bs4-prods {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
grid-auto-flow: row dense !important;
gap: 24px !important;
}
/* ── 6. WIT GAT MOBIEL: voorkom excessieve margin/padding onderaan ── */
@media (max-width: 768px) {
body.bs-v4 .bs4-section {
padding-bottom: 24px !important;
margin-bottom: 16px !important;
}
body.bs-v4.home .bs4-prods {
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
}
/* Part 201: Home aspect-ratio + object-fit uniform (2026-09-16) */
/* Part 201: Home aspect-ratio + object-fit uniform (2026-09-16) */
body.bs-v4 .bs4-cats .bs4-cat__img,
body.bs-v4 .bs4-cats img {
aspect-ratio: 1 / 1;
object-fit: cover;
width: 100%;
height: auto;
}
body.bs-v4 .bs4-prods .bs4-prod__img,
body.bs-v4 .bs4-prods img {
aspect-ratio: 1 / 1;
object-fit: cover;
width: 100%;
height: auto;
}
body.bs-v4 .bs4-cats .bs4-cat,
body.bs-v4 .bs4-prods .bs4-prod {
display: flex;
flex-direction: column;
}
body.bs-v4 .bs4-cats .bs4-cat img,
body.bs-v4 .bs4-prods .bs4-prod img {
border-radius: 8px;
}
/* Part 201b: CORRECTE selectors — aspect-ratio + object-fit (2026-09-16) */
body.bs-v4 .bs4-cats .bs4-cat-tile__img img,
body.bs-v4 .bs4-cats .bs4-cat-tile__img {
aspect-ratio: 4 / 3;
object-fit: cover;
width: 100%;
overflow: hidden;
border-radius: 8px;
}
body.bs-v4 .bs4-prods .bs4-prod__media img,
body.bs-v4 .bs4-prods .bs4-prod__media {
aspect-ratio: 1 / 1;
object-fit: cover;
width: 100%;
overflow: hidden;
border-radius: 8px;
}
body.bs-v4 .bs4-cats .bs4-cat-tile,
body.bs-v4 .bs4-prods .bs4-prod {
display: flex;
flex-direction: column;
}
/* Part 202: Homepage proporties — aspect-ratio + object-fit + mobile (2026-09-16) */
/* Taak: 20260915-185308 | Scoped onder body.bs-v4 | VERBODEN selectors niet aangetast */
/* === Assortiment-tiles (.bs4-cats) — desktop === */
body.bs-v4 .bs4-cats .bs4-cat-tile__img {
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: 8px;
background: #ffffff;
}
body.bs-v4 .bs4-cats .bs4-cat-tile__img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* === Productkaarten (.bs4-prods) — desktop === */
body.bs-v4 .bs4-prods .bs4-prod__media {
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: 8px;
background: #ffffff;
}
body.bs-v4 .bs4-prods .bs4-prod__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* === Uniforme kaarthoogte (flex column, geen extra whitespace) === */
body.bs-v4 .bs4-cats .bs4-cat-tile,
body.bs-v4 .bs4-prods .bs4-prod {
display: flex;
flex-direction: column;
gap: 0;
}
body.bs-v4 .bs4-cats .bs4-cat-tile__img + *,
body.bs-v4 .bs4-prods .bs4-prod__media + * {
margin-top: 12px;
}
/* === Grid-gap normalisatie === */
body.bs-v4 .bs4-cats .bs4-cat-grid,
body.bs-v4 .bs4-prods .bs4-prod-grid {
gap: 24px;
}
/* === MOBILE (≤768px): milder aspect-ratio, compactere layout === */
@media (max-width: 768px) {
body.bs-v4 .bs4-cats .bs4-cat-tile__img {
aspect-ratio: 3 / 2;
}
body.bs-v4 .bs4-prods .bs4-prod__media {
aspect-ratio: 4 / 3;
}
body.bs-v4 .bs4-cats .bs4-cat-grid,
body.bs-v4 .bs4-prods .bs4-prod-grid {
gap: 16px;
}
body.bs-v4 .bs4-cats .bs4-cat-tile__img + *,
body.bs-v4 .bs4-prods .bs4-prod__media + * {
margin-top: 8px;
}
}
/* D1 FIX v2 2026-09-16: Mobile header @<=800px — icons off-screen + logo-zone leeg */
/* Bewijs vóór fix (layout_measure@390): .fusion-mobile-menu-icons left=381 w=32 (right_gap=-22),
a.awb-icon-bars left=405 (off-screen), .fusion-main-menu AL display:none (dus géén menu-lekkage;
de 32px- brede icons-container float-wrapt de 3 icons en de flex-flow duwt het blok buiten x=360).
Fix: position:relative anker op .fusion-header + .fusion-row; logo absolute left, icons
absolute right als EEN flex-rij (geen float). Alleen body.bs-v4, alleen <=800px. */
@media (max-width: 800px) {
body.bs-v4 .fusion-header,
body.bs-v4 .fusion-header .fusion-row {
position: relative !important;
}
body.bs-v4 .fusion-logo {
position: absolute !important;
left: 20px !important;
right: auto !important;
top: 50% !important;
transform: translateY(-50%) !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
z-index: 3 !important;
}
body.bs-v4 .fusion-logo img.fusion-standard-logo {
display: block !important;
height: 32px !important;
max-height: 32px !important;
width: auto !important;
opacity: 1 !important;
visibility: visible !important;
}
body.bs-v4 .fusion-logo img.fusion-mobile-logo,
body.bs-v4 .fusion-logo img.fusion-sticky-logo {
display: none !important;
}
body.bs-v4 .fusion-mobile-menu-icons {
position: absolute !important;
right: 16px !important;
left: auto !important;
top: 28px !important;
transform: translateY(-50%) !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
display: flex !important;
align-items: center !important;
gap: 14px !important;
z-index: 3 !important;
}
body.bs-v4 .fusion-mobile-menu-icons a {
float: none !important;
margin: 0 !important;
font-size: 20px !important;
line-height: 1 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 28px !important;
height: 28px !important;
color: #1a1a1a !important;
}
body.bs-v4 .fusion-header .fusion-main-menu {
display: none !important;
}
}
/* ============================================================
PART 203: Home Proporties — Uniforme sectie-breedtes (2026-09-15)
Task: 20260915-185308 (operator-vraag 17:09)
ROOT CAUSE (empirisch bewezen via layout_measure @1600px):
.bs4-promise is een SIBLING van .bs4-section (niet child).
.bs4-section heeft padding var(--bs4-pad) → content = 1464px.
.bs4-promise heeft eigen padding 20px → width = 1560px.
Resultaat: promise-bar steekt 48px per kant uit → visueel disproportie.
FIX: .bs4-promise krijgt responsive padding die matcht met
de effectieve section-content-padding (68px @1600px).
Formule: clamp(24px, 4.25vw, 80px) → 68px bij 1600px viewport.
Scope: body.bs-v4.home ONLY. Geen locked selectors
(bs-cta, bs4-hero, sub-menu, fusion-main-menu niet aangeraakt).
============================================================ */
/* ── 1. Promise-bar: match section-content-breedte ── */
body.bs-v4.home .bs4-promise {
max-width: var(--bs4-max) !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: clamp(24px, 4.25vw, 80px) !important;
padding-right: clamp(24px, 4.25vw, 80px) !important;
}
/* ── 2. Uniforme grid-gap over ALLE home-secties (consistentie) ── */
body.bs-v4.home .bs4-cats,
body.bs-v4.home .bs4-prods {
gap: 24px !important;
}
/* ── 3. Product-afbeeldingen: aspect-ratio + cover (uniforme kaarten) ── */
body.bs-v4.home .bs4-prod__media,
body.bs-v4.home .bs4-cat-tile__img,
body.bs-v4.home .bs4-cat__media {
aspect-ratio: 4 / 3;
overflow: hidden;
background: #f5f6f8;
}
body.bs-v4.home .bs4-prod__media img,
body.bs-v4.home .bs4-cat-tile__img img,
body.bs-v4.home .bs4-cat__media img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block;
}
/* ── 4. Categorie-tiles: uniforme grid (4-col desktop) ── */
body.bs-v4.home .bs4-cats {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
/* ── 5. Product-grid: 4 nette kolommen (2 full rows van 4) ── */
body.bs-v4.home .bs4-prods {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
/* ── 6. Responsive breakpoints ── */
@media (max-width: 1024px) {
body.bs-v4.home .bs4-cats,
body.bs-v4.home .bs4-prods {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 16px !important;
}
}
@media (max-width: 560px) {
body.bs-v4.home .bs4-cats,
body.bs-v4.home .bs4-prods {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 12px !important;
}
body.bs-v4.home .bs4-promise {
padding-left: 16px !important;
padding-right: 16px !important;
}
}
/* ── 7. Placeholder/missing images: verbergen (geen broken thumbnails) ── */
body.bs-v4.home img[src*="placeholder"],
body.bs-v4.home img[src*="no-image"],
body.bs-v4.home img[src*="missing"],
body.bs-v4.home img[src*="dummy"],
body.bs-v4.home img[alt=""] {
display: none !important;
}
/* OMEGA_PART_203_END */
/* OMEGA_PART_204 — Mobile tile/product responsiveness (2026-09-15) */
/* Scoped: body.bs-v4 only. Fixes mobile text-overflow + image aspect on tiles. */
@media (max-width: 768px) {
body.bs-v4 .bs4-cats .bs4-cat-tile h3,
body.bs-v4 .bs4-prods .bs4-prod-card h3 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.95rem;
line-height: 1.3;
}
body.bs-v4 .bs4-cats .bs4-cat-tile p,
body.bs-v4 .bs4-prods .bs4-prod-card p {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
font-size: 0.85rem;
}
body.bs-v4 .bs4-cats,
body.bs-v4 .bs4-prods {
gap: 16px;
}
body.bs-v4 .bs4-cats .bs4-cat-tile img,
body.bs-v4 .bs4-prods .bs4-prod-card img {
aspect-ratio: 1 / 1;
object-fit: cover;
width: 100%;
height: auto;
border-radius: 8px;
}
}
@media (max-width: 480px) {
body.bs-v4 .bs4-cats,
body.bs-v4 .bs4-prods {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
body.bs-v4 .bs4-cats .bs4-cat-tile,
body.bs-v4 .bs4-prods .bs4-prod-card {
padding: 10px;
}
}
/* OMEGA_PART_205 — Tile & product image uniformity (2026-09-15) */
/* Fixes: inconsistent white backgrounds, varying aspect ratios on tiles/products. */
/* Scoped: body.bs-v4 only. Does NOT touch bs4-hero, bs-cta, sub-menu, fusion-main-menu. */
body.bs-v4 .bs4-cats .bs4-cat-tile img,
body.bs-v4 .bs4-prods .bs4-prod-card img {
aspect-ratio: 4 / 3;
object-fit: cover;
object-position: center;
width: 100%;
height: auto;
background: #f8f8f8;
border-radius: 8px;
display: block;
}
body.bs-v4 .bs4-cats .bs4-cat-tile,
body.bs-v4 .bs4-prods .bs4-prod-card {
background: #ffffff;
border: 1px solid #e8e8e8;
border-radius: 12px;
overflow: hidden;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
body.bs-v4 .bs4-cats .bs4-cat-tile:hover,
body.bs-v4 .bs4-prods .bs4-prod-card:hover {
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
transform: translateY(-2px);
}
body.bs-v4 .bs4-cats .bs4-cat-tile h3,
body.bs-v4 .bs4-prods .bs4-prod-card h3 {
margin-top: 12px;
font-size: 1rem;
font-weight: 600;
color: #1a1a1a;
line-height: 1.4;
}
body.bs-v4 .bs4-cats .bs4-cat-tile p,
body.bs-v4 .bs4-prods .bs4-prod-card p {
margin-top: 4px;
font-size: 0.85rem;
color: #666;
line-height: 1.4;
}
/* Uniform grid gap */
body.bs-v4 .bs4-cats,
body.bs-v4 .bs4-prods {
display: grid;
gap: 20px;
}
@media (min-width: 1024px) {
body.bs-v4 .bs4-cats {
grid-template-columns: repeat(4, 1fr);
}
body.bs-v4 .bs4-prods {
grid-template-columns: repeat(4, 1fr);
}
}
@media (max-width: 768px) {
body.bs-v4 .bs4-cats,
body.bs-v4 .bs4-prods {
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
}
/* OMEGA_PART_205_END */
/* OMEGA_PART_33_MOBILE_HEADER_GRID_START */
/* OMEGA_PART_33_HOME_PROPORTIES_START */
/* OMEGA_PART_33_MOBILE_HEADER_GRID_START */
/* ============================================================
PART 33: Fix Mobile Header + Grid Regression
Date: 2026-09-16
Issue: QA failed — mobile header missing, desktop grid empty col
Root cause:
1. body.bs-v4 .fusion-header .fusion-row flex rule overrides mobile
2. Test product with empty image/category pollutes grid
Fix: Explicit mobile header visibility + grid gap fix
============================================================ */
/* ── MOBILE HEADER: ensure visible at all breakpoints ── */
@media (max-width: 1024px) {
/* Avada mobile menu bar must be visible */
body.bs-v4 .fusion-mobile-menu {
display: block !important;
visibility: visible !important;
height: auto !important;
min-height: 56px !important;
background: #fff !important;
border-bottom: 1px solid var(--bs-mist, #e8e8ec) !important;
position: relative !important;
z-index: 1001 !important;
}
/* Mobile menu trigger (hamburger) must be visible */
body.bs-v4 .fusion-mobile-menu-trigger {
display: inline-flex !important;
visibility: visible !important;
align-items: center !important;
justify-content: center !important;
width: 40px !important;
height: 40px !important;
cursor: pointer !important;
}
/* Mobile logo visible */
body.bs-v4 .fusion-mobile-menu .fusion-logo {
display: flex !important;
visibility: visible !important;
align-items: center !important;
}
body.bs-v4 .fusion-mobile-menu .fusion-logo img {
display: block !important;
max-height: 32px !important;
width: auto !important;
}
/* Override the desktop flex-row rule that crushes mobile */
body.bs-v4 .fusion-header .fusion-row {
display: block !important;
height: auto !important;
min-height: 0 !important;
max-width: none !important;
padding: 0 !important;
}
/* Desktop main menu hidden on mobile (Avada default) */
body.bs-v4 .fusion-main-menu {
display: none !important;
}
/* Header wrapper must not collapse */
body.bs-v4 .fusion-header-wrapper {
display: block !important;
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
}
body.bs-v4 .fusion-header {
display: block !important;
visibility: visible !important;
height: auto !important;
min-height: 0 !important;
}
}
/* ── DESKTOP GRID: fix empty column / gap issue ── */
@media (min-width: 1025px) {
body.bs-v4 .bs4-prods {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 20px !important;
}
/* Products with no image should still render but with a placeholder bg */
body.bs-v4 .bs4-prod__media {
background: var(--bs-mist, #f4f4f6) !important;
min-height: 180px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* Empty category span: hide if no text content */
body.bs-v4 .bs4-prod__cat:empty {
display: none !important;
}
}
/* ── SHARED: ensure product grid items don't collapse ── */
body.bs-v4 .bs4-prod {
display: block !important;
min-height: 240px !important;
background: #fff !important;
border: 1px solid var(--bs-mist, #e8e8ec) !important;
border-radius: 8px !important;
overflow: hidden !important;
text-decoration: none !important;
color: inherit !important;
}
body.bs-v4 .bs4-prod__media {
width: 100% !important;
aspect-ratio: 1/1 !important;
overflow: hidden !important;
}
body.bs-v4 .bs4-prod__media img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
}
body.bs-v4 .bs4-prod__body {
padding: 16px !important;
}
body.bs-v4 .bs4-prod__cat {
font-size: 0.75rem !important;
color: var(--bs-muted, #8a8a92) !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
display: block !important;
margin-bottom: 4px !important;
}
body.bs-v4 .bs4-prod__body h3 {
font-size: 0.95rem !important;
font-weight: 600 !important;
line-height: 1.4 !important;
margin: 0 0 8px !important;
}
body.bs-v4 .bs4-prod__price {
font-size: 1rem !important;
font-weight: 700 !important;
color: var(--bs-accent, #c3050f) !important;
}
/* OMEGA_PART_33_MOBILE_HEADER_GRID_END */
/* OMEGA_PART_33_HOME_PROPORTIES_START */
/* Part 33 — Homepage proporties & uniforme cards (2026-09-15)
Scope: body.bs-v4 — geen locked selectors (bs4-hero, bs-cta, sub-menu) aangetast.
Doel: consistente aspect-ratio, object-fit, uniforme card-hoogtes in .bs4-prods en .bs4-cats. */
body.bs-v4 .bs4-prod__media {
aspect-ratio: 4 / 3;
overflow: hidden;
background: #f5f5f5;
}
body.bs-v4 .bs4-prod__media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
body.bs-v4 .bs4-prod {
display: flex;
flex-direction: column;
height: 100%;
}
body.bs-v4 .bs4-prod__body {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 6px;
}
body.bs-v4 .bs4-prod__cat {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #888;
}
body.bs-v4 .bs4-prod h3 {
font-size: 1rem;
line-height: 1.35;
margin: 0;
}
body.bs-v4 .bs4-prod__price {
margin-top: auto;
font-weight: 600;
}
/* Category tiles — uniforme afmetingen */
body.bs-v4 .bs4-cat-tile {
display: flex;
flex-direction: column;
height: 100%;
}
body.bs-v4 .bs4-cat-img {
aspect-ratio: 16 / 10;
overflow: hidden;
background: #f0f0f0;
}
body.bs-v4 .bs4-cat-img img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
body.bs-v4 .bs4-cat-label {
padding: 12px 0 4px;
font-size: 0.95rem;
font-weight: 600;
line-height: 1.3;
}
body.bs-v4 .bs4-cat-count {
font-size: 0.8rem;
color: #777;
padding-bottom: 12px;
}
/* People-sectie — beeld vult breedte, geen vast hoogte */
body.bs-v4 .bs4-people__media img {
width: 100%;
height: auto;
object-fit: cover;
display: block;
}
/* B2B-sectie — idem */
body.bs-v4 .bs4-b2b__media img {
width: 100%;
height: auto;
object-fit: cover;
display: block;
}
/* Product grid — uniforme rijen */
body.bs-v4 .bs4-prods {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 20px;
align-items: stretch;
}
@media (max-width: 767px) {
body.bs-v4 .bs4-prods {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
body.bs-v4 .bs4-prod__media {
aspect-ratio: 1 / 1;
}
}
/* OMEGA_PART_33_HOME_PROPORTIES_END */
/* OMEGA_PART_206_PDP_CTA_START */
/* ============================================================================
WEB-04 (2026-09-20) — PDP sticky buy-bar + B2B Offerte CTA
Scope: body.bs-v4 (DESIGN-FREEZE v4). Bron: /workspace/redesign_2026/v4_luxe/parts/206_pdp_cta.css
Doel: (a) persistent "In winkelmand" buy-bar op mobile (<768px, fixed bottom);
(b) secundaire B2B "Offerte aanvragen" CTA (40px, koper accent).
Geen inline-styles; bs-cta/bs4-hero/sub-menu/fusion-main-menu blijven ongewijzigd.
============================================================================ */
/* 1) Redundante inline-styled mu-plugin knop onderdrukken (schendt LUXE: geen inline-styles) */
body.bs-v4 .bioff-pdp-cta { display: none !important; }
/* 2) Buy-bar basis (desktop >=768px: normale flow, page-bottom strip — geen overlap) */
body.bs-v4 .bs-pdp-stickybar {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
padding: 12px 20px;
background: var(--bs-porcelain, #F7F8FA);
border-top: 1px solid #e8d5c0;
box-shadow: 0 -2px 12px rgba(30, 41, 59, .06);
}
body.bs-v4 .bs-pdp-stickybar__price {
font: 700 16px/1.1 var(--bs-font, sans-serif);
color: var(--bs-ink, #1e293b);
white-space: nowrap;
}
body.bs-v4 .bs-pdp-stickybar__price ins { text-decoration: none; color: var(--bs-ink, #1e293b); font-weight: 700; }
body.bs-v4 .bs-pdp-stickybar__price del { color: #94a3b8; font-weight: 500; margin-right: 6px; }
body.bs-v4 .bs-pdp-stickybar__cart { display: contents; }
body.bs-v4 .bs-pdp-stickybar__btn {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 40px;
padding: 0 20px;
border-radius: 4px;
border: 1.5px solid transparent;
font: 600 14px/1 var(--bs-font, sans-serif);
text-decoration: none;
cursor: pointer;
white-space: nowrap;
transition: background .2s ease, color .2s ease, border-color .2s ease;
}
/* Primaire CTA — In winkelmand (inkt) */
body.bs-v4 .bs-pdp-stickybar__btn--cart {
background: var(--bs-ink, #1e293b);
color: #fff;
border-color: var(--bs-ink, #1e293b);
}
body.bs-v4 .bs-pdp-stickybar__btn--cart:hover { background: #0f172a; border-color: #0f172a; color: #fff; }
/* Secundaire CTA — Offerte aanvragen (koper accent, 40px, secundair) */
body.bs-v4 .bs-pdp-stickybar__btn--offerte {
background: transparent;
color: var(--bs-copper, #B7692A);
border-color: var(--bs-copper, #B7692A);
}
body.bs-v4 .bs-pdp-stickybar__btn--offerte:hover { background: var(--bs-copper, #B7692A); color: #fff; }
/* 3) Mobiel (<768px): buy-bar wordt persistent fixed bottom */
@media (max-width: 767px) {
body.bs-v4 .bs-pdp-stickybar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 998;
padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
gap: 8px;
}
body.bs-v4 .bs-pdp-stickybar__price { font-size: 14px; }
body.bs-v4 .bs-pdp-stickybar__btn { flex: 1 1 0; height: 40px; padding: 0 12px; font-size: 13.5px; }
/* Voorkom dat de fixed bar de laatste inhoud/footer bedekt */
body.bs-v4.has-sticky-pdpbar #main,
body.bs-v4.has-sticky-pdpbar .fusion-footer { padding-bottom: 72px; }
}
/* OMEGA_PART_206_PDP_CTA_END */
/* OMEGA_PART_207_PDP_CTA_STICKY_START */
/* WEB-04 stap 2a spec-compliance: position:sticky; bottom (in-flow).
Sticky bottom:0 op body-level bar (mu-plugin bs-pdp-stickybar.php via wp_footer)
= persistent bottom bar tijdens scrollen + settle-in-flow bij pagina-einde.
In-flow => zichtbaar in ALLE screenshot-modi (fixed-elementen zijn in full-page
captures onzeker/onzichtbaar). Geen footer-overlap => part-206 padding-hack uit. */
@media (max-width: 767px) {
body.bs-v4 .bs-pdp-stickybar {
position: -webkit-sticky;
position: sticky;
left: auto;
right: auto;
bottom: 0;
z-index: 998;
}
body.bs-v4.has-sticky-pdpbar #main,
body.bs-v4.has-sticky-pdpbar .fusion-footer {
padding-bottom: 0;
}
}
/* OMEGA_PART_207_PDP_CTA_STICKY_END */
/* OMEGA_PART_100_MENU_MOBILE_START */
/* WEB-02: Functionele mobile menu fixes (aria, scroll, keyboard) — GEEN visuele wijzigingen */
/* Scope: body.bs-v4 only. Locked selectors (bs-cta, bs4-hero, sub-menu, fusion-main-menu) NIET aangeraakt. */
body.bs-v4 .fusion-mobile-menu {
/* Zorg dat het mobiele menu scrollbaar is zodat submenu-items nooit afgesneden worden */
overflow-y: auto;
-webkit-overflow-scrolling: touch;
max-height: calc(100vh - 72px);
}
body.bs-v4 .fusion-mobile-menu .sub-menu {
/* Submenu-items volledig reikbaar: geen clip/overlap */
overflow: visible;
visibility: visible;
min-height: 0;
}
body.bs-v4 .fusion-mobile-menu .menu-item-has-children > .sub-menu {
/* Avada modern: submenu collapsible — zorg dat items niet verdwijnen */
display: block;
}
/* Keyboard focus-visible voor toegankelijkheid (geen visuele verandering bij muis) */
body.bs-v4 .fusion-mobile-menu a:focus-visible,
body.bs-v4 .fusion-mobile-menu button:focus-visible,
body.bs-v4 .fusion-mobile-menu [role="button"]:focus-visible {
outline: 2px solid #b87333;
outline-offset: 2px;
}
/* Toggle button: focus-visible */
body.bs-v4 a.fusion-mobile-menu-icon:focus-visible,
body.bs-v4 .fusion-mobile-menu-icon:focus-visible {
outline: 2px solid #b87333;
outline-offset: 2px;
}
/* Ensure submenu items are not hidden by parent overflow */
body.bs-v4 .fusion-mobile-menu nav,
body.bs-v4 .fusion-mobile-menu .fusion-menu {
overflow: visible;
}
/* OMEGA_PART_100_MENU_MOBILE_END */
/* OMEGA_PART_100_MENU_MOBILE_START */
/* WEB-02: Functionele mobile menu fixes (aria, scroll, keyboard) — GEEN visuele wijzigingen */
/* Scope: body.bs-v4 only. Locked selectors (bs-cta, bs4-hero, sub-menu, fusion-main-menu) NIET aangeraakt. */
body.bs-v4 .fusion-mobile-menu {
/* Zorg dat het mobiele menu scrollbaar is zodat submenu-items nooit afgesneden worden */
overflow-y: auto;
-webkit-overflow-scrolling: touch;
max-height: calc(100vh - 72px);
}
body.bs-v4 .fusion-mobile-menu .sub-menu {
/* Submenu-items volledig reikbaar: geen clip/overlap */
overflow: visible;
visibility: visible;
min-height: 0;
}
body.bs-v4 .fusion-mobile-menu .menu-item-has-children > .sub-menu {
/* Avada modern: submenu collapsible — zorg dat items niet verdwijnen */
display: block;
}
/* Keyboard focus-visible voor toegankelijkheid (geen visuele verandering bij muis) */
body.bs-v4 .fusion-mobile-menu a:focus-visible,
body.bs-v4 .fusion-mobile-menu button:focus-visible,
body.bs-v4 .fusion-mobile-menu [role="button"]:focus-visible {
outline: 2px solid #b87333;
outline-offset: 2px;
}
/* Toggle button: focus-visible */
body.bs-v4 a.fusion-mobile-menu-icon:focus-visible,
body.bs-v4 .fusion-mobile-menu-icon:focus-visible {
outline: 2px solid #b87333;
outline-offset: 2px;
}
/* Ensure submenu items are not hidden by parent overflow */
body.bs-v4 .fusion-mobile-menu nav,
body.bs-v4 .fusion-mobile-menu .fusion-menu {
overflow: visible;
}
/* OMEGA_PART_100_MENU_MOBILE_END */
/* WEB05_CSS_START */
body.bs-v4 .bs-web05-nav-wrap {
clear: both;
margin: 0 0 24px;
padding: 16px 0;
border-bottom: 1px solid rgba(20, 20, 20, 0.08);
}
body.bs-v4 .bs-web05-breadcrumb ol {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 8px 10px;
margin: 0;
padding: 0;
font-size: 13px;
line-height: 1.4;
color: #5a5a5a;
}
body.bs-v4 .bs-web05-breadcrumb li {
display: inline-flex;
align-items: center;
gap: 10px;
min-width: 0;
}
body.bs-v4 .bs-web05-breadcrumb li:not(:last-child)::after {
content: "/";
color: #b7b7b7;
}
body.bs-v4 .bs-web05-breadcrumb a {
color: #222;
text-decoration: none;
}
body.bs-v4 .bs-web05-breadcrumb a:hover {
color: #b87333;
text-decoration: underline;
}
body.bs-v4 .bs-web05-breadcrumb .current,
body.bs-v4 .bs-web05-breadcrumb .bs-web05-current {
color: #111;
font-weight: 600;
}
body.bs-v4 .bs-web05-tree {
margin-top: 10px;
display: flex;
flex-wrap: wrap;
gap: 8px 12px;
align-items: center;
font-size: 13px;
}
body.bs-v4 .bs-web05-tree a {
color: #333;
text-decoration: none;
padding: 6px 10px;
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 999px;
background: #fff;
}
body.bs-v4 .bs-web05-tree a:hover {
border-color: #b87333;
color: #b87333;
}
body.bs-v4 .bs-web05-tree-parent {
font-weight: 600;
}
body.bs-v4 .bs-web05-tree-label {
color: #666;
margin-right: 2px;
}
body.bs-v4 .bs-web05-deadend {
margin: 18px 0;
padding: 18px;
border: 1px solid rgba(0, 0, 0, 0.10);
background: #fafafa;
border-radius: 12px;
}
body.bs-v4 .bs-web05-deadend p {
margin: 0 0 12px;
color: #333;
}
body.bs-v4 .bs-web05-deadend a {
color: #b87333;
text-decoration: none;
}
body.bs-v4.single-product .breadcrumb:not(.bs-web05-breadcrumb),
body.bs-v4.tax-product_cat .breadcrumb:not(.bs-web05-breadcrumb) {
display: none !important;
}
@media (max-width: 768px) {
body.bs-v4 .bs-web05-nav-wrap {
padding: 12px 0;
}
body.bs-v4 .bs-web05-breadcrumb ol {
font-size: 12px;
gap: 6px 8px;
}
body.bs-v4 .bs-web05-tree {
gap: 6px 8px;
}
body.bs-v4 .bs-web05-tree a {
padding: 5px 8px;
}
}
/* WEB05_CSS_END */
/* Part 100 — CTA Color & Icon Shape Fix (2026-09-17)
BUG-FIX: Base style.css lijn 1196 zet background:var(--bs-accent)=#ff7a00 (oranje)
op de CTA-knop. Part 98 voegde copper border toe maar vergeten de base background
te overschrijven. Dit part herstelt de intended copper-look.
Design-freeze compliant: 40px secundaire knop, copper accent, GEEN band-achtergrond. */
/* --- CTA "Offerte aanvragen": base state = transparent bg + copper border (GEEN oranje) --- */
body.bs-v4 .fusion-main-menu > ul > li.bs-cta > a {
background: transparent !important;
border: 1.5px solid #b87333 !important;
color: #101828 !important;
border-radius: 6px !important;
}
/* --- CTA hover/focus: copper fill --- */
body.bs-v4 .fusion-main-menu > ul > li.bs-cta > a:hover,
body.bs-v4 .fusion-main-menu > ul > li.bs-cta > a:focus {
background: #b87333 !important;
color: #fff !important;
}
/* --- Iconen: vierkant (4px radius) in plaats van rond (50%) ---
Part 98/99 gebruikten border-radius:50% wat iconen cirkelvormig maakte.
Design-intent: subtiele afgeronde hoeken, niet cirkels. */
body.bs-v4 .fusion-main-menu .fusion-main-menu-icon,
body.bs-v4 .fusion-main-menu-search .fusion-main-menu-icon,
body.bs-v4 .fusion-main-menu-cart .fusion-main-menu-icon {
border-radius: 4px !important;
}
/* --- Hover-ring op iconen: subtiele copper tint (geen cirkel) --- */
body.bs-v4 .fusion-main-menu-search:hover > a,
body.bs-v4 .fusion-main-menu-cart:hover > a {
background-color: rgba(184, 115, 51, 0.08) !important;
border-radius: 4px !important;
}
/* Part 100 — Cart Counter Badge SUBTLETY FIX (2026-09-17)
Overrides Part 99's aggressive #b87333 solid fill on .fusion-widget-cart-counter.
Design-freeze compliant: new part file, append-only (>>) on style.css, body.bs-v4 scoped.
Goal: premium subtle badge with copper accent border, NOT a loud orange blob.
Research source: /workspace/RESEARCH_header_bug_diagnosis.md */
body.bs-v4 .fusion-widget-cart-number {
background-color: rgba(184, 115, 51, 0.12) !important;
color: #7a4f25 !important;
border: 1px solid rgba(184, 115, 51, 0.45) !important;
border-radius: 10px !important;
min-width: 16px !important;
height: 16px !important;
font-size: 9px !important;
font-weight: 700 !important;
line-height: 14px !important;
text-align: center !important;
}
/* ============================================================
Part 101 — Cart Badge Subtle Fix (2026-09-17)
Scope: body.bs-v4 ONLY
Doel: Verwijder massieve #b87333 solid-fill op .fusion-widget-cart-counter.
Vervang door subtiele koperen rand + transparante achtergrond.
Bron: RESEARCH_header_bug_diagnosis.md — "oranje ovaal" bug
============================================================ */
body.bs-v4 .fusion-widget-cart-number {
background-color: rgba(184, 115, 51, 0.15) !important;
color: #b87333 !important;
border: 1px solid rgba(184, 115, 51, 0.5) !important;
border-radius: 50% !important;
min-width: 16px !important;
height: 16px !important;
font-size: 10px !important;
font-weight: 700 !important;
line-height: 14px !important;
text-align: center !important;
position: absolute !important;
top: 2px !important;
right: 2px !important;
pointer-events: none !important;
}
/** Part 34: Checkout & Cart (v4 luxe) */
/** Part 34: Checkout & Cart (v4 luxe) */
/* ============================================================
BiSelect v4 LUXE — Checkout & Cart (Part 34)
Scope: body.bs-v4 .woocommerce-cart, body.bs-v4 .woocommerce-checkout
============================================================ */
/* --- Cart page --- */
body.bs-v4 .woocommerce-cart .shop_table {
border: 1px solid #e8e4df;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
body.bs-v4 .woocommerce-cart .shop_table th {
background: #faf9f7;
padding: 16px 20px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
color: #2c2c2c;
border-bottom: 2px solid #e8e4df;
}
body.bs-v4 .woocommerce-cart .shop_table td {
padding: 18px 20px;
border-bottom: 1px solid #f0ede9;
vertical-align: middle;
}
body.bs-v4 .woocommerce-cart .shop_table .product-name {
font-weight: 500;
color: #1a1a1a;
}
body.bs-v4 .woocommerce-cart .shop_table .amount {
font-weight: 600;
color: #1a1a1a;
}
body.bs-v4 .woocommerce-cart .coupon .input-text {
border: 1px solid #d4cfc8;
border-radius: 6px;
padding: 12px 16px;
font-size: 14px;
}
body.bs-v4 .woocommerce-cart .coupon button,
body.bs-v4 .woocommerce-cart a.update_cart {
background: #1a1a1a;
color: #fff;
border: none;
border-radius: 6px;
padding: 12px 28px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
}
body.bs-v4 .woocommerce-cart .coupon button:hover,
body.bs-v4 .woocommerce-cart a.update_cart:hover {
background: #333;
}
/* --- Checkout page --- */
body.bs-v4 .woocommerce-checkout form.checkout {
max-width: 720px;
}
body.bs-v4 .woocommerce-checkout h3,
body.bs-v4 .woocommerce-checkout .woocommerce-billing-fields h3 {
font-size: 18px;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 2px solid #e8e4df;
}
body.bs-v4 .woocommerce-checkout .form-row {
margin-bottom: 16px;
}
body.bs-v4 .woocommerce-checkout .form-row label {
display: block;
font-size: 13px;
font-weight: 500;
color: #444;
margin-bottom: 6px;
}
body.bs-v4 .woocommerce-checkout .form-row input.input-text,
body.bs-v4 .woocommerce-checkout .form-row select {
width: 100%;
border: 1px solid #d4cfc8;
border-radius: 6px;
padding: 12px 16px;
font-size: 14px;
transition: border-color 0.2s, box-shadow 0.2s;
}
body.bs-v4 .woocommerce-checkout .form-row input.input-text:focus,
body.bs-v4 .woocommerce-checkout .form-row select:focus {
outline: none;
border-color: #b8860b;
box-shadow: 0 0 0 3px rgba(184,134,11,0.1);
}
body.bs-v4 .woocommerce-checkout .payment_methods {
border: 1px solid #e8e4df;
border-radius: 8px;
padding: 20px;
margin-top: 24px;
}
body.bs-v4 .woocommerce-checkout .payment_methods li {
padding: 12px 0;
border-bottom: 1px solid #f0ede9;
}
body.bs-v4 .woocommerce-checkout .place-order {
background: #1a1a1a;
color: #fff;
border: none;
border-radius: 6px;
padding: 16px 32px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
}
body.bs-v4 .woocommerce-checkout .place-order:hover {
background: #b8860b;
}
/* --- Mobile adjustments --- */
@media (max-width: 768px) {
body.bs-v4 .woocommerce-cart .shop_table {
font-size: 13px;
}
body.bs-v4 .woocommerce-cart .shop_table th,
body.bs-v4 .woocommerce-cart .shop_table td {
padding: 12px;
}
body.bs-v4 .woocommerce-checkout form.checkout {
max-width: 100%;
}
}
/* ============================================================
BiSelect v4 LUXE — Part 208: Cart & Checkout (koopflow)
Scope: body.bs-v4 + WooCommerce cart/checkout pages
Design: premium, ruim, koperen accenten, inkt/ivory palette
============================================================ */
/* --- CART PAGE --- */
body.bs-v4.woocommerce-cart .woocommerce-cart,
body.bs-v4.page-id-1234 .woocommerce-cart {
padding: 48px 0;
}
body.bs-v4 .woocommerce-cart-form {
background: #faf8f5;
border: 1px solid #e8e4df;
border-radius: 8px;
overflow: hidden;
}
body.bs-v4 .woocommerce-cart-form table.shop_table {
margin: 0;
width: 100%;
}
body.bs-v4 .woocommerce-cart-form table.shop_table th {
background: #1a1a1a;
color: #faf8f5;
font-weight: 600;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 14px 20px;
}
body.bs-v4 .woocommerce-cart-form table.shop_table td {
padding: 16px 20px;
border-bottom: 1px solid #e8e4df;
vertical-align: middle;
}
body.bs-v4 .woocommerce-cart-form .product-thumbnail img {
width: 72px;
height: 72px;
object-fit: contain;
border-radius: 4px;
}
body.bs-v4 .woocommerce-cart-form .amount,
body.bs-v4 .woocommerce-cart-form .price {
font-weight: 600;
color: #1a1a1a;
}
body.bs-v4 .woocommerce-cart-form .button,
body.bs-v4 .woocommerce-cart-form .btn {
background: #b87333;
color: #fff;
border: none;
padding: 12px 28px;
border-radius: 4px;
font-weight: 600;
transition: background 0.2s;
}
body.bs-v4 .woocommerce-cart-form .button:hover,
body.bs-v4 .woocommerce-cart-form .btn:hover {
background: #9a5f28;
}
/* Cart totals sidebar */
body.bs-v4 .cart-collaterals .cart_totals {
background: #1a1a1a;
color: #faf8f5;
border-radius: 8px;
padding: 28px;
}
body.bs-v4 .cart-collaterals .cart_totals h2,
body.bs-v4 .cart-collaterals .cart_totals .woocommerce-widget-title {
color: #faf8f5;
font-size: 1.1rem;
margin-bottom: 20px;
}
body.bs-v4 .cart-collaterals .cart_totals th,
body.bs-v4 .cart-collaterals .cart_totals td {
border-color: #333;
padding: 10px 0;
}
body.bs-v4 .cart-collaterals .cart_totals .order-total {
border-top: 2px solid #b87333;
font-size: 1.1rem;
font-weight: 700;
}
body.bs-v4 .cart-collaterals .cross-sells {
margin-top: 32px;
}
/* Empty cart state */
body.bs-v4 .woocommerce-no-products-found {
text-align: center;
padding: 64px 20px;
color: #666;
font-size: 1.05rem;
}
body.bs-v4 .woocommerce-no-products-found a.button {
display: inline-block;
margin-top: 20px;
background: #b87333;
color: #fff;
padding: 14px 32px;
border-radius: 4px;
font-weight: 600;
}
/* --- CHECKOUT PAGE --- */
body.bs-v4.woocommerce-checkout .woocommerce-checkout {
padding: 48px 0;
}
body.bs-v4 .woocommerce-checkout form.checkout {
max-width: 100%;
}
body.bs-v4 .woocommerce-checkout h3,
body.bs-v4 .woocommerce-checkout .woocommerce-billing-fields__field-wrapper h3,
body.bs-v4 .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper h3 {
font-size: 1.15rem;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 2px solid #b87333;
}
body.bs-v4 .woocommerce-checkout .form-row {
margin-bottom: 16px;
}
body.bs-v4 .woocommerce-checkout .form-row label {
font-weight: 600;
font-size: 0.9rem;
color: #1a1a1a;
display: block;
margin-bottom: 6px;
}
body.bs-v4 .woocommerce-checkout .form-row input,
body.bs-v4 .woocommerce-checkout .form-row select,
body.bs-v4 .woocommerce-checkout .form-row textarea {
width: 100%;
padding: 12px 14px;
border: 1px solid #d4d0cb;
border-radius: 4px;
font-size: 0.95rem;
background: #fff;
transition: border-color 0.2s;
}
body.bs-v4 .woocommerce-checkout .form-row input:focus,
body.bs-v4 .woocommerce-checkout .form-row select:focus,
body.bs-v4 .woocommerce-checkout .form-row textarea:focus {
outline: none;
border-color: #b87333;
box-shadow: 0 0 0 3px rgba(184, 115, 51, 0.1);
}
body.bs-v4 .woocommerce-checkout .form-row-wide {
width: 100%;
}
/* Payment methods */
body.bs-v4 .woocommerce-checkout-payment,
body.bs-v4 #payment {
background: #faf8f5;
border: 1px solid #e8e4df;
border-radius: 8px;
padding: 24px;
}
body.bs-v4 #payment ul.payment_methods {
list-style: none;
padding: 0;
margin: 0 0 16px;
}
body.bs-v4 #payment ul.payment_methods li {
padding: 14px 16px;
border: 1px solid #e8e4df;
border-radius: 6px;
margin-bottom: 10px;
cursor: pointer;
transition: border-color 0.2s, background 0.2s;
}
body.bs-v4 #payment ul.payment_methods li:hover {
border-color: #b87333;
background: #fff;
}
body.bs-v4 #payment ul.payment_methods li input[type="radio"] {
margin-right: 10px;
accent-color: #b87333;
}
body.bs-v4 #payment .place-order {
text-align: right;
}
body.bs-v4 #payment #place_order {
background: #b87333;
color: #fff;
border: none;
padding: 16px 40px;
border-radius: 4px;
font-size: 1rem;
font-weight: 700;
cursor: pointer;
transition: background 0.2s;
}
body.bs-v4 #payment #place_order:hover {
background: #9a5f28;
}
/* Order review */
body.bs-v4 .woocommerce-checkout-review-order {
background: #1a1a1a;
color: #faf8f5;
border-radius: 8px;
padding: 28px;
}
body.bs-v4 .woocommerce-checkout-review-order h4,
body.bs-v4 .woocommerce-checkout-review-order .woocommerce-widget-title {
color: #faf8f5;
font-size: 1.05rem;
margin-bottom: 16px;
}
body.bs-v4 .woocommerce-checkout-review-order-table th,
body.bs-v4 .woocommerce-checkout-review-order-table td {
border-color: #333;
padding: 12px 0;
color: #faf8f5;
}
/* Checkout notices */
body.bs-v4 .woocommerce-notices-wrapper .woocommerce-error,
body.bs-v4 .woocommerce-notices-wrapper .woocommerce-info {
border-left: 4px solid #b87333;
border-radius: 4px;
padding: 16px 20px;
margin-bottom: 16px;
}
/* --- MOBILE ADJUSTMENTS --- */
@media (max-width: 768px) {
body.bs-v4 .woocommerce-cart-form {
border-radius: 0;
border-left: none;
border-right: none;
}
body.bs-v4 .woocommerce-cart-form table.shop_table th,
body.bs-v4 .woocommerce-cart-form table.shop_table td {
padding: 12px 14px;
}
body.bs-v4 .cart-collaterals .cart_totals {
padding: 20px;
margin-top: 24px;
}
body.bs-v4 .woocommerce-checkout form.checkout {
max-width: 100%;
padding: 0 16px;
}
body.bs-v4 .woocommerce-checkout .form-row {
margin-bottom: 12px;
}
body.bs-v4 #payment #place_order {
width: 100%;
text-align: center;
}
body.bs-v4 .woocommerce-checkout-review-order {
padding: 20px;
margin-top: 24px;
}
}
/* OMEGA_PART_208: Cart & Checkout koopflow */
/* ============================================================
BiSelect v4 LUXE — Part 208: Cart & Checkout (koopflow)
Scope: body.bs-v4 + WooCommerce cart/checkout pages
Design: premium, ruim, koperen accenten, inkt/ivory palette
============================================================ */
/* --- CART PAGE --- */
body.bs-v4.woocommerce-cart .woocommerce-cart,
body.bs-v4.page-id-1234 .woocommerce-cart {
padding: 48px 0;
}
body.bs-v4 .woocommerce-cart-form {
background: #faf8f5;
border: 1px solid #e8e4df;
border-radius: 8px;
overflow: hidden;
}
body.bs-v4 .woocommerce-cart-form table.shop_table {
margin: 0;
width: 100%;
}
body.bs-v4 .woocommerce-cart-form table.shop_table th {
background: #1a1a1a;
color: #faf8f5;
font-weight: 600;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 14px 20px;
}
body.bs-v4 .woocommerce-cart-form table.shop_table td {
padding: 16px 20px;
border-bottom: 1px solid #e8e4df;
vertical-align: middle;
}
body.bs-v4 .woocommerce-cart-form .product-thumbnail img {
width: 72px;
height: 72px;
object-fit: contain;
border-radius: 4px;
}
body.bs-v4 .woocommerce-cart-form .amount,
body.bs-v4 .woocommerce-cart-form .price {
font-weight: 600;
color: #1a1a1a;
}
body.bs-v4 .woocommerce-cart-form .button,
body.bs-v4 .woocommerce-cart-form .btn {
background: #b87333;
color: #fff;
border: none;
padding: 12px 28px;
border-radius: 4px;
font-weight: 600;
transition: background 0.2s;
}
body.bs-v4 .woocommerce-cart-form .button:hover,
body.bs-v4 .woocommerce-cart-form .btn:hover {
background: #9a5f28;
}
/* Cart totals sidebar */
body.bs-v4 .cart-collaterals .cart_totals {
background: #1a1a1a;
color: #faf8f5;
border-radius: 8px;
padding: 28px;
}
body.bs-v4 .cart-collaterals .cart_totals h2,
body.bs-v4 .cart-collaterals .cart_totals .woocommerce-widget-title {
color: #faf8f5;
font-size: 1.1rem;
margin-bottom: 20px;
}
body.bs-v4 .cart-collaterals .cart_totals th,
body.bs-v4 .cart-collaterals .cart_totals td {
border-color: #333;
padding: 10px 0;
}
body.bs-v4 .cart-collaterals .cart_totals .order-total {
border-top: 2px solid #b87333;
font-size: 1.1rem;
font-weight: 700;
}
body.bs-v4 .cart-collaterals .cross-sells {
margin-top: 32px;
}
/* Empty cart state */
body.bs-v4 .woocommerce-no-products-found {
text-align: center;
padding: 64px 20px;
color: #666;
font-size: 1.05rem;
}
body.bs-v4 .woocommerce-no-products-found a.button {
display: inline-block;
margin-top: 20px;
background: #b87333;
color: #fff;
padding: 14px 32px;
border-radius: 4px;
font-weight: 600;
}
/* --- CHECKOUT PAGE --- */
body.bs-v4.woocommerce-checkout .woocommerce-checkout {
padding: 48px 0;
}
body.bs-v4 .woocommerce-checkout form.checkout {
max-width: 100%;
}
body.bs-v4 .woocommerce-checkout h3,
body.bs-v4 .woocommerce-checkout .woocommerce-billing-fields__field-wrapper h3,
body.bs-v4 .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper h3 {
font-size: 1.15rem;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 2px solid #b87333;
}
body.bs-v4 .woocommerce-checkout .form-row {
margin-bottom: 16px;
}
body.bs-v4 .woocommerce-checkout .form-row label {
font-weight: 600;
font-size: 0.9rem;
color: #1a1a1a;
display: block;
margin-bottom: 6px;
}
body.bs-v4 .woocommerce-checkout .form-row input,
body.bs-v4 .woocommerce-checkout .form-row select,
body.bs-v4 .woocommerce-checkout .form-row textarea {
width: 100%;
padding: 12px 14px;
border: 1px solid #d4d0cb;
border-radius: 4px;
font-size: 0.95rem;
background: #fff;
transition: border-color 0.2s;
}
body.bs-v4 .woocommerce-checkout .form-row input:focus,
body.bs-v4 .woocommerce-checkout .form-row select:focus,
body.bs-v4 .woocommerce-checkout .form-row textarea:focus {
outline: none;
border-color: #b87333;
box-shadow: 0 0 0 3px rgba(184, 115, 51, 0.1);
}
body.bs-v4 .woocommerce-checkout .form-row-wide {
width: 100%;
}
/* Payment methods */
body.bs-v4 .woocommerce-checkout-payment,
body.bs-v4 #payment {
background: #faf8f5;
border: 1px solid #e8e4df;
border-radius: 8px;
padding: 24px;
}
body.bs-v4 #payment ul.payment_methods {
list-style: none;
padding: 0;
margin: 0 0 16px;
}
body.bs-v4 #payment ul.payment_methods li {
padding: 14px 16px;
border: 1px solid #e8e4df;
border-radius: 6px;
margin-bottom: 10px;
cursor: pointer;
transition: border-color 0.2s, background 0.2s;
}
body.bs-v4 #payment ul.payment_methods li:hover {
border-color: #b87333;
background: #fff;
}
body.bs-v4 #payment ul.payment_methods li input[type="radio"] {
margin-right: 10px;
accent-color: #b87333;
}
body.bs-v4 #payment .place-order {
text-align: right;
}
body.bs-v4 #payment #place_order {
background: #b87333;
color: #fff;
border: none;
padding: 16px 40px;
border-radius: 4px;
font-size: 1rem;
font-weight: 700;
cursor: pointer;
transition: background 0.2s;
}
body.bs-v4 #payment #place_order:hover {
background: #9a5f28;
}
/* Order review */
body.bs-v4 .woocommerce-checkout-review-order {
background: #1a1a1a;
color: #faf8f5;
border-radius: 8px;
padding: 28px;
}
body.bs-v4 .woocommerce-checkout-review-order h4,
body.bs-v4 .woocommerce-checkout-review-order .woocommerce-widget-title {
color: #faf8f5;
font-size: 1.05rem;
margin-bottom: 16px;
}
body.bs-v4 .woocommerce-checkout-review-order-table th,
body.bs-v4 .woocommerce-checkout-review-order-table td {
border-color: #333;
padding: 12px 0;
color: #faf8f5;
}
/* Checkout notices */
body.bs-v4 .woocommerce-notices-wrapper .woocommerce-error,
body.bs-v4 .woocommerce-notices-wrapper .woocommerce-info {
border-left: 4px solid #b87333;
border-radius: 4px;
padding: 16px 20px;
margin-bottom: 16px;
}
/* --- MOBILE ADJUSTMENTS --- */
@media (max-width: 768px) {
body.bs-v4 .woocommerce-cart-form {
border-radius: 0;
border-left: none;
border-right: none;
}
body.bs-v4 .woocommerce-cart-form table.shop_table th,
body.bs-v4 .woocommerce-cart-form table.shop_table td {
padding: 12px 14px;
}
body.bs-v4 .cart-collaterals .cart_totals {
padding: 20px;
margin-top: 24px;
}
body.bs-v4 .woocommerce-checkout form.checkout {
max-width: 100%;
padding: 0 16px;
}
body.bs-v4 .woocommerce-checkout .form-row {
margin-bottom: 12px;
}
body.bs-v4 #payment #place_order {
width: 100%;
text-align: center;
}
body.bs-v4 .woocommerce-checkout-review-order {
padding: 20px;
margin-top: 24px;
}
}
/* 209_mobile_cta.css — WEB-07: Mobiele CTA tap-targets (min 44px)
Scope: body.bs-v4, @media max-width:768px
Locked selectors NIET aangeraakt: bs-cta, bs4-hero, sub-menu, fusion-main-menu */
@media (max-width: 768px) {
/* Hero CTA (full-width section button op homepage) */
body.bs-v4.home .fusion-fullwidth .button,
body.bs-v4.home .fusion-fullwidth a.button {
min-height: 48px;
padding: 12px 32px;
font-size: 16px;
line-height: 1.4;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* WooCommerce add-to-cart (PDP) */
body.bs-v4 .woocommerce a.add_to_cart_button,
body.bs-v4 .woocommerce form.cart .button {
min-height: 48px;
padding: 12px 24px;
font-size: 16px;
line-height: 1.4;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* B2B offerte-knop in pagina-content */
body.bs-v4 .bs4-b2b .button,
body.bs-v4 .bs4-b2b a.button {
min-height: 48px;
padding: 12px 28px;
font-size: 16px;
line-height: 1.4;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Tap-afstand: min 12px tussen opeenvolgende CTA's */
body.bs-v4.home .fusion-fullwidth .button + .button,
body.bs-v4 .woocommerce form.cart .quantity + .button {
margin-top: 12px;
}
}
/* 210_mobile_cta.css — WEB-07 v2: mobiele CTA tap-targets (min 48px) + consistente afstand
Supplimenteert 209_mobile_cta.css (diens .fusion-fullwidth/.button selectors matchen de
echte v4-markup niet: hero/B2B gebruiken .bs3-btn zonder .button-class).
Scope: body.bs-v4, @media max-width:768px. Design-lock intact: bs-cta, bs4-hero-beeld/tekst,
sub-menu en fusion-main-menu NIET aangeraakt. */
@media (max-width: 768px) {
/* Hero-CTA + B2B-offerteknop + PDP add-to-cart: uniforme tap-target >= 48px */
body.bs-v4 .bs4-hero .bs3-btn,
body.bs-v4 .bs4-hero__actions .bs3-btn,
body.bs-v4 .bs4-b2b .bs3-btn,
body.bs-v4 .woocommerce a.add_to_cart_button,
body.bs-v4 .woocommerce .single_add_to_cart_button,
body.bs-v4 form.cart .button {
min-height: 48px !important;
font-size: 16px !important;
}
/* Actierij op mobiel: wikkelen + min 12px tussen knop en textlink */
body.bs-v4 .bs4-hero__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
}
/* Afstand quantity -> add-to-cart op smalle schermen */
body.bs-v4 form.cart .quantity + .single_add_to_cart_button {
margin-left: 12px;
}
}
/* 211_mobile_cta_fix.css — WEB-07 v3: fix min-height op inline CTA-elementen
Root-cause (iter-9 meting): .bs3-btn / .single_add_to_cart_button zijn
display:inline of inline-block zonder adequate line-height, waardoor
min-height:48px (part 210) de rendered height NIET bepaalt (gemeten 17/17/21px @390).
Fix: display:inline-block + line-height om min-height effectief te maken.
Scope: body.bs-v4, @media max-width:768px. Design-lock intact (bs-cta, bs4-hero,
fusion-main-menu, sub-menu NIET aangeraakt). */
@media (max-width: 768px) {
body.bs-v4 .bs4-hero .bs3-btn,
body.bs-v4 .bs4-hero__actions .bs3-btn,
body.bs-v4 .bs4-b2b .bs3-btn,
body.bs-v4 .woocommerce a.add_to_cart_button,
body.bs-v4 .woocommerce .single_add_to_cart_button,
body.bs-v4 form.cart .button {
display: inline-block !important;
min-height: 48px !important;
line-height: 1.2 !important;
vertical-align: middle;
}
}
/* Part 212: CTA desktop gap fix — neutraliseer 14px overflow @1440 (2026-09-24)
Root cause: margin-left:10px op (lijn 1585) + padding 0 16px + min-width:fit-content
(part 47) = knop reikt 14px te ver rechts. Fix: margin-left:0 (-10px) + padding 0 12px
(-8px) = 18px besparing. Scoped body.bs-v4 + min-width:992px → mobiel ongewijzigd. */
@media (min-width: 992px) {
body.bs-v4 .fusion-main-menu>ul>li.bs-cta>a,
body.bs-v4 .fusion-main-menu>ul>li.menu-item-167210>a {
margin-left: 0 !important;
padding: 0 12px !important;
}
}
/* Part 212: Fix desktop-regressie li.bs-cta rgap -14px @1440 */
@media (min-width: 992px) {
body.bs-v4 .fusion-main-menu>ul>li.bs-cta>a,
body.bs-v4 .fusion-main-menu>ul>li.menu-item-167210>a {
margin-left: 0 !important;
padding: 0 12px !important;
}
}
/* Part 212 — CTA desktop gap fix (WEB-07-QA T1/P1) */
@media (min-width: 992px) {
body.bs-v4 .fusion-main-menu>ul>li.bs-cta>a,
body.bs-v4 .fusion-main-menu>ul>li.menu-item-167210>a {
margin-left: 0 !important;
padding: 0 12px !important;
}
}
/* Part 212 — CTA desktop gap fix (2026-09-24, WEB-07-QA T1/P1) */
body.bs-v4 .fusion-main-menu>ul>li.bs-cta>a,
body.bs-v4 .fusion-main-menu>ul>li.menu-item-167210>a {
margin-left: 0 !important;
padding: 0 12px !important;
}
/* OMEGA_PART_213_MOBILE_MENU_FONT_START */
/* 213_mobile_menu_font.css — WEB-07-QA T3/P2: mobiele menu-font >= 14px @390 (2026-09-24)
Root-cause (QA_HEADER_IMAGE_INTEGRITY_20260924 [LOW]): part 15_mobile_390.css zet
.fusion-main-menu>ul>li>a op 13px !important en .bs-cta>a op 12px @max-width:480,
waardoor het menu op 390px te klein is (leesbaarheid/touch).
Fix: font-size 14px + line-height 1.5 op alle .fusion-main-menu a binnen body.bs-v4,
scoped @media (max-width:991px). Append-only aan EINDE style.css -> wint de cascade
(gelijke/hogere specificity + latere source-order) over part 10/15.
Design-lock intact: header-structuur, labels, submenu-posities (top:100%, overflow:visible)
en bs-cta/bs4-hero/sub-menu POSITIES ongewijzigd; alleen font-size + line-height.
Desktop (>=992px) NIET geraakt. */
@media (max-width: 991px) {
body.bs-v4 .fusion-main-menu a {
font-size: 14px !important;
line-height: 1.5 !important;
}
body.bs-v4 .fusion-main-menu>ul>li>a {
font-size: 14px !important;
line-height: 1.5 !important;
}
body.bs-v4 .fusion-main-menu>ul>li.bs-cta>a {
font-size: 14px !important;
line-height: 1.5 !important;
}
}
/* OMEGA_PART_213_MOBILE_MENU_FONT_END */
/* 214_mobile_cta_contrast.css — WEB-07-QA T4/P2
Mobiele .bs-cta contrast >= 4.5:1 (WCAG AA) @390px
Design-lock: hoogte 40px, verticaal gecentreerd, GEEN band-achtergrond.
Alleen kleur/contrast gewijzigd; hover-gedrag ongewijzigd. */
@media (max-width: 991px) {
body.bs-v4 .fusion-main-menu > ul > li.bs-cta > a,
body.bs-v4 .fusion-main-menu > ul > li.menu-item-167210 > a {
color: #000 !important;
border-color: #000 !important;
}
body.bs-v4 .fusion-main-menu > ul > li.bs-cta > a .menu-text,
body.bs-v4 .fusion-main-menu > ul > li.menu-item-167210 > a .menu-text {
color: #000 !important;
}
}
/* ============================================================
215_mobile_cta_readability — [70_mobile] per /workspace/ASSIST_70_mobile.md
Append-only onder body.bs-v4 (design-lock compliant, GEEN sed/cp/mv/>)
Mobiel <=480px: CTA-leesbaarheid + tap-target(>=44px) + heading-gap
============================================================ */
@media (max-width: 480px) {
/* CTA 'Offerte aanvragen': leesbaarheid (1rem=16px) + tap-target >= 44px */
body.bs-v4 .bs-cta,
body.bs-v4 .bs-cta > a {
font-size: 1rem !important;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
/* Verklein witruimte tussen headings op mobiel */
body.bs-v4 .home.page h2,
body.bs-v4 .home.page h3 {
margin-top: 1rem !important;
margin-bottom: 0.5rem !important;
}
}
/* bs4-mobile-tap v1 — 44px tap-target voor locked 40px menu-CTA (visueel ongewijzigd; design-freeze compliant) */
@media (max-width: 768px) {
body.bs-v4 li.bs-cta { min-height: 44px; }
body.bs-v4 li.bs-cta > a,
body.bs-v4 a.bs-cta { position: relative; }
body.bs-v4 li.bs-cta > a::before,
body.bs-v4 a.bs-cta::before {
content: "";
position: absolute;
top: -2px;
bottom: -2px;
left: -8px;
right: -8px;
}
}
/* FIX: Ovalen bug en zoekknop icon */
.bs-cta {
padding: 10px 20px !important;
border-radius: 0px !important; /* Geen ovaal, strakke luxe look */
}
.awb-icon-search {
display: inline-block !important;
visibility: visible !important;
}
/* FINAL FIX: Forceer strakke luxe look en elimineer ovaal effect */
.fusion-main-me nu>ul>li.bs-cta>a,
.fusion-main-menu>ul>li.bs-cta>a,
.bs-cta,
.bs-cta a {
padding: 10px 20px !important;
border-radius: 0px !important;
border: 1px solid var(--bs-ink) !important;
height: 40px !important;
line-height: 40px !important;
}
.awb-icon-search {
display: inline-block !important;
visibility: visible !important;
}
/* === PDP Secundaire "Offerte aanvragen" CTA (part 217) === */
body.bs-v4 .bs-pdp-offerte-wrap {
margin-top: 20px;
padding: 0;
}
body.bs-v4 .bs-pdp-offerte {
display: inline-block;
height: 40px;
line-height: 38px;
padding: 0 28px;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.02em;
color: #B87333;
border: 1.5px solid #B87333;
border-radius: 4px;
background: transparent;
text-decoration: none;
cursor: pointer;
transition: all 0.2s ease;
}
body.bs-v4 .bs-pdp-offerte:hover,
body.bs-v4 .bs-pdp-offerte:focus {
color: #fff;
background: #B87333;
border-color: #B87333;
text-decoration: none;
}
@media (max-width: 767px) {
body.bs-v4 .bs-pdp-offerte-wrap {
margin-top: 16px;
}
body.bs-v4 .bs-pdp-offerte {
width: 100%;
text-align: center;
height: 44px;
line-height: 42px;
}
}
/* === /PDP CTA part 217 === */
/* WEB-MENU-1: native Avada holder, not its hidden menu-source clone.
Keep the menu in flow below the 108px toolbar; Avada owns expansion. */
@media (max-width: 767px) {
body.bs-v4 .fusion-mobile-nav-holder {
position: relative;
top: 8px;
}
body.bs-v4 .fusion-mobile-menu-icons a::before,
body.bs-v4 .fusion-mobile-nav-holder .fusion-open-submenu::before {
font-family: Arial, sans-serif;
}
body.bs-v4 .fusion-mobile-menu-icons .awb-icon-bars::before {
content: "\2630";
}
body.bs-v4 .fusion-mobile-menu-icons .awb-icon-search::before {
content: "\2315";
}
body.bs-v4 .fusion-mobile-menu-icons .awb-icon-shopping-cart::before {
content: "\1f6d2";
}
body.bs-v4 .fusion-mobile-nav-holder .fusion-open-submenu::before {
content: "+";
}
body.bs-v4 .fusion-mobile-nav-holder .fusion-open-submenu[aria-expanded="true"]::before {
content: "\2212";
}
body.bs-v4 .fusion-mobile-menu-icons a:focus-visible {
outline: 2px solid #b87333;
outline-offset: 3px;
}
}
/* === PART 56 — Legal Footer (appended) === */
/* ============================================================
PART 56 — Legal Footer Links + Anchor of Trust
BiSelect v4 LUXE — appended under body.bs-v4
============================================================ */
body.bs-v4 .bs-legal-footer {
border-top: 1px solid #e8e4df;
padding: 32px 0 28px;
margin-top: 48px;
}
body.bs-v4 .bs-legal-footer .bs-legal-links {
display: flex;
flex-wrap: wrap;
gap: 8px 24px;
justify-content: center;
margin-bottom: 20px;
}
body.bs-v4 .bs-legal-footer .bs-legal-links a {
color: #1a1a1a;
font-size: 13px;
letter-spacing: 0.02em;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 0.2s, color 0.2s;
}
body.bs-v4 .bs-legal-footer .bs-legal-links a:hover {
color: #b87333;
border-bottom-color: #b87333;
}
body.bs-v4 .bs-legal-footer .bs-anchor-trust {
text-align: center;
font-size: 12px;
color: #6b6560;
line-height: 1.7;
max-width: 720px;
margin: 0 auto;
}
body.bs-v4 .bs-legal-footer .bs-anchor-trust strong {
color: #1a1a1a;
font-weight: 600;
}
@media (max-width: 768px) {
body.bs-v4 .bs-legal-footer {
padding: 24px 0 20px;
margin-top: 32px;
}
body.bs-v4 .bs-legal-footer .bs-legal-links {
flex-direction: column;
align-items: center;
gap: 6px;
}
}
/* === PART 218 — Legal Footer Anchor (inside