/*
Theme Name: Tartelier Child
Theme URI: https://tartelier.be
Description: Child theme van Hello Elementor voor Tartelier — artisan bakery in Deinze.
Author: Tartelier
Author URI: https://tartelier.be
Template: hello-elementor
Version: 3.3.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tartelier-child
Tags: elementor, artisan, bakery
*/
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');
/* =========================================================
WORDPRESS & ELEMENTOR — GLOBALE RESETS
========================================================= */
/* 1. Overschrijf WordPress 800px content-size */
:root {
--wp--style--global--content-size: 100%;
--wp--style--global--wide-size: 100%;
}
/* 2. Verwijder alle WordPress layout beperkingen */
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
max-width: 100% !important;
}
.is-layout-constrained,
.is-layout-flow,
.is-layout-flex,
.is-layout-grid,
.wp-block,
.wp-site-blocks {
max-width: 100% !important;
}
/* 3. Elementor e-con (nieuw containersysteem) — reset gap en breedte */
.e-con {
--grid-auto-flow: initial;
}
/* Top-level section containers — full-width achtergrond, maar inner padding behouden */
.e-con.e-parent {
--container-max-width: 100% !important;
max-width: 100% !important;
width: 100% !important;
margin-inline: 0 !important;
}
/* Nested containers — laat Elementor de breedte bepalen (boxed layout) */
/* Elementor page wrapper */
.elementor.elementor-page,
.elementor-inner,
[data-elementor-type="wp-page"] {
max-width: 100% !important;
width: 100% !important;
}
/* 4. Reset de automatische 24px gap van WordPress flex-layout */
:root :where(.is-layout-flex) { gap: 0 !important; }
:root :where(.is-layout-grid) { gap: 0 !important; }
/* 5. Elementor widget spacing reset */
.elementor-widget:not(:last-child) {
margin-bottom: 0;
}
/* 6. Body en page wrappers */
body, #page, .site, #content, .site-content,
.site-main, .page-content, .entry-content {
max-width: 100% !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
/* =========================================================
DESIGN TOKENS
========================================================= */
:root {
/* ── Static fallbacks (used when outside .elementor-kit-5) ── */
--color-primary: #B65A39;
--color-secondary: #879E7E;
--color-tertiary: #312317;
--color-foreground: #2B2B2B;
/* Derived / static tokens */
--color-primary-dark: hsl(15, 52%, 38%);
--color-primary-light:hsl(15, 52%, 92%);
--color-sage: hsl(105, 11%, 57%);
--color-cream: hsl(33, 38%, 89%);
--color-background: hsl(30, 33%, 97%);
--color-background-rgb: 250, 247, 242; /* for rgba() backdrop fallbacks */
--color-muted: hsl(0, 0%, 45%);
--color-card: hsl(0, 0%, 100%);
--color-border: hsl(33, 20%, 88%);
--color-charcoal: hsl(0, 0%, 17%);
--color-offwhite: hsl(30, 33%, 97%);
--color-sidebar: hsl(35, 35%, 50%);
--color-surface: rgb(250, 247, 245);
--color-label: rgba(44, 34, 22, 0.5); /* label text — brunch + contact */
--color-input-border: rgba(52, 36, 25, 0.15); /* default input border */
--color-input-focus: rgba(52, 36, 25, 0.85); /* focus border */
/* Typography */
--font-serif: "Cormorant Garamond", Georgia, serif;
--font-body: "DM Sans", system-ui, sans-serif;
/* Spacing */
--section-py: 80px;
--container-max: 1200px;
--container-px: 24px;
}
/* ── Elementor global colour bridge ─────────────────────────
Elementor scopes its --e-global-color-* vars to
.elementor-kit-5 (on ). We re-map our tokens here
so a single Elementor Global Colour change propagates
everywhere in the theme automatically.
─────────────────────────────────────────────────────────── */
.elementor-kit-5 {
--color-primary: var(--e-global-color-primary, #B65A39);
--color-secondary: var(--e-global-color-secondary, #879E7E);
--color-foreground: var(--e-global-color-text, #2B2B2B);
/* Tertiary = custom dark brown (#312317) in Elementor */
--color-tertiary: var(--e-global-color-f64f69f, #312317);
}
/* =========================================================
BASE RESET & BODY
========================================================= */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-body);
background-color: var(--color-background);
color: var(--color-foreground);
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-serif);
font-weight: 300;
}
a {
color: inherit;
text-decoration: none;
}
img {
max-width: 100%;
height: auto;
display: block;
}
/* =========================================================
UTILITY CLASSES
========================================================= */
.tartelier-container {
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-px);
}
.tartelier-label {
font-family: var(--font-body);
font-size: 11px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--color-primary);
display: block;
}
.tartelier-label--muted {
color: var(--color-muted);
}
/* =========================================================
BUTTONS
========================================================= */
.tartelier-btn,
.tartelier-btn--primary .elementor-button,
.tartelier-btn--secondary .elementor-button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
font-family: var(--font-body) !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: 0.25em !important;
text-transform: uppercase !important;
border: 1.5px solid transparent !important;
border-radius: 8px !important;
cursor: pointer !important;
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
text-decoration: none !important;
padding: 14px 36px !important;
line-height: 1 !important;
white-space: nowrap !important;
box-shadow: none !important;
}
/* ── Primary — terracotta, pill, hover: primary border + tekst */
.tartelier-btn--primary,
.tartelier-btn--primary .elementor-button {
background-color: var(--color-primary) !important;
color: #fff !important;
border-color: transparent !important;
border-radius: 100px !important;
}
.tartelier-btn--primary:hover,
.tartelier-btn--primary .elementor-button:hover {
background-color: transparent !important;
color: var(--color-primary) !important;
border-color: var(--color-primary) !important;
}
/* ── Secondary — donker, pill, hover: donker border + tekst */
.tartelier-btn--secondary,
.tartelier-btn--secondary .elementor-button {
background-color: #2b2b2b !important;
color: #fff !important;
border-color: transparent !important;
border-radius: 100px !important;
}
.tartelier-btn--secondary:hover,
.tartelier-btn--secondary .elementor-button:hover {
background-color: transparent !important;
color: #2b2b2b !important;
border-color: #2b2b2b !important;
}
/* ── Tertiary — wit, pill, hover: witte achtergrond + donkere tekst */
.tartelier-btn--tertiary,
.tartelier-btn--tertiary .elementor-button {
background-color: transparent !important;
color: #fff !important;
border-color: #fff !important;
border-radius: 100px !important;
}
.tartelier-btn--tertiary:hover,
.tartelier-btn--tertiary .elementor-button:hover {
background-color: #fff !important;
color: #2b2b2b !important;
border-color: #fff !important;
}
.tartelier-btn--outline {
background-color: transparent;
border-color: rgba(0, 0, 0, 0.3);
color: var(--color-foreground);
border-radius: 0;
}
.tartelier-btn--outline:hover {
background-color: var(--color-foreground);
color: var(--color-offwhite);
}
.tartelier-btn--sage {
background-color: var(--color-sage);
color: #fff;
border-color: var(--color-sage);
border-radius: 4px;
}
.tartelier-btn--sage:hover {
transform: scale(1.04);
box-shadow: 0 8px 24px hsla(105, 11%, 57%, 0.35);
}
/* =========================================================
NAVBAR
========================================================= */
.tartelier-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
transition: margin 0.3s ease, border-radius 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
/* Default: pill, transparant — andere pagina's dan home */
margin: 16px 24px 0;
border-radius: 100px;
background-color: transparent;
box-shadow: none;
}
/* Home pagina: altijd wit (ook mobiel, ook zonder scroll) */
.tartelier-nav--home {
background-color: #fff;
box-shadow: none;
}
/* Winkel / product / checkout — subtiele pill (zichtbaar op witte pagina) */
.tartelier-nav--light {
background-color: var(--color-surface);
box-shadow: none;
}
/* Bij scrollen op ALLE pagina's: wit + geen pill */
.tartelier-nav--scrolled {
margin: 0;
border-radius: 0;
background-color: #fff;
box-shadow: 0 1px 8px rgba(0,0,0,0.08);
}
/* Als mobiel menu open is → afgeronde rechthoek + wit */
.tartelier-nav:has(.tartelier-nav__mobile.is-open) {
border-radius: 16px;
margin: 8px 16px 0;
background-color: #fff;
box-shadow: 0 4px 20px rgba(0,0,0,0.10);
}
/* Bij scroll + menu open: geen pill */
.tartelier-nav--scrolled:has(.tartelier-nav__mobile.is-open) {
border-radius: 0;
margin: 0;
}
.tartelier-nav__inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 28px;
transition: padding 0.3s ease;
}
/* Desktop: 3-kolom grid → links exact gecentreerd */
@media (min-width: 1024px) {
.tartelier-nav__inner {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
}
}
.tartelier-nav--scrolled .tartelier-nav__inner {
padding: 12px 24px;
}
.tartelier-nav__logo {
text-decoration: none;
flex-shrink: 0;
display: flex;
align-items: center;
}
.tartelier-nav__logo-img {
display: block !important;
height: 34px !important;
width: auto !important;
max-width: 130px !important;
max-height: 34px !important;
object-fit: contain !important;
}
@media (max-width: 767px) {
.tartelier-nav__logo-img {
height: 28px !important;
max-height: 28px !important;
max-width: 110px !important;
}
}
/* Desktop links — gecentreerd via grid kolom 2 */
.tartelier-nav__links {
display: none;
align-items: center;
gap: 24px;
list-style: none;
margin: 0;
padding: 0;
font-family: var(--font-body);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
}
.tartelier-nav__links a {
color: var(--color-muted);
transition: color 0.2s;
text-decoration: none;
}
.tartelier-nav__links a:hover,
.tartelier-nav__links a.active {
color: var(--color-primary);
}
/* Actions (cart + hamburger) */
.tartelier-nav__actions {
display: flex;
align-items: center;
gap: 12px;
margin-left: auto; /* mobiel: rechts uitlijnen */
}
@media (min-width: 1024px) {
.tartelier-nav__actions {
margin-left: 0;
justify-self: end; /* grid kolom 3 — rechts uitlijnen */
}
}
.tartelier-nav__cart,
.tartelier-nav__account {
position: relative;
color: var(--color-foreground);
cursor: pointer;
transition: color 0.2s;
background: none;
border: none;
padding: 4px;
line-height: 1;
text-decoration: none;
display: inline-flex;
align-items: center;
}
.tartelier-nav__cart:hover,
.tartelier-nav__account:hover,
.tartelier-nav__account.is-active {
color: var(--color-primary);
}
.tartelier-nav__cart-count {
position: absolute;
top: -6px;
right: -6px;
min-width: 16px;
height: 16px;
padding: 0 3px;
background-color: var(--color-primary);
color: #fff;
font-size: 10px;
border-radius: 8px;
display: none;
align-items: center;
justify-content: center;
font-family: var(--font-body);
font-weight: 600;
line-height: 1;
}
.tartelier-nav__cart-count.is-visible {
display: flex;
}
/* Hamburger — puur klikbaar icoon (span, geen button) */
.tartelier-nav__hamburger {
cursor: pointer;
color: var(--color-primary);
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
user-select: none;
}
.tartelier-nav__hamburger:hover {
color: var(--color-primary-dark);
}
/* Mobile menu */
.tartelier-nav__mobile {
display: none;
border-top: 1px solid var(--color-border);
list-style: none;
margin: 0;
padding: 0;
}
.tartelier-nav__mobile.is-open {
display: block;
}
.tartelier-nav__mobile li {
border-bottom: 1px solid var(--color-border);
}
.tartelier-nav__mobile li:last-child {
border-bottom: none;
}
.tartelier-nav__mobile a {
display: block;
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-foreground);
text-decoration: none;
padding: 16px 28px;
transition: color 0.2s;
}
.tartelier-nav__mobile a:hover,
.tartelier-nav__mobile a.active {
color: var(--color-primary);
}
@media (min-width: 1024px) {
.tartelier-nav__links {
display: flex;
}
.tartelier-nav__hamburger {
display: none;
}
}
/* =========================================================
HERO SECTION
========================================================= */
.tartelier-hero {
position: relative;
width: 100%;
height: 100vh;
min-height: 600px;
overflow: hidden;
}
.tartelier-hero__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transform: scaleX(-1); /* flipped horizontally like the original */
}
.tartelier-hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to right, rgba(252,250,248,0.15) 0%, transparent 60%);
}
.tartelier-hero__content {
position: relative;
z-index: 10;
height: 100%;
display: flex;
align-items: center;
padding-inline: var(--container-px);
max-width: var(--container-max);
margin-inline: auto;
}
.tartelier-hero__text {
display: flex;
flex-direction: column;
align-items: flex-start;
max-width: 420px;
margin-left: 32px;
}
.tartelier-hero__tagline {
font-family: var(--font-body);
font-size: 11px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: rgba(44,44,44,0.5);
margin-bottom: 24px;
animation: fadeSlideUp 0.8s ease-out 0.2s both;
}
.tartelier-hero__title {
font-family: var(--font-serif);
font-size: clamp(44px, 6vw, 72px);
font-weight: 300;
line-height: 1.1;
color: var(--color-foreground);
margin: 0 0 16px;
animation: fadeSlideUp 0.8s ease-out 0.4s both;
}
.tartelier-hero__subtitle {
font-family: var(--font-body);
font-size: 15px;
line-height: 1.6;
letter-spacing: 0.04em;
color: var(--color-muted);
margin: 0 0 40px;
animation: fadeSlideUp 0.8s ease-out 0.6s both;
}
.tartelier-hero__cta {
animation: fadeSlideUp 0.8s ease-out 0.8s both;
}
.tartelier-hero__scroll {
position: absolute;
bottom: 64px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
animation: bounce 2s infinite;
color: var(--color-muted);
}
.tartelier-hero__scroll svg {
width: 20px;
height: 20px;
}
/* =========================================================
BOOK TABLE (reservation bar)
========================================================= */
.tartelier-booktable {
position: relative;
z-index: 20;
margin-top: -44px;
}
.tartelier-booktable__inner {
max-width: 980px;
margin-inline: auto;
padding-inline: var(--container-px);
}
.tartelier-booktable__card {
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
background-color: rgba(255,255,255,0.92);
border-radius: 16px;
box-shadow: 0 20px 60px rgba(0,0,0,0.15);
border: 1px solid rgba(255,255,255,0.4);
padding: 28px 32px 24px;
}
/* Titel boven het formulier */
.tartelier-booktable__title {
font-family: var(--font-serif);
font-size: 24px;
font-weight: 300;
color: var(--color-foreground);
margin: 0 0 20px;
letter-spacing: 0.01em;
}
.tartelier-booktable__grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
align-items: end;
}
.tartelier-booktable__field label {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-body);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-muted);
margin-bottom: 8px;
}
.tartelier-booktable__field label svg {
width: 16px;
height: 16px;
}
.tartelier-booktable__input {
width: 100%;
padding: 10px 12px;
border-radius: 8px;
border: 1px solid var(--color-border);
background: #fff;
color: var(--color-foreground);
font-family: var(--font-body);
font-size: 13px;
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
-webkit-appearance: none;
appearance: none;
box-sizing: border-box;
}
.tartelier-booktable__input:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(180,90,57,0.08);
outline: none;
}
/* Submit knop — kleiner + consistent met andere buttons */
.tartelier-booktable__form .tartelier-btn {
padding: 10px 20px !important;
font-size: 12px !important;
border-radius: 8px !important;
white-space: nowrap;
align-self: flex-end;
}
/* Feedback message */
.tartelier-booktable__msg {
margin-top: 12px;
font-size: 14px;
text-align: center;
font-family: var(--font-body);
}
.tartelier-booktable__msg--success { color: var(--color-muted); }
.tartelier-booktable__msg--error { color: var(--color-primary); }
@media (min-width: 640px) {
.tartelier-booktable__grid {
grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 1024px) {
.tartelier-booktable__grid {
grid-template-columns: repeat(5, 1fr) auto;
}
}
/* =========================================================
HOW IT WORKS
========================================================= */
.tartelier-how {
padding-block: var(--section-py);
background-color: var(--color-card);
}
.tartelier-how__header {
text-align: center;
margin-bottom: 64px;
max-width: 780px;
margin-inline: auto;
}
.tartelier-how__header h2 {
font-family: var(--font-serif);
font-size: clamp(28px, 4vw, 48px);
font-weight: 300;
line-height: 1.2;
color: var(--color-foreground);
margin: 16px 0 0;
}
.tartelier-how__items {
display: flex;
flex-direction: column;
gap: 64px;
max-width: 980px;
margin-inline: auto;
padding-inline: var(--container-px);
}
.tartelier-how__item {
display: grid;
grid-template-columns: 1fr;
gap: 40px;
align-items: center;
}
.tartelier-how__item-img {
display: flex;
justify-content: center;
}
.tartelier-how__item-img img {
max-width: 420px;
width: 100%;
object-fit: contain;
filter: drop-shadow(0 20px 40px rgba(0,0,0,0.12));
}
.tartelier-how__item-number {
font-family: var(--font-serif);
font-size: 80px;
font-weight: 300;
line-height: 1;
color: rgba(188, 101, 69, 0.08);
user-select: none;
display: block;
margin-bottom: 16px;
}
.tartelier-how__item-icon {
width: 48px;
height: 48px;
border-radius: 12px;
background-color: hsla(15, 52%, 47%, 0.1);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
color: var(--color-primary);
}
.tartelier-how__item-icon svg {
width: 20px;
height: 20px;
}
.tartelier-how__item h3 {
font-family: var(--font-serif);
font-size: clamp(22px, 2.5vw, 30px);
font-weight: 300;
line-height: 1.3;
color: var(--color-foreground);
margin: 0 0 16px;
}
.tartelier-how__item p {
font-family: var(--font-body);
font-size: 14px;
line-height: 1.7;
color: var(--color-muted);
max-width: 420px;
margin: 0;
}
@media (min-width: 1024px) {
.tartelier-how__item {
grid-template-columns: 1fr 1fr;
gap: 64px;
}
/* Even items: image left, odd items: image right */
.tartelier-how__item:nth-child(even) .tartelier-how__item-img {
order: 2;
}
.tartelier-how__item:nth-child(even) .tartelier-how__item-content {
order: 1;
}
}
/* =========================================================
FEATURED PRODUCTS
========================================================= */
.tartelier-products {
padding-block: var(--section-py);
}
.tartelier-products__header {
text-align: center;
margin-bottom: 56px;
}
.tartelier-products__header h2 {
font-family: var(--font-serif);
font-size: clamp(26px, 3.5vw, 40px);
font-weight: 300;
color: var(--color-foreground);
margin: 12px 0 0;
}
.tartelier-products__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
max-width: 980px;
margin-inline: auto;
padding-inline: var(--container-px);
}
.tartelier-product-card {
text-align: center;
cursor: pointer;
}
.tartelier-product-card__image {
position: relative;
width: 100%;
aspect-ratio: 1;
overflow: hidden;
border-radius: 60% 40% 55% 45% / 55% 50% 50% 45%;
margin-bottom: 16px;
}
.tartelier-product-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.7s ease;
}
.tartelier-product-card:hover .tartelier-product-card__image img {
transform: scale(1.1);
}
.tartelier-product-card h3 {
font-family: var(--font-serif);
font-size: clamp(17px, 2vw, 20px);
font-weight: 300;
line-height: 1.3;
color: var(--color-foreground);
margin: 0 0 4px;
}
.tartelier-product-card__price {
font-family: var(--font-body);
font-size: 14px;
color: var(--color-primary);
font-weight: 500;
}
@media (min-width: 1024px) {
.tartelier-products__grid {
grid-template-columns: repeat(4, 1fr);
gap: 32px;
}
}
/* =========================================================
BRUNCH BLOCK
========================================================= */
.tartelier-brunch {
padding-block: var(--section-py);
background-color: hsla(33, 38%, 89%, 0.3);
}
.tartelier-brunch__grid {
display: grid;
grid-template-columns: 1fr;
gap: 48px;
align-items: center;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-px);
}
.tartelier-brunch__image-wrap {
position: relative;
}
.tartelier-brunch__image {
overflow: hidden;
border-radius: 60% 40% 50% 50% / 50% 60% 40% 50%;
}
.tartelier-brunch__image img {
width: 100%;
height: 400px;
object-fit: cover;
transition: transform 0.7s ease;
}
.tartelier-brunch__image:hover img {
transform: scale(1.05);
}
.tartelier-brunch__blob-1 {
position: absolute;
top: -24px;
left: -24px;
width: 128px;
height: 128px;
border-radius: 50%;
background-color: hsla(15, 52%, 47%, 0.08);
filter: blur(24px);
z-index: -1;
}
.tartelier-brunch__blob-2 {
position: absolute;
bottom: -24px;
right: -24px;
width: 160px;
height: 160px;
border-radius: 50%;
background-color: hsla(105, 11%, 57%, 0.08);
filter: blur(24px);
z-index: -1;
}
.tartelier-brunch__content {
text-align: center;
}
.tartelier-brunch__content h2 {
font-family: var(--font-serif);
font-size: clamp(28px, 3.5vw, 40px);
font-weight: 300;
color: var(--color-foreground);
margin: 12px 0 24px;
}
.tartelier-brunch__content p {
font-family: var(--font-body);
font-size: 14px;
line-height: 1.7;
color: var(--color-muted);
margin: 0 0 16px;
}
.tartelier-brunch__price-card {
display: inline-block;
background-color: var(--color-card);
border-radius: 12px;
padding: 20px;
margin-bottom: 32px;
border: 1px solid var(--color-border);
}
.tartelier-brunch__price {
font-family: var(--font-serif);
font-size: 28px;
color: var(--color-primary);
font-weight: 300;
display: block;
margin-bottom: 4px;
}
.tartelier-brunch__price-note {
font-family: var(--font-body);
font-size: 11px;
color: var(--color-muted);
letter-spacing: 0.05em;
}
.tartelier-brunch__note {
font-family: var(--font-body);
font-size: 14px;
color: var(--color-muted);
font-style: italic;
margin-bottom: 24px !important;
}
@media (min-width: 1024px) {
.tartelier-brunch__grid {
grid-template-columns: 1fr 1fr;
}
.tartelier-brunch__image img {
height: 500px;
}
.tartelier-brunch__content {
text-align: left;
}
}
/* Brunch Elementor section — constrain title column so prices/button stay visible */
.brunch-content > .e-con:first-child {
width: 40% !important;
max-width: 40% !important;
flex-shrink: 1 !important;
box-sizing: border-box;
}
/* =========================================================
GIFT VOUCHER
========================================================= */
.tartelier-gift {
padding-block: var(--section-py);
}
.tartelier-gift__inner {
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-px);
}
.tartelier-gift__card {
border-radius: 24px;
overflow: hidden;
display: grid;
grid-template-columns: 1fr;
min-height: 400px;
}
.tartelier-gift__visual {
background-color: hsla(15, 52%, 47%, 0.1);
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 64px 32px;
}
.tartelier-gift__deco-ring-1 {
position: absolute;
top: 32px;
left: 32px;
width: 96px;
height: 96px;
border-radius: 50%;
border: 2px solid hsla(15, 52%, 47%, 0.2);
}
.tartelier-gift__deco-blob {
position: absolute;
bottom: 48px;
right: 48px;
width: 64px;
height: 64px;
border-radius: 50%;
background-color: hsla(15, 52%, 47%, 0.1);
}
.tartelier-gift__deco-ring-2 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 192px;
height: 192px;
border-radius: 50%;
border: 1px solid hsla(15, 52%, 47%, 0.1);
}
.tartelier-gift__icon-wrap {
position: relative;
z-index: 10;
text-align: center;
}
.tartelier-gift__icon {
width: 80px;
height: 80px;
border-radius: 50%;
background-color: hsla(15, 52%, 47%, 0.15);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 24px;
color: var(--color-primary);
}
.tartelier-gift__icon svg {
width: 36px;
height: 36px;
}
.tartelier-gift__visual-text-1 {
font-family: var(--font-serif);
font-size: clamp(52px, 6vw, 72px);
font-weight: 300;
color: hsla(15, 52%, 47%, 0.8);
line-height: 1;
margin: 0;
}
.tartelier-gift__visual-text-2 {
font-family: var(--font-serif);
font-size: clamp(36px, 4vw, 52px);
font-weight: 300;
color: hsla(15, 52%, 47%, 0.5);
margin: 4px 0 0;
}
.tartelier-gift__content {
background-color: var(--color-card);
display: flex;
flex-direction: column;
justify-content: center;
padding: 48px 40px;
border: 1px solid var(--color-border);
border-radius: 0 24px 24px 0;
}
.tartelier-gift__content h2 {
font-family: var(--font-serif);
font-size: clamp(26px, 3vw, 38px);
font-weight: 300;
line-height: 1.3;
color: var(--color-foreground);
margin: 16px 0;
}
.tartelier-gift__content h2 span {
color: var(--color-primary);
}
.tartelier-gift__content p {
font-family: var(--font-body);
font-size: 13px;
line-height: 1.7;
color: var(--color-muted);
margin: 0 0 16px;
}
.tartelier-gift__meta {
font-family: var(--font-body);
font-size: 11px;
color: var(--color-muted);
margin-bottom: 32px !important;
}
@media (min-width: 1024px) {
.tartelier-gift__card {
grid-template-columns: 1fr 1fr;
}
.tartelier-gift__content {
padding: 64px;
}
}
/* =========================================================
NEWSLETTER
========================================================= */
.tartelier-newsletter {
padding-block: var(--section-py);
position: relative;
overflow: hidden;
}
.tartelier-newsletter::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, hsla(15, 52%, 47%, 0.05) 0%, transparent 50%, hsla(33, 38%, 89%, 0.2) 100%);
pointer-events: none;
}
.tartelier-newsletter__inner {
max-width: 640px;
margin-inline: auto;
padding-inline: var(--container-px);
text-align: center;
position: relative;
z-index: 10;
}
.tartelier-newsletter__icon {
width: 56px;
height: 56px;
border-radius: 50%;
background-color: hsla(15, 52%, 47%, 0.1);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 24px;
color: var(--color-primary);
}
.tartelier-newsletter__icon svg {
width: 24px;
height: 24px;
}
.tartelier-newsletter__inner h2 {
font-family: var(--font-serif);
font-size: clamp(26px, 3.5vw, 40px);
font-weight: 300;
color: var(--color-foreground);
margin: 0 0 12px;
}
.tartelier-newsletter__inner p {
font-family: var(--font-body);
font-size: 14px;
line-height: 1.7;
color: var(--color-muted);
max-width: 400px;
margin: 0 auto 40px;
}
/* ── MC4WP (Mailchimp for WordPress) — newsletter form ───── */
/* Form wrapper reset */
#mc4wp-form-1,
.mc4wp-form {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
}
/* Flex rij: velden naast elkaar */
#mc4wp-form-1 .mc4wp-form-fields,
.mc4wp-form .mc4wp-form-fields {
display: flex !important;
flex-direction: row !important;
align-items: stretch !important;
gap: 10px !important;
max-width: 520px !important;
margin: 0 auto !important;
padding: 0 !important;
background: transparent !important;
}
/* wrappers — als flex items, geen eigen marges */
#mc4wp-form-1 .mc4wp-form-fields p,
.mc4wp-form .mc4wp-form-fields p {
margin: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: stretch !important;
}
/* Input
: neemt alle ruimte */
#mc4wp-form-1 .mc4wp-form-fields p:first-child,
.mc4wp-form .mc4wp-form-fields p:first-child {
flex: 1 1 0 !important;
min-width: 0 !important;
}
/* Knop
: krimpt naar inhoud */
#mc4wp-form-1 .mc4wp-form-fields p:last-child,
.mc4wp-form .mc4wp-form-fields p:last-child {
flex: 0 0 auto !important;
}
/* ── E-mail input ────────────────────────────────────────── */
#mc4wp-form-1 input[type="email"],
.mc4wp-form input[type="email"] {
width: 100% !important;
padding: 10px 12px 10px 38px !important;
border-radius: 8px !important;
border: 1px solid var(--color-border, #e0d8ce) !important;
background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E") no-repeat 12px center !important;
color: var(--color-foreground, #2c2c2c) !important;
font-family: var(--font-body, 'DM Sans', sans-serif) !important;
font-size: 13px !important;
outline: none !important;
box-shadow: none !important;
-webkit-appearance: none !important;
appearance: none !important;
box-sizing: border-box !important;
min-height: 40px !important;
height: auto !important;
margin: 0 !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
#mc4wp-form-1 input[type="email"]:focus,
.mc4wp-form input[type="email"]:focus {
border-color: var(--color-primary, #c0703a) !important;
box-shadow: 0 0 0 3px rgba(180, 90, 57, 0.08) !important;
outline: none !important;
}
#mc4wp-form-1 input[type="email"]::placeholder,
.mc4wp-form input[type="email"]::placeholder {
color: var(--color-muted, #aaa) !important;
opacity: 0.7;
}
/* ── Submit knop ─────────────────────────────────────────── */
#mc4wp-form-1 input[type="submit"],
.mc4wp-form input[type="submit"] {
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 10px 20px !important;
background-color: var(--color-primary, #c0703a) !important;
background-image: none !important;
color: #fff !important;
border: 1.5px solid var(--color-primary, #c0703a) !important;
border-radius: 8px !important;
font-family: var(--font-body, 'DM Sans', sans-serif) !important;
font-size: 12px !important;
letter-spacing: 0.25em !important;
text-transform: uppercase !important;
cursor: pointer !important;
white-space: nowrap !important;
box-shadow: none !important;
min-height: 40px !important;
height: auto !important;
margin: 0 !important;
width: auto !important;
transition: background-color 0.3s ease, color 0.3s ease !important;
}
#mc4wp-form-1 input[type="submit"]:hover,
.mc4wp-form input[type="submit"]:hover {
background-color: transparent !important;
color: var(--color-primary, #c0703a) !important;
}
/* ── Foutmelding / bevestiging ───────────────────────────── */
.mc4wp-alert,
.mc4wp-error,
.mc4wp-success,
.mc4wp-notice {
font-family: var(--font-body) !important;
font-size: 13px !important;
margin-top: 12px !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
}
.mc4wp-success { color: #166534 !important; }
.mc4wp-error { color: var(--color-primary, #c0703a) !important; }
/* ── Disclaimer ──────────────────────────────────────────── */
.tartelier-newsletter__disclaimer {
font-family: var(--font-body);
font-size: 11px;
color: rgba(68,68,68,0.5);
margin-top: 16px;
}
/* ── Mobiel: gestapeld ───────────────────────────────────── */
@media (max-width: 600px) {
#mc4wp-form-1 .mc4wp-form-fields,
.mc4wp-form .mc4wp-form-fields {
flex-direction: column !important;
}
#mc4wp-form-1 .mc4wp-form-fields p,
.mc4wp-form .mc4wp-form-fields p {
flex: 1 1 100% !important;
width: 100% !important;
}
#mc4wp-form-1 input[type="submit"],
.mc4wp-form input[type="submit"] {
width: 100% !important;
}
}
/* =========================================================
KLAVIYO FORM — strip margins, match site styleguide
========================================================= */
/* Verwijder alle wrapper padding/margin van het Klaviyo iframe/div */
.klaviyo-form-embed,
[data-testid="klaviyo-form"],
.klaviyo_form_wrapper,
#klaviyo-form-embed,
.kl-private-reset-css-Xuajs1 {
margin: 0 !important;
padding: 0 !important;
}
/* Formulier zelf — generiek + specifieke embed ID */
.klaviyo-form,
.klaviyo-form-TCfwSu {
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* Interne rijen/wrappers van Klaviyo — verwijder extra spacing */
.klaviyo-form > div,
.klaviyo-form-TCfwSu > div,
.klaviyo-form [data-testid],
.klaviyo-form-TCfwSu [data-testid],
.klaviyo-form .go3958508488,
.klaviyo-form-TCfwSu .go3958508488 {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* Ruimte tussen de rijen (input → knop) */
.klaviyo-form-TCfwSu > div + div,
.klaviyo-form > div + div {
margin-top: 10px !important;
}
/* Inputs */
.klaviyo-form input[type="email"],
.klaviyo-form input[type="text"],
.klaviyo-form input[type="tel"],
.klaviyo-form-TCfwSu input[type="email"],
.klaviyo-form-TCfwSu input[type="text"] {
width: 100% !important;
padding: 10px 12px !important;
border: 1px solid var(--color-border) !important;
border-radius: 8px !important;
background: #fff !important;
color: var(--color-foreground) !important;
font-family: var(--font-body) !important;
font-size: 13px !important;
outline: none !important;
box-shadow: none !important;
transition: border-color 0.2s ease !important;
-webkit-appearance: none !important;
appearance: none !important;
box-sizing: border-box !important;
}
.klaviyo-form input:focus {
border-color: var(--color-primary) !important;
box-shadow: 0 0 0 3px rgba(180, 90, 57, 0.08) !important;
}
/* Submit button — .tartelier-btn--primary stijl */
.klaviyo-form button[type="submit"],
.klaviyo-form-TCfwSu button[type="submit"],
.klaviyo-form [data-testid="klaviyo-form-submit"] {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 14px 28px !important;
background-color: var(--color-primary) !important;
color: #fff !important;
border: 1.5px solid transparent !important;
border-radius: 100px !important;
font-family: var(--font-body) !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: 0.25em !important;
text-transform: uppercase !important;
line-height: 1 !important;
cursor: pointer !important;
white-space: nowrap !important;
background-image: none !important;
box-shadow: none !important;
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}
.klaviyo-form button[type="submit"]:hover,
.klaviyo-form-TCfwSu button[type="submit"]:hover,
.klaviyo-form [data-testid="klaviyo-form-submit"]:hover {
background-color: transparent !important;
color: var(--color-primary) !important;
border-color: var(--color-primary) !important;
}
@media (min-width: 640px) {
.tartelier-newsletter__form {
flex-direction: row;
}
}
/* ── Newsletter: knop onder input op mobiel ──────────────── */
@media (max-width: 639px) {
.mc4wp-form .tartelier-newsletter,
#mc4wp-form-1 .tartelier-newsletter {
flex-direction: column !important;
align-items: stretch !important;
}
.mc4wp-form .tartelier-newsletter input[type="email"],
#mc4wp-form-1 .tartelier-newsletter input[type="email"] {
width: 100% !important;
}
.mc4wp-form .tartelier-newsletter input[type="submit"],
#mc4wp-form-1 .tartelier-newsletter input[type="submit"] {
width: 100% !important;
}
#mc4wp-form-1 .mc4wp-form-fields,
.mc4wp-form .mc4wp-form-fields {
flex-direction: column !important;
align-items: stretch !important;
}
#mc4wp-form-1 .mc4wp-form-fields p,
.mc4wp-form .mc4wp-form-fields p {
width: 100% !important;
}
}
/* =========================================================
404 PAGINA
========================================================= */
/* Standalone 404 — geen nav/footer, body reset */
.tartelier-404-page {
margin: 0 !important;
padding: 0 !important;
background-color: var(--color-background, hsl(33, 30%, 95%)) !important;
}
.tartelier-404 {
min-height: 100vh;
background-color: var(--color-background, hsl(33, 30%, 95%));
display: flex;
align-items: center;
justify-content: center;
padding: 60px 24px;
}
.tartelier-404__inner {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
max-width: 560px;
width: 100%;
}
.tartelier-404__image-wrap {
margin-bottom: 16px;
}
.tartelier-404__image {
width: 360px;
height: 360px;
object-fit: contain;
display: block;
filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.08));
}
@media (max-width: 480px) {
.tartelier-404__image {
width: 260px;
height: 260px;
}
}
.tartelier-404__number {
font-family: var(--font-serif);
font-size: clamp(80px, 15vw, 120px);
font-weight: 300;
line-height: 1;
color: var(--color-foreground);
margin: 0 0 20px;
letter-spacing: -0.02em;
}
.tartelier-404__title {
font-family: var(--font-body);
font-size: 18px;
font-weight: 500;
color: var(--color-foreground);
margin: 0 0 10px;
line-height: 1.4;
}
.tartelier-404__sub {
font-family: var(--font-body);
font-size: 14px;
color: var(--color-muted);
margin: 0 0 40px;
line-height: 1.6;
}
.tartelier-404__btn {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: var(--color-charcoal, #2c2c2c);
color: #fff;
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.03em;
text-decoration: none;
padding: 16px 40px;
border-radius: 100px;
transition: background-color 0.2s ease, transform 0.15s ease;
}
.tartelier-404__btn:hover {
background-color: var(--color-foreground);
transform: translateY(-1px);
}
/* =========================================================
FOOTER
========================================================= */
.tartelier-footer {
position: relative;
background-color: var(--color-tertiary);
color: rgba(252,250,248,0.8);
padding-top: 64px;
padding-bottom: 32px;
margin-top: 80px;
}
.tartelier-footer__wave path {
fill: var(--color-tertiary);
}
.tartelier-footer__wave {
position: absolute;
top: 0;
left: 0;
right: 0;
transform: translateY(calc(-100% + 1px));
line-height: 0;
}
.tartelier-footer__wave svg {
width: 100%;
height: 64px;
display: block;
}
.tartelier-footer__grid {
display: grid;
grid-template-columns: 1fr;
gap: 40px;
margin-bottom: 48px;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-px);
}
.tartelier-footer__logo {
display: block;
width: 160px;
height: auto;
margin-bottom: 16px;
}
.tartelier-footer__brand p {
font-family: var(--font-body);
font-size: 14px;
line-height: 1.6;
margin: 0;
}
.tartelier-footer__col h4 {
font-family: var(--font-body);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-offwhite);
margin: 0 0 16px;
}
.tartelier-footer__col ul {
list-style: none;
padding: 0;
margin: 0;
font-family: var(--font-body);
font-size: 14px;
}
.tartelier-footer__col ul li + li {
margin-top: 8px;
}
.tartelier-footer__col ul li a {
color: rgba(252,250,248,0.8);
text-decoration: none;
transition: color 0.2s;
}
.tartelier-footer__col ul li a:hover {
color: var(--color-offwhite);
}
.tartelier-footer__contact-item {
display: flex;
align-items: flex-start;
gap: 8px;
font-family: var(--font-body);
font-size: 14px;
}
.tartelier-footer__contact-item + .tartelier-footer__contact-item {
margin-top: 12px;
}
.tartelier-footer__contact-item a {
color: rgba(252,250,248,0.8);
text-decoration: none;
transition: color 0.2s;
}
.tartelier-footer__contact-item a:hover {
color: var(--color-offwhite);
}
.tartelier-footer__contact-item a[href^="mailto:"] {
color: var(--color-primary);
}
.tartelier-footer__contact-item a[href^="mailto:"]:hover {
color: var(--color-primary);
opacity: 0.8;
}
.tartelier-footer__contact-item svg {
width: 16px;
height: 16px;
flex-shrink: 0;
margin-top: 2px;
}
.tartelier-footer__social {
display: flex;
gap: 12px;
margin-top: 24px;
}
.tartelier-footer__social a {
color: rgba(252,250,248,0.8);
transition: color 0.2s;
line-height: 1;
}
.tartelier-footer__social a:hover {
color: var(--color-offwhite);
}
.tartelier-footer__social svg {
width: 20px;
height: 20px;
}
.tartelier-footer__bottom {
border-top: 1px solid rgba(252,250,248,0.1);
padding-top: 24px;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
font-family: var(--font-body);
font-size: 12px;
color: rgba(252,250,248,0.5);
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-px);
}
@media (min-width: 768px) {
.tartelier-footer__grid {
grid-template-columns: repeat(4, 1fr);
}
.tartelier-footer__bottom {
flex-direction: row;
justify-content: space-between;
}
}
/* =========================================================
PAGE-SPECIFIC: HIDE FOOTER
========================================================= */
.no-footer .tartelier-footer { display: none !important; }
/* Brunch page — tag pills */
.brunch-tag {
display: inline-block;
background: #faf8f6;
border-radius: 50px;
padding: 6px 14px;
font-size: 11px;
font-family: var(--font-body);
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(43, 43, 43, 0.8);
margin: 0 4px 6px 0;
white-space: nowrap;
}
/* =========================================================
SCROLL REVEAL ANIMATIONS
========================================================= */
.reveal {
opacity: 0;
transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
will-change: opacity, transform;
}
.reveal.from-bottom {
transform: translateY(28px);
}
.reveal.from-left {
transform: translateX(-32px);
}
.reveal.from-right {
transform: translateX(32px);
}
.reveal.from-scale {
transform: scale(0.95);
}
.reveal.is-visible {
opacity: 1 !important;
transform: none !important;
}
/* Prefers-reduced-motion: skip animations */
@media (prefers-reduced-motion: reduce) {
.reveal {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* =========================================================
KEYFRAME ANIMATIONS
========================================================= */
@keyframes fadeSlideUp {
from {
opacity: 0;
transform: translateY(24px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes bounce {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(-8px); }
}
/* =========================================================
ELEMENTOR — FULL WIDTH & LAYOUT FIXES
========================================================= */
/* 1. Verwijder alle wrapper-beperkingen van Hello Elementor / WordPress */
#page, .site, #content, .site-content, .site-main,
.page-content, .entry-content, .container, .wp-site-blocks {
max-width: none !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
/* 2. Elementor top-level secties altijd full-width */
.elementor-section {
width: 100% !important;
max-width: 100% !important;
}
.elementor-section.elementor-section-stretched {
position: relative !important;
width: 100vw !important;
max-width: 100vw !important;
left: 50% !important;
transform: translateX(-50%) !important;
}
/* 3. Elementor inner container — geen boxed max-width */
.elementor-section > .elementor-container {
max-width: 100% !important;
width: 100% !important;
}
/* 4. Flexbox containers (Elementor 3.6+) */
.e-con { max-width: 100% !important; width: 100% !important; }
/* 5. Verwijder Elementor default column padding */
.elementor-column > .elementor-widget-wrap {
padding: 0 !important;
}
/* =========================================================
WOOCOMMERCE — TARTELIER PRODUCT GRID
========================================================= */
.tartelier-products-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
max-width: 900px;
margin-inline: auto;
}
@media (min-width: 768px) {
.tartelier-products-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.tartelier-product-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
text-decoration: none;
color: inherit;
gap: 12px;
}
.tartelier-product-card__blob {
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: 60% 40% 55% 45% / 55% 50% 50% 45%;
transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.tartelier-product-card:hover .tartelier-product-card__blob {
transform: scale(1.05);
}
.tartelier-product-card__blob img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block;
transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.tartelier-product-card:hover .tartelier-product-card__blob img {
transform: scale(1.08);
}
.tartelier-product-card__name {
font-family: var(--font-serif);
font-size: clamp(16px, 2vw, 20px);
font-weight: 300;
color: var(--color-foreground);
margin: 0;
line-height: 1.3;
}
.tartelier-product-card__price {
font-family: var(--font-body);
font-size: 14px;
color: var(--color-primary);
font-weight: 500;
}
/* WooCommerce resets — prevent default WC styles from interfering */
.tartelier-product-card__price .woocommerce-Price-amount {
color: inherit;
}
/* =========================================================
WOOCOMMERCE — SHOP ARCHIVE (Bestellen)
Targets WooCommerce default output classes directly.
========================================================= */
/* Page wrapper */
.woocommerce #page,
/* WooCommerce pagina's — crème achtergrond door hele structuur */
.woocommerce-page #page { background: var(--color-background); }
body.woocommerce-cart,
body.woocommerce-checkout {
background-color: var(--color-background) !important;
}
body.woocommerce-cart #page,
body.woocommerce-cart #content,
body.woocommerce-cart #primary,
body.woocommerce-cart main,
body.woocommerce-cart .site-main,
body.woocommerce-cart article,
body.woocommerce-cart .entry-content,
body.woocommerce-checkout #page,
body.woocommerce-checkout #content,
body.woocommerce-checkout #primary,
body.woocommerce-checkout main,
body.woocommerce-checkout .site-main,
body.woocommerce-checkout article,
body.woocommerce-checkout .entry-content,
.woocommerce-cart .wp-block-woocommerce-cart,
.woocommerce-checkout .wp-block-woocommerce-checkout {
background: var(--color-background) !important;
background-color: var(--color-background) !important;
}
/* Main content + sidebar layout */
.woocommerce #primary,
.woocommerce-page #primary {
max-width: 1200px;
margin-inline: auto;
padding: 110px 24px 80px; /* 110px = nav hoogte + marge */
display: flex;
gap: 48px;
align-items: flex-start;
}
@media (max-width: 1023px) {
.woocommerce #primary,
.woocommerce-page #primary { flex-direction: column; }
}
/* Sidebar */
.woocommerce #secondary,
.woocommerce-page #secondary {
width: 240px;
flex-shrink: 0;
position: sticky;
top: 100px;
}
@media (max-width: 1023px) {
.woocommerce #secondary,
.woocommerce-page #secondary { width: 100%; position: static; }
}
/* Sidebar widget titles */
.woocommerce .widget-title,
.woocommerce-page .widget-title,
.woocommerce .widgettitle {
font-family: var(--font-body) !important;
font-size: 10px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.15em !important;
color: var(--color-muted) !important;
margin: 0 0 16px !important;
border: none !important;
padding: 0 !important;
}
/* Category widget links */
.woocommerce .widget_product_categories ul,
.woocommerce-page .widget_product_categories ul {
list-style: none !important;
padding: 0 !important;
margin: 0 0 32px !important;
}
.woocommerce .widget_product_categories li,
.woocommerce-page .widget_product_categories li { margin: 0 !important; }
.woocommerce .widget_product_categories a,
.woocommerce-page .widget_product_categories a {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
font-family: var(--font-body) !important;
font-size: 14px !important;
color: var(--color-foreground) !important;
text-decoration: none !important;
padding: 8px 12px !important;
border-radius: 8px !important;
transition: background 0.15s !important;
}
.woocommerce .widget_product_categories a:hover,
.woocommerce-page .widget_product_categories a:hover {
background: var(--color-cream) !important;
}
.woocommerce .widget_product_categories .current-cat > a,
.woocommerce-page .widget_product_categories .current-cat > a {
background: color-mix(in srgb, var(--color-primary) 12%, transparent) !important;
color: var(--color-primary) !important;
font-weight: 500 !important;
}
/* Product count badge */
.woocommerce .widget_product_categories .count,
.woocommerce-page .widget_product_categories .count {
font-size: 11px !important;
padding: 2px 8px !important;
border-radius: 999px !important;
background: var(--color-cream) !important;
color: var(--color-muted) !important;
}
/* Main content area */
.woocommerce #main-content,
.woocommerce-page #main-content,
.woocommerce div.woocommerce,
.woocommerce-page div.woocommerce { flex: 1; min-width: 0; }
/* Toolbar: result count + ordering */
.woocommerce .woocommerce-products-header { display: none; }
.woocommerce nav.woocommerce-breadcrumb { display: none; }
.woocommerce .woocommerce-result-count {
font-family: var(--font-body) !important;
font-size: 13px !important;
color: var(--color-muted) !important;
margin: 0 !important;
float: none !important;
}
.woocommerce .woocommerce-ordering {
float: none !important;
margin: 0 !important;
}
.woocommerce .woocommerce-ordering select {
font-family: var(--font-body) !important;
font-size: 13px !important;
background: var(--color-card) !important;
border: 1px solid var(--color-border) !important;
border-radius: 8px !important;
padding: 8px 12px !important;
color: var(--color-foreground) !important;
}
/* Toolbar wrapper */
.woocommerce .woocommerce-notices-wrapper + *,
.woocommerce-page .woocommerce .woocommerce-result-count {
display: flex;
align-items: center;
justify-content: space-between;
}
/* Fake toolbar row */
.woocommerce ul.products,
.woocommerce-page ul.products { clear: both; }
/* Product grid */
.woocommerce ul.products {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 24px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
float: none !important;
width: 100% !important;
}
@media (min-width: 1024px) {
.woocommerce ul.products { grid-template-columns: repeat(3, 1fr) !important; }
}
/* Product card */
.woocommerce ul.products li.product {
background: var(--color-card) !important;
border-radius: 12px !important;
border: 1px solid var(--color-border) !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
width: auto !important;
transition: box-shadow 0.3s, transform 0.3s !important;
}
.woocommerce ul.products li.product:hover {
box-shadow: 0 8px 32px rgba(0,0,0,0.08) !important;
transform: translateY(-2px) !important;
}
/* Product image */
.woocommerce ul.products li.product a img {
width: 100% !important;
aspect-ratio: 1 / 1 !important;
object-fit: cover !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 0 !important;
transition: transform 0.5s ease !important;
}
.woocommerce ul.products li.product:hover a img {
transform: scale(1.05) !important;
}
/* Card body */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
font-family: var(--font-serif) !important;
font-size: 18px !important;
font-weight: 300 !important;
color: var(--color-foreground) !important;
padding: 16px 20px 4px !important;
margin: 0 !important;
line-height: 1.3 !important;
}
.woocommerce ul.products li.product .price {
font-family: var(--font-body) !important;
font-size: 14px !important;
color: var(--color-muted) !important;
padding: 0 20px 8px !important;
display: block !important;
}
.woocommerce ul.products li.product .price .woocommerce-Price-amount {
font-size: 16px !important;
font-weight: 600 !important;
color: var(--color-primary) !important;
}
/* Add to cart / Bekijk button — primary stijl */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
background: var(--color-primary, #c0703a) !important;
color: #fff !important;
font-family: var(--font-body) !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: 0.2em !important;
text-transform: uppercase !important;
padding: 12px 20px !important;
margin: 8px 20px 16px !important;
border-radius: 100px !important;
text-decoration: none !important;
border: 1.5px solid transparent !important;
width: calc(100% - 40px) !important;
transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}
.woocommerce ul.products li.product .button:hover {
background: transparent !important;
color: var(--color-primary, #c0703a) !important;
border-color: var(--color-primary, #c0703a) !important;
}
@media (max-width: 767px) {
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button {
padding: 16px 20px !important;
}
}
/* Sale badge */
.woocommerce ul.products li.product .onsale {
position: absolute !important;
top: 12px !important;
left: 12px !important;
background: var(--color-primary) !important;
color: var(--color-background) !important;
font-family: var(--font-body) !important;
font-size: 11px !important;
font-weight: 500 !important;
padding: 4px 12px !important;
border-radius: 999px !important;
min-height: auto !important;
min-width: auto !important;
line-height: 1.5 !important;
}
/* Pagination */
.woocommerce nav.woocommerce-pagination ul {
display: flex !important;
gap: 8px !important;
list-style: none !important;
padding: 0 !important;
margin: 48px 0 0 !important;
border: none !important;
}
.woocommerce nav.woocommerce-pagination ul li { border: none !important; padding: 0 !important; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
font-family: var(--font-body) !important;
font-size: 14px !important;
padding: 8px 14px !important;
border-radius: 8px !important;
border: 1px solid var(--color-border) !important;
color: var(--color-foreground) !important;
text-decoration: none !important;
display: block !important;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
background: var(--color-primary) !important;
color: var(--color-background) !important;
border-color: var(--color-primary) !important;
}
/* =========================================================
WOOCOMMERCE — SHOP ARCHIVE (winkel)
Matches Bestellen.tsx exactly:
editorial header → sticky filter bar → 3-col grid
========================================================= */
/* Reset Hello Elementor's .site-main padding on the shop page */
body.woocommerce-page .site-main,
body.woocommerce .site-main,
body.post-type-archive-product .site-main {
padding: 0 !important;
margin: 0 !important;
}
.tartelier-shop {
background: var(--color-background);
min-height: 100vh;
width: 100%;
}
/* Italic em colours */
.tartelier-shop__title .tart-em-primary {
color: var(--color-primary);
font-style: italic;
}
/* ── Editorial header ────────────────────────────────────── */
.tartelier-shop__header {
padding-top: 128px; /* pt-32 */
padding-bottom: 48px;
}
.tartelier-shop__header-inner {
max-width: 1280px;
margin-inline: auto;
padding-inline: 40px;
}
@media (max-width: 767px) {
.tartelier-shop__header { padding-top: 100px; padding-bottom: 32px; }
.tartelier-shop__header-inner { padding-inline: 20px; }
}
.tartelier-shop__hero {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 48px;
align-items: end;
}
@media (max-width: 1023px) {
.tartelier-shop__hero {
grid-template-columns: 1fr;
gap: 20px;
}
}
.tartelier-shop__title {
font-family: var(--font-serif) !important;
font-size: clamp(40px, 6vw, 72px) !important;
font-weight: 300 !important;
line-height: 0.95 !important;
color: var(--color-foreground) !important;
margin: 0 !important;
letter-spacing: 0 !important;
}
/* "oven" — italic + primary (class set in PHP) */
.tartelier-shop__title .tart-em-primary {
color: var(--color-primary);
}
/* "tafel" — italic, foreground */
.tartelier-shop__title em {
font-style: italic;
}
.tartelier-shop__desc {
font-family: var(--font-body);
font-size: 14px;
color: var(--color-muted);
line-height: 1.65;
max-width: 420px;
margin: 0;
}
@media (min-width: 1024px) {
.tartelier-shop__desc { justify-self: end; }
}
/* ── Sticky filter bar ───────────────────────────────────── */
.tartelier-shop__filterbar {
position: sticky;
top: 60px;
z-index: 30;
background: rgba(var(--color-background-rgb, 250, 247, 242), 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
.tartelier-shop__filterbar-inner {
max-width: 1280px;
margin-inline: auto;
padding: 16px 40px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
@media (max-width: 767px) {
.tartelier-shop__filterbar-inner {
padding: 12px 20px;
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
}
/* ── Category filter tabs ────────────────────────────────── */
.tartelier-shop__tabs {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
/* Tabs are links — reset link styles */
a.tartelier-shop__tab,
a.tartelier-shop__tab:visited,
a.tartelier-shop__tab:hover,
a.tartelier-shop__tab:active {
text-decoration: none !important;
}
.tartelier-shop__tab {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
font-family: var(--font-body) !important;
font-size: 10px !important;
font-weight: 600 !important;
letter-spacing: 0.2em !important;
text-transform: uppercase !important;
padding: 8px 16px !important;
border-radius: 999px !important;
border: 1px solid rgba(44, 34, 22, 0.15) !important;
background: transparent !important;
color: rgba(44, 34, 22, 0.7) !important;
cursor: pointer !important;
transition: background 0.2s, color 0.2s, border-color 0.2s !important;
white-space: nowrap !important;
box-shadow: none !important;
min-height: 0 !important;
height: auto !important;
width: auto !important;
line-height: 1 !important;
}
.tartelier-shop__tab:hover {
border-color: rgba(44, 34, 22, 0.4) !important;
}
.tartelier-shop__tab.is-active {
background: var(--color-foreground) !important;
color: var(--color-background) !important;
border-color: var(--color-foreground) !important;
}
.tartelier-shop__tab-count {
font-size: 9px;
opacity: 0.6;
font-weight: 400;
letter-spacing: 0;
font-variant-numeric: tabular-nums;
}
.tartelier-shop__tab.is-active .tartelier-shop__tab-count { opacity: 0.6; }
/* ── Controls (search + sort) ────────────────────────────── */
.tartelier-shop__controls {
display: flex;
align-items: center;
gap: 20px;
flex-shrink: 0;
}
@media (max-width: 767px) {
.tartelier-shop__controls {
width: 100%;
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
}
/* ── Search form ─────────────────────────────────────────── */
.tartelier-shop__search-form {
display: flex;
align-items: center;
margin: 0 !important;
padding: 0 !important;
background: none !important;
border: none !important;
}
/* ── Search ──────────────────────────────────────────────── */
.tartelier-shop__search-wrap {
position: relative;
display: flex;
align-items: center;
gap: 6px;
border-bottom: 1px solid rgba(44, 34, 22, 0.2);
padding-bottom: 2px;
}
.tartelier-shop__search-icon {
flex-shrink: 0;
color: var(--color-muted);
pointer-events: none;
}
.tartelier-shop__search,
input#tart-search {
font-family: var(--font-body) !important;
font-size: 12px !important;
color: var(--color-foreground) !important;
background: transparent !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
padding: 2px 0 !important;
width: 140px !important;
min-height: 0 !important;
height: auto !important;
border-radius: 0 !important;
transition: width 0.2s ease !important;
}
.tartelier-shop__search:focus { width: 190px !important; }
@media (max-width: 767px) {
.tartelier-shop__search-form { width: 100%; }
.tartelier-shop__search-wrap { width: 100%; }
.tartelier-shop__search,
input#tart-search { width: 100% !important; }
.tartelier-shop__search:focus { width: 100% !important; }
}
.tartelier-shop__search::placeholder {
color: rgba(44, 34, 22, 0.35) !important;
font-size: 11px !important;
}
/* Override any global search input styles */
.tartelier-shop__search[type="search"]::-webkit-search-cancel-button { display: none; }
/* Global focus rule must not add border on the input itself — the wrap has the underline */
.tartelier-shop__search:focus,
input#tart-search:focus {
border: none !important;
border-bottom: none !important;
outline: none !important;
box-shadow: none !important;
}
.tartelier-shop__search-clear {
background: none !important;
border: none !important;
padding: 0 !important;
cursor: pointer !important;
color: var(--color-muted) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: none !important;
min-height: 0 !important;
height: auto !important;
width: auto !important;
opacity: 0.6;
transition: opacity 0.15s !important;
flex-shrink: 0 !important;
}
.tartelier-shop__search-clear:hover { opacity: 1 !important; }
a.tartelier-shop__search-clear,
a.tartelier-shop__search-clear:visited {
text-decoration: none !important;
}
/* ── Sort ────────────────────────────────────────────────── */
.tartelier-shop__sort-wrap {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.tartelier-shop__sort-label {
font-family: var(--font-body);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--color-muted);
white-space: nowrap;
}
.tartelier-shop__sort-wrap .woocommerce-ordering { margin: 0 !important; }
.woocommerce-ordering select,
.tartelier-shop__sort-wrap select {
font-family: var(--font-body) !important;
font-size: 12px !important;
color: var(--color-foreground) !important;
background: transparent !important;
border: none !important;
border-bottom: 1px solid rgba(44, 34, 22, 0.2) !important;
border-radius: 0 !important;
padding: 4px 20px 4px 0 !important;
cursor: pointer !important;
box-shadow: none !important;
min-height: 0 !important;
height: auto !important;
outline: none !important;
appearance: none !important;
-webkit-appearance: none !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23555' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 2px center !important;
}
.woocommerce-ordering select:focus,
.tartelier-shop__sort-wrap select:focus {
border-bottom-color: var(--color-foreground) !important;
outline: none !important;
box-shadow: none !important;
}
/* ── Product grid ────────────────────────────────────────── */
.tartelier-shop__grid-wrap {
max-width: 1280px;
margin-inline: auto;
padding: 48px 40px 80px;
}
@media (max-width: 767px) {
.tartelier-shop__grid-wrap { padding: 32px 20px 60px; }
}
.tartelier-shop__grid {
display: grid !important;
grid-template-columns: repeat(1, 1fr) !important;
column-gap: 24px !important; /* gap-x-6 */
row-gap: 48px !important; /* gap-y-12 */
margin: 0 !important;
padding: 0 !important;
}
@media (min-width: 600px) {
.tartelier-shop__grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (min-width: 1024px) {
.tartelier-shop__grid {
grid-template-columns: repeat(3, 1fr) !important;
row-gap: 64px !important; /* gap-y-16 */
}
}
/* ── Product card — card is the positioning context ──── */
.tartelier-shop-card {
display: block !important;
position: relative !important;
text-decoration: none !important;
color: inherit !important;
border-radius: 20px !important;
overflow: hidden !important;
background: var(--color-cream) !important;
}
/* Image wrap fills the card and sets its height via aspect-ratio */
.tartelier-shop-card__img-wrap {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
border-radius: 0;
background: var(--color-cream);
}
.tartelier-shop-card__img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
display: block !important;
transition: transform 0.7s ease;
}
.tartelier-shop-card:hover .tartelier-shop-card__img {
transform: scale(1.04);
}
/* Price pill + badge — top right */
.tartelier-shop-card__top-right {
position: absolute;
top: 14px;
right: 14px;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 6px;
z-index: 3;
}
.tartelier-shop-card__price-pill {
background: rgba(250, 248, 245, 0.95);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
color: var(--color-foreground, #2b2b2b);
font-family: var(--font-body);
font-size: 12px;
font-weight: 500;
font-variant-numeric: tabular-nums;
padding: 5px 13px;
border-radius: 100px;
box-shadow: 0 4px 20px -6px rgba(0, 0, 0, 0.2);
outline: 1px solid rgba(43, 43, 43, 0.06);
white-space: nowrap;
}
.tartelier-shop-card__price-pill .woocommerce-Price-amount { font-size: inherit; color: inherit; }
/* Badge */
.tartelier-shop-card__badge {
background: var(--color-foreground, #2b2b2b);
color: var(--color-background, #faf8f5);
font-family: var(--font-body);
font-size: 9px;
font-weight: 500;
letter-spacing: 0.25em;
text-transform: uppercase;
padding: 5px 11px;
border-radius: 100px;
}
/* Bottom panel — frosted glass, name + arrow only */
.tartelier-shop-card__body {
position: absolute !important;
bottom: 14px !important;
left: 14px !important;
right: 14px !important;
background: rgba(250, 248, 245, 0.95) !important;
-webkit-backdrop-filter: blur(20px) !important;
backdrop-filter: blur(20px) !important;
border-radius: 16px !important;
padding: 10px 8px 10px 20px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
box-shadow: 0 8px 30px -12px rgba(0, 0, 0, 0.25) !important;
outline: 1px solid rgba(43, 43, 43, 0.06) !important;
z-index: 2 !important;
margin: 0 !important;
}
.tartelier-shop-card__name {
font-family: var(--font-serif) !important;
font-size: 18px !important;
font-weight: 300 !important;
color: var(--color-foreground, #2b2b2b) !important;
margin: 0 !important;
line-height: 1.2 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
min-width: 0 !important;
flex: 1 !important;
}
/* Arrow button */
.tartelier-shop-card__arrow {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
border-radius: 50% !important;
background: var(--color-foreground, #2b2b2b) !important;
color: #fff !important;
flex-shrink: 0 !important;
transition: background 0.3s ease, transform 0.3s ease !important;
}
.tartelier-shop-card:hover .tartelier-shop-card__arrow {
background: var(--color-primary, #c0703a) !important;
transform: scale(1.1) rotate(-12deg) !important;
}
/* ── Legacy __meta HTML: full-card overlay so price pill goes top-right ── */
/* __meta spans the whole card; flex-column space-between puts price top, name bottom */
.tartelier-shop-card__meta {
position: absolute !important;
inset: 0 !important;
display: flex !important;
flex-direction: column-reverse !important;
justify-content: space-between !important;
align-items: stretch !important;
padding: 14px !important;
background: transparent !important;
box-shadow: none !important;
outline: none !important;
border-radius: 0 !important;
margin: 0 !important;
z-index: 2 !important;
gap: 0 !important;
}
/* Top row: price pill floated to the right */
.tartelier-shop-card__meta-right {
align-self: flex-end !important;
background: rgba(250, 248, 245, 0.95) !important;
-webkit-backdrop-filter: blur(20px) !important;
backdrop-filter: blur(20px) !important;
border-radius: 100px !important;
padding: 5px 13px !important;
box-shadow: 0 4px 20px -6px rgba(0, 0, 0, 0.2) !important;
outline: 1px solid rgba(43, 43, 43, 0.06) !important;
white-space: nowrap !important;
width: auto !important; height: auto !important; min-width: 0 !important;
display: block !important;
font-size: 0 !important; /* hide stray text nodes, only show __price child */
}
.tartelier-shop-card__meta-right .tartelier-shop-card__price {
display: inline !important;
font-family: var(--font-body) !important;
font-size: 12px !important;
font-weight: 500 !important;
font-variant-numeric: tabular-nums !important;
color: var(--color-foreground, #2b2b2b) !important;
}
.tartelier-shop-card__meta-right .tartelier-shop-card__price .woocommerce-Price-amount {
font-size: inherit !important; color: inherit !important;
}
.tartelier-shop-card__meta-right::after { content: none !important; }
/* Bottom row: frosted name panel with arrow via ::after */
.tartelier-shop-card__meta-left {
background: rgba(250, 248, 245, 0.95) !important;
-webkit-backdrop-filter: blur(20px) !important;
backdrop-filter: blur(20px) !important;
border-radius: 16px !important;
padding: 10px 8px 10px 20px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
box-shadow: 0 8px 30px -12px rgba(0, 0, 0, 0.25) !important;
outline: 1px solid rgba(43, 43, 43, 0.06) !important;
min-width: 0 !important;
flex: none !important;
}
.tartelier-shop-card__meta-left::after {
content: '›' !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 36px !important; height: 36px !important;
border-radius: 50% !important;
background: var(--color-foreground, #2b2b2b) !important;
color: #fff !important;
font-size: 20px !important;
line-height: 1 !important;
flex-shrink: 0 !important;
transition: background 0.3s ease, transform 0.3s ease !important;
}
.tartelier-shop-card:hover .tartelier-shop-card__meta-left::after {
background: var(--color-primary, #c0703a) !important;
transform: scale(1.1) rotate(-12deg) !important;
}
.tartelier-shop-card__cat,
.tartelier-shop-card__desc,
.tartelier-shop-card__vanaf,
.tartelier-shop-card__price {
display: none !important;
}
/* Dietary icons — above the overlay panel */
.tartelier-shop-card__dietary {
position: absolute;
bottom: 90px;
left: 16px;
display: flex;
gap: 6px;
z-index: 3;
}
.tartelier-shop-card__dietary-icon {
width: 28px;
height: 28px;
background: var(--color-foreground, #2c2420);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-background, #faf8f5);
}
/* Hover CTA — dark circle, bottom RIGHT */
.tartelier-shop-card__cta {
position: absolute;
bottom: 16px;
right: 16px;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--color-foreground);
color: var(--color-background);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.tartelier-shop-card:hover .tartelier-shop-card__cta {
opacity: 1;
transform: translateY(0);
}
/* Meta below image */
.tartelier-shop__empty {
font-family: var(--font-serif);
font-size: 22px;
font-style: italic;
color: var(--color-muted);
text-align: center;
padding: 80px 0;
}
.tartelier-shop__empty-reset {
display: block;
margin-top: 16px;
font-family: var(--font-body);
font-size: 12px;
font-style: normal;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-primary) !important;
text-decoration: none !important;
}
/* ── Pagination ──────────────────────────────────────────── */
.woocommerce-pagination {
margin-top: 48px;
display: flex;
justify-content: center;
}
.woocommerce-pagination ul {
display: flex;
gap: 8px;
list-style: none;
padding: 0;
margin: 0;
}
.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
font-family: var(--font-body);
font-size: 14px;
padding: 8px 14px;
border-radius: 8px;
border: 1px solid var(--color-border);
color: var(--color-foreground);
text-decoration: none;
transition: background 0.2s, color 0.2s;
}
.woocommerce-pagination ul li a:hover { background: var(--color-cream); }
.woocommerce-pagination ul li span.current {
background: var(--color-primary);
color: var(--color-background);
border-color: var(--color-primary);
}
/* =========================================================
WOOCOMMERCE — SINGLE PRODUCT PAGE
========================================================= */
/* Single product pagina achtergrond */
body.single-product,
body.single-product #page,
body.single-product .site-content,
body.single-product .site-main {
background: var(--color-background) !important;
}
.tartelier-product-single {
width: 100%;
background: var(--color-background);
}
/* Breadcrumb + terug-link: witte balk bovenaan */
.tartelier-product-single__breadcrumb,
.tartelier-product-single__back {
display: block;
}
.tartelier-product-single__header-bar {
background: #fff;
border-bottom: 1px solid var(--color-border);
padding-top: 110px;
padding-bottom: 20px;
margin-bottom: 0;
width: 100%;
}
/* Beide centreringswrappers — zelfde kolom, zelfde uitlijning */
.tartelier-product-single__header-bar .tartelier-product-single__breadcrumb,
.tartelier-product-single__header-bar .tartelier-product-single__back {
max-width: 1200px;
margin-inline: auto;
padding-inline: 24px;
display: flex !important; /* block-level zodat margin-inline: auto werkt */
width: 100%;
box-sizing: border-box;
}
/* Breadcrumb */
.tartelier-product-single__breadcrumb {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-body);
font-size: 11px;
color: var(--color-muted);
margin-bottom: 24px;
}
.tartelier-product-single__breadcrumb a {
color: var(--color-muted);
text-decoration: none;
transition: color 0.2s;
}
.tartelier-product-single__breadcrumb a:hover { color: var(--color-primary); }
.tartelier-product-single__breadcrumb span { color: var(--color-foreground); }
/* Back link */
.tartelier-product-single__back {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-body);
font-size: 13px;
color: var(--color-muted);
text-decoration: none;
margin-bottom: 32px;
transition: color 0.2s;
}
.tartelier-product-single__back:hover { color: var(--color-foreground); }
/* 2-column layout — foto loopt naar de linkerrand */
.tartelier-product-single__layout {
display: grid;
grid-template-columns: 1fr;
gap: 0;
margin-bottom: 0;
width: 100%;
}
@media (min-width: 1024px) {
.tartelier-product-single__layout {
grid-template-columns: 1fr 1fr;
min-height: calc(100vh - 70px); /* vul scherm onder nav */
align-items: stretch;
}
}
/* ── Gallery wrapper ── */
.tartelier-product-single__gallery {
display: flex;
flex-direction: column;
height: 100%;
}
/* Main image */
.tartelier-product-single__image {
position: relative;
overflow: hidden;
background: var(--color-surface);
aspect-ratio: 1 / 1;
border-radius: 0;
flex: 1;
}
@media (min-width: 1024px) {
.tartelier-product-single__image {
aspect-ratio: auto;
min-height: 500px;
max-height: 620px;
border-radius: 0;
}
}
.tartelier-product-single__img {
width: 100% !important;
height: 100% !important;
max-height: 100% !important;
object-fit: cover !important;
object-position: center !important;
display: block !important;
position: absolute !important;
inset: 0 !important;
transition: opacity 0.25s ease;
}
/* Thumbnail strip */
.tartelier-product-single__thumbs {
display: flex;
gap: 8px;
padding: 0;
margin: 0 !important;
background: transparent;
overflow-x: auto;
scrollbar-width: none;
}
.tartelier-product-single__thumbs::-webkit-scrollbar { display: none; }
.tartelier-product-single__thumb {
flex-shrink: 0;
width: 120px;
height: 120px;
border-radius: 8px;
overflow: hidden;
border: 2px solid transparent !important;
outline: none;
padding: 0;
margin: 0 !important;
background: var(--color-surface) !important;
background-color: var(--color-surface) !important;
cursor: pointer;
transition: opacity 0.2s ease, border-color 0.2s ease;
opacity: 0.55;
}
.tartelier-product-single__thumb img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
display: block !important;
}
.tartelier-product-single__thumb:hover,
.tartelier-product-single__thumb:focus {
opacity: 0.85;
background: var(--color-surface) !important;
background-color: var(--color-surface) !important;
outline: none;
}
.tartelier-product-single__thumb.is-active {
opacity: 1;
border-color: var(--color-primary) !important;
}
.tartelier-product-single__thumb:focus { outline: none; }
.tartelier-product-single__badge {
position: absolute;
top: 16px;
left: 16px;
background: var(--color-primary);
color: var(--color-background);
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
padding: 6px 16px;
border-radius: 999px;
letter-spacing: 0.05em;
}
/* Info column — top-aligned, eigen padding */
.tartelier-product-single__info {
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 48px 48px 48px 56px;
max-width: 640px;
overflow-y: auto;
}
@media (max-width: 1023px) {
.tartelier-product-single__info {
padding: 32px 24px;
max-width: 100%;
}
}
.tartelier-product-single__cat {
font-family: var(--font-body);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.2em;
color: var(--color-muted);
margin: 0 0 8px;
}
.tartelier-product-single__title {
font-family: var(--font-serif);
font-size: clamp(28px, 4vw, 42px);
font-weight: 300;
color: var(--color-foreground);
margin: 0 0 16px;
line-height: 1.15;
}
/* Dietary badges */
.tartelier-product-single__dietary {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 20px;
}
.tartelier-product-single__dietary-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-body);
font-size: 11px;
font-weight: 500;
padding: 5px 12px;
border-radius: 6px;
border: 1px solid currentColor;
}
.tartelier-badge--vegan { color: #166534; background: #dcfce7; border-color: #bbf7d0; }
.tartelier-badge--gluten { color: #92400e; background: #fef3c7; border-color: #fde68a; }
.tartelier-badge--lactose { color: #1e40af; background: #dbeafe; border-color: #bfdbfe; }
/* Description */
.tartelier-product-single__desc {
font-family: var(--font-body);
font-size: 14px;
color: var(--color-muted);
line-height: 1.7;
margin-bottom: 24px;
}
/* Price & cart — hide the range (e.g. €25,00 – €32,00) on variable products;
the per-button price already shows the correct amount */
.tartelier-product-single__cart .price {
display: none !important;
}
/* Add to cart knop — primary stijl */
.tartelier-product-single__cart .button,
.tartelier-product-single__cart button[type="submit"],
.tartelier-product-single__cart .single_add_to_cart_button {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
background: var(--color-primary, #c0703a) !important;
color: #fff !important;
font-family: var(--font-body) !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 0.2em !important;
text-transform: uppercase !important;
padding: 14px 36px !important;
border: 1.5px solid transparent !important;
border-radius: 100px !important;
cursor: pointer !important;
text-decoration: none !important;
line-height: 1 !important;
width: auto !important;
transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}
.tartelier-product-single__cart .button:hover,
.tartelier-product-single__cart button[type="submit"]:hover {
background: transparent !important;
color: var(--color-primary, #c0703a) !important;
border-color: var(--color-primary, #c0703a) !important;
}
/* Verberg: dubbele prijs, Wissen link, quantity */
.tartelier-product-single__cart .woocommerce-variation-price,
.tartelier-product-single__cart .reset_variations,
.tartelier-product-single__cart .quantity {
display: none !important;
}
/* Verwijder grijze border/container rond variations tabel */
.tartelier-product-single__cart .variations_form,
.tartelier-product-single__cart table.variations {
border: none !important;
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
width: 100% !important;
}
/* Tabel → verticaal blok zodat label boven de knoppen staat */
.tartelier-product-single__cart table.variations,
.tartelier-product-single__cart table.variations tbody,
.tartelier-product-single__cart table.variations tr {
display: block !important;
}
.tartelier-product-single__cart table.variations td,
.tartelier-product-single__cart table.variations th {
display: block !important;
border: none !important;
background: transparent !important;
padding: 0 !important;
}
/* Label "FORMAAT" / "GROOTTE" boven de knoppen — altijd links */
.tartelier-product-single__cart table.variations .label,
.tartelier-product-single__cart table.variations td.label {
margin-bottom: 10px !important;
text-align: left !important;
}
.tartelier-product-single__cart table.variations .label label {
font-family: var(--font-body) !important;
font-size: 10px !important;
text-transform: uppercase !important;
letter-spacing: 0.15em !important;
color: var(--color-muted) !important;
font-weight: 700 !important;
text-align: left !important;
display: block !important;
}
.tartelier-product-single__cart table.variations td.value {
margin-bottom: 24px !important;
}
/* Verberg de standaard select dropdown */
.tartelier-product-single__cart .variations select {
display: none !important;
}
/* ── Sticky add-to-cart button on mobile ───────────────── */
@media (max-width: 767px) {
/* Full-width sticky bar with generous inner padding */
.tartelier-product-single__cart .button,
.tartelier-product-single__cart button[type="submit"],
.tartelier-product-single__cart .single_add_to_cart_button {
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
border-radius: 0 !important;
z-index: 9999 !important;
padding: 22px 24px !important;
text-align: center !important;
justify-content: center !important;
box-shadow: 0 -4px 24px rgba(44, 34, 22, 0.12) !important;
margin: 0 !important;
}
/* Add bottom padding to product page so content doesn't hide behind the bar */
body.single-product .tartelier-product-single {
padding-bottom: 88px !important;
}
}
/* Knoppenrij — gegenereerd via JS hieronder */
.tartelier-size-btns {
display: flex !important;
flex-wrap: wrap !important;
gap: 12px !important;
margin-bottom: 24px !important;
}
.tartelier-size-btn {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
padding: 16px 24px !important;
border: 2px solid var(--color-border) !important;
border-radius: 10px !important;
background: var(--color-card) !important;
cursor: pointer !important;
font-family: var(--font-body) !important;
transition: border-color 0.2s, background 0.2s !important;
min-width: 120px !important;
line-height: 1.4 !important;
}
.tartelier-size-btn__label {
font-size: 14px !important;
font-weight: 500 !important;
color: var(--color-foreground) !important;
}
.tartelier-size-btn__price {
font-size: 16px !important;
font-weight: 600 !important;
color: var(--color-primary) !important;
margin-top: 4px !important;
}
.tartelier-size-btn.is-selected {
border-color: var(--color-primary) !important;
background: color-mix(in srgb, var(--color-primary) 6%, transparent) !important;
}
.tartelier-size-btn:hover {
border-color: color-mix(in srgb, var(--color-primary) 50%, transparent) !important;
}
/* Ingredients */
.tartelier-product-single__ingredients {
margin-top: 28px;
padding-top: 24px;
border-top: 1px solid var(--color-border);
}
.tartelier-product-single__ingredients-label {
font-family: var(--font-body);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--color-muted);
font-weight: 600;
margin: 0 0 8px;
}
.tartelier-product-single__ingredients-text {
font-family: var(--font-body);
font-size: 13px;
color: var(--color-muted);
line-height: 1.6;
margin: 0;
}
/* ── Related products ─────────────────────────────────── */
.tartelier-related {
margin-top: 64px;
padding-top: 48px;
padding-bottom: 80px;
border-top: 1px solid var(--color-border);
max-width: 1200px;
margin-inline: auto;
padding-inline: 24px;
}
.tartelier-related__title {
font-family: var(--font-serif);
font-size: clamp(22px, 3vw, 28px);
font-weight: 300;
color: var(--color-foreground);
margin: 0 0 32px;
}
.tartelier-related__grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
}
@media (min-width: 640px) { .tartelier-related__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tartelier-related__grid { grid-template-columns: repeat(3, 1fr); } }
.tartelier-related__card {
display: block;
background: var(--color-card);
border-radius: 12px;
border: 1px solid var(--color-border);
overflow: hidden;
text-decoration: none;
color: inherit;
transition: box-shadow 0.3s, transform 0.3s;
}
.tartelier-related__card:hover {
box-shadow: 0 8px 32px rgba(0,0,0,0.08);
transform: translateY(-2px);
}
.tartelier-related__card-img {
aspect-ratio: 1 / 1;
overflow: hidden;
}
.tartelier-related__card-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
.tartelier-related__card:hover .tartelier-related__card-img img {
transform: scale(1.05);
}
.tartelier-related__card-body {
padding: 20px;
}
.tartelier-related__card-name {
font-family: var(--font-serif);
font-size: 18px;
font-weight: 300;
color: var(--color-foreground);
margin: 0 0 6px;
}
.tartelier-related__card-desc {
font-family: var(--font-body);
font-size: 12px;
color: var(--color-muted);
margin: 0 0 10px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.tartelier-related__card-price {
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
color: var(--color-primary);
}
/* WooCommerce global resets for single product page */
.woocommerce div.product { margin: 0; padding: 0; }
.woocommerce div.product form.cart { margin: 0; }
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button { border-radius: 8px; }
/* =========================================================
ELEMENTOR — BLOB IMAGES (producten)
========================================================= */
/* Blob op de afbeelding zelf — werkt voor alle Elementor versies */
.tartelier-blob-img img,
.tartelier-blob-img .elementor-widget-container img,
.tartelier-blob-img .elementor-image-box-img img,
.tartelier-blob-img .elementor-image img {
border-radius: 60% 40% 55% 45% / 55% 50% 50% 45% !important;
overflow: hidden !important;
object-fit: cover !important;
aspect-ratio: 1 / 1 !important;
width: 100% !important;
display: block !important;
transition: transform 0.7s ease !important;
}
/* Blob ook op de container voor overflow: hidden */
.tartelier-blob-img .elementor-widget-container,
.tartelier-blob-img .elementor-image,
.tartelier-blob-img figure {
border-radius: 60% 40% 55% 45% / 55% 50% 50% 45% !important;
overflow: hidden !important;
aspect-ratio: 1 / 1 !important;
display: block !important;
}
.tartelier-blob-img:hover img {
transform: scale(1.1) !important;
}
/* =========================================================
ELEMENTOR — MARGIN & SPACING RESETS
========================================================= */
/* Elementor reset — koppen mogen geen extra margin erven */
.elementor-widget-heading .elementor-heading-title {
margin-top: 0;
margin-bottom: 0;
}
/* Elementor reset — paragrafen */
.elementor-widget-text-editor p {
margin-top: 0;
}
/* Elementor widget button — alleen font, zodat Elementor colors/size zelf beheert */
.elementor-widget-button .elementor-button {
font-family: var(--font-body) !important;
letter-spacing: 0.2em !important;
transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}
/* =========================================================
HERO SECTION — achtergrond GIF via CSS-class
========================================================= */
.tartelier-hero-section {
position: relative !important;
overflow: hidden !important;
min-height: 100vh !important;
}
/* De GIF widget staat absoluut achteraan */
.tartelier-hero-section .tartelier-hero__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transform: scaleX(-1);
z-index: 0;
}
.tartelier-hero-section .tartelier-hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to right, rgba(252,250,248,0.15) 0%, transparent 60%);
z-index: 1;
}
/* Alle widgets in de hero-kolom boven de GIF */
.tartelier-hero-section .elementor-widget-wrap {
position: relative;
z-index: 2;
}
/* =========================================================
EAT IN PAGINA
========================================================= */
/* ── Gedeelde knoppen ─────────────────────────────────── */
/* .tartelier-btn base is defined globally above — only overrides here */
.tartelier-btn--ghost {
background: transparent;
color: var(--color-foreground);
border-color: rgba(0,0,0,0.18);
}
.tartelier-btn--ghost:hover { background: rgba(0,0,0,0.04); }
/* ── Hero ─────────────────────────────────────────────── */
.tartelier-eatin__hero {
position: relative;
min-height: 80vh;
background: var(--color-background);
overflow: hidden;
display: flex;
align-items: center;
}
.tartelier-eatin__hero-arcs {
position: absolute;
top: 0;
right: 0;
width: 55%;
height: 100%;
pointer-events: none;
opacity: 0.07;
color: var(--color-foreground);
}
.tartelier-eatin__hero-inner {
width: 100%;
max-width: 1200px;
margin-inline: auto;
padding-inline: 24px;
padding-top: 120px;
padding-bottom: 60px;
display: grid;
grid-template-columns: 1fr;
gap: 48px;
align-items: center;
}
@media (min-width: 1024px) {
.tartelier-eatin__hero-inner {
grid-template-columns: 1fr 1fr;
padding-top: 80px;
padding-bottom: 80px;
}
}
.tartelier-eatin__eyebrow {
font-family: var(--font-body);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.25em;
color: var(--color-muted);
margin-bottom: 20px;
}
.tartelier-eatin__h1 {
font-family: var(--font-serif);
font-size: clamp(56px, 10vw, 96px);
font-weight: 300;
font-style: italic;
color: var(--color-foreground);
line-height: 1;
margin-bottom: 28px;
}
.tartelier-eatin__lead {
font-family: var(--font-body);
font-size: 15px;
color: var(--color-muted);
line-height: 1.7;
max-width: 440px;
margin-bottom: 32px;
}
.tartelier-eatin__hero-btns {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
/* Cirkelfoto */
.tartelier-eatin__hero-img-wrap {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 40px;
}
@media (min-width: 1024px) {
.tartelier-eatin__hero-img-wrap { padding-bottom: 0; }
}
.tartelier-eatin__hero-img {
width: clamp(240px, 38vw, 480px);
height: clamp(240px, 38vw, 480px);
border-radius: 50%;
overflow: hidden;
box-shadow: 0 32px 64px rgba(0,0,0,0.12);
position: relative;
z-index: 1;
}
.tartelier-eatin__hero-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.tartelier-eatin__hero-ring {
position: absolute;
border-radius: 50%;
border: 1px solid;
pointer-events: none;
}
.tartelier-eatin__hero-ring--a {
inset: -16px;
border-color: rgba(180,90,60,0.15);
}
.tartelier-eatin__hero-ring--b {
inset: -40px;
border-color: rgba(0,0,0,0.04);
}
/* ── Wavy divider ─────────────────────────────────────── */
.tartelier-eatin__wave {
margin-top: -1px;
line-height: 0;
}
.tartelier-eatin__wave svg {
display: block;
width: 100%;
height: 60px;
}
/* ── Seizoensbadge ────────────────────────────────────── */
.tartelier-eatin__season-badge {
background: var(--color-card);
text-align: center;
padding: 8px 0 0;
}
.tartelier-eatin__season-badge span {
display: inline-block;
font-family: var(--font-body);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--color-muted);
border: 1px solid var(--color-border);
border-radius: 999px;
padding: 4px 14px;
}
/* ── Menu blokken ─────────────────────────────────────── */
.tartelier-menu-block {
display: grid;
grid-template-columns: 1fr;
border-top: 1px solid var(--color-border);
background: var(--color-card);
}
@media (min-width: 1024px) {
.tartelier-menu-block {
grid-template-columns: 1fr 1fr;
min-height: 540px;
}
}
/* Foto */
.tartelier-menu-block__img {
height: 260px;
background-size: cover;
background-position: center;
background-attachment: fixed;
order: 0;
}
@media (min-width: 1024px) {
.tartelier-menu-block__img { height: auto; order: 1; }
.tartelier-menu-block__img--right { order: 2; }
}
/* Inhoud */
.tartelier-menu-block__content {
display: flex;
align-items: flex-start;
order: 1;
}
@media (min-width: 1024px) {
.tartelier-menu-block__content { order: 1; }
.tartelier-menu-block__content--left { order: 2; }
}
.tartelier-menu-block__inner {
width: 100%;
max-width: 560px;
padding: 48px 28px;
margin-inline: auto;
}
@media (min-width: 768px) {
.tartelier-menu-block__inner { padding: 56px 48px; }
}
@media (min-width: 1024px) {
.tartelier-menu-block__inner { padding: 64px 56px; margin-inline: 0; }
}
.tartelier-menu-block__heading {
font-family: var(--font-serif);
font-size: clamp(20px, 3vw, 28px);
font-weight: 300;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--color-foreground);
margin-bottom: 8px;
}
.tartelier-menu-block__rule {
width: 40px;
height: 2px;
background: var(--color-primary);
margin-bottom: 32px;
}
/* ── Menu secties ─────────────────────────────────────── */
.tartelier-menu-section {
margin-bottom: 32px;
}
.tartelier-menu-section:last-child { margin-bottom: 0; }
.tartelier-menu-section__title {
font-family: var(--font-body);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--color-muted);
margin-bottom: 14px;
}
.tartelier-menu-section__items {
display: flex;
flex-direction: column;
gap: 10px;
}
.tartelier-menu-section__note {
font-family: var(--font-body);
font-size: 11px;
color: var(--color-muted);
font-style: italic;
margin-top: 10px;
}
/* ── Menu items ───────────────────────────────────────── */
.tartelier-menu-item__row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 8px;
}
.tartelier-menu-item__name {
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-foreground);
}
.tartelier-menu-item__price {
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
color: var(--color-primary);
white-space: nowrap;
flex-shrink: 0;
}
.tartelier-menu-item__desc {
font-family: var(--font-body);
font-size: 11px;
color: var(--color-muted);
font-style: italic;
margin-top: 2px;
}
/* ── Allergie disclaimer ──────────────────────────────── */
.tartelier-eatin__allergy {
padding: 40px 24px;
border-top: 1px solid var(--color-border);
text-align: center;
}
.tartelier-eatin__allergy p {
font-family: var(--font-body);
font-size: 11px;
color: var(--color-muted);
line-height: 1.7;
max-width: 680px;
margin-inline: auto;
}
/* ── Info strip ───────────────────────────────────────── */
.tartelier-eatin__info {
padding: 64px 24px;
background: var(--color-card);
border-top: 1px solid var(--color-border);
}
.tartelier-eatin__info-inner {
max-width: 860px;
margin-inline: auto;
display: grid;
grid-template-columns: 1fr;
gap: 40px;
text-align: center;
}
@media (min-width: 768px) {
.tartelier-eatin__info-inner { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}
.tartelier-eatin__info-item svg {
color: var(--color-primary);
margin-inline: auto;
margin-bottom: 12px;
display: block;
}
.tartelier-eatin__info-item h3 {
font-family: var(--font-serif);
font-size: 18px;
font-weight: 300;
color: var(--color-foreground);
margin-bottom: 8px;
}
.tartelier-eatin__info-item p,
.tartelier-eatin__info-item a {
font-family: var(--font-body);
font-size: 13px;
color: var(--color-muted);
display: block;
text-decoration: none;
line-height: 1.6;
}
.tartelier-eatin__info-item a {
color: var(--color-primary);
font-weight: 500;
margin-top: 4px;
}
.tartelier-eatin__info-item a:hover { text-decoration: underline; }
.tartelier-eatin__info-item .small {
font-size: 11px;
margin-top: 6px;
}
/* ── Take Away CTA ────────────────────────────────────── */
.tartelier-eatin__cta {
padding: 64px 24px;
border-top: 1px solid var(--color-border);
text-align: center;
}
.tartelier-eatin__cta-inner {
max-width: 600px;
margin-inline: auto;
}
.tartelier-eatin__cta h2 {
font-family: var(--font-serif);
font-size: clamp(22px, 3.5vw, 32px);
font-weight: 300;
color: var(--color-foreground);
margin-bottom: 16px;
}
.tartelier-eatin__cta p {
font-family: var(--font-body);
font-size: 14px;
color: var(--color-muted);
line-height: 1.7;
margin-bottom: 28px;
}
/* =========================================================
[tartelier_eat_in_menu] SHORTCODE
Embed in Elementor → Shortcode widget
========================================================= */
.tartelier-menu-shortcode__season {
font-family: var(--font-body);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--color-muted);
border: 1px solid var(--color-border);
border-radius: 999px;
display: inline-block;
padding: 4px 14px;
margin-bottom: 40px;
}
.tartelier-menu-shortcode__block {
margin-bottom: 48px;
padding-bottom: 48px;
border-bottom: 1px solid var(--color-border);
}
.tartelier-menu-shortcode__block:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.tartelier-menu-shortcode__block-title {
font-family: var(--font-serif);
font-size: clamp(20px, 2.5vw, 26px);
font-weight: 300;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--color-foreground);
margin-bottom: 8px;
}
.tartelier-menu-shortcode__block-rule {
width: 36px;
height: 2px;
background: var(--color-primary);
margin-bottom: 24px;
}
.tartelier-menu-shortcode__section {
margin-bottom: 28px;
}
.tartelier-menu-shortcode__section:last-child { margin-bottom: 0; }
.tartelier-menu-shortcode__section-title {
font-family: var(--font-body);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--color-muted);
margin-bottom: 12px;
}
.tartelier-menu-shortcode__items {
display: flex;
flex-direction: column;
gap: 10px;
}
.tartelier-menu-shortcode__note {
font-family: var(--font-body);
font-size: 11px;
color: var(--color-muted);
font-style: italic;
margin-top: 10px;
}
/* =========================================================
ELEMENTOR EAT IN — hero cirkel + menu items
========================================================= */
/* Hero cirkel */
.eatin-hero-wrap {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.eatin-hero-img {
width: clamp(240px, 36vw, 460px);
height: clamp(240px, 36vw, 460px);
border-radius: 50%;
overflow: hidden;
box-shadow: 0 32px 64px rgba(0,0,0,0.12);
position: relative;
z-index: 1;
}
.eatin-hero-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.eatin-hero-ring {
position: absolute;
border-radius: 50%;
border: 1px solid;
pointer-events: none;
}
.eatin-hero-ring--a {
inset: 4px;
border-color: rgba(180,90,60,0.15);
}
.eatin-hero-ring--b {
inset: -20px;
border-color: rgba(0,0,0,0.04);
}
/* Menu item rijen (in HTML widgets) */
.ei-item {
margin-bottom: 10px;
}
.ei-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 8px;
}
.ei-name {
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-foreground);
}
.ei-price {
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
color: var(--color-primary);
white-space: nowrap;
flex-shrink: 0;
}
.ei-desc {
font-family: var(--font-body);
font-size: 11px;
color: var(--color-muted);
font-style: italic;
margin: 2px 0 0;
}
.ei-note {
font-family: var(--font-body);
font-size: 11px;
color: var(--color-muted);
font-style: italic;
margin-top: 10px;
padding-top: 8px;
border-top: 1px solid var(--color-border);
}
.ei-sec-lbl {
font-family: var(--font-body);
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--color-muted);
margin: 20px 0 10px;
}
.ei-sec-lbl:first-child { margin-top: 0; }
/* ═══════════════════════════════════════════════════════════════
CATERING PAGE
═══════════════════════════════════════════════════════════════ */
/* Decorative SVG arcs — top-right of hero */
.catering-hero-wrap {
position: relative;
overflow: hidden;
}
.catering-hero-wrap::before {
content: '';
position: absolute;
top: 0; right: 0;
width: 60%; height: 100%;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 600 800' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='400' cy='400' r='350' stroke='%232C2216' stroke-width='1' opacity='0.08'/%3E%3Ccircle cx='420' cy='380' r='280' stroke='%232C2216' stroke-width='1' opacity='0.08'/%3E%3Ccircle cx='440' cy='360' r='200' stroke='%232C2216' stroke-width='0.5' opacity='0.08'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
background-position: right center;
pointer-events: none;
z-index: 0;
}
.catering-hero-wrap > .e-con-inner { position: relative; z-index: 1; }
/* ── Circular hero image ─────────────────────────────────────── */
/* The box-shadow creates 2 ring borders around the circle.
overflow:visible is critical — otherwise rings get clipped. */
.catering-hero-img-wrap,
.catering-hero-img-wrap.e-con,
.catering-hero-img-wrap > .e-con-inner {
overflow: visible !important;
}
.elementor-widget.catering-hero-img,
.catering-hero-img.elementor-widget,
.catering-hero-img .elementor-widget-container,
.catering-hero-img .elementor-image {
overflow: visible !important;
}
.elementor-widget.catering-hero-img img,
.catering-hero-img img {
border-radius: 50% !important;
aspect-ratio: 1 / 1 !important;
object-fit: cover !important;
width: min(420px, 72vw) !important;
height: min(420px, 72vw) !important;
display: block !important;
margin: auto !important;
/* drop shadow + inner terracotta ring + outer subtle ring */
box-shadow:
0 25px 70px rgba(44, 34, 22, .16),
0 0 0 16px rgba(180, 90, 57, 0.13),
0 0 0 40px rgba(44, 34, 22, 0.05) !important;
}
/* ── Menu item rows ───────────────────────────────────────────── */
.c-menu-item-row {
border-bottom: 1px solid rgba(44, 34, 22, 0.07);
}
.c-menu-item-row:last-child,
.c-menu-item-wrap:last-child .c-menu-item-row {
border-bottom: none;
}
/* ── Nested Tabs ─────────────────────────────────────────────── */
.e-n-tabs-heading {
border-bottom: 1px solid rgba(44, 34, 22, 0.10) !important;
gap: 0 !important;
}
.e-n-tab-title {
font-family: var(--font-body) !important;
font-size: 12px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.15em !important;
color: var(--color-muted) !important;
padding: 12px 18px !important;
border-bottom: 2px solid transparent !important;
margin-bottom: -1px;
transition: color 0.2s, border-color 0.2s;
background: transparent !important;
}
.e-n-tab-title.e-active,
.e-n-tab-title[aria-selected="true"] {
color: var(--color-primary) !important;
border-bottom-color: var(--color-primary) !important;
}
.e-n-tab-title:hover { color: var(--color-foreground) !important; }
.e-n-tabs-content { padding-top: 0 !important; }
/* Tabs altijd naast elkaar, ook op mobiel
Elementor zet --n-tabs-heading-display:contents op mobile wat
de heading als flex container breekt → we forceren terug flex */
@media (max-width: 767px) {
.elementor-widget-n-tabs.e-n-tabs-mobile {
--n-tabs-heading-display: flex !important;
--n-tabs-content-display: block !important;
}
.elementor-widget-n-tabs.e-n-tabs-mobile .e-n-tabs-heading {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
scrollbar-width: none !important;
}
.elementor-widget-n-tabs.e-n-tabs-mobile .e-n-tabs-heading::-webkit-scrollbar {
display: none !important;
}
.elementor-widget-n-tabs.e-n-tabs-mobile .e-n-tab-title {
flex: 1 1 auto !important;
min-width: 0 !important;
text-align: center !important;
order: unset !important;
margin-block-start: 0 !important;
margin-block-end: 0 !important;
}
.elementor-widget-n-tabs.e-n-tabs-mobile .e-n-tab-title[aria-selected="true"] {
margin-block-end: 0 !important;
}
.elementor-widget-n-tabs.e-n-tabs-mobile .e-n-tabs-content > .e-con {
order: unset !important;
display: none !important;
}
.elementor-widget-n-tabs.e-n-tabs-mobile .e-n-tabs-content > .e-con.e-active,
.elementor-widget-n-tabs.e-n-tabs-mobile .e-n-tabs-content > .e-con[aria-hidden="false"] {
display: flex !important;
}
}
@media (max-width: 1024px) {
.elementor-widget.catering-hero-img img,
.catering-hero-img img {
width: min(320px, 72vw) !important;
height: min(320px, 72vw) !important;
}
}
@media (max-width: 767px) {
.elementor-widget.catering-hero-img img,
.catering-hero-img img {
width: min(260px, 68vw) !important;
height: min(260px, 68vw) !important;
box-shadow:
0 15px 40px rgba(44, 34, 22, .14),
0 0 0 10px rgba(180, 90, 57, 0.12),
0 0 0 24px rgba(44, 34, 22, 0.04) !important;
}
.tartelier-boxed,
.tartelier-boxed.e-con {
max-width: 100% !important;
}
}
/* ═══════════════════════════════════════════════════════════════
CONTACT PAGE
═══════════════════════════════════════════════════════════════ */
/* Hero — "praten." italic in primary color */
.contact-hero-heading .elementor-heading-title em,
.contact-hero-heading em {
color: var(--color-primary);
font-style: italic;
}
/* Info strip — vertical dividers between columns */
.contact-info-strip > .e-con-inner > .e-con + .e-con,
.contact-info-strip > .e-con + .e-con {
border-left: 1px solid rgba(44, 34, 22, 0.10);
padding-left: 40px !important;
}
.contact-info-strip > .e-con-inner > .e-con,
.contact-info-strip > .e-con {
flex: 1;
}
/* Form — centered max-width */
.contact-form-wrap {
max-width: 700px;
margin-inline: auto;
}
/* ── Form fields — checkout-stijl (crème, geen rand, afgerond) ── */
/* Contact form fields — checkout-stijl (crème, geen rand, afgerond)
Covers: Elementor Pro Form, WPForms, Contact Form 7 */
/* ── Input / textarea / select — border-bottom stijl ── */
.wpforms-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.wpforms-form textarea,
.wpforms-form select,
.wpcf7-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.wpcf7-form textarea,
.wpcf7-form select {
background: transparent !important;
border: none !important;
border-bottom: 1px solid var(--color-input-border, rgba(52, 36, 25, 0.15)) !important;
border-radius: 0 !important;
padding: 10px 0 !important;
font-family: var(--font-body) !important;
font-size: 13px !important;
color: var(--color-foreground) !important;
box-shadow: none !important;
outline: none !important;
transition: border-color 0.2s ease;
width: 100% !important;
min-height: 0 !important;
box-sizing: border-box !important;
margin: 0 !important;
}
.wpforms-form input::placeholder,
.wpforms-form textarea::placeholder,
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
font-size: 12px !important;
color: rgba(120, 120, 120, 0.55) !important;
}
/* ── Focus ── */
.wpforms-form input:focus,
.wpforms-form textarea:focus,
.wpforms-form select:focus,
.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
background: transparent !important;
border: none !important;
border-bottom: 1px solid var(--color-input-focus, rgba(52, 36, 25, 0.85)) !important;
box-shadow: none !important;
outline: none !important;
}
/* ── Labels ── */
.elementor-form .elementor-field-group .elementor-field-label,
.wpforms-form .wpforms-field-label,
.wpcf7-form label {
font-family: var(--font-body) !important;
font-size: 10px !important;
font-weight: 500 !important;
text-transform: uppercase !important;
letter-spacing: 0.18em !important;
color: var(--color-label, rgba(44, 34, 22, 0.5)) !important;
margin: 0 !important;
margin-bottom: 0 !important;
}
/* ── Field spacing ── */
.elementor-form .elementor-field-group,
.wpforms-form .wpforms-field,
.wpcf7-form p {
margin-bottom: 20px !important;
}
/* ── WPForms: verwijder standaard padding per field ── */
.wpforms-container .wpforms-field {
padding: 0 !important;
}
/* ── WPForms: labels — zelfde als contact pagina ── */
.wpforms-container .wpforms-field-label {
font-family: var(--font-body) !important;
font-size: 10px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.2em !important;
color: var(--color-muted, #8a7d6e) !important;
margin-bottom: 8px !important;
display: block !important;
}
/* ── WPForms submit (brunch + contact) — secondary stijl ── */
.wpforms-form .wpforms-submit {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: #2b2b2b !important;
color: #fff !important;
border: 1.5px solid transparent !important;
border-radius: 100px !important;
padding: 14px 36px !important;
line-height: 1 !important;
font-family: var(--font-body) !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: 0.25em !important;
text-transform: uppercase !important;
cursor: pointer !important;
transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
box-shadow: none !important;
min-height: 0 !important;
height: auto !important;
width: auto !important;
}
.wpforms-form .wpforms-submit:hover {
background: transparent !important;
color: #2b2b2b !important;
border-color: #2b2b2b !important;
}
/* ── Elementor form + CF7 submit — primary stijl ── */
.elementor-form .elementor-button,
.wpcf7-form input[type="submit"] {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: var(--color-primary) !important;
color: #fff !important;
border: 1.5px solid transparent !important;
border-radius: 100px !important;
padding: 14px 36px !important;
line-height: 1 !important;
font-family: var(--font-body) !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: 0.25em !important;
text-transform: uppercase !important;
cursor: pointer !important;
transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
box-shadow: none !important;
min-height: 0 !important;
height: auto !important;
width: auto !important;
}
.elementor-form .elementor-button:hover,
.wpcf7-form input[type="submit"]:hover {
background: transparent !important;
color: var(--color-primary) !important;
border-color: var(--color-primary) !important;
}
/* ── "Bekijk winkelwagen" (na toevoegen aan winkelwagen) — secondary ── */
a.added_to_cart.wc-forward,
.woocommerce-notices-wrapper a.button,
.wc-block-components-notice-banner a.wc-forward {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: #2b2b2b !important;
color: #fff !important;
border: 1.5px solid transparent !important;
border-radius: 100px !important;
padding: 10px 20px !important;
line-height: 1 !important;
font-family: var(--font-body) !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0.2em !important;
text-transform: uppercase !important;
text-decoration: none !important;
cursor: pointer !important;
transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}
a.added_to_cart.wc-forward:hover,
.woocommerce-notices-wrapper a.button:hover,
.wc-block-components-notice-banner a.wc-forward:hover {
background: transparent !important;
color: #2b2b2b !important;
border-color: #2b2b2b !important;
}
/* FAQ — left heading sticky on desktop */
@media (min-width: 768px) {
.faq-heading-col {
position: sticky;
top: 120px;
}
}
/* Contact FAQ — border-top separator */
.contact-faq {
border-top: 1px solid rgba(44, 34, 22, 0.10);
}
/* Accordion — no top border on first item */
.faq-accordion-col .elementor-accordion-item:first-child {
border-top: none;
}
/* Mobile adjustments */
@media (max-width: 767px) {
.contact-hero-inner {
padding-top: 120px !important;
}
.contact-hero-heading .elementor-heading-title {
font-size: clamp(3rem, 14vw, 5rem) !important;
}
.contact-info-strip > .e-con-inner > .e-con + .e-con,
.contact-info-strip > .e-con + .e-con {
border-left: none;
border-top: 1px solid rgba(44, 34, 22, 0.10);
padding-left: 0 !important;
padding-top: 24px;
margin-top: 8px;
}
}
/* =========================================================
WINKELWAGEN & AFREKENEN — WooCommerce Blocks
========================================================= */
/* ── Pagina-header (Winkelwagen / Afrekenen) ─────────────── */
.tartelier-page-header {
padding-top: 140px;
padding-bottom: 32px;
padding-inline: 70px;
max-width: none;
margin-inline: 0;
}
.tartelier-page-header h1 {
font-family: var(--font-serif) !important;
font-size: clamp(36px, 5vw, 56px) !important;
font-weight: 300 !important;
color: var(--color-foreground) !important;
margin: 0 0 8px !important;
}
.tartelier-page-header p {
font-family: var(--font-body) !important;
font-size: 14px !important;
color: var(--color-muted) !important;
margin: 0 !important;
}
/* ── Header clearance + pagina spacing ───────────────────── */
.woocommerce-cart .wp-block-woocommerce-cart,
.woocommerce-checkout .wp-block-woocommerce-checkout {
padding-top: 70px; /* nav hoogte + kleine marge */
padding-bottom: 80px;
padding-inline: 70px;
max-width: none !important;
margin-inline: 0;
}
/* ── Typografie reset + achtergrond transparant ───────────── */
.wc-block-cart,
.wc-block-cart *,
.wc-block-checkout,
.wc-block-checkout * {
font-family: var(--font-body) !important;
box-sizing: border-box;
}
/* Laat de pagina-achtergrond (crème) doorschijnen */
.wc-block-cart,
.wc-block-cart__main,
.wc-block-checkout,
.wc-block-checkout__main,
.wc-block-checkout__form,
.wc-block-components-checkout-step {
background: transparent !important;
background-color: transparent !important;
}
/* ── Cart: kolomhoofden — verborgen ──────────────────────── */
.wc-block-cart-items__header {
display: none !important;
}
/* ── Cart: product rijen ──────────────────────────────────── */
.wc-block-cart-items .wc-block-cart-item {
border-bottom: 1px solid var(--color-border) !important;
padding-block: 20px !important;
}
.wc-block-cart-items .wc-block-cart-item:last-child {
border-bottom: none !important;
}
/* Thumbnail — groter, minimale radius */
.wc-block-cart-item__image img {
border-radius: 4px !important;
width: 140px !important;
height: 140px !important;
object-fit: cover !important;
}
/* Product naam */
.wc-block-components-product-name,
.wc-block-components-product-name a {
font-family: var(--font-serif) !important;
font-size: 17px !important;
font-weight: 300 !important;
color: var(--color-foreground) !important;
text-decoration: none !important;
}
.wc-block-components-product-name a:hover {
color: var(--color-primary) !important;
}
/* Variatie */
.wc-block-components-product-metadata__description p,
.wc-block-components-product-details__item {
font-size: 12px !important;
color: var(--color-muted) !important;
margin: 2px 0 0 !important;
}
/* Prijs onder naam — terracotta */
.wc-block-components-product-price .woocommerce-Price-amount,
.wc-block-cart-item .wc-block-components-product-price {
font-size: 14px !important;
font-weight: 600 !important;
color: var(--color-primary) !important;
}
/* Hoeveelheid — borderless, clean –/1/+ stijl */
.wc-block-components-quantity-selector {
border: none !important;
border-radius: 0 !important;
overflow: visible !important;
display: inline-flex !important;
align-items: center !important;
background: transparent !important;
box-shadow: none !important;
gap: 4px !important;
}
.wc-block-components-quantity-selector__button {
background: transparent !important;
border: none !important;
color: var(--color-foreground) !important;
width: 28px !important;
height: 28px !important;
cursor: pointer !important;
font-size: 18px !important;
transition: color 0.2s !important;
padding: 0 !important;
}
.wc-block-components-quantity-selector__button:hover {
color: var(--color-primary) !important;
background: transparent !important;
}
.wc-block-components-quantity-selector__input,
.wc-block-components-quantity-selector input {
border: none !important;
border-radius: 0 !important;
font-size: 15px !important;
text-align: center !important;
background: transparent !important;
color: var(--color-foreground) !important;
width: 38px !important;
height: 34px !important;
box-shadow: none !important;
padding: 0 !important;
}
/* Verwijder — × icoon rechtsboven in de rij */
.wc-block-cart-item__remove-link,
.wc-block-components-product-remove-button {
color: var(--color-muted) !important;
background: none !important;
border: none !important;
border-radius: 0 !important;
padding: 4px !important;
cursor: pointer !important;
line-height: 1 !important;
text-decoration: none !important;
opacity: 0.6 !important;
transition: opacity 0.2s !important;
}
.wc-block-cart-item__remove-link:hover,
.wc-block-components-product-remove-button:hover {
opacity: 1 !important;
color: var(--color-foreground) !important;
}
/* SVG ×-icoon schalen */
.wc-block-components-product-remove-button svg {
width: 16px !important;
height: 16px !important;
stroke: currentColor !important;
}
/* ── Cart sidebar — caramel kaart + witte tekst ──────────── */
.wp-block-woocommerce-cart-order-summary-block {
background: var(--color-sidebar) !important;
border: none !important;
border-radius: 16px !important;
padding: 28px !important;
overflow: hidden !important;
color: #fff !important;
}
/* Alle tekst in de cart sidebar wit */
.wp-block-woocommerce-cart-order-summary-block,
.wp-block-woocommerce-cart-order-summary-block * {
color: #fff !important;
}
/* Coupon input tekst ook wit */
.wp-block-woocommerce-cart-order-summary-block .wc-block-components-totals-coupon__input input {
color: #fff !important;
border-bottom-color: rgba(255,255,255,0.4) !important;
}
.wp-block-woocommerce-cart-order-summary-block .wc-block-components-totals-coupon__input input::placeholder {
color: rgba(255,255,255,0.55) !important;
}
/* Alle inner wrappers zijn transparant — geen geneste kaarten */
.wp-block-woocommerce-cart-order-summary-block .wc-block-components-totals-wrapper,
.wp-block-woocommerce-cart-order-summary-coupon-block,
.wp-block-woocommerce-cart-order-summary-subtotal-block,
.wp-block-woocommerce-cart-order-summary-fees-block,
.wp-block-woocommerce-cart-order-summary-shipping-block,
.wp-block-woocommerce-cart-order-summary-taxes-block,
.wp-block-woocommerce-cart-order-summary-totals-block {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
box-shadow: none !important;
}
/* Cart sidebar heading — wit op caramel */
.wc-block-cart__totals-title {
font-family: var(--font-serif) !important;
font-size: 26px !important;
font-weight: 300 !important;
color: #fff !important;
padding-bottom: 16px !important;
margin-bottom: 12px !important;
border-bottom: 1px solid rgba(255,255,255,0.3) !important;
border-radius: 0 !important;
}
/* ── Checkout sidebar — caramel kaart + witte tekst ─────── */
.wc-block-checkout__sidebar {
background: var(--color-sidebar) !important;
border: none !important;
border-radius: 16px !important;
padding: 28px !important;
overflow: hidden !important;
color: #fff !important;
}
.wc-block-checkout__sidebar,
.wc-block-checkout__sidebar * {
color: #fff !important;
}
.wc-block-checkout__sidebar .wc-block-components-order-summary,
.wc-block-checkout__sidebar .wc-block-components-totals-wrapper {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
margin-bottom: 0 !important;
}
/* Lijn na de productlijst */
.wc-block-checkout__sidebar .wc-block-components-order-summary {
padding-bottom: 20px !important;
margin-bottom: 16px !important;
border-bottom: 1px solid rgba(255,255,255,0.3) !important;
}
/* ── Totalen rijen — geen individual borders ─────────────── */
.wc-block-components-totals-item {
font-size: 14px !important;
padding-block: 8px !important;
border: none !important;
border-radius: 0 !important;
}
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value {
font-size: 14px !important;
}
/* Totaal rij — lijn erboven + grotere/vette tekst */
.wc-block-components-totals-item.wc-block-components-totals-total {
border-top: 1px solid rgba(255,255,255,0.3) !important;
padding-top: 14px !important;
margin-top: 8px !important;
}
.wc-block-components-totals-item.wc-block-components-totals-total .wc-block-components-totals-item__label {
font-size: 15px !important;
font-weight: 700 !important;
}
.wc-block-components-totals-item.wc-block-components-totals-total .wc-block-components-totals-item__value {
font-size: 18px !important;
font-weight: 700 !important;
}
/* Coupon tekstveld */
.wc-block-components-totals-coupon details summary {
font-size: 13px !important;
color: var(--color-primary) !important;
cursor: pointer !important;
list-style: none !important;
}
.wc-block-components-totals-coupon__input input {
font-size: 13px !important;
background: transparent !important;
border: none !important;
border-bottom: 1px solid var(--color-border) !important;
border-radius: 0 !important;
padding: 8px 0 !important;
color: var(--color-foreground) !important;
outline: none !important;
width: 100% !important;
}
.wc-block-components-totals-coupon__input input:focus {
border-bottom-color: var(--color-foreground) !important;
}
/* ── Cart "Afrekenen" knop — terracotta, rounded (niet pill) ─ */
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button,
.wc-block-cart__submit-container .wc-block-components-button,
.wc-block-components-button--fill {
font-family: var(--font-body) !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 0.05em !important;
text-transform: none !important;
background-color: var(--color-primary) !important;
color: var(--color-background) !important;
border: none !important;
border-radius: 8px !important;
padding: 14px 24px !important;
width: 100% !important;
cursor: pointer !important;
transition: background 0.2s !important;
box-shadow: none !important;
}
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button:hover,
.wc-block-components-button--fill:hover {
background-color: var(--color-primary-dark) !important;
color: var(--color-background) !important;
}
/* Coupon apply-knop — ghost stijl */
.wc-block-components-totals-coupon .wc-block-components-button {
background: transparent !important;
color: var(--color-foreground) !important;
border: 1px solid var(--color-border) !important;
border-radius: 8px !important;
padding: 8px 18px !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
width: auto !important;
cursor: pointer !important;
}
.wc-block-components-totals-coupon .wc-block-components-button:hover {
background: var(--color-foreground) !important;
color: var(--color-background) !important;
}
/* ── Checkout: stap-containers — geen border-radius ─────── */
.wc-block-components-checkout-step,
.wc-block-checkout__main,
.wc-block-checkout__form {
border-radius: 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* Stap scheider */
.wc-block-components-checkout-step {
padding-bottom: 32px !important;
margin-bottom: 32px !important;
border-bottom: 1px solid var(--color-border) !important;
}
.wc-block-components-checkout-step:last-child {
border-bottom: none !important;
}
/* Stap-titel — uppercase body font zoals in screenshot */
.wc-block-components-checkout-step__title {
font-family: var(--font-body) !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.2em !important;
text-transform: uppercase !important;
color: var(--color-foreground) !important;
margin-bottom: 24px !important;
padding-bottom: 0 !important;
border: none !important;
}
/* Inactieve stap: titeltekst lichter */
.wc-block-components-checkout-step[aria-expanded="false"] .wc-block-components-checkout-step__title,
.wc-block-components-checkout-step:not(.is-active) .wc-block-components-checkout-step__title {
color: var(--color-muted) !important;
}
/* Stap-nummer cirkel — actief: donker */
.wc-block-components-checkout-step__heading-number {
background: var(--color-foreground) !important;
color: var(--color-background) !important;
font-family: var(--font-body) !important;
font-size: 11px !important;
font-weight: 700 !important;
border-radius: 50% !important;
width: 26px !important;
height: 26px !important;
min-width: 26px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
}
/* Inactief stap-nummer: outline stijl */
.wc-block-components-checkout-step[aria-expanded="false"] .wc-block-components-checkout-step__heading-number,
.wc-block-components-checkout-step:not(.is-active) .wc-block-components-checkout-step__heading-number {
background: transparent !important;
color: var(--color-muted) !important;
border: 1.5px solid var(--color-border) !important;
}
/* ── Checkout: formuliervelden — stacked labels, full-border ─
WC block DOM order: dan