/* Friese Mosterdmakerij — child theme overrides. Loaded after hummingbird's theme.css.
*
* Rules before adding anything here:
* 1. Port the reference's WINNING declarations, resolved from live's own cascade — not the
* first grep hit, and not a value measured at a single viewport.
* 2. No baked measurements (gate G8). A fixed px the reference never declares is a bug at
* every other width.
* 3. Legacy utility classes: hummingbird declares .p-1/.mb-2/... in @layer utilities
* !important. To beat those, a rule must live in @layer utilities too.
* 4. Scope page CSS to the CONTENT container, never the body id — #footer is a SIBLING of
* #wrapper, so "#page .address" would reach ps_contactinfo's footer block.
*/
/* Live loads these three from Google Fonts in . Poppins is the body face;
* Open Sans and Oswald are used by individual blocks. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&family=Open+Sans:ital,wght@0,400;0,600;0,700;0,800;1,400&family=Oswald:wght@400;500;600;700&display=swap');
/* ==========================================================================
BASE TYPOGRAPHY — measured from live's computed styles at 1440px.
These are live's DECLARED base values, not derived geometry.
This block alone addresses the five properties that failed 15x each across
every component in the first parity run (font-family, font-size, color,
letter-spacing, and the two border-*-color entries that follow currentColor).
live: Poppins 13px/24px, letter-spacing .5px, #000
hummingbird default: Inter 16px/24px, normal, #212529
========================================================================== */
:root {
--mm-font-sans: 'Poppins', sans-serif;
--mm-font-size-base: 13px;
--mm-line-height-base: 24px;
--mm-letter-spacing: 0.5px;
--mm-color-text: #000;
/* retarget hummingbird's own bootstrap tokens so components that read the
variable (rather than inheriting) also follow */
--bs-body-font-family: 'Poppins', sans-serif;
--bs-body-font-size: 13px;
--bs-body-line-height: 24px;
--bs-body-color: #000;
--bs-body-color-rgb: 0, 0, 0;
}
body {
font-family: var(--mm-font-sans);
font-size: var(--mm-font-size-base);
line-height: var(--mm-line-height-base);
letter-spacing: var(--mm-letter-spacing);
color: var(--mm-color-text);
}
/* Bootstrap components that re-declare font-family LITERALLY (.popover, .tooltip,
.btn, form controls) ignore --bs-body-font-family, so name them explicitly. */
p, a, li, span, div, td, th, label, input, select, textarea, button,
.btn, .form-control, .form-select, .popover, .tooltip, .dropdown-menu {
font-family: var(--mm-font-sans);
letter-spacing: var(--mm-letter-spacing);
}
/* live p{margin-bottom:13px}; hummingbird/BS ships 1rem = 16px. +3px per paragraph
compounds through every description and CMS page. */
p { margin-bottom: 13px; }
/* Headings — live: weight 500, tight leading on h1/h2.
hummingbird: weight 600, and h1 is *smaller* than h2 (16px vs 32px). */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
font-family: var(--mm-font-sans);
font-weight: 500;
letter-spacing: var(--mm-letter-spacing);
color: var(--mm-color-text);
}
h1, .h1 { font-size: 22px; line-height: 1.1; }
h2, .h2 { font-size: 20px; line-height: 1.1; }
h3, .h3 { font-size: 16px; line-height: 24px; }
/* ==========================================================================
HEADER — live's header does not stick. Hummingbird adds .js-sticky-header
with position:sticky;top:0, which parity reported as
position live='static' staged='sticky', top live='auto' staged='0px'.
========================================================================== */
#header.js-sticky-header,
#header {
position: static;
top: auto;
}
/* ==========================================================================
HOME SLIDER — the +17px height delta is the inline-image baseline gap, not
padding: parity reported slide-img display live='block' staged='inline',
and height live=423.5 staged=441.1. An inline sits on the text
baseline, so the parent's line box adds the font's descender underneath.
display:block removes it; no height is hardcoded (gate G8).
========================================================================== */
.ps-imageslider img,
.ps-imageslider__figure img {
display: block;
}
.ps-imageslider {
position: relative;
}
/* ==========================================================================
BRAND PALETTE — transcribed from the old theme's declared colours, not
sampled from a screenshot. Usage counts in PRS080193_06/assets/css:
#eccb81 90x primary accent — buttons, link hovers, the header bar
#f9ba48 42x secondary amber
#542f05 1x header top strip
#ebebeb 42x footer link / rule grey
#414141 20x muted body text
Hummingbird ships --bs-primary:#0b69f6 (blue) with white button text;
live's button is #eccb81 with BLACK text. Retargeting the tokens moves
buttons, links and hover states shop-wide in one place.
========================================================================== */
:root {
--mm-accent: #eccb81;
--mm-accent-2: #f9ba48;
--mm-header-strip: #542f05;
--mm-grey-line: #ebebeb;
--mm-muted: #414141;
--bs-primary: #eccb81;
--bs-primary-rgb: 236, 203, 129;
--bs-link-color: #eccb81;
--bs-link-color-rgb:236, 203, 129;
--bs-link-hover-color: #f9ba48;
}
/* live's primary button: background #eccb81, text #000 (hummingbird: blue/white) */
.btn-primary {
--bs-btn-bg: var(--mm-accent);
--bs-btn-border-color: var(--mm-accent);
--bs-btn-color: #000;
--bs-btn-hover-bg: var(--mm-accent-2);
--bs-btn-hover-border-color: var(--mm-accent-2);
--bs-btn-hover-color: #000;
--bs-btn-active-bg: var(--mm-accent-2);
--bs-btn-active-border-color: var(--mm-accent-2);
--bs-btn-active-color: #000;
/* the DISABLED state has its own variables -- without these the cart's
"Doorgaan naar afrekenen" (.btn.btn-primary.disabled until a carrier is
picked) kept rendering hummingbird's blue #0b69f6. Live's is the same
gold as the enabled state. */
--bs-btn-disabled-bg: var(--mm-accent);
--bs-btn-disabled-border-color: var(--mm-accent);
--bs-btn-disabled-color: #000;
}
/* ==========================================================================
HEADER — live is two stacked rows inside #header (total 126px):
.header-div background #542f05, padding 12px 0, 1px white bottom border -> 62px
.header-top-main background #eccb81 (.bg_main) -> 64px
Hummingbird emits .header-top (49px) + .header-bottom (73px) = 122px.
Colours are ported here; the row HEIGHTS are a structural difference and are
handled by the template override, not by hardcoding px (gate G8).
Live hides .header-top-main.bg_main below 991px, so the strip is desktop-only.
========================================================================== */
#header .header-top {
background: var(--mm-header-strip);
border-bottom: 1px solid #fff;
}
#header .header-top,
#header .header-top a,
#header .header-top .header-block__action-btn {
color: #fff;
}
#header .header-bottom {
background: var(--mm-accent);
}
@media (max-width: 991px) {
#header .header-top { background: none; border-bottom: 0; }
}
/* ==========================================================================
FOOTER — transcribed from the old theme's declared rules
(.footer-container / .footer-after in PRS080193_06/assets/css/theme.css)
and confirmed against live's computed styles at 1440px.
live hummingbird default
bg #040605 #212529
padding 65px 0 40px 0 20px
heading #eccb81, 500 #fff, 600
link #ebebeb, lh 30px #dee2e6, lh 19.5px, 4px pad
bottom row #040605, 35px 0 transparent, 32px 0 0
copyright #fff, 13px #dee2e6, 16px
========================================================================== */
#footer .footer__main,
#footer .footer__before {
background-color: #040605;
}
#footer .footer__main {
padding: 65px 0;
}
/* column headings — live uses the gold accent at weight 500 */
#footer .footer-block__title,
#footer .footer-block__title a,
#footer .footer-block .h3,
#footer .footer-block h3 {
color: var(--mm-accent);
font-size: 16px;
font-weight: 500;
letter-spacing: var(--mm-letter-spacing);
line-height: 24px;
margin-bottom: 15px;
}
/* column links — note line-height 30px, and live has NO vertical padding */
#footer .footer-block a,
#footer .footer-block li a,
#footer .footer-block__list a {
color: var(--mm-grey-line);
font-size: 13px;
line-height: 30px;
font-weight: 400;
letter-spacing: var(--mm-letter-spacing);
padding: 0;
}
#footer .footer-block a:hover,
#footer .footer-block li a:hover {
color: var(--mm-accent);
}
#footer .footer-block li {
margin-bottom: 0;
}
/* bottom row: live is a separate full-width band on the same near-black,
35px 0, with white 13px copyright text */
#footer .footer__main-bottom,
#footer .copyright {
background-color: #040605;
color: #fff;
font-size: 13px;
line-height: 24px;
padding: 35px 0;
}
#footer .copyright a {
color: #fff;
text-decoration: underline;
}
#footer .copyright a:hover {
color: var(--mm-accent);
}
/* ==========================================================================
PRODUCT TILE — measured like-for-like (article.product-miniature on BOTH
themes; live additionally wraps it in li.product_item, hummingbird does not).
live staged (hummingbird)
tile 212x447 301x435
position relative static
img 211x315 (2:3) 301x301 (square)
link #000, centred inherited accent, start
The 2:3 image shape comes from the IMAGE TYPE, not CSS — live's tile uses a
portrait type (home_default 400x600). Handled in theme-content.sql, not here.
========================================================================== */
.product-miniature,
.product-miniature .product-miniature__image,
.product-miniature img {
position: relative;
}
/* live centres the tile text and keeps the title black — the brand accent is
for hovers and buttons, not tile titles */
.product-miniature .product-miniature__title,
.product-miniature .product-miniature__title a,
.product-miniature .product-title,
.product-miniature .product-title a {
color: #000;
text-align: center;
font-size: 13px;
line-height: 24px;
font-weight: 400;
letter-spacing: var(--mm-letter-spacing);
}
.product-miniature .product-miniature__title a:hover,
.product-miniature .product-title a:hover {
color: var(--mm-accent);
}
.product-miniature .product-miniature__infos,
.product-miniature .product-miniature__bottom {
text-align: center;
}
/* live's category/home grid is 4 across at lg (li.product_item.col-lg-3);
hummingbird's .products grid was resolving to 3 at this width */
@media (min-width: 992px) {
.products {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
/* live separates tiles with a right border on .thumbnail-container
(.products .thumbnail-container{border-right:1px solid #f0f0f0}) */
.products .thumbnail-container {
position: relative;
border-right: 1px solid #f0f0f0;
margin-bottom: 15px;
border-radius: 0;
background-color: transparent;
}
.products .product-miniature:nth-child(4n) .thumbnail-container {
border-right: 0;
}
/* every anchor inside a tile is black on live (including the image link);
the brand accent is reserved for hover */
.product-miniature a { color: #000; }
.product-miniature a:hover { color: var(--mm-accent); }
.product-miniature { text-align: center; }
/* ==========================================================================
BATCH 2 — from measured live-vs-staged deltas, one rule per real difference.
========================================================================== */
/* --- product tile: live is a flex column, text starts left, 20px gap below.
(my earlier text-align:center was wrong at element level — live centres
the title and image, not the tile box.) --- */
.product-miniature {
display: flex;
flex-direction: column;
text-align: start;
margin-bottom: 20px;
min-height: 0;
}
/* --- product images column (live .product_main_img) --- */
#product .product__left,
.product__left {
position: relative;
top: 0;
left: 0;
padding-left: 10px;
padding-right: 10px;
min-height: 1px;
}
.product__images, .product__images img { background-color: #fff; }
/* --- product right banner column: live is 218 wide, 335 tall, pushed 30px
off the content and NOT stretched to the column height --- */
#right-column {
padding-left: 0;
padding-right: 0;
margin-left: 0; /* the 30px gap is INSIDE the column's own width
(see the >=992px block) -- a margin added on top
of a flex-basis overflows the row and wraps the
whole column below the page. */
align-self: flex-start; /* live's banner does not stretch to column height */
}
#right-column .banner { text-align: start; color: #000; }
#right-column .banner img { max-width: 100%; height: auto; }
/* --- CMS content box: live is a white card, 30px padding, 5px radius,
#f0f0f0 border, 25px below --- */
/* Hummingbird's class is page-content--cms (BEM), NOT live's page-cms, so the
old selector never matched; and `border-color` alone draws nothing without a
width and style. Live: 1px solid #f0f0f0, radius 5px, padding 30. */
#content.page-content--cms,
#main .page-content--cms,
#content.page-cms,
.page-cms #content,
#main .page-content.page-cms {
padding: 30px;
margin-bottom: 25px;
border: 1px solid #f0f0f0;
border-radius: 5px;
line-height: 24px;
}
.page-cms #content p, #content.page-cms p { line-height: 24px; }
/* --- contact form: live is a white 16px-padded card with muted text --- */
.contact-form,
#content.page-content.card {
background-color: #fff;
color: #878787;
padding: 16px;
border-color: #878787;
}
/* live's inputs: 13px, no tracking, 12px side padding, #bbb border, square */
.contact-form input[type="text"], .contact-form input[type="email"],
.contact-form input[type="tel"], .contact-form textarea, .contact-form select,
.contact-form .form-control, .contact-form .form-select {
font-size: 13px;
letter-spacing: normal;
color: #888;
padding-left: 12px;
padding-right: 12px;
border-color: #bbb;
border-radius: 0;
}
/* --- header menu links: live renders them inline, unpadded, black --- */
#header .header-bottom a,
#header .ps-mainmenu a,
#header .top-menu a {
display: inline;
padding: 0;
color: #000;
min-height: 0;
width: auto;
height: auto;
}
#header .header-bottom a:hover,
#header .ps-mainmenu a:hover { color: var(--mm-accent); }
/* ==========================================================================
HEADER ROW HEIGHTS — live's 126px header is two rows built from declared
padding, not fixed heights:
.header-div padding:12px 0 + a 38px logo = 62px
.header-top-main (gold bar) = 64px
The logo file is 500x121; live renders it 152x37 because its column
constrains it (#header .logo{max-width:100%}). Cap the logo box so the row
resolves to live's height instead of the image's intrinsic 121px.
========================================================================== */
#header .header-top {
padding: 12px 0;
}
#header .header-top__logo img,
#header .header-bottom__logo img,
#header .logo {
max-width: 100%;
max-height: 38px;
width: auto;
height: auto;
}
#header .header-top__row { min-height: 38px; }
/* gold bar: live is 64px tall with the search/account/cart row centred */
#header .header-bottom {
padding: 0;
min-height: 64px;
}
#header .header-bottom__row { min-height: 64px; }
/* ==========================================================================
"EEN IMPRESSIE" GALLERY — rebuilt as a CMS page after gallerique was
uninstalled by the 9.x upgrade. Live's layout, measured at 1440px:
30 thumbnails, 90x90, 7 per row, 5 rows.
Thumbs link to the 600px versions; no JS library involved.
========================================================================== */
.impressie {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 0 0 25px;
}
.impressie__item {
display: block;
line-height: 0;
border-radius: 5px;
overflow: hidden;
}
.impressie__item img {
width: 90px;
height: 90px;
object-fit: cover;
display: block;
transition: opacity .2s ease;
}
.impressie__item:hover img { opacity: .8; }
@media (max-width: 575px) {
.impressie { gap: 6px; }
.impressie__item img { width: 72px; height: 72px; }
}
/* ==========================================================================
BATCH 3 — corrections from a full live-vs-staged property diff.
========================================================================== */
/* --- CONTAINER WIDTH: live is 1170px, bootstrap 5 / hummingbird is 1320 at xl.
One rule; it is what makes content 906.75px instead of 950px on home,
category, CMS and contact simultaneously. --- */
@media (min-width: 1200px) {
.container, .container-md, .container-lg, .container-xl,
.columns-container.container { max-width: 1170px; }
/* ONE root cause behind every +-10 / +-20 offset on every page:
live's grid gutter is 20px, hummingbird's is 40px, and live's .container
carries NO horizontal padding.
Measured on live: .container x=135 w=1170 padding 0; every .row inside it
x=125 w=1190 with margin -10px; every column padding 10px -> column CONTENT
lands exactly on the container edge at x=135. Setting the gutter variable
reproduces that everywhere at once instead of nudging each block. */
.container, .container-md, .container-lg, .container-xl {
padding-left: 0; padding-right: 0;
}
.row, .columns-container > .row { --bs-gutter-x: 20px; }
}
/* --- live sets these on its content/section boxes --- */
.featured-products, .ps-featuredproducts,
#products, section#products,
.product__left, .product__right,
.ps-crossselling, .product__bottom {
position: relative;
top: 0;
left: 0;
min-height: 0;
}
/* --- product tiles: live's image/title are CENTRED, the tile box is not;
image has NO background and NO radius (my batch-1 rules had both wrong) --- */
.product-miniature .product-miniature__image-container,
.product-miniature .product-miniature__image-link,
.product-miniature .product-miniature__image,
.product-miniature .product-miniature__title,
.product-miniature .product-miniature__title a {
text-align: center;
background-color: transparent;
border-radius: 0;
}
/* --- header: the logo
wrapper must not impose type on the logo image or
the menu links. live: 13px / 400 / #000 / white-space normal --- */
#header .header-top__h1,
#header .header-top__logo,
#header .header-top__logo a,
#header .header-top__menu,
#header .header-top__menu a,
#header .header-top a {
font-size: 13px;
font-weight: 400;
color: #000;
white-space: normal;
letter-spacing: var(--mm-letter-spacing);
}
#header .header-top__h1 { margin: 0; line-height: 1; }
/* --- footer: #footer itself is WHITE on live; only the inner bands are dark.
(batch-1 painted #footer's children correctly but the probe reads #footer.) --- */
#footer { background-color: #fff; }
/* footer column links render inline on live, not block */
#footer .footer-block a,
#footer .footer-block__list a { display: inline; width: auto; height: auto; }
#footer .footer-block__title { color: var(--mm-accent); }
/* live: h3 16px/500 #eccb81 UPPERCASE (text-transform, not the source string) */
#footer .footer-block__title,
#footer .footer-block .h3,
#footer .footer-block h3 { text-transform: uppercase; }
/* --- contact form: live is a white card, muted text, 16px padding --- */
#content.page-content.card, .contact-form, .page-contact #content {
background-color: #fff;
color: #878787;
padding: 16px;
}
.contact-form input, .contact-form .form-control { line-height: 24px; height: 36px; }
/* --- product info column: live pads 30px left / 10px right --- */
.product__right {
padding-left: 30px;
padding-right: 10px;
min-height: 1px;
}
.product__right h1, .product__right .h1 { font-weight: 600; margin-bottom: 15px; }
/* --- right banner column: live's image is left-aligned and not stretched --- */
#right-column, #right-column .banner { min-height: 0; }
#right-column .banner, #right-column .banner img { text-align: start; }
/* --- crosssell: live is a block, full container width, 30px above --- */
.ps-crossselling, .product__bottom {
display: block;
gap: normal;
margin-top: 30px;
}
/* ==========================================================================
BATCH 4 — column ratio and the remaining per-element deltas.
========================================================================== */
/* --- COLUMN BOXES, taken from live at 1440 (row x=125 w=1190, gutter 20).
All widths below are BORDER boxes; the 10px column padding that the
gutter adds is what puts the CONTENT on live's x.
live home/category #left-column content x=135 w=225.8
#center-column content x=390.8 w=906.8
live product image col border x=125 w=396.7
info col border x=521.7 w=537.9
banner x=1097.2 w=207.8
Product: 934.6 + 255.4 = 1190 = the row width exactly, so the row can
never wrap (a margin added on top of a basis is what dropped the whole
right column below the page before). --- */
@media (min-width: 992px) {
#left-column { flex: 0 0 255.8px; max-width: 255.8px; }
#center-column { flex: 0 0 926.8px; max-width: 926.8px; }
#product #center-column { flex: 0 0 934.6px; max-width: 934.6px; }
#product #right-column { flex: 0 0 255.4px; max-width: 255.4px;
padding-left: 37.6px; padding-right: 10px; }
/* Hummingbird lays the product page out with CSS GRID, not a bootstrap row,
so `flex:` on these is ignored - the TRACKS decide the width. Live's two
columns are 396.7 / 537.9 border boxes on a row that starts 10px outside
the container, which is what the negative side margins reproduce here. */
#product .product__container {
grid-template-columns: 396.7px 537.9px;
column-gap: 0;
margin-left: -10px;
margin-right: -10px;
}
}
/* --- tile image LINK carries the white card + radius on live; the
itself does not (batch 3 removed both from the wrong element) --- */
.product-miniature .product-miniature__image-link,
.product-miniature .thumbnail-container > a {
background-color: #fff;
border-radius: 5px;
}
.product-miniature .product-miniature__image { background-color: transparent; border-radius: 0; }
/* --- live's #products is statically positioned --- */
#products, section#products { position: static; top: auto; left: auto; }
/* --- crosssell spans the FULL container on live (1170), not the content column,
and is a block --- */
.ps-crossselling, .product__bottom {
display: block;
width: 100%;
margin-top: 30px;
}
/* --- header: live's logo/menu line-height is 24px, menu links inline --- */
#header .header-top__logo, #header .header-top__logo a, #header .header-top__logo img,
#header .header-top__menu, #header .header-top__menu a {
line-height: 24px;
}
#header .header-top__menu a, #header .top-menu a, #header .ps-mainmenu a {
display: inline; width: auto; height: auto;
}
/* --- footer body text: live's footer band is rgb(4,6,5) and its text #ebebeb.
(An earlier rule set #000 here from a polluted run where live rendered
unstyled on white - it made the address invisible on the black band.) --- */
#footer .footer-block,
#footer .footer-block__list,
#footer .ps-linklist ul,
#footer address,
#footer .ps-contactinfo__infos { color: #ebebeb; }
/* --- right banner: live 217.77 wide, image 207.75 (i.e. 10px right padding) --- */
#right-column .banner img { max-width: 100%; height: auto; }
/* --- column padding: with the gutter corrected to live's 20px the columns
keep bootstrap's 10px, which is exactly what lands their content on
live's x=135 / x=390.8. (Zeroing it here pulled every child 10px left.) --- */
@media (min-width: 992px) {
#center-column { padding-left: 10px; padding-right: 10px; }
/* live's left column CONTENT is 225.8 wide (x=135..360.8) and the centre
column's content starts at 390.8 -- a 30px trough between them. The border
box stays 255.8 so the centre column still begins at 380.8. */
#left-column { padding-left: 10px; padding-right: 20px; }
/* hummingbird also puts 32px of padding under the content column. On the HOME
page live has none -- its gold band ends at 1893.1 and the footer band starts
at 1895.1 -- so it is removed there only; the other page types keep it. */
/* live has no padding under the content column on the home or CMS pages: on
the CMS page its #content ends at 1206.4, its 25px bottom margin follows and
the footer band begins at 1231.4 with nothing between. */
#index #center-column,
.page-cms #center-column { padding-bottom: 0; }
}
/* ==========================================================================
CROSS-SELL ROW — live puts it across the whole container in ONE row.
Measured on live (product page, 1440): 6 products, tiles at
x = 135, 373, 611, 849, 1087 w = 218 step 238 (218 + 20 gutter)
so five are visible and the sixth sits outside the 1170 container, which
live's owl carousel clips. Hummingbird instead renders the block inside
#center-column (914.6 wide), which fits only four and wraps the rest onto a
second row -- that wrap is ~500px of the page-height difference.
NOTE: live's row is an owl carousel with working prev/next arrows. The
layout below reproduces its RESTING state exactly; the arrows are not
ported, so the sixth product is not reachable on the staged page yet.
========================================================================== */
@media (min-width: 992px) {
#product .ps-crossselling .module-products.container {
width: 1170px;
max-width: 1170px;
}
#product .ps-crossselling .products {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 218px;
grid-template-columns: none;
column-gap: 20px;
overflow: hidden;
}
}
/* ==========================================================================
BREADCRUMB — live has no grey band.
Hummingbird wraps the breadcrumb in a full-bleed