en de JS bouwt de slider-flow.
========================================================================= */
.uk-product-slider {
position: relative;
--uk-slider-cols: 4;
--uk-slider-gap: 1.5rem;
}
@media (max-width: 880px) {
.uk-product-slider { --uk-slider-cols: 2; --uk-slider-gap: .8rem; }
}
.uk-product-slider .products,
.uk-product-slider ul.products {
display: grid !important;
grid-template-columns: none !important;
grid-auto-flow: column !important;
grid-auto-columns: calc((100% - (var(--uk-slider-gap) * (var(--uk-slider-cols) - 1))) / var(--uk-slider-cols)) !important;
gap: var(--uk-slider-gap) !important;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding: 0;
scrollbar-width: none;
-ms-overflow-style: none;
padding: 0 0 1rem;
margin: 0;
scroll-behavior: smooth;
}
.uk-product-slider .products::-webkit-scrollbar,
.uk-product-slider ul.products::-webkit-scrollbar { display: none; }
.uk-product-slider .products > li.product {
scroll-snap-align: start;
min-width: 0;
}
/* Slider-header met titel + prev/next nav rechts */
.uk-product-slider__head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 1.5rem;
margin-bottom: 1.8rem;
flex-wrap: wrap;
}
.uk-product-slider__head > div:first-child { flex: 1 1 auto; text-align: left; }
.uk-product-slider__head > div:first-child .uk-section-num {
justify-content: flex-start;
width: auto;
text-align: left;
}
.uk-product-slider__head > div:first-child .uk-section__title,
.uk-product-slider__title { text-align: left; margin-bottom: .5rem; }
.uk-product-slider__head > div:first-child .uk-section__sub { text-align: left; margin-left: 0; }
.uk-product-slider__nav {
display: flex;
gap: .55rem;
flex: 0 0 auto;
}
.uk-product-slider__btn {
width: 48px;
height: 48px;
background: #fff;
border: 1px solid var(--uk-border);
border-radius: 50%;
display: grid;
place-items: center;
cursor: pointer;
color: var(--uk-text);
box-shadow: 0 4px 12px rgba(43,43,43,.08);
padding: 0;
transition: background .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease;
}
.uk-product-slider__btn:hover {
background: var(--uk-magenta);
color: #fff;
border-color: var(--uk-magenta);
}
.uk-product-slider__btn:disabled,
.uk-product-slider__btn[disabled] {
opacity: .3;
cursor: not-allowed;
}
.uk-product-slider__btn:disabled:hover { background: #fff; color: var(--uk-text); border-color: var(--uk-border); }
/* In de slider de polaroid-rotatie afzwakken zodat cards niet visueel
buiten hun scroll-snap punt vallen */
.uk-product-slider .products > li.product { transform: none !important; }
.uk-product-slider .products > li.product:hover { transform: translateY(-4px) !important; }
@media (max-width: 880px) {
.uk-product-slider__head { margin-bottom: 1.2rem; }
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
width: auto !important;
float: none !important;
margin: 0 !important;
clear: none !important;
background: #fff;
border: 1px solid var(--uk-border);
border-radius: 4px;
padding: .75rem .75rem 1.1rem;
box-shadow: 0 4px 14px rgba(43, 43, 43, .08), 0 1px 0 rgba(43,43,43,.04);
transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease;
position: relative;
}
.woocommerce ul.products li.product:nth-child(4n+1) { transform: rotate(-0.6deg); }
.woocommerce ul.products li.product:nth-child(4n+2) { transform: rotate(0.8deg); }
.woocommerce ul.products li.product:nth-child(4n+3) { transform: rotate(-1.1deg); }
.woocommerce ul.products li.product:nth-child(4n+4) { transform: rotate(0.4deg); }
.woocommerce ul.products li.product:hover {
transform: rotate(0deg) translateY(-6px);
box-shadow: 0 16px 32px rgba(43, 43, 43, .15);
z-index: 2;
}
.woocommerce ul.products li.product img {
border-radius: 2px;
background: var(--uk-bg-cream);
}
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-family: var(--uk-font-display);
font-weight: 700;
font-size: 1.15rem;
color: var(--uk-text);
margin-top: .9rem;
padding: 0 .15rem;
line-height: 1.25;
}
.woocommerce ul.products li.product .price {
color: var(--uk-magenta-dark);
font-weight: 700;
font-family: var(--uk-font-display);
font-size: 1.05rem;
padding: 0 .15rem;
display: block;
margin-top: .25rem;
}
.woocommerce ul.products li.product .price del {
opacity: .5;
font-size: .9em;
margin-right: .35em;
color: var(--uk-text-muted);
}
.woocommerce ul.products li.product .price ins {
background: transparent;
text-decoration: none;
}
/* Sale-badge as round sticker */
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
background: var(--uk-magenta);
color: #fff;
font-family: var(--uk-font-script);
font-weight: 700;
font-size: 1.05rem;
padding: 0;
width: 56px;
height: 56px;
min-width: 56px;
min-height: 56px;
line-height: 56px;
border-radius: 50%;
display: grid;
place-items: center;
text-align: center;
box-shadow: 0 4px 10px rgba(230, 0, 126, .35);
transform: rotate(-10deg);
border: 2px dashed rgba(255,255,255,.6);
top: -10px;
right: -10px;
position: absolute;
z-index: 3;
}
.woocommerce ul.products li.product .button {
margin-top: .8rem;
font-size: .9rem;
}
/* NEW-badge — voor producten die nieuw zijn (< 21 dagen oud) */
.uk-badge-new {
position: absolute;
top: 12px;
left: 12px;
background: var(--uk-lime-dark);
color: #fff;
padding: .35em .85em;
border-radius: 999px;
font-family: var(--uk-font-heading);
font-weight: 700;
font-size: .7rem;
letter-spacing: .12em;
z-index: 3;
box-shadow: 0 4px 10px rgba(149, 193, 31, .35);
text-transform: uppercase;
}
/* =========================================================================
11. Categorie-overzicht
========================================================================= */
.woocommerce ul.products li.product-category h2,
.woocommerce ul.products li.product-category h3 {
color: var(--uk-text);
}
.woocommerce ul.products li.product-category mark.count {
background: var(--uk-cyan-soft);
color: var(--uk-cyan-dark);
}
/* =========================================================================
12. Footer
========================================================================= */
.site-footer {
background: var(--uk-bg-soft);
color: var(--uk-text-soft);
border-top: 1px solid var(--uk-border);
}
.site-footer a {
color: var(--uk-text);
}
.site-footer a:hover {
color: var(--uk-magenta);
}
.uk-footer-credit {
text-align: center;
font-size: .9rem;
padding: 1.5rem 0 0;
border-top: 1px solid var(--uk-border);
margin-top: 1.5rem;
}
.uk-footer-credit p { margin: .35em 0; }
.uk-footer-credit__meta {
color: var(--uk-text-muted);
font-size: .85rem;
}
/* =========================================================================
13. Cookie-notice (overschrijven Hu-manity defaults naar brand)
========================================================================= */
#cookie-notice .cn-button.cn-button-custom,
#cookie-notice .cn-button.bootstrap {
background: var(--uk-magenta) !important;
color: #fff !important;
border-radius: var(--uk-radius-pill);
}
/* =========================================================================
13b. Homepage + content secties (Fase 4)
========================================================================= */
.uk-eyebrow {
font-family: var(--uk-font-heading);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .22em;
font-size: .78rem;
color: var(--uk-cyan-dark);
margin: 0 0 1rem;
display: inline-flex;
align-items: center;
gap: .6rem;
}
.uk-eyebrow::before,
.uk-section-num::before {
content: "";
display: inline-block;
width: 24px;
height: 2px;
background: var(--uk-cyan);
}
.uk-section-num {
font-family: var(--uk-font-display);
font-weight: 700;
font-size: 1.05rem;
color: var(--uk-magenta);
letter-spacing: .15em;
text-transform: uppercase;
margin: 0 0 .8rem;
text-align: center;
display: inline-flex;
align-items: center;
gap: .6rem;
justify-content: center;
width: 100%;
}
.uk-section-num::before {
background: var(--uk-magenta);
}
.uk-section-num::after {
content: "";
display: inline-block;
width: 24px;
height: 2px;
background: var(--uk-magenta);
}
.uk-script {
font-family: var(--uk-font-script);
font-weight: 700;
color: var(--uk-magenta);
}
.uk-hero h1 .brand-cyan { color: var(--uk-cyan); }
.uk-hero h1 .brand-lime { color: var(--uk-lime-dark); }
.uk-hero h1 .brand-magenta { color: var(--uk-magenta); }
/* Hero/about CTA's: links uitlijnen met de content */
.uk-hero__cta {
display: flex;
gap: .75rem 1.25rem;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
margin: 1.5rem 0 0;
text-align: left;
}
@media (max-width: 560px) {
.uk-hero__cta { gap: .65rem 1rem; }
.uk-hero__cta .button.alt,
.uk-hero__cta .button { width: auto; }
}
.uk-section {
padding: clamp(3.5rem, 8vw, 6.5rem) 1.25rem;
position: relative;
}
.uk-section--soft {
background: var(--uk-bg-cream);
}
.uk-section--warm {
background: linear-gradient(180deg, transparent 0%, var(--uk-magenta-soft) 100%);
}
.uk-section__inner {
max-width: 1100px;
margin: 0 auto;
}
.uk-section__title {
font-family: var(--uk-font-display);
font-weight: 700;
font-size: clamp(1.9rem, 4vw, 3rem);
letter-spacing: -0.02em;
line-height: 1.05;
text-align: center;
margin: 0 0 2.5rem;
color: var(--uk-text);
}
.uk-section__title .uk-script {
font-size: 1.15em;
display: inline-block;
transform: rotate(-3deg) translateY(-0.05em);
}
.uk-usp-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.8rem;
}
.uk-usp-card {
background: #fff;
border: 1px solid var(--uk-border);
border-radius: 4px;
padding: 2rem 1.75rem 1.75rem;
box-shadow: 0 4px 14px rgba(43, 43, 43, .07);
position: relative;
transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease;
}
.uk-usp-card:nth-child(3n+1) { transform: rotate(-0.5deg); }
.uk-usp-card:nth-child(3n+2) { transform: rotate(0.4deg); }
.uk-usp-card:nth-child(3n+3) { transform: rotate(-0.3deg); }
.uk-usp-card:hover {
transform: rotate(0deg) translateY(-4px);
box-shadow: 0 16px 32px rgba(43, 43, 43, .12);
}
.uk-usp-card__num {
font-family: var(--uk-font-display);
font-weight: 700;
font-size: 2.4rem;
color: var(--uk-magenta-soft);
line-height: .8;
display: block;
margin-bottom: .35rem;
letter-spacing: -0.02em;
}
.uk-usp-card h3 {
font-family: var(--uk-font-display);
font-weight: 700;
font-size: 1.35rem;
color: var(--uk-text);
margin: 0 0 .6em;
letter-spacing: -0.01em;
line-height: 1.2;
}
.uk-usp-card h3 .uk-script {
color: var(--uk-magenta);
font-size: 1.2em;
display: inline-block;
transform: rotate(-2deg);
}
.uk-usp-card p {
margin: 0;
color: var(--uk-text-soft);
line-height: 1.6;
}
.uk-usp-card::before {
content: "";
position: absolute;
top: -10px;
left: 22px;
width: 38px;
height: 18px;
background: linear-gradient(180deg, rgba(230, 0, 126, .35) 0%, rgba(230, 0, 126, .15) 100%);
transform: rotate(-4deg);
border-radius: 2px;
pointer-events: none;
}
.uk-reviews-grid,
.uk-postcards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem 1.5rem;
padding-top: 1rem;
}
.uk-review,
.uk-postcard {
background: #fff;
border: 1px solid var(--uk-border);
border-radius: 3px;
padding: 1.6rem 1.5rem 1.4rem;
margin: 0;
box-shadow: 0 8px 20px rgba(43, 43, 43, .08);
position: relative;
transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease;
}
.uk-postcard::before {
content: "";
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%) rotate(-3deg);
width: 70px;
height: 22px;
background: linear-gradient(180deg, rgba(0, 174, 239, .35) 0%, rgba(0, 174, 239, .18) 100%);
border: 1px solid rgba(0, 174, 239, .45);
border-radius: 2px;
pointer-events: none;
}
.uk-postcard:nth-child(6n+1) { transform: rotate(-1.4deg); }
.uk-postcard:nth-child(6n+2) { transform: rotate(0.8deg); }
.uk-postcard:nth-child(6n+3) { transform: rotate(-0.6deg); }
.uk-postcard:nth-child(6n+4) { transform: rotate(1.2deg); }
.uk-postcard:nth-child(6n+5) { transform: rotate(-1deg); }
.uk-postcard:nth-child(6n+6) { transform: rotate(0.5deg); }
.uk-postcard:hover {
transform: rotate(0deg) translateY(-4px);
box-shadow: 0 18px 38px rgba(43, 43, 43, .15);
}
.uk-postcard__quote {
font-family: var(--uk-font-display);
font-style: italic;
font-size: 1.1rem;
line-height: 1.55;
color: var(--uk-text);
margin: 0 0 .85em;
}
.uk-postcard__quote::before {
content: "\201C";
font-family: var(--uk-font-display);
font-size: 3rem;
color: var(--uk-magenta);
line-height: 0;
vertical-align: -0.4em;
margin-right: .12em;
}
.uk-postcard__author {
font-family: var(--uk-font-script);
font-weight: 700;
font-style: normal;
color: var(--uk-magenta-dark);
font-size: 1.5rem;
display: block;
text-align: right;
line-height: 1;
}
.uk-over-teaser {
background:
radial-gradient(ellipse at 80% 20%, rgba(149, 193, 31, 0.22) 0%, transparent 55%),
radial-gradient(ellipse at 10% 80%, rgba(0, 174, 239, 0.12) 0%, transparent 55%),
linear-gradient(180deg, #fff 0%, var(--uk-lime-soft) 100%);
text-align: center;
position: relative;
}
.uk-over-teaser__signature {
font-family: var(--uk-font-script);
font-weight: 700;
color: var(--uk-magenta);
font-size: 2.2rem;
display: block;
margin-top: 1rem;
transform: rotate(-4deg);
line-height: 1;
}
.uk-over-teaser p {
max-width: 60ch;
margin: 0 auto 1em;
font-size: 1.1rem;
color: var(--uk-text);
line-height: 1.65;
}
.uk-over-teaser p em {
font-family: var(--uk-font-script);
font-style: normal;
font-weight: 700;
color: var(--uk-magenta-dark);
font-size: 1.25em;
}
.uk-cta-strip {
background:
radial-gradient(ellipse at 80% 30%, rgba(255,255,255,.2) 0%, transparent 60%),
linear-gradient(135deg, var(--uk-cyan) 0%, var(--uk-cyan-dark) 100%);
color: #fff;
text-align: center;
position: relative;
overflow: hidden;
}
.uk-cta-strip::after {
content: "";
position: absolute;
right: -50px;
top: 50%;
width: 180px;
height: 180px;
border: 2px dashed rgba(255,255,255,.28);
border-radius: 50%;
transform: translateY(-50%) rotate(15deg);
pointer-events: none;
}
.uk-cta-strip .uk-section__title,
.uk-cta-strip .lead {
color: #fff;
}
.uk-cta-strip .uk-section-num {
color: #fff;
}
.uk-cta-strip .uk-section-num::before,
.uk-cta-strip .uk-section-num::after {
background: rgba(255,255,255,.7);
}
.uk-cta-strip .uk-section__title .uk-script { color: #FFF1E6; }
.uk-cta-strip .lead {
max-width: 56ch;
margin: 0 auto 1.5em;
opacity: .95;
font-size: 1.1rem;
}
.uk-cta-strip .button.alt {
background: #fff;
color: var(--uk-magenta);
}
.uk-cta-strip .button.alt:hover {
background: var(--uk-magenta);
color: #fff;
}
/* Prose container voor content-pagina's (Over ons, FAQ, AV, Privacy, etc.) */
.uk-prose {
max-width: 720px;
margin: 2.5rem auto;
padding: 0 1.25rem;
}
.uk-prose h2 { margin-top: 2em; }
.uk-prose h3 { margin-top: 1.6em; }
.uk-prose p,
.uk-prose ul,
.uk-prose ol { font-size: 1.05rem; line-height: 1.75; }
.uk-prose ul,
.uk-prose ol { padding-left: 1.5em; }
.uk-prose .lead {
font-size: 1.2rem;
color: var(--uk-text-soft);
border-left: 3px solid var(--uk-magenta);
padding-left: 1rem;
font-style: italic;
}
/* FAQ accordeon (native
/) */
.uk-faq__item {
background: #fff;
border: 1px solid var(--uk-border);
border-radius: var(--uk-radius-md);
padding: 0;
margin: 0 0 1rem;
box-shadow: var(--uk-shadow-sm);
overflow: hidden;
}
.uk-faq__item summary {
cursor: pointer;
padding: 1rem 1.25rem;
list-style: none;
position: relative;
}
.uk-faq__item summary::-webkit-details-marker { display: none; }
.uk-faq__item summary::after {
content: "+";
position: absolute;
right: 1.25rem;
top: 50%;
transform: translateY(-50%);
font-family: var(--uk-font-heading);
font-weight: 700;
color: var(--uk-magenta);
font-size: 1.4rem;
transition: transform .2s ease;
}
.uk-faq__item[open] summary::after {
content: "−";
}
.uk-faq__item summary h2 {
display: inline;
margin: 0;
font-size: 1.05rem;
color: var(--uk-text);
}
.uk-faq__item summary:hover h2 {
color: var(--uk-magenta);
}
.uk-faq__item > p,
.uk-faq__item details > p {
padding: 0 1.25rem 1.25rem;
margin: 0;
color: var(--uk-text-soft);
}
/* Disclaimer-blokje (Werkversie van AV/Privacy) */
.uk-note {
background: var(--uk-magenta-soft);
border-left: 4px solid var(--uk-magenta);
padding: .85rem 1.1rem;
border-radius: var(--uk-radius-sm);
color: var(--uk-text);
}
/* Contactlijst */
.uk-contact-list {
list-style: none;
padding: 0;
margin: 0 0 2em;
}
.uk-contact-list li {
padding: .5em 0;
border-bottom: 1px solid var(--uk-border);
}
/* =========================================================================
13c. Personalisatie-widget op productpagina (etuis)
========================================================================= */
.uk-pers {
background: linear-gradient(180deg, #fff 0%, var(--uk-magenta-soft) 100%);
border: 1px solid var(--uk-magenta);
border-radius: var(--uk-radius-md);
padding: 1.25rem 1.5rem;
margin: 1.5rem 0;
}
.uk-pers__title {
margin: 0 0 .25em;
font-size: 1.15rem;
color: var(--uk-magenta);
}
.uk-pers__intro {
margin: 0 0 1em;
color: var(--uk-text-soft);
font-size: .95rem;
}
.uk-pers__row {
margin: 0 0 1em;
}
.uk-pers__row label,
.uk-pers__row legend {
display: block;
font-weight: 600;
font-family: var(--uk-font-heading);
margin-bottom: .35em;
color: var(--uk-text);
}
.uk-pers__row input[type="text"] {
width: 100%;
max-width: 360px;
}
.uk-pers__counter {
display: block;
margin-top: .35em;
font-size: .8rem;
color: var(--uk-text-muted);
}
.uk-pers__colors {
border: 0;
padding: 0;
}
.uk-pers__swatch {
display: inline-flex;
align-items: center;
gap: .35rem;
background: #fff;
border: 1px solid var(--uk-border);
padding: .35rem .7rem .35rem .45rem;
border-radius: var(--uk-radius-pill);
cursor: pointer;
margin: 0 .4rem .4rem 0;
font-size: .85rem;
font-family: var(--uk-font-heading);
transition: border-color .15s ease, transform .1s ease;
}
.uk-pers__swatch:hover {
border-color: var(--uk-magenta);
transform: translateY(-1px);
}
.uk-pers__swatch input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.uk-pers__swatch input[type="radio"]:checked + .uk-pers__swatch-dot {
box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--uk-magenta);
}
.uk-pers__swatch:has(input[type="radio"]:checked) {
border-color: var(--uk-magenta);
background: var(--uk-magenta-soft);
}
.uk-pers__swatch-dot {
width: 18px;
height: 18px;
border-radius: 50%;
display: inline-block;
border: 1px solid rgba(0,0,0,.1);
}
/* =========================================================================
15. Content-box (boxed inside full-width sections)
========================================================================= */
.uk-content-box {
max-width: 1240px;
margin: 0 auto;
padding: 0 1.5rem;
width: 100%;
}
.uk-no-scroll { overflow: hidden; }
/* =========================================================================
16. Topbar (announcement strip)
========================================================================= */
.uk-topbar {
background: var(--uk-text);
color: #fff;
font-family: var(--uk-font-heading);
font-size: .8rem;
font-weight: 600;
letter-spacing: .02em;
}
.uk-topbar__inner {
max-width: 1240px;
margin: 0 auto;
padding: .5rem 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.uk-topbar__msg strong { color: var(--uk-lime); }
.uk-topbar__meta {
display: inline-flex;
gap: .5rem;
align-items: center;
color: rgba(255,255,255,.7);
}
.uk-topbar__meta a {
color: rgba(255,255,255,.85);
border-bottom: 1px solid transparent;
}
.uk-topbar__meta a:hover { color: #fff; border-bottom-color: rgba(255,255,255,.5); }
@media (max-width: 768px) {
.uk-topbar__meta { display: none; }
.uk-topbar__inner { justify-content: center; padding: .5rem .9rem; }
.uk-topbar { font-size: .72rem; }
}
/* =========================================================================
17. Header (main) — sticky op alle devices
========================================================================= */
.uk-header {
background: var(--uk-bg);
border-bottom: 1px solid var(--uk-border);
position: sticky;
top: 0;
z-index: 60;
box-shadow: 0 2px 8px rgba(43, 43, 43, .04);
transition: box-shadow .2s ease;
}
/* Iets sterkere schaduw als er onder de header content staat (scroll-feedback) */
.uk-header.is-scrolled {
box-shadow: 0 4px 14px rgba(43, 43, 43, .08);
}
.uk-header__inner {
max-width: 1240px;
margin: 0 auto;
padding: 1.1rem 1.5rem;
display: grid;
grid-template-columns: auto auto 1fr auto;
gap: 1.5rem;
align-items: center;
}
@media (min-width: 1025px) {
.uk-header__inner {
grid-template-columns: auto 1fr auto;
}
.uk-header__hamburger { display: none; }
}
.uk-header__brand {
display: flex;
align-items: center;
}
.uk-header__logo-link {
display: inline-flex;
align-items: center;
}
.uk-header__logo {
max-height: 60px;
width: auto;
height: auto;
}
@media (max-width: 768px) {
.uk-header__logo { max-height: 44px; }
.uk-header__inner { padding: .85rem 1rem; gap: .8rem; }
}
/* Hamburger */
.uk-header__hamburger {
width: 44px;
height: 44px;
background: transparent;
border: 0;
cursor: pointer;
padding: 0;
box-shadow: none;
display: flex;
flex-direction: column;
gap: 5px;
justify-content: center;
align-items: center;
border-radius: 50%;
}
.uk-header__hamburger:hover { background: var(--uk-bg-cream); }
.uk-header__hamburger span {
display: block;
width: 22px;
height: 2px;
background: var(--uk-text);
border-radius: 2px;
transition: transform .2s ease;
}
@media (min-width: 1025px) {
.uk-header__hamburger { display: none; }
}
/* Hoofdmenu / mega-menu */
.uk-header__nav { display: none; }
@media (min-width: 1025px) {
.uk-header__nav { display: block; }
}
.uk-megamenu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 0;
justify-content: center;
}
.uk-megamenu__item {
position: relative;
}
.uk-megamenu__link {
display: inline-flex;
align-items: center;
gap: .3rem;
padding: 1.1rem 1rem;
font-family: var(--uk-font-heading);
font-weight: 600;
color: var(--uk-text);
font-size: .95rem;
letter-spacing: .01em;
border-bottom: 2px solid transparent;
transition: color .15s ease, border-color .15s ease;
}
.uk-megamenu__link:hover,
.uk-megamenu__item.is-open .uk-megamenu__link {
color: var(--uk-magenta);
border-bottom-color: var(--uk-magenta);
}
.uk-megamenu__caret { font-size: .7rem; }
.uk-megamenu__dropdown {
position: absolute;
left: 50%;
transform: translateX(-50%) translateY(8px);
top: 100%;
min-width: 540px;
background: #fff;
border: 1px solid var(--uk-border);
box-shadow: 0 24px 60px rgba(43, 43, 43, .15);
border-radius: 6px;
padding: 1.5rem;
opacity: 0;
visibility: hidden;
transition: opacity .2s ease, transform .2s ease, visibility .2s;
z-index: 100;
}
.uk-megamenu__item.is-open .uk-megamenu__dropdown,
.uk-megamenu__item:hover .uk-megamenu__dropdown,
.uk-megamenu__item:focus-within .uk-megamenu__dropdown {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.uk-megamenu__inner {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 2rem;
}
.uk-megamenu__col--feat { border-left: 1px dashed var(--uk-border); padding-left: 1.5rem; }
.uk-megamenu__heading {
font-family: var(--uk-font-heading);
font-weight: 700;
font-size: .72rem;
text-transform: uppercase;
letter-spacing: .2em;
color: var(--uk-text-muted);
margin: 0 0 .9rem;
}
.uk-megamenu__sublist {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: .3rem;
}
.uk-megamenu__sublist a {
color: var(--uk-text);
font-family: var(--uk-font-body);
font-size: .95rem;
padding: .25rem 0;
display: inline-block;
}
.uk-megamenu__sublist a:hover { color: var(--uk-magenta); }
.uk-megamenu__all { margin-top: .5rem; }
.uk-megamenu__all a { color: var(--uk-magenta); }
.uk-megamenu__products { display: flex; flex-direction: column; gap: .9rem; }
.uk-mm-product {
display: grid;
grid-template-columns: 64px 1fr;
gap: .85rem;
align-items: center;
color: var(--uk-text);
}
.uk-mm-product__img {
border-radius: 4px;
background: var(--uk-bg-cream);
aspect-ratio: 1 / 1;
object-fit: cover;
}
.uk-mm-product__name {
font-family: var(--uk-font-display);
font-weight: 600;
font-size: .95rem;
display: block;
line-height: 1.2;
}
.uk-mm-product__price {
color: var(--uk-magenta-dark);
font-family: var(--uk-font-heading);
font-weight: 700;
font-size: .85rem;
}
.uk-mm-product:hover .uk-mm-product__name { color: var(--uk-magenta); }
/* Header icons */
.uk-header__icons {
display: flex;
gap: .3rem;
align-items: center;
}
.uk-icon-btn {
width: 44px;
height: 44px;
display: grid;
place-items: center;
background: transparent;
border: 0;
cursor: pointer;
border-radius: 50%;
color: var(--uk-text);
position: relative;
box-shadow: none;
}
.uk-icon-btn:hover { background: var(--uk-bg-cream); color: var(--uk-magenta); }
.uk-cart-count {
position: absolute;
top: 4px;
right: 4px;
min-width: 18px;
height: 18px;
background: var(--uk-magenta);
color: #fff;
border-radius: 999px;
font-size: .68rem;
font-weight: 700;
font-family: var(--uk-font-heading);
display: grid;
place-items: center;
padding: 0 4px;
border: 2px solid #fff;
box-sizing: content-box;
opacity: 0;
transform: scale(.6);
transition: opacity .15s ease, transform .15s ease;
}
.uk-cart-count.is-active { opacity: 1; transform: scale(1); }
@media (max-width: 1024px) { .uk-hide-mobile { display: none !important; } }
/* Search overlay */
.uk-search-overlay {
position: absolute;
left: 0;
right: 0;
top: 100%;
background: #fff;
border-bottom: 1px solid var(--uk-border);
padding: 1.5rem;
box-shadow: 0 16px 40px rgba(43,43,43,.08);
z-index: 49;
}
.uk-search-form {
max-width: 720px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr auto auto;
gap: .5rem;
align-items: center;
}
.uk-search-form input[type=search] {
border: 0;
border-bottom: 2px solid var(--uk-border);
border-radius: 0;
padding: .8rem 0;
font-size: 1.15rem;
background: transparent;
font-family: var(--uk-font-display);
}
.uk-search-form input[type=search]:focus {
outline: 0;
border-bottom-color: var(--uk-magenta);
box-shadow: none;
}
.uk-search-form__submit,
.uk-search-form__close {
background: transparent;
border: 0;
box-shadow: none;
font-size: 1.4rem;
color: var(--uk-text);
padding: 0;
width: 44px;
height: 44px;
cursor: pointer;
}
.uk-search-form__submit { color: var(--uk-magenta); }
.uk-search-form__close { font-size: 1.8rem; line-height: 1; }
.uk-search-form__close:hover, .uk-search-form__submit:hover { color: var(--uk-magenta-dark); }
/* =========================================================================
18. Mobile drawer
========================================================================= */
.uk-drawer {
position: fixed;
inset: 0;
z-index: 200;
pointer-events: none;
}
.uk-drawer.is-open { pointer-events: auto; }
.uk-drawer__overlay {
position: absolute;
inset: 0;
background: rgba(43, 43, 43, 0);
transition: background .25s ease;
}
.uk-drawer.is-open .uk-drawer__overlay { background: rgba(43, 43, 43, .55); }
.uk-drawer__panel {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: min(360px, 88vw);
background: var(--uk-bg);
box-shadow: 24px 0 60px rgba(43, 43, 43, .25);
padding: 1.5rem 1.5rem 2rem;
transform: translateX(-100%);
transition: transform .3s cubic-bezier(.2,.7,.2,1);
overflow-y: auto;
display: flex;
flex-direction: column;
}
.uk-drawer.is-open .uk-drawer__panel { transform: translateX(0); }
.uk-drawer__close {
position: absolute;
top: 1rem;
right: 1rem;
width: 44px;
height: 44px;
background: transparent;
border: 0;
box-shadow: none;
font-size: 2rem;
line-height: 1;
cursor: pointer;
color: var(--uk-text);
padding: 0;
}
.uk-drawer__logo-link { display: inline-block; margin-bottom: 1.5rem; }
.uk-drawer__logo { max-height: 50px; width: auto; }
.uk-drawer__list {
list-style: none;
padding: 0;
margin: 0 0 2rem;
border-top: 1px dashed var(--uk-border);
}
.uk-drawer__list li {
border-bottom: 1px dashed var(--uk-border);
}
.uk-drawer__list a {
display: block;
padding: .9rem 0;
font-family: var(--uk-font-display);
font-size: 1.05rem;
font-weight: 600;
color: var(--uk-text);
}
.uk-drawer__list a:hover { color: var(--uk-magenta); }
.uk-drawer__contact {
margin-top: auto;
padding-top: 1.5rem;
border-top: 1px dashed var(--uk-border);
}
.uk-drawer__contact-heading {
font-family: var(--uk-font-heading);
font-weight: 700;
font-size: .72rem;
text-transform: uppercase;
letter-spacing: .2em;
color: var(--uk-text-muted);
margin: 0 0 .5rem;
}
.uk-drawer__contact a {
display: block;
font-family: var(--uk-font-heading);
font-weight: 600;
color: var(--uk-text);
padding: .2rem 0;
}
.uk-drawer__kvk { margin: .5rem 0 0; color: var(--uk-text-muted); font-size: .85rem; }
/* =========================================================================
19. Homepage — full-width sections + boxed content
========================================================================= */
.uk-home > .uk-section { padding-left: 0; padding-right: 0; }
.uk-section__sub {
max-width: 56ch;
margin: 1rem auto 0;
color: var(--uk-text-soft);
text-align: center;
font-size: 1.05rem;
}
.uk-section__cta { text-align: center; margin-top: 2.5rem; }
.uk-section-head { margin-bottom: 2.5rem; text-align: center; }
.uk-section-num--light { color: rgba(255,255,255,.9); }
.uk-section-num--light::before,
.uk-section-num--light::after { background: rgba(255,255,255,.6); }
/* Hero — visual placement */
.uk-hero__copy { max-width: 38rem; }
.uk-hero__visual {
position: relative;
width: 100%;
display: grid;
place-items: center;
min-height: 240px;
}
.uk-hero__sparkle {
position: absolute;
width: 22px;
height: 22px;
opacity: .55;
}
.uk-hero__sparkle--1 { top: 8%; right: 12%; width: 28px; height: 28px; }
.uk-hero__sparkle--2 { bottom: 14%; left: 6%; width: 18px; height: 18px; }
.uk-hero__sparkle--3 { top: 60%; right: 4%; width: 24px; height: 24px; }
/* =========================================================================
20. Categorie-tegels (homepage)
========================================================================= */
.uk-tiles-section { background: var(--uk-bg-cream); border-block: 1px dashed var(--uk-border); }
.uk-tiles {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.5rem;
}
.uk-tile {
display: flex;
flex-direction: column;
justify-content: space-between;
background: #fff;
border: 1px solid var(--uk-border);
border-radius: 6px;
padding: 2rem 1.75rem;
aspect-ratio: 1 / 1.05;
color: var(--uk-text);
position: relative;
overflow: hidden;
box-shadow: 0 6px 18px rgba(43,43,43,.08);
transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease;
container-type: inline-size;
}
@media (max-width: 880px) {
.uk-tile { padding: 1.1rem 1.1rem 1.2rem; }
}
.uk-tile::before {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 80px;
background-repeat: no-repeat;
background-position: right -20px top -20px;
pointer-events: none;
}
.uk-tile:hover { transform: translateY(-6px); box-shadow: 0 18px 38px rgba(43,43,43,.15); }
.uk-tile__sub {
font-family: var(--uk-font-heading);
font-weight: 700;
font-size: clamp(.62rem, 4.5cqi, .8rem);
text-transform: uppercase;
letter-spacing: .22em;
}
/* font-size schaalt met card-breedte (container query) zodat tile-naam
altijd op 1 regel past en geen midden-doorbraak krijgt */
.uk-tile__name {
font-family: var(--uk-font-display);
font-weight: 700;
font-size: clamp(1rem, 9cqi, 1.9rem);
line-height: 1.1;
letter-spacing: -0.01em;
margin: 1rem 0;
display: block;
overflow-wrap: normal;
word-break: normal;
hyphens: manual;
}
.uk-tile__cta {
font-family: var(--uk-font-heading);
font-weight: 600;
font-size: clamp(.78rem, 5cqi, .95rem);
border-bottom: 2px solid currentColor;
padding-bottom: 2px;
align-self: flex-start;
}
/* Tile-varianten */
.uk-tile--magenta { background: var(--uk-magenta-soft); border-color: rgba(230,0,126,.25); }
.uk-tile--magenta .uk-tile__sub { color: var(--uk-magenta-dark); }
.uk-tile--magenta:hover { background: var(--uk-magenta); color: #fff; }
.uk-tile--magenta:hover .uk-tile__sub { color: rgba(255,255,255,.8); }
.uk-tile--cyan { background: var(--uk-cyan-soft); border-color: rgba(0,174,239,.25); }
.uk-tile--cyan .uk-tile__sub { color: var(--uk-cyan-dark); }
.uk-tile--cyan:hover { background: var(--uk-cyan); color: #fff; }
.uk-tile--cyan:hover .uk-tile__sub { color: rgba(255,255,255,.85); }
.uk-tile--lime { background: var(--uk-lime-soft); border-color: rgba(149,193,31,.25); }
.uk-tile--lime .uk-tile__sub { color: var(--uk-lime-dark); }
.uk-tile--lime:hover { background: var(--uk-lime-dark); color: #fff; }
.uk-tile--lime:hover .uk-tile__sub { color: rgba(255,255,255,.85); }
.uk-tile--cream { background: var(--uk-bg-cream); border-color: var(--uk-border-strong); }
.uk-tile--cream .uk-tile__sub { color: var(--uk-text-muted); }
.uk-tile--cream:hover { background: var(--uk-text); color: #fff; }
.uk-tile--cream:hover .uk-tile__sub { color: rgba(255,255,255,.8); }
/* =========================================================================
21. About section (homepage split)
========================================================================= */
.uk-about-section { background: linear-gradient(180deg, var(--uk-bg-warm) 0%, var(--uk-lime-soft) 100%); }
.uk-about-section__grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 3rem;
align-items: center;
}
@media (max-width: 880px) {
.uk-about-section__grid { grid-template-columns: 1fr; }
}
.uk-about-section__visual { position: relative; padding: 1rem; }
.uk-about-section__doodle {
position: absolute;
bottom: -20px;
right: -10px;
width: 140px;
height: 140px;
opacity: .35;
}
.uk-photo-frame {
background: #fff;
padding: 1rem 1rem 3.5rem;
box-shadow: 0 12px 30px rgba(43,43,43,.15);
display: inline-block;
max-width: 340px;
position: relative;
}
.uk-photo-frame--rotate-l { transform: rotate(-3deg); }
.uk-photo-frame::before {
content: "";
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%) rotate(-2deg);
width: 90px;
height: 22px;
background: linear-gradient(180deg, rgba(0,174,239,.4) 0%, rgba(0,174,239,.18) 100%);
border: 1px solid rgba(0,174,239,.4);
}
.uk-photo-frame__placeholder {
aspect-ratio: 4 / 5;
background: linear-gradient(180deg, var(--uk-magenta-soft) 0%, var(--uk-lime-soft) 100%);
display: grid;
place-items: center;
color: var(--uk-magenta);
font-family: var(--uk-font-script);
font-size: 1.6rem;
text-align: center;
line-height: 1.2;
}
.uk-photo-frame__caption {
position: absolute;
bottom: 1rem;
left: 0;
right: 0;
text-align: center;
font-family: var(--uk-font-script);
color: var(--uk-magenta-dark);
font-size: 1.2rem;
}
.uk-about-section__copy .uk-section-num { text-align: left; justify-content: flex-start; width: auto; }
.uk-about-section__copy .uk-section__title { text-align: left; }
.uk-prose__lead {
font-size: 1.2rem;
line-height: 1.55;
color: var(--uk-text);
margin: 0 0 1rem;
}
.uk-signature {
font-family: var(--uk-font-script);
font-weight: 700;
color: var(--uk-magenta);
font-size: 2rem;
transform: rotate(-3deg);
display: inline-block;
line-height: 1;
margin-top: .5rem;
}
/* =========================================================================
22. USP-section + reviews-section (homepage)
========================================================================= */
.uk-usp-section { background: var(--uk-bg-warm); }
.uk-reviews-section { background: var(--uk-bg-cream); border-block: 1px dashed var(--uk-border); }
.uk-products-section { background: var(--uk-bg-warm); }
.uk-sale-section {
background: linear-gradient(180deg, var(--uk-magenta-soft) 0%, #FFE4D6 100%);
border-block: 1px dashed var(--uk-magenta);
position: relative;
}
.uk-sale-section::before {
content: "";
position: absolute;
top: 30px;
right: 40px;
width: 90px;
height: 90px;
border: 2px dashed var(--uk-magenta);
border-radius: 50%;
opacity: .35;
pointer-events: none;
}
/* =========================================================================
23. Final CTA section — full magenta strip
========================================================================= */
.uk-final-cta {
background:
radial-gradient(ellipse at 12% 18%, rgba(255,255,255,.18) 0%, transparent 50%),
linear-gradient(135deg, var(--uk-magenta) 0%, var(--uk-magenta-dark) 100%);
color: #fff;
text-align: center;
position: relative;
overflow: hidden;
}
.uk-final-cta::before {
content: "";
position: absolute;
bottom: -60px;
right: -60px;
width: 240px;
height: 240px;
border: 2px dashed rgba(255,255,255,.25);
border-radius: 50%;
pointer-events: none;
}
.uk-final-cta::after {
content: "";
position: absolute;
top: -40px;
left: -40px;
width: 160px;
height: 160px;
border: 2px dashed rgba(255,255,255,.18);
border-radius: 50%;
pointer-events: none;
}
.uk-final-cta .uk-section__title { color: #fff; }
.uk-final-cta .uk-section__title .uk-script { color: #FFE5F0; }
.uk-final-cta .uk-section__sub { color: rgba(255,255,255,.92); }
.uk-final-cta .button.alt {
background: #fff;
color: var(--uk-magenta);
}
.uk-final-cta .button.alt:hover {
background: var(--uk-text);
color: #fff;
}
.uk-text-link--light { color: #fff; border-bottom-color: rgba(255,255,255,.5); }
.uk-text-link--light:hover { color: #fff; border-bottom-color: #fff; }
.uk-final-cta__buttons { display: inline-flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; justify-content: center; }
/* =========================================================================
24. Archive page (Winkel + product_cat)
========================================================================= */
.uk-archive-hero {
background: linear-gradient(180deg, var(--uk-bg-cream) 0%, var(--uk-bg-warm) 100%);
padding: clamp(2.5rem, 6vw, 4rem) 0;
border-bottom: 1px dashed var(--uk-border);
}
.uk-archive-hero .uk-breadcrumbs {
font-family: var(--uk-font-heading);
font-size: .85rem;
color: var(--uk-text-muted);
margin-bottom: 1rem;
}
.uk-archive-hero .uk-breadcrumbs a { color: var(--uk-text-soft); }
.uk-archive-hero .uk-breadcrumbs a:hover { color: var(--uk-magenta); }
.uk-archive-hero .uk-breadcrumbs span { margin: 0 .35rem; color: var(--uk-text-muted); }
.uk-archive-hero__title {
font-family: var(--uk-font-display);
font-weight: 700;
font-size: clamp(2.2rem, 5vw, 3.6rem);
letter-spacing: -0.02em;
line-height: 1.05;
margin: .5rem 0 1rem;
}
.uk-archive-hero__desc {
max-width: 60ch;
color: var(--uk-text-soft);
font-size: 1.05rem;
}
.uk-archive-hero__desc p { margin: 0 0 .75em; }
.uk-archive { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.uk-archive__grid {
display: grid;
grid-template-columns: 260px 1fr;
gap: 2.5rem;
align-items: flex-start;
}
@media (max-width: 880px) {
.uk-archive__grid { grid-template-columns: 1fr; }
.uk-archive__sidebar { order: 2; }
}
.uk-archive__sidebar-title {
font-family: var(--uk-font-heading);
font-weight: 700;
font-size: .75rem;
text-transform: uppercase;
letter-spacing: .25em;
color: var(--uk-text-muted);
margin: 0 0 1rem;
padding-bottom: .5rem;
border-bottom: 1px dashed var(--uk-border);
}
.uk-filter { margin: 0 0 1.75rem; }
.uk-filter__heading {
font-family: var(--uk-font-heading);
font-weight: 700;
font-size: .85rem;
color: var(--uk-text);
margin: 0 0 .65rem;
}
.uk-filter__list,
.uk-filter__sublist { list-style: none; padding: 0; margin: 0; }
.uk-filter__list > li { padding: .35rem 0; }
.uk-filter__item > a {
font-family: var(--uk-font-body);
color: var(--uk-text);
font-size: .95rem;
font-weight: 500;
display: flex;
justify-content: space-between;
align-items: baseline;
gap: .5rem;
}
.uk-filter__item.is-active > a { color: var(--uk-magenta); font-weight: 700; }
.uk-filter__sublist {
margin: .35rem 0 .35rem .75rem;
padding-left: .75rem;
border-left: 1px solid var(--uk-border);
}
.uk-filter__sublist li { padding: .25rem 0; }
.uk-filter__sublist a { font-size: .9rem; color: var(--uk-text-soft); }
.uk-filter__sublist li.is-active a { color: var(--uk-magenta); font-weight: 700; }
.uk-filter__count { color: var(--uk-text-muted); font-size: .8rem; font-weight: 400; }
.uk-filter--cta {
background: var(--uk-bg-cream);
border-radius: 6px;
padding: 1.2rem 1.1rem;
border: 1px dashed var(--uk-magenta);
}
.uk-filter--cta p { margin: 0 0 .8rem; font-size: .9rem; color: var(--uk-text-soft); }
.uk-filter--cta .button.alt { font-size: .85rem; padding: .55em 1.2em; }
.uk-archive__toolbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px dashed var(--uk-border);
font-family: var(--uk-font-heading);
}
.uk-archive__toolbar .woocommerce-result-count {
font-size: .9rem;
color: var(--uk-text-soft);
margin: 0;
}
.uk-archive__toolbar .woocommerce-ordering select {
padding: .5em 2em .5em 1em;
border: 1px solid var(--uk-border);
border-radius: 999px;
font-family: var(--uk-font-heading);
font-weight: 600;
background: #fff;
}
.uk-archive-seo {
background: var(--uk-bg-cream);
padding: clamp(2.5rem, 5vw, 4rem) 0;
border-top: 1px dashed var(--uk-border);
}
.uk-archive-seo .uk-content-box { max-width: 820px; }
.uk-archive-seo h2,
.uk-archive-seo h3 {
font-family: var(--uk-font-display);
color: var(--uk-text);
}
.uk-archive-seo p { color: var(--uk-text-soft); line-height: 1.7; }
/* =========================================================================
25. Custom footer
========================================================================= */
.uk-footer { background: var(--uk-text); color: rgba(255,255,255,.78); }
.uk-footer__hero {
background:
radial-gradient(ellipse at 80% 30%, rgba(230,0,126,.25) 0%, transparent 60%),
linear-gradient(180deg, var(--uk-text) 0%, #1A1A1A 100%);
padding: clamp(3rem, 6vw, 5rem) 0;
text-align: center;
border-bottom: 1px solid rgba(255,255,255,.08);
position: relative;
overflow: hidden;
}
.uk-footer__hero::after {
content: "";
position: absolute;
top: -50px;
right: -50px;
width: 220px;
height: 220px;
border: 2px dashed rgba(255,255,255,.1);
border-radius: 50%;
pointer-events: none;
}
.uk-footer__hero-title {
font-family: var(--uk-font-display);
font-weight: 700;
font-size: clamp(1.8rem, 4vw, 2.6rem);
color: #fff;
margin: 0 0 .8rem;
letter-spacing: -0.01em;
}
.uk-footer__hero-title .uk-script { color: var(--uk-magenta); font-size: 1.2em; }
.uk-footer__hero-lead {
max-width: 50ch;
margin: 0 auto 1.6rem;
color: rgba(255,255,255,.7);
font-size: 1.05rem;
}
.uk-footer__hero .button.alt {
background: var(--uk-magenta);
color: #fff;
}
.uk-footer__hero .button.alt:hover {
background: #fff;
color: var(--uk-magenta);
}
.uk-footer__main {
padding: clamp(2.5rem, 5vw, 4rem) 0;
}
.uk-footer__grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
gap: 2.5rem;
}
@media (max-width: 880px) {
.uk-footer__grid { grid-template-columns: 1fr 1fr; }
.uk-footer__col--brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
.uk-footer__grid { grid-template-columns: 1fr; }
}
.uk-footer__logo { max-height: 60px; margin: 0 0 1rem; background: rgba(255,255,255,.9); padding: .5rem .75rem; border-radius: 4px; }
.uk-footer__brand-text { color: rgba(255,255,255,.7); max-width: 32ch; line-height: 1.6; }
.uk-footer__brand-text em { font-family: var(--uk-font-script); color: var(--uk-magenta); font-style: normal; font-size: 1.2em; }
.uk-footer__signature {
font-family: var(--uk-font-script);
font-weight: 700;
color: var(--uk-magenta);
font-size: 1.5rem;
transform: rotate(-3deg);
display: inline-block;
}
.uk-footer__heading {
font-family: var(--uk-font-heading);
font-weight: 700;
font-size: .85rem;
letter-spacing: .15em;
text-transform: uppercase;
color: #fff;
margin: 0 0 1.2rem;
}
.uk-footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .55rem; }
.uk-footer__col a {
color: rgba(255,255,255,.7);
font-family: var(--uk-font-body);
}
.uk-footer__col a:hover { color: var(--uk-magenta); }
.uk-footer__contact-list { display: flex; flex-direction: column; gap: .55rem; }
.uk-footer__contact-list li {
display: inline-flex;
gap: .55rem;
align-items: center;
}
.uk-footer__icon { color: var(--uk-magenta); font-size: 1rem; width: 1.4em; display: inline-block; }
.uk-footer__contact-line { margin: 0 0 1rem; color: rgba(255,255,255,.7); font-size: .9rem; }
.uk-footer__payments {
margin-top: 1.4rem;
display: flex;
gap: .5rem;
flex-wrap: wrap;
}
.uk-pay {
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.15);
padding: .35rem .65rem;
border-radius: 4px;
font-family: var(--uk-font-heading);
font-weight: 700;
font-size: .72rem;
letter-spacing: .08em;
color: rgba(255,255,255,.78);
}
.uk-footer__bottom {
background: rgba(0,0,0,.25);
border-top: 1px dashed rgba(255,255,255,.08);
padding: 1.2rem 0;
}
.uk-footer__bottom-inner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
color: rgba(255,255,255,.55);
font-size: .85rem;
}
.uk-footer__bottom-inner p { margin: 0; }
.uk-footer__bottom-inner .uk-script { color: var(--uk-magenta); font-size: 1.15em; }
.uk-footer__bottom-meta a { color: rgba(255,255,255,.7); border-bottom: 1px solid rgba(255,255,255,.25); }
/* =========================================================================
26. Page hero (alle non-home pages — page.php template)
========================================================================= */
.uk-page-hero {
background:
radial-gradient(ellipse at 12% 30%, rgba(230, 0, 126, .14) 0%, transparent 55%),
radial-gradient(ellipse at 88% 70%, rgba(0, 174, 239, .10) 0%, transparent 55%),
linear-gradient(180deg, var(--uk-bg-warm) 0%, var(--uk-bg-cream) 100%);
padding: clamp(3rem, 6vw, 5rem) 0 clamp(2.5rem, 5vw, 4rem);
border-bottom: 1px dashed var(--uk-border);
position: relative;
overflow: hidden;
}
.uk-page-hero--juridical {
background: linear-gradient(180deg, var(--uk-bg-cream) 0%, var(--uk-bg-warm) 100%);
}
.uk-page-hero--contact::after {
content: "";
position: absolute;
right: -60px;
top: 50%;
width: 240px;
height: 240px;
border: 2px dashed var(--uk-magenta);
border-radius: 50%;
opacity: .15;
transform: translateY(-50%);
pointer-events: none;
}
.uk-page-hero .uk-breadcrumbs {
font-family: var(--uk-font-heading);
font-size: .85rem;
color: var(--uk-text-muted);
margin-bottom: 1.2rem;
}
.uk-page-hero .uk-breadcrumbs a { color: var(--uk-text-soft); }
.uk-page-hero .uk-breadcrumbs a:hover { color: var(--uk-magenta); }
.uk-page-hero .uk-breadcrumbs span[aria-hidden] { margin: 0 .5rem; color: var(--uk-text-muted); }
.uk-page-hero .uk-eyebrow {
margin-bottom: 1rem;
color: var(--uk-magenta);
}
.uk-page-hero .uk-eyebrow::before {
background: var(--uk-magenta);
}
.uk-page-hero__title {
font-family: var(--uk-font-display);
font-weight: 700;
font-size: clamp(2.2rem, 5.5vw, 4rem);
letter-spacing: -0.025em;
line-height: 1.02;
margin: 0 0 1rem;
color: var(--uk-text);
max-width: 22ch;
}
.uk-page-hero__lead {
font-family: var(--uk-font-body);
font-size: clamp(1.05rem, 1.5vw, 1.2rem);
max-width: 56ch;
color: var(--uk-text-soft);
line-height: 1.6;
margin: 0 0 1.2rem;
}
.uk-page-hero__underline {
display: block;
width: 180px;
height: 14px;
color: var(--uk-cyan);
margin-top: .5rem;
}
.uk-page-content {
padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 5rem);
background: linear-gradient(180deg, var(--uk-bg-warm) 0%, var(--uk-bg-cream) 100%);
}
.uk-page-article > * + * { margin-top: 1rem; }
/* =========================================================================
27. Contact page — 2-col met info + form
========================================================================= */
.uk-contact-grid {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 3rem;
align-items: flex-start;
}
@media (max-width: 880px) {
.uk-contact-grid { grid-template-columns: 1fr; gap: 2rem; }
}
.uk-contact-grid h2 {
font-family: var(--uk-font-display);
font-weight: 700;
font-size: 1.6rem;
letter-spacing: -0.01em;
margin: 0 0 1.5rem;
}
.uk-contact-list {
list-style: none;
padding: 0;
margin: 0 0 2rem;
}
.uk-contact-list li {
display: grid;
grid-template-columns: 44px 1fr;
gap: 1rem;
padding: .9rem 0;
border-bottom: 1px dashed var(--uk-border);
align-items: center;
}
.uk-contact-list li:last-child { border-bottom: 0; }
.uk-contact-list__icon {
width: 44px;
height: 44px;
background: var(--uk-magenta-soft);
color: var(--uk-magenta);
border-radius: 50%;
display: grid;
place-items: center;
font-size: 1.1rem;
}
.uk-contact-list__label {
display: block;
font-family: var(--uk-font-heading);
font-weight: 700;
font-size: .72rem;
text-transform: uppercase;
letter-spacing: .2em;
color: var(--uk-text-muted);
}
.uk-contact-list li a {
font-family: var(--uk-font-display);
font-weight: 600;
color: var(--uk-text);
}
.uk-contact-list li a:hover { color: var(--uk-magenta); }
.uk-contact-callout {
background: var(--uk-bg-cream);
border-left: 4px solid var(--uk-magenta);
border-radius: 4px;
padding: 1.1rem 1.25rem;
margin: 0 0 1.25rem;
}
.uk-contact-callout--lime { border-left-color: var(--uk-lime-dark); }
.uk-contact-callout__heading {
font-family: var(--uk-font-heading);
font-weight: 700;
margin: 0 0 .3rem;
color: var(--uk-text);
}
.uk-contact-callout p { margin: 0 0 .25em; color: var(--uk-text-soft); font-size: .95rem; }
.uk-contact-form-wrap {
background: #fff;
border: 1px solid var(--uk-border);
border-radius: 8px;
padding: 2rem 2rem 2.25rem;
box-shadow: 0 8px 24px rgba(43, 43, 43, .07);
}
/* =========================================================================
28. FluentForm — overrride defaults voor brand
========================================================================= */
.fluentform .ff-el-input--label label,
.fluentform .ff-el-group .ff-el-form-control {
font-family: var(--uk-font-body);
}
.fluentform .ff-el-input--label label {
font-family: var(--uk-font-heading) !important;
font-weight: 600 !important;
font-size: .85rem !important;
color: var(--uk-text) !important;
margin-bottom: .35rem !important;
}
.fluentform .ff-el-form-control,
.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="tel"],
.fluentform input[type="url"],
.fluentform textarea {
border: 1px solid var(--uk-border) !important;
border-radius: 6px !important;
padding: .75em .9em !important;
font-family: var(--uk-font-body) !important;
font-size: 1rem !important;
background: #fff !important;
box-shadow: none !important;
width: 100% !important;
}
.fluentform .ff-el-form-control:focus,
.fluentform input:focus,
.fluentform textarea:focus {
border-color: var(--uk-magenta) !important;
box-shadow: 0 0 0 3px var(--uk-magenta-soft) !important;
outline: none !important;
}
.fluentform .ff-btn-submit,
.fluentform button[type="submit"] {
background: var(--uk-magenta) !important;
color: #fff !important;
border: 0 !important;
border-radius: 999px !important;
padding: .85em 1.8em !important;
font-family: var(--uk-font-heading) !important;
font-weight: 600 !important;
font-size: 1rem !important;
cursor: pointer !important;
box-shadow: 0 4px 14px rgba(230, 0, 126, .25) !important;
transition: background .15s ease, transform .1s ease !important;
}
.fluentform .ff-btn-submit:hover,
.fluentform button[type="submit"]:hover {
background: var(--uk-magenta-dark) !important;
transform: translateY(-1px) !important;
}
.fluentform .ff-el-is-error .ff-el-form-control { border-color: var(--uk-magenta-dark) !important; }
.fluentform .text-danger,
.fluentform .error,
.fluentform .ff-el-form-check-error { color: var(--uk-magenta-dark) !important; font-size: .85rem !important; }
.fluentform .ff-message-success,
.ff_submit_btn_wrapper + div,
.ff-success {
background: var(--uk-lime-soft) !important;
border-left: 4px solid var(--uk-lime-dark) !important;
border-radius: 6px;
padding: 1.1em 1.25em !important;
color: var(--uk-text) !important;
font-family: var(--uk-font-body) !important;
}
.fluentform .ff-el-input--label .ff_t_input_label_req,
.fluentform .ff-el-is-required label:after { color: var(--uk-magenta) !important; }
.fluentform .ff-el-group { margin-bottom: 1.1rem !important; }
/* Two-column naam veld */
.fluentform .ff-name-field-wrapper,
.fluentform .ff_name_fields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: .75rem;
}
@media (max-width: 600px) {
.fluentform .ff-name-field-wrapper,
.fluentform .ff_name_fields { grid-template-columns: 1fr; }
}
/* =========================================================================
29. Prose with aside (Over ons)
========================================================================= */
.uk-prose--with-aside {
display: grid;
grid-template-columns: 280px 1fr;
gap: 3rem;
align-items: flex-start;
max-width: none;
margin: 0;
padding: 0;
}
@media (max-width: 880px) {
.uk-prose--with-aside { grid-template-columns: 1fr; gap: 2rem; }
.uk-prose__aside { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.uk-prose__aside .uk-photo-frame { flex: 0 0 240px; }
}
@media (min-width: 881px) {
.uk-prose__aside { position: sticky; top: 2rem; }
}
.uk-prose__fact {
background: #fff;
border-left: 4px solid var(--uk-magenta);
border-radius: 4px;
padding: 1rem 1.25rem;
margin: 1.25rem 0 0;
box-shadow: 0 4px 10px rgba(43, 43, 43, .05);
}
.uk-prose__fact--cyan { border-left-color: var(--uk-cyan); }
.uk-prose__fact-num {
font-family: var(--uk-font-display);
font-weight: 700;
color: var(--uk-magenta);
font-size: 1.8rem;
line-height: 1;
margin: 0 0 .3rem;
}
.uk-prose__fact--cyan .uk-prose__fact-num { color: var(--uk-cyan-dark); }
.uk-prose__fact p { margin: 0; color: var(--uk-text-soft); font-size: .9rem; line-height: 1.5; }
.uk-prose__body p em {
font-family: var(--uk-font-script);
font-style: normal;
font-weight: 700;
color: var(--uk-magenta);
font-size: 1.15em;
}
.uk-prose__cta {
display: inline-flex;
gap: 1.5rem;
align-items: center;
flex-wrap: wrap;
}
/* =========================================================================
30. FAQ groups
========================================================================= */
.uk-faq-section { margin: 0 0 2.5rem; }
.uk-faq-section__title {
font-family: var(--uk-font-display);
font-weight: 700;
font-size: 1.5rem;
margin: 0 0 1rem;
display: flex;
align-items: baseline;
gap: .75rem;
color: var(--uk-text);
}
.uk-faq-section__num {
font-family: var(--uk-font-script);
font-size: 2rem;
color: var(--uk-magenta);
font-weight: 700;
}
.uk-faq__item {
background: #fff;
border: 1px solid var(--uk-border);
border-radius: 8px;
margin: 0 0 .75rem;
overflow: hidden;
box-shadow: 0 2px 6px rgba(43,43,43,.04);
}
.uk-faq__item summary {
cursor: pointer;
padding: 1.1rem 1.4rem;
list-style: none;
position: relative;
font-family: var(--uk-font-display);
font-weight: 600;
font-size: 1.05rem;
color: var(--uk-text);
}
.uk-faq__item summary::-webkit-details-marker { display: none; }
.uk-faq__item summary::after {
content: "+";
position: absolute;
right: 1.4rem;
top: 50%;
transform: translateY(-50%);
font-family: var(--uk-font-heading);
font-weight: 700;
color: var(--uk-magenta);
font-size: 1.5rem;
transition: transform .2s ease;
}
.uk-faq__item[open] summary::after { content: "−"; }
.uk-faq__item summary:hover { color: var(--uk-magenta); }
.uk-faq__body {
padding: 0 1.4rem 1.3rem;
color: var(--uk-text-soft);
line-height: 1.65;
}
.uk-faq__body p { margin: 0; }
.uk-faq-footer {
text-align: center;
padding: 2rem 1rem;
background: var(--uk-bg-cream);
border-radius: 12px;
margin-top: 2rem;
}
.uk-faq-footer p {
font-family: var(--uk-font-display);
font-size: 1.25rem;
font-weight: 600;
margin: 0 0 1rem;
}
/* =========================================================================
31. Info cards (Verzending)
========================================================================= */
.uk-info-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.25rem;
margin: 1.5rem 0 2.5rem;
}
.uk-info-card {
background: #fff;
border: 1px solid var(--uk-border);
border-radius: 8px;
padding: 1.5rem 1.25rem;
text-align: center;
box-shadow: 0 4px 12px rgba(43, 43, 43, .06);
}
.uk-info-card__label {
font-family: var(--uk-font-heading);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .15em;
font-size: .7rem;
color: var(--uk-text-muted);
margin: 0 0 .5rem;
}
.uk-info-card__big {
font-family: var(--uk-font-display);
font-weight: 700;
font-size: 2.1rem;
line-height: 1;
margin: 0 0 .4rem;
color: var(--uk-magenta);
}
.uk-info-card__sub { margin: 0; color: var(--uk-text-soft); font-size: .85rem; }
.uk-info-card--lime .uk-info-card__big { color: var(--uk-lime-dark); }
.uk-info-card--cyan .uk-info-card__big { color: var(--uk-cyan-dark); }
/* =========================================================================
32. WooCommerce — Cart, Checkout, Account, Thank-you
========================================================================= */
/* Page wrapper voor WC pages (cart, checkout, my-account, order-received) */
.woocommerce-cart .uk-page-content,
.woocommerce-checkout .uk-page-content,
.woocommerce-account .uk-page-content,
.woocommerce-order-received .uk-page-content {
background: var(--uk-bg-warm);
}
/* === Tabellen (cart) === */
.woocommerce table.shop_table {
background: #fff;
border: 1px solid var(--uk-border);
border-radius: 10px;
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
box-shadow: 0 6px 16px rgba(43,43,43,.06);
}
.woocommerce table.shop_table thead th {
background: var(--uk-bg-cream);
color: var(--uk-text);
font-family: var(--uk-font-heading);
font-weight: 700;
font-size: .8rem;
text-transform: uppercase;
letter-spacing: .12em;
padding: 1rem 1.1rem;
border-bottom: 1px dashed var(--uk-border);
}
.woocommerce table.shop_table td {
padding: 1.1rem;
border-top: 1px dashed var(--uk-border);
vertical-align: middle;
}
.woocommerce table.shop_table td.product-thumbnail img {
max-width: 80px;
border-radius: 4px;
background: var(--uk-bg-cream);
}
.woocommerce table.shop_table td.product-name a {
font-family: var(--uk-font-display);
font-weight: 700;
color: var(--uk-text);
}
.woocommerce table.shop_table td.product-name a:hover { color: var(--uk-magenta); }
.woocommerce table.shop_table td.product-price,
.woocommerce table.shop_table td.product-subtotal {
font-family: var(--uk-font-display);
font-weight: 700;
color: var(--uk-magenta-dark);
}
.woocommerce table.shop_table .quantity input {
width: 70px;
text-align: center;
}
.woocommerce table.shop_table .product-remove a.remove {
color: var(--uk-text-muted) !important;
background: transparent !important;
font-size: 1.4rem;
width: auto;
height: auto;
}
.woocommerce table.shop_table .product-remove a.remove:hover { color: var(--uk-magenta) !important; }
/* === Cart totals (summary box) === */
.woocommerce .cart_totals,
.woocommerce-cart .cart_totals,
.woocommerce-checkout .cart_totals {
background: #fff;
border: 1px solid var(--uk-border);
border-radius: 10px;
padding: 1.5rem;
box-shadow: 0 6px 16px rgba(43,43,43,.06);
}
.woocommerce .cart_totals h2 {
font-family: var(--uk-font-display);
font-weight: 700;
font-size: 1.3rem;
margin: 0 0 1rem;
}
/* === Coupon form / button === */
.woocommerce .coupon {
display: flex;
gap: .5rem;
align-items: center;
}
.woocommerce .coupon input[type="text"] {
border: 1px solid var(--uk-border);
border-radius: 999px;
padding: .65em 1em;
}
/* === Checkout layout === */
.woocommerce-checkout #customer_details {
background: #fff;
border: 1px solid var(--uk-border);
border-radius: 10px;
padding: 1.75rem;
box-shadow: 0 6px 16px rgba(43,43,43,.05);
}
.woocommerce-checkout h3 {
font-family: var(--uk-font-display);
font-weight: 700;
font-size: 1.3rem;
margin: 0 0 1rem;
padding-bottom: .6rem;
border-bottom: 1px dashed var(--uk-border);
}
.woocommerce form .form-row label {
font-family: var(--uk-font-heading);
font-weight: 600;
font-size: .85rem;
color: var(--uk-text);
margin-bottom: .3rem;
}
.woocommerce-checkout #order_review_heading {
font-family: var(--uk-font-display);
font-weight: 700;
font-size: 1.3rem;
margin: 2rem 0 1rem;
}
.woocommerce-checkout #order_review {
background: #fff;
border: 1px solid var(--uk-border);
border-radius: 10px;
padding: 1.75rem;
box-shadow: 0 6px 16px rgba(43,43,43,.05);
}
.woocommerce-checkout #payment {
background: var(--uk-bg-cream);
border-radius: 8px;
padding: 1.25rem;
margin-top: 1rem;
}
.woocommerce-checkout #payment ul.payment_methods {
border-bottom: 1px dashed var(--uk-border);
padding-bottom: 1rem;
}
.woocommerce-checkout #payment ul.payment_methods li label {
font-family: var(--uk-font-display);
font-weight: 600;
font-size: 1rem;
}
.woocommerce-checkout #payment .form-row.place-order {
padding-top: 1rem;
border-top: 0;
}
.woocommerce-checkout #payment #place_order {
background: var(--uk-magenta) !important;
color: #fff !important;
width: 100%;
font-size: 1.1rem;
padding: 1em 1.5em;
}
.woocommerce-checkout #payment #place_order:hover {
background: var(--uk-magenta-dark) !important;
}
/* === Mijn account === */
.woocommerce-account .woocommerce-MyAccount-navigation {
background: #fff;
border: 1px solid var(--uk-border);
border-radius: 10px;
padding: 1.25rem;
box-shadow: 0 6px 16px rgba(43,43,43,.05);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
list-style: none;
padding: 0;
margin: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li {
border-bottom: 1px dashed var(--uk-border);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child { border-bottom: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
display: block;
padding: .75rem .5rem;
font-family: var(--uk-font-heading);
font-weight: 600;
color: var(--uk-text);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
color: var(--uk-magenta);
}
.woocommerce-account .woocommerce-MyAccount-content {
background: #fff;
border: 1px solid var(--uk-border);
border-radius: 10px;
padding: 1.75rem;
box-shadow: 0 6px 16px rgba(43,43,43,.05);
}
/* === Thank-you / Order received === */
.woocommerce-order-received .woocommerce-order .woocommerce-notice {
background: linear-gradient(135deg, var(--uk-lime-soft) 0%, #FFF5E0 100%);
border-left: 4px solid var(--uk-lime-dark);
border-radius: 10px;
padding: 1.75rem 2rem;
font-family: var(--uk-font-display);
font-size: 1.2rem;
font-weight: 600;
color: var(--uk-text);
}
.woocommerce-order-received .woocommerce-order .woocommerce-thankyou-order-details {
background: #fff;
border: 1px solid var(--uk-border);
border-radius: 10px;
padding: 1.25rem;
box-shadow: 0 6px 16px rgba(43,43,43,.05);
display: flex;
flex-wrap: wrap;
gap: 1rem;
list-style: none;
}
.woocommerce-order-received .woocommerce-order .woocommerce-thankyou-order-details li {
flex: 1 1 calc(50% - 1rem);
min-width: 0;
padding: .75rem;
font-family: var(--uk-font-body);
border-right: 1px dashed var(--uk-border);
}
.woocommerce-order-received .woocommerce-order .woocommerce-thankyou-order-details li:last-child { border-right: 0; }
.woocommerce-order-received .woocommerce-order .woocommerce-thankyou-order-details strong {
display: block;
font-family: var(--uk-font-display);
font-weight: 700;
color: var(--uk-magenta-dark);
font-size: 1.1rem;
margin-top: .25rem;
}
/* === Form-row spacing voor WC === */
.woocommerce form .form-row { margin-bottom: 1rem; }
.woocommerce form .form-row-first,
.woocommerce form .form-row-last { width: 48%; }
/* =========================================================================
33. PDP — single product page (custom template)
========================================================================= */
/* Reset Storefront's float-layout — wij gebruiken CSS grid */
.single-product div.product,
.single-product .uk-pdp {
display: block;
background: transparent;
box-shadow: none;
margin: 0;
padding: 0;
}
.single-product div.product .images,
.single-product div.product .summary,
.single-product .uk-pdp .images,
.single-product .uk-pdp .summary {
float: none !important;
width: 100% !important;
margin: 0 !important;
clear: none !important;
}
.single-product .uk-pdp .related,
.single-product .uk-pdp .upsells {
width: 100% !important;
float: none !important;
clear: none !important;
}
.single-product .col-full,
.woocommerce-page .col-full { padding: 0 !important; max-width: none !important; }
/* Hero section */
.uk-pdp-hero {
background: linear-gradient(180deg, var(--uk-bg-warm) 0%, var(--uk-bg-cream) 100%);
padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(2.5rem, 5vw, 4rem);
border-bottom: 1px dashed var(--uk-border);
}
.uk-pdp-hero__breadcrumbs {
font-family: var(--uk-font-heading);
font-size: .85rem;
color: var(--uk-text-muted);
margin-bottom: 1.5rem;
}
.uk-pdp-hero__breadcrumbs a { color: var(--uk-text-soft); }
.uk-pdp-hero__breadcrumbs a:hover { color: var(--uk-magenta); }
.uk-pdp-hero__breadcrumbs span[aria-hidden] { margin: 0 .5rem; color: var(--uk-text-muted); }
.uk-pdp-hero__grid {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: clamp(2rem, 4vw, 3.5rem);
align-items: flex-start;
}
@media (max-width: 880px) {
.uk-pdp-hero__grid { grid-template-columns: 1fr; gap: 1.75rem; }
}
/* Gallery */
.uk-pdp-hero__gallery {
position: relative;
}
@media (min-width: 881px) {
.uk-pdp-hero__gallery { position: sticky; top: 120px; }
}
.single-product .woocommerce-product-gallery {
background: #fff;
border: 1px solid var(--uk-border);
border-radius: 10px;
padding: 1rem;
box-shadow: 0 10px 28px rgba(43,43,43,.08);
}
.single-product .woocommerce-product-gallery .flex-viewport {
border-radius: 6px;
overflow: hidden;
background: var(--uk-bg-cream);
}
.single-product .woocommerce-product-gallery__image img {
border-radius: 6px;
width: 100%;
height: auto;
display: block;
}
.single-product .flex-control-thumbs {
display: flex !important;
gap: .5rem;
flex-wrap: wrap;
margin: .75rem 0 0;
padding: 0;
list-style: none;
}
.single-product .flex-control-thumbs li {
width: calc(25% - .375rem) !important;
margin: 0 !important;
float: none !important;
}
.single-product .flex-control-thumbs img {
border-radius: 4px;
cursor: pointer;
opacity: .65;
transition: opacity .15s ease;
border: 2px solid transparent;
}
.single-product .flex-control-thumbs img:hover,
.single-product .flex-control-thumbs img.flex-active {
opacity: 1;
border-color: var(--uk-magenta);
}
.single-product .woocommerce-product-gallery__trigger {
position: absolute;
top: 1.5rem;
right: 1.5rem;
background: #fff;
border: 1px solid var(--uk-border);
border-radius: 50%;
width: 40px;
height: 40px;
display: grid;
place-items: center;
color: var(--uk-text);
font-size: 1.1rem;
box-shadow: 0 4px 12px rgba(43,43,43,.1);
z-index: 2;
}
.single-product span.onsale {
z-index: 3;
}
/* Summary column */
.uk-pdp-hero__summary {
font-family: var(--uk-font-body);
}
.single-product div.product .uk-pdp-hero__summary .product_title {
font-family: var(--uk-font-display);
font-weight: 700;
font-size: clamp(1.8rem, 3vw, 2.6rem);
letter-spacing: -0.02em;
line-height: 1.05;
margin: 0 0 .6rem;
}
.single-product .woocommerce-product-gallery {
background: #fff;
border: 1px solid var(--uk-border);
border-radius: 8px;
padding: 1rem;
box-shadow: 0 8px 24px rgba(43,43,43,.08);
}
.single-product .woocommerce-product-gallery img {
border-radius: 4px;
background: var(--uk-bg-cream);
}
.single-product .price {
font-family: var(--uk-font-display);
font-weight: 700;
color: var(--uk-magenta-dark);
font-size: 1.6rem;
margin: 0 0 1rem;
}
.single-product .price del {
color: var(--uk-text-muted);
font-size: .7em;
margin-right: .5em;
}
.single-product .woocommerce-product-details__short-description {
color: var(--uk-text-soft);
font-size: 1.05rem;
line-height: 1.65;
margin: 0 0 1.4rem;
}
.single-product .stock {
font-family: var(--uk-font-heading);
font-weight: 700;
font-size: .85rem;
padding: .35rem .75rem;
border-radius: 999px;
display: inline-block;
margin: 0 0 1rem;
}
.single-product .stock.in-stock {
background: var(--uk-lime-soft);
color: var(--uk-lime-dark);
}
.single-product .stock.uk-stock-unique {
background: var(--uk-magenta-soft);
color: var(--uk-magenta-dark);
}
.single-product .stock.out-of-stock {
background: rgba(43,43,43,.08);
color: var(--uk-text-muted);
}
.single-product .quantity { margin-right: .6rem; }
.single-product .quantity input[type="number"] {
border-radius: 999px !important;
padding: .65em .8em !important;
min-width: 70px;
text-align: center;
border: 1px solid var(--uk-border) !important;
}
.single-product .single_add_to_cart_button {
font-size: 1.05rem !important;
padding: 1em 2em !important;
}
.single-product .single_add_to_cart_button.loading {
opacity: .7;
pointer-events: none;
}
.single-product .single_add_to_cart_button.added::after {
content: " ✓";
}
/* USP strip onder short description */
.uk-pdp-usp {
list-style: none;
padding: 1.1rem 1.25rem;
margin: 0 0 1.5rem;
background: var(--uk-bg-cream);
border: 1px dashed var(--uk-magenta);
border-radius: 8px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: .65rem 1rem;
font-size: .9rem;
}
@media (max-width: 600px) {
.uk-pdp-usp { grid-template-columns: 1fr; }
}
.uk-pdp-usp li {
display: flex;
gap: .55rem;
align-items: flex-start;
color: var(--uk-text);
}
.uk-pdp-usp__icon {
flex: 0 0 auto;
color: var(--uk-magenta);
font-size: 1.1rem;
line-height: 1.2;
}
/* Trust + payment icons na add-to-cart */
.uk-pdp-trust {
margin: 1.5rem 0 0;
padding: 1.1rem 1.25rem;
background: #fff;
border: 1px solid var(--uk-border);
border-radius: 8px;
}
.uk-pdp-trust__heading {
font-family: var(--uk-font-heading);
font-weight: 700;
font-size: .72rem;
text-transform: uppercase;
letter-spacing: .2em;
color: var(--uk-text-muted);
margin: 0 0 .6rem;
}
.uk-pdp-trust__pays {
display: flex;
gap: .5rem;
flex-wrap: wrap;
margin-bottom: 1rem;
}
.uk-pdp-trust__pays .uk-pay {
background: var(--uk-bg-cream);
color: var(--uk-text);
border: 1px solid var(--uk-border);
}
.uk-pdp-trust__points {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: .35rem;
font-size: .9rem;
color: var(--uk-text-soft);
}
.uk-pdp-trust__points li {
display: flex;
gap: .55rem;
align-items: center;
}
/* PDP meta (categorie, sku) — verberg of subtiel */
.single-product .product_meta {
font-size: .85rem;
color: var(--uk-text-muted);
border-top: 1px dashed var(--uk-border);
padding-top: 1rem;
margin-top: 1.5rem;
font-family: var(--uk-font-heading);
}
.single-product .product_meta a {
color: var(--uk-magenta-dark);
}
/* Tabs styling */
.single-product .woocommerce-tabs {
margin-top: clamp(3rem, 5vw, 4.5rem);
}
.single-product .woocommerce-tabs ul.tabs {
border-bottom: 1px dashed var(--uk-border);
padding: 0;
margin: 0 0 2rem;
display: flex;
gap: .5rem;
flex-wrap: wrap;
list-style: none;
}
.single-product .woocommerce-tabs ul.tabs::before,
.single-product .woocommerce-tabs ul.tabs::after { display: none !important; }
.single-product .woocommerce-tabs ul.tabs li {
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
margin: 0 !important;
padding: 0 !important;
box-shadow: none !important;
}
.single-product .woocommerce-tabs ul.tabs li::before,
.single-product .woocommerce-tabs ul.tabs li::after { display: none !important; }
.single-product .woocommerce-tabs ul.tabs li a {
display: inline-block !important;
padding: .8rem 1.2rem !important;
font-family: var(--uk-font-heading) !important;
font-weight: 600 !important;
color: var(--uk-text-soft) !important;
font-size: .95rem !important;
border-bottom: 2px solid transparent !important;
background: transparent !important;
}
.single-product .woocommerce-tabs ul.tabs li.active a {
color: var(--uk-magenta) !important;
border-bottom-color: var(--uk-magenta) !important;
}
.single-product .woocommerce-tabs ul.tabs li a:hover { color: var(--uk-magenta) !important; }
.single-product .woocommerce-tabs .panel {
padding: 0;
color: var(--uk-text);
font-size: 1rem;
line-height: 1.7;
}
.single-product .woocommerce-tabs .panel h2 {
font-family: var(--uk-font-display);
font-weight: 700;
font-size: 1.4rem;
margin: 0 0 .8rem;
}
/* Related + Upsell sections — full-width met boxed content */
.uk-pdp-tabs-section {
background: var(--uk-bg-warm);
padding: clamp(2.5rem, 5vw, 4rem) 0;
border-bottom: 1px dashed var(--uk-border);
}
.uk-pdp-related-section {
background: var(--uk-bg-cream);
padding: clamp(3rem, 5vw, 4.5rem) 0;
}
.uk-pdp-upsells-section {
background: var(--uk-bg-warm);
padding: clamp(3rem, 5vw, 4.5rem) 0;
border-bottom: 1px dashed var(--uk-border);
}
.single-product .related.products,
.single-product .upsells.products {
margin: 0;
padding: 0;
border: 0;
float: none !important;
}
.single-product .related.products > h2,
.single-product .upsells.products > h2 {
font-family: var(--uk-font-display);
font-weight: 700;
font-size: clamp(1.6rem, 3vw, 2.2rem);
text-align: center;
margin: 0 0 2rem;
letter-spacing: -0.01em;
color: var(--uk-text);
}
/* In tabs sectie: tabs zelf in een boxed card */
.uk-pdp-tabs-section .woocommerce-tabs {
background: #fff;
border: 1px solid var(--uk-border);
border-radius: 12px;
padding: 1.75rem 2rem 2rem;
box-shadow: 0 8px 24px rgba(43,43,43,.05);
margin: 0;
}
.uk-pdp-tabs-section .woocommerce-tabs ul.tabs {
margin: -.5rem -.5rem 1.5rem !important;
}
.uk-pdp-tabs-section .woocommerce-Tabs-panel {
color: var(--uk-text);
line-height: 1.7;
}
.uk-pdp-tabs-section .woocommerce-Tabs-panel ul,
.uk-pdp-tabs-section .woocommerce-Tabs-panel ol {
padding-left: 1.5rem;
}
.uk-pdp-tabs-section .woocommerce-Tabs-panel--additional_information table.shop_attributes {
width: 100%;
border-collapse: collapse;
}
.uk-pdp-tabs-section .shop_attributes th,
.uk-pdp-tabs-section .shop_attributes td {
padding: .8rem 1rem;
border-bottom: 1px dashed var(--uk-border);
text-align: left;
}
.uk-pdp-tabs-section .shop_attributes th {
font-family: var(--uk-font-heading);
font-weight: 600;
color: var(--uk-text-soft);
width: 35%;
}
/* =========================================================================
34. Side cart drawer
========================================================================= */
.uk-cart-drawer {
position: fixed;
inset: 0;
z-index: 300;
pointer-events: none;
}
.uk-cart-drawer.is-open { pointer-events: auto; }
.uk-cart-drawer__overlay {
position: absolute;
inset: 0;
background: rgba(43, 43, 43, 0);
transition: background .25s ease;
}
.uk-cart-drawer.is-open .uk-cart-drawer__overlay { background: rgba(43, 43, 43, .55); }
.uk-cart-drawer__panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: min(440px, 92vw);
background: var(--uk-bg);
box-shadow: -24px 0 60px rgba(43, 43, 43, .25);
transform: translateX(100%);
transition: transform .3s cubic-bezier(.2,.7,.2,1);
display: flex;
flex-direction: column;
}
.uk-cart-drawer.is-open .uk-cart-drawer__panel { transform: translateX(0); }
.uk-cart-drawer__head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.25rem 1.5rem;
border-bottom: 1px dashed var(--uk-border);
background: var(--uk-bg-cream);
}
.uk-cart-drawer__title {
font-family: var(--uk-font-display);
font-weight: 700;
font-size: 1.25rem;
margin: 0;
color: var(--uk-text);
}
.uk-cart-drawer__close {
width: 40px;
height: 40px;
background: transparent;
border: 0;
box-shadow: none;
font-size: 1.8rem;
line-height: 1;
cursor: pointer;
color: var(--uk-text);
padding: 0;
border-radius: 50%;
}
.uk-cart-drawer__close:hover { background: var(--uk-magenta-soft); color: var(--uk-magenta); }
.uk-cart-drawer__body {
flex: 1;
overflow-y: auto;
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
/* Free-shipping bar */
.uk-free-shipping-bar {
background: var(--uk-bg-cream);
border-radius: 8px;
padding: .9rem 1rem .8rem;
border: 1px dashed var(--uk-magenta);
}
.uk-free-shipping-bar.is-complete {
border-color: var(--uk-lime-dark);
background: var(--uk-lime-soft);
}
.uk-free-shipping-bar__msg {
margin: 0 0 .55rem;
font-family: var(--uk-font-body);
font-size: .92rem;
color: var(--uk-text);
text-align: center;
}
.uk-free-shipping-bar__msg strong { color: var(--uk-magenta-dark); }
.uk-free-shipping-bar.is-complete .uk-free-shipping-bar__msg strong { color: var(--uk-lime-dark); }
.uk-free-shipping-bar__track {
height: 8px;
background: rgba(43,43,43,.08);
border-radius: 999px;
overflow: hidden;
}
.uk-free-shipping-bar__fill {
height: 100%;
background: linear-gradient(90deg, var(--uk-magenta) 0%, var(--uk-magenta-dark) 100%);
border-radius: 999px;
transition: width .4s cubic-bezier(.2,.7,.2,1);
}
.uk-free-shipping-bar.is-complete .uk-free-shipping-bar__fill {
background: linear-gradient(90deg, var(--uk-lime) 0%, var(--uk-lime-dark) 100%);
}
/* Mini-cart items */
.uk-mini-cart {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: .85rem;
}
.uk-mini-cart__item {
display: grid;
grid-template-columns: 72px 1fr 28px;
gap: .85rem;
padding: .75rem;
background: #fff;
border: 1px solid var(--uk-border);
border-radius: 6px;
align-items: center;
position: relative;
}
.uk-mini-cart__thumb img {
width: 72px;
height: 72px;
object-fit: cover;
border-radius: 4px;
background: var(--uk-bg-cream);
display: block;
}
.uk-mini-cart__body { min-width: 0; }
.uk-mini-cart__name {
font-family: var(--uk-font-display);
font-weight: 600;
color: var(--uk-text);
font-size: .95rem;
line-height: 1.25;
display: block;
margin-bottom: .25rem;
}
.uk-mini-cart__name:hover { color: var(--uk-magenta); }
.uk-mini-cart__meta {
margin: .15rem 0 .35rem;
font-size: .8rem;
color: var(--uk-text-soft);
}
.uk-mini-cart__meta strong { color: var(--uk-text); }
.uk-mini-cart__qty-price {
margin: 0;
font-family: var(--uk-font-heading);
font-weight: 600;
font-size: .9rem;
}
.uk-mini-cart__qty { color: var(--uk-text-muted); }
.uk-mini-cart__price { color: var(--uk-magenta-dark); }
.uk-mini-cart__remove {
width: 24px;
height: 24px;
background: transparent !important;
border: 1px solid var(--uk-border);
border-radius: 50%;
color: var(--uk-text-muted) !important;
font-size: 1rem;
display: grid;
place-items: center;
line-height: 1;
text-decoration: none;
}
.uk-mini-cart__remove:hover {
border-color: var(--uk-magenta);
background: var(--uk-magenta-soft) !important;
color: var(--uk-magenta) !important;
}
/* Drawer footer (totals + buttons) */
.uk-cart-drawer__footer {
padding: 1.25rem 1.5rem 1.5rem;
border-top: 1px dashed var(--uk-border);
background: var(--uk-bg-warm);
}
.uk-cart-drawer__total {
display: flex;
justify-content: space-between;
align-items: baseline;
font-family: var(--uk-font-display);
font-size: 1.15rem;
margin-bottom: .35rem;
}
.uk-cart-drawer__total strong {
color: var(--uk-magenta-dark);
font-size: 1.4rem;
font-weight: 700;
}
.uk-cart-drawer__note {
font-size: .8rem;
color: var(--uk-text-muted);
margin: 0 0 1rem;
}
.uk-cart-drawer__actions {
display: flex;
flex-direction: column;
gap: .55rem;
}
.uk-cart-drawer__checkout {
display: block;
text-align: center;
font-size: 1.05rem;
padding: .9em 1.5em !important;
}
.uk-cart-drawer__cart-link {
display: block;
text-align: center;
}
.uk-cart-drawer__continue {
text-align: center;
margin: 1rem 0 0;
font-size: .85rem;
}
.uk-cart-drawer__continue a {
color: var(--uk-text-muted);
border-bottom: 1px solid transparent;
}
.uk-cart-drawer__continue a:hover {
color: var(--uk-magenta);
border-bottom-color: var(--uk-magenta);
}
/* Empty cart state */
.uk-cart-empty {
text-align: center;
padding: 3rem 1.5rem;
}
.uk-cart-empty__icon {
font-size: 3rem;
margin-bottom: .75rem;
opacity: .55;
}
.uk-cart-empty__title {
font-family: var(--uk-font-display);
font-weight: 600;
font-size: 1.25rem;
margin: 0 0 .4rem;
color: var(--uk-text);
}
.uk-cart-empty__sub {
color: var(--uk-text-soft);
margin: 0 0 1.5rem;
font-size: .95rem;
}
/* =========================================================================
35. Fixes & polish (batch)
========================================================================= */
/* 35a. Mobile header — hamburger LINKS, logo CENTER, icons RECHTS,
volle breedte met spacing aan beide kanten */
@media (max-width: 1024px) {
.uk-header__inner {
grid-template-columns: 1fr auto 1fr !important;
}
.uk-header__hamburger { justify-self: start; }
.uk-header__brand { justify-self: center; }
.uk-header__icons { justify-self: end; }
}
/* 35b. Categorie-tegels: 2-per-rij op mobile */
@media (max-width: 700px) {
.uk-tiles {
grid-template-columns: repeat(2, 1fr) !important;
gap: .85rem;
}
.uk-tile {
padding: 1.25rem 1.1rem;
aspect-ratio: 1 / 1.2;
border-radius: 4px;
}
.uk-tile__sub { font-size: .65rem; letter-spacing: .18em; }
.uk-tile__name { font-size: 1.05rem; line-height: 1.05; margin: .65rem 0; }
.uk-tile__cta { font-size: .85rem; }
.uk-tile::before { background-size: 50px; }
}
/* 35c. Productkaart-knoppen kleiner op mobile (homepage + archive + slider) */
@media (max-width: 880px) {
.woocommerce ul.products li.product .button,
.uk-product-slider .button {
padding: .45em 1em !important;
font-size: .8rem !important;
margin-top: .4rem !important;
font-weight: 600 !important;
}
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-size: 1rem !important;
margin-top: .6rem !important;
}
.woocommerce ul.products li.product .price {
font-size: .95rem !important;
margin-top: .15rem !important;
}
.woocommerce ul.products li.product .uk-badge-new,
.uk-badge-new {
font-size: .6rem;
padding: .25em .65em;
top: 8px;
left: 8px;
}
.woocommerce span.onsale {
width: 42px;
height: 42px;
min-width: 42px;
min-height: 42px;
line-height: 42px;
font-size: .8rem;
top: -6px;
right: -6px;
}
}
/* 35d. Product cards — rotation alleen op desktop, nooit op archive
(eerder verdween eerste card door rotatie + overflow) */
@media (max-width: 1100px) {
.woocommerce ul.products li.product:nth-child(4n+1),
.woocommerce ul.products li.product:nth-child(4n+2),
.woocommerce ul.products li.product:nth-child(4n+3),
.woocommerce ul.products li.product:nth-child(4n+4) {
transform: none !important;
}
}
.uk-archive .woocommerce ul.products li.product,
.uk-archive__main .woocommerce ul.products li.product {
transform: none !important;
}
.uk-archive .woocommerce ul.products li.product:hover,
.uk-archive__main .woocommerce ul.products li.product:hover {
transform: translateY(-4px) !important;
}
/* Zorg dat het archive-grid alles toont (geen overflow-clip op eerste kaart) */
.uk-archive__main .woocommerce ul.products {
overflow: visible;
padding: 1rem 0 0;
}
/* WC's clearfix-pseudo-elementen op ul.products tellen mee als grid-items
en duwen de eerste kaart naar column 2. Uitschakelen. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
display: none !important;
content: none !important;
}
/* Archive: 4-col desktop, 3-col tussen, 2-col mobile */
.uk-archive__main .woocommerce ul.products.columns-4 { --uk-cols: 3 !important; }
@media (min-width: 1300px) {
.uk-archive__main .woocommerce ul.products.columns-4 { --uk-cols: 4 !important; }
}
@media (max-width: 1080px) {
.uk-archive__main .woocommerce ul.products.columns-4 { --uk-cols: 2 !important; }
}
/* 35e. PDP — hide flexslider arrows + wc-forward arrows + oversized
overlay-arrows die soms op gerelateerde producten verschijnen */
.flex-direction-nav,
.woocommerce-product-gallery .flex-direction-nav,
.woocommerce-product-gallery__trigger ~ ul.flex-direction-nav {
display: none !important;
}
.woocommerce a.wc-forward::after,
.woocommerce .wc-forward::after,
.uk-product-slider .button.wc-forward::after,
.uk-product-slider .added_to_cart::after,
.added_to_cart::after,
.button.wc-forward::after {
display: none !important;
content: none !important;
}
/* Garandeer dat slider-nav-buttons NOOIT oversized renderen */
.uk-product-slider__btn {
width: 48px !important;
height: 48px !important;
flex: 0 0 48px;
padding: 0 !important;
font-size: 1rem !important;
}
.uk-product-slider__btn svg {
width: 22px !important;
height: 22px !important;
display: block;
}
/* Geen quick-view of permalink-overlay arrows op product loop items */
.uk-product-slider .woocommerce-loop-product__link::after,
.products .woocommerce-loop-product__link::after,
.products a.added_to_cart {
display: none !important;
content: none !important;
}
/* 35f. Side-cart — verzendkosten lijn + totaal lijn */
/* Cross-sells in side cart drawer */
.uk-mini-cart-crosssells {
margin: 1rem 0 0;
padding: 1rem;
background: var(--uk-bg-cream);
border: 1px dashed var(--uk-border);
border-radius: 8px;
}
.uk-mini-cart-crosssells__title {
font-family: var(--uk-font-heading);
font-weight: 700;
font-size: .8rem;
text-transform: uppercase;
letter-spacing: .15em;
color: var(--uk-text-muted);
margin: 0 0 .75rem;
}
.uk-mini-cart-crosssells__list {
display: flex;
flex-direction: column;
gap: .65rem;
}
.uk-xsell {
display: grid;
grid-template-columns: 56px 1fr auto;
gap: .65rem;
align-items: center;
background: #fff;
border: 1px solid var(--uk-border);
border-radius: 6px;
padding: .5rem;
}
.uk-xsell__thumb img,
.uk-xsell__img {
width: 56px;
height: 56px;
object-fit: cover;
border-radius: 4px;
background: var(--uk-bg-cream);
display: block;
}
.uk-xsell__body { min-width: 0; }
.uk-xsell__name {
font-family: var(--uk-font-display);
font-weight: 600;
font-size: .85rem;
color: var(--uk-text);
line-height: 1.2;
display: block;
margin-bottom: .15rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.uk-xsell__name:hover { color: var(--uk-magenta); }
.uk-xsell__price {
margin: 0;
font-family: var(--uk-font-heading);
font-weight: 700;
font-size: .8rem;
color: var(--uk-magenta-dark);
}
.uk-xsell__add {
background: var(--uk-magenta) !important;
color: #fff !important;
border: 0 !important;
border-radius: 999px !important;
padding: .45em .85em !important;
font-family: var(--uk-font-heading);
font-weight: 600;
font-size: .75rem !important;
white-space: nowrap;
cursor: pointer;
box-shadow: 0 2px 6px rgba(230,0,126,.25);
}
.uk-xsell__add:hover { background: var(--uk-magenta-dark) !important; transform: translateY(-1px); }
/* Verzending nu compact ALS lijn onder subtotaal */
.uk-cart-drawer__line {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: .5rem;
padding: .35rem 0;
font-family: var(--uk-font-body);
font-size: .95rem;
color: var(--uk-text);
}
.uk-cart-drawer__line--ship {
color: var(--uk-text-soft);
font-size: .88rem;
}
.uk-cart-drawer__line small {
font-size: .7rem;
color: var(--uk-text-muted);
font-weight: 400;
}
.uk-cart-drawer__free {
color: var(--uk-lime-dark);
font-weight: 700;
font-family: var(--uk-font-heading);
}
.uk-cart-drawer__total {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: .5rem;
padding: .75rem 0 .35rem;
margin-top: .35rem;
border-top: 2px solid var(--uk-magenta);
font-family: var(--uk-font-display);
font-size: 1.05rem;
color: var(--uk-text);
}
.uk-cart-drawer__total strong {
color: var(--uk-magenta-dark);
font-size: 1.4rem;
font-weight: 700;
}
.uk-cart-drawer__total small {
font-size: .7rem;
color: var(--uk-text-muted);
font-family: var(--uk-font-body);
font-weight: 400;
margin-left: .25rem;
}
/* 35g. USP-bar — op mobile een per-slide marquee (één USP per moment) */
@media (max-width: 700px) {
.uk-usp-bar { padding: .35rem 0; }
.uk-usp-bar__inner {
flex-wrap: nowrap;
justify-content: center;
gap: 0;
padding: .5em .9rem;
position: relative;
height: 1.6em;
overflow: hidden;
}
.uk-usp-bar__inner .uk-usp__sep { display: none; }
.uk-usp-bar__inner .uk-usp {
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
justify-content: center;
opacity: 0;
animation: uk-usp-cycle 12s infinite ease-in-out;
gap: .45rem;
}
.uk-usp-bar__inner .uk-usp:nth-of-type(1) { animation-delay: 0s; }
.uk-usp-bar__inner .uk-usp:nth-of-type(3) { animation-delay: 3s; }
.uk-usp-bar__inner .uk-usp:nth-of-type(5) { animation-delay: 6s; }
.uk-usp-bar__inner .uk-usp:nth-of-type(7) { animation-delay: 9s; }
}
@keyframes uk-usp-cycle {
0% { opacity: 0; transform: translate(0, -40%); }
5% { opacity: 1; transform: translate(0, -50%); }
25% { opacity: 1; transform: translate(0, -50%); }
30% { opacity: 0; transform: translate(0, -60%); }
100% { opacity: 0; transform: translate(0, -60%); }
}
/* Respecteer reduced-motion */
@media (prefers-reduced-motion: reduce) {
.uk-usp-bar__inner .uk-usp { animation: none; opacity: 1 !important; transform: translateY(-50%) !important; position: static; }
.uk-usp-bar__inner { height: auto; overflow: visible; flex-wrap: wrap; }
}
/* =========================================================================
36. Distraction-free checkout — header, footer, steps, page
========================================================================= */
/* Body in checkout-flow */
body.uk-checkout-flow {
background: var(--uk-bg-warm);
}
/* Minimal header — logo + trust + help */
.uk-checkout-header {
background: #fff;
border-bottom: 1px solid var(--uk-border);
padding: 1.1rem 0 0;
}
.uk-checkout-header__inner {
max-width: 1240px;
margin: 0 auto;
padding: 0 1.5rem 1.1rem;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 1.5rem;
}
.uk-checkout-header__logo {
justify-self: start;
display: inline-flex;
}
.uk-checkout-header__img {
max-height: 56px;
width: auto;
height: auto;
}
.uk-checkout-header__trust {
justify-self: center;
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 1.8rem;
font-family: var(--uk-font-heading);
font-size: .9rem;
color: var(--uk-text-soft);
}
.uk-checkout-header__trust li {
display: inline-flex;
align-items: center;
gap: .45rem;
}
.uk-checkout-header__icon { font-size: 1rem; line-height: 1; }
.uk-checkout-header__trust strong { color: var(--uk-text); }
.uk-checkout-header__help {
justify-self: end;
text-align: right;
font-family: var(--uk-font-heading);
}
.uk-checkout-header__help-label {
display: block;
font-size: .75rem;
text-transform: uppercase;
letter-spacing: .2em;
color: var(--uk-text-muted);
margin-bottom: .15rem;
}
.uk-checkout-header__phone {
font-weight: 700;
color: var(--uk-magenta-dark);
font-size: 1rem;
}
.uk-checkout-header__phone:hover { color: var(--uk-magenta); }
@media (max-width: 880px) {
.uk-checkout-header__inner {
grid-template-columns: auto 1fr auto;
gap: 1rem;
}
.uk-checkout-header__img { max-height: 40px; }
.uk-checkout-header__trust { display: none; }
.uk-checkout-header__help-label { display: none; }
.uk-checkout-header__phone { font-size: .85rem; }
}
/* Voortgang-indicator (Winkelwagen → Afrekenen → Bevestiging) */
.uk-checkout-steps {
background: var(--uk-bg-cream);
border-top: 1px dashed var(--uk-border);
border-bottom: 1px dashed var(--uk-border);
padding: .85rem 1.5rem;
}
.uk-checkout-steps__list {
max-width: 700px;
margin: 0 auto;
padding: 0;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
gap: .5rem;
counter-reset: uk-step;
}
.uk-checkout-steps__item {
flex: 1;
display: flex;
align-items: center;
gap: .55rem;
font-family: var(--uk-font-heading);
font-weight: 600;
font-size: .9rem;
color: var(--uk-text-muted);
position: relative;
}
.uk-checkout-steps__item + .uk-checkout-steps__item::before {
content: "";
display: block;
width: 100%;
height: 2px;
background: var(--uk-border);
flex: 1 1 auto;
margin-right: .55rem;
}
.uk-checkout-steps__num {
display: inline-grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: #fff;
border: 2px solid var(--uk-border);
font-family: var(--uk-font-display);
font-weight: 700;
font-size: .8rem;
color: var(--uk-text-muted);
flex: 0 0 28px;
}
.uk-checkout-steps__item.is-active .uk-checkout-steps__num {
background: var(--uk-magenta);
border-color: var(--uk-magenta);
color: #fff;
box-shadow: 0 0 0 4px var(--uk-magenta-soft);
}
.uk-checkout-steps__item.is-active {
color: var(--uk-text);
}
.uk-checkout-steps__item.is-done .uk-checkout-steps__num {
background: var(--uk-lime-soft);
border-color: var(--uk-lime-dark);
color: var(--uk-lime-dark);
}
.uk-checkout-steps__item.is-done {
color: var(--uk-text-soft);
}
.uk-checkout-steps__item.is-done + .uk-checkout-steps__item::before,
.uk-checkout-steps__item.is-active + .uk-checkout-steps__item::before {
background: var(--uk-magenta);
}
@media (max-width: 600px) {
.uk-checkout-steps__label { display: none; }
.uk-checkout-steps__list { max-width: 320px; }
.uk-checkout-steps__num { width: 32px; height: 32px; font-size: .85rem; }
}
/* Page content in checkout-flow (geen hero, gewoon direct content) */
.uk-checkout-content { background: var(--uk-bg-warm); padding-bottom: 0; }
.uk-checkout-page {
padding: clamp(2rem, 4vw, 3.5rem) 0;
}
.uk-checkout-page__title {
font-family: var(--uk-font-display);
font-weight: 700;
font-size: clamp(1.6rem, 3vw, 2.2rem);
letter-spacing: -0.02em;
margin: 0 0 1.5rem;
color: var(--uk-text);
}
.uk-checkout-page__article > * + * { margin-top: 1rem; }
/* Minimal footer — copyright + policy links + payments */
.uk-checkout-footer {
background: var(--uk-bg-cream);
border-top: 1px dashed var(--uk-border);
padding: 1.5rem 0 1.75rem;
text-align: center;
margin-top: 2rem;
}
.uk-checkout-footer__inner {
max-width: 1100px;
margin: 0 auto;
padding: 0 1.5rem;
}
.uk-checkout-footer__pays {
display: flex;
justify-content: center;
gap: .5rem;
flex-wrap: wrap;
margin-bottom: 1rem;
}
.uk-checkout-footer__pays .uk-pay {
background: #fff;
color: var(--uk-text-soft);
border: 1px solid var(--uk-border);
}
.uk-checkout-footer__links {
list-style: none;
padding: 0;
margin: 0 0 1rem;
display: flex;
justify-content: center;
gap: 1.5rem 2rem;
flex-wrap: wrap;
font-family: var(--uk-font-heading);
font-size: .85rem;
}
.uk-checkout-footer__links a {
color: var(--uk-text-soft);
border-bottom: 1px solid transparent;
}
.uk-checkout-footer__links a:hover {
color: var(--uk-magenta);
border-bottom-color: var(--uk-magenta);
}
.uk-checkout-footer__copyright {
font-size: .85rem;
color: var(--uk-text-soft);
margin: 0 0 .5rem;
}
.uk-checkout-footer__copyright .uk-script {
color: var(--uk-magenta);
font-size: 1.15em;
}
.uk-checkout-footer__trust {
font-family: var(--uk-font-heading);
font-size: .8rem;
color: var(--uk-text-muted);
margin: 0;
}
@media (max-width: 600px) {
.uk-checkout-footer__links { gap: .75rem 1.25rem; font-size: .8rem; }
}
/* =========================================================================
14. WooCommerce notices (info/error/success)
========================================================================= */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
border-radius: var(--uk-radius-sm);
border: 0;
padding: 1em 1.25em;
}
.woocommerce-info {
background: var(--uk-cyan-soft);
color: var(--uk-cyan-dark);
border-top: 3px solid var(--uk-cyan);
}
.woocommerce-message {
background: var(--uk-lime-soft);
color: var(--uk-lime-dark);
border-top: 3px solid var(--uk-lime);
}
.woocommerce-error {
background: var(--uk-magenta-soft);
color: var(--uk-magenta-dark);
border-top: 3px solid var(--uk-magenta);
}