/* ============================================================
Felimo — Component utility classes
Vertaald uit de DS webshop UI-kit (inline styles → tokens).
Groeit per bouwfase. Gebruikt door template-parts en patterns.
============================================================ */
/* ─── Navigatie ─────────────────────────────────────────────── */
.felimo-nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 200;
color: var(--text-primary);
background: transparent;
border-bottom: 1px solid transparent;
transition: background var(--duration-moderate) var(--ease-smooth),
border-color var(--duration-moderate) var(--ease-smooth),
color var(--duration-base) var(--ease-smooth);
}
.felimo-nav__inner {
max-width: 1560px;
margin: 0 auto;
padding-inline: 80px;
height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-8);
}
/* WP's layout-flow geeft elk volgend kind margin-block-start (blockGap),
wat menu en acties 12px onder het midden duwt — neutraliseren */
.felimo-nav__inner > * { margin-block-start: 0; }
.felimo-nav__inner {
}
.felimo-nav.is-scrolled {
background: rgba(253, 252, 250, 0.96);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
border-bottom-color: var(--border-subtle);
color: var(--text-primary);
}
/* Dark-hero pagina's: transparant + lichte tekst tot er gescrold wordt */
body.has-dark-hero .felimo-nav:not(.is-scrolled) {
color: var(--text-inverse);
}
/* Logo (tijdelijke tekst-wordmark in Cormorant; __menu-logo = de kopie
die felimo-nav.js in de mobiele overlay-dialog injecteert) */
.felimo-nav__logo,
.felimo-nav__menu-logo {
display: inline-flex;
align-items: baseline;
font-family: var(--font-display);
font-weight: 500;
font-size: 28px;
line-height: 1;
letter-spacing: -0.01em;
color: currentColor;
text-decoration: none;
flex-shrink: 0;
}
.felimo-nav__logo::after,
.felimo-nav__menu-logo::after {
content: "";
width: 5px; height: 5px;
margin-left: 3px;
margin-bottom: 5px;
border-radius: var(--radius-full);
background: var(--accent);
align-self: flex-end;
}
/* Menu (WP-navigatieblok) */
.felimo-nav__menu .wp-block-navigation__container { gap: 28px; }
.felimo-nav__menu .wp-block-navigation-item__content {
font-family: var(--font-sans);
font-weight: 400;
font-size: var(--text-sm);
letter-spacing: var(--tracking-wide);
color: currentColor;
padding: 4px 0;
border-bottom: 1.5px solid transparent;
transition: color var(--transition-micro), border-color var(--transition-micro);
}
.felimo-nav__menu .wp-block-navigation-item__content:hover,
.felimo-nav__menu .current-menu-item > .wp-block-navigation-item__content {
color: var(--accent);
border-bottom-color: var(--accent);
/* de globale link-hover geeft óók een text-decoration-underline →
dubbele lijn onder de amber border; alleen de border is de underline */
text-decoration: none;
}
/* Acties (zoek / account / cart) */
.felimo-nav__actions {
display: flex;
align-items: center;
gap: 16px;
flex-shrink: 0;
}
.felimo-nav__action {
display: inline-flex;
align-items: center;
color: currentColor;
text-decoration: none;
transition: color var(--transition-micro);
}
.felimo-nav__action:hover { color: var(--accent); }
.felimo-nav__cart { position: relative; }
.felimo-nav__cart-count {
position: absolute;
top: -6px; right: -6px;
min-width: 16px; height: 16px;
padding: 0 3px;
border-radius: var(--radius-full);
background: var(--accent);
color: #fff;
font-family: var(--font-sans);
font-size: 10px;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
}
/* display:flex hierboven overschrijft de UA-stijl voor [hidden]; expliciet verbergen */
.felimo-nav__cart-count[hidden] { display: none; }
/* ── Mobiel overlay-menu (barebase-patroon): wordmark linksboven, X rechts-
boven, links uitgelijnde grote items. !important: WP-core zet eigen
flex/kleur-waarden op de open modal. ── */
.felimo-nav__menu-logo { display: none; }
.felimo-nav .wp-block-navigation__responsive-container.is-menu-open {
padding: 28px 20px 40px !important;
}
.felimo-nav .wp-block-navigation__responsive-container.is-menu-open,
.felimo-nav .wp-block-navigation__responsive-container.is-menu-open a,
.felimo-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
color: var(--felimo-void) !important;
}
.felimo-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.felimo-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
align-items: flex-start !important;
gap: 18px !important;
width: 100% !important;
text-align: left !important;
}
.felimo-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
font-size: 24px !important;
font-weight: 500 !important;
letter-spacing: -0.01em !important;
}
/* Sluitknop (X), gepositioneerd t.o.v. wp-block-navigation__responsive-dialog */
.felimo-nav .wp-block-navigation__responsive-container-close {
top: 0 !important;
right: 0 !important;
padding: 8px !important;
color: var(--felimo-void) !important;
}
.felimo-nav .wp-block-navigation__responsive-container-close svg {
width: 28px !important;
height: 28px !important;
}
/* Wordmark in de open overlay (geïnjecteerd door felimo-nav.js) */
.felimo-nav .wp-block-navigation__responsive-container.is-menu-open .felimo-nav__menu-logo {
display: inline-flex;
margin-bottom: 56px;
color: var(--felimo-void) !important;
}
/* ─── USP-strip (donker) ────────────────────────────────────── */
.felimo-usp {
background: var(--felimo-void);
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.felimo-usp__inner {
max-width: 1560px;
margin: 0 auto;
padding: 48px 80px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
}
.felimo-usp__item { display: flex; align-items: center; gap: 16px; }
.felimo-usp__icon {
flex-shrink: 0;
display: flex;
align-items: center;
color: rgba(253, 252, 250, 0.5);
}
.felimo-usp__label {
font-family: var(--font-sans);
font-weight: 600;
font-size: 14px;
letter-spacing: 0.01em;
color: var(--text-inverse);
}
.felimo-usp__sub {
font-family: var(--font-sans);
font-size: 12px;
color: rgba(253, 252, 250, 0.45);
margin-top: 2px;
}
/* ─── Footer (donker) ───────────────────────────────────────── */
.felimo-footer {
background: var(--felimo-void);
border-top: 1px solid rgba(255, 255, 255, 0.06);
color: var(--text-inverse);
}
.felimo-footer__inner {
max-width: 1560px;
margin: 0 auto;
padding: 64px 80px 40px;
}
.felimo-footer__grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 48px;
margin-bottom: 48px;
}
.felimo-footer__logo {
display: inline-flex;
align-items: baseline;
font-family: var(--font-display);
font-weight: 500;
font-size: 28px;
line-height: 1;
color: var(--text-inverse);
text-decoration: none;
}
.felimo-footer__logo::after {
content: "";
width: 5px; height: 5px;
margin-left: 3px;
margin-bottom: 5px;
border-radius: var(--radius-full);
background: var(--accent);
align-self: flex-end;
}
.felimo-footer__tagline {
font-family: var(--font-sans);
font-size: 14px;
color: rgba(253, 252, 250, 0.45);
line-height: 1.7;
max-width: 260px;
margin-top: 20px;
}
.felimo-footer__heading {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: 19px;
color: var(--accent);
margin-bottom: 16px;
}
.felimo-footer__links {
list-style: none;
padding: 0; margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.felimo-footer__links a {
font-family: var(--font-sans);
font-size: 14px;
color: rgba(253, 252, 250, 0.6);
text-decoration: none;
transition: color var(--transition-micro);
}
.felimo-footer__links a:hover { color: var(--text-inverse); }
.felimo-footer__divider {
border: none;
border-top: 1px solid rgba(255, 255, 255, 0.06);
margin: 0 0 24px;
}
.felimo-footer__bottom {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
}
.felimo-footer__copy {
font-family: var(--font-sans);
font-size: 12px;
color: rgba(253, 252, 250, 0.25);
}
.felimo-footer__legal { display: flex; gap: 20px; }
.felimo-footer__legal a {
font-family: var(--font-sans);
font-size: 12px;
color: rgba(253, 252, 250, 0.3);
text-decoration: none;
transition: color var(--transition-micro);
}
.felimo-footer__legal a:hover { color: rgba(253, 252, 250, 0.6); }
/* ─── Responsive ────────────────────────────────────────────── */
@media (max-width: 900px) {
.felimo-nav__inner { padding-inline: 20px; }
.felimo-usp__inner { padding: 32px 20px; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.felimo-footer__inner { padding: 48px 20px 32px; }
.felimo-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 560px) {
.felimo-usp__inner { grid-template-columns: 1fr; }
.felimo-footer__grid { grid-template-columns: 1fr; }
.felimo-footer__bottom { flex-direction: column; align-items: flex-start; }
}
/* Mobiel (onder WP's 600px-overlay-breakpoint, waar het navigatieblok een
hamburger wordt): hamburger links, logo absoluut gecentreerd, acties rechts */
@media (max-width: 599px) {
.felimo-nav__inner { position: relative; }
.felimo-nav__inner .felimo-nav__menu { order: -1; }
.felimo-nav__logo {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
}
/* ============================================================
Homepage (front-page) secties
============================================================ */
html { scroll-behavior: smooth; }
/* ─── Hero ──────────────────────────────────────────────────── */
.felimo-hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
overflow: hidden;
/* DS WebshopHero: hero-dark-a.jpg als cover (rechts uitgelijnd); de donkere
basiskleur eronder vangt het laden op */
background-color: var(--felimo-void);
background-image: url('../img/hero-dark-a.jpg');
background-size: cover;
background-position: center right;
}
/* Gradient-overlay: versterkt de leesbaarheid van de tekst links (DS) */
.felimo-hero::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to right, rgba(10, 9, 8, 0.82) 0%, rgba(10, 9, 8, 0.55) 45%, rgba(10, 9, 8, 0.10) 75%, transparent 100%);
pointer-events: none;
}
.felimo-hero__inner {
position: relative;
z-index: 2;
width: 100%;
max-width: 1560px;
margin: 0 auto;
padding: 0 80px;
}
.felimo-hero__content { max-width: 700px; }
.felimo-hero__eyebrow {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--felimo-amber-400);
margin-bottom: 24px;
}
.felimo-hero__title {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(52px, 6vw, 88px);
line-height: 1;
letter-spacing: -0.03em;
color: var(--felimo-white);
margin-bottom: 28px;
}
.felimo-hero__title em { font-style: italic; font-weight: 300; color: var(--felimo-amber-300); }
.felimo-hero__intro {
font-family: var(--font-sans);
font-weight: 300;
font-size: 18px;
line-height: 1.7;
color: rgba(253, 252, 250, 0.65);
margin-bottom: 44px;
max-width: 460px;
}
.felimo-hero__actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.felimo-hero__social { margin-top: 56px; display: flex; gap: 32px; }
.felimo-hero__stat-val { font-family: var(--font-display); font-size: 28px; font-weight: 500; color: var(--felimo-white); line-height: 1; }
.felimo-hero__stat-label { font-family: var(--font-sans); font-size: 12px; color: rgba(253, 252, 250, 0.45); margin-top: 4px; letter-spacing: 0.03em; }
/* ─── Button (.felimo-btn) — canoniek ───────────────────────── */
.felimo-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--font-sans);
font-weight: var(--weight-medium);
letter-spacing: var(--tracking-wide);
border-radius: var(--radius-btn);
border: 1.5px solid transparent;
cursor: pointer;
text-decoration: none;
white-space: nowrap;
user-select: none;
/* default = md-maat */
font-size: var(--text-sm);
padding: 11px 24px;
min-height: 42px;
transition: background var(--transition-base), color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-micro);
}
.felimo-btn:active { transform: scale(0.97); }
.felimo-btn[disabled], .felimo-btn.is-disabled { opacity: 0.45; cursor: not-allowed; }
/* Maten */
.felimo-btn--sm { font-size: var(--text-sm); padding: 8px 18px; min-height: 34px; }
.felimo-btn--md { font-size: var(--text-sm); padding: 11px 24px; min-height: 42px; }
.felimo-btn--lg { font-size: var(--text-base); padding: 14px 32px; min-height: 50px; }
.felimo-btn--xl { font-size: var(--text-lg); padding: 17px 40px; min-height: 58px; }
/* Varianten */
.felimo-btn--primary { background: var(--accent); color: var(--text-on-accent); border-color: var(--accent); }
.felimo-btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); box-shadow: var(--shadow-glow-amber-sm); color: var(--text-on-accent); }
.felimo-btn--secondary { background: transparent; color: var(--text-primary); border-color: var(--border-strong); }
.felimo-btn--secondary:hover { background: var(--bg-subtle); border-color: var(--felimo-ash); }
.felimo-btn--ghost { background: transparent; color: var(--text-secondary); border-color: transparent; }
.felimo-btn--ghost:hover { background: var(--bg-subtle); color: var(--text-primary); }
.felimo-btn--dark { background: var(--felimo-void); color: var(--text-inverse); border-color: var(--felimo-void); }
.felimo-btn--dark:hover { background: var(--felimo-charcoal); border-color: var(--felimo-charcoal); }
.felimo-btn--accent-outline { background: transparent; color: var(--text-accent); border-color: var(--accent); }
.felimo-btn--accent-outline:hover { background: var(--accent-subtle); border-color: var(--accent-hover); }
/* dark-context ghost (knoppen op donkere secties, bv. hero) */
.felimo-btn--ghost-on-dark { background: transparent; color: rgba(253, 252, 250, 0.7); border-color: rgba(253, 252, 250, 0.2); }
.felimo-btn--ghost-on-dark:hover { color: var(--felimo-white); border-color: rgba(253, 252, 250, 0.45); }
/* ─── Ticker ────────────────────────────────────────────────── */
.felimo-ticker {
background: var(--felimo-void);
overflow: hidden;
padding: 14px 0;
border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.felimo-ticker__track {
display: flex;
width: max-content;
animation: felimo-ticker 60s linear infinite;
white-space: nowrap;
}
.felimo-ticker__group { display: inline-flex; align-items: center; }
.felimo-ticker__item {
display: inline-flex;
align-items: center;
gap: 24px;
padding-right: 24px;
font-family: var(--font-display);
font-style: italic;
font-size: 18px;
font-weight: 300;
color: rgba(253, 252, 250, 0.80);
letter-spacing: 0.01em;
}
.felimo-ticker__dot { color: var(--felimo-amber-700); font-size: 5px; line-height: 1; }
@keyframes felimo-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
.felimo-ticker__track { animation: none; }
}
/* ─── Categorie-grid ────────────────────────────────────────── */
.felimo-cat-grid { background: var(--bg-base); padding: 96px 0; }
.felimo-cat-grid__inner {
max-width: 1560px;
margin: 0 auto;
padding: 0 80px;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
gap: 16px;
}
.felimo-cat {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
border-radius: var(--radius-card-lg);
overflow: hidden;
text-decoration: none;
cursor: pointer;
transition: transform 400ms var(--ease-smooth);
}
.felimo-cat:hover { transform: scale(1.012); }
.felimo-cat--lg { grid-row: 1 / 3; min-height: 560px; }
.felimo-cat--sm { min-height: 272px; }
.felimo-cat--void { background: var(--felimo-void); }
.felimo-cat--bone { background: var(--felimo-bone); }
.felimo-cat--charcoal { background: var(--felimo-charcoal); }
.felimo-cat__overlay { position: absolute; left: 0; right: 0; bottom: 0; height: 60%; pointer-events: none; }
.felimo-cat--void .felimo-cat__overlay,
.felimo-cat--charcoal .felimo-cat__overlay { background: linear-gradient(to top, rgba(14,13,11,0.92) 20%, transparent 100%); }
.felimo-cat--bone .felimo-cat__overlay { background: linear-gradient(to top, rgba(245,240,232,0.96) 20%, transparent 100%); }
.felimo-cat__body { position: relative; z-index: 2; padding: 24px 28px; }
.felimo-cat__title { font-family: var(--font-display); font-size: 28px; font-weight: 400; letter-spacing: -0.01em; line-height: 1.1; margin-bottom: 6px; }
.felimo-cat__sub { font-family: var(--font-sans); font-size: 13px; line-height: 1.55; margin-bottom: 14px; }
.felimo-cat__link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-size: 12px; font-weight: 500; }
.felimo-cat__link svg { transition: transform 200ms; }
.felimo-cat:hover .felimo-cat__link svg { transform: translateX(4px); }
.felimo-cat--bone .felimo-cat__title { color: var(--text-primary); }
.felimo-cat--bone .felimo-cat__sub { color: var(--text-tertiary); }
.felimo-cat--bone .felimo-cat__link { color: var(--text-accent); }
.felimo-cat--void .felimo-cat__title,
.felimo-cat--charcoal .felimo-cat__title { color: #fdfcfa; }
.felimo-cat--void .felimo-cat__sub,
.felimo-cat--charcoal .felimo-cat__sub { color: rgba(253, 252, 250, 0.55); }
.felimo-cat--void .felimo-cat__link,
.felimo-cat--charcoal .felimo-cat__link { color: var(--felimo-amber-500); }
/* ─── Productgrid ───────────────────────────────────────────── */
.felimo-products { background: var(--bg-subtle); padding: 96px 0; scroll-margin-top: 80px; }
.felimo-products__inner { max-width: 1560px; margin: 0 auto; padding: 0 80px; }
.felimo-products__header { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 48px; }
.felimo-products__head { text-align: left; }
.felimo-products__eyebrow { font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 8px; }
.felimo-products__title { font-family: var(--font-display); font-weight: 400; font-size: 48px; line-height: 1.05; letter-spacing: -0.02em; color: var(--text-primary); }
.felimo-products__title em { font-style: italic; color: var(--felimo-amber-600); }
.felimo-products__tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.felimo-products__tab {
font-family: var(--font-sans);
font-size: 14px;
font-weight: 400;
padding: 8px 18px;
border-radius: var(--radius-full);
background: var(--surface-1);
border: 1px solid var(--border-default);
color: var(--text-secondary);
cursor: pointer;
transition: all var(--transition-base);
}
.felimo-products__tab:hover { border-color: var(--felimo-void); color: var(--text-primary); }
.felimo-products__tab.is-active { background: var(--felimo-void); border-color: var(--felimo-void); color: var(--text-inverse); font-weight: 500; }
.felimo-products__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.felimo-pcard {
display: flex;
flex-direction: column;
border-radius: var(--radius-card);
overflow: hidden;
background: var(--surface-1);
border: 1px solid var(--border-subtle);
box-shadow: var(--shadow-sm);
transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.felimo-pcard:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.felimo-pcard--featured { background: var(--felimo-void); border-color: rgba(255, 255, 255, 0.06); }
.felimo-pcard__media {
aspect-ratio: 1 / 1;
position: relative;
background: var(--bg-subtle);
display: flex;
align-items: center;
justify-content: center;
color: var(--felimo-mist);
overflow: hidden;
}
.felimo-pcard--featured .felimo-pcard__media { background: var(--felimo-charcoal); color: rgba(255, 255, 255, 0.12); }
.felimo-pcard__badge {
position: absolute;
top: 12px; left: 12px;
font-family: var(--font-sans);
font-weight: 600;
font-size: 10px;
letter-spacing: 0.06em;
padding: 3px 10px;
border-radius: var(--radius-full);
background: var(--felimo-amber-500);
color: #fdfcfa;
}
.felimo-pcard__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.felimo-pcard__name { font-family: var(--font-sans); font-weight: 600; font-size: 15px; line-height: 1.3; color: var(--text-primary); }
.felimo-pcard__desc { font-family: var(--font-sans); font-size: 13px; line-height: 1.5; color: var(--text-tertiary); }
.felimo-pcard--featured .felimo-pcard__name { color: var(--text-inverse); }
.felimo-pcard--featured .felimo-pcard__desc { color: rgba(253, 252, 250, 0.55); }
.felimo-pcard__rating { display: flex; align-items: center; gap: 6px; }
.felimo-pcard__stars { display: inline-flex; gap: 2px; }
.felimo-pcard__count { font-family: var(--font-sans); font-size: 11px; color: var(--text-tertiary); }
.felimo-pcard--featured .felimo-pcard__count { color: rgba(253, 252, 250, 0.4); }
.felimo-pcard__foot {
border-top: 1px solid var(--border-subtle);
padding-top: 12px;
margin-top: 4px;
display: flex;
align-items: center;
justify-content: space-between;
}
.felimo-pcard--featured .felimo-pcard__foot { border-top-color: rgba(255, 255, 255, 0.07); }
.felimo-pcard__price { font-family: var(--font-sans); font-weight: 700; font-size: 18px; color: var(--text-primary); }
.felimo-pcard--featured .felimo-pcard__price { color: var(--text-inverse); }
.felimo-pcard__price-old { font-family: var(--font-sans); font-size: 13px; color: var(--text-tertiary); text-decoration: line-through; margin-left: 6px; }
/* WC sale-markup: oud actie — ins onderstreept standaard,
waardoor de actieprijs ook doorgehaald oogt. Oud klein/grijs, actie strak. */
.felimo-pcard__price del {
font-size: 13px; font-weight: 400; color: var(--text-tertiary);
text-decoration: line-through; margin-right: 6px;
}
.felimo-pcard__price ins { text-decoration: none; }
.felimo-pcard--featured .felimo-pcard__price del { color: rgba(253, 252, 250, 0.45); }
.felimo-pcard__add {
font-family: var(--font-sans);
font-weight: 500;
font-size: 12px;
padding: 8px 16px;
border-radius: var(--radius-full);
background: var(--felimo-void);
color: #fdfcfa;
border: none;
cursor: pointer;
transition: background var(--transition-base);
}
/* color expliciet meezetten: de globale a:hover-regel maakt de tekst anders
amber op de amber hover-achtergrond (tekst valt weg) */
.felimo-pcard__add { color: #fdfcfa; }
.felimo-pcard__add:hover { background: var(--accent); color: #fdfcfa; }
.felimo-pcard--featured .felimo-pcard__add { background: var(--accent); }
.felimo-pcard--featured .felimo-pcard__add:hover { background: var(--accent-hover); color: #fdfcfa; }
/* WC's archief-AJAX plakt na een add-to-cart een "Bekijk winkelwagen"-link
(.added_to_cart) achter de knop. De cart-drawer opent al automatisch, dus
die link is overbodig — overal verbergen (kaart, cross-sell, loop). */
.added_to_cart.wc-forward { display: none !important; }
/* ─── App-feature ───────────────────────────────────────────── */
.felimo-about-teaser { background: var(--bg-base); padding: 96px 0; }
.felimo-about-teaser__inner {
max-width: 1560px;
margin: 0 auto;
padding: 0 80px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
}
.felimo-about-teaser__eyebrow { font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 12px; }
.felimo-about-teaser__title { font-family: var(--font-display); font-size: 48px; font-weight: 400; line-height: 1.05; letter-spacing: -0.02em; color: var(--text-primary); margin-bottom: 20px; }
.felimo-about-teaser__title em { font-style: italic; color: var(--felimo-amber-600); }
.felimo-about-teaser__text { font-family: var(--font-sans); font-size: 16px; color: var(--text-secondary); line-height: 1.7; margin-bottom: 36px; }
.felimo-about-teaser__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.felimo-about-teaser__media {
aspect-ratio: 1 / 1;
border-radius: var(--radius-3xl);
background: linear-gradient(135deg, var(--felimo-cream), var(--felimo-linen));
}
/* ─── Nieuwsbrief ───────────────────────────────────────────── */
.felimo-newsletter { background: var(--bg-muted); padding: 96px 0; }
.felimo-newsletter__inner {
max-width: 1560px;
margin: 0 auto;
padding: 0 80px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.felimo-newsletter__eyebrow { font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 12px; }
.felimo-newsletter__title { font-family: var(--font-display); font-size: 44px; font-weight: 400; line-height: 1.05; letter-spacing: -0.02em; color: var(--text-primary); margin-bottom: 16px; }
.felimo-newsletter__title em { font-style: italic; color: var(--felimo-amber-600); }
.felimo-newsletter__text { font-family: var(--font-sans); font-size: 16px; color: var(--text-tertiary); margin-bottom: 40px; max-width: 440px; }
.felimo-newsletter__form { display: flex; gap: 10px; width: 100%; max-width: 440px; }
.felimo-newsletter__input {
flex: 1;
height: 48px;
border: 1.5px solid var(--border-default);
border-radius: var(--radius-full);
padding: 0 20px;
font-family: var(--font-sans);
font-size: 15px;
background: var(--surface-1);
color: var(--text-primary);
}
.felimo-newsletter__input:focus-visible { border-color: var(--accent); box-shadow: var(--shadow-focus); outline: none; }
.felimo-newsletter__submit {
height: 48px;
padding: 0 28px;
border-radius: var(--radius-full);
background: var(--accent);
color: #fdfcfa;
font-family: var(--font-sans);
font-weight: 500;
font-size: 14px;
border: none;
cursor: pointer;
white-space: nowrap;
transition: background var(--transition-base);
}
.felimo-newsletter__submit:hover { background: var(--accent-hover); }
/* ─── Homepage responsive ───────────────────────────────────── */
@media (max-width: 900px) {
.felimo-hero__inner, .felimo-cat-grid__inner, .felimo-products__inner, .felimo-about-teaser__inner, .felimo-newsletter__inner { padding-inline: 20px; }
.felimo-cat-grid__inner { grid-template-columns: 1fr; }
.felimo-cat--lg { grid-row: auto; min-height: 360px; }
.felimo-products__grid { grid-template-columns: repeat(2, 1fr); }
.felimo-about-teaser__inner { grid-template-columns: 1fr; gap: 32px; }
.felimo-about-teaser__title, .felimo-newsletter__title, .felimo-products__title { font-size: 36px; }
}
@media (max-width: 560px) {
.felimo-products__grid { grid-template-columns: 1fr; }
.felimo-hero__social { flex-wrap: wrap; gap: 20px; }
.felimo-newsletter__form { flex-direction: column; }
}
/* ============================================================
Core-componenten (atomics) — Badge, Tag, Rating, Input
+ core/button block-styles. Button & ProductCard staan hierboven.
============================================================ */
/* ─── Badge (.felimo-badge) ─────────────────────────────────── */
.felimo-badge {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--font-sans);
font-weight: var(--weight-semibold);
letter-spacing: 0.04em;
border-radius: var(--radius-full);
border: 1px solid transparent;
white-space: nowrap;
user-select: none;
/* default = md */
font-size: 11px;
padding: 4px 10px;
min-height: 24px;
}
.felimo-badge--sm { font-size: 10px; padding: 2px 8px; min-height: 20px; gap: 4px; }
.felimo-badge--lg { font-size: 13px; padding: 5px 14px; min-height: 28px; gap: 6px; }
.felimo-badge--default { background: var(--bg-muted); color: var(--text-secondary); border-color: var(--border-default); }
.felimo-badge--accent { background: var(--accent-subtle); color: var(--felimo-amber-700); border-color: var(--felimo-amber-200); }
.felimo-badge--dark, .felimo-badge--new { background: var(--felimo-void); color: var(--text-inverse); border-color: transparent; }
.felimo-badge--success { background: var(--color-success-bg); color: var(--color-success); border-color: var(--felimo-green-100); }
.felimo-badge--error { background: var(--color-error-bg); color: var(--color-error); border-color: var(--felimo-red-100); }
.felimo-badge__dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; flex-shrink: 0; }
/* ─── Tag (.felimo-tag) — filter-chip ───────────────────────── */
.felimo-tag {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-sans);
font-weight: 400;
border-radius: var(--radius-full);
border: 1px solid var(--border-default);
background: var(--bg-subtle);
color: var(--text-secondary);
white-space: nowrap;
user-select: none;
cursor: pointer;
transition: all var(--transition-base);
/* default = md */
font-size: 13px;
padding: 5px 13px;
min-height: 30px;
}
.felimo-tag:hover { background: var(--bg-muted); }
.felimo-tag--sm { font-size: 11px; padding: 3px 10px; min-height: 24px; }
.felimo-tag--lg { font-size: 14px; padding: 7px 16px; min-height: 36px; }
.felimo-tag--selected { background: var(--felimo-void); color: var(--text-inverse); border-color: var(--felimo-void); font-weight: 500; }
.felimo-tag__dismiss {
display: flex; align-items: center; justify-content: center;
width: 14px; height: 14px; border-radius: var(--radius-full);
background: var(--felimo-mist); color: var(--felimo-void);
cursor: pointer; flex-shrink: 0;
}
.felimo-tag--selected .felimo-tag__dismiss { background: rgba(255, 255, 255, 0.2); color: var(--felimo-white); }
/* ─── Rating (.felimo-rating) ───────────────────────────────── */
.felimo-rating { display: inline-flex; align-items: center; gap: 2px; }
.felimo-rating__star { width: 16px; height: 16px; flex-shrink: 0; }
.felimo-rating--sm .felimo-rating__star { width: 12px; height: 12px; }
.felimo-rating--lg .felimo-rating__star { width: 20px; height: 20px; }
.felimo-rating--xl .felimo-rating__star { width: 24px; height: 24px; }
.felimo-rating__star path { fill: var(--felimo-amber-500); }
.felimo-rating__star--empty path { fill: var(--felimo-mist); }
.felimo-rating--interactive .felimo-rating__star { cursor: pointer; }
.felimo-rating__value { font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--text-primary); margin-left: 4px; }
.felimo-rating__count { font-family: var(--font-sans); font-size: 12px; color: var(--text-tertiary); margin-left: 4px; }
/* ─── Input (.felimo-input) ─────────────────────────────────── */
.felimo-input { display: flex; flex-direction: column; gap: 6px; }
.felimo-input--full { width: 100%; }
.felimo-input__label { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-medium); letter-spacing: var(--tracking-wide); color: var(--text-secondary); }
.felimo-input__field {
position: relative;
display: flex;
align-items: center;
height: 44px;
background: var(--surface-1);
border: 1.5px solid var(--border-default);
border-radius: var(--radius-input);
transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.felimo-input__field:focus-within { border-color: var(--accent); box-shadow: var(--shadow-focus); }
.felimo-input__field input {
flex: 1; height: 100%; border: none; background: transparent;
font-family: var(--font-sans); font-size: var(--text-base); color: var(--text-primary);
padding: 0 14px; outline: none;
}
.felimo-input__icon { position: absolute; color: var(--text-tertiary); display: flex; align-items: center; pointer-events: none; }
.felimo-input__icon--left { left: 14px; }
.felimo-input__icon--right { right: 14px; }
.felimo-input__field--has-left input { padding-left: 38px; }
.felimo-input__field--has-right input { padding-right: 38px; }
.felimo-input--sm .felimo-input__field { height: 36px; }
.felimo-input--sm .felimo-input__field input { font-size: var(--text-sm); padding: 0 12px; }
.felimo-input--lg .felimo-input__field { height: 52px; }
.felimo-input--lg .felimo-input__field input { font-size: var(--text-lg); padding: 0 16px; }
.felimo-input__hint { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--text-tertiary); }
.felimo-input--error .felimo-input__label { color: var(--color-error); }
.felimo-input--error .felimo-input__field { border-color: var(--color-error); box-shadow: none; }
.felimo-input--error .felimo-input__hint { color: var(--color-error); }
.felimo-input--disabled .felimo-input__field { background: var(--bg-subtle); opacity: 0.55; }
/* ─── core/button block-styles (editor) ─────────────────────── */
.wp-block-button.is-style-felimo-primary .wp-block-button__link { background: var(--accent); color: var(--text-on-accent); border-radius: var(--radius-btn); }
.wp-block-button.is-style-felimo-primary .wp-block-button__link:hover { background: var(--accent-hover); box-shadow: var(--shadow-glow-amber-sm); }
.wp-block-button.is-style-felimo-secondary .wp-block-button__link { background: transparent; color: var(--text-primary); border: 1.5px solid var(--border-strong); border-radius: var(--radius-btn); }
.wp-block-button.is-style-felimo-secondary .wp-block-button__link:hover { background: var(--bg-subtle); border-color: var(--felimo-ash); }
.wp-block-button.is-style-felimo-ghost .wp-block-button__link { background: transparent; color: var(--text-secondary); border-radius: var(--radius-btn); }
.wp-block-button.is-style-felimo-ghost .wp-block-button__link:hover { background: var(--bg-subtle); color: var(--text-primary); }
.wp-block-button.is-style-felimo-dark .wp-block-button__link { background: var(--felimo-void); color: var(--text-inverse); border-radius: var(--radius-btn); }
.wp-block-button.is-style-felimo-dark .wp-block-button__link:hover { background: var(--felimo-charcoal); }
/* ─── Shop/PLP-hero (felimo/shop-hero block, DS PLPHero) ────── */
.felimo-shop-hero { background: var(--bg-base); padding-top: 64px; }
.felimo-shop-hero__inner { max-width: 1560px; margin: 0 auto; padding: 20px 80px 56px; }
.felimo-shop-hero__crumbs {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
font-family: var(--font-sans); font-size: 13px; color: var(--text-tertiary);
margin-bottom: 28px;
}
.felimo-shop-hero__crumbs a { color: inherit; text-decoration: none; }
.felimo-shop-hero__crumbs a:hover { color: var(--text-secondary); }
.felimo-shop-hero__crumbs .is-current { color: var(--text-primary); font-weight: 500; }
.felimo-shop-hero__crumbs svg { flex-shrink: 0; }
.felimo-shop-hero__title {
font-family: var(--font-display); font-weight: 400; font-size: 52px;
line-height: 1.02; letter-spacing: -0.025em; color: var(--text-primary);
margin: 0 0 20px;
}
.felimo-shop-hero__intro {
font-family: var(--font-sans); font-size: 16px; color: var(--text-secondary);
line-height: 1.75; max-width: 720px;
}
.felimo-shop-hero__intro p { margin: 0 0 12px; }
.felimo-shop-hero__intro p:last-child { margin-bottom: 0; }
.felimo-shop-hero__strip { background: var(--felimo-void); border-top: 1px solid rgba(255, 255, 255, 0.04); }
.felimo-shop-hero__strip-inner {
max-width: 1560px; margin: 0 auto; padding: 0 80px;
display: grid; grid-template-columns: repeat(4, 1fr);
}
.felimo-shop-hero__strip-item {
display: flex; align-items: center; gap: 12px; padding: 22px 28px 22px 0;
border-right: 1px solid rgba(255, 255, 255, 0.07);
}
.felimo-shop-hero__strip-item + .felimo-shop-hero__strip-item { padding-left: 28px; }
.felimo-shop-hero__strip-item:last-child { border-right: none; padding-right: 0; }
.felimo-shop-hero__strip-item svg { flex-shrink: 0; }
.felimo-shop-hero__strip-label { font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--felimo-white); line-height: 1.2; }
.felimo-shop-hero__strip-sub { font-family: var(--font-sans); font-size: 11px; color: rgba(253, 252, 250, 0.45); margin-top: 2px; }
/* Zelfde container als de shop-hero-inner (max-width + 80px zijpadding);
de constrained group zelf levert die zijpadding niet */
.felimo-shop__body { max-width: 1560px; margin: 0 auto; padding: 48px 80px 96px; }
@media (max-width: 900px) {
.felimo-shop-hero__inner { padding: 16px 20px 40px; }
.felimo-shop-hero__title { font-size: 36px; }
.felimo-shop-hero__strip-inner { grid-template-columns: repeat(2, 1fr); padding: 8px 20px; }
.felimo-shop-hero__strip-item { padding: 12px 16px 12px 0; border-right: none; }
.felimo-shop-hero__strip-item + .felimo-shop-hero__strip-item { padding-left: 0; }
}
/* ─── PDP / single-product (.felimo-pdp) ────────────────────── */
.felimo-pdp { background: var(--bg-base); }
.felimo-pdp__inner { max-width: 1560px; margin: 0 auto; padding: 112px 80px 96px; }
/* Breadcrumb */
.felimo-pdp__crumbs { display: flex; align-items: center; gap: 6px; margin-bottom: 32px; font-family: var(--font-sans); font-size: 13px; color: var(--text-tertiary); flex-wrap: wrap; }
.felimo-pdp__crumbs a { color: inherit; text-decoration: none; }
.felimo-pdp__crumbs a:hover { color: var(--text-secondary); }
.felimo-pdp__crumbs a.is-current { color: var(--text-primary); font-weight: 500; }
.felimo-pdp__crumbs svg { flex-shrink: 0; }
/* Two-column grid */
.felimo-pdp__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
/* Gallery */
.felimo-pdp__gallery { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 10px; }
.felimo-pdp__stage { border-radius: var(--radius-card-lg); background: var(--felimo-bone); aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-subtle); overflow: hidden; }
.felimo-pdp__stage-img { width: 100%; height: 100%; object-fit: contain; padding: 16px; display: block; }
.felimo-pdp__illo { color: var(--accent); opacity: 0.6; }
.felimo-pdp__illo svg { width: 140px; height: 140px; }
.felimo-pdp__thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.felimo-pdp__thumb { flex: 1; min-width: 64px; max-width: 96px; aspect-ratio: 1 / 1; border-radius: var(--radius-md); background: var(--felimo-bone); border: 2px solid transparent; cursor: pointer; overflow: hidden; padding: 0; transition: border-color 150ms ease; }
.felimo-pdp__thumb.is-active { border-color: var(--accent); }
.felimo-pdp__thumb-img { width: 100%; height: 100%; object-fit: contain; padding: 4px; display: block; }
/* Buy block */
.felimo-pdp__buy { display: flex; flex-direction: column; gap: 28px; }
.felimo-pdp__head { display: flex; flex-direction: column; gap: 12px; }
.felimo-pdp__eyebrow { display: block; font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--felimo-amber-600); margin-bottom: 8px; }
.felimo-pdp__title { font-family: var(--font-display); font-weight: 500; font-size: 38px; line-height: 1.05; letter-spacing: -0.02em; color: var(--text-primary); margin: 0; }
.felimo-pdp__rating-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.felimo-pdp__rating-value { font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--text-primary); }
.felimo-pdp__rating-link { font-family: var(--font-sans); font-size: 13px; color: var(--text-tertiary); text-decoration: underline; }
.felimo-pdp__rating-row .felimo-pcard__count { display: none; }
.felimo-pdp__tagline { font-family: var(--font-sans); font-weight: 600; font-size: 16px; color: var(--text-primary); line-height: 1.4; border-left: 3px solid var(--accent); padding-left: 12px; margin: 0; }
.felimo-pdp__price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; font-family: var(--font-sans); font-weight: 700; font-size: 40px; color: var(--text-primary); }
.felimo-pdp__price .woocommerce-Price-amount { font-size: inherit; font-weight: inherit; color: inherit; }
.felimo-pdp__price del { color: var(--text-tertiary); font-weight: 400; font-size: 18px; text-decoration: line-through; }
.felimo-pdp__price ins { text-decoration: none; }
/* Sale (DS-koopblok): grote actieprijs + doorgestreept + groene bespaar-chip */
.felimo-pdp__save {
font-family: var(--font-sans); font-size: 14px; font-weight: 600;
color: var(--color-success); background: var(--color-success-bg);
border-radius: var(--radius-full); padding: 6px 16px;
align-self: center;
}
/* Trustpilot-badge in de rating-rij (placeholder-cijfer, TEST DATA) */
.felimo-pdp__tp-badge {
font-family: var(--font-sans); font-size: 12px; font-weight: 700;
color: var(--felimo-white); background: #219653;
border-radius: 6px; padding: 4px 10px; margin-left: 6px;
}
.felimo-pdp__bullets { list-style: none; display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; }
.felimo-pdp__bullets li { display: flex; align-items: flex-start; gap: 10px; font-family: var(--font-sans); font-size: 14px; color: var(--text-secondary); line-height: 1.4; }
.felimo-pdp__bullets svg { flex-shrink: 0; margin-top: 1px; }
.felimo-pdp__pay { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 14px 0 0; border-top: 1px solid var(--border-subtle); }
.felimo-pdp__pay-chip { font-family: var(--font-sans); font-size: 11px; color: var(--text-tertiary); background: var(--bg-subtle); border: 1px solid var(--border-subtle); border-radius: 4px; padding: 3px 7px; }
.felimo-pdp__trust { display: flex; gap: 16px; flex-wrap: wrap; }
.felimo-pdp__trust-item { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-sans); font-size: 12px; color: var(--text-tertiary); }
/* USP strip (light, bordered) */
.felimo-pdp__uspstrip { background: var(--felimo-bone); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.felimo-pdp__uspstrip-inner { max-width: 1560px; margin: 0 auto; padding: 0 80px; display: grid; grid-template-columns: repeat(4, 1fr); }
.felimo-pdp__usp { padding: 20px 28px; border-right: 1px solid var(--border-subtle); }
.felimo-pdp__usp:first-child { padding-left: 0; }
.felimo-pdp__usp:last-child { border-right: none; padding-right: 0; }
.felimo-pdp__usp-label { font-family: var(--font-sans); font-weight: 600; font-size: 14px; color: var(--text-primary); margin-bottom: 3px; }
.felimo-pdp__usp-sub { font-family: var(--font-sans); font-size: 12px; color: var(--text-tertiary); }
/* About / description */
.felimo-pdp__about { padding: 96px 0; background: var(--bg-base); }
.felimo-pdp__about-inner { max-width: 1560px; margin: 0 auto; padding: 0 80px; }
.felimo-pdp__section-label { font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 20px; }
.felimo-pdp__about-body { max-width: 680px; font-family: var(--font-sans); font-size: 16px; color: var(--text-secondary); line-height: 1.7; }
.felimo-pdp__about-body p { margin: 0 0 16px; }
.felimo-pdp__about-body p:last-child { margin-bottom: 0; }
/* Specifications (WC attributes table) */
.felimo-pdp__specs { padding: 96px 0; background: var(--felimo-bone); border-top: 1px solid var(--border-subtle); }
.felimo-pdp__specs-inner { max-width: 1560px; margin: 0 auto; padding: 0 80px; }
.felimo-pdp__specs-table table,
.felimo-pdp__specs-table .woocommerce-product-attributes { width: 100%; border-collapse: collapse; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--border-default); background: var(--surface-1); }
.felimo-pdp .felimo-pdp__specs-table table.shop_attributes th, .felimo-pdp .felimo-pdp__specs-table table.shop_attributes td { font-family: var(--font-sans); font-size: 14px; padding: 16px 22px; border-bottom: 1px solid var(--border-subtle); text-align: left; }
.felimo-pdp .felimo-pdp__specs-table table.shop_attributes tr:last-child th, .felimo-pdp .felimo-pdp__specs-table table.shop_attributes tr:last-child td { border-bottom: none; }
.felimo-pdp .felimo-pdp__specs-table table.shop_attributes th { color: var(--text-primary); font-weight: 600; width: 35%; }
.felimo-pdp .felimo-pdp__specs-table table.shop_attributes td { color: var(--text-secondary); }
/* WC's core-CSS zet attribuutwaarden cursief; DS is rechtop */
.felimo-pdp .felimo-pdp__specs-table table.shop_attributes td, .felimo-pdp .felimo-pdp__specs-table table.shop_attributes td p { font-style: normal; margin: 0; }
/* DS-striping: even rij bone-label + wit; oneven rij wit-label + lichte waarde */
.felimo-pdp .felimo-pdp__specs-table table.shop_attributes tr:nth-child(odd) th { background: var(--felimo-bone); }
.felimo-pdp .felimo-pdp__specs-table table.shop_attributes tr:nth-child(odd) td { background: var(--surface-1); }
.felimo-pdp .felimo-pdp__specs-table table.shop_attributes tr:nth-child(even) th { background: var(--surface-1); }
.felimo-pdp .felimo-pdp__specs-table table.shop_attributes tr:nth-child(even) td { background: var(--bg-base); }
/* Sticky buy bar */
.felimo-pdp__sticky { position: fixed; bottom: 0; left: 0; right: 0; z-index: 200; background: rgba(253, 252, 250, 0.96); backdrop-filter: blur(16px); border-top: 1px solid var(--border-subtle); box-shadow: 0 -4px 24px rgba(14, 13, 11, 0.08); transform: translateY(100%); transition: transform 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.felimo-pdp__sticky.is-visible { transform: translateY(0); }
.felimo-pdp__sticky[hidden] { display: block; }
.felimo-pdp__sticky-inner { max-width: 1560px; margin: 0 auto; padding: 14px 80px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.felimo-pdp__sticky-info { display: flex; align-items: center; gap: 14px; min-width: 0; }
.felimo-pdp__sticky-thumb { width: 48px; height: 48px; border-radius: 10px; background: var(--felimo-bone); border: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; color: var(--accent); }
.felimo-pdp__sticky-img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.felimo-pdp__sticky-thumb svg { width: 28px; height: 28px; }
.felimo-pdp__sticky-meta { display: flex; flex-direction: column; min-width: 0; }
.felimo-pdp__sticky-name { font-family: var(--font-sans); font-weight: 600; font-size: 15px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.felimo-pdp__sticky-cat { font-family: var(--font-sans); font-size: 12px; color: var(--text-tertiary); }
.felimo-pdp__sticky-buy { display: flex; align-items: center; gap: 24px; flex-shrink: 0; }
.felimo-pdp__sticky-price { font-family: var(--font-sans); font-weight: 700; font-size: 22px; color: var(--text-primary); display: flex; align-items: baseline; gap: 8px; }
.felimo-pdp__sticky-price del { font-size: 14px; font-weight: 400; color: var(--text-tertiary); text-decoration: line-through; }
.felimo-pdp__sticky-price ins { text-decoration: none; }
.felimo-pdp__sticky-cta { height: 46px; padding: 0 32px; border: none; border-radius: var(--radius-full); background: var(--felimo-void); color: var(--felimo-white); font-family: var(--font-sans); font-weight: 600; font-size: 15px; cursor: pointer; white-space: nowrap; transition: background var(--transition-base, 200ms ease); }
.felimo-pdp__sticky-cta:hover { background: var(--felimo-charcoal); }
/* Related products (under the PDP block) */
.felimo-pdp-related { padding: 96px 0; background: var(--bg-base); border-top: 1px solid var(--border-subtle); }
.felimo-pdp-related__inner { max-width: 1560px; margin: 0 auto; padding: 0 80px; }
.felimo-pdp-related__label { font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 24px; }
/* Responsive */
@media (max-width: 980px) {
.felimo-pdp__grid { grid-template-columns: 1fr; gap: 40px; }
.felimo-pdp__gallery { position: static; top: auto; }
.felimo-pdp__uspstrip-inner { grid-template-columns: repeat(2, 1fr); }
.felimo-pdp__usp { padding: 16px 20px; }
.felimo-pdp__usp:nth-child(2) { border-right: none; padding-right: 0; }
.felimo-pdp__usp:nth-child(3) { padding-left: 0; }
}
@media (max-width: 900px) {
.felimo-pdp__inner { padding: 96px 20px 64px; }
.felimo-pdp__uspstrip-inner, .felimo-pdp__about-inner, .felimo-pdp__specs-inner, .felimo-pdp-related__inner { padding-inline: 20px; }
.felimo-pdp__about, .felimo-pdp__specs, .felimo-pdp-related { padding: 64px 0; }
.felimo-pdp__title { font-size: 30px; }
.felimo-pdp__sticky-inner { padding: 12px 20px; }
.felimo-pdp__sticky-cta { padding: 0 20px; }
}
@media (max-width: 560px) {
.felimo-pdp__uspstrip-inner { grid-template-columns: 1fr; }
.felimo-pdp__usp { border-right: none; padding: 14px 0; border-bottom: 1px solid var(--border-subtle); }
.felimo-pdp__usp:last-child { border-bottom: none; }
.felimo-pdp__sticky-info { display: none; }
.felimo-pdp__sticky-buy { flex: 1; justify-content: space-between; gap: 12px; }
}
/* ============================================================
Cart-pagina (felimo/cart server-block) — DS CartPage.jsx 1-op-1.
Markup: inc/templates/cart-filled.php + cart-empty.php (barebase-patroon).
Interactie: assets/js/felimo-cart.js (WC-AJAX + fragments, geen React).
============================================================ */
/* Page-chrome (template page-cart.html) */
.felimo-cart-page { background: var(--bg-base); padding-top: 64px; }
.felimo-cart-page__inner { max-width: 1560px; margin: 0 auto; padding: 40px 80px 96px; }
/* Kruimelpad (gedeeld met account-pagina) */
.felimo-cart-page__crumbs,
.felimo-account-page__crumbs {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
font-family: var(--font-sans); font-size: 13px; color: var(--text-tertiary);
margin-bottom: 18px;
}
.felimo-cart-page__crumbs a,
.felimo-account-page__crumbs a { color: inherit; text-decoration: none; }
.felimo-cart-page__crumbs a:hover,
.felimo-account-page__crumbs a:hover { color: var(--text-secondary); }
.felimo-cart-page__crumbs .is-current,
.felimo-account-page__crumbs .is-current { color: var(--text-primary); font-weight: 500; }
.felimo-cart-page__crumbs svg,
.felimo-account-page__crumbs svg { flex-shrink: 0; }
/* Titel (gedeeld met account-pagina; op de cart in de linkerkolom van de grid) */
.felimo-cart-page__title,
.felimo-account-page__title {
font-family: var(--font-display); font-weight: 400; font-size: 40px;
line-height: 1.05; letter-spacing: -0.025em; color: var(--text-primary);
margin: 0 0 24px;
}
.felimo-cart-page__title em,
.felimo-account-page__title em { font-style: italic; color: var(--felimo-amber-600); }
/* Cart: hele titel in amber (niet alleen de em) */
.felimo-cart-page__title { color: var(--felimo-amber-600); }
/* Busy-state tijdens AJAX (felimo-cart.js zet .is-busy op de body-wrapper) */
.felimo-cart-body { transition: opacity var(--transition-base); }
.felimo-cart-body.is-busy { opacity: 0.55; pointer-events: none; }
/* Hoofd-grid: items links, Overzicht rechts (sticky) */
.felimo-cart-grid { display: grid; grid-template-columns: 1fr 360px; gap: 48px; align-items: start; }
.felimo-cart-grid__main { min-width: 0; }
/* Items-card */
.felimo-cart-items {
border: 1px solid var(--border-subtle); border-radius: var(--radius-xl);
overflow: hidden; background: var(--surface-1);
}
.felimo-cart-item {
display: grid; grid-template-columns: 72px 1fr auto auto; gap: 20px;
align-items: center; padding: 24px 28px;
border-bottom: 1px solid var(--border-subtle);
}
.felimo-cart-item:last-child { border-bottom: none; }
.felimo-cart-item__thumb {
width: 72px; height: 72px; border-radius: var(--radius-lg);
background: var(--felimo-bone); overflow: hidden; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
}
.felimo-cart-item__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6px; display: block; }
.felimo-cart-item__info { min-width: 0; }
.felimo-cart-item__name {
display: inline-block; font-family: var(--font-sans); font-weight: 600; font-size: 15px;
color: var(--text-primary); text-decoration: none; line-height: 1.3; margin-bottom: 4px;
}
.felimo-cart-item__name:hover { color: var(--accent); }
.felimo-cart-item__sub { font-family: var(--font-sans); font-size: 13px; color: var(--text-tertiary); margin-bottom: 8px; }
.felimo-cart-item__actions { display: flex; gap: 12px; }
.felimo-cart-item__remove {
font-family: var(--font-sans); font-size: 12px; color: var(--text-tertiary);
background: none; border: none; cursor: pointer; padding: 0;
text-decoration: underline; text-underline-offset: 2px;
}
.felimo-cart-item__remove:hover { color: var(--color-error); }
/* Aantal-stepper (pill) */
.felimo-cart-stepper {
display: flex; align-items: center; flex-shrink: 0;
border: 1.5px solid var(--border-default); border-radius: var(--radius-full);
overflow: hidden; background: var(--surface-1);
}
.felimo-cart-stepper button {
width: 34px; height: 34px; background: none; border: none; cursor: pointer;
font-family: var(--font-sans); font-size: 16px; color: var(--text-secondary);
display: flex; align-items: center; justify-content: center;
transition: background var(--transition-micro);
}
.felimo-cart-stepper button:hover:not(:disabled) { background: var(--bg-subtle); color: var(--text-primary); }
.felimo-cart-stepper button:disabled { opacity: 0.4; cursor: default; }
.felimo-cart-stepper__value {
width: 32px; text-align: center;
font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--text-primary);
}
/* Regelprijs */
.felimo-cart-item__price {
font-family: var(--font-sans); font-weight: 700; font-size: 18px;
color: var(--text-primary); text-align: right; min-width: 64px;
}
/* Kortingscode (subtiel onder de items-card) */
.felimo-cart-coupon { display: flex; gap: 10px; margin-top: 16px; max-width: 380px; }
.felimo-cart-coupon__input {
flex: 1; min-width: 0; height: 40px; padding: 0 14px;
font-family: var(--font-sans); font-size: 14px; color: var(--text-primary);
background: var(--surface-1); border: 1px solid var(--border-default); border-radius: var(--radius-input);
}
.felimo-cart-coupon__input:focus { outline: none; border-color: var(--accent); }
.felimo-cart-coupon .felimo-btn { white-space: nowrap; }
.felimo-cart-coupon-msg { margin-top: 8px; font-family: var(--font-sans); font-size: 13px; color: var(--color-success); }
.felimo-cart-coupon-msg.is-error { color: var(--color-error); }
/* Cross-sell ("Maakt het compleet") */
.felimo-cart-xsell { margin-top: 48px; }
.felimo-cart-xsell__title {
font-family: var(--font-display); font-weight: 400; font-size: 28px;
letter-spacing: -0.01em; color: var(--text-primary); margin: 0 0 20px;
}
.felimo-cart-xsell__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.felimo-cart-xsell__card {
background: var(--surface-1); border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-xs);
transition: box-shadow var(--transition-base), border-color var(--transition-base);
}
.felimo-cart-xsell__card:hover { box-shadow: var(--shadow-sm); border-color: var(--border-default); }
.felimo-cart-xsell__media {
background: var(--felimo-bone); aspect-ratio: 4 / 3; overflow: hidden;
display: flex; align-items: center; justify-content: center;
}
.felimo-cart-xsell__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.felimo-cart-xsell__body { padding: 14px 16px 16px; }
.felimo-cart-xsell__name {
display: block; font-family: var(--font-sans); font-weight: 600; font-size: 14px;
color: var(--text-primary); text-decoration: none; margin-bottom: 4px; line-height: 1.35;
}
.felimo-cart-xsell__name:hover { color: var(--accent); }
.felimo-cart-xsell__price { font-family: var(--font-sans); font-weight: 700; font-size: 20px; color: var(--text-primary); margin-bottom: 12px; }
.felimo-cart-xsell__add {
display: inline-flex; align-items: center; justify-content: center; width: 100%;
height: 36px; padding: 0 16px; border-radius: var(--radius-full);
background: transparent; color: var(--text-primary); text-decoration: none;
font-family: var(--font-sans); font-weight: 500; font-size: 13px;
border: 1.5px solid var(--border-strong); cursor: pointer;
transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}
.felimo-cart-xsell__add:hover { background: var(--bg-subtle); border-color: var(--felimo-ash); color: var(--text-primary); }
/* Overzicht-card (sticky) */
.felimo-cart-summary {
position: sticky; top: 88px;
background: var(--surface-1); border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); padding: 28px;
display: flex; flex-direction: column; gap: 20px;
}
.felimo-cart-summary__title { font-family: var(--font-sans); font-weight: 700; font-size: 18px; color: var(--text-primary); margin: 0; }
.felimo-cart-summary__rows { width: 100%; border-collapse: collapse; }
.felimo-cart-summary__rows td {
font-family: var(--font-sans); font-size: 14px; color: var(--text-secondary);
padding: 10px 0; border-bottom: 1px solid var(--border-subtle);
}
.felimo-cart-summary__rows td.felimo-cart-summary__val { text-align: right; color: var(--text-primary); font-weight: 500; }
.felimo-cart-summary__val--muted { font-size: 13px; font-weight: 400 !important; color: var(--text-tertiary) !important; }
.felimo-cart-summary__val--free { color: var(--color-success) !important; }
.felimo-cart-summary__row--coupon code {
font-family: var(--font-mono, monospace); font-size: 12px;
background: var(--bg-subtle); border: 1px solid var(--border-subtle);
border-radius: 4px; padding: 1px 5px;
}
.felimo-cart-summary__coupon-remove {
background: none; border: none; cursor: pointer; padding: 0 0 0 6px;
font-size: 11px; color: var(--text-tertiary);
}
.felimo-cart-summary__coupon-remove:hover { color: var(--color-error); }
.felimo-cart-summary__rows .felimo-cart-summary__total td {
border-bottom: none; padding: 14px 0 0;
font-size: 16px; font-weight: 700; color: var(--text-primary);
}
.felimo-cart-summary__rows td.felimo-cart-summary__total-amount { text-align: right; font-size: 20px; }
.felimo-cart-summary__note { font-family: var(--font-sans); font-size: 12px; color: var(--text-tertiary); margin-top: -8px; }
.felimo-cart-summary__ctas { display: flex; flex-direction: column; gap: 10px; }
.felimo-cart-summary__checkout {
display: flex; align-items: center; justify-content: center; height: 52px;
border-radius: var(--radius-full); background: var(--felimo-void); color: var(--felimo-white);
font-family: var(--font-sans); font-weight: 700; font-size: 16px; text-decoration: none;
transition: background var(--transition-base);
}
.felimo-cart-summary__checkout:hover { background: var(--felimo-charcoal); color: var(--felimo-white); }
.felimo-cart-summary__continue {
display: flex; align-items: center; justify-content: center; height: 48px;
border-radius: var(--radius-full); background: transparent; color: var(--text-primary);
font-family: var(--font-sans); font-weight: 500; font-size: 15px; text-decoration: none;
border: 1.5px solid var(--border-strong);
transition: background var(--transition-base), border-color var(--transition-base);
}
.felimo-cart-summary__continue:hover { background: var(--bg-subtle); border-color: var(--text-primary); }
.felimo-cart-summary__trust {
display: flex; justify-content: center; gap: 16px; flex-wrap: wrap;
font-family: var(--font-sans); font-size: 11px; color: var(--text-tertiary);
}
.felimo-cart-summary__trust span { display: inline-flex; align-items: center; gap: 4px; }
.felimo-cart-summary__trust svg { color: var(--color-success); flex-shrink: 0; }
.felimo-cart-summary__chips {
display: flex; justify-content: center; gap: 8px; flex-wrap: wrap;
list-style: none; margin: 0; padding: 0;
}
.felimo-cart-summary__chips li {
font-family: var(--font-sans); font-size: 11px; color: var(--text-tertiary);
background: var(--bg-subtle); border: 1px solid var(--border-subtle);
border-radius: 4px; padding: 2px 7px;
}
/* Lege-staat (DS: card met kat-illo) + "Nieuw bij Felimo"-pcards */
.felimo-cart-empty {
max-width: 720px; margin: 0 auto; padding: 64px 32px; text-align: center;
background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl);
}
.felimo-cart-empty__illo { display: block; margin: 0 auto 12px; }
.felimo-cart-empty__title {
font-family: var(--font-display); font-style: italic; font-weight: 400;
font-size: 28px; color: var(--text-tertiary); margin: 0 0 8px;
}
.felimo-cart-empty__body { font-family: var(--font-sans); font-size: 14px; color: var(--text-tertiary); margin: 0 0 24px; }
.felimo-cart-new { margin-top: 56px; }
.felimo-cart-new__title {
font-family: var(--font-display); font-weight: 400; font-size: 28px;
letter-spacing: -0.01em; color: var(--text-primary); text-align: center; margin: 0 0 24px;
}
/* Responsive */
@media (max-width: 980px) {
.felimo-cart-grid { grid-template-columns: 1fr; gap: 32px; }
.felimo-cart-summary { position: static; }
.felimo-cart-xsell__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
.felimo-cart-page__inner { padding: 32px 20px 64px; }
.felimo-cart-page__title { font-size: 32px; }
}
@media (max-width: 640px) {
.felimo-cart-item {
grid-template-columns: 56px 1fr;
grid-template-areas:
"thumb info"
"stepper price";
gap: 12px 16px; padding: 18px 20px;
}
.felimo-cart-item__thumb { grid-area: thumb; width: 56px; height: 56px; }
.felimo-cart-item__info { grid-area: info; }
.felimo-cart-stepper { grid-area: stepper; justify-self: start; }
.felimo-cart-item__price { grid-area: price; align-self: center; }
.felimo-cart-xsell__grid { grid-template-columns: 1fr; }
}
/* ============================================================
Mijn account (WooCommerce my-account shortcode) — .felimo-account-page
Bron: DS AccountPage.jsx + AccountSubcomponents.jsx. Stylet de klassieke
WC MyAccount-markup: navigation/content/orders-table/addresses + login-form.
============================================================ */
.felimo-account-page { background: var(--bg-base); padding-top: 64px; }
/* DS-shell: kruimelbalk met onderlijn; alleen ingelogd (login-view heeft er geen) */
.felimo-account-page__crumbsbar { border-bottom: 1px solid var(--border-subtle); }
.felimo-account-page__crumbsbar-inner { max-width: 1560px; margin: 0 auto; padding: 28px 80px; }
.felimo-account-page__crumbsbar .felimo-account-page__crumbs { margin-bottom: 0; }
body:not(.logged-in) .felimo-account-page__crumbsbar { display: none; }
.felimo-account-page__inner { max-width: 1560px; margin: 0 auto; padding: 48px 80px 96px; }
/* Content-wrapper losmaken van constrain */
.felimo-account-page .entry-content,
.felimo-account-page .wp-block-post-content { max-width: none; margin: 0; padding: 0; }
.felimo-account-page .woocommerce { font-family: var(--font-sans); }
/* WC blocktheme-css beperkt `main .woocommerce` tot 1000px; DS gebruikt de volle container */
.woocommerce-account main.felimo-account-page .woocommerce { max-width: none; }
/* ── Ingelogd: sidebar (nav) + content grid; uitgelogd centreert .felimo-auth zichzelf ── */
body.logged-in.woocommerce-account .felimo-account-page .woocommerce {
display: grid; grid-template-columns: 220px 1fr; gap: 48px; align-items: start;
}
/* Clearfix-pseudo's zouden anders als (onzichtbaar) grid-item cel 1 bezetten */
body.logged-in.woocommerce-account .felimo-account-page .woocommerce::before,
body.logged-in.woocommerce-account .felimo-account-page .woocommerce::after { content: none; }
/* WC blocktheme-css neutraliseren (floats/procentbreedtes op nav/content) */
.woocommerce-account .felimo-account-page .woocommerce-MyAccount-navigation,
.woocommerce-account .felimo-account-page .woocommerce-MyAccount-content { float: none; width: auto; max-width: none; }
.felimo-account-page .woocommerce-MyAccount-content { min-width: 0; }
.felimo-account-page .woocommerce-MyAccount-content p { font-family: var(--font-sans); color: var(--text-secondary); line-height: 1.7; }
.felimo-account-page .woocommerce-MyAccount-content a { color: var(--text-accent); }
.felimo-account-page .woocommerce-MyAccount-content strong { color: var(--text-primary); }
/* ── Paneel-kop (DS: eyebrow + Cormorant-titel + intro) ───── */
.felimo-acc-eyebrow {
font-family: var(--font-sans); font-size: 11px; font-weight: 700;
letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-tertiary);
margin-bottom: 10px;
}
.felimo-acc-header { margin-bottom: 24px; }
.felimo-acc-title {
font-family: var(--font-display); font-weight: 400; font-size: 32px;
line-height: 1.1; letter-spacing: -0.02em; color: var(--text-primary); margin: 0;
}
.felimo-acc-title--lg { font-size: 36px; line-height: 1.05; }
.felimo-acc-title--sm { font-size: 28px; margin-bottom: 20px; }
.felimo-acc-title em { font-style: italic; color: var(--felimo-amber-600); }
.felimo-acc-intro { font-family: var(--font-sans); font-size: 15px; color: var(--text-secondary); line-height: 1.7; margin: 12px 0 0; }
/* ── Sidebar (DS: avatar-kop + items met iconen) ──────────── */
.felimo-acc-nav { position: sticky; top: 88px; }
.felimo-acc-nav__user {
display: flex; align-items: center; gap: 10px;
padding: 0 14px 16px; margin-bottom: 8px;
border-bottom: 1px solid var(--border-subtle);
}
.felimo-acc-nav__avatar {
width: 36px; height: 36px; border-radius: var(--radius-full); flex-shrink: 0;
background: var(--felimo-charcoal); display: flex; align-items: center; justify-content: center;
}
.felimo-acc-nav__id { min-width: 0; }
.felimo-acc-nav__name { display: block; font-family: var(--font-sans); font-weight: 600; font-size: 13px; color: var(--text-primary); line-height: 1.3; }
.felimo-acc-nav__email { display: block; font-family: var(--font-sans); font-size: 11px; color: var(--text-tertiary); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.felimo-acc-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.felimo-acc-nav li a {
display: flex; align-items: center; gap: 10px; padding: 10px 14px;
border-radius: var(--radius-md); font-family: var(--font-sans); font-size: 14px;
font-weight: 400; color: var(--text-primary); text-decoration: none;
transition: background var(--transition-base), color var(--transition-base);
}
.felimo-acc-nav li a svg { flex-shrink: 0; }
.felimo-acc-nav li a:hover { background: var(--felimo-bone); }
.felimo-acc-nav .woocommerce-MyAccount-navigation-link--active a,
.felimo-acc-nav li a[aria-current="page"] {
background: var(--felimo-void); color: var(--felimo-white); font-weight: 600;
}
.felimo-acc-nav .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--text-tertiary); }
/* WC's woocommerce-blocktheme.css geeft li's 16px bottom-padding en de actieve
link een underline; overschrijven met gelijke specificiteit (wij laden later) */
.woocommerce-account .felimo-account-page .felimo-acc-nav li { padding: 0; }
.woocommerce-account .felimo-account-page .felimo-acc-nav li.is-active a { text-decoration: none; }
/* ── Statusbadge (DS AccStatusBadge: pill met dot) ────────── */
.felimo-acc-badge {
display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px;
border-radius: var(--radius-full); font-family: var(--font-sans);
font-size: 12px; font-weight: 600; white-space: nowrap;
}
.felimo-acc-badge i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.felimo-acc-badge--good { background: rgba(31, 138, 91, 0.08); color: #1f8a5b; border: 1px solid rgba(31, 138, 91, 0.2); }
.felimo-acc-badge--progress { background: rgba(196, 137, 58, 0.08); color: var(--felimo-amber-600); border: 1px solid rgba(196, 137, 58, 0.2); }
.felimo-acc-badge--bad { background: rgba(180, 60, 40, 0.07); color: #b43c28; border: 1px solid rgba(180, 60, 40, 0.18); }
/* ── Knoppen (DS AccPrimaryBtn / AccGhostBtn) ─────────────── */
.felimo-acc-btn,
.woocommerce .felimo-auth button.woocommerce-form-login__submit,
.woocommerce .felimo-auth button.woocommerce-form-register__submit {
/* WC-core: `.woocommerce .woocommerce-form-login .woocommerce-form-login__submit{float:left;margin-right:1em}` */
float: none; margin-right: 0;
display: inline-flex; align-items: center; justify-content: center;
height: 46px; padding: 0 28px; border-radius: var(--radius-full);
background: var(--felimo-void); color: var(--felimo-white);
font-family: var(--font-sans); font-weight: 600; font-size: 15px;
border: none; cursor: pointer; text-decoration: none; white-space: nowrap;
transition: background var(--transition-base);
}
.felimo-acc-btn:hover { background: var(--felimo-charcoal); color: var(--felimo-white); }
.felimo-acc-btn--full { width: 100%; height: 50px; margin-top: 4px; }
.felimo-acc-ghost-btn {
display: inline-flex; align-items: center; justify-content: center;
height: 32px; padding: 0 14px; border-radius: var(--radius-full);
background: transparent; color: var(--text-primary);
font-family: var(--font-sans); font-size: 13px; font-weight: 500;
border: 1.5px solid var(--border-strong); cursor: pointer; text-decoration: none;
white-space: nowrap; transition: background var(--transition-base);
}
.felimo-acc-ghost-btn:hover { background: rgba(14, 13, 11, 0.04); }
.felimo-acc-ghost-btn--lg { height: 46px; padding: 0 24px; font-size: 15px; }
/* Content-link-kleur (amber) mag knoppen niet overschrijven */
.felimo-account-page .woocommerce-MyAccount-content a.felimo-acc-ghost-btn { color: var(--text-primary); }
.felimo-account-page .woocommerce-MyAccount-content a.felimo-acc-btn { color: var(--felimo-white); }
/* ── Dashboard: quick-links + laatste-bestelling-card ─────── */
.felimo-acc-dashboard { display: flex; flex-direction: column; gap: 24px; }
.felimo-acc-dashboard .felimo-acc-header { margin-bottom: 0; }
.felimo-acc-quicklinks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.felimo-acc-quicklink {
display: block; padding: 20px; border-radius: var(--radius-card);
border: 1px solid var(--border-subtle); background: var(--surface-1);
text-decoration: none; transition: background var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.felimo-acc-quicklink:hover { background: var(--felimo-bone); border-color: var(--border-default); box-shadow: var(--shadow-sm); }
.felimo-acc-quicklink__label { display: block; font-family: var(--font-sans); font-weight: 600; font-size: 14px; color: var(--text-primary); margin-bottom: 3px; }
.felimo-acc-quicklink__sub { display: block; font-family: var(--font-sans); font-size: 12px; color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; }
.felimo-acc-card { border: 1px solid var(--border-subtle); border-radius: var(--radius-card); overflow: hidden; background: var(--surface-1); }
.felimo-acc-card__head {
padding: 16px 20px; border-bottom: 1px solid var(--border-subtle);
display: flex; align-items: center; justify-content: space-between; gap: 12px;
font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--text-primary);
}
.felimo-acc-card__head a { font-size: 13px; font-weight: 400; color: var(--text-accent); text-decoration: underline; text-underline-offset: 2px; }
.felimo-acc-card__head--order { padding: 20px 24px; flex-wrap: wrap; }
.felimo-acc-card__row { padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.felimo-acc-card__title { font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 3px; }
.felimo-acc-card__head--order .felimo-acc-card__title { font-size: 16px; font-weight: 700; }
.felimo-acc-card__title a { color: var(--text-accent); text-decoration: underline; text-underline-offset: 2px; }
.felimo-acc-card__meta { font-family: var(--font-sans); font-size: 13px; font-weight: 400; color: var(--text-tertiary); }
.felimo-acc-card__aside { display: flex; align-items: center; gap: 12px; }
.felimo-acc-card__total { font-family: var(--font-sans); font-weight: 700; font-size: 15px; color: var(--text-primary); }
/* ── Terug-kruimel binnen het paneel (DS orderdetail) ─────── */
.felimo-acc-crumb {
display: flex; align-items: center; gap: 10px; margin-bottom: 20px;
font-family: var(--font-sans); font-size: 13px; color: var(--text-tertiary);
}
.felimo-acc-crumb a { display: inline-flex; align-items: center; gap: 6px; color: var(--text-tertiary); text-decoration: none; }
.felimo-acc-crumb a:hover { color: var(--text-secondary); }
.felimo-acc-crumb span { color: var(--text-primary); font-weight: 500; }
/* ── Orderdetail: itemrijen + totalenblok ─────────────────── */
.felimo-acc-orderdetail { display: flex; flex-direction: column; gap: 20px; }
.felimo-acc-orderdetail .felimo-acc-crumb { margin-bottom: 0; }
.felimo-acc-orderitems { padding: 20px 24px; border-bottom: 1px solid var(--border-subtle); }
.felimo-acc-orderitem { display: flex; align-items: center; gap: 14px; }
.felimo-acc-orderitem + .felimo-acc-orderitem { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-subtle); }
.felimo-acc-orderitem__thumb {
width: 52px; height: 52px; border-radius: var(--radius-md); flex-shrink: 0;
background: var(--felimo-bone); border: 1px solid var(--border-subtle);
display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.felimo-acc-orderitem__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.felimo-acc-orderitem__name { font-family: var(--font-sans); font-weight: 600; font-size: 14px; color: var(--text-primary); }
.felimo-account-page .woocommerce-MyAccount-content .felimo-acc-orderitem__name a { color: inherit; text-decoration: none; }
.felimo-account-page .woocommerce-MyAccount-content .felimo-acc-orderitem__name a:hover { color: var(--text-accent); }
.felimo-acc-orderitem__qty { font-family: var(--font-sans); font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }
.felimo-acc-totals { padding: 16px 24px; display: flex; justify-content: flex-end; }
.felimo-acc-totals__inner { display: flex; flex-direction: column; gap: 6px; min-width: 220px; }
.felimo-acc-totals__row { display: flex; justify-content: space-between; gap: 24px; font-family: var(--font-sans); font-size: 13px; color: var(--text-secondary); }
.felimo-acc-totals__row .is-free { color: #1f8a5b; font-weight: 600; }
.felimo-acc-totals__row--total { font-size: 15px; font-weight: 700; color: var(--text-primary); padding-top: 8px; border-top: 1px solid var(--border-subtle); margin-top: 4px; }
.felimo-acc-notes { list-style: none; margin: 0; padding: 8px 20px; }
.felimo-acc-notes li { padding: 12px 0; }
.felimo-acc-notes li + li { border-top: 1px solid var(--border-subtle); }
.felimo-acc-notes__date { font-family: var(--font-sans); font-size: 12px; color: var(--text-tertiary); margin-bottom: 4px; }
.felimo-acc-notes__text { font-family: var(--font-sans); font-size: 14px; color: var(--text-secondary); line-height: 1.6; }
.felimo-acc-notes__text p { margin: 0; }
/* ── Adressen (DS AccAddressCard) ─────────────────────────── */
.felimo-acc-addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.felimo-acc-address { border: 1px solid var(--border-subtle); border-radius: var(--radius-card); overflow: hidden; background: var(--surface-1); }
.felimo-acc-address__head {
padding: 16px 20px; border-bottom: 1px solid var(--border-subtle);
background: var(--felimo-bone);
display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.felimo-acc-address__title { font-family: var(--font-sans); font-weight: 600; font-size: 14px; color: var(--text-primary); }
.felimo-acc-address__edit,
.felimo-account-page .woocommerce-MyAccount-content a.felimo-acc-address__edit {
display: inline-flex; align-items: center; gap: 5px;
font-family: var(--font-sans); font-size: 13px; color: var(--text-secondary);
text-decoration: none; transition: color var(--transition-base);
}
.felimo-acc-address__edit:hover,
.felimo-account-page .woocommerce-MyAccount-content a.felimo-acc-address__edit:hover { color: var(--felimo-amber-600); }
.felimo-acc-address address {
padding: 16px 20px; margin: 0; font-style: normal; font-family: var(--font-sans);
font-size: 14px; color: var(--text-secondary); line-height: 1.7;
}
.felimo-acc-address .is-empty { font-style: italic; color: var(--text-tertiary); }
/* ── Bestellingen-tabel (DS orders-view) ──────────────────── */
.felimo-acc-tablewrap {
border: 1px solid var(--border-subtle); border-radius: var(--radius-card);
overflow: hidden; background: var(--surface-1);
}
.felimo-acc-table,
.woocommerce .felimo-acc-tablewrap table.felimo-acc-table { width: 100%; border-collapse: collapse; border: none; border-radius: 0; margin: 0; }
.felimo-acc-table thead th {
font-family: var(--font-sans); font-size: 11px; font-weight: 700;
letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary);
background: var(--felimo-bone); border-bottom: 1px solid var(--border-subtle);
padding: 12px 16px; text-align: left;
}
.felimo-acc-table tbody th,
.felimo-acc-table tbody td {
font-family: var(--font-sans); font-size: 14px; font-weight: 400; color: var(--text-secondary);
padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--border-subtle);
}
.felimo-acc-table tbody tr:last-child th,
.felimo-acc-table tbody tr:last-child td { border-bottom: none; }
.felimo-acc-table__orderlink { color: var(--text-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.felimo-acc-table__total { font-weight: 600; color: var(--text-primary); }
.felimo-acc-table .woocommerce-orders-table__cell-order-actions { text-align: right; }
.felimo-acc-pagination { display: flex; gap: 10px; margin-top: 20px; }
.felimo-acc-empty p { font-family: var(--font-sans); font-size: 15px; color: var(--text-secondary); margin: 0 0 20px; }
/* ── Formulieren (login, register, edit-account, address) ─── */
.felimo-account-page .woocommerce form .form-row,
.felimo-account-page .woocommerce-form-row,
.felimo-acc-field { margin: 0 0 18px; }
.felimo-account-page .woocommerce form label,
.felimo-account-page .woocommerce-form-row label,
.felimo-acc-field label {
display: block; font-family: var(--font-sans); font-size: 13px;
font-weight: 500; color: var(--text-secondary); margin-bottom: 6px;
}
.felimo-acc-field__labelrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.felimo-acc-field__labelrow label { margin-bottom: 6px; }
.felimo-acc-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.felimo-acc-hint { display: block; font-family: var(--font-sans); font-size: 12px; color: var(--text-tertiary); margin-top: 5px; }
/* DS CheckboxRow (CheckoutPage): 18px, radius 4, amber gevuld + wit vinkje.
Dubbele selector: de generieke form-label-regel (display:block, 13px) mag
deze rij niet overschrijven. */
.felimo-acc-check,
.felimo-account-page .woocommerce form label.felimo-acc-check {
display: flex; align-items: center; gap: 12px; margin: 0 0 18px; cursor: pointer;
font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--text-primary);
}
.felimo-acc-check input {
appearance: none; -webkit-appearance: none;
width: 18px; height: 18px; border-radius: 4px; flex-shrink: 0; margin: 0;
border: 1.5px solid var(--border-strong); background: var(--surface-1);
cursor: pointer;
transition: background var(--transition-base), border-color var(--transition-base);
}
.felimo-acc-check input:checked {
border-color: var(--felimo-amber-500);
background: var(--felimo-amber-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8' fill='none'%3E%3Cpolyline points='1 4 4 7 9 1' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat;
}
.felimo-acc-check input:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.felimo-acc-section-kop {
font-family: var(--font-sans); font-weight: 600; font-size: 15px; color: var(--text-primary);
padding-bottom: 12px; border-bottom: 1px solid var(--border-subtle); margin: 28px 0 16px;
}
.felimo-acc-header + .felimo-acc-section-kop,
.felimo-acc-form .felimo-acc-section-kop:first-child { margin-top: 0; }
.felimo-acc-form--account { max-width: 520px; }
.felimo-acc-form--address { max-width: 480px; }
.felimo-acc-form__actions { display: flex; align-items: center; gap: 10px; margin-top: 24px; }
/* WC form-row-first/last (woocommerce_form_field) als nette 2-koloms grid */
.felimo-acc-form .woocommerce-address-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.felimo-acc-form .woocommerce-address-fields__field-wrapper .form-row { grid-column: 1 / -1; float: none; width: auto; }
.felimo-acc-form .woocommerce-address-fields__field-wrapper .form-row-first { grid-column: 1; }
.felimo-acc-form .woocommerce-address-fields__field-wrapper .form-row-last { grid-column: 2; }
/* ── Login/registreren (DS uitgelogde staat) ──────────────── */
.felimo-auth { max-width: 480px; margin: 0 auto; padding-top: 24px; }
/* WC geeft form.login/form.register een eigen kaderbox; DS heeft die niet */
.felimo-auth form.login,
.felimo-auth form.register,
.woocommerce .felimo-auth form.login,
.woocommerce .felimo-auth form.register { border: none; padding: 0; border-radius: 0; margin: 0; }
.felimo-auth__title {
font-family: var(--font-display); font-weight: 400; font-size: 40px;
line-height: 1.05; letter-spacing: -0.025em; color: var(--text-primary);
margin: 0 0 32px;
}
.felimo-auth__title em { font-style: italic; color: var(--felimo-amber-600); }
.felimo-auth__title-register { display: none; }
.felimo-auth.is-js[data-auth="register"] .felimo-auth__title-login { display: none; }
.felimo-auth.is-js[data-auth="register"] .felimo-auth__title-register { display: inline; }
.felimo-auth__tabs { display: flex; border-bottom: 1px solid var(--border-subtle); margin-bottom: 32px; }
.felimo-auth__tab {
height: 44px; padding: 0 20px; background: transparent; border: none;
border-bottom: 2px solid transparent; margin-bottom: -1px;
font-family: var(--font-sans); font-size: 14px; font-weight: 400;
color: var(--text-tertiary); cursor: pointer;
transition: color var(--transition-base), border-color var(--transition-base);
}
.felimo-auth__tab.is-active { border-bottom-color: var(--text-primary); color: var(--text-primary); font-weight: 600; }
.felimo-auth__lost { font-family: var(--font-sans); font-size: 12px; color: var(--felimo-amber-600); text-decoration: underline; text-underline-offset: 2px; }
/* Intro-regel onder de kop (wachtwoord vergeten / bevestiging) */
.felimo-auth__lead {
font-family: var(--font-sans); font-size: 15px; color: var(--text-secondary);
line-height: 1.7; margin: -12px 0 28px;
}
.felimo-auth__switch { clear: both; font-family: var(--font-sans); font-size: 13px; color: var(--text-tertiary); text-align: center; margin: 24px 0 0; }
.felimo-auth__switch a,
.felimo-auth__switch button {
background: none; border: none; padding: 0; cursor: pointer;
font-family: var(--font-sans); font-size: 13px; color: var(--felimo-amber-600);
text-decoration: underline; text-underline-offset: 2px;
}
.felimo-auth__legal { font-family: var(--font-sans); font-size: 12px; color: var(--text-tertiary); text-align: center; line-height: 1.7; margin: 16px 0 0; }
.felimo-auth__legal a { color: var(--text-secondary); }
.felimo-auth__panel-kop {
font-family: var(--font-display); font-weight: 400; font-size: 28px;
letter-spacing: -0.02em; color: var(--text-primary); margin: 0 0 20px;
}
/* JS aanwezig: tabs sturen de panelen; paneel-kop is dan overbodig */
.felimo-auth.is-js .felimo-auth__panel-kop { display: none; }
.felimo-auth.is-js[data-auth="login"] .felimo-auth__panel--register { display: none; }
.felimo-auth.is-js[data-auth="register"] .felimo-auth__panel--login { display: none; }
/* Geen JS: beide formulieren onder elkaar, tabs/switch verbergen.
Alleen de switch ín het login-paneel (tab-knop); de "terug naar
inloggen"-link op de wachtwoordpagina's is een gewone link. */
.felimo-auth:not(.is-js) .felimo-auth__tabs,
.felimo-auth:not(.is-js) .felimo-auth__panel--login .felimo-auth__switch { display: none; }
.felimo-auth:not(.is-js) .felimo-auth__panel--register { margin-top: 48px; border-top: 1px solid var(--border-subtle); padding-top: 32px; }
.felimo-account-page .woocommerce form .input-text,
.felimo-account-page .woocommerce input.input-text,
.felimo-account-page .woocommerce-Input,
.felimo-account-page .woocommerce select {
width: 100%; height: 46px; padding: 0 14px;
font-family: var(--font-sans); font-size: 15px; color: var(--text-primary);
background: var(--surface-1); border: 1.5px solid var(--border-default);
border-radius: var(--radius-md); outline: none;
transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.felimo-account-page .woocommerce form .input-text:focus,
.felimo-account-page .woocommerce input.input-text:focus,
.felimo-account-page .woocommerce-Input:focus,
.felimo-account-page .woocommerce select:focus {
border-color: var(--accent); box-shadow: var(--shadow-focus);
}
.felimo-account-page .woocommerce textarea {
width: 100%; padding: 12px 14px; font-family: var(--font-sans); font-size: 15px;
border: 1.5px solid var(--border-default); border-radius: var(--radius-md);
background: var(--surface-1); color: var(--text-primary);
}
.felimo-account-page .woocommerce .required { color: var(--felimo-amber-600); border: none; }
/* Checkbox-rij buiten .felimo-acc-check (bv. door plugins toegevoegd) */
.felimo-account-page .woocommerce-form__label-for-checkbox:not(.felimo-acc-check) {
display: flex; align-items: center; gap: 8px; font-weight: 400; color: var(--text-secondary);
}
.felimo-account-page .woocommerce-form__label-for-checkbox:not(.felimo-acc-check) .woocommerce-form__input-checkbox { width: auto; height: auto; }
/* Knoppen → Felimo void-pill */
.felimo-account-page .woocommerce button.button,
.felimo-account-page .woocommerce a.button,
.felimo-account-page .woocommerce input.button,
.felimo-account-page .woocommerce-Button {
display: inline-flex; align-items: center; justify-content: center;
min-height: 46px; padding: 0 28px; border-radius: var(--radius-full);
background: var(--felimo-void); color: var(--felimo-white);
font-family: var(--font-sans); font-weight: 600; font-size: 15px;
border: none; cursor: pointer; text-decoration: none;
transition: background var(--transition-base);
}
.felimo-account-page .woocommerce button.button:hover,
.felimo-account-page .woocommerce a.button:hover,
.felimo-account-page .woocommerce input.button:hover,
.felimo-account-page .woocommerce-Button:hover { background: var(--felimo-charcoal); color: var(--felimo-white); }
/* "Lost password" link/form (WC-pagina, geen override) */
.felimo-account-page .woocommerce-LostPassword a { color: var(--text-accent); font-size: 13px; }
@media (max-width: 900px) {
.felimo-account-page__crumbsbar-inner { padding: 20px; }
.felimo-account-page__inner { padding: 32px 20px 64px; }
body.logged-in.woocommerce-account .felimo-account-page .woocommerce { grid-template-columns: 1fr; gap: 28px; }
.felimo-acc-nav { position: static; }
.felimo-acc-nav__user { padding-left: 0; }
.felimo-acc-nav ul { flex-direction: row; flex-wrap: wrap; gap: 6px; }
.felimo-acc-quicklinks { grid-template-columns: 1fr; }
.felimo-acc-addresses { grid-template-columns: 1fr; }
.felimo-acc-card__row { flex-direction: column; align-items: flex-start; gap: 10px; }
.felimo-acc-grid2 { grid-template-columns: 1fr; gap: 0; }
.felimo-acc-form .woocommerce-address-fields__field-wrapper { grid-template-columns: 1fr; }
.felimo-acc-form .woocommerce-address-fields__field-wrapper .form-row-first,
.felimo-acc-form .woocommerce-address-fields__field-wrapper .form-row-last { grid-column: 1 / -1; }
.felimo-auth__title { font-size: 32px; }
/* Bestellingen-tabel: gestapelde rijen (WC responsive-table-patroon) */
.felimo-acc-table thead { display: none; }
.felimo-acc-table tbody tr { display: block; padding: 14px 16px; border-bottom: 1px solid var(--border-subtle); }
.felimo-acc-table tbody tr:last-child { border-bottom: none; }
.felimo-acc-table tbody th,
.felimo-acc-table tbody td,
.woocommerce .felimo-acc-tablewrap table.felimo-acc-table tbody tr th,
.woocommerce .felimo-acc-tablewrap table.felimo-acc-table tbody tr td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 0; border: none; text-align: right; }
.felimo-acc-table tbody th::before,
.felimo-acc-table tbody td::before { content: attr(data-title); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); text-align: left; }
.felimo-acc-table .woocommerce-orders-table__cell-order-actions::before { content: none; }
.felimo-acc-table .woocommerce-orders-table__cell-order-actions { justify-content: flex-start; margin-top: 6px; }
}
/* ============================================================
Checkout (WooCommerce Checkout-block) — .felimo-checkout-page
Bron: DS CheckoutPage.jsx. ALLEEN COSMETISCH: de Checkout-block +
Mollie-betaalmethoden + validatie/submit blijven WC's eigen werkende
code. We stylen de wc-block-components- en wc-block-checkout__-klassen
die de block client-side rendert. Geen markup-/flow-overrides.
============================================================ */
/* Minimale checkout-chrome (DS: afleidingsvrij, geen volledige nav/footer) */
.felimo-checkout-chrome { background: var(--bg-base); border-bottom: 1px solid var(--border-subtle); }
.felimo-checkout-chrome__inner {
max-width: 1560px; margin: 0 auto; padding: 0 80px; height: 64px;
display: flex; align-items: center; justify-content: space-between;
font-family: var(--font-sans); font-size: 13px; color: var(--text-tertiary);
}
.felimo-checkout-chrome__logo {
font-family: var(--font-display); font-weight: 500; font-size: 24px;
color: var(--text-primary); text-decoration: none; letter-spacing: -0.01em;
}
.felimo-checkout-chrome__logo::after { content: '.'; color: var(--accent); }
.felimo-checkout-chrome__secure { display: inline-flex; align-items: center; gap: 6px; }
.felimo-checkout-chrome--footer { border-bottom: none; border-top: 1px solid var(--border-subtle); }
.felimo-checkout-chrome__links { display: flex; gap: 18px; }
.felimo-checkout-chrome__links a { color: inherit; text-decoration: none; }
.felimo-checkout-chrome__links a:hover { color: var(--text-secondary); }
@media (max-width: 900px) { .felimo-checkout-chrome__inner { padding: 0 20px; } }
/* Felimo page-chrome (header is hier in-flow, dus geen fixed-nav-compensatie) */
.felimo-checkout-page { background: var(--bg-base); padding-top: 0; }
.felimo-checkout-page__inner { max-width: 1560px; margin: 0 auto; padding: 40px 80px 96px; }
/* Kruimelpad (gedeelde stijl met cart/account) */
.felimo-checkout-page__crumbs {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
font-family: var(--font-sans); font-size: 13px; color: var(--text-tertiary);
margin-bottom: 18px;
}
.felimo-checkout-page__crumbs a { color: inherit; text-decoration: none; }
.felimo-checkout-page__crumbs a:hover { color: var(--text-secondary); }
.felimo-checkout-page__crumbs .is-current { color: var(--text-primary); font-weight: 500; }
.felimo-checkout-page__crumbs svg { flex-shrink: 0; }
.felimo-checkout-page__title {
font-family: var(--font-display); font-weight: 400; font-size: 40px;
line-height: 1.05; letter-spacing: -0.025em; color: var(--text-primary);
margin: 0 0 10px;
}
.felimo-checkout-page__title em { font-style: italic; color: var(--felimo-amber-600); }
.felimo-checkout-page__lead {
font-family: var(--font-sans); font-size: 14px; color: var(--text-tertiary);
line-height: 1.6; margin: 0 0 32px; max-width: 52ch;
}
/* WC verbergt de eigen "Checkout" post-title — wij zetten onze eigen kop */
.felimo-checkout-page .wp-block-post-title { display: none; }
/* Block-wrapper: laat de globale padding/constrain los */
.felimo-checkout-page .wp-block-woocommerce-checkout,
.felimo-checkout-page .entry-content { max-width: none; margin: 0; padding: 0; }
/* Twee-koloms layout (WC levert deze al; we stemmen de gap af op cart) */
.felimo-checkout-page .wc-block-checkout__main { min-width: 0; }
.felimo-checkout-page .wc-block-checkout__sidebar { position: sticky; top: 88px; }
/* ── Stappen → card-look ──────────────────────────────────── */
.felimo-checkout-page .wc-block-components-checkout-step {
background: var(--surface-1); border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl); padding: 28px 32px; margin-bottom: 16px;
}
.felimo-checkout-page .wc-block-components-checkout-step__title {
font-family: var(--font-sans); font-weight: 700; font-size: 17px;
color: var(--text-primary); letter-spacing: 0;
}
.felimo-checkout-page .wc-block-components-checkout-step__heading-content {
font-family: var(--font-sans); font-size: 11px; font-weight: 700;
letter-spacing: 0.08em; color: var(--felimo-amber-600);
}
.felimo-checkout-page .wc-block-components-checkout-step__description {
font-family: var(--font-sans); font-size: 13px; color: var(--text-tertiary); line-height: 1.6;
}
/* ── Velden (inputs/selects) → Felimo input-look ──────────── */
.felimo-checkout-page .wc-block-components-text-input input,
.felimo-checkout-page .wc-block-components-text-input textarea,
.felimo-checkout-page .wc-block-components-select .components-form-token-field__input,
.felimo-checkout-page .wc-block-components-combobox-control input,
.felimo-checkout-page .wc-block-components-form .wc-blocks-components-select__container,
.felimo-checkout-page .wc-block-checkout select {
font-family: var(--font-sans); color: var(--text-primary);
background: var(--surface-1); border-radius: var(--radius-md);
border-color: var(--border-default);
}
.felimo-checkout-page .wc-block-components-text-input input:focus,
.felimo-checkout-page .wc-block-components-text-input textarea:focus,
.felimo-checkout-page .wc-block-components-combobox-control input:focus {
border-color: var(--accent); box-shadow: var(--shadow-focus);
}
/* Zwevende labels */
.felimo-checkout-page .wc-block-components-text-input label,
.felimo-checkout-page .wc-block-components-checkout-step__container label {
font-family: var(--font-sans); color: var(--text-tertiary);
}
.felimo-checkout-page .wc-block-components-text-input.is-active label {
color: var(--text-secondary);
}
.felimo-checkout-page .wc-block-components-validation-error {
font-family: var(--font-sans); color: var(--color-error); font-size: 12px;
}
/* Verplicht-markering (asterisk) in amber */
.felimo-checkout-page .wc-block-components-label .has-required-indicator::after,
.felimo-checkout-page .wc-block-components-text-input .is-required::after { color: var(--felimo-amber-600); }
/* ── Verzendmethode-opties ────────────────────────────────── */
.felimo-checkout-page .wc-block-checkout__shipping-method-option,
.felimo-checkout-page .wc-block-components-shipping-rates-control__package {
font-family: var(--font-sans); border-radius: var(--radius-md);
}
.felimo-checkout-page .wc-block-checkout__shipping-method-option--selected {
border-color: var(--felimo-amber-500); background: rgba(206,131,56,0.04);
}
.felimo-checkout-page .wc-block-checkout__shipping-option--free .wc-block-checkout__shipping-method-option-price,
.felimo-checkout-page .wc-block-components-shipping-rates-control .wc-block-components-radio-control__secondary-label {
color: var(--felimo-amber-600); font-weight: 600;
}
/* ── Betaalmethode-radio's (Mollie) → nette spacing/typografie ─
NIETS aan de werking: alleen kleur, font en zachte highlight. */
.felimo-checkout-page .wc-block-components-radio-control__option {
font-family: var(--font-sans); border-radius: var(--radius-md);
}
.felimo-checkout-page .wc-block-components-radio-control__label {
font-family: var(--font-sans); font-size: 14px; color: var(--text-primary);
}
.felimo-checkout-page .wc-block-components-radio-control__secondary-label,
.felimo-checkout-page .wc-block-components-radio-control__description {
font-family: var(--font-sans); font-size: 13px; color: var(--text-tertiary);
}
.felimo-checkout-page .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option-checked {
border-color: var(--felimo-amber-500); background: rgba(206,131,56,0.04);
}
.felimo-checkout-page .wc-block-components-radio-control__input:checked {
border-color: var(--felimo-amber-500); background: var(--felimo-amber-500);
}
/* ── Checkboxen (account aanmaken / nieuwsbrief / bezorgnotitie) ─ */
.felimo-checkout-page .wc-block-components-checkbox__label,
.felimo-checkout-page .wc-block-checkout__add-note label,
.felimo-checkout-page .wc-block-components-checkout-step label {
font-family: var(--font-sans); font-size: 14px; color: var(--text-secondary);
}
.felimo-checkout-page .wc-block-components-checkbox__input:checked {
border-color: var(--felimo-amber-500); background: var(--felimo-amber-500);
}
/* "Voeg notitie toe" toggle */
.felimo-checkout-page .wc-block-components-panel__button {
font-family: var(--font-sans); color: var(--text-accent);
}
/* ── Order summary (rechter card) ─────────────────────────── */
.felimo-checkout-page .wc-block-components-order-summary {
background: var(--surface-1); border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);
}
.felimo-checkout-page .wc-block-components-order-summary__content,
.felimo-checkout-page .wc-block-checkout__sidebar .wc-block-components-totals-wrapper {
font-family: var(--font-sans);
}
/* Item-thumbnail */
.felimo-checkout-page .wc-block-components-order-summary-item__image img {
border-radius: var(--radius-md); background: var(--felimo-bone);
border: 1px solid var(--border-subtle);
}
.felimo-checkout-page .wc-block-components-order-summary-item__description .wc-block-components-product-name,
.felimo-checkout-page .wc-block-components-order-summary-item__description {
font-family: var(--font-sans); font-weight: 600; font-size: 13px;
color: var(--text-primary); line-height: 1.3;
}
.felimo-checkout-page .wc-block-components-order-summary-item__individual-prices,
.felimo-checkout-page .wc-block-components-order-summary-item .wc-block-components-product-metadata {
font-family: var(--font-sans); font-size: 12px; color: var(--text-tertiary);
}
.felimo-checkout-page .wc-block-components-order-summary-item__total-price,
.felimo-checkout-page .wc-block-components-order-summary-item__quantity {
font-family: var(--font-sans); color: var(--text-primary);
}
/* Coupon-veld */
.felimo-checkout-page .wc-block-components-totals-coupon-link,
.felimo-checkout-page .wc-block-components-totals-coupon__button {
font-family: var(--font-sans); color: var(--text-accent);
}
.felimo-checkout-page .wc-block-components-totals-coupon__input input {
font-family: var(--font-sans); border-radius: var(--radius-md); border-color: var(--border-default);
}
/* Totalen */
.felimo-checkout-page .wc-block-components-totals-item {
font-family: var(--font-sans); font-size: 14px; color: var(--text-secondary);
}
.felimo-checkout-page .wc-block-components-totals-item__label { color: var(--text-secondary); }
.felimo-checkout-page .wc-block-components-totals-item__value { color: var(--text-primary); font-weight: 500; }
.felimo-checkout-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.felimo-checkout-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
font-weight: 700; color: var(--text-primary);
}
.felimo-checkout-page .wc-block-components-totals-footer-item .wc-block-formatted-money-amount,
.felimo-checkout-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-size: 20px; }
/* Gratis-verzending accent */
.felimo-checkout-page .wc-block-components-totals-shipping .wc-block-components-totals-item__value { color: var(--felimo-amber-600); }
/* ── Bestellen-knop → amber primary pill ──────────────────── */
.felimo-checkout-page .wc-block-components-checkout-place-order-button {
background: var(--accent); color: var(--text-on-accent);
font-family: var(--font-sans); font-weight: 700; font-size: 16px;
border: none; border-radius: var(--radius-full); min-height: 54px;
transition: background var(--transition-base), box-shadow var(--transition-base);
}
.felimo-checkout-page .wc-block-components-checkout-place-order-button:hover:not(:disabled) {
background: var(--accent-hover); box-shadow: var(--shadow-glow-amber-sm);
}
.felimo-checkout-page .wc-block-components-checkout-place-order-button__text { font-weight: 700; }
/* Algemene-voorwaarden + veilig-afrekenen tekst */
.felimo-checkout-page .wc-block-checkout__terms {
font-family: var(--font-sans); font-size: 13px; color: var(--text-tertiary);
}
.felimo-checkout-page .wc-block-checkout__terms a { color: var(--text-secondary); }
/* Notice-banners in Felimo-stijl houden */
.felimo-checkout-page .wc-block-components-notice-banner {
font-family: var(--font-sans); border-radius: var(--radius-md);
}
@media (max-width: 980px) {
.felimo-checkout-page .wc-block-checkout__sidebar { position: static; top: auto; }
}
@media (max-width: 900px) {
.felimo-checkout-page__inner { padding: 32px 20px 64px; }
.felimo-checkout-page__title { font-size: 32px; }
.felimo-checkout-page .wc-block-components-checkout-step { padding: 22px 20px; }
}
/* ============================================================
FASE 6 — Content-pagina's: blog, artikel, over, contact, 404
Container = 1560px / padding-inline 80px (spiegelt de DS).
Pagina-roots krijgen padding-top 64px om de fixed nav te clearen.
============================================================ */
/* Gedeelde kruimelpad-stijl ----------------------------------- */
.felimo-blog__crumbs,
.felimo-article__crumbs,
.felimo-about__crumbs,
.felimo-contact__crumbs {
max-width: 1560px;
margin: 0 auto;
padding: 20px 80px 0;
display: flex;
align-items: center;
gap: 6px;
font-family: var(--font-sans);
font-size: 13px;
color: var(--text-tertiary);
}
.felimo-blog__crumbs a,
.felimo-article__crumbs a,
.felimo-about__crumbs a,
.felimo-contact__crumbs a { color: inherit; text-decoration: none; }
.felimo-blog__crumbs a:hover,
.felimo-article__crumbs a:hover,
.felimo-about__crumbs a:hover,
.felimo-contact__crumbs a:hover { color: var(--text-secondary); }
.felimo-blog__crumbs [aria-current],
.felimo-about__crumbs [aria-current],
.felimo-contact__crumbs [aria-current] { color: var(--text-primary); font-weight: 500; }
/* Gedeelde eyebrow -------------------------------------------- */
.felimo-blog__eyebrow,
.felimo-about__eyebrow,
.felimo-contact__eyebrow {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-tertiary);
}
.felimo-about__eyebrow--amber,
.felimo-contact__aside-eyebrow--amber { color: var(--felimo-amber-600); }
/* ─── BLOG-INDEX (templates/home.html) ─────────────────────── */
.felimo-blog { background: var(--bg-base); padding-top: 64px; }
.felimo-blog__head {
max-width: 1560px;
margin: 0 auto;
padding: 28px 80px 56px;
}
.felimo-blog__head .felimo-blog__eyebrow { display: block; margin-bottom: 12px; }
.felimo-blog__title {
font-family: var(--font-display);
font-weight: 400;
font-size: 52px;
line-height: 1.02;
letter-spacing: -0.025em;
color: var(--text-primary);
margin: 0 0 20px;
}
.felimo-blog__intro {
font-family: var(--font-sans);
font-size: 16px;
color: var(--text-secondary);
line-height: 1.75;
max-width: 660px;
margin: 0;
}
.felimo-blog__query {
max-width: 1560px;
margin: 0 auto;
padding: 0 80px;
}
.felimo-blog__container {
max-width: 1560px;
margin: 0 auto;
padding: 0 80px;
}
.felimo-blog__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.felimo-blog__empty {
font-family: var(--font-display);
font-style: italic;
font-size: 22px;
color: var(--text-tertiary);
text-align: center;
padding: 64px 0;
}
/* Blog-kaart -------------------------------------------------- */
.felimo-blog-card {
border-radius: var(--radius-xl);
overflow: hidden;
background: var(--surface-1);
border: 1px solid var(--border-subtle);
box-shadow: var(--shadow-xs);
display: flex;
flex-direction: column;
transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}
.felimo-blog-card:hover {
border-color: var(--border-default);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.felimo-blog-card__media { margin: 0; }
.felimo-blog-card__media img,
.felimo-blog-card__media .wp-block-post-featured-image__placeholder {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
background: var(--felimo-linen);
}
.felimo-blog-card__media a,
.felimo-blog-card__media {
position: relative;
display: block;
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--felimo-linen);
}
.felimo-blog-card__body {
padding: 16px 18px 20px;
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
}
.felimo-blog-card__cat {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--felimo-amber-600);
}
.felimo-blog-card__cat a { color: inherit; text-decoration: none; }
.felimo-blog-card__cat a:hover { text-decoration: underline; }
.felimo-blog-card__title {
font-family: var(--font-sans);
font-weight: 700;
font-size: 16px;
color: var(--text-primary);
line-height: 1.3;
margin: 0;
}
.felimo-blog-card__title a { color: inherit; text-decoration: none; }
.felimo-blog-card__title a:hover { color: var(--felimo-amber-600); }
.felimo-blog-card__excerpt {
font-family: var(--font-sans);
font-size: 14px;
color: var(--text-secondary);
line-height: 1.6;
margin: 0;
}
.felimo-blog-card__meta {
margin-top: auto;
padding-top: 12px;
font-family: var(--font-sans);
font-size: 12px;
color: var(--text-tertiary);
display: flex;
align-items: center;
gap: 7px;
}
.felimo-blog-card__avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: var(--radius-full);
background: var(--felimo-bone);
color: var(--felimo-ash);
flex: 0 0 auto;
}
.felimo-blog-card__avatar svg { width: 13px; height: 13px; }
.felimo-blog-card__byline { font-weight: 600; color: var(--text-secondary); }
.felimo-blog-card__dot { opacity: 0.5; }
.felimo-blog-card__media--ph {
display: flex;
align-items: center;
justify-content: center;
background: var(--felimo-linen);
}
.felimo-blog-card__media--ph svg { width: 52px; height: 52px; }
/* Paginatie --------------------------------------------------- */
.felimo-blog__pagination {
margin-top: 40px;
gap: 8px;
font-family: var(--font-sans);
font-size: 14px;
}
.felimo-blog__pagination .wp-block-query-pagination-numbers .page-numbers,
.felimo-blog__pagination .wp-block-query-pagination-previous,
.felimo-blog__pagination .wp-block-query-pagination-next {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 12px;
border-radius: var(--radius-md);
border: 1.5px solid var(--border-default);
color: var(--text-secondary);
text-decoration: none;
transition: all var(--transition-base);
}
.felimo-blog__pagination .page-numbers.current {
background: var(--felimo-void);
color: var(--felimo-white);
border-color: var(--felimo-void);
font-weight: 700;
}
.felimo-blog__pagination a:hover { border-color: var(--text-primary); color: var(--text-primary); }
/* E-E-A-T-blok ------------------------------------------------ */
.felimo-blog__eeat {
max-width: 1560px;
margin: 16px auto 0;
padding: 0 80px 72px;
}
.felimo-blog__eeat-inner {
background: var(--felimo-void);
border-radius: var(--radius-card-lg);
padding: 56px 64px;
display: grid;
grid-template-columns: 1fr auto;
gap: 80px;
align-items: center;
}
.felimo-blog__eeat-eyebrow {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--felimo-amber-600);
margin-bottom: 14px;
}
.felimo-blog__eeat-title {
font-family: var(--font-display);
font-weight: 300;
font-size: 36px;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--felimo-white);
margin: 0 0 14px;
}
.felimo-blog__eeat-body {
font-family: var(--font-sans);
font-size: 15px;
color: rgba(253, 252, 250, 0.55);
line-height: 1.7;
max-width: 520px;
margin: 0;
}
.felimo-blog__eeat-body a { color: var(--felimo-amber-400); text-decoration: underline; text-underline-offset: 2px; }
.felimo-blog__eeat-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.felimo-blog__eeat-list li {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
color: var(--felimo-white);
white-space: nowrap;
}
/* ─── BLOGARTIKEL (templates/single.html) ──────────────────── */
.felimo-article { background: var(--bg-base); padding-top: 64px; }
.felimo-article__head {
max-width: 1560px;
margin: 0 auto;
padding: 32px 80px 48px;
}
.felimo-article__cat {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--felimo-amber-600);
}
.felimo-article__cat a { color: inherit; text-decoration: none; }
.felimo-article__title {
font-family: var(--font-display);
font-weight: 400;
font-size: 48px;
line-height: 1.04;
letter-spacing: -0.025em;
color: var(--text-primary);
margin: 16px 0 20px;
}
.felimo-article__lead {
font-family: var(--font-sans);
font-size: 18px;
color: var(--text-secondary);
line-height: 1.7;
margin: 0 0 28px;
}
.felimo-article__byline {
gap: 12px;
align-items: center;
padding-top: 20px;
border-top: 1px solid var(--border-subtle);
}
.felimo-article__avatar {
width: 32px; height: 32px;
border-radius: 50%;
background: var(--felimo-charcoal);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.felimo-article__author {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
}
.felimo-article__author a { color: inherit; text-decoration: none; }
.felimo-article__meta {
margin-top: 1px;
font-family: var(--font-sans);
font-size: 12px;
color: var(--text-tertiary);
}
/* Meta komt uit [felimo_article_meta]; wp:shortcode wikkelt de spans in een */
.felimo-article__meta p { margin: 0; }
.felimo-article__meta-item { font-size: 12px; color: var(--text-tertiary); }
.felimo-article__meta-item + .felimo-article__meta-item::before { content: "·"; margin: 0 8px; }
.felimo-article__hero {
max-width: 1560px;
margin: 0 auto 56px;
padding: 0 80px;
}
.felimo-article__hero-fig { margin: 0; }
.felimo-article__hero img {
width: 100%;
border-radius: var(--radius-card-lg);
aspect-ratio: 21 / 8;
object-fit: cover;
display: block;
background: var(--felimo-charcoal);
}
/* Placeholder-band zolang er geen eigen fotografie is (DS-hero) */
.felimo-article__hero-ph {
position: relative;
display: flex; align-items: center; justify-content: center;
aspect-ratio: 21 / 8;
border-radius: var(--radius-card-lg);
background: var(--felimo-charcoal);
overflow: hidden;
}
.felimo-article__hero-caption {
position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.04em;
color: rgba(253, 252, 250, 0.25); white-space: nowrap;
}
/* Leeskolom (720px) ------------------------------------------- */
.felimo-article__body {
padding-bottom: 64px;
}
.felimo-article__body > * { margin-inline: auto; }
.felimo-article__body p {
font-family: var(--font-sans);
font-size: 16px;
color: var(--text-secondary);
line-height: 1.8;
margin: 0 0 20px;
}
.felimo-article__body h2 {
font-family: var(--font-display);
font-weight: 400;
font-size: 28px;
line-height: 1.2;
letter-spacing: -0.015em;
color: var(--text-primary);
margin: 16px 0 16px;
}
.felimo-article__body h3 {
font-family: var(--font-sans);
font-weight: 700;
font-size: 19px;
color: var(--text-primary);
margin: 12px 0 10px;
}
.felimo-article__body ul,
.felimo-article__body ol {
font-family: var(--font-sans);
font-size: 16px;
color: var(--text-secondary);
line-height: 1.8;
margin: 0 0 20px;
padding-left: 22px;
}
.felimo-article__body li { margin-bottom: 6px; }
.felimo-article__body a { color: var(--felimo-amber-600); text-decoration: underline; text-underline-offset: 2px; }
.felimo-article__body strong { font-weight: 600; color: var(--text-primary); }
.felimo-article__body blockquote {
margin: 0 0 36px;
padding: 0 0 0 24px;
border-left: 2px solid var(--felimo-amber-400);
}
.felimo-article__body blockquote p {
font-family: var(--font-display);
font-style: italic;
font-size: 22px;
line-height: 1.5;
color: var(--text-primary);
margin: 0;
}
.felimo-article__body img { border-radius: var(--radius-card); }
/* Brede blokken (callouts): breken uit de 720px-leeskolom naar ~1400px,
gecentreerd op de viewport (DS BlogPost-callouts zijn breder dan de tekst) */
.felimo-article__body .felimo-article__wide {
max-width: none;
width: min(1400px, 100% - 160px);
margin: 8px auto 48px;
}
/* Categorie-label (DS): amber uppercase met dot ---------------- */
.felimo-article__clabel {
display: inline-flex; align-items: center; gap: 5px;
font-family: var(--font-sans); font-size: 11px; font-weight: 700;
letter-spacing: 0.1em; text-transform: uppercase; color: var(--felimo-amber-600);
}
.felimo-article__clabel::before {
content: ""; width: 4px; height: 4px; border-radius: 50%;
background: var(--felimo-amber-500); flex-shrink: 0;
}
/* Product-callout (DS): bone-card, product + prijs + CTA -------- */
.felimo-article__callout {
background: var(--felimo-bone);
border: 1px solid var(--border-default);
border-radius: var(--radius-card-lg);
padding: 32px 40px;
display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center;
}
.felimo-article__callout-product { display: flex; gap: 28px; align-items: center; }
.felimo-article__callout-thumb {
width: 88px; height: 88px; border-radius: var(--radius-card);
background: var(--felimo-charcoal); flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
}
.felimo-article__callout-title {
font-family: var(--font-sans); font-weight: 700; font-size: 17px;
color: var(--text-primary); line-height: 1.3; margin: 6px 0;
}
.felimo-article__callout-desc {
font-family: var(--font-sans); font-size: 14px; color: var(--text-secondary);
line-height: 1.6; margin: 0; max-width: none;
}
.felimo-article__callout-buy {
display: flex; flex-direction: column; gap: 10px; align-items: flex-end; flex-shrink: 0;
}
.felimo-article__callout-price { font-family: var(--font-sans); font-size: 22px; font-weight: 700; color: var(--text-primary); }
.felimo-article__body .felimo-article__callout-cta {
height: 44px; padding: 0 24px; border-radius: var(--radius-full);
background: var(--felimo-void); color: #fdfcfa;
font-family: var(--font-sans); font-weight: 600; font-size: 14px;
display: inline-flex; align-items: center; white-space: nowrap; text-decoration: none;
transition: background var(--transition-base);
}
.felimo-article__body .felimo-article__callout-cta:hover { background: var(--felimo-charcoal); color: #fdfcfa; }
.felimo-article__body .felimo-article__callout-link {
font-family: var(--font-sans); font-size: 12px; color: var(--text-tertiary);
text-decoration: underline; text-underline-offset: 2px;
}
/* Eerlijk-advies-callout (DS): donkere void-card met amber-icon -- */
.felimo-article__advice {
background: var(--felimo-void);
border-radius: var(--radius-card-lg);
padding: 32px 40px;
display: flex; gap: 20px; align-items: flex-start;
}
.felimo-article__advice-icon {
flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; margin-top: 2px;
background: rgba(196, 137, 58, 0.15); border: 1px solid var(--felimo-amber-600);
display: flex; align-items: center; justify-content: center;
}
.felimo-article__advice-eyebrow {
font-family: var(--font-sans); font-size: 11px; font-weight: 700;
letter-spacing: 0.1em; text-transform: uppercase; color: var(--felimo-amber-600);
margin-bottom: 8px;
}
.felimo-article__advice p {
font-family: var(--font-sans); font-size: 15px; color: rgba(253, 252, 250, 0.70);
line-height: 1.7; margin: 0; max-width: none;
}
/* Artikel-FAQ (DS): accordeon met +→× (native details/summary) -- */
.felimo-article__faq { margin: 16px 0 48px; }
.felimo-article__body h2.felimo-article__faq-title {
font-family: var(--font-display); font-weight: 400; font-size: 28px;
line-height: 1.2; letter-spacing: -0.015em; color: var(--text-primary); margin: 0 0 28px;
}
.felimo-article__faq-list { border-top: 1px solid var(--border-subtle); }
.felimo-article__faq-item { border-bottom: 1px solid var(--border-subtle); }
.felimo-article__faq-item summary {
list-style: none; cursor: pointer;
display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding: 20px 0;
font-family: var(--font-sans); font-weight: 600; font-size: 16px;
color: var(--text-primary); line-height: 1.4;
}
.felimo-article__faq-item summary::-webkit-details-marker { display: none; }
.felimo-article__faq-item summary svg {
flex-shrink: 0; color: var(--text-tertiary);
transition: transform var(--transition-base);
}
.felimo-article__faq-item[open] summary svg { transform: rotate(45deg); }
.felimo-article__faq-answer {
font-family: var(--font-sans); font-size: 15px; color: var(--text-secondary);
line-height: 1.75; margin: 0 0 20px; padding-right: 32px; max-width: none;
}
/* Auteur-blok ------------------------------------------------- */
.felimo-article__author-block {
padding: 0 80px;
margin-bottom: 56px;
}
.felimo-article__author-card {
border-top: 1px solid var(--border-subtle);
padding-top: 40px;
display: flex;
gap: 20px;
align-items: flex-start;
}
.felimo-article__author-avatar {
width: 52px; height: 52px;
border-radius: 50%;
background: var(--felimo-charcoal);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.felimo-article__author-name {
font-family: var(--font-sans);
font-weight: 600;
font-size: 15px;
color: var(--text-primary);
margin-bottom: 4px;
}
.felimo-article__author-bio {
font-family: var(--font-sans);
font-size: 14px;
color: var(--text-secondary);
line-height: 1.65;
margin: 0;
}
.felimo-article__author-bio a { color: var(--felimo-amber-600); text-decoration: underline; text-underline-offset: 2px; }
/* Gerelateerde artikelen -------------------------------------- */
.felimo-article__related {
background: var(--felimo-bone);
border-top: 1px solid var(--border-subtle);
padding: 72px 0 80px;
}
.felimo-article__related-eyebrow {
max-width: 1560px;
margin: 0 auto 32px;
padding: 0 80px;
font-family: var(--font-sans);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-tertiary);
}
.felimo-article__related-query {
max-width: 1560px;
margin: 0 auto;
padding: 0 80px;
}
/* ─── REDACTIONELE BLOKKEN (patterns: stats, note, keypoints, proscons) ─
Insertbaar in post-content via de 'Felimo'-categorie. Opgebouwd uit
core-blokken zodat tekst inline editbaar blijft; styling hier. De
.felimo-article__body-scoped selectors verslaan de standaard
artikel-typografie (p/ul/li) waar nodig. ----------------------------- */
/* Statistieken ------------------------------------------------ */
.felimo-stats {
border-top: 1px solid var(--border-default);
border-bottom: 1px solid var(--border-default);
padding: 52px 0;
margin: 16px auto 48px;
}
.felimo-stats__row { gap: 40px; }
.felimo-article__body .felimo-stat__num,
.felimo-stat__num {
font-family: var(--font-sans);
font-weight: 600;
font-size: clamp(44px, 6vw, 68px);
line-height: 1;
letter-spacing: -0.03em;
color: var(--text-primary);
margin: 0 0 14px;
max-width: none;
}
.felimo-article__body .felimo-stat__label,
.felimo-stat__label {
font-family: var(--font-sans);
font-size: 15px;
line-height: 1.5;
color: var(--text-tertiary);
margin: 0;
max-width: 22em;
}
/* Notitie / callout (block-styles op core/group) -------------- */
.is-style-felimo-note-tip,
.is-style-felimo-note-info,
.is-style-felimo-note-letop {
position: relative;
border-radius: var(--radius-lg);
border-left: 3px solid var(--accent);
background: var(--felimo-bone);
padding: 22px 26px 22px 60px;
margin: 8px 0 36px;
}
.is-style-felimo-note-tip::before,
.is-style-felimo-note-info::before,
.is-style-felimo-note-letop::before {
content: "";
position: absolute;
left: 24px;
top: 24px;
width: 22px;
height: 22px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.felimo-article__body .felimo-note__title,
.felimo-note__title {
font-family: var(--font-sans);
font-weight: 600;
font-size: 14px;
color: var(--text-primary);
margin: 0 0 4px;
max-width: none;
}
.felimo-article__body :is(.is-style-felimo-note-tip, .is-style-felimo-note-info, .is-style-felimo-note-letop) p,
.is-style-felimo-note-tip p,
.is-style-felimo-note-info p,
.is-style-felimo-note-letop p {
font-family: var(--font-sans);
font-size: 15px;
line-height: 1.7;
color: var(--text-secondary);
margin: 0;
max-width: none;
}
.is-style-felimo-note-tip {
border-left-color: var(--felimo-amber-500);
background: var(--felimo-amber-50);
}
.is-style-felimo-note-tip::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23a86e26' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3Cpath d='M12 2a7 7 0 0 0-4 12.7c.6.5 1 1.3 1 2.1V18h6v-1.2c0-.8.4-1.6 1-2.1A7 7 0 0 0 12 2z'/%3E%3C/svg%3E");
}
.is-style-felimo-note-info {
border-left-color: var(--felimo-blue-500);
background: #eef3f9;
}
.is-style-felimo-note-info::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%231a4a7a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='11' x2='12' y2='16'/%3E%3Cline x1='12' y1='8' x2='12' y2='8'/%3E%3C/svg%3E");
}
.is-style-felimo-note-letop {
border-left-color: var(--felimo-red-500);
background: #fbeded;
}
.is-style-felimo-note-letop::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%239b2226' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.3 2 18a2 2 0 0 0 1.7 3h16.6a2 2 0 0 0 1.7-3L13.7 3.3a2 2 0 0 0-3.4 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12' y2='17'/%3E%3C/svg%3E");
}
/* In het kort (TL;DR) ----------------------------------------- */
.felimo-keypoints {
background: var(--felimo-bone);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl);
padding: 28px 32px;
margin: 8px 0 40px;
box-shadow: var(--shadow-glow-amber-sm);
}
.felimo-article__body .felimo-keypoints__title,
.felimo-keypoints__title {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--font-sans);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--felimo-amber-600);
margin: 0 0 16px;
max-width: none;
}
.felimo-keypoints__title::before {
content: "";
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--felimo-amber-500);
flex-shrink: 0;
}
.felimo-article__body ul.felimo-keypoints__list,
.felimo-keypoints__list {
list-style: none;
margin: 0;
padding: 0;
}
.felimo-article__body .felimo-keypoints__list li,
.felimo-keypoints__list li {
position: relative;
padding-left: 28px;
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.6;
color: var(--text-secondary);
margin: 0 0 10px;
}
.felimo-keypoints__list li:last-child { margin-bottom: 0; }
.felimo-keypoints__list li::before {
content: "";
position: absolute;
left: 0;
top: 3px;
width: 17px;
height: 17px;
background-repeat: no-repeat;
background-position: center;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%23a86e26' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
/* Voor / tegen ------------------------------------------------ */
.felimo-proscons__row { gap: 28px; }
.felimo-proscons__col {
background: var(--felimo-white);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl);
padding: 26px 30px;
}
.felimo-article__body .felimo-proscons__title,
.felimo-proscons__title {
display: flex;
align-items: center;
gap: 9px;
font-family: var(--font-sans);
font-weight: 700;
font-size: 15px;
color: var(--text-primary);
margin: 0 0 16px;
max-width: none;
}
.felimo-proscons__title::before {
content: "";
width: 20px;
height: 20px;
flex-shrink: 0;
background-repeat: no-repeat;
background-position: center;
}
.felimo-proscons__col--pro .felimo-proscons__title::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232a6e4f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.felimo-proscons__col--con .felimo-proscons__title::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239b2226' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}
.felimo-article__body ul.felimo-proscons__list,
.felimo-proscons__list {
list-style: none;
margin: 0;
padding: 0;
}
.felimo-article__body .felimo-proscons__list li,
.felimo-proscons__list li {
position: relative;
padding-left: 26px;
font-family: var(--font-sans);
font-size: 15px;
line-height: 1.6;
color: var(--text-secondary);
margin: 0 0 9px;
}
.felimo-proscons__list li:last-child { margin-bottom: 0; }
.felimo-proscons__list li::before {
content: "";
position: absolute;
left: 0;
top: 4px;
width: 15px;
height: 15px;
background-repeat: no-repeat;
background-position: center;
}
.felimo-proscons__col--pro .felimo-proscons__list li::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%232a6e4f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.felimo-proscons__col--con .felimo-proscons__list li::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%239b2226' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}
/* ─── OVER FELIMO (templates/page-over-felimo.html) ────────── */
.felimo-about { background: var(--bg-base); padding-top: 64px; }
.felimo-about__h2 {
font-family: var(--font-display);
font-weight: 400;
font-size: 40px;
line-height: 1.08;
letter-spacing: -0.02em;
color: var(--text-primary);
margin: 0;
}
.felimo-about__p {
font-family: var(--font-sans);
font-size: 16px;
color: var(--text-secondary);
line-height: 1.75;
margin: 0;
}
.felimo-about__hero { padding: 40px 0 96px; }
.felimo-about__hero-inner { max-width: 1560px; margin: 0 auto; padding: 0 80px; }
.felimo-about__hero .felimo-about__eyebrow { display: block; margin-bottom: 14px; }
.felimo-about__hero-title {
font-family: var(--font-display);
font-weight: 400;
font-size: 56px;
line-height: 1.02;
letter-spacing: -0.025em;
color: var(--text-primary);
margin: 0 0 24px;
}
.felimo-about__hero-title em { font-style: italic; color: var(--felimo-amber-600); }
.felimo-about__hero-intro {
font-family: var(--font-sans);
font-size: 17px;
color: var(--text-secondary);
line-height: 1.75;
max-width: 680px;
margin: 0;
}
.felimo-about__diff {
background: var(--felimo-bone);
border-top: 1px solid var(--border-subtle);
padding: 96px 0;
}
.felimo-about__diff-inner {
max-width: 1560px;
margin: 0 auto;
padding: 0 80px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
}
.felimo-about__diff-media {
border-radius: var(--radius-card-lg);
overflow: hidden;
aspect-ratio: 4 / 3;
position: relative;
background: linear-gradient(135deg, var(--felimo-linen), var(--felimo-mist));
}
.felimo-about__diff-caption {
position: absolute;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
font-family: var(--font-sans);
font-size: 11px;
color: rgba(14, 13, 11, 0.45);
white-space: nowrap;
letter-spacing: 0.04em;
background: rgba(253, 252, 250, 0.7);
padding: 3px 10px;
border-radius: 20px;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
.felimo-about__diff-text { display: flex; flex-direction: column; gap: 16px; }
.felimo-about__diff-text .felimo-about__h2 { font-size: 40px; }
.felimo-about__method {
background: var(--felimo-void);
padding: 96px 0;
}
.felimo-about__method-inner { max-width: 1560px; margin: 0 auto; padding: 0 80px; }
.felimo-about__method .felimo-about__eyebrow { display: block; margin-bottom: 56px; }
.felimo-about__steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.felimo-about__step { padding: 0 56px; }
.felimo-about__step + .felimo-about__step { border-left: 1px solid rgba(255, 255, 255, 0.08); }
.felimo-about__step-n {
font-family: var(--font-display);
font-style: italic;
font-size: 72px;
font-weight: 300;
color: var(--felimo-amber-700);
line-height: 1;
margin-bottom: 24px;
opacity: 0.7;
}
.felimo-about__step-media {
border-radius: var(--radius-card);
aspect-ratio: 4 / 3;
margin-bottom: 28px;
background: linear-gradient(135deg, var(--felimo-charcoal), var(--felimo-void));
}
.felimo-about__step-title {
font-family: var(--font-sans);
font-weight: 600;
font-size: 17px;
color: var(--felimo-white);
margin: 0 0 12px;
line-height: 1.3;
}
.felimo-about__step-body {
font-family: var(--font-sans);
font-size: 15px;
color: rgba(253, 252, 250, 0.5);
line-height: 1.7;
margin: 0;
}
.felimo-about__promise {
background: var(--bg-base);
padding: 80px 0;
border-bottom: 1px solid var(--border-subtle);
}
.felimo-about__promise-inner { max-width: 1560px; margin: 0 auto; padding: 0 80px; }
.felimo-about__promise-head {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: end;
margin-bottom: 64px;
}
.felimo-about__promise-head .felimo-about__eyebrow { display: block; margin-bottom: 14px; }
.felimo-about__promise-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.felimo-about__promise-item {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 0 40px;
}
.felimo-about__promise-item:first-child { padding-left: 0; }
.felimo-about__promise-item:last-child { padding-right: 0; }
.felimo-about__promise-item + .felimo-about__promise-item { border-left: 1px solid var(--border-subtle); }
.felimo-about__promise-item svg { flex-shrink: 0; margin-top: 2px; }
.felimo-about__promise-label {
font-family: var(--font-sans);
font-weight: 600;
font-size: 15px;
color: var(--text-primary);
margin-bottom: 5px;
line-height: 1.3;
}
.felimo-about__promise-sub {
font-family: var(--font-sans);
font-size: 13px;
color: var(--text-tertiary);
line-height: 1.55;
}
.felimo-about__reviews {
background: var(--felimo-bone);
padding: 96px 0;
}
.felimo-about__reviews-inner { max-width: 1560px; margin: 0 auto; padding: 0 80px; }
.felimo-about__reviews .felimo-about__eyebrow { display: block; margin-bottom: 40px; }
.felimo-about__reviews-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.felimo-about__review {
background: var(--surface-1);
border-radius: var(--radius-xl);
padding: 32px;
border: 1px solid var(--border-subtle);
box-shadow: var(--shadow-xs);
margin: 0;
}
.felimo-about__stars {
font-size: 13px;
letter-spacing: 2px;
color: var(--felimo-amber-500);
}
.felimo-about__star--off { color: var(--felimo-mist); }
.felimo-about__review blockquote {
font-family: var(--font-display);
font-style: italic;
font-size: 19px;
line-height: 1.55;
color: var(--text-primary);
margin: 18px 0 14px;
}
.felimo-about__review figcaption {
font-family: var(--font-sans);
font-size: 12px;
color: var(--text-tertiary);
}
.felimo-about__cta {
background: var(--felimo-linen);
padding: 96px 0;
border-top: 1px solid var(--border-default);
}
.felimo-about__cta-inner {
max-width: 1560px;
margin: 0 auto;
padding: 0 80px;
display: grid;
grid-template-columns: 1fr auto;
gap: 64px;
align-items: center;
}
.felimo-about__cta .felimo-about__eyebrow { display: block; margin-bottom: 14px; }
.felimo-about__cta .felimo-about__h2 { margin-bottom: 12px; }
.felimo-about__cta .felimo-about__p { max-width: 480px; }
.felimo-about__cta-actions { display: flex; gap: 12px; flex-shrink: 0; }
/* ─── CONTACT (templates/page-contact.html) ────────────────── */
.felimo-contact { background: var(--bg-base); padding-top: 64px; }
.felimo-contact__eyebrow { display: block; }
.felimo-contact__head { padding: 32px 0 64px; }
.felimo-contact__head-inner { max-width: 1560px; margin: 0 auto; padding: 0 80px; }
.felimo-contact__head .felimo-contact__eyebrow { margin-bottom: 12px; }
.felimo-contact__title {
font-family: var(--font-display);
font-weight: 400;
font-size: 52px;
line-height: 1.02;
letter-spacing: -0.025em;
color: var(--text-primary);
margin: 0 0 16px;
}
.felimo-contact__title em { font-style: italic; color: var(--felimo-amber-600); }
.felimo-contact__intro {
font-family: var(--font-sans);
font-size: 16px;
color: var(--text-secondary);
line-height: 1.75;
max-width: 560px;
margin: 0;
}
.felimo-contact__channels { padding-bottom: 72px; }
.felimo-contact__channels-inner {
max-width: 1560px;
margin: 0 auto;
padding: 0 80px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.felimo-contact__channel {
padding: 28px 28px 24px;
border-radius: var(--radius-card);
border: 1px solid var(--border-subtle);
background: var(--surface-1);
display: flex;
flex-direction: column;
gap: 12px;
transition: all var(--transition-base);
}
.felimo-contact__channel:hover {
border-color: var(--border-default);
background: var(--felimo-bone);
box-shadow: var(--shadow-sm);
}
.felimo-contact__channel a { color: inherit; text-decoration: none; }
.felimo-contact__channel a:hover { color: var(--felimo-amber-600); }
.felimo-contact__channel-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.felimo-contact__badge {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
color: var(--text-tertiary);
background: var(--felimo-bone);
border: 1px solid var(--border-default);
padding: 3px 9px;
border-radius: var(--radius-full);
}
.felimo-contact__badge--online {
color: #1F8A5B;
background: rgba(31, 138, 91, 0.08);
border-color: rgba(31, 138, 91, 0.2);
}
.felimo-contact__channel-label {
font-family: var(--font-sans);
font-weight: 700;
font-size: 16px;
color: var(--text-primary);
}
.felimo-contact__channel-sub {
font-family: var(--font-sans);
font-size: 14px;
color: var(--text-tertiary);
}
.felimo-contact__form-section {
background: var(--felimo-bone);
border-top: 1px solid var(--border-subtle);
border-bottom: 1px solid var(--border-subtle);
padding: 80px 0;
}
.felimo-contact__form-inner {
max-width: 1560px;
margin: 0 auto;
padding: 0 80px;
display: grid;
grid-template-columns: 1fr 400px;
gap: 80px;
align-items: start;
}
.felimo-contact__form-title {
font-family: var(--font-display);
font-weight: 400;
font-size: 36px;
line-height: 1.08;
letter-spacing: -0.02em;
color: var(--text-primary);
margin: 0 0 32px;
}
/* CF7-form in Felimo-stijl ----------------------------------- */
.felimo-contact__form .wpcf7-form { display: flex; flex-direction: column; gap: 20px; }
.felimo-contact__form .wpcf7-form p { margin: 0; }
.felimo-contact__form label {
display: block;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
color: var(--text-secondary);
margin-bottom: 6px;
}
.felimo-contact__form .felimo-cf7-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.felimo-contact__form input[type="text"],
.felimo-contact__form input[type="email"],
.felimo-contact__form input[type="tel"],
.felimo-contact__form select,
.felimo-contact__form textarea {
width: 100%;
font-family: var(--font-sans);
font-size: 15px;
color: var(--text-primary);
background: var(--surface-1);
border: 1.5px solid rgba(14, 13, 11, 0.18);
border-radius: var(--radius-md);
outline: none;
transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.felimo-contact__form input[type="text"],
.felimo-contact__form input[type="email"],
.felimo-contact__form input[type="tel"],
.felimo-contact__form select {
height: 46px;
padding: 0 14px;
}
.felimo-contact__form textarea {
min-height: 140px;
padding: 12px 14px;
resize: vertical;
line-height: 1.6;
}
.felimo-contact__form input:focus,
.felimo-contact__form select:focus,
.felimo-contact__form textarea:focus {
border-color: var(--felimo-amber-500);
box-shadow: 0 0 0 3px rgba(196, 137, 58, 0.1);
}
.felimo-contact__form .wpcf7-submit {
height: 50px;
padding: 0 32px;
border-radius: var(--radius-full);
background: var(--felimo-void);
color: var(--felimo-white);
font-family: var(--font-sans);
font-weight: 700;
font-size: 15px;
border: none;
cursor: pointer;
transition: background var(--transition-base);
width: fit-content;
}
.felimo-contact__form .wpcf7-submit:hover { background: var(--felimo-charcoal); }
.felimo-contact__form .wpcf7-not-valid-tip {
font-family: var(--font-sans);
font-size: 12px;
color: #c0392b;
margin-top: 4px;
}
.felimo-contact__form .wpcf7-response-output {
font-family: var(--font-sans);
font-size: 14px;
border-radius: var(--radius-md);
margin: 8px 0 0;
padding: 12px 16px;
}
.felimo-contact__aside {
display: flex;
flex-direction: column;
gap: 24px;
position: sticky;
top: 88px;
}
.felimo-contact__hours {
background: var(--felimo-void);
border-radius: var(--radius-card);
padding: 28px;
}
.felimo-contact__aside-eyebrow {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-tertiary);
margin-bottom: 16px;
}
.felimo-contact__hours .felimo-contact__aside-eyebrow--amber { color: var(--felimo-amber-600); }
.felimo-contact__hours-row {
display: flex;
justify-content: space-between;
font-family: var(--font-sans);
font-size: 14px;
color: rgba(253, 252, 250, 0.7);
margin-bottom: 8px;
}
.felimo-contact__hours-row span:last-child { font-weight: 500; color: var(--felimo-white); }
.felimo-contact__hours-row--closed,
.felimo-contact__hours-row--closed span:last-child { color: rgba(253, 252, 250, 0.3); }
.felimo-contact__details {
background: var(--surface-1);
border-radius: var(--radius-card);
padding: 28px;
border: 1px solid var(--border-subtle);
display: flex;
flex-direction: column;
gap: 16px;
}
.felimo-contact__detail {
display: flex;
align-items: flex-start;
gap: 10px;
font-family: var(--font-sans);
font-size: 14px;
color: var(--text-secondary);
line-height: 1.6;
}
.felimo-contact__detail svg { flex-shrink: 0; margin-top: 1px; }
.felimo-contact__faq { padding: 80px 0; }
.felimo-contact__faq-inner {
max-width: 1560px;
margin: 0 auto;
padding: 0 80px;
display: grid;
grid-template-columns: 1fr 2fr;
gap: 80px;
align-items: start;
}
.felimo-contact__faq-intro .felimo-contact__eyebrow { margin-bottom: 12px; }
.felimo-contact__faq-title {
font-family: var(--font-display);
font-weight: 400;
font-size: 36px;
line-height: 1.08;
letter-spacing: -0.02em;
color: var(--text-primary);
margin: 0 0 16px;
}
.felimo-contact__faq-title em { font-style: italic; color: var(--felimo-amber-600); }
.felimo-contact__faq-text {
font-family: var(--font-sans);
font-size: 15px;
color: var(--text-secondary);
line-height: 1.7;
margin: 0;
}
.felimo-contact__faq-list { border-top: 1px solid var(--border-subtle); }
.felimo-contact__faq-item { border-bottom: 1px solid var(--border-subtle); }
.felimo-contact__faq-item summary {
list-style: none;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 20px 0;
font-family: var(--font-sans);
font-weight: 600;
font-size: 16px;
color: var(--text-primary);
line-height: 1.4;
}
.felimo-contact__faq-item summary::-webkit-details-marker { display: none; }
.felimo-contact__faq-item summary::after {
content: "+";
font-size: 22px;
font-weight: 300;
color: var(--text-tertiary);
line-height: 1;
transition: transform 0.2s ease;
flex-shrink: 0;
}
.felimo-contact__faq-item[open] summary::after { transform: rotate(45deg); }
.felimo-contact__faq-item p {
font-family: var(--font-sans);
font-size: 15px;
color: var(--text-secondary);
line-height: 1.75;
margin: 0 0 20px;
padding-right: 32px;
}
/* ─── 404 (templates/404.html) ─────────────────────────────── */
.felimo-404 {
background: var(--bg-base);
padding-top: 64px;
min-height: calc(100vh - 64px);
display: flex;
align-items: center;
}
.felimo-404__inner {
max-width: 1560px;
margin: 0 auto;
padding: 80px;
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.felimo-404__text { display: flex; flex-direction: column; gap: 28px; }
.felimo-404__eyebrow {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-tertiary);
}
.felimo-404__title {
font-family: var(--font-display);
font-weight: 400;
font-size: 64px;
line-height: 1;
letter-spacing: -0.03em;
color: var(--text-primary);
margin: 0 0 20px;
}
.felimo-404__title em { font-style: italic; color: var(--felimo-amber-600); }
.felimo-404__intro {
font-family: var(--font-sans);
font-size: 17px;
color: var(--text-secondary);
line-height: 1.75;
max-width: 440px;
margin: 0;
}
.felimo-404__links { display: flex; flex-direction: column; gap: 6px; }
.felimo-404__links-label {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-tertiary);
margin-bottom: 4px;
}
.felimo-404__links a {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-sans);
font-size: 15px;
font-weight: 500;
color: var(--text-primary);
text-decoration: none;
width: fit-content;
transition: color var(--transition-base);
}
.felimo-404__links a svg { opacity: 0.3; transition: opacity var(--transition-base); }
.felimo-404__links a:hover { color: var(--felimo-amber-600); }
.felimo-404__links a:hover svg { opacity: 1; }
.felimo-404__actions { display: flex; gap: 12px; align-items: center; padding-top: 8px; }
.felimo-404__art {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.felimo-404__big {
font-family: var(--font-display);
font-style: italic;
font-size: 240px;
font-weight: 300;
color: var(--felimo-linen);
line-height: 1;
user-select: none;
letter-spacing: -0.04em;
}
.felimo-404__cat {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -54%);
display: flex;
flex-direction: column;
align-items: center;
}
.felimo-404__cat-caption {
font-family: var(--font-display);
font-style: italic;
font-size: 15px;
color: var(--text-tertiary);
margin-top: 8px;
}
/* ─── Responsive (content-pagina's) ────────────────────────── */
@media (max-width: 1024px) {
.felimo-blog__crumbs, .felimo-article__crumbs, .felimo-about__crumbs, .felimo-contact__crumbs { padding-inline: 40px; }
.felimo-blog__head, .felimo-blog__container, .felimo-blog__eeat,
.felimo-article__head, .felimo-article__hero, .felimo-article__author-block,
.felimo-article__related-eyebrow,
.felimo-about__hero-inner, .felimo-about__diff-inner, .felimo-about__method-inner,
.felimo-about__promise-inner, .felimo-about__reviews-inner, .felimo-about__cta-inner,
.felimo-contact__head-inner, .felimo-contact__channels-inner, .felimo-contact__form-inner,
.felimo-contact__faq-inner, .felimo-404__inner { padding-inline: 40px; }
}
@media (max-width: 900px) {
.felimo-blog__title { font-size: 40px; }
.felimo-blog__grid { grid-template-columns: repeat(2, 1fr) !important; }
.felimo-blog__eeat-inner { grid-template-columns: 1fr; gap: 40px; padding: 40px; }
.felimo-article__title { font-size: 36px; }
/* Callouts: minder zij-marge, product-callout stapelt */
.felimo-article__body .felimo-article__wide { width: min(1400px, 100% - 40px); }
.felimo-article__callout { grid-template-columns: 1fr; gap: 24px; padding: 28px; }
.felimo-article__callout-buy { align-items: flex-start; }
.felimo-article__advice { padding: 28px; }
.felimo-about__hero-title { font-size: 40px; }
.felimo-about__diff-inner, .felimo-about__promise-head, .felimo-about__cta-inner,
.felimo-contact__faq-inner { grid-template-columns: 1fr; gap: 40px; }
.felimo-about__steps { grid-template-columns: 1fr; gap: 48px; }
.felimo-about__step, .felimo-about__step:first-child, .felimo-about__step:last-child { padding: 0; }
.felimo-about__step + .felimo-about__step { border-left: none; }
.felimo-about__promise-grid { grid-template-columns: 1fr 1fr; gap: 32px 0; }
.felimo-about__reviews-grid { grid-template-columns: 1fr; }
.felimo-contact__channels-inner { grid-template-columns: 1fr; }
.felimo-contact__form-inner { grid-template-columns: 1fr; }
.felimo-contact__aside { position: static; }
.felimo-404__inner { grid-template-columns: 1fr; gap: 40px; }
.felimo-404__title { font-size: 48px; }
.felimo-404__big { font-size: 160px; }
}
@media (max-width: 640px) {
.felimo-blog__grid { grid-template-columns: 1fr !important; }
.felimo-about__promise-grid { grid-template-columns: 1fr; }
.felimo-about__promise-item, .felimo-about__promise-item:first-child, .felimo-about__promise-item:last-child { padding: 0; }
.felimo-about__promise-item + .felimo-about__promise-item { border-left: none; padding-top: 24px; }
}
/* ─── Cart-drawer (off-canvas winkelmand) ──────────────────── */
.felimo-drawer {
position: fixed;
inset: 0;
z-index: 300;
}
.felimo-drawer[hidden] { display: none; }
.felimo-drawer__backdrop {
position: fixed;
inset: 0;
background: rgba(14, 13, 11, 0.45);
backdrop-filter: blur(2px);
opacity: 0;
transition: opacity 300ms var(--ease-smooth);
}
.felimo-drawer.is-open .felimo-drawer__backdrop { opacity: 1; }
.felimo-drawer__panel {
position: fixed;
top: 0;
right: 0;
bottom: 0;
z-index: 1;
width: 400px;
max-width: 92vw;
background: var(--bg-base);
box-shadow: var(--shadow-2xl);
display: flex;
flex-direction: column;
overflow: hidden;
transform: translateX(100%);
transition: transform 340ms var(--ease-smooth);
}
.felimo-drawer.is-open .felimo-drawer__panel { transform: translateX(0); }
/* Header */
.felimo-drawer__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px 16px;
border-bottom: 1px solid var(--border-subtle);
flex-shrink: 0;
}
.felimo-drawer__title-group {
display: flex;
align-items: center;
gap: 10px;
}
.felimo-drawer__title {
font-family: var(--font-display);
font-weight: 400;
font-size: 22px;
letter-spacing: -0.01em;
color: var(--text-primary);
}
.felimo-drawer__count {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 700;
background: var(--felimo-void);
color: var(--felimo-white);
border-radius: var(--radius-full);
padding: 2px 8px;
min-width: 22px;
text-align: center;
}
.felimo-drawer__close {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--bg-subtle);
border: 1px solid var(--border-subtle);
color: var(--text-primary);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background var(--transition-micro);
flex-shrink: 0;
}
.felimo-drawer__close:hover { background: var(--felimo-mist); }
/* Body (scrollbaar) */
.felimo-drawer__body {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
min-height: 0;
}
/* Gratis-verzending-balk */
.felimo-drawer__ship {
padding: 12px 24px;
background: var(--felimo-amber-50);
color: var(--felimo-amber-700);
border-bottom: 1px solid var(--border-subtle);
flex-shrink: 0;
}
.felimo-drawer__ship.is-free {
background: var(--color-success-bg);
color: var(--color-success);
}
.felimo-drawer__ship-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
font-family: var(--font-sans);
font-size: 13px;
}
.felimo-drawer__ship-row svg { color: var(--felimo-amber-600); flex-shrink: 0; }
.felimo-drawer__ship.is-free .felimo-drawer__ship-row svg { color: var(--color-success); }
.felimo-drawer__ship-done { font-weight: 600; }
.felimo-drawer__progress {
height: 4px;
border-radius: 2px;
background: var(--felimo-mist);
overflow: hidden;
}
.felimo-drawer__progress > span {
display: block;
height: 100%;
background: var(--felimo-amber-500);
border-radius: 2px;
transition: width 400ms var(--ease-smooth);
}
.felimo-drawer__ship.is-free .felimo-drawer__progress > span { background: var(--color-success); }
/* Items */
.felimo-drawer__items {
flex: 1;
overflow-y: auto;
padding: 8px 0;
}
.felimo-drawer__item {
display: grid;
grid-template-columns: 56px 1fr;
gap: 14px;
padding: 16px 24px;
border-bottom: 1px solid var(--border-subtle);
align-items: flex-start;
}
.felimo-drawer__item:last-child { border-bottom: none; }
.felimo-drawer__thumb {
width: 56px;
height: 56px;
border-radius: var(--radius-lg);
background: var(--felimo-bone);
border: 1px solid var(--border-subtle);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
overflow: hidden;
}
.felimo-drawer__thumb img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 4px;
display: block;
}
.felimo-drawer__item-body {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.felimo-drawer__item-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
}
.felimo-drawer__item-name {
font-family: var(--font-sans);
font-weight: 600;
font-size: 14px;
color: var(--text-primary);
line-height: 1.3;
flex: 1;
text-decoration: none;
}
.felimo-drawer__item-name:hover { color: var(--accent-hover); }
.felimo-drawer__remove {
background: none;
border: none;
cursor: pointer;
color: var(--text-tertiary);
padding: 0;
display: flex;
align-items: center;
flex-shrink: 0;
margin-top: 1px;
transition: color var(--transition-micro);
}
.felimo-drawer__remove:hover { color: var(--text-primary); }
.felimo-drawer__item-sub {
font-family: var(--font-sans);
font-size: 12px;
color: var(--text-tertiary);
}
.felimo-drawer__item-bottom {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 6px;
}
.felimo-drawer__stepper {
display: inline-flex;
align-items: center;
border: 1.5px solid var(--border-default);
border-radius: var(--radius-full);
overflow: hidden;
}
.felimo-drawer__stepper button {
width: 28px;
height: 28px;
background: none;
border: none;
cursor: pointer;
font-family: var(--font-sans);
font-size: 15px;
color: var(--text-secondary);
display: flex;
align-items: center;
justify-content: center;
transition: color var(--transition-micro);
}
.felimo-drawer__stepper button:hover:not([disabled]) { color: var(--text-primary); }
.felimo-drawer__stepper button[disabled] { opacity: 0.4; cursor: not-allowed; }
.felimo-drawer__stepper-value {
width: 26px;
text-align: center;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
}
.felimo-drawer__item-price {
font-family: var(--font-sans);
font-weight: 700;
font-size: 16px;
color: var(--text-primary);
}
/* Lege staat */
.felimo-drawer__empty {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 8px;
padding: 48px 24px;
}
.felimo-drawer__empty-illo { margin-bottom: 4px; }
.felimo-drawer__empty-title {
font-family: var(--font-display);
font-style: italic;
font-size: 20px;
color: var(--text-tertiary);
}
.felimo-drawer__empty-body {
font-family: var(--font-sans);
font-size: 13px;
color: var(--text-tertiary);
}
.felimo-drawer__empty-cta { margin-top: 12px; }
/* Footer: totalen + CTA + trust */
.felimo-drawer__footer {
border-top: 1px solid var(--border-subtle);
padding: 20px 24px 24px;
display: flex;
flex-direction: column;
gap: 14px;
flex-shrink: 0;
background: var(--surface-1);
}
.felimo-drawer__totals {
display: flex;
flex-direction: column;
gap: 6px;
}
.felimo-drawer__totals-row {
display: flex;
justify-content: space-between;
align-items: baseline;
font-family: var(--font-sans);
font-size: 13px;
color: var(--text-tertiary);
}
.felimo-drawer__totals-row > span:last-child { color: var(--text-secondary); font-weight: 500; font-size: 14px; }
.felimo-drawer__totals-row--discount > span:last-child { color: var(--color-success); }
.felimo-drawer__totals-free { color: var(--color-success) !important; }
.felimo-drawer__totals-row--grand {
border-top: 1px solid var(--border-subtle);
padding-top: 12px;
}
.felimo-drawer__totals-row--grand > span:first-child {
font-family: var(--font-sans);
font-weight: 700;
font-size: 16px;
color: var(--text-primary);
}
.felimo-drawer__grand {
font-family: var(--font-sans) !important;
font-weight: 700 !important;
font-size: 22px !important;
color: var(--text-primary) !important;
}
.felimo-drawer__checkout {
width: 100%;
background: var(--felimo-void);
color: var(--felimo-white);
border-color: var(--felimo-void);
gap: 8px;
}
.felimo-drawer__checkout:hover {
background: var(--felimo-charcoal);
border-color: var(--felimo-charcoal);
color: var(--felimo-white);
}
.felimo-drawer__chips {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
}
.felimo-drawer__chips li {
font-family: var(--font-sans);
font-size: 10px;
font-weight: 600;
color: var(--text-tertiary);
background: var(--bg-subtle);
border: 1px solid var(--border-subtle);
border-radius: 4px;
padding: 2px 7px;
letter-spacing: 0.02em;
}
.felimo-drawer__trust {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
border-top: 1px solid var(--border-subtle);
padding-top: 12px;
}
.felimo-drawer__trust-rating {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--font-sans);
font-size: 12px;
color: var(--text-tertiary);
}
.felimo-drawer__trust-rating strong { color: var(--text-secondary); }
.felimo-drawer__stars { color: var(--felimo-amber-500); letter-spacing: 1px; }
.felimo-drawer__trust-points {
display: flex;
gap: 16px;
font-family: var(--font-sans);
font-size: 11px;
color: var(--text-tertiary);
}
@media (max-width: 480px) {
.felimo-drawer__panel { width: 100vw; max-width: 100vw; }
}
/* ============================================================
Zoekpagina (felimo/search-results block) — DS SearchPage.
Donkere zoek-hero + filterbalk + pcard-grid + lege staat.
============================================================ */
.felimo-search-hero { background: var(--felimo-void); padding: 120px 0 48px; }
.felimo-search-hero__inner { max-width: 1560px; margin: 0 auto; padding: 0 80px; }
.felimo-search-hero__eyebrow {
font-family: var(--font-sans); font-size: 11px; font-weight: 700;
letter-spacing: 0.12em; text-transform: uppercase;
color: var(--felimo-amber-600); margin-bottom: 16px;
}
.felimo-search-hero__form { display: flex; max-width: 640px; }
.felimo-search-hero__field { flex: 1; position: relative; display: flex; align-items: center; min-width: 0; }
.felimo-search-hero__field svg { position: absolute; left: 18px; color: rgba(253, 252, 250, 0.4); pointer-events: none; }
.felimo-search-hero__field input {
width: 100%; height: 52px; padding: 0 16px 0 48px;
font-family: var(--font-display); font-style: italic; font-size: 20px;
color: var(--felimo-white); background: rgba(255, 255, 255, 0.08);
border: 1.5px solid rgba(255, 255, 255, 0.12); border-right: none;
border-radius: var(--radius-full) 0 0 var(--radius-full);
outline: none; caret-color: var(--felimo-amber-400);
transition: border-color var(--transition-base);
}
.felimo-search-hero__field input::placeholder { color: rgba(253, 252, 250, 0.35); }
.felimo-search-hero__field input:focus { border-color: rgba(196, 137, 58, 0.5); }
.felimo-search-hero__form button {
height: 52px; padding: 0 28px; flex-shrink: 0; white-space: nowrap;
border-radius: 0 var(--radius-full) var(--radius-full) 0;
background: var(--felimo-amber-500); color: var(--felimo-void);
font-family: var(--font-sans); font-weight: 700; font-size: 14px;
border: none; cursor: pointer; transition: background var(--transition-base);
}
.felimo-search-hero__form button:hover { background: var(--felimo-amber-600); }
.felimo-search-hero__count { font-family: var(--font-sans); font-size: 14px; color: rgba(253, 252, 250, 0.45); margin: 14px 0 0; }
.felimo-search-hero__count em { font-style: italic; color: rgba(253, 252, 250, 0.75); }
.felimo-search-results { padding: 40px 0 96px; background: var(--bg-base); }
.felimo-search-results__inner { max-width: 1560px; margin: 0 auto; padding: 0 80px; }
/* Filterbalk: categorie-pills + sorteer-select */
.felimo-search-results__bar,
.felimo-plp__bar {
display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
margin-bottom: 32px; padding-bottom: 20px; border-bottom: 1px solid var(--border-subtle);
}
.felimo-search-results__pills,
.felimo-plp__pills { display: flex; gap: 6px; flex-wrap: wrap; }
.felimo-search-results__pills a,
.felimo-plp__pills a {
display: inline-flex; align-items: center; height: 34px; padding: 0 16px;
border-radius: var(--radius-full); white-space: nowrap; text-decoration: none;
font-family: var(--font-sans); font-size: 13px; font-weight: 400;
background: var(--surface-1); color: var(--text-primary);
border: 1.5px solid var(--border-strong); box-shadow: var(--shadow-xs);
transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}
.felimo-search-results__pills a:hover,
.felimo-plp__pills a:hover { border-color: var(--felimo-ash); }
.felimo-search-results__pills a.is-active,
.felimo-plp__pills a.is-active {
background: var(--felimo-void); color: var(--felimo-white);
border-color: var(--felimo-void); font-weight: 600; box-shadow: none;
}
.felimo-search-results__sort select,
.felimo-plp__sort select {
height: 34px; padding: 0 38px 0 14px; border-radius: var(--radius-full);
font-family: var(--font-sans); font-size: 13px; color: var(--text-primary);
border: 1.5px solid var(--border-strong);
box-shadow: var(--shadow-xs); cursor: pointer;
/* Eigen chevron i.p.v. de native pijl, die te dicht op de rand staat */
appearance: none; -webkit-appearance: none;
background: var(--surface-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpolyline points='2.5 4.5 6 8 9.5 4.5' stroke='%230e0d0b' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center;
}
/* Grid: 4 kolommen op desktop (DS); pcards via de gedeelde renderer */
.felimo-search-results__grid.felimo-products__grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
/* Lege staat */
.felimo-search-results__empty {
padding: 80px 0; display: flex; flex-direction: column; align-items: center;
gap: 16px; text-align: center;
}
.felimo-search-results__empty h2 {
font-family: var(--font-display); font-style: italic; font-weight: 400;
font-size: 28px; color: var(--text-primary); margin: 0;
}
.felimo-search-results__empty p {
font-family: var(--font-sans); font-size: 15px; color: var(--text-tertiary);
max-width: 360px; line-height: 1.7; margin: 0;
}
/* Blogartikelen die matchen */
.felimo-search-results__posts { margin-top: 56px; }
.felimo-search-results__posts h2 {
font-family: var(--font-display); font-weight: 400; font-size: 28px;
letter-spacing: -0.01em; color: var(--text-primary); margin: 0 0 16px;
}
.felimo-search-results__posts ul { list-style: none; margin: 0; padding: 0; }
.felimo-search-results__posts li {
padding: 14px 0; border-bottom: 1px solid var(--border-subtle);
display: flex; flex-direction: column; gap: 4px;
}
.felimo-search-results__posts li:last-child { border-bottom: none; }
.felimo-search-results__posts a {
font-family: var(--font-sans); font-weight: 600; font-size: 15px;
color: var(--text-primary); text-decoration: none;
}
.felimo-search-results__posts a:hover { color: var(--accent); }
.felimo-search-results__posts span { font-family: var(--font-sans); font-size: 13px; color: var(--text-tertiary); }
@media (max-width: 1100px) {
.felimo-search-results__grid.felimo-products__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
.felimo-search-hero { padding-top: 96px; }
.felimo-search-hero__inner, .felimo-search-results__inner { padding-inline: 20px; }
.felimo-search-hero__field input { font-size: 17px; }
.felimo-search-results__grid.felimo-products__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.felimo-search-results__grid.felimo-products__grid { grid-template-columns: 1fr; }
}
/* PLP-toolbar (felimo/product-grid source=archive) — deelt de zoek-toolbar-stijl */
.felimo-plp__bar-right { display: flex; align-items: center; gap: 14px; }
.felimo-plp__count { font-family: var(--font-sans); font-size: 13px; color: var(--text-tertiary); white-space: nowrap; }
.felimo-plp__empty { padding: 64px 0 32px; text-align: center; }
.felimo-plp__empty h2 {
font-family: var(--font-display); font-style: italic; font-weight: 400;
font-size: 24px; color: var(--text-primary); margin: 0 0 8px;
}
.felimo-plp__empty p { font-family: var(--font-sans); font-size: 14px; color: var(--text-tertiary); margin: 0; }
.felimo-plp__empty a { color: var(--text-accent); }
/* PLP filter-zijbalk (DS PLPGrid): layout + checkbox-chips */
.felimo-plp { display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: start; }
.felimo-plp__sidebar { position: sticky; top: 88px; }
.felimo-plp__sidebar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.felimo-plp__sidebar-title {
font-family: var(--font-display); font-weight: 500; font-size: 22px;
letter-spacing: -0.01em; color: var(--text-primary);
}
.felimo-plp__clear {
font-family: var(--font-sans); font-size: 12px; font-weight: 500;
letter-spacing: 0.02em; color: var(--text-accent); text-decoration: none;
}
.felimo-plp__clear:hover { color: var(--accent-hover); }
.felimo-plp__group { border-top: 1px solid var(--border-subtle); padding-top: 20px; margin-bottom: 16px; }
.felimo-plp__group-label {
font-family: var(--font-sans); font-size: 11px; font-weight: 700;
letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-tertiary);
margin-bottom: 6px;
}
.felimo-plp__chip {
display: flex; align-items: center; gap: 8px; padding: 9px 0;
font-family: var(--font-sans); font-size: 14px; font-weight: 400;
color: var(--text-tertiary); text-decoration: none;
transition: color var(--transition-base);
}
.felimo-plp__chip:hover { color: var(--text-secondary); }
.felimo-plp__chip.is-checked { color: var(--text-primary); font-weight: 500; }
.felimo-plp__chip-box {
width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0;
border: 1.5px solid var(--border-strong); background: transparent;
display: flex; align-items: center; justify-content: center;
color: transparent; transition: background var(--transition-base), border-color var(--transition-base);
}
.felimo-plp__chip-box--radio { border-radius: var(--radius-full); }
.felimo-plp__chip.is-checked .felimo-plp__chip-box {
background: var(--felimo-void); border-color: var(--felimo-void); color: var(--felimo-white);
}
.felimo-plp__main { min-width: 0; }
@media (max-width: 960px) {
.felimo-shop__body { padding: 32px 20px 64px; }
.felimo-plp { grid-template-columns: 1fr; gap: 24px; }
.felimo-plp__sidebar { position: static; }
.felimo-plp__group { margin-bottom: 4px; }
.felimo-plp__chip { display: inline-flex; padding: 6px 12px 6px 8px; margin: 0 6px 6px 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-full); background: var(--surface-1); }
}
/* Categorie-keuzehulp + FAQ (felimo/category-bottom, DS PLPBottom) */
.felimo-cat-seo { background: var(--bg-base); padding: 32px 0 80px; }
.felimo-cat-seo__inner { max-width: 1560px; margin: 0 auto; padding: 0 80px; }
.felimo-cat-seo__title {
font-family: var(--font-display); font-weight: 400; font-size: 30px;
letter-spacing: -0.02em; color: var(--text-primary); margin: 0 0 16px;
}
.felimo-cat-seo__text {
max-width: 720px; font-family: var(--font-sans); font-size: 15px;
color: var(--text-secondary); line-height: 1.75;
}
.felimo-cat-seo__text p { margin: 0 0 14px; }
.felimo-cat-seo__text p:last-child { margin-bottom: 0; }
.felimo-cat-faq { background: var(--felimo-bone); border-top: 1px solid var(--border-subtle); padding: 96px 0; }
.felimo-cat-faq__inner { max-width: 1560px; margin: 0 auto; padding: 0 80px; }
.felimo-cat-faq__eyebrow {
font-family: var(--font-sans); font-size: 11px; font-weight: 700;
letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-tertiary);
margin-bottom: 20px;
}
.felimo-cat-faq__list { max-width: 760px; }
.felimo-cat-faq__item { border-top: 1px solid var(--border-subtle); }
.felimo-cat-faq__item:last-child { border-bottom: 1px solid var(--border-subtle); }
.felimo-cat-faq__item summary {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding: 16px 0; cursor: pointer; list-style: none;
font-family: var(--font-sans); font-size: 15px; font-weight: 500; color: var(--text-primary);
transition: color var(--transition-base);
}
.felimo-cat-faq__item summary::-webkit-details-marker { display: none; }
.felimo-cat-faq__item summary:hover { color: var(--accent); }
.felimo-cat-faq__item summary svg { flex-shrink: 0; color: var(--text-tertiary); transition: transform var(--transition-base); }
.felimo-cat-faq__item[open] summary svg { transform: rotate(45deg); }
.felimo-cat-faq__answer {
padding: 0 32px 18px 0; font-family: var(--font-sans); font-size: 14px;
color: var(--text-secondary); line-height: 1.7;
}
@media (max-width: 900px) {
.felimo-cat-seo__inner, .felimo-cat-faq__inner { padding: 0 20px; }
.felimo-cat-faq { padding: 64px 0; }
}
/* PDP: Hoe het werkt (donkere DS-sectie, categorie-content) */
.felimo-pdp__how { background: var(--felimo-void); padding: 96px 0; }
.felimo-pdp__how-inner { max-width: 1560px; margin: 0 auto; padding: 0 80px; }
.felimo-pdp__how-eyebrow {
font-family: var(--font-sans); font-size: 11px; font-weight: 700;
letter-spacing: 0.1em; text-transform: uppercase; color: var(--felimo-amber-600);
margin-bottom: 12px;
}
.felimo-pdp__how-title {
font-family: var(--font-display); font-weight: 300; font-size: 40px;
line-height: 1.1; letter-spacing: -0.02em; color: var(--felimo-white);
margin: 0 0 48px;
}
.felimo-pdp__how-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.felimo-pdp__how-step { display: flex; flex-direction: column; gap: 6px; }
.felimo-pdp__how-tile {
position: relative; background: var(--felimo-charcoal); border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: var(--radius-xl); aspect-ratio: 4 / 3; overflow: hidden;
display: flex; align-items: center; justify-content: center; margin-bottom: 10px;
}
.felimo-pdp__how-tile--alt { background: #2a2722; }
.felimo-pdp__how-num {
position: absolute; top: 14px; left: 16px;
font-family: var(--font-display); font-style: italic; font-size: 22px;
color: rgba(196, 137, 58, 0.7);
}
.felimo-pdp__how-step-title { font-family: var(--font-sans); font-weight: 600; font-size: 15px; color: var(--felimo-white); }
.felimo-pdp__how-step-sub { font-family: var(--font-sans); font-size: 13px; color: rgba(253, 252, 250, 0.5); line-height: 1.5; }
/* PDP: vergelijkingstabel (categorie-content) — symmetrische padding: de
specs-sectie erna heeft een bone-achtergrond en plakt anders tegen de tabel */
.felimo-pdp__compare { background: var(--bg-base); padding: 96px 0; }
.felimo-pdp__compare-inner { max-width: 1560px; margin: 0 auto; padding: 0 80px; }
.felimo-pdp__compare-title {
font-family: var(--font-display); font-weight: 400; font-size: 30px;
letter-spacing: -0.02em; color: var(--text-primary); margin: 0 0 24px;
}
.felimo-pdp__compare-table { width: 100%; max-width: 840px; border-collapse: collapse; }
.felimo-pdp__compare-table th, .felimo-pdp__compare-table td {
font-family: var(--font-sans); font-size: 14px; text-align: left;
padding: 13px 16px; border-bottom: 1px solid var(--border-subtle);
}
.felimo-pdp__compare-table thead th { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-tertiary); }
.felimo-pdp__compare-table tbody th { font-weight: 600; color: var(--text-primary); width: 26%; }
.felimo-pdp__compare-table td { color: var(--text-secondary); }
.felimo-pdp__compare-table .felimo-pdp__compare-a { background: var(--felimo-bone); color: var(--text-primary); font-weight: 500; }
.felimo-pdp__compare-table thead .felimo-pdp__compare-a { color: var(--felimo-amber-600); }
/* PDP: in de doos + vergelijk de modellen (DS: donkere 2-koloms sectie) */
.felimo-pdp__inbox { background: var(--felimo-void); margin-top: 96px; padding: 96px 0; }
.felimo-pdp__inbox-inner { max-width: 1560px; margin: 0 auto; padding: 0 80px; }
.felimo-pdp__inbox-inner--cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.felimo-pdp__inbox-label {
font-family: var(--font-sans); font-size: 11px; font-weight: 700;
letter-spacing: 0.1em; text-transform: uppercase; color: var(--felimo-amber-600);
margin-bottom: 20px;
}
.felimo-pdp__inbox-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.felimo-pdp__inbox-list li {
display: flex; align-items: center; gap: 10px;
font-family: var(--font-sans); font-size: 14px; color: rgba(253, 252, 250, 0.70);
}
.felimo-pdp__inbox-list li svg { flex-shrink: 0; }
.felimo-pdp__models { width: 100%; border-collapse: collapse; border-radius: var(--radius-xl); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08); }
.felimo-pdp__models th, .felimo-pdp__models td {
font-family: var(--font-sans); font-size: 14px; text-align: left;
padding: 13px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.felimo-pdp__models thead tr { background: rgba(255, 255, 255, 0.05); }
.felimo-pdp__models thead th { color: rgba(253, 252, 250, 0.5); font-weight: 400; }
.felimo-pdp__models thead th.felimo-pdp__models-current { color: var(--felimo-amber-400); font-weight: 700; }
.felimo-pdp__models tbody th { color: rgba(253, 252, 250, 0.5); font-weight: 500; width: 30%; }
.felimo-pdp__models tbody tr:nth-child(odd) th, .felimo-pdp__models tbody tr:nth-child(odd) td { background: rgba(255, 255, 255, 0.03); }
.felimo-pdp__models tbody td { color: rgba(253, 252, 250, 0.4); }
.felimo-pdp__models tbody td.felimo-pdp__models-current {
color: var(--felimo-white); font-weight: 600;
background: rgba(196, 137, 58, 0.06); border-left: 1px solid rgba(196, 137, 58, 0.2);
}
.felimo-pdp__models tbody tr:nth-child(odd) td.felimo-pdp__models-current { background: rgba(196, 137, 58, 0.10); }
.felimo-pdp__models tbody tr:last-child th, .felimo-pdp__models tbody tr:last-child td { border-bottom: none; }
/* PDP: reviews (alleen echte WC-reviews; DS PDPBottom: bone-band met border-top) */
.felimo-pdp__reviews { background: var(--felimo-bone); border-top: 1px solid var(--border-subtle); padding: 96px 0; }
.felimo-pdp__reviews-inner { max-width: 1560px; margin: 0 auto; padding: 0 80px; }
.felimo-pdp__reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.felimo-pdp__review {
background: var(--surface-1); border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-xs);
}
.felimo-pdp__stars { display: inline-flex; gap: 2px; }
.felimo-pdp__star { width: 13px; height: 13px; fill: var(--felimo-amber-500); }
.felimo-pdp__star--empty { fill: var(--felimo-mist); }
.felimo-pdp__review-stars { line-height: 0; }
.felimo-pdp__review-media { height: 80px; background: var(--felimo-bone); border-radius: var(--radius-md); margin: 12px 0; overflow: hidden; }
.felimo-pdp__review-media img { width: 100%; height: 100%; object-fit: contain; padding: 8px; display: block; }
.felimo-pdp__review-body {
font-family: var(--font-display); font-style: italic; font-size: 15px;
color: var(--text-primary); line-height: 1.5; margin: 0 0 10px;
}
.felimo-pdp__review-author { display: flex; align-items: center; gap: 6px; }
.felimo-pdp__review-name { font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.felimo-pdp__review-verified { font-family: var(--font-sans); font-size: 10px; font-weight: 600; color: var(--color-success); }
.felimo-pdp__review-date { font-family: var(--font-sans); font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }
/* PDP: product-FAQ (hergebruikt .felimo-cat-faq__item accordion-stijl) */
.felimo-pdp__faq { background: var(--bg-base); padding: 96px 0 0; }
.felimo-pdp__faq-inner { max-width: 1560px; margin: 0 auto; padding: 0 80px; }
.felimo-pdp__faq-list { max-width: 760px; }
/* PDP: risico-inkrimping (DS: donkere void-card in lichte sectie) */
.felimo-pdp__risk { background: var(--bg-base); margin-top: 96px; padding-bottom: 72px; }
.felimo-pdp__risk-inner { max-width: 1560px; margin: 0 auto; padding: 0 80px; }
.felimo-pdp__risk-card {
background: var(--felimo-void); border-radius: 28px; padding: 56px 64px;
display: flex; align-items: center; justify-content: space-between; gap: 48px;
}
.felimo-pdp__risk-copy { display: flex; flex-direction: column; gap: 14px; flex: 1; }
.felimo-pdp__risk-eyebrow {
font-family: var(--font-sans); font-size: 11px; font-weight: 700;
letter-spacing: 0.1em; text-transform: uppercase; color: var(--felimo-amber-600);
}
.felimo-pdp__risk-title {
font-family: var(--font-display); font-weight: 300; font-size: 36px;
letter-spacing: -0.02em; line-height: 1.1; color: var(--felimo-white); margin: 0;
}
.felimo-pdp__risk-body {
font-family: var(--font-sans); font-size: 15px; color: rgba(253, 252, 250, 0.60);
line-height: 1.65; max-width: 520px; margin: 0;
}
.felimo-pdp__risk-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; flex-shrink: 0; }
.felimo-pdp__risk-points li {
display: flex; align-items: center; gap: 10px;
font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--felimo-white);
}
.felimo-pdp__risk-points li svg { flex-shrink: 0; }
@media (max-width: 900px) {
.felimo-pdp__how-inner, .felimo-pdp__compare-inner, .felimo-pdp__inbox-inner,
.felimo-pdp__reviews-inner, .felimo-pdp__faq-inner { padding: 0 20px; }
.felimo-pdp__how { padding: 64px 0; }
.felimo-pdp__how-steps { grid-template-columns: repeat(2, 1fr); }
.felimo-pdp__how-title { font-size: 30px; }
.felimo-pdp__reviews-grid { grid-template-columns: 1fr; }
.felimo-pdp__compare, .felimo-pdp__faq { padding-top: 64px; }
.felimo-pdp__reviews { padding: 64px 0; }
.felimo-pdp__inbox { padding: 64px 0; margin-top: 64px; }
.felimo-pdp__inbox-inner--cols { grid-template-columns: 1fr; gap: 32px; }
}
/* PDP DS-pariteit: about-kop, kenmerken-met-beeld, reviews-summary, belofte-chips, xsell */
.felimo-pdp__about-title {
font-family: var(--font-display); font-weight: 400; font-size: 34px;
letter-spacing: -0.02em; color: var(--text-primary); margin: 0 0 16px;
}
.felimo-pdp__features { background: var(--bg-base); padding: 96px 0 0; }
.felimo-pdp__features-inner {
max-width: 1560px; margin: 0 auto; padding: 0 80px;
display: flex; flex-direction: column; gap: 64px;
}
.felimo-pdp__feature {
display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
}
.felimo-pdp__feature-media {
border-radius: var(--radius-xl); overflow: hidden; background: var(--felimo-bone);
aspect-ratio: 4 / 3;
}
.felimo-pdp__feature-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.felimo-pdp__feature--flip .felimo-pdp__feature-media { order: 2; }
.felimo-pdp__feature-body h3 {
font-family: var(--font-display); font-weight: 400; font-size: 28px;
letter-spacing: -0.01em; color: var(--text-primary); margin: 0 0 12px;
}
.felimo-pdp__feature-body p {
font-family: var(--font-sans); font-size: 15px; color: var(--text-secondary);
line-height: 1.75; margin: 0; max-width: 460px;
}
.felimo-pdp__reviews-layout { display: grid; grid-template-columns: 280px 1fr; gap: 48px; align-items: start; }
.felimo-pdp__reviews-summary { position: sticky; top: 88px; }
.felimo-pdp__reviews-score-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.felimo-pdp__reviews-score { font-family: var(--font-display); font-size: 64px; font-weight: 300; line-height: 1; color: var(--text-primary); }
.felimo-pdp__reviews-score-row .felimo-pdp__star { width: 16px; height: 16px; }
.felimo-pdp__reviews-count { display: block; font-family: var(--font-sans); font-size: 12px; color: var(--text-tertiary); margin-top: 4px; }
.felimo-pdp__reviews-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.felimo-pdp__reviews-bar > span:first-child { font-family: var(--font-sans); font-size: 12px; color: var(--text-tertiary); width: 12px; }
.felimo-pdp__reviews-pct { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); width: 28px; }
.felimo-pdp__reviews-track { flex: 1; height: 6px; border-radius: var(--radius-full); background: var(--felimo-mist); overflow: hidden; }
.felimo-pdp__reviews-track i { display: block; height: 100%; border-radius: var(--radius-full); background: var(--felimo-amber-400); }
.felimo-pdp__reviews-trust {
margin-top: 12px; display: inline-flex; align-items: center;
font-family: var(--font-sans); font-size: 11px; font-weight: 700; color: #fff;
background: #00b67a; border-radius: 4px; padding: 4px 8px;
}
.felimo-pdp__xsell { background: var(--bg-base); padding: 96px 0 0; }
.felimo-pdp__xsell-inner { max-width: 1560px; margin: 0 auto; padding: 0 80px; }
@media (max-width: 900px) {
.felimo-pdp__features-inner, .felimo-pdp__xsell-inner { padding: 0 20px; }
.felimo-pdp__features { padding-top: 64px; }
.felimo-pdp__feature { grid-template-columns: 1fr; gap: 20px; }
.felimo-pdp__feature--flip .felimo-pdp__feature-media { order: 0; }
.felimo-pdp__reviews-layout { grid-template-columns: 1fr; gap: 28px; }
.felimo-pdp__risk-inner { padding: 0 20px; }
.felimo-pdp__risk-card { flex-direction: column; align-items: flex-start; padding: 36px 28px; gap: 28px; }
.felimo-pdp__risk-title { font-size: 28px; }
.felimo-pdp__reviews-summary { position: static; }
}