/* Cormorant Garamond: variable wght axis 300-700, zelfgehost */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url('/static/fonts/cormorant-garamond-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url('/static/fonts/cormorant-garamond-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root{
--bg:#f4efe6;
--bg-soft:#faf6ed;
--ink:#2a2520;
--muted:#5a5048;
--line:#e2d9cb;
--accent:#7a4d31;
--accent-soft:#c8a079;
--notice:#fff7e3;
--ok:#2e6638;
--warn:#964a00;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
/* focus visibility (WCAG 2.4.7) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 4px;
}
/* trust strip under product buy-form */
.trust-strip {
margin: 4px 0 32px;
padding: 10px 0 0;
color: var(--muted);
}
/* USP-strip (homepage) */
.usp{margin:32px 0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.usp-card{padding:24px 22px;background:var(--bg-soft);border:1px solid var(--line);border-radius:12px}
.usp-card .usp-icon{width:32px;height:32px;display:block;margin-bottom:14px;color:var(--accent)}
.usp-card h3{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;font-size:20px;letter-spacing:-.005em;margin:0 0 6px;color:var(--ink)}
.usp-card p{margin:0;font-size:14px;color:var(--muted);line-height:1.55}
@media(max-width:640px){.usp{grid-template-columns:1fr;gap:14px}}
/* Verzendingsbanner (homepage, boven footer) */
.ship-banner{background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;padding:22px 24px;margin:32px 0 0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 28px;color:var(--muted);font-size:14px;text-align:center}
.ship-banner span{display:inline-flex;align-items:center;gap:8px}
.ship-banner strong{color:var(--ink);font-weight:500}
/* Band foot link (Bekijk de hele collectie etc) */
.band-foot{margin:24px 0 0;text-align:center;font-size:15px}
.band-foot a{border-bottom:1px solid var(--line);padding-bottom:2px}
.band-foot a:hover{color:var(--accent);border-bottom-color:var(--accent)}
/* Story-section: full-bleed background + centered prose with pull-quote */
.story-section{
background:var(--bg-soft);
border-top:1px solid var(--line);
padding:64px 24px;
margin:64px calc(50% - 50vw) 0;
}
.story-inner{max-width:62ch;margin:0 auto}
.story-inner p{margin:0 0 18px;font-size:17px;line-height:1.6}
.story-inner .section-title{margin-bottom:18px}
.pull{
position:relative;
margin:40px 0;
padding:32px 0 0 28px;
border-left:3px solid var(--accent);
font-family:"Cormorant Garamond","Source Serif 4",Georgia,serif;
font-size:clamp(22px,3vw,30px);
font-weight:500;
font-style:italic;
letter-spacing:-.005em;
line-height:1.3;
color:var(--ink);
text-wrap:balance;
}
.pull::before{
content:"\201C";
position:absolute;
left:18px;
top:-4px;
font-size:48px;
line-height:1;
color:var(--accent-soft);
font-style:normal;
font-weight:500;
}
/* FAQ-band styling: narrower, centered */
.band.faq{max-width:62ch;margin-left:auto;margin-right:auto;padding:0 8px}
.band.faq .section-title{text-align:center}
/* FAQ */
.faq{max-width:62ch}
.faq-item{border-bottom:1px solid var(--line);padding:4px 0}
.faq-item summary{cursor:pointer;font-size:16px;font-weight:500;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;min-height:44px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:var(--muted);font-size:20px;line-height:1;flex-shrink:0;transition:transform .2s ease;speak:none}
.faq-item[open] summary::after{content:"−"}
.faq-item summary:hover{color:var(--accent)}
.faq-item p{margin:10px 0 4px;color:var(--muted);max-width:60ch}
.faq-outro{margin:32px auto 0;max-width:60ch;text-align:center;font-size:15px;line-height:1.55}
.faq-outro a{color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:1px}
.faq-outro a:hover{color:var(--accent);border-bottom-color:var(--accent)}
/* CSP-cleanup: voorheen inline style="" attrs, nu nette classes */
.not-found-kicker{letter-spacing:.08em;text-transform:uppercase;margin:0 0 12px}
.not-found-actions{margin-top:24px}
.empty-cart-grid{margin-top:24px}
.empty-cart-foot{text-align:center;margin-top:24px}
.gids-grid{margin-top:32px}
.gids-tile-kicker{margin-bottom:6px}
.gids-tile-title{font-family:"Cormorant Garamond",Georgia,serif;font-size:22px;font-weight:500;letter-spacing:-.005em;margin:0 0 8px}
.gids-tile-title-sm{font-family:"Cormorant Garamond",Georgia,serif;font-size:20px;font-weight:500;letter-spacing:-.005em;margin:0 0 8px}
.gids-tile-cta{font-size:14px;color:var(--accent);margin-top:auto}
.gids-article-crumb{margin-bottom:16px}
.gids-article-kicker{margin:0 0 8px;letter-spacing:.06em;text-transform:uppercase}
.gids-article-rule{margin:48px 0;border:0;border-top:1px solid var(--line)}
.gids-other{margin-top:48px}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Inter","Helvetica Neue",Arial,sans-serif;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;text-wrap:pretty;overflow-x:hidden}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent)}
::selection{background:var(--accent);color:#fff}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
/* layout */
.page{max-width:1080px;margin:0 auto;padding:48px 24px 64px;min-height:60vh}
.section-title{font-family:"Cormorant Garamond","Source Serif 4",Georgia,serif;font-weight:500;font-size:clamp(28px,3.2vw,36px);letter-spacing:-.01em;margin:0 0 24px;text-wrap:balance}
.muted{color:var(--muted)}
.small{font-size:13px}
/* header */
.topbar{position:sticky;top:0;background:var(--bg);border-bottom:1px solid var(--line);z-index:50}
.bar-inner{max-width:1080px;margin:0 auto;padding:18px 24px;display:flex;align-items:center;gap:24px}
.brand{font-family:"Cormorant Garamond",Georgia,serif;font-weight:700;font-size:24px;letter-spacing:-.015em;color:var(--ink)}
.brand em{font-style:normal;color:var(--accent);margin-left:-1px;font-weight:900;font-size:28px;line-height:0;display:inline-block;transform:translateY(2px)}
.nav{margin-left:auto;display:flex;gap:24px;font-size:15px}
.nav a{position:relative;padding-bottom:4px;border-bottom:none}
.nav a::after{
content:"";
position:absolute;
left:0;right:100%;bottom:0;
height:2px;
background:var(--accent);
transition:right .25s cubic-bezier(.4,.0,.2,1);
}
.nav a:hover::after,
.nav a:focus-visible::after{right:0}
.nav a[aria-current="page"]::after{right:0;background:var(--accent)}
/* mobile nav */
.nav-hamburger{display:none;cursor:pointer;margin-left:auto;padding:10px;width:44px;height:44px;background:transparent;border:0;flex-direction:column;justify-content:center;gap:5px;align-items:center}
.nav-hamburger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s ease,opacity .2s ease}
@media(max-width:680px){
.nav-hamburger{display:flex}
.nav{position:absolute;top:100%;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--line);flex-direction:column;gap:0;padding:0;max-height:0;overflow:hidden;transition:max-height .25s ease}
.nav a{padding:14px 24px;border-bottom:1px solid var(--line);min-height:44px;display:flex;align-items:center}
body.nav-open .nav{max-height:400px}
body.nav-open .nav-hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .nav-hamburger span:nth-child(2){opacity:0}
body.nav-open .nav-hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
.cart-wrap{position:relative}
.cart-link{display:flex;align-items:center;gap:8px;border:1px solid var(--line);padding:10px 16px;border-radius:999px;font-size:13px;min-height:44px;transition:border-color .2s,color .2s,transform .12s}
.cart-link:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.cart-link:hover .cart-icon{animation:cart-jiggle .5s ease-out}
.cart-icon{transform:translateY(0);color:currentColor;transform-origin:center}
@keyframes cart-jiggle{
0%{transform:rotate(0)}
25%{transform:rotate(-8deg) translateY(-1px)}
60%{transform:rotate(6deg)}
100%{transform:rotate(0)}
}
.cart-count{font-variant-numeric:tabular-nums;min-width:1.4ch;text-align:center;background:var(--accent);color:#fff;border-radius:999px;padding:1px 7px;font-size:11px;font-weight:700;line-height:1.4;animation:cart-pop .4s ease-out}
@keyframes cart-pop{
0%{transform:scale(0.6);opacity:0}
60%{transform:scale(1.18)}
100%{transform:scale(1);opacity:1}
}
/* hero */
.hero{
position:relative;
padding:0;
border-bottom:1px solid var(--line);
margin-bottom:32px;
min-height:clamp(440px,52vw,640px);
display:flex;
align-items:center;
isolation:isolate;
}
.hero-stacked{position:relative}
.hero-scene-band{
position:absolute;
top:0;left:50%;
transform:translateX(-50%);
width:100vw;
height:100%;
overflow:hidden;
background:linear-gradient(180deg, #f4eedd 0%, #f4efe6 70%);
z-index:0;
}
.hero-scene-band::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(90deg, rgba(244,239,230,0.92) 0%, rgba(244,239,230,0.55) 18%, rgba(244,239,230,0) 38%);
pointer-events:none;
z-index:1;
}
.hero-scene-band .sheep-scene{
position:absolute;inset:0;
width:100%;height:100%;
display:block;
}
.hero-scene-band .sheep-scene>*{pointer-events:none}
.hero-scene-band .sheep-scene .sheep-clickable{pointer-events:auto}
.hero-text{
position:relative;
z-index:2;
padding:40px 0 56px;
max-width:560px;
}
.hero-grid{display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center}
.hero-text{min-width:0;max-width:780px}
.sheep-puff{
position:absolute;
font-size:24px;color:#d99a76;
pointer-events:none;
transform:translateX(-50%);
animation:sheep-puff-rise 1.2s ease-out forwards;
z-index:5;
}
@keyframes sheep-puff-rise{
0%{opacity:0;transform:translateX(-50%) translateY(0) scale(0.4)}
20%{opacity:1;transform:translateX(-50%) translateY(-6px) scale(1)}
100%{opacity:0;transform:translateX(-50%) translateY(-46px) scale(0.9)}
}
.sheep-clickable{transition:filter .2s ease}
.sheep-clickable:hover{filter:drop-shadow(0 4px 8px rgba(42,37,32,0.18))}
.sheep-clickable.hopping{animation:creature-hop .55s cubic-bezier(.22,.61,.36,1)}
@keyframes creature-hop{
0%{transform:translateY(0)}
35%{transform:translateY(-22px)}
60%{transform:translateY(-10px)}
80%{transform:translateY(-16px)}
100%{transform:translateY(0)}
}
.sheep-clickable{transform-box:fill-box;transform-origin:bottom center}
.creature-eye{transition:transform .15s ease}
.sheep-head, .lamb-head{transition:transform .25s cubic-bezier(.4,0,.2,1)}
@media (prefers-reduced-motion: reduce){
.sheep-clickable.hopping{animation:none}
.sheep-head, .lamb-head{transition:none}
}
.hero-title{font-family:"Cormorant Garamond","Source Serif 4",Georgia,serif;font-weight:500;font-size:clamp(40px,5.6vw,68px);line-height:1.02;letter-spacing:-.02em;margin:0;text-wrap:balance;max-width:18ch}
.hero-title em{font-style:normal;color:var(--accent)}
.hero-lede{margin:24px 0 18px;max-width:54ch;color:var(--muted);font-size:19px;text-wrap:balance}
.hero-anchor{
display:inline-flex;
flex-wrap:wrap;
align-items:center;
gap:6px 10px;
margin:0 0 28px;
max-width:100%;
padding:8px 16px 8px 14px;
background:linear-gradient(180deg, #f7ecdc 0%, #efdfc6 100%);
border:1px solid var(--accent-soft);
border-radius:24px;
font-size:15px;
font-weight:500;
color:var(--ink);
font-variant-numeric:tabular-nums;
box-shadow:0 2px 6px rgba(122,77,49,0.08);
box-sizing:border-box;
}
.hero-anchor::before{
content:"vanaf";
display:inline-block;
background:var(--accent);
color:#fff;
font-size:11px;
font-weight:700;
letter-spacing:0.04em;
text-transform:uppercase;
padding:3px 8px;
border-radius:999px;
}
.hero-anchor strong{font-weight:700;color:var(--accent)}
.hero-anchor-chip{display:inline-flex;align-items:baseline;gap:4px;white-space:nowrap}
.hero-anchor-chip:not(:last-child)::after{content:"·";color:var(--accent);opacity:0.55;font-weight:700;margin-left:2px}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px}
.hero-actions .btn-big{width:auto;margin-top:0}
.hero-actions .btn-link{font-size:14px;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:1px}
.hero-actions .btn-link{position:relative;overflow:hidden}
.hero-actions .btn-link::after{content:" →";opacity:.7;display:inline-block;transition:transform .25s ease,opacity .25s ease;margin-left:2px}
.hero-actions .btn-link:hover{color:var(--accent);border-bottom-color:var(--accent)}
.hero-actions .btn-link:hover::after{transform:translateX(4px);opacity:1}
.hero-trust{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px;font-size:13px;color:var(--muted)}
.hero-trust li{position:relative;padding-left:18px}
.hero-trust li::before{content:"";position:absolute;left:0;top:6px;width:10px;height:5px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.hero-art{display:none}
/* Schaap-animaties: het schaap "leeft" via meerdere onafhankelijke loops.
transform-box:fill-box: zonder dit gebruikt Firefox het hele SVG-document
als origin-canvas waardoor transform-origin niet werkt zoals verwacht.
.sheep zelf hopt voor extra speelsheid; child-groepen doen lokale bewegingen. */
.sheep, .sheep-body, .sheep-head, .sheep-tail, .sheep-eye, .sheep-shadow,
.sheep-ear-l, .sheep-ear-r, .sheep-cheek{
transform-box:fill-box;
transform-origin:center;
will-change:transform;
}
.sheep{animation:sheep-hop 2.8s ease-in-out infinite;cursor:pointer}
.sheep-body{animation:sheep-breathe 4.2s ease-in-out infinite}
.sheep-head{animation:sheep-nod 6.5s ease-in-out infinite;transform-origin:left center}
.sheep-tail{animation:sheep-tail 1.8s ease-in-out infinite}
.sheep-eye{animation:sheep-blink 5.8s linear infinite}
.sheep-shadow{animation:sheep-shadow 2.8s ease-in-out infinite}
.sheep-ear-r{animation:ear-wiggle-r 3.7s ease-in-out infinite}
.sheep-ear-l{animation:ear-wiggle-l 4.1s ease-in-out infinite}
.sheep-cheek{animation:sheep-cheek 7s ease-in-out infinite;opacity:0}
@keyframes sheep-hop{
0%, 100%{transform:translateY(0)}
40%{transform:translateY(-3px)}
50%{transform:translateY(-4px)}
60%{transform:translateY(-3px)}
}
@keyframes sheep-breathe{
0%, 100%{transform:scale(1)}
50%{transform:scale(1.04)}
}
@keyframes sheep-shadow{
0%, 100%{transform:scaleX(1);opacity:0.12}
50%{transform:scaleX(0.82);opacity:0.06}
}
@keyframes sheep-nod{
0%, 70%, 100%{transform:rotate(0deg) translateY(0)}
80%{transform:rotate(-4deg) translateY(-1px)}
90%{transform:rotate(2deg)}
}
@keyframes sheep-tail{
0%, 100%{transform:rotate(0deg)}
25%{transform:rotate(14deg)}
75%{transform:rotate(-12deg)}
}
@keyframes sheep-blink{
0%, 88%, 100%{transform:scaleY(1)}
92%, 95%{transform:scaleY(0.1)}
}
@keyframes ear-wiggle-r{
0%, 100%{transform:rotate(0deg)}
40%{transform:rotate(-12deg)}
60%{transform:rotate(-5deg)}
}
@keyframes ear-wiggle-l{
0%, 100%{transform:rotate(0deg)}
35%{transform:rotate(10deg)}
55%{transform:rotate(3deg)}
}
@keyframes sheep-cheek{
0%, 85%, 100%{opacity:0}
88%, 95%{opacity:0.5}
}
/* Hover: alles versnelt + kop kijkt op. Het schaap reageert op je. */
.hero-art:hover .sheep{animation-duration:1.4s}
.hero-art:hover .sheep-body{animation-duration:2.1s}
.hero-art:hover .sheep-head{animation:sheep-look 0.4s ease-out forwards}
.hero-art:hover .sheep-tail{animation-duration:0.45s}
.hero-art:hover .sheep-ear-r{animation-duration:1.2s}
.hero-art:hover .sheep-ear-l{animation-duration:1.4s}
.hero-art:hover .sheep-shadow{animation-duration:1.4s}
@keyframes sheep-look{
to{transform:rotate(-12deg) translate(-2px,-2px)}
}
/* Active (click/tap): kort indrukken voor een fysieke "boop"-respons. */
.hero-art:active .sheep{transform:translateY(2px) scale(0.97);transition:transform 0.12s ease-out}
@media (prefers-reduced-motion: reduce){
.sheep, .sheep-body, .sheep-head, .sheep-tail, .sheep-eye, .sheep-shadow,
.sheep-ear-l, .sheep-ear-r, .sheep-cheek{animation:none}
}
/* Lammetje (kleiner, eigen ritme zodat het niet synchroon-creepy aanvoelt) */
.lamb, .lamb-body, .lamb-head, .lamb-shadow, .lamb-eye, .lamb-ear{
transform-box:fill-box;transform-origin:center;will-change:transform;
}
.lamb{animation:lamb-hop 3.4s ease-in-out infinite -.6s}
.lamb-body{animation:sheep-breathe 3.6s ease-in-out infinite -.3s}
.lamb-head{animation:lamb-nod 5.2s ease-in-out infinite;transform-origin:left center}
.lamb-eye{animation:sheep-blink 6.4s linear infinite -.9s}
.lamb-shadow{animation:lamb-shadow 3.4s ease-in-out infinite -.6s}
.lamb-ear{animation:ear-wiggle-r 3.3s ease-in-out infinite -.5s;transform-box:fill-box;transform-origin:center}
@keyframes lamb-hop{
0%,100%{transform:translateY(0)}
45%{transform:translateY(-2.5px)}
55%{transform:translateY(-3.5px)}
}
@keyframes lamb-nod{
0%,68%,100%{transform:rotate(0deg)}
80%{transform:rotate(-5deg)}
90%{transform:rotate(3deg)}
}
@keyframes lamb-shadow{
0%,100%{transform:scaleX(1);opacity:0.12}
50%{transform:scaleX(0.78);opacity:0.06}
}
@media (prefers-reduced-motion: reduce){
.lamb, .lamb-body, .lamb-head, .lamb-shadow, .lamb-eye, .lamb-ear{animation:none}
}
/* Scène-elementen rondom het schaap: zon, wolken, gras, bloemen, vlinder */
.sun, .sun-halo, .cloud-1, .cloud-2,
.grass-tuft, .flower-1, .flower-2, .flower-3,
.butterfly, .bf-wing-l, .bf-wing-r{
transform-box:fill-box;transform-origin:center;
}
.sun{animation:sun-pulse 4.5s ease-in-out infinite}
.sun-halo{animation:sun-halo 4.5s ease-in-out infinite}
@keyframes sun-pulse{
0%,100%{transform:scale(1)}
50%{transform:scale(1.07)}
}
@keyframes sun-halo{
0%,100%{opacity:0.85}
50%{opacity:1}
}
@keyframes sun-rays{
to{transform:rotate(360deg)}
}
.cloud-1{animation:cloud-drift-1 32s linear infinite}
.cloud-2{animation:cloud-drift-2 38s linear infinite}
.cloud-3{animation:cloud-drift-1 44s linear infinite -8s}
.bird-1{animation:bird-flap 3s ease-in-out infinite}
.bird-2{animation:bird-flap 2.6s ease-in-out infinite -.4s}
.tree, .tree-foliage, .tree-foliage-2, .tree-foliage-3{transform-box:fill-box;transform-origin:bottom center}
.tree{animation:tree-sway 7s ease-in-out infinite;transform-origin:50% 100%}
.tree-foliage{animation:tree-foliage-sway 6s ease-in-out infinite}
.tree-foliage-2{animation:tree-foliage-sway 5.5s ease-in-out infinite -.5s}
.tree-foliage-3{animation:tree-foliage-sway 6.2s ease-in-out infinite -1.1s}
@keyframes tree-sway{
0%,100%{transform:rotate(0deg)}
50%{transform:rotate(0.6deg)}
}
@keyframes tree-foliage-sway{
0%,100%{transform:translateY(0) rotate(0deg)}
50%{transform:translateY(-2px) rotate(1.2deg)}
}
@keyframes bird-flap{
0%,100%{transform:translate(0,0) scaleY(1)}
50%{transform:translate(0,-2px) scaleY(0.6)}
}
@keyframes cloud-drift-1{
0%{transform:translateX(0)}
50%{transform:translateX(8px)}
100%{transform:translateX(0)}
}
@keyframes cloud-drift-2{
0%{transform:translateX(0)}
50%{transform:translateX(-6px)}
100%{transform:translateX(0)}
}
.grass-tuft{transform-origin:bottom center}
.tuft-1{animation:grass-sway 3.2s ease-in-out infinite}
.tuft-2{animation:grass-sway 3.6s ease-in-out infinite -.4s}
.tuft-3{animation:grass-sway 3.1s ease-in-out infinite -.9s}
.tuft-4{animation:grass-sway 3.5s ease-in-out infinite -.2s}
.tuft-5{animation:grass-sway 3.3s ease-in-out infinite -.7s}
.tuft-6{animation:grass-sway 3.7s ease-in-out infinite -.3s}
.tuft-7{animation:grass-sway 3.0s ease-in-out infinite -1.1s}
@keyframes grass-sway{
0%,100%{transform:rotate(0deg)}
50%{transform:rotate(3deg)}
}
.flower-1, .flower-2, .flower-3, .flower-4{transform-origin:bottom center}
.flower-1{animation:flower-bob 4s ease-in-out infinite}
.flower-2{animation:flower-bob 4.4s ease-in-out infinite -.6s}
.flower-3{animation:flower-bob 3.8s ease-in-out infinite -1.2s}
.flower-4{animation:flower-bob 4.2s ease-in-out infinite -.3s}
@keyframes flower-bob{
0%,100%{transform:rotate(0deg) translateY(0)}
50%{transform:rotate(-3deg) translateY(-1px)}
}
.butterfly{animation:butterfly-path 12s ease-in-out infinite}
.bf-wing-l{animation:wing-l .28s ease-in-out infinite;transform-origin:right center}
.bf-wing-r{animation:wing-r .28s ease-in-out infinite;transform-origin:left center}
@keyframes butterfly-path{
0%{transform:translate(0,0)}
20%{transform:translate(-60px,-30px)}
40%{transform:translate(40px,-50px)}
60%{transform:translate(80px,-20px)}
80%{transform:translate(20px,20px)}
100%{transform:translate(0,0)}
}
@keyframes wing-l{
0%,100%{transform:scaleX(1)}
50%{transform:scaleX(0.35)}
}
@keyframes wing-r{
0%,100%{transform:scaleX(1)}
50%{transform:scaleX(0.35)}
}
@media (prefers-reduced-motion: reduce){
.sun, .sun-halo, .sun-rays,
.cloud-1, .cloud-2,
.grass-tuft, .flower-1, .flower-2, .flower-3,
.butterfly, .bf-wing-l, .bf-wing-r{animation:none}
}
/* breeds-strip onder hero */
.breeds-strip{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:8px 28px;padding:18px 0;border-bottom:1px solid var(--line);margin:0 0 32px}
.breeds-strip .breeds-label{margin-right:6px}
.breeds-strip .breed{display:inline-flex;align-items:center;gap:8px;font-family:"Cormorant Garamond",Georgia,serif;font-size:18px;font-weight:500;color:var(--ink);letter-spacing:-.005em}
.breed-dot{
display:inline-block;width:12px;height:12px;border-radius:50%;
border:1px solid rgba(42,37,32,0.18);
box-shadow:inset 0 -1px 1px rgba(0,0,0,0.06);
flex-shrink:0;
}
.breed-dot-terschellinger{background:#f0e3c8}
.breed-dot-texelaar{background:#faf6ed}
.breed-dot-heide{background:#cfa784}
.breed-dot-zwartbles{background:#4a3220}
@media(max-width:640px){.breeds-strip{gap:6px 18px;font-size:15px}.breeds-strip .breed{font-size:16px}.breed-dot{width:10px;height:10px}}
@media(max-width:640px){
.hero-grid{grid-template-columns:1fr;gap:20px}
.hero{min-height:520px;padding:0}
.hero-text{padding:24px 0 40px;max-width:none}
.hero-scene-band::before{
background:linear-gradient(180deg, var(--bg) 0%, rgba(244,239,230,0.7) 30%, rgba(244,239,230,0) 60%);
}
.hero-anchor{font-size:14px;padding:7px 14px 7px 12px}
}
.band:first-of-type{margin-top:24px}
/* buttons */
.btn{display:inline-block;background:var(--ink);color:var(--bg-soft);padding:12px 22px;border-radius:999px;font-size:15px;border:1px solid var(--ink);cursor:pointer;transition:background-color .18s ease,border-color .18s ease,transform .12s ease,box-shadow .18s ease;box-shadow:0 2px 0 rgba(0,0,0,0.05)}
.btn:hover{background:var(--accent);border-color:var(--accent);color:#fff;transform:translateY(-1px);box-shadow:0 6px 16px -4px rgba(122,77,49,0.35)}
.btn:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(0,0,0,0.06)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.btn[disabled]{opacity:0.55;cursor:not-allowed;transform:none;box-shadow:none}
.btn-big{padding:14px 28px;font-size:17px;width:100%;text-align:center;margin-top:12px}
.btn-soft{background:transparent;color:var(--ink);border:1px solid var(--line);padding:10px 16px;border-radius:999px;font-size:13px;cursor:pointer;min-height:36px}
.btn-soft:hover{border-color:var(--accent);color:var(--accent)}
/* band & grid */
.band{margin:64px 0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:24px}
.grid-wide{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.tile{display:flex;flex-direction:column;background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;text-decoration:none}
.tile:hover{transform:translateY(-4px);border-color:var(--accent-soft);box-shadow:0 14px 32px -14px rgba(122,77,49,.25)}
.tile:hover .tile-img{transform:scale(1.06)}
.gids-tile{background:var(--bg-soft);position:relative;overflow:hidden}
.gids-tile .tile-body{padding:22px 24px 24px}
.gids-tile::before{
content:"";
position:absolute;
top:-30px;right:-30px;
width:120px;height:120px;
background:radial-gradient(circle, var(--accent-soft) 0%, transparent 70%);
opacity:0;
transition:opacity .3s ease,transform .35s ease;
pointer-events:none;
}
.gids-tile:hover::before{opacity:0.45;transform:scale(1.15)}
.gids-tile-cta{font-size:14px;color:var(--accent);margin-top:auto;display:inline-flex;align-items:center;gap:6px;transition:gap .25s ease}
.gids-tile-cta::after{content:"→";transition:transform .25s ease;display:inline-block}
.gids-tile:hover .gids-tile-cta::after{transform:translateX(4px)}
/* Product: trust-row onder buy-button */
.trust-row{
list-style:none;margin:18px 0 8px;padding:14px 0;
display:grid;grid-template-columns:1fr;gap:10px;
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
}
.trust-row-item{
display:flex;align-items:center;gap:10px;
font-size:13.5px;color:var(--muted);line-height:1.35;
}
.trust-row-icon{
flex:0 0 22px;width:22px;height:22px;
display:inline-flex;align-items:center;justify-content:center;
color:var(--accent);
}
.trust-row-icon svg{width:100%;height:100%}
.trust-row-item a{color:inherit;border-bottom:1px solid var(--line);padding-bottom:1px;transition:color .2s ease,border-color .2s ease}
.trust-row-item a:hover{color:var(--accent);border-bottom-color:var(--accent)}
/* Zorg: wel doen / niet doen tweekoloms-kaart */
.care-glance{
display:grid;grid-template-columns:1fr 1fr;gap:0;
margin:28px 0 40px;
background:#fff;
border:1px solid var(--line);
border-radius:8px;
overflow:hidden;
}
.care-col{padding:22px 26px}
.care-col + .care-col{border-left:1px solid var(--line)}
.care-col-head{
display:flex;align-items:center;gap:10px;
font-family:"Cormorant Garamond","Source Serif 4",Georgia,serif;
font-size:22px;font-weight:500;letter-spacing:-.005em;
margin-bottom:14px;padding-bottom:12px;
border-bottom:1px solid var(--line);
}
.care-mark{
display:inline-flex;align-items:center;justify-content:center;
width:30px;height:30px;border-radius:50%;
}
.care-mark svg{width:18px;height:18px}
.care-do .care-mark{background:rgba(67,140,90,0.12);color:#3d7e54}
.care-dont .care-mark{background:rgba(173,82,82,0.12);color:#a14848}
.care-col ul{margin:0;padding:0;list-style:none}
.care-col li{
position:relative;
padding:8px 0 8px 22px;
border-bottom:1px solid var(--line);
font-size:15.5px;line-height:1.5;color:var(--ink);
}
.care-col li:last-child{border-bottom:none}
.care-col li::before{
content:"";position:absolute;left:6px;top:16px;
width:5px;height:5px;border-radius:50%;
}
.care-do li::before{background:#3d7e54;opacity:0.6}
.care-dont li::before{background:#a14848;opacity:0.55}
.care-col strong{font-weight:600;color:var(--ink)}
@media (max-width:680px){
.care-glance{grid-template-columns:1fr}
.care-col + .care-col{border-left:none;border-top:1px solid var(--line)}
}
/* Verzending: quick-facts strip */
.ship-facts{
display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
margin:24px 0 32px;padding:0;
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
}
.ship-fact{
padding:20px 8px;
text-align:center;
border-right:1px solid var(--line);
transition:background .25s ease;
}
.ship-fact:last-child{border-right:none}
.ship-fact:hover{background:rgba(138,90,59,0.03)}
.ship-fact-icon{color:var(--accent);width:32px;height:32px;margin:0 auto 8px}
.ship-fact-icon svg{width:100%;height:100%}
.ship-fact-val{font-family:"Cormorant Garamond","Source Serif 4",Georgia,serif;font-size:26px;font-weight:500;letter-spacing:-.01em;line-height:1.1;color:var(--ink);margin-bottom:2px}
.ship-fact-lbl{margin:0}
@media (max-width:640px){
.ship-facts{grid-template-columns:1fr;}
.ship-fact{border-right:none;border-bottom:1px solid var(--line);padding:14px 8px}
.ship-fact:last-child{border-bottom:none}
}
/* Retour: in-het-kort kaart bovenaan */
.retour-summary{
margin:20px 0 32px;
padding:18px 22px;
background:#fff;
border:1px solid var(--line);
border-radius:8px;
}
.retour-summary-row{
display:flex;align-items:flex-start;gap:12px;
padding:8px 0;
border-bottom:1px solid var(--line);
}
.retour-summary-row:last-child{border-bottom:none}
.retour-icon{
flex:0 0 28px;width:28px;height:28px;
display:inline-flex;align-items:center;justify-content:center;
border-radius:50%;
margin-top:1px;
}
.retour-icon svg{width:16px;height:16px}
.retour-yes{background:rgba(67,140,90,0.12);color:#3d7e54}
.retour-no{background:rgba(173,82,82,0.12);color:#a14848}
.retour-info{background:rgba(138,90,59,0.12);color:var(--accent)}
.retour-summary-row strong{color:var(--ink)}
/* Verhaal-pagina: ornament-strip + dropcap */
.verhaal-prose .verhaal-ornament{
max-width:240px;margin:8px 0 24px;
opacity:0.85;
}
.verhaal-prose .verhaal-ornament svg{width:100%;height:auto;display:block}
.verhaal-prose .verhaal-ornament svg circle{
transform-box:fill-box;transform-origin:center;
animation:verhaal-orn 6s ease-in-out infinite;
}
.verhaal-prose .verhaal-ornament svg circle:nth-of-type(4n){animation-delay:-1.2s}
.verhaal-prose .verhaal-ornament svg circle:nth-of-type(4n+1){animation-delay:-2.4s}
.verhaal-prose .verhaal-ornament svg circle:nth-of-type(4n+2){animation-delay:-3.6s}
@keyframes verhaal-orn{
0%,100%{transform:scale(1);opacity:0.55}
50%{transform:scale(1.08);opacity:0.85}
}
.verhaal-first{position:relative;clear:both}
.dropcap{
float:left;
font-family:"Cormorant Garamond","Source Serif 4",Georgia,serif;
font-size:74px;
line-height:0.85;
font-weight:500;
color:var(--accent);
padding:8px 12px 0 0;
margin-top:2px;
letter-spacing:-.02em;
}
@media (max-width:520px){
.dropcap{font-size:58px;padding:4px 10px 0 0}
}
@media (prefers-reduced-motion:reduce){
.verhaal-prose .verhaal-ornament svg circle{animation:none}
}
/* Contact-pagina */
.contact-prose .lead{max-width:60ch}
.contact-card{
display:flex;gap:20px;align-items:center;
margin:28px 0 36px;
padding:24px 28px;
background:#fff;
border:1px solid var(--line);
border-left:3px solid var(--accent);
border-radius:8px;
box-shadow:0 4px 16px rgba(42,37,32,.04);
}
.contact-card-art{flex:0 0 96px;width:96px}
.contact-card-art svg{width:100%;height:auto;display:block}
.contact-card-art .env-flap{
transform-box:fill-box;transform-origin:center 14px;
animation:env-flutter 5s ease-in-out infinite;
}
.contact-card-art .env-stamp{animation:env-pulse 3s ease-in-out infinite}
.contact-card-body{flex:1;min-width:0}
.contact-label{margin-bottom:4px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--accent)}
.contact-mail{
display:inline-block;
font-family:"Cormorant Garamond","Source Serif 4",Georgia,serif;
font-size:clamp(24px,3vw,30px);
font-weight:500;
letter-spacing:-.01em;
color:var(--ink);
border-bottom:1px solid var(--accent-soft);
padding-bottom:2px;
transition:color .2s ease,border-color .2s ease;
}
.contact-mail:hover{color:var(--accent);border-bottom-color:var(--accent)}
.contact-sub{margin:6px 0 0}
.contact-not{padding-left:1.2em;margin:8px 0 12px}
.contact-not li{margin:4px 0;color:var(--muted)}
@media (max-width:640px){
.contact-card{flex-direction:row;padding:18px 20px;gap:14px}
.contact-card-art{flex:0 0 64px;width:64px}
}
@keyframes env-flutter{
0%,100%{transform:rotate(0deg)}
50%{transform:rotate(-2deg)}
}
@keyframes env-pulse{
0%,100%{opacity:0.55;transform:scale(1)}
50%{opacity:0.8;transform:scale(1.08)}
}
@media (prefers-reduced-motion:reduce){
.contact-card-art .env-flap,.contact-card-art .env-stamp{animation:none}
}
.contact-form{
background:var(--bg-soft);
border:1px solid var(--line);
border-radius:14px;
padding:24px;
margin:24px 0 32px;
display:flex;flex-direction:column;gap:16px;
}
.contact-row{display:flex;flex-direction:column;gap:6px}
.contact-row label{font-size:14px;font-weight:600;color:var(--ink)}
.contact-row input,.contact-row textarea{
font:inherit;
padding:10px 12px;
border:1px solid var(--line);
border-radius:8px;
background:#fff;
color:var(--ink);
resize:vertical;
}
.contact-row input:focus,.contact-row textarea:focus{
outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(122,77,49,.18);
}
.contact-row textarea{min-height:140px;font-family:inherit}
.contact-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:6px}
.contact-actions .btn-big{margin-top:0}
.contact-privacy{margin:0}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.notice-success{
background:#eef2e6;
border:1px solid #b9c7a4;
color:#3d5a1a;
}
/* Uit de gids (homepage editorial strip) */
.home-gids{max-width:1100px;margin:64px auto;padding:0 24px}
.home-gids-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:20px}
.home-gids-head .section-title{margin:0}
.home-gids-all{font-size:14px;color:var(--accent);border-bottom:1px solid transparent;transition:border-color .2s ease}
.home-gids-all:hover{border-bottom-color:var(--accent)}
.home-gids-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.home-gids-card{
display:flex;flex-direction:column;gap:8px;
padding:22px 22px 20px;
background:#fff;
border:1px solid var(--line);
border-radius:8px;
text-decoration:none;color:inherit;
transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
position:relative;overflow:hidden;
}
.home-gids-card::before{
content:"";position:absolute;top:0;left:0;right:0;height:3px;
background:linear-gradient(90deg, var(--accent-soft), var(--accent));
transform:scaleX(0);transform-origin:left;
transition:transform .35s ease;
}
.home-gids-card:hover{border-color:var(--accent-soft);transform:translateY(-2px);box-shadow:0 6px 24px rgba(42,37,32,.06)}
.home-gids-card:hover::before{transform:scaleX(1)}
.home-gids-kicker{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);font-weight:600}
.home-gids-title{font-family:"Cormorant Garamond","Source Serif 4",Georgia,serif;font-size:22px;font-weight:500;letter-spacing:-.005em;margin:0;line-height:1.2;text-wrap:balance}
.home-gids-short{font-size:14.5px;color:var(--muted);line-height:1.5;margin:0;flex:1}
.home-gids-cta{font-size:14px;color:var(--accent);margin-top:4px;display:inline-flex;align-items:center;gap:6px;transition:gap .25s ease}
.home-gids-card:hover .home-gids-cta{gap:10px}
@media (max-width:780px){
.home-gids-grid{grid-template-columns:1fr;gap:14px}
.home-gids{margin:48px auto}
}
/* 404 page */
.not-found{max-width:54ch;padding:48px 0 64px;text-align:left}
.not-found h1{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;font-size:clamp(40px,6vw,64px);letter-spacing:-.02em;line-height:1.02;margin:0 0 16px}
.not-found .btn-big{width:auto;max-width:280px}
.lost-sheep{width:240px;margin:0 0 8px;display:block}
.lost-sheep svg{width:100%;height:auto}
.lost-sheep-body, .lost-sheep-head, .lost-sheep-ear-l, .lost-sheep-ear-r,
.lost-sheep-eye, .lost-sheep-shadow, .lost-question text{
transform-box:fill-box;
transform-origin:center;
}
.lost-sheep-body{animation:lost-wander 3.6s ease-in-out infinite}
.lost-sheep-head{animation:lost-look-around 4.4s ease-in-out infinite;transform-origin:left center}
.lost-sheep-ear-r{animation:lost-ear .9s ease-in-out infinite}
.lost-sheep-ear-l{animation:lost-ear 1.1s ease-in-out infinite}
.lost-sheep-eye{animation:lost-blink 4s linear infinite}
.lost-sheep-shadow{animation:lost-shadow 3.6s ease-in-out infinite}
.lost-question text:nth-child(1){animation:lost-q 3s ease-in-out infinite}
.lost-question text:nth-child(2){animation:lost-q 3s ease-in-out infinite -0.7s}
.lost-question text:nth-child(3){animation:lost-q 3s ease-in-out infinite -1.4s}
@keyframes lost-wander{
0%, 100%{transform:translateX(0)}
50%{transform:translateX(-4px)}
}
@keyframes lost-shadow{
0%, 100%{transform:scaleX(1) translateX(0)}
50%{transform:scaleX(0.92) translateX(-4px)}
}
@keyframes lost-look-around{
0%, 25%, 100%{transform:rotate(0deg)}
35%{transform:rotate(-10deg)}
50%{transform:rotate(-10deg)}
65%{transform:rotate(6deg)}
80%{transform:rotate(6deg)}
}
@keyframes lost-ear{
0%, 100%{transform:rotate(0deg)}
50%{transform:rotate(-14deg)}
}
@keyframes lost-blink{
0%, 92%, 100%{transform:scaleY(1)}
95%, 97%{transform:scaleY(0.1)}
}
@keyframes lost-q{
0%, 100%{transform:translateY(0);opacity:1}
50%{transform:translateY(-6px);opacity:0.5}
}
@media (prefers-reduced-motion: reduce){
.lost-sheep-body, .lost-sheep-head, .lost-sheep-ear-l, .lost-sheep-ear-r,
.lost-sheep-eye, .lost-sheep-shadow, .lost-question text{animation:none}
}
/* empty cart with featured suggestions */
.empty-cart{padding:24px 0 8px;max-width:none}
.empty-cart .lead{font-size:22px;margin:0 0 6px;text-wrap:balance}
.empty-cart-art{display:block;margin:0 auto 12px;width:140px}
.empty-cart-art svg{width:100%;height:auto}
.empty-cart-art .basket-body{transform-box:fill-box;transform-origin:center;animation:basket-rock 4.5s ease-in-out infinite}
@keyframes basket-rock{
0%, 100%{transform:rotate(-2deg)}
50%{transform:rotate(2deg)}
}
@media (prefers-reduced-motion: reduce){.empty-cart-art .basket-body{animation:none}}
/* sticky mobile buy-bar (productpagina) */
.sticky-buy{display:none}
@media(max-width:680px){
.sticky-buy{
display:none;
position:fixed;
left:0;right:0;bottom:0;
background:var(--bg);
border-top:1px solid var(--line);
padding:10px 16px;
box-shadow:0 -8px 24px -12px rgba(42,37,32,.25);
align-items:center;
gap:12px;
z-index:50;
}
.sticky-buy.visible{display:flex}
.sticky-buy-info{flex:1;display:flex;flex-direction:column;min-width:0}
.sticky-buy-info strong{font-size:14px;font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sticky-buy .btn{flex-shrink:0;padding:10px 18px;font-size:14px}
body.sticky-buy-visible{padding-bottom:72px}
}
.tile-img{aspect-ratio:4/3;width:100%;object-fit:cover;background:linear-gradient(135deg,#fbf5e8 0%,#efe5d0 100%);transition:transform .45s ease;display:block;border-bottom:1px solid var(--line)}
.tile-body{padding:14px 16px 18px;display:flex;flex-direction:column;flex:1}
.tile-kicker{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.tile-name{font-weight:500;font-size:17px;letter-spacing:-.005em}
.tile-short{font-size:14px;margin:4px 0 10px;line-height:1.45}
.tile-price{font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums;font-weight:500;margin-top:auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.tile-price-from{font-size:11px;letter-spacing:0.04em;text-transform:uppercase;background:var(--accent);color:#fff;font-weight:700;padding:2px 7px;border-radius:999px}
.tile-price-amount{font-weight:600;color:var(--accent);font-size:17px}
.tile-price .scarcity-badge{margin-left:auto;font-size:11px;background:#fff;border:1px solid var(--line);padding:2px 8px;border-radius:999px;color:var(--muted);font-weight:500;letter-spacing:0.02em}
/* page head */
.page-head{margin:0 0 28px}
.page-head h1{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:clamp(32px,5vw,44px);letter-spacing:-.02em;margin:0 0 12px}
.cat-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.cat-tab{border:1px solid var(--line);padding:6px 14px;border-radius:999px;font-size:14px}
.cat-tab.on{background:var(--ink);color:var(--bg-soft);border-color:var(--ink)}
/* product */
.product{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.product-media img{border-radius:12px;background:var(--bg-soft);aspect-ratio:1/1;object-fit:cover;width:100%}
.product-info h1{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:44px;letter-spacing:-.02em;margin:6px 0 8px}
.crumb{font-size:13px;letter-spacing:.06em;text-transform:uppercase;margin:0 0 4px}
.lead{font-size:19px;color:var(--muted);margin:0 0 16px;text-wrap:balance}
.desc{margin:0 0 24px;max-width:54ch}
.buy{display:flex;flex-direction:column;gap:16px;margin-bottom:24px}
.size-tiles{border:0;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.size-tiles legend{font-size:13px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;padding:0;margin:0 0 8px;width:100%}
.size-tile{position:relative;cursor:pointer}
.size-tile input{position:absolute;opacity:0;pointer-events:none}
.size-tile-inner{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--bg-soft);transition:border-color .15s ease,background .15s ease;min-height:74px}
.size-tile-name{font-size:14px;font-weight:500}
.size-tile-price{font-size:15px;font-variant-numeric:tabular-nums;color:var(--ink)}
.size-tile-stock{font-size:12px;color:var(--muted)}
.size-tile-stock.low{color:var(--warn)}
.size-tile-stock.oos{color:#9a3a3a}
.size-tile:hover .size-tile-inner{border-color:var(--accent-soft)}
.size-tile input:checked + .size-tile-inner{border-color:var(--accent);background:#fff;box-shadow:inset 0 0 0 1px var(--accent)}
.size-tile.oos{opacity:.55;cursor:not-allowed}
.size-tile.oos:hover .size-tile-inner{border-color:var(--line)}
.single-variant{margin:0;display:flex;align-items:baseline;gap:14px;font-variant-numeric:tabular-nums}
.single-variant-size{font-size:14px;color:var(--muted)}
.single-variant-price{font-size:22px;font-weight:500;color:var(--ink)}
.single-variant .size-tile-stock{font-size:12px}
.buy .btn{align-self:flex-start}
.buy .btn[disabled]{opacity:.5;cursor:not-allowed}
.specs{display:grid;grid-template-columns:160px 1fr;gap:8px 20px;margin:0;font-size:14px}
.specs dt{color:var(--muted)}
.specs dd{margin:0}
.specs-block .specs-group{margin-top:18px}
.specs-block .specs-group:first-of-type{margin-top:0}
.specs-subhead{font-size:12px;color:var(--accent);text-transform:uppercase;letter-spacing:.08em;margin:0 0 8px;font-weight:600}
@media (max-width:560px){
.specs{grid-template-columns:1fr;gap:2px 0}
.specs dt{margin-top:8px;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.specs dt:first-of-type{margin-top:0}
}
/* gallery: CSS-only main + thumbs (radio + sibling-selector) */
.gallery{position:relative}
.gallery-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.gallery-main{position:relative;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:var(--bg-soft)}
.gallery-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s ease}
#gal-main:checked ~ .gallery-main .g-main,
#gal-d1:checked ~ .gallery-main .g-d1,
#gal-d2:checked ~ .gallery-main .g-d2{opacity:1}
.gallery-thumbs{display:flex;gap:10px;margin-top:12px}
.gallery-thumb{flex:1;cursor:pointer;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--bg-soft);aspect-ratio:4/3;transition:border-color .15s ease}
.gallery-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.gallery-thumb:hover{border-color:var(--accent-soft)}
#gal-main:checked ~ .gallery-thumbs .thumb-main,
#gal-d1:checked ~ .gallery-thumbs .thumb-d1,
#gal-d2:checked ~ .gallery-thumbs .thumb-d2{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
#gal-main:focus-visible ~ .gallery-thumbs .thumb-main,
#gal-d1:focus-visible ~ .gallery-thumbs .thumb-d1,
#gal-d2:focus-visible ~ .gallery-thumbs .thumb-d2{outline:2px solid var(--accent);outline-offset:2px}
/* product-blocks: rustige secties onder de hero */
.product-block{max-width:760px;margin:40px auto 0;padding:24px 0 0;border-top:1px solid var(--line)}
.product-block:first-of-type{margin-top:56px}
.block-title{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;font-size:24px;letter-spacing:-.01em;margin:0 0 16px}
.block-note{margin:0 0 14px;font-size:14px;line-height:1.55;max-width:62ch}
.block-note.small{font-size:13px}
/* warmth-bar */
.warmth-meter{max-width:520px;margin:8px 0 14px}
.warmth-bar{display:flex;gap:6px;margin:0}
.warmth-step{
flex:1;height:20px;border-radius:6px;
background:var(--line);
position:relative;overflow:hidden;
}
.warmth-step.on{
background:linear-gradient(90deg, #f5d28a 0%, #e2a45e 60%, #c97a3a 100%);
box-shadow:inset 0 0 0 1px rgba(170,90,30,.4);
animation:warmth-fill .55s cubic-bezier(.22,.61,.36,1) backwards;
}
.warmth-labels{display:flex;gap:6px;margin:8px 0 0}
.warmth-label{flex:1;text-align:center;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:500;text-wrap:balance}
.warmth-label.done{color:var(--ink)}
.warmth-label.on{color:#c97a3a;font-weight:700}
@media (max-width:640px){
.warmth-label{font-size:10px;letter-spacing:.03em}
}
.warmth-step.on:nth-child(1){animation-delay:.05s}
.warmth-step.on:nth-child(2){animation-delay:.18s}
.warmth-step.on:nth-child(3){animation-delay:.31s}
.warmth-step.on:nth-child(4){animation-delay:.44s}
@keyframes warmth-fill{
from{transform:scaleX(0);transform-origin:left;background:var(--line)}
to{transform:scaleX(1)}
}
@media (prefers-reduced-motion:reduce){
.warmth-step.on{animation:none}
}
/* size-guide tabel */
.size-table{width:100%;border-collapse:collapse;font-size:14px}
.size-table th,.size-table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
.size-table th{color:var(--muted);font-weight:500;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.size-table tr:last-child td{border-bottom:0}
.size-table .size-table-size{font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap;padding-right:24px;font-weight:500}
.size-table .size-table-bed{font-weight:500;color:var(--ink);white-space:nowrap;padding-right:16px}
.size-table .size-table-detail{font-size:13px}
@media (max-width:560px){
.size-table .size-table-detail,
.size-table thead th:last-child{display:none}
}
/* whats included */
.check-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.check-list li{padding-left:24px;position:relative;font-size:15px;line-height:1.5}
.check-list li::before{content:"";position:absolute;left:0;top:8px;width:12px;height:6px;border-left:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);transform:rotate(-45deg)}
/* wool chips */
.wool-chips{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.wool-chip{position:relative;border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--bg-soft)}
.wool-chip.on{border-color:var(--accent);background:#fff;box-shadow:inset 0 0 0 1px var(--accent)}
.wool-chip strong{display:block;font-size:15px;font-weight:500;padding-right:80px}
.wool-chip span.small{display:block;margin-top:2px;font-size:13px;line-height:1.4}
.wool-chip:not(.on) strong{padding-right:0}
.wool-chip-tag{position:absolute;top:10px;right:12px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
@media(max-width:380px){
.wool-chip strong{padding-right:0}
.wool-chip-tag{position:static;display:inline-block;margin-top:6px}
}
/* Interactieve wol-kiezer in de koop-form (maat × ras-configurator) */
.wool-select{margin:0 0 16px}
.wool-select-q{margin:0 0 6px}
.wool-select-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.wool-opt{position:relative;display:block;cursor:pointer;border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--bg-soft);transition:border-color .15s ease,background .15s ease}
.wool-opt input{position:absolute;opacity:0;pointer-events:none}
.wool-opt:hover{border-color:var(--accent-soft)}
.wool-opt.on{border-color:var(--accent);background:#fff;box-shadow:inset 0 0 0 1px var(--accent)}
.wool-opt:focus-within{border-color:var(--accent);outline:2px solid var(--accent-soft);outline-offset:1px}
.wool-opt-name{display:block;font-size:15px;font-weight:500}
.wool-opt-note{display:block;margin-top:2px;line-height:1.4}
.wool-select-note{margin:8px 0 0}
/* Mobiel: rassen compact in 2 kolommen, toelichting alleen bij het gekozen ras.
Zo blijft de maat-keuze (de primaire actie) hoger op het scherm. */
@media(max-width:560px){
.wool-select-opts{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.wool-opt{padding:10px 12px;min-width:0}
.wool-opt-name{font-size:14px}
.wool-opt-note{display:none}
.wool-opt.on .wool-opt-note{display:block}
}
@media(max-width:740px){
.product{grid-template-columns:1fr;gap:24px}
/* Grid-item moet kunnen krimpen tot de 1fr-track; zonder min-width:0 houdt
min-content van de binnenste grids (maat-tegels, wol) de kolom breder dan
de viewport en valt de rechterkolom buiten beeld. */
.product-media,.product-info{min-width:0}
.product-info h1{font-size:36px}
.product-block{margin-top:32px;padding-top:20px}
.specs{grid-template-columns:1fr;gap:2px 0}
.specs dt{margin-top:10px}
}
/* cart */
.cart-list{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line);margin:0 0 24px}
.cart-row{display:grid;grid-template-columns:64px 1fr auto auto auto;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.cart-thumb{width:64px;height:64px;border-radius:8px;object-fit:cover;background:var(--bg-soft)}
.cart-row-body{min-width:0}
.cart-row-body .cart-row-name{font-weight:500}
.cart-row-qty{display:flex;gap:0;align-items:center;border:1px solid var(--line);border-radius:999px;background:var(--bg-soft);overflow:hidden}
.qty-form{display:contents}
.qty-btn{background:transparent;border:0;width:44px;height:44px;font-size:18px;line-height:1;cursor:pointer;color:var(--ink);padding:0;display:inline-flex;align-items:center;justify-content:center}
.qty-btn:hover{color:var(--accent);background:rgba(138,90,59,.06)}
.qty-value{min-width:28px;text-align:center;font-variant-numeric:tabular-nums;font-size:15px}
.cart-row-total{font-variant-numeric:tabular-nums;font-weight:500;min-width:60px;text-align:right}
.cart-row-remove .remove-btn{width:32px;height:32px;color:var(--muted);border-radius:6px}
.cart-row-remove .remove-btn:hover{color:#9a3a3a;background:rgba(154,58,58,.06)}
@media(max-width:640px){
.cart-row{grid-template-columns:54px 1fr auto;grid-template-areas:"img body total" "img qty remove";row-gap:8px}
.cart-thumb{grid-area:img;width:54px;height:54px}
.cart-row-body{grid-area:body}
.cart-row-total{grid-area:total}
.cart-row-qty{grid-area:qty;justify-self:start}
.cart-row-remove{grid-area:remove;justify-self:end}
}
.cart-row.submitting{opacity:.5;transition:opacity .15s ease}
.qty-btn:disabled,.qty-btn[disabled]{opacity:.35;cursor:not-allowed}
.totals{max-width:380px;margin-left:auto;border:1px solid var(--line);padding:20px 22px;border-radius:12px;background:var(--bg-soft)}
.totals > div{display:flex;justify-content:space-between;margin:6px 0;font-variant-numeric:tabular-nums}
.totals .total{font-size:18px;border-top:1px solid var(--line);margin-top:10px;padding-top:10px}
.empty{padding:40px;text-align:center;border:1px dashed var(--line);border-radius:12px;color:var(--muted)}
/* checkout */
.layout-2col{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:start}
.checkout-form label{display:block;margin:8px 0;font-size:14px;color:var(--muted)}
.checkout-form input{display:block;width:100%;margin-top:4px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg-soft);color:var(--ink)}
.checkout-form .row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.checkout-form h2{font-family:"Cormorant Garamond",Georgia,serif;font-size:24px;font-weight:500;margin:18px 0 8px}
.checkout-summary{background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;padding:20px 22px;position:sticky;top:88px}
.checkout-summary h2{font-family:"Cormorant Garamond",Georgia,serif;font-size:22px;font-weight:500;margin:0 0 12px}
.sum-row{display:flex;justify-content:space-between;margin:8px 0;font-variant-numeric:tabular-nums}
.sum-row.total{font-size:18px;border-top:1px solid var(--line);padding-top:12px;margin-top:12px}
.notice{background:var(--notice);border:1px solid var(--accent-soft);padding:14px 18px;border-radius:8px;margin-bottom:24px;color:#5a3f1d}
@media(max-width:780px){
.layout-2col{grid-template-columns:1fr;gap:24px}
.checkout-summary{position:static}
.checkout-form .row{grid-template-columns:1fr 1fr}
}
/* thanks */
.thanks{max-width:54ch;padding:40px 0}
.thanks h1{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:clamp(32px,5vw,44px);letter-spacing:-.02em;margin:0 0 16px}
.thanks code{background:var(--bg-soft);padding:2px 6px;border-radius:4px;font-size:.95em}
.thanks-actions{display:flex;flex-wrap:wrap;gap:18px;align-items:center;margin-top:32px}
.thanks-actions .btn-link{font-size:14px}
/* field-hint onder een input (consistent met ship-nl-note pattern) */
.field-hint{margin:-4px 0 12px;font-size:13px}
/* prose pages */
.prose{max-width:62ch;padding:24px 0;font-size:17px}
.prose h1{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:44px;letter-spacing:-.02em;margin:0 0 16px}
.prose h2{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;font-size:24px;margin:36px 0 8px}
.prose p{margin:0 0 14px}
.prose a{border-bottom:1px solid var(--line)}
.prose a:hover{border-bottom-color:var(--accent)}
.prose-outro{margin-top:36px;padding-top:24px;border-top:1px solid var(--line);font-size:15px;color:var(--muted);line-height:2.2}
.prose-outro a{padding:8px 6px;margin:-8px -2px;border-radius:6px}
.prose-outro a:hover{background:rgba(122,77,49,0.06)}
/* Pull-quote voor verhaal-pagina: groot accent-quote-mark + serif */
.pull-quote{
position:relative;
margin:32px 0;
padding:8px 0 8px 56px;
border-left:3px solid var(--accent);
font-family:"Cormorant Garamond",Georgia,serif;
font-size:28px;
font-weight:500;
line-height:1.25;
color:var(--ink);
letter-spacing:-.01em;
font-style:normal;
}
.pull-quote::before{
content:"\201C";
position:absolute;
left:14px;top:-6px;
font-family:"Cormorant Garamond",Georgia,serif;
font-size:64px;
font-weight:600;
color:var(--accent);
line-height:1;
opacity:0.75;
}
/* Weetjes h2-markers: kleine icon-badges voor elke sectie */
.weetjes-prose .weetje-h2{
position:relative;
padding-left:48px;
margin-top:44px;
}
.weetjes-prose .weetje-h2::before{
content:"";
position:absolute;
left:0;top:50%;
width:34px;height:34px;
transform:translateY(-50%);
border-radius:999px;
background:var(--bg-soft);
border:1px solid var(--accent-soft);
background-repeat:no-repeat;
background-position:center;
background-size:18px 18px;
transition:transform .35s ease,background-color .25s ease;
}
.weetjes-prose .weetje-h2:hover::before{
transform:translateY(-50%) rotate(-8deg) scale(1.08);
background-color:#fff;
}
/* SVG-iconen als data-uri's; geen extra http-requests, geen CSP-violation. */
.weetjes-prose .weetje-h2[data-icon="droplet"]::before{
background-image:url("data:image/svg+xml;utf8,");
}
.weetjes-prose .weetje-h2[data-icon="flame"]::before{
background-image:url("data:image/svg+xml;utf8,");
}
.weetjes-prose .weetje-h2[data-icon="spark"]::before{
background-image:url("data:image/svg+xml;utf8,");
}
.weetjes-prose .weetje-h2[data-icon="hourglass"]::before{
background-image:url("data:image/svg+xml;utf8,");
}
.weetjes-prose .weetje-h2[data-icon="wave"]::before{
background-image:url("data:image/svg+xml;utf8,");
}
.weetjes-prose .weetje-h2[data-icon="sheep"]::before{
background-image:url("data:image/svg+xml;utf8,");
}
.weetjes-prose .weetje-h2[data-icon="leaf"]::before{
background-image:url("data:image/svg+xml;utf8,");
}
@media (prefers-reduced-motion: reduce){
.weetjes-prose .weetje-h2:hover::before{transform:translateY(-50%)}
}
/* footer */
.foot{position:relative;border-top:1px solid var(--line);background:linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 20%, #ede4cf 100%);margin-top:96px;font-size:14px;color:var(--muted);overflow:hidden}
.foot-scene{
display:block;width:100%;height:64px;
margin:0;line-height:0;
pointer-events:none;
}
.foot-scene svg{width:100%;height:100%;display:block;overflow:visible}
.foot-sheep ellipse:first-child{transform-box:fill-box;transform-origin:center;animation:foot-sheep-shadow 5s ease-in-out infinite}
.foot-sheep{transform-origin:center bottom}
@keyframes foot-sheep-shadow{
0%,100%{transform:scaleX(1);opacity:0.18}
50%{transform:scaleX(0.85);opacity:0.10}
}
.foot-grass path{transform-box:fill-box;transform-origin:bottom center;animation:foot-grass-sway 4s ease-in-out infinite}
.foot-grass path:nth-child(2){animation-delay:-0.7s}
.foot-grass path:nth-child(3){animation-delay:-1.4s}
.foot-grass path:nth-child(4){animation-delay:-2.1s}
@keyframes foot-grass-sway{
0%,100%{transform:rotate(0deg)}
50%{transform:rotate(3deg)}
}
@media (prefers-reduced-motion: reduce){
.foot-sheep ellipse:first-child,.foot-grass path{animation:none}
}
/* Footer CTA-strip: 'Mail ons. Een mens leest mee.' */
.foot-cta{
max-width:1080px;margin:0 auto;padding:48px 24px 8px;
}
.foot-cta-inner{
display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:end;
padding-bottom:40px;
border-bottom:1px solid rgba(122,77,49,0.12);
}
.foot-cta-kicker{
font-size:12px;letter-spacing:.12em;text-transform:uppercase;
color:var(--accent);font-weight:600;
margin:0 0 12px;
}
.foot-cta-title{
font-family:"Cormorant Garamond","Source Serif 4",Georgia,serif;
font-size:clamp(28px,3.4vw,42px);
font-weight:500;letter-spacing:-.015em;line-height:1.05;
color:var(--ink);
margin:0 0 14px;
text-wrap:balance;
}
.foot-cta-title em{font-style:normal;color:var(--accent)}
.foot-cta-sub{
margin:0;max-width:48ch;
font-size:15px;line-height:1.55;color:var(--muted);
}
.foot-cta-action{
display:flex;flex-direction:column;align-items:flex-start;gap:12px;
}
.foot-cta-mail{
display:inline-flex;align-items:center;gap:14px;
padding:14px 24px;
background:#fff;
border:1px solid var(--accent-soft);
border-radius:999px;
font-family:"Cormorant Garamond","Source Serif 4",Georgia,serif;
font-size:22px;font-weight:500;letter-spacing:-.005em;
color:var(--ink);
box-shadow:0 4px 18px rgba(122,77,49,0.10);
transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.foot-cta-mail:hover{
transform:translateY(-2px);
border-color:var(--accent);
box-shadow:0 8px 24px rgba(122,77,49,0.18);
}
.foot-cta-mail-arrow{
color:var(--accent);font-size:18px;
transition:transform .25s ease;
}
.foot-cta-mail:hover .foot-cta-mail-arrow{transform:translateX(4px)}
.foot-cta-meta{
margin:0;padding-left:4px;
font-size:13px;color:var(--muted);
display:inline-flex;align-items:center;gap:8px;
}
.foot-dot{
display:inline-block;width:8px;height:8px;border-radius:50%;
background:#4a9b6a;
box-shadow:0 0 0 3px rgba(74,155,106,0.18);
animation:foot-dot-pulse 2.4s ease-in-out infinite;
}
@keyframes foot-dot-pulse{
0%,100%{box-shadow:0 0 0 3px rgba(74,155,106,0.18)}
50%{box-shadow:0 0 0 6px rgba(74,155,106,0.06)}
}
.foot-inner{max-width:1080px;margin:0 auto;padding:40px 24px 32px;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px;align-items:start}
.foot-col h2,.foot-col h3{
font-family:"Cormorant Garamond","Source Serif 4",Georgia,serif;
font-size:17px;font-weight:500;letter-spacing:-.005em;
color:var(--ink);margin:0 0 16px;
}
.foot-col a{
display:block;
padding:5px 0;
color:var(--muted);border-bottom:none;
transition:color .2s ease,transform .2s ease;
}
.foot-col a span{display:inline-block;transition:transform .2s ease}
.foot-col a:hover{color:var(--ink)}
.foot-col a:hover span{transform:translateX(3px)}
.foot-brand-mark{font-family:"Cormorant Garamond",Georgia,serif;font-size:28px;font-weight:600;letter-spacing:-.018em;color:var(--ink);display:inline-block;padding:0;border-bottom:none}
.foot-brand-mark em{font-style:normal;color:var(--accent);font-size:32px;font-weight:900}
.foot-brand-mark:hover{color:var(--accent)}
.foot-brand-tagline{margin:14px 0 18px;max-width:30ch;line-height:1.55;color:var(--muted);font-size:14px}
.foot-strand{display:block;width:120px;height:auto;opacity:.55;margin-top:6px}
.foot-strand path{
stroke-dasharray:4 6;
animation:strand-flow 8s linear infinite;
}
@keyframes strand-flow{
to{stroke-dashoffset:-100}
}
@media (prefers-reduced-motion: reduce){
.foot-strand path{animation:none;stroke-dasharray:none}
}
.foot-bottom{border-top:1px solid rgba(122,77,49,0.14);background:transparent}
.foot-bottom-inner{max-width:1080px;margin:0 auto;padding:20px 24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--muted)}
.foot-bottom-sep{color:var(--accent);opacity:0.5;margin:0 4px;font-weight:700}
.foot-bottom-brand{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.foot-bottom-inner a{color:var(--muted);border-bottom:1px solid transparent;padding-bottom:1px}
.foot-bottom-inner a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.foot-legal{display:inline-flex;gap:8px;flex-wrap:wrap}
.foot-legal a{padding:10px 8px;border-radius:6px;line-height:1.2}
.foot-legal a:hover{background:rgba(122,77,49,0.06)}
@media(max-width:900px){
.foot-cta-inner{grid-template-columns:1fr;gap:24px;align-items:start;padding-bottom:28px}
.foot-inner{grid-template-columns:1fr 1fr 1fr;gap:32px;padding:32px 24px 28px}
.foot-brand{grid-column:1 / -1;margin-bottom:4px}
.foot-cta-title{font-size:32px}
}
@media(max-width:540px){
.foot-cta{padding:32px 20px 0}
.foot-cta-kicker{font-size:11px}
.foot-cta-title{font-size:30px;margin-bottom:10px}
.foot-cta-sub{font-size:14.5px}
.foot-cta-action{width:100%}
.foot-cta-mail{font-size:18px;padding:14px 22px;width:100%;justify-content:space-between;box-sizing:border-box}
.foot-cta-meta{padding-left:14px;font-size:12.5px}
.foot-inner{grid-template-columns:repeat(3,1fr);gap:4px 16px;padding:28px 20px 24px}
.foot-brand{grid-column:1 / -1;padding-bottom:8px;border-bottom:1px solid rgba(122,77,49,0.12);margin-bottom:16px}
.foot-brand-mark{font-size:26px}
.foot-brand-mark em{font-size:30px}
.foot-brand-tagline{margin:10px 0 14px;max-width:none;font-size:13.5px}
.foot-strand{width:80px;opacity:.4}
.foot-col h2{font-size:15px;margin:14px 0 8px;letter-spacing:0}
.foot-col a{font-size:14px;padding:4px 0}
.foot-bottom-inner{flex-direction:column;align-items:flex-start;gap:8px;padding:16px 20px}
.foot-bottom-brand{font-size:12.5px;line-height:1.5}
.foot-legal{gap:14px;font-size:12.5px}
.foot-bottom-sep{display:none}
.foot-scene{height:48px}
}
/* admin */
.admin-table{width:100%;border-collapse:collapse;font-size:14px}
.admin-table th,.admin-table td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.admin-table th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:500}
.badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;background:var(--line);color:var(--ink)}
.badge-paid{background:#dcecdf;color:var(--ok)}
.badge-pending,.badge-open{background:#fde9c9;color:var(--warn)}
.badge-failed,.badge-canceled,.badge-expired{background:#f3d3d3;color:#9a3a3a}
.badge-manual-awaiting{background:#e3dccb;color:#5a3f1d}
.visuallyhidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
/* skip-link */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--bg-soft);padding:10px 16px;border-radius:0 0 6px 0;text-decoration:none;font-size:14px;z-index:100}
.skip-link:focus{left:0}
/* ---- conversion + SEO componenten (toegevoegd door conversion-agent) ---- */
/* cart-toast: kleine bevestigingsbanner als product is toegevoegd */
.cart-toast{
display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;justify-content:space-between;
margin:0 0 20px;
padding:14px 18px 14px 16px;
background:#fff;
border:1px solid var(--line);
border-left:3px solid var(--ok);
border-radius:8px;
font-size:14px;color:var(--ink);
}
.cart-toast-text{display:inline-flex;align-items:center;gap:10px}
.cart-toast-text::before{
content:"";
flex-shrink:0;
display:inline-block;
width:18px;height:18px;
border-radius:999px;
background:var(--ok);
background-image:linear-gradient(45deg,transparent 42%,#fff 42% 52%,transparent 52%),linear-gradient(-45deg,transparent 38%,#fff 38% 48%,transparent 48%);
}
.cart-toast-text strong{font-weight:500}
.cart-toast-actions{display:inline-flex;gap:14px;align-items:center;flex-wrap:wrap}
.cart-toast-actions a{font-size:14px;color:var(--muted);text-decoration:none}
.cart-toast-actions a:hover{color:var(--accent);text-decoration:underline}
.cart-toast-actions .cart-toast-cta{color:var(--ink);font-weight:500}
/* free-shipping progress in cart */
.free-ship{margin:14px 0 8px;background:var(--bg-soft);border:1px solid var(--line);border-radius:8px;padding:12px 14px}
.free-ship-text{margin:0 0 8px;display:flex;align-items:center;gap:6px}
.free-ship-text::before{
content:"";
display:inline-block;
width:14px;height:14px;
background:var(--accent-soft);
border-radius:999px;
flex-shrink:0;
background-image:radial-gradient(circle at 30% 30%, #fff 0%, #fff 18%, transparent 19%);
}
.free-ship-bar{
width:100%;height:8px;
background:var(--line);
border-radius:999px;
overflow:hidden;
position:relative;
}
.free-ship-fill{
display:block;height:100%;
background:linear-gradient(90deg, var(--accent-soft) 0%, var(--accent) 100%);
border-radius:999px;
transition:width .8s cubic-bezier(.25,.1,.25,1);
position:relative;
}
.free-ship-fill::after{
content:"";
position:absolute;inset:0;
background:linear-gradient(90deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);
animation:shimmer 2.4s linear infinite;
}
@keyframes shimmer{
0%{transform:translateX(-100%)}
100%{transform:translateX(100%)}
}
/* sort-tabs op /winkel */
.sort-tabs{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;margin-top:14px;font-size:13px}
.sort-tabs .sort-label{color:var(--muted)}
.sort-tab{
padding:4px 10px;
border:1px solid var(--line);
border-radius:999px;
color:var(--muted);
font-size:13px;
}
.sort-tab:hover{color:var(--accent);border-color:var(--accent-soft)}
.sort-tab.on{
color:var(--ink);
border-color:var(--ink);
background:var(--bg-soft);
}
/* category-count chip */
.cat-tab-count{color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px;margin-left:2px}
.cat-tab.on .cat-tab-count{color:var(--bg-soft);opacity:.8}
/* scarcity-badge op product-tegels */
.scarcity-badge{
display:inline-block;
margin-left:8px;
padding:1px 8px;
background:transparent;
border:1px solid var(--warn);
color:var(--warn);
border-radius:999px;
font-size:11px;
font-weight:500;
letter-spacing:.02em;
vertical-align:middle;
}
/* uitverkocht / niet-leverbaar op product-tegels */
.oos-badge{
display:inline-block;
margin-left:auto;
padding:1px 8px;
background:transparent;
border:1px solid var(--line);
color:var(--muted);
border-radius:999px;
font-size:11px;
font-weight:500;
letter-spacing:.02em;
vertical-align:middle;
}
.tile-oos .tile-img{filter:grayscale(.55);opacity:.7}
.tile-oos .tile-price-amount{color:var(--muted)}
/* qty-input ipv 3 plus-knoppen in cart-row */
.qty-form-input{display:contents}
.qty-input{
width:48px;height:44px;
text-align:center;
background:transparent;
border:0;
border-left:1px solid var(--line);
border-right:1px solid var(--line);
font-variant-numeric:tabular-nums;
font-size:15px;
color:var(--ink);
padding:0;
appearance:textfield;
-moz-appearance:textfield;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty-input:focus{outline:none;background:var(--bg-soft)}
.qty-btn-update{padding:0 12px;font-size:12px;background:transparent;border:0}
/* cross-sell-card (productpagina, na 'wat krijg je') */
.cross-sell{margin-top:32px}
.cross-sell-card{
display:flex;gap:16px;align-items:center;
padding:14px 16px;
background:var(--bg-soft);
border:1px solid var(--line);
border-radius:12px;
transition:border-color .15s ease,background .15s ease;
max-width:520px;
margin:0 auto;
}
.cross-sell-card:hover{border-color:var(--accent-soft);background:#fff}
.cross-sell-img{
width:96px;height:72px;
object-fit:cover;
border-radius:8px;
background:var(--bg);
flex-shrink:0;
}
.cross-sell-body{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.cross-sell-kicker{font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--accent);text-transform:uppercase}
.cross-sell-name{font-weight:500;font-size:16px}
.cross-sell-short{font-size:13px;line-height:1.45;margin:2px 0}
.cross-sell-price{font-size:14px;font-variant-numeric:tabular-nums;font-weight:500;margin-top:2px}
/* payment-methods strip in checkout */
.payment-methods{
display:flex;flex-wrap:wrap;gap:6px;
margin:14px 0 12px;
align-items:center;
}
.pm{
display:inline-flex;align-items:center;justify-content:center;
border:1px solid var(--line);
border-radius:5px;
background:#fff;
overflow:hidden;
line-height:0;
}
.pm-logo{
display:block;
width:56px;height:36px;
}
/* edit-cart-link in checkout summary */
.checkout-edit-cart{margin:0 0 12px}
.checkout-edit-cart a{border-bottom:1px solid var(--line);padding-bottom:1px}
.checkout-edit-cart a:hover{color:var(--accent);border-bottom-color:var(--accent)}
/* delivery-window op thanks-pagina */
.delivery-window{
margin:18px 0 0;
padding:12px 16px;
background:var(--bg-soft);
border:1px solid var(--line);
border-radius:8px;
font-size:15px;
}
/* ============================================================
Checkout-form a11y + error states (mei 2026)
- .req-mark: visuele asterisk bij required-velden
- .field-error: validatie-msg onder input
- .field-hint: muted helper-tekst
- .notice-error: rode banner bovenaan form
- .terms-row: checkbox + label row
============================================================ */
.req-mark{color:var(--accent);font-weight:600;margin-left:2px}
.field-hint{display:block;margin:6px 0 0;font-size:13px}
.field-error{
display:block;
margin:6px 0 0;
font-size:13px;
color:#a03020;
font-weight:500;
}
input[aria-invalid="true"],
textarea[aria-invalid="true"]{
border-color:#a03020;
box-shadow:0 0 0 1px #a03020;
}
.notice-error{
background:#fcefe9;
border-color:#d4a89a;
color:#7a2820;
}
.terms-row{
display:flex;
gap:10px;
align-items:flex-start;
margin:18px 0 4px;
cursor:pointer;
font-weight:400;
}
.terms-row input[type="checkbox"]{
width:20px;height:20px;
flex-shrink:0;
margin-top:2px;
accent-color:var(--accent);
cursor:pointer;
}
.terms-row span{flex:1;line-height:1.45}
.terms-row a{text-decoration:underline}
/* :focus-within highlight op input-group-row in checkout: visueel duidelijker
welke regel actief is bij tab-navigatie. */
.checkout-form .row:focus-within{
background:var(--bg-soft);
border-radius:6px;
margin:-4px -8px;
padding:4px 8px;
}
/* Cart-row qty: kleinere gap tussen +/- en input om mis-tap te voorkomen
maar nog niet helemaal geplakt (44×44 touch-target blijft). */
.cart-row-qty{gap:2px}
/* Order-tracking page (/bestelling/{nr}) */
.order-track{display:flex;flex-direction:column;gap:24px;max-width:720px;margin:0 auto}
.order-track-head{margin-bottom:8px}
.order-track-block{background:var(--bg-soft);border:1px solid var(--line);border-radius:8px;padding:18px 22px}
.order-track-block h2{margin:0 0 12px;font-size:18px}
.order-track-status .badge{font-size:14px;padding:4px 10px;display:inline-block;margin-bottom:8px}
.order-track-items{width:100%;border-collapse:collapse}
.order-track-items td{padding:8px 4px;vertical-align:top}
.order-track-items td.qty{width:40px;font-weight:600;color:var(--muted)}
.order-track-items td.amount{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.order-track-items tfoot td{border-top:1px solid var(--line);padding-top:8px}
.order-track-items tr.total td{border-top:2px solid var(--ink);font-size:17px}
.order-track-timeline{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.order-track-timeline li{padding:8px 12px;background:#fff;border-left:2px solid var(--accent-soft);font-size:14px}
.order-track-time{display:block;margin-bottom:2px}
.order-track-help a{color:var(--accent);text-decoration:underline}
/* Mail-me-bij-terugkomst form onder OOS-variant */
.restock-notify{
grid-column: 1 / -1;
margin: -4px 0 8px;
font-size: 13px;
}
.restock-notify > summary{
cursor: pointer;
color: var(--accent);
padding: 4px 0;
list-style: none;
}
.restock-notify > summary::-webkit-details-marker{display:none}
.restock-notify > summary::before{content:"+ ";color:var(--accent);font-weight:600}
.restock-notify[open] > summary::before{content:"\2013 "}
.restock-form{
display: flex;
gap: 8px;
margin-top: 6px;
align-items: stretch;
}
.restock-form input[type="email"]{
flex: 1;
min-width: 0; /* anders houdt de intrinsieke input-breedte de nowrap-knop buiten beeld op smal scherm */
padding: 8px 10px;
font: inherit;
font-size: 16px;
border: 1px solid var(--line);
border-radius: 4px;
}
.restock-form button{
white-space: nowrap;
font-size: 13px;
padding: 6px 12px;
}
/* Restock-wachtlijst-blok onder de koop-knop (los van de size-grid) */
.restock-block{
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--line);
}
.restock-block .restock-notify{
grid-column: auto;
margin: 0;
}
.restock-block .restock-notify + .restock-notify{margin-top: 4px}
.restock-intro{margin:0 0 8px}
.restock-block[hidden]{display:none}
/* Bedankt-pagina status-banner met live-polling */
.status-spinner{
display:inline-block;
width:14px;height:14px;
border:2px solid var(--accent-soft);
border-top-color:var(--accent);
border-radius:50%;
animation:status-spin 0.9s linear infinite;
vertical-align:-2px;
margin-right:6px;
}
@keyframes status-spin{to{transform:rotate(360deg)}}
.status-paid{
background:#e8f0e6;
border-left:3px solid #4a7848;
padding:10px 14px;
border-radius:4px;
}
.status-failed{
background:#fcefe9;
border-left:3px solid #a03020;
padding:10px 14px;
border-radius:4px;
}
/* Maat-keuzehulp op dekbed-productpagina */
.size-helper{margin:0 0 14px}
.size-helper-q{margin:0 0 6px}
.size-helper-buttons{display:flex;flex-wrap:wrap;gap:8px}
.size-helper-btn{
background:var(--bg-soft);
border:1px solid var(--line);
border-radius:6px;
padding:8px 12px;
font:inherit;
font-size:13px;
line-height:1.2;
cursor:pointer;
color:var(--ink);
text-align:left;
min-height:44px;
transition:background-color .15s,border-color .15s;
}
.size-helper-btn:hover,
.size-helper-btn:focus-visible{
background:#fff;
border-color:var(--accent);
outline:none;
}
.size-helper-btn strong{display:block;font-weight:600;font-size:13px}
.size-helper-btn span{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.size-helper-btn-empty{
border-color:#a03020;
background:#fcefe9;
}
.size-helper-btn-empty::after{
content:" (niet beschikbaar)";
color:#a03020;
font-size:11px;
}
.size-tile-suggested{
outline:2px solid var(--accent);
outline-offset:2px;
animation:tile-pulse 1.2s ease-out;
}
@keyframes tile-pulse{
0% {box-shadow:0 0 0 0 rgba(122,77,49,0.4)}
100% {box-shadow:0 0 0 14px rgba(122,77,49,0)}
}
/* Productpagina prijs-anchor onder h1 */
.product-price-anchor{
display:inline-flex;
flex-wrap:wrap;
align-items:center;
gap:6px 10px;
margin:4px 0 16px;
padding:6px 14px 6px 12px;
background:linear-gradient(180deg, #f7ecdc 0%, #efdfc6 100%);
border:1px solid var(--accent-soft);
border-radius:24px;
box-shadow:0 2px 6px rgba(122,77,49,0.08);
font-variant-numeric:tabular-nums;
}
.product-price-from{
font-size:11px;
letter-spacing:0.04em;
background:var(--accent);
color:#fff;
font-weight:700;
padding:3px 8px;
border-radius:999px;
}
.product-price-amount{
font-size:20px;
font-weight:700;
color:var(--accent);
}
.product-price-range{font-size:13px}
/* Gallery-main subtle hover-zoom */
.gallery-main{transition:box-shadow .3s ease}
.gallery-main:hover{box-shadow:0 14px 32px -14px rgba(122,77,49,0.30)}
.gallery-img{transition:opacity .25s ease,transform .6s ease}
.gallery-main:hover .gallery-img{transform:scale(1.03)}
/* Warmte-keuzehulp op /winkel?c=dekbedden */
.warmth-helper{
margin:0 0 24px;
background:var(--bg-soft);
border:1px solid var(--line);
border-radius:8px;
padding:0;
}
.warmth-helper > summary{
list-style:none;
cursor:pointer;
padding:16px 22px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}
.warmth-helper > summary::-webkit-details-marker{display:none}
.warmth-helper > summary::after{
content:"+";
font-size:22px;
color:var(--accent);
font-weight:300;
margin-left:auto;
}
.warmth-helper[open] > summary::after{content:"\2013"}
.warmth-helper-title{font-weight:600;font-size:17px}
.warmth-helper-body{padding:0 22px 18px;display:flex;flex-direction:column;gap:14px}
.warmth-helper-body fieldset{
border:none;
margin:0;
padding:0;
display:flex;
flex-direction:column;
gap:6px;
}
.warmth-helper-body legend{font-size:15px;font-weight:600;margin-bottom:4px}
.warmth-helper-body label{
display:flex;
align-items:center;
gap:8px;
font-weight:400;
font-size:16px;
cursor:pointer;
min-height:32px;
}
.warmth-helper-body input[type="radio"]{
width:18px;height:18px;
accent-color:var(--accent);
cursor:pointer;
}
.warmth-result:empty{display:none}
.warmth-result{
background:#fff;
border:1px solid var(--accent-soft);
border-radius:6px;
padding:12px 16px;
margin-top:6px;
}
.warmth-result-lead{margin:0 0 4px;font-size:13px;color:var(--muted)}
.warmth-result-pick{margin:0 0 4px;font-size:18px;font-weight:600}
.warmth-result-pick a{color:var(--accent);text-decoration:underline}
/* Highlight in product-grid: zachte gloed achter de gekozen tile */
.tile.warmth-pick{
outline:2px solid var(--accent);
outline-offset:2px;
box-shadow:0 0 24px rgba(122,77,49,0.15);
}
/* Admin-toolbar: search + CSV-export naast elkaar */
.admin-toolbar{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin:18px 0}
.admin-toolbar .admin-search{margin:0}
/* Admin order-detail styling */
.admin-detail{display:flex;flex-direction:column;gap:32px;max-width:880px;margin:0 auto}
.admin-block{background:var(--bg-soft);border:1px solid var(--line);border-radius:8px;padding:18px 22px}
.admin-block h2{margin:0 0 12px;font-size:18px}
.admin-totals{margin-top:14px;border-top:1px solid var(--line);width:auto}
.admin-totals td{padding:4px 18px 4px 0}
.admin-totals td:nth-child(2){text-align:right;min-width:120px}
.admin-events{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.admin-events li{padding:8px 12px;background:#fff;border:1px solid var(--line);border-radius:6px;font-size:14px}
.admin-events code{background:transparent;font-weight:600;color:var(--accent)}
.admin-events pre{margin:6px 0 0;font-size:12px;color:var(--muted);overflow-x:auto;white-space:pre-wrap}
.admin-status-form{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.admin-status-form label{display:flex;flex-direction:column;font-size:13px;color:var(--muted)}
.admin-status-form select,
.admin-status-form input{padding:6px 10px;border:1px solid var(--line);border-radius:4px;font:inherit;font-size:14px;min-width:160px}
/* ============================================================
Print stylesheet: bedankt-pagina en cart-overzicht netjes afdrukbaar
============================================================ */
@media print{
.topbar, .foot, .skip-link, .sticky-buy,
.nav, .cart-wrap, .nav-hamburger,
.cart-toast, .free-ship, .empty-cart,
.payment-methods, button, .btn{
display:none !important;
}
body{background:#fff;color:#000}
.page{padding:0;max-width:100%}
a{color:#000;text-decoration:none}
a[href^="http"]::after{content:" (" attr(href) ")";font-size:11px;color:#666}
.notice{border:1px solid #000;background:#fff}
}